@kvdbil/components 14.3.8 → 14.3.17

package/README.md

@@ -47,4 +47,4 @@ When adding new icons:
 
 ## Outdated dependencies
 
-- @testing-library/react, @types/react - Can't upgrade until React is in version 18
+- typescript - @typescript-eslint/typescript-estree does not support any Typescript version above 5.5.4

package/cjs/components/Button/index.js

@@ -19,7 +19,10 @@
     ${"large"===e&&a.largeSizeStyles()}
   `}
   background-color: transparent;
-  transition: color 0.3s ease, background-color 0.3s ease, border 0.3s ease,
+  transition:
+    color 0.3s ease,
+    background-color 0.3s ease,
+    border 0.3s ease,
     filter 0.3s;
   ${({variant:e="solid",color:r="primary",colorShade:s="main",disabled:l,theme:t})=>i.css`
     ${l?a.disabledColorStyles(t,e):a.colorStyles[e](t,r,s)}

package/cjs/components/Chip/index.js

@@ -15,7 +15,10 @@
   border-color: ${i.getBorderColor};
   border-radius: 1.293rem;
   padding: ${({size:e,isDeletable:r})=>r?"0 0.5rem 0 1rem":n[e]};
-  transition: color 0.3s ease, background-color 0.3s ease, border 0.3s ease;
+  transition:
+    color 0.3s ease,
+    background-color 0.3s ease,
+    border 0.3s ease;
 
   ${e=>!e.isDisabled&&e.isClickable&&` &:hover {\n    border-color: ${i.getHoverBorderColor(e)};\n    background-color: ${i.getHoverBackgroundColor(e)};\n    color: ${i.getHoverColor(e)};\n  } &:active {\n    background-color: ${i.getActiveBackgroundColor(e)};\n    border-color: ${i.getActiveBorderColor(e)};\n    color: ${i.getActiveColor(e)};\n  }`}
 `,s=l.default.span`

package/cjs/components/Modal/index.js

@@ -36,7 +36,9 @@
   padding: 1rem;
   background-color: white;
   border-radius: 3px;
-  box-shadow: 0px 24px 38px rgba(0, 0, 0, 0.1), 0px 9px 46px rgba(0, 0, 0, 0.09),
+  box-shadow:
+    0px 24px 38px rgba(0, 0, 0, 0.1),
+    0px 9px 46px rgba(0, 0, 0, 0.09),
     0px 11px 15px rgba(0, 0, 0, 0.15);
 
   overflow-y: hidden;

package/cjs/components/RadioButton/index.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("styled-components"),i=require("../../shared/helpers.js"),s=require("../../theme.js"),o=require("../IconButton.js"),l=require("../../typography/BodyText/index.js");require("../../shared/media-queries.js");var a,t=(a=r)&&a.__esModule?a:{default:a};const d={regular:r.css`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("styled-components"),i=require("../../shared/helpers.js"),s=require("../../theme.js"),o=require("../../typography/BodyText/index.js");require("../../shared/media-queries.js");var a,l=(a=r)&&a.__esModule?a:{default:a};const t={regular:r.css`
   .circle {
     &--outer {
       height: 24px;
@@ -24,7 +24,7 @@
       transform: scale(0.6);
     }
   }
-`},c=r.css`
+`},d=r.css`
   cursor: default;
 
   .circle {
@@ -36,27 +36,27 @@
       border: 2px solid ${s.default.colors.gray.light1};
     }
   }
-`,n=r.css`
+`,c=r.css`
   .circle {
     &--inner {
       opacity: 1;
       background-color: ${s.default.colors.gray.light1};
     }
   }
-`,u=t.default.div`
+`,n=l.default.div`
   display: flex;
   align-items: center;
   box-sizing: border-box;
-`,h=t.default.span`
+`,u=l.default.span`
   cursor: pointer;
   display: flex;
   position: relative;
   align-items: center;
   justify-content: center;
 
-  ${e=>d[e.size]};
+  ${e=>t[e.size]};
 
-  ${e=>!e.isDisabled&&e.isChecked&&(e=>r.css`
+  ${e=>!e.isDisabled&&e.isChecked&&((e,i)=>r.css`
   .circle {
     &--inner {
       opacity: 1;
@@ -64,23 +64,29 @@
     }
 
     &--outer {
-      border: 2px solid ${s.default.colors[e].main};
+      border: 2px solid
+        ${i?s.default.colors.error.dark:s.default.colors[e].main};
     }
   }
-`)(e.color)};
-  ${e=>e.isDisabled&&c};
+`)(e.color,e.$hasError)};
+  ${e=>e.isDisabled&&d};
 
-  ${e=>e.isChecked&&e.isDisabled&&n};
-`,b=t.default.input`
+  ${e=>e.isChecked&&e.isDisabled&&c};
+`,h=l.default.input`
   position: fixed;
   opacity: 0;
-`,p=t.default.span`
+  margin: 0;
+  ${e=>!e.$isDisabled&&"cursor: pointer;"}
+  z-index: 1;
+  ${e=>t[e.$size]};
+`,b=l.default.span`
   display: flex;
   box-sizing: border-box;
   border-radius: 50%;
 
-  border: 2px solid ${s.default.colors.gray.light1};
-`,x=t.default.span`
+  border: 2px solid
+    ${e=>e.$hasError?s.default.colors.error.dark:s.default.colors.gray.light1};
+`,p=l.default.span`
   box-sizing: border-box;
   opacity: 0;
   margin: auto;
@@ -90,9 +96,9 @@
   position: absolute;
   top: 0;
   left: 0;
-`,g=t.default(l.BodyText)`
+`,x=l.default(o.BodyText)`
   cursor: ${({isDisabled:e})=>e?"default":"pointer"};
   user-select: none;
   color: ${({theme:e,isDisabled:r})=>r?e.colors.text.disabled:e.colors.text.dark};
   margin-left: 0.5rem;
-`,f=({name:r=i.generateNameHash("radio-button"),size:s="regular",checked:l=!1,isDisabled:a=!1,color:t="secondary",onChange:d,label:c,...n})=>e.jsxs(u,{children:[e.jsxs(o.default,{onClick:d,isActive:l,isDisabled:a,color:t,children:[e.jsx(b,{"data-validate":"checked",checked:l,type:"radio",name:r,id:r,disabled:a,"aria-label":r,"aria-checked":l,...n}),e.jsx(h,{size:s,color:t,isChecked:l,isDisabled:a,children:e.jsx(p,{className:"circle circle--outer",children:e.jsx(x,{className:"circle circle--inner"})})})]}),c&&e.jsx(g,{as:"label",htmlFor:r,isDisabled:a,children:c})]});exports.RadioButton=f,exports.default=f;
+`,g=({name:r=i.generateNameHash("radio-button"),size:s="regular",checked:o=!1,isDisabled:a=!1,color:l="secondary",label:t,hasError:d,...c})=>e.jsxs(n,{children:[e.jsxs(u,{size:s,color:l,isChecked:o,isDisabled:a,$hasError:d,children:[e.jsx(h,{"data-validate":"checked",checked:o,type:"radio",name:r,id:r,disabled:a,"aria-label":r,"aria-checked":o,className:"circle circle--outer",$size:s,$isDisabled:a,...c}),e.jsx(b,{className:"circle circle--outer",$hasError:d,children:e.jsx(p,{className:"circle circle--inner"})})]}),t&&e.jsx(x,{as:"label",htmlFor:r,isDisabled:a,children:t})]});exports.RadioButton=g,exports.default=g;

package/cjs/components/SpinnerThin/index.js

@@ -6,7 +6,9 @@
   ${({size:e})=>e&&`\n      width: ${e}rem;\n      height: ${e}rem;\n      margin-left: -${e/2}rem;\n  `}
 
   border-width: 1px;
-  transition: all 0.02s ease-in-out !important, width transition 0s !important;
+  transition:
+    all 0.02s ease-in-out !important,
+    width transition 0s !important;
 
   ${({isLoading:e,theme:i})=>!e&&`\n        animation: none;\n        border: 1px solid ${i.colors.gray.dark3};\n    `}
 `,l=o.default.div`

package/cjs/components/Tabs/Tab.js

@@ -5,7 +5,9 @@
     margin-bottom: -3px;
     padding: 0.875rem 1.375rem;
     border-bottom: ${({theme:e,isActive:r,activeColor:t})=>r?`3px solid ${e.colors[t].main}`:"3px solid transparent"};
-    transition: color 0.3s ease, border 0.3s ease;
+    transition:
+      color 0.3s ease,
+      border 0.3s ease;
 
     :focus-visible {
       ${({theme:e,isActive:r,activeColor:t})=>!r&&`background-color: ${o.hexToRGB(e.colors[t].main,.1)};\n      `}

package/esm/components/Button/index.js

@@ -19,7 +19,10 @@ import{jsx as s,jsxs as I,Fragment as W}from"react/jsx-runtime";import g,{forwar
     ${e==="large"&&R()}
   `}
   background-color: transparent;
-  transition: color 0.3s ease, background-color 0.3s ease, border 0.3s ease,
+  transition:
+    color 0.3s ease,
+    background-color 0.3s ease,
+    border 0.3s ease,
     filter 0.3s;
   ${({variant:e="solid",color:i="primary",colorShade:l="main",disabled:n,theme:a})=>u`
     ${n?V(a,e):C[e](a,i,l)}

package/esm/components/Button/styles.js

@@ -1,4 +1,4 @@
-import{ButtonSmallTextStyle as c,ButtonRegularTextStyle as e,ButtonLargeTextStyle as a}from"../../typography/ButtonText/index.js";import"react/jsx-runtime";import"styled-components";const n={smaller:c,small:e,regular:e,large:a},d=()=>`
+import{ButtonLargeTextStyle as c,ButtonRegularTextStyle as e,ButtonSmallTextStyle as a}from"../../typography/ButtonText/index.js";import"react/jsx-runtime";import"styled-components";const n={smaller:a,small:e,regular:e,large:c},d=()=>`
   padding: 0.25rem 0.75rem;
   min-height: 2.5rem;
 `,g=()=>`

package/esm/components/Chip/index.js

@@ -15,7 +15,10 @@ import{jsx as i,jsxs as v}from"react/jsx-runtime";import t from"styled-component
   border-color: ${k};
   border-radius: 1.293rem;
   padding: ${({size:e,isDeletable:l})=>l?"0 0.5rem 0 1rem":A[e]};
-  transition: color 0.3s ease, background-color 0.3s ease, border 0.3s ease;
+  transition:
+    color 0.3s ease,
+    background-color 0.3s ease,
+    border 0.3s ease;
 
   ${e=>!e.isDisabled&&e.isClickable&&` &:hover {
     border-color: ${B(e)};

package/esm/components/DayPicker/index.js

@@ -1,5 +1,5 @@
-import{jsx as t}from"react/jsx-runtime";import a from"react-day-picker";import c from"styled-components";import r from"../../theme.js";import n from"./DayPickerNavBar.js";import{MONTHS as p,WEEKDAYS_LONG as s,WEEKDAYS_SHORT as f,FIRST_DAY_OF_THE_WEEK as y}from"./localeUtils.js";import d from"./style.js";import"../Icons/Arrow.js";import"../../typography/BodyText/index.js";import"../../shared/media-queries.js";const E=c.div`
+import{jsx as t}from"react/jsx-runtime";import a from"react-day-picker";import c from"styled-components";import r from"../../theme.js";import n from"./DayPickerNavBar.js";import{FIRST_DAY_OF_THE_WEEK as p,WEEKDAYS_SHORT as s,WEEKDAYS_LONG as f,MONTHS as y}from"./localeUtils.js";import d from"./style.js";import"../Icons/Arrow.js";import"../../typography/BodyText/index.js";import"../../shared/media-queries.js";const E=c.div`
   ${d}
 
   font-family: ${({theme:o})=>o.typography.fontAlternativeFamily};
-`,S=o=>({selected:{color:r.colors.text.light,background:r.colors[o].main},today:{color:r.colors[o].main}}),e=({locale:o="sv",color:m="primary",...i})=>t(E,{color:m,children:t(a,{...i,locale:o,months:p[o],weekdaysLong:s[o],weekdaysShort:f[o],firstDayOfWeek:y[o],navbarElement:l=>t(n,{...l,locale:o}),captionElement:t("div",{}),modifiersStyles:S(m)})});export{e as DayPicker,e as default};
+`,S=o=>({selected:{color:r.colors.text.light,background:r.colors[o].main},today:{color:r.colors[o].main}}),e=({locale:o="sv",color:m="primary",...i})=>t(E,{color:m,children:t(a,{...i,locale:o,months:y[o],weekdaysLong:f[o],weekdaysShort:s[o],firstDayOfWeek:p[o],navbarElement:l=>t(n,{...l,locale:o}),captionElement:t("div",{}),modifiersStyles:S(m)})});export{e as DayPicker,e as default};

package/esm/components/Modal/index.js

@@ -36,7 +36,9 @@ import{jsx as t,jsxs as e,Fragment as x}from"react/jsx-runtime";import{useEffect
   padding: 1rem;
   background-color: white;
   border-radius: 3px;
-  box-shadow: 0px 24px 38px rgba(0, 0, 0, 0.1), 0px 9px 46px rgba(0, 0, 0, 0.09),
+  box-shadow:
+    0px 24px 38px rgba(0, 0, 0, 0.1),
+    0px 9px 46px rgba(0, 0, 0, 0.09),
     0px 11px 15px rgba(0, 0, 0, 0.15);
 
   overflow-y: hidden;

package/esm/components/RadioButton/index.js

@@ -1,4 +1,4 @@
-import{jsxs as n,jsx as o}from"react/jsx-runtime";import i,{css as l}from"styled-components";import{generateNameHash as g}from"../../shared/helpers.js";import r from"../../theme.js";import m from"../IconButton.js";import{BodyText as u}from"../../typography/BodyText/index.js";import"../../shared/media-queries.js";const x=l`
+import{jsxs as n,jsx as l}from"react/jsx-runtime";import o,{css as s}from"styled-components";import{generateNameHash as m}from"../../shared/helpers.js";import e from"../../theme.js";import{BodyText as u}from"../../typography/BodyText/index.js";import"../../shared/media-queries.js";const x=s`
   .circle {
     &--outer {
       height: 24px;
@@ -11,7 +11,7 @@ import{jsxs as n,jsx as o}from"react/jsx-runtime";import i,{css as l}from"styled
       transform: scale(0.6);
     }
   }
-`,f=l`
+`,$=s`
   .circle {
     &--outer {
       height: 32px;
@@ -24,75 +24,81 @@ import{jsxs as n,jsx as o}from"react/jsx-runtime";import i,{css as l}from"styled
       transform: scale(0.6);
     }
   }
-`,y={regular:x,large:f},$=l`
+`,h={regular:x,large:$},f=s`
   cursor: default;
 
   .circle {
     &--inner {
-      background-color: ${r.colors.gray.light1};
+      background-color: ${e.colors.gray.light1};
     }
 
     &--outer {
-      border: 2px solid ${r.colors.gray.light1};
+      border: 2px solid ${e.colors.gray.light1};
     }
   }
-`,k=l`
+`,y=s`
   .circle {
     &--inner {
       opacity: 1;
-      background-color: ${r.colors.gray.light1};
+      background-color: ${e.colors.gray.light1};
     }
   }
-`,D=e=>l`
+`,k=(r,i)=>s`
   .circle {
     &--inner {
       opacity: 1;
-      background-color: ${r.colors[e].main};
+      background-color: ${e.colors[r].main};
     }
 
     &--outer {
-      border: 2px solid ${r.colors[e].main};
+      border: 2px solid
+        ${i?e.colors.error.dark:e.colors[r].main};
     }
   }
-`,z=i.div`
+`,z=o.div`
   display: flex;
   align-items: center;
   box-sizing: border-box;
-`,C=i.span`
+`,D=o.span`
   cursor: pointer;
   display: flex;
   position: relative;
   align-items: center;
   justify-content: center;
 
-  ${e=>y[e.size]};
+  ${r=>h[r.size]};
 
-  ${e=>!e.isDisabled&&e.isChecked&&D(e.color)};
-  ${e=>e.isDisabled&&$};
+  ${r=>!r.isDisabled&&r.isChecked&&k(r.color,r.$hasError)};
+  ${r=>r.isDisabled&&f};
 
-  ${e=>e.isChecked&&e.isDisabled&&k};
-`,v=i.input`
+  ${r=>r.isChecked&&r.isDisabled&&y};
+`,E=o.input`
   position: fixed;
   opacity: 0;
-`,w=i.span`
+  margin: 0;
+  ${r=>!r.$isDisabled&&"cursor: pointer;"}
+  z-index: 1;
+  ${r=>h[r.$size]};
+`,w=o.span`
   display: flex;
   box-sizing: border-box;
   border-radius: 50%;
 
-  border: 2px solid ${r.colors.gray.light1};
-`,j=i.span`
+  border: 2px solid
+    ${r=>r.$hasError?e.colors.error.dark:e.colors.gray.light1};
+`,C=o.span`
   box-sizing: border-box;
   opacity: 0;
   margin: auto;
   border-radius: 50%;
-  background-color: ${r.colors.gray.light1};
+  background-color: ${e.colors.gray.light1};
 
   position: absolute;
   top: 0;
   left: 0;
-`,B=i(u)`
-  cursor: ${({isDisabled:e})=>e?"default":"pointer"};
+`,N=o(u)`
+  cursor: ${({isDisabled:r})=>r?"default":"pointer"};
   user-select: none;
-  color: ${({theme:e,isDisabled:a})=>a?e.colors.text.disabled:e.colors.text.dark};
+  color: ${({theme:r,isDisabled:i})=>i?r.colors.text.disabled:r.colors.text.dark};
   margin-left: 0.5rem;
-`,b=({name:e=g("radio-button"),size:a="regular",checked:s=!1,isDisabled:c=!1,color:t="secondary",onChange:h,label:d,...p})=>n(z,{children:[n(m,{onClick:h,isActive:s,isDisabled:c,color:t,children:[o(v,{"data-validate":"checked",checked:s,type:"radio",name:e,id:e,disabled:c,"aria-label":e,"aria-checked":s,...p}),o(C,{size:a,color:t,isChecked:s,isDisabled:c,children:o(w,{className:"circle circle--outer",children:o(j,{className:"circle circle--inner"})})})]}),d&&o(B,{as:"label",htmlFor:e,isDisabled:c,children:d})]});export{b as RadioButton,b as default};
+`,b=({name:r=m("radio-button"),size:i="regular",checked:c=!1,isDisabled:a=!1,color:p="secondary",label:t,hasError:d,...g})=>n(z,{children:[n(D,{size:i,color:p,isChecked:c,isDisabled:a,$hasError:d,children:[l(E,{"data-validate":"checked",checked:c,type:"radio",name:r,id:r,disabled:a,"aria-label":r,"aria-checked":c,className:"circle circle--outer",$size:i,$isDisabled:a,...g}),l(w,{className:"circle circle--outer",$hasError:d,children:l(C,{className:"circle circle--inner"})})]}),t&&l(N,{as:"label",htmlFor:r,isDisabled:a,children:t})]});export{b as RadioButton,b as default};

package/esm/components/SpinnerThin/index.js

@@ -10,7 +10,9 @@ import{jsxs as d,jsx as r}from"react/jsx-runtime";import o from"styled-component
   `}
 
   border-width: 1px;
-  transition: all 0.02s ease-in-out !important, width transition 0s !important;
+  transition:
+    all 0.02s ease-in-out !important,
+    width transition 0s !important;
 
   ${({isLoading:i,theme:t})=>!i&&`
         animation: none;

package/esm/components/Tabs/Tab.js

@@ -5,7 +5,9 @@ import{jsx as s}from"react/jsx-runtime";import n from"styled-components";import{
     margin-bottom: -3px;
     padding: 0.875rem 1.375rem;
     border-bottom: ${({theme:e,isActive:o,activeColor:r})=>o?`3px solid ${e.colors[r].main}`:"3px solid transparent"};
-    transition: color 0.3s ease, border 0.3s ease;
+    transition:
+      color 0.3s ease,
+      border 0.3s ease;
 
     :focus-visible {
       ${({theme:e,isActive:o,activeColor:r})=>!o&&`background-color: ${f(e.colors[r].main,.1)};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kvdbil/components",
-  "version": "14.3.8",
+  "version": "14.3.17",
   "sideEffects": false,
   "main": "cjs/index.js",
   "module": "esm/index.js",
@@ -16,15 +16,18 @@
     "dev": "yarn storybook dev -p 6006 watch-css",
     "test": "jest --silent",
     "test:watch": "cross-env DEBUG_PRINT_LIMIT=14000 jest --verbose --watchAll",
+    "test:ci": "NODE_ENV=ci yarn test --bail=true",
     "type-check": "tsc",
     "generateIcons": "svgr --icon 1em --template ./src/icons/template.js -d ./src/icons/components ./src/icons/svgs --typescript",
-    "build": "yarn run generateIcons && yarn lint && yarn test && rollup -c && yarn create-declaration",
+    "build": "yarn run generateIcons && rollup -c && yarn create-declaration",
     "build:rollup": "rollup -c && cp package.json dist/",
     "build:storybook": "storybook build",
-    "lint": "eslint --fix --ext .js,.jsx,.ts,.tsx,.mdx src",
+    "lint": "eslint --fix",
     "analyze": "rollup -c rollup.config.analyze.js",
     "create-declaration": "yarn tsc --p tsconfig.production.json --emitDeclarationOnly --noEmit false --declaration true --declarationDir dist/types",
-    "validate-code": "yarn type-check && yarn lint && yarn test &&  echo '✅ Code is valid!'"
+    "prepare": "husky",
+    "validate-code": "yarn type-check && yarn lint && yarn test &&  echo '✅ Code is valid!'",
+    "publish-package": "./npm-publish.sh"
   },
   "peerDependencies": {
     "react": ">= 17.0.0",
@@ -42,18 +45,22 @@
     "not op_mini all"
   ],
   "resolutions": {
-    "micromatch": ">=4.0.8"
+    "**/cross-spawn": "^7.0.5"
   },
   "devDependencies": {
     "@babel/core": "^7.11.6",
+    "@babel/preset-env": "^7.25.4",
+    "@babel/preset-react": "^7.24.7",
+    "@babel/preset-typescript": "^7.24.7",
     "@commitlint/cli": "^19.4.0",
     "@commitlint/config-conventional": "^19.2.2",
+    "@emotion/is-prop-valid": "^1.3.1",
     "@rollup/plugin-terser": "^0.4.4",
-    "@storybook/addon-essentials": "^7.0.0",
-    "@storybook/addon-interactions": "^7.0.0",
-    "@storybook/addon-links": "^7.0.0",
-    "@storybook/react": "^7.0.0",
-    "@storybook/react-webpack5": "^7.0.0",
+    "@storybook/addon-essentials": "^8.3.3",
+    "@storybook/addon-themes": "^8.3.3",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+    "@storybook/react": "^8.3.3",
+    "@storybook/react-webpack5": "^8.3.3",
     "@svgr/cli": "^8.0.0",
     "@team-griffin/install-self-peers": "^1.1.1",
     "@testing-library/dom": "^10.4.0",
@@ -69,35 +76,31 @@
     "@types/react-dom": "^18.3.0",
     "@types/react-transition-group": "^4.4.11",
     "@types/uuid": "^10.0.0",
-    "@typescript-eslint/eslint-plugin": "^7.0.0",
-    "@typescript-eslint/parser": "^7.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.7.0",
+    "@typescript-eslint/parser": "^8.7.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-styled-components": "^2.1.4",
     "cross-env": "^7.0.3",
-    "esbuild": "^0.23.1",
-    "eslint": "^8.0.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-import-resolver-typescript": "^2.4.0",
-    "eslint-plugin-flowtype": "^5.2.0",
-    "eslint-plugin-import": "^2.24.2",
-    "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-mdx": "^1.15.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.25.1",
-    "eslint-plugin-react-hooks": "^4.2.0",
+    "esbuild": "^0.24.0",
+    "eslint": "^9.11.1",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-mdx": "^3.1.5",
+    "eslint-plugin-react": "^7.36.1",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "globals": "^15.9.0",
     "husky": "^9.1.5",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-styled-components": "^7.2.0",
     "jest-watch-typeahead": "^2.2.2",
-    "prettier": "^2.6.2",
+    "prettier": "^3.3.3",
     "react": "^18.3.1",
     "react-collapse": "^5.0.1",
     "react-day-picker": "^7.4.8",
     "react-docgen-typescript": "^2.2.2",
     "react-dom": "^18.3.1",
     "react-is": "^18.3.1",
-    "react-select": "5.8.0",
+    "react-select": "^5.8.0",
     "react-select-event": "5.5.1",
     "react-transition-group": "^4.0.0",
     "rollup": "^4.21.2",
@@ -105,11 +108,11 @@
     "rollup-plugin-multi-input": "^1.5.0",
     "rollup-plugin-visualizer": "^5.5.2",
     "standard-version": "^9.3.1",
-    "storybook": "^7.0.0",
+    "storybook": "^8.3.2",
     "styled-components": "^6.1.13",
     "ts-jest": "^29.2.4",
     "tslib": "^2.6.3",
-    "typescript": "^5.5.4"
+    "typescript": "5.5.4"
   },
   "description": "KVDBil components library",
   "repository": {

package/package.json.tmp

@@ -0,0 +1,124 @@
+{
+  "name": "@kvdbil/components",
+  "version": "14.3.17",
+  "sideEffects": false,
+  "main": "cjs/index.js",
+  "module": "esm/index.js",
+  "types": "types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./esm/index.js",
+      "require": "./cjs/index.js"
+    }
+  },
+  "scripts": {
+    "start": "yarn dev",
+    "dev": "yarn storybook dev -p 6006 watch-css",
+    "test": "jest --silent",
+    "test:watch": "cross-env DEBUG_PRINT_LIMIT=14000 jest --verbose --watchAll",
+    "test:ci": "NODE_ENV=ci yarn test --bail=true",
+    "type-check": "tsc",
+    "generateIcons": "svgr --icon 1em --template ./src/icons/template.js -d ./src/icons/components ./src/icons/svgs --typescript",
+    "build": "yarn run generateIcons && rollup -c && yarn create-declaration",
+    "build:rollup": "rollup -c && cp package.json dist/",
+    "build:storybook": "storybook build",
+    "lint": "eslint --fix",
+    "analyze": "rollup -c rollup.config.analyze.js",
+    "create-declaration": "yarn tsc --p tsconfig.production.json --emitDeclarationOnly --noEmit false --declaration true --declarationDir dist/types",
+    "validate-code": "yarn type-check && yarn lint && yarn test &&  echo '✅ Code is valid!'",
+    "publish-package": "./npm-publish.sh"
+  },
+  "peerDependencies": {
+    "react": ">= 17.0.0",
+    "react-collapse": ">= 5.0.1",
+    "react-day-picker": ">= 7.4.8",
+    "react-dom": ">= 17.0.0",
+    "react-select": ">= 5.8.0",
+    "react-transition-group": ">= 4.0.0",
+    "styled-components": ">= 5.1.17"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ],
+  "resolutions": {
+    "**/cross-spawn": "^7.0.5"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.11.6",
+    "@babel/preset-env": "^7.25.4",
+    "@babel/preset-react": "^7.24.7",
+    "@babel/preset-typescript": "^7.24.7",
+    "@commitlint/cli": "^19.4.0",
+    "@commitlint/config-conventional": "^19.2.2",
+    "@emotion/is-prop-valid": "^1.3.1",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@storybook/addon-essentials": "^8.3.3",
+    "@storybook/addon-themes": "^8.3.3",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+    "@storybook/react": "^8.3.3",
+    "@storybook/react-webpack5": "^8.3.3",
+    "@svgr/cli": "^8.0.0",
+    "@team-griffin/install-self-peers": "^1.1.1",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/classnames": "^2.2.11",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^22.4.1",
+    "@types/react": "^18.3.8",
+    "@types/react-collapse": "^5.0.4",
+    "@types/react-dom": "^18.3.0",
+    "@types/react-transition-group": "^4.4.11",
+    "@types/uuid": "^10.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.7.0",
+    "@typescript-eslint/parser": "^8.7.0",
+    "babel-plugin-dynamic-import-node": "^2.3.3",
+    "babel-plugin-styled-components": "^2.1.4",
+    "cross-env": "^7.0.3",
+    "esbuild": "^0.24.0",
+    "eslint": "^9.11.1",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-mdx": "^3.1.5",
+    "eslint-plugin-react": "^7.36.1",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "globals": "^15.9.0",
+    "husky": "^9.1.5",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jest-styled-components": "^7.2.0",
+    "jest-watch-typeahead": "^2.2.2",
+    "prettier": "^3.3.3",
+    "react": "^18.3.1",
+    "react-collapse": "^5.0.1",
+    "react-day-picker": "^7.4.8",
+    "react-docgen-typescript": "^2.2.2",
+    "react-dom": "^18.3.1",
+    "react-is": "^18.3.1",
+    "react-select": "^5.8.0",
+    "react-select-event": "5.5.1",
+    "react-transition-group": "^4.0.0",
+    "rollup": "^4.21.2",
+    "rollup-plugin-esbuild": "^6.1.1",
+    "rollup-plugin-multi-input": "^1.5.0",
+    "rollup-plugin-visualizer": "^5.5.2",
+    "standard-version": "^9.3.1",
+    "storybook": "^8.3.2",
+    "styled-components": "^6.1.13",
+    "ts-jest": "^29.2.4",
+    "tslib": "^2.6.3",
+    "typescript": "5.5.4"
+  },
+  "description": "KVDBil components library",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@bitbucket.org/kvarndammen/kvdbil-components.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "homepage": "https://bitbucket.org/kvarndammen/kvdbil-components#readme"
+}

package/types/components/Accordion/index.d.ts

@@ -1,13 +1,9 @@
-import React from 'react';
-declare const Item: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {
-    isOpen: boolean;
-}>> & string;
-interface Item {
+interface IItem {
     title: string;
     text: string;
 }
 export interface AccordionProps {
-    items: Item[];
+    items: IItem[];
 }
 export declare const Accordion: ({ items, ...props }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
 export default Accordion;

package/types/components/ListItem/Bacon.d.ts

@@ -1,4 +1,4 @@
 declare const Bacon: ({ color }: {
-    color?: string | undefined;
+    color?: string;
 }) => import("react/jsx-runtime").JSX.Element;
 export default Bacon;

package/types/components/RadioButton/index.d.ts

@@ -1,13 +1,14 @@
-import { ReactNode } from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import { RadioButtonSize, Color } from '../../Types';
-export interface RadioButtonProps {
+type ComponentPropsWithoutSize = Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'type'>;
+export interface RadioButtonProps extends ComponentPropsWithoutSize {
     name?: string;
     color?: Color;
     size?: RadioButtonSize;
     checked?: boolean;
     isDisabled?: boolean;
-    onChange?(): void;
     label?: ReactNode;
+    hasError?: boolean;
 }
-export declare const RadioButton: ({ name, size, checked, isDisabled, color, onChange, label, ...props }: RadioButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RadioButton: ({ name, size, checked, isDisabled, color, label, hasError, ...props }: RadioButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default RadioButton;