@traefik-labs/faency 12.0.12 → 12.2.0

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.
Files changed (87) hide show
  1. package/dist/components/AriaTable/AriaTable.cjs.map +1 -1
  2. package/dist/components/AriaTable/AriaTable.js.map +1 -1
  3. package/dist/components/Avatar/Avatar.vanilla.css.cjs +3 -3
  4. package/dist/components/Avatar/Avatar.vanilla.css.js +1 -1
  5. package/dist/components/Badge/Badge.vanilla.css.cjs +3 -3
  6. package/dist/components/Badge/Badge.vanilla.css.js +1 -1
  7. package/dist/components/Blockquote/Blockquote.vanilla.css.cjs +2 -2
  8. package/dist/components/Blockquote/Blockquote.vanilla.css.js +1 -1
  9. package/dist/components/Bubble/Bubble.vanilla.css.cjs +2 -2
  10. package/dist/components/Bubble/Bubble.vanilla.css.js +1 -1
  11. package/dist/components/Button/Button.cjs +2 -1
  12. package/dist/components/Button/Button.cjs.map +1 -1
  13. package/dist/components/Button/Button.js +2 -1
  14. package/dist/components/Button/Button.js.map +1 -1
  15. package/dist/components/Button/Button.vanilla.css.cjs +2 -2
  16. package/dist/components/Button/Button.vanilla.css.js +1 -1
  17. package/dist/components/Card/Card.vanilla.css.cjs +3 -3
  18. package/dist/components/Card/Card.vanilla.css.js +1 -1
  19. package/dist/components/CodeBlock/CodeBlock.cjs +168 -0
  20. package/dist/components/CodeBlock/CodeBlock.cjs.map +1 -0
  21. package/dist/components/CodeBlock/CodeBlock.js +168 -0
  22. package/dist/components/CodeBlock/CodeBlock.js.map +1 -0
  23. package/dist/components/CodeBlock/CodeBlock.themes.cjs +18 -0
  24. package/dist/components/CodeBlock/CodeBlock.themes.cjs.map +1 -0
  25. package/dist/components/CodeBlock/CodeBlock.themes.js +19 -0
  26. package/dist/components/CodeBlock/CodeBlock.themes.js.map +1 -0
  27. package/dist/components/CodeBlock/CodeBlock.vanilla.cjs +158 -0
  28. package/dist/components/CodeBlock/CodeBlock.vanilla.cjs.map +1 -0
  29. package/dist/components/CodeBlock/CodeBlock.vanilla.css.cjs +20 -0
  30. package/dist/components/CodeBlock/CodeBlock.vanilla.css.cjs.map +1 -0
  31. package/dist/components/CodeBlock/CodeBlock.vanilla.css.js +20 -0
  32. package/dist/components/CodeBlock/CodeBlock.vanilla.css.js.map +1 -0
  33. package/dist/components/CodeBlock/CodeBlock.vanilla.js +158 -0
  34. package/dist/components/CodeBlock/CodeBlock.vanilla.js.map +1 -0
  35. package/dist/components/Container/Container.vanilla.css.cjs +2 -2
  36. package/dist/components/Container/Container.vanilla.css.js +1 -1
  37. package/dist/components/DateTimePicker/DateTimePicker.cjs +1 -1
  38. package/dist/components/DateTimePicker/DateTimePicker.js +1 -1
  39. package/dist/components/Elevation/Elevation.vanilla.css.cjs +2 -2
  40. package/dist/components/Elevation/Elevation.vanilla.css.js +1 -1
  41. package/dist/components/FaencyProvider.cjs +2 -1
  42. package/dist/components/FaencyProvider.cjs.map +1 -1
  43. package/dist/components/FaencyProvider.js +2 -1
  44. package/dist/components/FaencyProvider.js.map +1 -1
  45. package/dist/components/Flex/Flex.vanilla.css.cjs +2 -2
  46. package/dist/components/Flex/Flex.vanilla.css.js +1 -1
  47. package/dist/components/Grid/Grid.vanilla.css.cjs +2 -2
  48. package/dist/components/Grid/Grid.vanilla.css.js +1 -1
  49. package/dist/components/IconButton/IconButton.vanilla.css.cjs +2 -2
  50. package/dist/components/IconButton/IconButton.vanilla.css.js +1 -1
  51. package/dist/components/Input/Input.vanilla.css.cjs +4 -4
  52. package/dist/components/Input/Input.vanilla.css.js +1 -1
  53. package/dist/components/Label/Label.vanilla.css.cjs +2 -2
  54. package/dist/components/Label/Label.vanilla.css.js +1 -1
  55. package/dist/components/List/List.cjs +36 -7
  56. package/dist/components/List/List.cjs.map +1 -1
  57. package/dist/components/List/List.js +36 -7
  58. package/dist/components/List/List.js.map +1 -1
  59. package/dist/components/Paragraph/Paragraph.vanilla.css.cjs +2 -2
  60. package/dist/components/Paragraph/Paragraph.vanilla.css.js +1 -1
  61. package/dist/components/Skeleton/Skeleton.vanilla.css.cjs +2 -2
  62. package/dist/components/Skeleton/Skeleton.vanilla.css.js +1 -1
  63. package/dist/components/Textarea/Textarea.vanilla.css.cjs +3 -3
  64. package/dist/components/Textarea/Textarea.vanilla.css.js +1 -1
  65. package/dist/components/colorSchemeContext.cjs +45 -0
  66. package/dist/components/colorSchemeContext.cjs.map +1 -0
  67. package/dist/components/colorSchemeContext.js +45 -0
  68. package/dist/components/colorSchemeContext.js.map +1 -0
  69. package/dist/faency.css +1940 -1886
  70. package/dist/index.cjs +6 -0
  71. package/dist/index.cjs.map +1 -1
  72. package/dist/index.d.ts +486 -0
  73. package/dist/index.js +6 -0
  74. package/dist/index.js.map +1 -1
  75. package/dist/stitches.config.cjs +4 -0
  76. package/dist/stitches.config.cjs.map +1 -1
  77. package/dist/stitches.config.js +19 -15
  78. package/dist/stitches.config.js.map +1 -1
  79. package/dist/styles/themes.css.cjs +1 -0
  80. package/dist/styles/themes.css.cjs.map +1 -1
  81. package/dist/styles/themes.css.js +1 -0
  82. package/dist/styles/themes.css.js.map +1 -1
  83. package/package.json +4 -1
  84. package/dist/node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.cjs +0 -109
  85. package/dist/node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.cjs.map +0 -1
  86. package/dist/node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js +0 -109
  87. package/dist/node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js.map +0 -1
@@ -25,7 +25,9 @@ const StyledListItemButton = styled("button", Flex, {
25
25
  outline: "none",
26
26
  // CUSTOM
27
27
  flexGrow: 1,
28
+ width: "100%",
28
29
  p: "$2",
30
+ position: "relative",
29
31
  "&::before": {
30
32
  borderRadius: "inherit",
31
33
  boxSizing: "border-box",
@@ -83,17 +85,24 @@ const StyledUl = styled("ul", {
83
85
  m: "0 0 0 8px",
84
86
  p: 0,
85
87
  color: "$textDefault",
86
- '&:has(li > span > input[type="checkbox"])': {
88
+ '&:has(> li > span > input[type="checkbox"])': {
87
89
  m: 0,
88
90
  listStyle: "none",
89
- li: {
91
+ "> li": {
90
92
  marginLeft: 0,
91
- span: {
93
+ "> span": {
92
94
  input: {
93
95
  margin: "0 3px 0 0"
94
96
  }
95
97
  }
96
98
  }
99
+ },
100
+ // Restore left-margin indentation when a nested checkbox list is inside a li
101
+ 'li > &:has(> li > span > input[type="checkbox"])': {
102
+ marginLeft: "$2",
103
+ "> li": {
104
+ marginLeft: "$2"
105
+ }
97
106
  }
98
107
  });
99
108
  const StyledOl = styled("ol", {
@@ -110,13 +119,25 @@ const ListContext = createContext({
110
119
  });
111
120
  const Ul = React.forwardRef(
112
121
  ({ interactive, ...props }, forwardedRef) => {
113
- const contextValue = useMemo(() => ({ interactive: !!interactive }), [interactive]);
122
+ const parentContext = useContext(ListContext);
123
+ const contextValue = useMemo(
124
+ () => ({
125
+ interactive: interactive !== void 0 ? !!interactive : parentContext.interactive
126
+ }),
127
+ [interactive, parentContext.interactive]
128
+ );
114
129
  return /* @__PURE__ */ jsx(ListContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(StyledUl, { role: "list", ref: forwardedRef, ...props }) });
115
130
  }
116
131
  );
117
132
  const Ol = React.forwardRef(
118
133
  ({ interactive, ...props }, forwardedRef) => {
119
- const contextValue = useMemo(() => ({ interactive: !!interactive }), [interactive]);
134
+ const parentContext = useContext(ListContext);
135
+ const contextValue = useMemo(
136
+ () => ({
137
+ interactive: interactive !== void 0 ? !!interactive : parentContext.interactive
138
+ }),
139
+ [interactive, parentContext.interactive]
140
+ );
120
141
  return /* @__PURE__ */ jsx(ListContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(StyledOl, { role: "list", ref: forwardedRef, ...props }) });
121
142
  }
122
143
  );
@@ -134,6 +155,13 @@ const ControlsWrapper = styled("div", {
134
155
  const Li = React.forwardRef(
135
156
  ({ children, controls, align, justify, direction, gap, wrap, ...props }, forwardedRef) => {
136
157
  const { interactive } = useContext(ListContext);
158
+ const childArray = React.Children.toArray(children);
159
+ const nestedLists = childArray.filter(
160
+ (child) => React.isValidElement(child) && (child.type === Ul || child.type === Ol)
161
+ );
162
+ const inlineChildren = childArray.filter(
163
+ (child) => !(React.isValidElement(child) && (child.type === Ul || child.type === Ol))
164
+ );
137
165
  return /* @__PURE__ */ jsxs(StyledLi, { ...props, ref: forwardedRef, children: [
138
166
  interactive ? /* @__PURE__ */ jsx(
139
167
  StyledListItemButton,
@@ -143,7 +171,7 @@ const Li = React.forwardRef(
143
171
  direction,
144
172
  gap,
145
173
  wrap,
146
- children
174
+ children: inlineChildren
147
175
  }
148
176
  ) : /* @__PURE__ */ jsx(
149
177
  StyledSpan,
@@ -154,9 +182,10 @@ const Li = React.forwardRef(
154
182
  gap,
155
183
  wrap,
156
184
  css: { flexGrow: 1 },
157
- children
185
+ children: inlineChildren
158
186
  }
159
187
  ),
188
+ nestedLists,
160
189
  !!controls && /* @__PURE__ */ jsx(ControlsWrapper, { children: controls })
161
190
  ] });
162
191
  }
@@ -1 +1 @@
1
- {"version":3,"file":"List.js","sources":["../../../components/List/List.tsx"],"sourcesContent":["import React, { ComponentProps, createContext, ReactNode, useContext, useMemo } from 'react';\n\nimport { styled, VariantProps } from '../../stitches.config';\nimport { BUTTON_BASE_STYLES } from '../Button';\nimport { elevationVariants } from '../Elevation';\nimport { Flex } from '../Flex';\n\nconst LIST_ITEM_CONTENT_STYLES = {\n bc: 'transparent',\n c: 'inherit',\n borderRadius: 'inherit',\n fontFamily: '$rubik',\n fontSize: '$3',\n fontVariantNumeric: 'tabular-nums',\n};\n\nconst StyledSpan = styled('span', Flex, {\n // APPLY BUTTON STYLES\n ...LIST_ITEM_CONTENT_STYLES,\n // CUSTOM\n p: '$1',\n gap: '$1',\n});\n\nconst StyledListItemButton = styled('button', Flex, {\n ...BUTTON_BASE_STYLES,\n ...LIST_ITEM_CONTENT_STYLES,\n outline: 'none',\n\n // CUSTOM\n flexGrow: 1,\n p: '$2',\n '&::before': {\n borderRadius: 'inherit',\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n },\n '&::after': {\n borderRadius: 'inherit',\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n },\n '&:focus, &:focus-visible': {\n boxShadow: 'inset 0 0 0 2px $colors$listItemFocusBorder',\n },\n\n '@hover': {\n '&:hover': {\n cursor: 'pointer',\n '&::before': {\n backgroundColor: '$listItemHoverBg',\n },\n '&::after': {\n backgroundColor: '$primary',\n opacity: 0.05,\n },\n },\n },\n '&:active': {\n '&::before': {\n backgroundColor: '$listItemActiveBg',\n },\n '&::after': {\n backgroundColor: '$primary',\n opacity: 0.05,\n },\n },\n});\n\nconst StyledLi = styled('li', {\n m: '$2',\n outline: 'none',\n position: 'relative',\n '&:focus-within': {\n boxShadow: 'none',\n },\n variants: {\n elevation: elevationVariants,\n },\n defaultVariants: {\n elevation: '0',\n },\n});\n\nconst StyledUl = styled('ul', {\n m: '0 0 0 8px',\n p: 0,\n color: '$textDefault',\n\n '&:has(li > span > input[type=\"checkbox\"])': {\n m: 0,\n listStyle: 'none',\n li: {\n marginLeft: 0,\n span: {\n input: {\n margin: '0 3px 0 0',\n },\n },\n },\n },\n});\n\nconst StyledOl = styled('ol', {\n m: '0 0 0 8px',\n p: 0,\n color: '$textDefault',\n\n '> li::marker': {\n fontSize: '$3',\n fontFamily: '$rubik',\n },\n});\n\nconst ListContext = createContext({\n interactive: false,\n});\n\nexport interface ListProps extends ComponentProps<typeof StyledUl>, VariantProps<typeof StyledUl> {\n interactive?: boolean;\n}\nexport const Ul = React.forwardRef<React.ElementRef<typeof StyledUl>, ListProps>(\n ({ interactive, ...props }, forwardedRef) => {\n const contextValue = useMemo(() => ({ interactive: !!interactive }), [interactive]);\n\n return (\n <ListContext.Provider value={contextValue}>\n <StyledUl role=\"list\" ref={forwardedRef} {...props} />\n </ListContext.Provider>\n );\n },\n);\n\nexport interface OrderedListProps\n extends ComponentProps<typeof StyledOl>,\n VariantProps<typeof StyledOl> {\n interactive?: boolean;\n}\n\nexport const Ol = React.forwardRef<React.ElementRef<typeof StyledOl>, OrderedListProps>(\n ({ interactive, ...props }, forwardedRef) => {\n const contextValue = useMemo(() => ({ interactive: !!interactive }), [interactive]);\n\n return (\n <ListContext.Provider value={contextValue}>\n <StyledOl role=\"list\" ref={forwardedRef} {...props} />\n </ListContext.Provider>\n );\n },\n);\n\nconst ControlsWrapper = styled('div', {\n position: 'absolute',\n top: 0,\n right: '$2',\n zIndex: 1,\n height: '100%',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n overflow: 'visible',\n});\n\nexport interface ListItemProps\n extends ComponentProps<typeof StyledLi>,\n VariantProps<typeof StyledLi>,\n VariantProps<typeof Flex> {\n controls?: ReactNode;\n}\nexport const Li = React.forwardRef<React.ElementRef<typeof StyledLi>, ListItemProps>(\n ({ children, controls, align, justify, direction, gap, wrap, ...props }, forwardedRef) => {\n const { interactive } = useContext(ListContext);\n return (\n <StyledLi {...props} ref={forwardedRef}>\n {interactive ? (\n <StyledListItemButton\n align={align}\n justify={justify}\n direction={direction}\n gap={gap}\n wrap={wrap}\n >\n {children}\n </StyledListItemButton>\n ) : (\n <StyledSpan\n align={align || 'center'}\n justify={justify}\n direction={direction}\n gap={gap}\n wrap={wrap}\n css={{ flexGrow: 1 }}\n >\n {children}\n </StyledSpan>\n )}\n {!!controls && <ControlsWrapper>{controls}</ControlsWrapper>}\n </StyledLi>\n );\n },\n);\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"List.js","sources":["../../../components/List/List.tsx"],"sourcesContent":["import React, { ComponentProps, createContext, ReactNode, useContext, useMemo } from 'react';\n\nimport { styled, VariantProps } from '../../stitches.config';\nimport { BUTTON_BASE_STYLES } from '../Button';\nimport { elevationVariants } from '../Elevation';\nimport { Flex } from '../Flex';\n\nconst LIST_ITEM_CONTENT_STYLES = {\n bc: 'transparent',\n c: 'inherit',\n borderRadius: 'inherit',\n fontFamily: '$rubik',\n fontSize: '$3',\n fontVariantNumeric: 'tabular-nums',\n};\n\nconst StyledSpan = styled('span', Flex, {\n // APPLY BUTTON STYLES\n ...LIST_ITEM_CONTENT_STYLES,\n // CUSTOM\n p: '$1',\n gap: '$1',\n});\n\nconst StyledListItemButton = styled('button', Flex, {\n ...BUTTON_BASE_STYLES,\n ...LIST_ITEM_CONTENT_STYLES,\n outline: 'none',\n\n // CUSTOM\n flexGrow: 1,\n width: '100%',\n p: '$2',\n position: 'relative',\n '&::before': {\n borderRadius: 'inherit',\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n },\n '&::after': {\n borderRadius: 'inherit',\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n },\n '&:focus, &:focus-visible': {\n boxShadow: 'inset 0 0 0 2px $colors$listItemFocusBorder',\n },\n\n '@hover': {\n '&:hover': {\n cursor: 'pointer',\n '&::before': {\n backgroundColor: '$listItemHoverBg',\n },\n '&::after': {\n backgroundColor: '$primary',\n opacity: 0.05,\n },\n },\n },\n '&:active': {\n '&::before': {\n backgroundColor: '$listItemActiveBg',\n },\n '&::after': {\n backgroundColor: '$primary',\n opacity: 0.05,\n },\n },\n});\n\nconst StyledLi = styled('li', {\n m: '$2',\n outline: 'none',\n position: 'relative',\n '&:focus-within': {\n boxShadow: 'none',\n },\n variants: {\n elevation: elevationVariants,\n },\n defaultVariants: {\n elevation: '0',\n },\n});\n\nconst StyledUl = styled('ul', {\n m: '0 0 0 8px',\n p: 0,\n color: '$textDefault',\n\n '&:has(> li > span > input[type=\"checkbox\"])': {\n m: 0,\n listStyle: 'none',\n '> li': {\n marginLeft: 0,\n '> span': {\n input: {\n margin: '0 3px 0 0',\n },\n },\n },\n },\n // Restore left-margin indentation when a nested checkbox list is inside a li\n 'li > &:has(> li > span > input[type=\"checkbox\"])': {\n marginLeft: '$2',\n '> li': {\n marginLeft: '$2',\n },\n },\n});\n\nconst StyledOl = styled('ol', {\n m: '0 0 0 8px',\n p: 0,\n color: '$textDefault',\n\n '> li::marker': {\n fontSize: '$3',\n fontFamily: '$rubik',\n },\n});\n\nconst ListContext = createContext({\n interactive: false,\n});\n\nexport interface ListProps extends ComponentProps<typeof StyledUl>, VariantProps<typeof StyledUl> {\n interactive?: boolean;\n}\nexport const Ul = React.forwardRef<React.ElementRef<typeof StyledUl>, ListProps>(\n ({ interactive, ...props }, forwardedRef) => {\n const parentContext = useContext(ListContext);\n const contextValue = useMemo(\n () => ({\n interactive: interactive !== undefined ? !!interactive : parentContext.interactive,\n }),\n [interactive, parentContext.interactive],\n );\n\n return (\n <ListContext.Provider value={contextValue}>\n <StyledUl role=\"list\" ref={forwardedRef} {...props} />\n </ListContext.Provider>\n );\n },\n);\n\nexport interface OrderedListProps\n extends ComponentProps<typeof StyledOl>,\n VariantProps<typeof StyledOl> {\n interactive?: boolean;\n}\n\nexport const Ol = React.forwardRef<React.ElementRef<typeof StyledOl>, OrderedListProps>(\n ({ interactive, ...props }, forwardedRef) => {\n const parentContext = useContext(ListContext);\n const contextValue = useMemo(\n () => ({\n interactive: interactive !== undefined ? !!interactive : parentContext.interactive,\n }),\n [interactive, parentContext.interactive],\n );\n\n return (\n <ListContext.Provider value={contextValue}>\n <StyledOl role=\"list\" ref={forwardedRef} {...props} />\n </ListContext.Provider>\n );\n },\n);\n\nconst ControlsWrapper = styled('div', {\n position: 'absolute',\n top: 0,\n right: '$2',\n zIndex: 1,\n height: '100%',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n overflow: 'visible',\n});\n\nexport interface ListItemProps\n extends ComponentProps<typeof StyledLi>,\n VariantProps<typeof StyledLi>,\n VariantProps<typeof Flex> {\n controls?: ReactNode;\n}\nexport const Li = React.forwardRef<React.ElementRef<typeof StyledLi>, ListItemProps>(\n ({ children, controls, align, justify, direction, gap, wrap, ...props }, forwardedRef) => {\n const { interactive } = useContext(ListContext);\n\n const childArray = React.Children.toArray(children);\n const nestedLists = childArray.filter(\n (child) => React.isValidElement(child) && (child.type === Ul || child.type === Ol),\n );\n const inlineChildren = childArray.filter(\n (child) => !(React.isValidElement(child) && (child.type === Ul || child.type === Ol)),\n );\n\n return (\n <StyledLi {...props} ref={forwardedRef}>\n {interactive ? (\n <StyledListItemButton\n align={align}\n justify={justify}\n direction={direction}\n gap={gap}\n wrap={wrap}\n >\n {inlineChildren}\n </StyledListItemButton>\n ) : (\n <StyledSpan\n align={align || 'center'}\n justify={justify}\n direction={direction}\n gap={gap}\n wrap={wrap}\n css={{ flexGrow: 1 }}\n >\n {inlineChildren}\n </StyledSpan>\n )}\n {nestedLists}\n {!!controls && <ControlsWrapper>{controls}</ControlsWrapper>}\n </StyledLi>\n );\n },\n);\n"],"names":[],"mappings":";;;;;;AAOA,MAAM,2BAA2B;AAAA,EAC/B,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,oBAAoB;AACtB;AAEA,MAAM,aAAa,OAAO,QAAQ,MAAM;AAAA;AAAA,EAEtC,GAAG;AAAA;AAAA,EAEH,GAAG;AAAA,EACH,KAAK;AACP,CAAC;AAED,MAAM,uBAAuB,OAAO,UAAU,MAAM;AAAA,EAClD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS;AAAA;AAAA,EAGT,UAAU;AAAA,EACV,OAAO;AAAA,EACP,GAAG;AAAA,EACH,UAAU;AAAA,EACV,aAAa;AAAA,IACX,cAAc;AAAA,IACd,WAAW;AAAA,IACX,SAAS;AAAA,IACT,UAAU;AAAA,IACV,OAAO;AAAA,EAAA;AAAA,EAET,YAAY;AAAA,IACV,cAAc;AAAA,IACd,WAAW;AAAA,IACX,SAAS;AAAA,IACT,UAAU;AAAA,IACV,OAAO;AAAA,EAAA;AAAA,EAET,4BAA4B;AAAA,IAC1B,WAAW;AAAA,EAAA;AAAA,EAGb,UAAU;AAAA,IACR,WAAW;AAAA,MACT,QAAQ;AAAA,MACR,aAAa;AAAA,QACX,iBAAiB;AAAA,MAAA;AAAA,MAEnB,YAAY;AAAA,QACV,iBAAiB;AAAA,QACjB,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EACF;AAAA,EAEF,YAAY;AAAA,IACV,aAAa;AAAA,MACX,iBAAiB;AAAA,IAAA;AAAA,IAEnB,YAAY;AAAA,MACV,iBAAiB;AAAA,MACjB,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ,CAAC;AAED,MAAM,WAAW,OAAO,MAAM;AAAA,EAC5B,GAAG;AAAA,EACH,SAAS;AAAA,EACT,UAAU;AAAA,EACV,kBAAkB;AAAA,IAChB,WAAW;AAAA,EAAA;AAAA,EAEb,UAAU;AAAA,IACR,WAAW;AAAA,EAAA;AAAA,EAEb,iBAAiB;AAAA,IACf,WAAW;AAAA,EAAA;AAEf,CAAC;AAED,MAAM,WAAW,OAAO,MAAM;AAAA,EAC5B,GAAG;AAAA,EACH,GAAG;AAAA,EACH,OAAO;AAAA,EAEP,+CAA+C;AAAA,IAC7C,GAAG;AAAA,IACH,WAAW;AAAA,IACX,QAAQ;AAAA,MACN,YAAY;AAAA,MACZ,UAAU;AAAA,QACR,OAAO;AAAA,UACL,QAAQ;AAAA,QAAA;AAAA,MACV;AAAA,IACF;AAAA,EACF;AAAA;AAAA,EAGF,oDAAoD;AAAA,IAClD,YAAY;AAAA,IACZ,QAAQ;AAAA,MACN,YAAY;AAAA,IAAA;AAAA,EACd;AAEJ,CAAC;AAED,MAAM,WAAW,OAAO,MAAM;AAAA,EAC5B,GAAG;AAAA,EACH,GAAG;AAAA,EACH,OAAO;AAAA,EAEP,gBAAgB;AAAA,IACd,UAAU;AAAA,IACV,YAAY;AAAA,EAAA;AAEhB,CAAC;AAED,MAAM,cAAc,cAAc;AAAA,EAChC,aAAa;AACf,CAAC;AAKM,MAAM,KAAK,MAAM;AAAA,EACtB,CAAC,EAAE,aAAa,GAAG,MAAA,GAAS,iBAAiB;AAC3C,UAAM,gBAAgB,WAAW,WAAW;AAC5C,UAAM,eAAe;AAAA,MACnB,OAAO;AAAA,QACL,aAAa,gBAAgB,SAAY,CAAC,CAAC,cAAc,cAAc;AAAA,MAAA;AAAA,MAEzE,CAAC,aAAa,cAAc,WAAW;AAAA,IAAA;AAGzC,WACE,oBAAC,YAAY,UAAZ,EAAqB,OAAO,cAC3B,UAAA,oBAAC,UAAA,EAAS,MAAK,QAAO,KAAK,cAAe,GAAG,OAAO,GACtD;AAAA,EAEJ;AACF;AAQO,MAAM,KAAK,MAAM;AAAA,EACtB,CAAC,EAAE,aAAa,GAAG,MAAA,GAAS,iBAAiB;AAC3C,UAAM,gBAAgB,WAAW,WAAW;AAC5C,UAAM,eAAe;AAAA,MACnB,OAAO;AAAA,QACL,aAAa,gBAAgB,SAAY,CAAC,CAAC,cAAc,cAAc;AAAA,MAAA;AAAA,MAEzE,CAAC,aAAa,cAAc,WAAW;AAAA,IAAA;AAGzC,WACE,oBAAC,YAAY,UAAZ,EAAqB,OAAO,cAC3B,UAAA,oBAAC,UAAA,EAAS,MAAK,QAAO,KAAK,cAAe,GAAG,OAAO,GACtD;AAAA,EAEJ;AACF;AAEA,MAAM,kBAAkB,OAAO,OAAO;AAAA,EACpC,UAAU;AAAA,EACV,KAAK;AAAA,EACL,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,UAAU;AACZ,CAAC;AAQM,MAAM,KAAK,MAAM;AAAA,EACtB,CAAC,EAAE,UAAU,UAAU,OAAO,SAAS,WAAW,KAAK,MAAM,GAAG,MAAA,GAAS,iBAAiB;AACxF,UAAM,EAAE,YAAA,IAAgB,WAAW,WAAW;AAE9C,UAAM,aAAa,MAAM,SAAS,QAAQ,QAAQ;AAClD,UAAM,cAAc,WAAW;AAAA,MAC7B,CAAC,UAAU,MAAM,eAAe,KAAK,MAAM,MAAM,SAAS,MAAM,MAAM,SAAS;AAAA,IAAA;AAEjF,UAAM,iBAAiB,WAAW;AAAA,MAChC,CAAC,UAAU,EAAE,MAAM,eAAe,KAAK,MAAM,MAAM,SAAS,MAAM,MAAM,SAAS;AAAA,IAAA;AAGnF,WACE,qBAAC,UAAA,EAAU,GAAG,OAAO,KAAK,cACvB,UAAA;AAAA,MAAA,cACC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UAEC,UAAA;AAAA,QAAA;AAAA,MAAA,IAGH;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAO,SAAS;AAAA,UAChB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,KAAK,EAAE,UAAU,EAAA;AAAA,UAEhB,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAGJ;AAAA,MACA,CAAC,CAAC,YAAY,oBAAC,mBAAiB,UAAA,SAAA,CAAS;AAAA,IAAA,GAC5C;AAAA,EAEJ;AACF;"}
@@ -1,7 +1,7 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
3
  ;/* empty css */
4
- const createRuntimeFn62c9670f_esm = require("../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.cjs");
5
- var paragraphRecipe = createRuntimeFn62c9670f_esm.c({ defaultClassName: "ssoibc1 ssoibc0", variantClassNames: { size: { "1": "ssoibc2", "2": "ssoibc3" } }, defaultVariants: { size: "1" }, compoundVariants: [] });
4
+ const createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
5
+ var paragraphRecipe = createRuntimeFn.createRuntimeFn({ defaultClassName: "ssoibc1 ssoibc0", variantClassNames: { size: { "1": "ssoibc2", "2": "ssoibc3" } }, defaultVariants: { size: "1" }, compoundVariants: [] });
6
6
  exports.paragraphRecipe = paragraphRecipe;
7
7
  //# sourceMappingURL=Paragraph.vanilla.css.cjs.map
@@ -1,5 +1,5 @@
1
1
  /* empty css */
2
- import { c as createRuntimeFn } from "../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js";
2
+ import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
3
3
  var paragraphRecipe = createRuntimeFn({ defaultClassName: "ssoibc1 ssoibc0", variantClassNames: { size: { "1": "ssoibc2", "2": "ssoibc3" } }, defaultVariants: { size: "1" }, compoundVariants: [] });
4
4
  export {
5
5
  paragraphRecipe
@@ -1,7 +1,7 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
3
  ;/* empty css */
4
- const createRuntimeFn62c9670f_esm = require("../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.cjs");
5
- var skeletonRecipe = createRuntimeFn62c9670f_esm.c({ defaultClassName: "_12qsecm2 _12qsecm1", variantClassNames: { variant: { square: "_12qsecm3", circle: "_12qsecm4", badge: "_12qsecm5", button: "_12qsecm6", text: "_12qsecm7" } }, defaultVariants: { variant: "text" }, compoundVariants: [] });
4
+ const createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
5
+ var skeletonRecipe = createRuntimeFn.createRuntimeFn({ defaultClassName: "_12qsecm2 _12qsecm1", variantClassNames: { variant: { square: "_12qsecm3", circle: "_12qsecm4", badge: "_12qsecm5", button: "_12qsecm6", text: "_12qsecm7" } }, defaultVariants: { variant: "text" }, compoundVariants: [] });
6
6
  exports.skeletonRecipe = skeletonRecipe;
7
7
  //# sourceMappingURL=Skeleton.vanilla.css.cjs.map
@@ -1,5 +1,5 @@
1
1
  /* empty css */
2
- import { c as createRuntimeFn } from "../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js";
2
+ import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
3
3
  var skeletonRecipe = createRuntimeFn({ defaultClassName: "_12qsecm2 _12qsecm1", variantClassNames: { variant: { square: "_12qsecm3", circle: "_12qsecm4", badge: "_12qsecm5", button: "_12qsecm6", text: "_12qsecm7" } }, defaultVariants: { variant: "text" }, compoundVariants: [] });
4
4
  export {
5
5
  skeletonRecipe
@@ -1,9 +1,9 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
3
  ;/* empty css */
4
- const createRuntimeFn62c9670f_esm = require("../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.cjs");
5
- var styledTextareaRecipe = createRuntimeFn62c9670f_esm.c({ defaultClassName: "q2igaw1 q2igaw0", variantClassNames: { variant: { ghost: "q2igaw2" }, state: { invalid: "q2igaw3" }, cursor: { "default": "q2igaw4", text: "q2igaw5" }, resize: { none: "q2igaw6", both: "q2igaw7", vertical: "q2igaw8", horizontal: "q2igaw9" }, endAdornment: { true: "q2igawa" } }, defaultVariants: { cursor: "default", resize: "both" }, compoundVariants: [[{ variant: "ghost", state: "invalid" }, "q2igawb"]] });
6
- var textareaWrapperRecipe = createRuntimeFn62c9670f_esm.c({ defaultClassName: "q2igawd q2igawc", variantClassNames: { disabled: { true: "q2igawe" }, state: { invalid: "q2igawf" } }, defaultVariants: { disabled: false }, compoundVariants: [] });
4
+ const createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
5
+ var styledTextareaRecipe = createRuntimeFn.createRuntimeFn({ defaultClassName: "q2igaw1 q2igaw0", variantClassNames: { variant: { ghost: "q2igaw2" }, state: { invalid: "q2igaw3" }, cursor: { "default": "q2igaw4", text: "q2igaw5" }, resize: { none: "q2igaw6", both: "q2igaw7", vertical: "q2igaw8", horizontal: "q2igaw9" }, endAdornment: { true: "q2igawa" } }, defaultVariants: { cursor: "default", resize: "both" }, compoundVariants: [[{ variant: "ghost", state: "invalid" }, "q2igawb"]] });
6
+ var textareaWrapperRecipe = createRuntimeFn.createRuntimeFn({ defaultClassName: "q2igawd q2igawc", variantClassNames: { disabled: { true: "q2igawe" }, state: { invalid: "q2igawf" } }, defaultVariants: { disabled: false }, compoundVariants: [] });
7
7
  var adornmentWrapperEnd = "q2igawg";
8
8
  exports.adornmentWrapperEnd = adornmentWrapperEnd;
9
9
  exports.styledTextareaRecipe = styledTextareaRecipe;
@@ -1,5 +1,5 @@
1
1
  /* empty css */
2
- import { c as createRuntimeFn } from "../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js";
2
+ import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
3
3
  var styledTextareaRecipe = createRuntimeFn({ defaultClassName: "q2igaw1 q2igaw0", variantClassNames: { variant: { ghost: "q2igaw2" }, state: { invalid: "q2igaw3" }, cursor: { "default": "q2igaw4", text: "q2igaw5" }, resize: { none: "q2igaw6", both: "q2igaw7", vertical: "q2igaw8", horizontal: "q2igaw9" }, endAdornment: { true: "q2igawa" } }, defaultVariants: { cursor: "default", resize: "both" }, compoundVariants: [[{ variant: "ghost", state: "invalid" }, "q2igawb"]] });
4
4
  var textareaWrapperRecipe = createRuntimeFn({ defaultClassName: "q2igawd q2igawc", variantClassNames: { disabled: { true: "q2igawe" }, state: { invalid: "q2igawf" } }, defaultVariants: { disabled: false }, compoundVariants: [] });
5
5
  var adornmentWrapperEnd = "q2igawg";
@@ -0,0 +1,45 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ const jsxRuntime = require("react/jsx-runtime");
4
+ const React = require("react");
5
+ function readDocumentTheme() {
6
+ const el = document.documentElement;
7
+ if (el.classList.contains("dark")) return "dark";
8
+ if (el.classList.contains("light")) return "light";
9
+ const attr = el.dataset.theme;
10
+ if (attr === "dark" || attr === "light") return attr;
11
+ return null;
12
+ }
13
+ const ColorSchemeContext = React.createContext("light");
14
+ function ColorSchemeProvider({ children }) {
15
+ const [scheme, setScheme] = React.useState(() => {
16
+ if (typeof window === "undefined") return "light";
17
+ return readDocumentTheme() ?? (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
18
+ });
19
+ React.useEffect(() => {
20
+ const observer = new MutationObserver(() => {
21
+ const docTheme = readDocumentTheme();
22
+ if (docTheme) setScheme(docTheme);
23
+ });
24
+ observer.observe(document.documentElement, {
25
+ attributes: true,
26
+ attributeFilter: ["class", "data-theme"]
27
+ });
28
+ const mq = window.matchMedia("(prefers-color-scheme: dark)");
29
+ const mqHandler = (e) => {
30
+ if (!readDocumentTheme()) setScheme(e.matches ? "dark" : "light");
31
+ };
32
+ mq.addEventListener("change", mqHandler);
33
+ return () => {
34
+ observer.disconnect();
35
+ mq.removeEventListener("change", mqHandler);
36
+ };
37
+ }, []);
38
+ return /* @__PURE__ */ jsxRuntime.jsx(ColorSchemeContext.Provider, { value: scheme, children });
39
+ }
40
+ function useColorScheme() {
41
+ return React.useContext(ColorSchemeContext);
42
+ }
43
+ exports.ColorSchemeProvider = ColorSchemeProvider;
44
+ exports.useColorScheme = useColorScheme;
45
+ //# sourceMappingURL=colorSchemeContext.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"colorSchemeContext.cjs","sources":["../../components/colorSchemeContext.tsx"],"sourcesContent":["import React, { createContext, useContext, useEffect, useState } from 'react';\n\nexport type ColorScheme = 'light' | 'dark';\n\nfunction readDocumentTheme(): ColorScheme | null {\n const el = document.documentElement;\n if (el.classList.contains('dark')) return 'dark';\n if (el.classList.contains('light')) return 'light';\n const attr = el.dataset.theme;\n if (attr === 'dark' || attr === 'light') return attr;\n return null;\n}\n\nconst ColorSchemeContext = createContext<ColorScheme>('light');\n\nexport function ColorSchemeProvider({ children }: { children: React.ReactNode }) {\n const [scheme, setScheme] = useState<ColorScheme>(() => {\n if (typeof window === 'undefined') return 'light';\n return (\n readDocumentTheme() ??\n (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')\n );\n });\n\n useEffect(() => {\n const observer = new MutationObserver(() => {\n const docTheme = readDocumentTheme();\n if (docTheme) setScheme(docTheme);\n });\n observer.observe(document.documentElement, {\n attributes: true,\n attributeFilter: ['class', 'data-theme'],\n });\n\n const mq = window.matchMedia('(prefers-color-scheme: dark)');\n const mqHandler = (e: MediaQueryListEvent) => {\n if (!readDocumentTheme()) setScheme(e.matches ? 'dark' : 'light');\n };\n mq.addEventListener('change', mqHandler);\n\n return () => {\n observer.disconnect();\n mq.removeEventListener('change', mqHandler);\n };\n }, []);\n\n return <ColorSchemeContext.Provider value={scheme}>{children}</ColorSchemeContext.Provider>;\n}\n\nexport function useColorScheme(): ColorScheme {\n return useContext(ColorSchemeContext);\n}\n"],"names":["createContext","useState","useEffect","useContext"],"mappings":";;;;AAIA,SAAS,oBAAwC;AAC/C,QAAM,KAAK,SAAS;AACpB,MAAI,GAAG,UAAU,SAAS,MAAM,EAAG,QAAO;AAC1C,MAAI,GAAG,UAAU,SAAS,OAAO,EAAG,QAAO;AAC3C,QAAM,OAAO,GAAG,QAAQ;AACxB,MAAI,SAAS,UAAU,SAAS,QAAS,QAAO;AAChD,SAAO;AACT;AAEA,MAAM,qBAAqBA,MAAAA,cAA2B,OAAO;AAEtD,SAAS,oBAAoB,EAAE,YAA2C;AAC/E,QAAM,CAAC,QAAQ,SAAS,IAAIC,MAAAA,SAAsB,MAAM;AACtD,QAAI,OAAO,WAAW,YAAa,QAAO;AAC1C,WACE,wBACC,OAAO,WAAW,8BAA8B,EAAE,UAAU,SAAS;AAAA,EAE1E,CAAC;AAEDC,QAAAA,UAAU,MAAM;AACd,UAAM,WAAW,IAAI,iBAAiB,MAAM;AAC1C,YAAM,WAAW,kBAAA;AACjB,UAAI,oBAAoB,QAAQ;AAAA,IAClC,CAAC;AACD,aAAS,QAAQ,SAAS,iBAAiB;AAAA,MACzC,YAAY;AAAA,MACZ,iBAAiB,CAAC,SAAS,YAAY;AAAA,IAAA,CACxC;AAED,UAAM,KAAK,OAAO,WAAW,8BAA8B;AAC3D,UAAM,YAAY,CAAC,MAA2B;AAC5C,UAAI,CAAC,kBAAA,aAA+B,EAAE,UAAU,SAAS,OAAO;AAAA,IAClE;AACA,OAAG,iBAAiB,UAAU,SAAS;AAEvC,WAAO,MAAM;AACX,eAAS,WAAA;AACT,SAAG,oBAAoB,UAAU,SAAS;AAAA,IAC5C;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,wCAAQ,mBAAmB,UAAnB,EAA4B,OAAO,QAAS,UAAS;AAC/D;AAEO,SAAS,iBAA8B;AAC5C,SAAOC,MAAAA,WAAW,kBAAkB;AACtC;;;"}
@@ -0,0 +1,45 @@
1
+ import { jsx } from "react/jsx-runtime";
2
+ import { useContext, createContext, useState, useEffect } from "react";
3
+ function readDocumentTheme() {
4
+ const el = document.documentElement;
5
+ if (el.classList.contains("dark")) return "dark";
6
+ if (el.classList.contains("light")) return "light";
7
+ const attr = el.dataset.theme;
8
+ if (attr === "dark" || attr === "light") return attr;
9
+ return null;
10
+ }
11
+ const ColorSchemeContext = createContext("light");
12
+ function ColorSchemeProvider({ children }) {
13
+ const [scheme, setScheme] = useState(() => {
14
+ if (typeof window === "undefined") return "light";
15
+ return readDocumentTheme() ?? (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
16
+ });
17
+ useEffect(() => {
18
+ const observer = new MutationObserver(() => {
19
+ const docTheme = readDocumentTheme();
20
+ if (docTheme) setScheme(docTheme);
21
+ });
22
+ observer.observe(document.documentElement, {
23
+ attributes: true,
24
+ attributeFilter: ["class", "data-theme"]
25
+ });
26
+ const mq = window.matchMedia("(prefers-color-scheme: dark)");
27
+ const mqHandler = (e) => {
28
+ if (!readDocumentTheme()) setScheme(e.matches ? "dark" : "light");
29
+ };
30
+ mq.addEventListener("change", mqHandler);
31
+ return () => {
32
+ observer.disconnect();
33
+ mq.removeEventListener("change", mqHandler);
34
+ };
35
+ }, []);
36
+ return /* @__PURE__ */ jsx(ColorSchemeContext.Provider, { value: scheme, children });
37
+ }
38
+ function useColorScheme() {
39
+ return useContext(ColorSchemeContext);
40
+ }
41
+ export {
42
+ ColorSchemeProvider,
43
+ useColorScheme
44
+ };
45
+ //# sourceMappingURL=colorSchemeContext.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"colorSchemeContext.js","sources":["../../components/colorSchemeContext.tsx"],"sourcesContent":["import React, { createContext, useContext, useEffect, useState } from 'react';\n\nexport type ColorScheme = 'light' | 'dark';\n\nfunction readDocumentTheme(): ColorScheme | null {\n const el = document.documentElement;\n if (el.classList.contains('dark')) return 'dark';\n if (el.classList.contains('light')) return 'light';\n const attr = el.dataset.theme;\n if (attr === 'dark' || attr === 'light') return attr;\n return null;\n}\n\nconst ColorSchemeContext = createContext<ColorScheme>('light');\n\nexport function ColorSchemeProvider({ children }: { children: React.ReactNode }) {\n const [scheme, setScheme] = useState<ColorScheme>(() => {\n if (typeof window === 'undefined') return 'light';\n return (\n readDocumentTheme() ??\n (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')\n );\n });\n\n useEffect(() => {\n const observer = new MutationObserver(() => {\n const docTheme = readDocumentTheme();\n if (docTheme) setScheme(docTheme);\n });\n observer.observe(document.documentElement, {\n attributes: true,\n attributeFilter: ['class', 'data-theme'],\n });\n\n const mq = window.matchMedia('(prefers-color-scheme: dark)');\n const mqHandler = (e: MediaQueryListEvent) => {\n if (!readDocumentTheme()) setScheme(e.matches ? 'dark' : 'light');\n };\n mq.addEventListener('change', mqHandler);\n\n return () => {\n observer.disconnect();\n mq.removeEventListener('change', mqHandler);\n };\n }, []);\n\n return <ColorSchemeContext.Provider value={scheme}>{children}</ColorSchemeContext.Provider>;\n}\n\nexport function useColorScheme(): ColorScheme {\n return useContext(ColorSchemeContext);\n}\n"],"names":[],"mappings":";;AAIA,SAAS,oBAAwC;AAC/C,QAAM,KAAK,SAAS;AACpB,MAAI,GAAG,UAAU,SAAS,MAAM,EAAG,QAAO;AAC1C,MAAI,GAAG,UAAU,SAAS,OAAO,EAAG,QAAO;AAC3C,QAAM,OAAO,GAAG,QAAQ;AACxB,MAAI,SAAS,UAAU,SAAS,QAAS,QAAO;AAChD,SAAO;AACT;AAEA,MAAM,qBAAqB,cAA2B,OAAO;AAEtD,SAAS,oBAAoB,EAAE,YAA2C;AAC/E,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAsB,MAAM;AACtD,QAAI,OAAO,WAAW,YAAa,QAAO;AAC1C,WACE,wBACC,OAAO,WAAW,8BAA8B,EAAE,UAAU,SAAS;AAAA,EAE1E,CAAC;AAED,YAAU,MAAM;AACd,UAAM,WAAW,IAAI,iBAAiB,MAAM;AAC1C,YAAM,WAAW,kBAAA;AACjB,UAAI,oBAAoB,QAAQ;AAAA,IAClC,CAAC;AACD,aAAS,QAAQ,SAAS,iBAAiB;AAAA,MACzC,YAAY;AAAA,MACZ,iBAAiB,CAAC,SAAS,YAAY;AAAA,IAAA,CACxC;AAED,UAAM,KAAK,OAAO,WAAW,8BAA8B;AAC3D,UAAM,YAAY,CAAC,MAA2B;AAC5C,UAAI,CAAC,kBAAA,aAA+B,EAAE,UAAU,SAAS,OAAO;AAAA,IAClE;AACA,OAAG,iBAAiB,UAAU,SAAS;AAEvC,WAAO,MAAM;AACX,eAAS,WAAA;AACT,SAAG,oBAAoB,UAAU,SAAS;AAAA,IAC5C;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,6BAAQ,mBAAmB,UAAnB,EAA4B,OAAO,QAAS,UAAS;AAC/D;AAEO,SAAS,iBAA8B;AAC5C,SAAO,WAAW,kBAAkB;AACtC;"}