musae 0.2.26 → 0.3.0

package/dist/components/steps/item.cjs

@@ -0,0 +1,237 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var React = require('react');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var useClassNames = require('../../hooks/use-class-names.cjs');
+var className = require('../../utils/class-name.cjs');
+var tokens_stylex = require('../theme/tokens.stylex.cjs');
+var hooks = require('../theme/hooks.cjs');
+var colors = require('../../utils/colors.cjs');
+var relax = require('@aiszlab/relax');
+var context = require('./context.cjs');
+var theme = require('../theme/theme.cjs');
+var componentToken = require('../../utils/component-token.cjs');
+var done = require('../icon/icons/action/done.cjs');
+
+var styles = {
+  step: {
+    "default": {
+      flex: "musaex-98rzlu",
+      flexGrow: null,
+      flexShrink: null,
+      flexBasis: null,
+      display: "musaex-rvj5dj",
+      alignItems: "musaex-6s0dn4",
+      columnGap: "musaex-16ree33",
+      overflow: "musaex-b3r6kr",
+      overflowX: null,
+      overflowY: null,
+      gridTemplateAreas: "musaex-1tdxyq7",
+      gridTemplateColumns: "musaex-1pmbctz",
+      $$css: true
+    },
+    clickable: {
+      cursor: "musaex-1ypdohk",
+      $$css: true
+    }
+  },
+  leading: {
+    "default": {
+      gridArea: "musaex-1kxrqrs",
+      gridRow: null,
+      gridRowStart: null,
+      gridRowEnd: null,
+      gridColumn: null,
+      gridColumnStart: null,
+      gridColumnEnd: null,
+      $$css: true
+    },
+    tail: function tail(props) {
+      return [{
+        position: "musaex-1n2onr6",
+        "::after_content": "musaex-1s928wv",
+        "::after_position": "musaex-1j6awrg",
+        "::after_height": "musaex-1pqslh",
+        "::after_width": "musaex-1nvgkt6",
+        "::after_backgroundColor": "musaex-27d4w3",
+        "::after_top": "musaex-1srwf7z",
+        "::after_insetInlineStart": "musaex-mjsi9j",
+        "::after_left": null,
+        "::after_right": null,
+        "::after_marginTop": "musaex-celglb",
+        $$css: true
+      }, {
+        "--15iyedw": props.color != null ? props.color : "initial"
+      }];
+    }
+  },
+  sign: {
+    "default": function _default(props) {
+      var _props$size, _props$size2;
+      return [{
+        display: "musaex-78zum5",
+        justifyContent: "musaex-l56j7k",
+        alignItems: "musaex-6s0dn4",
+        borderRadius: "musaex-z7qqyb",
+        borderStartStartRadius: null,
+        borderStartEndRadius: null,
+        borderEndStartRadius: null,
+        borderEndEndRadius: null,
+        borderTopLeftRadius: null,
+        borderTopRightRadius: null,
+        borderBottomLeftRadius: null,
+        borderBottomRightRadius: null,
+        overflow: "musaex-b3r6kr",
+        overflowX: null,
+        overflowY: null,
+        width: "musaex-17fnjtu",
+        height: "musaex-1jwls1v",
+        $$css: true
+      }, {
+        "--width": function (val) {
+          return typeof val === "number" ? val + "px" : val != null ? val : "initial";
+        }((_props$size = props.size) !== null && _props$size !== void 0 ? _props$size : tokens_stylex.sizes.xsmall),
+        "--height": function (val) {
+          return typeof val === "number" ? val + "px" : val != null ? val : "initial";
+        }((_props$size2 = props.size) !== null && _props$size2 !== void 0 ? _props$size2 : tokens_stylex.sizes.xsmall)
+      }];
+    },
+    doing: function doing(props) {
+      return [{
+        backgroundColor: "musaex-q1mx2j",
+        color: "musaex-19dipnz",
+        $$css: true
+      }, {
+        "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial",
+        "--color": props.color != null ? props.color : "initial"
+      }];
+    },
+    done: function done(props) {
+      return [{
+        backgroundColor: "musaex-q1mx2j",
+        color: "musaex-19dipnz",
+        $$css: true
+      }, {
+        "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial",
+        "--color": props.color != null ? props.color : "initial"
+      }];
+    },
+    todo: function todo(props) {
+      return [{
+        backgroundColor: "musaex-q1mx2j",
+        color: "musaex-19dipnz",
+        $$css: true
+      }, {
+        "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial",
+        "--color": props.color != null ? props.color : "initial"
+      }];
+    }
+  },
+  title: {
+    "default": {
+      gridArea: "musaex-nyuz70",
+      gridRow: null,
+      gridRowStart: null,
+      gridRowEnd: null,
+      gridColumn: null,
+      gridColumnStart: null,
+      gridColumnEnd: null,
+      alignItems: "musaex-6s0dn4",
+      $$css: true
+    },
+    tail: function tail(props) {
+      return [{
+        position: "musaex-1n2onr6",
+        "::after_content": "musaex-1s928wv",
+        "::after_position": "musaex-1j6awrg",
+        "::after_height": "musaex-vcvfbm",
+        "::after_width": "musaex-1iylo5z",
+        "::after_backgroundColor": "musaex-27d4w3",
+        "::after_marginInlineStart": "musaex-1lqtclb",
+        "::after_marginLeft": null,
+        "::after_marginRight": null,
+        "::after_top": "musaex-18dmf5x",
+        $$css: true
+      }, {
+        "--15iyedw": props.color != null ? props.color : "initial"
+      }];
+    }
+  },
+  description: {
+    "default": {
+      gridArea: "musaex-19tbii3",
+      gridRow: null,
+      gridRowStart: null,
+      gridRowEnd: null,
+      gridColumn: null,
+      gridColumnStart: null,
+      gridColumnEnd: null,
+      $$css: true
+    }
+  }
+};
+var Item = function Item(_ref) {
+  var leading = _ref.leading,
+    title = _ref.title,
+    description = _ref.description,
+    value = _ref.value;
+  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Steps);
+  var theme$1 = hooks.useTheme();
+  var _useContext = React.useContext(context.Context),
+    type = _useContext.type,
+    onChange = _useContext.onChange,
+    _value = _useContext.value,
+    max = _useContext.max,
+    size = _useContext.size;
+  var status = _value < value ? "todo" : _value === value ? "doing" : "done";
+  var isClickable = !!onChange && status !== "doing";
+  var isHorizontal = type === "horizontal";
+  var isVertical = type === "vertical";
+  var isMax = value === max;
+  var styled = {
+    step: stylex.default.props(styles.step["default"], isClickable && styles.step.clickable),
+    leading: stylex.default.props(styles.leading["default"], isVertical && !isMax && styles.leading.tail({
+      color: theme$1.colors[colors.ColorToken.Primary]
+    })),
+    sign: stylex.default.props(styles.sign["default"]({
+      size: size
+    }), status === "doing" && styles.sign.doing({
+      backgroundColor: theme$1.colors[colors.ColorToken.Primary],
+      color: theme$1.colors[colors.ColorToken.OnPrimary]
+    }), status === "done" && styles.sign.done({
+      backgroundColor: theme$1.colors[colors.ColorToken.PrimaryContainer],
+      color: theme$1.colors[colors.ColorToken.OnPrimaryContainer]
+    }), status === "todo" && styles.sign.todo({
+      backgroundColor: theme$1.colors[colors.ColorToken.Secondary],
+      color: theme$1.colors[colors.ColorToken.OnSecondary]
+    })),
+    title: stylex.default.props(theme.typography.title.medium, styles.title["default"], isHorizontal && !isMax && styles.title.tail({
+      color: theme$1.colors[colors.ColorToken.Primary]
+    })),
+    description: stylex.default.props(theme.typography.body.medium, styles.description["default"])
+  };
+  var click = relax.useEvent(function () {
+    if (!isClickable) return;
+    onChange(value);
+  });
+  return /*#__PURE__*/React.createElement("li", {
+    className: relax.clsx(classNames[className.StepsClassToken.Item], _defineProperty(_defineProperty(_defineProperty({}, classNames[className.StepsClassToken.Done], status === "done"), classNames[className.StepsClassToken.Doing], status === "doing"), classNames[className.StepsClassToken.Todo], status === "todo"), styled.step.className),
+    style: styled.step.style,
+    onClick: click
+  }, /*#__PURE__*/React.createElement("div", {
+    className: relax.clsx(classNames[className.StepsClassToken.Leading], styled.leading.className),
+    style: styled.leading.style
+  }, /*#__PURE__*/React.createElement("div", {
+    className: relax.clsx(classNames[className.StepsClassToken.Sign], styled.sign.className),
+    style: styled.sign.style
+  }, leading !== null && leading !== void 0 ? leading : status === "done" ? /*#__PURE__*/React.createElement(done.default, null) : value)), /*#__PURE__*/React.createElement("div", {
+    className: relax.clsx(classNames[className.StepsClassToken.Title], styled.title.className),
+    style: styled.title.style
+  }, title), /*#__PURE__*/React.createElement("div", {
+    className: relax.clsx(classNames[className.StepsClassToken.Description], styled.description.className),
+    style: styled.description.style
+  }, description));
+};
+
+exports.default = Item;

package/dist/components/steps/{item.js → item.mjs}

@@ -1,16 +1,16 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import React, { useContext } from 'react';
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
-import { useClassNames } from '../../hooks/use-class-names.js';
-import { StepsClassToken } from '../../utils/class-name.js';
-import { sizes } from '../theme/tokens.stylex.js';
-import { useTheme } from '../theme/hooks.js';
-import { ColorToken } from '../../utils/colors.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { StepsClassToken } from '../../utils/class-name.mjs';
+import { sizes } from '../theme/tokens.stylex.mjs';
+import { useTheme } from '../theme/hooks.mjs';
+import { ColorToken } from '../../utils/colors.mjs';
 import { useEvent, clsx } from '@aiszlab/relax';
-import { Context } from './context.js';
-import { typography } from '../theme/theme.js';
-import { ComponentToken } from '../../utils/component-token.js';
-import Done from '../icon/icons/action/done.js';
+import { Context } from './context.mjs';
+import { typography } from '../theme/theme.mjs';
+import { ComponentToken } from '../../utils/component-token.mjs';
+import Done from '../icon/icons/action/done.mjs';
 
 var styles = {
   step: {

package/dist/components/steps/steps.cjs

@@ -0,0 +1,78 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var React = require('react');
+var item = require('./item.cjs');
+var useClassNames = require('../../hooks/use-class-names.cjs');
+var className = require('../../utils/class-name.cjs');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var relax = require('@aiszlab/relax');
+var context = require('./context.cjs');
+var componentToken = require('../../utils/component-token.cjs');
+
+var styles = {
+  steps: {
+    display: "musaex-78zum5",
+    alignItems: "musaex-1cy8zhl",
+    gap: "musaex-1lsrmdg",
+    rowGap: null,
+    columnGap: null,
+    $$css: true
+  },
+  horizontal: {
+    flexDirection: "musaex-1q0g3np",
+    $$css: true
+  },
+  vertical: {
+    flexDirection: "musaex-dt5ytf",
+    $$css: true
+  }
+};
+/**
+ * @description
+ * `Steps` component
+ *
+ * design by:
+ * 1. `Steps` only be controlled
+ * 2. render by `items` prop
+ */
+var Steps = function Steps(_ref) {
+  var items = _ref.items,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? 0 : _ref$value,
+    className$1 = _ref.className,
+    style = _ref.style,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? "horizontal" : _ref$type,
+    onChange = _ref.onChange,
+    size = _ref.size;
+  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Steps);
+  var styled = {
+    steps: stylex.default.props(styles.steps, styles[type])
+  };
+  var contextValue = React.useMemo(function () {
+    return {
+      type: type,
+      onChange: onChange,
+      max: items.length - 1,
+      value: value,
+      size: size
+    };
+  }, [type, onChange, items.length, value, size]);
+  return /*#__PURE__*/React.createElement(context.Context.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement("ol", {
+    className: relax.clsx(classNames[className.StepsClassToken.Steps], className$1, styled.steps.className),
+    style: _objectSpread(_objectSpread({}, styled.steps.style), style)
+  }, items.map(function (item$1, index) {
+    return /*#__PURE__*/React.createElement(item.default, {
+      value: index,
+      title: item$1.title,
+      leading: item$1.leading,
+      key: index,
+      description: item$1.description
+    });
+  })));
+};
+
+exports.default = Steps;

package/dist/components/steps/{steps.js → steps.mjs}

@@ -1,12 +1,12 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import React, { useMemo } from 'react';
-import Item from './item.js';
-import { useClassNames } from '../../hooks/use-class-names.js';
-import { StepsClassToken } from '../../utils/class-name.js';
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import Item from './item.mjs';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { StepsClassToken } from '../../utils/class-name.mjs';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { clsx } from '@aiszlab/relax';
-import { Context } from './context.js';
-import { ComponentToken } from '../../utils/component-token.js';
+import { Context } from './context.mjs';
+import { ComponentToken } from '../../utils/component-token.mjs';
 
 var styles = {
   steps: {
@@ -72,6 +72,5 @@ var Steps = function Steps(_ref) {
     });
   })));
 };
-var Steps$1 = Steps;
 
-export { Steps$1 as default };
+export { Steps as default };

package/dist/components/steps/types.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import type { ComponentProps } from "../../types/element";
+import type { ComponentProps } from "musae/types/element";
 export type Status = "done" | "doing" | "todo";
 export type Type = "horizontal" | "vertical";
 /**

package/dist/components/switch/switch.cjs

@@ -0,0 +1,311 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var React = require('react');
+var relax = require('@aiszlab/relax');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var hooks = require('../theme/hooks.cjs');
+var colors = require('../../utils/colors.cjs');
+var useClassNames = require('../../hooks/use-class-names.cjs');
+var className = require('../../utils/class-name.cjs');
+var layer = require('../../utils/layer.cjs');
+var componentToken = require('../../utils/component-token.cjs');
+var check = require('../icon/icons/navigation/check.cjs');
+var close = require('../icon/icons/navigation/close.cjs');
+
+var styles = {
+  "switch": {
+    "default": function _default(props) {
+      return [{
+        minWidth: "musaex-sffz45",
+        width: "musaex-eq5yr9",
+        height: "musaex-1dql3xx",
+        display: "musaex-78zum5",
+        alignItems: "musaex-6s0dn4",
+        position: "musaex-1n2onr6",
+        transitionProperty: "musaex-fagghw",
+        transitionDuration: "musaex-13dflua",
+        borderRadius: "musaex-z7qqyb",
+        borderStartStartRadius: null,
+        borderStartEndRadius: null,
+        borderEndStartRadius: null,
+        borderEndEndRadius: null,
+        borderTopLeftRadius: null,
+        borderTopRightRadius: null,
+        borderBottomLeftRadius: null,
+        borderBottomRightRadius: null,
+        borderWidth: "musaex-5o417m",
+        borderInlineWidth: null,
+        borderInlineStartWidth: null,
+        borderLeftWidth: null,
+        borderInlineEndWidth: null,
+        borderRightWidth: null,
+        borderBlockWidth: null,
+        borderTopWidth: null,
+        borderBottomWidth: null,
+        borderStyle: "musaex-1y0btm7",
+        borderInlineStyle: null,
+        borderInlineStartStyle: null,
+        borderLeftStyle: null,
+        borderInlineEndStyle: null,
+        borderRightStyle: null,
+        borderBlockStyle: null,
+        borderTopStyle: null,
+        borderBottomStyle: null,
+        borderColor: "musaex-eqt46j",
+        borderInlineColor: null,
+        borderInlineStartColor: null,
+        borderLeftColor: null,
+        borderInlineEndColor: null,
+        borderRightColor: null,
+        borderBlockColor: null,
+        borderTopColor: null,
+        borderBottomColor: null,
+        backgroundColor: "musaex-q1mx2j",
+        color: "musaex-19dipnz",
+        $$css: true
+      }, {
+        "--borderColor": props.borderColor != null ? props.borderColor : "initial",
+        "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial",
+        "--color": props.color != null ? props.color : "initial"
+      }];
+    },
+    checked: function checked(props) {
+      return [{
+        borderColor: "musaex-9r1u3d",
+        borderInlineColor: null,
+        borderInlineStartColor: null,
+        borderLeftColor: null,
+        borderInlineEndColor: null,
+        borderRightColor: null,
+        borderBlockColor: null,
+        borderTopColor: null,
+        borderBottomColor: null,
+        backgroundColor: "musaex-q1mx2j",
+        color: "musaex-19dipnz",
+        $$css: true
+      }, {
+        "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial",
+        "--color": props.color != null ? props.color : "initial"
+      }];
+    },
+    disabled: {
+      cursor: "musaex-1h6gzvc",
+      $$css: true
+    }
+  },
+  slider: {
+    normal: function normal(props) {
+      return [{
+        borderRadius: "musaex-z7qqyb",
+        borderStartStartRadius: null,
+        borderStartEndRadius: null,
+        borderEndStartRadius: null,
+        borderEndEndRadius: null,
+        borderTopLeftRadius: null,
+        borderTopRightRadius: null,
+        borderBottomLeftRadius: null,
+        borderBottomRightRadius: null,
+        position: "musaex-10l6tqk",
+        transition: "musaex-1ng1d19",
+        transitionBehavior: null,
+        transitionDelay: null,
+        transitionDuration: null,
+        transitionProperty: null,
+        transitionTimingFunction: null,
+        backgroundColor: "musaex-q1mx2j",
+        color: "musaex-19dipnz",
+        height: "musaex-9al7vl",
+        width: "musaex-u8rtl",
+        insetInlineStart: "musaex-b7xnko",
+        left: null,
+        right: null,
+        display: "musaex-78zum5",
+        alignItems: "musaex-6s0dn4",
+        justifyContent: "musaex-l56j7k",
+        $$css: true
+      }, {
+        "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial",
+        "--color": props.color != null ? props.color : "initial"
+      }];
+    },
+    icon: {
+      height: "musaex-q5eura",
+      width: "musaex-6hukdw",
+      insetInlineStart: "musaex-1nisehl",
+      left: null,
+      right: null,
+      $$css: true
+    },
+    disabled: {
+      opacity: "musaex-niy1rt",
+      $$css: true
+    },
+    checked: function checked(props) {
+      return [{
+        backgroundColor: "musaex-q1mx2j",
+        color: "musaex-19dipnz",
+        height: "musaex-q5eura",
+        width: "musaex-6hukdw",
+        opacity: null,
+        insetInlineStart: "musaex-1tlvwwf",
+        left: null,
+        right: null,
+        $$css: true
+      }, {
+        "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial",
+        "--color": props.color != null ? props.color : "initial"
+      }];
+    }
+  },
+  // supporting container styles
+  supporting: {
+    "default": {
+      height: "musaex-1xj1dsn",
+      width: "musaex-1k094eu",
+      overflow: "musaex-b3r6kr",
+      overflowX: null,
+      overflowY: null,
+      display: "musaex-78zum5",
+      flexDirection: "musaex-dt5ytf",
+      color: "musaex-1heor9g",
+      transitionProperty: "musaex-bjh9w0",
+      transitionDuration: "musaex-13dflua",
+      paddingInlineStart: "musaex-1m1uyq8",
+      paddingLeft: null,
+      paddingRight: null,
+      paddingInlineEnd: "musaex-1jw8hb",
+      $$css: true
+    },
+    checked: {
+      paddingInlineStart: "musaex-rjmplk",
+      paddingLeft: null,
+      paddingRight: null,
+      paddingInlineEnd: "musaex-naytfa",
+      $$css: true
+    },
+    child: {
+      height: "musaex-1xj1dsn",
+      display: "musaex-78zum5",
+      flexDirection: "musaex-1q0g3np",
+      alignItems: "musaex-6s0dn4",
+      color: "musaex-1heor9g",
+      transitionProperty: "musaex-1ve1rmq",
+      transitionDuration: "musaex-13dflua",
+      $$css: true
+    }
+  },
+  leading: {
+    "default": {
+      marginInlineStart: "musaex-xsxsn7",
+      marginLeft: null,
+      marginRight: null,
+      marginInlineEnd: "musaex-1kwx3ox",
+      $$css: true
+    },
+    checked: {
+      marginInlineStart: "musaex-1lziwak",
+      marginLeft: null,
+      marginRight: null,
+      marginInlineEnd: "musaex-14z9mp",
+      $$css: true
+    }
+  },
+  trailing: {
+    "default": {
+      marginTop: "musaex-185trme",
+      marginInlineEnd: "musaex-14z9mp",
+      marginLeft: null,
+      marginRight: null,
+      marginInlineStart: "musaex-1lziwak",
+      $$css: true
+    },
+    checked: {
+      marginInlineEnd: "musaex-1rjh17g",
+      marginLeft: null,
+      marginRight: null,
+      marginInlineStart: "musaex-1bec1b4",
+      $$css: true
+    }
+  }
+};
+var Switch = function Switch(_ref) {
+  var value = _ref.value,
+    style = _ref.style,
+    className$1 = _ref.className,
+    _ref$icon = _ref.icon,
+    icon = _ref$icon === void 0 ? false : _ref$icon,
+    checkedChildren = _ref.checkedChildren,
+    uncheckedChildren = _ref.uncheckedChildren,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    onChange = _ref.onChange;
+  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Switch);
+  var _useControlledState = relax.useControlledState(value),
+    _useControlledState2 = _slicedToArray(_useControlledState, 2),
+    isChecked = _useControlledState2[0],
+    setIsChecked = _useControlledState2[1];
+  var theme = hooks.useTheme();
+  var toggle = relax.useEvent(function () {
+    var _isChecked = !isChecked;
+    setIsChecked(_isChecked);
+    onChange === null || onChange === void 0 || onChange(_isChecked);
+  });
+  var styled = {
+    "switch": stylex.default.props(styles["switch"]["default"](_objectSpread({
+      borderColor: theme.colors[colors.ColorToken.Outline],
+      backgroundColor: theme.colors[colors.ColorToken.SurfaceContainerHighest],
+      color: theme.colors[colors.ColorToken.OnSurfaceVariant]
+    }, disabled && {
+      borderColor: layer.layer(theme.colors[colors.ColorToken.OnSurface], "medium"),
+      backgroundColor: layer.layer(theme.colors[colors.ColorToken.SurfaceVariant], "medium"),
+      color: layer.layer(theme.colors[colors.ColorToken.OnSurface], "thicker")
+    })), isChecked && styles["switch"].checked(_objectSpread({
+      backgroundColor: theme.colors[colors.ColorToken.Primary],
+      color: theme.colors[colors.ColorToken.OnPrimary]
+    }, disabled && {
+      backgroundColor: layer.layer(theme.colors[colors.ColorToken.OnSurface], "medium"),
+      color: theme.colors[colors.ColorToken.Surface]
+    })), disabled && styles["switch"].disabled),
+    slider: stylex.default.props(styles.slider.normal(_objectSpread({
+      backgroundColor: theme.colors[colors.ColorToken.OnSurfaceVariant],
+      color: theme.colors[colors.ColorToken.SurfaceContainerHighest]
+    }, disabled && {
+      backgroundColor: layer.layer(theme.colors[colors.ColorToken.OnSurface], "thicker"),
+      color: theme.colors[colors.ColorToken.SurfaceContainerHighest]
+    })), icon && styles.slider.icon, disabled && styles.slider.disabled, isChecked && styles.slider.checked(_objectSpread({
+      backgroundColor: theme.colors[colors.ColorToken.OnPrimary],
+      color: theme.colors[colors.ColorToken.OnPrimaryContainer]
+    }, disabled && {
+      backgroundColor: theme.colors[colors.ColorToken.Surface],
+      color: layer.layer(theme.colors[colors.ColorToken.OnSurface], "thicker")
+    }))),
+    supporting: stylex.default.props(styles.supporting["default"], isChecked && styles.supporting.checked),
+    leading: stylex.default.props(styles.supporting.child, styles.leading["default"], isChecked && styles.leading.checked),
+    trailing: stylex.default.props(styles.supporting.child, styles.trailing["default"], isChecked && styles.trailing.checked)
+  };
+  return /*#__PURE__*/React.createElement("button", {
+    role: "switch",
+    type: "button",
+    disabled: disabled,
+    "aria-checked": isChecked,
+    onClick: toggle,
+    className: relax.clsx(classNames[className.SwitchClassToken.Switch], className$1, styled["switch"].className),
+    style: _objectSpread(_objectSpread({}, styled["switch"].style), style)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: relax.clsx(classNames[className.SwitchClassToken.Slider], styled.slider.className),
+    style: styled.slider.style
+  }, icon && (isChecked ? /*#__PURE__*/React.createElement(check.default, null) : /*#__PURE__*/React.createElement(close.default, null))), /*#__PURE__*/React.createElement("span", {
+    className: relax.clsx(classNames[className.SwitchClassToken.Supporting], styled.supporting.className),
+    style: styled.supporting.style
+  }, /*#__PURE__*/React.createElement("span", {
+    className: relax.clsx(classNames[className.SwitchClassToken.Leading], styled.leading.className),
+    style: styled.leading.style
+  }, checkedChildren), /*#__PURE__*/React.createElement("span", {
+    className: relax.clsx(classNames[className.SwitchClassToken.Trailing], styled.trailing.className),
+    style: styled.trailing.style
+  }, uncheckedChildren)));
+};
+
+exports.default = Switch;