@ndla/primitives 1.0.100-alpha.0 → 1.0.102-alpha.0

package/es/Accordion.mjs

@@ -1,6 +1,7 @@
 import { Accordion, accordionAnatomy } from "@ark-ui/react";
 import { sva } from "@ndla/styled-system/css";
 import { createStyleContext } from "@ndla/styled-system/jsx";
+import { jsx } from "react/jsx-runtime";
 
 //#region src/Accordion.tsx
 const accordionRecipe = sva({
@@ -99,7 +100,12 @@ const accordionRecipe = sva({
 	} }
 });
 const { withProvider, withContext } = createStyleContext(accordionRecipe);
-const AccordionRoot = withProvider(Accordion.Root, "root", { baseComponent: true });
+const InternalAccordionRoot = withProvider(Accordion.Root, "root", { baseComponent: true });
+const AccordionRoot = ({ lazyMount, unmountOnExit,...props }) => /* @__PURE__ */ jsx(InternalAccordionRoot, {
+	lazyMount,
+	unmountOnExit,
+	...props
+});
 const AccordionItemContent = withContext(Accordion.ItemContent, "itemContent", { baseComponent: true });
 const AccordionItemIndicator = withContext(Accordion.ItemIndicator, "itemIndicator", { baseComponent: true });
 const AccordionItem = withContext(Accordion.Item, "item", { baseComponent: true });

package/es/Accordion.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.mjs","names":[],"sources":["../src/Accordion.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 { Accordion, accordionAnatomy } from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { RecipeVariantProps, StyledProps } from \"@ndla/styled-system/types\";\n\nconst accordionRecipe = sva({\n  slots: accordionAnatomy.keys(),\n  base: {\n    root: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"3xsmall\",\n    },\n    itemTrigger: {\n      display: \"flex\",\n      alignItems: \"center\",\n      justifyContent: \"space-between\",\n      background: \"surface.default\",\n      cursor: \"pointer\",\n      transitionDuration: \"fast\",\n      transitionTimingFunction: \"default\",\n      transitionProperty: \"background, border-color, border, border-radius\",\n      _closed: {\n        transitionProperty: \"background, border-color, border, border-radius\",\n      },\n      _disabled: {\n        cursor: \"not-allowed\",\n        background: \"surface.disabled.subtle\",\n        boxShadowColor: \"stroke.disabled\",\n        color: \"text.disabled\",\n        _hover: {\n          background: \"surface.disabled.subtle\",\n          boxShadowColor: \"stroke.disabled\",\n          color: \"text.disabled\",\n        },\n      },\n    },\n    itemIndicator: {\n      color: \"icon.strong\",\n      transformOrigin: \"center\",\n      transitionDuration: \"normal\",\n      transitionProperty: \"transform\",\n      transitionTimingFunction: \"default\",\n      _open: {\n        transform: \"rotate(180deg)\",\n      },\n      _motionReduce: {\n        transition: \"none\",\n        transitionDuration: \"0s\",\n      },\n    },\n    itemContent: {\n      overflow: \"hidden\",\n      // TODO: Is this needed?\n      transitionProperty: \"padding-bottom\",\n      transitionDuration: \"normal\",\n      transitionTimingFunction: \"default\",\n      paddingBlock: \"xsmall\",\n      paddingInline: \"small\",\n      _open: {\n        animation: \"collapse-in\",\n        _motionReduce: {\n          animation: \"none\",\n        },\n      },\n      _closed: {\n        animation: \"collapse-out\",\n        _motionReduce: {\n          animation: \"none\",\n        },\n      },\n    },\n    item: {\n      width: \"100%\",\n    },\n  },\n  defaultVariants: {\n    variant: \"bordered\",\n  },\n  variants: {\n    variant: {\n      clean: {},\n      bordered: {\n        itemTrigger: {\n          paddingInline: \"medium\",\n          paddingBlock: \"medium\",\n          width: \"100%\",\n          borderRadius: \"xsmall\",\n          boxShadowColor: \"stroke.subtle\",\n          boxShadow: \"inset 0 0 0 1px var(--shadow-color)\",\n          _hover: {\n            background: \"surface.actionSubtle.hover\",\n            boxShadowColor: \"stroke.hover\",\n          },\n          _open: {\n            background: \"surface.actionSubtle.active\",\n            boxShadowColor: \"stroke.default\",\n            borderBottomRadius: \"sharp\",\n          },\n          _focusVisible: {\n            outline: \"none\",\n            boxShadowColor: \"stroke.default\",\n            boxShadow: \"inset 0 0 0 3px var(--shadow-color)\",\n          },\n        },\n        itemContent: {\n          borderBottomRadius: \"xsmall\",\n          borderWidth: \"0 1px 1px\",\n          borderStyle: \"solid\",\n          borderColor: \"stroke.default\",\n        },\n      },\n    },\n  },\n});\n\nconst { withProvider, withContext } = createStyleContext(accordionRecipe);\n\nexport type AccordionVariantProps = NonNullable<RecipeVariantProps<typeof accordionRecipe>>;\n\nexport interface AccordionRootProps extends StyledProps, Accordion.RootProps, AccordionVariantProps {}\n\nexport const AccordionRoot = withProvider(Accordion.Root, \"root\", { baseComponent: true });\n\nexport const AccordionItemContent = withContext(Accordion.ItemContent, \"itemContent\", { baseComponent: true });\n\nexport const AccordionItemIndicator = withContext(Accordion.ItemIndicator, \"itemIndicator\", { baseComponent: true });\n\nexport interface AccordionItemProps extends StyledProps, Accordion.ItemProps {}\n\nexport const AccordionItem = withContext(Accordion.Item, \"item\", { baseComponent: true });\n\nexport const AccordionItemTrigger = withContext(Accordion.ItemTrigger, \"itemTrigger\", { baseComponent: true });\n"],"mappings":";;;;;AAaA,MAAM,kBAAkB,IAAI;CAC1B,OAAO,iBAAiB,MAAM;CAC9B,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,KAAK;GACN;EACD,aAAa;GACX,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,YAAY;GACZ,QAAQ;GACR,oBAAoB;GACpB,0BAA0B;GAC1B,oBAAoB;GACpB,SAAS,EACP,oBAAoB,mDACrB;GACD,WAAW;IACT,QAAQ;IACR,YAAY;IACZ,gBAAgB;IAChB,OAAO;IACP,QAAQ;KACN,YAAY;KACZ,gBAAgB;KAChB,OAAO;KACR;IACF;GACF;EACD,eAAe;GACb,OAAO;GACP,iBAAiB;GACjB,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,OAAO,EACL,WAAW,kBACZ;GACD,eAAe;IACb,YAAY;IACZ,oBAAoB;IACrB;GACF;EACD,aAAa;GACX,UAAU;GAEV,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,cAAc;GACd,eAAe;GACf,OAAO;IACL,WAAW;IACX,eAAe,EACb,WAAW,QACZ;IACF;GACD,SAAS;IACP,WAAW;IACX,eAAe,EACb,WAAW,QACZ;IACF;GACF;EACD,MAAM,EACJ,OAAO,QACR;EACF;CACD,iBAAiB,EACf,SAAS,YACV;CACD,UAAU,EACR,SAAS;EACP,OAAO,EAAE;EACT,UAAU;GACR,aAAa;IACX,eAAe;IACf,cAAc;IACd,OAAO;IACP,cAAc;IACd,gBAAgB;IAChB,WAAW;IACX,QAAQ;KACN,YAAY;KACZ,gBAAgB;KACjB;IACD,OAAO;KACL,YAAY;KACZ,gBAAgB;KAChB,oBAAoB;KACrB;IACD,eAAe;KACb,SAAS;KACT,gBAAgB;KAChB,WAAW;KACZ;IACF;GACD,aAAa;IACX,oBAAoB;IACpB,aAAa;IACb,aAAa;IACb,aAAa;IACd;GACF;EACF,EACF;CACF,CAAC;AAEF,MAAM,EAAE,cAAc,gBAAgB,mBAAmB,gBAAgB;AAMzE,MAAa,gBAAgB,aAAa,UAAU,MAAM,QAAQ,EAAE,eAAe,MAAM,CAAC;AAE1F,MAAa,uBAAuB,YAAY,UAAU,aAAa,eAAe,EAAE,eAAe,MAAM,CAAC;AAE9G,MAAa,yBAAyB,YAAY,UAAU,eAAe,iBAAiB,EAAE,eAAe,MAAM,CAAC;AAIpH,MAAa,gBAAgB,YAAY,UAAU,MAAM,QAAQ,EAAE,eAAe,MAAM,CAAC;AAEzF,MAAa,uBAAuB,YAAY,UAAU,aAAa,eAAe,EAAE,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Accordion.mjs","names":[],"sources":["../src/Accordion.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 { RefAttributes } from \"react\";\nimport { Accordion, accordionAnatomy } from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { RecipeVariantProps, StyledProps } from \"@ndla/styled-system/types\";\n\nconst accordionRecipe = sva({\n  slots: accordionAnatomy.keys(),\n  base: {\n    root: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"3xsmall\",\n    },\n    itemTrigger: {\n      display: \"flex\",\n      alignItems: \"center\",\n      justifyContent: \"space-between\",\n      background: \"surface.default\",\n      cursor: \"pointer\",\n      transitionDuration: \"fast\",\n      transitionTimingFunction: \"default\",\n      transitionProperty: \"background, border-color, border, border-radius\",\n      _closed: {\n        transitionProperty: \"background, border-color, border, border-radius\",\n      },\n      _disabled: {\n        cursor: \"not-allowed\",\n        background: \"surface.disabled.subtle\",\n        boxShadowColor: \"stroke.disabled\",\n        color: \"text.disabled\",\n        _hover: {\n          background: \"surface.disabled.subtle\",\n          boxShadowColor: \"stroke.disabled\",\n          color: \"text.disabled\",\n        },\n      },\n    },\n    itemIndicator: {\n      color: \"icon.strong\",\n      transformOrigin: \"center\",\n      transitionDuration: \"normal\",\n      transitionProperty: \"transform\",\n      transitionTimingFunction: \"default\",\n      _open: {\n        transform: \"rotate(180deg)\",\n      },\n      _motionReduce: {\n        transition: \"none\",\n        transitionDuration: \"0s\",\n      },\n    },\n    itemContent: {\n      overflow: \"hidden\",\n      // TODO: Is this needed?\n      transitionProperty: \"padding-bottom\",\n      transitionDuration: \"normal\",\n      transitionTimingFunction: \"default\",\n      paddingBlock: \"xsmall\",\n      paddingInline: \"small\",\n      _open: {\n        animation: \"collapse-in\",\n        _motionReduce: {\n          animation: \"none\",\n        },\n      },\n      _closed: {\n        animation: \"collapse-out\",\n        _motionReduce: {\n          animation: \"none\",\n        },\n      },\n    },\n    item: {\n      width: \"100%\",\n    },\n  },\n  defaultVariants: {\n    variant: \"bordered\",\n  },\n  variants: {\n    variant: {\n      clean: {},\n      bordered: {\n        itemTrigger: {\n          paddingInline: \"medium\",\n          paddingBlock: \"medium\",\n          width: \"100%\",\n          borderRadius: \"xsmall\",\n          boxShadowColor: \"stroke.subtle\",\n          boxShadow: \"inset 0 0 0 1px var(--shadow-color)\",\n          _hover: {\n            background: \"surface.actionSubtle.hover\",\n            boxShadowColor: \"stroke.hover\",\n          },\n          _open: {\n            background: \"surface.actionSubtle.active\",\n            boxShadowColor: \"stroke.default\",\n            borderBottomRadius: \"sharp\",\n          },\n          _focusVisible: {\n            outline: \"none\",\n            boxShadowColor: \"stroke.default\",\n            boxShadow: \"inset 0 0 0 3px var(--shadow-color)\",\n          },\n        },\n        itemContent: {\n          borderBottomRadius: \"xsmall\",\n          borderWidth: \"0 1px 1px\",\n          borderStyle: \"solid\",\n          borderColor: \"stroke.default\",\n        },\n      },\n    },\n  },\n});\n\nconst { withProvider, withContext } = createStyleContext(accordionRecipe);\n\nexport type AccordionVariantProps = NonNullable<RecipeVariantProps<typeof accordionRecipe>>;\n\nexport interface AccordionRootProps\n  extends StyledProps,\n    Accordion.RootProps,\n    RefAttributes<HTMLDivElement>,\n    AccordionVariantProps {}\n\nexport const InternalAccordionRoot = withProvider(Accordion.Root, \"root\", { baseComponent: true });\n\nexport const AccordionRoot = ({ lazyMount, unmountOnExit, ...props }: AccordionRootProps) => (\n  <InternalAccordionRoot lazyMount={lazyMount} unmountOnExit={unmountOnExit} {...props} />\n);\n\nexport const AccordionItemContent = withContext(Accordion.ItemContent, \"itemContent\", { baseComponent: true });\n\nexport const AccordionItemIndicator = withContext(Accordion.ItemIndicator, \"itemIndicator\", { baseComponent: true });\n\nexport interface AccordionItemProps extends StyledProps, Accordion.ItemProps {}\n\nexport const AccordionItem = withContext(Accordion.Item, \"item\", { baseComponent: true });\n\nexport const AccordionItemTrigger = withContext(Accordion.ItemTrigger, \"itemTrigger\", { baseComponent: true });\n"],"mappings":";;;;;;AAcA,MAAM,kBAAkB,IAAI;CAC1B,OAAO,iBAAiB,MAAM;CAC9B,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,KAAK;GACN;EACD,aAAa;GACX,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,YAAY;GACZ,QAAQ;GACR,oBAAoB;GACpB,0BAA0B;GAC1B,oBAAoB;GACpB,SAAS,EACP,oBAAoB,mDACrB;GACD,WAAW;IACT,QAAQ;IACR,YAAY;IACZ,gBAAgB;IAChB,OAAO;IACP,QAAQ;KACN,YAAY;KACZ,gBAAgB;KAChB,OAAO;KACR;IACF;GACF;EACD,eAAe;GACb,OAAO;GACP,iBAAiB;GACjB,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,OAAO,EACL,WAAW,kBACZ;GACD,eAAe;IACb,YAAY;IACZ,oBAAoB;IACrB;GACF;EACD,aAAa;GACX,UAAU;GAEV,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,cAAc;GACd,eAAe;GACf,OAAO;IACL,WAAW;IACX,eAAe,EACb,WAAW,QACZ;IACF;GACD,SAAS;IACP,WAAW;IACX,eAAe,EACb,WAAW,QACZ;IACF;GACF;EACD,MAAM,EACJ,OAAO,QACR;EACF;CACD,iBAAiB,EACf,SAAS,YACV;CACD,UAAU,EACR,SAAS;EACP,OAAO,EAAE;EACT,UAAU;GACR,aAAa;IACX,eAAe;IACf,cAAc;IACd,OAAO;IACP,cAAc;IACd,gBAAgB;IAChB,WAAW;IACX,QAAQ;KACN,YAAY;KACZ,gBAAgB;KACjB;IACD,OAAO;KACL,YAAY;KACZ,gBAAgB;KAChB,oBAAoB;KACrB;IACD,eAAe;KACb,SAAS;KACT,gBAAgB;KAChB,WAAW;KACZ;IACF;GACD,aAAa;IACX,oBAAoB;IACpB,aAAa;IACb,aAAa;IACb,aAAa;IACd;GACF;EACF,EACF;CACF,CAAC;AAEF,MAAM,EAAE,cAAc,gBAAgB,mBAAmB,gBAAgB;AAUzE,MAAa,wBAAwB,aAAa,UAAU,MAAM,QAAQ,EAAE,eAAe,MAAM,CAAC;AAElG,MAAa,iBAAiB,EAAE,WAAW,cAAe,GAAG,YAC3D,oBAAC;CAAiC;CAA0B;CAAe,GAAI;EAAS;AAG1F,MAAa,uBAAuB,YAAY,UAAU,aAAa,eAAe,EAAE,eAAe,MAAM,CAAC;AAE9G,MAAa,yBAAyB,YAAY,UAAU,eAAe,iBAAiB,EAAE,eAAe,MAAM,CAAC;AAIpH,MAAa,gBAAgB,YAAY,UAAU,MAAM,QAAQ,EAAE,eAAe,MAAM,CAAC;AAEzF,MAAa,uBAAuB,YAAY,UAAU,aAAa,eAAe,EAAE,eAAe,MAAM,CAAC"}

package/es/ArticleLists.mjs

@@ -1,8 +1,8 @@
 import { ark } from "@ark-ui/react";
 import { css, cva } from "@ndla/styled-system/css";
 import { styled } from "@ndla/styled-system/jsx";
-import { forwardRef, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
+import { forwardRef, useMemo } from "react";
 
 //#region src/ArticleLists.tsx
 const LIST_ITEM = "& > li";

package/es/Badge.mjs

@@ -1,8 +1,8 @@
 import { ark } from "@ark-ui/react";
 import { css, cva } from "@ndla/styled-system/css";
 import { styled } from "@ndla/styled-system/jsx";
-import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 
 //#region src/Badge.tsx
 const badgeRecipe = cva({

package/es/BlockQuote.mjs

@@ -1,8 +1,8 @@
 import { ark } from "@ark-ui/react";
 import { css, cva } from "@ndla/styled-system/css";
 import { styled } from "@ndla/styled-system/jsx";
-import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 
 //#region src/BlockQuote.tsx
 const blockQuoteRecipe = cva({

package/es/Button.mjs

@@ -2,8 +2,8 @@ import { Spinner } from "./Spinner.mjs";
 import { ark } from "@ark-ui/react";
 import { css, cva } from "@ndla/styled-system/css";
 import { styled } from "@ndla/styled-system/jsx";
-import { forwardRef, useMemo } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo } from "react";
 
 //#region src/Button.tsx
 const buttonBaseRecipe = cva({

package/es/Card/Card.mjs

@@ -3,8 +3,8 @@ import { Heading } from "../Text.mjs";
 import { ark } from "@ark-ui/react";
 import { sva } from "@ndla/styled-system/css";
 import { createStyleContext } from "@ndla/styled-system/jsx";
-import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 
 //#region src/Card/Card.tsx
 const cardRecipe = sva({

package/es/Checkbox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.mjs","names":[],"sources":["../src/Checkbox.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Checkbox, checkboxAnatomy, type HTMLArkProps } from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { RecipeVariantProps, StyledProps } from \"@ndla/styled-system/types\";\nimport { Text, type TextProps } from \"./Text\";\n\nconst checkboxRecipe = sva({\n  slots: checkboxAnatomy.keys(),\n  base: {\n    root: {\n      userSelect: \"none\",\n      display: \"flex\",\n      alignItems: \"center\",\n      width: \"fit-content\",\n      cursor: \"pointer\",\n      _disabled: {\n        color: \"text.disabled\",\n        cursor: \"not-allowed\",\n        _hover: {\n          color: \"text.disabled\",\n        },\n      },\n    },\n    group: {\n      display: \"flex\",\n      gap: \"xxsmall\",\n      flexDirection: \"column\",\n    },\n    control: {\n      flexShrink: \"0\",\n      display: \"flex\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n      cursor: \"pointer\",\n      width: \"medium\",\n      height: \"medium\",\n      color: \"text.strong\",\n      transitionDuration: \"normal\",\n      transitionProperty: \"border-color, background, box-shadow, color\",\n      transitionTimingFunction: \"default\",\n      _disabled: {\n        cursor: \"not-allowed\",\n      },\n      _motionReduce: {\n        transition: \"none\",\n        transitionDuration: \"0s\",\n      },\n    },\n  },\n  defaultVariants: {\n    variant: \"checkbox\",\n  },\n  variants: {\n    variant: {\n      checkbox: {\n        root: {\n          gap: \"xxsmall\",\n          _hover: {\n            color: \"text.action\",\n          },\n          _focusVisible: {\n            outline: \"2px solid\",\n            outlineOffset: \"4xsmall\",\n            outlineColor: \"stroke.default\",\n            borderRadius: \"xsmall\",\n          },\n        },\n        control: {\n          border: \"2px solid\",\n          borderColor: \"stroke.subtle\",\n          borderRadius: \"xsmall\",\n          background: \"surface.default\",\n          _hover: {\n            boxShadow: \"0 0 0 4px var(--shadow-color)\",\n            boxShadowColor: \"surface.actionSubtle.hover.strong\",\n          },\n          _checked: {\n            backgroundColor: \"surface.action\",\n            borderColor: \"surface.action\",\n            color: \"icon.onAction\",\n          },\n          _disabled: {\n            borderColor: \"stroke.disabled\",\n            _hover: {\n              borderColor: \"stroke.disabled\",\n              boxShadow: \"none\",\n            },\n            _checked: {\n              background: \"surface.disabled\",\n              borderColor: \"stroke.disabled\",\n            },\n          },\n          _invalid: {\n            borderColor: \"stroke.error\",\n            _checked: {\n              color: \"stroke.error\",\n              borderColor: \"stroke.error\",\n              backgroundColor: \"surface.default\",\n            },\n          },\n        },\n      },\n      chip: {\n        root: {\n          width: \"fit-content\",\n          color: \"text.default\",\n          gap: \"4xsmall\",\n          background: \"surface.actionSubtle\",\n          border: \"1px solid\",\n          borderColor: \"stroke.subtle\",\n          outlineColor: \"stroke.subtle\",\n          paddingInline: \"xsmall\",\n          paddingBlock: \"4xsmall\",\n          borderRadius: \"large\",\n          minHeight: \"large\",\n          transitionDuration: \"normal\",\n          transitionProperty: \"border-color, background, box-shadow, color\",\n          transitionTimingFunction: \"default\",\n          _disabled: {\n            color: \"text.disabled\",\n            borderColor: \"stroke.disabled\",\n            background: \"surface.disabled\",\n            _hover: {\n              color: \"text.disabled\",\n              borderColor: \"stroke.disabled\",\n              background: \"surface.disabled\",\n            },\n            _checked: {\n              color: \"text.disabled\",\n              borderColor: \"stroke.disabled\",\n              background: \"surface.disabled\",\n              _hover: {\n                color: \"text.disabled\",\n                borderColor: \"stroke.disabled\",\n                background: \"surface.disabled\",\n              },\n            },\n          },\n          _hover: {\n            background: \"surface.actionSubtle.hover\",\n            borderColor: \"stroke.hover\",\n            outlineColor: \"stroke.hover\",\n            _invalid: {\n              backgroundColor: \"surface.dangerSubtle\",\n            },\n          },\n          _checked: {\n            color: \"text.onAction\",\n            background: \"surface.action.selected\",\n            borderColor: \"surface.action.selected\",\n            outlineColor: \"icon.onAction\",\n            _focus: {\n              outlineOffset: \"-4px\",\n            },\n            _hover: {\n              outlineOffset: \"-2px\",\n              background: \"surface.actionSubtle.hover\",\n              color: \"text.default\",\n              borderColor: \"stroke.hover\",\n              outlineColor: \"stroke.hover\",\n            },\n          },\n          _invalid: {\n            borderColor: \"stroke.error\",\n            outlineColor: \"stroke.error\",\n            background: \"surface.dangerSubtle\",\n            outlineOffset: \"-2px\",\n            _checked: {\n              color: \"text.default\",\n              borderColor: \"stroke.error\",\n              outlineColor: \"stroke.error\",\n              background: \"surface.dangerSubtle\",\n              outlineOffset: \"-2px\",\n              _hover: {\n                borderColor: \"stroke.hover\",\n                outlineColor: \"stroke.hover\",\n              },\n            },\n          },\n          _focus: {\n            outlineStyle: \"solid\",\n            outlineWidth: \"2px\",\n            outlineOffset: \"-2px\",\n          },\n        },\n        control: {\n          display: \"none\",\n          _checked: {\n            display: \"flex\",\n            color: \"text.onAction\",\n            _hover: {\n              color: \"stroke.hover\",\n            },\n          },\n          _disabled: {\n            color: \"stroke.disabled\",\n            _hover: {\n              color: \"stroke.disabled\",\n            },\n          },\n          _invalid: {\n            _checked: {\n              color: \"stroke.error\",\n            },\n          },\n        },\n      },\n    },\n  },\n});\n\nconst { withProvider, withContext } = createStyleContext(checkboxRecipe);\n\nexport type CheckboxVariantProps = NonNullable<RecipeVariantProps<typeof checkboxRecipe>>;\n\nexport interface CheckboxRootProps extends StyledProps, HTMLArkProps<\"label\">, CheckboxVariantProps {}\n\nexport const CheckboxRoot = withProvider(Checkbox.Root, \"root\", { baseComponent: true });\n\nexport const CheckboxIndicator = withContext(Checkbox.Indicator, \"indicator\", { baseComponent: true });\n\nconst InternalCheckboxLabel = withContext(Checkbox.Label, \"label\");\n\ninterface CheckboxLabelProps extends StyledProps, Omit<Checkbox.LabelProps, \"color\">, TextProps {}\n\nexport const CheckboxLabel = ({ textStyle = \"label.medium\", children, ...props }: CheckboxLabelProps) => (\n  <InternalCheckboxLabel {...props} asChild>\n    <Text textStyle={textStyle}>{children}</Text>\n  </InternalCheckboxLabel>\n);\n\nexport const CheckboxControl = withContext(Checkbox.Control, \"control\", { baseComponent: true });\n\nexport const CheckboxGroup = withProvider(Checkbox.Group, \"group\", { baseComponent: true });\n\nexport const CheckboxHiddenInput = Checkbox.HiddenInput;\n"],"mappings":"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"}
+{"version":3,"file":"Checkbox.mjs","names":[],"sources":["../src/Checkbox.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport type { RefAttributes } from \"react\";\nimport { Checkbox, checkboxAnatomy, type HTMLArkProps } from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { RecipeVariantProps, StyledProps } from \"@ndla/styled-system/types\";\nimport { Text, type TextProps } from \"./Text\";\n\nconst checkboxRecipe = sva({\n  slots: checkboxAnatomy.keys(),\n  base: {\n    root: {\n      userSelect: \"none\",\n      display: \"flex\",\n      alignItems: \"center\",\n      width: \"fit-content\",\n      cursor: \"pointer\",\n      _disabled: {\n        color: \"text.disabled\",\n        cursor: \"not-allowed\",\n        _hover: {\n          color: \"text.disabled\",\n        },\n      },\n    },\n    group: {\n      display: \"flex\",\n      gap: \"xxsmall\",\n      flexDirection: \"column\",\n    },\n    control: {\n      flexShrink: \"0\",\n      display: \"flex\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n      cursor: \"pointer\",\n      width: \"medium\",\n      height: \"medium\",\n      color: \"text.strong\",\n      transitionDuration: \"normal\",\n      transitionProperty: \"border-color, background, box-shadow, color\",\n      transitionTimingFunction: \"default\",\n      _disabled: {\n        cursor: \"not-allowed\",\n      },\n      _motionReduce: {\n        transition: \"none\",\n        transitionDuration: \"0s\",\n      },\n    },\n  },\n  defaultVariants: {\n    variant: \"checkbox\",\n  },\n  variants: {\n    variant: {\n      checkbox: {\n        root: {\n          gap: \"xxsmall\",\n          _hover: {\n            color: \"text.action\",\n          },\n          _focusVisible: {\n            outline: \"2px solid\",\n            outlineOffset: \"4xsmall\",\n            outlineColor: \"stroke.default\",\n            borderRadius: \"xsmall\",\n          },\n        },\n        control: {\n          border: \"2px solid\",\n          borderColor: \"stroke.subtle\",\n          borderRadius: \"xsmall\",\n          background: \"surface.default\",\n          _hover: {\n            boxShadow: \"0 0 0 4px var(--shadow-color)\",\n            boxShadowColor: \"surface.actionSubtle.hover.strong\",\n          },\n          _checked: {\n            backgroundColor: \"surface.action\",\n            borderColor: \"surface.action\",\n            color: \"icon.onAction\",\n          },\n          _disabled: {\n            borderColor: \"stroke.disabled\",\n            _hover: {\n              borderColor: \"stroke.disabled\",\n              boxShadow: \"none\",\n            },\n            _checked: {\n              background: \"surface.disabled\",\n              borderColor: \"stroke.disabled\",\n            },\n          },\n          _invalid: {\n            borderColor: \"stroke.error\",\n            _checked: {\n              color: \"stroke.error\",\n              borderColor: \"stroke.error\",\n              backgroundColor: \"surface.default\",\n            },\n          },\n        },\n      },\n      chip: {\n        root: {\n          width: \"fit-content\",\n          color: \"text.default\",\n          gap: \"4xsmall\",\n          background: \"surface.actionSubtle\",\n          border: \"1px solid\",\n          borderColor: \"stroke.subtle\",\n          outlineColor: \"stroke.subtle\",\n          paddingInline: \"xsmall\",\n          paddingBlock: \"4xsmall\",\n          borderRadius: \"large\",\n          minHeight: \"large\",\n          transitionDuration: \"normal\",\n          transitionProperty: \"border-color, background, box-shadow, color\",\n          transitionTimingFunction: \"default\",\n          _disabled: {\n            color: \"text.disabled\",\n            borderColor: \"stroke.disabled\",\n            background: \"surface.disabled\",\n            _hover: {\n              color: \"text.disabled\",\n              borderColor: \"stroke.disabled\",\n              background: \"surface.disabled\",\n            },\n            _checked: {\n              color: \"text.disabled\",\n              borderColor: \"stroke.disabled\",\n              background: \"surface.disabled\",\n              _hover: {\n                color: \"text.disabled\",\n                borderColor: \"stroke.disabled\",\n                background: \"surface.disabled\",\n              },\n            },\n          },\n          _hover: {\n            background: \"surface.actionSubtle.hover\",\n            borderColor: \"stroke.hover\",\n            outlineColor: \"stroke.hover\",\n            _invalid: {\n              backgroundColor: \"surface.dangerSubtle\",\n            },\n          },\n          _checked: {\n            color: \"text.onAction\",\n            background: \"surface.action.selected\",\n            borderColor: \"surface.action.selected\",\n            outlineColor: \"icon.onAction\",\n            _focus: {\n              outlineOffset: \"-4px\",\n            },\n            _hover: {\n              outlineOffset: \"-2px\",\n              background: \"surface.actionSubtle.hover\",\n              color: \"text.default\",\n              borderColor: \"stroke.hover\",\n              outlineColor: \"stroke.hover\",\n            },\n          },\n          _invalid: {\n            borderColor: \"stroke.error\",\n            outlineColor: \"stroke.error\",\n            background: \"surface.dangerSubtle\",\n            outlineOffset: \"-2px\",\n            _checked: {\n              color: \"text.default\",\n              borderColor: \"stroke.error\",\n              outlineColor: \"stroke.error\",\n              background: \"surface.dangerSubtle\",\n              outlineOffset: \"-2px\",\n              _hover: {\n                borderColor: \"stroke.hover\",\n                outlineColor: \"stroke.hover\",\n              },\n            },\n          },\n          _focus: {\n            outlineStyle: \"solid\",\n            outlineWidth: \"2px\",\n            outlineOffset: \"-2px\",\n          },\n        },\n        control: {\n          display: \"none\",\n          _checked: {\n            display: \"flex\",\n            color: \"text.onAction\",\n            _hover: {\n              color: \"stroke.hover\",\n            },\n          },\n          _disabled: {\n            color: \"stroke.disabled\",\n            _hover: {\n              color: \"stroke.disabled\",\n            },\n          },\n          _invalid: {\n            _checked: {\n              color: \"stroke.error\",\n            },\n          },\n        },\n      },\n    },\n  },\n});\n\nconst { withProvider, withContext } = createStyleContext(checkboxRecipe);\n\nexport type CheckboxVariantProps = NonNullable<RecipeVariantProps<typeof checkboxRecipe>>;\n\nexport interface CheckboxRootProps extends StyledProps, HTMLArkProps<\"label\">, CheckboxVariantProps {}\n\nexport const CheckboxRoot = withProvider(Checkbox.Root, \"root\", { baseComponent: true });\n\nexport const CheckboxIndicator = withContext(Checkbox.Indicator, \"indicator\", { baseComponent: true });\n\nconst InternalCheckboxLabel = withContext(Checkbox.Label, \"label\");\n\ninterface CheckboxLabelProps\n  extends StyledProps,\n    Omit<Checkbox.LabelProps, \"color\">,\n    TextProps,\n    RefAttributes<HTMLSpanElement> {}\n\nexport const CheckboxLabel = ({ textStyle = \"label.medium\", children, ...props }: CheckboxLabelProps) => (\n  <InternalCheckboxLabel {...props} asChild>\n    <Text textStyle={textStyle}>{children}</Text>\n  </InternalCheckboxLabel>\n);\n\nexport const CheckboxControl = withContext(Checkbox.Control, \"control\", { baseComponent: true });\n\nexport const CheckboxGroup = withProvider(Checkbox.Group, \"group\", { baseComponent: true });\n\nexport const CheckboxHiddenInput = Checkbox.HiddenInput;\n"],"mappings":"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"}

package/es/Combobox.mjs

@@ -3,8 +3,8 @@ import { Label } from "./Label.mjs";
 import { Combobox, comboboxAnatomy } from "@ark-ui/react";
 import { sva } from "@ndla/styled-system/css";
 import { createStyleContext } from "@ndla/styled-system/jsx";
-import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 
 //#region src/Combobox.tsx
 const comboboxRecipe = sva({

package/es/Combobox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.mjs","names":[],"sources":["../src/Combobox.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { forwardRef, type ElementType } from \"react\";\nimport { Combobox, comboboxAnatomy } from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { RecipeVariantProps, StyledProps } from \"@ndla/styled-system/types\";\nimport { Label } from \"./Label\";\nimport { Text, type TextProps } from \"./Text\";\n\nconst comboboxRecipe = sva({\n  slots: comboboxAnatomy.keys(),\n  base: {\n    root: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"3xsmall\",\n    },\n    control: {\n      display: \"flex\",\n      alignItems: \"center\",\n      gap: \"4xsmall\",\n    },\n    content: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      zIndex: \"dropdown\",\n      background: \"surface.default\",\n      overflowY: \"auto\",\n      maxHeight: \"min(token(spacing.surface.xsmall), 45vh)\",\n      _open: {\n        animation: \"fade-shift-in 0.25s ease-out\",\n        _motionReduce: {\n          animation: \"none\",\n        },\n      },\n      _closed: {\n        animation: \"fade-shift-out 0.25s ease-out\",\n        _motionReduce: {\n          animation: \"none\",\n        },\n      },\n    },\n    item: {\n      display: \"flex\",\n      justifyContent: \"space-between\",\n      alignItems: \"center\",\n      cursor: \"pointer\",\n      transitionDuration: \"fast\",\n      transitionProperty: \"background, color, border-color\",\n      transitionTimingFunction: \"default\",\n      background: \"surface.default\",\n      _disabled: {\n        cursor: \"not-allowed\",\n        background: \"surface.disabled\",\n        color: \"text.disabled\",\n        _hover: {\n          background: \"surface.disabled\",\n          color: \"text.disabled\",\n        },\n      },\n      _hover: {\n        background: \"surface.hover\",\n      },\n      _highlighted: {\n        background: \"surface.hover\",\n      },\n      _checked: {\n        background: \"surface.selected\",\n        _highlighted: {\n          background: \"surface.hover\",\n        },\n      },\n    },\n    trigger: {\n      \"& svg\": {\n        color: \"icon.default\",\n        transformOrigin: \"center\",\n        transitionDuration: \"normal\",\n        transitionProperty: \"transform\",\n        transitionTimingFunction: \"default\",\n        _motionReduce: {\n          transition: \"none\",\n          transitionDuration: \"0s\",\n        },\n      },\n      _open: {\n        \"& svg\": {\n          transform: \"rotate(180deg)\",\n        },\n      },\n    },\n    itemIndicator: {\n      color: \"stroke.default\",\n    },\n    itemText: {\n      _checked: {\n        textDecoration: \"underline\",\n      },\n      _highlighted: {\n        textDecoration: \"underline\",\n      },\n    },\n    itemGroup: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"4xsmall\",\n    },\n  },\n  defaultVariants: {\n    context: \"standalone\",\n    variant: \"simple\",\n  },\n  variants: {\n    context: {\n      standalone: {\n        content: {\n          boxShadow: \"large\",\n          borderRadius: \"xsmall\",\n          padding: \"xsmall\",\n        },\n      },\n      composite: {},\n    },\n    variant: {\n      simple: {\n        item: {\n          padding: \"xsmall\",\n          borderRadius: \"xsmall\",\n        },\n        content: {\n          gap: \"4xsmall\",\n        },\n      },\n      complex: {},\n    },\n  },\n});\n\nconst { withProvider, withContext } = createStyleContext(comboboxRecipe);\n\nexport type ComboboxVariantProps = NonNullable<RecipeVariantProps<typeof comboboxRecipe>>;\n\nexport interface ComboboxRootProps<T extends Combobox.CollectionItem>\n  extends StyledProps,\n    Combobox.RootProps<T>,\n    ComboboxVariantProps {\n  translations: Combobox.RootProps<T>[\"translations\"];\n}\n\nconst InternalComboboxRoot = withProvider<ElementType<ComboboxRootProps<Combobox.CollectionItem>>>(\n  Combobox.Root,\n  \"root\",\n  { baseComponent: true },\n);\n\nexport const ComboboxRoot = <T extends Combobox.CollectionItem>({\n  lazyMount = true,\n  unmountOnExit = true,\n  ...props\n}: ComboboxRootProps<T>) => {\n  return <InternalComboboxRoot lazyMount={lazyMount} unmountOnExit={unmountOnExit} {...props} />;\n};\n\nexport interface ComboboxClearTriggerProps extends Combobox.ClearTriggerProps, StyledProps {}\n\nexport const ComboboxClearTrigger = withContext(Combobox.ClearTrigger, \"clearTrigger\", { baseComponent: true });\n\nexport interface ComboboxContentProps extends Combobox.ContentProps, StyledProps {}\n\nexport const ComboboxContentStandalone = withContext(Combobox.Content, \"content\", { baseComponent: true });\n\nexport const ComboboxContent = forwardRef<HTMLDivElement, ComboboxContentProps>((props, ref) => (\n  <ComboboxPositioner>\n    <ComboboxContentStandalone ref={ref} {...props} />\n  </ComboboxPositioner>\n));\n\nexport interface ComboboxControlProps extends Combobox.ControlProps, StyledProps {}\n\nexport const ComboboxControl = withContext(Combobox.Control, \"control\", { baseComponent: true });\n\nexport interface ComboboxInputProps extends Combobox.InputProps, StyledProps {}\n\nexport const ComboboxInput = withContext(Combobox.Input, \"input\", { baseComponent: true });\n\nconst InternalComboboxItemGroupLabel = withContext(Combobox.ItemGroupLabel, \"itemGroupLabel\");\n\nexport interface ComboboxItemGroupLabelProps\n  extends Omit<Combobox.ItemGroupLabelProps, \"color\">,\n    TextProps,\n    StyledProps {}\n\nexport const ComboboxItemGroupLabel = ({\n  children,\n  textStyle = \"label.small\",\n  fontWeight = \"bold\",\n  ...props\n}: ComboboxItemGroupLabelProps) => (\n  <InternalComboboxItemGroupLabel asChild>\n    <Text asChild consumeCss textStyle={textStyle} fontWeight={fontWeight} {...props}>\n      <div>{children}</div>\n    </Text>\n  </InternalComboboxItemGroupLabel>\n);\n\nexport interface ComboboxItemGroupProps extends Combobox.ItemGroupProps, StyledProps {}\n\nexport const ComboboxItemGroup = withContext(Combobox.ItemGroup, \"itemGroup\", { baseComponent: true });\n\nexport interface ComboboxItemIndicatorProps extends Combobox.ItemIndicatorProps, StyledProps {}\n\nexport const ComboboxItemIndicator = withContext(Combobox.ItemIndicator, \"itemIndicator\", { baseComponent: true });\n\nexport interface ComboboxItemProps extends Combobox.ItemProps, StyledProps {}\n\nexport const ComboboxItem = withContext(Combobox.Item, \"item\", { baseComponent: true });\n\nconst InternalComboboxItemText = withContext(Combobox.ItemText, \"itemText\");\n\nexport interface ComboboxItemTextProps extends Omit<Combobox.ItemTextProps, \"color\">, TextProps, StyledProps {}\n\nexport const ComboboxItemText = ({\n  textStyle = \"label.medium\",\n  fontWeight = \"bold\",\n  children,\n  ...props\n}: ComboboxItemTextProps) => (\n  <InternalComboboxItemText asChild>\n    <Text {...props} textStyle={textStyle} fontWeight={fontWeight} asChild consumeCss>\n      <div>{children}</div>\n    </Text>\n  </InternalComboboxItemText>\n);\n\nconst InternalComboboxLabel = withContext(Combobox.Label, \"label\");\n\nexport interface ComboboxLabelProps extends Omit<Combobox.LabelProps, \"color\">, TextProps, StyledProps {}\n\nexport const ComboboxLabel = ({ textStyle = \"label.medium\", fontWeight = \"bold\", ...props }: ComboboxLabelProps) => (\n  <InternalComboboxLabel asChild>\n    <Label textStyle={textStyle} fontWeight={fontWeight} {...props} />\n  </InternalComboboxLabel>\n);\n\nexport interface ComboboxPositionerProps extends Combobox.PositionerProps, StyledProps {}\n\nexport const ComboboxPositioner = withContext(Combobox.Positioner, \"positioner\", { baseComponent: true });\n\nexport interface ComboboxTriggerProps extends Combobox.TriggerProps, StyledProps {}\n\nexport const ComboboxTrigger = withContext(Combobox.Trigger, \"trigger\", { baseComponent: true });\n\nexport interface ComboboxListProps extends Combobox.ListProps, StyledProps {}\n\nexport const ComboboxList = withContext(Combobox.List, \"list\", { baseComponent: true });\n"],"mappings":"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"}
+{"version":3,"file":"Combobox.mjs","names":[],"sources":["../src/Combobox.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { forwardRef, type ElementType, type RefAttributes } from \"react\";\nimport { Combobox, comboboxAnatomy } from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { RecipeVariantProps, StyledProps } from \"@ndla/styled-system/types\";\nimport { Label } from \"./Label\";\nimport { Text, type TextProps } from \"./Text\";\n\nconst comboboxRecipe = sva({\n  slots: comboboxAnatomy.keys(),\n  base: {\n    root: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"3xsmall\",\n    },\n    control: {\n      display: \"flex\",\n      alignItems: \"center\",\n      gap: \"4xsmall\",\n    },\n    content: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      zIndex: \"dropdown\",\n      background: \"surface.default\",\n      overflowY: \"auto\",\n      maxHeight: \"min(token(spacing.surface.xsmall), 45vh)\",\n      _open: {\n        animation: \"fade-shift-in 0.25s ease-out\",\n        _motionReduce: {\n          animation: \"none\",\n        },\n      },\n      _closed: {\n        animation: \"fade-shift-out 0.25s ease-out\",\n        _motionReduce: {\n          animation: \"none\",\n        },\n      },\n    },\n    item: {\n      display: \"flex\",\n      justifyContent: \"space-between\",\n      alignItems: \"center\",\n      cursor: \"pointer\",\n      transitionDuration: \"fast\",\n      transitionProperty: \"background, color, border-color\",\n      transitionTimingFunction: \"default\",\n      background: \"surface.default\",\n      _disabled: {\n        cursor: \"not-allowed\",\n        background: \"surface.disabled\",\n        color: \"text.disabled\",\n        _hover: {\n          background: \"surface.disabled\",\n          color: \"text.disabled\",\n        },\n      },\n      _hover: {\n        background: \"surface.hover\",\n      },\n      _highlighted: {\n        background: \"surface.hover\",\n      },\n      _checked: {\n        background: \"surface.selected\",\n        _highlighted: {\n          background: \"surface.hover\",\n        },\n      },\n    },\n    trigger: {\n      \"& svg\": {\n        color: \"icon.default\",\n        transformOrigin: \"center\",\n        transitionDuration: \"normal\",\n        transitionProperty: \"transform\",\n        transitionTimingFunction: \"default\",\n        _motionReduce: {\n          transition: \"none\",\n          transitionDuration: \"0s\",\n        },\n      },\n      _open: {\n        \"& svg\": {\n          transform: \"rotate(180deg)\",\n        },\n      },\n    },\n    itemIndicator: {\n      color: \"stroke.default\",\n    },\n    itemText: {\n      _checked: {\n        textDecoration: \"underline\",\n      },\n      _highlighted: {\n        textDecoration: \"underline\",\n      },\n    },\n    itemGroup: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"4xsmall\",\n    },\n  },\n  defaultVariants: {\n    context: \"standalone\",\n    variant: \"simple\",\n  },\n  variants: {\n    context: {\n      standalone: {\n        content: {\n          boxShadow: \"large\",\n          borderRadius: \"xsmall\",\n          padding: \"xsmall\",\n        },\n      },\n      composite: {},\n    },\n    variant: {\n      simple: {\n        item: {\n          padding: \"xsmall\",\n          borderRadius: \"xsmall\",\n        },\n        content: {\n          gap: \"4xsmall\",\n        },\n      },\n      complex: {},\n    },\n  },\n});\n\nconst { withProvider, withContext } = createStyleContext(comboboxRecipe);\n\nexport type ComboboxVariantProps = NonNullable<RecipeVariantProps<typeof comboboxRecipe>>;\n\nexport interface ComboboxRootProps<T extends Combobox.CollectionItem>\n  extends StyledProps,\n    Combobox.RootProps<T>,\n    ComboboxVariantProps,\n    RefAttributes<HTMLDivElement> {\n  translations: Combobox.RootProps<T>[\"translations\"];\n}\n\nconst InternalComboboxRoot = withProvider<ElementType<ComboboxRootProps<Combobox.CollectionItem>>>(\n  Combobox.Root,\n  \"root\",\n  { baseComponent: true },\n);\n\nexport const ComboboxRoot = <T extends Combobox.CollectionItem>({\n  lazyMount = true,\n  unmountOnExit = true,\n  ...props\n}: ComboboxRootProps<T>) => {\n  return <InternalComboboxRoot lazyMount={lazyMount} unmountOnExit={unmountOnExit} {...props} />;\n};\n\nexport interface ComboboxClearTriggerProps extends Combobox.ClearTriggerProps, StyledProps {}\n\nexport const ComboboxClearTrigger = withContext(Combobox.ClearTrigger, \"clearTrigger\", { baseComponent: true });\n\nexport interface ComboboxContentProps extends Combobox.ContentProps, StyledProps {}\n\nexport const ComboboxContentStandalone = withContext(Combobox.Content, \"content\", { baseComponent: true });\n\nexport const ComboboxContent = forwardRef<HTMLDivElement, ComboboxContentProps>((props, ref) => (\n  <ComboboxPositioner>\n    <ComboboxContentStandalone ref={ref} {...props} />\n  </ComboboxPositioner>\n));\n\nexport interface ComboboxControlProps extends Combobox.ControlProps, StyledProps {}\n\nexport const ComboboxControl = withContext(Combobox.Control, \"control\", { baseComponent: true });\n\nexport interface ComboboxInputProps extends Combobox.InputProps, StyledProps {}\n\nexport const ComboboxInput = withContext(Combobox.Input, \"input\", { baseComponent: true });\n\nconst InternalComboboxItemGroupLabel = withContext(Combobox.ItemGroupLabel, \"itemGroupLabel\");\n\nexport interface ComboboxItemGroupLabelProps\n  extends Omit<Combobox.ItemGroupLabelProps, \"color\">,\n    TextProps,\n    StyledProps,\n    RefAttributes<HTMLDivElement> {}\n\nexport const ComboboxItemGroupLabel = ({\n  children,\n  textStyle = \"label.small\",\n  fontWeight = \"bold\",\n  ...props\n}: ComboboxItemGroupLabelProps) => (\n  <InternalComboboxItemGroupLabel asChild>\n    <Text asChild consumeCss textStyle={textStyle} fontWeight={fontWeight} {...props}>\n      <div>{children}</div>\n    </Text>\n  </InternalComboboxItemGroupLabel>\n);\n\nexport interface ComboboxItemGroupProps extends Combobox.ItemGroupProps, StyledProps {}\n\nexport const ComboboxItemGroup = withContext(Combobox.ItemGroup, \"itemGroup\", { baseComponent: true });\n\nexport interface ComboboxItemIndicatorProps extends Combobox.ItemIndicatorProps, StyledProps {}\n\nexport const ComboboxItemIndicator = withContext(Combobox.ItemIndicator, \"itemIndicator\", { baseComponent: true });\n\nexport interface ComboboxItemProps extends Combobox.ItemProps, StyledProps {}\n\nexport const ComboboxItem = withContext(Combobox.Item, \"item\", { baseComponent: true });\n\nconst InternalComboboxItemText = withContext(Combobox.ItemText, \"itemText\");\n\nexport interface ComboboxItemTextProps\n  extends Omit<Combobox.ItemTextProps, \"color\">,\n    TextProps,\n    StyledProps,\n    RefAttributes<HTMLDivElement> {}\n\nexport const ComboboxItemText = ({\n  textStyle = \"label.medium\",\n  fontWeight = \"bold\",\n  children,\n  ...props\n}: ComboboxItemTextProps) => (\n  <InternalComboboxItemText asChild>\n    <Text {...props} textStyle={textStyle} fontWeight={fontWeight} asChild consumeCss>\n      <div>{children}</div>\n    </Text>\n  </InternalComboboxItemText>\n);\n\nconst InternalComboboxLabel = withContext(Combobox.Label, \"label\");\n\nexport interface ComboboxLabelProps\n  extends Omit<Combobox.LabelProps, \"color\">,\n    TextProps,\n    StyledProps,\n    RefAttributes<HTMLLabelElement> {}\n\nexport const ComboboxLabel = ({ textStyle = \"label.medium\", fontWeight = \"bold\", ...props }: ComboboxLabelProps) => (\n  <InternalComboboxLabel asChild>\n    <Label textStyle={textStyle} fontWeight={fontWeight} {...props} />\n  </InternalComboboxLabel>\n);\n\nexport interface ComboboxPositionerProps extends Combobox.PositionerProps, StyledProps {}\n\nexport const ComboboxPositioner = withContext(Combobox.Positioner, \"positioner\", { baseComponent: true });\n\nexport interface ComboboxTriggerProps extends Combobox.TriggerProps, StyledProps {}\n\nexport const ComboboxTrigger = withContext(Combobox.Trigger, \"trigger\", { baseComponent: true });\n\nexport interface ComboboxListProps extends Combobox.ListProps, StyledProps {}\n\nexport const ComboboxList = withContext(Combobox.List, \"list\", { baseComponent: true });\n"],"mappings":"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"}

package/es/DatePicker.mjs

@@ -2,8 +2,8 @@ import { Label } from "./Label.mjs";
 import { DatePicker, DatePickerContext, datePickerAnatomy } from "@ark-ui/react";
 import { sva } from "@ndla/styled-system/css";
 import { createStyleContext } from "@ndla/styled-system/jsx";
-import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 
 //#region src/DatePicker.tsx
 const datePickerRecipe = sva({

package/es/DatePicker.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.mjs","names":[],"sources":["../src/DatePicker.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { forwardRef } from \"react\";\nimport { DatePicker, datePickerAnatomy } from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext, type StyledProps } from \"@ndla/styled-system/jsx\";\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 extends Omit<DatePicker.LabelProps, \"color\">, StyledProps, TextProps {}\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.mjs","names":[],"sources":["../src/DatePicker.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { forwardRef, type RefAttributes } from \"react\";\nimport { DatePicker, datePickerAnatomy } from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext, type StyledProps } from \"@ndla/styled-system/jsx\";\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\">,\n    StyledProps,\n    TextProps,\n    RefAttributes<HTMLLabelElement> {}\n\nconst InternalDatePickerLabel = withContext(DatePicker.Label, \"label\");\n\nexport const DatePickerLabel = ({\n  textStyle = \"label.medium\",\n  fontWeight = \"bold\",\n  ...props\n}: DatePickerLabelProps) => (\n  <InternalDatePickerLabel asChild>\n    <Label textStyle={textStyle} fontWeight={fontWeight} {...props} />\n  </InternalDatePickerLabel>\n);\n\nexport const DatePickerMonthSelect = withContext(DatePicker.MonthSelect, \"monthSelect\", { baseComponent: true });\n\ninterface DatePickerNextTrigger extends DatePicker.NextTriggerProps, StyledProps {}\n\nexport const DatePickerNextTrigger = withContext(DatePicker.NextTrigger, \"nextTrigger\", { baseComponent: true });\n\nexport const DatePickerPositioner = withContext(DatePicker.Positioner, \"positioner\", { baseComponent: true });\n\nexport const DatePickerPresetTrigger = withContext(DatePicker.PresetTrigger, \"presetTrigger\", { baseComponent: true });\n\nexport const DatePickerPrevTrigger = withContext(DatePicker.PrevTrigger, \"prevTrigger\", { baseComponent: true });\n\nexport const DatePickerRangeText = withContext(DatePicker.RangeText, \"rangeText\", { baseComponent: true });\n\nexport const DatePickerTableBody = withContext(DatePicker.TableBody, \"tableBody\", { baseComponent: true });\n\nexport const DatePickerTableCell = withContext(DatePicker.TableCell, \"tableCell\", { baseComponent: true });\n\nexport const DatePickerTableCellTrigger = withContext(DatePicker.TableCellTrigger, \"tableCellTrigger\", {\n  baseComponent: true,\n});\n\nexport const DatePickerTableHead = withContext(DatePicker.TableHead, \"tableHead\", { baseComponent: true });\n\nexport const DatePickerTableHeader = withContext(DatePicker.TableHeader, \"tableHeader\", { baseComponent: true });\n\nexport const DatePickerTable = withContext(DatePicker.Table, \"table\", { baseComponent: true });\n\nexport const DatePickerTableRow = withContext(DatePicker.TableRow, \"tableRow\", { baseComponent: true });\n\nexport const DatePickerTrigger = withContext(DatePicker.Trigger, \"trigger\", { baseComponent: true });\n\nexport const DatePickerViewControl = withContext(DatePicker.ViewControl, \"viewControl\", { baseComponent: true });\n\nexport const DatePickerView = withContext(DatePicker.View, \"view\", { baseComponent: true });\n\nexport const DatePickerViewTrigger = withContext(DatePicker.ViewTrigger, \"viewTrigger\", { baseComponent: true });\n\nexport const DatePickerYearSelect = withContext(DatePicker.YearSelect, \"yearSelect\", { baseComponent: true });\n\nexport { DatePickerContext } from \"@ark-ui/react\";\n"],"mappings":"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"}

package/es/Dialog.mjs

@@ -2,8 +2,8 @@ import { Heading, Text } from "./Text.mjs";
 import { Dialog, dialogAnatomy, useDialog } from "@ark-ui/react";
 import { sva } from "@ndla/styled-system/css";
 import { createStyleContext, styled } from "@ndla/styled-system/jsx";
-import { forwardRef } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
 
 //#region src/Dialog.tsx
 const dialogRecipe = sva({

package/es/Dialog.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.mjs","names":["useDialog","_useDialog"],"sources":["../src/Dialog.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { forwardRef } from \"react\";\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 { 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 extends Omit<Dialog.DescriptionProps, \"color\">, TextProps, StyledProps {}\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 extends Omit<Dialog.TitleProps, \"color\">, TextProps, StyledProps {}\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":";;;;;;;;AAeA,MAAM,eAAe,IAAI;CACvB,OAAO,cAAc,MAAM;CAC3B,MAAM;EACJ,UAAU;GACR,UAAU;GACV,QAAQ;GACR,OAAO;GACP,MAAM;GACN,KAAK;GAEL,YAAY;GACZ,OAAO;IACL,WAAW;IACX,eAAe,EACb,WAAW,QACZ;IACF;GACD,SAAS;IACP,WAAW;IACX,eAAe,EACb,WAAW,QACZ;IACF;GACF;EACD,YAAY;GACV,UAAU;GACV,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,UAAU;GACV,MAAM;GACN,KAAK;GACL,OAAO;GACP,QAAQ;GACT;EACD,SAAS;GACP,YAAY;GACZ,UAAU;GACV,YAAY;GACZ,WAAW;GACX,QAAQ;GACR,UAAU;GACV,WAAW;GACX,QAAQ;GACR,WAAW;GACX,cAAc;IAAE,MAAM;IAAS,QAAQ;IAAS;GAChD,mBAAmB;GACnB,iBAAiB;GACjB,oBAAoB;GACpB,kBAAkB;GAClB,YAAY;IACV,YAAY;IACZ,UAAU;IACV,WAAW;IACZ;GACF;EACF;CACD,iBAAiB;EACf,MAAM;EACN,UAAU;EACV,SAAS;EACT,SAAS;EACV;CACD,kBAAkB;EAChB;GACE,SAAS;GACT,UAAU;GACV,KAAK,EACH,SAAS;IACP,WAAW;IACX,WAAW;IACX,OAAO;IACP,OAAO;KACL,WAAW;KACX,eAAe,EACb,WAAW,QACZ;KACF;IACD,SAAS;KACP,WAAW;KACX,eAAe,EACb,WAAW,QACZ;KACF;IACF,EACF;GACF;EACD;GACE,SAAS;GACT,UAAU;GACV,KAAK,EACH,SAAS;IACP,WAAW;IACX,WAAW;IACX,OAAO;IACP,OAAO;KACL,WAAW;KACX,eAAe,EACb,WAAW,QACZ;KACF;IACD,SAAS;KACP,WAAW;KACX,eAAe,EACb,WAAW,QACZ;KACF;IACF,EACF;GACF;EACD;GACE,SAAS;GACT,UAAU;GACV,KAAK,EACH,SAAS;IACP,UAAU;IACV,UAAU;IACV,QAAQ;IACR,OAAO;KACL,WAAW;KACX,eAAe,EACb,WAAW,QACZ;KACF;IACD,SAAS;KACP,WAAW;KACX,eAAe,EACb,WAAW,QACZ;KACF;IACF,EACF;GACF;EACD;GACE,SAAS;GACT,UAAU;GACV,KAAK,EACH,SAAS;IACP,UAAU;IACV,UAAU;IACV,QAAQ;IACR,OAAO;KACL,WAAW;KACX,eAAe,EACb,WAAW,QACZ;KACF;IACD,SAAS;KACP,WAAW;KACX,eAAe,EACb,WAAW,QACZ;KACF;IACF,EACF;GACF;EACD;GACE,SAAS;GACT,MAAM;GACN,KAAK,EACH,SAAS,EACP,UAAU,yBACX,EACF;GACF;EACD;GACE,SAAS;GACT,MAAM;GACN,KAAK,EACH,SAAS,EACP,UAAU,wBACX,EACF;GACF;EACD;GACE,SAAS;GACT,MAAM;GACN,KAAK,EACH,SAAS,EACP,UAAU,wBACX,EACF;GACF;EACD;GACE,SAAS;GACT,MAAM;GACN,KAAK,EACH,SAAS,EACP,UAAU,wBACX,EACF;GACF;EACF;CACD,UAAU;EACR,SAAS;GACP,QAAQ;IACN,YAAY,EACV,QAAQ,SACT;IACD,UAAU,EACR,QAAQ,WACT;IACF;GACD,OAAO;IACL,YAAY,EACV,QAAQ,cACT;IACD,UAAU,EACR,QAAQ,qBACT;IACF;GACF;EACD,SAAS;GACP,QAAQ,EACN,SAAS;IACP,YAAY;IACZ,cAAc;KAAE,MAAM;KAAS,QAAQ;KAAS;IACjD,EACF;GACD,QAAQ,EACN,SAAS;IACP,OAAO;IACP,OAAO;KACL,WAAW;KACX,eAAe,EACb,WAAW,QACZ;KACF;IACD,SAAS;KACP,WAAW;KACX,eAAe,EACb,WAAW,QACZ;KACF;IACF,EACF;GACF;EACD,UAAU;GACR,MAAM,EACJ,SAAS,EACP,mBAAmB,iBACpB,EACF;GACD,QAAQ,EAAE;GACV,OAAO,EACL,SAAS,EACP,iBAAiB,iBAClB,EACF;GACD,QAAQ,EACN,SAAS,EACP,gBAAgB,iBACjB,EACF;GACD,KAAK,EACH,SAAS,EACP,kBAAkB,iBACnB,EACF;GACF;EACD,MAAM;GACJ,MAAM,EACJ,SAAS;IACP,YAAY;IACZ,WAAW;IACX,UAAU;IACV,cAAc;IACf,EACF;GACD,QAAQ,EACN,SAAS,EACP,UAAU,wBACX,EACF;GACD,OAAO,EACL,SAAS,EACP,UAAU,wBACX,EACF;GACD,QAAQ,EACN,SAAS,EACP,UAAU,wBACX,EACF;GACD,OAAO,EACL,SAAS,EACP,UAAU,yBACX,EACF;GACF;EACF;CACF,CAAC;AAEF,MAAM,EAAE,kBAAkB,gBAAgB,mBAAmB,aAAa;AAM1E,MAAa,qBAAqB,iBAAiB,OAAO,KAAK;AAE/D,MAAa,cAAc,EAAE,YAAY,MAAM,gBAAgB,KAAM,GAAG,YACtE,oBAAC;CAA8B;CAA0B;CAAe,GAAI;EAAS;AAGvF,MAAa,iBAAiB,YAAY,OAAO,UAAU,YAAY,EAAE,eAAe,MAAM,CAAC;AAE/F,MAAa,0BAA0B,YAAY,OAAO,SAAS,WAAW,EAAE,eAAe,MAAM,CAAC;AAEtG,MAAa,mBAAmB,YAAY,OAAO,YAAY,cAAc,EAAE,eAAe,MAAM,CAAC;AAIrG,MAAa,gBAAgB,YAAgD,OAAO,QAClF,4CACE,oBAAC,mBAAiB,EAClB,oBAAC,8BACC,oBAAC;CAA6B;CAAK,GAAI;EAAS,GAC/B,IAClB,CACH;AAEF,MAAM,4BAA4B,YAAY,OAAO,aAAa,cAAc;AAIhF,MAAa,qBAAqB,EAAE,YAAY,cAAc,SAAU,GAAG,WAAmC;AAC5G,QACE,oBAAC;EAA0B;YACzB,oBAAC;GAAgB;GAAW,GAAI;GAC7B;IACI;GACmB;;AAIhC,MAAM,sBAAsB,YAAY,OAAO,OAAO,QAAQ;AAI9D,MAAa,eAAe,EAAE,YAAY,gBAAgB,SAAU,GAAG,WACrE,oBAAC;CAAoB;WACnB,oBAAC;EAAmB;EAAW,GAAI;EAChC;GACO;EACU;AAGxB,MAAa,gBAAgB,YAAY,OAAO,SAAS,WAAW,EAAE,eAAe,MAAM,CAAC;AAE5F,MAAa,qBAAqB,YAAY,OAAO,cAAc,gBAAgB,EAAE,eAAe,MAAM,CAAC;AAE3G,MAAa,eAAe,OAAO,OAAO,EACxC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,mBAAmB;CACnB,gBAAgB;CAChB,YAAY;CACZ,KAAK;CACN,EACF,CAAC;AAEF,MAAa,aAAa,OAAO,OAAO,EACtC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,eAAe;CACf,mBAAmB;CACnB,iBAAiB;CAClB,EACF,CAAC;AAEF,MAAa,eAAe,OAAO,OAAO,EACxC,MAAM;CACJ,SAAS;CACT,KAAK;CACL,YAAY;CACZ,gBAAgB;CAChB,eAAe;CACf,mBAAmB;CACnB,iBAAiB;CAClB,EACF,CAAC;AAEF,MAAa,qBAAqB,iBAAiB,OAAO,aAAa;AAEvE,MAAaA,cAAYC"}
+{"version":3,"file":"Dialog.mjs","names":["useDialog","_useDialog"],"sources":["../src/Dialog.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { forwardRef, type RefAttributes } from \"react\";\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 { 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\">,\n    TextProps,\n    StyledProps,\n    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\">,\n    TextProps,\n    StyledProps,\n    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":";;;;;;;;AAeA,MAAM,eAAe,IAAI;CACvB,OAAO,cAAc,MAAM;CAC3B,MAAM;EACJ,UAAU;GACR,UAAU;GACV,QAAQ;GACR,OAAO;GACP,MAAM;GACN,KAAK;GAEL,YAAY;GACZ,OAAO;IACL,WAAW;IACX,eAAe,EACb,WAAW,QACZ;IACF;GACD,SAAS;IACP,WAAW;IACX,eAAe,EACb,WAAW,QACZ;IACF;GACF;EACD,YAAY;GACV,UAAU;GACV,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,UAAU;GACV,MAAM;GACN,KAAK;GACL,OAAO;GACP,QAAQ;GACT;EACD,SAAS;GACP,YAAY;GACZ,UAAU;GACV,YAAY;GACZ,WAAW;GACX,QAAQ;GACR,UAAU;GACV,WAAW;GACX,QAAQ;GACR,WAAW;GACX,cAAc;IAAE,MAAM;IAAS,QAAQ;IAAS;GAChD,mBAAmB;GACnB,iBAAiB;GACjB,oBAAoB;GACpB,kBAAkB;GAClB,YAAY;IACV,YAAY;IACZ,UAAU;IACV,WAAW;IACZ;GACF;EACF;CACD,iBAAiB;EACf,MAAM;EACN,UAAU;EACV,SAAS;EACT,SAAS;EACV;CACD,kBAAkB;EAChB;GACE,SAAS;GACT,UAAU;GACV,KAAK,EACH,SAAS;IACP,WAAW;IACX,WAAW;IACX,OAAO;IACP,OAAO;KACL,WAAW;KACX,eAAe,EACb,WAAW,QACZ;KACF;IACD,SAAS;KACP,WAAW;KACX,eAAe,EACb,WAAW,QACZ;KACF;IACF,EACF;GACF;EACD;GACE,SAAS;GACT,UAAU;GACV,KAAK,EACH,SAAS;IACP,WAAW;IACX,WAAW;IACX,OAAO;IACP,OAAO;KACL,WAAW;KACX,eAAe,EACb,WAAW,QACZ;KACF;IACD,SAAS;KACP,WAAW;KACX,eAAe,EACb,WAAW,QACZ;KACF;IACF,EACF;GACF;EACD;GACE,SAAS;GACT,UAAU;GACV,KAAK,EACH,SAAS;IACP,UAAU;IACV,UAAU;IACV,QAAQ;IACR,OAAO;KACL,WAAW;KACX,eAAe,EACb,WAAW,QACZ;KACF;IACD,SAAS;KACP,WAAW;KACX,eAAe,EACb,WAAW,QACZ;KACF;IACF,EACF;GACF;EACD;GACE,SAAS;GACT,UAAU;GACV,KAAK,EACH,SAAS;IACP,UAAU;IACV,UAAU;IACV,QAAQ;IACR,OAAO;KACL,WAAW;KACX,eAAe,EACb,WAAW,QACZ;KACF;IACD,SAAS;KACP,WAAW;KACX,eAAe,EACb,WAAW,QACZ;KACF;IACF,EACF;GACF;EACD;GACE,SAAS;GACT,MAAM;GACN,KAAK,EACH,SAAS,EACP,UAAU,yBACX,EACF;GACF;EACD;GACE,SAAS;GACT,MAAM;GACN,KAAK,EACH,SAAS,EACP,UAAU,wBACX,EACF;GACF;EACD;GACE,SAAS;GACT,MAAM;GACN,KAAK,EACH,SAAS,EACP,UAAU,wBACX,EACF;GACF;EACD;GACE,SAAS;GACT,MAAM;GACN,KAAK,EACH,SAAS,EACP,UAAU,wBACX,EACF;GACF;EACF;CACD,UAAU;EACR,SAAS;GACP,QAAQ;IACN,YAAY,EACV,QAAQ,SACT;IACD,UAAU,EACR,QAAQ,WACT;IACF;GACD,OAAO;IACL,YAAY,EACV,QAAQ,cACT;IACD,UAAU,EACR,QAAQ,qBACT;IACF;GACF;EACD,SAAS;GACP,QAAQ,EACN,SAAS;IACP,YAAY;IACZ,cAAc;KAAE,MAAM;KAAS,QAAQ;KAAS;IACjD,EACF;GACD,QAAQ,EACN,SAAS;IACP,OAAO;IACP,OAAO;KACL,WAAW;KACX,eAAe,EACb,WAAW,QACZ;KACF;IACD,SAAS;KACP,WAAW;KACX,eAAe,EACb,WAAW,QACZ;KACF;IACF,EACF;GACF;EACD,UAAU;GACR,MAAM,EACJ,SAAS,EACP,mBAAmB,iBACpB,EACF;GACD,QAAQ,EAAE;GACV,OAAO,EACL,SAAS,EACP,iBAAiB,iBAClB,EACF;GACD,QAAQ,EACN,SAAS,EACP,gBAAgB,iBACjB,EACF;GACD,KAAK,EACH,SAAS,EACP,kBAAkB,iBACnB,EACF;GACF;EACD,MAAM;GACJ,MAAM,EACJ,SAAS;IACP,YAAY;IACZ,WAAW;IACX,UAAU;IACV,cAAc;IACf,EACF;GACD,QAAQ,EACN,SAAS,EACP,UAAU,wBACX,EACF;GACD,OAAO,EACL,SAAS,EACP,UAAU,wBACX,EACF;GACD,QAAQ,EACN,SAAS,EACP,UAAU,wBACX,EACF;GACD,OAAO,EACL,SAAS,EACP,UAAU,yBACX,EACF;GACF;EACF;CACF,CAAC;AAEF,MAAM,EAAE,kBAAkB,gBAAgB,mBAAmB,aAAa;AAM1E,MAAa,qBAAqB,iBAAiB,OAAO,KAAK;AAE/D,MAAa,cAAc,EAAE,YAAY,MAAM,gBAAgB,KAAM,GAAG,YACtE,oBAAC;CAA8B;CAA0B;CAAe,GAAI;EAAS;AAGvF,MAAa,iBAAiB,YAAY,OAAO,UAAU,YAAY,EAAE,eAAe,MAAM,CAAC;AAE/F,MAAa,0BAA0B,YAAY,OAAO,SAAS,WAAW,EAAE,eAAe,MAAM,CAAC;AAEtG,MAAa,mBAAmB,YAAY,OAAO,YAAY,cAAc,EAAE,eAAe,MAAM,CAAC;AAIrG,MAAa,gBAAgB,YAAgD,OAAO,QAClF,4CACE,oBAAC,mBAAiB,EAClB,oBAAC,8BACC,oBAAC;CAA6B;CAAK,GAAI;EAAS,GAC/B,IAClB,CACH;AAEF,MAAM,4BAA4B,YAAY,OAAO,aAAa,cAAc;AAQhF,MAAa,qBAAqB,EAAE,YAAY,cAAc,SAAU,GAAG,WAAmC;AAC5G,QACE,oBAAC;EAA0B;YACzB,oBAAC;GAAgB;GAAW,GAAI;GAC7B;IACI;GACmB;;AAIhC,MAAM,sBAAsB,YAAY,OAAO,OAAO,QAAQ;AAQ9D,MAAa,eAAe,EAAE,YAAY,gBAAgB,SAAU,GAAG,WACrE,oBAAC;CAAoB;WACnB,oBAAC;EAAmB;EAAW,GAAI;EAChC;GACO;EACU;AAGxB,MAAa,gBAAgB,YAAY,OAAO,SAAS,WAAW,EAAE,eAAe,MAAM,CAAC;AAE5F,MAAa,qBAAqB,YAAY,OAAO,cAAc,gBAAgB,EAAE,eAAe,MAAM,CAAC;AAE3G,MAAa,eAAe,OAAO,OAAO,EACxC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,mBAAmB;CACnB,gBAAgB;CAChB,YAAY;CACZ,KAAK;CACN,EACF,CAAC;AAEF,MAAa,aAAa,OAAO,OAAO,EACtC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,eAAe;CACf,mBAAmB;CACnB,iBAAiB;CAClB,EACF,CAAC;AAEF,MAAa,eAAe,OAAO,OAAO,EACxC,MAAM;CACJ,SAAS;CACT,KAAK;CACL,YAAY;CACZ,gBAAgB;CAChB,eAAe;CACf,mBAAmB;CACnB,iBAAiB;CAClB,EACF,CAAC;AAEF,MAAa,qBAAqB,iBAAiB,OAAO,aAAa;AAEvE,MAAaA,cAAYC"}

package/es/ErrorMessage/ErrorMessage.mjs

@@ -2,8 +2,8 @@ import { Heading, Text } from "../Text.mjs";
 import { ark } from "@ark-ui/react";
 import { sva } from "@ndla/styled-system/css";
 import { createStyleContext } from "@ndla/styled-system/jsx";
-import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 
 //#region src/ErrorMessage/ErrorMessage.tsx
 const errorMessageRecipe = sva({

package/es/ExpandableBox.mjs

@@ -1,7 +1,7 @@
 import { ark } from "@ark-ui/react";
 import { styled } from "@ndla/styled-system/jsx";
-import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 
 //#region src/ExpandableBox.tsx
 const StyledExpandableBox = styled(ark.details, { base: {

package/es/FieldErrorMessage.mjs

@@ -1,8 +1,8 @@
 import { Field, Fieldset } from "@ark-ui/react";
 import { css } from "@ndla/styled-system/css";
 import { styled } from "@ndla/styled-system/jsx";
-import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 
 //#region src/FieldErrorMessage.tsx
 const errorTextStyling = {

package/es/FieldHelper.mjs

@@ -1,8 +1,8 @@
 import { Field, Fieldset } from "@ark-ui/react";
 import { css } from "@ndla/styled-system/css";
 import { styled } from "@ndla/styled-system/jsx";
-import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 
 //#region src/FieldHelper.tsx
 const StyledFieldHelper = styled(Field.HelperText, {}, { baseComponent: true });

package/es/Figure.mjs

@@ -1,8 +1,8 @@
 import { ark } from "@ark-ui/react";
 import { css, cva } from "@ndla/styled-system/css";
 import { styled } from "@ndla/styled-system/jsx";
-import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 
 //#region src/Figure.tsx
 const figureRecipe = cva({

package/es/FileUpload.mjs

@@ -3,8 +3,8 @@ import { Label } from "./Label.mjs";
 import { FileUpload, fileUploadAnatomy } from "@ark-ui/react";
 import { sva } from "@ndla/styled-system/css";
 import { createStyleContext } from "@ndla/styled-system/jsx";
-import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 
 //#region src/FileUpload.tsx
 const fileUploadRecipe = sva({

package/es/FileUpload.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FileUpload.mjs","names":[],"sources":["../src/FileUpload.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { forwardRef } from \"react\";\nimport { FileUpload, fileUploadAnatomy } from \"@ark-ui/react\";\nimport { type RecipeVariantProps, sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { Label } from \"./Label\";\nimport { type TextProps, Text } from \"./Text\";\n\nconst fileUploadRecipe = sva({\n  slots: fileUploadAnatomy.keys(),\n  base: {\n    root: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      minHeight: \"100%\",\n    },\n    dropzone: {\n      display: \"flex\",\n      gap: \"small\",\n      flexDirection: \"column\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n      padding: \"4xlarge\",\n      borderRadius: \"xsmall\",\n      border: \"1px solid\",\n      borderColor: \"stroke.subtle\",\n      transitionProperty: \"border, border-color\",\n      transitionTimingFunction: \"default\",\n      transitionDuration: \"normal\",\n      _hover: {\n        borderStyle: \"dashed\",\n        borderColor: \"stroke.hover\",\n        _disabled: {\n          borderStyle: \"solid\",\n          borderColor: \"stroke.subtle\",\n        },\n      },\n    },\n    itemGroup: {\n      paddingBlockStart: \"medium\",\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"xsmall\",\n    },\n    item: {\n      width: \"100%\",\n      display: \"grid\",\n      gridTemplateAreas: `\n      \"preview name delete\" \n      \"preview size delete\"`,\n      gridTemplateColumns: \"auto 1fr auto\",\n      gridColumnGap: \"small\",\n      border: \"1px solid\",\n      borderColor: \"stroke.subtle\",\n      borderRadius: \"xsmall\",\n      padding: \"xsmall\",\n    },\n    itemPreview: {\n      display: \"flex\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n      width: \"xxlarge\",\n      height: \"xxlarge\",\n      gridArea: \"preview\",\n    },\n    itemName: {\n      gridArea: \"name\",\n      whiteSpace: \"nowrap\",\n      overflow: \"hidden\",\n      textOverflow: \"ellipsis\",\n    },\n    itemSizeText: {\n      gridArea: \"size\",\n    },\n    itemDeleteTrigger: {\n      gridArea: \"delete\",\n      alignSelf: \"center\",\n    },\n    itemPreviewImage: {\n      borderRadius: \"xsmall\",\n      objectFit: \"cover\",\n      width: \"100%\",\n      height: \"100%\",\n    },\n  },\n});\n\nconst { withProvider, withContext } = createStyleContext(fileUploadRecipe);\n\nexport type FileUploadVariantProps = NonNullable<RecipeVariantProps<typeof fileUploadRecipe>>;\n\nexport interface FileUploadRootProps extends FileUpload.RootProps, FileUploadVariantProps {}\n\nexport const FileUploadHiddenInput = FileUpload.HiddenInput;\nexport const FileUploadContext = FileUpload.Context;\n\nexport const FileUploadRoot = withProvider(FileUpload.Root, \"root\", { baseComponent: true });\n\nexport const FileUploadDropzone = withContext(FileUpload.Dropzone, \"dropzone\", { baseComponent: true });\n\nexport const FileUploadTrigger = withContext(FileUpload.Trigger, \"trigger\", { baseComponent: true });\n\nexport const FileUploadItemGroup = withContext(FileUpload.ItemGroup, \"itemGroup\", { baseComponent: true });\n\nexport const FileUploadItemPreview = withContext(FileUpload.ItemPreview, \"itemPreview\", { baseComponent: true });\n\nexport const FileUploadItem = withContext(FileUpload.Item, \"item\", { baseComponent: true });\n\nexport const FileUploadItemDeleteTrigger = withContext(FileUpload.ItemDeleteTrigger, \"itemDeleteTrigger\", {\n  baseComponent: true,\n});\n\nexport const FileUploadItemPreviewImage = withContext(FileUpload.ItemPreviewImage, \"itemPreviewImage\", {\n  baseComponent: true,\n});\n\nconst InternalFileUploadItemName = withContext(FileUpload.ItemName, \"itemName\", { baseComponent: true });\n\ninterface FileUploadItemNameProps extends Omit<FileUpload.ItemNameProps, \"color\">, TextProps, StyledProps {}\n\nexport const FileUploadItemName = forwardRef<HTMLDivElement, FileUploadItemNameProps>(\n  ({ textStyle = \"label.medium\", fontWeight = \"bold\", ...props }, ref) => (\n    <Text textStyle={textStyle} fontWeight={fontWeight} asChild {...props} ref={ref}>\n      {/* Do not use children here whatsoever. The component falls back to the file name only if no children are passed in. It should be up to the consumer if they want to pass in children. */}\n      <InternalFileUploadItemName />\n    </Text>\n  ),\n);\n\nconst InternalFileUploadItemSizeText = withContext(FileUpload.ItemSizeText, \"itemSizeText\", { baseComponent: true });\n\ninterface FileUploadItemSizeTextProps extends Omit<FileUpload.ItemSizeTextProps, \"color\">, TextProps, StyledProps {}\n\nexport const FileUploadItemSizeText = forwardRef<HTMLDivElement, FileUploadItemSizeTextProps>(\n  ({ textStyle = \"label.small\", ...props }, ref) => (\n    <Text textStyle={textStyle} ref={ref} asChild {...props}>\n      <InternalFileUploadItemSizeText />\n    </Text>\n  ),\n);\n\nconst InternalFileUploadLabel = withContext(FileUpload.Label, \"label\");\n\ninterface FileUploadLabelProps extends Omit<FileUpload.LabelProps, \"color\">, StyledProps, TextProps {}\n\nexport const FileUploadLabel = forwardRef<HTMLLabelElement, FileUploadLabelProps>(\n  ({ textStyle = \"label.medium\", fontWeight = \"light\", children, ...props }, ref) => (\n    <InternalFileUploadLabel ref={ref} asChild>\n      <Label textStyle={textStyle} fontWeight={fontWeight} {...props}>\n        {children}\n      </Label>\n    </InternalFileUploadLabel>\n  ),\n);\n"],"mappings":";;;;;;;;;AAgBA,MAAM,mBAAmB,IAAI;CAC3B,OAAO,kBAAkB,MAAM;CAC/B,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,WAAW;GACZ;EACD,UAAU;GACR,SAAS;GACT,KAAK;GACL,eAAe;GACf,YAAY;GACZ,gBAAgB;GAChB,SAAS;GACT,cAAc;GACd,QAAQ;GACR,aAAa;GACb,oBAAoB;GACpB,0BAA0B;GAC1B,oBAAoB;GACpB,QAAQ;IACN,aAAa;IACb,aAAa;IACb,WAAW;KACT,aAAa;KACb,aAAa;KACd;IACF;GACF;EACD,WAAW;GACT,mBAAmB;GACnB,SAAS;GACT,eAAe;GACf,KAAK;GACN;EACD,MAAM;GACJ,OAAO;GACP,SAAS;GACT,mBAAmB;;;GAGnB,qBAAqB;GACrB,eAAe;GACf,QAAQ;GACR,aAAa;GACb,cAAc;GACd,SAAS;GACV;EACD,aAAa;GACX,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,OAAO;GACP,QAAQ;GACR,UAAU;GACX;EACD,UAAU;GACR,UAAU;GACV,YAAY;GACZ,UAAU;GACV,cAAc;GACf;EACD,cAAc,EACZ,UAAU,QACX;EACD,mBAAmB;GACjB,UAAU;GACV,WAAW;GACZ;EACD,kBAAkB;GAChB,cAAc;GACd,WAAW;GACX,OAAO;GACP,QAAQ;GACT;EACF;CACF,CAAC;AAEF,MAAM,EAAE,cAAc,gBAAgB,mBAAmB,iBAAiB;AAM1E,MAAa,wBAAwB,WAAW;AAChD,MAAa,oBAAoB,WAAW;AAE5C,MAAa,iBAAiB,aAAa,WAAW,MAAM,QAAQ,EAAE,eAAe,MAAM,CAAC;AAE5F,MAAa,qBAAqB,YAAY,WAAW,UAAU,YAAY,EAAE,eAAe,MAAM,CAAC;AAEvG,MAAa,oBAAoB,YAAY,WAAW,SAAS,WAAW,EAAE,eAAe,MAAM,CAAC;AAEpG,MAAa,sBAAsB,YAAY,WAAW,WAAW,aAAa,EAAE,eAAe,MAAM,CAAC;AAE1G,MAAa,wBAAwB,YAAY,WAAW,aAAa,eAAe,EAAE,eAAe,MAAM,CAAC;AAEhH,MAAa,iBAAiB,YAAY,WAAW,MAAM,QAAQ,EAAE,eAAe,MAAM,CAAC;AAE3F,MAAa,8BAA8B,YAAY,WAAW,mBAAmB,qBAAqB,EACxG,eAAe,MAChB,CAAC;AAEF,MAAa,6BAA6B,YAAY,WAAW,kBAAkB,oBAAoB,EACrG,eAAe,MAChB,CAAC;AAEF,MAAM,6BAA6B,YAAY,WAAW,UAAU,YAAY,EAAE,eAAe,MAAM,CAAC;AAIxG,MAAa,qBAAqB,YAC/B,EAAE,YAAY,gBAAgB,aAAa,OAAQ,GAAG,SAAS,QAC9D,oBAAC;CAAgB;CAAuB;CAAY;CAAQ,GAAI;CAAY;WAE1E,oBAAC,+BAA6B;EACzB,CAEV;AAED,MAAM,iCAAiC,YAAY,WAAW,cAAc,gBAAgB,EAAE,eAAe,MAAM,CAAC;AAIpH,MAAa,yBAAyB,YACnC,EAAE,YAAY,cAAe,GAAG,SAAS,QACxC,oBAAC;CAAgB;CAAgB;CAAK;CAAQ,GAAI;WAChD,oBAAC,mCAAiC;EAC7B,CAEV;AAED,MAAM,0BAA0B,YAAY,WAAW,OAAO,QAAQ;AAItE,MAAa,kBAAkB,YAC5B,EAAE,YAAY,gBAAgB,aAAa,SAAS,SAAU,GAAG,SAAS,QACzE,oBAAC;CAA6B;CAAK;WACjC,oBAAC;EAAiB;EAAuB;EAAY,GAAI;EACtD;GACK;EACgB,CAE7B"}
+{"version":3,"file":"FileUpload.mjs","names":[],"sources":["../src/FileUpload.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { forwardRef, type RefAttributes } from \"react\";\nimport { FileUpload, fileUploadAnatomy } from \"@ark-ui/react\";\nimport { type RecipeVariantProps, sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { Label } from \"./Label\";\nimport { type TextProps, Text } from \"./Text\";\n\nconst fileUploadRecipe = sva({\n  slots: fileUploadAnatomy.keys(),\n  base: {\n    root: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      minHeight: \"100%\",\n    },\n    dropzone: {\n      display: \"flex\",\n      gap: \"small\",\n      flexDirection: \"column\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n      padding: \"4xlarge\",\n      borderRadius: \"xsmall\",\n      border: \"1px solid\",\n      borderColor: \"stroke.subtle\",\n      transitionProperty: \"border, border-color\",\n      transitionTimingFunction: \"default\",\n      transitionDuration: \"normal\",\n      _hover: {\n        borderStyle: \"dashed\",\n        borderColor: \"stroke.hover\",\n        _disabled: {\n          borderStyle: \"solid\",\n          borderColor: \"stroke.subtle\",\n        },\n      },\n    },\n    itemGroup: {\n      paddingBlockStart: \"medium\",\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"xsmall\",\n    },\n    item: {\n      width: \"100%\",\n      display: \"grid\",\n      gridTemplateAreas: `\n      \"preview name delete\" \n      \"preview size delete\"`,\n      gridTemplateColumns: \"auto 1fr auto\",\n      gridColumnGap: \"small\",\n      border: \"1px solid\",\n      borderColor: \"stroke.subtle\",\n      borderRadius: \"xsmall\",\n      padding: \"xsmall\",\n    },\n    itemPreview: {\n      display: \"flex\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n      width: \"xxlarge\",\n      height: \"xxlarge\",\n      gridArea: \"preview\",\n    },\n    itemName: {\n      gridArea: \"name\",\n      whiteSpace: \"nowrap\",\n      overflow: \"hidden\",\n      textOverflow: \"ellipsis\",\n    },\n    itemSizeText: {\n      gridArea: \"size\",\n    },\n    itemDeleteTrigger: {\n      gridArea: \"delete\",\n      alignSelf: \"center\",\n    },\n    itemPreviewImage: {\n      borderRadius: \"xsmall\",\n      objectFit: \"cover\",\n      width: \"100%\",\n      height: \"100%\",\n    },\n  },\n});\n\nconst { withProvider, withContext } = createStyleContext(fileUploadRecipe);\n\nexport type FileUploadVariantProps = NonNullable<RecipeVariantProps<typeof fileUploadRecipe>>;\n\nexport interface FileUploadRootProps extends FileUpload.RootProps, FileUploadVariantProps {}\n\nexport const FileUploadHiddenInput = FileUpload.HiddenInput;\nexport const FileUploadContext = FileUpload.Context;\n\nexport const FileUploadRoot = withProvider(FileUpload.Root, \"root\", { baseComponent: true });\n\nexport const FileUploadDropzone = withContext(FileUpload.Dropzone, \"dropzone\", { baseComponent: true });\n\nexport const FileUploadTrigger = withContext(FileUpload.Trigger, \"trigger\", { baseComponent: true });\n\nexport const FileUploadItemGroup = withContext(FileUpload.ItemGroup, \"itemGroup\", { baseComponent: true });\n\nexport const FileUploadItemPreview = withContext(FileUpload.ItemPreview, \"itemPreview\", { baseComponent: true });\n\nexport const FileUploadItem = withContext(FileUpload.Item, \"item\", { baseComponent: true });\n\nexport const FileUploadItemDeleteTrigger = withContext(FileUpload.ItemDeleteTrigger, \"itemDeleteTrigger\", {\n  baseComponent: true,\n});\n\nexport const FileUploadItemPreviewImage = withContext(FileUpload.ItemPreviewImage, \"itemPreviewImage\", {\n  baseComponent: true,\n});\n\nconst InternalFileUploadItemName = withContext(FileUpload.ItemName, \"itemName\", { baseComponent: true });\n\ninterface FileUploadItemNameProps\n  extends Omit<FileUpload.ItemNameProps, \"color\">,\n    TextProps,\n    StyledProps,\n    RefAttributes<HTMLParagraphElement> {}\n\nexport const FileUploadItemName = forwardRef<HTMLDivElement, FileUploadItemNameProps>(\n  ({ textStyle = \"label.medium\", fontWeight = \"bold\", ...props }, ref) => (\n    <Text textStyle={textStyle} fontWeight={fontWeight} asChild {...props} ref={ref}>\n      {/* Do not use children here whatsoever. The component falls back to the file name only if no children are passed in. It should be up to the consumer if they want to pass in children. */}\n      <InternalFileUploadItemName />\n    </Text>\n  ),\n);\n\nconst InternalFileUploadItemSizeText = withContext(FileUpload.ItemSizeText, \"itemSizeText\", { baseComponent: true });\n\ninterface FileUploadItemSizeTextProps\n  extends Omit<FileUpload.ItemSizeTextProps, \"color\">,\n    TextProps,\n    StyledProps,\n    RefAttributes<HTMLParagraphElement> {}\n\nexport const FileUploadItemSizeText = forwardRef<HTMLDivElement, FileUploadItemSizeTextProps>(\n  ({ textStyle = \"label.small\", ...props }, ref) => (\n    <Text textStyle={textStyle} ref={ref} asChild {...props}>\n      <InternalFileUploadItemSizeText />\n    </Text>\n  ),\n);\n\nconst InternalFileUploadLabel = withContext(FileUpload.Label, \"label\");\n\ninterface FileUploadLabelProps\n  extends Omit<FileUpload.LabelProps, \"color\">,\n    StyledProps,\n    TextProps,\n    RefAttributes<HTMLLabelElement> {}\n\nexport const FileUploadLabel = forwardRef<HTMLLabelElement, FileUploadLabelProps>(\n  ({ textStyle = \"label.medium\", fontWeight = \"light\", children, ...props }, ref) => (\n    <InternalFileUploadLabel ref={ref} asChild>\n      <Label textStyle={textStyle} fontWeight={fontWeight} {...props}>\n        {children}\n      </Label>\n    </InternalFileUploadLabel>\n  ),\n);\n"],"mappings":";;;;;;;;;AAgBA,MAAM,mBAAmB,IAAI;CAC3B,OAAO,kBAAkB,MAAM;CAC/B,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,WAAW;GACZ;EACD,UAAU;GACR,SAAS;GACT,KAAK;GACL,eAAe;GACf,YAAY;GACZ,gBAAgB;GAChB,SAAS;GACT,cAAc;GACd,QAAQ;GACR,aAAa;GACb,oBAAoB;GACpB,0BAA0B;GAC1B,oBAAoB;GACpB,QAAQ;IACN,aAAa;IACb,aAAa;IACb,WAAW;KACT,aAAa;KACb,aAAa;KACd;IACF;GACF;EACD,WAAW;GACT,mBAAmB;GACnB,SAAS;GACT,eAAe;GACf,KAAK;GACN;EACD,MAAM;GACJ,OAAO;GACP,SAAS;GACT,mBAAmB;;;GAGnB,qBAAqB;GACrB,eAAe;GACf,QAAQ;GACR,aAAa;GACb,cAAc;GACd,SAAS;GACV;EACD,aAAa;GACX,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,OAAO;GACP,QAAQ;GACR,UAAU;GACX;EACD,UAAU;GACR,UAAU;GACV,YAAY;GACZ,UAAU;GACV,cAAc;GACf;EACD,cAAc,EACZ,UAAU,QACX;EACD,mBAAmB;GACjB,UAAU;GACV,WAAW;GACZ;EACD,kBAAkB;GAChB,cAAc;GACd,WAAW;GACX,OAAO;GACP,QAAQ;GACT;EACF;CACF,CAAC;AAEF,MAAM,EAAE,cAAc,gBAAgB,mBAAmB,iBAAiB;AAM1E,MAAa,wBAAwB,WAAW;AAChD,MAAa,oBAAoB,WAAW;AAE5C,MAAa,iBAAiB,aAAa,WAAW,MAAM,QAAQ,EAAE,eAAe,MAAM,CAAC;AAE5F,MAAa,qBAAqB,YAAY,WAAW,UAAU,YAAY,EAAE,eAAe,MAAM,CAAC;AAEvG,MAAa,oBAAoB,YAAY,WAAW,SAAS,WAAW,EAAE,eAAe,MAAM,CAAC;AAEpG,MAAa,sBAAsB,YAAY,WAAW,WAAW,aAAa,EAAE,eAAe,MAAM,CAAC;AAE1G,MAAa,wBAAwB,YAAY,WAAW,aAAa,eAAe,EAAE,eAAe,MAAM,CAAC;AAEhH,MAAa,iBAAiB,YAAY,WAAW,MAAM,QAAQ,EAAE,eAAe,MAAM,CAAC;AAE3F,MAAa,8BAA8B,YAAY,WAAW,mBAAmB,qBAAqB,EACxG,eAAe,MAChB,CAAC;AAEF,MAAa,6BAA6B,YAAY,WAAW,kBAAkB,oBAAoB,EACrG,eAAe,MAChB,CAAC;AAEF,MAAM,6BAA6B,YAAY,WAAW,UAAU,YAAY,EAAE,eAAe,MAAM,CAAC;AAQxG,MAAa,qBAAqB,YAC/B,EAAE,YAAY,gBAAgB,aAAa,OAAQ,GAAG,SAAS,QAC9D,oBAAC;CAAgB;CAAuB;CAAY;CAAQ,GAAI;CAAY;WAE1E,oBAAC,+BAA6B;EACzB,CAEV;AAED,MAAM,iCAAiC,YAAY,WAAW,cAAc,gBAAgB,EAAE,eAAe,MAAM,CAAC;AAQpH,MAAa,yBAAyB,YACnC,EAAE,YAAY,cAAe,GAAG,SAAS,QACxC,oBAAC;CAAgB;CAAgB;CAAK;CAAQ,GAAI;WAChD,oBAAC,mCAAiC;EAC7B,CAEV;AAED,MAAM,0BAA0B,YAAY,WAAW,OAAO,QAAQ;AAQtE,MAAa,kBAAkB,YAC5B,EAAE,YAAY,gBAAgB,aAAa,SAAS,SAAU,GAAG,SAAS,QACzE,oBAAC;CAA6B;CAAK;WACjC,oBAAC;EAAiB;EAAuB;EAAY,GAAI;EACtD;GACK;EACgB,CAE7B"}

package/es/FramedContent.mjs

@@ -1,8 +1,8 @@
 import { ark } from "@ark-ui/react";
 import { css, cva } from "@ndla/styled-system/css";
 import { styled } from "@ndla/styled-system/jsx";
-import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 
 //#region src/FramedContent.tsx
 const framedContentRecipe = cva({

package/es/Image.mjs

@@ -1,7 +1,7 @@
 import { ark } from "@ark-ui/react";
 import { styled } from "@ndla/styled-system/jsx";
-import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
 
 //#region src/Image.tsx
 const makeSrcQueryString = ({ width, crop, focalPoint, imageLanguage }) => {

package/es/Input.mjs

@@ -1,8 +1,8 @@
 import { Field, ark } from "@ark-ui/react";
 import { css, cva } from "@ndla/styled-system/css";
 import { styled } from "@ndla/styled-system/jsx";
-import { createContext, forwardRef, useCallback, useContext, useEffect, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
+import { createContext, forwardRef, useCallback, useContext, useEffect, useRef } from "react";
 import { composeRefs } from "@ndla/util";
 
 //#region src/Input.tsx

package/es/Label.mjs

@@ -1,8 +1,8 @@
 import { Field, Fieldset, ark } from "@ark-ui/react";
 import { css } from "@ndla/styled-system/css";
 import { styled } from "@ndla/styled-system/jsx";
-import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 
 //#region src/Label.tsx
 const StyledLegend = styled(ark.legend, { base: {

package/es/Layout/PageContainer.mjs

@@ -1,8 +1,8 @@
 import { PageContent } from "./PageContent.mjs";
 import "@ark-ui/react";
 import { css, cva } from "@ndla/styled-system/css";
-import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 
 //#region src/Layout/PageContainer.tsx
 const pageContainerRecipe = cva({

package/es/Layout/PageContent.mjs

@@ -1,8 +1,8 @@
 import { ark } from "@ark-ui/react";
 import { css, cva } from "@ndla/styled-system/css";
 import { styled } from "@ndla/styled-system/jsx";
-import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 
 //#region src/Layout/PageContent.tsx
 const pageRecipe = cva({

package/es/ListItem/ListItem.mjs

@@ -3,8 +3,8 @@ import { Heading } from "../Text.mjs";
 import { ark } from "@ark-ui/react";
 import { sva } from "@ndla/styled-system/css";
 import { createStyleContext } from "@ndla/styled-system/jsx";
-import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 
 //#region src/ListItem/ListItem.tsx
 const listItemRecipe = sva({

package/es/Menu.mjs

@@ -2,8 +2,8 @@ import { Text } from "./Text.mjs";
 import { Menu, menuAnatomy } from "@ark-ui/react";
 import { css, cva, sva } from "@ndla/styled-system/css";
 import { createStyleContext } from "@ndla/styled-system/jsx";
-import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 
 //#region src/Menu.tsx
 const itemStyle = css.raw({