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

package/lib/RadioGroup.js.map

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

package/lib/RainbowSpinner.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2026-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import type { HTMLProps } from "@ark-ui/react/factory";
+import { type RecipeVariantProps } from "@ndla/styled-system/css";
+import { type StyledProps } from "@ndla/styled-system/jsx";
+declare const rainbowRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<{
+    variant: {
+        page: {
+            paddingBlockStart: "4xlarge";
+            display: "flex";
+            justifyContent: "center";
+            alignItems: "center";
+        };
+        default: {};
+    };
+}>;
+export type RainbowSpinnerVariantProps = NonNullable<RecipeVariantProps<typeof rainbowRecipe>>;
+interface Props extends HTMLProps<"div">, StyledProps, RainbowSpinnerVariantProps {
+}
+export declare const RainbowSpinner: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/lib/RainbowSpinner.js

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

package/lib/RainbowSpinner.js.map

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

package/lib/Select.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { Select } from "@ark-ui/react";
+import { Select } from "@ark-ui/react/select";
 import type { StyledProps } from "@ndla/styled-system/types";
 import { type RefAttributes } from "react";
 import { type TextProps } from "./Text";

package/lib/Select.js

@@ -1,9 +1,9 @@
 const require_Label = require("./Label.js");
-let _ark_ui_react = require("@ark-ui/react");
 let _ndla_styled_system_css = require("@ndla/styled-system/css");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
+let _ark_ui_react_select = require("@ark-ui/react/select");
 //#region src/Select.tsx
 /**
 * Copyright (c) 2024-present, NDLA.
@@ -13,7 +13,7 @@ let react = require("react");
 *
 */
 const { withProvider, withContext } = (0, _ndla_styled_system_jsx.createStyleContext)((0, _ndla_styled_system_css.sva)({
-	slots: _ark_ui_react.selectAnatomy.keys(),
+	slots: _ark_ui_react_select.selectAnatomy.keys(),
 	base: {
 		root: {
 			display: "flex",
@@ -115,20 +115,20 @@ const { withProvider, withContext } = (0, _ndla_styled_system_jsx.createStyleCon
 		valueText: { textAlign: "start" }
 	}
 }));
-const InternalSelectRoot = withProvider(_ark_ui_react.Select.Root, "root", { baseComponent: true });
+const InternalSelectRoot = withProvider(_ark_ui_react_select.Select.Root, "root", { baseComponent: true });
 const SelectRoot = ({ lazyMount = true, unmountOnExit = true, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalSelectRoot, {
 	lazyMount,
 	unmountOnExit,
 	...props
 });
-const SelectClearTrigger = withContext(_ark_ui_react.Select.ClearTrigger, "clearTrigger", { baseComponent: true });
-const SelectContentStandalone = withContext(_ark_ui_react.Select.Content, "content", { baseComponent: true });
+const SelectClearTrigger = withContext(_ark_ui_react_select.Select.ClearTrigger, "clearTrigger", { baseComponent: true });
+const SelectContentStandalone = withContext(_ark_ui_react_select.Select.Content, "content", { baseComponent: true });
 const SelectContent = (0, react.forwardRef)((props, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectPositioner, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectContentStandalone, {
 	ref,
 	...props
 }) }));
-const SelectControl = withContext(_ark_ui_react.Select.Control, "control", { baseComponent: true });
-const SelectIndicator = withContext(_ark_ui_react.Select.Indicator, "indicator", { baseComponent: true });
+const SelectControl = withContext(_ark_ui_react_select.Select.Control, "control", { baseComponent: true });
+const SelectIndicator = withContext(_ark_ui_react_select.Select.Indicator, "indicator", { baseComponent: true });
 const SelectItemGroupLabel = (0, react.forwardRef)(({ children, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalSelectItemGroupLabel, {
 	asChild: true,
 	ref,
@@ -139,23 +139,23 @@ const SelectItemGroupLabel = (0, react.forwardRef)(({ children, ...props }, ref)
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children })
 	})
 }));
-const InternalSelectItemGroupLabel = withContext(_ark_ui_react.Select.ItemGroupLabel, "itemGroupLabel");
-const SelectItemGroup = withContext(_ark_ui_react.Select.ItemGroup, "itemGroup", { baseComponent: true });
-const SelectItemIndicator = withContext(_ark_ui_react.Select.ItemIndicator, "itemIndicator", { baseComponent: true });
-const SelectItem = withContext(_ark_ui_react.Select.Item, "item", { baseComponent: true });
-const SelectItemText = withContext(_ark_ui_react.Select.ItemText, "itemText", { baseComponent: true });
-const InternalSelectLabel = withContext(_ark_ui_react.Select.Label, "label");
+const InternalSelectItemGroupLabel = withContext(_ark_ui_react_select.Select.ItemGroupLabel, "itemGroupLabel");
+const SelectItemGroup = withContext(_ark_ui_react_select.Select.ItemGroup, "itemGroup", { baseComponent: true });
+const SelectItemIndicator = withContext(_ark_ui_react_select.Select.ItemIndicator, "itemIndicator", { baseComponent: true });
+const SelectItem = withContext(_ark_ui_react_select.Select.Item, "item", { baseComponent: true });
+const SelectItemText = withContext(_ark_ui_react_select.Select.ItemText, "itemText", { baseComponent: true });
+const InternalSelectLabel = withContext(_ark_ui_react_select.Select.Label, "label");
 const SelectLabel = (0, react.forwardRef)(({ children, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalSelectLabel, {
 	asChild: true,
 	ref,
 	...props,
 	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Label.Label, { children })
 }));
-const SelectPositioner = withContext(_ark_ui_react.Select.Positioner, "positioner", { baseComponent: true });
-const SelectTrigger = withContext(_ark_ui_react.Select.Trigger, "trigger", { baseComponent: true });
-const SelectValueText = withContext(_ark_ui_react.Select.ValueText, "valueText", { baseComponent: true });
-const SelectList = withContext(_ark_ui_react.Select.List, "list", { baseComponent: true });
-const SelectHiddenSelect = _ark_ui_react.Select.HiddenSelect;
+const SelectPositioner = withContext(_ark_ui_react_select.Select.Positioner, "positioner", { baseComponent: true });
+const SelectTrigger = withContext(_ark_ui_react_select.Select.Trigger, "trigger", { baseComponent: true });
+const SelectValueText = withContext(_ark_ui_react_select.Select.ValueText, "valueText", { baseComponent: true });
+const SelectList = withContext(_ark_ui_react_select.Select.List, "list", { baseComponent: true });
+const SelectHiddenSelect = _ark_ui_react_select.Select.HiddenSelect;
 //#endregion
 exports.SelectClearTrigger = SelectClearTrigger;
 exports.SelectContent = SelectContent;

package/lib/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":["selectAnatomy","Select","Label"],"sources":["../src/Select.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Select, selectAnatomy } from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef, type ElementType, type RefAttributes } from \"react\";\nimport { Label } from \"./Label\";\nimport { type TextProps } from \"./Text\";\n\nconst selectRecipe = sva({\n  slots: selectAnatomy.keys(),\n  base: {\n    root: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"3xsmall\",\n    },\n    control: {\n      display: \"flex\",\n      gap: \"4xsmall\",\n      alignItems: \"center\",\n    },\n    content: {\n      display: \"flex\",\n      gap: \"4xsmall\",\n      flexDirection: \"column\",\n      zIndex: \"dropdown\",\n      background: \"surface.default\",\n      borderRadius: \"xsmall\",\n      boxShadow: \"large\",\n      padding: \"xsmall\",\n      overflowY: \"auto\",\n      maxHeight: \"min(token(spacing.surface.xsmall), 45vh)\",\n      _focusVisible: {\n        outlineOffset: \"-1\",\n      },\n      _open: {\n        animation: \"fade-shift-in 0.25s ease-out\",\n        _motionReduce: {\n          animation: \"none\",\n        },\n      },\n      _closed: {\n        animation: \"fade-shift-out 0.25s ease-out\",\n        _motionReduce: {\n          animation: \"none\",\n        },\n      },\n    },\n    item: {\n      display: \"flex\",\n      alignItems: \"center\",\n      justifyContent: \"space-between\",\n      padding: \"xsmall\",\n      background: \"surface.default\",\n      borderRadius: \"xsmall\",\n      cursor: \"pointer\",\n      transitionDuration: \"fast\",\n      transitionProperty: \"background, color\",\n      transitionTimingFunction: \"default\",\n      _hover: {\n        background: \"surface.hover\",\n      },\n      _selected: {\n        background: \"surface.selected\",\n        _hover: {\n          background: \"surface.hover\",\n        },\n        _highlighted: {\n          background: \"surface.hover\",\n        },\n      },\n      _highlighted: {\n        background: \"surface.hover\",\n        _hover: {\n          background: \"surface.hover\",\n        },\n      },\n      _disabled: {\n        cursor: \"not-allowed\",\n        color: \"text.disabled\",\n        background: \"surface.disabled\",\n        _highlighted: {\n          color: \"text.disabled\",\n          background: \"surface.disabled\",\n        },\n        _selected: {\n          color: \"text.disabled\",\n          background: \"surface.disabled\",\n        },\n        _hover: {\n          color: \"text.disabled\",\n          background: \"surface.disabled\",\n        },\n      },\n    },\n    indicator: {\n      color: \"icon.default\",\n      transformOrigin: \"center\",\n      transitionDuration: \"normal\",\n      transitionProperty: \"transform\",\n      transitionTimingFunction: \"default\",\n      _open: {\n        transform: \"rotate(180deg)\",\n      },\n      _motionReduce: {\n        transition: \"none\",\n        transitionDuration: \"0s\",\n      },\n    },\n    itemIndicator: {\n      color: \"stroke.default\",\n    },\n    itemText: {\n      _checked: {\n        textDecoration: \"underline\",\n      },\n      _highlighted: {\n        textDecoration: \"underline\",\n      },\n    },\n    trigger: {\n      justifyContent: \"space-between\",\n      width: \"surface.small\",\n      _ariaInvalid: {\n        boxShadowColor: \"stroke.error\",\n      },\n    },\n    itemGroup: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"4xsmall\",\n    },\n    valueText: {\n      textAlign: \"start\",\n    },\n  },\n});\n\nconst { withProvider, withContext } = createStyleContext(selectRecipe);\n\nexport interface SelectRootProps<T extends Select.CollectionItem>\n  extends Select.RootProps<T>, StyledProps, RefAttributes<HTMLDivElement> {}\nconst InternalSelectRoot = withProvider<ElementType<SelectRootProps<Select.CollectionItem>>>(Select.Root, \"root\", {\n  baseComponent: true,\n});\n\nexport const SelectRoot = <T extends Select.CollectionItem>({\n  lazyMount = true,\n  unmountOnExit = true,\n  ...props\n}: SelectRootProps<T>) => <InternalSelectRoot lazyMount={lazyMount} unmountOnExit={unmountOnExit} {...props} />;\n\nexport const SelectClearTrigger = withContext(Select.ClearTrigger, \"clearTrigger\", { baseComponent: true });\n\nexport const SelectContentStandalone = withContext(Select.Content, \"content\", { baseComponent: true });\n\ninterface SelectContentProps extends Select.ContentProps, StyledProps {}\n\nexport const SelectContent = forwardRef<HTMLDivElement, SelectContentProps>((props, ref) => (\n  <SelectPositioner>\n    <SelectContentStandalone ref={ref} {...props} />\n  </SelectPositioner>\n));\n\nexport const SelectControl = withContext(Select.Control, \"control\", { baseComponent: true });\n\nexport const SelectIndicator = withContext(Select.Indicator, \"indicator\", { baseComponent: true });\n\ninterface SelectItemGroupLabelProps\n  extends Omit<Select.ItemGroupLabelProps, \"color\">, StyledProps, TextProps, RefAttributes<HTMLDivElement> {}\n\nexport const SelectItemGroupLabel = forwardRef<HTMLDivElement, SelectItemGroupLabelProps>(\n  ({ children, ...props }, ref) => (\n    <InternalSelectItemGroupLabel asChild ref={ref} {...props}>\n      <Label asChild consumeCss>\n        <div>{children}</div>\n      </Label>\n    </InternalSelectItemGroupLabel>\n  ),\n);\n\nconst InternalSelectItemGroupLabel = withContext(Select.ItemGroupLabel, \"itemGroupLabel\");\n\nexport const SelectItemGroup = withContext(Select.ItemGroup, \"itemGroup\", { baseComponent: true });\n\nexport const SelectItemIndicator = withContext(Select.ItemIndicator, \"itemIndicator\", { baseComponent: true });\n\nexport const SelectItem = withContext(Select.Item, \"item\", {\n  baseComponent: true,\n});\n\nexport const SelectItemText = withContext(Select.ItemText, \"itemText\", { baseComponent: true });\n\nconst InternalSelectLabel = withContext(Select.Label, \"label\");\n\ninterface SelectLabelProps\n  extends Omit<Select.LabelProps, \"color\">, StyledProps, TextProps, RefAttributes<HTMLLabelElement> {}\n\nexport const SelectLabel = forwardRef<HTMLLabelElement, SelectLabelProps>(({ children, ...props }, ref) => (\n  <InternalSelectLabel asChild ref={ref} {...props}>\n    <Label>{children}</Label>\n  </InternalSelectLabel>\n));\n\nexport const SelectPositioner = withContext(Select.Positioner, \"positioner\", { baseComponent: true });\n\nexport const SelectTrigger = withContext(Select.Trigger, \"trigger\", { baseComponent: true });\n\nexport const SelectValueText = withContext(Select.ValueText, \"valueText\", { baseComponent: true });\n\nexport const SelectList = withContext(Select.List, \"list\", {\n  baseComponent: true,\n});\n\nexport const SelectHiddenSelect = Select.HiddenSelect;\n"],"mappings":"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"}
+{"version":3,"file":"Select.js","names":["selectAnatomy","Select","Label"],"sources":["../src/Select.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Select, selectAnatomy } from \"@ark-ui/react/select\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef, type ElementType, type RefAttributes } from \"react\";\nimport { Label } from \"./Label\";\nimport { type TextProps } from \"./Text\";\n\nconst selectRecipe = sva({\n  slots: selectAnatomy.keys(),\n  base: {\n    root: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"3xsmall\",\n    },\n    control: {\n      display: \"flex\",\n      gap: \"4xsmall\",\n      alignItems: \"center\",\n    },\n    content: {\n      display: \"flex\",\n      gap: \"4xsmall\",\n      flexDirection: \"column\",\n      zIndex: \"dropdown\",\n      background: \"surface.default\",\n      borderRadius: \"xsmall\",\n      boxShadow: \"large\",\n      padding: \"xsmall\",\n      overflowY: \"auto\",\n      maxHeight: \"min(token(spacing.surface.xsmall), 45vh)\",\n      _focusVisible: {\n        outlineOffset: \"-1\",\n      },\n      _open: {\n        animation: \"fade-shift-in 0.25s ease-out\",\n        _motionReduce: {\n          animation: \"none\",\n        },\n      },\n      _closed: {\n        animation: \"fade-shift-out 0.25s ease-out\",\n        _motionReduce: {\n          animation: \"none\",\n        },\n      },\n    },\n    item: {\n      display: \"flex\",\n      alignItems: \"center\",\n      justifyContent: \"space-between\",\n      padding: \"xsmall\",\n      background: \"surface.default\",\n      borderRadius: \"xsmall\",\n      cursor: \"pointer\",\n      transitionDuration: \"fast\",\n      transitionProperty: \"background, color\",\n      transitionTimingFunction: \"default\",\n      _hover: {\n        background: \"surface.hover\",\n      },\n      _selected: {\n        background: \"surface.selected\",\n        _hover: {\n          background: \"surface.hover\",\n        },\n        _highlighted: {\n          background: \"surface.hover\",\n        },\n      },\n      _highlighted: {\n        background: \"surface.hover\",\n        _hover: {\n          background: \"surface.hover\",\n        },\n      },\n      _disabled: {\n        cursor: \"not-allowed\",\n        color: \"text.disabled\",\n        background: \"surface.disabled\",\n        _highlighted: {\n          color: \"text.disabled\",\n          background: \"surface.disabled\",\n        },\n        _selected: {\n          color: \"text.disabled\",\n          background: \"surface.disabled\",\n        },\n        _hover: {\n          color: \"text.disabled\",\n          background: \"surface.disabled\",\n        },\n      },\n    },\n    indicator: {\n      color: \"icon.default\",\n      transformOrigin: \"center\",\n      transitionDuration: \"normal\",\n      transitionProperty: \"transform\",\n      transitionTimingFunction: \"default\",\n      _open: {\n        transform: \"rotate(180deg)\",\n      },\n      _motionReduce: {\n        transition: \"none\",\n        transitionDuration: \"0s\",\n      },\n    },\n    itemIndicator: {\n      color: \"stroke.default\",\n    },\n    itemText: {\n      _checked: {\n        textDecoration: \"underline\",\n      },\n      _highlighted: {\n        textDecoration: \"underline\",\n      },\n    },\n    trigger: {\n      justifyContent: \"space-between\",\n      width: \"surface.small\",\n      _ariaInvalid: {\n        boxShadowColor: \"stroke.error\",\n      },\n    },\n    itemGroup: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"4xsmall\",\n    },\n    valueText: {\n      textAlign: \"start\",\n    },\n  },\n});\n\nconst { withProvider, withContext } = createStyleContext(selectRecipe);\n\nexport interface SelectRootProps<T extends Select.CollectionItem>\n  extends Select.RootProps<T>, StyledProps, RefAttributes<HTMLDivElement> {}\nconst InternalSelectRoot = withProvider<ElementType<SelectRootProps<Select.CollectionItem>>>(Select.Root, \"root\", {\n  baseComponent: true,\n});\n\nexport const SelectRoot = <T extends Select.CollectionItem>({\n  lazyMount = true,\n  unmountOnExit = true,\n  ...props\n}: SelectRootProps<T>) => <InternalSelectRoot lazyMount={lazyMount} unmountOnExit={unmountOnExit} {...props} />;\n\nexport const SelectClearTrigger = withContext(Select.ClearTrigger, \"clearTrigger\", { baseComponent: true });\n\nexport const SelectContentStandalone = withContext(Select.Content, \"content\", { baseComponent: true });\n\ninterface SelectContentProps extends Select.ContentProps, StyledProps {}\n\nexport const SelectContent = forwardRef<HTMLDivElement, SelectContentProps>((props, ref) => (\n  <SelectPositioner>\n    <SelectContentStandalone ref={ref} {...props} />\n  </SelectPositioner>\n));\n\nexport const SelectControl = withContext(Select.Control, \"control\", { baseComponent: true });\n\nexport const SelectIndicator = withContext(Select.Indicator, \"indicator\", { baseComponent: true });\n\ninterface SelectItemGroupLabelProps\n  extends Omit<Select.ItemGroupLabelProps, \"color\">, StyledProps, TextProps, RefAttributes<HTMLDivElement> {}\n\nexport const SelectItemGroupLabel = forwardRef<HTMLDivElement, SelectItemGroupLabelProps>(\n  ({ children, ...props }, ref) => (\n    <InternalSelectItemGroupLabel asChild ref={ref} {...props}>\n      <Label asChild consumeCss>\n        <div>{children}</div>\n      </Label>\n    </InternalSelectItemGroupLabel>\n  ),\n);\n\nconst InternalSelectItemGroupLabel = withContext(Select.ItemGroupLabel, \"itemGroupLabel\");\n\nexport const SelectItemGroup = withContext(Select.ItemGroup, \"itemGroup\", { baseComponent: true });\n\nexport const SelectItemIndicator = withContext(Select.ItemIndicator, \"itemIndicator\", { baseComponent: true });\n\nexport const SelectItem = withContext(Select.Item, \"item\", {\n  baseComponent: true,\n});\n\nexport const SelectItemText = withContext(Select.ItemText, \"itemText\", { baseComponent: true });\n\nconst InternalSelectLabel = withContext(Select.Label, \"label\");\n\ninterface SelectLabelProps\n  extends Omit<Select.LabelProps, \"color\">, StyledProps, TextProps, RefAttributes<HTMLLabelElement> {}\n\nexport const SelectLabel = forwardRef<HTMLLabelElement, SelectLabelProps>(({ children, ...props }, ref) => (\n  <InternalSelectLabel asChild ref={ref} {...props}>\n    <Label>{children}</Label>\n  </InternalSelectLabel>\n));\n\nexport const SelectPositioner = withContext(Select.Positioner, \"positioner\", { baseComponent: true });\n\nexport const SelectTrigger = withContext(Select.Trigger, \"trigger\", { baseComponent: true });\n\nexport const SelectValueText = withContext(Select.ValueText, \"valueText\", { baseComponent: true });\n\nexport const SelectList = withContext(Select.List, \"list\", {\n  baseComponent: true,\n});\n\nexport const SelectHiddenSelect = Select.HiddenSelect;\n"],"mappings":";;;;;;;;;;;;;;AAkJA,MAAM,EAAE,cAAc,iBAAA,GAAA,wBAAA,qBAAA,GAAA,wBAAA,KAlIG;CACvB,OAAOA,qBAAAA,cAAc,KAAK;CAC1B,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,KAAK;EACP;EACA,SAAS;GACP,SAAS;GACT,KAAK;GACL,YAAY;EACd;EACA,SAAS;GACP,SAAS;GACT,KAAK;GACL,eAAe;GACf,QAAQ;GACR,YAAY;GACZ,cAAc;GACd,WAAW;GACX,SAAS;GACT,WAAW;GACX,WAAW;GACX,eAAe,EACb,eAAe,KACjB;GACA,OAAO;IACL,WAAW;IACX,eAAe,EACb,WAAW,OACb;GACF;GACA,SAAS;IACP,WAAW;IACX,eAAe,EACb,WAAW,OACb;GACF;EACF;EACA,MAAM;GACJ,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,SAAS;GACT,YAAY;GACZ,cAAc;GACd,QAAQ;GACR,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,QAAQ,EACN,YAAY,gBACd;GACA,WAAW;IACT,YAAY;IACZ,QAAQ,EACN,YAAY,gBACd;IACA,cAAc,EACZ,YAAY,gBACd;GACF;GACA,cAAc;IACZ,YAAY;IACZ,QAAQ,EACN,YAAY,gBACd;GACF;GACA,WAAW;IACT,QAAQ;IACR,OAAO;IACP,YAAY;IACZ,cAAc;KACZ,OAAO;KACP,YAAY;IACd;IACA,WAAW;KACT,OAAO;KACP,YAAY;IACd;IACA,QAAQ;KACN,OAAO;KACP,YAAY;IACd;GACF;EACF;EACA,WAAW;GACT,OAAO;GACP,iBAAiB;GACjB,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,OAAO,EACL,WAAW,iBACb;GACA,eAAe;IACb,YAAY;IACZ,oBAAoB;GACtB;EACF;EACA,eAAe,EACb,OAAO,iBACT;EACA,UAAU;GACR,UAAU,EACR,gBAAgB,YAClB;GACA,cAAc,EACZ,gBAAgB,YAClB;EACF;EACA,SAAS;GACP,gBAAgB;GAChB,OAAO;GACP,cAAc,EACZ,gBAAgB,eAClB;EACF;EACA,WAAW;GACT,SAAS;GACT,eAAe;GACf,KAAK;EACP;EACA,WAAW,EACT,WAAW,QACb;CACF;AACF,CAEoE,CAAC;AAIrE,MAAM,qBAAqB,aAAkEC,qBAAAA,OAAO,MAAM,QAAQ,EAChH,eAAe,KACjB,CAAC;AAED,MAAa,cAA+C,EAC1D,YAAY,MACZ,gBAAgB,MAChB,GAAG,YACqB,iBAAA,GAAA,kBAAA,KAAC,oBAAD;CAA+B;CAA0B;CAAe,GAAI;AAAQ,CAAA;AAE9G,MAAa,qBAAqB,YAAYA,qBAAAA,OAAO,cAAc,gBAAgB,EAAE,eAAe,KAAK,CAAC;AAE1G,MAAa,0BAA0B,YAAYA,qBAAAA,OAAO,SAAS,WAAW,EAAE,eAAe,KAAK,CAAC;AAIrG,MAAa,iBAAA,GAAA,MAAA,aAAgE,OAAO,QAClF,iBAAA,GAAA,kBAAA,KAAC,kBAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAC,yBAAD;CAA8B;CAAK,GAAI;AAAQ,CAAA,EAC/B,CAAA,CACnB;AAED,MAAa,gBAAgB,YAAYA,qBAAAA,OAAO,SAAS,WAAW,EAAE,eAAe,KAAK,CAAC;AAE3F,MAAa,kBAAkB,YAAYA,qBAAAA,OAAO,WAAW,aAAa,EAAE,eAAe,KAAK,CAAC;AAKjG,MAAa,wBAAA,GAAA,MAAA,aACV,EAAE,UAAU,GAAG,SAAS,QACvB,iBAAA,GAAA,kBAAA,KAAC,8BAAD;CAA8B,SAAA;CAAa;CAAK,GAAI;WAClD,iBAAA,GAAA,kBAAA,KAACC,cAAAA,OAAD;EAAO,SAAA;EAAQ,YAAA;YACb,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAM,SAAc,CAAA;CACf,CAAA;AACqB,CAAA,CAElC;AAEA,MAAM,+BAA+B,YAAYD,qBAAAA,OAAO,gBAAgB,gBAAgB;AAExF,MAAa,kBAAkB,YAAYA,qBAAAA,OAAO,WAAW,aAAa,EAAE,eAAe,KAAK,CAAC;AAEjG,MAAa,sBAAsB,YAAYA,qBAAAA,OAAO,eAAe,iBAAiB,EAAE,eAAe,KAAK,CAAC;AAE7G,MAAa,aAAa,YAAYA,qBAAAA,OAAO,MAAM,QAAQ,EACzD,eAAe,KACjB,CAAC;AAED,MAAa,iBAAiB,YAAYA,qBAAAA,OAAO,UAAU,YAAY,EAAE,eAAe,KAAK,CAAC;AAE9F,MAAM,sBAAsB,YAAYA,qBAAAA,OAAO,OAAO,OAAO;AAK7D,MAAa,eAAA,GAAA,MAAA,aAA8D,EAAE,UAAU,GAAG,SAAS,QACjG,iBAAA,GAAA,kBAAA,KAAC,qBAAD;CAAqB,SAAA;CAAa;CAAK,GAAI;WACzC,iBAAA,GAAA,kBAAA,KAACC,cAAAA,OAAD,EAAQ,SAAgB,CAAA;AACL,CAAA,CACtB;AAED,MAAa,mBAAmB,YAAYD,qBAAAA,OAAO,YAAY,cAAc,EAAE,eAAe,KAAK,CAAC;AAEpG,MAAa,gBAAgB,YAAYA,qBAAAA,OAAO,SAAS,WAAW,EAAE,eAAe,KAAK,CAAC;AAE3F,MAAa,kBAAkB,YAAYA,qBAAAA,OAAO,WAAW,aAAa,EAAE,eAAe,KAAK,CAAC;AAEjG,MAAa,aAAa,YAAYA,qBAAAA,OAAO,MAAM,QAAQ,EACzD,eAAe,KACjB,CAAC;AAED,MAAa,qBAAqBA,qBAAAA,OAAO"}

package/lib/Skeleton.d.ts

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { type HTMLArkProps } from "@ark-ui/react";
+import { type HTMLArkProps } from "@ark-ui/react/factory";
 import type { StyledProps } from "@ndla/styled-system/types";
-export declare const Skeleton: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("@ark-ui/react").PolymorphicProps>, {}>;
+export declare const Skeleton: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("@ark-ui/react/factory").PolymorphicProps>, {}>;
 export interface SkeletonProps extends HTMLArkProps<"div">, StyledProps {
 }

package/lib/Skeleton.js

@@ -1,4 +1,5 @@
-let _ark_ui_react = require("@ark-ui/react");
+let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
+let _ark_ui_react_factory = require("@ark-ui/react/factory");
 //#region src/Skeleton.tsx
 /**
 * Copyright (c) 2024-present, NDLA.
@@ -7,7 +8,7 @@ let _ark_ui_react = require("@ark-ui/react");
 * LICENSE file in the root directory of this source tree.
 *
 */
-const Skeleton = (0, require("@ndla/styled-system/jsx").styled)(_ark_ui_react.ark.div, { base: {
+const Skeleton = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react_factory.ark.div, { base: {
 	animation: "skeleton-pulse",
 	backgroundColor: "surface.disabled",
 	backgroundClip: "padding-box",

package/lib/Skeleton.js.map

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

package/lib/Slider.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { Slider } from "@ark-ui/react";
+import { Slider } from "@ark-ui/react/slider";
 import type { StyledProps } from "@ndla/styled-system/types";
 import type { RefAttributes } from "react";
 import { type TextProps } from "./Text";

package/lib/Slider.js

@@ -1,8 +1,8 @@
 const require_Label = require("./Label.js");
-let _ark_ui_react = require("@ark-ui/react");
 let _ndla_styled_system_css = require("@ndla/styled-system/css");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react_jsx_runtime = require("react/jsx-runtime");
+let _ark_ui_react_slider = require("@ark-ui/react/slider");
 //#region src/Slider.tsx
 /**
 * Copyright (c) 2024-present, NDLA.
@@ -12,7 +12,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.sliderAnatomy.keys(),
+	slots: _ark_ui_react_slider.sliderAnatomy.keys(),
 	base: {
 		root: {
 			display: "flex",
@@ -66,12 +66,12 @@ const { withProvider, withContext } = (0, _ndla_styled_system_jsx.createStyleCon
 		}
 	}
 }));
-const SliderRoot = withProvider(_ark_ui_react.Slider.Root, "root", { baseComponent: true });
-const SliderControl = withContext(_ark_ui_react.Slider.Control, "control", { baseComponent: true });
-const SliderTrack = withContext(_ark_ui_react.Slider.Track, "track", { baseComponent: true });
-const SliderRange = withContext(_ark_ui_react.Slider.Range, "range", { baseComponent: true });
-const SliderThumb = withContext(_ark_ui_react.Slider.Thumb, "thumb", { baseComponent: true });
-const InternalSliderLabel = withContext(_ark_ui_react.Slider.Label, "label");
+const SliderRoot = withProvider(_ark_ui_react_slider.Slider.Root, "root", { baseComponent: true });
+const SliderControl = withContext(_ark_ui_react_slider.Slider.Control, "control", { baseComponent: true });
+const SliderTrack = withContext(_ark_ui_react_slider.Slider.Track, "track", { baseComponent: true });
+const SliderRange = withContext(_ark_ui_react_slider.Slider.Range, "range", { baseComponent: true });
+const SliderThumb = withContext(_ark_ui_react_slider.Slider.Thumb, "thumb", { baseComponent: true });
+const InternalSliderLabel = withContext(_ark_ui_react_slider.Slider.Label, "label");
 const SliderLabel = ({ textStyle = "label.medium", ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalSliderLabel, {
 	asChild: true,
 	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Label.Label, {
@@ -79,7 +79,7 @@ const SliderLabel = ({ textStyle = "label.medium", ...props }) => /* @__PURE__ *
 		...props
 	})
 });
-const SliderHiddenInput = _ark_ui_react.Slider.HiddenInput;
+const SliderHiddenInput = _ark_ui_react_slider.Slider.HiddenInput;
 //#endregion
 exports.SliderControl = SliderControl;
 exports.SliderHiddenInput = SliderHiddenInput;

package/lib/Slider.js.map

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

package/lib/Spinner.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";
 export declare const spinnerRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<{

package/lib/Spinner.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/Spinner.tsx
 /**
@@ -42,7 +42,7 @@ const spinnerRecipe = (0, _ndla_styled_system_css.cva)({
 		}
 	} }
 });
-const StyledSpinner = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react.ark.div, {}, { baseComponent: true });
+const StyledSpinner = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react_factory.ark.div, {}, { baseComponent: true });
 const Spinner = (0, react.forwardRef)(({ size, css: cssProp, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledSpinner, {
 	css: _ndla_styled_system_css.css.raw(spinnerRecipe.raw({ size }), cssProp),
 	...props,

package/lib/Spinner.js.map

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

package/lib/Switch.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { Switch } from "@ark-ui/react";
+import { Switch } from "@ark-ui/react/switch";
 import { type RecipeVariantProps } from "@ndla/styled-system/css";
 import type { StyledProps } from "@ndla/styled-system/types";
 import type { RefAttributes } from "react";

package/lib/Switch.js

@@ -1,8 +1,8 @@
 const require_Text = require("./Text.js");
-let _ark_ui_react = require("@ark-ui/react");
 let _ndla_styled_system_css = require("@ndla/styled-system/css");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react_jsx_runtime = require("react/jsx-runtime");
+let _ark_ui_react_switch = require("@ark-ui/react/switch");
 //#region src/Switch.tsx
 /**
 * Copyright (c) 2024-present, NDLA.
@@ -12,7 +12,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.switchAnatomy.keys(),
+	slots: _ark_ui_react_switch.switchAnatomy.keys(),
 	base: {
 		root: {
 			display: "inline-flex",
@@ -93,10 +93,10 @@ const { withProvider, withContext } = (0, _ndla_styled_system_jsx.createStyleCon
 		}
 	}
 }));
-const SwitchRoot = withProvider(_ark_ui_react.Switch.Root, "root", { baseComponent: true });
-const SwitchControl = withContext(_ark_ui_react.Switch.Control, "control", { baseComponent: true });
-const SwitchThumb = withContext(_ark_ui_react.Switch.Thumb, "thumb", { baseComponent: true });
-const InternalSwitchLabel = withContext(_ark_ui_react.Switch.Label, "label");
+const SwitchRoot = withProvider(_ark_ui_react_switch.Switch.Root, "root", { baseComponent: true });
+const SwitchControl = withContext(_ark_ui_react_switch.Switch.Control, "control", { baseComponent: true });
+const SwitchThumb = withContext(_ark_ui_react_switch.Switch.Thumb, "thumb", { baseComponent: true });
+const InternalSwitchLabel = withContext(_ark_ui_react_switch.Switch.Label, "label");
 const SwitchLabel = ({ textStyle = "label.medium", children, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalSwitchLabel, {
 	asChild: true,
 	...props,
@@ -107,7 +107,7 @@ const SwitchLabel = ({ textStyle = "label.medium", children, ...props }) => /* @
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children })
 	})
 });
-const SwitchHiddenInput = _ark_ui_react.Switch.HiddenInput;
+const SwitchHiddenInput = _ark_ui_react_switch.Switch.HiddenInput;
 //#endregion
 exports.SwitchControl = SwitchControl;
 exports.SwitchHiddenInput = SwitchHiddenInput;

package/lib/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","names":["switchAnatomy","Switch","Text"],"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,iBAAA,GAAA,wBAAA,qBAAA,GAAA,wBAAA,KAjGG;CACvB,OAAOA,cAAAA,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,aAAaC,cAAAA,OAAO,MAAM,QAAQ,EAAE,eAAe,KAAK,CAAC;AAEnF,MAAa,gBAAgB,YAAYA,cAAAA,OAAO,SAAS,WAAW,EAAE,eAAe,KAAK,CAAC;AAE3F,MAAa,cAAc,YAAYA,cAAAA,OAAO,OAAO,SAAS,EAAE,eAAe,KAAK,CAAC;AAErF,MAAM,sBAAsB,YAAYA,cAAAA,OAAO,OAAO,OAAO;AAK7D,MAAa,eAAe,EAAE,YAAY,gBAAgB,UAAU,GAAG,YACrE,iBAAA,GAAA,kBAAA,KAAC,qBAAD;CAAqB,SAAA;CAAQ,GAAI;WAC/B,iBAAA,GAAA,kBAAA,KAACC,aAAAA,MAAD;EAAM,SAAA;EAAQ,YAAA;EAAsB;YAClC,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAO,SAAe,CAAA;CAClB,CAAA;AACa,CAAA;AAGvB,MAAa,oBAAoBD,cAAAA,OAAO"}
+{"version":3,"file":"Switch.js","names":["switchAnatomy","Switch","Text"],"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,iBAAA,GAAA,wBAAA,qBAAA,GAAA,wBAAA,KAjGG;CACvB,OAAOA,qBAAAA,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,aAAaC,qBAAAA,OAAO,MAAM,QAAQ,EAAE,eAAe,KAAK,CAAC;AAEnF,MAAa,gBAAgB,YAAYA,qBAAAA,OAAO,SAAS,WAAW,EAAE,eAAe,KAAK,CAAC;AAE3F,MAAa,cAAc,YAAYA,qBAAAA,OAAO,OAAO,SAAS,EAAE,eAAe,KAAK,CAAC;AAErF,MAAM,sBAAsB,YAAYA,qBAAAA,OAAO,OAAO,OAAO;AAK7D,MAAa,eAAe,EAAE,YAAY,gBAAgB,UAAU,GAAG,YACrE,iBAAA,GAAA,kBAAA,KAAC,qBAAD;CAAqB,SAAA;CAAQ,GAAI;WAC/B,iBAAA,GAAA,kBAAA,KAACC,aAAAA,MAAD;EAAM,SAAA;EAAQ,YAAA;EAAsB;YAClC,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAO,SAAe,CAAA;CAClB,CAAA;AACa,CAAA;AAGvB,MAAa,oBAAoBD,qBAAAA,OAAO"}

package/lib/Table.d.ts

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { type HTMLArkProps } from "@ark-ui/react";
+import { type HTMLArkProps } from "@ark-ui/react/factory";
 import type { StyledProps } from "@ndla/styled-system/types";
 export interface TableProps extends HTMLArkProps<"table">, StyledProps {
 }
-export declare const Table: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<import("react").ClassAttributes<HTMLTableElement> & import("react").TableHTMLAttributes<HTMLTableElement> & import("@ark-ui/react").PolymorphicProps>, {}>;
+export declare const Table: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<import("react").ClassAttributes<HTMLTableElement> & import("react").TableHTMLAttributes<HTMLTableElement> & import("@ark-ui/react/factory").PolymorphicProps>, {}>;

package/lib/Table.js

@@ -1,4 +1,5 @@
-let _ark_ui_react = require("@ark-ui/react");
+let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
+let _ark_ui_react_factory = require("@ark-ui/react/factory");
 //#region src/Table.tsx
 /**
 * Copyright (c) 2024-present, NDLA.
@@ -7,7 +8,7 @@ let _ark_ui_react = require("@ark-ui/react");
 * LICENSE file in the root directory of this source tree.
 *
 */
-const Table = (0, require("@ndla/styled-system/jsx").styled)(_ark_ui_react.ark.table, { base: {
+const Table = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react_factory.ark.table, { base: {
 	display: "block",
 	overflowX: "auto",
 	maxWidth: "100%",

package/lib/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","names":["ark"],"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,SAAA,oCAAA,EAAA,QACXA,cAAAA,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.js","names":["ark"],"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,SAAA,GAAA,wBAAA,QACXA,sBAAAA,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"}