@ndla/primitives 1.0.124-alpha.0 → 1.0.126-alpha.0

package/lib/Field.js

@@ -1,6 +1,5 @@
 let _ark_ui_react = require("@ark-ui/react");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
-
 //#region src/Field.tsx
 /**
 * Copyright (c) 2024-present, NDLA.
@@ -16,8 +15,8 @@ const rootStyle = {
 };
 const FieldRoot = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react.Field.Root, { base: rootStyle }, { baseComponent: true });
 const FieldsetRoot = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react.Fieldset.Root, { base: rootStyle }, { baseComponent: true });
-
 //#endregion
 exports.FieldRoot = FieldRoot;
 exports.FieldsetRoot = FieldsetRoot;
+
 //# sourceMappingURL=Field.js.map

package/lib/Field.js.map

@@ -1 +1 @@
-{"version":3,"file":"Field.js","names":["Field","Fieldset"],"sources":["../src/Field.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 { Field, Fieldset } from \"@ark-ui/react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { SystemStyleObject } from \"@ndla/styled-system/types\";\n\nconst rootStyle: SystemStyleObject = {\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap: \"3xsmall\",\n};\n\nexport const FieldRoot = styled(Field.Root, { base: rootStyle }, { baseComponent: true });\n\nexport const FieldsetRoot = styled(Fieldset.Root, { base: rootStyle }, { baseComponent: true });\n"],"mappings":";;;;;;;;;;;AAYA,MAAM,YAA+B;CACnC,SAAS;CACT,eAAe;CACf,KAAK;CACN;AAED,MAAa,gDAAmBA,oBAAM,MAAM,EAAE,MAAM,WAAW,EAAE,EAAE,eAAe,MAAM,CAAC;AAEzF,MAAa,mDAAsBC,uBAAS,MAAM,EAAE,MAAM,WAAW,EAAE,EAAE,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Field.js","names":["Field","Fieldset"],"sources":["../src/Field.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 { Field, Fieldset } from \"@ark-ui/react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { SystemStyleObject } from \"@ndla/styled-system/types\";\n\nconst rootStyle: SystemStyleObject = {\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap: \"3xsmall\",\n};\n\nexport const FieldRoot = styled(Field.Root, { base: rootStyle }, { baseComponent: true });\n\nexport const FieldsetRoot = styled(Fieldset.Root, { base: rootStyle }, { baseComponent: true });\n"],"mappings":";;;;;;;;;;AAYA,MAAM,YAA+B;CACnC,SAAS;CACT,eAAe;CACf,KAAK;CACN;AAED,MAAa,aAAA,GAAA,wBAAA,QAAmBA,cAAAA,MAAM,MAAM,EAAE,MAAM,WAAW,EAAE,EAAE,eAAe,MAAM,CAAC;AAEzF,MAAa,gBAAA,GAAA,wBAAA,QAAsBC,cAAAA,SAAS,MAAM,EAAE,MAAM,WAAW,EAAE,EAAE,eAAe,MAAM,CAAC"}

package/lib/FieldErrorMessage.js

@@ -3,7 +3,6 @@ let _ndla_styled_system_css = require("@ndla/styled-system/css");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
-
 //#region src/FieldErrorMessage.tsx
 /**
 * Copyright (c) 2024-present, NDLA.
@@ -39,8 +38,8 @@ const FieldsetErrorText = (0, react.forwardRef)(({ textStyle = "label.small", fo
 	...props,
 	ref
 }));
-
 //#endregion
 exports.FieldErrorMessage = FieldErrorMessage;
 exports.FieldsetErrorText = FieldsetErrorText;
+
 //# sourceMappingURL=FieldErrorMessage.js.map

package/lib/FieldErrorMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldErrorMessage.js","names":["Field","css","Fieldset"],"sources":["../src/FieldErrorMessage.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 { Field, Fieldset } from \"@ark-ui/react\";\nimport { css } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps, SystemStyleObject } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\nimport type { TextProps } from \"./Text\";\n\nconst errorTextStyling: SystemStyleObject = {\n  color: \"text.error\",\n  whiteSpace: \"pre-line\",\n  justifyContent: \"center\",\n};\n\nconst StyledFieldErrorText = styled(\n  Field.ErrorText,\n  {\n    base: errorTextStyling,\n  },\n  { baseComponent: true },\n);\n\nexport interface FieldErrorMessageProps extends Omit<Field.ErrorTextProps, \"color\">, TextProps, StyledProps {}\n\nexport const FieldErrorMessage = forwardRef<HTMLSpanElement, FieldErrorMessageProps>(\n  ({ textStyle = \"label.small\", fontWeight, css: cssProp, color, srOnly, ...props }, ref) => (\n    <StyledFieldErrorText css={css.raw({ textStyle, fontWeight, color, srOnly }, cssProp)} {...props} ref={ref} />\n  ),\n);\n\nconst StyledFieldsetErrorText = styled(\n  Fieldset.ErrorText,\n  {\n    base: errorTextStyling,\n  },\n  { baseComponent: true },\n);\n\nexport interface FieldsetErrorTextProps extends Omit<Fieldset.ErrorTextProps, \"color\">, TextProps, StyledProps {}\n\nexport const FieldsetErrorText = forwardRef<HTMLSpanElement, FieldsetErrorTextProps>(\n  ({ textStyle = \"label.small\", fontWeight, css: cssProp, color, srOnly, ...props }, ref) => (\n    <StyledFieldsetErrorText css={css.raw({ textStyle, fontWeight, color, srOnly }, cssProp)} {...props} ref={ref} />\n  ),\n);\n"],"mappings":";;;;;;;;;;;;;;AAeA,MAAM,mBAAsC;CAC1C,OAAO;CACP,YAAY;CACZ,gBAAgB;CACjB;AAED,MAAM,2DACJA,oBAAM,WACN,EACE,MAAM,kBACP,EACD,EAAE,eAAe,MAAM,CACxB;AAID,MAAa,2CACV,EAAE,YAAY,eAAe,YAAY,KAAK,SAAS,OAAO,QAAQ,GAAG,SAAS,QACjF,2CAAC;CAAqB,KAAKC,4BAAI,IAAI;EAAE;EAAW;EAAY;EAAO;EAAQ,EAAE,QAAQ;CAAE,GAAI;CAAY;EAAO,CAEjH;AAED,MAAM,8DACJC,uBAAS,WACT,EACE,MAAM,kBACP,EACD,EAAE,eAAe,MAAM,CACxB;AAID,MAAa,2CACV,EAAE,YAAY,eAAe,YAAY,KAAK,SAAS,OAAO,QAAQ,GAAG,SAAS,QACjF,2CAAC;CAAwB,KAAKD,4BAAI,IAAI;EAAE;EAAW;EAAY;EAAO;EAAQ,EAAE,QAAQ;CAAE,GAAI;CAAY;EAAO,CAEpH"}
+{"version":3,"file":"FieldErrorMessage.js","names":["Field","css","Fieldset"],"sources":["../src/FieldErrorMessage.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 { Field, Fieldset } from \"@ark-ui/react\";\nimport { css } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps, SystemStyleObject } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\nimport type { TextProps } from \"./Text\";\n\nconst errorTextStyling: SystemStyleObject = {\n  color: \"text.error\",\n  whiteSpace: \"pre-line\",\n  justifyContent: \"center\",\n};\n\nconst StyledFieldErrorText = styled(\n  Field.ErrorText,\n  {\n    base: errorTextStyling,\n  },\n  { baseComponent: true },\n);\n\nexport interface FieldErrorMessageProps extends Omit<Field.ErrorTextProps, \"color\">, TextProps, StyledProps {}\n\nexport const FieldErrorMessage = forwardRef<HTMLSpanElement, FieldErrorMessageProps>(\n  ({ textStyle = \"label.small\", fontWeight, css: cssProp, color, srOnly, ...props }, ref) => (\n    <StyledFieldErrorText css={css.raw({ textStyle, fontWeight, color, srOnly }, cssProp)} {...props} ref={ref} />\n  ),\n);\n\nconst StyledFieldsetErrorText = styled(\n  Fieldset.ErrorText,\n  {\n    base: errorTextStyling,\n  },\n  { baseComponent: true },\n);\n\nexport interface FieldsetErrorTextProps extends Omit<Fieldset.ErrorTextProps, \"color\">, TextProps, StyledProps {}\n\nexport const FieldsetErrorText = forwardRef<HTMLSpanElement, FieldsetErrorTextProps>(\n  ({ textStyle = \"label.small\", fontWeight, css: cssProp, color, srOnly, ...props }, ref) => (\n    <StyledFieldsetErrorText css={css.raw({ textStyle, fontWeight, color, srOnly }, cssProp)} {...props} ref={ref} />\n  ),\n);\n"],"mappings":";;;;;;;;;;;;;AAeA,MAAM,mBAAsC;CAC1C,OAAO;CACP,YAAY;CACZ,gBAAgB;CACjB;AAED,MAAM,wBAAA,GAAA,wBAAA,QACJA,cAAAA,MAAM,WACN,EACE,MAAM,kBACP,EACD,EAAE,eAAe,MAAM,CACxB;AAID,MAAa,qBAAA,GAAA,MAAA,aACV,EAAE,YAAY,eAAe,YAAY,KAAK,SAAS,OAAO,QAAQ,GAAG,SAAS,QACjF,iBAAA,GAAA,kBAAA,KAAC,sBAAD;CAAsB,KAAKC,wBAAAA,IAAI,IAAI;EAAE;EAAW;EAAY;EAAO;EAAQ,EAAE,QAAQ;CAAE,GAAI;CAAY;CAAO,CAAA,CAEjH;AAED,MAAM,2BAAA,GAAA,wBAAA,QACJC,cAAAA,SAAS,WACT,EACE,MAAM,kBACP,EACD,EAAE,eAAe,MAAM,CACxB;AAID,MAAa,qBAAA,GAAA,MAAA,aACV,EAAE,YAAY,eAAe,YAAY,KAAK,SAAS,OAAO,QAAQ,GAAG,SAAS,QACjF,iBAAA,GAAA,kBAAA,KAAC,yBAAD;CAAyB,KAAKD,wBAAAA,IAAI,IAAI;EAAE;EAAW;EAAY;EAAO;EAAQ,EAAE,QAAQ;CAAE,GAAI;CAAY;CAAO,CAAA,CAEpH"}

package/lib/FieldHelper.js

@@ -3,7 +3,6 @@ let _ndla_styled_system_css = require("@ndla/styled-system/css");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
-
 //#region src/FieldHelper.tsx
 /**
 * Copyright (c) 2025-present, NDLA.
@@ -38,8 +37,8 @@ const FieldsetHelper = (0, react.forwardRef)(({ textStyle = "label.small", fontW
 		ref
 	});
 });
-
 //#endregion
 exports.FieldHelper = FieldHelper;
 exports.FieldsetHelper = FieldsetHelper;
+
 //# sourceMappingURL=FieldHelper.js.map

package/lib/FieldHelper.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldHelper.js","names":["Field","css","Fieldset"],"sources":["../src/FieldHelper.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025-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 { Field, Fieldset } from \"@ark-ui/react\";\nimport { css } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\nimport type { TextProps } from \"./Text\";\n\nconst StyledFieldHelper = styled(Field.HelperText, {}, { baseComponent: true });\n\nexport interface FieldHelperProps extends Omit<Field.HelperTextProps, \"color\">, TextProps, StyledProps {}\n\nexport const FieldHelper = forwardRef<HTMLSpanElement, FieldHelperProps>(\n  ({ textStyle = \"label.small\", fontWeight, color, srOnly, css: cssProp, ...props }, ref) => {\n    return <StyledFieldHelper css={css.raw({ textStyle, fontWeight, color, srOnly }, cssProp)} {...props} ref={ref} />;\n  },\n);\n\nconst StyledFieldsetHelper = styled(Fieldset.HelperText, {}, { baseComponent: true });\n\nexport interface FieldsetHelperProps extends Omit<Fieldset.HelperTextProps, \"color\">, TextProps, StyledProps {}\n\nexport const FieldsetHelper = forwardRef<HTMLSpanElement, FieldsetHelperProps>(\n  ({ textStyle = \"label.small\", fontWeight, color, srOnly, css: cssProp, ...props }, ref) => {\n    return (\n      <StyledFieldsetHelper css={css.raw({ textStyle, fontWeight, color, srOnly }, cssProp)} {...props} ref={ref} />\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;AAeA,MAAM,wDAA2BA,oBAAM,YAAY,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAI/E,MAAa,qCACV,EAAE,YAAY,eAAe,YAAY,OAAO,QAAQ,KAAK,SAAS,GAAG,SAAS,QAAQ;AACzF,QAAO,2CAAC;EAAkB,KAAKC,4BAAI,IAAI;GAAE;GAAW;GAAY;GAAO;GAAQ,EAAE,QAAQ;EAAE,GAAI;EAAY;GAAO;EAErH;AAED,MAAM,2DAA8BC,uBAAS,YAAY,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAIrF,MAAa,wCACV,EAAE,YAAY,eAAe,YAAY,OAAO,QAAQ,KAAK,SAAS,GAAG,SAAS,QAAQ;AACzF,QACE,2CAAC;EAAqB,KAAKD,4BAAI,IAAI;GAAE;GAAW;GAAY;GAAO;GAAQ,EAAE,QAAQ;EAAE,GAAI;EAAY;GAAO;EAGnH"}
+{"version":3,"file":"FieldHelper.js","names":["Field","css","Fieldset"],"sources":["../src/FieldHelper.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025-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 { Field, Fieldset } from \"@ark-ui/react\";\nimport { css } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\nimport type { TextProps } from \"./Text\";\n\nconst StyledFieldHelper = styled(Field.HelperText, {}, { baseComponent: true });\n\nexport interface FieldHelperProps extends Omit<Field.HelperTextProps, \"color\">, TextProps, StyledProps {}\n\nexport const FieldHelper = forwardRef<HTMLSpanElement, FieldHelperProps>(\n  ({ textStyle = \"label.small\", fontWeight, color, srOnly, css: cssProp, ...props }, ref) => {\n    return <StyledFieldHelper css={css.raw({ textStyle, fontWeight, color, srOnly }, cssProp)} {...props} ref={ref} />;\n  },\n);\n\nconst StyledFieldsetHelper = styled(Fieldset.HelperText, {}, { baseComponent: true });\n\nexport interface FieldsetHelperProps extends Omit<Fieldset.HelperTextProps, \"color\">, TextProps, StyledProps {}\n\nexport const FieldsetHelper = forwardRef<HTMLSpanElement, FieldsetHelperProps>(\n  ({ textStyle = \"label.small\", fontWeight, color, srOnly, css: cssProp, ...props }, ref) => {\n    return (\n      <StyledFieldsetHelper css={css.raw({ textStyle, fontWeight, color, srOnly }, cssProp)} {...props} ref={ref} />\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;AAeA,MAAM,qBAAA,GAAA,wBAAA,QAA2BA,cAAAA,MAAM,YAAY,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAI/E,MAAa,eAAA,GAAA,MAAA,aACV,EAAE,YAAY,eAAe,YAAY,OAAO,QAAQ,KAAK,SAAS,GAAG,SAAS,QAAQ;AACzF,QAAO,iBAAA,GAAA,kBAAA,KAAC,mBAAD;EAAmB,KAAKC,wBAAAA,IAAI,IAAI;GAAE;GAAW;GAAY;GAAO;GAAQ,EAAE,QAAQ;EAAE,GAAI;EAAY;EAAO,CAAA;EAErH;AAED,MAAM,wBAAA,GAAA,wBAAA,QAA8BC,cAAAA,SAAS,YAAY,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAIrF,MAAa,kBAAA,GAAA,MAAA,aACV,EAAE,YAAY,eAAe,YAAY,OAAO,QAAQ,KAAK,SAAS,GAAG,SAAS,QAAQ;AACzF,QACE,iBAAA,GAAA,kBAAA,KAAC,sBAAD;EAAsB,KAAKD,wBAAAA,IAAI,IAAI;GAAE;GAAW;GAAY;GAAO;GAAQ,EAAE,QAAQ;EAAE,GAAI;EAAY;EAAO,CAAA;EAGnH"}

package/lib/Figure.d.ts

@@ -12,6 +12,9 @@ declare const figureRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<
     size: {
         full: {
             width: "100%";
+            _print: {
+                width: "60%";
+            };
         };
         medium: {
             tablet: {
@@ -20,6 +23,9 @@ declare const figureRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<
             desktop: {
                 width: "65%";
             };
+            _print: {
+                width: "65%";
+            };
         };
         small: {
             tablet: {
@@ -28,6 +34,9 @@ declare const figureRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<
             desktop: {
                 width: "50%";
             };
+            _print: {
+                width: "50%";
+            };
         };
         xsmall: {
             tablet: {
@@ -36,6 +45,9 @@ declare const figureRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<
             desktop: {
                 width: "35%";
             };
+            _print: {
+                width: "35%";
+            };
         };
     };
     float: {
@@ -44,12 +56,20 @@ declare const figureRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<
                 float: "left";
                 clear: "left";
             };
+            _print: {
+                float: "left";
+                clear: "left";
+            };
         };
         right: {
             tablet: {
                 float: "right";
                 clear: "right";
             };
+            _print: {
+                float: "right";
+                clear: "right";
+            };
         };
     };
 }>;

package/lib/Figure.js

@@ -3,7 +3,6 @@ let _ndla_styled_system_css = require("@ndla/styled-system/css");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
-
 //#region src/Figure.tsx
 /**
 * Copyright (c) 2024-present, NDLA.
@@ -25,29 +24,47 @@ const figureRecipe = (0, _ndla_styled_system_css.cva)({
 	},
 	variants: {
 		size: {
-			full: { width: "100%" },
+			full: {
+				width: "100%",
+				_print: { width: "60%" }
+			},
 			medium: {
 				tablet: { width: "50%" },
-				desktop: { width: "65%" }
+				desktop: { width: "65%" },
+				_print: { width: "65%" }
 			},
 			small: {
 				tablet: { width: "35%" },
-				desktop: { width: "50%" }
+				desktop: { width: "50%" },
+				_print: { width: "50%" }
 			},
 			xsmall: {
 				tablet: { width: "25%" },
-				desktop: { width: "35%" }
+				desktop: { width: "35%" },
+				_print: { width: "35%" }
 			}
 		},
 		float: {
-			left: { tablet: {
-				float: "left",
-				clear: "left"
-			} },
-			right: { tablet: {
-				float: "right",
-				clear: "right"
-			} }
+			left: {
+				tablet: {
+					float: "left",
+					clear: "left"
+				},
+				_print: {
+					float: "left",
+					clear: "left"
+				}
+			},
+			right: {
+				tablet: {
+					float: "right",
+					clear: "right"
+				},
+				_print: {
+					float: "right",
+					clear: "right"
+				}
+			}
 		}
 	},
 	defaultVariants: { size: "full" },
@@ -105,7 +122,7 @@ const Figure = (0, react.forwardRef)(({ size, float, css: cssProp, ...props }, r
 		ref
 	});
 });
-
 //#endregion
 exports.Figure = Figure;
+
 //# sourceMappingURL=Figure.js.map

package/lib/Figure.js.map

@@ -1 +1 @@
-{"version":3,"file":"Figure.js","names":["ark","css"],"sources":["../src/Figure.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { type RecipeVariantProps, css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { RecipeVariant, StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\n\nconst figureRecipe = cva({\n  base: {\n    position: \"relative\",\n    transitionDuration: \"normal\",\n    transitionProperty: \"transform, width, height\",\n    transitionTimingFunction: \"default\",\n    _motionReduce: {\n      transition: \"none\",\n      transitionDuration: \"0s\",\n    },\n  },\n  variants: {\n    size: {\n      full: {\n        width: \"100%\",\n      },\n      medium: {\n        tablet: {\n          width: \"50%\",\n        },\n        desktop: {\n          width: \"65%\",\n        },\n      },\n      small: {\n        tablet: {\n          width: \"35%\",\n        },\n        desktop: {\n          width: \"50%\",\n        },\n      },\n      xsmall: {\n        tablet: {\n          width: \"25%\",\n        },\n        desktop: {\n          width: \"35%\",\n        },\n      },\n    },\n    float: {\n      left: {\n        tablet: {\n          float: \"left\",\n          clear: \"left\",\n        },\n      },\n      right: {\n        tablet: {\n          float: \"right\",\n          clear: \"right\",\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    size: \"full\",\n  },\n  compoundVariants: [\n    {\n      float: [\"left\", \"right\"],\n      css: {\n        zIndex: \"base\",\n        left: \"auto\",\n        marginBlock: \"xsmall\",\n      },\n    },\n    {\n      float: \"left\",\n      size: [\"medium\", \"small\", \"xsmall\"],\n      css: {\n        marginInlineEnd: \"medium\",\n        tabletDown: { marginInlineEnd: \"0\" },\n      },\n    },\n    {\n      float: \"right\",\n      size: [\"medium\", \"small\", \"xsmall\"],\n      css: {\n        marginInlineStart: \"medium\",\n        tabletDown: { marginInlineStart: \"0\" },\n      },\n    },\n    {\n      float: [\"left\", \"right\"],\n      size: [\"full\"],\n      css: {\n        marginInlineStart: \"0\",\n        marginInlineEnd: \"0\",\n      },\n    },\n  ],\n});\n\nexport type FigureVariantProps = NonNullable<RecipeVariantProps<typeof figureRecipe>>;\n\nexport type FigureSize = RecipeVariant<typeof figureRecipe>[\"size\"];\n\nexport type FigureFloat = RecipeVariant<typeof figureRecipe>[\"float\"];\n\nexport interface FigureProps extends HTMLArkProps<\"figure\">, StyledProps, FigureVariantProps {}\n\nconst StyledFigure = styled(ark.figure, {}, { baseComponent: true });\n\nexport const Figure = forwardRef<HTMLElement, FigureProps>(({ size, float, css: cssProp, ...props }, ref) => {\n  return <StyledFigure css={css.raw(figureRecipe.raw({ size, float }), cssProp)} {...props} ref={ref} />;\n});\n"],"mappings":";;;;;;;;;;;;;;AAcA,MAAM,gDAAmB;CACvB,MAAM;EACJ,UAAU;EACV,oBAAoB;EACpB,oBAAoB;EACpB,0BAA0B;EAC1B,eAAe;GACb,YAAY;GACZ,oBAAoB;GACrB;EACF;CACD,UAAU;EACR,MAAM;GACJ,MAAM,EACJ,OAAO,QACR;GACD,QAAQ;IACN,QAAQ,EACN,OAAO,OACR;IACD,SAAS,EACP,OAAO,OACR;IACF;GACD,OAAO;IACL,QAAQ,EACN,OAAO,OACR;IACD,SAAS,EACP,OAAO,OACR;IACF;GACD,QAAQ;IACN,QAAQ,EACN,OAAO,OACR;IACD,SAAS,EACP,OAAO,OACR;IACF;GACF;EACD,OAAO;GACL,MAAM,EACJ,QAAQ;IACN,OAAO;IACP,OAAO;IACR,EACF;GACD,OAAO,EACL,QAAQ;IACN,OAAO;IACP,OAAO;IACR,EACF;GACF;EACF;CACD,iBAAiB,EACf,MAAM,QACP;CACD,kBAAkB;EAChB;GACE,OAAO,CAAC,QAAQ,QAAQ;GACxB,KAAK;IACH,QAAQ;IACR,MAAM;IACN,aAAa;IACd;GACF;EACD;GACE,OAAO;GACP,MAAM;IAAC;IAAU;IAAS;IAAS;GACnC,KAAK;IACH,iBAAiB;IACjB,YAAY,EAAE,iBAAiB,KAAK;IACrC;GACF;EACD;GACE,OAAO;GACP,MAAM;IAAC;IAAU;IAAS;IAAS;GACnC,KAAK;IACH,mBAAmB;IACnB,YAAY,EAAE,mBAAmB,KAAK;IACvC;GACF;EACD;GACE,OAAO,CAAC,QAAQ,QAAQ;GACxB,MAAM,CAAC,OAAO;GACd,KAAK;IACH,mBAAmB;IACnB,iBAAiB;IAClB;GACF;EACF;CACF,CAAC;AAUF,MAAM,mDAAsBA,kBAAI,QAAQ,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAEpE,MAAa,gCAA+C,EAAE,MAAM,OAAO,KAAK,SAAS,GAAG,SAAS,QAAQ;AAC3G,QAAO,2CAAC;EAAa,KAAKC,4BAAI,IAAI,aAAa,IAAI;GAAE;GAAM;GAAO,CAAC,EAAE,QAAQ;EAAE,GAAI;EAAY;GAAO;EACtG"}
+{"version":3,"file":"Figure.js","names":["ark","css"],"sources":["../src/Figure.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { type RecipeVariantProps, css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { RecipeVariant, StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\n\nconst figureRecipe = cva({\n  base: {\n    position: \"relative\",\n    transitionDuration: \"normal\",\n    transitionProperty: \"transform, width, height\",\n    transitionTimingFunction: \"default\",\n    _motionReduce: {\n      transition: \"none\",\n      transitionDuration: \"0s\",\n    },\n  },\n  variants: {\n    size: {\n      full: {\n        width: \"100%\",\n        _print: {\n          width: \"60%\",\n        },\n      },\n      medium: {\n        tablet: {\n          width: \"50%\",\n        },\n        desktop: {\n          width: \"65%\",\n        },\n        _print: {\n          width: \"65%\",\n        },\n      },\n      small: {\n        tablet: {\n          width: \"35%\",\n        },\n        desktop: {\n          width: \"50%\",\n        },\n        _print: {\n          width: \"50%\",\n        },\n      },\n      xsmall: {\n        tablet: {\n          width: \"25%\",\n        },\n        desktop: {\n          width: \"35%\",\n        },\n        _print: {\n          width: \"35%\",\n        },\n      },\n    },\n    float: {\n      left: {\n        tablet: {\n          float: \"left\",\n          clear: \"left\",\n        },\n        _print: {\n          float: \"left\",\n          clear: \"left\",\n        },\n      },\n      right: {\n        tablet: {\n          float: \"right\",\n          clear: \"right\",\n        },\n        _print: {\n          float: \"right\",\n          clear: \"right\",\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    size: \"full\",\n  },\n  compoundVariants: [\n    {\n      float: [\"left\", \"right\"],\n      css: {\n        zIndex: \"base\",\n        left: \"auto\",\n        marginBlock: \"xsmall\",\n      },\n    },\n    {\n      float: \"left\",\n      size: [\"medium\", \"small\", \"xsmall\"],\n      css: {\n        marginInlineEnd: \"medium\",\n        tabletDown: { marginInlineEnd: \"0\" },\n      },\n    },\n    {\n      float: \"right\",\n      size: [\"medium\", \"small\", \"xsmall\"],\n      css: {\n        marginInlineStart: \"medium\",\n        tabletDown: { marginInlineStart: \"0\" },\n      },\n    },\n    {\n      float: [\"left\", \"right\"],\n      size: [\"full\"],\n      css: {\n        marginInlineStart: \"0\",\n        marginInlineEnd: \"0\",\n      },\n    },\n  ],\n});\n\nexport type FigureVariantProps = NonNullable<RecipeVariantProps<typeof figureRecipe>>;\n\nexport type FigureSize = RecipeVariant<typeof figureRecipe>[\"size\"];\n\nexport type FigureFloat = RecipeVariant<typeof figureRecipe>[\"float\"];\n\nexport interface FigureProps extends HTMLArkProps<\"figure\">, StyledProps, FigureVariantProps {}\n\nconst StyledFigure = styled(ark.figure, {}, { baseComponent: true });\n\nexport const Figure = forwardRef<HTMLElement, FigureProps>(({ size, float, css: cssProp, ...props }, ref) => {\n  return <StyledFigure css={css.raw(figureRecipe.raw({ size, float }), cssProp)} {...props} ref={ref} />;\n});\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,gBAAA,GAAA,wBAAA,KAAmB;CACvB,MAAM;EACJ,UAAU;EACV,oBAAoB;EACpB,oBAAoB;EACpB,0BAA0B;EAC1B,eAAe;GACb,YAAY;GACZ,oBAAoB;GACrB;EACF;CACD,UAAU;EACR,MAAM;GACJ,MAAM;IACJ,OAAO;IACP,QAAQ,EACN,OAAO,OACR;IACF;GACD,QAAQ;IACN,QAAQ,EACN,OAAO,OACR;IACD,SAAS,EACP,OAAO,OACR;IACD,QAAQ,EACN,OAAO,OACR;IACF;GACD,OAAO;IACL,QAAQ,EACN,OAAO,OACR;IACD,SAAS,EACP,OAAO,OACR;IACD,QAAQ,EACN,OAAO,OACR;IACF;GACD,QAAQ;IACN,QAAQ,EACN,OAAO,OACR;IACD,SAAS,EACP,OAAO,OACR;IACD,QAAQ,EACN,OAAO,OACR;IACF;GACF;EACD,OAAO;GACL,MAAM;IACJ,QAAQ;KACN,OAAO;KACP,OAAO;KACR;IACD,QAAQ;KACN,OAAO;KACP,OAAO;KACR;IACF;GACD,OAAO;IACL,QAAQ;KACN,OAAO;KACP,OAAO;KACR;IACD,QAAQ;KACN,OAAO;KACP,OAAO;KACR;IACF;GACF;EACF;CACD,iBAAiB,EACf,MAAM,QACP;CACD,kBAAkB;EAChB;GACE,OAAO,CAAC,QAAQ,QAAQ;GACxB,KAAK;IACH,QAAQ;IACR,MAAM;IACN,aAAa;IACd;GACF;EACD;GACE,OAAO;GACP,MAAM;IAAC;IAAU;IAAS;IAAS;GACnC,KAAK;IACH,iBAAiB;IACjB,YAAY,EAAE,iBAAiB,KAAK;IACrC;GACF;EACD;GACE,OAAO;GACP,MAAM;IAAC;IAAU;IAAS;IAAS;GACnC,KAAK;IACH,mBAAmB;IACnB,YAAY,EAAE,mBAAmB,KAAK;IACvC;GACF;EACD;GACE,OAAO,CAAC,QAAQ,QAAQ;GACxB,MAAM,CAAC,OAAO;GACd,KAAK;IACH,mBAAmB;IACnB,iBAAiB;IAClB;GACF;EACF;CACF,CAAC;AAUF,MAAM,gBAAA,GAAA,wBAAA,QAAsBA,cAAAA,IAAI,QAAQ,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAEpE,MAAa,UAAA,GAAA,MAAA,aAA+C,EAAE,MAAM,OAAO,KAAK,SAAS,GAAG,SAAS,QAAQ;AAC3G,QAAO,iBAAA,GAAA,kBAAA,KAAC,cAAD;EAAc,KAAKC,wBAAAA,IAAI,IAAI,aAAa,IAAI;GAAE;GAAM;GAAO,CAAC,EAAE,QAAQ;EAAE,GAAI;EAAY;EAAO,CAAA;EACtG"}

package/lib/FileUpload.js

@@ -1,11 +1,10 @@
-const require_Text = require('./Text.js');
-const require_Label = require('./Label.js');
+const require_Text = require("./Text.js");
+const require_Label = require("./Label.js");
 let _ark_ui_react = require("@ark-ui/react");
 let _ndla_styled_system_css = require("@ndla/styled-system/css");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
-
 //#region src/FileUpload.tsx
 /**
 * Copyright (c) 2024-present, NDLA.
@@ -128,7 +127,6 @@ const FileUploadLabel = (0, react.forwardRef)(({ textStyle = "label.medium", fon
 		children
 	})
 }));
-
 //#endregion
 exports.FileUploadContext = FileUploadContext;
 exports.FileUploadDropzone = FileUploadDropzone;
@@ -143,4 +141,5 @@ exports.FileUploadItemSizeText = FileUploadItemSizeText;
 exports.FileUploadLabel = FileUploadLabel;
 exports.FileUploadRoot = FileUploadRoot;
 exports.FileUploadTrigger = FileUploadTrigger;
+
 //# sourceMappingURL=FileUpload.js.map

package/lib/FileUpload.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileUpload.js","names":["fileUploadAnatomy","FileUpload","Text","Label"],"sources":["../src/FileUpload.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 { FileUpload, fileUploadAnatomy } from \"@ark-ui/react\";\nimport { type RecipeVariantProps, sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef, type RefAttributes } from \"react\";\nimport { Label } from \"./Label\";\nimport { type TextProps, Text } from \"./Text\";\n\nconst fileUploadRecipe = sva({\n  slots: fileUploadAnatomy.keys(),\n  base: {\n    root: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      minHeight: \"100%\",\n    },\n    dropzone: {\n      display: \"flex\",\n      gap: \"small\",\n      flexDirection: \"column\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n      padding: \"4xlarge\",\n      borderRadius: \"xsmall\",\n      border: \"1px solid\",\n      borderColor: \"stroke.subtle\",\n      transitionProperty: \"border, border-color\",\n      transitionTimingFunction: \"default\",\n      transitionDuration: \"normal\",\n      _hover: {\n        borderStyle: \"dashed\",\n        borderColor: \"stroke.hover\",\n        _disabled: {\n          borderStyle: \"solid\",\n          borderColor: \"stroke.subtle\",\n        },\n      },\n    },\n    itemGroup: {\n      paddingBlockStart: \"medium\",\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"xsmall\",\n    },\n    item: {\n      width: \"100%\",\n      display: \"grid\",\n      gridTemplateAreas: `\n      \"preview name delete\" \n      \"preview size delete\"`,\n      gridTemplateColumns: \"auto 1fr auto\",\n      gridColumnGap: \"small\",\n      border: \"1px solid\",\n      borderColor: \"stroke.subtle\",\n      borderRadius: \"xsmall\",\n      padding: \"xsmall\",\n    },\n    itemPreview: {\n      display: \"flex\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n      width: \"xxlarge\",\n      height: \"xxlarge\",\n      gridArea: \"preview\",\n    },\n    itemName: {\n      gridArea: \"name\",\n      whiteSpace: \"nowrap\",\n      overflow: \"hidden\",\n      textOverflow: \"ellipsis\",\n    },\n    itemSizeText: {\n      gridArea: \"size\",\n    },\n    itemDeleteTrigger: {\n      gridArea: \"delete\",\n      alignSelf: \"center\",\n    },\n    itemPreviewImage: {\n      borderRadius: \"xsmall\",\n      objectFit: \"cover\",\n      width: \"100%\",\n      height: \"100%\",\n    },\n  },\n});\n\nconst { withProvider, withContext } = createStyleContext(fileUploadRecipe);\n\nexport type FileUploadVariantProps = NonNullable<RecipeVariantProps<typeof fileUploadRecipe>>;\n\nexport interface FileUploadRootProps extends FileUpload.RootProps, FileUploadVariantProps {}\n\nexport const FileUploadHiddenInput = FileUpload.HiddenInput;\nexport const FileUploadContext = FileUpload.Context;\n\nexport const FileUploadRoot = withProvider(FileUpload.Root, \"root\", { baseComponent: true });\n\nexport const FileUploadDropzone = withContext(FileUpload.Dropzone, \"dropzone\", { baseComponent: true });\n\nexport const FileUploadTrigger = withContext(FileUpload.Trigger, \"trigger\", { baseComponent: true });\n\nexport const FileUploadItemGroup = withContext(FileUpload.ItemGroup, \"itemGroup\", { baseComponent: true });\n\nexport const FileUploadItemPreview = withContext(FileUpload.ItemPreview, \"itemPreview\", { baseComponent: true });\n\nexport const FileUploadItem = withContext(FileUpload.Item, \"item\", { baseComponent: true });\n\nexport const FileUploadItemDeleteTrigger = withContext(FileUpload.ItemDeleteTrigger, \"itemDeleteTrigger\", {\n  baseComponent: true,\n});\n\nexport const FileUploadItemPreviewImage = withContext(FileUpload.ItemPreviewImage, \"itemPreviewImage\", {\n  baseComponent: true,\n});\n\nconst InternalFileUploadItemName = withContext(FileUpload.ItemName, \"itemName\", { baseComponent: true });\n\ninterface FileUploadItemNameProps\n  extends Omit<FileUpload.ItemNameProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLParagraphElement> {}\n\nexport const FileUploadItemName = forwardRef<HTMLDivElement, FileUploadItemNameProps>(\n  ({ textStyle = \"label.medium\", fontWeight = \"bold\", ...props }, ref) => (\n    <Text textStyle={textStyle} fontWeight={fontWeight} asChild {...props} ref={ref}>\n      {/* Do not use children here whatsoever. The component falls back to the file name only if no children are passed in. It should be up to the consumer if they want to pass in children. */}\n      <InternalFileUploadItemName />\n    </Text>\n  ),\n);\n\nconst InternalFileUploadItemSizeText = withContext(FileUpload.ItemSizeText, \"itemSizeText\", { baseComponent: true });\n\ninterface FileUploadItemSizeTextProps\n  extends Omit<FileUpload.ItemSizeTextProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLParagraphElement> {}\n\nexport const FileUploadItemSizeText = forwardRef<HTMLDivElement, FileUploadItemSizeTextProps>(\n  ({ textStyle = \"label.small\", ...props }, ref) => (\n    <Text textStyle={textStyle} ref={ref} asChild {...props}>\n      <InternalFileUploadItemSizeText />\n    </Text>\n  ),\n);\n\nconst InternalFileUploadLabel = withContext(FileUpload.Label, \"label\");\n\ninterface FileUploadLabelProps\n  extends Omit<FileUpload.LabelProps, \"color\">, StyledProps, TextProps, RefAttributes<HTMLLabelElement> {}\n\nexport const FileUploadLabel = forwardRef<HTMLLabelElement, FileUploadLabelProps>(\n  ({ textStyle = \"label.medium\", fontWeight = \"light\", children, ...props }, ref) => (\n    <InternalFileUploadLabel ref={ref} asChild>\n      <Label textStyle={textStyle} fontWeight={fontWeight} {...props}>\n        {children}\n      </Label>\n    </InternalFileUploadLabel>\n  ),\n);\n"],"mappings":";;;;;;;;;;;;;;;;AA+FA,MAAM,EAAE,cAAc,iGA/EO;CAC3B,OAAOA,gCAAkB,MAAM;CAC/B,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,WAAW;GACZ;EACD,UAAU;GACR,SAAS;GACT,KAAK;GACL,eAAe;GACf,YAAY;GACZ,gBAAgB;GAChB,SAAS;GACT,cAAc;GACd,QAAQ;GACR,aAAa;GACb,oBAAoB;GACpB,0BAA0B;GAC1B,oBAAoB;GACpB,QAAQ;IACN,aAAa;IACb,aAAa;IACb,WAAW;KACT,aAAa;KACb,aAAa;KACd;IACF;GACF;EACD,WAAW;GACT,mBAAmB;GACnB,SAAS;GACT,eAAe;GACf,KAAK;GACN;EACD,MAAM;GACJ,OAAO;GACP,SAAS;GACT,mBAAmB;;;GAGnB,qBAAqB;GACrB,eAAe;GACf,QAAQ;GACR,aAAa;GACb,cAAc;GACd,SAAS;GACV;EACD,aAAa;GACX,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,OAAO;GACP,QAAQ;GACR,UAAU;GACX;EACD,UAAU;GACR,UAAU;GACV,YAAY;GACZ,UAAU;GACV,cAAc;GACf;EACD,cAAc,EACZ,UAAU,QACX;EACD,mBAAmB;GACjB,UAAU;GACV,WAAW;GACZ;EACD,kBAAkB;GAChB,cAAc;GACd,WAAW;GACX,OAAO;GACP,QAAQ;GACT;EACF;CACF,CAAC,CAEwE;AAM1E,MAAa,wBAAwBC,yBAAW;AAChD,MAAa,oBAAoBA,yBAAW;AAE5C,MAAa,iBAAiB,aAAaA,yBAAW,MAAM,QAAQ,EAAE,eAAe,MAAM,CAAC;AAE5F,MAAa,qBAAqB,YAAYA,yBAAW,UAAU,YAAY,EAAE,eAAe,MAAM,CAAC;AAEvG,MAAa,oBAAoB,YAAYA,yBAAW,SAAS,WAAW,EAAE,eAAe,MAAM,CAAC;AAEpG,MAAa,sBAAsB,YAAYA,yBAAW,WAAW,aAAa,EAAE,eAAe,MAAM,CAAC;AAE1G,MAAa,wBAAwB,YAAYA,yBAAW,aAAa,eAAe,EAAE,eAAe,MAAM,CAAC;AAEhH,MAAa,iBAAiB,YAAYA,yBAAW,MAAM,QAAQ,EAAE,eAAe,MAAM,CAAC;AAE3F,MAAa,8BAA8B,YAAYA,yBAAW,mBAAmB,qBAAqB,EACxG,eAAe,MAChB,CAAC;AAEF,MAAa,6BAA6B,YAAYA,yBAAW,kBAAkB,oBAAoB,EACrG,eAAe,MAChB,CAAC;AAEF,MAAM,6BAA6B,YAAYA,yBAAW,UAAU,YAAY,EAAE,eAAe,MAAM,CAAC;AAKxG,MAAa,4CACV,EAAE,YAAY,gBAAgB,aAAa,QAAQ,GAAG,SAAS,QAC9D,2CAACC;CAAgB;CAAuB;CAAY;CAAQ,GAAI;CAAY;WAE1E,2CAAC,+BAA6B;EACzB,CAEV;AAED,MAAM,iCAAiC,YAAYD,yBAAW,cAAc,gBAAgB,EAAE,eAAe,MAAM,CAAC;AAKpH,MAAa,gDACV,EAAE,YAAY,eAAe,GAAG,SAAS,QACxC,2CAACC;CAAgB;CAAgB;CAAK;CAAQ,GAAI;WAChD,2CAAC,mCAAiC;EAC7B,CAEV;AAED,MAAM,0BAA0B,YAAYD,yBAAW,OAAO,QAAQ;AAKtE,MAAa,yCACV,EAAE,YAAY,gBAAgB,aAAa,SAAS,UAAU,GAAG,SAAS,QACzE,2CAAC;CAA6B;CAAK;WACjC,2CAACE;EAAiB;EAAuB;EAAY,GAAI;EACtD;GACK;EACgB,CAE7B"}
+{"version":3,"file":"FileUpload.js","names":["fileUploadAnatomy","FileUpload","Text","Label"],"sources":["../src/FileUpload.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 { FileUpload, fileUploadAnatomy } from \"@ark-ui/react\";\nimport { type RecipeVariantProps, sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef, type RefAttributes } from \"react\";\nimport { Label } from \"./Label\";\nimport { type TextProps, Text } from \"./Text\";\n\nconst fileUploadRecipe = sva({\n  slots: fileUploadAnatomy.keys(),\n  base: {\n    root: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      minHeight: \"100%\",\n    },\n    dropzone: {\n      display: \"flex\",\n      gap: \"small\",\n      flexDirection: \"column\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n      padding: \"4xlarge\",\n      borderRadius: \"xsmall\",\n      border: \"1px solid\",\n      borderColor: \"stroke.subtle\",\n      transitionProperty: \"border, border-color\",\n      transitionTimingFunction: \"default\",\n      transitionDuration: \"normal\",\n      _hover: {\n        borderStyle: \"dashed\",\n        borderColor: \"stroke.hover\",\n        _disabled: {\n          borderStyle: \"solid\",\n          borderColor: \"stroke.subtle\",\n        },\n      },\n    },\n    itemGroup: {\n      paddingBlockStart: \"medium\",\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"xsmall\",\n    },\n    item: {\n      width: \"100%\",\n      display: \"grid\",\n      gridTemplateAreas: `\n      \"preview name delete\" \n      \"preview size delete\"`,\n      gridTemplateColumns: \"auto 1fr auto\",\n      gridColumnGap: \"small\",\n      border: \"1px solid\",\n      borderColor: \"stroke.subtle\",\n      borderRadius: \"xsmall\",\n      padding: \"xsmall\",\n    },\n    itemPreview: {\n      display: \"flex\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n      width: \"xxlarge\",\n      height: \"xxlarge\",\n      gridArea: \"preview\",\n    },\n    itemName: {\n      gridArea: \"name\",\n      whiteSpace: \"nowrap\",\n      overflow: \"hidden\",\n      textOverflow: \"ellipsis\",\n    },\n    itemSizeText: {\n      gridArea: \"size\",\n    },\n    itemDeleteTrigger: {\n      gridArea: \"delete\",\n      alignSelf: \"center\",\n    },\n    itemPreviewImage: {\n      borderRadius: \"xsmall\",\n      objectFit: \"cover\",\n      width: \"100%\",\n      height: \"100%\",\n    },\n  },\n});\n\nconst { withProvider, withContext } = createStyleContext(fileUploadRecipe);\n\nexport type FileUploadVariantProps = NonNullable<RecipeVariantProps<typeof fileUploadRecipe>>;\n\nexport interface FileUploadRootProps extends FileUpload.RootProps, FileUploadVariantProps {}\n\nexport const FileUploadHiddenInput = FileUpload.HiddenInput;\nexport const FileUploadContext = FileUpload.Context;\n\nexport const FileUploadRoot = withProvider(FileUpload.Root, \"root\", { baseComponent: true });\n\nexport const FileUploadDropzone = withContext(FileUpload.Dropzone, \"dropzone\", { baseComponent: true });\n\nexport const FileUploadTrigger = withContext(FileUpload.Trigger, \"trigger\", { baseComponent: true });\n\nexport const FileUploadItemGroup = withContext(FileUpload.ItemGroup, \"itemGroup\", { baseComponent: true });\n\nexport const FileUploadItemPreview = withContext(FileUpload.ItemPreview, \"itemPreview\", { baseComponent: true });\n\nexport const FileUploadItem = withContext(FileUpload.Item, \"item\", { baseComponent: true });\n\nexport const FileUploadItemDeleteTrigger = withContext(FileUpload.ItemDeleteTrigger, \"itemDeleteTrigger\", {\n  baseComponent: true,\n});\n\nexport const FileUploadItemPreviewImage = withContext(FileUpload.ItemPreviewImage, \"itemPreviewImage\", {\n  baseComponent: true,\n});\n\nconst InternalFileUploadItemName = withContext(FileUpload.ItemName, \"itemName\", { baseComponent: true });\n\ninterface FileUploadItemNameProps\n  extends Omit<FileUpload.ItemNameProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLParagraphElement> {}\n\nexport const FileUploadItemName = forwardRef<HTMLDivElement, FileUploadItemNameProps>(\n  ({ textStyle = \"label.medium\", fontWeight = \"bold\", ...props }, ref) => (\n    <Text textStyle={textStyle} fontWeight={fontWeight} asChild {...props} ref={ref}>\n      {/* Do not use children here whatsoever. The component falls back to the file name only if no children are passed in. It should be up to the consumer if they want to pass in children. */}\n      <InternalFileUploadItemName />\n    </Text>\n  ),\n);\n\nconst InternalFileUploadItemSizeText = withContext(FileUpload.ItemSizeText, \"itemSizeText\", { baseComponent: true });\n\ninterface FileUploadItemSizeTextProps\n  extends Omit<FileUpload.ItemSizeTextProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLParagraphElement> {}\n\nexport const FileUploadItemSizeText = forwardRef<HTMLDivElement, FileUploadItemSizeTextProps>(\n  ({ textStyle = \"label.small\", ...props }, ref) => (\n    <Text textStyle={textStyle} ref={ref} asChild {...props}>\n      <InternalFileUploadItemSizeText />\n    </Text>\n  ),\n);\n\nconst InternalFileUploadLabel = withContext(FileUpload.Label, \"label\");\n\ninterface FileUploadLabelProps\n  extends Omit<FileUpload.LabelProps, \"color\">, StyledProps, TextProps, RefAttributes<HTMLLabelElement> {}\n\nexport const FileUploadLabel = forwardRef<HTMLLabelElement, FileUploadLabelProps>(\n  ({ textStyle = \"label.medium\", fontWeight = \"light\", children, ...props }, ref) => (\n    <InternalFileUploadLabel ref={ref} asChild>\n      <Label textStyle={textStyle} fontWeight={fontWeight} {...props}>\n        {children}\n      </Label>\n    </InternalFileUploadLabel>\n  ),\n);\n"],"mappings":"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"}

package/lib/FramedContent.js

@@ -3,7 +3,6 @@ let _ndla_styled_system_css = require("@ndla/styled-system/css");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
-
 //#region src/FramedContent.tsx
 /**
 * Copyright (c) 2024-present, NDLA.
@@ -43,7 +42,7 @@ const FramedContent = (0, react.forwardRef)(({ colorTheme, css: cssProp, ...prop
 	...props,
 	ref
 }));
-
 //#endregion
 exports.FramedContent = FramedContent;
+
 //# sourceMappingURL=FramedContent.js.map

package/lib/FramedContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"FramedContent.js","names":["ark","css"],"sources":["../src/FramedContent.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps, RecipeVariantProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\n\nconst framedContentRecipe = cva({\n  base: {\n    padding: \"medium\",\n    border: \"1px solid\",\n    borderRadius: \"small\",\n    clear: \"both\",\n    overflow: \"hidden\",\n  },\n  variants: {\n    colorTheme: {\n      neutral: {\n        backgroundColor: \"surface.default\",\n        borderColor: \"stroke.subtle\",\n      },\n      brand1: {\n        backgroundColor: \"surface.brand.1.subtle\",\n        borderColor: \"surface.brand.1.strong\",\n      },\n      brand2: {\n        backgroundColor: \"surface.brand.2.subtle\",\n        borderColor: \"surface.brand.2.strong\",\n      },\n    },\n  },\n  defaultVariants: {\n    colorTheme: \"neutral\",\n  },\n});\n\nexport type FramedContentVariantProps = NonNullable<RecipeVariantProps<typeof framedContentRecipe>>;\n\nexport interface FramedContentProps extends HTMLArkProps<\"div\">, StyledProps, FramedContentVariantProps {}\n\nconst StyledFramedContent = styled(ark.div, {}, { baseComponent: true });\n\nexport const FramedContent = forwardRef<HTMLDivElement, FramedContentProps>(\n  ({ colorTheme, css: cssProp, ...props }, ref) => (\n    <StyledFramedContent\n      data-embed-type=\"framed-content\"\n      css={css.raw(framedContentRecipe.raw({ colorTheme }), cssProp)}\n      {...props}\n      ref={ref}\n    />\n  ),\n);\n"],"mappings":";;;;;;;;;;;;;;AAcA,MAAM,uDAA0B;CAC9B,MAAM;EACJ,SAAS;EACT,QAAQ;EACR,cAAc;EACd,OAAO;EACP,UAAU;EACX;CACD,UAAU,EACR,YAAY;EACV,SAAS;GACP,iBAAiB;GACjB,aAAa;GACd;EACD,QAAQ;GACN,iBAAiB;GACjB,aAAa;GACd;EACD,QAAQ;GACN,iBAAiB;GACjB,aAAa;GACd;EACF,EACF;CACD,iBAAiB,EACf,YAAY,WACb;CACF,CAAC;AAMF,MAAM,0DAA6BA,kBAAI,KAAK,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAExE,MAAa,uCACV,EAAE,YAAY,KAAK,SAAS,GAAG,SAAS,QACvC,2CAAC;CACC,mBAAgB;CAChB,KAAKC,4BAAI,IAAI,oBAAoB,IAAI,EAAE,YAAY,CAAC,EAAE,QAAQ;CAC9D,GAAI;CACC;EACL,CAEL"}
+{"version":3,"file":"FramedContent.js","names":["ark","css"],"sources":["../src/FramedContent.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps, RecipeVariantProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\n\nconst framedContentRecipe = cva({\n  base: {\n    padding: \"medium\",\n    border: \"1px solid\",\n    borderRadius: \"small\",\n    clear: \"both\",\n    overflow: \"hidden\",\n  },\n  variants: {\n    colorTheme: {\n      neutral: {\n        backgroundColor: \"surface.default\",\n        borderColor: \"stroke.subtle\",\n      },\n      brand1: {\n        backgroundColor: \"surface.brand.1.subtle\",\n        borderColor: \"surface.brand.1.strong\",\n      },\n      brand2: {\n        backgroundColor: \"surface.brand.2.subtle\",\n        borderColor: \"surface.brand.2.strong\",\n      },\n    },\n  },\n  defaultVariants: {\n    colorTheme: \"neutral\",\n  },\n});\n\nexport type FramedContentVariantProps = NonNullable<RecipeVariantProps<typeof framedContentRecipe>>;\n\nexport interface FramedContentProps extends HTMLArkProps<\"div\">, StyledProps, FramedContentVariantProps {}\n\nconst StyledFramedContent = styled(ark.div, {}, { baseComponent: true });\n\nexport const FramedContent = forwardRef<HTMLDivElement, FramedContentProps>(\n  ({ colorTheme, css: cssProp, ...props }, ref) => (\n    <StyledFramedContent\n      data-embed-type=\"framed-content\"\n      css={css.raw(framedContentRecipe.raw({ colorTheme }), cssProp)}\n      {...props}\n      ref={ref}\n    />\n  ),\n);\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,uBAAA,GAAA,wBAAA,KAA0B;CAC9B,MAAM;EACJ,SAAS;EACT,QAAQ;EACR,cAAc;EACd,OAAO;EACP,UAAU;EACX;CACD,UAAU,EACR,YAAY;EACV,SAAS;GACP,iBAAiB;GACjB,aAAa;GACd;EACD,QAAQ;GACN,iBAAiB;GACjB,aAAa;GACd;EACD,QAAQ;GACN,iBAAiB;GACjB,aAAa;GACd;EACF,EACF;CACD,iBAAiB,EACf,YAAY,WACb;CACF,CAAC;AAMF,MAAM,uBAAA,GAAA,wBAAA,QAA6BA,cAAAA,IAAI,KAAK,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAExE,MAAa,iBAAA,GAAA,MAAA,aACV,EAAE,YAAY,KAAK,SAAS,GAAG,SAAS,QACvC,iBAAA,GAAA,kBAAA,KAAC,qBAAD;CACE,mBAAgB;CAChB,KAAKC,wBAAAA,IAAI,IAAI,oBAAoB,IAAI,EAAE,YAAY,CAAC,EAAE,QAAQ;CAC9D,GAAI;CACC;CACL,CAAA,CAEL"}

package/lib/Hero.js

@@ -1,7 +1,5 @@
 let _ark_ui_react = require("@ark-ui/react");
 let _ndla_styled_system_css = require("@ndla/styled-system/css");
-let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
-
 //#region src/Hero.tsx
 /**
 * Copyright (c) 2024-present, NDLA.
@@ -10,7 +8,7 @@ let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 * LICENSE file in the root directory of this source tree.
 *
 */
-const { withProvider, withContext } = (0, _ndla_styled_system_jsx.createStyleContext)((0, _ndla_styled_system_css.sva)({
+const { withProvider, withContext } = (0, require("@ndla/styled-system/jsx").createStyleContext)((0, _ndla_styled_system_css.sva)({
 	slots: [
 		"root",
 		"background",
@@ -67,9 +65,9 @@ const { withProvider, withContext } = (0, _ndla_styled_system_jsx.createStyleCon
 const Hero = withProvider(_ark_ui_react.ark.div, "root", { baseComponent: true });
 const HeroBackground = withContext(_ark_ui_react.ark.div, "background", { baseComponent: true });
 const HeroContent = withContext(_ark_ui_react.ark.div, "content", { baseComponent: true });
-
 //#endregion
 exports.Hero = Hero;
 exports.HeroBackground = HeroBackground;
 exports.HeroContent = HeroContent;
+
 //# sourceMappingURL=Hero.js.map

package/lib/Hero.js.map

@@ -1 +1 @@
-{"version":3,"file":"Hero.js","names":["ark"],"sources":["../src/Hero.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { type RecipeVariantProps, sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\n\nconst heroRecipe = sva({\n  slots: [\"root\", \"background\", \"content\"],\n  base: {\n    root: {\n      width: \"100%\",\n      position: \"relative\",\n    },\n    background: {\n      height: \"350px\",\n      width: \"100%\",\n      zIndex: \"hide\",\n      overflow: \"hidden\",\n      clipPath: \"polygon(0 0, 100% 0, 100% calc(100% - 5vw), 0 100%)\",\n      _print: {\n        background: \"none\",\n      },\n    },\n    content: {\n      display: \"flex\",\n      flexWrap: \"wrap\",\n      alignItems: \"flex-end\",\n      paddingBlock: \"xsmall\",\n      tablet: {\n        paddingBlockStart: \"xxlarge\",\n      },\n    },\n  },\n  defaultVariants: {\n    variant: \"primary\",\n    absolute: true,\n  },\n  variants: {\n    absolute: {\n      true: {\n        background: {\n          position: \"absolute\",\n        },\n      },\n    },\n    variant: {\n      primary: {\n        background: {\n          background: \"primary\",\n        },\n        content: {\n          \"@media not print\": {\n            color: \"text.onAction\",\n          },\n        },\n      },\n      brand2Bold: {\n        background: {\n          background: \"surface.brand.2.bold\",\n        },\n        content: {\n          \"@media not print\": {\n            color: \"text.onAction\",\n          },\n        },\n      },\n      brand2: {\n        background: {\n          background: \"surface.brand.2\",\n        },\n      },\n      brand2Moderate: {\n        background: {\n          background: \"surface.brand.2.moderate\",\n        },\n      },\n      brand1: {\n        background: {\n          background: \"surface.brand.1\",\n        },\n      },\n      brand1Subtle: {\n        background: {\n          background: \"surface.brand.1.subtle\",\n        },\n      },\n      brand1Moderate: {\n        background: {\n          background: \"surface.brand.1.moderate\",\n        },\n      },\n      brand3Moderate: {\n        background: {\n          background: \"surface.brand.3.moderate\",\n        },\n      },\n      brand4Moderate: {\n        background: {\n          background: \"surface.brand.4.moderate\",\n        },\n      },\n      brand5Moderate: {\n        background: {\n          background: \"surface.brand.5.moderate\",\n        },\n      },\n      neutral: {\n        background: {\n          background: \"surface.infoSubtle\",\n        },\n      },\n    },\n  },\n});\n\nconst { withProvider, withContext } = createStyleContext(heroRecipe);\n\nexport type HeroVariantProps = NonNullable<RecipeVariantProps<typeof heroRecipe>>;\n\nexport type HeroVariant = NonNullable<HeroVariantProps>[\"variant\"];\n\nexport interface HeroProps extends HTMLArkProps<\"div\">, StyledProps, HeroVariantProps {}\n\nexport const Hero = withProvider(ark.div, \"root\", { baseComponent: true });\n\nexport interface HeroBackgroundProps extends HTMLArkProps<\"div\">, StyledProps {}\n\nexport const HeroBackground = withContext(ark.div, \"background\", { baseComponent: true });\n\nexport interface HeroContentProps extends HTMLArkProps<\"div\">, StyledProps {}\n\nexport const HeroContent = withContext(ark.div, \"content\", { baseComponent: true });\n"],"mappings":";;;;;;;;;;;;AA0HA,MAAM,EAAE,cAAc,iGA7GC;CACrB,OAAO;EAAC;EAAQ;EAAc;EAAU;CACxC,MAAM;EACJ,MAAM;GACJ,OAAO;GACP,UAAU;GACX;EACD,YAAY;GACV,QAAQ;GACR,OAAO;GACP,QAAQ;GACR,UAAU;GACV,UAAU;GACV,QAAQ,EACN,YAAY,QACb;GACF;EACD,SAAS;GACP,SAAS;GACT,UAAU;GACV,YAAY;GACZ,cAAc;GACd,QAAQ,EACN,mBAAmB,WACpB;GACF;EACF;CACD,iBAAiB;EACf,SAAS;EACT,UAAU;EACX;CACD,UAAU;EACR,UAAU,EACR,MAAM,EACJ,YAAY,EACV,UAAU,YACX,EACF,EACF;EACD,SAAS;GACP,SAAS;IACP,YAAY,EACV,YAAY,WACb;IACD,SAAS,EACP,oBAAoB,EAClB,OAAO,iBACR,EACF;IACF;GACD,YAAY;IACV,YAAY,EACV,YAAY,wBACb;IACD,SAAS,EACP,oBAAoB,EAClB,OAAO,iBACR,EACF;IACF;GACD,QAAQ,EACN,YAAY,EACV,YAAY,mBACb,EACF;GACD,gBAAgB,EACd,YAAY,EACV,YAAY,4BACb,EACF;GACD,QAAQ,EACN,YAAY,EACV,YAAY,mBACb,EACF;GACD,cAAc,EACZ,YAAY,EACV,YAAY,0BACb,EACF;GACD,gBAAgB,EACd,YAAY,EACV,YAAY,4BACb,EACF;GACD,gBAAgB,EACd,YAAY,EACV,YAAY,4BACb,EACF;GACD,gBAAgB,EACd,YAAY,EACV,YAAY,4BACb,EACF;GACD,gBAAgB,EACd,YAAY,EACV,YAAY,4BACb,EACF;GACD,SAAS,EACP,YAAY,EACV,YAAY,sBACb,EACF;GACF;EACF;CACF,CAAC,CAEkE;AAQpE,MAAa,OAAO,aAAaA,kBAAI,KAAK,QAAQ,EAAE,eAAe,MAAM,CAAC;AAI1E,MAAa,iBAAiB,YAAYA,kBAAI,KAAK,cAAc,EAAE,eAAe,MAAM,CAAC;AAIzF,MAAa,cAAc,YAAYA,kBAAI,KAAK,WAAW,EAAE,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Hero.js","names":["ark"],"sources":["../src/Hero.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { type RecipeVariantProps, sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\n\nconst heroRecipe = sva({\n  slots: [\"root\", \"background\", \"content\"],\n  base: {\n    root: {\n      width: \"100%\",\n      position: \"relative\",\n    },\n    background: {\n      height: \"350px\",\n      width: \"100%\",\n      zIndex: \"hide\",\n      overflow: \"hidden\",\n      clipPath: \"polygon(0 0, 100% 0, 100% calc(100% - 5vw), 0 100%)\",\n      _print: {\n        background: \"none\",\n      },\n    },\n    content: {\n      display: \"flex\",\n      flexWrap: \"wrap\",\n      alignItems: \"flex-end\",\n      paddingBlock: \"xsmall\",\n      tablet: {\n        paddingBlockStart: \"xxlarge\",\n      },\n    },\n  },\n  defaultVariants: {\n    variant: \"primary\",\n    absolute: true,\n  },\n  variants: {\n    absolute: {\n      true: {\n        background: {\n          position: \"absolute\",\n        },\n      },\n    },\n    variant: {\n      primary: {\n        background: {\n          background: \"primary\",\n        },\n        content: {\n          \"@media not print\": {\n            color: \"text.onAction\",\n          },\n        },\n      },\n      brand2Bold: {\n        background: {\n          background: \"surface.brand.2.bold\",\n        },\n        content: {\n          \"@media not print\": {\n            color: \"text.onAction\",\n          },\n        },\n      },\n      brand2: {\n        background: {\n          background: \"surface.brand.2\",\n        },\n      },\n      brand2Moderate: {\n        background: {\n          background: \"surface.brand.2.moderate\",\n        },\n      },\n      brand1: {\n        background: {\n          background: \"surface.brand.1\",\n        },\n      },\n      brand1Subtle: {\n        background: {\n          background: \"surface.brand.1.subtle\",\n        },\n      },\n      brand1Moderate: {\n        background: {\n          background: \"surface.brand.1.moderate\",\n        },\n      },\n      brand3Moderate: {\n        background: {\n          background: \"surface.brand.3.moderate\",\n        },\n      },\n      brand4Moderate: {\n        background: {\n          background: \"surface.brand.4.moderate\",\n        },\n      },\n      brand5Moderate: {\n        background: {\n          background: \"surface.brand.5.moderate\",\n        },\n      },\n      neutral: {\n        background: {\n          background: \"surface.infoSubtle\",\n        },\n      },\n    },\n  },\n});\n\nconst { withProvider, withContext } = createStyleContext(heroRecipe);\n\nexport type HeroVariantProps = NonNullable<RecipeVariantProps<typeof heroRecipe>>;\n\nexport type HeroVariant = NonNullable<HeroVariantProps>[\"variant\"];\n\nexport interface HeroProps extends HTMLArkProps<\"div\">, StyledProps, HeroVariantProps {}\n\nexport const Hero = withProvider(ark.div, \"root\", { baseComponent: true });\n\nexport interface HeroBackgroundProps extends HTMLArkProps<\"div\">, StyledProps {}\n\nexport const HeroBackground = withContext(ark.div, \"background\", { baseComponent: true });\n\nexport interface HeroContentProps extends HTMLArkProps<\"div\">, StyledProps {}\n\nexport const HeroContent = withContext(ark.div, \"content\", { baseComponent: true });\n"],"mappings":";;;;;;;;;;AA0HA,MAAM,EAAE,cAAc,iBAAA,sCAAA,qBAAA,GAAA,wBAAA,KA7GC;CACrB,OAAO;EAAC;EAAQ;EAAc;EAAU;CACxC,MAAM;EACJ,MAAM;GACJ,OAAO;GACP,UAAU;GACX;EACD,YAAY;GACV,QAAQ;GACR,OAAO;GACP,QAAQ;GACR,UAAU;GACV,UAAU;GACV,QAAQ,EACN,YAAY,QACb;GACF;EACD,SAAS;GACP,SAAS;GACT,UAAU;GACV,YAAY;GACZ,cAAc;GACd,QAAQ,EACN,mBAAmB,WACpB;GACF;EACF;CACD,iBAAiB;EACf,SAAS;EACT,UAAU;EACX;CACD,UAAU;EACR,UAAU,EACR,MAAM,EACJ,YAAY,EACV,UAAU,YACX,EACF,EACF;EACD,SAAS;GACP,SAAS;IACP,YAAY,EACV,YAAY,WACb;IACD,SAAS,EACP,oBAAoB,EAClB,OAAO,iBACR,EACF;IACF;GACD,YAAY;IACV,YAAY,EACV,YAAY,wBACb;IACD,SAAS,EACP,oBAAoB,EAClB,OAAO,iBACR,EACF;IACF;GACD,QAAQ,EACN,YAAY,EACV,YAAY,mBACb,EACF;GACD,gBAAgB,EACd,YAAY,EACV,YAAY,4BACb,EACF;GACD,QAAQ,EACN,YAAY,EACV,YAAY,mBACb,EACF;GACD,cAAc,EACZ,YAAY,EACV,YAAY,0BACb,EACF;GACD,gBAAgB,EACd,YAAY,EACV,YAAY,4BACb,EACF;GACD,gBAAgB,EACd,YAAY,EACV,YAAY,4BACb,EACF;GACD,gBAAgB,EACd,YAAY,EACV,YAAY,4BACb,EACF;GACD,gBAAgB,EACd,YAAY,EACV,YAAY,4BACb,EACF;GACD,SAAS,EACP,YAAY,EACV,YAAY,sBACb,EACF;GACF;EACF;CACF,CAAC,CAEkE;AAQpE,MAAa,OAAO,aAAaA,cAAAA,IAAI,KAAK,QAAQ,EAAE,eAAe,MAAM,CAAC;AAI1E,MAAa,iBAAiB,YAAYA,cAAAA,IAAI,KAAK,cAAc,EAAE,eAAe,MAAM,CAAC;AAIzF,MAAa,cAAc,YAAYA,cAAAA,IAAI,KAAK,WAAW,EAAE,eAAe,MAAM,CAAC"}

package/lib/Image.js

@@ -2,7 +2,6 @@ let _ark_ui_react = require("@ark-ui/react");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
-
 //#region src/Image.tsx
 /**
 * Copyright (c) 2024-present, NDLA.
@@ -167,11 +166,11 @@ const Image = (0, react.forwardRef)(({ srcSet: srcSetProp, crop, focalPoint, src
 		})
 	] });
 });
-
 //#endregion
 exports.Image = Image;
 exports.Img = Img;
 exports.Picture = Picture;
 exports.getSrcSet = getSrcSet;
 exports.makeSrcQueryString = makeSrcQueryString;
+
 //# sourceMappingURL=Image.js.map

package/lib/Image.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.js","names":["styled","ark"],"sources":["../src/Image.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { ark } from \"@ark-ui/react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps, StyledVariantProps } from \"@ndla/styled-system/types\";\nimport type { ImageVariantDTO, ImageVariantSize } from \"@ndla/types-backend/image-api\";\nimport { type ComponentPropsWithRef, type ReactNode, forwardRef, useEffect, useState } from \"react\";\n\nexport interface ImageCrop {\n  startX: number;\n  startY: number;\n  endX: number;\n  endY: number;\n}\n\nexport interface ImageFocalPoint {\n  x: number;\n  y: number;\n}\n\ninterface SrcQueryStringOptions {\n  width?: number;\n  crop?: ImageCrop;\n  focalPoint?: ImageFocalPoint;\n  imageLanguage?: string;\n}\n\nexport const makeSrcQueryString = ({ width, crop, focalPoint, imageLanguage }: SrcQueryStringOptions) => {\n  const params = [];\n  if (width) {\n    params.push(`width=${width}`);\n  }\n  if (crop) {\n    params.push(`cropStartX=${crop.startX}&cropEndX=${crop.endX}&cropStartY=${crop.startY}&cropEndY=${crop.endY}`);\n  }\n  if (focalPoint) {\n    params.push(`focalX=${focalPoint.x}&focalY=${focalPoint.y}`);\n  }\n  if (imageLanguage) {\n    params.push(`language=${imageLanguage}`);\n  }\n  return params.join(\"&\");\n};\n\ninterface SrcSetOptions {\n  crop?: ImageCrop;\n  focalPoint?: ImageFocalPoint;\n  imageLanguage?: string;\n  src?: string;\n}\n\nexport const VAR_WIDTHS: Record<ImageVariantSize, number> = {\n  icon: 240,\n  xsmall: 480,\n  small: 800,\n  medium: 1080,\n  large: 1440,\n  xlarge: 1920,\n  xxlarge: 2560,\n};\n\nconst IMAGE_WIDTHS = [2720, 2080, 1760, 1440, 1120, 1000, 960, 800, 640, 480, 320, 240, 180];\n\nexport const getVariantSrcSet = (variants: ImageVariantDTO[]) => {\n  return variants\n    .map((variant) => {\n      return `${variant.variantUrl} ${VAR_WIDTHS[variant.size]}w`;\n    })\n    .join(\", \");\n};\n\nexport const getVariantSizes = (variants: ImageVariantDTO[]) => {\n  return variants\n    .map((variant, i) => {\n      if (i === variants.length - 1) {\n        return `${VAR_WIDTHS[variant.size]}px`;\n      }\n      return `(max-width: ${VAR_WIDTHS[variant.size]}px) ${VAR_WIDTHS[variant.size]}px`;\n    })\n    .join(\", \");\n};\n\nexport const getSrcSet = ({ src, crop, focalPoint, imageLanguage }: SrcSetOptions) => {\n  if (!src) return undefined;\n  return IMAGE_WIDTHS.map((width) => {\n    const queryString = makeSrcQueryString({ width, crop, focalPoint, imageLanguage });\n    const query = queryString.length ? `?${queryString}` : \"\";\n    return `${src}${query} ${width}w`;\n  }).join(\", \");\n};\n\nconst FALLBACK_WIDTH = 1024;\n\nconst FALLBACK_SIZES = \"(min-width: 1024px) 1024px, 100vw\";\n\nexport interface PictureProps extends StyledProps, ComponentPropsWithRef<\"picture\"> {\n  src: string;\n  sizes?: string;\n  contentType?: string;\n  srcSet?: string;\n  crop?: ImageCrop;\n  focalPoint?: ImageFocalPoint;\n  imageLanguage?: string;\n}\n\nexport const Picture = forwardRef<HTMLPictureElement, PictureProps>(\n  (\n    {\n      children,\n      srcSet: srcSetProp,\n      crop,\n      focalPoint,\n      src,\n      imageLanguage,\n      contentType,\n      sizes = FALLBACK_SIZES,\n      ...props\n    },\n    ref,\n  ) => {\n    const srcSet = srcSetProp ?? getSrcSet({ src, crop, focalPoint, imageLanguage });\n\n    return (\n      <styled.picture {...props} ref={ref}>\n        {contentType !== \"image/gif\" && <source type={contentType} srcSet={srcSet} sizes={sizes} />}\n        {children}\n      </styled.picture>\n    );\n  },\n);\n\nconst StyledImage = styled(\"img\", {\n  defaultVariants: { variant: \"regular\" },\n  variants: {\n    variant: {\n      regular: {},\n      rounded: {\n        borderRadius: \"xsmall\",\n      },\n    },\n  },\n});\n\nconst StyledFallbackElement = styled(\n  ark.div,\n  {\n    base: {\n      display: \"flex\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n    },\n  },\n  { baseComponent: true },\n);\n\ntype ImageVariantProps = StyledVariantProps<typeof StyledImage>;\n\nexport interface ImgProps extends StyledProps, ComponentPropsWithRef<\"img\">, ImageVariantProps {\n  alt: string;\n  src: string;\n  fallbackWidth?: number;\n  contentType?: string;\n  crop?: ImageCrop;\n  imageLanguage?: string;\n  focalPoint?: ImageFocalPoint;\n}\n\nexport const Img = forwardRef<HTMLImageElement, ImgProps>(\n  ({ fallbackWidth = FALLBACK_WIDTH, crop, focalPoint, imageLanguage, contentType, src, alt, ...props }, ref) => {\n    const queryString = makeSrcQueryString({ width: fallbackWidth, crop, focalPoint, imageLanguage });\n    const srcWithParms = queryString ? `${src}?${queryString}` : src;\n    return <StyledImage alt={alt} src={contentType === \"image/gif\" ? src : srcWithParms} {...props} ref={ref} />;\n  },\n);\n\nexport interface ImageProps extends StyledProps, ComponentPropsWithRef<\"img\">, ImageVariantProps {\n  alt: string;\n  src?: string;\n  sizes?: string;\n  fallbackWidth?: number;\n  contentType?: string;\n  imageLanguage?: string;\n  crop?: ImageCrop;\n  fallbackElement?: ReactNode;\n  focalPoint?: ImageFocalPoint;\n  variants?: ImageVariantDTO[];\n}\n\nexport const Image = forwardRef<HTMLImageElement, ImageProps>(\n  (\n    {\n      srcSet: srcSetProp,\n      crop,\n      focalPoint,\n      src,\n      contentType,\n      imageLanguage,\n      fallbackWidth = FALLBACK_WIDTH,\n      sizes: sizesProp,\n      alt,\n      fallbackElement,\n      variants,\n      ...props\n    },\n    ref,\n  ) => {\n    const [hasError, setHasError] = useState(false);\n\n    useEffect(() => {\n      setHasError(false);\n    }, [src, srcSetProp, sizesProp, variants]);\n\n    if (!src?.length && !variants?.length && fallbackElement) {\n      return (\n        <StyledFallbackElement {...props} ref={ref}>\n          {fallbackElement}\n        </StyledFallbackElement>\n      );\n    }\n\n    const queryString = makeSrcQueryString({ width: fallbackWidth, crop, focalPoint, imageLanguage });\n    const fallbackSrc = src && queryString ? `${src}?${queryString}` : src;\n\n    return (\n      <picture>\n        {!!variants?.length && !crop && !focalPoint && contentType !== \"image/gif\" && (\n          <source\n            type={\"image/webp\"}\n            srcSet={getVariantSrcSet(variants)}\n            sizes={sizesProp ?? getVariantSizes(variants)}\n          />\n        )}\n        {contentType !== \"image/gif\" && (\n          <source\n            type={contentType}\n            srcSet={getSrcSet({ src, crop, focalPoint, imageLanguage })}\n            sizes={sizesProp ?? FALLBACK_SIZES}\n          />\n        )}\n        <StyledImage\n          alt={alt}\n          src={contentType === \"image/gif\" ? src : fallbackSrc}\n          {...props}\n          ref={ref}\n          data-error={hasError ? \"\" : undefined}\n          onError={(e) => {\n            setHasError(true);\n            props.onError?.(e);\n          }}\n          onLoad={(e) => {\n            setHasError(false);\n            props.onLoad?.(e);\n          }}\n        />\n      </picture>\n    );\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"Image.js","names":["styled","ark"],"sources":["../src/Image.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { ark } from \"@ark-ui/react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps, StyledVariantProps } from \"@ndla/styled-system/types\";\nimport type { ImageVariantDTO, ImageVariantSize } from \"@ndla/types-backend/image-api\";\nimport { type ComponentPropsWithRef, type ReactNode, forwardRef, useEffect, useState } from \"react\";\n\nexport interface ImageCrop {\n  startX: number;\n  startY: number;\n  endX: number;\n  endY: number;\n}\n\nexport interface ImageFocalPoint {\n  x: number;\n  y: number;\n}\n\ninterface SrcQueryStringOptions {\n  width?: number;\n  crop?: ImageCrop;\n  focalPoint?: ImageFocalPoint;\n  imageLanguage?: string;\n}\n\nexport const makeSrcQueryString = ({ width, crop, focalPoint, imageLanguage }: SrcQueryStringOptions) => {\n  const params = [];\n  if (width) {\n    params.push(`width=${width}`);\n  }\n  if (crop) {\n    params.push(`cropStartX=${crop.startX}&cropEndX=${crop.endX}&cropStartY=${crop.startY}&cropEndY=${crop.endY}`);\n  }\n  if (focalPoint) {\n    params.push(`focalX=${focalPoint.x}&focalY=${focalPoint.y}`);\n  }\n  if (imageLanguage) {\n    params.push(`language=${imageLanguage}`);\n  }\n  return params.join(\"&\");\n};\n\ninterface SrcSetOptions {\n  crop?: ImageCrop;\n  focalPoint?: ImageFocalPoint;\n  imageLanguage?: string;\n  src?: string;\n}\n\nexport const VAR_WIDTHS: Record<ImageVariantSize, number> = {\n  icon: 240,\n  xsmall: 480,\n  small: 800,\n  medium: 1080,\n  large: 1440,\n  xlarge: 1920,\n  xxlarge: 2560,\n};\n\nconst IMAGE_WIDTHS = [2720, 2080, 1760, 1440, 1120, 1000, 960, 800, 640, 480, 320, 240, 180];\n\nexport const getVariantSrcSet = (variants: ImageVariantDTO[]) => {\n  return variants\n    .map((variant) => {\n      return `${variant.variantUrl} ${VAR_WIDTHS[variant.size]}w`;\n    })\n    .join(\", \");\n};\n\nexport const getVariantSizes = (variants: ImageVariantDTO[]) => {\n  return variants\n    .map((variant, i) => {\n      if (i === variants.length - 1) {\n        return `${VAR_WIDTHS[variant.size]}px`;\n      }\n      return `(max-width: ${VAR_WIDTHS[variant.size]}px) ${VAR_WIDTHS[variant.size]}px`;\n    })\n    .join(\", \");\n};\n\nexport const getSrcSet = ({ src, crop, focalPoint, imageLanguage }: SrcSetOptions) => {\n  if (!src) return undefined;\n  return IMAGE_WIDTHS.map((width) => {\n    const queryString = makeSrcQueryString({ width, crop, focalPoint, imageLanguage });\n    const query = queryString.length ? `?${queryString}` : \"\";\n    return `${src}${query} ${width}w`;\n  }).join(\", \");\n};\n\nconst FALLBACK_WIDTH = 1024;\n\nconst FALLBACK_SIZES = \"(min-width: 1024px) 1024px, 100vw\";\n\nexport interface PictureProps extends StyledProps, ComponentPropsWithRef<\"picture\"> {\n  src: string;\n  sizes?: string;\n  contentType?: string;\n  srcSet?: string;\n  crop?: ImageCrop;\n  focalPoint?: ImageFocalPoint;\n  imageLanguage?: string;\n}\n\nexport const Picture = forwardRef<HTMLPictureElement, PictureProps>(\n  (\n    {\n      children,\n      srcSet: srcSetProp,\n      crop,\n      focalPoint,\n      src,\n      imageLanguage,\n      contentType,\n      sizes = FALLBACK_SIZES,\n      ...props\n    },\n    ref,\n  ) => {\n    const srcSet = srcSetProp ?? getSrcSet({ src, crop, focalPoint, imageLanguage });\n\n    return (\n      <styled.picture {...props} ref={ref}>\n        {contentType !== \"image/gif\" && <source type={contentType} srcSet={srcSet} sizes={sizes} />}\n        {children}\n      </styled.picture>\n    );\n  },\n);\n\nconst StyledImage = styled(\"img\", {\n  defaultVariants: { variant: \"regular\" },\n  variants: {\n    variant: {\n      regular: {},\n      rounded: {\n        borderRadius: \"xsmall\",\n      },\n    },\n  },\n});\n\nconst StyledFallbackElement = styled(\n  ark.div,\n  {\n    base: {\n      display: \"flex\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n    },\n  },\n  { baseComponent: true },\n);\n\ntype ImageVariantProps = StyledVariantProps<typeof StyledImage>;\n\nexport interface ImgProps extends StyledProps, ComponentPropsWithRef<\"img\">, ImageVariantProps {\n  alt: string;\n  src: string;\n  fallbackWidth?: number;\n  contentType?: string;\n  crop?: ImageCrop;\n  imageLanguage?: string;\n  focalPoint?: ImageFocalPoint;\n}\n\nexport const Img = forwardRef<HTMLImageElement, ImgProps>(\n  ({ fallbackWidth = FALLBACK_WIDTH, crop, focalPoint, imageLanguage, contentType, src, alt, ...props }, ref) => {\n    const queryString = makeSrcQueryString({ width: fallbackWidth, crop, focalPoint, imageLanguage });\n    const srcWithParms = queryString ? `${src}?${queryString}` : src;\n    return <StyledImage alt={alt} src={contentType === \"image/gif\" ? src : srcWithParms} {...props} ref={ref} />;\n  },\n);\n\nexport interface ImageProps extends StyledProps, ComponentPropsWithRef<\"img\">, ImageVariantProps {\n  alt: string;\n  src?: string;\n  sizes?: string;\n  fallbackWidth?: number;\n  contentType?: string;\n  imageLanguage?: string;\n  crop?: ImageCrop;\n  fallbackElement?: ReactNode;\n  focalPoint?: ImageFocalPoint;\n  variants?: ImageVariantDTO[];\n}\n\nexport const Image = forwardRef<HTMLImageElement, ImageProps>(\n  (\n    {\n      srcSet: srcSetProp,\n      crop,\n      focalPoint,\n      src,\n      contentType,\n      imageLanguage,\n      fallbackWidth = FALLBACK_WIDTH,\n      sizes: sizesProp,\n      alt,\n      fallbackElement,\n      variants,\n      ...props\n    },\n    ref,\n  ) => {\n    const [hasError, setHasError] = useState(false);\n\n    useEffect(() => {\n      setHasError(false);\n    }, [src, srcSetProp, sizesProp, variants]);\n\n    if (!src?.length && !variants?.length && fallbackElement) {\n      return (\n        <StyledFallbackElement {...props} ref={ref}>\n          {fallbackElement}\n        </StyledFallbackElement>\n      );\n    }\n\n    const queryString = makeSrcQueryString({ width: fallbackWidth, crop, focalPoint, imageLanguage });\n    const fallbackSrc = src && queryString ? `${src}?${queryString}` : src;\n\n    return (\n      <picture>\n        {!!variants?.length && !crop && !focalPoint && contentType !== \"image/gif\" && (\n          <source\n            type={\"image/webp\"}\n            srcSet={getVariantSrcSet(variants)}\n            sizes={sizesProp ?? getVariantSizes(variants)}\n          />\n        )}\n        {contentType !== \"image/gif\" && (\n          <source\n            type={contentType}\n            srcSet={getSrcSet({ src, crop, focalPoint, imageLanguage })}\n            sizes={sizesProp ?? FALLBACK_SIZES}\n          />\n        )}\n        <StyledImage\n          alt={alt}\n          src={contentType === \"image/gif\" ? src : fallbackSrc}\n          {...props}\n          ref={ref}\n          data-error={hasError ? \"\" : undefined}\n          onError={(e) => {\n            setHasError(true);\n            props.onError?.(e);\n          }}\n          onLoad={(e) => {\n            setHasError(false);\n            props.onLoad?.(e);\n          }}\n        />\n      </picture>\n    );\n  },\n);\n"],"mappings":"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"}

package/lib/Input.js

@@ -4,7 +4,6 @@ let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
 let _ndla_util = require("@ndla/util");
-
 //#region src/Input.tsx
 /**
 * Copyright (c) 2024-present, NDLA.
@@ -135,11 +134,11 @@ const FieldTextArea = (0, react.forwardRef)((props, ref) => /* @__PURE__ */ (0,
 	ref,
 	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextArea, {})
 }));
-
 //#endregion
 exports.FieldInput = FieldInput;
 exports.FieldTextArea = FieldTextArea;
 exports.Input = Input;
 exports.InputContainer = InputContainer;
 exports.TextArea = TextArea;
+
 //# sourceMappingURL=Input.js.map

package/lib/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":["css","ark","Field"],"sources":["../src/Input.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 { Field, type HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { RecipeVariantProps, StyledProps } from \"@ndla/styled-system/types\";\nimport { composeRefs } from \"@ndla/util\";\nimport { createContext, forwardRef, useCallback, useContext, useEffect, useRef } from \"react\";\n\ninterface InputContextType {}\n\nconst InputContext = createContext<InputContextType | undefined>(undefined);\n\nconst inputCss = css.raw({\n  boxShadowColor: \"stroke.subtle\",\n  boxShadow: \"inset 0 0 0 1px var(--shadow-color)\",\n  background: \"background.default\",\n  borderRadius: \"xsmall\",\n  _ariaInvalid: {\n    boxShadowColor: \"stroke.error\",\n    _hover: {\n      boxShadowColor: \"stroke.error\",\n    },\n    _focusWithin: {\n      boxShadowColor: \"stroke.error\",\n      _hover: {\n        boxShadowColor: \"stroke.error\",\n      },\n    },\n  },\n  _hover: {\n    boxShadowColor: \"stroke.hover\",\n  },\n  _focusWithin: {\n    boxShadow: \"inset 0 0 0 2px var(--shadow-color)\",\n    boxShadowColor: \"stroke.default\",\n    _hover: {\n      boxShadowColor: \"stroke.default\",\n    },\n  },\n  \"&:disabled, &:has(:disabled)\": {\n    boxShadowColor: \"stroke.subtle\",\n    _hover: {\n      boxShadowColor: \"stroke.subtle\",\n    },\n  },\n});\n\nconst StyledInputContainer = styled(\n  ark.div,\n  {\n    base: {\n      width: \"100%\",\n      display: \"flex\",\n      alignItems: \"center\",\n      \"& svg\": {\n        width: \"medium\",\n        height: \"medium\",\n      },\n      \"&:not(:has(input:first-child,textarea:first-child))\": {\n        paddingInlineStart: \"xsmall\",\n      },\n      \"&:not(:has(input:last-child,textarea:last-child))\": {\n        paddingInlineEnd: \"xsmall\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n\ninterface InputContainerProps extends HTMLArkProps<\"div\">, StyledProps {}\n\nexport const InputContainer = forwardRef<HTMLDivElement, InputContainerProps>(\n  ({ children, css: cssProp, ...rest }, ref) => (\n    <InputContext.Provider value={{}}>\n      <StyledInputContainer css={css.raw(inputCss, cssProp)} {...rest} ref={ref}>\n        {children}\n      </StyledInputContainer>\n    </InputContext.Provider>\n  ),\n);\n\nconst baseInputCss = css.raw({\n  width: \"100%\",\n  color: \"text.default\",\n  outline: \"none\",\n  background: \"none\",\n  border: \"0\",\n  _disabled: {\n    cursor: \"not-allowed\",\n  },\n  // Chrome messes with input styling when autofilling. Having a really long transitions cancels this out.\n  _autofill: {\n    transition: \"background-color 600000s 0s, color 600000s 0s\",\n  },\n  _focus: {\n    appearance: \"none\",\n  },\n  _placeholder: {\n    color: \"text.subtle\",\n  },\n});\n\nconst baseTextAreaCss = css.raw({\n  padding: \"xsmall\",\n  minHeight: \"xxlarge\",\n  height: \"xxlarge\",\n  resize: \"none\",\n  overflowY: \"hidden\",\n});\n\nconst StyledInput = styled(ark.input, {}, { baseComponent: true });\n\nconst inputRecipe = cva({\n  defaultVariants: {\n    componentSize: \"medium\",\n  },\n  variants: {\n    componentSize: {\n      small: {\n        paddingBlock: \"4xsmall\",\n        paddingInline: \"xsmall\",\n      },\n      medium: {\n        minHeight: \"xxlarge\",\n        padding: \"xsmall\",\n      },\n    },\n  },\n});\n\ntype InputVariantProps = NonNullable<RecipeVariantProps<typeof inputRecipe>>;\n\nexport interface InputProps extends HTMLArkProps<\"input\">, StyledProps, InputVariantProps {}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(({ css: cssProp, componentSize, ...props }, ref) => {\n  const context = useContext(InputContext);\n  return (\n    <StyledInput\n      css={css.raw(inputRecipe.raw({ componentSize }), baseInputCss, context ? undefined : inputCss, cssProp)}\n      ref={ref}\n      {...props}\n    />\n  );\n});\n\nexport const FieldInput = forwardRef<HTMLInputElement, InputProps>((props, ref) => (\n  <Field.Input asChild {...props} ref={ref}>\n    <Input />\n  </Field.Input>\n));\n\ninterface TextAreaProps extends HTMLArkProps<\"textarea\">, StyledProps {\n  autoResize?: boolean;\n}\n\nconst StyledTextArea = styled(ark.textarea, {}, { baseComponent: true });\n\nexport const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  ({ css: cssProp, autoResize = true, ...props }, ref) => {\n    const context = useContext(InputContext);\n    const localRef = useRef<HTMLTextAreaElement>(null);\n\n    // Automatically resize a textarea based on its content\n    const resize = useCallback(() => {\n      if (!localRef.current) return;\n      localRef.current.style.height = \"0\";\n      // TODO: Figure out if we need to add the 3 extra pixels, maybe related to scroll?\n      localRef.current.style.height = `${localRef.current.scrollHeight + 3}px`;\n    }, []);\n\n    useEffect(() => {\n      if (!autoResize) return;\n      window.addEventListener(\"input\", resize);\n      window.addEventListener(\"resize\", resize);\n      resize();\n      return () => {\n        window.removeEventListener(\"input\", resize);\n        window.removeEventListener(\"resize\", resize);\n      };\n    }, [resize, autoResize]);\n\n    return (\n      <StyledTextArea\n        css={css.raw(baseInputCss, context ? undefined : inputCss, baseTextAreaCss, cssProp)}\n        ref={composeRefs(ref, localRef)}\n        {...props}\n      />\n    );\n  },\n);\n\nexport const FieldTextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>((props, ref) => (\n  <Field.Textarea asChild {...props} ref={ref}>\n    <TextArea />\n  </Field.Textarea>\n));\n"],"mappings":"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"}
+{"version":3,"file":"Input.js","names":["css","ark","Field"],"sources":["../src/Input.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 { Field, type HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { RecipeVariantProps, StyledProps } from \"@ndla/styled-system/types\";\nimport { composeRefs } from \"@ndla/util\";\nimport { createContext, forwardRef, useCallback, useContext, useEffect, useRef } from \"react\";\n\ninterface InputContextType {}\n\nconst InputContext = createContext<InputContextType | undefined>(undefined);\n\nconst inputCss = css.raw({\n  boxShadowColor: \"stroke.subtle\",\n  boxShadow: \"inset 0 0 0 1px var(--shadow-color)\",\n  background: \"background.default\",\n  borderRadius: \"xsmall\",\n  _ariaInvalid: {\n    boxShadowColor: \"stroke.error\",\n    _hover: {\n      boxShadowColor: \"stroke.error\",\n    },\n    _focusWithin: {\n      boxShadowColor: \"stroke.error\",\n      _hover: {\n        boxShadowColor: \"stroke.error\",\n      },\n    },\n  },\n  _hover: {\n    boxShadowColor: \"stroke.hover\",\n  },\n  _focusWithin: {\n    boxShadow: \"inset 0 0 0 2px var(--shadow-color)\",\n    boxShadowColor: \"stroke.default\",\n    _hover: {\n      boxShadowColor: \"stroke.default\",\n    },\n  },\n  \"&:disabled, &:has(:disabled)\": {\n    boxShadowColor: \"stroke.subtle\",\n    _hover: {\n      boxShadowColor: \"stroke.subtle\",\n    },\n  },\n});\n\nconst StyledInputContainer = styled(\n  ark.div,\n  {\n    base: {\n      width: \"100%\",\n      display: \"flex\",\n      alignItems: \"center\",\n      \"& svg\": {\n        width: \"medium\",\n        height: \"medium\",\n      },\n      \"&:not(:has(input:first-child,textarea:first-child))\": {\n        paddingInlineStart: \"xsmall\",\n      },\n      \"&:not(:has(input:last-child,textarea:last-child))\": {\n        paddingInlineEnd: \"xsmall\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n\ninterface InputContainerProps extends HTMLArkProps<\"div\">, StyledProps {}\n\nexport const InputContainer = forwardRef<HTMLDivElement, InputContainerProps>(\n  ({ children, css: cssProp, ...rest }, ref) => (\n    <InputContext.Provider value={{}}>\n      <StyledInputContainer css={css.raw(inputCss, cssProp)} {...rest} ref={ref}>\n        {children}\n      </StyledInputContainer>\n    </InputContext.Provider>\n  ),\n);\n\nconst baseInputCss = css.raw({\n  width: \"100%\",\n  color: \"text.default\",\n  outline: \"none\",\n  background: \"none\",\n  border: \"0\",\n  _disabled: {\n    cursor: \"not-allowed\",\n  },\n  // Chrome messes with input styling when autofilling. Having a really long transitions cancels this out.\n  _autofill: {\n    transition: \"background-color 600000s 0s, color 600000s 0s\",\n  },\n  _focus: {\n    appearance: \"none\",\n  },\n  _placeholder: {\n    color: \"text.subtle\",\n  },\n});\n\nconst baseTextAreaCss = css.raw({\n  padding: \"xsmall\",\n  minHeight: \"xxlarge\",\n  height: \"xxlarge\",\n  resize: \"none\",\n  overflowY: \"hidden\",\n});\n\nconst StyledInput = styled(ark.input, {}, { baseComponent: true });\n\nconst inputRecipe = cva({\n  defaultVariants: {\n    componentSize: \"medium\",\n  },\n  variants: {\n    componentSize: {\n      small: {\n        paddingBlock: \"4xsmall\",\n        paddingInline: \"xsmall\",\n      },\n      medium: {\n        minHeight: \"xxlarge\",\n        padding: \"xsmall\",\n      },\n    },\n  },\n});\n\ntype InputVariantProps = NonNullable<RecipeVariantProps<typeof inputRecipe>>;\n\nexport interface InputProps extends HTMLArkProps<\"input\">, StyledProps, InputVariantProps {}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(({ css: cssProp, componentSize, ...props }, ref) => {\n  const context = useContext(InputContext);\n  return (\n    <StyledInput\n      css={css.raw(inputRecipe.raw({ componentSize }), baseInputCss, context ? undefined : inputCss, cssProp)}\n      ref={ref}\n      {...props}\n    />\n  );\n});\n\nexport const FieldInput = forwardRef<HTMLInputElement, InputProps>((props, ref) => (\n  <Field.Input asChild {...props} ref={ref}>\n    <Input />\n  </Field.Input>\n));\n\ninterface TextAreaProps extends HTMLArkProps<\"textarea\">, StyledProps {\n  autoResize?: boolean;\n}\n\nconst StyledTextArea = styled(ark.textarea, {}, { baseComponent: true });\n\nexport const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  ({ css: cssProp, autoResize = true, ...props }, ref) => {\n    const context = useContext(InputContext);\n    const localRef = useRef<HTMLTextAreaElement>(null);\n\n    // Automatically resize a textarea based on its content\n    const resize = useCallback(() => {\n      if (!localRef.current) return;\n      localRef.current.style.height = \"0\";\n      // TODO: Figure out if we need to add the 3 extra pixels, maybe related to scroll?\n      localRef.current.style.height = `${localRef.current.scrollHeight + 3}px`;\n    }, []);\n\n    useEffect(() => {\n      if (!autoResize) return;\n      window.addEventListener(\"input\", resize);\n      window.addEventListener(\"resize\", resize);\n      resize();\n      return () => {\n        window.removeEventListener(\"input\", resize);\n        window.removeEventListener(\"resize\", resize);\n      };\n    }, [resize, autoResize]);\n\n    return (\n      <StyledTextArea\n        css={css.raw(baseInputCss, context ? undefined : inputCss, baseTextAreaCss, cssProp)}\n        ref={composeRefs(ref, localRef)}\n        {...props}\n      />\n    );\n  },\n);\n\nexport const FieldTextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>((props, ref) => (\n  <Field.Textarea asChild {...props} ref={ref}>\n    <TextArea />\n  </Field.Textarea>\n));\n"],"mappings":"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"}

package/lib/Label.js

@@ -3,7 +3,6 @@ let _ndla_styled_system_css = require("@ndla/styled-system/css");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
-
 //#region src/Label.tsx
 /**
 * Copyright (c) 2024-present, NDLA.
@@ -53,10 +52,10 @@ const FieldLabel = (0, react.forwardRef)(({ children, ...props }, ref) => /* @__
 	ref,
 	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Label, { children })
 }));
-
 //#endregion
 exports.FieldLabel = FieldLabel;
 exports.FieldsetLegend = FieldsetLegend;
 exports.Label = Label;
 exports.Legend = Legend;
+
 //# sourceMappingURL=Label.js.map

package/lib/Label.js.map

@@ -1 +1 @@
-{"version":3,"file":"Label.js","names":["ark","css","Fieldset","Field"],"sources":["../src/Label.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 { Field, Fieldset, type HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { css } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\nimport { type TextProps } from \"./Text\";\n\nconst StyledLegend = styled(\n  ark.legend,\n  {\n    base: {\n      float: \"left\",\n      width: \"inherit\",\n      _disabled: {\n        color: \"text.subtle\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n\nexport interface LegendProps extends Omit<HTMLArkProps<\"legend\">, \"color\">, StyledProps, TextProps {}\n\nexport const Legend = forwardRef<HTMLLegendElement, LegendProps>(\n  ({ textStyle = \"label.medium\", fontWeight = \"bold\", css: cssProp, srOnly, color, ...rest }, ref) => (\n    <StyledLegend css={css.raw({ textStyle, fontWeight, srOnly, color }, cssProp)} {...rest} ref={ref} />\n  ),\n);\n\nexport interface FieldsetLegendProps extends Omit<Fieldset.LegendProps, \"color\">, TextProps, StyledProps {}\n\nexport const FieldsetLegend = forwardRef<HTMLLegendElement, LegendProps>(({ children, ...props }, ref) => (\n  <Fieldset.Legend asChild {...props} ref={ref}>\n    <Legend>{children}</Legend>\n  </Fieldset.Legend>\n));\n\nconst StyledLabel = styled(\n  ark.label,\n  {\n    base: {\n      display: \"inline-block\",\n      _disabled: {\n        color: \"text.subtle\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n\nexport interface LabelProps extends Omit<HTMLArkProps<\"label\">, \"color\">, TextProps, StyledProps {}\n\nexport const Label = forwardRef<HTMLLabelElement, LabelProps>(\n  ({ textStyle = \"label.medium\", fontWeight = \"bold\", css: cssProp, srOnly, color, ...rest }, ref) => (\n    <StyledLabel css={css.raw({ textStyle, fontWeight, srOnly, color }, cssProp)} {...rest} ref={ref} />\n  ),\n);\n\nexport const FieldLabel = forwardRef<HTMLLabelElement, LabelProps>(({ children, ...props }, ref) => (\n  <Field.Label asChild {...props} ref={ref}>\n    <Label>{children}</Label>\n  </Field.Label>\n));\n"],"mappings":";;;;;;;;;;;;;;AAeA,MAAM,mDACJA,kBAAI,QACJ,EACE,MAAM;CACJ,OAAO;CACP,OAAO;CACP,WAAW,EACT,OAAO,eACR;CACF,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAID,MAAa,gCACV,EAAE,YAAY,gBAAgB,aAAa,QAAQ,KAAK,SAAS,QAAQ,OAAO,GAAG,QAAQ,QAC1F,2CAAC;CAAa,KAAKC,4BAAI,IAAI;EAAE;EAAW;EAAY;EAAQ;EAAO,EAAE,QAAQ;CAAE,GAAI;CAAW;EAAO,CAExG;AAID,MAAa,wCAA6D,EAAE,UAAU,GAAG,SAAS,QAChG,2CAACC,uBAAS;CAAO;CAAQ,GAAI;CAAY;WACvC,2CAAC,UAAQ,WAAkB;EACX,CAClB;AAEF,MAAM,kDACJF,kBAAI,OACJ,EACE,MAAM;CACJ,SAAS;CACT,WAAW,EACT,OAAO,eACR;CACF,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAID,MAAa,+BACV,EAAE,YAAY,gBAAgB,aAAa,QAAQ,KAAK,SAAS,QAAQ,OAAO,GAAG,QAAQ,QAC1F,2CAAC;CAAY,KAAKC,4BAAI,IAAI;EAAE;EAAW;EAAY;EAAQ;EAAO,EAAE,QAAQ;CAAE,GAAI;CAAW;EAAO,CAEvG;AAED,MAAa,oCAAuD,EAAE,UAAU,GAAG,SAAS,QAC1F,2CAACE,oBAAM;CAAM;CAAQ,GAAI;CAAY;WACnC,2CAAC,SAAO,WAAiB;EACb,CACd"}
+{"version":3,"file":"Label.js","names":["ark","css","Fieldset","Field"],"sources":["../src/Label.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 { Field, Fieldset, type HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { css } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\nimport { type TextProps } from \"./Text\";\n\nconst StyledLegend = styled(\n  ark.legend,\n  {\n    base: {\n      float: \"left\",\n      width: \"inherit\",\n      _disabled: {\n        color: \"text.subtle\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n\nexport interface LegendProps extends Omit<HTMLArkProps<\"legend\">, \"color\">, StyledProps, TextProps {}\n\nexport const Legend = forwardRef<HTMLLegendElement, LegendProps>(\n  ({ textStyle = \"label.medium\", fontWeight = \"bold\", css: cssProp, srOnly, color, ...rest }, ref) => (\n    <StyledLegend css={css.raw({ textStyle, fontWeight, srOnly, color }, cssProp)} {...rest} ref={ref} />\n  ),\n);\n\nexport interface FieldsetLegendProps extends Omit<Fieldset.LegendProps, \"color\">, TextProps, StyledProps {}\n\nexport const FieldsetLegend = forwardRef<HTMLLegendElement, LegendProps>(({ children, ...props }, ref) => (\n  <Fieldset.Legend asChild {...props} ref={ref}>\n    <Legend>{children}</Legend>\n  </Fieldset.Legend>\n));\n\nconst StyledLabel = styled(\n  ark.label,\n  {\n    base: {\n      display: \"inline-block\",\n      _disabled: {\n        color: \"text.subtle\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n\nexport interface LabelProps extends Omit<HTMLArkProps<\"label\">, \"color\">, TextProps, StyledProps {}\n\nexport const Label = forwardRef<HTMLLabelElement, LabelProps>(\n  ({ textStyle = \"label.medium\", fontWeight = \"bold\", css: cssProp, srOnly, color, ...rest }, ref) => (\n    <StyledLabel css={css.raw({ textStyle, fontWeight, srOnly, color }, cssProp)} {...rest} ref={ref} />\n  ),\n);\n\nexport const FieldLabel = forwardRef<HTMLLabelElement, LabelProps>(({ children, ...props }, ref) => (\n  <Field.Label asChild {...props} ref={ref}>\n    <Label>{children}</Label>\n  </Field.Label>\n));\n"],"mappings":";;;;;;;;;;;;;AAeA,MAAM,gBAAA,GAAA,wBAAA,QACJA,cAAAA,IAAI,QACJ,EACE,MAAM;CACJ,OAAO;CACP,OAAO;CACP,WAAW,EACT,OAAO,eACR;CACF,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAID,MAAa,UAAA,GAAA,MAAA,aACV,EAAE,YAAY,gBAAgB,aAAa,QAAQ,KAAK,SAAS,QAAQ,OAAO,GAAG,QAAQ,QAC1F,iBAAA,GAAA,kBAAA,KAAC,cAAD;CAAc,KAAKC,wBAAAA,IAAI,IAAI;EAAE;EAAW;EAAY;EAAQ;EAAO,EAAE,QAAQ;CAAE,GAAI;CAAW;CAAO,CAAA,CAExG;AAID,MAAa,kBAAA,GAAA,MAAA,aAA6D,EAAE,UAAU,GAAG,SAAS,QAChG,iBAAA,GAAA,kBAAA,KAACC,cAAAA,SAAS,QAAV;CAAiB,SAAA;CAAQ,GAAI;CAAY;WACvC,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAS,UAAkB,CAAA;CACX,CAAA,CAClB;AAEF,MAAM,eAAA,GAAA,wBAAA,QACJF,cAAAA,IAAI,OACJ,EACE,MAAM;CACJ,SAAS;CACT,WAAW,EACT,OAAO,eACR;CACF,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAID,MAAa,SAAA,GAAA,MAAA,aACV,EAAE,YAAY,gBAAgB,aAAa,QAAQ,KAAK,SAAS,QAAQ,OAAO,GAAG,QAAQ,QAC1F,iBAAA,GAAA,kBAAA,KAAC,aAAD;CAAa,KAAKC,wBAAAA,IAAI,IAAI;EAAE;EAAW;EAAY;EAAQ;EAAO,EAAE,QAAQ;CAAE,GAAI;CAAW;CAAO,CAAA,CAEvG;AAED,MAAa,cAAA,GAAA,MAAA,aAAuD,EAAE,UAAU,GAAG,SAAS,QAC1F,iBAAA,GAAA,kBAAA,KAACE,cAAAA,MAAM,OAAP;CAAa,SAAA;CAAQ,GAAI;CAAY;WACnC,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAQ,UAAiB,CAAA;CACb,CAAA,CACd"}