@ndla/primitives 0.0.2 → 0.0.3

package/dist/panda.buildinfo.json

@@ -66,7 +66,7 @@
       "width]___[value:fit-content",
       "backgroundColor]___[value:surface.brand.1.subtle",
       "borderColor]___[value:surface.brand.1.strong",
-      "backgroundColor]___[value:surface.brand.2.subtle",
+      "backgroundColor]___[value:surface.brand.2.moderate",
       "borderColor]___[value:surface.brand.2.strong",
       "backgroundColor]___[value:surface.brand.3.subtle",
       "borderColor]___[value:surface.brand.3.strong",
@@ -154,16 +154,16 @@
       "borderColor]___[value:stroke.error]___[cond:_invalid<___>_checked",
       "backgroundColor]___[value:surface.default]___[cond:_invalid<___>_checked",
       "position]___[value:fixed",
-      "left]___[value:0",
-      "top]___[value:0",
-      "width]___[value:100vw",
-      "height]___[value:100dvh",
-      "zIndex]___[value:modal",
       "height]___[value:100vh",
+      "width]___[value:100vw",
       "zIndex]___[value:overlay",
+      "left]___[value:0",
+      "top]___[value:0",
       "background]___[value:rgba(1, 1, 1, 0.3)",
       "animation]___[value:backdrop-in]___[cond:_open",
       "animation]___[value:backdrop-out]___[cond:_closed",
+      "height]___[value:100dvh",
+      "zIndex]___[value:modal",
       "--margin]___[value:token(sizes.medium)",
       "position]___[value:relative",
       "boxShadow]___[value:xlarge",
@@ -224,6 +224,7 @@
       "boxShadow]___[value:4px 4px 0px 0px var(--shadow-color)",
       "backgroundColor]___[value:surface.default",
       "boxShadowColor]___[value:surface.brand.1.strong",
+      "backgroundColor]___[value:surface.brand.2.subtle",
       "boxShadowColor]___[value:surface.brand.2.strong",
       "display]___[value:inline-block",
       "fill]___[value:currentcolor",
@@ -266,6 +267,14 @@
       "border]___[value:none",
       "padding]___[value:0",
       "margin]___[value:0",
+      "paddingBlock]___[value:4xsmall",
+      "transitionProperty]___[value:background, color",
+      "textDecoration]___[value:underline]___[cond:_hover",
+      "textDecoration]___[value:underline]___[cond:_highlighted",
+      "color]___[value:stroke.disabled]___[cond:_disabled<___>& svg",
+      "textDecoration]___[value:none]___[cond:_disabled<___>_hover",
+      "background]___[value:surface.default]___[cond:_disabled<___>_hover",
+      "color]___[value:stroke.disabled]___[cond:_disabled<___>_hover<___>& svg",
       "background]___[value:surface.hover]___[cond:_hover",
       "background]___[value:surface.hover]___[cond:_highlighted",
       "background]___[value:surface.active]___[cond:_active",
@@ -277,14 +286,6 @@
       "color]___[value:icon.default]___[cond:_highlighted<___>& svg",
       "background]___[value:surface.errorSubtle.hover]___[cond:_highlighted",
       "background]___[value:surface.errorSubtle.active]___[cond:_active",
-      "paddingBlock]___[value:4xsmall",
-      "transitionProperty]___[value:background, color",
-      "textDecoration]___[value:underline]___[cond:_hover",
-      "textDecoration]___[value:underline]___[cond:_highlighted",
-      "color]___[value:stroke.disabled]___[cond:_disabled<___>& svg",
-      "textDecoration]___[value:none]___[cond:_disabled<___>_hover",
-      "background]___[value:surface.default]___[cond:_disabled<___>_hover",
-      "color]___[value:stroke.disabled]___[cond:_disabled<___>_hover<___>& svg",
       "minWidth]___[value:surface.xxsmall",
       "padding]___[value:3xsmall",
       "boxShadow]___[value:xsmall",
@@ -402,7 +403,53 @@
       "textAlign]___[value:center]___[cond:& td, & th<___>&[data-align='center']",
       "textAlign]___[value:left]___[cond:& td, & th<___>&[data-align='left']",
       "textAlign]___[value:right]___[cond:& td, & th<___>&[data-align='right']",
+      "flexDirection]___[value:column]___[cond:_horizontal",
+      "flexDirection]___[value:row]___[cond:_vertical",
+      "overflow]___[value:auto",
+      "marginBlockEnd]___[value:-1px]___[cond:_horizontal",
+      "marginInlineEnd]___[value:-1px]___[cond:_vertical",
+      "transitionProperty]___[value:color, background, border-color",
+      "whiteSpace]___[value:nowrap",
+      "color]___[value:text.strong]___[cond:_selected",
+      "color]___[value:text.subtle]___[cond:_disabled<___>_hover",
+      "borderColor]___[value:stroke.hover]___[cond:_hover",
+      "borderColor]___[value:stroke.default]___[cond:_hover<___>_focusVisible",
+      "borderBottom]___[value:1px solid]___[cond:_horizontal",
+      "borderColor]___[value:stroke.default]___[cond:_disabled",
+      "borderColor]___[value:stroke.default]___[cond:_disabled<___>_hover",
+      "borderLeft]___[value:1px solid]___[cond:_vertical",
+      "justifyContent]___[value:flex-start]___[cond:_vertical",
+      "borderRadius]___[value:unset]___[cond:_focusVisible",
+      "borderColor]___[value:transparent",
+      "borderWidth]___[value:1px",
+      "borderTopRadius]___[value:xsmall]___[cond:_horizontal",
+      "borderTopLeftRadius]___[value:xsmall]___[cond:_vertical",
+      "borderBottomLeftRadius]___[value:xsmall]___[cond:_vertical",
+      "background]___[value:surface.default]___[cond:_selected",
+      "borderColor]___[value:stroke.subtle]___[cond:_selected",
+      "borderBottomColor]___[value:transparent]___[cond:_selected<___>_horizontal",
+      "borderRightColor]___[value:transparent]___[cond:_selected<___>_vertical",
+      "outlineOffset]___[value:-3px]___[cond:_focusVisible",
+      "outlineColor]___[value:stroke.default]___[cond:_focusVisible",
+      "paddingBlockStart]___[value:xsmall]___[cond:_horizontal",
+      "paddingInlineStart]___[value:xsmall]___[cond:_vertical",
+      "boxShadow]___[value:0 0 0 3px var(--shadow-color)]___[cond:_focusVisible",
+      "padding]___[value:xsmall",
+      "outline]___[value:4px solid",
+      "outlineColor]___[value:stroke.default",
+      "outlineOffset]___[value:-4px",
+      "height]___[value:var(--height)]___[cond:_peerFocusVisible",
+      "width]___[value:var(--width)]___[cond:_peerFocusVisible",
+      "borderTopRadius]___[value:xsmall]___[cond:_peerFocusVisible<___>_horizontal",
+      "borderRightRadius]___[value:xsmall]___[cond:_peerFocusVisible<___>_vertical",
+      "bottom]___[value:0]___[cond:_horizontal",
+      "height]___[value:2]___[cond:_horizontal",
+      "width]___[value:var(--width)]___[cond:_horizontal",
+      "height]___[value:var(--height)]___[cond:_vertical",
+      "left]___[value:0]___[cond:_vertical",
+      "width]___[value:2]___[cond:_vertical",
       "textStyle]___[value:body.medium",
+      "textStyle]___[value:heading.medium",
       "boxShadow]___[value:medium",
       "minWidth]___[value:20rem",
       "height]___[value:var(--height)",

package/dist/styles.css

@@ -60,6 +60,18 @@
       line-height: calc(var(--line-heights-small) * 1.11);
 }
 
+    .textStyle_heading\.medium {
+      font-family: var(--fonts-sans);
+      font-weight: var(--font-weights-bold);
+      font-size: var(--font-sizes-3xlarge);
+      line-height: var(--line-heights-3xlarge);
+}
+
+    .textStyle_heading\.medium:where([lang='zh'], .textStyle_heading\.medium[lang='zh-Hans'], .textStyle_heading\.medium[lang='zh-Hant']):not([data-pinyin]) {
+      font-size: calc(var(--font-sizes-3xlarge) * 1.11);
+      line-height: calc(var(--line-heights-3xlarge) * 1.11);
+}
+
     .\[\&_\>_\*\]\:textStyle_label\.large\! > * {
       font-family: var(--fonts-sans) !important;
       font-weight: var(--font-weights-normal) !important;
@@ -280,22 +292,14 @@
     position: fixed;
 }
 
-  .w_100vw {
-    width: 100vw;
-}
-
-  .h_100dvh {
-    height: 100dvh;
-}
-
-  .z_modal {
-    z-index: var(--z-index-modal);
-}
-
   .h_100vh {
     height: 100vh;
 }
 
+  .w_100vw {
+    width: 100vw;
+}
+
   .z_overlay {
     z-index: var(--z-index-overlay);
 }
@@ -304,6 +308,14 @@
     background: rgba(1, 1, 1, 0.3);
 }
 
+  .h_100dvh {
+    height: 100dvh;
+}
+
+  .z_modal {
+    z-index: var(--z-index-modal);
+}
+
   .\--margin_token\(sizes\.medium\) {
     --margin: var(--sizes-medium);
 }
@@ -712,6 +724,26 @@
     table-layout: fixed;
 }
 
+  .overflow_auto {
+    overflow: auto;
+}
+
+  .white-space_nowrap {
+    white-space: nowrap;
+}
+
+  .p_xsmall {
+    padding: var(--spacing-xsmall);
+}
+
+  .ring_4px_solid {
+    outline: 4px solid;
+}
+
+  .ring-offset_-4px {
+    outline-offset: -4px;
+}
+
   .shadow_medium {
     box-shadow: var(--shadows-medium);
 }
@@ -834,8 +866,8 @@
     border-color: var(--colors-surface-brand-1-strong);
 }
 
-  .bg_surface\.brand\.2\.subtle {
-    background-color: var(--colors-surface-brand-2-subtle);
+  .bg_surface\.brand\.2\.moderate {
+    background-color: var(--colors-surface-brand-2-moderate);
 }
 
   .border_surface\.brand\.2\.strong {
@@ -896,6 +928,10 @@
     background-color: var(--colors-surface-default);
 }
 
+  .bg_surface\.brand\.2\.subtle {
+    background-color: var(--colors-surface-brand-2-subtle);
+}
+
   .leading_1em {
     line-height: 1em;
 }
@@ -1001,6 +1037,23 @@
     overflow-x: auto;
 }
 
+  .transition-prop_color\,_background\,_border-color {
+    --transition-prop: color, background, border-color;
+    transition-property: color, background, border-color;
+}
+
+  .border_transparent {
+    border-color: transparent;
+}
+
+  .border-w_1px {
+    border-width: 1px;
+}
+
+  .ring-color_stroke\.default {
+    outline-color: var(--colors-stroke-default);
+}
+
   .duration_slow {
     --transition-duration: var(--durations-slow);
     transition-duration: var(--durations-slow);
@@ -1156,6 +1209,10 @@
     color: var(--colors-text-subtle);
 }
 
+  .highlighted\:text-decor_underline[data-highlighted] {
+    text-decoration: underline;
+}
+
   .highlighted\:bg_surface\.hover[data-highlighted] {
     background: var(--colors-surface-hover);
 }
@@ -1172,10 +1229,6 @@
     background: var(--colors-surface-error-subtle-hover);
 }
 
-  .highlighted\:text-decor_underline[data-highlighted] {
-    text-decoration: underline;
-}
-
   .open\:animation_fade-shift-in_0\.25s_ease-out:is([open], [data-open], [data-state="open"]) {
     animation: fade-shift-in 0.25s ease-out;
 }
@@ -1292,6 +1345,59 @@
     padding-block: var(--spacing-3xsmall);
 }
 
+  .horizontal\:mb_-1px[data-orientation=horizontal] {
+    margin-block-end: -1px;
+}
+
+  .vertical\:me_-1px[data-orientation=vertical] {
+    margin-inline-end: -1px;
+}
+
+  .selected\:text_text\.strong:is([aria-selected=true], [data-selected]) {
+    color: var(--colors-text-strong);
+}
+
+  .horizontal\:border-b_1px_solid[data-orientation=horizontal] {
+    border-bottom: 1px solid;
+}
+
+  .vertical\:border-l_1px_solid[data-orientation=vertical] {
+    border-left: 1px solid;
+}
+
+  .horizontal\:rounded-t_xsmall[data-orientation=horizontal] {
+    border-top-left-radius: var(--radii-xsmall);
+    border-top-right-radius: var(--radii-xsmall);
+}
+
+  .selected\:bg_surface\.default:is([aria-selected=true], [data-selected]) {
+    background: var(--colors-surface-default);
+}
+
+  .horizontal\:pt_xsmall[data-orientation=horizontal] {
+    padding-block-start: var(--spacing-xsmall);
+}
+
+  .vertical\:ps_xsmall[data-orientation=vertical] {
+    padding-inline-start: var(--spacing-xsmall);
+}
+
+  .horizontal\:h_2[data-orientation=horizontal] {
+    height: var(--sizes-2);
+}
+
+  .horizontal\:w_var\(--width\)[data-orientation=horizontal] {
+    width: var(--width);
+}
+
+  .vertical\:h_var\(--height\)[data-orientation=vertical] {
+    height: var(--height);
+}
+
+  .vertical\:w_2[data-orientation=vertical] {
+    width: var(--sizes-2);
+}
+
   .closed\:transition-prop_background\,_border-color\,_border\,_border-radius:is([closed], [data-closed], [data-state="closed"]) {
     --transition-prop: background, border-color, border, border-radius;
     transition-property: background, border-color, border, border-radius;
@@ -1365,6 +1471,42 @@
     border-color: var(--colors-surface-brand-1-subtle);
 }
 
+  .horizontal\:flex_column[data-orientation=horizontal] {
+    flex-direction: column;
+}
+
+  .vertical\:flex_row[data-orientation=vertical] {
+    flex-direction: row;
+}
+
+  .disabled\:border_stroke\.default:is(:disabled, [disabled], [data-disabled]) {
+    border-color: var(--colors-stroke-default);
+}
+
+  .vertical\:justify_flex-start[data-orientation=vertical] {
+    justify-content: flex-start;
+}
+
+  .vertical\:rounded-tl_xsmall[data-orientation=vertical] {
+    border-top-left-radius: var(--radii-xsmall);
+}
+
+  .vertical\:rounded-bl_xsmall[data-orientation=vertical] {
+    border-bottom-left-radius: var(--radii-xsmall);
+}
+
+  .selected\:border_stroke\.subtle:is([aria-selected=true], [data-selected]) {
+    border-color: var(--colors-stroke-subtle);
+}
+
+  .horizontal\:bottom_0[data-orientation=horizontal] {
+    bottom: 0;
+}
+
+  .vertical\:left_0[data-orientation=vertical] {
+    left: 0;
+}
+
   .focusWithin\:ring-offset_-1px:focus-within {
     outline-offset: -1px;
 }
@@ -1447,6 +1589,26 @@
     outline-offset: 0px;
 }
 
+  .focusVisible\:rounded_unset:is(:focus-visible, [data-focus-visible]) {
+    border-radius: unset;
+}
+
+  .focusVisible\:ring-offset_-3px:is(:focus-visible, [data-focus-visible]) {
+    outline-offset: -3px;
+}
+
+  .focusVisible\:shadow_0_0_0_3px_var\(--shadow-color\):is(:focus-visible, [data-focus-visible]) {
+    box-shadow: 0 0 0 3px var(--shadow-color);
+}
+
+  .peer:is(:focus-visible, [data-focus-visible]) ~ .peerFocusVisible\:h_var\(--height\) {
+    height: var(--height);
+}
+
+  .peer:is(:focus-visible, [data-focus-visible]) ~ .peerFocusVisible\:w_var\(--width\) {
+    width: var(--width);
+}
+
   .focus\:ring-color_stroke\.default:is(:focus, [data-focus]) {
     outline-color: var(--colors-stroke-default);
 }
@@ -1463,6 +1625,10 @@
     outline-color: var(--colors-surface-action);
 }
 
+  .focusVisible\:ring-color_stroke\.default:is(:focus-visible, [data-focus-visible]) {
+    outline-color: var(--colors-stroke-default);
+}
+
   .hover\:bg_surface\.actionSubtle\.hover:is(:hover, [data-hover]) {
     background: var(--colors-surface-action-subtle-hover);
 }
@@ -1515,6 +1681,10 @@
     --shadow-color: var(--colors-surface-action-subtle-hover-strong);
 }
 
+  .hover\:text-decor_underline:is(:hover, [data-hover]) {
+    text-decoration: underline;
+}
+
   .hover\:bg_surface\.hover:is(:hover, [data-hover]) {
     background: var(--colors-surface-hover);
 }
@@ -1527,10 +1697,6 @@
     background: var(--colors-surface-error-subtle-hover);
 }
 
-  .hover\:text-decor_underline:is(:hover, [data-hover]) {
-    text-decoration: underline;
-}
-
   .hover\:transform_translateX\(20\%\):is(:hover, [data-hover]) {
     transform: translateX(20%);
 }
@@ -1539,6 +1705,10 @@
     outline-color: var(--colors-stroke-hover);
 }
 
+  .hover\:border_stroke\.hover:is(:hover, [data-hover]) {
+    border-color: var(--colors-stroke-hover);
+}
+
   .active\:text_text\.onAction:is(:active, [data-active]) {
     color: var(--colors-text-on-action);
 }
@@ -1611,10 +1781,6 @@
     margin-block-end: calc(var(--spacing-xxsmall) * -1);
 }
 
-  .highlighted\:\[\&_svg\]\:text_icon\.default[data-highlighted] svg {
-    color: var(--colors-icon-default);
-}
-
   .disabled\:\[\&_svg\]\:text_stroke\.disabled:is(:disabled, [disabled], [data-disabled]) svg {
     color: var(--colors-stroke-disabled);
 }
@@ -1627,6 +1793,10 @@
     background: var(--colors-surface-default);
 }
 
+  .highlighted\:\[\&_svg\]\:text_icon\.default[data-highlighted] svg {
+    color: var(--colors-icon-default);
+}
+
   .checked\:hover\:transform_translateX\(100\%\):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:hover, [data-hover]) {
     transform: translateX(100%);
 }
@@ -1643,6 +1813,20 @@
     text-align: right;
 }
 
+  .disabled\:hover\:text_text\.subtle:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
+    color: var(--colors-text-subtle);
+}
+
+  .peer:is(:focus-visible, [data-focus-visible]) ~ .peerFocusVisible\:horizontal\:rounded-t_xsmall[data-orientation=horizontal] {
+    border-top-left-radius: var(--radii-xsmall);
+    border-top-right-radius: var(--radii-xsmall);
+}
+
+  .peer:is(:focus-visible, [data-focus-visible]) ~ .peerFocusVisible\:vertical\:rounded-r_xsmall[data-orientation=vertical] {
+    border-top-right-radius: var(--radii-xsmall);
+    border-bottom-right-radius: var(--radii-xsmall);
+}
+
   .\[\&_\>_li\]\:marker\:content_counters\(list-item\,_\'\.\'\)_\'\._\' > li::marker {
     content: counters(list-item, '.') '. ';
 }
@@ -1683,6 +1867,18 @@
     background-color: transparent;
 }
 
+  .disabled\:hover\:border_stroke\.default:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
+    border-color: var(--colors-stroke-default);
+}
+
+  .selected\:horizontal\:border-b_transparent:is([aria-selected=true], [data-selected])[data-orientation=horizontal] {
+    border-bottom-color: transparent;
+}
+
+  .selected\:vertical\:border-r_transparent:is([aria-selected=true], [data-selected])[data-orientation=vertical] {
+    border-right-color: transparent;
+}
+
   .focusWithin\:hover\:ring-color_stroke\.default:focus-within:is(:hover, [data-hover]) {
     outline-color: var(--colors-stroke-default);
 }
@@ -1699,6 +1895,10 @@
     transform: translateX(0);
 }
 
+  .hover\:focusVisible\:border_stroke\.default:is(:hover, [data-hover]):is(:focus-visible, [data-focus-visible]) {
+    border-color: var(--colors-stroke-default);
+}
+
   .disabled\:hover\:\[\&_svg\]\:text_stroke\.disabled:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) svg {
     color: var(--colors-stroke-disabled);
 }

package/es/ArticleLists.js

@@ -7,8 +7,7 @@
  */
 
 import { styled } from "@ndla/styled-system/jsx";
-import { jsx as _jsx } from "react/jsx-runtime";
-const StyledOrderedList = styled("ol", {
+export const OrderedList = styled("ol", {
   base: {
     listStyle: "revert",
     listStylePosition: "inside",
@@ -54,18 +53,7 @@ const StyledOrderedList = styled("ol", {
     }
   }
 });
-export const OrderedList = _ref => {
-  let {
-    variant = "numbers",
-    ...props
-  } = _ref;
-  return /*#__PURE__*/_jsx(StyledOrderedList, {
-    variant: variant,
-    "data-variant": variant,
-    ...props
-  });
-};
-const StyledUnOrderedList = styled("ul", {
+export const UnOrderedList = styled("ul", {
   base: {
     listStyle: "revert",
     listStylePosition: "inside",
@@ -78,15 +66,7 @@ const StyledUnOrderedList = styled("ul", {
     }
   }
 });
-export const UnOrderedList = _ref2 => {
-  let {
-    ...props
-  } = _ref2;
-  return /*#__PURE__*/_jsx(StyledUnOrderedList, {
-    ...props
-  });
-};
-const StyledDefinitionList = styled("dl", {
+export const DefinitionList = styled("dl", {
   base: {
     "& dt": {
       fontWeight: "bold"
@@ -95,12 +75,4 @@ const StyledDefinitionList = styled("dl", {
       marginInlineStart: "medium"
     }
   }
-});
-export const DefinitionList = _ref3 => {
-  let {
-    ...props
-  } = _ref3;
-  return /*#__PURE__*/_jsx(StyledDefinitionList, {
-    ...props
-  });
-};
+});

package/es/Badge.js

@@ -6,9 +6,9 @@
  *
  */
 
-import { cva, cx } from "@ndla/styled-system/css";
+import { ark } from "@ark-ui/react";
+import { cva } from "@ndla/styled-system/css";
 import { styled } from "@ndla/styled-system/jsx";
-import { jsx as _jsx } from "react/jsx-runtime";
 const badgeRecipe = cva({
   base: {
     paddingInline: "xsmall",
@@ -26,7 +26,7 @@ const badgeRecipe = cva({
         borderColor: "surface.brand.1.strong"
       },
       brand2: {
-        backgroundColor: "surface.brand.2.subtle",
+        backgroundColor: "surface.brand.2.moderate",
         borderColor: "surface.brand.2.strong"
       },
       brand3: {
@@ -40,16 +40,4 @@ const badgeRecipe = cva({
     }
   }
 });
-export const Badge = _ref => {
-  let {
-    colorTheme,
-    className,
-    ...rest
-  } = _ref;
-  return /*#__PURE__*/_jsx(styled.div, {
-    className: cx(badgeRecipe({
-      colorTheme
-    }), className),
-    ...rest
-  });
-};
+export const Badge = styled(ark.div, badgeRecipe);

package/es/BlockQuote.js

@@ -6,9 +6,9 @@
  *
  */
 
-import { cva, cx } from "@ndla/styled-system/css";
+import { ark } from "@ark-ui/react";
+import { cva } from "@ndla/styled-system/css";
 import { styled } from "@ndla/styled-system/jsx";
-import { jsx as _jsx } from "react/jsx-runtime";
 const blockQuoteRecipe = cva({
   base: {
     borderInlineStart: "4px solid",
@@ -34,16 +34,4 @@ const blockQuoteRecipe = cva({
     variant: "neutral"
   }
 });
-export const BlockQuote = _ref => {
-  let {
-    className,
-    variant,
-    ...rest
-  } = _ref;
-  return /*#__PURE__*/_jsx(styled.blockquote, {
-    className: cx(blockQuoteRecipe({
-      variant
-    }), className),
-    ...rest
-  });
-};
+export const BlockQuote = styled(ark.blockquote, blockQuoteRecipe);