@kvdbil/components 11.10.0 → 11.10.1

package/cjs/components/Chip/index.js

@@ -1,7 +1,7 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),o=require("styled-components"),r=require("../../icons/components/CloseIcon.js"),t=require("./styles.js");function i(g){return g&&typeof g=="object"&&"default"in g?g:{default:g}}var l=i(e),n=i(o);const a=n.default.div`
-  font-family: ${({theme:g})=>g.typography.fontBaseFamily};
-  font-size: ${({size:g})=>t.getFontSize(g)};
-  font-weight: ${({theme:g})=>g.typography.fontBaseBoldWeight};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("styled-components"),o=require("../../icons/components/CloseIcon.js"),t=require("./styles.js");function l(f){return f&&typeof f=="object"&&"default"in f?f:{default:f}}var i=l(e),a=l(r);const n={smaller:"0.25rem 1rem",small:"0.25rem 1rem",regular:"0.25rem 1rem",large:"0.5rem 1rem"},s=a.default.div`
+  font-family: ${({theme:f})=>f.typography.fontBaseFamily};
+  font-size: ${({size:f})=>t.getFontSize(f)};
+  font-weight: ${({theme:f})=>f.typography.fontBaseBoldWeight};
   line-height: 1.25;
   letter-spacing: 0.1px;
   display: inline-flex;
@@ -14,33 +14,35 @@
   border-style: solid;
   border-color: ${t.getBorderColor};
   border-radius: 1.293rem;
-  padding: ${({isDeletable:g})=>g?"0 0.5rem 0 1rem":"0.25rem 1rem"};
+  padding: ${({size:f,isDeletable:v})=>v?"0 0.5rem 0 1rem":n[f]};
   transition: color 0.3s ease, background-color 0.3s ease, border 0.3s ease;
 
-  ${g=>!g.isDisabled&&g.isClickable&&` &:hover {
-    border-color: ${t.getHoverBorderColor(g)};
-    background-color: ${t.getHoverBackgroundColor(g)};
-    color: ${t.getHoverColor(g)};
+  ${f=>!f.isDisabled&&f.isClickable&&` &:hover {
+    border-color: ${t.getHoverBorderColor(f)};
+    background-color: ${t.getHoverBackgroundColor(f)};
+    color: ${t.getHoverColor(f)};
   } &:active {
-    background-color: ${t.getActiveBackgroundColor(g)};
-    border-color: ${t.getActiveBorderColor(g)};
-    color: ${t.getActiveColor(g)};
+    background-color: ${t.getActiveBackgroundColor(f)};
+    border-color: ${t.getActiveBorderColor(f)};
+    color: ${t.getActiveColor(f)};
   }`}
-`,s=n.default.span`
+`,c=a.default.span`
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   line-height: 1.5;
-`,c=n.default.span`
+`,d=a.default.span`
   margin-right: 0.625rem;
   display: flex;
   align-items: center;
-`,d=n.default.span`
+`,u=a.default.span`
   display: flex;
   align-items: center;
   cursor: ${t.getCursorType};
   padding: 0.5rem;
+  margin-left: 0.25rem;
+  margin-right: -0.25rem;
   position: relative;
   z-index: 2;
   &:before {
@@ -65,4 +67,4 @@
   &:hover:before {
     opacity: 1;
   }
-`,u=({color:g="primary",children:$,component:k="div",isDisabled:p,onClick:v,size:x="regular",prefix:m,onDelete:b,variant:y="solid",...B})=>{const f=Boolean(v&&!p),h=Boolean(b&&!p),D=Boolean(m);return l.default.createElement(a,{...B,role:f?"button":void 0,onClick:f?v:void 0,tabIndex:f?0:void 0,as:f?"button":k,color:g,isDisabled:p,size:x,isClickable:f,isDeletable:h,variant:y,hasPrefix:D},l.default.createElement(s,null,m&&l.default.createElement(c,{className:"prefix"},m),$,b&&l.default.createElement(d,{role:"button",onClick:h?C=>{C.stopPropagation(),b==null||b(C)}:void 0,color:g,variant:y,isClickable:f,isDisabled:p,isDeletable:!0},l.default.createElement(r.default,null))))};exports.Chip=u,exports.default=u;
+`,g=({color:f="primary",children:v,component:x="div",isDisabled:b,onClick:h,size:B="regular",prefix:y,onDelete:m,variant:C="solid",...z})=>{const p=Boolean(h&&!b),$=Boolean(m&&!b),D=Boolean(y);return i.default.createElement(s,{...z,role:p?"button":void 0,onClick:p?h:void 0,tabIndex:p?0:void 0,as:p?"button":x,color:f,isDisabled:b,size:B,isClickable:p,isDeletable:$,variant:C,hasPrefix:D},i.default.createElement(c,null,y&&i.default.createElement(d,{className:"prefix"},y),v,m&&i.default.createElement(u,{role:"button",onClick:$?k=>{k.stopPropagation(),m==null||m(k)}:void 0,color:f,variant:C,isClickable:p,isDisabled:b,isDeletable:!0,size:"regular"},i.default.createElement(o.default,null))))};exports.Chip=g,exports.default=g;

package/cjs/components/Chip/styles.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.getActiveBackgroundColor=({color:t,variant:o,isDisabled:r,theme:l})=>r?"transparent":t==="neutralLight"?l.colors.background.light:o==="solid"?l.colors[t].light:"transparent",exports.getActiveBorderColor=({variant:t,color:o,theme:r})=>o==="neutralLight"?{solid:r.colors.background.light,flat:"transparent",outline:r.colors.background.light}[t]:{solid:r.colors[o].light,flat:"transparent",outline:r.colors[o].light}[t],exports.getActiveColor=({variant:t,color:o,theme:r})=>o==="neutralLight"?r.colors.text.dark:t==="solid"?r.colors.text.light:r.colors[o].light,exports.getBackgroundColor=({isDisabled:t,variant:o,color:r,theme:l})=>t?l.colors.gray.light5:r==="neutralLight"?{solid:l.colors.background.gray,flat:l.colors.background.light,outline:"transparent"}[o]:{solid:l.colors[r].main,flat:l.colors.background.light,outline:"transparent"}[o],exports.getBorderColor=({color:t,isDisabled:o,variant:r,theme:l})=>o?l.colors.gray.light5:t==="neutralLight"?{solid:"transparent",flat:"transparent",outline:l.colors.text.disabled}[r]:{solid:l.colors[t].main,flat:"transparent",outline:l.colors[t].main}[r],exports.getColor=({isDisabled:t,variant:o,color:r,theme:l})=>t?l.colors.text.disabled:r==="neutralLight"?o==="outline"?l.colors.text.disabled:l.colors.text.dark:{solid:l.colors.text.light,flat:l.colors[r].main,outline:l.colors[r].main}[o],exports.getCursorType=({isDisabled:t,isClickable:o,isDeletable:r})=>t?"not-allowed":o||r?"pointer":"auto",exports.getFontSize=(t="smaller")=>({smaller:"0.625rem",small:"0.75rem",regular:"1rem",large:"1.25rem"})[t],exports.getHoverBackgroundColor=({variant:t,color:o,theme:r})=>o==="neutralLight"?{solid:r.colors.gray.light4,flat:r.colors.background.light,outline:"transparent"}[t]:{solid:r.colors[o].dark,flat:r.colors.background.light,outline:"transparent"}[t],exports.getHoverBorderColor=({variant:t,color:o,theme:r})=>o==="neutralLight"?{solid:r.colors.gray.light4,flat:"transparent",outline:r.colors.text.dark}[t]:{solid:r.colors[o].dark,flat:"transparent",outline:r.colors[o].dark}[t],exports.getHoverColor=({variant:t,color:o,theme:r})=>o==="neutralLight"?r.colors.text.dark:{solid:r.colors.text.light,flat:r.colors[o].dark,outline:r.colors[o].dark}[t],exports.getSufixHoverBackgroundColor=({variant:t,color:o,isClickable:r,isDisabled:l,theme:e})=>l?e.colors.gray.light5:o==="neutralLight"?{solid:e.colors.gray.light2,flat:e.colors.gray.light4,outline:e.colors.gray.light4}[t]:t==="solid"?r?e.colors[o].darker:e.colors[o].dark:e.colors.background.gray;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.getActiveBackgroundColor=({color:t,variant:o,isDisabled:r,theme:l})=>r?"transparent":t==="neutralLight"?l.colors.background.light:o==="solid"?l.colors[t].light:"transparent",exports.getActiveBorderColor=({variant:t,color:o,theme:r})=>o==="neutralLight"?{solid:r.colors.background.light,flat:"transparent",outline:r.colors.background.light}[t]:{solid:r.colors[o].light,flat:"transparent",outline:r.colors[o].light}[t],exports.getActiveColor=({variant:t,color:o,theme:r})=>o==="neutralLight"?r.colors.text.dark:t==="solid"?r.colors.text.light:r.colors[o].light,exports.getBackgroundColor=({isDisabled:t,variant:o,color:r,theme:l})=>t?l.colors.gray.light5:r==="neutralLight"?{solid:l.colors.background.gray,flat:l.colors.background.light,outline:"transparent"}[o]:{solid:l.colors[r].main,flat:l.colors.background.light,outline:"transparent"}[o],exports.getBorderColor=({color:t,isDisabled:o,variant:r,theme:l})=>o?l.colors.gray.light5:t==="neutralLight"?{solid:"transparent",flat:"transparent",outline:l.colors.text.disabled}[r]:{solid:l.colors[t].main,flat:"transparent",outline:l.colors[t].main}[r],exports.getColor=({isDisabled:t,variant:o,color:r,theme:l})=>t?l.colors.text.disabled:r==="neutralLight"?o==="outline"?l.colors.text.disabled:l.colors.text.dark:{solid:l.colors.text.light,flat:l.colors[r].main,outline:l.colors[r].main}[o],exports.getCursorType=({isDisabled:t,isClickable:o,isDeletable:r})=>t?"not-allowed":o||r?"pointer":"auto",exports.getFontSize=(t="smaller")=>({smaller:"0.625rem",small:"0.75rem",regular:"1rem",large:"1rem"})[t],exports.getHoverBackgroundColor=({variant:t,color:o,theme:r})=>o==="neutralLight"?{solid:r.colors.gray.light4,flat:r.colors.background.light,outline:"transparent"}[t]:{solid:r.colors[o].dark,flat:r.colors.background.light,outline:"transparent"}[t],exports.getHoverBorderColor=({variant:t,color:o,theme:r})=>o==="neutralLight"?{solid:r.colors.gray.light4,flat:"transparent",outline:r.colors.text.dark}[t]:{solid:r.colors[o].dark,flat:"transparent",outline:r.colors[o].dark}[t],exports.getHoverColor=({variant:t,color:o,theme:r})=>o==="neutralLight"?r.colors.text.dark:{solid:r.colors.text.light,flat:r.colors[o].dark,outline:r.colors[o].dark}[t],exports.getSufixHoverBackgroundColor=({variant:t,color:o,isClickable:r,isDisabled:l,theme:e})=>l?e.colors.gray.light5:o==="neutralLight"?{solid:e.colors.gray.light2,flat:e.colors.gray.light4,outline:e.colors.gray.light4}[t]:t==="solid"?r?e.colors[o].darker:e.colors[o].dark:e.colors.background.gray;

package/esm/components/Chip/index.js

@@ -1,11 +1,11 @@
-import t from"react";import i from"styled-components";import C from"../../icons/components/CloseIcon.js";import{getFontSize as $,getCursorType as g,getBackgroundColor as x,getColor as k,getBorderColor as B,getHoverBorderColor as E,getHoverBackgroundColor as j,getHoverColor as z,getActiveBackgroundColor as m,getActiveBorderColor as H,getActiveColor as I,getSufixHoverBackgroundColor as w}from"./styles.js";const A=i.div`
+import r from"react";import l from"styled-components";import C from"../../icons/components/CloseIcon.js";import{getFontSize as $,getCursorType as m,getBackgroundColor as x,getColor as k,getBorderColor as B,getHoverBorderColor as z,getHoverBackgroundColor as E,getHoverColor as j,getActiveBackgroundColor as u,getActiveBorderColor as H,getActiveColor as I,getSufixHoverBackgroundColor as w}from"./styles.js";const A={smaller:"0.25rem 1rem",small:"0.25rem 1rem",regular:"0.25rem 1rem",large:"0.5rem 1rem"},P=l.div`
   font-family: ${({theme:e})=>e.typography.fontBaseFamily};
   font-size: ${({size:e})=>$(e)};
   font-weight: ${({theme:e})=>e.typography.fontBaseBoldWeight};
   line-height: 1.25;
   letter-spacing: 0.1px;
   display: inline-flex;
-  cursor: ${g};
+  cursor: ${m};
   align-items: center;
   background: ${x};
   color: ${k};
@@ -14,33 +14,35 @@ import t from"react";import i from"styled-components";import C from"../../icons/
   border-style: solid;
   border-color: ${B};
   border-radius: 1.293rem;
-  padding: ${({isDeletable:e})=>e?"0 0.5rem 0 1rem":"0.25rem 1rem"};
+  padding: ${({size:e,isDeletable:i})=>i?"0 0.5rem 0 1rem":A[e]};
   transition: color 0.3s ease, background-color 0.3s ease, border 0.3s ease;
 
   ${e=>!e.isDisabled&&e.isClickable&&` &:hover {
-    border-color: ${E(e)};
-    background-color: ${j(e)};
-    color: ${z(e)};
+    border-color: ${z(e)};
+    background-color: ${E(e)};
+    color: ${j(e)};
   } &:active {
-    background-color: ${m(e)};
+    background-color: ${u(e)};
     border-color: ${H(e)};
     color: ${I(e)};
   }`}
-`,P=i.span`
+`,S=l.span`
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   line-height: 1.5;
-`,S=i.span`
+`,F=l.span`
   margin-right: 0.625rem;
   display: flex;
   align-items: center;
-`,F=i.span`
+`,W=l.span`
   display: flex;
   align-items: center;
-  cursor: ${g};
+  cursor: ${m};
   padding: 0.5rem;
+  margin-left: 0.25rem;
+  margin-right: -0.25rem;
   position: relative;
   z-index: 2;
   &:before {
@@ -58,11 +60,11 @@ import t from"react";import i from"styled-components";import C from"../../icons/
   }
 
   &:active:before {
-    background-color: ${m};
+    background-color: ${u};
     opacity: 1;
   }
 
   &:hover:before {
     opacity: 1;
   }
-`,u=({color:e="primary",children:f,component:b="div",isDisabled:r,onClick:a,size:y="regular",prefix:l,onDelete:n,variant:c="solid",...p})=>{const o=Boolean(a&&!r),s=Boolean(n&&!r),h=Boolean(l),v=d=>{d.stopPropagation(),n==null||n(d)};return t.createElement(A,{...p,role:o?"button":void 0,onClick:o?a:void 0,tabIndex:o?0:void 0,as:o?"button":b,color:e,isDisabled:r,size:y,isClickable:o,isDeletable:s,variant:c,hasPrefix:h},t.createElement(P,null,l&&t.createElement(S,{className:"prefix"},l),f,n&&t.createElement(F,{role:"button",onClick:s?v:void 0,color:e,variant:c,isClickable:o,isDisabled:r,isDeletable:!0},t.createElement(C,null))))};export{u as Chip,u as default};
+`,f=({color:e="primary",children:i,component:b="div",isDisabled:t,onClick:c,size:p="regular",prefix:a,onDelete:n,variant:s="solid",...y})=>{const o=Boolean(c&&!t),d=Boolean(n&&!t),h=Boolean(a),v=g=>{g.stopPropagation(),n==null||n(g)};return r.createElement(P,{...y,role:o?"button":void 0,onClick:o?c:void 0,tabIndex:o?0:void 0,as:o?"button":b,color:e,isDisabled:t,size:p,isClickable:o,isDeletable:d,variant:s,hasPrefix:h},r.createElement(S,null,a&&r.createElement(F,{className:"prefix"},a),i,n&&r.createElement(W,{role:"button",onClick:d?v:void 0,color:e,variant:s,isClickable:o,isDisabled:t,isDeletable:!0,size:"regular"},r.createElement(C,null))))};export{f as Chip,f as default};

package/esm/components/Chip/styles.js

@@ -1 +1 @@
-const i=(t="smaller")=>({smaller:"0.625rem",small:"0.75rem",regular:"1rem",large:"1.25rem"})[t],a=({isDisabled:t,variant:o,color:r,theme:l})=>t?l.colors.gray.light5:r==="neutralLight"?{solid:l.colors.background.gray,flat:l.colors.background.light,outline:"transparent"}[o]:{solid:l.colors[r].main,flat:l.colors.background.light,outline:"transparent"}[o],u=({isDisabled:t,variant:o,color:r,theme:l})=>t?l.colors.text.disabled:r==="neutralLight"?o==="outline"?l.colors.text.disabled:l.colors.text.dark:{solid:l.colors.text.light,flat:l.colors[r].main,outline:l.colors[r].main}[o],c=({color:t,isDisabled:o,variant:r,theme:l})=>o?l.colors.gray.light5:t==="neutralLight"?{solid:"transparent",flat:"transparent",outline:l.colors.text.disabled}[r]:{solid:l.colors[t].main,flat:"transparent",outline:l.colors[t].main}[r],g=({isDisabled:t,isClickable:o,isDeletable:r})=>t?"not-allowed":o||r?"pointer":"auto",e=({variant:t,color:o,theme:r})=>o==="neutralLight"?{solid:r.colors.gray.light4,flat:r.colors.background.light,outline:"transparent"}[t]:{solid:r.colors[o].dark,flat:r.colors.background.light,outline:"transparent"}[t],d=({variant:t,color:o,theme:r})=>o==="neutralLight"?{solid:r.colors.gray.light4,flat:"transparent",outline:r.colors.text.dark}[t]:{solid:r.colors[o].dark,flat:"transparent",outline:r.colors[o].dark}[t],f=({variant:t,color:o,theme:r})=>o==="neutralLight"?r.colors.text.dark:{solid:r.colors.text.light,flat:r.colors[o].dark,outline:r.colors[o].dark}[t],k=({variant:t,color:o,isClickable:r,isDisabled:l,theme:n})=>l?n.colors.gray.light5:o==="neutralLight"?{solid:n.colors.gray.light2,flat:n.colors.gray.light4,outline:n.colors.gray.light4}[t]:t==="solid"?r?n.colors[o].darker:n.colors[o].dark:n.colors.background.gray,C=({color:t,variant:o,isDisabled:r,theme:l})=>r?"transparent":t==="neutralLight"?l.colors.background.light:o==="solid"?l.colors[t].light:"transparent",L=({variant:t,color:o,theme:r})=>o==="neutralLight"?{solid:r.colors.background.light,flat:"transparent",outline:r.colors.background.light}[t]:{solid:r.colors[o].light,flat:"transparent",outline:r.colors[o].light}[t],p=({variant:t,color:o,theme:r})=>o==="neutralLight"?r.colors.text.dark:t==="solid"?r.colors.text.light:r.colors[o].light;export{C as getActiveBackgroundColor,L as getActiveBorderColor,p as getActiveColor,a as getBackgroundColor,c as getBorderColor,u as getColor,g as getCursorType,i as getFontSize,e as getHoverBackgroundColor,d as getHoverBorderColor,f as getHoverColor,k as getSufixHoverBackgroundColor};
+const i=(t="smaller")=>({smaller:"0.625rem",small:"0.75rem",regular:"1rem",large:"1rem"})[t],a=({isDisabled:t,variant:o,color:r,theme:l})=>t?l.colors.gray.light5:r==="neutralLight"?{solid:l.colors.background.gray,flat:l.colors.background.light,outline:"transparent"}[o]:{solid:l.colors[r].main,flat:l.colors.background.light,outline:"transparent"}[o],u=({isDisabled:t,variant:o,color:r,theme:l})=>t?l.colors.text.disabled:r==="neutralLight"?o==="outline"?l.colors.text.disabled:l.colors.text.dark:{solid:l.colors.text.light,flat:l.colors[r].main,outline:l.colors[r].main}[o],c=({color:t,isDisabled:o,variant:r,theme:l})=>o?l.colors.gray.light5:t==="neutralLight"?{solid:"transparent",flat:"transparent",outline:l.colors.text.disabled}[r]:{solid:l.colors[t].main,flat:"transparent",outline:l.colors[t].main}[r],g=({isDisabled:t,isClickable:o,isDeletable:r})=>t?"not-allowed":o||r?"pointer":"auto",e=({variant:t,color:o,theme:r})=>o==="neutralLight"?{solid:r.colors.gray.light4,flat:r.colors.background.light,outline:"transparent"}[t]:{solid:r.colors[o].dark,flat:r.colors.background.light,outline:"transparent"}[t],d=({variant:t,color:o,theme:r})=>o==="neutralLight"?{solid:r.colors.gray.light4,flat:"transparent",outline:r.colors.text.dark}[t]:{solid:r.colors[o].dark,flat:"transparent",outline:r.colors[o].dark}[t],f=({variant:t,color:o,theme:r})=>o==="neutralLight"?r.colors.text.dark:{solid:r.colors.text.light,flat:r.colors[o].dark,outline:r.colors[o].dark}[t],k=({variant:t,color:o,isClickable:r,isDisabled:l,theme:n})=>l?n.colors.gray.light5:o==="neutralLight"?{solid:n.colors.gray.light2,flat:n.colors.gray.light4,outline:n.colors.gray.light4}[t]:t==="solid"?r?n.colors[o].darker:n.colors[o].dark:n.colors.background.gray,C=({color:t,variant:o,isDisabled:r,theme:l})=>r?"transparent":t==="neutralLight"?l.colors.background.light:o==="solid"?l.colors[t].light:"transparent",L=({variant:t,color:o,theme:r})=>o==="neutralLight"?{solid:r.colors.background.light,flat:"transparent",outline:r.colors.background.light}[t]:{solid:r.colors[o].light,flat:"transparent",outline:r.colors[o].light}[t],p=({variant:t,color:o,theme:r})=>o==="neutralLight"?r.colors.text.dark:t==="solid"?r.colors.text.light:r.colors[o].light;export{C as getActiveBackgroundColor,L as getActiveBorderColor,p as getActiveColor,a as getBackgroundColor,c as getBorderColor,u as getColor,g as getCursorType,i as getFontSize,e as getHoverBackgroundColor,d as getHoverBorderColor,f as getHoverColor,k as getSufixHoverBackgroundColor};

package/package.json

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

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

@@ -17,7 +17,7 @@ export interface ChipProps {
 export interface ItemProps {
     color: ChipColor;
     isDisabled?: boolean;
-    size?: Size;
+    size: Size;
     role?: React.AriaRole;
     isClickable?: boolean;
     isDeletable?: boolean;