@ndla/primitives 1.0.129-alpha.0 → 1.0.132-alpha.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 (227) hide show
  1. package/dist/panda.buildinfo.json +25 -1
  2. package/dist/styles.css +100 -4
  3. package/es/Accordion.mjs +1 -1
  4. package/es/Accordion.mjs.map +1 -1
  5. package/es/ArticleLists.mjs +1 -1
  6. package/es/ArticleLists.mjs.map +1 -1
  7. package/es/Badge.mjs +1 -1
  8. package/es/Badge.mjs.map +1 -1
  9. package/es/BlockQuote.mjs +1 -1
  10. package/es/BlockQuote.mjs.map +1 -1
  11. package/es/Button.mjs +1 -1
  12. package/es/Button.mjs.map +1 -1
  13. package/es/Card/Card.mjs +1 -1
  14. package/es/Card/Card.mjs.map +1 -1
  15. package/es/Checkbox.mjs +2 -1
  16. package/es/Checkbox.mjs.map +1 -1
  17. package/es/Combobox.mjs +1 -1
  18. package/es/Combobox.mjs.map +1 -1
  19. package/es/DatePicker.mjs +1 -1
  20. package/es/DatePicker.mjs.map +1 -1
  21. package/es/Dialog.mjs +1 -1
  22. package/es/Dialog.mjs.map +1 -1
  23. package/es/ErrorMessage/ErrorMessage.mjs +1 -1
  24. package/es/ErrorMessage/ErrorMessage.mjs.map +1 -1
  25. package/es/ExpandableBox.mjs +1 -1
  26. package/es/ExpandableBox.mjs.map +1 -1
  27. package/es/Field.mjs +2 -1
  28. package/es/Field.mjs.map +1 -1
  29. package/es/FieldErrorMessage.mjs +2 -1
  30. package/es/FieldErrorMessage.mjs.map +1 -1
  31. package/es/FieldHelper.mjs +2 -1
  32. package/es/FieldHelper.mjs.map +1 -1
  33. package/es/Figure.mjs +1 -1
  34. package/es/Figure.mjs.map +1 -1
  35. package/es/FileUpload.mjs +1 -1
  36. package/es/FileUpload.mjs.map +1 -1
  37. package/es/FramedContent.mjs +1 -1
  38. package/es/FramedContent.mjs.map +1 -1
  39. package/es/Hero.mjs +1 -1
  40. package/es/Hero.mjs.map +1 -1
  41. package/es/Image.mjs +1 -1
  42. package/es/Image.mjs.map +1 -1
  43. package/es/Input.mjs +2 -1
  44. package/es/Input.mjs.map +1 -1
  45. package/es/Label.mjs +3 -1
  46. package/es/Label.mjs.map +1 -1
  47. package/es/Layout/PageContainer.mjs +1 -1
  48. package/es/Layout/PageContainer.mjs.map +1 -1
  49. package/es/Layout/PageContent.mjs +1 -1
  50. package/es/Layout/PageContent.mjs.map +1 -1
  51. package/es/ListItem/ListItem.mjs +1 -1
  52. package/es/ListItem/ListItem.mjs.map +1 -1
  53. package/es/Menu.mjs +1 -1
  54. package/es/Menu.mjs.map +1 -1
  55. package/es/MessageBox.mjs +1 -1
  56. package/es/MessageBox.mjs.map +1 -1
  57. package/es/NdlaLogo.mjs.map +1 -1
  58. package/es/Pagination.mjs +1 -1
  59. package/es/Pagination.mjs.map +1 -1
  60. package/es/Popover.mjs +1 -1
  61. package/es/Popover.mjs.map +1 -1
  62. package/es/RadioGroup.mjs +3 -2
  63. package/es/RadioGroup.mjs.map +1 -1
  64. package/es/RainbowSpinner.mjs +66 -0
  65. package/es/RainbowSpinner.mjs.map +1 -0
  66. package/es/Select.mjs +1 -1
  67. package/es/Select.mjs.map +1 -1
  68. package/es/Skeleton.mjs +1 -1
  69. package/es/Skeleton.mjs.map +1 -1
  70. package/es/Slider.mjs +1 -1
  71. package/es/Slider.mjs.map +1 -1
  72. package/es/Spinner.mjs +1 -1
  73. package/es/Spinner.mjs.map +1 -1
  74. package/es/Switch.mjs +1 -1
  75. package/es/Switch.mjs.map +1 -1
  76. package/es/Table.mjs +1 -1
  77. package/es/Table.mjs.map +1 -1
  78. package/es/Tabs.mjs +1 -1
  79. package/es/Tabs.mjs.map +1 -1
  80. package/es/TagsInput.mjs +1 -1
  81. package/es/TagsInput.mjs.map +1 -1
  82. package/es/Text.mjs +1 -1
  83. package/es/Text.mjs.map +1 -1
  84. package/es/Toast.mjs +1 -1
  85. package/es/Toast.mjs.map +1 -1
  86. package/es/ToggleGroup.mjs +1 -1
  87. package/es/ToggleGroup.mjs.map +1 -1
  88. package/es/Tooltip.mjs +1 -1
  89. package/es/Tooltip.mjs.map +1 -1
  90. package/es/Tree/Tree.mjs +1 -1
  91. package/es/Tree/Tree.mjs.map +1 -1
  92. package/es/index.mjs +3 -2
  93. package/lib/Accordion.d.ts +1 -1
  94. package/lib/Accordion.js +7 -7
  95. package/lib/Accordion.js.map +1 -1
  96. package/lib/ArticleLists.d.ts +1 -1
  97. package/lib/ArticleLists.js +2 -2
  98. package/lib/ArticleLists.js.map +1 -1
  99. package/lib/Badge.d.ts +1 -1
  100. package/lib/Badge.js +2 -2
  101. package/lib/Badge.js.map +1 -1
  102. package/lib/BlockQuote.d.ts +1 -1
  103. package/lib/BlockQuote.js +2 -2
  104. package/lib/BlockQuote.js.map +1 -1
  105. package/lib/Button.d.ts +1 -1
  106. package/lib/Button.js +2 -2
  107. package/lib/Button.js.map +1 -1
  108. package/lib/Card/Card.d.ts +3 -3
  109. package/lib/Card/Card.js +3 -3
  110. package/lib/Card/Card.js.map +1 -1
  111. package/lib/Checkbox.d.ts +2 -1
  112. package/lib/Checkbox.js +9 -8
  113. package/lib/Checkbox.js.map +1 -1
  114. package/lib/Combobox.d.ts +1 -1
  115. package/lib/Combobox.js +16 -16
  116. package/lib/Combobox.js.map +1 -1
  117. package/lib/DatePicker.d.ts +2 -2
  118. package/lib/DatePicker.js +26 -26
  119. package/lib/DatePicker.js.map +1 -1
  120. package/lib/Dialog.d.ts +2 -2
  121. package/lib/Dialog.js +12 -12
  122. package/lib/Dialog.js.map +1 -1
  123. package/lib/ErrorMessage/ErrorMessage.d.ts +4 -4
  124. package/lib/ErrorMessage/ErrorMessage.js +4 -4
  125. package/lib/ErrorMessage/ErrorMessage.js.map +1 -1
  126. package/lib/ExpandableBox.d.ts +1 -1
  127. package/lib/ExpandableBox.js +3 -3
  128. package/lib/ExpandableBox.js.map +1 -1
  129. package/lib/Field.d.ts +2 -1
  130. package/lib/Field.js +4 -3
  131. package/lib/Field.js.map +1 -1
  132. package/lib/FieldErrorMessage.d.ts +2 -1
  133. package/lib/FieldErrorMessage.js +4 -3
  134. package/lib/FieldErrorMessage.js.map +1 -1
  135. package/lib/FieldHelper.d.ts +2 -1
  136. package/lib/FieldHelper.js +4 -3
  137. package/lib/FieldHelper.js.map +1 -1
  138. package/lib/Figure.d.ts +1 -1
  139. package/lib/Figure.js +2 -2
  140. package/lib/Figure.js.map +1 -1
  141. package/lib/FileUpload.d.ts +1 -1
  142. package/lib/FileUpload.js +15 -15
  143. package/lib/FileUpload.js.map +1 -1
  144. package/lib/FramedContent.d.ts +1 -1
  145. package/lib/FramedContent.js +2 -2
  146. package/lib/FramedContent.js.map +1 -1
  147. package/lib/Hero.d.ts +4 -4
  148. package/lib/Hero.js +6 -5
  149. package/lib/Hero.js.map +1 -1
  150. package/lib/Image.js +2 -2
  151. package/lib/Image.js.map +1 -1
  152. package/lib/Input.d.ts +1 -1
  153. package/lib/Input.js +7 -6
  154. package/lib/Input.js.map +1 -1
  155. package/lib/Label.d.ts +2 -1
  156. package/lib/Label.js +7 -5
  157. package/lib/Label.js.map +1 -1
  158. package/lib/Layout/PageContainer.d.ts +1 -1
  159. package/lib/Layout/PageContainer.js +1 -1
  160. package/lib/Layout/PageContainer.js.map +1 -1
  161. package/lib/Layout/PageContent.d.ts +2 -2
  162. package/lib/Layout/PageContent.js +3 -3
  163. package/lib/Layout/PageContent.js.map +1 -1
  164. package/lib/ListItem/ListItem.d.ts +3 -3
  165. package/lib/ListItem/ListItem.js +3 -3
  166. package/lib/ListItem/ListItem.js.map +1 -1
  167. package/lib/Menu.d.ts +1 -1
  168. package/lib/Menu.js +12 -12
  169. package/lib/Menu.js.map +1 -1
  170. package/lib/MessageBox.d.ts +1 -1
  171. package/lib/MessageBox.js +2 -2
  172. package/lib/MessageBox.js.map +1 -1
  173. package/lib/NdlaLogo.js.map +1 -1
  174. package/lib/Pagination.d.ts +1 -1
  175. package/lib/Pagination.js +10 -9
  176. package/lib/Pagination.js.map +1 -1
  177. package/lib/Popover.d.ts +2 -2
  178. package/lib/Popover.js +15 -15
  179. package/lib/Popover.js.map +1 -1
  180. package/lib/RadioGroup.d.ts +1 -1
  181. package/lib/RadioGroup.js +13 -12
  182. package/lib/RadioGroup.js.map +1 -1
  183. package/lib/RainbowSpinner.d.ts +26 -0
  184. package/lib/RainbowSpinner.js +66 -0
  185. package/lib/RainbowSpinner.js.map +1 -0
  186. package/lib/Select.d.ts +1 -1
  187. package/lib/Select.js +18 -18
  188. package/lib/Select.js.map +1 -1
  189. package/lib/Skeleton.d.ts +2 -2
  190. package/lib/Skeleton.js +3 -2
  191. package/lib/Skeleton.js.map +1 -1
  192. package/lib/Slider.d.ts +1 -1
  193. package/lib/Slider.js +9 -9
  194. package/lib/Slider.js.map +1 -1
  195. package/lib/Spinner.d.ts +1 -1
  196. package/lib/Spinner.js +2 -2
  197. package/lib/Spinner.js.map +1 -1
  198. package/lib/Switch.d.ts +1 -1
  199. package/lib/Switch.js +7 -7
  200. package/lib/Switch.js.map +1 -1
  201. package/lib/Table.d.ts +2 -2
  202. package/lib/Table.js +3 -2
  203. package/lib/Table.js.map +1 -1
  204. package/lib/Tabs.d.ts +1 -1
  205. package/lib/Tabs.js +6 -6
  206. package/lib/Tabs.js.map +1 -1
  207. package/lib/TagsInput.d.ts +1 -1
  208. package/lib/TagsInput.js +12 -12
  209. package/lib/TagsInput.js.map +1 -1
  210. package/lib/Text.d.ts +1 -1
  211. package/lib/Text.js +3 -3
  212. package/lib/Text.js.map +1 -1
  213. package/lib/Toast.d.ts +1 -1
  214. package/lib/Toast.js +7 -7
  215. package/lib/Toast.js.map +1 -1
  216. package/lib/ToggleGroup.d.ts +1 -1
  217. package/lib/ToggleGroup.js +6 -5
  218. package/lib/ToggleGroup.js.map +1 -1
  219. package/lib/Tooltip.d.ts +1 -1
  220. package/lib/Tooltip.js +8 -8
  221. package/lib/Tooltip.js.map +1 -1
  222. package/lib/Tree/Tree.d.ts +2 -2
  223. package/lib/Tree/Tree.js +19 -19
  224. package/lib/Tree/Tree.js.map +1 -1
  225. package/lib/index.d.ts +2 -1
  226. package/lib/index.js +6 -3
  227. package/package.json +5 -5
package/lib/Checkbox.js CHANGED
@@ -1,8 +1,9 @@
1
1
  const require_Text = require("./Text.js");
2
- let _ark_ui_react = require("@ark-ui/react");
3
2
  let _ndla_styled_system_css = require("@ndla/styled-system/css");
4
3
  let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
5
4
  let react_jsx_runtime = require("react/jsx-runtime");
5
+ require("@ark-ui/react/factory");
6
+ let _ark_ui_react_checkbox = require("@ark-ui/react/checkbox");
6
7
  //#region src/Checkbox.tsx
7
8
  /**
8
9
  * Copyright (c) 2024-present, NDLA.
@@ -12,7 +13,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
12
13
  *
13
14
  */
14
15
  const { withProvider, withContext } = (0, _ndla_styled_system_jsx.createStyleContext)((0, _ndla_styled_system_css.sva)({
15
- slots: _ark_ui_react.checkboxAnatomy.keys(),
16
+ slots: _ark_ui_react_checkbox.checkboxAnatomy.keys(),
16
17
  base: {
17
18
  root: {
18
19
  userSelect: "none",
@@ -193,9 +194,9 @@ const { withProvider, withContext } = (0, _ndla_styled_system_jsx.createStyleCon
193
194
  }
194
195
  } }
195
196
  }));
196
- const CheckboxRoot = withProvider(_ark_ui_react.Checkbox.Root, "root", { baseComponent: true });
197
- const CheckboxIndicator = withContext(_ark_ui_react.Checkbox.Indicator, "indicator", { baseComponent: true });
198
- const InternalCheckboxLabel = withContext(_ark_ui_react.Checkbox.Label, "label");
197
+ const CheckboxRoot = withProvider(_ark_ui_react_checkbox.Checkbox.Root, "root", { baseComponent: true });
198
+ const CheckboxIndicator = withContext(_ark_ui_react_checkbox.Checkbox.Indicator, "indicator", { baseComponent: true });
199
+ const InternalCheckboxLabel = withContext(_ark_ui_react_checkbox.Checkbox.Label, "label");
199
200
  const CheckboxLabel = ({ textStyle = "label.medium", children, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalCheckboxLabel, {
200
201
  ...props,
201
202
  asChild: true,
@@ -204,9 +205,9 @@ const CheckboxLabel = ({ textStyle = "label.medium", children, ...props }) => /*
204
205
  children
205
206
  })
206
207
  });
207
- const CheckboxControl = withContext(_ark_ui_react.Checkbox.Control, "control", { baseComponent: true });
208
- const CheckboxGroup = withProvider(_ark_ui_react.Checkbox.Group, "group", { baseComponent: true });
209
- const CheckboxHiddenInput = _ark_ui_react.Checkbox.HiddenInput;
208
+ const CheckboxControl = withContext(_ark_ui_react_checkbox.Checkbox.Control, "control", { baseComponent: true });
209
+ const CheckboxGroup = withProvider(_ark_ui_react_checkbox.Checkbox.Group, "group", { baseComponent: true });
210
+ const CheckboxHiddenInput = _ark_ui_react_checkbox.Checkbox.HiddenInput;
210
211
  //#endregion
211
212
  exports.CheckboxControl = CheckboxControl;
212
213
  exports.CheckboxGroup = CheckboxGroup;
@@ -1 +1 @@
1
- {"version":3,"file":"Checkbox.js","names":["checkboxAnatomy","Checkbox","Text"],"sources":["../src/Checkbox.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Checkbox, checkboxAnatomy, type HTMLArkProps } from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { RecipeVariantProps, StyledProps } from \"@ndla/styled-system/types\";\nimport type { RefAttributes } from \"react\";\nimport { Text, type TextProps } from \"./Text\";\n\nconst checkboxRecipe = sva({\n slots: checkboxAnatomy.keys(),\n base: {\n root: {\n userSelect: \"none\",\n display: \"flex\",\n alignItems: \"center\",\n width: \"fit-content\",\n cursor: \"pointer\",\n _disabled: {\n color: \"text.disabled\",\n cursor: \"not-allowed\",\n _hover: {\n color: \"text.disabled\",\n },\n },\n },\n group: {\n display: \"flex\",\n gap: \"xxsmall\",\n flexDirection: \"column\",\n },\n control: {\n flexShrink: \"0\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n cursor: \"pointer\",\n width: \"medium\",\n height: \"medium\",\n color: \"text.strong\",\n transitionDuration: \"normal\",\n transitionProperty: \"border-color, background, box-shadow, color\",\n transitionTimingFunction: \"default\",\n _disabled: {\n cursor: \"not-allowed\",\n },\n _motionReduce: {\n transition: \"none\",\n transitionDuration: \"0s\",\n },\n },\n },\n defaultVariants: {\n variant: \"checkbox\",\n },\n variants: {\n variant: {\n checkbox: {\n root: {\n gap: \"xxsmall\",\n _hover: {\n color: \"text.action\",\n },\n _focusVisible: {\n outline: \"2px solid\",\n outlineOffset: \"4xsmall\",\n outlineColor: \"stroke.default\",\n borderRadius: \"xsmall\",\n },\n },\n control: {\n border: \"2px solid\",\n borderColor: \"stroke.subtle\",\n borderRadius: \"xsmall\",\n background: \"surface.default\",\n _hover: {\n boxShadow: \"0 0 0 4px var(--shadow-color)\",\n boxShadowColor: \"surface.actionSubtle.hover.strong\",\n },\n _checked: {\n backgroundColor: \"surface.action\",\n borderColor: \"surface.action\",\n color: \"icon.onAction\",\n },\n _disabled: {\n borderColor: \"stroke.disabled\",\n _hover: {\n borderColor: \"stroke.disabled\",\n boxShadow: \"none\",\n },\n _checked: {\n background: \"surface.disabled\",\n borderColor: \"stroke.disabled\",\n },\n },\n _invalid: {\n borderColor: \"stroke.error\",\n _checked: {\n color: \"stroke.error\",\n borderColor: \"stroke.error\",\n backgroundColor: \"surface.default\",\n },\n },\n },\n },\n chip: {\n root: {\n width: \"fit-content\",\n color: \"text.default\",\n gap: \"4xsmall\",\n background: \"surface.actionSubtle\",\n border: \"1px solid\",\n borderColor: \"stroke.subtle\",\n outlineColor: \"stroke.subtle\",\n paddingInline: \"xsmall\",\n paddingBlock: \"4xsmall\",\n borderRadius: \"large\",\n minHeight: \"large\",\n transitionDuration: \"normal\",\n transitionProperty: \"border-color, background, box-shadow, color\",\n transitionTimingFunction: \"default\",\n _disabled: {\n color: \"text.disabled\",\n borderColor: \"stroke.disabled\",\n background: \"surface.disabled\",\n _hover: {\n color: \"text.disabled\",\n borderColor: \"stroke.disabled\",\n background: \"surface.disabled\",\n },\n _checked: {\n color: \"text.disabled\",\n borderColor: \"stroke.disabled\",\n background: \"surface.disabled\",\n _hover: {\n color: \"text.disabled\",\n borderColor: \"stroke.disabled\",\n background: \"surface.disabled\",\n },\n },\n },\n _hover: {\n background: \"surface.actionSubtle.hover\",\n borderColor: \"stroke.hover\",\n outlineColor: \"stroke.hover\",\n _invalid: {\n backgroundColor: \"surface.dangerSubtle\",\n },\n },\n _checked: {\n color: \"text.onAction\",\n background: \"surface.action.selected\",\n borderColor: \"surface.action.selected\",\n outlineColor: \"icon.onAction\",\n _focus: {\n outlineOffset: \"-4px\",\n },\n _hover: {\n outlineOffset: \"-2px\",\n background: \"surface.actionSubtle.hover\",\n color: \"text.default\",\n borderColor: \"stroke.hover\",\n outlineColor: \"stroke.hover\",\n },\n },\n _invalid: {\n borderColor: \"stroke.error\",\n outlineColor: \"stroke.error\",\n background: \"surface.dangerSubtle\",\n outlineOffset: \"-2px\",\n _checked: {\n color: \"text.default\",\n borderColor: \"stroke.error\",\n outlineColor: \"stroke.error\",\n background: \"surface.dangerSubtle\",\n outlineOffset: \"-2px\",\n _hover: {\n borderColor: \"stroke.hover\",\n outlineColor: \"stroke.hover\",\n },\n },\n },\n _focus: {\n outlineStyle: \"solid\",\n outlineWidth: \"2px\",\n outlineOffset: \"-2px\",\n },\n },\n control: {\n display: \"none\",\n _checked: {\n display: \"flex\",\n color: \"text.onAction\",\n _hover: {\n color: \"stroke.hover\",\n },\n },\n _disabled: {\n color: \"stroke.disabled\",\n _hover: {\n color: \"stroke.disabled\",\n },\n },\n _invalid: {\n _checked: {\n color: \"stroke.error\",\n },\n },\n },\n },\n },\n },\n});\n\nconst { withProvider, withContext } = createStyleContext(checkboxRecipe);\n\nexport type CheckboxVariantProps = NonNullable<RecipeVariantProps<typeof checkboxRecipe>>;\n\nexport interface CheckboxRootProps extends StyledProps, HTMLArkProps<\"label\">, CheckboxVariantProps {}\n\nexport const CheckboxRoot = withProvider(Checkbox.Root, \"root\", { baseComponent: true });\n\nexport const CheckboxIndicator = withContext(Checkbox.Indicator, \"indicator\", { baseComponent: true });\n\nconst InternalCheckboxLabel = withContext(Checkbox.Label, \"label\");\n\ninterface CheckboxLabelProps\n extends StyledProps, Omit<Checkbox.LabelProps, \"color\">, TextProps, RefAttributes<HTMLSpanElement> {}\n\nexport const CheckboxLabel = ({ textStyle = \"label.medium\", children, ...props }: CheckboxLabelProps) => (\n <InternalCheckboxLabel {...props} asChild>\n <Text textStyle={textStyle}>{children}</Text>\n </InternalCheckboxLabel>\n);\n\nexport const CheckboxControl = withContext(Checkbox.Control, \"control\", { baseComponent: true });\n\nexport const CheckboxGroup = withProvider(Checkbox.Group, \"group\", { baseComponent: true });\n\nexport const CheckboxHiddenInput = Checkbox.HiddenInput;\n"],"mappings":"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"}
1
+ {"version":3,"file":"Checkbox.js","names":["checkboxAnatomy","Checkbox","Text"],"sources":["../src/Checkbox.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Checkbox, checkboxAnatomy } from \"@ark-ui/react/checkbox\";\nimport { type HTMLArkProps } from \"@ark-ui/react/factory\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { RecipeVariantProps, StyledProps } from \"@ndla/styled-system/types\";\nimport type { RefAttributes } from \"react\";\nimport { Text, type TextProps } from \"./Text\";\n\nconst checkboxRecipe = sva({\n slots: checkboxAnatomy.keys(),\n base: {\n root: {\n userSelect: \"none\",\n display: \"flex\",\n alignItems: \"center\",\n width: \"fit-content\",\n cursor: \"pointer\",\n _disabled: {\n color: \"text.disabled\",\n cursor: \"not-allowed\",\n _hover: {\n color: \"text.disabled\",\n },\n },\n },\n group: {\n display: \"flex\",\n gap: \"xxsmall\",\n flexDirection: \"column\",\n },\n control: {\n flexShrink: \"0\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n cursor: \"pointer\",\n width: \"medium\",\n height: \"medium\",\n color: \"text.strong\",\n transitionDuration: \"normal\",\n transitionProperty: \"border-color, background, box-shadow, color\",\n transitionTimingFunction: \"default\",\n _disabled: {\n cursor: \"not-allowed\",\n },\n _motionReduce: {\n transition: \"none\",\n transitionDuration: \"0s\",\n },\n },\n },\n defaultVariants: {\n variant: \"checkbox\",\n },\n variants: {\n variant: {\n checkbox: {\n root: {\n gap: \"xxsmall\",\n _hover: {\n color: \"text.action\",\n },\n _focusVisible: {\n outline: \"2px solid\",\n outlineOffset: \"4xsmall\",\n outlineColor: \"stroke.default\",\n borderRadius: \"xsmall\",\n },\n },\n control: {\n border: \"2px solid\",\n borderColor: \"stroke.subtle\",\n borderRadius: \"xsmall\",\n background: \"surface.default\",\n _hover: {\n boxShadow: \"0 0 0 4px var(--shadow-color)\",\n boxShadowColor: \"surface.actionSubtle.hover.strong\",\n },\n _checked: {\n backgroundColor: \"surface.action\",\n borderColor: \"surface.action\",\n color: \"icon.onAction\",\n },\n _disabled: {\n borderColor: \"stroke.disabled\",\n _hover: {\n borderColor: \"stroke.disabled\",\n boxShadow: \"none\",\n },\n _checked: {\n background: \"surface.disabled\",\n borderColor: \"stroke.disabled\",\n },\n },\n _invalid: {\n borderColor: \"stroke.error\",\n _checked: {\n color: \"stroke.error\",\n borderColor: \"stroke.error\",\n backgroundColor: \"surface.default\",\n },\n },\n },\n },\n chip: {\n root: {\n width: \"fit-content\",\n color: \"text.default\",\n gap: \"4xsmall\",\n background: \"surface.actionSubtle\",\n border: \"1px solid\",\n borderColor: \"stroke.subtle\",\n outlineColor: \"stroke.subtle\",\n paddingInline: \"xsmall\",\n paddingBlock: \"4xsmall\",\n borderRadius: \"large\",\n minHeight: \"large\",\n transitionDuration: \"normal\",\n transitionProperty: \"border-color, background, box-shadow, color\",\n transitionTimingFunction: \"default\",\n _disabled: {\n color: \"text.disabled\",\n borderColor: \"stroke.disabled\",\n background: \"surface.disabled\",\n _hover: {\n color: \"text.disabled\",\n borderColor: \"stroke.disabled\",\n background: \"surface.disabled\",\n },\n _checked: {\n color: \"text.disabled\",\n borderColor: \"stroke.disabled\",\n background: \"surface.disabled\",\n _hover: {\n color: \"text.disabled\",\n borderColor: \"stroke.disabled\",\n background: \"surface.disabled\",\n },\n },\n },\n _hover: {\n background: \"surface.actionSubtle.hover\",\n borderColor: \"stroke.hover\",\n outlineColor: \"stroke.hover\",\n _invalid: {\n backgroundColor: \"surface.dangerSubtle\",\n },\n },\n _checked: {\n color: \"text.onAction\",\n background: \"surface.action.selected\",\n borderColor: \"surface.action.selected\",\n outlineColor: \"icon.onAction\",\n _focus: {\n outlineOffset: \"-4px\",\n },\n _hover: {\n outlineOffset: \"-2px\",\n background: \"surface.actionSubtle.hover\",\n color: \"text.default\",\n borderColor: \"stroke.hover\",\n outlineColor: \"stroke.hover\",\n },\n },\n _invalid: {\n borderColor: \"stroke.error\",\n outlineColor: \"stroke.error\",\n background: \"surface.dangerSubtle\",\n outlineOffset: \"-2px\",\n _checked: {\n color: \"text.default\",\n borderColor: \"stroke.error\",\n outlineColor: \"stroke.error\",\n background: \"surface.dangerSubtle\",\n outlineOffset: \"-2px\",\n _hover: {\n borderColor: \"stroke.hover\",\n outlineColor: \"stroke.hover\",\n },\n },\n },\n _focus: {\n outlineStyle: \"solid\",\n outlineWidth: \"2px\",\n outlineOffset: \"-2px\",\n },\n },\n control: {\n display: \"none\",\n _checked: {\n display: \"flex\",\n color: \"text.onAction\",\n _hover: {\n color: \"stroke.hover\",\n },\n },\n _disabled: {\n color: \"stroke.disabled\",\n _hover: {\n color: \"stroke.disabled\",\n },\n },\n _invalid: {\n _checked: {\n color: \"stroke.error\",\n },\n },\n },\n },\n },\n },\n});\n\nconst { withProvider, withContext } = createStyleContext(checkboxRecipe);\n\nexport type CheckboxVariantProps = NonNullable<RecipeVariantProps<typeof checkboxRecipe>>;\n\nexport interface CheckboxRootProps extends StyledProps, HTMLArkProps<\"label\">, CheckboxVariantProps {}\n\nexport const CheckboxRoot = withProvider(Checkbox.Root, \"root\", { baseComponent: true });\n\nexport const CheckboxIndicator = withContext(Checkbox.Indicator, \"indicator\", { baseComponent: true });\n\nconst InternalCheckboxLabel = withContext(Checkbox.Label, \"label\");\n\ninterface CheckboxLabelProps\n extends StyledProps, Omit<Checkbox.LabelProps, \"color\">, TextProps, RefAttributes<HTMLSpanElement> {}\n\nexport const CheckboxLabel = ({ textStyle = \"label.medium\", children, ...props }: CheckboxLabelProps) => (\n <InternalCheckboxLabel {...props} asChild>\n <Text textStyle={textStyle}>{children}</Text>\n </InternalCheckboxLabel>\n);\n\nexport const CheckboxControl = withContext(Checkbox.Control, \"control\", { baseComponent: true });\n\nexport const CheckboxGroup = withProvider(Checkbox.Group, \"group\", { baseComponent: true });\n\nexport const CheckboxHiddenInput = Checkbox.HiddenInput;\n"],"mappings":"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"}
package/lib/Combobox.d.ts CHANGED
@@ -5,7 +5,7 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  *
7
7
  */
8
- import { Combobox } from "@ark-ui/react";
8
+ import { Combobox } from "@ark-ui/react/combobox";
9
9
  import type { RecipeVariantProps, StyledProps } from "@ndla/styled-system/types";
10
10
  import { type RefAttributes } from "react";
11
11
  import { type TextProps } from "./Text";
package/lib/Combobox.js CHANGED
@@ -1,10 +1,10 @@
1
1
  const require_Text = require("./Text.js");
2
2
  const require_Label = require("./Label.js");
3
- let _ark_ui_react = require("@ark-ui/react");
4
3
  let _ndla_styled_system_css = require("@ndla/styled-system/css");
5
4
  let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
6
5
  let react_jsx_runtime = require("react/jsx-runtime");
7
6
  let react = require("react");
7
+ let _ark_ui_react_combobox = require("@ark-ui/react/combobox");
8
8
  //#region src/Combobox.tsx
9
9
  /**
10
10
  * Copyright (c) 2024-present, NDLA.
@@ -14,7 +14,7 @@ let react = require("react");
14
14
  *
15
15
  */
16
16
  const { withProvider, withContext } = (0, _ndla_styled_system_jsx.createStyleContext)((0, _ndla_styled_system_css.sva)({
17
- slots: _ark_ui_react.comboboxAnatomy.keys(),
17
+ slots: _ark_ui_react_combobox.comboboxAnatomy.keys(),
18
18
  base: {
19
19
  root: {
20
20
  display: "flex",
@@ -117,7 +117,7 @@ const { withProvider, withContext } = (0, _ndla_styled_system_jsx.createStyleCon
117
117
  }
118
118
  }
119
119
  }));
120
- const InternalComboboxRoot = withProvider(_ark_ui_react.Combobox.Root, "root", { baseComponent: true });
120
+ const InternalComboboxRoot = withProvider(_ark_ui_react_combobox.Combobox.Root, "root", { baseComponent: true });
121
121
  const ComboboxRoot = ({ lazyMount = true, unmountOnExit = true, ...props }) => {
122
122
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalComboboxRoot, {
123
123
  lazyMount,
@@ -125,15 +125,15 @@ const ComboboxRoot = ({ lazyMount = true, unmountOnExit = true, ...props }) => {
125
125
  ...props
126
126
  });
127
127
  };
128
- const ComboboxClearTrigger = withContext(_ark_ui_react.Combobox.ClearTrigger, "clearTrigger", { baseComponent: true });
129
- const ComboboxContentStandalone = withContext(_ark_ui_react.Combobox.Content, "content", { baseComponent: true });
128
+ const ComboboxClearTrigger = withContext(_ark_ui_react_combobox.Combobox.ClearTrigger, "clearTrigger", { baseComponent: true });
129
+ const ComboboxContentStandalone = withContext(_ark_ui_react_combobox.Combobox.Content, "content", { baseComponent: true });
130
130
  const ComboboxContent = (0, react.forwardRef)((props, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComboboxPositioner, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComboboxContentStandalone, {
131
131
  ref,
132
132
  ...props
133
133
  }) }));
134
- const ComboboxControl = withContext(_ark_ui_react.Combobox.Control, "control", { baseComponent: true });
135
- const ComboboxInput = withContext(_ark_ui_react.Combobox.Input, "input", { baseComponent: true });
136
- const InternalComboboxItemGroupLabel = withContext(_ark_ui_react.Combobox.ItemGroupLabel, "itemGroupLabel");
134
+ const ComboboxControl = withContext(_ark_ui_react_combobox.Combobox.Control, "control", { baseComponent: true });
135
+ const ComboboxInput = withContext(_ark_ui_react_combobox.Combobox.Input, "input", { baseComponent: true });
136
+ const InternalComboboxItemGroupLabel = withContext(_ark_ui_react_combobox.Combobox.ItemGroupLabel, "itemGroupLabel");
137
137
  const ComboboxItemGroupLabel = ({ children, textStyle = "label.small", fontWeight = "bold", ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalComboboxItemGroupLabel, {
138
138
  asChild: true,
139
139
  children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
@@ -145,10 +145,10 @@ const ComboboxItemGroupLabel = ({ children, textStyle = "label.small", fontWeigh
145
145
  children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children })
146
146
  })
147
147
  });
148
- const ComboboxItemGroup = withContext(_ark_ui_react.Combobox.ItemGroup, "itemGroup", { baseComponent: true });
149
- const ComboboxItemIndicator = withContext(_ark_ui_react.Combobox.ItemIndicator, "itemIndicator", { baseComponent: true });
150
- const ComboboxItem = withContext(_ark_ui_react.Combobox.Item, "item", { baseComponent: true });
151
- const InternalComboboxItemText = withContext(_ark_ui_react.Combobox.ItemText, "itemText");
148
+ const ComboboxItemGroup = withContext(_ark_ui_react_combobox.Combobox.ItemGroup, "itemGroup", { baseComponent: true });
149
+ const ComboboxItemIndicator = withContext(_ark_ui_react_combobox.Combobox.ItemIndicator, "itemIndicator", { baseComponent: true });
150
+ const ComboboxItem = withContext(_ark_ui_react_combobox.Combobox.Item, "item", { baseComponent: true });
151
+ const InternalComboboxItemText = withContext(_ark_ui_react_combobox.Combobox.ItemText, "itemText");
152
152
  const ComboboxItemText = ({ textStyle = "label.medium", fontWeight = "bold", children, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalComboboxItemText, {
153
153
  asChild: true,
154
154
  children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
@@ -160,7 +160,7 @@ const ComboboxItemText = ({ textStyle = "label.medium", fontWeight = "bold", chi
160
160
  children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children })
161
161
  })
162
162
  });
163
- const InternalComboboxLabel = withContext(_ark_ui_react.Combobox.Label, "label");
163
+ const InternalComboboxLabel = withContext(_ark_ui_react_combobox.Combobox.Label, "label");
164
164
  const ComboboxLabel = ({ textStyle = "label.medium", fontWeight = "bold", ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalComboboxLabel, {
165
165
  asChild: true,
166
166
  children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Label.Label, {
@@ -169,9 +169,9 @@ const ComboboxLabel = ({ textStyle = "label.medium", fontWeight = "bold", ...pro
169
169
  ...props
170
170
  })
171
171
  });
172
- const ComboboxPositioner = withContext(_ark_ui_react.Combobox.Positioner, "positioner", { baseComponent: true });
173
- const ComboboxTrigger = withContext(_ark_ui_react.Combobox.Trigger, "trigger", { baseComponent: true });
174
- const ComboboxList = withContext(_ark_ui_react.Combobox.List, "list", { baseComponent: true });
172
+ const ComboboxPositioner = withContext(_ark_ui_react_combobox.Combobox.Positioner, "positioner", { baseComponent: true });
173
+ const ComboboxTrigger = withContext(_ark_ui_react_combobox.Combobox.Trigger, "trigger", { baseComponent: true });
174
+ const ComboboxList = withContext(_ark_ui_react_combobox.Combobox.List, "list", { baseComponent: true });
175
175
  //#endregion
176
176
  exports.ComboboxClearTrigger = ComboboxClearTrigger;
177
177
  exports.ComboboxContent = ComboboxContent;
@@ -1 +1 @@
1
- {"version":3,"file":"Combobox.js","names":["comboboxAnatomy","Combobox","Text","Label"],"sources":["../src/Combobox.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Combobox, comboboxAnatomy } from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { RecipeVariantProps, StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef, type ElementType, type RefAttributes } from \"react\";\nimport { Label } from \"./Label\";\nimport { Text, type TextProps } from \"./Text\";\n\nconst comboboxRecipe = sva({\n slots: comboboxAnatomy.keys(),\n base: {\n root: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"3xsmall\",\n },\n control: {\n display: \"flex\",\n alignItems: \"center\",\n gap: \"4xsmall\",\n },\n content: {\n display: \"flex\",\n flexDirection: \"column\",\n zIndex: \"dropdown\",\n background: \"surface.default\",\n overflowY: \"auto\",\n maxHeight: \"min(token(spacing.surface.xsmall), 45vh)\",\n _open: {\n animation: \"fade-shift-in 0.25s ease-out\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n _closed: {\n animation: \"fade-shift-out 0.25s ease-out\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n },\n item: {\n display: \"flex\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n cursor: \"pointer\",\n transitionDuration: \"fast\",\n transitionProperty: \"background, color, border-color\",\n transitionTimingFunction: \"default\",\n background: \"surface.default\",\n _disabled: {\n cursor: \"not-allowed\",\n background: \"surface.disabled\",\n color: \"text.disabled\",\n _hover: {\n background: \"surface.disabled\",\n color: \"text.disabled\",\n },\n },\n _hover: {\n background: \"surface.hover\",\n },\n _highlighted: {\n background: \"surface.hover\",\n },\n _checked: {\n background: \"surface.selected\",\n _highlighted: {\n background: \"surface.hover\",\n },\n },\n },\n trigger: {\n \"& svg\": {\n color: \"icon.default\",\n transformOrigin: \"center\",\n transitionDuration: \"normal\",\n transitionProperty: \"transform\",\n transitionTimingFunction: \"default\",\n _motionReduce: {\n transition: \"none\",\n transitionDuration: \"0s\",\n },\n },\n _open: {\n \"& svg\": {\n transform: \"rotate(180deg)\",\n },\n },\n },\n itemIndicator: {\n color: \"stroke.default\",\n },\n itemText: {\n _checked: {\n textDecoration: \"underline\",\n },\n _highlighted: {\n textDecoration: \"underline\",\n },\n },\n itemGroup: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"4xsmall\",\n },\n },\n defaultVariants: {\n context: \"standalone\",\n variant: \"simple\",\n },\n variants: {\n context: {\n standalone: {\n content: {\n boxShadow: \"large\",\n borderRadius: \"xsmall\",\n padding: \"xsmall\",\n },\n },\n composite: {},\n },\n variant: {\n simple: {\n item: {\n padding: \"xsmall\",\n borderRadius: \"xsmall\",\n },\n content: {\n gap: \"4xsmall\",\n },\n },\n complex: {},\n },\n },\n});\n\nconst { withProvider, withContext } = createStyleContext(comboboxRecipe);\n\nexport type ComboboxVariantProps = NonNullable<RecipeVariantProps<typeof comboboxRecipe>>;\n\nexport interface ComboboxRootProps<T extends Combobox.CollectionItem>\n extends StyledProps, Combobox.RootProps<T>, ComboboxVariantProps, RefAttributes<HTMLDivElement> {\n translations: Combobox.RootProps<T>[\"translations\"];\n}\n\nconst InternalComboboxRoot = withProvider<ElementType<ComboboxRootProps<Combobox.CollectionItem>>>(\n Combobox.Root,\n \"root\",\n { baseComponent: true },\n);\n\nexport const ComboboxRoot = <T extends Combobox.CollectionItem>({\n lazyMount = true,\n unmountOnExit = true,\n ...props\n}: ComboboxRootProps<T>) => {\n return <InternalComboboxRoot lazyMount={lazyMount} unmountOnExit={unmountOnExit} {...props} />;\n};\n\nexport interface ComboboxClearTriggerProps extends Combobox.ClearTriggerProps, StyledProps {}\n\nexport const ComboboxClearTrigger = withContext(Combobox.ClearTrigger, \"clearTrigger\", { baseComponent: true });\n\nexport interface ComboboxContentProps extends Combobox.ContentProps, StyledProps {}\n\nexport const ComboboxContentStandalone = withContext(Combobox.Content, \"content\", { baseComponent: true });\n\nexport const ComboboxContent = forwardRef<HTMLDivElement, ComboboxContentProps>((props, ref) => (\n <ComboboxPositioner>\n <ComboboxContentStandalone ref={ref} {...props} />\n </ComboboxPositioner>\n));\n\nexport interface ComboboxControlProps extends Combobox.ControlProps, StyledProps {}\n\nexport const ComboboxControl = withContext(Combobox.Control, \"control\", { baseComponent: true });\n\nexport interface ComboboxInputProps extends Combobox.InputProps, StyledProps {}\n\nexport const ComboboxInput = withContext(Combobox.Input, \"input\", { baseComponent: true });\n\nconst InternalComboboxItemGroupLabel = withContext(Combobox.ItemGroupLabel, \"itemGroupLabel\");\n\nexport interface ComboboxItemGroupLabelProps\n extends Omit<Combobox.ItemGroupLabelProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLDivElement> {}\n\nexport const ComboboxItemGroupLabel = ({\n children,\n textStyle = \"label.small\",\n fontWeight = \"bold\",\n ...props\n}: ComboboxItemGroupLabelProps) => (\n <InternalComboboxItemGroupLabel asChild>\n <Text asChild consumeCss textStyle={textStyle} fontWeight={fontWeight} {...props}>\n <div>{children}</div>\n </Text>\n </InternalComboboxItemGroupLabel>\n);\n\nexport interface ComboboxItemGroupProps extends Combobox.ItemGroupProps, StyledProps {}\n\nexport const ComboboxItemGroup = withContext(Combobox.ItemGroup, \"itemGroup\", { baseComponent: true });\n\nexport interface ComboboxItemIndicatorProps extends Combobox.ItemIndicatorProps, StyledProps {}\n\nexport const ComboboxItemIndicator = withContext(Combobox.ItemIndicator, \"itemIndicator\", { baseComponent: true });\n\nexport interface ComboboxItemProps extends Combobox.ItemProps, StyledProps {}\n\nexport const ComboboxItem = withContext(Combobox.Item, \"item\", { baseComponent: true });\n\nconst InternalComboboxItemText = withContext(Combobox.ItemText, \"itemText\");\n\nexport interface ComboboxItemTextProps\n extends Omit<Combobox.ItemTextProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLDivElement> {}\n\nexport const ComboboxItemText = ({\n textStyle = \"label.medium\",\n fontWeight = \"bold\",\n children,\n ...props\n}: ComboboxItemTextProps) => (\n <InternalComboboxItemText asChild>\n <Text {...props} textStyle={textStyle} fontWeight={fontWeight} asChild consumeCss>\n <div>{children}</div>\n </Text>\n </InternalComboboxItemText>\n);\n\nconst InternalComboboxLabel = withContext(Combobox.Label, \"label\");\n\nexport interface ComboboxLabelProps\n extends Omit<Combobox.LabelProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLLabelElement> {}\n\nexport const ComboboxLabel = ({ textStyle = \"label.medium\", fontWeight = \"bold\", ...props }: ComboboxLabelProps) => (\n <InternalComboboxLabel asChild>\n <Label textStyle={textStyle} fontWeight={fontWeight} {...props} />\n </InternalComboboxLabel>\n);\n\nexport interface ComboboxPositionerProps extends Combobox.PositionerProps, StyledProps {}\n\nexport const ComboboxPositioner = withContext(Combobox.Positioner, \"positioner\", { baseComponent: true });\n\nexport interface ComboboxTriggerProps extends Combobox.TriggerProps, StyledProps {}\n\nexport const ComboboxTrigger = withContext(Combobox.Trigger, \"trigger\", { baseComponent: true });\n\nexport interface ComboboxListProps extends Combobox.ListProps, StyledProps {}\n\nexport const ComboboxList = withContext(Combobox.List, \"list\", { baseComponent: true });\n"],"mappings":"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"}
1
+ {"version":3,"file":"Combobox.js","names":["comboboxAnatomy","Combobox","Text","Label"],"sources":["../src/Combobox.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Combobox, comboboxAnatomy } from \"@ark-ui/react/combobox\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { RecipeVariantProps, StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef, type ElementType, type RefAttributes } from \"react\";\nimport { Label } from \"./Label\";\nimport { Text, type TextProps } from \"./Text\";\n\nconst comboboxRecipe = sva({\n slots: comboboxAnatomy.keys(),\n base: {\n root: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"3xsmall\",\n },\n control: {\n display: \"flex\",\n alignItems: \"center\",\n gap: \"4xsmall\",\n },\n content: {\n display: \"flex\",\n flexDirection: \"column\",\n zIndex: \"dropdown\",\n background: \"surface.default\",\n overflowY: \"auto\",\n maxHeight: \"min(token(spacing.surface.xsmall), 45vh)\",\n _open: {\n animation: \"fade-shift-in 0.25s ease-out\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n _closed: {\n animation: \"fade-shift-out 0.25s ease-out\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n },\n item: {\n display: \"flex\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n cursor: \"pointer\",\n transitionDuration: \"fast\",\n transitionProperty: \"background, color, border-color\",\n transitionTimingFunction: \"default\",\n background: \"surface.default\",\n _disabled: {\n cursor: \"not-allowed\",\n background: \"surface.disabled\",\n color: \"text.disabled\",\n _hover: {\n background: \"surface.disabled\",\n color: \"text.disabled\",\n },\n },\n _hover: {\n background: \"surface.hover\",\n },\n _highlighted: {\n background: \"surface.hover\",\n },\n _checked: {\n background: \"surface.selected\",\n _highlighted: {\n background: \"surface.hover\",\n },\n },\n },\n trigger: {\n \"& svg\": {\n color: \"icon.default\",\n transformOrigin: \"center\",\n transitionDuration: \"normal\",\n transitionProperty: \"transform\",\n transitionTimingFunction: \"default\",\n _motionReduce: {\n transition: \"none\",\n transitionDuration: \"0s\",\n },\n },\n _open: {\n \"& svg\": {\n transform: \"rotate(180deg)\",\n },\n },\n },\n itemIndicator: {\n color: \"stroke.default\",\n },\n itemText: {\n _checked: {\n textDecoration: \"underline\",\n },\n _highlighted: {\n textDecoration: \"underline\",\n },\n },\n itemGroup: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"4xsmall\",\n },\n },\n defaultVariants: {\n context: \"standalone\",\n variant: \"simple\",\n },\n variants: {\n context: {\n standalone: {\n content: {\n boxShadow: \"large\",\n borderRadius: \"xsmall\",\n padding: \"xsmall\",\n },\n },\n composite: {},\n },\n variant: {\n simple: {\n item: {\n padding: \"xsmall\",\n borderRadius: \"xsmall\",\n },\n content: {\n gap: \"4xsmall\",\n },\n },\n complex: {},\n },\n },\n});\n\nconst { withProvider, withContext } = createStyleContext(comboboxRecipe);\n\nexport type ComboboxVariantProps = NonNullable<RecipeVariantProps<typeof comboboxRecipe>>;\n\nexport interface ComboboxRootProps<T extends Combobox.CollectionItem>\n extends StyledProps, Combobox.RootProps<T>, ComboboxVariantProps, RefAttributes<HTMLDivElement> {\n translations: Combobox.RootProps<T>[\"translations\"];\n}\n\nconst InternalComboboxRoot = withProvider<ElementType<ComboboxRootProps<Combobox.CollectionItem>>>(\n Combobox.Root,\n \"root\",\n { baseComponent: true },\n);\n\nexport const ComboboxRoot = <T extends Combobox.CollectionItem>({\n lazyMount = true,\n unmountOnExit = true,\n ...props\n}: ComboboxRootProps<T>) => {\n return <InternalComboboxRoot lazyMount={lazyMount} unmountOnExit={unmountOnExit} {...props} />;\n};\n\nexport interface ComboboxClearTriggerProps extends Combobox.ClearTriggerProps, StyledProps {}\n\nexport const ComboboxClearTrigger = withContext(Combobox.ClearTrigger, \"clearTrigger\", { baseComponent: true });\n\nexport interface ComboboxContentProps extends Combobox.ContentProps, StyledProps {}\n\nexport const ComboboxContentStandalone = withContext(Combobox.Content, \"content\", { baseComponent: true });\n\nexport const ComboboxContent = forwardRef<HTMLDivElement, ComboboxContentProps>((props, ref) => (\n <ComboboxPositioner>\n <ComboboxContentStandalone ref={ref} {...props} />\n </ComboboxPositioner>\n));\n\nexport interface ComboboxControlProps extends Combobox.ControlProps, StyledProps {}\n\nexport const ComboboxControl = withContext(Combobox.Control, \"control\", { baseComponent: true });\n\nexport interface ComboboxInputProps extends Combobox.InputProps, StyledProps {}\n\nexport const ComboboxInput = withContext(Combobox.Input, \"input\", { baseComponent: true });\n\nconst InternalComboboxItemGroupLabel = withContext(Combobox.ItemGroupLabel, \"itemGroupLabel\");\n\nexport interface ComboboxItemGroupLabelProps\n extends Omit<Combobox.ItemGroupLabelProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLDivElement> {}\n\nexport const ComboboxItemGroupLabel = ({\n children,\n textStyle = \"label.small\",\n fontWeight = \"bold\",\n ...props\n}: ComboboxItemGroupLabelProps) => (\n <InternalComboboxItemGroupLabel asChild>\n <Text asChild consumeCss textStyle={textStyle} fontWeight={fontWeight} {...props}>\n <div>{children}</div>\n </Text>\n </InternalComboboxItemGroupLabel>\n);\n\nexport interface ComboboxItemGroupProps extends Combobox.ItemGroupProps, StyledProps {}\n\nexport const ComboboxItemGroup = withContext(Combobox.ItemGroup, \"itemGroup\", { baseComponent: true });\n\nexport interface ComboboxItemIndicatorProps extends Combobox.ItemIndicatorProps, StyledProps {}\n\nexport const ComboboxItemIndicator = withContext(Combobox.ItemIndicator, \"itemIndicator\", { baseComponent: true });\n\nexport interface ComboboxItemProps extends Combobox.ItemProps, StyledProps {}\n\nexport const ComboboxItem = withContext(Combobox.Item, \"item\", { baseComponent: true });\n\nconst InternalComboboxItemText = withContext(Combobox.ItemText, \"itemText\");\n\nexport interface ComboboxItemTextProps\n extends Omit<Combobox.ItemTextProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLDivElement> {}\n\nexport const ComboboxItemText = ({\n textStyle = \"label.medium\",\n fontWeight = \"bold\",\n children,\n ...props\n}: ComboboxItemTextProps) => (\n <InternalComboboxItemText asChild>\n <Text {...props} textStyle={textStyle} fontWeight={fontWeight} asChild consumeCss>\n <div>{children}</div>\n </Text>\n </InternalComboboxItemText>\n);\n\nconst InternalComboboxLabel = withContext(Combobox.Label, \"label\");\n\nexport interface ComboboxLabelProps\n extends Omit<Combobox.LabelProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLLabelElement> {}\n\nexport const ComboboxLabel = ({ textStyle = \"label.medium\", fontWeight = \"bold\", ...props }: ComboboxLabelProps) => (\n <InternalComboboxLabel asChild>\n <Label textStyle={textStyle} fontWeight={fontWeight} {...props} />\n </InternalComboboxLabel>\n);\n\nexport interface ComboboxPositionerProps extends Combobox.PositionerProps, StyledProps {}\n\nexport const ComboboxPositioner = withContext(Combobox.Positioner, \"positioner\", { baseComponent: true });\n\nexport interface ComboboxTriggerProps extends Combobox.TriggerProps, StyledProps {}\n\nexport const ComboboxTrigger = withContext(Combobox.Trigger, \"trigger\", { baseComponent: true });\n\nexport interface ComboboxListProps extends Combobox.ListProps, StyledProps {}\n\nexport const ComboboxList = withContext(Combobox.List, \"list\", { baseComponent: true });\n"],"mappings":"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"}
@@ -5,7 +5,7 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  *
7
7
  */
8
- import { DatePicker } from "@ark-ui/react";
8
+ import { DatePicker } from "@ark-ui/react/date-picker";
9
9
  import { type StyledProps } from "@ndla/styled-system/jsx";
10
10
  import { type RefAttributes } from "react";
11
11
  import type { TextProps } from "./Text";
@@ -42,4 +42,4 @@ export declare const DatePickerViewControl: import("@ndla/styled-system/jsx").St
42
42
  export declare const DatePickerView: import("@ndla/styled-system/jsx").StyleContextConsumer<import("react").ForwardRefExoticComponent<DatePicker.ViewProps & RefAttributes<HTMLDivElement>>>;
43
43
  export declare const DatePickerViewTrigger: import("@ndla/styled-system/jsx").StyleContextConsumer<import("react").ForwardRefExoticComponent<DatePicker.ViewTriggerProps & RefAttributes<HTMLButtonElement>>>;
44
44
  export declare const DatePickerYearSelect: import("@ndla/styled-system/jsx").StyleContextConsumer<import("react").ForwardRefExoticComponent<DatePicker.YearSelectProps & RefAttributes<HTMLSelectElement>>>;
45
- export { DatePickerContext } from "@ark-ui/react";
45
+ export { DatePickerContext } from "@ark-ui/react/date-picker";
package/lib/DatePicker.js CHANGED
@@ -1,9 +1,9 @@
1
1
  const require_Label = require("./Label.js");
2
- let _ark_ui_react = require("@ark-ui/react");
3
2
  let _ndla_styled_system_css = require("@ndla/styled-system/css");
4
3
  let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
5
4
  let react_jsx_runtime = require("react/jsx-runtime");
6
5
  let react = require("react");
6
+ let _ark_ui_react_date_picker = require("@ark-ui/react/date-picker");
7
7
  //#region src/DatePicker.tsx
8
8
  /**
9
9
  * Copyright (c) 2024-present, NDLA.
@@ -13,7 +13,7 @@ let react = require("react");
13
13
  *
14
14
  */
15
15
  const { withProvider, withContext } = (0, _ndla_styled_system_jsx.createStyleContext)((0, _ndla_styled_system_css.sva)({
16
- slots: _ark_ui_react.datePickerAnatomy.keys(),
16
+ slots: _ark_ui_react_date_picker.datePickerAnatomy.keys(),
17
17
  base: {
18
18
  root: {
19
19
  display: "flex",
@@ -71,16 +71,16 @@ const { withProvider, withContext } = (0, _ndla_styled_system_jsx.createStyleCon
71
71
  }
72
72
  }
73
73
  }));
74
- const DatePickerRoot = withProvider(_ark_ui_react.DatePicker.Root, "root", { baseComponent: true });
75
- const DatePickerClearTrigger = withContext(_ark_ui_react.DatePicker.ClearTrigger, "clearTrigger", { baseComponent: true });
74
+ const DatePickerRoot = withProvider(_ark_ui_react_date_picker.DatePicker.Root, "root", { baseComponent: true });
75
+ const DatePickerClearTrigger = withContext(_ark_ui_react_date_picker.DatePicker.ClearTrigger, "clearTrigger", { baseComponent: true });
76
76
  const DatePickerContent = (0, react.forwardRef)((props, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DatePickerPositioner, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DatePickerStandaloneContent, {
77
77
  ...props,
78
78
  ref
79
79
  }) }));
80
- const DatePickerStandaloneContent = withContext(_ark_ui_react.DatePicker.Content, "content", { baseComponent: true });
81
- const DatePickerControl = withContext(_ark_ui_react.DatePicker.Control, "control", { baseComponent: true });
82
- const DatePickerInput = withContext(_ark_ui_react.DatePicker.Input, "input", { baseComponent: true });
83
- const InternalDatePickerLabel = withContext(_ark_ui_react.DatePicker.Label, "label");
80
+ const DatePickerStandaloneContent = withContext(_ark_ui_react_date_picker.DatePicker.Content, "content", { baseComponent: true });
81
+ const DatePickerControl = withContext(_ark_ui_react_date_picker.DatePicker.Control, "control", { baseComponent: true });
82
+ const DatePickerInput = withContext(_ark_ui_react_date_picker.DatePicker.Input, "input", { baseComponent: true });
83
+ const InternalDatePickerLabel = withContext(_ark_ui_react_date_picker.DatePicker.Label, "label");
84
84
  const DatePickerLabel = ({ textStyle = "label.medium", fontWeight = "bold", ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalDatePickerLabel, {
85
85
  asChild: true,
86
86
  children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Label.Label, {
@@ -89,24 +89,24 @@ const DatePickerLabel = ({ textStyle = "label.medium", fontWeight = "bold", ...p
89
89
  ...props
90
90
  })
91
91
  });
92
- const DatePickerMonthSelect = withContext(_ark_ui_react.DatePicker.MonthSelect, "monthSelect", { baseComponent: true });
93
- const DatePickerNextTrigger = withContext(_ark_ui_react.DatePicker.NextTrigger, "nextTrigger", { baseComponent: true });
94
- const DatePickerPositioner = withContext(_ark_ui_react.DatePicker.Positioner, "positioner", { baseComponent: true });
95
- const DatePickerPresetTrigger = withContext(_ark_ui_react.DatePicker.PresetTrigger, "presetTrigger", { baseComponent: true });
96
- const DatePickerPrevTrigger = withContext(_ark_ui_react.DatePicker.PrevTrigger, "prevTrigger", { baseComponent: true });
97
- const DatePickerRangeText = withContext(_ark_ui_react.DatePicker.RangeText, "rangeText", { baseComponent: true });
98
- const DatePickerTableBody = withContext(_ark_ui_react.DatePicker.TableBody, "tableBody", { baseComponent: true });
99
- const DatePickerTableCell = withContext(_ark_ui_react.DatePicker.TableCell, "tableCell", { baseComponent: true });
100
- const DatePickerTableCellTrigger = withContext(_ark_ui_react.DatePicker.TableCellTrigger, "tableCellTrigger", { baseComponent: true });
101
- const DatePickerTableHead = withContext(_ark_ui_react.DatePicker.TableHead, "tableHead", { baseComponent: true });
102
- const DatePickerTableHeader = withContext(_ark_ui_react.DatePicker.TableHeader, "tableHeader", { baseComponent: true });
103
- const DatePickerTable = withContext(_ark_ui_react.DatePicker.Table, "table", { baseComponent: true });
104
- const DatePickerTableRow = withContext(_ark_ui_react.DatePicker.TableRow, "tableRow", { baseComponent: true });
105
- const DatePickerTrigger = withContext(_ark_ui_react.DatePicker.Trigger, "trigger", { baseComponent: true });
106
- const DatePickerViewControl = withContext(_ark_ui_react.DatePicker.ViewControl, "viewControl", { baseComponent: true });
107
- const DatePickerView = withContext(_ark_ui_react.DatePicker.View, "view", { baseComponent: true });
108
- const DatePickerViewTrigger = withContext(_ark_ui_react.DatePicker.ViewTrigger, "viewTrigger", { baseComponent: true });
109
- const DatePickerYearSelect = withContext(_ark_ui_react.DatePicker.YearSelect, "yearSelect", { baseComponent: true });
92
+ const DatePickerMonthSelect = withContext(_ark_ui_react_date_picker.DatePicker.MonthSelect, "monthSelect", { baseComponent: true });
93
+ const DatePickerNextTrigger = withContext(_ark_ui_react_date_picker.DatePicker.NextTrigger, "nextTrigger", { baseComponent: true });
94
+ const DatePickerPositioner = withContext(_ark_ui_react_date_picker.DatePicker.Positioner, "positioner", { baseComponent: true });
95
+ const DatePickerPresetTrigger = withContext(_ark_ui_react_date_picker.DatePicker.PresetTrigger, "presetTrigger", { baseComponent: true });
96
+ const DatePickerPrevTrigger = withContext(_ark_ui_react_date_picker.DatePicker.PrevTrigger, "prevTrigger", { baseComponent: true });
97
+ const DatePickerRangeText = withContext(_ark_ui_react_date_picker.DatePicker.RangeText, "rangeText", { baseComponent: true });
98
+ const DatePickerTableBody = withContext(_ark_ui_react_date_picker.DatePicker.TableBody, "tableBody", { baseComponent: true });
99
+ const DatePickerTableCell = withContext(_ark_ui_react_date_picker.DatePicker.TableCell, "tableCell", { baseComponent: true });
100
+ const DatePickerTableCellTrigger = withContext(_ark_ui_react_date_picker.DatePicker.TableCellTrigger, "tableCellTrigger", { baseComponent: true });
101
+ const DatePickerTableHead = withContext(_ark_ui_react_date_picker.DatePicker.TableHead, "tableHead", { baseComponent: true });
102
+ const DatePickerTableHeader = withContext(_ark_ui_react_date_picker.DatePicker.TableHeader, "tableHeader", { baseComponent: true });
103
+ const DatePickerTable = withContext(_ark_ui_react_date_picker.DatePicker.Table, "table", { baseComponent: true });
104
+ const DatePickerTableRow = withContext(_ark_ui_react_date_picker.DatePicker.TableRow, "tableRow", { baseComponent: true });
105
+ const DatePickerTrigger = withContext(_ark_ui_react_date_picker.DatePicker.Trigger, "trigger", { baseComponent: true });
106
+ const DatePickerViewControl = withContext(_ark_ui_react_date_picker.DatePicker.ViewControl, "viewControl", { baseComponent: true });
107
+ const DatePickerView = withContext(_ark_ui_react_date_picker.DatePicker.View, "view", { baseComponent: true });
108
+ const DatePickerViewTrigger = withContext(_ark_ui_react_date_picker.DatePicker.ViewTrigger, "viewTrigger", { baseComponent: true });
109
+ const DatePickerYearSelect = withContext(_ark_ui_react_date_picker.DatePicker.YearSelect, "yearSelect", { baseComponent: true });
110
110
  //#endregion
111
111
  exports.DatePickerClearTrigger = DatePickerClearTrigger;
112
112
  exports.DatePickerContent = DatePickerContent;
@@ -1 +1 @@
1
- {"version":3,"file":"DatePicker.js","names":["datePickerAnatomy","DatePicker","Label"],"sources":["../src/DatePicker.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { DatePicker, datePickerAnatomy } from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext, type StyledProps } from \"@ndla/styled-system/jsx\";\nimport { forwardRef, type RefAttributes } from \"react\";\nimport { Label } from \"./Label\";\nimport type { TextProps } from \"./Text\";\n\nconst datePickerRecipe = sva({\n slots: datePickerAnatomy.keys(),\n base: {\n root: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xsmall\",\n },\n content: {\n background: \"surface.default\",\n borderRadius: \"xsmall\",\n boxShadow: \"large\",\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xsmall\",\n padding: \"xsmall\",\n zIndex: \"dropdown\",\n _open: {\n animation: \"fade-shift-in 0.25s ease-in-out\",\n },\n _closed: {\n animation: \"fade-shift-out 0.25s ease-in-out\",\n },\n },\n control: {\n display: \"flex\",\n width: \"fit-content\",\n gap: \"xsmall\",\n },\n label: {},\n tableHeader: {},\n viewControl: {\n display: \"flex\",\n gap: \"5xsmall\",\n justifyContent: \"space-between\",\n },\n table: {\n width: \"100%\",\n borderCollapse: \"separate\",\n borderSpacing: \"5xsmall\",\n margin: \"-5xsmall\",\n },\n tableCell: {\n textAlign: \"center\",\n },\n tableCellTrigger: {\n width: \"100%\",\n \"&[data-today]\": {\n _before: {\n content: \"'-'\",\n color: \"stroke.default\",\n position: \"absolute\",\n marginBlockStart: \"medium\",\n },\n },\n \"&[data-outside-range]\": {\n color: \"text.subtle\",\n fontWeight: \"normal\",\n },\n },\n view: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xsmall\",\n },\n },\n});\nconst { withProvider, withContext } = createStyleContext(datePickerRecipe);\n\nexport interface DatePickerRootProps extends DatePicker.RootProps, StyledProps {\n translations: DatePicker.RootProps[\"translations\"];\n locale: DatePicker.RootProps[\"locale\"];\n}\n\nexport const DatePickerRoot = withProvider(DatePicker.Root, \"root\", { baseComponent: true });\n\nexport const DatePickerClearTrigger = withContext(DatePicker.ClearTrigger, \"clearTrigger\", {\n baseComponent: true,\n});\n\ninterface DatePickerContentProps extends DatePicker.ContentProps, StyledProps {}\n\nexport const DatePickerContent = forwardRef<HTMLDivElement, DatePickerContentProps>((props, ref) => (\n <DatePickerPositioner>\n <DatePickerStandaloneContent {...props} ref={ref} />\n </DatePickerPositioner>\n));\n\nexport const DatePickerStandaloneContent = withContext(DatePicker.Content, \"content\", { baseComponent: true });\n\nexport const DatePickerControl = withContext(DatePicker.Control, \"control\", { baseComponent: true });\n\nexport const DatePickerInput = withContext(DatePicker.Input, \"input\", { baseComponent: true });\n\ninterface DatePickerLabelProps\n extends Omit<DatePicker.LabelProps, \"color\">, StyledProps, TextProps, RefAttributes<HTMLLabelElement> {}\n\nconst InternalDatePickerLabel = withContext(DatePicker.Label, \"label\");\n\nexport const DatePickerLabel = ({\n textStyle = \"label.medium\",\n fontWeight = \"bold\",\n ...props\n}: DatePickerLabelProps) => (\n <InternalDatePickerLabel asChild>\n <Label textStyle={textStyle} fontWeight={fontWeight} {...props} />\n </InternalDatePickerLabel>\n);\n\nexport const DatePickerMonthSelect = withContext(DatePicker.MonthSelect, \"monthSelect\", { baseComponent: true });\n\ninterface DatePickerNextTrigger extends DatePicker.NextTriggerProps, StyledProps {}\n\nexport const DatePickerNextTrigger = withContext(DatePicker.NextTrigger, \"nextTrigger\", { baseComponent: true });\n\nexport const DatePickerPositioner = withContext(DatePicker.Positioner, \"positioner\", { baseComponent: true });\n\nexport const DatePickerPresetTrigger = withContext(DatePicker.PresetTrigger, \"presetTrigger\", { baseComponent: true });\n\nexport const DatePickerPrevTrigger = withContext(DatePicker.PrevTrigger, \"prevTrigger\", { baseComponent: true });\n\nexport const DatePickerRangeText = withContext(DatePicker.RangeText, \"rangeText\", { baseComponent: true });\n\nexport const DatePickerTableBody = withContext(DatePicker.TableBody, \"tableBody\", { baseComponent: true });\n\nexport const DatePickerTableCell = withContext(DatePicker.TableCell, \"tableCell\", { baseComponent: true });\n\nexport const DatePickerTableCellTrigger = withContext(DatePicker.TableCellTrigger, \"tableCellTrigger\", {\n baseComponent: true,\n});\n\nexport const DatePickerTableHead = withContext(DatePicker.TableHead, \"tableHead\", { baseComponent: true });\n\nexport const DatePickerTableHeader = withContext(DatePicker.TableHeader, \"tableHeader\", { baseComponent: true });\n\nexport const DatePickerTable = withContext(DatePicker.Table, \"table\", { baseComponent: true });\n\nexport const DatePickerTableRow = withContext(DatePicker.TableRow, \"tableRow\", { baseComponent: true });\n\nexport const DatePickerTrigger = withContext(DatePicker.Trigger, \"trigger\", { baseComponent: true });\n\nexport const DatePickerViewControl = withContext(DatePicker.ViewControl, \"viewControl\", { baseComponent: true });\n\nexport const DatePickerView = withContext(DatePicker.View, \"view\", { baseComponent: true });\n\nexport const DatePickerViewTrigger = withContext(DatePicker.ViewTrigger, \"viewTrigger\", { baseComponent: true });\n\nexport const DatePickerYearSelect = withContext(DatePicker.YearSelect, \"yearSelect\", { baseComponent: true });\n\nexport { DatePickerContext } from \"@ark-ui/react\";\n"],"mappings":"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"}
1
+ {"version":3,"file":"DatePicker.js","names":["datePickerAnatomy","DatePicker","Label"],"sources":["../src/DatePicker.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { DatePicker, datePickerAnatomy } from \"@ark-ui/react/date-picker\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext, type StyledProps } from \"@ndla/styled-system/jsx\";\nimport { forwardRef, type RefAttributes } from \"react\";\nimport { Label } from \"./Label\";\nimport type { TextProps } from \"./Text\";\n\nconst datePickerRecipe = sva({\n slots: datePickerAnatomy.keys(),\n base: {\n root: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xsmall\",\n },\n content: {\n background: \"surface.default\",\n borderRadius: \"xsmall\",\n boxShadow: \"large\",\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xsmall\",\n padding: \"xsmall\",\n zIndex: \"dropdown\",\n _open: {\n animation: \"fade-shift-in 0.25s ease-in-out\",\n },\n _closed: {\n animation: \"fade-shift-out 0.25s ease-in-out\",\n },\n },\n control: {\n display: \"flex\",\n width: \"fit-content\",\n gap: \"xsmall\",\n },\n label: {},\n tableHeader: {},\n viewControl: {\n display: \"flex\",\n gap: \"5xsmall\",\n justifyContent: \"space-between\",\n },\n table: {\n width: \"100%\",\n borderCollapse: \"separate\",\n borderSpacing: \"5xsmall\",\n margin: \"-5xsmall\",\n },\n tableCell: {\n textAlign: \"center\",\n },\n tableCellTrigger: {\n width: \"100%\",\n \"&[data-today]\": {\n _before: {\n content: \"'-'\",\n color: \"stroke.default\",\n position: \"absolute\",\n marginBlockStart: \"medium\",\n },\n },\n \"&[data-outside-range]\": {\n color: \"text.subtle\",\n fontWeight: \"normal\",\n },\n },\n view: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xsmall\",\n },\n },\n});\nconst { withProvider, withContext } = createStyleContext(datePickerRecipe);\n\nexport interface DatePickerRootProps extends DatePicker.RootProps, StyledProps {\n translations: DatePicker.RootProps[\"translations\"];\n locale: DatePicker.RootProps[\"locale\"];\n}\n\nexport const DatePickerRoot = withProvider(DatePicker.Root, \"root\", { baseComponent: true });\n\nexport const DatePickerClearTrigger = withContext(DatePicker.ClearTrigger, \"clearTrigger\", {\n baseComponent: true,\n});\n\ninterface DatePickerContentProps extends DatePicker.ContentProps, StyledProps {}\n\nexport const DatePickerContent = forwardRef<HTMLDivElement, DatePickerContentProps>((props, ref) => (\n <DatePickerPositioner>\n <DatePickerStandaloneContent {...props} ref={ref} />\n </DatePickerPositioner>\n));\n\nexport const DatePickerStandaloneContent = withContext(DatePicker.Content, \"content\", { baseComponent: true });\n\nexport const DatePickerControl = withContext(DatePicker.Control, \"control\", { baseComponent: true });\n\nexport const DatePickerInput = withContext(DatePicker.Input, \"input\", { baseComponent: true });\n\ninterface DatePickerLabelProps\n extends Omit<DatePicker.LabelProps, \"color\">, StyledProps, TextProps, RefAttributes<HTMLLabelElement> {}\n\nconst InternalDatePickerLabel = withContext(DatePicker.Label, \"label\");\n\nexport const DatePickerLabel = ({\n textStyle = \"label.medium\",\n fontWeight = \"bold\",\n ...props\n}: DatePickerLabelProps) => (\n <InternalDatePickerLabel asChild>\n <Label textStyle={textStyle} fontWeight={fontWeight} {...props} />\n </InternalDatePickerLabel>\n);\n\nexport const DatePickerMonthSelect = withContext(DatePicker.MonthSelect, \"monthSelect\", { baseComponent: true });\n\ninterface DatePickerNextTrigger extends DatePicker.NextTriggerProps, StyledProps {}\n\nexport const DatePickerNextTrigger = withContext(DatePicker.NextTrigger, \"nextTrigger\", { baseComponent: true });\n\nexport const DatePickerPositioner = withContext(DatePicker.Positioner, \"positioner\", { baseComponent: true });\n\nexport const DatePickerPresetTrigger = withContext(DatePicker.PresetTrigger, \"presetTrigger\", { baseComponent: true });\n\nexport const DatePickerPrevTrigger = withContext(DatePicker.PrevTrigger, \"prevTrigger\", { baseComponent: true });\n\nexport const DatePickerRangeText = withContext(DatePicker.RangeText, \"rangeText\", { baseComponent: true });\n\nexport const DatePickerTableBody = withContext(DatePicker.TableBody, \"tableBody\", { baseComponent: true });\n\nexport const DatePickerTableCell = withContext(DatePicker.TableCell, \"tableCell\", { baseComponent: true });\n\nexport const DatePickerTableCellTrigger = withContext(DatePicker.TableCellTrigger, \"tableCellTrigger\", {\n baseComponent: true,\n});\n\nexport const DatePickerTableHead = withContext(DatePicker.TableHead, \"tableHead\", { baseComponent: true });\n\nexport const DatePickerTableHeader = withContext(DatePicker.TableHeader, \"tableHeader\", { baseComponent: true });\n\nexport const DatePickerTable = withContext(DatePicker.Table, \"table\", { baseComponent: true });\n\nexport const DatePickerTableRow = withContext(DatePicker.TableRow, \"tableRow\", { baseComponent: true });\n\nexport const DatePickerTrigger = withContext(DatePicker.Trigger, \"trigger\", { baseComponent: true });\n\nexport const DatePickerViewControl = withContext(DatePicker.ViewControl, \"viewControl\", { baseComponent: true });\n\nexport const DatePickerView = withContext(DatePicker.View, \"view\", { baseComponent: true });\n\nexport const DatePickerViewTrigger = withContext(DatePicker.ViewTrigger, \"viewTrigger\", { baseComponent: true });\n\nexport const DatePickerYearSelect = withContext(DatePicker.YearSelect, \"yearSelect\", { baseComponent: true });\n\nexport { DatePickerContext } from \"@ark-ui/react/date-picker\";\n"],"mappings":"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"}
package/lib/Dialog.d.ts CHANGED
@@ -5,7 +5,7 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  *
7
7
  */
8
- import { Dialog } from "@ark-ui/react";
8
+ import { Dialog } from "@ark-ui/react/dialog";
9
9
  import { type RecipeVariantProps } from "@ndla/styled-system/css";
10
10
  import type { StyledProps } from "@ndla/styled-system/types";
11
11
  import { type RefAttributes } from "react";
@@ -334,5 +334,5 @@ export declare const DialogRootProvider: import("@ndla/styled-system/jsx").Style
334
334
  };
335
335
  };
336
336
  }>>;
337
- export declare const useDialog: (props?: import("@ark-ui/react").UseDialogProps) => import("@ark-ui/react").UseDialogReturn;
337
+ export declare const useDialog: (props?: import("@ark-ui/react/dialog").UseDialogProps) => import("@ark-ui/react/dialog").UseDialogReturn;
338
338
  export {};
package/lib/Dialog.js CHANGED
@@ -1,9 +1,9 @@
1
1
  const require_Text = require("./Text.js");
2
- let _ark_ui_react = require("@ark-ui/react");
3
2
  let _ndla_styled_system_css = require("@ndla/styled-system/css");
4
3
  let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
5
4
  let react_jsx_runtime = require("react/jsx-runtime");
6
5
  let react = require("react");
6
+ let _ark_ui_react_dialog = require("@ark-ui/react/dialog");
7
7
  //#region src/Dialog.tsx
8
8
  /**
9
9
  * Copyright (c) 2024-present, NDLA.
@@ -13,7 +13,7 @@ let react = require("react");
13
13
  *
14
14
  */
15
15
  const { withRootProvider, withContext } = (0, _ndla_styled_system_jsx.createStyleContext)((0, _ndla_styled_system_css.sva)({
16
- slots: _ark_ui_react.dialogAnatomy.keys(),
16
+ slots: _ark_ui_react_dialog.dialogAnatomy.keys(),
17
17
  base: {
18
18
  backdrop: {
19
19
  position: "fixed",
@@ -215,20 +215,20 @@ const { withRootProvider, withContext } = (0, _ndla_styled_system_jsx.createStyl
215
215
  }
216
216
  }
217
217
  }));
218
- const InternalDialogRoot = withRootProvider(_ark_ui_react.Dialog.Root);
218
+ const InternalDialogRoot = withRootProvider(_ark_ui_react_dialog.Dialog.Root);
219
219
  const DialogRoot = ({ lazyMount = true, unmountOnExit = true, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalDialogRoot, {
220
220
  lazyMount,
221
221
  unmountOnExit,
222
222
  ...props
223
223
  });
224
- const DialogBackdrop = withContext(_ark_ui_react.Dialog.Backdrop, "backdrop", { baseComponent: true });
225
- const DialogStandaloneContent = withContext(_ark_ui_react.Dialog.Content, "content", { baseComponent: true });
226
- const DialogPositioner = withContext(_ark_ui_react.Dialog.Positioner, "positioner", { baseComponent: true });
224
+ const DialogBackdrop = withContext(_ark_ui_react_dialog.Dialog.Backdrop, "backdrop", { baseComponent: true });
225
+ const DialogStandaloneContent = withContext(_ark_ui_react_dialog.Dialog.Content, "content", { baseComponent: true });
226
+ const DialogPositioner = withContext(_ark_ui_react_dialog.Dialog.Positioner, "positioner", { baseComponent: true });
227
227
  const DialogContent = (0, react.forwardRef)((props, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogBackdrop, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogPositioner, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogStandaloneContent, {
228
228
  ref,
229
229
  ...props
230
230
  }) })] }));
231
- const InternalDialogDescription = withContext(_ark_ui_react.Dialog.Description, "description");
231
+ const InternalDialogDescription = withContext(_ark_ui_react_dialog.Dialog.Description, "description");
232
232
  const DialogDescription = ({ textStyle = "body.large", children, ...rest }) => {
233
233
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalDialogDescription, {
234
234
  asChild: true,
@@ -239,7 +239,7 @@ const DialogDescription = ({ textStyle = "body.large", children, ...rest }) => {
239
239
  })
240
240
  });
241
241
  };
242
- const InternalDialogTitle = withContext(_ark_ui_react.Dialog.Title, "title");
242
+ const InternalDialogTitle = withContext(_ark_ui_react_dialog.Dialog.Title, "title");
243
243
  const DialogTitle = ({ textStyle = "title.medium", children, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalDialogTitle, {
244
244
  asChild: true,
245
245
  children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Heading, {
@@ -248,8 +248,8 @@ const DialogTitle = ({ textStyle = "title.medium", children, ...rest }) => /* @_
248
248
  children
249
249
  })
250
250
  });
251
- const DialogTrigger = withContext(_ark_ui_react.Dialog.Trigger, "trigger", { baseComponent: true });
252
- const DialogCloseTrigger = withContext(_ark_ui_react.Dialog.CloseTrigger, "closeTrigger", { baseComponent: true });
251
+ const DialogTrigger = withContext(_ark_ui_react_dialog.Dialog.Trigger, "trigger", { baseComponent: true });
252
+ const DialogCloseTrigger = withContext(_ark_ui_react_dialog.Dialog.CloseTrigger, "closeTrigger", { baseComponent: true });
253
253
  const DialogHeader = (0, _ndla_styled_system_jsx.styled)("div", { base: {
254
254
  display: "flex",
255
255
  paddingInline: "medium",
@@ -275,8 +275,8 @@ const DialogFooter = (0, _ndla_styled_system_jsx.styled)("div", { base: {
275
275
  paddingBlockStart: "small",
276
276
  paddingBlockEnd: "medium"
277
277
  } });
278
- const DialogRootProvider = withRootProvider(_ark_ui_react.Dialog.RootProvider);
279
- const useDialog = _ark_ui_react.useDialog;
278
+ const DialogRootProvider = withRootProvider(_ark_ui_react_dialog.Dialog.RootProvider);
279
+ const useDialog = _ark_ui_react_dialog.useDialog;
280
280
  //#endregion
281
281
  exports.DialogBackdrop = DialogBackdrop;
282
282
  exports.DialogBody = DialogBody;
package/lib/Dialog.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Dialog.js","names":["dialogAnatomy","Dialog","Text","Heading","_useDialog"],"sources":["../src/Dialog.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Dialog, dialogAnatomy, useDialog as _useDialog } from \"@ark-ui/react\";\nimport { type RecipeVariantProps, sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext, styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef, type RefAttributes } from \"react\";\nimport { Heading, Text, type TextProps } from \"./Text\";\n\nconst dialogRecipe = sva({\n slots: dialogAnatomy.keys(),\n base: {\n backdrop: {\n position: \"fixed\",\n height: \"100vh\",\n width: \"100vw\",\n left: \"0\",\n top: \"0\",\n // TODO: Consider if this should be a token. It's probably consistent enough between dark and light mode to be a token.\n background: \"rgba(1, 1, 1, 0.3)\",\n _open: {\n animation: \"backdrop-in\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n _closed: {\n animation: \"backdrop-out\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n },\n positioner: {\n position: \"fixed\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n overflow: \"hidden\",\n left: \"0\",\n top: \"0\",\n width: \"100vw\",\n height: \"100dvh\",\n },\n content: {\n \"--margin\": \"token(sizes.medium)\",\n position: \"relative\",\n background: \"surface.default\",\n boxShadow: \"xlarge\",\n height: \"min-content\",\n maxWidth: \"95%\",\n maxHeight: \"95%\",\n margin: \"auto\",\n overflowY: \"auto\",\n borderRadius: { base: \"sharp\", tablet: \"small\" },\n paddingBlockStart: \"env(safe-area-inset-top)\",\n paddingBlockEnd: \"env(safe-area-inset-bottom)\",\n paddingInlineStart: \"env(safe-area-inset-left)\",\n paddingInlineEnd: \"env(safe-area-inset-right)\",\n tabletDown: {\n \"--margin\": \"0px\",\n minWidth: \"100%\",\n minHeight: \"100%\",\n },\n },\n },\n defaultVariants: {\n size: \"medium\",\n position: \"center\",\n variant: \"dialog\",\n context: \"dialog\",\n },\n compoundVariants: [\n {\n variant: \"drawer\",\n position: \"left\",\n css: {\n content: {\n minHeight: \"100%\",\n maxHeight: \"100%\",\n width: \"var(--size)\",\n _open: {\n animation: \"drawer-in-left\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n _closed: {\n animation: \"drawer-out-left\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n },\n },\n },\n {\n variant: \"drawer\",\n position: \"right\",\n css: {\n content: {\n minHeight: \"100%\",\n maxHeight: \"100%\",\n width: \"var(--size)\",\n _open: {\n animation: \"drawer-in-right\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n _closed: {\n animation: \"drawer-out-right\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n },\n },\n },\n {\n variant: \"drawer\",\n position: \"top\",\n css: {\n content: {\n minWidth: \"100%\",\n maxWidth: \"100%\",\n height: \"var(--size)\",\n _open: {\n animation: \"drawer-in-top\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n _closed: {\n animation: \"drawer-out-top\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n },\n },\n },\n {\n variant: \"drawer\",\n position: \"bottom\",\n css: {\n content: {\n minWidth: \"100%\",\n maxWidth: \"100%\",\n height: \"var(--size)\",\n _open: {\n animation: \"drawer-in-bottom\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n _closed: {\n animation: \"drawer-out-bottom\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n },\n },\n },\n {\n variant: \"drawer\",\n size: \"xsmall\",\n css: {\n content: {\n \"--size\": \"sizes.surface.3xsmall\",\n },\n },\n },\n {\n variant: \"drawer\",\n size: \"small\",\n css: {\n content: {\n \"--size\": \"sizes.surface.xsmall\",\n },\n },\n },\n {\n variant: \"drawer\",\n size: \"medium\",\n css: {\n content: {\n \"--size\": \"sizes.surface.medium\",\n },\n },\n },\n {\n variant: \"drawer\",\n size: \"large\",\n css: {\n content: {\n \"--size\": \"sizes.surface.xlarge\",\n },\n },\n },\n ],\n variants: {\n context: {\n dialog: {\n positioner: {\n zIndex: \"modal\",\n },\n backdrop: {\n zIndex: \"overlay\",\n },\n },\n alert: {\n positioner: {\n zIndex: \"alertModal\",\n },\n backdrop: {\n zIndex: \"alertModalOverlay\",\n },\n },\n },\n variant: {\n drawer: {\n content: {\n \"--margin\": \"0px\",\n borderRadius: { base: \"sharp\", tablet: \"sharp\" },\n },\n },\n dialog: {\n content: {\n width: \"var(--size)\",\n _open: {\n animation: \"dialog-in\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n _closed: {\n animation: \"dialog-out\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n },\n },\n },\n position: {\n left: {\n content: {\n marginInlineStart: \"var(--margin)\",\n },\n },\n center: {},\n right: {\n content: {\n marginInlineEnd: \"var(--margin)\",\n },\n },\n bottom: {\n content: {\n marginBlockEnd: \"var(--margin)\",\n },\n },\n top: {\n content: {\n marginBlockStart: \"var(--margin)\",\n },\n },\n },\n size: {\n full: {\n content: {\n \"--margin\": \"0px\",\n minHeight: \"100%\",\n minWidth: \"100%\",\n borderRadius: \"sharp\",\n },\n },\n xsmall: {\n content: {\n \"--size\": \"sizes.surface.xsmall\",\n },\n },\n small: {\n content: {\n \"--size\": \"sizes.surface.medium\",\n },\n },\n medium: {\n content: {\n \"--size\": \"sizes.surface.xlarge\",\n },\n },\n large: {\n content: {\n \"--size\": \"sizes.surface.4xlarge\",\n },\n },\n },\n },\n});\n\nconst { withRootProvider, withContext } = createStyleContext(dialogRecipe);\n\nexport type DialogVariantProps = NonNullable<RecipeVariantProps<typeof dialogRecipe>>;\n\nexport interface DialogRootProps extends Dialog.RootProps, DialogVariantProps {}\n\nexport const InternalDialogRoot = withRootProvider(Dialog.Root);\n\nexport const DialogRoot = ({ lazyMount = true, unmountOnExit = true, ...props }: DialogRootProps) => (\n <InternalDialogRoot lazyMount={lazyMount} unmountOnExit={unmountOnExit} {...props} />\n);\n\nexport const DialogBackdrop = withContext(Dialog.Backdrop, \"backdrop\", { baseComponent: true });\n\nexport const DialogStandaloneContent = withContext(Dialog.Content, \"content\", { baseComponent: true });\n\nexport const DialogPositioner = withContext(Dialog.Positioner, \"positioner\", { baseComponent: true });\n\ninterface DialogContentProps extends Dialog.ContentProps, StyledProps {}\n\nexport const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>((props, ref) => (\n <>\n <DialogBackdrop />\n <DialogPositioner>\n <DialogStandaloneContent ref={ref} {...props} />\n </DialogPositioner>\n </>\n));\n\nconst InternalDialogDescription = withContext(Dialog.Description, \"description\");\n\ninterface DialogDescriptionProps\n extends Omit<Dialog.DescriptionProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLParagraphElement> {}\n\nexport const DialogDescription = ({ textStyle = \"body.large\", children, ...rest }: DialogDescriptionProps) => {\n return (\n <InternalDialogDescription asChild>\n <Text textStyle={textStyle} {...rest}>\n {children}\n </Text>\n </InternalDialogDescription>\n );\n};\n\nconst InternalDialogTitle = withContext(Dialog.Title, \"title\");\n\ninterface DialogTitleProps\n extends Omit<Dialog.TitleProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLHeadingElement> {}\n\nexport const DialogTitle = ({ textStyle = \"title.medium\", children, ...rest }: DialogTitleProps) => (\n <InternalDialogTitle asChild>\n <Heading textStyle={textStyle} {...rest}>\n {children}\n </Heading>\n </InternalDialogTitle>\n);\n\nexport const DialogTrigger = withContext(Dialog.Trigger, \"trigger\", { baseComponent: true });\n\nexport const DialogCloseTrigger = withContext(Dialog.CloseTrigger, \"closeTrigger\", { baseComponent: true });\n\nexport const DialogHeader = styled(\"div\", {\n base: {\n display: \"flex\",\n paddingInline: \"medium\",\n paddingBlockStart: \"medium\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n gap: \"xsmall\",\n },\n});\n\nexport const DialogBody = styled(\"div\", {\n base: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xsmall\",\n paddingInline: \"medium\",\n paddingBlockStart: \"small\",\n paddingBlockEnd: \"medium\",\n },\n});\n\nexport const DialogFooter = styled(\"div\", {\n base: {\n display: \"flex\",\n gap: \"3xsmall\",\n alignItems: \"center\",\n justifyContent: \"flex-end\",\n paddingInline: \"medium\",\n paddingBlockStart: \"small\",\n paddingBlockEnd: \"medium\",\n },\n});\n\nexport const DialogRootProvider = withRootProvider(Dialog.RootProvider);\n\nexport const useDialog = _useDialog;\n"],"mappings":";;;;;;;;;;;;;;AAoTA,MAAM,EAAE,kBAAkB,iBAAA,GAAA,wBAAA,qBAAA,GAAA,wBAAA,KArSD;CACvB,OAAOA,cAAAA,cAAc,MAAM;CAC3B,MAAM;EACJ,UAAU;GACR,UAAU;GACV,QAAQ;GACR,OAAO;GACP,MAAM;GACN,KAAK;GAEL,YAAY;GACZ,OAAO;IACL,WAAW;IACX,eAAe,EACb,WAAW,QACZ;IACF;GACD,SAAS;IACP,WAAW;IACX,eAAe,EACb,WAAW,QACZ;IACF;GACF;EACD,YAAY;GACV,UAAU;GACV,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,UAAU;GACV,MAAM;GACN,KAAK;GACL,OAAO;GACP,QAAQ;GACT;EACD,SAAS;GACP,YAAY;GACZ,UAAU;GACV,YAAY;GACZ,WAAW;GACX,QAAQ;GACR,UAAU;GACV,WAAW;GACX,QAAQ;GACR,WAAW;GACX,cAAc;IAAE,MAAM;IAAS,QAAQ;IAAS;GAChD,mBAAmB;GACnB,iBAAiB;GACjB,oBAAoB;GACpB,kBAAkB;GAClB,YAAY;IACV,YAAY;IACZ,UAAU;IACV,WAAW;IACZ;GACF;EACF;CACD,iBAAiB;EACf,MAAM;EACN,UAAU;EACV,SAAS;EACT,SAAS;EACV;CACD,kBAAkB;EAChB;GACE,SAAS;GACT,UAAU;GACV,KAAK,EACH,SAAS;IACP,WAAW;IACX,WAAW;IACX,OAAO;IACP,OAAO;KACL,WAAW;KACX,eAAe,EACb,WAAW,QACZ;KACF;IACD,SAAS;KACP,WAAW;KACX,eAAe,EACb,WAAW,QACZ;KACF;IACF,EACF;GACF;EACD;GACE,SAAS;GACT,UAAU;GACV,KAAK,EACH,SAAS;IACP,WAAW;IACX,WAAW;IACX,OAAO;IACP,OAAO;KACL,WAAW;KACX,eAAe,EACb,WAAW,QACZ;KACF;IACD,SAAS;KACP,WAAW;KACX,eAAe,EACb,WAAW,QACZ;KACF;IACF,EACF;GACF;EACD;GACE,SAAS;GACT,UAAU;GACV,KAAK,EACH,SAAS;IACP,UAAU;IACV,UAAU;IACV,QAAQ;IACR,OAAO;KACL,WAAW;KACX,eAAe,EACb,WAAW,QACZ;KACF;IACD,SAAS;KACP,WAAW;KACX,eAAe,EACb,WAAW,QACZ;KACF;IACF,EACF;GACF;EACD;GACE,SAAS;GACT,UAAU;GACV,KAAK,EACH,SAAS;IACP,UAAU;IACV,UAAU;IACV,QAAQ;IACR,OAAO;KACL,WAAW;KACX,eAAe,EACb,WAAW,QACZ;KACF;IACD,SAAS;KACP,WAAW;KACX,eAAe,EACb,WAAW,QACZ;KACF;IACF,EACF;GACF;EACD;GACE,SAAS;GACT,MAAM;GACN,KAAK,EACH,SAAS,EACP,UAAU,yBACX,EACF;GACF;EACD;GACE,SAAS;GACT,MAAM;GACN,KAAK,EACH,SAAS,EACP,UAAU,wBACX,EACF;GACF;EACD;GACE,SAAS;GACT,MAAM;GACN,KAAK,EACH,SAAS,EACP,UAAU,wBACX,EACF;GACF;EACD;GACE,SAAS;GACT,MAAM;GACN,KAAK,EACH,SAAS,EACP,UAAU,wBACX,EACF;GACF;EACF;CACD,UAAU;EACR,SAAS;GACP,QAAQ;IACN,YAAY,EACV,QAAQ,SACT;IACD,UAAU,EACR,QAAQ,WACT;IACF;GACD,OAAO;IACL,YAAY,EACV,QAAQ,cACT;IACD,UAAU,EACR,QAAQ,qBACT;IACF;GACF;EACD,SAAS;GACP,QAAQ,EACN,SAAS;IACP,YAAY;IACZ,cAAc;KAAE,MAAM;KAAS,QAAQ;KAAS;IACjD,EACF;GACD,QAAQ,EACN,SAAS;IACP,OAAO;IACP,OAAO;KACL,WAAW;KACX,eAAe,EACb,WAAW,QACZ;KACF;IACD,SAAS;KACP,WAAW;KACX,eAAe,EACb,WAAW,QACZ;KACF;IACF,EACF;GACF;EACD,UAAU;GACR,MAAM,EACJ,SAAS,EACP,mBAAmB,iBACpB,EACF;GACD,QAAQ,EAAE;GACV,OAAO,EACL,SAAS,EACP,iBAAiB,iBAClB,EACF;GACD,QAAQ,EACN,SAAS,EACP,gBAAgB,iBACjB,EACF;GACD,KAAK,EACH,SAAS,EACP,kBAAkB,iBACnB,EACF;GACF;EACD,MAAM;GACJ,MAAM,EACJ,SAAS;IACP,YAAY;IACZ,WAAW;IACX,UAAU;IACV,cAAc;IACf,EACF;GACD,QAAQ,EACN,SAAS,EACP,UAAU,wBACX,EACF;GACD,OAAO,EACL,SAAS,EACP,UAAU,wBACX,EACF;GACD,QAAQ,EACN,SAAS,EACP,UAAU,wBACX,EACF;GACD,OAAO,EACL,SAAS,EACP,UAAU,yBACX,EACF;GACF;EACF;CACF,CAEwE,CAAC;AAM1E,MAAa,qBAAqB,iBAAiBC,cAAAA,OAAO,KAAK;AAE/D,MAAa,cAAc,EAAE,YAAY,MAAM,gBAAgB,MAAM,GAAG,YACtE,iBAAA,GAAA,kBAAA,KAAC,oBAAD;CAA+B;CAA0B;CAAe,GAAI;CAAS,CAAA;AAGvF,MAAa,iBAAiB,YAAYA,cAAAA,OAAO,UAAU,YAAY,EAAE,eAAe,MAAM,CAAC;AAE/F,MAAa,0BAA0B,YAAYA,cAAAA,OAAO,SAAS,WAAW,EAAE,eAAe,MAAM,CAAC;AAEtG,MAAa,mBAAmB,YAAYA,cAAAA,OAAO,YAAY,cAAc,EAAE,eAAe,MAAM,CAAC;AAIrG,MAAa,iBAAA,GAAA,MAAA,aAAgE,OAAO,QAClF,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAC,gBAAD,EAAkB,CAAA,EAClB,iBAAA,GAAA,kBAAA,KAAC,kBAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAC,yBAAD;CAA8B;CAAK,GAAI;CAAS,CAAA,EAC/B,CAAA,CAClB,EAAA,CAAA,CACH;AAEF,MAAM,4BAA4B,YAAYA,cAAAA,OAAO,aAAa,cAAc;AAKhF,MAAa,qBAAqB,EAAE,YAAY,cAAc,UAAU,GAAG,WAAmC;AAC5G,QACE,iBAAA,GAAA,kBAAA,KAAC,2BAAD;EAA2B,SAAA;YACzB,iBAAA,GAAA,kBAAA,KAACC,aAAAA,MAAD;GAAiB;GAAW,GAAI;GAC7B;GACI,CAAA;EACmB,CAAA;;AAIhC,MAAM,sBAAsB,YAAYD,cAAAA,OAAO,OAAO,QAAQ;AAK9D,MAAa,eAAe,EAAE,YAAY,gBAAgB,UAAU,GAAG,WACrE,iBAAA,GAAA,kBAAA,KAAC,qBAAD;CAAqB,SAAA;WACnB,iBAAA,GAAA,kBAAA,KAACE,aAAAA,SAAD;EAAoB;EAAW,GAAI;EAChC;EACO,CAAA;CACU,CAAA;AAGxB,MAAa,gBAAgB,YAAYF,cAAAA,OAAO,SAAS,WAAW,EAAE,eAAe,MAAM,CAAC;AAE5F,MAAa,qBAAqB,YAAYA,cAAAA,OAAO,cAAc,gBAAgB,EAAE,eAAe,MAAM,CAAC;AAE3G,MAAa,gBAAA,GAAA,wBAAA,QAAsB,OAAO,EACxC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,mBAAmB;CACnB,gBAAgB;CAChB,YAAY;CACZ,KAAK;CACN,EACF,CAAC;AAEF,MAAa,cAAA,GAAA,wBAAA,QAAoB,OAAO,EACtC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,eAAe;CACf,mBAAmB;CACnB,iBAAiB;CAClB,EACF,CAAC;AAEF,MAAa,gBAAA,GAAA,wBAAA,QAAsB,OAAO,EACxC,MAAM;CACJ,SAAS;CACT,KAAK;CACL,YAAY;CACZ,gBAAgB;CAChB,eAAe;CACf,mBAAmB;CACnB,iBAAiB;CAClB,EACF,CAAC;AAEF,MAAa,qBAAqB,iBAAiBA,cAAAA,OAAO,aAAa;AAEvE,MAAa,YAAYG,cAAAA"}
1
+ {"version":3,"file":"Dialog.js","names":["dialogAnatomy","Dialog","Text","Heading","_useDialog"],"sources":["../src/Dialog.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Dialog, dialogAnatomy, useDialog as _useDialog } from \"@ark-ui/react/dialog\";\nimport { type RecipeVariantProps, sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext, styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef, type RefAttributes } from \"react\";\nimport { Heading, Text, type TextProps } from \"./Text\";\n\nconst dialogRecipe = sva({\n slots: dialogAnatomy.keys(),\n base: {\n backdrop: {\n position: \"fixed\",\n height: \"100vh\",\n width: \"100vw\",\n left: \"0\",\n top: \"0\",\n // TODO: Consider if this should be a token. It's probably consistent enough between dark and light mode to be a token.\n background: \"rgba(1, 1, 1, 0.3)\",\n _open: {\n animation: \"backdrop-in\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n _closed: {\n animation: \"backdrop-out\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n },\n positioner: {\n position: \"fixed\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n overflow: \"hidden\",\n left: \"0\",\n top: \"0\",\n width: \"100vw\",\n height: \"100dvh\",\n },\n content: {\n \"--margin\": \"token(sizes.medium)\",\n position: \"relative\",\n background: \"surface.default\",\n boxShadow: \"xlarge\",\n height: \"min-content\",\n maxWidth: \"95%\",\n maxHeight: \"95%\",\n margin: \"auto\",\n overflowY: \"auto\",\n borderRadius: { base: \"sharp\", tablet: \"small\" },\n paddingBlockStart: \"env(safe-area-inset-top)\",\n paddingBlockEnd: \"env(safe-area-inset-bottom)\",\n paddingInlineStart: \"env(safe-area-inset-left)\",\n paddingInlineEnd: \"env(safe-area-inset-right)\",\n tabletDown: {\n \"--margin\": \"0px\",\n minWidth: \"100%\",\n minHeight: \"100%\",\n },\n },\n },\n defaultVariants: {\n size: \"medium\",\n position: \"center\",\n variant: \"dialog\",\n context: \"dialog\",\n },\n compoundVariants: [\n {\n variant: \"drawer\",\n position: \"left\",\n css: {\n content: {\n minHeight: \"100%\",\n maxHeight: \"100%\",\n width: \"var(--size)\",\n _open: {\n animation: \"drawer-in-left\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n _closed: {\n animation: \"drawer-out-left\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n },\n },\n },\n {\n variant: \"drawer\",\n position: \"right\",\n css: {\n content: {\n minHeight: \"100%\",\n maxHeight: \"100%\",\n width: \"var(--size)\",\n _open: {\n animation: \"drawer-in-right\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n _closed: {\n animation: \"drawer-out-right\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n },\n },\n },\n {\n variant: \"drawer\",\n position: \"top\",\n css: {\n content: {\n minWidth: \"100%\",\n maxWidth: \"100%\",\n height: \"var(--size)\",\n _open: {\n animation: \"drawer-in-top\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n _closed: {\n animation: \"drawer-out-top\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n },\n },\n },\n {\n variant: \"drawer\",\n position: \"bottom\",\n css: {\n content: {\n minWidth: \"100%\",\n maxWidth: \"100%\",\n height: \"var(--size)\",\n _open: {\n animation: \"drawer-in-bottom\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n _closed: {\n animation: \"drawer-out-bottom\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n },\n },\n },\n {\n variant: \"drawer\",\n size: \"xsmall\",\n css: {\n content: {\n \"--size\": \"sizes.surface.3xsmall\",\n },\n },\n },\n {\n variant: \"drawer\",\n size: \"small\",\n css: {\n content: {\n \"--size\": \"sizes.surface.xsmall\",\n },\n },\n },\n {\n variant: \"drawer\",\n size: \"medium\",\n css: {\n content: {\n \"--size\": \"sizes.surface.medium\",\n },\n },\n },\n {\n variant: \"drawer\",\n size: \"large\",\n css: {\n content: {\n \"--size\": \"sizes.surface.xlarge\",\n },\n },\n },\n ],\n variants: {\n context: {\n dialog: {\n positioner: {\n zIndex: \"modal\",\n },\n backdrop: {\n zIndex: \"overlay\",\n },\n },\n alert: {\n positioner: {\n zIndex: \"alertModal\",\n },\n backdrop: {\n zIndex: \"alertModalOverlay\",\n },\n },\n },\n variant: {\n drawer: {\n content: {\n \"--margin\": \"0px\",\n borderRadius: { base: \"sharp\", tablet: \"sharp\" },\n },\n },\n dialog: {\n content: {\n width: \"var(--size)\",\n _open: {\n animation: \"dialog-in\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n _closed: {\n animation: \"dialog-out\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n },\n },\n },\n position: {\n left: {\n content: {\n marginInlineStart: \"var(--margin)\",\n },\n },\n center: {},\n right: {\n content: {\n marginInlineEnd: \"var(--margin)\",\n },\n },\n bottom: {\n content: {\n marginBlockEnd: \"var(--margin)\",\n },\n },\n top: {\n content: {\n marginBlockStart: \"var(--margin)\",\n },\n },\n },\n size: {\n full: {\n content: {\n \"--margin\": \"0px\",\n minHeight: \"100%\",\n minWidth: \"100%\",\n borderRadius: \"sharp\",\n },\n },\n xsmall: {\n content: {\n \"--size\": \"sizes.surface.xsmall\",\n },\n },\n small: {\n content: {\n \"--size\": \"sizes.surface.medium\",\n },\n },\n medium: {\n content: {\n \"--size\": \"sizes.surface.xlarge\",\n },\n },\n large: {\n content: {\n \"--size\": \"sizes.surface.4xlarge\",\n },\n },\n },\n },\n});\n\nconst { withRootProvider, withContext } = createStyleContext(dialogRecipe);\n\nexport type DialogVariantProps = NonNullable<RecipeVariantProps<typeof dialogRecipe>>;\n\nexport interface DialogRootProps extends Dialog.RootProps, DialogVariantProps {}\n\nexport const InternalDialogRoot = withRootProvider(Dialog.Root);\n\nexport const DialogRoot = ({ lazyMount = true, unmountOnExit = true, ...props }: DialogRootProps) => (\n <InternalDialogRoot lazyMount={lazyMount} unmountOnExit={unmountOnExit} {...props} />\n);\n\nexport const DialogBackdrop = withContext(Dialog.Backdrop, \"backdrop\", { baseComponent: true });\n\nexport const DialogStandaloneContent = withContext(Dialog.Content, \"content\", { baseComponent: true });\n\nexport const DialogPositioner = withContext(Dialog.Positioner, \"positioner\", { baseComponent: true });\n\ninterface DialogContentProps extends Dialog.ContentProps, StyledProps {}\n\nexport const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>((props, ref) => (\n <>\n <DialogBackdrop />\n <DialogPositioner>\n <DialogStandaloneContent ref={ref} {...props} />\n </DialogPositioner>\n </>\n));\n\nconst InternalDialogDescription = withContext(Dialog.Description, \"description\");\n\ninterface DialogDescriptionProps\n extends Omit<Dialog.DescriptionProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLParagraphElement> {}\n\nexport const DialogDescription = ({ textStyle = \"body.large\", children, ...rest }: DialogDescriptionProps) => {\n return (\n <InternalDialogDescription asChild>\n <Text textStyle={textStyle} {...rest}>\n {children}\n </Text>\n </InternalDialogDescription>\n );\n};\n\nconst InternalDialogTitle = withContext(Dialog.Title, \"title\");\n\ninterface DialogTitleProps\n extends Omit<Dialog.TitleProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLHeadingElement> {}\n\nexport const DialogTitle = ({ textStyle = \"title.medium\", children, ...rest }: DialogTitleProps) => (\n <InternalDialogTitle asChild>\n <Heading textStyle={textStyle} {...rest}>\n {children}\n </Heading>\n </InternalDialogTitle>\n);\n\nexport const DialogTrigger = withContext(Dialog.Trigger, \"trigger\", { baseComponent: true });\n\nexport const DialogCloseTrigger = withContext(Dialog.CloseTrigger, \"closeTrigger\", { baseComponent: true });\n\nexport const DialogHeader = styled(\"div\", {\n base: {\n display: \"flex\",\n paddingInline: \"medium\",\n paddingBlockStart: \"medium\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n gap: \"xsmall\",\n },\n});\n\nexport const DialogBody = styled(\"div\", {\n base: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xsmall\",\n paddingInline: \"medium\",\n paddingBlockStart: \"small\",\n paddingBlockEnd: \"medium\",\n },\n});\n\nexport const DialogFooter = styled(\"div\", {\n base: {\n display: \"flex\",\n gap: \"3xsmall\",\n alignItems: \"center\",\n justifyContent: \"flex-end\",\n paddingInline: \"medium\",\n paddingBlockStart: \"small\",\n paddingBlockEnd: \"medium\",\n },\n});\n\nexport const DialogRootProvider = withRootProvider(Dialog.RootProvider);\n\nexport const useDialog = _useDialog;\n"],"mappings":";;;;;;;;;;;;;;AAoTA,MAAM,EAAE,kBAAkB,iBAAA,GAAA,wBAAA,qBAAA,GAAA,wBAAA,KArSD;CACvB,OAAOA,qBAAAA,cAAc,KAAK;CAC1B,MAAM;EACJ,UAAU;GACR,UAAU;GACV,QAAQ;GACR,OAAO;GACP,MAAM;GACN,KAAK;GAEL,YAAY;GACZ,OAAO;IACL,WAAW;IACX,eAAe,EACb,WAAW,OACb;GACF;GACA,SAAS;IACP,WAAW;IACX,eAAe,EACb,WAAW,OACb;GACF;EACF;EACA,YAAY;GACV,UAAU;GACV,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,UAAU;GACV,MAAM;GACN,KAAK;GACL,OAAO;GACP,QAAQ;EACV;EACA,SAAS;GACP,YAAY;GACZ,UAAU;GACV,YAAY;GACZ,WAAW;GACX,QAAQ;GACR,UAAU;GACV,WAAW;GACX,QAAQ;GACR,WAAW;GACX,cAAc;IAAE,MAAM;IAAS,QAAQ;GAAQ;GAC/C,mBAAmB;GACnB,iBAAiB;GACjB,oBAAoB;GACpB,kBAAkB;GAClB,YAAY;IACV,YAAY;IACZ,UAAU;IACV,WAAW;GACb;EACF;CACF;CACA,iBAAiB;EACf,MAAM;EACN,UAAU;EACV,SAAS;EACT,SAAS;CACX;CACA,kBAAkB;EAChB;GACE,SAAS;GACT,UAAU;GACV,KAAK,EACH,SAAS;IACP,WAAW;IACX,WAAW;IACX,OAAO;IACP,OAAO;KACL,WAAW;KACX,eAAe,EACb,WAAW,OACb;IACF;IACA,SAAS;KACP,WAAW;KACX,eAAe,EACb,WAAW,OACb;IACF;GACF,EACF;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,KAAK,EACH,SAAS;IACP,WAAW;IACX,WAAW;IACX,OAAO;IACP,OAAO;KACL,WAAW;KACX,eAAe,EACb,WAAW,OACb;IACF;IACA,SAAS;KACP,WAAW;KACX,eAAe,EACb,WAAW,OACb;IACF;GACF,EACF;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,KAAK,EACH,SAAS;IACP,UAAU;IACV,UAAU;IACV,QAAQ;IACR,OAAO;KACL,WAAW;KACX,eAAe,EACb,WAAW,OACb;IACF;IACA,SAAS;KACP,WAAW;KACX,eAAe,EACb,WAAW,OACb;IACF;GACF,EACF;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,KAAK,EACH,SAAS;IACP,UAAU;IACV,UAAU;IACV,QAAQ;IACR,OAAO;KACL,WAAW;KACX,eAAe,EACb,WAAW,OACb;IACF;IACA,SAAS;KACP,WAAW;KACX,eAAe,EACb,WAAW,OACb;IACF;GACF,EACF;EACF;EACA;GACE,SAAS;GACT,MAAM;GACN,KAAK,EACH,SAAS,EACP,UAAU,wBACZ,EACF;EACF;EACA;GACE,SAAS;GACT,MAAM;GACN,KAAK,EACH,SAAS,EACP,UAAU,uBACZ,EACF;EACF;EACA;GACE,SAAS;GACT,MAAM;GACN,KAAK,EACH,SAAS,EACP,UAAU,uBACZ,EACF;EACF;EACA;GACE,SAAS;GACT,MAAM;GACN,KAAK,EACH,SAAS,EACP,UAAU,uBACZ,EACF;EACF;CACF;CACA,UAAU;EACR,SAAS;GACP,QAAQ;IACN,YAAY,EACV,QAAQ,QACV;IACA,UAAU,EACR,QAAQ,UACV;GACF;GACA,OAAO;IACL,YAAY,EACV,QAAQ,aACV;IACA,UAAU,EACR,QAAQ,oBACV;GACF;EACF;EACA,SAAS;GACP,QAAQ,EACN,SAAS;IACP,YAAY;IACZ,cAAc;KAAE,MAAM;KAAS,QAAQ;IAAQ;GACjD,EACF;GACA,QAAQ,EACN,SAAS;IACP,OAAO;IACP,OAAO;KACL,WAAW;KACX,eAAe,EACb,WAAW,OACb;IACF;IACA,SAAS;KACP,WAAW;KACX,eAAe,EACb,WAAW,OACb;IACF;GACF,EACF;EACF;EACA,UAAU;GACR,MAAM,EACJ,SAAS,EACP,mBAAmB,gBACrB,EACF;GACA,QAAQ,CAAC;GACT,OAAO,EACL,SAAS,EACP,iBAAiB,gBACnB,EACF;GACA,QAAQ,EACN,SAAS,EACP,gBAAgB,gBAClB,EACF;GACA,KAAK,EACH,SAAS,EACP,kBAAkB,gBACpB,EACF;EACF;EACA,MAAM;GACJ,MAAM,EACJ,SAAS;IACP,YAAY;IACZ,WAAW;IACX,UAAU;IACV,cAAc;GAChB,EACF;GACA,QAAQ,EACN,SAAS,EACP,UAAU,uBACZ,EACF;GACA,OAAO,EACL,SAAS,EACP,UAAU,uBACZ,EACF;GACA,QAAQ,EACN,SAAS,EACP,UAAU,uBACZ,EACF;GACA,OAAO,EACL,SAAS,EACP,UAAU,wBACZ,EACF;EACF;CACF;AACF,CAEwE,CAAC;AAMzE,MAAa,qBAAqB,iBAAiBC,qBAAAA,OAAO,IAAI;AAE9D,MAAa,cAAc,EAAE,YAAY,MAAM,gBAAgB,MAAM,GAAG,YACtE,iBAAA,GAAA,kBAAA,KAAC,oBAAD;CAA+B;CAA0B;CAAe,GAAI;AAAQ,CAAA;AAGtF,MAAa,iBAAiB,YAAYA,qBAAAA,OAAO,UAAU,YAAY,EAAE,eAAe,KAAK,CAAC;AAE9F,MAAa,0BAA0B,YAAYA,qBAAAA,OAAO,SAAS,WAAW,EAAE,eAAe,KAAK,CAAC;AAErG,MAAa,mBAAmB,YAAYA,qBAAAA,OAAO,YAAY,cAAc,EAAE,eAAe,KAAK,CAAC;AAIpG,MAAa,iBAAA,GAAA,MAAA,aAAgE,OAAO,QAClF,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAC,gBAAD,CAAiB,CAAA,GACjB,iBAAA,GAAA,kBAAA,KAAC,kBAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAC,yBAAD;CAA8B;CAAK,GAAI;AAAQ,CAAA,EAC/B,CAAA,CAClB,EAAA,CAAA,CACH;AAED,MAAM,4BAA4B,YAAYA,qBAAAA,OAAO,aAAa,aAAa;AAK/E,MAAa,qBAAqB,EAAE,YAAY,cAAc,UAAU,GAAG,WAAmC;CAC5G,OACE,iBAAA,GAAA,kBAAA,KAAC,2BAAD;EAA2B,SAAA;YACzB,iBAAA,GAAA,kBAAA,KAACC,aAAAA,MAAD;GAAiB;GAAW,GAAI;GAC7B;EACG,CAAA;CACmB,CAAA;AAE/B;AAEA,MAAM,sBAAsB,YAAYD,qBAAAA,OAAO,OAAO,OAAO;AAK7D,MAAa,eAAe,EAAE,YAAY,gBAAgB,UAAU,GAAG,WACrE,iBAAA,GAAA,kBAAA,KAAC,qBAAD;CAAqB,SAAA;WACnB,iBAAA,GAAA,kBAAA,KAACE,aAAAA,SAAD;EAAoB;EAAW,GAAI;EAChC;CACM,CAAA;AACU,CAAA;AAGvB,MAAa,gBAAgB,YAAYF,qBAAAA,OAAO,SAAS,WAAW,EAAE,eAAe,KAAK,CAAC;AAE3F,MAAa,qBAAqB,YAAYA,qBAAAA,OAAO,cAAc,gBAAgB,EAAE,eAAe,KAAK,CAAC;AAE1G,MAAa,gBAAA,GAAA,wBAAA,QAAsB,OAAO,EACxC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,mBAAmB;CACnB,gBAAgB;CAChB,YAAY;CACZ,KAAK;AACP,EACF,CAAC;AAED,MAAa,cAAA,GAAA,wBAAA,QAAoB,OAAO,EACtC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,eAAe;CACf,mBAAmB;CACnB,iBAAiB;AACnB,EACF,CAAC;AAED,MAAa,gBAAA,GAAA,wBAAA,QAAsB,OAAO,EACxC,MAAM;CACJ,SAAS;CACT,KAAK;CACL,YAAY;CACZ,gBAAgB;CAChB,eAAe;CACf,mBAAmB;CACnB,iBAAiB;AACnB,EACF,CAAC;AAED,MAAa,qBAAqB,iBAAiBA,qBAAAA,OAAO,YAAY;AAEtE,MAAa,YAAYG,qBAAAA"}