@sats-group/ui-lib 88.4.0 → 89.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sats-group/ui-lib",
-  "version": "88.4.0",
+  "version": "89.0.0",
   "description": "SATS web user interface library",
   "author": "developer@sats.no",
   "license": "UNLICENSED",

package/react/checkbox/checkbox.d.ts

@@ -1,11 +1,10 @@
 import * as React from 'react';
-import { themes } from './checkbox.types';
+import { labelVariants, themes } from './checkbox.types';
 declare const RefCheckbox: React.ForwardRefExoticComponent<Omit<import("../types").InputHtmlProps, "value"> & {
     intermediate?: boolean;
     description?: string;
     extra?: React.ReactNode;
-    isLabelBold?: boolean;
-    isLabelVisible?: boolean;
+    labelVariant?: import("../types").ObjectValues<typeof labelVariants>;
     label?: string;
     name: string;
     value: string;

package/react/checkbox/checkbox.js

@@ -1,2 +1,2 @@
-"use client";var M=Object.defineProperty;var b=Object.getOwnPropertySymbols;var f=Object.prototype.hasOwnProperty,p=Object.prototype.propertyIsEnumerable;var t=(c,o,i)=>o in c?M(c,o,{enumerable:!0,configurable:!0,writable:!0,value:i}):c[o]=i,u=(c,o)=>{for(var i in o||(o={}))f.call(o,i)&&t(c,i,o[i]);if(b)for(var i of b(o))p.call(o,i)&&t(c,i,o[i]);return c};var g=(c,o)=>{var i={};for(var s in c)f.call(c,s)&&o.indexOf(s)<0&&(i[s]=c[s]);if(c!=null&&b)for(var s of b(c))o.indexOf(s)<0&&p.call(c,s)&&(i[s]=c[s]);return i};import l from"classnames";import*as e from"react";import W from"../use-input-validation";import h from"../text";import{themes as j}from"./checkbox.types";const N=e.forwardRef((H,z)=>{var m=H,{children:c,disabled:o,description:i,extra:s,intermediate:k,isLabelBold:w=!1,isLabelVisible:d=!0,label:x,name:C,showCustomError:$=!0,theme:n,value:y="",required:v,hasHover:I=!1,isWide:L=!0}=m,a=g(m,["children","disabled","description","extra","intermediate","isLabelBold","isLabelVisible","label","name","showCustomError","theme","value","required","hasHover","isWide"]);const[T,B,r]=W();return e.createElement("div",{className:l("checkbox",{"checkbox--error":r,"checkbox--intermediate":k,"checkbox--wide":L,[`checkbox--${n}`]:n})},e.createElement("label",{className:l("checkbox__content",{"checkbox__content--hover":I,[`checkbox__content--${n}`]:n})},e.createElement("div",{className:"checkbox__main"},e.createElement("div",{className:"checkbox__main-top"},e.createElement("div",null,e.createElement("input",u({"aria-label":d?void 0:x,className:"checkbox__input",type:"checkbox",name:C,onChange:_=>{a.onChange&&a.onChange(_),T(_)},onInvalid:_=>{a.onInvalid&&a.onInvalid(_),B(_)},ref:z,value:y,disabled:o,required:v},a)),e.createElement("div",{className:l("checkbox__icon",{"checkbox__icon--intermediate":k,[`checkbox__icon--${n}`]:n})},e.createElement("svg",{className:"checkbox__intermediate",width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e.createElement("line",{x1:"0",y1:"5",x2:"10",y2:"5",stroke:"currentColor",strokeWidth:"2"})),e.createElement("svg",{className:"checkbox__check",width:"12",height:"10",viewBox:"0 0 12 10",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e.createElement("path",{d:"M4.76123 9.0605L0.700729 5L1.76123 3.9395L4.76123 6.9395L10.7612 0.939501L11.8217 2L4.76123 9.0605Z",fill:"currentColor"})))),d?e.createElement(e.Fragment,null,x?e.createElement(h,{className:l("checkbox__label",{[`checkbox__label--${n}`]:n,"checkbox__label--disabled":o}),size:h.sizes.basic,theme:w?h.themes.emphasis:void 0},x):e.createElement("div",{className:l("checkbox__label",{[`checkbox__label--${n}`]:n,"checkbox__label--disabled":o})},c)):null,v?e.createElement("span",{className:"checkbox__asterisk"},"*"):null),i&&e.createElement(h,{className:l("checkbox__description",{[`checkbox__label--${n}`]:n,"checkbox__label--disabled":o}),size:h.sizes.small},i))),r&&$&&e.createElement("div",{"aria-hidden":"true",className:l("checkbox__error",{[`checkbox__error--${n}`]:n})},r),s&&e.createElement("span",{className:"checkbox__extra"},s))});N.displayName="Checkbox";const E=Object.assign(N,{themes:j});var G=E;export{G as default};
+"use client";var M=Object.defineProperty;var x=Object.getOwnPropertySymbols;var f=Object.prototype.hasOwnProperty,u=Object.prototype.propertyIsEnumerable;var p=(c,o,i)=>o in c?M(c,o,{enumerable:!0,configurable:!0,writable:!0,value:i}):c[o]=i,g=(c,o)=>{for(var i in o||(o={}))f.call(o,i)&&p(c,i,o[i]);if(x)for(var i of x(o))u.call(o,i)&&p(c,i,o[i]);return c};var N=(c,o)=>{var i={};for(var n in c)f.call(c,n)&&o.indexOf(n)<0&&(i[n]=c[n]);if(c!=null&&x)for(var n of x(c))o.indexOf(n)<0&&u.call(c,n)&&(i[n]=c[n]);return i};import l from"classnames";import*as e from"react";import W from"../use-input-validation";import a from"../text";import{labelVariants as h,themes as j}from"./checkbox.types";const w=e.forwardRef((H,z)=>{var t=H,{children:c,disabled:o,description:i,extra:n,intermediate:m,labelVariant:_=h.default,label:r,name:C,showCustomError:L=!0,theme:s,value:$="",required:v,hasHover:y=!1,isWide:I=!0}=t,b=N(t,["children","disabled","description","extra","intermediate","labelVariant","label","name","showCustomError","theme","value","required","hasHover","isWide"]);const[T,B,k]=W();return e.createElement("div",{className:l("checkbox",{"checkbox--error":k,"checkbox--intermediate":m,"checkbox--wide":I,[`checkbox--${s}`]:s})},e.createElement("label",{className:l("checkbox__content",{"checkbox__content--hover":y,[`checkbox__content--${s}`]:s})},e.createElement("div",{className:"checkbox__main"},e.createElement("div",{className:"checkbox__main-top"},e.createElement("div",null,e.createElement("input",g({"aria-label":_===h.hidden?r:void 0,className:"checkbox__input",type:"checkbox",name:C,onChange:d=>{b.onChange&&b.onChange(d),T(d)},onInvalid:d=>{b.onInvalid&&b.onInvalid(d),B(d)},ref:z,value:$,disabled:o,required:v},b)),e.createElement("div",{className:l("checkbox__icon",{"checkbox__icon--intermediate":m,[`checkbox__icon--${s}`]:s})},e.createElement("svg",{className:"checkbox__intermediate",width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e.createElement("line",{x1:"0",y1:"5",x2:"10",y2:"5",stroke:"currentColor",strokeWidth:"2"})),e.createElement("svg",{className:"checkbox__check",width:"12",height:"10",viewBox:"0 0 12 10",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e.createElement("path",{d:"M4.76123 9.0605L0.700729 5L1.76123 3.9395L4.76123 6.9395L10.7612 0.939501L11.8217 2L4.76123 9.0605Z",fill:"currentColor"})))),_!==h.hidden?e.createElement(e.Fragment,null,r?e.createElement(a,{className:l("checkbox__label",{[`checkbox__label--${s}`]:s,"checkbox__label--disabled":o}),size:a.sizes.basic,italic:_===h.headline,theme:_===h.bold?a.themes.emphasis:_===h.headline?a.themes.headline:a.themes.normal},r):e.createElement("div",{className:l("checkbox__label",{[`checkbox__label--${s}`]:s,"checkbox__label--disabled":o})},c)):null,v?e.createElement("span",{className:"checkbox__asterisk"},"*"):null),i&&e.createElement(a,{className:l("checkbox__description",{[`checkbox__label--${s}`]:s,"checkbox__label--disabled":o}),size:a.sizes.small},i))),k&&L&&e.createElement("div",{"aria-hidden":"true",className:l("checkbox__error",{[`checkbox__error--${s}`]:s})},k),n&&e.createElement("span",{className:"checkbox__extra"},n))});w.displayName="Checkbox";const E=Object.assign(w,{themes:j});var G=E;export{G as default};
 //# sourceMappingURL=checkbox.js.map

package/react/checkbox/checkbox.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../react/checkbox/checkbox.tsx"],
-  "sourcesContent": ["'use client';\n\nimport cn from 'classnames';\nimport * as React from 'react';\n\nimport useInputValidation from '../use-input-validation';\nimport Text from '../text';\n\nimport { Checkbox as Props, themes } from './checkbox.types';\n\nconst RefCheckbox = React.forwardRef<\n  HTMLInputElement,\n  React.PropsWithChildren<Props>\n>(\n  (\n    {\n      children,\n      disabled,\n      description,\n      extra,\n      intermediate,\n      isLabelBold = false,\n      isLabelVisible = true,\n      label,\n      name,\n      showCustomError = true,\n      theme,\n      value = '',\n      required,\n      hasHover = false,\n      isWide = true,\n      ...restProps\n    },\n    ref,\n  ) => {\n    const [onChange, onInvalid, error] = useInputValidation();\n\n    return (\n      <div\n        className={cn('checkbox', {\n          'checkbox--error': error,\n          'checkbox--intermediate': intermediate,\n          'checkbox--wide': isWide,\n          [`checkbox--${theme}`]: theme,\n        })}\n      >\n        <label\n          className={cn('checkbox__content', {\n            'checkbox__content--hover': hasHover,\n            [`checkbox__content--${theme}`]: theme,\n          })}\n        >\n          <div className=\"checkbox__main\">\n            <div className=\"checkbox__main-top\">\n              <div>\n                <input\n                  aria-label={isLabelVisible ? undefined : label}\n                  className=\"checkbox__input\"\n                  type=\"checkbox\"\n                  name={name}\n                  onChange={e => {\n                    // NOTE: If props specify an `onChange`, we need to call that too\n                    if (restProps.onChange) restProps.onChange(e);\n                    onChange(e);\n                  }}\n                  onInvalid={e => {\n                    // NOTE: If props specify an `onInvalid`, we need to call that too\n                    if (restProps.onInvalid) restProps.onInvalid(e);\n                    onInvalid(e);\n                  }}\n                  ref={ref}\n                  value={value}\n                  disabled={disabled}\n                  required={required}\n                  {...restProps}\n                />\n\n                <div\n                  className={cn('checkbox__icon', {\n                    'checkbox__icon--intermediate': intermediate,\n                    [`checkbox__icon--${theme}`]: theme,\n                  })}\n                >\n                  <svg\n                    className=\"checkbox__intermediate\"\n                    width=\"10\"\n                    height=\"10\"\n                    viewBox=\"0 0 10 10\"\n                    fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                  >\n                    <line\n                      x1=\"0\"\n                      y1=\"5\"\n                      x2=\"10\"\n                      y2=\"5\"\n                      stroke=\"currentColor\"\n                      strokeWidth=\"2\"\n                    />\n                  </svg>\n                  <svg\n                    className=\"checkbox__check\"\n                    width=\"12\"\n                    height=\"10\"\n                    viewBox=\"0 0 12 10\"\n                    fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                  >\n                    <path\n                      d=\"M4.76123 9.0605L0.700729 5L1.76123 3.9395L4.76123 6.9395L10.7612 0.939501L11.8217 2L4.76123 9.0605Z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                </div>\n              </div>\n              {isLabelVisible ? (\n                <>\n                  {label ? (\n                    <Text\n                      className={cn('checkbox__label', {\n                        [`checkbox__label--${theme}`]: theme,\n                        'checkbox__label--disabled': disabled,\n                      })}\n                      size={Text.sizes.basic}\n                      theme={isLabelBold ? Text.themes.emphasis : undefined}\n                    >\n                      {label}\n                    </Text>\n                  ) : (\n                    <div\n                      className={cn('checkbox__label', {\n                        [`checkbox__label--${theme}`]: theme,\n                        'checkbox__label--disabled': disabled,\n                      })}\n                    >\n                      {children}\n                    </div>\n                  )}\n                </>\n              ) : null}\n              {required ? <span className=\"checkbox__asterisk\">*</span> : null}\n            </div>\n            {description && (\n              <Text\n                className={cn('checkbox__description', {\n                  [`checkbox__label--${theme}`]: theme,\n                  'checkbox__label--disabled': disabled,\n                })}\n                size={Text.sizes.small}\n              >\n                {description}\n              </Text>\n            )}\n          </div>\n        </label>\n\n        {/* NOTE: This is aria-hidden because reporting of validation errors is handled by the browser */}\n        {error && showCustomError && (\n          <div\n            aria-hidden=\"true\"\n            className={cn('checkbox__error', {\n              [`checkbox__error--${theme}`]: theme,\n            })}\n          >\n            {error}\n          </div>\n        )}\n\n        {extra && <span className=\"checkbox__extra\">{extra}</span>}\n      </div>\n    );\n  },\n);\n\n// NOTE: If this isn't set, stack traces say \"forwardRef\" instead of \"Checkbox\"\nRefCheckbox.displayName = 'Checkbox';\n\n// NOTE: The component is redeclared here because TypeScript doesn't accept assigning extra properties to `RefComponent` when it's declared\nconst Checkbox: typeof RefCheckbox & {\n  themes: typeof themes;\n} = Object.assign(RefCheckbox, { themes });\n\nexport default Checkbox;\n"],
-  "mappings": "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",
-  "names": ["cn", "React", "useInputValidation", "Text", "themes", "RefCheckbox", "_a", "ref", "_b", "children", "disabled", "description", "extra", "intermediate", "isLabelBold", "isLabelVisible", "label", "name", "showCustomError", "theme", "value", "required", "hasHover", "isWide", "restProps", "__objRest", "onChange", "onInvalid", "error", "__spreadValues", "e", "Checkbox", "checkbox_default"]
+  "sourcesContent": ["'use client';\n\nimport cn from 'classnames';\nimport * as React from 'react';\n\nimport useInputValidation from '../use-input-validation';\nimport Text from '../text';\n\nimport { Checkbox as Props, labelVariants, themes } from './checkbox.types';\n\nconst RefCheckbox = React.forwardRef<\n  HTMLInputElement,\n  React.PropsWithChildren<Props>\n>(\n  (\n    {\n      children,\n      disabled,\n      description,\n      extra,\n      intermediate,\n      labelVariant = labelVariants.default,\n      label,\n      name,\n      showCustomError = true,\n      theme,\n      value = '',\n      required,\n      hasHover = false,\n      isWide = true,\n      ...restProps\n    },\n    ref,\n  ) => {\n    const [onChange, onInvalid, error] = useInputValidation();\n\n    return (\n      <div\n        className={cn('checkbox', {\n          'checkbox--error': error,\n          'checkbox--intermediate': intermediate,\n          'checkbox--wide': isWide,\n          [`checkbox--${theme}`]: theme,\n        })}\n      >\n        <label\n          className={cn('checkbox__content', {\n            'checkbox__content--hover': hasHover,\n            [`checkbox__content--${theme}`]: theme,\n          })}\n        >\n          <div className=\"checkbox__main\">\n            <div className=\"checkbox__main-top\">\n              <div>\n                <input\n                  aria-label={\n                    labelVariant === labelVariants.hidden ? label : undefined\n                  }\n                  className=\"checkbox__input\"\n                  type=\"checkbox\"\n                  name={name}\n                  onChange={e => {\n                    // NOTE: If props specify an `onChange`, we need to call that too\n                    if (restProps.onChange) restProps.onChange(e);\n                    onChange(e);\n                  }}\n                  onInvalid={e => {\n                    // NOTE: If props specify an `onInvalid`, we need to call that too\n                    if (restProps.onInvalid) restProps.onInvalid(e);\n                    onInvalid(e);\n                  }}\n                  ref={ref}\n                  value={value}\n                  disabled={disabled}\n                  required={required}\n                  {...restProps}\n                />\n\n                <div\n                  className={cn('checkbox__icon', {\n                    'checkbox__icon--intermediate': intermediate,\n                    [`checkbox__icon--${theme}`]: theme,\n                  })}\n                >\n                  <svg\n                    className=\"checkbox__intermediate\"\n                    width=\"10\"\n                    height=\"10\"\n                    viewBox=\"0 0 10 10\"\n                    fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                  >\n                    <line\n                      x1=\"0\"\n                      y1=\"5\"\n                      x2=\"10\"\n                      y2=\"5\"\n                      stroke=\"currentColor\"\n                      strokeWidth=\"2\"\n                    />\n                  </svg>\n                  <svg\n                    className=\"checkbox__check\"\n                    width=\"12\"\n                    height=\"10\"\n                    viewBox=\"0 0 12 10\"\n                    fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                  >\n                    <path\n                      d=\"M4.76123 9.0605L0.700729 5L1.76123 3.9395L4.76123 6.9395L10.7612 0.939501L11.8217 2L4.76123 9.0605Z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                </div>\n              </div>\n              {labelVariant !== labelVariants.hidden ? (\n                <>\n                  {label ? (\n                    <Text\n                      className={cn('checkbox__label', {\n                        [`checkbox__label--${theme}`]: theme,\n                        'checkbox__label--disabled': disabled,\n                      })}\n                      size={Text.sizes.basic}\n                      italic={labelVariant === labelVariants.headline}\n                      theme={\n                        labelVariant === labelVariants.bold\n                          ? Text.themes.emphasis\n                          : labelVariant === labelVariants.headline\n                            ? Text.themes.headline\n                            : Text.themes.normal\n                      }\n                    >\n                      {label}\n                    </Text>\n                  ) : (\n                    <div\n                      className={cn('checkbox__label', {\n                        [`checkbox__label--${theme}`]: theme,\n                        'checkbox__label--disabled': disabled,\n                      })}\n                    >\n                      {children}\n                    </div>\n                  )}\n                </>\n              ) : null}\n              {required ? <span className=\"checkbox__asterisk\">*</span> : null}\n            </div>\n            {description && (\n              <Text\n                className={cn('checkbox__description', {\n                  [`checkbox__label--${theme}`]: theme,\n                  'checkbox__label--disabled': disabled,\n                })}\n                size={Text.sizes.small}\n              >\n                {description}\n              </Text>\n            )}\n          </div>\n        </label>\n\n        {/* NOTE: This is aria-hidden because reporting of validation errors is handled by the browser */}\n        {error && showCustomError && (\n          <div\n            aria-hidden=\"true\"\n            className={cn('checkbox__error', {\n              [`checkbox__error--${theme}`]: theme,\n            })}\n          >\n            {error}\n          </div>\n        )}\n\n        {extra && <span className=\"checkbox__extra\">{extra}</span>}\n      </div>\n    );\n  },\n);\n\n// NOTE: If this isn't set, stack traces say \"forwardRef\" instead of \"Checkbox\"\nRefCheckbox.displayName = 'Checkbox';\n\n// NOTE: The component is redeclared here because TypeScript doesn't accept assigning extra properties to `RefComponent` when it's declared\nconst Checkbox: typeof RefCheckbox & {\n  themes: typeof themes;\n} = Object.assign(RefCheckbox, { themes });\n\nexport default Checkbox;\n"],
+  "mappings": "wgBAEA,OAAOA,MAAQ,aACf,UAAYC,MAAW,QAEvB,OAAOC,MAAwB,0BAC/B,OAAOC,MAAU,UAEjB,OAA4B,iBAAAC,EAAe,UAAAC,MAAc,mBAEzD,MAAMC,EAAcL,EAAM,WAIxB,CACEM,EAiBAC,IACG,CAlBH,IAAAC,EAAAF,EACE,UAAAG,EACA,SAAAC,EACA,YAAAC,EACA,MAAAC,EACA,aAAAC,EACA,aAAAC,EAAeX,EAAc,QAC7B,MAAAY,EACA,KAAAC,EACA,gBAAAC,EAAkB,GAClB,MAAAC,EACA,MAAAC,EAAQ,GACR,SAAAC,EACA,SAAAC,EAAW,GACX,OAAAC,EAAS,EA7Bf,EAeId,EAeKe,EAAAC,EAfLhB,EAeK,CAdH,WACA,WACA,cACA,QACA,eACA,eACA,QACA,OACA,kBACA,QACA,QACA,WACA,WACA,WAKF,KAAM,CAACiB,EAAUC,EAAWC,CAAK,EAAI1B,EAAmB,EAExD,OACED,EAAA,cAAC,OACC,UAAWD,EAAG,WAAY,CACxB,kBAAmB4B,EACnB,yBAA0Bd,EAC1B,iBAAkBS,EAClB,CAAC,aAAaJ,CAAK,EAAE,EAAGA,CAC1B,CAAC,GAEDlB,EAAA,cAAC,SACC,UAAWD,EAAG,oBAAqB,CACjC,2BAA4BsB,EAC5B,CAAC,sBAAsBH,CAAK,EAAE,EAAGA,CACnC,CAAC,GAEDlB,EAAA,cAAC,OAAI,UAAU,kBACbA,EAAA,cAAC,OAAI,UAAU,sBACbA,EAAA,cAAC,WACCA,EAAA,cAAC,QAAA4B,EAAA,CACC,aACEd,IAAiBX,EAAc,OAASY,EAAQ,OAElD,UAAU,kBACV,KAAK,WACL,KAAMC,EACN,SAAUa,GAAK,CAETN,EAAU,UAAUA,EAAU,SAASM,CAAC,EAC5CJ,EAASI,CAAC,CACZ,EACA,UAAWA,GAAK,CAEVN,EAAU,WAAWA,EAAU,UAAUM,CAAC,EAC9CH,EAAUG,CAAC,CACb,EACA,IAAKtB,EACL,MAAOY,EACP,SAAUT,EACV,SAAUU,GACNG,EACN,EAEAvB,EAAA,cAAC,OACC,UAAWD,EAAG,iBAAkB,CAC9B,+BAAgCc,EAChC,CAAC,mBAAmBK,CAAK,EAAE,EAAGA,CAChC,CAAC,GAEDlB,EAAA,cAAC,OACC,UAAU,yBACV,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OACL,MAAM,8BAENA,EAAA,cAAC,QACC,GAAG,IACH,GAAG,IACH,GAAG,KACH,GAAG,IACH,OAAO,eACP,YAAY,IACd,CACF,EACAA,EAAA,cAAC,OACC,UAAU,kBACV,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OACL,MAAM,8BAENA,EAAA,cAAC,QACC,EAAE,sGACF,KAAK,eACP,CACF,CACF,CACF,EACCc,IAAiBX,EAAc,OAC9BH,EAAA,cAAAA,EAAA,cACGe,EACCf,EAAA,cAACE,EAAA,CACC,UAAWH,EAAG,kBAAmB,CAC/B,CAAC,oBAAoBmB,CAAK,EAAE,EAAGA,EAC/B,4BAA6BR,CAC/B,CAAC,EACD,KAAMR,EAAK,MAAM,MACjB,OAAQY,IAAiBX,EAAc,SACvC,MACEW,IAAiBX,EAAc,KAC3BD,EAAK,OAAO,SACZY,IAAiBX,EAAc,SAC7BD,EAAK,OAAO,SACZA,EAAK,OAAO,QAGnBa,CACH,EAEAf,EAAA,cAAC,OACC,UAAWD,EAAG,kBAAmB,CAC/B,CAAC,oBAAoBmB,CAAK,EAAE,EAAGA,EAC/B,4BAA6BR,CAC/B,CAAC,GAEAD,CACH,CAEJ,EACE,KACHW,EAAWpB,EAAA,cAAC,QAAK,UAAU,sBAAqB,GAAC,EAAU,IAC9D,EACCW,GACCX,EAAA,cAACE,EAAA,CACC,UAAWH,EAAG,wBAAyB,CACrC,CAAC,oBAAoBmB,CAAK,EAAE,EAAGA,EAC/B,4BAA6BR,CAC/B,CAAC,EACD,KAAMR,EAAK,MAAM,OAEhBS,CACH,CAEJ,CACF,EAGCgB,GAASV,GACRjB,EAAA,cAAC,OACC,cAAY,OACZ,UAAWD,EAAG,kBAAmB,CAC/B,CAAC,oBAAoBmB,CAAK,EAAE,EAAGA,CACjC,CAAC,GAEAS,CACH,EAGDf,GAASZ,EAAA,cAAC,QAAK,UAAU,mBAAmBY,CAAM,CACrD,CAEJ,CACF,EAGAP,EAAY,YAAc,WAG1B,MAAMyB,EAEF,OAAO,OAAOzB,EAAa,CAAE,OAAAD,CAAO,CAAC,EAEzC,IAAO2B,EAAQD",
+  "names": ["cn", "React", "useInputValidation", "Text", "labelVariants", "themes", "RefCheckbox", "_a", "ref", "_b", "children", "disabled", "description", "extra", "intermediate", "labelVariant", "label", "name", "showCustomError", "theme", "value", "required", "hasHover", "isWide", "restProps", "__objRest", "onChange", "onInvalid", "error", "__spreadValues", "e", "Checkbox", "checkbox_default"]
 }

package/react/checkbox/checkbox.types.d.ts

@@ -3,12 +3,17 @@ export declare const themes: {
     readonly light: "light";
     readonly blue: "blue";
 };
+export declare const labelVariants: {
+    readonly default: "default";
+    readonly headline: "headline";
+    readonly bold: "bold";
+    readonly hidden: "hidden";
+};
 export type Checkbox = Omit<InputHtmlProps, 'value'> & {
     intermediate?: boolean;
     description?: string;
     extra?: React.ReactNode;
-    isLabelBold?: boolean;
-    isLabelVisible?: boolean;
+    labelVariant?: ObjectValues<typeof labelVariants>;
     label?: string;
     name: string;
     value: string;

package/react/checkbox/checkbox.types.js

@@ -1,2 +1,2 @@
-const l={light:"light",blue:"blue"};export{l as themes};
+const o={light:"light",blue:"blue"},l={default:"default",headline:"headline",bold:"bold",hidden:"hidden"};export{l as labelVariants,o as themes};
 //# sourceMappingURL=checkbox.types.js.map

package/react/checkbox/checkbox.types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../react/checkbox/checkbox.types.ts"],
-  "sourcesContent": ["import { ObjectValues, InputHtmlProps } from '../types';\n\nexport const themes = {\n  light: 'light',\n  blue: 'blue',\n} as const;\n\nexport type Checkbox = Omit<InputHtmlProps, 'value'> & {\n  intermediate?: boolean;\n  description?: string;\n  extra?: React.ReactNode;\n  isLabelBold?: boolean;\n  isLabelVisible?: boolean;\n  label?: string;\n  name: string;\n  value: string;\n  showCustomError?: boolean;\n  theme?: ObjectValues<typeof themes>;\n  hasHover?: boolean;\n  isWide?: boolean;\n};\n"],
-  "mappings": "AAEO,MAAMA,EAAS,CACpB,MAAO,QACP,KAAM,MACR",
-  "names": ["themes"]
+  "sourcesContent": ["import { ObjectValues, InputHtmlProps } from '../types';\n\nexport const themes = {\n  light: 'light',\n  blue: 'blue',\n} as const;\n\nexport const labelVariants = {\n  default: 'default',\n  headline: 'headline',\n  bold: 'bold',\n  hidden: 'hidden',\n} as const;\n\nexport type Checkbox = Omit<InputHtmlProps, 'value'> & {\n  intermediate?: boolean;\n  description?: string;\n  extra?: React.ReactNode;\n  labelVariant?: ObjectValues<typeof labelVariants>;\n  label?: string;\n  name: string;\n  value: string;\n  showCustomError?: boolean;\n  theme?: ObjectValues<typeof themes>;\n  hasHover?: boolean;\n  isWide?: boolean;\n};\n"],
+  "mappings": "AAEO,MAAMA,EAAS,CACpB,MAAO,QACP,KAAM,MACR,EAEaC,EAAgB,CAC3B,QAAS,UACT,SAAU,WACV,KAAM,OACN,OAAQ,QACV",
+  "names": ["themes", "labelVariants"]
 }

package/react/form-content/checkbox-category.js

@@ -1,2 +1,2 @@
-"use client";var H=Object.defineProperty,I=Object.defineProperties;var F=Object.getOwnPropertyDescriptors;var g=Object.getOwnPropertySymbols;var M=Object.prototype.hasOwnProperty,U=Object.prototype.propertyIsEnumerable;var N=(n,o,t)=>o in n?H(n,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[o]=t,p=(n,o)=>{for(var t in o||(o={}))M.call(o,t)&&N(n,t,o[t]);if(g)for(var t of g(o))U.call(o,t)&&N(n,t,o[t]);return n},k=(n,o)=>I(n,F(o));import*as e from"react";import m from"../text";import y from"../checkbox";import W from"../icons/24/arrow-right";import j from"../icons/24/arrow-up";import q from"../visually-hidden";import{mod as v}from"../add-bem-modifiers";import B from"../collapse";const D=({currentlySelectedValues:n=[],id:o,isSearching:t,options:f,searchResults:b=[],selectAll:l,selectAllLabel:x,setMultipleSelectedValues:w=()=>{},setSelectedValue:z=()=>{},shouldShowItems:O=!0,removeAllValues:L=()=>{}})=>{const a=e.useMemo(()=>!!l,[l]),[r]=e.useState(f.filter(s=>!s.disabled)),[h,i]=e.useState(!!a),P=s=>{z(o,s)},T=()=>{n.length!==r.length?w(o,r.map(s=>s.value)):L(o)};e.useEffect(()=>i(t?!0:!a),[a,t,b]);const _=f.every(s=>s.disabled),E=n.length>0;return e.createElement("fieldset",{className:"form-content__fieldset"},a&&e.createElement("div",{className:v("form-content__chevron-button-wrapper",{hidden:t})},l?e.createElement("div",{className:"form-content__select-all"},e.createElement(y,k(p({},l),{isLabelVisible:!1,checked:r.length>0&&n.length===r.length,onChange:T,"data-test-select-all":!0,disabled:_}))):null,e.createElement("button",{className:"form-content__chevron-button",onClick:()=>i(s=>!s),type:"button"},e.createElement(m,{elementName:"span",className:v("form-content__select-all-label",{disabled:_}),size:m.sizes.basic},x),e.createElement("div",{className:"form-content__checkbox-category-info-wrapper"},E?e.createElement(m,{className:"form-content__checkbox-category-number",size:m.sizes.interface},n.length):void 0,h?e.createElement("div",{className:"form-content__checkbox-category-icon"},e.createElement(j,null)):e.createElement("div",{className:"form-content__checkbox-category-icon"},e.createElement(W,null))))),e.createElement(B,{duration:300,animateChildren:!!a,isOpen:h},e.createElement("fieldset",{className:"form-content__fieldset"},f.map(s=>{const c=t?b.find(u=>u.key.toLowerCase()===s.value.toLowerCase()):void 0,d=n.includes(s.value),C=e.createElement("div",{key:s.value,className:v("form-content__checkbox-button",{nested:!t&&a})},e.createElement(y,p({onChange:u=>P(u.target.value),checked:d},s)));if(!(!d&&!c&&!O)){if(d&&t&&!c)return e.createElement(q,{key:s.value},C);if(!(!d&&t&&!c))return C}}))))};var S=D;export{S as default};
+"use client";var I=Object.defineProperty,L=Object.defineProperties;var F=Object.getOwnPropertyDescriptors;var g=Object.getOwnPropertySymbols;var M=Object.prototype.hasOwnProperty,U=Object.prototype.propertyIsEnumerable;var N=(n,o,t)=>o in n?I(n,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[o]=t,p=(n,o)=>{for(var t in o||(o={}))M.call(o,t)&&N(n,t,o[t]);if(g)for(var t of g(o))U.call(o,t)&&N(n,t,o[t]);return n},k=(n,o)=>L(n,F(o));import*as e from"react";import m from"../text";import y from"../checkbox";import V from"../icons/24/arrow-right";import W from"../icons/24/arrow-up";import j from"../visually-hidden";import{mod as v}from"../add-bem-modifiers";import q from"../collapse";import{labelVariants as B}from"../checkbox/checkbox.types";const D=({currentlySelectedValues:n=[],id:o,isSearching:t,options:f,searchResults:h=[],selectAll:r,selectAllLabel:x,setMultipleSelectedValues:w=()=>{},setSelectedValue:z=()=>{},shouldShowItems:O=!0,removeAllValues:P=()=>{}})=>{const a=e.useMemo(()=>!!r,[r]),[l]=e.useState(f.filter(s=>!s.disabled)),[b,i]=e.useState(!!a),T=s=>{z(o,s)},E=()=>{n.length!==l.length?w(o,l.map(s=>s.value)):P(o)};e.useEffect(()=>i(t?!0:!a),[a,t,h]);const _=f.every(s=>s.disabled),H=n.length>0;return e.createElement("fieldset",{className:"form-content__fieldset"},a&&e.createElement("div",{className:v("form-content__chevron-button-wrapper",{hidden:t})},r?e.createElement("div",{className:"form-content__select-all"},e.createElement(y,k(p({},r),{labelVariant:B.hidden,checked:l.length>0&&n.length===l.length,onChange:E,"data-test-select-all":!0,disabled:_}))):null,e.createElement("button",{className:"form-content__chevron-button",onClick:()=>i(s=>!s),type:"button"},e.createElement(m,{elementName:"span",className:v("form-content__select-all-label",{disabled:_}),size:m.sizes.basic},x),e.createElement("div",{className:"form-content__checkbox-category-info-wrapper"},H?e.createElement(m,{className:"form-content__checkbox-category-number",size:m.sizes.interface},n.length):void 0,b?e.createElement("div",{className:"form-content__checkbox-category-icon"},e.createElement(W,null)):e.createElement("div",{className:"form-content__checkbox-category-icon"},e.createElement(V,null))))),e.createElement(q,{duration:300,animateChildren:!!a,isOpen:b},e.createElement("fieldset",{className:"form-content__fieldset"},f.map(s=>{const c=t?h.find(u=>u.key.toLowerCase()===s.value.toLowerCase()):void 0,d=n.includes(s.value),C=e.createElement("div",{key:s.value,className:v("form-content__checkbox-button",{nested:!t&&a})},e.createElement(y,p({onChange:u=>T(u.target.value),checked:d},s)));if(!(!d&&!c&&!O)){if(d&&t&&!c)return e.createElement(j,{key:s.value},C);if(!(!d&&t&&!c))return C}}))))};var ee=D;export{ee as default};
 //# sourceMappingURL=checkbox-category.js.map

package/react/form-content/checkbox-category.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../react/form-content/checkbox-category.tsx"],
-  "sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport Text from '../text';\nimport Checkbox from '../checkbox';\n\nimport ChevronRight from '../icons/24/arrow-right';\nimport ChevronUp from '../icons/24/arrow-up';\n\nimport { CheckboxCategory as Props } from './form-content.checkbox-list.types';\nimport VisuallyHidden from '../visually-hidden';\nimport { mod } from '../add-bem-modifiers';\nimport Collapse from '../collapse';\n\nconst CheckboxCategory: React.FC<React.PropsWithChildren<Props>> = ({\n  currentlySelectedValues = [],\n  id,\n  isSearching,\n  options,\n  searchResults = [],\n  selectAll,\n  selectAllLabel,\n  setMultipleSelectedValues = () => {},\n  setSelectedValue = () => {},\n  shouldShowItems = true,\n  removeAllValues = () => {},\n}) => {\n  const isExpandable = React.useMemo(\n    () => (selectAll ? true : false),\n    [selectAll],\n  );\n  const [availableOptions] = React.useState(\n    options.filter(button => !button.disabled),\n  );\n\n  const [isOpen, setIsOpen] = React.useState(isExpandable ? true : false);\n\n  const handleChange = (value: string) => {\n    setSelectedValue(id, value);\n  };\n\n  const handleSelectAll = () => {\n    if (currentlySelectedValues.length !== availableOptions.length) {\n      setMultipleSelectedValues(\n        id,\n        availableOptions.map(button => button.value),\n      );\n    } else {\n      removeAllValues(id);\n    }\n  };\n\n  React.useEffect(\n    () =>\n      isSearching\n        ? setIsOpen(true)\n        : isExpandable\n          ? setIsOpen(false)\n          : setIsOpen(true),\n    [isExpandable, isSearching, searchResults],\n  );\n\n  const disableCategory = options.every(checkbox => checkbox.disabled);\n\n  const hasSelectedValues = currentlySelectedValues.length > 0;\n\n  return (\n    <fieldset className=\"form-content__fieldset\">\n      {isExpandable && (\n        <div\n          className={mod('form-content__chevron-button-wrapper', {\n            hidden: isSearching,\n          })}\n        >\n          {selectAll ? (\n            <div className=\"form-content__select-all\">\n              <Checkbox\n                {...selectAll}\n                isLabelVisible={false}\n                checked={\n                  availableOptions.length > 0 &&\n                  currentlySelectedValues.length === availableOptions.length\n                }\n                onChange={handleSelectAll}\n                data-test-select-all\n                disabled={disableCategory}\n              />\n            </div>\n          ) : null}\n          <button\n            className=\"form-content__chevron-button\"\n            onClick={() => setIsOpen(currentState => !currentState)}\n            type=\"button\"\n          >\n            <Text\n              elementName=\"span\"\n              className={mod('form-content__select-all-label', {\n                disabled: disableCategory,\n              })}\n              size={Text.sizes.basic}\n            >\n              {selectAllLabel}\n            </Text>\n            <div className=\"form-content__checkbox-category-info-wrapper\">\n              {hasSelectedValues ? (\n                <Text\n                  className=\"form-content__checkbox-category-number\"\n                  size={Text.sizes.interface}\n                >\n                  {currentlySelectedValues.length}\n                </Text>\n              ) : undefined}\n              {isOpen ? (\n                <div className=\"form-content__checkbox-category-icon\">\n                  <ChevronUp />\n                </div>\n              ) : (\n                <div className=\"form-content__checkbox-category-icon\">\n                  <ChevronRight />\n                </div>\n              )}\n            </div>\n          </button>\n        </div>\n      )}\n\n      <Collapse\n        duration={300}\n        animateChildren={isExpandable ? true : false}\n        isOpen={isOpen}\n      >\n        {\n          <fieldset className=\"form-content__fieldset\">\n            {options.map(checkbox => {\n              const isInSearchResults = isSearching\n                ? searchResults.find(\n                    item =>\n                      item.key.toLowerCase() === checkbox.value.toLowerCase(),\n                  )\n                : undefined;\n\n              const isSelected = currentlySelectedValues.includes(\n                checkbox.value,\n              );\n\n              const node = (\n                <div\n                  key={checkbox.value}\n                  className={mod('form-content__checkbox-button', {\n                    nested: !isSearching && isExpandable,\n                  })}\n                >\n                  <Checkbox\n                    onChange={e => handleChange(e.target.value)}\n                    checked={isSelected}\n                    {...checkbox}\n                  />\n                </div>\n              );\n\n              if (!isSelected && !isInSearchResults && !shouldShowItems) {\n                return;\n              }\n\n              if (isSelected && isSearching && !isInSearchResults) {\n                return (\n                  <VisuallyHidden key={checkbox.value}>{node}</VisuallyHidden>\n                );\n              }\n\n              if (!isSelected && isSearching && !isInSearchResults) {\n                return;\n              }\n\n              return node;\n            })}\n          </fieldset>\n        }\n      </Collapse>\n    </fieldset>\n  );\n};\n\nexport default CheckboxCategory;\n"],
-  "mappings": "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",
-  "names": ["React", "Text", "Checkbox", "ChevronRight", "ChevronUp", "VisuallyHidden", "mod", "Collapse", "CheckboxCategory", "currentlySelectedValues", "id", "isSearching", "options", "searchResults", "selectAll", "selectAllLabel", "setMultipleSelectedValues", "setSelectedValue", "shouldShowItems", "removeAllValues", "isExpandable", "availableOptions", "button", "isOpen", "setIsOpen", "handleChange", "value", "handleSelectAll", "disableCategory", "checkbox", "hasSelectedValues", "__spreadProps", "__spreadValues", "currentState", "isInSearchResults", "item", "isSelected", "node", "e", "checkbox_category_default"]
+  "sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport Text from '../text';\nimport Checkbox from '../checkbox';\n\nimport ChevronRight from '../icons/24/arrow-right';\nimport ChevronUp from '../icons/24/arrow-up';\n\nimport { CheckboxCategory as Props } from './form-content.checkbox-list.types';\nimport VisuallyHidden from '../visually-hidden';\nimport { mod } from '../add-bem-modifiers';\nimport Collapse from '../collapse';\nimport { labelVariants } from '../checkbox/checkbox.types';\n\nconst CheckboxCategory: React.FC<React.PropsWithChildren<Props>> = ({\n  currentlySelectedValues = [],\n  id,\n  isSearching,\n  options,\n  searchResults = [],\n  selectAll,\n  selectAllLabel,\n  setMultipleSelectedValues = () => {},\n  setSelectedValue = () => {},\n  shouldShowItems = true,\n  removeAllValues = () => {},\n}) => {\n  const isExpandable = React.useMemo(\n    () => (selectAll ? true : false),\n    [selectAll],\n  );\n  const [availableOptions] = React.useState(\n    options.filter(button => !button.disabled),\n  );\n\n  const [isOpen, setIsOpen] = React.useState(isExpandable ? true : false);\n\n  const handleChange = (value: string) => {\n    setSelectedValue(id, value);\n  };\n\n  const handleSelectAll = () => {\n    if (currentlySelectedValues.length !== availableOptions.length) {\n      setMultipleSelectedValues(\n        id,\n        availableOptions.map(button => button.value),\n      );\n    } else {\n      removeAllValues(id);\n    }\n  };\n\n  React.useEffect(\n    () =>\n      isSearching\n        ? setIsOpen(true)\n        : isExpandable\n          ? setIsOpen(false)\n          : setIsOpen(true),\n    [isExpandable, isSearching, searchResults],\n  );\n\n  const disableCategory = options.every(checkbox => checkbox.disabled);\n\n  const hasSelectedValues = currentlySelectedValues.length > 0;\n\n  return (\n    <fieldset className=\"form-content__fieldset\">\n      {isExpandable && (\n        <div\n          className={mod('form-content__chevron-button-wrapper', {\n            hidden: isSearching,\n          })}\n        >\n          {selectAll ? (\n            <div className=\"form-content__select-all\">\n              <Checkbox\n                {...selectAll}\n                labelVariant={labelVariants.hidden}\n                checked={\n                  availableOptions.length > 0 &&\n                  currentlySelectedValues.length === availableOptions.length\n                }\n                onChange={handleSelectAll}\n                data-test-select-all\n                disabled={disableCategory}\n              />\n            </div>\n          ) : null}\n          <button\n            className=\"form-content__chevron-button\"\n            onClick={() => setIsOpen(currentState => !currentState)}\n            type=\"button\"\n          >\n            <Text\n              elementName=\"span\"\n              className={mod('form-content__select-all-label', {\n                disabled: disableCategory,\n              })}\n              size={Text.sizes.basic}\n            >\n              {selectAllLabel}\n            </Text>\n            <div className=\"form-content__checkbox-category-info-wrapper\">\n              {hasSelectedValues ? (\n                <Text\n                  className=\"form-content__checkbox-category-number\"\n                  size={Text.sizes.interface}\n                >\n                  {currentlySelectedValues.length}\n                </Text>\n              ) : undefined}\n              {isOpen ? (\n                <div className=\"form-content__checkbox-category-icon\">\n                  <ChevronUp />\n                </div>\n              ) : (\n                <div className=\"form-content__checkbox-category-icon\">\n                  <ChevronRight />\n                </div>\n              )}\n            </div>\n          </button>\n        </div>\n      )}\n\n      <Collapse\n        duration={300}\n        animateChildren={isExpandable ? true : false}\n        isOpen={isOpen}\n      >\n        {\n          <fieldset className=\"form-content__fieldset\">\n            {options.map(checkbox => {\n              const isInSearchResults = isSearching\n                ? searchResults.find(\n                    item =>\n                      item.key.toLowerCase() === checkbox.value.toLowerCase(),\n                  )\n                : undefined;\n\n              const isSelected = currentlySelectedValues.includes(\n                checkbox.value,\n              );\n\n              const node = (\n                <div\n                  key={checkbox.value}\n                  className={mod('form-content__checkbox-button', {\n                    nested: !isSearching && isExpandable,\n                  })}\n                >\n                  <Checkbox\n                    onChange={e => handleChange(e.target.value)}\n                    checked={isSelected}\n                    {...checkbox}\n                  />\n                </div>\n              );\n\n              if (!isSelected && !isInSearchResults && !shouldShowItems) {\n                return;\n              }\n\n              if (isSelected && isSearching && !isInSearchResults) {\n                return (\n                  <VisuallyHidden key={checkbox.value}>{node}</VisuallyHidden>\n                );\n              }\n\n              if (!isSelected && isSearching && !isInSearchResults) {\n                return;\n              }\n\n              return node;\n            })}\n          </fieldset>\n        }\n      </Collapse>\n    </fieldset>\n  );\n};\n\nexport default CheckboxCategory;\n"],
+  "mappings": "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",
+  "names": ["React", "Text", "Checkbox", "ChevronRight", "ChevronUp", "VisuallyHidden", "mod", "Collapse", "labelVariants", "CheckboxCategory", "currentlySelectedValues", "id", "isSearching", "options", "searchResults", "selectAll", "selectAllLabel", "setMultipleSelectedValues", "setSelectedValue", "shouldShowItems", "removeAllValues", "isExpandable", "availableOptions", "button", "isOpen", "setIsOpen", "handleChange", "value", "handleSelectAll", "disableCategory", "checkbox", "hasSelectedValues", "__spreadProps", "__spreadValues", "currentState", "isInSearchResults", "item", "isSelected", "node", "e", "checkbox_category_default"]
 }