@traefik-labs/faency 12.3.3 → 12.3.5
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/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/AriaTable/AriaTable.js.map +1 -1
- package/dist/components/Avatar/Avatar.cjs.map +1 -1
- package/dist/components/Avatar/Avatar.js.map +1 -1
- package/dist/components/Avatar/Avatar.vanilla.cjs.map +1 -1
- package/dist/components/Avatar/Avatar.vanilla.js.map +1 -1
- package/dist/components/Badge/Badge.cjs.map +1 -1
- package/dist/components/Badge/Badge.js.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 +1 -0
- package/dist/components/Blockquote/Blockquote.vanilla.css.js +1 -0
- package/dist/components/Blockquote/Blockquote.vanilla.js.map +1 -1
- package/dist/components/Box/Box.vanilla.cjs.map +1 -1
- package/dist/components/Box/Box.vanilla.js.map +1 -1
- package/dist/components/Bubble/Bubble.vanilla.cjs.map +1 -1
- package/dist/components/Bubble/Bubble.vanilla.js.map +1 -1
- package/dist/components/Button/Button.cjs.map +1 -1
- package/dist/components/Button/Button.js.map +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/Button/Button.vanilla.js.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/ButtonSwitch/ButtonSwitch.vanilla.js.map +1 -1
- package/dist/components/Card/Card.cjs.map +1 -1
- package/dist/components/Card/Card.js.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.js.map +1 -1
- package/dist/components/Checkbox/Checkbox.cjs.map +1 -1
- package/dist/components/Checkbox/Checkbox.js.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.map +1 -1
- package/dist/components/CodeBlock/prism-extend.js.map +1 -1
- package/dist/components/Container/Container.vanilla.cjs.map +1 -1
- package/dist/components/Container/Container.vanilla.js.map +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.js.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/Elevation/Elevation.vanilla.cjs.map +1 -1
- package/dist/components/Elevation/Elevation.vanilla.js.map +1 -1
- package/dist/components/Flex/Flex.vanilla.cjs.map +1 -1
- package/dist/components/Flex/Flex.vanilla.js.map +1 -1
- package/dist/components/Grid/Grid.vanilla.cjs.map +1 -1
- package/dist/components/Grid/Grid.vanilla.js.map +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/IconButton/IconButton.vanilla.js.map +1 -1
- package/dist/components/Image/Image.vanilla.cjs.map +1 -1
- package/dist/components/Image/Image.vanilla.js.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.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/Input/Input.vanilla.js.map +1 -1
- package/dist/components/Label/Label.vanilla.cjs.map +1 -1
- package/dist/components/Label/Label.vanilla.css.cjs +0 -1
- package/dist/components/Label/Label.vanilla.css.js +0 -1
- package/dist/components/Label/Label.vanilla.js.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.js.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.js.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/NavigationTree/NavigationTreeContainer.cjs.map +1 -1
- package/dist/components/NavigationTree/NavigationTreeContainer.js.map +1 -1
- package/dist/components/NavigationTree/NavigationTreeDrawer.cjs.map +1 -1
- package/dist/components/NavigationTree/NavigationTreeDrawer.js.map +1 -1
- package/dist/components/NavigationTree/NavigationTreeItem.cjs.map +1 -1
- package/dist/components/NavigationTree/NavigationTreeItem.js.map +1 -1
- package/dist/components/Panel/Panel.vanilla.cjs.map +1 -1
- package/dist/components/Panel/Panel.vanilla.js.map +1 -1
- package/dist/components/Paragraph/Paragraph.cjs.map +1 -1
- package/dist/components/Paragraph/Paragraph.js.map +1 -1
- package/dist/components/Paragraph/Paragraph.vanilla.cjs.map +1 -1
- package/dist/components/Paragraph/Paragraph.vanilla.js.map +1 -1
- package/dist/components/Popover/Popover.cjs.map +1 -1
- package/dist/components/Popover/Popover.js.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/RadioAccordion/RadioAccordion.js.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.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/Skeleton/Skeleton.vanilla.js.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.map +1 -1
- package/dist/components/Table/Table.js.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.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.js.map +1 -1
- package/dist/components/TextField/TextField.vanilla.cjs.map +1 -1
- package/dist/components/TextField/TextField.vanilla.js.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.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/Textarea/Textarea.vanilla.js.map +1 -1
- package/dist/components/Tooltip/Tooltip.cjs.map +1 -1
- package/dist/components/Tooltip/Tooltip.js.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/stitches.config.cjs.map +1 -1
- 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/utils/deepMerge.cjs.map +1 -1
- package/dist/utils/deepMerge.js.map +1 -1
- package/package.json +22 -22
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","names":[],"sources":["../../../components/Button/Button.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot';\nimport React, { ComponentProps, useMemo } from 'react';\n\nimport { CSS, keyframes, styled, VariantProps } from '../../stitches.config';\n\nexport const BUTTON_BASE_STYLES = {\n appearance: 'none',\n userSelect: 'none',\n boxSizing: 'border-box',\n border: 'none',\n WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n '&:disabled': {\n pointerEvents: 'none',\n opacity: 0.5,\n },\n};\n\nconst BG_SIZES = {\n small: '$sizes$8',\n medium: '$sizes$9',\n large: '$sizes$10',\n};\n\nconst backgroundSizeAnimation = (size: keyof typeof BG_SIZES) => ({\n $$bgSize: BG_SIZES[size],\n backgroundSize: '$$bgSize',\n backgroundImage: `linear-gradient(\n -45deg,\n transparent 33%,\n $colors$deepBlue4 33%,\n $colors$deepBlue4 66%,\n transparent 66%\n )`,\n animation: `${keyframes({\n '100%': { transform: 'translateX($$bgSize)' },\n })} 500ms linear infinite`,\n});\n\nexport const StyledButton = styled('button', BUTTON_BASE_STYLES, {\n // Reset\n all: 'unset',\n alignItems: 'center',\n overflow: 'hidden',\n\n '&::before': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n },\n '&::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n },\n\n // Custom reset?\n display: 'inline-flex',\n flexShrink: 0,\n justifyContent: 'center',\n lineHeight: '1',\n\n // Custom\n position: 'relative',\n height: '$5',\n px: '$2',\n fontFamily: '$rubik',\n fontSize: '$3',\n fontWeight: '$medium',\n fontVariantNumeric: 'tabular-nums',\n\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px $colors$focusOutline`,\n '&::before': {\n backgroundColor: 'rgba(255, 255, 255, 0.15)',\n },\n '&::after': {\n opacity: 0.15,\n },\n },\n\n '@hover': {\n '&:hover': {\n cursor: 'pointer',\n '&::before': {\n backgroundColor: 'rgba(255, 255, 255, 0.15)',\n },\n '&::after': {\n opacity: 0.05,\n },\n },\n },\n\n '&:active': {\n '&::before': {\n backgroundColor: 'rgba(0, 0, 0, 0.15)',\n },\n },\n\n variants: {\n size: {\n small: {\n borderRadius: '$button',\n height: '$5',\n px: '$2',\n fontSize: '$1',\n lineHeight: '$sizes$5',\n },\n medium: {\n borderRadius: '$button',\n height: '$6',\n px: '$3',\n fontSize: '$3',\n lineHeight: '$sizes$6',\n },\n large: {\n borderRadius: '$button',\n height: '$7',\n px: '$3',\n fontSize: '$3',\n lineHeight: '$sizes$7',\n },\n },\n variant: {\n primary: {\n bc: '$buttonPrimaryBg',\n c: '$buttonPrimaryText',\n '&:focus-visible': {\n boxShadow: 'inset 0 0 0 2px $colors$buttonPrimaryFocusBorder',\n },\n '@hover': {\n '&:hover': {\n '&::after': {\n backgroundColor: '$buttonPrimaryBg',\n },\n },\n },\n },\n secondary: {\n bc: '$buttonSecondaryBg',\n c: '$buttonSecondaryText',\n boxShadow: 'inset 0 0 0 2px $colors$buttonSecondaryBorder',\n '&:active': {\n boxShadow: 'inset 0 0 0 1px $colors$buttonSecondaryBorder',\n },\n '&:focus-visible': {\n boxShadow: 'inset 0 0 0 2px $colors$buttonSecondaryFocusBorder',\n },\n '@hover': {\n '&:hover': {\n '&::after': {\n backgroundColor: '$buttonPrimaryBg',\n },\n },\n },\n },\n red: {\n backgroundColor: '$buttonRedBg',\n color: '$buttonRedText',\n '&:focus-visible': {\n boxShadow: 'inset 0 0 0 2px $colors$buttonRedFocusBg',\n },\n },\n },\n state: {\n active: {\n bc: '$deepBlue5',\n c: '$deepBlue11',\n '&:active': {\n backgroundColor: '$deepBlue5',\n },\n },\n waiting: {\n bc: '$deepBlue3',\n boxShadow: `inset 0 0 0 1px $deepBlue4`,\n c: 'transparent',\n overflow: 'hidden',\n pointerEvents: 'none',\n '&::after': {\n left: '-100%',\n width: '200%',\n ...backgroundSizeAnimation('medium'),\n },\n },\n },\n ghost: {\n true: {\n boxShadow: 'none',\n '@hover': {\n '&:hover': {\n boxShadow: 'none',\n },\n },\n },\n },\n rounded: {\n true: {\n borderRadius: '$pill',\n },\n },\n },\n compoundVariants: [\n {\n variant: 'primary',\n ghost: 'true',\n css: {\n color: '$buttonPrimaryBg',\n backgroundColor: 'transparent',\n '@hover': {\n '&:hover': {\n color: '$buttonPrimaryGhostHoverText',\n backgroundColor: 'transparent',\n },\n },\n },\n },\n {\n variant: 'primary',\n state: 'active',\n css: {\n backgroundColor: '$buttonPrimaryFocusBg',\n color: '$buttonPrimaryText',\n boxShadow: 'inset 0 0 0 2px white',\n },\n },\n {\n variant: 'secondary',\n state: 'waiting',\n css: {\n backgroundColor: '$deepBlue3',\n color: 'transparent',\n },\n },\n {\n variant: 'secondary',\n ghost: true,\n css: {\n backgroundColor: 'transparent',\n color: '$buttonSecondaryText',\n boxShadow: 'none',\n },\n },\n {\n variant: 'red',\n state: 'waiting',\n css: {\n backgroundColor: '$deepBlue3',\n color: 'transparent',\n },\n },\n {\n variant: 'red',\n state: 'active',\n css: {\n backgroundColor: '$buttonRedFocusBg',\n color: '$buttonRedText',\n boxShadow: 'inset 0 0 0 2px white',\n },\n },\n {\n variant: 'red',\n ghost: 'true',\n css: {\n color: '$buttonRedBg',\n backgroundColor: 'transparent',\n '@hover': {\n '&:hover': {\n color: '$buttonRedHoverText',\n backgroundColor: 'transparent',\n },\n },\n },\n },\n {\n size: 'small',\n state: 'waiting',\n css: {\n '&::after': backgroundSizeAnimation('small'),\n },\n },\n {\n size: 'large',\n state: 'waiting',\n css: {\n '&::after': backgroundSizeAnimation('large'),\n },\n },\n ],\n defaultVariants: {\n size: 'medium',\n variant: 'primary',\n },\n});\nconst StyledButtonSlot = styled(Slot, StyledButton);\n\nexport interface ButtonVariants extends VariantProps<typeof StyledButton> {}\nexport type ButtonProps = ComponentProps<typeof StyledButton> &\n ButtonVariants & {\n css?: CSS;\n asChild?: boolean;\n as?: string;\n };\n\nexport const Button = React.forwardRef<React.ElementRef<typeof StyledButton>, ButtonProps>(\n ({ children, asChild, ...props }, forwardedRef) => {\n const Component = useMemo(() => (asChild ? StyledButtonSlot : StyledButton), [asChild]);\n return (\n <Component ref={forwardedRef} {...props}>\n {children}\n </Component>\n );\n },\n);\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Button.js","names":[],"sources":["../../../components/Button/Button.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot';\nimport React, { ComponentProps, useMemo } from 'react';\n\nimport { CSS, keyframes, styled, VariantProps } from '../../stitches.config';\n\nexport const BUTTON_BASE_STYLES = {\n appearance: 'none',\n userSelect: 'none',\n boxSizing: 'border-box',\n border: 'none',\n WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n '&:disabled': {\n pointerEvents: 'none',\n opacity: 0.5,\n },\n};\n\nconst BG_SIZES = {\n small: '$sizes$8',\n medium: '$sizes$9',\n large: '$sizes$10',\n};\n\nconst backgroundSizeAnimation = (size: keyof typeof BG_SIZES) => ({\n $$bgSize: BG_SIZES[size],\n backgroundSize: '$$bgSize',\n backgroundImage: `linear-gradient(\n -45deg,\n transparent 33%,\n $colors$deepBlue4 33%,\n $colors$deepBlue4 66%,\n transparent 66%\n )`,\n animation: `${keyframes({\n '100%': { transform: 'translateX($$bgSize)' },\n })} 500ms linear infinite`,\n});\n\nexport const StyledButton = styled('button', BUTTON_BASE_STYLES, {\n // Reset\n all: 'unset',\n alignItems: 'center',\n overflow: 'hidden',\n\n '&::before': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n },\n '&::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n },\n\n // Custom reset?\n display: 'inline-flex',\n flexShrink: 0,\n justifyContent: 'center',\n lineHeight: '1',\n\n // Custom\n position: 'relative',\n height: '$5',\n px: '$2',\n fontFamily: '$rubik',\n fontSize: '$3',\n fontWeight: '$medium',\n fontVariantNumeric: 'tabular-nums',\n\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px $colors$focusOutline`,\n '&::before': {\n backgroundColor: 'rgba(255, 255, 255, 0.15)',\n },\n '&::after': {\n opacity: 0.15,\n },\n },\n\n '@hover': {\n '&:hover': {\n cursor: 'pointer',\n '&::before': {\n backgroundColor: 'rgba(255, 255, 255, 0.15)',\n },\n '&::after': {\n opacity: 0.05,\n },\n },\n },\n\n '&:active': {\n '&::before': {\n backgroundColor: 'rgba(0, 0, 0, 0.15)',\n },\n },\n\n variants: {\n size: {\n small: {\n borderRadius: '$button',\n height: '$5',\n px: '$2',\n fontSize: '$1',\n lineHeight: '$sizes$5',\n },\n medium: {\n borderRadius: '$button',\n height: '$6',\n px: '$3',\n fontSize: '$3',\n lineHeight: '$sizes$6',\n },\n large: {\n borderRadius: '$button',\n height: '$7',\n px: '$3',\n fontSize: '$3',\n lineHeight: '$sizes$7',\n },\n },\n variant: {\n primary: {\n bc: '$buttonPrimaryBg',\n c: '$buttonPrimaryText',\n '&:focus-visible': {\n boxShadow: 'inset 0 0 0 2px $colors$buttonPrimaryFocusBorder',\n },\n '@hover': {\n '&:hover': {\n '&::after': {\n backgroundColor: '$buttonPrimaryBg',\n },\n },\n },\n },\n secondary: {\n bc: '$buttonSecondaryBg',\n c: '$buttonSecondaryText',\n boxShadow: 'inset 0 0 0 2px $colors$buttonSecondaryBorder',\n '&:active': {\n boxShadow: 'inset 0 0 0 1px $colors$buttonSecondaryBorder',\n },\n '&:focus-visible': {\n boxShadow: 'inset 0 0 0 2px $colors$buttonSecondaryFocusBorder',\n },\n '@hover': {\n '&:hover': {\n '&::after': {\n backgroundColor: '$buttonPrimaryBg',\n },\n },\n },\n },\n red: {\n backgroundColor: '$buttonRedBg',\n color: '$buttonRedText',\n '&:focus-visible': {\n boxShadow: 'inset 0 0 0 2px $colors$buttonRedFocusBg',\n },\n },\n },\n state: {\n active: {\n bc: '$deepBlue5',\n c: '$deepBlue11',\n '&:active': {\n backgroundColor: '$deepBlue5',\n },\n },\n waiting: {\n bc: '$deepBlue3',\n boxShadow: `inset 0 0 0 1px $deepBlue4`,\n c: 'transparent',\n overflow: 'hidden',\n pointerEvents: 'none',\n '&::after': {\n left: '-100%',\n width: '200%',\n ...backgroundSizeAnimation('medium'),\n },\n },\n },\n ghost: {\n true: {\n boxShadow: 'none',\n '@hover': {\n '&:hover': {\n boxShadow: 'none',\n },\n },\n },\n },\n rounded: {\n true: {\n borderRadius: '$pill',\n },\n },\n },\n compoundVariants: [\n {\n variant: 'primary',\n ghost: 'true',\n css: {\n color: '$buttonPrimaryBg',\n backgroundColor: 'transparent',\n '@hover': {\n '&:hover': {\n color: '$buttonPrimaryGhostHoverText',\n backgroundColor: 'transparent',\n },\n },\n },\n },\n {\n variant: 'primary',\n state: 'active',\n css: {\n backgroundColor: '$buttonPrimaryFocusBg',\n color: '$buttonPrimaryText',\n boxShadow: 'inset 0 0 0 2px white',\n },\n },\n {\n variant: 'secondary',\n state: 'waiting',\n css: {\n backgroundColor: '$deepBlue3',\n color: 'transparent',\n },\n },\n {\n variant: 'secondary',\n ghost: true,\n css: {\n backgroundColor: 'transparent',\n color: '$buttonSecondaryText',\n boxShadow: 'none',\n },\n },\n {\n variant: 'red',\n state: 'waiting',\n css: {\n backgroundColor: '$deepBlue3',\n color: 'transparent',\n },\n },\n {\n variant: 'red',\n state: 'active',\n css: {\n backgroundColor: '$buttonRedFocusBg',\n color: '$buttonRedText',\n boxShadow: 'inset 0 0 0 2px white',\n },\n },\n {\n variant: 'red',\n ghost: 'true',\n css: {\n color: '$buttonRedBg',\n backgroundColor: 'transparent',\n '@hover': {\n '&:hover': {\n color: '$buttonRedHoverText',\n backgroundColor: 'transparent',\n },\n },\n },\n },\n {\n size: 'small',\n state: 'waiting',\n css: {\n '&::after': backgroundSizeAnimation('small'),\n },\n },\n {\n size: 'large',\n state: 'waiting',\n css: {\n '&::after': backgroundSizeAnimation('large'),\n },\n },\n ],\n defaultVariants: {\n size: 'medium',\n variant: 'primary',\n },\n});\nconst StyledButtonSlot = styled(Slot, StyledButton);\n\nexport interface ButtonVariants extends VariantProps<typeof StyledButton> {}\nexport type ButtonProps = ComponentProps<typeof StyledButton> &\n ButtonVariants & {\n css?: CSS;\n asChild?: boolean;\n as?: string;\n };\n\nexport const Button = React.forwardRef<React.ElementRef<typeof StyledButton>, ButtonProps>(\n ({ children, asChild, ...props }, forwardedRef) => {\n const Component = useMemo(() => (asChild ? StyledButtonSlot : StyledButton), [asChild]);\n return (\n <Component ref={forwardedRef} {...props}>\n {children}\n </Component>\n );\n },\n);\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.themes.cjs","names":[],"sources":["../../../components/Button/Button.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 type Colors = {\n buttonPrimaryBg: Property.Color;\n buttonPrimaryText: Property.Color;\n buttonPrimaryFocusBorder: Property.Color;\n buttonPrimaryGhostHoverText: Property.Color;\n\n buttonSecondaryBg: Property.Color;\n buttonSecondaryText: Property.Color;\n buttonSecondaryBorder: Property.Color;\n buttonSecondaryFocusBorder: Property.Color;\n\n buttonRedBg: Property.Color;\n buttonRedText: Property.Color;\n buttonRedHoverText: Property.Color;\n buttonRedFocusBg: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = (primaryColor) => ({\n buttonPrimaryBg: '$primary',\n buttonPrimaryFocusBg: tinycolor(primaryColor.value).lighten(10).toHslString(),\n buttonPrimaryText: 'white',\n buttonPrimaryFocusBorder: primaryColor.helpers.pickScale(6, { alpha: true }),\n buttonPrimaryGhostHoverText: '$deepBlue9',\n\n buttonSecondaryBg: 'transparent',\n buttonSecondaryText: 'hsla(0, 0%, 0%, 0.54)',\n buttonSecondaryBorder: '$grayBlue9',\n buttonSecondaryFocusBorder: tinycolor(primaryColor.value).setAlpha(0.19).toHslString(),\n\n buttonRedBg: '$red9',\n buttonRedText: '$loContrast',\n buttonRedHoverText: '$red10',\n buttonRedFocusBg: '$redA8',\n });\n\n export const getDark: Factory = (primaryColor) => ({\n buttonPrimaryBg: '$primary',\n buttonPrimaryFocusBg: tinycolor(primaryColor.value).lighten(10).toHslString(),\n buttonPrimaryText: '$deepBlue2',\n buttonPrimaryFocusBorder: primaryColor.helpers.pickScale(12, { alpha: true }),\n buttonPrimaryGhostHoverText: tinycolor(primaryColor.value).lighten(10).toHslString(),\n\n buttonSecondaryBg: 'transparent',\n buttonSecondaryText: tinycolor('white').setAlpha(0.74).toHslString(),\n buttonSecondaryBorder: '$grayBlue9',\n buttonSecondaryFocusBorder: '$primary',\n\n buttonRedBg: '$red10',\n buttonRedText: '$hiContrast',\n buttonRedHoverText: '$red10',\n buttonRedFocusBg: '$redA11',\n });\n}\n"],"mappings":";;;;AAKO,IAAA;;
|
|
1
|
+
{"version":3,"file":"Button.themes.cjs","names":[],"sources":["../../../components/Button/Button.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 type Colors = {\n buttonPrimaryBg: Property.Color;\n buttonPrimaryText: Property.Color;\n buttonPrimaryFocusBorder: Property.Color;\n buttonPrimaryGhostHoverText: Property.Color;\n\n buttonSecondaryBg: Property.Color;\n buttonSecondaryText: Property.Color;\n buttonSecondaryBorder: Property.Color;\n buttonSecondaryFocusBorder: Property.Color;\n\n buttonRedBg: Property.Color;\n buttonRedText: Property.Color;\n buttonRedHoverText: Property.Color;\n buttonRedFocusBg: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = (primaryColor) => ({\n buttonPrimaryBg: '$primary',\n buttonPrimaryFocusBg: tinycolor(primaryColor.value).lighten(10).toHslString(),\n buttonPrimaryText: 'white',\n buttonPrimaryFocusBorder: primaryColor.helpers.pickScale(6, { alpha: true }),\n buttonPrimaryGhostHoverText: '$deepBlue9',\n\n buttonSecondaryBg: 'transparent',\n buttonSecondaryText: 'hsla(0, 0%, 0%, 0.54)',\n buttonSecondaryBorder: '$grayBlue9',\n buttonSecondaryFocusBorder: tinycolor(primaryColor.value).setAlpha(0.19).toHslString(),\n\n buttonRedBg: '$red9',\n buttonRedText: '$loContrast',\n buttonRedHoverText: '$red10',\n buttonRedFocusBg: '$redA8',\n });\n\n export const getDark: Factory = (primaryColor) => ({\n buttonPrimaryBg: '$primary',\n buttonPrimaryFocusBg: tinycolor(primaryColor.value).lighten(10).toHslString(),\n buttonPrimaryText: '$deepBlue2',\n buttonPrimaryFocusBorder: primaryColor.helpers.pickScale(12, { alpha: true }),\n buttonPrimaryGhostHoverText: tinycolor(primaryColor.value).lighten(10).toHslString(),\n\n buttonSecondaryBg: 'transparent',\n buttonSecondaryText: tinycolor('white').setAlpha(0.74).toHslString(),\n buttonSecondaryBorder: '$grayBlue9',\n buttonSecondaryFocusBorder: '$primary',\n\n buttonRedBg: '$red10',\n buttonRedText: '$hiContrast',\n buttonRedHoverText: '$red10',\n buttonRedFocusBg: '$redA11',\n });\n}\n"],"mappings":";;;;AAKO,IAAA;;CAoBQ,OAAA,YAAqB,kBAAkB;EAClD,iBAAiB;EACjB,uBAAA,GAAA,WAAA,SAAgC,aAAa,MAAM,CAAC,QAAQ,GAAG,CAAC,aAAa;EAC7E,mBAAmB;EACnB,0BAA0B,aAAa,QAAQ,UAAU,GAAG,EAAE,OAAO,MAAM,CAAC;EAC5E,6BAA6B;EAE7B,mBAAmB;EACnB,qBAAqB;EACrB,uBAAuB;EACvB,6BAAA,GAAA,WAAA,SAAsC,aAAa,MAAM,CAAC,SAAS,IAAK,CAAC,aAAa;EAEtF,aAAa;EACb,eAAe;EACf,oBAAoB;EACpB,kBAAkB;EACnB;CAEY,OAAA,WAAoB,kBAAkB;EACjD,iBAAiB;EACjB,uBAAA,GAAA,WAAA,SAAgC,aAAa,MAAM,CAAC,QAAQ,GAAG,CAAC,aAAa;EAC7E,mBAAmB;EACnB,0BAA0B,aAAa,QAAQ,UAAU,IAAI,EAAE,OAAO,MAAM,CAAC;EAC7E,8BAAA,GAAA,WAAA,SAAuC,aAAa,MAAM,CAAC,QAAQ,GAAG,CAAC,aAAa;EAEpF,mBAAmB;EACnB,sBAAA,GAAA,WAAA,SAA+B,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EACpE,uBAAuB;EACvB,4BAA4B;EAE5B,aAAa;EACb,eAAe;EACf,oBAAoB;EACpB,kBAAkB;EACnB;yBACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.themes.js","names":[],"sources":["../../../components/Button/Button.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 type Colors = {\n buttonPrimaryBg: Property.Color;\n buttonPrimaryText: Property.Color;\n buttonPrimaryFocusBorder: Property.Color;\n buttonPrimaryGhostHoverText: Property.Color;\n\n buttonSecondaryBg: Property.Color;\n buttonSecondaryText: Property.Color;\n buttonSecondaryBorder: Property.Color;\n buttonSecondaryFocusBorder: Property.Color;\n\n buttonRedBg: Property.Color;\n buttonRedText: Property.Color;\n buttonRedHoverText: Property.Color;\n buttonRedFocusBg: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = (primaryColor) => ({\n buttonPrimaryBg: '$primary',\n buttonPrimaryFocusBg: tinycolor(primaryColor.value).lighten(10).toHslString(),\n buttonPrimaryText: 'white',\n buttonPrimaryFocusBorder: primaryColor.helpers.pickScale(6, { alpha: true }),\n buttonPrimaryGhostHoverText: '$deepBlue9',\n\n buttonSecondaryBg: 'transparent',\n buttonSecondaryText: 'hsla(0, 0%, 0%, 0.54)',\n buttonSecondaryBorder: '$grayBlue9',\n buttonSecondaryFocusBorder: tinycolor(primaryColor.value).setAlpha(0.19).toHslString(),\n\n buttonRedBg: '$red9',\n buttonRedText: '$loContrast',\n buttonRedHoverText: '$red10',\n buttonRedFocusBg: '$redA8',\n });\n\n export const getDark: Factory = (primaryColor) => ({\n buttonPrimaryBg: '$primary',\n buttonPrimaryFocusBg: tinycolor(primaryColor.value).lighten(10).toHslString(),\n buttonPrimaryText: '$deepBlue2',\n buttonPrimaryFocusBorder: primaryColor.helpers.pickScale(12, { alpha: true }),\n buttonPrimaryGhostHoverText: tinycolor(primaryColor.value).lighten(10).toHslString(),\n\n buttonSecondaryBg: 'transparent',\n buttonSecondaryText: tinycolor('white').setAlpha(0.74).toHslString(),\n buttonSecondaryBorder: '$grayBlue9',\n buttonSecondaryFocusBorder: '$primary',\n\n buttonRedBg: '$red10',\n buttonRedText: '$hiContrast',\n buttonRedHoverText: '$red10',\n buttonRedFocusBg: '$redA11',\n });\n}\n"],"mappings":";;AAKO,IAAA;;
|
|
1
|
+
{"version":3,"file":"Button.themes.js","names":[],"sources":["../../../components/Button/Button.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 type Colors = {\n buttonPrimaryBg: Property.Color;\n buttonPrimaryText: Property.Color;\n buttonPrimaryFocusBorder: Property.Color;\n buttonPrimaryGhostHoverText: Property.Color;\n\n buttonSecondaryBg: Property.Color;\n buttonSecondaryText: Property.Color;\n buttonSecondaryBorder: Property.Color;\n buttonSecondaryFocusBorder: Property.Color;\n\n buttonRedBg: Property.Color;\n buttonRedText: Property.Color;\n buttonRedHoverText: Property.Color;\n buttonRedFocusBg: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = (primaryColor) => ({\n buttonPrimaryBg: '$primary',\n buttonPrimaryFocusBg: tinycolor(primaryColor.value).lighten(10).toHslString(),\n buttonPrimaryText: 'white',\n buttonPrimaryFocusBorder: primaryColor.helpers.pickScale(6, { alpha: true }),\n buttonPrimaryGhostHoverText: '$deepBlue9',\n\n buttonSecondaryBg: 'transparent',\n buttonSecondaryText: 'hsla(0, 0%, 0%, 0.54)',\n buttonSecondaryBorder: '$grayBlue9',\n buttonSecondaryFocusBorder: tinycolor(primaryColor.value).setAlpha(0.19).toHslString(),\n\n buttonRedBg: '$red9',\n buttonRedText: '$loContrast',\n buttonRedHoverText: '$red10',\n buttonRedFocusBg: '$redA8',\n });\n\n export const getDark: Factory = (primaryColor) => ({\n buttonPrimaryBg: '$primary',\n buttonPrimaryFocusBg: tinycolor(primaryColor.value).lighten(10).toHslString(),\n buttonPrimaryText: '$deepBlue2',\n buttonPrimaryFocusBorder: primaryColor.helpers.pickScale(12, { alpha: true }),\n buttonPrimaryGhostHoverText: tinycolor(primaryColor.value).lighten(10).toHslString(),\n\n buttonSecondaryBg: 'transparent',\n buttonSecondaryText: tinycolor('white').setAlpha(0.74).toHslString(),\n buttonSecondaryBorder: '$grayBlue9',\n buttonSecondaryFocusBorder: '$primary',\n\n buttonRedBg: '$red10',\n buttonRedText: '$hiContrast',\n buttonRedHoverText: '$red10',\n buttonRedFocusBg: '$redA11',\n });\n}\n"],"mappings":";;AAKO,IAAA;;CAoBQ,OAAA,YAAqB,kBAAkB;EAClD,iBAAiB;EACjB,sBAAsB,UAAU,aAAa,MAAM,CAAC,QAAQ,GAAG,CAAC,aAAa;EAC7E,mBAAmB;EACnB,0BAA0B,aAAa,QAAQ,UAAU,GAAG,EAAE,OAAO,MAAM,CAAC;EAC5E,6BAA6B;EAE7B,mBAAmB;EACnB,qBAAqB;EACrB,uBAAuB;EACvB,4BAA4B,UAAU,aAAa,MAAM,CAAC,SAAS,IAAK,CAAC,aAAa;EAEtF,aAAa;EACb,eAAe;EACf,oBAAoB;EACpB,kBAAkB;EACnB;CAEY,OAAA,WAAoB,kBAAkB;EACjD,iBAAiB;EACjB,sBAAsB,UAAU,aAAa,MAAM,CAAC,QAAQ,GAAG,CAAC,aAAa;EAC7E,mBAAmB;EACnB,0BAA0B,aAAa,QAAQ,UAAU,IAAI,EAAE,OAAO,MAAM,CAAC;EAC7E,6BAA6B,UAAU,aAAa,MAAM,CAAC,QAAQ,GAAG,CAAC,aAAa;EAEpF,mBAAmB;EACnB,qBAAqB,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EACpE,uBAAuB;EACvB,4BAA4B;EAE5B,aAAa;EACb,eAAe;EACf,oBAAoB;EACpB,kBAAkB;EACnB;yBACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.vanilla.cjs","names":[],"sources":["../../../components/Button/Button.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 { buttonRecipe } from './Button.vanilla.css';\n\ntype ButtonRecipeVariants = RecipeVariants<typeof buttonRecipe>;\n\ninterface ButtonOwnProps extends Omit<ButtonRecipeVariants, never>, CSSProps {}\n\nexport type ButtonVanillaProps<C extends ElementType = 'button'> = PolymorphicComponentProps<\n C,\n ButtonOwnProps\n>;\n\ntype ButtonVanillaComponent = PolymorphicComponent<'button', ButtonVanillaProps<ElementType>>;\n\nconst ButtonVanillaComponentImpl = forwardRef(\n <C extends ElementType = 'button'>(\n {\n as,\n className,\n css,\n style,\n size,\n variant,\n state,\n ghost,\n rounded,\n ...props\n }: ButtonVanillaProps<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 = buttonRecipe({ size, variant, state, ghost, rounded });\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className || ''}`.trim()}\n style={mergedStyles}\n {...props}\n />\n );\n },\n);\n\nButtonVanillaComponentImpl.displayName = 'ButtonVanilla';\n\nexport const ButtonVanilla = ButtonVanillaComponentImpl as ButtonVanillaComponent;\n"],"mappings":";;;;;;;;AAwBA,IAAM,8BAAA,GAAA,MAAA,aAEF,EACE,IACA,WACA,KACA,OACA,MACA,SACA,OACA,OACA,SACA,GAAG,SAEL,QACG;CACH,MAAM,YAAY,MAAM;CAExB,MAAM,EAAE,WAAW,qBAAA,wBAAwB;CAE3C,MAAM,EAAE,OAAO,WAAW,SAAS,iBAAA,eAAe,KAAK,OAAO;CAE9D,MAAM,eAAe;EACnB,GAAG;EACH,GAAG;EACH,IAAA,GAAA,yBAAA,kBAAoB,KAAK;EAC1B;
|
|
1
|
+
{"version":3,"file":"Button.vanilla.cjs","names":[],"sources":["../../../components/Button/Button.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 { buttonRecipe } from './Button.vanilla.css';\n\ntype ButtonRecipeVariants = RecipeVariants<typeof buttonRecipe>;\n\ninterface ButtonOwnProps extends Omit<ButtonRecipeVariants, never>, CSSProps {}\n\nexport type ButtonVanillaProps<C extends ElementType = 'button'> = PolymorphicComponentProps<\n C,\n ButtonOwnProps\n>;\n\ntype ButtonVanillaComponent = PolymorphicComponent<'button', ButtonVanillaProps<ElementType>>;\n\nconst ButtonVanillaComponentImpl = forwardRef(\n <C extends ElementType = 'button'>(\n {\n as,\n className,\n css,\n style,\n size,\n variant,\n state,\n ghost,\n rounded,\n ...props\n }: ButtonVanillaProps<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 = buttonRecipe({ size, variant, state, ghost, rounded });\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className || ''}`.trim()}\n style={mergedStyles}\n {...props}\n />\n );\n },\n);\n\nButtonVanillaComponentImpl.displayName = 'ButtonVanilla';\n\nexport const ButtonVanilla = ButtonVanillaComponentImpl as ButtonVanillaComponent;\n"],"mappings":";;;;;;;;AAwBA,IAAM,8BAAA,GAAA,MAAA,aAEF,EACE,IACA,WACA,KACA,OACA,MACA,SACA,OACA,OACA,SACA,GAAG,SAEL,QACG;CACH,MAAM,YAAY,MAAM;CAExB,MAAM,EAAE,WAAW,qBAAA,wBAAwB;CAE3C,MAAM,EAAE,OAAO,WAAW,SAAS,iBAAA,eAAe,KAAK,OAAO;CAE9D,MAAM,eAAe;EACnB,GAAG;EACH,GAAG;EACH,IAAA,GAAA,yBAAA,kBAAoB,KAAK;EAC1B;CAID,OACE,iBAAA,GAAA,kBAAA,KAAC,WAAD;EACO;EACL,WAAW,GALK,2BAAA,aAAa;GAAE;GAAM;GAAS;GAAO;GAAO;GAAS,CAKvD,CAAY,GAAG,aAAa,KAAK,MAAM;EACrD,OAAO;EACP,GAAI;EACJ,CAAA;EAGP;AAED,2BAA2B,cAAc;AAEzC,IAAa,gBAAgB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.vanilla.js","names":[],"sources":["../../../components/Button/Button.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 { buttonRecipe } from './Button.vanilla.css';\n\ntype ButtonRecipeVariants = RecipeVariants<typeof buttonRecipe>;\n\ninterface ButtonOwnProps extends Omit<ButtonRecipeVariants, never>, CSSProps {}\n\nexport type ButtonVanillaProps<C extends ElementType = 'button'> = PolymorphicComponentProps<\n C,\n ButtonOwnProps\n>;\n\ntype ButtonVanillaComponent = PolymorphicComponent<'button', ButtonVanillaProps<ElementType>>;\n\nconst ButtonVanillaComponentImpl = forwardRef(\n <C extends ElementType = 'button'>(\n {\n as,\n className,\n css,\n style,\n size,\n variant,\n state,\n ghost,\n rounded,\n ...props\n }: ButtonVanillaProps<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 = buttonRecipe({ size, variant, state, ghost, rounded });\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className || ''}`.trim()}\n style={mergedStyles}\n {...props}\n />\n );\n },\n);\n\nButtonVanillaComponentImpl.displayName = 'ButtonVanilla';\n\nexport const ButtonVanilla = ButtonVanillaComponentImpl as ButtonVanillaComponent;\n"],"mappings":";;;;;;;AAwBA,IAAM,6BAA6B,YAE/B,EACE,IACA,WACA,KACA,OACA,MACA,SACA,OACA,OACA,SACA,GAAG,SAEL,QACG;CACH,MAAM,YAAY,MAAM;CAExB,MAAM,EAAE,WAAW,wBAAwB;CAE3C,MAAM,EAAE,OAAO,WAAW,SAAS,eAAe,KAAK,OAAO;CAE9D,MAAM,eAAe;EACnB,GAAG;EACH,GAAG;EACH,GAAG,iBAAiB,KAAK;EAC1B;
|
|
1
|
+
{"version":3,"file":"Button.vanilla.js","names":[],"sources":["../../../components/Button/Button.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 { buttonRecipe } from './Button.vanilla.css';\n\ntype ButtonRecipeVariants = RecipeVariants<typeof buttonRecipe>;\n\ninterface ButtonOwnProps extends Omit<ButtonRecipeVariants, never>, CSSProps {}\n\nexport type ButtonVanillaProps<C extends ElementType = 'button'> = PolymorphicComponentProps<\n C,\n ButtonOwnProps\n>;\n\ntype ButtonVanillaComponent = PolymorphicComponent<'button', ButtonVanillaProps<ElementType>>;\n\nconst ButtonVanillaComponentImpl = forwardRef(\n <C extends ElementType = 'button'>(\n {\n as,\n className,\n css,\n style,\n size,\n variant,\n state,\n ghost,\n rounded,\n ...props\n }: ButtonVanillaProps<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 = buttonRecipe({ size, variant, state, ghost, rounded });\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className || ''}`.trim()}\n style={mergedStyles}\n {...props}\n />\n );\n },\n);\n\nButtonVanillaComponentImpl.displayName = 'ButtonVanilla';\n\nexport const ButtonVanilla = ButtonVanillaComponentImpl as ButtonVanillaComponent;\n"],"mappings":";;;;;;;AAwBA,IAAM,6BAA6B,YAE/B,EACE,IACA,WACA,KACA,OACA,MACA,SACA,OACA,OACA,SACA,GAAG,SAEL,QACG;CACH,MAAM,YAAY,MAAM;CAExB,MAAM,EAAE,WAAW,wBAAwB;CAE3C,MAAM,EAAE,OAAO,WAAW,SAAS,eAAe,KAAK,OAAO;CAE9D,MAAM,eAAe;EACnB,GAAG;EACH,GAAG;EACH,GAAG,iBAAiB,KAAK;EAC1B;CAID,OACE,oBAAC,WAAD;EACO;EACL,WAAW,GALK,aAAa;GAAE;GAAM;GAAS;GAAO;GAAO;GAAS,CAKvD,CAAY,GAAG,aAAa,KAAK,MAAM;EACrD,OAAO;EACP,GAAI;EACJ,CAAA;EAGP;AAED,2BAA2B,cAAc;AAEzC,IAAa,gBAAgB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonSwitch.themes.cjs","names":[],"sources":["../../../components/ButtonSwitch/ButtonSwitch.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n type Colors = {\n buttonSwitchContainerBg: Property.Color;\n buttonSwitchActiveBg: Property.Color;\n buttonSwitchOffBg: Property.Color;\n buttonSwitchOffColor: Property.Color;\n buttonSwitchActiveColor: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = () => ({\n buttonSwitchContainerBg: '$02dp',\n buttonSwitchActiveBg: '$primary',\n buttonSwitchOffBg: 'transparent',\n buttonSwitchOffColor: '$hiContrast',\n buttonSwitchActiveColor: 'white',\n });\n\n export const getDark: Factory = () => ({\n buttonSwitchContainerBg: '$02dp',\n buttonSwitchActiveBg: '$primary',\n buttonSwitchOffBg: 'transparent',\n buttonSwitchOffColor: '$hiContrast',\n buttonSwitchActiveColor: '$deepBlue2',\n });\n}\n"],"mappings":";AAIO,IAAA;;
|
|
1
|
+
{"version":3,"file":"ButtonSwitch.themes.cjs","names":[],"sources":["../../../components/ButtonSwitch/ButtonSwitch.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n type Colors = {\n buttonSwitchContainerBg: Property.Color;\n buttonSwitchActiveBg: Property.Color;\n buttonSwitchOffBg: Property.Color;\n buttonSwitchOffColor: Property.Color;\n buttonSwitchActiveColor: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = () => ({\n buttonSwitchContainerBg: '$02dp',\n buttonSwitchActiveBg: '$primary',\n buttonSwitchOffBg: 'transparent',\n buttonSwitchOffColor: '$hiContrast',\n buttonSwitchActiveColor: 'white',\n });\n\n export const getDark: Factory = () => ({\n buttonSwitchContainerBg: '$02dp',\n buttonSwitchActiveBg: '$primary',\n buttonSwitchOffBg: 'transparent',\n buttonSwitchOffColor: '$hiContrast',\n buttonSwitchActiveColor: '$deepBlue2',\n });\n}\n"],"mappings":";AAIO,IAAA;;CAWQ,OAAA,kBAA2B;EACtC,yBAAyB;EACzB,sBAAsB;EACtB,mBAAmB;EACnB,sBAAsB;EACtB,yBAAyB;EAC1B;CAEY,OAAA,iBAA0B;EACrC,yBAAyB;EACzB,sBAAsB;EACtB,mBAAmB;EACnB,sBAAsB;EACtB,yBAAyB;EAC1B;yBACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonSwitch.themes.js","names":[],"sources":["../../../components/ButtonSwitch/ButtonSwitch.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n type Colors = {\n buttonSwitchContainerBg: Property.Color;\n buttonSwitchActiveBg: Property.Color;\n buttonSwitchOffBg: Property.Color;\n buttonSwitchOffColor: Property.Color;\n buttonSwitchActiveColor: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = () => ({\n buttonSwitchContainerBg: '$02dp',\n buttonSwitchActiveBg: '$primary',\n buttonSwitchOffBg: 'transparent',\n buttonSwitchOffColor: '$hiContrast',\n buttonSwitchActiveColor: 'white',\n });\n\n export const getDark: Factory = () => ({\n buttonSwitchContainerBg: '$02dp',\n buttonSwitchActiveBg: '$primary',\n buttonSwitchOffBg: 'transparent',\n buttonSwitchOffColor: '$hiContrast',\n buttonSwitchActiveColor: '$deepBlue2',\n });\n}\n"],"mappings":";AAIO,IAAA;;
|
|
1
|
+
{"version":3,"file":"ButtonSwitch.themes.js","names":[],"sources":["../../../components/ButtonSwitch/ButtonSwitch.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n type Colors = {\n buttonSwitchContainerBg: Property.Color;\n buttonSwitchActiveBg: Property.Color;\n buttonSwitchOffBg: Property.Color;\n buttonSwitchOffColor: Property.Color;\n buttonSwitchActiveColor: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = () => ({\n buttonSwitchContainerBg: '$02dp',\n buttonSwitchActiveBg: '$primary',\n buttonSwitchOffBg: 'transparent',\n buttonSwitchOffColor: '$hiContrast',\n buttonSwitchActiveColor: 'white',\n });\n\n export const getDark: Factory = () => ({\n buttonSwitchContainerBg: '$02dp',\n buttonSwitchActiveBg: '$primary',\n buttonSwitchOffBg: 'transparent',\n buttonSwitchOffColor: '$hiContrast',\n buttonSwitchActiveColor: '$deepBlue2',\n });\n}\n"],"mappings":";AAIO,IAAA;;CAWQ,OAAA,kBAA2B;EACtC,yBAAyB;EACzB,sBAAsB;EACtB,mBAAmB;EACnB,sBAAsB;EACtB,yBAAyB;EAC1B;CAEY,OAAA,iBAA0B;EACrC,yBAAyB;EACzB,sBAAsB;EACtB,mBAAmB;EACnB,sBAAsB;EACtB,yBAAyB;EAC1B;yBACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonSwitch.vanilla.cjs","names":[],"sources":["../../../components/ButtonSwitch/ButtonSwitch.vanilla.tsx"],"sourcesContent":["import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';\nimport { 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 { buttonSwitchContainer, buttonSwitchItem } from './ButtonSwitch.vanilla.css';\n\n// Container Component\ninterface ButtonSwitchContainerOwnProps extends CSSProps {\n type?: 'single' | 'multiple';\n value?: string | string[];\n defaultValue?: string | string[];\n onValueChange?: (value: any) => void;\n disabled?: boolean;\n rovingFocus?: boolean;\n loop?: boolean;\n orientation?: 'horizontal' | 'vertical';\n dir?: 'ltr' | 'rtl';\n}\n\nexport type ButtonSwitchContainerVanillaProps<C extends ElementType = 'div'> =\n PolymorphicComponentProps<C, ButtonSwitchContainerOwnProps>;\n\ntype ButtonSwitchContainerVanillaComponent = PolymorphicComponent<\n 'div',\n ButtonSwitchContainerVanillaProps<ElementType>\n>;\n\nconst ButtonSwitchContainerVanillaImpl = forwardRef(\n <C extends ElementType = 'div'>(\n { as, className, css, style, children, ...props }: ButtonSwitchContainerVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = (as || 'div') as any;\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 if (as) {\n return (\n <Component\n ref={ref}\n className={`${buttonSwitchContainer} ${className || ''}`.trim()}\n style={mergedStyles}\n role=\"group\"\n {...props}\n >\n {children}\n </Component>\n );\n }\n\n return (\n <ToggleGroupPrimitive.Root\n ref={ref as any}\n className={`${buttonSwitchContainer} ${className || ''}`.trim()}\n style={mergedStyles}\n {...(props as any)}\n >\n {children}\n </ToggleGroupPrimitive.Root>\n );\n },\n);\n\nButtonSwitchContainerVanillaImpl.displayName = 'ButtonSwitchContainerVanilla';\n\nexport const ButtonSwitchContainerVanilla =\n ButtonSwitchContainerVanillaImpl as ButtonSwitchContainerVanillaComponent;\n\n// Item Component\ninterface ButtonSwitchItemOwnProps extends CSSProps {\n value: string;\n disabled?: boolean;\n}\n\nexport type ButtonSwitchItemVanillaProps<C extends ElementType = 'button'> =\n PolymorphicComponentProps<C, ButtonSwitchItemOwnProps>;\n\ntype ButtonSwitchItemVanillaComponent = PolymorphicComponent<\n 'button',\n ButtonSwitchItemVanillaProps<ElementType>\n>;\n\nconst ButtonSwitchItemVanillaImpl = forwardRef(\n <C extends ElementType = 'button'>(\n { as, className, css, style, children, ...props }: ButtonSwitchItemVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = (as || 'button') as any;\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 if (as) {\n return (\n <Component\n ref={ref}\n className={`${buttonSwitchItem} ${className || ''}`.trim()}\n style={mergedStyles}\n role=\"radio\"\n {...props}\n >\n {children}\n </Component>\n );\n }\n\n return (\n <ToggleGroupPrimitive.Item\n ref={ref as any}\n className={`${buttonSwitchItem} ${className || ''}`.trim()}\n style={mergedStyles}\n {...(props as any)}\n >\n {children}\n </ToggleGroupPrimitive.Item>\n );\n },\n);\n\nButtonSwitchItemVanillaImpl.displayName = 'ButtonSwitchItemVanilla';\n\nexport const ButtonSwitchItemVanilla =\n ButtonSwitchItemVanillaImpl as ButtonSwitchItemVanillaComponent;\n"],"mappings":";;;;;;;;;;AAkCA,IAAM,oCAAA,GAAA,MAAA,aAEF,EAAE,IAAI,WAAW,KAAK,OAAO,UAAU,GAAG,SAC1C,QACG;CACH,MAAM,YAAa,MAAM;CACzB,MAAM,EAAE,WAAW,qBAAA,wBAAwB;CAE3C,MAAM,EAAE,OAAO,WAAW,SAAS,iBAAA,eAAe,KAAK,OAAO;CAE9D,MAAM,eAAe;EACnB,GAAG;EACH,GAAG;EACH,IAAA,GAAA,yBAAA,kBAAoB,KAAK;EAC1B;
|
|
1
|
+
{"version":3,"file":"ButtonSwitch.vanilla.cjs","names":[],"sources":["../../../components/ButtonSwitch/ButtonSwitch.vanilla.tsx"],"sourcesContent":["import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';\nimport { 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 { buttonSwitchContainer, buttonSwitchItem } from './ButtonSwitch.vanilla.css';\n\n// Container Component\ninterface ButtonSwitchContainerOwnProps extends CSSProps {\n type?: 'single' | 'multiple';\n value?: string | string[];\n defaultValue?: string | string[];\n onValueChange?: (value: any) => void;\n disabled?: boolean;\n rovingFocus?: boolean;\n loop?: boolean;\n orientation?: 'horizontal' | 'vertical';\n dir?: 'ltr' | 'rtl';\n}\n\nexport type ButtonSwitchContainerVanillaProps<C extends ElementType = 'div'> =\n PolymorphicComponentProps<C, ButtonSwitchContainerOwnProps>;\n\ntype ButtonSwitchContainerVanillaComponent = PolymorphicComponent<\n 'div',\n ButtonSwitchContainerVanillaProps<ElementType>\n>;\n\nconst ButtonSwitchContainerVanillaImpl = forwardRef(\n <C extends ElementType = 'div'>(\n { as, className, css, style, children, ...props }: ButtonSwitchContainerVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = (as || 'div') as any;\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 if (as) {\n return (\n <Component\n ref={ref}\n className={`${buttonSwitchContainer} ${className || ''}`.trim()}\n style={mergedStyles}\n role=\"group\"\n {...props}\n >\n {children}\n </Component>\n );\n }\n\n return (\n <ToggleGroupPrimitive.Root\n ref={ref as any}\n className={`${buttonSwitchContainer} ${className || ''}`.trim()}\n style={mergedStyles}\n {...(props as any)}\n >\n {children}\n </ToggleGroupPrimitive.Root>\n );\n },\n);\n\nButtonSwitchContainerVanillaImpl.displayName = 'ButtonSwitchContainerVanilla';\n\nexport const ButtonSwitchContainerVanilla =\n ButtonSwitchContainerVanillaImpl as ButtonSwitchContainerVanillaComponent;\n\n// Item Component\ninterface ButtonSwitchItemOwnProps extends CSSProps {\n value: string;\n disabled?: boolean;\n}\n\nexport type ButtonSwitchItemVanillaProps<C extends ElementType = 'button'> =\n PolymorphicComponentProps<C, ButtonSwitchItemOwnProps>;\n\ntype ButtonSwitchItemVanillaComponent = PolymorphicComponent<\n 'button',\n ButtonSwitchItemVanillaProps<ElementType>\n>;\n\nconst ButtonSwitchItemVanillaImpl = forwardRef(\n <C extends ElementType = 'button'>(\n { as, className, css, style, children, ...props }: ButtonSwitchItemVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = (as || 'button') as any;\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 if (as) {\n return (\n <Component\n ref={ref}\n className={`${buttonSwitchItem} ${className || ''}`.trim()}\n style={mergedStyles}\n role=\"radio\"\n {...props}\n >\n {children}\n </Component>\n );\n }\n\n return (\n <ToggleGroupPrimitive.Item\n ref={ref as any}\n className={`${buttonSwitchItem} ${className || ''}`.trim()}\n style={mergedStyles}\n {...(props as any)}\n >\n {children}\n </ToggleGroupPrimitive.Item>\n );\n },\n);\n\nButtonSwitchItemVanillaImpl.displayName = 'ButtonSwitchItemVanilla';\n\nexport const ButtonSwitchItemVanilla =\n ButtonSwitchItemVanillaImpl as ButtonSwitchItemVanillaComponent;\n"],"mappings":";;;;;;;;;;AAkCA,IAAM,oCAAA,GAAA,MAAA,aAEF,EAAE,IAAI,WAAW,KAAK,OAAO,UAAU,GAAG,SAC1C,QACG;CACH,MAAM,YAAa,MAAM;CACzB,MAAM,EAAE,WAAW,qBAAA,wBAAwB;CAE3C,MAAM,EAAE,OAAO,WAAW,SAAS,iBAAA,eAAe,KAAK,OAAO;CAE9D,MAAM,eAAe;EACnB,GAAG;EACH,GAAG;EACH,IAAA,GAAA,yBAAA,kBAAoB,KAAK;EAC1B;CAED,IAAI,IACF,OACE,iBAAA,GAAA,kBAAA,KAAC,WAAD;EACO;EACL,WAAW,GAAG,iCAAA,sBAAsB,GAAG,aAAa,KAAK,MAAM;EAC/D,OAAO;EACP,MAAK;EACL,GAAI;EAEH;EACS,CAAA;CAIhB,OACE,iBAAA,GAAA,kBAAA,KAAC,6BAAqB,MAAtB;EACO;EACL,WAAW,GAAG,iCAAA,sBAAsB,GAAG,aAAa,KAAK,MAAM;EAC/D,OAAO;EACP,GAAK;EAEJ;EACyB,CAAA;EAGjC;AAED,iCAAiC,cAAc;AAE/C,IAAa,+BACX;AAgBF,IAAM,+BAAA,GAAA,MAAA,aAEF,EAAE,IAAI,WAAW,KAAK,OAAO,UAAU,GAAG,SAC1C,QACG;CACH,MAAM,YAAa,MAAM;CACzB,MAAM,EAAE,WAAW,qBAAA,wBAAwB;CAE3C,MAAM,EAAE,OAAO,WAAW,SAAS,iBAAA,eAAe,KAAK,OAAO;CAE9D,MAAM,eAAe;EACnB,GAAG;EACH,GAAG;EACH,IAAA,GAAA,yBAAA,kBAAoB,KAAK;EAC1B;CAED,IAAI,IACF,OACE,iBAAA,GAAA,kBAAA,KAAC,WAAD;EACO;EACL,WAAW,GAAG,iCAAA,iBAAiB,GAAG,aAAa,KAAK,MAAM;EAC1D,OAAO;EACP,MAAK;EACL,GAAI;EAEH;EACS,CAAA;CAIhB,OACE,iBAAA,GAAA,kBAAA,KAAC,6BAAqB,MAAtB;EACO;EACL,WAAW,GAAG,iCAAA,iBAAiB,GAAG,aAAa,KAAK,MAAM;EAC1D,OAAO;EACP,GAAK;EAEJ;EACyB,CAAA;EAGjC;AAED,4BAA4B,cAAc;AAE1C,IAAa,0BACX"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonSwitch.vanilla.js","names":[],"sources":["../../../components/ButtonSwitch/ButtonSwitch.vanilla.tsx"],"sourcesContent":["import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';\nimport { 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 { buttonSwitchContainer, buttonSwitchItem } from './ButtonSwitch.vanilla.css';\n\n// Container Component\ninterface ButtonSwitchContainerOwnProps extends CSSProps {\n type?: 'single' | 'multiple';\n value?: string | string[];\n defaultValue?: string | string[];\n onValueChange?: (value: any) => void;\n disabled?: boolean;\n rovingFocus?: boolean;\n loop?: boolean;\n orientation?: 'horizontal' | 'vertical';\n dir?: 'ltr' | 'rtl';\n}\n\nexport type ButtonSwitchContainerVanillaProps<C extends ElementType = 'div'> =\n PolymorphicComponentProps<C, ButtonSwitchContainerOwnProps>;\n\ntype ButtonSwitchContainerVanillaComponent = PolymorphicComponent<\n 'div',\n ButtonSwitchContainerVanillaProps<ElementType>\n>;\n\nconst ButtonSwitchContainerVanillaImpl = forwardRef(\n <C extends ElementType = 'div'>(\n { as, className, css, style, children, ...props }: ButtonSwitchContainerVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = (as || 'div') as any;\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 if (as) {\n return (\n <Component\n ref={ref}\n className={`${buttonSwitchContainer} ${className || ''}`.trim()}\n style={mergedStyles}\n role=\"group\"\n {...props}\n >\n {children}\n </Component>\n );\n }\n\n return (\n <ToggleGroupPrimitive.Root\n ref={ref as any}\n className={`${buttonSwitchContainer} ${className || ''}`.trim()}\n style={mergedStyles}\n {...(props as any)}\n >\n {children}\n </ToggleGroupPrimitive.Root>\n );\n },\n);\n\nButtonSwitchContainerVanillaImpl.displayName = 'ButtonSwitchContainerVanilla';\n\nexport const ButtonSwitchContainerVanilla =\n ButtonSwitchContainerVanillaImpl as ButtonSwitchContainerVanillaComponent;\n\n// Item Component\ninterface ButtonSwitchItemOwnProps extends CSSProps {\n value: string;\n disabled?: boolean;\n}\n\nexport type ButtonSwitchItemVanillaProps<C extends ElementType = 'button'> =\n PolymorphicComponentProps<C, ButtonSwitchItemOwnProps>;\n\ntype ButtonSwitchItemVanillaComponent = PolymorphicComponent<\n 'button',\n ButtonSwitchItemVanillaProps<ElementType>\n>;\n\nconst ButtonSwitchItemVanillaImpl = forwardRef(\n <C extends ElementType = 'button'>(\n { as, className, css, style, children, ...props }: ButtonSwitchItemVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = (as || 'button') as any;\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 if (as) {\n return (\n <Component\n ref={ref}\n className={`${buttonSwitchItem} ${className || ''}`.trim()}\n style={mergedStyles}\n role=\"radio\"\n {...props}\n >\n {children}\n </Component>\n );\n }\n\n return (\n <ToggleGroupPrimitive.Item\n ref={ref as any}\n className={`${buttonSwitchItem} ${className || ''}`.trim()}\n style={mergedStyles}\n {...(props as any)}\n >\n {children}\n </ToggleGroupPrimitive.Item>\n );\n },\n);\n\nButtonSwitchItemVanillaImpl.displayName = 'ButtonSwitchItemVanilla';\n\nexport const ButtonSwitchItemVanilla =\n ButtonSwitchItemVanillaImpl as ButtonSwitchItemVanillaComponent;\n"],"mappings":";;;;;;;;AAkCA,IAAM,mCAAmC,YAErC,EAAE,IAAI,WAAW,KAAK,OAAO,UAAU,GAAG,SAC1C,QACG;CACH,MAAM,YAAa,MAAM;CACzB,MAAM,EAAE,WAAW,wBAAwB;CAE3C,MAAM,EAAE,OAAO,WAAW,SAAS,eAAe,KAAK,OAAO;CAE9D,MAAM,eAAe;EACnB,GAAG;EACH,GAAG;EACH,GAAG,iBAAiB,KAAK;EAC1B;
|
|
1
|
+
{"version":3,"file":"ButtonSwitch.vanilla.js","names":[],"sources":["../../../components/ButtonSwitch/ButtonSwitch.vanilla.tsx"],"sourcesContent":["import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';\nimport { 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 { buttonSwitchContainer, buttonSwitchItem } from './ButtonSwitch.vanilla.css';\n\n// Container Component\ninterface ButtonSwitchContainerOwnProps extends CSSProps {\n type?: 'single' | 'multiple';\n value?: string | string[];\n defaultValue?: string | string[];\n onValueChange?: (value: any) => void;\n disabled?: boolean;\n rovingFocus?: boolean;\n loop?: boolean;\n orientation?: 'horizontal' | 'vertical';\n dir?: 'ltr' | 'rtl';\n}\n\nexport type ButtonSwitchContainerVanillaProps<C extends ElementType = 'div'> =\n PolymorphicComponentProps<C, ButtonSwitchContainerOwnProps>;\n\ntype ButtonSwitchContainerVanillaComponent = PolymorphicComponent<\n 'div',\n ButtonSwitchContainerVanillaProps<ElementType>\n>;\n\nconst ButtonSwitchContainerVanillaImpl = forwardRef(\n <C extends ElementType = 'div'>(\n { as, className, css, style, children, ...props }: ButtonSwitchContainerVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = (as || 'div') as any;\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 if (as) {\n return (\n <Component\n ref={ref}\n className={`${buttonSwitchContainer} ${className || ''}`.trim()}\n style={mergedStyles}\n role=\"group\"\n {...props}\n >\n {children}\n </Component>\n );\n }\n\n return (\n <ToggleGroupPrimitive.Root\n ref={ref as any}\n className={`${buttonSwitchContainer} ${className || ''}`.trim()}\n style={mergedStyles}\n {...(props as any)}\n >\n {children}\n </ToggleGroupPrimitive.Root>\n );\n },\n);\n\nButtonSwitchContainerVanillaImpl.displayName = 'ButtonSwitchContainerVanilla';\n\nexport const ButtonSwitchContainerVanilla =\n ButtonSwitchContainerVanillaImpl as ButtonSwitchContainerVanillaComponent;\n\n// Item Component\ninterface ButtonSwitchItemOwnProps extends CSSProps {\n value: string;\n disabled?: boolean;\n}\n\nexport type ButtonSwitchItemVanillaProps<C extends ElementType = 'button'> =\n PolymorphicComponentProps<C, ButtonSwitchItemOwnProps>;\n\ntype ButtonSwitchItemVanillaComponent = PolymorphicComponent<\n 'button',\n ButtonSwitchItemVanillaProps<ElementType>\n>;\n\nconst ButtonSwitchItemVanillaImpl = forwardRef(\n <C extends ElementType = 'button'>(\n { as, className, css, style, children, ...props }: ButtonSwitchItemVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = (as || 'button') as any;\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 if (as) {\n return (\n <Component\n ref={ref}\n className={`${buttonSwitchItem} ${className || ''}`.trim()}\n style={mergedStyles}\n role=\"radio\"\n {...props}\n >\n {children}\n </Component>\n );\n }\n\n return (\n <ToggleGroupPrimitive.Item\n ref={ref as any}\n className={`${buttonSwitchItem} ${className || ''}`.trim()}\n style={mergedStyles}\n {...(props as any)}\n >\n {children}\n </ToggleGroupPrimitive.Item>\n );\n },\n);\n\nButtonSwitchItemVanillaImpl.displayName = 'ButtonSwitchItemVanilla';\n\nexport const ButtonSwitchItemVanilla =\n ButtonSwitchItemVanillaImpl as ButtonSwitchItemVanillaComponent;\n"],"mappings":";;;;;;;;AAkCA,IAAM,mCAAmC,YAErC,EAAE,IAAI,WAAW,KAAK,OAAO,UAAU,GAAG,SAC1C,QACG;CACH,MAAM,YAAa,MAAM;CACzB,MAAM,EAAE,WAAW,wBAAwB;CAE3C,MAAM,EAAE,OAAO,WAAW,SAAS,eAAe,KAAK,OAAO;CAE9D,MAAM,eAAe;EACnB,GAAG;EACH,GAAG;EACH,GAAG,iBAAiB,KAAK;EAC1B;CAED,IAAI,IACF,OACE,oBAAC,WAAD;EACO;EACL,WAAW,GAAG,sBAAsB,GAAG,aAAa,KAAK,MAAM;EAC/D,OAAO;EACP,MAAK;EACL,GAAI;EAEH;EACS,CAAA;CAIhB,OACE,oBAAC,qBAAqB,MAAtB;EACO;EACL,WAAW,GAAG,sBAAsB,GAAG,aAAa,KAAK,MAAM;EAC/D,OAAO;EACP,GAAK;EAEJ;EACyB,CAAA;EAGjC;AAED,iCAAiC,cAAc;AAE/C,IAAa,+BACX;AAgBF,IAAM,8BAA8B,YAEhC,EAAE,IAAI,WAAW,KAAK,OAAO,UAAU,GAAG,SAC1C,QACG;CACH,MAAM,YAAa,MAAM;CACzB,MAAM,EAAE,WAAW,wBAAwB;CAE3C,MAAM,EAAE,OAAO,WAAW,SAAS,eAAe,KAAK,OAAO;CAE9D,MAAM,eAAe;EACnB,GAAG;EACH,GAAG;EACH,GAAG,iBAAiB,KAAK;EAC1B;CAED,IAAI,IACF,OACE,oBAAC,WAAD;EACO;EACL,WAAW,GAAG,iBAAiB,GAAG,aAAa,KAAK,MAAM;EAC1D,OAAO;EACP,MAAK;EACL,GAAI;EAEH;EACS,CAAA;CAIhB,OACE,oBAAC,qBAAqB,MAAtB;EACO;EACL,WAAW,GAAG,iBAAiB,GAAG,aAAa,KAAK,MAAM;EAC1D,OAAO;EACP,GAAK;EAEJ;EACyB,CAAA;EAGjC;AAED,4BAA4B,cAAc;AAE1C,IAAa,0BACX"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.cjs","names":[],"sources":["../../../components/Card/Card.tsx"],"sourcesContent":["import React, { ComponentProps, ElementRef } from 'react';\n\nimport { styled, VariantProps } from '../../stitches.config';\nimport { elevationVariants } from '../Elevation/Elevation';\n\nconst StyledCard = styled('div', {\n appearance: 'none',\n border: 'none',\n boxSizing: 'border-box',\n font: 'inherit',\n lineHeight: '1',\n outline: 'none',\n padding: '$3',\n textAlign: 'inherit',\n verticalAlign: 'middle',\n WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',\n\n backgroundColor: '$cardBackground',\n display: 'block',\n textDecoration: 'none',\n color: 'inherit',\n borderRadius: '$3',\n position: 'relative',\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 pointerEvents: 'none',\n },\n\n variants: {\n elevation: elevationVariants,\n variant: {\n inner: {\n backgroundColor: '$innerCardBgColor',\n },\n ghost: {\n backgroundColor: 'transparent',\n boxShadow: 'none',\n },\n },\n active: {\n true: {\n '&::before': {\n outline: '1px solid $colors$cardActiveBorder',\n backgroundColor: '$cardActiveBackground',\n },\n },\n },\n },\n defaultVariants: {\n elevation: 1,\n },\n});\n\nconst StyledInteractiveCard = styled('button', StyledCard, {\n '@hover': {\n '&:hover': {\n cursor: 'pointer',\n '&::before': {\n outline: '1px solid $colors$cardHoverBorder',\n backgroundColor: '$cardHoverBackground',\n },\n },\n },\n '&:focus': {\n outline: '2px solid $primary',\n },\n '&:active': {\n '&::before': {\n outline: '1px solid $colors$cardActiveBorder',\n backgroundColor: '$cardActiveBackground',\n },\n },\n});\n\nexport type CardVariantProps = ComponentProps<typeof StyledCard> &\n VariantProps<typeof StyledCard> & {\n interactive?: false;\n };\nexport type InteractiveCardProps = VariantProps<typeof StyledInteractiveCard> &\n ComponentProps<typeof StyledInteractiveCard> & {\n interactive: true;\n };\nexport type CardProps = CardVariantProps | InteractiveCardProps;\n\nexport const Card = React.forwardRef<ElementRef<typeof StyledCard>, CardProps>(\n ({ interactive, ...props }, forwardedRef) => {\n if (interactive) {\n return (\n <StyledInteractiveCard\n tabIndex={0}\n ref={forwardedRef as React.RefObject<HTMLButtonElement>}\n {...(props as InteractiveCardProps)}\n />\n );\n }\n return (\n <StyledCard\n ref={forwardedRef as React.RefObject<HTMLDivElement>}\n {...(props as CardVariantProps)}\n />\n );\n },\n);\n"],"mappings":";;;;;;;AAKA,IAAM,aAAa,wBAAA,OAAO,OAAO;CAC/B,YAAY;CACZ,QAAQ;CACR,WAAW;CACX,MAAM;CACN,YAAY;CACZ,SAAS;CACT,SAAS;CACT,WAAW;CACX,eAAe;CACf,yBAAyB;CAEzB,iBAAiB;CACjB,SAAS;CACT,gBAAgB;CAChB,OAAO;CACP,cAAc;CACd,UAAU;CAEV,aAAa;EACX,WAAW;EACX,SAAS;EACT,UAAU;EACV,KAAK;EACL,OAAO;EACP,QAAQ;EACR,MAAM;EACN,cAAc;EACd,eAAe;EAChB;CAED,UAAU;EACR,WAAW,kBAAA;EACX,SAAS;GACP,OAAO,EACL,iBAAiB,qBAClB;GACD,OAAO;IACL,iBAAiB;IACjB,WAAW;IACZ;GACF;EACD,QAAQ,EACN,MAAM,EACJ,aAAa;GACX,SAAS;GACT,iBAAiB;GAClB,EACF,EACF;EACF;CACD,iBAAiB,EACf,WAAW,GACZ;CACF,CAAC;AAEF,IAAM,wBAAwB,wBAAA,OAAO,UAAU,YAAY;CACzD,UAAU,EACR,WAAW;EACT,QAAQ;EACR,aAAa;GACX,SAAS;GACT,iBAAiB;GAClB;EACF,EACF;CACD,WAAW,EACT,SAAS,sBACV;CACD,YAAY,EACV,aAAa;EACX,SAAS;EACT,iBAAiB;EAClB,EACF;CACF,CAAC;AAYF,IAAa,OAAO,MAAA,QAAM,YACvB,EAAE,aAAa,GAAG,SAAS,iBAAiB;
|
|
1
|
+
{"version":3,"file":"Card.cjs","names":[],"sources":["../../../components/Card/Card.tsx"],"sourcesContent":["import React, { ComponentProps, ElementRef } from 'react';\n\nimport { styled, VariantProps } from '../../stitches.config';\nimport { elevationVariants } from '../Elevation/Elevation';\n\nconst StyledCard = styled('div', {\n appearance: 'none',\n border: 'none',\n boxSizing: 'border-box',\n font: 'inherit',\n lineHeight: '1',\n outline: 'none',\n padding: '$3',\n textAlign: 'inherit',\n verticalAlign: 'middle',\n WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',\n\n backgroundColor: '$cardBackground',\n display: 'block',\n textDecoration: 'none',\n color: 'inherit',\n borderRadius: '$3',\n position: 'relative',\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 pointerEvents: 'none',\n },\n\n variants: {\n elevation: elevationVariants,\n variant: {\n inner: {\n backgroundColor: '$innerCardBgColor',\n },\n ghost: {\n backgroundColor: 'transparent',\n boxShadow: 'none',\n },\n },\n active: {\n true: {\n '&::before': {\n outline: '1px solid $colors$cardActiveBorder',\n backgroundColor: '$cardActiveBackground',\n },\n },\n },\n },\n defaultVariants: {\n elevation: 1,\n },\n});\n\nconst StyledInteractiveCard = styled('button', StyledCard, {\n '@hover': {\n '&:hover': {\n cursor: 'pointer',\n '&::before': {\n outline: '1px solid $colors$cardHoverBorder',\n backgroundColor: '$cardHoverBackground',\n },\n },\n },\n '&:focus': {\n outline: '2px solid $primary',\n },\n '&:active': {\n '&::before': {\n outline: '1px solid $colors$cardActiveBorder',\n backgroundColor: '$cardActiveBackground',\n },\n },\n});\n\nexport type CardVariantProps = ComponentProps<typeof StyledCard> &\n VariantProps<typeof StyledCard> & {\n interactive?: false;\n };\nexport type InteractiveCardProps = VariantProps<typeof StyledInteractiveCard> &\n ComponentProps<typeof StyledInteractiveCard> & {\n interactive: true;\n };\nexport type CardProps = CardVariantProps | InteractiveCardProps;\n\nexport const Card = React.forwardRef<ElementRef<typeof StyledCard>, CardProps>(\n ({ interactive, ...props }, forwardedRef) => {\n if (interactive) {\n return (\n <StyledInteractiveCard\n tabIndex={0}\n ref={forwardedRef as React.RefObject<HTMLButtonElement>}\n {...(props as InteractiveCardProps)}\n />\n );\n }\n return (\n <StyledCard\n ref={forwardedRef as React.RefObject<HTMLDivElement>}\n {...(props as CardVariantProps)}\n />\n );\n },\n);\n"],"mappings":";;;;;;;AAKA,IAAM,aAAa,wBAAA,OAAO,OAAO;CAC/B,YAAY;CACZ,QAAQ;CACR,WAAW;CACX,MAAM;CACN,YAAY;CACZ,SAAS;CACT,SAAS;CACT,WAAW;CACX,eAAe;CACf,yBAAyB;CAEzB,iBAAiB;CACjB,SAAS;CACT,gBAAgB;CAChB,OAAO;CACP,cAAc;CACd,UAAU;CAEV,aAAa;EACX,WAAW;EACX,SAAS;EACT,UAAU;EACV,KAAK;EACL,OAAO;EACP,QAAQ;EACR,MAAM;EACN,cAAc;EACd,eAAe;EAChB;CAED,UAAU;EACR,WAAW,kBAAA;EACX,SAAS;GACP,OAAO,EACL,iBAAiB,qBAClB;GACD,OAAO;IACL,iBAAiB;IACjB,WAAW;IACZ;GACF;EACD,QAAQ,EACN,MAAM,EACJ,aAAa;GACX,SAAS;GACT,iBAAiB;GAClB,EACF,EACF;EACF;CACD,iBAAiB,EACf,WAAW,GACZ;CACF,CAAC;AAEF,IAAM,wBAAwB,wBAAA,OAAO,UAAU,YAAY;CACzD,UAAU,EACR,WAAW;EACT,QAAQ;EACR,aAAa;GACX,SAAS;GACT,iBAAiB;GAClB;EACF,EACF;CACD,WAAW,EACT,SAAS,sBACV;CACD,YAAY,EACV,aAAa;EACX,SAAS;EACT,iBAAiB;EAClB,EACF;CACF,CAAC;AAYF,IAAa,OAAO,MAAA,QAAM,YACvB,EAAE,aAAa,GAAG,SAAS,iBAAiB;CAC3C,IAAI,aACF,OACE,iBAAA,GAAA,kBAAA,KAAC,uBAAD;EACE,UAAU;EACV,KAAK;EACL,GAAK;EACL,CAAA;CAGN,OACE,iBAAA,GAAA,kBAAA,KAAC,YAAD;EACE,KAAK;EACL,GAAK;EACL,CAAA;EAGP"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.js","names":[],"sources":["../../../components/Card/Card.tsx"],"sourcesContent":["import React, { ComponentProps, ElementRef } from 'react';\n\nimport { styled, VariantProps } from '../../stitches.config';\nimport { elevationVariants } from '../Elevation/Elevation';\n\nconst StyledCard = styled('div', {\n appearance: 'none',\n border: 'none',\n boxSizing: 'border-box',\n font: 'inherit',\n lineHeight: '1',\n outline: 'none',\n padding: '$3',\n textAlign: 'inherit',\n verticalAlign: 'middle',\n WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',\n\n backgroundColor: '$cardBackground',\n display: 'block',\n textDecoration: 'none',\n color: 'inherit',\n borderRadius: '$3',\n position: 'relative',\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 pointerEvents: 'none',\n },\n\n variants: {\n elevation: elevationVariants,\n variant: {\n inner: {\n backgroundColor: '$innerCardBgColor',\n },\n ghost: {\n backgroundColor: 'transparent',\n boxShadow: 'none',\n },\n },\n active: {\n true: {\n '&::before': {\n outline: '1px solid $colors$cardActiveBorder',\n backgroundColor: '$cardActiveBackground',\n },\n },\n },\n },\n defaultVariants: {\n elevation: 1,\n },\n});\n\nconst StyledInteractiveCard = styled('button', StyledCard, {\n '@hover': {\n '&:hover': {\n cursor: 'pointer',\n '&::before': {\n outline: '1px solid $colors$cardHoverBorder',\n backgroundColor: '$cardHoverBackground',\n },\n },\n },\n '&:focus': {\n outline: '2px solid $primary',\n },\n '&:active': {\n '&::before': {\n outline: '1px solid $colors$cardActiveBorder',\n backgroundColor: '$cardActiveBackground',\n },\n },\n});\n\nexport type CardVariantProps = ComponentProps<typeof StyledCard> &\n VariantProps<typeof StyledCard> & {\n interactive?: false;\n };\nexport type InteractiveCardProps = VariantProps<typeof StyledInteractiveCard> &\n ComponentProps<typeof StyledInteractiveCard> & {\n interactive: true;\n };\nexport type CardProps = CardVariantProps | InteractiveCardProps;\n\nexport const Card = React.forwardRef<ElementRef<typeof StyledCard>, CardProps>(\n ({ interactive, ...props }, forwardedRef) => {\n if (interactive) {\n return (\n <StyledInteractiveCard\n tabIndex={0}\n ref={forwardedRef as React.RefObject<HTMLButtonElement>}\n {...(props as InteractiveCardProps)}\n />\n );\n }\n return (\n <StyledCard\n ref={forwardedRef as React.RefObject<HTMLDivElement>}\n {...(props as CardVariantProps)}\n />\n );\n },\n);\n"],"mappings":";;;;;AAKA,IAAM,aAAa,OAAO,OAAO;CAC/B,YAAY;CACZ,QAAQ;CACR,WAAW;CACX,MAAM;CACN,YAAY;CACZ,SAAS;CACT,SAAS;CACT,WAAW;CACX,eAAe;CACf,yBAAyB;CAEzB,iBAAiB;CACjB,SAAS;CACT,gBAAgB;CAChB,OAAO;CACP,cAAc;CACd,UAAU;CAEV,aAAa;EACX,WAAW;EACX,SAAS;EACT,UAAU;EACV,KAAK;EACL,OAAO;EACP,QAAQ;EACR,MAAM;EACN,cAAc;EACd,eAAe;EAChB;CAED,UAAU;EACR,WAAW;EACX,SAAS;GACP,OAAO,EACL,iBAAiB,qBAClB;GACD,OAAO;IACL,iBAAiB;IACjB,WAAW;IACZ;GACF;EACD,QAAQ,EACN,MAAM,EACJ,aAAa;GACX,SAAS;GACT,iBAAiB;GAClB,EACF,EACF;EACF;CACD,iBAAiB,EACf,WAAW,GACZ;CACF,CAAC;AAEF,IAAM,wBAAwB,OAAO,UAAU,YAAY;CACzD,UAAU,EACR,WAAW;EACT,QAAQ;EACR,aAAa;GACX,SAAS;GACT,iBAAiB;GAClB;EACF,EACF;CACD,WAAW,EACT,SAAS,sBACV;CACD,YAAY,EACV,aAAa;EACX,SAAS;EACT,iBAAiB;EAClB,EACF;CACF,CAAC;AAYF,IAAa,OAAO,MAAM,YACvB,EAAE,aAAa,GAAG,SAAS,iBAAiB;
|
|
1
|
+
{"version":3,"file":"Card.js","names":[],"sources":["../../../components/Card/Card.tsx"],"sourcesContent":["import React, { ComponentProps, ElementRef } from 'react';\n\nimport { styled, VariantProps } from '../../stitches.config';\nimport { elevationVariants } from '../Elevation/Elevation';\n\nconst StyledCard = styled('div', {\n appearance: 'none',\n border: 'none',\n boxSizing: 'border-box',\n font: 'inherit',\n lineHeight: '1',\n outline: 'none',\n padding: '$3',\n textAlign: 'inherit',\n verticalAlign: 'middle',\n WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',\n\n backgroundColor: '$cardBackground',\n display: 'block',\n textDecoration: 'none',\n color: 'inherit',\n borderRadius: '$3',\n position: 'relative',\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 pointerEvents: 'none',\n },\n\n variants: {\n elevation: elevationVariants,\n variant: {\n inner: {\n backgroundColor: '$innerCardBgColor',\n },\n ghost: {\n backgroundColor: 'transparent',\n boxShadow: 'none',\n },\n },\n active: {\n true: {\n '&::before': {\n outline: '1px solid $colors$cardActiveBorder',\n backgroundColor: '$cardActiveBackground',\n },\n },\n },\n },\n defaultVariants: {\n elevation: 1,\n },\n});\n\nconst StyledInteractiveCard = styled('button', StyledCard, {\n '@hover': {\n '&:hover': {\n cursor: 'pointer',\n '&::before': {\n outline: '1px solid $colors$cardHoverBorder',\n backgroundColor: '$cardHoverBackground',\n },\n },\n },\n '&:focus': {\n outline: '2px solid $primary',\n },\n '&:active': {\n '&::before': {\n outline: '1px solid $colors$cardActiveBorder',\n backgroundColor: '$cardActiveBackground',\n },\n },\n});\n\nexport type CardVariantProps = ComponentProps<typeof StyledCard> &\n VariantProps<typeof StyledCard> & {\n interactive?: false;\n };\nexport type InteractiveCardProps = VariantProps<typeof StyledInteractiveCard> &\n ComponentProps<typeof StyledInteractiveCard> & {\n interactive: true;\n };\nexport type CardProps = CardVariantProps | InteractiveCardProps;\n\nexport const Card = React.forwardRef<ElementRef<typeof StyledCard>, CardProps>(\n ({ interactive, ...props }, forwardedRef) => {\n if (interactive) {\n return (\n <StyledInteractiveCard\n tabIndex={0}\n ref={forwardedRef as React.RefObject<HTMLButtonElement>}\n {...(props as InteractiveCardProps)}\n />\n );\n }\n return (\n <StyledCard\n ref={forwardedRef as React.RefObject<HTMLDivElement>}\n {...(props as CardVariantProps)}\n />\n );\n },\n);\n"],"mappings":";;;;;AAKA,IAAM,aAAa,OAAO,OAAO;CAC/B,YAAY;CACZ,QAAQ;CACR,WAAW;CACX,MAAM;CACN,YAAY;CACZ,SAAS;CACT,SAAS;CACT,WAAW;CACX,eAAe;CACf,yBAAyB;CAEzB,iBAAiB;CACjB,SAAS;CACT,gBAAgB;CAChB,OAAO;CACP,cAAc;CACd,UAAU;CAEV,aAAa;EACX,WAAW;EACX,SAAS;EACT,UAAU;EACV,KAAK;EACL,OAAO;EACP,QAAQ;EACR,MAAM;EACN,cAAc;EACd,eAAe;EAChB;CAED,UAAU;EACR,WAAW;EACX,SAAS;GACP,OAAO,EACL,iBAAiB,qBAClB;GACD,OAAO;IACL,iBAAiB;IACjB,WAAW;IACZ;GACF;EACD,QAAQ,EACN,MAAM,EACJ,aAAa;GACX,SAAS;GACT,iBAAiB;GAClB,EACF,EACF;EACF;CACD,iBAAiB,EACf,WAAW,GACZ;CACF,CAAC;AAEF,IAAM,wBAAwB,OAAO,UAAU,YAAY;CACzD,UAAU,EACR,WAAW;EACT,QAAQ;EACR,aAAa;GACX,SAAS;GACT,iBAAiB;GAClB;EACF,EACF;CACD,WAAW,EACT,SAAS,sBACV;CACD,YAAY,EACV,aAAa;EACX,SAAS;EACT,iBAAiB;EAClB,EACF;CACF,CAAC;AAYF,IAAa,OAAO,MAAM,YACvB,EAAE,aAAa,GAAG,SAAS,iBAAiB;CAC3C,IAAI,aACF,OACE,oBAAC,uBAAD;EACE,UAAU;EACV,KAAK;EACL,GAAK;EACL,CAAA;CAGN,OACE,oBAAC,YAAD;EACE,KAAK;EACL,GAAK;EACL,CAAA;EAGP"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.themes.cjs","names":[],"sources":["../../../components/Card/Card.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 type Colors = {\n cardBackground: Property.Color;\n cardBorder: Property.Color;\n cardShadow: Property.Color;\n cardHoverBackground: Property.Color;\n cardHoverBorder: Property.Color;\n cardActiveBackground: Property.Color;\n cardActiveBorder: Property.Color;\n cardGhostBackground: Property.Color;\n innerCardBgColor: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = (primaryColor) => ({\n cardBackground: 'white',\n cardBorder: '$deepBlue3',\n cardShadow: 'rgba(0,0,0,.1)',\n cardHoverBackground: 'rgba(0,0,0,.05)',\n cardHoverBorder: tinycolor(primaryColor.value).setAlpha(0.6).toHslString(),\n cardActiveBackground: 'rgba(0,0,0,.03)',\n cardActiveBorder: '$primary',\n cardGhostBackground: '$deepBlue2',\n innerCardBgColor: tinycolor('black').setAlpha(0.04).toHslString(),\n });\n\n export const getDark: Factory = (primaryColor) => ({\n cardBackground: '$deepBlue2',\n cardBorder: '$deepBlue3',\n cardShadow: 'transparent',\n cardHoverBackground: 'rgba(255,255,255,.12)',\n cardHoverBorder: tinycolor(primaryColor.value).setAlpha(0.6).toHslString(),\n cardActiveBackground: 'rgba(255,255,255,.07)',\n cardActiveBorder: tinycolor(primaryColor.value).setAlpha(0.4).toHslString(),\n cardGhostBackground: '$deepBlue1',\n innerCardBgColor: tinycolor('white').setAlpha(0.07).toHslString(),\n });\n}\n"],"mappings":";;;;AAKO,IAAA;;
|
|
1
|
+
{"version":3,"file":"Card.themes.cjs","names":[],"sources":["../../../components/Card/Card.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 type Colors = {\n cardBackground: Property.Color;\n cardBorder: Property.Color;\n cardShadow: Property.Color;\n cardHoverBackground: Property.Color;\n cardHoverBorder: Property.Color;\n cardActiveBackground: Property.Color;\n cardActiveBorder: Property.Color;\n cardGhostBackground: Property.Color;\n innerCardBgColor: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = (primaryColor) => ({\n cardBackground: 'white',\n cardBorder: '$deepBlue3',\n cardShadow: 'rgba(0,0,0,.1)',\n cardHoverBackground: 'rgba(0,0,0,.05)',\n cardHoverBorder: tinycolor(primaryColor.value).setAlpha(0.6).toHslString(),\n cardActiveBackground: 'rgba(0,0,0,.03)',\n cardActiveBorder: '$primary',\n cardGhostBackground: '$deepBlue2',\n innerCardBgColor: tinycolor('black').setAlpha(0.04).toHslString(),\n });\n\n export const getDark: Factory = (primaryColor) => ({\n cardBackground: '$deepBlue2',\n cardBorder: '$deepBlue3',\n cardShadow: 'transparent',\n cardHoverBackground: 'rgba(255,255,255,.12)',\n cardHoverBorder: tinycolor(primaryColor.value).setAlpha(0.6).toHslString(),\n cardActiveBackground: 'rgba(255,255,255,.07)',\n cardActiveBorder: tinycolor(primaryColor.value).setAlpha(0.4).toHslString(),\n cardGhostBackground: '$deepBlue1',\n innerCardBgColor: tinycolor('white').setAlpha(0.07).toHslString(),\n });\n}\n"],"mappings":";;;;AAKO,IAAA;;CAeQ,OAAA,YAAqB,kBAAkB;EAClD,gBAAgB;EAChB,YAAY;EACZ,YAAY;EACZ,qBAAqB;EACrB,kBAAA,GAAA,WAAA,SAA2B,aAAa,MAAM,CAAC,SAAS,GAAI,CAAC,aAAa;EAC1E,sBAAsB;EACtB,kBAAkB;EAClB,qBAAqB;EACrB,mBAAA,GAAA,WAAA,SAA4B,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAClE;CAEY,OAAA,WAAoB,kBAAkB;EACjD,gBAAgB;EAChB,YAAY;EACZ,YAAY;EACZ,qBAAqB;EACrB,kBAAA,GAAA,WAAA,SAA2B,aAAa,MAAM,CAAC,SAAS,GAAI,CAAC,aAAa;EAC1E,sBAAsB;EACtB,mBAAA,GAAA,WAAA,SAA4B,aAAa,MAAM,CAAC,SAAS,GAAI,CAAC,aAAa;EAC3E,qBAAqB;EACrB,mBAAA,GAAA,WAAA,SAA4B,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAClE;yBACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.themes.js","names":[],"sources":["../../../components/Card/Card.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 type Colors = {\n cardBackground: Property.Color;\n cardBorder: Property.Color;\n cardShadow: Property.Color;\n cardHoverBackground: Property.Color;\n cardHoverBorder: Property.Color;\n cardActiveBackground: Property.Color;\n cardActiveBorder: Property.Color;\n cardGhostBackground: Property.Color;\n innerCardBgColor: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = (primaryColor) => ({\n cardBackground: 'white',\n cardBorder: '$deepBlue3',\n cardShadow: 'rgba(0,0,0,.1)',\n cardHoverBackground: 'rgba(0,0,0,.05)',\n cardHoverBorder: tinycolor(primaryColor.value).setAlpha(0.6).toHslString(),\n cardActiveBackground: 'rgba(0,0,0,.03)',\n cardActiveBorder: '$primary',\n cardGhostBackground: '$deepBlue2',\n innerCardBgColor: tinycolor('black').setAlpha(0.04).toHslString(),\n });\n\n export const getDark: Factory = (primaryColor) => ({\n cardBackground: '$deepBlue2',\n cardBorder: '$deepBlue3',\n cardShadow: 'transparent',\n cardHoverBackground: 'rgba(255,255,255,.12)',\n cardHoverBorder: tinycolor(primaryColor.value).setAlpha(0.6).toHslString(),\n cardActiveBackground: 'rgba(255,255,255,.07)',\n cardActiveBorder: tinycolor(primaryColor.value).setAlpha(0.4).toHslString(),\n cardGhostBackground: '$deepBlue1',\n innerCardBgColor: tinycolor('white').setAlpha(0.07).toHslString(),\n });\n}\n"],"mappings":";;AAKO,IAAA;;
|
|
1
|
+
{"version":3,"file":"Card.themes.js","names":[],"sources":["../../../components/Card/Card.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 type Colors = {\n cardBackground: Property.Color;\n cardBorder: Property.Color;\n cardShadow: Property.Color;\n cardHoverBackground: Property.Color;\n cardHoverBorder: Property.Color;\n cardActiveBackground: Property.Color;\n cardActiveBorder: Property.Color;\n cardGhostBackground: Property.Color;\n innerCardBgColor: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = (primaryColor) => ({\n cardBackground: 'white',\n cardBorder: '$deepBlue3',\n cardShadow: 'rgba(0,0,0,.1)',\n cardHoverBackground: 'rgba(0,0,0,.05)',\n cardHoverBorder: tinycolor(primaryColor.value).setAlpha(0.6).toHslString(),\n cardActiveBackground: 'rgba(0,0,0,.03)',\n cardActiveBorder: '$primary',\n cardGhostBackground: '$deepBlue2',\n innerCardBgColor: tinycolor('black').setAlpha(0.04).toHslString(),\n });\n\n export const getDark: Factory = (primaryColor) => ({\n cardBackground: '$deepBlue2',\n cardBorder: '$deepBlue3',\n cardShadow: 'transparent',\n cardHoverBackground: 'rgba(255,255,255,.12)',\n cardHoverBorder: tinycolor(primaryColor.value).setAlpha(0.6).toHslString(),\n cardActiveBackground: 'rgba(255,255,255,.07)',\n cardActiveBorder: tinycolor(primaryColor.value).setAlpha(0.4).toHslString(),\n cardGhostBackground: '$deepBlue1',\n innerCardBgColor: tinycolor('white').setAlpha(0.07).toHslString(),\n });\n}\n"],"mappings":";;AAKO,IAAA;;CAeQ,OAAA,YAAqB,kBAAkB;EAClD,gBAAgB;EAChB,YAAY;EACZ,YAAY;EACZ,qBAAqB;EACrB,iBAAiB,UAAU,aAAa,MAAM,CAAC,SAAS,GAAI,CAAC,aAAa;EAC1E,sBAAsB;EACtB,kBAAkB;EAClB,qBAAqB;EACrB,kBAAkB,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAClE;CAEY,OAAA,WAAoB,kBAAkB;EACjD,gBAAgB;EAChB,YAAY;EACZ,YAAY;EACZ,qBAAqB;EACrB,iBAAiB,UAAU,aAAa,MAAM,CAAC,SAAS,GAAI,CAAC,aAAa;EAC1E,sBAAsB;EACtB,kBAAkB,UAAU,aAAa,MAAM,CAAC,SAAS,GAAI,CAAC,aAAa;EAC3E,qBAAqB;EACrB,kBAAkB,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAClE;yBACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.vanilla.cjs","names":[],"sources":["../../../components/Card/Card.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 { cardRecipe, interactiveCardRecipe } from './Card.vanilla.css';\n\ntype CardRecipeVariants = NonNullable<RecipeVariants<typeof cardRecipe>>;\n\ninterface CardOwnProps extends CSSProps {\n elevation?: CardRecipeVariants['elevation'];\n variant?: CardRecipeVariants['variant'];\n active?: CardRecipeVariants['active'];\n interactive?: boolean;\n}\n\nexport type CardVanillaProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n C,\n CardOwnProps\n>;\n\ntype CardVanillaComponent = PolymorphicComponent<'div', CardVanillaProps<ElementType>>;\n\nconst CardVanillaComponentImpl = forwardRef(\n <C extends ElementType = 'div'>(\n {\n as,\n className,\n css,\n style,\n elevation,\n variant,\n active,\n interactive,\n ...props\n }: CardVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as || (interactive ? 'button' : 'div');\n const { colors } = useVanillaExtractTheme();\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n const mergedStyles = { ...cssStyles, ...style, ...assignInlineVars(vars) };\n\n const recipe = interactive ? interactiveCardRecipe : cardRecipe;\n const recipeClass = recipe({ elevation, variant, active });\n\n const additionalProps = interactive && !as ? { tabIndex: 0 } : {};\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className || ''}`.trim()}\n style={mergedStyles}\n {...additionalProps}\n {...props}\n />\n );\n },\n);\n\nCardVanillaComponentImpl.displayName = 'CardVanilla';\n\nexport const CardVanilla = CardVanillaComponentImpl as CardVanillaComponent;\n"],"mappings":";;;;;;;;AA6BA,IAAM,4BAAA,GAAA,MAAA,aAEF,EACE,IACA,WACA,KACA,OACA,WACA,SACA,QACA,aACA,GAAG,SAEL,QACG;CACH,MAAM,YAAY,OAAO,cAAc,WAAW;CAClD,MAAM,EAAE,WAAW,qBAAA,wBAAwB;CAC3C,MAAM,EAAE,OAAO,WAAW,SAAS,iBAAA,eAAe,KAAK,OAAO;CAC9D,MAAM,eAAe;EAAE,GAAG;EAAW,GAAG;EAAO,IAAA,GAAA,yBAAA,kBAAoB,KAAK;EAAE;CAG1E,MAAM,eADS,cAAc,yBAAA,wBAAwB,yBAAA,YAC1B;EAAE;EAAW;EAAS;EAAQ,CAAC;CAE1D,MAAM,kBAAkB,eAAe,CAAC,KAAK,EAAE,UAAU,GAAG,GAAG,EAAE;
|
|
1
|
+
{"version":3,"file":"Card.vanilla.cjs","names":[],"sources":["../../../components/Card/Card.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 { cardRecipe, interactiveCardRecipe } from './Card.vanilla.css';\n\ntype CardRecipeVariants = NonNullable<RecipeVariants<typeof cardRecipe>>;\n\ninterface CardOwnProps extends CSSProps {\n elevation?: CardRecipeVariants['elevation'];\n variant?: CardRecipeVariants['variant'];\n active?: CardRecipeVariants['active'];\n interactive?: boolean;\n}\n\nexport type CardVanillaProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n C,\n CardOwnProps\n>;\n\ntype CardVanillaComponent = PolymorphicComponent<'div', CardVanillaProps<ElementType>>;\n\nconst CardVanillaComponentImpl = forwardRef(\n <C extends ElementType = 'div'>(\n {\n as,\n className,\n css,\n style,\n elevation,\n variant,\n active,\n interactive,\n ...props\n }: CardVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as || (interactive ? 'button' : 'div');\n const { colors } = useVanillaExtractTheme();\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n const mergedStyles = { ...cssStyles, ...style, ...assignInlineVars(vars) };\n\n const recipe = interactive ? interactiveCardRecipe : cardRecipe;\n const recipeClass = recipe({ elevation, variant, active });\n\n const additionalProps = interactive && !as ? { tabIndex: 0 } : {};\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className || ''}`.trim()}\n style={mergedStyles}\n {...additionalProps}\n {...props}\n />\n );\n },\n);\n\nCardVanillaComponentImpl.displayName = 'CardVanilla';\n\nexport const CardVanilla = CardVanillaComponentImpl as CardVanillaComponent;\n"],"mappings":";;;;;;;;AA6BA,IAAM,4BAAA,GAAA,MAAA,aAEF,EACE,IACA,WACA,KACA,OACA,WACA,SACA,QACA,aACA,GAAG,SAEL,QACG;CACH,MAAM,YAAY,OAAO,cAAc,WAAW;CAClD,MAAM,EAAE,WAAW,qBAAA,wBAAwB;CAC3C,MAAM,EAAE,OAAO,WAAW,SAAS,iBAAA,eAAe,KAAK,OAAO;CAC9D,MAAM,eAAe;EAAE,GAAG;EAAW,GAAG;EAAO,IAAA,GAAA,yBAAA,kBAAoB,KAAK;EAAE;CAG1E,MAAM,eADS,cAAc,yBAAA,wBAAwB,yBAAA,YAC1B;EAAE;EAAW;EAAS;EAAQ,CAAC;CAE1D,MAAM,kBAAkB,eAAe,CAAC,KAAK,EAAE,UAAU,GAAG,GAAG,EAAE;CAEjE,OACE,iBAAA,GAAA,kBAAA,KAAC,WAAD;EACO;EACL,WAAW,GAAG,YAAY,GAAG,aAAa,KAAK,MAAM;EACrD,OAAO;EACP,GAAI;EACJ,GAAI;EACJ,CAAA;EAGP;AAED,yBAAyB,cAAc;AAEvC,IAAa,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.vanilla.js","names":[],"sources":["../../../components/Card/Card.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 { cardRecipe, interactiveCardRecipe } from './Card.vanilla.css';\n\ntype CardRecipeVariants = NonNullable<RecipeVariants<typeof cardRecipe>>;\n\ninterface CardOwnProps extends CSSProps {\n elevation?: CardRecipeVariants['elevation'];\n variant?: CardRecipeVariants['variant'];\n active?: CardRecipeVariants['active'];\n interactive?: boolean;\n}\n\nexport type CardVanillaProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n C,\n CardOwnProps\n>;\n\ntype CardVanillaComponent = PolymorphicComponent<'div', CardVanillaProps<ElementType>>;\n\nconst CardVanillaComponentImpl = forwardRef(\n <C extends ElementType = 'div'>(\n {\n as,\n className,\n css,\n style,\n elevation,\n variant,\n active,\n interactive,\n ...props\n }: CardVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as || (interactive ? 'button' : 'div');\n const { colors } = useVanillaExtractTheme();\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n const mergedStyles = { ...cssStyles, ...style, ...assignInlineVars(vars) };\n\n const recipe = interactive ? interactiveCardRecipe : cardRecipe;\n const recipeClass = recipe({ elevation, variant, active });\n\n const additionalProps = interactive && !as ? { tabIndex: 0 } : {};\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className || ''}`.trim()}\n style={mergedStyles}\n {...additionalProps}\n {...props}\n />\n );\n },\n);\n\nCardVanillaComponentImpl.displayName = 'CardVanilla';\n\nexport const CardVanilla = CardVanillaComponentImpl as CardVanillaComponent;\n"],"mappings":";;;;;;;AA6BA,IAAM,2BAA2B,YAE7B,EACE,IACA,WACA,KACA,OACA,WACA,SACA,QACA,aACA,GAAG,SAEL,QACG;CACH,MAAM,YAAY,OAAO,cAAc,WAAW;CAClD,MAAM,EAAE,WAAW,wBAAwB;CAC3C,MAAM,EAAE,OAAO,WAAW,SAAS,eAAe,KAAK,OAAO;CAC9D,MAAM,eAAe;EAAE,GAAG;EAAW,GAAG;EAAO,GAAG,iBAAiB,KAAK;EAAE;CAG1E,MAAM,eADS,cAAc,wBAAwB,YAC1B;EAAE;EAAW;EAAS;EAAQ,CAAC;CAE1D,MAAM,kBAAkB,eAAe,CAAC,KAAK,EAAE,UAAU,GAAG,GAAG,EAAE;
|
|
1
|
+
{"version":3,"file":"Card.vanilla.js","names":[],"sources":["../../../components/Card/Card.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 { cardRecipe, interactiveCardRecipe } from './Card.vanilla.css';\n\ntype CardRecipeVariants = NonNullable<RecipeVariants<typeof cardRecipe>>;\n\ninterface CardOwnProps extends CSSProps {\n elevation?: CardRecipeVariants['elevation'];\n variant?: CardRecipeVariants['variant'];\n active?: CardRecipeVariants['active'];\n interactive?: boolean;\n}\n\nexport type CardVanillaProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n C,\n CardOwnProps\n>;\n\ntype CardVanillaComponent = PolymorphicComponent<'div', CardVanillaProps<ElementType>>;\n\nconst CardVanillaComponentImpl = forwardRef(\n <C extends ElementType = 'div'>(\n {\n as,\n className,\n css,\n style,\n elevation,\n variant,\n active,\n interactive,\n ...props\n }: CardVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as || (interactive ? 'button' : 'div');\n const { colors } = useVanillaExtractTheme();\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n const mergedStyles = { ...cssStyles, ...style, ...assignInlineVars(vars) };\n\n const recipe = interactive ? interactiveCardRecipe : cardRecipe;\n const recipeClass = recipe({ elevation, variant, active });\n\n const additionalProps = interactive && !as ? { tabIndex: 0 } : {};\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className || ''}`.trim()}\n style={mergedStyles}\n {...additionalProps}\n {...props}\n />\n );\n },\n);\n\nCardVanillaComponentImpl.displayName = 'CardVanilla';\n\nexport const CardVanilla = CardVanillaComponentImpl as CardVanillaComponent;\n"],"mappings":";;;;;;;AA6BA,IAAM,2BAA2B,YAE7B,EACE,IACA,WACA,KACA,OACA,WACA,SACA,QACA,aACA,GAAG,SAEL,QACG;CACH,MAAM,YAAY,OAAO,cAAc,WAAW;CAClD,MAAM,EAAE,WAAW,wBAAwB;CAC3C,MAAM,EAAE,OAAO,WAAW,SAAS,eAAe,KAAK,OAAO;CAC9D,MAAM,eAAe;EAAE,GAAG;EAAW,GAAG;EAAO,GAAG,iBAAiB,KAAK;EAAE;CAG1E,MAAM,eADS,cAAc,wBAAwB,YAC1B;EAAE;EAAW;EAAS;EAAQ,CAAC;CAE1D,MAAM,kBAAkB,eAAe,CAAC,KAAK,EAAE,UAAU,GAAG,GAAG,EAAE;CAEjE,OACE,oBAAC,WAAD;EACO;EACL,WAAW,GAAG,YAAY,GAAG,aAAa,KAAK,MAAM;EACrD,OAAO;EACP,GAAI;EACJ,GAAI;EACJ,CAAA;EAGP;AAED,yBAAyB,cAAc;AAEvC,IAAa,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.cjs","names":[],"sources":["../../../components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { CheckIcon } from '@radix-ui/react-icons';\nimport React from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\n\nconst StyledIndicator = styled(CheckboxPrimitive.Indicator, {\n alignItems: 'center',\n display: 'flex',\n height: '100%',\n justifyContent: 'center',\n width: '100%',\n});\n\nconst StyledCheckbox = styled(CheckboxPrimitive.Root, {\n all: 'unset',\n border: 'none',\n boxSizing: 'border-box',\n userSelect: 'none',\n '&::before': {\n boxSizing: 'border-box',\n },\n '&::after': {\n boxSizing: 'border-box',\n },\n\n alignItems: 'center',\n appearance: 'none',\n display: 'inline-flex',\n justifyContent: 'center',\n lineHeight: '1',\n margin: '0',\n outline: 'none',\n padding: '0',\n WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n overflow: 'hidden',\n\n '&[data-state=checked]': {\n backgroundColor: '$checkboxCheckedBg',\n boxShadow: 'inset 0 0 0 1px transparent',\n color: '$checkboxCheckedIcon',\n\n '@hover': {\n '&:hover': {\n backgroundColor: '$checkboxCheckedHoverBg',\n },\n },\n },\n\n '&[data-state=unchecked]': {\n backgroundColor: '$checkboxBg',\n boxShadow: 'inset 0 0 0 1px $colors$checkboxBorder',\n color: '$checkboxIcon',\n\n '@hover': {\n '&:hover': {\n backgroundColor: '$checkboxHoverBg',\n boxShadow: 'inset 0 0 0 1px $colors$checkboxHoverBorder',\n },\n },\n },\n\n '&:focus': {\n outline: 'none',\n boxShadow: 'inset 0 0 0 1px $colors$checkboxFocusBorder',\n },\n\n '&:disabled': {\n pointerEvents: 'none',\n backgroundColor: '$checkboxDisabledBg',\n boxShadow: 'inset 0 0 0 1px $colors$checkboxDisabledBorder',\n '&::placeholder': {\n color: '$checkboxDisabledText',\n },\n\n [`& ${StyledIndicator}`]: {\n '&::after': {\n backgroundColor: '$checkboxIndicatorDisabledBg',\n },\n },\n },\n\n variants: {\n size: {\n medium: {\n width: 18,\n height: 18,\n borderRadius: '$2',\n },\n large: {\n width: '$5',\n height: '$5',\n borderRadius: '$3',\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n },\n});\n\ntype CheckboxPrimitiveProps = Omit<React.ComponentProps<typeof CheckboxPrimitive.Root>, 'as'>;\nexport type CheckboxVariants = VariantProps<typeof StyledCheckbox>;\nexport type CheckboxProps = CheckboxPrimitiveProps & CheckboxVariants & { css?: CSS };\n\nexport const Checkbox = React.forwardRef<React.ElementRef<typeof StyledCheckbox>, CheckboxProps>(\n (props, forwardedRef) => {\n return (\n <StyledCheckbox {...props} ref={forwardedRef}>\n <StyledIndicator>\n <CheckIcon height={40} width={40} />\n </StyledIndicator>\n </StyledCheckbox>\n );\n }\n);\n"],"mappings":";;;;;;;;;AAMA,IAAM,kBAAkB,wBAAA,OAAO,yBAAkB,WAAW;CAC1D,YAAY;CACZ,SAAS;CACT,QAAQ;CACR,gBAAgB;CAChB,OAAO;CACR,CAAC;AAEF,IAAM,iBAAiB,wBAAA,OAAO,yBAAkB,MAAM;CACpD,KAAK;CACL,QAAQ;CACR,WAAW;CACX,YAAY;CACZ,aAAa,EACX,WAAW,cACZ;CACD,YAAY,EACV,WAAW,cACZ;CAED,YAAY;CACZ,YAAY;CACZ,SAAS;CACT,gBAAgB;CAChB,YAAY;CACZ,QAAQ;CACR,SAAS;CACT,SAAS;CACT,yBAAyB;CACzB,UAAU;CAEV,yBAAyB;EACvB,iBAAiB;EACjB,WAAW;EACX,OAAO;EAEP,UAAU,EACR,WAAW,EACT,iBAAiB,2BAClB,EACF;EACF;CAED,2BAA2B;EACzB,iBAAiB;EACjB,WAAW;EACX,OAAO;EAEP,UAAU,EACR,WAAW;GACT,iBAAiB;GACjB,WAAW;GACZ,EACF;EACF;CAED,WAAW;EACT,SAAS;EACT,WAAW;EACZ;CAED,cAAc;EACZ,eAAe;EACf,iBAAiB;EACjB,WAAW;EACX,kBAAkB,EAChB,OAAO,yBACR;GAEA,KAAK,oBAAoB,EACxB,YAAY,EACV,iBAAiB,gCAClB,EACF;EACF;CAED,UAAU,EACR,MAAM;EACJ,QAAQ;GACN,OAAO;GACP,QAAQ;GACR,cAAc;GACf;EACD,OAAO;GACL,OAAO;GACP,QAAQ;GACR,cAAc;GACf;EACF,EACF;CACD,iBAAiB,EACf,MAAM,UACP;CACF,CAAC;AAMF,IAAa,WAAW,MAAA,QAAM,YAC3B,OAAO,iBAAiB;
|
|
1
|
+
{"version":3,"file":"Checkbox.cjs","names":[],"sources":["../../../components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { CheckIcon } from '@radix-ui/react-icons';\nimport React from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\n\nconst StyledIndicator = styled(CheckboxPrimitive.Indicator, {\n alignItems: 'center',\n display: 'flex',\n height: '100%',\n justifyContent: 'center',\n width: '100%',\n});\n\nconst StyledCheckbox = styled(CheckboxPrimitive.Root, {\n all: 'unset',\n border: 'none',\n boxSizing: 'border-box',\n userSelect: 'none',\n '&::before': {\n boxSizing: 'border-box',\n },\n '&::after': {\n boxSizing: 'border-box',\n },\n\n alignItems: 'center',\n appearance: 'none',\n display: 'inline-flex',\n justifyContent: 'center',\n lineHeight: '1',\n margin: '0',\n outline: 'none',\n padding: '0',\n WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n overflow: 'hidden',\n\n '&[data-state=checked]': {\n backgroundColor: '$checkboxCheckedBg',\n boxShadow: 'inset 0 0 0 1px transparent',\n color: '$checkboxCheckedIcon',\n\n '@hover': {\n '&:hover': {\n backgroundColor: '$checkboxCheckedHoverBg',\n },\n },\n },\n\n '&[data-state=unchecked]': {\n backgroundColor: '$checkboxBg',\n boxShadow: 'inset 0 0 0 1px $colors$checkboxBorder',\n color: '$checkboxIcon',\n\n '@hover': {\n '&:hover': {\n backgroundColor: '$checkboxHoverBg',\n boxShadow: 'inset 0 0 0 1px $colors$checkboxHoverBorder',\n },\n },\n },\n\n '&:focus': {\n outline: 'none',\n boxShadow: 'inset 0 0 0 1px $colors$checkboxFocusBorder',\n },\n\n '&:disabled': {\n pointerEvents: 'none',\n backgroundColor: '$checkboxDisabledBg',\n boxShadow: 'inset 0 0 0 1px $colors$checkboxDisabledBorder',\n '&::placeholder': {\n color: '$checkboxDisabledText',\n },\n\n [`& ${StyledIndicator}`]: {\n '&::after': {\n backgroundColor: '$checkboxIndicatorDisabledBg',\n },\n },\n },\n\n variants: {\n size: {\n medium: {\n width: 18,\n height: 18,\n borderRadius: '$2',\n },\n large: {\n width: '$5',\n height: '$5',\n borderRadius: '$3',\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n },\n});\n\ntype CheckboxPrimitiveProps = Omit<React.ComponentProps<typeof CheckboxPrimitive.Root>, 'as'>;\nexport type CheckboxVariants = VariantProps<typeof StyledCheckbox>;\nexport type CheckboxProps = CheckboxPrimitiveProps & CheckboxVariants & { css?: CSS };\n\nexport const Checkbox = React.forwardRef<React.ElementRef<typeof StyledCheckbox>, CheckboxProps>(\n (props, forwardedRef) => {\n return (\n <StyledCheckbox {...props} ref={forwardedRef}>\n <StyledIndicator>\n <CheckIcon height={40} width={40} />\n </StyledIndicator>\n </StyledCheckbox>\n );\n }\n);\n"],"mappings":";;;;;;;;;AAMA,IAAM,kBAAkB,wBAAA,OAAO,yBAAkB,WAAW;CAC1D,YAAY;CACZ,SAAS;CACT,QAAQ;CACR,gBAAgB;CAChB,OAAO;CACR,CAAC;AAEF,IAAM,iBAAiB,wBAAA,OAAO,yBAAkB,MAAM;CACpD,KAAK;CACL,QAAQ;CACR,WAAW;CACX,YAAY;CACZ,aAAa,EACX,WAAW,cACZ;CACD,YAAY,EACV,WAAW,cACZ;CAED,YAAY;CACZ,YAAY;CACZ,SAAS;CACT,gBAAgB;CAChB,YAAY;CACZ,QAAQ;CACR,SAAS;CACT,SAAS;CACT,yBAAyB;CACzB,UAAU;CAEV,yBAAyB;EACvB,iBAAiB;EACjB,WAAW;EACX,OAAO;EAEP,UAAU,EACR,WAAW,EACT,iBAAiB,2BAClB,EACF;EACF;CAED,2BAA2B;EACzB,iBAAiB;EACjB,WAAW;EACX,OAAO;EAEP,UAAU,EACR,WAAW;GACT,iBAAiB;GACjB,WAAW;GACZ,EACF;EACF;CAED,WAAW;EACT,SAAS;EACT,WAAW;EACZ;CAED,cAAc;EACZ,eAAe;EACf,iBAAiB;EACjB,WAAW;EACX,kBAAkB,EAChB,OAAO,yBACR;GAEA,KAAK,oBAAoB,EACxB,YAAY,EACV,iBAAiB,gCAClB,EACF;EACF;CAED,UAAU,EACR,MAAM;EACJ,QAAQ;GACN,OAAO;GACP,QAAQ;GACR,cAAc;GACf;EACD,OAAO;GACL,OAAO;GACP,QAAQ;GACR,cAAc;GACf;EACF,EACF;CACD,iBAAiB,EACf,MAAM,UACP;CACF,CAAC;AAMF,IAAa,WAAW,MAAA,QAAM,YAC3B,OAAO,iBAAiB;CACvB,OACE,iBAAA,GAAA,kBAAA,KAAC,gBAAD;EAAgB,GAAI;EAAO,KAAK;YAC9B,iBAAA,GAAA,kBAAA,KAAC,iBAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAC,sBAAA,WAAD;GAAW,QAAQ;GAAI,OAAO;GAAM,CAAA,EACpB,CAAA;EACH,CAAA;EAGtB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","names":[],"sources":["../../../components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { CheckIcon } from '@radix-ui/react-icons';\nimport React from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\n\nconst StyledIndicator = styled(CheckboxPrimitive.Indicator, {\n alignItems: 'center',\n display: 'flex',\n height: '100%',\n justifyContent: 'center',\n width: '100%',\n});\n\nconst StyledCheckbox = styled(CheckboxPrimitive.Root, {\n all: 'unset',\n border: 'none',\n boxSizing: 'border-box',\n userSelect: 'none',\n '&::before': {\n boxSizing: 'border-box',\n },\n '&::after': {\n boxSizing: 'border-box',\n },\n\n alignItems: 'center',\n appearance: 'none',\n display: 'inline-flex',\n justifyContent: 'center',\n lineHeight: '1',\n margin: '0',\n outline: 'none',\n padding: '0',\n WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n overflow: 'hidden',\n\n '&[data-state=checked]': {\n backgroundColor: '$checkboxCheckedBg',\n boxShadow: 'inset 0 0 0 1px transparent',\n color: '$checkboxCheckedIcon',\n\n '@hover': {\n '&:hover': {\n backgroundColor: '$checkboxCheckedHoverBg',\n },\n },\n },\n\n '&[data-state=unchecked]': {\n backgroundColor: '$checkboxBg',\n boxShadow: 'inset 0 0 0 1px $colors$checkboxBorder',\n color: '$checkboxIcon',\n\n '@hover': {\n '&:hover': {\n backgroundColor: '$checkboxHoverBg',\n boxShadow: 'inset 0 0 0 1px $colors$checkboxHoverBorder',\n },\n },\n },\n\n '&:focus': {\n outline: 'none',\n boxShadow: 'inset 0 0 0 1px $colors$checkboxFocusBorder',\n },\n\n '&:disabled': {\n pointerEvents: 'none',\n backgroundColor: '$checkboxDisabledBg',\n boxShadow: 'inset 0 0 0 1px $colors$checkboxDisabledBorder',\n '&::placeholder': {\n color: '$checkboxDisabledText',\n },\n\n [`& ${StyledIndicator}`]: {\n '&::after': {\n backgroundColor: '$checkboxIndicatorDisabledBg',\n },\n },\n },\n\n variants: {\n size: {\n medium: {\n width: 18,\n height: 18,\n borderRadius: '$2',\n },\n large: {\n width: '$5',\n height: '$5',\n borderRadius: '$3',\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n },\n});\n\ntype CheckboxPrimitiveProps = Omit<React.ComponentProps<typeof CheckboxPrimitive.Root>, 'as'>;\nexport type CheckboxVariants = VariantProps<typeof StyledCheckbox>;\nexport type CheckboxProps = CheckboxPrimitiveProps & CheckboxVariants & { css?: CSS };\n\nexport const Checkbox = React.forwardRef<React.ElementRef<typeof StyledCheckbox>, CheckboxProps>(\n (props, forwardedRef) => {\n return (\n <StyledCheckbox {...props} ref={forwardedRef}>\n <StyledIndicator>\n <CheckIcon height={40} width={40} />\n </StyledIndicator>\n </StyledCheckbox>\n );\n }\n);\n"],"mappings":";;;;;;AAMA,IAAM,kBAAkB,OAAO,kBAAkB,WAAW;CAC1D,YAAY;CACZ,SAAS;CACT,QAAQ;CACR,gBAAgB;CAChB,OAAO;CACR,CAAC;AAEF,IAAM,iBAAiB,OAAO,kBAAkB,MAAM;CACpD,KAAK;CACL,QAAQ;CACR,WAAW;CACX,YAAY;CACZ,aAAa,EACX,WAAW,cACZ;CACD,YAAY,EACV,WAAW,cACZ;CAED,YAAY;CACZ,YAAY;CACZ,SAAS;CACT,gBAAgB;CAChB,YAAY;CACZ,QAAQ;CACR,SAAS;CACT,SAAS;CACT,yBAAyB;CACzB,UAAU;CAEV,yBAAyB;EACvB,iBAAiB;EACjB,WAAW;EACX,OAAO;EAEP,UAAU,EACR,WAAW,EACT,iBAAiB,2BAClB,EACF;EACF;CAED,2BAA2B;EACzB,iBAAiB;EACjB,WAAW;EACX,OAAO;EAEP,UAAU,EACR,WAAW;GACT,iBAAiB;GACjB,WAAW;GACZ,EACF;EACF;CAED,WAAW;EACT,SAAS;EACT,WAAW;EACZ;CAED,cAAc;EACZ,eAAe;EACf,iBAAiB;EACjB,WAAW;EACX,kBAAkB,EAChB,OAAO,yBACR;GAEA,KAAK,oBAAoB,EACxB,YAAY,EACV,iBAAiB,gCAClB,EACF;EACF;CAED,UAAU,EACR,MAAM;EACJ,QAAQ;GACN,OAAO;GACP,QAAQ;GACR,cAAc;GACf;EACD,OAAO;GACL,OAAO;GACP,QAAQ;GACR,cAAc;GACf;EACF,EACF;CACD,iBAAiB,EACf,MAAM,UACP;CACF,CAAC;AAMF,IAAa,WAAW,MAAM,YAC3B,OAAO,iBAAiB;
|
|
1
|
+
{"version":3,"file":"Checkbox.js","names":[],"sources":["../../../components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { CheckIcon } from '@radix-ui/react-icons';\nimport React from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\n\nconst StyledIndicator = styled(CheckboxPrimitive.Indicator, {\n alignItems: 'center',\n display: 'flex',\n height: '100%',\n justifyContent: 'center',\n width: '100%',\n});\n\nconst StyledCheckbox = styled(CheckboxPrimitive.Root, {\n all: 'unset',\n border: 'none',\n boxSizing: 'border-box',\n userSelect: 'none',\n '&::before': {\n boxSizing: 'border-box',\n },\n '&::after': {\n boxSizing: 'border-box',\n },\n\n alignItems: 'center',\n appearance: 'none',\n display: 'inline-flex',\n justifyContent: 'center',\n lineHeight: '1',\n margin: '0',\n outline: 'none',\n padding: '0',\n WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n overflow: 'hidden',\n\n '&[data-state=checked]': {\n backgroundColor: '$checkboxCheckedBg',\n boxShadow: 'inset 0 0 0 1px transparent',\n color: '$checkboxCheckedIcon',\n\n '@hover': {\n '&:hover': {\n backgroundColor: '$checkboxCheckedHoverBg',\n },\n },\n },\n\n '&[data-state=unchecked]': {\n backgroundColor: '$checkboxBg',\n boxShadow: 'inset 0 0 0 1px $colors$checkboxBorder',\n color: '$checkboxIcon',\n\n '@hover': {\n '&:hover': {\n backgroundColor: '$checkboxHoverBg',\n boxShadow: 'inset 0 0 0 1px $colors$checkboxHoverBorder',\n },\n },\n },\n\n '&:focus': {\n outline: 'none',\n boxShadow: 'inset 0 0 0 1px $colors$checkboxFocusBorder',\n },\n\n '&:disabled': {\n pointerEvents: 'none',\n backgroundColor: '$checkboxDisabledBg',\n boxShadow: 'inset 0 0 0 1px $colors$checkboxDisabledBorder',\n '&::placeholder': {\n color: '$checkboxDisabledText',\n },\n\n [`& ${StyledIndicator}`]: {\n '&::after': {\n backgroundColor: '$checkboxIndicatorDisabledBg',\n },\n },\n },\n\n variants: {\n size: {\n medium: {\n width: 18,\n height: 18,\n borderRadius: '$2',\n },\n large: {\n width: '$5',\n height: '$5',\n borderRadius: '$3',\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n },\n});\n\ntype CheckboxPrimitiveProps = Omit<React.ComponentProps<typeof CheckboxPrimitive.Root>, 'as'>;\nexport type CheckboxVariants = VariantProps<typeof StyledCheckbox>;\nexport type CheckboxProps = CheckboxPrimitiveProps & CheckboxVariants & { css?: CSS };\n\nexport const Checkbox = React.forwardRef<React.ElementRef<typeof StyledCheckbox>, CheckboxProps>(\n (props, forwardedRef) => {\n return (\n <StyledCheckbox {...props} ref={forwardedRef}>\n <StyledIndicator>\n <CheckIcon height={40} width={40} />\n </StyledIndicator>\n </StyledCheckbox>\n );\n }\n);\n"],"mappings":";;;;;;AAMA,IAAM,kBAAkB,OAAO,kBAAkB,WAAW;CAC1D,YAAY;CACZ,SAAS;CACT,QAAQ;CACR,gBAAgB;CAChB,OAAO;CACR,CAAC;AAEF,IAAM,iBAAiB,OAAO,kBAAkB,MAAM;CACpD,KAAK;CACL,QAAQ;CACR,WAAW;CACX,YAAY;CACZ,aAAa,EACX,WAAW,cACZ;CACD,YAAY,EACV,WAAW,cACZ;CAED,YAAY;CACZ,YAAY;CACZ,SAAS;CACT,gBAAgB;CAChB,YAAY;CACZ,QAAQ;CACR,SAAS;CACT,SAAS;CACT,yBAAyB;CACzB,UAAU;CAEV,yBAAyB;EACvB,iBAAiB;EACjB,WAAW;EACX,OAAO;EAEP,UAAU,EACR,WAAW,EACT,iBAAiB,2BAClB,EACF;EACF;CAED,2BAA2B;EACzB,iBAAiB;EACjB,WAAW;EACX,OAAO;EAEP,UAAU,EACR,WAAW;GACT,iBAAiB;GACjB,WAAW;GACZ,EACF;EACF;CAED,WAAW;EACT,SAAS;EACT,WAAW;EACZ;CAED,cAAc;EACZ,eAAe;EACf,iBAAiB;EACjB,WAAW;EACX,kBAAkB,EAChB,OAAO,yBACR;GAEA,KAAK,oBAAoB,EACxB,YAAY,EACV,iBAAiB,gCAClB,EACF;EACF;CAED,UAAU,EACR,MAAM;EACJ,QAAQ;GACN,OAAO;GACP,QAAQ;GACR,cAAc;GACf;EACD,OAAO;GACL,OAAO;GACP,QAAQ;GACR,cAAc;GACf;EACF,EACF;CACD,iBAAiB,EACf,MAAM,UACP;CACF,CAAC;AAMF,IAAa,WAAW,MAAM,YAC3B,OAAO,iBAAiB;CACvB,OACE,oBAAC,gBAAD;EAAgB,GAAI;EAAO,KAAK;YAC9B,oBAAC,iBAAD,EAAA,UACE,oBAAC,WAAD;GAAW,QAAQ;GAAI,OAAO;GAAM,CAAA,EACpB,CAAA;EACH,CAAA;EAGtB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.themes.cjs","names":[],"sources":["../../../components/Checkbox/Checkbox.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 type Colors = {\n checkboxIcon: Property.Color;\n checkboxBg: Property.Color;\n checkboxCheckedBg: Property.Color;\n checkboxBorder: Property.Color;\n checkboxCheckedIcon: Property.Color;\n checkboxCheckedHoverBg: Property.Color;\n checkboxHoverBg: Property.Color;\n checkboxHoverBorder: Property.Color;\n checkboxFocusBorder: Property.Color;\n checkboxDisabledBg: Property.Color;\n checkboxDisabledBorder: Property.Color;\n checkboxIndicatorDisabledBg: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = (primaryColor) => ({\n checkboxIcon: '$deepBlue11',\n checkboxBg: 'transparent',\n checkboxBorder: '$slate8',\n checkboxCheckedBg: '$primary',\n checkboxCheckedIcon: 'white',\n checkboxCheckedHoverBg: tinycolor(primaryColor.value).darken().toHslString(),\n checkboxHoverBg: 'transparent',\n checkboxHoverBorder: '$primary',\n checkboxFocusBorder: '$primary',\n checkboxDisabledBg: '$deepBlue3',\n checkboxDisabledBorder: '$deepBlue5',\n checkboxIndicatorDisabledBg: tinycolor(primaryColor.value).setAlpha(0.6).toHslString(),\n });\n\n export const getDark: Factory = (primaryColor) => ({\n checkboxIcon: '$deepBlue1',\n checkboxBg: 'transparent',\n checkboxCheckedBg: '$primary',\n checkboxBorder: '$slate9',\n checkboxCheckedIcon: '$deepBlue1',\n checkboxCheckedHoverBg: tinycolor(primaryColor.value).lighten(10).toHslString(),\n checkboxHoverBg: '$deepBlue3',\n checkboxHoverBorder: '$primary',\n checkboxFocusBorder: '$primary',\n checkboxDisabledBg: tinycolor(primaryColor.value).setAlpha(0.6).toHslString(),\n checkboxDisabledBorder: 'transparent',\n checkboxIndicatorDisabledBg: '$deepBlue1',\n });\n}\n"],"mappings":";;;;AAKO,IAAA;;
|
|
1
|
+
{"version":3,"file":"Checkbox.themes.cjs","names":[],"sources":["../../../components/Checkbox/Checkbox.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 type Colors = {\n checkboxIcon: Property.Color;\n checkboxBg: Property.Color;\n checkboxCheckedBg: Property.Color;\n checkboxBorder: Property.Color;\n checkboxCheckedIcon: Property.Color;\n checkboxCheckedHoverBg: Property.Color;\n checkboxHoverBg: Property.Color;\n checkboxHoverBorder: Property.Color;\n checkboxFocusBorder: Property.Color;\n checkboxDisabledBg: Property.Color;\n checkboxDisabledBorder: Property.Color;\n checkboxIndicatorDisabledBg: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = (primaryColor) => ({\n checkboxIcon: '$deepBlue11',\n checkboxBg: 'transparent',\n checkboxBorder: '$slate8',\n checkboxCheckedBg: '$primary',\n checkboxCheckedIcon: 'white',\n checkboxCheckedHoverBg: tinycolor(primaryColor.value).darken().toHslString(),\n checkboxHoverBg: 'transparent',\n checkboxHoverBorder: '$primary',\n checkboxFocusBorder: '$primary',\n checkboxDisabledBg: '$deepBlue3',\n checkboxDisabledBorder: '$deepBlue5',\n checkboxIndicatorDisabledBg: tinycolor(primaryColor.value).setAlpha(0.6).toHslString(),\n });\n\n export const getDark: Factory = (primaryColor) => ({\n checkboxIcon: '$deepBlue1',\n checkboxBg: 'transparent',\n checkboxCheckedBg: '$primary',\n checkboxBorder: '$slate9',\n checkboxCheckedIcon: '$deepBlue1',\n checkboxCheckedHoverBg: tinycolor(primaryColor.value).lighten(10).toHslString(),\n checkboxHoverBg: '$deepBlue3',\n checkboxHoverBorder: '$primary',\n checkboxFocusBorder: '$primary',\n checkboxDisabledBg: tinycolor(primaryColor.value).setAlpha(0.6).toHslString(),\n checkboxDisabledBorder: 'transparent',\n checkboxIndicatorDisabledBg: '$deepBlue1',\n });\n}\n"],"mappings":";;;;AAKO,IAAA;;CAkBQ,OAAA,YAAqB,kBAAkB;EAClD,cAAc;EACd,YAAY;EACZ,gBAAgB;EAChB,mBAAmB;EACnB,qBAAqB;EACrB,yBAAA,GAAA,WAAA,SAAkC,aAAa,MAAM,CAAC,QAAQ,CAAC,aAAa;EAC5E,iBAAiB;EACjB,qBAAqB;EACrB,qBAAqB;EACrB,oBAAoB;EACpB,wBAAwB;EACxB,8BAAA,GAAA,WAAA,SAAuC,aAAa,MAAM,CAAC,SAAS,GAAI,CAAC,aAAa;EACvF;CAEY,OAAA,WAAoB,kBAAkB;EACjD,cAAc;EACd,YAAY;EACZ,mBAAmB;EACnB,gBAAgB;EAChB,qBAAqB;EACrB,yBAAA,GAAA,WAAA,SAAkC,aAAa,MAAM,CAAC,QAAQ,GAAG,CAAC,aAAa;EAC/E,iBAAiB;EACjB,qBAAqB;EACrB,qBAAqB;EACrB,qBAAA,GAAA,WAAA,SAA8B,aAAa,MAAM,CAAC,SAAS,GAAI,CAAC,aAAa;EAC7E,wBAAwB;EACxB,6BAA6B;EAC9B;yBACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.themes.js","names":[],"sources":["../../../components/Checkbox/Checkbox.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 type Colors = {\n checkboxIcon: Property.Color;\n checkboxBg: Property.Color;\n checkboxCheckedBg: Property.Color;\n checkboxBorder: Property.Color;\n checkboxCheckedIcon: Property.Color;\n checkboxCheckedHoverBg: Property.Color;\n checkboxHoverBg: Property.Color;\n checkboxHoverBorder: Property.Color;\n checkboxFocusBorder: Property.Color;\n checkboxDisabledBg: Property.Color;\n checkboxDisabledBorder: Property.Color;\n checkboxIndicatorDisabledBg: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = (primaryColor) => ({\n checkboxIcon: '$deepBlue11',\n checkboxBg: 'transparent',\n checkboxBorder: '$slate8',\n checkboxCheckedBg: '$primary',\n checkboxCheckedIcon: 'white',\n checkboxCheckedHoverBg: tinycolor(primaryColor.value).darken().toHslString(),\n checkboxHoverBg: 'transparent',\n checkboxHoverBorder: '$primary',\n checkboxFocusBorder: '$primary',\n checkboxDisabledBg: '$deepBlue3',\n checkboxDisabledBorder: '$deepBlue5',\n checkboxIndicatorDisabledBg: tinycolor(primaryColor.value).setAlpha(0.6).toHslString(),\n });\n\n export const getDark: Factory = (primaryColor) => ({\n checkboxIcon: '$deepBlue1',\n checkboxBg: 'transparent',\n checkboxCheckedBg: '$primary',\n checkboxBorder: '$slate9',\n checkboxCheckedIcon: '$deepBlue1',\n checkboxCheckedHoverBg: tinycolor(primaryColor.value).lighten(10).toHslString(),\n checkboxHoverBg: '$deepBlue3',\n checkboxHoverBorder: '$primary',\n checkboxFocusBorder: '$primary',\n checkboxDisabledBg: tinycolor(primaryColor.value).setAlpha(0.6).toHslString(),\n checkboxDisabledBorder: 'transparent',\n checkboxIndicatorDisabledBg: '$deepBlue1',\n });\n}\n"],"mappings":";;AAKO,IAAA;;
|
|
1
|
+
{"version":3,"file":"Checkbox.themes.js","names":[],"sources":["../../../components/Checkbox/Checkbox.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 type Colors = {\n checkboxIcon: Property.Color;\n checkboxBg: Property.Color;\n checkboxCheckedBg: Property.Color;\n checkboxBorder: Property.Color;\n checkboxCheckedIcon: Property.Color;\n checkboxCheckedHoverBg: Property.Color;\n checkboxHoverBg: Property.Color;\n checkboxHoverBorder: Property.Color;\n checkboxFocusBorder: Property.Color;\n checkboxDisabledBg: Property.Color;\n checkboxDisabledBorder: Property.Color;\n checkboxIndicatorDisabledBg: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = (primaryColor) => ({\n checkboxIcon: '$deepBlue11',\n checkboxBg: 'transparent',\n checkboxBorder: '$slate8',\n checkboxCheckedBg: '$primary',\n checkboxCheckedIcon: 'white',\n checkboxCheckedHoverBg: tinycolor(primaryColor.value).darken().toHslString(),\n checkboxHoverBg: 'transparent',\n checkboxHoverBorder: '$primary',\n checkboxFocusBorder: '$primary',\n checkboxDisabledBg: '$deepBlue3',\n checkboxDisabledBorder: '$deepBlue5',\n checkboxIndicatorDisabledBg: tinycolor(primaryColor.value).setAlpha(0.6).toHslString(),\n });\n\n export const getDark: Factory = (primaryColor) => ({\n checkboxIcon: '$deepBlue1',\n checkboxBg: 'transparent',\n checkboxCheckedBg: '$primary',\n checkboxBorder: '$slate9',\n checkboxCheckedIcon: '$deepBlue1',\n checkboxCheckedHoverBg: tinycolor(primaryColor.value).lighten(10).toHslString(),\n checkboxHoverBg: '$deepBlue3',\n checkboxHoverBorder: '$primary',\n checkboxFocusBorder: '$primary',\n checkboxDisabledBg: tinycolor(primaryColor.value).setAlpha(0.6).toHslString(),\n checkboxDisabledBorder: 'transparent',\n checkboxIndicatorDisabledBg: '$deepBlue1',\n });\n}\n"],"mappings":";;AAKO,IAAA;;CAkBQ,OAAA,YAAqB,kBAAkB;EAClD,cAAc;EACd,YAAY;EACZ,gBAAgB;EAChB,mBAAmB;EACnB,qBAAqB;EACrB,wBAAwB,UAAU,aAAa,MAAM,CAAC,QAAQ,CAAC,aAAa;EAC5E,iBAAiB;EACjB,qBAAqB;EACrB,qBAAqB;EACrB,oBAAoB;EACpB,wBAAwB;EACxB,6BAA6B,UAAU,aAAa,MAAM,CAAC,SAAS,GAAI,CAAC,aAAa;EACvF;CAEY,OAAA,WAAoB,kBAAkB;EACjD,cAAc;EACd,YAAY;EACZ,mBAAmB;EACnB,gBAAgB;EAChB,qBAAqB;EACrB,wBAAwB,UAAU,aAAa,MAAM,CAAC,QAAQ,GAAG,CAAC,aAAa;EAC/E,iBAAiB;EACjB,qBAAqB;EACrB,qBAAqB;EACrB,oBAAoB,UAAU,aAAa,MAAM,CAAC,SAAS,GAAI,CAAC,aAAa;EAC7E,wBAAwB;EACxB,6BAA6B;EAC9B;yBACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeBlock.cjs","names":[],"sources":["../../../components/CodeBlock/CodeBlock.tsx"],"sourcesContent":["import { CheckIcon, CopyIcon } from '@radix-ui/react-icons';\nimport { Highlight, Language, themes } from 'prism-react-renderer';\nimport React, {\n ComponentProps,\n forwardRef,\n useCallback,\n useLayoutEffect,\n useRef,\n useState,\n} from 'react';\n\nimport { CSS, styled } from '../../stitches.config';\nimport { AccessibleIcon } from '../AccessibleIcon';\nimport { Box } from '../Box';\nimport { Button } from '../Button';\nimport { useColorScheme } from '../colorSchemeContext';\nimport type { CodeBlockCopyButtonAlign, CodeBlockLanguage } from './index';\nimport { Prism } from './prism-extend';\n\nconst Pre = styled('pre', {\n m: 0,\n borderRadius: '$2',\n overflow: 'auto',\n border: '1px solid $colors$deepBlue3',\n fontSize: '$2',\n lineHeight: 1.6,\n\n variants: {\n noBorder: {\n true: { border: 'none' },\n },\n },\n});\n\nconst CopyButtonWrapper = styled('div', {\n position: 'absolute',\n zIndex: 1,\n variants: {\n position: {\n top: { top: '$2', right: '$3' },\n topLeft: { top: '$2', left: '$3' },\n bottomRight: { bottom: '$2', right: '$3' },\n bottomLeft: { bottom: '$2', left: '$3' },\n },\n },\n\n defaultVariants: {\n position: 'top',\n },\n});\n\nexport type CodeBlockProps = {\n lang?: CodeBlockLanguage;\n code: string;\n copyable?: boolean;\n copyText?: string;\n copiedText?: string;\n copyButtonAlign?: CodeBlockCopyButtonAlign;\n onCopy?: () => void;\n noBorder?: boolean;\n wrapText?: boolean;\n colorScheme?: 'light' | 'dark';\n maxHeight?: number | string;\n css?: CSS;\n} & Omit<ComponentProps<typeof Pre>, 'css'>;\n\nexport const CodeBlock = forwardRef<HTMLPreElement, CodeBlockProps>(\n (\n {\n lang = 'text',\n code,\n copyable = false,\n copyText,\n copiedText,\n copyButtonAlign = 'top right',\n onCopy,\n noBorder,\n wrapText = false,\n colorScheme,\n maxHeight = 424,\n css,\n style,\n className,\n ...props\n },\n ref,\n ) => {\n const systemScheme = useColorScheme();\n const resolvedScheme = colorScheme ?? systemScheme;\n const prismTheme = resolvedScheme === 'dark' ? themes.nightOwl : themes.nightOwlLight;\n\n const isBottom = copyButtonAlign.includes('bottom');\n const isLeft = copyButtonAlign.includes('left');\n const buttonPosition = isBottom\n ? isLeft\n ? 'bottomLeft'\n : 'bottomRight'\n : isLeft\n ? 'topLeft'\n : 'top';\n\n const [copied, setCopied] = useState(false);\n\n const preRef = useRef<HTMLPreElement | null>(\n null,\n ) as React.MutableRefObject<HTMLPreElement | null>;\n const buttonWrapperRef = useRef<HTMLDivElement>(null);\n\n const setPreRef = useCallback(\n (node: HTMLPreElement | null) => {\n preRef.current = node;\n if (typeof ref === 'function') ref(node);\n else if (ref) (ref as React.MutableRefObject<HTMLPreElement | null>).current = node;\n },\n [ref],\n );\n\n useLayoutEffect(() => {\n if (!copyable) return;\n const pre = preRef.current;\n const wrapper = buttonWrapperRef.current;\n if (!pre || !wrapper) return;\n\n const isBottomAlign = isBottom;\n const borderH = noBorder ? 0 : 2;\n\n const update = () => {\n if (!isLeft) {\n const vScrollbar = Math.max(0, pre.offsetWidth - pre.clientWidth - borderH);\n wrapper.style.right = `${16 + vScrollbar}px`;\n }\n if (isBottomAlign) {\n const hScrollbar = Math.max(0, pre.offsetHeight - pre.clientHeight - borderH);\n wrapper.style.bottom = `${8 + hScrollbar}px`;\n }\n };\n\n update();\n const observer = new ResizeObserver(update);\n observer.observe(pre);\n return () => observer.disconnect();\n }, [copyable, isBottom, isLeft, noBorder]);\n\n const handleCopy = async () => {\n try {\n await navigator.clipboard.writeText(code);\n setCopied(true);\n onCopy?.();\n setTimeout(() => setCopied(false), 1500);\n } catch {\n // clipboard write failed (e.g. permission denied) — leave UI unchanged\n }\n };\n\n const copyButton = copyable ? (\n <Button\n variant=\"secondary\"\n ghost\n size=\"small\"\n type=\"button\"\n onClick={handleCopy}\n css={{\n color: '$hiContrast',\n gap: '$1',\n backgroundColor: '$codeBlockCopyButtonBg',\n height: '32px',\n }}\n >\n <AccessibleIcon label={copied ? 'Copied' : 'Copy'}>\n {copied ? <CheckIcon /> : <CopyIcon />}\n </AccessibleIcon>\n {copied ? copiedText : copyText}\n </Button>\n ) : null;\n\n return (\n <Highlight\n theme={prismTheme}\n code={code}\n language={(Prism.languages[lang] != null ? lang : 'text') as Language}\n >\n {({\n className: highlightClass,\n style: highlightStyle,\n tokens,\n getLineProps,\n getTokenProps,\n }) => (\n <Box css={{ position: 'relative', ...css }}>\n <Pre\n ref={setPreRef}\n className={[highlightClass, className].filter(Boolean).join(' ')}\n style={{ maxHeight, ...highlightStyle, backgroundColor: 'inherit', ...style }}\n noBorder={noBorder}\n {...props}\n >\n <Box\n css={{\n p: '$4',\n ...(copyable && isLeft && isBottom ? { pb: '$7' } : {}),\n ...(copyable && isLeft && !isBottom ? { pt: '$7' } : {}),\n }}\n >\n {tokens.map((line, i) => (\n <div\n key={i}\n {...getLineProps({ line })}\n style={\n wrapText ? { whiteSpace: 'pre-wrap', wordBreak: 'break-all' } : undefined\n }\n >\n {line.map((token, key) => (\n <span key={key} {...getTokenProps({ token })} />\n ))}\n </div>\n ))}\n </Box>\n </Pre>\n {copyButton && (\n <CopyButtonWrapper ref={buttonWrapperRef} position={buttonPosition}>\n {copyButton}\n </CopyButtonWrapper>\n )}\n </Box>\n )}\n </Highlight>\n );\n },\n);\n\nCodeBlock.displayName = 'CodeBlock';\n"],"mappings":";;;;;;;;;;;;;AAmBA,IAAM,MAAM,wBAAA,OAAO,OAAO;CACxB,GAAG;CACH,cAAc;CACd,UAAU;CACV,QAAQ;CACR,UAAU;CACV,YAAY;CAEZ,UAAU,EACR,UAAU,EACR,MAAM,EAAE,QAAQ,QAAQ,EACzB,EACF;CACF,CAAC;AAEF,IAAM,oBAAoB,wBAAA,OAAO,OAAO;CACtC,UAAU;CACV,QAAQ;CACR,UAAU,EACR,UAAU;EACR,KAAK;GAAE,KAAK;GAAM,OAAO;GAAM;EAC/B,SAAS;GAAE,KAAK;GAAM,MAAM;GAAM;EAClC,aAAa;GAAE,QAAQ;GAAM,OAAO;GAAM;EAC1C,YAAY;GAAE,QAAQ;GAAM,MAAM;GAAM;EACzC,EACF;CAED,iBAAiB,EACf,UAAU,OACX;CACF,CAAC;AAiBF,IAAa,aAAA,GAAA,MAAA,aAET,EACE,OAAO,QACP,MACA,WAAW,OACX,UACA,YACA,kBAAkB,aAClB,QACA,UACA,WAAW,OACX,aACA,YAAY,KACZ,KACA,OACA,WACA,GAAG,SAEL,QACG;CACH,MAAM,eAAe,2BAAA,gBAAgB;CAErC,MAAM,cADiB,eAAe,kBACA,SAAS,qBAAA,OAAO,WAAW,qBAAA,OAAO;CAExE,MAAM,WAAW,gBAAgB,SAAS,SAAS;CACnD,MAAM,SAAS,gBAAgB,SAAS,OAAO;CAC/C,MAAM,iBAAiB,WACnB,SACE,eACA,gBACF,SACE,YACA;CAEN,MAAM,CAAC,QAAQ,cAAA,GAAA,MAAA,UAAsB,MAAM;CAE3C,MAAM,UAAA,GAAA,MAAA,QACJ,KACD;CACD,MAAM,oBAAA,GAAA,MAAA,QAA0C,KAAK;CAErD,MAAM,aAAA,GAAA,MAAA,cACH,SAAgC;
|
|
1
|
+
{"version":3,"file":"CodeBlock.cjs","names":[],"sources":["../../../components/CodeBlock/CodeBlock.tsx"],"sourcesContent":["import { CheckIcon, CopyIcon } from '@radix-ui/react-icons';\nimport { Highlight, Language, themes } from 'prism-react-renderer';\nimport React, {\n ComponentProps,\n forwardRef,\n useCallback,\n useLayoutEffect,\n useRef,\n useState,\n} from 'react';\n\nimport { CSS, styled } from '../../stitches.config';\nimport { AccessibleIcon } from '../AccessibleIcon';\nimport { Box } from '../Box';\nimport { Button } from '../Button';\nimport { useColorScheme } from '../colorSchemeContext';\nimport type { CodeBlockCopyButtonAlign, CodeBlockLanguage } from './index';\nimport { Prism } from './prism-extend';\n\nconst Pre = styled('pre', {\n m: 0,\n borderRadius: '$2',\n overflow: 'auto',\n border: '1px solid $colors$deepBlue3',\n fontSize: '$2',\n lineHeight: 1.6,\n\n variants: {\n noBorder: {\n true: { border: 'none' },\n },\n },\n});\n\nconst CopyButtonWrapper = styled('div', {\n position: 'absolute',\n zIndex: 1,\n variants: {\n position: {\n top: { top: '$2', right: '$3' },\n topLeft: { top: '$2', left: '$3' },\n bottomRight: { bottom: '$2', right: '$3' },\n bottomLeft: { bottom: '$2', left: '$3' },\n },\n },\n\n defaultVariants: {\n position: 'top',\n },\n});\n\nexport type CodeBlockProps = {\n lang?: CodeBlockLanguage;\n code: string;\n copyable?: boolean;\n copyText?: string;\n copiedText?: string;\n copyButtonAlign?: CodeBlockCopyButtonAlign;\n onCopy?: () => void;\n noBorder?: boolean;\n wrapText?: boolean;\n colorScheme?: 'light' | 'dark';\n maxHeight?: number | string;\n css?: CSS;\n} & Omit<ComponentProps<typeof Pre>, 'css'>;\n\nexport const CodeBlock = forwardRef<HTMLPreElement, CodeBlockProps>(\n (\n {\n lang = 'text',\n code,\n copyable = false,\n copyText,\n copiedText,\n copyButtonAlign = 'top right',\n onCopy,\n noBorder,\n wrapText = false,\n colorScheme,\n maxHeight = 424,\n css,\n style,\n className,\n ...props\n },\n ref,\n ) => {\n const systemScheme = useColorScheme();\n const resolvedScheme = colorScheme ?? systemScheme;\n const prismTheme = resolvedScheme === 'dark' ? themes.nightOwl : themes.nightOwlLight;\n\n const isBottom = copyButtonAlign.includes('bottom');\n const isLeft = copyButtonAlign.includes('left');\n const buttonPosition = isBottom\n ? isLeft\n ? 'bottomLeft'\n : 'bottomRight'\n : isLeft\n ? 'topLeft'\n : 'top';\n\n const [copied, setCopied] = useState(false);\n\n const preRef = useRef<HTMLPreElement | null>(\n null,\n ) as React.MutableRefObject<HTMLPreElement | null>;\n const buttonWrapperRef = useRef<HTMLDivElement>(null);\n\n const setPreRef = useCallback(\n (node: HTMLPreElement | null) => {\n preRef.current = node;\n if (typeof ref === 'function') ref(node);\n else if (ref) (ref as React.MutableRefObject<HTMLPreElement | null>).current = node;\n },\n [ref],\n );\n\n useLayoutEffect(() => {\n if (!copyable) return;\n const pre = preRef.current;\n const wrapper = buttonWrapperRef.current;\n if (!pre || !wrapper) return;\n\n const isBottomAlign = isBottom;\n const borderH = noBorder ? 0 : 2;\n\n const update = () => {\n if (!isLeft) {\n const vScrollbar = Math.max(0, pre.offsetWidth - pre.clientWidth - borderH);\n wrapper.style.right = `${16 + vScrollbar}px`;\n }\n if (isBottomAlign) {\n const hScrollbar = Math.max(0, pre.offsetHeight - pre.clientHeight - borderH);\n wrapper.style.bottom = `${8 + hScrollbar}px`;\n }\n };\n\n update();\n const observer = new ResizeObserver(update);\n observer.observe(pre);\n return () => observer.disconnect();\n }, [copyable, isBottom, isLeft, noBorder]);\n\n const handleCopy = async () => {\n try {\n await navigator.clipboard.writeText(code);\n setCopied(true);\n onCopy?.();\n setTimeout(() => setCopied(false), 1500);\n } catch {\n // clipboard write failed (e.g. permission denied) — leave UI unchanged\n }\n };\n\n const copyButton = copyable ? (\n <Button\n variant=\"secondary\"\n ghost\n size=\"small\"\n type=\"button\"\n onClick={handleCopy}\n css={{\n color: '$hiContrast',\n gap: '$1',\n backgroundColor: '$codeBlockCopyButtonBg',\n height: '32px',\n }}\n >\n <AccessibleIcon label={copied ? 'Copied' : 'Copy'}>\n {copied ? <CheckIcon /> : <CopyIcon />}\n </AccessibleIcon>\n {copied ? copiedText : copyText}\n </Button>\n ) : null;\n\n return (\n <Highlight\n theme={prismTheme}\n code={code}\n language={(Prism.languages[lang] != null ? lang : 'text') as Language}\n >\n {({\n className: highlightClass,\n style: highlightStyle,\n tokens,\n getLineProps,\n getTokenProps,\n }) => (\n <Box css={{ position: 'relative', ...css }}>\n <Pre\n ref={setPreRef}\n className={[highlightClass, className].filter(Boolean).join(' ')}\n style={{ maxHeight, ...highlightStyle, backgroundColor: 'inherit', ...style }}\n noBorder={noBorder}\n {...props}\n >\n <Box\n css={{\n p: '$4',\n ...(copyable && isLeft && isBottom ? { pb: '$7' } : {}),\n ...(copyable && isLeft && !isBottom ? { pt: '$7' } : {}),\n }}\n >\n {tokens.map((line, i) => (\n <div\n key={i}\n {...getLineProps({ line })}\n style={\n wrapText ? { whiteSpace: 'pre-wrap', wordBreak: 'break-all' } : undefined\n }\n >\n {line.map((token, key) => (\n <span key={key} {...getTokenProps({ token })} />\n ))}\n </div>\n ))}\n </Box>\n </Pre>\n {copyButton && (\n <CopyButtonWrapper ref={buttonWrapperRef} position={buttonPosition}>\n {copyButton}\n </CopyButtonWrapper>\n )}\n </Box>\n )}\n </Highlight>\n );\n },\n);\n\nCodeBlock.displayName = 'CodeBlock';\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeBlock.js","names":[],"sources":["../../../components/CodeBlock/CodeBlock.tsx"],"sourcesContent":["import { CheckIcon, CopyIcon } from '@radix-ui/react-icons';\nimport { Highlight, Language, themes } from 'prism-react-renderer';\nimport React, {\n ComponentProps,\n forwardRef,\n useCallback,\n useLayoutEffect,\n useRef,\n useState,\n} from 'react';\n\nimport { CSS, styled } from '../../stitches.config';\nimport { AccessibleIcon } from '../AccessibleIcon';\nimport { Box } from '../Box';\nimport { Button } from '../Button';\nimport { useColorScheme } from '../colorSchemeContext';\nimport type { CodeBlockCopyButtonAlign, CodeBlockLanguage } from './index';\nimport { Prism } from './prism-extend';\n\nconst Pre = styled('pre', {\n m: 0,\n borderRadius: '$2',\n overflow: 'auto',\n border: '1px solid $colors$deepBlue3',\n fontSize: '$2',\n lineHeight: 1.6,\n\n variants: {\n noBorder: {\n true: { border: 'none' },\n },\n },\n});\n\nconst CopyButtonWrapper = styled('div', {\n position: 'absolute',\n zIndex: 1,\n variants: {\n position: {\n top: { top: '$2', right: '$3' },\n topLeft: { top: '$2', left: '$3' },\n bottomRight: { bottom: '$2', right: '$3' },\n bottomLeft: { bottom: '$2', left: '$3' },\n },\n },\n\n defaultVariants: {\n position: 'top',\n },\n});\n\nexport type CodeBlockProps = {\n lang?: CodeBlockLanguage;\n code: string;\n copyable?: boolean;\n copyText?: string;\n copiedText?: string;\n copyButtonAlign?: CodeBlockCopyButtonAlign;\n onCopy?: () => void;\n noBorder?: boolean;\n wrapText?: boolean;\n colorScheme?: 'light' | 'dark';\n maxHeight?: number | string;\n css?: CSS;\n} & Omit<ComponentProps<typeof Pre>, 'css'>;\n\nexport const CodeBlock = forwardRef<HTMLPreElement, CodeBlockProps>(\n (\n {\n lang = 'text',\n code,\n copyable = false,\n copyText,\n copiedText,\n copyButtonAlign = 'top right',\n onCopy,\n noBorder,\n wrapText = false,\n colorScheme,\n maxHeight = 424,\n css,\n style,\n className,\n ...props\n },\n ref,\n ) => {\n const systemScheme = useColorScheme();\n const resolvedScheme = colorScheme ?? systemScheme;\n const prismTheme = resolvedScheme === 'dark' ? themes.nightOwl : themes.nightOwlLight;\n\n const isBottom = copyButtonAlign.includes('bottom');\n const isLeft = copyButtonAlign.includes('left');\n const buttonPosition = isBottom\n ? isLeft\n ? 'bottomLeft'\n : 'bottomRight'\n : isLeft\n ? 'topLeft'\n : 'top';\n\n const [copied, setCopied] = useState(false);\n\n const preRef = useRef<HTMLPreElement | null>(\n null,\n ) as React.MutableRefObject<HTMLPreElement | null>;\n const buttonWrapperRef = useRef<HTMLDivElement>(null);\n\n const setPreRef = useCallback(\n (node: HTMLPreElement | null) => {\n preRef.current = node;\n if (typeof ref === 'function') ref(node);\n else if (ref) (ref as React.MutableRefObject<HTMLPreElement | null>).current = node;\n },\n [ref],\n );\n\n useLayoutEffect(() => {\n if (!copyable) return;\n const pre = preRef.current;\n const wrapper = buttonWrapperRef.current;\n if (!pre || !wrapper) return;\n\n const isBottomAlign = isBottom;\n const borderH = noBorder ? 0 : 2;\n\n const update = () => {\n if (!isLeft) {\n const vScrollbar = Math.max(0, pre.offsetWidth - pre.clientWidth - borderH);\n wrapper.style.right = `${16 + vScrollbar}px`;\n }\n if (isBottomAlign) {\n const hScrollbar = Math.max(0, pre.offsetHeight - pre.clientHeight - borderH);\n wrapper.style.bottom = `${8 + hScrollbar}px`;\n }\n };\n\n update();\n const observer = new ResizeObserver(update);\n observer.observe(pre);\n return () => observer.disconnect();\n }, [copyable, isBottom, isLeft, noBorder]);\n\n const handleCopy = async () => {\n try {\n await navigator.clipboard.writeText(code);\n setCopied(true);\n onCopy?.();\n setTimeout(() => setCopied(false), 1500);\n } catch {\n // clipboard write failed (e.g. permission denied) — leave UI unchanged\n }\n };\n\n const copyButton = copyable ? (\n <Button\n variant=\"secondary\"\n ghost\n size=\"small\"\n type=\"button\"\n onClick={handleCopy}\n css={{\n color: '$hiContrast',\n gap: '$1',\n backgroundColor: '$codeBlockCopyButtonBg',\n height: '32px',\n }}\n >\n <AccessibleIcon label={copied ? 'Copied' : 'Copy'}>\n {copied ? <CheckIcon /> : <CopyIcon />}\n </AccessibleIcon>\n {copied ? copiedText : copyText}\n </Button>\n ) : null;\n\n return (\n <Highlight\n theme={prismTheme}\n code={code}\n language={(Prism.languages[lang] != null ? lang : 'text') as Language}\n >\n {({\n className: highlightClass,\n style: highlightStyle,\n tokens,\n getLineProps,\n getTokenProps,\n }) => (\n <Box css={{ position: 'relative', ...css }}>\n <Pre\n ref={setPreRef}\n className={[highlightClass, className].filter(Boolean).join(' ')}\n style={{ maxHeight, ...highlightStyle, backgroundColor: 'inherit', ...style }}\n noBorder={noBorder}\n {...props}\n >\n <Box\n css={{\n p: '$4',\n ...(copyable && isLeft && isBottom ? { pb: '$7' } : {}),\n ...(copyable && isLeft && !isBottom ? { pt: '$7' } : {}),\n }}\n >\n {tokens.map((line, i) => (\n <div\n key={i}\n {...getLineProps({ line })}\n style={\n wrapText ? { whiteSpace: 'pre-wrap', wordBreak: 'break-all' } : undefined\n }\n >\n {line.map((token, key) => (\n <span key={key} {...getTokenProps({ token })} />\n ))}\n </div>\n ))}\n </Box>\n </Pre>\n {copyButton && (\n <CopyButtonWrapper ref={buttonWrapperRef} position={buttonPosition}>\n {copyButton}\n </CopyButtonWrapper>\n )}\n </Box>\n )}\n </Highlight>\n );\n },\n);\n\nCodeBlock.displayName = 'CodeBlock';\n"],"mappings":";;;;;;;;;;;AAmBA,IAAM,MAAM,OAAO,OAAO;CACxB,GAAG;CACH,cAAc;CACd,UAAU;CACV,QAAQ;CACR,UAAU;CACV,YAAY;CAEZ,UAAU,EACR,UAAU,EACR,MAAM,EAAE,QAAQ,QAAQ,EACzB,EACF;CACF,CAAC;AAEF,IAAM,oBAAoB,OAAO,OAAO;CACtC,UAAU;CACV,QAAQ;CACR,UAAU,EACR,UAAU;EACR,KAAK;GAAE,KAAK;GAAM,OAAO;GAAM;EAC/B,SAAS;GAAE,KAAK;GAAM,MAAM;GAAM;EAClC,aAAa;GAAE,QAAQ;GAAM,OAAO;GAAM;EAC1C,YAAY;GAAE,QAAQ;GAAM,MAAM;GAAM;EACzC,EACF;CAED,iBAAiB,EACf,UAAU,OACX;CACF,CAAC;AAiBF,IAAa,YAAY,YAErB,EACE,OAAO,QACP,MACA,WAAW,OACX,UACA,YACA,kBAAkB,aAClB,QACA,UACA,WAAW,OACX,aACA,YAAY,KACZ,KACA,OACA,WACA,GAAG,SAEL,QACG;CACH,MAAM,eAAe,gBAAgB;CAErC,MAAM,cADiB,eAAe,kBACA,SAAS,OAAO,WAAW,OAAO;CAExE,MAAM,WAAW,gBAAgB,SAAS,SAAS;CACnD,MAAM,SAAS,gBAAgB,SAAS,OAAO;CAC/C,MAAM,iBAAiB,WACnB,SACE,eACA,gBACF,SACE,YACA;CAEN,MAAM,CAAC,QAAQ,aAAa,SAAS,MAAM;CAE3C,MAAM,SAAS,OACb,KACD;CACD,MAAM,mBAAmB,OAAuB,KAAK;CAErD,MAAM,YAAY,aACf,SAAgC;
|
|
1
|
+
{"version":3,"file":"CodeBlock.js","names":[],"sources":["../../../components/CodeBlock/CodeBlock.tsx"],"sourcesContent":["import { CheckIcon, CopyIcon } from '@radix-ui/react-icons';\nimport { Highlight, Language, themes } from 'prism-react-renderer';\nimport React, {\n ComponentProps,\n forwardRef,\n useCallback,\n useLayoutEffect,\n useRef,\n useState,\n} from 'react';\n\nimport { CSS, styled } from '../../stitches.config';\nimport { AccessibleIcon } from '../AccessibleIcon';\nimport { Box } from '../Box';\nimport { Button } from '../Button';\nimport { useColorScheme } from '../colorSchemeContext';\nimport type { CodeBlockCopyButtonAlign, CodeBlockLanguage } from './index';\nimport { Prism } from './prism-extend';\n\nconst Pre = styled('pre', {\n m: 0,\n borderRadius: '$2',\n overflow: 'auto',\n border: '1px solid $colors$deepBlue3',\n fontSize: '$2',\n lineHeight: 1.6,\n\n variants: {\n noBorder: {\n true: { border: 'none' },\n },\n },\n});\n\nconst CopyButtonWrapper = styled('div', {\n position: 'absolute',\n zIndex: 1,\n variants: {\n position: {\n top: { top: '$2', right: '$3' },\n topLeft: { top: '$2', left: '$3' },\n bottomRight: { bottom: '$2', right: '$3' },\n bottomLeft: { bottom: '$2', left: '$3' },\n },\n },\n\n defaultVariants: {\n position: 'top',\n },\n});\n\nexport type CodeBlockProps = {\n lang?: CodeBlockLanguage;\n code: string;\n copyable?: boolean;\n copyText?: string;\n copiedText?: string;\n copyButtonAlign?: CodeBlockCopyButtonAlign;\n onCopy?: () => void;\n noBorder?: boolean;\n wrapText?: boolean;\n colorScheme?: 'light' | 'dark';\n maxHeight?: number | string;\n css?: CSS;\n} & Omit<ComponentProps<typeof Pre>, 'css'>;\n\nexport const CodeBlock = forwardRef<HTMLPreElement, CodeBlockProps>(\n (\n {\n lang = 'text',\n code,\n copyable = false,\n copyText,\n copiedText,\n copyButtonAlign = 'top right',\n onCopy,\n noBorder,\n wrapText = false,\n colorScheme,\n maxHeight = 424,\n css,\n style,\n className,\n ...props\n },\n ref,\n ) => {\n const systemScheme = useColorScheme();\n const resolvedScheme = colorScheme ?? systemScheme;\n const prismTheme = resolvedScheme === 'dark' ? themes.nightOwl : themes.nightOwlLight;\n\n const isBottom = copyButtonAlign.includes('bottom');\n const isLeft = copyButtonAlign.includes('left');\n const buttonPosition = isBottom\n ? isLeft\n ? 'bottomLeft'\n : 'bottomRight'\n : isLeft\n ? 'topLeft'\n : 'top';\n\n const [copied, setCopied] = useState(false);\n\n const preRef = useRef<HTMLPreElement | null>(\n null,\n ) as React.MutableRefObject<HTMLPreElement | null>;\n const buttonWrapperRef = useRef<HTMLDivElement>(null);\n\n const setPreRef = useCallback(\n (node: HTMLPreElement | null) => {\n preRef.current = node;\n if (typeof ref === 'function') ref(node);\n else if (ref) (ref as React.MutableRefObject<HTMLPreElement | null>).current = node;\n },\n [ref],\n );\n\n useLayoutEffect(() => {\n if (!copyable) return;\n const pre = preRef.current;\n const wrapper = buttonWrapperRef.current;\n if (!pre || !wrapper) return;\n\n const isBottomAlign = isBottom;\n const borderH = noBorder ? 0 : 2;\n\n const update = () => {\n if (!isLeft) {\n const vScrollbar = Math.max(0, pre.offsetWidth - pre.clientWidth - borderH);\n wrapper.style.right = `${16 + vScrollbar}px`;\n }\n if (isBottomAlign) {\n const hScrollbar = Math.max(0, pre.offsetHeight - pre.clientHeight - borderH);\n wrapper.style.bottom = `${8 + hScrollbar}px`;\n }\n };\n\n update();\n const observer = new ResizeObserver(update);\n observer.observe(pre);\n return () => observer.disconnect();\n }, [copyable, isBottom, isLeft, noBorder]);\n\n const handleCopy = async () => {\n try {\n await navigator.clipboard.writeText(code);\n setCopied(true);\n onCopy?.();\n setTimeout(() => setCopied(false), 1500);\n } catch {\n // clipboard write failed (e.g. permission denied) — leave UI unchanged\n }\n };\n\n const copyButton = copyable ? (\n <Button\n variant=\"secondary\"\n ghost\n size=\"small\"\n type=\"button\"\n onClick={handleCopy}\n css={{\n color: '$hiContrast',\n gap: '$1',\n backgroundColor: '$codeBlockCopyButtonBg',\n height: '32px',\n }}\n >\n <AccessibleIcon label={copied ? 'Copied' : 'Copy'}>\n {copied ? <CheckIcon /> : <CopyIcon />}\n </AccessibleIcon>\n {copied ? copiedText : copyText}\n </Button>\n ) : null;\n\n return (\n <Highlight\n theme={prismTheme}\n code={code}\n language={(Prism.languages[lang] != null ? lang : 'text') as Language}\n >\n {({\n className: highlightClass,\n style: highlightStyle,\n tokens,\n getLineProps,\n getTokenProps,\n }) => (\n <Box css={{ position: 'relative', ...css }}>\n <Pre\n ref={setPreRef}\n className={[highlightClass, className].filter(Boolean).join(' ')}\n style={{ maxHeight, ...highlightStyle, backgroundColor: 'inherit', ...style }}\n noBorder={noBorder}\n {...props}\n >\n <Box\n css={{\n p: '$4',\n ...(copyable && isLeft && isBottom ? { pb: '$7' } : {}),\n ...(copyable && isLeft && !isBottom ? { pt: '$7' } : {}),\n }}\n >\n {tokens.map((line, i) => (\n <div\n key={i}\n {...getLineProps({ line })}\n style={\n wrapText ? { whiteSpace: 'pre-wrap', wordBreak: 'break-all' } : undefined\n }\n >\n {line.map((token, key) => (\n <span key={key} {...getTokenProps({ token })} />\n ))}\n </div>\n ))}\n </Box>\n </Pre>\n {copyButton && (\n <CopyButtonWrapper ref={buttonWrapperRef} position={buttonPosition}>\n {copyButton}\n </CopyButtonWrapper>\n )}\n </Box>\n )}\n </Highlight>\n );\n },\n);\n\nCodeBlock.displayName = 'CodeBlock';\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeBlock.themes.cjs","names":[],"sources":["../../../components/CodeBlock/CodeBlock.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\n\nexport namespace Theme {\n type Colors = {\n codeBlockCopyButtonBg: Property.Color;\n };\n\n export function getLight(): Colors {\n return {\n codeBlockCopyButtonBg: 'transparent',\n };\n }\n\n export function getDark(): Colors {\n return {\n codeBlockCopyButtonBg: 'transparent',\n };\n }\n}\n"],"mappings":";AAEO,IAAA;;CAKE,SAAS,WAAmB;
|
|
1
|
+
{"version":3,"file":"CodeBlock.themes.cjs","names":[],"sources":["../../../components/CodeBlock/CodeBlock.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\n\nexport namespace Theme {\n type Colors = {\n codeBlockCopyButtonBg: Property.Color;\n };\n\n export function getLight(): Colors {\n return {\n codeBlockCopyButtonBg: 'transparent',\n };\n }\n\n export function getDark(): Colors {\n return {\n codeBlockCopyButtonBg: 'transparent',\n };\n }\n}\n"],"mappings":";AAEO,IAAA;;CAKE,SAAS,WAAmB;EACjC,OAAO,EACL,uBAAuB,eACxB;;;CAGI,SAAS,UAAkB;EAChC,OAAO,EACL,uBAAuB,eACxB;;;yBAEJ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeBlock.themes.js","names":[],"sources":["../../../components/CodeBlock/CodeBlock.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\n\nexport namespace Theme {\n type Colors = {\n codeBlockCopyButtonBg: Property.Color;\n };\n\n export function getLight(): Colors {\n return {\n codeBlockCopyButtonBg: 'transparent',\n };\n }\n\n export function getDark(): Colors {\n return {\n codeBlockCopyButtonBg: 'transparent',\n };\n }\n}\n"],"mappings":";AAEO,IAAA;;CAKE,SAAS,WAAmB;
|
|
1
|
+
{"version":3,"file":"CodeBlock.themes.js","names":[],"sources":["../../../components/CodeBlock/CodeBlock.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\n\nexport namespace Theme {\n type Colors = {\n codeBlockCopyButtonBg: Property.Color;\n };\n\n export function getLight(): Colors {\n return {\n codeBlockCopyButtonBg: 'transparent',\n };\n }\n\n export function getDark(): Colors {\n return {\n codeBlockCopyButtonBg: 'transparent',\n };\n }\n}\n"],"mappings":";AAEO,IAAA;;CAKE,SAAS,WAAmB;EACjC,OAAO,EACL,uBAAuB,eACxB;;;CAGI,SAAS,UAAkB;EAChC,OAAO,EACL,uBAAuB,eACxB;;;yBAEJ"}
|