@sats-group/ui-lib 86.2.3 → 87.0.1

package/package.json

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

package/react/banner/banner.scss

@@ -92,11 +92,16 @@
   }
 
   &__icon {
-    margin-right: spacing.$m;
+    margin-right: spacing.$xs;
+    margin-top: 2px;
+
+    @media(min-width: 800px) {
+      margin-top: spacing.$xxs;
+    }
   }
 
   &__title {
-    margin-bottom: spacing.$s;
+    margin-bottom: spacing.$xs;
   }
 
   &__list {
@@ -112,7 +117,7 @@
   }
 
   &__link {
-    margin-top: spacing.$m;
+    margin-top: spacing.$s;
   }
 
   &__secondary {

package/react/checkbox/checkbox.d.ts

@@ -10,7 +10,8 @@ declare const RefCheckbox: React.ForwardRefExoticComponent<Omit<import("../types
     value: string;
     showCustomError?: boolean;
     theme?: import("../types").ObjectValues<typeof themes>;
-    isUnderlined?: boolean;
+    hasHover?: boolean;
+    isWide?: boolean;
 } & {
     children?: React.ReactNode | undefined;
 } & React.RefAttributes<HTMLInputElement>>;

package/react/checkbox/checkbox.js

@@ -1,2 +1,2 @@
-"use client";var T=Object.defineProperty;var b=Object.getOwnPropertySymbols;var p=Object.prototype.hasOwnProperty,f=Object.prototype.propertyIsEnumerable;var t=(c,o,i)=>o in c?T(c,o,{enumerable:!0,configurable:!0,writable:!0,value:i}):c[o]=i,u=(c,o)=>{for(var i in o||(o={}))p.call(o,i)&&t(c,i,o[i]);if(b)for(var i of b(o))f.call(o,i)&&t(c,i,o[i]);return c};var g=(c,o)=>{var i={};for(var l in c)p.call(c,l)&&o.indexOf(l)<0&&(i[l]=c[l]);if(c!=null&&b)for(var l of b(c))o.indexOf(l)<0&&f.call(c,l)&&(i[l]=c[l]);return i};import s from"classnames";import*as e from"react";import B from"../use-input-validation";import h from"../text";import{themes as M}from"./checkbox.types";const N=e.forwardRef((j,L)=>{var m=j,{children:c,disabled:o,description:i,extra:l,intermediate:k,isLabelVisible:d=!0,label:r,name:w,showCustomError:C=!0,theme:n,value:y="",isUnderlined:I,required:v}=m,a=g(m,["children","disabled","description","extra","intermediate","isLabelVisible","label","name","showCustomError","theme","value","isUnderlined","required"]);const[$,z,x]=B();return e.createElement("div",{className:s("checkbox",{"checkbox--error":x,"checkbox--intermediate":k,[`checkbox--${n}`]:n})},e.createElement("label",{className:s("checkbox__content",{"checkbox--underline":I})},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:r,className:"checkbox__input",type:"checkbox",name:w,onChange:_=>{a.onChange&&a.onChange(_),$(_)},onInvalid:_=>{a.onInvalid&&a.onInvalid(_),z(_)},ref:L,value:y,disabled:o,required:v},a)),e.createElement("div",{className:s("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,r?e.createElement(h,{className:s("checkbox__label",{[`checkbox__label--${n}`]:n,"checkbox__label--disabled":o}),size:h.sizes.basic},r):e.createElement("div",{className:s("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:s("checkbox__description",{[`checkbox__label--${n}`]:n,"checkbox__label--disabled":o}),size:h.sizes.small},i))),x&&C&&e.createElement("div",{"aria-hidden":"true",className:s("checkbox__error",{[`checkbox__error--${n}`]:n})},x),l&&e.createElement("span",{className:"checkbox__extra"},l))});N.displayName="Checkbox";const W=Object.assign(N,{themes:M});var D=W;export{D as default};
+"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};
 //# 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      isUnderlined,\n      required,\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--${theme}`]: theme,\n        })}\n      >\n        <label\n          className={cn('checkbox__content', {\n            'checkbox--underline': isUnderlined,\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", "isUnderlined", "required", "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      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"]
 }

package/react/checkbox/checkbox.scss

@@ -1,13 +1,15 @@
 @use '../../tokens/colours';
 @use '../../tokens/spacing';
+@use '../../tokens/corner-radius';
 
 .checkbox {
   $block: &;
   $size: 20px;
+  display: flex;
 
   &__asterisk {
     color: var(--on-surface-featured);
-    margin-left: spacing.$xs;
+    margin-left: spacing.$xxs;
   }
 
   &:focus-within {
@@ -21,13 +23,8 @@
     }
   }
 
-  &--underline {
-    padding-bottom: spacing.$s;
-    border-bottom: 1px solid var(--ge-divider-default);
-
-    &--light {
-      border-color: var(--ge-divider-default);
-    }
+  &--wide {
+    display: block;
   }
 
   &--intermediate {
@@ -86,7 +83,6 @@
   &__main-top {
     display: flex;
     align-items: center;
-    gap: spacing.$xs;
   }
 
   &__input {
@@ -153,6 +149,27 @@
 
   &__content {
     display: flex;
+    cursor: pointer;
+
+    &--hover {
+      padding: spacing.$xs;
+      border-radius: corner-radius.$s;
+      &:hover {
+        background: var(--background-secondary-hover);
+      }
+
+      &.checkbox__content--light {
+        &:hover {
+          background: var(--fixed-background-secondary-hover);
+        }
+      }
+
+      &.checkbox__content--blue {
+        &:hover {
+          background: var(--surface-primary-hover);
+        }
+      }
+    }
   }
 
   &__icon {
@@ -162,7 +179,6 @@
     height: $size;
     position: relative;
     width: $size;
-    margin-top: 2px;
     flex-shrink: 0;
 
     svg {
@@ -192,6 +208,7 @@
 
   &__label {
     color: var(--on-surface-primary-default);
+    margin-left: spacing.$xs;
 
     &--light {
       color: var(--on-fixed-surface-primary-default);

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

@@ -13,5 +13,6 @@ export type Checkbox = Omit<InputHtmlProps, 'value'> & {
     value: string;
     showCustomError?: boolean;
     theme?: ObjectValues<typeof themes>;
-    isUnderlined?: boolean;
+    hasHover?: boolean;
+    isWide?: boolean;
 };

package/react/checkbox/checkbox.types.js

@@ -1,2 +1,2 @@
-const l={light:"light",blue:"blue"};export{l as themes};
+const s={light:"light",blue:"blue"};export{s 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  isUnderlined?: 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  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/form-content/checkbox-category.js

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

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

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

package/react/form-content/form-content.radio-list.js

@@ -1,2 +1,2 @@
-"use client";var v=Object.defineProperty,T=Object.defineProperties;var g=Object.getOwnPropertyDescriptors;var d=Object.getOwnPropertySymbols;var C=Object.prototype.hasOwnProperty,L=Object.prototype.propertyIsEnumerable;var h=(t,e,r)=>e in t?v(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,i=(t,e)=>{for(var r in e||(e={}))C.call(e,r)&&h(t,r,e[r]);if(d)for(var r of d(e))L.call(e,r)&&h(t,r,e[r]);return t},m=(t,e)=>T(t,g(e));import*as s from"react";import P from"../radio";import u from"../text";import _ from"./form-content.search";import k from"classnames";const x=t=>{const[e,r]=s.useState(""),[n,l]=s.useState();return s.createElement("div",null,"searchProps"in t?s.createElement(_,m(i({},t.searchProps),{searchResult:l,searchTerm:r})):void 0,t.categories.map((o,c)=>s.createElement("div",{key:c},o.header&&o.options.length>0&&e.length===0?s.createElement(u,{className:k("form-content__group-title",{hidden:e.length>0}),theme:u.themes.emphasis},o.header):void 0,o.options.map((a,f)=>{const p=e.length>0?n==null?void 0:n.find(S=>S.key.toLowerCase()===a.value.toLowerCase()):void 0;if(!(e.length>0&&!p))return s.createElement("div",{key:f,className:"form-content__radio-button"},s.createElement(P,m(i({},a),{isUnderline:!0})))}))))};var q=x;export{q as default};
+"use client";var v=Object.defineProperty,T=Object.defineProperties;var g=Object.getOwnPropertyDescriptors;var a=Object.getOwnPropertySymbols;var C=Object.prototype.hasOwnProperty,L=Object.prototype.propertyIsEnumerable;var d=(t,e,r)=>e in t?v(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,i=(t,e)=>{for(var r in e||(e={}))C.call(e,r)&&d(t,r,e[r]);if(a)for(var r of a(e))L.call(e,r)&&d(t,r,e[r]);return t},h=(t,e)=>T(t,g(e));import*as s from"react";import P from"../radio";import u from"../text";import _ from"./form-content.search";import k from"classnames";const x=t=>{const[e,r]=s.useState(""),[n,c]=s.useState();return s.createElement("div",null,"searchProps"in t?s.createElement(_,h(i({},t.searchProps),{searchResult:c,searchTerm:r})):void 0,t.categories.map((o,f)=>s.createElement("div",{key:f},o.header&&o.options.length>0&&e.length===0?s.createElement(u,{className:k("form-content__group-title",{hidden:e.length>0}),theme:u.themes.emphasis},o.header):void 0,o.options.map((m,l)=>{const p=e.length>0?n==null?void 0:n.find(S=>S.key.toLowerCase()===m.value.toLowerCase()):void 0;if(!(e.length>0&&!p))return s.createElement("div",{key:l,className:"form-content__radio-button"},s.createElement(P,i({},m)))}))))};var y=x;export{y as default};
 //# sourceMappingURL=form-content.radio-list.js.map

package/react/form-content/form-content.radio-list.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../react/form-content/form-content.radio-list.tsx"],
-  "sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport Radio from '../radio';\nimport Text from '../text';\nimport FormContentSearch from './form-content.search';\n\nimport { RadioList as Props, SearchItem } from './form-content.types';\nimport classNames from 'classnames';\n\nconst RadioList: React.FC<Props> = props => {\n  const [searchTerm, setSearchTerm] = React.useState('');\n  const [searchResult, setSearchResult] = React.useState<SearchItem[]>();\n  return (\n    <div>\n      {'searchProps' in props ? (\n        <FormContentSearch\n          {...props.searchProps}\n          searchResult={setSearchResult}\n          searchTerm={setSearchTerm}\n        />\n      ) : undefined}\n      {props.categories.map((category, categoryIndex) => (\n        <div key={categoryIndex}>\n          {category.header &&\n          category.options.length > 0 &&\n          searchTerm.length === 0 ? (\n            <Text\n              className={classNames('form-content__group-title', {\n                hidden: searchTerm.length > 0,\n              })}\n              theme={Text.themes.emphasis}\n            >\n              {category.header}\n            </Text>\n          ) : undefined}\n          {category.options.map((radio, i) => {\n            const isInSearchResults =\n              searchTerm.length > 0\n                ? searchResult?.find(\n                    item =>\n                      item.key.toLowerCase() === radio.value.toLowerCase(),\n                  )\n                : undefined;\n\n            if (searchTerm.length > 0 && !isInSearchResults) return;\n\n            return (\n              <div key={i} className=\"form-content__radio-button\">\n                <Radio {...radio} isUnderline={true} />\n              </div>\n            );\n          })}\n        </div>\n      ))}\n    </div>\n  );\n};\n\nexport default RadioList;\n"],
-  "mappings": "0bAEA,UAAYA,MAAW,QACvB,OAAOC,MAAW,WAClB,OAAOC,MAAU,UACjB,OAAOC,MAAuB,wBAG9B,OAAOC,MAAgB,aAEvB,MAAMC,EAA6BC,GAAS,CAC1C,KAAM,CAACC,EAAYC,CAAa,EAAIR,EAAM,SAAS,EAAE,EAC/C,CAACS,EAAcC,CAAe,EAAIV,EAAM,SAAuB,EACrE,OACEA,EAAA,cAAC,WACE,gBAAiBM,EAChBN,EAAA,cAACG,EAAAQ,EAAAC,EAAA,GACKN,EAAM,aADX,CAEC,aAAcI,EACd,WAAYF,GACd,EACE,OACHF,EAAM,WAAW,IAAI,CAACO,EAAUC,IAC/Bd,EAAA,cAAC,OAAI,IAAKc,GACPD,EAAS,QACVA,EAAS,QAAQ,OAAS,GAC1BN,EAAW,SAAW,EACpBP,EAAA,cAACE,EAAA,CACC,UAAWE,EAAW,4BAA6B,CACjD,OAAQG,EAAW,OAAS,CAC9B,CAAC,EACD,MAAOL,EAAK,OAAO,UAElBW,EAAS,MACZ,EACE,OACHA,EAAS,QAAQ,IAAI,CAACE,EAAOC,IAAM,CAClC,MAAMC,EACJV,EAAW,OAAS,EAChBE,GAAA,YAAAA,EAAc,KACZS,GACEA,EAAK,IAAI,YAAY,IAAMH,EAAM,MAAM,YAAY,GAEvD,OAEN,GAAI,EAAAR,EAAW,OAAS,GAAK,CAACU,GAE9B,OACEjB,EAAA,cAAC,OAAI,IAAKgB,EAAG,UAAU,8BACrBhB,EAAA,cAACC,EAAAU,EAAAC,EAAA,GAAUG,GAAV,CAAiB,YAAa,IAAM,CACvC,CAEJ,CAAC,CACH,CACD,CACH,CAEJ,EAEA,IAAOI,EAAQd",
+  "sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport Radio from '../radio';\nimport Text from '../text';\nimport FormContentSearch from './form-content.search';\n\nimport { RadioList as Props, SearchItem } from './form-content.types';\nimport classNames from 'classnames';\n\nconst RadioList: React.FC<Props> = props => {\n  const [searchTerm, setSearchTerm] = React.useState('');\n  const [searchResult, setSearchResult] = React.useState<SearchItem[]>();\n  return (\n    <div>\n      {'searchProps' in props ? (\n        <FormContentSearch\n          {...props.searchProps}\n          searchResult={setSearchResult}\n          searchTerm={setSearchTerm}\n        />\n      ) : undefined}\n      {props.categories.map((category, categoryIndex) => (\n        <div key={categoryIndex}>\n          {category.header &&\n          category.options.length > 0 &&\n          searchTerm.length === 0 ? (\n            <Text\n              className={classNames('form-content__group-title', {\n                hidden: searchTerm.length > 0,\n              })}\n              theme={Text.themes.emphasis}\n            >\n              {category.header}\n            </Text>\n          ) : undefined}\n          {category.options.map((radio, i) => {\n            const isInSearchResults =\n              searchTerm.length > 0\n                ? searchResult?.find(\n                    item =>\n                      item.key.toLowerCase() === radio.value.toLowerCase(),\n                  )\n                : undefined;\n\n            if (searchTerm.length > 0 && !isInSearchResults) return;\n\n            return (\n              <div key={i} className=\"form-content__radio-button\">\n                <Radio {...radio} />\n              </div>\n            );\n          })}\n        </div>\n      ))}\n    </div>\n  );\n};\n\nexport default RadioList;\n"],
+  "mappings": "0bAEA,UAAYA,MAAW,QACvB,OAAOC,MAAW,WAClB,OAAOC,MAAU,UACjB,OAAOC,MAAuB,wBAG9B,OAAOC,MAAgB,aAEvB,MAAMC,EAA6BC,GAAS,CAC1C,KAAM,CAACC,EAAYC,CAAa,EAAIR,EAAM,SAAS,EAAE,EAC/C,CAACS,EAAcC,CAAe,EAAIV,EAAM,SAAuB,EACrE,OACEA,EAAA,cAAC,WACE,gBAAiBM,EAChBN,EAAA,cAACG,EAAAQ,EAAAC,EAAA,GACKN,EAAM,aADX,CAEC,aAAcI,EACd,WAAYF,GACd,EACE,OACHF,EAAM,WAAW,IAAI,CAACO,EAAUC,IAC/Bd,EAAA,cAAC,OAAI,IAAKc,GACPD,EAAS,QACVA,EAAS,QAAQ,OAAS,GAC1BN,EAAW,SAAW,EACpBP,EAAA,cAACE,EAAA,CACC,UAAWE,EAAW,4BAA6B,CACjD,OAAQG,EAAW,OAAS,CAC9B,CAAC,EACD,MAAOL,EAAK,OAAO,UAElBW,EAAS,MACZ,EACE,OACHA,EAAS,QAAQ,IAAI,CAACE,EAAOC,IAAM,CAClC,MAAMC,EACJV,EAAW,OAAS,EAChBE,GAAA,YAAAA,EAAc,KACZS,GACEA,EAAK,IAAI,YAAY,IAAMH,EAAM,MAAM,YAAY,GAEvD,OAEN,GAAI,EAAAR,EAAW,OAAS,GAAK,CAACU,GAE9B,OACEjB,EAAA,cAAC,OAAI,IAAKgB,EAAG,UAAU,8BACrBhB,EAAA,cAACC,EAAAW,EAAA,GAAUG,EAAO,CACpB,CAEJ,CAAC,CACH,CACD,CACH,CAEJ,EAEA,IAAOI,EAAQd",
   "names": ["React", "Radio", "Text", "FormContentSearch", "classNames", "RadioList", "props", "searchTerm", "setSearchTerm", "searchResult", "setSearchResult", "__spreadProps", "__spreadValues", "category", "categoryIndex", "radio", "i", "isInSearchResults", "item", "form_content_radio_list_default"]
 }

package/react/radio/radio.d.ts

@@ -3,11 +3,12 @@ import { colors } from './radio.types';
 declare const RefRadio: React.ForwardRefExoticComponent<{
     color?: import("../types").ObjectValues<typeof colors>;
     description?: string;
-    isUnderline?: boolean;
     label?: string;
     name: string;
     showCustomError?: boolean;
     value: string;
+    hasHover?: boolean;
+    isWide?: boolean;
 } & import("../types").InputHtmlProps & {
     children?: React.ReactNode | undefined;
 } & React.RefAttributes<HTMLInputElement>>;

package/react/radio/radio.js

@@ -1,2 +1,2 @@
-"use client";var x=Object.defineProperty;var l=Object.getOwnPropertySymbols;var f=Object.prototype.hasOwnProperty,p=Object.prototype.propertyIsEnumerable;var t=(a,i,o)=>i in a?x(a,i,{enumerable:!0,configurable:!0,writable:!0,value:o}):a[i]=o,u=(a,i)=>{for(var o in i||(i={}))f.call(i,o)&&t(a,o,i[o]);if(l)for(var o of l(i))p.call(i,o)&&t(a,o,i[o]);return a};var c=(a,i)=>{var o={};for(var n in a)f.call(a,n)&&i.indexOf(n)<0&&(o[n]=a[n]);if(a!=null&&l)for(var n of l(a))i.indexOf(n)<0&&p.call(a,n)&&(o[n]=a[n]);return o};import R from"classnames";import*as e from"react";import T from"../use-input-validation";import v from"../text";import{colors as z}from"./radio.types";const _=e.forwardRef((k,C)=>{var m=k,{children:a,color:i,description:o,isUnderline:n,label:h,name:I,showCustomError:N=!0,value:g}=m,r=c(m,["children","color","description","isUnderline","label","name","showCustomError","value"]);const[b,y,s]=T();return e.createElement("label",{className:R("radio",{"radio--error":s,"radio--underline":n},i)},e.createElement("input",u({name:I,value:g,ref:C,type:"radio",onChange:d=>{r.onChange&&r.onChange(d),b(d)},onInvalid:d=>{r.onInvalid&&r.onInvalid(d),y(d)}},r)),e.createElement("div",{className:"radio__label"},e.createElement("span",{className:"radio__fake-element"}),e.createElement("span",null,h,a)),s&&N&&e.createElement("div",{"aria-hidden":"true",className:"radio__error"},s),o&&e.createElement(v,{className:"radio__description",size:v.sizes.small},o))});_.displayName="Radio";const j=Object.assign(_,{colors:z});var V=j;export{V as default};
+"use client";var R=Object.defineProperty;var l=Object.getOwnPropertySymbols;var f=Object.prototype.hasOwnProperty,p=Object.prototype.propertyIsEnumerable;var t=(a,i,o)=>i in a?R(a,i,{enumerable:!0,configurable:!0,writable:!0,value:o}):a[i]=o,u=(a,i)=>{for(var o in i||(i={}))f.call(i,o)&&t(a,o,i[o]);if(l)for(var o of l(i))p.call(i,o)&&t(a,o,i[o]);return a};var v=(a,i)=>{var o={};for(var e in a)f.call(a,e)&&i.indexOf(e)<0&&(o[e]=a[e]);if(a!=null&&l)for(var e of l(a))i.indexOf(e)<0&&p.call(a,e)&&(o[e]=a[e]);return o};import T from"classnames";import*as r from"react";import w from"../use-input-validation";import c from"../text";import{colors as z}from"./radio.types";const h=r.forwardRef((k,b)=>{var m=k,{children:a,color:i,description:o,label:e,name:_,showCustomError:I=!0,value:N,isWide:g=!0,hasHover:C=!1}=m,n=v(m,["children","color","description","label","name","showCustomError","value","isWide","hasHover"]);const[y,x,s]=w();return r.createElement("label",{className:T("radio",{"radio--error":s,"radio--wide":g,"radio--hover":C},i)},r.createElement("input",u({name:_,value:N,ref:b,type:"radio",onChange:d=>{n.onChange&&n.onChange(d),y(d)},onInvalid:d=>{n.onInvalid&&n.onInvalid(d),x(d)}},n)),r.createElement("div",{className:"radio__label"},r.createElement("span",{className:"radio__fake-element"}),r.createElement("span",null,e,a)),s&&I&&r.createElement("div",{"aria-hidden":"true",className:"radio__error"},s),o&&r.createElement(c,{className:"radio__description",size:c.sizes.small},o))});h.displayName="Radio";const j=Object.assign(h,{colors:z});var W=j;export{W as default};
 //# sourceMappingURL=radio.js.map

package/react/radio/radio.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../react/radio/radio.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 { colors, Radio as Props } from './radio.types';\n\nconst RefRadio = React.forwardRef<\n  HTMLInputElement,\n  React.PropsWithChildren<Props>\n>(\n  (\n    {\n      children,\n      color,\n      description,\n      isUnderline,\n      label,\n      name,\n      showCustomError = true,\n      value,\n      ...restProps\n    },\n    ref,\n  ) => {\n    const [onChange, onInvalid, error] = useInputValidation();\n\n    return (\n      <label\n        className={cn(\n          'radio',\n          { 'radio--error': error, 'radio--underline': isUnderline },\n          color,\n        )}\n      >\n        <input\n          name={name}\n          value={value}\n          ref={ref}\n          type=\"radio\"\n          onChange={e => {\n            // NOTE: To not break compatibility\n            if (restProps.onChange) restProps.onChange(e);\n            onChange(e);\n          }}\n          onInvalid={e => {\n            // NOTE: To not break compatibility\n            if (restProps.onInvalid) restProps.onInvalid(e);\n            onInvalid(e);\n          }}\n          {...restProps}\n        />\n        <div className=\"radio__label\">\n          <span className=\"radio__fake-element\"></span>\n          <span>\n            {label}\n            {children}\n          </span>\n        </div>\n\n        {/* NOTE: This is aria-hidden because reporting of validation errors is handled by the browser */}\n        {error && showCustomError && (\n          <div aria-hidden=\"true\" className=\"radio__error\">\n            {error}\n          </div>\n        )}\n\n        {description && (\n          <Text className=\"radio__description\" size={Text.sizes.small}>\n            {description}\n          </Text>\n        )}\n      </label>\n    );\n  },\n);\n\n// NOTE: If this isn't set, stack traces say \"forwardRef\" instead of \"Radio\"\nRefRadio.displayName = 'Radio';\n\n// NOTE: The component is redeclared here because TypeScript doesn't accept assigning extra properties to `RefComponent` when it's declared\nconst Radio: typeof RefRadio & {\n  colors: typeof colors;\n} = Object.assign(RefRadio, { colors });\n\nexport default Radio;\n"],
-  "mappings": "wgBAEA,OAAOA,MAAQ,aACf,UAAYC,MAAW,QAEvB,OAAOC,MAAwB,0BAC/B,OAAOC,MAAU,UAEjB,OAAS,UAAAC,MAA8B,gBAEvC,MAAMC,EAAWJ,EAAM,WAIrB,CACEK,EAWAC,IACG,CAZH,IAAAC,EAAAF,EACE,UAAAG,EACA,MAAAC,EACA,YAAAC,EACA,YAAAC,EACA,MAAAC,EACA,KAAAC,EACA,gBAAAC,EAAkB,GAClB,MAAAC,CAvBN,EAeIR,EASKS,EAAAC,EATLV,EASK,CARH,WACA,QACA,cACA,cACA,QACA,OACA,kBACA,UAKF,KAAM,CAACW,EAAUC,EAAWC,CAAK,EAAInB,EAAmB,EAExD,OACED,EAAA,cAAC,SACC,UAAWD,EACT,QACA,CAAE,eAAgBqB,EAAO,mBAAoBT,CAAY,EACzDF,CACF,GAEAT,EAAA,cAAC,QAAAqB,EAAA,CACC,KAAMR,EACN,MAAOE,EACP,IAAKT,EACL,KAAK,QACL,SAAUgB,GAAK,CAETN,EAAU,UAAUA,EAAU,SAASM,CAAC,EAC5CJ,EAASI,CAAC,CACZ,EACA,UAAWA,GAAK,CAEVN,EAAU,WAAWA,EAAU,UAAUM,CAAC,EAC9CH,EAAUG,CAAC,CACb,GACIN,EACN,EACAhB,EAAA,cAAC,OAAI,UAAU,gBACbA,EAAA,cAAC,QAAK,UAAU,sBAAsB,EACtCA,EAAA,cAAC,YACEY,EACAJ,CACH,CACF,EAGCY,GAASN,GACRd,EAAA,cAAC,OAAI,cAAY,OAAO,UAAU,gBAC/BoB,CACH,EAGDV,GACCV,EAAA,cAACE,EAAA,CAAK,UAAU,qBAAqB,KAAMA,EAAK,MAAM,OACnDQ,CACH,CAEJ,CAEJ,CACF,EAGAN,EAAS,YAAc,QAGvB,MAAMmB,EAEF,OAAO,OAAOnB,EAAU,CAAE,OAAAD,CAAO,CAAC,EAEtC,IAAOqB,EAAQD",
-  "names": ["cn", "React", "useInputValidation", "Text", "colors", "RefRadio", "_a", "ref", "_b", "children", "color", "description", "isUnderline", "label", "name", "showCustomError", "value", "restProps", "__objRest", "onChange", "onInvalid", "error", "__spreadValues", "e", "Radio", "radio_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 { colors, Radio as Props } from './radio.types';\n\nconst RefRadio = React.forwardRef<\n  HTMLInputElement,\n  React.PropsWithChildren<Props>\n>(\n  (\n    {\n      children,\n      color,\n      description,\n      label,\n      name,\n      showCustomError = true,\n      value,\n      isWide = true,\n      hasHover = false,\n      ...restProps\n    },\n    ref,\n  ) => {\n    const [onChange, onInvalid, error] = useInputValidation();\n\n    return (\n      <label\n        className={cn(\n          'radio',\n          {\n            'radio--error': error,\n            'radio--wide': isWide,\n            'radio--hover': hasHover,\n          },\n          color,\n        )}\n      >\n        <input\n          name={name}\n          value={value}\n          ref={ref}\n          type=\"radio\"\n          onChange={e => {\n            // NOTE: To not break compatibility\n            if (restProps.onChange) restProps.onChange(e);\n            onChange(e);\n          }}\n          onInvalid={e => {\n            // NOTE: To not break compatibility\n            if (restProps.onInvalid) restProps.onInvalid(e);\n            onInvalid(e);\n          }}\n          {...restProps}\n        />\n        <div className=\"radio__label\">\n          <span className=\"radio__fake-element\"></span>\n          <span>\n            {label}\n            {children}\n          </span>\n        </div>\n\n        {/* NOTE: This is aria-hidden because reporting of validation errors is handled by the browser */}\n        {error && showCustomError && (\n          <div aria-hidden=\"true\" className=\"radio__error\">\n            {error}\n          </div>\n        )}\n\n        {description && (\n          <Text className=\"radio__description\" size={Text.sizes.small}>\n            {description}\n          </Text>\n        )}\n      </label>\n    );\n  },\n);\n\n// NOTE: If this isn't set, stack traces say \"forwardRef\" instead of \"Radio\"\nRefRadio.displayName = 'Radio';\n\n// NOTE: The component is redeclared here because TypeScript doesn't accept assigning extra properties to `RefComponent` when it's declared\nconst Radio: typeof RefRadio & {\n  colors: typeof colors;\n} = Object.assign(RefRadio, { colors });\n\nexport default Radio;\n"],
+  "mappings": "wgBAEA,OAAOA,MAAQ,aACf,UAAYC,MAAW,QAEvB,OAAOC,MAAwB,0BAC/B,OAAOC,MAAU,UAEjB,OAAS,UAAAC,MAA8B,gBAEvC,MAAMC,EAAWJ,EAAM,WAIrB,CACEK,EAYAC,IACG,CAbH,IAAAC,EAAAF,EACE,UAAAG,EACA,MAAAC,EACA,YAAAC,EACA,MAAAC,EACA,KAAAC,EACA,gBAAAC,EAAkB,GAClB,MAAAC,EACA,OAAAC,EAAS,GACT,SAAAC,EAAW,EAxBjB,EAeIT,EAUKU,EAAAC,EAVLX,EAUK,CATH,WACA,QACA,cACA,QACA,OACA,kBACA,QACA,SACA,aAKF,KAAM,CAACY,EAAUC,EAAWC,CAAK,EAAIpB,EAAmB,EAExD,OACED,EAAA,cAAC,SACC,UAAWD,EACT,QACA,CACE,eAAgBsB,EAChB,cAAeN,EACf,eAAgBC,CAClB,EACAP,CACF,GAEAT,EAAA,cAAC,QAAAsB,EAAA,CACC,KAAMV,EACN,MAAOE,EACP,IAAKR,EACL,KAAK,QACL,SAAUiB,GAAK,CAETN,EAAU,UAAUA,EAAU,SAASM,CAAC,EAC5CJ,EAASI,CAAC,CACZ,EACA,UAAWA,GAAK,CAEVN,EAAU,WAAWA,EAAU,UAAUM,CAAC,EAC9CH,EAAUG,CAAC,CACb,GACIN,EACN,EACAjB,EAAA,cAAC,OAAI,UAAU,gBACbA,EAAA,cAAC,QAAK,UAAU,sBAAsB,EACtCA,EAAA,cAAC,YACEW,EACAH,CACH,CACF,EAGCa,GAASR,GACRb,EAAA,cAAC,OAAI,cAAY,OAAO,UAAU,gBAC/BqB,CACH,EAGDX,GACCV,EAAA,cAACE,EAAA,CAAK,UAAU,qBAAqB,KAAMA,EAAK,MAAM,OACnDQ,CACH,CAEJ,CAEJ,CACF,EAGAN,EAAS,YAAc,QAGvB,MAAMoB,EAEF,OAAO,OAAOpB,EAAU,CAAE,OAAAD,CAAO,CAAC,EAEtC,IAAOsB,EAAQD",
+  "names": ["cn", "React", "useInputValidation", "Text", "colors", "RefRadio", "_a", "ref", "_b", "children", "color", "description", "label", "name", "showCustomError", "value", "isWide", "hasHover", "restProps", "__objRest", "onChange", "onInvalid", "error", "__spreadValues", "e", "Radio", "radio_default"]
 }

package/react/radio/radio.scss

@@ -1,12 +1,14 @@
 @use '../../tokens/colours';
 @use '../../tokens/spacing';
+@use '../../tokens/corner-radius';
 
 .radio {
   $root: &;
   $size: 22px;
 
   position: relative;
-  display: block;
+  display: flex;
+  flex-direction: column;
 
   &:focus-within {
     .radio__fake-element {
@@ -31,6 +33,24 @@
     opacity: 0;
   }
 
+  &--wide {
+    display: block;
+  }
+
+  &--hover {
+    padding: spacing.$xs;
+    border-radius: corner-radius.$s;
+    &:hover {
+      background: var(--background-secondary-hover);
+    }
+
+    &.radio--light {
+      &:hover {
+        background: var(--fixed-background-secondary-hover);
+      }
+    }
+  }
+
   // NOTE: size these together to ensure the native input
   // is the same size as the fake one
   input,
@@ -39,17 +59,6 @@
     width: $size;
   }
 
-  &--underline {
-    display: flex;
-    flex-direction: column;
-    padding-bottom: spacing.$s;
-    border-bottom: 1px solid var(--ge-border-default);
-
-    &--light {
-      border-color: var(--ge-fixed-selector-unselected-default);
-    }
-  }
-
   &__fake-element {
     position: relative;
     display: block;
@@ -61,7 +70,6 @@
   }
 
   &__description {
-    margin-top: spacing.$xxs;
     margin-left: 31px;
     color: var(--on-surface-primary-alternate);
 

package/react/radio/radio.types.d.ts

@@ -5,9 +5,10 @@ export declare const colors: {
 export type Radio = {
     color?: ObjectValues<typeof colors>;
     description?: string;
-    isUnderline?: boolean;
     label?: string;
     name: string;
     showCustomError?: boolean;
     value: string;
+    hasHover?: boolean;
+    isWide?: boolean;
 } & InputHtmlProps;

package/react/radio/radio.types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../react/radio/radio.types.ts"],
-  "sourcesContent": ["import { InputHtmlProps, ObjectValues } from '../types';\n\nexport const colors = {\n  light: 'radio--light',\n} as const;\n\nexport type Radio = {\n  color?: ObjectValues<typeof colors>;\n  description?: string;\n  isUnderline?: boolean;\n  label?: string;\n  name: string;\n  showCustomError?: boolean;\n  value: string;\n} & InputHtmlProps;\n"],
+  "sourcesContent": ["import { InputHtmlProps, ObjectValues } from '../types';\n\nexport const colors = {\n  light: 'radio--light',\n} as const;\n\nexport type Radio = {\n  color?: ObjectValues<typeof colors>;\n  description?: string;\n  label?: string;\n  name: string;\n  showCustomError?: boolean;\n  value: string;\n  hasHover?: boolean;\n  isWide?: boolean;\n} & InputHtmlProps;\n"],
   "mappings": "AAEO,MAAMA,EAAS,CACpB,MAAO,cACT",
   "names": ["colors"]
 }

package/tokens/dark.scss

@@ -73,7 +73,9 @@ $ge-tabs: primitives.$black-90;
 $ge-badge-primary: primitives.$coral-90;
 $ge-badge-secondary: primitives.$blue-10;
 $ge-badge-tertiary: primitives.$black-80;
-$ge-border-default: primitives.$black-70;
+$ge-border-default: primitives.$blue-grey-80;
+$ge-border-fixed: primitives.$white-20;
+$ge-border-fixed-alternate: primitives.$white-40;
 $ge-border-focused: primitives.$white-40;
 $ge-chips-selected-default: primitives.$white-100;
 $ge-chips-selected-disabled: primitives.$black-80;
@@ -94,6 +96,12 @@ $ge-fixed-chips-selected-hover: primitives.$coral-130;
 $ge-fixed-chips-unselected-default: primitives.$white-100;
 $ge-fixed-chips-unselected-disabled: primitives.$white-50;
 $ge-fixed-chips-unselected-hover: primitives.$black-o20;
+$ge-fixed-indicator-tags-attention: primitives.$tangerine-160;
+$ge-fixed-indicator-tags-featured: primitives.$coral-120;
+$ge-fixed-indicator-tags-information: primitives.$bright-blue-160;
+$ge-fixed-indicator-tags-negative: primitives.$cardinal-170;
+$ge-fixed-indicator-tags-neutral: primitives.$black-85;
+$ge-fixed-indicator-tags-positive: primitives.$celadon-160;
 $ge-fixed-progress-bar-background: primitives.$white-40;
 $ge-fixed-progress-bar-indicator-alternate: primitives.$blue-10;
 $ge-fixed-progress-bar-indicator-default: primitives.$coral-90;
@@ -270,6 +278,12 @@ $on-ge-on-fixed-chips-selected-default: primitives.$white-100;
 $on-ge-on-fixed-chips-selected-disabled: primitives.$blue-40;
 $on-ge-on-fixed-chips-unselected-default: primitives.$white-100;
 $on-ge-on-fixed-chips-unselected-disabled: primitives.$white-50;
+$on-ge-on-fixed-indicator-tags-attention: primitives.$tangerine-60;
+$on-ge-on-fixed-indicator-tags-featured: primitives.$white-100;
+$on-ge-on-fixed-indicator-tags-information: primitives.$bright-blue-60;
+$on-ge-on-fixed-indicator-tags-negative: primitives.$cardinal-60;
+$on-ge-on-fixed-indicator-tags-neutral: primitives.$black-40;
+$on-ge-on-fixed-indicator-tags-positive: primitives.$celadon-60;
 $on-ge-on-fixed-selector-selected-default: primitives.$blue-100;
 $on-ge-on-fixed-selector-selected-disabled: primitives.$coral-170;
 $on-ge-on-fixed-selector-unselected-default: primitives.$white-100;
@@ -402,7 +416,7 @@ $surface-secondary-default: primitives.$blue-100;
 $surface-secondary-disabled: primitives.$blue-100;
 $surface-secondary-hover: primitives.$blue-95;
 $surface-secondary-selected: primitives.$blue-90;
-$workout-surface-availability: primitives.$black-60;
+$workout-surface-availability: primitives.$black-70;
 $workout-surface-availability-hover: primitives.$black-80;
 $workout-surface-bootcamp: primitives.$tropical-indigo-140;
 $workout-surface-bootcamp-hover: primitives.$tropical-indigo-160;

package/tokens/darkmode.css

@@ -72,7 +72,9 @@
 --ge-badge-primary: #fb6447;
 --ge-badge-secondary: #e7e9eb;
 --ge-badge-tertiary: #333333;
---ge-border-default: #4c4c4c;
+--ge-border-default: #404d5b;
+--ge-border-fixed: #ffffff33;
+--ge-border-fixed-alternate: #ffffff66;
 --ge-border-focused: #ffffff66;
 --ge-chips-selected-default: #ffffff;
 --ge-chips-selected-disabled: #333333;
@@ -93,6 +95,12 @@
 --ge-fixed-chips-unselected-default: #ffffff;
 --ge-fixed-chips-unselected-disabled: #ffffff80;
 --ge-fixed-chips-unselected-hover: #00000033;
+--ge-fixed-indicator-tags-attention: #644000;
+--ge-fixed-indicator-tags-featured: #c84229;
+--ge-fixed-indicator-tags-information: #0f2f46;
+--ge-fixed-indicator-tags-negative: #4a171c;
+--ge-fixed-indicator-tags-neutral: #262626;
+--ge-fixed-indicator-tags-positive: #184629;
 --ge-fixed-progress-bar-background: #ffffff66;
 --ge-fixed-progress-bar-indicator-alternate: #e7e9eb;
 --ge-fixed-progress-bar-indicator-default: #fb6447;
@@ -269,6 +277,12 @@
 --on-ge-on-fixed-chips-selected-disabled: #9ea6ae;
 --on-ge-on-fixed-chips-unselected-default: #ffffff;
 --on-ge-on-fixed-chips-unselected-disabled: #ffffff80;
+--on-ge-on-fixed-indicator-tags-attention: #fdc666;
+--on-ge-on-fixed-indicator-tags-featured: #ffffff;
+--on-ge-on-fixed-indicator-tags-information: #7dadd0;
+--on-ge-on-fixed-indicator-tags-negative: #d58891;
+--on-ge-on-fixed-indicator-tags-neutral: #999999;
+--on-ge-on-fixed-indicator-tags-positive: #a3f0bf;
 --on-ge-on-fixed-selector-selected-default: #0d2134;
 --on-ge-on-fixed-selector-selected-disabled: #4b190f;
 --on-ge-on-fixed-selector-unselected-default: #ffffff;
@@ -401,7 +415,7 @@
 --surface-secondary-disabled: #0d2134;
 --surface-secondary-hover: #192c3e;
 --surface-secondary-selected: #253748;
---workout-surface-availability: #666666;
+--workout-surface-availability: #4c4c4c;
 --workout-surface-availability-hover: #333333;
 --workout-surface-bootcamp: #644399;
 --workout-surface-bootcamp-hover: #422d66;

package/tokens/default-colours.css

@@ -36,7 +36,7 @@ html:not([data-theme]) {
 --buttons-fixed-link-hover: #0f2f46;
 --buttons-link-default: #ffffff00;
 --buttons-link-disabled: #ffffff00;
---buttons-link-hover: #e9f1f7;
+--buttons-link-hover: #f4f8fb;
 --buttons-primary-default: #0d2134;
 --buttons-primary-disabled: #e5e5e5;
 --buttons-primary-hover: #404d5b;
@@ -73,6 +73,8 @@ html:not([data-theme]) {
 --ge-badge-secondary: #0d2134;
 --ge-badge-tertiary: #f3f4f5;
 --ge-border-default: #dcdee0;
+--ge-border-fixed: #ffffff33;
+--ge-border-fixed-alternate: #ffffff66;
 --ge-border-focused: #9ea6ae;
 --ge-chips-selected-default: #0d2134;
 --ge-chips-selected-disabled: #dcdee0;
@@ -93,6 +95,12 @@ html:not([data-theme]) {
 --ge-fixed-chips-unselected-default: #ffffff;
 --ge-fixed-chips-unselected-disabled: #ffffff80;
 --ge-fixed-chips-unselected-hover: #00000033;
+--ge-fixed-indicator-tags-attention: #644000;
+--ge-fixed-indicator-tags-featured: #c84229;
+--ge-fixed-indicator-tags-information: #0f2f46;
+--ge-fixed-indicator-tags-negative: #4a171c;
+--ge-fixed-indicator-tags-neutral: #262626;
+--ge-fixed-indicator-tags-positive: #184629;
 --ge-fixed-progress-bar-background: #ffffff66;
 --ge-fixed-progress-bar-indicator-alternate: #e7e9eb;
 --ge-fixed-progress-bar-indicator-default: #fb6447;
@@ -164,17 +172,17 @@ html:not([data-theme]) {
 --ge-selector-primary-selected-hover: #c84229;
 --ge-selector-primary-selected-bg-default: #ffeeeb;
 --ge-selector-primary-selected-bg-disabled: #fff6f5;
---ge-selector-primary-unselected-default: #666666;
---ge-selector-primary-unselected-disabled: #dcdee0;
+--ge-selector-primary-unselected-default: #dcdee0;
+--ge-selector-primary-unselected-disabled: #e7e9eb;
 --ge-selector-primary-unselected-hover: #ffeeeb;
 --ge-selector-primary-unselected-bg-default: #ffffff00;
 --ge-selector-primary-unselected-bg-disabled: #ffffff00;
 --ge-selector-secondary-selected-default: #0d2134;
---ge-selector-secondary-selected-disabled: #dcdee0;
+--ge-selector-secondary-selected-disabled: #e7e9eb;
 --ge-selector-secondary-selected-bg-default: #e7e9eb;
 --ge-selector-secondary-selected-bg-disabled: #f3f4f5;
---ge-selector-secondary-unselected-default: #566471;
---ge-selector-secondary-unselected-disabled: #dcdee0;
+--ge-selector-secondary-unselected-default: #dcdee0;
+--ge-selector-secondary-unselected-disabled: #e7e9eb;
 --ge-selector-secondary-unselected-bg-default: #ffffff00;
 --ge-selector-secondary-unselected-bg-disabled: #ffffff00;
 --ge-signal-error: #b93947;
@@ -269,6 +277,12 @@ html:not([data-theme]) {
 --on-ge-on-fixed-chips-selected-disabled: #9ea6ae;
 --on-ge-on-fixed-chips-unselected-default: #ffffff;
 --on-ge-on-fixed-chips-unselected-disabled: #ffffff80;
+--on-ge-on-fixed-indicator-tags-attention: #fdc666;
+--on-ge-on-fixed-indicator-tags-featured: #ffffff;
+--on-ge-on-fixed-indicator-tags-information: #7dadd0;
+--on-ge-on-fixed-indicator-tags-negative: #d58891;
+--on-ge-on-fixed-indicator-tags-neutral: #999999;
+--on-ge-on-fixed-indicator-tags-positive: #a3f0bf;
 --on-ge-on-fixed-selector-selected-default: #0d2134;
 --on-ge-on-fixed-selector-selected-disabled: #4b190f;
 --on-ge-on-fixed-selector-unselected-default: #ffffff;
@@ -279,7 +293,7 @@ html:not([data-theme]) {
 --on-ge-on-indicator-tags-attention-default: #443716;
 --on-ge-on-indicator-tags-featured-alternate: #c84229;
 --on-ge-on-indicator-tags-featured-default: #ffffff;
---on-ge-on-indicator-tags-information-alternate: #566471;
+--on-ge-on-indicator-tags-information-alternate: #1b537b;
 --on-ge-on-indicator-tags-information-default: #ffffff;
 --on-ge-on-indicator-tags-negative-alternate: #942e39;
 --on-ge-on-indicator-tags-negative-default: #ffffff;

package/tokens/light.scss

@@ -37,7 +37,7 @@ $buttons-fixed-link-disabled: primitives.$white-0;
 $buttons-fixed-link-hover: primitives.$bright-blue-160;
 $buttons-link-default: primitives.$white-0;
 $buttons-link-disabled: primitives.$white-0;
-$buttons-link-hover: primitives.$bright-blue-10;
+$buttons-link-hover: primitives.$bright-blue-5;
 $buttons-primary-default: primitives.$blue-100;
 $buttons-primary-disabled: primitives.$black-10;
 $buttons-primary-hover: primitives.$blue-grey-80;
@@ -74,6 +74,8 @@ $ge-badge-primary: primitives.$coral-120;
 $ge-badge-secondary: primitives.$blue-100;
 $ge-badge-tertiary: primitives.$blue-5;
 $ge-border-default: primitives.$light-grey-15;
+$ge-border-fixed: primitives.$white-20;
+$ge-border-fixed-alternate: primitives.$white-40;
 $ge-border-focused: primitives.$blue-40;
 $ge-chips-selected-default: primitives.$blue-100;
 $ge-chips-selected-disabled: primitives.$light-grey-15;
@@ -94,6 +96,12 @@ $ge-fixed-chips-selected-hover: primitives.$coral-130;
 $ge-fixed-chips-unselected-default: primitives.$white-100;
 $ge-fixed-chips-unselected-disabled: primitives.$white-50;
 $ge-fixed-chips-unselected-hover: primitives.$black-o20;
+$ge-fixed-indicator-tags-attention: primitives.$tangerine-160;
+$ge-fixed-indicator-tags-featured: primitives.$coral-120;
+$ge-fixed-indicator-tags-information: primitives.$bright-blue-160;
+$ge-fixed-indicator-tags-negative: primitives.$cardinal-170;
+$ge-fixed-indicator-tags-neutral: primitives.$black-85;
+$ge-fixed-indicator-tags-positive: primitives.$celadon-160;
 $ge-fixed-progress-bar-background: primitives.$white-40;
 $ge-fixed-progress-bar-indicator-alternate: primitives.$blue-10;
 $ge-fixed-progress-bar-indicator-default: primitives.$coral-90;
@@ -165,17 +173,17 @@ $ge-selector-primary-selected-disabled: primitives.$coral-40;
 $ge-selector-primary-selected-hover: primitives.$coral-120;
 $ge-selector-primary-selected-bg-default: primitives.$coral-10;
 $ge-selector-primary-selected-bg-disabled: primitives.$coral-5;
-$ge-selector-primary-unselected-default: primitives.$black-60;
-$ge-selector-primary-unselected-disabled: primitives.$light-grey-15;
+$ge-selector-primary-unselected-default: primitives.$light-grey-15;
+$ge-selector-primary-unselected-disabled: primitives.$blue-10;
 $ge-selector-primary-unselected-hover: primitives.$coral-10;
 $ge-selector-primary-unselected-bg-default: primitives.$white-0;
 $ge-selector-primary-unselected-bg-disabled: primitives.$white-0;
 $ge-selector-secondary-selected-default: primitives.$blue-100;
-$ge-selector-secondary-selected-disabled: primitives.$light-grey-15;
+$ge-selector-secondary-selected-disabled: primitives.$blue-10;
 $ge-selector-secondary-selected-bg-default: primitives.$blue-10;
 $ge-selector-secondary-selected-bg-disabled: primitives.$blue-5;
-$ge-selector-secondary-unselected-default: primitives.$blue-70;
-$ge-selector-secondary-unselected-disabled: primitives.$light-grey-15;
+$ge-selector-secondary-unselected-default: primitives.$light-grey-15;
+$ge-selector-secondary-unselected-disabled: primitives.$blue-10;
 $ge-selector-secondary-unselected-bg-default: primitives.$white-0;
 $ge-selector-secondary-unselected-bg-disabled: primitives.$white-0;
 $ge-signal-error: primitives.$cardinal-100;
@@ -270,6 +278,12 @@ $on-ge-on-fixed-chips-selected-default: primitives.$white-100;
 $on-ge-on-fixed-chips-selected-disabled: primitives.$blue-40;
 $on-ge-on-fixed-chips-unselected-default: primitives.$white-100;
 $on-ge-on-fixed-chips-unselected-disabled: primitives.$white-50;
+$on-ge-on-fixed-indicator-tags-attention: primitives.$tangerine-60;
+$on-ge-on-fixed-indicator-tags-featured: primitives.$white-100;
+$on-ge-on-fixed-indicator-tags-information: primitives.$bright-blue-60;
+$on-ge-on-fixed-indicator-tags-negative: primitives.$cardinal-60;
+$on-ge-on-fixed-indicator-tags-neutral: primitives.$black-40;
+$on-ge-on-fixed-indicator-tags-positive: primitives.$celadon-60;
 $on-ge-on-fixed-selector-selected-default: primitives.$blue-100;
 $on-ge-on-fixed-selector-selected-disabled: primitives.$coral-170;
 $on-ge-on-fixed-selector-unselected-default: primitives.$white-100;
@@ -280,7 +294,7 @@ $on-ge-on-indicator-tags-attention-alternate: primitives.$gold-140;
 $on-ge-on-indicator-tags-attention-default: primitives.$gold-170;
 $on-ge-on-indicator-tags-featured-alternate: primitives.$coral-120;
 $on-ge-on-indicator-tags-featured-default: primitives.$white-100;
-$on-ge-on-indicator-tags-information-alternate: primitives.$blue-70;
+$on-ge-on-indicator-tags-information-alternate: primitives.$bright-blue-130;
 $on-ge-on-indicator-tags-information-default: primitives.$white-100;
 $on-ge-on-indicator-tags-negative-alternate: primitives.$cardinal-120;
 $on-ge-on-indicator-tags-negative-default: primitives.$white-100;

package/tokens/lightmode.css

@@ -36,7 +36,7 @@
 --buttons-fixed-link-hover: #0f2f46;
 --buttons-link-default: #ffffff00;
 --buttons-link-disabled: #ffffff00;
---buttons-link-hover: #e9f1f7;
+--buttons-link-hover: #f4f8fb;
 --buttons-primary-default: #0d2134;
 --buttons-primary-disabled: #e5e5e5;
 --buttons-primary-hover: #404d5b;
@@ -73,6 +73,8 @@
 --ge-badge-secondary: #0d2134;
 --ge-badge-tertiary: #f3f4f5;
 --ge-border-default: #dcdee0;
+--ge-border-fixed: #ffffff33;
+--ge-border-fixed-alternate: #ffffff66;
 --ge-border-focused: #9ea6ae;
 --ge-chips-selected-default: #0d2134;
 --ge-chips-selected-disabled: #dcdee0;
@@ -93,6 +95,12 @@
 --ge-fixed-chips-unselected-default: #ffffff;
 --ge-fixed-chips-unselected-disabled: #ffffff80;
 --ge-fixed-chips-unselected-hover: #00000033;
+--ge-fixed-indicator-tags-attention: #644000;
+--ge-fixed-indicator-tags-featured: #c84229;
+--ge-fixed-indicator-tags-information: #0f2f46;
+--ge-fixed-indicator-tags-negative: #4a171c;
+--ge-fixed-indicator-tags-neutral: #262626;
+--ge-fixed-indicator-tags-positive: #184629;
 --ge-fixed-progress-bar-background: #ffffff66;
 --ge-fixed-progress-bar-indicator-alternate: #e7e9eb;
 --ge-fixed-progress-bar-indicator-default: #fb6447;
@@ -164,17 +172,17 @@
 --ge-selector-primary-selected-hover: #c84229;
 --ge-selector-primary-selected-bg-default: #ffeeeb;
 --ge-selector-primary-selected-bg-disabled: #fff6f5;
---ge-selector-primary-unselected-default: #666666;
---ge-selector-primary-unselected-disabled: #dcdee0;
+--ge-selector-primary-unselected-default: #dcdee0;
+--ge-selector-primary-unselected-disabled: #e7e9eb;
 --ge-selector-primary-unselected-hover: #ffeeeb;
 --ge-selector-primary-unselected-bg-default: #ffffff00;
 --ge-selector-primary-unselected-bg-disabled: #ffffff00;
 --ge-selector-secondary-selected-default: #0d2134;
---ge-selector-secondary-selected-disabled: #dcdee0;
+--ge-selector-secondary-selected-disabled: #e7e9eb;
 --ge-selector-secondary-selected-bg-default: #e7e9eb;
 --ge-selector-secondary-selected-bg-disabled: #f3f4f5;
---ge-selector-secondary-unselected-default: #566471;
---ge-selector-secondary-unselected-disabled: #dcdee0;
+--ge-selector-secondary-unselected-default: #dcdee0;
+--ge-selector-secondary-unselected-disabled: #e7e9eb;
 --ge-selector-secondary-unselected-bg-default: #ffffff00;
 --ge-selector-secondary-unselected-bg-disabled: #ffffff00;
 --ge-signal-error: #b93947;
@@ -269,6 +277,12 @@
 --on-ge-on-fixed-chips-selected-disabled: #9ea6ae;
 --on-ge-on-fixed-chips-unselected-default: #ffffff;
 --on-ge-on-fixed-chips-unselected-disabled: #ffffff80;
+--on-ge-on-fixed-indicator-tags-attention: #fdc666;
+--on-ge-on-fixed-indicator-tags-featured: #ffffff;
+--on-ge-on-fixed-indicator-tags-information: #7dadd0;
+--on-ge-on-fixed-indicator-tags-negative: #d58891;
+--on-ge-on-fixed-indicator-tags-neutral: #999999;
+--on-ge-on-fixed-indicator-tags-positive: #a3f0bf;
 --on-ge-on-fixed-selector-selected-default: #0d2134;
 --on-ge-on-fixed-selector-selected-disabled: #4b190f;
 --on-ge-on-fixed-selector-unselected-default: #ffffff;
@@ -279,7 +293,7 @@
 --on-ge-on-indicator-tags-attention-default: #443716;
 --on-ge-on-indicator-tags-featured-alternate: #c84229;
 --on-ge-on-indicator-tags-featured-default: #ffffff;
---on-ge-on-indicator-tags-information-alternate: #566471;
+--on-ge-on-indicator-tags-information-alternate: #1b537b;
 --on-ge-on-indicator-tags-information-default: #ffffff;
 --on-ge-on-indicator-tags-negative-alternate: #942e39;
 --on-ge-on-indicator-tags-negative-default: #ffffff;