@capillarytech/blaze-ui 0.1.5 → 0.1.6-alpha.1

package/dist/esm/CapLabel/index.js

@@ -0,0 +1 @@
+export { default } from './CapLabel';

package/dist/esm/CapLabel/styles.js

@@ -0,0 +1,219 @@
+import styled, { css } from 'styled-components';
+import * as styledVars from '../styled/variables';
+var labels = {
+  label1: {
+    color: styledVars.CAP_G04,
+    fontSize: '12px',
+    fontWeight: 'normal',
+    lineHeight: 'normal'
+  },
+  label2: {
+    color: styledVars.CAP_G01,
+    fontSize: '12px',
+    fontWeight: 'normal',
+    lineHeight: 'normal'
+  },
+  label3: {
+    color: styledVars.CAP_G05,
+    fontSize: '12px',
+    fontWeight: 'normal',
+    lineHeight: 'normal'
+  },
+  label4: {
+    color: styledVars.CAP_G01,
+    fontSize: '12px',
+    fontWeight: '500',
+    lineHeight: 'normal'
+  },
+  label5: {
+    color: styledVars.CAP_G01,
+    fontSize: '10px',
+    fontWeight: 'normal',
+    lineHeight: 'normal'
+  },
+  label6: {
+    color: styledVars.CAP_G06,
+    fontSize: '12px',
+    fontWeight: 'normal',
+    lineHeight: 'normal'
+  },
+  label7: {
+    color: styledVars.CAP_G04,
+    fontSize: '14px',
+    fontWeight: '500',
+    lineHeight: 'normal'
+  },
+  label8: {
+    color: styledVars.CAP_G01,
+    fontSize: '12px',
+    fontWeight: '500',
+    lineHeight: 'normal'
+  },
+  label9: {
+    color: styledVars.CAP_G01,
+    fontSize: '12px',
+    fontWeight: 'normal',
+    lineHeight: '16px'
+  },
+  label10: {
+    color: styledVars.CAP_WHITE,
+    fontSize: '12px',
+    fontWeight: 'normal',
+    lineHeight: '16px'
+  },
+  label11: {
+    color: styledVars.CAP_G04,
+    fontSize: '10px',
+    fontWeight: 'normal',
+    lineHeight: 'normal'
+  },
+  label12: {
+    color: styledVars.CAP_WHITE,
+    fontSize: '12px',
+    fontWeight: 'normal',
+    lineHeight: 'normal'
+  },
+  label13: {
+    color: styledVars.CAP_G05,
+    fontSize: '10px',
+    fontWeight: 'normal',
+    lineHeight: 'normal'
+  },
+  label14: {
+    color: styledVars.CAP_G03,
+    fontSize: '14px',
+    fontWeight: 'normal',
+    lineHeight: 'normal'
+  },
+  label15: {
+    color: styledVars.CAP_G01,
+    fontSize: '14px',
+    fontWeight: 'normal',
+    lineHeight: 'normal'
+  },
+  label16: {
+    color: styledVars.CAP_G01,
+    fontSize: '14px',
+    fontWeight: '500',
+    lineHeight: 'normal'
+  },
+  label17: {
+    color: styledVars.CAP_G01,
+    fontSize: '16px',
+    fontWeight: '500',
+    lineHeight: 'normal'
+  },
+  label18: {
+    color: styledVars.CAP_G04,
+    fontSize: '14px',
+    fontWeight: 'normal',
+    lineHeight: 'normal'
+  },
+  label19: {
+    color: 'rgba(0, 0, 0, 0.87)',
+    fontSize: '12px',
+    fontWeight: 'normal',
+    lineHeight: '16px'
+  },
+  label20: {
+    color: styledVars.CAP_SECONDARY.base,
+    fontSize: '14px',
+    fontWeight: '500',
+    lineHeight: 'normal'
+  },
+  label21: {
+    color: styledVars.CAP_SECONDARY.base,
+    fontSize: '12px',
+    fontWeight: 'normal',
+    lineHeight: 'normal'
+  },
+  label22: {
+    color: styledVars.CAP_G04,
+    fontSize: '24px',
+    fontWeight: 'normal',
+    lineHeight: '28px'
+  },
+  label23: {
+    color: styledVars.CAP_WHITE,
+    fontSize: '14px',
+    fontWeight: 'normal',
+    lineHeight: 'normal'
+  },
+  label24: {
+    fontSize: '14px',
+    fontWeight: '400',
+    color: styledVars.CAP_G04,
+    lineHeight: '20px'
+  },
+  label25: {
+    fontSize: '14px',
+    fontWeight: '500',
+    color: styledVars.CAP_G04,
+    lineHeight: '20px'
+  },
+  label26: {
+    fontSize: '10px',
+    fontWeight: '400',
+    color: styledVars.CAP_G01,
+    lineHeight: '12px'
+  },
+  label27: {
+    fontSize: '12px',
+    fontWeight: '500',
+    color: styledVars.CAP_SECONDARY.base,
+    lineHeight: '16px'
+  },
+  label28: {
+    fontSize: '12px',
+    fontWeight: '500',
+    color: styledVars.CAP_WHITE,
+    lineHeight: '16px'
+  },
+  label29: {
+    fontSize: '10px',
+    fontWeight: '400',
+    color: styledVars.CAP_WHITE,
+    lineHeight: '12px'
+  },
+  label30: {
+    fontSize: '10px',
+    fontWeight: '400',
+    color: styledVars.CAP_WHITE,
+    lineHeight: '12px'
+  },
+  label31: {
+    color: styledVars.CAP_G01,
+    fontSize: '12px',
+    fontWeight: '400',
+    lineHeight: '16px'
+  },
+  label32: {
+    color: styledVars.CAP_WHITE,
+    fontSize: '14px',
+    fontWeight: '500',
+    lineHeight: '20px'
+  },
+  label33: {
+    color: styledVars.CAP_SECONDARY.base,
+    fontSize: '14px',
+    fontWeight: '500',
+    lineHeight: '20px'
+  }
+};
+var labelStyles = css(["font-size:", ";font-weight:", ";color:", ";line-height:", ";margin:0;padding:0;"], function (props) {
+  return labels[props.type].fontSize;
+}, function (props) {
+  return props.fontWeight || labels[props.type].fontWeight;
+}, function (props) {
+  return labels[props.type].color;
+}, function (props) {
+  return props.lineHeight || labels[props.type].lineHeight || 'initial';
+});
+export var LabelWrapper = styled.div.withConfig({
+  displayName: "LabelWrapper",
+  componentId: "sc-1xg855n-0"
+})(["", ""], labelStyles);
+export var LabelInline = styled.span.withConfig({
+  displayName: "LabelInline",
+  componentId: "sc-1xg855n-1"
+})(["", " display:inline-block;"], labelStyles);

package/dist/esm/CapRow/CapRow.js

@@ -0,0 +1,22 @@
+var _excluded = ["className", "children"];
+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], -1 === t.indexOf(o) && {}.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 (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Row } from 'antd';
+import classNames from 'classnames';
+import { RowWrapper } from './styles';
+var CapRow = function CapRow(_ref) {
+  var className = _ref.className,
+    children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(RowWrapper, null, /*#__PURE__*/React.createElement(Row, _extends({}, rest, {
+    className: classNames('cap-row', className)
+  }), React.Children.toArray(children)));
+};
+CapRow.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string
+};
+export default CapRow;

package/dist/esm/CapRow/index.js

@@ -0,0 +1 @@
+export { default } from './CapRow';

package/dist/esm/CapRow/styles.js

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+export var RowWrapper = styled.div.withConfig({
+  displayName: "RowWrapper",
+  componentId: "sc-y3x4h8-0"
+})([".cap-row{display:flex;flex-flow:row wrap;min-width:0;}"]);

package/dist/esm/CapTooltip/CapTooltip.js

@@ -0,0 +1,34 @@
+var _excluded = ["overlayClassName", "children"];
+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], -1 === t.indexOf(o) && {}.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 (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Tooltip } from 'antd';
+import classNames from 'classnames';
+import { TooltipWrapper } from './styles';
+var CapTooltip = function CapTooltip(_ref) {
+  var overlayClassName = _ref.overlayClassName,
+    children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(TooltipWrapper, null, /*#__PURE__*/React.createElement(Tooltip, _extends({
+    overlayClassName: classNames('cap-tooltip', overlayClassName)
+  }, rest), children));
+};
+
+/*
+  NOTE:
+    While using a disabled button with tooltip, wrap the button with an element with className "button-disabled-tooltip-wrapper".
+
+    <CapTooltip title="disabled button with tooltip">
+      <span className="button-disabled-tooltip-wrapper">
+        <CapButton disabled>Button</CapButton>
+      </span>
+    </CapTooltip>
+*/
+
+CapTooltip.propTypes = {
+  overlayClassName: PropTypes.string,
+  children: PropTypes.node
+};
+export default CapTooltip;

package/dist/esm/CapTooltip/index.js

@@ -0,0 +1 @@
+export { default } from './CapTooltip';

package/dist/esm/CapTooltip/styles.js

@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+import * as styledVars from '../styled/variables';
+export var TooltipWrapper = styled.span.withConfig({
+  displayName: "TooltipWrapper",
+  componentId: "sc-17x5zp5-0"
+})([".cap-tooltip{max-width:324px;.ant-tooltip-inner{background-color:", ";font-size:", ";font-weight:", ";padding:6px 8px;min-height:32px;border-radius:", ";}&.cap-bgcolor-tooltip{.ant-tooltip-inner{background-color:", ";}}&.hide-tooltip-pointer{.ant-tooltip-arrow{display:none;}}}.button-disabled-tooltip-wrapper{display:inline-flex;cursor:not-allowed;.cap-button.ant-btn[disabled]{pointer-events:none;& > *{pointer-events:auto;cursor:not-allowed;}}}"], styledVars.FONT_COLOR_01, styledVars.FONT_SIZE_M, styledVars.FONT_WEIGHT_MEDIUM, styledVars.RADIUS_04, styledVars.FONT_COLOR_05);

package/dist/esm/CapUnifiedSelect/CapUnifiedSelect.js

@@ -1,151 +1,101 @@
-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); }
-var _excluded = ["type", "options", "treeData", "value", "onChange", "onSearch", "placeholder", "disabled", "loading", "allowClear", "enableSearch", "maxTagCount", "size", "status", "className", "style", "rightSlotContent", "virtualized"];
 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 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); }
-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], -1 === t.indexOf(o) && {}.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 (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import React, { useMemo, useCallback } from 'react';
+// CapUnifiedSelect component using Ant Design v5 Select and TreeSelect directly
+import React from 'react';
 import PropTypes from 'prop-types';
 import { Select, TreeSelect } from 'antd';
-import styled from 'styled-components';
-import { selectStyles } from './styles';
-import { useIntl } from 'react-intl';
-import messages from './messages';
-var StyledSelect = styled(Select).withConfig({
-  displayName: "StyledSelect",
-  componentId: "sc-wsphu8-0"
-})(["", ""], selectStyles);
-var StyledTreeSelect = styled(TreeSelect).withConfig({
-  displayName: "StyledTreeSelect",
-  componentId: "sc-wsphu8-1"
-})(["", ""], selectStyles);
-var CapUnifiedSelect = function CapUnifiedSelect(_ref) {
+import { SelectWrapper, HeaderWrapper, StyledInfoIcon } from './styles';
+import CapLabel from '../CapLabel';
+import CapTooltip from '../CapTooltip';
+function CapUnifiedSelect(_ref) {
   var type = _ref.type,
-    options = _ref.options,
+    _ref$options = _ref.options,
+    options = _ref$options === void 0 ? [] : _ref$options,
     treeData = _ref.treeData,
     value = _ref.value,
     onChange = _ref.onChange,
-    onSearch = _ref.onSearch,
-    placeholder = _ref.placeholder,
-    disabled = _ref.disabled,
-    loading = _ref.loading,
-    allowClear = _ref.allowClear,
-    enableSearch = _ref.enableSearch,
-    maxTagCount = _ref.maxTagCount,
-    size = _ref.size,
-    status = _ref.status,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? 'Select an option' : _ref$placeholder,
     className = _ref.className,
     style = _ref.style,
-    rightSlotContent = _ref.rightSlotContent,
-    virtualized = _ref.virtualized,
-    restProps = _objectWithoutProperties(_ref, _excluded);
-  var intl = useIntl();
-  var handleChange = useCallback(function (newValue, option) {
-    if (onChange) {
-      onChange(newValue, option);
+    _ref$allowClear = _ref.allowClear,
+    allowClear = _ref$allowClear === void 0 ? false : _ref$allowClear,
+    _ref$showSearch = _ref.showSearch,
+    showSearch = _ref$showSearch === void 0 ? false : _ref$showSearch,
+    label = _ref.label,
+    tooltip = _ref.tooltip,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+  var selectVirtualizationProps = {
+    listHeight: 256
+  };
+  var treeSelectVirtualizationProps = {
+    listHeight: 256,
+    listItemHeight: 32
+  };
+  var renderHeader = function renderHeader() {
+    if (!label && !tooltip) return null;
+    return /*#__PURE__*/React.createElement(HeaderWrapper, {
+      className: disabled ? 'disabled' : ''
+    }, label && /*#__PURE__*/React.createElement(CapLabel, {
+      type: "label16",
+      className: disabled ? 'disabled' : ''
+    }, label), tooltip && /*#__PURE__*/React.createElement(CapTooltip, {
+      title: tooltip
+    }, /*#__PURE__*/React.createElement(StyledInfoIcon, {
+      className: disabled ? 'disabled' : ''
+    })));
+  };
+  var renderDropdown = function renderDropdown() {
+    if (type === 'treeSelect' || type === 'multiTreeSelect') {
+      return /*#__PURE__*/React.createElement(TreeSelect, _extends({
+        treeData: treeData || options,
+        value: value,
+        onChange: onChange,
+        placeholder: placeholder,
+        className: className,
+        style: style,
+        allowClear: allowClear,
+        showSearch: showSearch,
+        multiple: type === 'multiTreeSelect' ? true : false,
+        virtual: true,
+        treeDefaultExpandAll: true,
+        disabled: disabled
+      }, treeSelectVirtualizationProps));
     }
-  }, [onChange]);
-  var handleSearch = useCallback(function (searchText) {
-    if (onSearch) {
-      onSearch(searchText);
-    }
-  }, [onSearch]);
-  var mergedClassName = useMemo(function () {
-    var classes = ['cap-unified-select'];
-    if (className) classes.push(className);
-    return classes.join(' ');
-  }, [className]);
-
-  // Common props for both Select and TreeSelect
-  var commonProps = _objectSpread({
-    value: value,
-    onChange: handleChange,
-    onSearch: enableSearch ? handleSearch : undefined,
-    placeholder: placeholder || intl.formatMessage(messages.selectPlaceholder),
-    disabled: disabled,
-    loading: loading,
-    allowClear: allowClear,
-    showSearch: enableSearch,
-    maxTagCount: maxTagCount,
-    size: size,
-    status: status,
-    className: mergedClassName,
-    style: style,
-    virtual: virtualized,
-    notFoundContent: loading ? intl.formatMessage(messages.loading) : intl.formatMessage(messages.noData)
-  }, restProps);
-
-  // Render right slot content if provided
-  var suffixIcon = rightSlotContent && /*#__PURE__*/React.createElement("div", {
-    className: "cap-unified-select-right-slot"
-  }, rightSlotContent);
-
-  // For tree-based selects
-  if (type === 'treeSelect' || type === 'multiTreeSelect') {
-    return /*#__PURE__*/React.createElement(StyledTreeSelect, _extends({}, commonProps, {
-      treeData: treeData,
-      multiple: type === 'multiTreeSelect',
-      suffixIcon: suffixIcon
-    }));
-  }
-
-  // For regular selects
-  return /*#__PURE__*/React.createElement(StyledSelect, _extends({}, commonProps, {
-    mode: type === 'multiSelect' ? 'multiple' : undefined,
-    options: options,
-    suffixIcon: suffixIcon
-  }));
-};
+    return /*#__PURE__*/React.createElement(Select, _extends({
+      value: value,
+      onChange: onChange,
+      placeholder: placeholder,
+      className: className,
+      style: style,
+      allowClear: allowClear,
+      showSearch: showSearch,
+      options: options,
+      mode: type === 'multiSelect' ? 'multiple' : undefined,
+      virtual: true,
+      disabled: disabled
+    }, selectVirtualizationProps));
+  };
+  return /*#__PURE__*/React.createElement(SelectWrapper, null, renderHeader(), renderDropdown());
+}
 CapUnifiedSelect.propTypes = {
-  type: PropTypes.oneOf(['select', 'multiSelect', 'treeSelect', 'multiTreeSelect']).isRequired,
-  options: PropTypes.arrayOf(PropTypes.shape({
-    label: PropTypes.node,
-    value: PropTypes.any,
-    disabled: PropTypes.bool
-  })),
-  treeData: PropTypes.arrayOf(PropTypes.shape({
-    title: PropTypes.node,
-    value: PropTypes.any,
-    children: PropTypes.array,
-    disabled: PropTypes.bool
-  })),
+  type: PropTypes.oneOf(['select', 'multiSelect', 'treeSelect', 'multiTreeSelect']),
+  options: PropTypes.array,
+  treeData: PropTypes.array,
   value: PropTypes.any,
   onChange: PropTypes.func,
-  onSearch: PropTypes.func,
-  placeholder: PropTypes.string,
-  disabled: PropTypes.bool,
-  loading: PropTypes.bool,
-  allowClear: PropTypes.bool,
-  enableSearch: PropTypes.bool,
-  maxTagCount: PropTypes.number,
-  size: PropTypes.oneOf(['small', 'middle', 'large']),
-  status: PropTypes.oneOf(['error', 'warning']),
+  placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   className: PropTypes.string,
   style: PropTypes.object,
-  rightSlotContent: PropTypes.node,
-  virtualized: PropTypes.bool
+  allowClear: PropTypes.bool,
+  showSearch: PropTypes.bool,
+  label: PropTypes.string,
+  tooltip: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  disabled: PropTypes.bool
 };
 CapUnifiedSelect.defaultProps = {
-  options: [],
-  treeData: [],
-  value: undefined,
-  onChange: undefined,
-  onSearch: undefined,
-  placeholder: '',
-  disabled: false,
-  loading: false,
-  allowClear: true,
-  enableSearch: false,
-  maxTagCount: undefined,
-  size: 'middle',
-  status: undefined,
-  className: '',
-  style: {},
-  rightSlotContent: null,
-  virtualized: true
+  type: 'select',
+  allowClear: false,
+  showSearch: false
 };
 export default CapUnifiedSelect;

package/dist/esm/CapUnifiedSelect/styles.js

@@ -1,3 +1,15 @@
-import { css } from 'styled-components';
+import styled, { css } from 'styled-components';
 import * as styledVars from '../styled/variables';
+export var SelectWrapper = styled.div.withConfig({
+  displayName: "SelectWrapper",
+  componentId: "sc-3v7xpu-0"
+})(["display:flex;flex-direction:column;gap:8px;width:100%;&.disabled{cursor:not-allowed;}"]);
+export var HeaderWrapper = styled.div.withConfig({
+  displayName: "HeaderWrapper",
+  componentId: "sc-3v7xpu-1"
+})(["display:flex;align-items:center;gap:4px;&.disabled{opacity:0.5;cursor:not-allowed;}"]);
+export var StyledInfoIcon = styled.span.withConfig({
+  displayName: "StyledInfoIcon",
+  componentId: "sc-3v7xpu-2"
+})(["color:", ";font-size:16px;cursor:help;&:hover{color:", ";}&.disabled{cursor:not-allowed;&:hover{color:", ";}}"], styledVars.CAP_G2, styledVars.CAP_G1, styledVars.CAP_G2);
 export var selectStyles = css(["&.cap-unified-select{width:100%;font-family:", ";.ant-select-selector{border-radius:", ";transition:", ";padding:0 12px;min-height:32px;display:flex;align-items:center;&:hover{border-color:", ";}}.cap-unified-select-right-slot{display:flex;align-items:center;gap:8px;margin-left:8px;}&.ant-select-focused{.ant-select-selector{border-color:", " !important;box-shadow:none !important;}}&.ant-select-status-error{.ant-select-selector{border-color:", ";}}&.ant-select-disabled{.ant-select-selector{background-color:", ";cursor:not-allowed;}}.ant-select-dropdown{padding:4px;border-radius:", ";box-shadow:0 2px 8px rgba(0,0,0,0.15);.ant-select-item{border-radius:", ";padding:8px 12px;transition:", ";&-option-selected{background-color:", ";color:", ";font-weight:500;}&-option-active{background-color:", ";}}.ant-select-search{padding:8px;input{border-radius:", ";transition:", ";&:focus{border-color:", ";box-shadow:none;}}}}&.ant-select-multiple{.ant-select-selection-item{background-color:", ";border-color:", ";border-radius:", ";color:", ";margin:2px 4px 2px 0;padding:0 8px;height:24px;line-height:22px;&-remove{color:", ";&:hover{color:", ";}}}.ant-select-selection-overflow{flex-wrap:wrap;gap:4px;}}.ant-select-tree{padding:4px 0;.ant-select-tree-node-content-wrapper{padding:4px 8px;border-radius:", ";transition:", ";&:hover{background-color:", ";}&.ant-select-tree-node-selected{background-color:", ";color:", ";font-weight:500;}}.ant-select-tree-switcher{width:24px;height:24px;line-height:24px;}.ant-select-tree-checkbox{margin:4px 8px 4px 0;}}&.ant-select-lg{.ant-select-selector{height:40px;padding:0 16px;}.ant-select-selection-item{height:28px;line-height:26px;}}&.ant-select-sm{.ant-select-selector{height:24px;padding:0 8px;}.ant-select-selection-item{height:20px;line-height:18px;}}&.ant-select-loading{.ant-select-arrow{.anticon-loading{color:", ";}}}}"], styledVars.FONT_FAMILY, styledVars.RADIUS_04, styledVars.TRANSITION_ALL, styledVars.CAP_G11, styledVars.CAP_G01, styledVars.CAP_RED, styledVars.CAP_G08, styledVars.RADIUS_04, styledVars.RADIUS_04, styledVars.TRANSITION_ALL, styledVars.CAP_PRIMARY.light, styledVars.CAP_PRIMARY.base, styledVars.CAP_G08, styledVars.RADIUS_04, styledVars.TRANSITION_ALL, styledVars.CAP_G01, styledVars.CAP_PRIMARY.light, styledVars.CAP_PRIMARY.light, styledVars.RADIUS_04, styledVars.CAP_PRIMARY.base, styledVars.CAP_PRIMARY.base, styledVars.CAP_PRIMARY.hover, styledVars.RADIUS_04, styledVars.TRANSITION_ALL, styledVars.CAP_G08, styledVars.CAP_PRIMARY.light, styledVars.CAP_PRIMARY.base, styledVars.CAP_PRIMARY.base);

package/dist/esm/styled/index.js

@@ -1,5 +1 @@
-import * as styledVars from './variables';
-export default styledVars;
-
-// Re-export all variables for easier access
 export * from './variables';

package/dist/esm/styled/variables.js

@@ -5,13 +5,14 @@
 export var CAP_PRIMARY = {
   base: "#47af46",
   hover: "#1f9a1d",
-  disabled: "#a1d8a0"
+  disabled: "#a1d8a0",
+  light: "rgba(71, 175, 70, 0.1)"
 };
 
 // Secondary colors
 export var CAP_SECONDARY = {
   base: "#2466ea",
-  light: 'rgba("#2466ea", 0.1)'
+  light: "rgba(36, 102, 234, 0.1)"
 };
 
 // Custom colors
@@ -69,20 +70,54 @@ export var FONT_FAMILY = '"Roboto", sans-serif';
 export var FONT_WEIGHT_REGULAR = 400;
 export var FONT_WEIGHT_MEDIUM = 500;
 
-/* Spacing */
-// ==============
-export var SPACING_04 = "4px";
-export var SPACING_08 = "8px";
-export var SPACING_12 = "12px";
-export var SPACING_16 = "16px";
-export var SPACING_24 = "24px";
-export var SPACING_32 = "32px";
+// Font colors
+export var FONT_COLOR_01 = "#091E42";
+export var FONT_COLOR_02 = "#5E6C84";
+export var FONT_COLOR_03 = "#97A0AF";
+export var FONT_COLOR_04 = "#B3BAC5";
+export var FONT_COLOR_05 = "#2466EA";
+export var FONT_COLOR_06 = "#FFFFFF";
 
-/* Border Radius */
-// ==============
+// Font sizes
+export var FONT_SIZE_VL = "24px";
+export var FONT_SIZE_L = "16px";
+export var FONT_SIZE_M = "14px";
+export var FONT_SIZE_S = "12px";
+export var FONT_SIZE_VS = "10px";
+
+// Icon sizes
+export var ICON_SIZE_XS = "12px";
+export var ICON_SIZE_S = "16px";
+export var ICON_SIZE_M = "24px";
+export var ICON_SIZE_L = "32px";
+
+// Sizes & Spacings (1rem === 14px as base font size of root is 14px)
+export var CAP_SPACE_02 = "0.142rem";
+export var CAP_SPACE_04 = "0.285rem";
+export var CAP_SPACE_08 = "0.571rem";
+export var CAP_SPACE_12 = "0.857rem";
+export var CAP_SPACE_16 = "1.142rem";
+export var CAP_SPACE_20 = "1.428rem";
+export var CAP_SPACE_24 = "1.714rem";
+export var CAP_SPACE_28 = "2rem";
+export var CAP_SPACE_32 = "2.285rem";
+export var CAP_SPACE_36 = "2.571rem";
+export var CAP_SPACE_40 = "2.857rem";
+export var CAP_SPACE_44 = "3.142rem";
+export var CAP_SPACE_48 = "3.428rem";
+export var CAP_SPACE_52 = "3.714rem";
+export var CAP_SPACE_56 = "4rem";
+export var CAP_SPACE_60 = "4.286rem";
+export var CAP_SPACE_64 = "4.571rem";
+export var CAP_SPACE_72 = "5.143rem";
+export var CAP_SPACE_80 = "5.714rem";
+export var CAP_SPACE_140 = "10rem";
+
+// Border Radius
+export var RADIUS_02 = "2px";
 export var RADIUS_04 = "4px";
 export var RADIUS_08 = "8px";
+export var RADIUS_16 = "16px";
 
-/* Transition */
-// ==============
-export var TRANSITION_ALL = "all 0.3s ease";
+// Transitions
+export var TRANSITION_ALL = "all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)";