@ndla/primitives 1.0.124-alpha.0 → 1.0.126-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 (182) hide show
  1. package/dist/panda.buildinfo.json +8 -0
  2. package/dist/styles.css +119 -7
  3. package/es/Accordion.mjs +1 -2
  4. package/es/Accordion.mjs.map +1 -1
  5. package/es/ArticleLists.mjs +1 -2
  6. package/es/ArticleLists.mjs.map +1 -1
  7. package/es/Badge.mjs +1 -2
  8. package/es/Badge.mjs.map +1 -1
  9. package/es/BlockQuote.mjs +1 -2
  10. package/es/BlockQuote.mjs.map +1 -1
  11. package/es/Button.mjs +1 -2
  12. package/es/Button.mjs.map +1 -1
  13. package/es/Card/Card.mjs +3 -5
  14. package/es/Card/Card.mjs.map +1 -1
  15. package/es/Checkbox.mjs +1 -2
  16. package/es/Checkbox.mjs.map +1 -1
  17. package/es/Combobox.mjs +1 -2
  18. package/es/Combobox.mjs.map +1 -1
  19. package/es/DatePicker.mjs +1 -2
  20. package/es/DatePicker.mjs.map +1 -1
  21. package/es/Dialog.mjs +1 -2
  22. package/es/Dialog.mjs.map +1 -1
  23. package/es/ErrorMessage/ErrorMessage.mjs +5 -8
  24. package/es/ErrorMessage/ErrorMessage.mjs.map +1 -1
  25. package/es/ExpandableBox.mjs +1 -2
  26. package/es/ExpandableBox.mjs.map +1 -1
  27. package/es/Field.mjs +1 -2
  28. package/es/Field.mjs.map +1 -1
  29. package/es/FieldErrorMessage.mjs +1 -2
  30. package/es/FieldErrorMessage.mjs.map +1 -1
  31. package/es/FieldHelper.mjs +1 -2
  32. package/es/FieldHelper.mjs.map +1 -1
  33. package/es/Figure.mjs +31 -14
  34. package/es/Figure.mjs.map +1 -1
  35. package/es/FileUpload.mjs +1 -2
  36. package/es/FileUpload.mjs.map +1 -1
  37. package/es/FramedContent.mjs +1 -2
  38. package/es/FramedContent.mjs.map +1 -1
  39. package/es/Hero.mjs +1 -2
  40. package/es/Hero.mjs.map +1 -1
  41. package/es/Image.mjs +1 -2
  42. package/es/Image.mjs.map +1 -1
  43. package/es/Input.mjs +1 -2
  44. package/es/Input.mjs.map +1 -1
  45. package/es/Label.mjs +1 -2
  46. package/es/Label.mjs.map +1 -1
  47. package/es/Layout/PageContainer.mjs +1 -2
  48. package/es/Layout/PageContainer.mjs.map +1 -1
  49. package/es/Layout/PageContent.mjs +1 -2
  50. package/es/Layout/PageContent.mjs.map +1 -1
  51. package/es/ListItem/ListItem.mjs +5 -16
  52. package/es/ListItem/ListItem.mjs.map +1 -1
  53. package/es/Menu.mjs +1 -2
  54. package/es/Menu.mjs.map +1 -1
  55. package/es/MessageBox.mjs +1 -2
  56. package/es/MessageBox.mjs.map +1 -1
  57. package/es/NdlaLogo.mjs +1 -2
  58. package/es/NdlaLogo.mjs.map +1 -1
  59. package/es/Pagination.mjs +1 -2
  60. package/es/Pagination.mjs.map +1 -1
  61. package/es/Popover.mjs +1 -2
  62. package/es/Popover.mjs.map +1 -1
  63. package/es/RadioGroup.mjs +1 -2
  64. package/es/RadioGroup.mjs.map +1 -1
  65. package/es/Select.mjs +1 -2
  66. package/es/Select.mjs.map +1 -1
  67. package/es/Skeleton.mjs +1 -2
  68. package/es/Skeleton.mjs.map +1 -1
  69. package/es/Slider.mjs +1 -2
  70. package/es/Slider.mjs.map +1 -1
  71. package/es/Spinner.mjs +1 -2
  72. package/es/Spinner.mjs.map +1 -1
  73. package/es/Switch.mjs +1 -2
  74. package/es/Switch.mjs.map +1 -1
  75. package/es/Table.mjs +1 -2
  76. package/es/Table.mjs.map +1 -1
  77. package/es/Tabs.mjs +1 -2
  78. package/es/Tabs.mjs.map +1 -1
  79. package/es/TagsInput.mjs +1 -2
  80. package/es/TagsInput.mjs.map +1 -1
  81. package/es/Text.mjs +1 -2
  82. package/es/Text.mjs.map +1 -1
  83. package/es/Toast.mjs +1 -2
  84. package/es/Toast.mjs.map +1 -1
  85. package/es/ToggleGroup.mjs +1 -2
  86. package/es/ToggleGroup.mjs.map +1 -1
  87. package/es/Tooltip.mjs +1 -2
  88. package/es/Tooltip.mjs.map +1 -1
  89. package/es/Tree/Tree.mjs +1 -2
  90. package/es/Tree/Tree.mjs.map +1 -1
  91. package/es/index.mjs +1 -2
  92. package/lib/Accordion.js +1 -2
  93. package/lib/Accordion.js.map +1 -1
  94. package/lib/ArticleLists.js +1 -2
  95. package/lib/ArticleLists.js.map +1 -1
  96. package/lib/Badge.js +1 -2
  97. package/lib/Badge.js.map +1 -1
  98. package/lib/BlockQuote.js +1 -2
  99. package/lib/BlockQuote.js.map +1 -1
  100. package/lib/Button.js +2 -3
  101. package/lib/Button.js.map +1 -1
  102. package/lib/Card/Card.js +5 -7
  103. package/lib/Card/Card.js.map +1 -1
  104. package/lib/Checkbox.js +2 -3
  105. package/lib/Checkbox.js.map +1 -1
  106. package/lib/Combobox.js +3 -4
  107. package/lib/Combobox.js.map +1 -1
  108. package/lib/DatePicker.js +2 -3
  109. package/lib/DatePicker.js.map +1 -1
  110. package/lib/Dialog.js +2 -3
  111. package/lib/Dialog.js.map +1 -1
  112. package/lib/ErrorMessage/ErrorMessage.js +6 -9
  113. package/lib/ErrorMessage/ErrorMessage.js.map +1 -1
  114. package/lib/ExpandableBox.js +1 -2
  115. package/lib/ExpandableBox.js.map +1 -1
  116. package/lib/Field.js +1 -2
  117. package/lib/Field.js.map +1 -1
  118. package/lib/FieldErrorMessage.js +1 -2
  119. package/lib/FieldErrorMessage.js.map +1 -1
  120. package/lib/FieldHelper.js +1 -2
  121. package/lib/FieldHelper.js.map +1 -1
  122. package/lib/Figure.d.ts +20 -0
  123. package/lib/Figure.js +31 -14
  124. package/lib/Figure.js.map +1 -1
  125. package/lib/FileUpload.js +3 -4
  126. package/lib/FileUpload.js.map +1 -1
  127. package/lib/FramedContent.js +1 -2
  128. package/lib/FramedContent.js.map +1 -1
  129. package/lib/Hero.js +2 -4
  130. package/lib/Hero.js.map +1 -1
  131. package/lib/Image.js +1 -2
  132. package/lib/Image.js.map +1 -1
  133. package/lib/Input.js +1 -2
  134. package/lib/Input.js.map +1 -1
  135. package/lib/Label.js +1 -2
  136. package/lib/Label.js.map +1 -1
  137. package/lib/Layout/PageContainer.js +3 -4
  138. package/lib/Layout/PageContainer.js.map +1 -1
  139. package/lib/Layout/PageContent.js +1 -2
  140. package/lib/Layout/PageContent.js.map +1 -1
  141. package/lib/ListItem/ListItem.js +5 -7
  142. package/lib/ListItem/ListItem.js.map +1 -1
  143. package/lib/Menu.js +2 -3
  144. package/lib/Menu.js.map +1 -1
  145. package/lib/MessageBox.js +1 -2
  146. package/lib/MessageBox.js.map +1 -1
  147. package/lib/NdlaLogo.js +2 -3
  148. package/lib/NdlaLogo.js.map +1 -1
  149. package/lib/Pagination.js +2 -4
  150. package/lib/Pagination.js.map +1 -1
  151. package/lib/Popover.js +2 -3
  152. package/lib/Popover.js.map +1 -1
  153. package/lib/RadioGroup.js +2 -3
  154. package/lib/RadioGroup.js.map +1 -1
  155. package/lib/Select.js +2 -3
  156. package/lib/Select.js.map +1 -1
  157. package/lib/Skeleton.js +2 -4
  158. package/lib/Skeleton.js.map +1 -1
  159. package/lib/Slider.js +2 -3
  160. package/lib/Slider.js.map +1 -1
  161. package/lib/Spinner.js +1 -2
  162. package/lib/Spinner.js.map +1 -1
  163. package/lib/Switch.js +2 -3
  164. package/lib/Switch.js.map +1 -1
  165. package/lib/Table.js +2 -4
  166. package/lib/Table.js.map +1 -1
  167. package/lib/Tabs.js +1 -2
  168. package/lib/Tabs.js.map +1 -1
  169. package/lib/TagsInput.js +2 -3
  170. package/lib/TagsInput.js.map +1 -1
  171. package/lib/Text.js +1 -2
  172. package/lib/Text.js.map +1 -1
  173. package/lib/Toast.js +2 -3
  174. package/lib/Toast.js.map +1 -1
  175. package/lib/ToggleGroup.js +2 -4
  176. package/lib/ToggleGroup.js.map +1 -1
  177. package/lib/Tooltip.js +1 -2
  178. package/lib/Tooltip.js.map +1 -1
  179. package/lib/Tree/Tree.js +2 -3
  180. package/lib/Tree/Tree.js.map +1 -1
  181. package/lib/index.js +56 -57
  182. package/package.json +5 -5
@@ -1 +1 @@
1
- {"version":3,"file":"Combobox.mjs","names":[],"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.mjs","names":[],"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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"}
package/es/DatePicker.mjs CHANGED
@@ -4,7 +4,6 @@ import { sva } from "@ndla/styled-system/css";
4
4
  import { createStyleContext } from "@ndla/styled-system/jsx";
5
5
  import { jsx } from "react/jsx-runtime";
6
6
  import { forwardRef } from "react";
7
-
8
7
  //#region src/DatePicker.tsx
9
8
  /**
10
9
  * Copyright (c) 2024-present, NDLA.
@@ -108,7 +107,7 @@ const DatePickerViewControl = withContext(DatePicker.ViewControl, "viewControl",
108
107
  const DatePickerView = withContext(DatePicker.View, "view", { baseComponent: true });
109
108
  const DatePickerViewTrigger = withContext(DatePicker.ViewTrigger, "viewTrigger", { baseComponent: true });
110
109
  const DatePickerYearSelect = withContext(DatePicker.YearSelect, "yearSelect", { baseComponent: true });
111
-
112
110
  //#endregion
113
111
  export { DatePickerClearTrigger, DatePickerContent, DatePickerContext, DatePickerControl, DatePickerInput, DatePickerLabel, DatePickerMonthSelect, DatePickerNextTrigger, DatePickerPositioner, DatePickerPresetTrigger, DatePickerPrevTrigger, DatePickerRangeText, DatePickerRoot, DatePickerStandaloneContent, DatePickerTable, DatePickerTableBody, DatePickerTableCell, DatePickerTableCellTrigger, DatePickerTableHead, DatePickerTableHeader, DatePickerTableRow, DatePickerTrigger, DatePickerView, DatePickerViewControl, DatePickerViewTrigger, DatePickerYearSelect };
112
+
114
113
  //# sourceMappingURL=DatePicker.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"DatePicker.mjs","names":[],"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.mjs","names":[],"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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"}
package/es/Dialog.mjs CHANGED
@@ -4,7 +4,6 @@ import { sva } from "@ndla/styled-system/css";
4
4
  import { createStyleContext, styled } from "@ndla/styled-system/jsx";
5
5
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
6
6
  import { forwardRef } from "react";
7
-
8
7
  //#region src/Dialog.tsx
9
8
  /**
10
9
  * Copyright (c) 2024-present, NDLA.
@@ -278,7 +277,7 @@ const DialogFooter = styled("div", { base: {
278
277
  } });
279
278
  const DialogRootProvider = withRootProvider(Dialog.RootProvider);
280
279
  const useDialog$1 = useDialog;
281
-
282
280
  //#endregion
283
281
  export { DialogBackdrop, DialogBody, DialogCloseTrigger, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogPositioner, DialogRoot, DialogRootProvider, DialogStandaloneContent, DialogTitle, DialogTrigger, useDialog$1 as useDialog };
282
+
284
283
  //# sourceMappingURL=Dialog.mjs.map
package/es/Dialog.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Dialog.mjs","names":["useDialog","_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,gBAAgB,mBArSrB,IAAI;CACvB,OAAO,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,CAAC,CAEwE;AAM1E,MAAa,qBAAqB,iBAAiB,OAAO,KAAK;AAE/D,MAAa,cAAc,EAAE,YAAY,MAAM,gBAAgB,MAAM,GAAG,YACtE,oBAAC;CAA8B;CAA0B;CAAe,GAAI;EAAS;AAGvF,MAAa,iBAAiB,YAAY,OAAO,UAAU,YAAY,EAAE,eAAe,MAAM,CAAC;AAE/F,MAAa,0BAA0B,YAAY,OAAO,SAAS,WAAW,EAAE,eAAe,MAAM,CAAC;AAEtG,MAAa,mBAAmB,YAAY,OAAO,YAAY,cAAc,EAAE,eAAe,MAAM,CAAC;AAIrG,MAAa,gBAAgB,YAAgD,OAAO,QAClF,4CACE,oBAAC,mBAAiB,EAClB,oBAAC,8BACC,oBAAC;CAA6B;CAAK,GAAI;EAAS,GAC/B,IAClB,CACH;AAEF,MAAM,4BAA4B,YAAY,OAAO,aAAa,cAAc;AAKhF,MAAa,qBAAqB,EAAE,YAAY,cAAc,UAAU,GAAG,WAAmC;AAC5G,QACE,oBAAC;EAA0B;YACzB,oBAAC;GAAgB;GAAW,GAAI;GAC7B;IACI;GACmB;;AAIhC,MAAM,sBAAsB,YAAY,OAAO,OAAO,QAAQ;AAK9D,MAAa,eAAe,EAAE,YAAY,gBAAgB,UAAU,GAAG,WACrE,oBAAC;CAAoB;WACnB,oBAAC;EAAmB;EAAW,GAAI;EAChC;GACO;EACU;AAGxB,MAAa,gBAAgB,YAAY,OAAO,SAAS,WAAW,EAAE,eAAe,MAAM,CAAC;AAE5F,MAAa,qBAAqB,YAAY,OAAO,cAAc,gBAAgB,EAAE,eAAe,MAAM,CAAC;AAE3G,MAAa,eAAe,OAAO,OAAO,EACxC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,mBAAmB;CACnB,gBAAgB;CAChB,YAAY;CACZ,KAAK;CACN,EACF,CAAC;AAEF,MAAa,aAAa,OAAO,OAAO,EACtC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,eAAe;CACf,mBAAmB;CACnB,iBAAiB;CAClB,EACF,CAAC;AAEF,MAAa,eAAe,OAAO,OAAO,EACxC,MAAM;CACJ,SAAS;CACT,KAAK;CACL,YAAY;CACZ,gBAAgB;CAChB,eAAe;CACf,mBAAmB;CACnB,iBAAiB;CAClB,EACF,CAAC;AAEF,MAAa,qBAAqB,iBAAiB,OAAO,aAAa;AAEvE,MAAaA,cAAYC"}
1
+ {"version":3,"file":"Dialog.mjs","names":["useDialog","_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,gBAAgB,mBArSrB,IAAI;CACvB,OAAO,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,CAAC,CAEwE;AAM1E,MAAa,qBAAqB,iBAAiB,OAAO,KAAK;AAE/D,MAAa,cAAc,EAAE,YAAY,MAAM,gBAAgB,MAAM,GAAG,YACtE,oBAAC,oBAAD;CAA+B;CAA0B;CAAe,GAAI;CAAS,CAAA;AAGvF,MAAa,iBAAiB,YAAY,OAAO,UAAU,YAAY,EAAE,eAAe,MAAM,CAAC;AAE/F,MAAa,0BAA0B,YAAY,OAAO,SAAS,WAAW,EAAE,eAAe,MAAM,CAAC;AAEtG,MAAa,mBAAmB,YAAY,OAAO,YAAY,cAAc,EAAE,eAAe,MAAM,CAAC;AAIrG,MAAa,gBAAgB,YAAgD,OAAO,QAClF,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,gBAAD,EAAkB,CAAA,EAClB,oBAAC,kBAAD,EAAA,UACE,oBAAC,yBAAD;CAA8B;CAAK,GAAI;CAAS,CAAA,EAC/B,CAAA,CAClB,EAAA,CAAA,CACH;AAEF,MAAM,4BAA4B,YAAY,OAAO,aAAa,cAAc;AAKhF,MAAa,qBAAqB,EAAE,YAAY,cAAc,UAAU,GAAG,WAAmC;AAC5G,QACE,oBAAC,2BAAD;EAA2B,SAAA;YACzB,oBAAC,MAAD;GAAiB;GAAW,GAAI;GAC7B;GACI,CAAA;EACmB,CAAA;;AAIhC,MAAM,sBAAsB,YAAY,OAAO,OAAO,QAAQ;AAK9D,MAAa,eAAe,EAAE,YAAY,gBAAgB,UAAU,GAAG,WACrE,oBAAC,qBAAD;CAAqB,SAAA;WACnB,oBAAC,SAAD;EAAoB;EAAW,GAAI;EAChC;EACO,CAAA;CACU,CAAA;AAGxB,MAAa,gBAAgB,YAAY,OAAO,SAAS,WAAW,EAAE,eAAe,MAAM,CAAC;AAE5F,MAAa,qBAAqB,YAAY,OAAO,cAAc,gBAAgB,EAAE,eAAe,MAAM,CAAC;AAE3G,MAAa,eAAe,OAAO,OAAO,EACxC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,mBAAmB;CACnB,gBAAgB;CAChB,YAAY;CACZ,KAAK;CACN,EACF,CAAC;AAEF,MAAa,aAAa,OAAO,OAAO,EACtC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,eAAe;CACf,mBAAmB;CACnB,iBAAiB;CAClB,EACF,CAAC;AAEF,MAAa,eAAe,OAAO,OAAO,EACxC,MAAM;CACJ,SAAS;CACT,KAAK;CACL,YAAY;CACZ,gBAAgB;CAChB,eAAe;CACf,mBAAmB;CACnB,iBAAiB;CAClB,EACF,CAAC;AAEF,MAAa,qBAAqB,iBAAiB,OAAO,aAAa;AAEvE,MAAaA,cAAYC"}
@@ -4,7 +4,6 @@ import { sva } from "@ndla/styled-system/css";
4
4
  import { createStyleContext } from "@ndla/styled-system/jsx";
5
5
  import { jsx } from "react/jsx-runtime";
6
6
  import { forwardRef } from "react";
7
-
8
7
  //#region src/ErrorMessage/ErrorMessage.tsx
9
8
  /**
10
9
  * Copyright (c) 2024-present, NDLA.
@@ -47,19 +46,17 @@ const { withProvider, withContext } = createStyleContext(sva({
47
46
  const ErrorMessageRoot = withProvider(ark.article, "root", { baseComponent: true });
48
47
  const ErrorMessageContent = withContext(ark.div, "content", { baseComponent: true });
49
48
  const ErrorMessageActions = withContext(ark.div, "actions", { baseComponent: true });
50
- const InternalErrorMessageTitle = forwardRef(({ textStyle = "heading.small", ...props }, ref) => /* @__PURE__ */ jsx(Heading, {
49
+ const ErrorMessageTitle = withContext(forwardRef(({ textStyle = "heading.small", ...props }, ref) => /* @__PURE__ */ jsx(Heading, {
51
50
  textStyle,
52
51
  ...props,
53
52
  ref
54
- }));
55
- const ErrorMessageTitle = withContext(InternalErrorMessageTitle, "title");
56
- const InternalErrorMessageDescription = forwardRef(({ textStyle = "body.xlarge", ...props }, ref) => /* @__PURE__ */ jsx(Text, {
53
+ })), "title");
54
+ const ErrorMessageDescription = withContext(forwardRef(({ textStyle = "body.xlarge", ...props }, ref) => /* @__PURE__ */ jsx(Text, {
57
55
  textStyle,
58
56
  ...props,
59
57
  ref
60
- }));
61
- const ErrorMessageDescription = withContext(InternalErrorMessageDescription, "description");
62
-
58
+ })), "description");
63
59
  //#endregion
64
60
  export { ErrorMessageActions, ErrorMessageContent, ErrorMessageDescription, ErrorMessageRoot, ErrorMessageTitle };
61
+
65
62
  //# sourceMappingURL=ErrorMessage.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"ErrorMessage.mjs","names":[],"sources":["../../src/ErrorMessage/ErrorMessage.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 { type HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\nimport { Heading, Text, type TextProps } from \"../Text\";\n\nconst errorMessageRecipe = sva({\n slots: [\"root\", \"content\", \"actions\", \"title\", \"description\"],\n base: {\n root: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xxlarge\",\n alignItems: \"center\",\n },\n content: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"medium\",\n alignItems: \"center\",\n },\n actions: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xsmall\",\n alignItems: \"center\",\n },\n title: {\n textAlign: \"center\",\n },\n description: {\n textAlign: \"center\",\n },\n },\n});\n\nconst { withProvider, withContext } = createStyleContext(errorMessageRecipe);\n\nexport const ErrorMessageRoot = withProvider(ark.article, \"root\", { baseComponent: true });\n\nexport const ErrorMessageContent = withContext(ark.div, \"content\", { baseComponent: true });\n\nexport const ErrorMessageActions = withContext(ark.div, \"actions\", { baseComponent: true });\n\ninterface ErrorMessageTitleProps extends Omit<HTMLArkProps<\"h1\">, \"color\">, StyledProps, TextProps {}\n\nconst InternalErrorMessageTitle = forwardRef<HTMLHeadingElement, ErrorMessageTitleProps>(\n ({ textStyle = \"heading.small\", ...props }, ref) => <Heading textStyle={textStyle} {...props} ref={ref} />,\n);\n\nexport const ErrorMessageTitle = withContext(InternalErrorMessageTitle, \"title\");\n\ninterface ErrorMessageDescriptionProps extends Omit<HTMLArkProps<\"p\">, \"color\">, StyledProps, TextProps {}\n\nconst InternalErrorMessageDescription = forwardRef<HTMLParagraphElement, ErrorMessageDescriptionProps>(\n ({ textStyle = \"body.xlarge\", ...props }, ref) => <Text textStyle={textStyle} {...props} ref={ref} />,\n);\n\nexport const ErrorMessageDescription = withContext(InternalErrorMessageDescription, \"description\");\n"],"mappings":";;;;;;;;;;;;;;;AA6CA,MAAM,EAAE,cAAc,gBAAgB,mBA9BX,IAAI;CAC7B,OAAO;EAAC;EAAQ;EAAW;EAAW;EAAS;EAAc;CAC7D,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,KAAK;GACL,YAAY;GACb;EACD,SAAS;GACP,SAAS;GACT,eAAe;GACf,KAAK;GACL,YAAY;GACb;EACD,SAAS;GACP,SAAS;GACT,eAAe;GACf,KAAK;GACL,YAAY;GACb;EACD,OAAO,EACL,WAAW,UACZ;EACD,aAAa,EACX,WAAW,UACZ;EACF;CACF,CAAC,CAE0E;AAE5E,MAAa,mBAAmB,aAAa,IAAI,SAAS,QAAQ,EAAE,eAAe,MAAM,CAAC;AAE1F,MAAa,sBAAsB,YAAY,IAAI,KAAK,WAAW,EAAE,eAAe,MAAM,CAAC;AAE3F,MAAa,sBAAsB,YAAY,IAAI,KAAK,WAAW,EAAE,eAAe,MAAM,CAAC;AAI3F,MAAM,4BAA4B,YAC/B,EAAE,YAAY,iBAAiB,GAAG,SAAS,QAAQ,oBAAC;CAAmB;CAAW,GAAI;CAAY;EAAO,CAC3G;AAED,MAAa,oBAAoB,YAAY,2BAA2B,QAAQ;AAIhF,MAAM,kCAAkC,YACrC,EAAE,YAAY,eAAe,GAAG,SAAS,QAAQ,oBAAC;CAAgB;CAAW,GAAI;CAAY;EAAO,CACtG;AAED,MAAa,0BAA0B,YAAY,iCAAiC,cAAc"}
1
+ {"version":3,"file":"ErrorMessage.mjs","names":[],"sources":["../../src/ErrorMessage/ErrorMessage.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 { type HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\nimport { Heading, Text, type TextProps } from \"../Text\";\n\nconst errorMessageRecipe = sva({\n slots: [\"root\", \"content\", \"actions\", \"title\", \"description\"],\n base: {\n root: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xxlarge\",\n alignItems: \"center\",\n },\n content: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"medium\",\n alignItems: \"center\",\n },\n actions: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xsmall\",\n alignItems: \"center\",\n },\n title: {\n textAlign: \"center\",\n },\n description: {\n textAlign: \"center\",\n },\n },\n});\n\nconst { withProvider, withContext } = createStyleContext(errorMessageRecipe);\n\nexport const ErrorMessageRoot = withProvider(ark.article, \"root\", { baseComponent: true });\n\nexport const ErrorMessageContent = withContext(ark.div, \"content\", { baseComponent: true });\n\nexport const ErrorMessageActions = withContext(ark.div, \"actions\", { baseComponent: true });\n\ninterface ErrorMessageTitleProps extends Omit<HTMLArkProps<\"h1\">, \"color\">, StyledProps, TextProps {}\n\nconst InternalErrorMessageTitle = forwardRef<HTMLHeadingElement, ErrorMessageTitleProps>(\n ({ textStyle = \"heading.small\", ...props }, ref) => <Heading textStyle={textStyle} {...props} ref={ref} />,\n);\n\nexport const ErrorMessageTitle = withContext(InternalErrorMessageTitle, \"title\");\n\ninterface ErrorMessageDescriptionProps extends Omit<HTMLArkProps<\"p\">, \"color\">, StyledProps, TextProps {}\n\nconst InternalErrorMessageDescription = forwardRef<HTMLParagraphElement, ErrorMessageDescriptionProps>(\n ({ textStyle = \"body.xlarge\", ...props }, ref) => <Text textStyle={textStyle} {...props} ref={ref} />,\n);\n\nexport const ErrorMessageDescription = withContext(InternalErrorMessageDescription, \"description\");\n"],"mappings":";;;;;;;;;;;;;;AA6CA,MAAM,EAAE,cAAc,gBAAgB,mBA9BX,IAAI;CAC7B,OAAO;EAAC;EAAQ;EAAW;EAAW;EAAS;EAAc;CAC7D,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,KAAK;GACL,YAAY;GACb;EACD,SAAS;GACP,SAAS;GACT,eAAe;GACf,KAAK;GACL,YAAY;GACb;EACD,SAAS;GACP,SAAS;GACT,eAAe;GACf,KAAK;GACL,YAAY;GACb;EACD,OAAO,EACL,WAAW,UACZ;EACD,aAAa,EACX,WAAW,UACZ;EACF;CACF,CAAC,CAE0E;AAE5E,MAAa,mBAAmB,aAAa,IAAI,SAAS,QAAQ,EAAE,eAAe,MAAM,CAAC;AAE1F,MAAa,sBAAsB,YAAY,IAAI,KAAK,WAAW,EAAE,eAAe,MAAM,CAAC;AAE3F,MAAa,sBAAsB,YAAY,IAAI,KAAK,WAAW,EAAE,eAAe,MAAM,CAAC;AAQ3F,MAAa,oBAAoB,YAJC,YAC/B,EAAE,YAAY,iBAAiB,GAAG,SAAS,QAAQ,oBAAC,SAAD;CAAoB;CAAW,GAAI;CAAY;CAAO,CAAA,CAC3G,EAEuE,QAAQ;AAQhF,MAAa,0BAA0B,YAJC,YACrC,EAAE,YAAY,eAAe,GAAG,SAAS,QAAQ,oBAAC,MAAD;CAAiB;CAAW,GAAI;CAAY;CAAO,CAAA,CACtG,EAEmF,cAAc"}
@@ -2,7 +2,6 @@ import { ark } from "@ark-ui/react";
2
2
  import { styled } from "@ndla/styled-system/jsx";
3
3
  import { jsx } from "react/jsx-runtime";
4
4
  import { forwardRef, useEffect } from "react";
5
-
6
5
  //#region src/ExpandableBox.tsx
7
6
  /**
8
7
  * Copyright (c) 2024-present, NDLA.
@@ -71,7 +70,7 @@ const ExpandableBoxSummary = forwardRef((props, ref) => /* @__PURE__ */ jsx(Styl
71
70
  "data-embed-type": "expandable-box-summary",
72
71
  ref
73
72
  }));
74
-
75
73
  //#endregion
76
74
  export { ExpandableBox, ExpandableBoxSummary };
75
+
77
76
  //# sourceMappingURL=ExpandableBox.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"ExpandableBox.mjs","names":[],"sources":["../src/ExpandableBox.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 { type HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef, useEffect } from \"react\";\n\nexport interface ExpandableBoxProps extends HTMLArkProps<\"details\">, StyledProps {}\n\nconst StyledExpandableBox = styled(\n ark.details,\n {\n base: {\n transitionDuration: \"fast\",\n width: \"100%\",\n position: \"relative\",\n border: \"1px solid\",\n borderRadius: \"xsmall\",\n borderColor: \"stroke.subtle\",\n padding: \"medium\",\n clear: \"both\",\n overflow: \"hidden\",\n _open: {\n padding: \"medium\",\n \"& summary, [data-embed-type='expandable-box-summary']\": {\n marginBlockEnd: \"-xxsmall\",\n },\n },\n },\n },\n { baseComponent: true },\n);\n\nconst onBeforePrint = (_: Event) => {\n const detailsElements = document.querySelectorAll(\"details\");\n detailsElements.forEach((details) => {\n if (!details.hasAttribute(\"open\")) {\n details.setAttribute(\"data-print-open\", \"true\");\n details.setAttribute(\"open\", \"true\");\n }\n });\n};\n\nconst onAfterPrint = (_: Event) => {\n const detailsElements = document.querySelectorAll(\"details[data-print-open]\");\n detailsElements.forEach((details) => {\n details.removeAttribute(\"data-print-open\");\n details.removeAttribute(\"open\");\n });\n};\n\nexport const ExpandableBox = forwardRef<HTMLDetailsElement, ExpandableBoxProps>((props, ref) => {\n useEffect(() => {\n window.addEventListener(\"beforeprint\", onBeforePrint);\n window.addEventListener(\"afterprint\", onAfterPrint);\n return () => {\n window.removeEventListener(\"beforeprint\", onBeforePrint);\n window.removeEventListener(\"afterprint\", onAfterPrint);\n };\n }, []);\n return <StyledExpandableBox {...props} data-embed-type=\"expandable-box\" ref={ref} />;\n});\n\nexport interface ExpandableBoxSummaryProps extends HTMLArkProps<\"summary\">, StyledProps {}\n\nconst StyledExpandableBoxSummary = styled(\n ark.summary,\n {\n base: {\n cursor: \"pointer\",\n margin: \"-medium\",\n padding: \"medium\",\n textStyle: \"label.large!\",\n _hover: {\n color: \"text.action\",\n },\n \"& > *\": {\n display: \"inline!\",\n textStyle: \"label.large!\",\n },\n },\n },\n { baseComponent: true },\n);\n\nexport const ExpandableBoxSummary = forwardRef<HTMLElement, ExpandableBoxSummaryProps>((props, ref) => (\n <StyledExpandableBoxSummary {...props} data-embed-type=\"expandable-box-summary\" ref={ref} />\n));\n"],"mappings":";;;;;;;;;;;;;AAeA,MAAM,sBAAsB,OAC1B,IAAI,SACJ,EACE,MAAM;CACJ,oBAAoB;CACpB,OAAO;CACP,UAAU;CACV,QAAQ;CACR,cAAc;CACd,aAAa;CACb,SAAS;CACT,OAAO;CACP,UAAU;CACV,OAAO;EACL,SAAS;EACT,yDAAyD,EACvD,gBAAgB,YACjB;EACF;CACF,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAED,MAAM,iBAAiB,MAAa;AAElC,CADwB,SAAS,iBAAiB,UAAU,CAC5C,SAAS,YAAY;AACnC,MAAI,CAAC,QAAQ,aAAa,OAAO,EAAE;AACjC,WAAQ,aAAa,mBAAmB,OAAO;AAC/C,WAAQ,aAAa,QAAQ,OAAO;;GAEtC;;AAGJ,MAAM,gBAAgB,MAAa;AAEjC,CADwB,SAAS,iBAAiB,2BAA2B,CAC7D,SAAS,YAAY;AACnC,UAAQ,gBAAgB,kBAAkB;AAC1C,UAAQ,gBAAgB,OAAO;GAC/B;;AAGJ,MAAa,gBAAgB,YAAoD,OAAO,QAAQ;AAC9F,iBAAgB;AACd,SAAO,iBAAiB,eAAe,cAAc;AACrD,SAAO,iBAAiB,cAAc,aAAa;AACnD,eAAa;AACX,UAAO,oBAAoB,eAAe,cAAc;AACxD,UAAO,oBAAoB,cAAc,aAAa;;IAEvD,EAAE,CAAC;AACN,QAAO,oBAAC;EAAoB,GAAI;EAAO,mBAAgB;EAAsB;GAAO;EACpF;AAIF,MAAM,6BAA6B,OACjC,IAAI,SACJ,EACE,MAAM;CACJ,QAAQ;CACR,QAAQ;CACR,SAAS;CACT,WAAW;CACX,QAAQ,EACN,OAAO,eACR;CACD,SAAS;EACP,SAAS;EACT,WAAW;EACZ;CACF,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAED,MAAa,uBAAuB,YAAoD,OAAO,QAC7F,oBAAC;CAA2B,GAAI;CAAO,mBAAgB;CAA8B;EAAO,CAC5F"}
1
+ {"version":3,"file":"ExpandableBox.mjs","names":[],"sources":["../src/ExpandableBox.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 { type HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef, useEffect } from \"react\";\n\nexport interface ExpandableBoxProps extends HTMLArkProps<\"details\">, StyledProps {}\n\nconst StyledExpandableBox = styled(\n ark.details,\n {\n base: {\n transitionDuration: \"fast\",\n width: \"100%\",\n position: \"relative\",\n border: \"1px solid\",\n borderRadius: \"xsmall\",\n borderColor: \"stroke.subtle\",\n padding: \"medium\",\n clear: \"both\",\n overflow: \"hidden\",\n _open: {\n padding: \"medium\",\n \"& summary, [data-embed-type='expandable-box-summary']\": {\n marginBlockEnd: \"-xxsmall\",\n },\n },\n },\n },\n { baseComponent: true },\n);\n\nconst onBeforePrint = (_: Event) => {\n const detailsElements = document.querySelectorAll(\"details\");\n detailsElements.forEach((details) => {\n if (!details.hasAttribute(\"open\")) {\n details.setAttribute(\"data-print-open\", \"true\");\n details.setAttribute(\"open\", \"true\");\n }\n });\n};\n\nconst onAfterPrint = (_: Event) => {\n const detailsElements = document.querySelectorAll(\"details[data-print-open]\");\n detailsElements.forEach((details) => {\n details.removeAttribute(\"data-print-open\");\n details.removeAttribute(\"open\");\n });\n};\n\nexport const ExpandableBox = forwardRef<HTMLDetailsElement, ExpandableBoxProps>((props, ref) => {\n useEffect(() => {\n window.addEventListener(\"beforeprint\", onBeforePrint);\n window.addEventListener(\"afterprint\", onAfterPrint);\n return () => {\n window.removeEventListener(\"beforeprint\", onBeforePrint);\n window.removeEventListener(\"afterprint\", onAfterPrint);\n };\n }, []);\n return <StyledExpandableBox {...props} data-embed-type=\"expandable-box\" ref={ref} />;\n});\n\nexport interface ExpandableBoxSummaryProps extends HTMLArkProps<\"summary\">, StyledProps {}\n\nconst StyledExpandableBoxSummary = styled(\n ark.summary,\n {\n base: {\n cursor: \"pointer\",\n margin: \"-medium\",\n padding: \"medium\",\n textStyle: \"label.large!\",\n _hover: {\n color: \"text.action\",\n },\n \"& > *\": {\n display: \"inline!\",\n textStyle: \"label.large!\",\n },\n },\n },\n { baseComponent: true },\n);\n\nexport const ExpandableBoxSummary = forwardRef<HTMLElement, ExpandableBoxSummaryProps>((props, ref) => (\n <StyledExpandableBoxSummary {...props} data-embed-type=\"expandable-box-summary\" ref={ref} />\n));\n"],"mappings":";;;;;;;;;;;;AAeA,MAAM,sBAAsB,OAC1B,IAAI,SACJ,EACE,MAAM;CACJ,oBAAoB;CACpB,OAAO;CACP,UAAU;CACV,QAAQ;CACR,cAAc;CACd,aAAa;CACb,SAAS;CACT,OAAO;CACP,UAAU;CACV,OAAO;EACL,SAAS;EACT,yDAAyD,EACvD,gBAAgB,YACjB;EACF;CACF,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAED,MAAM,iBAAiB,MAAa;AACV,UAAS,iBAAiB,UAAU,CAC5C,SAAS,YAAY;AACnC,MAAI,CAAC,QAAQ,aAAa,OAAO,EAAE;AACjC,WAAQ,aAAa,mBAAmB,OAAO;AAC/C,WAAQ,aAAa,QAAQ,OAAO;;GAEtC;;AAGJ,MAAM,gBAAgB,MAAa;AACT,UAAS,iBAAiB,2BAA2B,CAC7D,SAAS,YAAY;AACnC,UAAQ,gBAAgB,kBAAkB;AAC1C,UAAQ,gBAAgB,OAAO;GAC/B;;AAGJ,MAAa,gBAAgB,YAAoD,OAAO,QAAQ;AAC9F,iBAAgB;AACd,SAAO,iBAAiB,eAAe,cAAc;AACrD,SAAO,iBAAiB,cAAc,aAAa;AACnD,eAAa;AACX,UAAO,oBAAoB,eAAe,cAAc;AACxD,UAAO,oBAAoB,cAAc,aAAa;;IAEvD,EAAE,CAAC;AACN,QAAO,oBAAC,qBAAD;EAAqB,GAAI;EAAO,mBAAgB;EAAsB;EAAO,CAAA;EACpF;AAIF,MAAM,6BAA6B,OACjC,IAAI,SACJ,EACE,MAAM;CACJ,QAAQ;CACR,QAAQ;CACR,SAAS;CACT,WAAW;CACX,QAAQ,EACN,OAAO,eACR;CACD,SAAS;EACP,SAAS;EACT,WAAW;EACZ;CACF,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAED,MAAa,uBAAuB,YAAoD,OAAO,QAC7F,oBAAC,4BAAD;CAA4B,GAAI;CAAO,mBAAgB;CAA8B;CAAO,CAAA,CAC5F"}
package/es/Field.mjs CHANGED
@@ -1,6 +1,5 @@
1
1
  import { Field, Fieldset } from "@ark-ui/react";
2
2
  import { styled } from "@ndla/styled-system/jsx";
3
-
4
3
  //#region src/Field.tsx
5
4
  /**
6
5
  * Copyright (c) 2024-present, NDLA.
@@ -16,7 +15,7 @@ const rootStyle = {
16
15
  };
17
16
  const FieldRoot = styled(Field.Root, { base: rootStyle }, { baseComponent: true });
18
17
  const FieldsetRoot = styled(Fieldset.Root, { base: rootStyle }, { baseComponent: true });
19
-
20
18
  //#endregion
21
19
  export { FieldRoot, FieldsetRoot };
20
+
22
21
  //# sourceMappingURL=Field.mjs.map
package/es/Field.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Field.mjs","names":[],"sources":["../src/Field.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 { Field, Fieldset } from \"@ark-ui/react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { SystemStyleObject } from \"@ndla/styled-system/types\";\n\nconst rootStyle: SystemStyleObject = {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"3xsmall\",\n};\n\nexport const FieldRoot = styled(Field.Root, { base: rootStyle }, { baseComponent: true });\n\nexport const FieldsetRoot = styled(Fieldset.Root, { base: rootStyle }, { baseComponent: true });\n"],"mappings":";;;;;;;;;;;AAYA,MAAM,YAA+B;CACnC,SAAS;CACT,eAAe;CACf,KAAK;CACN;AAED,MAAa,YAAY,OAAO,MAAM,MAAM,EAAE,MAAM,WAAW,EAAE,EAAE,eAAe,MAAM,CAAC;AAEzF,MAAa,eAAe,OAAO,SAAS,MAAM,EAAE,MAAM,WAAW,EAAE,EAAE,eAAe,MAAM,CAAC"}
1
+ {"version":3,"file":"Field.mjs","names":[],"sources":["../src/Field.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 { Field, Fieldset } from \"@ark-ui/react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { SystemStyleObject } from \"@ndla/styled-system/types\";\n\nconst rootStyle: SystemStyleObject = {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"3xsmall\",\n};\n\nexport const FieldRoot = styled(Field.Root, { base: rootStyle }, { baseComponent: true });\n\nexport const FieldsetRoot = styled(Fieldset.Root, { base: rootStyle }, { baseComponent: true });\n"],"mappings":";;;;;;;;;;AAYA,MAAM,YAA+B;CACnC,SAAS;CACT,eAAe;CACf,KAAK;CACN;AAED,MAAa,YAAY,OAAO,MAAM,MAAM,EAAE,MAAM,WAAW,EAAE,EAAE,eAAe,MAAM,CAAC;AAEzF,MAAa,eAAe,OAAO,SAAS,MAAM,EAAE,MAAM,WAAW,EAAE,EAAE,eAAe,MAAM,CAAC"}
@@ -3,7 +3,6 @@ import { css } from "@ndla/styled-system/css";
3
3
  import { styled } from "@ndla/styled-system/jsx";
4
4
  import { jsx } from "react/jsx-runtime";
5
5
  import { forwardRef } from "react";
6
-
7
6
  //#region src/FieldErrorMessage.tsx
8
7
  /**
9
8
  * Copyright (c) 2024-present, NDLA.
@@ -39,7 +38,7 @@ const FieldsetErrorText = forwardRef(({ textStyle = "label.small", fontWeight, c
39
38
  ...props,
40
39
  ref
41
40
  }));
42
-
43
41
  //#endregion
44
42
  export { FieldErrorMessage, FieldsetErrorText };
43
+
45
44
  //# sourceMappingURL=FieldErrorMessage.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"FieldErrorMessage.mjs","names":[],"sources":["../src/FieldErrorMessage.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 { Field, Fieldset } from \"@ark-ui/react\";\nimport { css } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps, SystemStyleObject } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\nimport type { TextProps } from \"./Text\";\n\nconst errorTextStyling: SystemStyleObject = {\n color: \"text.error\",\n whiteSpace: \"pre-line\",\n justifyContent: \"center\",\n};\n\nconst StyledFieldErrorText = styled(\n Field.ErrorText,\n {\n base: errorTextStyling,\n },\n { baseComponent: true },\n);\n\nexport interface FieldErrorMessageProps extends Omit<Field.ErrorTextProps, \"color\">, TextProps, StyledProps {}\n\nexport const FieldErrorMessage = forwardRef<HTMLSpanElement, FieldErrorMessageProps>(\n ({ textStyle = \"label.small\", fontWeight, css: cssProp, color, srOnly, ...props }, ref) => (\n <StyledFieldErrorText css={css.raw({ textStyle, fontWeight, color, srOnly }, cssProp)} {...props} ref={ref} />\n ),\n);\n\nconst StyledFieldsetErrorText = styled(\n Fieldset.ErrorText,\n {\n base: errorTextStyling,\n },\n { baseComponent: true },\n);\n\nexport interface FieldsetErrorTextProps extends Omit<Fieldset.ErrorTextProps, \"color\">, TextProps, StyledProps {}\n\nexport const FieldsetErrorText = forwardRef<HTMLSpanElement, FieldsetErrorTextProps>(\n ({ textStyle = \"label.small\", fontWeight, css: cssProp, color, srOnly, ...props }, ref) => (\n <StyledFieldsetErrorText css={css.raw({ textStyle, fontWeight, color, srOnly }, cssProp)} {...props} ref={ref} />\n ),\n);\n"],"mappings":";;;;;;;;;;;;;;AAeA,MAAM,mBAAsC;CAC1C,OAAO;CACP,YAAY;CACZ,gBAAgB;CACjB;AAED,MAAM,uBAAuB,OAC3B,MAAM,WACN,EACE,MAAM,kBACP,EACD,EAAE,eAAe,MAAM,CACxB;AAID,MAAa,oBAAoB,YAC9B,EAAE,YAAY,eAAe,YAAY,KAAK,SAAS,OAAO,QAAQ,GAAG,SAAS,QACjF,oBAAC;CAAqB,KAAK,IAAI,IAAI;EAAE;EAAW;EAAY;EAAO;EAAQ,EAAE,QAAQ;CAAE,GAAI;CAAY;EAAO,CAEjH;AAED,MAAM,0BAA0B,OAC9B,SAAS,WACT,EACE,MAAM,kBACP,EACD,EAAE,eAAe,MAAM,CACxB;AAID,MAAa,oBAAoB,YAC9B,EAAE,YAAY,eAAe,YAAY,KAAK,SAAS,OAAO,QAAQ,GAAG,SAAS,QACjF,oBAAC;CAAwB,KAAK,IAAI,IAAI;EAAE;EAAW;EAAY;EAAO;EAAQ,EAAE,QAAQ;CAAE,GAAI;CAAY;EAAO,CAEpH"}
1
+ {"version":3,"file":"FieldErrorMessage.mjs","names":[],"sources":["../src/FieldErrorMessage.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 { Field, Fieldset } from \"@ark-ui/react\";\nimport { css } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps, SystemStyleObject } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\nimport type { TextProps } from \"./Text\";\n\nconst errorTextStyling: SystemStyleObject = {\n color: \"text.error\",\n whiteSpace: \"pre-line\",\n justifyContent: \"center\",\n};\n\nconst StyledFieldErrorText = styled(\n Field.ErrorText,\n {\n base: errorTextStyling,\n },\n { baseComponent: true },\n);\n\nexport interface FieldErrorMessageProps extends Omit<Field.ErrorTextProps, \"color\">, TextProps, StyledProps {}\n\nexport const FieldErrorMessage = forwardRef<HTMLSpanElement, FieldErrorMessageProps>(\n ({ textStyle = \"label.small\", fontWeight, css: cssProp, color, srOnly, ...props }, ref) => (\n <StyledFieldErrorText css={css.raw({ textStyle, fontWeight, color, srOnly }, cssProp)} {...props} ref={ref} />\n ),\n);\n\nconst StyledFieldsetErrorText = styled(\n Fieldset.ErrorText,\n {\n base: errorTextStyling,\n },\n { baseComponent: true },\n);\n\nexport interface FieldsetErrorTextProps extends Omit<Fieldset.ErrorTextProps, \"color\">, TextProps, StyledProps {}\n\nexport const FieldsetErrorText = forwardRef<HTMLSpanElement, FieldsetErrorTextProps>(\n ({ textStyle = \"label.small\", fontWeight, css: cssProp, color, srOnly, ...props }, ref) => (\n <StyledFieldsetErrorText css={css.raw({ textStyle, fontWeight, color, srOnly }, cssProp)} {...props} ref={ref} />\n ),\n);\n"],"mappings":";;;;;;;;;;;;;AAeA,MAAM,mBAAsC;CAC1C,OAAO;CACP,YAAY;CACZ,gBAAgB;CACjB;AAED,MAAM,uBAAuB,OAC3B,MAAM,WACN,EACE,MAAM,kBACP,EACD,EAAE,eAAe,MAAM,CACxB;AAID,MAAa,oBAAoB,YAC9B,EAAE,YAAY,eAAe,YAAY,KAAK,SAAS,OAAO,QAAQ,GAAG,SAAS,QACjF,oBAAC,sBAAD;CAAsB,KAAK,IAAI,IAAI;EAAE;EAAW;EAAY;EAAO;EAAQ,EAAE,QAAQ;CAAE,GAAI;CAAY;CAAO,CAAA,CAEjH;AAED,MAAM,0BAA0B,OAC9B,SAAS,WACT,EACE,MAAM,kBACP,EACD,EAAE,eAAe,MAAM,CACxB;AAID,MAAa,oBAAoB,YAC9B,EAAE,YAAY,eAAe,YAAY,KAAK,SAAS,OAAO,QAAQ,GAAG,SAAS,QACjF,oBAAC,yBAAD;CAAyB,KAAK,IAAI,IAAI;EAAE;EAAW;EAAY;EAAO;EAAQ,EAAE,QAAQ;CAAE,GAAI;CAAY;CAAO,CAAA,CAEpH"}
@@ -3,7 +3,6 @@ import { css } from "@ndla/styled-system/css";
3
3
  import { styled } from "@ndla/styled-system/jsx";
4
4
  import { jsx } from "react/jsx-runtime";
5
5
  import { forwardRef } from "react";
6
-
7
6
  //#region src/FieldHelper.tsx
8
7
  /**
9
8
  * Copyright (c) 2025-present, NDLA.
@@ -38,7 +37,7 @@ const FieldsetHelper = forwardRef(({ textStyle = "label.small", fontWeight, colo
38
37
  ref
39
38
  });
40
39
  });
41
-
42
40
  //#endregion
43
41
  export { FieldHelper, FieldsetHelper };
42
+
44
43
  //# sourceMappingURL=FieldHelper.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"FieldHelper.mjs","names":[],"sources":["../src/FieldHelper.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025-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 { Field, Fieldset } from \"@ark-ui/react\";\nimport { css } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\nimport type { TextProps } from \"./Text\";\n\nconst StyledFieldHelper = styled(Field.HelperText, {}, { baseComponent: true });\n\nexport interface FieldHelperProps extends Omit<Field.HelperTextProps, \"color\">, TextProps, StyledProps {}\n\nexport const FieldHelper = forwardRef<HTMLSpanElement, FieldHelperProps>(\n ({ textStyle = \"label.small\", fontWeight, color, srOnly, css: cssProp, ...props }, ref) => {\n return <StyledFieldHelper css={css.raw({ textStyle, fontWeight, color, srOnly }, cssProp)} {...props} ref={ref} />;\n },\n);\n\nconst StyledFieldsetHelper = styled(Fieldset.HelperText, {}, { baseComponent: true });\n\nexport interface FieldsetHelperProps extends Omit<Fieldset.HelperTextProps, \"color\">, TextProps, StyledProps {}\n\nexport const FieldsetHelper = forwardRef<HTMLSpanElement, FieldsetHelperProps>(\n ({ textStyle = \"label.small\", fontWeight, color, srOnly, css: cssProp, ...props }, ref) => {\n return (\n <StyledFieldsetHelper css={css.raw({ textStyle, fontWeight, color, srOnly }, cssProp)} {...props} ref={ref} />\n );\n },\n);\n"],"mappings":";;;;;;;;;;;;;;AAeA,MAAM,oBAAoB,OAAO,MAAM,YAAY,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAI/E,MAAa,cAAc,YACxB,EAAE,YAAY,eAAe,YAAY,OAAO,QAAQ,KAAK,SAAS,GAAG,SAAS,QAAQ;AACzF,QAAO,oBAAC;EAAkB,KAAK,IAAI,IAAI;GAAE;GAAW;GAAY;GAAO;GAAQ,EAAE,QAAQ;EAAE,GAAI;EAAY;GAAO;EAErH;AAED,MAAM,uBAAuB,OAAO,SAAS,YAAY,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAIrF,MAAa,iBAAiB,YAC3B,EAAE,YAAY,eAAe,YAAY,OAAO,QAAQ,KAAK,SAAS,GAAG,SAAS,QAAQ;AACzF,QACE,oBAAC;EAAqB,KAAK,IAAI,IAAI;GAAE;GAAW;GAAY;GAAO;GAAQ,EAAE,QAAQ;EAAE,GAAI;EAAY;GAAO;EAGnH"}
1
+ {"version":3,"file":"FieldHelper.mjs","names":[],"sources":["../src/FieldHelper.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025-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 { Field, Fieldset } from \"@ark-ui/react\";\nimport { css } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\nimport type { TextProps } from \"./Text\";\n\nconst StyledFieldHelper = styled(Field.HelperText, {}, { baseComponent: true });\n\nexport interface FieldHelperProps extends Omit<Field.HelperTextProps, \"color\">, TextProps, StyledProps {}\n\nexport const FieldHelper = forwardRef<HTMLSpanElement, FieldHelperProps>(\n ({ textStyle = \"label.small\", fontWeight, color, srOnly, css: cssProp, ...props }, ref) => {\n return <StyledFieldHelper css={css.raw({ textStyle, fontWeight, color, srOnly }, cssProp)} {...props} ref={ref} />;\n },\n);\n\nconst StyledFieldsetHelper = styled(Fieldset.HelperText, {}, { baseComponent: true });\n\nexport interface FieldsetHelperProps extends Omit<Fieldset.HelperTextProps, \"color\">, TextProps, StyledProps {}\n\nexport const FieldsetHelper = forwardRef<HTMLSpanElement, FieldsetHelperProps>(\n ({ textStyle = \"label.small\", fontWeight, color, srOnly, css: cssProp, ...props }, ref) => {\n return (\n <StyledFieldsetHelper css={css.raw({ textStyle, fontWeight, color, srOnly }, cssProp)} {...props} ref={ref} />\n );\n },\n);\n"],"mappings":";;;;;;;;;;;;;AAeA,MAAM,oBAAoB,OAAO,MAAM,YAAY,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAI/E,MAAa,cAAc,YACxB,EAAE,YAAY,eAAe,YAAY,OAAO,QAAQ,KAAK,SAAS,GAAG,SAAS,QAAQ;AACzF,QAAO,oBAAC,mBAAD;EAAmB,KAAK,IAAI,IAAI;GAAE;GAAW;GAAY;GAAO;GAAQ,EAAE,QAAQ;EAAE,GAAI;EAAY;EAAO,CAAA;EAErH;AAED,MAAM,uBAAuB,OAAO,SAAS,YAAY,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAIrF,MAAa,iBAAiB,YAC3B,EAAE,YAAY,eAAe,YAAY,OAAO,QAAQ,KAAK,SAAS,GAAG,SAAS,QAAQ;AACzF,QACE,oBAAC,sBAAD;EAAsB,KAAK,IAAI,IAAI;GAAE;GAAW;GAAY;GAAO;GAAQ,EAAE,QAAQ;EAAE,GAAI;EAAY;EAAO,CAAA;EAGnH"}
package/es/Figure.mjs CHANGED
@@ -3,7 +3,6 @@ import { css, cva } from "@ndla/styled-system/css";
3
3
  import { styled } from "@ndla/styled-system/jsx";
4
4
  import { jsx } from "react/jsx-runtime";
5
5
  import { forwardRef } from "react";
6
-
7
6
  //#region src/Figure.tsx
8
7
  /**
9
8
  * Copyright (c) 2024-present, NDLA.
@@ -25,29 +24,47 @@ const figureRecipe = cva({
25
24
  },
26
25
  variants: {
27
26
  size: {
28
- full: { width: "100%" },
27
+ full: {
28
+ width: "100%",
29
+ _print: { width: "60%" }
30
+ },
29
31
  medium: {
30
32
  tablet: { width: "50%" },
31
- desktop: { width: "65%" }
33
+ desktop: { width: "65%" },
34
+ _print: { width: "65%" }
32
35
  },
33
36
  small: {
34
37
  tablet: { width: "35%" },
35
- desktop: { width: "50%" }
38
+ desktop: { width: "50%" },
39
+ _print: { width: "50%" }
36
40
  },
37
41
  xsmall: {
38
42
  tablet: { width: "25%" },
39
- desktop: { width: "35%" }
43
+ desktop: { width: "35%" },
44
+ _print: { width: "35%" }
40
45
  }
41
46
  },
42
47
  float: {
43
- left: { tablet: {
44
- float: "left",
45
- clear: "left"
46
- } },
47
- right: { tablet: {
48
- float: "right",
49
- clear: "right"
50
- } }
48
+ left: {
49
+ tablet: {
50
+ float: "left",
51
+ clear: "left"
52
+ },
53
+ _print: {
54
+ float: "left",
55
+ clear: "left"
56
+ }
57
+ },
58
+ right: {
59
+ tablet: {
60
+ float: "right",
61
+ clear: "right"
62
+ },
63
+ _print: {
64
+ float: "right",
65
+ clear: "right"
66
+ }
67
+ }
51
68
  }
52
69
  },
53
70
  defaultVariants: { size: "full" },
@@ -105,7 +122,7 @@ const Figure = forwardRef(({ size, float, css: cssProp, ...props }, ref) => {
105
122
  ref
106
123
  });
107
124
  });
108
-
109
125
  //#endregion
110
126
  export { Figure };
127
+
111
128
  //# sourceMappingURL=Figure.mjs.map
package/es/Figure.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Figure.mjs","names":[],"sources":["../src/Figure.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 { type HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { type RecipeVariantProps, css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { RecipeVariant, StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\n\nconst figureRecipe = cva({\n base: {\n position: \"relative\",\n transitionDuration: \"normal\",\n transitionProperty: \"transform, width, height\",\n transitionTimingFunction: \"default\",\n _motionReduce: {\n transition: \"none\",\n transitionDuration: \"0s\",\n },\n },\n variants: {\n size: {\n full: {\n width: \"100%\",\n },\n medium: {\n tablet: {\n width: \"50%\",\n },\n desktop: {\n width: \"65%\",\n },\n },\n small: {\n tablet: {\n width: \"35%\",\n },\n desktop: {\n width: \"50%\",\n },\n },\n xsmall: {\n tablet: {\n width: \"25%\",\n },\n desktop: {\n width: \"35%\",\n },\n },\n },\n float: {\n left: {\n tablet: {\n float: \"left\",\n clear: \"left\",\n },\n },\n right: {\n tablet: {\n float: \"right\",\n clear: \"right\",\n },\n },\n },\n },\n defaultVariants: {\n size: \"full\",\n },\n compoundVariants: [\n {\n float: [\"left\", \"right\"],\n css: {\n zIndex: \"base\",\n left: \"auto\",\n marginBlock: \"xsmall\",\n },\n },\n {\n float: \"left\",\n size: [\"medium\", \"small\", \"xsmall\"],\n css: {\n marginInlineEnd: \"medium\",\n tabletDown: { marginInlineEnd: \"0\" },\n },\n },\n {\n float: \"right\",\n size: [\"medium\", \"small\", \"xsmall\"],\n css: {\n marginInlineStart: \"medium\",\n tabletDown: { marginInlineStart: \"0\" },\n },\n },\n {\n float: [\"left\", \"right\"],\n size: [\"full\"],\n css: {\n marginInlineStart: \"0\",\n marginInlineEnd: \"0\",\n },\n },\n ],\n});\n\nexport type FigureVariantProps = NonNullable<RecipeVariantProps<typeof figureRecipe>>;\n\nexport type FigureSize = RecipeVariant<typeof figureRecipe>[\"size\"];\n\nexport type FigureFloat = RecipeVariant<typeof figureRecipe>[\"float\"];\n\nexport interface FigureProps extends HTMLArkProps<\"figure\">, StyledProps, FigureVariantProps {}\n\nconst StyledFigure = styled(ark.figure, {}, { baseComponent: true });\n\nexport const Figure = forwardRef<HTMLElement, FigureProps>(({ size, float, css: cssProp, ...props }, ref) => {\n return <StyledFigure css={css.raw(figureRecipe.raw({ size, float }), cssProp)} {...props} ref={ref} />;\n});\n"],"mappings":";;;;;;;;;;;;;;AAcA,MAAM,eAAe,IAAI;CACvB,MAAM;EACJ,UAAU;EACV,oBAAoB;EACpB,oBAAoB;EACpB,0BAA0B;EAC1B,eAAe;GACb,YAAY;GACZ,oBAAoB;GACrB;EACF;CACD,UAAU;EACR,MAAM;GACJ,MAAM,EACJ,OAAO,QACR;GACD,QAAQ;IACN,QAAQ,EACN,OAAO,OACR;IACD,SAAS,EACP,OAAO,OACR;IACF;GACD,OAAO;IACL,QAAQ,EACN,OAAO,OACR;IACD,SAAS,EACP,OAAO,OACR;IACF;GACD,QAAQ;IACN,QAAQ,EACN,OAAO,OACR;IACD,SAAS,EACP,OAAO,OACR;IACF;GACF;EACD,OAAO;GACL,MAAM,EACJ,QAAQ;IACN,OAAO;IACP,OAAO;IACR,EACF;GACD,OAAO,EACL,QAAQ;IACN,OAAO;IACP,OAAO;IACR,EACF;GACF;EACF;CACD,iBAAiB,EACf,MAAM,QACP;CACD,kBAAkB;EAChB;GACE,OAAO,CAAC,QAAQ,QAAQ;GACxB,KAAK;IACH,QAAQ;IACR,MAAM;IACN,aAAa;IACd;GACF;EACD;GACE,OAAO;GACP,MAAM;IAAC;IAAU;IAAS;IAAS;GACnC,KAAK;IACH,iBAAiB;IACjB,YAAY,EAAE,iBAAiB,KAAK;IACrC;GACF;EACD;GACE,OAAO;GACP,MAAM;IAAC;IAAU;IAAS;IAAS;GACnC,KAAK;IACH,mBAAmB;IACnB,YAAY,EAAE,mBAAmB,KAAK;IACvC;GACF;EACD;GACE,OAAO,CAAC,QAAQ,QAAQ;GACxB,MAAM,CAAC,OAAO;GACd,KAAK;IACH,mBAAmB;IACnB,iBAAiB;IAClB;GACF;EACF;CACF,CAAC;AAUF,MAAM,eAAe,OAAO,IAAI,QAAQ,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAEpE,MAAa,SAAS,YAAsC,EAAE,MAAM,OAAO,KAAK,SAAS,GAAG,SAAS,QAAQ;AAC3G,QAAO,oBAAC;EAAa,KAAK,IAAI,IAAI,aAAa,IAAI;GAAE;GAAM;GAAO,CAAC,EAAE,QAAQ;EAAE,GAAI;EAAY;GAAO;EACtG"}
1
+ {"version":3,"file":"Figure.mjs","names":[],"sources":["../src/Figure.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 { type HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { type RecipeVariantProps, css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { RecipeVariant, StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\n\nconst figureRecipe = cva({\n base: {\n position: \"relative\",\n transitionDuration: \"normal\",\n transitionProperty: \"transform, width, height\",\n transitionTimingFunction: \"default\",\n _motionReduce: {\n transition: \"none\",\n transitionDuration: \"0s\",\n },\n },\n variants: {\n size: {\n full: {\n width: \"100%\",\n _print: {\n width: \"60%\",\n },\n },\n medium: {\n tablet: {\n width: \"50%\",\n },\n desktop: {\n width: \"65%\",\n },\n _print: {\n width: \"65%\",\n },\n },\n small: {\n tablet: {\n width: \"35%\",\n },\n desktop: {\n width: \"50%\",\n },\n _print: {\n width: \"50%\",\n },\n },\n xsmall: {\n tablet: {\n width: \"25%\",\n },\n desktop: {\n width: \"35%\",\n },\n _print: {\n width: \"35%\",\n },\n },\n },\n float: {\n left: {\n tablet: {\n float: \"left\",\n clear: \"left\",\n },\n _print: {\n float: \"left\",\n clear: \"left\",\n },\n },\n right: {\n tablet: {\n float: \"right\",\n clear: \"right\",\n },\n _print: {\n float: \"right\",\n clear: \"right\",\n },\n },\n },\n },\n defaultVariants: {\n size: \"full\",\n },\n compoundVariants: [\n {\n float: [\"left\", \"right\"],\n css: {\n zIndex: \"base\",\n left: \"auto\",\n marginBlock: \"xsmall\",\n },\n },\n {\n float: \"left\",\n size: [\"medium\", \"small\", \"xsmall\"],\n css: {\n marginInlineEnd: \"medium\",\n tabletDown: { marginInlineEnd: \"0\" },\n },\n },\n {\n float: \"right\",\n size: [\"medium\", \"small\", \"xsmall\"],\n css: {\n marginInlineStart: \"medium\",\n tabletDown: { marginInlineStart: \"0\" },\n },\n },\n {\n float: [\"left\", \"right\"],\n size: [\"full\"],\n css: {\n marginInlineStart: \"0\",\n marginInlineEnd: \"0\",\n },\n },\n ],\n});\n\nexport type FigureVariantProps = NonNullable<RecipeVariantProps<typeof figureRecipe>>;\n\nexport type FigureSize = RecipeVariant<typeof figureRecipe>[\"size\"];\n\nexport type FigureFloat = RecipeVariant<typeof figureRecipe>[\"float\"];\n\nexport interface FigureProps extends HTMLArkProps<\"figure\">, StyledProps, FigureVariantProps {}\n\nconst StyledFigure = styled(ark.figure, {}, { baseComponent: true });\n\nexport const Figure = forwardRef<HTMLElement, FigureProps>(({ size, float, css: cssProp, ...props }, ref) => {\n return <StyledFigure css={css.raw(figureRecipe.raw({ size, float }), cssProp)} {...props} ref={ref} />;\n});\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,eAAe,IAAI;CACvB,MAAM;EACJ,UAAU;EACV,oBAAoB;EACpB,oBAAoB;EACpB,0BAA0B;EAC1B,eAAe;GACb,YAAY;GACZ,oBAAoB;GACrB;EACF;CACD,UAAU;EACR,MAAM;GACJ,MAAM;IACJ,OAAO;IACP,QAAQ,EACN,OAAO,OACR;IACF;GACD,QAAQ;IACN,QAAQ,EACN,OAAO,OACR;IACD,SAAS,EACP,OAAO,OACR;IACD,QAAQ,EACN,OAAO,OACR;IACF;GACD,OAAO;IACL,QAAQ,EACN,OAAO,OACR;IACD,SAAS,EACP,OAAO,OACR;IACD,QAAQ,EACN,OAAO,OACR;IACF;GACD,QAAQ;IACN,QAAQ,EACN,OAAO,OACR;IACD,SAAS,EACP,OAAO,OACR;IACD,QAAQ,EACN,OAAO,OACR;IACF;GACF;EACD,OAAO;GACL,MAAM;IACJ,QAAQ;KACN,OAAO;KACP,OAAO;KACR;IACD,QAAQ;KACN,OAAO;KACP,OAAO;KACR;IACF;GACD,OAAO;IACL,QAAQ;KACN,OAAO;KACP,OAAO;KACR;IACD,QAAQ;KACN,OAAO;KACP,OAAO;KACR;IACF;GACF;EACF;CACD,iBAAiB,EACf,MAAM,QACP;CACD,kBAAkB;EAChB;GACE,OAAO,CAAC,QAAQ,QAAQ;GACxB,KAAK;IACH,QAAQ;IACR,MAAM;IACN,aAAa;IACd;GACF;EACD;GACE,OAAO;GACP,MAAM;IAAC;IAAU;IAAS;IAAS;GACnC,KAAK;IACH,iBAAiB;IACjB,YAAY,EAAE,iBAAiB,KAAK;IACrC;GACF;EACD;GACE,OAAO;GACP,MAAM;IAAC;IAAU;IAAS;IAAS;GACnC,KAAK;IACH,mBAAmB;IACnB,YAAY,EAAE,mBAAmB,KAAK;IACvC;GACF;EACD;GACE,OAAO,CAAC,QAAQ,QAAQ;GACxB,MAAM,CAAC,OAAO;GACd,KAAK;IACH,mBAAmB;IACnB,iBAAiB;IAClB;GACF;EACF;CACF,CAAC;AAUF,MAAM,eAAe,OAAO,IAAI,QAAQ,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAEpE,MAAa,SAAS,YAAsC,EAAE,MAAM,OAAO,KAAK,SAAS,GAAG,SAAS,QAAQ;AAC3G,QAAO,oBAAC,cAAD;EAAc,KAAK,IAAI,IAAI,aAAa,IAAI;GAAE;GAAM;GAAO,CAAC,EAAE,QAAQ;EAAE,GAAI;EAAY;EAAO,CAAA;EACtG"}
package/es/FileUpload.mjs CHANGED
@@ -5,7 +5,6 @@ import { sva } from "@ndla/styled-system/css";
5
5
  import { createStyleContext } from "@ndla/styled-system/jsx";
6
6
  import { jsx } from "react/jsx-runtime";
7
7
  import { forwardRef } from "react";
8
-
9
8
  //#region src/FileUpload.tsx
10
9
  /**
11
10
  * Copyright (c) 2024-present, NDLA.
@@ -128,7 +127,7 @@ const FileUploadLabel = forwardRef(({ textStyle = "label.medium", fontWeight = "
128
127
  children
129
128
  })
130
129
  }));
131
-
132
130
  //#endregion
133
131
  export { FileUploadContext, FileUploadDropzone, FileUploadHiddenInput, FileUploadItem, FileUploadItemDeleteTrigger, FileUploadItemGroup, FileUploadItemName, FileUploadItemPreview, FileUploadItemPreviewImage, FileUploadItemSizeText, FileUploadLabel, FileUploadRoot, FileUploadTrigger };
132
+
134
133
  //# sourceMappingURL=FileUpload.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"FileUpload.mjs","names":[],"sources":["../src/FileUpload.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 { FileUpload, fileUploadAnatomy } from \"@ark-ui/react\";\nimport { type RecipeVariantProps, sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef, type RefAttributes } from \"react\";\nimport { Label } from \"./Label\";\nimport { type TextProps, Text } from \"./Text\";\n\nconst fileUploadRecipe = sva({\n slots: fileUploadAnatomy.keys(),\n base: {\n root: {\n display: \"flex\",\n flexDirection: \"column\",\n minHeight: \"100%\",\n },\n dropzone: {\n display: \"flex\",\n gap: \"small\",\n flexDirection: \"column\",\n alignItems: \"center\",\n justifyContent: \"center\",\n padding: \"4xlarge\",\n borderRadius: \"xsmall\",\n border: \"1px solid\",\n borderColor: \"stroke.subtle\",\n transitionProperty: \"border, border-color\",\n transitionTimingFunction: \"default\",\n transitionDuration: \"normal\",\n _hover: {\n borderStyle: \"dashed\",\n borderColor: \"stroke.hover\",\n _disabled: {\n borderStyle: \"solid\",\n borderColor: \"stroke.subtle\",\n },\n },\n },\n itemGroup: {\n paddingBlockStart: \"medium\",\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xsmall\",\n },\n item: {\n width: \"100%\",\n display: \"grid\",\n gridTemplateAreas: `\n \"preview name delete\" \n \"preview size delete\"`,\n gridTemplateColumns: \"auto 1fr auto\",\n gridColumnGap: \"small\",\n border: \"1px solid\",\n borderColor: \"stroke.subtle\",\n borderRadius: \"xsmall\",\n padding: \"xsmall\",\n },\n itemPreview: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n width: \"xxlarge\",\n height: \"xxlarge\",\n gridArea: \"preview\",\n },\n itemName: {\n gridArea: \"name\",\n whiteSpace: \"nowrap\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n },\n itemSizeText: {\n gridArea: \"size\",\n },\n itemDeleteTrigger: {\n gridArea: \"delete\",\n alignSelf: \"center\",\n },\n itemPreviewImage: {\n borderRadius: \"xsmall\",\n objectFit: \"cover\",\n width: \"100%\",\n height: \"100%\",\n },\n },\n});\n\nconst { withProvider, withContext } = createStyleContext(fileUploadRecipe);\n\nexport type FileUploadVariantProps = NonNullable<RecipeVariantProps<typeof fileUploadRecipe>>;\n\nexport interface FileUploadRootProps extends FileUpload.RootProps, FileUploadVariantProps {}\n\nexport const FileUploadHiddenInput = FileUpload.HiddenInput;\nexport const FileUploadContext = FileUpload.Context;\n\nexport const FileUploadRoot = withProvider(FileUpload.Root, \"root\", { baseComponent: true });\n\nexport const FileUploadDropzone = withContext(FileUpload.Dropzone, \"dropzone\", { baseComponent: true });\n\nexport const FileUploadTrigger = withContext(FileUpload.Trigger, \"trigger\", { baseComponent: true });\n\nexport const FileUploadItemGroup = withContext(FileUpload.ItemGroup, \"itemGroup\", { baseComponent: true });\n\nexport const FileUploadItemPreview = withContext(FileUpload.ItemPreview, \"itemPreview\", { baseComponent: true });\n\nexport const FileUploadItem = withContext(FileUpload.Item, \"item\", { baseComponent: true });\n\nexport const FileUploadItemDeleteTrigger = withContext(FileUpload.ItemDeleteTrigger, \"itemDeleteTrigger\", {\n baseComponent: true,\n});\n\nexport const FileUploadItemPreviewImage = withContext(FileUpload.ItemPreviewImage, \"itemPreviewImage\", {\n baseComponent: true,\n});\n\nconst InternalFileUploadItemName = withContext(FileUpload.ItemName, \"itemName\", { baseComponent: true });\n\ninterface FileUploadItemNameProps\n extends Omit<FileUpload.ItemNameProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLParagraphElement> {}\n\nexport const FileUploadItemName = forwardRef<HTMLDivElement, FileUploadItemNameProps>(\n ({ textStyle = \"label.medium\", fontWeight = \"bold\", ...props }, ref) => (\n <Text textStyle={textStyle} fontWeight={fontWeight} asChild {...props} ref={ref}>\n {/* Do not use children here whatsoever. The component falls back to the file name only if no children are passed in. It should be up to the consumer if they want to pass in children. */}\n <InternalFileUploadItemName />\n </Text>\n ),\n);\n\nconst InternalFileUploadItemSizeText = withContext(FileUpload.ItemSizeText, \"itemSizeText\", { baseComponent: true });\n\ninterface FileUploadItemSizeTextProps\n extends Omit<FileUpload.ItemSizeTextProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLParagraphElement> {}\n\nexport const FileUploadItemSizeText = forwardRef<HTMLDivElement, FileUploadItemSizeTextProps>(\n ({ textStyle = \"label.small\", ...props }, ref) => (\n <Text textStyle={textStyle} ref={ref} asChild {...props}>\n <InternalFileUploadItemSizeText />\n </Text>\n ),\n);\n\nconst InternalFileUploadLabel = withContext(FileUpload.Label, \"label\");\n\ninterface FileUploadLabelProps\n extends Omit<FileUpload.LabelProps, \"color\">, StyledProps, TextProps, RefAttributes<HTMLLabelElement> {}\n\nexport const FileUploadLabel = forwardRef<HTMLLabelElement, FileUploadLabelProps>(\n ({ textStyle = \"label.medium\", fontWeight = \"light\", children, ...props }, ref) => (\n <InternalFileUploadLabel ref={ref} asChild>\n <Label textStyle={textStyle} fontWeight={fontWeight} {...props}>\n {children}\n </Label>\n </InternalFileUploadLabel>\n ),\n);\n"],"mappings":";;;;;;;;;;;;;;;;AA+FA,MAAM,EAAE,cAAc,gBAAgB,mBA/Eb,IAAI;CAC3B,OAAO,kBAAkB,MAAM;CAC/B,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,WAAW;GACZ;EACD,UAAU;GACR,SAAS;GACT,KAAK;GACL,eAAe;GACf,YAAY;GACZ,gBAAgB;GAChB,SAAS;GACT,cAAc;GACd,QAAQ;GACR,aAAa;GACb,oBAAoB;GACpB,0BAA0B;GAC1B,oBAAoB;GACpB,QAAQ;IACN,aAAa;IACb,aAAa;IACb,WAAW;KACT,aAAa;KACb,aAAa;KACd;IACF;GACF;EACD,WAAW;GACT,mBAAmB;GACnB,SAAS;GACT,eAAe;GACf,KAAK;GACN;EACD,MAAM;GACJ,OAAO;GACP,SAAS;GACT,mBAAmB;;;GAGnB,qBAAqB;GACrB,eAAe;GACf,QAAQ;GACR,aAAa;GACb,cAAc;GACd,SAAS;GACV;EACD,aAAa;GACX,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,OAAO;GACP,QAAQ;GACR,UAAU;GACX;EACD,UAAU;GACR,UAAU;GACV,YAAY;GACZ,UAAU;GACV,cAAc;GACf;EACD,cAAc,EACZ,UAAU,QACX;EACD,mBAAmB;GACjB,UAAU;GACV,WAAW;GACZ;EACD,kBAAkB;GAChB,cAAc;GACd,WAAW;GACX,OAAO;GACP,QAAQ;GACT;EACF;CACF,CAAC,CAEwE;AAM1E,MAAa,wBAAwB,WAAW;AAChD,MAAa,oBAAoB,WAAW;AAE5C,MAAa,iBAAiB,aAAa,WAAW,MAAM,QAAQ,EAAE,eAAe,MAAM,CAAC;AAE5F,MAAa,qBAAqB,YAAY,WAAW,UAAU,YAAY,EAAE,eAAe,MAAM,CAAC;AAEvG,MAAa,oBAAoB,YAAY,WAAW,SAAS,WAAW,EAAE,eAAe,MAAM,CAAC;AAEpG,MAAa,sBAAsB,YAAY,WAAW,WAAW,aAAa,EAAE,eAAe,MAAM,CAAC;AAE1G,MAAa,wBAAwB,YAAY,WAAW,aAAa,eAAe,EAAE,eAAe,MAAM,CAAC;AAEhH,MAAa,iBAAiB,YAAY,WAAW,MAAM,QAAQ,EAAE,eAAe,MAAM,CAAC;AAE3F,MAAa,8BAA8B,YAAY,WAAW,mBAAmB,qBAAqB,EACxG,eAAe,MAChB,CAAC;AAEF,MAAa,6BAA6B,YAAY,WAAW,kBAAkB,oBAAoB,EACrG,eAAe,MAChB,CAAC;AAEF,MAAM,6BAA6B,YAAY,WAAW,UAAU,YAAY,EAAE,eAAe,MAAM,CAAC;AAKxG,MAAa,qBAAqB,YAC/B,EAAE,YAAY,gBAAgB,aAAa,QAAQ,GAAG,SAAS,QAC9D,oBAAC;CAAgB;CAAuB;CAAY;CAAQ,GAAI;CAAY;WAE1E,oBAAC,+BAA6B;EACzB,CAEV;AAED,MAAM,iCAAiC,YAAY,WAAW,cAAc,gBAAgB,EAAE,eAAe,MAAM,CAAC;AAKpH,MAAa,yBAAyB,YACnC,EAAE,YAAY,eAAe,GAAG,SAAS,QACxC,oBAAC;CAAgB;CAAgB;CAAK;CAAQ,GAAI;WAChD,oBAAC,mCAAiC;EAC7B,CAEV;AAED,MAAM,0BAA0B,YAAY,WAAW,OAAO,QAAQ;AAKtE,MAAa,kBAAkB,YAC5B,EAAE,YAAY,gBAAgB,aAAa,SAAS,UAAU,GAAG,SAAS,QACzE,oBAAC;CAA6B;CAAK;WACjC,oBAAC;EAAiB;EAAuB;EAAY,GAAI;EACtD;GACK;EACgB,CAE7B"}
1
+ {"version":3,"file":"FileUpload.mjs","names":[],"sources":["../src/FileUpload.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 { FileUpload, fileUploadAnatomy } from \"@ark-ui/react\";\nimport { type RecipeVariantProps, sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef, type RefAttributes } from \"react\";\nimport { Label } from \"./Label\";\nimport { type TextProps, Text } from \"./Text\";\n\nconst fileUploadRecipe = sva({\n slots: fileUploadAnatomy.keys(),\n base: {\n root: {\n display: \"flex\",\n flexDirection: \"column\",\n minHeight: \"100%\",\n },\n dropzone: {\n display: \"flex\",\n gap: \"small\",\n flexDirection: \"column\",\n alignItems: \"center\",\n justifyContent: \"center\",\n padding: \"4xlarge\",\n borderRadius: \"xsmall\",\n border: \"1px solid\",\n borderColor: \"stroke.subtle\",\n transitionProperty: \"border, border-color\",\n transitionTimingFunction: \"default\",\n transitionDuration: \"normal\",\n _hover: {\n borderStyle: \"dashed\",\n borderColor: \"stroke.hover\",\n _disabled: {\n borderStyle: \"solid\",\n borderColor: \"stroke.subtle\",\n },\n },\n },\n itemGroup: {\n paddingBlockStart: \"medium\",\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xsmall\",\n },\n item: {\n width: \"100%\",\n display: \"grid\",\n gridTemplateAreas: `\n \"preview name delete\" \n \"preview size delete\"`,\n gridTemplateColumns: \"auto 1fr auto\",\n gridColumnGap: \"small\",\n border: \"1px solid\",\n borderColor: \"stroke.subtle\",\n borderRadius: \"xsmall\",\n padding: \"xsmall\",\n },\n itemPreview: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n width: \"xxlarge\",\n height: \"xxlarge\",\n gridArea: \"preview\",\n },\n itemName: {\n gridArea: \"name\",\n whiteSpace: \"nowrap\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n },\n itemSizeText: {\n gridArea: \"size\",\n },\n itemDeleteTrigger: {\n gridArea: \"delete\",\n alignSelf: \"center\",\n },\n itemPreviewImage: {\n borderRadius: \"xsmall\",\n objectFit: \"cover\",\n width: \"100%\",\n height: \"100%\",\n },\n },\n});\n\nconst { withProvider, withContext } = createStyleContext(fileUploadRecipe);\n\nexport type FileUploadVariantProps = NonNullable<RecipeVariantProps<typeof fileUploadRecipe>>;\n\nexport interface FileUploadRootProps extends FileUpload.RootProps, FileUploadVariantProps {}\n\nexport const FileUploadHiddenInput = FileUpload.HiddenInput;\nexport const FileUploadContext = FileUpload.Context;\n\nexport const FileUploadRoot = withProvider(FileUpload.Root, \"root\", { baseComponent: true });\n\nexport const FileUploadDropzone = withContext(FileUpload.Dropzone, \"dropzone\", { baseComponent: true });\n\nexport const FileUploadTrigger = withContext(FileUpload.Trigger, \"trigger\", { baseComponent: true });\n\nexport const FileUploadItemGroup = withContext(FileUpload.ItemGroup, \"itemGroup\", { baseComponent: true });\n\nexport const FileUploadItemPreview = withContext(FileUpload.ItemPreview, \"itemPreview\", { baseComponent: true });\n\nexport const FileUploadItem = withContext(FileUpload.Item, \"item\", { baseComponent: true });\n\nexport const FileUploadItemDeleteTrigger = withContext(FileUpload.ItemDeleteTrigger, \"itemDeleteTrigger\", {\n baseComponent: true,\n});\n\nexport const FileUploadItemPreviewImage = withContext(FileUpload.ItemPreviewImage, \"itemPreviewImage\", {\n baseComponent: true,\n});\n\nconst InternalFileUploadItemName = withContext(FileUpload.ItemName, \"itemName\", { baseComponent: true });\n\ninterface FileUploadItemNameProps\n extends Omit<FileUpload.ItemNameProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLParagraphElement> {}\n\nexport const FileUploadItemName = forwardRef<HTMLDivElement, FileUploadItemNameProps>(\n ({ textStyle = \"label.medium\", fontWeight = \"bold\", ...props }, ref) => (\n <Text textStyle={textStyle} fontWeight={fontWeight} asChild {...props} ref={ref}>\n {/* Do not use children here whatsoever. The component falls back to the file name only if no children are passed in. It should be up to the consumer if they want to pass in children. */}\n <InternalFileUploadItemName />\n </Text>\n ),\n);\n\nconst InternalFileUploadItemSizeText = withContext(FileUpload.ItemSizeText, \"itemSizeText\", { baseComponent: true });\n\ninterface FileUploadItemSizeTextProps\n extends Omit<FileUpload.ItemSizeTextProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLParagraphElement> {}\n\nexport const FileUploadItemSizeText = forwardRef<HTMLDivElement, FileUploadItemSizeTextProps>(\n ({ textStyle = \"label.small\", ...props }, ref) => (\n <Text textStyle={textStyle} ref={ref} asChild {...props}>\n <InternalFileUploadItemSizeText />\n </Text>\n ),\n);\n\nconst InternalFileUploadLabel = withContext(FileUpload.Label, \"label\");\n\ninterface FileUploadLabelProps\n extends Omit<FileUpload.LabelProps, \"color\">, StyledProps, TextProps, RefAttributes<HTMLLabelElement> {}\n\nexport const FileUploadLabel = forwardRef<HTMLLabelElement, FileUploadLabelProps>(\n ({ textStyle = \"label.medium\", fontWeight = \"light\", children, ...props }, ref) => (\n <InternalFileUploadLabel ref={ref} asChild>\n <Label textStyle={textStyle} fontWeight={fontWeight} {...props}>\n {children}\n </Label>\n </InternalFileUploadLabel>\n ),\n);\n"],"mappings":";;;;;;;;;;;;;;;AA+FA,MAAM,EAAE,cAAc,gBAAgB,mBA/Eb,IAAI;CAC3B,OAAO,kBAAkB,MAAM;CAC/B,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,WAAW;GACZ;EACD,UAAU;GACR,SAAS;GACT,KAAK;GACL,eAAe;GACf,YAAY;GACZ,gBAAgB;GAChB,SAAS;GACT,cAAc;GACd,QAAQ;GACR,aAAa;GACb,oBAAoB;GACpB,0BAA0B;GAC1B,oBAAoB;GACpB,QAAQ;IACN,aAAa;IACb,aAAa;IACb,WAAW;KACT,aAAa;KACb,aAAa;KACd;IACF;GACF;EACD,WAAW;GACT,mBAAmB;GACnB,SAAS;GACT,eAAe;GACf,KAAK;GACN;EACD,MAAM;GACJ,OAAO;GACP,SAAS;GACT,mBAAmB;;;GAGnB,qBAAqB;GACrB,eAAe;GACf,QAAQ;GACR,aAAa;GACb,cAAc;GACd,SAAS;GACV;EACD,aAAa;GACX,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,OAAO;GACP,QAAQ;GACR,UAAU;GACX;EACD,UAAU;GACR,UAAU;GACV,YAAY;GACZ,UAAU;GACV,cAAc;GACf;EACD,cAAc,EACZ,UAAU,QACX;EACD,mBAAmB;GACjB,UAAU;GACV,WAAW;GACZ;EACD,kBAAkB;GAChB,cAAc;GACd,WAAW;GACX,OAAO;GACP,QAAQ;GACT;EACF;CACF,CAAC,CAEwE;AAM1E,MAAa,wBAAwB,WAAW;AAChD,MAAa,oBAAoB,WAAW;AAE5C,MAAa,iBAAiB,aAAa,WAAW,MAAM,QAAQ,EAAE,eAAe,MAAM,CAAC;AAE5F,MAAa,qBAAqB,YAAY,WAAW,UAAU,YAAY,EAAE,eAAe,MAAM,CAAC;AAEvG,MAAa,oBAAoB,YAAY,WAAW,SAAS,WAAW,EAAE,eAAe,MAAM,CAAC;AAEpG,MAAa,sBAAsB,YAAY,WAAW,WAAW,aAAa,EAAE,eAAe,MAAM,CAAC;AAE1G,MAAa,wBAAwB,YAAY,WAAW,aAAa,eAAe,EAAE,eAAe,MAAM,CAAC;AAEhH,MAAa,iBAAiB,YAAY,WAAW,MAAM,QAAQ,EAAE,eAAe,MAAM,CAAC;AAE3F,MAAa,8BAA8B,YAAY,WAAW,mBAAmB,qBAAqB,EACxG,eAAe,MAChB,CAAC;AAEF,MAAa,6BAA6B,YAAY,WAAW,kBAAkB,oBAAoB,EACrG,eAAe,MAChB,CAAC;AAEF,MAAM,6BAA6B,YAAY,WAAW,UAAU,YAAY,EAAE,eAAe,MAAM,CAAC;AAKxG,MAAa,qBAAqB,YAC/B,EAAE,YAAY,gBAAgB,aAAa,QAAQ,GAAG,SAAS,QAC9D,oBAAC,MAAD;CAAiB;CAAuB;CAAY,SAAA;CAAQ,GAAI;CAAY;WAE1E,oBAAC,4BAAD,EAA8B,CAAA;CACzB,CAAA,CAEV;AAED,MAAM,iCAAiC,YAAY,WAAW,cAAc,gBAAgB,EAAE,eAAe,MAAM,CAAC;AAKpH,MAAa,yBAAyB,YACnC,EAAE,YAAY,eAAe,GAAG,SAAS,QACxC,oBAAC,MAAD;CAAiB;CAAgB;CAAK,SAAA;CAAQ,GAAI;WAChD,oBAAC,gCAAD,EAAkC,CAAA;CAC7B,CAAA,CAEV;AAED,MAAM,0BAA0B,YAAY,WAAW,OAAO,QAAQ;AAKtE,MAAa,kBAAkB,YAC5B,EAAE,YAAY,gBAAgB,aAAa,SAAS,UAAU,GAAG,SAAS,QACzE,oBAAC,yBAAD;CAA8B;CAAK,SAAA;WACjC,oBAAC,OAAD;EAAkB;EAAuB;EAAY,GAAI;EACtD;EACK,CAAA;CACgB,CAAA,CAE7B"}
@@ -3,7 +3,6 @@ import { css, cva } from "@ndla/styled-system/css";
3
3
  import { styled } from "@ndla/styled-system/jsx";
4
4
  import { jsx } from "react/jsx-runtime";
5
5
  import { forwardRef } from "react";
6
-
7
6
  //#region src/FramedContent.tsx
8
7
  /**
9
8
  * Copyright (c) 2024-present, NDLA.
@@ -43,7 +42,7 @@ const FramedContent = forwardRef(({ colorTheme, css: cssProp, ...props }, ref) =
43
42
  ...props,
44
43
  ref
45
44
  }));
46
-
47
45
  //#endregion
48
46
  export { FramedContent };
47
+
49
48
  //# sourceMappingURL=FramedContent.mjs.map