@bspk/ui 1.1.21 → 1.1.23

package/src/Tooltip.tsx

@@ -4,13 +4,19 @@ import { ReactElement, cloneElement, useId, useMemo, useRef, useState } from 're
 import { Portal } from './Portal';
 import { Placement, useFloating } from './hooks/useFloating';
 
+const DEFAULT = {
+    placement: 'top',
+    showTail: true,
+    disabled: false,
+} as const;
+
 export type TooltipProps = {
     /**
      * The placement of the tooltip.
      *
      * @default top
      */
-    placement?: Placement;
+    placement?: Extract<Placement, 'bottom' | 'left' | 'right' | 'top'>;
     /** The tooltip content. */
     label: string;
     /**
@@ -27,15 +33,33 @@ export type TooltipProps = {
      *
      * @default true
      */
-    tail?: boolean;
+    showTail?: boolean;
 };
 
 /**
  * Brief message that provide additional guidance and helps users perform an action if needed.
  *
+ * @example
+ *     import { Tooltip } from '@bspk/ui/Tooltip';
+ *     import { Button } from '@bspk/ui/Button';
+ *
+ *     export function Example() {
+ *         return (
+ *             <Tooltip label="I explain what this button does" placement="top">
+ *                 <Button>Click me</Button>
+ *             </Tooltip>
+ *         );
+ *     }
+ *
  * @name Tooltip
  */
-function Tooltip({ placement = 'top', label, children, disabled = false, tail = true }: TooltipProps) {
+function Tooltip({
+    placement = DEFAULT.placement,
+    label,
+    children,
+    disabled = DEFAULT.disabled,
+    showTail = DEFAULT.showTail,
+}: TooltipProps) {
     const id = useId();
     const [show, setShow] = useState(false);
 
@@ -56,7 +80,7 @@ function Tooltip({ placement = 'top', label, children, disabled = false, tail =
     const { floatingStyles, middlewareData, elements } = useFloating({
         placement: placement,
         strategy: 'fixed',
-        offsetOptions: 8,
+        offsetOptions: showTail ? 8 : 4,
         arrowRef,
         hide: !show,
     });
@@ -80,17 +104,13 @@ function Tooltip({ placement = 'top', label, children, disabled = false, tail =
                         style={floatingStyles}
                     >
                         <span data-text>{label}</span>
-                        {tail !== false && (
+                        {showTail !== false && (
                             <span
                                 aria-hidden
                                 data-arrow
                                 ref={(node) => {
                                     arrowRef.current = node;
                                 }}
-                                style={{
-                                    left: `${middlewareData?.arrow?.x}px`,
-                                    top: `${middlewareData?.arrow?.y}px`,
-                                }}
                             />
                         )}
                     </div>

package/src/Txt.tsx

@@ -30,7 +30,15 @@ export type TxtProps<As extends ElementType = 'span'> = {
 };
 
 /**
- * A text component that applies the correct font styles based on the variant and size. variant
+ * A text component that applies the correct font styles based on the variant
+ * and size. variant
+ *
+ * @example
+ *     import { Txt } from '@bspk/ui/Txt';
+ *
+ *     export function Example() {
+ *         return <Txt>Example Txt</Txt>;
+ *     }
  *
  * @name Txt
  */
@@ -48,7 +56,11 @@ function Txt<As extends ElementType = 'span'>({
     const As: ElementType = as || 'span';
 
     return (
-        <As {...containerProps} data-bspk="txt" style={{ ...styleProp, font: `var(--${variant})` }}>
+        <As
+            {...containerProps}
+            data-bspk="txt"
+            style={{ ...styleProp, font: `var(--${variant})` }}
+        >
             {content}
         </As>
     );

package/src/badge.scss

@@ -1,5 +1,8 @@
 [data-bspk='badge'] {
     --size: var(--spacing-sizing-06);
+    --padding-x: var(--spacing-sizing-02);
+    --padding-y: 0;
+    --border-width: 0;
 
     display: flex;
     align-items: center;
@@ -8,22 +11,48 @@
     height: var(--size);
     width: fit-content;
     min-width: var(--size);
-    padding: 0 var(--spacing-sizing-02);
+    font: var(--labels-x-small);
+    color: var(--foreground-brand-on-primary);
+    background: var(--surface-brand-primary);
+
+    // clip padding based on border width
+    padding: calc(var(--padding-y) - var(--border-width)) calc(var(--padding-x) - var(--border-width));
 
     &[data-size='x-small'] {
         --size: var(--spacing-sizing-05);
-
-        padding: 2px var(--spacing-sizing-01);
+        --padding-x: 2px;
+        --padding-y: var(--spacing-sizing-01);
     }
 
-    font: var(--labels-x-small);
-    color: var(--foreground-brand-on-primary);
-    background: var(--surface-brand-primary);
-
     &[data-variant='secondary'] {
         color: var(--foreground-brand-on-secondary);
         background: var(--surface-brand-secondary);
     }
+
+    &[data-surface-border] {
+        --border-width: 2px;
+
+        border: 2px solid var(--surface-neutral-t1-base);
+    }
+}
+
+[data-bspk='badge-wrapper'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    width: fit-content;
+    height: fit-content;
+    flex-shrink: 0;
+
+    [data-bspk='badge'] {
+        position: absolute;
+        top: 0;
+        right: 0;
+        transform: scale(1) translate(50%, -50%);
+        transform-origin: 100% 0%;
+        z-index: 2;
+    }
 }
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/base.scss

@@ -67,26 +67,38 @@ a {
 }
 
 a[data-subtle] {
+    text-decoration: none;
     color: var(--foreground-neutral-on-surface);
 
     &:hover {
+        text-decoration: underline;
         color: var(--foreground-link-text-subtle-hovered);
     }
 
-    &:disabled {
+    &:active {
+        text-decoration: underline;
+    }
+
+    &[disabled] {
         pointer-events: none;
         color: var(--foreground-link-text-subtle-disabled);
     }
 }
 
 a[data-subtle-inverse] {
+    text-decoration: none;
     color: var(--foreground-neutral-inverse-on-surface);
 
     &:hover {
+        text-decoration: underline;
         color: var(--foreground-link-text-subtle-inverse-hovered);
     }
 
-    &:disabled {
+    &:active {
+        text-decoration: underline;
+    }
+
+    &[disabled] {
         pointer-events: none;
         color: var(--foreground-link-text-subtle-inversed-disabled);
     }

package/src/demo/examples.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @cspell/spellchecker */
 import { SvgCircle } from '@bspk/icons/Circle';
 import { SvgContentCopy } from '@bspk/icons/ContentCopy';
 import { SvgDiamond } from '@bspk/icons/Diamond';
@@ -7,6 +8,7 @@ import { SvgSquareFill } from '@bspk/icons/SquareFill';
 import { CSSProperties } from 'react';
 
 import { Avatar, AvatarProps } from '../Avatar';
+import { BadgeProps } from '../Badge';
 import { BannerAlertProps } from '../BannerAlert';
 import { Button, ButtonProps } from '../Button';
 import { Checkbox } from '../Checkbox';
@@ -219,6 +221,29 @@ export const examples: (setState: DemoSetState, action: DemoAction) => Record<st
             },
         ]),
     },
+    Badge: {
+        containerStyle: { width: '100%' },
+        render: ({ props, Component, preset }) => {
+            if (preset?.label === 'With Context') {
+                return (
+                    <>
+                        <Component {...props} style={{ width: 'fit-content' }}>
+                            <Avatar image="/profile.jpg" name="Bob Boberson" />
+                        </Component>
+                    </>
+                );
+            }
+            return <Component {...props} />;
+        },
+        presets: setPresets<BadgeProps>([
+            {
+                label: 'With Context',
+                state: {
+                    surfaceBorder: true,
+                },
+            },
+        ]),
+    },
     Button: {
         presets: buttonExamplePresets,
     },
@@ -478,6 +503,9 @@ export const examples: (setState: DemoSetState, action: DemoAction) => Record<st
             );
         },
     },
+    ProgressBar: {
+        containerStyle: { width: '80%' },
+    },
     ProgressionStepper: {
         presets: setPresets<ProgressionStepperProps>([
             {

package/src/progress-bar.scss

@@ -29,8 +29,6 @@
     }
 
     &[data-size='small'] {
-        max-width: 248px;
-
         [data-bar] {
             height: var(--spacing-sizing-01);
         }

package/src/radio-group.scss

@@ -0,0 +1,5 @@
+[data-bspk='radio-group'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-sizing-01);
+}

package/src/textarea.scss

@@ -27,6 +27,7 @@
     [data-replicated-value] {
         white-space: pre-wrap;
         visibility: hidden;
+        overflow-y: hidden;
     }
 
     textarea,
@@ -38,11 +39,14 @@
         grid-area: 1 / 1 / 2 / 2;
         min-height: calc((var(--line-height) * var(--min-rows)) + (var(--padding) * 2));
         max-height: calc((var(--line-height) * var(--max-rows)) + (var(--padding) * 2));
+        max-width: 100%;
     }
 
     textarea {
         --border-color: var(--stroke-neutral-base);
 
+        text-wrap: break-word;
+
         &::placeholder {
             color: var(--foreground-neutral-on-surface-variant-03);
         }

package/src/toggle-option.scss

@@ -16,6 +16,7 @@
         align-items: unset;
     }
 
+    // this media query targets touch devices
     @media (any-pointer: coarse) {
         min-height: var(--spacing-sizing-12);
     }
@@ -36,26 +37,6 @@
         color: var(--foreground-neutral-on-surface-variant-01);
     }
 
-    &[data-size='small'] {
-        [data-label] {
-            font: var(--labels-small);
-        }
-
-        [data-description] {
-            font: var(--body-x-small);
-        }
-    }
-
-    &[data-size='large'] {
-        [data-label] {
-            font: var(--labels-large);
-        }
-
-        [data-description] {
-            font: var(--body-base);
-        }
-    }
-
     &:not(:has(:disabled)) {
         [data-pseudo='focus'] &,
         &:focus-visible,

package/src/tooltip.scss

@@ -32,27 +32,27 @@
         border-color: transparent;
     }
 
-    &[data-placement^='bottom'] {
+    &[data-placement='bottom'] {
         [data-arrow] {
             top: var(--arrow-offset);
             border-bottom-color: var(--surface-neutral-inverse);
         }
     }
 
-    &[data-placement^='top'] {
+    &[data-placement='top'] {
         [data-arrow] {
             border-top-color: var(--surface-neutral-inverse);
         }
     }
 
-    &[data-placement^='right'] {
+    &[data-placement='right'] {
         [data-arrow] {
             margin-left: var(--arrow-offset);
             border-right-color: var(--surface-neutral-inverse);
         }
     }
 
-    &[data-placement^='left'] {
+    &[data-placement='left'] {
         [data-arrow] {
             right: var(--arrow-offset);
             border-left-color: var(--surface-neutral-inverse);

package/dist/SwitchGroup.d.ts

@@ -1,42 +0,0 @@
-import { ToggleOptionProps } from './ToggleOption';
-import { ElementProps, CommonProps } from './';
-export type SwitchGroupOption = Pick<ToggleOptionProps, 'description' | 'label'> & Required<CommonProps<'value'>>;
-export type SwitchGroupProps = CommonProps<'aria-label' | 'name'> & {
-    /**
-     * The function to call when the switches are changed.
-     *
-     * @required
-     */
-    onChange: (value: string[]) => void;
-    /**
-     * The options for the switches.
-     *
-     * @example
-     *     [
-     *         { value: '1', label: 'Option 1' },
-     *         { value: '2', label: 'Option 2' },
-     *         { value: '3', label: 'Option 3' },
-     *     ];
-     *
-     * @type Array<SwitchGroupOption>
-     * @required
-     */
-    options: SwitchGroupOption[];
-    /**
-     * The values of the switches in the on state.
-     *
-     * @type Array<string>
-     */
-    value?: SwitchGroupProps['options'][number]['value'][];
-};
-/**
- * A group of switches that allows users to choose one or more items from a list or turn an feature on or off.
- *
- * @name SwitchGroup
- */
-declare function SwitchGroup({ onChange, options, name, value: values, ...props }: ElementProps<SwitchGroupProps, 'div'>): import("react/jsx-runtime").JSX.Element;
-declare namespace SwitchGroup {
-    var bspkName: string;
-}
-export { SwitchGroup };
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/SwitchGroup.js

@@ -1,16 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Switch } from './Switch';
-import { ToggleOption } from './ToggleOption';
-/**
- * A group of switches that allows users to choose one or more items from a list or turn an feature on or off.
- *
- * @name SwitchGroup
- */
-function SwitchGroup({ onChange, options = [], name, value: values = [], ...props }) {
-    return (_jsx("div", { ...props, "data-bspk": "switch-group", role: "group", children: options.map(({ label, description, value }) => (_jsx(ToggleOption, { description: description, label: label, children: _jsx(Switch, { "aria-label": label, checked: values.includes(value), name: name, onChange: (checked) => {
-                    onChange(checked ? [...values, value] : values.filter((v) => v !== value));
-                }, value: value }) }, value))) }));
-}
-SwitchGroup.bspkName = 'SwitchGroup';
-export { SwitchGroup };
-//# sourceMappingURL=SwitchGroup.js.map

package/dist/SwitchGroup.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SwitchGroup.js","sourceRoot":"","sources":["../src/SwitchGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAqB,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAmCjE;;;;GAIG;AACH,SAAS,WAAW,CAAC,EACjB,QAAQ,EACR,OAAO,GAAG,EAAE,EACZ,IAAI,EACJ,KAAK,EAAE,MAAM,GAAG,EAAE,EAClB,GAAG,KAAK,EAC4B;IACpC,OAAO,CACH,iBAAS,KAAK,eAAY,cAAc,EAAC,IAAI,EAAC,OAAO,YAChD,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAC5C,KAAC,YAAY,IAAC,WAAW,EAAE,WAAW,EAAc,KAAK,EAAE,KAAK,YAC5D,KAAC,MAAM,kBACS,KAAK,EACjB,OAAO,EAAE,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,EAC/B,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,OAAO,EAAE,EAAE;oBAClB,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC;gBAC/E,CAAC,EACD,KAAK,EAAE,KAAK,GACd,IATuC,KAAK,CAUnC,CAClB,CAAC,GACA,CACT,CAAC;AACN,CAAC;AAED,WAAW,CAAC,QAAQ,GAAG,aAAa,CAAC;AAErC,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/hooks/useSwitchGroupState.d.ts

@@ -1,37 +0,0 @@
-import { SwitchProps } from '../Switch';
-/**
- * A hook to manage the state of a group of switches. Used alongside the SwitchGroup component.
- *
- * @example
- *     import { Switch } from '@bspk/ui/Switch';
- *     import { useSwitchGroupState } from '@bspk/ui/hooks/useSwitchGroupState';
- *
- *     export function Example() {
- *     const allValues = ['Red', 'Orange', 'Yellow', 'Green'];
- *
- *     const { allSwitchProps, switchProps, values } = useSwitchGroupState(allValues, 'fruits');
- *
- *     return (
- *     <>
- *     <pre>Selected Values: {values.join(', ')}</pre>
- *     <Switch aria-label="All" {...allSwitchProps} />
- *     {allValues.map((value) => (
- *     <Switch key={value} aria-label={value} {...switchProps(value)} />
- *     ))}
- *     </>
- *     );
- *     }
- *
- * @param allValues - The values of the switches.
- * @param name - The name of the switches.
- * @param externalState - The externally managed state of the switches.
- * @returns Properties to pass to the switch, other helper functions, and the state of the switch.
- */
-export declare function useSwitchGroupState(allValues: string[], name: string, externalState?: [values: string[], setValues: (next: string[]) => void]): {
-    toggleValue: (itemValue: string, checked: boolean) => void;
-    allSwitchProps: Pick<SwitchProps, "name" | "value" | "onChange" | "checked">;
-    switchProps: (value: string) => Pick<SwitchProps, "checked" | "name" | "onChange" | "value">;
-    values: string[];
-    setValues: import("react").Dispatch<import("react").SetStateAction<string[]>>;
-};
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/hooks/useSwitchGroupState.js

@@ -1,57 +0,0 @@
-import { useCallback, useMemo, useState } from 'react';
-/**
- * A hook to manage the state of a group of switches. Used alongside the SwitchGroup component.
- *
- * @example
- *     import { Switch } from '@bspk/ui/Switch';
- *     import { useSwitchGroupState } from '@bspk/ui/hooks/useSwitchGroupState';
- *
- *     export function Example() {
- *     const allValues = ['Red', 'Orange', 'Yellow', 'Green'];
- *
- *     const { allSwitchProps, switchProps, values } = useSwitchGroupState(allValues, 'fruits');
- *
- *     return (
- *     <>
- *     <pre>Selected Values: {values.join(', ')}</pre>
- *     <Switch aria-label="All" {...allSwitchProps} />
- *     {allValues.map((value) => (
- *     <Switch key={value} aria-label={value} {...switchProps(value)} />
- *     ))}
- *     </>
- *     );
- *     }
- *
- * @param allValues - The values of the switches.
- * @param name - The name of the switches.
- * @param externalState - The externally managed state of the switches.
- * @returns Properties to pass to the switch, other helper functions, and the state of the switch.
- */
-export function useSwitchGroupState(allValues, name, externalState) {
-    const localState = useState([]);
-    const [values, setValues] = externalState || localState;
-    const toggleValue = useCallback((itemValue, checked) => {
-        setValues(allValues.flatMap((value) => {
-            if (value === itemValue)
-                return checked ? value : [];
-            return values.includes(value) ? value : [];
-        }));
-    }, [allValues, setValues, values]);
-    const switchProps = useCallback((value) => ({
-        checked: values.includes(value),
-        name,
-        onChange: (checked) => toggleValue(value, checked),
-        value,
-    }), [values, name, toggleValue]);
-    const allSwitchProps = useMemo(() => {
-        return {
-            checked: allValues.length === values.length,
-            name,
-            onChange: () => setValues(allValues.length === values.length ? [] : allValues),
-            value: 'all',
-        };
-    }, [allValues, values.length, name, setValues]);
-    return { toggleValue, allSwitchProps, switchProps, values, setValues };
-}
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
-//# sourceMappingURL=useSwitchGroupState.js.map

package/dist/hooks/useSwitchGroupState.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useSwitchGroupState.js","sourceRoot":"","sources":["../../src/hooks/useSwitchGroupState.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAIvD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,UAAU,mBAAmB,CAC/B,SAAmB,EACnB,IAAY,EACZ,aAAuE;IAEvE,MAAM,UAAU,GAAG,QAAQ,CAAW,EAAE,CAAC,CAAC;IAC1C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,aAAa,IAAI,UAAU,CAAC;IAExD,MAAM,WAAW,GAAG,WAAW,CAC3B,CAAC,SAAiB,EAAE,OAAgB,EAAE,EAAE;QACpC,SAAS,CACL,SAAS,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;YACxB,IAAI,KAAK,KAAK,SAAS;gBAAE,OAAO,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;YACrD,OAAO,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;QAC/C,CAAC,CAAC,CACL,CAAC;IACN,CAAC,EACD,CAAC,SAAS,EAAE,SAAS,EAAE,MAAM,CAAC,CACjC,CAAC;IAEF,MAAM,WAAW,GAAG,WAAW,CAC3B,CAAC,KAAa,EAAgE,EAAE,CAAC,CAAC;QAC9E,OAAO,EAAE,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC;QAC/B,IAAI;QACJ,QAAQ,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC;QAClD,KAAK;KACR,CAAC,EACF,CAAC,MAAM,EAAE,IAAI,EAAE,WAAW,CAAC,CAC9B,CAAC;IAEF,MAAM,cAAc,GAAG,OAAO,CAAC,GAAiE,EAAE;QAC9F,OAAO;YACH,OAAO,EAAE,SAAS,CAAC,MAAM,KAAK,MAAM,CAAC,MAAM;YAC3C,IAAI;YACJ,QAAQ,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,SAAS,CAAC,MAAM,KAAK,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;YAC9E,KAAK,EAAE,KAAK;SACf,CAAC;IACN,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC;IAEhD,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC;AAC3E,CAAC;AAED,sDAAsD"}

package/src/SwitchGroup.tsx

@@ -1,72 +0,0 @@
-import { Switch } from './Switch';
-import { ToggleOptionProps, ToggleOption } from './ToggleOption';
-
-import { ElementProps, CommonProps } from './';
-
-export type SwitchGroupOption = Pick<ToggleOptionProps, 'description' | 'label'> & Required<CommonProps<'value'>>;
-
-export type SwitchGroupProps = CommonProps<'aria-label' | 'name'> & {
-    /**
-     * The function to call when the switches are changed.
-     *
-     * @required
-     */
-    onChange: (value: string[]) => void;
-    /**
-     * The options for the switches.
-     *
-     * @example
-     *     [
-     *         { value: '1', label: 'Option 1' },
-     *         { value: '2', label: 'Option 2' },
-     *         { value: '3', label: 'Option 3' },
-     *     ];
-     *
-     * @type Array<SwitchGroupOption>
-     * @required
-     */
-    options: SwitchGroupOption[];
-    /**
-     * The values of the switches in the on state.
-     *
-     * @type Array<string>
-     */
-    value?: SwitchGroupProps['options'][number]['value'][];
-};
-
-/**
- * A group of switches that allows users to choose one or more items from a list or turn an feature on or off.
- *
- * @name SwitchGroup
- */
-function SwitchGroup({
-    onChange,
-    options = [],
-    name,
-    value: values = [],
-    ...props
-}: ElementProps<SwitchGroupProps, 'div'>) {
-    return (
-        <div {...props} data-bspk="switch-group" role="group">
-            {options.map(({ label, description, value }) => (
-                <ToggleOption description={description} key={value} label={label}>
-                    <Switch
-                        aria-label={label}
-                        checked={values.includes(value)}
-                        name={name}
-                        onChange={(checked) => {
-                            onChange(checked ? [...values, value] : values.filter((v) => v !== value));
-                        }}
-                        value={value}
-                    />
-                </ToggleOption>
-            ))}
-        </div>
-    );
-}
-
-SwitchGroup.bspkName = 'SwitchGroup';
-
-export { SwitchGroup };
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */