@arc-ui/components 11.1.0 → 11.2.0

package/dist/Switch/Switch.cjs.d.ts

@@ -0,0 +1,40 @@
+import { FC } from "react";
+import { SwitchProps as RadixSwitchProps } from "@radix-ui/react-switch";
+import { FormControlProps } from "../_shared/cjs/FormControl-e6b7d7c5";
+/** Use `Switch` to toggle between checked and not checked. */
+declare const Switch: FC<SwitchProps>;
+interface SwitchProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus" | "disclosureText" | "disclosureTitle" | "onClickDisclosure" | "helper"> {
+    /**
+     * Hide Label above toggle?
+     */
+    hideLabel?: boolean;
+    /**
+     * Text to display next to `Switch`
+     */
+    statusText?: string;
+    /**
+     * Should the `Switch` be disabled?
+     */
+    isDisabled?: FormControlProps["isDisabled"];
+    /**
+     * handler for blur
+     */
+    onBlur?: RadixSwitchProps["onBlur"];
+    /**
+     * set the switch to be checked by default
+     */
+    defaultChecked?: RadixSwitchProps["defaultChecked"];
+    /**
+     * value for the switch, is applied to a hidden checkbox if within a form
+     */
+    value?: RadixSwitchProps["value"];
+    /**
+     * name for the hidden checkbox if within a form
+     */
+    name?: RadixSwitchProps["name"];
+    /**
+     * callback for when the switch is toggled
+     */
+    onCheckedChange?: RadixSwitchProps["onCheckedChange"];
+}
+export { Switch };

package/dist/Switch/Switch.cjs.js

@@ -0,0 +1,210 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var index = require('../_shared/cjs/index-45bfb67b.js');
+var BtIconTickAlt2Px = require('../_shared/cjs/BtIconTickAlt2Px-b12ecc78.js');
+var Icon = require('../_shared/cjs/Icon-719d13d4.js');
+var Surface = require('../_shared/cjs/Surface-d6b8010e.js');
+var FormControl = require('../_shared/cjs/FormControl-e6b7d7c5.js');
+var VerticalSpace = require('../_shared/cjs/VerticalSpace-65ad083c.js');
+var Text = require('../_shared/cjs/Text-1d3844be.js');
+require('react-dom');
+require('../_shared/cjs/index-78b35bc1.js');
+require('../_shared/cjs/suffix-modifier-edf7851e.js');
+require('../_shared/cjs/BtIconChevronRightMid-5a38d855.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function $db6c3485150b8e66$export$1ab7ae714698c4b8(element) {
+    const [size, setSize] = React.useState(undefined);
+    BtIconTickAlt2Px.$9f79659886946c16$export$e5c5a5f917a5871c(()=>{
+        if (element) {
+            // provide size as early as possible
+            setSize({
+                width: element.offsetWidth,
+                height: element.offsetHeight
+            });
+            const resizeObserver = new ResizeObserver((entries)=>{
+                if (!Array.isArray(entries)) return;
+                 // Since we only observe the one element, we don't need to loop over the
+                // array
+                if (!entries.length) return;
+                const entry = entries[0];
+                let width;
+                let height;
+                if ('borderBoxSize' in entry) {
+                    const borderSizeEntry = entry['borderBoxSize']; // iron out differences between browsers
+                    const borderSize = Array.isArray(borderSizeEntry) ? borderSizeEntry[0] : borderSizeEntry;
+                    width = borderSize['inlineSize'];
+                    height = borderSize['blockSize'];
+                } else {
+                    // for browsers that don't support `borderBoxSize`
+                    // we calculate it ourselves to get the correct border box.
+                    width = element.offsetWidth;
+                    height = element.offsetHeight;
+                }
+                setSize({
+                    width: width,
+                    height: height
+                });
+            });
+            resizeObserver.observe(element, {
+                box: 'border-box'
+            });
+            return ()=>resizeObserver.unobserve(element)
+            ;
+        } else // We only want to reset to `undefined` when the element becomes `null`,
+        // not if it changes to another element.
+        setSize(undefined);
+    }, [
+        element
+    ]);
+    return size;
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * Switch
+ * -----------------------------------------------------------------------------------------------*/ const $6be4966fd9bbc698$var$SWITCH_NAME = 'Switch';
+const [$6be4966fd9bbc698$var$createSwitchContext, $6be4966fd9bbc698$export$cf7f5f17f69cbd43] = BtIconTickAlt2Px.$c512c27ab02ef895$export$50c7b4e9d9f19c1($6be4966fd9bbc698$var$SWITCH_NAME);
+const [$6be4966fd9bbc698$var$SwitchProvider, $6be4966fd9bbc698$var$useSwitchContext] = $6be4966fd9bbc698$var$createSwitchContext($6be4966fd9bbc698$var$SWITCH_NAME);
+const $6be4966fd9bbc698$export$b5d5cf8927ab7262 = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
+    const { __scopeSwitch: __scopeSwitch , name: name , checked: checkedProp , defaultChecked: defaultChecked , required: required , disabled: disabled , value: value = 'on' , onCheckedChange: onCheckedChange , ...switchProps } = props;
+    const [button, setButton] = React.useState(null);
+    const composedRefs = BtIconTickAlt2Px.$6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, (node)=>setButton(node)
+    );
+    const hasConsumerStoppedPropagationRef = React.useRef(false); // We set this to true by default so that events bubble to forms without JS (SSR)
+    const isFormControl = button ? Boolean(button.closest('form')) : true;
+    const [checked = false, setChecked] = BtIconTickAlt2Px.$71cd76cc60e0454e$export$6f32135080cb4c3({
+        prop: checkedProp,
+        defaultProp: defaultChecked,
+        onChange: onCheckedChange
+    });
+    return /*#__PURE__*/ React.createElement($6be4966fd9bbc698$var$SwitchProvider, {
+        scope: __scopeSwitch,
+        checked: checked,
+        disabled: disabled
+    }, /*#__PURE__*/ React.createElement(BtIconTickAlt2Px.$8927f6f2acc4f386$export$250ffa63cdc0d034.button, BtIconTickAlt2Px._extends({
+        type: "button",
+        role: "switch",
+        "aria-checked": checked,
+        "aria-required": required,
+        "data-state": $6be4966fd9bbc698$var$getState(checked),
+        "data-disabled": disabled ? '' : undefined,
+        disabled: disabled,
+        value: value
+    }, switchProps, {
+        ref: composedRefs,
+        onClick: BtIconTickAlt2Px.$e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onClick, (event)=>{
+            setChecked((prevChecked)=>!prevChecked
+            );
+            if (isFormControl) {
+                hasConsumerStoppedPropagationRef.current = event.isPropagationStopped(); // if switch is in a form, stop propagation from the button so that we only propagate
+                // one click event (from the input). We propagate changes from an input so that native
+                // form validation works and form events reflect switch updates.
+                if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();
+            }
+        })
+    })), isFormControl && /*#__PURE__*/ React.createElement($6be4966fd9bbc698$var$BubbleInput, {
+        control: button,
+        bubbles: !hasConsumerStoppedPropagationRef.current,
+        name: name,
+        value: value,
+        checked: checked,
+        required: required,
+        disabled: disabled // We transform because the input is absolutely positioned but we have
+        ,
+        style: {
+            transform: 'translateX(-100%)'
+        }
+    }));
+});
+/* -------------------------------------------------------------------------------------------------
+ * SwitchThumb
+ * -----------------------------------------------------------------------------------------------*/ const $6be4966fd9bbc698$var$THUMB_NAME = 'SwitchThumb';
+const $6be4966fd9bbc698$export$4d07bf653ea69106 = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
+    const { __scopeSwitch: __scopeSwitch , ...thumbProps } = props;
+    const context = $6be4966fd9bbc698$var$useSwitchContext($6be4966fd9bbc698$var$THUMB_NAME, __scopeSwitch);
+    return /*#__PURE__*/ React.createElement(BtIconTickAlt2Px.$8927f6f2acc4f386$export$250ffa63cdc0d034.span, BtIconTickAlt2Px._extends({
+        "data-state": $6be4966fd9bbc698$var$getState(context.checked),
+        "data-disabled": context.disabled ? '' : undefined
+    }, thumbProps, {
+        ref: forwardedRef
+    }));
+});
+/* ---------------------------------------------------------------------------------------------- */ const $6be4966fd9bbc698$var$BubbleInput = (props)=>{
+    const { control: control , checked: checked , bubbles: bubbles = true , ...inputProps } = props;
+    const ref = React.useRef(null);
+    const prevChecked = BtIconTickAlt2Px.$010c2913dbd2fe3d$export$5cae361ad82dce8b(checked);
+    const controlSize = $db6c3485150b8e66$export$1ab7ae714698c4b8(control); // Bubble checked change to parents (e.g form change event)
+    React.useEffect(()=>{
+        const input = ref.current;
+        const inputProto = window.HTMLInputElement.prototype;
+        const descriptor = Object.getOwnPropertyDescriptor(inputProto, 'checked');
+        const setChecked = descriptor.set;
+        if (prevChecked !== checked && setChecked) {
+            const event = new Event('click', {
+                bubbles: bubbles
+            });
+            setChecked.call(input, checked);
+            input.dispatchEvent(event);
+        }
+    }, [
+        prevChecked,
+        checked,
+        bubbles
+    ]);
+    return /*#__PURE__*/ React.createElement("input", BtIconTickAlt2Px._extends({
+        type: "checkbox",
+        "aria-hidden": true,
+        defaultChecked: checked
+    }, inputProps, {
+        tabIndex: -1,
+        ref: ref,
+        style: {
+            ...props.style,
+            ...controlSize,
+            position: 'absolute',
+            pointerEvents: 'none',
+            opacity: 0,
+            margin: 0
+        }
+    }));
+};
+function $6be4966fd9bbc698$var$getState(checked) {
+    return checked ? 'checked' : 'unchecked';
+}
+const $6be4966fd9bbc698$export$be92b6f5f03c0fe9 = $6be4966fd9bbc698$export$b5d5cf8927ab7262;
+const $6be4966fd9bbc698$export$6521433ed15a34db = $6be4966fd9bbc698$export$4d07bf653ea69106;
+
+/** Use `Switch` to toggle between checked and not checked. */
+var Switch = function (_a) {
+    var defaultChecked = _a.defaultChecked, onCheckedChange = _a.onCheckedChange, label = _a.label, name = _a.name, onBlur = _a.onBlur, value = _a.value, _b = _a.isDisabled, isDisabled = _b === void 0 ? false : _b, errorMessage = _a.errorMessage, id = _a.id, _c = _a.labelSize, labelSize = _c === void 0 ? "s" : _c, statusText = _a.statusText, _d = _a.hideLabel, hideLabel = _d === void 0 ? false : _d;
+    var surface = React.useContext(Surface.Context).surface;
+    return (React__default["default"].createElement(FormControl.FormControl, { errorMessage: errorMessage, htmlFor: id, isDisabled: isDisabled, label: hideLabel ? "" : label, labelSize: labelSize, requirementStatus: "not-applicable" },
+        !hideLabel && React__default["default"].createElement(VerticalSpace.VerticalSpace, { size: "8" }),
+        React__default["default"].createElement("div", { className: "arc-Switch-container" },
+            React__default["default"].createElement($6be4966fd9bbc698$export$be92b6f5f03c0fe9, { id: id, "aria-label": label, defaultChecked: defaultChecked, name: name, value: value, onBlur: onBlur, onCheckedChange: onCheckedChange, disabled: isDisabled, className: index.classNames("arc-Switch", {
+                    "arc-Switch--large": labelSize === "l",
+                    "arc-Switch--isDisabled": isDisabled,
+                    "arc-Switch--onDarkSurface": surface === "dark"
+                }) },
+                React__default["default"].createElement("div", { className: "arc-Switch-wrapper" },
+                    React__default["default"].createElement($6be4966fd9bbc698$export$6521433ed15a34db, { className: "arc-Switch-thumb" },
+                        React__default["default"].createElement("div", { className: "arc-Switch-thumbIcon" },
+                            React__default["default"].createElement("div", { className: "arc-Switch-icon", "data-testid": "arc-switch-thumb-icon" },
+                                React__default["default"].createElement(Icon.Icon, { icon: BtIconTickAlt2Px.BtIconTickAlt2Px_2, color: surface === "dark" ? "brand" : "brand", size: labelSize === "l" ? 24 : 16 })))))),
+            React__default["default"].createElement("div", { className: index.classNames("arc-Switch-statusText", {
+                    "arc-Switch-statusText--isDisabled": isDisabled,
+                    "arc-Switch-statusText--onDarkSurface": surface === "dark"
+                }) },
+                React__default["default"].createElement(Text.Text, { size: labelSize },
+                    " ",
+                    statusText,
+                    " ")))));
+};
+
+exports.Switch = Switch;

package/dist/Switch/Switch.esm.d.ts

@@ -0,0 +1,40 @@
+import { FC } from "react";
+import { SwitchProps as RadixSwitchProps } from "@radix-ui/react-switch";
+import { FormControlProps } from "../_shared/esm/FormControl-84c9ace6";
+/** Use `Switch` to toggle between checked and not checked. */
+declare const Switch: FC<SwitchProps>;
+interface SwitchProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus" | "disclosureText" | "disclosureTitle" | "onClickDisclosure" | "helper"> {
+    /**
+     * Hide Label above toggle?
+     */
+    hideLabel?: boolean;
+    /**
+     * Text to display next to `Switch`
+     */
+    statusText?: string;
+    /**
+     * Should the `Switch` be disabled?
+     */
+    isDisabled?: FormControlProps["isDisabled"];
+    /**
+     * handler for blur
+     */
+    onBlur?: RadixSwitchProps["onBlur"];
+    /**
+     * set the switch to be checked by default
+     */
+    defaultChecked?: RadixSwitchProps["defaultChecked"];
+    /**
+     * value for the switch, is applied to a hidden checkbox if within a form
+     */
+    value?: RadixSwitchProps["value"];
+    /**
+     * name for the hidden checkbox if within a form
+     */
+    name?: RadixSwitchProps["name"];
+    /**
+     * callback for when the switch is toggled
+     */
+    onCheckedChange?: RadixSwitchProps["onCheckedChange"];
+}
+export { Switch };

package/dist/Switch/Switch.esm.js

@@ -0,0 +1,202 @@
+import React__default, { useState, forwardRef, useRef, createElement, useEffect, useContext } from 'react';
+import { c as classNames } from '../_shared/esm/index-2ae58626.js';
+import { g as $9f79659886946c16$export$e5c5a5f917a5871c, $ as $c512c27ab02ef895$export$50c7b4e9d9f19c1, a as $6ed0406888f73fc4$export$c7b2cbe3552a0d05, h as $71cd76cc60e0454e$export$6f32135080cb4c3, d as $8927f6f2acc4f386$export$250ffa63cdc0d034, _ as _extends, e as $e42e1063c40fb3ef$export$b9ecd428b558ff10, i as $010c2913dbd2fe3d$export$5cae361ad82dce8b, B as BtIconTickAlt2Px_2 } from '../_shared/esm/BtIconTickAlt2Px-2c4ec3be.js';
+import { I as Icon } from '../_shared/esm/Icon-61f7237a.js';
+import { C as Context } from '../_shared/esm/Surface-bf201530.js';
+import { F as FormControl } from '../_shared/esm/FormControl-84c9ace6.js';
+import { V as VerticalSpace } from '../_shared/esm/VerticalSpace-6b4f5e50.js';
+import { T as Text } from '../_shared/esm/Text-6b958ad8.js';
+import 'react-dom';
+import '../_shared/esm/index-229fc864.js';
+import '../_shared/esm/suffix-modifier-f5e28822.js';
+import '../_shared/esm/BtIconChevronRightMid-d9b11761.js';
+
+function $db6c3485150b8e66$export$1ab7ae714698c4b8(element) {
+    const [size, setSize] = useState(undefined);
+    $9f79659886946c16$export$e5c5a5f917a5871c(()=>{
+        if (element) {
+            // provide size as early as possible
+            setSize({
+                width: element.offsetWidth,
+                height: element.offsetHeight
+            });
+            const resizeObserver = new ResizeObserver((entries)=>{
+                if (!Array.isArray(entries)) return;
+                 // Since we only observe the one element, we don't need to loop over the
+                // array
+                if (!entries.length) return;
+                const entry = entries[0];
+                let width;
+                let height;
+                if ('borderBoxSize' in entry) {
+                    const borderSizeEntry = entry['borderBoxSize']; // iron out differences between browsers
+                    const borderSize = Array.isArray(borderSizeEntry) ? borderSizeEntry[0] : borderSizeEntry;
+                    width = borderSize['inlineSize'];
+                    height = borderSize['blockSize'];
+                } else {
+                    // for browsers that don't support `borderBoxSize`
+                    // we calculate it ourselves to get the correct border box.
+                    width = element.offsetWidth;
+                    height = element.offsetHeight;
+                }
+                setSize({
+                    width: width,
+                    height: height
+                });
+            });
+            resizeObserver.observe(element, {
+                box: 'border-box'
+            });
+            return ()=>resizeObserver.unobserve(element)
+            ;
+        } else // We only want to reset to `undefined` when the element becomes `null`,
+        // not if it changes to another element.
+        setSize(undefined);
+    }, [
+        element
+    ]);
+    return size;
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * Switch
+ * -----------------------------------------------------------------------------------------------*/ const $6be4966fd9bbc698$var$SWITCH_NAME = 'Switch';
+const [$6be4966fd9bbc698$var$createSwitchContext, $6be4966fd9bbc698$export$cf7f5f17f69cbd43] = $c512c27ab02ef895$export$50c7b4e9d9f19c1($6be4966fd9bbc698$var$SWITCH_NAME);
+const [$6be4966fd9bbc698$var$SwitchProvider, $6be4966fd9bbc698$var$useSwitchContext] = $6be4966fd9bbc698$var$createSwitchContext($6be4966fd9bbc698$var$SWITCH_NAME);
+const $6be4966fd9bbc698$export$b5d5cf8927ab7262 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+    const { __scopeSwitch: __scopeSwitch , name: name , checked: checkedProp , defaultChecked: defaultChecked , required: required , disabled: disabled , value: value = 'on' , onCheckedChange: onCheckedChange , ...switchProps } = props;
+    const [button, setButton] = useState(null);
+    const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, (node)=>setButton(node)
+    );
+    const hasConsumerStoppedPropagationRef = useRef(false); // We set this to true by default so that events bubble to forms without JS (SSR)
+    const isFormControl = button ? Boolean(button.closest('form')) : true;
+    const [checked = false, setChecked] = $71cd76cc60e0454e$export$6f32135080cb4c3({
+        prop: checkedProp,
+        defaultProp: defaultChecked,
+        onChange: onCheckedChange
+    });
+    return /*#__PURE__*/ createElement($6be4966fd9bbc698$var$SwitchProvider, {
+        scope: __scopeSwitch,
+        checked: checked,
+        disabled: disabled
+    }, /*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.button, _extends({
+        type: "button",
+        role: "switch",
+        "aria-checked": checked,
+        "aria-required": required,
+        "data-state": $6be4966fd9bbc698$var$getState(checked),
+        "data-disabled": disabled ? '' : undefined,
+        disabled: disabled,
+        value: value
+    }, switchProps, {
+        ref: composedRefs,
+        onClick: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onClick, (event)=>{
+            setChecked((prevChecked)=>!prevChecked
+            );
+            if (isFormControl) {
+                hasConsumerStoppedPropagationRef.current = event.isPropagationStopped(); // if switch is in a form, stop propagation from the button so that we only propagate
+                // one click event (from the input). We propagate changes from an input so that native
+                // form validation works and form events reflect switch updates.
+                if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();
+            }
+        })
+    })), isFormControl && /*#__PURE__*/ createElement($6be4966fd9bbc698$var$BubbleInput, {
+        control: button,
+        bubbles: !hasConsumerStoppedPropagationRef.current,
+        name: name,
+        value: value,
+        checked: checked,
+        required: required,
+        disabled: disabled // We transform because the input is absolutely positioned but we have
+        ,
+        style: {
+            transform: 'translateX(-100%)'
+        }
+    }));
+});
+/* -------------------------------------------------------------------------------------------------
+ * SwitchThumb
+ * -----------------------------------------------------------------------------------------------*/ const $6be4966fd9bbc698$var$THUMB_NAME = 'SwitchThumb';
+const $6be4966fd9bbc698$export$4d07bf653ea69106 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+    const { __scopeSwitch: __scopeSwitch , ...thumbProps } = props;
+    const context = $6be4966fd9bbc698$var$useSwitchContext($6be4966fd9bbc698$var$THUMB_NAME, __scopeSwitch);
+    return /*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.span, _extends({
+        "data-state": $6be4966fd9bbc698$var$getState(context.checked),
+        "data-disabled": context.disabled ? '' : undefined
+    }, thumbProps, {
+        ref: forwardedRef
+    }));
+});
+/* ---------------------------------------------------------------------------------------------- */ const $6be4966fd9bbc698$var$BubbleInput = (props)=>{
+    const { control: control , checked: checked , bubbles: bubbles = true , ...inputProps } = props;
+    const ref = useRef(null);
+    const prevChecked = $010c2913dbd2fe3d$export$5cae361ad82dce8b(checked);
+    const controlSize = $db6c3485150b8e66$export$1ab7ae714698c4b8(control); // Bubble checked change to parents (e.g form change event)
+    useEffect(()=>{
+        const input = ref.current;
+        const inputProto = window.HTMLInputElement.prototype;
+        const descriptor = Object.getOwnPropertyDescriptor(inputProto, 'checked');
+        const setChecked = descriptor.set;
+        if (prevChecked !== checked && setChecked) {
+            const event = new Event('click', {
+                bubbles: bubbles
+            });
+            setChecked.call(input, checked);
+            input.dispatchEvent(event);
+        }
+    }, [
+        prevChecked,
+        checked,
+        bubbles
+    ]);
+    return /*#__PURE__*/ createElement("input", _extends({
+        type: "checkbox",
+        "aria-hidden": true,
+        defaultChecked: checked
+    }, inputProps, {
+        tabIndex: -1,
+        ref: ref,
+        style: {
+            ...props.style,
+            ...controlSize,
+            position: 'absolute',
+            pointerEvents: 'none',
+            opacity: 0,
+            margin: 0
+        }
+    }));
+};
+function $6be4966fd9bbc698$var$getState(checked) {
+    return checked ? 'checked' : 'unchecked';
+}
+const $6be4966fd9bbc698$export$be92b6f5f03c0fe9 = $6be4966fd9bbc698$export$b5d5cf8927ab7262;
+const $6be4966fd9bbc698$export$6521433ed15a34db = $6be4966fd9bbc698$export$4d07bf653ea69106;
+
+/** Use `Switch` to toggle between checked and not checked. */
+var Switch = function (_a) {
+    var defaultChecked = _a.defaultChecked, onCheckedChange = _a.onCheckedChange, label = _a.label, name = _a.name, onBlur = _a.onBlur, value = _a.value, _b = _a.isDisabled, isDisabled = _b === void 0 ? false : _b, errorMessage = _a.errorMessage, id = _a.id, _c = _a.labelSize, labelSize = _c === void 0 ? "s" : _c, statusText = _a.statusText, _d = _a.hideLabel, hideLabel = _d === void 0 ? false : _d;
+    var surface = useContext(Context).surface;
+    return (React__default.createElement(FormControl, { errorMessage: errorMessage, htmlFor: id, isDisabled: isDisabled, label: hideLabel ? "" : label, labelSize: labelSize, requirementStatus: "not-applicable" },
+        !hideLabel && React__default.createElement(VerticalSpace, { size: "8" }),
+        React__default.createElement("div", { className: "arc-Switch-container" },
+            React__default.createElement($6be4966fd9bbc698$export$be92b6f5f03c0fe9, { id: id, "aria-label": label, defaultChecked: defaultChecked, name: name, value: value, onBlur: onBlur, onCheckedChange: onCheckedChange, disabled: isDisabled, className: classNames("arc-Switch", {
+                    "arc-Switch--large": labelSize === "l",
+                    "arc-Switch--isDisabled": isDisabled,
+                    "arc-Switch--onDarkSurface": surface === "dark"
+                }) },
+                React__default.createElement("div", { className: "arc-Switch-wrapper" },
+                    React__default.createElement($6be4966fd9bbc698$export$6521433ed15a34db, { className: "arc-Switch-thumb" },
+                        React__default.createElement("div", { className: "arc-Switch-thumbIcon" },
+                            React__default.createElement("div", { className: "arc-Switch-icon", "data-testid": "arc-switch-thumb-icon" },
+                                React__default.createElement(Icon, { icon: BtIconTickAlt2Px_2, color: surface === "dark" ? "brand" : "brand", size: labelSize === "l" ? 24 : 16 })))))),
+            React__default.createElement("div", { className: classNames("arc-Switch-statusText", {
+                    "arc-Switch-statusText--isDisabled": isDisabled,
+                    "arc-Switch-statusText--onDarkSurface": surface === "dark"
+                }) },
+                React__default.createElement(Text, { size: labelSize },
+                    " ",
+                    statusText,
+                    " ")))));
+};
+
+export { Switch };

package/dist/Switch/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@arc-ui/switch",
+  "types": "./Switch.esm.d.ts",
+  "main": "./Switch.cjs.js",
+  "module": "./Switch.esm.js",
+  "private": true
+}

package/dist/VerticalSpace/VerticalSpace.cjs.d.ts

@@ -1,18 +1 @@
-import { FC } from "react";
-/**
- * Use `VerticalSpace` to create vertical space between components.
- */
-declare const VerticalSpace: FC<VerticalSpaceProps>;
-type VerticalSpaceSize = "4" | "8" | "12" | "16" | "24" | "32" | "48" | "64" | "96" | "128";
-interface VerticalSpaceProps {
-    /**
-     * Should the VerticalSpace be visible for debugging and documentation
-     * purposes?
-     */
-    isDebugVisible?: boolean;
-    /**
-     * Size of the VerticalSpace.
-     */
-    size?: VerticalSpaceSize;
-}
-export { VerticalSpace };
+export { VerticalSpace } from "../_shared/cjs/VerticalSpace-65ad083c";

package/dist/VerticalSpace/VerticalSpace.cjs.js

@@ -2,26 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('../_shared/cjs/index-78b35bc1.js');
-var index$1 = require('../_shared/cjs/index-45bfb67b.js');
-var React = require('react');
+var VerticalSpace = require('../_shared/cjs/VerticalSpace-65ad083c.js');
+require('../_shared/cjs/index-78b35bc1.js');
+require('../_shared/cjs/index-45bfb67b.js');
+require('react');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-/**
- * Use `VerticalSpace` to create vertical space between components.
- */
-var VerticalSpace = function (_a) {
-    var _b;
-    var _c = _a.isDebugVisible, isDebugVisible = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? "24" : _d, props = index.__rest(_a, ["isDebugVisible", "size"]);
-    return (React__default["default"].createElement("div", index.__assign({ className: index$1.classNames((_b = {
-                "arc-VerticalSpace": true
-            },
-            _b["arc-VerticalSpace--size".concat(size)] = size && size !== "24",
-            _b["arc-VerticalSpace--debugVisible"] = isDebugVisible,
-            _b)) }, index.filterDataAttrs(props))));
-};
-
-exports.VerticalSpace = VerticalSpace;
+exports.VerticalSpace = VerticalSpace.VerticalSpace;

package/dist/VerticalSpace/VerticalSpace.esm.d.ts

@@ -1,18 +1 @@
-import { FC } from "react";
-/**
- * Use `VerticalSpace` to create vertical space between components.
- */
-declare const VerticalSpace: FC<VerticalSpaceProps>;
-type VerticalSpaceSize = "4" | "8" | "12" | "16" | "24" | "32" | "48" | "64" | "96" | "128";
-interface VerticalSpaceProps {
-    /**
-     * Should the VerticalSpace be visible for debugging and documentation
-     * purposes?
-     */
-    isDebugVisible?: boolean;
-    /**
-     * Size of the VerticalSpace.
-     */
-    size?: VerticalSpaceSize;
-}
-export { VerticalSpace };
+export { VerticalSpace } from "../_shared/esm/VerticalSpace-6b4f5e50";

package/dist/VerticalSpace/VerticalSpace.esm.js

@@ -1,19 +1,4 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/index-229fc864.js';
-import { c as classNames } from '../_shared/esm/index-2ae58626.js';
-import React__default from 'react';
-
-/**
- * Use `VerticalSpace` to create vertical space between components.
- */
-var VerticalSpace = function (_a) {
-    var _b;
-    var _c = _a.isDebugVisible, isDebugVisible = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? "24" : _d, props = __rest(_a, ["isDebugVisible", "size"]);
-    return (React__default.createElement("div", __assign({ className: classNames((_b = {
-                "arc-VerticalSpace": true
-            },
-            _b["arc-VerticalSpace--size".concat(size)] = size && size !== "24",
-            _b["arc-VerticalSpace--debugVisible"] = isDebugVisible,
-            _b)) }, filterDataAttrs(props))));
-};
-
-export { VerticalSpace };
+export { V as VerticalSpace } from '../_shared/esm/VerticalSpace-6b4f5e50.js';
+import '../_shared/esm/index-229fc864.js';
+import '../_shared/esm/index-2ae58626.js';
+import 'react';