@helsenorge/designsystem-react 15.0.0-beta.1 → 15.0.0

package/scss/_visual-form.scss

@@ -0,0 +1,357 @@
+@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,
+  &:has(input: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,
+  &:has(input:checked):hover &__pill {
+    background-color: var(--color-action-graphics-onlight-hover);
+    border-color: var(--color-action-graphics-onlight-hover);
+  }
+
+  &--checked:active &__pill,
+  &:has(input: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,
+  &--invalid:has(input:checked) &__pill {
+    background-color: var(--color-destructive-graphics-normal);
+    border-color: var(--color-destructive-graphics-normal);
+  }
+
+  &--invalid#{&}--checked:hover &__pill,
+  &--invalid:has(input:checked):hover &__pill {
+    background-color: var(--color-destructive-graphics-hover);
+    border-color: var(--color-destructive-graphics-hover);
+  }
+
+  &--invalid#{&}--checked:active &__pill,
+  &--invalid:has(input: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,
+  &:has(input: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,
+  &:has(input:checked):hover &__frame {
+    background: var(--color-action-background-onlight-hover);
+  }
+
+  &--checked:active &__frame,
+  &:has(input: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,
+  &--invalid:has(input: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,
+  &--invalid:has(input:checked):hover &__frame {
+    background: var(--core-color-cherry-100);
+    border-color: var(--core-color-cherry-500);
+  }
+
+  &--invalid#{&}--checked:active &__frame,
+  &--invalid:has(input: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/utils6.js

@@ -1,115 +0,0 @@
-import { Breakpoint } from "./hooks/useBreakpoint.js";
-import { r as ResponsiveTableVariant } from "./constants2.js";
-import { isTouchDevice } from "./utils/device.js";
-import React from "react";
-import styles from "./components/Table/styles.module.scss";
-//#region src/components/Table/utils.ts
-/**
-* Sjekk om det skal brukes CSS for å bestemme responsivt utseende på dette breakpoint
-* @param config Konfigurasjon for responsiv oppførsel
-* @returns true om breakpoint bruker CSS
-*/
-var configUsesCss = (config) => config.variant === ResponsiveTableVariant.centeredoverflow || config.variant === ResponsiveTableVariant.block;
-/**
-* Lag klassenavn for CSS-config
-* @param config Konfigurasjon for responsiv oppførsel
-* @returns CSS-klassenavn
-*/
-var mapConfigToClass = (config) => config.variant === "centeredoverflow" || config.variant === "block" ? styles[`table--${config.variant}-${config.breakpoint}`] : "";
-/**
-* Sorter konfigurasjon etter breakpoints, fra største til minste
-* @param a Konfigurasjon for responsiv oppførsel
-* @param b Konfigurasjon for responsiv oppførsel
-* @returns Sortert liste
-*/
-var sortByBreakpointsDescending = (a, b) => Breakpoint[a.breakpoint] - Breakpoint[b.breakpoint];
-/**
-* Sjekk om en konfigurasjon skal brukes for nåværende breakpoint
-* @param a Konfigurasjon for responsiv oppførsel
-* @param breakpoint Nåværende breakpoint
-* @returns true dersom config skal brukes for breakpointet
-*/
-var isValidForCurrentBreakpoint = (config, breakpoint) => Breakpoint[config.breakpoint] >= breakpoint;
-/**
-* Finn konfigurasjon for nåværende breakpoint
-* @param config Konfigurasjon for responsiv oppførsel
-* @param breakpoint Nåværende breakpoint
-* @returns Konfigurasjon for responsiv oppførsel
-*/
-var getConfigForBreakpoint = (config, breakpoint) => {
-	if (Array.isArray(config)) {
-		config.sort(sortByBreakpointsDescending);
-		return config.find((x) => isValidForCurrentBreakpoint(x, breakpoint));
-	} else if (config && isValidForCurrentBreakpoint(config, breakpoint)) return config;
-};
-/**
-* Finn konfigurasjon for nåværende breakpoint og tabellbredde
-* @param config Konfigurasjon for responsiv oppførsel
-* @param breakpoint Nåværende breakpoint
-* @param tableWidth Bredde på tabell i px
-* @returns Konfigurasjon for responsiv oppførsel uten fallbackVariant
-*/
-var getCurrentConfig = (config, breakpoint, tableWidth, windowWidth) => {
-	const breakpointConfig = getConfigForBreakpoint(config, breakpoint);
-	const canUseHorizontalScroll = isTouchDevice();
-	const canUseCenteredOverflow = tableWidth <= windowWidth;
-	if (!breakpointConfig) return;
-	if (breakpointConfig.variant === ResponsiveTableVariant.centeredoverflow && !canUseCenteredOverflow && breakpointConfig.fallbackVariant === ResponsiveTableVariant.horizontalscroll) return {
-		variant: canUseHorizontalScroll ? ResponsiveTableVariant.horizontalscroll : ResponsiveTableVariant.none,
-		breakpoint: breakpointConfig.breakpoint
-	};
-	if (breakpointConfig.variant === ResponsiveTableVariant.centeredoverflow && !canUseCenteredOverflow && breakpointConfig.fallbackVariant !== ResponsiveTableVariant.centeredoverflow) return {
-		variant: breakpointConfig.fallbackVariant ?? ResponsiveTableVariant.none,
-		breakpoint: breakpointConfig.breakpoint
-	};
-	if (breakpointConfig.variant === ResponsiveTableVariant.horizontalscroll && !canUseHorizontalScroll && breakpointConfig.fallbackVariant === ResponsiveTableVariant.centeredoverflow) return {
-		variant: canUseCenteredOverflow ? ResponsiveTableVariant.centeredoverflow : ResponsiveTableVariant.none,
-		breakpoint: breakpointConfig.breakpoint
-	};
-	if (breakpointConfig.variant === ResponsiveTableVariant.horizontalscroll && !canUseHorizontalScroll && breakpointConfig.fallbackVariant !== ResponsiveTableVariant.horizontalscroll) return {
-		variant: breakpointConfig.fallbackVariant ?? ResponsiveTableVariant.none,
-		breakpoint: breakpointConfig.breakpoint
-	};
-	return breakpointConfig;
-};
-/**
-* Finn klassenavn for responsiv oppførsel
-* @param config Konfigurasjon for responsiv oppførsel
-* @returns Klassenavn
-*/
-var getBreakpointClass = (config) => config && configUsesCss(config) ? mapConfigToClass(config) : void 0;
-/**
-* Finn riktig posisjon for horisontal sentrering av tabell som skal vises "centeredoverflow"
-* @param parentWidth Bredde på element som tabellen ligger i
-* @param tableWidth Bredde på tabellen
-* @returns Styling som posisjonerer tabellen riktig
-*/
-var getCenteredOverflowTableStyle = (parentWidth, tableWidth) => {
-	if (parentWidth >= tableWidth) return;
-	return { left: `${(parentWidth - tableWidth) / 2 - 8}px` };
-};
-/**
-* Map children and inject the `mode` prop into element children, but never on React.Fragment.
-* If a Fragment is encountered, its children are mapped and updated, while the Fragment wrapper is preserved.
-*/
-var mapChildrenWithMode = (children, mode) => React.Children.map(children, (child) => {
-	if (!React.isValidElement(child)) return child;
-	if (child.type === React.Fragment) {
-		const fragmentChildren = child.props.children;
-		const mapped = React.Children.map(fragmentChildren, (gc) => React.isValidElement(gc) ? React.cloneElement(gc, { mode }) : gc);
-		return React.cloneElement(child, void 0, mapped);
-	}
-	return React.cloneElement(child, { mode });
-});
-/**
-* Create a shallow copy of an object with specific keys omitted.
-*/
-var omitProps = (obj, keys) => {
-	const clone = { ...obj };
-	for (const k of keys) delete clone[k];
-	return clone;
-};
-//#endregion
-export { omitProps as a, mapChildrenWithMode as i, getCenteredOverflowTableStyle as n, getCurrentConfig as r, getBreakpointClass as t };
-
-//# sourceMappingURL=utils6.js.map

package/lib/utils6.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils6.js","names":[],"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,OAAO,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;CACtI,IAAI,MAAM,QAAQ,OAAO,EAAE;EACzB,OAAO,KAAK,4BAA4B;EAExC,OAAO,OAAO,MAAK,MAAK,4BAA4B,GAAG,WAAW,CAAC;QAC9D,IAAI,UAAU,4BAA4B,QAAQ,WAAW,EAClE,OAAO;;;;;;;;;AAWX,IAAa,oBACX,QACA,YACA,YACA,gBAC0D;CAC1D,MAAM,mBAAmB,uBAAuB,QAAQ,WAAW;CACnE,MAAM,yBAAyB,eAAe;CAC9C,MAAM,yBAAyB,cAAc;CAE7C,IAAI,CAAC,kBACH;CAGF,IACE,iBAAiB,YAAY,uBAAuB,oBACpD,CAAC,0BACD,iBAAiB,oBAAoB,uBAAuB,kBAE5D,OAAO;EACL,SAAS,yBAAyB,uBAAuB,mBAAmB,uBAAuB;EACnG,YAAY,iBAAiB;EAC9B;CAGH,IACE,iBAAiB,YAAY,uBAAuB,oBACpD,CAAC,0BACD,iBAAiB,oBAAoB,uBAAuB,kBAE5D,OAAO;EACL,SAAS,iBAAiB,mBAAmB,uBAAuB;EACpE,YAAY,iBAAiB;EAC9B;CAGH,IACE,iBAAiB,YAAY,uBAAuB,oBACpD,CAAC,0BACD,iBAAiB,oBAAoB,uBAAuB,kBAE5D,OAAO;EACL,SAAS,yBAAyB,uBAAuB,mBAAmB,uBAAuB;EACnG,YAAY,iBAAiB;EAC9B;CAGH,IACE,iBAAiB,YAAY,uBAAuB,oBACpD,CAAC,0BACD,iBAAiB,oBAAoB,uBAAuB,kBAE5D,OAAO;EACL,SAAS,iBAAiB,mBAAmB,uBAAuB;EACpE,YAAY,iBAAiB;EAC9B;CAGH,OAAO;;;;;;;AAQT,IAAa,sBAAsB,WACjC,UAAU,cAAc,OAAO,GAAG,iBAAiB,OAAO,GAAG,KAAA;;;;;;;AAQ/D,IAAa,iCAAiC,aAAqB,eAAwD;CACzH,IAAI,eAAe,YACjB;CAKF,OAAO,EAAE,MAAM,IAAI,cAAc,cAAc,IAAI,EAAuB,KAAK;;;;;;AAOjF,IAAa,uBAAuB,UAA2B,SAC7D,MAAM,SAAS,IAAI,WAAU,UAAS;CACpC,IAAI,CAAC,MAAM,eAAe,MAAM,EAAE,OAAO;CACzC,IAAI,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;EACD,OAAO,MAAM,aAAa,OAAO,KAAA,GAAW,OAAO;;CAErD,OAAO,MAAM,aAAa,OAAkD,EAAE,MAAM,CAAC;EACrF;;;;AAKJ,IAAa,aAAqD,KAAQ,SAAqC;CAC7G,MAAM,QAAoB,EAAE,GAAG,KAAK;CACpC,KAAK,MAAM,KAAK,MACd,OAAO,MAAM;CAEf,OAAO"}