@bonniernews/dn-design-system-web 37.3.3 → 37.5.0

package/CHANGELOG.md

@@ -4,6 +4,85 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [37.5.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@37.4.0...@bonniernews/dn-design-system-web@37.5.0) (2026-06-24)
+
+
+### ⚠ BREAKING CHANGES
+
+* delete old design tokens (#2066)
+
+### Features
+
+* add LAB Light and LAB Dark theme support ([#2059](https://github.com/BonnierNews/dn-design-system/issues/2059)) ([0c364fe](https://github.com/BonnierNews/dn-design-system/commit/0c364fe7775340033ddac34233ccf26049e4fee9))
+* **app:** create useSpacing hook ([#2094](https://github.com/BonnierNews/dn-design-system/issues/2094)) ([665db36](https://github.com/BonnierNews/dn-design-system/commit/665db36efc9d4a3c8aed261db50674239a935b6e))
+* **app:** getSpacingValue ([#2095](https://github.com/BonnierNews/dn-design-system/issues/2095)) ([33fd425](https://github.com/BonnierNews/dn-design-system/commit/33fd42537760d51acc4402927e47d475fefc455b))
+* **web:** pill-group component ([#2083](https://github.com/BonnierNews/dn-design-system/issues/2083)) ([779f0c8](https://github.com/BonnierNews/dn-design-system/commit/779f0c8f5bf3282992e0bcbc2d001de45b2fd7c1))
+
+
+### Bug Fixes
+
+* **app:** add noImplicitAny to all tsconfigs ([#2087](https://github.com/BonnierNews/dn-design-system/issues/2087)) ([0ef38a6](https://github.com/BonnierNews/dn-design-system/commit/0ef38a6351e7d654e4261505d64fb367a05e221d))
+* **app:** broken spacing in Flex ([#2086](https://github.com/BonnierNews/dn-design-system/issues/2086)) ([25afbed](https://github.com/BonnierNews/dn-design-system/commit/25afbed286f9e6d4915031825f71ba27a0a669b1))
+* **app:** do not import all app typography styles ([#2088](https://github.com/BonnierNews/dn-design-system/issues/2088)) ([2b7be00](https://github.com/BonnierNews/dn-design-system/commit/2b7be003f69f235133087cbac0e4dfcd7ddd31d8))
+* **app:** restore lineHeight in typography ([#2079](https://github.com/BonnierNews/dn-design-system/issues/2079)) ([30d52e7](https://github.com/BonnierNews/dn-design-system/commit/30d52e71a2516ed85b61c62e5d99b5889c2eb6d5))
+
+
+### Maintenance
+
+* **app:** import new Figma variables structure ([#2071](https://github.com/BonnierNews/dn-design-system/issues/2071)) ([687b786](https://github.com/BonnierNews/dn-design-system/commit/687b786711903b1a6925fcb69296498c6a4b64d8))
+* **app:** new app lab colors ([#2096](https://github.com/BonnierNews/dn-design-system/issues/2096)) ([0367fbf](https://github.com/BonnierNews/dn-design-system/commit/0367fbf45dc308115bf8a7ae4105fdf50fd7f33b))
+* **app:** remove unused eslint-config package ([#2060](https://github.com/BonnierNews/dn-design-system/issues/2060)) ([69dce5c](https://github.com/BonnierNews/dn-design-system/commit/69dce5ccf388dc494d9c1138f3dfaaeed8621718))
+* **app:** support deep color objects in createDynamicColorsIOS ([#2078](https://github.com/BonnierNews/dn-design-system/issues/2078)) ([69fb3f3](https://github.com/BonnierNews/dn-design-system/commit/69fb3f3d9fea8693308bd4e2abe77c70e1c7967b))
+* delete new-app-package script ([#2073](https://github.com/BonnierNews/dn-design-system/issues/2073)) ([aa75dd3](https://github.com/BonnierNews/dn-design-system/commit/aa75dd3add09423acb6fc1b20158863ca73bd2f5))
+* delete old design tokens ([#2066](https://github.com/BonnierNews/dn-design-system/issues/2066)) ([376f090](https://github.com/BonnierNews/dn-design-system/commit/376f090e8bba55316d382b85f2fff1187dfe4bcf))
+* latest figma import and sync variables ([#2089](https://github.com/BonnierNews/dn-design-system/issues/2089)) ([7c8a445](https://github.com/BonnierNews/dn-design-system/commit/7c8a445b9950eb306edbcb3e197bde5365f00a74))
+* latest figma variables ([#2090](https://github.com/BonnierNews/dn-design-system/issues/2090)) ([7c3cc72](https://github.com/BonnierNews/dn-design-system/commit/7c3cc72b85bc07b98e838b46e067b38d0b029412))
+* latest figma vars ([#2093](https://github.com/BonnierNews/dn-design-system/issues/2093)) ([fc9e159](https://github.com/BonnierNews/dn-design-system/commit/fc9e159e5362fb6f0b8fbf5b027eaa2d2c78e200))
+* prerelease packages ([07e4798](https://github.com/BonnierNews/dn-design-system/commit/07e4798a8b2b9a994d7a447f3ee1364b2a1ff5ca))
+* prerelease packages ([719350a](https://github.com/BonnierNews/dn-design-system/commit/719350a1a60d8431bb60058291871564444177c8))
+* prerelease packages ([238637d](https://github.com/BonnierNews/dn-design-system/commit/238637d8805cba09bd7612e8d386603af22bd3cf))
+* prerelease packages ([11cf788](https://github.com/BonnierNews/dn-design-system/commit/11cf7887ff7c6bdc09d7a659e32bf6b4c9935c9b))
+* prerelease packages ([9d35284](https://github.com/BonnierNews/dn-design-system/commit/9d35284d77cf1a97dfc14f826311bd91b4be2aa1))
+* prerelease packages ([04869e0](https://github.com/BonnierNews/dn-design-system/commit/04869e0e5423b0b1dab5ce058443d0cf1a9a863d))
+* prerelease packages ([6df7927](https://github.com/BonnierNews/dn-design-system/commit/6df792777fe3ead7540ece2185e22b908ff8c04d))
+* prerelease packages ([62f0e70](https://github.com/BonnierNews/dn-design-system/commit/62f0e70bc912758fa4318f1cd4bf3c0baa755f9e))
+* prerelease packages ([a851630](https://github.com/BonnierNews/dn-design-system/commit/a851630612ad3e2af497251a0d758794b10c3408))
+* prerelease packages ([308fb9b](https://github.com/BonnierNews/dn-design-system/commit/308fb9bb30f5a424eabe328379aa8a3df7a6daf9))
+* prerelease packages ([688f203](https://github.com/BonnierNews/dn-design-system/commit/688f203156f0dbff4afb3c2042ad1059f718c6af))
+* prerelease packages ([c133147](https://github.com/BonnierNews/dn-design-system/commit/c133147bde647c743a8065687e46cc18ffb8f2ca))
+* prerelease packages ([2b9fe93](https://github.com/BonnierNews/dn-design-system/commit/2b9fe935d0306e10247b35a41c03f0462f61be8a))
+* prerelease packages ([41b079d](https://github.com/BonnierNews/dn-design-system/commit/41b079d2898fbc57e064e019951581f409aa1a55))
+* prerelease packages ([cc315db](https://github.com/BonnierNews/dn-design-system/commit/cc315dba970f052af542b975fd9916563f15df81))
+* prerelease packages ([27a1ff6](https://github.com/BonnierNews/dn-design-system/commit/27a1ff61a26e50bc4f7c01851752db5e62b6474c))
+* prerelease packages ([2f340a7](https://github.com/BonnierNews/dn-design-system/commit/2f340a791293d2535d4c71695fe7c4aceeaaf1ef))
+* prerelease packages ([42f3f7f](https://github.com/BonnierNews/dn-design-system/commit/42f3f7fcc19c7a2e5d88c10ec9e987180cfaabde))
+* prerelease packages ([1e5a7be](https://github.com/BonnierNews/dn-design-system/commit/1e5a7bef476b6e800df82a287bbb680a5d7a808a))
+* prerelease packages ([859ea38](https://github.com/BonnierNews/dn-design-system/commit/859ea38581704387e49180c663b928aba4e6674f))
+* sync figma variables ([#2081](https://github.com/BonnierNews/dn-design-system/issues/2081)) ([fc4a658](https://github.com/BonnierNews/dn-design-system/commit/fc4a658080fd325a1c9d094a32064962fa9e02fe))
+* sync figma variables ([#2085](https://github.com/BonnierNews/dn-design-system/issues/2085)) ([c143232](https://github.com/BonnierNews/dn-design-system/commit/c1432326cf3f291797c868ff48312d80bc255a51))
+* sync figma variables ([#2092](https://github.com/BonnierNews/dn-design-system/issues/2092)) ([17b09e2](https://github.com/BonnierNews/dn-design-system/commit/17b09e282924f33d3d9d8fb591b9c63cfa57a4ef))
+* sync figma variables v2 ([#2084](https://github.com/BonnierNews/dn-design-system/issues/2084)) ([1da384f](https://github.com/BonnierNews/dn-design-system/commit/1da384f278696bbed133ed9d528d3c04b719cd79))
+* update new variables ([#2080](https://github.com/BonnierNews/dn-design-system/issues/2080)) ([53e7335](https://github.com/BonnierNews/dn-design-system/commit/53e7335465be8a989198bc1c7de1c51fbc702112))
+
+## [37.4.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@37.3.3...@bonniernews/dn-design-system-web@37.4.0) (2026-04-29)
+
+
+### Features
+
+* **web:** correction notice ([#2058](https://github.com/BonnierNews/dn-design-system/issues/2058)) ([996a10e](https://github.com/BonnierNews/dn-design-system/commit/996a10e97b9561d2e03614068dbfa53c6ec51a9b))
+
+
+### Bug Fixes
+
+* **app:** download puppeteer Chromium if postinstall was skipped ([#2055](https://github.com/BonnierNews/dn-design-system/issues/2055)) ([62a4c4e](https://github.com/BonnierNews/dn-design-system/commit/62a4c4eefe2b80b5aa7bc583e2d7f884ba3812c5))
+
+
+### Maintenance
+
+* **deps:** bump the npm_and_yarn group across 3 directories with 8 updates ([#2047](https://github.com/BonnierNews/dn-design-system/issues/2047)) ([682c3c5](https://github.com/BonnierNews/dn-design-system/commit/682c3c5f543ba3fa52c341c340e694100f3f500b))
+* **deps:** bump undici from 6.23.0 to 6.24.1 in the npm_and_yarn group across 1 directory ([#2034](https://github.com/BonnierNews/dn-design-system/issues/2034)) ([f0347dd](https://github.com/BonnierNews/dn-design-system/commit/f0347ddf2af34600b678294d1778de326d3d27b1))
+* migrate axios to native fetch ([#2052](https://github.com/BonnierNews/dn-design-system/issues/2052)) ([6261b8d](https://github.com/BonnierNews/dn-design-system/commit/6261b8d1eec51c77b2c98ca4878bb1237bb2e1ae))
+
 ## [37.3.3](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@37.3.2...@bonniernews/dn-design-system-web@37.3.3) (2026-04-16)
 
 

package/components/correction-notice/README.md

@@ -0,0 +1,23 @@
+CorrectionNotice
+================
+
+*   GitHub: [BonnierNews/dn-design-system/web/src/components/correction-notice](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/correction-notice)
+*   Storybook: [CorrectionNotice](https://designsystem.dn.se/?path=/docs/basic-correctionnotice--docs)
+
+The component will not include styling by itself. Make sure to include the right styles for the component. See example below: `@use '@bonniernews/dn-design-system-web/components/correction-notice/correction-notice.scss'`
+
+| Name | Description | Default |
+|:--- | :--- | :--- |
+| text\* | Text displayed to the left, e.g. "Har du upptäckt ett fel?"<br />string | \- |
+| buttonText\* | Button label, e.g. "Kontakta DN"<br />string | \- |
+| href\* | URL for the button (typically a mailto: link)<br />string | \- |
+| classNames | Ex. "my-special-class"<br />string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
+
+```jsx
+<CorrectionNotice
+  buttonText="Kontakta DN"
+  href="mailto:ratta@dn.se?subject=R%C3%A4ttelse"
+  text="Har du upptäckt ett fel?"
+/>
+```

package/components/correction-notice/correction-notice.scss

@@ -0,0 +1,26 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../button/button.scss";
+
+.ds-correction-notice {
+  padding: ds-spacing(0 0 $ds-s-200);
+
+  .ds-correction-notice__inner {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: ds-spacing($ds-s-100);
+    padding: ds-spacing($ds-s-100);
+    background-color: $ds-color-surface-highlight;
+    border-radius: ds-border-radius(050);
+
+    .ds-correction-notice__text {
+      @include ds-typography($ds-typography-functional-body-sm) {
+        color: $ds-color-text-primary;
+      }
+    }
+
+    .ds-btn {
+      flex-shrink: 0;
+    }
+  }
+}

package/components/pill/README.md

@@ -6,14 +6,22 @@ Pill
 
 The component will not include styling by itself. Make sure to include the right styles for the component. See example below: `@use '@bonniernews/dn-design-system-web/components/pill/pill.scss'`
 
+Two variants available:
+
+*   `link` — used for navigation, supports `selected` state and has an optional arrow icon
+*   `button` — used as a toggleable button, supports `selected` state
+
 | Name | Description | Default |
 |:--- | :--- | :--- |
+| variant | "link", "button" | "link" |
+| href\* | string | \- |
+| showIcon | boolean | \- |
 | text\* | string | \- |
-| variant | "link" | link |
 | size | "sm", "lg" | "lg" |
-| href\* | string | \- |
+| selected | boolean | false |
 | classNames | Ex. "my-special-class"<br />string | \- |
 | attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | { } |
+| onClick | () => void | \- |
 
 ```jsx
 <Pill

package/components/pill/pill.scss

@@ -45,6 +45,20 @@ $ds-pill-outlined__border-width: ds-border-width(xxs);
       opacity: $ds-opacity-component-hover-pressed;
     }
   }
+
+  &.ds-pill--selected {
+    background-color: $ds-color-surface-brand;
+    border-color: $ds-color-surface-brand;
+    color:  $ds-color-surface-primary;
+  }
+
+  &.ds-pill--button.ds-pill--lg {
+    padding: ds-spacing($ds-s-050, rem) ds-spacing($ds-s-100, rem);
+  }
+
+  &.ds-pill--button.ds-pill--sm {
+    padding: ds-spacing($ds-s-050, rem) ds-spacing($ds-s-100, rem);
+  }
 }
 
 .ds-pill--link {

package/components/pill-group/README.md

@@ -0,0 +1,48 @@
+PillGroup
+=========
+
+*   GitHub: [BonnierNews/dn-design-system/web/src/components/pill-group](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/pill-group)
+*   Storybook: [PillGroup](https://designsystem.dn.se/?path=/docs/basic-pillgroup--docs)
+
+The component will not include styling by itself. Make sure to include the right styles for the component. See example below: `@use '@bonniernews/dn-design-system-web/components/pill-group/pill-group.scss'`
+
+A group of multi-select pills. Two variants:
+
+*   `multi-select` — multiple pills can be active at once (checkbox behaviour)
+*   `single-select` — only one pill can be active at a time (radio behaviour)
+
+The component is stateless — selection state and `onClick` handlers are managed by the consumer.
+
+| Name | Description | Default |
+|:--- | :--- | :--- |
+| variant\* | "multi-select", "single-select" | \- |
+| items\* | PillGroupItem\[\] | PillGroupSingleSelectItem\[\] | \- |
+| size | "sm", "lg" | "lg" |
+| label\* | string | \- |
+| classNames | Ex. "my-special-class"<br />string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | { } |
+
+```jsx
+<PillGroup
+  items={[
+    {
+      text: 'Sport',
+      value: 'sport'
+    },
+    {
+      text: 'Kultur',
+      value: 'kultur'
+    },
+    {
+      text: 'Ekonomi',
+      value: 'ekonomi'
+    },
+    {
+      text: 'Utrikes',
+      value: 'utrikes'
+    }
+  ]}
+  label="Filtrera efter ämne"
+  variant="multi-select"
+/>
+```

package/components/pill-group/pill-group.scss

@@ -0,0 +1,16 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../pill/pill.scss";
+
+.ds-pill-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: ds-spacing($ds-s-050);
+
+  .ds-pill.ds-pill--sm {
+    padding: ds-spacing($ds-s-025, rem) ds-spacing($ds-s-050, rem);
+  }
+
+  .ds-pill.ds-pill--lg {
+    padding: ds-spacing($ds-s-050, rem) ds-spacing($ds-s-100, rem);
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "37.3.3",
+  "version": "37.5.0",
   "description": "DN design system for web.",
   "type": "module",
   "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",

package/preact/components/correction-notice/correction-notice.d.ts

@@ -0,0 +1,18 @@
+import type { SharedProps } from '@bonniernews/dn-design-system-web/assets/types/shared-props.ts';
+export interface CorrectionNoticeProps extends SharedProps {
+    /** Text displayed to the left, e.g. "Har du upptäckt ett fel?" */
+    text: string;
+    /** Button label, e.g. "Kontakta DN" */
+    buttonText: string;
+    /** URL for the button (typically a mailto: link) */
+    href: string;
+}
+/**
+ * - GitHub: [BonnierNews/dn-design-system/web/src/components/correction-notice](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/correction-notice)
+ * - Storybook: [CorrectionNotice](https://designsystem.dn.se/?path=/docs/basic-correctionnotice--docs)
+ *
+ * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:
+ * `@use '@bonniernews/dn-design-system-web/components/correction-notice/correction-notice.scss'`
+ */
+export declare const CorrectionNotice: ({ text, buttonText, href, classNames, attributes }: CorrectionNoticeProps) => import("preact").JSX.Element;
+export default CorrectionNotice;

package/preact/components/correction-notice/correction-notice.js

@@ -0,0 +1,204 @@
+// ../src/helpers/formatClassString.ts
+var formatClassString = (classesArray) => {
+  return classesArray.filter((x) => !!x).join(" ");
+};
+
+// ../src/foundations/icons/sprite.svg
+import { h } from "preact";
+import { jsx, jsxs } from "preact/jsx-runtime";
+
+// ../src/components/icon-sprite/icon-sprite.tsx
+import { jsx as jsx2 } from "preact/jsx-runtime";
+var IconUse = ({ iconName, classNames, attributes }) => {
+  const componentClassName = "ds-icon";
+  const classes = formatClassString([
+    componentClassName,
+    `${componentClassName}--sprite`,
+    `${componentClassName}--${iconName}`,
+    classNames
+  ]);
+  return /* @__PURE__ */ jsx2("i", { className: classes, ...attributes, children: /* @__PURE__ */ jsx2("svg", { children: /* @__PURE__ */ jsx2("use", { xlinkHref: `#ds-${iconName}` }) }) });
+};
+
+// ../src/components/spinner/spinner.tsx
+import { jsx as jsx3 } from "preact/jsx-runtime";
+var Spinner = ({ variant = "primary", size = "large", forcePx, classNames, attributes }) => {
+  const componentClassName = "ds-spinner";
+  const classes = formatClassString([
+    `${componentClassName}`,
+    `${componentClassName}--${variant}`,
+    `${componentClassName}--${size}`,
+    forcePx && "ds-force-px",
+    classNames
+  ]);
+  return /* @__PURE__ */ jsx3("span", { className: classes, ...attributes, children: /* @__PURE__ */ jsx3("span", { className: `${componentClassName}__inner` }) });
+};
+
+// ../src/components/button/button-base.tsx
+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__ */ jsx4("span", { "aria-hidden": "true", children: text });
+  } else if (!isIconButton) {
+    optionalHtml = /* @__PURE__ */ jsx4("span", { children: text });
+  }
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    optionalHtml,
+    icon,
+    loadingHtml
+  ] });
+};
+var ToggleWrapper = ({
+  selected = false,
+  disabled = false,
+  attributes,
+  classes,
+  onChild,
+  offChild,
+  loadingHtml
+}) => {
+  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
+  ] });
+};
+var ButtonBase = ({
+  text,
+  disabled = false,
+  variant = "primary",
+  size = "md",
+  fullWidth = false,
+  mobileFullWidth = false,
+  iconPosition = "none",
+  iconName,
+  loading = false,
+  type = "button",
+  href,
+  classNames,
+  attributes = {},
+  forcePx = false,
+  isIconButton = false,
+  selected = false,
+  isToggle = false,
+  selectedIconName,
+  selectedText
+}) => {
+  if (isIconButton && text && !attributes["aria-label"]) {
+    attributes["aria-label"] = text;
+  } else if (isToggle && text && selectedText && !attributes["aria-label"]) {
+    attributes["aria-label"] = selected ? selectedText : text;
+  }
+  let spinnerVariant = "secondary";
+  if (variant === "staticWhite" || variant === "transparent") {
+    spinnerVariant = "staticBlack";
+  } else if (variant === "secondaryFilled" || variant === "secondaryOutline") {
+    spinnerVariant = "primary";
+  }
+  const loadingHtml = /* @__PURE__ */ jsx4(Spinner, { ...{ size: "small", variant: spinnerVariant, forcePx, attributes: { "aria-hidden": "true" } } });
+  let icon;
+  if (iconName && (iconPosition != "none" || isIconButton == true)) {
+    icon = /* @__PURE__ */ jsx4(IconUse, { ...{ iconName, attributes: { "aria-hidden": "true" } } });
+  }
+  const classNamePrefix = "ds-btn--";
+  const classes = formatClassString([
+    "ds-btn",
+    `${classNamePrefix}${variant}`,
+    `${classNamePrefix}${size}`,
+    isToggle && selected && `${classNamePrefix}selected`,
+    fullWidth && `${classNamePrefix}full-width`,
+    mobileFullWidth && `${classNamePrefix}mobile-full-width`,
+    icon && !isIconButton && `${classNamePrefix}icon-${iconPosition}`,
+    isIconButton && `${classNamePrefix}icon-only`,
+    isToggle && `${classNamePrefix}toggle`,
+    loading && "ds-loading",
+    forcePx && "ds-force-px",
+    classNames
+  ]);
+  let buttonToRender;
+  if (isToggle) {
+    let onChild, offChild;
+    if (isIconButton && iconName && selectedIconName) {
+      onChild = /* @__PURE__ */ jsx4(IconUse, { iconName });
+      offChild = /* @__PURE__ */ jsx4(IconUse, { iconName: selectedIconName });
+    } else {
+      onChild = /* @__PURE__ */ jsx4("span", { children: text });
+      offChild = /* @__PURE__ */ jsxs2(Fragment, { children: [
+        /* @__PURE__ */ jsx4(IconUse, { iconName: "check" }),
+        /* @__PURE__ */ jsx4("span", { children: selectedText })
+      ] });
+    }
+    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__ */ jsx4("a", { href, className: classes, ...attributes, children: /* @__PURE__ */ jsx4(InnerButton, { ...params }) });
+    } else {
+      buttonToRender = /* @__PURE__ */ jsx4("button", { type, className: classes, ...attributes, disabled, children: /* @__PURE__ */ jsx4(InnerButton, { ...buttonParams }) });
+    }
+  }
+  return /* @__PURE__ */ jsx4(Fragment, { children: buttonToRender });
+};
+
+// ../src/components/button/button.tsx
+import { jsx as jsx5 } from "preact/jsx-runtime";
+var Button = ({
+  text,
+  disabled = false,
+  variant = "primary",
+  size = "md",
+  fullWidth = false,
+  mobileFullWidth = false,
+  iconPosition = "none",
+  iconName,
+  loading = false,
+  type = "button",
+  href,
+  isIconButton = false,
+  classNames,
+  attributes,
+  forcePx = false
+}) => {
+  return /* @__PURE__ */ jsx5(
+    ButtonBase,
+    {
+      ...{
+        text,
+        disabled,
+        variant,
+        size,
+        fullWidth,
+        mobileFullWidth,
+        iconPosition,
+        iconName,
+        loading,
+        type,
+        href,
+        isIconButton,
+        classNames,
+        attributes,
+        forcePx
+      }
+    }
+  );
+};
+var button_default = Button;
+
+// ../src/components/correction-notice/correction-notice.tsx
+import { jsx as jsx6, jsxs as jsxs3 } from "preact/jsx-runtime";
+var CorrectionNotice = ({ text, buttonText, href, classNames, attributes }) => {
+  const componentClassName = "ds-correction-notice";
+  const classes = formatClassString([componentClassName, classNames]);
+  return /* @__PURE__ */ jsx6("div", { className: classes, ...attributes, children: /* @__PURE__ */ jsxs3("div", { className: `${componentClassName}__inner`, children: [
+    /* @__PURE__ */ jsx6("span", { className: `${componentClassName}__text`, children: text }),
+    /* @__PURE__ */ jsx6(button_default, { text: buttonText, variant: "primaryBlack", href, size: "sm" })
+  ] }) });
+};
+var correction_notice_default = CorrectionNotice;
+export {
+  CorrectionNotice,
+  correction_notice_default as default
+};
+//# sourceMappingURL=correction-notice.js.map