@sats-group/ui-lib 89.0.2 → 89.1.0

package/react/search/search.types.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../react/search/search.types.ts"],
+  "sources": ["../../../library/react/search/search.types.ts"],
   "sourcesContent": ["import type { ReactElement } from 'react';\nimport type { Button } from '../button/button.types';\nimport type { InputHtmlProps, ObjectValues } from '../types';\nimport type { Messages } from '../use-input-validation.types';\n\nexport const themes = {\n  floating: 'floating',\n  inline: 'inline',\n} as const;\n\nexport const inputSizes = {\n  small: 'small',\n  large: 'large',\n} as const;\n\nexport const variants = {\n  default: 'default',\n  fixed: 'fixed',\n} as const;\n\nexport const expandDirections = {\n  left: 'left',\n  right: 'right',\n} as const;\n\nexport type Search = {\n  button?: Button;\n  clear: Button;\n  customErrorMessages?: Messages;\n  expandable?: {\n    close: Button;\n    direction?: ObjectValues<typeof expandDirections>;\n  };\n  helpIcon?: ReactElement;\n  helpText?: string;\n  inputSize?: ObjectValues<typeof inputSizes>; //NOTE: This is not named `size` due to InputHTMLProps having a `size` attribute that will clash\n  isLabelVisible?: boolean;\n  label: string;\n  name: string;\n  onChangeFunc?: (arg: string) => void;\n  onClear?: () => void;\n  onInputClick?: () => void;\n  theme?: ObjectValues<typeof themes>;\n  variant?: ObjectValues<typeof variants>;\n} & InputHtmlProps;\n"],
   "mappings": "AAKO,MAAMA,EAAS,CACpB,SAAU,WACV,OAAQ,QACV,EAEaC,EAAa,CACxB,MAAO,QACP,MAAO,OACT,EAEaC,EAAW,CACtB,QAAS,UACT,MAAO,OACT,EAEaC,EAAmB,CAC9B,KAAM,OACN,MAAO,OACT",
   "names": ["themes", "inputSizes", "variants", "expandDirections"]

package/react/segmented-controller/index.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../react/segmented-controller/index.ts"],
+  "sources": ["../../../library/react/segmented-controller/index.ts"],
   "sourcesContent": ["import SegmentedController from './segmented-controller';\nexport default SegmentedController;\n"],
   "mappings": "AAAA,OAAOA,MAAyB,yBAChC,IAAOC,EAAQD",
   "names": ["SegmentedController", "segmented_controller_default"]

package/react/segmented-controller/segmented-controller.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../react/segmented-controller/segmented-controller.tsx"],
+  "sources": ["../../../library/react/segmented-controller/segmented-controller.tsx"],
   "sourcesContent": ["import React, { useState } from 'react';\nimport cn from 'classnames';\nimport Text from '../text';\n\nimport type { SegmentedController as Props } from './segmented-controller.types';\n\nconst SegmentedController: React.FunctionComponent<Props> = ({\n  tabs,\n  onSelectionChange,\n}) => {\n  const [localTabs, setLocalTabs] = useState(tabs ?? []);\n  const columnCount = localTabs ? localTabs.length : 0;\n  const selectedIndex = localTabs.findIndex(tab => tab.isSelected);\n  const changeView = (clickedIndex: number, id: string) => {\n    setLocalTabs(prevTabs =>\n      prevTabs.map((tab, index) => ({\n        ...tab,\n        isSelected: index === clickedIndex,\n      })),\n    );\n    onSelectionChange?.(id);\n  };\n\n  return (\n    <div className=\"segmented-controller\">\n      <div\n        className={cn('segmented-controller__tabs', {\n          [`segmented-controller__tabs--col-${columnCount}`]: columnCount,\n          [`segmented-controller__tabs--selected-${selectedIndex}`]:\n            selectedIndex,\n        })}\n      >\n        <div\n          className={cn('segmented-controller__indicator', {\n            [`segmented-controller__indicator--col-${columnCount}`]:\n              columnCount,\n            [`segmented-controller__indicator--pos-${selectedIndex}`]:\n              selectedIndex,\n          })}\n        />\n        {localTabs\n          ? localTabs.map(\n              ({ label, isSelected, leadingIcon, id, ...props }, index) => (\n                <button\n                  {...props}\n                  key={label}\n                  onClick={() => changeView(index, id)}\n                  type=\"button\"\n                  className={cn('segmented-controller__tab', {\n                    'segmented-controller__tab--selected': isSelected,\n                  })}\n                >\n                  <Text\n                    className=\"segmented-controller__tab-title\"\n                    size={Text.sizes.small}\n                    theme={Text.themes.emphasis}\n                  >\n                    {leadingIcon ? (\n                      <div className=\"segmented-controller__tab-icon\">\n                        {leadingIcon}\n                      </div>\n                    ) : null}\n                    <div className=\"segmented-controller__tab-label\">\n                      {label}\n                    </div>\n                  </Text>\n                </button>\n              ),\n            )\n          : null}\n      </div>\n    </div>\n  );\n};\n\nexport default SegmentedController;\n"],
   "mappings": "+kBAAA,OAAOA,GAAS,YAAAC,MAAgB,QAChC,OAAOC,MAAQ,aACf,OAAOC,MAAU,UAIjB,MAAMC,EAAsD,CAAC,CAC3D,KAAAC,EACA,kBAAAC,CACF,IAAM,CACJ,KAAM,CAACC,EAAWC,CAAY,EAAIP,EAASI,GAAA,KAAAA,EAAQ,CAAC,CAAC,EAC/CI,EAAcF,EAAYA,EAAU,OAAS,EAC7CG,EAAgBH,EAAU,UAAUI,GAAOA,EAAI,UAAU,EACzDC,EAAa,CAACC,EAAsBC,IAAe,CACvDN,EAAaO,GACXA,EAAS,IAAI,CAACJ,EAAKK,IAAWC,EAAAC,EAAA,GACzBP,GADyB,CAE5B,WAAYK,IAAUH,CACxB,EAAE,CACJ,EACAP,GAAA,MAAAA,EAAoBQ,EACtB,EAEA,OACEd,EAAA,cAAC,OAAI,UAAU,wBACbA,EAAA,cAAC,OACC,UAAWE,EAAG,6BAA8B,CAC1C,CAAC,mCAAmCO,CAAW,EAAE,EAAGA,EACpD,CAAC,wCAAwCC,CAAa,EAAE,EACtDA,CACJ,CAAC,GAEDV,EAAA,cAAC,OACC,UAAWE,EAAG,kCAAmC,CAC/C,CAAC,wCAAwCO,CAAW,EAAE,EACpDA,EACF,CAAC,wCAAwCC,CAAa,EAAE,EACtDA,CACJ,CAAC,EACH,EACCH,EACGA,EAAU,IACR,CAACY,EAAkDH,IAAO,CAAzD,IAAAI,EAAAD,EAAE,OAAAE,EAAO,WAAAC,EAAY,YAAAC,EAAa,GAAAT,CA1CjD,EA0CeM,EAAyCI,EAAAC,EAAzCL,EAAyC,CAAvC,QAAO,aAAY,cAAa,OACjC,OAAApB,EAAA,cAAC,SAAAiB,EAAAC,EAAA,GACKM,GADL,CAEC,IAAKH,EACL,QAAS,IAAMT,EAAWI,EAAOF,CAAE,EACnC,KAAK,SACL,UAAWZ,EAAG,4BAA6B,CACzC,sCAAuCoB,CACzC,CAAC,IAEDtB,EAAA,cAACG,EAAA,CACC,UAAU,kCACV,KAAMA,EAAK,MAAM,MACjB,MAAOA,EAAK,OAAO,UAElBoB,EACCvB,EAAA,cAAC,OAAI,UAAU,kCACZuB,CACH,EACE,KACJvB,EAAA,cAAC,OAAI,UAAU,mCACZqB,CACH,CACF,CACF,EAEJ,EACA,IACN,CACF,CAEJ,EAEA,IAAOK,EAAQtB",
   "names": ["React", "useState", "cn", "Text", "SegmentedController", "tabs", "onSelectionChange", "localTabs", "setLocalTabs", "columnCount", "selectedIndex", "tab", "changeView", "clickedIndex", "id", "prevTabs", "index", "__spreadProps", "__spreadValues", "_a", "_b", "label", "isSelected", "leadingIcon", "props", "__objRest", "segmented_controller_default"]

package/react/select/index.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../react/select/index.ts"],
+  "sources": ["../../../library/react/select/index.ts"],
   "sourcesContent": ["import Select from './select';\nexport default Select;\n"],
   "mappings": "AAAA,OAAOA,MAAY,WACnB,IAAOC,EAAQD",
   "names": ["Select", "select_default"]

package/react/select/select.d.ts

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

package/react/select/select.js

@@ -1,2 +1,2 @@
-"use client";var F=Object.defineProperty;var r=Object.getOwnPropertySymbols;var y=Object.prototype.hasOwnProperty,I=Object.prototype.propertyIsEnumerable;var w=(t,l,e)=>l in t?F(t,l,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[l]=e,f=(t,l)=>{for(var e in l||(l={}))y.call(l,e)&&w(t,e,l[e]);if(r)for(var e of r(l))I.call(l,e)&&w(t,e,l[e]);return t};var T=(t,l)=>{var e={};for(var s in t)y.call(t,s)&&l.indexOf(s)<0&&(e[s]=t[s]);if(t!=null&&r)for(var s of r(t))l.indexOf(s)<0&&I.call(t,s)&&(e[s]=t[s]);return e};import c from"classnames";import*as n from"react";import W from"../use-input-validation";import B from"../select-option/select-option";import o from"../text";import G from"../icons/18/arrow-down";import J from"../icons/16/error";import{labelPositions as $,themes as K,variants as h}from"./select.types";const g=n.forwardRef((U,H)=>{var b=U,{children:t,className:l,customErrorMessages:e,hasError:s,id:S,isLabelVisible:u=!0,label:m,labelPosition:O=$.stacked,name:P,onChange:E=()=>{},onChangeOption:k=()=>{},options:N=[],required:p,theme:a,variant:x=h.large,wide:_}=b,v=T(b,["children","className","customErrorMessages","hasError","id","isLabelVisible","label","labelPosition","name","onChange","onChangeOption","options","required","theme","variant","wide"]);const[L,j,d]=W(e,e==null?void 0:e.defaultError,s),A=i=>{E(i),k(N.find(({value:D})=>D===i.target.value)),L(i)},C=p?n.createElement("span",{className:"select__asterisk"},"*"):null;return n.createElement("div",{className:c("select",l,{"select--error":d})},n.createElement("div",{className:c(`select__content select__content--position-${O}`,{"select__content--wide":_,[`select__content--theme-${a}`]:a})},u?n.createElement("label",{className:"select__label",htmlFor:S},m||t?n.createElement("div",{className:c("select__label-text",{[`select__label-text--theme-${a}`]:a})},n.createElement(o,{size:x===h.small?o.sizes.small:o.sizes.basic,theme:a===z.themes.ghost?o.themes.normal:o.themes.emphasis},m),C,t):p?C:null):null,n.createElement("div",{className:c("select__native-wrapper",{"select__native-wrapper--wide":_})},n.createElement("select",f({"aria-label":u?void 0:m,className:c(`select__select select__select--variant-${x}`,{"select__select--wide":_,[`select__select--theme-${a}`]:a}),id:S,name:P,onChange:A,onInvalid:i=>{v.onInvalid&&v.onInvalid(i),j(i)},ref:H,required:p},v),N.map(i=>n.createElement(B,f({key:i.value},i)))),n.createElement("span",{className:c("select__chevron",{[`select__chevron--theme-${a}`]:a})},n.createElement(G,null))),d?n.createElement("div",{"aria-hidden":"true",className:"select__error"},n.createElement(J,null),n.createElement(o,{size:o.sizes.interface},d)):null))});g.displayName="Select";const Q=g,z=Object.assign(Q,{labelPositions:$,variants:h,themes:K});var le=z;export{le as default};
+"use client";var W=Object.defineProperty;var c=Object.getOwnPropertySymbols;var I=Object.prototype.hasOwnProperty,T=Object.prototype.propertyIsEnumerable;var w=(t,l,e)=>l in t?W(t,l,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[l]=e,f=(t,l)=>{for(var e in l||(l={}))I.call(l,e)&&w(t,e,l[e]);if(c)for(var e of c(l))T.call(l,e)&&w(t,e,l[e]);return t};var $=(t,l)=>{var e={};for(var n in t)I.call(t,n)&&l.indexOf(n)<0&&(e[n]=t[n]);if(t!=null&&c)for(var n of c(t))l.indexOf(n)<0&&T.call(t,n)&&(e[n]=t[n]);return e};import r from"classnames";import*as a from"react";import B from"../use-input-validation";import G from"../select-option/select-option";import o from"../text";import J from"../icons/18/arrow-down";import K from"../icons/16/error";import{labelPositions as g,labelVariants as h,themes as Q,variants as b}from"./select.types";const z=a.forwardRef((X,L)=>{var y=X,{children:t,className:l,customErrorMessages:e,hasError:n,id:S,isLabelVisible:u=!0,label:m,labelPosition:P=g.stacked,name:E,onChange:k=()=>{},onChangeOption:H=()=>{},options:N=[],required:p,theme:s,variant:x=b.large,labelVariant:V=h.bold,wide:_}=y,d=$(y,["children","className","customErrorMessages","hasError","id","isLabelVisible","label","labelPosition","name","onChange","onChangeOption","options","required","theme","variant","labelVariant","wide"]);const[j,A,v]=B(e,e==null?void 0:e.defaultError,n),D=i=>{k(i),H(N.find(({value:F})=>F===i.target.value)),j(i)},C=p?a.createElement("span",{className:"select__asterisk"},"*"):null;return a.createElement("div",{className:r("select",l,{"select--error":v})},a.createElement("div",{className:r(`select__content select__content--position-${P}`,{"select__content--wide":_,[`select__content--theme-${s}`]:s})},u?a.createElement("label",{className:"select__label",htmlFor:S},m||t?a.createElement("div",{className:r("select__label-text",{[`select__label-text--theme-${s}`]:s})},a.createElement(o,{size:x===b.small?o.sizes.small:o.sizes.basic,theme:s===O.themes.ghost||V===h.basic?o.themes.normal:o.themes.emphasis},m),C,t):p?C:null):null,a.createElement("div",{className:r("select__native-wrapper",{"select__native-wrapper--wide":_})},a.createElement("select",f({"aria-label":u?void 0:m,className:r(`select__select select__select--variant-${x}`,{"select__select--wide":_,[`select__select--theme-${s}`]:s}),id:S,name:E,onChange:D,onInvalid:i=>{d.onInvalid&&d.onInvalid(i),A(i)},ref:L,required:p},d),N.map(i=>a.createElement(G,f({key:i.value},i)))),a.createElement("span",{className:r("select__chevron",{[`select__chevron--theme-${s}`]:s})},a.createElement(J,null))),v?a.createElement("div",{"aria-hidden":"true",className:"select__error"},a.createElement(K,null),a.createElement(o,{size:o.sizes.interface},v)):null))});z.displayName="Select";const U=z,O=Object.assign(U,{labelPositions:g,variants:b,themes:Q,labelVariants:h});var ne=O;export{ne 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';\nimport SvgError from '../icons/16/error';\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      customErrorMessages,\n      hasError,\n      id,\n      isLabelVisible = true,\n      label,\n      labelPosition = labelPositions.stacked,\n      name,\n      onChange = () => {},\n      onChangeOption = () => {},\n      options = [],\n      required,\n      theme,\n      variant = variants.large,\n      wide,\n      ...restProps\n    },\n    ref,\n  ) => {\n    const [validationOnChange, onInvalid, error] = useInputValidation(\n      customErrorMessages,\n      customErrorMessages?.defaultError,\n      hasError,\n    );\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--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              <SvgError />\n              <Text size={Text.sizes.interface}>{error}</Text>\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": "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",
-  "names": ["cn", "React", "useInputValidation", "Option", "Text", "SvgArrowDown", "SvgError", "labelPositions", "themes", "variants", "RefSelect", "_a", "ref", "_b", "children", "className", "customErrorMessages", "hasError", "id", "isLabelVisible", "label", "labelPosition", "name", "onChange", "onChangeOption", "options", "required", "theme", "variant", "wide", "restProps", "__objRest", "validationOnChange", "onInvalid", "error", "onInputChange", "e", "value", "asterix", "Select", "__spreadValues", "option", "SelectComponent", "select_default"]
+  "sources": ["../../../library/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';\nimport SvgError from '../icons/16/error';\n\nimport {\n  labelPositions,\n  labelVariants,\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      customErrorMessages,\n      hasError,\n      id,\n      isLabelVisible = true,\n      label,\n      labelPosition = labelPositions.stacked,\n      name,\n      onChange = () => {},\n      onChangeOption = () => {},\n      options = [],\n      required,\n      theme,\n      variant = variants.large,\n      labelVariant = labelVariants.bold,\n      wide,\n      ...restProps\n    },\n    ref,\n  ) => {\n    const [validationOnChange, onInvalid, error] = useInputValidation(\n      customErrorMessages,\n      customErrorMessages?.defaultError,\n      hasError,\n    );\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--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                      labelVariant === labelVariants.basic\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              <SvgError />\n              <Text size={Text.sizes.interface}>{error}</Text>\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  labelVariants: typeof labelVariants;\n} = Object.assign(SelectComponent, {\n  labelPositions,\n  variants,\n  themes,\n  labelVariants,\n});\n\nexport default Select;\n"],
+  "mappings": "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",
+  "names": ["cn", "React", "useInputValidation", "Option", "Text", "SvgArrowDown", "SvgError", "labelPositions", "labelVariants", "themes", "variants", "RefSelect", "_a", "ref", "_b", "children", "className", "customErrorMessages", "hasError", "id", "isLabelVisible", "label", "labelPosition", "name", "onChange", "onChangeOption", "options", "required", "theme", "variant", "labelVariant", "wide", "restProps", "__objRest", "validationOnChange", "onInvalid", "error", "onInputChange", "e", "value", "asterix", "Select", "__spreadValues", "option", "SelectComponent", "select_default"]
 }

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

@@ -12,6 +12,10 @@ export declare const variants: {
 export declare const themes: {
     readonly ghost: "ghost";
 };
+export declare const labelVariants: {
+    readonly bold: "bold";
+    readonly basic: "basic";
+};
 export type Select<OptionExtra = any> = {
     customErrorMessages?: Messages;
     hasError?: boolean;
@@ -25,4 +29,5 @@ export type Select<OptionExtra = any> = {
     variant?: ObjectValues<typeof variants>;
     wide?: boolean;
     theme?: ObjectValues<typeof themes>;
+    labelVariant?: ObjectValues<typeof labelVariants>;
 } & SelectHtmlProps;

package/react/select/select.types.js

@@ -1,2 +1,2 @@
-const l={inline:"inline",stacked:"stacked"},r={small:"small",large:"large"},p={ghost:"ghost"};export{l as labelPositions,p as themes,r as variants};
+const i={inline:"inline",stacked:"stacked"},r={small:"small",large:"large"},c={ghost:"ghost"},p={bold:"bold",basic:"basic"};export{i as labelPositions,p as labelVariants,c as themes,r 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';\nimport { Messages } from '../use-input-validation.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  customErrorMessages?: Messages;\n  hasError?: boolean;\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} & SelectHtmlProps;\n"],
-  "mappings": "AAKO,MAAMA,EAAiB,CAC5B,OAAQ,SACR,QAAS,SACX,EAEaC,EAAW,CACtB,MAAO,QACP,MAAO,OACT,EAEaC,EAAS,CACpB,MAAO,OACT",
-  "names": ["labelPositions", "variants", "themes"]
+  "sources": ["../../../library/react/select/select.types.ts"],
+  "sourcesContent": ["import { ObjectValues, SelectHtmlProps } from '../types';\n\nimport { SelectOption } from '../select-option/select-option.types';\nimport { Messages } from '../use-input-validation.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\nexport const labelVariants = {\n  bold: 'bold',\n  basic: 'basic',\n} as const;\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type Select<OptionExtra = any> = {\n  customErrorMessages?: Messages;\n  hasError?: boolean;\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  labelVariant?: ObjectValues<typeof labelVariants>;\n} & SelectHtmlProps;\n"],
+  "mappings": "AAKO,MAAMA,EAAiB,CAC5B,OAAQ,SACR,QAAS,SACX,EAEaC,EAAW,CACtB,MAAO,QACP,MAAO,OACT,EAEaC,EAAS,CACpB,MAAO,OACT,EAEaC,EAAgB,CAC3B,KAAM,OACN,MAAO,OACT",
+  "names": ["labelPositions", "variants", "themes", "labelVariants"]
 }

package/react/select-option/index.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../react/select-option/index.ts"],
+  "sources": ["../../../library/react/select-option/index.ts"],
   "sourcesContent": ["import SelectOption from './select-option';\nexport default SelectOption;\n"],
   "mappings": "AAAA,OAAOA,MAAkB,kBACzB,IAAOC,EAAQD",
   "names": ["SelectOption", "select_option_default"]

package/react/select-option/select-option.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../react/select-option/select-option.tsx"],
+  "sources": ["../../../library/react/select-option/select-option.tsx"],
   "sourcesContent": ["import * as React from 'react';\n\nimport { SelectOption as Props } from './select-option.types';\n\n/** This component is not intended to be used directly. It is used by `Select` internally */\nconst SelectOption: React.FunctionComponent<Props> = ({\n  value,\n  text,\n  ...rest\n}) => (\n  <option value={value} {...rest}>\n    {text}\n  </option>\n);\n\nexport default SelectOption;\n"],
   "mappings": "2fAAA,UAAYA,MAAW,QAKvB,MAAMC,EAAgDC,GAInD,CAJmD,IAAAC,EAAAD,EACpD,OAAAE,EACA,KAAAC,CAPF,EAKsDF,EAGjDG,EAAAC,EAHiDJ,EAGjD,CAFH,QACA,SAGA,OAAAH,EAAA,cAAC,SAAAQ,EAAA,CAAO,MAAOJ,GAAWE,GACvBD,CACH,GAGF,IAAOI,EAAQR",
   "names": ["React", "SelectOption", "_a", "_b", "value", "text", "rest", "__objRest", "__spreadValues", "select_option_default"]

package/react/tag/index.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../react/tag/index.ts"],
+  "sources": ["../../../library/react/tag/index.ts"],
   "sourcesContent": ["import Tag from './tag';\nexport default Tag;\n"],
   "mappings": "AAAA,OAAOA,MAAS,QAChB,IAAOC,EAAQD",
   "names": ["Tag", "tag_default"]

package/react/tag/tag.js

@@ -1,2 +1,2 @@
-import f from"react";import g from"../text";import{variants as r,sizes as o,themes as m}from"./tag.types";import h from"classnames";const t=({text:i,icon:s,border:p,size:n=o.m,theme:e=m.light,variant:a=r.primary})=>f.createElement(g,{size:n,tight:!0,className:h("tag",{[`tag--variant-${a}`]:a,[`tag--theme-${e}`]:e,"tag--border":p})},s||null,i);t.sizes=o,t.themes=m,t.variants=r;var T=t;export{T as default};
+import n from"react";import f from"../text";import{variants as o,sizes as m,themes as i}from"./tag.types";import h from"classnames";const t=({text:p,icon:e,border:g,size:s=m.m,theme:a=i.light,variant:r=o.primary})=>n.createElement(f,{size:s,tight:!0,className:h("tag",{[`tag--variant-${r}`]:r,[`tag--theme-${a}`]:a,[`tag--size-${s}`]:s,"tag--border":g})},e||null,p);t.sizes=m,t.themes=i,t.variants=o;var T=t;export{T as default};
 //# sourceMappingURL=tag.js.map

package/react/tag/tag.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../react/tag/tag.tsx"],
-  "sourcesContent": ["import React from 'react';\n\nimport Text from '../text';\n\nimport { Tag as Props, variants, sizes, themes } from './tag.types';\nimport classNames from 'classnames';\n\nconst Tag: React.FunctionComponent<Props> & {\n  sizes: typeof sizes;\n  themes: typeof themes;\n  variants: typeof variants;\n} = ({\n  text,\n  icon,\n  border,\n  size = sizes.m,\n  theme = themes.light,\n  variant = variants.primary,\n}) => (\n  <Text\n    size={size}\n    tight\n    className={classNames('tag', {\n      [`tag--variant-${variant}`]: variant,\n      [`tag--theme-${theme}`]: theme,\n      'tag--border': border,\n    })}\n  >\n    {icon ? icon : null}\n    {text}\n  </Text>\n);\n\nTag.sizes = sizes;\nTag.themes = themes;\nTag.variants = variants;\nexport default Tag;\n"],
-  "mappings": "AAAA,OAAOA,MAAW,QAElB,OAAOC,MAAU,UAEjB,OAAuB,YAAAC,EAAU,SAAAC,EAAO,UAAAC,MAAc,cACtD,OAAOC,MAAgB,aAEvB,MAAMC,EAIF,CAAC,CACH,KAAAC,EACA,KAAAC,EACA,OAAAC,EACA,KAAAC,EAAOP,EAAM,EACb,MAAAQ,EAAQP,EAAO,MACf,QAAAQ,EAAUV,EAAS,OACrB,IACEF,EAAA,cAACC,EAAA,CACC,KAAMS,EACN,MAAK,GACL,UAAWL,EAAW,MAAO,CAC3B,CAAC,gBAAgBO,CAAO,EAAE,EAAGA,EAC7B,CAAC,cAAcD,CAAK,EAAE,EAAGA,EACzB,cAAeF,CACjB,CAAC,GAEAD,GAAc,KACdD,CACH,EAGFD,EAAI,MAAQH,EACZG,EAAI,OAASF,EACbE,EAAI,SAAWJ,EACf,IAAOW,EAAQP",
+  "sources": ["../../../library/react/tag/tag.tsx"],
+  "sourcesContent": ["import React from 'react';\n\nimport Text from '../text';\n\nimport { Tag as Props, variants, sizes, themes } from './tag.types';\nimport classNames from 'classnames';\n\nconst Tag: React.FunctionComponent<Props> & {\n  sizes: typeof sizes;\n  themes: typeof themes;\n  variants: typeof variants;\n} = ({\n  text,\n  icon,\n  border,\n  size = sizes.m,\n  theme = themes.light,\n  variant = variants.primary,\n}) => (\n  <Text\n    size={size}\n    tight\n    className={classNames('tag', {\n      [`tag--variant-${variant}`]: variant,\n      [`tag--theme-${theme}`]: theme,\n      [`tag--size-${size}`]: size,\n      'tag--border': border,\n    })}\n  >\n    {icon ? icon : null}\n    {text}\n  </Text>\n);\n\nTag.sizes = sizes;\nTag.themes = themes;\nTag.variants = variants;\nexport default Tag;\n"],
+  "mappings": "AAAA,OAAOA,MAAW,QAElB,OAAOC,MAAU,UAEjB,OAAuB,YAAAC,EAAU,SAAAC,EAAO,UAAAC,MAAc,cACtD,OAAOC,MAAgB,aAEvB,MAAMC,EAIF,CAAC,CACH,KAAAC,EACA,KAAAC,EACA,OAAAC,EACA,KAAAC,EAAOP,EAAM,EACb,MAAAQ,EAAQP,EAAO,MACf,QAAAQ,EAAUV,EAAS,OACrB,IACEF,EAAA,cAACC,EAAA,CACC,KAAMS,EACN,MAAK,GACL,UAAWL,EAAW,MAAO,CAC3B,CAAC,gBAAgBO,CAAO,EAAE,EAAGA,EAC7B,CAAC,cAAcD,CAAK,EAAE,EAAGA,EACzB,CAAC,aAAaD,CAAI,EAAE,EAAGA,EACvB,cAAeD,CACjB,CAAC,GAEAD,GAAc,KACdD,CACH,EAGFD,EAAI,MAAQH,EACZG,EAAI,OAASF,EACbE,EAAI,SAAWJ,EACf,IAAOW,EAAQP",
   "names": ["React", "Text", "variants", "sizes", "themes", "classNames", "Tag", "text", "icon", "border", "size", "theme", "variant", "tag_default"]
 }

package/react/tag/tag.scss

@@ -10,6 +10,10 @@
   padding: spacing.$xxs spacing.$xs;
   border: 1px solid;
 
+  &--size-xs {
+    padding: spacing.$xxxs spacing.$xxs;
+  }
+
   &--variant-primary {
     background: var(--ge-tags-primary);
     border-color: var(--ge-tags-primary);

package/react/tag/tag.types.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../react/tag/tag.types.ts"],
+  "sources": ["../../../library/react/tag/tag.types.ts"],
   "sourcesContent": ["import { ObjectValues } from '../types';\nimport { sizes as TextSizes } from '../text/text.types';\nimport { ReactElement } from 'react';\n\nexport const sizes = {\n  xs: TextSizes.interface,\n  s: TextSizes.small,\n  m: TextSizes.basic,\n  l: TextSizes.large,\n} as const;\n\nexport const themes = {\n  fixed: 'fixed',\n  light: 'light',\n} as const;\n\nexport const variants = {\n  primary: 'primary',\n  secondary: 'secondary',\n  tertiary: 'tertiary',\n  positive: 'positive',\n  attention: 'attention',\n  negative: 'negative',\n  neutral: 'neutral',\n  information: 'information',\n  featured: 'featured',\n} as const;\n\nexport type Tag = {\n  text: string;\n  border?: boolean;\n  size?: ObjectValues<typeof sizes>;\n  theme?: ObjectValues<typeof themes>;\n  variant?: ObjectValues<typeof variants>;\n  icon?: ReactElement;\n};\n"],
   "mappings": "AACA,OAAS,SAASA,MAAiB,qBAG5B,MAAMC,EAAQ,CACnB,GAAID,EAAU,UACd,EAAGA,EAAU,MACb,EAAGA,EAAU,MACb,EAAGA,EAAU,KACf,EAEaE,EAAS,CACpB,MAAO,QACP,MAAO,OACT,EAEaC,EAAW,CACtB,QAAS,UACT,UAAW,YACX,SAAU,WACV,SAAU,WACV,UAAW,YACX,SAAU,WACV,QAAS,UACT,YAAa,cACb,SAAU,UACZ",
   "names": ["TextSizes", "sizes", "themes", "variants"]

package/react/text/index.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../react/text/index.ts"],
+  "sources": ["../../../library/react/text/index.ts"],
   "sourcesContent": ["import Text from './text';\nexport default Text;\n"],
   "mappings": "AAAA,OAAOA,MAAU,SACjB,IAAOC,EAAQD",
   "names": ["Text", "text_default"]

package/react/text/text.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../react/text/text.tsx"],
+  "sources": ["../../../library/react/text/text.tsx"],
   "sourcesContent": ["import cn from 'classnames';\nimport * as React from 'react';\n\nimport { sizes, themes, Text as Props } from './text.types';\n\nconst Text: React.FunctionComponent<React.PropsWithChildren<Props>> & {\n  sizes: typeof sizes;\n  themes: typeof themes;\n} = ({\n  children,\n  className,\n  elementName = 'div',\n  italic,\n  size = sizes.basic,\n  theme = themes.normal,\n  tight,\n  ...restProps\n}) =>\n  React.createElement(\n    elementName,\n    {\n      className: cn(\n        'text',\n        {\n          'text--italic': italic,\n          [`text--size-${size}`]: size ? sizes[size] : undefined,\n          [`text--theme-${theme}`]: theme ? themes[theme] : undefined,\n          'text--tight': tight,\n        },\n        className,\n      ),\n      ...restProps,\n    },\n    children,\n  );\n\nText.sizes = sizes;\nText.themes = themes;\n\nexport default Text;\n"],
   "mappings": "2fAAA,OAAOA,MAAQ,aACf,UAAYC,MAAW,QAEvB,OAAS,SAAAC,EAAO,UAAAC,MAA6B,eAE7C,MAAMC,EAGDC,GASF,CATE,IAAAC,EAAAD,EACH,UAAAE,EACA,UAAAC,EACA,YAAAC,EAAc,MACd,OAAAC,EACA,KAAAC,EAAOT,EAAM,MACb,MAAAU,EAAQT,EAAO,OACf,MAAAU,CAfF,EAQKP,EAQAQ,EAAAC,EARAT,EAQA,CAPH,WACA,YACA,cACA,SACA,OACA,QACA,UAGA,OAAAL,EAAM,cACJQ,EACAO,EAAA,CACE,UAAWhB,EACT,OACA,CACE,eAAgBU,EAChB,CAAC,cAAcC,CAAI,EAAE,EAAGA,EAAOT,EAAMS,CAAI,EAAI,OAC7C,CAAC,eAAeC,CAAK,EAAE,EAAGA,EAAQT,EAAOS,CAAK,EAAI,OAClD,cAAeC,CACjB,EACAL,CACF,GACGM,GAELP,CACF,GAEFH,EAAK,MAAQF,EACbE,EAAK,OAASD,EAEd,IAAOc,EAAQb",
   "names": ["cn", "React", "sizes", "themes", "Text", "_a", "_b", "children", "className", "elementName", "italic", "size", "theme", "tight", "restProps", "__objRest", "__spreadValues", "text_default"]

package/react/text/text.types.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../react/text/text.types.ts"],
+  "sources": ["../../../library/react/text/text.types.ts"],
   "sourcesContent": ["import { ObjectValues } from '../types';\n\nexport const sizes = {\n  headline1: 'headline1',\n  headline2: 'headline2',\n  headline3: 'headline3',\n  large: 'large',\n  basic: 'basic',\n  small: 'small',\n  interface: 'interface',\n  button: 'button',\n  section: 'section',\n} as const;\n\nexport const themes = {\n  normal: 'normal',\n  emphasis: 'emphasis',\n  headline: 'headline',\n} as const;\n\n// NOTE: The type of the rest spread properties is generic because `elementName` can be _any_ HTML element which we can't type the props for\nexport type Text = {\n  className?: string;\n  elementName?: string;\n  italic?: boolean;\n  size?: ObjectValues<typeof sizes>;\n  theme?: ObjectValues<typeof themes>;\n  tight?: boolean;\n} & { [key: string]: unknown };\n"],
   "mappings": "AAEO,MAAMA,EAAQ,CACnB,UAAW,YACX,UAAW,YACX,UAAW,YACX,MAAO,QACP,MAAO,QACP,MAAO,QACP,UAAW,YACX,OAAQ,SACR,QAAS,SACX,EAEaC,EAAS,CACpB,OAAQ,SACR,SAAU,WACV,SAAU,UACZ",
   "names": ["sizes", "themes"]

package/react/text-area/index.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../react/text-area/index.ts"],
+  "sources": ["../../../library/react/text-area/index.ts"],
   "sourcesContent": ["import TextArea from './text-area';\nexport default TextArea;\n"],
   "mappings": "AAAA,OAAOA,MAAc,cACrB,IAAOC,EAAQD",
   "names": ["TextArea", "text_area_default"]

package/react/text-area/text-area.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { themes, sizes } from './text-area.types';
+import { themes, sizes, labelVariants } from './text-area.types';
 declare const RefTextArea: React.ForwardRefExoticComponent<{
     helpText?: string;
     label: string;
@@ -10,11 +10,13 @@ declare const RefTextArea: React.ForwardRefExoticComponent<{
     isShort?: boolean;
     name: string;
     defaultValue?: string;
+    labelVariant?: import("../types").ObjectValues<typeof labelVariants>;
 } & import("../types").TextAreaHtmlProps & {
     children?: React.ReactNode | undefined;
 } & React.RefAttributes<HTMLTextAreaElement>>;
 declare const TextArea: typeof RefTextArea & {
     themes: typeof themes;
     sizes: typeof sizes;
+    labelVariants: typeof labelVariants;
 };
 export default TextArea;

package/react/text-area/text-area.js

@@ -1,2 +1,2 @@
-"use client";var O=Object.defineProperty;var p=Object.getOwnPropertySymbols;var b=Object.prototype.hasOwnProperty,y=Object.prototype.propertyIsEnumerable;var g=(e,t,a)=>t in e?O(e,t,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[t]=a,A=(e,t)=>{for(var a in t||(t={}))b.call(t,a)&&g(e,a,t[a]);if(p)for(var a of p(t))y.call(t,a)&&g(e,a,t[a]);return e};var C=(e,t)=>{var a={};for(var i in e)b.call(e,i)&&t.indexOf(i)<0&&(a[i]=e[i]);if(e!=null&&p)for(var i of p(e))t.indexOf(i)<0&&y.call(e,i)&&(a[i]=e[i]);return a};import d from"classnames";import*as r from"react";import n from"../text";import W from"../use-input-validation";import{themes as I,sizes as c}from"./text-area.types";const k=r.forwardRef((B,E)=>{var z=B,{children:e,helpText:t,label:a,name:i,placeholder:w,disabled:u,required:v,isLabelVisible:N=!0,helpIcon:T,size:x=c.default,theme:s=I.light,isShort:$,maxLength:m,defaultValue:l}=z,_=C(z,["children","helpText","label","name","placeholder","disabled","required","isLabelVisible","helpIcon","size","theme","isShort","maxLength","defaultValue"]);const[j,H,f]=W(),[M,h]=r.useState(0);return r.useEffect(()=>{l&&(typeof l=="string"?h(l.length):typeof l=="number"&&h(l))},[_]),r.createElement("label",{className:"text-area"},r.createElement("div",{className:"text-area__wrapper"},N?r.createElement("div",{className:"text-area__header"},r.createElement(n,{theme:n.themes.emphasis,size:x===c.default?n.sizes.basic:n.sizes.small,className:d("text-area__label",{[`text-area__label--theme-${s}-disabled`]:u,[`text-area__label--theme-${s}`]:s})},a,v?r.createElement("span",{className:d("text-area__asterisk",{[`text-area__asterisk--theme-${s}-disabled`]:u,[`text-area__asterisk--theme-${s}`]:s})},"*"):null,e),m?r.createElement(n,{className:"text-area__max",size:n.sizes.small},M,"/",m):null):null,r.createElement("textarea",A({className:d("text-area__input",{[`text-area__input--theme-${s}`]:s,[`text-area__input--theme-${s}-error`]:f,[`text-area__input--size-${x}-short`]:$,[`text-area__input--size-${x}`]:x}),"aria-label":N?a:void 0,name:i,maxLength:m,ref:E,cols:1,required:v,defaultValue:l,rows:$?1:2,onChange:o=>{_.onChange&&_.onChange(o),j(o),m&&h(o.target.value.length)},onInvalid:o=>{_.onInvalid&&_.onInvalid(o),H(o)},placeholder:w,disabled:u},_))),t?r.createElement("div",{className:"text-area__help"},r.createElement(n,{size:n.sizes.interface,className:d("text-area__help-text",{[`text-area__help-text--theme-${s}-error`]:f,[`text-area__help-text--theme-${s}`]:s})},T||null,t)):null,f&&r.createElement("div",{"aria-hidden":"true",className:"text-area__error"},r.createElement(n,null,f)))});k.displayName="TextArea";const q=Object.assign(k,{themes:I,sizes:c});var S=q;export{S as default};
+"use client";var q=Object.defineProperty;var f=Object.getOwnPropertySymbols;var y=Object.prototype.hasOwnProperty,A=Object.prototype.propertyIsEnumerable;var g=(e,t,a)=>t in e?q(e,t,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[t]=a,C=(e,t)=>{for(var a in t||(t={}))y.call(t,a)&&g(e,a,t[a]);if(f)for(var a of f(t))A.call(t,a)&&g(e,a,t[a]);return e};var I=(e,t)=>{var a={};for(var i in e)y.call(e,i)&&t.indexOf(i)<0&&(a[i]=e[i]);if(e!=null&&f)for(var i of f(e))t.indexOf(i)<0&&A.call(e,i)&&(a[i]=e[i]);return a};import p from"classnames";import*as r from"react";import l from"../text";import B from"../use-input-validation";import{themes as k,sizes as c,labelVariants as v}from"./text-area.types";const w=r.forwardRef((F,H)=>{var z=F,{children:e,helpText:t,label:a,name:i,placeholder:E,disabled:u,required:b,isLabelVisible:N=!0,helpIcon:T,size:x=c.default,theme:s=k.light,isShort:$,maxLength:m,defaultValue:n,labelVariant:j=v.bold}=z,o=I(z,["children","helpText","label","name","placeholder","disabled","required","isLabelVisible","helpIcon","size","theme","isShort","maxLength","defaultValue","labelVariant"]);const[M,O,d]=B(),[W,h]=r.useState(0);return r.useEffect(()=>{n&&(typeof n=="string"?h(n.length):typeof n=="number"&&h(n))},[o]),r.createElement("label",{className:"text-area"},r.createElement("div",{className:"text-area__wrapper"},N?r.createElement("div",{className:"text-area__header"},r.createElement(l,{theme:j===v.bold?l.themes.emphasis:l.themes.normal,size:x===c.default?l.sizes.basic:l.sizes.small,className:p("text-area__label",{[`text-area__label--theme-${s}-disabled`]:u,[`text-area__label--theme-${s}`]:s})},a,b?r.createElement("span",{className:p("text-area__asterisk",{[`text-area__asterisk--theme-${s}-disabled`]:u,[`text-area__asterisk--theme-${s}`]:s})},"*"):null,e),m?r.createElement(l,{className:"text-area__max",size:l.sizes.small},W,"/",m):null):null,r.createElement("textarea",C({className:p("text-area__input",{[`text-area__input--theme-${s}`]:s,[`text-area__input--theme-${s}-error`]:d,[`text-area__input--size-${x}-short`]:$,[`text-area__input--size-${x}`]:x}),"aria-label":N?a:void 0,name:i,maxLength:m,ref:H,cols:1,required:b,defaultValue:n,rows:$?1:2,onChange:_=>{o.onChange&&o.onChange(_),M(_),m&&h(_.target.value.length)},onInvalid:_=>{o.onInvalid&&o.onInvalid(_),O(_)},placeholder:E,disabled:u},o))),t?r.createElement("div",{className:"text-area__help"},r.createElement(l,{size:l.sizes.interface,className:p("text-area__help-text",{[`text-area__help-text--theme-${s}-error`]:d,[`text-area__help-text--theme-${s}`]:s})},T||null,t)):null,d&&r.createElement("div",{"aria-hidden":"true",className:"text-area__error"},r.createElement(l,null,d)))});w.displayName="TextArea";const D=Object.assign(w,{themes:k,sizes:c,labelVariants:v});var X=D;export{X as default};
 //# sourceMappingURL=text-area.js.map

package/react/text-area/text-area.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../react/text-area/text-area.tsx"],
-  "sourcesContent": ["'use client';\n\nimport cn from 'classnames';\nimport * as React from 'react';\n\nimport Text from '../text';\nimport useInputValidation from '../use-input-validation';\n\nimport { TextArea as Props, themes, sizes } from './text-area.types';\n\nconst RefTextArea = React.forwardRef<\n  HTMLTextAreaElement,\n  React.PropsWithChildren<Props>\n>(\n  (\n    {\n      children,\n      helpText,\n      label,\n      name,\n      placeholder,\n      disabled,\n      required,\n      isLabelVisible = true,\n      helpIcon,\n      size = sizes.default,\n      theme = themes.light,\n      isShort,\n      maxLength,\n      defaultValue,\n      ...restProps\n    },\n    ref,\n  ) => {\n    const [onChange, onInvalid, error] = useInputValidation();\n    const [count, setCount] = React.useState(0);\n\n    React.useEffect(() => {\n      if (defaultValue) {\n        if (typeof defaultValue === 'string') {\n          setCount(defaultValue.length);\n        } else if (typeof defaultValue === 'number') {\n          setCount(defaultValue);\n        }\n      }\n    }, [restProps]);\n\n    return (\n      <label className=\"text-area\">\n        <div className=\"text-area__wrapper\">\n          {isLabelVisible ? (\n            <div className=\"text-area__header\">\n              <Text\n                theme={Text.themes.emphasis}\n                size={\n                  size === sizes.default ? Text.sizes.basic : Text.sizes.small\n                }\n                className={cn('text-area__label', {\n                  [`text-area__label--theme-${theme}-disabled`]: disabled,\n                  [`text-area__label--theme-${theme}`]: theme,\n                })}\n              >\n                {label}\n                {required ? (\n                  <span\n                    className={cn('text-area__asterisk', {\n                      [`text-area__asterisk--theme-${theme}-disabled`]:\n                        disabled,\n                      [`text-area__asterisk--theme-${theme}`]: theme,\n                    })}\n                  >\n                    *\n                  </span>\n                ) : null}\n                {children}\n              </Text>\n              {maxLength ? (\n                <Text className=\"text-area__max\" size={Text.sizes.small}>\n                  {count}/{maxLength}\n                </Text>\n              ) : null}\n            </div>\n          ) : null}\n          <textarea\n            className={cn('text-area__input', {\n              [`text-area__input--theme-${theme}`]: theme,\n              [`text-area__input--theme-${theme}-error`]: error,\n              [`text-area__input--size-${size}-short`]: isShort,\n              [`text-area__input--size-${size}`]: size,\n            })}\n            aria-label={isLabelVisible ? label : undefined}\n            name={name}\n            maxLength={maxLength}\n            ref={ref}\n            cols={1}\n            required={required}\n            defaultValue={defaultValue}\n            rows={isShort ? 1 : 2}\n            onChange={e => {\n              // NOTE: To not break compatibility\n              if (restProps.onChange) {\n                restProps.onChange(e);\n              }\n              onChange(e);\n              if (maxLength) {\n                setCount(e.target.value.length);\n              }\n            }}\n            onInvalid={e => {\n              // NOTE: To not break compatibility\n              if (restProps.onInvalid) restProps.onInvalid(e);\n              onInvalid(e);\n            }}\n            placeholder={placeholder}\n            disabled={disabled}\n            {...restProps}\n          />\n        </div>\n\n        {helpText ? (\n          <div className=\"text-area__help\">\n            <Text\n              size={Text.sizes.interface}\n              className={cn('text-area__help-text', {\n                [`text-area__help-text--theme-${theme}-error`]: error,\n                [`text-area__help-text--theme-${theme}`]: theme,\n              })}\n            >\n              {helpIcon ? helpIcon : null}\n              {helpText}\n            </Text>\n          </div>\n        ) : null}\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=\"text-area__error\">\n            <Text>{error}</Text>\n          </div>\n        )}\n      </label>\n    );\n  },\n);\n\n// NOTE: If this isn't set, stack traces say \"forwardRef\" instead of \"TextArea\"\nRefTextArea.displayName = 'TextArea';\n// NOTE: The component is redeclared here because TypeScript doesn't accept assigning extra properties to `RefComponent` when it's declared\n\nconst TextArea: typeof RefTextArea & {\n  themes: typeof themes;\n  sizes: typeof sizes;\n} = Object.assign(RefTextArea, { themes, sizes });\n\nexport default TextArea;\n"],
-  "mappings": "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",
-  "names": ["cn", "React", "Text", "useInputValidation", "themes", "sizes", "RefTextArea", "_a", "ref", "_b", "children", "helpText", "label", "name", "placeholder", "disabled", "required", "isLabelVisible", "helpIcon", "size", "theme", "isShort", "maxLength", "defaultValue", "restProps", "__objRest", "onChange", "onInvalid", "error", "count", "setCount", "__spreadValues", "e", "TextArea", "text_area_default"]
+  "sources": ["../../../library/react/text-area/text-area.tsx"],
+  "sourcesContent": ["'use client';\n\nimport cn from 'classnames';\nimport * as React from 'react';\n\nimport Text from '../text';\nimport useInputValidation from '../use-input-validation';\n\nimport {\n  TextArea as Props,\n  themes,\n  sizes,\n  labelVariants,\n} from './text-area.types';\n\nconst RefTextArea = React.forwardRef<\n  HTMLTextAreaElement,\n  React.PropsWithChildren<Props>\n>(\n  (\n    {\n      children,\n      helpText,\n      label,\n      name,\n      placeholder,\n      disabled,\n      required,\n      isLabelVisible = true,\n      helpIcon,\n      size = sizes.default,\n      theme = themes.light,\n      isShort,\n      maxLength,\n      defaultValue,\n      labelVariant = labelVariants.bold,\n      ...restProps\n    },\n    ref,\n  ) => {\n    const [onChange, onInvalid, error] = useInputValidation();\n    const [count, setCount] = React.useState(0);\n\n    React.useEffect(() => {\n      if (defaultValue) {\n        if (typeof defaultValue === 'string') {\n          setCount(defaultValue.length);\n        } else if (typeof defaultValue === 'number') {\n          setCount(defaultValue);\n        }\n      }\n    }, [restProps]);\n\n    return (\n      <label className=\"text-area\">\n        <div className=\"text-area__wrapper\">\n          {isLabelVisible ? (\n            <div className=\"text-area__header\">\n              <Text\n                theme={\n                  labelVariant === labelVariants.bold\n                    ? Text.themes.emphasis\n                    : Text.themes.normal\n                }\n                size={\n                  size === sizes.default ? Text.sizes.basic : Text.sizes.small\n                }\n                className={cn('text-area__label', {\n                  [`text-area__label--theme-${theme}-disabled`]: disabled,\n                  [`text-area__label--theme-${theme}`]: theme,\n                })}\n              >\n                {label}\n                {required ? (\n                  <span\n                    className={cn('text-area__asterisk', {\n                      [`text-area__asterisk--theme-${theme}-disabled`]:\n                        disabled,\n                      [`text-area__asterisk--theme-${theme}`]: theme,\n                    })}\n                  >\n                    *\n                  </span>\n                ) : null}\n                {children}\n              </Text>\n              {maxLength ? (\n                <Text className=\"text-area__max\" size={Text.sizes.small}>\n                  {count}/{maxLength}\n                </Text>\n              ) : null}\n            </div>\n          ) : null}\n          <textarea\n            className={cn('text-area__input', {\n              [`text-area__input--theme-${theme}`]: theme,\n              [`text-area__input--theme-${theme}-error`]: error,\n              [`text-area__input--size-${size}-short`]: isShort,\n              [`text-area__input--size-${size}`]: size,\n            })}\n            aria-label={isLabelVisible ? label : undefined}\n            name={name}\n            maxLength={maxLength}\n            ref={ref}\n            cols={1}\n            required={required}\n            defaultValue={defaultValue}\n            rows={isShort ? 1 : 2}\n            onChange={e => {\n              // NOTE: To not break compatibility\n              if (restProps.onChange) {\n                restProps.onChange(e);\n              }\n              onChange(e);\n              if (maxLength) {\n                setCount(e.target.value.length);\n              }\n            }}\n            onInvalid={e => {\n              // NOTE: To not break compatibility\n              if (restProps.onInvalid) restProps.onInvalid(e);\n              onInvalid(e);\n            }}\n            placeholder={placeholder}\n            disabled={disabled}\n            {...restProps}\n          />\n        </div>\n\n        {helpText ? (\n          <div className=\"text-area__help\">\n            <Text\n              size={Text.sizes.interface}\n              className={cn('text-area__help-text', {\n                [`text-area__help-text--theme-${theme}-error`]: error,\n                [`text-area__help-text--theme-${theme}`]: theme,\n              })}\n            >\n              {helpIcon ? helpIcon : null}\n              {helpText}\n            </Text>\n          </div>\n        ) : null}\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=\"text-area__error\">\n            <Text>{error}</Text>\n          </div>\n        )}\n      </label>\n    );\n  },\n);\n\n// NOTE: If this isn't set, stack traces say \"forwardRef\" instead of \"TextArea\"\nRefTextArea.displayName = 'TextArea';\n// NOTE: The component is redeclared here because TypeScript doesn't accept assigning extra properties to `RefComponent` when it's declared\n\nconst TextArea: typeof RefTextArea & {\n  themes: typeof themes;\n  sizes: typeof sizes;\n  labelVariants: typeof labelVariants;\n} = Object.assign(RefTextArea, { themes, sizes, labelVariants });\n\nexport default TextArea;\n"],
+  "mappings": "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",
+  "names": ["cn", "React", "Text", "useInputValidation", "themes", "sizes", "labelVariants", "RefTextArea", "_a", "ref", "_b", "children", "helpText", "label", "name", "placeholder", "disabled", "required", "isLabelVisible", "helpIcon", "size", "theme", "isShort", "maxLength", "defaultValue", "labelVariant", "restProps", "__objRest", "onChange", "onInvalid", "error", "count", "setCount", "__spreadValues", "e", "TextArea", "text_area_default"]
 }

package/react/text-area/text-area.types.d.ts

@@ -8,6 +8,10 @@ export declare const sizes: {
     readonly default: "default";
     readonly small: "small";
 };
+export declare const labelVariants: {
+    readonly bold: "bold";
+    readonly basic: "basic";
+};
 export type TextArea = {
     helpText?: string;
     label: string;
@@ -18,4 +22,5 @@ export type TextArea = {
     isShort?: boolean;
     name: string;
     defaultValue?: string;
+    labelVariant?: ObjectValues<typeof labelVariants>;
 } & TextAreaHtmlProps;

package/react/text-area/text-area.types.js

@@ -1,2 +1,2 @@
-const e={light:"light",dark:"dark"},t={default:"default",small:"small"};export{t as sizes,e as themes};
+const e={light:"light",dark:"dark"},t={default:"default",small:"small"},a={bold:"bold",basic:"basic"};export{a as labelVariants,t as sizes,e as themes};
 //# sourceMappingURL=text-area.types.js.map

package/react/text-area/text-area.types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../react/text-area/text-area.types.ts"],
-  "sourcesContent": ["import type { ReactElement } from 'react';\nimport type { ObjectValues, TextAreaHtmlProps } from '../types';\n\nexport const themes = {\n  light: 'light',\n  dark: 'dark',\n} as const;\n\nexport const sizes = {\n  default: 'default',\n  small: 'small',\n} as const;\n\nexport type TextArea = {\n  helpText?: string;\n  label: string;\n  theme?: ObjectValues<typeof themes>;\n  size?: ObjectValues<typeof sizes>;\n  isLabelVisible?: boolean;\n  helpIcon?: ReactElement;\n  isShort?: boolean;\n  name: string;\n  defaultValue?: string;\n} & TextAreaHtmlProps;\n"],
-  "mappings": "AAGO,MAAMA,EAAS,CACpB,MAAO,QACP,KAAM,MACR,EAEaC,EAAQ,CACnB,QAAS,UACT,MAAO,OACT",
-  "names": ["themes", "sizes"]
+  "sources": ["../../../library/react/text-area/text-area.types.ts"],
+  "sourcesContent": ["import type { ReactElement } from 'react';\nimport type { ObjectValues, TextAreaHtmlProps } from '../types';\n\nexport const themes = {\n  light: 'light',\n  dark: 'dark',\n} as const;\n\nexport const sizes = {\n  default: 'default',\n  small: 'small',\n} as const;\n\nexport const labelVariants = {\n  bold: 'bold',\n  basic: 'basic',\n} as const;\n\nexport type TextArea = {\n  helpText?: string;\n  label: string;\n  theme?: ObjectValues<typeof themes>;\n  size?: ObjectValues<typeof sizes>;\n  isLabelVisible?: boolean;\n  helpIcon?: ReactElement;\n  isShort?: boolean;\n  name: string;\n  defaultValue?: string;\n  labelVariant?: ObjectValues<typeof labelVariants>;\n} & TextAreaHtmlProps;\n"],
+  "mappings": "AAGO,MAAMA,EAAS,CACpB,MAAO,QACP,KAAM,MACR,EAEaC,EAAQ,CACnB,QAAS,UACT,MAAO,OACT,EAEaC,EAAgB,CAC3B,KAAM,OACN,MAAO,OACT",
+  "names": ["themes", "sizes", "labelVariants"]
 }

package/react/text-input/index.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../react/text-input/index.ts"],
+  "sources": ["../../../library/react/text-input/index.ts"],
   "sourcesContent": ["import TextInput from './text-input';\nexport default TextInput;\n"],
   "mappings": "AAAA,OAAOA,MAAe,eACtB,IAAOC,EAAQD",
   "names": ["TextInput", "text_input_default"]

package/react/text-input/text-input.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { themes, variants } from './text-input.types';
+import { themes, variants, labelVariants } from './text-input.types';
 declare const RefTextInput: React.ForwardRefExoticComponent<{
     customErrorMessages?: import("../use-input-validation.types").Messages;
     hasError?: boolean;
@@ -10,9 +10,11 @@ declare const RefTextInput: React.ForwardRefExoticComponent<{
     theme?: import("../types").ObjectValues<typeof themes>;
     trailingIcon?: React.ReactNode;
     variant?: import("../types").ObjectValues<typeof variants>;
+    labelVariant?: import("../types").ObjectValues<typeof labelVariants>;
 } & import("../types").InputHtmlProps & React.RefAttributes<HTMLInputElement>>;
 declare const TextInput: typeof RefTextInput & {
     themes: typeof themes;
     variants: typeof variants;
+    labelVariants: typeof labelVariants;
 };
 export default TextInput;

package/react/text-input/text-input.js

@@ -1,2 +1,2 @@
-"use client";var F=Object.defineProperty;var m=Object.getOwnPropertySymbols;var w=Object.prototype.hasOwnProperty,S=Object.prototype.propertyIsEnumerable;var I=(i,e,s)=>e in i?F(i,e,{enumerable:!0,configurable:!0,writable:!0,value:s}):i[e]=s,k=(i,e)=>{for(var s in e||(e={}))w.call(e,s)&&I(i,s,e[s]);if(m)for(var s of m(e))S.call(e,s)&&I(i,s,e[s]);return i};var C=(i,e)=>{var s={};for(var n in i)w.call(i,n)&&e.indexOf(n)<0&&(s[n]=i[n]);if(i!=null&&m)for(var n of m(i))e.indexOf(n)<0&&S.call(i,n)&&(s[n]=i[n]);return s};import G from"classnames";import*as t from"react";import l from"../text";import J from"../use-input-validation";import K from"../icons/16/info";import L from"../icons/16/error";import{themes as _,variants as p}from"./text-input.types";import{useEffect as M}from"react";const E=t.forwardRef((U,q)=>{var b=U,{customErrorMessages:i,defaultValue:e,disabled:s,hasError:n,helpText:h,label:N,leadingIcon:o,maxLength:a,name:O,onChange:j=()=>{},placeholder:H,required:c,theme:z,trailingIcon:d,type:P="text",variant:u=p.large}=b,T=C(b,["customErrorMessages","defaultValue","disabled","hasError","helpText","label","leadingIcon","maxLength","name","onChange","placeholder","required","theme","trailingIcon","type","variant"]);const[A,f]=t.useState(0),[g,y]=t.useState(n),[B,D,x]=J(i,i?i.defaultError:void 0,g),v=a?a>0:void 0;return t.useEffect(()=>{e&&(typeof e=="string"?f(e.length):typeof e=="number"&&f(e))},[T]),M(()=>{y(n)},[n]),t.createElement("label",{className:G("text-input",{"text-input--theme-dark":z===_.dark,"text-input--theme-light":z===_.light,"text-input--disabled":s,"text-input--error":x||g,"text-input--icon":o||d,"text-input--variant-small":u===p.small,"text-input--variant-large":u===p.large})},t.createElement("div",{className:"text-input__wrapper"},t.createElement("div",{className:"text-input__label-wrapper"},t.createElement(l,{className:"text-input__label",theme:l.themes.emphasis,size:u===p.small?l.sizes.small:l.sizes.basic},N,c?t.createElement("span",{className:"text-input__asterisk"},"*"):null),v?t.createElement("div",{className:"text-input__length-counter"},t.createElement(l,{size:u===p.small?l.sizes.small:l.sizes.basic},A,"/",a)):null),t.createElement("div",{className:"text-input__input-wrapper"},o?t.createElement("div",{className:"text-input__icon"},o):null,t.createElement("input",k({className:"text-input__input",defaultValue:e,disabled:s,required:c,name:O,maxLength:v?a:void 0,onInvalid:r=>D(r),onChange:r=>{j(r),B(r),y(!1),v&&f(r.target.value.length)},placeholder:H,ref:q,type:P,"aria-label":N},T)),d?t.createElement("div",{className:"text-input__icon"},d):null),h?t.createElement("div",{className:"text-input__help"},t.createElement(K,null),t.createElement(l,{size:l.sizes.interface},h)):null,x?t.createElement("div",{"aria-hidden":"true",className:"text-input__error"},t.createElement(L,null),t.createElement(l,{size:l.sizes.interface},x)):null))});E.displayName="TextInput";const Q=Object.assign(E,{themes:_,variants:p});var it=Q;export{it as default};
+"use client";var G=Object.defineProperty;var m=Object.getOwnPropertySymbols;var S=Object.prototype.hasOwnProperty,k=Object.prototype.propertyIsEnumerable;var w=(i,e,s)=>e in i?G(i,e,{enumerable:!0,configurable:!0,writable:!0,value:s}):i[e]=s,C=(i,e)=>{for(var s in e||(e={}))S.call(e,s)&&w(i,s,e[s]);if(m)for(var s of m(e))k.call(e,s)&&w(i,s,e[s]);return i};var E=(i,e)=>{var s={};for(var n in i)S.call(i,n)&&e.indexOf(n)<0&&(s[n]=i[n]);if(i!=null&&m)for(var n of m(i))e.indexOf(n)<0&&k.call(i,n)&&(s[n]=i[n]);return s};import J from"classnames";import*as t from"react";import l from"../text";import K from"../use-input-validation";import L from"../icons/16/info";import M from"../icons/16/error";import{themes as _,variants as a,labelVariants as b}from"./text-input.types";import{useEffect as Q}from"react";const O=t.forwardRef((W,A)=>{var g=W,{customErrorMessages:i,defaultValue:e,disabled:s,hasError:n,helpText:h,label:N,leadingIcon:u,maxLength:r,name:j,onChange:H=()=>{},placeholder:P,required:c,theme:z,trailingIcon:d,type:V="text",variant:o=a.large,labelVariant:q=b.bold}=g,T=E(g,["customErrorMessages","defaultValue","disabled","hasError","helpText","label","leadingIcon","maxLength","name","onChange","placeholder","required","theme","trailingIcon","type","variant","labelVariant"]);const[B,f]=t.useState(0),[y,I]=t.useState(n),[D,F,x]=K(i,i?i.defaultError:void 0,y),v=r?r>0:void 0;return t.useEffect(()=>{e&&(typeof e=="string"?f(e.length):typeof e=="number"&&f(e))},[T]),Q(()=>{I(n)},[n]),t.createElement("label",{className:J("text-input",{"text-input--theme-dark":z===_.dark,"text-input--theme-light":z===_.light,"text-input--disabled":s,"text-input--error":x||y,"text-input--icon":u||d,"text-input--variant-small":o===a.small,"text-input--variant-large":o===a.large})},t.createElement("div",{className:"text-input__wrapper"},t.createElement("div",{className:"text-input__label-wrapper"},t.createElement(l,{className:"text-input__label",theme:q===b.bold?l.themes.emphasis:l.themes.normal,size:o===a.small?l.sizes.small:l.sizes.basic},N,c?t.createElement("span",{className:"text-input__asterisk"},"*"):null),v?t.createElement("div",{className:"text-input__length-counter"},t.createElement(l,{size:o===a.small?l.sizes.small:l.sizes.basic},B,"/",r)):null),t.createElement("div",{className:"text-input__input-wrapper"},u?t.createElement("div",{className:"text-input__icon"},u):null,t.createElement("input",C({className:"text-input__input",defaultValue:e,disabled:s,required:c,name:j,maxLength:v?r:void 0,onInvalid:p=>F(p),onChange:p=>{H(p),D(p),I(!1),v&&f(p.target.value.length)},placeholder:P,ref:A,type:V,"aria-label":N},T)),d?t.createElement("div",{className:"text-input__icon"},d):null),h?t.createElement("div",{className:"text-input__help"},t.createElement(L,null),t.createElement(l,{size:l.sizes.interface},h)):null,x?t.createElement("div",{"aria-hidden":"true",className:"text-input__error"},t.createElement(M,null),t.createElement(l,{size:l.sizes.interface},x)):null))});O.displayName="TextInput";const U=Object.assign(O,{themes:_,variants:a,labelVariants:b});var nt=U;export{nt as default};
 //# sourceMappingURL=text-input.js.map

package/react/text-input/text-input.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../react/text-input/text-input.tsx"],
-  "sourcesContent": ["'use client';\n\nimport cn from 'classnames';\nimport * as React from 'react';\n\nimport Text from '../text';\nimport useInputValidation from '../use-input-validation';\nimport SvgInfo from '../icons/16/info';\nimport SvgError from '../icons/16/error';\n\nimport { themes, variants, TextInput as Props } from './text-input.types';\nimport { useEffect } from 'react';\n\nconst RefTextInput = React.forwardRef<HTMLInputElement, Props>(\n  (\n    {\n      customErrorMessages,\n      defaultValue,\n      disabled,\n      hasError,\n      helpText,\n      label,\n      leadingIcon,\n      maxLength,\n      name,\n      onChange = () => {},\n      placeholder,\n      required,\n      theme,\n      trailingIcon,\n      type = 'text',\n      variant = variants.large,\n      ...restProps\n    },\n    ref,\n  ) => {\n    const [count, setCount] = React.useState(0);\n    const [isError, setIsError] = React.useState(hasError);\n    const [validationOnChange, onInvalid, error] = useInputValidation(\n      customErrorMessages,\n      customErrorMessages ? customErrorMessages.defaultError : undefined,\n      isError,\n    );\n    const isMaxLengthValid = maxLength ? maxLength > 0 : undefined;\n\n    React.useEffect(() => {\n      if (defaultValue) {\n        if (typeof defaultValue === 'string') {\n          setCount(defaultValue.length);\n        } else if (typeof defaultValue === 'number') {\n          setCount(defaultValue);\n        }\n      }\n    }, [restProps]);\n\n    useEffect(() => {\n      setIsError(hasError);\n    }, [hasError]);\n\n    return (\n      <label\n        className={cn('text-input', {\n          'text-input--theme-dark': theme === themes.dark,\n          'text-input--theme-light': theme === themes.light,\n          'text-input--disabled': disabled,\n          'text-input--error': error || isError,\n          'text-input--icon': leadingIcon || trailingIcon,\n          'text-input--variant-small': variant === variants.small,\n          'text-input--variant-large': variant === variants.large,\n        })}\n      >\n        <div className=\"text-input__wrapper\">\n          <div className=\"text-input__label-wrapper\">\n            <Text\n              className=\"text-input__label\"\n              theme={Text.themes.emphasis}\n              size={\n                variant === variants.small ? Text.sizes.small : Text.sizes.basic\n              }\n            >\n              {label}\n              {required ? (\n                <span className=\"text-input__asterisk\">*</span>\n              ) : null}\n            </Text>\n            {isMaxLengthValid ? (\n              <div className=\"text-input__length-counter\">\n                <Text\n                  size={\n                    variant === variants.small\n                      ? Text.sizes.small\n                      : Text.sizes.basic\n                  }\n                >\n                  {count}/{maxLength}\n                </Text>\n              </div>\n            ) : null}\n          </div>\n\n          <div className=\"text-input__input-wrapper\">\n            {leadingIcon ? (\n              <div className=\"text-input__icon\">{leadingIcon}</div>\n            ) : null}\n            <input\n              className=\"text-input__input\"\n              defaultValue={defaultValue}\n              disabled={disabled}\n              required={required}\n              name={name}\n              maxLength={isMaxLengthValid ? maxLength : undefined}\n              onInvalid={e => onInvalid(e)}\n              onChange={e => {\n                onChange(e);\n                validationOnChange(e);\n                setIsError(false); // NOTE: We want to reset error state on change to not confuse users.\n                if (isMaxLengthValid) {\n                  setCount(e.target.value.length);\n                }\n              }}\n              placeholder={placeholder}\n              ref={ref}\n              type={type}\n              aria-label={label}\n              {...restProps}\n            />\n            {trailingIcon ? (\n              <div className=\"text-input__icon\">{trailingIcon}</div>\n            ) : null}\n          </div>\n          {helpText ? (\n            <div className=\"text-input__help\">\n              <SvgInfo />\n              <Text size={Text.sizes.interface}>{helpText}</Text>\n            </div>\n          ) : null}\n          {/* NOTE: This is aria-hidden because reporting of validation errors is handled by the browser */}\n          {error ? (\n            <div aria-hidden=\"true\" className=\"text-input__error\">\n              <SvgError />\n              <Text size={Text.sizes.interface}>{error}</Text>\n            </div>\n          ) : null}\n        </div>\n      </label>\n    );\n  },\n);\n\n// NOTE: If this isn't set, stack traces say \"forwardRef\" instead of \"TextInput\"\nRefTextInput.displayName = 'TextInput';\n\nconst TextInput: typeof RefTextInput & {\n  themes: typeof themes;\n  variants: typeof variants;\n} = Object.assign(RefTextInput, { themes, variants });\n\nexport default TextInput;\n"],
-  "mappings": "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",
-  "names": ["cn", "React", "Text", "useInputValidation", "SvgInfo", "SvgError", "themes", "variants", "useEffect", "RefTextInput", "_a", "ref", "_b", "customErrorMessages", "defaultValue", "disabled", "hasError", "helpText", "label", "leadingIcon", "maxLength", "name", "onChange", "placeholder", "required", "theme", "trailingIcon", "type", "variant", "restProps", "__objRest", "count", "setCount", "isError", "setIsError", "validationOnChange", "onInvalid", "error", "isMaxLengthValid", "__spreadValues", "e", "TextInput", "text_input_default"]
+  "sources": ["../../../library/react/text-input/text-input.tsx"],
+  "sourcesContent": ["'use client';\n\nimport cn from 'classnames';\nimport * as React from 'react';\n\nimport Text from '../text';\nimport useInputValidation from '../use-input-validation';\nimport SvgInfo from '../icons/16/info';\nimport SvgError from '../icons/16/error';\n\nimport {\n  themes,\n  variants,\n  labelVariants,\n  TextInput as Props,\n} from './text-input.types';\nimport { useEffect } from 'react';\n\nconst RefTextInput = React.forwardRef<HTMLInputElement, Props>(\n  (\n    {\n      customErrorMessages,\n      defaultValue,\n      disabled,\n      hasError,\n      helpText,\n      label,\n      leadingIcon,\n      maxLength,\n      name,\n      onChange = () => {},\n      placeholder,\n      required,\n      theme,\n      trailingIcon,\n      type = 'text',\n      variant = variants.large,\n      labelVariant = labelVariants.bold,\n      ...restProps\n    },\n    ref,\n  ) => {\n    const [count, setCount] = React.useState(0);\n    const [isError, setIsError] = React.useState(hasError);\n    const [validationOnChange, onInvalid, error] = useInputValidation(\n      customErrorMessages,\n      customErrorMessages ? customErrorMessages.defaultError : undefined,\n      isError,\n    );\n    const isMaxLengthValid = maxLength ? maxLength > 0 : undefined;\n\n    React.useEffect(() => {\n      if (defaultValue) {\n        if (typeof defaultValue === 'string') {\n          setCount(defaultValue.length);\n        } else if (typeof defaultValue === 'number') {\n          setCount(defaultValue);\n        }\n      }\n    }, [restProps]);\n\n    useEffect(() => {\n      setIsError(hasError);\n    }, [hasError]);\n\n    return (\n      <label\n        className={cn('text-input', {\n          'text-input--theme-dark': theme === themes.dark,\n          'text-input--theme-light': theme === themes.light,\n          'text-input--disabled': disabled,\n          'text-input--error': error || isError,\n          'text-input--icon': leadingIcon || trailingIcon,\n          'text-input--variant-small': variant === variants.small,\n          'text-input--variant-large': variant === variants.large,\n        })}\n      >\n        <div className=\"text-input__wrapper\">\n          <div className=\"text-input__label-wrapper\">\n            <Text\n              className=\"text-input__label\"\n              theme={\n                labelVariant === labelVariants.bold\n                  ? Text.themes.emphasis\n                  : Text.themes.normal\n              }\n              size={\n                variant === variants.small ? Text.sizes.small : Text.sizes.basic\n              }\n            >\n              {label}\n              {required ? (\n                <span className=\"text-input__asterisk\">*</span>\n              ) : null}\n            </Text>\n            {isMaxLengthValid ? (\n              <div className=\"text-input__length-counter\">\n                <Text\n                  size={\n                    variant === variants.small\n                      ? Text.sizes.small\n                      : Text.sizes.basic\n                  }\n                >\n                  {count}/{maxLength}\n                </Text>\n              </div>\n            ) : null}\n          </div>\n\n          <div className=\"text-input__input-wrapper\">\n            {leadingIcon ? (\n              <div className=\"text-input__icon\">{leadingIcon}</div>\n            ) : null}\n            <input\n              className=\"text-input__input\"\n              defaultValue={defaultValue}\n              disabled={disabled}\n              required={required}\n              name={name}\n              maxLength={isMaxLengthValid ? maxLength : undefined}\n              onInvalid={e => onInvalid(e)}\n              onChange={e => {\n                onChange(e);\n                validationOnChange(e);\n                setIsError(false); // NOTE: We want to reset error state on change to not confuse users.\n                if (isMaxLengthValid) {\n                  setCount(e.target.value.length);\n                }\n              }}\n              placeholder={placeholder}\n              ref={ref}\n              type={type}\n              aria-label={label}\n              {...restProps}\n            />\n            {trailingIcon ? (\n              <div className=\"text-input__icon\">{trailingIcon}</div>\n            ) : null}\n          </div>\n          {helpText ? (\n            <div className=\"text-input__help\">\n              <SvgInfo />\n              <Text size={Text.sizes.interface}>{helpText}</Text>\n            </div>\n          ) : null}\n          {/* NOTE: This is aria-hidden because reporting of validation errors is handled by the browser */}\n          {error ? (\n            <div aria-hidden=\"true\" className=\"text-input__error\">\n              <SvgError />\n              <Text size={Text.sizes.interface}>{error}</Text>\n            </div>\n          ) : null}\n        </div>\n      </label>\n    );\n  },\n);\n\n// NOTE: If this isn't set, stack traces say \"forwardRef\" instead of \"TextInput\"\nRefTextInput.displayName = 'TextInput';\n\nconst TextInput: typeof RefTextInput & {\n  themes: typeof themes;\n  variants: typeof variants;\n  labelVariants: typeof labelVariants;\n} = Object.assign(RefTextInput, { themes, variants, labelVariants });\n\nexport default TextInput;\n"],
+  "mappings": "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",
+  "names": ["cn", "React", "Text", "useInputValidation", "SvgInfo", "SvgError", "themes", "variants", "labelVariants", "useEffect", "RefTextInput", "_a", "ref", "_b", "customErrorMessages", "defaultValue", "disabled", "hasError", "helpText", "label", "leadingIcon", "maxLength", "name", "onChange", "placeholder", "required", "theme", "trailingIcon", "type", "variant", "labelVariant", "restProps", "__objRest", "count", "setCount", "isError", "setIsError", "validationOnChange", "onInvalid", "error", "isMaxLengthValid", "__spreadValues", "e", "TextInput", "text_input_default"]
 }

package/react/text-input/text-input.types.d.ts

@@ -8,6 +8,10 @@ export declare const variants: {
     small: string;
     large: string;
 };
+export declare const labelVariants: {
+    readonly bold: "bold";
+    readonly basic: "basic";
+};
 export type TextInput = {
     customErrorMessages?: Messages;
     hasError?: boolean;
@@ -18,4 +22,5 @@ export type TextInput = {
     theme?: ObjectValues<typeof themes>;
     trailingIcon?: React.ReactNode;
     variant?: ObjectValues<typeof variants>;
+    labelVariant?: ObjectValues<typeof labelVariants>;
 } & InputHtmlProps;

package/react/text-input/text-input.types.js

@@ -1,2 +1,2 @@
-const o={dark:"dark",light:"light"},l={small:"small",large:"large"};export{o as themes,l as variants};
+const o={dark:"dark",light:"light"},l={small:"small",large:"large"},n={bold:"bold",basic:"basic"};export{n as labelVariants,o as themes,l as variants};
 //# sourceMappingURL=text-input.types.js.map