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

package/lib/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","names":["ark","css"],"sources":["../src/Badge.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\nconst badgeRecipe = cva({\n  base: {\n    paddingInline: \"xsmall\",\n    borderRadius: \"xsmall\",\n    border: \"1px solid\",\n    width: \"fit-content\",\n    color: \"text.default\",\n  },\n  defaultVariants: {\n    colorTheme: \"neutral\",\n    size: \"medium\",\n  },\n  variants: {\n    size: {\n      small: {\n        textStyle: \"label.small\",\n      },\n      medium: {\n        textStyle: \"label.medium\",\n      },\n    },\n    colorTheme: {\n      brand1: {\n        backgroundColor: \"surface.brand.1.moderate\",\n        borderColor: \"surface.brand.1.strong\",\n      },\n      brand2: {\n        backgroundColor: \"surface.brand.2.moderate\",\n        borderColor: \"surface.brand.2.strong\",\n      },\n      brand3: {\n        backgroundColor: \"surface.brand.3.subtle\",\n        borderColor: \"surface.brand.3.strong\",\n      },\n      neutral: {\n        backgroundColor: \"surface.infoSubtle\",\n        borderColor: \"stroke.info\",\n      },\n      danger: {\n        backgroundColor: \"surface.dangerSubtle\",\n        borderColor: \"surface.danger\",\n      },\n      success: {\n        backgroundColor: \"surface.successSubtle\",\n        borderColor: \"surface.success\",\n      },\n      warning: {\n        backgroundColor: \"surface.warningSubtle\",\n        borderColor: \"surface.warning\",\n      },\n    },\n  },\n});\n\nexport type BadgeVariantProps = NonNullable<RecipeVariantProps<typeof badgeRecipe>>;\n\nexport type BadgeVariant = NonNullable<BadgeVariantProps>[\"colorTheme\"];\n\nexport interface BadgeProps extends StyledProps, HTMLArkProps<\"div\">, BadgeVariantProps {}\n\nconst StyledBadge = styled(ark.div, {}, { baseComponent: true });\n\nexport const Badge = forwardRef<HTMLDivElement, BadgeProps>(({ colorTheme, size, css: cssProp, ...props }, ref) => (\n  <StyledBadge css={css.raw(badgeRecipe.raw({ colorTheme, size }), cssProp)} {...props} ref={ref} />\n));\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,eAAA,GAAA,wBAAA,KAAkB;CACtB,MAAM;EACJ,eAAe;EACf,cAAc;EACd,QAAQ;EACR,OAAO;EACP,OAAO;CACT;CACA,iBAAiB;EACf,YAAY;EACZ,MAAM;CACR;CACA,UAAU;EACR,MAAM;GACJ,OAAO,EACL,WAAW,cACb;GACA,QAAQ,EACN,WAAW,eACb;EACF;EACA,YAAY;GACV,QAAQ;IACN,iBAAiB;IACjB,aAAa;GACf;GACA,QAAQ;IACN,iBAAiB;IACjB,aAAa;GACf;GACA,QAAQ;IACN,iBAAiB;IACjB,aAAa;GACf;GACA,SAAS;IACP,iBAAiB;IACjB,aAAa;GACf;GACA,QAAQ;IACN,iBAAiB;IACjB,aAAa;GACf;GACA,SAAS;IACP,iBAAiB;IACjB,aAAa;GACf;GACA,SAAS;IACP,iBAAiB;IACjB,aAAa;GACf;EACF;CACF;AACF,CAAC;AAQD,MAAM,eAAA,GAAA,wBAAA,QAAqBA,cAAAA,IAAI,KAAK,CAAC,GAAG,EAAE,eAAe,KAAK,CAAC;AAE/D,MAAa,SAAA,GAAA,MAAA,aAAgD,EAAE,YAAY,MAAM,KAAK,SAAS,GAAG,SAAS,QACzG,iBAAA,GAAA,kBAAA,KAAC,aAAD;CAAa,KAAKC,wBAAAA,IAAI,IAAI,YAAY,IAAI;EAAE;EAAY;CAAK,CAAC,GAAG,OAAO;CAAG,GAAI;CAAY;AAAM,CAAA,CAClG"}
+{"version":3,"file":"Badge.js","names":["ark","css"],"sources":["../src/Badge.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\nconst badgeRecipe = cva({\n  base: {\n    paddingInline: \"xsmall\",\n    borderRadius: \"xsmall\",\n    border: \"1px solid\",\n    width: \"fit-content\",\n    color: \"text.default\",\n  },\n  defaultVariants: {\n    colorTheme: \"neutral\",\n    size: \"medium\",\n  },\n  variants: {\n    size: {\n      small: {\n        textStyle: \"label.small\",\n      },\n      medium: {\n        textStyle: \"label.medium\",\n      },\n    },\n    colorTheme: {\n      brand1: {\n        backgroundColor: \"surface.brand.1.moderate\",\n        borderColor: \"surface.brand.1.strong\",\n      },\n      brand2: {\n        backgroundColor: \"surface.brand.2.moderate\",\n        borderColor: \"surface.brand.2.strong\",\n      },\n      brand3: {\n        backgroundColor: \"surface.brand.3.subtle\",\n        borderColor: \"surface.brand.3.strong\",\n      },\n      neutral: {\n        backgroundColor: \"surface.infoSubtle\",\n        borderColor: \"stroke.info\",\n      },\n      danger: {\n        backgroundColor: \"surface.dangerSubtle\",\n        borderColor: \"surface.danger\",\n      },\n      success: {\n        backgroundColor: \"surface.successSubtle\",\n        borderColor: \"surface.success\",\n      },\n      warning: {\n        backgroundColor: \"surface.warningSubtle\",\n        borderColor: \"surface.warning\",\n      },\n    },\n  },\n});\n\nexport type BadgeVariantProps = NonNullable<RecipeVariantProps<typeof badgeRecipe>>;\n\nexport type BadgeVariant = NonNullable<BadgeVariantProps>[\"colorTheme\"];\n\nexport interface BadgeProps extends StyledProps, HTMLArkProps<\"div\">, BadgeVariantProps {}\n\nconst StyledBadge = styled(ark.div, {}, { baseComponent: true });\n\nexport const Badge = forwardRef<HTMLDivElement, BadgeProps>(({ colorTheme, size, css: cssProp, ...props }, ref) => (\n  <StyledBadge css={css.raw(badgeRecipe.raw({ colorTheme, size }), cssProp)} {...props} ref={ref} />\n));\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,eAAA,GAAA,wBAAA,KAAkB;CACtB,MAAM;EACJ,eAAe;EACf,cAAc;EACd,QAAQ;EACR,OAAO;EACP,OAAO;CACT;CACA,iBAAiB;EACf,YAAY;EACZ,MAAM;CACR;CACA,UAAU;EACR,MAAM;GACJ,OAAO,EACL,WAAW,cACb;GACA,QAAQ,EACN,WAAW,eACb;EACF;EACA,YAAY;GACV,QAAQ;IACN,iBAAiB;IACjB,aAAa;GACf;GACA,QAAQ;IACN,iBAAiB;IACjB,aAAa;GACf;GACA,QAAQ;IACN,iBAAiB;IACjB,aAAa;GACf;GACA,SAAS;IACP,iBAAiB;IACjB,aAAa;GACf;GACA,QAAQ;IACN,iBAAiB;IACjB,aAAa;GACf;GACA,SAAS;IACP,iBAAiB;IACjB,aAAa;GACf;GACA,SAAS;IACP,iBAAiB;IACjB,aAAa;GACf;EACF;CACF;AACF,CAAC;AAQD,MAAM,eAAA,GAAA,wBAAA,QAAqBA,sBAAAA,IAAI,KAAK,CAAC,GAAG,EAAE,eAAe,KAAK,CAAC;AAE/D,MAAa,SAAA,GAAA,MAAA,aAAgD,EAAE,YAAY,MAAM,KAAK,SAAS,GAAG,SAAS,QACzG,iBAAA,GAAA,kBAAA,KAAC,aAAD;CAAa,KAAKC,wBAAAA,IAAI,IAAI,YAAY,IAAI;EAAE;EAAY;CAAK,CAAC,GAAG,OAAO;CAAG,GAAI;CAAY;AAAM,CAAA,CAClG"}

package/lib/BlockQuote.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 blockQuoteRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<{

package/lib/BlockQuote.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/BlockQuote.tsx
 /**
@@ -32,7 +32,7 @@ const blockQuoteRecipe = (0, _ndla_styled_system_css.cva)({
 	} },
 	defaultVariants: { variant: "neutral" }
 });
-const StyledBlockQuote = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react.ark.blockquote, {}, { baseComponent: true });
+const StyledBlockQuote = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react_factory.ark.blockquote, {}, { baseComponent: true });
 const BlockQuote = (0, react.forwardRef)(({ variant, css: cssProp, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledBlockQuote, {
 	css: _ndla_styled_system_css.css.raw(blockQuoteRecipe.raw({ variant }), cssProp),
 	...props,

package/lib/BlockQuote.js.map

@@ -1 +1 @@
-{"version":3,"file":"BlockQuote.js","names":["ark","css"],"sources":["../src/BlockQuote.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, type HTMLArkProps } 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\nconst blockQuoteRecipe = cva({\n  base: {\n    borderInlineStart: \"4px solid\",\n    paddingInline: \"medium\",\n  },\n  variants: {\n    variant: {\n      neutral: {\n        borderColor: \"stroke.subtle\",\n        background: \"surface.default\",\n      },\n      brand1: {\n        background: \"surface.brand.1.subtle\",\n        borderColor: \"surface.brand.1.strong\",\n      },\n      brand2: {\n        background: \"surface.brand.2.subtle\",\n        borderColor: \"surface.brand.2.strong\",\n      },\n    },\n  },\n  defaultVariants: {\n    variant: \"neutral\",\n  },\n});\n\nexport type BlockQuoteVariantProps = NonNullable<RecipeVariantProps<typeof blockQuoteRecipe>>;\n\nexport interface BlockQuoteProps extends HTMLArkProps<\"blockquote\">, StyledProps, BlockQuoteVariantProps {}\n\nconst StyledBlockQuote = styled(ark.blockquote, {}, { baseComponent: true });\n\nexport const BlockQuote = forwardRef<HTMLQuoteElement, BlockQuoteProps>(({ variant, css: cssProp, ...props }, ref) => (\n  <StyledBlockQuote css={css.raw(blockQuoteRecipe.raw({ variant }), cssProp)} {...props} ref={ref} />\n));\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,oBAAA,GAAA,wBAAA,KAAuB;CAC3B,MAAM;EACJ,mBAAmB;EACnB,eAAe;CACjB;CACA,UAAU,EACR,SAAS;EACP,SAAS;GACP,aAAa;GACb,YAAY;EACd;EACA,QAAQ;GACN,YAAY;GACZ,aAAa;EACf;EACA,QAAQ;GACN,YAAY;GACZ,aAAa;EACf;CACF,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CAAC;AAMD,MAAM,oBAAA,GAAA,wBAAA,QAA0BA,cAAAA,IAAI,YAAY,CAAC,GAAG,EAAE,eAAe,KAAK,CAAC;AAE3E,MAAa,cAAA,GAAA,MAAA,aAA4D,EAAE,SAAS,KAAK,SAAS,GAAG,SAAS,QAC5G,iBAAA,GAAA,kBAAA,KAAC,kBAAD;CAAkB,KAAKC,wBAAAA,IAAI,IAAI,iBAAiB,IAAI,EAAE,QAAQ,CAAC,GAAG,OAAO;CAAG,GAAI;CAAY;AAAM,CAAA,CACnG"}
+{"version":3,"file":"BlockQuote.js","names":["ark","css"],"sources":["../src/BlockQuote.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, type HTMLArkProps } 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\nconst blockQuoteRecipe = cva({\n  base: {\n    borderInlineStart: \"4px solid\",\n    paddingInline: \"medium\",\n  },\n  variants: {\n    variant: {\n      neutral: {\n        borderColor: \"stroke.subtle\",\n        background: \"surface.default\",\n      },\n      brand1: {\n        background: \"surface.brand.1.subtle\",\n        borderColor: \"surface.brand.1.strong\",\n      },\n      brand2: {\n        background: \"surface.brand.2.subtle\",\n        borderColor: \"surface.brand.2.strong\",\n      },\n    },\n  },\n  defaultVariants: {\n    variant: \"neutral\",\n  },\n});\n\nexport type BlockQuoteVariantProps = NonNullable<RecipeVariantProps<typeof blockQuoteRecipe>>;\n\nexport interface BlockQuoteProps extends HTMLArkProps<\"blockquote\">, StyledProps, BlockQuoteVariantProps {}\n\nconst StyledBlockQuote = styled(ark.blockquote, {}, { baseComponent: true });\n\nexport const BlockQuote = forwardRef<HTMLQuoteElement, BlockQuoteProps>(({ variant, css: cssProp, ...props }, ref) => (\n  <StyledBlockQuote css={css.raw(blockQuoteRecipe.raw({ variant }), cssProp)} {...props} ref={ref} />\n));\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,oBAAA,GAAA,wBAAA,KAAuB;CAC3B,MAAM;EACJ,mBAAmB;EACnB,eAAe;CACjB;CACA,UAAU,EACR,SAAS;EACP,SAAS;GACP,aAAa;GACb,YAAY;EACd;EACA,QAAQ;GACN,YAAY;GACZ,aAAa;EACf;EACA,QAAQ;GACN,YAAY;GACZ,aAAa;EACf;CACF,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CAAC;AAMD,MAAM,oBAAA,GAAA,wBAAA,QAA0BA,sBAAAA,IAAI,YAAY,CAAC,GAAG,EAAE,eAAe,KAAK,CAAC;AAE3E,MAAa,cAAA,GAAA,MAAA,aAA4D,EAAE,SAAS,KAAK,SAAS,GAAG,SAAS,QAC5G,iBAAA,GAAA,kBAAA,KAAC,kBAAD;CAAkB,KAAKC,wBAAAA,IAAI,IAAI,iBAAiB,IAAI,EAAE,QAAQ,CAAC,GAAG,OAAO;CAAG,GAAI;CAAY;AAAM,CAAA,CACnG"}

package/lib/Button.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 { RecipeVariant, StyledProps } from "@ndla/styled-system/types";
 import { type ReactNode } from "react";

package/lib/Button.js

@@ -1,8 +1,8 @@
 const require_Spinner = require("./Spinner.js");
-let _ark_ui_react = require("@ark-ui/react");
 let _ndla_styled_system_css = require("@ndla/styled-system/css");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react_jsx_runtime = require("react/jsx-runtime");
+let _ark_ui_react_factory = require("@ark-ui/react/factory");
 let react = require("react");
 //#region src/Button.tsx
 /**
@@ -200,7 +200,7 @@ const iconButtonRecipe = (0, _ndla_styled_system_css.cva)({
 		}
 	} }
 });
-const StyledButton = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react.ark.button, {}, {
+const StyledButton = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react_factory.ark.button, {}, {
 	baseComponent: true,
 	defaultProps: { type: "button" }
 });

package/lib/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":["ark","Spinner","css"],"sources":["../src/Button.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 { RecipeVariant, StyledProps } from \"@ndla/styled-system/types\";\nimport { type ReactNode, forwardRef, useMemo } from \"react\";\nimport { Spinner } from \"./Spinner\";\n\nexport const buttonBaseRecipe = cva({\n  base: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    gap: \"xxsmall\",\n    cursor: \"pointer\",\n    textDecoration: \"none\",\n    fontWeight: \"bold\",\n    transitionProperty: \"all\",\n    transitionDuration: \"fast\",\n    transitionTimingFunction: \"default\",\n    textAlign: \"center\",\n    borderRadius: \"xsmall\",\n    outline: \"none\",\n    boxShadowColor: \"stroke.default\",\n    _disabled: {\n      cursor: \"not-allowed\",\n      color: \"text.onAction\",\n      background: \"surface.disabled\",\n      boxShadowColor: \"surface.disabled\",\n      \"& svg\": {\n        color: \"text.onAction\",\n      },\n      _hover: {\n        color: \"text.onAction\",\n        background: \"surface.disabled\",\n      },\n    },\n    _focusVisible: {\n      boxShadow: \"inset 0 0 0 var(--shadow-width, 3px) var(--shadow-color)\",\n    },\n    _motionReduce: {\n      transition: \"none\",\n      transitionDuration: \"0s\",\n    },\n  },\n  defaultVariants: {\n    variant: \"primary\",\n  },\n  variants: {\n    variant: {\n      primary: {\n        color: \"text.onAction\",\n        background: \"surface.action\",\n        _hover: {\n          color: \"text.onAction\",\n          background: \"surface.action.hover\",\n        },\n        _active: {\n          color: \"text.onAction\",\n          background: \"surface.action.active\",\n        },\n        _focusVisible: {\n          boxShadow:\n            \"inset 0 0 0 var(--shadow-width, 3px) var(--shadow-color), inset 0px 0px 0px calc(var(--shadow-width, 3px) * 2) currentcolor\",\n        },\n        _on: {\n          background: \"surface.action.selected\",\n        },\n      },\n      secondary: {\n        color: \"text.strong\",\n        background: \"surface.default\",\n        boxShadow: \"inset 0 0 0 1px var(--shadow-color)\",\n        _hover: {\n          background: \"surface.actionSubtle.hover\",\n        },\n        _active: {\n          background: \"surface.actionSubtle.hover.strong\",\n        },\n        _on: {\n          background: \"surface.actionSubtle.active\",\n        },\n      },\n      tertiary: {\n        color: \"text.strong\",\n        background: \"transparent\",\n        _hover: {\n          boxShadow: \"inset 0 0 0 1px var(--shadow-color)\",\n          background: \"surface.actionSubtle.hover\",\n          _focusVisible: {\n            boxShadow: \"inset 0 0 0 var(--shadow-width, 3px) var(--shadow-color)\",\n          },\n        },\n        _active: {\n          borderColor: \"stroke.default\",\n          background: \"surface.actionSubtle.hover.strong\",\n        },\n        _on: {\n          background: \"surface.actionSubtle.active\",\n          boxShadow: \"inset 0 0 0 1px var(--shadow-color)\",\n        },\n      },\n      clear: {\n        background: \"transparent\",\n        color: \"text.strong\",\n        _hover: {\n          color: \"stroke.hover\",\n        },\n      },\n      clearSubtle: {\n        background: \"transparent\",\n        color: \"text.onAction\",\n        _hover: {\n          color: \"surface.actionSubtle.hover.strong\",\n        },\n      },\n      danger: {\n        background: \"surface.danger\",\n        color: \"text.onAction\",\n        _hover: {\n          background: \"surface.danger.hover\",\n        },\n        _active: {\n          background: \"surface.danger.active\",\n        },\n        _focusVisible: {\n          boxShadowColor: \"surface.danger\",\n          boxShadow:\n            \"inset 0 0 0 var(--shadow-width, 3px) var(--shadow-color), inset 0px 0px 0px calc(var(--shadow-width, 3px) * 2) currentcolor\",\n        },\n      },\n      success: {\n        background: \"surface.success\",\n        color: \"text.onAction\",\n        _hover: {\n          background: \"surface.success.hover\",\n        },\n        _active: {\n          background: \"surface.success.active\",\n        },\n        _focusVisible: {\n          boxShadowColor: \"surface.success\",\n          boxShadow:\n            \"inset 0 0 0 var(--shadow-width, 3px) var(--shadow-color), inset 0px 0px 0px calc(var(--shadow-width, 3px) * 2) currentcolor\",\n        },\n      },\n      link: {\n        background: \"transparent\",\n        color: \"text.link\",\n        fontWeight: \"normal\",\n        textDecoration: \"underline\",\n        transitionProperty: \"unset\",\n        transitionTimingFunction: \"unset\",\n        transitionDuration: \"unset\",\n        _hover: {\n          textDecoration: \"none\",\n        },\n        _focusVisible: {\n          boxShadow: \"none\",\n          outline: \"3px\",\n          borderRadius: \"xsmall\",\n          outlineColor: \"stroke.default\",\n          outlineOffset: \"3px\",\n          outlineStyle: \"solid\",\n        },\n      },\n    },\n  },\n});\n\nexport const buttonRecipe = cva({\n  defaultVariants: {\n    size: \"medium\",\n  },\n  variants: {\n    size: {\n      medium: {\n        textStyle: \"label.medium\",\n        paddingInline: \"small\",\n        paddingBlock: \"xxsmall\",\n        minHeight: \"24\",\n        \"& svg\": {\n          marginInline: \"0\",\n          marginBlock: \"0\",\n          width: \"medium\",\n          height: \"medium\",\n        },\n      },\n      small: {\n        textStyle: \"label.small\",\n        minHeight: \"large\",\n        paddingInline: \"xsmall\",\n        paddingBlock: \"4xsmall\",\n        \"& svg\": {\n          marginInline: \"0\",\n          marginBlock: \"0\",\n          width: \"small\",\n          height: \"small\",\n        },\n      },\n    },\n  },\n});\n\nexport const iconButtonRecipe = cva({\n  base: {\n    lineHeight: \"1\",\n    minHeight: \"unset\",\n  },\n  defaultVariants: {\n    size: \"medium\",\n  },\n  variants: {\n    size: {\n      medium: {\n        \"--shadow-width\": \"3px\",\n        height: \"xxlarge\",\n        width: \"xxlarge\",\n        \"& svg\": {\n          marginInline: \"0\",\n          marginBlock: \"0\",\n          width: \"medium\",\n          height: \"medium\",\n        },\n        paddingInline: \"xsmall\",\n        paddingBlock: \"xsmall\",\n      },\n      small: {\n        \"--shadow-width\": \"2px\",\n        height: \"large\",\n        width: \"large\",\n        \"& svg\": {\n          marginInline: \"0\",\n          marginBlock: \"0\",\n          width: \"small\",\n          height: \"small\",\n        },\n        paddingInline: \"xxsmall\",\n        paddingBlock: \"xxsmall\",\n      },\n    },\n  },\n});\n\ntype Variant = RecipeVariant<typeof buttonBaseRecipe>[\"variant\"];\n\ntype ButtonVariant = Exclude<Variant, \"clear\" | \"clearSubtle\">;\n\nexport interface ButtonVariantProps extends NonNullable<RecipeVariantProps<typeof buttonRecipe>> {\n  variant?: ButtonVariant;\n}\n\nexport interface BaseButtonProps extends HTMLArkProps<\"button\">, StyledProps {\n  loading?: boolean;\n  loadingContent?: ReactNode;\n  replaceContent?: boolean;\n}\n\nexport interface ButtonProps extends BaseButtonProps, ButtonVariantProps {}\n\nconst StyledButton = styled(ark.button, {}, { baseComponent: true, defaultProps: { type: \"button\" } });\n\nexport const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(\n  ({ loading, loadingContent: loadingContentProp, replaceContent, onClick: _onClick, children, ...props }, ref) => {\n    const ariaDisabled = loading ? { \"aria-disabled\": true } : {};\n\n    const onClick = useMemo(() => (loading ? undefined : _onClick), [_onClick, loading]);\n\n    const loadingContent = useMemo(() => {\n      return replaceContent ? (\n        loadingContentProp\n      ) : (\n        <>\n          {loadingContentProp}\n          {children}\n        </>\n      );\n    }, [children, loadingContentProp, replaceContent]);\n\n    return (\n      <StyledButton onClick={onClick} {...ariaDisabled} {...props} ref={ref}>\n        {loading ? loadingContent : children}\n      </StyledButton>\n    );\n  },\n);\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ variant, loadingContent, size, css: cssProp, ...props }, ref) => (\n    <BaseButton\n      {...props}\n      loadingContent={loadingContent ?? <Spinner size=\"small\" />}\n      css={css.raw(\n        buttonBaseRecipe.raw({ variant }),\n        variant !== \"link\" ? buttonRecipe.raw({ size }) : undefined,\n        cssProp,\n      )}\n      ref={ref}\n    />\n  ),\n);\n\ntype IconButtonVariant = Exclude<Variant, \"link\">;\n\nexport interface IconButtonVariantProps extends NonNullable<RecipeVariantProps<typeof iconButtonRecipe>> {\n  variant?: IconButtonVariant;\n}\n\nexport interface IconButtonProps extends BaseButtonProps, IconButtonVariantProps {}\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  ({ variant, css: cssProp, loadingContent, size, replaceContent = true, ...props }, ref) => (\n    <BaseButton\n      {...props}\n      css={css.raw(buttonBaseRecipe.raw({ variant }), iconButtonRecipe.raw({ size }), cssProp)}\n      loadingContent={loadingContent ?? <Spinner size=\"small\" />}\n      replaceContent={replaceContent}\n      ref={ref}\n    />\n  ),\n);\n"],"mappings":"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"}
+{"version":3,"file":"Button.js","names":["ark","Spinner","css"],"sources":["../src/Button.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 { RecipeVariant, StyledProps } from \"@ndla/styled-system/types\";\nimport { type ReactNode, forwardRef, useMemo } from \"react\";\nimport { Spinner } from \"./Spinner\";\n\nexport const buttonBaseRecipe = cva({\n  base: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    gap: \"xxsmall\",\n    cursor: \"pointer\",\n    textDecoration: \"none\",\n    fontWeight: \"bold\",\n    transitionProperty: \"all\",\n    transitionDuration: \"fast\",\n    transitionTimingFunction: \"default\",\n    textAlign: \"center\",\n    borderRadius: \"xsmall\",\n    outline: \"none\",\n    boxShadowColor: \"stroke.default\",\n    _disabled: {\n      cursor: \"not-allowed\",\n      color: \"text.onAction\",\n      background: \"surface.disabled\",\n      boxShadowColor: \"surface.disabled\",\n      \"& svg\": {\n        color: \"text.onAction\",\n      },\n      _hover: {\n        color: \"text.onAction\",\n        background: \"surface.disabled\",\n      },\n    },\n    _focusVisible: {\n      boxShadow: \"inset 0 0 0 var(--shadow-width, 3px) var(--shadow-color)\",\n    },\n    _motionReduce: {\n      transition: \"none\",\n      transitionDuration: \"0s\",\n    },\n  },\n  defaultVariants: {\n    variant: \"primary\",\n  },\n  variants: {\n    variant: {\n      primary: {\n        color: \"text.onAction\",\n        background: \"surface.action\",\n        _hover: {\n          color: \"text.onAction\",\n          background: \"surface.action.hover\",\n        },\n        _active: {\n          color: \"text.onAction\",\n          background: \"surface.action.active\",\n        },\n        _focusVisible: {\n          boxShadow:\n            \"inset 0 0 0 var(--shadow-width, 3px) var(--shadow-color), inset 0px 0px 0px calc(var(--shadow-width, 3px) * 2) currentcolor\",\n        },\n        _on: {\n          background: \"surface.action.selected\",\n        },\n      },\n      secondary: {\n        color: \"text.strong\",\n        background: \"surface.default\",\n        boxShadow: \"inset 0 0 0 1px var(--shadow-color)\",\n        _hover: {\n          background: \"surface.actionSubtle.hover\",\n        },\n        _active: {\n          background: \"surface.actionSubtle.hover.strong\",\n        },\n        _on: {\n          background: \"surface.actionSubtle.active\",\n        },\n      },\n      tertiary: {\n        color: \"text.strong\",\n        background: \"transparent\",\n        _hover: {\n          boxShadow: \"inset 0 0 0 1px var(--shadow-color)\",\n          background: \"surface.actionSubtle.hover\",\n          _focusVisible: {\n            boxShadow: \"inset 0 0 0 var(--shadow-width, 3px) var(--shadow-color)\",\n          },\n        },\n        _active: {\n          borderColor: \"stroke.default\",\n          background: \"surface.actionSubtle.hover.strong\",\n        },\n        _on: {\n          background: \"surface.actionSubtle.active\",\n          boxShadow: \"inset 0 0 0 1px var(--shadow-color)\",\n        },\n      },\n      clear: {\n        background: \"transparent\",\n        color: \"text.strong\",\n        _hover: {\n          color: \"stroke.hover\",\n        },\n      },\n      clearSubtle: {\n        background: \"transparent\",\n        color: \"text.onAction\",\n        _hover: {\n          color: \"surface.actionSubtle.hover.strong\",\n        },\n      },\n      danger: {\n        background: \"surface.danger\",\n        color: \"text.onAction\",\n        _hover: {\n          background: \"surface.danger.hover\",\n        },\n        _active: {\n          background: \"surface.danger.active\",\n        },\n        _focusVisible: {\n          boxShadowColor: \"surface.danger\",\n          boxShadow:\n            \"inset 0 0 0 var(--shadow-width, 3px) var(--shadow-color), inset 0px 0px 0px calc(var(--shadow-width, 3px) * 2) currentcolor\",\n        },\n      },\n      success: {\n        background: \"surface.success\",\n        color: \"text.onAction\",\n        _hover: {\n          background: \"surface.success.hover\",\n        },\n        _active: {\n          background: \"surface.success.active\",\n        },\n        _focusVisible: {\n          boxShadowColor: \"surface.success\",\n          boxShadow:\n            \"inset 0 0 0 var(--shadow-width, 3px) var(--shadow-color), inset 0px 0px 0px calc(var(--shadow-width, 3px) * 2) currentcolor\",\n        },\n      },\n      link: {\n        background: \"transparent\",\n        color: \"text.link\",\n        fontWeight: \"normal\",\n        textDecoration: \"underline\",\n        transitionProperty: \"unset\",\n        transitionTimingFunction: \"unset\",\n        transitionDuration: \"unset\",\n        _hover: {\n          textDecoration: \"none\",\n        },\n        _focusVisible: {\n          boxShadow: \"none\",\n          outline: \"3px\",\n          borderRadius: \"xsmall\",\n          outlineColor: \"stroke.default\",\n          outlineOffset: \"3px\",\n          outlineStyle: \"solid\",\n        },\n      },\n    },\n  },\n});\n\nexport const buttonRecipe = cva({\n  defaultVariants: {\n    size: \"medium\",\n  },\n  variants: {\n    size: {\n      medium: {\n        textStyle: \"label.medium\",\n        paddingInline: \"small\",\n        paddingBlock: \"xxsmall\",\n        minHeight: \"24\",\n        \"& svg\": {\n          marginInline: \"0\",\n          marginBlock: \"0\",\n          width: \"medium\",\n          height: \"medium\",\n        },\n      },\n      small: {\n        textStyle: \"label.small\",\n        minHeight: \"large\",\n        paddingInline: \"xsmall\",\n        paddingBlock: \"4xsmall\",\n        \"& svg\": {\n          marginInline: \"0\",\n          marginBlock: \"0\",\n          width: \"small\",\n          height: \"small\",\n        },\n      },\n    },\n  },\n});\n\nexport const iconButtonRecipe = cva({\n  base: {\n    lineHeight: \"1\",\n    minHeight: \"unset\",\n  },\n  defaultVariants: {\n    size: \"medium\",\n  },\n  variants: {\n    size: {\n      medium: {\n        \"--shadow-width\": \"3px\",\n        height: \"xxlarge\",\n        width: \"xxlarge\",\n        \"& svg\": {\n          marginInline: \"0\",\n          marginBlock: \"0\",\n          width: \"medium\",\n          height: \"medium\",\n        },\n        paddingInline: \"xsmall\",\n        paddingBlock: \"xsmall\",\n      },\n      small: {\n        \"--shadow-width\": \"2px\",\n        height: \"large\",\n        width: \"large\",\n        \"& svg\": {\n          marginInline: \"0\",\n          marginBlock: \"0\",\n          width: \"small\",\n          height: \"small\",\n        },\n        paddingInline: \"xxsmall\",\n        paddingBlock: \"xxsmall\",\n      },\n    },\n  },\n});\n\ntype Variant = RecipeVariant<typeof buttonBaseRecipe>[\"variant\"];\n\ntype ButtonVariant = Exclude<Variant, \"clear\" | \"clearSubtle\">;\n\nexport interface ButtonVariantProps extends NonNullable<RecipeVariantProps<typeof buttonRecipe>> {\n  variant?: ButtonVariant;\n}\n\nexport interface BaseButtonProps extends HTMLArkProps<\"button\">, StyledProps {\n  loading?: boolean;\n  loadingContent?: ReactNode;\n  replaceContent?: boolean;\n}\n\nexport interface ButtonProps extends BaseButtonProps, ButtonVariantProps {}\n\nconst StyledButton = styled(ark.button, {}, { baseComponent: true, defaultProps: { type: \"button\" } });\n\nexport const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(\n  ({ loading, loadingContent: loadingContentProp, replaceContent, onClick: _onClick, children, ...props }, ref) => {\n    const ariaDisabled = loading ? { \"aria-disabled\": true } : {};\n\n    const onClick = useMemo(() => (loading ? undefined : _onClick), [_onClick, loading]);\n\n    const loadingContent = useMemo(() => {\n      return replaceContent ? (\n        loadingContentProp\n      ) : (\n        <>\n          {loadingContentProp}\n          {children}\n        </>\n      );\n    }, [children, loadingContentProp, replaceContent]);\n\n    return (\n      <StyledButton onClick={onClick} {...ariaDisabled} {...props} ref={ref}>\n        {loading ? loadingContent : children}\n      </StyledButton>\n    );\n  },\n);\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ variant, loadingContent, size, css: cssProp, ...props }, ref) => (\n    <BaseButton\n      {...props}\n      loadingContent={loadingContent ?? <Spinner size=\"small\" />}\n      css={css.raw(\n        buttonBaseRecipe.raw({ variant }),\n        variant !== \"link\" ? buttonRecipe.raw({ size }) : undefined,\n        cssProp,\n      )}\n      ref={ref}\n    />\n  ),\n);\n\ntype IconButtonVariant = Exclude<Variant, \"link\">;\n\nexport interface IconButtonVariantProps extends NonNullable<RecipeVariantProps<typeof iconButtonRecipe>> {\n  variant?: IconButtonVariant;\n}\n\nexport interface IconButtonProps extends BaseButtonProps, IconButtonVariantProps {}\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  ({ variant, css: cssProp, loadingContent, size, replaceContent = true, ...props }, ref) => (\n    <BaseButton\n      {...props}\n      css={css.raw(buttonBaseRecipe.raw({ variant }), iconButtonRecipe.raw({ size }), cssProp)}\n      loadingContent={loadingContent ?? <Spinner size=\"small\" />}\n      replaceContent={replaceContent}\n      ref={ref}\n    />\n  ),\n);\n"],"mappings":"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"}

package/lib/Card/Card.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { type HTMLArkProps } from "@ark-ui/react";
+import { type HTMLArkProps } from "@ark-ui/react/factory";
 import type { StyledProps, RecipeVariantProps } from "@ndla/styled-system/types";
 import { type TextProps } from "../Text";
 declare const cardRecipe: import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"root" | "content" | "title" | "image", {
@@ -27,7 +27,7 @@ declare const cardRecipe: import("@ndla/styled-system/types").SlotRecipeRuntimeF
 export type CardVariantProps = NonNullable<RecipeVariantProps<typeof cardRecipe>>;
 export interface CardRootProps extends HTMLArkProps<"article">, StyledProps, CardVariantProps {
 }
-export declare const CardRoot: import("@ndla/styled-system/jsx").StyleContextProvider<import("react").ForwardRefExoticComponent<import("react").ClassAttributes<HTMLElement> & import("react").HTMLAttributes<HTMLElement> & import("@ark-ui/react").PolymorphicProps>, import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"root" | "content" | "title" | "image", {
+export declare const CardRoot: import("@ndla/styled-system/jsx").StyleContextProvider<import("react").ForwardRefExoticComponent<import("react").ClassAttributes<HTMLElement> & import("react").HTMLAttributes<HTMLElement> & import("@ark-ui/react/factory").PolymorphicProps>, import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"root" | "content" | "title" | "image", {
     nonInteractive: {
         true: {};
         false: {
@@ -46,6 +46,6 @@ export declare const CardRoot: import("@ndla/styled-system/jsx").StyleContextPro
 interface CardHeadingProps extends StyledProps, Omit<HTMLArkProps<"p">, "color">, TextProps {
 }
 export declare const CardHeading: import("@ndla/styled-system/jsx").StyleContextConsumer<import("react").ForwardRefExoticComponent<CardHeadingProps & import("react").RefAttributes<HTMLHeadingElement>>>;
-export declare const CardContent: import("@ndla/styled-system/jsx").StyleContextConsumer<import("react").ForwardRefExoticComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("@ark-ui/react").PolymorphicProps>>;
+export declare const CardContent: import("@ndla/styled-system/jsx").StyleContextConsumer<import("react").ForwardRefExoticComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("@ark-ui/react/factory").PolymorphicProps>>;
 export declare const CardImage: import("@ndla/styled-system/jsx").StyleContextConsumer<import("react").ForwardRefExoticComponent<Omit<import("..").ImageProps, "ref"> & import("react").RefAttributes<HTMLImageElement>>>;
 export {};

package/lib/Card/Card.js

@@ -1,9 +1,9 @@
 const require_Image = require("../Image.js");
 const require_Text = require("../Text.js");
-let _ark_ui_react = require("@ark-ui/react");
 let _ndla_styled_system_css = require("@ndla/styled-system/css");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react_jsx_runtime = require("react/jsx-runtime");
+let _ark_ui_react_factory = require("@ark-ui/react/factory");
 let react = require("react");
 //#region src/Card/Card.tsx
 /**
@@ -65,14 +65,14 @@ const { withProvider, withContext } = (0, _ndla_styled_system_jsx.createStyleCon
 		} }
 	} }
 }));
-const CardRoot = withProvider(_ark_ui_react.ark.article, "root", { baseComponent: true });
+const CardRoot = withProvider(_ark_ui_react_factory.ark.article, "root", { baseComponent: true });
 const CardHeading = withContext((0, react.forwardRef)(({ textStyle = "label.large", fontWeight = "bold", ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Heading, {
 	textStyle,
 	fontWeight,
 	...props,
 	ref
 })), "title");
-const CardContent = withContext(_ark_ui_react.ark.div, "content", { baseComponent: true });
+const CardContent = withContext(_ark_ui_react_factory.ark.div, "content", { baseComponent: true });
 const CardImage = withContext(require_Image.Image, "image");
 //#endregion
 exports.CardContent = CardContent;

package/lib/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","names":["ark","Heading","Image"],"sources":["../../src/Card/Card.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, type HTMLArkProps } from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps, RecipeVariantProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\nimport { Image } from \"../Image\";\nimport { Heading, type TextProps } from \"../Text\";\n\nconst cardRecipe = sva({\n  slots: [\"root\", \"title\", \"content\", \"image\"],\n  base: {\n    root: {\n      position: \"relative\",\n      outline: \"1px solid\",\n      borderRadius: \"xsmall\",\n      outlineColor: \"transparent\",\n      outlineOffset: \"-1px\",\n      height: \"100%\",\n      boxShadow: \"xsmall\",\n      transitionDuration: \"fast\",\n      transitionProperty: \"background, color, outline-color\",\n      transitionTimingFunction: \"default\",\n      background: \"surface.default\",\n      overflow: \"hidden\",\n    },\n    content: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"small\",\n      paddingBlockStart: \"small\",\n      paddingBlockEnd: \"medium\",\n      paddingInline: \"small\",\n    },\n    title: {\n      textDecoration: \"underline\",\n      _hover: {\n        textDecoration: \"none\",\n      },\n    },\n    image: {\n      height: \"200px\",\n      objectFit: \"cover\",\n      width: \"100%\",\n    },\n  },\n  defaultVariants: {\n    nonInteractive: false,\n  },\n  variants: {\n    nonInteractive: {\n      true: {},\n      false: {\n        root: {\n          _hover: {\n            background: \"surface.hover\",\n            outlineColor: \"stroke.hover\",\n          },\n          _active: {\n            background: \"surface.active\",\n          },\n        },\n      },\n    },\n  },\n});\n\nconst { withProvider, withContext } = createStyleContext(cardRecipe);\n\nexport type CardVariantProps = NonNullable<RecipeVariantProps<typeof cardRecipe>>;\n\nexport interface CardRootProps extends HTMLArkProps<\"article\">, StyledProps, CardVariantProps {}\n\nexport const CardRoot = withProvider(ark.article, \"root\", { baseComponent: true });\n\ninterface CardHeadingProps extends StyledProps, Omit<HTMLArkProps<\"p\">, \"color\">, TextProps {}\n\nconst InternalCardHeading = forwardRef<HTMLHeadingElement, CardHeadingProps>(\n  ({ textStyle = \"label.large\", fontWeight = \"bold\", ...props }, ref) => (\n    <Heading textStyle={textStyle} fontWeight={fontWeight} {...props} ref={ref} />\n  ),\n);\n\nexport const CardHeading = withContext(InternalCardHeading, \"title\");\n\nexport const CardContent = withContext(ark.div, \"content\", { baseComponent: true });\n\nexport const CardImage = withContext(Image, \"image\");\n"],"mappings":";;;;;;;;;;;;;;;AA0EA,MAAM,EAAE,cAAc,iBAAA,GAAA,wBAAA,qBAAA,GAAA,wBAAA,KA1DC;CACrB,OAAO;EAAC;EAAQ;EAAS;EAAW;CAAO;CAC3C,MAAM;EACJ,MAAM;GACJ,UAAU;GACV,SAAS;GACT,cAAc;GACd,cAAc;GACd,eAAe;GACf,QAAQ;GACR,WAAW;GACX,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,YAAY;GACZ,UAAU;EACZ;EACA,SAAS;GACP,SAAS;GACT,eAAe;GACf,KAAK;GACL,mBAAmB;GACnB,iBAAiB;GACjB,eAAe;EACjB;EACA,OAAO;GACL,gBAAgB;GAChB,QAAQ,EACN,gBAAgB,OAClB;EACF;EACA,OAAO;GACL,QAAQ;GACR,WAAW;GACX,OAAO;EACT;CACF;CACA,iBAAiB,EACf,gBAAgB,MAClB;CACA,UAAU,EACR,gBAAgB;EACd,MAAM,CAAC;EACP,OAAO,EACL,MAAM;GACJ,QAAQ;IACN,YAAY;IACZ,cAAc;GAChB;GACA,SAAS,EACP,YAAY,iBACd;EACF,EACF;CACF,EACF;AACF,CAEkE,CAAC;AAMnE,MAAa,WAAW,aAAaA,cAAAA,IAAI,SAAS,QAAQ,EAAE,eAAe,KAAK,CAAC;AAUjF,MAAa,cAAc,aANrB,GAAA,MAAA,aACH,EAAE,YAAY,eAAe,aAAa,QAAQ,GAAG,SAAS,QAC7D,iBAAA,GAAA,kBAAA,KAACC,aAAAA,SAAD;CAAoB;CAAuB;CAAY,GAAI;CAAY;AAAM,CAAA,CAI1C,GAAqB,OAAO;AAEnE,MAAa,cAAc,YAAYD,cAAAA,IAAI,KAAK,WAAW,EAAE,eAAe,KAAK,CAAC;AAElF,MAAa,YAAY,YAAYE,cAAAA,OAAO,OAAO"}
+{"version":3,"file":"Card.js","names":["ark","Heading","Image"],"sources":["../../src/Card/Card.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, type HTMLArkProps } from \"@ark-ui/react/factory\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps, RecipeVariantProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\nimport { Image } from \"../Image\";\nimport { Heading, type TextProps } from \"../Text\";\n\nconst cardRecipe = sva({\n  slots: [\"root\", \"title\", \"content\", \"image\"],\n  base: {\n    root: {\n      position: \"relative\",\n      outline: \"1px solid\",\n      borderRadius: \"xsmall\",\n      outlineColor: \"transparent\",\n      outlineOffset: \"-1px\",\n      height: \"100%\",\n      boxShadow: \"xsmall\",\n      transitionDuration: \"fast\",\n      transitionProperty: \"background, color, outline-color\",\n      transitionTimingFunction: \"default\",\n      background: \"surface.default\",\n      overflow: \"hidden\",\n    },\n    content: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"small\",\n      paddingBlockStart: \"small\",\n      paddingBlockEnd: \"medium\",\n      paddingInline: \"small\",\n    },\n    title: {\n      textDecoration: \"underline\",\n      _hover: {\n        textDecoration: \"none\",\n      },\n    },\n    image: {\n      height: \"200px\",\n      objectFit: \"cover\",\n      width: \"100%\",\n    },\n  },\n  defaultVariants: {\n    nonInteractive: false,\n  },\n  variants: {\n    nonInteractive: {\n      true: {},\n      false: {\n        root: {\n          _hover: {\n            background: \"surface.hover\",\n            outlineColor: \"stroke.hover\",\n          },\n          _active: {\n            background: \"surface.active\",\n          },\n        },\n      },\n    },\n  },\n});\n\nconst { withProvider, withContext } = createStyleContext(cardRecipe);\n\nexport type CardVariantProps = NonNullable<RecipeVariantProps<typeof cardRecipe>>;\n\nexport interface CardRootProps extends HTMLArkProps<\"article\">, StyledProps, CardVariantProps {}\n\nexport const CardRoot = withProvider(ark.article, \"root\", { baseComponent: true });\n\ninterface CardHeadingProps extends StyledProps, Omit<HTMLArkProps<\"p\">, \"color\">, TextProps {}\n\nconst InternalCardHeading = forwardRef<HTMLHeadingElement, CardHeadingProps>(\n  ({ textStyle = \"label.large\", fontWeight = \"bold\", ...props }, ref) => (\n    <Heading textStyle={textStyle} fontWeight={fontWeight} {...props} ref={ref} />\n  ),\n);\n\nexport const CardHeading = withContext(InternalCardHeading, \"title\");\n\nexport const CardContent = withContext(ark.div, \"content\", { baseComponent: true });\n\nexport const CardImage = withContext(Image, \"image\");\n"],"mappings":";;;;;;;;;;;;;;;AA0EA,MAAM,EAAE,cAAc,iBAAA,GAAA,wBAAA,qBAAA,GAAA,wBAAA,KA1DC;CACrB,OAAO;EAAC;EAAQ;EAAS;EAAW;CAAO;CAC3C,MAAM;EACJ,MAAM;GACJ,UAAU;GACV,SAAS;GACT,cAAc;GACd,cAAc;GACd,eAAe;GACf,QAAQ;GACR,WAAW;GACX,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,YAAY;GACZ,UAAU;EACZ;EACA,SAAS;GACP,SAAS;GACT,eAAe;GACf,KAAK;GACL,mBAAmB;GACnB,iBAAiB;GACjB,eAAe;EACjB;EACA,OAAO;GACL,gBAAgB;GAChB,QAAQ,EACN,gBAAgB,OAClB;EACF;EACA,OAAO;GACL,QAAQ;GACR,WAAW;GACX,OAAO;EACT;CACF;CACA,iBAAiB,EACf,gBAAgB,MAClB;CACA,UAAU,EACR,gBAAgB;EACd,MAAM,CAAC;EACP,OAAO,EACL,MAAM;GACJ,QAAQ;IACN,YAAY;IACZ,cAAc;GAChB;GACA,SAAS,EACP,YAAY,iBACd;EACF,EACF;CACF,EACF;AACF,CAEkE,CAAC;AAMnE,MAAa,WAAW,aAAaA,sBAAAA,IAAI,SAAS,QAAQ,EAAE,eAAe,KAAK,CAAC;AAUjF,MAAa,cAAc,aANrB,GAAA,MAAA,aACH,EAAE,YAAY,eAAe,aAAa,QAAQ,GAAG,SAAS,QAC7D,iBAAA,GAAA,kBAAA,KAACC,aAAAA,SAAD;CAAoB;CAAuB;CAAY,GAAI;CAAY;AAAM,CAAA,CAI1C,GAAqB,OAAO;AAEnE,MAAa,cAAc,YAAYD,sBAAAA,IAAI,KAAK,WAAW,EAAE,eAAe,KAAK,CAAC;AAElF,MAAa,YAAY,YAAYE,cAAAA,OAAO,OAAO"}

package/lib/Checkbox.d.ts

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

package/lib/Checkbox.js

@@ -1,8 +1,9 @@
 const require_Text = require("./Text.js");
-let _ark_ui_react = require("@ark-ui/react");
 let _ndla_styled_system_css = require("@ndla/styled-system/css");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react_jsx_runtime = require("react/jsx-runtime");
+require("@ark-ui/react/factory");
+let _ark_ui_react_checkbox = require("@ark-ui/react/checkbox");
 //#region src/Checkbox.tsx
 /**
 * Copyright (c) 2024-present, NDLA.
@@ -12,7 +13,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.checkboxAnatomy.keys(),
+	slots: _ark_ui_react_checkbox.checkboxAnatomy.keys(),
 	base: {
 		root: {
 			userSelect: "none",
@@ -193,9 +194,9 @@ const { withProvider, withContext } = (0, _ndla_styled_system_jsx.createStyleCon
 		}
 	} }
 }));
-const CheckboxRoot = withProvider(_ark_ui_react.Checkbox.Root, "root", { baseComponent: true });
-const CheckboxIndicator = withContext(_ark_ui_react.Checkbox.Indicator, "indicator", { baseComponent: true });
-const InternalCheckboxLabel = withContext(_ark_ui_react.Checkbox.Label, "label");
+const CheckboxRoot = withProvider(_ark_ui_react_checkbox.Checkbox.Root, "root", { baseComponent: true });
+const CheckboxIndicator = withContext(_ark_ui_react_checkbox.Checkbox.Indicator, "indicator", { baseComponent: true });
+const InternalCheckboxLabel = withContext(_ark_ui_react_checkbox.Checkbox.Label, "label");
 const CheckboxLabel = ({ textStyle = "label.medium", children, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalCheckboxLabel, {
 	...props,
 	asChild: true,
@@ -204,9 +205,9 @@ const CheckboxLabel = ({ textStyle = "label.medium", children, ...props }) => /*
 		children
 	})
 });
-const CheckboxControl = withContext(_ark_ui_react.Checkbox.Control, "control", { baseComponent: true });
-const CheckboxGroup = withProvider(_ark_ui_react.Checkbox.Group, "group", { baseComponent: true });
-const CheckboxHiddenInput = _ark_ui_react.Checkbox.HiddenInput;
+const CheckboxControl = withContext(_ark_ui_react_checkbox.Checkbox.Control, "control", { baseComponent: true });
+const CheckboxGroup = withProvider(_ark_ui_react_checkbox.Checkbox.Group, "group", { baseComponent: true });
+const CheckboxHiddenInput = _ark_ui_react_checkbox.Checkbox.HiddenInput;
 //#endregion
 exports.CheckboxControl = CheckboxControl;
 exports.CheckboxGroup = CheckboxGroup;

package/lib/Checkbox.js.map

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

package/lib/Combobox.d.ts

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

package/lib/Combobox.js

@@ -1,10 +1,10 @@
 const require_Text = require("./Text.js");
 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_combobox = require("@ark-ui/react/combobox");
 //#region src/Combobox.tsx
 /**
 * Copyright (c) 2024-present, NDLA.
@@ -14,7 +14,7 @@ let react = require("react");
 *
 */
 const { withProvider, withContext } = (0, _ndla_styled_system_jsx.createStyleContext)((0, _ndla_styled_system_css.sva)({
-	slots: _ark_ui_react.comboboxAnatomy.keys(),
+	slots: _ark_ui_react_combobox.comboboxAnatomy.keys(),
 	base: {
 		root: {
 			display: "flex",
@@ -117,7 +117,7 @@ const { withProvider, withContext } = (0, _ndla_styled_system_jsx.createStyleCon
 		}
 	}
 }));
-const InternalComboboxRoot = withProvider(_ark_ui_react.Combobox.Root, "root", { baseComponent: true });
+const InternalComboboxRoot = withProvider(_ark_ui_react_combobox.Combobox.Root, "root", { baseComponent: true });
 const ComboboxRoot = ({ lazyMount = true, unmountOnExit = true, ...props }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalComboboxRoot, {
 		lazyMount,
@@ -125,15 +125,15 @@ const ComboboxRoot = ({ lazyMount = true, unmountOnExit = true, ...props }) => {
 		...props
 	});
 };
-const ComboboxClearTrigger = withContext(_ark_ui_react.Combobox.ClearTrigger, "clearTrigger", { baseComponent: true });
-const ComboboxContentStandalone = withContext(_ark_ui_react.Combobox.Content, "content", { baseComponent: true });
+const ComboboxClearTrigger = withContext(_ark_ui_react_combobox.Combobox.ClearTrigger, "clearTrigger", { baseComponent: true });
+const ComboboxContentStandalone = withContext(_ark_ui_react_combobox.Combobox.Content, "content", { baseComponent: true });
 const ComboboxContent = (0, react.forwardRef)((props, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComboboxPositioner, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComboboxContentStandalone, {
 	ref,
 	...props
 }) }));
-const ComboboxControl = withContext(_ark_ui_react.Combobox.Control, "control", { baseComponent: true });
-const ComboboxInput = withContext(_ark_ui_react.Combobox.Input, "input", { baseComponent: true });
-const InternalComboboxItemGroupLabel = withContext(_ark_ui_react.Combobox.ItemGroupLabel, "itemGroupLabel");
+const ComboboxControl = withContext(_ark_ui_react_combobox.Combobox.Control, "control", { baseComponent: true });
+const ComboboxInput = withContext(_ark_ui_react_combobox.Combobox.Input, "input", { baseComponent: true });
+const InternalComboboxItemGroupLabel = withContext(_ark_ui_react_combobox.Combobox.ItemGroupLabel, "itemGroupLabel");
 const ComboboxItemGroupLabel = ({ children, textStyle = "label.small", fontWeight = "bold", ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalComboboxItemGroupLabel, {
 	asChild: true,
 	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
@@ -145,10 +145,10 @@ const ComboboxItemGroupLabel = ({ children, textStyle = "label.small", fontWeigh
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children })
 	})
 });
-const ComboboxItemGroup = withContext(_ark_ui_react.Combobox.ItemGroup, "itemGroup", { baseComponent: true });
-const ComboboxItemIndicator = withContext(_ark_ui_react.Combobox.ItemIndicator, "itemIndicator", { baseComponent: true });
-const ComboboxItem = withContext(_ark_ui_react.Combobox.Item, "item", { baseComponent: true });
-const InternalComboboxItemText = withContext(_ark_ui_react.Combobox.ItemText, "itemText");
+const ComboboxItemGroup = withContext(_ark_ui_react_combobox.Combobox.ItemGroup, "itemGroup", { baseComponent: true });
+const ComboboxItemIndicator = withContext(_ark_ui_react_combobox.Combobox.ItemIndicator, "itemIndicator", { baseComponent: true });
+const ComboboxItem = withContext(_ark_ui_react_combobox.Combobox.Item, "item", { baseComponent: true });
+const InternalComboboxItemText = withContext(_ark_ui_react_combobox.Combobox.ItemText, "itemText");
 const ComboboxItemText = ({ textStyle = "label.medium", fontWeight = "bold", children, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalComboboxItemText, {
 	asChild: true,
 	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
@@ -160,7 +160,7 @@ const ComboboxItemText = ({ textStyle = "label.medium", fontWeight = "bold", chi
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children })
 	})
 });
-const InternalComboboxLabel = withContext(_ark_ui_react.Combobox.Label, "label");
+const InternalComboboxLabel = withContext(_ark_ui_react_combobox.Combobox.Label, "label");
 const ComboboxLabel = ({ textStyle = "label.medium", fontWeight = "bold", ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalComboboxLabel, {
 	asChild: true,
 	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Label.Label, {
@@ -169,9 +169,9 @@ const ComboboxLabel = ({ textStyle = "label.medium", fontWeight = "bold", ...pro
 		...props
 	})
 });
-const ComboboxPositioner = withContext(_ark_ui_react.Combobox.Positioner, "positioner", { baseComponent: true });
-const ComboboxTrigger = withContext(_ark_ui_react.Combobox.Trigger, "trigger", { baseComponent: true });
-const ComboboxList = withContext(_ark_ui_react.Combobox.List, "list", { baseComponent: true });
+const ComboboxPositioner = withContext(_ark_ui_react_combobox.Combobox.Positioner, "positioner", { baseComponent: true });
+const ComboboxTrigger = withContext(_ark_ui_react_combobox.Combobox.Trigger, "trigger", { baseComponent: true });
+const ComboboxList = withContext(_ark_ui_react_combobox.Combobox.List, "list", { baseComponent: true });
 //#endregion
 exports.ComboboxClearTrigger = ComboboxClearTrigger;
 exports.ComboboxContent = ComboboxContent;

package/lib/Combobox.js.map

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

package/lib/DatePicker.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { DatePicker } from "@ark-ui/react";
+import { DatePicker } from "@ark-ui/react/date-picker";
 import { type StyledProps } from "@ndla/styled-system/jsx";
 import { type RefAttributes } from "react";
 import type { TextProps } from "./Text";
@@ -42,4 +42,4 @@ export declare const DatePickerViewControl: import("@ndla/styled-system/jsx").St
 export declare const DatePickerView: import("@ndla/styled-system/jsx").StyleContextConsumer<import("react").ForwardRefExoticComponent<DatePicker.ViewProps & RefAttributes<HTMLDivElement>>>;
 export declare const DatePickerViewTrigger: import("@ndla/styled-system/jsx").StyleContextConsumer<import("react").ForwardRefExoticComponent<DatePicker.ViewTriggerProps & RefAttributes<HTMLButtonElement>>>;
 export declare const DatePickerYearSelect: import("@ndla/styled-system/jsx").StyleContextConsumer<import("react").ForwardRefExoticComponent<DatePicker.YearSelectProps & RefAttributes<HTMLSelectElement>>>;
-export { DatePickerContext } from "@ark-ui/react";
+export { DatePickerContext } from "@ark-ui/react/date-picker";