@hanzogui/kitchen-sink 3.0.5

package/src/usecases/V5ThemeBuilderOutput.tsx

@@ -0,0 +1,231 @@
+import {
+  Button,
+  Card,
+  H2,
+  H3,
+  H4,
+  Paragraph,
+  Text,
+  Theme,
+  XStack,
+  YStack,
+} from '@hanzo/gui'
+
+import { TEST_IDS } from '../constants/test-ids'
+
+/**
+ * Visual test for v5 theme builder output.
+ *
+ * Tests the documented usage patterns from the docs:
+ * 1. <Theme name="accent"> wrapping components (docs: theme-builder.mdx)
+ * 2. <Button theme="accent"> component prop (docs: config-v5.mdx)
+ * 3. $accentBackground / $accentColor tokens (docs: config-v5.mdx)
+ * 4. $accent1-$accent12 raw tokens
+ *
+ * Open in browser: http://localhost:9000/?test=V5ThemeBuilderOutput&generatedV5=true
+ */
+export function V5ThemeBuilderOutput() {
+  return (
+    <YStack gap="$6" padding="$6" backgroundColor="$background">
+      <YStack gap="$2">
+        <H2>V5 Theme Builder - Accent Theme Tests</H2>
+        <Paragraph color="$color11">
+          Tests documented accent usage patterns from gui.hanzo.ai docs.
+        </Paragraph>
+      </YStack>
+
+      {/* === SECTION 1: <Theme name="accent"> === */}
+      <YStack
+        gap="$3"
+        padding="$4"
+        backgroundColor="$background"
+        borderRadius="$4"
+        borderWidth={2}
+        borderColor="$color7"
+      >
+        <H3 color="$color11">{'<Theme name="accent">'}</H3>
+        <Paragraph size="$2" color="$color11">
+          Expected: first square is the base gray background. Second square should be DARK
+          PURPLE (the accent palette inverted). Text below it should be light/readable
+          against the accent background.
+        </Paragraph>
+
+        <XStack gap="$3" alignItems="flex-start">
+          {/* Baseline: base theme background for comparison */}
+          <YStack gap="$1" alignItems="center">
+            <YStack
+              testID={TEST_IDS.baseBackground}
+              width={100}
+              height={100}
+              backgroundColor="$background"
+              borderRadius="$4"
+            />
+            <Text color="$color11">Base $background</Text>
+          </YStack>
+
+          {/* Accent theme: $background should differ from base */}
+          <Theme name="accent">
+            <YStack gap="$1" alignItems="center">
+              <YStack
+                testID={TEST_IDS.accentThemeBackground}
+                width={100}
+                height={100}
+                backgroundColor="$background"
+                borderRadius="$4"
+              />
+              <Text color="$color11">Accent $background</Text>
+              <Text testID={TEST_IDS.accentThemeColor} color="$color" marginTop="$2">
+                Accent $color text
+              </Text>
+            </YStack>
+          </Theme>
+        </XStack>
+      </YStack>
+
+      {/* === SECTION 2: <Button theme="accent"> === */}
+      <YStack
+        gap="$3"
+        padding="$4"
+        backgroundColor="$background"
+        borderRadius="$4"
+        borderWidth={2}
+        borderColor="$color7"
+      >
+        <H3 color="$color11">{'<Button theme="accent">'}</H3>
+        <Paragraph size="$2" color="$color11">
+          Expected: first button is the default gray surface. Second button should have a
+          PURPLE background with light text — visually distinct from the base button.
+        </Paragraph>
+
+        <XStack gap="$3">
+          <Button testID={TEST_IDS.baseButton} size="$4">
+            Base Button
+          </Button>
+
+          <Button testID={TEST_IDS.accentPropButton} theme="accent" size="$4">
+            Accent Button
+          </Button>
+        </XStack>
+      </YStack>
+
+      {/* === SECTION 3: $accentBackground / $accentColor tokens === */}
+      <YStack
+        gap="$3"
+        padding="$4"
+        backgroundColor="$background"
+        borderRadius="$4"
+        borderWidth={2}
+        borderColor="$color7"
+      >
+        <H3 color="$color11">$accentBackground / $accentColor</H3>
+        <Paragraph size="$2" color="$color11">
+          Expected: square should be a DARK PURPLE — same hue as the accent palette. This
+          is the raw token, not a theme wrapper.
+        </Paragraph>
+
+        <YStack
+          testID={TEST_IDS.accentBgToken}
+          width={100}
+          height={100}
+          backgroundColor="$accentBackground"
+          borderRadius="$4"
+        />
+      </YStack>
+
+      {/* === SECTION 4: $accent1-12 raw palette tokens === */}
+      <YStack
+        gap="$3"
+        padding="$4"
+        backgroundColor="$background"
+        borderRadius="$4"
+        borderWidth={1}
+        borderColor="$borderColor"
+      >
+        <H4>Accent Palette (accent1-12)</H4>
+        <Paragraph size="$2" color="$color11">
+          Expected: a gradient of 12 swatches going from dark purple to light purple. If
+          these are all gray, the accent palette is broken.
+        </Paragraph>
+        <XStack gap="$1">
+          {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((i) => (
+            <YStack
+              key={i}
+              testID={`palette-accent-${i}`}
+              width={40}
+              height={40}
+              backgroundColor={`$accent${i}` as any}
+              borderRadius="$2"
+              alignItems="center"
+              justifyContent="center"
+            >
+              <Text fontSize={10} color={i > 6 ? '$accent1' : '$accent12'}>
+                {i}
+              </Text>
+            </YStack>
+          ))}
+        </XStack>
+      </YStack>
+
+      {/* === SECTION 5: Color child themes === */}
+      <YStack
+        gap="$3"
+        padding="$4"
+        backgroundColor="$background"
+        borderRadius="$4"
+        borderWidth={1}
+        borderColor="$borderColor"
+      >
+        <H4>Color Themes</H4>
+        <Paragraph size="$2" color="$color11">
+          Expected: each card and button should have a distinct tint matching its color
+          name. Yellow should look warm, red should look red, etc.
+        </Paragraph>
+        <XStack gap="$3" flexWrap="wrap">
+          <Theme name="yellow">
+            <Card padding="$3" backgroundColor="$background" minWidth={140}>
+              <Button testID="button-yellow" size="$3">
+                Yellow
+              </Button>
+            </Card>
+          </Theme>
+          <Theme name="red">
+            <Card
+              testID="card-red"
+              padding="$3"
+              backgroundColor="$background"
+              minWidth={140}
+            >
+              <Button testID="button-red" size="$3">
+                Red
+              </Button>
+            </Card>
+          </Theme>
+          <Theme name="green">
+            <Card
+              testID="card-green"
+              padding="$3"
+              backgroundColor="$background"
+              minWidth={140}
+            >
+              <Button testID="button-green" size="$3">
+                Green
+              </Button>
+            </Card>
+          </Theme>
+          <Theme name="blue">
+            <Card
+              testID="card-blue"
+              padding="$3"
+              backgroundColor="$background"
+              minWidth={140}
+            >
+              <Button testID="button-blue" size="$3">
+                Blue
+              </Button>
+            </Card>
+          </Theme>
+        </XStack>
+      </YStack>
+    </YStack>
+  )
+}

package/src/usecases/VariantFontFamily.tsx

@@ -0,0 +1,25 @@
+import { Text, styled } from '@hanzo/gui'
+
+export const Heading = styled(Text, {
+  name: 'Heading',
+  color: '$color',
+
+  variants: {
+    type: {
+      myVariant: {
+        fontFamily: '$body',
+        fontSize: 20,
+        lh: '$10',
+        fow: '$2',
+      },
+    },
+  } as const,
+})
+
+export function VariantFontFamily() {
+  return (
+    <Heading data-testid="heading" type="myVariant" fontSize="$1">
+      H1
+    </Heading>
+  )
+}

package/src/usecases/VariantsOrder.tsx

@@ -0,0 +1,117 @@
+import { Button, Text, View, styled, createStyledContext } from '@hanzo/gui'
+
+export function VariantsOrder() {
+  return (
+    <>
+      <Button testID="button">
+        <Text testID="text1">default</Text>
+        <Text2 testID="text2">20px</Text2>
+        <P testID="text3">30px</P>
+        <P2 testID="text4">40px</P2>
+      </Button>
+
+      {/* Issue #3669: Variant chaining */}
+      <ButtonFrame testID="frame-test-direct" test>
+        <ButtonText testID="text-test-direct">direct test</ButtonText>
+      </ButtonFrame>
+
+      <ButtonFrame2 testID="frame-test2-chained" test2>
+        <ButtonText testID="text-test2-chained">chained test2</ButtonText>
+      </ButtonFrame2>
+    </>
+  )
+}
+
+export const Text2 = styled(Text, {
+  fontFamily: '$body',
+  fontSize: 20,
+  userSelect: 'auto',
+
+  variants: {
+    bold: {
+      true: {
+        fontWeight: '600',
+      },
+    },
+    center: {
+      true: {
+        textAlign: 'center',
+      },
+    },
+    inherit: {
+      false: {
+        fontSize: 15,
+      },
+    },
+  } as const,
+
+  defaultVariants: {
+    inherit: false,
+  },
+})
+
+const P = styled(Text2, {
+  fontSize: 30,
+})
+
+const P2 = styled(Text2, {
+  fontSize: 30,
+
+  variants: {
+    parentVariant: {
+      true: {
+        fontSize: 40,
+      },
+    },
+  } as const,
+
+  defaultVariants: {
+    parentVariant: true,
+  },
+})
+
+// --- Issue #3669: Variant chaining with context ---
+const TestContext = createStyledContext({
+  test: false,
+})
+
+const ButtonFrame = styled(View, {
+  name: 'ButtonFrame',
+  context: TestContext,
+  backgroundColor: 'gray',
+  padding: 10,
+
+  variants: {
+    test: {
+      true: {
+        backgroundColor: 'red',
+      },
+    },
+  } as const,
+})
+
+const ButtonFrame2 = styled(ButtonFrame, {
+  name: 'ButtonFrame2',
+
+  variants: {
+    test2: {
+      true: {
+        test: true, // maps test2 → test
+      },
+    },
+  } as const,
+})
+
+const ButtonText = styled(Text, {
+  name: 'ButtonText',
+  context: TestContext,
+  color: 'black',
+
+  variants: {
+    test: {
+      true: {
+        color: 'white',
+      },
+    },
+  } as const,
+})

package/src/usecases/ZIndex.tsx

@@ -0,0 +1,155 @@
+import React from 'react'
+import { Modal, StyleSheet, Text, View } from 'react-native'
+import { Button, TooltipSimple } from '@hanzo/gui'
+
+export function ZIndex() {
+  return <TooltipInModal />
+}
+
+export function TooltipInModal() {
+  return (
+    <>
+      <Gap />
+      <SimpleModal />
+      <Gap />
+      <TransparentModal />
+      <Gap />
+      <AnimatedModalStack />
+      <Gap />
+      <Modalception />
+    </>
+  )
+}
+
+function Gap() {
+  return <View style={styles.gap} />
+}
+
+function AnimatedModal({ animationType }) {
+  const [isVisible, setIsVisible] = React.useState(false)
+
+  return (
+    <>
+      <Button onPress={() => setIsVisible(true)}>Animation {animationType}</Button>
+      <Modal
+        animationType={animationType}
+        onRequestClose={() => setIsVisible(false)}
+        visible={isVisible}
+      >
+        <View style={styles.container}>
+          <Text>Modal with "animationType" of "{animationType}"</Text>
+          <Gap />
+          <TooltipSimple label="test tooltip">
+            <Button onPress={() => setIsVisible(false)}>Close</Button>
+          </TooltipSimple>
+        </View>
+      </Modal>
+    </>
+  )
+}
+
+function AnimatedModalStack() {
+  return (
+    <>
+      <AnimatedModal animationType={'none'} />
+      <Gap />
+      <AnimatedModal animationType={'slide'} />
+      <Gap />
+      <AnimatedModal animationType={'fade'} />
+    </>
+  )
+}
+
+const WIGGLE_ROOM = 128
+
+function Modalception({ depth = 1 }) {
+  const [isVisible, setIsVisible] = React.useState(false)
+
+  const offset = React.useMemo(() => {
+    return {
+      top: Math.random() * WIGGLE_ROOM - WIGGLE_ROOM / 2,
+      left: Math.random() * WIGGLE_ROOM - WIGGLE_ROOM / 2,
+    }
+  }, [])
+
+  return (
+    <>
+      <Button onPress={() => setIsVisible(true)}>Open modal</Button>
+      <Modal onRequestClose={() => setIsVisible(false)} transparent visible={isVisible}>
+        <View style={[styles.containeralt, offset]}>
+          <Text>This is in Modal {depth}</Text>
+          <Gap />
+          {isVisible ? <Modalception depth={depth + 1} /> : null}
+          <Gap />
+          <TooltipSimple label="test tooltip">
+            <Button onPress={() => setIsVisible(false)}>
+              <Button.Text color="red">Close</Button.Text>
+            </Button>
+          </TooltipSimple>
+        </View>
+      </Modal>
+    </>
+  )
+}
+
+function SimpleModal() {
+  const [isVisible, setIsVisible] = React.useState(false)
+
+  return (
+    <>
+      <Button onPress={() => setIsVisible(true)}>Simple modal</Button>
+      <Modal onRequestClose={() => setIsVisible(false)} visible={isVisible}>
+        <View style={styles.container}>
+          <Text>Hello, World!</Text>
+          <Gap />
+          <TooltipSimple label="test tooltip">
+            <Button onPress={() => setIsVisible(false)}>Close</Button>
+          </TooltipSimple>
+        </View>
+      </Modal>
+    </>
+  )
+}
+
+function TransparentModal() {
+  const [isVisible, setIsVisible] = React.useState(false)
+
+  return (
+    <>
+      <Button onPress={() => setIsVisible(true)}>Transparent modal</Button>
+      <Modal onRequestClose={() => setIsVisible(false)} transparent visible={isVisible}>
+        <View style={styles.containeralt}>
+          <Text style={{ textAlign: 'center' }}>Modal with "transparent" value</Text>
+          <Gap />
+
+          <TooltipSimple label="test tooltip">
+            <Button onPress={() => setIsVisible(false)}>Close</Button>
+          </TooltipSimple>
+        </View>
+      </Modal>
+    </>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    flex: 1,
+    justifyContent: 'center',
+  },
+  containeralt: {
+    alignItems: 'center',
+    backgroundColor: 'white',
+    borderColor: '#eee',
+    borderRadius: 10,
+    borderWidth: 1,
+    justifyContent: 'center',
+    height: 300,
+    margin: 'auto',
+    padding: 30,
+    width: 300,
+  },
+  gap: {
+    height: 10,
+  },
+})

package/src/usecases/helpers.tsx

@@ -0,0 +1,44 @@
+type ObjectType = Record<PropertyKey, unknown>
+
+type PickByValue<OBJ_T, VALUE_T> = // From https://stackoverflow.com/a/55153000
+  Pick<OBJ_T, { [K in keyof OBJ_T]: OBJ_T[K] extends VALUE_T ? K : never }[keyof OBJ_T]>
+
+type ObjectEntries<OBJ_T> = // From https://stackoverflow.com/a/60142095
+  { [K in keyof OBJ_T]: [keyof PickByValue<OBJ_T, OBJ_T[K]>, OBJ_T[K]] }[keyof OBJ_T][]
+
+export const objectKeys = <O extends object>(obj: O) => Object.keys(obj) as Array<keyof O>
+
+export function objectEntries<OBJ_T extends ObjectType>(
+  obj: OBJ_T
+): ObjectEntries<OBJ_T> {
+  return Object.entries(obj) as ObjectEntries<OBJ_T>
+}
+
+type EntriesType =
+  | [PropertyKey, unknown][]
+  | ReadonlyArray<readonly [PropertyKey, unknown]>
+
+// Existing Utils
+type DeepWritable<OBJ_T> = { -readonly [P in keyof OBJ_T]: DeepWritable<OBJ_T[P]> }
+type UnionToIntersection<UNION_T> = // From https://stackoverflow.com/a/50375286
+  (UNION_T extends any ? (k: UNION_T) => void : never) extends (k: infer I) => void
+    ? I
+    : never
+
+// New Utils
+type UnionObjectFromArrayOfPairs<ARR_T extends EntriesType> =
+  DeepWritable<ARR_T> extends (infer R)[]
+    ? R extends [infer key, infer val]
+      ? { [prop in key & PropertyKey]: val }
+      : never
+    : never
+type MergeIntersectingObjects<ObjT> = { [key in keyof ObjT]: ObjT[key] }
+type EntriesToObject<ARR_T extends EntriesType> = MergeIntersectingObjects<
+  UnionToIntersection<UnionObjectFromArrayOfPairs<ARR_T>>
+>
+
+export function objectFromEntries<ARR_T extends EntriesType>(
+  arr: ARR_T
+): EntriesToObject<ARR_T> {
+  return Object.fromEntries(arr) as EntriesToObject<ARR_T>
+}

package/src/usecases/index.native.ts

@@ -0,0 +1,122 @@
+export { ActionsSheetComparison } from './ActionsSheetComparison'
+export { AnimatedByProp } from './AnimatedByProp'
+export { AnimatePresenceExitTest } from './AnimatePresenceExitTest'
+export { AnimationComprehensiveCase } from './AnimationComprehensiveCase'
+export { Benchmark } from './Benchmark'
+export { ButtonCircular } from './ButtonCircular'
+export { ButtonCustom } from './ButtonCustom'
+export { ButtonInverse } from './ButtonInverse'
+export { ButtonUnstyled } from './ButtonUnstyled'
+export { CheckboxDisabledOnPress } from './CheckboxDisabledOnPress'
+export { CodeExamplesInput } from './CodeExamplesInput'
+export { ColorTokenFallback } from './ColorTokenFallback'
+export { CompilerExtraction } from './CompilerExtraction'
+export { ComplexVariants } from './ComplexVariants'
+export { CrashAdaptSheet } from './CrashAdaptSheet'
+export { CustomStyledAnimatedPopover } from './CustomStyledAnimatedPopover'
+export { CustomStyledAnimatedTooltip } from './CustomStyledAnimatedTooltip'
+export { DialogFocusScopeCase } from './DialogFocusScopeCase'
+export { DialogFocusScopeDebug } from './DialogFocusScopeDebug'
+export { DialogNestedCase } from './DialogNestedCase'
+export { DialogOpenControlled } from './DialogOpenControlled'
+export { DialogPointerEventsCase } from './DialogPointerEventsCase'
+export { DialogScopedCase } from './DialogScopedCase'
+export { DialogSheetAdaptCase } from './DialogSheetAdaptCase'
+export { Example } from './Example'
+export { ExitCompletionCase } from './ExitCompletionCase'
+export { FocusVisibleButton } from './FocusVisibleButton'
+export { FocusVisibleButtonPointer } from './FocusVisibleButtonPointer'
+export { FocusVisibleButtonWithFocusStyle } from './FocusVisibleButtonWithFocusStyle'
+export { FontTokensInVariants } from './FontTokensInVariants'
+export { GroupHoverMobile } from './GroupHoverMobile'
+export { GroupPressInVariant } from './GroupPressInVariant'
+export { GroupPseudoVariantOverride } from './GroupPseudoVariantOverride'
+export { GroupPressNative } from './GroupPressNative'
+export { GroupProp } from './GroupProp'
+export { MediaQueryGtMd } from './MediaQueryGtMd'
+export { MediaQueriesV5 } from './MediaQueriesV5'
+export { MenuAccessibilityCase } from './MenuAccessibilityCase'
+export { MenuAsChildPositionCase } from './MenuAsChildPositionCase'
+export { MenuHighlightCase } from './MenuHighlightCase'
+export { MenuSubCase } from './MenuSubCase'
+export { MenuSubLeftCase } from './MenuSubLeftCase'
+export { NativePortalTest } from './NativePortalTest'
+export { GroupUseCases } from './GroupUseCases'
+export { ThemedListItem } from './ListItem'
+export { NewInputBasic } from './NewInputBasic'
+export { NewInputEvents } from './NewInputEvents'
+export { OverlayStyled } from './OverlayStyled'
+export { PlaceholderTextColor } from './PlaceholderTextColor'
+export { PointerEventsCase } from './PointerEventsCase'
+export { PopoverCase } from './PopoverCase'
+export { PopoverContentStyledPlusAnimations } from './PopoverContentStyledPlusAnimations'
+export { PopoverFocusScopeCase } from './PopoverFocusScopeCase'
+export { PopoverScopedCase } from './PopoverScopedCase'
+export { PopoverTriggerIsolationCase } from './PopoverTriggerIsolationCase'
+export { PressStyleNative } from './PressStyleNative'
+export { PseudoStyleMerge } from './PseudoStyleMerge'
+export { PseudoTransitionCase } from './PseudoTransitionCase'
+export { RenderPropCase } from './RenderPropCase'
+// export { SafeAreaCase } from './SafeAreaCase'
+export { ScrollViewRefCase } from './ScrollViewRefCase'
+export { SecondPage } from './SecondPage'
+export { SelectAndroidOnPress } from './SelectAndroidOnPress'
+export { SelectFocusScopeCase } from './SelectFocusScopeCase'
+export { SelectRemount } from './SelectRemount'
+export { Shadows } from './Shadows'
+export { ShorthandVariables } from './ShorthandVariables'
+export { SheetAnimationCase } from './SheetAnimationCase'
+export { SheetDragCase } from './SheetDragCase'
+export { SheetDragResistCase } from './SheetDragResistCase'
+export { SheetKeyboardDragCase } from './SheetKeyboardDragCase'
+export { KeyboardControllerTest } from './KeyboardControllerTest'
+export { SheetScrollableDrag } from './SheetScrollableDrag'
+export { SheetScrollLockCase } from './SheetScrollLockCase'
+export { SheetSnapPointsFitCase } from './SheetSnapPointsFitCase'
+export { SlowThemeReRender } from './SlowThemeReRender'
+export { SpinnerCustomColors } from './SpinnerCustomColors'
+export { StackZIndex } from './StackZIndex'
+export { StyledAnchor } from './StyledAnchor'
+export { StyledButtonAnimationAuto } from './StyledButtonAnimationAuto'
+export { StyledButtonTheme } from './StyledButtonTheme'
+export { StyledButtonVariantPseudo } from './StyledButtonVariantPseudo'
+export { StyledButtonVariantPseudoMerge } from './StyledButtonVariantPseudoMerge'
+export { StyledCheckboxTheme } from './StyledCheckboxTheme'
+export { StyledContextColor } from './StyledContextColor'
+export { StyledContextTokens } from './StyledContextTokens'
+export { StyledHOCNamed } from './StyledHOCNamed'
+export { StyledIconColor } from './StyledIconColor'
+export { StyledInputFocusStyle } from './StyledInputFocusStyle'
+export { StyledInputOnFocus } from './StyledInputOnFocus'
+export { StyledMediaQueryMerge } from './StyledMediaQueryMerge'
+export { StyledOverridePsuedo } from './StyledOverridePsuedo'
+export { StyledRNW } from './StyledRNW'
+export { StyledStyleableInputOnFocus } from './StyledStyleableInputOnFocus'
+export { StyledStyleableInputVariant } from './StyledStyleableInputVariant'
+export { StyledStyledStyleableInputOnFocus } from './StyledStyledStyleableInputOnFocus'
+export { StyledVariantTextColor } from './StyledVariantTextColor'
+export { StyledViewOnFocus } from './StyledViewOnFocus'
+export { StylePlatform } from './StylePlatform'
+export { StyleProp } from './StyleProp'
+export { TextNestedInheritance } from './TextNestedInheritance'
+export { ThemeChange } from './ThemeChange'
+export { ThemeChangeBasic } from './ThemeChangeBasic'
+export { ThemeComponentResolution } from './ThemeComponentResolution'
+export { ThemeMutation } from './ThemeMutation'
+export { ThemeNested } from './ThemeNested'
+export { ThemeReset } from './ThemeReset'
+export { ThemeShallowCase } from './ThemeShallowCase'
+export { ToastCase } from './ToastCase'
+export { ToggleGroupActiveProps } from './ToggleGroupActiveProps'
+export { TooltipAnimationCase } from './TooltipAnimationCase'
+export { TooltipCase } from './TooltipCase'
+export { TooltipGroupCase } from './TooltipGroupCase'
+export { TooltipPositionJumpCase } from './TooltipPositionJumpCase'
+export { TooltipTriggerInlineCase } from './TooltipTriggerInlineCase'
+export { TransformMediaQueryMerge } from './TransformMediaQueryMerge'
+export { UseCases } from './UseCases'
+export { UseTheme } from './UseTheme'
+export { V5ThemeBuilderOutput } from './V5ThemeBuilderOutput'
+export { VariantFontFamily } from './VariantFontFamily'
+export { VariantsOrder } from './VariantsOrder'
+export { ZIndex } from './ZIndex'