@traefik-labs/faency 12.3.6 → 12.3.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/colors/deepBlue.cjs +4 -0
- package/dist/colors/deepBlue.js +1 -1
- package/dist/colors/elevation.cjs +2 -0
- package/dist/colors/elevation.js +1 -1
- package/dist/colors/grayBlue.cjs +4 -0
- package/dist/colors/grayBlue.js +1 -1
- package/dist/colors/index.cjs +1 -0
- package/dist/colors/index.cjs.map +1 -1
- package/dist/colors/index.js +1 -1
- package/dist/colors/index.js.map +1 -1
- package/dist/colors/neon.cjs +4 -0
- package/dist/colors/neon.js +1 -1
- package/dist/colors/orange.cjs +4 -0
- package/dist/colors/orange.js +1 -1
- package/dist/colors/red.cjs +4 -0
- package/dist/colors/red.js +1 -1
- package/dist/components/Accordion/Accordion.cjs.map +1 -1
- package/dist/components/Accordion/Accordion.themes.cjs.map +1 -1
- package/dist/components/Accordion/Accordion.themes.js.map +1 -1
- package/dist/components/AriaTable/AriaTable.cjs.map +1 -1
- package/dist/components/Avatar/Avatar.cjs.map +1 -1
- package/dist/components/Avatar/Avatar.vanilla.cjs.map +1 -1
- package/dist/components/Badge/Badge.cjs.map +1 -1
- package/dist/components/Badge/Badge.themes.cjs.map +1 -1
- package/dist/components/Badge/Badge.themes.js.map +1 -1
- package/dist/components/Badge/Badge.vanilla.cjs.map +1 -1
- package/dist/components/Badge/Badge.vanilla.js.map +1 -1
- package/dist/components/Blockquote/Blockquote.vanilla.cjs.map +1 -1
- package/dist/components/Blockquote/Blockquote.vanilla.css.cjs +0 -1
- package/dist/components/Blockquote/Blockquote.vanilla.css.js +0 -1
- package/dist/components/Box/Box.cjs.map +1 -1
- package/dist/components/Box/Box.vanilla.cjs.map +1 -1
- package/dist/components/Bubble/Bubble.vanilla.cjs.map +1 -1
- package/dist/components/Button/Button.cjs +1 -0
- package/dist/components/Button/Button.cjs.map +1 -1
- package/dist/components/Button/Button.js +1 -1
- package/dist/components/Button/Button.themes.cjs.map +1 -1
- package/dist/components/Button/Button.themes.js.map +1 -1
- package/dist/components/Button/Button.vanilla.cjs.map +1 -1
- package/dist/components/ButtonSwitch/ButtonSwitch.themes.cjs.map +1 -1
- package/dist/components/ButtonSwitch/ButtonSwitch.themes.js.map +1 -1
- package/dist/components/ButtonSwitch/ButtonSwitch.vanilla.cjs.map +1 -1
- package/dist/components/Card/Card.cjs.map +1 -1
- package/dist/components/Card/Card.themes.cjs.map +1 -1
- package/dist/components/Card/Card.themes.js.map +1 -1
- package/dist/components/Card/Card.vanilla.cjs.map +1 -1
- package/dist/components/Card/Card.vanilla.css.cjs +0 -1
- package/dist/components/Card/Card.vanilla.css.js +0 -1
- package/dist/components/Card/Card.vanilla.js.map +1 -1
- package/dist/components/Checkbox/Checkbox.cjs.map +1 -1
- package/dist/components/Checkbox/Checkbox.themes.cjs.map +1 -1
- package/dist/components/Checkbox/Checkbox.themes.js.map +1 -1
- package/dist/components/CodeBlock/CodeBlock.cjs.map +1 -1
- package/dist/components/CodeBlock/CodeBlock.js.map +1 -1
- package/dist/components/CodeBlock/CodeBlock.themes.cjs.map +1 -1
- package/dist/components/CodeBlock/CodeBlock.themes.js.map +1 -1
- package/dist/components/CodeBlock/CodeBlock.vanilla.cjs.map +1 -1
- package/dist/components/CodeBlock/CodeBlock.vanilla.js.map +1 -1
- package/dist/components/CodeBlock/prism-extend.cjs +1 -0
- package/dist/components/Container/Container.cjs.map +1 -1
- package/dist/components/Container/Container.vanilla.cjs +1 -0
- package/dist/components/Container/Container.vanilla.cjs.map +1 -1
- package/dist/components/Container/Container.vanilla.js +1 -1
- package/dist/components/DateTimePicker/DateTimePicker.cjs.map +1 -1
- package/dist/components/DateTimePicker/DateTimePicker.js.map +1 -1
- package/dist/components/DateTimePickerInput/DateTimePickerInput.cjs.map +1 -1
- package/dist/components/DateTimePickerInput/DateTimePickerInput.js.map +1 -1
- package/dist/components/Dialog/Dialog.cjs.map +1 -1
- package/dist/components/Dialog/Dialog.themes.cjs.map +1 -1
- package/dist/components/Dialog/Dialog.themes.js.map +1 -1
- package/dist/components/DropdownMenu/DropdownMenu.cjs.map +1 -1
- package/dist/components/DropdownMenu/styles.cjs +1 -0
- package/dist/components/DropdownMenu/styles.js +1 -1
- package/dist/components/Elevation/Elevation.vanilla.cjs.map +1 -1
- package/dist/components/FaencyProvider.cjs.map +1 -1
- package/dist/components/Flex/Flex.cjs.map +1 -1
- package/dist/components/Flex/Flex.vanilla.cjs +1 -0
- package/dist/components/Flex/Flex.vanilla.cjs.map +1 -1
- package/dist/components/Flex/Flex.vanilla.js +1 -1
- package/dist/components/Grid/Grid.cjs.map +1 -1
- package/dist/components/Grid/Grid.vanilla.cjs +1 -0
- package/dist/components/Grid/Grid.vanilla.cjs.map +1 -1
- package/dist/components/Grid/Grid.vanilla.js +1 -1
- package/dist/components/Heading/Heading.themes.cjs.map +1 -1
- package/dist/components/Heading/Heading.themes.js.map +1 -1
- package/dist/components/IconButton/IconButton.themes.cjs.map +1 -1
- package/dist/components/IconButton/IconButton.themes.js.map +1 -1
- package/dist/components/IconButton/IconButton.vanilla.cjs.map +1 -1
- package/dist/components/Image/Image.cjs.map +1 -1
- package/dist/components/Image/Image.vanilla.cjs.map +1 -1
- package/dist/components/Input/Input.cjs.map +1 -1
- package/dist/components/Input/Input.js.map +1 -1
- package/dist/components/Input/Input.theme.cjs.map +1 -1
- package/dist/components/Input/Input.theme.js.map +1 -1
- package/dist/components/Input/Input.themes.cjs.map +1 -1
- package/dist/components/Input/Input.themes.js.map +1 -1
- package/dist/components/Input/Input.vanilla.cjs.map +1 -1
- package/dist/components/Label/Label.vanilla.cjs.map +1 -1
- package/dist/components/Link/Link.themes.cjs.map +1 -1
- package/dist/components/Link/Link.themes.js.map +1 -1
- package/dist/components/List/List.cjs.map +1 -1
- package/dist/components/List/List.themes.cjs.map +1 -1
- package/dist/components/List/List.themes.js.map +1 -1
- package/dist/components/Navigation/Navigation.cjs.map +1 -1
- package/dist/components/Navigation/Navigation.themes.cjs.map +1 -1
- package/dist/components/Navigation/Navigation.themes.js.map +1 -1
- package/dist/components/NavigationMenu/NavigationMenu.cjs.map +1 -1
- package/dist/components/NavigationTree/NavigationTreeContainer.cjs.map +1 -1
- package/dist/components/NavigationTree/NavigationTreeDrawer.cjs.map +1 -1
- package/dist/components/NavigationTree/NavigationTreeItem.cjs.map +1 -1
- package/dist/components/Panel/Panel.vanilla.cjs.map +1 -1
- package/dist/components/Paragraph/Paragraph.cjs.map +1 -1
- package/dist/components/Paragraph/Paragraph.vanilla.cjs.map +1 -1
- package/dist/components/Popover/Popover.cjs.map +1 -1
- package/dist/components/Radio/Radio.cjs.map +1 -1
- package/dist/components/Radio/Radio.themes.cjs.map +1 -1
- package/dist/components/Radio/Radio.themes.js.map +1 -1
- package/dist/components/RadioAccordion/RadioAccordion.cjs.map +1 -1
- package/dist/components/Select/Select.cjs.map +1 -1
- package/dist/components/Select/Select.js.map +1 -1
- package/dist/components/Select/Select.themes.cjs.map +1 -1
- package/dist/components/Select/Select.themes.js.map +1 -1
- package/dist/components/SidePanel/SidePanel.cjs.map +1 -1
- package/dist/components/SidePanel/SidePanel.themes.cjs.map +1 -1
- package/dist/components/SidePanel/SidePanel.themes.js.map +1 -1
- package/dist/components/Skeleton/Skeleton.themes.cjs.map +1 -1
- package/dist/components/Skeleton/Skeleton.themes.js.map +1 -1
- package/dist/components/Skeleton/Skeleton.vanilla.cjs.map +1 -1
- package/dist/components/Switch/Switch.cjs.map +1 -1
- package/dist/components/Switch/Switch.themes.cjs.map +1 -1
- package/dist/components/Switch/Switch.themes.js.map +1 -1
- package/dist/components/Table/Table.cjs +14 -12
- package/dist/components/Table/Table.cjs.map +1 -1
- package/dist/components/Table/Table.themes.cjs.map +1 -1
- package/dist/components/Table/Table.themes.js.map +1 -1
- package/dist/components/Text/Text.cjs.map +1 -1
- package/dist/components/Text/Text.themes.cjs.map +1 -1
- package/dist/components/Text/Text.themes.js.map +1 -1
- package/dist/components/TextField/TextField.cjs.map +1 -1
- package/dist/components/TextField/TextField.vanilla.cjs.map +1 -1
- package/dist/components/Textarea/Textarea.cjs.map +1 -1
- package/dist/components/Textarea/Textarea.js.map +1 -1
- package/dist/components/Textarea/Textarea.theme.cjs.map +1 -1
- package/dist/components/Textarea/Textarea.theme.js.map +1 -1
- package/dist/components/Textarea/Textarea.themes.cjs.map +1 -1
- package/dist/components/Textarea/Textarea.themes.js.map +1 -1
- package/dist/components/Textarea/Textarea.vanilla.cjs.map +1 -1
- package/dist/components/Tooltip/Tooltip.cjs.map +1 -1
- package/dist/components/Tooltip/Tooltip.themes.cjs.map +1 -1
- package/dist/components/Tooltip/Tooltip.themes.js.map +1 -1
- package/dist/components/colorSchemeContext.cjs.map +1 -1
- package/dist/components/colorSchemeContext.js.map +1 -1
- package/dist/faency.css +1478 -1478
- package/dist/stitches.config.cjs +1 -0
- package/dist/stitches.config.cjs.map +1 -1
- package/dist/stitches.config.js +11 -8
- package/dist/stitches.config.js.map +1 -1
- package/dist/styles/cssProps.cjs.map +1 -1
- package/dist/styles/cssProps.js.map +1 -1
- package/dist/styles/themeContext.cjs.map +1 -1
- package/dist/styles/themeContext.js.map +1 -1
- package/dist/styles/themes.css.cjs +0 -13
- package/dist/styles/themes.css.js +0 -13
- package/package.json +52 -52
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconButton.themes.js","names":[],"sources":["../../../components/IconButton/IconButton.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n type Colors = {\n iconButtonBackground: Property.Color;\n iconButtonHoverBorder: Property.Color;\n iconButtonHoverBackground: Property.Color;\n iconButtonFocusBorder: Property.Color;\n };\n\n type Factory = (primaryColor?: ColorInfo) => Colors;\n\n export const getLight: Factory = () => ({\n iconButtonBackground: 'white',\n iconButtonHoverBorder: '$slate9',\n iconButtonHoverBackground: '$slateA3',\n iconButtonFocusBorder: '$slate10',\n });\n\n export const getDark: Factory = () => ({\n iconButtonBackground: '$deepBlue2',\n iconButtonHoverBorder: '$deepBlue6',\n iconButtonHoverBackground: '$slateA4',\n iconButtonFocusBorder: '$deepBlue7',\n });\n}\n"],"mappings":";AAIO,IAAA;;CAUQ,OAAA,kBAA2B;EACtC,sBAAsB;EACtB,uBAAuB;EACvB,2BAA2B;EAC3B,uBAAuB;CACzB;CAEa,OAAA,iBAA0B;EACrC,sBAAsB;EACtB,uBAAuB;EACvB,2BAA2B;EAC3B,uBAAuB;CACzB;
|
|
1
|
+
{"version":3,"file":"IconButton.themes.js","names":[],"sources":["../../../components/IconButton/IconButton.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n type Colors = {\n iconButtonBackground: Property.Color;\n iconButtonHoverBorder: Property.Color;\n iconButtonHoverBackground: Property.Color;\n iconButtonFocusBorder: Property.Color;\n };\n\n type Factory = (primaryColor?: ColorInfo) => Colors;\n\n export const getLight: Factory = () => ({\n iconButtonBackground: 'white',\n iconButtonHoverBorder: '$slate9',\n iconButtonHoverBackground: '$slateA3',\n iconButtonFocusBorder: '$slate10',\n });\n\n export const getDark: Factory = () => ({\n iconButtonBackground: '$deepBlue2',\n iconButtonHoverBorder: '$deepBlue6',\n iconButtonHoverBackground: '$slateA4',\n iconButtonFocusBorder: '$deepBlue7',\n });\n}\n"],"mappings":";AAIO,IAAA;;CAUQ,OAAA,kBAA2B;EACtC,sBAAsB;EACtB,uBAAuB;EACvB,2BAA2B;EAC3B,uBAAuB;CACzB;CAEa,OAAA,iBAA0B;EACrC,sBAAsB;EACtB,uBAAuB;EACvB,2BAA2B;EAC3B,uBAAuB;CACzB;GACD,UAAA,QAAA,CAAA,EAAD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconButton.vanilla.cjs","names":[],"sources":["../../../components/IconButton/IconButton.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n PolymorphicComponent,\n PolymorphicComponentProps,\n PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { iconButtonRecipe } from './IconButton.vanilla.css';\n\ntype IconButtonRecipeVariants = RecipeVariants<typeof iconButtonRecipe>;\n\ninterface IconButtonOwnProps extends Omit<IconButtonRecipeVariants, never>, CSSProps {}\n\nexport type IconButtonVanillaProps<C extends ElementType = 'button'> = PolymorphicComponentProps<\n C,\n IconButtonOwnProps\n>;\n\ntype IconButtonVanillaComponent = PolymorphicComponent<\n 'button',\n IconButtonVanillaProps<ElementType>\n>;\n\nconst IconButtonVanillaComponentImpl = forwardRef(\n <C extends ElementType = 'button'>(\n { as, className, css, style, size, variant, ...props }: IconButtonVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as || 'button';\n\n const { colors } = useVanillaExtractTheme();\n\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n const mergedStyles = {\n ...cssStyles,\n ...style,\n ...assignInlineVars(vars),\n };\n\n const recipeClass = iconButtonRecipe({ size, variant });\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className || ''}`.trim()}\n style={mergedStyles}\n {...props}\n />\n );\n },\n);\n\nIconButtonVanillaComponentImpl.displayName = 'IconButtonVanilla';\n\nexport const IconButtonVanilla = IconButtonVanillaComponentImpl as IconButtonVanillaComponent;\n"],"mappings":";;;;;;;AA2BA,IAAM,kCAAA,GAAA,MAAA,
|
|
1
|
+
{"version":3,"file":"IconButton.vanilla.cjs","names":[],"sources":["../../../components/IconButton/IconButton.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n PolymorphicComponent,\n PolymorphicComponentProps,\n PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { iconButtonRecipe } from './IconButton.vanilla.css';\n\ntype IconButtonRecipeVariants = RecipeVariants<typeof iconButtonRecipe>;\n\ninterface IconButtonOwnProps extends Omit<IconButtonRecipeVariants, never>, CSSProps {}\n\nexport type IconButtonVanillaProps<C extends ElementType = 'button'> = PolymorphicComponentProps<\n C,\n IconButtonOwnProps\n>;\n\ntype IconButtonVanillaComponent = PolymorphicComponent<\n 'button',\n IconButtonVanillaProps<ElementType>\n>;\n\nconst IconButtonVanillaComponentImpl = forwardRef(\n <C extends ElementType = 'button'>(\n { as, className, css, style, size, variant, ...props }: IconButtonVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as || 'button';\n\n const { colors } = useVanillaExtractTheme();\n\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n const mergedStyles = {\n ...cssStyles,\n ...style,\n ...assignInlineVars(vars),\n };\n\n const recipeClass = iconButtonRecipe({ size, variant });\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className || ''}`.trim()}\n style={mergedStyles}\n {...props}\n />\n );\n },\n);\n\nIconButtonVanillaComponentImpl.displayName = 'IconButtonVanilla';\n\nexport const IconButtonVanilla = IconButtonVanillaComponentImpl as IconButtonVanillaComponent;\n"],"mappings":";;;;;;;AA2BA,IAAM,kCAAA,GAAA,MAAA,WAAA,EAEF,EAAE,IAAI,WAAW,KAAK,OAAO,MAAM,SAAS,GAAG,SAC/C,QACG;CACH,MAAM,YAAY,MAAM;CAExB,MAAM,EAAE,WAAW,qBAAA,uBAAuB;CAE1C,MAAM,EAAE,OAAO,WAAW,SAAS,iBAAA,eAAe,KAAK,MAAM;CAE7D,MAAM,eAAe;EACnB,GAAG;EACH,GAAG;EACH,IAAA,GAAA,yBAAA,iBAAA,CAAoB,IAAI;CAC1B;CAIA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;EACO;EACL,WAAW,GALK,+BAAA,iBAAiB;GAAE;GAAM;EAAQ,CAKnC,EAAY,GAAG,aAAa,KAAK,KAAK;EACpD,OAAO;EACP,GAAI;CACL,CAAA;AAEL,CACF;AAEA,+BAA+B,cAAc;AAE7C,IAAa,oBAAoB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Image.cjs","names":[],"sources":["../../../components/Image/Image.tsx"],"sourcesContent":["import { styled } from '../../stitches.config';\n\nexport const Image = styled('img', {\n // Reset\n verticalAlign: 'middle',\n maxWidth: '100%',\n});\n"],"mappings":";AAEA,IAAa,2CAAQ,
|
|
1
|
+
{"version":3,"file":"Image.cjs","names":[],"sources":["../../../components/Image/Image.tsx"],"sourcesContent":["import { styled } from '../../stitches.config';\n\nexport const Image = styled('img', {\n // Reset\n verticalAlign: 'middle',\n maxWidth: '100%',\n});\n"],"mappings":";AAEA,IAAa,2CAAQ,CAAA,CAAA,OAAO,OAAO;CAEjC,eAAe;CACf,UAAU;AACZ,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Image.vanilla.cjs","names":[],"sources":["../../../components/Image/Image.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n PolymorphicComponent,\n PolymorphicComponentProps,\n PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { image } from './Image.vanilla.css';\n\nexport type ImageVanillaProps<C extends ElementType = 'img'> = PolymorphicComponentProps<\n C,\n CSSProps\n>;\n\ntype ImageVanillaComponent = PolymorphicComponent<'img', ImageVanillaProps<ElementType>>;\n\nconst ImageVanillaImpl = forwardRef(\n <C extends ElementType = 'img'>(\n { as, className, css, style, ...props }: ImageVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as || 'img';\n const { colors } = useVanillaExtractTheme();\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n const mergedStyles = {\n ...cssStyles,\n ...style,\n ...assignInlineVars(vars),\n };\n\n return (\n <Component\n ref={ref}\n className={`${image} ${className || ''}`.trim()}\n style={mergedStyles}\n {...props}\n />\n );\n },\n);\n\nImageVanillaImpl.displayName = 'ImageVanilla';\n\nexport const ImageVanilla = ImageVanillaImpl as ImageVanillaComponent;\n"],"mappings":";;;;;;;AAmBA,IAAM,oBAAA,GAAA,MAAA,
|
|
1
|
+
{"version":3,"file":"Image.vanilla.cjs","names":[],"sources":["../../../components/Image/Image.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n PolymorphicComponent,\n PolymorphicComponentProps,\n PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { image } from './Image.vanilla.css';\n\nexport type ImageVanillaProps<C extends ElementType = 'img'> = PolymorphicComponentProps<\n C,\n CSSProps\n>;\n\ntype ImageVanillaComponent = PolymorphicComponent<'img', ImageVanillaProps<ElementType>>;\n\nconst ImageVanillaImpl = forwardRef(\n <C extends ElementType = 'img'>(\n { as, className, css, style, ...props }: ImageVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as || 'img';\n const { colors } = useVanillaExtractTheme();\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n const mergedStyles = {\n ...cssStyles,\n ...style,\n ...assignInlineVars(vars),\n };\n\n return (\n <Component\n ref={ref}\n className={`${image} ${className || ''}`.trim()}\n style={mergedStyles}\n {...props}\n />\n );\n },\n);\n\nImageVanillaImpl.displayName = 'ImageVanilla';\n\nexport const ImageVanilla = ImageVanillaImpl as ImageVanillaComponent;\n"],"mappings":";;;;;;;AAmBA,IAAM,oBAAA,GAAA,MAAA,WAAA,EAEF,EAAE,IAAI,WAAW,KAAK,OAAO,GAAG,SAChC,QACG;CACH,MAAM,YAAY,MAAM;CACxB,MAAM,EAAE,WAAW,qBAAA,uBAAuB;CAC1C,MAAM,EAAE,OAAO,WAAW,SAAS,iBAAA,eAAe,KAAK,MAAM;CAE7D,MAAM,eAAe;EACnB,GAAG;EACH,GAAG;EACH,IAAA,GAAA,yBAAA,iBAAA,CAAoB,IAAI;CAC1B;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;EACO;EACL,WAAW,GAAG,0BAAA,MAAM,GAAG,aAAa,KAAK,KAAK;EAC9C,OAAO;EACP,GAAI;CACL,CAAA;AAEL,CACF;AAEA,iBAAiB,cAAc;AAE/B,IAAa,eAAe"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.cjs","names":[],"sources":["../../../components/Input/Input.tsx"],"sourcesContent":["import React from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { elevationVariants } from '../Elevation';\n\n// CONSTANTS\nconst FOCUS_SHADOW = elevationVariants[1].boxShadow; // apply elevation $1 when focus\n\nconst SMALL_HEIGHT = '$5';\nconst MEDIUM_HEIGHT = '$6';\nconst LARGE_HEIGHT = '$7';\n\nconst StyledInput = styled('input', {\n // Reset\n appearance: 'none',\n borderWidth: '0',\n boxSizing: 'border-box',\n fontFamily: '$rubik',\n margin: '0',\n outline: 'none',\n padding: '0',\n width: '100%',\n WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n\n // Custom\n position: 'relative',\n backgroundColor: 'transparent',\n borderRadius: 'inherit', // inherit border radius from InputWrapper\n boxShadow: 'inset 0 0 0 1px $colors$inputBorder',\n color: '$inputText',\n fontVariantNumeric: 'tabular-nums',\n transition: 'box-shadow .1s ease-in-out',\n\n '&[type=\"number\"]': {\n pr: '0', // remove padding for number native controls\n },\n\n '&:-webkit-autofill,&:autofill': {\n boxShadow: 'inset 0 0 0 1px $colors$inputBorder, inset 0 0 0 100px $colors$inputBg',\n },\n\n '&:-webkit-autofill::first-line,&:autofill::first-line': {\n fontFamily: '$rubik',\n color: '$hiContrast',\n },\n\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px $colors$inputFocusBorder, ${FOCUS_SHADOW}`,\n },\n\n '&::placeholder': {\n color: '$inputPlaceholder',\n },\n\n '&:read-only:not(:disabled)': {\n boxShadow: 'none',\n },\n\n '&:disabled': {\n pointerEvents: 'none',\n color: '$inputDisabledText',\n },\n\n variants: {\n size: {\n small: {\n height: SMALL_HEIGHT,\n fontSize: '$1',\n px: '$2',\n lineHeight: '$sizes$5',\n '&:-webkit-autofill::first-line,&:autofill::first-line': {\n fontSize: '$1',\n },\n },\n medium: {\n height: MEDIUM_HEIGHT,\n fontSize: '$3',\n px: '$3',\n lineHeight: '$sizes$6',\n '&:-webkit-autofill::first-line,&:autofill::first-line': {\n fontSize: '$3',\n },\n },\n large: {\n height: LARGE_HEIGHT,\n fontSize: '$3',\n px: '$3',\n lineHeight: '$sizes$7',\n '&:-webkit-autofill::first-line,&:autofill::first-line': {\n fontSize: '$3',\n },\n },\n },\n startAdornment: {\n true: {},\n },\n endAdornment: {\n true: {},\n },\n variant: {\n ghost: {\n boxShadow: 'none',\n '&:disabled': {\n boxShadow: 'none',\n },\n backgroundColor: 'transparent',\n '&:focus-visible': {\n backgroundColor: '$loContrast',\n },\n },\n },\n state: {\n invalid: {\n boxShadow: 'inset 0 0 0 1px $colors$inputInvalidBorder',\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px $colors$inputInvalidBorder, ${FOCUS_SHADOW}`,\n },\n },\n },\n cursor: {\n default: {\n cursor: 'default',\n '@hover': {\n '&:hover:not(:read-only)': {\n cursor: 'text',\n },\n },\n '&:focus-visible:not(:read-only)': {\n cursor: 'text',\n },\n },\n text: {\n cursor: 'text',\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n cursor: 'default',\n },\n compoundVariants: [\n {\n variant: 'ghost',\n state: 'invalid',\n css: {\n boxShadow: 'inset 0 0 0 1px $colors$inputInvalidBorder',\n },\n },\n {\n startAdornment: true,\n size: 'small',\n css: {\n paddingInlineStart: 'calc($2 + 15px)',\n },\n },\n {\n startAdornment: true,\n size: 'medium',\n css: {\n paddingInlineStart: 'calc($3 + 15px)',\n },\n },\n {\n startAdornment: true,\n size: 'large',\n css: {\n paddingInlineStart: 'calc($3 + 15px)',\n },\n },\n {\n endAdornment: true,\n size: 'small',\n css: {\n paddingInlineEnd: 'calc($2 + 15px)',\n },\n },\n {\n endAdornment: true,\n size: 'medium',\n css: {\n paddingInlineEnd: 'calc($3 + 15px)',\n },\n },\n {\n endAdornment: true,\n size: 'large',\n css: {\n paddingInlineEnd: 'calc($3 + 15px)',\n },\n },\n {\n endAdornment: true,\n size: 'small',\n state: 'invalid',\n css: {\n paddingInlineEnd: 'calc($4 + 30px)', // size padding + adornment margins + icon size + icon size\n },\n },\n {\n endAdornment: true,\n size: 'medium',\n state: 'invalid',\n css: {\n paddingInlineEnd: 'calc($6 + 30px)', // size padding + adornment margins + icon size + icon size\n },\n },\n {\n endAdornment: true,\n size: 'large',\n state: 'invalid',\n css: {\n paddingInlineEnd: 'calc($6 + 30px)', // size padding + adornment margins + icon size + icon size\n },\n },\n ],\n});\n\nconst InputWrapper = styled('div', {\n // Reset\n outline: 'none',\n lineHeight: 0,\n\n position: 'relative',\n backgroundColor: '$inputBg',\n color: '$inputPlaceholder',\n\n '&::before': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n pointerEvents: 'none',\n },\n '&::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n pointerEvents: 'none',\n },\n\n '&:focus-visible': {\n '&::before': {\n backgroundColor: '$inputFocusBg',\n },\n '&::after': {\n backgroundColor: '$primary',\n opacity: 0.15,\n },\n },\n\n '@hover': {\n '&:hover': {\n '&::before': {\n backgroundColor: '$inputHoverBg',\n },\n '&::after': {\n backgroundColor: '$primary',\n opacity: 0.05,\n },\n },\n },\n\n variants: {\n disabled: {\n true: {\n opacity: 0.7,\n color: '$inputDisabledText',\n '@hover': {\n '&:hover': {\n '&::before': {\n backgroundColor: 'inherit',\n },\n '&::after': {\n backgroundColor: 'inherit',\n },\n },\n },\n },\n },\n state: {\n invalid: {\n '@hover': {\n '&:hover': {\n '&::after': {\n backgroundColor: '$inputInvalidBorder',\n },\n },\n },\n },\n },\n size: {\n small: {\n borderRadius: '$2',\n '&::before, &::after': {\n borderRadius: '$2',\n },\n },\n medium: {\n borderRadius: '$3',\n '&::before, &::after': {\n borderRadius: '$3',\n },\n },\n large: {\n borderRadius: '$3',\n '&::before, &::after': {\n borderRadius: '$3',\n },\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n disabled: false,\n },\n});\n\nconst AdornmentWrapper = styled('div', {\n position: 'absolute',\n top: 0,\n height: '100%',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n variants: {\n size: {\n small: {\n mx: 'calc($2 / 2)',\n },\n medium: {\n mx: 'calc($3 / 2)',\n },\n large: {\n mx: 'calc($3 / 2)',\n },\n },\n variant: {\n start: {\n left: 0,\n },\n end: {\n right: 0,\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n },\n});\n\nconst AdornmentWrapperStart = styled(AdornmentWrapper, {\n left: 0,\n});\n\nconst AdornmentWrapperEnd = styled(AdornmentWrapper, {\n right: 0,\n});\n\ntype DefaultInputVariants = VariantProps<typeof StyledInput>;\nexport type InputVariants = Omit<DefaultInputVariants, 'startAdornment' | 'endAdornment'>;\nexport interface HTMLInputProps extends React.InputHTMLAttributes<any> {\n startAdornment?: React.ReactNode;\n endAdornment?: React.ReactNode;\n type?: string;\n}\n\nexport type InputProps = Omit<HTMLInputProps, 'size'> & InputVariants & { css?: CSS };\n\nexport interface InputHandle extends HTMLInputElement {\n clear: () => void;\n}\n\nexport const Input = React.forwardRef<InputHandle, InputProps>(\n ({ size, startAdornment, endAdornment, css, ...props }, forwardedRef) => {\n const inputRef = React.useRef<InputHandle>(null);\n\n React.useImperativeHandle(\n forwardedRef,\n () => {\n const { current } = inputRef;\n if (current) {\n current.clear = () => {\n current.value = '';\n };\n }\n return current as InputHandle;\n },\n [inputRef]\n );\n\n const hasStartAdornment = React.useMemo(() => Boolean(startAdornment), [startAdornment]);\n\n const hasEndAdornment = React.useMemo(() => Boolean(endAdornment), [endAdornment]);\n\n return (\n <InputWrapper css={css} disabled={props.disabled} state={props.state}>\n {hasStartAdornment && (\n <AdornmentWrapperStart size={size}>{startAdornment}</AdornmentWrapperStart>\n )}\n\n <StyledInput\n ref={inputRef}\n startAdornment={hasStartAdornment}\n endAdornment={hasEndAdornment}\n size={size}\n {...props}\n />\n {hasEndAdornment && <AdornmentWrapperEnd size={size}>{endAdornment}</AdornmentWrapperEnd>}\n </InputWrapper>\n );\n }\n);\n"],"mappings":";;;;;;;AAMA,IAAM,eAAe,kBAAA,kBAAkB,GAAG;AAM1C,IAAM,cAAc,wBAAA,OAAO,SAAS;CAElC,YAAY;CACZ,aAAa;CACb,WAAW;CACX,YAAY;CACZ,QAAQ;CACR,SAAS;CACT,SAAS;CACT,OAAO;CACP,yBAAyB;CAGzB,UAAU;CACV,iBAAiB;CACjB,cAAc;CACd,WAAW;CACX,OAAO;CACP,oBAAoB;CACpB,YAAY;CAEZ,sBAAoB,EAClB,IAAI,IACN;CAEA,iCAAiC,EAC/B,WAAW,yEACb;CAEA,yDAAyD;EACvD,YAAY;EACZ,OAAO;CACT;CAEA,mBAAmB,EACjB,WAAW,6CAA6C,eAC1D;CAEA,kBAAkB,EAChB,OAAO,oBACT;CAEA,8BAA8B,EAC5B,WAAW,OACb;CAEA,cAAc;EACZ,eAAe;EACf,OAAO;CACT;CAEA,UAAU;EACR,MAAM;GACJ,OAAO;IACL,QAAQ;IACR,UAAU;IACV,IAAI;IACJ,YAAY;IACZ,yDAAyD,EACvD,UAAU,KACZ;GACF;GACA,QAAQ;IACN,QAAQ;IACR,UAAU;IACV,IAAI;IACJ,YAAY;IACZ,yDAAyD,EACvD,UAAU,KACZ;GACF;GACA,OAAO;IACL,QAAQ;IACR,UAAU;IACV,IAAI;IACJ,YAAY;IACZ,yDAAyD,EACvD,UAAU,KACZ;GACF;EACF;EACA,gBAAgB,EACd,MAAM,CAAC,EACT;EACA,cAAc,EACZ,MAAM,CAAC,EACT;EACA,SAAS,EACP,OAAO;GACL,WAAW;GACX,cAAc,EACZ,WAAW,OACb;GACA,iBAAiB;GACjB,mBAAmB,EACjB,iBAAiB,cACnB;EACF,EACF;EACA,OAAO,EACL,SAAS;GACP,WAAW;GACX,mBAAmB,EACjB,WAAW,+CAA+C,eAC5D;EACF,EACF;EACA,QAAQ;GACN,SAAS;IACP,QAAQ;IACR,UAAU,EACR,2BAA2B,EACzB,QAAQ,OACV,EACF;IACA,mCAAmC,EACjC,QAAQ,OACV;GACF;GACA,MAAM,EACJ,QAAQ,OACV;EACF;CACF;CACA,iBAAiB;EACf,MAAM;EACN,QAAQ;CACV;CACA,kBAAkB;EAChB;GACE,SAAS;GACT,OAAO;GACP,KAAK,EACH,WAAW,6CACb;EACF;EACA;GACE,gBAAgB;GAChB,MAAM;GACN,KAAK,EACH,oBAAoB,kBACtB;EACF;EACA;GACE,gBAAgB;GAChB,MAAM;GACN,KAAK,EACH,oBAAoB,kBACtB;EACF;EACA;GACE,gBAAgB;GAChB,MAAM;GACN,KAAK,EACH,oBAAoB,kBACtB;EACF;EACA;GACE,cAAc;GACd,MAAM;GACN,KAAK,EACH,kBAAkB,kBACpB;EACF;EACA;GACE,cAAc;GACd,MAAM;GACN,KAAK,EACH,kBAAkB,kBACpB;EACF;EACA;GACE,cAAc;GACd,MAAM;GACN,KAAK,EACH,kBAAkB,kBACpB;EACF;EACA;GACE,cAAc;GACd,MAAM;GACN,OAAO;GACP,KAAK,EACH,kBAAkB,kBACpB;EACF;EACA;GACE,cAAc;GACd,MAAM;GACN,OAAO;GACP,KAAK,EACH,kBAAkB,kBACpB;EACF;EACA;GACE,cAAc;GACd,MAAM;GACN,OAAO;GACP,KAAK,EACH,kBAAkB,kBACpB;EACF;CACF;AACF,CAAC;AAED,IAAM,eAAe,wBAAA,OAAO,OAAO;CAEjC,SAAS;CACT,YAAY;CAEZ,UAAU;CACV,iBAAiB;CACjB,OAAO;CAEP,aAAa;EACX,WAAW;EACX,SAAS;EACT,UAAU;EACV,OAAO;EACP,eAAe;CACjB;CACA,YAAY;EACV,WAAW;EACX,SAAS;EACT,UAAU;EACV,OAAO;EACP,eAAe;CACjB;CAEA,mBAAmB;EACjB,aAAa,EACX,iBAAiB,gBACnB;EACA,YAAY;GACV,iBAAiB;GACjB,SAAS;EACX;CACF;CAEA,UAAU,EACR,WAAW;EACT,aAAa,EACX,iBAAiB,gBACnB;EACA,YAAY;GACV,iBAAiB;GACjB,SAAS;EACX;CACF,EACF;CAEA,UAAU;EACR,UAAU,EACR,MAAM;GACJ,SAAS;GACT,OAAO;GACP,UAAU,EACR,WAAW;IACT,aAAa,EACX,iBAAiB,UACnB;IACA,YAAY,EACV,iBAAiB,UACnB;GACF,EACF;EACF,EACF;EACA,OAAO,EACL,SAAS,EACP,UAAU,EACR,WAAW,EACT,YAAY,EACV,iBAAiB,sBACnB,EACF,EACF,EACF,EACF;EACA,MAAM;GACJ,OAAO;IACL,cAAc;IACd,uBAAuB,EACrB,cAAc,KAChB;GACF;GACA,QAAQ;IACN,cAAc;IACd,uBAAuB,EACrB,cAAc,KAChB;GACF;GACA,OAAO;IACL,cAAc;IACd,uBAAuB,EACrB,cAAc,KAChB;GACF;EACF;CACF;CACA,iBAAiB;EACf,MAAM;EACN,UAAU;CACZ;AACF,CAAC;AAED,IAAM,mBAAmB,wBAAA,OAAO,OAAO;CACrC,UAAU;CACV,KAAK;CACL,QAAQ;CACR,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,UAAU;EACR,MAAM;GACJ,OAAO,EACL,IAAI,eACN;GACA,QAAQ,EACN,IAAI,eACN;GACA,OAAO,EACL,IAAI,eACN;EACF;EACA,SAAS;GACP,OAAO,EACL,MAAM,EACR;GACA,KAAK,EACH,OAAO,EACT;EACF;CACF;CACA,iBAAiB,EACf,MAAM,SACR;AACF,CAAC;AAED,IAAM,wBAAwB,wBAAA,OAAO,kBAAkB,EACrD,MAAM,EACR,CAAC;AAED,IAAM,sBAAsB,wBAAA,OAAO,kBAAkB,EACnD,OAAO,EACT,CAAC;AAgBD,IAAa,QAAQ,MAAA,QAAM,YACxB,EAAE,MAAM,gBAAgB,cAAc,KAAK,GAAG,SAAS,iBAAiB;CACvE,MAAM,WAAW,MAAA,QAAM,OAAoB,IAAI;CAE/C,MAAA,QAAM,oBACJ,oBACM;EACJ,MAAM,EAAE,YAAY;EACpB,IAAI,SACF,QAAQ,cAAc;GACpB,QAAQ,QAAQ;EAClB;EAEF,OAAO;CACT,GACA,CAAC,QAAQ,CACX;CAEA,MAAM,oBAAoB,MAAA,QAAM,cAAc,QAAQ,cAAc,GAAG,CAAC,cAAc,CAAC;CAEvF,MAAM,kBAAkB,MAAA,QAAM,cAAc,QAAQ,YAAY,GAAG,CAAC,YAAY,CAAC;CAEjF,OACE,iBAAA,GAAA,kBAAA,MAAC,cAAD;EAAmB;EAAK,UAAU,MAAM;EAAU,OAAO,MAAM;YAA/D;GACG,qBACC,iBAAA,GAAA,kBAAA,KAAC,uBAAD;IAA6B;cAAO;GAAsC,CAAA;GAG5E,iBAAA,GAAA,kBAAA,KAAC,aAAD;IACE,KAAK;IACL,gBAAgB;IAChB,cAAc;IACR;IACN,GAAI;GACL,CAAA;GACA,mBAAmB,iBAAA,GAAA,kBAAA,KAAC,qBAAD;IAA2B;cAAO;GAAkC,CAAA;EAC5E;;AAElB,CACF"}
|
|
1
|
+
{"version":3,"file":"Input.cjs","names":[],"sources":["../../../components/Input/Input.tsx"],"sourcesContent":["import React from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { elevationVariants } from '../Elevation';\n\n// CONSTANTS\nconst FOCUS_SHADOW = elevationVariants[1].boxShadow; // apply elevation $1 when focus\n\nconst SMALL_HEIGHT = '$5';\nconst MEDIUM_HEIGHT = '$6';\nconst LARGE_HEIGHT = '$7';\n\nconst StyledInput = styled('input', {\n // Reset\n appearance: 'none',\n borderWidth: '0',\n boxSizing: 'border-box',\n fontFamily: '$rubik',\n margin: '0',\n outline: 'none',\n padding: '0',\n width: '100%',\n WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n\n // Custom\n position: 'relative',\n backgroundColor: 'transparent',\n borderRadius: 'inherit', // inherit border radius from InputWrapper\n boxShadow: 'inset 0 0 0 1px $colors$inputBorder',\n color: '$inputText',\n fontVariantNumeric: 'tabular-nums',\n transition: 'box-shadow .1s ease-in-out',\n\n '&[type=\"number\"]': {\n pr: '0', // remove padding for number native controls\n },\n\n '&:-webkit-autofill,&:autofill': {\n boxShadow: 'inset 0 0 0 1px $colors$inputBorder, inset 0 0 0 100px $colors$inputBg',\n },\n\n '&:-webkit-autofill::first-line,&:autofill::first-line': {\n fontFamily: '$rubik',\n color: '$hiContrast',\n },\n\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px $colors$inputFocusBorder, ${FOCUS_SHADOW}`,\n },\n\n '&::placeholder': {\n color: '$inputPlaceholder',\n },\n\n '&:read-only:not(:disabled)': {\n boxShadow: 'none',\n },\n\n '&:disabled': {\n pointerEvents: 'none',\n color: '$inputDisabledText',\n },\n\n variants: {\n size: {\n small: {\n height: SMALL_HEIGHT,\n fontSize: '$1',\n px: '$2',\n lineHeight: '$sizes$5',\n '&:-webkit-autofill::first-line,&:autofill::first-line': {\n fontSize: '$1',\n },\n },\n medium: {\n height: MEDIUM_HEIGHT,\n fontSize: '$3',\n px: '$3',\n lineHeight: '$sizes$6',\n '&:-webkit-autofill::first-line,&:autofill::first-line': {\n fontSize: '$3',\n },\n },\n large: {\n height: LARGE_HEIGHT,\n fontSize: '$3',\n px: '$3',\n lineHeight: '$sizes$7',\n '&:-webkit-autofill::first-line,&:autofill::first-line': {\n fontSize: '$3',\n },\n },\n },\n startAdornment: {\n true: {},\n },\n endAdornment: {\n true: {},\n },\n variant: {\n ghost: {\n boxShadow: 'none',\n '&:disabled': {\n boxShadow: 'none',\n },\n backgroundColor: 'transparent',\n '&:focus-visible': {\n backgroundColor: '$loContrast',\n },\n },\n },\n state: {\n invalid: {\n boxShadow: 'inset 0 0 0 1px $colors$inputInvalidBorder',\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px $colors$inputInvalidBorder, ${FOCUS_SHADOW}`,\n },\n },\n },\n cursor: {\n default: {\n cursor: 'default',\n '@hover': {\n '&:hover:not(:read-only)': {\n cursor: 'text',\n },\n },\n '&:focus-visible:not(:read-only)': {\n cursor: 'text',\n },\n },\n text: {\n cursor: 'text',\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n cursor: 'default',\n },\n compoundVariants: [\n {\n variant: 'ghost',\n state: 'invalid',\n css: {\n boxShadow: 'inset 0 0 0 1px $colors$inputInvalidBorder',\n },\n },\n {\n startAdornment: true,\n size: 'small',\n css: {\n paddingInlineStart: 'calc($2 + 15px)',\n },\n },\n {\n startAdornment: true,\n size: 'medium',\n css: {\n paddingInlineStart: 'calc($3 + 15px)',\n },\n },\n {\n startAdornment: true,\n size: 'large',\n css: {\n paddingInlineStart: 'calc($3 + 15px)',\n },\n },\n {\n endAdornment: true,\n size: 'small',\n css: {\n paddingInlineEnd: 'calc($2 + 15px)',\n },\n },\n {\n endAdornment: true,\n size: 'medium',\n css: {\n paddingInlineEnd: 'calc($3 + 15px)',\n },\n },\n {\n endAdornment: true,\n size: 'large',\n css: {\n paddingInlineEnd: 'calc($3 + 15px)',\n },\n },\n {\n endAdornment: true,\n size: 'small',\n state: 'invalid',\n css: {\n paddingInlineEnd: 'calc($4 + 30px)', // size padding + adornment margins + icon size + icon size\n },\n },\n {\n endAdornment: true,\n size: 'medium',\n state: 'invalid',\n css: {\n paddingInlineEnd: 'calc($6 + 30px)', // size padding + adornment margins + icon size + icon size\n },\n },\n {\n endAdornment: true,\n size: 'large',\n state: 'invalid',\n css: {\n paddingInlineEnd: 'calc($6 + 30px)', // size padding + adornment margins + icon size + icon size\n },\n },\n ],\n});\n\nconst InputWrapper = styled('div', {\n // Reset\n outline: 'none',\n lineHeight: 0,\n\n position: 'relative',\n backgroundColor: '$inputBg',\n color: '$inputPlaceholder',\n\n '&::before': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n pointerEvents: 'none',\n },\n '&::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n pointerEvents: 'none',\n },\n\n '&:focus-visible': {\n '&::before': {\n backgroundColor: '$inputFocusBg',\n },\n '&::after': {\n backgroundColor: '$primary',\n opacity: 0.15,\n },\n },\n\n '@hover': {\n '&:hover': {\n '&::before': {\n backgroundColor: '$inputHoverBg',\n },\n '&::after': {\n backgroundColor: '$primary',\n opacity: 0.05,\n },\n },\n },\n\n variants: {\n disabled: {\n true: {\n opacity: 0.7,\n color: '$inputDisabledText',\n '@hover': {\n '&:hover': {\n '&::before': {\n backgroundColor: 'inherit',\n },\n '&::after': {\n backgroundColor: 'inherit',\n },\n },\n },\n },\n },\n state: {\n invalid: {\n '@hover': {\n '&:hover': {\n '&::after': {\n backgroundColor: '$inputInvalidBorder',\n },\n },\n },\n },\n },\n size: {\n small: {\n borderRadius: '$2',\n '&::before, &::after': {\n borderRadius: '$2',\n },\n },\n medium: {\n borderRadius: '$3',\n '&::before, &::after': {\n borderRadius: '$3',\n },\n },\n large: {\n borderRadius: '$3',\n '&::before, &::after': {\n borderRadius: '$3',\n },\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n disabled: false,\n },\n});\n\nconst AdornmentWrapper = styled('div', {\n position: 'absolute',\n top: 0,\n height: '100%',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n variants: {\n size: {\n small: {\n mx: 'calc($2 / 2)',\n },\n medium: {\n mx: 'calc($3 / 2)',\n },\n large: {\n mx: 'calc($3 / 2)',\n },\n },\n variant: {\n start: {\n left: 0,\n },\n end: {\n right: 0,\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n },\n});\n\nconst AdornmentWrapperStart = styled(AdornmentWrapper, {\n left: 0,\n});\n\nconst AdornmentWrapperEnd = styled(AdornmentWrapper, {\n right: 0,\n});\n\ntype DefaultInputVariants = VariantProps<typeof StyledInput>;\nexport type InputVariants = Omit<DefaultInputVariants, 'startAdornment' | 'endAdornment'>;\nexport interface HTMLInputProps extends React.InputHTMLAttributes<any> {\n startAdornment?: React.ReactNode;\n endAdornment?: React.ReactNode;\n type?: string;\n}\n\nexport type InputProps = Omit<HTMLInputProps, 'size'> & InputVariants & { css?: CSS };\n\nexport interface InputHandle extends HTMLInputElement {\n clear: () => void;\n}\n\nexport const Input = React.forwardRef<InputHandle, InputProps>(\n ({ size, startAdornment, endAdornment, css, ...props }, forwardedRef) => {\n const inputRef = React.useRef<InputHandle>(null);\n\n React.useImperativeHandle(\n forwardedRef,\n () => {\n const { current } = inputRef;\n if (current) {\n current.clear = () => {\n current.value = '';\n };\n }\n return current as InputHandle;\n },\n [inputRef]\n );\n\n const hasStartAdornment = React.useMemo(() => Boolean(startAdornment), [startAdornment]);\n\n const hasEndAdornment = React.useMemo(() => Boolean(endAdornment), [endAdornment]);\n\n return (\n <InputWrapper css={css} disabled={props.disabled} state={props.state}>\n {hasStartAdornment && (\n <AdornmentWrapperStart size={size}>{startAdornment}</AdornmentWrapperStart>\n )}\n\n <StyledInput\n ref={inputRef}\n startAdornment={hasStartAdornment}\n endAdornment={hasEndAdornment}\n size={size}\n {...props}\n />\n {hasEndAdornment && <AdornmentWrapperEnd size={size}>{endAdornment}</AdornmentWrapperEnd>}\n </InputWrapper>\n );\n }\n);\n"],"mappings":";;;;;;;AAMA,IAAM,eAAe,kBAAA,kBAAkB,EAAE,CAAC;AAM1C,IAAM,cAAc,wBAAA,OAAO,SAAS;CAElC,YAAY;CACZ,aAAa;CACb,WAAW;CACX,YAAY;CACZ,QAAQ;CACR,SAAS;CACT,SAAS;CACT,OAAO;CACP,yBAAyB;CAGzB,UAAU;CACV,iBAAiB;CACjB,cAAc;CACd,WAAW;CACX,OAAO;CACP,oBAAoB;CACpB,YAAY;CAEZ,sBAAoB,EAClB,IAAI,IACN;CAEA,iCAAiC,EAC/B,WAAW,yEACb;CAEA,yDAAyD;EACvD,YAAY;EACZ,OAAO;CACT;CAEA,mBAAmB,EACjB,WAAW,6CAA6C,eAC1D;CAEA,kBAAkB,EAChB,OAAO,oBACT;CAEA,8BAA8B,EAC5B,WAAW,OACb;CAEA,cAAc;EACZ,eAAe;EACf,OAAO;CACT;CAEA,UAAU;EACR,MAAM;GACJ,OAAO;IACL,QAAQ;IACR,UAAU;IACV,IAAI;IACJ,YAAY;IACZ,yDAAyD,EACvD,UAAU,KACZ;GACF;GACA,QAAQ;IACN,QAAQ;IACR,UAAU;IACV,IAAI;IACJ,YAAY;IACZ,yDAAyD,EACvD,UAAU,KACZ;GACF;GACA,OAAO;IACL,QAAQ;IACR,UAAU;IACV,IAAI;IACJ,YAAY;IACZ,yDAAyD,EACvD,UAAU,KACZ;GACF;EACF;EACA,gBAAgB,EACd,MAAM,CAAC,EACT;EACA,cAAc,EACZ,MAAM,CAAC,EACT;EACA,SAAS,EACP,OAAO;GACL,WAAW;GACX,cAAc,EACZ,WAAW,OACb;GACA,iBAAiB;GACjB,mBAAmB,EACjB,iBAAiB,cACnB;EACF,EACF;EACA,OAAO,EACL,SAAS;GACP,WAAW;GACX,mBAAmB,EACjB,WAAW,+CAA+C,eAC5D;EACF,EACF;EACA,QAAQ;GACN,SAAS;IACP,QAAQ;IACR,UAAU,EACR,2BAA2B,EACzB,QAAQ,OACV,EACF;IACA,mCAAmC,EACjC,QAAQ,OACV;GACF;GACA,MAAM,EACJ,QAAQ,OACV;EACF;CACF;CACA,iBAAiB;EACf,MAAM;EACN,QAAQ;CACV;CACA,kBAAkB;EAChB;GACE,SAAS;GACT,OAAO;GACP,KAAK,EACH,WAAW,6CACb;EACF;EACA;GACE,gBAAgB;GAChB,MAAM;GACN,KAAK,EACH,oBAAoB,kBACtB;EACF;EACA;GACE,gBAAgB;GAChB,MAAM;GACN,KAAK,EACH,oBAAoB,kBACtB;EACF;EACA;GACE,gBAAgB;GAChB,MAAM;GACN,KAAK,EACH,oBAAoB,kBACtB;EACF;EACA;GACE,cAAc;GACd,MAAM;GACN,KAAK,EACH,kBAAkB,kBACpB;EACF;EACA;GACE,cAAc;GACd,MAAM;GACN,KAAK,EACH,kBAAkB,kBACpB;EACF;EACA;GACE,cAAc;GACd,MAAM;GACN,KAAK,EACH,kBAAkB,kBACpB;EACF;EACA;GACE,cAAc;GACd,MAAM;GACN,OAAO;GACP,KAAK,EACH,kBAAkB,kBACpB;EACF;EACA;GACE,cAAc;GACd,MAAM;GACN,OAAO;GACP,KAAK,EACH,kBAAkB,kBACpB;EACF;EACA;GACE,cAAc;GACd,MAAM;GACN,OAAO;GACP,KAAK,EACH,kBAAkB,kBACpB;EACF;CACF;AACF,CAAC;AAED,IAAM,eAAe,wBAAA,OAAO,OAAO;CAEjC,SAAS;CACT,YAAY;CAEZ,UAAU;CACV,iBAAiB;CACjB,OAAO;CAEP,aAAa;EACX,WAAW;EACX,SAAS;EACT,UAAU;EACV,OAAO;EACP,eAAe;CACjB;CACA,YAAY;EACV,WAAW;EACX,SAAS;EACT,UAAU;EACV,OAAO;EACP,eAAe;CACjB;CAEA,mBAAmB;EACjB,aAAa,EACX,iBAAiB,gBACnB;EACA,YAAY;GACV,iBAAiB;GACjB,SAAS;EACX;CACF;CAEA,UAAU,EACR,WAAW;EACT,aAAa,EACX,iBAAiB,gBACnB;EACA,YAAY;GACV,iBAAiB;GACjB,SAAS;EACX;CACF,EACF;CAEA,UAAU;EACR,UAAU,EACR,MAAM;GACJ,SAAS;GACT,OAAO;GACP,UAAU,EACR,WAAW;IACT,aAAa,EACX,iBAAiB,UACnB;IACA,YAAY,EACV,iBAAiB,UACnB;GACF,EACF;EACF,EACF;EACA,OAAO,EACL,SAAS,EACP,UAAU,EACR,WAAW,EACT,YAAY,EACV,iBAAiB,sBACnB,EACF,EACF,EACF,EACF;EACA,MAAM;GACJ,OAAO;IACL,cAAc;IACd,uBAAuB,EACrB,cAAc,KAChB;GACF;GACA,QAAQ;IACN,cAAc;IACd,uBAAuB,EACrB,cAAc,KAChB;GACF;GACA,OAAO;IACL,cAAc;IACd,uBAAuB,EACrB,cAAc,KAChB;GACF;EACF;CACF;CACA,iBAAiB;EACf,MAAM;EACN,UAAU;CACZ;AACF,CAAC;AAED,IAAM,mBAAmB,wBAAA,OAAO,OAAO;CACrC,UAAU;CACV,KAAK;CACL,QAAQ;CACR,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,UAAU;EACR,MAAM;GACJ,OAAO,EACL,IAAI,eACN;GACA,QAAQ,EACN,IAAI,eACN;GACA,OAAO,EACL,IAAI,eACN;EACF;EACA,SAAS;GACP,OAAO,EACL,MAAM,EACR;GACA,KAAK,EACH,OAAO,EACT;EACF;CACF;CACA,iBAAiB,EACf,MAAM,SACR;AACF,CAAC;AAED,IAAM,wBAAwB,wBAAA,OAAO,kBAAkB,EACrD,MAAM,EACR,CAAC;AAED,IAAM,sBAAsB,wBAAA,OAAO,kBAAkB,EACnD,OAAO,EACT,CAAC;AAgBD,IAAa,QAAQ,MAAA,QAAM,YACxB,EAAE,MAAM,gBAAgB,cAAc,KAAK,GAAG,SAAS,iBAAiB;CACvE,MAAM,WAAW,MAAA,QAAM,OAAoB,IAAI;CAE/C,MAAA,QAAM,oBACJ,oBACM;EACJ,MAAM,EAAE,YAAY;EACpB,IAAI,SACF,QAAQ,cAAc;GACpB,QAAQ,QAAQ;EAClB;EAEF,OAAO;CACT,GACA,CAAC,QAAQ,CACX;CAEA,MAAM,oBAAoB,MAAA,QAAM,cAAc,QAAQ,cAAc,GAAG,CAAC,cAAc,CAAC;CAEvF,MAAM,kBAAkB,MAAA,QAAM,cAAc,QAAQ,YAAY,GAAG,CAAC,YAAY,CAAC;CAEjF,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,cAAD;EAAmB;EAAK,UAAU,MAAM;EAAU,OAAO,MAAM;YAA/D;GACG,qBACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,uBAAD;IAA6B;cAAO;GAAsC,CAAA;GAG5E,iBAAA,GAAA,kBAAA,IAAA,CAAC,aAAD;IACE,KAAK;IACL,gBAAgB;IAChB,cAAc;IACR;IACN,GAAI;GACL,CAAA;GACA,mBAAmB,iBAAA,GAAA,kBAAA,IAAA,CAAC,qBAAD;IAA2B;cAAO;GAAkC,CAAA;EAC5E;;AAElB,CACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","names":[],"sources":["../../../components/Input/Input.tsx"],"sourcesContent":["import React from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { elevationVariants } from '../Elevation';\n\n// CONSTANTS\nconst FOCUS_SHADOW = elevationVariants[1].boxShadow; // apply elevation $1 when focus\n\nconst SMALL_HEIGHT = '$5';\nconst MEDIUM_HEIGHT = '$6';\nconst LARGE_HEIGHT = '$7';\n\nconst StyledInput = styled('input', {\n // Reset\n appearance: 'none',\n borderWidth: '0',\n boxSizing: 'border-box',\n fontFamily: '$rubik',\n margin: '0',\n outline: 'none',\n padding: '0',\n width: '100%',\n WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n\n // Custom\n position: 'relative',\n backgroundColor: 'transparent',\n borderRadius: 'inherit', // inherit border radius from InputWrapper\n boxShadow: 'inset 0 0 0 1px $colors$inputBorder',\n color: '$inputText',\n fontVariantNumeric: 'tabular-nums',\n transition: 'box-shadow .1s ease-in-out',\n\n '&[type=\"number\"]': {\n pr: '0', // remove padding for number native controls\n },\n\n '&:-webkit-autofill,&:autofill': {\n boxShadow: 'inset 0 0 0 1px $colors$inputBorder, inset 0 0 0 100px $colors$inputBg',\n },\n\n '&:-webkit-autofill::first-line,&:autofill::first-line': {\n fontFamily: '$rubik',\n color: '$hiContrast',\n },\n\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px $colors$inputFocusBorder, ${FOCUS_SHADOW}`,\n },\n\n '&::placeholder': {\n color: '$inputPlaceholder',\n },\n\n '&:read-only:not(:disabled)': {\n boxShadow: 'none',\n },\n\n '&:disabled': {\n pointerEvents: 'none',\n color: '$inputDisabledText',\n },\n\n variants: {\n size: {\n small: {\n height: SMALL_HEIGHT,\n fontSize: '$1',\n px: '$2',\n lineHeight: '$sizes$5',\n '&:-webkit-autofill::first-line,&:autofill::first-line': {\n fontSize: '$1',\n },\n },\n medium: {\n height: MEDIUM_HEIGHT,\n fontSize: '$3',\n px: '$3',\n lineHeight: '$sizes$6',\n '&:-webkit-autofill::first-line,&:autofill::first-line': {\n fontSize: '$3',\n },\n },\n large: {\n height: LARGE_HEIGHT,\n fontSize: '$3',\n px: '$3',\n lineHeight: '$sizes$7',\n '&:-webkit-autofill::first-line,&:autofill::first-line': {\n fontSize: '$3',\n },\n },\n },\n startAdornment: {\n true: {},\n },\n endAdornment: {\n true: {},\n },\n variant: {\n ghost: {\n boxShadow: 'none',\n '&:disabled': {\n boxShadow: 'none',\n },\n backgroundColor: 'transparent',\n '&:focus-visible': {\n backgroundColor: '$loContrast',\n },\n },\n },\n state: {\n invalid: {\n boxShadow: 'inset 0 0 0 1px $colors$inputInvalidBorder',\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px $colors$inputInvalidBorder, ${FOCUS_SHADOW}`,\n },\n },\n },\n cursor: {\n default: {\n cursor: 'default',\n '@hover': {\n '&:hover:not(:read-only)': {\n cursor: 'text',\n },\n },\n '&:focus-visible:not(:read-only)': {\n cursor: 'text',\n },\n },\n text: {\n cursor: 'text',\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n cursor: 'default',\n },\n compoundVariants: [\n {\n variant: 'ghost',\n state: 'invalid',\n css: {\n boxShadow: 'inset 0 0 0 1px $colors$inputInvalidBorder',\n },\n },\n {\n startAdornment: true,\n size: 'small',\n css: {\n paddingInlineStart: 'calc($2 + 15px)',\n },\n },\n {\n startAdornment: true,\n size: 'medium',\n css: {\n paddingInlineStart: 'calc($3 + 15px)',\n },\n },\n {\n startAdornment: true,\n size: 'large',\n css: {\n paddingInlineStart: 'calc($3 + 15px)',\n },\n },\n {\n endAdornment: true,\n size: 'small',\n css: {\n paddingInlineEnd: 'calc($2 + 15px)',\n },\n },\n {\n endAdornment: true,\n size: 'medium',\n css: {\n paddingInlineEnd: 'calc($3 + 15px)',\n },\n },\n {\n endAdornment: true,\n size: 'large',\n css: {\n paddingInlineEnd: 'calc($3 + 15px)',\n },\n },\n {\n endAdornment: true,\n size: 'small',\n state: 'invalid',\n css: {\n paddingInlineEnd: 'calc($4 + 30px)', // size padding + adornment margins + icon size + icon size\n },\n },\n {\n endAdornment: true,\n size: 'medium',\n state: 'invalid',\n css: {\n paddingInlineEnd: 'calc($6 + 30px)', // size padding + adornment margins + icon size + icon size\n },\n },\n {\n endAdornment: true,\n size: 'large',\n state: 'invalid',\n css: {\n paddingInlineEnd: 'calc($6 + 30px)', // size padding + adornment margins + icon size + icon size\n },\n },\n ],\n});\n\nconst InputWrapper = styled('div', {\n // Reset\n outline: 'none',\n lineHeight: 0,\n\n position: 'relative',\n backgroundColor: '$inputBg',\n color: '$inputPlaceholder',\n\n '&::before': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n pointerEvents: 'none',\n },\n '&::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n pointerEvents: 'none',\n },\n\n '&:focus-visible': {\n '&::before': {\n backgroundColor: '$inputFocusBg',\n },\n '&::after': {\n backgroundColor: '$primary',\n opacity: 0.15,\n },\n },\n\n '@hover': {\n '&:hover': {\n '&::before': {\n backgroundColor: '$inputHoverBg',\n },\n '&::after': {\n backgroundColor: '$primary',\n opacity: 0.05,\n },\n },\n },\n\n variants: {\n disabled: {\n true: {\n opacity: 0.7,\n color: '$inputDisabledText',\n '@hover': {\n '&:hover': {\n '&::before': {\n backgroundColor: 'inherit',\n },\n '&::after': {\n backgroundColor: 'inherit',\n },\n },\n },\n },\n },\n state: {\n invalid: {\n '@hover': {\n '&:hover': {\n '&::after': {\n backgroundColor: '$inputInvalidBorder',\n },\n },\n },\n },\n },\n size: {\n small: {\n borderRadius: '$2',\n '&::before, &::after': {\n borderRadius: '$2',\n },\n },\n medium: {\n borderRadius: '$3',\n '&::before, &::after': {\n borderRadius: '$3',\n },\n },\n large: {\n borderRadius: '$3',\n '&::before, &::after': {\n borderRadius: '$3',\n },\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n disabled: false,\n },\n});\n\nconst AdornmentWrapper = styled('div', {\n position: 'absolute',\n top: 0,\n height: '100%',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n variants: {\n size: {\n small: {\n mx: 'calc($2 / 2)',\n },\n medium: {\n mx: 'calc($3 / 2)',\n },\n large: {\n mx: 'calc($3 / 2)',\n },\n },\n variant: {\n start: {\n left: 0,\n },\n end: {\n right: 0,\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n },\n});\n\nconst AdornmentWrapperStart = styled(AdornmentWrapper, {\n left: 0,\n});\n\nconst AdornmentWrapperEnd = styled(AdornmentWrapper, {\n right: 0,\n});\n\ntype DefaultInputVariants = VariantProps<typeof StyledInput>;\nexport type InputVariants = Omit<DefaultInputVariants, 'startAdornment' | 'endAdornment'>;\nexport interface HTMLInputProps extends React.InputHTMLAttributes<any> {\n startAdornment?: React.ReactNode;\n endAdornment?: React.ReactNode;\n type?: string;\n}\n\nexport type InputProps = Omit<HTMLInputProps, 'size'> & InputVariants & { css?: CSS };\n\nexport interface InputHandle extends HTMLInputElement {\n clear: () => void;\n}\n\nexport const Input = React.forwardRef<InputHandle, InputProps>(\n ({ size, startAdornment, endAdornment, css, ...props }, forwardedRef) => {\n const inputRef = React.useRef<InputHandle>(null);\n\n React.useImperativeHandle(\n forwardedRef,\n () => {\n const { current } = inputRef;\n if (current) {\n current.clear = () => {\n current.value = '';\n };\n }\n return current as InputHandle;\n },\n [inputRef]\n );\n\n const hasStartAdornment = React.useMemo(() => Boolean(startAdornment), [startAdornment]);\n\n const hasEndAdornment = React.useMemo(() => Boolean(endAdornment), [endAdornment]);\n\n return (\n <InputWrapper css={css} disabled={props.disabled} state={props.state}>\n {hasStartAdornment && (\n <AdornmentWrapperStart size={size}>{startAdornment}</AdornmentWrapperStart>\n )}\n\n <StyledInput\n ref={inputRef}\n startAdornment={hasStartAdornment}\n endAdornment={hasEndAdornment}\n size={size}\n {...props}\n />\n {hasEndAdornment && <AdornmentWrapperEnd size={size}>{endAdornment}</AdornmentWrapperEnd>}\n </InputWrapper>\n );\n }\n);\n"],"mappings":";;;;;AAMA,IAAM,eAAe,kBAAkB,GAAG;AAM1C,IAAM,cAAc,OAAO,SAAS;CAElC,YAAY;CACZ,aAAa;CACb,WAAW;CACX,YAAY;CACZ,QAAQ;CACR,SAAS;CACT,SAAS;CACT,OAAO;CACP,yBAAyB;CAGzB,UAAU;CACV,iBAAiB;CACjB,cAAc;CACd,WAAW;CACX,OAAO;CACP,oBAAoB;CACpB,YAAY;CAEZ,sBAAoB,EAClB,IAAI,IACN;CAEA,iCAAiC,EAC/B,WAAW,yEACb;CAEA,yDAAyD;EACvD,YAAY;EACZ,OAAO;CACT;CAEA,mBAAmB,EACjB,WAAW,6CAA6C,eAC1D;CAEA,kBAAkB,EAChB,OAAO,oBACT;CAEA,8BAA8B,EAC5B,WAAW,OACb;CAEA,cAAc;EACZ,eAAe;EACf,OAAO;CACT;CAEA,UAAU;EACR,MAAM;GACJ,OAAO;IACL,QAAQ;IACR,UAAU;IACV,IAAI;IACJ,YAAY;IACZ,yDAAyD,EACvD,UAAU,KACZ;GACF;GACA,QAAQ;IACN,QAAQ;IACR,UAAU;IACV,IAAI;IACJ,YAAY;IACZ,yDAAyD,EACvD,UAAU,KACZ;GACF;GACA,OAAO;IACL,QAAQ;IACR,UAAU;IACV,IAAI;IACJ,YAAY;IACZ,yDAAyD,EACvD,UAAU,KACZ;GACF;EACF;EACA,gBAAgB,EACd,MAAM,CAAC,EACT;EACA,cAAc,EACZ,MAAM,CAAC,EACT;EACA,SAAS,EACP,OAAO;GACL,WAAW;GACX,cAAc,EACZ,WAAW,OACb;GACA,iBAAiB;GACjB,mBAAmB,EACjB,iBAAiB,cACnB;EACF,EACF;EACA,OAAO,EACL,SAAS;GACP,WAAW;GACX,mBAAmB,EACjB,WAAW,+CAA+C,eAC5D;EACF,EACF;EACA,QAAQ;GACN,SAAS;IACP,QAAQ;IACR,UAAU,EACR,2BAA2B,EACzB,QAAQ,OACV,EACF;IACA,mCAAmC,EACjC,QAAQ,OACV;GACF;GACA,MAAM,EACJ,QAAQ,OACV;EACF;CACF;CACA,iBAAiB;EACf,MAAM;EACN,QAAQ;CACV;CACA,kBAAkB;EAChB;GACE,SAAS;GACT,OAAO;GACP,KAAK,EACH,WAAW,6CACb;EACF;EACA;GACE,gBAAgB;GAChB,MAAM;GACN,KAAK,EACH,oBAAoB,kBACtB;EACF;EACA;GACE,gBAAgB;GAChB,MAAM;GACN,KAAK,EACH,oBAAoB,kBACtB;EACF;EACA;GACE,gBAAgB;GAChB,MAAM;GACN,KAAK,EACH,oBAAoB,kBACtB;EACF;EACA;GACE,cAAc;GACd,MAAM;GACN,KAAK,EACH,kBAAkB,kBACpB;EACF;EACA;GACE,cAAc;GACd,MAAM;GACN,KAAK,EACH,kBAAkB,kBACpB;EACF;EACA;GACE,cAAc;GACd,MAAM;GACN,KAAK,EACH,kBAAkB,kBACpB;EACF;EACA;GACE,cAAc;GACd,MAAM;GACN,OAAO;GACP,KAAK,EACH,kBAAkB,kBACpB;EACF;EACA;GACE,cAAc;GACd,MAAM;GACN,OAAO;GACP,KAAK,EACH,kBAAkB,kBACpB;EACF;EACA;GACE,cAAc;GACd,MAAM;GACN,OAAO;GACP,KAAK,EACH,kBAAkB,kBACpB;EACF;CACF;AACF,CAAC;AAED,IAAM,eAAe,OAAO,OAAO;CAEjC,SAAS;CACT,YAAY;CAEZ,UAAU;CACV,iBAAiB;CACjB,OAAO;CAEP,aAAa;EACX,WAAW;EACX,SAAS;EACT,UAAU;EACV,OAAO;EACP,eAAe;CACjB;CACA,YAAY;EACV,WAAW;EACX,SAAS;EACT,UAAU;EACV,OAAO;EACP,eAAe;CACjB;CAEA,mBAAmB;EACjB,aAAa,EACX,iBAAiB,gBACnB;EACA,YAAY;GACV,iBAAiB;GACjB,SAAS;EACX;CACF;CAEA,UAAU,EACR,WAAW;EACT,aAAa,EACX,iBAAiB,gBACnB;EACA,YAAY;GACV,iBAAiB;GACjB,SAAS;EACX;CACF,EACF;CAEA,UAAU;EACR,UAAU,EACR,MAAM;GACJ,SAAS;GACT,OAAO;GACP,UAAU,EACR,WAAW;IACT,aAAa,EACX,iBAAiB,UACnB;IACA,YAAY,EACV,iBAAiB,UACnB;GACF,EACF;EACF,EACF;EACA,OAAO,EACL,SAAS,EACP,UAAU,EACR,WAAW,EACT,YAAY,EACV,iBAAiB,sBACnB,EACF,EACF,EACF,EACF;EACA,MAAM;GACJ,OAAO;IACL,cAAc;IACd,uBAAuB,EACrB,cAAc,KAChB;GACF;GACA,QAAQ;IACN,cAAc;IACd,uBAAuB,EACrB,cAAc,KAChB;GACF;GACA,OAAO;IACL,cAAc;IACd,uBAAuB,EACrB,cAAc,KAChB;GACF;EACF;CACF;CACA,iBAAiB;EACf,MAAM;EACN,UAAU;CACZ;AACF,CAAC;AAED,IAAM,mBAAmB,OAAO,OAAO;CACrC,UAAU;CACV,KAAK;CACL,QAAQ;CACR,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,UAAU;EACR,MAAM;GACJ,OAAO,EACL,IAAI,eACN;GACA,QAAQ,EACN,IAAI,eACN;GACA,OAAO,EACL,IAAI,eACN;EACF;EACA,SAAS;GACP,OAAO,EACL,MAAM,EACR;GACA,KAAK,EACH,OAAO,EACT;EACF;CACF;CACA,iBAAiB,EACf,MAAM,SACR;AACF,CAAC;AAED,IAAM,wBAAwB,OAAO,kBAAkB,EACrD,MAAM,EACR,CAAC;AAED,IAAM,sBAAsB,OAAO,kBAAkB,EACnD,OAAO,EACT,CAAC;AAgBD,IAAa,QAAQ,MAAM,YACxB,EAAE,MAAM,gBAAgB,cAAc,KAAK,GAAG,SAAS,iBAAiB;CACvE,MAAM,WAAW,MAAM,OAAoB,IAAI;CAE/C,MAAM,oBACJ,oBACM;EACJ,MAAM,EAAE,YAAY;EACpB,IAAI,SACF,QAAQ,cAAc;GACpB,QAAQ,QAAQ;EAClB;EAEF,OAAO;CACT,GACA,CAAC,QAAQ,CACX;CAEA,MAAM,oBAAoB,MAAM,cAAc,QAAQ,cAAc,GAAG,CAAC,cAAc,CAAC;CAEvF,MAAM,kBAAkB,MAAM,cAAc,QAAQ,YAAY,GAAG,CAAC,YAAY,CAAC;CAEjF,OACE,qBAAC,cAAD;EAAmB;EAAK,UAAU,MAAM;EAAU,OAAO,MAAM;YAA/D;GACG,qBACC,oBAAC,uBAAD;IAA6B;cAAO;GAAsC,CAAA;GAG5E,oBAAC,aAAD;IACE,KAAK;IACL,gBAAgB;IAChB,cAAc;IACR;IACN,GAAI;GACL,CAAA;GACA,mBAAmB,oBAAC,qBAAD;IAA2B;cAAO;GAAkC,CAAA;EAC5E;;AAElB,CACF"}
|
|
1
|
+
{"version":3,"file":"Input.js","names":[],"sources":["../../../components/Input/Input.tsx"],"sourcesContent":["import React from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { elevationVariants } from '../Elevation';\n\n// CONSTANTS\nconst FOCUS_SHADOW = elevationVariants[1].boxShadow; // apply elevation $1 when focus\n\nconst SMALL_HEIGHT = '$5';\nconst MEDIUM_HEIGHT = '$6';\nconst LARGE_HEIGHT = '$7';\n\nconst StyledInput = styled('input', {\n // Reset\n appearance: 'none',\n borderWidth: '0',\n boxSizing: 'border-box',\n fontFamily: '$rubik',\n margin: '0',\n outline: 'none',\n padding: '0',\n width: '100%',\n WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n\n // Custom\n position: 'relative',\n backgroundColor: 'transparent',\n borderRadius: 'inherit', // inherit border radius from InputWrapper\n boxShadow: 'inset 0 0 0 1px $colors$inputBorder',\n color: '$inputText',\n fontVariantNumeric: 'tabular-nums',\n transition: 'box-shadow .1s ease-in-out',\n\n '&[type=\"number\"]': {\n pr: '0', // remove padding for number native controls\n },\n\n '&:-webkit-autofill,&:autofill': {\n boxShadow: 'inset 0 0 0 1px $colors$inputBorder, inset 0 0 0 100px $colors$inputBg',\n },\n\n '&:-webkit-autofill::first-line,&:autofill::first-line': {\n fontFamily: '$rubik',\n color: '$hiContrast',\n },\n\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px $colors$inputFocusBorder, ${FOCUS_SHADOW}`,\n },\n\n '&::placeholder': {\n color: '$inputPlaceholder',\n },\n\n '&:read-only:not(:disabled)': {\n boxShadow: 'none',\n },\n\n '&:disabled': {\n pointerEvents: 'none',\n color: '$inputDisabledText',\n },\n\n variants: {\n size: {\n small: {\n height: SMALL_HEIGHT,\n fontSize: '$1',\n px: '$2',\n lineHeight: '$sizes$5',\n '&:-webkit-autofill::first-line,&:autofill::first-line': {\n fontSize: '$1',\n },\n },\n medium: {\n height: MEDIUM_HEIGHT,\n fontSize: '$3',\n px: '$3',\n lineHeight: '$sizes$6',\n '&:-webkit-autofill::first-line,&:autofill::first-line': {\n fontSize: '$3',\n },\n },\n large: {\n height: LARGE_HEIGHT,\n fontSize: '$3',\n px: '$3',\n lineHeight: '$sizes$7',\n '&:-webkit-autofill::first-line,&:autofill::first-line': {\n fontSize: '$3',\n },\n },\n },\n startAdornment: {\n true: {},\n },\n endAdornment: {\n true: {},\n },\n variant: {\n ghost: {\n boxShadow: 'none',\n '&:disabled': {\n boxShadow: 'none',\n },\n backgroundColor: 'transparent',\n '&:focus-visible': {\n backgroundColor: '$loContrast',\n },\n },\n },\n state: {\n invalid: {\n boxShadow: 'inset 0 0 0 1px $colors$inputInvalidBorder',\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px $colors$inputInvalidBorder, ${FOCUS_SHADOW}`,\n },\n },\n },\n cursor: {\n default: {\n cursor: 'default',\n '@hover': {\n '&:hover:not(:read-only)': {\n cursor: 'text',\n },\n },\n '&:focus-visible:not(:read-only)': {\n cursor: 'text',\n },\n },\n text: {\n cursor: 'text',\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n cursor: 'default',\n },\n compoundVariants: [\n {\n variant: 'ghost',\n state: 'invalid',\n css: {\n boxShadow: 'inset 0 0 0 1px $colors$inputInvalidBorder',\n },\n },\n {\n startAdornment: true,\n size: 'small',\n css: {\n paddingInlineStart: 'calc($2 + 15px)',\n },\n },\n {\n startAdornment: true,\n size: 'medium',\n css: {\n paddingInlineStart: 'calc($3 + 15px)',\n },\n },\n {\n startAdornment: true,\n size: 'large',\n css: {\n paddingInlineStart: 'calc($3 + 15px)',\n },\n },\n {\n endAdornment: true,\n size: 'small',\n css: {\n paddingInlineEnd: 'calc($2 + 15px)',\n },\n },\n {\n endAdornment: true,\n size: 'medium',\n css: {\n paddingInlineEnd: 'calc($3 + 15px)',\n },\n },\n {\n endAdornment: true,\n size: 'large',\n css: {\n paddingInlineEnd: 'calc($3 + 15px)',\n },\n },\n {\n endAdornment: true,\n size: 'small',\n state: 'invalid',\n css: {\n paddingInlineEnd: 'calc($4 + 30px)', // size padding + adornment margins + icon size + icon size\n },\n },\n {\n endAdornment: true,\n size: 'medium',\n state: 'invalid',\n css: {\n paddingInlineEnd: 'calc($6 + 30px)', // size padding + adornment margins + icon size + icon size\n },\n },\n {\n endAdornment: true,\n size: 'large',\n state: 'invalid',\n css: {\n paddingInlineEnd: 'calc($6 + 30px)', // size padding + adornment margins + icon size + icon size\n },\n },\n ],\n});\n\nconst InputWrapper = styled('div', {\n // Reset\n outline: 'none',\n lineHeight: 0,\n\n position: 'relative',\n backgroundColor: '$inputBg',\n color: '$inputPlaceholder',\n\n '&::before': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n pointerEvents: 'none',\n },\n '&::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n pointerEvents: 'none',\n },\n\n '&:focus-visible': {\n '&::before': {\n backgroundColor: '$inputFocusBg',\n },\n '&::after': {\n backgroundColor: '$primary',\n opacity: 0.15,\n },\n },\n\n '@hover': {\n '&:hover': {\n '&::before': {\n backgroundColor: '$inputHoverBg',\n },\n '&::after': {\n backgroundColor: '$primary',\n opacity: 0.05,\n },\n },\n },\n\n variants: {\n disabled: {\n true: {\n opacity: 0.7,\n color: '$inputDisabledText',\n '@hover': {\n '&:hover': {\n '&::before': {\n backgroundColor: 'inherit',\n },\n '&::after': {\n backgroundColor: 'inherit',\n },\n },\n },\n },\n },\n state: {\n invalid: {\n '@hover': {\n '&:hover': {\n '&::after': {\n backgroundColor: '$inputInvalidBorder',\n },\n },\n },\n },\n },\n size: {\n small: {\n borderRadius: '$2',\n '&::before, &::after': {\n borderRadius: '$2',\n },\n },\n medium: {\n borderRadius: '$3',\n '&::before, &::after': {\n borderRadius: '$3',\n },\n },\n large: {\n borderRadius: '$3',\n '&::before, &::after': {\n borderRadius: '$3',\n },\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n disabled: false,\n },\n});\n\nconst AdornmentWrapper = styled('div', {\n position: 'absolute',\n top: 0,\n height: '100%',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n variants: {\n size: {\n small: {\n mx: 'calc($2 / 2)',\n },\n medium: {\n mx: 'calc($3 / 2)',\n },\n large: {\n mx: 'calc($3 / 2)',\n },\n },\n variant: {\n start: {\n left: 0,\n },\n end: {\n right: 0,\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n },\n});\n\nconst AdornmentWrapperStart = styled(AdornmentWrapper, {\n left: 0,\n});\n\nconst AdornmentWrapperEnd = styled(AdornmentWrapper, {\n right: 0,\n});\n\ntype DefaultInputVariants = VariantProps<typeof StyledInput>;\nexport type InputVariants = Omit<DefaultInputVariants, 'startAdornment' | 'endAdornment'>;\nexport interface HTMLInputProps extends React.InputHTMLAttributes<any> {\n startAdornment?: React.ReactNode;\n endAdornment?: React.ReactNode;\n type?: string;\n}\n\nexport type InputProps = Omit<HTMLInputProps, 'size'> & InputVariants & { css?: CSS };\n\nexport interface InputHandle extends HTMLInputElement {\n clear: () => void;\n}\n\nexport const Input = React.forwardRef<InputHandle, InputProps>(\n ({ size, startAdornment, endAdornment, css, ...props }, forwardedRef) => {\n const inputRef = React.useRef<InputHandle>(null);\n\n React.useImperativeHandle(\n forwardedRef,\n () => {\n const { current } = inputRef;\n if (current) {\n current.clear = () => {\n current.value = '';\n };\n }\n return current as InputHandle;\n },\n [inputRef]\n );\n\n const hasStartAdornment = React.useMemo(() => Boolean(startAdornment), [startAdornment]);\n\n const hasEndAdornment = React.useMemo(() => Boolean(endAdornment), [endAdornment]);\n\n return (\n <InputWrapper css={css} disabled={props.disabled} state={props.state}>\n {hasStartAdornment && (\n <AdornmentWrapperStart size={size}>{startAdornment}</AdornmentWrapperStart>\n )}\n\n <StyledInput\n ref={inputRef}\n startAdornment={hasStartAdornment}\n endAdornment={hasEndAdornment}\n size={size}\n {...props}\n />\n {hasEndAdornment && <AdornmentWrapperEnd size={size}>{endAdornment}</AdornmentWrapperEnd>}\n </InputWrapper>\n );\n }\n);\n"],"mappings":";;;;;AAMA,IAAM,eAAe,kBAAkB,EAAE,CAAC;AAM1C,IAAM,cAAc,OAAO,SAAS;CAElC,YAAY;CACZ,aAAa;CACb,WAAW;CACX,YAAY;CACZ,QAAQ;CACR,SAAS;CACT,SAAS;CACT,OAAO;CACP,yBAAyB;CAGzB,UAAU;CACV,iBAAiB;CACjB,cAAc;CACd,WAAW;CACX,OAAO;CACP,oBAAoB;CACpB,YAAY;CAEZ,sBAAoB,EAClB,IAAI,IACN;CAEA,iCAAiC,EAC/B,WAAW,yEACb;CAEA,yDAAyD;EACvD,YAAY;EACZ,OAAO;CACT;CAEA,mBAAmB,EACjB,WAAW,6CAA6C,eAC1D;CAEA,kBAAkB,EAChB,OAAO,oBACT;CAEA,8BAA8B,EAC5B,WAAW,OACb;CAEA,cAAc;EACZ,eAAe;EACf,OAAO;CACT;CAEA,UAAU;EACR,MAAM;GACJ,OAAO;IACL,QAAQ;IACR,UAAU;IACV,IAAI;IACJ,YAAY;IACZ,yDAAyD,EACvD,UAAU,KACZ;GACF;GACA,QAAQ;IACN,QAAQ;IACR,UAAU;IACV,IAAI;IACJ,YAAY;IACZ,yDAAyD,EACvD,UAAU,KACZ;GACF;GACA,OAAO;IACL,QAAQ;IACR,UAAU;IACV,IAAI;IACJ,YAAY;IACZ,yDAAyD,EACvD,UAAU,KACZ;GACF;EACF;EACA,gBAAgB,EACd,MAAM,CAAC,EACT;EACA,cAAc,EACZ,MAAM,CAAC,EACT;EACA,SAAS,EACP,OAAO;GACL,WAAW;GACX,cAAc,EACZ,WAAW,OACb;GACA,iBAAiB;GACjB,mBAAmB,EACjB,iBAAiB,cACnB;EACF,EACF;EACA,OAAO,EACL,SAAS;GACP,WAAW;GACX,mBAAmB,EACjB,WAAW,+CAA+C,eAC5D;EACF,EACF;EACA,QAAQ;GACN,SAAS;IACP,QAAQ;IACR,UAAU,EACR,2BAA2B,EACzB,QAAQ,OACV,EACF;IACA,mCAAmC,EACjC,QAAQ,OACV;GACF;GACA,MAAM,EACJ,QAAQ,OACV;EACF;CACF;CACA,iBAAiB;EACf,MAAM;EACN,QAAQ;CACV;CACA,kBAAkB;EAChB;GACE,SAAS;GACT,OAAO;GACP,KAAK,EACH,WAAW,6CACb;EACF;EACA;GACE,gBAAgB;GAChB,MAAM;GACN,KAAK,EACH,oBAAoB,kBACtB;EACF;EACA;GACE,gBAAgB;GAChB,MAAM;GACN,KAAK,EACH,oBAAoB,kBACtB;EACF;EACA;GACE,gBAAgB;GAChB,MAAM;GACN,KAAK,EACH,oBAAoB,kBACtB;EACF;EACA;GACE,cAAc;GACd,MAAM;GACN,KAAK,EACH,kBAAkB,kBACpB;EACF;EACA;GACE,cAAc;GACd,MAAM;GACN,KAAK,EACH,kBAAkB,kBACpB;EACF;EACA;GACE,cAAc;GACd,MAAM;GACN,KAAK,EACH,kBAAkB,kBACpB;EACF;EACA;GACE,cAAc;GACd,MAAM;GACN,OAAO;GACP,KAAK,EACH,kBAAkB,kBACpB;EACF;EACA;GACE,cAAc;GACd,MAAM;GACN,OAAO;GACP,KAAK,EACH,kBAAkB,kBACpB;EACF;EACA;GACE,cAAc;GACd,MAAM;GACN,OAAO;GACP,KAAK,EACH,kBAAkB,kBACpB;EACF;CACF;AACF,CAAC;AAED,IAAM,eAAe,OAAO,OAAO;CAEjC,SAAS;CACT,YAAY;CAEZ,UAAU;CACV,iBAAiB;CACjB,OAAO;CAEP,aAAa;EACX,WAAW;EACX,SAAS;EACT,UAAU;EACV,OAAO;EACP,eAAe;CACjB;CACA,YAAY;EACV,WAAW;EACX,SAAS;EACT,UAAU;EACV,OAAO;EACP,eAAe;CACjB;CAEA,mBAAmB;EACjB,aAAa,EACX,iBAAiB,gBACnB;EACA,YAAY;GACV,iBAAiB;GACjB,SAAS;EACX;CACF;CAEA,UAAU,EACR,WAAW;EACT,aAAa,EACX,iBAAiB,gBACnB;EACA,YAAY;GACV,iBAAiB;GACjB,SAAS;EACX;CACF,EACF;CAEA,UAAU;EACR,UAAU,EACR,MAAM;GACJ,SAAS;GACT,OAAO;GACP,UAAU,EACR,WAAW;IACT,aAAa,EACX,iBAAiB,UACnB;IACA,YAAY,EACV,iBAAiB,UACnB;GACF,EACF;EACF,EACF;EACA,OAAO,EACL,SAAS,EACP,UAAU,EACR,WAAW,EACT,YAAY,EACV,iBAAiB,sBACnB,EACF,EACF,EACF,EACF;EACA,MAAM;GACJ,OAAO;IACL,cAAc;IACd,uBAAuB,EACrB,cAAc,KAChB;GACF;GACA,QAAQ;IACN,cAAc;IACd,uBAAuB,EACrB,cAAc,KAChB;GACF;GACA,OAAO;IACL,cAAc;IACd,uBAAuB,EACrB,cAAc,KAChB;GACF;EACF;CACF;CACA,iBAAiB;EACf,MAAM;EACN,UAAU;CACZ;AACF,CAAC;AAED,IAAM,mBAAmB,OAAO,OAAO;CACrC,UAAU;CACV,KAAK;CACL,QAAQ;CACR,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,UAAU;EACR,MAAM;GACJ,OAAO,EACL,IAAI,eACN;GACA,QAAQ,EACN,IAAI,eACN;GACA,OAAO,EACL,IAAI,eACN;EACF;EACA,SAAS;GACP,OAAO,EACL,MAAM,EACR;GACA,KAAK,EACH,OAAO,EACT;EACF;CACF;CACA,iBAAiB,EACf,MAAM,SACR;AACF,CAAC;AAED,IAAM,wBAAwB,OAAO,kBAAkB,EACrD,MAAM,EACR,CAAC;AAED,IAAM,sBAAsB,OAAO,kBAAkB,EACnD,OAAO,EACT,CAAC;AAgBD,IAAa,QAAQ,MAAM,YACxB,EAAE,MAAM,gBAAgB,cAAc,KAAK,GAAG,SAAS,iBAAiB;CACvE,MAAM,WAAW,MAAM,OAAoB,IAAI;CAE/C,MAAM,oBACJ,oBACM;EACJ,MAAM,EAAE,YAAY;EACpB,IAAI,SACF,QAAQ,cAAc;GACpB,QAAQ,QAAQ;EAClB;EAEF,OAAO;CACT,GACA,CAAC,QAAQ,CACX;CAEA,MAAM,oBAAoB,MAAM,cAAc,QAAQ,cAAc,GAAG,CAAC,cAAc,CAAC;CAEvF,MAAM,kBAAkB,MAAM,cAAc,QAAQ,YAAY,GAAG,CAAC,YAAY,CAAC;CAEjF,OACE,qBAAC,cAAD;EAAmB;EAAK,UAAU,MAAM;EAAU,OAAO,MAAM;YAA/D;GACG,qBACC,oBAAC,uBAAD;IAA6B;cAAO;GAAsC,CAAA;GAG5E,oBAAC,aAAD;IACE,KAAK;IACL,gBAAgB;IAChB,cAAc;IACR;IACN,GAAI;GACL,CAAA;GACA,mBAAmB,oBAAC,qBAAD;IAA2B;cAAO;GAAkC,CAAA;EAC5E;;AAElB,CACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.theme.cjs","names":[],"sources":["../../../components/Input/Input.theme.ts"],"sourcesContent":["import tinycolor from 'tinycolor2';\n\n// Plain TypeScript color tokens (no vanilla-extract)\n// Using default blue primary color for static tokens\nexport const inputLightTheme = {\n inputBg: 'hsl(240, 14.0%, 99.0%)', // $deepBlue1\n inputBorder: 'hsl(208, 9.0%, 73.0%)', // $grayBlue9\n inputFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n inputFocusBorder: 'hsl(206, 100%, 50%)', // blue8\n inputHoverBg: 'hsla(0, 0%, 100%, 0.372)', // $whiteA9\n inputText: tinycolor('black').setAlpha(0.74).toHslString(),\n inputPlaceholder: 'hsla(0, 0%, 0%, 0.498)', // $blackA10\n inputDisabledText: tinycolor('black').setAlpha(0.35).toHslString(),\n inputInvalidBorder: 'hsl(358, 75%, 59%)', // $red9\n};\n\nexport const inputDarkTheme = {\n inputBg: 'hsl(209, 38.0%, 12.0%)', // $grayBlue7 dark\n inputBorder: 'hsl(208, 11.0%, 45.0%)', // $grayBlue9 dark\n inputFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n inputFocusBorder: 'hsl(206, 100%, 70%)', // blue11\n inputHoverBg: 'hsla(0, 0%, 100%, 0.104)', // $whiteA4\n inputText: tinycolor('white').setAlpha(0.8).toHslString(),\n inputPlaceholder: 'hsla(0, 0%, 100%, 0.455)', // $whiteA10\n inputDisabledText: tinycolor('white').setAlpha(0.35).toHslString(),\n inputInvalidBorder: 'hsl(358, 75%, 59%)', // $red9\n};\n"],"mappings":";;;;AAIA,IAAa,kBAAkB;CAC7B,SAAS;CACT,aAAa;CACb,eAAA,GAAA,WAAA,
|
|
1
|
+
{"version":3,"file":"Input.theme.cjs","names":[],"sources":["../../../components/Input/Input.theme.ts"],"sourcesContent":["import tinycolor from 'tinycolor2';\n\n// Plain TypeScript color tokens (no vanilla-extract)\n// Using default blue primary color for static tokens\nexport const inputLightTheme = {\n inputBg: 'hsl(240, 14.0%, 99.0%)', // $deepBlue1\n inputBorder: 'hsl(208, 9.0%, 73.0%)', // $grayBlue9\n inputFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n inputFocusBorder: 'hsl(206, 100%, 50%)', // blue8\n inputHoverBg: 'hsla(0, 0%, 100%, 0.372)', // $whiteA9\n inputText: tinycolor('black').setAlpha(0.74).toHslString(),\n inputPlaceholder: 'hsla(0, 0%, 0%, 0.498)', // $blackA10\n inputDisabledText: tinycolor('black').setAlpha(0.35).toHslString(),\n inputInvalidBorder: 'hsl(358, 75%, 59%)', // $red9\n};\n\nexport const inputDarkTheme = {\n inputBg: 'hsl(209, 38.0%, 12.0%)', // $grayBlue7 dark\n inputBorder: 'hsl(208, 11.0%, 45.0%)', // $grayBlue9 dark\n inputFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n inputFocusBorder: 'hsl(206, 100%, 70%)', // blue11\n inputHoverBg: 'hsla(0, 0%, 100%, 0.104)', // $whiteA4\n inputText: tinycolor('white').setAlpha(0.8).toHslString(),\n inputPlaceholder: 'hsla(0, 0%, 100%, 0.455)', // $whiteA10\n inputDisabledText: tinycolor('white').setAlpha(0.35).toHslString(),\n inputInvalidBorder: 'hsl(358, 75%, 59%)', // $red9\n};\n"],"mappings":";;;;AAIA,IAAa,kBAAkB;CAC7B,SAAS;CACT,aAAa;CACb,eAAA,GAAA,WAAA,QAAA,CAAwB,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;CAC5D,kBAAkB;CAClB,cAAc;CACd,YAAA,GAAA,WAAA,QAAA,CAAqB,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;CACzD,kBAAkB;CAClB,oBAAA,GAAA,WAAA,QAAA,CAA6B,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;CACjE,oBAAoB;AACtB;AAEA,IAAa,iBAAiB;CAC5B,SAAS;CACT,aAAa;CACb,eAAA,GAAA,WAAA,QAAA,CAAwB,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;CAC5D,kBAAkB;CAClB,cAAc;CACd,YAAA,GAAA,WAAA,QAAA,CAAqB,OAAO,CAAC,CAAC,SAAS,EAAG,CAAC,CAAC,YAAY;CACxD,kBAAkB;CAClB,oBAAA,GAAA,WAAA,QAAA,CAA6B,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;CACjE,oBAAoB;AACtB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.theme.js","names":[],"sources":["../../../components/Input/Input.theme.ts"],"sourcesContent":["import tinycolor from 'tinycolor2';\n\n// Plain TypeScript color tokens (no vanilla-extract)\n// Using default blue primary color for static tokens\nexport const inputLightTheme = {\n inputBg: 'hsl(240, 14.0%, 99.0%)', // $deepBlue1\n inputBorder: 'hsl(208, 9.0%, 73.0%)', // $grayBlue9\n inputFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n inputFocusBorder: 'hsl(206, 100%, 50%)', // blue8\n inputHoverBg: 'hsla(0, 0%, 100%, 0.372)', // $whiteA9\n inputText: tinycolor('black').setAlpha(0.74).toHslString(),\n inputPlaceholder: 'hsla(0, 0%, 0%, 0.498)', // $blackA10\n inputDisabledText: tinycolor('black').setAlpha(0.35).toHslString(),\n inputInvalidBorder: 'hsl(358, 75%, 59%)', // $red9\n};\n\nexport const inputDarkTheme = {\n inputBg: 'hsl(209, 38.0%, 12.0%)', // $grayBlue7 dark\n inputBorder: 'hsl(208, 11.0%, 45.0%)', // $grayBlue9 dark\n inputFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n inputFocusBorder: 'hsl(206, 100%, 70%)', // blue11\n inputHoverBg: 'hsla(0, 0%, 100%, 0.104)', // $whiteA4\n inputText: tinycolor('white').setAlpha(0.8).toHslString(),\n inputPlaceholder: 'hsla(0, 0%, 100%, 0.455)', // $whiteA10\n inputDisabledText: tinycolor('white').setAlpha(0.35).toHslString(),\n inputInvalidBorder: 'hsl(358, 75%, 59%)', // $red9\n};\n"],"mappings":";;AAIA,IAAa,kBAAkB;CAC7B,SAAS;CACT,aAAa;CACb,cAAc,UAAU,OAAO,
|
|
1
|
+
{"version":3,"file":"Input.theme.js","names":[],"sources":["../../../components/Input/Input.theme.ts"],"sourcesContent":["import tinycolor from 'tinycolor2';\n\n// Plain TypeScript color tokens (no vanilla-extract)\n// Using default blue primary color for static tokens\nexport const inputLightTheme = {\n inputBg: 'hsl(240, 14.0%, 99.0%)', // $deepBlue1\n inputBorder: 'hsl(208, 9.0%, 73.0%)', // $grayBlue9\n inputFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n inputFocusBorder: 'hsl(206, 100%, 50%)', // blue8\n inputHoverBg: 'hsla(0, 0%, 100%, 0.372)', // $whiteA9\n inputText: tinycolor('black').setAlpha(0.74).toHslString(),\n inputPlaceholder: 'hsla(0, 0%, 0%, 0.498)', // $blackA10\n inputDisabledText: tinycolor('black').setAlpha(0.35).toHslString(),\n inputInvalidBorder: 'hsl(358, 75%, 59%)', // $red9\n};\n\nexport const inputDarkTheme = {\n inputBg: 'hsl(209, 38.0%, 12.0%)', // $grayBlue7 dark\n inputBorder: 'hsl(208, 11.0%, 45.0%)', // $grayBlue9 dark\n inputFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n inputFocusBorder: 'hsl(206, 100%, 70%)', // blue11\n inputHoverBg: 'hsla(0, 0%, 100%, 0.104)', // $whiteA4\n inputText: tinycolor('white').setAlpha(0.8).toHslString(),\n inputPlaceholder: 'hsla(0, 0%, 100%, 0.455)', // $whiteA10\n inputDisabledText: tinycolor('white').setAlpha(0.35).toHslString(),\n inputInvalidBorder: 'hsl(358, 75%, 59%)', // $red9\n};\n"],"mappings":";;AAIA,IAAa,kBAAkB;CAC7B,SAAS;CACT,aAAa;CACb,cAAc,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;CAC5D,kBAAkB;CAClB,cAAc;CACd,WAAW,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;CACzD,kBAAkB;CAClB,mBAAmB,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;CACjE,oBAAoB;AACtB;AAEA,IAAa,iBAAiB;CAC5B,SAAS;CACT,aAAa;CACb,cAAc,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;CAC5D,kBAAkB;CAClB,cAAc;CACd,WAAW,UAAU,OAAO,CAAC,CAAC,SAAS,EAAG,CAAC,CAAC,YAAY;CACxD,kBAAkB;CAClB,mBAAmB,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;CACjE,oBAAoB;AACtB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.themes.cjs","names":[],"sources":["../../../components/Input/Input.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n export type Colors = {\n inputBg: Property.Color;\n inputBorder: Property.Color;\n inputFocusBg: Property.Color;\n inputFocusBorder: Property.Color;\n inputHoverBg: Property.Color;\n inputText: Property.Color;\n inputPlaceholder: Property.Color;\n inputDisabledText: Property.Color;\n inputInvalidBorder: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = (primaryColor) => ({\n inputBg: '$deepBlue1',\n inputBorder: '$grayBlue9',\n inputFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n inputFocusBorder: primaryColor.helpers.pickScale(8),\n inputHoverBg: '$whiteA9',\n inputText: tinycolor('black').setAlpha(0.74).toHslString(),\n inputPlaceholder: '$blackA10',\n inputDisabledText: tinycolor('black').setAlpha(0.35).toHslString(),\n inputInvalidBorder: '$red9',\n });\n\n export const getDark: Factory = (primaryColor) => ({\n inputBg: '$grayBlue7',\n inputBorder: '$grayBlue9',\n inputFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n inputFocusBorder: primaryColor.helpers.pickScale(11),\n inputHoverBg: '$whiteA4',\n inputText: tinycolor('white').setAlpha(0.8).toHslString(),\n inputPlaceholder: '$whiteA10',\n inputDisabledText: tinycolor('white').setAlpha(0.35).toHslString(),\n inputInvalidBorder: '$red9',\n });\n}\n"],"mappings":";;;;AAKO,IAAA;;CAeQ,OAAA,YAAqB,kBAAkB;EAClD,SAAS;EACT,aAAa;EACb,eAAA,GAAA,WAAA,
|
|
1
|
+
{"version":3,"file":"Input.themes.cjs","names":[],"sources":["../../../components/Input/Input.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n export type Colors = {\n inputBg: Property.Color;\n inputBorder: Property.Color;\n inputFocusBg: Property.Color;\n inputFocusBorder: Property.Color;\n inputHoverBg: Property.Color;\n inputText: Property.Color;\n inputPlaceholder: Property.Color;\n inputDisabledText: Property.Color;\n inputInvalidBorder: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = (primaryColor) => ({\n inputBg: '$deepBlue1',\n inputBorder: '$grayBlue9',\n inputFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n inputFocusBorder: primaryColor.helpers.pickScale(8),\n inputHoverBg: '$whiteA9',\n inputText: tinycolor('black').setAlpha(0.74).toHslString(),\n inputPlaceholder: '$blackA10',\n inputDisabledText: tinycolor('black').setAlpha(0.35).toHslString(),\n inputInvalidBorder: '$red9',\n });\n\n export const getDark: Factory = (primaryColor) => ({\n inputBg: '$grayBlue7',\n inputBorder: '$grayBlue9',\n inputFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n inputFocusBorder: primaryColor.helpers.pickScale(11),\n inputHoverBg: '$whiteA4',\n inputText: tinycolor('white').setAlpha(0.8).toHslString(),\n inputPlaceholder: '$whiteA10',\n inputDisabledText: tinycolor('white').setAlpha(0.35).toHslString(),\n inputInvalidBorder: '$red9',\n });\n}\n"],"mappings":";;;;AAKO,IAAA;;CAeQ,OAAA,YAAqB,kBAAkB;EAClD,SAAS;EACT,aAAa;EACb,eAAA,GAAA,WAAA,QAAA,CAAwB,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAC5D,kBAAkB,aAAa,QAAQ,UAAU,CAAC;EAClD,cAAc;EACd,YAAA,GAAA,WAAA,QAAA,CAAqB,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EACzD,kBAAkB;EAClB,oBAAA,GAAA,WAAA,QAAA,CAA6B,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EACjE,oBAAoB;CACtB;CAEa,OAAA,WAAoB,kBAAkB;EACjD,SAAS;EACT,aAAa;EACb,eAAA,GAAA,WAAA,QAAA,CAAwB,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAC5D,kBAAkB,aAAa,QAAQ,UAAU,EAAE;EACnD,cAAc;EACd,YAAA,GAAA,WAAA,QAAA,CAAqB,OAAO,CAAC,CAAC,SAAS,EAAG,CAAC,CAAC,YAAY;EACxD,kBAAkB;EAClB,oBAAA,GAAA,WAAA,QAAA,CAA6B,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EACjE,oBAAoB;CACtB;GACD,UAAA,QAAA,CAAA,EAAD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.themes.js","names":[],"sources":["../../../components/Input/Input.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n export type Colors = {\n inputBg: Property.Color;\n inputBorder: Property.Color;\n inputFocusBg: Property.Color;\n inputFocusBorder: Property.Color;\n inputHoverBg: Property.Color;\n inputText: Property.Color;\n inputPlaceholder: Property.Color;\n inputDisabledText: Property.Color;\n inputInvalidBorder: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = (primaryColor) => ({\n inputBg: '$deepBlue1',\n inputBorder: '$grayBlue9',\n inputFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n inputFocusBorder: primaryColor.helpers.pickScale(8),\n inputHoverBg: '$whiteA9',\n inputText: tinycolor('black').setAlpha(0.74).toHslString(),\n inputPlaceholder: '$blackA10',\n inputDisabledText: tinycolor('black').setAlpha(0.35).toHslString(),\n inputInvalidBorder: '$red9',\n });\n\n export const getDark: Factory = (primaryColor) => ({\n inputBg: '$grayBlue7',\n inputBorder: '$grayBlue9',\n inputFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n inputFocusBorder: primaryColor.helpers.pickScale(11),\n inputHoverBg: '$whiteA4',\n inputText: tinycolor('white').setAlpha(0.8).toHslString(),\n inputPlaceholder: '$whiteA10',\n inputDisabledText: tinycolor('white').setAlpha(0.35).toHslString(),\n inputInvalidBorder: '$red9',\n });\n}\n"],"mappings":";;AAKO,IAAA;;CAeQ,OAAA,YAAqB,kBAAkB;EAClD,SAAS;EACT,aAAa;EACb,cAAc,UAAU,OAAO,
|
|
1
|
+
{"version":3,"file":"Input.themes.js","names":[],"sources":["../../../components/Input/Input.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n export type Colors = {\n inputBg: Property.Color;\n inputBorder: Property.Color;\n inputFocusBg: Property.Color;\n inputFocusBorder: Property.Color;\n inputHoverBg: Property.Color;\n inputText: Property.Color;\n inputPlaceholder: Property.Color;\n inputDisabledText: Property.Color;\n inputInvalidBorder: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = (primaryColor) => ({\n inputBg: '$deepBlue1',\n inputBorder: '$grayBlue9',\n inputFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n inputFocusBorder: primaryColor.helpers.pickScale(8),\n inputHoverBg: '$whiteA9',\n inputText: tinycolor('black').setAlpha(0.74).toHslString(),\n inputPlaceholder: '$blackA10',\n inputDisabledText: tinycolor('black').setAlpha(0.35).toHslString(),\n inputInvalidBorder: '$red9',\n });\n\n export const getDark: Factory = (primaryColor) => ({\n inputBg: '$grayBlue7',\n inputBorder: '$grayBlue9',\n inputFocusBg: tinycolor('black').setAlpha(0.15).toHslString(),\n inputFocusBorder: primaryColor.helpers.pickScale(11),\n inputHoverBg: '$whiteA4',\n inputText: tinycolor('white').setAlpha(0.8).toHslString(),\n inputPlaceholder: '$whiteA10',\n inputDisabledText: tinycolor('white').setAlpha(0.35).toHslString(),\n inputInvalidBorder: '$red9',\n });\n}\n"],"mappings":";;AAKO,IAAA;;CAeQ,OAAA,YAAqB,kBAAkB;EAClD,SAAS;EACT,aAAa;EACb,cAAc,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAC5D,kBAAkB,aAAa,QAAQ,UAAU,CAAC;EAClD,cAAc;EACd,WAAW,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EACzD,kBAAkB;EAClB,mBAAmB,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EACjE,oBAAoB;CACtB;CAEa,OAAA,WAAoB,kBAAkB;EACjD,SAAS;EACT,aAAa;EACb,cAAc,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAC5D,kBAAkB,aAAa,QAAQ,UAAU,EAAE;EACnD,cAAc;EACd,WAAW,UAAU,OAAO,CAAC,CAAC,SAAS,EAAG,CAAC,CAAC,YAAY;EACxD,kBAAkB;EAClB,mBAAmB,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EACjE,oBAAoB;CACtB;GACD,UAAA,QAAA,CAAA,EAAD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.vanilla.cjs","names":[],"sources":["../../../components/Input/Input.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport React from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { adornmentWrapperRecipe, inputWrapperRecipe, styledInputRecipe } from './Input.vanilla.css';\n\ntype StyledInputRecipeVariants = NonNullable<RecipeVariants<typeof styledInputRecipe>>;\n\nexport interface InputVanillaOwnProps extends CSSProps {\n size?: StyledInputRecipeVariants['size'];\n variant?: StyledInputRecipeVariants['variant'];\n state?: StyledInputRecipeVariants['state'];\n cursor?: StyledInputRecipeVariants['cursor'];\n startAdornment?: React.ReactNode;\n endAdornment?: React.ReactNode;\n type?: string;\n}\n\nexport type InputVanillaProps = Omit<React.InputHTMLAttributes<any>, 'size'> & InputVanillaOwnProps;\n\nexport interface InputVanillaHandle extends HTMLInputElement {\n clear: () => void;\n}\n\nexport const InputVanilla = React.forwardRef<InputVanillaHandle, InputVanillaProps>(\n (\n { size, startAdornment, endAdornment, css, variant, state, cursor, className, style, ...props },\n forwardedRef,\n ) => {\n const inputRef = React.useRef<InputVanillaHandle>(null);\n const { colors } = useVanillaExtractTheme();\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n const mergedStyles = { ...cssStyles, ...style, ...assignInlineVars(vars) };\n\n React.useImperativeHandle(forwardedRef, () => {\n const { current } = inputRef;\n if (current) {\n current.clear = () => {\n current.value = '';\n };\n }\n return current as InputVanillaHandle;\n }, [inputRef]);\n\n const hasStartAdornment = React.useMemo(() => Boolean(startAdornment), [startAdornment]);\n const hasEndAdornment = React.useMemo(() => Boolean(endAdornment), [endAdornment]);\n\n const inputWrapperClass = inputWrapperRecipe({\n disabled: props.disabled,\n state,\n size,\n });\n\n const styledInputClass = styledInputRecipe({\n size,\n variant,\n state,\n cursor,\n startAdornment: hasStartAdornment,\n endAdornment: hasEndAdornment,\n });\n\n const adornmentWrapperStartClass = adornmentWrapperRecipe({\n size,\n variant: 'start',\n });\n\n const adornmentWrapperEndClass = adornmentWrapperRecipe({\n size,\n variant: 'end',\n });\n\n return (\n <div className={`${inputWrapperClass} ${className || ''}`.trim()} style={mergedStyles}>\n {hasStartAdornment && <div className={adornmentWrapperStartClass}>{startAdornment}</div>}\n\n <input ref={inputRef} className={styledInputClass} {...props} />\n\n {hasEndAdornment && <div className={adornmentWrapperEndClass}>{endAdornment}</div>}\n </div>\n );\n },\n);\n\nInputVanilla.displayName = 'InputVanilla';\n"],"mappings":";;;;;;;;;AA0BA,IAAa,eAAe,MAAA,QAAM,YAE9B,EAAE,MAAM,gBAAgB,cAAc,KAAK,SAAS,OAAO,QAAQ,WAAW,OAAO,GAAG,SACxF,iBACG;CACH,MAAM,WAAW,MAAA,QAAM,OAA2B,IAAI;CACtD,MAAM,EAAE,WAAW,qBAAA,uBAAuB;CAC1C,MAAM,EAAE,OAAO,WAAW,SAAS,iBAAA,eAAe,KAAK,MAAM;CAC7D,MAAM,eAAe;EAAE,GAAG;EAAW,GAAG;EAAO,IAAA,GAAA,yBAAA,
|
|
1
|
+
{"version":3,"file":"Input.vanilla.cjs","names":[],"sources":["../../../components/Input/Input.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport React from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { adornmentWrapperRecipe, inputWrapperRecipe, styledInputRecipe } from './Input.vanilla.css';\n\ntype StyledInputRecipeVariants = NonNullable<RecipeVariants<typeof styledInputRecipe>>;\n\nexport interface InputVanillaOwnProps extends CSSProps {\n size?: StyledInputRecipeVariants['size'];\n variant?: StyledInputRecipeVariants['variant'];\n state?: StyledInputRecipeVariants['state'];\n cursor?: StyledInputRecipeVariants['cursor'];\n startAdornment?: React.ReactNode;\n endAdornment?: React.ReactNode;\n type?: string;\n}\n\nexport type InputVanillaProps = Omit<React.InputHTMLAttributes<any>, 'size'> & InputVanillaOwnProps;\n\nexport interface InputVanillaHandle extends HTMLInputElement {\n clear: () => void;\n}\n\nexport const InputVanilla = React.forwardRef<InputVanillaHandle, InputVanillaProps>(\n (\n { size, startAdornment, endAdornment, css, variant, state, cursor, className, style, ...props },\n forwardedRef,\n ) => {\n const inputRef = React.useRef<InputVanillaHandle>(null);\n const { colors } = useVanillaExtractTheme();\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n const mergedStyles = { ...cssStyles, ...style, ...assignInlineVars(vars) };\n\n React.useImperativeHandle(forwardedRef, () => {\n const { current } = inputRef;\n if (current) {\n current.clear = () => {\n current.value = '';\n };\n }\n return current as InputVanillaHandle;\n }, [inputRef]);\n\n const hasStartAdornment = React.useMemo(() => Boolean(startAdornment), [startAdornment]);\n const hasEndAdornment = React.useMemo(() => Boolean(endAdornment), [endAdornment]);\n\n const inputWrapperClass = inputWrapperRecipe({\n disabled: props.disabled,\n state,\n size,\n });\n\n const styledInputClass = styledInputRecipe({\n size,\n variant,\n state,\n cursor,\n startAdornment: hasStartAdornment,\n endAdornment: hasEndAdornment,\n });\n\n const adornmentWrapperStartClass = adornmentWrapperRecipe({\n size,\n variant: 'start',\n });\n\n const adornmentWrapperEndClass = adornmentWrapperRecipe({\n size,\n variant: 'end',\n });\n\n return (\n <div className={`${inputWrapperClass} ${className || ''}`.trim()} style={mergedStyles}>\n {hasStartAdornment && <div className={adornmentWrapperStartClass}>{startAdornment}</div>}\n\n <input ref={inputRef} className={styledInputClass} {...props} />\n\n {hasEndAdornment && <div className={adornmentWrapperEndClass}>{endAdornment}</div>}\n </div>\n );\n },\n);\n\nInputVanilla.displayName = 'InputVanilla';\n"],"mappings":";;;;;;;;;AA0BA,IAAa,eAAe,MAAA,QAAM,YAE9B,EAAE,MAAM,gBAAgB,cAAc,KAAK,SAAS,OAAO,QAAQ,WAAW,OAAO,GAAG,SACxF,iBACG;CACH,MAAM,WAAW,MAAA,QAAM,OAA2B,IAAI;CACtD,MAAM,EAAE,WAAW,qBAAA,uBAAuB;CAC1C,MAAM,EAAE,OAAO,WAAW,SAAS,iBAAA,eAAe,KAAK,MAAM;CAC7D,MAAM,eAAe;EAAE,GAAG;EAAW,GAAG;EAAO,IAAA,GAAA,yBAAA,iBAAA,CAAoB,IAAI;CAAE;CAEzE,MAAA,QAAM,oBAAoB,oBAAoB;EAC5C,MAAM,EAAE,YAAY;EACpB,IAAI,SACF,QAAQ,cAAc;GACpB,QAAQ,QAAQ;EAClB;EAEF,OAAO;CACT,GAAG,CAAC,QAAQ,CAAC;CAEb,MAAM,oBAAoB,MAAA,QAAM,cAAc,QAAQ,cAAc,GAAG,CAAC,cAAc,CAAC;CACvF,MAAM,kBAAkB,MAAA,QAAM,cAAc,QAAQ,YAAY,GAAG,CAAC,YAAY,CAAC;CAEjF,MAAM,oBAAoB,0BAAA,mBAAmB;EAC3C,UAAU,MAAM;EAChB;EACA;CACF,CAAC;CAED,MAAM,mBAAmB,0BAAA,kBAAkB;EACzC;EACA;EACA;EACA;EACA,gBAAgB;EAChB,cAAc;CAChB,CAAC;CAED,MAAM,6BAA6B,0BAAA,uBAAuB;EACxD;EACA,SAAS;CACX,CAAC;CAED,MAAM,2BAA2B,0BAAA,uBAAuB;EACtD;EACA,SAAS;CACX,CAAC;CAED,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,WAAW,GAAG,kBAAkB,GAAG,aAAa,KAAK,KAAK;EAAG,OAAO;YAAzE;GACG,qBAAqB,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IAAK,WAAW;cAA6B;GAAoB,CAAA;GAEvF,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;IAAO,KAAK;IAAU,WAAW;IAAkB,GAAI;GAAQ,CAAA;GAE9D,mBAAmB,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IAAK,WAAW;cAA2B;GAAkB,CAAA;EAC9E;;AAET,CACF;AAEA,aAAa,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Label.vanilla.cjs","names":[],"sources":["../../../components/Label/Label.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n PolymorphicComponent,\n PolymorphicComponentProps,\n PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { labelRecipe } from './Label.vanilla.css';\n\ntype LabelRecipeVariants = NonNullable<RecipeVariants<typeof labelRecipe>>;\n\ninterface LabelOwnProps extends LabelRecipeVariants, CSSProps {}\n\nexport type LabelVanillaProps<C extends ElementType = 'label'> = PolymorphicComponentProps<\n C,\n LabelOwnProps\n>;\n\ntype LabelVanillaComponent = PolymorphicComponent<'label', LabelVanillaProps<ElementType>>;\n\nconst LabelVanillaComponentImpl = forwardRef(\n <C extends ElementType = 'label'>(\n {\n as,\n className,\n css,\n style,\n size,\n weight,\n variant,\n gradient,\n transform,\n noWrap,\n ...props\n }: LabelVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as || 'label';\n const { colors } = useVanillaExtractTheme();\n\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n const mergedStyles = {\n ...cssStyles,\n ...style,\n ...assignInlineVars(vars),\n };\n\n const recipeClass = labelRecipe({ size, weight, variant, gradient, transform, noWrap });\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className || ''}`.trim()}\n style={mergedStyles}\n {...props}\n />\n );\n },\n);\n\nLabelVanillaComponentImpl.displayName = 'LabelVanilla';\n\nexport const LabelVanilla = LabelVanillaComponentImpl as LabelVanillaComponent;\n"],"mappings":";;;;;;;AAwBA,IAAM,6BAAA,GAAA,MAAA,
|
|
1
|
+
{"version":3,"file":"Label.vanilla.cjs","names":[],"sources":["../../../components/Label/Label.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n PolymorphicComponent,\n PolymorphicComponentProps,\n PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { labelRecipe } from './Label.vanilla.css';\n\ntype LabelRecipeVariants = NonNullable<RecipeVariants<typeof labelRecipe>>;\n\ninterface LabelOwnProps extends LabelRecipeVariants, CSSProps {}\n\nexport type LabelVanillaProps<C extends ElementType = 'label'> = PolymorphicComponentProps<\n C,\n LabelOwnProps\n>;\n\ntype LabelVanillaComponent = PolymorphicComponent<'label', LabelVanillaProps<ElementType>>;\n\nconst LabelVanillaComponentImpl = forwardRef(\n <C extends ElementType = 'label'>(\n {\n as,\n className,\n css,\n style,\n size,\n weight,\n variant,\n gradient,\n transform,\n noWrap,\n ...props\n }: LabelVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as || 'label';\n const { colors } = useVanillaExtractTheme();\n\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n const mergedStyles = {\n ...cssStyles,\n ...style,\n ...assignInlineVars(vars),\n };\n\n const recipeClass = labelRecipe({ size, weight, variant, gradient, transform, noWrap });\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className || ''}`.trim()}\n style={mergedStyles}\n {...props}\n />\n );\n },\n);\n\nLabelVanillaComponentImpl.displayName = 'LabelVanilla';\n\nexport const LabelVanilla = LabelVanillaComponentImpl as LabelVanillaComponent;\n"],"mappings":";;;;;;;AAwBA,IAAM,6BAAA,GAAA,MAAA,WAAA,EAEF,EACE,IACA,WACA,KACA,OACA,MACA,QACA,SACA,UACA,WACA,QACA,GAAG,SAEL,QACG;CACH,MAAM,YAAY,MAAM;CACxB,MAAM,EAAE,WAAW,qBAAA,uBAAuB;CAE1C,MAAM,EAAE,OAAO,WAAW,SAAS,iBAAA,eAAe,KAAK,MAAM;CAE7D,MAAM,eAAe;EACnB,GAAG;EACH,GAAG;EACH,IAAA,GAAA,yBAAA,iBAAA,CAAoB,IAAI;CAC1B;CAIA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;EACO;EACL,WAAW,GALK,0BAAA,YAAY;GAAE;GAAM;GAAQ;GAAS;GAAU;GAAW;EAAO,CAKnE,EAAY,GAAG,aAAa,KAAK,KAAK;EACpD,OAAO;EACP,GAAI;CACL,CAAA;AAEL,CACF;AAEA,0BAA0B,cAAc;AAExC,IAAa,eAAe"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.themes.cjs","names":[],"sources":["../../../components/Link/Link.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\nexport namespace Theme {\n type Colors = {\n linkSubtle: Property.Color;\n linkBlueTextDecoration: Property.Color;\n linkBlueHoverTextDecoration: Property.Color;\n linkBlueFocusOutline: Property.Color;\n linkContrast: Property.Color;\n linkContrastTextDecoration: Property.Color;\n linkContrastHoverTextDecoration: Property.Color;\n linkContrastFocusOutline: Property.Color;\n linkSubtleTextDecoration: Property.Color;\n linkSubtleHoverTextDecoration: Property.Color;\n linkSubtleFocusOutline: Property.Color;\n linkPrimary: Property.Color;\n linkPrimaryTextDecoration: Property.Color;\n linkPrimaryHoverTextDecoration: Property.Color;\n linkPrimaryFocusOutline: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = (primaryColor) => ({\n linkBlue: '$blue11',\n linkBlueTextDecoration: '$blue7',\n linkBlueHoverTextDecoration: '$blue11',\n linkBlueFocusOutline: '$blue8',\n linkContrast: '$hiContrast',\n linkContrastTextDecoration: '$slate8',\n linkContrastHoverTextDecoration: '$hiContrast',\n linkContrastFocusOutline: '$slate8',\n linkSubtle: '$deepBlue7',\n linkSubtleTextDecoration: '$deepBlue5',\n linkSubtleHoverTextDecoration: '$deepBlue7',\n linkSubtleFocusOutline: '$deepBlue4',\n linkPrimary: tinycolor(primaryColor.value).darken(26).toHslString(),\n linkPrimaryTextDecoration: tinycolor(primaryColor.value).darken(16).toHslString(),\n linkPrimaryHoverTextDecoration: tinycolor(primaryColor.value).darken(26).toHslString(),\n linkPrimaryFocusOutline: tinycolor(primaryColor.value).darken(16).toHslString(),\n });\n\n export const getDark: Factory = (primaryColor) => ({\n linkBlue: '$blue11',\n linkBlueTextDecoration: '$blue8',\n linkBlueHoverTextDecoration: '$blue11',\n linkBlueFocusOutline: '$blue8',\n linkContrast: '$hiContrast',\n linkContrastTextDecoration: '$slate8',\n linkContrastHoverTextDecoration: '$hiContrast',\n linkContrastFocusOutline: '$slate8',\n linkSubtle: '$deepBlue6',\n linkSubtleTextDecoration: '$deepBlue4',\n linkSubtleHoverTextDecoration: '$deepBlue5',\n linkSubtleFocusOutline: '$deepBlue3',\n linkPrimary: '$primary',\n linkPrimaryTextDecoration: tinycolor(primaryColor.value).lighten(16).toHslString(),\n linkPrimaryHoverTextDecoration: tinycolor(primaryColor.value).darken(20).toHslString(),\n linkPrimaryFocusOutline: tinycolor(primaryColor.value).lighten(16).toHslString(),\n });\n}\n"],"mappings":";;;;AAIO,IAAA;;CAqBQ,OAAA,YAAqB,kBAAkB;EAClD,UAAU;EACV,wBAAwB;EACxB,6BAA6B;EAC7B,sBAAsB;EACtB,cAAc;EACd,4BAA4B;EAC5B,iCAAiC;EACjC,0BAA0B;EAC1B,YAAY;EACZ,0BAA0B;EAC1B,+BAA+B;EAC/B,wBAAwB;EACxB,cAAA,GAAA,WAAA,
|
|
1
|
+
{"version":3,"file":"Link.themes.cjs","names":[],"sources":["../../../components/Link/Link.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\nexport namespace Theme {\n type Colors = {\n linkSubtle: Property.Color;\n linkBlueTextDecoration: Property.Color;\n linkBlueHoverTextDecoration: Property.Color;\n linkBlueFocusOutline: Property.Color;\n linkContrast: Property.Color;\n linkContrastTextDecoration: Property.Color;\n linkContrastHoverTextDecoration: Property.Color;\n linkContrastFocusOutline: Property.Color;\n linkSubtleTextDecoration: Property.Color;\n linkSubtleHoverTextDecoration: Property.Color;\n linkSubtleFocusOutline: Property.Color;\n linkPrimary: Property.Color;\n linkPrimaryTextDecoration: Property.Color;\n linkPrimaryHoverTextDecoration: Property.Color;\n linkPrimaryFocusOutline: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = (primaryColor) => ({\n linkBlue: '$blue11',\n linkBlueTextDecoration: '$blue7',\n linkBlueHoverTextDecoration: '$blue11',\n linkBlueFocusOutline: '$blue8',\n linkContrast: '$hiContrast',\n linkContrastTextDecoration: '$slate8',\n linkContrastHoverTextDecoration: '$hiContrast',\n linkContrastFocusOutline: '$slate8',\n linkSubtle: '$deepBlue7',\n linkSubtleTextDecoration: '$deepBlue5',\n linkSubtleHoverTextDecoration: '$deepBlue7',\n linkSubtleFocusOutline: '$deepBlue4',\n linkPrimary: tinycolor(primaryColor.value).darken(26).toHslString(),\n linkPrimaryTextDecoration: tinycolor(primaryColor.value).darken(16).toHslString(),\n linkPrimaryHoverTextDecoration: tinycolor(primaryColor.value).darken(26).toHslString(),\n linkPrimaryFocusOutline: tinycolor(primaryColor.value).darken(16).toHslString(),\n });\n\n export const getDark: Factory = (primaryColor) => ({\n linkBlue: '$blue11',\n linkBlueTextDecoration: '$blue8',\n linkBlueHoverTextDecoration: '$blue11',\n linkBlueFocusOutline: '$blue8',\n linkContrast: '$hiContrast',\n linkContrastTextDecoration: '$slate8',\n linkContrastHoverTextDecoration: '$hiContrast',\n linkContrastFocusOutline: '$slate8',\n linkSubtle: '$deepBlue6',\n linkSubtleTextDecoration: '$deepBlue4',\n linkSubtleHoverTextDecoration: '$deepBlue5',\n linkSubtleFocusOutline: '$deepBlue3',\n linkPrimary: '$primary',\n linkPrimaryTextDecoration: tinycolor(primaryColor.value).lighten(16).toHslString(),\n linkPrimaryHoverTextDecoration: tinycolor(primaryColor.value).darken(20).toHslString(),\n linkPrimaryFocusOutline: tinycolor(primaryColor.value).lighten(16).toHslString(),\n });\n}\n"],"mappings":";;;;AAIO,IAAA;;CAqBQ,OAAA,YAAqB,kBAAkB;EAClD,UAAU;EACV,wBAAwB;EACxB,6BAA6B;EAC7B,sBAAsB;EACtB,cAAc;EACd,4BAA4B;EAC5B,iCAAiC;EACjC,0BAA0B;EAC1B,YAAY;EACZ,0BAA0B;EAC1B,+BAA+B;EAC/B,wBAAwB;EACxB,cAAA,GAAA,WAAA,QAAA,CAAuB,aAAa,KAAK,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,YAAY;EAClE,4BAAA,GAAA,WAAA,QAAA,CAAqC,aAAa,KAAK,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,YAAY;EAChF,iCAAA,GAAA,WAAA,QAAA,CAA0C,aAAa,KAAK,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,YAAY;EACrF,0BAAA,GAAA,WAAA,QAAA,CAAmC,aAAa,KAAK,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,YAAY;CAChF;CAEa,OAAA,WAAoB,kBAAkB;EACjD,UAAU;EACV,wBAAwB;EACxB,6BAA6B;EAC7B,sBAAsB;EACtB,cAAc;EACd,4BAA4B;EAC5B,iCAAiC;EACjC,0BAA0B;EAC1B,YAAY;EACZ,0BAA0B;EAC1B,+BAA+B;EAC/B,wBAAwB;EACxB,aAAa;EACb,4BAAA,GAAA,WAAA,QAAA,CAAqC,aAAa,KAAK,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,YAAY;EACjF,iCAAA,GAAA,WAAA,QAAA,CAA0C,aAAa,KAAK,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,YAAY;EACrF,0BAAA,GAAA,WAAA,QAAA,CAAmC,aAAa,KAAK,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,YAAY;CACjF;GACD,UAAA,QAAA,CAAA,EAAD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.themes.js","names":[],"sources":["../../../components/Link/Link.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\nexport namespace Theme {\n type Colors = {\n linkSubtle: Property.Color;\n linkBlueTextDecoration: Property.Color;\n linkBlueHoverTextDecoration: Property.Color;\n linkBlueFocusOutline: Property.Color;\n linkContrast: Property.Color;\n linkContrastTextDecoration: Property.Color;\n linkContrastHoverTextDecoration: Property.Color;\n linkContrastFocusOutline: Property.Color;\n linkSubtleTextDecoration: Property.Color;\n linkSubtleHoverTextDecoration: Property.Color;\n linkSubtleFocusOutline: Property.Color;\n linkPrimary: Property.Color;\n linkPrimaryTextDecoration: Property.Color;\n linkPrimaryHoverTextDecoration: Property.Color;\n linkPrimaryFocusOutline: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = (primaryColor) => ({\n linkBlue: '$blue11',\n linkBlueTextDecoration: '$blue7',\n linkBlueHoverTextDecoration: '$blue11',\n linkBlueFocusOutline: '$blue8',\n linkContrast: '$hiContrast',\n linkContrastTextDecoration: '$slate8',\n linkContrastHoverTextDecoration: '$hiContrast',\n linkContrastFocusOutline: '$slate8',\n linkSubtle: '$deepBlue7',\n linkSubtleTextDecoration: '$deepBlue5',\n linkSubtleHoverTextDecoration: '$deepBlue7',\n linkSubtleFocusOutline: '$deepBlue4',\n linkPrimary: tinycolor(primaryColor.value).darken(26).toHslString(),\n linkPrimaryTextDecoration: tinycolor(primaryColor.value).darken(16).toHslString(),\n linkPrimaryHoverTextDecoration: tinycolor(primaryColor.value).darken(26).toHslString(),\n linkPrimaryFocusOutline: tinycolor(primaryColor.value).darken(16).toHslString(),\n });\n\n export const getDark: Factory = (primaryColor) => ({\n linkBlue: '$blue11',\n linkBlueTextDecoration: '$blue8',\n linkBlueHoverTextDecoration: '$blue11',\n linkBlueFocusOutline: '$blue8',\n linkContrast: '$hiContrast',\n linkContrastTextDecoration: '$slate8',\n linkContrastHoverTextDecoration: '$hiContrast',\n linkContrastFocusOutline: '$slate8',\n linkSubtle: '$deepBlue6',\n linkSubtleTextDecoration: '$deepBlue4',\n linkSubtleHoverTextDecoration: '$deepBlue5',\n linkSubtleFocusOutline: '$deepBlue3',\n linkPrimary: '$primary',\n linkPrimaryTextDecoration: tinycolor(primaryColor.value).lighten(16).toHslString(),\n linkPrimaryHoverTextDecoration: tinycolor(primaryColor.value).darken(20).toHslString(),\n linkPrimaryFocusOutline: tinycolor(primaryColor.value).lighten(16).toHslString(),\n });\n}\n"],"mappings":";;AAIO,IAAA;;CAqBQ,OAAA,YAAqB,kBAAkB;EAClD,UAAU;EACV,wBAAwB;EACxB,6BAA6B;EAC7B,sBAAsB;EACtB,cAAc;EACd,4BAA4B;EAC5B,iCAAiC;EACjC,0BAA0B;EAC1B,YAAY;EACZ,0BAA0B;EAC1B,+BAA+B;EAC/B,wBAAwB;EACxB,aAAa,UAAU,aAAa,KAAK,
|
|
1
|
+
{"version":3,"file":"Link.themes.js","names":[],"sources":["../../../components/Link/Link.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\nexport namespace Theme {\n type Colors = {\n linkSubtle: Property.Color;\n linkBlueTextDecoration: Property.Color;\n linkBlueHoverTextDecoration: Property.Color;\n linkBlueFocusOutline: Property.Color;\n linkContrast: Property.Color;\n linkContrastTextDecoration: Property.Color;\n linkContrastHoverTextDecoration: Property.Color;\n linkContrastFocusOutline: Property.Color;\n linkSubtleTextDecoration: Property.Color;\n linkSubtleHoverTextDecoration: Property.Color;\n linkSubtleFocusOutline: Property.Color;\n linkPrimary: Property.Color;\n linkPrimaryTextDecoration: Property.Color;\n linkPrimaryHoverTextDecoration: Property.Color;\n linkPrimaryFocusOutline: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = (primaryColor) => ({\n linkBlue: '$blue11',\n linkBlueTextDecoration: '$blue7',\n linkBlueHoverTextDecoration: '$blue11',\n linkBlueFocusOutline: '$blue8',\n linkContrast: '$hiContrast',\n linkContrastTextDecoration: '$slate8',\n linkContrastHoverTextDecoration: '$hiContrast',\n linkContrastFocusOutline: '$slate8',\n linkSubtle: '$deepBlue7',\n linkSubtleTextDecoration: '$deepBlue5',\n linkSubtleHoverTextDecoration: '$deepBlue7',\n linkSubtleFocusOutline: '$deepBlue4',\n linkPrimary: tinycolor(primaryColor.value).darken(26).toHslString(),\n linkPrimaryTextDecoration: tinycolor(primaryColor.value).darken(16).toHslString(),\n linkPrimaryHoverTextDecoration: tinycolor(primaryColor.value).darken(26).toHslString(),\n linkPrimaryFocusOutline: tinycolor(primaryColor.value).darken(16).toHslString(),\n });\n\n export const getDark: Factory = (primaryColor) => ({\n linkBlue: '$blue11',\n linkBlueTextDecoration: '$blue8',\n linkBlueHoverTextDecoration: '$blue11',\n linkBlueFocusOutline: '$blue8',\n linkContrast: '$hiContrast',\n linkContrastTextDecoration: '$slate8',\n linkContrastHoverTextDecoration: '$hiContrast',\n linkContrastFocusOutline: '$slate8',\n linkSubtle: '$deepBlue6',\n linkSubtleTextDecoration: '$deepBlue4',\n linkSubtleHoverTextDecoration: '$deepBlue5',\n linkSubtleFocusOutline: '$deepBlue3',\n linkPrimary: '$primary',\n linkPrimaryTextDecoration: tinycolor(primaryColor.value).lighten(16).toHslString(),\n linkPrimaryHoverTextDecoration: tinycolor(primaryColor.value).darken(20).toHslString(),\n linkPrimaryFocusOutline: tinycolor(primaryColor.value).lighten(16).toHslString(),\n });\n}\n"],"mappings":";;AAIO,IAAA;;CAqBQ,OAAA,YAAqB,kBAAkB;EAClD,UAAU;EACV,wBAAwB;EACxB,6BAA6B;EAC7B,sBAAsB;EACtB,cAAc;EACd,4BAA4B;EAC5B,iCAAiC;EACjC,0BAA0B;EAC1B,YAAY;EACZ,0BAA0B;EAC1B,+BAA+B;EAC/B,wBAAwB;EACxB,aAAa,UAAU,aAAa,KAAK,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,YAAY;EAClE,2BAA2B,UAAU,aAAa,KAAK,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,YAAY;EAChF,gCAAgC,UAAU,aAAa,KAAK,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,YAAY;EACrF,yBAAyB,UAAU,aAAa,KAAK,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,YAAY;CAChF;CAEa,OAAA,WAAoB,kBAAkB;EACjD,UAAU;EACV,wBAAwB;EACxB,6BAA6B;EAC7B,sBAAsB;EACtB,cAAc;EACd,4BAA4B;EAC5B,iCAAiC;EACjC,0BAA0B;EAC1B,YAAY;EACZ,0BAA0B;EAC1B,+BAA+B;EAC/B,wBAAwB;EACxB,aAAa;EACb,2BAA2B,UAAU,aAAa,KAAK,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,YAAY;EACjF,gCAAgC,UAAU,aAAa,KAAK,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,YAAY;EACrF,yBAAyB,UAAU,aAAa,KAAK,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,YAAY;CACjF;GACD,UAAA,QAAA,CAAA,EAAD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"List.cjs","names":[],"sources":["../../../components/List/List.tsx"],"sourcesContent":["import React, { ComponentProps, createContext, ReactNode, useContext, useMemo } from 'react';\n\nimport { styled, VariantProps } from '../../stitches.config';\nimport { BUTTON_BASE_STYLES } from '../Button';\nimport { elevationVariants } from '../Elevation';\nimport { Flex } from '../Flex';\n\nconst LIST_ITEM_CONTENT_STYLES = {\n bc: 'transparent',\n c: 'inherit',\n borderRadius: 'inherit',\n fontFamily: '$rubik',\n fontSize: '$3',\n fontVariantNumeric: 'tabular-nums',\n};\n\nconst StyledSpan = styled('span', Flex, {\n // APPLY BUTTON STYLES\n ...LIST_ITEM_CONTENT_STYLES,\n // CUSTOM\n p: '$1',\n gap: '$1',\n});\n\nconst StyledListItemButton = styled('button', Flex, {\n ...BUTTON_BASE_STYLES,\n ...LIST_ITEM_CONTENT_STYLES,\n outline: 'none',\n\n // CUSTOM\n flexGrow: 1,\n width: '100%',\n p: '$2',\n position: 'relative',\n '&::before': {\n borderRadius: 'inherit',\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n },\n '&::after': {\n borderRadius: 'inherit',\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n },\n '&:focus, &:focus-visible': {\n boxShadow: 'inset 0 0 0 2px $colors$listItemFocusBorder',\n },\n\n '@hover': {\n '&:hover': {\n cursor: 'pointer',\n '&::before': {\n backgroundColor: '$listItemHoverBg',\n },\n '&::after': {\n backgroundColor: '$primary',\n opacity: 0.05,\n },\n },\n },\n '&:active': {\n '&::before': {\n backgroundColor: '$listItemActiveBg',\n },\n '&::after': {\n backgroundColor: '$primary',\n opacity: 0.05,\n },\n },\n});\n\nconst StyledLi = styled('li', {\n m: '$2',\n outline: 'none',\n position: 'relative',\n '&:focus-within': {\n boxShadow: 'none',\n },\n variants: {\n elevation: elevationVariants,\n },\n defaultVariants: {\n elevation: '0',\n },\n});\n\nconst StyledUl = styled('ul', {\n m: '0 0 0 8px',\n p: 0,\n color: '$textDefault',\n\n '&:has(> li > span > input[type=\"checkbox\"])': {\n m: 0,\n listStyle: 'none',\n '> li': {\n marginLeft: 0,\n '> span': {\n input: {\n margin: '0 3px 0 0',\n },\n },\n },\n },\n // Restore left-margin indentation when a nested checkbox list is inside a li\n 'li > &:has(> li > span > input[type=\"checkbox\"])': {\n marginLeft: '$2',\n '> li': {\n marginLeft: '$2',\n },\n },\n});\n\nconst StyledOl = styled('ol', {\n m: '0 0 0 8px',\n p: 0,\n color: '$textDefault',\n\n '> li::marker': {\n fontSize: '$3',\n fontFamily: '$rubik',\n },\n});\n\nconst ListContext = createContext({\n interactive: false,\n});\n\nexport interface ListProps extends ComponentProps<typeof StyledUl>, VariantProps<typeof StyledUl> {\n interactive?: boolean;\n}\nexport const Ul = React.forwardRef<React.ElementRef<typeof StyledUl>, ListProps>(\n ({ interactive, ...props }, forwardedRef) => {\n const parentContext = useContext(ListContext);\n const contextValue = useMemo(\n () => ({\n interactive: interactive !== undefined ? !!interactive : parentContext.interactive,\n }),\n [interactive, parentContext.interactive],\n );\n\n return (\n <ListContext.Provider value={contextValue}>\n <StyledUl role=\"list\" ref={forwardedRef} {...props} />\n </ListContext.Provider>\n );\n },\n);\n\nexport interface OrderedListProps\n extends ComponentProps<typeof StyledOl>,\n VariantProps<typeof StyledOl> {\n interactive?: boolean;\n}\n\nexport const Ol = React.forwardRef<React.ElementRef<typeof StyledOl>, OrderedListProps>(\n ({ interactive, ...props }, forwardedRef) => {\n const parentContext = useContext(ListContext);\n const contextValue = useMemo(\n () => ({\n interactive: interactive !== undefined ? !!interactive : parentContext.interactive,\n }),\n [interactive, parentContext.interactive],\n );\n\n return (\n <ListContext.Provider value={contextValue}>\n <StyledOl role=\"list\" ref={forwardedRef} {...props} />\n </ListContext.Provider>\n );\n },\n);\n\nconst ControlsWrapper = styled('div', {\n position: 'absolute',\n top: 0,\n right: '$2',\n zIndex: 1,\n height: '100%',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n overflow: 'visible',\n});\n\nexport interface ListItemProps\n extends ComponentProps<typeof StyledLi>,\n VariantProps<typeof StyledLi>,\n VariantProps<typeof Flex> {\n controls?: ReactNode;\n}\nexport const Li = React.forwardRef<React.ElementRef<typeof StyledLi>, ListItemProps>(\n ({ children, controls, align, justify, direction, gap, wrap, ...props }, forwardedRef) => {\n const { interactive } = useContext(ListContext);\n\n const childArray = React.Children.toArray(children);\n const nestedLists = childArray.filter(\n (child) => React.isValidElement(child) && (child.type === Ul || child.type === Ol),\n );\n const inlineChildren = childArray.filter(\n (child) => !(React.isValidElement(child) && (child.type === Ul || child.type === Ol)),\n );\n\n return (\n <StyledLi {...props} ref={forwardedRef}>\n {interactive ? (\n <StyledListItemButton\n align={align}\n justify={justify}\n direction={direction}\n gap={gap}\n wrap={wrap}\n >\n {inlineChildren}\n </StyledListItemButton>\n ) : (\n <StyledSpan\n align={align || 'center'}\n justify={justify}\n direction={direction}\n gap={gap}\n wrap={wrap}\n css={{ flexGrow: 1 }}\n >\n {inlineChildren}\n </StyledSpan>\n )}\n {nestedLists}\n {!!controls && <ControlsWrapper>{controls}</ControlsWrapper>}\n </StyledLi>\n );\n },\n);\n"],"mappings":";;;;;;;;;AAOA,IAAM,2BAA2B;CAC/B,IAAI;CACJ,GAAG;CACH,cAAc;CACd,YAAY;CACZ,UAAU;CACV,oBAAoB;AACtB;AAEA,IAAM,aAAa,wBAAA,OAAO,QAAQ,aAAA,MAAM;CAEtC,GAAG;CAEH,GAAG;CACH,KAAK;AACP,CAAC;AAED,IAAM,uBAAuB,wBAAA,OAAO,UAAU,aAAA,MAAM;CAClD,GAAG,eAAA;CACH,GAAG;CACH,SAAS;CAGT,UAAU;CACV,OAAO;CACP,GAAG;CACH,UAAU;CACV,aAAa;EACX,cAAc;EACd,WAAW;EACX,SAAS;EACT,UAAU;EACV,OAAO;CACT;CACA,YAAY;EACV,cAAc;EACd,WAAW;EACX,SAAS;EACT,UAAU;EACV,OAAO;CACT;CACA,4BAA4B,EAC1B,WAAW,8CACb;CAEA,UAAU,EACR,WAAW;EACT,QAAQ;EACR,aAAa,EACX,iBAAiB,mBACnB;EACA,YAAY;GACV,iBAAiB;GACjB,SAAS;EACX;CACF,EACF;CACA,YAAY;EACV,aAAa,EACX,iBAAiB,oBACnB;EACA,YAAY;GACV,iBAAiB;GACjB,SAAS;EACX;CACF;AACF,CAAC;AAED,IAAM,WAAW,wBAAA,OAAO,MAAM;CAC5B,GAAG;CACH,SAAS;CACT,UAAU;CACV,kBAAkB,EAChB,WAAW,OACb;CACA,UAAU,EACR,WAAW,kBAAA,kBACb;CACA,iBAAiB,EACf,WAAW,IACb;AACF,CAAC;AAED,IAAM,WAAW,wBAAA,OAAO,MAAM;CAC5B,GAAG;CACH,GAAG;CACH,OAAO;CAEP,iDAA+C;EAC7C,GAAG;EACH,WAAW;EACX,QAAQ;GACN,YAAY;GACZ,UAAU,EACR,OAAO,EACL,QAAQ,YACV,EACF;EACF;CACF;CAEA,sDAAoD;EAClD,YAAY;EACZ,QAAQ,EACN,YAAY,KACd;CACF;AACF,CAAC;AAED,IAAM,WAAW,wBAAA,OAAO,MAAM;CAC5B,GAAG;CACH,GAAG;CACH,OAAO;CAEP,gBAAgB;EACd,UAAU;EACV,YAAY;CACd;AACF,CAAC;AAED,IAAM,eAAA,GAAA,MAAA,
|
|
1
|
+
{"version":3,"file":"List.cjs","names":[],"sources":["../../../components/List/List.tsx"],"sourcesContent":["import React, { ComponentProps, createContext, ReactNode, useContext, useMemo } from 'react';\n\nimport { styled, VariantProps } from '../../stitches.config';\nimport { BUTTON_BASE_STYLES } from '../Button';\nimport { elevationVariants } from '../Elevation';\nimport { Flex } from '../Flex';\n\nconst LIST_ITEM_CONTENT_STYLES = {\n bc: 'transparent',\n c: 'inherit',\n borderRadius: 'inherit',\n fontFamily: '$rubik',\n fontSize: '$3',\n fontVariantNumeric: 'tabular-nums',\n};\n\nconst StyledSpan = styled('span', Flex, {\n // APPLY BUTTON STYLES\n ...LIST_ITEM_CONTENT_STYLES,\n // CUSTOM\n p: '$1',\n gap: '$1',\n});\n\nconst StyledListItemButton = styled('button', Flex, {\n ...BUTTON_BASE_STYLES,\n ...LIST_ITEM_CONTENT_STYLES,\n outline: 'none',\n\n // CUSTOM\n flexGrow: 1,\n width: '100%',\n p: '$2',\n position: 'relative',\n '&::before': {\n borderRadius: 'inherit',\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n },\n '&::after': {\n borderRadius: 'inherit',\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n },\n '&:focus, &:focus-visible': {\n boxShadow: 'inset 0 0 0 2px $colors$listItemFocusBorder',\n },\n\n '@hover': {\n '&:hover': {\n cursor: 'pointer',\n '&::before': {\n backgroundColor: '$listItemHoverBg',\n },\n '&::after': {\n backgroundColor: '$primary',\n opacity: 0.05,\n },\n },\n },\n '&:active': {\n '&::before': {\n backgroundColor: '$listItemActiveBg',\n },\n '&::after': {\n backgroundColor: '$primary',\n opacity: 0.05,\n },\n },\n});\n\nconst StyledLi = styled('li', {\n m: '$2',\n outline: 'none',\n position: 'relative',\n '&:focus-within': {\n boxShadow: 'none',\n },\n variants: {\n elevation: elevationVariants,\n },\n defaultVariants: {\n elevation: '0',\n },\n});\n\nconst StyledUl = styled('ul', {\n m: '0 0 0 8px',\n p: 0,\n color: '$textDefault',\n\n '&:has(> li > span > input[type=\"checkbox\"])': {\n m: 0,\n listStyle: 'none',\n '> li': {\n marginLeft: 0,\n '> span': {\n input: {\n margin: '0 3px 0 0',\n },\n },\n },\n },\n // Restore left-margin indentation when a nested checkbox list is inside a li\n 'li > &:has(> li > span > input[type=\"checkbox\"])': {\n marginLeft: '$2',\n '> li': {\n marginLeft: '$2',\n },\n },\n});\n\nconst StyledOl = styled('ol', {\n m: '0 0 0 8px',\n p: 0,\n color: '$textDefault',\n\n '> li::marker': {\n fontSize: '$3',\n fontFamily: '$rubik',\n },\n});\n\nconst ListContext = createContext({\n interactive: false,\n});\n\nexport interface ListProps extends ComponentProps<typeof StyledUl>, VariantProps<typeof StyledUl> {\n interactive?: boolean;\n}\nexport const Ul = React.forwardRef<React.ElementRef<typeof StyledUl>, ListProps>(\n ({ interactive, ...props }, forwardedRef) => {\n const parentContext = useContext(ListContext);\n const contextValue = useMemo(\n () => ({\n interactive: interactive !== undefined ? !!interactive : parentContext.interactive,\n }),\n [interactive, parentContext.interactive],\n );\n\n return (\n <ListContext.Provider value={contextValue}>\n <StyledUl role=\"list\" ref={forwardedRef} {...props} />\n </ListContext.Provider>\n );\n },\n);\n\nexport interface OrderedListProps\n extends ComponentProps<typeof StyledOl>,\n VariantProps<typeof StyledOl> {\n interactive?: boolean;\n}\n\nexport const Ol = React.forwardRef<React.ElementRef<typeof StyledOl>, OrderedListProps>(\n ({ interactive, ...props }, forwardedRef) => {\n const parentContext = useContext(ListContext);\n const contextValue = useMemo(\n () => ({\n interactive: interactive !== undefined ? !!interactive : parentContext.interactive,\n }),\n [interactive, parentContext.interactive],\n );\n\n return (\n <ListContext.Provider value={contextValue}>\n <StyledOl role=\"list\" ref={forwardedRef} {...props} />\n </ListContext.Provider>\n );\n },\n);\n\nconst ControlsWrapper = styled('div', {\n position: 'absolute',\n top: 0,\n right: '$2',\n zIndex: 1,\n height: '100%',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n overflow: 'visible',\n});\n\nexport interface ListItemProps\n extends ComponentProps<typeof StyledLi>,\n VariantProps<typeof StyledLi>,\n VariantProps<typeof Flex> {\n controls?: ReactNode;\n}\nexport const Li = React.forwardRef<React.ElementRef<typeof StyledLi>, ListItemProps>(\n ({ children, controls, align, justify, direction, gap, wrap, ...props }, forwardedRef) => {\n const { interactive } = useContext(ListContext);\n\n const childArray = React.Children.toArray(children);\n const nestedLists = childArray.filter(\n (child) => React.isValidElement(child) && (child.type === Ul || child.type === Ol),\n );\n const inlineChildren = childArray.filter(\n (child) => !(React.isValidElement(child) && (child.type === Ul || child.type === Ol)),\n );\n\n return (\n <StyledLi {...props} ref={forwardedRef}>\n {interactive ? (\n <StyledListItemButton\n align={align}\n justify={justify}\n direction={direction}\n gap={gap}\n wrap={wrap}\n >\n {inlineChildren}\n </StyledListItemButton>\n ) : (\n <StyledSpan\n align={align || 'center'}\n justify={justify}\n direction={direction}\n gap={gap}\n wrap={wrap}\n css={{ flexGrow: 1 }}\n >\n {inlineChildren}\n </StyledSpan>\n )}\n {nestedLists}\n {!!controls && <ControlsWrapper>{controls}</ControlsWrapper>}\n </StyledLi>\n );\n },\n);\n"],"mappings":";;;;;;;;;AAOA,IAAM,2BAA2B;CAC/B,IAAI;CACJ,GAAG;CACH,cAAc;CACd,YAAY;CACZ,UAAU;CACV,oBAAoB;AACtB;AAEA,IAAM,aAAa,wBAAA,OAAO,QAAQ,aAAA,MAAM;CAEtC,GAAG;CAEH,GAAG;CACH,KAAK;AACP,CAAC;AAED,IAAM,uBAAuB,wBAAA,OAAO,UAAU,aAAA,MAAM;CAClD,GAAG,eAAA;CACH,GAAG;CACH,SAAS;CAGT,UAAU;CACV,OAAO;CACP,GAAG;CACH,UAAU;CACV,aAAa;EACX,cAAc;EACd,WAAW;EACX,SAAS;EACT,UAAU;EACV,OAAO;CACT;CACA,YAAY;EACV,cAAc;EACd,WAAW;EACX,SAAS;EACT,UAAU;EACV,OAAO;CACT;CACA,4BAA4B,EAC1B,WAAW,8CACb;CAEA,UAAU,EACR,WAAW;EACT,QAAQ;EACR,aAAa,EACX,iBAAiB,mBACnB;EACA,YAAY;GACV,iBAAiB;GACjB,SAAS;EACX;CACF,EACF;CACA,YAAY;EACV,aAAa,EACX,iBAAiB,oBACnB;EACA,YAAY;GACV,iBAAiB;GACjB,SAAS;EACX;CACF;AACF,CAAC;AAED,IAAM,WAAW,wBAAA,OAAO,MAAM;CAC5B,GAAG;CACH,SAAS;CACT,UAAU;CACV,kBAAkB,EAChB,WAAW,OACb;CACA,UAAU,EACR,WAAW,kBAAA,kBACb;CACA,iBAAiB,EACf,WAAW,IACb;AACF,CAAC;AAED,IAAM,WAAW,wBAAA,OAAO,MAAM;CAC5B,GAAG;CACH,GAAG;CACH,OAAO;CAEP,iDAA+C;EAC7C,GAAG;EACH,WAAW;EACX,QAAQ;GACN,YAAY;GACZ,UAAU,EACR,OAAO,EACL,QAAQ,YACV,EACF;EACF;CACF;CAEA,sDAAoD;EAClD,YAAY;EACZ,QAAQ,EACN,YAAY,KACd;CACF;AACF,CAAC;AAED,IAAM,WAAW,wBAAA,OAAO,MAAM;CAC5B,GAAG;CACH,GAAG;CACH,OAAO;CAEP,gBAAgB;EACd,UAAU;EACV,YAAY;CACd;AACF,CAAC;AAED,IAAM,eAAA,GAAA,MAAA,cAAA,CAA4B,EAChC,aAAa,MACf,CAAC;AAKD,IAAa,KAAK,MAAA,QAAM,YACrB,EAAE,aAAa,GAAG,SAAS,iBAAiB;CAC3C,MAAM,iBAAA,GAAA,MAAA,WAAA,CAA2B,WAAW;CAC5C,MAAM,gBAAA,GAAA,MAAA,QAAA,QACG,EACL,aAAa,gBAAgB,KAAA,IAAY,CAAC,CAAC,cAAc,cAAc,YACzE,IACA,CAAC,aAAa,cAAc,WAAW,CACzC;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,YAAY,UAAb;EAAsB,OAAO;YAC3B,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;GAAU,MAAK;GAAO,KAAK;GAAc,GAAI;EAAQ,CAAA;CACjC,CAAA;AAE1B,CACF;AAQA,IAAa,KAAK,MAAA,QAAM,YACrB,EAAE,aAAa,GAAG,SAAS,iBAAiB;CAC3C,MAAM,iBAAA,GAAA,MAAA,WAAA,CAA2B,WAAW;CAC5C,MAAM,gBAAA,GAAA,MAAA,QAAA,QACG,EACL,aAAa,gBAAgB,KAAA,IAAY,CAAC,CAAC,cAAc,cAAc,YACzE,IACA,CAAC,aAAa,cAAc,WAAW,CACzC;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,YAAY,UAAb;EAAsB,OAAO;YAC3B,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;GAAU,MAAK;GAAO,KAAK;GAAc,GAAI;EAAQ,CAAA;CACjC,CAAA;AAE1B,CACF;AAEA,IAAM,kBAAkB,wBAAA,OAAO,OAAO;CACpC,UAAU;CACV,KAAK;CACL,OAAO;CACP,QAAQ;CACR,QAAQ;CACR,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,UAAU;AACZ,CAAC;AAQD,IAAa,KAAK,MAAA,QAAM,YACrB,EAAE,UAAU,UAAU,OAAO,SAAS,WAAW,KAAK,MAAM,GAAG,SAAS,iBAAiB;CACxF,MAAM,EAAE,iBAAA,GAAA,MAAA,WAAA,CAA2B,WAAW;CAE9C,MAAM,aAAa,MAAA,QAAM,SAAS,QAAQ,QAAQ;CAClD,MAAM,cAAc,WAAW,QAC5B,UAAU,MAAA,QAAM,eAAe,KAAK,MAAM,MAAM,SAAS,MAAM,MAAM,SAAS,GACjF;CACA,MAAM,iBAAiB,WAAW,QAC/B,UAAU,EAAE,MAAA,QAAM,eAAe,KAAK,MAAM,MAAM,SAAS,MAAM,MAAM,SAAS,IACnF;CAEA,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,UAAD;EAAU,GAAI;EAAO,KAAK;YAA1B;GACG,cACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,sBAAD;IACS;IACE;IACE;IACN;IACC;cAEL;GACmB,CAAA,IAEtB,iBAAA,GAAA,kBAAA,IAAA,CAAC,YAAD;IACE,OAAO,SAAS;IACP;IACE;IACN;IACC;IACN,KAAK,EAAE,UAAU,EAAE;cAElB;GACS,CAAA;GAEb;GACA,CAAC,CAAC,YAAY,iBAAA,GAAA,kBAAA,IAAA,CAAC,iBAAD,EAAA,UAAkB,SAA0B,CAAA;EACnD;;AAEd,CACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"List.themes.cjs","names":[],"sources":["../../../components/List/List.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n export type Colors = {\n listItemHoverBg: Property.Color;\n listItemActiveBg: Property.Color;\n listItemFocusBorder: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = (primaryColor) => ({\n listItemHoverBg: '$whiteA9',\n listItemActiveBg: '$whiteA8',\n listItemFocusBorder: primaryColor.helpers.pickScale(8),\n });\n\n export const getDark: Factory = (primaryColor) => ({\n listItemHoverBg: '$whiteA4',\n listItemActiveBg: '$whiteA3',\n listItemFocusBorder: primaryColor.helpers.pickScale(11),\n });\n}\n"],"mappings":";AAIO,IAAA;;CASQ,OAAA,YAAqB,kBAAkB;EAClD,iBAAiB;EACjB,kBAAkB;EAClB,qBAAqB,aAAa,QAAQ,UAAU,CAAC;CACvD;CAEa,OAAA,WAAoB,kBAAkB;EACjD,iBAAiB;EACjB,kBAAkB;EAClB,qBAAqB,aAAa,QAAQ,UAAU,EAAE;CACxD;
|
|
1
|
+
{"version":3,"file":"List.themes.cjs","names":[],"sources":["../../../components/List/List.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n export type Colors = {\n listItemHoverBg: Property.Color;\n listItemActiveBg: Property.Color;\n listItemFocusBorder: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = (primaryColor) => ({\n listItemHoverBg: '$whiteA9',\n listItemActiveBg: '$whiteA8',\n listItemFocusBorder: primaryColor.helpers.pickScale(8),\n });\n\n export const getDark: Factory = (primaryColor) => ({\n listItemHoverBg: '$whiteA4',\n listItemActiveBg: '$whiteA3',\n listItemFocusBorder: primaryColor.helpers.pickScale(11),\n });\n}\n"],"mappings":";AAIO,IAAA;;CASQ,OAAA,YAAqB,kBAAkB;EAClD,iBAAiB;EACjB,kBAAkB;EAClB,qBAAqB,aAAa,QAAQ,UAAU,CAAC;CACvD;CAEa,OAAA,WAAoB,kBAAkB;EACjD,iBAAiB;EACjB,kBAAkB;EAClB,qBAAqB,aAAa,QAAQ,UAAU,EAAE;CACxD;GACD,UAAA,QAAA,CAAA,EAAD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"List.themes.js","names":[],"sources":["../../../components/List/List.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n export type Colors = {\n listItemHoverBg: Property.Color;\n listItemActiveBg: Property.Color;\n listItemFocusBorder: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = (primaryColor) => ({\n listItemHoverBg: '$whiteA9',\n listItemActiveBg: '$whiteA8',\n listItemFocusBorder: primaryColor.helpers.pickScale(8),\n });\n\n export const getDark: Factory = (primaryColor) => ({\n listItemHoverBg: '$whiteA4',\n listItemActiveBg: '$whiteA3',\n listItemFocusBorder: primaryColor.helpers.pickScale(11),\n });\n}\n"],"mappings":";AAIO,IAAA;;CASQ,OAAA,YAAqB,kBAAkB;EAClD,iBAAiB;EACjB,kBAAkB;EAClB,qBAAqB,aAAa,QAAQ,UAAU,CAAC;CACvD;CAEa,OAAA,WAAoB,kBAAkB;EACjD,iBAAiB;EACjB,kBAAkB;EAClB,qBAAqB,aAAa,QAAQ,UAAU,EAAE;CACxD;
|
|
1
|
+
{"version":3,"file":"List.themes.js","names":[],"sources":["../../../components/List/List.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n export type Colors = {\n listItemHoverBg: Property.Color;\n listItemActiveBg: Property.Color;\n listItemFocusBorder: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = (primaryColor) => ({\n listItemHoverBg: '$whiteA9',\n listItemActiveBg: '$whiteA8',\n listItemFocusBorder: primaryColor.helpers.pickScale(8),\n });\n\n export const getDark: Factory = (primaryColor) => ({\n listItemHoverBg: '$whiteA4',\n listItemActiveBg: '$whiteA3',\n listItemFocusBorder: primaryColor.helpers.pickScale(11),\n });\n}\n"],"mappings":";AAIO,IAAA;;CASQ,OAAA,YAAqB,kBAAkB;EAClD,iBAAiB;EACjB,kBAAkB;EAClB,qBAAqB,aAAa,QAAQ,UAAU,CAAC;CACvD;CAEa,OAAA,WAAoB,kBAAkB;EACjD,iBAAiB;EACjB,kBAAkB;EAClB,qBAAqB,aAAa,QAAQ,UAAU,EAAE;CACxD;GACD,UAAA,QAAA,CAAA,EAAD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Navigation.cjs","names":[],"sources":["../../../components/Navigation/Navigation.tsx"],"sourcesContent":["import React, { ReactNode, useMemo } from 'react';\n\nimport { CSS, css, styled, VariantProps } from '../../stitches.config';\nimport { elevationVariants } from '../Elevation';\nimport { Flex } from '../Flex';\n\nconst FlexWithOpacity = styled(Flex, {\n opacity: 0.74,\n\n variants: {\n active: {\n true: {\n opacity: 1,\n },\n },\n },\n});\n\nconst baseNavItemCss = css({\n position: 'relative',\n display: 'flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n backgroundColor: '$navButtonBg',\n color: '$navButtonText',\n border: 'none',\n minHeight: '$7',\n width: '100%',\n px: '$3',\n py: '$2',\n borderRadius: '$3',\n cursor: 'pointer',\n fontFamily: '$rubik',\n fontWeight: '$medium',\n outline: 'none',\n fontSize: '$3',\n mt: '$2',\n\n '&::before': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n borderRadius: '$3',\n },\n '&::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n borderRadius: '$3',\n },\n\n [`&:focus > ${FlexWithOpacity}, &:hover > ${FlexWithOpacity}`]: {\n opacity: 1,\n },\n\n '&:focus': {\n color: '$navButtonFocusText',\n boxShadow: 'inset 0 0 0 2px $colors$navButtonFocusBorder',\n\n '&::before': {\n backgroundColor: '$navButtonFocusBg',\n },\n '&::after': {\n backgroundColor: '$navButtonFocusBg2',\n opacity: 0.05,\n },\n },\n\n '@hover': {\n '&:hover': {\n color: '$navButtonHoverText',\n\n '&::before': {\n backgroundColor: '$navButtonHoverBg',\n },\n '&::after': {\n backgroundColor: '$navButtonHoverBg2',\n opacity: 0.05,\n },\n },\n },\n\n '&:first-child': {\n mt: 0,\n },\n\n variants: {\n active: {\n true: {\n color: '$navButtonActiveText',\n\n '&::before': {\n backgroundColor: '$navButtonActiveBg',\n },\n '&::after': {\n backgroundColor: '$navButtonActiveBg2',\n opacity: 0.05,\n },\n\n '@hover': {\n '&:hover': {\n color: '$navButtonActiveText',\n },\n },\n\n '&:focus': {\n color: '$navButtonActiveText',\n },\n },\n },\n },\n defaultVariants: {\n active: false,\n },\n});\n\nexport const NavigationContainer = styled('div', {\n display: 'flex',\n boxSizing: 'border-box',\n flexDirection: 'column',\n});\n\nexport type NavigationContainerVariants = VariantProps<typeof NavigationContainer>;\nexport type NavigationContainerProps = NavigationContainerVariants & NonNullable<unknown>;\n\nexport const NavigationDrawer = styled('nav', {\n display: 'flex',\n boxSizing: 'border-box',\n padding: '$3',\n maxWidth: '240px',\n flexDirection: 'column',\n variants: {\n elevation: elevationVariants,\n fullWidth: {\n true: {\n px: 0,\n '> *, > div > *,': {\n borderRadius: 0,\n\n '&::before': {\n borderRadius: 0,\n },\n\n '&::after': {\n borderRadius: 0,\n },\n\n '&:focus': {\n border: 'none',\n boxShadow: 'none',\n },\n },\n },\n },\n },\n defaultVariants: {\n elevation: 1,\n fullWidth: false,\n },\n});\n\nexport type NavigationDrawerVariants = VariantProps<typeof NavigationDrawer>;\nexport type NavigationDrawerProps = NavigationDrawerVariants & NonNullable<unknown>;\n\nconst StyledLink = styled('a', baseNavItemCss, {\n textDecoration: 'none',\n});\n\ntype StyledLinkProps = VariantProps<typeof StyledLink> & React.ComponentProps<typeof StyledLink>;\n\nconst StyledButton = styled('button', baseNavItemCss);\n\ntype StyledButtonProps = VariantProps<typeof StyledButton> &\n React.ComponentProps<typeof StyledButton>;\ninterface NavigationItemBaseProps {\n css?: CSS;\n startAdornment?: ReactNode;\n endAdornment?: ReactNode;\n children?: ReactNode;\n active?: boolean;\n}\n\ntype NavigationItemButtonProps = NavigationItemBaseProps &\n StyledButtonProps & {\n as?: 'button';\n };\ntype NavigationItemLinkProps = NavigationItemBaseProps &\n StyledLinkProps &\n React.AnchorHTMLAttributes<HTMLAnchorElement> & {\n as: 'a';\n };\n\nexport type NavigationItemProps = NavigationItemButtonProps | NavigationItemLinkProps;\n\nconst NavigationItemWrapper = (props: NavigationItemProps): JSX.Element =>\n props.as === 'a' ? <StyledLink {...props} /> : <StyledButton type=\"button\" {...props} />;\n\nexport const NavigationItem = ({\n startAdornment,\n endAdornment,\n children,\n ...restProps\n}: NavigationItemProps): JSX.Element => {\n const hasStartAdornment = useMemo(() => Boolean(startAdornment), [startAdornment]);\n const hasEndAdornment = useMemo(() => Boolean(endAdornment), [endAdornment]);\n\n return (\n <NavigationItemWrapper {...restProps}>\n {hasStartAdornment && (\n <FlexWithOpacity css={{ pr: '$2', ml: '-$1' }} active={restProps.active}>\n {startAdornment}\n </FlexWithOpacity>\n )}\n <FlexWithOpacity css={{ flexGrow: 1 }} active={restProps.active}>\n {children}\n </FlexWithOpacity>\n {hasEndAdornment && <Flex css={{ pl: '$2', mr: '-$1' }}>{endAdornment}</Flex>}\n </NavigationItemWrapper>\n );\n};\n\nexport type NavigationItemVariants = VariantProps<typeof NavigationItem>;\n\nexport const NavigationLink = (props: Omit<NavigationItemLinkProps, 'as'>) => (\n <NavigationItem as=\"a\" {...props} />\n);\n\nexport type NavigationLinkVariants = VariantProps<typeof NavigationLink>;\n\nexport type NavigationLinkProps = NavigationLinkVariants & NonNullable<unknown>;\n"],"mappings":";;;;;;;;AAMA,IAAM,kBAAkB,wBAAA,OAAO,aAAA,MAAM;CACnC,SAAS;CAET,UAAU,EACR,QAAQ,EACN,MAAM,EACJ,SAAS,EACX,EACF,EACF;AACF,CAAC;AAED,IAAM,iBAAiB,wBAAA,IAAI;CACzB,UAAU;CACV,SAAS;CACT,WAAW;CACX,YAAY;CACZ,iBAAiB;CACjB,OAAO;CACP,QAAQ;CACR,WAAW;CACX,OAAO;CACP,IAAI;CACJ,IAAI;CACJ,cAAc;CACd,QAAQ;CACR,YAAY;CACZ,YAAY;CACZ,SAAS;CACT,UAAU;CACV,IAAI;CAEJ,aAAa;EACX,WAAW;EACX,SAAS;EACT,UAAU;EACV,KAAK;EACL,OAAO;EACP,QAAQ;EACR,MAAM;EACN,cAAc;CAChB;CACA,YAAY;EACV,WAAW;EACX,SAAS;EACT,UAAU;EACV,KAAK;EACL,OAAO;EACP,QAAQ;EACR,MAAM;EACN,cAAc;CAChB;EAEC,aAAa,gBAAgB,cAAc,oBAAoB,EAC9D,SAAS,EACX;CAEA,WAAW;EACT,OAAO;EACP,WAAW;EAEX,aAAa,EACX,iBAAiB,oBACnB;EACA,YAAY;GACV,iBAAiB;GACjB,SAAS;EACX;CACF;CAEA,UAAU,EACR,WAAW;EACT,OAAO;EAEP,aAAa,EACX,iBAAiB,oBACnB;EACA,YAAY;GACV,iBAAiB;GACjB,SAAS;EACX;CACF,EACF;CAEA,iBAAiB,EACf,IAAI,EACN;CAEA,UAAU,EACR,QAAQ,EACN,MAAM;EACJ,OAAO;EAEP,aAAa,EACX,iBAAiB,qBACnB;EACA,YAAY;GACV,iBAAiB;GACjB,SAAS;EACX;EAEA,UAAU,EACR,WAAW,EACT,OAAO,uBACT,EACF;EAEA,WAAW,EACT,OAAO,uBACT;CACF,EACF,EACF;CACA,iBAAiB,EACf,QAAQ,MACV;AACF,CAAC;AAED,IAAa,sBAAsB,wBAAA,OAAO,OAAO;CAC/C,SAAS;CACT,WAAW;CACX,eAAe;AACjB,CAAC;AAKD,IAAa,mBAAmB,wBAAA,OAAO,OAAO;CAC5C,SAAS;CACT,WAAW;CACX,SAAS;CACT,UAAU;CACV,eAAe;CACf,UAAU;EACR,WAAW,kBAAA;EACX,WAAW,EACT,MAAM;GACJ,IAAI;GACJ,mBAAmB;IACjB,cAAc;IAEd,aAAa,EACX,cAAc,EAChB;IAEA,YAAY,EACV,cAAc,EAChB;IAEA,WAAW;KACT,QAAQ;KACR,WAAW;IACb;GACF;EACF,EACF;CACF;CACA,iBAAiB;EACf,WAAW;EACX,WAAW;CACb;AACF,CAAC;AAKD,IAAM,aAAa,wBAAA,OAAO,KAAK,gBAAgB,EAC7C,gBAAgB,OAClB,CAAC;AAID,IAAM,eAAe,wBAAA,OAAO,UAAU,cAAc;AAwBpD,IAAM,yBAAyB,UAC7B,MAAM,OAAO,MAAM,iBAAA,GAAA,kBAAA,
|
|
1
|
+
{"version":3,"file":"Navigation.cjs","names":[],"sources":["../../../components/Navigation/Navigation.tsx"],"sourcesContent":["import React, { ReactNode, useMemo } from 'react';\n\nimport { CSS, css, styled, VariantProps } from '../../stitches.config';\nimport { elevationVariants } from '../Elevation';\nimport { Flex } from '../Flex';\n\nconst FlexWithOpacity = styled(Flex, {\n opacity: 0.74,\n\n variants: {\n active: {\n true: {\n opacity: 1,\n },\n },\n },\n});\n\nconst baseNavItemCss = css({\n position: 'relative',\n display: 'flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n backgroundColor: '$navButtonBg',\n color: '$navButtonText',\n border: 'none',\n minHeight: '$7',\n width: '100%',\n px: '$3',\n py: '$2',\n borderRadius: '$3',\n cursor: 'pointer',\n fontFamily: '$rubik',\n fontWeight: '$medium',\n outline: 'none',\n fontSize: '$3',\n mt: '$2',\n\n '&::before': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n borderRadius: '$3',\n },\n '&::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n borderRadius: '$3',\n },\n\n [`&:focus > ${FlexWithOpacity}, &:hover > ${FlexWithOpacity}`]: {\n opacity: 1,\n },\n\n '&:focus': {\n color: '$navButtonFocusText',\n boxShadow: 'inset 0 0 0 2px $colors$navButtonFocusBorder',\n\n '&::before': {\n backgroundColor: '$navButtonFocusBg',\n },\n '&::after': {\n backgroundColor: '$navButtonFocusBg2',\n opacity: 0.05,\n },\n },\n\n '@hover': {\n '&:hover': {\n color: '$navButtonHoverText',\n\n '&::before': {\n backgroundColor: '$navButtonHoverBg',\n },\n '&::after': {\n backgroundColor: '$navButtonHoverBg2',\n opacity: 0.05,\n },\n },\n },\n\n '&:first-child': {\n mt: 0,\n },\n\n variants: {\n active: {\n true: {\n color: '$navButtonActiveText',\n\n '&::before': {\n backgroundColor: '$navButtonActiveBg',\n },\n '&::after': {\n backgroundColor: '$navButtonActiveBg2',\n opacity: 0.05,\n },\n\n '@hover': {\n '&:hover': {\n color: '$navButtonActiveText',\n },\n },\n\n '&:focus': {\n color: '$navButtonActiveText',\n },\n },\n },\n },\n defaultVariants: {\n active: false,\n },\n});\n\nexport const NavigationContainer = styled('div', {\n display: 'flex',\n boxSizing: 'border-box',\n flexDirection: 'column',\n});\n\nexport type NavigationContainerVariants = VariantProps<typeof NavigationContainer>;\nexport type NavigationContainerProps = NavigationContainerVariants & NonNullable<unknown>;\n\nexport const NavigationDrawer = styled('nav', {\n display: 'flex',\n boxSizing: 'border-box',\n padding: '$3',\n maxWidth: '240px',\n flexDirection: 'column',\n variants: {\n elevation: elevationVariants,\n fullWidth: {\n true: {\n px: 0,\n '> *, > div > *,': {\n borderRadius: 0,\n\n '&::before': {\n borderRadius: 0,\n },\n\n '&::after': {\n borderRadius: 0,\n },\n\n '&:focus': {\n border: 'none',\n boxShadow: 'none',\n },\n },\n },\n },\n },\n defaultVariants: {\n elevation: 1,\n fullWidth: false,\n },\n});\n\nexport type NavigationDrawerVariants = VariantProps<typeof NavigationDrawer>;\nexport type NavigationDrawerProps = NavigationDrawerVariants & NonNullable<unknown>;\n\nconst StyledLink = styled('a', baseNavItemCss, {\n textDecoration: 'none',\n});\n\ntype StyledLinkProps = VariantProps<typeof StyledLink> & React.ComponentProps<typeof StyledLink>;\n\nconst StyledButton = styled('button', baseNavItemCss);\n\ntype StyledButtonProps = VariantProps<typeof StyledButton> &\n React.ComponentProps<typeof StyledButton>;\ninterface NavigationItemBaseProps {\n css?: CSS;\n startAdornment?: ReactNode;\n endAdornment?: ReactNode;\n children?: ReactNode;\n active?: boolean;\n}\n\ntype NavigationItemButtonProps = NavigationItemBaseProps &\n StyledButtonProps & {\n as?: 'button';\n };\ntype NavigationItemLinkProps = NavigationItemBaseProps &\n StyledLinkProps &\n React.AnchorHTMLAttributes<HTMLAnchorElement> & {\n as: 'a';\n };\n\nexport type NavigationItemProps = NavigationItemButtonProps | NavigationItemLinkProps;\n\nconst NavigationItemWrapper = (props: NavigationItemProps): JSX.Element =>\n props.as === 'a' ? <StyledLink {...props} /> : <StyledButton type=\"button\" {...props} />;\n\nexport const NavigationItem = ({\n startAdornment,\n endAdornment,\n children,\n ...restProps\n}: NavigationItemProps): JSX.Element => {\n const hasStartAdornment = useMemo(() => Boolean(startAdornment), [startAdornment]);\n const hasEndAdornment = useMemo(() => Boolean(endAdornment), [endAdornment]);\n\n return (\n <NavigationItemWrapper {...restProps}>\n {hasStartAdornment && (\n <FlexWithOpacity css={{ pr: '$2', ml: '-$1' }} active={restProps.active}>\n {startAdornment}\n </FlexWithOpacity>\n )}\n <FlexWithOpacity css={{ flexGrow: 1 }} active={restProps.active}>\n {children}\n </FlexWithOpacity>\n {hasEndAdornment && <Flex css={{ pl: '$2', mr: '-$1' }}>{endAdornment}</Flex>}\n </NavigationItemWrapper>\n );\n};\n\nexport type NavigationItemVariants = VariantProps<typeof NavigationItem>;\n\nexport const NavigationLink = (props: Omit<NavigationItemLinkProps, 'as'>) => (\n <NavigationItem as=\"a\" {...props} />\n);\n\nexport type NavigationLinkVariants = VariantProps<typeof NavigationLink>;\n\nexport type NavigationLinkProps = NavigationLinkVariants & NonNullable<unknown>;\n"],"mappings":";;;;;;;;AAMA,IAAM,kBAAkB,wBAAA,OAAO,aAAA,MAAM;CACnC,SAAS;CAET,UAAU,EACR,QAAQ,EACN,MAAM,EACJ,SAAS,EACX,EACF,EACF;AACF,CAAC;AAED,IAAM,iBAAiB,wBAAA,IAAI;CACzB,UAAU;CACV,SAAS;CACT,WAAW;CACX,YAAY;CACZ,iBAAiB;CACjB,OAAO;CACP,QAAQ;CACR,WAAW;CACX,OAAO;CACP,IAAI;CACJ,IAAI;CACJ,cAAc;CACd,QAAQ;CACR,YAAY;CACZ,YAAY;CACZ,SAAS;CACT,UAAU;CACV,IAAI;CAEJ,aAAa;EACX,WAAW;EACX,SAAS;EACT,UAAU;EACV,KAAK;EACL,OAAO;EACP,QAAQ;EACR,MAAM;EACN,cAAc;CAChB;CACA,YAAY;EACV,WAAW;EACX,SAAS;EACT,UAAU;EACV,KAAK;EACL,OAAO;EACP,QAAQ;EACR,MAAM;EACN,cAAc;CAChB;EAEC,aAAa,gBAAgB,cAAc,oBAAoB,EAC9D,SAAS,EACX;CAEA,WAAW;EACT,OAAO;EACP,WAAW;EAEX,aAAa,EACX,iBAAiB,oBACnB;EACA,YAAY;GACV,iBAAiB;GACjB,SAAS;EACX;CACF;CAEA,UAAU,EACR,WAAW;EACT,OAAO;EAEP,aAAa,EACX,iBAAiB,oBACnB;EACA,YAAY;GACV,iBAAiB;GACjB,SAAS;EACX;CACF,EACF;CAEA,iBAAiB,EACf,IAAI,EACN;CAEA,UAAU,EACR,QAAQ,EACN,MAAM;EACJ,OAAO;EAEP,aAAa,EACX,iBAAiB,qBACnB;EACA,YAAY;GACV,iBAAiB;GACjB,SAAS;EACX;EAEA,UAAU,EACR,WAAW,EACT,OAAO,uBACT,EACF;EAEA,WAAW,EACT,OAAO,uBACT;CACF,EACF,EACF;CACA,iBAAiB,EACf,QAAQ,MACV;AACF,CAAC;AAED,IAAa,sBAAsB,wBAAA,OAAO,OAAO;CAC/C,SAAS;CACT,WAAW;CACX,eAAe;AACjB,CAAC;AAKD,IAAa,mBAAmB,wBAAA,OAAO,OAAO;CAC5C,SAAS;CACT,WAAW;CACX,SAAS;CACT,UAAU;CACV,eAAe;CACf,UAAU;EACR,WAAW,kBAAA;EACX,WAAW,EACT,MAAM;GACJ,IAAI;GACJ,mBAAmB;IACjB,cAAc;IAEd,aAAa,EACX,cAAc,EAChB;IAEA,YAAY,EACV,cAAc,EAChB;IAEA,WAAW;KACT,QAAQ;KACR,WAAW;IACb;GACF;EACF,EACF;CACF;CACA,iBAAiB;EACf,WAAW;EACX,WAAW;CACb;AACF,CAAC;AAKD,IAAM,aAAa,wBAAA,OAAO,KAAK,gBAAgB,EAC7C,gBAAgB,OAClB,CAAC;AAID,IAAM,eAAe,wBAAA,OAAO,UAAU,cAAc;AAwBpD,IAAM,yBAAyB,UAC7B,MAAM,OAAO,MAAM,iBAAA,GAAA,kBAAA,IAAA,CAAC,YAAD,EAAY,GAAI,MAAQ,CAAA,IAAI,iBAAA,GAAA,kBAAA,IAAA,CAAC,cAAD;CAAc,MAAK;CAAS,GAAI;AAAQ,CAAA;AAEzF,IAAa,kBAAkB,EAC7B,gBACA,cACA,UACA,GAAG,gBACmC;CACtC,MAAM,qBAAA,GAAA,MAAA,QAAA,OAAkC,QAAQ,cAAc,GAAG,CAAC,cAAc,CAAC;CACjF,MAAM,mBAAA,GAAA,MAAA,QAAA,OAAgC,QAAQ,YAAY,GAAG,CAAC,YAAY,CAAC;CAE3E,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,uBAAD;EAAuB,GAAI;YAA3B;GACG,qBACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,iBAAD;IAAiB,KAAK;KAAE,IAAI;KAAM,IAAI;IAAM;IAAG,QAAQ,UAAU;cAC9D;GACc,CAAA;GAEnB,iBAAA,GAAA,kBAAA,IAAA,CAAC,iBAAD;IAAiB,KAAK,EAAE,UAAU,EAAE;IAAG,QAAQ,UAAU;IACtD;GACc,CAAA;GAChB,mBAAmB,iBAAA,GAAA,kBAAA,IAAA,CAAC,aAAA,MAAD;IAAM,KAAK;KAAE,IAAI;KAAM,IAAI;IAAM;cAAI;GAAmB,CAAA;EACvD;;AAE3B;AAIA,IAAa,kBAAkB,UAC7B,iBAAA,GAAA,kBAAA,IAAA,CAAC,gBAAD;CAAgB,IAAG;CAAI,GAAI;AAAQ,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Navigation.themes.cjs","names":[],"sources":["../../../components/Navigation/Navigation.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\nexport namespace Theme {\n type Colors = {\n navButtonBg: Property.Color;\n navButtonHoverBg: Property.Color;\n navButtonHoverBg2: Property.Color;\n navButtonFocusBg: Property.Color;\n navButtonFocusBg2: Property.Color;\n navButtonFocusBorder: Property.Color;\n navButtonText: Property.Color;\n navButtonHoverText: Property.Color;\n navButtonActiveText: Property.Color;\n navButtonFocusText: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = (primaryColor) => ({\n navButtonBg: 'transparent',\n navButtonHoverBg: tinycolor('black').setAlpha(0.04).toHslString(),\n navButtonHoverBg2: 'transparent',\n navButtonFocusBg: tinycolor('white').setAlpha(0.15).toHslString(),\n navButtonFocusBg2: '$primary',\n navButtonFocusBorder: primaryColor.helpers.pickScale(8),\n navButtonActiveBg: tinycolor('black').setAlpha(0.04).toHslString(),\n navButtonActiveBg2: 'transparent',\n navButtonText: tinycolor('black').setAlpha(0.54).toHslString(),\n navButtonHoverText: 'black',\n navButtonFocusText: 'black',\n navButtonActiveText: '$primary',\n });\n\n export const getDark: Factory = (primaryColor) => ({\n navButtonBg: 'transparent',\n navButtonHoverBg: tinycolor('white').setAlpha(0.05).toHslString(),\n navButtonHoverBg2: '$primary',\n navButtonFocusBg: tinycolor('white').setAlpha(0.15).toHslString(),\n navButtonFocusBg2: '$primary',\n navButtonFocusBorder: primaryColor.helpers.pickScale(11),\n navButtonActiveBg: tinycolor('white').setAlpha(0.05).toHslString(),\n navButtonActiveBg2: '$primary',\n navButtonText: 'white',\n navButtonHoverText: 'white',\n navButtonFocusText: 'white',\n navButtonActiveText: '$primary',\n });\n}\n"],"mappings":";;;;AAIO,IAAA;;CAgBQ,OAAA,YAAqB,kBAAkB;EAClD,aAAa;EACb,mBAAA,GAAA,WAAA,
|
|
1
|
+
{"version":3,"file":"Navigation.themes.cjs","names":[],"sources":["../../../components/Navigation/Navigation.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\nexport namespace Theme {\n type Colors = {\n navButtonBg: Property.Color;\n navButtonHoverBg: Property.Color;\n navButtonHoverBg2: Property.Color;\n navButtonFocusBg: Property.Color;\n navButtonFocusBg2: Property.Color;\n navButtonFocusBorder: Property.Color;\n navButtonText: Property.Color;\n navButtonHoverText: Property.Color;\n navButtonActiveText: Property.Color;\n navButtonFocusText: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = (primaryColor) => ({\n navButtonBg: 'transparent',\n navButtonHoverBg: tinycolor('black').setAlpha(0.04).toHslString(),\n navButtonHoverBg2: 'transparent',\n navButtonFocusBg: tinycolor('white').setAlpha(0.15).toHslString(),\n navButtonFocusBg2: '$primary',\n navButtonFocusBorder: primaryColor.helpers.pickScale(8),\n navButtonActiveBg: tinycolor('black').setAlpha(0.04).toHslString(),\n navButtonActiveBg2: 'transparent',\n navButtonText: tinycolor('black').setAlpha(0.54).toHslString(),\n navButtonHoverText: 'black',\n navButtonFocusText: 'black',\n navButtonActiveText: '$primary',\n });\n\n export const getDark: Factory = (primaryColor) => ({\n navButtonBg: 'transparent',\n navButtonHoverBg: tinycolor('white').setAlpha(0.05).toHslString(),\n navButtonHoverBg2: '$primary',\n navButtonFocusBg: tinycolor('white').setAlpha(0.15).toHslString(),\n navButtonFocusBg2: '$primary',\n navButtonFocusBorder: primaryColor.helpers.pickScale(11),\n navButtonActiveBg: tinycolor('white').setAlpha(0.05).toHslString(),\n navButtonActiveBg2: '$primary',\n navButtonText: 'white',\n navButtonHoverText: 'white',\n navButtonFocusText: 'white',\n navButtonActiveText: '$primary',\n });\n}\n"],"mappings":";;;;AAIO,IAAA;;CAgBQ,OAAA,YAAqB,kBAAkB;EAClD,aAAa;EACb,mBAAA,GAAA,WAAA,QAAA,CAA4B,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAChE,mBAAmB;EACnB,mBAAA,GAAA,WAAA,QAAA,CAA4B,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAChE,mBAAmB;EACnB,sBAAsB,aAAa,QAAQ,UAAU,CAAC;EACtD,oBAAA,GAAA,WAAA,QAAA,CAA6B,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EACjE,oBAAoB;EACpB,gBAAA,GAAA,WAAA,QAAA,CAAyB,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAC7D,oBAAoB;EACpB,oBAAoB;EACpB,qBAAqB;CACvB;CAEa,OAAA,WAAoB,kBAAkB;EACjD,aAAa;EACb,mBAAA,GAAA,WAAA,QAAA,CAA4B,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAChE,mBAAmB;EACnB,mBAAA,GAAA,WAAA,QAAA,CAA4B,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAChE,mBAAmB;EACnB,sBAAsB,aAAa,QAAQ,UAAU,EAAE;EACvD,oBAAA,GAAA,WAAA,QAAA,CAA6B,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EACjE,oBAAoB;EACpB,eAAe;EACf,oBAAoB;EACpB,oBAAoB;EACpB,qBAAqB;CACvB;GACD,UAAA,QAAA,CAAA,EAAD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Navigation.themes.js","names":[],"sources":["../../../components/Navigation/Navigation.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\nexport namespace Theme {\n type Colors = {\n navButtonBg: Property.Color;\n navButtonHoverBg: Property.Color;\n navButtonHoverBg2: Property.Color;\n navButtonFocusBg: Property.Color;\n navButtonFocusBg2: Property.Color;\n navButtonFocusBorder: Property.Color;\n navButtonText: Property.Color;\n navButtonHoverText: Property.Color;\n navButtonActiveText: Property.Color;\n navButtonFocusText: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = (primaryColor) => ({\n navButtonBg: 'transparent',\n navButtonHoverBg: tinycolor('black').setAlpha(0.04).toHslString(),\n navButtonHoverBg2: 'transparent',\n navButtonFocusBg: tinycolor('white').setAlpha(0.15).toHslString(),\n navButtonFocusBg2: '$primary',\n navButtonFocusBorder: primaryColor.helpers.pickScale(8),\n navButtonActiveBg: tinycolor('black').setAlpha(0.04).toHslString(),\n navButtonActiveBg2: 'transparent',\n navButtonText: tinycolor('black').setAlpha(0.54).toHslString(),\n navButtonHoverText: 'black',\n navButtonFocusText: 'black',\n navButtonActiveText: '$primary',\n });\n\n export const getDark: Factory = (primaryColor) => ({\n navButtonBg: 'transparent',\n navButtonHoverBg: tinycolor('white').setAlpha(0.05).toHslString(),\n navButtonHoverBg2: '$primary',\n navButtonFocusBg: tinycolor('white').setAlpha(0.15).toHslString(),\n navButtonFocusBg2: '$primary',\n navButtonFocusBorder: primaryColor.helpers.pickScale(11),\n navButtonActiveBg: tinycolor('white').setAlpha(0.05).toHslString(),\n navButtonActiveBg2: '$primary',\n navButtonText: 'white',\n navButtonHoverText: 'white',\n navButtonFocusText: 'white',\n navButtonActiveText: '$primary',\n });\n}\n"],"mappings":";;AAIO,IAAA;;CAgBQ,OAAA,YAAqB,kBAAkB;EAClD,aAAa;EACb,kBAAkB,UAAU,OAAO,
|
|
1
|
+
{"version":3,"file":"Navigation.themes.js","names":[],"sources":["../../../components/Navigation/Navigation.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\nexport namespace Theme {\n type Colors = {\n navButtonBg: Property.Color;\n navButtonHoverBg: Property.Color;\n navButtonHoverBg2: Property.Color;\n navButtonFocusBg: Property.Color;\n navButtonFocusBg2: Property.Color;\n navButtonFocusBorder: Property.Color;\n navButtonText: Property.Color;\n navButtonHoverText: Property.Color;\n navButtonActiveText: Property.Color;\n navButtonFocusText: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = (primaryColor) => ({\n navButtonBg: 'transparent',\n navButtonHoverBg: tinycolor('black').setAlpha(0.04).toHslString(),\n navButtonHoverBg2: 'transparent',\n navButtonFocusBg: tinycolor('white').setAlpha(0.15).toHslString(),\n navButtonFocusBg2: '$primary',\n navButtonFocusBorder: primaryColor.helpers.pickScale(8),\n navButtonActiveBg: tinycolor('black').setAlpha(0.04).toHslString(),\n navButtonActiveBg2: 'transparent',\n navButtonText: tinycolor('black').setAlpha(0.54).toHslString(),\n navButtonHoverText: 'black',\n navButtonFocusText: 'black',\n navButtonActiveText: '$primary',\n });\n\n export const getDark: Factory = (primaryColor) => ({\n navButtonBg: 'transparent',\n navButtonHoverBg: tinycolor('white').setAlpha(0.05).toHslString(),\n navButtonHoverBg2: '$primary',\n navButtonFocusBg: tinycolor('white').setAlpha(0.15).toHslString(),\n navButtonFocusBg2: '$primary',\n navButtonFocusBorder: primaryColor.helpers.pickScale(11),\n navButtonActiveBg: tinycolor('white').setAlpha(0.05).toHslString(),\n navButtonActiveBg2: '$primary',\n navButtonText: 'white',\n navButtonHoverText: 'white',\n navButtonFocusText: 'white',\n navButtonActiveText: '$primary',\n });\n}\n"],"mappings":";;AAIO,IAAA;;CAgBQ,OAAA,YAAqB,kBAAkB;EAClD,aAAa;EACb,kBAAkB,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAChE,mBAAmB;EACnB,kBAAkB,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAChE,mBAAmB;EACnB,sBAAsB,aAAa,QAAQ,UAAU,CAAC;EACtD,mBAAmB,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EACjE,oBAAoB;EACpB,eAAe,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAC7D,oBAAoB;EACpB,oBAAoB;EACpB,qBAAqB;CACvB;CAEa,OAAA,WAAoB,kBAAkB;EACjD,aAAa;EACb,kBAAkB,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAChE,mBAAmB;EACnB,kBAAkB,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAChE,mBAAmB;EACnB,sBAAsB,aAAa,QAAQ,UAAU,EAAE;EACvD,mBAAmB,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EACjE,oBAAoB;EACpB,eAAe;EACf,oBAAoB;EACpB,oBAAoB;EACpB,qBAAqB;CACvB;GACD,UAAA,QAAA,CAAA,EAAD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationMenu.cjs","names":[],"sources":["../../../components/NavigationMenu/NavigationMenu.tsx"],"sourcesContent":["import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';\nimport React from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { elevationVariants } from '../Elevation';\nimport { panelStyles } from '../Panel';\n\n// #region Root\n\nconst StyledRoot = styled(NavigationMenuPrimitive.Root, {\n ul: {\n m: 0,\n p: 0,\n listStyleType: 'none',\n li: {\n position: 'relative',\n display: 'inline',\n },\n },\n});\n\nexport type NavigationMenuProps = React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {\n children: React.ReactNode;\n css?: CSS;\n};\n\nexport type NavigationMenuVariants = VariantProps<typeof NavigationMenu>;\n\nexport const NavigationMenu = React.forwardRef<\n React.ElementRef<typeof StyledRoot>,\n NavigationMenuProps\n>(({ children, ...props }, fowardedRef) => (\n <StyledRoot {...props} ref={fowardedRef}>\n {children}\n </StyledRoot>\n));\n\n// #endregion Root\n\n// #region Content\n\nconst StyledContent = styled(NavigationMenuPrimitive.Content, panelStyles, {\n position: 'absolute',\n left: 0,\n zIndex: 1,\n p: '$2',\n color: '$hiContrast',\n '&:focus': {\n outline: 'none',\n },\n variants: {\n elevation: elevationVariants,\n },\n defaultVariants: {\n elevation: 2,\n },\n});\n\ntype NavigationMenuPrimitiveContentProps = Omit<\n React.ComponentProps<typeof NavigationMenuPrimitive.Content>,\n 'as'\n>;\n\nexport type NavigationMenuContentProps = NavigationMenuPrimitiveContentProps &\n VariantProps<typeof StyledContent> & {\n css?: CSS;\n };\n\nexport const NavigationMenuContent = React.forwardRef<\n React.ElementRef<typeof StyledContent>,\n NavigationMenuContentProps\n>(({ children, elevation, ...props }, fowardedRef) => (\n <StyledContent elevation={elevation} {...props} ref={fowardedRef}>\n {children}\n </StyledContent>\n));\n\n// #endregion Content\n\n// #region Trigger\n\nconst StyledTrigger = styled(NavigationMenuPrimitive.Trigger, {\n backgroundColor: 'transparent',\n border: 'none',\n});\n\nexport type NavigationMenuTriggerProps = React.ComponentProps<\n typeof NavigationMenuPrimitive.Trigger\n> &\n VariantProps<typeof StyledContent> & {\n css?: CSS;\n };\n\nexport const NavigationMenuTrigger = ({ children, ...props }: NavigationMenuTriggerProps) => (\n <StyledTrigger {...props}>{children}</StyledTrigger>\n);\n\n// #endregion Trigger\n\nexport const NavigationMenuIndicator = NavigationMenuPrimitive.Indicator;\nexport const NavigationMenuItem = NavigationMenuPrimitive.Item;\nexport const NavigationMenuLink = NavigationMenuPrimitive.Link;\nexport const NavigationMenuList = NavigationMenuPrimitive.List;\nexport const NavigationMenuViewport = NavigationMenuPrimitive.Viewport;\n"],"mappings":";;;;;;;;;;AASA,IAAM,aAAa,wBAAA,OAAO,gCAAwB,MAAM,EACtD,IAAI;CACF,GAAG;CACH,GAAG;CACH,eAAe;CACf,IAAI;EACF,UAAU;EACV,SAAS;CACX;AACF,EACF,CAAC;AASD,IAAa,iBAAiB,MAAA,QAAM,YAGjC,EAAE,UAAU,GAAG,SAAS,gBACzB,iBAAA,GAAA,kBAAA,
|
|
1
|
+
{"version":3,"file":"NavigationMenu.cjs","names":[],"sources":["../../../components/NavigationMenu/NavigationMenu.tsx"],"sourcesContent":["import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';\nimport React from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { elevationVariants } from '../Elevation';\nimport { panelStyles } from '../Panel';\n\n// #region Root\n\nconst StyledRoot = styled(NavigationMenuPrimitive.Root, {\n ul: {\n m: 0,\n p: 0,\n listStyleType: 'none',\n li: {\n position: 'relative',\n display: 'inline',\n },\n },\n});\n\nexport type NavigationMenuProps = React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {\n children: React.ReactNode;\n css?: CSS;\n};\n\nexport type NavigationMenuVariants = VariantProps<typeof NavigationMenu>;\n\nexport const NavigationMenu = React.forwardRef<\n React.ElementRef<typeof StyledRoot>,\n NavigationMenuProps\n>(({ children, ...props }, fowardedRef) => (\n <StyledRoot {...props} ref={fowardedRef}>\n {children}\n </StyledRoot>\n));\n\n// #endregion Root\n\n// #region Content\n\nconst StyledContent = styled(NavigationMenuPrimitive.Content, panelStyles, {\n position: 'absolute',\n left: 0,\n zIndex: 1,\n p: '$2',\n color: '$hiContrast',\n '&:focus': {\n outline: 'none',\n },\n variants: {\n elevation: elevationVariants,\n },\n defaultVariants: {\n elevation: 2,\n },\n});\n\ntype NavigationMenuPrimitiveContentProps = Omit<\n React.ComponentProps<typeof NavigationMenuPrimitive.Content>,\n 'as'\n>;\n\nexport type NavigationMenuContentProps = NavigationMenuPrimitiveContentProps &\n VariantProps<typeof StyledContent> & {\n css?: CSS;\n };\n\nexport const NavigationMenuContent = React.forwardRef<\n React.ElementRef<typeof StyledContent>,\n NavigationMenuContentProps\n>(({ children, elevation, ...props }, fowardedRef) => (\n <StyledContent elevation={elevation} {...props} ref={fowardedRef}>\n {children}\n </StyledContent>\n));\n\n// #endregion Content\n\n// #region Trigger\n\nconst StyledTrigger = styled(NavigationMenuPrimitive.Trigger, {\n backgroundColor: 'transparent',\n border: 'none',\n});\n\nexport type NavigationMenuTriggerProps = React.ComponentProps<\n typeof NavigationMenuPrimitive.Trigger\n> &\n VariantProps<typeof StyledContent> & {\n css?: CSS;\n };\n\nexport const NavigationMenuTrigger = ({ children, ...props }: NavigationMenuTriggerProps) => (\n <StyledTrigger {...props}>{children}</StyledTrigger>\n);\n\n// #endregion Trigger\n\nexport const NavigationMenuIndicator = NavigationMenuPrimitive.Indicator;\nexport const NavigationMenuItem = NavigationMenuPrimitive.Item;\nexport const NavigationMenuLink = NavigationMenuPrimitive.Link;\nexport const NavigationMenuList = NavigationMenuPrimitive.List;\nexport const NavigationMenuViewport = NavigationMenuPrimitive.Viewport;\n"],"mappings":";;;;;;;;;;AASA,IAAM,aAAa,wBAAA,OAAO,gCAAwB,MAAM,EACtD,IAAI;CACF,GAAG;CACH,GAAG;CACH,eAAe;CACf,IAAI;EACF,UAAU;EACV,SAAS;CACX;AACF,EACF,CAAC;AASD,IAAa,iBAAiB,MAAA,QAAM,YAGjC,EAAE,UAAU,GAAG,SAAS,gBACzB,iBAAA,GAAA,kBAAA,IAAA,CAAC,YAAD;CAAY,GAAI;CAAO,KAAK;CACzB;AACS,CAAA,CACb;AAMD,IAAM,gBAAgB,wBAAA,OAAO,gCAAwB,SAAS,cAAA,aAAa;CACzE,UAAU;CACV,MAAM;CACN,QAAQ;CACR,GAAG;CACH,OAAO;CACP,WAAW,EACT,SAAS,OACX;CACA,UAAU,EACR,WAAW,kBAAA,kBACb;CACA,iBAAiB,EACf,WAAW,EACb;AACF,CAAC;AAYD,IAAa,wBAAwB,MAAA,QAAM,YAGxC,EAAE,UAAU,WAAW,GAAG,SAAS,gBACpC,iBAAA,GAAA,kBAAA,IAAA,CAAC,eAAD;CAA0B;CAAW,GAAI;CAAO,KAAK;CAClD;AACY,CAAA,CAChB;AAMD,IAAM,gBAAgB,wBAAA,OAAO,gCAAwB,SAAS;CAC5D,iBAAiB;CACjB,QAAQ;AACV,CAAC;AASD,IAAa,yBAAyB,EAAE,UAAU,GAAG,YACnD,iBAAA,GAAA,kBAAA,IAAA,CAAC,eAAD;CAAe,GAAI;CAAQ;AAAwB,CAAA;AAKrD,IAAa,0BAA0B,gCAAwB;AAC/D,IAAa,qBAAqB,gCAAwB;AAC1D,IAAa,qBAAqB,gCAAwB;AAC1D,IAAa,qBAAqB,gCAAwB;AAC1D,IAAa,yBAAyB,gCAAwB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationTreeContainer.cjs","names":[],"sources":["../../../components/NavigationTree/NavigationTreeContainer.tsx"],"sourcesContent":["import { ChevronDownIcon, ChevronRightIcon } from '@radix-ui/react-icons';\nimport React from 'react';\n\nimport { CSS } from '../../stitches.config';\nimport { NavigationContainer, NavigationContainerProps } from '../Navigation';\n\nexport interface NavigationTreeProps {\n children: React.ReactNode;\n defaultExpandIcon?: React.ReactNode;\n defaultCollapseIcon?: React.ReactNode;\n css?: CSS;\n fullWidth?: boolean;\n}\n\nexport const NavigationTreeContainer = ({\n children,\n defaultCollapseIcon = <ChevronDownIcon />,\n defaultExpandIcon = <ChevronRightIcon />,\n fullWidth = false,\n ...props\n}: NavigationTreeProps & NavigationContainerProps) => {\n const renderChildren = React.Children.map(children, (child) => {\n return React.cloneElement(child as React.ReactElement, {\n defaultCollapseIcon,\n defaultExpandIcon,\n fullWidth,\n });\n });\n\n return <NavigationContainer {...props}>{renderChildren}</NavigationContainer>;\n};\n"],"mappings":";;;;;;;AAcA,IAAa,2BAA2B,EACtC,UACA,sBAAsB,iBAAA,GAAA,kBAAA,
|
|
1
|
+
{"version":3,"file":"NavigationTreeContainer.cjs","names":[],"sources":["../../../components/NavigationTree/NavigationTreeContainer.tsx"],"sourcesContent":["import { ChevronDownIcon, ChevronRightIcon } from '@radix-ui/react-icons';\nimport React from 'react';\n\nimport { CSS } from '../../stitches.config';\nimport { NavigationContainer, NavigationContainerProps } from '../Navigation';\n\nexport interface NavigationTreeProps {\n children: React.ReactNode;\n defaultExpandIcon?: React.ReactNode;\n defaultCollapseIcon?: React.ReactNode;\n css?: CSS;\n fullWidth?: boolean;\n}\n\nexport const NavigationTreeContainer = ({\n children,\n defaultCollapseIcon = <ChevronDownIcon />,\n defaultExpandIcon = <ChevronRightIcon />,\n fullWidth = false,\n ...props\n}: NavigationTreeProps & NavigationContainerProps) => {\n const renderChildren = React.Children.map(children, (child) => {\n return React.cloneElement(child as React.ReactElement, {\n defaultCollapseIcon,\n defaultExpandIcon,\n fullWidth,\n });\n });\n\n return <NavigationContainer {...props}>{renderChildren}</NavigationContainer>;\n};\n"],"mappings":";;;;;;;AAcA,IAAa,2BAA2B,EACtC,UACA,sBAAsB,iBAAA,GAAA,kBAAA,IAAA,CAAC,sBAAA,iBAAD,CAAkB,CAAA,GACxC,oBAAoB,iBAAA,GAAA,kBAAA,IAAA,CAAC,sBAAA,kBAAD,CAAmB,CAAA,GACvC,YAAY,OACZ,GAAG,YACiD;CACpD,MAAM,iBAAiB,MAAA,QAAM,SAAS,IAAI,WAAW,UAAU;EAC7D,OAAO,MAAA,QAAM,aAAa,OAA6B;GACrD;GACA;GACA;EACF,CAAC;CACH,CAAC;CAED,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,mBAAA,qBAAD;EAAqB,GAAI;YAAQ;CAAoC,CAAA;AAC9E"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationTreeDrawer.cjs","names":[],"sources":["../../../components/NavigationTree/NavigationTreeDrawer.tsx"],"sourcesContent":["import React from 'react';\n\nimport { CSS } from '../../stitches.config';\nimport { NavigationDrawer, NavigationDrawerProps } from '../Navigation';\n\nexport interface NavigationTreeDrawerProps {\n children: React.ReactNode;\n css?: CSS;\n fullWidth?: boolean;\n}\n\nexport const NavigationTreeDrawer = ({\n children,\n fullWidth = false,\n ...props\n}: NavigationTreeDrawerProps & NavigationDrawerProps) => {\n const renderChildren = React.Children.map(children, (child) => {\n return React.cloneElement(child as React.ReactElement, {\n fullWidth,\n });\n });\n\n return (\n <NavigationDrawer fullWidth={fullWidth} {...props}>\n {renderChildren}\n </NavigationDrawer>\n );\n};\n"],"mappings":";;;;;;AAWA,IAAa,wBAAwB,EACnC,UACA,YAAY,OACZ,GAAG,YACoD;CACvD,MAAM,iBAAiB,MAAA,QAAM,SAAS,IAAI,WAAW,UAAU;EAC7D,OAAO,MAAA,QAAM,aAAa,OAA6B,EACrD,UACF,CAAC;CACH,CAAC;CAED,OACE,iBAAA,GAAA,kBAAA,
|
|
1
|
+
{"version":3,"file":"NavigationTreeDrawer.cjs","names":[],"sources":["../../../components/NavigationTree/NavigationTreeDrawer.tsx"],"sourcesContent":["import React from 'react';\n\nimport { CSS } from '../../stitches.config';\nimport { NavigationDrawer, NavigationDrawerProps } from '../Navigation';\n\nexport interface NavigationTreeDrawerProps {\n children: React.ReactNode;\n css?: CSS;\n fullWidth?: boolean;\n}\n\nexport const NavigationTreeDrawer = ({\n children,\n fullWidth = false,\n ...props\n}: NavigationTreeDrawerProps & NavigationDrawerProps) => {\n const renderChildren = React.Children.map(children, (child) => {\n return React.cloneElement(child as React.ReactElement, {\n fullWidth,\n });\n });\n\n return (\n <NavigationDrawer fullWidth={fullWidth} {...props}>\n {renderChildren}\n </NavigationDrawer>\n );\n};\n"],"mappings":";;;;;;AAWA,IAAa,wBAAwB,EACnC,UACA,YAAY,OACZ,GAAG,YACoD;CACvD,MAAM,iBAAiB,MAAA,QAAM,SAAS,IAAI,WAAW,UAAU;EAC7D,OAAO,MAAA,QAAM,aAAa,OAA6B,EACrD,UACF,CAAC;CACH,CAAC;CAED,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,mBAAA,kBAAD;EAA6B;EAAW,GAAI;YACzC;CACe,CAAA;AAEtB"}
|