@box/blueprint-web 5.31.3

package/lib-esm/slider/slider-incrementer.js

@@ -0,0 +1,57 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { useCallback } from 'react';
+import { Minus, Plus } from '@box/blueprint-web-assets/icons/Fill';
+import { IconButton } from '../primitives/icon-button/icon-button.js';
+import { Tooltip } from '../tooltip/tooltip.js';
+import styles from './slider-incrementer.module.js';
+
+const SliderIncrementer = ({
+  children,
+  disabled,
+  max = 100,
+  min = 0,
+  minusButtonLabel,
+  minusButtonTooltipContent,
+  plusButtonLabel,
+  plusButtonTooltipContent,
+  setValue,
+  step = 1,
+  value
+}) => {
+  const decrement = useCallback(() => {
+    const nextValue = value - step;
+    const cappedValue = nextValue < min ? min : nextValue;
+    setValue(cappedValue);
+  }, [min, setValue, step, value]);
+  const increment = useCallback(() => {
+    const nextValue = value + step;
+    const cappedValue = nextValue > max ? max : nextValue;
+    setValue(cappedValue);
+  }, [max, setValue, step, value]);
+  return jsxs("div", {
+    className: clsx(styles.container),
+    children: [jsx(Tooltip, {
+      content: minusButtonTooltipContent,
+      children: jsx(IconButton, {
+        "aria-label": minusButtonLabel,
+        disabled: disabled,
+        icon: Minus,
+        onClick: decrement,
+        size: "x-small"
+      })
+    }), children, jsx(Tooltip, {
+      content: plusButtonTooltipContent,
+      children: jsx(IconButton, {
+        "aria-label": plusButtonLabel,
+        disabled: disabled,
+        icon: Plus,
+        onClick: increment,
+        size: "x-small"
+      })
+    })]
+  });
+};
+SliderIncrementer.displayName = 'SliderIncrementer';
+
+export { SliderIncrementer };

package/lib-esm/slider/slider-incrementer.module.js

@@ -0,0 +1,4 @@
+import '../index.css';
+var styles = {"container":"slider-incrementer-module_container__oxD6l"};
+
+export { styles as default };

package/lib-esm/slider/slider-range.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { type SliderRangeProps } from './types';
+/**
+ * An input where the user selects a value from within a given range.
+ */
+export declare const SliderRange: import("react").ForwardRefExoticComponent<SliderRangeProps & import("react").RefAttributes<HTMLButtonElement>>;

package/lib-esm/slider/slider-range.js

@@ -0,0 +1,65 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as SliderPrimitive from '@radix-ui/react-slider';
+import clsx from 'clsx';
+import { forwardRef, useState, useCallback } from 'react';
+import { useUniqueId } from '../utils/useUniqueId.js';
+import styles from './slider-range.module.js';
+
+/**
+ * An input where the user selects a value from within a given range.
+ */
+const SliderRange = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    className,
+    disabled,
+    label,
+    max = 2,
+    min = 0,
+    name,
+    onValueChange,
+    onValueCommit,
+    step,
+    value
+  } = props;
+  const sliderId = useUniqueId('slider-');
+  const sliderRootProps = {
+    disabled,
+    max,
+    min,
+    name,
+    onValueChange: newValue => onValueChange(newValue[0]),
+    onValueCommit: newValue => onValueCommit?.(newValue[0]),
+    step,
+    value: [value]
+  };
+  const [hasFocus, setHasFocus] = useState(false);
+  return jsx("div", {
+    className: clsx(styles.container, {
+      [styles.hasFocus]: hasFocus
+    }),
+    children: jsxs(SliderPrimitive.Root, {
+      className: clsx(styles.root, className, {
+        [styles.disabled]: disabled
+      }),
+      "data-testid": "Slider--root",
+      ...sliderRootProps,
+      children: [jsx(SliderPrimitive.Track, {
+        className: styles.track,
+        children: jsx(SliderPrimitive.Range, {
+          id: sliderId
+        })
+      }), jsx(SliderPrimitive.Thumb, {
+        ref: forwardedRef,
+        "aria-label": label,
+        "aria-valuenow": value,
+        className: styles.thumb,
+        onBlur: useCallback(() => setHasFocus(false), []),
+        onFocus: useCallback(() => setHasFocus(true), []),
+        role: "slider"
+      })]
+    })
+  });
+});
+SliderRange.displayName = 'SliderRange';
+
+export { SliderRange };

package/lib-esm/slider/slider-range.module.js

@@ -0,0 +1,4 @@
+import '../index.css';
+var styles = {"container":"slider-range-module_container__vpHaT","hasFocus":"slider-range-module_hasFocus__BuoDb","thumb":"slider-range-module_thumb__6P7XB","root":"slider-range-module_root__CfzE-","disabled":"slider-range-module_disabled__0RK6c","track":"slider-range-module_track__uvMjY"};
+
+export { styles as default };

package/lib-esm/slider/slider.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { type SliderProps } from './types';
+export declare const Slider: ((props: SliderProps) => JSX.Element) & {
+    Slider: import("react").ForwardRefExoticComponent<import("./types").SliderRangeProps & import("react").RefAttributes<HTMLButtonElement>>;
+};

package/lib-esm/slider/slider.js

@@ -0,0 +1,51 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { SliderIncrementer } from './slider-incrementer.js';
+import { SliderRange } from './slider-range.js';
+import styles from './slider.module.js';
+
+const SliderRoot = props => {
+  const {
+    className,
+    disabled,
+    max,
+    min,
+    minusButtonLabel,
+    minusButtonTooltipContent,
+    onValueChange,
+    plusButtonLabel,
+    plusButtonTooltipContent,
+    sliderLabel,
+    step,
+    value
+  } = props;
+  return jsx("div", {
+    className: clsx(styles.container, className, {}),
+    children: jsx(SliderIncrementer, {
+      disabled: disabled,
+      max: max,
+      min: min,
+      minusButtonLabel: minusButtonLabel,
+      minusButtonTooltipContent: minusButtonTooltipContent ?? minusButtonLabel,
+      plusButtonLabel: plusButtonLabel,
+      plusButtonTooltipContent: plusButtonTooltipContent ?? plusButtonLabel,
+      setValue: onValueChange,
+      step: step,
+      value: value,
+      children: jsx(SliderRange, {
+        disabled: disabled,
+        label: sliderLabel,
+        max: max,
+        min: min,
+        onValueChange: onValueChange,
+        step: step,
+        value: value
+      })
+    })
+  });
+};
+const Slider = Object.assign(SliderRoot, {
+  Slider: SliderRange
+});
+
+export { Slider };

package/lib-esm/slider/slider.module.js

@@ -0,0 +1,4 @@
+import '../index.css';
+var styles = {"container":"slider-module_container__LFXYp"};
+
+export { styles as default };

package/lib-esm/slider/types.d.ts

@@ -0,0 +1,181 @@
+import { type SliderProps as RadixSliderProps } from '@radix-ui/react-slider';
+import { type ReactNode } from 'react';
+export interface SliderProps {
+    /**
+     * Extend the styles applied to the component.
+     */
+    className?: string;
+    /**
+     * Localized (i.e. i18n) string used for aria-label and, if no minusButtonTooltipContent prop is provided, tooltip content
+     */
+    minusButtonLabel: string;
+    /**
+     * Localized (i.e. i18n) string used to override minusButtonLabel for tooltip content
+     *
+     * @default minusButtonLabel
+     */
+    minusButtonTooltipContent?: string;
+    /**
+     * Localized (i.e. i18n) string used for aria-label and, if no plusButtonTooltipContent prop is provided, tooltip content
+     */
+    plusButtonLabel: string;
+    /**
+     * Localized (i.e. i18n) string used to override minusButtonLabel for tooltip content
+     *
+     * @default plusButtonLabel
+     */
+    plusButtonTooltipContent?: string;
+    /**
+     * The label for the slider.
+     * Currently, only used for aria-label
+     */
+    sliderLabel: string;
+    /**
+     * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.
+     *
+     * @default false
+     */
+    sliderAsChild?: RadixSliderProps['asChild'];
+    /**
+     * The name of the slider. Submitted with its owning form as part of a name/value pair.
+     *
+     */
+    sliderName?: RadixSliderProps['name'];
+    /**
+     * When true, prevents the user from interacting with the increment-stepper.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The orientation of the slider.
+     *
+     * @default "horizontal"
+     */
+    min?: number;
+    /**
+     * The maximum value for the range.
+     *
+     * @default 100
+     */
+    max?: number;
+    /**
+     * The stepping interval.
+     *
+     * @default 1
+     */
+    step?: number;
+    /**
+     * The controlled value of the increment-stepper. Must be used in conjunction with onValueChange.
+     *
+     */
+    value: number;
+    /**
+     * Event handler called when the value changes.
+     */
+    onValueChange: (newValue: number) => void;
+}
+export interface SliderIncrementerProps {
+    children?: ReactNode;
+    /**
+     * When true, prevents the user from interacting with the incrementer.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Localized (i.e. i18n) string used for aria-label and, if no minusButtonTooltipContent prop is provided, tooltip content
+     */
+    minusButtonLabel: string;
+    /**
+     * Localized (i.e. i18n) string used for tooltip content
+     */
+    minusButtonTooltipContent: string;
+    /**
+     * Localized (i.e. i18n) string used for aria-label and, if no plusButtonTooltipContent prop is provided, tooltip content
+     */
+    plusButtonLabel: string;
+    /**
+     * Localized (i.e. i18n) string used for tooltip content
+     */
+    plusButtonTooltipContent: string;
+    /**
+     * The minimum value for the range.
+     *
+     * @default "horizontal"
+     */
+    min?: number;
+    /**
+     * The maximum value for the range.
+     *
+     * @default 100
+     */
+    max?: number;
+    /**
+     * A function to update the state of values
+     */
+    setValue: (val: number) => void;
+    /**
+     * The stepping interval.
+     *
+     * @default 1
+     */
+    step?: number;
+    /**
+     * The controlled values of the slider. Must be used in conjunction with onValueChange.
+     */
+    value: number;
+}
+export interface SliderRangeProps {
+    /**
+     * Extend the styles applied to the component.
+     */
+    className?: string;
+    /**
+     * The name of the slider. Submitted with its owning form as part of a name/value pair.
+     *
+     */
+    name?: RadixSliderProps['name'];
+    /**
+     * When true, prevents the user from interacting with the slider.
+     *
+     * @default false
+     */
+    disabled?: RadixSliderProps['disabled'];
+    /**
+     * Localized (i.e. i18n) string used for aria-labe
+     */
+    label: string;
+    /**
+     * The minimum value for the range.
+     *
+     * @default 0
+     */
+    min?: RadixSliderProps['min'];
+    /**
+     * The maximum value for the range.
+     *
+     * @default 2
+     */
+    max?: RadixSliderProps['max'];
+    /**
+     * The stepping interval.
+     *
+     * @default 1
+     */
+    step?: RadixSliderProps['step'];
+    /**
+     * The controlled value of the slider. Must be used in conjunction with onValueChange.
+     * WARNING: it is not possible to prevent via types value from being set to a value outside of the min/max range.
+     * The component will adhere to min/max, but value could be initialized or updated externally to be out-of-bounds.
+     */
+    value: number;
+    /**
+     * Event handler called when the value changes.
+     */
+    onValueChange: (value: SliderRangeProps['value']) => void;
+    /**
+     * Event handler called when the value changes at the end of an interaction. Useful when you only need to capture a final value e.g. to update a backend service.
+     */
+    onValueCommit?: (value: SliderRangeProps['value']) => void;
+}

package/lib-esm/status/consts.d.ts

@@ -0,0 +1,4 @@
+import { type Color } from './types';
+export declare const colorsMap: Record<string, Color>;
+export declare const colorToTokenMap: Record<Color, string>;
+export declare const colors: string[];

package/lib-esm/status/consts.js

@@ -0,0 +1,25 @@
+import { SurfaceStatusSurfaceGray, SurfaceStatusSurfaceYellow, SurfaceStatusSurfaceOrange, SurfaceStatusSurfaceRed, SurfaceStatusSurfacePurple, SurfaceStatusSurfaceLightBlue, SurfaceStatusSurfaceDarkBlue, SurfaceStatusSurfaceGreen } from '@box/blueprint-web-assets/tokens/tokens';
+
+const colorsMap = {
+  SurfaceStatusSurfaceGray,
+  SurfaceStatusSurfaceYellow,
+  SurfaceStatusSurfaceOrange,
+  SurfaceStatusSurfaceRed,
+  SurfaceStatusSurfacePurple,
+  SurfaceStatusSurfaceLightBlue,
+  SurfaceStatusSurfaceDarkBlue,
+  SurfaceStatusSurfaceGreen
+};
+const colorToTokenMap = {
+  [SurfaceStatusSurfaceGray]: 'SurfaceStatusSurfaceGray',
+  [SurfaceStatusSurfaceYellow]: 'SurfaceStatusSurfaceYellow',
+  [SurfaceStatusSurfaceOrange]: 'SurfaceStatusSurfaceOrange',
+  [SurfaceStatusSurfaceRed]: 'SurfaceStatusSurfaceRed',
+  [SurfaceStatusSurfacePurple]: 'SurfaceStatusSurfacePurple',
+  [SurfaceStatusSurfaceLightBlue]: 'SurfaceStatusSurfaceLightBlue',
+  [SurfaceStatusSurfaceDarkBlue]: 'SurfaceStatusSurfaceDarkBlue',
+  [SurfaceStatusSurfaceGreen]: 'SurfaceStatusSurfaceGreen'
+};
+const colors = Object.values(colorsMap);
+
+export { colorToTokenMap, colors, colorsMap };

package/lib-esm/status/index.d.ts

@@ -0,0 +1,2 @@
+export { Status } from './status';
+export { type StatusProps } from './types';

package/lib-esm/status/status.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { type StatusProps } from './types';
+export declare const Status: import("react").ForwardRefExoticComponent<StatusProps & import("react").RefAttributes<HTMLSpanElement | HTMLButtonElement>>;

package/lib-esm/status/status.js

@@ -0,0 +1,82 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { IconIconOnLight } from '@box/blueprint-web-assets/tokens/tokens';
+import clsx from 'clsx';
+import { forwardRef, useMemo, createElement } from 'react';
+import { colorToTokenMap, colors, colorsMap } from './consts.js';
+import styles from './status.module.js';
+
+const getColorFromColorsMap = index => {
+  const colorIndex = (index || 0) % colors.length;
+  return Object.values(colorsMap)[colorIndex];
+};
+const Status = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    text,
+    hideText,
+    interactive,
+    iconPosition = 'right',
+    icon,
+    color,
+    colorIndex,
+    className,
+    'aria-label': ariaLabel,
+    ...rest
+  } = props;
+  const backgroundColor = useMemo(() => {
+    const bgColor = color || getColorFromColorsMap(colorIndex);
+    return colorToTokenMap[bgColor] || 'SurfaceStatusSurfaceGray';
+  }, [color, colorIndex]);
+  const iconElement = useMemo(() => {
+    if (!icon) {
+      return null;
+    }
+    const iconProps = {
+      width: '0.875rem',
+      height: '0.875rem',
+      color: IconIconOnLight
+    };
+    // If Status is interactive we put aria-label on the button
+    if (interactive || !interactive && !hideText && text) {
+      return /*#__PURE__*/createElement(icon, {
+        ...iconProps,
+        role: 'presentation'
+      });
+    }
+    // Not interactive, icon-only Status
+    return /*#__PURE__*/createElement(icon, {
+      ...iconProps,
+      role: 'img',
+      'aria-label': ariaLabel || text
+    });
+  }, [icon, hideText, interactive, text, ariaLabel]);
+  const contents = jsxs(Fragment, {
+    children: [text && !hideText && jsx("span", {
+      className: styles.text,
+      children: text
+    }), iconElement]
+  });
+  const commonClassName = clsx(styles.status, styles[`color${backgroundColor}`], {
+    [styles.reverse]: icon && iconPosition === 'left',
+    [styles.circle]: hideText
+  });
+  const innerElement = interactive ? jsx("button", {
+    ...rest,
+    ref: forwardedRef,
+    "aria-label": props['aria-label'] || text,
+    className: clsx(styles.interactiveStatus, commonClassName),
+    type: "button",
+    children: contents
+  }) : jsx("span", {
+    ...rest,
+    ref: forwardedRef,
+    className: commonClassName,
+    children: contents
+  });
+  return jsx("span", {
+    className: clsx(styles.maxContainer, className),
+    children: innerElement
+  });
+});
+Status.displayName = 'Status';
+
+export { Status };

package/lib-esm/status/status.module.js

@@ -0,0 +1,4 @@
+import '../index.css';
+var styles = {"interactiveStatus":"status-module_interactiveStatus__JVpMC","status":"status-module_status__ovaDk","reverse":"status-module_reverse__uEGPj","circle":"status-module_circle__amoA6","text":"status-module_text__ZNwzN","maxContainer":"status-module_maxContainer__v4jJW","colorSurfaceStatusSurfaceGray":"status-module_colorSurfaceStatusSurfaceGray__YmSqS","colorSurfaceStatusSurfaceYellow":"status-module_colorSurfaceStatusSurfaceYellow__hBUjh","colorSurfaceStatusSurfaceOrange":"status-module_colorSurfaceStatusSurfaceOrange__Q9ixI","colorSurfaceStatusSurfaceRed":"status-module_colorSurfaceStatusSurfaceRed__wdgd3","colorSurfaceStatusSurfacePurple":"status-module_colorSurfaceStatusSurfacePurple__1Uq6u","colorSurfaceStatusSurfaceLightBlue":"status-module_colorSurfaceStatusSurfaceLightBlue__HftTU","colorSurfaceStatusSurfaceDarkBlue":"status-module_colorSurfaceStatusSurfaceDarkBlue__J7PvX","colorSurfaceStatusSurfaceGreen":"status-module_colorSurfaceStatusSurfaceGreen__ibLGb"};
+
+export { styles as default };

package/lib-esm/status/types.d.ts

@@ -0,0 +1,31 @@
+import { type SurfaceStatusSurfaceDarkBlue, type SurfaceStatusSurfaceGray, type SurfaceStatusSurfaceGreen, type SurfaceStatusSurfaceLightBlue, type SurfaceStatusSurfaceOrange, type SurfaceStatusSurfacePurple, type SurfaceStatusSurfaceRed, type SurfaceStatusSurfaceYellow } from '@box/blueprint-web-assets/tokens/tokens';
+import { type FunctionComponent, type HTMLAttributes, type PropsWithChildren, type SVGProps } from 'react';
+import { type RequireExactlyOne } from 'type-fest';
+export type Color = typeof SurfaceStatusSurfaceGray | typeof SurfaceStatusSurfaceYellow | typeof SurfaceStatusSurfaceOrange | typeof SurfaceStatusSurfaceRed | typeof SurfaceStatusSurfacePurple | typeof SurfaceStatusSurfaceLightBlue | typeof SurfaceStatusSurfaceDarkBlue | typeof SurfaceStatusSurfaceGreen;
+type ColorProps = {
+    /** The color of the background. Takes precedence over colorIndex. */
+    color?: Color;
+    /** The index of the color of the status background. It will cycle through all the colors in the table.
+     * A convenience replacement for the color prop, when the color itself does not matter,
+     * and what matters is that the subsequent status-backgrounds are different
+     * It is ignored when the color prop is provided. */
+    colorIndex?: number;
+};
+type CommonProps = {
+    /** Text inside the Status. Needs to be an UPPERCASED string. */
+    text: string;
+    /** Hide the text, it is still visible to screen readers */
+    hideText?: boolean;
+    /** Should the component be interactive (button without onClick) */
+    interactive?: boolean;
+    /** Position of the icon */
+    iconPosition?: 'right' | 'left';
+    /** Icon Component to display */
+    icon?: FunctionComponent<PropsWithChildren<SVGProps<SVGSVGElement>>>;
+} & RequireExactlyOne<ColorProps>;
+export type StatusProps = (CommonProps & {
+    interactive?: false;
+} & HTMLAttributes<HTMLSpanElement>) | (CommonProps & {
+    interactive: true;
+} & HTMLAttributes<HTMLButtonElement>);
+export {};

package/lib-esm/switch/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { Legend } from './switch-legend';
+export { type LegendProps } from '../util-components/legend/types';
+export { type SwitchProps } from './types';
+export declare const Switch: {
+    Item: import("react").ForwardRefExoticComponent<import("./types").SwitchProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Legend: typeof Legend;
+};
+export default Switch;

package/lib-esm/switch/index.js

@@ -0,0 +1,9 @@
+import { Switch as Switch$1 } from './switch-item.js';
+import { Legend } from './switch-legend.js';
+
+const Switch = {
+  Item: Switch$1,
+  Legend
+};
+
+export { Switch, Switch as default };

package/lib-esm/switch/switch-item.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { type SwitchProps } from './types';
+/** Switch.Item needs to be wrapped with TooltipElement.Provider -
+    or ideally you should have your App wrapped with it. */
+export declare const Switch: import("react").ForwardRefExoticComponent<SwitchProps & import("react").RefAttributes<HTMLButtonElement>>;

package/lib-esm/switch/switch-item.js

@@ -0,0 +1,71 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as RadixSwitch from '@radix-ui/react-switch';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { TextWithInfoBadge } from '../util-components/text-with-info-badge/text-with-info-badge.js';
+import { useUniqueId } from '../utils/useUniqueId.js';
+import styles from './switch.module.js';
+
+/** Switch.Item needs to be wrapped with TooltipElement.Provider -
+    or ideally you should have your App wrapped with it. */
+const Switch = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    checked,
+    className,
+    description,
+    descriptionInfoBadgeAriaLabel,
+    descriptionInfoText,
+    disabled,
+    label,
+    labelInfoText,
+    labelInfoBadgeAriaLabel,
+    onCheckedChange,
+    rightAligned: isRightAligned,
+    ...rest
+  } = props;
+  const descriptionId = useUniqueId('description-', !!description);
+  return jsxs("div", {
+    className: clsx([styles.option], {
+      [styles.disabled]: disabled
+    }, className),
+    children: [jsxs("label", {
+      className: clsx(styles.label, {
+        [styles.rightAlign]: isRightAligned
+      }),
+      children: [jsx(RadixSwitch.Root, {
+        ...rest,
+        ref: forwardedRef,
+        "aria-describedby": descriptionId,
+        "aria-label": label,
+        checked: checked,
+        className: clsx(styles.switch, {
+          [styles.rightAlign]: isRightAligned
+        }),
+        disabled: disabled,
+        onCheckedChange: onCheckedChange,
+        title: label,
+        children: jsx(RadixSwitch.Thumb, {
+          className: styles.thumb
+        })
+      }), jsx(TextWithInfoBadge, {
+        infoBadgeAriaLabel: labelInfoBadgeAriaLabel,
+        infoText: labelInfoText,
+        variant: disabled ? 'muted' : 'default',
+        children: label
+      })]
+    }), description ? jsx("div", {
+      className: clsx(styles.description, {
+        [styles.rightAlign]: isRightAligned
+      }),
+      children: jsx(TextWithInfoBadge, {
+        id: descriptionId,
+        infoBadgeAriaLabel: descriptionInfoBadgeAriaLabel,
+        infoText: descriptionInfoText,
+        variant: "muted",
+        children: description
+      })
+    }) : null]
+  });
+});
+
+export { Switch };

package/lib-esm/switch/switch-legend.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { type LegendProps } from '../util-components/legend/types';
+export declare function Legend(props: LegendProps): JSX.Element;
+export default Legend;

package/lib-esm/switch/switch-legend.js

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import { Legend as Legend$1 } from '../util-components/legend/legend.js';
+
+function Legend(props) {
+  return jsx(Legend$1, {
+    ...props,
+    gap: "wide"
+  });
+}
+
+export { Legend, Legend as default };

package/lib-esm/switch/switch.module.js

@@ -0,0 +1,4 @@
+import '../index.css';
+var styles = {"option":"switch-module_option__dAwWj","label":"switch-module_label__Vbkvx","rightAlign":"switch-module_rightAlign__nZ5d0","description":"switch-module_description__I2U2u","switch":"switch-module_switch__Kd2d5","thumb":"switch-module_thumb__g-8Q4","disabled":"switch-module_disabled__4MlGg"};
+
+export { styles as default };