@bonniernews/dn-design-system-web 21.2.1-beta.0 → 22.0.0

package/foundations/variables/colorsDnDarkTokens.scss

@@ -1,88 +1,84 @@
-$ds-hex-dark-text-primary: #ededed;
-$ds-hex-dark-text-primary-02: #b8b8b8;
+$ds-hex-dark-text-primary: #EDEDED;
+$ds-hex-dark-text-primary-02: #B8B8B8;
 $ds-hex-dark-text-secondary: #050505;
-$ds-hex-dark-text-critical: #fd2330;
-$ds-hex-dark-text-disabled: #b8b8b8;
+$ds-hex-dark-text-critical: #FD2330;
+$ds-hex-dark-text-disabled: #B8B8B8;
 $ds-hex-dark-text-on-brand: #ffffff;
 $ds-hex-dark-text-on-business: #ffffff;
 $ds-hex-dark-text-on-critical: #ffffff;
 $ds-hex-dark-text-on-success: #ffffff;
-$ds-hex-dark-text-brand: #fd2330;
-$ds-hex-dark-text-body-link: #65a0fc;
-$ds-hex-dark-text-body-link-visited: #65a0fc;
-$ds-hex-dark-text-positive: #3a8352;
-$ds-hex-dark-text-culture: #4293d7;
-$ds-hex-dark-icon-primary: #ededed;
-$ds-hex-dark-icon-primary-02: #cfcfcf;
+$ds-hex-dark-text-brand: #FD2330;
+$ds-hex-dark-text-body-link: #65A0FC;
+$ds-hex-dark-text-body-link-visited: #65A0FC;
+$ds-hex-dark-text-positive: #3A8352;
+$ds-hex-dark-icon-primary: #EDEDED;
+$ds-hex-dark-icon-primary-02: #CFCFCF;
 $ds-hex-dark-icon-secondary: #050505;
-$ds-hex-dark-icon-critical: #fd2330;
-$ds-hex-dark-icon-disabled: #b8b8b8;
+$ds-hex-dark-icon-critical: #FD2330;
+$ds-hex-dark-icon-disabled: #B8B8B8;
 $ds-hex-dark-icon-on-brand: #141414;
 $ds-hex-dark-icon-on-critical: #ffffff;
 $ds-hex-dark-icon-on-success: #ffffff;
 $ds-hex-dark-icon-on-business: #ffffff;
-$ds-hex-dark-icon-brand: #fd2330;
-$ds-hex-dark-icon-culture: #4293d7;
-$ds-hex-dark-component-brand: #fd2330;
-$ds-hex-dark-component-business: #3a8352;
-$ds-hex-dark-component-primary: #ededed;
-$ds-hex-dark-component-primary-overlay: rgba(255, 255, 255, 0.13);
-$ds-hex-dark-component-primary-overlay-02: #9e9e9e;
+$ds-hex-dark-icon-brand: #FD2330;
+$ds-hex-dark-component-brand: #FD2330;
+$ds-hex-dark-component-business: #3A8352;
+$ds-hex-dark-component-primary: #EDEDED;
+$ds-hex-dark-component-primary-overlay: #ffffff21;
+$ds-hex-dark-component-primary-overlay-02: #9E9E9E;
 $ds-hex-dark-component-secondary: #050505;
-$ds-hex-dark-component-secondary-overlay: rgba(8, 8, 8, 0.13);
-$ds-hex-dark-component-secondary-overlay-02: rgba(8, 8, 8, 0.2);
-$ds-hex-dark-component-critical: #ef7171;
-$ds-hex-dark-component-critical-overlay: #a51d24;
+$ds-hex-dark-component-secondary-overlay: #08080821;
+$ds-hex-dark-component-secondary-overlay-02: #08080833;
+$ds-hex-dark-component-critical: #EF7171;
+$ds-hex-dark-component-critical-overlay: #A51D24;
 $ds-hex-dark-component-static-white: #ffffff;
-$ds-hex-dark-component-positive: #3a8352;
-$ds-hex-dark-component-primary-02: #cfcfcf;
-$ds-hex-dark-surface-below: #171717;
+$ds-hex-dark-component-positive: #3A8352;
+$ds-hex-dark-component-primary-02: #CFCFCF;
+$ds-hex-dark-surface-below: #262626;
 $ds-hex-dark-surface-background: #050505;
-$ds-hex-dark-surface-raised: #2b2b2b;
-$ds-hex-dark-surface-native-article: #2b2b2b;
-$ds-hex-dark-surface-elevated: #2b2b2b;
+$ds-hex-dark-surface-raised: #2B2B2B;
+$ds-hex-dark-surface-native-article: #2B2B2B;
+$ds-hex-dark-surface-elevated: #2B2B2B;
 $ds-hex-dark-surface-inverted: #ffffff;
-$ds-hex-dark-surface-overlay: rgba(5, 5, 5, 0.5);
-$ds-hex-dark-surface-quiz: #ea3e3f;
-$ds-hex-dark-surface-korsord: #8bb6e8;
-$ds-hex-dark-surface-sudoko: #90d0bd;
-$ds-hex-dark-surface-brand: #da000d;
-$ds-hex-dark-surface-breaking: #300407;
-$ds-hex-dark-border-primary: rgba(255, 255, 255, 0.19);
-$ds-hex-dark-border-primary-02: rgba(255, 255, 255, 0.4);
-$ds-hex-dark-border-primary-03: #ededed;
+$ds-hex-dark-surface-overlay: #05050580;
+$ds-hex-dark-surface-quiz: #EA3E3F;
+$ds-hex-dark-surface-korsord: #8BB6E8;
+$ds-hex-dark-surface-sudoko: #90D0BD;
+$ds-hex-dark-surface-brand: #DA000D;
+$ds-hex-dark-border-primary: #3B3B3B;
+$ds-hex-dark-border-primary-02: #ffffff66;
+$ds-hex-dark-border-primary-03: #EDEDED;
 $ds-hex-dark-border-secondary: #141414;
-$ds-hex-dark-border-business: #3a8352;
-$ds-hex-dark-border-critical: #fd2330;
-$ds-hex-dark-border-focus: #fd2330;
+$ds-hex-dark-border-business: #3A8352;
+$ds-hex-dark-border-critical: #FD2330;
+$ds-hex-dark-border-focus: #FD2330;
 $ds-hex-dark-border-focus-02: #ffffff;
-$ds-hex-dark-border-focus-03: #fd2330;
-$ds-hex-dark-border-focus-04: #3a8352;
-$ds-hex-dark-border-brand: #fd2330;
-$ds-hex-dark-border-culture: #4293d7;
+$ds-hex-dark-border-focus-03: #FD2330;
+$ds-hex-dark-border-focus-04: #3A8352;
+$ds-hex-dark-border-brand: #DA000D;
 $ds-hex-dark-background-primary: #141414;
 $ds-hex-dark-gradient-content-fade-left: linear-gradient(90deg, #05050500 0%, #050505 100%);
 $ds-hex-dark-gradient-content-fade-right: linear-gradient(-90deg, #05050500 0%, #050505 100%);
 $ds-hex-dark-gradient-content-fade-up: linear-gradient(180deg, #05050500 0%, #050505 100%);
 $ds-hex-dark-gradient-content-fade-up-down: linear-gradient(0deg, #05050500 0%, #050505 100%);
 $ds-hex-dark-gradient-content-fade-down: linear-gradient(0deg, #05050500 0%, #050505 100%);
-$ds-hex-dark-static-red-100: #fad4d4;
+$ds-hex-dark-static-red-100: #FAD4D4;
 $ds-hex-dark-static-black: #141414;
-$ds-hex-dark-static-transparent-black: rgba(20, 20, 20, 0.6);
+$ds-hex-dark-static-transparent-black: #14141499;
 $ds-hex-dark-static-white: #ffffff;
-$ds-hex-dark-static-transparent-white: rgba(255, 255, 255, 0.5);
-$ds-hex-dark-static-green-100: #cee4d6;
-$ds-hex-dark-static-red-300: #ef7171;
-$ds-hex-dark-static-transparent-white-10: rgba(255, 255, 255, 0.13);
-$ds-hex-dark-static-kultur: #568cbb;
-$ds-hex-dark-static-economy: #60bca1;
-$ds-hex-dark-static-sport: #f58d2d;
-$ds-hex-dark-static-neutral-200: #e0e0e0;
-$ds-hex-dark-static-sthlm: #ff589b;
-$ds-hex-dark-static-ad-yellow: #ffeac2;
-$ds-hex-dark-static-neutral-100: #ededed;
-$ds-hex-dark-static-neutral-500: #9e9e9e;
-$ds-hex-dark-static-red-500: #da000d;
-$ds-hex-dark-static-yellow: #ffe600;
-$ds-hex-dark-static-red-200: #f6acad;
-$ds-hex-dark-static-red-0: #fce8e8;
+$ds-hex-dark-static-transparent-white: #ffffff80;
+$ds-hex-dark-static-green-100: #CEE4D6;
+$ds-hex-dark-static-red-300: #EF7171;
+$ds-hex-dark-static-transparent-white-10: #ffffff21;
+$ds-hex-dark-static-kultur: #568CBB;
+$ds-hex-dark-static-economy: #60BCA1;
+$ds-hex-dark-static-sport: #F58D2D;
+$ds-hex-dark-static-neutral-200: #E0E0E0;
+$ds-hex-dark-static-sthlm: #FF589B;
+$ds-hex-dark-static-ad-yellow: #FFEAC2;
+$ds-hex-dark-static-neutral-100: #EDEDED;
+$ds-hex-dark-static-neutral-500: #9E9E9E;
+$ds-hex-dark-static-red-500: #DA000D;
+$ds-hex-dark-static-yellow: #FFE600;
+$ds-hex-dark-static-red-200: #F6ACAD;
+$ds-hex-dark-static-red-0: #FCE8E8;

package/foundations/variables/colorsDnLightTokens.scss

@@ -1,86 +1,82 @@
 $ds-hex-text-primary: #050505;
 $ds-hex-text-primary-02: #666666;
 $ds-hex-text-secondary: #ffffff;
-$ds-hex-text-critical: #da000d;
+$ds-hex-text-critical: #DA000D;
 $ds-hex-text-disabled: #666666;
 $ds-hex-text-on-brand: #ffffff;
 $ds-hex-text-on-business: #ffffff;
 $ds-hex-text-on-critical: #ffffff;
 $ds-hex-text-on-success: #ffffff;
-$ds-hex-text-brand: #da000d;
-$ds-hex-text-body-link: #4373ce;
-$ds-hex-text-body-link-visited: #4373ce;
-$ds-hex-text-positive: #3a8352;
-$ds-hex-text-culture: #227ac3;
+$ds-hex-text-brand: #DA000D;
+$ds-hex-text-body-link: #4373CE;
+$ds-hex-text-body-link-visited: #4373CE;
+$ds-hex-text-positive: #3A8352;
 $ds-hex-icon-primary: #050505;
 $ds-hex-icon-primary-02: #666666;
 $ds-hex-icon-secondary: #ffffff;
-$ds-hex-icon-critical: #da000d;
+$ds-hex-icon-critical: #DA000D;
 $ds-hex-icon-disabled: #666666;
 $ds-hex-icon-on-brand: #ffffff;
 $ds-hex-icon-on-business: #ffffff;
-$ds-hex-icon-brand: #da000d;
+$ds-hex-icon-brand: #DA000D;
 $ds-hex-icon-on-critical: #ffffff;
 $ds-hex-icon-on-success: #ffffff;
-$ds-hex-icon-culture: #227ac3;
-$ds-hex-component-brand: #da000d;
-$ds-hex-component-business: #3a8352;
+$ds-hex-component-brand: #DA000D;
+$ds-hex-component-business: #3A8352;
 $ds-hex-component-primary: #141414;
-$ds-hex-component-primary-overlay: rgba(8, 8, 8, 0.13);
-$ds-hex-component-primary-overlay-02: rgba(8, 8, 8, 0.2);
+$ds-hex-component-primary-overlay: #08080821;
+$ds-hex-component-primary-overlay-02: #08080833;
 $ds-hex-component-secondary: #ffffff;
-$ds-hex-component-secondary-overlay: rgba(255, 255, 255, 0.13);
-$ds-hex-component-secondary-overlay-02: rgba(255, 255, 255, 0.2);
-$ds-hex-component-critical: #ea3e3f;
-$ds-hex-component-critical-overlay: #a51d24;
+$ds-hex-component-secondary-overlay: #ffffff21;
+$ds-hex-component-secondary-overlay-02: #ffffff33;
+$ds-hex-component-critical: #EA3E3F;
+$ds-hex-component-critical-overlay: #A51D24;
 $ds-hex-component-static-white: #ffffff;
-$ds-hex-component-positive: #3a8352;
-$ds-hex-component-primary-02: #cfcfcf;
-$ds-hex-surface-below: #f2f2f2;
-$ds-hex-surface-native-article: #ededed;
+$ds-hex-component-positive: #3A8352;
+$ds-hex-component-primary-02: #CFCFCF;
+$ds-hex-surface-below: #EDEDED;
+$ds-hex-surface-native-article: #EDEDED;
 $ds-hex-surface-background: #ffffff;
-$ds-hex-surface-raised: #ededed;
+$ds-hex-surface-raised: #EDEDED;
 $ds-hex-surface-elevated: #ffffff;
-$ds-hex-surface-overlay: rgba(5, 5, 5, 0.5);
-$ds-hex-surface-quiz: #ea3e3f;
-$ds-hex-surface-korsord: #8bb6e8;
-$ds-hex-surface-sudoko: #90d0bd;
-$ds-hex-surface-brand: #da000d;
+$ds-hex-surface-overlay: #05050580;
+$ds-hex-surface-quiz: #EA3E3F;
+$ds-hex-surface-korsord: #8BB6E8;
+$ds-hex-surface-sudoko: #90D0BD;
+$ds-hex-surface-brand: #DA000D;
 $ds-hex-surface-inverted: #141414;
-$ds-hex-surface-breaking: #300407;
-$ds-hex-border-primary: rgba(5, 5, 5, 0.13);
-$ds-hex-border-primary-02: rgba(8, 8, 8, 0.4);
+$ds-hex-border-primary: #08080821;
+$ds-hex-border-primary-02: #08080866;
 $ds-hex-border-primary-03: #050505;
 $ds-hex-border-secondary: #ffffff;
-$ds-hex-border-business: #3a8352;
-$ds-hex-border-critical: #da000d;
-$ds-hex-border-focus: #da000d;
+$ds-hex-border-business: #3A8352;
+$ds-hex-border-critical: #DA000D;
+$ds-hex-border-focus: #DA000D;
 $ds-hex-border-focus-02: #141414;
-$ds-hex-border-focus-03: #da000d;
-$ds-hex-border-focus-04: #3a8352;
-$ds-hex-border-brand: #da000d;
-$ds-hex-border-culture: #227ac3;
+$ds-hex-border-focus-03: #DA000D;
+$ds-hex-border-focus-04: #3A8352;
+$ds-hex-border-brand: #DA000D;
 $ds-hex-background-primary: #ffffff;
-$ds-hex-static-red-100: #fad4d4;
+$ds-hex-static-red-100: #FAD4D4;
 $ds-hex-static-black: #141414;
-$ds-hex-static-transparent-black: rgba(20, 20, 20, 0.6);
+$ds-hex-static-transparent-black: #14141499;
 $ds-hex-static-white: #ffffff;
-$ds-hex-static-transparent-white: rgba(255, 255, 255, 0.5);
-$ds-hex-static-green-100: #cee4d6;
-$ds-hex-static-red-300: #ef7171;
-$ds-hex-static-transparent-white-10: rgba(255, 255, 255, 0.13);
-$ds-hex-static-kultur: #568cbb;
-$ds-hex-static-economy: #60bca1;
-$ds-hex-static-sport: #f58d2d;
-$ds-hex-static-neutral-200: #e0e0e0;
-$ds-hex-static-sthlm: #ff589b;
-$ds-hex-static-ad-yellow: #ffeac2;
-$ds-hex-static-neutral-100: #ededed;
-$ds-hex-static-neutral-500: #9e9e9e;
-$ds-hex-static-red-500: #da000d;
-$ds-hex-static-yellow: #ffe600;
-$ds-hex-static-red-200: #f6acad;
-$ds-hex-static-red-0: #fce8e8;
+$ds-hex-static-transparent-white: #ffffff80;
+$ds-hex-static-green-100: #CEE4D6;
+$ds-hex-static-red-300: #EF7171;
+$ds-hex-static-transparent-white-10: #ffffff21;
+$ds-hex-static-kultur: #568CBB;
+$ds-hex-static-economy: #60BCA1;
+$ds-hex-static-sport: #F58D2D;
+$ds-hex-static-neutral-200: #E0E0E0;
+$ds-hex-static-sthlm: #FF589B;
+$ds-hex-static-ad-yellow: #FFEAC2;
+$ds-hex-static-neutral-100: #EDEDED;
+$ds-hex-static-neutral-500: #9E9E9E;
+$ds-hex-static-red-500: #DA000D;
+$ds-hex-static-yellow: #FFE600;
+$ds-hex-static-red-200: #F6ACAD;
+$ds-hex-static-red-0: #FCE8E8;
 $ds-hex-gradient-content-fade-left: linear-gradient(90deg, #ffffff00 0%, #ffffff 100%);
 $ds-hex-gradient-content-fade-right: linear-gradient(-90deg, #ffffff00 0%, #ffffff 100%);
 $ds-hex-gradient-content-fade-up: linear-gradient(180deg, #ffffff00 0%, #ffffff 100%);

package/foundations/variables/metrics.scss

@@ -1,8 +1,7 @@
 $metrics: (
   border-radius: (
     x1: 2,
-    x2: 4,
-    lg: 8
+    x2: 4
   ),
   border-width: (
     x1: 1,

package/foundations/variables/typographyFontWeight.scss

@@ -2,4 +2,3 @@ $ds-fontweight-regular: Regular;
 $ds-fontweight-medium: Medium;
 $ds-fontweight-semibold: SemiBold;
 $ds-fontweight-bold: Bold;
-$ds-fontweight-extrabold: ExtraBold;

package/foundations/variables/typographyTokensList.scss

@@ -15,7 +15,6 @@ $ds-typography-detaildirekt-header: 'detaildirekt-header';
 $ds-typography-detailteaser-standard-compact: 'detailteaser-standard-compact';
 $ds-typography-detailteaser-standard-compact-opinion: 'detailteaser-standard-compact-opinion';
 $ds-typography-detailteaser-large: 'detailteaser-large';
-$ds-typography-detailteaser-breaking: 'detailteaser-breaking';
 $ds-typography-detailteaser-large-opinion: 'detailteaser-large-opinion';
 $ds-typography-detailteaser-large-storRubrik: 'detailteaser-large-storRubrik';
 $ds-typography-detailteaser-standard: 'detailteaser-standard';

package/foundations/variables/typographyTokensScreenExtraLarge.scss

@@ -54,22 +54,15 @@ $typographyTokensScreenExtraLarge: (
     fontFamily: "DN Serif Display",
     fontWeight: Bold,
     lineHeight: 1.1,
-    fontSize: 48,
-    letterSpacing: 0
-  ),
-  detailteaser-breaking: (
-    fontFamily: "DN Serif Display",
-    fontWeight: ExtraBold,
-    lineHeight: 1.1,
-    fontSize: 64,
+    fontSize: 56,
     letterSpacing: 0
   ),
   detailteaser-standard: (
     fontFamily: "DN Serif Headline",
+    fontSize: 36,
     lineHeight: 1.1,
     letterSpacing: 0,
-    fontWeight: Bold,
-    fontSize: 28
+    fontWeight: Bold
   ),
   detailteaser-standard-compact: (
     fontFamily: "DN Serif Headline",
@@ -81,7 +74,7 @@ $typographyTokensScreenExtraLarge: (
   detailteaser-large-compact: (
     fontFamily: "DN Serif Display",
     fontWeight: Bold,
-    fontSize: 36,
+    fontSize: 40,
     lineHeight: 1.1,
     letterSpacing: 0
   ),

package/foundations/variables/typographyTokensScreenLarge.scss

@@ -93,13 +93,6 @@ $typographyTokensScreenLarge: (
     fontSize: 40,
     letterSpacing: 0
   ),
-  detailteaser-breaking: (
-    fontFamily: "DN Serif Display",
-    fontWeight: ExtraBold,
-    lineHeight: 1.1,
-    fontSize: 64,
-    letterSpacing: 0
-  ),
   detailteaser-large-opinion: (
     fontFamily: "DN Serif Display",
     fontWeight: Regular,
@@ -117,10 +110,10 @@ $typographyTokensScreenLarge: (
   ),
   detailteaser-standard: (
     fontFamily: "DN Serif Headline",
+    fontSize: 26,
     lineHeight: 1.1,
     letterSpacing: 0,
-    fontWeight: Bold,
-    fontSize: 28
+    fontWeight: Bold
   ),
   detailteaser-standard-opinion: (
     fontFamily: "DN Serif Headline",
@@ -140,7 +133,7 @@ $typographyTokensScreenLarge: (
   detailteaser-large-compact: (
     fontFamily: "DN Serif Display",
     fontWeight: Bold,
-    fontSize: 32,
+    fontSize: 40,
     lineHeight: 1.1,
     letterSpacing: 0
   ),

package/foundations/variables/typographyTokensScreenSmall.scss

@@ -122,13 +122,6 @@ $typographyTokensScreenSmall: (
     fontSize: 26,
     letterSpacing: 0
   ),
-  detailteaser-breaking: (
-    fontFamily: "DN Serif Display",
-    fontWeight: ExtraBold,
-    lineHeight: 1.1,
-    fontSize: 36,
-    letterSpacing: 0
-  ),
   detailteaser-large-opinion: (
     fontFamily: "DN Serif Headline",
     fontWeight: Regular,
@@ -146,10 +139,10 @@ $typographyTokensScreenSmall: (
   ),
   detailteaser-standard: (
     fontFamily: "DN Serif Headline",
+    fontSize: 20,
     lineHeight: 1.2,
     letterSpacing: 0,
-    fontWeight: Bold,
-    fontSize: 20
+    fontWeight: Bold
   ),
   detailteaser-standard-opinion: (
     fontFamily: "DN Serif Headline",
@@ -163,14 +156,14 @@ $typographyTokensScreenSmall: (
     fontFamily: "DN Serif Text",
     fontWeight: Bold,
     lineHeight: 1.2,
-    fontSize: 18,
+    fontSize: 17,
     letterSpacing: 0
   ),
   detailteaser-large-compact: (
     fontFamily: "DN Serif Headline",
     fontWeight: Bold,
-    fontSize: 20,
-    lineHeight: 1.2,
+    fontSize: 26,
+    lineHeight: 1.1,
     letterSpacing: 0
   ),
   detailteaser-large-compact-opinion: (
@@ -212,7 +205,7 @@ $typographyTokensScreenSmall: (
   detailteaser-tipsa: (
     fontFamily: "DN Serif Text",
     fontWeight: Bold,
-    fontSize: 18,
+    fontSize: 17,
     lineHeight: 1.2,
     letterSpacing: 0
   ),

package/index.d.ts

@@ -0,0 +1,4 @@
+declare module '\*.svg' {
+  const filePathString: string
+  export default filePathString
+}

package/package.json

@@ -1,10 +1,8 @@
 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "21.2.1-beta.0",
+  "version": "22.0.0",
   "description": "DN design system for web.",
-  "main": "index.tsx",
   "type": "module",
-  "source": "index.tsx",
   "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",
   "repository": {
     "type": "git",
@@ -17,14 +15,7 @@
     "url": "https://github.com/BonnierNews/dn-design-system/issues"
   },
   "exports": {
-    "./preact": {
-      "import": "./preact/components.esm.js",
-      "require": "./preact/components.cjs"
-    },
-    "./react": {
-      "import": "./react/components.esm.js",
-      "require": "./react/components.cjs"
-    },
+    "./preact/*": "./preact/*",
     "./assets/*.tsx": "./assets/*.tsx",
     "./assets/*.njk": "./assets/*.njk",
     "./assets/*.scss": "./assets/*.scss",
@@ -34,22 +25,15 @@
     "./introduction/*.md": "./introduction/*.md",
     "./foundations/*": "./foundations/*",
     "./tokens/*.json": "./tokens/*.json",
+    "./types-lib/*.ts": "./types-lib/*.ts",
     "./package.json": "./package.json"
   },
   "peerDependencies": {
-    "preact": "^10.24.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "preact": "^10.24.0"
   },
   "peerDependenciesMeta": {
     "preact": {
       "optional": true
-    },
-    "react": {
-      "optional": true
-    },
-    "react-dom": {
-      "optional": true
     }
   },
   "devDependencies": {
@@ -60,8 +44,6 @@
     "conventional-changelog-conventionalcommits": "^6.1.0",
     "postcss": "8.4.31",
     "preact": "^10.24.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
     "release-it": "^17.0.0",
     "stylelint": "^15.11.0",
     "stylelint-config-recommended-scss": "^13.1.0",

package/preact/components/divider/divider.js

@@ -0,0 +1,21 @@
+// ../src/helpers/formatClassString.ts
+var formatClassString = (classesArray) => {
+  return classesArray.filter((x) => !!x).join(" ");
+};
+
+// ../src/components/divider/divider.tsx
+import { jsx } from "preact/jsx-runtime";
+var Divider = ({ variant = "soft", classNames, attributes }) => {
+  const classes = formatClassString([
+    "ds-divider",
+    `ds-divider--${variant}`,
+    classNames
+  ]);
+  return /* @__PURE__ */ jsx("div", { className: classes, ...attributes, children: /* @__PURE__ */ jsx("hr", {}) });
+};
+var divider_default = Divider;
+export {
+  Divider,
+  divider_default as default
+};
+//# sourceMappingURL=divider.js.map

package/preact/components/divider/divider.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../helpers/formatClassString.ts", "../../../components/divider/divider.tsx"],
+  "sourcesContent": ["export const formatClassString = (classesArray: (string|undefined|false)[]): string => {\n  return classesArray.filter(x => !!x).join(' ');\n}\n", "import { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\n\nexport interface DividerProps {\n  variant?: 'soft' | 'medium' | 'hard';\n  classNames?: string;\n  attributes?: object;\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/divider](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/divider)\n * - Storybook: [Divider](https://designsystem.dn.se/?path=/docs/basic-divider--docs)\n *\n * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:\n * `@use '@bonniernews/dn-design-system-web/components/divider/divider.scss'`\n */\nexport const Divider = ({ variant = 'soft', classNames, attributes }: DividerProps) => {\n  const classes = formatClassString([\n    'ds-divider',\n    `ds-divider--${variant}`,\n    classNames\n  ])\n\n  return (\n    <div className={classes} {...attributes}><hr /></div>\n  );\n};\n\nexport default Divider;\n"],
+  "mappings": ";AAAO,IAAM,oBAAoB,CAAC,iBAAqD;AACrF,SAAO,aAAa,OAAO,OAAK,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG;AAC/C;;;ACqB6C;AARtC,IAAM,UAAU,CAAC,EAAE,UAAU,QAAQ,YAAY,WAAW,MAAoB;AACrF,QAAM,UAAU,kBAAkB;AAAA,IAChC;AAAA,IACA,eAAe,OAAO;AAAA,IACtB;AAAA,EACF,CAAC;AAED,SACE,oBAAC,SAAI,WAAW,SAAU,GAAG,YAAY,8BAAC,QAAG,GAAE;AAEnD;AAEA,IAAO,kBAAQ;",
+  "names": []
+}

package/preact/components/footer/footer.d.ts

@@ -0,0 +1,33 @@
+interface FooterLink {
+    href: string;
+    text: string;
+    classNames?: string;
+    attributes?: object;
+}
+interface FooterLinkList {
+    attributes?: object;
+    title?: string;
+    links: FooterLink[];
+}
+export interface FooterProps {
+    editorsHtml?: string;
+    copyright?: string;
+    linkGroups?: FooterLinkList[];
+    rudolf: {
+        imgUrl: string;
+        text: string;
+    };
+    channels?: FooterLink[];
+    classNames?: string;
+    attributes?: object;
+    forcePx?: boolean;
+}
+/**
+ * - GitHub: [BonnierNews/dn-design-system/../web/src/components/footer](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/footer)
+ * - Storybook: [footer](https://designsystem.dn.se/?path=/docs/page-footer--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/footer/footer.scss'`
+ */
+export declare const Footer: ({ editorsHtml, copyright, linkGroups, rudolf, channels, classNames, attributes, }: FooterProps) => import("preact").JSX.Element;
+export default Footer;