@spaced-out/ui-design-system 0.1.15 → 0.1.16

package/lib/components/RadioButton/RadioButton.js

@@ -6,13 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.RadioButton = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classify = _interopRequireDefault(require("../../utils/classify"));
-var _Text = require("../Text/Text");
 var _RadioButtonModule = _interopRequireDefault(require("./RadioButton.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-const RadioButton = _ref => {
+const RadioButton = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
   let {
     children,
     disabled = false,
@@ -22,18 +21,23 @@ const RadioButton = _ref => {
     selectedValue,
     onChange,
     align = 'vertical',
-    className,
+    classNames,
     error = false,
     tabIndex = 0,
+    ariaLabel = '',
     ...props
   } = _ref;
   const radioInput = /*#__PURE__*/React.createRef();
+  React.useImperativeHandle(forwardRef, () => radioInput.current);
   const checked = selectedValue === value;
   React.useEffect(() => {
     if (radioInput.current && focused) {
       radioInput.current.focus();
     }
   }, [focused]);
+  const onWrapClickHandler = () => {
+    radioInput.current?.click();
+  };
   const onChangeHandler = e => {
     if (!disabled) {
       onChange && onChange(e?.target?.value);
@@ -44,11 +48,12 @@ const RadioButton = _ref => {
       onChangeHandler(e);
     }
   };
-  return /*#__PURE__*/React.createElement("label", {
+  return /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_RadioButtonModule.default.container, {
       [_RadioButtonModule.default.horizontalRadioButton]: align === 'horizontal-fixed',
       [_RadioButtonModule.default.fluidRadioButton]: align === 'horizontal-fluid'
-    }, className)
+    }, classNames?.wrapper),
+    onClick: onWrapClickHandler
   }, /*#__PURE__*/React.createElement("input", _extends({
     type: "radio",
     checked: checked,
@@ -64,10 +69,11 @@ const RadioButton = _ref => {
     onKeyDown: onKeyDownHandler,
     tabIndex: disabled ? -1 : tabIndex,
     name: name,
-    value: value || ''
-  }, props)), React.Children.count(children) > 0 && /*#__PURE__*/React.createElement(_Text.FormLabelMedium, {
+    value: value || '',
+    "aria-label": ariaLabel || children
+  }, props)), React.Children.count(children) > 0 && /*#__PURE__*/React.createElement("div", {
     color: "secondary",
-    className: _RadioButtonModule.default.radioLabel
+    className: (0, _classify.default)(_RadioButtonModule.default.radioLabel, classNames?.label)
   }, children));
-};
+});
 exports.RadioButton = RadioButton;

package/lib/components/RadioButton/RadioButton.js.flow

@@ -4,7 +4,6 @@ import * as React from 'react';
 
 import type {GroupAlign} from '../../types/common';
 import classify from '../../utils/classify';
-import {FormLabelMedium} from '../Text/Text';
 
 import css from './RadioButton.module.css';
 
@@ -15,6 +14,8 @@ import css from './RadioButton.module.css';
  * nesting labels is a bad idea.
  */
 
+type ClassNames = $ReadOnly<{wrapper?: string, label?: string}>;
+
 export type RadioButtonProps = {
   children?: React.Node,
   value?: string,
@@ -23,82 +24,102 @@ export type RadioButtonProps = {
   name?: string,
   selectedValue?: string,
   align?: GroupAlign,
-  className?: string,
+  classNames?: ClassNames,
   error?: boolean,
   onChange?: (newValue: string) => mixed,
   tabIndex?: number,
+  ariaLabel?: string,
 };
 
-export const RadioButton = ({
-  children,
-  disabled = false,
-  value = '',
-  focused = false,
-  name = 'radio',
-  selectedValue,
-  onChange,
-  align = 'vertical',
-  className,
-  error = false,
-  tabIndex = 0,
-  ...props
-}: RadioButtonProps): React.Node => {
-  const radioInput = React.createRef<HTMLInputElement>();
+export const RadioButton: React$AbstractComponent<
+  RadioButtonProps,
+  HTMLInputElement,
+> = React.forwardRef<RadioButtonProps, HTMLInputElement>(
+  (
+    {
+      children,
+      disabled = false,
+      value = '',
+      focused = false,
+      name = 'radio',
+      selectedValue,
+      onChange,
+      align = 'vertical',
+      classNames,
+      error = false,
+      tabIndex = 0,
+      ariaLabel = '',
+      ...props
+    }: RadioButtonProps,
+    forwardRef,
+  ): React.Node => {
+    const radioInput = React.createRef<HTMLInputElement>();
+    React.useImperativeHandle(forwardRef, () => radioInput.current);
 
-  const checked = selectedValue === value;
+    const checked = selectedValue === value;
 
-  React.useEffect(() => {
-    if (radioInput.current && focused) {
-      radioInput.current.focus();
-    }
-  }, [focused]);
+    React.useEffect(() => {
+      if (radioInput.current && focused) {
+        radioInput.current.focus();
+      }
+    }, [focused]);
 
-  const onChangeHandler = (e) => {
-    if (!disabled) {
-      onChange && onChange(e?.target?.value);
-    }
-  };
+    const onWrapClickHandler = () => {
+      radioInput.current?.click();
+    };
 
-  const onKeyDownHandler = (e) => {
-    if (e.key === 'Enter') {
-      onChangeHandler(e);
-    }
-  };
+    const onChangeHandler = (e) => {
+      if (!disabled) {
+        onChange && onChange(e?.target?.value);
+      }
+    };
 
-  return (
-    <label
-      className={classify(
-        css.container,
-        {
-          [css.horizontalRadioButton]: align === 'horizontal-fixed',
-          [css.fluidRadioButton]: align === 'horizontal-fluid',
-        },
-        className,
-      )}
-    >
-      <input
-        type="radio"
-        checked={checked}
-        disabled={disabled}
-        className={classify(css.radio, {
-          [css.unselected]: !checked && !disabled && !error,
-          [css.selected]: checked && !disabled && !error,
-          [css.disabled]: disabled,
-          [css.error]: error && !disabled,
-        })}
-        ref={radioInput}
-        onChange={onChangeHandler}
-        onKeyDown={onKeyDownHandler}
-        tabIndex={disabled ? -1 : tabIndex}
-        name={name}
-        value={value || ''}
-        {...props}
-      />
-      {React.Children.count(children) > 0 && (
-        <FormLabelMedium color="secondary" className={css.radioLabel}>
-          {children}
-        </FormLabelMedium>
-      )}
-    </label>
-  );
-};
+    const onKeyDownHandler = (e) => {
+      if (e.key === 'Enter') {
+        onChangeHandler(e);
+      }
+    };
+
+    return (
+      <div
+        className={classify(
+          css.container,
+          {
+            [css.horizontalRadioButton]: align === 'horizontal-fixed',
+            [css.fluidRadioButton]: align === 'horizontal-fluid',
+          },
+          classNames?.wrapper,
+        )}
+        onClick={onWrapClickHandler}
+      >
+        <input
+          type="radio"
+          checked={checked}
+          disabled={disabled}
+          className={classify(css.radio, {
+            [css.unselected]: !checked && !disabled && !error,
+            [css.selected]: checked && !disabled && !error,
+            [css.disabled]: disabled,
+            [css.error]: error && !disabled,
+          })}
+          ref={radioInput}
+          onChange={onChangeHandler}
+          onKeyDown={onKeyDownHandler}
+          tabIndex={disabled ? -1 : tabIndex}
+          name={name}
+          value={value || ''}
+          aria-label={ariaLabel || children}
+          {...props}
+        />
+        {React.Children.count(children) > 0 && (
+          <div
+            color="secondary"
+            className={classify(css.radioLabel, classNames?.label)}
+          >
+            {children}
+          </div>
+        )}
+      </div>
+    );
+  },
+);

package/lib/components/RadioButton/RadioButton.module.css

@@ -35,6 +35,8 @@
   flex-direction: row;
   gap: spaceSmall;
   cursor: pointer;
+  align-items: center;
+  cursor: pointer;
 }
 
 .radio {
@@ -88,7 +90,8 @@
 }
 
 .radioLabel {
-  composes: truncate from '../../styles/typography.module.css';
+  composes: formLabelMedium from '../../styles/typography.module.css';
+  composes: secondary from '../../styles/typography.module.css';
 }
 
 .horizontalRadioButton {

package/lib/components/RadioButton/RadioGroup.js

@@ -12,7 +12,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const RadioGroup = _ref => {
+const RadioGroup = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
   let {
     align = 'vertical',
     name,
@@ -47,10 +47,11 @@ const RadioGroup = _ref => {
       [_RadioGroupModule.default.vertical]: align === 'vertical',
       [_RadioGroupModule.default.horizontal]: align === 'horizontal-fixed',
       [_RadioGroupModule.default.horizontalFluid]: align === 'horizontal-fluid'
-    }, classNames?.radioGroup)
+    }, classNames?.radioGroup),
+    ref: forwardRef
   }, childrenWithProps), error && /*#__PURE__*/React.createElement(_Text.BodySmall, {
     color: "danger",
     className: classNames?.errorText
   }, errorText));
-};
+});
 exports.RadioGroup = RadioGroup;

package/lib/components/RadioButton/RadioGroup.js.flow

@@ -32,54 +32,63 @@ export type RadioGroupProps = {
   errorText?: string,
 };
 
-export const RadioGroup = ({
-  align = 'vertical',
-  name,
-  value,
-  onChange,
-  children,
-  classNames,
-  error = false,
-  errorText = '',
-}: RadioGroupProps): React.Node => {
-  const onChangeHandler = (value) => {
-    if (onChange) {
-      onChange(value);
-    }
-  };
+export const RadioGroup: React$AbstractComponent<
+  RadioGroupProps,
+  HTMLDivElement,
+> = React.forwardRef<RadioGroupProps, HTMLDivElement>(
+  (
+    {
+      align = 'vertical',
+      name,
+      value,
+      onChange,
+      children,
+      classNames,
+      error = false,
+      errorText = '',
+    }: RadioGroupProps,
+    forwardRef,
+  ): React.Node => {
+    const onChangeHandler = (value) => {
+      if (onChange) {
+        onChange(value);
+      }
+    };
 
-  const childrenWithProps = React.Children.map(children, (child) => {
-    if (React.isValidElement(child)) {
-      return React.cloneElement(child, {
-        name,
-        selectedValue: value,
-        onChange: onChangeHandler,
-        align,
-        error,
-      });
-    }
-    return child;
-  });
+    const childrenWithProps = React.Children.map(children, (child) => {
+      if (React.isValidElement(child)) {
+        return React.cloneElement(child, {
+          name,
+          selectedValue: value,
+          onChange: onChangeHandler,
+          align,
+          error,
+        });
+      }
+      return child;
+    });
 
-  return (
-    <div className={classify(css.radioGroupContainer, classNames?.wrapper)}>
-      <div
-        className={classify(
-          {
-            [css.vertical]: align === 'vertical',
-            [css.horizontal]: align === 'horizontal-fixed',
-            [css.horizontalFluid]: align === 'horizontal-fluid',
-          },
-          classNames?.radioGroup,
+    return (
+      <div className={classify(css.radioGroupContainer, classNames?.wrapper)}>
+        <div
+          className={classify(
+            {
+              [css.vertical]: align === 'vertical',
+              [css.horizontal]: align === 'horizontal-fixed',
+              [css.horizontalFluid]: align === 'horizontal-fluid',
+            },
+            classNames?.radioGroup,
+          )}
+          ref={forwardRef}
+        >
+          {childrenWithProps}
+        </div>
+        {error && (
+          <BodySmall color="danger" className={classNames?.errorText}>
+            {errorText}
+          </BodySmall>
         )}
-      >
-        {childrenWithProps}
       </div>
-      {error && (
-        <BodySmall color="danger" className={classNames?.errorText}>
-          {errorText}
-        </BodySmall>
-      )}
-    </div>
-  );
-};
+    );
+  },
+);

package/lib/components/Toast/Toast.js

@@ -9,6 +9,7 @@ var _reactDomInteractions = require("@floating-ui/react-dom-interactions");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _Icon = require("../Icon");
 var _Text = require("../Text");
+var _typographyModule = _interopRequireDefault(require("../../styles/typography.module.css"));
 var _ToastModule = _interopRequireDefault(require("./Toast.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -22,13 +23,6 @@ const TOAST_SEMANTIC = Object.freeze({
   primary: 'primary'
 });
 exports.TOAST_SEMANTIC = TOAST_SEMANTIC;
-const TOAST_TITLE_COLOR = {
-  success: _Text.TEXT_COLORS.success,
-  information: _Text.TEXT_COLORS.information,
-  warning: _Text.TEXT_COLORS.warning,
-  danger: _Text.TEXT_COLORS.danger,
-  primary: _Text.TEXT_COLORS.primary
-};
 const ToastIcon = _ref => {
   let {
     semantic
@@ -75,10 +69,11 @@ const ToastTitle = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     children,
     semantic = '',
+    className,
     ...props
   } = _ref2;
-  return /*#__PURE__*/React.createElement(_Text.SubTitleSmall, _extends({
-    color: TOAST_TITLE_COLOR[semantic]
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: (0, _classify.default)(_ToastModule.default.toastTitle, _typographyModule.default[semantic], className)
   }, props, {
     ref: ref
   }), children);
@@ -88,9 +83,12 @@ ToastTitle.displayName = 'ToastTitle';
 const ToastBody = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     children,
+    className,
     ...props
   } = _ref3;
-  return /*#__PURE__*/React.createElement(_Text.BodyMedium, _extends({}, props, {
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: (0, _classify.default)(_ToastModule.default.toastBody, className)
+  }, props, {
     ref: ref
   }), children);
 });

package/lib/components/Toast/Toast.js.flow

@@ -8,16 +8,11 @@ import {
   useFloating,
 } from '@floating-ui/react-dom-interactions';
 
-import type {ColorTypes} from '../../types/typography';
 import classify from '../../utils/classify';
 import {CloseIcon, Icon} from '../Icon';
-import {
-  BodyMedium,
-  SubTitleExtraSmall,
-  SubTitleSmall,
-  TEXT_COLORS,
-} from '../Text';
+import {SubTitleExtraSmall, TEXT_COLORS} from '../Text';
 
+import typography from '../../styles/typography.module.css';
 import css from './Toast.module.css';
 
 
@@ -31,14 +26,6 @@ export const TOAST_SEMANTIC = Object.freeze({
   primary: 'primary',
 });
 
-const TOAST_TITLE_COLOR = {
-  success: TEXT_COLORS.success,
-  information: TEXT_COLORS.information,
-  warning: TEXT_COLORS.warning,
-  danger: TEXT_COLORS.danger,
-  primary: TEXT_COLORS.primary,
-};
-
 export type ToastSemanticType = $Values<typeof TOAST_SEMANTIC>;
 
 export type ToastProps = {
@@ -109,17 +96,23 @@ export type ToastTitleProps = {
   children?: React.Node,
   className?: string,
   semantic?: ToastSemanticType,
-  color?: ColorTypes,
 };
 
 export const ToastTitle: React$AbstractComponent<
   ToastTitleProps,
-  HTMLHeadingElement,
-> = React.forwardRef<ToastTitleProps, HTMLHeadingElement>(
-  ({children, semantic = '', ...props}: ToastTitleProps, ref): React.Node => (
-    <SubTitleSmall color={TOAST_TITLE_COLOR[semantic]} {...props} ref={ref}>
+  HTMLDivElement,
+> = React.forwardRef<ToastTitleProps, HTMLDivElement>(
+  (
+    {children, semantic = '', className, ...props}: ToastTitleProps,
+    ref,
+  ): React.Node => (
+    <div
+      className={classify(css.toastTitle, typography[semantic], className)}
+      {...props}
+      ref={ref}
+    >
       {children}
-    </SubTitleSmall>
+    </div>
   ),
 );
 
@@ -128,17 +121,16 @@ ToastTitle.displayName = 'ToastTitle';
 export type ToastBodyProps = {
   children?: React.Node,
   className?: string,
-  color?: ColorTypes,
 };
 
 export const ToastBody: React$AbstractComponent<
   ToastBodyProps,
-  HTMLParagraphElement,
-> = React.forwardRef<ToastBodyProps, HTMLParagraphElement>(
-  ({children, ...props}: ToastBodyProps, ref): React.Node => (
-    <BodyMedium {...props} ref={ref}>
+  HTMLDivElement,
+> = React.forwardRef<ToastBodyProps, HTMLDivElement>(
+  ({children, className, ...props}: ToastBodyProps, ref): React.Node => (
+    <div className={classify(css.toastBody, className)} {...props} ref={ref}>
       {children}
-    </BodyMedium>
+    </div>
   ),
 );
 

package/lib/components/Toast/Toast.module.css

@@ -44,6 +44,10 @@
   gap: spaceXXSmall;
 }
 
+.toastBody {
+  composes: bodyMedium from '../../styles/typography.module.css';
+}
+
 .toastFooterActions {
   display: flex;
   flex-direction: row;
@@ -54,3 +58,7 @@
 .closeIcon {
   margin-left: auto;
 }
+
+.toastTitle {
+  composes: subTitleSmall from '../../styles/typography.module.css';
+}

package/lib/components/Toggle/Toggle.js

@@ -6,13 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.Toggle = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classify = _interopRequireDefault(require("../../utils/classify"));
-var _Text = require("../Text/Text");
 var _ToggleModule = _interopRequireDefault(require("./Toggle.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-const Toggle = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+const Toggle = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
   let {
     name = 'toggle',
     value = '',
@@ -22,9 +21,11 @@ const Toggle = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     checked,
     focused,
     onChange,
+    ariaLabel,
     ...props
   } = _ref;
   const toggleInput = /*#__PURE__*/React.createRef();
+  React.useImperativeHandle(forwardRef, () => toggleInput.current);
   const handleOnChange = () => {
     if (!disabled) {
       onChange && onChange({
@@ -33,16 +34,19 @@ const Toggle = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       });
     }
   };
+  const onWrapClickHandler = () => {
+    toggleInput.current?.click();
+  };
   React.useEffect(() => {
     if (toggleInput.current && focused) {
       toggleInput.current.focus();
     }
   }, [focused]);
-  return /*#__PURE__*/React.createElement("label", {
+  return /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_ToggleModule.default.container, {
       [_ToggleModule.default.disabled]: disabled
     }, classNames?.wrapper),
-    ref: ref
+    onClick: onWrapClickHandler
   }, /*#__PURE__*/React.createElement("span", {
     className: _ToggleModule.default.toggleWrap
   }, /*#__PURE__*/React.createElement("input", _extends({
@@ -52,13 +56,13 @@ const Toggle = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     checked: checked,
     onChange: handleOnChange,
     ref: toggleInput,
-    disabled: disabled
+    disabled: disabled,
+    "aria-label": ariaLabel || children
   }, props)), /*#__PURE__*/React.createElement("span", {
     className: (0, _classify.default)(_ToggleModule.default.toggle, {
       [_ToggleModule.default.disabledButton]: disabled
     })
-  })), React.Children.count(children) > 0 && /*#__PURE__*/React.createElement(_Text.FormLabelMedium, {
-    color: "secondary",
+  })), React.Children.count(children) > 0 && /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_ToggleModule.default.toggleLabel, classNames?.label)
   }, children));
 });