@sats-group/ui-lib 81.5.0 → 81.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sats-group/ui-lib",
-  "version": "81.5.0",
+  "version": "81.6.1",
   "description": "SATS web user interface library",
   "engines": {
     "node": "^18 || ^20",

package/react/select/select.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import { labelPositions, Select as Props, variants } from './select.types';
+import { labelPositions, Select as Props, themes, variants } from './select.types';
 declare const SelectComponent: <OptionExtra>(props: Props<OptionExtra> & {
     ref?: React.Ref<HTMLSelectElement>;
 }) => React.ReactElement;
 declare const Select: typeof SelectComponent & {
     labelPositions: typeof labelPositions;
     variants: typeof variants;
+    themes: typeof themes;
 };
 export default Select;

package/react/select/select.js

@@ -1,2 +1,2 @@
-"use client";var L=Object.defineProperty;var o=Object.getOwnPropertySymbols;var x=Object.prototype.hasOwnProperty,C=Object.prototype.propertyIsEnumerable;var g=(e,s,t)=>s in e?L(e,s,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[s]=t,v=(e,s)=>{for(var t in s||(s={}))x.call(s,t)&&g(e,t,s[t]);if(o)for(var t of o(s))C.call(s,t)&&g(e,t,s[t]);return e};var E=(e,s)=>{var t={};for(var a in e)x.call(e,a)&&s.indexOf(a)<0&&(t[a]=e[a]);if(e!=null&&o)for(var a of o(e))s.indexOf(a)<0&&C.call(e,a)&&(t[a]=e[a]);return t};import i from"classnames";import*as l from"react";import $ from"../use-input-validation";import j from"../select-option/select-option";import r from"../text";import A from"../icons/18/arrow-down";import{labelPositions as b,variants as f}from"./select.types";const w=l.forwardRef((W,T)=>{var N=W,{children:e,className:s,id:t,isLabelVisible:a=!0,label:c,labelPosition:I=b.stacked,name:y,onChange:O=()=>{},onChangeOption:P=()=>{},options:u=[],required:m,variant:h=f.large,wide:p}=N,_=E(N,["children","className","id","isLabelVisible","label","labelPosition","name","onChange","onChangeOption","options","required","variant","wide"]);const[k,z,d]=$(),H=n=>{O(n),P(u.find(({value:M})=>M===n.target.value)),k(n)},S=m?l.createElement("span",{className:"select__asterisk"},"*"):null;return l.createElement("div",{className:i("select",s,{"select--error":d})},l.createElement("div",{className:i(`select__content select__content--position-${I}`,{"select__content--wide":p})},a?l.createElement("label",{className:"select__label",htmlFor:t},c||e?l.createElement("div",{className:"select__label-text"},l.createElement(r,{size:h===f.small?r.sizes.small:r.sizes.basic,theme:r.themes.emphasis},c),S,e):m?S:null):null,l.createElement("div",{className:i("select__native-wrapper",{"select__native-wrapper--wide":p})},l.createElement("select",v({"aria-label":a?void 0:c,className:i(`select__select select__select--variant-${h}`,{"select__select--wide":p}),id:t,name:y,onChange:H,onInvalid:n=>{_.onInvalid&&_.onInvalid(n),z(n)},ref:T,required:m},_),u.map(n=>l.createElement(j,v({key:n.value},n)))),l.createElement("span",{className:"select__chevron"},l.createElement(A,null))),d?l.createElement("div",{"aria-hidden":"true",className:"select__error"},d):null))});w.displayName="Select";const D=w,F=Object.assign(D,{labelPositions:b,variants:f});var Y=F;export{Y as default};
+"use client";var A=Object.defineProperty;var r=Object.getOwnPropertySymbols;var x=Object.prototype.hasOwnProperty,w=Object.prototype.propertyIsEnumerable;var b=(e,s,t)=>s in e?A(e,s,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[s]=t,f=(e,s)=>{for(var t in s||(s={}))x.call(s,t)&&b(e,t,s[t]);if(r)for(var t of r(s))w.call(s,t)&&b(e,t,s[t]);return e};var C=(e,s)=>{var t={};for(var n in e)x.call(e,n)&&s.indexOf(n)<0&&(t[n]=e[n]);if(e!=null&&r)for(var n of r(e))s.indexOf(n)<0&&w.call(e,n)&&(t[n]=e[n]);return t};import c from"classnames";import*as l from"react";import D from"../use-input-validation";import F from"../select-option/select-option";import i from"../text";import W from"../icons/18/arrow-down";import{labelPositions as E,themes as B,variants as h}from"./select.types";const y=l.forwardRef((J,z)=>{var S=J,{children:e,className:s,id:t,isLabelVisible:n=!0,label:m,labelPosition:$=E.stacked,name:O,onChange:P=()=>{},onChangeOption:T=()=>{},options:u=[],required:_,spaceBetween:k,theme:a,variant:N=h.large,wide:p}=S,v=C(S,["children","className","id","isLabelVisible","label","labelPosition","name","onChange","onChangeOption","options","required","spaceBetween","theme","variant","wide"]);const[H,M,d]=D(),L=o=>{P(o),T(u.find(({value:j})=>j===o.target.value)),H(o)},g=_?l.createElement("span",{className:"select__asterisk"},"*"):null;return l.createElement("div",{className:c("select",s,{"select--error":d})},l.createElement("div",{className:c(`select__content select__content--position-${$}`,{"select__content--wide":p,"select__content--space-between":k,[`select__content--theme-${a}`]:a})},n?l.createElement("label",{className:"select__label",htmlFor:t},m||e?l.createElement("div",{className:c("select__label-text",{[`select__label-text--theme-${a}`]:a})},l.createElement(i,{size:N===h.small?i.sizes.small:i.sizes.basic,theme:a===I.themes.ghost?i.themes.normal:i.themes.emphasis},m),g,e):_?g:null):null,l.createElement("div",{className:c("select__native-wrapper",{"select__native-wrapper--wide":p})},l.createElement("select",f({"aria-label":n?void 0:m,className:c(`select__select select__select--variant-${N}`,{"select__select--wide":p,[`select__select--theme-${a}`]:a}),id:t,name:O,onChange:L,onInvalid:o=>{v.onInvalid&&v.onInvalid(o),M(o)},ref:z,required:_},v),u.map(o=>l.createElement(F,f({key:o.value},o)))),l.createElement("span",{className:c("select__chevron",{[`select__chevron--theme-${a}`]:a})},l.createElement(W,null))),d?l.createElement("div",{"aria-hidden":"true",className:"select__error"},d):null))});y.displayName="Select";const G=y,I=Object.assign(G,{labelPositions:E,variants:h,themes:B});var R=I;export{R as default};
 //# sourceMappingURL=select.js.map

package/react/select/select.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../react/select/select.tsx"],
-  "sourcesContent": ["'use client';\n\nimport cn from 'classnames';\nimport * as React from 'react';\n\nimport useInputValidation from '../use-input-validation';\n\nimport Option from '../select-option/select-option';\nimport Text from '../text';\nimport SvgArrowDown from '../icons/18/arrow-down';\n\nimport { labelPositions, Select as Props, variants } from './select.types';\n\n// NOTE: `onChangeOption` works like `onChange` but returns the props for that option instead of an event object.\nconst RefSelect = React.forwardRef<\n  HTMLSelectElement,\n  React.PropsWithChildren<Props>\n>(\n  (\n    {\n      children,\n      className,\n      id,\n      isLabelVisible = true,\n      label,\n      labelPosition = labelPositions.stacked,\n      name,\n      onChange = () => {},\n      onChangeOption = () => {},\n      options = [],\n      required,\n      variant = variants.large,\n      wide,\n      ...restProps\n    },\n    ref,\n  ) => {\n    const [validationOnChange, onInvalid, error] = useInputValidation();\n\n    const onInputChange = (e: React.ChangeEvent<HTMLSelectElement>) => {\n      onChange(e);\n      onChangeOption(options.find(({ value }) => value === e.target.value));\n      validationOnChange(e);\n    };\n\n    const asterix = required ? (\n      <span className=\"select__asterisk\">*</span>\n    ) : null;\n\n    return (\n      <div className={cn('select', className, { 'select--error': error })}>\n        <div\n          className={cn(\n            `select__content select__content--position-${labelPosition}`,\n            { 'select__content--wide': wide },\n          )}\n        >\n          {isLabelVisible ? (\n            <label className=\"select__label\" htmlFor={id}>\n              {label || children ? (\n                <div className=\"select__label-text\">\n                  <Text\n                    size={\n                      variant === variants.small\n                        ? Text.sizes.small\n                        : Text.sizes.basic\n                    }\n                    theme={Text.themes.emphasis}\n                  >\n                    {label}\n                  </Text>\n                  {asterix}\n                  {children}\n                </div>\n              ) : required ? (\n                asterix\n              ) : null}\n            </label>\n          ) : null}\n          <div\n            className={cn('select__native-wrapper', {\n              'select__native-wrapper--wide': wide,\n            })}\n          >\n            <select\n              aria-label={isLabelVisible ? undefined : label}\n              className={cn(\n                `select__select select__select--variant-${variant}`,\n                {\n                  'select__select--wide': wide,\n                },\n              )}\n              id={id}\n              name={name}\n              onChange={onInputChange}\n              onInvalid={e => {\n                // NOTE: To not break compatibility\n                if (restProps.onInvalid) restProps.onInvalid(e);\n                onInvalid(e);\n              }}\n              ref={ref}\n              required={required}\n              {...restProps}\n            >\n              {options.map(option => (\n                <Option key={option.value} {...option} />\n              ))}\n            </select>\n            <span className=\"select__chevron\">\n              <SvgArrowDown />\n            </span>\n          </div>\n\n          {/* NOTE: This is aria-hidden because reporting of validation errors is handled by the browser */}\n          {error ? (\n            <div aria-hidden=\"true\" className=\"select__error\">\n              {error}\n            </div>\n          ) : null}\n        </div>\n      </div>\n    );\n  },\n);\n\n// NOTE: If this isn't set, stack traces say \"forwardRef\" instead of \"Select\"\nRefSelect.displayName = 'Select';\n\n// NOTE: Since `React.forwardRef` props aren't generic, the component is cast so that generics work as intended. See https://stackoverflow.com/a/58473012\nconst SelectComponent = RefSelect as <OptionExtra>(\n  props: Props<OptionExtra> & {\n    ref?: React.Ref<HTMLSelectElement>;\n  },\n) => React.ReactElement;\n\nconst Select: typeof SelectComponent & {\n  labelPositions: typeof labelPositions;\n  variants: typeof variants;\n} = Object.assign(SelectComponent, { labelPositions, variants });\n\nexport default Select;\n"],
-  "mappings": "wgBAEA,OAAOA,MAAQ,aACf,UAAYC,MAAW,QAEvB,OAAOC,MAAwB,0BAE/B,OAAOC,MAAY,iCACnB,OAAOC,MAAU,UACjB,OAAOC,MAAkB,yBAEzB,OAAS,kBAAAC,EAAiC,YAAAC,MAAgB,iBAG1D,MAAMC,EAAYP,EAAM,WAItB,CACEQ,EAgBAC,IACG,CAjBH,IAAAC,EAAAF,EACE,UAAAG,EACA,UAAAC,EACA,GAAAC,EACA,eAAAC,EAAiB,GACjB,MAAAC,EACA,cAAAC,EAAgBX,EAAe,QAC/B,KAAAY,EACA,SAAAC,EAAW,IAAM,CAAC,EAClB,eAAAC,EAAiB,IAAM,CAAC,EACxB,QAAAC,EAAU,CAAC,EACX,SAAAC,EACA,QAAAC,EAAUhB,EAAS,MACnB,KAAAiB,CAhCN,EAmBIb,EAcKc,EAAAC,EAdLf,EAcK,CAbH,WACA,YACA,KACA,iBACA,QACA,gBACA,OACA,WACA,iBACA,UACA,WACA,UACA,SAKF,KAAM,CAACgB,EAAoBC,EAAWC,CAAK,EAAI3B,EAAmB,EAE5D4B,EAAiBC,GAA4C,CACjEZ,EAASY,CAAC,EACVX,EAAeC,EAAQ,KAAK,CAAC,CAAE,MAAAW,CAAM,IAAMA,IAAUD,EAAE,OAAO,KAAK,CAAC,EACpEJ,EAAmBI,CAAC,CACtB,EAEME,EAAUX,EACdrB,EAAA,cAAC,QAAK,UAAU,oBAAmB,GAAC,EAClC,KAEJ,OACEA,EAAA,cAAC,OAAI,UAAWD,EAAG,SAAUa,EAAW,CAAE,gBAAiBgB,CAAM,CAAC,GAChE5B,EAAA,cAAC,OACC,UAAWD,EACT,6CAA6CiB,CAAa,GAC1D,CAAE,wBAAyBO,CAAK,CAClC,GAECT,EACCd,EAAA,cAAC,SAAM,UAAU,gBAAgB,QAASa,GACvCE,GAASJ,EACRX,EAAA,cAAC,OAAI,UAAU,sBACbA,EAAA,cAACG,EAAA,CACC,KACEmB,IAAYhB,EAAS,MACjBH,EAAK,MAAM,MACXA,EAAK,MAAM,MAEjB,MAAOA,EAAK,OAAO,UAElBY,CACH,EACCiB,EACArB,CACH,EACEU,EACFW,EACE,IACN,EACE,KACJhC,EAAA,cAAC,OACC,UAAWD,EAAG,yBAA0B,CACtC,+BAAgCwB,CAClC,CAAC,GAEDvB,EAAA,cAAC,SAAAiC,EAAA,CACC,aAAYnB,EAAiB,OAAYC,EACzC,UAAWhB,EACT,0CAA0CuB,CAAO,GACjD,CACE,uBAAwBC,CAC1B,CACF,EACA,GAAIV,EACJ,KAAMI,EACN,SAAUY,EACV,UAAWC,GAAK,CAEVN,EAAU,WAAWA,EAAU,UAAUM,CAAC,EAC9CH,EAAUG,CAAC,CACb,EACA,IAAKrB,EACL,SAAUY,GACNG,GAEHJ,EAAQ,IAAIc,GACXlC,EAAA,cAACE,EAAA+B,EAAA,CAAO,IAAKC,EAAO,OAAWA,EAAQ,CACxC,CACH,EACAlC,EAAA,cAAC,QAAK,UAAU,mBACdA,EAAA,cAACI,EAAA,IAAa,CAChB,CACF,EAGCwB,EACC5B,EAAA,cAAC,OAAI,cAAY,OAAO,UAAU,iBAC/B4B,CACH,EACE,IACN,CACF,CAEJ,CACF,EAGArB,EAAU,YAAc,SAGxB,MAAM4B,EAAkB5B,EAMlB6B,EAGF,OAAO,OAAOD,EAAiB,CAAE,eAAA9B,EAAgB,SAAAC,CAAS,CAAC,EAE/D,IAAO+B,EAAQD",
-  "names": ["cn", "React", "useInputValidation", "Option", "Text", "SvgArrowDown", "labelPositions", "variants", "RefSelect", "_a", "ref", "_b", "children", "className", "id", "isLabelVisible", "label", "labelPosition", "name", "onChange", "onChangeOption", "options", "required", "variant", "wide", "restProps", "__objRest", "validationOnChange", "onInvalid", "error", "onInputChange", "e", "value", "asterix", "__spreadValues", "option", "SelectComponent", "Select", "select_default"]
+  "sourcesContent": ["'use client';\n\nimport cn from 'classnames';\nimport * as React from 'react';\n\nimport useInputValidation from '../use-input-validation';\n\nimport Option from '../select-option/select-option';\nimport Text from '../text';\nimport SvgArrowDown from '../icons/18/arrow-down';\n\nimport {\n  labelPositions,\n  Select as Props,\n  themes,\n  variants,\n} from './select.types';\n\n// NOTE: `onChangeOption` works like `onChange` but returns the props for that option instead of an event object.\nconst RefSelect = React.forwardRef<\n  HTMLSelectElement,\n  React.PropsWithChildren<Props>\n>(\n  (\n    {\n      children,\n      className,\n      id,\n      isLabelVisible = true,\n      label,\n      labelPosition = labelPositions.stacked,\n      name,\n      onChange = () => {},\n      onChangeOption = () => {},\n      options = [],\n      required,\n      spaceBetween,\n      theme,\n      variant = variants.large,\n      wide,\n      ...restProps\n    },\n    ref,\n  ) => {\n    const [validationOnChange, onInvalid, error] = useInputValidation();\n\n    const onInputChange = (e: React.ChangeEvent<HTMLSelectElement>) => {\n      onChange(e);\n      onChangeOption(options.find(({ value }) => value === e.target.value));\n      validationOnChange(e);\n    };\n\n    const asterix = required ? (\n      <span className=\"select__asterisk\">*</span>\n    ) : null;\n\n    return (\n      <div className={cn('select', className, { 'select--error': error })}>\n        <div\n          className={cn(\n            `select__content select__content--position-${labelPosition}`,\n            {\n              'select__content--wide': wide,\n              'select__content--space-between': spaceBetween,\n              [`select__content--theme-${theme}`]: theme,\n            },\n          )}\n        >\n          {isLabelVisible ? (\n            <label className=\"select__label\" htmlFor={id}>\n              {label || children ? (\n                <div\n                  className={cn('select__label-text', {\n                    [`select__label-text--theme-${theme}`]: theme,\n                  })}\n                >\n                  <Text\n                    size={\n                      variant === variants.small\n                        ? Text.sizes.small\n                        : Text.sizes.basic\n                    }\n                    theme={\n                      theme === Select.themes.ghost\n                        ? Text.themes.normal\n                        : Text.themes.emphasis\n                    }\n                  >\n                    {label}\n                  </Text>\n                  {asterix}\n                  {children}\n                </div>\n              ) : required ? (\n                asterix\n              ) : null}\n            </label>\n          ) : null}\n          <div\n            className={cn('select__native-wrapper', {\n              'select__native-wrapper--wide': wide,\n            })}\n          >\n            <select\n              aria-label={isLabelVisible ? undefined : label}\n              className={cn(\n                `select__select select__select--variant-${variant}`,\n                {\n                  'select__select--wide': wide,\n                  [`select__select--theme-${theme}`]: theme,\n                },\n              )}\n              id={id}\n              name={name}\n              onChange={onInputChange}\n              onInvalid={e => {\n                // NOTE: To not break compatibility\n                if (restProps.onInvalid) restProps.onInvalid(e);\n                onInvalid(e);\n              }}\n              ref={ref}\n              required={required}\n              {...restProps}\n            >\n              {options.map(option => (\n                <Option key={option.value} {...option} />\n              ))}\n            </select>\n            <span\n              className={cn(`select__chevron`, {\n                [`select__chevron--theme-${theme}`]: theme,\n              })}\n            >\n              <SvgArrowDown />\n            </span>\n          </div>\n\n          {/* NOTE: This is aria-hidden because reporting of validation errors is handled by the browser */}\n          {error ? (\n            <div aria-hidden=\"true\" className=\"select__error\">\n              {error}\n            </div>\n          ) : null}\n        </div>\n      </div>\n    );\n  },\n);\n\n// NOTE: If this isn't set, stack traces say \"forwardRef\" instead of \"Select\"\nRefSelect.displayName = 'Select';\n\n// NOTE: Since `React.forwardRef` props aren't generic, the component is cast so that generics work as intended. See https://stackoverflow.com/a/58473012\nconst SelectComponent = RefSelect as <OptionExtra>(\n  props: Props<OptionExtra> & {\n    ref?: React.Ref<HTMLSelectElement>;\n  },\n) => React.ReactElement;\n\nconst Select: typeof SelectComponent & {\n  labelPositions: typeof labelPositions;\n  variants: typeof variants;\n  themes: typeof themes;\n} = Object.assign(SelectComponent, { labelPositions, variants, themes });\n\nexport default Select;\n"],
+  "mappings": "wgBAEA,OAAOA,MAAQ,aACf,UAAYC,MAAW,QAEvB,OAAOC,MAAwB,0BAE/B,OAAOC,MAAY,iCACnB,OAAOC,MAAU,UACjB,OAAOC,MAAkB,yBAEzB,OACE,kBAAAC,EAEA,UAAAC,EACA,YAAAC,MACK,iBAGP,MAAMC,EAAYR,EAAM,WAItB,CACES,EAkBAC,IACG,CAnBH,IAAAC,EAAAF,EACE,UAAAG,EACA,UAAAC,EACA,GAAAC,EACA,eAAAC,EAAiB,GACjB,MAAAC,EACA,cAAAC,EAAgBZ,EAAe,QAC/B,KAAAa,EACA,SAAAC,EAAW,IAAM,CAAC,EAClB,eAAAC,EAAiB,IAAM,CAAC,EACxB,QAAAC,EAAU,CAAC,EACX,SAAAC,EACA,aAAAC,EACA,MAAAC,EACA,QAAAC,EAAUlB,EAAS,MACnB,KAAAmB,CAvCN,EAwBIf,EAgBKgB,EAAAC,EAhBLjB,EAgBK,CAfH,WACA,YACA,KACA,iBACA,QACA,gBACA,OACA,WACA,iBACA,UACA,WACA,eACA,QACA,UACA,SAKF,KAAM,CAACkB,EAAoBC,EAAWC,CAAK,EAAI9B,EAAmB,EAE5D+B,EAAiBC,GAA4C,CACjEd,EAASc,CAAC,EACVb,EAAeC,EAAQ,KAAK,CAAC,CAAE,MAAAa,CAAM,IAAMA,IAAUD,EAAE,OAAO,KAAK,CAAC,EACpEJ,EAAmBI,CAAC,CACtB,EAEME,EAAUb,EACdtB,EAAA,cAAC,QAAK,UAAU,oBAAmB,GAAC,EAClC,KAEJ,OACEA,EAAA,cAAC,OAAI,UAAWD,EAAG,SAAUc,EAAW,CAAE,gBAAiBkB,CAAM,CAAC,GAChE/B,EAAA,cAAC,OACC,UAAWD,EACT,6CAA6CkB,CAAa,GAC1D,CACE,wBAAyBS,EACzB,iCAAkCH,EAClC,CAAC,0BAA0BC,CAAK,EAAE,EAAGA,CACvC,CACF,GAECT,EACCf,EAAA,cAAC,SAAM,UAAU,gBAAgB,QAASc,GACvCE,GAASJ,EACRZ,EAAA,cAAC,OACC,UAAWD,EAAG,qBAAsB,CAClC,CAAC,6BAA6ByB,CAAK,EAAE,EAAGA,CAC1C,CAAC,GAEDxB,EAAA,cAACG,EAAA,CACC,KACEsB,IAAYlB,EAAS,MACjBJ,EAAK,MAAM,MACXA,EAAK,MAAM,MAEjB,MACEqB,IAAUY,EAAO,OAAO,MACpBjC,EAAK,OAAO,OACZA,EAAK,OAAO,UAGjBa,CACH,EACCmB,EACAvB,CACH,EACEU,EACFa,EACE,IACN,EACE,KACJnC,EAAA,cAAC,OACC,UAAWD,EAAG,yBAA0B,CACtC,+BAAgC2B,CAClC,CAAC,GAED1B,EAAA,cAAC,SAAAqC,EAAA,CACC,aAAYtB,EAAiB,OAAYC,EACzC,UAAWjB,EACT,0CAA0C0B,CAAO,GACjD,CACE,uBAAwBC,EACxB,CAAC,yBAAyBF,CAAK,EAAE,EAAGA,CACtC,CACF,EACA,GAAIV,EACJ,KAAMI,EACN,SAAUc,EACV,UAAWC,GAAK,CAEVN,EAAU,WAAWA,EAAU,UAAUM,CAAC,EAC9CH,EAAUG,CAAC,CACb,EACA,IAAKvB,EACL,SAAUY,GACNK,GAEHN,EAAQ,IAAIiB,GACXtC,EAAA,cAACE,EAAAmC,EAAA,CAAO,IAAKC,EAAO,OAAWA,EAAQ,CACxC,CACH,EACAtC,EAAA,cAAC,QACC,UAAWD,EAAG,kBAAmB,CAC/B,CAAC,0BAA0ByB,CAAK,EAAE,EAAGA,CACvC,CAAC,GAEDxB,EAAA,cAACI,EAAA,IAAa,CAChB,CACF,EAGC2B,EACC/B,EAAA,cAAC,OAAI,cAAY,OAAO,UAAU,iBAC/B+B,CACH,EACE,IACN,CACF,CAEJ,CACF,EAGAvB,EAAU,YAAc,SAGxB,MAAM+B,EAAkB/B,EAMlB4B,EAIF,OAAO,OAAOG,EAAiB,CAAE,eAAAlC,EAAgB,SAAAE,EAAU,OAAAD,CAAO,CAAC,EAEvE,IAAOkC,EAAQJ",
+  "names": ["cn", "React", "useInputValidation", "Option", "Text", "SvgArrowDown", "labelPositions", "themes", "variants", "RefSelect", "_a", "ref", "_b", "children", "className", "id", "isLabelVisible", "label", "labelPosition", "name", "onChange", "onChangeOption", "options", "required", "spaceBetween", "theme", "variant", "wide", "restProps", "__objRest", "validationOnChange", "onInvalid", "error", "onInputChange", "e", "value", "asterix", "Select", "__spreadValues", "option", "SelectComponent", "select_default"]
 }

package/react/select/select.scss

@@ -22,6 +22,19 @@
     &--wide {
       flex-wrap: nowrap;
     }
+
+    &--space-between {
+      justify-content: space-between;
+    }
+
+    &--theme-ghost {
+      align-items: center;
+      display: flex;
+      flex-direction: row;
+      gap: spacing.$xs;
+      flex-wrap: wrap;
+      padding-left: spacing.$xs;
+    }
   }
 
   // NOTE: Specificity hack
@@ -54,6 +67,10 @@
     pointer-events: none;
     display: flex;
     align-items: center;
+
+    &--theme-ghost {
+      right: spacing.$xs;
+    }
   }
 
   &__select {
@@ -84,6 +101,13 @@
       padding-left: spacing.$m;
     }
 
+    &--theme-ghost {
+      border: 0;
+      padding-top: spacing.$xs;
+      padding-bottom: spacing.$xs;
+      padding-left: spacing.$xs;
+    }
+
     @media (hover: hover) {
       &:hover {
         &:not(:disabled) {
@@ -127,5 +151,9 @@
   &__label-text {
     display: flex;
     flex-direction: row;
+
+    &--theme-ghost {
+      color: var(--on-background-primary-alternate);
+    }
   }
 }

package/react/select/select.types.d.ts

@@ -8,6 +8,9 @@ export declare const variants: {
     readonly small: "small";
     readonly large: "large";
 };
+export declare const themes: {
+    readonly ghost: "ghost";
+};
 export type Select<OptionExtra = any> = {
     id: string;
     isLabelVisible?: boolean;
@@ -18,4 +21,6 @@ export type Select<OptionExtra = any> = {
     options?: SelectOption<OptionExtra>[];
     variant?: ObjectValues<typeof variants>;
     wide?: boolean;
+    theme?: ObjectValues<typeof themes>;
+    spaceBetween?: boolean;
 } & SelectHtmlProps;

package/react/select/select.types.js

@@ -1,2 +1,2 @@
-const l={inline:"inline",stacked:"stacked"},a={small:"small",large:"large"};export{l as labelPositions,a as variants};
+const a={inline:"inline",stacked:"stacked"},i={small:"small",large:"large"},l={ghost:"ghost"};export{a as labelPositions,l as themes,i as variants};
 //# sourceMappingURL=select.types.js.map

package/react/select/select.types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../react/select/select.types.ts"],
-  "sourcesContent": ["import { ObjectValues, SelectHtmlProps } from '../types';\n\nimport { SelectOption } from '../select-option/select-option.types';\n\nexport const labelPositions = {\n  inline: 'inline',\n  stacked: 'stacked',\n} as const;\n\nexport const variants = {\n  small: 'small',\n  large: 'large',\n} as const;\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type Select<OptionExtra = any> = {\n  id: string;\n  isLabelVisible?: boolean;\n  label?: string;\n  labelPosition?: ObjectValues<typeof labelPositions>;\n  name: string;\n  onChangeOption?: (option?: SelectOption<OptionExtra>) => void;\n  options?: SelectOption<OptionExtra>[];\n  variant?: ObjectValues<typeof variants>;\n  wide?: boolean;\n} & SelectHtmlProps;\n"],
-  "mappings": "AAIO,MAAMA,EAAiB,CAC5B,OAAQ,SACR,QAAS,SACX,EAEaC,EAAW,CACtB,MAAO,QACP,MAAO,OACT",
-  "names": ["labelPositions", "variants"]
+  "sourcesContent": ["import { ObjectValues, SelectHtmlProps } from '../types';\n\nimport { SelectOption } from '../select-option/select-option.types';\n\nexport const labelPositions = {\n  inline: 'inline',\n  stacked: 'stacked',\n} as const;\n\nexport const variants = {\n  small: 'small',\n  large: 'large',\n} as const;\n\nexport const themes = {\n  ghost: 'ghost',\n} as const;\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type Select<OptionExtra = any> = {\n  id: string;\n  isLabelVisible?: boolean;\n  label?: string;\n  labelPosition?: ObjectValues<typeof labelPositions>;\n  name: string;\n  onChangeOption?: (option?: SelectOption<OptionExtra>) => void;\n  options?: SelectOption<OptionExtra>[];\n  variant?: ObjectValues<typeof variants>;\n  wide?: boolean;\n  theme?: ObjectValues<typeof themes>;\n  spaceBetween?: boolean;\n} & SelectHtmlProps;\n"],
+  "mappings": "AAIO,MAAMA,EAAiB,CAC5B,OAAQ,SACR,QAAS,SACX,EAEaC,EAAW,CACtB,MAAO,QACP,MAAO,OACT,EAEaC,EAAS,CACpB,MAAO,OACT",
+  "names": ["labelPositions", "variants", "themes"]
 }