@sats-group/ui-lib 81.4.0 → 81.6.0

package/package.json

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

package/react/select/select.d.ts

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

package/react/select/select.js

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

package/react/select/select.js.map

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

package/react/select/select.scss

@@ -22,6 +22,14 @@
     &--wide {
       flex-wrap: nowrap;
     }
+
+    &--space-between {
+      justify-content: space-between;
+    }
+
+    &--theme-ghost {
+      padding-left: spacing.$xs;
+    }
   }
 
   // NOTE: Specificity hack
@@ -54,6 +62,10 @@
     pointer-events: none;
     display: flex;
     align-items: center;
+
+    &--theme-ghost {
+      right: spacing.$xs;
+    }
   }
 
   &__select {
@@ -84,6 +96,13 @@
       padding-left: spacing.$m;
     }
 
+    &--theme-ghost {
+      border: 0;
+      padding-top: spacing.$xs;
+      padding-bottom: spacing.$xs;
+      padding-left: spacing.$xs;
+    }
+
     @media (hover: hover) {
       &:hover {
         &:not(:disabled) {

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

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

package/react/select/select.types.js

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

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

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

package/tokens/dark.scss

@@ -120,6 +120,7 @@ $ge-graphs-trend-neutral: primitives.$coral-130;
 $ge-graphs-trend-upwards: primitives.$spring-green-80;
 $ge-icons-attention: primitives.$gold-100;
 $ge-icons-delete: primitives.$chili-red-80;
+$ge-icons-featured: primitives.$coral-100;
 $ge-icons-fixed: primitives.$white-100;
 $ge-icons-negative: primitives.$cardinal-100;
 $ge-icons-positive: primitives.$spring-green-80;
@@ -134,7 +135,7 @@ $ge-indicator-tags-information-alternate: primitives.$bright-blue-160;
 $ge-indicator-tags-information-default: primitives.$bright-blue-100;
 $ge-indicator-tags-negative-alternate: primitives.$cardinal-170;
 $ge-indicator-tags-negative-default: primitives.$cardinal-100;
-$ge-indicator-tags-neutral-alternate: primitives.$black-90;
+$ge-indicator-tags-neutral-alternate: primitives.$white-10;
 $ge-indicator-tags-neutral-default: primitives.$black-60;
 $ge-indicator-tags-positive-alternate: primitives.$spring-green-170;
 $ge-indicator-tags-positive-default: primitives.$spring-green-100;
@@ -188,6 +189,7 @@ $ge-signal-border-success: primitives.$spring-green-30;
 $ge-signal-border-waiting-list: primitives.$egyptian-purple-60;
 $ge-signal-border-warning: primitives.$gold-30;
 $ge-skeleton-default: primitives.$black-80;
+$ge-skeleton-fixed: primitives.$white-40;
 $ge-tabs-background-default: primitives.$white-0;
 $ge-tabs-background-disabled: primitives.$black-95;
 $ge-tabs-background-hover: primitives.$coral-190;

package/tokens/darkmode.css

@@ -119,6 +119,7 @@
 --ge-graphs-trend-upwards: #3a9979;
 --ge-icons-attention: #e2b74a;
 --ge-icons-delete: #e15b51;
+--ge-icons-featured: #fa5333;
 --ge-icons-fixed: #ffffff;
 --ge-icons-negative: #b93947;
 --ge-icons-positive: #3a9979;
@@ -131,15 +132,15 @@
 --ge-indicator-tags-featured-default: #fb6447;
 --ge-indicator-tags-information-alternate: #0f2f46;
 --ge-indicator-tags-information-default: #2676b0;
---ge-indicator-tags-negative-alternate: #381115;
+--ge-indicator-tags-negative-alternate: #4a171c;
 --ge-indicator-tags-negative-default: #b93947;
---ge-indicator-tags-neutral-alternate: #1a1a1a;
+--ge-indicator-tags-neutral-alternate: #ffffff1a;
 --ge-indicator-tags-neutral-default: #666666;
 --ge-indicator-tags-positive-alternate: #03261a;
 --ge-indicator-tags-positive-default: #097f58;
 --ge-indicators-attention-alternate: #443716;
 --ge-indicators-attention-default: #e2b74a;
---ge-indicators-negative-alternate: #381115;
+--ge-indicators-negative-alternate: #4a171c;
 --ge-indicators-negative-default: #b93947;
 --ge-indicators-neutral-alternate: #333333;
 --ge-indicators-neutral-default: #9ea6ae;
@@ -187,6 +188,7 @@
 --ge-signal-border-waiting-list: #8787b9;
 --ge-signal-border-warning: #f3e6c5;
 --ge-skeleton-default: #333333;
+--ge-skeleton-fixed: #ffffff66;
 --ge-tabs-background-default: #ffffff00;
 --ge-tabs-background-disabled: #0d0d0d;
 --ge-tabs-background-hover: #32110a;
@@ -382,7 +384,7 @@
 --on-buttons-on-waiting-list-outlined-default: #5f5fa2;
 --on-buttons-on-waiting-list-outlined-disabled: #808080;
 --on-buttons-on-waiting-list-outlined-hover: #37378b;
---signal-surface-error: #381115;
+--signal-surface-error: #4a171c;
 --signal-surface-featured: #32110a;
 --signal-surface-information: #0f2f46;
 --signal-surface-neutral: #1a1a1a;
@@ -407,7 +409,7 @@
 --workout-surface-gymfloor-hover: #644000;
 --workout-surface-other: #051e0e;
 --workout-surface-other-hover: #184629;
---workout-surface-pt: #0b3959;
+--workout-surface-pt: #002a47;
 --workout-surface-pt-hover: #16496c;
 --workout-surface-treatments: #011314;
 --workout-surface-treatments-hover: #04383b;

package/tokens/default-colours.css

@@ -1,9 +1,9 @@
 html:not([data-theme]) {
 --background-primary-default: #f3f4f5;
---background-primary-hover: #e9f1f7;
+--background-primary-hover: #e7e9eb;
 --background-primary-selected: #f3f4f5;
 --background-secondary-default: #ffffff;
---background-secondary-hover: #f3f4f5;
+--background-secondary-hover: #f7f7f7;
 --background-secondary-selected: #ffffff;
 --buttons-action-default: #ffffff00;
 --buttons-action-disabled: #ffffff00;
@@ -119,6 +119,7 @@ html:not([data-theme]) {
 --ge-graphs-trend-upwards: #3a9979;
 --ge-icons-attention: #e2b74a;
 --ge-icons-delete: #d93226;
+--ge-icons-featured: #fa5333;
 --ge-icons-fixed: #ffffff;
 --ge-icons-negative: #b93947;
 --ge-icons-positive: #097f58;
@@ -187,6 +188,7 @@ html:not([data-theme]) {
 --ge-signal-border-waiting-list: #5f5fa2;
 --ge-signal-border-warning: #866c2a;
 --ge-skeleton-default: #dcdee0;
+--ge-skeleton-fixed: #ffffff66;
 --ge-tabs-background-default: #ffffff00;
 --ge-tabs-background-disabled: #e7e9eb;
 --ge-tabs-background-hover: #fff6f5;
@@ -213,7 +215,7 @@ html:not([data-theme]) {
 --ge-workouts-pt: #70c4ff;
 --ge-workouts-treatments: #065d63;
 --on-background-error: #942e39;
---on-background-featured: #c84229;
+--on-background-featured: #af3a24;
 --on-background-information: #226a9e;
 --on-background-neutral: #666666;
 --on-background-success: #076646;
@@ -395,7 +397,7 @@ html:not([data-theme]) {
 --surface-primary-selected: #d4e4ef;
 --surface-secondary-default: #f7f7f7;
 --surface-secondary-disabled: #e5e5e5;
---surface-secondary-hover: #ffffff;
+--surface-secondary-hover: #f2f2f2;
 --surface-secondary-selected: #f2f2f2;
 --workout-surface-availability: #dcdee0;
 --workout-surface-availability-hover: #cfd3d6;

package/tokens/light.scss

@@ -1,10 +1,10 @@
 @use './primitives';
 /* Figma: https://www.figma.com/file/WzKCwRY09zn4rzRVfY0YvdRt/%F0%9F%8E%A8-sats-ds-styles?type=design&node-id=8481%3A40160&mode=design&t=4Gq1pqiSLpmo4bBj-1 */
 $background-primary-default: primitives.$blue-5;
-$background-primary-hover: primitives.$bright-blue-10;
+$background-primary-hover: primitives.$blue-10;
 $background-primary-selected: primitives.$blue-5;
 $background-secondary-default: primitives.$white-100;
-$background-secondary-hover: primitives.$blue-5;
+$background-secondary-hover: primitives.$black-3;
 $background-secondary-selected: primitives.$white-100;
 $buttons-action-default: primitives.$white-0;
 $buttons-action-disabled: primitives.$white-0;
@@ -120,6 +120,7 @@ $ge-graphs-trend-neutral: primitives.$coral-40;
 $ge-graphs-trend-upwards: primitives.$spring-green-80;
 $ge-icons-attention: primitives.$gold-100;
 $ge-icons-delete: primitives.$chili-red-100;
+$ge-icons-featured: primitives.$coral-100;
 $ge-icons-fixed: primitives.$white-100;
 $ge-icons-negative: primitives.$cardinal-100;
 $ge-icons-positive: primitives.$spring-green-100;
@@ -188,6 +189,7 @@ $ge-signal-border-success: primitives.$spring-green-120;
 $ge-signal-border-waiting-list: primitives.$egyptian-purple-80;
 $ge-signal-border-warning: primitives.$gold-140;
 $ge-skeleton-default: primitives.$light-grey-15;
+$ge-skeleton-fixed: primitives.$white-40;
 $ge-tabs-background-default: primitives.$white-0;
 $ge-tabs-background-disabled: primitives.$blue-10;
 $ge-tabs-background-hover: primitives.$coral-5;
@@ -214,7 +216,7 @@ $ge-workouts-other: primitives.$celadon-100;
 $ge-workouts-pt: primitives.$uranian-blue-100;
 $ge-workouts-treatments: primitives.$caribbean-current-100;
 $on-background-error: primitives.$cardinal-120;
-$on-background-featured: primitives.$coral-120;
+$on-background-featured: primitives.$coral-130;
 $on-background-information: primitives.$bright-blue-110;
 $on-background-neutral: primitives.$black-60;
 $on-background-success: primitives.$spring-green-120;
@@ -396,7 +398,7 @@ $surface-primary-hover: primitives.$bright-blue-10;
 $surface-primary-selected: primitives.$bright-blue-20;
 $surface-secondary-default: primitives.$black-3;
 $surface-secondary-disabled: primitives.$black-10;
-$surface-secondary-hover: primitives.$white-100;
+$surface-secondary-hover: primitives.$black-5;
 $surface-secondary-selected: primitives.$black-5;
 $workout-surface-availability: primitives.$light-grey-15;
 $workout-surface-availability-hover: primitives.$blue-20;

package/tokens/lightmode.css

@@ -1,9 +1,9 @@
 [data-theme="light"] {
 --background-primary-default: #f3f4f5;
---background-primary-hover: #e9f1f7;
+--background-primary-hover: #e7e9eb;
 --background-primary-selected: #f3f4f5;
 --background-secondary-default: #ffffff;
---background-secondary-hover: #f3f4f5;
+--background-secondary-hover: #f7f7f7;
 --background-secondary-selected: #ffffff;
 --buttons-action-default: #ffffff00;
 --buttons-action-disabled: #ffffff00;
@@ -119,6 +119,7 @@
 --ge-graphs-trend-upwards: #3a9979;
 --ge-icons-attention: #e2b74a;
 --ge-icons-delete: #d93226;
+--ge-icons-featured: #fa5333;
 --ge-icons-fixed: #ffffff;
 --ge-icons-negative: #b93947;
 --ge-icons-positive: #097f58;
@@ -187,6 +188,7 @@
 --ge-signal-border-waiting-list: #5f5fa2;
 --ge-signal-border-warning: #866c2a;
 --ge-skeleton-default: #dcdee0;
+--ge-skeleton-fixed: #ffffff66;
 --ge-tabs-background-default: #ffffff00;
 --ge-tabs-background-disabled: #e7e9eb;
 --ge-tabs-background-hover: #fff6f5;
@@ -213,7 +215,7 @@
 --ge-workouts-pt: #70c4ff;
 --ge-workouts-treatments: #065d63;
 --on-background-error: #942e39;
---on-background-featured: #c84229;
+--on-background-featured: #af3a24;
 --on-background-information: #226a9e;
 --on-background-neutral: #666666;
 --on-background-success: #076646;
@@ -395,7 +397,7 @@
 --surface-primary-selected: #d4e4ef;
 --surface-secondary-default: #f7f7f7;
 --surface-secondary-disabled: #e5e5e5;
---surface-secondary-hover: #ffffff;
+--surface-secondary-hover: #f2f2f2;
 --surface-secondary-selected: #f2f2f2;
 --workout-surface-availability: #dcdee0;
 --workout-surface-availability-hover: #cfd3d6;

package/tokens/primitives.scss

@@ -37,7 +37,7 @@ $bright-blue-80: #5191c0;
 $cardinal-10: #f8ebed;
 $cardinal-100: #b93947;
 $cardinal-120: #942e39;
-$cardinal-170: #381115;
+$cardinal-170: #4a171c;
 $cardinal-30: #eac4c8;
 $cardinal-60: #d58891;
 $caribbean-current-10: #e6efef;
@@ -124,7 +124,7 @@ $uranian-blue-10: #f1f9ff;
 $uranian-blue-100: #70c4ff;
 $uranian-blue-140: #2d6891;
 $uranian-blue-160: #16496c;
-$uranian-blue-180: #0b3959;
+$uranian-blue-180: #002a47;
 $uranian-blue-20: #e2f3ff;
 $uranian-blue-40: #c6e7ff;
 $uranian-blue-60: #a9dcff;