@assembly-js/design-system 2.4.0

package/dist/umd/components/Input/TagInput.js

@@ -0,0 +1,95 @@
+// This file is generated by a script. Do not edit this file directly.
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "react", "react-select", "../../common/utils", "./Base", "../Tag/Tag"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("react"), require("react-select"), require("../../common/utils"), require("./Base"), require("../Tag/Tag"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.react, global.reactSelect, global.utils, global.Base, global.Tag);
+    global.TagInput = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, React, _reactSelect, _utils, _Base, _Tag) {
+  "use strict";
+
+  Object.defineProperty(_exports, "__esModule", {
+    value: true
+  });
+  _exports.MultiValueComponent = MultiValueComponent;
+  _exports.OptionComponent = OptionComponent;
+  _exports.TagInput = TagInput;
+  React = _interopRequireWildcard(React);
+  _reactSelect = _interopRequireDefault(_reactSelect);
+  var _excluded = ["label", "error", "isDisabled", "labelClassName", "errorClassName", "containerClassName"];
+  function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+  function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+  function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+  function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+  function MultiValueComponent(props) {
+    return /*#__PURE__*/React.createElement("div", props.innerProps, /*#__PURE__*/React.createElement(_Tag.Tag, _extends({}, props.data, {
+      onRemove: function onRemove() {
+        var values = props.getValue();
+        props.setValue(values.filter(function (v) {
+          return v.text !== props.data.text;
+        }), 'deselect-option');
+      }
+    })));
+  }
+  function OptionComponent(props) {
+    return /*#__PURE__*/React.createElement("div", _extends({
+      className: "hover:cop-cursor-pointer hover:cop-opacity-60"
+    }, props.innerProps), /*#__PURE__*/React.createElement(_Tag.Tag, props.data));
+  }
+  function TagInput(_ref) {
+    var label = _ref.label,
+      error = _ref.error,
+      isDisabled = _ref.isDisabled,
+      labelClassName = _ref.labelClassName,
+      errorClassName = _ref.errorClassName,
+      containerClassName = _ref.containerClassName,
+      props = _objectWithoutProperties(_ref, _excluded);
+    return /*#__PURE__*/React.createElement("div", {
+      className: containerClassName
+    }, label && /*#__PURE__*/React.createElement("label", {
+      className: (0, _utils.cn)('cop-text-sm cop-font-bold', labelClassName)
+    }, label), /*#__PURE__*/React.createElement(_reactSelect["default"], _extends({
+      unstyled: true,
+      openMenuOnFocus: !isDisabled,
+      openMenuOnClick: false,
+      className: isDisabled ? 'cop-pointer-events-none cop-opacity-50' : '',
+      classNames: {
+        placeholder: function placeholder() {
+          return 'cop-text-sm cop-font-body cop-text-secondary';
+        },
+        valueContainer: function valueContainer() {
+          return 'cop-gap-2';
+        },
+        menu: function menu() {
+          return 'cop-border-solid cop-border-[1px] cop-rounded-md cop-border-input-gray cop-p-2 cop-mt-1 cop-bg-white cop-text-sm cop-font-body';
+        },
+        menuList: function menuList() {
+          return 'cop-flex cop-justify-center cop-gap-2 cop-flex-row cop-flex-wrap';
+        },
+        indicatorsContainer: function indicatorsContainer() {
+          return '!cop-hidden';
+        },
+        control: function control() {
+          return (0, _utils.cn)(_Base.inputClasses, 'cop-border-input-gray', error ? 'cop-border-red-600' : '', label ? 'cop-mt-1' : '');
+        }
+      },
+      components: {
+        MultiValue: MultiValueComponent,
+        Option: OptionComponent
+      }
+    }, props, {
+      isMulti: true
+    })), error && /*#__PURE__*/React.createElement("div", {
+      className: (0, _utils.cn)('cop-text-right cop-text-sm cop-text-danger', errorClassName)
+    }, error));
+  }
+});

package/dist/umd/components/Input/Textarea.js

@@ -0,0 +1,49 @@
+// This file is generated by a script. Do not edit this file directly.
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "react", "../../common/utils", "./Base"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("react"), require("../../common/utils"), require("./Base"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.react, global.utils, global.Base);
+    global.Textarea = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, React, _utils, _Base) {
+  "use strict";
+
+  Object.defineProperty(_exports, "__esModule", {
+    value: true
+  });
+  _exports.Textarea = void 0;
+  React = _interopRequireWildcard(React);
+  var _excluded = ["className", "label", "containerClassName", "labelClassName", "errorClassName", "error"];
+  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+  function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+  function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+  function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+  var Textarea = _exports.Textarea = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+    var className = _ref.className,
+      label = _ref.label,
+      containerClassName = _ref.containerClassName,
+      labelClassName = _ref.labelClassName,
+      errorClassName = _ref.errorClassName,
+      error = _ref.error,
+      props = _objectWithoutProperties(_ref, _excluded);
+    return /*#__PURE__*/React.createElement("div", {
+      className: containerClassName
+    }, label && /*#__PURE__*/React.createElement("label", {
+      className: (0, _utils.cn)('cop-mb-2 cop-text-sm cop-font-bold', labelClassName)
+    }, label), /*#__PURE__*/React.createElement("textarea", _extends({
+      className: (0, _utils.cn)(_Base.inputClasses, 'cop-pt-3', error ? 'cop-border-red-600' : '', label ? 'cop-mt-1' : '', className),
+      ref: ref
+    }, props)), error && /*#__PURE__*/React.createElement("div", {
+      className: (0, _utils.cn)('cop-text-right cop-text-sm cop-text-danger', errorClassName)
+    }, error));
+  });
+  Textarea.displayName = 'Textarea';
+});

package/dist/umd/components/Input/index.js

@@ -0,0 +1,52 @@
+// This file is generated by a script. Do not edit this file directly.
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "react", "./Input", "./Textarea", "./TagInput"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("react"), require("./Input"), require("./Textarea"), require("./TagInput"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.react, global.Input, global.Textarea, global.TagInput);
+    global.index = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react, _Input, _Textarea, _TagInput) {
+  "use strict";
+
+  Object.defineProperty(_exports, "__esModule", {
+    value: true
+  });
+  _react = _interopRequireDefault(_react);
+  Object.keys(_Input).forEach(function (key) {
+    if (key === "default" || key === "__esModule") return;
+    if (key in _exports && _exports[key] === _Input[key]) return;
+    Object.defineProperty(_exports, key, {
+      enumerable: true,
+      get: function get() {
+        return _Input[key];
+      }
+    });
+  });
+  Object.keys(_Textarea).forEach(function (key) {
+    if (key === "default" || key === "__esModule") return;
+    if (key in _exports && _exports[key] === _Textarea[key]) return;
+    Object.defineProperty(_exports, key, {
+      enumerable: true,
+      get: function get() {
+        return _Textarea[key];
+      }
+    });
+  });
+  Object.keys(_TagInput).forEach(function (key) {
+    if (key === "default" || key === "__esModule") return;
+    if (key in _exports && _exports[key] === _TagInput[key]) return;
+    Object.defineProperty(_exports, key, {
+      enumerable: true,
+      get: function get() {
+        return _TagInput[key];
+      }
+    });
+  });
+  function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+});

package/dist/umd/components/Radio/Radio.js

@@ -0,0 +1,154 @@
+// This file is generated by a script. Do not edit this file directly.
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "react", "../../common/utils", "../Typography/Base", "../Icon", "cva", "../RadioGroup/RadioGroup", "../Tooltip/Tooltip"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("react"), require("../../common/utils"), require("../Typography/Base"), require("../Icon"), require("cva"), require("../RadioGroup/RadioGroup"), require("../Tooltip/Tooltip"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.react, global.utils, global.Base, global.Icon, global.cva, global.RadioGroup, global.Tooltip);
+    global.Radio = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, React, _utils, _Base, _Icon, _cva, _RadioGroup, _Tooltip) {
+  "use strict";
+
+  Object.defineProperty(_exports, "__esModule", {
+    value: true
+  });
+  _exports.RadioSize = _exports.Radio = void 0;
+  React = _interopRequireWildcard(React);
+  var _excluded = ["label", "description", "tooltipProps", "checked", "onChange", "disabled", "size", "classes"];
+  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+  function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+  function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+  function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+  function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+  function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+  function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+  function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+  var RadioSize = _exports.RadioSize = /*#__PURE__*/function (RadioSize) {
+    RadioSize["DEFAULT"] = "default";
+    RadioSize["LARGE"] = "lg";
+    return RadioSize;
+  }({});
+  var radioContainerStyles = (0, _cva.cva)({
+    base: 'cop-cursor-pointer cop-group cop-box-border cop-flex cop-items-center cop-justify-center cop-rounded-full cop-border cop-border-solid cop-outline-none peer-focus-visible:cop-outline-2 peer-focus-visible:cop-outline-[#0071E3]',
+    variants: {
+      size: _defineProperty(_defineProperty({}, RadioSize.DEFAULT, 'cop-h-4 cop-w-4'), RadioSize.LARGE, 'cop-h-[18px] cop-w-[18px]'),
+      checked: {
+        "true": 'cop-border-primary hover:cop-border-[#36424D]',
+        "false": 'cop-border-gray-300 hover:cop-bg-[#F8F9FB]'
+      },
+      disabled: {
+        "true": 'cop-pointer-events-none cop-cursor-default cop-bg-secondary cop-text-[#90959D]',
+        "false": ''
+      }
+    },
+    compoundVariants: [{
+      checked: true,
+      disabled: true,
+      className: '!cop-border-secondary'
+    }],
+    defaultVariants: {
+      size: RadioSize.DEFAULT,
+      checked: false,
+      disabled: false
+    }
+  });
+  var radioIconStyles = (0, _cva.cva)({
+    variants: {
+      size: _defineProperty(_defineProperty({}, RadioSize.DEFAULT, 'cop-h-2 cop-w-2'), RadioSize.LARGE, 'cop-h-[10px] cop-w-[10px]'),
+      checked: {
+        "true": 'cop-text-primary group-hover:cop-text-[#36424D]',
+        "false": ''
+      },
+      disabled: {
+        "true": 'cop-text-input-gray',
+        "false": ''
+      }
+    },
+    compoundVariants: [{
+      checked: true,
+      disabled: true,
+      className: '!cop-text-input-gray'
+    }]
+  });
+  var Radio = _exports.Radio = /*#__PURE__*/React.forwardRef(function (props, ref) {
+    var label = props.label,
+      description = props.description,
+      tooltipProps = props.tooltipProps,
+      controlledChecked = props.checked,
+      controlledOnChange = props.onChange,
+      _props$disabled = props.disabled,
+      disabled = _props$disabled === void 0 ? false : _props$disabled,
+      _props$size = props.size,
+      size = _props$size === void 0 ? RadioSize.DEFAULT : _props$size,
+      classes = props.classes,
+      rest = _objectWithoutProperties(props, _excluded);
+    var groupContext = (0, _RadioGroup.useRadioGroup)();
+
+    // Determine if the radio is part of a group
+    var isPartOfGroup = !!groupContext;
+
+    // Use context values if part of a group, otherwise rely on props
+    var checked = isPartOfGroup ? (groupContext === null || groupContext === void 0 ? void 0 : groupContext.value) === rest.value : controlledChecked;
+    var handleChange = function handleChange(event) {
+      if (isPartOfGroup && groupContext !== null && groupContext !== void 0 && groupContext.onChange) {
+        groupContext.onChange(event);
+      } else if (controlledOnChange) {
+        controlledOnChange(event);
+      }
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      className: (0, _utils.cn)(classes === null || classes === void 0 ? void 0 : classes.root)
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "cop-flex cop-gap-2"
+    }, /*#__PURE__*/React.createElement("label", {
+      htmlFor: rest.name
+    }, /*#__PURE__*/React.createElement("input", _extends({
+      id: rest.name,
+      className: "cop-peer cop-sr-only cop-fixed",
+      ref: ref,
+      type: "radio",
+      checked: checked,
+      onChange: handleChange,
+      disabled: disabled
+    }, rest)), /*#__PURE__*/React.createElement("div", {
+      className: (0, _utils.cn)(radioContainerStyles({
+        size: size,
+        checked: checked,
+        disabled: disabled
+      }), classes === null || classes === void 0 ? void 0 : classes.input)
+    }, checked && /*#__PURE__*/React.createElement(_Icon.Icon, {
+      icon: "Dot",
+      className: radioIconStyles({
+        size: size,
+        checked: checked,
+        disabled: disabled
+      })
+    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      className: "cop-flex cop-gap-1"
+    }, /*#__PURE__*/React.createElement(_Base.Base, {
+      variant: "body",
+      size: "base",
+      leading: "tight",
+      tag: "span",
+      weight: "medium"
+    }, label), tooltipProps && /*#__PURE__*/React.createElement(_Tooltip.Tooltip, tooltipProps, /*#__PURE__*/React.createElement(_Icon.Icon, {
+      icon: "Info",
+      className: "cop-h-3 cop-w-3 cop-text-primary"
+    }))), description && /*#__PURE__*/React.createElement("div", {
+      className: "cop-mt-0.5 cop-text-secondary"
+    }, /*#__PURE__*/React.createElement(_Base.Base, {
+      variant: "body",
+      size: "sm",
+      leading: "normal",
+      tag: "span",
+      weight: "regular"
+    }, description)))));
+  });
+  Radio.displayName = 'Radio';
+});

package/dist/umd/components/RadioGroup/RadioGroup.js

@@ -0,0 +1,60 @@
+// This file is generated by a script. Do not edit this file directly.
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "react", "../../common/ChoiceGroupLayout/ChoiceGroupLayout"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("react"), require("../../common/ChoiceGroupLayout/ChoiceGroupLayout"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.react, global.ChoiceGroupLayout);
+    global.RadioGroup = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react, _ChoiceGroupLayout) {
+  "use strict";
+
+  Object.defineProperty(_exports, "__esModule", {
+    value: true
+  });
+  _exports.useRadioGroup = _exports.RadioGroup = void 0;
+  _react = _interopRequireWildcard(_react);
+  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+  var RadioGroupContext = /*#__PURE__*/(0, _react.createContext)(null);
+  var useRadioGroup = _exports.useRadioGroup = function useRadioGroup() {
+    var context = (0, _react.useContext)(RadioGroupContext);
+    return context;
+  };
+  var RadioGroup = _exports.RadioGroup = function RadioGroup(_ref) {
+    var label = _ref.label,
+      description = _ref.description,
+      error = _ref.error,
+      helperText = _ref.helperText,
+      _ref$direction = _ref.direction,
+      direction = _ref$direction === void 0 ? _ChoiceGroupLayout.ChoiceGroupDirection.VERTICAL : _ref$direction,
+      _ref$layout = _ref.layout,
+      layout = _ref$layout === void 0 ? _ChoiceGroupLayout.ChoiceGroupColumns.SingleCol : _ref$layout,
+      value = _ref.value,
+      onChange = _ref.onChange,
+      children = _ref.children,
+      className = _ref.className,
+      tooltipProps = _ref.tooltipProps;
+    return /*#__PURE__*/_react["default"].createElement(RadioGroupContext.Provider, {
+      value: {
+        value: value,
+        onChange: onChange
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_ChoiceGroupLayout.ChoiceGroupLayout, {
+      label: label,
+      description: description,
+      error: error,
+      helperText: helperText,
+      tooltipProps: tooltipProps,
+      className: className,
+      direction: direction,
+      layout: layout
+    }, children));
+  };
+});

package/dist/umd/components/Search/Search.js

@@ -0,0 +1,120 @@
+// This file is generated by a script. Do not edit this file directly.
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "react", "../Button", "../Input", "../Icon"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("react"), require("../Button"), require("../Input"), require("../Icon"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.react, global.Button, global.Input, global.Icon);
+    global.Search = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react, _Button, _Input, _Icon) {
+  "use strict";
+
+  Object.defineProperty(_exports, "__esModule", {
+    value: true
+  });
+  _exports.Search = Search;
+  _react = _interopRequireWildcard(_react);
+  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+  function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+  function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+  function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+  function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+  function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+  function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+  function Search(_ref) {
+    var _ref$align = _ref.align,
+      align = _ref$align === void 0 ? 'left' : _ref$align,
+      onSearch = _ref.onSearch;
+    var inputRef = (0, _react.useRef)(null);
+    var _useState = (0, _react.useState)(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      query = _useState2[0],
+      setQuery = _useState2[1];
+    var _useState3 = (0, _react.useState)(true),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isInitial = _useState4[0],
+      setIsInitial = _useState4[1];
+    var _useState5 = (0, _react.useState)('closed'),
+      _useState6 = _slicedToArray(_useState5, 2),
+      interactiveStatus = _useState6[0],
+      setInteractiveStatus = _useState6[1];
+    var buttonStatus = {
+      closed: 'cop-pointer-events-auto',
+      open: 'open cop-pointer-events-none cop-opacity-0'
+    }[interactiveStatus];
+    var inputStatus = {
+      closed: 'cop-pointer-events-none cop-scale-x-0',
+      open: 'open cop-pointer-events-auto cop-scale-x-100 cop-origin-left'
+    }[interactiveStatus];
+    var inputOrigin = {
+      left: 'cop-origin-left',
+      right: 'cop-origin-right'
+    }[align];
+    var alignment = {
+      left: 'cop-left-0',
+      right: 'cop-right-0'
+    }[align];
+    (0, _react.useEffect)(function () {
+      var timeout = setTimeout(function () {
+        onSearch(query);
+      }, 300);
+      return function () {
+        return clearTimeout(timeout);
+      };
+    }, [query, onSearch]);
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "cop-flex-end cop-relative cop-h-7 cop-flex-1"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "".concat(buttonStatus, " ").concat(alignment, " cop-absolute cop-top-0")
+    }, /*#__PURE__*/_react["default"].createElement(_Button.Button, {
+      label: "Search",
+      onClick: function onClick() {
+        var _inputRef$current;
+        setInteractiveStatus('open');
+        (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+      },
+      prefixIcon: "Search",
+      variant: "secondary"
+    })), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "".concat(inputStatus, " ").concat(inputOrigin, " cop-relative cop-h-full cop-transition")
+    }, /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
+      className: "cop-absolute cop-left-0 cop-top-0 cop-z-10 cop-h-3 cop-w-3 cop-px-3 cop-py-2",
+      icon: "Search"
+    }), /*#__PURE__*/_react["default"].createElement(_Input.Input, {
+      className: ['cop-border-px', 'cop-h-full', 'cop-border-gray-100', 'cop-pl-8', 'cop-outline-0', 'cop-transition', 'focus-within:cop-border-black', 'focus-visible:cop-outline-0', 'focus-visible:cop-ring-0'].join(' '),
+      containerClassName: [alignment, 'cop-absolute', 'cop-top-0', 'cop-h-full', 'cop-border-px', 'cop-w-full'].join(' '),
+      onBlur: function onBlur() {
+        var _inputRef$current2;
+        if ((inputRef === null || inputRef === void 0 || (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.value) === '') {
+          setInteractiveStatus('closed');
+          setIsInitial(true);
+        }
+      },
+      onChange: function onChange(e) {
+        if (isInitial) {
+          setIsInitial(false);
+        }
+        setQuery(e.target.value);
+      },
+      ref: inputRef,
+      value: query
+    }), /*#__PURE__*/_react["default"].createElement("button", {
+      className: ['cop-absolute', 'cop-right-0', 'cop-top-0', 'cop-z-10', 'cop-appearance-none', 'cop-border-0', 'cop-bg-transparent', 'cop-px-3', 'cop-py-2', 'cop-outline-0'].join(' '),
+      onClick: function onClick() {
+        setInteractiveStatus('closed');
+        setIsInitial(true);
+        setQuery('');
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
+      className: "cop-h-3 cop-w-3",
+      icon: "Close"
+    })))));
+  }
+});

package/dist/umd/components/Spinner.js

@@ -0,0 +1,57 @@
+// This file is generated by a script. Do not edit this file directly.
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "react"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("react"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.react);
+    global.Spinner = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, React) {
+  "use strict";
+
+  Object.defineProperty(_exports, "__esModule", {
+    value: true
+  });
+  _exports.Spinner = void 0;
+  React = _interopRequireWildcard(React);
+  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+  var getSizeClassName = function getSizeClassName(size) {
+    switch (size) {
+      case 5:
+        return 'cop-h-5 cop-w-5';
+      case 10:
+      default:
+        return 'cop-h-10 cop-w-10';
+    }
+  };
+
+  /**
+   * Spinner component is used to indicate a loading state of a component or page.
+   */
+  var Spinner = _exports.Spinner = function Spinner(_ref) {
+    var size = _ref.size;
+    return /*#__PURE__*/React.createElement("svg", {
+      className: "".concat(getSizeClassName(size), " cop-animate-rotate"),
+      color: "currentColor",
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: "22 22 44 44"
+    }, /*#__PURE__*/React.createElement("circle", {
+      className: "cop-animate-dash-circle",
+      cx: "44",
+      cy: "44",
+      r: "20.2",
+      stroke: "currentColor",
+      strokeWidth: "3.6",
+      strokeDasharray: "1,200",
+      strokeDashoffset: "0"
+    }));
+  };
+});

package/dist/umd/components/Spinner.stories.js

@@ -0,0 +1,40 @@
+// This file is generated by a script. Do not edit this file directly.
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "src/components/Spinner"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("src/components/Spinner"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.Spinner);
+    global.SpinnerStories = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _Spinner) {
+  "use strict";
+
+  Object.defineProperty(_exports, "__esModule", {
+    value: true
+  });
+  _exports["default"] = _exports.Small = _exports.Large = void 0;
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+  var meta = {
+    title: "Spinner",
+    component: _Spinner.Spinner,
+    // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+    tags: ["autodocs"]
+  };
+  var _default = _exports["default"] = meta;
+  // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+  var Large = _exports.Large = {
+    args: {
+      size: 10
+    }
+  };
+  var Small = _exports.Small = {
+    args: {
+      size: 5
+    }
+  };
+});