refactor: drip stitches exports (#210)

ui/src/components/card/card.styles.ts

@@ -1,6 +1,4 @@
-import { dripStitches } from '@/theme';
+import { styled } from '@/theme';
-
-const { styled } = dripStitches;
 
 export abstract class CardStyles {
   static readonly Container = styled('div', {

ui/src/components/core/avatar/avatar.styles.ts

@@ -1,8 +1,6 @@
 import * as Avatar from '@radix-ui/react-avatar';
 
-import { dripStitches } from '@/theme';
+import { styled } from '@/theme';
-
-const { styled } = dripStitches;
 
 export abstract class AvatarStyles {
   static readonly Root = styled(Avatar.Root, {

ui/src/components/core/button/button-content.styles.ts

@@ -1,7 +1,6 @@
-import { dripStitches } from '../../../theme'; //TODO replace with absolute path
+import { styled } from '@/theme';
-import { Flex, Grid } from '../../layout';
 
-const { styled } = dripStitches;
+import { Flex, Grid } from '../../layout';
 
 export const StyledButtonContentGrid = styled(Grid, {
   gap: '$0h',

ui/src/components/core/button/button-icon.styles.ts

@@ -1,6 +1,4 @@
-import { dripStitches } from '../../../theme'; //TODO replace with absolute path
+import { styled } from '@/theme';
-
-const { styled } = dripStitches;
 
 export const StyledButtonIconSpan = styled('span', {
   all: 'unset',

ui/src/components/core/button/button-spinner.styles.ts

@@ -1,7 +1,6 @@
-import { dripStitches } from '../../../theme'; //TODO replace with absolute path
+import { styled } from '@/theme';
-import { Flex, Grid } from '../../layout';
 
-const { styled } = dripStitches;
+import { Flex, Grid } from '../../layout';
 
 export const StyledButtonSpinnerBox = styled(Flex, {
   alignItems: 'center',

ui/src/components/core/button/button-spinner.tsx

@@ -1,6 +1,7 @@
 import React, { HTMLAttributes, useMemo } from 'react';
 
-import { dripStitches } from '../../../theme'; //TODO replace with absolute path
+import { keyframes } from '@/theme';
+
 import {
   ButtonSpinnerProps,
   StyledButtonSpinnerBox,
@@ -35,8 +36,6 @@ export const ButtonSpinner: React.FC<ButtonSpinnerProps> = (props) => {
   );
 };
 
-const { keyframes } = dripStitches;
-
 const blink = keyframes({
   '0%': { opacity: 0.2 },
   '50%': { opacity: 1 },

ui/src/components/core/button/button.styles.ts

@@ -1,6 +1,6 @@
 import { CSS } from '@stitches/react';
 
-import { dripStitches } from '../../../theme';
+import { styled } from '@/theme';
 
 type StyledButtonProps = React.ComponentPropsWithRef<typeof StyledButton>;
 export interface ButtonProps extends StyledButtonProps {
@@ -149,8 +149,6 @@ const getButtonCompoundVariant = ({
   }
 };
 
-const { styled } = dripStitches;
-
 export const StyledButton = styled('button', {
   all: 'unset',
   cursor: 'pointer',

ui/src/components/core/icon/icon.styles.ts

@@ -1,6 +1,4 @@
-import { dripStitches } from '../../../theme'; //TODO replace for absolute path
+import { styled } from '@/theme';
-
-const { styled } = dripStitches;
 
 export abstract class IconStyles {
   static readonly Container = styled('span', {

ui/src/components/core/input/input-file.styles.ts

@@ -1,7 +1,5 @@
 import { Flex } from '@/components/layout';
-import { dripStitches } from '@/theme';
+import { styled } from '@/theme';
-
-const { styled } = dripStitches;
 
 export abstract class InputFileStyles {
   static readonly Container = styled(Flex, {

ui/src/components/core/input/input.styles.ts

@@ -1,7 +1,6 @@
-import { dripStitches } from '@/theme';
+import { styled } from '@/theme';
 
 import { Icon } from '../icon';
-const { styled } = dripStitches;
 
 const styles = {
   all: 'unset',

ui/src/components/core/separator.styles.ts

@@ -1,6 +1,4 @@
-import { dripStitches } from '@/theme';
+import { styled } from '@/theme';
-
-const { styled } = dripStitches;
 
 export const Separator = styled('hr', {
   borderTop: '1px solid $slate6',

ui/src/components/core/text/text.styles.ts

@@ -1,5 +1,3 @@
-import { dripStitches } from '@/theme';
+import { styled } from '@/theme';
-
-const { styled } = dripStitches;
 
 export const Text = styled('span');

ui/src/components/form/form.styles.ts

@@ -1,7 +1,7 @@
-import { dripStitches } from '../../theme';
+import { styled } from '@/theme';
+
 import { Flex } from '../layout';
 
-const { styled } = dripStitches;
 export abstract class FormStyles {
   static readonly Field = styled(Flex, {
     flexDirection: 'column',

ui/src/components/layout/flex.styles.ts

@@ -1,8 +1,6 @@
 import React from 'react';
 
-import { dripStitches } from '../../theme'; //TODO replace with absolute path
+import { styled } from '@/theme';
-
-const { styled } = dripStitches;
 
 export const Flex = styled('div', {
   display: 'flex',

ui/src/components/layout/grid.styles.ts

@@ -1,6 +1,4 @@
-import { dripStitches } from '../../theme'; //TODO replace with absolute path
+import { styled } from '@/theme';
-
-const { styled } = dripStitches;
 
 export const Grid = styled('div', {
   display: 'grid',

ui/src/components/layout/nav-bar/nav-bar.styles.ts

@@ -1,8 +1,7 @@
-import { dripStitches } from '@/theme';
+import { styled } from '@/theme';
 
 import { Flex } from '../flex.styles';
 
-const { styled } = dripStitches;
 export abstract class NavBarStyles {
   static readonly Container = styled('header', {
     position: 'sticky',

ui/src/components/layout/page/page.styles.ts

@@ -1,6 +1,4 @@
-import { dripStitches } from '@/theme';
+import { styled } from '@/theme';
-
-const { styled } = dripStitches;
 
 export abstract class PageStyles {
   public static readonly Container = styled('div', {

ui/src/components/layout/skeleton.styles.ts

@@ -1,6 +1,4 @@
-import { dripStitches } from '@/theme';
+import { keyframes, styled } from '@/theme';
-
-const { styled, keyframes } = dripStitches;
 
 const SkeletonKeyframes = keyframes({
   '0%': {

ui/src/components/layout/stepper/stepper.styles.ts

@@ -1,6 +1,4 @@
-import { dripStitches } from '../../../theme';
+import { styled } from '@/theme';
-
-const { styled } = dripStitches;
 
 export abstract class StepperStyles {
   static readonly Rail = styled('div', {

ui/src/components/logo/logo.styles.ts

@@ -1,8 +1,7 @@
-import { dripStitches } from '@/theme';
+import { styled } from '@/theme';
 
 import { Flex } from '../layout';
 
-const { styled } = dripStitches;
 export abstract class LogoStyles {
   static readonly Container = styled(Flex, {
     cursor: 'pointer',

ui/src/components/nfa-card/nfa-card.styles.ts

@@ -1,11 +1,9 @@
 import { Link } from 'react-router-dom';
 
-import { dripStitches } from '@/theme';
+import { styled } from '@/theme';
 
 import { Skeleton } from '../layout';
 
-const { styled } = dripStitches;
-
 export const NFACardStyles = {
   Container: styled(Link, {
     display: 'flex',

ui/src/components/nfa-preview/nfa-preview.tsx

@@ -1,8 +1,6 @@
 import { useMemo } from 'react';
 
-import { dripStitches, forwardStyledRef } from '@/theme';
+import { forwardStyledRef, styled } from '@/theme';
-
-const { styled } = dripStitches;
 
 const StyledSVG = styled('svg');
 

ui/src/components/spinner/spinner.styles.ts

@@ -1,6 +1,4 @@
-import { dripStitches } from '@/theme';
+import { styled } from '@/theme';
-
-const { styled } = dripStitches;
 
 export abstract class SpinnerStyles {
   static readonly Container = styled('svg', {

ui/src/components/toast/toast.styles.tsx

@@ -1,12 +1,10 @@
 import * as ToastLib from '@radix-ui/react-toast';
 
-import { dripStitches } from '@/theme';
+import { keyframes, styled } from '@/theme';
 
 import { Icon, IconButton } from '../core';
 import { Flex } from '../layout';
 
-const { styled, keyframes } = dripStitches;
-
 export abstract class ToastStyles {
   static readonly Provider = ToastLib.Provider;
 

ui/src/theme/key-frames.ts

@@ -1,6 +1,4 @@
-import { dripStitches } from './themes';
+import { keyframes } from './themes';
-
-const { keyframes } = dripStitches;
 
 export const KeyFrames = {
   slideUpAndFade: keyframes({

ui/src/theme/themes.ts

@@ -30,7 +30,7 @@ export interface CreateDripStitchesConfig<
   utils?: ConfigType.Utils<Utils>;
 }
 
-export const createDripStitches = <
+const createDripStitches = <
   Prefix extends string = '',
   Media extends {} = {},
   Theme extends {} = {},
@@ -131,4 +131,17 @@ export const createDripStitches = <
   };
 };
 
-export const dripStitches = createDripStitches();
+export const {
+  styled,
+  css,
+  config,
+  globalCss,
+  createTheme,
+  darkTheme,
+  darkThemeSelector,
+  getCssText,
+  keyframes,
+  prefix,
+  theme,
+  reset,
+} = createDripStitches();

ui/src/views/explore/explore.styles.ts

@@ -1,7 +1,5 @@
 import { Flex } from '@/components';
-import { dripStitches } from '@/theme';
+import { styled } from '@/theme';
-
-const { styled } = dripStitches;
 
 export abstract class Explore {
   static readonly Container = styled(Flex, {

ui/src/views/explore/header.styles.ts

@@ -1,7 +1,5 @@
 import { Flex } from '@/components';
-import { dripStitches } from '@/theme';
+import { styled } from '@/theme';
-
-const { styled } = dripStitches;
 
 export abstract class Header {
   static readonly Container = styled(Flex, {

ui/src/views/explore/list-nfas/results.styles.ts

@@ -1,6 +1,4 @@
-import { dripStitches } from '@/theme';
+import { styled } from '@/theme';
-
-const { styled } = dripStitches;
 
 export const ResultsContainer = styled('div', {
   fontSize: '$xl',