@bonniernews/dn-design-system-web 32.7.43 → 32.7.45

package/preact/components/list-item/list-item.js

@@ -20,184 +20,8 @@ var IconUse = ({ iconName, classNames, attributes }) => {
   return /* @__PURE__ */ jsx2("i", { className: classes, ...attributes, children: /* @__PURE__ */ jsx2("svg", { children: /* @__PURE__ */ jsx2("use", { xlinkHref: `#ds-${iconName}` }) }) });
 };
 
-// ../src/assets/form-field/form-field.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "preact/jsx-runtime";
-var FormField = ({ error, errorMessage, wrapperClasses, helpHtml, helpText, type, children }) => {
-  const classes = formatClassString([
-    "ds-form-field",
-    wrapperClasses,
-    error && `ds-form-field__error`,
-    type === "hidden" && "hidden"
-  ]);
-  const showHelp = helpHtml || helpText;
-  return /* @__PURE__ */ jsxs2("div", { className: classes, children: [
-    children,
-    errorMessage && /* @__PURE__ */ jsxs2("div", { className: "ds-form-field__error-message js-field-error", children: [
-      /* @__PURE__ */ jsx3(IconUse, { iconName: "info-filled" }),
-      /* @__PURE__ */ jsx3("span", { children: errorMessage })
-    ] }),
-    showHelp && /* @__PURE__ */ jsx3("p", { className: "ds-form-field__help-text", children: helpHtml ? helpHtml : helpText })
-  ] });
-};
-var form_field_default = FormField;
-
-// ../src/components/checkbox/checkbox.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "preact/jsx-runtime";
-var Checkbox = ({
-  error,
-  errorMessage,
-  label,
-  stripLabel,
-  name = "ds-checkbox",
-  validation,
-  checked,
-  required,
-  disabled,
-  forcePx,
-  classNames,
-  attributes
-}) => {
-  const componentClassName = "ds-checkbox";
-  const wrapperClasses = formatClassString([componentClassName, forcePx && "ds-force-px", classNames]);
-  return /* @__PURE__ */ jsxs3(form_field_default, { error, errorMessage: label && errorMessage, wrapperClasses, children: [
-    /* @__PURE__ */ jsx4(
-      "input",
-      {
-        type: "checkbox",
-        id: name,
-        name,
-        className: `${componentClassName}__input js-field-error`,
-        "data-validation": validation,
-        ...attributes,
-        defaultChecked: checked,
-        disabled,
-        required
-      }
-    ),
-    stripLabel ? /* @__PURE__ */ jsx4("div", { className: `${componentClassName}__inner`, children: /* @__PURE__ */ jsx4(CheckboxIcons, { componentClassName }) }) : /* @__PURE__ */ jsxs3("label", { className: `${componentClassName}__inner`, htmlFor: name, children: [
-      /* @__PURE__ */ jsx4(CheckboxIcons, { componentClassName }),
-      label && /* @__PURE__ */ jsx4("span", { className: `${componentClassName}__text`, children: label })
-    ] })
-  ] });
-};
-var CheckboxIcons = ({ componentClassName }) => {
-  return /* @__PURE__ */ jsxs3("span", { className: `${componentClassName}__icon`, children: [
-    /* @__PURE__ */ jsx4(IconUse, { iconName: "check_box_outline_blank" }),
-    /* @__PURE__ */ jsx4(IconUse, { iconName: "check_box-filled" })
-  ] });
-};
-var checkbox_default = Checkbox;
-
-// ../src/components/radio-button/radio-button.tsx
-import { Fragment } from "preact";
-import { jsx as jsx5, jsxs as jsxs4 } from "preact/jsx-runtime";
-var RadioButton = ({
-  buttons,
-  error,
-  name,
-  errorMessage,
-  required,
-  stripLabel,
-  disabled,
-  forcePx,
-  classNames
-}) => {
-  const componentClassName = "ds-radio-btn";
-  const wrapperClasses = formatClassString([componentClassName, forcePx && "ds-force-px", classNames]);
-  return /* @__PURE__ */ jsx5(form_field_default, { error, errorMessage, wrapperClasses, children: buttons?.map((button) => {
-    const { id, selected, value, label, attributes } = button;
-    return /* @__PURE__ */ jsxs4(Fragment, { children: [
-      /* @__PURE__ */ jsx5(
-        "input",
-        {
-          type: "radio",
-          id,
-          name,
-          defaultChecked: selected,
-          disabled,
-          required,
-          value,
-          ...attributes
-        }
-      ),
-      stripLabel ? /* @__PURE__ */ jsx5("div", { className: `${componentClassName}__inner`, children: /* @__PURE__ */ jsx5(RadioButtonIcons, { componentClassName }) }) : /* @__PURE__ */ jsxs4("label", { className: `${componentClassName}__inner`, htmlFor: id, children: [
-        /* @__PURE__ */ jsx5(RadioButtonIcons, { componentClassName }),
-        label && /* @__PURE__ */ jsx5("span", { className: `${componentClassName}__text`, children: label })
-      ] })
-    ] }, id);
-  }) });
-};
-var RadioButtonIcons = ({ componentClassName }) => {
-  return /* @__PURE__ */ jsxs4("span", { className: `${componentClassName}__icon`, children: [
-    /* @__PURE__ */ jsx5(IconUse, { iconName: "radio_button_unchecked" }),
-    /* @__PURE__ */ jsx5(IconUse, { iconName: "radio_button_checked" })
-  ] });
-};
-
-// ../src/components/switch/switch.tsx
-import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs5 } from "preact/jsx-runtime";
-var Switch = ({
-  name = "ds-switch",
-  checked,
-  showMeta = false,
-  metaOn = "P\xE5",
-  metaOff = "Av",
-  disabled,
-  stripLabel,
-  forcePx,
-  classNames,
-  attributes
-}) => {
-  const componentClassName = "ds-switch";
-  const classes = formatClassString([componentClassName, forcePx && "ds-force-px", classNames]);
-  return /* @__PURE__ */ jsxs5("div", { className: classes, children: [
-    /* @__PURE__ */ jsx6(
-      "input",
-      {
-        type: "checkbox",
-        id: name,
-        name,
-        defaultChecked: checked,
-        disabled,
-        "aria-label": name,
-        ...attributes
-      }
-    ),
-    stripLabel ? /* @__PURE__ */ jsx6("div", { className: `${componentClassName}__inner`, children: /* @__PURE__ */ jsx6(
-      SwitchInner,
-      {
-        ...{
-          showMeta,
-          metaOn,
-          metaOff,
-          componentClassName
-        }
-      }
-    ) }) : /* @__PURE__ */ jsx6("label", { className: `${componentClassName}__inner`, tabIndex: 0, htmlFor: name, children: /* @__PURE__ */ jsx6(
-      SwitchInner,
-      {
-        ...{
-          showMeta,
-          metaOn,
-          metaOff,
-          componentClassName
-        }
-      }
-    ) })
-  ] });
-};
-var SwitchInner = ({ showMeta, metaOn, metaOff, componentClassName }) => {
-  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
-    showMeta && /* @__PURE__ */ jsxs5("div", { className: `${componentClassName}__meta`, children: [
-      /* @__PURE__ */ jsx6("span", { className: `${componentClassName}__meta-on`, children: metaOn }),
-      /* @__PURE__ */ jsx6("span", { className: `${componentClassName}__meta-off`, children: metaOff })
-    ] }),
-    /* @__PURE__ */ jsx6("span", { className: `${componentClassName}__box`, children: /* @__PURE__ */ jsx6("span", { className: `${componentClassName}__knob` }) })
-  ] });
-};
-
 // ../src/components/spinner/spinner.tsx
-import { jsx as jsx7 } from "preact/jsx-runtime";
+import { jsx as jsx3 } from "preact/jsx-runtime";
 var Spinner = ({ variant = "primary", size = "large", forcePx, classNames, attributes }) => {
   const componentClassName = "ds-spinner";
   const classes = formatClassString([
@@ -207,19 +31,19 @@ var Spinner = ({ variant = "primary", size = "large", forcePx, classNames, attri
     forcePx && "ds-force-px",
     classNames
   ]);
-  return /* @__PURE__ */ jsx7("span", { className: classes, ...attributes, children: /* @__PURE__ */ jsx7("span", { className: `${componentClassName}__inner` }) });
+  return /* @__PURE__ */ jsx3("span", { className: classes, ...attributes, children: /* @__PURE__ */ jsx3("span", { className: `${componentClassName}__inner` }) });
 };
 
 // ../src/components/button/button-base.tsx
-import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs6 } from "preact/jsx-runtime";
+import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "preact/jsx-runtime";
 var InnerButton = ({ text, isIconButton = false, attributes, icon, loadingHtml }) => {
   let optionalHtml;
   if (!isIconButton && attributes["aria-label"]) {
-    optionalHtml = /* @__PURE__ */ jsx8("span", { "aria-hidden": "true", children: text });
+    optionalHtml = /* @__PURE__ */ jsx4("span", { "aria-hidden": "true", children: text });
   } else if (!isIconButton) {
-    optionalHtml = /* @__PURE__ */ jsx8("span", { children: text });
+    optionalHtml = /* @__PURE__ */ jsx4("span", { children: text });
   }
-  return /* @__PURE__ */ jsxs6(Fragment3, { children: [
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
     optionalHtml,
     icon,
     loadingHtml
@@ -234,9 +58,9 @@ var ToggleWrapper = ({
   offChild,
   loadingHtml
 }) => {
-  return /* @__PURE__ */ jsxs6("button", { type: "button", role: "switch", "aria-checked": selected, className: classes, ...attributes, disabled, children: [
-    /* @__PURE__ */ jsx8("span", { className: "ds-btn__off", "aria-hidden": "true", children: onChild }),
-    /* @__PURE__ */ jsx8("span", { className: "ds-btn__on", "aria-hidden": "true", children: offChild }),
+  return /* @__PURE__ */ jsxs2("button", { type: "button", role: "switch", "aria-checked": selected, className: classes, ...attributes, disabled, children: [
+    /* @__PURE__ */ jsx4("span", { className: "ds-btn__off", "aria-hidden": "true", children: onChild }),
+    /* @__PURE__ */ jsx4("span", { className: "ds-btn__on", "aria-hidden": "true", children: offChild }),
     loadingHtml
   ] });
 };
@@ -272,10 +96,10 @@ var ButtonBase = ({
   } else if (variant === "secondaryFilled" || variant === "secondaryOutline") {
     spinnerVariant = "primary";
   }
-  const loadingHtml = /* @__PURE__ */ jsx8(Spinner, { ...{ size: "small", variant: spinnerVariant, forcePx, attributes: { "aria-hidden": "true" } } });
+  const loadingHtml = /* @__PURE__ */ jsx4(Spinner, { ...{ size: "small", variant: spinnerVariant, forcePx, attributes: { "aria-hidden": "true" } } });
   let icon;
   if (iconName && (iconPosition != "none" || isIconButton == true)) {
-    icon = /* @__PURE__ */ jsx8(IconUse, { ...{ iconName, attributes: { "aria-hidden": "true" } } });
+    icon = /* @__PURE__ */ jsx4(IconUse, { ...{ iconName, attributes: { "aria-hidden": "true" } } });
   }
   const classNamePrefix = "ds-btn--";
   const classes = formatClassString([
@@ -296,30 +120,30 @@ var ButtonBase = ({
   if (isToggle) {
     let onChild, offChild;
     if (isIconButton && iconName && selectedIconName) {
-      onChild = /* @__PURE__ */ jsx8(IconUse, { iconName });
-      offChild = /* @__PURE__ */ jsx8(IconUse, { iconName: selectedIconName });
+      onChild = /* @__PURE__ */ jsx4(IconUse, { iconName });
+      offChild = /* @__PURE__ */ jsx4(IconUse, { iconName: selectedIconName });
     } else {
-      onChild = /* @__PURE__ */ jsx8("span", { children: text });
-      offChild = /* @__PURE__ */ jsxs6(Fragment3, { children: [
-        /* @__PURE__ */ jsx8(IconUse, { iconName: "check" }),
-        /* @__PURE__ */ jsx8("span", { children: selectedText })
+      onChild = /* @__PURE__ */ jsx4("span", { children: text });
+      offChild = /* @__PURE__ */ jsxs2(Fragment, { children: [
+        /* @__PURE__ */ jsx4(IconUse, { iconName: "check" }),
+        /* @__PURE__ */ jsx4("span", { children: selectedText })
       ] });
     }
-    buttonToRender = /* @__PURE__ */ jsx8(ToggleWrapper, { ...{ selected, classes, attributes, disabled, onChild, offChild, loadingHtml } });
+    buttonToRender = /* @__PURE__ */ jsx4(ToggleWrapper, { ...{ selected, classes, attributes, disabled, onChild, offChild, loadingHtml } });
   } else {
     const buttonParams = { isIconButton, text, icon, loadingHtml, attributes };
     if (href) {
       const params = { ...buttonParams, loadingHtml: null };
-      buttonToRender = /* @__PURE__ */ jsx8("a", { href, className: classes, ...attributes, children: /* @__PURE__ */ jsx8(InnerButton, { ...params }) });
+      buttonToRender = /* @__PURE__ */ jsx4("a", { href, className: classes, ...attributes, children: /* @__PURE__ */ jsx4(InnerButton, { ...params }) });
     } else {
-      buttonToRender = /* @__PURE__ */ jsx8("button", { type, className: classes, ...attributes, disabled, children: /* @__PURE__ */ jsx8(InnerButton, { ...buttonParams }) });
+      buttonToRender = /* @__PURE__ */ jsx4("button", { type, className: classes, ...attributes, disabled, children: /* @__PURE__ */ jsx4(InnerButton, { ...buttonParams }) });
     }
   }
-  return /* @__PURE__ */ jsx8(Fragment3, { children: buttonToRender });
+  return /* @__PURE__ */ jsx4(Fragment, { children: buttonToRender });
 };
 
 // ../src/components/button-toggle/button-toggle.tsx
-import { jsx as jsx9 } from "preact/jsx-runtime";
+import { jsx as jsx5 } from "preact/jsx-runtime";
 var ButtonToggle = ({
   selected = false,
   text,
@@ -337,7 +161,7 @@ var ButtonToggle = ({
   classNames,
   forcePx = false
 }) => {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx5(
     ButtonBase,
     {
       ...{
@@ -364,6 +188,190 @@ var ButtonToggle = ({
 };
 var button_toggle_default = ButtonToggle;
 
+// ../src/assets/form-field/form-field.tsx
+import { jsx as jsx6, jsxs as jsxs3 } from "preact/jsx-runtime";
+var FormField = ({
+  error,
+  errorMessage,
+  wrapperClasses,
+  helpHtml,
+  helpText,
+  type,
+  children
+}) => {
+  const classes = formatClassString([
+    "ds-form-field",
+    wrapperClasses,
+    error && `ds-form-field__error`,
+    type === "hidden" && "hidden"
+  ]);
+  const showHelp = helpHtml || helpText;
+  return /* @__PURE__ */ jsxs3("div", { className: classes, children: [
+    children,
+    errorMessage && /* @__PURE__ */ jsxs3("div", { className: "ds-form-field__error-message js-field-error", children: [
+      /* @__PURE__ */ jsx6(IconUse, { iconName: "info-filled" }),
+      /* @__PURE__ */ jsx6("span", { children: errorMessage })
+    ] }),
+    showHelp && /* @__PURE__ */ jsx6("p", { className: "ds-form-field__help-text", children: helpHtml ? helpHtml : helpText })
+  ] });
+};
+var form_field_default = FormField;
+
+// ../src/components/checkbox/checkbox.tsx
+import { jsx as jsx7, jsxs as jsxs4 } from "preact/jsx-runtime";
+var Checkbox = ({
+  error,
+  errorMessage,
+  label,
+  stripLabel,
+  name = "ds-checkbox",
+  validation,
+  checked,
+  required,
+  disabled,
+  forcePx,
+  classNames,
+  attributes
+}) => {
+  const componentClassName = "ds-checkbox";
+  const wrapperClasses = formatClassString([componentClassName, forcePx && "ds-force-px", classNames]);
+  return /* @__PURE__ */ jsxs4(form_field_default, { error, errorMessage: label && errorMessage, wrapperClasses, children: [
+    /* @__PURE__ */ jsx7(
+      "input",
+      {
+        type: "checkbox",
+        id: name,
+        name,
+        className: `${componentClassName}__input js-field-error`,
+        "data-validation": validation,
+        ...attributes,
+        defaultChecked: checked,
+        disabled,
+        required
+      }
+    ),
+    stripLabel ? /* @__PURE__ */ jsx7("div", { className: `${componentClassName}__inner`, children: /* @__PURE__ */ jsx7(CheckboxIcons, { componentClassName }) }) : /* @__PURE__ */ jsxs4("label", { className: `${componentClassName}__inner`, htmlFor: name, children: [
+      /* @__PURE__ */ jsx7(CheckboxIcons, { componentClassName }),
+      label && /* @__PURE__ */ jsx7("span", { className: `${componentClassName}__text`, children: label })
+    ] })
+  ] });
+};
+var CheckboxIcons = ({ componentClassName }) => {
+  return /* @__PURE__ */ jsxs4("span", { className: `${componentClassName}__icon`, children: [
+    /* @__PURE__ */ jsx7(IconUse, { iconName: "check_box_outline_blank" }),
+    /* @__PURE__ */ jsx7(IconUse, { iconName: "check_box-filled" })
+  ] });
+};
+var checkbox_default = Checkbox;
+
+// ../src/components/radio-button/radio-button.tsx
+import { Fragment as Fragment2 } from "preact";
+import { jsx as jsx8, jsxs as jsxs5 } from "preact/jsx-runtime";
+var RadioButton = ({
+  buttons,
+  error,
+  name,
+  errorMessage,
+  required,
+  stripLabel,
+  disabled,
+  forcePx,
+  classNames
+}) => {
+  const componentClassName = "ds-radio-btn";
+  const wrapperClasses = formatClassString([componentClassName, forcePx && "ds-force-px", classNames]);
+  return /* @__PURE__ */ jsx8(form_field_default, { error, errorMessage, wrapperClasses, children: buttons?.map((button) => {
+    const { id, selected, value, label, attributes } = button;
+    return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+      /* @__PURE__ */ jsx8(
+        "input",
+        {
+          type: "radio",
+          id,
+          name,
+          defaultChecked: selected,
+          disabled,
+          required,
+          value,
+          ...attributes
+        }
+      ),
+      stripLabel ? /* @__PURE__ */ jsx8("div", { className: `${componentClassName}__inner`, children: /* @__PURE__ */ jsx8(RadioButtonIcons, { componentClassName }) }) : /* @__PURE__ */ jsxs5("label", { className: `${componentClassName}__inner`, htmlFor: id, children: [
+        /* @__PURE__ */ jsx8(RadioButtonIcons, { componentClassName }),
+        label && /* @__PURE__ */ jsx8("span", { className: `${componentClassName}__text`, children: label })
+      ] })
+    ] }, id);
+  }) });
+};
+var RadioButtonIcons = ({ componentClassName }) => {
+  return /* @__PURE__ */ jsxs5("span", { className: `${componentClassName}__icon`, children: [
+    /* @__PURE__ */ jsx8(IconUse, { iconName: "radio_button_unchecked" }),
+    /* @__PURE__ */ jsx8(IconUse, { iconName: "radio_button_checked" })
+  ] });
+};
+
+// ../src/components/switch/switch.tsx
+import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs6 } from "preact/jsx-runtime";
+var Switch = ({
+  name = "ds-switch",
+  checked,
+  showMeta = false,
+  metaOn = "P\xE5",
+  metaOff = "Av",
+  disabled,
+  stripLabel,
+  forcePx,
+  classNames,
+  attributes
+}) => {
+  const componentClassName = "ds-switch";
+  const classes = formatClassString([componentClassName, forcePx && "ds-force-px", classNames]);
+  return /* @__PURE__ */ jsxs6("div", { className: classes, children: [
+    /* @__PURE__ */ jsx9(
+      "input",
+      {
+        type: "checkbox",
+        id: name,
+        name,
+        defaultChecked: checked,
+        disabled,
+        "aria-label": name,
+        ...attributes
+      }
+    ),
+    stripLabel ? /* @__PURE__ */ jsx9("div", { className: `${componentClassName}__inner`, children: /* @__PURE__ */ jsx9(
+      SwitchInner,
+      {
+        ...{
+          showMeta,
+          metaOn,
+          metaOff,
+          componentClassName
+        }
+      }
+    ) }) : /* @__PURE__ */ jsx9("label", { className: `${componentClassName}__inner`, tabIndex: 0, htmlFor: name, children: /* @__PURE__ */ jsx9(
+      SwitchInner,
+      {
+        ...{
+          showMeta,
+          metaOn,
+          metaOff,
+          componentClassName
+        }
+      }
+    ) })
+  ] });
+};
+var SwitchInner = ({ showMeta, metaOn, metaOff, componentClassName }) => {
+  return /* @__PURE__ */ jsxs6(Fragment3, { children: [
+    showMeta && /* @__PURE__ */ jsxs6("div", { className: `${componentClassName}__meta`, children: [
+      /* @__PURE__ */ jsx9("span", { className: `${componentClassName}__meta-on`, children: metaOn }),
+      /* @__PURE__ */ jsx9("span", { className: `${componentClassName}__meta-off`, children: metaOff })
+    ] }),
+    /* @__PURE__ */ jsx9("span", { className: `${componentClassName}__box`, children: /* @__PURE__ */ jsx9("span", { className: `${componentClassName}__knob` }) })
+  ] });
+};
+
 // ../src/components/list-item/list-item.tsx
 import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs7 } from "preact/jsx-runtime";
 var ListItem = (props) => {
@@ -402,13 +410,7 @@ var ListItem = (props) => {
   const mediaHtml = listItemType === "image" && props.mediaHtml;
   return /* @__PURE__ */ jsx10("li", { className: classes, children: /* @__PURE__ */ jsxs7(ListItemInner, { ...{ ...props, componentClassName }, children: [
     iconLeftSvg && /* @__PURE__ */ jsx10("span", { className: `${componentClassName}__icon-left`, children: iconLeftSvg }),
-    mediaHtml && /* @__PURE__ */ jsx10(
-      "div",
-      {
-        className: `${componentClassName}__image`,
-        dangerouslySetInnerHTML: { __html: mediaHtml }
-      }
-    ),
+    mediaHtml && /* @__PURE__ */ jsx10("div", { className: `${componentClassName}__image`, dangerouslySetInnerHTML: { __html: mediaHtml } }),
     title && /* @__PURE__ */ jsx10(
       Title,
       {