@ndla/primitives 1.0.130-alpha.0 → 1.0.132-alpha.0

package/lib/DatePicker.js

@@ -1,9 +1,9 @@
 const require_Label = require("./Label.js");
-let _ark_ui_react = require("@ark-ui/react");
 let _ndla_styled_system_css = require("@ndla/styled-system/css");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
+let _ark_ui_react_date_picker = require("@ark-ui/react/date-picker");
 //#region src/DatePicker.tsx
 /**
 * Copyright (c) 2024-present, NDLA.
@@ -13,7 +13,7 @@ let react = require("react");
 *
 */
 const { withProvider, withContext } = (0, _ndla_styled_system_jsx.createStyleContext)((0, _ndla_styled_system_css.sva)({
-	slots: _ark_ui_react.datePickerAnatomy.keys(),
+	slots: _ark_ui_react_date_picker.datePickerAnatomy.keys(),
 	base: {
 		root: {
 			display: "flex",
@@ -71,16 +71,16 @@ const { withProvider, withContext } = (0, _ndla_styled_system_jsx.createStyleCon
 		}
 	}
 }));
-const DatePickerRoot = withProvider(_ark_ui_react.DatePicker.Root, "root", { baseComponent: true });
-const DatePickerClearTrigger = withContext(_ark_ui_react.DatePicker.ClearTrigger, "clearTrigger", { baseComponent: true });
+const DatePickerRoot = withProvider(_ark_ui_react_date_picker.DatePicker.Root, "root", { baseComponent: true });
+const DatePickerClearTrigger = withContext(_ark_ui_react_date_picker.DatePicker.ClearTrigger, "clearTrigger", { baseComponent: true });
 const DatePickerContent = (0, react.forwardRef)((props, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DatePickerPositioner, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DatePickerStandaloneContent, {
 	...props,
 	ref
 }) }));
-const DatePickerStandaloneContent = withContext(_ark_ui_react.DatePicker.Content, "content", { baseComponent: true });
-const DatePickerControl = withContext(_ark_ui_react.DatePicker.Control, "control", { baseComponent: true });
-const DatePickerInput = withContext(_ark_ui_react.DatePicker.Input, "input", { baseComponent: true });
-const InternalDatePickerLabel = withContext(_ark_ui_react.DatePicker.Label, "label");
+const DatePickerStandaloneContent = withContext(_ark_ui_react_date_picker.DatePicker.Content, "content", { baseComponent: true });
+const DatePickerControl = withContext(_ark_ui_react_date_picker.DatePicker.Control, "control", { baseComponent: true });
+const DatePickerInput = withContext(_ark_ui_react_date_picker.DatePicker.Input, "input", { baseComponent: true });
+const InternalDatePickerLabel = withContext(_ark_ui_react_date_picker.DatePicker.Label, "label");
 const DatePickerLabel = ({ textStyle = "label.medium", fontWeight = "bold", ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalDatePickerLabel, {
 	asChild: true,
 	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Label.Label, {
@@ -89,24 +89,24 @@ const DatePickerLabel = ({ textStyle = "label.medium", fontWeight = "bold", ...p
 		...props
 	})
 });
-const DatePickerMonthSelect = withContext(_ark_ui_react.DatePicker.MonthSelect, "monthSelect", { baseComponent: true });
-const DatePickerNextTrigger = withContext(_ark_ui_react.DatePicker.NextTrigger, "nextTrigger", { baseComponent: true });
-const DatePickerPositioner = withContext(_ark_ui_react.DatePicker.Positioner, "positioner", { baseComponent: true });
-const DatePickerPresetTrigger = withContext(_ark_ui_react.DatePicker.PresetTrigger, "presetTrigger", { baseComponent: true });
-const DatePickerPrevTrigger = withContext(_ark_ui_react.DatePicker.PrevTrigger, "prevTrigger", { baseComponent: true });
-const DatePickerRangeText = withContext(_ark_ui_react.DatePicker.RangeText, "rangeText", { baseComponent: true });
-const DatePickerTableBody = withContext(_ark_ui_react.DatePicker.TableBody, "tableBody", { baseComponent: true });
-const DatePickerTableCell = withContext(_ark_ui_react.DatePicker.TableCell, "tableCell", { baseComponent: true });
-const DatePickerTableCellTrigger = withContext(_ark_ui_react.DatePicker.TableCellTrigger, "tableCellTrigger", { baseComponent: true });
-const DatePickerTableHead = withContext(_ark_ui_react.DatePicker.TableHead, "tableHead", { baseComponent: true });
-const DatePickerTableHeader = withContext(_ark_ui_react.DatePicker.TableHeader, "tableHeader", { baseComponent: true });
-const DatePickerTable = withContext(_ark_ui_react.DatePicker.Table, "table", { baseComponent: true });
-const DatePickerTableRow = withContext(_ark_ui_react.DatePicker.TableRow, "tableRow", { baseComponent: true });
-const DatePickerTrigger = withContext(_ark_ui_react.DatePicker.Trigger, "trigger", { baseComponent: true });
-const DatePickerViewControl = withContext(_ark_ui_react.DatePicker.ViewControl, "viewControl", { baseComponent: true });
-const DatePickerView = withContext(_ark_ui_react.DatePicker.View, "view", { baseComponent: true });
-const DatePickerViewTrigger = withContext(_ark_ui_react.DatePicker.ViewTrigger, "viewTrigger", { baseComponent: true });
-const DatePickerYearSelect = withContext(_ark_ui_react.DatePicker.YearSelect, "yearSelect", { baseComponent: true });
+const DatePickerMonthSelect = withContext(_ark_ui_react_date_picker.DatePicker.MonthSelect, "monthSelect", { baseComponent: true });
+const DatePickerNextTrigger = withContext(_ark_ui_react_date_picker.DatePicker.NextTrigger, "nextTrigger", { baseComponent: true });
+const DatePickerPositioner = withContext(_ark_ui_react_date_picker.DatePicker.Positioner, "positioner", { baseComponent: true });
+const DatePickerPresetTrigger = withContext(_ark_ui_react_date_picker.DatePicker.PresetTrigger, "presetTrigger", { baseComponent: true });
+const DatePickerPrevTrigger = withContext(_ark_ui_react_date_picker.DatePicker.PrevTrigger, "prevTrigger", { baseComponent: true });
+const DatePickerRangeText = withContext(_ark_ui_react_date_picker.DatePicker.RangeText, "rangeText", { baseComponent: true });
+const DatePickerTableBody = withContext(_ark_ui_react_date_picker.DatePicker.TableBody, "tableBody", { baseComponent: true });
+const DatePickerTableCell = withContext(_ark_ui_react_date_picker.DatePicker.TableCell, "tableCell", { baseComponent: true });
+const DatePickerTableCellTrigger = withContext(_ark_ui_react_date_picker.DatePicker.TableCellTrigger, "tableCellTrigger", { baseComponent: true });
+const DatePickerTableHead = withContext(_ark_ui_react_date_picker.DatePicker.TableHead, "tableHead", { baseComponent: true });
+const DatePickerTableHeader = withContext(_ark_ui_react_date_picker.DatePicker.TableHeader, "tableHeader", { baseComponent: true });
+const DatePickerTable = withContext(_ark_ui_react_date_picker.DatePicker.Table, "table", { baseComponent: true });
+const DatePickerTableRow = withContext(_ark_ui_react_date_picker.DatePicker.TableRow, "tableRow", { baseComponent: true });
+const DatePickerTrigger = withContext(_ark_ui_react_date_picker.DatePicker.Trigger, "trigger", { baseComponent: true });
+const DatePickerViewControl = withContext(_ark_ui_react_date_picker.DatePicker.ViewControl, "viewControl", { baseComponent: true });
+const DatePickerView = withContext(_ark_ui_react_date_picker.DatePicker.View, "view", { baseComponent: true });
+const DatePickerViewTrigger = withContext(_ark_ui_react_date_picker.DatePicker.ViewTrigger, "viewTrigger", { baseComponent: true });
+const DatePickerYearSelect = withContext(_ark_ui_react_date_picker.DatePicker.YearSelect, "yearSelect", { baseComponent: true });
 //#endregion
 exports.DatePickerClearTrigger = DatePickerClearTrigger;
 exports.DatePickerContent = DatePickerContent;

package/lib/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","names":["datePickerAnatomy","DatePicker","Label"],"sources":["../src/DatePicker.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { DatePicker, datePickerAnatomy } from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext, type StyledProps } from \"@ndla/styled-system/jsx\";\nimport { forwardRef, type RefAttributes } from \"react\";\nimport { Label } from \"./Label\";\nimport type { TextProps } from \"./Text\";\n\nconst datePickerRecipe = sva({\n  slots: datePickerAnatomy.keys(),\n  base: {\n    root: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"xsmall\",\n    },\n    content: {\n      background: \"surface.default\",\n      borderRadius: \"xsmall\",\n      boxShadow: \"large\",\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"xsmall\",\n      padding: \"xsmall\",\n      zIndex: \"dropdown\",\n      _open: {\n        animation: \"fade-shift-in 0.25s ease-in-out\",\n      },\n      _closed: {\n        animation: \"fade-shift-out 0.25s ease-in-out\",\n      },\n    },\n    control: {\n      display: \"flex\",\n      width: \"fit-content\",\n      gap: \"xsmall\",\n    },\n    label: {},\n    tableHeader: {},\n    viewControl: {\n      display: \"flex\",\n      gap: \"5xsmall\",\n      justifyContent: \"space-between\",\n    },\n    table: {\n      width: \"100%\",\n      borderCollapse: \"separate\",\n      borderSpacing: \"5xsmall\",\n      margin: \"-5xsmall\",\n    },\n    tableCell: {\n      textAlign: \"center\",\n    },\n    tableCellTrigger: {\n      width: \"100%\",\n      \"&[data-today]\": {\n        _before: {\n          content: \"'-'\",\n          color: \"stroke.default\",\n          position: \"absolute\",\n          marginBlockStart: \"medium\",\n        },\n      },\n      \"&[data-outside-range]\": {\n        color: \"text.subtle\",\n        fontWeight: \"normal\",\n      },\n    },\n    view: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"xsmall\",\n    },\n  },\n});\nconst { withProvider, withContext } = createStyleContext(datePickerRecipe);\n\nexport interface DatePickerRootProps extends DatePicker.RootProps, StyledProps {\n  translations: DatePicker.RootProps[\"translations\"];\n  locale: DatePicker.RootProps[\"locale\"];\n}\n\nexport const DatePickerRoot = withProvider(DatePicker.Root, \"root\", { baseComponent: true });\n\nexport const DatePickerClearTrigger = withContext(DatePicker.ClearTrigger, \"clearTrigger\", {\n  baseComponent: true,\n});\n\ninterface DatePickerContentProps extends DatePicker.ContentProps, StyledProps {}\n\nexport const DatePickerContent = forwardRef<HTMLDivElement, DatePickerContentProps>((props, ref) => (\n  <DatePickerPositioner>\n    <DatePickerStandaloneContent {...props} ref={ref} />\n  </DatePickerPositioner>\n));\n\nexport const DatePickerStandaloneContent = withContext(DatePicker.Content, \"content\", { baseComponent: true });\n\nexport const DatePickerControl = withContext(DatePicker.Control, \"control\", { baseComponent: true });\n\nexport const DatePickerInput = withContext(DatePicker.Input, \"input\", { baseComponent: true });\n\ninterface DatePickerLabelProps\n  extends Omit<DatePicker.LabelProps, \"color\">, StyledProps, TextProps, RefAttributes<HTMLLabelElement> {}\n\nconst InternalDatePickerLabel = withContext(DatePicker.Label, \"label\");\n\nexport const DatePickerLabel = ({\n  textStyle = \"label.medium\",\n  fontWeight = \"bold\",\n  ...props\n}: DatePickerLabelProps) => (\n  <InternalDatePickerLabel asChild>\n    <Label textStyle={textStyle} fontWeight={fontWeight} {...props} />\n  </InternalDatePickerLabel>\n);\n\nexport const DatePickerMonthSelect = withContext(DatePicker.MonthSelect, \"monthSelect\", { baseComponent: true });\n\ninterface DatePickerNextTrigger extends DatePicker.NextTriggerProps, StyledProps {}\n\nexport const DatePickerNextTrigger = withContext(DatePicker.NextTrigger, \"nextTrigger\", { baseComponent: true });\n\nexport const DatePickerPositioner = withContext(DatePicker.Positioner, \"positioner\", { baseComponent: true });\n\nexport const DatePickerPresetTrigger = withContext(DatePicker.PresetTrigger, \"presetTrigger\", { baseComponent: true });\n\nexport const DatePickerPrevTrigger = withContext(DatePicker.PrevTrigger, \"prevTrigger\", { baseComponent: true });\n\nexport const DatePickerRangeText = withContext(DatePicker.RangeText, \"rangeText\", { baseComponent: true });\n\nexport const DatePickerTableBody = withContext(DatePicker.TableBody, \"tableBody\", { baseComponent: true });\n\nexport const DatePickerTableCell = withContext(DatePicker.TableCell, \"tableCell\", { baseComponent: true });\n\nexport const DatePickerTableCellTrigger = withContext(DatePicker.TableCellTrigger, \"tableCellTrigger\", {\n  baseComponent: true,\n});\n\nexport const DatePickerTableHead = withContext(DatePicker.TableHead, \"tableHead\", { baseComponent: true });\n\nexport const DatePickerTableHeader = withContext(DatePicker.TableHeader, \"tableHeader\", { baseComponent: true });\n\nexport const DatePickerTable = withContext(DatePicker.Table, \"table\", { baseComponent: true });\n\nexport const DatePickerTableRow = withContext(DatePicker.TableRow, \"tableRow\", { baseComponent: true });\n\nexport const DatePickerTrigger = withContext(DatePicker.Trigger, \"trigger\", { baseComponent: true });\n\nexport const DatePickerViewControl = withContext(DatePicker.ViewControl, \"viewControl\", { baseComponent: true });\n\nexport const DatePickerView = withContext(DatePicker.View, \"view\", { baseComponent: true });\n\nexport const DatePickerViewTrigger = withContext(DatePicker.ViewTrigger, \"viewTrigger\", { baseComponent: true });\n\nexport const DatePickerYearSelect = withContext(DatePicker.YearSelect, \"yearSelect\", { baseComponent: true });\n\nexport { DatePickerContext } from \"@ark-ui/react\";\n"],"mappings":"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"}
+{"version":3,"file":"DatePicker.js","names":["datePickerAnatomy","DatePicker","Label"],"sources":["../src/DatePicker.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { DatePicker, datePickerAnatomy } from \"@ark-ui/react/date-picker\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext, type StyledProps } from \"@ndla/styled-system/jsx\";\nimport { forwardRef, type RefAttributes } from \"react\";\nimport { Label } from \"./Label\";\nimport type { TextProps } from \"./Text\";\n\nconst datePickerRecipe = sva({\n  slots: datePickerAnatomy.keys(),\n  base: {\n    root: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"xsmall\",\n    },\n    content: {\n      background: \"surface.default\",\n      borderRadius: \"xsmall\",\n      boxShadow: \"large\",\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"xsmall\",\n      padding: \"xsmall\",\n      zIndex: \"dropdown\",\n      _open: {\n        animation: \"fade-shift-in 0.25s ease-in-out\",\n      },\n      _closed: {\n        animation: \"fade-shift-out 0.25s ease-in-out\",\n      },\n    },\n    control: {\n      display: \"flex\",\n      width: \"fit-content\",\n      gap: \"xsmall\",\n    },\n    label: {},\n    tableHeader: {},\n    viewControl: {\n      display: \"flex\",\n      gap: \"5xsmall\",\n      justifyContent: \"space-between\",\n    },\n    table: {\n      width: \"100%\",\n      borderCollapse: \"separate\",\n      borderSpacing: \"5xsmall\",\n      margin: \"-5xsmall\",\n    },\n    tableCell: {\n      textAlign: \"center\",\n    },\n    tableCellTrigger: {\n      width: \"100%\",\n      \"&[data-today]\": {\n        _before: {\n          content: \"'-'\",\n          color: \"stroke.default\",\n          position: \"absolute\",\n          marginBlockStart: \"medium\",\n        },\n      },\n      \"&[data-outside-range]\": {\n        color: \"text.subtle\",\n        fontWeight: \"normal\",\n      },\n    },\n    view: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"xsmall\",\n    },\n  },\n});\nconst { withProvider, withContext } = createStyleContext(datePickerRecipe);\n\nexport interface DatePickerRootProps extends DatePicker.RootProps, StyledProps {\n  translations: DatePicker.RootProps[\"translations\"];\n  locale: DatePicker.RootProps[\"locale\"];\n}\n\nexport const DatePickerRoot = withProvider(DatePicker.Root, \"root\", { baseComponent: true });\n\nexport const DatePickerClearTrigger = withContext(DatePicker.ClearTrigger, \"clearTrigger\", {\n  baseComponent: true,\n});\n\ninterface DatePickerContentProps extends DatePicker.ContentProps, StyledProps {}\n\nexport const DatePickerContent = forwardRef<HTMLDivElement, DatePickerContentProps>((props, ref) => (\n  <DatePickerPositioner>\n    <DatePickerStandaloneContent {...props} ref={ref} />\n  </DatePickerPositioner>\n));\n\nexport const DatePickerStandaloneContent = withContext(DatePicker.Content, \"content\", { baseComponent: true });\n\nexport const DatePickerControl = withContext(DatePicker.Control, \"control\", { baseComponent: true });\n\nexport const DatePickerInput = withContext(DatePicker.Input, \"input\", { baseComponent: true });\n\ninterface DatePickerLabelProps\n  extends Omit<DatePicker.LabelProps, \"color\">, StyledProps, TextProps, RefAttributes<HTMLLabelElement> {}\n\nconst InternalDatePickerLabel = withContext(DatePicker.Label, \"label\");\n\nexport const DatePickerLabel = ({\n  textStyle = \"label.medium\",\n  fontWeight = \"bold\",\n  ...props\n}: DatePickerLabelProps) => (\n  <InternalDatePickerLabel asChild>\n    <Label textStyle={textStyle} fontWeight={fontWeight} {...props} />\n  </InternalDatePickerLabel>\n);\n\nexport const DatePickerMonthSelect = withContext(DatePicker.MonthSelect, \"monthSelect\", { baseComponent: true });\n\ninterface DatePickerNextTrigger extends DatePicker.NextTriggerProps, StyledProps {}\n\nexport const DatePickerNextTrigger = withContext(DatePicker.NextTrigger, \"nextTrigger\", { baseComponent: true });\n\nexport const DatePickerPositioner = withContext(DatePicker.Positioner, \"positioner\", { baseComponent: true });\n\nexport const DatePickerPresetTrigger = withContext(DatePicker.PresetTrigger, \"presetTrigger\", { baseComponent: true });\n\nexport const DatePickerPrevTrigger = withContext(DatePicker.PrevTrigger, \"prevTrigger\", { baseComponent: true });\n\nexport const DatePickerRangeText = withContext(DatePicker.RangeText, \"rangeText\", { baseComponent: true });\n\nexport const DatePickerTableBody = withContext(DatePicker.TableBody, \"tableBody\", { baseComponent: true });\n\nexport const DatePickerTableCell = withContext(DatePicker.TableCell, \"tableCell\", { baseComponent: true });\n\nexport const DatePickerTableCellTrigger = withContext(DatePicker.TableCellTrigger, \"tableCellTrigger\", {\n  baseComponent: true,\n});\n\nexport const DatePickerTableHead = withContext(DatePicker.TableHead, \"tableHead\", { baseComponent: true });\n\nexport const DatePickerTableHeader = withContext(DatePicker.TableHeader, \"tableHeader\", { baseComponent: true });\n\nexport const DatePickerTable = withContext(DatePicker.Table, \"table\", { baseComponent: true });\n\nexport const DatePickerTableRow = withContext(DatePicker.TableRow, \"tableRow\", { baseComponent: true });\n\nexport const DatePickerTrigger = withContext(DatePicker.Trigger, \"trigger\", { baseComponent: true });\n\nexport const DatePickerViewControl = withContext(DatePicker.ViewControl, \"viewControl\", { baseComponent: true });\n\nexport const DatePickerView = withContext(DatePicker.View, \"view\", { baseComponent: true });\n\nexport const DatePickerViewTrigger = withContext(DatePicker.ViewTrigger, \"viewTrigger\", { baseComponent: true });\n\nexport const DatePickerYearSelect = withContext(DatePicker.YearSelect, \"yearSelect\", { baseComponent: true });\n\nexport { DatePickerContext } from \"@ark-ui/react/date-picker\";\n"],"mappings":"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"}

package/lib/Dialog.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { Dialog } from "@ark-ui/react";
+import { Dialog } from "@ark-ui/react/dialog";
 import { type RecipeVariantProps } from "@ndla/styled-system/css";
 import type { StyledProps } from "@ndla/styled-system/types";
 import { type RefAttributes } from "react";
@@ -334,5 +334,5 @@ export declare const DialogRootProvider: import("@ndla/styled-system/jsx").Style
         };
     };
 }>>;
-export declare const useDialog: (props?: import("@ark-ui/react").UseDialogProps) => import("@ark-ui/react").UseDialogReturn;
+export declare const useDialog: (props?: import("@ark-ui/react/dialog").UseDialogProps) => import("@ark-ui/react/dialog").UseDialogReturn;
 export {};

package/lib/Dialog.js

@@ -1,9 +1,9 @@
 const require_Text = require("./Text.js");
-let _ark_ui_react = require("@ark-ui/react");
 let _ndla_styled_system_css = require("@ndla/styled-system/css");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
+let _ark_ui_react_dialog = require("@ark-ui/react/dialog");
 //#region src/Dialog.tsx
 /**
 * Copyright (c) 2024-present, NDLA.
@@ -13,7 +13,7 @@ let react = require("react");
 *
 */
 const { withRootProvider, withContext } = (0, _ndla_styled_system_jsx.createStyleContext)((0, _ndla_styled_system_css.sva)({
-	slots: _ark_ui_react.dialogAnatomy.keys(),
+	slots: _ark_ui_react_dialog.dialogAnatomy.keys(),
 	base: {
 		backdrop: {
 			position: "fixed",
@@ -215,20 +215,20 @@ const { withRootProvider, withContext } = (0, _ndla_styled_system_jsx.createStyl
 		}
 	}
 }));
-const InternalDialogRoot = withRootProvider(_ark_ui_react.Dialog.Root);
+const InternalDialogRoot = withRootProvider(_ark_ui_react_dialog.Dialog.Root);
 const DialogRoot = ({ lazyMount = true, unmountOnExit = true, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalDialogRoot, {
 	lazyMount,
 	unmountOnExit,
 	...props
 });
-const DialogBackdrop = withContext(_ark_ui_react.Dialog.Backdrop, "backdrop", { baseComponent: true });
-const DialogStandaloneContent = withContext(_ark_ui_react.Dialog.Content, "content", { baseComponent: true });
-const DialogPositioner = withContext(_ark_ui_react.Dialog.Positioner, "positioner", { baseComponent: true });
+const DialogBackdrop = withContext(_ark_ui_react_dialog.Dialog.Backdrop, "backdrop", { baseComponent: true });
+const DialogStandaloneContent = withContext(_ark_ui_react_dialog.Dialog.Content, "content", { baseComponent: true });
+const DialogPositioner = withContext(_ark_ui_react_dialog.Dialog.Positioner, "positioner", { baseComponent: true });
 const DialogContent = (0, react.forwardRef)((props, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogBackdrop, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogPositioner, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogStandaloneContent, {
 	ref,
 	...props
 }) })] }));
-const InternalDialogDescription = withContext(_ark_ui_react.Dialog.Description, "description");
+const InternalDialogDescription = withContext(_ark_ui_react_dialog.Dialog.Description, "description");
 const DialogDescription = ({ textStyle = "body.large", children, ...rest }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalDialogDescription, {
 		asChild: true,
@@ -239,7 +239,7 @@ const DialogDescription = ({ textStyle = "body.large", children, ...rest }) => {
 		})
 	});
 };
-const InternalDialogTitle = withContext(_ark_ui_react.Dialog.Title, "title");
+const InternalDialogTitle = withContext(_ark_ui_react_dialog.Dialog.Title, "title");
 const DialogTitle = ({ textStyle = "title.medium", children, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalDialogTitle, {
 	asChild: true,
 	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Heading, {
@@ -248,8 +248,8 @@ const DialogTitle = ({ textStyle = "title.medium", children, ...rest }) => /* @_
 		children
 	})
 });
-const DialogTrigger = withContext(_ark_ui_react.Dialog.Trigger, "trigger", { baseComponent: true });
-const DialogCloseTrigger = withContext(_ark_ui_react.Dialog.CloseTrigger, "closeTrigger", { baseComponent: true });
+const DialogTrigger = withContext(_ark_ui_react_dialog.Dialog.Trigger, "trigger", { baseComponent: true });
+const DialogCloseTrigger = withContext(_ark_ui_react_dialog.Dialog.CloseTrigger, "closeTrigger", { baseComponent: true });
 const DialogHeader = (0, _ndla_styled_system_jsx.styled)("div", { base: {
 	display: "flex",
 	paddingInline: "medium",
@@ -275,8 +275,8 @@ const DialogFooter = (0, _ndla_styled_system_jsx.styled)("div", { base: {
 	paddingBlockStart: "small",
 	paddingBlockEnd: "medium"
 } });
-const DialogRootProvider = withRootProvider(_ark_ui_react.Dialog.RootProvider);
-const useDialog = _ark_ui_react.useDialog;
+const DialogRootProvider = withRootProvider(_ark_ui_react_dialog.Dialog.RootProvider);
+const useDialog = _ark_ui_react_dialog.useDialog;
 //#endregion
 exports.DialogBackdrop = DialogBackdrop;
 exports.DialogBody = DialogBody;

package/lib/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","names":["dialogAnatomy","Dialog","Text","Heading","_useDialog"],"sources":["../src/Dialog.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Dialog, dialogAnatomy, useDialog as _useDialog } from \"@ark-ui/react\";\nimport { type RecipeVariantProps, sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext, styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef, type RefAttributes } from \"react\";\nimport { Heading, Text, type TextProps } from \"./Text\";\n\nconst dialogRecipe = sva({\n  slots: dialogAnatomy.keys(),\n  base: {\n    backdrop: {\n      position: \"fixed\",\n      height: \"100vh\",\n      width: \"100vw\",\n      left: \"0\",\n      top: \"0\",\n      // TODO: Consider if this should be a token. It's probably consistent enough between dark and light mode to be a token.\n      background: \"rgba(1, 1, 1, 0.3)\",\n      _open: {\n        animation: \"backdrop-in\",\n        _motionReduce: {\n          animation: \"none\",\n        },\n      },\n      _closed: {\n        animation: \"backdrop-out\",\n        _motionReduce: {\n          animation: \"none\",\n        },\n      },\n    },\n    positioner: {\n      position: \"fixed\",\n      display: \"flex\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n      overflow: \"hidden\",\n      left: \"0\",\n      top: \"0\",\n      width: \"100vw\",\n      height: \"100dvh\",\n    },\n    content: {\n      \"--margin\": \"token(sizes.medium)\",\n      position: \"relative\",\n      background: \"surface.default\",\n      boxShadow: \"xlarge\",\n      height: \"min-content\",\n      maxWidth: \"95%\",\n      maxHeight: \"95%\",\n      margin: \"auto\",\n      overflowY: \"auto\",\n      borderRadius: { base: \"sharp\", tablet: \"small\" },\n      paddingBlockStart: \"env(safe-area-inset-top)\",\n      paddingBlockEnd: \"env(safe-area-inset-bottom)\",\n      paddingInlineStart: \"env(safe-area-inset-left)\",\n      paddingInlineEnd: \"env(safe-area-inset-right)\",\n      tabletDown: {\n        \"--margin\": \"0px\",\n        minWidth: \"100%\",\n        minHeight: \"100%\",\n      },\n    },\n  },\n  defaultVariants: {\n    size: \"medium\",\n    position: \"center\",\n    variant: \"dialog\",\n    context: \"dialog\",\n  },\n  compoundVariants: [\n    {\n      variant: \"drawer\",\n      position: \"left\",\n      css: {\n        content: {\n          minHeight: \"100%\",\n          maxHeight: \"100%\",\n          width: \"var(--size)\",\n          _open: {\n            animation: \"drawer-in-left\",\n            _motionReduce: {\n              animation: \"none\",\n            },\n          },\n          _closed: {\n            animation: \"drawer-out-left\",\n            _motionReduce: {\n              animation: \"none\",\n            },\n          },\n        },\n      },\n    },\n    {\n      variant: \"drawer\",\n      position: \"right\",\n      css: {\n        content: {\n          minHeight: \"100%\",\n          maxHeight: \"100%\",\n          width: \"var(--size)\",\n          _open: {\n            animation: \"drawer-in-right\",\n            _motionReduce: {\n              animation: \"none\",\n            },\n          },\n          _closed: {\n            animation: \"drawer-out-right\",\n            _motionReduce: {\n              animation: \"none\",\n            },\n          },\n        },\n      },\n    },\n    {\n      variant: \"drawer\",\n      position: \"top\",\n      css: {\n        content: {\n          minWidth: \"100%\",\n          maxWidth: \"100%\",\n          height: \"var(--size)\",\n          _open: {\n            animation: \"drawer-in-top\",\n            _motionReduce: {\n              animation: \"none\",\n            },\n          },\n          _closed: {\n            animation: \"drawer-out-top\",\n            _motionReduce: {\n              animation: \"none\",\n            },\n          },\n        },\n      },\n    },\n    {\n      variant: \"drawer\",\n      position: \"bottom\",\n      css: {\n        content: {\n          minWidth: \"100%\",\n          maxWidth: \"100%\",\n          height: \"var(--size)\",\n          _open: {\n            animation: \"drawer-in-bottom\",\n            _motionReduce: {\n              animation: \"none\",\n            },\n          },\n          _closed: {\n            animation: \"drawer-out-bottom\",\n            _motionReduce: {\n              animation: \"none\",\n            },\n          },\n        },\n      },\n    },\n    {\n      variant: \"drawer\",\n      size: \"xsmall\",\n      css: {\n        content: {\n          \"--size\": \"sizes.surface.3xsmall\",\n        },\n      },\n    },\n    {\n      variant: \"drawer\",\n      size: \"small\",\n      css: {\n        content: {\n          \"--size\": \"sizes.surface.xsmall\",\n        },\n      },\n    },\n    {\n      variant: \"drawer\",\n      size: \"medium\",\n      css: {\n        content: {\n          \"--size\": \"sizes.surface.medium\",\n        },\n      },\n    },\n    {\n      variant: \"drawer\",\n      size: \"large\",\n      css: {\n        content: {\n          \"--size\": \"sizes.surface.xlarge\",\n        },\n      },\n    },\n  ],\n  variants: {\n    context: {\n      dialog: {\n        positioner: {\n          zIndex: \"modal\",\n        },\n        backdrop: {\n          zIndex: \"overlay\",\n        },\n      },\n      alert: {\n        positioner: {\n          zIndex: \"alertModal\",\n        },\n        backdrop: {\n          zIndex: \"alertModalOverlay\",\n        },\n      },\n    },\n    variant: {\n      drawer: {\n        content: {\n          \"--margin\": \"0px\",\n          borderRadius: { base: \"sharp\", tablet: \"sharp\" },\n        },\n      },\n      dialog: {\n        content: {\n          width: \"var(--size)\",\n          _open: {\n            animation: \"dialog-in\",\n            _motionReduce: {\n              animation: \"none\",\n            },\n          },\n          _closed: {\n            animation: \"dialog-out\",\n            _motionReduce: {\n              animation: \"none\",\n            },\n          },\n        },\n      },\n    },\n    position: {\n      left: {\n        content: {\n          marginInlineStart: \"var(--margin)\",\n        },\n      },\n      center: {},\n      right: {\n        content: {\n          marginInlineEnd: \"var(--margin)\",\n        },\n      },\n      bottom: {\n        content: {\n          marginBlockEnd: \"var(--margin)\",\n        },\n      },\n      top: {\n        content: {\n          marginBlockStart: \"var(--margin)\",\n        },\n      },\n    },\n    size: {\n      full: {\n        content: {\n          \"--margin\": \"0px\",\n          minHeight: \"100%\",\n          minWidth: \"100%\",\n          borderRadius: \"sharp\",\n        },\n      },\n      xsmall: {\n        content: {\n          \"--size\": \"sizes.surface.xsmall\",\n        },\n      },\n      small: {\n        content: {\n          \"--size\": \"sizes.surface.medium\",\n        },\n      },\n      medium: {\n        content: {\n          \"--size\": \"sizes.surface.xlarge\",\n        },\n      },\n      large: {\n        content: {\n          \"--size\": \"sizes.surface.4xlarge\",\n        },\n      },\n    },\n  },\n});\n\nconst { withRootProvider, withContext } = createStyleContext(dialogRecipe);\n\nexport type DialogVariantProps = NonNullable<RecipeVariantProps<typeof dialogRecipe>>;\n\nexport interface DialogRootProps extends Dialog.RootProps, DialogVariantProps {}\n\nexport const InternalDialogRoot = withRootProvider(Dialog.Root);\n\nexport const DialogRoot = ({ lazyMount = true, unmountOnExit = true, ...props }: DialogRootProps) => (\n  <InternalDialogRoot lazyMount={lazyMount} unmountOnExit={unmountOnExit} {...props} />\n);\n\nexport const DialogBackdrop = withContext(Dialog.Backdrop, \"backdrop\", { baseComponent: true });\n\nexport const DialogStandaloneContent = withContext(Dialog.Content, \"content\", { baseComponent: true });\n\nexport const DialogPositioner = withContext(Dialog.Positioner, \"positioner\", { baseComponent: true });\n\ninterface DialogContentProps extends Dialog.ContentProps, StyledProps {}\n\nexport const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>((props, ref) => (\n  <>\n    <DialogBackdrop />\n    <DialogPositioner>\n      <DialogStandaloneContent ref={ref} {...props} />\n    </DialogPositioner>\n  </>\n));\n\nconst InternalDialogDescription = withContext(Dialog.Description, \"description\");\n\ninterface DialogDescriptionProps\n  extends Omit<Dialog.DescriptionProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLParagraphElement> {}\n\nexport const DialogDescription = ({ textStyle = \"body.large\", children, ...rest }: DialogDescriptionProps) => {\n  return (\n    <InternalDialogDescription asChild>\n      <Text textStyle={textStyle} {...rest}>\n        {children}\n      </Text>\n    </InternalDialogDescription>\n  );\n};\n\nconst InternalDialogTitle = withContext(Dialog.Title, \"title\");\n\ninterface DialogTitleProps\n  extends Omit<Dialog.TitleProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLHeadingElement> {}\n\nexport const DialogTitle = ({ textStyle = \"title.medium\", children, ...rest }: DialogTitleProps) => (\n  <InternalDialogTitle asChild>\n    <Heading textStyle={textStyle} {...rest}>\n      {children}\n    </Heading>\n  </InternalDialogTitle>\n);\n\nexport const DialogTrigger = withContext(Dialog.Trigger, \"trigger\", { baseComponent: true });\n\nexport const DialogCloseTrigger = withContext(Dialog.CloseTrigger, \"closeTrigger\", { baseComponent: true });\n\nexport const DialogHeader = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    paddingInline: \"medium\",\n    paddingBlockStart: \"medium\",\n    justifyContent: \"space-between\",\n    alignItems: \"center\",\n    gap: \"xsmall\",\n  },\n});\n\nexport const DialogBody = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"xsmall\",\n    paddingInline: \"medium\",\n    paddingBlockStart: \"small\",\n    paddingBlockEnd: \"medium\",\n  },\n});\n\nexport const DialogFooter = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    gap: \"3xsmall\",\n    alignItems: \"center\",\n    justifyContent: \"flex-end\",\n    paddingInline: \"medium\",\n    paddingBlockStart: \"small\",\n    paddingBlockEnd: \"medium\",\n  },\n});\n\nexport const DialogRootProvider = withRootProvider(Dialog.RootProvider);\n\nexport const useDialog = _useDialog;\n"],"mappings":";;;;;;;;;;;;;;AAoTA,MAAM,EAAE,kBAAkB,iBAAA,GAAA,wBAAA,qBAAA,GAAA,wBAAA,KArSD;CACvB,OAAOA,cAAAA,cAAc,KAAK;CAC1B,MAAM;EACJ,UAAU;GACR,UAAU;GACV,QAAQ;GACR,OAAO;GACP,MAAM;GACN,KAAK;GAEL,YAAY;GACZ,OAAO;IACL,WAAW;IACX,eAAe,EACb,WAAW,OACb;GACF;GACA,SAAS;IACP,WAAW;IACX,eAAe,EACb,WAAW,OACb;GACF;EACF;EACA,YAAY;GACV,UAAU;GACV,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,UAAU;GACV,MAAM;GACN,KAAK;GACL,OAAO;GACP,QAAQ;EACV;EACA,SAAS;GACP,YAAY;GACZ,UAAU;GACV,YAAY;GACZ,WAAW;GACX,QAAQ;GACR,UAAU;GACV,WAAW;GACX,QAAQ;GACR,WAAW;GACX,cAAc;IAAE,MAAM;IAAS,QAAQ;GAAQ;GAC/C,mBAAmB;GACnB,iBAAiB;GACjB,oBAAoB;GACpB,kBAAkB;GAClB,YAAY;IACV,YAAY;IACZ,UAAU;IACV,WAAW;GACb;EACF;CACF;CACA,iBAAiB;EACf,MAAM;EACN,UAAU;EACV,SAAS;EACT,SAAS;CACX;CACA,kBAAkB;EAChB;GACE,SAAS;GACT,UAAU;GACV,KAAK,EACH,SAAS;IACP,WAAW;IACX,WAAW;IACX,OAAO;IACP,OAAO;KACL,WAAW;KACX,eAAe,EACb,WAAW,OACb;IACF;IACA,SAAS;KACP,WAAW;KACX,eAAe,EACb,WAAW,OACb;IACF;GACF,EACF;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,KAAK,EACH,SAAS;IACP,WAAW;IACX,WAAW;IACX,OAAO;IACP,OAAO;KACL,WAAW;KACX,eAAe,EACb,WAAW,OACb;IACF;IACA,SAAS;KACP,WAAW;KACX,eAAe,EACb,WAAW,OACb;IACF;GACF,EACF;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,KAAK,EACH,SAAS;IACP,UAAU;IACV,UAAU;IACV,QAAQ;IACR,OAAO;KACL,WAAW;KACX,eAAe,EACb,WAAW,OACb;IACF;IACA,SAAS;KACP,WAAW;KACX,eAAe,EACb,WAAW,OACb;IACF;GACF,EACF;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,KAAK,EACH,SAAS;IACP,UAAU;IACV,UAAU;IACV,QAAQ;IACR,OAAO;KACL,WAAW;KACX,eAAe,EACb,WAAW,OACb;IACF;IACA,SAAS;KACP,WAAW;KACX,eAAe,EACb,WAAW,OACb;IACF;GACF,EACF;EACF;EACA;GACE,SAAS;GACT,MAAM;GACN,KAAK,EACH,SAAS,EACP,UAAU,wBACZ,EACF;EACF;EACA;GACE,SAAS;GACT,MAAM;GACN,KAAK,EACH,SAAS,EACP,UAAU,uBACZ,EACF;EACF;EACA;GACE,SAAS;GACT,MAAM;GACN,KAAK,EACH,SAAS,EACP,UAAU,uBACZ,EACF;EACF;EACA;GACE,SAAS;GACT,MAAM;GACN,KAAK,EACH,SAAS,EACP,UAAU,uBACZ,EACF;EACF;CACF;CACA,UAAU;EACR,SAAS;GACP,QAAQ;IACN,YAAY,EACV,QAAQ,QACV;IACA,UAAU,EACR,QAAQ,UACV;GACF;GACA,OAAO;IACL,YAAY,EACV,QAAQ,aACV;IACA,UAAU,EACR,QAAQ,oBACV;GACF;EACF;EACA,SAAS;GACP,QAAQ,EACN,SAAS;IACP,YAAY;IACZ,cAAc;KAAE,MAAM;KAAS,QAAQ;IAAQ;GACjD,EACF;GACA,QAAQ,EACN,SAAS;IACP,OAAO;IACP,OAAO;KACL,WAAW;KACX,eAAe,EACb,WAAW,OACb;IACF;IACA,SAAS;KACP,WAAW;KACX,eAAe,EACb,WAAW,OACb;IACF;GACF,EACF;EACF;EACA,UAAU;GACR,MAAM,EACJ,SAAS,EACP,mBAAmB,gBACrB,EACF;GACA,QAAQ,CAAC;GACT,OAAO,EACL,SAAS,EACP,iBAAiB,gBACnB,EACF;GACA,QAAQ,EACN,SAAS,EACP,gBAAgB,gBAClB,EACF;GACA,KAAK,EACH,SAAS,EACP,kBAAkB,gBACpB,EACF;EACF;EACA,MAAM;GACJ,MAAM,EACJ,SAAS;IACP,YAAY;IACZ,WAAW;IACX,UAAU;IACV,cAAc;GAChB,EACF;GACA,QAAQ,EACN,SAAS,EACP,UAAU,uBACZ,EACF;GACA,OAAO,EACL,SAAS,EACP,UAAU,uBACZ,EACF;GACA,QAAQ,EACN,SAAS,EACP,UAAU,uBACZ,EACF;GACA,OAAO,EACL,SAAS,EACP,UAAU,wBACZ,EACF;EACF;CACF;AACF,CAEwE,CAAC;AAMzE,MAAa,qBAAqB,iBAAiBC,cAAAA,OAAO,IAAI;AAE9D,MAAa,cAAc,EAAE,YAAY,MAAM,gBAAgB,MAAM,GAAG,YACtE,iBAAA,GAAA,kBAAA,KAAC,oBAAD;CAA+B;CAA0B;CAAe,GAAI;AAAQ,CAAA;AAGtF,MAAa,iBAAiB,YAAYA,cAAAA,OAAO,UAAU,YAAY,EAAE,eAAe,KAAK,CAAC;AAE9F,MAAa,0BAA0B,YAAYA,cAAAA,OAAO,SAAS,WAAW,EAAE,eAAe,KAAK,CAAC;AAErG,MAAa,mBAAmB,YAAYA,cAAAA,OAAO,YAAY,cAAc,EAAE,eAAe,KAAK,CAAC;AAIpG,MAAa,iBAAA,GAAA,MAAA,aAAgE,OAAO,QAClF,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAC,gBAAD,CAAiB,CAAA,GACjB,iBAAA,GAAA,kBAAA,KAAC,kBAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAC,yBAAD;CAA8B;CAAK,GAAI;AAAQ,CAAA,EAC/B,CAAA,CAClB,EAAA,CAAA,CACH;AAED,MAAM,4BAA4B,YAAYA,cAAAA,OAAO,aAAa,aAAa;AAK/E,MAAa,qBAAqB,EAAE,YAAY,cAAc,UAAU,GAAG,WAAmC;CAC5G,OACE,iBAAA,GAAA,kBAAA,KAAC,2BAAD;EAA2B,SAAA;YACzB,iBAAA,GAAA,kBAAA,KAACC,aAAAA,MAAD;GAAiB;GAAW,GAAI;GAC7B;EACG,CAAA;CACmB,CAAA;AAE/B;AAEA,MAAM,sBAAsB,YAAYD,cAAAA,OAAO,OAAO,OAAO;AAK7D,MAAa,eAAe,EAAE,YAAY,gBAAgB,UAAU,GAAG,WACrE,iBAAA,GAAA,kBAAA,KAAC,qBAAD;CAAqB,SAAA;WACnB,iBAAA,GAAA,kBAAA,KAACE,aAAAA,SAAD;EAAoB;EAAW,GAAI;EAChC;CACM,CAAA;AACU,CAAA;AAGvB,MAAa,gBAAgB,YAAYF,cAAAA,OAAO,SAAS,WAAW,EAAE,eAAe,KAAK,CAAC;AAE3F,MAAa,qBAAqB,YAAYA,cAAAA,OAAO,cAAc,gBAAgB,EAAE,eAAe,KAAK,CAAC;AAE1G,MAAa,gBAAA,GAAA,wBAAA,QAAsB,OAAO,EACxC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,mBAAmB;CACnB,gBAAgB;CAChB,YAAY;CACZ,KAAK;AACP,EACF,CAAC;AAED,MAAa,cAAA,GAAA,wBAAA,QAAoB,OAAO,EACtC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,eAAe;CACf,mBAAmB;CACnB,iBAAiB;AACnB,EACF,CAAC;AAED,MAAa,gBAAA,GAAA,wBAAA,QAAsB,OAAO,EACxC,MAAM;CACJ,SAAS;CACT,KAAK;CACL,YAAY;CACZ,gBAAgB;CAChB,eAAe;CACf,mBAAmB;CACnB,iBAAiB;AACnB,EACF,CAAC;AAED,MAAa,qBAAqB,iBAAiBA,cAAAA,OAAO,YAAY;AAEtE,MAAa,YAAYG,cAAAA"}
+{"version":3,"file":"Dialog.js","names":["dialogAnatomy","Dialog","Text","Heading","_useDialog"],"sources":["../src/Dialog.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Dialog, dialogAnatomy, useDialog as _useDialog } from \"@ark-ui/react/dialog\";\nimport { type RecipeVariantProps, sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext, styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef, type RefAttributes } from \"react\";\nimport { Heading, Text, type TextProps } from \"./Text\";\n\nconst dialogRecipe = sva({\n  slots: dialogAnatomy.keys(),\n  base: {\n    backdrop: {\n      position: \"fixed\",\n      height: \"100vh\",\n      width: \"100vw\",\n      left: \"0\",\n      top: \"0\",\n      // TODO: Consider if this should be a token. It's probably consistent enough between dark and light mode to be a token.\n      background: \"rgba(1, 1, 1, 0.3)\",\n      _open: {\n        animation: \"backdrop-in\",\n        _motionReduce: {\n          animation: \"none\",\n        },\n      },\n      _closed: {\n        animation: \"backdrop-out\",\n        _motionReduce: {\n          animation: \"none\",\n        },\n      },\n    },\n    positioner: {\n      position: \"fixed\",\n      display: \"flex\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n      overflow: \"hidden\",\n      left: \"0\",\n      top: \"0\",\n      width: \"100vw\",\n      height: \"100dvh\",\n    },\n    content: {\n      \"--margin\": \"token(sizes.medium)\",\n      position: \"relative\",\n      background: \"surface.default\",\n      boxShadow: \"xlarge\",\n      height: \"min-content\",\n      maxWidth: \"95%\",\n      maxHeight: \"95%\",\n      margin: \"auto\",\n      overflowY: \"auto\",\n      borderRadius: { base: \"sharp\", tablet: \"small\" },\n      paddingBlockStart: \"env(safe-area-inset-top)\",\n      paddingBlockEnd: \"env(safe-area-inset-bottom)\",\n      paddingInlineStart: \"env(safe-area-inset-left)\",\n      paddingInlineEnd: \"env(safe-area-inset-right)\",\n      tabletDown: {\n        \"--margin\": \"0px\",\n        minWidth: \"100%\",\n        minHeight: \"100%\",\n      },\n    },\n  },\n  defaultVariants: {\n    size: \"medium\",\n    position: \"center\",\n    variant: \"dialog\",\n    context: \"dialog\",\n  },\n  compoundVariants: [\n    {\n      variant: \"drawer\",\n      position: \"left\",\n      css: {\n        content: {\n          minHeight: \"100%\",\n          maxHeight: \"100%\",\n          width: \"var(--size)\",\n          _open: {\n            animation: \"drawer-in-left\",\n            _motionReduce: {\n              animation: \"none\",\n            },\n          },\n          _closed: {\n            animation: \"drawer-out-left\",\n            _motionReduce: {\n              animation: \"none\",\n            },\n          },\n        },\n      },\n    },\n    {\n      variant: \"drawer\",\n      position: \"right\",\n      css: {\n        content: {\n          minHeight: \"100%\",\n          maxHeight: \"100%\",\n          width: \"var(--size)\",\n          _open: {\n            animation: \"drawer-in-right\",\n            _motionReduce: {\n              animation: \"none\",\n            },\n          },\n          _closed: {\n            animation: \"drawer-out-right\",\n            _motionReduce: {\n              animation: \"none\",\n            },\n          },\n        },\n      },\n    },\n    {\n      variant: \"drawer\",\n      position: \"top\",\n      css: {\n        content: {\n          minWidth: \"100%\",\n          maxWidth: \"100%\",\n          height: \"var(--size)\",\n          _open: {\n            animation: \"drawer-in-top\",\n            _motionReduce: {\n              animation: \"none\",\n            },\n          },\n          _closed: {\n            animation: \"drawer-out-top\",\n            _motionReduce: {\n              animation: \"none\",\n            },\n          },\n        },\n      },\n    },\n    {\n      variant: \"drawer\",\n      position: \"bottom\",\n      css: {\n        content: {\n          minWidth: \"100%\",\n          maxWidth: \"100%\",\n          height: \"var(--size)\",\n          _open: {\n            animation: \"drawer-in-bottom\",\n            _motionReduce: {\n              animation: \"none\",\n            },\n          },\n          _closed: {\n            animation: \"drawer-out-bottom\",\n            _motionReduce: {\n              animation: \"none\",\n            },\n          },\n        },\n      },\n    },\n    {\n      variant: \"drawer\",\n      size: \"xsmall\",\n      css: {\n        content: {\n          \"--size\": \"sizes.surface.3xsmall\",\n        },\n      },\n    },\n    {\n      variant: \"drawer\",\n      size: \"small\",\n      css: {\n        content: {\n          \"--size\": \"sizes.surface.xsmall\",\n        },\n      },\n    },\n    {\n      variant: \"drawer\",\n      size: \"medium\",\n      css: {\n        content: {\n          \"--size\": \"sizes.surface.medium\",\n        },\n      },\n    },\n    {\n      variant: \"drawer\",\n      size: \"large\",\n      css: {\n        content: {\n          \"--size\": \"sizes.surface.xlarge\",\n        },\n      },\n    },\n  ],\n  variants: {\n    context: {\n      dialog: {\n        positioner: {\n          zIndex: \"modal\",\n        },\n        backdrop: {\n          zIndex: \"overlay\",\n        },\n      },\n      alert: {\n        positioner: {\n          zIndex: \"alertModal\",\n        },\n        backdrop: {\n          zIndex: \"alertModalOverlay\",\n        },\n      },\n    },\n    variant: {\n      drawer: {\n        content: {\n          \"--margin\": \"0px\",\n          borderRadius: { base: \"sharp\", tablet: \"sharp\" },\n        },\n      },\n      dialog: {\n        content: {\n          width: \"var(--size)\",\n          _open: {\n            animation: \"dialog-in\",\n            _motionReduce: {\n              animation: \"none\",\n            },\n          },\n          _closed: {\n            animation: \"dialog-out\",\n            _motionReduce: {\n              animation: \"none\",\n            },\n          },\n        },\n      },\n    },\n    position: {\n      left: {\n        content: {\n          marginInlineStart: \"var(--margin)\",\n        },\n      },\n      center: {},\n      right: {\n        content: {\n          marginInlineEnd: \"var(--margin)\",\n        },\n      },\n      bottom: {\n        content: {\n          marginBlockEnd: \"var(--margin)\",\n        },\n      },\n      top: {\n        content: {\n          marginBlockStart: \"var(--margin)\",\n        },\n      },\n    },\n    size: {\n      full: {\n        content: {\n          \"--margin\": \"0px\",\n          minHeight: \"100%\",\n          minWidth: \"100%\",\n          borderRadius: \"sharp\",\n        },\n      },\n      xsmall: {\n        content: {\n          \"--size\": \"sizes.surface.xsmall\",\n        },\n      },\n      small: {\n        content: {\n          \"--size\": \"sizes.surface.medium\",\n        },\n      },\n      medium: {\n        content: {\n          \"--size\": \"sizes.surface.xlarge\",\n        },\n      },\n      large: {\n        content: {\n          \"--size\": \"sizes.surface.4xlarge\",\n        },\n      },\n    },\n  },\n});\n\nconst { withRootProvider, withContext } = createStyleContext(dialogRecipe);\n\nexport type DialogVariantProps = NonNullable<RecipeVariantProps<typeof dialogRecipe>>;\n\nexport interface DialogRootProps extends Dialog.RootProps, DialogVariantProps {}\n\nexport const InternalDialogRoot = withRootProvider(Dialog.Root);\n\nexport const DialogRoot = ({ lazyMount = true, unmountOnExit = true, ...props }: DialogRootProps) => (\n  <InternalDialogRoot lazyMount={lazyMount} unmountOnExit={unmountOnExit} {...props} />\n);\n\nexport const DialogBackdrop = withContext(Dialog.Backdrop, \"backdrop\", { baseComponent: true });\n\nexport const DialogStandaloneContent = withContext(Dialog.Content, \"content\", { baseComponent: true });\n\nexport const DialogPositioner = withContext(Dialog.Positioner, \"positioner\", { baseComponent: true });\n\ninterface DialogContentProps extends Dialog.ContentProps, StyledProps {}\n\nexport const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>((props, ref) => (\n  <>\n    <DialogBackdrop />\n    <DialogPositioner>\n      <DialogStandaloneContent ref={ref} {...props} />\n    </DialogPositioner>\n  </>\n));\n\nconst InternalDialogDescription = withContext(Dialog.Description, \"description\");\n\ninterface DialogDescriptionProps\n  extends Omit<Dialog.DescriptionProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLParagraphElement> {}\n\nexport const DialogDescription = ({ textStyle = \"body.large\", children, ...rest }: DialogDescriptionProps) => {\n  return (\n    <InternalDialogDescription asChild>\n      <Text textStyle={textStyle} {...rest}>\n        {children}\n      </Text>\n    </InternalDialogDescription>\n  );\n};\n\nconst InternalDialogTitle = withContext(Dialog.Title, \"title\");\n\ninterface DialogTitleProps\n  extends Omit<Dialog.TitleProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLHeadingElement> {}\n\nexport const DialogTitle = ({ textStyle = \"title.medium\", children, ...rest }: DialogTitleProps) => (\n  <InternalDialogTitle asChild>\n    <Heading textStyle={textStyle} {...rest}>\n      {children}\n    </Heading>\n  </InternalDialogTitle>\n);\n\nexport const DialogTrigger = withContext(Dialog.Trigger, \"trigger\", { baseComponent: true });\n\nexport const DialogCloseTrigger = withContext(Dialog.CloseTrigger, \"closeTrigger\", { baseComponent: true });\n\nexport const DialogHeader = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    paddingInline: \"medium\",\n    paddingBlockStart: \"medium\",\n    justifyContent: \"space-between\",\n    alignItems: \"center\",\n    gap: \"xsmall\",\n  },\n});\n\nexport const DialogBody = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"xsmall\",\n    paddingInline: \"medium\",\n    paddingBlockStart: \"small\",\n    paddingBlockEnd: \"medium\",\n  },\n});\n\nexport const DialogFooter = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    gap: \"3xsmall\",\n    alignItems: \"center\",\n    justifyContent: \"flex-end\",\n    paddingInline: \"medium\",\n    paddingBlockStart: \"small\",\n    paddingBlockEnd: \"medium\",\n  },\n});\n\nexport const DialogRootProvider = withRootProvider(Dialog.RootProvider);\n\nexport const useDialog = _useDialog;\n"],"mappings":";;;;;;;;;;;;;;AAoTA,MAAM,EAAE,kBAAkB,iBAAA,GAAA,wBAAA,qBAAA,GAAA,wBAAA,KArSD;CACvB,OAAOA,qBAAAA,cAAc,KAAK;CAC1B,MAAM;EACJ,UAAU;GACR,UAAU;GACV,QAAQ;GACR,OAAO;GACP,MAAM;GACN,KAAK;GAEL,YAAY;GACZ,OAAO;IACL,WAAW;IACX,eAAe,EACb,WAAW,OACb;GACF;GACA,SAAS;IACP,WAAW;IACX,eAAe,EACb,WAAW,OACb;GACF;EACF;EACA,YAAY;GACV,UAAU;GACV,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,UAAU;GACV,MAAM;GACN,KAAK;GACL,OAAO;GACP,QAAQ;EACV;EACA,SAAS;GACP,YAAY;GACZ,UAAU;GACV,YAAY;GACZ,WAAW;GACX,QAAQ;GACR,UAAU;GACV,WAAW;GACX,QAAQ;GACR,WAAW;GACX,cAAc;IAAE,MAAM;IAAS,QAAQ;GAAQ;GAC/C,mBAAmB;GACnB,iBAAiB;GACjB,oBAAoB;GACpB,kBAAkB;GAClB,YAAY;IACV,YAAY;IACZ,UAAU;IACV,WAAW;GACb;EACF;CACF;CACA,iBAAiB;EACf,MAAM;EACN,UAAU;EACV,SAAS;EACT,SAAS;CACX;CACA,kBAAkB;EAChB;GACE,SAAS;GACT,UAAU;GACV,KAAK,EACH,SAAS;IACP,WAAW;IACX,WAAW;IACX,OAAO;IACP,OAAO;KACL,WAAW;KACX,eAAe,EACb,WAAW,OACb;IACF;IACA,SAAS;KACP,WAAW;KACX,eAAe,EACb,WAAW,OACb;IACF;GACF,EACF;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,KAAK,EACH,SAAS;IACP,WAAW;IACX,WAAW;IACX,OAAO;IACP,OAAO;KACL,WAAW;KACX,eAAe,EACb,WAAW,OACb;IACF;IACA,SAAS;KACP,WAAW;KACX,eAAe,EACb,WAAW,OACb;IACF;GACF,EACF;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,KAAK,EACH,SAAS;IACP,UAAU;IACV,UAAU;IACV,QAAQ;IACR,OAAO;KACL,WAAW;KACX,eAAe,EACb,WAAW,OACb;IACF;IACA,SAAS;KACP,WAAW;KACX,eAAe,EACb,WAAW,OACb;IACF;GACF,EACF;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,KAAK,EACH,SAAS;IACP,UAAU;IACV,UAAU;IACV,QAAQ;IACR,OAAO;KACL,WAAW;KACX,eAAe,EACb,WAAW,OACb;IACF;IACA,SAAS;KACP,WAAW;KACX,eAAe,EACb,WAAW,OACb;IACF;GACF,EACF;EACF;EACA;GACE,SAAS;GACT,MAAM;GACN,KAAK,EACH,SAAS,EACP,UAAU,wBACZ,EACF;EACF;EACA;GACE,SAAS;GACT,MAAM;GACN,KAAK,EACH,SAAS,EACP,UAAU,uBACZ,EACF;EACF;EACA;GACE,SAAS;GACT,MAAM;GACN,KAAK,EACH,SAAS,EACP,UAAU,uBACZ,EACF;EACF;EACA;GACE,SAAS;GACT,MAAM;GACN,KAAK,EACH,SAAS,EACP,UAAU,uBACZ,EACF;EACF;CACF;CACA,UAAU;EACR,SAAS;GACP,QAAQ;IACN,YAAY,EACV,QAAQ,QACV;IACA,UAAU,EACR,QAAQ,UACV;GACF;GACA,OAAO;IACL,YAAY,EACV,QAAQ,aACV;IACA,UAAU,EACR,QAAQ,oBACV;GACF;EACF;EACA,SAAS;GACP,QAAQ,EACN,SAAS;IACP,YAAY;IACZ,cAAc;KAAE,MAAM;KAAS,QAAQ;IAAQ;GACjD,EACF;GACA,QAAQ,EACN,SAAS;IACP,OAAO;IACP,OAAO;KACL,WAAW;KACX,eAAe,EACb,WAAW,OACb;IACF;IACA,SAAS;KACP,WAAW;KACX,eAAe,EACb,WAAW,OACb;IACF;GACF,EACF;EACF;EACA,UAAU;GACR,MAAM,EACJ,SAAS,EACP,mBAAmB,gBACrB,EACF;GACA,QAAQ,CAAC;GACT,OAAO,EACL,SAAS,EACP,iBAAiB,gBACnB,EACF;GACA,QAAQ,EACN,SAAS,EACP,gBAAgB,gBAClB,EACF;GACA,KAAK,EACH,SAAS,EACP,kBAAkB,gBACpB,EACF;EACF;EACA,MAAM;GACJ,MAAM,EACJ,SAAS;IACP,YAAY;IACZ,WAAW;IACX,UAAU;IACV,cAAc;GAChB,EACF;GACA,QAAQ,EACN,SAAS,EACP,UAAU,uBACZ,EACF;GACA,OAAO,EACL,SAAS,EACP,UAAU,uBACZ,EACF;GACA,QAAQ,EACN,SAAS,EACP,UAAU,uBACZ,EACF;GACA,OAAO,EACL,SAAS,EACP,UAAU,wBACZ,EACF;EACF;CACF;AACF,CAEwE,CAAC;AAMzE,MAAa,qBAAqB,iBAAiBC,qBAAAA,OAAO,IAAI;AAE9D,MAAa,cAAc,EAAE,YAAY,MAAM,gBAAgB,MAAM,GAAG,YACtE,iBAAA,GAAA,kBAAA,KAAC,oBAAD;CAA+B;CAA0B;CAAe,GAAI;AAAQ,CAAA;AAGtF,MAAa,iBAAiB,YAAYA,qBAAAA,OAAO,UAAU,YAAY,EAAE,eAAe,KAAK,CAAC;AAE9F,MAAa,0BAA0B,YAAYA,qBAAAA,OAAO,SAAS,WAAW,EAAE,eAAe,KAAK,CAAC;AAErG,MAAa,mBAAmB,YAAYA,qBAAAA,OAAO,YAAY,cAAc,EAAE,eAAe,KAAK,CAAC;AAIpG,MAAa,iBAAA,GAAA,MAAA,aAAgE,OAAO,QAClF,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAC,gBAAD,CAAiB,CAAA,GACjB,iBAAA,GAAA,kBAAA,KAAC,kBAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAC,yBAAD;CAA8B;CAAK,GAAI;AAAQ,CAAA,EAC/B,CAAA,CAClB,EAAA,CAAA,CACH;AAED,MAAM,4BAA4B,YAAYA,qBAAAA,OAAO,aAAa,aAAa;AAK/E,MAAa,qBAAqB,EAAE,YAAY,cAAc,UAAU,GAAG,WAAmC;CAC5G,OACE,iBAAA,GAAA,kBAAA,KAAC,2BAAD;EAA2B,SAAA;YACzB,iBAAA,GAAA,kBAAA,KAACC,aAAAA,MAAD;GAAiB;GAAW,GAAI;GAC7B;EACG,CAAA;CACmB,CAAA;AAE/B;AAEA,MAAM,sBAAsB,YAAYD,qBAAAA,OAAO,OAAO,OAAO;AAK7D,MAAa,eAAe,EAAE,YAAY,gBAAgB,UAAU,GAAG,WACrE,iBAAA,GAAA,kBAAA,KAAC,qBAAD;CAAqB,SAAA;WACnB,iBAAA,GAAA,kBAAA,KAACE,aAAAA,SAAD;EAAoB;EAAW,GAAI;EAChC;CACM,CAAA;AACU,CAAA;AAGvB,MAAa,gBAAgB,YAAYF,qBAAAA,OAAO,SAAS,WAAW,EAAE,eAAe,KAAK,CAAC;AAE3F,MAAa,qBAAqB,YAAYA,qBAAAA,OAAO,cAAc,gBAAgB,EAAE,eAAe,KAAK,CAAC;AAE1G,MAAa,gBAAA,GAAA,wBAAA,QAAsB,OAAO,EACxC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,mBAAmB;CACnB,gBAAgB;CAChB,YAAY;CACZ,KAAK;AACP,EACF,CAAC;AAED,MAAa,cAAA,GAAA,wBAAA,QAAoB,OAAO,EACtC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,eAAe;CACf,mBAAmB;CACnB,iBAAiB;AACnB,EACF,CAAC;AAED,MAAa,gBAAA,GAAA,wBAAA,QAAsB,OAAO,EACxC,MAAM;CACJ,SAAS;CACT,KAAK;CACL,YAAY;CACZ,gBAAgB;CAChB,eAAe;CACf,mBAAmB;CACnB,iBAAiB;AACnB,EACF,CAAC;AAED,MAAa,qBAAqB,iBAAiBA,qBAAAA,OAAO,YAAY;AAEtE,MAAa,YAAYG,qBAAAA"}

package/lib/ErrorMessage/ErrorMessage.d.ts

@@ -5,12 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { type HTMLArkProps } from "@ark-ui/react";
+import { type HTMLArkProps } from "@ark-ui/react/factory";
 import type { StyledProps } from "@ndla/styled-system/types";
 import { type TextProps } from "../Text";
-export declare const ErrorMessageRoot: import("@ndla/styled-system/jsx").StyleContextProvider<import("react").ForwardRefExoticComponent<import("react").ClassAttributes<HTMLElement> & import("react").HTMLAttributes<HTMLElement> & import("@ark-ui/react").PolymorphicProps>, import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"root" | "content" | "title" | "description" | "actions", import("@ndla/styled-system/types").SlotRecipeVariantRecord<"root" | "content" | "title" | "description" | "actions">>>;
-export declare const ErrorMessageContent: import("@ndla/styled-system/jsx").StyleContextConsumer<import("react").ForwardRefExoticComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("@ark-ui/react").PolymorphicProps>>;
-export declare const ErrorMessageActions: import("@ndla/styled-system/jsx").StyleContextConsumer<import("react").ForwardRefExoticComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("@ark-ui/react").PolymorphicProps>>;
+export declare const ErrorMessageRoot: import("@ndla/styled-system/jsx").StyleContextProvider<import("react").ForwardRefExoticComponent<import("react").ClassAttributes<HTMLElement> & import("react").HTMLAttributes<HTMLElement> & import("@ark-ui/react/factory").PolymorphicProps>, import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"root" | "content" | "title" | "description" | "actions", import("@ndla/styled-system/types").SlotRecipeVariantRecord<"root" | "content" | "title" | "description" | "actions">>>;
+export declare const ErrorMessageContent: import("@ndla/styled-system/jsx").StyleContextConsumer<import("react").ForwardRefExoticComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("@ark-ui/react/factory").PolymorphicProps>>;
+export declare const ErrorMessageActions: import("@ndla/styled-system/jsx").StyleContextConsumer<import("react").ForwardRefExoticComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("@ark-ui/react/factory").PolymorphicProps>>;
 interface ErrorMessageTitleProps extends Omit<HTMLArkProps<"h1">, "color">, StyledProps, TextProps {
 }
 export declare const ErrorMessageTitle: import("@ndla/styled-system/jsx").StyleContextConsumer<import("react").ForwardRefExoticComponent<ErrorMessageTitleProps & import("react").RefAttributes<HTMLHeadingElement>>>;

package/lib/ErrorMessage/ErrorMessage.js

@@ -1,8 +1,8 @@
 const require_Text = require("../Text.js");
-let _ark_ui_react = require("@ark-ui/react");
 let _ndla_styled_system_css = require("@ndla/styled-system/css");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react_jsx_runtime = require("react/jsx-runtime");
+let _ark_ui_react_factory = require("@ark-ui/react/factory");
 let react = require("react");
 //#region src/ErrorMessage/ErrorMessage.tsx
 /**
@@ -43,9 +43,9 @@ const { withProvider, withContext } = (0, _ndla_styled_system_jsx.createStyleCon
 		description: { textAlign: "center" }
 	}
 }));
-const ErrorMessageRoot = withProvider(_ark_ui_react.ark.article, "root", { baseComponent: true });
-const ErrorMessageContent = withContext(_ark_ui_react.ark.div, "content", { baseComponent: true });
-const ErrorMessageActions = withContext(_ark_ui_react.ark.div, "actions", { baseComponent: true });
+const ErrorMessageRoot = withProvider(_ark_ui_react_factory.ark.article, "root", { baseComponent: true });
+const ErrorMessageContent = withContext(_ark_ui_react_factory.ark.div, "content", { baseComponent: true });
+const ErrorMessageActions = withContext(_ark_ui_react_factory.ark.div, "actions", { baseComponent: true });
 const ErrorMessageTitle = withContext((0, react.forwardRef)(({ textStyle = "heading.small", ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Heading, {
 	textStyle,
 	...props,

package/lib/ErrorMessage/ErrorMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorMessage.js","names":["ark","Heading","Text"],"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,iBAAA,GAAA,wBAAA,qBAAA,GAAA,wBAAA,KA9BS;CAC7B,OAAO;EAAC;EAAQ;EAAW;EAAW;EAAS;CAAa;CAC5D,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,KAAK;GACL,YAAY;EACd;EACA,SAAS;GACP,SAAS;GACT,eAAe;GACf,KAAK;GACL,YAAY;EACd;EACA,SAAS;GACP,SAAS;GACT,eAAe;GACf,KAAK;GACL,YAAY;EACd;EACA,OAAO,EACL,WAAW,SACb;EACA,aAAa,EACX,WAAW,SACb;CACF;AACF,CAE0E,CAAC;AAE3E,MAAa,mBAAmB,aAAaA,cAAAA,IAAI,SAAS,QAAQ,EAAE,eAAe,KAAK,CAAC;AAEzF,MAAa,sBAAsB,YAAYA,cAAAA,IAAI,KAAK,WAAW,EAAE,eAAe,KAAK,CAAC;AAE1F,MAAa,sBAAsB,YAAYA,cAAAA,IAAI,KAAK,WAAW,EAAE,eAAe,KAAK,CAAC;AAQ1F,MAAa,oBAAoB,aAJ3B,GAAA,MAAA,aACH,EAAE,YAAY,iBAAiB,GAAG,SAAS,QAAQ,iBAAA,GAAA,kBAAA,KAACC,aAAAA,SAAD;CAAoB;CAAW,GAAI;CAAY;AAAM,CAAA,CAG9D,GAA2B,OAAO;AAQ/E,MAAa,0BAA0B,aAJjC,GAAA,MAAA,aACH,EAAE,YAAY,eAAe,GAAG,SAAS,QAAQ,iBAAA,GAAA,kBAAA,KAACC,aAAAA,MAAD;CAAiB;CAAW,GAAI;CAAY;AAAM,CAAA,CAGnD,GAAiC,aAAa"}
+{"version":3,"file":"ErrorMessage.js","names":["ark","Heading","Text"],"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/factory\";\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,iBAAA,GAAA,wBAAA,qBAAA,GAAA,wBAAA,KA9BS;CAC7B,OAAO;EAAC;EAAQ;EAAW;EAAW;EAAS;CAAa;CAC5D,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,KAAK;GACL,YAAY;EACd;EACA,SAAS;GACP,SAAS;GACT,eAAe;GACf,KAAK;GACL,YAAY;EACd;EACA,SAAS;GACP,SAAS;GACT,eAAe;GACf,KAAK;GACL,YAAY;EACd;EACA,OAAO,EACL,WAAW,SACb;EACA,aAAa,EACX,WAAW,SACb;CACF;AACF,CAE0E,CAAC;AAE3E,MAAa,mBAAmB,aAAaA,sBAAAA,IAAI,SAAS,QAAQ,EAAE,eAAe,KAAK,CAAC;AAEzF,MAAa,sBAAsB,YAAYA,sBAAAA,IAAI,KAAK,WAAW,EAAE,eAAe,KAAK,CAAC;AAE1F,MAAa,sBAAsB,YAAYA,sBAAAA,IAAI,KAAK,WAAW,EAAE,eAAe,KAAK,CAAC;AAQ1F,MAAa,oBAAoB,aAJ3B,GAAA,MAAA,aACH,EAAE,YAAY,iBAAiB,GAAG,SAAS,QAAQ,iBAAA,GAAA,kBAAA,KAACC,aAAAA,SAAD;CAAoB;CAAW,GAAI;CAAY;AAAM,CAAA,CAG9D,GAA2B,OAAO;AAQ/E,MAAa,0BAA0B,aAJjC,GAAA,MAAA,aACH,EAAE,YAAY,eAAe,GAAG,SAAS,QAAQ,iBAAA,GAAA,kBAAA,KAACC,aAAAA,MAAD;CAAiB;CAAW,GAAI;CAAY;AAAM,CAAA,CAGnD,GAAiC,aAAa"}

package/lib/ExpandableBox.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { type HTMLArkProps } from "@ark-ui/react";
+import { type HTMLArkProps } from "@ark-ui/react/factory";
 import type { StyledProps } from "@ndla/styled-system/types";
 export interface ExpandableBoxProps extends HTMLArkProps<"details">, StyledProps {
 }

package/lib/ExpandableBox.js

@@ -1,6 +1,6 @@
-let _ark_ui_react = require("@ark-ui/react");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react_jsx_runtime = require("react/jsx-runtime");
+let _ark_ui_react_factory = require("@ark-ui/react/factory");
 let react = require("react");
 //#region src/ExpandableBox.tsx
 /**
@@ -10,7 +10,7 @@ let react = require("react");
 * LICENSE file in the root directory of this source tree.
 *
 */
-const StyledExpandableBox = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react.ark.details, { base: {
+const StyledExpandableBox = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react_factory.ark.details, { base: {
 	transitionDuration: "fast",
 	width: "100%",
 	position: "relative",
@@ -54,7 +54,7 @@ const ExpandableBox = (0, react.forwardRef)((props, ref) => {
 		ref
 	});
 });
-const StyledExpandableBoxSummary = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react.ark.summary, { base: {
+const StyledExpandableBoxSummary = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react_factory.ark.summary, { base: {
 	cursor: "pointer",
 	margin: "-medium",
 	padding: "medium",

package/lib/ExpandableBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpandableBox.js","names":["ark"],"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,uBAAA,GAAA,wBAAA,QACJA,cAAAA,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,WAClB;CACF;AACF,EACF,GACA,EAAE,eAAe,KAAK,CACxB;AAEA,MAAM,iBAAiB,MAAa;CAElC,SADiC,iBAAiB,SACpC,EAAE,SAAS,YAAY;EACnC,IAAI,CAAC,QAAQ,aAAa,MAAM,GAAG;GACjC,QAAQ,aAAa,mBAAmB,MAAM;GAC9C,QAAQ,aAAa,QAAQ,MAAM;EACrC;CACF,CAAC;AACH;AAEA,MAAM,gBAAgB,MAAa;CAEjC,SADiC,iBAAiB,0BACpC,EAAE,SAAS,YAAY;EACnC,QAAQ,gBAAgB,iBAAiB;EACzC,QAAQ,gBAAgB,MAAM;CAChC,CAAC;AACH;AAEA,MAAa,iBAAA,GAAA,MAAA,aAAoE,OAAO,QAAQ;CAC9F,CAAA,GAAA,MAAA,iBAAgB;EACd,OAAO,iBAAiB,eAAe,aAAa;EACpD,OAAO,iBAAiB,cAAc,YAAY;EAClD,aAAa;GACX,OAAO,oBAAoB,eAAe,aAAa;GACvD,OAAO,oBAAoB,cAAc,YAAY;EACvD;CACF,GAAG,CAAC,CAAC;CACL,OAAO,iBAAA,GAAA,kBAAA,KAAC,qBAAD;EAAqB,GAAI;EAAO,mBAAgB;EAAsB;CAAM,CAAA;AACrF,CAAC;AAID,MAAM,8BAAA,GAAA,wBAAA,QACJA,cAAAA,IAAI,SACJ,EACE,MAAM;CACJ,QAAQ;CACR,QAAQ;CACR,SAAS;CACT,WAAW;CACX,QAAQ,EACN,OAAO,cACT;CACA,SAAS;EACP,SAAS;EACT,WAAW;CACb;AACF,EACF,GACA,EAAE,eAAe,KAAK,CACxB;AAEA,MAAa,wBAAA,GAAA,MAAA,aAA2E,OAAO,QAC7F,iBAAA,GAAA,kBAAA,KAAC,4BAAD;CAA4B,GAAI;CAAO,mBAAgB;CAA8B;AAAM,CAAA,CAC5F"}
+{"version":3,"file":"ExpandableBox.js","names":["ark"],"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/factory\";\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,uBAAA,GAAA,wBAAA,QACJA,sBAAAA,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,WAClB;CACF;AACF,EACF,GACA,EAAE,eAAe,KAAK,CACxB;AAEA,MAAM,iBAAiB,MAAa;CAElC,SADiC,iBAAiB,SACpC,EAAE,SAAS,YAAY;EACnC,IAAI,CAAC,QAAQ,aAAa,MAAM,GAAG;GACjC,QAAQ,aAAa,mBAAmB,MAAM;GAC9C,QAAQ,aAAa,QAAQ,MAAM;EACrC;CACF,CAAC;AACH;AAEA,MAAM,gBAAgB,MAAa;CAEjC,SADiC,iBAAiB,0BACpC,EAAE,SAAS,YAAY;EACnC,QAAQ,gBAAgB,iBAAiB;EACzC,QAAQ,gBAAgB,MAAM;CAChC,CAAC;AACH;AAEA,MAAa,iBAAA,GAAA,MAAA,aAAoE,OAAO,QAAQ;CAC9F,CAAA,GAAA,MAAA,iBAAgB;EACd,OAAO,iBAAiB,eAAe,aAAa;EACpD,OAAO,iBAAiB,cAAc,YAAY;EAClD,aAAa;GACX,OAAO,oBAAoB,eAAe,aAAa;GACvD,OAAO,oBAAoB,cAAc,YAAY;EACvD;CACF,GAAG,CAAC,CAAC;CACL,OAAO,iBAAA,GAAA,kBAAA,KAAC,qBAAD;EAAqB,GAAI;EAAO,mBAAgB;EAAsB;CAAM,CAAA;AACrF,CAAC;AAID,MAAM,8BAAA,GAAA,wBAAA,QACJA,sBAAAA,IAAI,SACJ,EACE,MAAM;CACJ,QAAQ;CACR,QAAQ;CACR,SAAS;CACT,WAAW;CACX,QAAQ,EACN,OAAO,cACT;CACA,SAAS;EACP,SAAS;EACT,WAAW;CACb;AACF,EACF,GACA,EAAE,eAAe,KAAK,CACxB;AAEA,MAAa,wBAAA,GAAA,MAAA,aAA2E,OAAO,QAC7F,iBAAA,GAAA,kBAAA,KAAC,4BAAD;CAA4B,GAAI;CAAO,mBAAgB;CAA8B;AAAM,CAAA,CAC5F"}

package/lib/Field.d.ts

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { Field, Fieldset } from "@ark-ui/react";
+import { Field } from "@ark-ui/react/field";
+import { Fieldset } from "@ark-ui/react/fieldset";
 export declare const FieldRoot: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<Field.RootProps & import("react").RefAttributes<HTMLDivElement>>, {}>;
 export declare const FieldsetRoot: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<Fieldset.RootProps & import("react").RefAttributes<HTMLFieldSetElement>>, {}>;

package/lib/Field.js

@@ -1,5 +1,6 @@
-let _ark_ui_react = require("@ark-ui/react");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
+let _ark_ui_react_field = require("@ark-ui/react/field");
+let _ark_ui_react_fieldset = require("@ark-ui/react/fieldset");
 //#region src/Field.tsx
 /**
 * Copyright (c) 2024-present, NDLA.
@@ -13,8 +14,8 @@ const rootStyle = {
 	flexDirection: "column",
 	gap: "3xsmall"
 };
-const FieldRoot = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react.Field.Root, { base: rootStyle }, { baseComponent: true });
-const FieldsetRoot = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react.Fieldset.Root, { base: rootStyle }, { baseComponent: true });
+const FieldRoot = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react_field.Field.Root, { base: rootStyle }, { baseComponent: true });
+const FieldsetRoot = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react_fieldset.Fieldset.Root, { base: rootStyle }, { baseComponent: true });
 //#endregion
 exports.FieldRoot = FieldRoot;
 exports.FieldsetRoot = FieldsetRoot;

package/lib/Field.js.map

@@ -1 +1 @@
-{"version":3,"file":"Field.js","names":["Field","Fieldset"],"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;AACP;AAEA,MAAa,aAAA,GAAA,wBAAA,QAAmBA,cAAAA,MAAM,MAAM,EAAE,MAAM,UAAU,GAAG,EAAE,eAAe,KAAK,CAAC;AAExF,MAAa,gBAAA,GAAA,wBAAA,QAAsBC,cAAAA,SAAS,MAAM,EAAE,MAAM,UAAU,GAAG,EAAE,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Field.js","names":["Field","Fieldset"],"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 } from \"@ark-ui/react/field\";\nimport { Fieldset } from \"@ark-ui/react/fieldset\";\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":";;;;;;;;;;;AAaA,MAAM,YAA+B;CACnC,SAAS;CACT,eAAe;CACf,KAAK;AACP;AAEA,MAAa,aAAA,GAAA,wBAAA,QAAmBA,oBAAAA,MAAM,MAAM,EAAE,MAAM,UAAU,GAAG,EAAE,eAAe,KAAK,CAAC;AAExF,MAAa,gBAAA,GAAA,wBAAA,QAAsBC,uBAAAA,SAAS,MAAM,EAAE,MAAM,UAAU,GAAG,EAAE,eAAe,KAAK,CAAC"}

package/lib/FieldErrorMessage.d.ts

@@ -5,7 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { Field, Fieldset } from "@ark-ui/react";
+import { Field } from "@ark-ui/react/field";
+import { Fieldset } from "@ark-ui/react/fieldset";
 import type { StyledProps } from "@ndla/styled-system/types";
 import type { TextProps } from "./Text";
 export interface FieldErrorMessageProps extends Omit<Field.ErrorTextProps, "color">, TextProps, StyledProps {

package/lib/FieldErrorMessage.js

@@ -1,8 +1,9 @@
-let _ark_ui_react = require("@ark-ui/react");
 let _ndla_styled_system_css = require("@ndla/styled-system/css");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
+let _ark_ui_react_field = require("@ark-ui/react/field");
+let _ark_ui_react_fieldset = require("@ark-ui/react/fieldset");
 //#region src/FieldErrorMessage.tsx
 /**
 * Copyright (c) 2024-present, NDLA.
@@ -16,7 +17,7 @@ const errorTextStyling = {
 	whiteSpace: "pre-line",
 	justifyContent: "center"
 };
-const StyledFieldErrorText = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react.Field.ErrorText, { base: errorTextStyling }, { baseComponent: true });
+const StyledFieldErrorText = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react_field.Field.ErrorText, { base: errorTextStyling }, { baseComponent: true });
 const FieldErrorMessage = (0, react.forwardRef)(({ textStyle = "label.small", fontWeight, css: cssProp, color, srOnly, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledFieldErrorText, {
 	css: _ndla_styled_system_css.css.raw({
 		textStyle,
@@ -27,7 +28,7 @@ const FieldErrorMessage = (0, react.forwardRef)(({ textStyle = "label.small", fo
 	...props,
 	ref
 }));
-const StyledFieldsetErrorText = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react.Fieldset.ErrorText, { base: errorTextStyling }, { baseComponent: true });
+const StyledFieldsetErrorText = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react_fieldset.Fieldset.ErrorText, { base: errorTextStyling }, { baseComponent: true });
 const FieldsetErrorText = (0, react.forwardRef)(({ textStyle = "label.small", fontWeight, css: cssProp, color, srOnly, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledFieldsetErrorText, {
 	css: _ndla_styled_system_css.css.raw({
 		textStyle,

package/lib/FieldErrorMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldErrorMessage.js","names":["Field","css","Fieldset"],"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;AAClB;AAEA,MAAM,wBAAA,GAAA,wBAAA,QACJA,cAAAA,MAAM,WACN,EACE,MAAM,iBACR,GACA,EAAE,eAAe,KAAK,CACxB;AAIA,MAAa,qBAAA,GAAA,MAAA,aACV,EAAE,YAAY,eAAe,YAAY,KAAK,SAAS,OAAO,QAAQ,GAAG,SAAS,QACjF,iBAAA,GAAA,kBAAA,KAAC,sBAAD;CAAsB,KAAKC,wBAAAA,IAAI,IAAI;EAAE;EAAW;EAAY;EAAO;CAAO,GAAG,OAAO;CAAG,GAAI;CAAY;AAAM,CAAA,CAEjH;AAEA,MAAM,2BAAA,GAAA,wBAAA,QACJC,cAAAA,SAAS,WACT,EACE,MAAM,iBACR,GACA,EAAE,eAAe,KAAK,CACxB;AAIA,MAAa,qBAAA,GAAA,MAAA,aACV,EAAE,YAAY,eAAe,YAAY,KAAK,SAAS,OAAO,QAAQ,GAAG,SAAS,QACjF,iBAAA,GAAA,kBAAA,KAAC,yBAAD;CAAyB,KAAKD,wBAAAA,IAAI,IAAI;EAAE;EAAW;EAAY;EAAO;CAAO,GAAG,OAAO;CAAG,GAAI;CAAY;AAAM,CAAA,CAEpH"}
+{"version":3,"file":"FieldErrorMessage.js","names":["Field","css","Fieldset"],"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 } from \"@ark-ui/react/field\";\nimport { Fieldset } from \"@ark-ui/react/fieldset\";\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":";;;;;;;;;;;;;;AAgBA,MAAM,mBAAsC;CAC1C,OAAO;CACP,YAAY;CACZ,gBAAgB;AAClB;AAEA,MAAM,wBAAA,GAAA,wBAAA,QACJA,oBAAAA,MAAM,WACN,EACE,MAAM,iBACR,GACA,EAAE,eAAe,KAAK,CACxB;AAIA,MAAa,qBAAA,GAAA,MAAA,aACV,EAAE,YAAY,eAAe,YAAY,KAAK,SAAS,OAAO,QAAQ,GAAG,SAAS,QACjF,iBAAA,GAAA,kBAAA,KAAC,sBAAD;CAAsB,KAAKC,wBAAAA,IAAI,IAAI;EAAE;EAAW;EAAY;EAAO;CAAO,GAAG,OAAO;CAAG,GAAI;CAAY;AAAM,CAAA,CAEjH;AAEA,MAAM,2BAAA,GAAA,wBAAA,QACJC,uBAAAA,SAAS,WACT,EACE,MAAM,iBACR,GACA,EAAE,eAAe,KAAK,CACxB;AAIA,MAAa,qBAAA,GAAA,MAAA,aACV,EAAE,YAAY,eAAe,YAAY,KAAK,SAAS,OAAO,QAAQ,GAAG,SAAS,QACjF,iBAAA,GAAA,kBAAA,KAAC,yBAAD;CAAyB,KAAKD,wBAAAA,IAAI,IAAI;EAAE;EAAW;EAAY;EAAO;CAAO,GAAG,OAAO;CAAG,GAAI;CAAY;AAAM,CAAA,CAEpH"}

package/lib/FieldHelper.d.ts

@@ -5,7 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { Field, Fieldset } from "@ark-ui/react";
+import { Field } from "@ark-ui/react/field";
+import { Fieldset } from "@ark-ui/react/fieldset";
 import type { StyledProps } from "@ndla/styled-system/types";
 import type { TextProps } from "./Text";
 export interface FieldHelperProps extends Omit<Field.HelperTextProps, "color">, TextProps, StyledProps {

package/lib/FieldHelper.js

@@ -1,8 +1,9 @@
-let _ark_ui_react = require("@ark-ui/react");
 let _ndla_styled_system_css = require("@ndla/styled-system/css");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
+let _ark_ui_react_field = require("@ark-ui/react/field");
+let _ark_ui_react_fieldset = require("@ark-ui/react/fieldset");
 //#region src/FieldHelper.tsx
 /**
 * Copyright (c) 2025-present, NDLA.
@@ -11,7 +12,7 @@ let react = require("react");
 * LICENSE file in the root directory of this source tree.
 *
 */
-const StyledFieldHelper = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react.Field.HelperText, {}, { baseComponent: true });
+const StyledFieldHelper = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react_field.Field.HelperText, {}, { baseComponent: true });
 const FieldHelper = (0, react.forwardRef)(({ textStyle = "label.small", fontWeight, color, srOnly, css: cssProp, ...props }, ref) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledFieldHelper, {
 		css: _ndla_styled_system_css.css.raw({
@@ -24,7 +25,7 @@ const FieldHelper = (0, react.forwardRef)(({ textStyle = "label.small", fontWeig
 		ref
 	});
 });
-const StyledFieldsetHelper = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react.Fieldset.HelperText, {}, { baseComponent: true });
+const StyledFieldsetHelper = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react_fieldset.Fieldset.HelperText, {}, { baseComponent: true });
 const FieldsetHelper = (0, react.forwardRef)(({ textStyle = "label.small", fontWeight, color, srOnly, css: cssProp, ...props }, ref) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledFieldsetHelper, {
 		css: _ndla_styled_system_css.css.raw({

package/lib/FieldHelper.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldHelper.js","names":["Field","css","Fieldset"],"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,qBAAA,GAAA,wBAAA,QAA2BA,cAAAA,MAAM,YAAY,CAAC,GAAG,EAAE,eAAe,KAAK,CAAC;AAI9E,MAAa,eAAA,GAAA,MAAA,aACV,EAAE,YAAY,eAAe,YAAY,OAAO,QAAQ,KAAK,SAAS,GAAG,SAAS,QAAQ;CACzF,OAAO,iBAAA,GAAA,kBAAA,KAAC,mBAAD;EAAmB,KAAKC,wBAAAA,IAAI,IAAI;GAAE;GAAW;GAAY;GAAO;EAAO,GAAG,OAAO;EAAG,GAAI;EAAY;CAAM,CAAA;AACnH,CACF;AAEA,MAAM,wBAAA,GAAA,wBAAA,QAA8BC,cAAAA,SAAS,YAAY,CAAC,GAAG,EAAE,eAAe,KAAK,CAAC;AAIpF,MAAa,kBAAA,GAAA,MAAA,aACV,EAAE,YAAY,eAAe,YAAY,OAAO,QAAQ,KAAK,SAAS,GAAG,SAAS,QAAQ;CACzF,OACE,iBAAA,GAAA,kBAAA,KAAC,sBAAD;EAAsB,KAAKD,wBAAAA,IAAI,IAAI;GAAE;GAAW;GAAY;GAAO;EAAO,GAAG,OAAO;EAAG,GAAI;EAAY;CAAM,CAAA;AAEjH,CACF"}
+{"version":3,"file":"FieldHelper.js","names":["Field","css","Fieldset"],"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 } from \"@ark-ui/react/field\";\nimport { Fieldset } from \"@ark-ui/react/fieldset\";\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":";;;;;;;;;;;;;;AAgBA,MAAM,qBAAA,GAAA,wBAAA,QAA2BA,oBAAAA,MAAM,YAAY,CAAC,GAAG,EAAE,eAAe,KAAK,CAAC;AAI9E,MAAa,eAAA,GAAA,MAAA,aACV,EAAE,YAAY,eAAe,YAAY,OAAO,QAAQ,KAAK,SAAS,GAAG,SAAS,QAAQ;CACzF,OAAO,iBAAA,GAAA,kBAAA,KAAC,mBAAD;EAAmB,KAAKC,wBAAAA,IAAI,IAAI;GAAE;GAAW;GAAY;GAAO;EAAO,GAAG,OAAO;EAAG,GAAI;EAAY;CAAM,CAAA;AACnH,CACF;AAEA,MAAM,wBAAA,GAAA,wBAAA,QAA8BC,uBAAAA,SAAS,YAAY,CAAC,GAAG,EAAE,eAAe,KAAK,CAAC;AAIpF,MAAa,kBAAA,GAAA,MAAA,aACV,EAAE,YAAY,eAAe,YAAY,OAAO,QAAQ,KAAK,SAAS,GAAG,SAAS,QAAQ;CACzF,OACE,iBAAA,GAAA,kBAAA,KAAC,sBAAD;EAAsB,KAAKD,wBAAAA,IAAI,IAAI;GAAE;GAAW;GAAY;GAAO;EAAO,GAAG,OAAO;EAAG,GAAI;EAAY;CAAM,CAAA;AAEjH,CACF"}