@activecollab/components 1.0.295 → 1.0.297

package/dist/cjs/components/AvatarGroup/AvatarGroup.js

@@ -7,51 +7,123 @@ Object.defineProperty(exports, "__esModule", {
 exports.AvatarGroup = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _react = _interopRequireWildcard(require("react"));
+var _Tooltip = require("../Tooltip");
 var _Typography = require("../Typography/Typography");
 var _Styles = require("./Styles");
 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-var AvatarGroup = function AvatarGroup(_ref) {
+var AvatarGroup = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var _Children$toArray;
   var limit = _ref.limit,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 34 : _ref$size,
     children = _ref.children,
-    counterProps = _ref.counterProps;
-  // always display counter with min +2 as +1 can require 1 more Avatar
+    _ref$hasTooltip = _ref.hasTooltip,
+    hasTooltip = _ref$hasTooltip === void 0 ? false : _ref$hasTooltip;
+  // always display counter with min +2 as +1 can takes space of an 1 more Avatar
   var minChildren = _react.Children.count(children) - limit > 1 ? false : true;
+  // gap between Avatars
+  var gap = 8;
   var _children = minChildren ? _react.Children.toArray(children) : _react.Children.toArray(children).slice(0, limit);
   var handleVariant = (0, _react.useMemo)(function () {
     if (size >= 34) return "Caption 1";
     return "Caption 2";
   }, [size]);
-  return /*#__PURE__*/_react.default.createElement(_Styles.AvatarGroupsStyles, null, _children.map(function (child) {
-    var item = child;
+
+  // get all names indexed above limit number from alt tag on Avatar for counter tooltip
+  var nameArr = (_Children$toArray = _react.Children.toArray(children)) === null || _Children$toArray === void 0 ? void 0 : _Children$toArray.slice(limit).map(function (item) {
+    var _ref2 = item,
+      props = _ref2.props;
+    return props.alt;
+  });
+
+  // render React Element with tooltip or without
+  var renderAvatars = function renderAvatars(item) {
+    var tooltipText = item.props.alt;
+    var alt = "Image of ".concat(tooltipText);
+    if (hasTooltip) {
+      return /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
+        title: tooltipText
+      }, /*#__PURE__*/(0, _react.cloneElement)(item, _objectSpread(_objectSpread({}, item.props), {}, {
+        size: size,
+        alt: alt,
+        style: {
+          marginLeft: "-".concat(gap, "px"),
+          outline: "1px solid var(--page-paper-main)"
+        }
+      })));
+    }
     return /*#__PURE__*/(0, _react.cloneElement)(item, _objectSpread(_objectSpread({}, item.props), {}, {
       size: size,
+      alt: alt,
       style: {
-        marginInlineStart: "-8px",
+        marginLeft: "-".concat(gap, "px"),
         outline: "1px solid var(--page-paper-main)"
       }
     }));
-  }), limit >= _react.Children.count(children) || minChildren ? null : /*#__PURE__*/_react.default.createElement(_StyledLengthCountStyles, _extends({
-    size: size,
-    role: "status",
-    "aria-label": "Rest of the users"
-  }, counterProps), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
-    variant: handleVariant,
-    weight: "medium"
-  }, "+", _react.Children.count(children) - limit)));
-};
+  };
+
+  // render Tooltip if hasTooltip is true
+  var renderCounter = function renderCounter() {
+    if (hasTooltip) {
+      return /*#__PURE__*/_react.default.createElement(_StyledTooltip, {
+        title: nameArr.join("\n")
+      }, /*#__PURE__*/_react.default.createElement(_StyledLengthCountStyles, {
+        size: size,
+        role: "status",
+        "aria-label": "Rest of the users",
+        $_css: "-".concat(gap, "px")
+      }, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+        variant: handleVariant,
+        weight: "medium"
+      }, "+", _react.Children.count(children) - limit)));
+    }
+    return /*#__PURE__*/_react.default.createElement(_StyledLengthCountStyles2, {
+      size: size,
+      role: "status",
+      "aria-label": "Rest of the users",
+      $_css2: "-".concat(gap, "px")
+    }, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+      variant: handleVariant,
+      weight: "medium"
+    }, "+", _react.Children.count(children) - limit));
+  };
+  return /*#__PURE__*/_react.default.createElement(_Styles.AvatarGroupsStyles, {
+    hasTooltip: hasTooltip,
+    gap: gap,
+    ref: ref
+  }, _children.map(function (child) {
+    var item = child;
+    return renderAvatars(item);
+  }), limit >= _react.Children.count(children) || minChildren ? null : renderCounter());
+});
 exports.AvatarGroup = AvatarGroup;
-var _StyledLengthCountStyles = (0, _styledComponents.default)(_Styles.LengthCountStyles).withConfig({
-  displayName: "AvatarGroup___StyledLengthCountStyles",
+AvatarGroup.displayName = "AvatarGroup";
+var _StyledTooltip = (0, _styledComponents.default)(_Tooltip.Tooltip).withConfig({
+  displayName: "AvatarGroup___StyledTooltip",
   componentId: "sc-1rsx1j5-0"
 })({
-  marginInlineStart: "-8px"
+  whiteSpace: "break-spaces",
+  lineHeight: "18px"
+});
+var _StyledLengthCountStyles = (0, _styledComponents.default)(_Styles.LengthCountStyles).withConfig({
+  displayName: "AvatarGroup___StyledLengthCountStyles",
+  componentId: "sc-1rsx1j5-1"
+})(function (p) {
+  return {
+    marginLeft: p.$_css
+  };
+});
+var _StyledLengthCountStyles2 = (0, _styledComponents.default)(_Styles.LengthCountStyles).withConfig({
+  displayName: "AvatarGroup___StyledLengthCountStyles2",
+  componentId: "sc-1rsx1j5-2"
+})(function (p) {
+  return {
+    marginLeft: p.$_css2
+  };
 });
 //# sourceMappingURL=AvatarGroup.js.map

package/dist/cjs/components/AvatarGroup/AvatarGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.js","names":["AvatarGroup","limit","size","children","counterProps","minChildren","Children","count","_children","toArray","slice","handleVariant","useMemo","map","child","item","cloneElement","props","style","marginInlineStart","outline"],"sources":["../../../../src/components/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import React, {\n  Children,\n  cloneElement,\n  HTMLAttributes,\n  PropsWithChildren,\n  ReactElement,\n  useMemo,\n} from \"react\";\nimport { AvatarProps } from \"../Avatar/Avatar\";\nimport { Typography } from \"../Typography/Typography\";\nimport { AvatarGroupsStyles, LengthCountStyles } from \"./Styles\";\n\nexport interface AvatarGroupsProps {\n  limit: number;\n  size?: number;\n  counterProps?: HTMLAttributes<HTMLDivElement> & {\n    [dataAttibute: `data-${string}`]: string;\n  };\n}\n\nexport const AvatarGroup = ({\n  limit,\n  size = 34,\n  children,\n  counterProps,\n}: PropsWithChildren<AvatarGroupsProps>) => {\n  // always display counter with min +2 as +1 can require 1 more Avatar\n  const minChildren = Children.count(children) - limit > 1 ? false : true;\n  const _children = minChildren\n    ? Children.toArray(children)\n    : Children.toArray(children).slice(0, limit);\n\n  const handleVariant = useMemo(() => {\n    if (size >= 34) return \"Caption 1\";\n    return \"Caption 2\";\n  }, [size]);\n\n  return (\n    <AvatarGroupsStyles>\n      {_children.map((child) => {\n        const item = child as ReactElement<AvatarProps>;\n\n        return cloneElement(item, {\n          ...item.props,\n          size: size,\n          style: {\n            marginInlineStart: \"-8px\",\n            outline: \"1px solid var(--page-paper-main)\",\n          },\n        });\n      })}\n\n      {limit >= Children.count(children) || minChildren ? null : (\n        <LengthCountStyles\n          size={size}\n          role=\"status\"\n          aria-label=\"Rest of the users\"\n          css={{ marginInlineStart: \"-8px\" }}\n          {...counterProps}\n        >\n          <Typography variant={handleVariant} weight=\"medium\">\n            +{Children.count(children) - limit}\n          </Typography>\n        </LengthCountStyles>\n      )}\n    </AvatarGroupsStyles>\n  );\n};\n"],"mappings":";;;;;;;;AAAA;AASA;AACA;AAAiE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAU1D,IAAMA,WAAW,GAAG,SAAdA,WAAW,OAKoB;EAAA,IAJ1CC,KAAK,QAALA,KAAK;IAAA,iBACLC,IAAI;IAAJA,IAAI,0BAAG,EAAE;IACTC,QAAQ,QAARA,QAAQ;IACRC,YAAY,QAAZA,YAAY;EAEZ;EACA,IAAMC,WAAW,GAAGC,eAAQ,CAACC,KAAK,CAACJ,QAAQ,CAAC,GAAGF,KAAK,GAAG,CAAC,GAAG,KAAK,GAAG,IAAI;EACvE,IAAMO,SAAS,GAAGH,WAAW,GACzBC,eAAQ,CAACG,OAAO,CAACN,QAAQ,CAAC,GAC1BG,eAAQ,CAACG,OAAO,CAACN,QAAQ,CAAC,CAACO,KAAK,CAAC,CAAC,EAAET,KAAK,CAAC;EAE9C,IAAMU,aAAa,GAAG,IAAAC,cAAO,EAAC,YAAM;IAClC,IAAIV,IAAI,IAAI,EAAE,EAAE,OAAO,WAAW;IAClC,OAAO,WAAW;EACpB,CAAC,EAAE,CAACA,IAAI,CAAC,CAAC;EAEV,oBACE,6BAAC,0BAAkB,QAChBM,SAAS,CAACK,GAAG,CAAC,UAACC,KAAK,EAAK;IACxB,IAAMC,IAAI,GAAGD,KAAkC;IAE/C,oBAAO,IAAAE,mBAAY,EAACD,IAAI,kCACnBA,IAAI,CAACE,KAAK;MACbf,IAAI,EAAEA,IAAI;MACVgB,KAAK,EAAE;QACLC,iBAAiB,EAAE,MAAM;QACzBC,OAAO,EAAE;MACX;IAAC,GACD;EACJ,CAAC,CAAC,EAEDnB,KAAK,IAAIK,eAAQ,CAACC,KAAK,CAACJ,QAAQ,CAAC,IAAIE,WAAW,GAAG,IAAI,gBACtD;IACE,IAAI,EAAEH,IAAK;IACX,IAAI,EAAC,QAAQ;IACb,cAAW;EAAmB,GAE1BE,YAAY,gBAEhB,6BAAC,sBAAU;IAAC,OAAO,EAAEO,aAAc;IAAC,MAAM,EAAC;EAAQ,QAC/CL,eAAQ,CAACC,KAAK,CAACJ,QAAQ,CAAC,GAAGF,KAAK,CACvB,CAEhB,CACkB;AAEzB,CAAC;AAAC;AAAA;EAAA;EAAA;AAAA,GAVa;EAAEkB,iBAAiB,EAAE;AAAO,CAAC"}
+{"version":3,"file":"AvatarGroup.js","names":["AvatarGroup","forwardRef","ref","limit","size","children","hasTooltip","minChildren","Children","count","gap","_children","toArray","slice","handleVariant","useMemo","nameArr","map","item","props","alt","renderAvatars","tooltipText","cloneElement","style","marginLeft","outline","renderCounter","join","child","displayName","whiteSpace","lineHeight"],"sources":["../../../../src/components/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import React, {\n  Children,\n  cloneElement,\n  PropsWithChildren,\n  ReactElement,\n  useMemo,\n  forwardRef,\n} from \"react\";\nimport { AvatarProps } from \"../Avatar/Avatar\";\nimport { Tooltip } from \"../Tooltip\";\nimport { Typography } from \"../Typography/Typography\";\nimport { AvatarGroupsStyles, LengthCountStyles } from \"./Styles\";\n\nexport interface AvatarGroupsProps {\n  limit: number;\n  size?: number;\n  hasTooltip?: boolean;\n}\n\nexport const AvatarGroup = forwardRef<\n  HTMLDivElement,\n  PropsWithChildren<AvatarGroupsProps>\n>(({ limit, size = 34, children, hasTooltip = false }, ref) => {\n  // always display counter with min +2 as +1 can takes space of an 1 more Avatar\n  const minChildren = Children.count(children) - limit > 1 ? false : true;\n  // gap between Avatars\n  const gap = 8;\n\n  const _children = minChildren\n    ? Children.toArray(children)\n    : Children.toArray(children).slice(0, limit);\n\n  const handleVariant = useMemo(() => {\n    if (size >= 34) return \"Caption 1\";\n    return \"Caption 2\";\n  }, [size]);\n\n  // get all names indexed above limit number from alt tag on Avatar for counter tooltip\n  const nameArr = Children.toArray(children)\n    ?.slice(limit)\n    .map((item) => {\n      const { props } = item as ReactElement;\n      return props.alt;\n    });\n\n  // render React Element with tooltip or without\n  const renderAvatars = (item: ReactElement) => {\n    const tooltipText = item.props.alt;\n    const alt = `Image of ${tooltipText}`;\n\n    if (hasTooltip) {\n      return (\n        <Tooltip title={tooltipText}>\n          {cloneElement(item, {\n            ...item.props,\n            size: size,\n            alt: alt,\n            style: {\n              marginLeft: `-${gap}px`,\n              outline: \"1px solid var(--page-paper-main)\",\n            },\n          })}\n        </Tooltip>\n      );\n    }\n    return cloneElement(item, {\n      ...item.props,\n      size: size,\n      alt: alt,\n      style: {\n        marginLeft: `-${gap}px`,\n        outline: \"1px solid var(--page-paper-main)\",\n      },\n    });\n  };\n\n  // render Tooltip if hasTooltip is true\n  const renderCounter = () => {\n    if (hasTooltip) {\n      return (\n        <Tooltip\n          title={nameArr.join(\"\\n\")}\n          css={{\n            whiteSpace: \"break-spaces\",\n            lineHeight: \"18px\",\n          }}\n        >\n          <LengthCountStyles\n            size={size}\n            role=\"status\"\n            aria-label=\"Rest of the users\"\n            css={{\n              marginLeft: `-${gap}px`,\n            }}\n          >\n            <Typography variant={handleVariant} weight=\"medium\">\n              +{Children.count(children) - limit}\n            </Typography>\n          </LengthCountStyles>\n        </Tooltip>\n      );\n    }\n    return (\n      <LengthCountStyles\n        size={size}\n        role=\"status\"\n        aria-label=\"Rest of the users\"\n        css={{\n          marginLeft: `-${gap}px`,\n        }}\n      >\n        <Typography variant={handleVariant} weight=\"medium\">\n          +{Children.count(children) - limit}\n        </Typography>\n      </LengthCountStyles>\n    );\n  };\n\n  return (\n    <AvatarGroupsStyles hasTooltip={hasTooltip} gap={gap} ref={ref}>\n      {_children.map((child) => {\n        const item = child as ReactElement<AvatarProps>;\n\n        return renderAvatars(item);\n      })}\n\n      {limit >= Children.count(children) || minChildren\n        ? null\n        : renderCounter()}\n    </AvatarGroupsStyles>\n  );\n});\n\nAvatarGroup.displayName = \"AvatarGroup\";\n"],"mappings":"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"}

package/dist/cjs/components/AvatarGroup/Styles.js

@@ -10,7 +10,15 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var AvatarGroupsStyles = _styledComponents.default.div.withConfig({
   displayName: "Styles__AvatarGroupsStyles",
   componentId: "sc-1padv46-0"
-})(["display:flex;cursor:pointer;width:fit-content;", ""], _FontStyle.FontStyle);
+})(["", " align-items:center;cursor:pointer;display:flex;justify-content:center;position:relative;user-select:none;width:fit-content;&::before{border-radius:5px;background-color:", ";content:\"\";height:100%;margin-left:", "px;opacity:0;padding:5px 0;position:absolute;transition:opacity 0.2s ease-in-out;width:", ";}&:hover::before{opacity:1;}"], _FontStyle.FontStyle, function (props) {
+  return !props.hasTooltip && "var(--color-theme-300)";
+}, function (_ref) {
+  var gap = _ref.gap;
+  return -gap;
+}, function (_ref2) {
+  var gap = _ref2.gap;
+  return "calc(100% + ".concat(gap * 2, "px + 5px)");
+});
 exports.AvatarGroupsStyles = AvatarGroupsStyles;
 var LengthCountStyles = _styledComponents.default.div.withConfig({
   displayName: "Styles__LengthCountStyles",

package/dist/cjs/components/AvatarGroup/Styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["AvatarGroupsStyles","styled","div","FontStyle","LengthCountStyles","props","size"],"sources":["../../../../src/components/AvatarGroup/Styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const AvatarGroupsStyles = styled.div`\n  display: flex;\n  cursor: pointer;\n  width: fit-content;\n  ${FontStyle}\n`;\n\ninterface LengthCountStylesProps {\n  size: number;\n}\n\nexport const LengthCountStyles = styled.div<LengthCountStylesProps>`\n  align-items: center;\n  background-color: var(--color-theme-400);\n  block-size: ${(props) => props.size + \"px\"};\n  border-radius: var(--ac-br-rounded);\n  display: flex;\n  inline-size: ${(props) => props.size + \"px\"};\n  justify-content: center;\n  outline: 1px solid var(--page-paper-main);\n  z-index: 99;\n`;\n"],"mappings":";;;;;;AAAA;AACA;AAAyC;AAElC,IAAMA,kBAAkB,GAAGC,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,2DAIxCC,oBAAS,CACZ;AAAC;AAMK,IAAMC,iBAAiB,GAAGH,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,gOAG3B,UAACG,KAAK;EAAA,OAAKA,KAAK,CAACC,IAAI,GAAG,IAAI;AAAA,GAG3B,UAACD,KAAK;EAAA,OAAKA,KAAK,CAACC,IAAI,GAAG,IAAI;AAAA,EAI5C;AAAC"}
+{"version":3,"file":"Styles.js","names":["AvatarGroupsStyles","styled","div","FontStyle","props","hasTooltip","gap","LengthCountStyles","size"],"sources":["../../../../src/components/AvatarGroup/Styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const AvatarGroupsStyles = styled.div<{\n  hasTooltip: boolean;\n  gap: number;\n}>`\n  ${FontStyle}\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  position: relative;\n  user-select: none;\n  width: fit-content;\n\n  &::before {\n    border-radius: 5px;\n    background-color: ${(props) =>\n      !props.hasTooltip && \"var(--color-theme-300)\"};\n    content: \"\";\n    height: 100%;\n    margin-left: ${({ gap }) => -gap}px;\n    opacity: 0;\n    padding: 5px 0;\n    position: absolute;\n    transition: opacity 0.2s ease-in-out;\n    // 5px represents padding px\n    width: ${({ gap }) => `calc(100% + ${gap * 2}px + 5px)`};\n  }\n\n  &:hover::before {\n    opacity: 1;\n  }\n`;\n\ninterface LengthCountStylesProps {\n  size: number;\n}\n\nexport const LengthCountStyles = styled.div<LengthCountStylesProps>`\n  align-items: center;\n  background-color: var(--color-theme-400);\n  block-size: ${(props) => props.size + \"px\"};\n  border-radius: var(--ac-br-rounded);\n  display: flex;\n  inline-size: ${(props) => props.size + \"px\"};\n  justify-content: center;\n  outline: 1px solid var(--page-paper-main);\n  z-index: 99;\n`;\n"],"mappings":";;;;;;AAAA;AACA;AAAyC;AAElC,IAAMA,kBAAkB,GAAGC,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,4VAIxCC,oBAAS,EAWW,UAACC,KAAK;EAAA,OACxB,CAACA,KAAK,CAACC,UAAU,IAAI,wBAAwB;AAAA,GAGhC;EAAA,IAAGC,GAAG,QAAHA,GAAG;EAAA,OAAO,CAACA,GAAG;AAAA,GAMvB;EAAA,IAAGA,GAAG,SAAHA,GAAG;EAAA,6BAAsBA,GAAG,GAAG,CAAC;AAAA,CAAW,CAM1D;AAAC;AAMK,IAAMC,iBAAiB,GAAGN,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,gOAG3B,UAACE,KAAK;EAAA,OAAKA,KAAK,CAACI,IAAI,GAAG,IAAI;AAAA,GAG3B,UAACJ,KAAK;EAAA,OAAKA,KAAK,CAACI,IAAI,GAAG,IAAI;AAAA,EAI5C;AAAC"}

package/dist/cjs/components/Select/OptionGroup/OptionGroup.js

@@ -81,7 +81,9 @@ var OptionGroup = function OptionGroup(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_Styles.StyledOptionGroupOption, {
     onMouseEnter: handleHover,
     hover: hover === id && type === "multiple"
-  }, /*#__PURE__*/_react.default.createElement(_Styles.StyledOptionGroupHeader, null, name, type === "multiple" && /*#__PURE__*/_react.default.createElement(_Checkbox.Checkbox, {
+  }, /*#__PURE__*/_react.default.createElement(_Styles.StyledOptionGroupHeader, null, /*#__PURE__*/_react.default.createElement(_Styles.StyledOptionGroupHeaderName, {
+    weight: "bold"
+  }, name), type === "multiple" && /*#__PURE__*/_react.default.createElement(_Checkbox.Checkbox, {
     id: "".concat(id),
     checked: isAllOptionsChecked,
     onChange: handleClick,

package/dist/cjs/components/Select/OptionGroup/OptionGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"OptionGroup.js","names":["OptionGroup","id","name","options","type","hover","filter","checked","onChange","setHover","renderOptions","optionGroupClassName","list","useMemo","v","toLowerCase","includes","trim","useEffect","document","getElementById","focus","isAllOptionsChecked","every","option","handleHover","useCallback","undefined","allOptionValues","map","handleClick","e","stopPropagation","i","values","unique","item","pos","indexOf","classNames","index","displayName"],"sources":["../../../../../src/components/Select/OptionGroup/OptionGroup.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, FC } from \"react\";\nimport classNames from \"classnames\";\nimport { IOptionItemProps } from \"../Option/Option\";\nimport { Checkbox } from \"../../Checkbox/Checkbox\";\nimport {\n  StyledOptionGroup,\n  StyledOptionGroupHeader,\n  StyledOptionGroupOption,\n  StyledOptionGroupLi,\n} from \"./Styles\";\nimport { List } from \"../../List\";\n\nexport interface IOptionGroupProps extends IOptionItemProps {\n  /** Options items list */\n  options: IOptionItemProps[];\n}\n\ninterface IAdditionalOptionGroupProps {\n  /** Select type: single or multiple */\n  type?: \"single\" | \"multiple\";\n  /** Value of hovered element */\n  hover?: number | string | null;\n  /** Filter for labels */\n  filter?: string;\n  /** Checked values */\n  checked: (string | number)[];\n  /** onChange callback */\n  onChange?: (e: (string | number)[]) => void;\n  /** Set value of hovered element */\n  setHover?: (e: number | string | undefined) => void;\n  /** Render function */\n  renderOptions?: (item: IOptionItemProps, index: number) => void;\n  /** Value that represent class names */\n  optionGroupClassName?: string;\n}\n\nexport const OptionGroup: FC<\n  IOptionGroupProps & IAdditionalOptionGroupProps\n> = ({\n  id,\n  name,\n  options,\n  type,\n  hover,\n  filter,\n  checked,\n  onChange,\n  setHover,\n  renderOptions,\n  optionGroupClassName,\n}) => {\n  const list = useMemo(\n    () =>\n      filter\n        ? options.filter((v) =>\n            v.name.toLowerCase().includes(filter.trim().toLowerCase())\n          )\n        : options,\n    [filter, options]\n  );\n\n  useEffect(() => {\n    if (hover === id && type !== \"single\") {\n      document.getElementById(`${id}`)?.focus();\n    }\n  }, [hover, type, id]);\n\n  const isAllOptionsChecked = useMemo(\n    () => options.every((option) => checked.includes(option.id)),\n    [options, checked]\n  );\n\n  const handleHover = useCallback(() => {\n    if (setHover) {\n      setHover(type === \"single\" ? undefined : id);\n    }\n  }, [setHover, type, id]);\n\n  const allOptionValues = useMemo(\n    () => options.map((option) => option.id),\n    [options]\n  );\n\n  const handleClick = useCallback(\n    (e) => {\n      e.stopPropagation();\n      if (onChange) {\n        if (isAllOptionsChecked) {\n          onChange(\n            checked.filter((i) => allOptionValues.includes(i) === false)\n          );\n        } else {\n          const values = [...checked, ...allOptionValues];\n          const unique = values.filter((item, pos) => {\n            return values.indexOf(item) === pos;\n          });\n          onChange(unique);\n        }\n      }\n    },\n    [allOptionValues, checked, isAllOptionsChecked, onChange]\n  );\n\n  return (\n    <StyledOptionGroupLi\n      key={id}\n      className={classNames(\"c-option-group\", optionGroupClassName)}\n    >\n      <StyledOptionGroup key={id}>\n        <StyledOptionGroupOption\n          onMouseEnter={handleHover}\n          hover={hover === id && type === \"multiple\"}\n        >\n          <StyledOptionGroupHeader>\n            {name}\n            {type === \"multiple\" && (\n              <Checkbox\n                id={`${id}`}\n                checked={isAllOptionsChecked}\n                onChange={handleClick}\n                type=\"checkbox\"\n              />\n            )}\n          </StyledOptionGroupHeader>\n        </StyledOptionGroupOption>\n        <List>\n          {list.map((item: IOptionItemProps, index) => {\n            return typeof renderOptions === \"function\"\n              ? renderOptions(item, index)\n              : item.name;\n          })}\n        </List>\n      </StyledOptionGroup>\n    </StyledOptionGroupLi>\n  );\n};\n\nOptionGroup.displayName = \"OptionGroup\";\n"],"mappings":"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"}
+{"version":3,"file":"OptionGroup.js","names":["OptionGroup","id","name","options","type","hover","filter","checked","onChange","setHover","renderOptions","optionGroupClassName","list","useMemo","v","toLowerCase","includes","trim","useEffect","document","getElementById","focus","isAllOptionsChecked","every","option","handleHover","useCallback","undefined","allOptionValues","map","handleClick","e","stopPropagation","i","values","unique","item","pos","indexOf","classNames","index","displayName"],"sources":["../../../../../src/components/Select/OptionGroup/OptionGroup.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, FC } from \"react\";\nimport classNames from \"classnames\";\nimport { IOptionItemProps } from \"../Option/Option\";\nimport { Checkbox } from \"../../Checkbox/Checkbox\";\nimport {\n  StyledOptionGroup,\n  StyledOptionGroupHeader,\n  StyledOptionGroupOption,\n  StyledOptionGroupLi,\n  StyledOptionGroupHeaderName,\n} from \"./Styles\";\nimport { List } from \"../../List\";\n\nexport interface IOptionGroupProps extends IOptionItemProps {\n  /** Options items list */\n  options: IOptionItemProps[];\n}\n\ninterface IAdditionalOptionGroupProps {\n  /** Select type: single or multiple */\n  type?: \"single\" | \"multiple\";\n  /** Value of hovered element */\n  hover?: number | string | null;\n  /** Filter for labels */\n  filter?: string;\n  /** Checked values */\n  checked: (string | number)[];\n  /** onChange callback */\n  onChange?: (e: (string | number)[]) => void;\n  /** Set value of hovered element */\n  setHover?: (e: number | string | undefined) => void;\n  /** Render function */\n  renderOptions?: (item: IOptionItemProps, index: number) => void;\n  /** Value that represent class names */\n  optionGroupClassName?: string;\n}\n\nexport const OptionGroup: FC<\n  IOptionGroupProps & IAdditionalOptionGroupProps\n> = ({\n  id,\n  name,\n  options,\n  type,\n  hover,\n  filter,\n  checked,\n  onChange,\n  setHover,\n  renderOptions,\n  optionGroupClassName,\n}) => {\n  const list = useMemo(\n    () =>\n      filter\n        ? options.filter((v) =>\n            v.name.toLowerCase().includes(filter.trim().toLowerCase())\n          )\n        : options,\n    [filter, options]\n  );\n\n  useEffect(() => {\n    if (hover === id && type !== \"single\") {\n      document.getElementById(`${id}`)?.focus();\n    }\n  }, [hover, type, id]);\n\n  const isAllOptionsChecked = useMemo(\n    () => options.every((option) => checked.includes(option.id)),\n    [options, checked]\n  );\n\n  const handleHover = useCallback(() => {\n    if (setHover) {\n      setHover(type === \"single\" ? undefined : id);\n    }\n  }, [setHover, type, id]);\n\n  const allOptionValues = useMemo(\n    () => options.map((option) => option.id),\n    [options]\n  );\n\n  const handleClick = useCallback(\n    (e) => {\n      e.stopPropagation();\n      if (onChange) {\n        if (isAllOptionsChecked) {\n          onChange(\n            checked.filter((i) => allOptionValues.includes(i) === false)\n          );\n        } else {\n          const values = [...checked, ...allOptionValues];\n          const unique = values.filter((item, pos) => {\n            return values.indexOf(item) === pos;\n          });\n          onChange(unique);\n        }\n      }\n    },\n    [allOptionValues, checked, isAllOptionsChecked, onChange]\n  );\n\n  return (\n    <StyledOptionGroupLi\n      key={id}\n      className={classNames(\"c-option-group\", optionGroupClassName)}\n    >\n      <StyledOptionGroup key={id}>\n        <StyledOptionGroupOption\n          onMouseEnter={handleHover}\n          hover={hover === id && type === \"multiple\"}\n        >\n          <StyledOptionGroupHeader>\n            <StyledOptionGroupHeaderName weight=\"bold\">\n              {name}\n            </StyledOptionGroupHeaderName>\n            {type === \"multiple\" && (\n              <Checkbox\n                id={`${id}`}\n                checked={isAllOptionsChecked}\n                onChange={handleClick}\n                type=\"checkbox\"\n              />\n            )}\n          </StyledOptionGroupHeader>\n        </StyledOptionGroupOption>\n        <List>\n          {list.map((item: IOptionItemProps, index) => {\n            return typeof renderOptions === \"function\"\n              ? renderOptions(item, index)\n              : item.name;\n          })}\n        </List>\n      </StyledOptionGroup>\n    </StyledOptionGroupLi>\n  );\n};\n\nOptionGroup.displayName = \"OptionGroup\";\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AACA;AAOA;AAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0B3B,IAAMA,WAEZ,GAAG,SAFSA,WAEZ,OAYK;EAAA,IAXJC,EAAE,QAAFA,EAAE;IACFC,IAAI,QAAJA,IAAI;IACJC,OAAO,QAAPA,OAAO;IACPC,IAAI,QAAJA,IAAI;IACJC,KAAK,QAALA,KAAK;IACLC,MAAM,QAANA,MAAM;IACNC,OAAO,QAAPA,OAAO;IACPC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,aAAa,QAAbA,aAAa;IACbC,oBAAoB,QAApBA,oBAAoB;EAEpB,IAAMC,IAAI,GAAG,IAAAC,cAAO,EAClB;IAAA,OACEP,MAAM,GACFH,OAAO,CAACG,MAAM,CAAC,UAACQ,CAAC;MAAA,OACfA,CAAC,CAACZ,IAAI,CAACa,WAAW,EAAE,CAACC,QAAQ,CAACV,MAAM,CAACW,IAAI,EAAE,CAACF,WAAW,EAAE,CAAC;IAAA,EAC3D,GACDZ,OAAO;EAAA,GACb,CAACG,MAAM,EAAEH,OAAO,CAAC,CAClB;EAED,IAAAe,gBAAS,EAAC,YAAM;IACd,IAAIb,KAAK,KAAKJ,EAAE,IAAIG,IAAI,KAAK,QAAQ,EAAE;MAAA;MACrC,yBAAAe,QAAQ,CAACC,cAAc,WAAInB,EAAE,EAAG,0DAAhC,sBAAkCoB,KAAK,EAAE;IAC3C;EACF,CAAC,EAAE,CAAChB,KAAK,EAAED,IAAI,EAAEH,EAAE,CAAC,CAAC;EAErB,IAAMqB,mBAAmB,GAAG,IAAAT,cAAO,EACjC;IAAA,OAAMV,OAAO,CAACoB,KAAK,CAAC,UAACC,MAAM;MAAA,OAAKjB,OAAO,CAACS,QAAQ,CAACQ,MAAM,CAACvB,EAAE,CAAC;IAAA,EAAC;EAAA,GAC5D,CAACE,OAAO,EAAEI,OAAO,CAAC,CACnB;EAED,IAAMkB,WAAW,GAAG,IAAAC,kBAAW,EAAC,YAAM;IACpC,IAAIjB,QAAQ,EAAE;MACZA,QAAQ,CAACL,IAAI,KAAK,QAAQ,GAAGuB,SAAS,GAAG1B,EAAE,CAAC;IAC9C;EACF,CAAC,EAAE,CAACQ,QAAQ,EAAEL,IAAI,EAAEH,EAAE,CAAC,CAAC;EAExB,IAAM2B,eAAe,GAAG,IAAAf,cAAO,EAC7B;IAAA,OAAMV,OAAO,CAAC0B,GAAG,CAAC,UAACL,MAAM;MAAA,OAAKA,MAAM,CAACvB,EAAE;IAAA,EAAC;EAAA,GACxC,CAACE,OAAO,CAAC,CACV;EAED,IAAM2B,WAAW,GAAG,IAAAJ,kBAAW,EAC7B,UAACK,CAAC,EAAK;IACLA,CAAC,CAACC,eAAe,EAAE;IACnB,IAAIxB,QAAQ,EAAE;MACZ,IAAIc,mBAAmB,EAAE;QACvBd,QAAQ,CACND,OAAO,CAACD,MAAM,CAAC,UAAC2B,CAAC;UAAA,OAAKL,eAAe,CAACZ,QAAQ,CAACiB,CAAC,CAAC,KAAK,KAAK;QAAA,EAAC,CAC7D;MACH,CAAC,MAAM;QACL,IAAMC,MAAM,gCAAO3B,OAAO,sBAAKqB,eAAe,EAAC;QAC/C,IAAMO,MAAM,GAAGD,MAAM,CAAC5B,MAAM,CAAC,UAAC8B,IAAI,EAAEC,GAAG,EAAK;UAC1C,OAAOH,MAAM,CAACI,OAAO,CAACF,IAAI,CAAC,KAAKC,GAAG;QACrC,CAAC,CAAC;QACF7B,QAAQ,CAAC2B,MAAM,CAAC;MAClB;IACF;EACF,CAAC,EACD,CAACP,eAAe,EAAErB,OAAO,EAAEe,mBAAmB,EAAEd,QAAQ,CAAC,CAC1D;EAED,oBACE,6BAAC,2BAAmB;IAClB,GAAG,EAAEP,EAAG;IACR,SAAS,EAAE,IAAAsC,mBAAU,EAAC,gBAAgB,EAAE5B,oBAAoB;EAAE,gBAE9D,6BAAC,yBAAiB;IAAC,GAAG,EAAEV;EAAG,gBACzB,6BAAC,+BAAuB;IACtB,YAAY,EAAEwB,WAAY;IAC1B,KAAK,EAAEpB,KAAK,KAAKJ,EAAE,IAAIG,IAAI,KAAK;EAAW,gBAE3C,6BAAC,+BAAuB,qBACtB,6BAAC,mCAA2B;IAAC,MAAM,EAAC;EAAM,GACvCF,IAAI,CACuB,EAC7BE,IAAI,KAAK,UAAU,iBAClB,6BAAC,kBAAQ;IACP,EAAE,YAAKH,EAAE,CAAG;IACZ,OAAO,EAAEqB,mBAAoB;IAC7B,QAAQ,EAAEQ,WAAY;IACtB,IAAI,EAAC;EAAU,EAElB,CACuB,CACF,eAC1B,6BAAC,UAAI,QACFlB,IAAI,CAACiB,GAAG,CAAC,UAACO,IAAsB,EAAEI,KAAK,EAAK;IAC3C,OAAO,OAAO9B,aAAa,KAAK,UAAU,GACtCA,aAAa,CAAC0B,IAAI,EAAEI,KAAK,CAAC,GAC1BJ,IAAI,CAAClC,IAAI;EACf,CAAC,CAAC,CACG,CACW,CACA;AAE1B,CAAC;AAAC;AAEFF,WAAW,CAACyC,WAAW,GAAG,aAAa"}

package/dist/cjs/components/Select/OptionGroup/Styles.js

@@ -4,10 +4,11 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledOptionGroupOption = exports.StyledOptionGroupLi = exports.StyledOptionGroupHeader = exports.StyledOptionGroup = void 0;
+exports.StyledOptionGroupOption = exports.StyledOptionGroupLi = exports.StyledOptionGroupHeaderName = exports.StyledOptionGroupHeader = exports.StyledOptionGroup = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _BoxSizingStyle = require("../../BoxSizingStyle");
 var _FontStyle = require("../../FontStyle");
+var _Typography = require("../../Typography");
 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; }
 var StyledOptionGroupLi = _styledComponents.default.li.withConfig({
@@ -23,15 +24,21 @@ var StyledOptionGroup = _styledComponents.default.div.withConfig({
 }, _FontStyle.FontStyle, _BoxSizingStyle.BoxSizingStyle);
 exports.StyledOptionGroup = StyledOptionGroup;
 StyledOptionGroup.displayName = "StyledOptionGroup";
-var StyledOptionGroupHeader = _styledComponents.default.h3.withConfig({
+var StyledOptionGroupHeader = _styledComponents.default.div.withConfig({
   displayName: "Styles__StyledOptionGroupHeader",
   componentId: "sc-16v5afu-2"
-})(["height:28px;display:flex;justify-content:space-between;align-items:center;padding:0 16px;color:var(--color-theme-900);margin:6px 0;*{margin:auto 0;}"]);
+})(["height:28px;display:flex;justify-content:space-between;align-items:center;padding:0 16px;margin:6px 0;*{margin:auto 0;}"]);
 exports.StyledOptionGroupHeader = StyledOptionGroupHeader;
 StyledOptionGroupHeader.displayName = "StyledOptionGroupHeader";
+var StyledOptionGroupHeaderName = (0, _styledComponents.default)(_Typography.Body2).withConfig({
+  displayName: "Styles__StyledOptionGroupHeaderName",
+  componentId: "sc-16v5afu-3"
+})(["padding-right:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"]);
+exports.StyledOptionGroupHeaderName = StyledOptionGroupHeaderName;
+StyledOptionGroupHeaderName.displayName = "StyledOptionGroupHeaderName";
 var StyledOptionGroupOption = _styledComponents.default.div.withConfig({
   displayName: "Styles__StyledOptionGroupOption",
-  componentId: "sc-16v5afu-3"
+  componentId: "sc-16v5afu-4"
 })(["", ""], function (props) {
   return props.hover && (0, _styledComponents.css)(["background-color:var(--color-theme-200);"]);
 });

package/dist/cjs/components/Select/OptionGroup/Styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["StyledOptionGroupLi","styled","li","StyledOptionGroup","div","FontStyle","BoxSizingStyle","displayName","StyledOptionGroupHeader","h3","StyledOptionGroupOption","props","hover","css"],"sources":["../../../../../src/components/Select/OptionGroup/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { BoxSizingStyle } from \"../../BoxSizingStyle\";\nimport { FontStyle } from \"../../FontStyle\";\n\nexport const StyledOptionGroupLi = styled.li`\n  flex-direction: column;\n`;\nexport const StyledOptionGroup = styled.div`\n  ${tw`tw-select-none`}\n  ${FontStyle}\n  ${BoxSizingStyle}\n`;\n\nStyledOptionGroup.displayName = \"StyledOptionGroup\";\n\nexport const StyledOptionGroupHeader = styled.h3`\n  height: 28px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0 16px;\n  color: var(--color-theme-900);\n  margin: 6px 0;\n  * {\n    margin: auto 0;\n  }\n`;\n\nStyledOptionGroupHeader.displayName = \"StyledOptionGroupHeader\";\n\nexport const StyledOptionGroupOption = styled.div<{ hover?: boolean }>`\n  ${(props) =>\n    props.hover &&\n    css`\n      background-color: var(--color-theme-200);\n    `}\n`;\n\nStyledOptionGroupOption.displayName = \"StyledOptionGroupOption\";\n"],"mappings":";;;;;;;AAAA;AAEA;AACA;AAA4C;AAAA;AAErC,IAAMA,mBAAmB,GAAGC,yBAAM,CAACC,EAAE;EAAA;EAAA;AAAA,8BAE3C;AAAC;AACK,IAAMC,iBAAiB,GAAGF,yBAAM,CAACG,GAAG;EAAA;EAAA;AAAA,uBACrC;EAAA;AAAe,CAAC,EAClBC,oBAAS,EACTC,8BAAc,CACjB;AAAC;AAEFH,iBAAiB,CAACI,WAAW,GAAG,mBAAmB;AAE5C,IAAMC,uBAAuB,GAAGP,yBAAM,CAACQ,EAAE;EAAA;EAAA;AAAA,4JAW/C;AAAC;AAEFD,uBAAuB,CAACD,WAAW,GAAG,yBAAyB;AAExD,IAAMG,uBAAuB,GAAGT,yBAAM,CAACG,GAAG;EAAA;EAAA;AAAA,aAC7C,UAACO,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,QACXC,qBAAG,+CAEF;AAAA,EACJ;AAAC;AAEFH,uBAAuB,CAACH,WAAW,GAAG,yBAAyB"}
+{"version":3,"file":"Styles.js","names":["StyledOptionGroupLi","styled","li","StyledOptionGroup","div","FontStyle","BoxSizingStyle","displayName","StyledOptionGroupHeader","StyledOptionGroupHeaderName","Body2","StyledOptionGroupOption","props","hover","css"],"sources":["../../../../../src/components/Select/OptionGroup/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { BoxSizingStyle } from \"../../BoxSizingStyle\";\nimport { FontStyle } from \"../../FontStyle\";\nimport { Body2 } from \"../../Typography\";\n\nexport const StyledOptionGroupLi = styled.li`\n  flex-direction: column;\n`;\nexport const StyledOptionGroup = styled.div`\n  ${tw`tw-select-none`}\n  ${FontStyle}\n  ${BoxSizingStyle}\n`;\n\nStyledOptionGroup.displayName = \"StyledOptionGroup\";\n\nexport const StyledOptionGroupHeader = styled.div`\n  height: 28px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0 16px;\n  margin: 6px 0;\n  * {\n    margin: auto 0;\n  }\n`;\n\nStyledOptionGroupHeader.displayName = \"StyledOptionGroupHeader\";\n\nexport const StyledOptionGroupHeaderName = styled(Body2)`\n  padding-right: 10px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n`;\n\nStyledOptionGroupHeaderName.displayName = \"StyledOptionGroupHeaderName\";\n\nexport const StyledOptionGroupOption = styled.div<{ hover?: boolean }>`\n  ${(props) =>\n    props.hover &&\n    css`\n      background-color: var(--color-theme-200);\n    `}\n`;\n\nStyledOptionGroupOption.displayName = \"StyledOptionGroupOption\";\n"],"mappings":";;;;;;;AAAA;AAEA;AACA;AACA;AAAyC;AAAA;AAElC,IAAMA,mBAAmB,GAAGC,yBAAM,CAACC,EAAE;EAAA;EAAA;AAAA,8BAE3C;AAAC;AACK,IAAMC,iBAAiB,GAAGF,yBAAM,CAACG,GAAG;EAAA;EAAA;AAAA,uBACrC;EAAA;AAAe,CAAC,EAClBC,oBAAS,EACTC,8BAAc,CACjB;AAAC;AAEFH,iBAAiB,CAACI,WAAW,GAAG,mBAAmB;AAE5C,IAAMC,uBAAuB,GAAGP,yBAAM,CAACG,GAAG;EAAA;EAAA;AAAA,+HAUhD;AAAC;AAEFI,uBAAuB,CAACD,WAAW,GAAG,yBAAyB;AAExD,IAAME,2BAA2B,GAAG,IAAAR,yBAAM,EAACS,iBAAK,CAAC;EAAA;EAAA;AAAA,qFAKvD;AAAC;AAEFD,2BAA2B,CAACF,WAAW,GAAG,6BAA6B;AAEhE,IAAMI,uBAAuB,GAAGV,yBAAM,CAACG,GAAG;EAAA;EAAA;AAAA,aAC7C,UAACQ,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,QACXC,qBAAG,+CAEF;AAAA,EACJ;AAAC;AAEFH,uBAAuB,CAACJ,WAAW,GAAG,yBAAyB"}

package/dist/esm/components/AvatarGroup/AvatarGroup.d.ts

@@ -1,10 +1,10 @@
-import { HTMLAttributes, PropsWithChildren } from "react";
+import React from "react";
 export interface AvatarGroupsProps {
     limit: number;
     size?: number;
-    counterProps?: HTMLAttributes<HTMLDivElement> & {
-        [dataAttibute: `data-${string}`]: string;
-    };
+    hasTooltip?: boolean;
 }
-export declare const AvatarGroup: ({ limit, size, children, counterProps, }: PropsWithChildren<AvatarGroupsProps>) => JSX.Element;
+export declare const AvatarGroup: React.ForwardRefExoticComponent<AvatarGroupsProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=AvatarGroup.d.ts.map

package/dist/esm/components/AvatarGroup/AvatarGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/AvatarGroup/AvatarGroup.tsx"],"names":[],"mappings":"AAAA,OAAc,EAGZ,cAAc,EACd,iBAAiB,EAGlB,MAAM,OAAO,CAAC;AAKf,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG;QAC9C,CAAC,YAAY,EAAE,QAAQ,MAAM,EAAE,GAAG,MAAM,CAAC;KAC1C,CAAC;CACH;AAED,eAAO,MAAM,WAAW,6CAKrB,kBAAkB,iBAAiB,CAAC,gBA0CtC,CAAC"}
+{"version":3,"file":"AvatarGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/AvatarGroup/AvatarGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAMf,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,WAAW;;wCAgHtB,CAAC"}

package/dist/esm/components/AvatarGroup/AvatarGroup.js

@@ -1,43 +1,118 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _styled3 from "styled-components";
+import _styled2 from "styled-components";
 import _styled from "styled-components";
-import React, { Children, cloneElement, useMemo } from "react";
+import React, { Children, cloneElement, useMemo, forwardRef } from "react";
+import { Tooltip } from "../Tooltip";
 import { Typography } from "../Typography/Typography";
 import { AvatarGroupsStyles, LengthCountStyles } from "./Styles";
-export var AvatarGroup = function AvatarGroup(_ref) {
+export var AvatarGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _Children$toArray;
   var limit = _ref.limit,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 34 : _ref$size,
     children = _ref.children,
-    counterProps = _ref.counterProps;
-  // always display counter with min +2 as +1 can require 1 more Avatar
+    _ref$hasTooltip = _ref.hasTooltip,
+    hasTooltip = _ref$hasTooltip === void 0 ? false : _ref$hasTooltip;
+  // always display counter with min +2 as +1 can takes space of an 1 more Avatar
   var minChildren = Children.count(children) - limit > 1 ? false : true;
+  // gap between Avatars
+  var gap = 8;
   var _children = minChildren ? Children.toArray(children) : Children.toArray(children).slice(0, limit);
   var handleVariant = useMemo(function () {
     if (size >= 34) return "Caption 1";
     return "Caption 2";
   }, [size]);
-  return /*#__PURE__*/React.createElement(AvatarGroupsStyles, null, _children.map(function (child) {
-    var item = child;
+
+  // get all names indexed above limit number from alt tag on Avatar for counter tooltip
+  var nameArr = (_Children$toArray = Children.toArray(children)) == null ? void 0 : _Children$toArray.slice(limit).map(function (item) {
+    var _ref2 = item,
+      props = _ref2.props;
+    return props.alt;
+  });
+
+  // render React Element with tooltip or without
+  var renderAvatars = function renderAvatars(item) {
+    var tooltipText = item.props.alt;
+    var alt = "Image of " + tooltipText;
+    if (hasTooltip) {
+      return /*#__PURE__*/React.createElement(Tooltip, {
+        title: tooltipText
+      }, /*#__PURE__*/cloneElement(item, _extends({}, item.props, {
+        size: size,
+        alt: alt,
+        style: {
+          marginLeft: "-" + gap + "px",
+          outline: "1px solid var(--page-paper-main)"
+        }
+      })));
+    }
     return /*#__PURE__*/cloneElement(item, _extends({}, item.props, {
       size: size,
+      alt: alt,
       style: {
-        marginInlineStart: "-8px",
+        marginLeft: "-" + gap + "px",
         outline: "1px solid var(--page-paper-main)"
       }
     }));
-  }), limit >= Children.count(children) || minChildren ? null : /*#__PURE__*/React.createElement(_StyledLengthCountStyles, _extends({
-    size: size,
-    role: "status",
-    "aria-label": "Rest of the users"
-  }, counterProps), /*#__PURE__*/React.createElement(Typography, {
-    variant: handleVariant,
-    weight: "medium"
-  }, "+", Children.count(children) - limit)));
-};
-var _StyledLengthCountStyles = _styled(LengthCountStyles).withConfig({
-  displayName: "AvatarGroup___StyledLengthCountStyles",
+  };
+
+  // render Tooltip if hasTooltip is true
+  var renderCounter = function renderCounter() {
+    if (hasTooltip) {
+      return /*#__PURE__*/React.createElement(_StyledTooltip, {
+        title: nameArr.join("\n")
+      }, /*#__PURE__*/React.createElement(_StyledLengthCountStyles, {
+        size: size,
+        role: "status",
+        "aria-label": "Rest of the users",
+        $_css: "-" + gap + "px"
+      }, /*#__PURE__*/React.createElement(Typography, {
+        variant: handleVariant,
+        weight: "medium"
+      }, "+", Children.count(children) - limit)));
+    }
+    return /*#__PURE__*/React.createElement(_StyledLengthCountStyles2, {
+      size: size,
+      role: "status",
+      "aria-label": "Rest of the users",
+      $_css2: "-" + gap + "px"
+    }, /*#__PURE__*/React.createElement(Typography, {
+      variant: handleVariant,
+      weight: "medium"
+    }, "+", Children.count(children) - limit));
+  };
+  return /*#__PURE__*/React.createElement(AvatarGroupsStyles, {
+    hasTooltip: hasTooltip,
+    gap: gap,
+    ref: ref
+  }, _children.map(function (child) {
+    var item = child;
+    return renderAvatars(item);
+  }), limit >= Children.count(children) || minChildren ? null : renderCounter());
+});
+AvatarGroup.displayName = "AvatarGroup";
+var _StyledTooltip = _styled(Tooltip).withConfig({
+  displayName: "AvatarGroup___StyledTooltip",
   componentId: "sc-1rsx1j5-0"
 })({
-  marginInlineStart: "-8px"
+  whiteSpace: "break-spaces",
+  lineHeight: "18px"
+});
+var _StyledLengthCountStyles = _styled(LengthCountStyles).withConfig({
+  displayName: "AvatarGroup___StyledLengthCountStyles",
+  componentId: "sc-1rsx1j5-1"
+})(function (p) {
+  return {
+    marginLeft: p.$_css
+  };
+});
+var _StyledLengthCountStyles2 = _styled(LengthCountStyles).withConfig({
+  displayName: "AvatarGroup___StyledLengthCountStyles2",
+  componentId: "sc-1rsx1j5-2"
+})(function (p) {
+  return {
+    marginLeft: p.$_css2
+  };
 });
 //# sourceMappingURL=AvatarGroup.js.map

package/dist/esm/components/AvatarGroup/AvatarGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.js","names":["React","Children","cloneElement","useMemo","Typography","AvatarGroupsStyles","LengthCountStyles","AvatarGroup","limit","size","children","counterProps","minChildren","count","_children","toArray","slice","handleVariant","map","child","item","props","style","marginInlineStart","outline"],"sources":["../../../../src/components/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import React, {\n  Children,\n  cloneElement,\n  HTMLAttributes,\n  PropsWithChildren,\n  ReactElement,\n  useMemo,\n} from \"react\";\nimport { AvatarProps } from \"../Avatar/Avatar\";\nimport { Typography } from \"../Typography/Typography\";\nimport { AvatarGroupsStyles, LengthCountStyles } from \"./Styles\";\n\nexport interface AvatarGroupsProps {\n  limit: number;\n  size?: number;\n  counterProps?: HTMLAttributes<HTMLDivElement> & {\n    [dataAttibute: `data-${string}`]: string;\n  };\n}\n\nexport const AvatarGroup = ({\n  limit,\n  size = 34,\n  children,\n  counterProps,\n}: PropsWithChildren<AvatarGroupsProps>) => {\n  // always display counter with min +2 as +1 can require 1 more Avatar\n  const minChildren = Children.count(children) - limit > 1 ? false : true;\n  const _children = minChildren\n    ? Children.toArray(children)\n    : Children.toArray(children).slice(0, limit);\n\n  const handleVariant = useMemo(() => {\n    if (size >= 34) return \"Caption 1\";\n    return \"Caption 2\";\n  }, [size]);\n\n  return (\n    <AvatarGroupsStyles>\n      {_children.map((child) => {\n        const item = child as ReactElement<AvatarProps>;\n\n        return cloneElement(item, {\n          ...item.props,\n          size: size,\n          style: {\n            marginInlineStart: \"-8px\",\n            outline: \"1px solid var(--page-paper-main)\",\n          },\n        });\n      })}\n\n      {limit >= Children.count(children) || minChildren ? null : (\n        <LengthCountStyles\n          size={size}\n          role=\"status\"\n          aria-label=\"Rest of the users\"\n          css={{ marginInlineStart: \"-8px\" }}\n          {...counterProps}\n        >\n          <Typography variant={handleVariant} weight=\"medium\">\n            +{Children.count(children) - limit}\n          </Typography>\n        </LengthCountStyles>\n      )}\n    </AvatarGroupsStyles>\n  );\n};\n"],"mappings":";;AAAA,OAAOA,KAAK,IACVC,QAAQ,EACRC,YAAY,EAIZC,OAAO,QACF,OAAO;AAEd,SAASC,UAAU,QAAQ,0BAA0B;AACrD,SAASC,kBAAkB,EAAEC,iBAAiB,QAAQ,UAAU;AAUhE,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAW,OAKoB;EAAA,IAJ1CC,KAAK,QAALA,KAAK;IAAA,iBACLC,IAAI;IAAJA,IAAI,0BAAG,EAAE;IACTC,QAAQ,QAARA,QAAQ;IACRC,YAAY,QAAZA,YAAY;EAEZ;EACA,IAAMC,WAAW,GAAGX,QAAQ,CAACY,KAAK,CAACH,QAAQ,CAAC,GAAGF,KAAK,GAAG,CAAC,GAAG,KAAK,GAAG,IAAI;EACvE,IAAMM,SAAS,GAAGF,WAAW,GACzBX,QAAQ,CAACc,OAAO,CAACL,QAAQ,CAAC,GAC1BT,QAAQ,CAACc,OAAO,CAACL,QAAQ,CAAC,CAACM,KAAK,CAAC,CAAC,EAAER,KAAK,CAAC;EAE9C,IAAMS,aAAa,GAAGd,OAAO,CAAC,YAAM;IAClC,IAAIM,IAAI,IAAI,EAAE,EAAE,OAAO,WAAW;IAClC,OAAO,WAAW;EACpB,CAAC,EAAE,CAACA,IAAI,CAAC,CAAC;EAEV,oBACE,oBAAC,kBAAkB,QAChBK,SAAS,CAACI,GAAG,CAAC,UAACC,KAAK,EAAK;IACxB,IAAMC,IAAI,GAAGD,KAAkC;IAE/C,oBAAOjB,YAAY,CAACkB,IAAI,eACnBA,IAAI,CAACC,KAAK;MACbZ,IAAI,EAAEA,IAAI;MACVa,KAAK,EAAE;QACLC,iBAAiB,EAAE,MAAM;QACzBC,OAAO,EAAE;MACX;IAAC,GACD;EACJ,CAAC,CAAC,EAEDhB,KAAK,IAAIP,QAAQ,CAACY,KAAK,CAACH,QAAQ,CAAC,IAAIE,WAAW,GAAG,IAAI,gBACtD;IACE,IAAI,EAAEH,IAAK;IACX,IAAI,EAAC,QAAQ;IACb,cAAW;EAAmB,GAE1BE,YAAY,gBAEhB,oBAAC,UAAU;IAAC,OAAO,EAAEM,aAAc;IAAC,MAAM,EAAC;EAAQ,QAC/ChB,QAAQ,CAACY,KAAK,CAACH,QAAQ,CAAC,GAAGF,KAAK,CACvB,CAEhB,CACkB;AAEzB,CAAC;AAAC;EAAA;EAAA;AAAA,GAVa;EAAEe,iBAAiB,EAAE;AAAO,CAAC"}
+{"version":3,"file":"AvatarGroup.js","names":["React","Children","cloneElement","useMemo","forwardRef","Tooltip","Typography","AvatarGroupsStyles","LengthCountStyles","AvatarGroup","ref","limit","size","children","hasTooltip","minChildren","count","gap","_children","toArray","slice","handleVariant","nameArr","map","item","props","alt","renderAvatars","tooltipText","style","marginLeft","outline","renderCounter","join","child","displayName","whiteSpace","lineHeight"],"sources":["../../../../src/components/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import React, {\n  Children,\n  cloneElement,\n  PropsWithChildren,\n  ReactElement,\n  useMemo,\n  forwardRef,\n} from \"react\";\nimport { AvatarProps } from \"../Avatar/Avatar\";\nimport { Tooltip } from \"../Tooltip\";\nimport { Typography } from \"../Typography/Typography\";\nimport { AvatarGroupsStyles, LengthCountStyles } from \"./Styles\";\n\nexport interface AvatarGroupsProps {\n  limit: number;\n  size?: number;\n  hasTooltip?: boolean;\n}\n\nexport const AvatarGroup = forwardRef<\n  HTMLDivElement,\n  PropsWithChildren<AvatarGroupsProps>\n>(({ limit, size = 34, children, hasTooltip = false }, ref) => {\n  // always display counter with min +2 as +1 can takes space of an 1 more Avatar\n  const minChildren = Children.count(children) - limit > 1 ? false : true;\n  // gap between Avatars\n  const gap = 8;\n\n  const _children = minChildren\n    ? Children.toArray(children)\n    : Children.toArray(children).slice(0, limit);\n\n  const handleVariant = useMemo(() => {\n    if (size >= 34) return \"Caption 1\";\n    return \"Caption 2\";\n  }, [size]);\n\n  // get all names indexed above limit number from alt tag on Avatar for counter tooltip\n  const nameArr = Children.toArray(children)\n    ?.slice(limit)\n    .map((item) => {\n      const { props } = item as ReactElement;\n      return props.alt;\n    });\n\n  // render React Element with tooltip or without\n  const renderAvatars = (item: ReactElement) => {\n    const tooltipText = item.props.alt;\n    const alt = `Image of ${tooltipText}`;\n\n    if (hasTooltip) {\n      return (\n        <Tooltip title={tooltipText}>\n          {cloneElement(item, {\n            ...item.props,\n            size: size,\n            alt: alt,\n            style: {\n              marginLeft: `-${gap}px`,\n              outline: \"1px solid var(--page-paper-main)\",\n            },\n          })}\n        </Tooltip>\n      );\n    }\n    return cloneElement(item, {\n      ...item.props,\n      size: size,\n      alt: alt,\n      style: {\n        marginLeft: `-${gap}px`,\n        outline: \"1px solid var(--page-paper-main)\",\n      },\n    });\n  };\n\n  // render Tooltip if hasTooltip is true\n  const renderCounter = () => {\n    if (hasTooltip) {\n      return (\n        <Tooltip\n          title={nameArr.join(\"\\n\")}\n          css={{\n            whiteSpace: \"break-spaces\",\n            lineHeight: \"18px\",\n          }}\n        >\n          <LengthCountStyles\n            size={size}\n            role=\"status\"\n            aria-label=\"Rest of the users\"\n            css={{\n              marginLeft: `-${gap}px`,\n            }}\n          >\n            <Typography variant={handleVariant} weight=\"medium\">\n              +{Children.count(children) - limit}\n            </Typography>\n          </LengthCountStyles>\n        </Tooltip>\n      );\n    }\n    return (\n      <LengthCountStyles\n        size={size}\n        role=\"status\"\n        aria-label=\"Rest of the users\"\n        css={{\n          marginLeft: `-${gap}px`,\n        }}\n      >\n        <Typography variant={handleVariant} weight=\"medium\">\n          +{Children.count(children) - limit}\n        </Typography>\n      </LengthCountStyles>\n    );\n  };\n\n  return (\n    <AvatarGroupsStyles hasTooltip={hasTooltip} gap={gap} ref={ref}>\n      {_children.map((child) => {\n        const item = child as ReactElement<AvatarProps>;\n\n        return renderAvatars(item);\n      })}\n\n      {limit >= Children.count(children) || minChildren\n        ? null\n        : renderCounter()}\n    </AvatarGroupsStyles>\n  );\n});\n\nAvatarGroup.displayName = \"AvatarGroup\";\n"],"mappings":"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"}

package/dist/esm/components/AvatarGroup/Styles.d.ts

@@ -1,4 +1,7 @@
-export declare const AvatarGroupsStyles: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const AvatarGroupsStyles: import("styled-components").StyledComponent<"div", any, {
+    hasTooltip: boolean;
+    gap: number;
+}, never>;
 interface LengthCountStylesProps {
     size: number;
 }

package/dist/esm/components/AvatarGroup/Styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/AvatarGroup/Styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,kBAAkB,oEAK9B,CAAC;AAEF,UAAU,sBAAsB;IAC9B,IAAI,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,iBAAiB,wFAU7B,CAAC"}
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/AvatarGroup/Styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,kBAAkB;gBACjB,OAAO;SACd,MAAM;SA6BZ,CAAC;AAEF,UAAU,sBAAsB;IAC9B,IAAI,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,iBAAiB,wFAU7B,CAAC"}

package/dist/esm/components/AvatarGroup/Styles.js

@@ -3,7 +3,15 @@ import { FontStyle } from "../FontStyle";
 export var AvatarGroupsStyles = styled.div.withConfig({
   displayName: "Styles__AvatarGroupsStyles",
   componentId: "sc-1padv46-0"
-})(["display:flex;cursor:pointer;width:fit-content;", ""], FontStyle);
+})(["", " align-items:center;cursor:pointer;display:flex;justify-content:center;position:relative;user-select:none;width:fit-content;&::before{border-radius:5px;background-color:", ";content:\"\";height:100%;margin-left:", "px;opacity:0;padding:5px 0;position:absolute;transition:opacity 0.2s ease-in-out;width:", ";}&:hover::before{opacity:1;}"], FontStyle, function (props) {
+  return !props.hasTooltip && "var(--color-theme-300)";
+}, function (_ref) {
+  var gap = _ref.gap;
+  return -gap;
+}, function (_ref2) {
+  var gap = _ref2.gap;
+  return "calc(100% + " + gap * 2 + "px + 5px)";
+});
 export var LengthCountStyles = styled.div.withConfig({
   displayName: "Styles__LengthCountStyles",
   componentId: "sc-1padv46-1"

package/dist/esm/components/AvatarGroup/Styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["styled","FontStyle","AvatarGroupsStyles","div","LengthCountStyles","props","size"],"sources":["../../../../src/components/AvatarGroup/Styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const AvatarGroupsStyles = styled.div`\n  display: flex;\n  cursor: pointer;\n  width: fit-content;\n  ${FontStyle}\n`;\n\ninterface LengthCountStylesProps {\n  size: number;\n}\n\nexport const LengthCountStyles = styled.div<LengthCountStylesProps>`\n  align-items: center;\n  background-color: var(--color-theme-400);\n  block-size: ${(props) => props.size + \"px\"};\n  border-radius: var(--ac-br-rounded);\n  display: flex;\n  inline-size: ${(props) => props.size + \"px\"};\n  justify-content: center;\n  outline: 1px solid var(--page-paper-main);\n  z-index: 99;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,SAAS,QAAQ,cAAc;AAExC,OAAO,IAAMC,kBAAkB,GAAGF,MAAM,CAACG,GAAG;EAAA;EAAA;AAAA,2DAIxCF,SAAS,CACZ;AAMD,OAAO,IAAMG,iBAAiB,GAAGJ,MAAM,CAACG,GAAG;EAAA;EAAA;AAAA,gOAG3B,UAACE,KAAK;EAAA,OAAKA,KAAK,CAACC,IAAI,GAAG,IAAI;AAAA,GAG3B,UAACD,KAAK;EAAA,OAAKA,KAAK,CAACC,IAAI,GAAG,IAAI;AAAA,EAI5C"}
+{"version":3,"file":"Styles.js","names":["styled","FontStyle","AvatarGroupsStyles","div","props","hasTooltip","gap","LengthCountStyles","size"],"sources":["../../../../src/components/AvatarGroup/Styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const AvatarGroupsStyles = styled.div<{\n  hasTooltip: boolean;\n  gap: number;\n}>`\n  ${FontStyle}\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  position: relative;\n  user-select: none;\n  width: fit-content;\n\n  &::before {\n    border-radius: 5px;\n    background-color: ${(props) =>\n      !props.hasTooltip && \"var(--color-theme-300)\"};\n    content: \"\";\n    height: 100%;\n    margin-left: ${({ gap }) => -gap}px;\n    opacity: 0;\n    padding: 5px 0;\n    position: absolute;\n    transition: opacity 0.2s ease-in-out;\n    // 5px represents padding px\n    width: ${({ gap }) => `calc(100% + ${gap * 2}px + 5px)`};\n  }\n\n  &:hover::before {\n    opacity: 1;\n  }\n`;\n\ninterface LengthCountStylesProps {\n  size: number;\n}\n\nexport const LengthCountStyles = styled.div<LengthCountStylesProps>`\n  align-items: center;\n  background-color: var(--color-theme-400);\n  block-size: ${(props) => props.size + \"px\"};\n  border-radius: var(--ac-br-rounded);\n  display: flex;\n  inline-size: ${(props) => props.size + \"px\"};\n  justify-content: center;\n  outline: 1px solid var(--page-paper-main);\n  z-index: 99;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,SAAS,QAAQ,cAAc;AAExC,OAAO,IAAMC,kBAAkB,GAAGF,MAAM,CAACG,GAAG;EAAA;EAAA;AAAA,4VAIxCF,SAAS,EAWW,UAACG,KAAK;EAAA,OACxB,CAACA,KAAK,CAACC,UAAU,IAAI,wBAAwB;AAAA,GAGhC;EAAA,IAAGC,GAAG,QAAHA,GAAG;EAAA,OAAO,CAACA,GAAG;AAAA,GAMvB;EAAA,IAAGA,GAAG,SAAHA,GAAG;EAAA,wBAAsBA,GAAG,GAAG,CAAC;AAAA,CAAW,CAM1D;AAMD,OAAO,IAAMC,iBAAiB,GAAGP,MAAM,CAACG,GAAG;EAAA;EAAA;AAAA,gOAG3B,UAACC,KAAK;EAAA,OAAKA,KAAK,CAACI,IAAI,GAAG,IAAI;AAAA,GAG3B,UAACJ,KAAK;EAAA,OAAKA,KAAK,CAACI,IAAI,GAAG,IAAI;AAAA,EAI5C"}

package/dist/esm/components/Select/OptionGroup/OptionGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OptionGroup.d.ts","sourceRoot":"","sources":["../../../../../src/components/Select/OptionGroup/OptionGroup.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAmC,EAAE,EAAE,MAAM,OAAO,CAAC;AAEnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAUpD,MAAM,WAAW,iBAAkB,SAAQ,gBAAgB;IACzD,yBAAyB;IACzB,OAAO,EAAE,gBAAgB,EAAE,CAAC;CAC7B;AAED,UAAU,2BAA2B;IACnC,sCAAsC;IACtC,IAAI,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAC7B,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC/B,wBAAwB;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qBAAqB;IACrB,OAAO,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IAC7B,wBAAwB;IACxB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC;IAC5C,mCAAmC;IACnC,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IACpD,sBAAsB;IACtB,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChE,uCAAuC;IACvC,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,eAAO,MAAM,WAAW,EAAE,EAAE,CAC1B,iBAAiB,GAAG,2BAA2B,CAkGhD,CAAC"}
+{"version":3,"file":"OptionGroup.d.ts","sourceRoot":"","sources":["../../../../../src/components/Select/OptionGroup/OptionGroup.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAmC,EAAE,EAAE,MAAM,OAAO,CAAC;AAEnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAWpD,MAAM,WAAW,iBAAkB,SAAQ,gBAAgB;IACzD,yBAAyB;IACzB,OAAO,EAAE,gBAAgB,EAAE,CAAC;CAC7B;AAED,UAAU,2BAA2B;IACnC,sCAAsC;IACtC,IAAI,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAC7B,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC/B,wBAAwB;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qBAAqB;IACrB,OAAO,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IAC7B,wBAAwB;IACxB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC;IAC5C,mCAAmC;IACnC,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IACpD,sBAAsB;IACtB,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChE,uCAAuC;IACvC,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,eAAO,MAAM,WAAW,EAAE,EAAE,CAC1B,iBAAiB,GAAG,2BAA2B,CAoGhD,CAAC"}

package/dist/esm/components/Select/OptionGroup/OptionGroup.js

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useMemo } from "react";
 import classNames from "classnames";
 import { Checkbox } from "../../Checkbox/Checkbox";
-import { StyledOptionGroup, StyledOptionGroupHeader, StyledOptionGroupOption, StyledOptionGroupLi } from "./Styles";
+import { StyledOptionGroup, StyledOptionGroupHeader, StyledOptionGroupOption, StyledOptionGroupLi, StyledOptionGroupHeaderName } from "./Styles";
 import { List } from "../../List";
 export var OptionGroup = function OptionGroup(_ref) {
   var id = _ref.id,
@@ -65,7 +65,9 @@ export var OptionGroup = function OptionGroup(_ref) {
   }, /*#__PURE__*/React.createElement(StyledOptionGroupOption, {
     onMouseEnter: handleHover,
     hover: hover === id && type === "multiple"
-  }, /*#__PURE__*/React.createElement(StyledOptionGroupHeader, null, name, type === "multiple" && /*#__PURE__*/React.createElement(Checkbox, {
+  }, /*#__PURE__*/React.createElement(StyledOptionGroupHeader, null, /*#__PURE__*/React.createElement(StyledOptionGroupHeaderName, {
+    weight: "bold"
+  }, name), type === "multiple" && /*#__PURE__*/React.createElement(Checkbox, {
     id: "" + id,
     checked: isAllOptionsChecked,
     onChange: handleClick,