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

package/es/Switch.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.mjs","names":[],"sources":["../src/Switch.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 { Switch, switchAnatomy } from \"@ark-ui/react\";\nimport { type RecipeVariantProps, sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport type { RefAttributes } from \"react\";\nimport { Text, type TextProps } from \"./Text\";\n\nconst switchRecipe = sva({\n  slots: switchAnatomy.keys(),\n  base: {\n    root: {\n      display: \"inline-flex\",\n      alignItems: \"center\",\n      position: \"relative\",\n      gap: \"xxsmall\",\n      _focus: {\n        outline: \"2px solid\",\n        outlineOffset: \"4xsmall\",\n        outlineColor: \"stroke.default\",\n        borderRadius: \"xsmall\",\n      },\n    },\n    control: {\n      display: \"inline-flex\",\n      alignItems: \"center\",\n      background: \"surface.disabled.strong\",\n      width: \"xxlarge\",\n      padding: \"1\",\n      borderRadius: \"medium\",\n      cursor: \"pointer\",\n      flexShrink: \"0\",\n      transitionDuration: \"fast\",\n      transitionProperty: \"background\",\n      transitionTimingFunction: \"default\",\n      _checked: {\n        background: \"surface.action.active\",\n      },\n      _disabled: {\n        background: \"surface.disabled\",\n        cursor: \"not-allowed\",\n      },\n      _motionReduce: {\n        transition: \"none\",\n        transitionDuration: \"0s\",\n      },\n    },\n    thumb: {\n      display: \"inline-flex\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n      background: \"icon.onAction\",\n      borderRadius: \"full\",\n      boxShadow: \"small\",\n      transitionDuration: \"fast\",\n      transitionProperty: \"transform\",\n      transitionTimingFunction: \"default\",\n      width: \"10\",\n      height: \"10\",\n      textStyle: \"label.xsmall\",\n      fontWeight: \"bold\",\n      _hover: {\n        transform: \"translateX(20%)\",\n        _disabled: {\n          transform: \"translateX(0)\",\n        },\n        _motionReduce: {\n          transform: \"translateX(0)\",\n        },\n      },\n      _checked: {\n        transform: \"translateX(120%)\",\n        _hover: {\n          transform: \"translateX(100%)\",\n          _disabled: {\n            transform: \"translateX(120%)\",\n          },\n          _motionReduce: {\n            transform: \"translateX(120%)\",\n          },\n        },\n      },\n    },\n    label: {\n      color: \"text.strong\",\n      transitionDuration: \"fast\",\n      transitionProperty: \"color\",\n      transitionTimingFunction: \"default\",\n      _hover: {\n        color: \"text.action\",\n      },\n      _disabled: {\n        color: \"text.disabled\",\n        _hover: {\n          color: \"text.disabled\",\n        },\n      },\n      _motionReduce: {\n        transition: \"none\",\n        transitionDuration: \"0s\",\n      },\n    },\n  },\n});\n\nconst { withProvider, withContext } = createStyleContext(switchRecipe);\n\nexport type SwitchVariantProps = NonNullable<RecipeVariantProps<typeof switchRecipe>>;\n\nexport interface SwitchRootProps extends Switch.RootProps, StyledProps, SwitchVariantProps {}\n\nexport const SwitchRoot = withProvider(Switch.Root, \"root\", { baseComponent: true });\n\nexport const SwitchControl = withContext(Switch.Control, \"control\", { baseComponent: true });\n\nexport const SwitchThumb = withContext(Switch.Thumb, \"thumb\", { baseComponent: true });\n\nconst InternalSwitchLabel = withContext(Switch.Label, \"label\");\n\ninterface SwitchLabelProps\n  extends Omit<Switch.LabelProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLSpanElement> {}\n\nexport const SwitchLabel = ({ textStyle = \"label.medium\", children, ...props }: SwitchLabelProps) => (\n  <InternalSwitchLabel asChild {...props}>\n    <Text asChild consumeCss textStyle={textStyle}>\n      <span>{children}</span>\n    </Text>\n  </InternalSwitchLabel>\n);\n\nexport const SwitchHiddenInput = Switch.HiddenInput;\n"],"mappings":";;;;;;;;;;;;;AAgHA,MAAM,EAAE,cAAc,gBAAgB,mBAjGjB,IAAI;CACvB,OAAO,cAAc,KAAK;CAC1B,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,YAAY;GACZ,UAAU;GACV,KAAK;GACL,QAAQ;IACN,SAAS;IACT,eAAe;IACf,cAAc;IACd,cAAc;GAChB;EACF;EACA,SAAS;GACP,SAAS;GACT,YAAY;GACZ,YAAY;GACZ,OAAO;GACP,SAAS;GACT,cAAc;GACd,QAAQ;GACR,YAAY;GACZ,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,UAAU,EACR,YAAY,wBACd;GACA,WAAW;IACT,YAAY;IACZ,QAAQ;GACV;GACA,eAAe;IACb,YAAY;IACZ,oBAAoB;GACtB;EACF;EACA,OAAO;GACL,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,YAAY;GACZ,cAAc;GACd,WAAW;GACX,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,OAAO;GACP,QAAQ;GACR,WAAW;GACX,YAAY;GACZ,QAAQ;IACN,WAAW;IACX,WAAW,EACT,WAAW,gBACb;IACA,eAAe,EACb,WAAW,gBACb;GACF;GACA,UAAU;IACR,WAAW;IACX,QAAQ;KACN,WAAW;KACX,WAAW,EACT,WAAW,mBACb;KACA,eAAe,EACb,WAAW,mBACb;IACF;GACF;EACF;EACA,OAAO;GACL,OAAO;GACP,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,QAAQ,EACN,OAAO,cACT;GACA,WAAW;IACT,OAAO;IACP,QAAQ,EACN,OAAO,gBACT;GACF;GACA,eAAe;IACb,YAAY;IACZ,oBAAoB;GACtB;EACF;CACF;AACF,CAEoE,CAAC;AAMrE,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,MAAM,sBAAsB,YAAY,OAAO,OAAO,OAAO;AAK7D,MAAa,eAAe,EAAE,YAAY,gBAAgB,UAAU,GAAG,YACrE,oBAAC,qBAAD;CAAqB,SAAA;CAAQ,GAAI;WAC/B,oBAAC,MAAD;EAAM,SAAA;EAAQ,YAAA;EAAsB;YAClC,oBAAC,QAAD,EAAO,SAAe,CAAA;CAClB,CAAA;AACa,CAAA;AAGvB,MAAa,oBAAoB,OAAO"}
+{"version":3,"file":"Switch.mjs","names":[],"sources":["../src/Switch.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 { Switch, switchAnatomy } from \"@ark-ui/react/switch\";\nimport { type RecipeVariantProps, sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport type { RefAttributes } from \"react\";\nimport { Text, type TextProps } from \"./Text\";\n\nconst switchRecipe = sva({\n  slots: switchAnatomy.keys(),\n  base: {\n    root: {\n      display: \"inline-flex\",\n      alignItems: \"center\",\n      position: \"relative\",\n      gap: \"xxsmall\",\n      _focus: {\n        outline: \"2px solid\",\n        outlineOffset: \"4xsmall\",\n        outlineColor: \"stroke.default\",\n        borderRadius: \"xsmall\",\n      },\n    },\n    control: {\n      display: \"inline-flex\",\n      alignItems: \"center\",\n      background: \"surface.disabled.strong\",\n      width: \"xxlarge\",\n      padding: \"1\",\n      borderRadius: \"medium\",\n      cursor: \"pointer\",\n      flexShrink: \"0\",\n      transitionDuration: \"fast\",\n      transitionProperty: \"background\",\n      transitionTimingFunction: \"default\",\n      _checked: {\n        background: \"surface.action.active\",\n      },\n      _disabled: {\n        background: \"surface.disabled\",\n        cursor: \"not-allowed\",\n      },\n      _motionReduce: {\n        transition: \"none\",\n        transitionDuration: \"0s\",\n      },\n    },\n    thumb: {\n      display: \"inline-flex\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n      background: \"icon.onAction\",\n      borderRadius: \"full\",\n      boxShadow: \"small\",\n      transitionDuration: \"fast\",\n      transitionProperty: \"transform\",\n      transitionTimingFunction: \"default\",\n      width: \"10\",\n      height: \"10\",\n      textStyle: \"label.xsmall\",\n      fontWeight: \"bold\",\n      _hover: {\n        transform: \"translateX(20%)\",\n        _disabled: {\n          transform: \"translateX(0)\",\n        },\n        _motionReduce: {\n          transform: \"translateX(0)\",\n        },\n      },\n      _checked: {\n        transform: \"translateX(120%)\",\n        _hover: {\n          transform: \"translateX(100%)\",\n          _disabled: {\n            transform: \"translateX(120%)\",\n          },\n          _motionReduce: {\n            transform: \"translateX(120%)\",\n          },\n        },\n      },\n    },\n    label: {\n      color: \"text.strong\",\n      transitionDuration: \"fast\",\n      transitionProperty: \"color\",\n      transitionTimingFunction: \"default\",\n      _hover: {\n        color: \"text.action\",\n      },\n      _disabled: {\n        color: \"text.disabled\",\n        _hover: {\n          color: \"text.disabled\",\n        },\n      },\n      _motionReduce: {\n        transition: \"none\",\n        transitionDuration: \"0s\",\n      },\n    },\n  },\n});\n\nconst { withProvider, withContext } = createStyleContext(switchRecipe);\n\nexport type SwitchVariantProps = NonNullable<RecipeVariantProps<typeof switchRecipe>>;\n\nexport interface SwitchRootProps extends Switch.RootProps, StyledProps, SwitchVariantProps {}\n\nexport const SwitchRoot = withProvider(Switch.Root, \"root\", { baseComponent: true });\n\nexport const SwitchControl = withContext(Switch.Control, \"control\", { baseComponent: true });\n\nexport const SwitchThumb = withContext(Switch.Thumb, \"thumb\", { baseComponent: true });\n\nconst InternalSwitchLabel = withContext(Switch.Label, \"label\");\n\ninterface SwitchLabelProps\n  extends Omit<Switch.LabelProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLSpanElement> {}\n\nexport const SwitchLabel = ({ textStyle = \"label.medium\", children, ...props }: SwitchLabelProps) => (\n  <InternalSwitchLabel asChild {...props}>\n    <Text asChild consumeCss textStyle={textStyle}>\n      <span>{children}</span>\n    </Text>\n  </InternalSwitchLabel>\n);\n\nexport const SwitchHiddenInput = Switch.HiddenInput;\n"],"mappings":";;;;;;;;;;;;;AAgHA,MAAM,EAAE,cAAc,gBAAgB,mBAjGjB,IAAI;CACvB,OAAO,cAAc,KAAK;CAC1B,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,YAAY;GACZ,UAAU;GACV,KAAK;GACL,QAAQ;IACN,SAAS;IACT,eAAe;IACf,cAAc;IACd,cAAc;GAChB;EACF;EACA,SAAS;GACP,SAAS;GACT,YAAY;GACZ,YAAY;GACZ,OAAO;GACP,SAAS;GACT,cAAc;GACd,QAAQ;GACR,YAAY;GACZ,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,UAAU,EACR,YAAY,wBACd;GACA,WAAW;IACT,YAAY;IACZ,QAAQ;GACV;GACA,eAAe;IACb,YAAY;IACZ,oBAAoB;GACtB;EACF;EACA,OAAO;GACL,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,YAAY;GACZ,cAAc;GACd,WAAW;GACX,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,OAAO;GACP,QAAQ;GACR,WAAW;GACX,YAAY;GACZ,QAAQ;IACN,WAAW;IACX,WAAW,EACT,WAAW,gBACb;IACA,eAAe,EACb,WAAW,gBACb;GACF;GACA,UAAU;IACR,WAAW;IACX,QAAQ;KACN,WAAW;KACX,WAAW,EACT,WAAW,mBACb;KACA,eAAe,EACb,WAAW,mBACb;IACF;GACF;EACF;EACA,OAAO;GACL,OAAO;GACP,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,QAAQ,EACN,OAAO,cACT;GACA,WAAW;IACT,OAAO;IACP,QAAQ,EACN,OAAO,gBACT;GACF;GACA,eAAe;IACb,YAAY;IACZ,oBAAoB;GACtB;EACF;CACF;AACF,CAEoE,CAAC;AAMrE,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,MAAM,sBAAsB,YAAY,OAAO,OAAO,OAAO;AAK7D,MAAa,eAAe,EAAE,YAAY,gBAAgB,UAAU,GAAG,YACrE,oBAAC,qBAAD;CAAqB,SAAA;CAAQ,GAAI;WAC/B,oBAAC,MAAD;EAAM,SAAA;EAAQ,YAAA;EAAsB;YAClC,oBAAC,QAAD,EAAO,SAAe,CAAA;CAClB,CAAA;AACa,CAAA;AAGvB,MAAa,oBAAoB,OAAO"}

package/es/Table.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/Table.tsx
 /**
 * Copyright (c) 2024-present, NDLA.

package/es/Table.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Table.mjs","names":[],"sources":["../src/Table.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 interface TableProps extends HTMLArkProps<\"table\">, StyledProps {}\n\nexport const Table = styled(\n  ark.table,\n  {\n    base: {\n      display: \"block\",\n      overflowX: \"auto\",\n      maxWidth: \"100%\",\n      padding: \"4xsmall\",\n      tableLayout: \"fixed\",\n      clear: \"both\",\n      \"& > caption\": {\n        fontWeight: \"bold\",\n        textAlign: \"left\",\n        textTransform: \"uppercase\",\n        marginBlockEnd: \"xsmall\",\n      },\n      \"& thead\": {\n        overflow: \"hidden\",\n      },\n      \"& thead tr th\": {\n        fontWeight: \"bold\",\n        borderBottom: \"3px solid\",\n        borderColor: \"surface.brand.1.strong\",\n        verticalAlign: \"text-top\",\n      },\n      \"& tbody th\": {\n        borderRight: \"3px solid\",\n        borderColor: \"surface.brand.1.strong\",\n        padding: \"3xsmall\",\n      },\n      \"& thead tr:nth-child(2) th\": {\n        border: \"1px solid\",\n        borderColor: \"surface.brand.1.subtle\",\n        textTransform: \"none\",\n        fontWeight: \"semibold\",\n        height: \"large\",\n        backgroundColor: \"surface.brand.1.subtle\",\n        paddingBlock: \"4xsmall\",\n        paddingInlineEnd: \"medium\",\n        paddingInlineStart: \"3xsmall\",\n        _empty: {\n          backgroundColor: \"transparent\",\n        },\n      },\n      \"& td\": {\n        border: \"1px solid\",\n        borderColor: \"surface.brand.1.subtle\",\n        verticalAlign: \"top\",\n      },\n      \"& td, & th\": {\n        display: \"table-cell\",\n        paddingInline: \"xsmall\",\n        paddingBlock: \"3xsmall\",\n        minWidth: \"large\",\n        \"&[data-align='center']\": {\n          textAlign: \"center\",\n        },\n        \"&[data-align='left']\": {\n          textAlign: \"left\",\n        },\n        \"&[data-align='right']\": {\n          textAlign: \"right\",\n        },\n      },\n    },\n  },\n  // TODO: Chrome doesn't support automatically making overflowed elements tabbable yet. Revisit this in a year or two\n  { baseComponent: true, defaultProps: { tabIndex: 0 } },\n);\n"],"mappings":";;;;;;;;;;AAcA,MAAa,QAAQ,OACnB,IAAI,OACJ,EACE,MAAM;CACJ,SAAS;CACT,WAAW;CACX,UAAU;CACV,SAAS;CACT,aAAa;CACb,OAAO;CACP,eAAe;EACb,YAAY;EACZ,WAAW;EACX,eAAe;EACf,gBAAgB;CAClB;CACA,WAAW,EACT,UAAU,SACZ;CACA,iBAAiB;EACf,YAAY;EACZ,cAAc;EACd,aAAa;EACb,eAAe;CACjB;CACA,cAAc;EACZ,aAAa;EACb,aAAa;EACb,SAAS;CACX;CACA,8BAA8B;EAC5B,QAAQ;EACR,aAAa;EACb,eAAe;EACf,YAAY;EACZ,QAAQ;EACR,iBAAiB;EACjB,cAAc;EACd,kBAAkB;EAClB,oBAAoB;EACpB,QAAQ,EACN,iBAAiB,cACnB;CACF;CACA,QAAQ;EACN,QAAQ;EACR,aAAa;EACb,eAAe;CACjB;CACA,cAAc;EACZ,SAAS;EACT,eAAe;EACf,cAAc;EACd,UAAU;EACV,0BAA0B,EACxB,WAAW,SACb;EACA,wBAAwB,EACtB,WAAW,OACb;EACA,yBAAyB,EACvB,WAAW,QACb;CACF;AACF,EACF,GAEA;CAAE,eAAe;CAAM,cAAc,EAAE,UAAU,EAAE;AAAE,CACvD"}
+{"version":3,"file":"Table.mjs","names":[],"sources":["../src/Table.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 interface TableProps extends HTMLArkProps<\"table\">, StyledProps {}\n\nexport const Table = styled(\n  ark.table,\n  {\n    base: {\n      display: \"block\",\n      overflowX: \"auto\",\n      maxWidth: \"100%\",\n      padding: \"4xsmall\",\n      tableLayout: \"fixed\",\n      clear: \"both\",\n      \"& > caption\": {\n        fontWeight: \"bold\",\n        textAlign: \"left\",\n        textTransform: \"uppercase\",\n        marginBlockEnd: \"xsmall\",\n      },\n      \"& thead\": {\n        overflow: \"hidden\",\n      },\n      \"& thead tr th\": {\n        fontWeight: \"bold\",\n        borderBottom: \"3px solid\",\n        borderColor: \"surface.brand.1.strong\",\n        verticalAlign: \"text-top\",\n      },\n      \"& tbody th\": {\n        borderRight: \"3px solid\",\n        borderColor: \"surface.brand.1.strong\",\n        padding: \"3xsmall\",\n      },\n      \"& thead tr:nth-child(2) th\": {\n        border: \"1px solid\",\n        borderColor: \"surface.brand.1.subtle\",\n        textTransform: \"none\",\n        fontWeight: \"semibold\",\n        height: \"large\",\n        backgroundColor: \"surface.brand.1.subtle\",\n        paddingBlock: \"4xsmall\",\n        paddingInlineEnd: \"medium\",\n        paddingInlineStart: \"3xsmall\",\n        _empty: {\n          backgroundColor: \"transparent\",\n        },\n      },\n      \"& td\": {\n        border: \"1px solid\",\n        borderColor: \"surface.brand.1.subtle\",\n        verticalAlign: \"top\",\n      },\n      \"& td, & th\": {\n        display: \"table-cell\",\n        paddingInline: \"xsmall\",\n        paddingBlock: \"3xsmall\",\n        minWidth: \"large\",\n        \"&[data-align='center']\": {\n          textAlign: \"center\",\n        },\n        \"&[data-align='left']\": {\n          textAlign: \"left\",\n        },\n        \"&[data-align='right']\": {\n          textAlign: \"right\",\n        },\n      },\n    },\n  },\n  // TODO: Chrome doesn't support automatically making overflowed elements tabbable yet. Revisit this in a year or two\n  { baseComponent: true, defaultProps: { tabIndex: 0 } },\n);\n"],"mappings":";;;;;;;;;;AAcA,MAAa,QAAQ,OACnB,IAAI,OACJ,EACE,MAAM;CACJ,SAAS;CACT,WAAW;CACX,UAAU;CACV,SAAS;CACT,aAAa;CACb,OAAO;CACP,eAAe;EACb,YAAY;EACZ,WAAW;EACX,eAAe;EACf,gBAAgB;CAClB;CACA,WAAW,EACT,UAAU,SACZ;CACA,iBAAiB;EACf,YAAY;EACZ,cAAc;EACd,aAAa;EACb,eAAe;CACjB;CACA,cAAc;EACZ,aAAa;EACb,aAAa;EACb,SAAS;CACX;CACA,8BAA8B;EAC5B,QAAQ;EACR,aAAa;EACb,eAAe;EACf,YAAY;EACZ,QAAQ;EACR,iBAAiB;EACjB,cAAc;EACd,kBAAkB;EAClB,oBAAoB;EACpB,QAAQ,EACN,iBAAiB,cACnB;CACF;CACA,QAAQ;EACN,QAAQ;EACR,aAAa;EACb,eAAe;CACjB;CACA,cAAc;EACZ,SAAS;EACT,eAAe;EACf,cAAc;EACd,UAAU;EACV,0BAA0B,EACxB,WAAW,SACb;EACA,wBAAwB,EACtB,WAAW,OACb;EACA,yBAAyB,EACvB,WAAW,QACb;CACF;AACF,EACF,GAEA;CAAE,eAAe;CAAM,cAAc,EAAE,UAAU,EAAE;AAAE,CACvD"}

package/es/Tabs.mjs

@@ -1,7 +1,7 @@
-import { Tabs } from "@ark-ui/react";
 import { cx, sva } from "@ndla/styled-system/css";
 import { createStyleContext } from "@ndla/styled-system/jsx";
 import { jsx } from "react/jsx-runtime";
+import { Tabs } from "@ark-ui/react/tabs";
 //#region src/Tabs.tsx
 /**
 * Copyright (c) 2024-present, NDLA.

package/es/Tabs.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.mjs","names":[],"sources":["../src/Tabs.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 { Tabs } from \"@ark-ui/react\";\nimport { type RecipeVariantProps, cx, 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\";\n\nconst tabsRecipe = sva({\n  // TODO: This still doesn't work. Need to figure out why we need to pass keys manually.\n  // slots: tabsAnatomy.keys(),\n  slots: [\"root\", \"list\", \"trigger\", \"content\", \"indicator\"],\n  base: {\n    root: {\n      position: \"relative\",\n      display: \"flex\",\n      width: \"100%\",\n      _horizontal: {\n        flexDirection: \"column\",\n      },\n      _vertical: {\n        flexDirection: \"row\",\n      },\n    },\n    list: {\n      position: \"relative\",\n      display: \"flex\",\n      flexShrink: \"0\",\n      flexWrap: \"wrap\",\n      _horizontal: {\n        flexDirection: \"row\",\n      },\n      _vertical: {\n        flexDirection: \"column\",\n      },\n    },\n    trigger: {\n      display: \"inline-flex\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n      flexShrink: \"0\",\n      cursor: \"pointer\",\n      textStyle: \"label.small\",\n      fontWeight: \"bold\",\n      transitionDuration: \"normal\",\n      transitionProperty: \"color, background, border-color\",\n      transitionTimingFunction: \"default\",\n      whiteSpace: \"nowrap\",\n      paddingInline: \"small\",\n      paddingBlock: \"3xsmall\",\n      zIndex: \"1\",\n      _hover: {\n        color: \"text.action\",\n      },\n      _selected: {\n        color: \"text.strong\",\n      },\n      _disabled: {\n        color: \"text.subtle\",\n        cursor: \"not-allowed\",\n        _hover: {\n          color: \"text.subtle\",\n        },\n      },\n      _motionReduce: {\n        transition: \"none\",\n        transitionDuration: \"0s\",\n      },\n    },\n    content: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      alignItems: \"flex-start\",\n      gap: \"xsmall\",\n    },\n  },\n  defaultVariants: {\n    variant: \"line\",\n  },\n  variants: {\n    variant: {\n      line: {\n        trigger: {\n          borderColor: \"stroke.default\",\n          _hover: {\n            borderColor: \"stroke.hover\",\n            _focusVisible: {\n              borderColor: \"stroke.default\",\n            },\n          },\n          _horizontal: {\n            borderBottom: \"1px solid\",\n          },\n          _disabled: {\n            borderColor: \"stroke.default\",\n            _hover: {\n              borderColor: \"stroke.default\",\n            },\n          },\n          _vertical: {\n            borderLeft: \"1px solid\",\n            justifyContent: \"flex-start\",\n          },\n          _focusVisible: {\n            outline: \"none\",\n            borderRadius: \"unset\",\n          },\n        },\n        indicator: {\n          background: \"stroke.default\",\n          _peerFocusVisible: {\n            height: \"var(--height)\",\n            width: \"var(--width)\",\n            outline: \"3px solid\",\n            outlineOffset: \"-3px\",\n            outlineColor: \"stroke.default\",\n            background: \"transparent\",\n            _horizontal: {\n              borderTopRadius: \"xsmall\",\n            },\n            _vertical: {\n              borderRightRadius: \"xsmall\",\n            },\n          },\n          _horizontal: {\n            top: \"calc(var(--top) + var(--height) - 6px)\",\n            height: \"3\",\n            width: \"var(--width)\",\n            _peerFocusVisible: { top: \"var(--top)\" },\n          },\n          _vertical: {\n            height: \"var(--height)\",\n            left: \"0\",\n            width: \"3\",\n          },\n        },\n        content: {\n          zIndex: \"1\",\n          _horizontal: {\n            paddingBlockStart: \"xsmall\",\n          },\n          _vertical: {\n            paddingInlineStart: \"xsmall\",\n          },\n          _focusVisible: {\n            outline: \"none\",\n            boxShadow: \"0 0 0 3px var(--shadow-color)\",\n            boxShadowColor: \"stroke.default\",\n          },\n        },\n      },\n      outline: {\n        list: {\n          _horizontal: {\n            marginBlockEnd: \"-1px\",\n          },\n          _vertical: {\n            marginInlineEnd: \"-1px\",\n          },\n        },\n        trigger: {\n          borderColor: \"transparent\",\n          borderWidth: \"1px\",\n          _horizontal: {\n            borderTopRadius: \"xsmall\",\n          },\n          _vertical: {\n            borderTopLeftRadius: \"xsmall\",\n            borderBottomLeftRadius: \"xsmall\",\n          },\n          _selected: {\n            background: \"surface.default\",\n            borderColor: \"stroke.default\",\n            _horizontal: {\n              borderBottom: \"none\",\n            },\n            _vertical: {\n              borderRight: \"none\",\n            },\n          },\n          _focusVisible: {\n            outline: \"3px solid\",\n            outlineOffset: \"-3px\",\n            outlineColor: \"stroke.default\",\n          },\n        },\n        content: {\n          borderWidth: \"1px\",\n          borderColor: \"stroke.default\",\n          background: \"surface.default\",\n          width: \"100%\",\n          padding: \"xsmall\",\n          _vertical: {\n            borderBottomRadius: \"xsmall\",\n            borderRightRadius: \"xsmall\",\n          },\n          _horizontal: {\n            borderRightRadius: \"xsmall\",\n            borderBottomLeftRadius: \"xsmall\",\n          },\n          _focusVisible: {\n            outline: \"3px solid\",\n            outlineOffset: \"-3px\",\n            outlineColor: \"stroke.default\",\n          },\n        },\n      },\n    },\n  },\n});\n\nconst { withProvider, withContext } = createStyleContext(tabsRecipe);\n\nexport type TabsVariantProps = NonNullable<RecipeVariantProps<typeof tabsRecipe>>;\n\nexport interface TabsRootProps extends Tabs.RootProps, TabsVariantProps, StyledProps, RefAttributes<HTMLDivElement> {\n  translations: Tabs.RootProps[\"translations\"];\n}\n\nconst InternalTabsRoot = withProvider(Tabs.Root, \"root\", { baseComponent: true });\n\nexport const TabsRoot = ({ lazyMount = true, unmountOnExit = true, ...props }: TabsRootProps) => (\n  <InternalTabsRoot lazyMount={lazyMount} unmountOnExit={unmountOnExit} {...props} />\n);\n\nexport const TabsContent = withContext(Tabs.Content, \"content\", { baseComponent: true });\n\nexport const TabsIndicator = withContext(Tabs.Indicator, \"indicator\", { baseComponent: true });\n\nexport const TabsList = withContext(Tabs.List, \"list\", { baseComponent: true });\n\nconst InternalTabsTrigger = withContext(Tabs.Trigger, \"trigger\", { baseComponent: true });\n\ninterface TabsTriggerProps extends Tabs.TriggerProps, StyledProps, RefAttributes<HTMLButtonElement> {}\n\nexport const TabsTrigger = ({ className, ...props }: TabsTriggerProps) => (\n  <InternalTabsTrigger className={cx(\"peer\", className)} {...props} />\n);\n"],"mappings":"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"}
+{"version":3,"file":"Tabs.mjs","names":[],"sources":["../src/Tabs.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 { Tabs } from \"@ark-ui/react/tabs\";\nimport { type RecipeVariantProps, cx, 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\";\n\nconst tabsRecipe = sva({\n  // TODO: This still doesn't work. Need to figure out why we need to pass keys manually.\n  // slots: tabsAnatomy.keys(),\n  slots: [\"root\", \"list\", \"trigger\", \"content\", \"indicator\"],\n  base: {\n    root: {\n      position: \"relative\",\n      display: \"flex\",\n      width: \"100%\",\n      _horizontal: {\n        flexDirection: \"column\",\n      },\n      _vertical: {\n        flexDirection: \"row\",\n      },\n    },\n    list: {\n      position: \"relative\",\n      display: \"flex\",\n      flexShrink: \"0\",\n      flexWrap: \"wrap\",\n      _horizontal: {\n        flexDirection: \"row\",\n      },\n      _vertical: {\n        flexDirection: \"column\",\n      },\n    },\n    trigger: {\n      display: \"inline-flex\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n      flexShrink: \"0\",\n      cursor: \"pointer\",\n      textStyle: \"label.small\",\n      fontWeight: \"bold\",\n      transitionDuration: \"normal\",\n      transitionProperty: \"color, background, border-color\",\n      transitionTimingFunction: \"default\",\n      whiteSpace: \"nowrap\",\n      paddingInline: \"small\",\n      paddingBlock: \"3xsmall\",\n      zIndex: \"1\",\n      _hover: {\n        color: \"text.action\",\n      },\n      _selected: {\n        color: \"text.strong\",\n      },\n      _disabled: {\n        color: \"text.subtle\",\n        cursor: \"not-allowed\",\n        _hover: {\n          color: \"text.subtle\",\n        },\n      },\n      _motionReduce: {\n        transition: \"none\",\n        transitionDuration: \"0s\",\n      },\n    },\n    content: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      alignItems: \"flex-start\",\n      gap: \"xsmall\",\n    },\n  },\n  defaultVariants: {\n    variant: \"line\",\n  },\n  variants: {\n    variant: {\n      line: {\n        trigger: {\n          borderColor: \"stroke.default\",\n          _hover: {\n            borderColor: \"stroke.hover\",\n            _focusVisible: {\n              borderColor: \"stroke.default\",\n            },\n          },\n          _horizontal: {\n            borderBottom: \"1px solid\",\n          },\n          _disabled: {\n            borderColor: \"stroke.default\",\n            _hover: {\n              borderColor: \"stroke.default\",\n            },\n          },\n          _vertical: {\n            borderLeft: \"1px solid\",\n            justifyContent: \"flex-start\",\n          },\n          _focusVisible: {\n            outline: \"none\",\n            borderRadius: \"unset\",\n          },\n        },\n        indicator: {\n          background: \"stroke.default\",\n          _peerFocusVisible: {\n            height: \"var(--height)\",\n            width: \"var(--width)\",\n            outline: \"3px solid\",\n            outlineOffset: \"-3px\",\n            outlineColor: \"stroke.default\",\n            background: \"transparent\",\n            _horizontal: {\n              borderTopRadius: \"xsmall\",\n            },\n            _vertical: {\n              borderRightRadius: \"xsmall\",\n            },\n          },\n          _horizontal: {\n            top: \"calc(var(--top) + var(--height) - 6px)\",\n            height: \"3\",\n            width: \"var(--width)\",\n            _peerFocusVisible: { top: \"var(--top)\" },\n          },\n          _vertical: {\n            height: \"var(--height)\",\n            left: \"0\",\n            width: \"3\",\n          },\n        },\n        content: {\n          zIndex: \"1\",\n          _horizontal: {\n            paddingBlockStart: \"xsmall\",\n          },\n          _vertical: {\n            paddingInlineStart: \"xsmall\",\n          },\n          _focusVisible: {\n            outline: \"none\",\n            boxShadow: \"0 0 0 3px var(--shadow-color)\",\n            boxShadowColor: \"stroke.default\",\n          },\n        },\n      },\n      outline: {\n        list: {\n          _horizontal: {\n            marginBlockEnd: \"-1px\",\n          },\n          _vertical: {\n            marginInlineEnd: \"-1px\",\n          },\n        },\n        trigger: {\n          borderColor: \"transparent\",\n          borderWidth: \"1px\",\n          _horizontal: {\n            borderTopRadius: \"xsmall\",\n          },\n          _vertical: {\n            borderTopLeftRadius: \"xsmall\",\n            borderBottomLeftRadius: \"xsmall\",\n          },\n          _selected: {\n            background: \"surface.default\",\n            borderColor: \"stroke.default\",\n            _horizontal: {\n              borderBottom: \"none\",\n            },\n            _vertical: {\n              borderRight: \"none\",\n            },\n          },\n          _focusVisible: {\n            outline: \"3px solid\",\n            outlineOffset: \"-3px\",\n            outlineColor: \"stroke.default\",\n          },\n        },\n        content: {\n          borderWidth: \"1px\",\n          borderColor: \"stroke.default\",\n          background: \"surface.default\",\n          width: \"100%\",\n          padding: \"xsmall\",\n          _vertical: {\n            borderBottomRadius: \"xsmall\",\n            borderRightRadius: \"xsmall\",\n          },\n          _horizontal: {\n            borderRightRadius: \"xsmall\",\n            borderBottomLeftRadius: \"xsmall\",\n          },\n          _focusVisible: {\n            outline: \"3px solid\",\n            outlineOffset: \"-3px\",\n            outlineColor: \"stroke.default\",\n          },\n        },\n      },\n    },\n  },\n});\n\nconst { withProvider, withContext } = createStyleContext(tabsRecipe);\n\nexport type TabsVariantProps = NonNullable<RecipeVariantProps<typeof tabsRecipe>>;\n\nexport interface TabsRootProps extends Tabs.RootProps, TabsVariantProps, StyledProps, RefAttributes<HTMLDivElement> {\n  translations: Tabs.RootProps[\"translations\"];\n}\n\nconst InternalTabsRoot = withProvider(Tabs.Root, \"root\", { baseComponent: true });\n\nexport const TabsRoot = ({ lazyMount = true, unmountOnExit = true, ...props }: TabsRootProps) => (\n  <InternalTabsRoot lazyMount={lazyMount} unmountOnExit={unmountOnExit} {...props} />\n);\n\nexport const TabsContent = withContext(Tabs.Content, \"content\", { baseComponent: true });\n\nexport const TabsIndicator = withContext(Tabs.Indicator, \"indicator\", { baseComponent: true });\n\nexport const TabsList = withContext(Tabs.List, \"list\", { baseComponent: true });\n\nconst InternalTabsTrigger = withContext(Tabs.Trigger, \"trigger\", { baseComponent: true });\n\ninterface TabsTriggerProps extends Tabs.TriggerProps, StyledProps, RefAttributes<HTMLButtonElement> {}\n\nexport const TabsTrigger = ({ className, ...props }: TabsTriggerProps) => (\n  <InternalTabsTrigger className={cx(\"peer\", className)} {...props} />\n);\n"],"mappings":"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"}

package/es/TagsInput.mjs

@@ -1,9 +1,9 @@
 import { Label } from "./Label.mjs";
-import { TagsInput, tagsInputAnatomy } 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 { TagsInput, tagsInputAnatomy } from "@ark-ui/react/tags-input";
 //#region src/TagsInput.tsx
 /**
 * Copyright (c) 2024-present, NDLA.

package/es/TagsInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TagsInput.mjs","names":[],"sources":["../src/TagsInput.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 { TagsInput, tagsInputAnatomy } 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 { Label } from \"./Label\";\nimport { type TextProps } from \"./Text\";\n\nconst tagsInputRecipe = sva({\n  slots: tagsInputAnatomy.keys(),\n  base: {\n    root: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"xxsmall\",\n      width: \"full\",\n    },\n    control: {\n      display: \"inline-flex\",\n      gap: \"xxsmall\",\n      alignItems: \"center\",\n      flexWrap: \"wrap\",\n    },\n    item: {\n      paddingBlock: \"3xsmall\",\n    },\n    itemPreview: {\n      display: \"flex\",\n      gap: \"1\",\n      paddingBlock: \"4xsmall\",\n      paddingInlineEnd: \"3xsmall\",\n      paddingInlineStart: \"xsmall\",\n      cursor: \"initial\",\n      borderRadius: \"large\",\n      outline: \"1px solid\",\n      outlineColor: \"transparent\",\n      backgroundColor: \"surface.action.selected\",\n      color: \"text.onAction\",\n      transitionDuration: \"normal\",\n      transitionProperty: \"background, outline-color, color\",\n      transitionTimingFunction: \"default\",\n      textStyle: \"label.medium\",\n      _hover: {\n        backgroundColor: \"surface.actionSubtle.hover\",\n        outlineColor: \"stroke.hover\",\n        color: \"text.default\",\n        \"& svg\": {\n          color: \"stroke.hover\",\n        },\n        _motionReduce: {\n          transition: \"none\",\n          transitionDuration: \"0s\",\n        },\n      },\n      _highlighted: {\n        backgroundColor: \"surface.actionSubtle.hover\",\n        outlineWidth: \"3px\",\n        outlineOffset: \"-1px\",\n        outlineColor: \"stroke.hover\",\n        color: \"text.default\",\n        \"& svg\": {\n          color: \"stroke.hover\",\n        },\n        _motionReduce: {\n          transition: \"none\",\n          transitionDuration: \"0s\",\n        },\n      },\n    },\n    input: {\n      flex: \"1\",\n    },\n    itemDeleteTrigger: {\n      paddingBottom: \"1\",\n      cursor: \"pointer\",\n      \"& span\": {\n        display: \"inline-block\",\n      },\n      \"& svg\": {\n        marginInline: \"0\",\n        marginBlock: \"0\",\n        width: \"medium\",\n        height: \"medium\",\n      },\n    },\n    itemText: {\n      paddingBottom: \"1\",\n    },\n    itemInput: {\n      outline: \"none\",\n      background: \"transparent\",\n    },\n  },\n});\nconst { withProvider, withContext } = createStyleContext(tagsInputRecipe);\n\nexport interface TagsInputRootProps extends TagsInput.RootProps, StyledProps {\n  translations: TagsInput.RootProps[\"translations\"];\n}\n\nexport const TagsInputRoot = withProvider(TagsInput.Root, \"root\", {\n  baseComponent: true,\n});\n\nexport interface TagsInputClearTriggerProps extends TagsInput.ClearTriggerProps, StyledProps {}\n\nexport const TagsInputClearTrigger = withContext(TagsInput.ClearTrigger, \"clearTrigger\", { baseComponent: true });\n\nexport interface TagsInputControlProps extends TagsInput.ControlProps, StyledProps {}\n\nexport const TagsInputControl = withContext(TagsInput.Control, \"control\", { baseComponent: true });\n\nexport interface TagsInputInputProps extends TagsInput.InputProps, StyledProps {}\n\nexport const TagsInputInput = withContext(TagsInput.Input, \"input\", { baseComponent: true });\n\nexport interface TagsInputItemDeleteTriggerProps extends TagsInput.ItemDeleteTriggerProps, StyledProps {}\n\nexport const TagsInputItemDeleteTrigger = withContext(TagsInput.ItemDeleteTrigger, \"itemDeleteTrigger\", {\n  baseComponent: true,\n});\n\nexport interface TagsInputItemInputProps extends TagsInput.ItemInputProps, StyledProps {}\n\nexport const TagsInputItemInput = withContext(TagsInput.ItemInput, \"itemInput\", { baseComponent: true });\n\nexport interface TagsInputItemPreviewProps extends TagsInput.ItemPreviewProps, StyledProps {}\n\nexport const TagsInputItemPreview = withContext(TagsInput.ItemPreview, \"itemPreview\", { baseComponent: true });\n\nexport interface TagsInputItemProps extends TagsInput.ItemProps, StyledProps {}\n\nexport const TagsInputItem = withContext(TagsInput.Item, \"item\", { baseComponent: true });\n\nexport interface TagsInputItemTextProps extends TagsInput.ItemTextProps, StyledProps {}\n\nexport const TagsInputItemText = withContext(TagsInput.ItemText, \"itemText\", { baseComponent: true });\n\nconst InternalTagsInputLabel = withContext(TagsInput.Label, \"label\");\n\nexport interface TagsInputLabelProps\n  extends Omit<TagsInput.LabelProps, \"color\">, StyledProps, TextProps, RefAttributes<HTMLLabelElement> {}\n\nexport const TagsInputLabel = forwardRef<HTMLLabelElement, TagsInputLabelProps>(({ children, ...props }, ref) => (\n  <InternalTagsInputLabel asChild ref={ref} {...props}>\n    <Label>{children}</Label>\n  </InternalTagsInputLabel>\n));\n"],"mappings":";;;;;;;;;;;;;;AAsGA,MAAM,EAAE,cAAc,gBAAgB,mBAtFd,IAAI;CAC1B,OAAO,iBAAiB,KAAK;CAC7B,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,KAAK;GACL,OAAO;EACT;EACA,SAAS;GACP,SAAS;GACT,KAAK;GACL,YAAY;GACZ,UAAU;EACZ;EACA,MAAM,EACJ,cAAc,UAChB;EACA,aAAa;GACX,SAAS;GACT,KAAK;GACL,cAAc;GACd,kBAAkB;GAClB,oBAAoB;GACpB,QAAQ;GACR,cAAc;GACd,SAAS;GACT,cAAc;GACd,iBAAiB;GACjB,OAAO;GACP,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,WAAW;GACX,QAAQ;IACN,iBAAiB;IACjB,cAAc;IACd,OAAO;IACP,SAAS,EACP,OAAO,eACT;IACA,eAAe;KACb,YAAY;KACZ,oBAAoB;IACtB;GACF;GACA,cAAc;IACZ,iBAAiB;IACjB,cAAc;IACd,eAAe;IACf,cAAc;IACd,OAAO;IACP,SAAS,EACP,OAAO,eACT;IACA,eAAe;KACb,YAAY;KACZ,oBAAoB;IACtB;GACF;EACF;EACA,OAAO,EACL,MAAM,IACR;EACA,mBAAmB;GACjB,eAAe;GACf,QAAQ;GACR,UAAU,EACR,SAAS,eACX;GACA,SAAS;IACP,cAAc;IACd,aAAa;IACb,OAAO;IACP,QAAQ;GACV;EACF;EACA,UAAU,EACR,eAAe,IACjB;EACA,WAAW;GACT,SAAS;GACT,YAAY;EACd;CACF;AACF,CACuE,CAAC;AAMxE,MAAa,gBAAgB,aAAa,UAAU,MAAM,QAAQ,EAChE,eAAe,KACjB,CAAC;AAID,MAAa,wBAAwB,YAAY,UAAU,cAAc,gBAAgB,EAAE,eAAe,KAAK,CAAC;AAIhH,MAAa,mBAAmB,YAAY,UAAU,SAAS,WAAW,EAAE,eAAe,KAAK,CAAC;AAIjG,MAAa,iBAAiB,YAAY,UAAU,OAAO,SAAS,EAAE,eAAe,KAAK,CAAC;AAI3F,MAAa,6BAA6B,YAAY,UAAU,mBAAmB,qBAAqB,EACtG,eAAe,KACjB,CAAC;AAID,MAAa,qBAAqB,YAAY,UAAU,WAAW,aAAa,EAAE,eAAe,KAAK,CAAC;AAIvG,MAAa,uBAAuB,YAAY,UAAU,aAAa,eAAe,EAAE,eAAe,KAAK,CAAC;AAI7G,MAAa,gBAAgB,YAAY,UAAU,MAAM,QAAQ,EAAE,eAAe,KAAK,CAAC;AAIxF,MAAa,oBAAoB,YAAY,UAAU,UAAU,YAAY,EAAE,eAAe,KAAK,CAAC;AAEpG,MAAM,yBAAyB,YAAY,UAAU,OAAO,OAAO;AAKnE,MAAa,iBAAiB,YAAmD,EAAE,UAAU,GAAG,SAAS,QACvG,oBAAC,wBAAD;CAAwB,SAAA;CAAa;CAAK,GAAI;WAC5C,oBAAC,OAAD,EAAQ,SAAgB,CAAA;AACF,CAAA,CACzB"}
+{"version":3,"file":"TagsInput.mjs","names":[],"sources":["../src/TagsInput.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 { TagsInput, tagsInputAnatomy } from \"@ark-ui/react/tags-input\";\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 { Label } from \"./Label\";\nimport { type TextProps } from \"./Text\";\n\nconst tagsInputRecipe = sva({\n  slots: tagsInputAnatomy.keys(),\n  base: {\n    root: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"xxsmall\",\n      width: \"full\",\n    },\n    control: {\n      display: \"inline-flex\",\n      gap: \"xxsmall\",\n      alignItems: \"center\",\n      flexWrap: \"wrap\",\n    },\n    item: {\n      paddingBlock: \"3xsmall\",\n    },\n    itemPreview: {\n      display: \"flex\",\n      gap: \"1\",\n      paddingBlock: \"4xsmall\",\n      paddingInlineEnd: \"3xsmall\",\n      paddingInlineStart: \"xsmall\",\n      cursor: \"initial\",\n      borderRadius: \"large\",\n      outline: \"1px solid\",\n      outlineColor: \"transparent\",\n      backgroundColor: \"surface.action.selected\",\n      color: \"text.onAction\",\n      transitionDuration: \"normal\",\n      transitionProperty: \"background, outline-color, color\",\n      transitionTimingFunction: \"default\",\n      textStyle: \"label.medium\",\n      _hover: {\n        backgroundColor: \"surface.actionSubtle.hover\",\n        outlineColor: \"stroke.hover\",\n        color: \"text.default\",\n        \"& svg\": {\n          color: \"stroke.hover\",\n        },\n        _motionReduce: {\n          transition: \"none\",\n          transitionDuration: \"0s\",\n        },\n      },\n      _highlighted: {\n        backgroundColor: \"surface.actionSubtle.hover\",\n        outlineWidth: \"3px\",\n        outlineOffset: \"-1px\",\n        outlineColor: \"stroke.hover\",\n        color: \"text.default\",\n        \"& svg\": {\n          color: \"stroke.hover\",\n        },\n        _motionReduce: {\n          transition: \"none\",\n          transitionDuration: \"0s\",\n        },\n      },\n    },\n    input: {\n      flex: \"1\",\n    },\n    itemDeleteTrigger: {\n      paddingBottom: \"1\",\n      cursor: \"pointer\",\n      \"& span\": {\n        display: \"inline-block\",\n      },\n      \"& svg\": {\n        marginInline: \"0\",\n        marginBlock: \"0\",\n        width: \"medium\",\n        height: \"medium\",\n      },\n    },\n    itemText: {\n      paddingBottom: \"1\",\n    },\n    itemInput: {\n      outline: \"none\",\n      background: \"transparent\",\n    },\n  },\n});\nconst { withProvider, withContext } = createStyleContext(tagsInputRecipe);\n\nexport interface TagsInputRootProps extends TagsInput.RootProps, StyledProps {\n  translations: TagsInput.RootProps[\"translations\"];\n}\n\nexport const TagsInputRoot = withProvider(TagsInput.Root, \"root\", {\n  baseComponent: true,\n});\n\nexport interface TagsInputClearTriggerProps extends TagsInput.ClearTriggerProps, StyledProps {}\n\nexport const TagsInputClearTrigger = withContext(TagsInput.ClearTrigger, \"clearTrigger\", { baseComponent: true });\n\nexport interface TagsInputControlProps extends TagsInput.ControlProps, StyledProps {}\n\nexport const TagsInputControl = withContext(TagsInput.Control, \"control\", { baseComponent: true });\n\nexport interface TagsInputInputProps extends TagsInput.InputProps, StyledProps {}\n\nexport const TagsInputInput = withContext(TagsInput.Input, \"input\", { baseComponent: true });\n\nexport interface TagsInputItemDeleteTriggerProps extends TagsInput.ItemDeleteTriggerProps, StyledProps {}\n\nexport const TagsInputItemDeleteTrigger = withContext(TagsInput.ItemDeleteTrigger, \"itemDeleteTrigger\", {\n  baseComponent: true,\n});\n\nexport interface TagsInputItemInputProps extends TagsInput.ItemInputProps, StyledProps {}\n\nexport const TagsInputItemInput = withContext(TagsInput.ItemInput, \"itemInput\", { baseComponent: true });\n\nexport interface TagsInputItemPreviewProps extends TagsInput.ItemPreviewProps, StyledProps {}\n\nexport const TagsInputItemPreview = withContext(TagsInput.ItemPreview, \"itemPreview\", { baseComponent: true });\n\nexport interface TagsInputItemProps extends TagsInput.ItemProps, StyledProps {}\n\nexport const TagsInputItem = withContext(TagsInput.Item, \"item\", { baseComponent: true });\n\nexport interface TagsInputItemTextProps extends TagsInput.ItemTextProps, StyledProps {}\n\nexport const TagsInputItemText = withContext(TagsInput.ItemText, \"itemText\", { baseComponent: true });\n\nconst InternalTagsInputLabel = withContext(TagsInput.Label, \"label\");\n\nexport interface TagsInputLabelProps\n  extends Omit<TagsInput.LabelProps, \"color\">, StyledProps, TextProps, RefAttributes<HTMLLabelElement> {}\n\nexport const TagsInputLabel = forwardRef<HTMLLabelElement, TagsInputLabelProps>(({ children, ...props }, ref) => (\n  <InternalTagsInputLabel asChild ref={ref} {...props}>\n    <Label>{children}</Label>\n  </InternalTagsInputLabel>\n));\n"],"mappings":";;;;;;;;;;;;;;AAsGA,MAAM,EAAE,cAAc,gBAAgB,mBAtFd,IAAI;CAC1B,OAAO,iBAAiB,KAAK;CAC7B,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,KAAK;GACL,OAAO;EACT;EACA,SAAS;GACP,SAAS;GACT,KAAK;GACL,YAAY;GACZ,UAAU;EACZ;EACA,MAAM,EACJ,cAAc,UAChB;EACA,aAAa;GACX,SAAS;GACT,KAAK;GACL,cAAc;GACd,kBAAkB;GAClB,oBAAoB;GACpB,QAAQ;GACR,cAAc;GACd,SAAS;GACT,cAAc;GACd,iBAAiB;GACjB,OAAO;GACP,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,WAAW;GACX,QAAQ;IACN,iBAAiB;IACjB,cAAc;IACd,OAAO;IACP,SAAS,EACP,OAAO,eACT;IACA,eAAe;KACb,YAAY;KACZ,oBAAoB;IACtB;GACF;GACA,cAAc;IACZ,iBAAiB;IACjB,cAAc;IACd,eAAe;IACf,cAAc;IACd,OAAO;IACP,SAAS,EACP,OAAO,eACT;IACA,eAAe;KACb,YAAY;KACZ,oBAAoB;IACtB;GACF;EACF;EACA,OAAO,EACL,MAAM,IACR;EACA,mBAAmB;GACjB,eAAe;GACf,QAAQ;GACR,UAAU,EACR,SAAS,eACX;GACA,SAAS;IACP,cAAc;IACd,aAAa;IACb,OAAO;IACP,QAAQ;GACV;EACF;EACA,UAAU,EACR,eAAe,IACjB;EACA,WAAW;GACT,SAAS;GACT,YAAY;EACd;CACF;AACF,CACuE,CAAC;AAMxE,MAAa,gBAAgB,aAAa,UAAU,MAAM,QAAQ,EAChE,eAAe,KACjB,CAAC;AAID,MAAa,wBAAwB,YAAY,UAAU,cAAc,gBAAgB,EAAE,eAAe,KAAK,CAAC;AAIhH,MAAa,mBAAmB,YAAY,UAAU,SAAS,WAAW,EAAE,eAAe,KAAK,CAAC;AAIjG,MAAa,iBAAiB,YAAY,UAAU,OAAO,SAAS,EAAE,eAAe,KAAK,CAAC;AAI3F,MAAa,6BAA6B,YAAY,UAAU,mBAAmB,qBAAqB,EACtG,eAAe,KACjB,CAAC;AAID,MAAa,qBAAqB,YAAY,UAAU,WAAW,aAAa,EAAE,eAAe,KAAK,CAAC;AAIvG,MAAa,uBAAuB,YAAY,UAAU,aAAa,eAAe,EAAE,eAAe,KAAK,CAAC;AAI7G,MAAa,gBAAgB,YAAY,UAAU,MAAM,QAAQ,EAAE,eAAe,KAAK,CAAC;AAIxF,MAAa,oBAAoB,YAAY,UAAU,UAAU,YAAY,EAAE,eAAe,KAAK,CAAC;AAEpG,MAAM,yBAAyB,YAAY,UAAU,OAAO,OAAO;AAKnE,MAAa,iBAAiB,YAAmD,EAAE,UAAU,GAAG,SAAS,QACvG,oBAAC,wBAAD;CAAwB,SAAA;CAAa;CAAK,GAAI;WAC5C,oBAAC,OAAD,EAAQ,SAAgB,CAAA;AACF,CAAA,CACzB"}

package/es/Text.mjs

@@ -1,7 +1,7 @@
-import { ark } from "@ark-ui/react";
 import { css } 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/Text.tsx
 /**

package/es/Text.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Text.mjs","names":[],"sources":["../src/Text.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 } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { ColorToken, FontWeightToken } from \"@ndla/styled-system/tokens\";\nimport type { StyledProps, UtilityValues } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\n\nexport interface TextProps {\n  textStyle?: UtilityValues[\"textStyle\"];\n  fontWeight?: FontWeightToken;\n  color?: ColorToken;\n  srOnly?: boolean;\n}\n\nconst StyledP = styled(ark.p, {}, { baseComponent: true });\n\nexport interface TextComponentProps extends Omit<HTMLArkProps<\"p\">, \"color\">, StyledProps, TextProps {}\n\nexport const Text = forwardRef<HTMLParagraphElement, TextComponentProps>(\n  ({ textStyle = \"body.medium\", fontWeight, color, srOnly, css: cssProp, ...rest }, ref) => (\n    <StyledP css={css.raw({ textStyle, fontWeight, color, srOnly }, cssProp)} ref={ref} {...rest} />\n  ),\n);\n\nconst StyledH1 = styled(ark.h1, {}, { baseComponent: true });\n\nexport interface HeadingComponentProps extends Omit<HTMLArkProps<\"h1\">, \"color\">, StyledProps, TextProps {}\n\nexport const Heading = forwardRef<HTMLHeadingElement, HeadingComponentProps>(\n  ({ textStyle = \"heading.medium\", fontWeight, color, srOnly, css: cssProp, ...rest }, ref) => (\n    <StyledH1 css={css.raw({ textStyle, fontWeight, color, srOnly }, cssProp)} ref={ref} {...rest} />\n  ),\n);\n"],"mappings":";;;;;;;;;;;;;AAsBA,MAAM,UAAU,OAAO,IAAI,GAAG,CAAC,GAAG,EAAE,eAAe,KAAK,CAAC;AAIzD,MAAa,OAAO,YACjB,EAAE,YAAY,eAAe,YAAY,OAAO,QAAQ,KAAK,SAAS,GAAG,QAAQ,QAChF,oBAAC,SAAD;CAAS,KAAK,IAAI,IAAI;EAAE;EAAW;EAAY;EAAO;CAAO,GAAG,OAAO;CAAQ;CAAK,GAAI;AAAO,CAAA,CAEnG;AAEA,MAAM,WAAW,OAAO,IAAI,IAAI,CAAC,GAAG,EAAE,eAAe,KAAK,CAAC;AAI3D,MAAa,UAAU,YACpB,EAAE,YAAY,kBAAkB,YAAY,OAAO,QAAQ,KAAK,SAAS,GAAG,QAAQ,QACnF,oBAAC,UAAD;CAAU,KAAK,IAAI,IAAI;EAAE;EAAW;EAAY;EAAO;CAAO,GAAG,OAAO;CAAQ;CAAK,GAAI;AAAO,CAAA,CAEpG"}
+{"version":3,"file":"Text.mjs","names":[],"sources":["../src/Text.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 } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { ColorToken, FontWeightToken } from \"@ndla/styled-system/tokens\";\nimport type { StyledProps, UtilityValues } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\n\nexport interface TextProps {\n  textStyle?: UtilityValues[\"textStyle\"];\n  fontWeight?: FontWeightToken;\n  color?: ColorToken;\n  srOnly?: boolean;\n}\n\nconst StyledP = styled(ark.p, {}, { baseComponent: true });\n\nexport interface TextComponentProps extends Omit<HTMLArkProps<\"p\">, \"color\">, StyledProps, TextProps {}\n\nexport const Text = forwardRef<HTMLParagraphElement, TextComponentProps>(\n  ({ textStyle = \"body.medium\", fontWeight, color, srOnly, css: cssProp, ...rest }, ref) => (\n    <StyledP css={css.raw({ textStyle, fontWeight, color, srOnly }, cssProp)} ref={ref} {...rest} />\n  ),\n);\n\nconst StyledH1 = styled(ark.h1, {}, { baseComponent: true });\n\nexport interface HeadingComponentProps extends Omit<HTMLArkProps<\"h1\">, \"color\">, StyledProps, TextProps {}\n\nexport const Heading = forwardRef<HTMLHeadingElement, HeadingComponentProps>(\n  ({ textStyle = \"heading.medium\", fontWeight, color, srOnly, css: cssProp, ...rest }, ref) => (\n    <StyledH1 css={css.raw({ textStyle, fontWeight, color, srOnly }, cssProp)} ref={ref} {...rest} />\n  ),\n);\n"],"mappings":";;;;;;;;;;;;;AAsBA,MAAM,UAAU,OAAO,IAAI,GAAG,CAAC,GAAG,EAAE,eAAe,KAAK,CAAC;AAIzD,MAAa,OAAO,YACjB,EAAE,YAAY,eAAe,YAAY,OAAO,QAAQ,KAAK,SAAS,GAAG,QAAQ,QAChF,oBAAC,SAAD;CAAS,KAAK,IAAI,IAAI;EAAE;EAAW;EAAY;EAAO;CAAO,GAAG,OAAO;CAAQ;CAAK,GAAI;AAAO,CAAA,CAEnG;AAEA,MAAM,WAAW,OAAO,IAAI,IAAI,CAAC,GAAG,EAAE,eAAe,KAAK,CAAC;AAI3D,MAAa,UAAU,YACpB,EAAE,YAAY,kBAAkB,YAAY,OAAO,QAAQ,KAAK,SAAS,GAAG,QAAQ,QACnF,oBAAC,UAAD;CAAU,KAAK,IAAI,IAAI;EAAE;EAAW;EAAY;EAAO;CAAO,GAAG,OAAO;CAAQ;CAAK,GAAI;AAAO,CAAA,CAEpG"}

package/es/Toast.mjs

@@ -1,8 +1,8 @@
 import { Text } from "./Text.mjs";
-import { Toast, toastAnatomy } 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 { Toast, toastAnatomy } from "@ark-ui/react/toast";
 //#region src/Toast.tsx
 /**
 * Copyright (c) 2024-present, NDLA.

package/es/Toast.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.mjs","names":[],"sources":["../src/Toast.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 { Toast, toastAnatomy } 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 type { RefAttributes } from \"react\";\nimport { Text, type TextProps } from \"./Text\";\n\nconst toastRecipe = sva({\n  slots: toastAnatomy.keys(),\n  base: {\n    root: {\n      position: \"relative\",\n      borderRadius: \"xsmall\",\n      boxShadow: \"medium\",\n      minWidth: \"20rem\",\n      maxWidth: \"30rem\",\n      height: \"var(--height)\",\n      opacity: \"var(--opacity)\",\n      overflowWrap: \"anywhere\",\n      padding: \"small\",\n      scale: \"var(--scale)\",\n      translate: \"var(--x) var(--y) 0\",\n      willChange: \"translate, scale, opacity, height\",\n      zIndex: \"var(--z-index)\",\n      transitionDuration: \"slow\",\n      transitionProperty: \"translate, scale, opacity, height\",\n      transitionTimingFunction: \"default\",\n      _motionReduce: {\n        transition: \"none\",\n        transitionDuration: \"0s\",\n      },\n    },\n    title: {\n      paddingInlineEnd: \"xxlarge\",\n    },\n    closeTrigger: {\n      position: \"absolute\",\n      top: \"xxsmall\",\n      right: \"xxsmall\",\n    },\n    description: {\n      paddingInlineEnd: \"xxlarge\",\n    },\n  },\n  defaultVariants: {\n    variant: \"light\",\n  },\n  variants: {\n    variant: {\n      light: {\n        root: {\n          background: \"surface.brand.1.moderate\",\n          color: \"text.default\",\n        },\n      },\n      dark: {\n        root: {\n          background: \"surface.brand.1.strong\",\n          color: \"text.onAction\",\n        },\n      },\n    },\n  },\n});\n\nconst { withProvider, withContext } = createStyleContext(toastRecipe);\n\nexport type ToastRootVariantProps = NonNullable<RecipeVariantProps<typeof toastRecipe>>;\n\nexport interface ToastRootProps extends Toast.RootProps, StyledProps, ToastRootVariantProps {}\nexport const ToastRoot = withProvider(Toast.Root, \"root\", { baseComponent: true });\n\nexport const ToastActionTrigger = withContext(Toast.ActionTrigger, \"actionTrigger\", { baseComponent: true });\n\nexport const ToastCloseTrigger = withContext(Toast.CloseTrigger, \"closeTrigger\", { baseComponent: true });\n\nconst InternalToastDescription = withContext(Toast.Description, \"description\");\n\ninterface ToastDescriptionProps\n  extends Omit<Toast.DescriptionProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLDivElement> {}\n\nexport const ToastDescription = ({ textStyle = \"label.medium\", children, ...props }: ToastDescriptionProps) => (\n  <InternalToastDescription asChild>\n    <Text asChild consumeCss textStyle={textStyle} {...props}>\n      <div>{children}</div>\n    </Text>\n  </InternalToastDescription>\n);\n\nconst InternalToastTitle = withContext(Toast.Title, \"title\");\n\ninterface ToastTitleProps\n  extends Omit<Toast.TitleProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLDivElement> {}\n\nexport const ToastTitle = ({\n  textStyle = \"label.medium\",\n  fontWeight = \"semibold\",\n  children,\n  ...props\n}: ToastTitleProps) => (\n  <InternalToastTitle asChild>\n    <Text asChild consumeCss fontWeight={fontWeight} textStyle={textStyle} {...props}>\n      <div>{children}</div>\n    </Text>\n  </InternalToastTitle>\n);\n"],"mappings":";;;;;;;;;;;;;AAyEA,MAAM,EAAE,cAAc,gBAAgB,mBA1DlB,IAAI;CACtB,OAAO,aAAa,KAAK;CACzB,MAAM;EACJ,MAAM;GACJ,UAAU;GACV,cAAc;GACd,WAAW;GACX,UAAU;GACV,UAAU;GACV,QAAQ;GACR,SAAS;GACT,cAAc;GACd,SAAS;GACT,OAAO;GACP,WAAW;GACX,YAAY;GACZ,QAAQ;GACR,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,eAAe;IACb,YAAY;IACZ,oBAAoB;GACtB;EACF;EACA,OAAO,EACL,kBAAkB,UACpB;EACA,cAAc;GACZ,UAAU;GACV,KAAK;GACL,OAAO;EACT;EACA,aAAa,EACX,kBAAkB,UACpB;CACF;CACA,iBAAiB,EACf,SAAS,QACX;CACA,UAAU,EACR,SAAS;EACP,OAAO,EACL,MAAM;GACJ,YAAY;GACZ,OAAO;EACT,EACF;EACA,MAAM,EACJ,MAAM;GACJ,YAAY;GACZ,OAAO;EACT,EACF;CACF,EACF;AACF,CAEmE,CAAC;AAKpE,MAAa,YAAY,aAAa,MAAM,MAAM,QAAQ,EAAE,eAAe,KAAK,CAAC;AAEjF,MAAa,qBAAqB,YAAY,MAAM,eAAe,iBAAiB,EAAE,eAAe,KAAK,CAAC;AAE3G,MAAa,oBAAoB,YAAY,MAAM,cAAc,gBAAgB,EAAE,eAAe,KAAK,CAAC;AAExG,MAAM,2BAA2B,YAAY,MAAM,aAAa,aAAa;AAK7E,MAAa,oBAAoB,EAAE,YAAY,gBAAgB,UAAU,GAAG,YAC1E,oBAAC,0BAAD;CAA0B,SAAA;WACxB,oBAAC,MAAD;EAAM,SAAA;EAAQ,YAAA;EAAsB;EAAW,GAAI;YACjD,oBAAC,OAAD,EAAM,SAAc,CAAA;CAChB,CAAA;AACkB,CAAA;AAG5B,MAAM,qBAAqB,YAAY,MAAM,OAAO,OAAO;AAK3D,MAAa,cAAc,EACzB,YAAY,gBACZ,aAAa,YACb,UACA,GAAG,YAEH,oBAAC,oBAAD;CAAoB,SAAA;WAClB,oBAAC,MAAD;EAAM,SAAA;EAAQ,YAAA;EAAuB;EAAuB;EAAW,GAAI;YACzE,oBAAC,OAAD,EAAM,SAAc,CAAA;CAChB,CAAA;AACY,CAAA"}
+{"version":3,"file":"Toast.mjs","names":[],"sources":["../src/Toast.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 { Toast, toastAnatomy } from \"@ark-ui/react/toast\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps, RecipeVariantProps } from \"@ndla/styled-system/types\";\nimport type { RefAttributes } from \"react\";\nimport { Text, type TextProps } from \"./Text\";\n\nconst toastRecipe = sva({\n  slots: toastAnatomy.keys(),\n  base: {\n    root: {\n      position: \"relative\",\n      borderRadius: \"xsmall\",\n      boxShadow: \"medium\",\n      minWidth: \"20rem\",\n      maxWidth: \"30rem\",\n      height: \"var(--height)\",\n      opacity: \"var(--opacity)\",\n      overflowWrap: \"anywhere\",\n      padding: \"small\",\n      scale: \"var(--scale)\",\n      translate: \"var(--x) var(--y) 0\",\n      willChange: \"translate, scale, opacity, height\",\n      zIndex: \"var(--z-index)\",\n      transitionDuration: \"slow\",\n      transitionProperty: \"translate, scale, opacity, height\",\n      transitionTimingFunction: \"default\",\n      _motionReduce: {\n        transition: \"none\",\n        transitionDuration: \"0s\",\n      },\n    },\n    title: {\n      paddingInlineEnd: \"xxlarge\",\n    },\n    closeTrigger: {\n      position: \"absolute\",\n      top: \"xxsmall\",\n      right: \"xxsmall\",\n    },\n    description: {\n      paddingInlineEnd: \"xxlarge\",\n    },\n  },\n  defaultVariants: {\n    variant: \"light\",\n  },\n  variants: {\n    variant: {\n      light: {\n        root: {\n          background: \"surface.brand.1.moderate\",\n          color: \"text.default\",\n        },\n      },\n      dark: {\n        root: {\n          background: \"surface.brand.1.strong\",\n          color: \"text.onAction\",\n        },\n      },\n    },\n  },\n});\n\nconst { withProvider, withContext } = createStyleContext(toastRecipe);\n\nexport type ToastRootVariantProps = NonNullable<RecipeVariantProps<typeof toastRecipe>>;\n\nexport interface ToastRootProps extends Toast.RootProps, StyledProps, ToastRootVariantProps {}\nexport const ToastRoot = withProvider(Toast.Root, \"root\", { baseComponent: true });\n\nexport const ToastActionTrigger = withContext(Toast.ActionTrigger, \"actionTrigger\", { baseComponent: true });\n\nexport const ToastCloseTrigger = withContext(Toast.CloseTrigger, \"closeTrigger\", { baseComponent: true });\n\nconst InternalToastDescription = withContext(Toast.Description, \"description\");\n\ninterface ToastDescriptionProps\n  extends Omit<Toast.DescriptionProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLDivElement> {}\n\nexport const ToastDescription = ({ textStyle = \"label.medium\", children, ...props }: ToastDescriptionProps) => (\n  <InternalToastDescription asChild>\n    <Text asChild consumeCss textStyle={textStyle} {...props}>\n      <div>{children}</div>\n    </Text>\n  </InternalToastDescription>\n);\n\nconst InternalToastTitle = withContext(Toast.Title, \"title\");\n\ninterface ToastTitleProps\n  extends Omit<Toast.TitleProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLDivElement> {}\n\nexport const ToastTitle = ({\n  textStyle = \"label.medium\",\n  fontWeight = \"semibold\",\n  children,\n  ...props\n}: ToastTitleProps) => (\n  <InternalToastTitle asChild>\n    <Text asChild consumeCss fontWeight={fontWeight} textStyle={textStyle} {...props}>\n      <div>{children}</div>\n    </Text>\n  </InternalToastTitle>\n);\n"],"mappings":";;;;;;;;;;;;;AAyEA,MAAM,EAAE,cAAc,gBAAgB,mBA1DlB,IAAI;CACtB,OAAO,aAAa,KAAK;CACzB,MAAM;EACJ,MAAM;GACJ,UAAU;GACV,cAAc;GACd,WAAW;GACX,UAAU;GACV,UAAU;GACV,QAAQ;GACR,SAAS;GACT,cAAc;GACd,SAAS;GACT,OAAO;GACP,WAAW;GACX,YAAY;GACZ,QAAQ;GACR,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,eAAe;IACb,YAAY;IACZ,oBAAoB;GACtB;EACF;EACA,OAAO,EACL,kBAAkB,UACpB;EACA,cAAc;GACZ,UAAU;GACV,KAAK;GACL,OAAO;EACT;EACA,aAAa,EACX,kBAAkB,UACpB;CACF;CACA,iBAAiB,EACf,SAAS,QACX;CACA,UAAU,EACR,SAAS;EACP,OAAO,EACL,MAAM;GACJ,YAAY;GACZ,OAAO;EACT,EACF;EACA,MAAM,EACJ,MAAM;GACJ,YAAY;GACZ,OAAO;EACT,EACF;CACF,EACF;AACF,CAEmE,CAAC;AAKpE,MAAa,YAAY,aAAa,MAAM,MAAM,QAAQ,EAAE,eAAe,KAAK,CAAC;AAEjF,MAAa,qBAAqB,YAAY,MAAM,eAAe,iBAAiB,EAAE,eAAe,KAAK,CAAC;AAE3G,MAAa,oBAAoB,YAAY,MAAM,cAAc,gBAAgB,EAAE,eAAe,KAAK,CAAC;AAExG,MAAM,2BAA2B,YAAY,MAAM,aAAa,aAAa;AAK7E,MAAa,oBAAoB,EAAE,YAAY,gBAAgB,UAAU,GAAG,YAC1E,oBAAC,0BAAD;CAA0B,SAAA;WACxB,oBAAC,MAAD;EAAM,SAAA;EAAQ,YAAA;EAAsB;EAAW,GAAI;YACjD,oBAAC,OAAD,EAAM,SAAc,CAAA;CAChB,CAAA;AACkB,CAAA;AAG5B,MAAM,qBAAqB,YAAY,MAAM,OAAO,OAAO;AAK3D,MAAa,cAAc,EACzB,YAAY,gBACZ,aAAa,YACb,UACA,GAAG,YAEH,oBAAC,oBAAD;CAAoB,SAAA;WAClB,oBAAC,MAAD;EAAM,SAAA;EAAQ,YAAA;EAAuB;EAAuB;EAAW,GAAI;YACzE,oBAAC,OAAD,EAAM,SAAc,CAAA;CAChB,CAAA;AACY,CAAA"}

package/es/ToggleGroup.mjs

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

package/es/ToggleGroup.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroup.mjs","names":[],"sources":["../src/ToggleGroup.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 { toggleGroupAnatomy, ToggleGroup } from \"@ark-ui/react\";\nimport { type RecipeVariantProps, sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\n\nconst toggleGroupRecipe = sva({\n  slots: toggleGroupAnatomy.keys(),\n  base: {\n    root: {\n      display: \"flex\",\n      flexDirection: \"row\",\n      gap: \"4xsmall\",\n    },\n  },\n});\n\nconst { withProvider, withContext } = createStyleContext(toggleGroupRecipe);\n\nexport type ToggleGroupVariantProps = NonNullable<RecipeVariantProps<typeof toggleGroupRecipe>>;\nexport interface ToggleGroupRootProps extends ToggleGroup.RootProps, StyledProps, ToggleGroupVariantProps {}\n\nexport const ToggleGroupRoot = withProvider(ToggleGroup.Root, \"root\", { baseComponent: true });\n\nexport interface ToggleGroupItemProps extends ToggleGroup.ItemProps, StyledProps {}\n\nexport const ToggleGroupItem = withContext(ToggleGroup.Item, \"item\", { baseComponent: true });\n"],"mappings":";;;;;;;;;;;AAwBA,MAAM,EAAE,cAAc,gBAAgB,mBAXZ,IAAI;CAC5B,OAAO,mBAAmB,KAAK;CAC/B,MAAM,EACJ,MAAM;EACJ,SAAS;EACT,eAAe;EACf,KAAK;CACP,EACF;AACF,CAEyE,CAAC;AAK1E,MAAa,kBAAkB,aAAa,YAAY,MAAM,QAAQ,EAAE,eAAe,KAAK,CAAC;AAI7F,MAAa,kBAAkB,YAAY,YAAY,MAAM,QAAQ,EAAE,eAAe,KAAK,CAAC"}
+{"version":3,"file":"ToggleGroup.mjs","names":[],"sources":["../src/ToggleGroup.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 { toggleGroupAnatomy, ToggleGroup } from \"@ark-ui/react/toggle-group\";\nimport { type RecipeVariantProps, sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\n\nconst toggleGroupRecipe = sva({\n  slots: toggleGroupAnatomy.keys(),\n  base: {\n    root: {\n      display: \"flex\",\n      flexDirection: \"row\",\n      gap: \"4xsmall\",\n    },\n  },\n});\n\nconst { withProvider, withContext } = createStyleContext(toggleGroupRecipe);\n\nexport type ToggleGroupVariantProps = NonNullable<RecipeVariantProps<typeof toggleGroupRecipe>>;\nexport interface ToggleGroupRootProps extends ToggleGroup.RootProps, StyledProps, ToggleGroupVariantProps {}\n\nexport const ToggleGroupRoot = withProvider(ToggleGroup.Root, \"root\", { baseComponent: true });\n\nexport interface ToggleGroupItemProps extends ToggleGroup.ItemProps, StyledProps {}\n\nexport const ToggleGroupItem = withContext(ToggleGroup.Item, \"item\", { baseComponent: true });\n"],"mappings":";;;;;;;;;;;AAwBA,MAAM,EAAE,cAAc,gBAAgB,mBAXZ,IAAI;CAC5B,OAAO,mBAAmB,KAAK;CAC/B,MAAM,EACJ,MAAM;EACJ,SAAS;EACT,eAAe;EACf,KAAK;CACP,EACF;AACF,CAEyE,CAAC;AAK1E,MAAa,kBAAkB,aAAa,YAAY,MAAM,QAAQ,EAAE,eAAe,KAAK,CAAC;AAI7F,MAAa,kBAAkB,YAAY,YAAY,MAAM,QAAQ,EAAE,eAAe,KAAK,CAAC"}

package/es/Tooltip.mjs

@@ -1,8 +1,8 @@
-import { Tooltip, tooltipAnatomy } from "@ark-ui/react";
 import { sva } from "@ndla/styled-system/css";
 import { createStyleContext } from "@ndla/styled-system/jsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
+import { Tooltip, tooltipAnatomy } from "@ark-ui/react/tooltip";
 //#region src/Tooltip.tsx
 /**
 * Copyright (c) 2024-present, NDLA.

package/es/Tooltip.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.mjs","names":[],"sources":["../src/Tooltip.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 { Tooltip, tooltipAnatomy } from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\n\nconst tooltipRecipe = sva({\n  slots: tooltipAnatomy.keys(),\n  base: {\n    content: {\n      background: \"surface.action\",\n      textStyle: \"label.small\",\n      color: \"text.onAction\",\n      paddingInline: \"xxsmall\",\n      paddingBlock: \"4xsmall\",\n      \"--arrow-size\": \"spacing.xxsmall\",\n      \"--arrow-background\": \"colors.surface.action\",\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  },\n});\n\nconst { withRootProvider, withContext } = createStyleContext(tooltipRecipe);\n\nexport type TooltipRootProps = Tooltip.RootProps;\nexport const TooltipRoot = withRootProvider(Tooltip.Root);\n\nexport const TooltipArrow = withContext(Tooltip.Arrow, \"arrow\", { baseComponent: true });\n\nexport const TooltipArrowTip = withContext(Tooltip.ArrowTip, \"arrowTip\", { baseComponent: true });\n\nexport const TooltipContentStandalone = withContext(Tooltip.Content, \"content\", { baseComponent: true });\n\ninterface TooltipContentProps extends Tooltip.ContentProps, StyledProps {}\n\nexport const TooltipContent = forwardRef<HTMLDivElement, TooltipContentProps>(({ children, ...props }, ref) => (\n  <TooltipPositioner>\n    <TooltipContentStandalone {...props} ref={ref}>\n      <TooltipArrow>\n        <TooltipArrowTip />\n      </TooltipArrow>\n      {children}\n    </TooltipContentStandalone>\n  </TooltipPositioner>\n));\n\nexport const TooltipPositioner = withContext(Tooltip.Positioner, \"positioner\", { baseComponent: true });\n\nexport const TooltipTrigger = withContext(Tooltip.Trigger, \"trigger\", { baseComponent: true });\n"],"mappings":";;;;;;;;;;;;;AAyCA,MAAM,EAAE,kBAAkB,gBAAgB,mBA3BpB,IAAI;CACxB,OAAO,eAAe,KAAK;CAC3B,MAAM,EACJ,SAAS;EACP,YAAY;EACZ,WAAW;EACX,OAAO;EACP,eAAe;EACf,cAAc;EACd,gBAAgB;EAChB,sBAAsB;EACtB,OAAO;GACL,WAAW;GACX,eAAe,EACb,WAAW,OACb;EACF;EACA,SAAS;GACP,WAAW;GACX,eAAe,EACb,WAAW,OACb;EACF;CACF,EACF;AACF,CAEyE,CAAC;AAG1E,MAAa,cAAc,iBAAiB,QAAQ,IAAI;AAExD,MAAa,eAAe,YAAY,QAAQ,OAAO,SAAS,EAAE,eAAe,KAAK,CAAC;AAEvF,MAAa,kBAAkB,YAAY,QAAQ,UAAU,YAAY,EAAE,eAAe,KAAK,CAAC;AAEhG,MAAa,2BAA2B,YAAY,QAAQ,SAAS,WAAW,EAAE,eAAe,KAAK,CAAC;AAIvG,MAAa,iBAAiB,YAAiD,EAAE,UAAU,GAAG,SAAS,QACrG,oBAAC,mBAAD,EAAA,UACE,qBAAC,0BAAD;CAA0B,GAAI;CAAY;WAA1C,CACE,oBAAC,cAAD,EAAA,UACE,oBAAC,iBAAD,CAAkB,CAAA,EACN,CAAA,GACb,QACuB;GACT,CAAA,CACpB;AAED,MAAa,oBAAoB,YAAY,QAAQ,YAAY,cAAc,EAAE,eAAe,KAAK,CAAC;AAEtG,MAAa,iBAAiB,YAAY,QAAQ,SAAS,WAAW,EAAE,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Tooltip.mjs","names":[],"sources":["../src/Tooltip.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 { Tooltip, tooltipAnatomy } from \"@ark-ui/react/tooltip\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\n\nconst tooltipRecipe = sva({\n  slots: tooltipAnatomy.keys(),\n  base: {\n    content: {\n      background: \"surface.action\",\n      textStyle: \"label.small\",\n      color: \"text.onAction\",\n      paddingInline: \"xxsmall\",\n      paddingBlock: \"4xsmall\",\n      \"--arrow-size\": \"spacing.xxsmall\",\n      \"--arrow-background\": \"colors.surface.action\",\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  },\n});\n\nconst { withRootProvider, withContext } = createStyleContext(tooltipRecipe);\n\nexport type TooltipRootProps = Tooltip.RootProps;\nexport const TooltipRoot = withRootProvider(Tooltip.Root);\n\nexport const TooltipArrow = withContext(Tooltip.Arrow, \"arrow\", { baseComponent: true });\n\nexport const TooltipArrowTip = withContext(Tooltip.ArrowTip, \"arrowTip\", { baseComponent: true });\n\nexport const TooltipContentStandalone = withContext(Tooltip.Content, \"content\", { baseComponent: true });\n\ninterface TooltipContentProps extends Tooltip.ContentProps, StyledProps {}\n\nexport const TooltipContent = forwardRef<HTMLDivElement, TooltipContentProps>(({ children, ...props }, ref) => (\n  <TooltipPositioner>\n    <TooltipContentStandalone {...props} ref={ref}>\n      <TooltipArrow>\n        <TooltipArrowTip />\n      </TooltipArrow>\n      {children}\n    </TooltipContentStandalone>\n  </TooltipPositioner>\n));\n\nexport const TooltipPositioner = withContext(Tooltip.Positioner, \"positioner\", { baseComponent: true });\n\nexport const TooltipTrigger = withContext(Tooltip.Trigger, \"trigger\", { baseComponent: true });\n"],"mappings":";;;;;;;;;;;;;AAyCA,MAAM,EAAE,kBAAkB,gBAAgB,mBA3BpB,IAAI;CACxB,OAAO,eAAe,KAAK;CAC3B,MAAM,EACJ,SAAS;EACP,YAAY;EACZ,WAAW;EACX,OAAO;EACP,eAAe;EACf,cAAc;EACd,gBAAgB;EAChB,sBAAsB;EACtB,OAAO;GACL,WAAW;GACX,eAAe,EACb,WAAW,OACb;EACF;EACA,SAAS;GACP,WAAW;GACX,eAAe,EACb,WAAW,OACb;EACF;CACF,EACF;AACF,CAEyE,CAAC;AAG1E,MAAa,cAAc,iBAAiB,QAAQ,IAAI;AAExD,MAAa,eAAe,YAAY,QAAQ,OAAO,SAAS,EAAE,eAAe,KAAK,CAAC;AAEvF,MAAa,kBAAkB,YAAY,QAAQ,UAAU,YAAY,EAAE,eAAe,KAAK,CAAC;AAEhG,MAAa,2BAA2B,YAAY,QAAQ,SAAS,WAAW,EAAE,eAAe,KAAK,CAAC;AAIvG,MAAa,iBAAiB,YAAiD,EAAE,UAAU,GAAG,SAAS,QACrG,oBAAC,mBAAD,EAAA,UACE,qBAAC,0BAAD;CAA0B,GAAI;CAAY;WAA1C,CACE,oBAAC,cAAD,EAAA,UACE,oBAAC,iBAAD,CAAkB,CAAA,EACN,CAAA,GACb,QACuB;GACT,CAAA,CACpB;AAED,MAAa,oBAAoB,YAAY,QAAQ,YAAY,cAAc,EAAE,eAAe,KAAK,CAAC;AAEtG,MAAa,iBAAiB,YAAY,QAAQ,SAAS,WAAW,EAAE,eAAe,KAAK,CAAC"}

package/es/Tree/Tree.mjs

@@ -1,9 +1,9 @@
 import { Text } from "../Text.mjs";
-import { TreeView, createTreeCollection, treeViewAnatomy, useTreeView } 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 { TreeView, createTreeCollection, treeViewAnatomy, useTreeView } from "@ark-ui/react/tree-view";
 //#region src/Tree/Tree.tsx
 /**
 * Copyright (c) 2024-present, NDLA.

package/es/Tree/Tree.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tree.mjs","names":["createTreeCollection","_createTreeCollection","useTreeView","_useTreeView"],"sources":["../../src/Tree/Tree.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 {\n  TreeView,\n  treeViewAnatomy,\n  type TreeNode,\n  createTreeCollection as _createTreeCollection,\n  useTreeView as _useTreeView,\n} 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 { Text, type TextProps } from \"../Text\";\n\nconst treeRecipe = sva({\n  slots: treeViewAnatomy.keys(),\n  base: {\n    root: {\n      width: \"100%\",\n    },\n    branch: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"3xsmall\",\n    },\n    branchContent: {\n      position: \"relative\",\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"3xsmall\",\n    },\n    branchControl: {\n      display: \"flex\",\n      alignItems: \"center\",\n      gap: \"3xsmall\",\n      borderRadius: \"xsmall\",\n      height: \"xxlarge\",\n      cursor: \"pointer\",\n      paddingInlineStart: \"calc((var(--depth) - 1) * token(spacing.medium))\",\n      paddingInlineEnd: \"xsmall\",\n      paddingBlock: \"xsmall\",\n      transitionDuration: \"normal\",\n      transitionProperty: \"background, color\",\n      transitionTimingFunction: \"default\",\n      _hover: {\n        background: \"surface.hover\",\n      },\n      _selected: {\n        background: \"surface.selected\",\n      },\n    },\n    branchIndicator: {\n      transformOrigin: \"center\",\n      transitionDuration: \"normal\",\n      transitionProperty: \"transform\",\n      transitionTimingFunction: \"default\",\n      _open: {\n        transform: \"rotate(90deg)\",\n      },\n    },\n    item: {\n      display: \"flex\",\n      cursor: \"pointer\",\n      position: \"relative\",\n      borderRadius: \"xsmall\",\n      justifyContent: \"space-between\",\n      paddingBlock: \"xsmall\",\n      paddingInlineEnd: \"xsmall\",\n      paddingInlineStart:\n        \"calc(((var(--depth) - 1) * token(spacing.medium)) + token(spacing.xxlarge) + token(spacing.3xsmall))\",\n      transitionDuration: \"normal\",\n      transitionProperty: \"background, color\",\n      transitionTimingFunction: \"default\",\n      height: \"xxlarge\",\n      alignItems: \"center\",\n\n      _hover: {\n        background: \"surface.hover\",\n      },\n      _selected: {\n        background: \"surface.selected\",\n        _hover: {\n          background: \"surface.hover\",\n        },\n      },\n    },\n    itemIndicator: {\n      color: \"icon.strong\",\n    },\n    itemText: {\n      overflow: \"hidden\",\n      textOverflow: \"ellipsis\",\n    },\n    branchText: {\n      overflow: \"hidden\",\n      textOverflow: \"ellipsis\",\n    },\n    tree: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"3xsmall\",\n    },\n  },\n});\n\nconst { withProvider, withContext } = createStyleContext(treeRecipe);\n\nexport interface TreeRootProps<T extends TreeNode = TreeNode>\n  extends TreeView.RootProps<T>, StyledProps, RefAttributes<HTMLDivElement> {}\n\nconst InternalTreeRoot = withProvider<ElementType<TreeRootProps>>(TreeView.Root, \"root\", { baseComponent: true });\n\nexport const TreeRoot = <T extends TreeNode = TreeNode>(props: TreeRootProps<T>) => <InternalTreeRoot {...props} />;\n\nexport interface TreeRootProviderProps<T extends TreeNode = TreeNode>\n  extends TreeView.RootProviderProps<T>, StyledProps {}\n\nconst InternalTreeRootProvider = withProvider<ElementType<TreeRootProviderProps>>(TreeView.RootProvider, \"root\", {\n  baseComponent: true,\n});\n\nexport const TreeRootProvider = <T extends TreeNode = TreeNode>(props: TreeRootProviderProps<T>) => (\n  <InternalTreeRootProvider {...props} />\n);\n\nexport const TreeBranchContent = withContext(TreeView.BranchContent, \"branchContent\", { baseComponent: true });\n\nexport const TreeBranchControl = withContext(TreeView.BranchControl, \"branchControl\", { baseComponent: true });\n\nexport const TreeBranchIndicator = withContext(TreeView.BranchIndicator, \"branchIndicator\", { baseComponent: true });\n\nexport const TreeBranch = withContext(TreeView.Branch, \"branch\", {\n  baseComponent: true,\n});\n\nconst InternalTreeBranchText = withContext(TreeView.BranchText, \"branchText\", { baseComponent: true });\n\ninterface TreeBranchTextProps\n  extends Omit<TreeView.BranchTextProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLDivElement> {}\n\nexport const TreeBranchText = forwardRef<HTMLDivElement, TreeBranchTextProps>(\n  ({ textStyle = \"label.medium\", fontWeight = \"bold\", children, ...props }, ref) => (\n    <InternalTreeBranchText asChild {...props} ref={ref}>\n      <Text textStyle={textStyle} fontWeight={fontWeight} asChild consumeCss>\n        <div>{children}</div>\n      </Text>\n    </InternalTreeBranchText>\n  ),\n);\n\nexport const TreeBranchTrigger = withContext(TreeView.BranchTrigger, \"branchTrigger\", { baseComponent: true });\n\nexport const TreeItemIndicator = withContext(TreeView.ItemIndicator, \"itemIndicator\", { baseComponent: true });\n\nexport const TreeItem = withContext(TreeView.Item, \"item\", { baseComponent: true });\n\nconst InternalTreeItemText = withContext(TreeView.ItemText, \"itemText\", { baseComponent: true });\n\ninterface TreeItemTextProps\n  extends Omit<TreeView.ItemTextProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLDivElement> {}\n\nexport const TreeItemText = forwardRef<HTMLDivElement, TreeItemTextProps>(\n  ({ textStyle = \"label.medium\", fontWeight = \"bold\", children, ...props }, ref) => (\n    <InternalTreeItemText asChild {...props} ref={ref}>\n      <Text textStyle={textStyle} fontWeight={fontWeight} asChild consumeCss>\n        <div>{children}</div>\n      </Text>\n    </InternalTreeItemText>\n  ),\n);\n\nconst InternalTreeLabel = withContext(TreeView.Label, \"label\", { baseComponent: true });\n\ninterface TreeLabelProps\n  extends Omit<TreeView.LabelProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLDivElement> {}\n\nexport const TreeLabel = forwardRef<HTMLDivElement, TreeLabelProps>(\n  ({ children, textStyle = \"label.medium\", fontWeight = \"bold\", ...props }, ref) => (\n    <InternalTreeLabel asChild {...props} ref={ref}>\n      <Text textStyle={textStyle} fontWeight={fontWeight} asChild consumeCss>\n        <div>{children}</div>\n      </Text>\n    </InternalTreeLabel>\n  ),\n);\n\nexport const Tree = withContext(TreeView.Tree, \"tree\", { baseComponent: true });\n\nexport const createTreeCollection = _createTreeCollection;\n\nexport const TreeNodeProvider = TreeView.NodeProvider;\nexport const TreeNodeContext = TreeView.NodeContext;\nexport const useTreeView = _useTreeView;\n"],"mappings":"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"}
+{"version":3,"file":"Tree.mjs","names":["createTreeCollection","_createTreeCollection","useTreeView","_useTreeView"],"sources":["../../src/Tree/Tree.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 {\n  TreeView,\n  treeViewAnatomy,\n  type TreeNode,\n  createTreeCollection as _createTreeCollection,\n  useTreeView as _useTreeView,\n} from \"@ark-ui/react/tree-view\";\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 { Text, type TextProps } from \"../Text\";\n\nconst treeRecipe = sva({\n  slots: treeViewAnatomy.keys(),\n  base: {\n    root: {\n      width: \"100%\",\n    },\n    branch: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"3xsmall\",\n    },\n    branchContent: {\n      position: \"relative\",\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"3xsmall\",\n    },\n    branchControl: {\n      display: \"flex\",\n      alignItems: \"center\",\n      gap: \"3xsmall\",\n      borderRadius: \"xsmall\",\n      height: \"xxlarge\",\n      cursor: \"pointer\",\n      paddingInlineStart: \"calc((var(--depth) - 1) * token(spacing.medium))\",\n      paddingInlineEnd: \"xsmall\",\n      paddingBlock: \"xsmall\",\n      transitionDuration: \"normal\",\n      transitionProperty: \"background, color\",\n      transitionTimingFunction: \"default\",\n      _hover: {\n        background: \"surface.hover\",\n      },\n      _selected: {\n        background: \"surface.selected\",\n      },\n    },\n    branchIndicator: {\n      transformOrigin: \"center\",\n      transitionDuration: \"normal\",\n      transitionProperty: \"transform\",\n      transitionTimingFunction: \"default\",\n      _open: {\n        transform: \"rotate(90deg)\",\n      },\n    },\n    item: {\n      display: \"flex\",\n      cursor: \"pointer\",\n      position: \"relative\",\n      borderRadius: \"xsmall\",\n      justifyContent: \"space-between\",\n      paddingBlock: \"xsmall\",\n      paddingInlineEnd: \"xsmall\",\n      paddingInlineStart:\n        \"calc(((var(--depth) - 1) * token(spacing.medium)) + token(spacing.xxlarge) + token(spacing.3xsmall))\",\n      transitionDuration: \"normal\",\n      transitionProperty: \"background, color\",\n      transitionTimingFunction: \"default\",\n      height: \"xxlarge\",\n      alignItems: \"center\",\n\n      _hover: {\n        background: \"surface.hover\",\n      },\n      _selected: {\n        background: \"surface.selected\",\n        _hover: {\n          background: \"surface.hover\",\n        },\n      },\n    },\n    itemIndicator: {\n      color: \"icon.strong\",\n    },\n    itemText: {\n      overflow: \"hidden\",\n      textOverflow: \"ellipsis\",\n    },\n    branchText: {\n      overflow: \"hidden\",\n      textOverflow: \"ellipsis\",\n    },\n    tree: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"3xsmall\",\n    },\n  },\n});\n\nconst { withProvider, withContext } = createStyleContext(treeRecipe);\n\nexport interface TreeRootProps<T extends TreeNode = TreeNode>\n  extends TreeView.RootProps<T>, StyledProps, RefAttributes<HTMLDivElement> {}\n\nconst InternalTreeRoot = withProvider<ElementType<TreeRootProps>>(TreeView.Root, \"root\", { baseComponent: true });\n\nexport const TreeRoot = <T extends TreeNode = TreeNode>(props: TreeRootProps<T>) => <InternalTreeRoot {...props} />;\n\nexport interface TreeRootProviderProps<T extends TreeNode = TreeNode>\n  extends TreeView.RootProviderProps<T>, StyledProps {}\n\nconst InternalTreeRootProvider = withProvider<ElementType<TreeRootProviderProps>>(TreeView.RootProvider, \"root\", {\n  baseComponent: true,\n});\n\nexport const TreeRootProvider = <T extends TreeNode = TreeNode>(props: TreeRootProviderProps<T>) => (\n  <InternalTreeRootProvider {...props} />\n);\n\nexport const TreeBranchContent = withContext(TreeView.BranchContent, \"branchContent\", { baseComponent: true });\n\nexport const TreeBranchControl = withContext(TreeView.BranchControl, \"branchControl\", { baseComponent: true });\n\nexport const TreeBranchIndicator = withContext(TreeView.BranchIndicator, \"branchIndicator\", { baseComponent: true });\n\nexport const TreeBranch = withContext(TreeView.Branch, \"branch\", {\n  baseComponent: true,\n});\n\nconst InternalTreeBranchText = withContext(TreeView.BranchText, \"branchText\", { baseComponent: true });\n\ninterface TreeBranchTextProps\n  extends Omit<TreeView.BranchTextProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLDivElement> {}\n\nexport const TreeBranchText = forwardRef<HTMLDivElement, TreeBranchTextProps>(\n  ({ textStyle = \"label.medium\", fontWeight = \"bold\", children, ...props }, ref) => (\n    <InternalTreeBranchText asChild {...props} ref={ref}>\n      <Text textStyle={textStyle} fontWeight={fontWeight} asChild consumeCss>\n        <div>{children}</div>\n      </Text>\n    </InternalTreeBranchText>\n  ),\n);\n\nexport const TreeBranchTrigger = withContext(TreeView.BranchTrigger, \"branchTrigger\", { baseComponent: true });\n\nexport const TreeItemIndicator = withContext(TreeView.ItemIndicator, \"itemIndicator\", { baseComponent: true });\n\nexport const TreeItem = withContext(TreeView.Item, \"item\", { baseComponent: true });\n\nconst InternalTreeItemText = withContext(TreeView.ItemText, \"itemText\", { baseComponent: true });\n\ninterface TreeItemTextProps\n  extends Omit<TreeView.ItemTextProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLDivElement> {}\n\nexport const TreeItemText = forwardRef<HTMLDivElement, TreeItemTextProps>(\n  ({ textStyle = \"label.medium\", fontWeight = \"bold\", children, ...props }, ref) => (\n    <InternalTreeItemText asChild {...props} ref={ref}>\n      <Text textStyle={textStyle} fontWeight={fontWeight} asChild consumeCss>\n        <div>{children}</div>\n      </Text>\n    </InternalTreeItemText>\n  ),\n);\n\nconst InternalTreeLabel = withContext(TreeView.Label, \"label\", { baseComponent: true });\n\ninterface TreeLabelProps\n  extends Omit<TreeView.LabelProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLDivElement> {}\n\nexport const TreeLabel = forwardRef<HTMLDivElement, TreeLabelProps>(\n  ({ children, textStyle = \"label.medium\", fontWeight = \"bold\", ...props }, ref) => (\n    <InternalTreeLabel asChild {...props} ref={ref}>\n      <Text textStyle={textStyle} fontWeight={fontWeight} asChild consumeCss>\n        <div>{children}</div>\n      </Text>\n    </InternalTreeLabel>\n  ),\n);\n\nexport const Tree = withContext(TreeView.Tree, \"tree\", { baseComponent: true });\n\nexport const createTreeCollection = _createTreeCollection;\n\nexport const TreeNodeProvider = TreeView.NodeProvider;\nexport const TreeNodeContext = TreeView.NodeContext;\nexport const useTreeView = _useTreeView;\n"],"mappings":"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"}

package/es/index.mjs

@@ -32,6 +32,7 @@ import { NdlaLogoEn, NdlaLogoNb, NdlaLogoText } from "./NdlaLogo.mjs";
 import { PaginationContext, PaginationEllipsis, PaginationItem, PaginationNextTrigger, PaginationPrevTrigger, PaginationRoot } from "./Pagination.mjs";
 import { PopoverAnchor, PopoverArrow, PopoverArrowStandalone, PopoverArrowTip, PopoverCloseTrigger, PopoverContent, PopoverContentStandalone, PopoverDescription, PopoverIndicator, PopoverPositioner, PopoverRoot, PopoverRootProvider, PopoverTitle, PopoverTrigger, usePopover } from "./Popover.mjs";
 import { RadioGroupIndicator, RadioGroupItem, RadioGroupItemControl, RadioGroupItemHiddenInput, RadioGroupItemText, RadioGroupLabel, RadioGroupRoot } from "./RadioGroup.mjs";
+import { RainbowSpinner } from "./RainbowSpinner.mjs";
 import { SelectClearTrigger, SelectContent, SelectContentStandalone, SelectControl, SelectHiddenSelect, SelectIndicator, SelectItem, SelectItemGroup, SelectItemGroupLabel, SelectItemIndicator, SelectItemText, SelectLabel, SelectList, SelectPositioner, SelectRoot, SelectTrigger, SelectValueText } from "./Select.mjs";
 import { Skeleton } from "./Skeleton.mjs";
 import { SliderControl, SliderHiddenInput, SliderLabel, SliderRange, SliderRoot, SliderThumb, SliderTrack } from "./Slider.mjs";
@@ -42,5 +43,5 @@ import { TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger } from "./T
 import { ToastActionTrigger, ToastCloseTrigger, ToastDescription, ToastRoot, ToastTitle } from "./Toast.mjs";
 import { TooltipArrow, TooltipArrowTip, TooltipContent, TooltipContentStandalone, TooltipPositioner, TooltipRoot, TooltipTrigger } from "./Tooltip.mjs";
 import { Tree, TreeBranch, TreeBranchContent, TreeBranchControl, TreeBranchIndicator, TreeBranchText, TreeBranchTrigger, TreeItem, TreeItemIndicator, TreeItemText, TreeLabel, TreeNodeContext, TreeNodeProvider, TreeRoot, TreeRootProvider, createTreeCollection, useTreeView } from "./Tree/Tree.mjs";
-import { useFieldContext } from "@ark-ui/react";
-export { AccordionItem, AccordionItemContent, AccordionItemIndicator, AccordionItemTrigger, AccordionRoot, Badge, BleedPageContent, BlockQuote, Button, CardContent, CardHeading, CardImage, CardRoot, CheckboxControl, CheckboxGroup, CheckboxHiddenInput, CheckboxIndicator, CheckboxLabel, CheckboxRoot, ComboboxClearTrigger, ComboboxContent, ComboboxContentStandalone, ComboboxControl, ComboboxInput, ComboboxItem, ComboboxItemGroup, ComboboxItemGroupLabel, ComboboxItemIndicator, ComboboxItemText, ComboboxLabel, ComboboxList, ComboboxPositioner, ComboboxRoot, ComboboxTrigger, DatePickerClearTrigger, DatePickerContent, DatePickerContext, DatePickerControl, DatePickerInput, DatePickerLabel, DatePickerMonthSelect, DatePickerNextTrigger, DatePickerPositioner, DatePickerPresetTrigger, DatePickerPrevTrigger, DatePickerRangeText, DatePickerRoot, DatePickerStandaloneContent, DatePickerTable, DatePickerTableBody, DatePickerTableCell, DatePickerTableCellTrigger, DatePickerTableHead, DatePickerTableHeader, DatePickerTableRow, DatePickerTrigger, DatePickerView, DatePickerViewControl, DatePickerViewTrigger, DatePickerYearSelect, DefinitionList, DialogBackdrop, DialogBody, DialogCloseTrigger, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogPositioner, DialogRoot, DialogRootProvider, DialogStandaloneContent, DialogTitle, DialogTrigger, ErrorMessageActions, ErrorMessageContent, ErrorMessageDescription, ErrorMessageRoot, ErrorMessageTitle, ExpandableBox, ExpandableBoxSummary, FieldErrorMessage, FieldHelper, FieldInput, FieldLabel, FieldRoot, FieldTextArea, FieldsetErrorText, FieldsetHelper, FieldsetLegend, FieldsetRoot, Figure, FileUploadContext, FileUploadDropzone, FileUploadHiddenInput, FileUploadItem, FileUploadItemDeleteTrigger, FileUploadItemGroup, FileUploadItemName, FileUploadItemPreview, FileUploadItemPreviewImage, FileUploadItemSizeText, FileUploadLabel, FileUploadRoot, FileUploadTrigger, FramedContent, Heading, Hero, HeroBackground, HeroContent, IconButton, Image, Img, Input, InputContainer, Label, Legend, ListItemContent, ListItemHeading, ListItemImage, ListItemRoot, MenuContent, MenuContentStandalone, MenuItem, MenuItemGroup, MenuItemGroupLabel, MenuItemText, MenuPositioner, MenuRoot, MenuSeparator, MenuTrigger, MenuTriggerItem, MessageBox, NdlaLogoEn, NdlaLogoNb, NdlaLogoText, OrderedList, PageContainer, PageContent, PaginationContext, PaginationEllipsis, PaginationItem, PaginationNextTrigger, PaginationPrevTrigger, PaginationRoot, Picture, PopoverAnchor, PopoverArrow, PopoverArrowStandalone, PopoverArrowTip, PopoverCloseTrigger, PopoverContent, PopoverContentStandalone, PopoverDescription, PopoverIndicator, PopoverPositioner, PopoverRoot, PopoverRootProvider, PopoverTitle, PopoverTrigger, RadioGroupIndicator, RadioGroupItem, RadioGroupItemControl, RadioGroupItemHiddenInput, RadioGroupItemText, RadioGroupLabel, RadioGroupRoot, SelectClearTrigger, SelectContent, SelectContentStandalone, SelectControl, SelectHiddenSelect, SelectIndicator, SelectItem, SelectItemGroup, SelectItemGroupLabel, SelectItemIndicator, SelectItemText, SelectLabel, SelectList, SelectPositioner, SelectRoot, SelectTrigger, SelectValueText, Skeleton, SliderControl, SliderHiddenInput, SliderLabel, SliderRange, SliderRoot, SliderThumb, SliderTrack, Spinner, SwitchControl, SwitchHiddenInput, SwitchLabel, SwitchRoot, SwitchThumb, Table, TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger, TagsInputClearTrigger, TagsInputControl, TagsInputInput, TagsInputItem, TagsInputItemDeleteTrigger, TagsInputItemInput, TagsInputItemPreview, TagsInputItemText, TagsInputLabel, TagsInputRoot, Text, TextArea, ToastActionTrigger, ToastCloseTrigger, ToastDescription, ToastRoot, ToastTitle, ToggleGroupItem, ToggleGroupRoot, TooltipArrow, TooltipArrowTip, TooltipContent, TooltipContentStandalone, TooltipPositioner, TooltipRoot, TooltipTrigger, Tree, TreeBranch, TreeBranchContent, TreeBranchControl, TreeBranchIndicator, TreeBranchText, TreeBranchTrigger, TreeItem, TreeItemIndicator, TreeItemText, TreeLabel, TreeNodeContext, TreeNodeProvider, TreeRoot, TreeRootProvider, UnOrderedList, buttonBaseRecipe, buttonRecipe, createTreeCollection, getSrcSet, iconButtonRecipe, makeSrcQueryString, useDialog, useFieldContext, usePopover, useTreeView };
+import { useFieldContext } from "@ark-ui/react/field";
+export { AccordionItem, AccordionItemContent, AccordionItemIndicator, AccordionItemTrigger, AccordionRoot, Badge, BleedPageContent, BlockQuote, Button, CardContent, CardHeading, CardImage, CardRoot, CheckboxControl, CheckboxGroup, CheckboxHiddenInput, CheckboxIndicator, CheckboxLabel, CheckboxRoot, ComboboxClearTrigger, ComboboxContent, ComboboxContentStandalone, ComboboxControl, ComboboxInput, ComboboxItem, ComboboxItemGroup, ComboboxItemGroupLabel, ComboboxItemIndicator, ComboboxItemText, ComboboxLabel, ComboboxList, ComboboxPositioner, ComboboxRoot, ComboboxTrigger, DatePickerClearTrigger, DatePickerContent, DatePickerContext, DatePickerControl, DatePickerInput, DatePickerLabel, DatePickerMonthSelect, DatePickerNextTrigger, DatePickerPositioner, DatePickerPresetTrigger, DatePickerPrevTrigger, DatePickerRangeText, DatePickerRoot, DatePickerStandaloneContent, DatePickerTable, DatePickerTableBody, DatePickerTableCell, DatePickerTableCellTrigger, DatePickerTableHead, DatePickerTableHeader, DatePickerTableRow, DatePickerTrigger, DatePickerView, DatePickerViewControl, DatePickerViewTrigger, DatePickerYearSelect, DefinitionList, DialogBackdrop, DialogBody, DialogCloseTrigger, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogPositioner, DialogRoot, DialogRootProvider, DialogStandaloneContent, DialogTitle, DialogTrigger, ErrorMessageActions, ErrorMessageContent, ErrorMessageDescription, ErrorMessageRoot, ErrorMessageTitle, ExpandableBox, ExpandableBoxSummary, FieldErrorMessage, FieldHelper, FieldInput, FieldLabel, FieldRoot, FieldTextArea, FieldsetErrorText, FieldsetHelper, FieldsetLegend, FieldsetRoot, Figure, FileUploadContext, FileUploadDropzone, FileUploadHiddenInput, FileUploadItem, FileUploadItemDeleteTrigger, FileUploadItemGroup, FileUploadItemName, FileUploadItemPreview, FileUploadItemPreviewImage, FileUploadItemSizeText, FileUploadLabel, FileUploadRoot, FileUploadTrigger, FramedContent, Heading, Hero, HeroBackground, HeroContent, IconButton, Image, Img, Input, InputContainer, Label, Legend, ListItemContent, ListItemHeading, ListItemImage, ListItemRoot, MenuContent, MenuContentStandalone, MenuItem, MenuItemGroup, MenuItemGroupLabel, MenuItemText, MenuPositioner, MenuRoot, MenuSeparator, MenuTrigger, MenuTriggerItem, MessageBox, NdlaLogoEn, NdlaLogoNb, NdlaLogoText, OrderedList, PageContainer, PageContent, PaginationContext, PaginationEllipsis, PaginationItem, PaginationNextTrigger, PaginationPrevTrigger, PaginationRoot, Picture, PopoverAnchor, PopoverArrow, PopoverArrowStandalone, PopoverArrowTip, PopoverCloseTrigger, PopoverContent, PopoverContentStandalone, PopoverDescription, PopoverIndicator, PopoverPositioner, PopoverRoot, PopoverRootProvider, PopoverTitle, PopoverTrigger, RadioGroupIndicator, RadioGroupItem, RadioGroupItemControl, RadioGroupItemHiddenInput, RadioGroupItemText, RadioGroupLabel, RadioGroupRoot, RainbowSpinner, SelectClearTrigger, SelectContent, SelectContentStandalone, SelectControl, SelectHiddenSelect, SelectIndicator, SelectItem, SelectItemGroup, SelectItemGroupLabel, SelectItemIndicator, SelectItemText, SelectLabel, SelectList, SelectPositioner, SelectRoot, SelectTrigger, SelectValueText, Skeleton, SliderControl, SliderHiddenInput, SliderLabel, SliderRange, SliderRoot, SliderThumb, SliderTrack, Spinner, SwitchControl, SwitchHiddenInput, SwitchLabel, SwitchRoot, SwitchThumb, Table, TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger, TagsInputClearTrigger, TagsInputControl, TagsInputInput, TagsInputItem, TagsInputItemDeleteTrigger, TagsInputItemInput, TagsInputItemPreview, TagsInputItemText, TagsInputLabel, TagsInputRoot, Text, TextArea, ToastActionTrigger, ToastCloseTrigger, ToastDescription, ToastRoot, ToastTitle, ToggleGroupItem, ToggleGroupRoot, TooltipArrow, TooltipArrowTip, TooltipContent, TooltipContentStandalone, TooltipPositioner, TooltipRoot, TooltipTrigger, Tree, TreeBranch, TreeBranchContent, TreeBranchControl, TreeBranchIndicator, TreeBranchText, TreeBranchTrigger, TreeItem, TreeItemIndicator, TreeItemText, TreeLabel, TreeNodeContext, TreeNodeProvider, TreeRoot, TreeRootProvider, UnOrderedList, buttonBaseRecipe, buttonRecipe, createTreeCollection, getSrcSet, iconButtonRecipe, makeSrcQueryString, useDialog, useFieldContext, usePopover, useTreeView };

package/lib/Accordion.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { Accordion } from "@ark-ui/react";
+import { Accordion } from "@ark-ui/react/accordion";
 import type { RecipeVariantProps, StyledProps } from "@ndla/styled-system/types";
 import type { RefAttributes } from "react";
 declare const accordionRecipe: import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"root" | "item" | "itemTrigger" | "itemContent" | "itemIndicator", {

package/lib/Accordion.js

@@ -1,4 +1,4 @@
-let _ark_ui_react = require("@ark-ui/react");
+let _ark_ui_react_accordion = require("@ark-ui/react/accordion");
 let _ndla_styled_system_css = require("@ndla/styled-system/css");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -11,7 +11,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 *
 */
 const { withProvider, withContext } = (0, _ndla_styled_system_jsx.createStyleContext)((0, _ndla_styled_system_css.sva)({
-	slots: _ark_ui_react.accordionAnatomy.keys(),
+	slots: _ark_ui_react_accordion.accordionAnatomy.keys(),
 	base: {
 		root: {
 			display: "flex",
@@ -105,16 +105,16 @@ const { withProvider, withContext } = (0, _ndla_styled_system_jsx.createStyleCon
 		}
 	} }
 }));
-const InternalAccordionRoot = withProvider(_ark_ui_react.Accordion.Root, "root", { baseComponent: true });
+const InternalAccordionRoot = withProvider(_ark_ui_react_accordion.Accordion.Root, "root", { baseComponent: true });
 const AccordionRoot = ({ lazyMount = true, unmountOnExit = true, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalAccordionRoot, {
 	lazyMount,
 	unmountOnExit,
 	...props
 });
-const AccordionItemContent = withContext(_ark_ui_react.Accordion.ItemContent, "itemContent", { baseComponent: true });
-const AccordionItemIndicator = withContext(_ark_ui_react.Accordion.ItemIndicator, "itemIndicator", { baseComponent: true });
-const AccordionItem = withContext(_ark_ui_react.Accordion.Item, "item", { baseComponent: true });
-const AccordionItemTrigger = withContext(_ark_ui_react.Accordion.ItemTrigger, "itemTrigger", { baseComponent: true });
+const AccordionItemContent = withContext(_ark_ui_react_accordion.Accordion.ItemContent, "itemContent", { baseComponent: true });
+const AccordionItemIndicator = withContext(_ark_ui_react_accordion.Accordion.ItemIndicator, "itemIndicator", { baseComponent: true });
+const AccordionItem = withContext(_ark_ui_react_accordion.Accordion.Item, "item", { baseComponent: true });
+const AccordionItemTrigger = withContext(_ark_ui_react_accordion.Accordion.ItemTrigger, "itemTrigger", { baseComponent: true });
 //#endregion
 exports.AccordionItem = AccordionItem;
 exports.AccordionItemContent = AccordionItemContent;

package/lib/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","names":["accordionAnatomy","Accordion"],"sources":["../src/Accordion.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Accordion, accordionAnatomy } from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { RecipeVariantProps, StyledProps } from \"@ndla/styled-system/types\";\nimport type { RefAttributes } from \"react\";\n\nconst accordionRecipe = sva({\n  slots: accordionAnatomy.keys(),\n  base: {\n    root: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"3xsmall\",\n    },\n    itemTrigger: {\n      display: \"flex\",\n      alignItems: \"center\",\n      justifyContent: \"space-between\",\n      background: \"surface.default\",\n      cursor: \"pointer\",\n      transitionDuration: \"fast\",\n      transitionTimingFunction: \"default\",\n      transitionProperty: \"background, border-color, border, border-radius\",\n      _closed: {\n        transitionProperty: \"background, border-color, border, border-radius\",\n      },\n      _disabled: {\n        cursor: \"not-allowed\",\n        background: \"surface.disabled.subtle\",\n        boxShadowColor: \"stroke.disabled\",\n        color: \"text.disabled\",\n        _hover: {\n          background: \"surface.disabled.subtle\",\n          boxShadowColor: \"stroke.disabled\",\n          color: \"text.disabled\",\n        },\n      },\n    },\n    itemIndicator: {\n      color: \"icon.strong\",\n      transformOrigin: \"center\",\n      transitionDuration: \"normal\",\n      transitionProperty: \"transform\",\n      transitionTimingFunction: \"default\",\n      _open: {\n        transform: \"rotate(180deg)\",\n      },\n      _motionReduce: {\n        transition: \"none\",\n        transitionDuration: \"0s\",\n      },\n    },\n    itemContent: {\n      overflow: \"hidden\",\n      // TODO: Is this needed?\n      transitionProperty: \"padding-bottom\",\n      transitionDuration: \"normal\",\n      transitionTimingFunction: \"default\",\n      paddingBlock: \"xsmall\",\n      paddingInline: \"small\",\n      _open: {\n        animation: \"collapse-in\",\n        _motionReduce: {\n          animation: \"none\",\n        },\n      },\n      _closed: {\n        animation: \"collapse-out\",\n        _motionReduce: {\n          animation: \"none\",\n        },\n      },\n    },\n    item: {\n      width: \"100%\",\n    },\n  },\n  defaultVariants: {\n    variant: \"bordered\",\n  },\n  variants: {\n    variant: {\n      clean: {},\n      bordered: {\n        itemTrigger: {\n          paddingInline: \"medium\",\n          paddingBlock: \"medium\",\n          width: \"100%\",\n          borderRadius: \"xsmall\",\n          boxShadowColor: \"stroke.subtle\",\n          boxShadow: \"inset 0 0 0 1px var(--shadow-color)\",\n          _hover: {\n            background: \"surface.actionSubtle.hover\",\n            boxShadowColor: \"stroke.hover\",\n          },\n          _open: {\n            background: \"surface.actionSubtle.active\",\n            boxShadowColor: \"stroke.default\",\n            borderBottomRadius: \"sharp\",\n          },\n          _focusVisible: {\n            outline: \"none\",\n            boxShadowColor: \"stroke.default\",\n            boxShadow: \"inset 0 0 0 3px var(--shadow-color)\",\n          },\n        },\n        itemContent: {\n          borderBottomRadius: \"xsmall\",\n          borderWidth: \"0 1px 1px\",\n          borderStyle: \"solid\",\n          borderColor: \"stroke.default\",\n        },\n      },\n    },\n  },\n});\n\nconst { withProvider, withContext } = createStyleContext(accordionRecipe);\n\nexport type AccordionVariantProps = NonNullable<RecipeVariantProps<typeof accordionRecipe>>;\n\nexport interface AccordionRootProps\n  extends StyledProps, Accordion.RootProps, RefAttributes<HTMLDivElement>, AccordionVariantProps {}\n\nexport const InternalAccordionRoot = withProvider(Accordion.Root, \"root\", { baseComponent: true });\n\nexport const AccordionRoot = ({ lazyMount = true, unmountOnExit = true, ...props }: AccordionRootProps) => (\n  <InternalAccordionRoot lazyMount={lazyMount} unmountOnExit={unmountOnExit} {...props} />\n);\n\nexport const AccordionItemContent = withContext(Accordion.ItemContent, \"itemContent\", { baseComponent: true });\n\nexport const AccordionItemIndicator = withContext(Accordion.ItemIndicator, \"itemIndicator\", { baseComponent: true });\n\nexport interface AccordionItemProps extends StyledProps, Accordion.ItemProps {}\n\nexport const AccordionItem = withContext(Accordion.Item, \"item\", { baseComponent: true });\n\nexport const AccordionItemTrigger = withContext(Accordion.ItemTrigger, \"itemTrigger\", { baseComponent: true });\n"],"mappings":";;;;;;;;;;;;AA6HA,MAAM,EAAE,cAAc,iBAAA,GAAA,wBAAA,qBAAA,GAAA,wBAAA,KA/GM;CAC1B,OAAOA,cAAAA,iBAAiB,KAAK;CAC7B,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,KAAK;EACP;EACA,aAAa;GACX,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,YAAY;GACZ,QAAQ;GACR,oBAAoB;GACpB,0BAA0B;GAC1B,oBAAoB;GACpB,SAAS,EACP,oBAAoB,kDACtB;GACA,WAAW;IACT,QAAQ;IACR,YAAY;IACZ,gBAAgB;IAChB,OAAO;IACP,QAAQ;KACN,YAAY;KACZ,gBAAgB;KAChB,OAAO;IACT;GACF;EACF;EACA,eAAe;GACb,OAAO;GACP,iBAAiB;GACjB,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,OAAO,EACL,WAAW,iBACb;GACA,eAAe;IACb,YAAY;IACZ,oBAAoB;GACtB;EACF;EACA,aAAa;GACX,UAAU;GAEV,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,cAAc;GACd,eAAe;GACf,OAAO;IACL,WAAW;IACX,eAAe,EACb,WAAW,OACb;GACF;GACA,SAAS;IACP,WAAW;IACX,eAAe,EACb,WAAW,OACb;GACF;EACF;EACA,MAAM,EACJ,OAAO,OACT;CACF;CACA,iBAAiB,EACf,SAAS,WACX;CACA,UAAU,EACR,SAAS;EACP,OAAO,CAAC;EACR,UAAU;GACR,aAAa;IACX,eAAe;IACf,cAAc;IACd,OAAO;IACP,cAAc;IACd,gBAAgB;IAChB,WAAW;IACX,QAAQ;KACN,YAAY;KACZ,gBAAgB;IAClB;IACA,OAAO;KACL,YAAY;KACZ,gBAAgB;KAChB,oBAAoB;IACtB;IACA,eAAe;KACb,SAAS;KACT,gBAAgB;KAChB,WAAW;IACb;GACF;GACA,aAAa;IACX,oBAAoB;IACpB,aAAa;IACb,aAAa;IACb,aAAa;GACf;EACF;CACF,EACF;AACF,CAEuE,CAAC;AAOxE,MAAa,wBAAwB,aAAaC,cAAAA,UAAU,MAAM,QAAQ,EAAE,eAAe,KAAK,CAAC;AAEjG,MAAa,iBAAiB,EAAE,YAAY,MAAM,gBAAgB,MAAM,GAAG,YACzE,iBAAA,GAAA,kBAAA,KAAC,uBAAD;CAAkC;CAA0B;CAAe,GAAI;AAAQ,CAAA;AAGzF,MAAa,uBAAuB,YAAYA,cAAAA,UAAU,aAAa,eAAe,EAAE,eAAe,KAAK,CAAC;AAE7G,MAAa,yBAAyB,YAAYA,cAAAA,UAAU,eAAe,iBAAiB,EAAE,eAAe,KAAK,CAAC;AAInH,MAAa,gBAAgB,YAAYA,cAAAA,UAAU,MAAM,QAAQ,EAAE,eAAe,KAAK,CAAC;AAExF,MAAa,uBAAuB,YAAYA,cAAAA,UAAU,aAAa,eAAe,EAAE,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Accordion.js","names":["accordionAnatomy","Accordion"],"sources":["../src/Accordion.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Accordion, accordionAnatomy } from \"@ark-ui/react/accordion\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { RecipeVariantProps, StyledProps } from \"@ndla/styled-system/types\";\nimport type { RefAttributes } from \"react\";\n\nconst accordionRecipe = sva({\n  slots: accordionAnatomy.keys(),\n  base: {\n    root: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"3xsmall\",\n    },\n    itemTrigger: {\n      display: \"flex\",\n      alignItems: \"center\",\n      justifyContent: \"space-between\",\n      background: \"surface.default\",\n      cursor: \"pointer\",\n      transitionDuration: \"fast\",\n      transitionTimingFunction: \"default\",\n      transitionProperty: \"background, border-color, border, border-radius\",\n      _closed: {\n        transitionProperty: \"background, border-color, border, border-radius\",\n      },\n      _disabled: {\n        cursor: \"not-allowed\",\n        background: \"surface.disabled.subtle\",\n        boxShadowColor: \"stroke.disabled\",\n        color: \"text.disabled\",\n        _hover: {\n          background: \"surface.disabled.subtle\",\n          boxShadowColor: \"stroke.disabled\",\n          color: \"text.disabled\",\n        },\n      },\n    },\n    itemIndicator: {\n      color: \"icon.strong\",\n      transformOrigin: \"center\",\n      transitionDuration: \"normal\",\n      transitionProperty: \"transform\",\n      transitionTimingFunction: \"default\",\n      _open: {\n        transform: \"rotate(180deg)\",\n      },\n      _motionReduce: {\n        transition: \"none\",\n        transitionDuration: \"0s\",\n      },\n    },\n    itemContent: {\n      overflow: \"hidden\",\n      // TODO: Is this needed?\n      transitionProperty: \"padding-bottom\",\n      transitionDuration: \"normal\",\n      transitionTimingFunction: \"default\",\n      paddingBlock: \"xsmall\",\n      paddingInline: \"small\",\n      _open: {\n        animation: \"collapse-in\",\n        _motionReduce: {\n          animation: \"none\",\n        },\n      },\n      _closed: {\n        animation: \"collapse-out\",\n        _motionReduce: {\n          animation: \"none\",\n        },\n      },\n    },\n    item: {\n      width: \"100%\",\n    },\n  },\n  defaultVariants: {\n    variant: \"bordered\",\n  },\n  variants: {\n    variant: {\n      clean: {},\n      bordered: {\n        itemTrigger: {\n          paddingInline: \"medium\",\n          paddingBlock: \"medium\",\n          width: \"100%\",\n          borderRadius: \"xsmall\",\n          boxShadowColor: \"stroke.subtle\",\n          boxShadow: \"inset 0 0 0 1px var(--shadow-color)\",\n          _hover: {\n            background: \"surface.actionSubtle.hover\",\n            boxShadowColor: \"stroke.hover\",\n          },\n          _open: {\n            background: \"surface.actionSubtle.active\",\n            boxShadowColor: \"stroke.default\",\n            borderBottomRadius: \"sharp\",\n          },\n          _focusVisible: {\n            outline: \"none\",\n            boxShadowColor: \"stroke.default\",\n            boxShadow: \"inset 0 0 0 3px var(--shadow-color)\",\n          },\n        },\n        itemContent: {\n          borderBottomRadius: \"xsmall\",\n          borderWidth: \"0 1px 1px\",\n          borderStyle: \"solid\",\n          borderColor: \"stroke.default\",\n        },\n      },\n    },\n  },\n});\n\nconst { withProvider, withContext } = createStyleContext(accordionRecipe);\n\nexport type AccordionVariantProps = NonNullable<RecipeVariantProps<typeof accordionRecipe>>;\n\nexport interface AccordionRootProps\n  extends StyledProps, Accordion.RootProps, RefAttributes<HTMLDivElement>, AccordionVariantProps {}\n\nexport const InternalAccordionRoot = withProvider(Accordion.Root, \"root\", { baseComponent: true });\n\nexport const AccordionRoot = ({ lazyMount = true, unmountOnExit = true, ...props }: AccordionRootProps) => (\n  <InternalAccordionRoot lazyMount={lazyMount} unmountOnExit={unmountOnExit} {...props} />\n);\n\nexport const AccordionItemContent = withContext(Accordion.ItemContent, \"itemContent\", { baseComponent: true });\n\nexport const AccordionItemIndicator = withContext(Accordion.ItemIndicator, \"itemIndicator\", { baseComponent: true });\n\nexport interface AccordionItemProps extends StyledProps, Accordion.ItemProps {}\n\nexport const AccordionItem = withContext(Accordion.Item, \"item\", { baseComponent: true });\n\nexport const AccordionItemTrigger = withContext(Accordion.ItemTrigger, \"itemTrigger\", { baseComponent: true });\n"],"mappings":";;;;;;;;;;;;AA6HA,MAAM,EAAE,cAAc,iBAAA,GAAA,wBAAA,qBAAA,GAAA,wBAAA,KA/GM;CAC1B,OAAOA,wBAAAA,iBAAiB,KAAK;CAC7B,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,KAAK;EACP;EACA,aAAa;GACX,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,YAAY;GACZ,QAAQ;GACR,oBAAoB;GACpB,0BAA0B;GAC1B,oBAAoB;GACpB,SAAS,EACP,oBAAoB,kDACtB;GACA,WAAW;IACT,QAAQ;IACR,YAAY;IACZ,gBAAgB;IAChB,OAAO;IACP,QAAQ;KACN,YAAY;KACZ,gBAAgB;KAChB,OAAO;IACT;GACF;EACF;EACA,eAAe;GACb,OAAO;GACP,iBAAiB;GACjB,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,OAAO,EACL,WAAW,iBACb;GACA,eAAe;IACb,YAAY;IACZ,oBAAoB;GACtB;EACF;EACA,aAAa;GACX,UAAU;GAEV,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,cAAc;GACd,eAAe;GACf,OAAO;IACL,WAAW;IACX,eAAe,EACb,WAAW,OACb;GACF;GACA,SAAS;IACP,WAAW;IACX,eAAe,EACb,WAAW,OACb;GACF;EACF;EACA,MAAM,EACJ,OAAO,OACT;CACF;CACA,iBAAiB,EACf,SAAS,WACX;CACA,UAAU,EACR,SAAS;EACP,OAAO,CAAC;EACR,UAAU;GACR,aAAa;IACX,eAAe;IACf,cAAc;IACd,OAAO;IACP,cAAc;IACd,gBAAgB;IAChB,WAAW;IACX,QAAQ;KACN,YAAY;KACZ,gBAAgB;IAClB;IACA,OAAO;KACL,YAAY;KACZ,gBAAgB;KAChB,oBAAoB;IACtB;IACA,eAAe;KACb,SAAS;KACT,gBAAgB;KAChB,WAAW;IACb;GACF;GACA,aAAa;IACX,oBAAoB;IACpB,aAAa;IACb,aAAa;IACb,aAAa;GACf;EACF;CACF,EACF;AACF,CAEuE,CAAC;AAOxE,MAAa,wBAAwB,aAAaC,wBAAAA,UAAU,MAAM,QAAQ,EAAE,eAAe,KAAK,CAAC;AAEjG,MAAa,iBAAiB,EAAE,YAAY,MAAM,gBAAgB,MAAM,GAAG,YACzE,iBAAA,GAAA,kBAAA,KAAC,uBAAD;CAAkC;CAA0B;CAAe,GAAI;AAAQ,CAAA;AAGzF,MAAa,uBAAuB,YAAYA,wBAAAA,UAAU,aAAa,eAAe,EAAE,eAAe,KAAK,CAAC;AAE7G,MAAa,yBAAyB,YAAYA,wBAAAA,UAAU,eAAe,iBAAiB,EAAE,eAAe,KAAK,CAAC;AAInH,MAAa,gBAAgB,YAAYA,wBAAAA,UAAU,MAAM,QAAQ,EAAE,eAAe,KAAK,CAAC;AAExF,MAAa,uBAAuB,YAAYA,wBAAAA,UAAU,aAAa,eAAe,EAAE,eAAe,KAAK,CAAC"}

package/lib/ArticleLists.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { type HTMLArkProps } from "@ark-ui/react";
+import { type HTMLArkProps } from "@ark-ui/react/factory";
 import type { HTMLStyledProps, RecipeVariantProps, StyledProps } from "@ndla/styled-system/types";
 declare const orderedListRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<{
     variant: {

package/lib/ArticleLists.js

@@ -1,7 +1,7 @@
-let _ark_ui_react = require("@ark-ui/react");
 let _ndla_styled_system_css = require("@ndla/styled-system/css");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react_jsx_runtime = require("react/jsx-runtime");
+let _ark_ui_react_factory = require("@ark-ui/react/factory");
 let react = require("react");
 //#region src/ArticleLists.tsx
 /**
@@ -59,7 +59,7 @@ const orderedListRecipe = (0, _ndla_styled_system_css.cva)({
 		}
 	} }
 });
-const StyledOrderedList = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react.ark.ol, {}, { baseComponent: true });
+const StyledOrderedList = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react_factory.ark.ol, {}, { baseComponent: true });
 const ListContext = (0, react.createContext)(void 0);
 const useCurrentListContext = () => {
 	return (0, react.useContext)(ListContext);

package/lib/ArticleLists.js.map

@@ -1 +1 @@
-{"version":3,"file":"ArticleLists.js","names":["ark","css"],"sources":["../src/ArticleLists.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 { HTMLStyledProps, RecipeVariantProps, StyledProps } from \"@ndla/styled-system/types\";\nimport { createContext, type CSSProperties, forwardRef, useContext, useId, useMemo } from \"react\";\n\nconst orderedListRecipe = cva({\n  base: {\n    paddingInlineStart: \"large\",\n    \"& > li\": {\n      marginBlock: \"small\",\n      _before: {\n        position: \"absolute\",\n        transform: \"translateX(calc(-100% - token(spacing.small)))\",\n        fontVariantNumeric: \"tabular-nums\",\n      },\n    },\n  },\n  defaultVariants: {\n    variant: \"numbers\",\n  },\n  variants: {\n    variant: {\n      numbers: {\n        /** We utilize a CSS variable for the counter name to correctly reset counters when nested inside a letter list.\n         * This way, the nested number list won't pick up on any other counters named \"numbers\" higher up in the DOM tree.\n         * This fixes the following scenario\n         * ol (numbers) -> 1.\n         *  ol(letters) -> A.\n         *    ol (numbers) -> 1. (Without the CSS variable, this would be 1.1)\n         */\n        counterReset: \"var(--counter-name) var(--start, 0)\",\n        \"& > li\": {\n          counterIncrement: \"var(--counter-name)\",\n          _before: {\n            content: `counters(var(--counter-name), \".\") \". \"`,\n          },\n          // If a nested OL is not a letters variant, it's a numbers variant. Keep increasing the margin to account for wider numbers.\n          \"& > ol:not([data-variant='letters']) > li\": {\n            paddingInlineStart: \"small\",\n            \"& > ol:not([data-variant='letters']) > li\": {\n              paddingInlineStart: \"large\",\n              \"& > ol:not([data-variant='letters']) > li\": {\n                paddingInlineStart: \"xxlarge\",\n              },\n            },\n          },\n        },\n      },\n      letters: {\n        counterReset: \"letters var(--start, 0)\",\n        \"& > li\": {\n          counterIncrement: \"letters\",\n          _before: {\n            content: `counter(letters, upper-alpha) \". \"`,\n          },\n          \"& > ol[data-variant='letters'] > li\": {\n            _before: {\n              content: `counter(letters, lower-alpha) \". \"`,\n            },\n            \"& > ol[data-variant='letters'] > li\": {\n              _before: {\n                content: `counter(letters, lower-roman) \". \"`,\n              },\n            },\n          },\n        },\n      },\n    },\n  },\n});\n\nexport type OrderedListVariantProps = NonNullable<RecipeVariantProps<typeof orderedListRecipe>>;\n\nexport interface OrderedListProps extends StyledProps, HTMLArkProps<\"ol\">, OrderedListVariantProps {}\n\nconst StyledOrderedList = styled(ark.ol, {}, { baseComponent: true });\n\nconst ListContext = createContext<\"numbers\" | \"letters\" | undefined>(undefined);\n\nconst useCurrentListContext = () => {\n  const ctx = useContext(ListContext);\n  return ctx;\n};\n\nexport const OrderedList = forwardRef<HTMLOListElement, OrderedListProps>(\n  ({ variant = \"numbers\", css: cssProp, start, ...props }, ref) => {\n    const counterId = useId();\n    const currentContext = useCurrentListContext();\n\n    const style = useMemo(() => {\n      const css: Record<string, any> = { \"--start\": start ? start - 1 : 0 };\n      if (variant !== currentContext) {\n        css[\"--counter-name\"] = counterId;\n      }\n      return css as CSSProperties;\n    }, [start, variant, currentContext, counterId]);\n\n    return (\n      <ListContext.Provider value={variant ?? \"numbers\"}>\n        <StyledOrderedList\n          data-embed-type=\"ordered-list\"\n          data-variant={variant}\n          start={start}\n          type={variant === \"letters\" ? \"A\" : undefined}\n          css={css.raw(orderedListRecipe.raw({ variant }), cssProp)}\n          style={style}\n          ref={ref}\n          {...props}\n        />\n      </ListContext.Provider>\n    );\n  },\n);\n\nexport interface UnOrderedListProps extends StyledProps, HTMLArkProps<\"ul\"> {}\n\nexport const StyledUnOrderedList = styled(\"ul\", {\n  base: {\n    listStyle: \"revert\",\n    marginInlineStart: \"medium\",\n    paddingInlineStart: \"small\",\n    \"& ul\": {\n      marginInlineStart: \"0\",\n    },\n    \"& li\": {\n      marginBlock: \"small\",\n      paddingInlineStart: \"small\",\n      _marker: {\n        color: \"icon.strong\",\n      },\n\n      \"& > ol\": {\n        marginInlineStart: \"0 !important\",\n      },\n    },\n\n    listStyleType: \"disc\",\n    \"& > li > ul\": {\n      listStyleType: \"circle\",\n      \"& > li > ul\": {\n        listStyleType: \"square\",\n      },\n    },\n  },\n});\n\nexport const UnOrderedList = forwardRef<HTMLUListElement, UnOrderedListProps>((props, ref) => {\n  const counterId = useId();\n\n  const style = useMemo(\n    () =>\n      ({\n        \"--counter-name\": counterId,\n      }) as CSSProperties,\n    [counterId],\n  );\n\n  return <StyledUnOrderedList ref={ref} style={style} {...props} />;\n});\n\nexport const DefinitionList = styled(\"dl\", {\n  base: {\n    \"& dt\": {\n      fontWeight: \"bold\",\n    },\n    \"& dd\": {\n      marginInlineStart: \"medium\",\n    },\n  },\n});\n\nexport type DefinitionListProps = HTMLStyledProps<\"dl\">;\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,qBAAA,GAAA,wBAAA,KAAwB;CAC5B,MAAM;EACJ,oBAAoB;EACpB,UAAU;GACR,aAAa;GACb,SAAS;IACP,UAAU;IACV,WAAW;IACX,oBAAoB;GACtB;EACF;CACF;CACA,iBAAiB,EACf,SAAS,UACX;CACA,UAAU,EACR,SAAS;EACP,SAAS;;;;;;;;GAQP,cAAc;GACd,UAAU;IACR,kBAAkB;IAClB,SAAS,EACP,SAAS,0CACX;IAEA,6CAA6C;KAC3C,oBAAoB;KACpB,6CAA6C;MAC3C,oBAAoB;MACpB,6CAA6C,EAC3C,oBAAoB,UACtB;KACF;IACF;GACF;EACF;EACA,SAAS;GACP,cAAc;GACd,UAAU;IACR,kBAAkB;IAClB,SAAS,EACP,SAAS,qCACX;IACA,uCAAuC;KACrC,SAAS,EACP,SAAS,qCACX;KACA,uCAAuC,EACrC,SAAS,EACP,SAAS,qCACX,EACF;IACF;GACF;EACF;CACF,EACF;AACF,CAAC;AAMD,MAAM,qBAAA,GAAA,wBAAA,QAA2BA,cAAAA,IAAI,IAAI,CAAC,GAAG,EAAE,eAAe,KAAK,CAAC;AAEpE,MAAM,eAAA,GAAA,MAAA,eAA+D,KAAA,CAAS;AAE9E,MAAM,8BAA8B;CAElC,QAAA,GAAA,MAAA,YADuB,WACd;AACX;AAEA,MAAa,eAAA,GAAA,MAAA,aACV,EAAE,UAAU,WAAW,KAAK,SAAS,OAAO,GAAG,SAAS,QAAQ;CAC/D,MAAM,aAAA,GAAA,MAAA,OAAkB;CACxB,MAAM,iBAAiB,sBAAsB;CAE7C,MAAM,SAAA,GAAA,MAAA,eAAsB;EAC1B,MAAM,MAA2B,EAAE,WAAW,QAAQ,QAAQ,IAAI,EAAE;EACpE,IAAI,YAAY,gBACd,IAAI,oBAAoB;EAE1B,OAAO;CACT,GAAG;EAAC;EAAO;EAAS;EAAgB;CAAS,CAAC;CAE9C,OACE,iBAAA,GAAA,kBAAA,KAAC,YAAY,UAAb;EAAsB,OAAO,WAAW;YACtC,iBAAA,GAAA,kBAAA,KAAC,mBAAD;GACE,mBAAgB;GAChB,gBAAc;GACP;GACP,MAAM,YAAY,YAAY,MAAM,KAAA;GACpC,KAAKC,wBAAAA,IAAI,IAAI,kBAAkB,IAAI,EAAE,QAAQ,CAAC,GAAG,OAAO;GACjD;GACF;GACL,GAAI;EACL,CAAA;CACmB,CAAA;AAE1B,CACF;AAIA,MAAa,uBAAA,GAAA,wBAAA,QAA6B,MAAM,EAC9C,MAAM;CACJ,WAAW;CACX,mBAAmB;CACnB,oBAAoB;CACpB,QAAQ,EACN,mBAAmB,IACrB;CACA,QAAQ;EACN,aAAa;EACb,oBAAoB;EACpB,SAAS,EACP,OAAO,cACT;EAEA,UAAU,EACR,mBAAmB,eACrB;CACF;CAEA,eAAe;CACf,eAAe;EACb,eAAe;EACf,eAAe,EACb,eAAe,SACjB;CACF;AACF,EACF,CAAC;AAED,MAAa,iBAAA,GAAA,MAAA,aAAkE,OAAO,QAAQ;CAC5F,MAAM,aAAA,GAAA,MAAA,OAAkB;CAUxB,OAAO,iBAAA,GAAA,kBAAA,KAAC,qBAAD;EAA0B;EAAK,QAAA,GAAA,MAAA,gBANjC,EACC,kBAAkB,UACpB,IACF,CAAC,SAAS,CAGqC;EAAG,GAAI;CAAQ,CAAA;AAClE,CAAC;AAED,MAAa,kBAAA,GAAA,wBAAA,QAAwB,MAAM,EACzC,MAAM;CACJ,QAAQ,EACN,YAAY,OACd;CACA,QAAQ,EACN,mBAAmB,SACrB;AACF,EACF,CAAC"}
+{"version":3,"file":"ArticleLists.js","names":["ark","css"],"sources":["../src/ArticleLists.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 { HTMLStyledProps, RecipeVariantProps, StyledProps } from \"@ndla/styled-system/types\";\nimport { createContext, type CSSProperties, forwardRef, useContext, useId, useMemo } from \"react\";\n\nconst orderedListRecipe = cva({\n  base: {\n    paddingInlineStart: \"large\",\n    \"& > li\": {\n      marginBlock: \"small\",\n      _before: {\n        position: \"absolute\",\n        transform: \"translateX(calc(-100% - token(spacing.small)))\",\n        fontVariantNumeric: \"tabular-nums\",\n      },\n    },\n  },\n  defaultVariants: {\n    variant: \"numbers\",\n  },\n  variants: {\n    variant: {\n      numbers: {\n        /** We utilize a CSS variable for the counter name to correctly reset counters when nested inside a letter list.\n         * This way, the nested number list won't pick up on any other counters named \"numbers\" higher up in the DOM tree.\n         * This fixes the following scenario\n         * ol (numbers) -> 1.\n         *  ol(letters) -> A.\n         *    ol (numbers) -> 1. (Without the CSS variable, this would be 1.1)\n         */\n        counterReset: \"var(--counter-name) var(--start, 0)\",\n        \"& > li\": {\n          counterIncrement: \"var(--counter-name)\",\n          _before: {\n            content: `counters(var(--counter-name), \".\") \". \"`,\n          },\n          // If a nested OL is not a letters variant, it's a numbers variant. Keep increasing the margin to account for wider numbers.\n          \"& > ol:not([data-variant='letters']) > li\": {\n            paddingInlineStart: \"small\",\n            \"& > ol:not([data-variant='letters']) > li\": {\n              paddingInlineStart: \"large\",\n              \"& > ol:not([data-variant='letters']) > li\": {\n                paddingInlineStart: \"xxlarge\",\n              },\n            },\n          },\n        },\n      },\n      letters: {\n        counterReset: \"letters var(--start, 0)\",\n        \"& > li\": {\n          counterIncrement: \"letters\",\n          _before: {\n            content: `counter(letters, upper-alpha) \". \"`,\n          },\n          \"& > ol[data-variant='letters'] > li\": {\n            _before: {\n              content: `counter(letters, lower-alpha) \". \"`,\n            },\n            \"& > ol[data-variant='letters'] > li\": {\n              _before: {\n                content: `counter(letters, lower-roman) \". \"`,\n              },\n            },\n          },\n        },\n      },\n    },\n  },\n});\n\nexport type OrderedListVariantProps = NonNullable<RecipeVariantProps<typeof orderedListRecipe>>;\n\nexport interface OrderedListProps extends StyledProps, HTMLArkProps<\"ol\">, OrderedListVariantProps {}\n\nconst StyledOrderedList = styled(ark.ol, {}, { baseComponent: true });\n\nconst ListContext = createContext<\"numbers\" | \"letters\" | undefined>(undefined);\n\nconst useCurrentListContext = () => {\n  const ctx = useContext(ListContext);\n  return ctx;\n};\n\nexport const OrderedList = forwardRef<HTMLOListElement, OrderedListProps>(\n  ({ variant = \"numbers\", css: cssProp, start, ...props }, ref) => {\n    const counterId = useId();\n    const currentContext = useCurrentListContext();\n\n    const style = useMemo(() => {\n      const css: Record<string, any> = { \"--start\": start ? start - 1 : 0 };\n      if (variant !== currentContext) {\n        css[\"--counter-name\"] = counterId;\n      }\n      return css as CSSProperties;\n    }, [start, variant, currentContext, counterId]);\n\n    return (\n      <ListContext.Provider value={variant ?? \"numbers\"}>\n        <StyledOrderedList\n          data-embed-type=\"ordered-list\"\n          data-variant={variant}\n          start={start}\n          type={variant === \"letters\" ? \"A\" : undefined}\n          css={css.raw(orderedListRecipe.raw({ variant }), cssProp)}\n          style={style}\n          ref={ref}\n          {...props}\n        />\n      </ListContext.Provider>\n    );\n  },\n);\n\nexport interface UnOrderedListProps extends StyledProps, HTMLArkProps<\"ul\"> {}\n\nexport const StyledUnOrderedList = styled(\"ul\", {\n  base: {\n    listStyle: \"revert\",\n    marginInlineStart: \"medium\",\n    paddingInlineStart: \"small\",\n    \"& ul\": {\n      marginInlineStart: \"0\",\n    },\n    \"& li\": {\n      marginBlock: \"small\",\n      paddingInlineStart: \"small\",\n      _marker: {\n        color: \"icon.strong\",\n      },\n\n      \"& > ol\": {\n        marginInlineStart: \"0 !important\",\n      },\n    },\n\n    listStyleType: \"disc\",\n    \"& > li > ul\": {\n      listStyleType: \"circle\",\n      \"& > li > ul\": {\n        listStyleType: \"square\",\n      },\n    },\n  },\n});\n\nexport const UnOrderedList = forwardRef<HTMLUListElement, UnOrderedListProps>((props, ref) => {\n  const counterId = useId();\n\n  const style = useMemo(\n    () =>\n      ({\n        \"--counter-name\": counterId,\n      }) as CSSProperties,\n    [counterId],\n  );\n\n  return <StyledUnOrderedList ref={ref} style={style} {...props} />;\n});\n\nexport const DefinitionList = styled(\"dl\", {\n  base: {\n    \"& dt\": {\n      fontWeight: \"bold\",\n    },\n    \"& dd\": {\n      marginInlineStart: \"medium\",\n    },\n  },\n});\n\nexport type DefinitionListProps = HTMLStyledProps<\"dl\">;\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,qBAAA,GAAA,wBAAA,KAAwB;CAC5B,MAAM;EACJ,oBAAoB;EACpB,UAAU;GACR,aAAa;GACb,SAAS;IACP,UAAU;IACV,WAAW;IACX,oBAAoB;GACtB;EACF;CACF;CACA,iBAAiB,EACf,SAAS,UACX;CACA,UAAU,EACR,SAAS;EACP,SAAS;;;;;;;;GAQP,cAAc;GACd,UAAU;IACR,kBAAkB;IAClB,SAAS,EACP,SAAS,0CACX;IAEA,6CAA6C;KAC3C,oBAAoB;KACpB,6CAA6C;MAC3C,oBAAoB;MACpB,6CAA6C,EAC3C,oBAAoB,UACtB;KACF;IACF;GACF;EACF;EACA,SAAS;GACP,cAAc;GACd,UAAU;IACR,kBAAkB;IAClB,SAAS,EACP,SAAS,qCACX;IACA,uCAAuC;KACrC,SAAS,EACP,SAAS,qCACX;KACA,uCAAuC,EACrC,SAAS,EACP,SAAS,qCACX,EACF;IACF;GACF;EACF;CACF,EACF;AACF,CAAC;AAMD,MAAM,qBAAA,GAAA,wBAAA,QAA2BA,sBAAAA,IAAI,IAAI,CAAC,GAAG,EAAE,eAAe,KAAK,CAAC;AAEpE,MAAM,eAAA,GAAA,MAAA,eAA+D,KAAA,CAAS;AAE9E,MAAM,8BAA8B;CAElC,QAAA,GAAA,MAAA,YADuB,WACd;AACX;AAEA,MAAa,eAAA,GAAA,MAAA,aACV,EAAE,UAAU,WAAW,KAAK,SAAS,OAAO,GAAG,SAAS,QAAQ;CAC/D,MAAM,aAAA,GAAA,MAAA,OAAkB;CACxB,MAAM,iBAAiB,sBAAsB;CAE7C,MAAM,SAAA,GAAA,MAAA,eAAsB;EAC1B,MAAM,MAA2B,EAAE,WAAW,QAAQ,QAAQ,IAAI,EAAE;EACpE,IAAI,YAAY,gBACd,IAAI,oBAAoB;EAE1B,OAAO;CACT,GAAG;EAAC;EAAO;EAAS;EAAgB;CAAS,CAAC;CAE9C,OACE,iBAAA,GAAA,kBAAA,KAAC,YAAY,UAAb;EAAsB,OAAO,WAAW;YACtC,iBAAA,GAAA,kBAAA,KAAC,mBAAD;GACE,mBAAgB;GAChB,gBAAc;GACP;GACP,MAAM,YAAY,YAAY,MAAM,KAAA;GACpC,KAAKC,wBAAAA,IAAI,IAAI,kBAAkB,IAAI,EAAE,QAAQ,CAAC,GAAG,OAAO;GACjD;GACF;GACL,GAAI;EACL,CAAA;CACmB,CAAA;AAE1B,CACF;AAIA,MAAa,uBAAA,GAAA,wBAAA,QAA6B,MAAM,EAC9C,MAAM;CACJ,WAAW;CACX,mBAAmB;CACnB,oBAAoB;CACpB,QAAQ,EACN,mBAAmB,IACrB;CACA,QAAQ;EACN,aAAa;EACb,oBAAoB;EACpB,SAAS,EACP,OAAO,cACT;EAEA,UAAU,EACR,mBAAmB,eACrB;CACF;CAEA,eAAe;CACf,eAAe;EACb,eAAe;EACf,eAAe,EACb,eAAe,SACjB;CACF;AACF,EACF,CAAC;AAED,MAAa,iBAAA,GAAA,MAAA,aAAkE,OAAO,QAAQ;CAC5F,MAAM,aAAA,GAAA,MAAA,OAAkB;CAUxB,OAAO,iBAAA,GAAA,kBAAA,KAAC,qBAAD;EAA0B;EAAK,QAAA,GAAA,MAAA,gBANjC,EACC,kBAAkB,UACpB,IACF,CAAC,SAAS,CAGqC;EAAG,GAAI;CAAQ,CAAA;AAClE,CAAC;AAED,MAAa,kBAAA,GAAA,wBAAA,QAAwB,MAAM,EACzC,MAAM;CACJ,QAAQ,EACN,YAAY,OACd;CACA,QAAQ,EACN,mBAAmB,SACrB;AACF,EACF,CAAC"}

package/lib/Badge.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { type HTMLArkProps } from "@ark-ui/react";
+import { type HTMLArkProps } from "@ark-ui/react/factory";
 import { type RecipeVariantProps } from "@ndla/styled-system/css";
 import type { StyledProps } from "@ndla/styled-system/types";
 declare const badgeRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<{

package/lib/Badge.js

@@ -1,7 +1,7 @@
-let _ark_ui_react = require("@ark-ui/react");
 let _ndla_styled_system_css = require("@ndla/styled-system/css");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react_jsx_runtime = require("react/jsx-runtime");
+let _ark_ui_react_factory = require("@ark-ui/react/factory");
 let react = require("react");
 //#region src/Badge.tsx
 /**
@@ -60,7 +60,7 @@ const badgeRecipe = (0, _ndla_styled_system_css.cva)({
 		}
 	}
 });
-const StyledBadge = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react.ark.div, {}, { baseComponent: true });
+const StyledBadge = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react_factory.ark.div, {}, { baseComponent: true });
 const Badge = (0, react.forwardRef)(({ colorTheme, size, css: cssProp, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledBadge, {
 	css: _ndla_styled_system_css.css.raw(badgeRecipe.raw({
 		colorTheme,