@activecollab/components 2.0.256 → 2.0.257

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

@@ -36,7 +36,7 @@ var Option = exports.Option = /*#__PURE__*/(0, _react.forwardRef)(function (_ref
     className: (0, _classnames.default)("c-option", className),
     hover: hover,
     onClick: onClick
-  }, renderOption ? renderOption : name);
+  }, /*#__PURE__*/_react.default.createElement(_Styles.StyledOptionContent, null, renderOption ? renderOption : name));
 });
 Option.displayName = "Option";
 //# sourceMappingURL=Option.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Option.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_Styles","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","Option","exports","forwardRef","_ref","ref","id","name","_ref$tooltip","tooltip","hover","className","renderOption","onMouseEnter","_ref$onClick","onClick","handleOnMouseEnter","useCallback","createElement","StyledOption","title","onTouchStart","classnames","displayName"],"sources":["../../../../../src/components/Select/Option/Option.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  MouseEventHandler,\n  ReactNode,\n  Ref,\n  useCallback,\n} from \"react\";\n\nimport classnames from \"classnames\";\n\nimport { StyledOption } from \"./Styles\";\n\nexport interface IOptionItemProps {\n  /** Value of option */\n  id: string | number;\n  /** Label of option */\n  name: string;\n  /** Content for tooltip */\n  tooltip?: string;\n  /** Additional info right-side of name */\n  additionalInfo?: string;\n  /** image url for Avatar or MultiAvatar */\n  image?: string | string[];\n  /** Hex color for label */\n  color?: string;\n  /** Color for chip label */\n  chipColor?: string;\n  /** Value of mixed */\n  mixed?: boolean;\n  /** Hide option */\n  hidden?: boolean;\n}\n\ninterface IAdditionalOptionItemProps {\n  /** Value of option */\n  id?: string | number;\n  /** Label of option */\n  name: string;\n  /** Content for tooltip */\n  tooltip?: string;\n  /** Hovered state */\n  hover?: boolean;\n  /** Class name of option */\n  className?: string;\n  /** Render option function */\n  renderOption?: ReactNode;\n  /** On mouse enter callback */\n  onMouseEnter?: (e: string | number | undefined) => void;\n  /** On mouse click */\n  onClick?: MouseEventHandler<HTMLLIElement>;\n}\n\nexport const Option = forwardRef(\n  (\n    {\n      id,\n      name,\n      tooltip = \"\",\n      hover,\n      className,\n      renderOption,\n      onMouseEnter,\n      onClick = () => null,\n    }: IAdditionalOptionItemProps,\n    ref: Ref<HTMLLIElement>\n  ) => {\n    const handleOnMouseEnter = useCallback(() => {\n      if (onMouseEnter) {\n        onMouseEnter(id);\n      }\n    }, [onMouseEnter, id]);\n\n    return (\n      <StyledOption\n        ref={hover ? ref : null}\n        title={tooltip ? tooltip : name}\n        onMouseEnter={handleOnMouseEnter}\n        onTouchStart={handleOnMouseEnter}\n        className={classnames(\"c-option\", className)}\n        hover={hover}\n        onClick={onClick}\n      >\n        {renderOption ? renderOption : name}\n      </StyledOption>\n    );\n  }\n);\n\nOption.displayName = \"Option\";\n"],"mappings":"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"}
+{"version":3,"file":"Option.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_Styles","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","Option","exports","forwardRef","_ref","ref","id","name","_ref$tooltip","tooltip","hover","className","renderOption","onMouseEnter","_ref$onClick","onClick","handleOnMouseEnter","useCallback","createElement","StyledOption","title","onTouchStart","classnames","StyledOptionContent","displayName"],"sources":["../../../../../src/components/Select/Option/Option.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  MouseEventHandler,\n  ReactNode,\n  Ref,\n  useCallback,\n} from \"react\";\n\nimport classnames from \"classnames\";\n\nimport { StyledOption, StyledOptionContent } from \"./Styles\";\n\nexport interface IOptionItemProps {\n  /** Value of option */\n  id: string | number;\n  /** Label of option */\n  name: string;\n  /** Content for tooltip */\n  tooltip?: string;\n  /** Additional info right-side of name */\n  additionalInfo?: string;\n  /** image url for Avatar or MultiAvatar */\n  image?: string | string[];\n  /** Hex color for label */\n  color?: string;\n  /** Color for chip label */\n  chipColor?: string;\n  /** Value of mixed */\n  mixed?: boolean;\n  /** Hide option */\n  hidden?: boolean;\n}\n\ninterface IAdditionalOptionItemProps {\n  /** Value of option */\n  id?: string | number;\n  /** Label of option */\n  name: string;\n  /** Content for tooltip */\n  tooltip?: string;\n  /** Hovered state */\n  hover?: boolean;\n  /** Class name of option */\n  className?: string;\n  /** Render option function */\n  renderOption?: ReactNode;\n  /** On mouse enter callback */\n  onMouseEnter?: (e: string | number | undefined) => void;\n  /** On mouse click */\n  onClick?: MouseEventHandler<HTMLLIElement>;\n}\n\nexport const Option = forwardRef(\n  (\n    {\n      id,\n      name,\n      tooltip = \"\",\n      hover,\n      className,\n      renderOption,\n      onMouseEnter,\n      onClick = () => null,\n    }: IAdditionalOptionItemProps,\n    ref: Ref<HTMLLIElement>\n  ) => {\n    const handleOnMouseEnter = useCallback(() => {\n      if (onMouseEnter) {\n        onMouseEnter(id);\n      }\n    }, [onMouseEnter, id]);\n\n    return (\n      <StyledOption\n        ref={hover ? ref : null}\n        title={tooltip ? tooltip : name}\n        onMouseEnter={handleOnMouseEnter}\n        onTouchStart={handleOnMouseEnter}\n        className={classnames(\"c-option\", className)}\n        hover={hover}\n        onClick={onClick}\n      >\n        <StyledOptionContent>\n          {renderOption ? renderOption : name}\n        </StyledOptionContent>\n      </StyledOption>\n    );\n  }\n);\n\nOption.displayName = \"Option\";\n"],"mappings":"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"}

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledOption = void 0;
+exports.StyledOptionContent = exports.StyledOption = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _BoxSizingStyle = require("../../BoxSizingStyle");
 var _FontStyle = require("../../FontStyle");
@@ -19,4 +19,9 @@ var StyledOption = exports.StyledOption = _styledComponents.default.li.withConfi
   return props.hover && (0, _styledComponents.css)(["background-color:var(--color-theme-200);"]);
 });
 StyledOption.displayName = "StyledOption";
+var StyledOptionContent = exports.StyledOptionContent = _styledComponents.default.span.withConfig({
+  displayName: "Styles__StyledOptionContent",
+  componentId: "sc-1232l97-1"
+})(["display:flex;align-items:center;width:100%;justify-content:space-between;"]);
+StyledOptionContent.displayName = "StyledOptionContent";
 //# sourceMappingURL=Styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["_styledComponents","_interopRequireWildcard","require","_BoxSizingStyle","_FontStyle","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledOption","exports","styled","li","withConfig","displayName","componentId","FontStyle","BoxSizingStyle","props","hover","css"],"sources":["../../../../../src/components/Select/Option/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { BoxSizingStyle } from \"../../BoxSizingStyle\";\nimport { FontStyle } from \"../../FontStyle\";\n\nexport const StyledOption = styled.li<{ hover?: boolean }>`\n  ${tw`tw-select-none tw-font-normal`}\n  font-size: 14px;\n  display: flex;\n  justify-content: space-between;\n  height: 28px;\n  padding-left: 16px;\n  padding-right: 16px;\n  margin-top: 4px;\n  margin-bottom: 4px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  transition-duration: 0.1s;\n  color: var(--color-theme-900);\n\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n  ${(props) =>\n    props.hover &&\n    css`\n      background-color: var(--color-theme-200);\n    `}\n`;\n\nStyledOption.displayName = \"StyledOption\";\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAGA,IAAAC,eAAA,GAAAD,OAAA;AACA,IAAAE,UAAA,GAAAF,OAAA;AAA4C,SAAAG,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,yBAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAL,wBAAAK,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAc,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAErC,IAAMY,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAGE,yBAAM,CAACC,EAAE,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,2SAC/B;EAAA;EAAA;AAA8B,CAAC,EAgBjCC,oBAAS,EACTC,8BAAc,EAEd,UAACC,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,QACXC,qBAAG,+CAEF;AAAA,EACJ;AAEDX,YAAY,CAACK,WAAW,GAAG,cAAc"}
+{"version":3,"file":"Styles.js","names":["_styledComponents","_interopRequireWildcard","require","_BoxSizingStyle","_FontStyle","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledOption","exports","styled","li","withConfig","displayName","componentId","FontStyle","BoxSizingStyle","props","hover","css","StyledOptionContent","span"],"sources":["../../../../../src/components/Select/Option/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { BoxSizingStyle } from \"../../BoxSizingStyle\";\nimport { FontStyle } from \"../../FontStyle\";\n\nexport const StyledOption = styled.li<{ hover?: boolean }>`\n  ${tw`tw-select-none tw-font-normal`}\n  font-size: 14px;\n  display: flex;\n  justify-content: space-between;\n  height: 28px;\n  padding-left: 16px;\n  padding-right: 16px;\n  margin-top: 4px;\n  margin-bottom: 4px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  transition-duration: 0.1s;\n  color: var(--color-theme-900);\n\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n  ${(props) =>\n    props.hover &&\n    css`\n      background-color: var(--color-theme-200);\n    `}\n`;\n\nStyledOption.displayName = \"StyledOption\";\n\nexport const StyledOptionContent = styled.span`\n  display: flex;\n  align-items: center;\n  width: 100%;\n  justify-content: space-between;\n`;\n\nStyledOptionContent.displayName = \"StyledOptionContent\";\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAGA,IAAAC,eAAA,GAAAD,OAAA;AACA,IAAAE,UAAA,GAAAF,OAAA;AAA4C,SAAAG,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,yBAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAL,wBAAAK,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAc,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAErC,IAAMY,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAGE,yBAAM,CAACC,EAAE,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,2SAC/B;EAAA;EAAA;AAA8B,CAAC,EAgBjCC,oBAAS,EACTC,8BAAc,EAEd,UAACC,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,QACXC,qBAAG,+CAEF;AAAA,EACJ;AAEDX,YAAY,CAACK,WAAW,GAAG,cAAc;AAElC,IAAMO,mBAAmB,GAAAX,OAAA,CAAAW,mBAAA,GAAGV,yBAAM,CAACW,IAAI,CAAAT,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,iFAK7C;AAEDM,mBAAmB,CAACP,WAAW,GAAG,qBAAqB"}

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

@@ -1 +1 @@
-{"version":3,"file":"Option.d.ts","sourceRoot":"","sources":["../../../../../src/components/Select/Option/Option.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAEZ,iBAAiB,EACjB,SAAS,EAGV,MAAM,OAAO,CAAC;AAMf,MAAM,WAAW,gBAAgB;IAC/B,sBAAsB;IACtB,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,sBAAsB;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,0BAA0B;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,yCAAyC;IACzC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC1B,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,kBAAkB;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,UAAU,0BAA0B;IAClC,sBAAsB;IACtB,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,sBAAsB;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,0BAA0B;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oBAAoB;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6BAA6B;IAC7B,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,8BAA8B;IAC9B,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IACxD,qBAAqB;IACrB,OAAO,CAAC,EAAE,iBAAiB,CAAC,aAAa,CAAC,CAAC;CAC5C;AAED,eAAO,MAAM,MAAM,kGAkClB,CAAC"}
+{"version":3,"file":"Option.d.ts","sourceRoot":"","sources":["../../../../../src/components/Select/Option/Option.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAEZ,iBAAiB,EACjB,SAAS,EAGV,MAAM,OAAO,CAAC;AAMf,MAAM,WAAW,gBAAgB;IAC/B,sBAAsB;IACtB,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,sBAAsB;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,0BAA0B;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,yCAAyC;IACzC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC1B,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,kBAAkB;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,UAAU,0BAA0B;IAClC,sBAAsB;IACtB,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,sBAAsB;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,0BAA0B;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oBAAoB;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6BAA6B;IAC7B,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,8BAA8B;IAC9B,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IACxD,qBAAqB;IACrB,OAAO,CAAC,EAAE,iBAAiB,CAAC,aAAa,CAAC,CAAC;CAC5C;AAED,eAAO,MAAM,MAAM,kGAoClB,CAAC"}

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

@@ -1,6 +1,6 @@
 import React, { forwardRef, useCallback } from "react";
 import classnames from "classnames";
-import { StyledOption } from "./Styles";
+import { StyledOption, StyledOptionContent } from "./Styles";
 export const Option = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     id,
@@ -25,7 +25,7 @@ export const Option = /*#__PURE__*/forwardRef((_ref, ref) => {
     className: classnames("c-option", className),
     hover: hover,
     onClick: onClick
-  }, renderOption ? renderOption : name);
+  }, /*#__PURE__*/React.createElement(StyledOptionContent, null, renderOption ? renderOption : name));
 });
 Option.displayName = "Option";
 //# sourceMappingURL=Option.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Option.js","names":["React","forwardRef","useCallback","classnames","StyledOption","Option","_ref","ref","id","name","tooltip","hover","className","renderOption","onMouseEnter","onClick","handleOnMouseEnter","createElement","title","onTouchStart","displayName"],"sources":["../../../../../src/components/Select/Option/Option.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  MouseEventHandler,\n  ReactNode,\n  Ref,\n  useCallback,\n} from \"react\";\n\nimport classnames from \"classnames\";\n\nimport { StyledOption } from \"./Styles\";\n\nexport interface IOptionItemProps {\n  /** Value of option */\n  id: string | number;\n  /** Label of option */\n  name: string;\n  /** Content for tooltip */\n  tooltip?: string;\n  /** Additional info right-side of name */\n  additionalInfo?: string;\n  /** image url for Avatar or MultiAvatar */\n  image?: string | string[];\n  /** Hex color for label */\n  color?: string;\n  /** Color for chip label */\n  chipColor?: string;\n  /** Value of mixed */\n  mixed?: boolean;\n  /** Hide option */\n  hidden?: boolean;\n}\n\ninterface IAdditionalOptionItemProps {\n  /** Value of option */\n  id?: string | number;\n  /** Label of option */\n  name: string;\n  /** Content for tooltip */\n  tooltip?: string;\n  /** Hovered state */\n  hover?: boolean;\n  /** Class name of option */\n  className?: string;\n  /** Render option function */\n  renderOption?: ReactNode;\n  /** On mouse enter callback */\n  onMouseEnter?: (e: string | number | undefined) => void;\n  /** On mouse click */\n  onClick?: MouseEventHandler<HTMLLIElement>;\n}\n\nexport const Option = forwardRef(\n  (\n    {\n      id,\n      name,\n      tooltip = \"\",\n      hover,\n      className,\n      renderOption,\n      onMouseEnter,\n      onClick = () => null,\n    }: IAdditionalOptionItemProps,\n    ref: Ref<HTMLLIElement>\n  ) => {\n    const handleOnMouseEnter = useCallback(() => {\n      if (onMouseEnter) {\n        onMouseEnter(id);\n      }\n    }, [onMouseEnter, id]);\n\n    return (\n      <StyledOption\n        ref={hover ? ref : null}\n        title={tooltip ? tooltip : name}\n        onMouseEnter={handleOnMouseEnter}\n        onTouchStart={handleOnMouseEnter}\n        className={classnames(\"c-option\", className)}\n        hover={hover}\n        onClick={onClick}\n      >\n        {renderOption ? renderOption : name}\n      </StyledOption>\n    );\n  }\n);\n\nOption.displayName = \"Option\";\n"],"mappings":"AAAA,OAAOA,KAAK,IACVC,UAAU,EAIVC,WAAW,QACN,OAAO;AAEd,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,YAAY,QAAQ,UAAU;AA0CvC,OAAO,MAAMC,MAAM,gBAAGJ,UAAU,CAC9B,CAAAK,IAAA,EAWEC,GAAuB,KACpB;EAAA,IAXH;IACEC,EAAE;IACFC,IAAI;IACJC,OAAO,GAAG,EAAE;IACZC,KAAK;IACLC,SAAS;IACTC,YAAY;IACZC,YAAY;IACZC,OAAO,GAAGA,CAAA,KAAM;EACU,CAAC,GAAAT,IAAA;EAG7B,MAAMU,kBAAkB,GAAGd,WAAW,CAAC,MAAM;IAC3C,IAAIY,YAAY,EAAE;MAChBA,YAAY,CAACN,EAAE,CAAC;IAClB;EACF,CAAC,EAAE,CAACM,YAAY,EAAEN,EAAE,CAAC,CAAC;EAEtB,oBACER,KAAA,CAAAiB,aAAA,CAACb,YAAY;IACXG,GAAG,EAAEI,KAAK,GAAGJ,GAAG,GAAG,IAAK;IACxBW,KAAK,EAAER,OAAO,GAAGA,OAAO,GAAGD,IAAK;IAChCK,YAAY,EAAEE,kBAAmB;IACjCG,YAAY,EAAEH,kBAAmB;IACjCJ,SAAS,EAAET,UAAU,CAAC,UAAU,EAAES,SAAS,CAAE;IAC7CD,KAAK,EAAEA,KAAM;IACbI,OAAO,EAAEA;EAAQ,GAEhBF,YAAY,GAAGA,YAAY,GAAGJ,IACnB,CAAC;AAEnB,CACF,CAAC;AAEDJ,MAAM,CAACe,WAAW,GAAG,QAAQ"}
+{"version":3,"file":"Option.js","names":["React","forwardRef","useCallback","classnames","StyledOption","StyledOptionContent","Option","_ref","ref","id","name","tooltip","hover","className","renderOption","onMouseEnter","onClick","handleOnMouseEnter","createElement","title","onTouchStart","displayName"],"sources":["../../../../../src/components/Select/Option/Option.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  MouseEventHandler,\n  ReactNode,\n  Ref,\n  useCallback,\n} from \"react\";\n\nimport classnames from \"classnames\";\n\nimport { StyledOption, StyledOptionContent } from \"./Styles\";\n\nexport interface IOptionItemProps {\n  /** Value of option */\n  id: string | number;\n  /** Label of option */\n  name: string;\n  /** Content for tooltip */\n  tooltip?: string;\n  /** Additional info right-side of name */\n  additionalInfo?: string;\n  /** image url for Avatar or MultiAvatar */\n  image?: string | string[];\n  /** Hex color for label */\n  color?: string;\n  /** Color for chip label */\n  chipColor?: string;\n  /** Value of mixed */\n  mixed?: boolean;\n  /** Hide option */\n  hidden?: boolean;\n}\n\ninterface IAdditionalOptionItemProps {\n  /** Value of option */\n  id?: string | number;\n  /** Label of option */\n  name: string;\n  /** Content for tooltip */\n  tooltip?: string;\n  /** Hovered state */\n  hover?: boolean;\n  /** Class name of option */\n  className?: string;\n  /** Render option function */\n  renderOption?: ReactNode;\n  /** On mouse enter callback */\n  onMouseEnter?: (e: string | number | undefined) => void;\n  /** On mouse click */\n  onClick?: MouseEventHandler<HTMLLIElement>;\n}\n\nexport const Option = forwardRef(\n  (\n    {\n      id,\n      name,\n      tooltip = \"\",\n      hover,\n      className,\n      renderOption,\n      onMouseEnter,\n      onClick = () => null,\n    }: IAdditionalOptionItemProps,\n    ref: Ref<HTMLLIElement>\n  ) => {\n    const handleOnMouseEnter = useCallback(() => {\n      if (onMouseEnter) {\n        onMouseEnter(id);\n      }\n    }, [onMouseEnter, id]);\n\n    return (\n      <StyledOption\n        ref={hover ? ref : null}\n        title={tooltip ? tooltip : name}\n        onMouseEnter={handleOnMouseEnter}\n        onTouchStart={handleOnMouseEnter}\n        className={classnames(\"c-option\", className)}\n        hover={hover}\n        onClick={onClick}\n      >\n        <StyledOptionContent>\n          {renderOption ? renderOption : name}\n        </StyledOptionContent>\n      </StyledOption>\n    );\n  }\n);\n\nOption.displayName = \"Option\";\n"],"mappings":"AAAA,OAAOA,KAAK,IACVC,UAAU,EAIVC,WAAW,QACN,OAAO;AAEd,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,YAAY,EAAEC,mBAAmB,QAAQ,UAAU;AA0C5D,OAAO,MAAMC,MAAM,gBAAGL,UAAU,CAC9B,CAAAM,IAAA,EAWEC,GAAuB,KACpB;EAAA,IAXH;IACEC,EAAE;IACFC,IAAI;IACJC,OAAO,GAAG,EAAE;IACZC,KAAK;IACLC,SAAS;IACTC,YAAY;IACZC,YAAY;IACZC,OAAO,GAAGA,CAAA,KAAM;EACU,CAAC,GAAAT,IAAA;EAG7B,MAAMU,kBAAkB,GAAGf,WAAW,CAAC,MAAM;IAC3C,IAAIa,YAAY,EAAE;MAChBA,YAAY,CAACN,EAAE,CAAC;IAClB;EACF,CAAC,EAAE,CAACM,YAAY,EAAEN,EAAE,CAAC,CAAC;EAEtB,oBACET,KAAA,CAAAkB,aAAA,CAACd,YAAY;IACXI,GAAG,EAAEI,KAAK,GAAGJ,GAAG,GAAG,IAAK;IACxBW,KAAK,EAAER,OAAO,GAAGA,OAAO,GAAGD,IAAK;IAChCK,YAAY,EAAEE,kBAAmB;IACjCG,YAAY,EAAEH,kBAAmB;IACjCJ,SAAS,EAAEV,UAAU,CAAC,UAAU,EAAEU,SAAS,CAAE;IAC7CD,KAAK,EAAEA,KAAM;IACbI,OAAO,EAAEA;EAAQ,gBAEjBhB,KAAA,CAAAkB,aAAA,CAACb,mBAAmB,QACjBS,YAAY,GAAGA,YAAY,GAAGJ,IACZ,CACT,CAAC;AAEnB,CACF,CAAC;AAEDJ,MAAM,CAACe,WAAW,GAAG,QAAQ"}

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

@@ -1,4 +1,5 @@
 export declare const StyledOption: import("styled-components").StyledComponent<"li", any, {
     hover?: boolean | undefined;
 }, never>;
+export declare const StyledOptionContent: import("styled-components").StyledComponent<"span", any, {}, never>;
 //# sourceMappingURL=Styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Select/Option/Styles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,YAAY;;SAyBxB,CAAC"}
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Select/Option/Styles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,YAAY;;SAyBxB,CAAC;AAIF,eAAO,MAAM,mBAAmB,qEAK/B,CAAC"}

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

@@ -9,4 +9,9 @@ export const StyledOption = styled.li.withConfig({
   "fontWeight": "400"
 }, FontStyle, BoxSizingStyle, props => props.hover && css(["background-color:var(--color-theme-200);"]));
 StyledOption.displayName = "StyledOption";
+export const StyledOptionContent = styled.span.withConfig({
+  displayName: "Styles__StyledOptionContent",
+  componentId: "sc-1232l97-1"
+})(["display:flex;align-items:center;width:100%;justify-content:space-between;"]);
+StyledOptionContent.displayName = "StyledOptionContent";
 //# sourceMappingURL=Styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","FontStyle","StyledOption","li","withConfig","displayName","componentId","props","hover"],"sources":["../../../../../src/components/Select/Option/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { BoxSizingStyle } from \"../../BoxSizingStyle\";\nimport { FontStyle } from \"../../FontStyle\";\n\nexport const StyledOption = styled.li<{ hover?: boolean }>`\n  ${tw`tw-select-none tw-font-normal`}\n  font-size: 14px;\n  display: flex;\n  justify-content: space-between;\n  height: 28px;\n  padding-left: 16px;\n  padding-right: 16px;\n  margin-top: 4px;\n  margin-bottom: 4px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  transition-duration: 0.1s;\n  color: var(--color-theme-900);\n\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n  ${(props) =>\n    props.hover &&\n    css`\n      background-color: var(--color-theme-200);\n    `}\n`;\n\nStyledOption.displayName = \"StyledOption\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,SAASC,cAAc,QAAQ,sBAAsB;AACrD,SAASC,SAAS,QAAQ,iBAAiB;AAE3C,OAAO,MAAMC,YAAY,GAAGJ,MAAM,CAACK,EAAE,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,2SAC/B;EAAA;EAAA;AAA8B,CAAC,EAgBjCL,SAAS,EACTD,cAAc,EAEbO,KAAK,IACNA,KAAK,CAACC,KAAK,IACXT,GAAG,8CAEF,CACJ;AAEDG,YAAY,CAACG,WAAW,GAAG,cAAc"}
+{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","FontStyle","StyledOption","li","withConfig","displayName","componentId","props","hover","StyledOptionContent","span"],"sources":["../../../../../src/components/Select/Option/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { BoxSizingStyle } from \"../../BoxSizingStyle\";\nimport { FontStyle } from \"../../FontStyle\";\n\nexport const StyledOption = styled.li<{ hover?: boolean }>`\n  ${tw`tw-select-none tw-font-normal`}\n  font-size: 14px;\n  display: flex;\n  justify-content: space-between;\n  height: 28px;\n  padding-left: 16px;\n  padding-right: 16px;\n  margin-top: 4px;\n  margin-bottom: 4px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  transition-duration: 0.1s;\n  color: var(--color-theme-900);\n\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n  ${(props) =>\n    props.hover &&\n    css`\n      background-color: var(--color-theme-200);\n    `}\n`;\n\nStyledOption.displayName = \"StyledOption\";\n\nexport const StyledOptionContent = styled.span`\n  display: flex;\n  align-items: center;\n  width: 100%;\n  justify-content: space-between;\n`;\n\nStyledOptionContent.displayName = \"StyledOptionContent\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,SAASC,cAAc,QAAQ,sBAAsB;AACrD,SAASC,SAAS,QAAQ,iBAAiB;AAE3C,OAAO,MAAMC,YAAY,GAAGJ,MAAM,CAACK,EAAE,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,2SAC/B;EAAA;EAAA;AAA8B,CAAC,EAgBjCL,SAAS,EACTD,cAAc,EAEbO,KAAK,IACNA,KAAK,CAACC,KAAK,IACXT,GAAG,8CAEF,CACJ;AAEDG,YAAY,CAACG,WAAW,GAAG,cAAc;AAEzC,OAAO,MAAMI,mBAAmB,GAAGX,MAAM,CAACY,IAAI,CAAAN,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,iFAK7C;AAEDG,mBAAmB,CAACJ,WAAW,GAAG,qBAAqB"}

package/dist/index.js

@@ -17072,6 +17072,11 @@
     return props.hover && styled.css(["background-color:var(--color-theme-200);"]);
   });
   StyledOption.displayName = "StyledOption";
+  var StyledOptionContent = styled__default["default"].span.withConfig({
+    displayName: "Styles__StyledOptionContent",
+    componentId: "sc-1232l97-1"
+  })(["display:flex;align-items:center;width:100%;justify-content:space-between;"]);
+  StyledOptionContent.displayName = "StyledOptionContent";
 
   var StyledAutocompleteScrollShadow = styled__default["default"](ScrollShadow).withConfig({
     displayName: "Styles__StyledAutocompleteScrollShadow",
@@ -17150,7 +17155,7 @@
       className: classNames__default["default"]("c-option", className),
       hover: hover,
       onClick: onClick
-    }, renderOption ? renderOption : name);
+    }, /*#__PURE__*/React__default["default"].createElement(StyledOptionContent, null, renderOption ? renderOption : name));
   });
   Option.displayName = "Option";