@assembly-js/design-system 2.4.0

package/dist/umd/components/Callout/Callout.js

@@ -0,0 +1,117 @@
+// 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", "../Typography", "../Icon", "cva", "../Button", "../TextLink/TextLink"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("react"), require("../Typography"), require("../Icon"), require("cva"), require("../Button"), require("../TextLink/TextLink"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.react, global.Typography, global.Icon, global.cva, global.Button, global.TextLink);
+    global.Callout = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react, _Typography, _Icon, _cva, _Button, _TextLink) {
+  "use strict";
+
+  Object.defineProperty(_exports, "__esModule", {
+    value: true
+  });
+  _exports.Callout = void 0;
+  _react = _interopRequireDefault(_react);
+  function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+  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); }
+  var mapIconToStatus = function mapIconToStatus(status) {
+    switch (status) {
+      case 'info':
+        return 'Info';
+      case 'success':
+        return 'Success';
+      case 'warning':
+        return 'Warning';
+      case 'error':
+        return 'Failed';
+      case 'highlight':
+        return 'New';
+      default:
+        return 'Info';
+    }
+  };
+  var calloutStyles = (0, _cva.cva)({
+    base: 'cop-flex cop-text-primary cop-gap-2 cop-p-3 cop-rounded',
+    variants: {
+      variant: {
+        info: 'cop-bg-info',
+        success: 'cop-bg-success',
+        warning: 'cop-bg-warning',
+        error: 'cop-bg-error',
+        neutral: 'cop-bg-secondary',
+        highlight: 'cop-bg-highlight'
+      }
+    },
+    defaultVariants: {
+      variant: 'info'
+    }
+  });
+  var iconStyles = (0, _cva.cva)({
+    base: 'cop-h-[13px] cop-w-[13px] cop-min-w-[13px] cop-mt-[4.5px]',
+    variants: {
+      variant: {
+        info: 'cop-text-info',
+        success: 'cop-text-success',
+        warning: 'cop-text-warning',
+        error: 'cop-text-error',
+        highlight: 'cop-text-highlight',
+        neutral: ''
+      }
+    },
+    defaultVariants: {
+      variant: 'info'
+    }
+  });
+  var Callout = _exports.Callout = function Callout(_ref) {
+    var _ref2, _ref3;
+    var title = _ref.title,
+      description = _ref.description,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'info' : _ref$variant,
+      onClose = _ref.onClose,
+      actionLabel = _ref.actionLabel,
+      onActionClick = _ref.onActionClick,
+      actionProps = _ref.actionProps,
+      footerAction = _ref.footerAction,
+      icon = _ref.icon;
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: calloutStyles({
+        variant: variant
+      })
+    }, variant !== 'neutral' && /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
+      icon: icon !== null && icon !== void 0 ? icon : mapIconToStatus(variant),
+      className: iconStyles({
+        variant: variant
+      })
+    }), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "cop-flex-1"
+    }, /*#__PURE__*/_react["default"].createElement(_Typography.Heading, {
+      size: "base"
+    }, title), /*#__PURE__*/_react["default"].createElement(_Typography.Body, {
+      size: "base"
+    }, description), footerAction && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "cop-mt-2"
+    }, /*#__PURE__*/_react["default"].createElement(_TextLink.TextLink, footerAction))), onClose && /*#__PURE__*/_react["default"].createElement(_Button.IconButton, {
+      className: "cop-ml-auto cop-self-start",
+      size: "sm",
+      icon: "Close",
+      variant: "minimal",
+      onClick: onClose
+    }), ((_ref2 = actionLabel && onActionClick) !== null && _ref2 !== void 0 ? _ref2 : actionProps) && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "cop-self-center"
+    }, /*#__PURE__*/_react["default"].createElement(_Button.Button, _extends({
+      label: (_ref3 = actionLabel !== null && actionLabel !== void 0 ? actionLabel : actionProps === null || actionProps === void 0 ? void 0 : actionProps.label) !== null && _ref3 !== void 0 ? _ref3 : '',
+      className: "cop-ml-auto cop-w-max",
+      size: "sm",
+      variant: "secondary",
+      onClick: onActionClick
+    }, actionProps))));
+  };
+});

package/dist/umd/components/Checkbox/Checkbox.js

@@ -0,0 +1,128 @@
+// 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", "../CheckboxGroup/CheckboxGroup", "cva", "../Tooltip/Tooltip"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("react"), require("../../common/utils"), require("../Typography/Base"), require("../Icon"), require("../CheckboxGroup/CheckboxGroup"), require("cva"), require("../Tooltip/Tooltip"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.react, global.utils, global.Base, global.Icon, global.CheckboxGroup, global.cva, global.Tooltip);
+    global.Checkbox = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, React, _utils, _Base, _Icon, _CheckboxGroup, _cva, _Tooltip) {
+  "use strict";
+
+  Object.defineProperty(_exports, "__esModule", {
+    value: true
+  });
+  _exports.CheckboxSize = _exports.Checkbox = 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 CheckboxSize = _exports.CheckboxSize = /*#__PURE__*/function (CheckboxSize) {
+    CheckboxSize["DEFAULT"] = "default";
+    CheckboxSize["LARGE"] = "lg";
+    return CheckboxSize;
+  }({});
+  var checkboxContainerStyles = (0, _cva.cva)({
+    base: 'cop-box-border cop-flex cop-cursor-pointer cop-rounded-[3px] cop-border cop-border-solid cop-p-0 cop-outline-none  peer-focus-visible:cop-outline-2 peer-focus-visible:cop-outline-[#0071E3] flex cop-justify-center cop-items-center',
+    variants: {
+      size: _defineProperty(_defineProperty({}, CheckboxSize.DEFAULT, 'cop-h-4 cop-w-4'), CheckboxSize.LARGE, 'cop-h-[18px] cop-w-[18px]'),
+      checked: {
+        "true": 'cop-border-primary cop-bg-[#212b36] cop-text-white hover:cop-border-[#36424D] hover:!cop-bg-[#36424D]',
+        "false": 'cop-border-gray-300 hover:cop-bg-[#F8F9FB]'
+      },
+      disabled: {
+        "true": 'cop-pointer-events-none',
+        "false": ''
+      }
+    },
+    compoundVariants: [{
+      checked: false,
+      disabled: true,
+      className: '!cop-bg-secondary'
+    }, {
+      checked: true,
+      disabled: true,
+      className: '!cop-border-secondary !cop-bg-secondary !cop-text-gray-400'
+    }]
+  });
+  var Checkbox = _exports.Checkbox = /*#__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 ? CheckboxSize.DEFAULT : _props$size,
+      classes = props.classes,
+      rest = _objectWithoutProperties(props, _excluded);
+    var groupContext = (0, _CheckboxGroup.useCheckboxGroup)();
+
+    // 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.includes(String(rest.value)) : controlledChecked;
+    var handleChange = function handleChange(event) {
+      if (isPartOfGroup && groupContext !== null && groupContext !== void 0 && groupContext.onChange) {
+        groupContext.onChange(event.target.value);
+      } 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", null, /*#__PURE__*/React.createElement("input", _extends({
+      className: "cop-peer cop-sr-only cop-fixed",
+      ref: ref,
+      type: "checkbox",
+      checked: checked,
+      onChange: handleChange,
+      disabled: disabled
+    }, rest)), /*#__PURE__*/React.createElement("div", {
+      className: (0, _utils.cn)(checkboxContainerStyles({
+        checked: checked,
+        disabled: disabled,
+        size: size
+      }), classes === null || classes === void 0 ? void 0 : classes.input)
+    }, checked && /*#__PURE__*/React.createElement(_Icon.Icon, {
+      className: "cop-h-3 cop-w-3",
+      icon: "Check"
+    }))), /*#__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("div", null, /*#__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)))));
+  });
+  Checkbox.displayName = 'Checkbox';
+});

package/dist/umd/components/CheckboxGroup/CheckboxGroup.js

@@ -0,0 +1,72 @@
+// 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.CheckboxGroup = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react, _ChoiceGroupLayout) {
+  "use strict";
+
+  Object.defineProperty(_exports, "__esModule", {
+    value: true
+  });
+  _exports.useCheckboxGroup = _exports.CheckboxGroup = 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; }
+  function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+  function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread 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 _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+  function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+  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; }
+  var CheckboxGroupContext = /*#__PURE__*/(0, _react.createContext)(null);
+  var useCheckboxGroup = _exports.useCheckboxGroup = function useCheckboxGroup() {
+    var context = (0, _react.useContext)(CheckboxGroupContext);
+    return context;
+  };
+  var CheckboxGroup = _exports.CheckboxGroup = function CheckboxGroup(_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;
+    var handleCheckboxChange = function handleCheckboxChange(checkboxValue) {
+      var newValue = value.includes(checkboxValue) ? value.filter(function (v) {
+        return v !== checkboxValue;
+      }) : [].concat(_toConsumableArray(value), [checkboxValue]);
+      onChange(newValue);
+    };
+    return /*#__PURE__*/_react["default"].createElement(CheckboxGroupContext.Provider, {
+      value: {
+        value: value,
+        onChange: handleCheckboxChange
+      }
+    }, /*#__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/Chip/Chip.js

@@ -0,0 +1,165 @@
+// This file is generated by a script. Do not edit this file directly.
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "cva", "react", "../Typography", "../../common/utils", "../Icon", "../../icons", "./ChipColorDisplay"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("cva"), require("react"), require("../Typography"), require("../../common/utils"), require("../Icon"), require("../../icons"), require("./ChipColorDisplay"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.cva, global.react, global.Typography, global.utils, global.Icon, global.icons, global.ChipColorDisplay);
+    global.Chip = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _cva, _react, _Typography, _utils, _Icon, icons, _ChipColorDisplay) {
+  "use strict";
+
+  Object.defineProperty(_exports, "__esModule", {
+    value: true
+  });
+  _exports.Chip = void 0;
+  _react = _interopRequireDefault(_react);
+  icons = _interopRequireWildcard(icons);
+  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 _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+  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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+  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); }
+  // Type guard function to validate IconType
+  var isIconType = function isIconType(icon) {
+    return typeof icon === 'string' && Object.keys(icons).includes(icon);
+  };
+  var chipStyles = (0, _cva.cva)({
+    base: 'cop-inline-flex cop-items-center cop-justify-center cop-gap-1.5 cop-rounded-[4px] cop-border cop-border-solid cop-box-border',
+    variants: {
+      variant: {
+        "default": 'hover:cop-bg-[#F8F9FB] active:cop-bg-secondary cop-border-transparent',
+        outlined: 'hover:cop-bg-[#F8F9FB] active:cop-bg-secondary cop-border-secondary',
+        filled: 'cop-bg-secondary hover:cop-bg-input-gray active:cop-bg-[#C9CBCD] focus:cop-bg-secondary'
+      },
+      size: {
+        lg: 'cop-px-3 cop-h-10',
+        md: 'cop-px-3 cop-py-0.5',
+        sm: 'cop-px-2 cop-py-[1px]'
+      },
+      disabled: {
+        "true": 'cop-pointer-events-none'
+      }
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'sm',
+      disabled: false
+    },
+    compoundVariants: [{
+      variant: 'default',
+      disabled: true,
+      "class": 'cop-bg-[#F8F9FB] cop-text-gray-300'
+    }, {
+      variant: 'outlined',
+      disabled: true,
+      "class": 'cop-bg-[#F8F9FB] cop-text-gray-300'
+    }, {
+      variant: 'filled',
+      disabled: true,
+      "class": 'cop-text-disabled cop-border-[#DFE1E4]'
+    }, {
+      variant: 'filled',
+      disabled: false,
+      "class": 'cop-border-transparent'
+    }]
+  });
+  var chipIconStyles = (0, _cva.cva)({
+    variants: {
+      size: {
+        sm: 'cop-h-[11px] cop-w-[11px]',
+        md: 'cop-h-3 cop-w-3',
+        lg: 'cop-h-3 cop-w-3'
+      }
+    },
+    defaultVariants: {
+      size: 'sm'
+    }
+  });
+  var RenderIcon = function RenderIcon(_ref) {
+    var icon = _ref.icon,
+      className = _ref.className;
+    if (!icon) {
+      return null;
+    }
+    if (typeof icon === 'string' && isIconType(icon)) {
+      return /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
+        icon: icon,
+        className: className
+      });
+    }
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, icon);
+  };
+  var Chip = _exports.Chip = function Chip(_ref2) {
+    var color = _ref2.color,
+      _ref2$variant = _ref2.variant,
+      variant = _ref2$variant === void 0 ? 'default' : _ref2$variant,
+      label = _ref2.label,
+      _ref2$size = _ref2.size,
+      size = _ref2$size === void 0 ? 'sm' : _ref2$size,
+      className = _ref2.className,
+      prefixIcon = _ref2.prefixIcon,
+      disabled = _ref2.disabled,
+      onClick = _ref2.onClick,
+      onClose = _ref2.onClose,
+      ariaPressed = _ref2['aria-pressed'];
+    var handleClose = function handleClose(e) {
+      e.stopPropagation();
+      onClose === null || onClose === void 0 || onClose(e);
+    };
+
+    // Conditionally set wrapper props based on whether onClick is provided
+    var wrapperProps = _objectSpread({
+      className: (0, _utils.cn)(chipStyles({
+        variant: variant,
+        size: size,
+        disabled: disabled
+      }), {
+        'cop-cursor-pointer focus:cop-outline-none focus:cop-outline-[1.5px] focus:cop-outline-offset-[1px] focus:cop-outline-primary': onClick
+      }, {
+        'cop-cursor-default hover:cop-bg-transparent cop-text-primary active:cop-bg-white': !onClick
+      }, className)
+    }, onClick && {
+      'aria-disabled': disabled,
+      role: 'button',
+      tabIndex: disabled ? -1 : 0,
+      onClick: disabled ? undefined : onClick,
+      'aria-pressed': ariaPressed
+    });
+    return /*#__PURE__*/_react["default"].createElement("div", wrapperProps, color && !prefixIcon && /*#__PURE__*/_react["default"].createElement(_ChipColorDisplay.ChipColorDisplay, {
+      color: color
+    }), prefixIcon && !color && /*#__PURE__*/_react["default"].createElement(RenderIcon, {
+      icon: prefixIcon,
+      className: chipIconStyles({
+        size: size
+      })
+    }), /*#__PURE__*/_react["default"].createElement(_Typography.Body, {
+      size: size !== 'sm' ? 'base' : 'sm'
+    }, label), Boolean(onClose) ?
+    /*#__PURE__*/
+    // We intentionally attach both onClick and onTouch event
+    // handler to make sure click event are supported in
+    // both mobile and desktop. e.g. in react-select
+    // component, without having a touch event handler
+    // it will not remove the chip when clicking on the close icon
+    // in mobile.
+    _react["default"].createElement("span", {
+      onClick: handleClose,
+      onTouchEnd: handleClose
+    }, /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
+      icon: "Close",
+      className: chipIconStyles({
+        size: size
+      })
+    })) : null);
+  };
+});

package/dist/umd/components/Chip/ChipColorDisplay.js

@@ -0,0 +1,35 @@
+// 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", "../../theme/colors"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("react"), require("../../theme/colors"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.react, global.colors);
+    global.ChipColorDisplay = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react, _colors) {
+  "use strict";
+
+  Object.defineProperty(_exports, "__esModule", {
+    value: true
+  });
+  _exports.ChipColorDisplay = void 0;
+  _react = _interopRequireDefault(_react);
+  function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+  var isCategoricalColor = function isCategoricalColor(color) {
+    return Object.keys(_colors.categoricalColors).includes(color);
+  };
+  var ChipColorDisplay = _exports.ChipColorDisplay = function ChipColorDisplay(_ref) {
+    var color = _ref.color;
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: 'cop-h-2 cop-min-h-2 cop-w-2 cop-min-w-2 cop-rounded-full',
+      style: {
+        backgroundColor: isCategoricalColor(color) ? "var(--".concat(color, "-primary)") : color
+      }
+    });
+  };
+});

package/dist/umd/components/Icon.js

@@ -0,0 +1,37 @@
+// 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", "../icons"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("react"), require("../icons"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.react, global.icons);
+    global.Icon = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react, icons) {
+  "use strict";
+
+  Object.defineProperty(_exports, "__esModule", {
+    value: true
+  });
+  _exports.Icon = void 0;
+  _react = _interopRequireDefault(_react);
+  icons = _interopRequireWildcard(icons);
+  var _excluded = ["icon"];
+  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 _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+  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 Icon = _exports.Icon = function Icon(_ref) {
+    var icon = _ref.icon,
+      props = _objectWithoutProperties(_ref, _excluded);
+    var IconComponent = icons[icon];
+    if (!IconComponent) return null;
+    return /*#__PURE__*/_react["default"].createElement(IconComponent, props);
+  };
+});

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

@@ -0,0 +1,24 @@
+// 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"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("react"), require("../../common/utils"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.react, global.utils);
+    global.Base = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react, _utils) {
+  "use strict";
+
+  Object.defineProperty(_exports, "__esModule", {
+    value: true
+  });
+  _exports.inputClasses = void 0;
+  _react = _interopRequireDefault(_react);
+  function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+  var inputClasses = _exports.inputClasses = (0, _utils.cn)('cop-bg-background', 'cop-border-solid', 'cop-border', 'cop-box-border', 'disabled:cop-cursor-not-allowed', 'disabled:cop-opacity-50', 'file:cop-bg-transparent', 'file:cop-border-0', 'file:cop-font-medium', 'file:cop-text-sm', 'cop-flex', 'focus-visible:cop-outline-none', 'focus-visible:cop-ring-2', 'focus-visible:cop-ring-offset-2', 'focus-visible:cop-ring-ring', 'focus:cop-ring-black', 'cop-font-body', 'cop-h-10', 'placeholder:cop-text-muted-foreground', 'cop-px-3', 'cop-py-0', 'cop-ring-offset-background', 'cop-rounded-md', 'cop-text-sm', 'cop-w-full');
+});

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

@@ -0,0 +1,51 @@
+// 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.Input = 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.Input = void 0;
+  React = _interopRequireWildcard(React);
+  var _excluded = ["className", "type", "label", "error", "labelClassName", "errorClassName", "containerClassName"];
+  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 Input = _exports.Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+    var className = _ref.className,
+      type = _ref.type,
+      label = _ref.label,
+      error = _ref.error,
+      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("input", _extends({
+      type: type,
+      className: (0, _utils.cn)(_Base.inputClasses, 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));
+  });
+  Input.displayName = 'Input';
+});