npm - @activecollab/components - Versions diffs - 1.0.153 → 1.0.156 - Mend

@activecollab/components 1.0.153 → 1.0.156

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (452) hide show

package/dist/cjs/components/ComboBox/ComboBox.js CHANGED Viewed

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ComboBox = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _react = _interopRequireWildcard(require("react"));
 var _RadioButton = require("../RadioButton");
@@ -37,24 +39,22 @@ var _Chip = require("../Chip");
 var _Styles2 = require("../Input/Styles");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _useOnClickOutside = require("../../hooks/useOnClickOutside");
-var _Typography = require("../Typography/Typography");
+var _Avatar = require("../Avatar");
 var _Trigger = require("../Trigger");
-var _useOnClickOutside = require("../../hooks/useOnClickOutside");
-var _Avatar = require("../Avatar");
+var _Typography = require("../Typography/Typography");
 var _excluded = ["options", "selected", "loading", "loadingText", "onChange", "placeholder", "handleEmptyAction", "disabled", "size", "invalid", "type", "renderChip", "forceCloseMenu", "renderOption", "limitChips", "hiddenNumberText"];
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -233,7 +233,6 @@ var ComboBox = function ComboBox(_ref) {
     }
     var avatarProps = {
-      className: "tw-my-0.5 tw-mr-0.5",
       size: 18
     };
@@ -247,9 +246,17 @@ var ComboBox = function ComboBox(_ref) {
         break;
     }
-    var leftAdornment = option.image ? /*#__PURE__*/_react.default.createElement(_Avatar.Avatar, _extends({
+    var leftAdornment = option.image ? /*#__PURE__*/_react.default.createElement(_StyledAvatar, _extends({
       url: option.image
-    }, avatarProps)) : undefined;
+    }, avatarProps, {
+      $_css: {
+        "marginTop": "0.125rem",
+        "marginBottom": "0.125rem"
+      },
+      $_css2: {
+        "marginRight": "0.125rem"
+      }
+    })) : undefined;
     return /*#__PURE__*/_react.default.createElement(_Chip.Chip, {
       className: "c-combo-box-chip",
       leftAdornment: leftAdornment,
@@ -307,10 +314,8 @@ var ComboBox = function ComboBox(_ref) {
         _hidden = elements.splice(limitChips, elements.length - limitChips).length;
       }
-      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, elements, _hidden > 0 && /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
-        variant: size === "small" ? "Caption 1" : size === "regular" ? "Body 2" : "Body 1",
-        className: "tw-flex tw-items-center tw-shrink-0",
-        key: "hidden"
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, elements, _hidden > 0 && /*#__PURE__*/_react.default.createElement(_StyledTypography, {
+        variant: size === "small" ? "Caption 1" : size === "regular" ? "Body 2" : "Body 1"
       }, typeof hiddenNumberText === "function" ? hiddenNumberText(_hidden) : "+".concat(_hidden)));
     }
@@ -321,29 +326,22 @@ var ComboBox = function ComboBox(_ref) {
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "c-combo-box",
     ref: wrapperRef
-  }, type === "multiple" ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Styles2.StyledInputWrapper, {
+  }, type === "multiple" ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_StyledStyledInputWrapper, {
     $size: size,
     $invalid: invalid,
-    className: (0, _classnames.default)("tw-flex tw-space-between tw-flex-1", {
-      "tw-h-auto": autoSize === "auto"
-    }),
+    className: "c-combo-box-input-wrapper",
     onClick: function onClick() {
       var _elementRef$current;
       (_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 ? void 0 : _elementRef$current.focus();
-    }
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)("tw-flex tw-gap-1 tw-flex-1", {
-      "tw-flex-wrap tw-w-full": autoSize === "auto",
-      "tw-items-center": autoSize !== "auto",
-      "tw-overflow-hidden": !open
-    }),
+    },
+    $_css3: autoSize === "auto" ? "auto" : undefined
+  }, /*#__PURE__*/_react.default.createElement(_Styles.StyledChipWrapper, {
+    $autoSize: autoSize,
+    $open: open,
     ref: chipWrapper
   }, startAdornment, /*#__PURE__*/_react.default.createElement(_Styles2.StyledInput, {
-    className: (0, _classnames.default)("tw-flex tw-flex-1 tw-self-center tw-m-0", {
-      "tw-w-full": !selected || Array.isArray(selected) && selected.length === 0,
-      "tw-w-auto": autoSize === "auto"
-    }),
+    className: "c-combo-box-input",
     onBlur: handleBlur,
     onFocus: onOpen,
     ref: handleRef,
@@ -353,15 +351,21 @@ var ComboBox = function ComboBox(_ref) {
     placeholder: !hasSelected ? placeholder : undefined,
     disabled: disabled,
     $size: size,
-    $loading: loading
-  })), !disabled && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, loading ? /*#__PURE__*/_react.default.createElement(_SpinnerLoader.SpinnerLoader, null) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showXIcon && /*#__PURE__*/_react.default.createElement(_Trigger.Trigger, {
+    $loading: loading,
+    style: {
+      display: "flex",
+      flex: 1,
+      alignSelf: "center",
+      width: autoSize === "auto" ? "auto" : "100%"
+    }
+  })), !disabled && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, loading ? /*#__PURE__*/_react.default.createElement(_SpinnerLoader.SpinnerLoader, null) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showXIcon && /*#__PURE__*/_react.default.createElement(_StyledTrigger, {
     onMouseDown: handleMouseDown,
     onClick: handleDeselect,
-    className: "tw-flex tw-justify-content-center",
     "data-testid": "deselect-all"
   }, /*#__PURE__*/_react.default.createElement(_Styles.StyledComboBoxCloseSmallIcon, null)), /*#__PURE__*/_react.default.createElement(_Styles.StyledComboBoxCollapseExpandSingleIcon, {
     $open: open
   }))))) : /*#__PURE__*/_react.default.createElement(_Styles.StyledComboBoxInput, {
+    className: "c-combo-box-input",
     onBlur: handleBlur,
     onFocus: onOpen,
     wrapRef: comboBoxRef,
@@ -411,4 +415,30 @@ var ComboBox = function ComboBox(_ref) {
 exports.ComboBox = ComboBox;
 ComboBox.displayName = "ComboBox";
+var _StyledAvatar = (0, _styledComponents.default)(_Avatar.Avatar).withConfig({
+  displayName: "ComboBox___StyledAvatar",
+  componentId: "sc-uvsz9l-0"
+})(["", " ", ""], function (p) {
+  return p.$_css;
+}, function (p) {
+  return p.$_css2;
+});
+var _StyledTypography = (0, _styledComponents.default)(_Typography.Typography).withConfig({
+  displayName: "ComboBox___StyledTypography",
+  componentId: "sc-uvsz9l-1"
+})(["display:flex;flex-shrink:0;align-items:center;"]);
+var _StyledStyledInputWrapper = (0, _styledComponents.default)(_Styles2.StyledInputWrapper).withConfig({
+  displayName: "ComboBox___StyledStyledInputWrapper",
+  componentId: "sc-uvsz9l-2"
+})(["display:flex;justify-content:space-between;flex:1;height:", ";"], function (p) {
+  return p.$_css3;
+});
+var _StyledTrigger = (0, _styledComponents.default)(_Trigger.Trigger).withConfig({
+  displayName: "ComboBox___StyledTrigger",
+  componentId: "sc-uvsz9l-3"
+})(["display:flex;justify-content:center;"]);
 //# sourceMappingURL=ComboBox.js.map

package/dist/cjs/components/ComboBox/ComboBox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ComboBox/ComboBox.tsx"],"names":["ComboBox","options","selected","loading","loadingText","onChange","placeholder","handleEmptyAction","disabled","size","invalid","type","renderChip","forceCloseMenu","renderOption","limitChips","hiddenNumberText","prop","selectedName","value","map","v","find","q","id","name","setValue","handleOnChange","e","target","childNode","setChildNode","elementRef","handleRef","wrapperRef","chipWrapper","open","setOpen","handleOnKeyDown","key","stopPropagation","focus","blur","emptyAction","handleChange","selectedValue","onOpen","handleRenderOption","option","props","image","color","textColor","handleDeselect","handleMouseDown","preventDefault","comboBoxRef","handleBlur","renderChipAdornment","index","avatarProps","className","leftAdornment","undefined","Array","isArray","includes","newSelected","filter","item","autoSize","length","startAdornment","elements","total","forEach","isGrouped","push","groupedOptions","o","_index","hidden","splice","showXIcon","hasSelected","current","zIndex","clientWidth","displayName"],"mappings":"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","sourcesContent":["import React, {\n FC,\n useCallback,\n useState,\n useEffect,\n useRef,\n useMemo,\n Fragment,\n} from \"react\";\nimport { RadioButton } from \"../RadioButton\";\nimport { Autocomplete } from \"../Autocomplete\";\nimport { Button } from \"../Button/Button\";\nimport {\n IAutocompleteProps,\n isOptionGroup,\n} from \"../Autocomplete/Autocomplete\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { Popper } from \"../Popper\";\nimport { IOptionGroupProps, IOptionItemProps } from \"../Select\";\nimport { RemoveScroll } from \"react-remove-scroll\";\nimport { SpinnerLoader } from \"../Loaders/Spinner/SpinnerLoader\";\nimport { OptionContent } from \"../Select/OptionContent/OptionContent\";\nimport {\n StyledComboBoxCloseSmallIcon,\n StyledComboBoxCollapseExpandSingleIcon,\n StyledComboBoxInput,\n StyledComboBoxList,\n} from \"./Styles\";\nimport { InputSize } from \"../Input/types\";\nimport { InputAdornment } from \"../Input/InputAdornment\";\nimport { Checkbox } from \"../Checkbox\";\nimport { Chip } from \"../Chip\";\nimport { StyledInputWrapper, StyledInput } from \"../Input/Styles\";\nimport classNames from \"classnames\";\nimport { Typography } from \"../Typography/Typography\";\nimport { Trigger } from \"../Trigger\";\nimport { useOnClickOutside } from \"../../hooks/useOnClickOutside\";\nimport { Avatar, IAvatar } from \"../Avatar\";\n\nexport interface IComboBoxProps\n extends Omit<IAutocompleteProps, \"handleChange\" \| \"inputEl\"> {\n /** Set combobox in to loading state /\n loading?: boolean;\n /* Text to display while in loading state /\n loadingText?: string;\n /* onChange callback /\n onChange?: (\n e: (string \| number)[] \| string \| number \| null \| undefined\n ) => void;\n /* Placeholder for Select input /\n placeholder?: string;\n /* disable Input element /\n disabled?: boolean;\n /* Combobox size /\n size?: InputSize;\n /* Invalid state /\n invalid?: boolean;\n /* Render Chip /\n renderChip?: <T extends IOptionItemProps>(\n item: T,\n key?: string \| number\n ) => JSX.Element;\n /* Close menu on change /\n forceCloseMenu?: boolean;\n /* Limit chips /\n limitChips?: number;\n /* Hidden number text */\n hiddenNumberText?: (hidden: number) => string;\n}\n\nexport const ComboBox: FC<IComboBoxProps> = ({\n options = [],\n selected,\n loading = false,\n loadingText,\n onChange,\n placeholder,\n handleEmptyAction,\n disabled = false,\n size = \"regular\",\n invalid = false,\n type = \"single\",\n renderChip,\n forceCloseMenu = type === \"single\",\n renderOption,\n limitChips = 2,\n hiddenNumberText,\n ...prop\n}) => {\n const selectedName = useMemo(() => {\n let value = \"\";\n if (!selected) {\n return value;\n }\n options.map((v) => {\n if ((v as IOptionGroupProps)?.options) {\n return (v as IOptionGroupProps).options.find((q) => {\n if (q.id === selected) {\n value = q.name;\n return;\n }\n });\n } else {\n if (v.id === selected) {\n value = v.name;\n return;\n }\n }\n });\n return value;\n }, [options, selected]);\n const [value, setValue] = useState(selectedName);\n const handleOnChange = useCallback((e) => setValue(e.target.value), []);\n const [childNode, setChildNode] = useState<HTMLInputElement \| null>();\n const elementRef = useRef<HTMLInputElement \| null>(null);\n const handleRef = useForkRef(setChildNode, elementRef);\n const wrapperRef = useRef<HTMLDivElement>(null);\n const chipWrapper = useRef<HTMLDivElement>(null);\n\n const [open, setOpen] = useState(false);\n\n useOnClickOutside(wrapperRef, () => setOpen(false));\n\n const handleOnKeyDown = useCallback(\n (e) => {\n if (e.key === \"Escape\" && open) {\n setOpen(false);\n setValue(selectedName);\n e.stopPropagation();\n }\n if (e.key === \"Enter\" && type === \"multiple\") {\n setValue(\"\");\n }\n },\n [open, selectedName, type]\n );\n\n useEffect(() => {\n open && childNode?.focus();\n !open && childNode?.blur();\n }, [childNode, open]);\n\n useEffect(() => {\n setValue(selectedName);\n }, [selectedName]);\n\n const emptyAction = useCallback(\n (v) => {\n handleEmptyAction?.(v);\n setOpen(false);\n },\n [handleEmptyAction]\n );\n\n const handleChange = useCallback(\n (selectedValue) => {\n onChange?.(selectedValue);\n if (forceCloseMenu) {\n setOpen(false);\n }\n },\n [forceCloseMenu, onChange]\n );\n\n const onOpen = useCallback(() => {\n if (!disabled) {\n setOpen(true);\n }\n }, [disabled]);\n\n const handleRenderOption = useCallback(\n (option, props) => {\n if (typeof renderOption === \"function\") {\n return renderOption(option, props);\n }\n if (type === \"multiple\") {\n return (\n <>\n <OptionContent\n imageUrl={option.image}\n color={option.color}\n textColor={option.textColor}\n name={option.name}\n />\n <Checkbox {...props} />\n </>\n );\n }\n return (\n <>\n <OptionContent\n imageUrl={option.image}\n color={option.color}\n textColor={option.textColor}\n name={option.name}\n />\n <RadioButton {...props} />\n </>\n );\n },\n [type, renderOption]\n );\n\n const handleDeselect = useCallback(\n (e) => {\n e.stopPropagation();\n if (type === \"multiple\") {\n onChange?.([]);\n } else {\n onChange?.(\"\");\n }\n\n setOpen(false);\n },\n [type, onChange]\n );\n\n const handleMouseDown = useCallback((e) => {\n e.preventDefault();\n }, []);\n\n const comboBoxRef = useRef<HTMLDivElement \| null>(null);\n\n const handleBlur = useCallback(() => {\n setValue(selectedName);\n }, [selectedName]);\n\n const renderChipAdornment = useCallback(\n (option, index) => {\n if (typeof renderChip === \"function\") {\n return renderChip(option, index);\n }\n const avatarProps: Partial<IAvatar> = {\n className: \"tw-my-0.5 tw-mr-0.5\",\n size: 18,\n };\n switch (size) {\n case \"big\":\n avatarProps.size = 22;\n break;\n case \"small\":\n avatarProps.size = 14;\n break;\n }\n const leftAdornment = option.image ? (\n <Avatar url={option.image} {...avatarProps} />\n ) : undefined;\n\n return (\n <Chip\n className={\"c-combo-box-chip\"}\n leftAdornment={leftAdornment}\n label={option.name}\n key={index}\n onClose={\n !disabled\n ? (e) => {\n e.preventDefault();\n e.stopPropagation();\n if (Array.isArray(selected) && selected.includes(option.id)) {\n if (typeof onChange === \"function\") {\n const newSelected = selected.filter(\n (item) => item !== option.id\n );\n onChange(newSelected);\n }\n }\n }\n : undefined\n }\n size={size}\n />\n );\n },\n [disabled, onChange, renderChip, selected, size]\n );\n\n const autoSize = useMemo(() => {\n if (\n type === \"multiple\" &&\n open &&\n Array.isArray(selected) &&\n selected.length > 1\n ) {\n return \"auto\";\n }\n return size;\n }, [open, selected, size, type]);\n\n const startAdornment = useMemo(() => {\n if (type === \"multiple\" && Array.isArray(selected) && selected.length > 0) {\n const elements: JSX.Element[] = [];\n let total = 0;\n options.forEach((option, index) => {\n const isGrouped = isOptionGroup(option);\n if (selected.includes(option.id) && !isGrouped) {\n total = total + 1;\n elements.push(renderChipAdornment(option, index));\n } else if (isGrouped) {\n const groupedOptions = option.options.filter((o) =>\n selected.includes(o.id)\n );\n total = total + groupedOptions.length;\n if (groupedOptions.length > 0) {\n groupedOptions.forEach((o, _index) => {\n elements.push(renderChipAdornment(o, `${index}_${_index}`));\n });\n }\n }\n });\n let hidden = 0;\n if (!open && limitChips > 0 && elements.length > limitChips) {\n hidden = elements.splice(\n limitChips,\n elements.length - limitChips\n ).length;\n }\n\n return (\n <Fragment>\n {elements}\n {hidden > 0 && (\n <Typography\n variant={\n size === \"small\"\n ? \"Caption 1\"\n : size === \"regular\"\n ? \"Body 2\"\n : \"Body 1\"\n }\n className={\"tw-flex tw-items-center tw-shrink-0\"}\n key={\"hidden\"}\n >\n {typeof hiddenNumberText === \"function\"\n ? hiddenNumberText(hidden)\n : `+${hidden}`}\n </Typography>\n )}\n </Fragment>\n );\n }\n return undefined;\n }, [\n type,\n selected,\n options,\n open,\n limitChips,\n hiddenNumberText,\n renderChipAdornment,\n size,\n ]);\n\n const showXIcon =\n Array.isArray(selected) && type === \"multiple\" && selected.length > 0;\n\n const hasSelected =\n type === \"multiple\" && Array.isArray(selected) && selected.length > 0;\n\n return (\n <div className=\"c-combo-box\" ref={wrapperRef}>\n {type === \"multiple\" ? (\n <>\n <StyledInputWrapper\n $size={size}\n $invalid={invalid}\n className={classNames(\"tw-flex tw-space-between tw-flex-1\", {\n \"tw-h-auto\": autoSize === \"auto\",\n })}\n onClick={() => {\n elementRef.current?.focus();\n }}\n >\n <div\n className={classNames(\"tw-flex tw-gap-1 tw-flex-1\", {\n \"tw-flex-wrap tw-w-full\": autoSize === \"auto\",\n \"tw-items-center\": autoSize !== \"auto\",\n \"tw-overflow-hidden\": !open,\n })}\n ref={chipWrapper}\n >\n {startAdornment}\n <StyledInput\n className={classNames(\n \"tw-flex tw-flex-1 tw-self-center tw-m-0\",\n {\n \"tw-w-full\":\n !selected \|\|\n (Array.isArray(selected) && selected.length === 0),\n \"tw-w-auto\": autoSize === \"auto\",\n }\n )}\n onBlur={handleBlur}\n onFocus={onOpen}\n ref={handleRef}\n value={loading && loadingText ? loadingText : value}\n onKeyDown={handleOnKeyDown}\n onChange={handleOnChange}\n placeholder={!hasSelected ? placeholder : undefined}\n disabled={disabled}\n $size={size}\n $loading={loading}\n />\n </div>\n {!disabled && (\n <>\n {loading ? (\n <SpinnerLoader />\n ) : (\n <>\n {showXIcon && (\n <Trigger\n onMouseDown={handleMouseDown}\n onClick={handleDeselect}\n className={\"tw-flex tw-justify-content-center\"}\n data-testid={\"deselect-all\"}\n >\n <StyledComboBoxCloseSmallIcon />\n </Trigger>\n )}\n <StyledComboBoxCollapseExpandSingleIcon $open={open} />\n </>\n )}\n </>\n )}\n </StyledInputWrapper>\n </>\n ) : (\n <StyledComboBoxInput\n onBlur={handleBlur}\n onFocus={onOpen}\n wrapRef={comboBoxRef}\n ref={handleRef}\n value={loading && loadingText ? loadingText : value}\n onKeyDown={handleOnKeyDown}\n onChange={handleOnChange}\n placeholder={placeholder}\n disabled={disabled}\n size={size}\n invalid={invalid}\n $loading={loading}\n startAdornment={startAdornment}\n endAdornment={\n !disabled ? (\n <InputAdornment disablePointerEvents={disabled}>\n {loading ? (\n <SpinnerLoader />\n ) : selected ? (\n <Button\n onMouseDown={handleMouseDown}\n onClick={handleDeselect}\n variant=\"text gray\"\n size=\"small\"\n >\n <StyledComboBoxCloseSmallIcon />\n </Button>\n ) : null}\n <StyledComboBoxCollapseExpandSingleIcon $open={open} />\n </InputAdornment>\n ) : null\n }\n />\n )}\n\n {!disabled ? (\n <Popper\n anchorEl={comboBoxRef.current}\n open={open}\n placement=\"bottom\"\n style={{ zIndex: 10 }}\n strategy={\"fixed\"}\n >\n <RemoveScroll noIsolation allowPinchZoom>\n <StyledComboBoxList $width={comboBoxRef.current?.clientWidth}>\n <Autocomplete\n {...prop}\n inputEl={childNode}\n selected={selected}\n handleChange={handleChange}\n renderOption={handleRenderOption}\n options={options}\n type={type}\n handleEmptyAction={emptyAction}\n />\n </StyledComboBoxList>\n </RemoveScroll>\n </Popper>\n ) : null}\n </div>\n );\n};\n\nComboBox.displayName = \"ComboBox\";\n"],"file":"ComboBox.js"}
1	+ {"version":3,"sources":["../../../../src/components/ComboBox/ComboBox.tsx"],"names":["ComboBox","options","selected","loading","loadingText","onChange","placeholder","handleEmptyAction","disabled","size","invalid","type","renderChip","forceCloseMenu","renderOption","limitChips","hiddenNumberText","prop","selectedName","value","map","v","find","q","id","name","setValue","handleOnChange","e","target","childNode","setChildNode","elementRef","handleRef","wrapperRef","chipWrapper","open","setOpen","handleOnKeyDown","key","stopPropagation","focus","blur","emptyAction","handleChange","selectedValue","onOpen","handleRenderOption","option","props","image","color","textColor","handleDeselect","handleMouseDown","preventDefault","comboBoxRef","handleBlur","renderChipAdornment","index","avatarProps","leftAdornment","undefined","Array","isArray","includes","newSelected","filter","item","autoSize","length","startAdornment","elements","total","forEach","isGrouped","push","groupedOptions","o","_index","hidden","splice","showXIcon","hasSelected","current","display","flex","alignSelf","width","zIndex","clientWidth","displayName"],"mappings":"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","sourcesContent":["import React, {\n FC,\n useCallback,\n useState,\n useEffect,\n useRef,\n useMemo,\n Fragment,\n} from \"react\";\nimport { RadioButton } from \"../RadioButton\";\nimport { Autocomplete } from \"../Autocomplete\";\nimport { Button } from \"../Button/Button\";\nimport {\n IAutocompleteProps,\n isOptionGroup,\n} from \"../Autocomplete/Autocomplete\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { Popper } from \"../Popper\";\nimport { IOptionGroupProps, IOptionItemProps } from \"../Select\";\nimport { RemoveScroll } from \"react-remove-scroll\";\nimport { SpinnerLoader } from \"../Loaders/Spinner/SpinnerLoader\";\nimport { OptionContent } from \"../Select/OptionContent/OptionContent\";\nimport {\n StyledComboBoxCloseSmallIcon,\n StyledComboBoxCollapseExpandSingleIcon,\n StyledComboBoxInput,\n StyledComboBoxList,\n StyledChipWrapper,\n} from \"./Styles\";\nimport { InputSize } from \"../Input/types\";\nimport { InputAdornment } from \"../Input/InputAdornment\";\nimport { Checkbox } from \"../Checkbox\";\nimport { Chip } from \"../Chip\";\nimport { StyledInput, StyledInputWrapper } from \"../Input/Styles\";\nimport { useOnClickOutside } from \"../../hooks/useOnClickOutside\";\nimport { Avatar, IAvatar } from \"../Avatar\";\nimport { Trigger } from \"../Trigger\";\nimport { Typography } from \"../Typography/Typography\";\nimport tw from \"twin.macro\";\n\nexport interface IComboBoxProps\n extends Omit<IAutocompleteProps, \"handleChange\" \| \"inputEl\"> {\n /** Set combobox in to loading state /\n loading?: boolean;\n /* Text to display while in loading state /\n loadingText?: string;\n /* onChange callback /\n onChange?: (\n e: (string \| number)[] \| string \| number \| null \| undefined\n ) => void;\n /* Placeholder for Select input /\n placeholder?: string;\n /* disable Input element /\n disabled?: boolean;\n /* Combobox size /\n size?: InputSize;\n /* Invalid state /\n invalid?: boolean;\n /* Render Chip /\n renderChip?: <T extends IOptionItemProps>(\n item: T,\n key?: string \| number\n ) => JSX.Element;\n /* Close menu on change /\n forceCloseMenu?: boolean;\n /* Limit chips /\n limitChips?: number;\n /* Hidden number text */\n hiddenNumberText?: (hidden: number) => string;\n}\n\nexport const ComboBox: FC<IComboBoxProps> = ({\n options = [],\n selected,\n loading = false,\n loadingText,\n onChange,\n placeholder,\n handleEmptyAction,\n disabled = false,\n size = \"regular\",\n invalid = false,\n type = \"single\",\n renderChip,\n forceCloseMenu = type === \"single\",\n renderOption,\n limitChips = 2,\n hiddenNumberText,\n ...prop\n}) => {\n const selectedName = useMemo(() => {\n let value = \"\";\n if (!selected) {\n return value;\n }\n options.map((v) => {\n if ((v as IOptionGroupProps)?.options) {\n return (v as IOptionGroupProps).options.find((q) => {\n if (q.id === selected) {\n value = q.name;\n return;\n }\n });\n } else {\n if (v.id === selected) {\n value = v.name;\n return;\n }\n }\n });\n return value;\n }, [options, selected]);\n const [value, setValue] = useState(selectedName);\n const handleOnChange = useCallback((e) => setValue(e.target.value), []);\n const [childNode, setChildNode] = useState<HTMLInputElement \| null>();\n const elementRef = useRef<HTMLInputElement \| null>(null);\n const handleRef = useForkRef(setChildNode, elementRef);\n const wrapperRef = useRef<HTMLDivElement>(null);\n const chipWrapper = useRef<HTMLDivElement>(null);\n\n const [open, setOpen] = useState(false);\n\n useOnClickOutside(wrapperRef, () => setOpen(false));\n\n const handleOnKeyDown = useCallback(\n (e) => {\n if (e.key === \"Escape\" && open) {\n setOpen(false);\n setValue(selectedName);\n e.stopPropagation();\n }\n if (e.key === \"Enter\" && type === \"multiple\") {\n setValue(\"\");\n }\n },\n [open, selectedName, type]\n );\n\n useEffect(() => {\n open && childNode?.focus();\n !open && childNode?.blur();\n }, [childNode, open]);\n\n useEffect(() => {\n setValue(selectedName);\n }, [selectedName]);\n\n const emptyAction = useCallback(\n (v) => {\n handleEmptyAction?.(v);\n setOpen(false);\n },\n [handleEmptyAction]\n );\n\n const handleChange = useCallback(\n (selectedValue) => {\n onChange?.(selectedValue);\n if (forceCloseMenu) {\n setOpen(false);\n }\n },\n [forceCloseMenu, onChange]\n );\n\n const onOpen = useCallback(() => {\n if (!disabled) {\n setOpen(true);\n }\n }, [disabled]);\n\n const handleRenderOption = useCallback(\n (option, props) => {\n if (typeof renderOption === \"function\") {\n return renderOption(option, props);\n }\n if (type === \"multiple\") {\n return (\n <>\n <OptionContent\n imageUrl={option.image}\n color={option.color}\n textColor={option.textColor}\n name={option.name}\n />\n <Checkbox {...props} />\n </>\n );\n }\n return (\n <>\n <OptionContent\n imageUrl={option.image}\n color={option.color}\n textColor={option.textColor}\n name={option.name}\n />\n <RadioButton {...props} />\n </>\n );\n },\n [type, renderOption]\n );\n\n const handleDeselect = useCallback(\n (e) => {\n e.stopPropagation();\n if (type === \"multiple\") {\n onChange?.([]);\n } else {\n onChange?.(\"\");\n }\n\n setOpen(false);\n },\n [type, onChange]\n );\n\n const handleMouseDown = useCallback((e) => {\n e.preventDefault();\n }, []);\n\n const comboBoxRef = useRef<HTMLDivElement \| null>(null);\n\n const handleBlur = useCallback(() => {\n setValue(selectedName);\n }, [selectedName]);\n\n const renderChipAdornment = useCallback(\n (option, index) => {\n if (typeof renderChip === \"function\") {\n return renderChip(option, index);\n }\n const avatarProps: Partial<IAvatar> = {\n size: 18,\n };\n switch (size) {\n case \"big\":\n avatarProps.size = 22;\n break;\n case \"small\":\n avatarProps.size = 14;\n break;\n }\n const leftAdornment = option.image ? (\n <Avatar\n css={`\n ${tw`tw-my-0.5`}\n ${tw`tw-mr-0.5`}\n `}\n url={option.image}\n {...avatarProps}\n />\n ) : undefined;\n\n return (\n <Chip\n className={\"c-combo-box-chip\"}\n leftAdornment={leftAdornment}\n label={option.name}\n key={index}\n onClose={\n !disabled\n ? (e) => {\n e.preventDefault();\n e.stopPropagation();\n if (Array.isArray(selected) && selected.includes(option.id)) {\n if (typeof onChange === \"function\") {\n const newSelected = selected.filter(\n (item) => item !== option.id\n );\n onChange(newSelected);\n }\n }\n }\n : undefined\n }\n size={size}\n />\n );\n },\n [disabled, onChange, renderChip, selected, size]\n );\n\n const autoSize = useMemo(() => {\n if (\n type === \"multiple\" &&\n open &&\n Array.isArray(selected) &&\n selected.length > 1\n ) {\n return \"auto\";\n }\n return size;\n }, [open, selected, size, type]);\n\n const startAdornment = useMemo(() => {\n if (type === \"multiple\" && Array.isArray(selected) && selected.length > 0) {\n const elements: JSX.Element[] = [];\n let total = 0;\n options.forEach((option, index) => {\n const isGrouped = isOptionGroup(option);\n if (selected.includes(option.id) && !isGrouped) {\n total = total + 1;\n elements.push(renderChipAdornment(option, index));\n } else if (isGrouped) {\n const groupedOptions = option.options.filter((o) =>\n selected.includes(o.id)\n );\n total = total + groupedOptions.length;\n if (groupedOptions.length > 0) {\n groupedOptions.forEach((o, _index) => {\n elements.push(renderChipAdornment(o, `${index}_${_index}`));\n });\n }\n }\n });\n let hidden = 0;\n if (!open && limitChips > 0 && elements.length > limitChips) {\n hidden = elements.splice(\n limitChips,\n elements.length - limitChips\n ).length;\n }\n\n return (\n <Fragment>\n {elements}\n {hidden > 0 && (\n <Typography\n variant={\n size === \"small\"\n ? \"Caption 1\"\n : size === \"regular\"\n ? \"Body 2\"\n : \"Body 1\"\n }\n css={`\n display: flex;\n flex-shrink: 0;\n align-items: center;\n `}\n >\n {typeof hiddenNumberText === \"function\"\n ? hiddenNumberText(hidden)\n : `+${hidden}`}\n </Typography>\n )}\n </Fragment>\n );\n }\n return undefined;\n }, [\n type,\n selected,\n options,\n open,\n limitChips,\n hiddenNumberText,\n renderChipAdornment,\n size,\n ]);\n\n const showXIcon =\n Array.isArray(selected) && type === \"multiple\" && selected.length > 0;\n\n const hasSelected =\n type === \"multiple\" && Array.isArray(selected) && selected.length > 0;\n\n return (\n <div className=\"c-combo-box\" ref={wrapperRef}>\n {type === \"multiple\" ? (\n <>\n <StyledInputWrapper\n $size={size}\n $invalid={invalid}\n css={`\n display: flex;\n justify-content: space-between;\n flex: 1;\n height: ${autoSize === \"auto\" ? \"auto\" : undefined};\n `}\n className={\"c-combo-box-input-wrapper\"}\n onClick={() => {\n elementRef.current?.focus();\n }}\n >\n <StyledChipWrapper\n $autoSize={autoSize}\n $open={open}\n ref={chipWrapper}\n >\n {startAdornment}\n <StyledInput\n className={\"c-combo-box-input\"}\n onBlur={handleBlur}\n onFocus={onOpen}\n ref={handleRef}\n value={loading && loadingText ? loadingText : value}\n onKeyDown={handleOnKeyDown}\n onChange={handleOnChange}\n placeholder={!hasSelected ? placeholder : undefined}\n disabled={disabled}\n $size={size}\n $loading={loading}\n style={{\n display: \"flex\",\n flex: 1,\n alignSelf: \"center\",\n width: autoSize === \"auto\" ? \"auto\" : \"100%\",\n }}\n />\n </StyledChipWrapper>\n {!disabled && (\n <>\n {loading ? (\n <SpinnerLoader />\n ) : (\n <>\n {showXIcon && (\n <Trigger\n onMouseDown={handleMouseDown}\n onClick={handleDeselect}\n data-testid={\"deselect-all\"}\n css={`\n display: flex;\n justify-content: center;\n `}\n >\n <StyledComboBoxCloseSmallIcon />\n </Trigger>\n )}\n <StyledComboBoxCollapseExpandSingleIcon $open={open} />\n </>\n )}\n </>\n )}\n </StyledInputWrapper>\n </>\n ) : (\n <StyledComboBoxInput\n className={\"c-combo-box-input\"}\n onBlur={handleBlur}\n onFocus={onOpen}\n wrapRef={comboBoxRef}\n ref={handleRef}\n value={loading && loadingText ? loadingText : value}\n onKeyDown={handleOnKeyDown}\n onChange={handleOnChange}\n placeholder={placeholder}\n disabled={disabled}\n size={size}\n invalid={invalid}\n $loading={loading}\n startAdornment={startAdornment}\n endAdornment={\n !disabled ? (\n <InputAdornment disablePointerEvents={disabled}>\n {loading ? (\n <SpinnerLoader />\n ) : selected ? (\n <Button\n onMouseDown={handleMouseDown}\n onClick={handleDeselect}\n variant=\"text gray\"\n size=\"small\"\n >\n <StyledComboBoxCloseSmallIcon />\n </Button>\n ) : null}\n <StyledComboBoxCollapseExpandSingleIcon $open={open} />\n </InputAdornment>\n ) : null\n }\n />\n )}\n\n {!disabled ? (\n <Popper\n anchorEl={comboBoxRef.current}\n open={open}\n placement=\"bottom\"\n style={{ zIndex: 10 }}\n strategy={\"fixed\"}\n >\n <RemoveScroll noIsolation allowPinchZoom>\n <StyledComboBoxList $width={comboBoxRef.current?.clientWidth}>\n <Autocomplete\n {...prop}\n inputEl={childNode}\n selected={selected}\n handleChange={handleChange}\n renderOption={handleRenderOption}\n options={options}\n type={type}\n handleEmptyAction={emptyAction}\n />\n </StyledComboBoxList>\n </RemoveScroll>\n </Popper>\n ) : null}\n </div>\n );\n};\n\nComboBox.displayName = \"ComboBox\";\n"],"file":"ComboBox.js"}

package/dist/cjs/components/ComboBox/Styles.js CHANGED Viewed

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledComboBoxList = exports.StyledComboBoxInput = exports.StyledComboBoxCollapseExpandSingleIcon = exports.StyledComboBoxCloseSmallIcon = void 0;
+exports.StyledComboBoxList = exports.StyledComboBoxInput = exports.StyledComboBoxCollapseExpandSingleIcon = exports.StyledComboBoxCloseSmallIcon = exports.StyledChipWrapper = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
@@ -29,7 +29,7 @@ var StyledIconDefaults = (0, _styledComponents.css)(["flex-shrink:0;cursor:point
 var StyledComboBoxCollapseExpandSingleIcon = (0, _styledComponents.default)(_collection.CollapseExpandSingleIcon).withConfig({
   displayName: "Styles__StyledComboBoxCollapseExpandSingleIcon",
   componentId: "sc-5qvkpb-1"
-})(["", " color:var(--color-theme-600);transform:rotate(180deg);", ""], StyledIconDefaults, function (props) {
+})(["", ";color:var(--color-theme-600);transform:rotate(180deg);", ""], StyledIconDefaults, function (props) {
   return props.$open && (0, _styledComponents.css)(["transform:rotate(0deg);"]);
 });
 exports.StyledComboBoxCollapseExpandSingleIcon = StyledComboBoxCollapseExpandSingleIcon;
@@ -37,7 +37,7 @@ StyledComboBoxCollapseExpandSingleIcon.displayName = "StyledComboBoxCollapseExpa
 var StyledComboBoxCloseSmallIcon = (0, _styledComponents.default)(_collection.CloseSmallIcon).withConfig({
   displayName: "Styles__StyledComboBoxCloseSmallIcon",
   componentId: "sc-5qvkpb-2"
-})(["", " opacity:0;transition-property:all;transition-duration:0.2s;transition-delay:0.5s;", ":hover,", ":hover &{opacity:1;transition-delay:0s;}"], StyledIconDefaults, StyledComboBoxInput, _Styles.StyledInputWrapper);
+})(["", ";opacity:0;transition-property:all;transition-duration:0.2s;transition-delay:0.5s;", ":hover,", ":hover &{opacity:1;transition-delay:0s;}"], StyledIconDefaults, StyledComboBoxInput, _Styles.StyledInputWrapper);
 exports.StyledComboBoxCloseSmallIcon = StyledComboBoxCloseSmallIcon;
 StyledComboBoxCloseSmallIcon.displayName = "StyledComboBoxCloseSmallIcon";
@@ -50,4 +50,31 @@ var StyledComboBoxList = _styledComponents.default.div.withConfig({
 exports.StyledComboBoxList = StyledComboBoxList;
 StyledComboBoxList.displayName = "StyledComboBoxList";
+var StyledChipWrapper = _styledComponents.default.div.withConfig({
+  displayName: "Styles__StyledChipWrapper",
+  componentId: "sc-5qvkpb-4"
+})(["", ";", ";", ";overflow:", ";", " ", ""], {
+  "display": "flex"
+}, {
+  "gap": "0.25rem"
+}, {
+  "flex": "1 1 0%"
+}, function (_ref) {
+  var $open = _ref.$open;
+  return $open ? "auto" : "hidden";
+}, function (_ref2) {
+  var $autoSize = _ref2.$autoSize;
+  return $autoSize === "auto" && (0, _styledComponents.css)(["", ";", ";"], {
+    "flexWrap": "wrap"
+  }, {
+    "width": "100%"
+  });
+}, function (_ref3) {
+  var $autoSize = _ref3.$autoSize;
+  return $autoSize !== "auto" && (0, _styledComponents.css)(["align-items:center;"]);
+});
+exports.StyledChipWrapper = StyledChipWrapper;
+StyledChipWrapper.displayName = "StyledChipWrapper";
 //# sourceMappingURL=Styles.js.map

package/dist/cjs/components/ComboBox/Styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ComboBox/Styles.ts"],"names":["StyledComboBoxInput","Input","displayName","StyledIconDefaults","css","StyledComboBoxCollapseExpandSingleIcon","CollapseExpandSingleIcon","props","$open","StyledComboBoxCloseSmallIcon","CloseSmallIcon","StyledInputWrapper","StyledComboBoxList","styled","div","$width"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;~~AAEO~~,IAAMA,mBAAmB,GAAG,+BAAOC,YAAP,CAAH;AAAA;AAAA;AAAA,0DAAzB;;AAMPD,mBAAmB,CAACE,WAApB,GAAkC,qBAAlC;AAEA,IAAMC,kBAAkB,OAAGC,qBAAH,oCAAxB;AAKO,IAAMC,sCAAsC,GAAG,+BACpDC,oCADoD,CAAH;AAAA;AAAA;AAAA,wEAG/CH,kBAH+C,EAO/C,UAACI,KAAD;AAAA,SACAA,KAAK,CAACC,KAAN,QACAJ,qBADA,8BADA;AAAA,CAP+C,CAA5C;;AAcPC,sCAAsC,CAACH,WAAvC,GACE,wCADF;AAGO,IAAMO,4BAA4B,GAAG,+BAAOC,0BAAP,CAAH;AAAA;AAAA;AAAA,sJACrCP,kBADqC,EAOrCH,mBAPqC,EAOPW,0BAPO,CAAlC;;AAaPF,4BAA4B,CAACP,WAA7B,GAA2C,8BAA3C;;AAEO,IAAMU,kBAAkB,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,oLAOpB,UAACP,KAAD;AAAA,mBAAcA,KAAK,CAACQ,MAApB;AAAA,CAPoB,CAAxB;;;AAUPH,kBAAkB,CAACV,WAAnB,GAAiC,oBAAjC","sourcesContent":["import styled, { css } from \"styled-components\";\nimport { CollapseExpandSingleIcon, CloseSmallIcon } from \"../Icons/collection\";\nimport { Input } from \"../Input\";\nimport { StyledInputWrapper } from \"../Input/Styles\";\n\nexport const StyledComboBoxInput = styled(Input)<{ $loading?: boolean }>`\n overflow: hidden;\n text-overflow: ellipsis;\n width: 100%;\n`;\n\nStyledComboBoxInput.displayName = \"StyledComboBoxInput\";\n\nconst StyledIconDefaults = css`\n flex-shrink: 0;\n cursor: pointer;\n`;\n\nexport const StyledComboBoxCollapseExpandSingleIcon = styled(\n CollapseExpandSingleIcon\n)<{ $open?: boolean }>`\n ${StyledIconDefaults}\n color: var(--color-theme-600);\n transform: rotate(180deg);\n\n ${(props) =>\n props.$open &&\n css`\n transform: rotate(0deg);\n `}\n`;\n\nStyledComboBoxCollapseExpandSingleIcon.displayName =\n \"StyledComboBoxCollapseExpandSingleIcon\";\n\nexport const StyledComboBoxCloseSmallIcon = styled(CloseSmallIcon)`\n ${StyledIconDefaults}\n opacity: 0;\n transition-property: all;\n transition-duration: 0.2s;\n transition-delay: 0.5s;\n\n ${StyledComboBoxInput}:hover, ${StyledInputWrapper}:hover & {\n opacity: 1;\n transition-delay: 0s;\n }\n`;\n\nStyledComboBoxCloseSmallIcon.displayName = \"StyledComboBoxCloseSmallIcon\";\n\nexport const StyledComboBoxList = styled.div<{ $width?: number }>`\n min-width: 260px;\n background-color: var(--page-paper-main);\n border-radius: 8px;\n border: 1px solid var(--border-primary);\n box-shadow: var(--shadow-tertiary);\n margin: 8px 0;\n width: ${(props) => `${props.$width}px`};\n`;\n\nStyledComboBoxList.displayName = \"StyledComboBoxList\";\n"],"file":"Styles.js"}
1	+ {"version":3,"sources":["../../../../src/components/ComboBox/Styles.ts"],"names":["StyledComboBoxInput","Input","displayName","StyledIconDefaults","css","StyledComboBoxCollapseExpandSingleIcon","CollapseExpandSingleIcon","props","$open","StyledComboBoxCloseSmallIcon","CloseSmallIcon","StyledInputWrapper","StyledComboBoxList","styled","div","$width","StyledChipWrapper","$autoSize"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;AAGO,IAAMA,mBAAmB,GAAG,+BAAOC,YAAP,CAAH;AAAA;AAAA;AAAA,0DAAzB;;AAMPD,mBAAmB,CAACE,WAApB,GAAkC,qBAAlC;AAEA,IAAMC,kBAAkB,OAAGC,qBAAH,oCAAxB;AAKO,IAAMC,sCAAsC,GAAG,+BACpDC,oCADoD,CAAH;AAAA;AAAA;AAAA,wEAG/CH,kBAH+C,EAO/C,UAACI,KAAD;AAAA,SACAA,KAAK,CAACC,KAAN,QACAJ,qBADA,8BADA;AAAA,CAP+C,CAA5C;;AAcPC,sCAAsC,CAACH,WAAvC,GACE,wCADF;AAGO,IAAMO,4BAA4B,GAAG,+BAAOC,0BAAP,CAAH;AAAA;AAAA;AAAA,sJACrCP,kBADqC,EAOrCH,mBAPqC,EAOPW,0BAPO,CAAlC;;AAaPF,4BAA4B,CAACP,WAA7B,GAA2C,8BAA3C;;AAEO,IAAMU,kBAAkB,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,oLAOpB,UAACP,KAAD;AAAA,mBAAcA,KAAK,CAACQ,MAApB;AAAA,CAPoB,CAAxB;;;AAUPH,kBAAkB,CAACV,WAAnB,GAAiC,oBAAjC;;AAEO,IAAMc,iBAAiB,GAAGH,0BAAOC,GAAV;AAAA;AAAA;AAAA,+CAIxB;AAAA;AAAA,CAJwB,EAKxB;AAAA;AAAA,CALwB,EAMxB;AAAA;AAAA,CANwB,EAQhB;AAAA,MAAGN,KAAH,QAAGA,KAAH;AAAA,SAAgBA,KAAK,GAAG,MAAH,GAAY,QAAjC;AAAA,CARgB,EAU1B;AAAA,MAAGS,SAAH,SAAGA,SAAH;AAAA,SACAA,SAAS,KAAK,MAAd,QACAb,qBADA,kBAEM;AAAA;AAAA,GAFN,EAGM;AAAA;AAAA,GAHN,CADA;AAAA,CAV0B,EAiB1B;AAAA,MAAGa,SAAH,SAAGA,SAAH;AAAA,SACAA,SAAS,KAAK,MAAd,QACAb,qBADA,0BADA;AAAA,CAjB0B,CAAvB;;;AAuBPY,iBAAiB,CAACd,WAAlB,GAAgC,mBAAhC","sourcesContent":["import styled, { css } from \"styled-components\";\nimport { CollapseExpandSingleIcon, CloseSmallIcon } from \"../Icons/collection\";\nimport { Input } from \"../Input\";\nimport { StyledInputWrapper } from \"../Input/Styles\";\nimport tw from \"twin.macro\";\n\nexport const StyledComboBoxInput = styled(Input)<{ $loading?: boolean }>`\n overflow: hidden;\n text-overflow: ellipsis;\n width: 100%;\n`;\n\nStyledComboBoxInput.displayName = \"StyledComboBoxInput\";\n\nconst StyledIconDefaults = css`\n flex-shrink: 0;\n cursor: pointer;\n`;\n\nexport const StyledComboBoxCollapseExpandSingleIcon = styled(\n CollapseExpandSingleIcon\n)<{ $open?: boolean }>`\n ${StyledIconDefaults};\n color: var(--color-theme-600);\n transform: rotate(180deg);\n\n ${(props) =>\n props.$open &&\n css`\n transform: rotate(0deg);\n `}\n`;\n\nStyledComboBoxCollapseExpandSingleIcon.displayName =\n \"StyledComboBoxCollapseExpandSingleIcon\";\n\nexport const StyledComboBoxCloseSmallIcon = styled(CloseSmallIcon)`\n ${StyledIconDefaults};\n opacity: 0;\n transition-property: all;\n transition-duration: 0.2s;\n transition-delay: 0.5s;\n\n ${StyledComboBoxInput}:hover, ${StyledInputWrapper}:hover & {\n opacity: 1;\n transition-delay: 0s;\n }\n`;\n\nStyledComboBoxCloseSmallIcon.displayName = \"StyledComboBoxCloseSmallIcon\";\n\nexport const StyledComboBoxList = styled.div<{ $width?: number }>`\n min-width: 260px;\n background-color: var(--page-paper-main);\n border-radius: 8px;\n border: 1px solid var(--border-primary);\n box-shadow: var(--shadow-tertiary);\n margin: 8px 0;\n width: ${(props) => `${props.$width}px`};\n`;\n\nStyledComboBoxList.displayName = \"StyledComboBoxList\";\n\nexport const StyledChipWrapper = styled.div<{\n $autoSize: string;\n $open?: boolean;\n}>`\n ${tw`tw-flex`};\n ${tw`tw-gap-1`};\n ${tw`tw-flex-1`};\n\n overflow: ${({ $open }) => ($open ? \"auto\" : \"hidden\")};\n\n ${({ $autoSize }) =>\n $autoSize === \"auto\" &&\n css`\n ${tw`tw-flex-wrap`};\n ${tw`tw-w-full`};\n `}\n\n ${({ $autoSize }) =>\n $autoSize !== \"auto\" &&\n css`\n align-items: center;\n `}\n`;\nStyledChipWrapper.displayName = \"StyledChipWrapper\";\n"],"file":"Styles.js"}

package/dist/cjs/components/Entity/EntityCard.js CHANGED Viewed

@@ -1,19 +1,25 @@
 "use strict";
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EntityCard = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _Styles = require("./Styles");
 var _EntityProperty = require("./EntityProperty");
-var _excluded = ["children", "actions", "renderAs", "isCollection", "background", "className"];
+var _ConditionWrapper = require("../../helpers/ConditionWrapper/ConditionWrapper");
+var _excluded = ["children", "actions", "renderAs", "isCollection", "background", "className", "component"];
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -29,10 +35,17 @@ var EntityCard = function EntityCard(_ref) {
       isCollection = _ref.isCollection,
       background = _ref.background,
       className = _ref.className,
+      component = _ref.component,
       rest = _objectWithoutProperties(_ref, _excluded);
   var paperType = renderAs === "grid" ? "paper-1" : "paper-2";
-  return /*#__PURE__*/_react.default.createElement(_Styles.StyledEntityCard, _extends({
+  var WrapperElement = component ? component : _react.Fragment;
+  return /*#__PURE__*/_react.default.createElement(_ConditionWrapper.ConditionalWrapper, {
+    condition: typeof component !== "undefined",
+    wrap: function wrap(children) {
+      return /*#__PURE__*/_react.default.createElement(WrapperElement, rest, children);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Styles.StyledEntityCard, _extends({
     $renderAs: renderAs,
     $background: background,
     paperType: paperType,
@@ -48,7 +61,7 @@ var EntityCard = function EntityCard(_ref) {
     return null;
   }), actions && /*#__PURE__*/_react.default.createElement(_Styles.StyledEntityActions, {
     $renderAs: renderAs
-  }, actions));
+  }, actions)));
 };
 exports.EntityCard = EntityCard;

package/dist/cjs/components/Entity/EntityCard.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Entity/EntityCard.tsx"],"names":["EntityCard","children","actions","renderAs","isCollection","background","className","rest","paperType","React","Children","map","child","isValidElement","type","EntityProperty","cloneElement","$renderAs","displayName"],"mappings":"~~;;;;;;;~~AAAA;;~~AACA~~;;AAEA~~;;;;;;;;;;;;AAYO~~,IAAMA,UAAsC,GAAG,SAAzCA,UAAyC,~~OAQhD~~;AAAA,~~MAPJC~~,~~QAOI~~,~~QAPJA~~,~~QAOI~~;AAAA,~~MANJC~~,~~OAMI~~,~~QANJA~~,~~OAMI~~;AAAA,~~2BALJC~~,~~QAKI~~;AAAA,~~MALJA~~,~~QAKI~~,~~8BALO~~,~~MAKP~~;AAAA,MAJJC,~~YAII~~,QAJJA,~~YAII~~;AAAA,MAHJC,~~UAGI~~,QAHJA,~~UAGI~~;AAAA,MAFJC,SAEI,QAFJA,SAEI;AAAA,MADDC,IACC;;AACJ,MAAMC,SAAS,~~GAAGL~~,QAAQ,KAAK,MAAb,GAAsB,SAAtB,GAAkC,SAApD;AAEA,sBACE,6BAAC,wBAAD;AACE,IAAA,SAAS,~~EAAEA~~,QADb;AAEE,IAAA,WAAW,EAAEE,UAFf;AAGE,IAAA,SAAS,~~EAAEG~~,SAHb;AAIE,IAAA,SAAS,~~EAAEF~~,SAJb;AAKE,IAAA,aAAa,EAAEF;AALjB,~~KAMMG~~,IANN,~~GAQGE~~,eAAMC,QAAN,CAAeC,GAAf,~~CAAmBV~~,QAAnB,EAA6B,~~UAACW~~,KAAD,EAAW;AACvC,QAAI,6BAAMC,cAAN,CAAqBD,KAArB,KAA+BA,KAAK,CAACE,IAAN,KAAeC,8BAAlD,EAAkE;AAChE,0BAAON,eAAMO,YAAN,CAAmBJ,KAAnB,EAA0B;AAC/BK,QAAAA,SAAS,~~EAAEd~~;AADoB,OAA1B,CAAP;AAGD;;AACD,WAAO,IAAP;AACD,GAPA,CARH,EAgBGD,OAAO,iBACN,6BAAC,2BAAD;AAAqB,IAAA,SAAS,EAAEC;AAAhC,KACGD,OADH,CAjBJ,CADF;~~AAwBD~~,~~CAnCM~~;;;~~AAqCPF~~,UAAU,~~CAACkB~~,WAAX,GAAyB,YAAzB","sourcesContent":["import React, { CSSProperties, ReactNode } from \"react\";\nimport { StyledEntityActions, StyledEntityCard } from \"./Styles\";\n\nimport { EntityProperty } from \"./EntityProperty\";\nimport { ICardProps } from \"../Card\";\n\nexport interface IEntityCardProps extends ICardProps {\n renderAs?: \"grid\" \| \"list\";\n actions?: ReactNode;\n className?: string;\n isCollection?: boolean;\n background?: string;\n style?: CSSProperties;\n}\n\nexport const EntityCard: React.FC<IEntityCardProps> = ({\n children,\n actions,\n renderAs = \"grid\",\n isCollection,\n background,\n className,\n ...rest\n}) => {\n const paperType = renderAs === \"grid\" ? \"paper-1\" : \"paper-2\";\n\n return (\n <StyledEntityCard\n $renderAs={renderAs}\n $background={background}\n paperType={paperType}\n className={className}\n $isCollection={isCollection}\n {...rest}\n >\n {React.Children.map(children, (child) => {\n if (React.isValidElement(child) && child.type === EntityProperty) {\n return React.cloneElement(child, {\n $renderAs: renderAs,\n });\n }\n return null;\n })}\n {actions && (\n <StyledEntityActions $renderAs={renderAs}>\n {actions}\n </StyledEntityActions>\n )}\n </StyledEntityCard>\n );\n};\n\nEntityCard.displayName = \"EntityCard\";\n"],"file":"EntityCard.js"}
1	+ {"version":3,"sources":["../../../../src/components/Entity/EntityCard.tsx"],"names":["EntityCard","children","actions","renderAs","isCollection","background","className","component","rest","paperType","WrapperElement","Fragment","React","Children","map","child","isValidElement","type","EntityProperty","cloneElement","$renderAs","displayName"],"mappings":";;;;;;;;;AAAA;;AAOA;;AAEA;;AAEA;;;;;;;;;;;;;;AAuBO,IAAMA,UAAsC,GAAG,SAAzCA,UAAyC,OAShD;AAAA,MARJC,QAQI,QARJA,QAQI;AAAA,MAPJC,OAOI,QAPJA,OAOI;AAAA,2BANJC,QAMI;AAAA,MANJA,QAMI,8BANO,MAMP;AAAA,MALJC,YAKI,QALJA,YAKI;AAAA,MAJJC,UAII,QAJJA,UAII;AAAA,MAHJC,SAGI,QAHJA,SAGI;AAAA,MAFJC,SAEI,QAFJA,SAEI;AAAA,MADDC,IACC;;AACJ,MAAMC,SAAS,GAAGN,QAAQ,KAAK,MAAb,GAAsB,SAAtB,GAAkC,SAApD;AAEA,MAAMO,cAAc,GAAGH,SAAS,GAAGA,SAAH,GAAeI,eAA/C;AACA,sBACE,6BAAC,oCAAD;AACE,IAAA,SAAS,EAAE,OAAOJ,SAAP,KAAqB,WADlC;AAEE,IAAA,IAAI,EAAE,cAACN,QAAD;AAAA,0BAAc,6BAAC,cAAD,EAAoBO,IAApB,EAA2BP,QAA3B,CAAd;AAAA;AAFR,kBAIE,6BAAC,wBAAD;AACE,IAAA,SAAS,EAAEE,QADb;AAEE,IAAA,WAAW,EAAEE,UAFf;AAGE,IAAA,SAAS,EAAEI,SAHb;AAIE,IAAA,SAAS,EAAEH,SAJb;AAKE,IAAA,aAAa,EAAEF;AALjB,KAMMI,IANN,GAQGI,eAAMC,QAAN,CAAeC,GAAf,CAAmBb,QAAnB,EAA6B,UAACc,KAAD,EAAW;AACvC,QAAI,6BAAMC,cAAN,CAAqBD,KAArB,KAA+BA,KAAK,CAACE,IAAN,KAAeC,8BAAlD,EAAkE;AAChE,0BAAON,eAAMO,YAAN,CAAmBJ,KAAnB,EAA0B;AAC/BK,QAAAA,SAAS,EAAEjB;AADoB,OAA1B,CAAP;AAGD;;AACD,WAAO,IAAP;AACD,GAPA,CARH,EAgBGD,OAAO,iBACN,6BAAC,2BAAD;AAAqB,IAAA,SAAS,EAAEC;AAAhC,KACGD,OADH,CAjBJ,CAJF,CADF;AA6BD,CA1CM;;;AA4CPF,UAAU,CAACqB,WAAX,GAAyB,YAAzB","sourcesContent":["import React, {\n BaseHTMLAttributes,\n ComponentType,\n CSSProperties,\n Fragment,\n ReactNode,\n} from \"react\";\nimport { StyledEntityActions, StyledEntityCard } from \"./Styles\";\n\nimport { EntityProperty } from \"./EntityProperty\";\nimport { ICardProps } from \"../Card\";\nimport { ConditionalWrapper } from \"../../helpers/ConditionWrapper/ConditionWrapper\";\n\nexport interface IEntityCardProps\n extends ICardProps,\n BaseHTMLAttributes<HTMLElement> {\n /** Render as grid or list item /\n renderAs?: \"grid\" \| \"list\";\n /* action to show on right /\n actions?: ReactNode;\n /* ClassName to add on Card /\n className?: string;\n /* Show as group of Cards on grid /\n isCollection?: boolean;\n /* Background color to override for Card /\n background?: string;\n /* CSSProperties to override for Card /\n style?: CSSProperties;\n /* optional for Link react-router-dom /\n to?: string;\n /* You can pass any component as wrapper for card */\n component?: ComponentType<{ children: ReactNode }>;\n}\n\nexport const EntityCard: React.FC<IEntityCardProps> = ({\n children,\n actions,\n renderAs = \"grid\",\n isCollection,\n background,\n className,\n component,\n ...rest\n}) => {\n const paperType = renderAs === \"grid\" ? \"paper-1\" : \"paper-2\";\n\n const WrapperElement = component ? component : Fragment;\n return (\n <ConditionalWrapper\n condition={typeof component !== \"undefined\"}\n wrap={(children) => <WrapperElement {...rest}>{children}</WrapperElement>}\n >\n <StyledEntityCard\n $renderAs={renderAs}\n $background={background}\n paperType={paperType}\n className={className}\n $isCollection={isCollection}\n {...rest}\n >\n {React.Children.map(children, (child) => {\n if (React.isValidElement(child) && child.type === EntityProperty) {\n return React.cloneElement(child, {\n $renderAs: renderAs,\n });\n }\n return null;\n })}\n {actions && (\n <StyledEntityActions $renderAs={renderAs}>\n {actions}\n </StyledEntityActions>\n )}\n </StyledEntityCard>\n </ConditionalWrapper>\n );\n};\n\nEntityCard.displayName = \"EntityCard\";\n"],"file":"EntityCard.js"}

package/dist/cjs/components/Entity/EntityProperty.js CHANGED Viewed

@@ -29,17 +29,11 @@ var EntityProperty = function EntityProperty(_ref) {
       props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_Styles.StyledEntityProperty, _extends({
-    className: (0, _classnames.default)("c_property", className, {
-      "tw-hidden": visibleFromBreakpoint,
-      "sm:tw-flex": visibleFromBreakpoint === "sm",
-      "md:tw-flex": visibleFromBreakpoint === "md",
-      "lg:tw-flex": visibleFromBreakpoint === "lg",
-      "xl:tw-flex": visibleFromBreakpoint === "xl",
-      "2xl:tw-flex": visibleFromBreakpoint === "2xl"
-    })
+    className: (0, _classnames.default)("c-entity-property", className)
   }, props, {
     $order: listOrder,
-    $width: listWidth
+    $width: listWidth,
+    $visibleFromBreakpoint: visibleFromBreakpoint
   }));
 };

package/dist/cjs/components/Entity/EntityProperty.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Entity/EntityProperty.tsx"],"names":["EntityProperty","listOrder","listWidth","visibleFromBreakpoint","className","props","displayName"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;;;~~AAUO~~,IAAMA,cAAkD,GAAG,SAArDA,cAAqD,OAM5D;AAAA,MALJC,SAKI,QALJA,SAKI;AAAA,MAJJC,SAII,QAJJA,SAII;AAAA,MAHJC,qBAGI,QAHJA,qBAGI;AAAA,MAFJC,SAEI,QAFJA,SAEI;AAAA,MADDC,KACC;;AACJ,sBACE,6BAAC,4BAAD;AACE,IAAA,SAAS,EAAE,yBAAW,~~YAAX~~,~~EAAyBD~~,~~SAAzB,EAAoC~~;~~AAC7C~~,~~mBAAaD~~,~~qBADgC~~;~~AAE7C~~,~~oBAAcA~~,~~qBAAqB~~,~~KAAK~~,~~IAFK~~;~~AAG7C~~,~~oBAAcA,qBAAqB,KAAK,IAHK;AAI7C,oBAAcA,qBAAqB,KAAK,IAJK;AAK7C,oBAAcA,qBAAqB,KAAK,IALK;AAM7C,qBAAeA,qBAAqB,KAAK;AANI,KAApC;AADb,KASME,KATN;AAUE,~~IAAA,MAAM,~~EAAEJ~~,~~SAVV~~;~~AAWE~~,IAAA,~~MAAM~~,EAAEC;~~AAXV~~,KADF;~~AAeD~~,~~CAtBM~~;;;~~AAwBPF~~,cAAc,CAACM,WAAf,GAA6B,gBAA7B","sourcesContent":["import React, { HTMLAttributes } from \"react\";\nimport { StyledEntityProperty } from \"./Styles\";\nimport classNames from \"classnames\";\n\nexport interface IEntityCardPropertyProps\n extends HTMLAttributes<HTMLDivElement> {\n $renderAs?: \"grid\" \| \"list\";\n listOrder?: number;\n listWidth?: string \| number;\n visibleFromBreakpoint?: ~~\"sm\" \| \"md\" \| \"lg\" \| \"xl\" \| \"2xl\"~~;\n}\n\nexport const EntityProperty: React.FC<IEntityCardPropertyProps> = ({\n listOrder,\n listWidth,\n visibleFromBreakpoint,\n className,\n ...props\n}) => {\n return (\n <StyledEntityProperty\n className={classNames(\"~~c_property~~\", className, {\n \"tw-hidden\": visibleFromBreakpoint,\n \"sm:tw-flex\": visibleFromBreakpoint === \"sm\",\n \"md:tw-flex\": visibleFromBreakpoint === \"md\",\n \"lg:tw-flex\": visibleFromBreakpoint === \"lg\",\n \"xl:tw-flex\": visibleFromBreakpoint === \"xl\",\n \"2xl:tw-flex\": visibleFromBreakpoint === \"2xl\",\n })}\n {...props}\n $order={listOrder}\n $width={listWidth}\n />\n );\n};\n\nEntityProperty.displayName = \"EntityProperty\";\n"],"file":"EntityProperty.js"}
1	+ {"version":3,"sources":["../../../../src/components/Entity/EntityProperty.tsx"],"names":["EntityProperty","listOrder","listWidth","visibleFromBreakpoint","className","props","displayName"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;;;AAWO,IAAMA,cAAkD,GAAG,SAArDA,cAAqD,OAM5D;AAAA,MALJC,SAKI,QALJA,SAKI;AAAA,MAJJC,SAII,QAJJA,SAII;AAAA,MAHJC,qBAGI,QAHJA,qBAGI;AAAA,MAFJC,SAEI,QAFJA,SAEI;AAAA,MADDC,KACC;;AACJ,sBACE,6BAAC,4BAAD;AACE,IAAA,SAAS,EAAE,yBAAW,mBAAX,EAAgCD,SAAhC;AADb,KAEMC,KAFN;AAGE,IAAA,MAAM,EAAEJ,SAHV;AAIE,IAAA,MAAM,EAAEC,SAJV;AAKE,IAAA,sBAAsB,EAAEC;AAL1B,KADF;AASD,CAhBM;;;AAkBPH,cAAc,CAACM,WAAf,GAA6B,gBAA7B","sourcesContent":["import React, { HTMLAttributes } from \"react\";\nimport { StyledEntityProperty } from \"./Styles\";\nimport classNames from \"classnames\";\n\nexport type VisibleFromBreakpoint = \"sm\" \| \"md\" \| \"lg\" \| \"xl\" \| \"2xl\";\nexport interface IEntityCardPropertyProps\n extends HTMLAttributes<HTMLDivElement> {\n $renderAs?: \"grid\" \| \"list\";\n listOrder?: number;\n listWidth?: string \| number;\n visibleFromBreakpoint?: VisibleFromBreakpoint;\n}\n\nexport const EntityProperty: React.FC<IEntityCardPropertyProps> = ({\n listOrder,\n listWidth,\n visibleFromBreakpoint,\n className,\n ...props\n}) => {\n return (\n <StyledEntityProperty\n className={classNames(\"c-entity-property\", className)}\n {...props}\n $order={listOrder}\n $width={listWidth}\n $visibleFromBreakpoint={visibleFromBreakpoint}\n />\n );\n};\n\nEntityProperty.displayName = \"EntityProperty\";\n"],"file":"EntityProperty.js"}

package/dist/cjs/components/Entity/Styles.js CHANGED Viewed

@@ -40,7 +40,7 @@ StyledEntityCard.displayName = "StyledEntityCard";
 var StyledEntityProperty = (0, _styledComponents.default)("div").withConfig({
   displayName: "Styles__StyledEntityProperty",
   componentId: "sc-bjeea8-1"
-})(["", " ", " ", ""], function (_ref4) {
+})(["", " ", " ", " ", " ", " ", " ", " ", " ", ""], function (_ref4) {
   var $renderAs = _ref4.$renderAs,
       $width = _ref4.$width;
   return $renderAs === "list" && (0, _styledComponents.css)(["display:flex;align-items:center;min-width:24px;flex:", ";"], $width ? "unset" : 1);
@@ -48,15 +48,55 @@ var StyledEntityProperty = (0, _styledComponents.default)("div").withConfig({
   return props.$renderAs === "list" && props.$order && (0, _styledComponents.css)(["order:", ";"], props.$order);
 }, function (props) {
   return props.$renderAs === "list" && props.$width && (0, _styledComponents.css)(["width:", ";"], props.$width);
+}, function (_ref5) {
+  var $visibleFromBreakpoint = _ref5.$visibleFromBreakpoint;
+  return $visibleFromBreakpoint && (0, _styledComponents.css)(["", ""], {
+    "display": "none"
+  });
+}, function (_ref6) {
+  var $visibleFromBreakpoint = _ref6.$visibleFromBreakpoint;
+  return $visibleFromBreakpoint === "sm" && (0, _styledComponents.css)(["", ""], {
+    "@media (min-width: 640px)": {
+      "display": "flex"
+    }
+  });
+}, function (_ref7) {
+  var $visibleFromBreakpoint = _ref7.$visibleFromBreakpoint;
+  return $visibleFromBreakpoint === "md" && (0, _styledComponents.css)(["", ""], {
+    "@media (min-width: 768px)": {
+      "display": "flex"
+    }
+  });
+}, function (_ref8) {
+  var $visibleFromBreakpoint = _ref8.$visibleFromBreakpoint;
+  return $visibleFromBreakpoint === "lg" && (0, _styledComponents.css)(["", ""], {
+    "@media (min-width: 1024px)": {
+      "display": "flex"
+    }
+  });
+}, function (_ref9) {
+  var $visibleFromBreakpoint = _ref9.$visibleFromBreakpoint;
+  return $visibleFromBreakpoint === "xl" && (0, _styledComponents.css)(["", ""], {
+    "@media (min-width: 1280px)": {
+      "display": "flex"
+    }
+  });
+}, function (_ref10) {
+  var $visibleFromBreakpoint = _ref10.$visibleFromBreakpoint;
+  return $visibleFromBreakpoint === "2xl" && (0, _styledComponents.css)(["", ""], {
+    "@media (min-width: 1536px)": {
+      "display": "flex"
+    }
+  });
 });
 exports.StyledEntityProperty = StyledEntityProperty;
 StyledEntityProperty.displayName = "StyledEntityProperty";
 var StyledEntityGroup = (0, _styledComponents.default)("div").withConfig({
   displayName: "Styles__StyledEntityGroup",
   componentId: "sc-bjeea8-2"
-})(["", " ", " ", ""], function (_ref5) {
-  var $renderAs = _ref5.$renderAs,
-      $gap = _ref5.$gap;
+})(["", " ", " ", ""], function (_ref11) {
+  var $renderAs = _ref11.$renderAs,
+      $gap = _ref11.$gap;
   return $renderAs === "grid" && (0, _styledComponents.css)(["display:grid;grid-gap:", ";grid-template-columns:repeat(auto-fill,minmax(260px,1fr));"], $gap ? "".concat($gap, "px") : "initial");
 }, function (props) {
   return props.$renderAs === "list" && (0, _styledComponents.css)(["display:flex;flex-direction:column;"]);
@@ -68,11 +108,11 @@ StyledEntityGroup.displayName = "StyledEntityGroup";
 var StyledEntityActions = (0, _styledComponents.default)("div").withConfig({
   displayName: "Styles__StyledEntityActions",
   componentId: "sc-bjeea8-3"
-})(["display:flex;flex-direction:column;align-items:center;", " ", ""], function (_ref6) {
-  var $renderAs = _ref6.$renderAs;
+})(["display:flex;flex-direction:column;align-items:center;", " ", ""], function (_ref12) {
+  var $renderAs = _ref12.$renderAs;
   return $renderAs === "grid" && (0, _styledComponents.css)(["position:absolute;right:16px;top:20px;"]);
-}, function (_ref7) {
-  var $renderAs = _ref7.$renderAs;
+}, function (_ref13) {
+  var $renderAs = _ref13.$renderAs;
   return $renderAs === "list" && (0, _styledComponents.css)(["justify-self:flex-end;"]);
 });
 exports.StyledEntityActions = StyledEntityActions;