@kvdbil/components 14.2.15 → 14.3.0

package/cjs/components/Button/styles.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var l=require("../../typography/ButtonText/index.js");require("react"),require("styled-components");const a={smaller:l.ButtonSmallTextStyle,small:l.ButtonRegularTextStyle,regular:l.ButtonRegularTextStyle,large:l.ButtonLargeTextStyle},e=(r,o)=>`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var n=require("../../typography/ButtonText/index.js");require("react"),require("styled-components");const i={smaller:n.ButtonSmallTextStyle,small:n.ButtonRegularTextStyle,regular:n.ButtonRegularTextStyle,large:n.ButtonLargeTextStyle},e=(r,o)=>`
   color: ${r.colors[o].main};
   border: 2px solid ${r.colors[o].main};
   background-color: transparent;
@@ -13,20 +13,17 @@
     color: ${r.colors[o].light};
   }
 `,t=(r,o)=>`
-  color: ${o!=="neutral"?r.colors[o].main:r.colors.neutral.light};
-  background-color: transparent;
+  color: ${r.colors[o].main};
 
-  :hover {
-    color: ${r.colors[o].dark};
-  }
+  background-color: transparent;
 
-  :active {
+  :hover, :active {
     color: ${r.colors[o].dark};
   }
-`,n=r=>`
+`,l=r=>`
   color: ${r.colors.gray.light1};
   cursor: not-allowed;
-`,i={solid:(r,o,s)=>`
+`,a={solid:(r,o,s)=>`
   color: ${r.colors.text.light};
   background-color: ${r.colors[o][s]};
 
@@ -39,11 +36,11 @@
     border-color: ${r.colors[o].light};
     filter: brightness(1.1)
   }
-`,outline:e,flat:t};exports.colorStyles=i,exports.disabledColorStyles=(r,o)=>o==="solid"?`
-    ${n(r)};
+`,outline:e,flat:t};exports.colorStyles=a,exports.disabledColorStyles=(r,o)=>o==="solid"?`
+    ${l(r)};
     background-color: ${r.colors.gray.light4};`:o==="outline"?`
-    ${n(r)};
-    border: 2px solid ${r.colors.gray.light1};`:n(r),exports.flatColorStyles=t,exports.fontSizes=a,exports.largeSizeStyles=()=>`
+    ${l(r)};
+    border: 2px solid ${r.colors.gray.light1};`:l(r),exports.flatColorStyles=t,exports.fontSizes=i,exports.largeSizeStyles=()=>`
   padding: 0.25rem 1.5rem;
   min-height: 3.75rem;
 `,exports.outlineColorStyles=e,exports.regularSizeStyles=()=>`

package/cjs/components/CheckBox/index.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var b=require("react"),t=require("styled-components"),x=require("../../icons/components/CheckmarkIcon.js"),f=require("../../shared/helpers.js"),i=require("../../theme.js"),g=require("../../typography/BodyText/index.js"),m=require("../IconButton.js");function n(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}require("../../shared/media-queries.js");var o=n(b),s=n(t);const u={regular:t.css`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var x=require("react"),o=require("styled-components"),f=require("../../icons/components/CheckmarkIcon.js"),g=require("../../shared/helpers.js"),t=require("../../theme.js"),m=require("../../typography/BodyText/index.js"),k=require("../IconButton.js");function n(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}require("../../shared/media-queries.js");var s=n(x),i=n(o);const u={regular:o.css`
   width: 24px;
   height: 24px;
 
@@ -6,7 +6,7 @@
     width: 15px;
     height: 15px;
   }
-`,large:t.css`
+`,large:o.css`
   width: 32px;
   height: 32px;
 
@@ -14,17 +14,19 @@
     width: 22px;
     height: 22px;
   }
-`},y=t.css`
+`},y=o.css`
   cursor: default;
-  border: 2px solid ${i.default.colors.gray.light2};
-`,k=t.css`
-  background: ${i.default.colors.gray.light2};
+  border: 2px solid ${t.default.colors.gray.light2};
+`,$=o.css`
+  background: ${t.default.colors.gray.light2};
   z-index: 1;
-`,$=s.default.div`
+`,v=o.css`
+  border: 2px solid ${t.default.colors.error.dark};
+`,z=i.default.div`
   display: flex;
   align-items: flex-start;
   box-sizing: border-box;
-`,v=s.default.input.attrs({type:"checkbox"})`
+`,j=i.default.input.attrs({type:"checkbox"})`
   position: absolute;
   appearance: none;
   width: 100%;
@@ -38,9 +40,9 @@
 
   :focus-visible {
     transition: background-color 400ms;
-    ${m.BackgroundStyles}
+    ${k.BackgroundStyles}
   }
-`,z=s.default.span`
+`,q=i.default.span`
   box-sizing: border-box;
   cursor: pointer;
   display: flex;
@@ -49,7 +51,7 @@
   justify-content: center;
   z-index: 0;
 
-  border: 2px solid ${i.default.colors.gray.dark5};
+  border: 2px solid ${t.default.colors.gray.dark5};
 
   ${e=>u[e.size]};
 
@@ -58,7 +60,7 @@
     color: ${({theme:e})=>e.colors.common.white};
   }
 
-  ${e=>e.isChecked&&(r=>t.css`
+  ${e=>e.isChecked&&(r=>o.css`
   svg {
     opacity: 1;
   }
@@ -66,16 +68,16 @@
   :hover {
   }
 
-  background: ${i.default.colors[r].main};
-  border: 2px solid ${i.default.colors[r].main};
+  background: ${t.default.colors[r].main};
+  border: 2px solid ${t.default.colors[r].main};
 `)(e.color)};
   ${e=>e.isDisabled&&y};
-
-  ${e=>e.isChecked&&e.isDisabled&&k};
-`,j=s.default(g.BodyText)`
+  ${e=>e.hasError&&v};
+  ${e=>e.isChecked&&e.isDisabled&&$};
+`,D=i.default(m.BodyText)`
   flex: 1;
   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;
-`,h=({name:e=f.generateNameHash("check-box"),isDisabled:r=!1,size:a="regular",checked:l=!1,color:d="secondary",label:c,...p})=>o.default.createElement($,null,o.default.createElement(v,{...p,type:"checkbox",checked:l,"data-validate":"checked",name:e,id:e,color:d,disabled:r,isDisabled:r,boxSize:a}),o.default.createElement(z,{size:a,color:d,isChecked:l,isDisabled:r},o.default.createElement(x.default,null)),c&&o.default.createElement(j,{as:"label",htmlFor:e,isDisabled:r},c));exports.CheckBox=h,exports.default=h;
+`,h=({name:e=g.generateNameHash("check-box"),isDisabled:r=!1,size:a="regular",checked:l=!1,color:d="secondary",hasError:p=!1,label:c,...b})=>s.default.createElement(z,null,s.default.createElement(j,{...b,type:"checkbox",checked:l,"data-validate":"checked",name:e,id:e,color:d,disabled:r,isDisabled:r,boxSize:a}),s.default.createElement(q,{size:a,color:d,isChecked:l,isDisabled:r,hasError:p},s.default.createElement(f.default,null)),c&&s.default.createElement(D,{as:"label",htmlFor:e,isDisabled:r},c));exports.CheckBox=h,exports.default=h;

package/esm/components/Button/styles.js

@@ -1,4 +1,4 @@
-import{ButtonSmallTextStyle as a,ButtonRegularTextStyle as e,ButtonLargeTextStyle as i}from"../../typography/ButtonText/index.js";import"react";import"styled-components";const n={smaller:a,small:e,regular:e,large:i},d=()=>`
+import{ButtonSmallTextStyle as i,ButtonRegularTextStyle as e,ButtonLargeTextStyle as a}from"../../typography/ButtonText/index.js";import"react";import"styled-components";const n={smaller:i,small:e,regular:e,large:a},d=()=>`
   padding: 0.25rem 0.75rem;
   min-height: 2.5rem;
 `,g=()=>`
@@ -35,14 +35,11 @@ import{ButtonSmallTextStyle as a,ButtonRegularTextStyle as e,ButtonLargeTextStyl
     color: ${o.colors[r].light};
   }
 `,s=(o,r)=>`
-  color: ${r!=="neutral"?o.colors[r].main:o.colors.neutral.light};
-  background-color: transparent;
+  color: ${o.colors[r].main};
 
-  :hover {
-    color: ${o.colors[r].dark};
-  }
+  background-color: transparent;
 
-  :active {
+  :hover, :active {
     color: ${o.colors[r].dark};
   }
 `,l=o=>`
@@ -52,4 +49,4 @@ import{ButtonSmallTextStyle as a,ButtonRegularTextStyle as e,ButtonLargeTextStyl
     ${l(o)};
     background-color: ${o.colors.gray.light4};`:r==="outline"?`
     ${l(o)};
-    border: 2px solid ${o.colors.gray.light1};`:l(o),u={solid:h,outline:t,flat:s};export{u as colorStyles,$ as disabledColorStyles,s as flatColorStyles,n as fontSizes,m as largeSizeStyles,t as outlineColorStyles,g as regularSizeStyles,d as smallerAndSmallSizeStyles};
+    border: 2px solid ${o.colors.gray.light1};`:l(o),p={solid:h,outline:t,flat:s};export{p as colorStyles,$ as disabledColorStyles,s as flatColorStyles,n as fontSizes,m as largeSizeStyles,t as outlineColorStyles,g as regularSizeStyles,d as smallerAndSmallSizeStyles};

package/esm/components/CheckBox/index.js

@@ -1,4 +1,4 @@
-import r from"react";import s,{css as i}from"styled-components";import h from"../../icons/components/CheckmarkIcon.js";import{generateNameHash as x}from"../../shared/helpers.js";import t from"../../theme.js";import{BodyText as b}from"../../typography/BodyText/index.js";import{BackgroundStyles as g}from"../IconButton.js";import"../../shared/media-queries.js";const u=i`
+import s from"react";import t,{css as o}from"styled-components";import x from"../../icons/components/CheckmarkIcon.js";import{generateNameHash as b}from"../../shared/helpers.js";import i from"../../theme.js";import{BodyText as g}from"../../typography/BodyText/index.js";import{BackgroundStyles as u}from"../IconButton.js";import"../../shared/media-queries.js";const f=o`
   width: 24px;
   height: 24px;
 
@@ -6,7 +6,7 @@ import r from"react";import s,{css as i}from"styled-components";import h from"..
     width: 15px;
     height: 15px;
   }
-`,f=i`
+`,k=o`
   width: 32px;
   height: 32px;
 
@@ -14,10 +14,10 @@ import r from"react";import s,{css as i}from"styled-components";import h from"..
     width: 22px;
     height: 22px;
   }
-`,d={regular:u,large:f},k=i`
+`,n={regular:f,large:k},y=o`
   cursor: default;
-  border: 2px solid ${t.colors.gray.light2};
-`,y=e=>i`
+  border: 2px solid ${i.colors.gray.light2};
+`,$=e=>o`
   svg {
     opacity: 1;
   }
@@ -25,16 +25,18 @@ import r from"react";import s,{css as i}from"styled-components";import h from"..
   :hover {
   }
 
-  background: ${t.colors[e].main};
-  border: 2px solid ${t.colors[e].main};
-`,$=i`
-  background: ${t.colors.gray.light2};
+  background: ${i.colors[e].main};
+  border: 2px solid ${i.colors[e].main};
+`,z=o`
+  background: ${i.colors.gray.light2};
   z-index: 1;
-`,z=s.div`
+`,v=o`
+  border: 2px solid ${i.colors.error.dark};
+`,D=t.div`
   display: flex;
   align-items: flex-start;
   box-sizing: border-box;
-`,v=s.input.attrs({type:"checkbox"})`
+`,E=t.input.attrs({type:"checkbox"})`
   position: absolute;
   appearance: none;
   width: 100%;
@@ -44,13 +46,13 @@ import r from"react";import s,{css as i}from"styled-components";import h from"..
   outline: none;
   cursor: pointer;
   z-index: 1;
-  ${e=>d[e.boxSize]};
+  ${e=>n[e.boxSize]};
 
   :focus-visible {
     transition: background-color 400ms;
-    ${g}
+    ${u}
   }
-`,D=s.span`
+`,j=t.span`
   box-sizing: border-box;
   cursor: pointer;
   display: flex;
@@ -59,23 +61,23 @@ import r from"react";import s,{css as i}from"styled-components";import h from"..
   justify-content: center;
   z-index: 0;
 
-  border: 2px solid ${t.colors.gray.dark5};
+  border: 2px solid ${i.colors.gray.dark5};
 
-  ${e=>d[e.size]};
+  ${e=>n[e.size]};
 
   svg {
     opacity: 0;
     color: ${({theme:e})=>e.colors.common.white};
   }
 
-  ${e=>e.isChecked&&y(e.color)};
-  ${e=>e.isDisabled&&k};
-
-  ${e=>e.isChecked&&e.isDisabled&&$};
-`,j=s(b)`
+  ${e=>e.isChecked&&$(e.color)};
+  ${e=>e.isDisabled&&y};
+  ${e=>e.hasError&&v};
+  ${e=>e.isChecked&&e.isDisabled&&z};
+`,w=t(g)`
   flex: 1;
   cursor: ${({isDisabled:e})=>e?"default":"pointer"};
   user-select: none;
-  color: ${({theme:e,isDisabled:o})=>o?e.colors.text.disabled:e.colors.text.dark};
+  color: ${({theme:e,isDisabled:r})=>r?e.colors.text.disabled:e.colors.text.dark};
   margin-left: 0.5rem;
-`,p=({name:e=x("check-box"),isDisabled:o=!1,size:a="regular",checked:l=!1,color:c="secondary",label:n,...m})=>r.createElement(z,null,r.createElement(v,{...m,type:"checkbox",checked:l,"data-validate":"checked",name:e,id:e,color:c,disabled:o,isDisabled:o,boxSize:a}),r.createElement(D,{size:a,color:c,isChecked:l,isDisabled:o},r.createElement(h,null)),n&&r.createElement(j,{as:"label",htmlFor:e,isDisabled:o},n));export{p as CheckBox,p as default};
+`,p=({name:e=b("check-box"),isDisabled:r=!1,size:a="regular",checked:l=!1,color:c="secondary",hasError:h=!1,label:d,...m})=>s.createElement(D,null,s.createElement(E,{...m,type:"checkbox",checked:l,"data-validate":"checked",name:e,id:e,color:c,disabled:r,isDisabled:r,boxSize:a}),s.createElement(j,{size:a,color:c,isChecked:l,isDisabled:r,hasError:h},s.createElement(x,null)),d&&s.createElement(w,{as:"label",htmlFor:e,isDisabled:r},d));export{p as CheckBox,p as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kvdbil/components",
-  "version": "14.2.15",
+  "version": "14.3.0",
   "sideEffects": false,
   "main": "cjs/index.js",
   "module": "esm/index.js",

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

@@ -7,7 +7,8 @@ export interface CheckBoxProps extends ComponentPropsWithoutSize {
     color?: Color;
     checked?: boolean;
     isDisabled?: boolean;
+    hasError?: boolean;
     label?: ReactNode;
 }
-export declare const CheckBox: ({ name, isDisabled, size, checked, color, label, ...rest }: CheckBoxProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CheckBox: ({ name, isDisabled, size, checked, color, hasError, label, ...rest }: CheckBoxProps) => import("react/jsx-runtime").JSX.Element;
 export default CheckBox;