@helsenorge/designsystem-react 14.10.0 → 14.11.0

package/lib/utils5.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils5.js","names":[],"sources":["../src/components/Panel/constants.ts","../src/components/PanelList/utils.tsx"],"sourcesContent":["export enum PanelLayout {\n  vertical = 'vertical',\n  horizontal = 'horizontal',\n  combined = 'combined',\n  bAsRightCol = 'bAsRightCol',\n}\n\nexport enum PanelVariant {\n  fill = 'fill',\n  line = 'line',\n  outline = 'outline',\n}\n\nexport enum PanelStacking {\n  default = 'default',\n  bFirst = 'bFirst',\n}\n\nexport enum PanelStatus {\n  none = 'none',\n  new = 'new',\n  error = 'error',\n  draft = 'draft',\n}\n","import { createContext } from 'react';\n\nimport type { PanelVariant } from '../Panel/constants';\n\nexport interface PanelListContextValue {\n  variant: PanelVariant;\n  highlightText?: string;\n  applyPanelClassName: (existingClassName?: string) => string;\n}\n\nexport const PanelListContext = createContext<PanelListContextValue | null>(null);\n"],"mappings":";AAAA,IAAY,cAAA,yBAAA,eAAL;AACL,eAAA,cAAA;AACA,eAAA,gBAAA;AACA,eAAA,cAAA;AACA,eAAA,iBAAA;;;AAGF,IAAY,eAAA,yBAAA,gBAAL;AACL,gBAAA,UAAA;AACA,gBAAA,UAAA;AACA,gBAAA,aAAA;;;AAGF,IAAY,gBAAA,yBAAA,iBAAL;AACL,iBAAA,aAAA;AACA,iBAAA,YAAA;;;AAGF,IAAY,cAAA,yBAAA,eAAL;AACL,eAAA,UAAA;AACA,eAAA,SAAA;AACA,eAAA,WAAA;AACA,eAAA,WAAA;;;ACZF,MAAa,mBAAmB,cAA4C,KAAK"}
+{"version":3,"file":"utils5.js","names":["clone: Partial<T>"],"sources":["../src/components/Table/utils.ts"],"sourcesContent":["import React from 'react';\n\nimport type { ModeType } from './constants';\nimport type { BreakpointConfig } from './Table';\n\nimport { ResponsiveTableVariant } from './constants';\nimport { Breakpoint } from '../../hooks/useBreakpoint';\nimport { isTouchDevice } from '../../utils/device';\n\nimport styles from './styles.module.scss';\n\n/**\n * Sjekk om det skal brukes CSS for å bestemme responsivt utseende på dette breakpoint\n * @param config Konfigurasjon for responsiv oppførsel\n * @returns true om breakpoint bruker CSS\n */\nconst configUsesCss = (config: BreakpointConfig): boolean =>\n  config.variant === ResponsiveTableVariant.centeredoverflow || config.variant === ResponsiveTableVariant.block;\n\n/**\n * Lag klassenavn for CSS-config\n * @param config Konfigurasjon for responsiv oppførsel\n * @returns CSS-klassenavn\n */\nconst mapConfigToClass = (config: BreakpointConfig): string =>\n  config.variant === 'centeredoverflow' || config.variant === 'block' ? styles[`table--${config.variant}-${config.breakpoint}`] : '';\n\n/**\n * Sorter konfigurasjon etter breakpoints, fra største til minste\n * @param a Konfigurasjon for responsiv oppførsel\n * @param b Konfigurasjon for responsiv oppførsel\n * @returns Sortert liste\n */\nconst sortByBreakpointsDescending = (a: BreakpointConfig, b: BreakpointConfig): number =>\n  Breakpoint[a.breakpoint] - Breakpoint[b.breakpoint];\n\n/**\n * Sjekk om en konfigurasjon skal brukes for nåværende breakpoint\n * @param a Konfigurasjon for responsiv oppførsel\n * @param breakpoint Nåværende breakpoint\n * @returns true dersom config skal brukes for breakpointet\n */\nconst isValidForCurrentBreakpoint = (config: BreakpointConfig, breakpoint: Breakpoint): boolean =>\n  Breakpoint[config.breakpoint] >= breakpoint;\n\n/**\n * Finn konfigurasjon for nåværende breakpoint\n * @param config Konfigurasjon for responsiv oppførsel\n * @param breakpoint Nåværende breakpoint\n * @returns Konfigurasjon for responsiv oppførsel\n */\nconst getConfigForBreakpoint = (config: BreakpointConfig | BreakpointConfig[], breakpoint: Breakpoint): BreakpointConfig | undefined => {\n  if (Array.isArray(config)) {\n    config.sort(sortByBreakpointsDescending);\n\n    return config.find(x => isValidForCurrentBreakpoint(x, breakpoint));\n  } else if (config && isValidForCurrentBreakpoint(config, breakpoint)) {\n    return config;\n  }\n};\n\n/**\n * Finn konfigurasjon for nåværende breakpoint og tabellbredde\n * @param config Konfigurasjon for responsiv oppførsel\n * @param breakpoint Nåværende breakpoint\n * @param tableWidth Bredde på tabell i px\n * @returns Konfigurasjon for responsiv oppførsel uten fallbackVariant\n */\nexport const getCurrentConfig = (\n  config: BreakpointConfig | BreakpointConfig[],\n  breakpoint: Breakpoint,\n  tableWidth: number,\n  windowWidth: number\n): Omit<BreakpointConfig, 'fallbackVariant'> | undefined => {\n  const breakpointConfig = getConfigForBreakpoint(config, breakpoint);\n  const canUseHorizontalScroll = isTouchDevice();\n  const canUseCenteredOverflow = tableWidth <= windowWidth;\n\n  if (!breakpointConfig) {\n    return;\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.centeredoverflow &&\n    !canUseCenteredOverflow &&\n    breakpointConfig.fallbackVariant === ResponsiveTableVariant.horizontalscroll\n  ) {\n    return {\n      variant: canUseHorizontalScroll ? ResponsiveTableVariant.horizontalscroll : ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.centeredoverflow &&\n    !canUseCenteredOverflow &&\n    breakpointConfig.fallbackVariant !== ResponsiveTableVariant.centeredoverflow\n  ) {\n    return {\n      variant: breakpointConfig.fallbackVariant ?? ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.horizontalscroll &&\n    !canUseHorizontalScroll &&\n    breakpointConfig.fallbackVariant === ResponsiveTableVariant.centeredoverflow\n  ) {\n    return {\n      variant: canUseCenteredOverflow ? ResponsiveTableVariant.centeredoverflow : ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.horizontalscroll &&\n    !canUseHorizontalScroll &&\n    breakpointConfig.fallbackVariant !== ResponsiveTableVariant.horizontalscroll\n  ) {\n    return {\n      variant: breakpointConfig.fallbackVariant ?? ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  return breakpointConfig;\n};\n\n/**\n * Finn klassenavn for responsiv oppførsel\n * @param config Konfigurasjon for responsiv oppførsel\n * @returns Klassenavn\n */\nexport const getBreakpointClass = (config?: BreakpointConfig): string | undefined =>\n  config && configUsesCss(config) ? mapConfigToClass(config) : undefined;\n\n/**\n * Finn riktig posisjon for horisontal sentrering av tabell som skal vises \"centeredoverflow\"\n * @param parentWidth Bredde på element som tabellen ligger i\n * @param tableWidth Bredde på tabellen\n * @returns Styling som posisjonerer tabellen riktig\n */\nexport const getCenteredOverflowTableStyle = (parentWidth: number, tableWidth: number): React.CSSProperties | undefined => {\n  if (parentWidth >= tableWidth) {\n    return;\n  }\n\n  const COLUMN_GUTTER_WIDTH_PX = 8;\n\n  return { left: `${(parentWidth - tableWidth) / 2 - COLUMN_GUTTER_WIDTH_PX}px` };\n};\n\n/**\n * Map children and inject the `mode` prop into element children, but never on React.Fragment.\n * If a Fragment is encountered, its children are mapped and updated, while the Fragment wrapper is preserved.\n */\nexport const mapChildrenWithMode = (children: React.ReactNode, mode: ModeType | undefined): React.ReactNode =>\n  React.Children.map(children, child => {\n    if (!React.isValidElement(child)) return child;\n    if (child.type === React.Fragment) {\n      const fragmentChildren = (child.props as { children?: React.ReactNode }).children;\n      const mapped = React.Children.map(fragmentChildren, gc =>\n        React.isValidElement<{ mode?: ModeType }>(gc) ? React.cloneElement(gc, { mode }) : gc\n      );\n      return React.cloneElement(child, undefined, mapped);\n    }\n    return React.cloneElement(child as React.ReactElement<{ mode?: ModeType }>, { mode });\n  });\n\n/**\n * Create a shallow copy of an object with specific keys omitted.\n */\nexport const omitProps = <T extends Record<PropertyKey, unknown>>(obj: T, keys: Array<keyof T>): Partial<T> => {\n  const clone: Partial<T> = { ...obj };\n  for (const k of keys) {\n    delete clone[k];\n  }\n  return clone;\n};\n"],"mappings":";;;;;AAgBA,IAAM,iBAAiB,WACrB,OAAO,YAAY,uBAAuB,oBAAoB,OAAO,YAAY,uBAAuB;AAO1G,IAAM,oBAAoB,WACxB,OAAO,YAAY,sBAAsB,OAAO,YAAY,UAAU,YAAO,UAAU,OAAO,QAAQ,GAAG,OAAO,gBAAgB;AAQlI,IAAM,+BAA+B,GAAqB,MACxD,WAAW,EAAE,cAAc,WAAW,EAAE;AAQ1C,IAAM,+BAA+B,QAA0B,eAC7D,WAAW,OAAO,eAAe;AAQnC,IAAM,0BAA0B,QAA+C,eAAyD;AACtI,KAAI,MAAM,QAAQ,OAAO,EAAE;AACzB,SAAO,KAAK,4BAA4B;AAExC,SAAO,OAAO,MAAK,MAAK,4BAA4B,GAAG,WAAW,CAAC;YAC1D,UAAU,4BAA4B,QAAQ,WAAW,CAClE,QAAO;;AAWX,MAAa,oBACX,QACA,YACA,YACA,gBAC0D;CAC1D,MAAM,mBAAmB,uBAAuB,QAAQ,WAAW;CACnE,MAAM,yBAAyB,eAAe;CAC9C,MAAM,yBAAyB,cAAc;AAE7C,KAAI,CAAC,iBACH;AAGF,KACE,iBAAiB,YAAY,uBAAuB,oBACpD,CAAC,0BACD,iBAAiB,oBAAoB,uBAAuB,iBAE5D,QAAO;EACL,SAAS,yBAAyB,uBAAuB,mBAAmB,uBAAuB;EACnG,YAAY,iBAAiB;EAC9B;AAGH,KACE,iBAAiB,YAAY,uBAAuB,oBACpD,CAAC,0BACD,iBAAiB,oBAAoB,uBAAuB,iBAE5D,QAAO;EACL,SAAS,iBAAiB,mBAAmB,uBAAuB;EACpE,YAAY,iBAAiB;EAC9B;AAGH,KACE,iBAAiB,YAAY,uBAAuB,oBACpD,CAAC,0BACD,iBAAiB,oBAAoB,uBAAuB,iBAE5D,QAAO;EACL,SAAS,yBAAyB,uBAAuB,mBAAmB,uBAAuB;EACnG,YAAY,iBAAiB;EAC9B;AAGH,KACE,iBAAiB,YAAY,uBAAuB,oBACpD,CAAC,0BACD,iBAAiB,oBAAoB,uBAAuB,iBAE5D,QAAO;EACL,SAAS,iBAAiB,mBAAmB,uBAAuB;EACpE,YAAY,iBAAiB;EAC9B;AAGH,QAAO;;AAQT,MAAa,sBAAsB,WACjC,UAAU,cAAc,OAAO,GAAG,iBAAiB,OAAO,GAAG,KAAA;AAQ/D,MAAa,iCAAiC,aAAqB,eAAwD;AACzH,KAAI,eAAe,WACjB;AAKF,QAAO,EAAE,MAAM,IAAI,cAAc,cAAc,IAFhB,EAE2C,KAAK;;AAOjF,MAAa,uBAAuB,UAA2B,SAC7D,MAAM,SAAS,IAAI,WAAU,UAAS;AACpC,KAAI,CAAC,MAAM,eAAe,MAAM,CAAE,QAAO;AACzC,KAAI,MAAM,SAAS,MAAM,UAAU;EACjC,MAAM,mBAAoB,MAAM,MAAyC;EACzE,MAAM,SAAS,MAAM,SAAS,IAAI,mBAAkB,OAClD,MAAM,eAAoC,GAAG,GAAG,MAAM,aAAa,IAAI,EAAE,MAAM,CAAC,GAAG,GACpF;AACD,SAAO,MAAM,aAAa,OAAO,KAAA,GAAW,OAAO;;AAErD,QAAO,MAAM,aAAa,OAAkD,EAAE,MAAM,CAAC;EACrF;AAKJ,MAAa,aAAqD,KAAQ,SAAqC;CAC7G,MAAMA,QAAoB,EAAE,GAAG,KAAK;AACpC,MAAK,MAAM,KAAK,KACd,QAAO,MAAM;AAEf,QAAO"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@helsenorge/designsystem-react",
   "sideEffects": false,
   "private": false,
-  "version": "14.10.0",
+  "version": "14.11.0",
   "description": "The official design system for Helsenorge built with React.",
   "repository": {
     "type": "git",
@@ -732,6 +732,120 @@
     },
     "./components/Validation/types": {
       "types": "./lib/components/Validation/types.d.ts"
+    },
+    "./components/Avatar/constants": {
+      "types": "./lib/components/Avatar/constants.d.ts"
+    },
+    "./components/Chip/resourceHelper": {
+      "types": "./lib/components/Chip/resourceHelper.d.ts"
+    },
+    "./components/DropdownOld/constants": {
+      "types": "./lib/components/DropdownOld/constants.d.ts"
+    },
+    "./components/ElementHeader/utils": {
+      "types": "./lib/components/ElementHeader/utils.d.ts"
+    },
+    "./components/EmptyState/constants": {
+      "types": "./lib/components/EmptyState/constants.d.ts"
+    },
+    "./components/Expander/constants": {
+      "types": "./lib/components/Expander/constants.d.ts"
+    },
+    "./components/Filter/resourceHelper": {
+      "types": "./lib/components/Filter/resourceHelper.d.ts"
+    },
+    "./components/Filter/resourcesMock": {
+      "types": "./lib/components/Filter/resourcesMock.d.ts"
+    },
+    "./components/Filter/useFilter": {
+      "types": "./lib/components/Filter/useFilter.d.ts"
+    },
+    "./components/Filter/useFilterDrawer": {
+      "types": "./lib/components/Filter/useFilterDrawer.d.ts"
+    },
+    "./components/Filter/utils": {
+      "types": "./lib/components/Filter/utils.d.ts"
+    },
+    "./components/FormLayout/constants": {
+      "types": "./lib/components/FormLayout/constants.d.ts"
+    },
+    "./components/Icon/utils": {
+      "types": "./lib/components/Icon/utils.d.ts"
+    },
+    "./components/Input/constants": {
+      "types": "./lib/components/Input/constants.d.ts"
+    },
+    "./components/Input/resourceHelper": {
+      "types": "./lib/components/Input/resourceHelper.d.ts"
+    },
+    "./components/Label/utils": {
+      "types": "./lib/components/Label/utils.d.ts"
+    },
+    "./components/LinkList/resourceHelper": {
+      "types": "./lib/components/LinkList/resourceHelper.d.ts"
+    },
+    "./components/ListEditMode/constants": {
+      "types": "./lib/components/ListEditMode/constants.d.ts"
+    },
+    "./components/Loader/constants": {
+      "types": "./lib/components/Loader/constants.d.ts"
+    },
+    "./components/Modal/constants": {
+      "types": "./lib/components/Modal/constants.d.ts"
+    },
+    "./components/Panel/constants": {
+      "types": "./lib/components/Panel/constants.d.ts"
+    },
+    "./components/PanelList/utils": {
+      "types": "./lib/components/PanelList/utils.d.ts"
+    },
+    "./components/PopMenu/constants": {
+      "types": "./lib/components/PopMenu/constants.d.ts"
+    },
+    "./components/Progressbar/constants": {
+      "types": "./lib/components/Progressbar/constants.d.ts"
+    },
+    "./components/StatusDot/constants": {
+      "types": "./lib/components/StatusDot/constants.d.ts"
+    },
+    "./components/Table/constants": {
+      "types": "./lib/components/Table/constants.d.ts"
+    },
+    "./components/Tag/constants": {
+      "types": "./lib/components/Tag/constants.d.ts"
+    },
+    "./components/Textarea/resourceHelper": {
+      "types": "./lib/components/Textarea/resourceHelper.d.ts"
+    },
+    "./components/Title/utils": {
+      "types": "./lib/components/Title/utils.d.ts"
+    },
+    "./components/Toggle/constants": {
+      "types": "./lib/components/Toggle/constants.d.ts"
+    },
+    "./components/VisualCheckboxCloud/VisualCheckboxCloud": {
+      "types": "./lib/components/VisualCheckboxCloud/VisualCheckboxCloud.d.ts",
+      "import": "./lib/components/VisualCheckboxCloud/index.js",
+      "require": "./lib/components/VisualCheckboxCloud/index.js",
+      "default": "./lib/components/VisualCheckboxCloud/index.js"
+    },
+    "./components/VisualCheckboxGroup/VisualCheckboxGroup": {
+      "types": "./lib/components/VisualCheckboxGroup/VisualCheckboxGroup.d.ts",
+      "import": "./lib/components/VisualCheckboxGroup/index.js",
+      "require": "./lib/components/VisualCheckboxGroup/index.js",
+      "default": "./lib/components/VisualCheckboxGroup/index.js"
+    },
+    "./components/VisualRadioCloud/VisualRadioCloud": {
+      "types": "./lib/components/VisualRadioCloud/VisualRadioCloud.d.ts",
+      "import": "./lib/components/VisualRadioCloud/index.js",
+      "require": "./lib/components/VisualRadioCloud/index.js",
+      "default": "./lib/components/VisualRadioCloud/index.js"
+    },
+    "./components/VisualRadioGroup/VisualRadioGroup": {
+      "types": "./lib/components/VisualRadioGroup/VisualRadioGroup.d.ts",
+      "import": "./lib/components/VisualRadioGroup/index.js",
+      "require": "./lib/components/VisualRadioGroup/index.js",
+      "default": "./lib/components/VisualRadioGroup/index.js"
     }
   },
   "scripts": {

package/scss/_visual-form.scss

@@ -0,0 +1,345 @@
+@use 'sass:map';
+@use 'breakpoints' as breakpoints;
+@use 'font-mixins' as fonts;
+
+// Wrapper layout shared by VisualCheckboxCloud and VisualRadioCloud
+@mixin visual-form-cloud {
+  display: flex;
+  flex-flow: row wrap;
+  gap: var(--core-space-4xs) var(--core-space-xs);
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    gap: var(--core-space-m) var(--core-space-s);
+  }
+}
+
+// Pill-style input shared by VisualCheckboxCloud/Checkbox and VisualRadioCloud/Radio
+@mixin visual-form-pill(
+  $pill-padding-mobile: var(--core-space-3xs) var(--core-space-m),
+  $checked-pill-padding-md: var(--core-space-3xs) var(--core-space-m) var(--core-space-3xs) 1.25rem
+) {
+  position: relative;
+  display: inline-flex;
+  align-items: stretch;
+  min-height: 2.75rem;
+  padding: 0.313rem 0;
+  cursor: pointer;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    padding: 0;
+  }
+
+  &__input {
+    // Hides input while making sure screen reader outline wraps the entire component
+    cursor: pointer;
+    position: absolute;
+    z-index: 0;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    outline: none;
+    appearance: none;
+  }
+
+  &__pill {
+    position: relative;
+    z-index: 1;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--core-space-2xs);
+    box-sizing: border-box;
+    min-height: var(--core-space-l);
+    padding: $pill-padding-mobile;
+    border-radius: 100px;
+    background-color: var(--color-action-background-ondark);
+    border: 1px solid var(--color-action-border-onlight);
+    color: var(--color-base-text-onlight);
+
+    @include fonts.title6;
+
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      min-height: var(--core-space-xl);
+      padding: var(--core-space-3xs) var(--core-space-l);
+    }
+  }
+
+  &:hover &__pill {
+    background-color: var(--color-action-background-ondark-hover);
+    border-color: var(--color-action-border-onlight-hover);
+  }
+
+  &:active &__pill {
+    background-color: var(--color-action-background-ondark-selected);
+    border-color: var(--color-action-border-onlight-hover);
+  }
+
+  &--checked &__pill {
+    background-color: var(--color-action-background-onlight);
+    color: var(--color-action-text-ondark);
+    border-color: var(--color-action-background-onlight);
+    padding: var(--core-space-3xs) var(--core-space-s);
+
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      padding: $checked-pill-padding-md;
+    }
+  }
+
+  &--checked:hover &__pill {
+    background-color: var(--color-action-graphics-onlight-hover);
+    border-color: var(--color-action-graphics-onlight-hover);
+  }
+
+  &--checked:active &__pill {
+    background-color: var(--color-action-background-onlight-active);
+    border-color: var(--color-action-background-onlight-active);
+  }
+
+  &--invalid &__pill {
+    background-color: var(--color-action-background-ondark);
+    border-color: var(--color-destructive-border-normal);
+  }
+
+  &--invalid:hover &__pill {
+    background-color: var(--color-destructive-background-normal);
+    border-color: var(--color-destructive-border-normal);
+  }
+
+  &--invalid:active &__pill {
+    background-color: var(--color-destructive-background-emphasized);
+    border-color: var(--color-destructive-border-normal);
+  }
+
+  &--invalid#{&}--checked &__pill {
+    background-color: var(--color-destructive-graphics-normal);
+    border-color: var(--color-destructive-graphics-normal);
+  }
+
+  &--invalid#{&}--checked:hover &__pill {
+    background-color: var(--color-destructive-graphics-hover);
+    border-color: var(--color-destructive-graphics-hover);
+  }
+
+  &--invalid#{&}--checked:active &__pill {
+    background-color: var(--color-destructive-graphics-emphasized-onlight);
+    border-color: var(--color-destructive-graphics-emphasized-onlight);
+  }
+
+  &__input:focus-visible + &__pill {
+    outline: 3px solid var(--color-action-border-onlight-focus);
+    border-color: var(--color-action-border-ondark);
+  }
+
+  &__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    svg {
+      fill: var(--color-action-graphics-ondark);
+    }
+  }
+
+  &__label {
+    text-box: trim-both cap alphabetic;
+  }
+}
+
+// Grid layout shared by VisualCheckboxGroup and VisualRadioGroup.
+@mixin visual-form-group {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(8.75rem, 1fr));
+  gap: var(--core-space-xs);
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    gap: 0.75rem var(--core-space-xs, 0.75rem);
+  }
+
+  &--variant-line {
+    grid-template-columns: 1fr;
+  }
+}
+
+// Styling shared by VisualCheckbox and VisualRadio
+@mixin visual-form-card {
+  display: flex;
+  position: relative;
+  cursor: pointer;
+  width: 100%;
+
+  &--variant-line {
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    min-height: 6rem;
+    min-width: 15.125rem;
+  }
+
+  &--variant-rectangle {
+    flex-direction: column;
+    align-items: center;
+    min-height: 12.625rem;
+    min-width: 8.75rem;
+    height: 100%;
+  }
+
+  &__input {
+    // Hides input while making sure screen reader outline wraps the entire component
+    cursor: pointer;
+    position: absolute;
+    z-index: 0;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    outline: none;
+    appearance: none;
+  }
+
+  &__frame {
+    position: relative;
+    width: 100%;
+    z-index: 1;
+    display: inline-flex;
+    border-radius: 4px;
+    background: var(--color-action-background-ondark);
+    border: 2px solid var(--color-action-border-onlight);
+    color: var(--color-base-text-onlight);
+  }
+
+  &--variant-line &__frame {
+    margin-left: -2.87rem;
+    gap: var(--core-space-2xs);
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+    min-height: 4.63rem;
+    min-width: 12.25rem;
+    padding: var(--core-space-s) var(--core-space-m) var(--core-space-s) var(--core-space-2xl);
+  }
+
+  &--variant-rectangle &__frame {
+    margin-top: -4.37rem;
+    flex: 1;
+    gap: var(--core-space-xs);
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-end;
+    text-align: center;
+    min-width: 8.75rem;
+    min-height: 10.25rem;
+    padding: var(--core-space-3xl) var(--core-space-xs) var(--core-space-m) var(--core-space-xs);
+  }
+
+  &__visual-content {
+    position: relative;
+    z-index: 2;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    border-radius: 100%;
+    background: var(--color-action-background-ondark);
+    border: 2px solid var(--color-action-border-ondark);
+
+    > * {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+
+  &--variant-line &__visual-content {
+    min-width: var(--core-space-4xl);
+    min-height: var(--core-space-4xl);
+
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      min-width: var(--core-space-5xl);
+      min-height: var(--core-space-5xl);
+    }
+  }
+
+  &--variant-rectangle &__visual-content {
+    flex-shrink: 0;
+    width: calc(100% - 2rem);
+    min-width: 6.75rem;
+    max-width: 13rem;
+  }
+
+  &--checked &__frame {
+    background: var(--color-action-background-onlight);
+    color: var(--color-action-text-ondark);
+    border-color: var(--color-action-background-onlight);
+  }
+
+  &--invalid &__frame {
+    background: var(--color-action-background-ondark);
+    border-color: var(--core-color-cherry-500);
+  }
+
+  &:hover &__frame {
+    background: var(--core-color-neutral-50);
+    border-color: var(--color-action-border-onlight-hover);
+  }
+
+  &:active &__frame {
+    background: var(--core-color-neutral-100);
+    border-color: var(--color-action-border-onlight-hover);
+  }
+
+  &--checked:hover &__frame {
+    background: var(--color-action-background-onlight-hover);
+  }
+
+  &--checked:active &__frame {
+    background: var(--color-action-background-onlight-active);
+    border-color: var(--color-action-background-onlight-active);
+  }
+
+  &--invalid:hover &__frame {
+    background: var(--core-color-cherry-50);
+    border-color: var(--core-color-cherry-500);
+  }
+
+  &--invalid:active &__frame {
+    background: var(--core-color-cherry-100);
+    border-color: var(--core-color-cherry-500);
+  }
+
+  &--invalid#{&}--checked &__frame {
+    background: var(--core-color-cherry-50);
+    color: var(--color-base-text-onlight);
+    border-color: var(--core-color-cherry-500);
+  }
+
+  &--invalid#{&}--checked:hover &__frame {
+    background: var(--core-color-cherry-100);
+    border-color: var(--core-color-cherry-500);
+  }
+
+  &--invalid#{&}--checked:active &__frame {
+    background: var(--core-color-cherry-200);
+    border-color: var(--core-color-cherry-500);
+  }
+
+  &__input:focus-visible + &__frame {
+    outline: 4px solid var(--color-action-border-onlight-focus);
+    border-color: var(--color-action-border-ondark);
+  }
+
+  &__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    svg {
+      fill: var(--color-action-graphics-ondark);
+    }
+  }
+
+  &__label {
+    flex: 1;
+    min-width: 0;
+    overflow-wrap: anywhere;
+
+    @include fonts.label-subdued;
+  }
+}

package/lib/components/RadioButton/utils.d.ts

@@ -1,2 +0,0 @@
-import { FormOnColor } from '../../constants';
-export declare const getRadioLabelClasses: (radioId: string, onColor: FormOnColor, large: boolean, checkedRadioId?: string) => string | undefined;

package/lib/components/VisualRadioButtonCloud/RadioButton/index.d.ts

@@ -1,3 +0,0 @@
-import { default as RadioButton } from './RadioButton';
-export * from './RadioButton';
-export default RadioButton;

package/lib/components/VisualRadioButtonCloud/RadioButton/index.js

@@ -1,5 +0,0 @@
-import { t as RadioButton_default$1 } from "../../../RadioButton2.js";
-var RadioButton_default = RadioButton_default$1;
-export { RadioButton_default as default };
-
-//# sourceMappingURL=index.js.map

package/lib/components/VisualRadioButtonCloud/RadioButton/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/VisualRadioButtonCloud/RadioButton/index.ts"],"sourcesContent":["import RadioButton from './RadioButton';\nexport * from './RadioButton';\nexport default RadioButton;\n"],"mappings":";AAEA,IAAA,sBAAe"}

package/lib/components/VisualRadioButtonCloud/RadioButton/styles.module.scss

@@ -1,133 +0,0 @@
-@use 'sass:map';
-@use '../../../scss/screen-reader' as *;
-@use '../../../scss/breakpoints' as breakpoints;
-@use '../../../scss/font-mixins' as fonts;
-@import '../../../scss/supernova/styles/colors.css';
-@import '../../../scss/supernova/styles/spacers.css';
-
-.visual-radio-button {
-  position: relative;
-  display: inline-flex;
-  align-items: stretch;
-  min-height: 2.75rem;
-  padding: 0.313rem 0;
-  cursor: pointer;
-
-  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-    padding: 0;
-  }
-
-  &__input {
-    // Hides input while making sure screen reader outline wraps the entire component
-    cursor: pointer;
-    position: absolute;
-    z-index: 0;
-    inset: 0;
-    width: 100%;
-    height: 100%;
-    outline: none;
-    appearance: none;
-  }
-
-  &__pill {
-    position: relative;
-    z-index: 1;
-    display: inline-flex;
-    align-items: center;
-    gap: var(--core-space-2xs);
-    box-sizing: border-box;
-    min-height: var(--core-space-l);
-    padding: var(--core-space-3xs) var(--core-space-m);
-    border-radius: 100px;
-    background-color: var(--color-action-background-ondark);
-    border: 1px solid var(--color-action-border-onlight);
-    color: var(--color-base-text-onlight);
-
-    @include fonts.title6;
-
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-      min-height: var(--core-space-xl);
-      padding: var(--core-space-3xs) var(--core-space-l);
-    }
-  }
-
-  &:hover &__pill {
-    background-color: var(--color-action-background-ondark-hover);
-    border-color: var(--color-action-border-onlight-hover);
-  }
-
-  &:active &__pill {
-    background-color: var(--color-action-background-ondark-selected);
-    border-color: var(--color-action-border-onlight-hover);
-  }
-
-  &--checked &__pill {
-    background-color: var(--color-action-background-onlight);
-    color: var(--color-action-text-ondark);
-    border-color: var(--color-action-background-onlight);
-    padding: var(--core-space-3xs) var(--core-space-s);
-
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-      padding: var(--core-space-3xs) var(--core-space-m) var(--core-space-3xs) 1.25rem;
-    }
-  }
-
-  &--checked:hover &__pill {
-    background-color: var(--color-action-graphics-onlight-hover);
-    border-color: var(--color-action-graphics-onlight-hover);
-  }
-
-  &--checked:active &__pill {
-    background-color: var(--color-action-background-onlight-active);
-    border-color: var(--color-action-background-onlight-active);
-  }
-
-  &--invalid &__pill {
-    background-color: var(--color-action-background-ondark);
-    border-color: var(--color-destructive-border-normal);
-  }
-
-  &--invalid:hover &__pill {
-    background-color: var(--color-destructive-background-normal);
-    border-color: var(--color-destructive-border-normal);
-  }
-
-  &--invalid:active &__pill {
-    background-color: var(--color-destructive-background-emphasized);
-    border-color: var(--color-destructive-border-normal);
-  }
-
-  &--invalid#{&}--checked &__pill {
-    background-color: var(--color-destructive-graphics-normal);
-    border-color: var(--color-destructive-graphics-normal);
-  }
-
-  &--invalid#{&}--checked:hover &__pill {
-    background-color: var(--color-destructive-graphics-hover);
-    border-color: var(--color-destructive-graphics-hover);
-  }
-
-  &--invalid#{&}--checked:active &__pill {
-    background-color: var(--color-destructive-graphics-emphasized-onlight);
-    border-color: var(--color-destructive-graphics-emphasized-onlight);
-  }
-
-  &__input:focus-visible + &__pill {
-    outline: 3px solid var(--color-action-border-onlight-focus);
-    border-color: var(--color-action-border-ondark);
-  }
-
-  &__icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-
-    svg {
-      fill: var(--color-action-graphics-ondark);
-    }
-  }
-
-  &__label {
-    text-box: trim-both cap alphabetic;
-  }
-}

package/lib/components/VisualRadioButtonCloud/RadioButton/styles.module.scss.d.ts

@@ -1,15 +0,0 @@
-export type Styles = {
-  'visual-radio-button': string;
-  'visual-radio-button__icon': string;
-  'visual-radio-button__input': string;
-  'visual-radio-button__label': string;
-  'visual-radio-button__pill': string;
-  'visual-radio-button--checked': string;
-  'visual-radio-button--invalid': string;
-};
-
-export type ClassNames = keyof Styles;
-
-declare const styles: Styles;
-
-export default styles;

package/lib/components/VisualRadioButtonCloud/index.d.ts

@@ -1,3 +0,0 @@
-import { default as VisualRadioButtonCloud } from './VisualRadioButtonCloud';
-export * from './VisualRadioButtonCloud';
-export default VisualRadioButtonCloud;