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

package/es/Label.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Label.mjs","names":[],"sources":["../src/Label.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Field, Fieldset, type HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { css } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\nimport { type TextProps } from \"./Text\";\n\nconst StyledLegend = styled(\n  ark.legend,\n  {\n    base: {\n      float: \"left\",\n      width: \"inherit\",\n      _disabled: {\n        color: \"text.subtle\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n\nexport interface LegendProps extends Omit<HTMLArkProps<\"legend\">, \"color\">, StyledProps, TextProps {}\n\nexport const Legend = forwardRef<HTMLLegendElement, LegendProps>(\n  ({ textStyle = \"label.medium\", fontWeight = \"bold\", css: cssProp, srOnly, color, ...rest }, ref) => (\n    <StyledLegend css={css.raw({ textStyle, fontWeight, srOnly, color }, cssProp)} {...rest} ref={ref} />\n  ),\n);\n\nexport interface FieldsetLegendProps extends Omit<Fieldset.LegendProps, \"color\">, TextProps, StyledProps {}\n\nexport const FieldsetLegend = forwardRef<HTMLLegendElement, LegendProps>(({ children, ...props }, ref) => (\n  <Fieldset.Legend asChild {...props} ref={ref}>\n    <Legend>{children}</Legend>\n  </Fieldset.Legend>\n));\n\nconst StyledLabel = styled(\n  ark.label,\n  {\n    base: {\n      display: \"inline-block\",\n      _disabled: {\n        color: \"text.subtle\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n\nexport interface LabelProps extends Omit<HTMLArkProps<\"label\">, \"color\">, TextProps, StyledProps {}\n\nexport const Label = forwardRef<HTMLLabelElement, LabelProps>(\n  ({ textStyle = \"label.medium\", fontWeight = \"bold\", css: cssProp, srOnly, color, ...rest }, ref) => (\n    <StyledLabel css={css.raw({ textStyle, fontWeight, srOnly, color }, cssProp)} {...rest} ref={ref} />\n  ),\n);\n\nexport const FieldLabel = forwardRef<HTMLLabelElement, LabelProps>(({ children, ...props }, ref) => (\n  <Field.Label asChild {...props} ref={ref}>\n    <Label>{children}</Label>\n  </Field.Label>\n));\n"],"mappings":";;;;;;;;;;;;;AAeA,MAAM,eAAe,OACnB,IAAI,QACJ,EACE,MAAM;CACJ,OAAO;CACP,OAAO;CACP,WAAW,EACT,OAAO,cACT;AACF,EACF,GACA,EAAE,eAAe,KAAK,CACxB;AAIA,MAAa,SAAS,YACnB,EAAE,YAAY,gBAAgB,aAAa,QAAQ,KAAK,SAAS,QAAQ,OAAO,GAAG,QAAQ,QAC1F,oBAAC,cAAD;CAAc,KAAK,IAAI,IAAI;EAAE;EAAW;EAAY;EAAQ;CAAM,GAAG,OAAO;CAAG,GAAI;CAAW;AAAM,CAAA,CAExG;AAIA,MAAa,iBAAiB,YAA4C,EAAE,UAAU,GAAG,SAAS,QAChG,oBAAC,SAAS,QAAV;CAAiB,SAAA;CAAQ,GAAI;CAAY;WACvC,oBAAC,QAAD,EAAS,SAAiB,CAAA;AACX,CAAA,CAClB;AAED,MAAM,cAAc,OAClB,IAAI,OACJ,EACE,MAAM;CACJ,SAAS;CACT,WAAW,EACT,OAAO,cACT;AACF,EACF,GACA,EAAE,eAAe,KAAK,CACxB;AAIA,MAAa,QAAQ,YAClB,EAAE,YAAY,gBAAgB,aAAa,QAAQ,KAAK,SAAS,QAAQ,OAAO,GAAG,QAAQ,QAC1F,oBAAC,aAAD;CAAa,KAAK,IAAI,IAAI;EAAE;EAAW;EAAY;EAAQ;CAAM,GAAG,OAAO;CAAG,GAAI;CAAW;AAAM,CAAA,CAEvG;AAEA,MAAa,aAAa,YAA0C,EAAE,UAAU,GAAG,SAAS,QAC1F,oBAAC,MAAM,OAAP;CAAa,SAAA;CAAQ,GAAI;CAAY;WACnC,oBAAC,OAAD,EAAQ,SAAgB,CAAA;AACb,CAAA,CACd"}
+{"version":3,"file":"Label.mjs","names":[],"sources":["../src/Label.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type HTMLArkProps, ark } from \"@ark-ui/react/factory\";\nimport { Field } from \"@ark-ui/react/field\";\nimport { Fieldset } from \"@ark-ui/react/fieldset\";\nimport { css } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\nimport { type TextProps } from \"./Text\";\n\nconst StyledLegend = styled(\n  ark.legend,\n  {\n    base: {\n      float: \"left\",\n      width: \"inherit\",\n      _disabled: {\n        color: \"text.subtle\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n\nexport interface LegendProps extends Omit<HTMLArkProps<\"legend\">, \"color\">, StyledProps, TextProps {}\n\nexport const Legend = forwardRef<HTMLLegendElement, LegendProps>(\n  ({ textStyle = \"label.medium\", fontWeight = \"bold\", css: cssProp, srOnly, color, ...rest }, ref) => (\n    <StyledLegend css={css.raw({ textStyle, fontWeight, srOnly, color }, cssProp)} {...rest} ref={ref} />\n  ),\n);\n\nexport interface FieldsetLegendProps extends Omit<Fieldset.LegendProps, \"color\">, TextProps, StyledProps {}\n\nexport const FieldsetLegend = forwardRef<HTMLLegendElement, LegendProps>(({ children, ...props }, ref) => (\n  <Fieldset.Legend asChild {...props} ref={ref}>\n    <Legend>{children}</Legend>\n  </Fieldset.Legend>\n));\n\nconst StyledLabel = styled(\n  ark.label,\n  {\n    base: {\n      display: \"inline-block\",\n      _disabled: {\n        color: \"text.subtle\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n\nexport interface LabelProps extends Omit<HTMLArkProps<\"label\">, \"color\">, TextProps, StyledProps {}\n\nexport const Label = forwardRef<HTMLLabelElement, LabelProps>(\n  ({ textStyle = \"label.medium\", fontWeight = \"bold\", css: cssProp, srOnly, color, ...rest }, ref) => (\n    <StyledLabel css={css.raw({ textStyle, fontWeight, srOnly, color }, cssProp)} {...rest} ref={ref} />\n  ),\n);\n\nexport const FieldLabel = forwardRef<HTMLLabelElement, LabelProps>(({ children, ...props }, ref) => (\n  <Field.Label asChild {...props} ref={ref}>\n    <Label>{children}</Label>\n  </Field.Label>\n));\n"],"mappings":";;;;;;;;;;;;;;;AAiBA,MAAM,eAAe,OACnB,IAAI,QACJ,EACE,MAAM;CACJ,OAAO;CACP,OAAO;CACP,WAAW,EACT,OAAO,cACT;AACF,EACF,GACA,EAAE,eAAe,KAAK,CACxB;AAIA,MAAa,SAAS,YACnB,EAAE,YAAY,gBAAgB,aAAa,QAAQ,KAAK,SAAS,QAAQ,OAAO,GAAG,QAAQ,QAC1F,oBAAC,cAAD;CAAc,KAAK,IAAI,IAAI;EAAE;EAAW;EAAY;EAAQ;CAAM,GAAG,OAAO;CAAG,GAAI;CAAW;AAAM,CAAA,CAExG;AAIA,MAAa,iBAAiB,YAA4C,EAAE,UAAU,GAAG,SAAS,QAChG,oBAAC,SAAS,QAAV;CAAiB,SAAA;CAAQ,GAAI;CAAY;WACvC,oBAAC,QAAD,EAAS,SAAiB,CAAA;AACX,CAAA,CAClB;AAED,MAAM,cAAc,OAClB,IAAI,OACJ,EACE,MAAM;CACJ,SAAS;CACT,WAAW,EACT,OAAO,cACT;AACF,EACF,GACA,EAAE,eAAe,KAAK,CACxB;AAIA,MAAa,QAAQ,YAClB,EAAE,YAAY,gBAAgB,aAAa,QAAQ,KAAK,SAAS,QAAQ,OAAO,GAAG,QAAQ,QAC1F,oBAAC,aAAD;CAAa,KAAK,IAAI,IAAI;EAAE;EAAW;EAAY;EAAQ;CAAM,GAAG,OAAO;CAAG,GAAI;CAAW;AAAM,CAAA,CAEvG;AAEA,MAAa,aAAa,YAA0C,EAAE,UAAU,GAAG,SAAS,QAC1F,oBAAC,MAAM,OAAP;CAAa,SAAA;CAAQ,GAAI;CAAY;WACnC,oBAAC,OAAD,EAAQ,SAAgB,CAAA;AACb,CAAA,CACd"}

package/es/Layout/PageContainer.mjs

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

package/es/Layout/PageContainer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PageContainer.mjs","names":[],"sources":["../../src/Layout/PageContainer.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type HTMLArkProps } from \"@ark-ui/react\";\nimport { css, cva } from \"@ndla/styled-system/css\";\nimport type { StyledProps, RecipeVariantProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\nimport { PageContent, type PageContentVariantProps } from \"./PageContent\";\n\nconst pageContainerRecipe = cva({\n  defaultVariants: {\n    padding: \"medium\",\n  },\n  variants: {\n    padding: {\n      none: {},\n      small: {\n        paddingBlockStart: \"medium\",\n        paddingBlockEnd: \"5xlarge\",\n      },\n      medium: {\n        paddingBlockStart: \"xxlarge\",\n        paddingBlockEnd: \"5xlarge\",\n      },\n      large: {\n        paddingBlockStart: \"4xlarge\",\n        paddingBlockEnd: \"5xlarge\",\n      },\n    },\n  },\n});\n\nexport type PageContainerVariantProps = NonNullable<RecipeVariantProps<typeof pageContainerRecipe>>;\n\nexport interface PageContainerProps\n  extends HTMLArkProps<\"div\">, StyledProps, PageContentVariantProps, PageContainerVariantProps {}\n\nexport const PageContainer = forwardRef<HTMLDivElement, PageContainerProps>(\n  ({ padding, css: cssProp, ...props }, ref) => (\n    <PageContent css={css.raw(pageContainerRecipe.raw({ padding }), cssProp)} {...props} ref={ref} />\n  ),\n);\n"],"mappings":";;;;;;AAcA,MAAM,sBAAsB,IAAI;CAC9B,iBAAiB,EACf,SAAS,SACX;CACA,UAAU,EACR,SAAS;EACP,MAAM,CAAC;EACP,OAAO;GACL,mBAAmB;GACnB,iBAAiB;EACnB;EACA,QAAQ;GACN,mBAAmB;GACnB,iBAAiB;EACnB;EACA,OAAO;GACL,mBAAmB;GACnB,iBAAiB;EACnB;CACF,EACF;AACF,CAAC;AAOD,MAAa,gBAAgB,YAC1B,EAAE,SAAS,KAAK,SAAS,GAAG,SAAS,QACpC,oBAAC,aAAD;CAAa,KAAK,IAAI,IAAI,oBAAoB,IAAI,EAAE,QAAQ,CAAC,GAAG,OAAO;CAAG,GAAI;CAAY;AAAM,CAAA,CAEpG"}
+{"version":3,"file":"PageContainer.mjs","names":[],"sources":["../../src/Layout/PageContainer.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type HTMLArkProps } from \"@ark-ui/react/factory\";\nimport { css, cva } from \"@ndla/styled-system/css\";\nimport type { StyledProps, RecipeVariantProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\nimport { PageContent, type PageContentVariantProps } from \"./PageContent\";\n\nconst pageContainerRecipe = cva({\n  defaultVariants: {\n    padding: \"medium\",\n  },\n  variants: {\n    padding: {\n      none: {},\n      small: {\n        paddingBlockStart: \"medium\",\n        paddingBlockEnd: \"5xlarge\",\n      },\n      medium: {\n        paddingBlockStart: \"xxlarge\",\n        paddingBlockEnd: \"5xlarge\",\n      },\n      large: {\n        paddingBlockStart: \"4xlarge\",\n        paddingBlockEnd: \"5xlarge\",\n      },\n    },\n  },\n});\n\nexport type PageContainerVariantProps = NonNullable<RecipeVariantProps<typeof pageContainerRecipe>>;\n\nexport interface PageContainerProps\n  extends HTMLArkProps<\"div\">, StyledProps, PageContentVariantProps, PageContainerVariantProps {}\n\nexport const PageContainer = forwardRef<HTMLDivElement, PageContainerProps>(\n  ({ padding, css: cssProp, ...props }, ref) => (\n    <PageContent css={css.raw(pageContainerRecipe.raw({ padding }), cssProp)} {...props} ref={ref} />\n  ),\n);\n"],"mappings":";;;;;;AAcA,MAAM,sBAAsB,IAAI;CAC9B,iBAAiB,EACf,SAAS,SACX;CACA,UAAU,EACR,SAAS;EACP,MAAM,CAAC;EACP,OAAO;GACL,mBAAmB;GACnB,iBAAiB;EACnB;EACA,QAAQ;GACN,mBAAmB;GACnB,iBAAiB;EACnB;EACA,OAAO;GACL,mBAAmB;GACnB,iBAAiB;EACnB;CACF,EACF;AACF,CAAC;AAOD,MAAa,gBAAgB,YAC1B,EAAE,SAAS,KAAK,SAAS,GAAG,SAAS,QACpC,oBAAC,aAAD;CAAa,KAAK,IAAI,IAAI,oBAAoB,IAAI,EAAE,QAAQ,CAAC,GAAG,OAAO;CAAG,GAAI;CAAY;AAAM,CAAA,CAEpG"}

package/es/Layout/PageContent.mjs

@@ -1,7 +1,7 @@
-import { ark } from "@ark-ui/react";
 import { css, cva } from "@ndla/styled-system/css";
 import { styled } from "@ndla/styled-system/jsx";
 import { jsx } from "react/jsx-runtime";
+import { ark } from "@ark-ui/react/factory";
 import { forwardRef } from "react";
 //#region src/Layout/PageContent.tsx
 /**

package/es/Layout/PageContent.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PageContent.mjs","names":[],"sources":["../../src/Layout/PageContent.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps, RecipeVariantProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\n\nconst pageRecipe = cva({\n  base: {\n    display: \"grid\",\n    transitionProperty: \"all\",\n    transitionDuration: \"default\",\n    transitionTimingFunction: \"default\",\n    alignContent: \"start\",\n    /**\n     * var(--size) is the max width of the content\n     * calc(100% - (var(--gutter, 0) * 2)) is the max width of the page, minus the gutters (inline padding without being actual padding).\n     * In effect, this will center the content on the page, and constrain it to either the content width or the page width, whichever is smaller.\n     */\n    gridColumnGap: \"var(--gutter, 0)\",\n    gridTemplateColumns: \"1fr min(var(--size), calc(100% - (var(--gutter, 0) * 2))) 1fr\",\n    \"& > *\": {\n      gridColumnStart: \"2\",\n      gridColumnEnd: \"2\",\n    },\n  },\n  defaultVariants: {\n    variant: \"page\",\n    gutters: \"always\",\n  },\n  variants: {\n    variant: {\n      content: {\n        \"--size\": \"sizes.surface.contentMax\",\n      },\n      article: {\n        \"--size\": \"sizes.surface.articleMax\",\n      },\n      page: {\n        \"--size\": \"sizes.surface.pageMax\",\n      },\n      wide: {\n        \"--size\": \"sizes.surface.wideMax\",\n      },\n    },\n    gutters: {\n      never: {\n        \"--gutter\": \"0px\",\n      },\n      mobileUp: {\n        \"--gutter\": \"0px\",\n        mobileWide: {\n          \"--gutter\": \"spacing.medium\",\n        },\n      },\n      tabletUp: {\n        \"--gutter\": \"0px\",\n        tablet: {\n          \"--gutter\": \"spacing.medium\",\n        },\n      },\n      always: {\n        \"--gutter\": \"spacing.small\",\n        tablet: {\n          \"--gutter\": \"spacing.medium\",\n        },\n      },\n    },\n  },\n});\n\nconst StyledPageContent = styled(ark.div, {}, { baseComponent: true });\n\nexport type PageContentVariantProps = NonNullable<RecipeVariantProps<typeof pageRecipe>>;\n\nexport interface PageContentProps extends HTMLArkProps<\"div\">, StyledProps, PageContentVariantProps {}\n\nexport const PageContent = forwardRef<HTMLDivElement, PageContentProps>(\n  ({ variant, gutters, css: cssProp, ...props }, ref) => (\n    <StyledPageContent css={css.raw(pageRecipe.raw({ variant, gutters }), cssProp)} ref={ref} {...props} />\n  ),\n);\n\nexport const BleedPageContent = styled(\n  ark.div,\n  {\n    base: {\n      \"& \": {\n        width: \"100%\",\n        gridColumnStart: \"1\",\n        gridColumnEnd: \"-1\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,aAAa,IAAI;CACrB,MAAM;EACJ,SAAS;EACT,oBAAoB;EACpB,oBAAoB;EACpB,0BAA0B;EAC1B,cAAc;;;;;;EAMd,eAAe;EACf,qBAAqB;EACrB,SAAS;GACP,iBAAiB;GACjB,eAAe;EACjB;CACF;CACA,iBAAiB;EACf,SAAS;EACT,SAAS;CACX;CACA,UAAU;EACR,SAAS;GACP,SAAS,EACP,UAAU,2BACZ;GACA,SAAS,EACP,UAAU,2BACZ;GACA,MAAM,EACJ,UAAU,wBACZ;GACA,MAAM,EACJ,UAAU,wBACZ;EACF;EACA,SAAS;GACP,OAAO,EACL,YAAY,MACd;GACA,UAAU;IACR,YAAY;IACZ,YAAY,EACV,YAAY,iBACd;GACF;GACA,UAAU;IACR,YAAY;IACZ,QAAQ,EACN,YAAY,iBACd;GACF;GACA,QAAQ;IACN,YAAY;IACZ,QAAQ,EACN,YAAY,iBACd;GACF;EACF;CACF;AACF,CAAC;AAED,MAAM,oBAAoB,OAAO,IAAI,KAAK,CAAC,GAAG,EAAE,eAAe,KAAK,CAAC;AAMrE,MAAa,cAAc,YACxB,EAAE,SAAS,SAAS,KAAK,SAAS,GAAG,SAAS,QAC7C,oBAAC,mBAAD;CAAmB,KAAK,IAAI,IAAI,WAAW,IAAI;EAAE;EAAS;CAAQ,CAAC,GAAG,OAAO;CAAQ;CAAK,GAAI;AAAQ,CAAA,CAE1G;AAEA,MAAa,mBAAmB,OAC9B,IAAI,KACJ,EACE,MAAM,EACJ,MAAM;CACJ,OAAO;CACP,iBAAiB;CACjB,eAAe;AACjB,EACF,EACF,GACA,EAAE,eAAe,KAAK,CACxB"}
+{"version":3,"file":"PageContent.mjs","names":[],"sources":["../../src/Layout/PageContent.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type HTMLArkProps, ark } from \"@ark-ui/react/factory\";\nimport { css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps, RecipeVariantProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\n\nconst pageRecipe = cva({\n  base: {\n    display: \"grid\",\n    transitionProperty: \"all\",\n    transitionDuration: \"default\",\n    transitionTimingFunction: \"default\",\n    alignContent: \"start\",\n    /**\n     * var(--size) is the max width of the content\n     * calc(100% - (var(--gutter, 0) * 2)) is the max width of the page, minus the gutters (inline padding without being actual padding).\n     * In effect, this will center the content on the page, and constrain it to either the content width or the page width, whichever is smaller.\n     */\n    gridColumnGap: \"var(--gutter, 0)\",\n    gridTemplateColumns: \"1fr min(var(--size), calc(100% - (var(--gutter, 0) * 2))) 1fr\",\n    \"& > *\": {\n      gridColumnStart: \"2\",\n      gridColumnEnd: \"2\",\n    },\n  },\n  defaultVariants: {\n    variant: \"page\",\n    gutters: \"always\",\n  },\n  variants: {\n    variant: {\n      content: {\n        \"--size\": \"sizes.surface.contentMax\",\n      },\n      article: {\n        \"--size\": \"sizes.surface.articleMax\",\n      },\n      page: {\n        \"--size\": \"sizes.surface.pageMax\",\n      },\n      wide: {\n        \"--size\": \"sizes.surface.wideMax\",\n      },\n    },\n    gutters: {\n      never: {\n        \"--gutter\": \"0px\",\n      },\n      mobileUp: {\n        \"--gutter\": \"0px\",\n        mobileWide: {\n          \"--gutter\": \"spacing.medium\",\n        },\n      },\n      tabletUp: {\n        \"--gutter\": \"0px\",\n        tablet: {\n          \"--gutter\": \"spacing.medium\",\n        },\n      },\n      always: {\n        \"--gutter\": \"spacing.small\",\n        tablet: {\n          \"--gutter\": \"spacing.medium\",\n        },\n      },\n    },\n  },\n});\n\nconst StyledPageContent = styled(ark.div, {}, { baseComponent: true });\n\nexport type PageContentVariantProps = NonNullable<RecipeVariantProps<typeof pageRecipe>>;\n\nexport interface PageContentProps extends HTMLArkProps<\"div\">, StyledProps, PageContentVariantProps {}\n\nexport const PageContent = forwardRef<HTMLDivElement, PageContentProps>(\n  ({ variant, gutters, css: cssProp, ...props }, ref) => (\n    <StyledPageContent css={css.raw(pageRecipe.raw({ variant, gutters }), cssProp)} ref={ref} {...props} />\n  ),\n);\n\nexport const BleedPageContent = styled(\n  ark.div,\n  {\n    base: {\n      \"& \": {\n        width: \"100%\",\n        gridColumnStart: \"1\",\n        gridColumnEnd: \"-1\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,aAAa,IAAI;CACrB,MAAM;EACJ,SAAS;EACT,oBAAoB;EACpB,oBAAoB;EACpB,0BAA0B;EAC1B,cAAc;;;;;;EAMd,eAAe;EACf,qBAAqB;EACrB,SAAS;GACP,iBAAiB;GACjB,eAAe;EACjB;CACF;CACA,iBAAiB;EACf,SAAS;EACT,SAAS;CACX;CACA,UAAU;EACR,SAAS;GACP,SAAS,EACP,UAAU,2BACZ;GACA,SAAS,EACP,UAAU,2BACZ;GACA,MAAM,EACJ,UAAU,wBACZ;GACA,MAAM,EACJ,UAAU,wBACZ;EACF;EACA,SAAS;GACP,OAAO,EACL,YAAY,MACd;GACA,UAAU;IACR,YAAY;IACZ,YAAY,EACV,YAAY,iBACd;GACF;GACA,UAAU;IACR,YAAY;IACZ,QAAQ,EACN,YAAY,iBACd;GACF;GACA,QAAQ;IACN,YAAY;IACZ,QAAQ,EACN,YAAY,iBACd;GACF;EACF;CACF;AACF,CAAC;AAED,MAAM,oBAAoB,OAAO,IAAI,KAAK,CAAC,GAAG,EAAE,eAAe,KAAK,CAAC;AAMrE,MAAa,cAAc,YACxB,EAAE,SAAS,SAAS,KAAK,SAAS,GAAG,SAAS,QAC7C,oBAAC,mBAAD;CAAmB,KAAK,IAAI,IAAI,WAAW,IAAI;EAAE;EAAS;CAAQ,CAAC,GAAG,OAAO;CAAQ;CAAK,GAAI;AAAQ,CAAA,CAE1G;AAEA,MAAa,mBAAmB,OAC9B,IAAI,KACJ,EACE,MAAM,EACJ,MAAM;CACJ,OAAO;CACP,iBAAiB;CACjB,eAAe;AACjB,EACF,EACF,GACA,EAAE,eAAe,KAAK,CACxB"}

package/es/ListItem/ListItem.mjs

@@ -1,9 +1,9 @@
 import { Image } from "../Image.mjs";
 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 { jsx } from "react/jsx-runtime";
+import { ark } from "@ark-ui/react/factory";
 import { forwardRef } from "react";
 const { withProvider, withContext } = createStyleContext(sva({
 	slots: [

package/es/ListItem/ListItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.mjs","names":[],"sources":["../../src/ListItem/ListItem.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps, RecipeVariantProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\nimport { Image, type ImageProps } from \"../Image\";\nimport { Heading, type TextProps } from \"../Text\";\n\nexport const listItemRecipe = sva({\n  slots: [\"root\", \"title\", \"content\", \"image\"],\n  base: {\n    root: {\n      minHeight: \"3xlarge\",\n      borderStyle: \"solid\",\n      borderWidth: \"1px\",\n      borderColor: \"stroke.subtle\",\n      backgroundColor: \"background.default\",\n      color: \"text.default\",\n      position: \"relative\",\n      display: \"flex\",\n      gap: \"small\",\n      alignItems: \"center\",\n      paddingBlock: \"xsmall\",\n      paddingInline: \"xxsmall\",\n      transitionProperty: \"background-color, border-color, color\",\n      transitionDuration: \"superFast\",\n      transitionTimingFunction: \"ease-in-out\",\n      boxShadow: \"xsmall\",\n    },\n    content: {\n      display: \"flex\",\n      alignItems: \"center\",\n      justifyContent: \"space-between\",\n      gap: \"xsmall\",\n      width: \"100%\",\n    },\n    image: {\n      minHeight: \"50px\",\n      maxHeight: \"50px\",\n      minWidth: \"70px\",\n      maxWidth: \"70px\",\n      objectFit: \"cover\",\n    },\n  },\n  defaultVariants: {\n    nonInteractive: false,\n  },\n  variants: {\n    nonInteractive: {\n      false: {\n        root: {\n          _highlighted: {\n            borderColor: \"stroke.hover\",\n            backgroundColor: \"surface.hover\",\n          },\n          _hover: {\n            borderColor: \"stroke.hover\",\n            backgroundColor: \"surface.hover\",\n          },\n          _active: {\n            borderColor: \"stroke.hover\",\n            backgroundColor: \"surface.active\",\n          },\n        },\n        title: {\n          textDecoration: \"underline\",\n          _hover: {\n            textDecoration: \"none\",\n          },\n        },\n      },\n    },\n  },\n});\n\nconst { withProvider, withContext } = createStyleContext(listItemRecipe);\n\nexport type ListItemVariantProps = NonNullable<RecipeVariantProps<typeof listItemRecipe>>;\n\nexport interface ListItemProps extends HTMLArkProps<\"div\">, StyledProps, ListItemVariantProps {}\n\nexport const ListItemRoot = withProvider(ark.div, \"root\", { baseComponent: true });\n\ninterface ListItemHeadingProps extends Omit<HTMLArkProps<\"p\">, \"color\">, TextProps {}\n\nconst InternalListItemHeading = forwardRef<HTMLHeadingElement, ListItemHeadingProps>(\n  ({ textStyle = \"label.medium\", fontWeight = \"bold\", ...props }, ref) => (\n    <Heading textStyle={textStyle} fontWeight={fontWeight} {...props} ref={ref} />\n  ),\n);\n\nexport const ListItemHeading = withContext(InternalListItemHeading, \"title\");\n\nexport const ListItemContent = withContext(ark.div, \"content\", { baseComponent: true });\n\nconst InternalListItemImage = withContext(Image, \"image\");\n\nexport const ListItemImage = forwardRef<HTMLImageElement, ImageProps>(({ variant = \"rounded\", ...props }, ref) => (\n  <InternalListItemImage variant={variant} {...props} ref={ref} />\n));\n"],"mappings":";;;;;;;AAmFA,MAAM,EAAE,cAAc,gBAAgB,mBAnER,IAAI;CAChC,OAAO;EAAC;EAAQ;EAAS;EAAW;CAAO;CAC3C,MAAM;EACJ,MAAM;GACJ,WAAW;GACX,aAAa;GACb,aAAa;GACb,aAAa;GACb,iBAAiB;GACjB,OAAO;GACP,UAAU;GACV,SAAS;GACT,KAAK;GACL,YAAY;GACZ,cAAc;GACd,eAAe;GACf,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,WAAW;EACb;EACA,SAAS;GACP,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,KAAK;GACL,OAAO;EACT;EACA,OAAO;GACL,WAAW;GACX,WAAW;GACX,UAAU;GACV,UAAU;GACV,WAAW;EACb;CACF;CACA,iBAAiB,EACf,gBAAgB,MAClB;CACA,UAAU,EACR,gBAAgB,EACd,OAAO;EACL,MAAM;GACJ,cAAc;IACZ,aAAa;IACb,iBAAiB;GACnB;GACA,QAAQ;IACN,aAAa;IACb,iBAAiB;GACnB;GACA,SAAS;IACP,aAAa;IACb,iBAAiB;GACnB;EACF;EACA,OAAO;GACL,gBAAgB;GAChB,QAAQ,EACN,gBAAgB,OAClB;EACF;CACF,EACF,EACF;AACF,CAEyD,CAAc;AAMvE,MAAa,eAAe,aAAa,IAAI,KAAK,QAAQ,EAAE,eAAe,KAAK,CAAC;AAUjF,MAAa,kBAAkB,YANC,YAC7B,EAAE,YAAY,gBAAgB,aAAa,QAAQ,GAAG,SAAS,QAC9D,oBAAC,SAAD;CAAoB;CAAuB;CAAY,GAAI;CAAY;AAAM,CAAA,CAItC,GAAyB,OAAO;AAE3E,MAAa,kBAAkB,YAAY,IAAI,KAAK,WAAW,EAAE,eAAe,KAAK,CAAC;AAEtF,MAAM,wBAAwB,YAAY,OAAO,OAAO;AAExD,MAAa,gBAAgB,YAA0C,EAAE,UAAU,WAAW,GAAG,SAAS,QACxG,oBAAC,uBAAD;CAAgC;CAAS,GAAI;CAAY;AAAM,CAAA,CAChE"}
+{"version":3,"file":"ListItem.mjs","names":[],"sources":["../../src/ListItem/ListItem.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type HTMLArkProps, ark } from \"@ark-ui/react/factory\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps, RecipeVariantProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\nimport { Image, type ImageProps } from \"../Image\";\nimport { Heading, type TextProps } from \"../Text\";\n\nexport const listItemRecipe = sva({\n  slots: [\"root\", \"title\", \"content\", \"image\"],\n  base: {\n    root: {\n      minHeight: \"3xlarge\",\n      borderStyle: \"solid\",\n      borderWidth: \"1px\",\n      borderColor: \"stroke.subtle\",\n      backgroundColor: \"background.default\",\n      color: \"text.default\",\n      position: \"relative\",\n      display: \"flex\",\n      gap: \"small\",\n      alignItems: \"center\",\n      paddingBlock: \"xsmall\",\n      paddingInline: \"xxsmall\",\n      transitionProperty: \"background-color, border-color, color\",\n      transitionDuration: \"superFast\",\n      transitionTimingFunction: \"ease-in-out\",\n      boxShadow: \"xsmall\",\n    },\n    content: {\n      display: \"flex\",\n      alignItems: \"center\",\n      justifyContent: \"space-between\",\n      gap: \"xsmall\",\n      width: \"100%\",\n    },\n    image: {\n      minHeight: \"50px\",\n      maxHeight: \"50px\",\n      minWidth: \"70px\",\n      maxWidth: \"70px\",\n      objectFit: \"cover\",\n    },\n  },\n  defaultVariants: {\n    nonInteractive: false,\n  },\n  variants: {\n    nonInteractive: {\n      false: {\n        root: {\n          _highlighted: {\n            borderColor: \"stroke.hover\",\n            backgroundColor: \"surface.hover\",\n          },\n          _hover: {\n            borderColor: \"stroke.hover\",\n            backgroundColor: \"surface.hover\",\n          },\n          _active: {\n            borderColor: \"stroke.hover\",\n            backgroundColor: \"surface.active\",\n          },\n        },\n        title: {\n          textDecoration: \"underline\",\n          _hover: {\n            textDecoration: \"none\",\n          },\n        },\n      },\n    },\n  },\n});\n\nconst { withProvider, withContext } = createStyleContext(listItemRecipe);\n\nexport type ListItemVariantProps = NonNullable<RecipeVariantProps<typeof listItemRecipe>>;\n\nexport interface ListItemProps extends HTMLArkProps<\"div\">, StyledProps, ListItemVariantProps {}\n\nexport const ListItemRoot = withProvider(ark.div, \"root\", { baseComponent: true });\n\ninterface ListItemHeadingProps extends Omit<HTMLArkProps<\"p\">, \"color\">, TextProps {}\n\nconst InternalListItemHeading = forwardRef<HTMLHeadingElement, ListItemHeadingProps>(\n  ({ textStyle = \"label.medium\", fontWeight = \"bold\", ...props }, ref) => (\n    <Heading textStyle={textStyle} fontWeight={fontWeight} {...props} ref={ref} />\n  ),\n);\n\nexport const ListItemHeading = withContext(InternalListItemHeading, \"title\");\n\nexport const ListItemContent = withContext(ark.div, \"content\", { baseComponent: true });\n\nconst InternalListItemImage = withContext(Image, \"image\");\n\nexport const ListItemImage = forwardRef<HTMLImageElement, ImageProps>(({ variant = \"rounded\", ...props }, ref) => (\n  <InternalListItemImage variant={variant} {...props} ref={ref} />\n));\n"],"mappings":";;;;;;;AAmFA,MAAM,EAAE,cAAc,gBAAgB,mBAnER,IAAI;CAChC,OAAO;EAAC;EAAQ;EAAS;EAAW;CAAO;CAC3C,MAAM;EACJ,MAAM;GACJ,WAAW;GACX,aAAa;GACb,aAAa;GACb,aAAa;GACb,iBAAiB;GACjB,OAAO;GACP,UAAU;GACV,SAAS;GACT,KAAK;GACL,YAAY;GACZ,cAAc;GACd,eAAe;GACf,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,WAAW;EACb;EACA,SAAS;GACP,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,KAAK;GACL,OAAO;EACT;EACA,OAAO;GACL,WAAW;GACX,WAAW;GACX,UAAU;GACV,UAAU;GACV,WAAW;EACb;CACF;CACA,iBAAiB,EACf,gBAAgB,MAClB;CACA,UAAU,EACR,gBAAgB,EACd,OAAO;EACL,MAAM;GACJ,cAAc;IACZ,aAAa;IACb,iBAAiB;GACnB;GACA,QAAQ;IACN,aAAa;IACb,iBAAiB;GACnB;GACA,SAAS;IACP,aAAa;IACb,iBAAiB;GACnB;EACF;EACA,OAAO;GACL,gBAAgB;GAChB,QAAQ,EACN,gBAAgB,OAClB;EACF;CACF,EACF,EACF;AACF,CAEyD,CAAc;AAMvE,MAAa,eAAe,aAAa,IAAI,KAAK,QAAQ,EAAE,eAAe,KAAK,CAAC;AAUjF,MAAa,kBAAkB,YANC,YAC7B,EAAE,YAAY,gBAAgB,aAAa,QAAQ,GAAG,SAAS,QAC9D,oBAAC,SAAD;CAAoB;CAAuB;CAAY,GAAI;CAAY;AAAM,CAAA,CAItC,GAAyB,OAAO;AAE3E,MAAa,kBAAkB,YAAY,IAAI,KAAK,WAAW,EAAE,eAAe,KAAK,CAAC;AAEtF,MAAM,wBAAwB,YAAY,OAAO,OAAO;AAExD,MAAa,gBAAgB,YAA0C,EAAE,UAAU,WAAW,GAAG,SAAS,QACxG,oBAAC,uBAAD;CAAgC;CAAS,GAAI;CAAY;AAAM,CAAA,CAChE"}

package/es/Menu.mjs

@@ -1,9 +1,9 @@
 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 { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
+import { Menu, menuAnatomy } from "@ark-ui/react/menu";
 //#region src/Menu.tsx
 /**
 * Copyright (c) 2024-present, NDLA.

package/es/Menu.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.mjs","names":[],"sources":["../src/Menu.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 { Menu, menuAnatomy } from \"@ark-ui/react\";\nimport { css, cva, sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { RecipeVariantProps, StyledProps, SystemStyleObject } from \"@ndla/styled-system/types\";\nimport { forwardRef, type RefAttributes } from \"react\";\nimport { Text, type TextProps } from \"./Text\";\n\nconst itemStyle: SystemStyleObject = css.raw({\n  display: \"flex\",\n  alignItems: \"center\",\n  borderRadius: \"xsmall\",\n  cursor: \"pointer\",\n  textStyle: \"label.medium\",\n  paddingBlock: \"4xsmall\",\n  paddingInline: \"xsmall\",\n  gap: \"xsmall\",\n  transitionDuration: \"fast\",\n  transitionProperty: \"background, color\",\n  transitionTimingFunction: \"default\",\n  outline: \"none\",\n  _hover: {\n    textDecoration: \"underline\",\n  },\n  _highlighted: {\n    textDecoration: \"underline\",\n  },\n  _disabled: {\n    color: \"text.disabled\",\n    cursor: \"not-allowed\",\n    \"& svg\": {\n      color: \"stroke.disabled\",\n    },\n    _hover: {\n      color: \"text.disabled\",\n      textDecoration: \"none\",\n      background: \"surface.default\",\n      \"& svg\": {\n        color: \"stroke.disabled\",\n      },\n    },\n  },\n});\n\nconst itemCva = cva({\n  defaultVariants: {\n    variant: \"action\",\n  },\n  variants: {\n    variant: {\n      action: {\n        _hover: {\n          background: \"surface.hover\",\n        },\n        _highlighted: {\n          background: \"surface.hover\",\n        },\n        _active: {\n          background: \"surface.active\",\n        },\n      },\n      destructive: {\n        color: \"text.error\",\n        \"& svg\": {\n          color: \"icon.error\",\n        },\n        _hover: {\n          color: \"text.default\",\n          \"& svg\": {\n            color: \"icon.default\",\n          },\n          background: \"surface.dangerSubtle.hover\",\n        },\n        _highlighted: {\n          color: \"text.default\",\n          \"& svg\": {\n            color: \"icon.default\",\n          },\n          background: \"surface.dangerSubtle.hover\",\n        },\n        _active: {\n          background: \"surface.dangerSubtle.active\",\n        },\n      },\n    },\n  },\n});\n\nconst menuRecipe = sva({\n  slots: menuAnatomy.keys(),\n  base: {\n    item: itemStyle,\n    triggerItem: itemStyle,\n    content: {\n      color: \"text.default\",\n      display: \"flex\",\n      flexDirection: \"column\",\n      width: \"fit-content\",\n      minWidth: \"surface.xxsmall\",\n      padding: \"3xsmall\",\n      gap: \"3xsmall\",\n      background: \"surface.default\",\n      boxShadow: \"small\",\n      borderRadius: \"xsmall\",\n      outline: \"none\",\n      zIndex: \"dropdown\",\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    itemGroup: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"3xsmall\",\n    },\n    positioner: {\n      zIndex: \"dropdown\",\n    },\n  },\n});\n\nconst { withRootProvider, withContext } = createStyleContext(menuRecipe);\n\nexport type MenuRootProps = Menu.RootProps;\n\nconst InternalMenuRoot = withRootProvider(Menu.Root);\n\nexport const MenuRoot = ({ lazyMount = true, unmountOnExit = true, ...props }: MenuRootProps) => (\n  <InternalMenuRoot lazyMount={lazyMount} unmountOnExit={unmountOnExit} {...props} />\n);\n\nexport const MenuContentStandalone = withContext(Menu.Content, \"content\", { baseComponent: true });\n\ninterface MenuContentProps extends Menu.ContentProps, StyledProps {}\n\nexport const MenuContent = forwardRef<HTMLDivElement, MenuContentProps>((props, ref) => (\n  <MenuPositioner>\n    <MenuContentStandalone ref={ref} {...props} />\n  </MenuPositioner>\n));\n\nconst InternalMenuItemGroupLabel = withContext(Menu.ItemGroupLabel, \"itemGroupLabel\");\n\ninterface MenuItemGroupLabelProps\n  extends Omit<Menu.ItemGroupLabelProps, \"color\">, StyledProps, TextProps, RefAttributes<HTMLDivElement> {}\n\nexport const MenuItemGroupLabel = ({\n  textStyle = \"label.medium\",\n  fontWeight = \"bold\",\n  children,\n  ...props\n}: MenuItemGroupLabelProps) => (\n  <InternalMenuItemGroupLabel {...props} asChild>\n    <Text textStyle={textStyle} fontWeight={fontWeight}>\n      {children}\n    </Text>\n  </InternalMenuItemGroupLabel>\n);\n\nexport const MenuItemGroup = withContext(Menu.ItemGroup, \"itemGroup\", { baseComponent: true });\n\nconst InternalMenuItem = withContext(Menu.Item, \"item\", { baseComponent: true });\n\nexport type MenuItemVariantProps = NonNullable<RecipeVariantProps<typeof itemCva>>;\nexport interface MenuItemProps\n  extends Menu.ItemProps, StyledProps, MenuItemVariantProps, RefAttributes<HTMLDivElement> {}\n\nexport const MenuItem = forwardRef<HTMLDivElement, MenuItemProps>(({ css: cssProp = {}, variant, ...props }, ref) => (\n  <InternalMenuItem\n    css={[itemCva.raw({ variant }), ...(Array.isArray(cssProp) ? cssProp : [cssProp])]}\n    {...props}\n    ref={ref}\n  />\n));\n\nexport const MenuPositioner = withContext(Menu.Positioner, \"positioner\", { baseComponent: true });\n\nconst InternalMenuTriggerItem = withContext(Menu.TriggerItem, \"triggerItem\", { baseComponent: true });\n\ninterface MenuTriggerItemProps\n  extends Menu.TriggerItemProps, StyledProps, MenuItemVariantProps, RefAttributes<HTMLButtonElement> {}\n\nexport const MenuTriggerItem = forwardRef<HTMLDivElement, MenuTriggerItemProps>(\n  ({ css: cssProp = {}, variant, ...props }, ref) => (\n    <InternalMenuTriggerItem\n      css={[itemCva.raw({ variant }), ...(Array.isArray(cssProp) ? cssProp : [cssProp])]}\n      {...props}\n      ref={ref}\n    />\n  ),\n);\n\nexport const MenuTrigger = withContext(Menu.Trigger, \"trigger\", { baseComponent: true });\n\nexport const MenuSeparator = withContext(Menu.Separator, \"separator\", { baseComponent: true });\n\nexport const MenuItemText = withContext(Menu.ItemText, \"itemText\", { baseComponent: true });\n"],"mappings":"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"}
+{"version":3,"file":"Menu.mjs","names":[],"sources":["../src/Menu.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 { Menu, menuAnatomy } from \"@ark-ui/react/menu\";\nimport { css, cva, sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { RecipeVariantProps, StyledProps, SystemStyleObject } from \"@ndla/styled-system/types\";\nimport { forwardRef, type RefAttributes } from \"react\";\nimport { Text, type TextProps } from \"./Text\";\n\nconst itemStyle: SystemStyleObject = css.raw({\n  display: \"flex\",\n  alignItems: \"center\",\n  borderRadius: \"xsmall\",\n  cursor: \"pointer\",\n  textStyle: \"label.medium\",\n  paddingBlock: \"4xsmall\",\n  paddingInline: \"xsmall\",\n  gap: \"xsmall\",\n  transitionDuration: \"fast\",\n  transitionProperty: \"background, color\",\n  transitionTimingFunction: \"default\",\n  outline: \"none\",\n  _hover: {\n    textDecoration: \"underline\",\n  },\n  _highlighted: {\n    textDecoration: \"underline\",\n  },\n  _disabled: {\n    color: \"text.disabled\",\n    cursor: \"not-allowed\",\n    \"& svg\": {\n      color: \"stroke.disabled\",\n    },\n    _hover: {\n      color: \"text.disabled\",\n      textDecoration: \"none\",\n      background: \"surface.default\",\n      \"& svg\": {\n        color: \"stroke.disabled\",\n      },\n    },\n  },\n});\n\nconst itemCva = cva({\n  defaultVariants: {\n    variant: \"action\",\n  },\n  variants: {\n    variant: {\n      action: {\n        _hover: {\n          background: \"surface.hover\",\n        },\n        _highlighted: {\n          background: \"surface.hover\",\n        },\n        _active: {\n          background: \"surface.active\",\n        },\n      },\n      destructive: {\n        color: \"text.error\",\n        \"& svg\": {\n          color: \"icon.error\",\n        },\n        _hover: {\n          color: \"text.default\",\n          \"& svg\": {\n            color: \"icon.default\",\n          },\n          background: \"surface.dangerSubtle.hover\",\n        },\n        _highlighted: {\n          color: \"text.default\",\n          \"& svg\": {\n            color: \"icon.default\",\n          },\n          background: \"surface.dangerSubtle.hover\",\n        },\n        _active: {\n          background: \"surface.dangerSubtle.active\",\n        },\n      },\n    },\n  },\n});\n\nconst menuRecipe = sva({\n  slots: menuAnatomy.keys(),\n  base: {\n    item: itemStyle,\n    triggerItem: itemStyle,\n    content: {\n      color: \"text.default\",\n      display: \"flex\",\n      flexDirection: \"column\",\n      width: \"fit-content\",\n      minWidth: \"surface.xxsmall\",\n      padding: \"3xsmall\",\n      gap: \"3xsmall\",\n      background: \"surface.default\",\n      boxShadow: \"small\",\n      borderRadius: \"xsmall\",\n      outline: \"none\",\n      zIndex: \"dropdown\",\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    itemGroup: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"3xsmall\",\n    },\n    positioner: {\n      zIndex: \"dropdown\",\n    },\n  },\n});\n\nconst { withRootProvider, withContext } = createStyleContext(menuRecipe);\n\nexport type MenuRootProps = Menu.RootProps;\n\nconst InternalMenuRoot = withRootProvider(Menu.Root);\n\nexport const MenuRoot = ({ lazyMount = true, unmountOnExit = true, ...props }: MenuRootProps) => (\n  <InternalMenuRoot lazyMount={lazyMount} unmountOnExit={unmountOnExit} {...props} />\n);\n\nexport const MenuContentStandalone = withContext(Menu.Content, \"content\", { baseComponent: true });\n\ninterface MenuContentProps extends Menu.ContentProps, StyledProps {}\n\nexport const MenuContent = forwardRef<HTMLDivElement, MenuContentProps>((props, ref) => (\n  <MenuPositioner>\n    <MenuContentStandalone ref={ref} {...props} />\n  </MenuPositioner>\n));\n\nconst InternalMenuItemGroupLabel = withContext(Menu.ItemGroupLabel, \"itemGroupLabel\");\n\ninterface MenuItemGroupLabelProps\n  extends Omit<Menu.ItemGroupLabelProps, \"color\">, StyledProps, TextProps, RefAttributes<HTMLDivElement> {}\n\nexport const MenuItemGroupLabel = ({\n  textStyle = \"label.medium\",\n  fontWeight = \"bold\",\n  children,\n  ...props\n}: MenuItemGroupLabelProps) => (\n  <InternalMenuItemGroupLabel {...props} asChild>\n    <Text textStyle={textStyle} fontWeight={fontWeight}>\n      {children}\n    </Text>\n  </InternalMenuItemGroupLabel>\n);\n\nexport const MenuItemGroup = withContext(Menu.ItemGroup, \"itemGroup\", { baseComponent: true });\n\nconst InternalMenuItem = withContext(Menu.Item, \"item\", { baseComponent: true });\n\nexport type MenuItemVariantProps = NonNullable<RecipeVariantProps<typeof itemCva>>;\nexport interface MenuItemProps\n  extends Menu.ItemProps, StyledProps, MenuItemVariantProps, RefAttributes<HTMLDivElement> {}\n\nexport const MenuItem = forwardRef<HTMLDivElement, MenuItemProps>(({ css: cssProp = {}, variant, ...props }, ref) => (\n  <InternalMenuItem\n    css={[itemCva.raw({ variant }), ...(Array.isArray(cssProp) ? cssProp : [cssProp])]}\n    {...props}\n    ref={ref}\n  />\n));\n\nexport const MenuPositioner = withContext(Menu.Positioner, \"positioner\", { baseComponent: true });\n\nconst InternalMenuTriggerItem = withContext(Menu.TriggerItem, \"triggerItem\", { baseComponent: true });\n\ninterface MenuTriggerItemProps\n  extends Menu.TriggerItemProps, StyledProps, MenuItemVariantProps, RefAttributes<HTMLButtonElement> {}\n\nexport const MenuTriggerItem = forwardRef<HTMLDivElement, MenuTriggerItemProps>(\n  ({ css: cssProp = {}, variant, ...props }, ref) => (\n    <InternalMenuTriggerItem\n      css={[itemCva.raw({ variant }), ...(Array.isArray(cssProp) ? cssProp : [cssProp])]}\n      {...props}\n      ref={ref}\n    />\n  ),\n);\n\nexport const MenuTrigger = withContext(Menu.Trigger, \"trigger\", { baseComponent: true });\n\nexport const MenuSeparator = withContext(Menu.Separator, \"separator\", { baseComponent: true });\n\nexport const MenuItemText = withContext(Menu.ItemText, \"itemText\", { baseComponent: true });\n"],"mappings":"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"}

package/es/MessageBox.mjs

@@ -1,7 +1,7 @@
-import { ark } from "@ark-ui/react";
 import { css, cva } from "@ndla/styled-system/css";
 import { styled } from "@ndla/styled-system/jsx";
 import { jsx } from "react/jsx-runtime";
+import { ark } from "@ark-ui/react/factory";
 import { forwardRef } from "react";
 //#region src/MessageBox.tsx
 /**

package/es/MessageBox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MessageBox.mjs","names":[],"sources":["../src/MessageBox.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps, RecipeVariantProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\n\nconst messageBoxRecipe = cva({\n  base: {\n    display: \"flex\",\n    alignItems: \"flex-start\",\n    gap: \"small\",\n    padding: \"medium\",\n    border: \"1px solid\",\n    borderRadius: \"xsmall\",\n  },\n  defaultVariants: {\n    variant: \"info\",\n  },\n  variants: {\n    variant: {\n      info: {\n        background: \"surface.infoSubtle\",\n        borderColor: \"stroke.subtle\",\n      },\n      warning: {\n        background: \"surface.warningSubtle\",\n        borderColor: \"stroke.warning\",\n      },\n      success: {\n        background: \"surface.successSubtle\",\n        borderColor: \"stroke.success\",\n      },\n      error: {\n        background: \"surface.errorSubtle\",\n        borderColor: \"stroke.error\",\n      },\n    },\n  },\n});\n\nexport type MessageBoxVariantProps = NonNullable<RecipeVariantProps<typeof messageBoxRecipe>>;\n\nexport interface MessageBoxProps extends HTMLArkProps<\"div\">, StyledProps, MessageBoxVariantProps {}\n\nconst StyledMessageBox = styled(ark.div, {}, { baseComponent: true });\n\nexport const MessageBox = forwardRef<HTMLDivElement, MessageBoxProps>(({ variant, css: cssProp, ...props }, ref) => (\n  <StyledMessageBox css={css.raw(messageBoxRecipe.raw({ variant }), cssProp)} {...props} ref={ref} />\n));\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,mBAAmB,IAAI;CAC3B,MAAM;EACJ,SAAS;EACT,YAAY;EACZ,KAAK;EACL,SAAS;EACT,QAAQ;EACR,cAAc;CAChB;CACA,iBAAiB,EACf,SAAS,OACX;CACA,UAAU,EACR,SAAS;EACP,MAAM;GACJ,YAAY;GACZ,aAAa;EACf;EACA,SAAS;GACP,YAAY;GACZ,aAAa;EACf;EACA,SAAS;GACP,YAAY;GACZ,aAAa;EACf;EACA,OAAO;GACL,YAAY;GACZ,aAAa;EACf;CACF,EACF;AACF,CAAC;AAMD,MAAM,mBAAmB,OAAO,IAAI,KAAK,CAAC,GAAG,EAAE,eAAe,KAAK,CAAC;AAEpE,MAAa,aAAa,YAA6C,EAAE,SAAS,KAAK,SAAS,GAAG,SAAS,QAC1G,oBAAC,kBAAD;CAAkB,KAAK,IAAI,IAAI,iBAAiB,IAAI,EAAE,QAAQ,CAAC,GAAG,OAAO;CAAG,GAAI;CAAY;AAAM,CAAA,CACnG"}
+{"version":3,"file":"MessageBox.mjs","names":[],"sources":["../src/MessageBox.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type HTMLArkProps, ark } from \"@ark-ui/react/factory\";\nimport { css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps, RecipeVariantProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\n\nconst messageBoxRecipe = cva({\n  base: {\n    display: \"flex\",\n    alignItems: \"flex-start\",\n    gap: \"small\",\n    padding: \"medium\",\n    border: \"1px solid\",\n    borderRadius: \"xsmall\",\n  },\n  defaultVariants: {\n    variant: \"info\",\n  },\n  variants: {\n    variant: {\n      info: {\n        background: \"surface.infoSubtle\",\n        borderColor: \"stroke.subtle\",\n      },\n      warning: {\n        background: \"surface.warningSubtle\",\n        borderColor: \"stroke.warning\",\n      },\n      success: {\n        background: \"surface.successSubtle\",\n        borderColor: \"stroke.success\",\n      },\n      error: {\n        background: \"surface.errorSubtle\",\n        borderColor: \"stroke.error\",\n      },\n    },\n  },\n});\n\nexport type MessageBoxVariantProps = NonNullable<RecipeVariantProps<typeof messageBoxRecipe>>;\n\nexport interface MessageBoxProps extends HTMLArkProps<\"div\">, StyledProps, MessageBoxVariantProps {}\n\nconst StyledMessageBox = styled(ark.div, {}, { baseComponent: true });\n\nexport const MessageBox = forwardRef<HTMLDivElement, MessageBoxProps>(({ variant, css: cssProp, ...props }, ref) => (\n  <StyledMessageBox css={css.raw(messageBoxRecipe.raw({ variant }), cssProp)} {...props} ref={ref} />\n));\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,mBAAmB,IAAI;CAC3B,MAAM;EACJ,SAAS;EACT,YAAY;EACZ,KAAK;EACL,SAAS;EACT,QAAQ;EACR,cAAc;CAChB;CACA,iBAAiB,EACf,SAAS,OACX;CACA,UAAU,EACR,SAAS;EACP,MAAM;GACJ,YAAY;GACZ,aAAa;EACf;EACA,SAAS;GACP,YAAY;GACZ,aAAa;EACf;EACA,SAAS;GACP,YAAY;GACZ,aAAa;EACf;EACA,OAAO;GACL,YAAY;GACZ,aAAa;EACf;CACF,EACF;AACF,CAAC;AAMD,MAAM,mBAAmB,OAAO,IAAI,KAAK,CAAC,GAAG,EAAE,eAAe,KAAK,CAAC;AAEpE,MAAa,aAAa,YAA6C,EAAE,SAAS,KAAK,SAAS,GAAG,SAAS,QAC1G,oBAAC,kBAAD;CAAkB,KAAK,IAAI,IAAI,iBAAiB,IAAI,EAAE,QAAQ,CAAC,GAAG,OAAO;CAAG,GAAI;CAAY;AAAM,CAAA,CACnG"}

package/es/Pagination.mjs

@@ -1,6 +1,6 @@
-import { Pagination, paginationAnatomy } from "@ark-ui/react";
 import { sva } from "@ndla/styled-system/css";
 import { createStyleContext } from "@ndla/styled-system/jsx";
+import { Pagination, paginationAnatomy } from "@ark-ui/react/pagination";
 //#region src/Pagination.tsx
 /**
 * Copyright (c) 2024-present, NDLA.

package/es/Pagination.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.mjs","names":[],"sources":["../src/Pagination.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 { Pagination, paginationAnatomy } from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\n\nconst paginationRecipe = sva({\n  slots: paginationAnatomy.keys(),\n  base: {\n    root: {\n      display: \"flex\",\n      gap: \"xxsmall\",\n      justifyContent: \"center\",\n    },\n    item: {\n      fontVariantNumeric: \"tabular-nums\",\n    },\n    ellipsis: {\n      display: \"inline-flex\",\n      alignItems: \"center\",\n    },\n  },\n});\n\nconst { withProvider, withContext } = createStyleContext(paginationRecipe);\n\nexport interface PaginationRootProps extends Pagination.RootProps, StyledProps {\n  translations: Pagination.RootProps[\"translations\"];\n}\n\nexport const PaginationRoot = withProvider(Pagination.Root, \"root\", { baseComponent: true });\n\nexport const PaginationItem = withContext(Pagination.Item, \"item\", { baseComponent: true });\n\nexport const PaginationEllipsis = withContext(Pagination.Ellipsis, \"ellipsis\", { baseComponent: true });\n\nexport const PaginationContext = Pagination.Context;\n\nexport const PaginationPrevTrigger = withContext(Pagination.PrevTrigger, \"prevTrigger\", { baseComponent: true });\n\nexport const PaginationNextTrigger = withContext(Pagination.NextTrigger, \"nextTrigger\", { baseComponent: true });\n"],"mappings":";;;;;;;;;;;AA+BA,MAAM,EAAE,cAAc,gBAAgB,mBAlBb,IAAI;CAC3B,OAAO,kBAAkB,KAAK;CAC9B,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,KAAK;GACL,gBAAgB;EAClB;EACA,MAAM,EACJ,oBAAoB,eACtB;EACA,UAAU;GACR,SAAS;GACT,YAAY;EACd;CACF;AACF,CAEwE,CAAC;AAMzE,MAAa,iBAAiB,aAAa,WAAW,MAAM,QAAQ,EAAE,eAAe,KAAK,CAAC;AAE3F,MAAa,iBAAiB,YAAY,WAAW,MAAM,QAAQ,EAAE,eAAe,KAAK,CAAC;AAE1F,MAAa,qBAAqB,YAAY,WAAW,UAAU,YAAY,EAAE,eAAe,KAAK,CAAC;AAEtG,MAAa,oBAAoB,WAAW;AAE5C,MAAa,wBAAwB,YAAY,WAAW,aAAa,eAAe,EAAE,eAAe,KAAK,CAAC;AAE/G,MAAa,wBAAwB,YAAY,WAAW,aAAa,eAAe,EAAE,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Pagination.mjs","names":[],"sources":["../src/Pagination.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 { Pagination, paginationAnatomy } from \"@ark-ui/react/pagination\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\n\nconst paginationRecipe = sva({\n  slots: paginationAnatomy.keys(),\n  base: {\n    root: {\n      display: \"flex\",\n      gap: \"xxsmall\",\n      justifyContent: \"center\",\n    },\n    item: {\n      fontVariantNumeric: \"tabular-nums\",\n    },\n    ellipsis: {\n      display: \"inline-flex\",\n      alignItems: \"center\",\n    },\n  },\n});\n\nconst { withProvider, withContext } = createStyleContext(paginationRecipe);\n\nexport interface PaginationRootProps extends Pagination.RootProps, StyledProps {\n  translations: Pagination.RootProps[\"translations\"];\n}\n\nexport const PaginationRoot = withProvider(Pagination.Root, \"root\", { baseComponent: true });\n\nexport const PaginationItem = withContext(Pagination.Item, \"item\", { baseComponent: true });\n\nexport const PaginationEllipsis = withContext(Pagination.Ellipsis, \"ellipsis\", { baseComponent: true });\n\nexport const PaginationContext = Pagination.Context;\n\nexport const PaginationPrevTrigger = withContext(Pagination.PrevTrigger, \"prevTrigger\", { baseComponent: true });\n\nexport const PaginationNextTrigger = withContext(Pagination.NextTrigger, \"nextTrigger\", { baseComponent: true });\n"],"mappings":";;;;;;;;;;;AA+BA,MAAM,EAAE,cAAc,gBAAgB,mBAlBb,IAAI;CAC3B,OAAO,kBAAkB,KAAK;CAC9B,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,KAAK;GACL,gBAAgB;EAClB;EACA,MAAM,EACJ,oBAAoB,eACtB;EACA,UAAU;GACR,SAAS;GACT,YAAY;EACd;CACF;AACF,CAEwE,CAAC;AAMzE,MAAa,iBAAiB,aAAa,WAAW,MAAM,QAAQ,EAAE,eAAe,KAAK,CAAC;AAE3F,MAAa,iBAAiB,YAAY,WAAW,MAAM,QAAQ,EAAE,eAAe,KAAK,CAAC;AAE1F,MAAa,qBAAqB,YAAY,WAAW,UAAU,YAAY,EAAE,eAAe,KAAK,CAAC;AAEtG,MAAa,oBAAoB,WAAW;AAE5C,MAAa,wBAAwB,YAAY,WAAW,aAAa,eAAe,EAAE,eAAe,KAAK,CAAC;AAE/G,MAAa,wBAAwB,YAAY,WAAW,aAAa,eAAe,EAAE,eAAe,KAAK,CAAC"}

package/es/Popover.mjs

@@ -1,9 +1,9 @@
 import { Heading } from "./Text.mjs";
-import { Popover, popoverAnatomy, usePopover } from "@ark-ui/react";
 import { sva } from "@ndla/styled-system/css";
 import { createStyleContext } from "@ndla/styled-system/jsx";
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
+import { Popover, popoverAnatomy, usePopover } from "@ark-ui/react/popover";
 //#region src/Popover.tsx
 /**
 * Copyright (c) 2024-present, NDLA.

package/es/Popover.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.mjs","names":["usePopover","_usePopover"],"sources":["../src/Popover.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 { Popover, popoverAnatomy, usePopover as _usePopover } from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef, type RefAttributes } from \"react\";\nimport { Heading, type TextProps } from \"./Text\";\n\nconst popoverRecipe = sva({\n  slots: popoverAnatomy.keys(),\n  base: {\n    positioner: {\n      maxHeight: \"inherit\",\n      position: \"relative\",\n    },\n    content: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      padding: \"medium\",\n      background: \"surface.default\",\n      borderRadius: \"xsmall\",\n      boxShadow: \"xlarge\",\n      zIndex: \"popover\",\n      maxWidth: \"var(--available-width)\",\n      _open: {\n        animation: \"fade-shift-in 0.2s ease-out\",\n        _motionReduce: {\n          animation: \"none\",\n        },\n      },\n      _closed: {\n        animation: \"fade-shift-out 0.2s ease-out\",\n        _motionReduce: {\n          animation: \"none\",\n        },\n      },\n    },\n    arrow: {\n      \"--arrow-size\": \"sizes.xxsmall\",\n      \"--arrow-background\": \"colors.surface.default\",\n    },\n  },\n});\n\nconst { withRootProvider, withContext } = createStyleContext(popoverRecipe);\n\nexport type PopoverRootProps = Popover.RootProps;\nconst InternalPopoverRoot = withRootProvider(Popover.Root);\n\nexport const PopoverRoot = ({ lazyMount = true, unmountOnExit = true, ...props }: PopoverRootProps) => (\n  <InternalPopoverRoot lazyMount={lazyMount} unmountOnExit={unmountOnExit} {...props} />\n);\n\nexport const PopoverAnchor = withContext(Popover.Anchor, \"anchor\", { baseComponent: true });\n\nexport const PopoverArrowStandalone = withContext(Popover.Arrow, \"arrow\", { baseComponent: true });\n\ninterface PopoverArrowProps extends Popover.ArrowTipProps, StyledProps {}\n\nexport const PopoverArrow = (props: PopoverArrowProps) => (\n  <PopoverArrowStandalone>\n    <PopoverArrowTip {...props} />\n  </PopoverArrowStandalone>\n);\n\nexport const PopoverArrowTip = withContext(Popover.ArrowTip, \"arrowTip\", { baseComponent: true });\n\nexport const PopoverCloseTrigger = withContext(Popover.CloseTrigger, \"closeTrigger\", { baseComponent: true });\n\nexport const PopoverContentStandalone = withContext(Popover.Content, \"content\", { baseComponent: true });\n\ninterface PopoverContentProps extends Popover.ContentProps, StyledProps {}\n\nexport const PopoverContent = forwardRef<HTMLDivElement, PopoverContentProps>((props, ref) => (\n  <PopoverPositioner>\n    <PopoverContentStandalone {...props} ref={ref} />\n  </PopoverPositioner>\n));\n\nexport const PopoverDescription = withContext(Popover.Description, \"description\", { baseComponent: true });\n\nexport const PopoverIndicator = withContext(Popover.Indicator, \"indicator\", { baseComponent: true });\n\nexport const PopoverPositioner = withContext(Popover.Positioner, \"positioner\", { baseComponent: true });\n\nconst InternalPopoverTitle = withContext(Popover.Title, \"title\", { baseComponent: true });\n\ninterface PopoverTitleProps\n  extends Omit<Popover.TitleProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLHeadingElement> {}\n\nexport const PopoverTitle = ({ textStyle = \"title.medium\", children, ...rest }: PopoverTitleProps) => (\n  <Heading textStyle={textStyle} {...rest} asChild consumeCss>\n    <InternalPopoverTitle>{children}</InternalPopoverTitle>\n  </Heading>\n);\n\nexport const PopoverTrigger = withContext(Popover.Trigger, \"trigger\", { baseComponent: true });\n\nexport const PopoverRootProvider = withRootProvider(Popover.RootProvider);\n\nexport const usePopover = _usePopover;\n"],"mappings":";;;;;;;;;;;;;;AAmDA,MAAM,EAAE,kBAAkB,gBAAgB,mBApCpB,IAAI;CACxB,OAAO,eAAe,KAAK;CAC3B,MAAM;EACJ,YAAY;GACV,WAAW;GACX,UAAU;EACZ;EACA,SAAS;GACP,SAAS;GACT,eAAe;GACf,SAAS;GACT,YAAY;GACZ,cAAc;GACd,WAAW;GACX,QAAQ;GACR,UAAU;GACV,OAAO;IACL,WAAW;IACX,eAAe,EACb,WAAW,OACb;GACF;GACA,SAAS;IACP,WAAW;IACX,eAAe,EACb,WAAW,OACb;GACF;EACF;EACA,OAAO;GACL,gBAAgB;GAChB,sBAAsB;EACxB;CACF;AACF,CAEyE,CAAC;AAG1E,MAAM,sBAAsB,iBAAiB,QAAQ,IAAI;AAEzD,MAAa,eAAe,EAAE,YAAY,MAAM,gBAAgB,MAAM,GAAG,YACvE,oBAAC,qBAAD;CAAgC;CAA0B;CAAe,GAAI;AAAQ,CAAA;AAGvF,MAAa,gBAAgB,YAAY,QAAQ,QAAQ,UAAU,EAAE,eAAe,KAAK,CAAC;AAE1F,MAAa,yBAAyB,YAAY,QAAQ,OAAO,SAAS,EAAE,eAAe,KAAK,CAAC;AAIjG,MAAa,gBAAgB,UAC3B,oBAAC,wBAAD,EAAA,UACE,oBAAC,iBAAD,EAAiB,GAAI,MAAQ,CAAA,EACP,CAAA;AAG1B,MAAa,kBAAkB,YAAY,QAAQ,UAAU,YAAY,EAAE,eAAe,KAAK,CAAC;AAEhG,MAAa,sBAAsB,YAAY,QAAQ,cAAc,gBAAgB,EAAE,eAAe,KAAK,CAAC;AAE5G,MAAa,2BAA2B,YAAY,QAAQ,SAAS,WAAW,EAAE,eAAe,KAAK,CAAC;AAIvG,MAAa,iBAAiB,YAAiD,OAAO,QACpF,oBAAC,mBAAD,EAAA,UACE,oBAAC,0BAAD;CAA0B,GAAI;CAAY;AAAM,CAAA,EAC/B,CAAA,CACpB;AAED,MAAa,qBAAqB,YAAY,QAAQ,aAAa,eAAe,EAAE,eAAe,KAAK,CAAC;AAEzG,MAAa,mBAAmB,YAAY,QAAQ,WAAW,aAAa,EAAE,eAAe,KAAK,CAAC;AAEnG,MAAa,oBAAoB,YAAY,QAAQ,YAAY,cAAc,EAAE,eAAe,KAAK,CAAC;AAEtG,MAAM,uBAAuB,YAAY,QAAQ,OAAO,SAAS,EAAE,eAAe,KAAK,CAAC;AAKxF,MAAa,gBAAgB,EAAE,YAAY,gBAAgB,UAAU,GAAG,WACtE,oBAAC,SAAD;CAAoB;CAAW,GAAI;CAAM,SAAA;CAAQ,YAAA;WAC/C,oBAAC,sBAAD,EAAuB,SAA+B,CAAA;AAC/C,CAAA;AAGX,MAAa,iBAAiB,YAAY,QAAQ,SAAS,WAAW,EAAE,eAAe,KAAK,CAAC;AAE7F,MAAa,sBAAsB,iBAAiB,QAAQ,YAAY;AAExE,MAAaA,eAAaC"}
+{"version":3,"file":"Popover.mjs","names":["usePopover","_usePopover"],"sources":["../src/Popover.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 { Popover, popoverAnatomy, usePopover as _usePopover } from \"@ark-ui/react/popover\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef, type RefAttributes } from \"react\";\nimport { Heading, type TextProps } from \"./Text\";\n\nconst popoverRecipe = sva({\n  slots: popoverAnatomy.keys(),\n  base: {\n    positioner: {\n      maxHeight: \"inherit\",\n      position: \"relative\",\n    },\n    content: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      padding: \"medium\",\n      background: \"surface.default\",\n      borderRadius: \"xsmall\",\n      boxShadow: \"xlarge\",\n      zIndex: \"popover\",\n      maxWidth: \"var(--available-width)\",\n      _open: {\n        animation: \"fade-shift-in 0.2s ease-out\",\n        _motionReduce: {\n          animation: \"none\",\n        },\n      },\n      _closed: {\n        animation: \"fade-shift-out 0.2s ease-out\",\n        _motionReduce: {\n          animation: \"none\",\n        },\n      },\n    },\n    arrow: {\n      \"--arrow-size\": \"sizes.xxsmall\",\n      \"--arrow-background\": \"colors.surface.default\",\n    },\n  },\n});\n\nconst { withRootProvider, withContext } = createStyleContext(popoverRecipe);\n\nexport type PopoverRootProps = Popover.RootProps;\nconst InternalPopoverRoot = withRootProvider(Popover.Root);\n\nexport const PopoverRoot = ({ lazyMount = true, unmountOnExit = true, ...props }: PopoverRootProps) => (\n  <InternalPopoverRoot lazyMount={lazyMount} unmountOnExit={unmountOnExit} {...props} />\n);\n\nexport const PopoverAnchor = withContext(Popover.Anchor, \"anchor\", { baseComponent: true });\n\nexport const PopoverArrowStandalone = withContext(Popover.Arrow, \"arrow\", { baseComponent: true });\n\ninterface PopoverArrowProps extends Popover.ArrowTipProps, StyledProps {}\n\nexport const PopoverArrow = (props: PopoverArrowProps) => (\n  <PopoverArrowStandalone>\n    <PopoverArrowTip {...props} />\n  </PopoverArrowStandalone>\n);\n\nexport const PopoverArrowTip = withContext(Popover.ArrowTip, \"arrowTip\", { baseComponent: true });\n\nexport const PopoverCloseTrigger = withContext(Popover.CloseTrigger, \"closeTrigger\", { baseComponent: true });\n\nexport const PopoverContentStandalone = withContext(Popover.Content, \"content\", { baseComponent: true });\n\ninterface PopoverContentProps extends Popover.ContentProps, StyledProps {}\n\nexport const PopoverContent = forwardRef<HTMLDivElement, PopoverContentProps>((props, ref) => (\n  <PopoverPositioner>\n    <PopoverContentStandalone {...props} ref={ref} />\n  </PopoverPositioner>\n));\n\nexport const PopoverDescription = withContext(Popover.Description, \"description\", { baseComponent: true });\n\nexport const PopoverIndicator = withContext(Popover.Indicator, \"indicator\", { baseComponent: true });\n\nexport const PopoverPositioner = withContext(Popover.Positioner, \"positioner\", { baseComponent: true });\n\nconst InternalPopoverTitle = withContext(Popover.Title, \"title\", { baseComponent: true });\n\ninterface PopoverTitleProps\n  extends Omit<Popover.TitleProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLHeadingElement> {}\n\nexport const PopoverTitle = ({ textStyle = \"title.medium\", children, ...rest }: PopoverTitleProps) => (\n  <Heading textStyle={textStyle} {...rest} asChild consumeCss>\n    <InternalPopoverTitle>{children}</InternalPopoverTitle>\n  </Heading>\n);\n\nexport const PopoverTrigger = withContext(Popover.Trigger, \"trigger\", { baseComponent: true });\n\nexport const PopoverRootProvider = withRootProvider(Popover.RootProvider);\n\nexport const usePopover = _usePopover;\n"],"mappings":";;;;;;;;;;;;;;AAmDA,MAAM,EAAE,kBAAkB,gBAAgB,mBApCpB,IAAI;CACxB,OAAO,eAAe,KAAK;CAC3B,MAAM;EACJ,YAAY;GACV,WAAW;GACX,UAAU;EACZ;EACA,SAAS;GACP,SAAS;GACT,eAAe;GACf,SAAS;GACT,YAAY;GACZ,cAAc;GACd,WAAW;GACX,QAAQ;GACR,UAAU;GACV,OAAO;IACL,WAAW;IACX,eAAe,EACb,WAAW,OACb;GACF;GACA,SAAS;IACP,WAAW;IACX,eAAe,EACb,WAAW,OACb;GACF;EACF;EACA,OAAO;GACL,gBAAgB;GAChB,sBAAsB;EACxB;CACF;AACF,CAEyE,CAAC;AAG1E,MAAM,sBAAsB,iBAAiB,QAAQ,IAAI;AAEzD,MAAa,eAAe,EAAE,YAAY,MAAM,gBAAgB,MAAM,GAAG,YACvE,oBAAC,qBAAD;CAAgC;CAA0B;CAAe,GAAI;AAAQ,CAAA;AAGvF,MAAa,gBAAgB,YAAY,QAAQ,QAAQ,UAAU,EAAE,eAAe,KAAK,CAAC;AAE1F,MAAa,yBAAyB,YAAY,QAAQ,OAAO,SAAS,EAAE,eAAe,KAAK,CAAC;AAIjG,MAAa,gBAAgB,UAC3B,oBAAC,wBAAD,EAAA,UACE,oBAAC,iBAAD,EAAiB,GAAI,MAAQ,CAAA,EACP,CAAA;AAG1B,MAAa,kBAAkB,YAAY,QAAQ,UAAU,YAAY,EAAE,eAAe,KAAK,CAAC;AAEhG,MAAa,sBAAsB,YAAY,QAAQ,cAAc,gBAAgB,EAAE,eAAe,KAAK,CAAC;AAE5G,MAAa,2BAA2B,YAAY,QAAQ,SAAS,WAAW,EAAE,eAAe,KAAK,CAAC;AAIvG,MAAa,iBAAiB,YAAiD,OAAO,QACpF,oBAAC,mBAAD,EAAA,UACE,oBAAC,0BAAD;CAA0B,GAAI;CAAY;AAAM,CAAA,EAC/B,CAAA,CACpB;AAED,MAAa,qBAAqB,YAAY,QAAQ,aAAa,eAAe,EAAE,eAAe,KAAK,CAAC;AAEzG,MAAa,mBAAmB,YAAY,QAAQ,WAAW,aAAa,EAAE,eAAe,KAAK,CAAC;AAEnG,MAAa,oBAAoB,YAAY,QAAQ,YAAY,cAAc,EAAE,eAAe,KAAK,CAAC;AAEtG,MAAM,uBAAuB,YAAY,QAAQ,OAAO,SAAS,EAAE,eAAe,KAAK,CAAC;AAKxF,MAAa,gBAAgB,EAAE,YAAY,gBAAgB,UAAU,GAAG,WACtE,oBAAC,SAAD;CAAoB;CAAW,GAAI;CAAM,SAAA;CAAQ,YAAA;WAC/C,oBAAC,sBAAD,EAAuB,SAA+B,CAAA;AAC/C,CAAA;AAGX,MAAa,iBAAiB,YAAY,QAAQ,SAAS,WAAW,EAAE,eAAe,KAAK,CAAC;AAE7F,MAAa,sBAAsB,iBAAiB,QAAQ,YAAY;AAExE,MAAaA,eAAaC"}

package/es/RadioGroup.mjs

@@ -1,9 +1,10 @@
 import { Text } from "./Text.mjs";
-import { RadioGroup, ark, radioGroupAnatomy } from "@ark-ui/react";
 import { sva } from "@ndla/styled-system/css";
 import { createStyleContext, styled } from "@ndla/styled-system/jsx";
 import { jsx } from "react/jsx-runtime";
+import { ark } from "@ark-ui/react/factory";
 import { forwardRef } from "react";
+import { RadioGroup, radioGroupAnatomy } from "@ark-ui/react/radio-group";
 //#region src/RadioGroup.tsx
 /**
 * Copyright (c) 2024-present, NDLA.

package/es/RadioGroup.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.mjs","names":[],"sources":["../src/RadioGroup.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 { ark, RadioGroup, radioGroupAnatomy } from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext, styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef, type RefAttributes } from \"react\";\nimport { Text, type TextProps } from \"./Text\";\n\nconst radioGroupRecipe = sva({\n  slots: radioGroupAnatomy.keys(),\n  base: {\n    root: {\n      display: \"flex\",\n      flexWrap: \"wrap\",\n      position: \"relative\",\n      gap: \"small\",\n      _vertical: {\n        flexDirection: \"column\",\n      },\n      _horizontal: {\n        flexDirection: \"row\",\n      },\n    },\n    itemControl: {\n      flexShrink: \"0\",\n      background: \"surface.default\",\n      borderColor: \"stroke.subtle\",\n      borderRadius: \"full\",\n      borderWidth: \"2px\",\n      width: \"medium\",\n      height: \"medium\",\n      outlineStyle: \"solid\",\n      outlineWidth: \"4px\",\n      outlineOffset: \"-6px\",\n      outlineColor: \"surface.default\",\n      transitionDuration: \"normal\",\n      transitionProperty: \"background, border-color, box-shadow\",\n      transitionTimingFunction: \"default\",\n      _hover: {\n        boxShadow: \"0 0 0 4px var(--shadow-color)\",\n        boxShadowColor: \"surface.actionSubtle.hover.strong\",\n      },\n      _checked: {\n        background: \"stroke.default\",\n        borderColor: \"stroke.default\",\n      },\n      _disabled: {\n        borderColor: \"stroke.disabled\",\n        _hover: {\n          borderColor: \"stroke.disabled\",\n          boxShadow: \"none\",\n        },\n      },\n      _motionReduce: {\n        transition: \"none\",\n        transitionDuration: \"0s\",\n      },\n    },\n    item: {\n      display: \"flex\",\n      alignItems: \"center\",\n      cursor: \"pointer\",\n      gap: \"xsmall\",\n      _disabled: {\n        cursor: \"not-allowed\",\n      },\n      \"&:has(input:focus-visible)\": {\n        outline: \"2px solid\",\n        outlineOffset: \"4xsmall\",\n        outlineColor: \"stroke.default\",\n        borderRadius: \"xsmall\",\n      },\n    },\n    itemText: {\n      _hover: {\n        color: \"text.action\",\n      },\n      _disabled: {\n        color: \"text.disabled\",\n        _hover: {\n          color: \"text.disabled\",\n        },\n      },\n    },\n  },\n});\n\nconst { withProvider, withContext } = createStyleContext(radioGroupRecipe);\n\nexport interface RadioGroupRootProps extends RadioGroup.RootProps, StyledProps {}\n\nexport const RadioGroupRoot = withProvider(RadioGroup.Root, \"root\", {\n  baseComponent: true,\n});\n\nexport const RadioGroupIndicator = withContext(RadioGroup.Indicator, \"indicator\", { baseComponent: true });\n\nexport const RadioGroupItemControl = withContext(RadioGroup.ItemControl, \"itemControl\", { baseComponent: true });\n\nexport const RadioGroupItem = withContext(RadioGroup.Item, \"item\", { baseComponent: true });\n\nconst InternalRadioGroupItemText = withContext(RadioGroup.ItemText, \"itemText\");\n\nconst InnerRadioGroupItemText = styled(ark.span, {}, { baseComponent: true });\n\ninterface RadioGroupItemTextProps\n  extends Omit<RadioGroup.ItemTextProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLParagraphElement> {}\n\nexport const RadioGroupItemText = ({\n  textStyle = \"label.medium\",\n  children,\n  asChild,\n  consumeCss,\n  ...props\n}: RadioGroupItemTextProps) => (\n  <InternalRadioGroupItemText asChild>\n    <Text asChild consumeCss textStyle={textStyle} {...props}>\n      <InnerRadioGroupItemText asChild={asChild} consumeCss={consumeCss}>\n        {children}\n      </InnerRadioGroupItemText>\n    </Text>\n  </InternalRadioGroupItemText>\n);\n\nexport const InternalRadioGroupLabel = withContext(RadioGroup.Label, \"label\");\n\nconst InnerRadioGroupLabel = styled(ark.div, {}, { baseComponent: true });\n\ninterface RadioGroupLabelProps\n  extends Omit<RadioGroup.LabelProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLLabelElement> {}\n\nexport const RadioGroupLabel = forwardRef<HTMLLabelElement, RadioGroupLabelProps>(\n  ({ textStyle = \"label.large\", fontWeight = \"bold\", children, asChild, consumeCss, ...props }, ref) => (\n    <InternalRadioGroupLabel {...props} asChild ref={ref}>\n      <Text textStyle={textStyle} fontWeight={fontWeight} asChild>\n        <InnerRadioGroupLabel asChild={asChild} consumeCss={consumeCss}>\n          {children}\n        </InnerRadioGroupLabel>\n      </Text>\n    </InternalRadioGroupLabel>\n  ),\n);\n\nexport const RadioGroupItemHiddenInput = RadioGroup.ItemHiddenInput;\n"],"mappings":";;;;;;;;;;;;;;AA8FA,MAAM,EAAE,cAAc,gBAAgB,mBA/Eb,IAAI;CAC3B,OAAO,kBAAkB,KAAK;CAC9B,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,UAAU;GACV,UAAU;GACV,KAAK;GACL,WAAW,EACT,eAAe,SACjB;GACA,aAAa,EACX,eAAe,MACjB;EACF;EACA,aAAa;GACX,YAAY;GACZ,YAAY;GACZ,aAAa;GACb,cAAc;GACd,aAAa;GACb,OAAO;GACP,QAAQ;GACR,cAAc;GACd,cAAc;GACd,eAAe;GACf,cAAc;GACd,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,QAAQ;IACN,WAAW;IACX,gBAAgB;GAClB;GACA,UAAU;IACR,YAAY;IACZ,aAAa;GACf;GACA,WAAW;IACT,aAAa;IACb,QAAQ;KACN,aAAa;KACb,WAAW;IACb;GACF;GACA,eAAe;IACb,YAAY;IACZ,oBAAoB;GACtB;EACF;EACA,MAAM;GACJ,SAAS;GACT,YAAY;GACZ,QAAQ;GACR,KAAK;GACL,WAAW,EACT,QAAQ,cACV;GACA,8BAA8B;IAC5B,SAAS;IACT,eAAe;IACf,cAAc;IACd,cAAc;GAChB;EACF;EACA,UAAU;GACR,QAAQ,EACN,OAAO,cACT;GACA,WAAW;IACT,OAAO;IACP,QAAQ,EACN,OAAO,gBACT;GACF;EACF;CACF;AACF,CAEwE,CAAC;AAIzE,MAAa,iBAAiB,aAAa,WAAW,MAAM,QAAQ,EAClE,eAAe,KACjB,CAAC;AAED,MAAa,sBAAsB,YAAY,WAAW,WAAW,aAAa,EAAE,eAAe,KAAK,CAAC;AAEzG,MAAa,wBAAwB,YAAY,WAAW,aAAa,eAAe,EAAE,eAAe,KAAK,CAAC;AAE/G,MAAa,iBAAiB,YAAY,WAAW,MAAM,QAAQ,EAAE,eAAe,KAAK,CAAC;AAE1F,MAAM,6BAA6B,YAAY,WAAW,UAAU,UAAU;AAE9E,MAAM,0BAA0B,OAAO,IAAI,MAAM,CAAC,GAAG,EAAE,eAAe,KAAK,CAAC;AAK5E,MAAa,sBAAsB,EACjC,YAAY,gBACZ,UACA,SACA,YACA,GAAG,YAEH,oBAAC,4BAAD;CAA4B,SAAA;WAC1B,oBAAC,MAAD;EAAM,SAAA;EAAQ,YAAA;EAAsB;EAAW,GAAI;YACjD,oBAAC,yBAAD;GAAkC;GAAqB;GACpD;EACsB,CAAA;CACrB,CAAA;AACoB,CAAA;AAG9B,MAAa,0BAA0B,YAAY,WAAW,OAAO,OAAO;AAE5E,MAAM,uBAAuB,OAAO,IAAI,KAAK,CAAC,GAAG,EAAE,eAAe,KAAK,CAAC;AAKxE,MAAa,kBAAkB,YAC5B,EAAE,YAAY,eAAe,aAAa,QAAQ,UAAU,SAAS,YAAY,GAAG,SAAS,QAC5F,oBAAC,yBAAD;CAAyB,GAAI;CAAO,SAAA;CAAa;WAC/C,oBAAC,MAAD;EAAiB;EAAuB;EAAY,SAAA;YAClD,oBAAC,sBAAD;GAA+B;GAAqB;GACjD;EACmB,CAAA;CAClB,CAAA;AACiB,CAAA,CAE7B;AAEA,MAAa,4BAA4B,WAAW"}
+{"version":3,"file":"RadioGroup.mjs","names":[],"sources":["../src/RadioGroup.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 { ark } from \"@ark-ui/react/factory\";\nimport { RadioGroup, radioGroupAnatomy } from \"@ark-ui/react/radio-group\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext, styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef, type RefAttributes } from \"react\";\nimport { Text, type TextProps } from \"./Text\";\n\nconst radioGroupRecipe = sva({\n  slots: radioGroupAnatomy.keys(),\n  base: {\n    root: {\n      display: \"flex\",\n      flexWrap: \"wrap\",\n      position: \"relative\",\n      gap: \"small\",\n      _vertical: {\n        flexDirection: \"column\",\n      },\n      _horizontal: {\n        flexDirection: \"row\",\n      },\n    },\n    itemControl: {\n      flexShrink: \"0\",\n      background: \"surface.default\",\n      borderColor: \"stroke.subtle\",\n      borderRadius: \"full\",\n      borderWidth: \"2px\",\n      width: \"medium\",\n      height: \"medium\",\n      outlineStyle: \"solid\",\n      outlineWidth: \"4px\",\n      outlineOffset: \"-6px\",\n      outlineColor: \"surface.default\",\n      transitionDuration: \"normal\",\n      transitionProperty: \"background, border-color, box-shadow\",\n      transitionTimingFunction: \"default\",\n      _hover: {\n        boxShadow: \"0 0 0 4px var(--shadow-color)\",\n        boxShadowColor: \"surface.actionSubtle.hover.strong\",\n      },\n      _checked: {\n        background: \"stroke.default\",\n        borderColor: \"stroke.default\",\n      },\n      _disabled: {\n        borderColor: \"stroke.disabled\",\n        _hover: {\n          borderColor: \"stroke.disabled\",\n          boxShadow: \"none\",\n        },\n      },\n      _motionReduce: {\n        transition: \"none\",\n        transitionDuration: \"0s\",\n      },\n    },\n    item: {\n      display: \"flex\",\n      alignItems: \"center\",\n      cursor: \"pointer\",\n      gap: \"xsmall\",\n      _disabled: {\n        cursor: \"not-allowed\",\n      },\n      \"&:has(input:focus-visible)\": {\n        outline: \"2px solid\",\n        outlineOffset: \"4xsmall\",\n        outlineColor: \"stroke.default\",\n        borderRadius: \"xsmall\",\n      },\n    },\n    itemText: {\n      _hover: {\n        color: \"text.action\",\n      },\n      _disabled: {\n        color: \"text.disabled\",\n        _hover: {\n          color: \"text.disabled\",\n        },\n      },\n    },\n  },\n});\n\nconst { withProvider, withContext } = createStyleContext(radioGroupRecipe);\n\nexport interface RadioGroupRootProps extends RadioGroup.RootProps, StyledProps {}\n\nexport const RadioGroupRoot = withProvider(RadioGroup.Root, \"root\", {\n  baseComponent: true,\n});\n\nexport const RadioGroupIndicator = withContext(RadioGroup.Indicator, \"indicator\", { baseComponent: true });\n\nexport const RadioGroupItemControl = withContext(RadioGroup.ItemControl, \"itemControl\", { baseComponent: true });\n\nexport const RadioGroupItem = withContext(RadioGroup.Item, \"item\", { baseComponent: true });\n\nconst InternalRadioGroupItemText = withContext(RadioGroup.ItemText, \"itemText\");\n\nconst InnerRadioGroupItemText = styled(ark.span, {}, { baseComponent: true });\n\ninterface RadioGroupItemTextProps\n  extends Omit<RadioGroup.ItemTextProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLParagraphElement> {}\n\nexport const RadioGroupItemText = ({\n  textStyle = \"label.medium\",\n  children,\n  asChild,\n  consumeCss,\n  ...props\n}: RadioGroupItemTextProps) => (\n  <InternalRadioGroupItemText asChild>\n    <Text asChild consumeCss textStyle={textStyle} {...props}>\n      <InnerRadioGroupItemText asChild={asChild} consumeCss={consumeCss}>\n        {children}\n      </InnerRadioGroupItemText>\n    </Text>\n  </InternalRadioGroupItemText>\n);\n\nexport const InternalRadioGroupLabel = withContext(RadioGroup.Label, \"label\");\n\nconst InnerRadioGroupLabel = styled(ark.div, {}, { baseComponent: true });\n\ninterface RadioGroupLabelProps\n  extends Omit<RadioGroup.LabelProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLLabelElement> {}\n\nexport const RadioGroupLabel = forwardRef<HTMLLabelElement, RadioGroupLabelProps>(\n  ({ textStyle = \"label.large\", fontWeight = \"bold\", children, asChild, consumeCss, ...props }, ref) => (\n    <InternalRadioGroupLabel {...props} asChild ref={ref}>\n      <Text textStyle={textStyle} fontWeight={fontWeight} asChild>\n        <InnerRadioGroupLabel asChild={asChild} consumeCss={consumeCss}>\n          {children}\n        </InnerRadioGroupLabel>\n      </Text>\n    </InternalRadioGroupLabel>\n  ),\n);\n\nexport const RadioGroupItemHiddenInput = RadioGroup.ItemHiddenInput;\n"],"mappings":";;;;;;;;;;;;;;;AA+FA,MAAM,EAAE,cAAc,gBAAgB,mBA/Eb,IAAI;CAC3B,OAAO,kBAAkB,KAAK;CAC9B,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,UAAU;GACV,UAAU;GACV,KAAK;GACL,WAAW,EACT,eAAe,SACjB;GACA,aAAa,EACX,eAAe,MACjB;EACF;EACA,aAAa;GACX,YAAY;GACZ,YAAY;GACZ,aAAa;GACb,cAAc;GACd,aAAa;GACb,OAAO;GACP,QAAQ;GACR,cAAc;GACd,cAAc;GACd,eAAe;GACf,cAAc;GACd,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,QAAQ;IACN,WAAW;IACX,gBAAgB;GAClB;GACA,UAAU;IACR,YAAY;IACZ,aAAa;GACf;GACA,WAAW;IACT,aAAa;IACb,QAAQ;KACN,aAAa;KACb,WAAW;IACb;GACF;GACA,eAAe;IACb,YAAY;IACZ,oBAAoB;GACtB;EACF;EACA,MAAM;GACJ,SAAS;GACT,YAAY;GACZ,QAAQ;GACR,KAAK;GACL,WAAW,EACT,QAAQ,cACV;GACA,8BAA8B;IAC5B,SAAS;IACT,eAAe;IACf,cAAc;IACd,cAAc;GAChB;EACF;EACA,UAAU;GACR,QAAQ,EACN,OAAO,cACT;GACA,WAAW;IACT,OAAO;IACP,QAAQ,EACN,OAAO,gBACT;GACF;EACF;CACF;AACF,CAEwE,CAAC;AAIzE,MAAa,iBAAiB,aAAa,WAAW,MAAM,QAAQ,EAClE,eAAe,KACjB,CAAC;AAED,MAAa,sBAAsB,YAAY,WAAW,WAAW,aAAa,EAAE,eAAe,KAAK,CAAC;AAEzG,MAAa,wBAAwB,YAAY,WAAW,aAAa,eAAe,EAAE,eAAe,KAAK,CAAC;AAE/G,MAAa,iBAAiB,YAAY,WAAW,MAAM,QAAQ,EAAE,eAAe,KAAK,CAAC;AAE1F,MAAM,6BAA6B,YAAY,WAAW,UAAU,UAAU;AAE9E,MAAM,0BAA0B,OAAO,IAAI,MAAM,CAAC,GAAG,EAAE,eAAe,KAAK,CAAC;AAK5E,MAAa,sBAAsB,EACjC,YAAY,gBACZ,UACA,SACA,YACA,GAAG,YAEH,oBAAC,4BAAD;CAA4B,SAAA;WAC1B,oBAAC,MAAD;EAAM,SAAA;EAAQ,YAAA;EAAsB;EAAW,GAAI;YACjD,oBAAC,yBAAD;GAAkC;GAAqB;GACpD;EACsB,CAAA;CACrB,CAAA;AACoB,CAAA;AAG9B,MAAa,0BAA0B,YAAY,WAAW,OAAO,OAAO;AAE5E,MAAM,uBAAuB,OAAO,IAAI,KAAK,CAAC,GAAG,EAAE,eAAe,KAAK,CAAC;AAKxE,MAAa,kBAAkB,YAC5B,EAAE,YAAY,eAAe,aAAa,QAAQ,UAAU,SAAS,YAAY,GAAG,SAAS,QAC5F,oBAAC,yBAAD;CAAyB,GAAI;CAAO,SAAA;CAAa;WAC/C,oBAAC,MAAD;EAAiB;EAAuB;EAAY,SAAA;YAClD,oBAAC,sBAAD;GAA+B;GAAqB;GACjD;EACmB,CAAA;CAClB,CAAA;AACiB,CAAA,CAE7B;AAEA,MAAa,4BAA4B,WAAW"}

package/es/RainbowSpinner.mjs

@@ -0,0 +1,66 @@
+import { css, cva } from "@ndla/styled-system/css";
+import { styled } from "@ndla/styled-system/jsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+//#region src/RainbowSpinner.tsx
+const rainbowRecipe = cva({
+	base: {
+		"--line-width": "token(sizes.4xsmall)",
+		"--line-spacing": "token(sizes.xxsmall)",
+		position: "relative",
+		width: "3xlarge",
+		height: "3xlarge",
+		"& > :nth-child(1)": { "--i": "0" },
+		"& > :nth-child(2)": { "--i": "1" },
+		"& > :nth-child(3)": { "--i": "2" },
+		"& > :nth-child(4)": { "--i": "3" },
+		"& > :nth-child(5)": { "--i": "4" }
+	},
+	variants: { variant: {
+		page: {
+			paddingBlockStart: "4xlarge",
+			display: "flex",
+			justifyContent: "center",
+			alignItems: "center"
+		},
+		default: {}
+	} },
+	defaultVariants: { variant: "default" }
+});
+const BaseLine = styled("div", { base: {
+	position: "absolute",
+	animation: "rainbow-spin",
+	transformOrigin: "50% 100%",
+	width: "calc(100% - (var(--i) * (var(--line-spacing) + var(--line-width))))",
+	height: "calc(50% - (var(--i) * (var(--line-spacing) + var(--line-width)) / 2))",
+	top: "calc(var(--i) * (var(--line-spacing) + var(--line-width)) / 2)",
+	insetInline: "calc(var(--i) * (var(--line-spacing) + var(--line-width)) / 2)",
+	animationDelay: "calc(var(--i) * -50ms)",
+	borderRadius: "50% 50% 0 0 / 100% 100% 0 0",
+	borderWidth: "var(--line-width)",
+	borderBottom: "0"
+} });
+const Line1 = styled(BaseLine, { base: { borderColor: "surface.brand.5" } });
+const Line2 = styled(BaseLine, { base: { borderColor: "surface.brand.4" } });
+const Line3 = styled(BaseLine, { base: { borderColor: "surface.brand.3" } });
+const Line4 = styled(BaseLine, { base: { borderColor: "surface.brand.2" } });
+const Line5 = styled(BaseLine, { base: { borderColor: "surface.brand.1" } });
+const RainbowRoot = styled("div", {}, { baseComponent: true });
+const RainbowSpinner = forwardRef(({ css: cssProp, variant, ...props }, ref) => {
+	return /* @__PURE__ */ jsxs(RainbowRoot, {
+		css: css.raw(rainbowRecipe.raw({ variant }), cssProp),
+		...props,
+		ref,
+		children: [
+			/* @__PURE__ */ jsx(Line1, {}),
+			/* @__PURE__ */ jsx(Line2, {}),
+			/* @__PURE__ */ jsx(Line3, {}),
+			/* @__PURE__ */ jsx(Line4, {}),
+			/* @__PURE__ */ jsx(Line5, {})
+		]
+	});
+});
+//#endregion
+export { RainbowSpinner };
+
+//# sourceMappingURL=RainbowSpinner.mjs.map

package/es/RainbowSpinner.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RainbowSpinner.mjs","names":[],"sources":["../src/RainbowSpinner.tsx"],"sourcesContent":["/**\n * Copyright (c) 2026-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 { HTMLProps } from \"@ark-ui/react/factory\";\nimport { css, cva, type RecipeVariantProps } from \"@ndla/styled-system/css\";\nimport { styled, type StyledProps } from \"@ndla/styled-system/jsx\";\nimport { forwardRef } from \"react\";\n\nconst rainbowRecipe = cva({\n  base: {\n    \"--line-width\": \"token(sizes.4xsmall)\",\n    \"--line-spacing\": \"token(sizes.xxsmall)\",\n    position: \"relative\",\n    width: \"3xlarge\",\n    height: \"3xlarge\",\n    \"& > :nth-child(1)\": { \"--i\": \"0\" },\n    \"& > :nth-child(2)\": { \"--i\": \"1\" },\n    \"& > :nth-child(3)\": { \"--i\": \"2\" },\n    \"& > :nth-child(4)\": { \"--i\": \"3\" },\n    \"& > :nth-child(5)\": { \"--i\": \"4\" },\n  },\n  variants: {\n    variant: {\n      page: {\n        paddingBlockStart: \"4xlarge\",\n        display: \"flex\",\n        justifyContent: \"center\",\n        alignItems: \"center\",\n      },\n      default: {},\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n});\n\nconst BaseLine = styled(\"div\", {\n  base: {\n    position: \"absolute\",\n    animation: \"rainbow-spin\",\n    transformOrigin: \"50% 100%\",\n    width: \"calc(100% - (var(--i) * (var(--line-spacing) + var(--line-width))))\",\n    height: \"calc(50% - (var(--i) * (var(--line-spacing) + var(--line-width)) / 2))\",\n    top: \"calc(var(--i) * (var(--line-spacing) + var(--line-width)) / 2)\",\n    insetInline: \"calc(var(--i) * (var(--line-spacing) + var(--line-width)) / 2)\",\n    animationDelay: \"calc(var(--i) * -50ms)\",\n    borderRadius: \"50% 50% 0 0 / 100% 100% 0 0\",\n    borderWidth: \"var(--line-width)\",\n    borderBottom: \"0\",\n  },\n});\n\nconst Line1 = styled(BaseLine, {\n  base: {\n    borderColor: \"surface.brand.5\",\n  },\n});\n\nconst Line2 = styled(BaseLine, {\n  base: {\n    borderColor: \"surface.brand.4\",\n  },\n});\n\nconst Line3 = styled(BaseLine, {\n  base: {\n    borderColor: \"surface.brand.3\",\n  },\n});\n\nconst Line4 = styled(BaseLine, {\n  base: {\n    borderColor: \"surface.brand.2\",\n  },\n});\n\nconst Line5 = styled(BaseLine, {\n  base: {\n    borderColor: \"surface.brand.1\",\n  },\n});\n\nconst RainbowRoot = styled(\"div\", {}, { baseComponent: true });\n\nexport type RainbowSpinnerVariantProps = NonNullable<RecipeVariantProps<typeof rainbowRecipe>>;\n\ninterface Props extends HTMLProps<\"div\">, StyledProps, RainbowSpinnerVariantProps {}\n\nexport const RainbowSpinner = forwardRef<HTMLDivElement, Props>(({ css: cssProp, variant, ...props }, ref) => {\n  return (\n    <RainbowRoot css={css.raw(rainbowRecipe.raw({ variant }), cssProp)} {...props} ref={ref}>\n      <Line1 />\n      <Line2 />\n      <Line3 />\n      <Line4 />\n      <Line5 />\n    </RainbowRoot>\n  );\n});\n"],"mappings":";;;;;AAaA,MAAM,gBAAgB,IAAI;CACxB,MAAM;EACJ,gBAAgB;EAChB,kBAAkB;EAClB,UAAU;EACV,OAAO;EACP,QAAQ;EACR,qBAAqB,EAAE,OAAO,IAAI;EAClC,qBAAqB,EAAE,OAAO,IAAI;EAClC,qBAAqB,EAAE,OAAO,IAAI;EAClC,qBAAqB,EAAE,OAAO,IAAI;EAClC,qBAAqB,EAAE,OAAO,IAAI;CACpC;CACA,UAAU,EACR,SAAS;EACP,MAAM;GACJ,mBAAmB;GACnB,SAAS;GACT,gBAAgB;GAChB,YAAY;EACd;EACA,SAAS,CAAC;CACZ,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CAAC;AAED,MAAM,WAAW,OAAO,OAAO,EAC7B,MAAM;CACJ,UAAU;CACV,WAAW;CACX,iBAAiB;CACjB,OAAO;CACP,QAAQ;CACR,KAAK;CACL,aAAa;CACb,gBAAgB;CAChB,cAAc;CACd,aAAa;CACb,cAAc;AAChB,EACF,CAAC;AAED,MAAM,QAAQ,OAAO,UAAU,EAC7B,MAAM,EACJ,aAAa,kBACf,EACF,CAAC;AAED,MAAM,QAAQ,OAAO,UAAU,EAC7B,MAAM,EACJ,aAAa,kBACf,EACF,CAAC;AAED,MAAM,QAAQ,OAAO,UAAU,EAC7B,MAAM,EACJ,aAAa,kBACf,EACF,CAAC;AAED,MAAM,QAAQ,OAAO,UAAU,EAC7B,MAAM,EACJ,aAAa,kBACf,EACF,CAAC;AAED,MAAM,QAAQ,OAAO,UAAU,EAC7B,MAAM,EACJ,aAAa,kBACf,EACF,CAAC;AAED,MAAM,cAAc,OAAO,OAAO,CAAC,GAAG,EAAE,eAAe,KAAK,CAAC;AAM7D,MAAa,iBAAiB,YAAmC,EAAE,KAAK,SAAS,SAAS,GAAG,SAAS,QAAQ;CAC5G,OACE,qBAAC,aAAD;EAAa,KAAK,IAAI,IAAI,cAAc,IAAI,EAAE,QAAQ,CAAC,GAAG,OAAO;EAAG,GAAI;EAAY;YAApF;GACE,oBAAC,OAAD,CAAQ,CAAA;GACR,oBAAC,OAAD,CAAQ,CAAA;GACR,oBAAC,OAAD,CAAQ,CAAA;GACR,oBAAC,OAAD,CAAQ,CAAA;GACR,oBAAC,OAAD,CAAQ,CAAA;EACG;;AAEjB,CAAC"}

package/es/Select.mjs

@@ -1,9 +1,9 @@
 import { Label } from "./Label.mjs";
-import { Select, selectAnatomy } from "@ark-ui/react";
 import { sva } from "@ndla/styled-system/css";
 import { createStyleContext } from "@ndla/styled-system/jsx";
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
+import { Select, selectAnatomy } from "@ark-ui/react/select";
 //#region src/Select.tsx
 /**
 * Copyright (c) 2024-present, NDLA.

package/es/Select.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Select.mjs","names":[],"sources":["../src/Select.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 { Select, selectAnatomy } from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef, type ElementType, type RefAttributes } from \"react\";\nimport { Label } from \"./Label\";\nimport { type TextProps } from \"./Text\";\n\nconst selectRecipe = sva({\n  slots: selectAnatomy.keys(),\n  base: {\n    root: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"3xsmall\",\n    },\n    control: {\n      display: \"flex\",\n      gap: \"4xsmall\",\n      alignItems: \"center\",\n    },\n    content: {\n      display: \"flex\",\n      gap: \"4xsmall\",\n      flexDirection: \"column\",\n      zIndex: \"dropdown\",\n      background: \"surface.default\",\n      borderRadius: \"xsmall\",\n      boxShadow: \"large\",\n      padding: \"xsmall\",\n      overflowY: \"auto\",\n      maxHeight: \"min(token(spacing.surface.xsmall), 45vh)\",\n      _focusVisible: {\n        outlineOffset: \"-1\",\n      },\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      alignItems: \"center\",\n      justifyContent: \"space-between\",\n      padding: \"xsmall\",\n      background: \"surface.default\",\n      borderRadius: \"xsmall\",\n      cursor: \"pointer\",\n      transitionDuration: \"fast\",\n      transitionProperty: \"background, color\",\n      transitionTimingFunction: \"default\",\n      _hover: {\n        background: \"surface.hover\",\n      },\n      _selected: {\n        background: \"surface.selected\",\n        _hover: {\n          background: \"surface.hover\",\n        },\n        _highlighted: {\n          background: \"surface.hover\",\n        },\n      },\n      _highlighted: {\n        background: \"surface.hover\",\n        _hover: {\n          background: \"surface.hover\",\n        },\n      },\n      _disabled: {\n        cursor: \"not-allowed\",\n        color: \"text.disabled\",\n        background: \"surface.disabled\",\n        _highlighted: {\n          color: \"text.disabled\",\n          background: \"surface.disabled\",\n        },\n        _selected: {\n          color: \"text.disabled\",\n          background: \"surface.disabled\",\n        },\n        _hover: {\n          color: \"text.disabled\",\n          background: \"surface.disabled\",\n        },\n      },\n    },\n    indicator: {\n      color: \"icon.default\",\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    itemIndicator: {\n      color: \"stroke.default\",\n    },\n    itemText: {\n      _checked: {\n        textDecoration: \"underline\",\n      },\n      _highlighted: {\n        textDecoration: \"underline\",\n      },\n    },\n    trigger: {\n      justifyContent: \"space-between\",\n      width: \"surface.small\",\n      _ariaInvalid: {\n        boxShadowColor: \"stroke.error\",\n      },\n    },\n    itemGroup: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"4xsmall\",\n    },\n    valueText: {\n      textAlign: \"start\",\n    },\n  },\n});\n\nconst { withProvider, withContext } = createStyleContext(selectRecipe);\n\nexport interface SelectRootProps<T extends Select.CollectionItem>\n  extends Select.RootProps<T>, StyledProps, RefAttributes<HTMLDivElement> {}\nconst InternalSelectRoot = withProvider<ElementType<SelectRootProps<Select.CollectionItem>>>(Select.Root, \"root\", {\n  baseComponent: true,\n});\n\nexport const SelectRoot = <T extends Select.CollectionItem>({\n  lazyMount = true,\n  unmountOnExit = true,\n  ...props\n}: SelectRootProps<T>) => <InternalSelectRoot lazyMount={lazyMount} unmountOnExit={unmountOnExit} {...props} />;\n\nexport const SelectClearTrigger = withContext(Select.ClearTrigger, \"clearTrigger\", { baseComponent: true });\n\nexport const SelectContentStandalone = withContext(Select.Content, \"content\", { baseComponent: true });\n\ninterface SelectContentProps extends Select.ContentProps, StyledProps {}\n\nexport const SelectContent = forwardRef<HTMLDivElement, SelectContentProps>((props, ref) => (\n  <SelectPositioner>\n    <SelectContentStandalone ref={ref} {...props} />\n  </SelectPositioner>\n));\n\nexport const SelectControl = withContext(Select.Control, \"control\", { baseComponent: true });\n\nexport const SelectIndicator = withContext(Select.Indicator, \"indicator\", { baseComponent: true });\n\ninterface SelectItemGroupLabelProps\n  extends Omit<Select.ItemGroupLabelProps, \"color\">, StyledProps, TextProps, RefAttributes<HTMLDivElement> {}\n\nexport const SelectItemGroupLabel = forwardRef<HTMLDivElement, SelectItemGroupLabelProps>(\n  ({ children, ...props }, ref) => (\n    <InternalSelectItemGroupLabel asChild ref={ref} {...props}>\n      <Label asChild consumeCss>\n        <div>{children}</div>\n      </Label>\n    </InternalSelectItemGroupLabel>\n  ),\n);\n\nconst InternalSelectItemGroupLabel = withContext(Select.ItemGroupLabel, \"itemGroupLabel\");\n\nexport const SelectItemGroup = withContext(Select.ItemGroup, \"itemGroup\", { baseComponent: true });\n\nexport const SelectItemIndicator = withContext(Select.ItemIndicator, \"itemIndicator\", { baseComponent: true });\n\nexport const SelectItem = withContext(Select.Item, \"item\", {\n  baseComponent: true,\n});\n\nexport const SelectItemText = withContext(Select.ItemText, \"itemText\", { baseComponent: true });\n\nconst InternalSelectLabel = withContext(Select.Label, \"label\");\n\ninterface SelectLabelProps\n  extends Omit<Select.LabelProps, \"color\">, StyledProps, TextProps, RefAttributes<HTMLLabelElement> {}\n\nexport const SelectLabel = forwardRef<HTMLLabelElement, SelectLabelProps>(({ children, ...props }, ref) => (\n  <InternalSelectLabel asChild ref={ref} {...props}>\n    <Label>{children}</Label>\n  </InternalSelectLabel>\n));\n\nexport const SelectPositioner = withContext(Select.Positioner, \"positioner\", { baseComponent: true });\n\nexport const SelectTrigger = withContext(Select.Trigger, \"trigger\", { baseComponent: true });\n\nexport const SelectValueText = withContext(Select.ValueText, \"valueText\", { baseComponent: true });\n\nexport const SelectList = withContext(Select.List, \"list\", {\n  baseComponent: true,\n});\n\nexport const SelectHiddenSelect = Select.HiddenSelect;\n"],"mappings":"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"}
+{"version":3,"file":"Select.mjs","names":[],"sources":["../src/Select.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 { Select, selectAnatomy } from \"@ark-ui/react/select\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef, type ElementType, type RefAttributes } from \"react\";\nimport { Label } from \"./Label\";\nimport { type TextProps } from \"./Text\";\n\nconst selectRecipe = sva({\n  slots: selectAnatomy.keys(),\n  base: {\n    root: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"3xsmall\",\n    },\n    control: {\n      display: \"flex\",\n      gap: \"4xsmall\",\n      alignItems: \"center\",\n    },\n    content: {\n      display: \"flex\",\n      gap: \"4xsmall\",\n      flexDirection: \"column\",\n      zIndex: \"dropdown\",\n      background: \"surface.default\",\n      borderRadius: \"xsmall\",\n      boxShadow: \"large\",\n      padding: \"xsmall\",\n      overflowY: \"auto\",\n      maxHeight: \"min(token(spacing.surface.xsmall), 45vh)\",\n      _focusVisible: {\n        outlineOffset: \"-1\",\n      },\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      alignItems: \"center\",\n      justifyContent: \"space-between\",\n      padding: \"xsmall\",\n      background: \"surface.default\",\n      borderRadius: \"xsmall\",\n      cursor: \"pointer\",\n      transitionDuration: \"fast\",\n      transitionProperty: \"background, color\",\n      transitionTimingFunction: \"default\",\n      _hover: {\n        background: \"surface.hover\",\n      },\n      _selected: {\n        background: \"surface.selected\",\n        _hover: {\n          background: \"surface.hover\",\n        },\n        _highlighted: {\n          background: \"surface.hover\",\n        },\n      },\n      _highlighted: {\n        background: \"surface.hover\",\n        _hover: {\n          background: \"surface.hover\",\n        },\n      },\n      _disabled: {\n        cursor: \"not-allowed\",\n        color: \"text.disabled\",\n        background: \"surface.disabled\",\n        _highlighted: {\n          color: \"text.disabled\",\n          background: \"surface.disabled\",\n        },\n        _selected: {\n          color: \"text.disabled\",\n          background: \"surface.disabled\",\n        },\n        _hover: {\n          color: \"text.disabled\",\n          background: \"surface.disabled\",\n        },\n      },\n    },\n    indicator: {\n      color: \"icon.default\",\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    itemIndicator: {\n      color: \"stroke.default\",\n    },\n    itemText: {\n      _checked: {\n        textDecoration: \"underline\",\n      },\n      _highlighted: {\n        textDecoration: \"underline\",\n      },\n    },\n    trigger: {\n      justifyContent: \"space-between\",\n      width: \"surface.small\",\n      _ariaInvalid: {\n        boxShadowColor: \"stroke.error\",\n      },\n    },\n    itemGroup: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"4xsmall\",\n    },\n    valueText: {\n      textAlign: \"start\",\n    },\n  },\n});\n\nconst { withProvider, withContext } = createStyleContext(selectRecipe);\n\nexport interface SelectRootProps<T extends Select.CollectionItem>\n  extends Select.RootProps<T>, StyledProps, RefAttributes<HTMLDivElement> {}\nconst InternalSelectRoot = withProvider<ElementType<SelectRootProps<Select.CollectionItem>>>(Select.Root, \"root\", {\n  baseComponent: true,\n});\n\nexport const SelectRoot = <T extends Select.CollectionItem>({\n  lazyMount = true,\n  unmountOnExit = true,\n  ...props\n}: SelectRootProps<T>) => <InternalSelectRoot lazyMount={lazyMount} unmountOnExit={unmountOnExit} {...props} />;\n\nexport const SelectClearTrigger = withContext(Select.ClearTrigger, \"clearTrigger\", { baseComponent: true });\n\nexport const SelectContentStandalone = withContext(Select.Content, \"content\", { baseComponent: true });\n\ninterface SelectContentProps extends Select.ContentProps, StyledProps {}\n\nexport const SelectContent = forwardRef<HTMLDivElement, SelectContentProps>((props, ref) => (\n  <SelectPositioner>\n    <SelectContentStandalone ref={ref} {...props} />\n  </SelectPositioner>\n));\n\nexport const SelectControl = withContext(Select.Control, \"control\", { baseComponent: true });\n\nexport const SelectIndicator = withContext(Select.Indicator, \"indicator\", { baseComponent: true });\n\ninterface SelectItemGroupLabelProps\n  extends Omit<Select.ItemGroupLabelProps, \"color\">, StyledProps, TextProps, RefAttributes<HTMLDivElement> {}\n\nexport const SelectItemGroupLabel = forwardRef<HTMLDivElement, SelectItemGroupLabelProps>(\n  ({ children, ...props }, ref) => (\n    <InternalSelectItemGroupLabel asChild ref={ref} {...props}>\n      <Label asChild consumeCss>\n        <div>{children}</div>\n      </Label>\n    </InternalSelectItemGroupLabel>\n  ),\n);\n\nconst InternalSelectItemGroupLabel = withContext(Select.ItemGroupLabel, \"itemGroupLabel\");\n\nexport const SelectItemGroup = withContext(Select.ItemGroup, \"itemGroup\", { baseComponent: true });\n\nexport const SelectItemIndicator = withContext(Select.ItemIndicator, \"itemIndicator\", { baseComponent: true });\n\nexport const SelectItem = withContext(Select.Item, \"item\", {\n  baseComponent: true,\n});\n\nexport const SelectItemText = withContext(Select.ItemText, \"itemText\", { baseComponent: true });\n\nconst InternalSelectLabel = withContext(Select.Label, \"label\");\n\ninterface SelectLabelProps\n  extends Omit<Select.LabelProps, \"color\">, StyledProps, TextProps, RefAttributes<HTMLLabelElement> {}\n\nexport const SelectLabel = forwardRef<HTMLLabelElement, SelectLabelProps>(({ children, ...props }, ref) => (\n  <InternalSelectLabel asChild ref={ref} {...props}>\n    <Label>{children}</Label>\n  </InternalSelectLabel>\n));\n\nexport const SelectPositioner = withContext(Select.Positioner, \"positioner\", { baseComponent: true });\n\nexport const SelectTrigger = withContext(Select.Trigger, \"trigger\", { baseComponent: true });\n\nexport const SelectValueText = withContext(Select.ValueText, \"valueText\", { baseComponent: true });\n\nexport const SelectList = withContext(Select.List, \"list\", {\n  baseComponent: true,\n});\n\nexport const SelectHiddenSelect = Select.HiddenSelect;\n"],"mappings":"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"}

package/es/Skeleton.mjs

@@ -1,5 +1,5 @@
-import { ark } from "@ark-ui/react";
 import { styled } from "@ndla/styled-system/jsx";
+import { ark } from "@ark-ui/react/factory";
 //#region src/Skeleton.tsx
 /**
 * Copyright (c) 2024-present, NDLA.

package/es/Skeleton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.mjs","names":[],"sources":["../src/Skeleton.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\n\nexport const Skeleton = styled(\n  ark.div,\n  {\n    base: {\n      animation: \"skeleton-pulse\",\n      backgroundColor: \"surface.disabled\",\n      backgroundClip: \"padding-box\",\n      borderRadius: \"xsmall\",\n      color: \"transparent\",\n      cursor: \"default\",\n      pointerEvents: \"none\",\n      userSelect: \"none\",\n      \"&::before, &::after, *\": {\n        visibility: \"hidden\",\n      },\n      _motionReduce: {\n        animation: \"none\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n\nexport interface SkeletonProps extends HTMLArkProps<\"div\">, StyledProps {}\n"],"mappings":";;;;;;;;;;AAYA,MAAa,WAAW,OACtB,IAAI,KACJ,EACE,MAAM;CACJ,WAAW;CACX,iBAAiB;CACjB,gBAAgB;CAChB,cAAc;CACd,OAAO;CACP,QAAQ;CACR,eAAe;CACf,YAAY;CACZ,0BAA0B,EACxB,YAAY,SACd;CACA,eAAe,EACb,WAAW,OACb;AACF,EACF,GACA,EAAE,eAAe,KAAK,CACxB"}
+{"version":3,"file":"Skeleton.mjs","names":[],"sources":["../src/Skeleton.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type HTMLArkProps, ark } from \"@ark-ui/react/factory\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\n\nexport const Skeleton = styled(\n  ark.div,\n  {\n    base: {\n      animation: \"skeleton-pulse\",\n      backgroundColor: \"surface.disabled\",\n      backgroundClip: \"padding-box\",\n      borderRadius: \"xsmall\",\n      color: \"transparent\",\n      cursor: \"default\",\n      pointerEvents: \"none\",\n      userSelect: \"none\",\n      \"&::before, &::after, *\": {\n        visibility: \"hidden\",\n      },\n      _motionReduce: {\n        animation: \"none\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n\nexport interface SkeletonProps extends HTMLArkProps<\"div\">, StyledProps {}\n"],"mappings":";;;;;;;;;;AAYA,MAAa,WAAW,OACtB,IAAI,KACJ,EACE,MAAM;CACJ,WAAW;CACX,iBAAiB;CACjB,gBAAgB;CAChB,cAAc;CACd,OAAO;CACP,QAAQ;CACR,eAAe;CACf,YAAY;CACZ,0BAA0B,EACxB,YAAY,SACd;CACA,eAAe,EACb,WAAW,OACb;AACF,EACF,GACA,EAAE,eAAe,KAAK,CACxB"}

package/es/Slider.mjs

@@ -1,8 +1,8 @@
 import { Label } from "./Label.mjs";
-import { Slider, sliderAnatomy } from "@ark-ui/react";
 import { sva } from "@ndla/styled-system/css";
 import { createStyleContext } from "@ndla/styled-system/jsx";
 import { jsx } from "react/jsx-runtime";
+import { Slider, sliderAnatomy } from "@ark-ui/react/slider";
 //#region src/Slider.tsx
 /**
 * Copyright (c) 2024-present, NDLA.

package/es/Slider.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.mjs","names":[],"sources":["../src/Slider.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 { Slider, sliderAnatomy } from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport type { RefAttributes } from \"react\";\nimport { Label } from \"./Label\";\nimport { type TextProps } from \"./Text\";\n\nconst sliderRecipe = sva({\n  slots: sliderAnatomy.keys(),\n  base: {\n    root: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"4xsmall\",\n      width: \"100%\",\n    },\n    control: {\n      position: \"relative\",\n      cursor: \"pointer\",\n      display: \"flex\",\n      _vertical: {\n        flexDirection: \"column\",\n      },\n      alignItems: \"center\",\n      height: \"medium\",\n    },\n    track: {\n      background: \"surface.disabled\",\n      overflow: \"hidden\",\n      flex: \"1\",\n      _vertical: {\n        width: \"4xsmall\",\n      },\n      _horizontal: {\n        height: \"4xsmall\",\n      },\n    },\n    range: {\n      background: \"surface.action\",\n      _vertical: {\n        width: \"4xsmall\",\n      },\n      _horizontal: {\n        height: \"4xsmall\",\n      },\n    },\n    thumb: {\n      background: \"surface.action\",\n      borderRadius: \"full\",\n      outline: \"none\",\n      zIndex: \"1\",\n      height: \"medium\",\n      width: \"medium\",\n      transitionDuration: \"fast\",\n      transitionTimingFunction: \"default\",\n      transitionProperty: \"background\",\n      _hover: {\n        background: \"surface.action.hover\",\n      },\n      _active: {\n        background: \"surface.action.active\",\n      },\n      _focusVisible: {\n        border: \"2px solid\",\n        borderColor: \"background.default\",\n        outline: \"3px solid\",\n        outlineColor: \"surface.action\",\n        outlineOffset: \"0px\",\n      },\n      _motionReduce: {\n        transition: \"none\",\n        transitionDuration: \"0s\",\n      },\n    },\n  },\n});\n\nconst { withProvider, withContext } = createStyleContext(sliderRecipe);\n\nexport interface SliderRootProps extends Slider.RootProps, StyledProps {}\n\nexport const SliderRoot = withProvider(Slider.Root, \"root\", { baseComponent: true });\n\nexport const SliderControl = withContext(Slider.Control, \"control\", { baseComponent: true });\n\nexport const SliderTrack = withContext(Slider.Track, \"track\", { baseComponent: true });\n\nexport const SliderRange = withContext(Slider.Range, \"range\", { baseComponent: true });\n\nexport const SliderThumb = withContext(Slider.Thumb, \"thumb\", { baseComponent: true });\n\nconst InternalSliderLabel = withContext(Slider.Label, \"label\");\n\ninterface SliderLabelProps\n  extends Omit<Slider.LabelProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLLabelElement> {}\n\nexport const SliderLabel = ({ textStyle = \"label.medium\", ...props }: SliderLabelProps) => (\n  <InternalSliderLabel asChild>\n    <Label textStyle={textStyle} {...props} />\n  </InternalSliderLabel>\n);\n\nexport const SliderHiddenInput = Slider.HiddenInput;\n"],"mappings":";;;;;;;;;;;;;AAsFA,MAAM,EAAE,cAAc,gBAAgB,mBAtEjB,IAAI;CACvB,OAAO,cAAc,KAAK;CAC1B,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,KAAK;GACL,OAAO;EACT;EACA,SAAS;GACP,UAAU;GACV,QAAQ;GACR,SAAS;GACT,WAAW,EACT,eAAe,SACjB;GACA,YAAY;GACZ,QAAQ;EACV;EACA,OAAO;GACL,YAAY;GACZ,UAAU;GACV,MAAM;GACN,WAAW,EACT,OAAO,UACT;GACA,aAAa,EACX,QAAQ,UACV;EACF;EACA,OAAO;GACL,YAAY;GACZ,WAAW,EACT,OAAO,UACT;GACA,aAAa,EACX,QAAQ,UACV;EACF;EACA,OAAO;GACL,YAAY;GACZ,cAAc;GACd,SAAS;GACT,QAAQ;GACR,QAAQ;GACR,OAAO;GACP,oBAAoB;GACpB,0BAA0B;GAC1B,oBAAoB;GACpB,QAAQ,EACN,YAAY,uBACd;GACA,SAAS,EACP,YAAY,wBACd;GACA,eAAe;IACb,QAAQ;IACR,aAAa;IACb,SAAS;IACT,cAAc;IACd,eAAe;GACjB;GACA,eAAe;IACb,YAAY;IACZ,oBAAoB;GACtB;EACF;CACF;AACF,CAEoE,CAAC;AAIrE,MAAa,aAAa,aAAa,OAAO,MAAM,QAAQ,EAAE,eAAe,KAAK,CAAC;AAEnF,MAAa,gBAAgB,YAAY,OAAO,SAAS,WAAW,EAAE,eAAe,KAAK,CAAC;AAE3F,MAAa,cAAc,YAAY,OAAO,OAAO,SAAS,EAAE,eAAe,KAAK,CAAC;AAErF,MAAa,cAAc,YAAY,OAAO,OAAO,SAAS,EAAE,eAAe,KAAK,CAAC;AAErF,MAAa,cAAc,YAAY,OAAO,OAAO,SAAS,EAAE,eAAe,KAAK,CAAC;AAErF,MAAM,sBAAsB,YAAY,OAAO,OAAO,OAAO;AAK7D,MAAa,eAAe,EAAE,YAAY,gBAAgB,GAAG,YAC3D,oBAAC,qBAAD;CAAqB,SAAA;WACnB,oBAAC,OAAD;EAAkB;EAAW,GAAI;CAAQ,CAAA;AACtB,CAAA;AAGvB,MAAa,oBAAoB,OAAO"}
+{"version":3,"file":"Slider.mjs","names":[],"sources":["../src/Slider.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 { Slider, sliderAnatomy } from \"@ark-ui/react/slider\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport type { RefAttributes } from \"react\";\nimport { Label } from \"./Label\";\nimport { type TextProps } from \"./Text\";\n\nconst sliderRecipe = sva({\n  slots: sliderAnatomy.keys(),\n  base: {\n    root: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"4xsmall\",\n      width: \"100%\",\n    },\n    control: {\n      position: \"relative\",\n      cursor: \"pointer\",\n      display: \"flex\",\n      _vertical: {\n        flexDirection: \"column\",\n      },\n      alignItems: \"center\",\n      height: \"medium\",\n    },\n    track: {\n      background: \"surface.disabled\",\n      overflow: \"hidden\",\n      flex: \"1\",\n      _vertical: {\n        width: \"4xsmall\",\n      },\n      _horizontal: {\n        height: \"4xsmall\",\n      },\n    },\n    range: {\n      background: \"surface.action\",\n      _vertical: {\n        width: \"4xsmall\",\n      },\n      _horizontal: {\n        height: \"4xsmall\",\n      },\n    },\n    thumb: {\n      background: \"surface.action\",\n      borderRadius: \"full\",\n      outline: \"none\",\n      zIndex: \"1\",\n      height: \"medium\",\n      width: \"medium\",\n      transitionDuration: \"fast\",\n      transitionTimingFunction: \"default\",\n      transitionProperty: \"background\",\n      _hover: {\n        background: \"surface.action.hover\",\n      },\n      _active: {\n        background: \"surface.action.active\",\n      },\n      _focusVisible: {\n        border: \"2px solid\",\n        borderColor: \"background.default\",\n        outline: \"3px solid\",\n        outlineColor: \"surface.action\",\n        outlineOffset: \"0px\",\n      },\n      _motionReduce: {\n        transition: \"none\",\n        transitionDuration: \"0s\",\n      },\n    },\n  },\n});\n\nconst { withProvider, withContext } = createStyleContext(sliderRecipe);\n\nexport interface SliderRootProps extends Slider.RootProps, StyledProps {}\n\nexport const SliderRoot = withProvider(Slider.Root, \"root\", { baseComponent: true });\n\nexport const SliderControl = withContext(Slider.Control, \"control\", { baseComponent: true });\n\nexport const SliderTrack = withContext(Slider.Track, \"track\", { baseComponent: true });\n\nexport const SliderRange = withContext(Slider.Range, \"range\", { baseComponent: true });\n\nexport const SliderThumb = withContext(Slider.Thumb, \"thumb\", { baseComponent: true });\n\nconst InternalSliderLabel = withContext(Slider.Label, \"label\");\n\ninterface SliderLabelProps\n  extends Omit<Slider.LabelProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLLabelElement> {}\n\nexport const SliderLabel = ({ textStyle = \"label.medium\", ...props }: SliderLabelProps) => (\n  <InternalSliderLabel asChild>\n    <Label textStyle={textStyle} {...props} />\n  </InternalSliderLabel>\n);\n\nexport const SliderHiddenInput = Slider.HiddenInput;\n"],"mappings":";;;;;;;;;;;;;AAsFA,MAAM,EAAE,cAAc,gBAAgB,mBAtEjB,IAAI;CACvB,OAAO,cAAc,KAAK;CAC1B,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,KAAK;GACL,OAAO;EACT;EACA,SAAS;GACP,UAAU;GACV,QAAQ;GACR,SAAS;GACT,WAAW,EACT,eAAe,SACjB;GACA,YAAY;GACZ,QAAQ;EACV;EACA,OAAO;GACL,YAAY;GACZ,UAAU;GACV,MAAM;GACN,WAAW,EACT,OAAO,UACT;GACA,aAAa,EACX,QAAQ,UACV;EACF;EACA,OAAO;GACL,YAAY;GACZ,WAAW,EACT,OAAO,UACT;GACA,aAAa,EACX,QAAQ,UACV;EACF;EACA,OAAO;GACL,YAAY;GACZ,cAAc;GACd,SAAS;GACT,QAAQ;GACR,QAAQ;GACR,OAAO;GACP,oBAAoB;GACpB,0BAA0B;GAC1B,oBAAoB;GACpB,QAAQ,EACN,YAAY,uBACd;GACA,SAAS,EACP,YAAY,wBACd;GACA,eAAe;IACb,QAAQ;IACR,aAAa;IACb,SAAS;IACT,cAAc;IACd,eAAe;GACjB;GACA,eAAe;IACb,YAAY;IACZ,oBAAoB;GACtB;EACF;CACF;AACF,CAEoE,CAAC;AAIrE,MAAa,aAAa,aAAa,OAAO,MAAM,QAAQ,EAAE,eAAe,KAAK,CAAC;AAEnF,MAAa,gBAAgB,YAAY,OAAO,SAAS,WAAW,EAAE,eAAe,KAAK,CAAC;AAE3F,MAAa,cAAc,YAAY,OAAO,OAAO,SAAS,EAAE,eAAe,KAAK,CAAC;AAErF,MAAa,cAAc,YAAY,OAAO,OAAO,SAAS,EAAE,eAAe,KAAK,CAAC;AAErF,MAAa,cAAc,YAAY,OAAO,OAAO,SAAS,EAAE,eAAe,KAAK,CAAC;AAErF,MAAM,sBAAsB,YAAY,OAAO,OAAO,OAAO;AAK7D,MAAa,eAAe,EAAE,YAAY,gBAAgB,GAAG,YAC3D,oBAAC,qBAAD;CAAqB,SAAA;WACnB,oBAAC,OAAD;EAAkB;EAAW,GAAI;CAAQ,CAAA;AACtB,CAAA;AAGvB,MAAa,oBAAoB,OAAO"}

package/es/Spinner.mjs

@@ -1,7 +1,7 @@
-import { ark } from "@ark-ui/react";
 import { css, cva } from "@ndla/styled-system/css";
 import { styled } from "@ndla/styled-system/jsx";
 import { jsx } from "react/jsx-runtime";
+import { ark } from "@ark-ui/react/factory";
 import { forwardRef } from "react";
 //#region src/Spinner.tsx
 /**

package/es/Spinner.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.mjs","names":[],"sources":["../src/Spinner.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { type RecipeVariantProps, css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\n\nexport const spinnerRecipe = cva({\n  base: {\n    borderRadius: \"full\",\n    animation: \"spin\",\n    display: \"block\",\n    marginInline: \"auto\",\n    borderStyle: \"solid\",\n    borderBlockColor: \"background.subtle\",\n    borderInlineStartColor: \"background.subtle\",\n    borderInlineEndColor: \"stroke.default\",\n    _motionReduce: {\n      animationDuration: \"2s\",\n    },\n  },\n  defaultVariants: {\n    size: \"large\",\n  },\n  variants: {\n    size: {\n      small: {\n        borderWidth: \"4px\",\n        height: \"small\",\n        width: \"small\",\n      },\n      medium: {\n        borderWidth: \"4px\",\n        height: \"large\",\n        width: \"large\",\n      },\n      large: {\n        borderWidth: \"8px\",\n        height: \"xxlarge\",\n        width: \"xxlarge\",\n      },\n    },\n  },\n});\n\nexport type SpinnerVariantProps = NonNullable<RecipeVariantProps<typeof spinnerRecipe>>;\n\nexport interface SpinnerProps extends HTMLArkProps<\"div\">, StyledProps, SpinnerVariantProps {}\n\nconst StyledSpinner = styled(ark.div, {}, { baseComponent: true });\n\nexport const Spinner = forwardRef<HTMLDivElement, SpinnerProps>(({ size, css: cssProp, ...props }, ref) => (\n  <StyledSpinner css={css.raw(spinnerRecipe.raw({ size }), cssProp)} {...props} ref={ref} />\n));\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAa,gBAAgB,IAAI;CAC/B,MAAM;EACJ,cAAc;EACd,WAAW;EACX,SAAS;EACT,cAAc;EACd,aAAa;EACb,kBAAkB;EAClB,wBAAwB;EACxB,sBAAsB;EACtB,eAAe,EACb,mBAAmB,KACrB;CACF;CACA,iBAAiB,EACf,MAAM,QACR;CACA,UAAU,EACR,MAAM;EACJ,OAAO;GACL,aAAa;GACb,QAAQ;GACR,OAAO;EACT;EACA,QAAQ;GACN,aAAa;GACb,QAAQ;GACR,OAAO;EACT;EACA,OAAO;GACL,aAAa;GACb,QAAQ;GACR,OAAO;EACT;CACF,EACF;AACF,CAAC;AAMD,MAAM,gBAAgB,OAAO,IAAI,KAAK,CAAC,GAAG,EAAE,eAAe,KAAK,CAAC;AAEjE,MAAa,UAAU,YAA0C,EAAE,MAAM,KAAK,SAAS,GAAG,SAAS,QACjG,oBAAC,eAAD;CAAe,KAAK,IAAI,IAAI,cAAc,IAAI,EAAE,KAAK,CAAC,GAAG,OAAO;CAAG,GAAI;CAAY;AAAM,CAAA,CAC1F"}
+{"version":3,"file":"Spinner.mjs","names":[],"sources":["../src/Spinner.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type HTMLArkProps, ark } from \"@ark-ui/react/factory\";\nimport { type RecipeVariantProps, css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\n\nexport const spinnerRecipe = cva({\n  base: {\n    borderRadius: \"full\",\n    animation: \"spin\",\n    display: \"block\",\n    marginInline: \"auto\",\n    borderStyle: \"solid\",\n    borderBlockColor: \"background.subtle\",\n    borderInlineStartColor: \"background.subtle\",\n    borderInlineEndColor: \"stroke.default\",\n    _motionReduce: {\n      animationDuration: \"2s\",\n    },\n  },\n  defaultVariants: {\n    size: \"large\",\n  },\n  variants: {\n    size: {\n      small: {\n        borderWidth: \"4px\",\n        height: \"small\",\n        width: \"small\",\n      },\n      medium: {\n        borderWidth: \"4px\",\n        height: \"large\",\n        width: \"large\",\n      },\n      large: {\n        borderWidth: \"8px\",\n        height: \"xxlarge\",\n        width: \"xxlarge\",\n      },\n    },\n  },\n});\n\nexport type SpinnerVariantProps = NonNullable<RecipeVariantProps<typeof spinnerRecipe>>;\n\nexport interface SpinnerProps extends HTMLArkProps<\"div\">, StyledProps, SpinnerVariantProps {}\n\nconst StyledSpinner = styled(ark.div, {}, { baseComponent: true });\n\nexport const Spinner = forwardRef<HTMLDivElement, SpinnerProps>(({ size, css: cssProp, ...props }, ref) => (\n  <StyledSpinner css={css.raw(spinnerRecipe.raw({ size }), cssProp)} {...props} ref={ref} />\n));\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAa,gBAAgB,IAAI;CAC/B,MAAM;EACJ,cAAc;EACd,WAAW;EACX,SAAS;EACT,cAAc;EACd,aAAa;EACb,kBAAkB;EAClB,wBAAwB;EACxB,sBAAsB;EACtB,eAAe,EACb,mBAAmB,KACrB;CACF;CACA,iBAAiB,EACf,MAAM,QACR;CACA,UAAU,EACR,MAAM;EACJ,OAAO;GACL,aAAa;GACb,QAAQ;GACR,OAAO;EACT;EACA,QAAQ;GACN,aAAa;GACb,QAAQ;GACR,OAAO;EACT;EACA,OAAO;GACL,aAAa;GACb,QAAQ;GACR,OAAO;EACT;CACF,EACF;AACF,CAAC;AAMD,MAAM,gBAAgB,OAAO,IAAI,KAAK,CAAC,GAAG,EAAE,eAAe,KAAK,CAAC;AAEjE,MAAa,UAAU,YAA0C,EAAE,MAAM,KAAK,SAAS,GAAG,SAAS,QACjG,oBAAC,eAAD;CAAe,KAAK,IAAI,IAAI,cAAc,IAAI,EAAE,KAAK,CAAC,GAAG,OAAO;CAAG,GAAI;CAAY;AAAM,CAAA,CAC1F"}

package/es/Switch.mjs

@@ -1,8 +1,8 @@
 import { Text } from "./Text.mjs";
-import { Switch, switchAnatomy } from "@ark-ui/react";
 import { sva } from "@ndla/styled-system/css";
 import { createStyleContext } from "@ndla/styled-system/jsx";
 import { jsx } from "react/jsx-runtime";
+import { Switch, switchAnatomy } from "@ark-ui/react/switch";
 //#region src/Switch.tsx
 /**
 * Copyright (c) 2024-present, NDLA.