@sats-group/ui-lib 88.1.1 → 88.3.0

package/package.json

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

package/react/checkbox/checkbox.d.ts

@@ -4,6 +4,7 @@ declare const RefCheckbox: React.ForwardRefExoticComponent<Omit<import("../types
     intermediate?: boolean;
     description?: string;
     extra?: React.ReactNode;
+    isLabelBold?: boolean;
     isLabelVisible?: boolean;
     label?: string;
     name: string;

package/react/checkbox/checkbox.js

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

package/react/checkbox/checkbox.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../react/checkbox/checkbox.tsx"],
-  "sourcesContent": ["'use client';\n\nimport cn from 'classnames';\nimport * as React from 'react';\n\nimport useInputValidation from '../use-input-validation';\nimport Text from '../text';\n\nimport { Checkbox as Props, themes } from './checkbox.types';\n\nconst RefCheckbox = React.forwardRef<\n  HTMLInputElement,\n  React.PropsWithChildren<Props>\n>(\n  (\n    {\n      children,\n      disabled,\n      description,\n      extra,\n      intermediate,\n      isLabelVisible = true,\n      label,\n      name,\n      showCustomError = true,\n      theme,\n      value = '',\n      required,\n      hasHover = false,\n      isWide = true,\n      ...restProps\n    },\n    ref,\n  ) => {\n    const [onChange, onInvalid, error] = useInputValidation();\n\n    return (\n      <div\n        className={cn('checkbox', {\n          'checkbox--error': error,\n          'checkbox--intermediate': intermediate,\n          'checkbox--wide': isWide,\n          [`checkbox--${theme}`]: theme,\n        })}\n      >\n        <label\n          className={cn('checkbox__content', {\n            'checkbox__content--hover': hasHover,\n            [`checkbox__content--${theme}`]: theme,\n          })}\n        >\n          <div className=\"checkbox__main\">\n            <div className=\"checkbox__main-top\">\n              <div>\n                <input\n                  aria-label={isLabelVisible ? undefined : label}\n                  className=\"checkbox__input\"\n                  type=\"checkbox\"\n                  name={name}\n                  onChange={e => {\n                    // NOTE: If props specify an `onChange`, we need to call that too\n                    if (restProps.onChange) restProps.onChange(e);\n                    onChange(e);\n                  }}\n                  onInvalid={e => {\n                    // NOTE: If props specify an `onInvalid`, we need to call that too\n                    if (restProps.onInvalid) restProps.onInvalid(e);\n                    onInvalid(e);\n                  }}\n                  ref={ref}\n                  value={value}\n                  disabled={disabled}\n                  required={required}\n                  {...restProps}\n                />\n\n                <div\n                  className={cn('checkbox__icon', {\n                    'checkbox__icon--intermediate': intermediate,\n                    [`checkbox__icon--${theme}`]: theme,\n                  })}\n                >\n                  <svg\n                    className=\"checkbox__intermediate\"\n                    width=\"10\"\n                    height=\"10\"\n                    viewBox=\"0 0 10 10\"\n                    fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                  >\n                    <line\n                      x1=\"0\"\n                      y1=\"5\"\n                      x2=\"10\"\n                      y2=\"5\"\n                      stroke=\"currentColor\"\n                      strokeWidth=\"2\"\n                    />\n                  </svg>\n                  <svg\n                    className=\"checkbox__check\"\n                    width=\"12\"\n                    height=\"10\"\n                    viewBox=\"0 0 12 10\"\n                    fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                  >\n                    <path\n                      d=\"M4.76123 9.0605L0.700729 5L1.76123 3.9395L4.76123 6.9395L10.7612 0.939501L11.8217 2L4.76123 9.0605Z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                </div>\n              </div>\n              {isLabelVisible ? (\n                <>\n                  {label ? (\n                    <Text\n                      className={cn('checkbox__label', {\n                        [`checkbox__label--${theme}`]: theme,\n                        'checkbox__label--disabled': disabled,\n                      })}\n                      size={Text.sizes.basic}\n                    >\n                      {label}\n                    </Text>\n                  ) : (\n                    <div\n                      className={cn('checkbox__label', {\n                        [`checkbox__label--${theme}`]: theme,\n                        'checkbox__label--disabled': disabled,\n                      })}\n                    >\n                      {children}\n                    </div>\n                  )}\n                </>\n              ) : null}\n              {required ? <span className=\"checkbox__asterisk\">*</span> : null}\n            </div>\n            {description && (\n              <Text\n                className={cn('checkbox__description', {\n                  [`checkbox__label--${theme}`]: theme,\n                  'checkbox__label--disabled': disabled,\n                })}\n                size={Text.sizes.small}\n              >\n                {description}\n              </Text>\n            )}\n          </div>\n        </label>\n\n        {/* NOTE: This is aria-hidden because reporting of validation errors is handled by the browser */}\n        {error && showCustomError && (\n          <div\n            aria-hidden=\"true\"\n            className={cn('checkbox__error', {\n              [`checkbox__error--${theme}`]: theme,\n            })}\n          >\n            {error}\n          </div>\n        )}\n\n        {extra && <span className=\"checkbox__extra\">{extra}</span>}\n      </div>\n    );\n  },\n);\n\n// NOTE: If this isn't set, stack traces say \"forwardRef\" instead of \"Checkbox\"\nRefCheckbox.displayName = 'Checkbox';\n\n// NOTE: The component is redeclared here because TypeScript doesn't accept assigning extra properties to `RefComponent` when it's declared\nconst Checkbox: typeof RefCheckbox & {\n  themes: typeof themes;\n} = Object.assign(RefCheckbox, { themes });\n\nexport default Checkbox;\n"],
-  "mappings": "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",
-  "names": ["cn", "React", "useInputValidation", "Text", "themes", "RefCheckbox", "_a", "ref", "_b", "children", "disabled", "description", "extra", "intermediate", "isLabelVisible", "label", "name", "showCustomError", "theme", "value", "required", "hasHover", "isWide", "restProps", "__objRest", "onChange", "onInvalid", "error", "__spreadValues", "e", "Checkbox", "checkbox_default"]
+  "sourcesContent": ["'use client';\n\nimport cn from 'classnames';\nimport * as React from 'react';\n\nimport useInputValidation from '../use-input-validation';\nimport Text from '../text';\n\nimport { Checkbox as Props, themes } from './checkbox.types';\n\nconst RefCheckbox = React.forwardRef<\n  HTMLInputElement,\n  React.PropsWithChildren<Props>\n>(\n  (\n    {\n      children,\n      disabled,\n      description,\n      extra,\n      intermediate,\n      isLabelBold = false,\n      isLabelVisible = true,\n      label,\n      name,\n      showCustomError = true,\n      theme,\n      value = '',\n      required,\n      hasHover = false,\n      isWide = true,\n      ...restProps\n    },\n    ref,\n  ) => {\n    const [onChange, onInvalid, error] = useInputValidation();\n\n    return (\n      <div\n        className={cn('checkbox', {\n          'checkbox--error': error,\n          'checkbox--intermediate': intermediate,\n          'checkbox--wide': isWide,\n          [`checkbox--${theme}`]: theme,\n        })}\n      >\n        <label\n          className={cn('checkbox__content', {\n            'checkbox__content--hover': hasHover,\n            [`checkbox__content--${theme}`]: theme,\n          })}\n        >\n          <div className=\"checkbox__main\">\n            <div className=\"checkbox__main-top\">\n              <div>\n                <input\n                  aria-label={isLabelVisible ? undefined : label}\n                  className=\"checkbox__input\"\n                  type=\"checkbox\"\n                  name={name}\n                  onChange={e => {\n                    // NOTE: If props specify an `onChange`, we need to call that too\n                    if (restProps.onChange) restProps.onChange(e);\n                    onChange(e);\n                  }}\n                  onInvalid={e => {\n                    // NOTE: If props specify an `onInvalid`, we need to call that too\n                    if (restProps.onInvalid) restProps.onInvalid(e);\n                    onInvalid(e);\n                  }}\n                  ref={ref}\n                  value={value}\n                  disabled={disabled}\n                  required={required}\n                  {...restProps}\n                />\n\n                <div\n                  className={cn('checkbox__icon', {\n                    'checkbox__icon--intermediate': intermediate,\n                    [`checkbox__icon--${theme}`]: theme,\n                  })}\n                >\n                  <svg\n                    className=\"checkbox__intermediate\"\n                    width=\"10\"\n                    height=\"10\"\n                    viewBox=\"0 0 10 10\"\n                    fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                  >\n                    <line\n                      x1=\"0\"\n                      y1=\"5\"\n                      x2=\"10\"\n                      y2=\"5\"\n                      stroke=\"currentColor\"\n                      strokeWidth=\"2\"\n                    />\n                  </svg>\n                  <svg\n                    className=\"checkbox__check\"\n                    width=\"12\"\n                    height=\"10\"\n                    viewBox=\"0 0 12 10\"\n                    fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                  >\n                    <path\n                      d=\"M4.76123 9.0605L0.700729 5L1.76123 3.9395L4.76123 6.9395L10.7612 0.939501L11.8217 2L4.76123 9.0605Z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                </div>\n              </div>\n              {isLabelVisible ? (\n                <>\n                  {label ? (\n                    <Text\n                      className={cn('checkbox__label', {\n                        [`checkbox__label--${theme}`]: theme,\n                        'checkbox__label--disabled': disabled,\n                      })}\n                      size={Text.sizes.basic}\n                      theme={isLabelBold ? Text.themes.emphasis : undefined}\n                    >\n                      {label}\n                    </Text>\n                  ) : (\n                    <div\n                      className={cn('checkbox__label', {\n                        [`checkbox__label--${theme}`]: theme,\n                        'checkbox__label--disabled': disabled,\n                      })}\n                    >\n                      {children}\n                    </div>\n                  )}\n                </>\n              ) : null}\n              {required ? <span className=\"checkbox__asterisk\">*</span> : null}\n            </div>\n            {description && (\n              <Text\n                className={cn('checkbox__description', {\n                  [`checkbox__label--${theme}`]: theme,\n                  'checkbox__label--disabled': disabled,\n                })}\n                size={Text.sizes.small}\n              >\n                {description}\n              </Text>\n            )}\n          </div>\n        </label>\n\n        {/* NOTE: This is aria-hidden because reporting of validation errors is handled by the browser */}\n        {error && showCustomError && (\n          <div\n            aria-hidden=\"true\"\n            className={cn('checkbox__error', {\n              [`checkbox__error--${theme}`]: theme,\n            })}\n          >\n            {error}\n          </div>\n        )}\n\n        {extra && <span className=\"checkbox__extra\">{extra}</span>}\n      </div>\n    );\n  },\n);\n\n// NOTE: If this isn't set, stack traces say \"forwardRef\" instead of \"Checkbox\"\nRefCheckbox.displayName = 'Checkbox';\n\n// NOTE: The component is redeclared here because TypeScript doesn't accept assigning extra properties to `RefComponent` when it's declared\nconst Checkbox: typeof RefCheckbox & {\n  themes: typeof themes;\n} = Object.assign(RefCheckbox, { themes });\n\nexport default Checkbox;\n"],
+  "mappings": "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",
+  "names": ["cn", "React", "useInputValidation", "Text", "themes", "RefCheckbox", "_a", "ref", "_b", "children", "disabled", "description", "extra", "intermediate", "isLabelBold", "isLabelVisible", "label", "name", "showCustomError", "theme", "value", "required", "hasHover", "isWide", "restProps", "__objRest", "onChange", "onInvalid", "error", "__spreadValues", "e", "Checkbox", "checkbox_default"]
 }

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

@@ -7,6 +7,7 @@ export type Checkbox = Omit<InputHtmlProps, 'value'> & {
     intermediate?: boolean;
     description?: string;
     extra?: React.ReactNode;
+    isLabelBold?: boolean;
     isLabelVisible?: boolean;
     label?: string;
     name: string;

package/react/checkbox/checkbox.types.js

@@ -1,2 +1,2 @@
-const s={light:"light",blue:"blue"};export{s as themes};
+const l={light:"light",blue:"blue"};export{l as themes};
 //# sourceMappingURL=checkbox.types.js.map

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

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

package/react/select/select.js

@@ -1,2 +1,2 @@
-"use client";var j=Object.defineProperty;var r=Object.getOwnPropertySymbols;var b=Object.prototype.hasOwnProperty,C=Object.prototype.propertyIsEnumerable;var x=(e,s,t)=>s in e?j(e,s,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[s]=t,f=(e,s)=>{for(var t in s||(s={}))b.call(s,t)&&x(e,t,s[t]);if(r)for(var t of r(s))C.call(s,t)&&x(e,t,s[t]);return e};var E=(e,s)=>{var t={};for(var n in e)b.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&&C.call(e,n)&&(t[n]=e[n]);return t};import c from"classnames";import*as l from"react";import A from"../use-input-validation";import D from"../select-option/select-option";import i from"../text";import F from"../icons/18/arrow-down";import{labelPositions as w,themes as W,variants as h}from"./select.types";const y=l.forwardRef((G,k)=>{var S=G,{children:e,className:s,id:t,isLabelVisible:n=!0,label:m,labelPosition:$=w.stacked,name:O,onChange:P=()=>{},onChangeOption:T=()=>{},options:u=[],required:_,theme:a,variant:N=h.large,wide:p}=S,v=E(S,["children","className","id","isLabelVisible","label","labelPosition","name","onChange","onChangeOption","options","required","theme","variant","wide"]);const[z,H,d]=A(),M=o=>{P(o),T(u.find(({value:L})=>L===o.target.value)),z(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--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:M,onInvalid:o=>{v.onInvalid&&v.onInvalid(o),H(o)},ref:k,required:_},v),u.map(o=>l.createElement(D,f({key:o.value},o)))),l.createElement("span",{className:c("select__chevron",{[`select__chevron--theme-${a}`]:a})},l.createElement(F,null))),d?l.createElement("div",{"aria-hidden":"true",className:"select__error"},d):null))});y.displayName="Select";const B=y,I=Object.assign(B,{labelPositions:w,variants:h,themes:W});var q=I;export{q as default};
+"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};
 //# 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 {\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      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--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": "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",
-  "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", "theme", "variant", "wide", "restProps", "__objRest", "validationOnChange", "onInvalid", "error", "onInputChange", "e", "value", "asterix", "Select", "__spreadValues", "option", "SelectComponent", "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';\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"]
 }

package/react/select/select.scss

@@ -35,7 +35,8 @@
   :root &--error {
     select {
       background-color: rgba(var(--signal-surface-error), 0.07);
-      border-color: var(--ge-signal-border-error);
+      outline: 2px solid var(--ge-signal-error);
+      outline-offset: -2px;
       color: var(--on-signal-surface-error-default);
     }
   }
@@ -133,8 +134,14 @@
   }
 
   &__error {
+    display: flex;
+    gap: spacing.$xs;
+    align-items: center;
     color: var(--ge-signal-error);
-    margin-top: 4px;
+
+    > svg {
+      flex-shrink: 0;
+    }
   }
 
   &__asterisk {

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

@@ -1,5 +1,6 @@
 import { ObjectValues, SelectHtmlProps } from '../types';
 import { SelectOption } from '../select-option/select-option.types';
+import { Messages } from '../use-input-validation.types';
 export declare const labelPositions: {
     readonly inline: "inline";
     readonly stacked: "stacked";
@@ -12,6 +13,8 @@ export declare const themes: {
     readonly ghost: "ghost";
 };
 export type Select<OptionExtra = any> = {
+    customErrorMessages?: Messages;
+    hasError?: boolean;
     id: string;
     isLabelVisible?: boolean;
     label?: string;

package/react/select/select.types.js

@@ -1,2 +1,2 @@
-const i={inline:"inline",stacked:"stacked"},a={small:"small",large:"large"},l={ghost:"ghost"};export{i as labelPositions,l as themes,a as variants};
+const l={inline:"inline",stacked:"stacked"},r={small:"small",large:"large"},p={ghost:"ghost"};export{l as labelPositions,p 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';\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} & SelectHtmlProps;\n"],
-  "mappings": "AAIO,MAAMA,EAAiB,CAC5B,OAAQ,SACR,QAAS,SACX,EAEaC,EAAW,CACtB,MAAO,QACP,MAAO,OACT,EAEaC,EAAS,CACpB,MAAO,OACT",
+  "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"]
 }