@traefik-labs/faency 12.3.2 → 12.3.3
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/AriaTable/AriaTable.cjs.map +1 -1
- package/dist/components/AriaTable/AriaTable.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.vanilla.cjs.map +1 -1
- package/dist/components/Badge/Badge.vanilla.js.map +1 -1
- package/dist/components/Blockquote/Blockquote.vanilla.cjs.map +1 -1
- package/dist/components/Blockquote/Blockquote.vanilla.css.cjs +0 -1
- package/dist/components/Blockquote/Blockquote.vanilla.css.js +0 -1
- package/dist/components/Blockquote/Blockquote.vanilla.js.map +1 -1
- package/dist/components/Box/Box.cjs.map +1 -1
- package/dist/components/Bubble/Bubble.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.vanilla.cjs.map +1 -1
- package/dist/components/Button/Button.vanilla.js.map +1 -1
- package/dist/components/CodeBlock/CodeBlock.cjs +1 -0
- package/dist/components/CodeBlock/CodeBlock.cjs.map +1 -1
- package/dist/components/CodeBlock/CodeBlock.vanilla.cjs +1 -0
- package/dist/components/CodeBlock/CodeBlock.vanilla.cjs.map +1 -1
- package/dist/components/CodeBlock/prism-extend.cjs +25 -0
- package/dist/components/CodeBlock/prism-extend.cjs.map +1 -0
- package/dist/components/Container/Container.cjs.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/DateTimePickerInput/DateTimePickerInput.cjs.map +1 -1
- package/dist/components/DateTimePickerInput/DateTimePickerInput.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.cjs.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.cjs.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/IconButton/IconButton.vanilla.cjs.map +1 -1
- package/dist/components/IconButton/IconButton.vanilla.js.map +1 -1
- package/dist/components/Image/Image.cjs.map +1 -1
- package/dist/components/Input/Input.cjs.map +1 -1
- package/dist/components/Input/Input.js.map +1 -1
- package/dist/components/Label/Label.vanilla.cjs.map +1 -1
- package/dist/components/Label/Label.vanilla.css.cjs +1 -0
- package/dist/components/Label/Label.vanilla.css.js +1 -0
- package/dist/components/Label/Label.vanilla.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/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/Skeleton/Skeleton.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/Table/Table.cjs.map +1 -1
- package/dist/components/Table/Table.js.map +1 -1
- package/dist/components/Text/Text.cjs.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/package.json +6 -3
|
@@ -3,6 +3,7 @@ const require_AccessibleIcon = require("../AccessibleIcon/AccessibleIcon.cjs");
|
|
|
3
3
|
const require_cssProps = require("../../styles/cssProps.cjs");
|
|
4
4
|
const require_themeContext = require("../../styles/themeContext.cjs");
|
|
5
5
|
const require_Button_vanilla = require("../Button/Button.vanilla.cjs");
|
|
6
|
+
require("./prism-extend.cjs");
|
|
6
7
|
const require_CodeBlock_vanilla_css = require("./CodeBlock.vanilla.css.cjs");
|
|
7
8
|
let _radix_ui_react_icons = require("@radix-ui/react-icons");
|
|
8
9
|
let react = require("react");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeBlock.vanilla.cjs","names":[],"sources":["../../../components/CodeBlock/CodeBlock.vanilla.tsx"],"sourcesContent":["import { CheckIcon, CopyIcon } from '@radix-ui/react-icons';\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { Highlight, Language, themes } from 'prism-react-renderer';\nimport React, {\n forwardRef,\n HTMLAttributes,\n useCallback,\n useLayoutEffect,\n useRef,\n useState,\n} from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { AccessibleIcon } from '../AccessibleIcon';\nimport { ButtonVanilla } from '../Button';\nimport {\n codeContent,\n codeContentBottomPadding,\n codeContentTopPadding,\n copyButtonWrapperBottomLeft,\n copyButtonWrapperBottomRight,\n copyButtonWrapperTop,\n copyButtonWrapperTopLeft,\n pre,\n preNoBorder,\n} from './CodeBlock.vanilla.css';\nimport type { CodeBlockCopyButtonAlign, CodeBlockLanguage } from './index';\nimport { Prism } from './prism-extend';\n\nexport interface CodeBlockVanillaProps\n extends Omit<HTMLAttributes<HTMLPreElement>, 'css'>, CSSProps {\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}\n\nexport const CodeBlockVanilla = forwardRef<HTMLPreElement, CodeBlockVanillaProps>(\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 { colors, resolvedTheme } = useVanillaExtractTheme();\n const effectiveScheme = colorScheme ?? resolvedTheme;\n const prismTheme = effectiveScheme === 'dark' ? themes.nightOwl : themes.nightOwlLight;\n\n const isBottom = copyButtonAlign.includes('bottom');\n const isLeft = copyButtonAlign.includes('left');\n\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n const containerStyles = {\n position: 'relative' as const,\n ...cssStyles,\n ...assignInlineVars(vars),\n };\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 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 (isBottom) {\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 buttonPositionClass = isBottom\n ? isLeft\n ? copyButtonWrapperBottomLeft\n : copyButtonWrapperBottomRight\n : isLeft\n ? copyButtonWrapperTopLeft\n : copyButtonWrapperTop;\n\n const copyButton = copyable ? (\n <ButtonVanilla\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 </ButtonVanilla>\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 <div style={containerStyles}>\n <pre\n ref={setPreRef}\n className={[pre, noBorder ? preNoBorder : '', highlightClass, className]\n .filter(Boolean)\n .join(' ')}\n style={{\n maxHeight,\n ...highlightStyle,\n backgroundColor: 'inherit',\n ...style,\n }}\n {...props}\n >\n <div\n className={[\n codeContent,\n copyable && isLeft && isBottom ? codeContentBottomPadding : '',\n copyable && isLeft && !isBottom ? codeContentTopPadding : '',\n ]\n .filter(Boolean)\n .join(' ')}\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 </div>\n </pre>\n {copyButton && (\n <div ref={buttonWrapperRef} className={buttonPositionClass}>\n {copyButton}\n </div>\n )}\n </div>\n )}\n </Highlight>\n );\n },\n);\n\nCodeBlockVanilla.displayName = 'CodeBlockVanilla';\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"CodeBlock.vanilla.cjs","names":[],"sources":["../../../components/CodeBlock/CodeBlock.vanilla.tsx"],"sourcesContent":["import { CheckIcon, CopyIcon } from '@radix-ui/react-icons';\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { Highlight, Language, themes } from 'prism-react-renderer';\nimport React, {\n forwardRef,\n HTMLAttributes,\n useCallback,\n useLayoutEffect,\n useRef,\n useState,\n} from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { AccessibleIcon } from '../AccessibleIcon';\nimport { ButtonVanilla } from '../Button';\nimport {\n codeContent,\n codeContentBottomPadding,\n codeContentTopPadding,\n copyButtonWrapperBottomLeft,\n copyButtonWrapperBottomRight,\n copyButtonWrapperTop,\n copyButtonWrapperTopLeft,\n pre,\n preNoBorder,\n} from './CodeBlock.vanilla.css';\nimport type { CodeBlockCopyButtonAlign, CodeBlockLanguage } from './index';\nimport { Prism } from './prism-extend';\n\nexport interface CodeBlockVanillaProps\n extends Omit<HTMLAttributes<HTMLPreElement>, 'css'>, CSSProps {\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}\n\nexport const CodeBlockVanilla = forwardRef<HTMLPreElement, CodeBlockVanillaProps>(\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 { colors, resolvedTheme } = useVanillaExtractTheme();\n const effectiveScheme = colorScheme ?? resolvedTheme;\n const prismTheme = effectiveScheme === 'dark' ? themes.nightOwl : themes.nightOwlLight;\n\n const isBottom = copyButtonAlign.includes('bottom');\n const isLeft = copyButtonAlign.includes('left');\n\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n const containerStyles = {\n position: 'relative' as const,\n ...cssStyles,\n ...assignInlineVars(vars),\n };\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 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 (isBottom) {\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 buttonPositionClass = isBottom\n ? isLeft\n ? copyButtonWrapperBottomLeft\n : copyButtonWrapperBottomRight\n : isLeft\n ? copyButtonWrapperTopLeft\n : copyButtonWrapperTop;\n\n const copyButton = copyable ? (\n <ButtonVanilla\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 </ButtonVanilla>\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 <div style={containerStyles}>\n <pre\n ref={setPreRef}\n className={[pre, noBorder ? preNoBorder : '', highlightClass, className]\n .filter(Boolean)\n .join(' ')}\n style={{\n maxHeight,\n ...highlightStyle,\n backgroundColor: 'inherit',\n ...style,\n }}\n {...props}\n >\n <div\n className={[\n codeContent,\n copyable && isLeft && isBottom ? codeContentBottomPadding : '',\n copyable && isLeft && !isBottom ? codeContentTopPadding : '',\n ]\n .filter(Boolean)\n .join(' ')}\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 </div>\n </pre>\n {copyButton && (\n <div ref={buttonWrapperRef} className={buttonPositionClass}>\n {copyButton}\n </div>\n )}\n </div>\n )}\n </Highlight>\n );\n },\n);\n\nCodeBlockVanilla.displayName = 'CodeBlockVanilla';\n"],"mappings":"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"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
|
|
2
|
+
let prism_react_renderer = require("prism-react-renderer");
|
|
3
|
+
let prismjs = require("prismjs");
|
|
4
|
+
prismjs = require_runtime.__toESM(prismjs, 1);
|
|
5
|
+
require("prismjs/components/prism-bash.js");
|
|
6
|
+
require("prismjs/components/prism-csharp.js");
|
|
7
|
+
require("prismjs/components/prism-docker.js");
|
|
8
|
+
require("prismjs/components/prism-hcl.js");
|
|
9
|
+
require("prismjs/components/prism-http.js");
|
|
10
|
+
require("prismjs/components/prism-ini.js");
|
|
11
|
+
require("prismjs/components/prism-java.js");
|
|
12
|
+
require("prismjs/components/prism-markup-templating.js");
|
|
13
|
+
require("prismjs/components/prism-php.js");
|
|
14
|
+
require("prismjs/components/prism-powershell.js");
|
|
15
|
+
require("prismjs/components/prism-protobuf.js");
|
|
16
|
+
require("prismjs/components/prism-ruby.js");
|
|
17
|
+
require("prismjs/components/prism-scala.js");
|
|
18
|
+
require("prismjs/components/prism-shell-session.js");
|
|
19
|
+
require("prismjs/components/prism-toml.js");
|
|
20
|
+
//#region components/CodeBlock/prism-extend.ts
|
|
21
|
+
for (const [key, value] of Object.entries(prismjs.default.languages)) if (typeof value !== "function" && !(key in prism_react_renderer.Prism.languages)) prism_react_renderer.Prism.languages[key] = value;
|
|
22
|
+
prism_react_renderer.Prism.languages.text = { text: /[\s\S]+/ };
|
|
23
|
+
//#endregion
|
|
24
|
+
|
|
25
|
+
//# sourceMappingURL=prism-extend.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"prism-extend.cjs","names":[],"sources":["../../../components/CodeBlock/prism-extend.ts"],"sourcesContent":["/* eslint-disable simple-import-sort/imports */\n// prismjs must be imported first: in the browser it sets window.Prism so language\n// components below can use it as their global Prism reference.\nimport { Prism } from 'prism-react-renderer';\nimport prismjs from 'prismjs';\nimport 'prismjs/components/prism-bash.js';\nimport 'prismjs/components/prism-csharp.js';\nimport 'prismjs/components/prism-docker.js';\nimport 'prismjs/components/prism-hcl.js';\nimport 'prismjs/components/prism-http.js';\nimport 'prismjs/components/prism-ini.js';\nimport 'prismjs/components/prism-java.js';\nimport 'prismjs/components/prism-markup-templating.js';\nimport 'prismjs/components/prism-php.js';\nimport 'prismjs/components/prism-powershell.js';\nimport 'prismjs/components/prism-protobuf.js';\nimport 'prismjs/components/prism-ruby.js';\nimport 'prismjs/components/prism-scala.js';\nimport 'prismjs/components/prism-shell-session.js';\nimport 'prismjs/components/prism-toml.js';\n\n// Copy newly registered grammars from prismjs into prism-react-renderer's Prism.\n// Language component IIFEs register on prismjs's window.Prism, not on PrismRR.\nfor (const [key, value] of Object.entries(prismjs.languages)) {\n if (typeof value !== 'function' && !(key in Prism.languages)) {\n (Prism.languages as Record<string, unknown>)[key] = value;\n }\n}\n\n// 'text' grammar: tokenizes everything as a plain token so prism-react-renderer\n// receives proper Token objects instead of raw strings (which lack a .type field).\nPrism.languages.text = { text: /[\\s\\S]+/ };\n\nexport { Prism };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAuBA,KAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,QAAA,QAAQ,UAAU,CAC1D,KAAI,OAAO,UAAU,cAAc,EAAE,OAAO,qBAAA,MAAM,WAC/C,sBAAA,MAAM,UAAsC,OAAO;AAMxD,qBAAA,MAAM,UAAU,OAAO,EAAE,MAAM,WAAW"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Container.cjs","names":[],"sources":["../../../components/Container/Container.tsx"],"sourcesContent":["import { styled } from '../../stitches.config';\n\nexport const Container = styled('div', {\n // Reset\n boxSizing: 'border-box',\n flexShrink: 0,\n\n // Custom\n ml: 'auto',\n mr: 'auto',\n px: '$5',\n\n variants: {\n size: {\n '1': {\n maxWidth: '425px',\n },\n '2': {\n maxWidth: '768px',\n },\n '3': {\n maxWidth: '1440px',\n },\n '4': {\n maxWidth: 'none',\n },\n },\n noGutter: {\n true: {\n px: 0,\n },\n },\n },\n defaultVariants: {\n size: '4',\n },\n});\n"],"mappings":";AAEA,IAAa,
|
|
1
|
+
{"version":3,"file":"Container.cjs","names":[],"sources":["../../../components/Container/Container.tsx"],"sourcesContent":["import { styled } from '../../stitches.config';\n\nexport const Container = styled('div', {\n // Reset\n boxSizing: 'border-box',\n flexShrink: 0,\n\n // Custom\n ml: 'auto',\n mr: 'auto',\n px: '$5',\n\n variants: {\n size: {\n '1': {\n maxWidth: '425px',\n },\n '2': {\n maxWidth: '768px',\n },\n '3': {\n maxWidth: '1440px',\n },\n '4': {\n maxWidth: 'none',\n },\n },\n noGutter: {\n true: {\n px: 0,\n },\n },\n },\n defaultVariants: {\n size: '4',\n },\n});\n"],"mappings":";AAEA,IAAa,gDAAY,CAAA,OAAO,OAAO;CAErC,WAAW;CACX,YAAY;CAGZ,IAAI;CACJ,IAAI;CACJ,IAAI;CAEJ,UAAU;EACR,MAAM;GACJ,KAAK,EACH,UAAU,SACX;GACD,KAAK,EACH,UAAU,SACX;GACD,KAAK,EACH,UAAU,UACX;GACD,KAAK,EACH,UAAU,QACX;GACF;EACD,UAAU,EACR,MAAM,EACJ,IAAI,GACL,EACF;EACF;CACD,iBAAiB,EACf,MAAM,KACP;CACF,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Container.vanilla.cjs","names":[],"sources":["../../../components/Container/Container.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React, { ElementType } 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 { containerRecipe } from './Container.vanilla.css';\n\ninterface ContainerOwnProps extends CSSProps {\n size?: '1' | '2' | '3' | '4';\n noGutter?: boolean;\n}\n\nexport type ContainerProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n C,\n ContainerOwnProps\n>;\ntype ContainerComponent = PolymorphicComponent<'div', ContainerProps<ElementType>>;\n\nexport const ContainerVanillaComponent = React.forwardRef(\n <C extends ElementType = 'div'>(\n { as, className, css, style, size, noGutter, ...props }: ContainerProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as || 'div';\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 = containerRecipe({ size, noGutter });\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className || ''}`.trim()}\n style={mergedStyles}\n {...props}\n />\n );\n },\n);\n\nContainerVanillaComponent.displayName = 'ContainerVanilla';\n\nexport const ContainerVanilla = ContainerVanillaComponent as ContainerComponent;\n"],"mappings":";;;;;;;;;AAuBA,IAAa,4BAA4B,MAAA,QAAM,YAE3C,EAAE,IAAI,WAAW,KAAK,OAAO,MAAM,UAAU,GAAG,SAChD,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;AAID,QACE,iBAAA,GAAA,kBAAA,KAAC,WAAD;EACO;EACL,WAAW,GALK,8BAAA,gBAAgB;GAAE;GAAM;GAAU,
|
|
1
|
+
{"version":3,"file":"Container.vanilla.cjs","names":[],"sources":["../../../components/Container/Container.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React, { ElementType } 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 { containerRecipe } from './Container.vanilla.css';\n\ninterface ContainerOwnProps extends CSSProps {\n size?: '1' | '2' | '3' | '4';\n noGutter?: boolean;\n}\n\nexport type ContainerProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n C,\n ContainerOwnProps\n>;\ntype ContainerComponent = PolymorphicComponent<'div', ContainerProps<ElementType>>;\n\nexport const ContainerVanillaComponent = React.forwardRef(\n <C extends ElementType = 'div'>(\n { as, className, css, style, size, noGutter, ...props }: ContainerProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as || 'div';\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 = containerRecipe({ size, noGutter });\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className || ''}`.trim()}\n style={mergedStyles}\n {...props}\n />\n );\n },\n);\n\nContainerVanillaComponent.displayName = 'ContainerVanilla';\n\nexport const ContainerVanilla = ContainerVanillaComponent as ContainerComponent;\n"],"mappings":";;;;;;;;;AAuBA,IAAa,4BAA4B,MAAA,QAAM,YAE3C,EAAE,IAAI,WAAW,KAAK,OAAO,MAAM,UAAU,GAAG,SAChD,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;AAID,QACE,iBAAA,GAAA,kBAAA,KAAC,WAAD;EACO;EACL,WAAW,GALK,8BAAA,gBAAgB;GAAE;GAAM;GAAU,CAKpC,CAAY,GAAG,aAAa,KAAK,MAAM;EACrD,OAAO;EACP,GAAI;EACJ,CAAA;EAGP;AAED,0BAA0B,cAAc;AAExC,IAAa,mBAAmB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Container.vanilla.js","names":[],"sources":["../../../components/Container/Container.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React, { ElementType } 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 { containerRecipe } from './Container.vanilla.css';\n\ninterface ContainerOwnProps extends CSSProps {\n size?: '1' | '2' | '3' | '4';\n noGutter?: boolean;\n}\n\nexport type ContainerProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n C,\n ContainerOwnProps\n>;\ntype ContainerComponent = PolymorphicComponent<'div', ContainerProps<ElementType>>;\n\nexport const ContainerVanillaComponent = React.forwardRef(\n <C extends ElementType = 'div'>(\n { as, className, css, style, size, noGutter, ...props }: ContainerProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as || 'div';\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 = containerRecipe({ size, noGutter });\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className || ''}`.trim()}\n style={mergedStyles}\n {...props}\n />\n );\n },\n);\n\nContainerVanillaComponent.displayName = 'ContainerVanilla';\n\nexport const ContainerVanilla = ContainerVanillaComponent as ContainerComponent;\n"],"mappings":";;;;;;;AAuBA,IAAa,4BAA4B,MAAM,YAE3C,EAAE,IAAI,WAAW,KAAK,OAAO,MAAM,UAAU,GAAG,SAChD,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;AAID,QACE,oBAAC,WAAD;EACO;EACL,WAAW,GALK,gBAAgB;GAAE;GAAM;GAAU,
|
|
1
|
+
{"version":3,"file":"Container.vanilla.js","names":[],"sources":["../../../components/Container/Container.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React, { ElementType } 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 { containerRecipe } from './Container.vanilla.css';\n\ninterface ContainerOwnProps extends CSSProps {\n size?: '1' | '2' | '3' | '4';\n noGutter?: boolean;\n}\n\nexport type ContainerProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n C,\n ContainerOwnProps\n>;\ntype ContainerComponent = PolymorphicComponent<'div', ContainerProps<ElementType>>;\n\nexport const ContainerVanillaComponent = React.forwardRef(\n <C extends ElementType = 'div'>(\n { as, className, css, style, size, noGutter, ...props }: ContainerProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as || 'div';\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 = containerRecipe({ size, noGutter });\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className || ''}`.trim()}\n style={mergedStyles}\n {...props}\n />\n );\n },\n);\n\nContainerVanillaComponent.displayName = 'ContainerVanilla';\n\nexport const ContainerVanilla = ContainerVanillaComponent as ContainerComponent;\n"],"mappings":";;;;;;;AAuBA,IAAa,4BAA4B,MAAM,YAE3C,EAAE,IAAI,WAAW,KAAK,OAAO,MAAM,UAAU,GAAG,SAChD,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;AAID,QACE,oBAAC,WAAD;EACO;EACL,WAAW,GALK,gBAAgB;GAAE;GAAM;GAAU,CAKpC,CAAY,GAAG,aAAa,KAAK,MAAM;EACrD,OAAO;EACP,GAAI;EACJ,CAAA;EAGP;AAED,0BAA0B,cAAc;AAExC,IAAa,mBAAmB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateTimePickerInput.cjs","names":[],"sources":["../../../components/DateTimePickerInput/DateTimePickerInput.tsx"],"sourcesContent":["import {\n arrow,\n autoUpdate,\n flip,\n FloatingArrow,\n FloatingFocusManager,\n offset,\n Placement,\n shift,\n useClick,\n useDismiss,\n useFloating,\n useInteractions,\n useRole,\n} from '@floating-ui/react';\nimport { CalendarIcon } from '@radix-ui/react-icons';\nimport { DPUserConfig } from '@rehookify/datepicker';\nimport { format, parse } from 'date-fns';\nimport React, { MouseEventHandler, Ref, useMemo, useRef, useState } from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { Card } from '../Card';\nimport { DateTimePicker } from '../DateTimePicker';\nimport { Input, InputHandle } from '../Input';\n\nconst StyledWrapper = styled('div', {\n display: 'flex',\n position: 'relative',\n width: '100%',\n\n '& .firefox-patch': {\n display: 'none',\n },\n\n '@supports (-moz-appearance: none)': {\n '& .firefox-patch': {\n display: 'block',\n width: '20px',\n height: '20px',\n position: 'absolute',\n right: '17px',\n top: '6px',\n background: '$inputBg',\n\n '&::before': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n pointerEvents: 'none',\n },\n '&::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n pointerEvents: 'none',\n },\n\n '&:focus-visible': {\n '&::before': {\n backgroundColor: '$inputFocusBg',\n },\n '&::after': {\n backgroundColor: '$primary',\n opacity: 0.15,\n },\n },\n },\n\n '@hover': {\n '&:hover .firefox-patch': {\n '&::before': {\n backgroundColor: '$inputHoverBg',\n },\n '&::after': {\n backgroundColor: '$primary',\n opacity: 0.05,\n },\n },\n },\n },\n});\n\nexport type DateTimePickerInputProps = Omit<DPUserConfig, 'onDatesChange' | 'selectedDates'> & {\n inputCSS?: CSS;\n inputProps?: Omit<typeof Input, 'css' | 'onChange' | 'ref' | 'value'>;\n onChange?: (d: Date[]) => void;\n pickerCSS?: CSS;\n pickerPlacement?: Placement;\n showDatePresets?: boolean;\n showTimePicker?: boolean;\n};\n\nexport type DateTimePickerInputVariants = VariantProps<DateTimePickerInputProps>;\n\nexport const DateTimePickerInput = React.forwardRef<\n React.ElementRef<typeof StyledWrapper>,\n DateTimePickerInputProps\n>(\n (\n {\n inputCSS,\n inputProps,\n onChange,\n pickerCSS,\n pickerPlacement,\n showDatePresets,\n showTimePicker,\n ...pickerProps\n },\n fowardedRef,\n ) => {\n const formatStr = \"yyyy-MM-dd'T'HH:mm\";\n\n const arrowRef = useRef(null);\n\n const [inputValue, setInputValue] = useState<string>('');\n const [selectedDates, onDatesChange] = useState<Date[]>([]);\n const [isPickerOpen, setIsPickerOpen] = useState(false);\n\n const middleware = useMemo(\n () => [\n offset(10),\n flip(),\n shift(),\n // arrowRef is passed to floating-ui which handles it correctly\n arrow({ element: arrowRef }),\n ],\n [],\n );\n\n const { refs, floatingStyles, context } = useFloating({\n open: isPickerOpen,\n onOpenChange: setIsPickerOpen,\n placement: pickerPlacement,\n middleware,\n whileElementsMounted: autoUpdate,\n });\n\n const click = useClick(context);\n const dismiss = useDismiss(context);\n const role = useRole(context);\n\n const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss, role]);\n const { onClick: onFirefoxPatchClick } = getReferenceProps();\n\n return (\n <StyledWrapper ref={fowardedRef}>\n <Input\n startAdornment={<CalendarIcon />}\n {...getReferenceProps()}\n {...inputProps}\n css={{ '& input::-webkit-calendar-picker-indicator': { display: 'none' }, ...inputCSS }}\n onChange={(evt) => {\n const value = evt.currentTarget.value;\n setInputValue(value);\n try {\n const newDates = (value as string)\n .split(',')\n .map((d) => parse(d.trim(), formatStr, new Date()));\n onDatesChange(newDates);\n if (onChange) onChange(newDates);\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n } catch (err) {\n // empty\n }\n }}\n ref={refs.setReference as Ref<InputHandle>}\n type=\"datetime-local\"\n value={inputValue}\n />\n <div\n className=\"firefox-patch\"\n onClick={onFirefoxPatchClick as MouseEventHandler<HTMLDivElement>}\n />\n {isPickerOpen && (\n <FloatingFocusManager context={context} initialFocus={-1} modal={false}>\n {/* refs.setFloating is a stable callback ref from floating-ui */}\n <div ref={refs.setFloating} style={floatingStyles} {...getFloatingProps()}>\n <Card>\n <DateTimePicker\n {...pickerProps}\n css={pickerCSS}\n onDatesChange={(d) => {\n onDatesChange(d);\n setInputValue(d.map((date) => format(date, formatStr)).join(', '));\n if (onChange) onChange(d);\n }}\n onFastTravelClick={() => setIsPickerOpen(false)}\n onTimeButtonClick={() => setIsPickerOpen(false)}\n selectedDates={selectedDates}\n showDatePresets={showDatePresets}\n showTimePicker={showTimePicker}\n />\n </Card>\n <FloatingArrow ref={arrowRef} context={context} fill=\"var(--colors-01dp)\" />\n </div>\n </FloatingFocusManager>\n )}\n </StyledWrapper>\n );\n },\n);\n"],"mappings":";;;;;;;;;;;;AAyBA,IAAM,gBAAgB,wBAAA,OAAO,OAAO;CAClC,SAAS;CACT,UAAU;CACV,OAAO;CAEP,oBAAoB,EAClB,SAAS,QACV;CAED,qCAAqC;EACnC,oBAAoB;GAClB,SAAS;GACT,OAAO;GACP,QAAQ;GACR,UAAU;GACV,OAAO;GACP,KAAK;GACL,YAAY;GAEZ,aAAa;IACX,WAAW;IACX,SAAS;IACT,UAAU;IACV,OAAO;IACP,eAAe;IAChB;GACD,YAAY;IACV,WAAW;IACX,SAAS;IACT,UAAU;IACV,OAAO;IACP,eAAe;IAChB;GAED,mBAAmB;IACjB,aAAa,EACX,iBAAiB,iBAClB;IACD,YAAY;KACV,iBAAiB;KACjB,SAAS;KACV;IACF;GACF;EAED,UAAU,EACR,0BAA0B;GACxB,aAAa,EACX,iBAAiB,iBAClB;GACD,YAAY;IACV,iBAAiB;IACjB,SAAS;IACV;GACF,EACF;EACF;CACF,CAAC;AAcF,IAAa,sBAAsB,MAAA,QAAM,YAKrC,EACE,UACA,YACA,UACA,WACA,iBACA,iBACA,gBACA,GAAG,eAEL,gBACG;CACH,MAAM,YAAY;CAElB,MAAM,YAAA,GAAA,MAAA,QAAkB,KAAK;CAE7B,MAAM,CAAC,YAAY,kBAAA,GAAA,MAAA,UAAkC,GAAG;CACxD,MAAM,CAAC,eAAe,kBAAA,GAAA,MAAA,UAAkC,EAAE,CAAC;CAC3D,MAAM,CAAC,cAAc,oBAAA,GAAA,MAAA,UAA4B,MAAM;CAavD,MAAM,EAAE,MAAM,gBAAgB,aAAA,GAAA,mBAAA,aAAwB;EACpD,MAAM;EACN,cAAc;EACd,WAAW;EACX,aAAA,GAAA,MAAA,eAdM;kCACG,GAAG;iCACJ;kCACC;iCAED,EAAE,SAAS,UAAU,CAAC;GAC7B,EACD,EAAE,
|
|
1
|
+
{"version":3,"file":"DateTimePickerInput.cjs","names":[],"sources":["../../../components/DateTimePickerInput/DateTimePickerInput.tsx"],"sourcesContent":["import {\n arrow,\n autoUpdate,\n flip,\n FloatingArrow,\n FloatingFocusManager,\n offset,\n Placement,\n shift,\n useClick,\n useDismiss,\n useFloating,\n useInteractions,\n useRole,\n} from '@floating-ui/react';\nimport { CalendarIcon } from '@radix-ui/react-icons';\nimport { DPUserConfig } from '@rehookify/datepicker';\nimport { format, parse } from 'date-fns';\nimport React, { MouseEventHandler, Ref, useMemo, useRef, useState } from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { Card } from '../Card';\nimport { DateTimePicker } from '../DateTimePicker';\nimport { Input, InputHandle } from '../Input';\n\nconst StyledWrapper = styled('div', {\n display: 'flex',\n position: 'relative',\n width: '100%',\n\n '& .firefox-patch': {\n display: 'none',\n },\n\n '@supports (-moz-appearance: none)': {\n '& .firefox-patch': {\n display: 'block',\n width: '20px',\n height: '20px',\n position: 'absolute',\n right: '17px',\n top: '6px',\n background: '$inputBg',\n\n '&::before': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n pointerEvents: 'none',\n },\n '&::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n pointerEvents: 'none',\n },\n\n '&:focus-visible': {\n '&::before': {\n backgroundColor: '$inputFocusBg',\n },\n '&::after': {\n backgroundColor: '$primary',\n opacity: 0.15,\n },\n },\n },\n\n '@hover': {\n '&:hover .firefox-patch': {\n '&::before': {\n backgroundColor: '$inputHoverBg',\n },\n '&::after': {\n backgroundColor: '$primary',\n opacity: 0.05,\n },\n },\n },\n },\n});\n\nexport type DateTimePickerInputProps = Omit<DPUserConfig, 'onDatesChange' | 'selectedDates'> & {\n inputCSS?: CSS;\n inputProps?: Omit<typeof Input, 'css' | 'onChange' | 'ref' | 'value'>;\n onChange?: (d: Date[]) => void;\n pickerCSS?: CSS;\n pickerPlacement?: Placement;\n showDatePresets?: boolean;\n showTimePicker?: boolean;\n};\n\nexport type DateTimePickerInputVariants = VariantProps<DateTimePickerInputProps>;\n\nexport const DateTimePickerInput = React.forwardRef<\n React.ElementRef<typeof StyledWrapper>,\n DateTimePickerInputProps\n>(\n (\n {\n inputCSS,\n inputProps,\n onChange,\n pickerCSS,\n pickerPlacement,\n showDatePresets,\n showTimePicker,\n ...pickerProps\n },\n fowardedRef,\n ) => {\n const formatStr = \"yyyy-MM-dd'T'HH:mm\";\n\n const arrowRef = useRef(null);\n\n const [inputValue, setInputValue] = useState<string>('');\n const [selectedDates, onDatesChange] = useState<Date[]>([]);\n const [isPickerOpen, setIsPickerOpen] = useState(false);\n\n const middleware = useMemo(\n () => [\n offset(10),\n flip(),\n shift(),\n // arrowRef is passed to floating-ui which handles it correctly\n arrow({ element: arrowRef }),\n ],\n [],\n );\n\n const { refs, floatingStyles, context } = useFloating({\n open: isPickerOpen,\n onOpenChange: setIsPickerOpen,\n placement: pickerPlacement,\n middleware,\n whileElementsMounted: autoUpdate,\n });\n\n const click = useClick(context);\n const dismiss = useDismiss(context);\n const role = useRole(context);\n\n const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss, role]);\n const { onClick: onFirefoxPatchClick } = getReferenceProps();\n\n return (\n <StyledWrapper ref={fowardedRef}>\n <Input\n startAdornment={<CalendarIcon />}\n {...getReferenceProps()}\n {...inputProps}\n css={{ '& input::-webkit-calendar-picker-indicator': { display: 'none' }, ...inputCSS }}\n onChange={(evt) => {\n const value = evt.currentTarget.value;\n setInputValue(value);\n try {\n const newDates = (value as string)\n .split(',')\n .map((d) => parse(d.trim(), formatStr, new Date()));\n onDatesChange(newDates);\n if (onChange) onChange(newDates);\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n } catch (err) {\n // empty\n }\n }}\n ref={refs.setReference as Ref<InputHandle>}\n type=\"datetime-local\"\n value={inputValue}\n />\n <div\n className=\"firefox-patch\"\n onClick={onFirefoxPatchClick as MouseEventHandler<HTMLDivElement>}\n />\n {isPickerOpen && (\n <FloatingFocusManager context={context} initialFocus={-1} modal={false}>\n {/* refs.setFloating is a stable callback ref from floating-ui */}\n <div ref={refs.setFloating} style={floatingStyles} {...getFloatingProps()}>\n <Card>\n <DateTimePicker\n {...pickerProps}\n css={pickerCSS}\n onDatesChange={(d) => {\n onDatesChange(d);\n setInputValue(d.map((date) => format(date, formatStr)).join(', '));\n if (onChange) onChange(d);\n }}\n onFastTravelClick={() => setIsPickerOpen(false)}\n onTimeButtonClick={() => setIsPickerOpen(false)}\n selectedDates={selectedDates}\n showDatePresets={showDatePresets}\n showTimePicker={showTimePicker}\n />\n </Card>\n <FloatingArrow ref={arrowRef} context={context} fill=\"var(--colors-01dp)\" />\n </div>\n </FloatingFocusManager>\n )}\n </StyledWrapper>\n );\n },\n);\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateTimePickerInput.js","names":[],"sources":["../../../components/DateTimePickerInput/DateTimePickerInput.tsx"],"sourcesContent":["import {\n arrow,\n autoUpdate,\n flip,\n FloatingArrow,\n FloatingFocusManager,\n offset,\n Placement,\n shift,\n useClick,\n useDismiss,\n useFloating,\n useInteractions,\n useRole,\n} from '@floating-ui/react';\nimport { CalendarIcon } from '@radix-ui/react-icons';\nimport { DPUserConfig } from '@rehookify/datepicker';\nimport { format, parse } from 'date-fns';\nimport React, { MouseEventHandler, Ref, useMemo, useRef, useState } from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { Card } from '../Card';\nimport { DateTimePicker } from '../DateTimePicker';\nimport { Input, InputHandle } from '../Input';\n\nconst StyledWrapper = styled('div', {\n display: 'flex',\n position: 'relative',\n width: '100%',\n\n '& .firefox-patch': {\n display: 'none',\n },\n\n '@supports (-moz-appearance: none)': {\n '& .firefox-patch': {\n display: 'block',\n width: '20px',\n height: '20px',\n position: 'absolute',\n right: '17px',\n top: '6px',\n background: '$inputBg',\n\n '&::before': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n pointerEvents: 'none',\n },\n '&::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n pointerEvents: 'none',\n },\n\n '&:focus-visible': {\n '&::before': {\n backgroundColor: '$inputFocusBg',\n },\n '&::after': {\n backgroundColor: '$primary',\n opacity: 0.15,\n },\n },\n },\n\n '@hover': {\n '&:hover .firefox-patch': {\n '&::before': {\n backgroundColor: '$inputHoverBg',\n },\n '&::after': {\n backgroundColor: '$primary',\n opacity: 0.05,\n },\n },\n },\n },\n});\n\nexport type DateTimePickerInputProps = Omit<DPUserConfig, 'onDatesChange' | 'selectedDates'> & {\n inputCSS?: CSS;\n inputProps?: Omit<typeof Input, 'css' | 'onChange' | 'ref' | 'value'>;\n onChange?: (d: Date[]) => void;\n pickerCSS?: CSS;\n pickerPlacement?: Placement;\n showDatePresets?: boolean;\n showTimePicker?: boolean;\n};\n\nexport type DateTimePickerInputVariants = VariantProps<DateTimePickerInputProps>;\n\nexport const DateTimePickerInput = React.forwardRef<\n React.ElementRef<typeof StyledWrapper>,\n DateTimePickerInputProps\n>(\n (\n {\n inputCSS,\n inputProps,\n onChange,\n pickerCSS,\n pickerPlacement,\n showDatePresets,\n showTimePicker,\n ...pickerProps\n },\n fowardedRef,\n ) => {\n const formatStr = \"yyyy-MM-dd'T'HH:mm\";\n\n const arrowRef = useRef(null);\n\n const [inputValue, setInputValue] = useState<string>('');\n const [selectedDates, onDatesChange] = useState<Date[]>([]);\n const [isPickerOpen, setIsPickerOpen] = useState(false);\n\n const middleware = useMemo(\n () => [\n offset(10),\n flip(),\n shift(),\n // arrowRef is passed to floating-ui which handles it correctly\n arrow({ element: arrowRef }),\n ],\n [],\n );\n\n const { refs, floatingStyles, context } = useFloating({\n open: isPickerOpen,\n onOpenChange: setIsPickerOpen,\n placement: pickerPlacement,\n middleware,\n whileElementsMounted: autoUpdate,\n });\n\n const click = useClick(context);\n const dismiss = useDismiss(context);\n const role = useRole(context);\n\n const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss, role]);\n const { onClick: onFirefoxPatchClick } = getReferenceProps();\n\n return (\n <StyledWrapper ref={fowardedRef}>\n <Input\n startAdornment={<CalendarIcon />}\n {...getReferenceProps()}\n {...inputProps}\n css={{ '& input::-webkit-calendar-picker-indicator': { display: 'none' }, ...inputCSS }}\n onChange={(evt) => {\n const value = evt.currentTarget.value;\n setInputValue(value);\n try {\n const newDates = (value as string)\n .split(',')\n .map((d) => parse(d.trim(), formatStr, new Date()));\n onDatesChange(newDates);\n if (onChange) onChange(newDates);\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n } catch (err) {\n // empty\n }\n }}\n ref={refs.setReference as Ref<InputHandle>}\n type=\"datetime-local\"\n value={inputValue}\n />\n <div\n className=\"firefox-patch\"\n onClick={onFirefoxPatchClick as MouseEventHandler<HTMLDivElement>}\n />\n {isPickerOpen && (\n <FloatingFocusManager context={context} initialFocus={-1} modal={false}>\n {/* refs.setFloating is a stable callback ref from floating-ui */}\n <div ref={refs.setFloating} style={floatingStyles} {...getFloatingProps()}>\n <Card>\n <DateTimePicker\n {...pickerProps}\n css={pickerCSS}\n onDatesChange={(d) => {\n onDatesChange(d);\n setInputValue(d.map((date) => format(date, formatStr)).join(', '));\n if (onChange) onChange(d);\n }}\n onFastTravelClick={() => setIsPickerOpen(false)}\n onTimeButtonClick={() => setIsPickerOpen(false)}\n selectedDates={selectedDates}\n showDatePresets={showDatePresets}\n showTimePicker={showTimePicker}\n />\n </Card>\n <FloatingArrow ref={arrowRef} context={context} fill=\"var(--colors-01dp)\" />\n </div>\n </FloatingFocusManager>\n )}\n </StyledWrapper>\n );\n },\n);\n"],"mappings":";;;;;;;;;;AAyBA,IAAM,gBAAgB,OAAO,OAAO;CAClC,SAAS;CACT,UAAU;CACV,OAAO;CAEP,oBAAoB,EAClB,SAAS,QACV;CAED,qCAAqC;EACnC,oBAAoB;GAClB,SAAS;GACT,OAAO;GACP,QAAQ;GACR,UAAU;GACV,OAAO;GACP,KAAK;GACL,YAAY;GAEZ,aAAa;IACX,WAAW;IACX,SAAS;IACT,UAAU;IACV,OAAO;IACP,eAAe;IAChB;GACD,YAAY;IACV,WAAW;IACX,SAAS;IACT,UAAU;IACV,OAAO;IACP,eAAe;IAChB;GAED,mBAAmB;IACjB,aAAa,EACX,iBAAiB,iBAClB;IACD,YAAY;KACV,iBAAiB;KACjB,SAAS;KACV;IACF;GACF;EAED,UAAU,EACR,0BAA0B;GACxB,aAAa,EACX,iBAAiB,iBAClB;GACD,YAAY;IACV,iBAAiB;IACjB,SAAS;IACV;GACF,EACF;EACF;CACF,CAAC;AAcF,IAAa,sBAAsB,MAAM,YAKrC,EACE,UACA,YACA,UACA,WACA,iBACA,iBACA,gBACA,GAAG,eAEL,gBACG;CACH,MAAM,YAAY;CAElB,MAAM,WAAW,OAAO,KAAK;CAE7B,MAAM,CAAC,YAAY,iBAAiB,SAAiB,GAAG;CACxD,MAAM,CAAC,eAAe,iBAAiB,SAAiB,EAAE,CAAC;CAC3D,MAAM,CAAC,cAAc,mBAAmB,SAAS,MAAM;CAavD,MAAM,EAAE,MAAM,gBAAgB,YAAY,YAAY;EACpD,MAAM;EACN,cAAc;EACd,WAAW;EACX,YAfiB,cACX;GACJ,OAAO,GAAG;GACV,MAAM;GACN,OAAO;GAEP,MAAM,EAAE,SAAS,UAAU,CAAC;GAC7B,EACD,EAAE,
|
|
1
|
+
{"version":3,"file":"DateTimePickerInput.js","names":[],"sources":["../../../components/DateTimePickerInput/DateTimePickerInput.tsx"],"sourcesContent":["import {\n arrow,\n autoUpdate,\n flip,\n FloatingArrow,\n FloatingFocusManager,\n offset,\n Placement,\n shift,\n useClick,\n useDismiss,\n useFloating,\n useInteractions,\n useRole,\n} from '@floating-ui/react';\nimport { CalendarIcon } from '@radix-ui/react-icons';\nimport { DPUserConfig } from '@rehookify/datepicker';\nimport { format, parse } from 'date-fns';\nimport React, { MouseEventHandler, Ref, useMemo, useRef, useState } from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { Card } from '../Card';\nimport { DateTimePicker } from '../DateTimePicker';\nimport { Input, InputHandle } from '../Input';\n\nconst StyledWrapper = styled('div', {\n display: 'flex',\n position: 'relative',\n width: '100%',\n\n '& .firefox-patch': {\n display: 'none',\n },\n\n '@supports (-moz-appearance: none)': {\n '& .firefox-patch': {\n display: 'block',\n width: '20px',\n height: '20px',\n position: 'absolute',\n right: '17px',\n top: '6px',\n background: '$inputBg',\n\n '&::before': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n pointerEvents: 'none',\n },\n '&::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n pointerEvents: 'none',\n },\n\n '&:focus-visible': {\n '&::before': {\n backgroundColor: '$inputFocusBg',\n },\n '&::after': {\n backgroundColor: '$primary',\n opacity: 0.15,\n },\n },\n },\n\n '@hover': {\n '&:hover .firefox-patch': {\n '&::before': {\n backgroundColor: '$inputHoverBg',\n },\n '&::after': {\n backgroundColor: '$primary',\n opacity: 0.05,\n },\n },\n },\n },\n});\n\nexport type DateTimePickerInputProps = Omit<DPUserConfig, 'onDatesChange' | 'selectedDates'> & {\n inputCSS?: CSS;\n inputProps?: Omit<typeof Input, 'css' | 'onChange' | 'ref' | 'value'>;\n onChange?: (d: Date[]) => void;\n pickerCSS?: CSS;\n pickerPlacement?: Placement;\n showDatePresets?: boolean;\n showTimePicker?: boolean;\n};\n\nexport type DateTimePickerInputVariants = VariantProps<DateTimePickerInputProps>;\n\nexport const DateTimePickerInput = React.forwardRef<\n React.ElementRef<typeof StyledWrapper>,\n DateTimePickerInputProps\n>(\n (\n {\n inputCSS,\n inputProps,\n onChange,\n pickerCSS,\n pickerPlacement,\n showDatePresets,\n showTimePicker,\n ...pickerProps\n },\n fowardedRef,\n ) => {\n const formatStr = \"yyyy-MM-dd'T'HH:mm\";\n\n const arrowRef = useRef(null);\n\n const [inputValue, setInputValue] = useState<string>('');\n const [selectedDates, onDatesChange] = useState<Date[]>([]);\n const [isPickerOpen, setIsPickerOpen] = useState(false);\n\n const middleware = useMemo(\n () => [\n offset(10),\n flip(),\n shift(),\n // arrowRef is passed to floating-ui which handles it correctly\n arrow({ element: arrowRef }),\n ],\n [],\n );\n\n const { refs, floatingStyles, context } = useFloating({\n open: isPickerOpen,\n onOpenChange: setIsPickerOpen,\n placement: pickerPlacement,\n middleware,\n whileElementsMounted: autoUpdate,\n });\n\n const click = useClick(context);\n const dismiss = useDismiss(context);\n const role = useRole(context);\n\n const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss, role]);\n const { onClick: onFirefoxPatchClick } = getReferenceProps();\n\n return (\n <StyledWrapper ref={fowardedRef}>\n <Input\n startAdornment={<CalendarIcon />}\n {...getReferenceProps()}\n {...inputProps}\n css={{ '& input::-webkit-calendar-picker-indicator': { display: 'none' }, ...inputCSS }}\n onChange={(evt) => {\n const value = evt.currentTarget.value;\n setInputValue(value);\n try {\n const newDates = (value as string)\n .split(',')\n .map((d) => parse(d.trim(), formatStr, new Date()));\n onDatesChange(newDates);\n if (onChange) onChange(newDates);\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n } catch (err) {\n // empty\n }\n }}\n ref={refs.setReference as Ref<InputHandle>}\n type=\"datetime-local\"\n value={inputValue}\n />\n <div\n className=\"firefox-patch\"\n onClick={onFirefoxPatchClick as MouseEventHandler<HTMLDivElement>}\n />\n {isPickerOpen && (\n <FloatingFocusManager context={context} initialFocus={-1} modal={false}>\n {/* refs.setFloating is a stable callback ref from floating-ui */}\n <div ref={refs.setFloating} style={floatingStyles} {...getFloatingProps()}>\n <Card>\n <DateTimePicker\n {...pickerProps}\n css={pickerCSS}\n onDatesChange={(d) => {\n onDatesChange(d);\n setInputValue(d.map((date) => format(date, formatStr)).join(', '));\n if (onChange) onChange(d);\n }}\n onFastTravelClick={() => setIsPickerOpen(false)}\n onTimeButtonClick={() => setIsPickerOpen(false)}\n selectedDates={selectedDates}\n showDatePresets={showDatePresets}\n showTimePicker={showTimePicker}\n />\n </Card>\n <FloatingArrow ref={arrowRef} context={context} fill=\"var(--colors-01dp)\" />\n </div>\n </FloatingFocusManager>\n )}\n </StyledWrapper>\n );\n },\n);\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Elevation.vanilla.cjs","names":[],"sources":["../../../components/Elevation/Elevation.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 { elevationRecipe } from './Elevation.vanilla.css';\n\ntype ElevationRecipeVariants = NonNullable<RecipeVariants<typeof elevationRecipe>>;\n\ninterface ElevationOwnProps extends CSSProps {\n variant?: ElevationRecipeVariants['variant'];\n}\n\nexport type ElevationVanillaProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n C,\n ElevationOwnProps\n>;\n\ntype ElevationVanillaComponent = PolymorphicComponent<'div', ElevationVanillaProps<ElementType>>;\n\nconst ElevationVanillaComponentImpl = forwardRef(\n <C extends ElementType = 'div'>(\n { as, className, css, style, variant, ...props }: ElevationVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as || 'div';\n const { colors } = useVanillaExtractTheme();\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n const mergedStyles = { ...cssStyles, ...style, ...assignInlineVars(vars) };\n const recipeClass = elevationRecipe({ variant });\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className || ''}`.trim()}\n style={mergedStyles}\n {...props}\n />\n );\n },\n);\n\nElevationVanillaComponentImpl.displayName = 'ElevationVanilla';\n\nexport const ElevationVanilla = ElevationVanillaComponentImpl as ElevationVanillaComponent;\n"],"mappings":";;;;;;;;AA0BA,IAAM,iCAAA,GAAA,MAAA,aAEF,EAAE,IAAI,WAAW,KAAK,OAAO,SAAS,GAAG,SACzC,QACG;CACH,MAAM,YAAY,MAAM;CACxB,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;AAG1E,QACE,iBAAA,GAAA,kBAAA,KAAC,WAAD;EACO;EACL,WAAW,GALK,8BAAA,gBAAgB,EAAE,SAAS,
|
|
1
|
+
{"version":3,"file":"Elevation.vanilla.cjs","names":[],"sources":["../../../components/Elevation/Elevation.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 { elevationRecipe } from './Elevation.vanilla.css';\n\ntype ElevationRecipeVariants = NonNullable<RecipeVariants<typeof elevationRecipe>>;\n\ninterface ElevationOwnProps extends CSSProps {\n variant?: ElevationRecipeVariants['variant'];\n}\n\nexport type ElevationVanillaProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n C,\n ElevationOwnProps\n>;\n\ntype ElevationVanillaComponent = PolymorphicComponent<'div', ElevationVanillaProps<ElementType>>;\n\nconst ElevationVanillaComponentImpl = forwardRef(\n <C extends ElementType = 'div'>(\n { as, className, css, style, variant, ...props }: ElevationVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as || 'div';\n const { colors } = useVanillaExtractTheme();\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n const mergedStyles = { ...cssStyles, ...style, ...assignInlineVars(vars) };\n const recipeClass = elevationRecipe({ variant });\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className || ''}`.trim()}\n style={mergedStyles}\n {...props}\n />\n );\n },\n);\n\nElevationVanillaComponentImpl.displayName = 'ElevationVanilla';\n\nexport const ElevationVanilla = ElevationVanillaComponentImpl as ElevationVanillaComponent;\n"],"mappings":";;;;;;;;AA0BA,IAAM,iCAAA,GAAA,MAAA,aAEF,EAAE,IAAI,WAAW,KAAK,OAAO,SAAS,GAAG,SACzC,QACG;CACH,MAAM,YAAY,MAAM;CACxB,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;AAG1E,QACE,iBAAA,GAAA,kBAAA,KAAC,WAAD;EACO;EACL,WAAW,GALK,8BAAA,gBAAgB,EAAE,SAAS,CAK7B,CAAY,GAAG,aAAa,KAAK,MAAM;EACrD,OAAO;EACP,GAAI;EACJ,CAAA;EAGP;AAED,8BAA8B,cAAc;AAE5C,IAAa,mBAAmB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Elevation.vanilla.js","names":[],"sources":["../../../components/Elevation/Elevation.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 { elevationRecipe } from './Elevation.vanilla.css';\n\ntype ElevationRecipeVariants = NonNullable<RecipeVariants<typeof elevationRecipe>>;\n\ninterface ElevationOwnProps extends CSSProps {\n variant?: ElevationRecipeVariants['variant'];\n}\n\nexport type ElevationVanillaProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n C,\n ElevationOwnProps\n>;\n\ntype ElevationVanillaComponent = PolymorphicComponent<'div', ElevationVanillaProps<ElementType>>;\n\nconst ElevationVanillaComponentImpl = forwardRef(\n <C extends ElementType = 'div'>(\n { as, className, css, style, variant, ...props }: ElevationVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as || 'div';\n const { colors } = useVanillaExtractTheme();\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n const mergedStyles = { ...cssStyles, ...style, ...assignInlineVars(vars) };\n const recipeClass = elevationRecipe({ variant });\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className || ''}`.trim()}\n style={mergedStyles}\n {...props}\n />\n );\n },\n);\n\nElevationVanillaComponentImpl.displayName = 'ElevationVanilla';\n\nexport const ElevationVanilla = ElevationVanillaComponentImpl as ElevationVanillaComponent;\n"],"mappings":";;;;;;;AA0BA,IAAM,gCAAgC,YAElC,EAAE,IAAI,WAAW,KAAK,OAAO,SAAS,GAAG,SACzC,QACG;CACH,MAAM,YAAY,MAAM;CACxB,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;AAG1E,QACE,oBAAC,WAAD;EACO;EACL,WAAW,GALK,gBAAgB,EAAE,SAAS,
|
|
1
|
+
{"version":3,"file":"Elevation.vanilla.js","names":[],"sources":["../../../components/Elevation/Elevation.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 { elevationRecipe } from './Elevation.vanilla.css';\n\ntype ElevationRecipeVariants = NonNullable<RecipeVariants<typeof elevationRecipe>>;\n\ninterface ElevationOwnProps extends CSSProps {\n variant?: ElevationRecipeVariants['variant'];\n}\n\nexport type ElevationVanillaProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n C,\n ElevationOwnProps\n>;\n\ntype ElevationVanillaComponent = PolymorphicComponent<'div', ElevationVanillaProps<ElementType>>;\n\nconst ElevationVanillaComponentImpl = forwardRef(\n <C extends ElementType = 'div'>(\n { as, className, css, style, variant, ...props }: ElevationVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as || 'div';\n const { colors } = useVanillaExtractTheme();\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n const mergedStyles = { ...cssStyles, ...style, ...assignInlineVars(vars) };\n const recipeClass = elevationRecipe({ variant });\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className || ''}`.trim()}\n style={mergedStyles}\n {...props}\n />\n );\n },\n);\n\nElevationVanillaComponentImpl.displayName = 'ElevationVanilla';\n\nexport const ElevationVanilla = ElevationVanillaComponentImpl as ElevationVanillaComponent;\n"],"mappings":";;;;;;;AA0BA,IAAM,gCAAgC,YAElC,EAAE,IAAI,WAAW,KAAK,OAAO,SAAS,GAAG,SACzC,QACG;CACH,MAAM,YAAY,MAAM;CACxB,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;AAG1E,QACE,oBAAC,WAAD;EACO;EACL,WAAW,GALK,gBAAgB,EAAE,SAAS,CAK7B,CAAY,GAAG,aAAa,KAAK,MAAM;EACrD,OAAO;EACP,GAAI;EACJ,CAAA;EAGP;AAED,8BAA8B,cAAc;AAE5C,IAAa,mBAAmB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Flex.cjs","names":[],"sources":["../../../components/Flex/Flex.tsx"],"sourcesContent":["import { styled } from '../../stitches.config';\n\nexport const Flex = styled('div', {\n boxSizing: 'border-box',\n display: 'flex',\n\n variants: {\n direction: {\n row: {\n flexDirection: 'row',\n },\n column: {\n flexDirection: 'column',\n },\n rowReverse: {\n flexDirection: 'row-reverse',\n },\n columnReverse: {\n flexDirection: 'column-reverse',\n },\n },\n align: {\n start: {\n alignItems: 'flex-start',\n },\n center: {\n alignItems: 'center',\n },\n end: {\n alignItems: 'flex-end',\n },\n stretch: {\n alignItems: 'stretch',\n },\n baseline: {\n alignItems: 'baseline',\n },\n ['space-evenly']: {\n alignItems: 'space-evenly',\n },\n ['space-between']: {\n alignItems: 'space-between',\n },\n ['space-around']: {\n alignItems: 'space-around',\n },\n },\n justify: {\n start: {\n justifyContent: 'flex-start',\n },\n center: {\n justifyContent: 'center',\n },\n end: {\n justifyContent: 'flex-end',\n },\n between: {\n justifyContent: 'space-between',\n },\n ['space-evenly']: {\n justifyContent: 'space-evenly',\n },\n ['space-between']: {\n justifyContent: 'space-between',\n },\n ['space-around']: {\n justifyContent: 'space-around',\n },\n },\n wrap: {\n noWrap: {\n flexWrap: 'nowrap',\n },\n wrap: {\n flexWrap: 'wrap',\n },\n wrapReverse: {\n flexWrap: 'wrap-reverse',\n },\n },\n gap: {\n 1: {\n gap: '$1',\n },\n 2: {\n gap: '$2',\n },\n 3: {\n gap: '$3',\n },\n 4: {\n gap: '$4',\n },\n 5: {\n gap: '$5',\n },\n 6: {\n gap: '$6',\n },\n 7: {\n gap: '$7',\n },\n 8: {\n gap: '$8',\n },\n 9: {\n gap: '$9',\n },\n },\n },\n defaultVariants: {\n direction: 'row',\n align: 'stretch',\n justify: 'start',\n wrap: 'noWrap',\n },\n});\n"],"mappings":";AAEA,IAAa,
|
|
1
|
+
{"version":3,"file":"Flex.cjs","names":[],"sources":["../../../components/Flex/Flex.tsx"],"sourcesContent":["import { styled } from '../../stitches.config';\n\nexport const Flex = styled('div', {\n boxSizing: 'border-box',\n display: 'flex',\n\n variants: {\n direction: {\n row: {\n flexDirection: 'row',\n },\n column: {\n flexDirection: 'column',\n },\n rowReverse: {\n flexDirection: 'row-reverse',\n },\n columnReverse: {\n flexDirection: 'column-reverse',\n },\n },\n align: {\n start: {\n alignItems: 'flex-start',\n },\n center: {\n alignItems: 'center',\n },\n end: {\n alignItems: 'flex-end',\n },\n stretch: {\n alignItems: 'stretch',\n },\n baseline: {\n alignItems: 'baseline',\n },\n ['space-evenly']: {\n alignItems: 'space-evenly',\n },\n ['space-between']: {\n alignItems: 'space-between',\n },\n ['space-around']: {\n alignItems: 'space-around',\n },\n },\n justify: {\n start: {\n justifyContent: 'flex-start',\n },\n center: {\n justifyContent: 'center',\n },\n end: {\n justifyContent: 'flex-end',\n },\n between: {\n justifyContent: 'space-between',\n },\n ['space-evenly']: {\n justifyContent: 'space-evenly',\n },\n ['space-between']: {\n justifyContent: 'space-between',\n },\n ['space-around']: {\n justifyContent: 'space-around',\n },\n },\n wrap: {\n noWrap: {\n flexWrap: 'nowrap',\n },\n wrap: {\n flexWrap: 'wrap',\n },\n wrapReverse: {\n flexWrap: 'wrap-reverse',\n },\n },\n gap: {\n 1: {\n gap: '$1',\n },\n 2: {\n gap: '$2',\n },\n 3: {\n gap: '$3',\n },\n 4: {\n gap: '$4',\n },\n 5: {\n gap: '$5',\n },\n 6: {\n gap: '$6',\n },\n 7: {\n gap: '$7',\n },\n 8: {\n gap: '$8',\n },\n 9: {\n gap: '$9',\n },\n },\n },\n defaultVariants: {\n direction: 'row',\n align: 'stretch',\n justify: 'start',\n wrap: 'noWrap',\n },\n});\n"],"mappings":";AAEA,IAAa,2CAAO,CAAA,OAAO,OAAO;CAChC,WAAW;CACX,SAAS;CAET,UAAU;EACR,WAAW;GACT,KAAK,EACH,eAAe,OAChB;GACD,QAAQ,EACN,eAAe,UAChB;GACD,YAAY,EACV,eAAe,eAChB;GACD,eAAe,EACb,eAAe,kBAChB;GACF;EACD,OAAO;GACL,OAAO,EACL,YAAY,cACb;GACD,QAAQ,EACN,YAAY,UACb;GACD,KAAK,EACH,YAAY,YACb;GACD,SAAS,EACP,YAAY,WACb;GACD,UAAU,EACR,YAAY,YACb;IACA,iBAAiB,EAChB,YAAY,gBACb;IACA,kBAAkB,EACjB,YAAY,iBACb;IACA,iBAAiB,EAChB,YAAY,gBACb;GACF;EACD,SAAS;GACP,OAAO,EACL,gBAAgB,cACjB;GACD,QAAQ,EACN,gBAAgB,UACjB;GACD,KAAK,EACH,gBAAgB,YACjB;GACD,SAAS,EACP,gBAAgB,iBACjB;IACA,iBAAiB,EAChB,gBAAgB,gBACjB;IACA,kBAAkB,EACjB,gBAAgB,iBACjB;IACA,iBAAiB,EAChB,gBAAgB,gBACjB;GACF;EACD,MAAM;GACJ,QAAQ,EACN,UAAU,UACX;GACD,MAAM,EACJ,UAAU,QACX;GACD,aAAa,EACX,UAAU,gBACX;GACF;EACD,KAAK;GACH,GAAG,EACD,KAAK,MACN;GACD,GAAG,EACD,KAAK,MACN;GACD,GAAG,EACD,KAAK,MACN;GACD,GAAG,EACD,KAAK,MACN;GACD,GAAG,EACD,KAAK,MACN;GACD,GAAG,EACD,KAAK,MACN;GACD,GAAG,EACD,KAAK,MACN;GACD,GAAG,EACD,KAAK,MACN;GACD,GAAG,EACD,KAAK,MACN;GACF;EACF;CACD,iBAAiB;EACf,WAAW;EACX,OAAO;EACP,SAAS;EACT,MAAM;EACP;CACF,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Flex.vanilla.cjs","names":[],"sources":["../../../components/Flex/Flex.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React, { ElementType } 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 type {\n FlexAlignSimplified,\n FlexDirection,\n FlexJustifySimplified,\n Gap,\n} from '../../styles/types';\nimport { flexRecipe } from './Flex.vanilla.css';\n\ninterface FlexOwnProps extends CSSProps {\n direction?: FlexDirection;\n align?: FlexAlignSimplified;\n justify?: FlexJustifySimplified;\n wrap?: 'wrap' | 'noWrap' | 'wrapReverse';\n gap?: Gap;\n}\n\nexport type FlexProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, FlexOwnProps>;\ntype FlexComponent = PolymorphicComponent<'div', FlexProps<ElementType>>;\n\nexport const FlexVanillaComponent = React.forwardRef(\n <C extends ElementType = 'div'>(\n { as, className, css, style, direction, align, justify, wrap, gap, ...props }: FlexProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as || 'div';\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 = flexRecipe({ direction, align, justify, wrap, gap });\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className || ''}`.trim()}\n style={mergedStyles}\n {...props}\n />\n );\n },\n);\n\nFlexVanillaComponent.displayName = 'FlexVanilla';\n\nexport const FlexVanilla = FlexVanillaComponent as FlexComponent;\n"],"mappings":";;;;;;;;;AA6BA,IAAa,uBAAuB,MAAA,QAAM,YAEtC,EAAE,IAAI,WAAW,KAAK,OAAO,WAAW,OAAO,SAAS,MAAM,KAAK,GAAG,SACtE,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;AAID,QACE,iBAAA,GAAA,kBAAA,KAAC,WAAD;EACO;EACL,WAAW,GALK,yBAAA,WAAW;GAAE;GAAW;GAAO;GAAS;GAAM;GAAK,
|
|
1
|
+
{"version":3,"file":"Flex.vanilla.cjs","names":[],"sources":["../../../components/Flex/Flex.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React, { ElementType } 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 type {\n FlexAlignSimplified,\n FlexDirection,\n FlexJustifySimplified,\n Gap,\n} from '../../styles/types';\nimport { flexRecipe } from './Flex.vanilla.css';\n\ninterface FlexOwnProps extends CSSProps {\n direction?: FlexDirection;\n align?: FlexAlignSimplified;\n justify?: FlexJustifySimplified;\n wrap?: 'wrap' | 'noWrap' | 'wrapReverse';\n gap?: Gap;\n}\n\nexport type FlexProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, FlexOwnProps>;\ntype FlexComponent = PolymorphicComponent<'div', FlexProps<ElementType>>;\n\nexport const FlexVanillaComponent = React.forwardRef(\n <C extends ElementType = 'div'>(\n { as, className, css, style, direction, align, justify, wrap, gap, ...props }: FlexProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as || 'div';\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 = flexRecipe({ direction, align, justify, wrap, gap });\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className || ''}`.trim()}\n style={mergedStyles}\n {...props}\n />\n );\n },\n);\n\nFlexVanillaComponent.displayName = 'FlexVanilla';\n\nexport const FlexVanilla = FlexVanillaComponent as FlexComponent;\n"],"mappings":";;;;;;;;;AA6BA,IAAa,uBAAuB,MAAA,QAAM,YAEtC,EAAE,IAAI,WAAW,KAAK,OAAO,WAAW,OAAO,SAAS,MAAM,KAAK,GAAG,SACtE,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;AAID,QACE,iBAAA,GAAA,kBAAA,KAAC,WAAD;EACO;EACL,WAAW,GALK,yBAAA,WAAW;GAAE;GAAW;GAAO;GAAS;GAAM;GAAK,CAKrD,CAAY,GAAG,aAAa,KAAK,MAAM;EACrD,OAAO;EACP,GAAI;EACJ,CAAA;EAGP;AAED,qBAAqB,cAAc;AAEnC,IAAa,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Flex.vanilla.js","names":[],"sources":["../../../components/Flex/Flex.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React, { ElementType } 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 type {\n FlexAlignSimplified,\n FlexDirection,\n FlexJustifySimplified,\n Gap,\n} from '../../styles/types';\nimport { flexRecipe } from './Flex.vanilla.css';\n\ninterface FlexOwnProps extends CSSProps {\n direction?: FlexDirection;\n align?: FlexAlignSimplified;\n justify?: FlexJustifySimplified;\n wrap?: 'wrap' | 'noWrap' | 'wrapReverse';\n gap?: Gap;\n}\n\nexport type FlexProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, FlexOwnProps>;\ntype FlexComponent = PolymorphicComponent<'div', FlexProps<ElementType>>;\n\nexport const FlexVanillaComponent = React.forwardRef(\n <C extends ElementType = 'div'>(\n { as, className, css, style, direction, align, justify, wrap, gap, ...props }: FlexProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as || 'div';\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 = flexRecipe({ direction, align, justify, wrap, gap });\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className || ''}`.trim()}\n style={mergedStyles}\n {...props}\n />\n );\n },\n);\n\nFlexVanillaComponent.displayName = 'FlexVanilla';\n\nexport const FlexVanilla = FlexVanillaComponent as FlexComponent;\n"],"mappings":";;;;;;;AA6BA,IAAa,uBAAuB,MAAM,YAEtC,EAAE,IAAI,WAAW,KAAK,OAAO,WAAW,OAAO,SAAS,MAAM,KAAK,GAAG,SACtE,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;AAID,QACE,oBAAC,WAAD;EACO;EACL,WAAW,GALK,WAAW;GAAE;GAAW;GAAO;GAAS;GAAM;GAAK,
|
|
1
|
+
{"version":3,"file":"Flex.vanilla.js","names":[],"sources":["../../../components/Flex/Flex.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React, { ElementType } 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 type {\n FlexAlignSimplified,\n FlexDirection,\n FlexJustifySimplified,\n Gap,\n} from '../../styles/types';\nimport { flexRecipe } from './Flex.vanilla.css';\n\ninterface FlexOwnProps extends CSSProps {\n direction?: FlexDirection;\n align?: FlexAlignSimplified;\n justify?: FlexJustifySimplified;\n wrap?: 'wrap' | 'noWrap' | 'wrapReverse';\n gap?: Gap;\n}\n\nexport type FlexProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, FlexOwnProps>;\ntype FlexComponent = PolymorphicComponent<'div', FlexProps<ElementType>>;\n\nexport const FlexVanillaComponent = React.forwardRef(\n <C extends ElementType = 'div'>(\n { as, className, css, style, direction, align, justify, wrap, gap, ...props }: FlexProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as || 'div';\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 = flexRecipe({ direction, align, justify, wrap, gap });\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className || ''}`.trim()}\n style={mergedStyles}\n {...props}\n />\n );\n },\n);\n\nFlexVanillaComponent.displayName = 'FlexVanilla';\n\nexport const FlexVanilla = FlexVanillaComponent as FlexComponent;\n"],"mappings":";;;;;;;AA6BA,IAAa,uBAAuB,MAAM,YAEtC,EAAE,IAAI,WAAW,KAAK,OAAO,WAAW,OAAO,SAAS,MAAM,KAAK,GAAG,SACtE,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;AAID,QACE,oBAAC,WAAD;EACO;EACL,WAAW,GALK,WAAW;GAAE;GAAW;GAAO;GAAS;GAAM;GAAK,CAKrD,CAAY,GAAG,aAAa,KAAK,MAAM;EACrD,OAAO;EACP,GAAI;EACJ,CAAA;EAGP;AAED,qBAAqB,cAAc;AAEnC,IAAa,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Grid.cjs","names":[],"sources":["../../../components/Grid/Grid.tsx"],"sourcesContent":["import { styled } from '../../stitches.config';\n\nexport const Grid = styled('div', {\n boxSizing: 'border-box',\n display: 'grid',\n\n variants: {\n align: {\n start: {\n alignItems: 'start',\n },\n center: {\n alignItems: 'center',\n },\n end: {\n alignItems: 'end',\n },\n stretch: {\n alignItems: 'stretch',\n },\n baseline: {\n alignItems: 'baseline',\n },\n },\n justify: {\n start: {\n justifyContent: 'start',\n },\n center: {\n justifyContent: 'center',\n },\n end: {\n justifyContent: 'end',\n },\n between: {\n justifyContent: 'space-between',\n },\n },\n flow: {\n row: {\n gridAutoFlow: 'row',\n },\n column: {\n gridAutoFlow: 'column',\n },\n dense: {\n gridAutoFlow: 'dense',\n },\n rowDense: {\n gridAutoFlow: 'row dense',\n },\n columnDense: {\n gridAutoFlow: 'column dense',\n },\n },\n columns: {\n 1: {\n gridTemplateColumns: 'repeat(1, 1fr)',\n },\n 2: {\n gridTemplateColumns: 'repeat(2, 1fr)',\n },\n 3: {\n gridTemplateColumns: 'repeat(3, 1fr)',\n },\n 4: {\n gridTemplateColumns: 'repeat(4, 1fr)',\n },\n },\n gap: {\n 1: {\n gap: '$1',\n },\n 2: {\n gap: '$2',\n },\n 3: {\n gap: '$3',\n },\n 4: {\n gap: '$4',\n },\n 5: {\n gap: '$5',\n },\n 6: {\n gap: '$6',\n },\n 7: {\n gap: '$7',\n },\n 8: {\n gap: '$8',\n },\n 9: {\n gap: '$9',\n },\n },\n gapX: {\n 1: {\n columnGap: '$1',\n },\n 2: {\n columnGap: '$2',\n },\n 3: {\n columnGap: '$3',\n },\n 4: {\n columnGap: '$4',\n },\n 5: {\n columnGap: '$5',\n },\n 6: {\n columnGap: '$6',\n },\n 7: {\n columnGap: '$7',\n },\n 8: {\n columnGap: '$8',\n },\n 9: {\n columnGap: '$9',\n },\n },\n gapY: {\n 1: {\n rowGap: '$1',\n },\n 2: {\n rowGap: '$2',\n },\n 3: {\n rowGap: '$3',\n },\n 4: {\n rowGap: '$4',\n },\n 5: {\n rowGap: '$5',\n },\n 6: {\n rowGap: '$6',\n },\n 7: {\n rowGap: '$7',\n },\n 8: {\n rowGap: '$8',\n },\n 9: {\n rowGap: '$9',\n },\n },\n },\n});\n"],"mappings":";AAEA,IAAa,
|
|
1
|
+
{"version":3,"file":"Grid.cjs","names":[],"sources":["../../../components/Grid/Grid.tsx"],"sourcesContent":["import { styled } from '../../stitches.config';\n\nexport const Grid = styled('div', {\n boxSizing: 'border-box',\n display: 'grid',\n\n variants: {\n align: {\n start: {\n alignItems: 'start',\n },\n center: {\n alignItems: 'center',\n },\n end: {\n alignItems: 'end',\n },\n stretch: {\n alignItems: 'stretch',\n },\n baseline: {\n alignItems: 'baseline',\n },\n },\n justify: {\n start: {\n justifyContent: 'start',\n },\n center: {\n justifyContent: 'center',\n },\n end: {\n justifyContent: 'end',\n },\n between: {\n justifyContent: 'space-between',\n },\n },\n flow: {\n row: {\n gridAutoFlow: 'row',\n },\n column: {\n gridAutoFlow: 'column',\n },\n dense: {\n gridAutoFlow: 'dense',\n },\n rowDense: {\n gridAutoFlow: 'row dense',\n },\n columnDense: {\n gridAutoFlow: 'column dense',\n },\n },\n columns: {\n 1: {\n gridTemplateColumns: 'repeat(1, 1fr)',\n },\n 2: {\n gridTemplateColumns: 'repeat(2, 1fr)',\n },\n 3: {\n gridTemplateColumns: 'repeat(3, 1fr)',\n },\n 4: {\n gridTemplateColumns: 'repeat(4, 1fr)',\n },\n },\n gap: {\n 1: {\n gap: '$1',\n },\n 2: {\n gap: '$2',\n },\n 3: {\n gap: '$3',\n },\n 4: {\n gap: '$4',\n },\n 5: {\n gap: '$5',\n },\n 6: {\n gap: '$6',\n },\n 7: {\n gap: '$7',\n },\n 8: {\n gap: '$8',\n },\n 9: {\n gap: '$9',\n },\n },\n gapX: {\n 1: {\n columnGap: '$1',\n },\n 2: {\n columnGap: '$2',\n },\n 3: {\n columnGap: '$3',\n },\n 4: {\n columnGap: '$4',\n },\n 5: {\n columnGap: '$5',\n },\n 6: {\n columnGap: '$6',\n },\n 7: {\n columnGap: '$7',\n },\n 8: {\n columnGap: '$8',\n },\n 9: {\n columnGap: '$9',\n },\n },\n gapY: {\n 1: {\n rowGap: '$1',\n },\n 2: {\n rowGap: '$2',\n },\n 3: {\n rowGap: '$3',\n },\n 4: {\n rowGap: '$4',\n },\n 5: {\n rowGap: '$5',\n },\n 6: {\n rowGap: '$6',\n },\n 7: {\n rowGap: '$7',\n },\n 8: {\n rowGap: '$8',\n },\n 9: {\n rowGap: '$9',\n },\n },\n },\n});\n"],"mappings":";AAEA,IAAa,2CAAO,CAAA,OAAO,OAAO;CAChC,WAAW;CACX,SAAS;CAET,UAAU;EACR,OAAO;GACL,OAAO,EACL,YAAY,SACb;GACD,QAAQ,EACN,YAAY,UACb;GACD,KAAK,EACH,YAAY,OACb;GACD,SAAS,EACP,YAAY,WACb;GACD,UAAU,EACR,YAAY,YACb;GACF;EACD,SAAS;GACP,OAAO,EACL,gBAAgB,SACjB;GACD,QAAQ,EACN,gBAAgB,UACjB;GACD,KAAK,EACH,gBAAgB,OACjB;GACD,SAAS,EACP,gBAAgB,iBACjB;GACF;EACD,MAAM;GACJ,KAAK,EACH,cAAc,OACf;GACD,QAAQ,EACN,cAAc,UACf;GACD,OAAO,EACL,cAAc,SACf;GACD,UAAU,EACR,cAAc,aACf;GACD,aAAa,EACX,cAAc,gBACf;GACF;EACD,SAAS;GACP,GAAG,EACD,qBAAqB,kBACtB;GACD,GAAG,EACD,qBAAqB,kBACtB;GACD,GAAG,EACD,qBAAqB,kBACtB;GACD,GAAG,EACD,qBAAqB,kBACtB;GACF;EACD,KAAK;GACH,GAAG,EACD,KAAK,MACN;GACD,GAAG,EACD,KAAK,MACN;GACD,GAAG,EACD,KAAK,MACN;GACD,GAAG,EACD,KAAK,MACN;GACD,GAAG,EACD,KAAK,MACN;GACD,GAAG,EACD,KAAK,MACN;GACD,GAAG,EACD,KAAK,MACN;GACD,GAAG,EACD,KAAK,MACN;GACD,GAAG,EACD,KAAK,MACN;GACF;EACD,MAAM;GACJ,GAAG,EACD,WAAW,MACZ;GACD,GAAG,EACD,WAAW,MACZ;GACD,GAAG,EACD,WAAW,MACZ;GACD,GAAG,EACD,WAAW,MACZ;GACD,GAAG,EACD,WAAW,MACZ;GACD,GAAG,EACD,WAAW,MACZ;GACD,GAAG,EACD,WAAW,MACZ;GACD,GAAG,EACD,WAAW,MACZ;GACD,GAAG,EACD,WAAW,MACZ;GACF;EACD,MAAM;GACJ,GAAG,EACD,QAAQ,MACT;GACD,GAAG,EACD,QAAQ,MACT;GACD,GAAG,EACD,QAAQ,MACT;GACD,GAAG,EACD,QAAQ,MACT;GACD,GAAG,EACD,QAAQ,MACT;GACD,GAAG,EACD,QAAQ,MACT;GACD,GAAG,EACD,QAAQ,MACT;GACD,GAAG,EACD,QAAQ,MACT;GACD,GAAG,EACD,QAAQ,MACT;GACF;EACF;CACF,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Grid.vanilla.cjs","names":[],"sources":["../../../components/Grid/Grid.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React, { ElementType } 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 type { Gap, GridAlign, GridFlow, GridJustify } from '../../styles/types';\nimport { gridRecipe } from './Grid.vanilla.css';\n\ninterface GridOwnProps extends CSSProps {\n align?: GridAlign;\n justify?: GridJustify;\n flow?: GridFlow;\n columns?: number;\n gap?: Gap;\n gapX?: Gap;\n gapY?: Gap;\n}\n\nexport type GridProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, GridOwnProps>;\ntype GridComponent = PolymorphicComponent<'div', GridProps<ElementType>>;\n\nexport const GridVanillaComponent = React.forwardRef(\n <C extends ElementType = 'div'>(\n {\n as,\n className,\n css,\n style,\n align,\n justify,\n flow,\n columns,\n gap,\n gapX,\n gapY,\n ...props\n }: GridProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as || 'div';\n\n const { colors } = useVanillaExtractTheme();\n\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n const dynamicStyles: React.CSSProperties = {};\n\n // To support any value on the columns props\n if (columns !== undefined) {\n dynamicStyles.gridTemplateColumns = `repeat(${columns}, 1fr)`;\n }\n\n const mergedStyles = {\n ...cssStyles,\n ...dynamicStyles,\n ...style,\n ...assignInlineVars(vars),\n };\n\n const recipeClass = gridRecipe({ align, justify, flow, gap, gapX, gapY });\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className || ''}`.trim()}\n style={mergedStyles}\n {...props}\n />\n );\n },\n);\n\nGridVanillaComponent.displayName = 'GridVanilla';\n\nexport const GridVanilla = GridVanillaComponent as GridComponent;\n"],"mappings":";;;;;;;;;AA0BA,IAAa,uBAAuB,MAAA,QAAM,YAEtC,EACE,IACA,WACA,KACA,OACA,OACA,SACA,MACA,SACA,KACA,MACA,MACA,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,gBAAqC,EAAE;AAG7C,KAAI,YAAY,KAAA,EACd,eAAc,sBAAsB,UAAU,QAAQ;CAGxD,MAAM,eAAe;EACnB,GAAG;EACH,GAAG;EACH,GAAG;EACH,IAAA,GAAA,yBAAA,kBAAoB,KAAK;EAC1B;AAID,QACE,iBAAA,GAAA,kBAAA,KAAC,WAAD;EACO;EACL,WAAW,GALK,yBAAA,WAAW;GAAE;GAAO;GAAS;GAAM;GAAK;GAAM;GAAM,
|
|
1
|
+
{"version":3,"file":"Grid.vanilla.cjs","names":[],"sources":["../../../components/Grid/Grid.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React, { ElementType } 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 type { Gap, GridAlign, GridFlow, GridJustify } from '../../styles/types';\nimport { gridRecipe } from './Grid.vanilla.css';\n\ninterface GridOwnProps extends CSSProps {\n align?: GridAlign;\n justify?: GridJustify;\n flow?: GridFlow;\n columns?: number;\n gap?: Gap;\n gapX?: Gap;\n gapY?: Gap;\n}\n\nexport type GridProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, GridOwnProps>;\ntype GridComponent = PolymorphicComponent<'div', GridProps<ElementType>>;\n\nexport const GridVanillaComponent = React.forwardRef(\n <C extends ElementType = 'div'>(\n {\n as,\n className,\n css,\n style,\n align,\n justify,\n flow,\n columns,\n gap,\n gapX,\n gapY,\n ...props\n }: GridProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as || 'div';\n\n const { colors } = useVanillaExtractTheme();\n\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n const dynamicStyles: React.CSSProperties = {};\n\n // To support any value on the columns props\n if (columns !== undefined) {\n dynamicStyles.gridTemplateColumns = `repeat(${columns}, 1fr)`;\n }\n\n const mergedStyles = {\n ...cssStyles,\n ...dynamicStyles,\n ...style,\n ...assignInlineVars(vars),\n };\n\n const recipeClass = gridRecipe({ align, justify, flow, gap, gapX, gapY });\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className || ''}`.trim()}\n style={mergedStyles}\n {...props}\n />\n );\n },\n);\n\nGridVanillaComponent.displayName = 'GridVanilla';\n\nexport const GridVanilla = GridVanillaComponent as GridComponent;\n"],"mappings":";;;;;;;;;AA0BA,IAAa,uBAAuB,MAAA,QAAM,YAEtC,EACE,IACA,WACA,KACA,OACA,OACA,SACA,MACA,SACA,KACA,MACA,MACA,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,gBAAqC,EAAE;AAG7C,KAAI,YAAY,KAAA,EACd,eAAc,sBAAsB,UAAU,QAAQ;CAGxD,MAAM,eAAe;EACnB,GAAG;EACH,GAAG;EACH,GAAG;EACH,IAAA,GAAA,yBAAA,kBAAoB,KAAK;EAC1B;AAID,QACE,iBAAA,GAAA,kBAAA,KAAC,WAAD;EACO;EACL,WAAW,GALK,yBAAA,WAAW;GAAE;GAAO;GAAS;GAAM;GAAK;GAAM;GAAM,CAKtD,CAAY,GAAG,aAAa,KAAK,MAAM;EACrD,OAAO;EACP,GAAI;EACJ,CAAA;EAGP;AAED,qBAAqB,cAAc;AAEnC,IAAa,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Grid.vanilla.js","names":[],"sources":["../../../components/Grid/Grid.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React, { ElementType } 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 type { Gap, GridAlign, GridFlow, GridJustify } from '../../styles/types';\nimport { gridRecipe } from './Grid.vanilla.css';\n\ninterface GridOwnProps extends CSSProps {\n align?: GridAlign;\n justify?: GridJustify;\n flow?: GridFlow;\n columns?: number;\n gap?: Gap;\n gapX?: Gap;\n gapY?: Gap;\n}\n\nexport type GridProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, GridOwnProps>;\ntype GridComponent = PolymorphicComponent<'div', GridProps<ElementType>>;\n\nexport const GridVanillaComponent = React.forwardRef(\n <C extends ElementType = 'div'>(\n {\n as,\n className,\n css,\n style,\n align,\n justify,\n flow,\n columns,\n gap,\n gapX,\n gapY,\n ...props\n }: GridProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as || 'div';\n\n const { colors } = useVanillaExtractTheme();\n\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n const dynamicStyles: React.CSSProperties = {};\n\n // To support any value on the columns props\n if (columns !== undefined) {\n dynamicStyles.gridTemplateColumns = `repeat(${columns}, 1fr)`;\n }\n\n const mergedStyles = {\n ...cssStyles,\n ...dynamicStyles,\n ...style,\n ...assignInlineVars(vars),\n };\n\n const recipeClass = gridRecipe({ align, justify, flow, gap, gapX, gapY });\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className || ''}`.trim()}\n style={mergedStyles}\n {...props}\n />\n );\n },\n);\n\nGridVanillaComponent.displayName = 'GridVanilla';\n\nexport const GridVanilla = GridVanillaComponent as GridComponent;\n"],"mappings":";;;;;;;AA0BA,IAAa,uBAAuB,MAAM,YAEtC,EACE,IACA,WACA,KACA,OACA,OACA,SACA,MACA,SACA,KACA,MACA,MACA,GAAG,SAEL,QACG;CACH,MAAM,YAAY,MAAM;CAExB,MAAM,EAAE,WAAW,wBAAwB;CAE3C,MAAM,EAAE,OAAO,WAAW,SAAS,eAAe,KAAK,OAAO;CAE9D,MAAM,gBAAqC,EAAE;AAG7C,KAAI,YAAY,KAAA,EACd,eAAc,sBAAsB,UAAU,QAAQ;CAGxD,MAAM,eAAe;EACnB,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG,iBAAiB,KAAK;EAC1B;AAID,QACE,oBAAC,WAAD;EACO;EACL,WAAW,GALK,WAAW;GAAE;GAAO;GAAS;GAAM;GAAK;GAAM;GAAM,
|
|
1
|
+
{"version":3,"file":"Grid.vanilla.js","names":[],"sources":["../../../components/Grid/Grid.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React, { ElementType } 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 type { Gap, GridAlign, GridFlow, GridJustify } from '../../styles/types';\nimport { gridRecipe } from './Grid.vanilla.css';\n\ninterface GridOwnProps extends CSSProps {\n align?: GridAlign;\n justify?: GridJustify;\n flow?: GridFlow;\n columns?: number;\n gap?: Gap;\n gapX?: Gap;\n gapY?: Gap;\n}\n\nexport type GridProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, GridOwnProps>;\ntype GridComponent = PolymorphicComponent<'div', GridProps<ElementType>>;\n\nexport const GridVanillaComponent = React.forwardRef(\n <C extends ElementType = 'div'>(\n {\n as,\n className,\n css,\n style,\n align,\n justify,\n flow,\n columns,\n gap,\n gapX,\n gapY,\n ...props\n }: GridProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as || 'div';\n\n const { colors } = useVanillaExtractTheme();\n\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n const dynamicStyles: React.CSSProperties = {};\n\n // To support any value on the columns props\n if (columns !== undefined) {\n dynamicStyles.gridTemplateColumns = `repeat(${columns}, 1fr)`;\n }\n\n const mergedStyles = {\n ...cssStyles,\n ...dynamicStyles,\n ...style,\n ...assignInlineVars(vars),\n };\n\n const recipeClass = gridRecipe({ align, justify, flow, gap, gapX, gapY });\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className || ''}`.trim()}\n style={mergedStyles}\n {...props}\n />\n );\n },\n);\n\nGridVanillaComponent.displayName = 'GridVanilla';\n\nexport const GridVanilla = GridVanillaComponent as GridComponent;\n"],"mappings":";;;;;;;AA0BA,IAAa,uBAAuB,MAAM,YAEtC,EACE,IACA,WACA,KACA,OACA,OACA,SACA,MACA,SACA,KACA,MACA,MACA,GAAG,SAEL,QACG;CACH,MAAM,YAAY,MAAM;CAExB,MAAM,EAAE,WAAW,wBAAwB;CAE3C,MAAM,EAAE,OAAO,WAAW,SAAS,eAAe,KAAK,OAAO;CAE9D,MAAM,gBAAqC,EAAE;AAG7C,KAAI,YAAY,KAAA,EACd,eAAc,sBAAsB,UAAU,QAAQ;CAGxD,MAAM,eAAe;EACnB,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG,iBAAiB,KAAK;EAC1B;AAID,QACE,oBAAC,WAAD;EACO;EACL,WAAW,GALK,WAAW;GAAE;GAAO;GAAS;GAAM;GAAK;GAAM;GAAM,CAKtD,CAAY,GAAG,aAAa,KAAK,MAAM;EACrD,OAAO;EACP,GAAI;EACJ,CAAA;EAGP;AAED,qBAAqB,cAAc;AAEnC,IAAa,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconButton.vanilla.cjs","names":[],"sources":["../../../components/IconButton/IconButton.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n PolymorphicComponent,\n PolymorphicComponentProps,\n PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { iconButtonRecipe } from './IconButton.vanilla.css';\n\ntype IconButtonRecipeVariants = RecipeVariants<typeof iconButtonRecipe>;\n\ninterface IconButtonOwnProps extends Omit<IconButtonRecipeVariants, never>, CSSProps {}\n\nexport type IconButtonVanillaProps<C extends ElementType = 'button'> = PolymorphicComponentProps<\n C,\n IconButtonOwnProps\n>;\n\ntype IconButtonVanillaComponent = PolymorphicComponent<\n 'button',\n IconButtonVanillaProps<ElementType>\n>;\n\nconst IconButtonVanillaComponentImpl = forwardRef(\n <C extends ElementType = 'button'>(\n { as, className, css, style, size, variant, ...props }: IconButtonVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as || 'button';\n\n const { colors } = useVanillaExtractTheme();\n\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n const mergedStyles = {\n ...cssStyles,\n ...style,\n ...assignInlineVars(vars),\n };\n\n const recipeClass = iconButtonRecipe({ size, variant });\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className || ''}`.trim()}\n style={mergedStyles}\n {...props}\n />\n );\n },\n);\n\nIconButtonVanillaComponentImpl.displayName = 'IconButtonVanilla';\n\nexport const IconButtonVanilla = IconButtonVanillaComponentImpl as IconButtonVanillaComponent;\n"],"mappings":";;;;;;;;AA2BA,IAAM,kCAAA,GAAA,MAAA,aAEF,EAAE,IAAI,WAAW,KAAK,OAAO,MAAM,SAAS,GAAG,SAC/C,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;AAID,QACE,iBAAA,GAAA,kBAAA,KAAC,WAAD;EACO;EACL,WAAW,GALK,+BAAA,iBAAiB;GAAE;GAAM;GAAS,
|
|
1
|
+
{"version":3,"file":"IconButton.vanilla.cjs","names":[],"sources":["../../../components/IconButton/IconButton.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n PolymorphicComponent,\n PolymorphicComponentProps,\n PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { iconButtonRecipe } from './IconButton.vanilla.css';\n\ntype IconButtonRecipeVariants = RecipeVariants<typeof iconButtonRecipe>;\n\ninterface IconButtonOwnProps extends Omit<IconButtonRecipeVariants, never>, CSSProps {}\n\nexport type IconButtonVanillaProps<C extends ElementType = 'button'> = PolymorphicComponentProps<\n C,\n IconButtonOwnProps\n>;\n\ntype IconButtonVanillaComponent = PolymorphicComponent<\n 'button',\n IconButtonVanillaProps<ElementType>\n>;\n\nconst IconButtonVanillaComponentImpl = forwardRef(\n <C extends ElementType = 'button'>(\n { as, className, css, style, size, variant, ...props }: IconButtonVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as || 'button';\n\n const { colors } = useVanillaExtractTheme();\n\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n const mergedStyles = {\n ...cssStyles,\n ...style,\n ...assignInlineVars(vars),\n };\n\n const recipeClass = iconButtonRecipe({ size, variant });\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className || ''}`.trim()}\n style={mergedStyles}\n {...props}\n />\n );\n },\n);\n\nIconButtonVanillaComponentImpl.displayName = 'IconButtonVanilla';\n\nexport const IconButtonVanilla = IconButtonVanillaComponentImpl as IconButtonVanillaComponent;\n"],"mappings":";;;;;;;;AA2BA,IAAM,kCAAA,GAAA,MAAA,aAEF,EAAE,IAAI,WAAW,KAAK,OAAO,MAAM,SAAS,GAAG,SAC/C,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;AAID,QACE,iBAAA,GAAA,kBAAA,KAAC,WAAD;EACO;EACL,WAAW,GALK,+BAAA,iBAAiB;GAAE;GAAM;GAAS,CAKpC,CAAY,GAAG,aAAa,KAAK,MAAM;EACrD,OAAO;EACP,GAAI;EACJ,CAAA;EAGP;AAED,+BAA+B,cAAc;AAE7C,IAAa,oBAAoB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconButton.vanilla.js","names":[],"sources":["../../../components/IconButton/IconButton.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n PolymorphicComponent,\n PolymorphicComponentProps,\n PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { iconButtonRecipe } from './IconButton.vanilla.css';\n\ntype IconButtonRecipeVariants = RecipeVariants<typeof iconButtonRecipe>;\n\ninterface IconButtonOwnProps extends Omit<IconButtonRecipeVariants, never>, CSSProps {}\n\nexport type IconButtonVanillaProps<C extends ElementType = 'button'> = PolymorphicComponentProps<\n C,\n IconButtonOwnProps\n>;\n\ntype IconButtonVanillaComponent = PolymorphicComponent<\n 'button',\n IconButtonVanillaProps<ElementType>\n>;\n\nconst IconButtonVanillaComponentImpl = forwardRef(\n <C extends ElementType = 'button'>(\n { as, className, css, style, size, variant, ...props }: IconButtonVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as || 'button';\n\n const { colors } = useVanillaExtractTheme();\n\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n const mergedStyles = {\n ...cssStyles,\n ...style,\n ...assignInlineVars(vars),\n };\n\n const recipeClass = iconButtonRecipe({ size, variant });\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className || ''}`.trim()}\n style={mergedStyles}\n {...props}\n />\n );\n },\n);\n\nIconButtonVanillaComponentImpl.displayName = 'IconButtonVanilla';\n\nexport const IconButtonVanilla = IconButtonVanillaComponentImpl as IconButtonVanillaComponent;\n"],"mappings":";;;;;;;AA2BA,IAAM,iCAAiC,YAEnC,EAAE,IAAI,WAAW,KAAK,OAAO,MAAM,SAAS,GAAG,SAC/C,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;AAID,QACE,oBAAC,WAAD;EACO;EACL,WAAW,GALK,iBAAiB;GAAE;GAAM;GAAS,
|
|
1
|
+
{"version":3,"file":"IconButton.vanilla.js","names":[],"sources":["../../../components/IconButton/IconButton.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n PolymorphicComponent,\n PolymorphicComponentProps,\n PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { iconButtonRecipe } from './IconButton.vanilla.css';\n\ntype IconButtonRecipeVariants = RecipeVariants<typeof iconButtonRecipe>;\n\ninterface IconButtonOwnProps extends Omit<IconButtonRecipeVariants, never>, CSSProps {}\n\nexport type IconButtonVanillaProps<C extends ElementType = 'button'> = PolymorphicComponentProps<\n C,\n IconButtonOwnProps\n>;\n\ntype IconButtonVanillaComponent = PolymorphicComponent<\n 'button',\n IconButtonVanillaProps<ElementType>\n>;\n\nconst IconButtonVanillaComponentImpl = forwardRef(\n <C extends ElementType = 'button'>(\n { as, className, css, style, size, variant, ...props }: IconButtonVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as || 'button';\n\n const { colors } = useVanillaExtractTheme();\n\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n const mergedStyles = {\n ...cssStyles,\n ...style,\n ...assignInlineVars(vars),\n };\n\n const recipeClass = iconButtonRecipe({ size, variant });\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className || ''}`.trim()}\n style={mergedStyles}\n {...props}\n />\n );\n },\n);\n\nIconButtonVanillaComponentImpl.displayName = 'IconButtonVanilla';\n\nexport const IconButtonVanilla = IconButtonVanillaComponentImpl as IconButtonVanillaComponent;\n"],"mappings":";;;;;;;AA2BA,IAAM,iCAAiC,YAEnC,EAAE,IAAI,WAAW,KAAK,OAAO,MAAM,SAAS,GAAG,SAC/C,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;AAID,QACE,oBAAC,WAAD;EACO;EACL,WAAW,GALK,iBAAiB;GAAE;GAAM;GAAS,CAKpC,CAAY,GAAG,aAAa,KAAK,MAAM;EACrD,OAAO;EACP,GAAI;EACJ,CAAA;EAGP;AAED,+BAA+B,cAAc;AAE7C,IAAa,oBAAoB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Image.cjs","names":[],"sources":["../../../components/Image/Image.tsx"],"sourcesContent":["import { styled } from '../../stitches.config';\n\nexport const Image = styled('img', {\n // Reset\n verticalAlign: 'middle',\n maxWidth: '100%',\n});\n"],"mappings":";AAEA,IAAa,
|
|
1
|
+
{"version":3,"file":"Image.cjs","names":[],"sources":["../../../components/Image/Image.tsx"],"sourcesContent":["import { styled } from '../../stitches.config';\n\nexport const Image = styled('img', {\n // Reset\n verticalAlign: 'middle',\n maxWidth: '100%',\n});\n"],"mappings":";AAEA,IAAa,4CAAQ,CAAA,OAAO,OAAO;CAEjC,eAAe;CACf,UAAU;CACX,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.cjs","names":[],"sources":["../../../components/Input/Input.tsx"],"sourcesContent":["import React from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { elevationVariants } from '../Elevation';\n\n// CONSTANTS\nconst FOCUS_SHADOW = elevationVariants[1].boxShadow; // apply elevation $1 when focus\n\nconst SMALL_HEIGHT = '$5';\nconst MEDIUM_HEIGHT = '$6';\nconst LARGE_HEIGHT = '$7';\n\nconst StyledInput = styled('input', {\n // Reset\n appearance: 'none',\n borderWidth: '0',\n boxSizing: 'border-box',\n fontFamily: '$rubik',\n margin: '0',\n outline: 'none',\n padding: '0',\n width: '100%',\n WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n\n // Custom\n position: 'relative',\n backgroundColor: 'transparent',\n borderRadius: 'inherit', // inherit border radius from InputWrapper\n boxShadow: 'inset 0 0 0 1px $colors$inputBorder',\n color: '$inputText',\n fontVariantNumeric: 'tabular-nums',\n transition: 'box-shadow .1s ease-in-out',\n\n '&[type=\"number\"]': {\n pr: '0', // remove padding for number native controls\n },\n\n '&:-webkit-autofill,&:autofill': {\n boxShadow: 'inset 0 0 0 1px $colors$inputBorder, inset 0 0 0 100px $colors$inputBg',\n },\n\n '&:-webkit-autofill::first-line,&:autofill::first-line': {\n fontFamily: '$rubik',\n color: '$hiContrast',\n },\n\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px $colors$inputFocusBorder, ${FOCUS_SHADOW}`,\n },\n\n '&::placeholder': {\n color: '$inputPlaceholder',\n },\n\n '&:read-only:not(:disabled)': {\n boxShadow: 'none',\n },\n\n '&:disabled': {\n pointerEvents: 'none',\n color: '$inputDisabledText',\n },\n\n variants: {\n size: {\n small: {\n height: SMALL_HEIGHT,\n fontSize: '$1',\n px: '$2',\n lineHeight: '$sizes$5',\n '&:-webkit-autofill::first-line,&:autofill::first-line': {\n fontSize: '$1',\n },\n },\n medium: {\n height: MEDIUM_HEIGHT,\n fontSize: '$3',\n px: '$3',\n lineHeight: '$sizes$6',\n '&:-webkit-autofill::first-line,&:autofill::first-line': {\n fontSize: '$3',\n },\n },\n large: {\n height: LARGE_HEIGHT,\n fontSize: '$3',\n px: '$3',\n lineHeight: '$sizes$7',\n '&:-webkit-autofill::first-line,&:autofill::first-line': {\n fontSize: '$3',\n },\n },\n },\n startAdornment: {\n true: {},\n },\n endAdornment: {\n true: {},\n },\n variant: {\n ghost: {\n boxShadow: 'none',\n '&:disabled': {\n boxShadow: 'none',\n },\n backgroundColor: 'transparent',\n '&:focus-visible': {\n backgroundColor: '$loContrast',\n },\n },\n },\n state: {\n invalid: {\n boxShadow: 'inset 0 0 0 1px $colors$inputInvalidBorder',\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px $colors$inputInvalidBorder, ${FOCUS_SHADOW}`,\n },\n },\n },\n cursor: {\n default: {\n cursor: 'default',\n '@hover': {\n '&:hover:not(:read-only)': {\n cursor: 'text',\n },\n },\n '&:focus-visible:not(:read-only)': {\n cursor: 'text',\n },\n },\n text: {\n cursor: 'text',\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n cursor: 'default',\n },\n compoundVariants: [\n {\n variant: 'ghost',\n state: 'invalid',\n css: {\n boxShadow: 'inset 0 0 0 1px $colors$inputInvalidBorder',\n },\n },\n {\n startAdornment: true,\n size: 'small',\n css: {\n paddingInlineStart: 'calc($2 + 15px)',\n },\n },\n {\n startAdornment: true,\n size: 'medium',\n css: {\n paddingInlineStart: 'calc($3 + 15px)',\n },\n },\n {\n startAdornment: true,\n size: 'large',\n css: {\n paddingInlineStart: 'calc($3 + 15px)',\n },\n },\n {\n endAdornment: true,\n size: 'small',\n css: {\n paddingInlineEnd: 'calc($2 + 15px)',\n },\n },\n {\n endAdornment: true,\n size: 'medium',\n css: {\n paddingInlineEnd: 'calc($3 + 15px)',\n },\n },\n {\n endAdornment: true,\n size: 'large',\n css: {\n paddingInlineEnd: 'calc($3 + 15px)',\n },\n },\n {\n endAdornment: true,\n size: 'small',\n state: 'invalid',\n css: {\n paddingInlineEnd: 'calc($4 + 30px)', // size padding + adornment margins + icon size + icon size\n },\n },\n {\n endAdornment: true,\n size: 'medium',\n state: 'invalid',\n css: {\n paddingInlineEnd: 'calc($6 + 30px)', // size padding + adornment margins + icon size + icon size\n },\n },\n {\n endAdornment: true,\n size: 'large',\n state: 'invalid',\n css: {\n paddingInlineEnd: 'calc($6 + 30px)', // size padding + adornment margins + icon size + icon size\n },\n },\n ],\n});\n\nconst InputWrapper = styled('div', {\n // Reset\n outline: 'none',\n lineHeight: 0,\n\n position: 'relative',\n backgroundColor: '$inputBg',\n color: '$inputPlaceholder',\n\n '&::before': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n pointerEvents: 'none',\n },\n '&::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n pointerEvents: 'none',\n },\n\n '&:focus-visible': {\n '&::before': {\n backgroundColor: '$inputFocusBg',\n },\n '&::after': {\n backgroundColor: '$primary',\n opacity: 0.15,\n },\n },\n\n '@hover': {\n '&:hover': {\n '&::before': {\n backgroundColor: '$inputHoverBg',\n },\n '&::after': {\n backgroundColor: '$primary',\n opacity: 0.05,\n },\n },\n },\n\n variants: {\n disabled: {\n true: {\n opacity: 0.7,\n color: '$inputDisabledText',\n '@hover': {\n '&:hover': {\n '&::before': {\n backgroundColor: 'inherit',\n },\n '&::after': {\n backgroundColor: 'inherit',\n },\n },\n },\n },\n },\n state: {\n invalid: {\n '@hover': {\n '&:hover': {\n '&::after': {\n backgroundColor: '$inputInvalidBorder',\n },\n },\n },\n },\n },\n size: {\n small: {\n borderRadius: '$2',\n '&::before, &::after': {\n borderRadius: '$2',\n },\n },\n medium: {\n borderRadius: '$3',\n '&::before, &::after': {\n borderRadius: '$3',\n },\n },\n large: {\n borderRadius: '$3',\n '&::before, &::after': {\n borderRadius: '$3',\n },\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n disabled: false,\n },\n});\n\nconst AdornmentWrapper = styled('div', {\n position: 'absolute',\n top: 0,\n height: '100%',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n variants: {\n size: {\n small: {\n mx: 'calc($2 / 2)',\n },\n medium: {\n mx: 'calc($3 / 2)',\n },\n large: {\n mx: 'calc($3 / 2)',\n },\n },\n variant: {\n start: {\n left: 0,\n },\n end: {\n right: 0,\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n },\n});\n\nconst AdornmentWrapperStart = styled(AdornmentWrapper, {\n left: 0,\n});\n\nconst AdornmentWrapperEnd = styled(AdornmentWrapper, {\n right: 0,\n});\n\ntype DefaultInputVariants = VariantProps<typeof StyledInput>;\nexport type InputVariants = Omit<DefaultInputVariants, 'startAdornment' | 'endAdornment'>;\nexport interface HTMLInputProps extends React.InputHTMLAttributes<any> {\n startAdornment?: React.ReactNode;\n endAdornment?: React.ReactNode;\n type?: string;\n}\n\nexport type InputProps = Omit<HTMLInputProps, 'size'> & InputVariants & { css?: CSS };\n\nexport interface InputHandle extends HTMLInputElement {\n clear: () => void;\n}\n\nexport const Input = React.forwardRef<InputHandle, InputProps>(\n ({ size, startAdornment, endAdornment, css, ...props }, forwardedRef) => {\n const inputRef = React.useRef<InputHandle>(null);\n\n React.useImperativeHandle(\n forwardedRef,\n () => {\n const { current } = inputRef;\n if (current) {\n current.clear = () => {\n current.value = '';\n };\n }\n return current as InputHandle;\n },\n [inputRef]\n );\n\n const hasStartAdornment = React.useMemo(() => Boolean(startAdornment), [startAdornment]);\n\n const hasEndAdornment = React.useMemo(() => Boolean(endAdornment), [endAdornment]);\n\n return (\n <InputWrapper css={css} disabled={props.disabled} state={props.state}>\n {hasStartAdornment && (\n <AdornmentWrapperStart size={size}>{startAdornment}</AdornmentWrapperStart>\n )}\n\n <StyledInput\n ref={inputRef}\n startAdornment={hasStartAdornment}\n endAdornment={hasEndAdornment}\n size={size}\n {...props}\n />\n {hasEndAdornment && <AdornmentWrapperEnd size={size}>{endAdornment}</AdornmentWrapperEnd>}\n </InputWrapper>\n );\n }\n);\n"],"mappings":";;;;;;;AAMA,IAAM,eAAe,kBAAA,kBAAkB,GAAG;AAM1C,IAAM,cAAc,wBAAA,OAAO,SAAS;CAElC,YAAY;CACZ,aAAa;CACb,WAAW;CACX,YAAY;CACZ,QAAQ;CACR,SAAS;CACT,SAAS;CACT,OAAO;CACP,yBAAyB;CAGzB,UAAU;CACV,iBAAiB;CACjB,cAAc;CACd,WAAW;CACX,OAAO;CACP,oBAAoB;CACpB,YAAY;CAEZ,sBAAoB,EAClB,IAAI,KACL;CAED,iCAAiC,EAC/B,WAAW,0EACZ;CAED,yDAAyD;EACvD,YAAY;EACZ,OAAO;EACR;CAED,mBAAmB,EACjB,WAAW,6CAA6C,gBACzD;CAED,kBAAkB,EAChB,OAAO,qBACR;CAED,8BAA8B,EAC5B,WAAW,QACZ;CAED,cAAc;EACZ,eAAe;EACf,OAAO;EACR;CAED,UAAU;EACR,MAAM;GACJ,OAAO;IACL,QA1Da;IA2Db,UAAU;IACV,IAAI;IACJ,YAAY;IACZ,yDAAyD,EACvD,UAAU,MACX;IACF;GACD,QAAQ;IACN,QAlEc;IAmEd,UAAU;IACV,IAAI;IACJ,YAAY;IACZ,yDAAyD,EACvD,UAAU,MACX;IACF;GACD,OAAO;IACL,QA1Ea;IA2Eb,UAAU;IACV,IAAI;IACJ,YAAY;IACZ,yDAAyD,EACvD,UAAU,MACX;IACF;GACF;EACD,gBAAgB,EACd,MAAM,EAAE,EACT;EACD,cAAc,EACZ,MAAM,EAAE,EACT;EACD,SAAS,EACP,OAAO;GACL,WAAW;GACX,cAAc,EACZ,WAAW,QACZ;GACD,iBAAiB;GACjB,mBAAmB,EACjB,iBAAiB,eAClB;GACF,EACF;EACD,OAAO,EACL,SAAS;GACP,WAAW;GACX,mBAAmB,EACjB,WAAW,+CAA+C,gBAC3D;GACF,EACF;EACD,QAAQ;GACN,SAAS;IACP,QAAQ;IACR,UAAU,EACR,2BAA2B,EACzB,QAAQ,QACT,EACF;IACD,mCAAmC,EACjC,QAAQ,QACT;IACF;GACD,MAAM,EACJ,QAAQ,QACT;GACF;EACF;CACD,iBAAiB;EACf,MAAM;EACN,QAAQ;EACT;CACD,kBAAkB;EAChB;GACE,SAAS;GACT,OAAO;GACP,KAAK,EACH,WAAW,8CACZ;GACF;EACD;GACE,gBAAgB;GAChB,MAAM;GACN,KAAK,EACH,oBAAoB,mBACrB;GACF;EACD;GACE,gBAAgB;GAChB,MAAM;GACN,KAAK,EACH,oBAAoB,mBACrB;GACF;EACD;GACE,gBAAgB;GAChB,MAAM;GACN,KAAK,EACH,oBAAoB,mBACrB;GACF;EACD;GACE,cAAc;GACd,MAAM;GACN,KAAK,EACH,kBAAkB,mBACnB;GACF;EACD;GACE,cAAc;GACd,MAAM;GACN,KAAK,EACH,kBAAkB,mBACnB;GACF;EACD;GACE,cAAc;GACd,MAAM;GACN,KAAK,EACH,kBAAkB,mBACnB;GACF;EACD;GACE,cAAc;GACd,MAAM;GACN,OAAO;GACP,KAAK,EACH,kBAAkB,mBACnB;GACF;EACD;GACE,cAAc;GACd,MAAM;GACN,OAAO;GACP,KAAK,EACH,kBAAkB,mBACnB;GACF;EACD;GACE,cAAc;GACd,MAAM;GACN,OAAO;GACP,KAAK,EACH,kBAAkB,mBACnB;GACF;EACF;CACF,CAAC;AAEF,IAAM,eAAe,wBAAA,OAAO,OAAO;CAEjC,SAAS;CACT,YAAY;CAEZ,UAAU;CACV,iBAAiB;CACjB,OAAO;CAEP,aAAa;EACX,WAAW;EACX,SAAS;EACT,UAAU;EACV,OAAO;EACP,eAAe;EAChB;CACD,YAAY;EACV,WAAW;EACX,SAAS;EACT,UAAU;EACV,OAAO;EACP,eAAe;EAChB;CAED,mBAAmB;EACjB,aAAa,EACX,iBAAiB,iBAClB;EACD,YAAY;GACV,iBAAiB;GACjB,SAAS;GACV;EACF;CAED,UAAU,EACR,WAAW;EACT,aAAa,EACX,iBAAiB,iBAClB;EACD,YAAY;GACV,iBAAiB;GACjB,SAAS;GACV;EACF,EACF;CAED,UAAU;EACR,UAAU,EACR,MAAM;GACJ,SAAS;GACT,OAAO;GACP,UAAU,EACR,WAAW;IACT,aAAa,EACX,iBAAiB,WAClB;IACD,YAAY,EACV,iBAAiB,WAClB;IACF,EACF;GACF,EACF;EACD,OAAO,EACL,SAAS,EACP,UAAU,EACR,WAAW,EACT,YAAY,EACV,iBAAiB,uBAClB,EACF,EACF,EACF,EACF;EACD,MAAM;GACJ,OAAO;IACL,cAAc;IACd,uBAAuB,EACrB,cAAc,MACf;IACF;GACD,QAAQ;IACN,cAAc;IACd,uBAAuB,EACrB,cAAc,MACf;IACF;GACD,OAAO;IACL,cAAc;IACd,uBAAuB,EACrB,cAAc,MACf;IACF;GACF;EACF;CACD,iBAAiB;EACf,MAAM;EACN,UAAU;EACX;CACF,CAAC;AAEF,IAAM,mBAAmB,wBAAA,OAAO,OAAO;CACrC,UAAU;CACV,KAAK;CACL,QAAQ;CACR,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,UAAU;EACR,MAAM;GACJ,OAAO,EACL,IAAI,gBACL;GACD,QAAQ,EACN,IAAI,gBACL;GACD,OAAO,EACL,IAAI,gBACL;GACF;EACD,SAAS;GACP,OAAO,EACL,MAAM,GACP;GACD,KAAK,EACH,OAAO,GACR;GACF;EACF;CACD,iBAAiB,EACf,MAAM,UACP;CACF,CAAC;AAEF,IAAM,wBAAwB,wBAAA,OAAO,kBAAkB,EACrD,MAAM,GACP,CAAC;AAEF,IAAM,sBAAsB,wBAAA,OAAO,kBAAkB,EACnD,OAAO,GACR,CAAC;AAgBF,IAAa,QAAQ,MAAA,QAAM,YACxB,EAAE,MAAM,gBAAgB,cAAc,KAAK,GAAG,SAAS,iBAAiB;CACvE,MAAM,WAAW,MAAA,QAAM,OAAoB,KAAK;AAEhD,OAAA,QAAM,oBACJ,oBACM;EACJ,MAAM,EAAE,YAAY;AACpB,MAAI,QACF,SAAQ,cAAc;AACpB,WAAQ,QAAQ;;AAGpB,SAAO;IAET,CAAC,SAAS,CACX;CAED,MAAM,oBAAoB,MAAA,QAAM,cAAc,QAAQ,eAAe,EAAE,CAAC,eAAe,CAAC;CAExF,MAAM,kBAAkB,MAAA,QAAM,cAAc,QAAQ,aAAa,EAAE,CAAC,aAAa,CAAC;AAElF,QACE,iBAAA,GAAA,kBAAA,MAAC,cAAD;EAAmB;EAAK,UAAU,MAAM;EAAU,OAAO,MAAM;YAA/D;GACG,qBACC,iBAAA,GAAA,kBAAA,KAAC,uBAAD;IAA6B;cAAO;IAAuC,CAAA;GAG7E,iBAAA,GAAA,kBAAA,KAAC,aAAD;IACE,KAAK;IACL,gBAAgB;IAChB,cAAc;IACR;IACN,GAAI;IACJ,CAAA;GACD,mBAAmB,iBAAA,GAAA,kBAAA,KAAC,qBAAD;IAA2B;cAAO;IAAmC,CAAA;GAC5E;;EAGpB"}
|
|
1
|
+
{"version":3,"file":"Input.cjs","names":[],"sources":["../../../components/Input/Input.tsx"],"sourcesContent":["import React from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { elevationVariants } from '../Elevation';\n\n// CONSTANTS\nconst FOCUS_SHADOW = elevationVariants[1].boxShadow; // apply elevation $1 when focus\n\nconst SMALL_HEIGHT = '$5';\nconst MEDIUM_HEIGHT = '$6';\nconst LARGE_HEIGHT = '$7';\n\nconst StyledInput = styled('input', {\n // Reset\n appearance: 'none',\n borderWidth: '0',\n boxSizing: 'border-box',\n fontFamily: '$rubik',\n margin: '0',\n outline: 'none',\n padding: '0',\n width: '100%',\n WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n\n // Custom\n position: 'relative',\n backgroundColor: 'transparent',\n borderRadius: 'inherit', // inherit border radius from InputWrapper\n boxShadow: 'inset 0 0 0 1px $colors$inputBorder',\n color: '$inputText',\n fontVariantNumeric: 'tabular-nums',\n transition: 'box-shadow .1s ease-in-out',\n\n '&[type=\"number\"]': {\n pr: '0', // remove padding for number native controls\n },\n\n '&:-webkit-autofill,&:autofill': {\n boxShadow: 'inset 0 0 0 1px $colors$inputBorder, inset 0 0 0 100px $colors$inputBg',\n },\n\n '&:-webkit-autofill::first-line,&:autofill::first-line': {\n fontFamily: '$rubik',\n color: '$hiContrast',\n },\n\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px $colors$inputFocusBorder, ${FOCUS_SHADOW}`,\n },\n\n '&::placeholder': {\n color: '$inputPlaceholder',\n },\n\n '&:read-only:not(:disabled)': {\n boxShadow: 'none',\n },\n\n '&:disabled': {\n pointerEvents: 'none',\n color: '$inputDisabledText',\n },\n\n variants: {\n size: {\n small: {\n height: SMALL_HEIGHT,\n fontSize: '$1',\n px: '$2',\n lineHeight: '$sizes$5',\n '&:-webkit-autofill::first-line,&:autofill::first-line': {\n fontSize: '$1',\n },\n },\n medium: {\n height: MEDIUM_HEIGHT,\n fontSize: '$3',\n px: '$3',\n lineHeight: '$sizes$6',\n '&:-webkit-autofill::first-line,&:autofill::first-line': {\n fontSize: '$3',\n },\n },\n large: {\n height: LARGE_HEIGHT,\n fontSize: '$3',\n px: '$3',\n lineHeight: '$sizes$7',\n '&:-webkit-autofill::first-line,&:autofill::first-line': {\n fontSize: '$3',\n },\n },\n },\n startAdornment: {\n true: {},\n },\n endAdornment: {\n true: {},\n },\n variant: {\n ghost: {\n boxShadow: 'none',\n '&:disabled': {\n boxShadow: 'none',\n },\n backgroundColor: 'transparent',\n '&:focus-visible': {\n backgroundColor: '$loContrast',\n },\n },\n },\n state: {\n invalid: {\n boxShadow: 'inset 0 0 0 1px $colors$inputInvalidBorder',\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px $colors$inputInvalidBorder, ${FOCUS_SHADOW}`,\n },\n },\n },\n cursor: {\n default: {\n cursor: 'default',\n '@hover': {\n '&:hover:not(:read-only)': {\n cursor: 'text',\n },\n },\n '&:focus-visible:not(:read-only)': {\n cursor: 'text',\n },\n },\n text: {\n cursor: 'text',\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n cursor: 'default',\n },\n compoundVariants: [\n {\n variant: 'ghost',\n state: 'invalid',\n css: {\n boxShadow: 'inset 0 0 0 1px $colors$inputInvalidBorder',\n },\n },\n {\n startAdornment: true,\n size: 'small',\n css: {\n paddingInlineStart: 'calc($2 + 15px)',\n },\n },\n {\n startAdornment: true,\n size: 'medium',\n css: {\n paddingInlineStart: 'calc($3 + 15px)',\n },\n },\n {\n startAdornment: true,\n size: 'large',\n css: {\n paddingInlineStart: 'calc($3 + 15px)',\n },\n },\n {\n endAdornment: true,\n size: 'small',\n css: {\n paddingInlineEnd: 'calc($2 + 15px)',\n },\n },\n {\n endAdornment: true,\n size: 'medium',\n css: {\n paddingInlineEnd: 'calc($3 + 15px)',\n },\n },\n {\n endAdornment: true,\n size: 'large',\n css: {\n paddingInlineEnd: 'calc($3 + 15px)',\n },\n },\n {\n endAdornment: true,\n size: 'small',\n state: 'invalid',\n css: {\n paddingInlineEnd: 'calc($4 + 30px)', // size padding + adornment margins + icon size + icon size\n },\n },\n {\n endAdornment: true,\n size: 'medium',\n state: 'invalid',\n css: {\n paddingInlineEnd: 'calc($6 + 30px)', // size padding + adornment margins + icon size + icon size\n },\n },\n {\n endAdornment: true,\n size: 'large',\n state: 'invalid',\n css: {\n paddingInlineEnd: 'calc($6 + 30px)', // size padding + adornment margins + icon size + icon size\n },\n },\n ],\n});\n\nconst InputWrapper = styled('div', {\n // Reset\n outline: 'none',\n lineHeight: 0,\n\n position: 'relative',\n backgroundColor: '$inputBg',\n color: '$inputPlaceholder',\n\n '&::before': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n pointerEvents: 'none',\n },\n '&::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n pointerEvents: 'none',\n },\n\n '&:focus-visible': {\n '&::before': {\n backgroundColor: '$inputFocusBg',\n },\n '&::after': {\n backgroundColor: '$primary',\n opacity: 0.15,\n },\n },\n\n '@hover': {\n '&:hover': {\n '&::before': {\n backgroundColor: '$inputHoverBg',\n },\n '&::after': {\n backgroundColor: '$primary',\n opacity: 0.05,\n },\n },\n },\n\n variants: {\n disabled: {\n true: {\n opacity: 0.7,\n color: '$inputDisabledText',\n '@hover': {\n '&:hover': {\n '&::before': {\n backgroundColor: 'inherit',\n },\n '&::after': {\n backgroundColor: 'inherit',\n },\n },\n },\n },\n },\n state: {\n invalid: {\n '@hover': {\n '&:hover': {\n '&::after': {\n backgroundColor: '$inputInvalidBorder',\n },\n },\n },\n },\n },\n size: {\n small: {\n borderRadius: '$2',\n '&::before, &::after': {\n borderRadius: '$2',\n },\n },\n medium: {\n borderRadius: '$3',\n '&::before, &::after': {\n borderRadius: '$3',\n },\n },\n large: {\n borderRadius: '$3',\n '&::before, &::after': {\n borderRadius: '$3',\n },\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n disabled: false,\n },\n});\n\nconst AdornmentWrapper = styled('div', {\n position: 'absolute',\n top: 0,\n height: '100%',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n variants: {\n size: {\n small: {\n mx: 'calc($2 / 2)',\n },\n medium: {\n mx: 'calc($3 / 2)',\n },\n large: {\n mx: 'calc($3 / 2)',\n },\n },\n variant: {\n start: {\n left: 0,\n },\n end: {\n right: 0,\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n },\n});\n\nconst AdornmentWrapperStart = styled(AdornmentWrapper, {\n left: 0,\n});\n\nconst AdornmentWrapperEnd = styled(AdornmentWrapper, {\n right: 0,\n});\n\ntype DefaultInputVariants = VariantProps<typeof StyledInput>;\nexport type InputVariants = Omit<DefaultInputVariants, 'startAdornment' | 'endAdornment'>;\nexport interface HTMLInputProps extends React.InputHTMLAttributes<any> {\n startAdornment?: React.ReactNode;\n endAdornment?: React.ReactNode;\n type?: string;\n}\n\nexport type InputProps = Omit<HTMLInputProps, 'size'> & InputVariants & { css?: CSS };\n\nexport interface InputHandle extends HTMLInputElement {\n clear: () => void;\n}\n\nexport const Input = React.forwardRef<InputHandle, InputProps>(\n ({ size, startAdornment, endAdornment, css, ...props }, forwardedRef) => {\n const inputRef = React.useRef<InputHandle>(null);\n\n React.useImperativeHandle(\n forwardedRef,\n () => {\n const { current } = inputRef;\n if (current) {\n current.clear = () => {\n current.value = '';\n };\n }\n return current as InputHandle;\n },\n [inputRef]\n );\n\n const hasStartAdornment = React.useMemo(() => Boolean(startAdornment), [startAdornment]);\n\n const hasEndAdornment = React.useMemo(() => Boolean(endAdornment), [endAdornment]);\n\n return (\n <InputWrapper css={css} disabled={props.disabled} state={props.state}>\n {hasStartAdornment && (\n <AdornmentWrapperStart size={size}>{startAdornment}</AdornmentWrapperStart>\n )}\n\n <StyledInput\n ref={inputRef}\n startAdornment={hasStartAdornment}\n endAdornment={hasEndAdornment}\n size={size}\n {...props}\n />\n {hasEndAdornment && <AdornmentWrapperEnd size={size}>{endAdornment}</AdornmentWrapperEnd>}\n </InputWrapper>\n );\n }\n);\n"],"mappings":";;;;;;;AAMA,IAAM,eAAe,kBAAA,kBAAkB,GAAG;AAM1C,IAAM,cAAc,wBAAA,OAAO,SAAS;CAElC,YAAY;CACZ,aAAa;CACb,WAAW;CACX,YAAY;CACZ,QAAQ;CACR,SAAS;CACT,SAAS;CACT,OAAO;CACP,yBAAyB;CAGzB,UAAU;CACV,iBAAiB;CACjB,cAAc;CACd,WAAW;CACX,OAAO;CACP,oBAAoB;CACpB,YAAY;CAEZ,sBAAoB,EAClB,IAAI,KACL;CAED,iCAAiC,EAC/B,WAAW,0EACZ;CAED,yDAAyD;EACvD,YAAY;EACZ,OAAO;EACR;CAED,mBAAmB,EACjB,WAAW,6CAA6C,gBACzD;CAED,kBAAkB,EAChB,OAAO,qBACR;CAED,8BAA8B,EAC5B,WAAW,QACZ;CAED,cAAc;EACZ,eAAe;EACf,OAAO;EACR;CAED,UAAU;EACR,MAAM;GACJ,OAAO;IACL,QAAQ;IACR,UAAU;IACV,IAAI;IACJ,YAAY;IACZ,yDAAyD,EACvD,UAAU,MACX;IACF;GACD,QAAQ;IACN,QAAQ;IACR,UAAU;IACV,IAAI;IACJ,YAAY;IACZ,yDAAyD,EACvD,UAAU,MACX;IACF;GACD,OAAO;IACL,QAAQ;IACR,UAAU;IACV,IAAI;IACJ,YAAY;IACZ,yDAAyD,EACvD,UAAU,MACX;IACF;GACF;EACD,gBAAgB,EACd,MAAM,EAAE,EACT;EACD,cAAc,EACZ,MAAM,EAAE,EACT;EACD,SAAS,EACP,OAAO;GACL,WAAW;GACX,cAAc,EACZ,WAAW,QACZ;GACD,iBAAiB;GACjB,mBAAmB,EACjB,iBAAiB,eAClB;GACF,EACF;EACD,OAAO,EACL,SAAS;GACP,WAAW;GACX,mBAAmB,EACjB,WAAW,+CAA+C,gBAC3D;GACF,EACF;EACD,QAAQ;GACN,SAAS;IACP,QAAQ;IACR,UAAU,EACR,2BAA2B,EACzB,QAAQ,QACT,EACF;IACD,mCAAmC,EACjC,QAAQ,QACT;IACF;GACD,MAAM,EACJ,QAAQ,QACT;GACF;EACF;CACD,iBAAiB;EACf,MAAM;EACN,QAAQ;EACT;CACD,kBAAkB;EAChB;GACE,SAAS;GACT,OAAO;GACP,KAAK,EACH,WAAW,8CACZ;GACF;EACD;GACE,gBAAgB;GAChB,MAAM;GACN,KAAK,EACH,oBAAoB,mBACrB;GACF;EACD;GACE,gBAAgB;GAChB,MAAM;GACN,KAAK,EACH,oBAAoB,mBACrB;GACF;EACD;GACE,gBAAgB;GAChB,MAAM;GACN,KAAK,EACH,oBAAoB,mBACrB;GACF;EACD;GACE,cAAc;GACd,MAAM;GACN,KAAK,EACH,kBAAkB,mBACnB;GACF;EACD;GACE,cAAc;GACd,MAAM;GACN,KAAK,EACH,kBAAkB,mBACnB;GACF;EACD;GACE,cAAc;GACd,MAAM;GACN,KAAK,EACH,kBAAkB,mBACnB;GACF;EACD;GACE,cAAc;GACd,MAAM;GACN,OAAO;GACP,KAAK,EACH,kBAAkB,mBACnB;GACF;EACD;GACE,cAAc;GACd,MAAM;GACN,OAAO;GACP,KAAK,EACH,kBAAkB,mBACnB;GACF;EACD;GACE,cAAc;GACd,MAAM;GACN,OAAO;GACP,KAAK,EACH,kBAAkB,mBACnB;GACF;EACF;CACF,CAAC;AAEF,IAAM,eAAe,wBAAA,OAAO,OAAO;CAEjC,SAAS;CACT,YAAY;CAEZ,UAAU;CACV,iBAAiB;CACjB,OAAO;CAEP,aAAa;EACX,WAAW;EACX,SAAS;EACT,UAAU;EACV,OAAO;EACP,eAAe;EAChB;CACD,YAAY;EACV,WAAW;EACX,SAAS;EACT,UAAU;EACV,OAAO;EACP,eAAe;EAChB;CAED,mBAAmB;EACjB,aAAa,EACX,iBAAiB,iBAClB;EACD,YAAY;GACV,iBAAiB;GACjB,SAAS;GACV;EACF;CAED,UAAU,EACR,WAAW;EACT,aAAa,EACX,iBAAiB,iBAClB;EACD,YAAY;GACV,iBAAiB;GACjB,SAAS;GACV;EACF,EACF;CAED,UAAU;EACR,UAAU,EACR,MAAM;GACJ,SAAS;GACT,OAAO;GACP,UAAU,EACR,WAAW;IACT,aAAa,EACX,iBAAiB,WAClB;IACD,YAAY,EACV,iBAAiB,WAClB;IACF,EACF;GACF,EACF;EACD,OAAO,EACL,SAAS,EACP,UAAU,EACR,WAAW,EACT,YAAY,EACV,iBAAiB,uBAClB,EACF,EACF,EACF,EACF;EACD,MAAM;GACJ,OAAO;IACL,cAAc;IACd,uBAAuB,EACrB,cAAc,MACf;IACF;GACD,QAAQ;IACN,cAAc;IACd,uBAAuB,EACrB,cAAc,MACf;IACF;GACD,OAAO;IACL,cAAc;IACd,uBAAuB,EACrB,cAAc,MACf;IACF;GACF;EACF;CACD,iBAAiB;EACf,MAAM;EACN,UAAU;EACX;CACF,CAAC;AAEF,IAAM,mBAAmB,wBAAA,OAAO,OAAO;CACrC,UAAU;CACV,KAAK;CACL,QAAQ;CACR,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,UAAU;EACR,MAAM;GACJ,OAAO,EACL,IAAI,gBACL;GACD,QAAQ,EACN,IAAI,gBACL;GACD,OAAO,EACL,IAAI,gBACL;GACF;EACD,SAAS;GACP,OAAO,EACL,MAAM,GACP;GACD,KAAK,EACH,OAAO,GACR;GACF;EACF;CACD,iBAAiB,EACf,MAAM,UACP;CACF,CAAC;AAEF,IAAM,wBAAwB,wBAAA,OAAO,kBAAkB,EACrD,MAAM,GACP,CAAC;AAEF,IAAM,sBAAsB,wBAAA,OAAO,kBAAkB,EACnD,OAAO,GACR,CAAC;AAgBF,IAAa,QAAQ,MAAA,QAAM,YACxB,EAAE,MAAM,gBAAgB,cAAc,KAAK,GAAG,SAAS,iBAAiB;CACvE,MAAM,WAAW,MAAA,QAAM,OAAoB,KAAK;AAEhD,OAAA,QAAM,oBACJ,oBACM;EACJ,MAAM,EAAE,YAAY;AACpB,MAAI,QACF,SAAQ,cAAc;AACpB,WAAQ,QAAQ;;AAGpB,SAAO;IAET,CAAC,SAAS,CACX;CAED,MAAM,oBAAoB,MAAA,QAAM,cAAc,QAAQ,eAAe,EAAE,CAAC,eAAe,CAAC;CAExF,MAAM,kBAAkB,MAAA,QAAM,cAAc,QAAQ,aAAa,EAAE,CAAC,aAAa,CAAC;AAElF,QACE,iBAAA,GAAA,kBAAA,MAAC,cAAD;EAAmB;EAAK,UAAU,MAAM;EAAU,OAAO,MAAM;YAA/D;GACG,qBACC,iBAAA,GAAA,kBAAA,KAAC,uBAAD;IAA6B;cAAO;IAAuC,CAAA;GAG7E,iBAAA,GAAA,kBAAA,KAAC,aAAD;IACE,KAAK;IACL,gBAAgB;IAChB,cAAc;IACR;IACN,GAAI;IACJ,CAAA;GACD,mBAAmB,iBAAA,GAAA,kBAAA,KAAC,qBAAD;IAA2B;cAAO;IAAmC,CAAA;GAC5E;;EAGpB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","names":[],"sources":["../../../components/Input/Input.tsx"],"sourcesContent":["import React from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { elevationVariants } from '../Elevation';\n\n// CONSTANTS\nconst FOCUS_SHADOW = elevationVariants[1].boxShadow; // apply elevation $1 when focus\n\nconst SMALL_HEIGHT = '$5';\nconst MEDIUM_HEIGHT = '$6';\nconst LARGE_HEIGHT = '$7';\n\nconst StyledInput = styled('input', {\n // Reset\n appearance: 'none',\n borderWidth: '0',\n boxSizing: 'border-box',\n fontFamily: '$rubik',\n margin: '0',\n outline: 'none',\n padding: '0',\n width: '100%',\n WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n\n // Custom\n position: 'relative',\n backgroundColor: 'transparent',\n borderRadius: 'inherit', // inherit border radius from InputWrapper\n boxShadow: 'inset 0 0 0 1px $colors$inputBorder',\n color: '$inputText',\n fontVariantNumeric: 'tabular-nums',\n transition: 'box-shadow .1s ease-in-out',\n\n '&[type=\"number\"]': {\n pr: '0', // remove padding for number native controls\n },\n\n '&:-webkit-autofill,&:autofill': {\n boxShadow: 'inset 0 0 0 1px $colors$inputBorder, inset 0 0 0 100px $colors$inputBg',\n },\n\n '&:-webkit-autofill::first-line,&:autofill::first-line': {\n fontFamily: '$rubik',\n color: '$hiContrast',\n },\n\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px $colors$inputFocusBorder, ${FOCUS_SHADOW}`,\n },\n\n '&::placeholder': {\n color: '$inputPlaceholder',\n },\n\n '&:read-only:not(:disabled)': {\n boxShadow: 'none',\n },\n\n '&:disabled': {\n pointerEvents: 'none',\n color: '$inputDisabledText',\n },\n\n variants: {\n size: {\n small: {\n height: SMALL_HEIGHT,\n fontSize: '$1',\n px: '$2',\n lineHeight: '$sizes$5',\n '&:-webkit-autofill::first-line,&:autofill::first-line': {\n fontSize: '$1',\n },\n },\n medium: {\n height: MEDIUM_HEIGHT,\n fontSize: '$3',\n px: '$3',\n lineHeight: '$sizes$6',\n '&:-webkit-autofill::first-line,&:autofill::first-line': {\n fontSize: '$3',\n },\n },\n large: {\n height: LARGE_HEIGHT,\n fontSize: '$3',\n px: '$3',\n lineHeight: '$sizes$7',\n '&:-webkit-autofill::first-line,&:autofill::first-line': {\n fontSize: '$3',\n },\n },\n },\n startAdornment: {\n true: {},\n },\n endAdornment: {\n true: {},\n },\n variant: {\n ghost: {\n boxShadow: 'none',\n '&:disabled': {\n boxShadow: 'none',\n },\n backgroundColor: 'transparent',\n '&:focus-visible': {\n backgroundColor: '$loContrast',\n },\n },\n },\n state: {\n invalid: {\n boxShadow: 'inset 0 0 0 1px $colors$inputInvalidBorder',\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px $colors$inputInvalidBorder, ${FOCUS_SHADOW}`,\n },\n },\n },\n cursor: {\n default: {\n cursor: 'default',\n '@hover': {\n '&:hover:not(:read-only)': {\n cursor: 'text',\n },\n },\n '&:focus-visible:not(:read-only)': {\n cursor: 'text',\n },\n },\n text: {\n cursor: 'text',\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n cursor: 'default',\n },\n compoundVariants: [\n {\n variant: 'ghost',\n state: 'invalid',\n css: {\n boxShadow: 'inset 0 0 0 1px $colors$inputInvalidBorder',\n },\n },\n {\n startAdornment: true,\n size: 'small',\n css: {\n paddingInlineStart: 'calc($2 + 15px)',\n },\n },\n {\n startAdornment: true,\n size: 'medium',\n css: {\n paddingInlineStart: 'calc($3 + 15px)',\n },\n },\n {\n startAdornment: true,\n size: 'large',\n css: {\n paddingInlineStart: 'calc($3 + 15px)',\n },\n },\n {\n endAdornment: true,\n size: 'small',\n css: {\n paddingInlineEnd: 'calc($2 + 15px)',\n },\n },\n {\n endAdornment: true,\n size: 'medium',\n css: {\n paddingInlineEnd: 'calc($3 + 15px)',\n },\n },\n {\n endAdornment: true,\n size: 'large',\n css: {\n paddingInlineEnd: 'calc($3 + 15px)',\n },\n },\n {\n endAdornment: true,\n size: 'small',\n state: 'invalid',\n css: {\n paddingInlineEnd: 'calc($4 + 30px)', // size padding + adornment margins + icon size + icon size\n },\n },\n {\n endAdornment: true,\n size: 'medium',\n state: 'invalid',\n css: {\n paddingInlineEnd: 'calc($6 + 30px)', // size padding + adornment margins + icon size + icon size\n },\n },\n {\n endAdornment: true,\n size: 'large',\n state: 'invalid',\n css: {\n paddingInlineEnd: 'calc($6 + 30px)', // size padding + adornment margins + icon size + icon size\n },\n },\n ],\n});\n\nconst InputWrapper = styled('div', {\n // Reset\n outline: 'none',\n lineHeight: 0,\n\n position: 'relative',\n backgroundColor: '$inputBg',\n color: '$inputPlaceholder',\n\n '&::before': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n pointerEvents: 'none',\n },\n '&::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n pointerEvents: 'none',\n },\n\n '&:focus-visible': {\n '&::before': {\n backgroundColor: '$inputFocusBg',\n },\n '&::after': {\n backgroundColor: '$primary',\n opacity: 0.15,\n },\n },\n\n '@hover': {\n '&:hover': {\n '&::before': {\n backgroundColor: '$inputHoverBg',\n },\n '&::after': {\n backgroundColor: '$primary',\n opacity: 0.05,\n },\n },\n },\n\n variants: {\n disabled: {\n true: {\n opacity: 0.7,\n color: '$inputDisabledText',\n '@hover': {\n '&:hover': {\n '&::before': {\n backgroundColor: 'inherit',\n },\n '&::after': {\n backgroundColor: 'inherit',\n },\n },\n },\n },\n },\n state: {\n invalid: {\n '@hover': {\n '&:hover': {\n '&::after': {\n backgroundColor: '$inputInvalidBorder',\n },\n },\n },\n },\n },\n size: {\n small: {\n borderRadius: '$2',\n '&::before, &::after': {\n borderRadius: '$2',\n },\n },\n medium: {\n borderRadius: '$3',\n '&::before, &::after': {\n borderRadius: '$3',\n },\n },\n large: {\n borderRadius: '$3',\n '&::before, &::after': {\n borderRadius: '$3',\n },\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n disabled: false,\n },\n});\n\nconst AdornmentWrapper = styled('div', {\n position: 'absolute',\n top: 0,\n height: '100%',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n variants: {\n size: {\n small: {\n mx: 'calc($2 / 2)',\n },\n medium: {\n mx: 'calc($3 / 2)',\n },\n large: {\n mx: 'calc($3 / 2)',\n },\n },\n variant: {\n start: {\n left: 0,\n },\n end: {\n right: 0,\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n },\n});\n\nconst AdornmentWrapperStart = styled(AdornmentWrapper, {\n left: 0,\n});\n\nconst AdornmentWrapperEnd = styled(AdornmentWrapper, {\n right: 0,\n});\n\ntype DefaultInputVariants = VariantProps<typeof StyledInput>;\nexport type InputVariants = Omit<DefaultInputVariants, 'startAdornment' | 'endAdornment'>;\nexport interface HTMLInputProps extends React.InputHTMLAttributes<any> {\n startAdornment?: React.ReactNode;\n endAdornment?: React.ReactNode;\n type?: string;\n}\n\nexport type InputProps = Omit<HTMLInputProps, 'size'> & InputVariants & { css?: CSS };\n\nexport interface InputHandle extends HTMLInputElement {\n clear: () => void;\n}\n\nexport const Input = React.forwardRef<InputHandle, InputProps>(\n ({ size, startAdornment, endAdornment, css, ...props }, forwardedRef) => {\n const inputRef = React.useRef<InputHandle>(null);\n\n React.useImperativeHandle(\n forwardedRef,\n () => {\n const { current } = inputRef;\n if (current) {\n current.clear = () => {\n current.value = '';\n };\n }\n return current as InputHandle;\n },\n [inputRef]\n );\n\n const hasStartAdornment = React.useMemo(() => Boolean(startAdornment), [startAdornment]);\n\n const hasEndAdornment = React.useMemo(() => Boolean(endAdornment), [endAdornment]);\n\n return (\n <InputWrapper css={css} disabled={props.disabled} state={props.state}>\n {hasStartAdornment && (\n <AdornmentWrapperStart size={size}>{startAdornment}</AdornmentWrapperStart>\n )}\n\n <StyledInput\n ref={inputRef}\n startAdornment={hasStartAdornment}\n endAdornment={hasEndAdornment}\n size={size}\n {...props}\n />\n {hasEndAdornment && <AdornmentWrapperEnd size={size}>{endAdornment}</AdornmentWrapperEnd>}\n </InputWrapper>\n );\n }\n);\n"],"mappings":";;;;;AAMA,IAAM,eAAe,kBAAkB,GAAG;AAM1C,IAAM,cAAc,OAAO,SAAS;CAElC,YAAY;CACZ,aAAa;CACb,WAAW;CACX,YAAY;CACZ,QAAQ;CACR,SAAS;CACT,SAAS;CACT,OAAO;CACP,yBAAyB;CAGzB,UAAU;CACV,iBAAiB;CACjB,cAAc;CACd,WAAW;CACX,OAAO;CACP,oBAAoB;CACpB,YAAY;CAEZ,sBAAoB,EAClB,IAAI,KACL;CAED,iCAAiC,EAC/B,WAAW,0EACZ;CAED,yDAAyD;EACvD,YAAY;EACZ,OAAO;EACR;CAED,mBAAmB,EACjB,WAAW,6CAA6C,gBACzD;CAED,kBAAkB,EAChB,OAAO,qBACR;CAED,8BAA8B,EAC5B,WAAW,QACZ;CAED,cAAc;EACZ,eAAe;EACf,OAAO;EACR;CAED,UAAU;EACR,MAAM;GACJ,OAAO;IACL,QA1Da;IA2Db,UAAU;IACV,IAAI;IACJ,YAAY;IACZ,yDAAyD,EACvD,UAAU,MACX;IACF;GACD,QAAQ;IACN,QAlEc;IAmEd,UAAU;IACV,IAAI;IACJ,YAAY;IACZ,yDAAyD,EACvD,UAAU,MACX;IACF;GACD,OAAO;IACL,QA1Ea;IA2Eb,UAAU;IACV,IAAI;IACJ,YAAY;IACZ,yDAAyD,EACvD,UAAU,MACX;IACF;GACF;EACD,gBAAgB,EACd,MAAM,EAAE,EACT;EACD,cAAc,EACZ,MAAM,EAAE,EACT;EACD,SAAS,EACP,OAAO;GACL,WAAW;GACX,cAAc,EACZ,WAAW,QACZ;GACD,iBAAiB;GACjB,mBAAmB,EACjB,iBAAiB,eAClB;GACF,EACF;EACD,OAAO,EACL,SAAS;GACP,WAAW;GACX,mBAAmB,EACjB,WAAW,+CAA+C,gBAC3D;GACF,EACF;EACD,QAAQ;GACN,SAAS;IACP,QAAQ;IACR,UAAU,EACR,2BAA2B,EACzB,QAAQ,QACT,EACF;IACD,mCAAmC,EACjC,QAAQ,QACT;IACF;GACD,MAAM,EACJ,QAAQ,QACT;GACF;EACF;CACD,iBAAiB;EACf,MAAM;EACN,QAAQ;EACT;CACD,kBAAkB;EAChB;GACE,SAAS;GACT,OAAO;GACP,KAAK,EACH,WAAW,8CACZ;GACF;EACD;GACE,gBAAgB;GAChB,MAAM;GACN,KAAK,EACH,oBAAoB,mBACrB;GACF;EACD;GACE,gBAAgB;GAChB,MAAM;GACN,KAAK,EACH,oBAAoB,mBACrB;GACF;EACD;GACE,gBAAgB;GAChB,MAAM;GACN,KAAK,EACH,oBAAoB,mBACrB;GACF;EACD;GACE,cAAc;GACd,MAAM;GACN,KAAK,EACH,kBAAkB,mBACnB;GACF;EACD;GACE,cAAc;GACd,MAAM;GACN,KAAK,EACH,kBAAkB,mBACnB;GACF;EACD;GACE,cAAc;GACd,MAAM;GACN,KAAK,EACH,kBAAkB,mBACnB;GACF;EACD;GACE,cAAc;GACd,MAAM;GACN,OAAO;GACP,KAAK,EACH,kBAAkB,mBACnB;GACF;EACD;GACE,cAAc;GACd,MAAM;GACN,OAAO;GACP,KAAK,EACH,kBAAkB,mBACnB;GACF;EACD;GACE,cAAc;GACd,MAAM;GACN,OAAO;GACP,KAAK,EACH,kBAAkB,mBACnB;GACF;EACF;CACF,CAAC;AAEF,IAAM,eAAe,OAAO,OAAO;CAEjC,SAAS;CACT,YAAY;CAEZ,UAAU;CACV,iBAAiB;CACjB,OAAO;CAEP,aAAa;EACX,WAAW;EACX,SAAS;EACT,UAAU;EACV,OAAO;EACP,eAAe;EAChB;CACD,YAAY;EACV,WAAW;EACX,SAAS;EACT,UAAU;EACV,OAAO;EACP,eAAe;EAChB;CAED,mBAAmB;EACjB,aAAa,EACX,iBAAiB,iBAClB;EACD,YAAY;GACV,iBAAiB;GACjB,SAAS;GACV;EACF;CAED,UAAU,EACR,WAAW;EACT,aAAa,EACX,iBAAiB,iBAClB;EACD,YAAY;GACV,iBAAiB;GACjB,SAAS;GACV;EACF,EACF;CAED,UAAU;EACR,UAAU,EACR,MAAM;GACJ,SAAS;GACT,OAAO;GACP,UAAU,EACR,WAAW;IACT,aAAa,EACX,iBAAiB,WAClB;IACD,YAAY,EACV,iBAAiB,WAClB;IACF,EACF;GACF,EACF;EACD,OAAO,EACL,SAAS,EACP,UAAU,EACR,WAAW,EACT,YAAY,EACV,iBAAiB,uBAClB,EACF,EACF,EACF,EACF;EACD,MAAM;GACJ,OAAO;IACL,cAAc;IACd,uBAAuB,EACrB,cAAc,MACf;IACF;GACD,QAAQ;IACN,cAAc;IACd,uBAAuB,EACrB,cAAc,MACf;IACF;GACD,OAAO;IACL,cAAc;IACd,uBAAuB,EACrB,cAAc,MACf;IACF;GACF;EACF;CACD,iBAAiB;EACf,MAAM;EACN,UAAU;EACX;CACF,CAAC;AAEF,IAAM,mBAAmB,OAAO,OAAO;CACrC,UAAU;CACV,KAAK;CACL,QAAQ;CACR,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,UAAU;EACR,MAAM;GACJ,OAAO,EACL,IAAI,gBACL;GACD,QAAQ,EACN,IAAI,gBACL;GACD,OAAO,EACL,IAAI,gBACL;GACF;EACD,SAAS;GACP,OAAO,EACL,MAAM,GACP;GACD,KAAK,EACH,OAAO,GACR;GACF;EACF;CACD,iBAAiB,EACf,MAAM,UACP;CACF,CAAC;AAEF,IAAM,wBAAwB,OAAO,kBAAkB,EACrD,MAAM,GACP,CAAC;AAEF,IAAM,sBAAsB,OAAO,kBAAkB,EACnD,OAAO,GACR,CAAC;AAgBF,IAAa,QAAQ,MAAM,YACxB,EAAE,MAAM,gBAAgB,cAAc,KAAK,GAAG,SAAS,iBAAiB;CACvE,MAAM,WAAW,MAAM,OAAoB,KAAK;AAEhD,OAAM,oBACJ,oBACM;EACJ,MAAM,EAAE,YAAY;AACpB,MAAI,QACF,SAAQ,cAAc;AACpB,WAAQ,QAAQ;;AAGpB,SAAO;IAET,CAAC,SAAS,CACX;CAED,MAAM,oBAAoB,MAAM,cAAc,QAAQ,eAAe,EAAE,CAAC,eAAe,CAAC;CAExF,MAAM,kBAAkB,MAAM,cAAc,QAAQ,aAAa,EAAE,CAAC,aAAa,CAAC;AAElF,QACE,qBAAC,cAAD;EAAmB;EAAK,UAAU,MAAM;EAAU,OAAO,MAAM;YAA/D;GACG,qBACC,oBAAC,uBAAD;IAA6B;cAAO;IAAuC,CAAA;GAG7E,oBAAC,aAAD;IACE,KAAK;IACL,gBAAgB;IAChB,cAAc;IACR;IACN,GAAI;IACJ,CAAA;GACD,mBAAmB,oBAAC,qBAAD;IAA2B;cAAO;IAAmC,CAAA;GAC5E;;EAGpB"}
|
|
1
|
+
{"version":3,"file":"Input.js","names":[],"sources":["../../../components/Input/Input.tsx"],"sourcesContent":["import React from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { elevationVariants } from '../Elevation';\n\n// CONSTANTS\nconst FOCUS_SHADOW = elevationVariants[1].boxShadow; // apply elevation $1 when focus\n\nconst SMALL_HEIGHT = '$5';\nconst MEDIUM_HEIGHT = '$6';\nconst LARGE_HEIGHT = '$7';\n\nconst StyledInput = styled('input', {\n // Reset\n appearance: 'none',\n borderWidth: '0',\n boxSizing: 'border-box',\n fontFamily: '$rubik',\n margin: '0',\n outline: 'none',\n padding: '0',\n width: '100%',\n WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n\n // Custom\n position: 'relative',\n backgroundColor: 'transparent',\n borderRadius: 'inherit', // inherit border radius from InputWrapper\n boxShadow: 'inset 0 0 0 1px $colors$inputBorder',\n color: '$inputText',\n fontVariantNumeric: 'tabular-nums',\n transition: 'box-shadow .1s ease-in-out',\n\n '&[type=\"number\"]': {\n pr: '0', // remove padding for number native controls\n },\n\n '&:-webkit-autofill,&:autofill': {\n boxShadow: 'inset 0 0 0 1px $colors$inputBorder, inset 0 0 0 100px $colors$inputBg',\n },\n\n '&:-webkit-autofill::first-line,&:autofill::first-line': {\n fontFamily: '$rubik',\n color: '$hiContrast',\n },\n\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px $colors$inputFocusBorder, ${FOCUS_SHADOW}`,\n },\n\n '&::placeholder': {\n color: '$inputPlaceholder',\n },\n\n '&:read-only:not(:disabled)': {\n boxShadow: 'none',\n },\n\n '&:disabled': {\n pointerEvents: 'none',\n color: '$inputDisabledText',\n },\n\n variants: {\n size: {\n small: {\n height: SMALL_HEIGHT,\n fontSize: '$1',\n px: '$2',\n lineHeight: '$sizes$5',\n '&:-webkit-autofill::first-line,&:autofill::first-line': {\n fontSize: '$1',\n },\n },\n medium: {\n height: MEDIUM_HEIGHT,\n fontSize: '$3',\n px: '$3',\n lineHeight: '$sizes$6',\n '&:-webkit-autofill::first-line,&:autofill::first-line': {\n fontSize: '$3',\n },\n },\n large: {\n height: LARGE_HEIGHT,\n fontSize: '$3',\n px: '$3',\n lineHeight: '$sizes$7',\n '&:-webkit-autofill::first-line,&:autofill::first-line': {\n fontSize: '$3',\n },\n },\n },\n startAdornment: {\n true: {},\n },\n endAdornment: {\n true: {},\n },\n variant: {\n ghost: {\n boxShadow: 'none',\n '&:disabled': {\n boxShadow: 'none',\n },\n backgroundColor: 'transparent',\n '&:focus-visible': {\n backgroundColor: '$loContrast',\n },\n },\n },\n state: {\n invalid: {\n boxShadow: 'inset 0 0 0 1px $colors$inputInvalidBorder',\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px $colors$inputInvalidBorder, ${FOCUS_SHADOW}`,\n },\n },\n },\n cursor: {\n default: {\n cursor: 'default',\n '@hover': {\n '&:hover:not(:read-only)': {\n cursor: 'text',\n },\n },\n '&:focus-visible:not(:read-only)': {\n cursor: 'text',\n },\n },\n text: {\n cursor: 'text',\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n cursor: 'default',\n },\n compoundVariants: [\n {\n variant: 'ghost',\n state: 'invalid',\n css: {\n boxShadow: 'inset 0 0 0 1px $colors$inputInvalidBorder',\n },\n },\n {\n startAdornment: true,\n size: 'small',\n css: {\n paddingInlineStart: 'calc($2 + 15px)',\n },\n },\n {\n startAdornment: true,\n size: 'medium',\n css: {\n paddingInlineStart: 'calc($3 + 15px)',\n },\n },\n {\n startAdornment: true,\n size: 'large',\n css: {\n paddingInlineStart: 'calc($3 + 15px)',\n },\n },\n {\n endAdornment: true,\n size: 'small',\n css: {\n paddingInlineEnd: 'calc($2 + 15px)',\n },\n },\n {\n endAdornment: true,\n size: 'medium',\n css: {\n paddingInlineEnd: 'calc($3 + 15px)',\n },\n },\n {\n endAdornment: true,\n size: 'large',\n css: {\n paddingInlineEnd: 'calc($3 + 15px)',\n },\n },\n {\n endAdornment: true,\n size: 'small',\n state: 'invalid',\n css: {\n paddingInlineEnd: 'calc($4 + 30px)', // size padding + adornment margins + icon size + icon size\n },\n },\n {\n endAdornment: true,\n size: 'medium',\n state: 'invalid',\n css: {\n paddingInlineEnd: 'calc($6 + 30px)', // size padding + adornment margins + icon size + icon size\n },\n },\n {\n endAdornment: true,\n size: 'large',\n state: 'invalid',\n css: {\n paddingInlineEnd: 'calc($6 + 30px)', // size padding + adornment margins + icon size + icon size\n },\n },\n ],\n});\n\nconst InputWrapper = styled('div', {\n // Reset\n outline: 'none',\n lineHeight: 0,\n\n position: 'relative',\n backgroundColor: '$inputBg',\n color: '$inputPlaceholder',\n\n '&::before': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n pointerEvents: 'none',\n },\n '&::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n pointerEvents: 'none',\n },\n\n '&:focus-visible': {\n '&::before': {\n backgroundColor: '$inputFocusBg',\n },\n '&::after': {\n backgroundColor: '$primary',\n opacity: 0.15,\n },\n },\n\n '@hover': {\n '&:hover': {\n '&::before': {\n backgroundColor: '$inputHoverBg',\n },\n '&::after': {\n backgroundColor: '$primary',\n opacity: 0.05,\n },\n },\n },\n\n variants: {\n disabled: {\n true: {\n opacity: 0.7,\n color: '$inputDisabledText',\n '@hover': {\n '&:hover': {\n '&::before': {\n backgroundColor: 'inherit',\n },\n '&::after': {\n backgroundColor: 'inherit',\n },\n },\n },\n },\n },\n state: {\n invalid: {\n '@hover': {\n '&:hover': {\n '&::after': {\n backgroundColor: '$inputInvalidBorder',\n },\n },\n },\n },\n },\n size: {\n small: {\n borderRadius: '$2',\n '&::before, &::after': {\n borderRadius: '$2',\n },\n },\n medium: {\n borderRadius: '$3',\n '&::before, &::after': {\n borderRadius: '$3',\n },\n },\n large: {\n borderRadius: '$3',\n '&::before, &::after': {\n borderRadius: '$3',\n },\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n disabled: false,\n },\n});\n\nconst AdornmentWrapper = styled('div', {\n position: 'absolute',\n top: 0,\n height: '100%',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n variants: {\n size: {\n small: {\n mx: 'calc($2 / 2)',\n },\n medium: {\n mx: 'calc($3 / 2)',\n },\n large: {\n mx: 'calc($3 / 2)',\n },\n },\n variant: {\n start: {\n left: 0,\n },\n end: {\n right: 0,\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n },\n});\n\nconst AdornmentWrapperStart = styled(AdornmentWrapper, {\n left: 0,\n});\n\nconst AdornmentWrapperEnd = styled(AdornmentWrapper, {\n right: 0,\n});\n\ntype DefaultInputVariants = VariantProps<typeof StyledInput>;\nexport type InputVariants = Omit<DefaultInputVariants, 'startAdornment' | 'endAdornment'>;\nexport interface HTMLInputProps extends React.InputHTMLAttributes<any> {\n startAdornment?: React.ReactNode;\n endAdornment?: React.ReactNode;\n type?: string;\n}\n\nexport type InputProps = Omit<HTMLInputProps, 'size'> & InputVariants & { css?: CSS };\n\nexport interface InputHandle extends HTMLInputElement {\n clear: () => void;\n}\n\nexport const Input = React.forwardRef<InputHandle, InputProps>(\n ({ size, startAdornment, endAdornment, css, ...props }, forwardedRef) => {\n const inputRef = React.useRef<InputHandle>(null);\n\n React.useImperativeHandle(\n forwardedRef,\n () => {\n const { current } = inputRef;\n if (current) {\n current.clear = () => {\n current.value = '';\n };\n }\n return current as InputHandle;\n },\n [inputRef]\n );\n\n const hasStartAdornment = React.useMemo(() => Boolean(startAdornment), [startAdornment]);\n\n const hasEndAdornment = React.useMemo(() => Boolean(endAdornment), [endAdornment]);\n\n return (\n <InputWrapper css={css} disabled={props.disabled} state={props.state}>\n {hasStartAdornment && (\n <AdornmentWrapperStart size={size}>{startAdornment}</AdornmentWrapperStart>\n )}\n\n <StyledInput\n ref={inputRef}\n startAdornment={hasStartAdornment}\n endAdornment={hasEndAdornment}\n size={size}\n {...props}\n />\n {hasEndAdornment && <AdornmentWrapperEnd size={size}>{endAdornment}</AdornmentWrapperEnd>}\n </InputWrapper>\n );\n }\n);\n"],"mappings":";;;;;AAMA,IAAM,eAAe,kBAAkB,GAAG;AAM1C,IAAM,cAAc,OAAO,SAAS;CAElC,YAAY;CACZ,aAAa;CACb,WAAW;CACX,YAAY;CACZ,QAAQ;CACR,SAAS;CACT,SAAS;CACT,OAAO;CACP,yBAAyB;CAGzB,UAAU;CACV,iBAAiB;CACjB,cAAc;CACd,WAAW;CACX,OAAO;CACP,oBAAoB;CACpB,YAAY;CAEZ,sBAAoB,EAClB,IAAI,KACL;CAED,iCAAiC,EAC/B,WAAW,0EACZ;CAED,yDAAyD;EACvD,YAAY;EACZ,OAAO;EACR;CAED,mBAAmB,EACjB,WAAW,6CAA6C,gBACzD;CAED,kBAAkB,EAChB,OAAO,qBACR;CAED,8BAA8B,EAC5B,WAAW,QACZ;CAED,cAAc;EACZ,eAAe;EACf,OAAO;EACR;CAED,UAAU;EACR,MAAM;GACJ,OAAO;IACL,QAAQ;IACR,UAAU;IACV,IAAI;IACJ,YAAY;IACZ,yDAAyD,EACvD,UAAU,MACX;IACF;GACD,QAAQ;IACN,QAAQ;IACR,UAAU;IACV,IAAI;IACJ,YAAY;IACZ,yDAAyD,EACvD,UAAU,MACX;IACF;GACD,OAAO;IACL,QAAQ;IACR,UAAU;IACV,IAAI;IACJ,YAAY;IACZ,yDAAyD,EACvD,UAAU,MACX;IACF;GACF;EACD,gBAAgB,EACd,MAAM,EAAE,EACT;EACD,cAAc,EACZ,MAAM,EAAE,EACT;EACD,SAAS,EACP,OAAO;GACL,WAAW;GACX,cAAc,EACZ,WAAW,QACZ;GACD,iBAAiB;GACjB,mBAAmB,EACjB,iBAAiB,eAClB;GACF,EACF;EACD,OAAO,EACL,SAAS;GACP,WAAW;GACX,mBAAmB,EACjB,WAAW,+CAA+C,gBAC3D;GACF,EACF;EACD,QAAQ;GACN,SAAS;IACP,QAAQ;IACR,UAAU,EACR,2BAA2B,EACzB,QAAQ,QACT,EACF;IACD,mCAAmC,EACjC,QAAQ,QACT;IACF;GACD,MAAM,EACJ,QAAQ,QACT;GACF;EACF;CACD,iBAAiB;EACf,MAAM;EACN,QAAQ;EACT;CACD,kBAAkB;EAChB;GACE,SAAS;GACT,OAAO;GACP,KAAK,EACH,WAAW,8CACZ;GACF;EACD;GACE,gBAAgB;GAChB,MAAM;GACN,KAAK,EACH,oBAAoB,mBACrB;GACF;EACD;GACE,gBAAgB;GAChB,MAAM;GACN,KAAK,EACH,oBAAoB,mBACrB;GACF;EACD;GACE,gBAAgB;GAChB,MAAM;GACN,KAAK,EACH,oBAAoB,mBACrB;GACF;EACD;GACE,cAAc;GACd,MAAM;GACN,KAAK,EACH,kBAAkB,mBACnB;GACF;EACD;GACE,cAAc;GACd,MAAM;GACN,KAAK,EACH,kBAAkB,mBACnB;GACF;EACD;GACE,cAAc;GACd,MAAM;GACN,KAAK,EACH,kBAAkB,mBACnB;GACF;EACD;GACE,cAAc;GACd,MAAM;GACN,OAAO;GACP,KAAK,EACH,kBAAkB,mBACnB;GACF;EACD;GACE,cAAc;GACd,MAAM;GACN,OAAO;GACP,KAAK,EACH,kBAAkB,mBACnB;GACF;EACD;GACE,cAAc;GACd,MAAM;GACN,OAAO;GACP,KAAK,EACH,kBAAkB,mBACnB;GACF;EACF;CACF,CAAC;AAEF,IAAM,eAAe,OAAO,OAAO;CAEjC,SAAS;CACT,YAAY;CAEZ,UAAU;CACV,iBAAiB;CACjB,OAAO;CAEP,aAAa;EACX,WAAW;EACX,SAAS;EACT,UAAU;EACV,OAAO;EACP,eAAe;EAChB;CACD,YAAY;EACV,WAAW;EACX,SAAS;EACT,UAAU;EACV,OAAO;EACP,eAAe;EAChB;CAED,mBAAmB;EACjB,aAAa,EACX,iBAAiB,iBAClB;EACD,YAAY;GACV,iBAAiB;GACjB,SAAS;GACV;EACF;CAED,UAAU,EACR,WAAW;EACT,aAAa,EACX,iBAAiB,iBAClB;EACD,YAAY;GACV,iBAAiB;GACjB,SAAS;GACV;EACF,EACF;CAED,UAAU;EACR,UAAU,EACR,MAAM;GACJ,SAAS;GACT,OAAO;GACP,UAAU,EACR,WAAW;IACT,aAAa,EACX,iBAAiB,WAClB;IACD,YAAY,EACV,iBAAiB,WAClB;IACF,EACF;GACF,EACF;EACD,OAAO,EACL,SAAS,EACP,UAAU,EACR,WAAW,EACT,YAAY,EACV,iBAAiB,uBAClB,EACF,EACF,EACF,EACF;EACD,MAAM;GACJ,OAAO;IACL,cAAc;IACd,uBAAuB,EACrB,cAAc,MACf;IACF;GACD,QAAQ;IACN,cAAc;IACd,uBAAuB,EACrB,cAAc,MACf;IACF;GACD,OAAO;IACL,cAAc;IACd,uBAAuB,EACrB,cAAc,MACf;IACF;GACF;EACF;CACD,iBAAiB;EACf,MAAM;EACN,UAAU;EACX;CACF,CAAC;AAEF,IAAM,mBAAmB,OAAO,OAAO;CACrC,UAAU;CACV,KAAK;CACL,QAAQ;CACR,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,UAAU;EACR,MAAM;GACJ,OAAO,EACL,IAAI,gBACL;GACD,QAAQ,EACN,IAAI,gBACL;GACD,OAAO,EACL,IAAI,gBACL;GACF;EACD,SAAS;GACP,OAAO,EACL,MAAM,GACP;GACD,KAAK,EACH,OAAO,GACR;GACF;EACF;CACD,iBAAiB,EACf,MAAM,UACP;CACF,CAAC;AAEF,IAAM,wBAAwB,OAAO,kBAAkB,EACrD,MAAM,GACP,CAAC;AAEF,IAAM,sBAAsB,OAAO,kBAAkB,EACnD,OAAO,GACR,CAAC;AAgBF,IAAa,QAAQ,MAAM,YACxB,EAAE,MAAM,gBAAgB,cAAc,KAAK,GAAG,SAAS,iBAAiB;CACvE,MAAM,WAAW,MAAM,OAAoB,KAAK;AAEhD,OAAM,oBACJ,oBACM;EACJ,MAAM,EAAE,YAAY;AACpB,MAAI,QACF,SAAQ,cAAc;AACpB,WAAQ,QAAQ;;AAGpB,SAAO;IAET,CAAC,SAAS,CACX;CAED,MAAM,oBAAoB,MAAM,cAAc,QAAQ,eAAe,EAAE,CAAC,eAAe,CAAC;CAExF,MAAM,kBAAkB,MAAM,cAAc,QAAQ,aAAa,EAAE,CAAC,aAAa,CAAC;AAElF,QACE,qBAAC,cAAD;EAAmB;EAAK,UAAU,MAAM;EAAU,OAAO,MAAM;YAA/D;GACG,qBACC,oBAAC,uBAAD;IAA6B;cAAO;IAAuC,CAAA;GAG7E,oBAAC,aAAD;IACE,KAAK;IACL,gBAAgB;IAChB,cAAc;IACR;IACN,GAAI;IACJ,CAAA;GACD,mBAAmB,oBAAC,qBAAD;IAA2B;cAAO;IAAmC,CAAA;GAC5E;;EAGpB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Label.vanilla.cjs","names":[],"sources":["../../../components/Label/Label.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n PolymorphicComponent,\n PolymorphicComponentProps,\n PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { labelRecipe } from './Label.vanilla.css';\n\ntype LabelRecipeVariants = NonNullable<RecipeVariants<typeof labelRecipe>>;\n\ninterface LabelOwnProps extends LabelRecipeVariants, CSSProps {}\n\nexport type LabelVanillaProps<C extends ElementType = 'label'> = PolymorphicComponentProps<\n C,\n LabelOwnProps\n>;\n\ntype LabelVanillaComponent = PolymorphicComponent<'label', LabelVanillaProps<ElementType>>;\n\nconst LabelVanillaComponentImpl = forwardRef(\n <C extends ElementType = 'label'>(\n {\n as,\n className,\n css,\n style,\n size,\n weight,\n variant,\n gradient,\n transform,\n noWrap,\n ...props\n }: LabelVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as || 'label';\n const { colors } = useVanillaExtractTheme();\n\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n const mergedStyles = {\n ...cssStyles,\n ...style,\n ...assignInlineVars(vars),\n };\n\n const recipeClass = labelRecipe({ size, weight, variant, gradient, transform, noWrap });\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className || ''}`.trim()}\n style={mergedStyles}\n {...props}\n />\n );\n },\n);\n\nLabelVanillaComponentImpl.displayName = 'LabelVanilla';\n\nexport const LabelVanilla = LabelVanillaComponentImpl as LabelVanillaComponent;\n"],"mappings":";;;;;;;;AAwBA,IAAM,6BAAA,GAAA,MAAA,aAEF,EACE,IACA,WACA,KACA,OACA,MACA,QACA,SACA,UACA,WACA,QACA,GAAG,SAEL,QACG;CACH,MAAM,YAAY,MAAM;CACxB,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;AAID,QACE,iBAAA,GAAA,kBAAA,KAAC,WAAD;EACO;EACL,WAAW,GALK,0BAAA,YAAY;GAAE;GAAM;GAAQ;GAAS;GAAU;GAAW;GAAQ,
|
|
1
|
+
{"version":3,"file":"Label.vanilla.cjs","names":[],"sources":["../../../components/Label/Label.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n PolymorphicComponent,\n PolymorphicComponentProps,\n PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { labelRecipe } from './Label.vanilla.css';\n\ntype LabelRecipeVariants = NonNullable<RecipeVariants<typeof labelRecipe>>;\n\ninterface LabelOwnProps extends LabelRecipeVariants, CSSProps {}\n\nexport type LabelVanillaProps<C extends ElementType = 'label'> = PolymorphicComponentProps<\n C,\n LabelOwnProps\n>;\n\ntype LabelVanillaComponent = PolymorphicComponent<'label', LabelVanillaProps<ElementType>>;\n\nconst LabelVanillaComponentImpl = forwardRef(\n <C extends ElementType = 'label'>(\n {\n as,\n className,\n css,\n style,\n size,\n weight,\n variant,\n gradient,\n transform,\n noWrap,\n ...props\n }: LabelVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as || 'label';\n const { colors } = useVanillaExtractTheme();\n\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n const mergedStyles = {\n ...cssStyles,\n ...style,\n ...assignInlineVars(vars),\n };\n\n const recipeClass = labelRecipe({ size, weight, variant, gradient, transform, noWrap });\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className || ''}`.trim()}\n style={mergedStyles}\n {...props}\n />\n );\n },\n);\n\nLabelVanillaComponentImpl.displayName = 'LabelVanilla';\n\nexport const LabelVanilla = LabelVanillaComponentImpl as LabelVanillaComponent;\n"],"mappings":";;;;;;;;AAwBA,IAAM,6BAAA,GAAA,MAAA,aAEF,EACE,IACA,WACA,KACA,OACA,MACA,QACA,SACA,UACA,WACA,QACA,GAAG,SAEL,QACG;CACH,MAAM,YAAY,MAAM;CACxB,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;AAID,QACE,iBAAA,GAAA,kBAAA,KAAC,WAAD;EACO;EACL,WAAW,GALK,0BAAA,YAAY;GAAE;GAAM;GAAQ;GAAS;GAAU;GAAW;GAAQ,CAKpE,CAAY,GAAG,aAAa,KAAK,MAAM;EACrD,OAAO;EACP,GAAI;EACJ,CAAA;EAGP;AAED,0BAA0B,cAAc;AAExC,IAAa,eAAe"}
|