@activecollab/components 1.0.296 → 1.0.297

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":"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"}

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/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,

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

@@ -1 +1 @@
-{"version":3,"file":"OptionGroup.js","names":["React","useCallback","useEffect","useMemo","classNames","Checkbox","StyledOptionGroup","StyledOptionGroupHeader","StyledOptionGroupOption","StyledOptionGroupLi","List","OptionGroup","id","name","options","type","hover","filter","checked","onChange","setHover","renderOptions","optionGroupClassName","list","v","toLowerCase","includes","trim","document","getElementById","focus","isAllOptionsChecked","every","option","handleHover","undefined","allOptionValues","map","handleClick","e","stopPropagation","i","values","unique","item","pos","indexOf","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":["React","useCallback","useEffect","useMemo","classNames","Checkbox","StyledOptionGroup","StyledOptionGroupHeader","StyledOptionGroupOption","StyledOptionGroupLi","StyledOptionGroupHeaderName","List","OptionGroup","id","name","options","type","hover","filter","checked","onChange","setHover","renderOptions","optionGroupClassName","list","v","toLowerCase","includes","trim","document","getElementById","focus","isAllOptionsChecked","every","option","handleHover","undefined","allOptionValues","map","handleClick","e","stopPropagation","i","values","unique","item","pos","indexOf","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":"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"}

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

@@ -1,6 +1,8 @@
+/// <reference types="react" />
 export declare const StyledOptionGroupLi: import("styled-components").StyledComponent<"li", any, {}, never>;
 export declare const StyledOptionGroup: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledOptionGroupHeader: import("styled-components").StyledComponent<"h3", any, {}, never>;
+export declare const StyledOptionGroupHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledOptionGroupHeaderName: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../Typography").IBodyProps & Omit<import("../../Typography/Typography").ITypographyProps, "variant" | "weight"> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
 export declare const StyledOptionGroupOption: import("styled-components").StyledComponent<"div", any, {
     hover?: boolean | undefined;
 }, never>;

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

@@ -1 +1 @@
-{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Select/OptionGroup/Styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,mBAAmB,mEAE/B,CAAC;AACF,eAAO,MAAM,iBAAiB,oEAI7B,CAAC;AAIF,eAAO,MAAM,uBAAuB,mEAWnC,CAAC;AAIF,eAAO,MAAM,uBAAuB;;SAMnC,CAAC"}
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Select/OptionGroup/Styles.ts"],"names":[],"mappings":";AAMA,eAAO,MAAM,mBAAmB,mEAE/B,CAAC;AACF,eAAO,MAAM,iBAAiB,oEAI7B,CAAC;AAIF,eAAO,MAAM,uBAAuB,oEAUnC,CAAC;AAIF,eAAO,MAAM,2BAA2B,oRAKvC,CAAC;AAIF,eAAO,MAAM,uBAAuB;;SAMnC,CAAC"}

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

@@ -1,6 +1,7 @@
 import styled, { css } from "styled-components";
 import { BoxSizingStyle } from "../../BoxSizingStyle";
 import { FontStyle } from "../../FontStyle";
+import { Body2 } from "../../Typography";
 export var StyledOptionGroupLi = styled.li.withConfig({
   displayName: "Styles__StyledOptionGroupLi",
   componentId: "sc-16v5afu-0"
@@ -12,14 +13,19 @@ export var StyledOptionGroup = styled.div.withConfig({
   "userSelect": "none"
 }, FontStyle, BoxSizingStyle);
 StyledOptionGroup.displayName = "StyledOptionGroup";
-export var StyledOptionGroupHeader = styled.h3.withConfig({
+export var StyledOptionGroupHeader = styled.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;}"]);
 StyledOptionGroupHeader.displayName = "StyledOptionGroupHeader";
+export var StyledOptionGroupHeaderName = styled(Body2).withConfig({
+  displayName: "Styles__StyledOptionGroupHeaderName",
+  componentId: "sc-16v5afu-3"
+})(["padding-right:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"]);
+StyledOptionGroupHeaderName.displayName = "StyledOptionGroupHeaderName";
 export var StyledOptionGroupOption = styled.div.withConfig({
   displayName: "Styles__StyledOptionGroupOption",
-  componentId: "sc-16v5afu-3"
+  componentId: "sc-16v5afu-4"
 })(["", ""], function (props) {
   return props.hover && css(["background-color:var(--color-theme-200);"]);
 });

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

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","FontStyle","StyledOptionGroupLi","li","StyledOptionGroup","div","displayName","StyledOptionGroupHeader","h3","StyledOptionGroupOption","props","hover"],"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,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,cAAc,QAAQ,sBAAsB;AACrD,SAASC,SAAS,QAAQ,iBAAiB;AAE3C,OAAO,IAAMC,mBAAmB,GAAGJ,MAAM,CAACK,EAAE;EAAA;EAAA;AAAA,8BAE3C;AACD,OAAO,IAAMC,iBAAiB,GAAGN,MAAM,CAACO,GAAG;EAAA;EAAA;AAAA,uBACrC;EAAA;AAAe,CAAC,EAClBJ,SAAS,EACTD,cAAc,CACjB;AAEDI,iBAAiB,CAACE,WAAW,GAAG,mBAAmB;AAEnD,OAAO,IAAMC,uBAAuB,GAAGT,MAAM,CAACU,EAAE;EAAA;EAAA;AAAA,4JAW/C;AAEDD,uBAAuB,CAACD,WAAW,GAAG,yBAAyB;AAE/D,OAAO,IAAMG,uBAAuB,GAAGX,MAAM,CAACO,GAAG;EAAA;EAAA;AAAA,aAC7C,UAACK,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,IACXZ,GAAG,8CAEF;AAAA,EACJ;AAEDU,uBAAuB,CAACH,WAAW,GAAG,yBAAyB"}
+{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","FontStyle","Body2","StyledOptionGroupLi","li","StyledOptionGroup","div","displayName","StyledOptionGroupHeader","StyledOptionGroupHeaderName","StyledOptionGroupOption","props","hover"],"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,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,cAAc,QAAQ,sBAAsB;AACrD,SAASC,SAAS,QAAQ,iBAAiB;AAC3C,SAASC,KAAK,QAAQ,kBAAkB;AAExC,OAAO,IAAMC,mBAAmB,GAAGL,MAAM,CAACM,EAAE;EAAA;EAAA;AAAA,8BAE3C;AACD,OAAO,IAAMC,iBAAiB,GAAGP,MAAM,CAACQ,GAAG;EAAA;EAAA;AAAA,uBACrC;EAAA;AAAe,CAAC,EAClBL,SAAS,EACTD,cAAc,CACjB;AAEDK,iBAAiB,CAACE,WAAW,GAAG,mBAAmB;AAEnD,OAAO,IAAMC,uBAAuB,GAAGV,MAAM,CAACQ,GAAG;EAAA;EAAA;AAAA,+HAUhD;AAEDE,uBAAuB,CAACD,WAAW,GAAG,yBAAyB;AAE/D,OAAO,IAAME,2BAA2B,GAAGX,MAAM,CAACI,KAAK,CAAC;EAAA;EAAA;AAAA,qFAKvD;AAEDO,2BAA2B,CAACF,WAAW,GAAG,6BAA6B;AAEvE,OAAO,IAAMG,uBAAuB,GAAGZ,MAAM,CAACQ,GAAG;EAAA;EAAA;AAAA,aAC7C,UAACK,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,IACXb,GAAG,8CAEF;AAAA,EACJ;AAEDW,uBAAuB,CAACH,WAAW,GAAG,yBAAyB"}

package/dist/index.js

@@ -9955,14 +9955,19 @@
     "userSelect": "none"
   }, FontStyle, BoxSizingStyle);
   StyledOptionGroup.displayName = "StyledOptionGroup";
-  var StyledOptionGroupHeader = styled__default["default"].h3.withConfig({
+  var StyledOptionGroupHeader = styled__default["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;}"]);
   StyledOptionGroupHeader.displayName = "StyledOptionGroupHeader";
+  var StyledOptionGroupHeaderName = styled__default["default"](Body2).withConfig({
+    displayName: "Styles__StyledOptionGroupHeaderName",
+    componentId: "sc-16v5afu-3"
+  })(["padding-right:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"]);
+  StyledOptionGroupHeaderName.displayName = "StyledOptionGroupHeaderName";
   var StyledOptionGroupOption = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledOptionGroupOption",
-    componentId: "sc-16v5afu-3"
+    componentId: "sc-16v5afu-4"
   })(["", ""], function (props) {
     return props.hover && styled.css(["background-color:var(--color-theme-200);"]);
   });
@@ -10030,7 +10035,9 @@
     }, /*#__PURE__*/React__default["default"].createElement(StyledOptionGroupOption, {
       onMouseEnter: handleHover,
       hover: hover === id && type === "multiple"
-    }, /*#__PURE__*/React__default["default"].createElement(StyledOptionGroupHeader, null, name, type === "multiple" && /*#__PURE__*/React__default["default"].createElement(Checkbox, {
+    }, /*#__PURE__*/React__default["default"].createElement(StyledOptionGroupHeader, null, /*#__PURE__*/React__default["default"].createElement(StyledOptionGroupHeaderName, {
+      weight: "bold"
+    }, name), type === "multiple" && /*#__PURE__*/React__default["default"].createElement(Checkbox, {
       id: "".concat(id),
       checked: isAllOptionsChecked,
       onChange: handleClick,