@ndla/primitives 0.0.11 → 0.0.13-alpha.0

package/dist/panda.buildinfo.json

@@ -305,22 +305,8 @@
       "left]___[value:auto",
       "marginBlock]___[value:xsmall",
       "borderRadius]___[value:small",
-      "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",
-      "verticalAlign]___[value:middle",
-      "lineHeight]___[value:1em",
-      "flexShrink]___[value:0",
-      "width]___[value:xsmall",
-      "height]___[value:xsmall",
-      "width]___[value:small",
-      "height]___[value:small",
-      "width]___[value:large",
-      "height]___[value:large",
       "outline]___[value:1px solid",
       "background]___[value:background.default",
       "minHeight]___[value:xxlarge",
@@ -345,6 +331,7 @@
       "float]___[value:none",
       "width]___[value:inherit",
       "color]___[value:text.subtle]___[cond:_disabled",
+      "display]___[value:inline-block",
       "border]___[value:none",
       "padding]___[value:0",
       "margin]___[value:0",
@@ -365,7 +352,7 @@
       "background]___[value:surface.errorSubtle.active]___[cond:_active",
       "minWidth]___[value:surface.xxsmall",
       "padding]___[value:3xsmall",
-      "boxShadow]___[value:xsmall",
+      "boxShadow]___[value:small",
       "alignItems]___[value:flex-start",
       "gap]___[value:small",
       "background]___[value:surface.infoSubtle",
@@ -436,10 +423,13 @@
       "marginBlock]___[value:medium",
       "marginInline]___[value:auto",
       "borderWidth]___[value:4px",
+      "height]___[value:large",
+      "width]___[value:large",
       "borderWidth]___[value:8px",
       "background]___[value:surface.disabled.strong",
       "padding]___[value:1",
       "borderRadius]___[value:medium",
+      "flexShrink]___[value:0",
       "background]___[value:surface.action.active]___[cond:_checked",
       "background]___[value:icon.onAction",
       "width]___[value:10",

package/dist/styles.css

@@ -520,54 +520,6 @@
     border-radius: var(--radii-small);
 }
 
-  .shadow_4px_4px_0px_0px_var\(--shadow-color\) {
-    box-shadow: 4px 4px 0px 0px var(--shadow-color);
-}
-
-  .shadow-color_surface\.brand\.1\.strong {
-    --shadow-color: var(--colors-surface-brand-1-strong);
-}
-
-  .shadow-color_surface\.brand\.2\.strong {
-    --shadow-color: var(--colors-surface-brand-2-strong);
-}
-
-  .d_inline-block {
-    display: inline-block;
-}
-
-  .fill_currentcolor {
-    fill: currentcolor;
-}
-
-  .v-align_middle {
-    vertical-align: middle;
-}
-
-  .w_xsmall {
-    width: var(--sizes-xsmall);
-}
-
-  .h_xsmall {
-    height: var(--sizes-xsmall);
-}
-
-  .w_small {
-    width: var(--sizes-small);
-}
-
-  .h_small {
-    height: var(--sizes-small);
-}
-
-  .w_large {
-    width: var(--sizes-large);
-}
-
-  .h_large {
-    height: var(--sizes-large);
-}
-
   .ring_1px_solid {
     outline: 1px solid;
 }
@@ -608,6 +560,10 @@
     width: inherit;
 }
 
+  .d_inline-block {
+    display: inline-block;
+}
+
   .border_none {
     border: none;
 }
@@ -628,8 +584,8 @@
     padding: var(--spacing-3xsmall);
 }
 
-  .shadow_xsmall {
-    box-shadow: var(--shadows-xsmall);
+  .shadow_small {
+    box-shadow: var(--shadows-small);
 }
 
   .gap_small {
@@ -736,6 +692,14 @@
     margin-inline: auto;
 }
 
+  .h_large {
+    height: var(--sizes-large);
+}
+
+  .w_large {
+    width: var(--sizes-large);
+}
+
   .bg_surface\.disabled\.strong {
     background: var(--colors-surface-disabled-strong);
 }
@@ -1002,14 +966,6 @@
     background-color: var(--colors-surface-brand-2-subtle);
 }
 
-  .leading_1em {
-    line-height: 1em;
-}
-
-  .shrink_0 {
-    flex-shrink: 0;
-}
-
   .overflow-y_hidden {
     overflow-y: hidden;
 }
@@ -1094,6 +1050,10 @@
     border-width: 8px;
 }
 
+  .shrink_0 {
+    flex-shrink: 0;
+}
+
   .transition-prop_color {
     --transition-prop: color;
     transition-property: color;

package/es/ArticleLists.js

@@ -6,8 +6,12 @@
  *
  */
 
+import { forwardRef } from "react";
+import { ark } from "@ark-ui/react";
+import { css, cva } from "@ndla/styled-system/css";
 import { styled } from "@ndla/styled-system/jsx";
-export const OrderedList = styled("ol", {
+import { jsx as _jsx } from "react/jsx-runtime";
+const orderedListRecipe = cva({
   base: {
     listStyle: "revert",
     listStylePosition: "inside",
@@ -53,6 +57,23 @@ export const OrderedList = styled("ol", {
     }
   }
 });
+const StyledOrderedList = styled(ark.ol, {}, {
+  baseComponent: true
+});
+export const OrderedList = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    variant,
+    css: cssProp,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_jsx(StyledOrderedList, {
+    css: css.raw(orderedListRecipe.raw({
+      variant
+    }), cssProp),
+    ...props,
+    ref: ref
+  });
+});
 export const UnOrderedList = styled("ul", {
   base: {
     listStyle: "revert",

package/es/Badge.js

@@ -6,9 +6,11 @@
  *
  */
 
+import { forwardRef } from "react";
 import { ark } from "@ark-ui/react";
-import { cva } from "@ndla/styled-system/css";
+import { css, 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",
@@ -40,4 +42,20 @@ const badgeRecipe = cva({
     }
   }
 });
-export const Badge = styled(ark.div, badgeRecipe);
+const StyledBadge = styled(ark.div, {}, {
+  baseComponent: true
+});
+export const Badge = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    colorTheme,
+    css: cssProp,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_jsx(StyledBadge, {
+    css: css.raw(badgeRecipe.raw({
+      colorTheme
+    }), cssProp),
+    ...props,
+    ref: ref
+  });
+});

package/es/BlockQuote.js

@@ -6,9 +6,11 @@
  *
  */
 
+import { forwardRef } from "react";
 import { ark } from "@ark-ui/react";
-import { cva } from "@ndla/styled-system/css";
+import { css, 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,4 +36,20 @@ const blockQuoteRecipe = cva({
     variant: "neutral"
   }
 });
-export const BlockQuote = styled(ark.blockquote, blockQuoteRecipe);
+const StyledBlockQuote = styled(ark.blockquote, {}, {
+  baseComponent: true
+});
+export const BlockQuote = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    variant,
+    css: cssProp,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_jsx(StyledBlockQuote, {
+    css: css.raw(blockQuoteRecipe.raw({
+      variant
+    }), cssProp),
+    ...props,
+    ref: ref
+  });
+});

package/es/Button.js

@@ -182,6 +182,7 @@ export const iconButtonRecipe = cva({
   }
 });
 const StyledButton = styled(ark.button, {}, {
+  baseComponent: true,
   defaultProps: {
     type: "button"
   }
@@ -204,6 +205,7 @@ export const Button = /*#__PURE__*/forwardRef((_ref, ref) => {
   });
 });
 const StyledIconButton = styled(ark.button, {}, {
+  baseComponent: true,
   defaultProps: {
     type: "button"
   }

package/es/Checkbox.js

@@ -221,7 +221,6 @@ export const CheckboxLabel = _ref => {
   return /*#__PURE__*/_jsx(InternalCheckboxLabel, {
     ...props,
     asChild: true,
-    forwardCssProp: true,
     children: /*#__PURE__*/_jsx(Text, {
       textStyle: textStyle,
       children: children

package/es/Combobox.js

@@ -173,11 +173,10 @@ export const ComboboxItemGroupLabel = _ref2 => {
     ...props
   } = _ref2;
   return /*#__PURE__*/_jsx(InternalComboboxItemGroupLabel, {
-    forwardCssProp: true,
     asChild: true,
     children: /*#__PURE__*/_jsx(Text, {
       asChild: true,
-      forwardCssProp: true,
+      consumeCss: true,
       textStyle: textStyle,
       fontWeight: fontWeight,
       ...props,
@@ -195,13 +194,18 @@ export const ComboboxItemText = _ref3 => {
   let {
     textStyle = "label.medium",
     fontWeight = "bold",
+    children,
     ...props
   } = _ref3;
   return /*#__PURE__*/_jsx(InternalComboboxItemText, {
-    forwardCssProp: true,
     asChild: true,
     children: /*#__PURE__*/_jsx(Text, {
-      ...props
+      ...props,
+      asChild: true,
+      consumeCss: true,
+      children: /*#__PURE__*/_jsx("div", {
+        children: children
+      })
     })
   });
 };
@@ -213,7 +217,6 @@ export const ComboboxLabel = _ref4 => {
     ...props
   } = _ref4;
   return /*#__PURE__*/_jsx(InternalComboboxLabel, {
-    forwardCssProp: true,
     asChild: true,
     children: /*#__PURE__*/_jsx(Label, {
       textStyle: textStyle,

package/es/Dialog.js

@@ -280,14 +280,15 @@ const InternalDialogDescription = withContext(Dialog.Description, "description")
 export const DialogDescription = _ref2 => {
   let {
     textStyle = "body.large",
+    children,
     ...rest
   } = _ref2;
   return /*#__PURE__*/_jsx(InternalDialogDescription, {
     asChild: true,
-    forwardCssProp: true,
     children: /*#__PURE__*/_jsx(Text, {
       textStyle: textStyle,
-      ...rest
+      ...rest,
+      children: children
     })
   });
 };
@@ -295,14 +296,15 @@ const InternalDialogTitle = withContext(Dialog.Title, "title");
 export const DialogTitle = _ref3 => {
   let {
     textStyle = "title.medium",
+    children,
     ...rest
   } = _ref3;
   return /*#__PURE__*/_jsx(InternalDialogTitle, {
     asChild: true,
-    forwardCssProp: true,
     children: /*#__PURE__*/_jsx(Heading, {
       textStyle: textStyle,
-      ...rest
+      ...rest,
+      children: children
     })
   });
 };

package/es/ExpandableBox.js

@@ -39,4 +39,6 @@ export const ExpandableBoxSummary = styled(ark.summary, {
       textStyle: "label.large!"
     }
   }
+}, {
+  baseComponent: true
 });

package/es/Field.js

@@ -14,4 +14,6 @@ export const FieldRoot = styled(Field.Root, {
     flexDirection: "column",
     gap: "3xsmall"
   }
+}, {
+  baseComponent: true
 });

package/es/FieldErrorMessage.js

@@ -17,6 +17,8 @@ const StyledErrorText = styled(Field.ErrorText, {
     whiteSpace: "pre-line",
     justifyContent: "center"
   }
+}, {
+  baseComponent: true
 });
 export const FieldErrorMessage = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {

package/es/FieldHelper.js

@@ -11,7 +11,9 @@ import { Field } from "@ark-ui/react";
 import { css } from "@ndla/styled-system/css";
 import { styled } from "@ndla/styled-system/jsx";
 import { jsx as _jsx } from "react/jsx-runtime";
-const StyledFieldHelper = styled(Field.HelperText);
+const StyledFieldHelper = styled(Field.HelperText, {}, {
+  baseComponent: true
+});
 export const FieldHelper = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     textStyle = "label.small",

package/es/Figure.js

@@ -6,8 +6,12 @@
  *
  */
 
+import { forwardRef } from "react";
+import { ark } from "@ark-ui/react";
+import { css, cva } from "@ndla/styled-system/css";
 import { styled } from "@ndla/styled-system/jsx";
-export const Figure = styled("figure", {
+import { jsx as _jsx } from "react/jsx-runtime";
+const figureRecipe = cva({
   base: {
     position: "relative",
     transitionDuration: "normal",
@@ -72,4 +76,23 @@ export const Figure = styled("figure", {
       marginBlock: "xsmall"
     }
   }]
+});
+const StyledFigure = styled(ark.figure, {}, {
+  baseComponent: true
+});
+export const Figure = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    size,
+    float,
+    css: cssProp,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_jsx(StyledFigure, {
+    css: css.raw(figureRecipe.raw({
+      size,
+      float
+    }), cssProp),
+    ...props,
+    ref: ref
+  });
 });

package/es/FramedContent.js

@@ -6,32 +6,30 @@
  *
  */
 
+import { forwardRef } from "react";
 import { ark } from "@ark-ui/react";
-import { cva } from "@ndla/styled-system/css";
+import { css, cva } from "@ndla/styled-system/css";
 import { styled } from "@ndla/styled-system/jsx";
+import { jsx as _jsx } from "react/jsx-runtime";
 const framedContentRecipe = cva({
   base: {
     padding: "medium",
     border: "1px solid",
-    borderRadius: "small",
-    boxShadow: "4px 4px 0px 0px var(--shadow-color)"
+    borderRadius: "small"
   },
   variants: {
     colorTheme: {
       neutral: {
         backgroundColor: "surface.default",
-        borderColor: "stroke.subtle",
-        boxShadowColor: "stroke.subtle"
+        borderColor: "stroke.subtle"
       },
       brand1: {
         backgroundColor: "surface.brand.1.subtle",
-        borderColor: "surface.brand.1.strong",
-        boxShadowColor: "surface.brand.1.strong"
+        borderColor: "surface.brand.1.strong"
       },
       brand2: {
         backgroundColor: "surface.brand.2.subtle",
-        borderColor: "surface.brand.2.strong",
-        boxShadowColor: "surface.brand.2.strong"
+        borderColor: "surface.brand.2.strong"
       }
     }
   },
@@ -39,4 +37,20 @@ const framedContentRecipe = cva({
     colorTheme: "neutral"
   }
 });
-export const FramedContent = styled(ark.div, framedContentRecipe);
+const StyledFramedContent = styled(ark.div, {}, {
+  baseComponent: true
+});
+export const FramedContent = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    colorTheme,
+    css: cssProp,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_jsx(StyledFramedContent, {
+    css: css.raw(framedContentRecipe.raw({
+      colorTheme
+    }), cssProp),
+    ...props,
+    ref: ref
+  });
+});

package/es/Input.js

@@ -61,6 +61,8 @@ const StyledInputContainer = styled(ark.div, {
       height: "medium"
     }
   }
+}, {
+  baseComponent: true
 });
 export const InputContainer = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
@@ -102,7 +104,9 @@ const baseTextAreaCss = css.raw({
   resize: "none",
   overflowY: "hidden"
 });
-const StyledInput = styled(ark.input);
+const StyledInput = styled(ark.input, {}, {
+  baseComponent: true
+});
 export const Input = /*#__PURE__*/forwardRef((_ref2, ref) => {
   let {
     css: cssProp,
@@ -122,7 +126,9 @@ export const FieldInput = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/_
     ref: ref
   })
 }));
-const StyledTextArea = styled(ark.textarea);
+const StyledTextArea = styled(ark.textarea, {}, {
+  baseComponent: true
+});
 export const TextArea = /*#__PURE__*/forwardRef((_ref3, ref) => {
   let {
     css: cssProp,

package/es/Label.js

@@ -19,6 +19,8 @@ const StyledLegend = styled(ark.legend, {
       color: "text.subtle"
     }
   }
+}, {
+  baseComponent: true
 });
 // TODO: This is not exported for now. Let's wait and see when ark decides to release their legend and fieldset.
 export const Legend = /*#__PURE__*/forwardRef((_ref, ref) => {
@@ -27,13 +29,15 @@ export const Legend = /*#__PURE__*/forwardRef((_ref, ref) => {
     fontWeight = "bold",
     css: cssProp,
     srOnly,
+    color,
     ...rest
   } = _ref;
   return /*#__PURE__*/_jsx(StyledLegend, {
     css: css.raw({
       textStyle,
       fontWeight,
-      srOnly
+      srOnly,
+      color
     }, cssProp),
     ...rest,
     ref: ref
@@ -46,6 +50,8 @@ const StyledLabel = styled(ark.label, {
       color: "text.subtle"
     }
   }
+}, {
+  baseComponent: true
 });
 export const Label = /*#__PURE__*/forwardRef((_ref2, ref) => {
   let {
@@ -53,13 +59,15 @@ export const Label = /*#__PURE__*/forwardRef((_ref2, ref) => {
     fontWeight = "bold",
     css: cssProp,
     srOnly,
+    color,
     ...rest
   } = _ref2;
   return /*#__PURE__*/_jsx(StyledLabel, {
     css: css.raw({
       textStyle,
       fontWeight,
-      srOnly
+      srOnly,
+      color
     }, cssProp),
     ...rest,
     ref: ref

package/es/Menu.js

@@ -103,7 +103,7 @@ const menuRecipe = sva({
       padding: "3xsmall",
       gap: "3xsmall",
       background: "surface.default",
-      boxShadow: "xsmall",
+      boxShadow: "small",
       borderRadius: "xsmall",
       outline: "none",
       zIndex: "dropdown",
@@ -153,7 +153,6 @@ export const MenuItemGroupLabel = _ref2 => {
   return /*#__PURE__*/_jsx(InternalMenuItemGroupLabel, {
     ...props,
     asChild: true,
-    forwardCssProp: true,
     children: /*#__PURE__*/_jsx(Text, {
       textStyle: textStyle,
       fontWeight: fontWeight,

package/es/MessageBox.js

@@ -6,9 +6,11 @@
  *
  */
 
+import { forwardRef } from "react";
 import { ark } from "@ark-ui/react";
-import { cva } from "@ndla/styled-system/css";
+import { css, cva } from "@ndla/styled-system/css";
 import { styled } from "@ndla/styled-system/jsx";
+import { jsx as _jsx } from "react/jsx-runtime";
 const messageBoxRecipe = cva({
   base: {
     display: "flex",
@@ -42,4 +44,20 @@ const messageBoxRecipe = cva({
     }
   }
 });
-export const MessageBox = styled(ark.div, messageBoxRecipe);
+const StyledMessageBox = styled(ark.div, {}, {
+  baseComponent: true
+});
+export const MessageBox = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    variant,
+    css: cssProp,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_jsx(StyledMessageBox, {
+    css: css.raw(messageBoxRecipe.raw({
+      variant
+    }), cssProp),
+    ...props,
+    ref: ref
+  });
+});

package/es/RadioGroup.js

@@ -103,9 +103,9 @@ export const RadioGroupItemText = _ref => {
   } = _ref;
   return /*#__PURE__*/_jsx(InternalRadioGroupItemText, {
     asChild: true,
-    forwardCssProp: true,
     children: /*#__PURE__*/_jsx(Text, {
       asChild: true,
+      consumeCss: true,
       textStyle: textStyle,
       ...props,
       children: /*#__PURE__*/_jsx("span", {
@@ -123,7 +123,6 @@ export const RadioGroupLabel = /*#__PURE__*/forwardRef((_ref2, ref) => {
   return /*#__PURE__*/_jsx(InternalRadioGroupLabel, {
     ref: ref,
     asChild: true,
-    forwardCssProp: true,
     children: /*#__PURE__*/_jsx(Label, {
       textStyle: textStyle,
       ...props