@spaced-out/ui-design-system 0.0.1-alpha.0

package/lib/components/Panel/Panel.js

@@ -0,0 +1,96 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PanelHeader = exports.PanelFooter = exports.PanelBody = exports.Panel = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _useMountTransition = _interopRequireDefault(require("../../hooks/useMountTransition"));
+var _motion = require("../../styles/variables/_motion");
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _Button = require("../Button");
+var _Modal = require("../Modal");
+var _Truncate = require("../Truncate");
+var _PanelModule = _interopRequireDefault(require("./Panel.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+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; }
+
+const PanelHeader = _ref => {
+  let {
+    children,
+    hideCloseBtn,
+    onCloseButtonClick
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.js)(_jsxRuntime.Fragment, {
+    children: React.Children.count(children) > 0 && /*#__PURE__*/(0, _jsxRuntime.jss)("div", {
+      className: _PanelModule.default.panelHeader,
+      children: [/*#__PURE__*/(0, _jsxRuntime.js)("div", {
+        className: _PanelModule.default.headerContent,
+        children: /*#__PURE__*/(0, _jsxRuntime.js)(_Truncate.Truncate, {
+          children: children
+        })
+      }), !hideCloseBtn && /*#__PURE__*/(0, _jsxRuntime.js)(_Button.Button, {
+        iconLeftName: "xmark",
+        type: "ghost",
+        onClick: onCloseButtonClick
+      })]
+    })
+  });
+};
+exports.PanelHeader = PanelHeader;
+const PanelBody = _ref2 => {
+  let {
+    children
+  } = _ref2;
+  return /*#__PURE__*/(0, _jsxRuntime.js)("div", {
+    className: _PanelModule.default.panelBody,
+    children: children
+  });
+};
+exports.PanelBody = PanelBody;
+const PanelFooter = _ref3 => {
+  let {
+    children
+  } = _ref3;
+  return /*#__PURE__*/(0, _jsxRuntime.js)(_jsxRuntime.Fragment, {
+    children: React.Children.count(children) > 0 && /*#__PURE__*/(0, _jsxRuntime.js)("div", {
+      className: _PanelModule.default.panelFooter,
+      children: /*#__PURE__*/(0, _jsxRuntime.js)("div", {
+        className: _PanelModule.default.panelFooterActions,
+        children: children
+      })
+    })
+  });
+};
+exports.PanelFooter = PanelFooter;
+const Panel = _ref4 => {
+  let {
+    children,
+    isOpen = false,
+    size = 'medium',
+    anchor = 'left',
+    onClose,
+    ...restPanelProps
+  } = _ref4;
+  const isTransitioning = (0, _useMountTransition.default)(isOpen, parseInt(_motion.motionDurationNormal));
+  return /*#__PURE__*/(0, _jsxRuntime.js)(_Modal.Modal, {
+    isOpen: isOpen,
+    onClose: onClose,
+    ...restPanelProps,
+    classNames: {
+      container: (0, _classify.default)(_PanelModule.default.panelContainer, {
+        [_PanelModule.default.in]: isTransitioning,
+        [_PanelModule.default.open]: isOpen
+      }),
+      content: (0, _classify.default)(_PanelModule.default.panel, _PanelModule.default[anchor], {
+        [_PanelModule.default.medium]: size === 'medium',
+        [_PanelModule.default.small]: size === 'small',
+        [_PanelModule.default.large]: size === 'large'
+      })
+    },
+    children: children
+  });
+};
+exports.Panel = Panel;

package/lib/components/Panel/Panel.js.flow

@@ -0,0 +1,109 @@
+// @flow strict
+
+import * as React from 'react';
+
+import useMountTransition from '../../hooks/useMountTransition';
+import {motionDurationNormal} from '../../styles/variables/_motion';
+import classify from '../../utils/classify';
+import {Button} from '../Button';
+import type {ModalProps} from '../Modal';
+import {Modal} from '../Modal';
+import {Truncate} from '../Truncate';
+
+import css from './Panel.module.css';
+
+
+export type PanelSize = 'small' | 'medium' | 'large';
+export type PanelAnchor = 'left' | 'right';
+
+export type PanelHeaderProps = {
+  children?: React.Node,
+  hideCloseBtn?: boolean,
+  onCloseButtonClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
+};
+
+export type PanelFooterProps = {
+  children?: React.Node,
+};
+
+export type PanelBodyProps = {
+  children?: React.Node,
+};
+
+export type PanelProps = {
+  ...ModalProps,
+  size?: PanelSize,
+  anchor?: PanelAnchor,
+};
+
+export const PanelHeader = ({
+  children,
+  hideCloseBtn,
+  onCloseButtonClick,
+}: PanelHeaderProps): React.Node => (
+  <>
+    {React.Children.count(children) > 0 && (
+      <div className={css.panelHeader}>
+        <div className={css.headerContent}>
+          <Truncate>{children}</Truncate>
+        </div>
+        {!hideCloseBtn && (
+          <Button
+            iconLeftName="xmark"
+            type="ghost"
+            onClick={onCloseButtonClick}
+          ></Button>
+        )}
+      </div>
+    )}
+  </>
+);
+
+export const PanelBody = ({children}: PanelBodyProps): React.Node => (
+  <div className={css.panelBody}>{children}</div>
+);
+
+export const PanelFooter = ({children}: PanelFooterProps): React.Node => (
+  <>
+    {React.Children.count(children) > 0 && (
+      <div className={css.panelFooter}>
+        <div className={css.panelFooterActions}>{children}</div>
+      </div>
+    )}
+  </>
+);
+
+export const Panel = ({
+  children,
+  isOpen = false,
+  size = 'medium',
+  anchor = 'left',
+  onClose,
+  ...restPanelProps
+}: PanelProps): React.Node => {
+  const isTransitioning = useMountTransition(
+    isOpen,
+    parseInt(motionDurationNormal),
+  );
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      {...restPanelProps}
+      classNames={{
+        container: classify(css.panelContainer, {
+          [css.in]: isTransitioning,
+          [css.open]: isOpen,
+        }),
+        content: classify(css.panel, css[anchor], {
+          [css.medium]: size === 'medium',
+          [css.small]: size === 'small',
+          [css.large]: size === 'large',
+        }),
+      }}
+    >
+      {children}
+    </Modal>
+  );
+};

package/lib/components/Panel/Panel.module.css

@@ -0,0 +1,77 @@
+@value (spaceNegFluid, spaceNone, spaceMedium, spaceSmall, spaceFluid) from '../../styles/variables/_space.css';
+@value (size4, size60, size480, size580, size720, sizeFluid) from '../../styles/variables/_size.css';
+@value (motionDurationNormal, motionEaseInEaseOut) from '../../styles/variables/_motion.css';
+@value (colorBackgroundTertiary, colorBackgroundPrimary) from '../../styles/variables/_color.css';
+
+.panel {
+  opacity: initial;
+  height: sizeFluid;
+  transition: transform motionDurationNormal motionEaseInEaseOut;
+  background-color: colorBackgroundTertiary;
+}
+
+.panel.small {
+  width: size480;
+}
+
+.panel.medium {
+  width: size580;
+}
+
+.panel.large {
+  width: size720;
+}
+
+.panel.left {
+  top: spaceNone;
+  left: spaceNone;
+  transform: translateX(spaceNegFluid);
+}
+
+.panel.right {
+  top: spaceNone;
+  right: spaceNone;
+  transform: translateX(spaceFluid);
+}
+
+.panelContainer.open.in .left,
+.panelContainer.open.in .right {
+  transform: translateX(spaceNone);
+}
+
+.panelHeader {
+  composes: borderBottomPrimary from '../../styles/border.module.css';
+  composes: subTitleLarge from '../../styles/typography.module.css';
+  padding: spaceNone spaceSmall spaceNone spaceMedium;
+  height: size60;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: spaceMedium;
+}
+
+.headerContent {
+  display: flex;
+}
+
+.panelBody {
+  padding: spaceMedium;
+  height: sizeFluid;
+  overflow: auto;
+}
+
+.panelFooter {
+  composes: borderTopPrimary from '../../styles/border.module.css';
+  background-color: colorBackgroundPrimary;
+  margin-top: auto;
+  padding: spaceMedium;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: spaceMedium;
+}
+
+.panelFooterActions {
+  display: flex;
+  gap: spaceSmall;
+}

package/lib/components/Panel/index.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Panel", {
+  enumerable: true,
+  get: function () {
+    return _Panel.Panel;
+  }
+});
+Object.defineProperty(exports, "PanelBody", {
+  enumerable: true,
+  get: function () {
+    return _Panel.PanelBody;
+  }
+});
+Object.defineProperty(exports, "PanelFooter", {
+  enumerable: true,
+  get: function () {
+    return _Panel.PanelFooter;
+  }
+});
+Object.defineProperty(exports, "PanelHeader", {
+  enumerable: true,
+  get: function () {
+    return _Panel.PanelHeader;
+  }
+});
+var _Panel = require("./Panel.js");

package/lib/components/Panel/index.js.flow

@@ -0,0 +1,10 @@
+//@flow strict
+export type {
+  PanelAnchor,
+  PanelBodyProps,
+  PanelFooterProps,
+  PanelHeaderProps,
+  PanelProps,
+  PanelSize,
+} from './Panel.js';
+export {Panel, PanelBody, PanelFooter, PanelHeader} from './Panel.js';

package/lib/components/RadioButton/RadioButton.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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"));
+var _jsxRuntime = require("react/jsx-runtime");
+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; }
+
+const RadioButton = _ref => {
+  let {
+    children,
+    disabled = false,
+    value = '',
+    focused = false,
+    name = 'radio',
+    selectedValue,
+    onChange,
+    align = 'vertical',
+    className,
+    error = false,
+    ...props
+  } = _ref;
+  const radioInput = /*#__PURE__*/React.createRef();
+  const checked = selectedValue === value;
+  React.useEffect(() => {
+    if (radioInput.current && focused) {
+      radioInput.current.focus();
+    }
+  }, [focused]);
+  const onChangeHandler = e => {
+    if (!disabled) {
+      onChange && onChange(e?.target?.value);
+    }
+  };
+  const onKeyDownHandler = e => {
+    if (e.key === 'Enter') {
+      onChangeHandler(e);
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jss)("label", {
+    className: (0, _classify.default)(_RadioButtonModule.default.container, {
+      [_RadioButtonModule.default.horizontalRadioButton]: align === 'horizontal-fixed',
+      [_RadioButtonModule.default.fluidRadioButton]: align === 'horizontal-fluid'
+    }, className),
+    children: [/*#__PURE__*/(0, _jsxRuntime.js)("input", {
+      type: "radio",
+      checked: checked,
+      disabled: disabled,
+      className: (0, _classify.default)(_RadioButtonModule.default.radio, {
+        [_RadioButtonModule.default.unselected]: !checked && !disabled && !error,
+        [_RadioButtonModule.default.selected]: checked && !disabled && !error,
+        [_RadioButtonModule.default.disabled]: disabled,
+        [_RadioButtonModule.default.error]: error && !disabled
+      }),
+      ref: radioInput,
+      onChange: onChangeHandler,
+      onKeyDown: onKeyDownHandler,
+      tabIndex: disabled ? '-1' : 0,
+      name: name,
+      value: value || '',
+      ...props
+    }), React.Children.count(children) > 0 && /*#__PURE__*/(0, _jsxRuntime.js)(_Text.FormLabelMedium, {
+      color: "secondary",
+      className: _RadioButtonModule.default.radioLabel,
+      children: children
+    })]
+  });
+};
+exports.RadioButton = RadioButton;

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

@@ -0,0 +1,102 @@
+// @flow strict
+
+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';
+
+/**
+ * Note:
+ * Do not wrap Radio in a label. For simplicity's sake, Radio uses an
+ * internal label tag to handle click delegation to the hidden input, and
+ * nesting labels is a bad idea.
+ */
+
+export type RadioButtonProps = {
+  children?: React.Node,
+  value?: string,
+  disabled?: boolean,
+  focused?: boolean,
+  name?: string,
+  selectedValue?: string,
+  align?: GroupAlign,
+  className?: string,
+  error?: boolean,
+  onChange?: (newValue: string) => mixed,
+};
+
+export const RadioButton = ({
+  children,
+  disabled = false,
+  value = '',
+  focused = false,
+  name = 'radio',
+  selectedValue,
+  onChange,
+  align = 'vertical',
+  className,
+  error = false,
+  ...props
+}: RadioButtonProps): React.Node => {
+  const radioInput = React.createRef<HTMLInputElement>();
+
+  const checked = selectedValue === value;
+
+  React.useEffect(() => {
+    if (radioInput.current && focused) {
+      radioInput.current.focus();
+    }
+  }, [focused]);
+
+  const onChangeHandler = (e) => {
+    if (!disabled) {
+      onChange && onChange(e?.target?.value);
+    }
+  };
+
+  const onKeyDownHandler = (e) => {
+    if (e.key === 'Enter') {
+      onChangeHandler(e);
+    }
+  };
+
+  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' : 0}
+        name={name}
+        value={value || ''}
+        {...props}
+      />
+      {React.Children.count(children) > 0 && (
+        <FormLabelMedium color="secondary" className={css.radioLabel}>
+          {children}
+        </FormLabelMedium>
+      )}
+    </label>
+  );
+};

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

@@ -0,0 +1,122 @@
+@value (
+  borderWidthNone,
+  borderWidthTertiary,
+  borderRadiusMedium,
+  borderRadiusRadioButton
+) from '../../styles/variables/_border.css';
+
+@value (
+  colorBackgroundTertiary,
+  colorBorderSecondary,
+  colorBorderDanger,
+  colorFillPrimary,
+  colorFillDisabled,
+  colorFocusPrimary,
+  colorFocusDanger
+) from '../../styles/variables/_color.css';
+
+@value (
+  size20,
+  size110,
+  size160,
+  size240,
+  size500
+) from '../../styles/variables/_size.css';
+
+@value (
+  spaceNone,
+  spaceSmall,
+  spaceMedium,
+  spaceXSmall
+) from '../../styles/variables/_space.css';
+
+.container {
+  display: flex;
+  flex-direction: row;
+  gap: spaceSmall;
+  cursor: pointer;
+}
+
+.radio {
+  /* secret sauce to styling radio buttons */
+  appearance: none;
+  -webkit-appearance: none;
+  -mozilla-appearance: none;
+  vertical-align: text-bottom;
+  box-sizing: border-box;
+  border-radius: borderRadiusMedium;
+  height: size20;
+  width: size20;
+  background: colorBackgroundTertiary;
+  margin: spaceNone;
+  cursor: pointer;
+}
+
+.unselected {
+  border: borderWidthTertiary solid colorBorderSecondary;
+}
+
+.radio[disabled] {
+  border: borderWidthTertiary solid colorFillDisabled;
+  cursor: not-allowed;
+}
+
+.radio[disabled]:checked {
+  border: borderRadiusRadioButton solid colorFillDisabled;
+  background: colorBorderSecondary;
+}
+
+.radio:focus {
+  border: borderWidthTertiary solid colorFocusPrimary;
+  box-shadow: borderWidthNone borderWidthNone borderWidthNone
+    borderWidthTertiary colorFocusPrimary;
+}
+
+.radio:checked:focus .radio:focus:checked {
+  border: borderWidthTertiary solid colorFillPrimary;
+  border-radius: borderRadiusMedium;
+  box-shadow: borderWidthNone borderWidthNone borderWidthNone
+    borderWidthTertiary colorFocusPrimary;
+}
+
+.radio:checked {
+  border: borderRadiusRadioButton solid colorFillPrimary;
+}
+
+.selected {
+  border: borderRadiusRadioButton solid colorFillPrimary;
+}
+
+.radioLabel {
+  composes: truncate from '../../styles/typography.module.css';
+}
+
+.horizontalRadioButton {
+  flex: 1 0 size160; /*  grow, don't shrink, start with size160 width */
+}
+
+.fluidRadioButton {
+  flex: 0 0 auto; /* don't grow, don't shrink, auto width */
+}
+
+.error {
+  border: borderWidthTertiary solid colorBorderDanger;
+  border-radius: borderRadiusMedium;
+  box-shadow: borderWidthNone borderWidthNone borderWidthNone
+    borderWidthTertiary colorFocusDanger;
+}
+
+.error:focus {
+  border: borderWidthTertiary solid colorBorderDanger;
+  border-radius: borderRadiusMedium;
+  box-shadow: borderWidthNone borderWidthNone borderWidthNone
+    borderWidthTertiary colorFocusDanger;
+}
+
+.error:checked {
+  border: borderRadiusRadioButton solid colorBorderDanger;
+  border-radius: borderRadiusMedium;
+  box-shadow: borderWidthNone borderWidthNone borderWidthNone
+    borderWidthTertiary colorFocusDanger;
+  color: colorFocusDanger;
+}

package/lib/components/RadioButton/RadioGroup.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RadioGroup = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _Text = require("../Text/Text.js");
+var _RadioGroupModule = _interopRequireDefault(require("./RadioGroup.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+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; }
+
+const RadioGroup = _ref => {
+  let {
+    align = 'vertical',
+    name,
+    value,
+    onChange,
+    children,
+    classNames,
+    error = false,
+    errorText = ''
+  } = _ref;
+  const onChangeHandler = value => {
+    if (onChange) {
+      onChange(value);
+    }
+  };
+  const childrenWithProps = React.Children.map(children, child => {
+    if ( /*#__PURE__*/React.isValidElement(child)) {
+      return /*#__PURE__*/React.cloneElement(child, {
+        name,
+        selectedValue: value,
+        onChange: onChangeHandler,
+        align,
+        error
+      });
+    }
+    return child;
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jss)("div", {
+    className: (0, _classify.default)(_RadioGroupModule.default.radioGroupContainer, classNames?.wrapper),
+    children: [/*#__PURE__*/(0, _jsxRuntime.js)("div", {
+      className: (0, _classify.default)({
+        [_RadioGroupModule.default.vertical]: align === 'vertical',
+        [_RadioGroupModule.default.horizontal]: align === 'horizontal-fixed',
+        [_RadioGroupModule.default.horizontalFluid]: align === 'horizontal-fluid'
+      }, classNames?.radioGroup),
+      children: childrenWithProps
+    }), error && /*#__PURE__*/(0, _jsxRuntime.js)(_Text.BodySmall, {
+      color: "danger",
+      className: classNames?.errorText,
+      children: errorText
+    })]
+  });
+};
+exports.RadioGroup = RadioGroup;