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

package/dist/styles.css

@@ -1536,7 +1536,7 @@
     max-width: 56px;
 }
 
-  .disabled\:bg_surface\.disabled\.subtle:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']) {
+  .disabled\:bg_surface\.disabled\.subtle:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
     background: var(--colors-surface-disabled-subtle);
 }
 
@@ -1552,7 +1552,7 @@
     animation: var(--animations-collapse-out);
 }
 
-  .disabled\:bg_surface\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']) {
+  .disabled\:bg_surface\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
     background: var(--colors-surface-disabled);
 }
 
@@ -1700,7 +1700,7 @@
     margin-block: 0;
 }
 
-  .disabled\:bd-c_stroke\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']) {
+  .disabled\:bd-c_stroke\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
     border-color: var(--colors-stroke-disabled);
 }
 
@@ -1776,7 +1776,7 @@
     border-bottom: 1px solid;
 }
 
-  .disabled\:bd-c_stroke\.default:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']) {
+  .disabled\:bd-c_stroke\.default:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
     border-color: var(--colors-stroke-default);
 }
 
@@ -1793,15 +1793,15 @@
     transition-property: background, border-color, border, border-radius;
 }
 
-  .disabled\:cursor_not-allowed:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']) {
+  .disabled\:cursor_not-allowed:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
     cursor: not-allowed;
 }
 
-  .disabled\:bx-sh-c_stroke\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']) {
+  .disabled\:bx-sh-c_stroke\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
     --shadow-color: var(--colors-stroke-disabled);
 }
 
-  .disabled\:c_text\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']) {
+  .disabled\:c_text\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
     color: var(--colors-text-disabled);
 }
 
@@ -1862,11 +1862,11 @@
     margin-inline-start: var(--spacing-medium);
 }
 
-  .disabled\:c_text\.onAction:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']) {
+  .disabled\:c_text\.onAction:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
     color: var(--colors-text-on-action);
 }
 
-  .disabled\:bx-sh-c_surface\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']) {
+  .disabled\:bx-sh-c_surface\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
     --shadow-color: var(--colors-surface-disabled);
 }
 
@@ -1902,7 +1902,7 @@
     display: flex;
 }
 
-  .disabled\:c_stroke\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']) {
+  .disabled\:c_stroke\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
     color: var(--colors-stroke-disabled);
 }
 
@@ -1961,7 +1961,7 @@
     padding-inline-end: var(--spacing-xsmall);
 }
 
-  .disabled\:c_text\.subtle:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']) {
+  .disabled\:c_text\.subtle:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
     color: var(--colors-text-subtle);
 }
 
@@ -2526,15 +2526,15 @@
     color: var(--colors-text-on-action);
 }
 
-  .disabled\:hover\:bg_surface\.disabled\.subtle:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']):is(:hover, [data-hover]) {
+  .disabled\:hover\:bg_surface\.disabled\.subtle:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]):is(:hover, [data-hover]) {
     background: var(--colors-surface-disabled-subtle);
 }
 
-  .disabled\:hover\:bg_surface\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']):is(:hover, [data-hover]) {
+  .disabled\:hover\:bg_surface\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]):is(:hover, [data-hover]) {
     background: var(--colors-surface-disabled);
 }
 
-  .disabled\:checked\:bg_surface\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
+  .disabled\:checked\:bg_surface\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
     background: var(--colors-surface-disabled);
 }
 
@@ -2550,7 +2550,7 @@
     background: var(--colors-surface-hover);
 }
 
-  .disabled\:hover\:bg_surface\.default:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']):is(:hover, [data-hover]) {
+  .disabled\:hover\:bg_surface\.default:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]):is(:hover, [data-hover]) {
     background: var(--colors-surface-default);
 }
 
@@ -2566,19 +2566,19 @@
     background: var(--colors-surface-hover);
 }
 
-  .disabled\:highlighted\:bg_surface\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled='true'])[data-highlighted] {
+  .disabled\:highlighted\:bg_surface\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled=true])[data-highlighted] {
     background: var(--colors-surface-disabled);
 }
 
-  .disabled\:selected\:bg_surface\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']):is([aria-selected=true], [data-selected]) {
+  .disabled\:selected\:bg_surface\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]):is([aria-selected=true], [data-selected]) {
     background: var(--colors-surface-disabled);
 }
 
-  .disabled\:hover\:bd-c_stroke\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']):is(:hover, [data-hover]) {
+  .disabled\:hover\:bd-c_stroke\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]):is(:hover, [data-hover]) {
     border-color: var(--colors-stroke-disabled);
 }
 
-  .disabled\:checked\:bd-c_stroke\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
+  .disabled\:checked\:bd-c_stroke\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
     border-color: var(--colors-stroke-disabled);
 }
 
@@ -2590,11 +2590,11 @@
     border-color: var(--colors-stroke-error);
 }
 
-  .disabled\:hover\:td_none:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']):is(:hover, [data-hover]) {
+  .disabled\:hover\:td_none:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]):is(:hover, [data-hover]) {
     text-decoration: none;
 }
 
-  .disabled\:hover\:bd-c_stroke\.default:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']):is(:hover, [data-hover]) {
+  .disabled\:hover\:bd-c_stroke\.default:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]):is(:hover, [data-hover]) {
     border-color: var(--colors-stroke-default);
 }
 
@@ -2606,11 +2606,11 @@
     border-right: none;
 }
 
-  .disabled\:hover\:bx-sh-c_stroke\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']):is(:hover, [data-hover]) {
+  .disabled\:hover\:bx-sh-c_stroke\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]):is(:hover, [data-hover]) {
     --shadow-color: var(--colors-stroke-disabled);
 }
 
-  .disabled\:hover\:c_text\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']):is(:hover, [data-hover]) {
+  .disabled\:hover\:c_text\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]):is(:hover, [data-hover]) {
     color: var(--colors-text-disabled);
 }
 
@@ -2654,15 +2654,15 @@
     list-style-type: square;
 }
 
-  .disabled\:\[\&_svg\]\:c_text\.onAction:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']) svg {
+  .disabled\:\[\&_svg\]\:c_text\.onAction:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) svg {
     color: var(--colors-text-on-action);
 }
 
-  .disabled\:hover\:c_text\.onAction:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']):is(:hover, [data-hover]) {
+  .disabled\:hover\:c_text\.onAction:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]):is(:hover, [data-hover]) {
     color: var(--colors-text-on-action);
 }
 
-  .disabled\:checked\:c_text\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
+  .disabled\:checked\:c_text\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
     color: var(--colors-text-disabled);
 }
 
@@ -2694,7 +2694,7 @@
     outline-offset: -2px;
 }
 
-  .disabled\:hover\:bx-sh_none:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']):is(:hover, [data-hover]) {
+  .disabled\:hover\:bx-sh_none:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]):is(:hover, [data-hover]) {
     box-shadow: none;
 }
 
@@ -2710,7 +2710,7 @@
     color: var(--colors-stroke-hover);
 }
 
-  .disabled\:hover\:c_stroke\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']):is(:hover, [data-hover]) {
+  .disabled\:hover\:c_stroke\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]):is(:hover, [data-hover]) {
     color: var(--colors-stroke-disabled);
 }
 
@@ -2750,7 +2750,7 @@
     --shadow-color: var(--colors-stroke-subtle);
 }
 
-  .disabled\:\[\&_svg\]\:c_stroke\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']) svg {
+  .disabled\:\[\&_svg\]\:c_stroke\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) svg {
     color: var(--colors-stroke-disabled);
 }
 
@@ -2758,11 +2758,11 @@
     color: var(--colors-icon-default);
 }
 
-  .disabled\:highlighted\:c_text\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled='true'])[data-highlighted] {
+  .disabled\:highlighted\:c_text\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled=true])[data-highlighted] {
     color: var(--colors-text-disabled);
 }
 
-  .disabled\:selected\:c_text\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']):is([aria-selected=true], [data-selected]) {
+  .disabled\:selected\:c_text\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]):is([aria-selected=true], [data-selected]) {
     color: var(--colors-text-disabled);
 }
 
@@ -2786,7 +2786,7 @@
     text-align: right;
 }
 
-  .disabled\:hover\:c_text\.subtle:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']):is(:hover, [data-hover]) {
+  .disabled\:hover\:c_text\.subtle:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]):is(:hover, [data-hover]) {
     color: var(--colors-text-subtle);
 }
 
@@ -2824,11 +2824,11 @@
     --shadow-color: var(--colors-stroke-default);
 }
 
-  .hover\:disabled\:border-style_solid:is(:hover, [data-hover]):is(:disabled, [disabled], [data-disabled], [aria-disabled='true']) {
+  .hover\:disabled\:border-style_solid:is(:hover, [data-hover]):is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
     border-style: solid;
 }
 
-  .hover\:disabled\:bd-c_stroke\.subtle:is(:hover, [data-hover]):is(:disabled, [disabled], [data-disabled], [aria-disabled='true']) {
+  .hover\:disabled\:bd-c_stroke\.subtle:is(:hover, [data-hover]):is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
     border-color: var(--colors-stroke-subtle);
 }
 
@@ -2848,7 +2848,7 @@
     color: var(--colors-icon-default);
 }
 
-  .hover\:disabled\:trf_translateX\(0\):is(:hover, [data-hover]):is(:disabled, [disabled], [data-disabled], [aria-disabled='true']) {
+  .hover\:disabled\:trf_translateX\(0\):is(:hover, [data-hover]):is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
     transform: translateX(0);
 }
 
@@ -2860,11 +2860,11 @@
     border-block-end-color: var(--border-hover);
 }
 
-  .disabled\:checked\:hover\:bg_surface\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:hover, [data-hover]) {
+  .disabled\:checked\:hover\:bg_surface\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:hover, [data-hover]) {
     background: var(--colors-surface-disabled);
 }
 
-  .disabled\:checked\:hover\:bd-c_stroke\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:hover, [data-hover]) {
+  .disabled\:checked\:hover\:bd-c_stroke\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:hover, [data-hover]) {
     border-color: var(--colors-stroke-disabled);
 }
 
@@ -2888,7 +2888,7 @@
     content: counter(level1, lower-alpha) '. ';
 }
 
-  .disabled\:checked\:hover\:c_text\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:hover, [data-hover]) {
+  .disabled\:checked\:hover\:c_text\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:hover, [data-hover]) {
     color: var(--colors-text-disabled);
 }
 
@@ -2900,11 +2900,11 @@
     --shadow-color: var(--colors-stroke-error);
 }
 
-  .disabled\:hover\:\[\&_svg\]\:c_stroke\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']):is(:hover, [data-hover]) svg {
+  .disabled\:hover\:\[\&_svg\]\:c_stroke\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]):is(:hover, [data-hover]) svg {
     color: var(--colors-stroke-disabled);
 }
 
-  .checked\:hover\:disabled\:trf_translateX\(120\%\):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:hover, [data-hover]):is(:disabled, [disabled], [data-disabled], [aria-disabled='true']) {
+  .checked\:hover\:disabled\:trf_translateX\(120\%\):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:hover, [data-hover]):is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
     transform: translateX(120%);
 }
 

package/es/Accordion.mjs.map

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

package/es/ArticleLists.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ArticleLists.mjs","names":[],"sources":["../src/ArticleLists.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type CSSProperties, forwardRef, useMemo } from \"react\";\nimport { type HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { HTMLStyledProps, RecipeVariantProps, StyledProps } from \"@ndla/styled-system/types\";\n\nconst LIST_ITEM = \"& > li\";\nconst LETTER_LIST = \"& > ol[data-variant='letters']\";\nconst NUMBER_LIST = \"& > ol:not([data-variant='letters'])\";\nconst LETTER_LIST_ITEM = `${LETTER_LIST} > li`;\n\nconst orderedListRecipe = cva({\n  base: {\n    marginInlineStart: \"small\",\n    paddingInlineStart: \"small\",\n    [LIST_ITEM]: {\n      \"& > ul\": {\n        marginInlineStart: \"0 !important\",\n      },\n      _before: {\n        position: \"absolute\",\n        transform: \"translateX(calc(-100% + (token(spacing.small) * -1)))\",\n        fontVariantNumeric: \"tabular-nums\",\n      },\n    },\n    \"& li\": {\n      marginBlock: \"small\",\n    },\n  },\n  defaultVariants: {\n    variant: \"numbers\",\n  },\n  variants: {\n    variant: {\n      numbers: {\n        [NUMBER_LIST]: {\n          marginInlineStart: \"0\",\n          paddingInlineStart: \"0\",\n        },\n        counterReset: \"level1\",\n        \"&[data-count='true']\": {\n          counterReset: \"level1 var(--start, 0)\",\n        },\n        [LIST_ITEM]: {\n          counterIncrement: \"level1\",\n          _before: {\n            content: \"counter(level1, decimal) '. '\",\n          },\n          [NUMBER_LIST]: {\n            counterReset: \"level2\",\n            \"&[data-count='true']\": {\n              counterReset: \"level2 var(--start, 0)\",\n            },\n            [LIST_ITEM]: {\n              marginInlineStart: \"small\",\n              counterIncrement: \"level2\",\n              _before: {\n                content: \"counter(level1, decimal) '.' counter(level2, decimal) '. '\",\n              },\n              [NUMBER_LIST]: {\n                counterReset: \"level3\",\n                \"&[data-count='true']\": {\n                  counterReset: \"level3 var(--start, 0)\",\n                },\n                [LIST_ITEM]: {\n                  marginInlineStart: \"calc(1.5ch + token(spacing.small))\",\n                  counterIncrement: \"level3\",\n                  _before: {\n                    content: \"counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '. '\",\n                  },\n                  [NUMBER_LIST]: {\n                    counterReset: \"level4\",\n                    \"&[data-count='true']\": {\n                      counterReset: \"level4 var(--start, 0)\",\n                    },\n                    [LIST_ITEM]: {\n                      marginInlineStart: \"calc(3ch + token(spacing.small))\",\n                      counterIncrement: \"level4\",\n                      _before: {\n                        content:\n                          \"counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '.' counter(level4,  decimal) '. '\",\n                      },\n                    },\n                  },\n                },\n              },\n            },\n          },\n        },\n      },\n      letters: {\n        counterReset: \"level1\",\n        \"&[data-count='true']\": {\n          counterReset: \"level1 var(--start, 0)\",\n        },\n        [LETTER_LIST]: {\n          marginInlineStart: \"0\",\n          paddingInlineStart: \"0\",\n        },\n        [LIST_ITEM]: {\n          counterIncrement: \"level1\",\n          _before: {\n            content: \"counter(level1, upper-alpha) '. '\",\n          },\n          [LETTER_LIST_ITEM]: {\n            _before: {\n              content: \"counter(level1, lower-alpha) '. '\",\n            },\n            [LETTER_LIST_ITEM]: {\n              _before: {\n                content: \"counter(level1, lower-roman) '. '\",\n              },\n            },\n          },\n        },\n      },\n    },\n  },\n});\n\nexport type OrderedListVariantProps = NonNullable<RecipeVariantProps<typeof orderedListRecipe>>;\n\nexport interface OrderedListProps extends StyledProps, HTMLArkProps<\"ol\">, OrderedListVariantProps {}\n\nconst StyledOrderedList = styled(ark.ol, {}, { baseComponent: true });\n\nexport const OrderedList = forwardRef<HTMLOListElement, OrderedListProps>(\n  ({ variant, css: cssProp, start, ...props }, ref) => {\n    const style = useMemo(() => ({ \"--start\": start ? start - 1 : undefined }) as CSSProperties, [start]);\n    return (\n      <StyledOrderedList\n        data-embed-type=\"ordered-list\"\n        data-variant={variant}\n        data-count={start !== undefined}\n        css={css.raw(orderedListRecipe.raw({ variant }), cssProp)}\n        style={style}\n        ref={ref}\n        {...props}\n      />\n    );\n  },\n);\n\nexport interface UnOrderedListProps extends StyledProps, HTMLArkProps<\"ul\"> {}\n\nexport const UnOrderedList = styled(\"ul\", {\n  base: {\n    listStyle: \"revert\",\n    marginInlineStart: \"medium\",\n    paddingInlineStart: \"small\",\n    \"& ul\": {\n      marginInlineStart: \"0\",\n    },\n    \"& li\": {\n      marginBlock: \"small\",\n      paddingInlineStart: \"small\",\n      _marker: {\n        color: \"icon.strong\",\n      },\n\n      \"& > ol\": {\n        marginInlineStart: \"0 !important\",\n      },\n    },\n\n    listStyleType: \"disc\",\n    \"& > li > ul\": {\n      listStyleType: \"circle\",\n      \"& > li > ul\": {\n        listStyleType: \"square\",\n      },\n    },\n  },\n});\n\nexport const DefinitionList = styled(\"dl\", {\n  base: {\n    \"& dt\": {\n      fontWeight: \"bold\",\n    },\n    \"& dd\": {\n      marginInlineStart: \"medium\",\n    },\n  },\n});\n\nexport type DefinitionListProps = HTMLStyledProps<\"dl\">;\n"],"mappings":";;;;;;;AAcA,MAAM,YAAY;AAClB,MAAM,cAAc;AACpB,MAAM,cAAc;AACpB,MAAM,oBAAoB,EAAE,YAAY;AAExC,MAAM,oBAAoB,IAAI;CAC5B,MAAM;EACJ,mBAAmB;EACnB,oBAAoB;GACnB,YAAY;GACX,UAAU,EACR,mBAAmB,eACpB;GACD,SAAS;IACP,UAAU;IACV,WAAW;IACX,oBAAoB;GACrB;EACF;EACD,QAAQ,EACN,aAAa,QACd;CACF;CACD,iBAAiB,EACf,SAAS,UACV;CACD,UAAU,EACR,SAAS;EACP,SAAS;IACN,cAAc;IACb,mBAAmB;IACnB,oBAAoB;GACrB;GACD,cAAc;GACd,wBAAwB,EACtB,cAAc,yBACf;IACA,YAAY;IACX,kBAAkB;IAClB,SAAS,EACP,SAAS,gCACV;KACA,cAAc;KACb,cAAc;KACd,wBAAwB,EACtB,cAAc,yBACf;MACA,YAAY;MACX,mBAAmB;MACnB,kBAAkB;MAClB,SAAS,EACP,SAAS,6DACV;OACA,cAAc;OACb,cAAc;OACd,wBAAwB,EACtB,cAAc,yBACf;QACA,YAAY;QACX,mBAAmB;QACnB,kBAAkB;QAClB,SAAS,EACP,SAAS,0FACV;SACA,cAAc;SACb,cAAc;SACd,wBAAwB,EACtB,cAAc,yBACf;UACA,YAAY;UACX,mBAAmB;UACnB,kBAAkB;UAClB,SAAS,EACP,SACE,wHACH;SACF;QACF;OACF;MACF;KACF;IACF;GACF;EACF;EACD,SAAS;GACP,cAAc;GACd,wBAAwB,EACtB,cAAc,yBACf;IACA,cAAc;IACb,mBAAmB;IACnB,oBAAoB;GACrB;IACA,YAAY;IACX,kBAAkB;IAClB,SAAS,EACP,SAAS,oCACV;KACA,mBAAmB;KAClB,SAAS,EACP,SAAS,oCACV;MACA,mBAAmB,EAClB,SAAS,EACP,SAAS,oCACV,EACF;IACF;GACF;EACF;CACF,EACF;AACF,EAAC;AAMF,MAAM,oBAAoB,OAAO,IAAI,IAAI,CAAE,GAAE,EAAE,eAAe,KAAM,EAAC;AAErE,MAAa,cAAc,WACzB,CAAC,EAAE,SAAS,KAAK,SAAS,MAAO,GAAG,OAAO,EAAE,QAAQ;CACnD,MAAM,QAAQ,QAAQ,OAAO,EAAE,WAAW,QAAQ,QAAQ,WAAe,IAAoB,CAAC,KAAM,EAAC;AACrG,wBACE,IAAC;EACC,mBAAgB;EAChB,gBAAc;EACd,cAAY;EACZ,KAAK,IAAI,IAAI,kBAAkB,IAAI,EAAE,QAAS,EAAC,EAAE,QAAQ;EAClD;EACF;EACL,GAAI;GACJ;AAEL,EACF;AAID,MAAa,gBAAgB,OAAO,MAAM,EACxC,MAAM;CACJ,WAAW;CACX,mBAAmB;CACnB,oBAAoB;CACpB,QAAQ,EACN,mBAAmB,IACpB;CACD,QAAQ;EACN,aAAa;EACb,oBAAoB;EACpB,SAAS,EACP,OAAO,cACR;EAED,UAAU,EACR,mBAAmB,eACpB;CACF;CAED,eAAe;CACf,eAAe;EACb,eAAe;EACf,eAAe,EACb,eAAe,SAChB;CACF;AACF,EACF,EAAC;AAEF,MAAa,iBAAiB,OAAO,MAAM,EACzC,MAAM;CACJ,QAAQ,EACN,YAAY,OACb;CACD,QAAQ,EACN,mBAAmB,SACpB;AACF,EACF,EAAC"}
+{"version":3,"file":"ArticleLists.mjs","names":[],"sources":["../src/ArticleLists.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type CSSProperties, forwardRef, useMemo } from \"react\";\nimport { type HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { HTMLStyledProps, RecipeVariantProps, StyledProps } from \"@ndla/styled-system/types\";\n\nconst LIST_ITEM = \"& > li\";\nconst LETTER_LIST = \"& > ol[data-variant='letters']\";\nconst NUMBER_LIST = \"& > ol:not([data-variant='letters'])\";\nconst LETTER_LIST_ITEM = `${LETTER_LIST} > li`;\n\nconst orderedListRecipe = cva({\n  base: {\n    marginInlineStart: \"small\",\n    paddingInlineStart: \"small\",\n    [LIST_ITEM]: {\n      \"& > ul\": {\n        marginInlineStart: \"0 !important\",\n      },\n      _before: {\n        position: \"absolute\",\n        transform: \"translateX(calc(-100% + (token(spacing.small) * -1)))\",\n        fontVariantNumeric: \"tabular-nums\",\n      },\n    },\n    \"& li\": {\n      marginBlock: \"small\",\n    },\n  },\n  defaultVariants: {\n    variant: \"numbers\",\n  },\n  variants: {\n    variant: {\n      numbers: {\n        [NUMBER_LIST]: {\n          marginInlineStart: \"0\",\n          paddingInlineStart: \"0\",\n        },\n        counterReset: \"level1\",\n        \"&[data-count='true']\": {\n          counterReset: \"level1 var(--start, 0)\",\n        },\n        [LIST_ITEM]: {\n          counterIncrement: \"level1\",\n          _before: {\n            content: \"counter(level1, decimal) '. '\",\n          },\n          [NUMBER_LIST]: {\n            counterReset: \"level2\",\n            \"&[data-count='true']\": {\n              counterReset: \"level2 var(--start, 0)\",\n            },\n            [LIST_ITEM]: {\n              marginInlineStart: \"small\",\n              counterIncrement: \"level2\",\n              _before: {\n                content: \"counter(level1, decimal) '.' counter(level2, decimal) '. '\",\n              },\n              [NUMBER_LIST]: {\n                counterReset: \"level3\",\n                \"&[data-count='true']\": {\n                  counterReset: \"level3 var(--start, 0)\",\n                },\n                [LIST_ITEM]: {\n                  marginInlineStart: \"calc(1.5ch + token(spacing.small))\",\n                  counterIncrement: \"level3\",\n                  _before: {\n                    content: \"counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '. '\",\n                  },\n                  [NUMBER_LIST]: {\n                    counterReset: \"level4\",\n                    \"&[data-count='true']\": {\n                      counterReset: \"level4 var(--start, 0)\",\n                    },\n                    [LIST_ITEM]: {\n                      marginInlineStart: \"calc(3ch + token(spacing.small))\",\n                      counterIncrement: \"level4\",\n                      _before: {\n                        content:\n                          \"counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '.' counter(level4,  decimal) '. '\",\n                      },\n                    },\n                  },\n                },\n              },\n            },\n          },\n        },\n      },\n      letters: {\n        counterReset: \"level1\",\n        \"&[data-count='true']\": {\n          counterReset: \"level1 var(--start, 0)\",\n        },\n        [LETTER_LIST]: {\n          marginInlineStart: \"0\",\n          paddingInlineStart: \"0\",\n        },\n        [LIST_ITEM]: {\n          counterIncrement: \"level1\",\n          _before: {\n            content: \"counter(level1, upper-alpha) '. '\",\n          },\n          [LETTER_LIST_ITEM]: {\n            _before: {\n              content: \"counter(level1, lower-alpha) '. '\",\n            },\n            [LETTER_LIST_ITEM]: {\n              _before: {\n                content: \"counter(level1, lower-roman) '. '\",\n              },\n            },\n          },\n        },\n      },\n    },\n  },\n});\n\nexport type OrderedListVariantProps = NonNullable<RecipeVariantProps<typeof orderedListRecipe>>;\n\nexport interface OrderedListProps extends StyledProps, HTMLArkProps<\"ol\">, OrderedListVariantProps {}\n\nconst StyledOrderedList = styled(ark.ol, {}, { baseComponent: true });\n\nexport const OrderedList = forwardRef<HTMLOListElement, OrderedListProps>(\n  ({ variant, css: cssProp, start, ...props }, ref) => {\n    const style = useMemo(() => ({ \"--start\": start ? start - 1 : undefined }) as CSSProperties, [start]);\n    return (\n      <StyledOrderedList\n        data-embed-type=\"ordered-list\"\n        data-variant={variant}\n        data-count={start !== undefined}\n        css={css.raw(orderedListRecipe.raw({ variant }), cssProp)}\n        style={style}\n        ref={ref}\n        {...props}\n      />\n    );\n  },\n);\n\nexport interface UnOrderedListProps extends StyledProps, HTMLArkProps<\"ul\"> {}\n\nexport const UnOrderedList = styled(\"ul\", {\n  base: {\n    listStyle: \"revert\",\n    marginInlineStart: \"medium\",\n    paddingInlineStart: \"small\",\n    \"& ul\": {\n      marginInlineStart: \"0\",\n    },\n    \"& li\": {\n      marginBlock: \"small\",\n      paddingInlineStart: \"small\",\n      _marker: {\n        color: \"icon.strong\",\n      },\n\n      \"& > ol\": {\n        marginInlineStart: \"0 !important\",\n      },\n    },\n\n    listStyleType: \"disc\",\n    \"& > li > ul\": {\n      listStyleType: \"circle\",\n      \"& > li > ul\": {\n        listStyleType: \"square\",\n      },\n    },\n  },\n});\n\nexport const DefinitionList = styled(\"dl\", {\n  base: {\n    \"& dt\": {\n      fontWeight: \"bold\",\n    },\n    \"& dd\": {\n      marginInlineStart: \"medium\",\n    },\n  },\n});\n\nexport type DefinitionListProps = HTMLStyledProps<\"dl\">;\n"],"mappings":";;;;;;;AAcA,MAAM,YAAY;AAClB,MAAM,cAAc;AACpB,MAAM,cAAc;AACpB,MAAM,mBAAmB,GAAG,YAAY;AAExC,MAAM,oBAAoB,IAAI;CAC5B,MAAM;EACJ,mBAAmB;EACnB,oBAAoB;GACnB,YAAY;GACX,UAAU,EACR,mBAAmB,gBACpB;GACD,SAAS;IACP,UAAU;IACV,WAAW;IACX,oBAAoB;IACrB;GACF;EACD,QAAQ,EACN,aAAa,SACd;EACF;CACD,iBAAiB,EACf,SAAS,WACV;CACD,UAAU,EACR,SAAS;EACP,SAAS;IACN,cAAc;IACb,mBAAmB;IACnB,oBAAoB;IACrB;GACD,cAAc;GACd,wBAAwB,EACtB,cAAc,0BACf;IACA,YAAY;IACX,kBAAkB;IAClB,SAAS,EACP,SAAS,iCACV;KACA,cAAc;KACb,cAAc;KACd,wBAAwB,EACtB,cAAc,0BACf;MACA,YAAY;MACX,mBAAmB;MACnB,kBAAkB;MAClB,SAAS,EACP,SAAS,8DACV;OACA,cAAc;OACb,cAAc;OACd,wBAAwB,EACtB,cAAc,0BACf;QACA,YAAY;QACX,mBAAmB;QACnB,kBAAkB;QAClB,SAAS,EACP,SAAS,2FACV;SACA,cAAc;SACb,cAAc;SACd,wBAAwB,EACtB,cAAc,0BACf;UACA,YAAY;UACX,mBAAmB;UACnB,kBAAkB;UAClB,SAAS,EACP,SACE,yHACH;UACF;SACF;QACF;OACF;MACF;KACF;IACF;GACF;EACD,SAAS;GACP,cAAc;GACd,wBAAwB,EACtB,cAAc,0BACf;IACA,cAAc;IACb,mBAAmB;IACnB,oBAAoB;IACrB;IACA,YAAY;IACX,kBAAkB;IAClB,SAAS,EACP,SAAS,qCACV;KACA,mBAAmB;KAClB,SAAS,EACP,SAAS,qCACV;MACA,mBAAmB,EAClB,SAAS,EACP,SAAS,qCACV,EACF;KACF;IACF;GACF;EACF,EACF;CACF,CAAC;AAMF,MAAM,oBAAoB,OAAO,IAAI,IAAI,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAErE,MAAa,cAAc,YACxB,EAAE,SAAS,KAAK,SAAS,MAAO,GAAG,SAAS,QAAQ;CACnD,MAAM,QAAQ,eAAe,EAAE,WAAW,QAAQ,QAAQ,IAAI,QAAW,GAAoB,CAAC,MAAM,CAAC;AACrG,QACE,oBAAC;EACC,mBAAgB;EAChB,gBAAc;EACd,cAAY,UAAU;EACtB,KAAK,IAAI,IAAI,kBAAkB,IAAI,EAAE,SAAS,CAAC,EAAE,QAAQ;EAClD;EACF;EACL,GAAI;GACJ;EAGP;AAID,MAAa,gBAAgB,OAAO,MAAM,EACxC,MAAM;CACJ,WAAW;CACX,mBAAmB;CACnB,oBAAoB;CACpB,QAAQ,EACN,mBAAmB,KACpB;CACD,QAAQ;EACN,aAAa;EACb,oBAAoB;EACpB,SAAS,EACP,OAAO,eACR;EAED,UAAU,EACR,mBAAmB,gBACpB;EACF;CAED,eAAe;CACf,eAAe;EACb,eAAe;EACf,eAAe,EACb,eAAe,UAChB;EACF;CACF,EACF,CAAC;AAEF,MAAa,iBAAiB,OAAO,MAAM,EACzC,MAAM;CACJ,QAAQ,EACN,YAAY,QACb;CACD,QAAQ,EACN,mBAAmB,UACpB;CACF,EACF,CAAC"}

package/es/Badge.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.mjs","names":[],"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 { forwardRef } from \"react\";\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\";\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.default\",\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,cAAc,IAAI;CACtB,MAAM;EACJ,eAAe;EACf,cAAc;EACd,QAAQ;EACR,OAAO;EACP,OAAO;CACR;CACD,iBAAiB;EACf,YAAY;EACZ,MAAM;CACP;CACD,UAAU;EACR,MAAM;GACJ,OAAO,EACL,WAAW,cACZ;GACD,QAAQ,EACN,WAAW,eACZ;EACF;EACD,YAAY;GACV,QAAQ;IACN,iBAAiB;IACjB,aAAa;GACd;GACD,QAAQ;IACN,iBAAiB;IACjB,aAAa;GACd;GACD,QAAQ;IACN,iBAAiB;IACjB,aAAa;GACd;GACD,SAAS;IACP,iBAAiB;IACjB,aAAa;GACd;GACD,QAAQ;IACN,iBAAiB;IACjB,aAAa;GACd;GACD,SAAS;IACP,iBAAiB;IACjB,aAAa;GACd;GACD,SAAS;IACP,iBAAiB;IACjB,aAAa;GACd;EACF;CACF;AACF,EAAC;AAQF,MAAM,cAAc,OAAO,IAAI,KAAK,CAAE,GAAE,EAAE,eAAe,KAAM,EAAC;AAEhE,MAAa,QAAQ,WAAuC,CAAC,EAAE,YAAY,MAAM,KAAK,QAAS,GAAG,OAAO,EAAE,wBACzG,IAAC;CAAY,KAAK,IAAI,IAAI,YAAY,IAAI;EAAE;EAAY;CAAM,EAAC,EAAE,QAAQ;CAAE,GAAI;CAAY;EAAO,CAClG"}
+{"version":3,"file":"Badge.mjs","names":[],"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 { forwardRef } from \"react\";\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\";\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.default\",\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,cAAc,IAAI;CACtB,MAAM;EACJ,eAAe;EACf,cAAc;EACd,QAAQ;EACR,OAAO;EACP,OAAO;EACR;CACD,iBAAiB;EACf,YAAY;EACZ,MAAM;EACP;CACD,UAAU;EACR,MAAM;GACJ,OAAO,EACL,WAAW,eACZ;GACD,QAAQ,EACN,WAAW,gBACZ;GACF;EACD,YAAY;GACV,QAAQ;IACN,iBAAiB;IACjB,aAAa;IACd;GACD,QAAQ;IACN,iBAAiB;IACjB,aAAa;IACd;GACD,QAAQ;IACN,iBAAiB;IACjB,aAAa;IACd;GACD,SAAS;IACP,iBAAiB;IACjB,aAAa;IACd;GACD,QAAQ;IACN,iBAAiB;IACjB,aAAa;IACd;GACD,SAAS;IACP,iBAAiB;IACjB,aAAa;IACd;GACD,SAAS;IACP,iBAAiB;IACjB,aAAa;IACd;GACF;EACF;CACF,CAAC;AAQF,MAAM,cAAc,OAAO,IAAI,KAAK,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAEhE,MAAa,QAAQ,YAAwC,EAAE,YAAY,MAAM,KAAK,QAAS,GAAG,SAAS,QACzG,oBAAC;CAAY,KAAK,IAAI,IAAI,YAAY,IAAI;EAAE;EAAY;EAAM,CAAC,EAAE,QAAQ;CAAE,GAAI;CAAY;EAAO,CAClG"}

package/es/BlockQuote.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"BlockQuote.mjs","names":[],"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 { forwardRef } from \"react\";\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\";\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,mBAAmB,IAAI;CAC3B,MAAM;EACJ,mBAAmB;EACnB,eAAe;CAChB;CACD,UAAU,EACR,SAAS;EACP,SAAS;GACP,aAAa;GACb,YAAY;EACb;EACD,QAAQ;GACN,YAAY;GACZ,aAAa;EACd;EACD,QAAQ;GACN,YAAY;GACZ,aAAa;EACd;CACF,EACF;CACD,iBAAiB,EACf,SAAS,UACV;AACF,EAAC;AAMF,MAAM,mBAAmB,OAAO,IAAI,YAAY,CAAE,GAAE,EAAE,eAAe,KAAM,EAAC;AAE5E,MAAa,aAAa,WAA8C,CAAC,EAAE,SAAS,KAAK,QAAS,GAAG,OAAO,EAAE,wBAC5G,IAAC;CAAiB,KAAK,IAAI,IAAI,iBAAiB,IAAI,EAAE,QAAS,EAAC,EAAE,QAAQ;CAAE,GAAI;CAAY;EAAO,CACnG"}
+{"version":3,"file":"BlockQuote.mjs","names":[],"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 { forwardRef } from \"react\";\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\";\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,mBAAmB,IAAI;CAC3B,MAAM;EACJ,mBAAmB;EACnB,eAAe;EAChB;CACD,UAAU,EACR,SAAS;EACP,SAAS;GACP,aAAa;GACb,YAAY;GACb;EACD,QAAQ;GACN,YAAY;GACZ,aAAa;GACd;EACD,QAAQ;GACN,YAAY;GACZ,aAAa;GACd;EACF,EACF;CACD,iBAAiB,EACf,SAAS,WACV;CACF,CAAC;AAMF,MAAM,mBAAmB,OAAO,IAAI,YAAY,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAE5E,MAAa,aAAa,YAA+C,EAAE,SAAS,KAAK,QAAS,GAAG,SAAS,QAC5G,oBAAC;CAAiB,KAAK,IAAI,IAAI,iBAAiB,IAAI,EAAE,SAAS,CAAC,EAAE,QAAQ;CAAE,GAAI;CAAY;EAAO,CACnG"}

package/es/Button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.mjs","names":[],"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 ReactNode, forwardRef, useMemo } from \"react\";\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 { 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.mjs","names":[],"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 ReactNode, forwardRef, useMemo } from \"react\";\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 { 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":";;;;;;;;AAeA,MAAa,mBAAmB,IAAI;CAClC,MAAM;EACJ,SAAS;EACT,YAAY;EACZ,gBAAgB;EAChB,KAAK;EACL,QAAQ;EACR,gBAAgB;EAChB,YAAY;EACZ,oBAAoB;EACpB,oBAAoB;EACpB,0BAA0B;EAC1B,WAAW;EACX,cAAc;EACd,SAAS;EACT,gBAAgB;EAChB,WAAW;GACT,QAAQ;GACR,OAAO;GACP,YAAY;GACZ,gBAAgB;GAChB,SAAS,EACP,OAAO,iBACR;GACD,QAAQ;IACN,OAAO;IACP,YAAY;IACb;GACF;EACD,eAAe,EACb,WAAW,4DACZ;EACD,eAAe;GACb,YAAY;GACZ,oBAAoB;GACrB;EACF;CACD,iBAAiB,EACf,SAAS,WACV;CACD,UAAU,EACR,SAAS;EACP,SAAS;GACP,OAAO;GACP,YAAY;GACZ,QAAQ;IACN,OAAO;IACP,YAAY;IACb;GACD,SAAS;IACP,OAAO;IACP,YAAY;IACb;GACD,eAAe,EACb,WACE,+HACH;GACD,KAAK,EACH,YAAY,2BACb;GACF;EACD,WAAW;GACT,OAAO;GACP,YAAY;GACZ,WAAW;GACX,QAAQ,EACN,YAAY,8BACb;GACD,SAAS,EACP,YAAY,qCACb;GACD,KAAK,EACH,YAAY,+BACb;GACF;EACD,UAAU;GACR,OAAO;GACP,YAAY;GACZ,QAAQ;IACN,WAAW;IACX,YAAY;IACZ,eAAe,EACb,WAAW,4DACZ;IACF;GACD,SAAS;IACP,aAAa;IACb,YAAY;IACb;GACD,KAAK;IACH,YAAY;IACZ,WAAW;IACZ;GACF;EACD,OAAO;GACL,YAAY;GACZ,OAAO;GACP,QAAQ,EACN,OAAO,gBACR;GACF;EACD,aAAa;GACX,YAAY;GACZ,OAAO;GACP,QAAQ,EACN,OAAO,qCACR;GACF;EACD,QAAQ;GACN,YAAY;GACZ,OAAO;GACP,QAAQ,EACN,YAAY,wBACb;GACD,SAAS,EACP,YAAY,yBACb;GACD,eAAe;IACb,gBAAgB;IAChB,WACE;IACH;GACF;EACD,SAAS;GACP,YAAY;GACZ,OAAO;GACP,QAAQ,EACN,YAAY,yBACb;GACD,SAAS,EACP,YAAY,0BACb;GACD,eAAe;IACb,gBAAgB;IAChB,WACE;IACH;GACF;EACD,MAAM;GACJ,YAAY;GACZ,OAAO;GACP,YAAY;GACZ,gBAAgB;GAChB,oBAAoB;GACpB,0BAA0B;GAC1B,oBAAoB;GACpB,QAAQ,EACN,gBAAgB,QACjB;GACD,eAAe;IACb,WAAW;IACX,SAAS;IACT,cAAc;IACd,cAAc;IACd,eAAe;IACf,cAAc;IACf;GACF;EACF,EACF;CACF,CAAC;AAEF,MAAa,eAAe,IAAI;CAC9B,iBAAiB,EACf,MAAM,UACP;CACD,UAAU,EACR,MAAM;EACJ,QAAQ;GACN,WAAW;GACX,eAAe;GACf,cAAc;GACd,WAAW;GACX,SAAS;IACP,cAAc;IACd,aAAa;IACb,OAAO;IACP,QAAQ;IACT;GACF;EACD,OAAO;GACL,WAAW;GACX,WAAW;GACX,eAAe;GACf,cAAc;GACd,SAAS;IACP,cAAc;IACd,aAAa;IACb,OAAO;IACP,QAAQ;IACT;GACF;EACF,EACF;CACF,CAAC;AAEF,MAAa,mBAAmB,IAAI;CAClC,MAAM;EACJ,YAAY;EACZ,WAAW;EACZ;CACD,iBAAiB,EACf,MAAM,UACP;CACD,UAAU,EACR,MAAM;EACJ,QAAQ;GACN,kBAAkB;GAClB,QAAQ;GACR,OAAO;GACP,SAAS;IACP,cAAc;IACd,aAAa;IACb,OAAO;IACP,QAAQ;IACT;GACD,eAAe;GACf,cAAc;GACf;EACD,OAAO;GACL,kBAAkB;GAClB,QAAQ;GACR,OAAO;GACP,SAAS;IACP,cAAc;IACd,aAAa;IACb,OAAO;IACP,QAAQ;IACT;GACD,eAAe;GACf,cAAc;GACf;EACF,EACF;CACF,CAAC;AAkBF,MAAM,eAAe,OAAO,IAAI,QAAQ,EAAE,EAAE;CAAE,eAAe;CAAM,cAAc,EAAE,MAAM,UAAU;CAAE,CAAC;AAEtG,MAAa,aAAa,YACvB,EAAE,SAAS,gBAAgB,oBAAoB,gBAAgB,SAAS,UAAU,SAAU,GAAG,SAAS,QAAQ;CAC/G,MAAM,eAAe,UAAU,EAAE,iBAAiB,MAAM,GAAG,EAAE;CAE7D,MAAM,UAAU,cAAe,UAAU,SAAY,UAAW,CAAC,UAAU,QAAQ,CAAC;CAEpF,MAAM,iBAAiB,cAAc;AACnC,SAAO,iBACL,qBAEA,4CACG,oBACA,YACA;IAEJ;EAAC;EAAU;EAAoB;EAAe,CAAC;AAElD,QACE,oBAAC;EAAsB;EAAS,GAAI;EAAc,GAAI;EAAY;YAC/D,UAAU,iBAAiB;GACf;EAGpB;AAED,MAAa,SAAS,YACnB,EAAE,SAAS,gBAAgB,MAAM,KAAK,QAAS,GAAG,SAAS,QAC1D,oBAAC;CACC,GAAI;CACJ,gBAAgB,kBAAkB,oBAAC,WAAQ,MAAK,UAAU;CAC1D,KAAK,IAAI,IACP,iBAAiB,IAAI,EAAE,SAAS,CAAC,EACjC,YAAY,SAAS,aAAa,IAAI,EAAE,MAAM,CAAC,GAAG,QAClD,QACD;CACI;EACL,CAEL;AAUD,MAAa,aAAa,YACvB,EAAE,SAAS,KAAK,SAAS,gBAAgB,MAAM,iBAAiB,KAAM,GAAG,SAAS,QACjF,oBAAC;CACC,GAAI;CACJ,KAAK,IAAI,IAAI,iBAAiB,IAAI,EAAE,SAAS,CAAC,EAAE,iBAAiB,IAAI,EAAE,MAAM,CAAC,EAAE,QAAQ;CACxF,gBAAgB,kBAAkB,oBAAC,WAAQ,MAAK,UAAU;CAC1C;CACX;EACL,CAEL"}

package/es/Card/Card.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Card.mjs","names":[],"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 { forwardRef } from \"react\";\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 { 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      border: \"1px solid\",\n      borderRadius: \"xsmall\",\n      borderColor: \"stroke.subtle\",\n      transitionDuration: \"fast\",\n      transitionProperty: \"background, color\",\n      transitionTimingFunction: \"default\",\n      background: \"surface.default\",\n      overflow: \"hidden\",\n      _hover: {\n        borderColor: \"stroke.hover\",\n      },\n    },\n    content: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"xsmall\",\n      paddingBlock: \"xsmall\",\n      paddingInline: \"medium\",\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    variant: \"intense\",\n  },\n  variants: {\n    variant: {\n      subtle: {},\n      intense: {\n        root: {\n          _hover: {\n            background: \"surface.actionSubtle.hover\",\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":";;;;;;;;;AAgBA,MAAM,aAAa,IAAI;CACrB,OAAO;EAAC;EAAQ;EAAS;EAAW;CAAQ;CAC5C,MAAM;EACJ,MAAM;GACJ,UAAU;GACV,QAAQ;GACR,cAAc;GACd,aAAa;GACb,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,YAAY;GACZ,UAAU;GACV,QAAQ,EACN,aAAa,eACd;EACF;EACD,SAAS;GACP,SAAS;GACT,eAAe;GACf,KAAK;GACL,cAAc;GACd,eAAe;EAChB;EACD,OAAO;GACL,gBAAgB;GAChB,QAAQ,EACN,gBAAgB,OACjB;EACF;EACD,OAAO;GACL,QAAQ;GACR,WAAW;GACX,OAAO;EACR;CACF;CACD,iBAAiB,EACf,SAAS,UACV;CACD,UAAU,EACR,SAAS;EACP,QAAQ,CAAE;EACV,SAAS,EACP,MAAM,EACJ,QAAQ,EACN,YAAY,6BACb,EACF,EACF;CACF,EACF;AACF,EAAC;AAEF,MAAM,EAAE,cAAc,aAAa,GAAG,mBAAmB,WAAW;AAMpE,MAAa,WAAW,aAAa,IAAI,SAAS,QAAQ,EAAE,eAAe,KAAM,EAAC;AAIlF,MAAM,sBAAsB,WAC1B,CAAC,EAAE,YAAY,eAAe,aAAa,OAAQ,GAAG,OAAO,EAAE,wBAC7D,IAAC;CAAmB;CAAuB;CAAY,GAAI;CAAY;EAAO,CAEjF;AAED,MAAa,cAAc,YAAY,qBAAqB,QAAQ;AAEpE,MAAa,cAAc,YAAY,IAAI,KAAK,WAAW,EAAE,eAAe,KAAM,EAAC;AAEnF,MAAa,YAAY,YAAY,OAAO,QAAQ"}
+{"version":3,"file":"Card.mjs","names":[],"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 { forwardRef } from \"react\";\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 { 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      border: \"1px solid\",\n      borderRadius: \"xsmall\",\n      borderColor: \"stroke.subtle\",\n      transitionDuration: \"fast\",\n      transitionProperty: \"background, color\",\n      transitionTimingFunction: \"default\",\n      background: \"surface.default\",\n      overflow: \"hidden\",\n      _hover: {\n        borderColor: \"stroke.hover\",\n      },\n    },\n    content: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"xsmall\",\n      paddingBlock: \"xsmall\",\n      paddingInline: \"medium\",\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    variant: \"intense\",\n  },\n  variants: {\n    variant: {\n      subtle: {},\n      intense: {\n        root: {\n          _hover: {\n            background: \"surface.actionSubtle.hover\",\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":";;;;;;;;;AAgBA,MAAM,aAAa,IAAI;CACrB,OAAO;EAAC;EAAQ;EAAS;EAAW;EAAQ;CAC5C,MAAM;EACJ,MAAM;GACJ,UAAU;GACV,QAAQ;GACR,cAAc;GACd,aAAa;GACb,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,YAAY;GACZ,UAAU;GACV,QAAQ,EACN,aAAa,gBACd;GACF;EACD,SAAS;GACP,SAAS;GACT,eAAe;GACf,KAAK;GACL,cAAc;GACd,eAAe;GAChB;EACD,OAAO;GACL,gBAAgB;GAChB,QAAQ,EACN,gBAAgB,QACjB;GACF;EACD,OAAO;GACL,QAAQ;GACR,WAAW;GACX,OAAO;GACR;EACF;CACD,iBAAiB,EACf,SAAS,WACV;CACD,UAAU,EACR,SAAS;EACP,QAAQ,EAAE;EACV,SAAS,EACP,MAAM,EACJ,QAAQ,EACN,YAAY,8BACb,EACF,EACF;EACF,EACF;CACF,CAAC;AAEF,MAAM,EAAE,cAAc,gBAAgB,mBAAmB,WAAW;AAMpE,MAAa,WAAW,aAAa,IAAI,SAAS,QAAQ,EAAE,eAAe,MAAM,CAAC;AAIlF,MAAM,sBAAsB,YACzB,EAAE,YAAY,eAAe,aAAa,OAAQ,GAAG,SAAS,QAC7D,oBAAC;CAAmB;CAAuB;CAAY,GAAI;CAAY;EAAO,CAEjF;AAED,MAAa,cAAc,YAAY,qBAAqB,QAAQ;AAEpE,MAAa,cAAc,YAAY,IAAI,KAAK,WAAW,EAAE,eAAe,MAAM,CAAC;AAEnF,MAAa,YAAY,YAAY,OAAO,QAAQ"}

package/es/Checkbox.mjs.map

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