@activecollab/components 1.0.415 → 1.0.417

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

@@ -8,6 +8,7 @@ export declare const StyledComboBoxCollapseExpandSingleIcon: import("styled-comp
 export declare const StyledComboBoxCloseSmallIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & import("react").RefAttributes<SVGSVGElement>>, any, {}, never>;
 export declare const StyledComboBoxList: import("styled-components").StyledComponent<"div", any, {
     $width?: number | undefined;
+    $hide: boolean;
 }, never>;
 export declare const StyledChipWrapper: import("styled-components").StyledComponent<"div", any, {
     $autoSize: string;

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

@@ -1 +1 @@
-{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/ComboBox/Styles.ts"],"names":[],"mappings":";AAMA,eAAO,MAAM,mBAAmB;;SAI/B,CAAC;AASF,eAAO,MAAM,sCAAsC;;SAYlD,CAAC;AAKF,eAAO,MAAM,4BAA4B,6MAWxC,CAAC;AAIF,eAAO,MAAM,kBAAkB;;SAQ9B,CAAC;AAIF,eAAO,MAAM,iBAAiB;eACjB,MAAM;;SAqBlB,CAAC"}
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/ComboBox/Styles.ts"],"names":[],"mappings":";AAMA,eAAO,MAAM,mBAAmB;;SAI/B,CAAC;AASF,eAAO,MAAM,sCAAsC;;SAYlD,CAAC;AAKF,eAAO,MAAM,4BAA4B,6MAWxC,CAAC;AAIF,eAAO,MAAM,kBAAkB;;WAEtB,OAAO;SAcf,CAAC;AAIF,eAAO,MAAM,iBAAiB;eACjB,MAAM;;SAqBlB,CAAC"}

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

@@ -23,8 +23,11 @@ StyledComboBoxCloseSmallIcon.displayName = "StyledComboBoxCloseSmallIcon";
 export var StyledComboBoxList = styled.div.withConfig({
   displayName: "Styles__StyledComboBoxList",
   componentId: "sc-5qvkpb-3"
-})(["min-width:260px;background-color:var(--page-paper-main);border-radius:8px;border:1px solid var(--border-primary);box-shadow:var(--shadow-tertiary);margin:8px 0;width:", ";"], function (props) {
+})(["min-width:260px;background-color:var(--page-paper-main);border-radius:8px;border:1px solid var(--border-primary);box-shadow:var(--shadow-tertiary);margin:8px 0;width:", ";", ""], function (props) {
   return props.$width + "px";
+}, function (_ref) {
+  var $hide = _ref.$hide;
+  return $hide === true && css(["display:none;"]);
 });
 StyledComboBoxList.displayName = "StyledComboBoxList";
 export var StyledChipWrapper = styled.div.withConfig({
@@ -36,18 +39,18 @@ export var StyledChipWrapper = styled.div.withConfig({
   "gap": "0.25rem"
 }, {
   "flex": "1 1 0%"
-}, function (_ref) {
-  var $open = _ref.$open;
-  return $open ? "auto" : "hidden";
 }, function (_ref2) {
-  var $autoSize = _ref2.$autoSize;
+  var $open = _ref2.$open;
+  return $open ? "auto" : "hidden";
+}, function (_ref3) {
+  var $autoSize = _ref3.$autoSize;
   return $autoSize === "auto" && css(["", ";", ";"], {
     "flexWrap": "wrap"
   }, {
     "width": "100%"
   });
-}, function (_ref3) {
-  var $autoSize = _ref3.$autoSize;
+}, function (_ref4) {
+  var $autoSize = _ref4.$autoSize;
   return $autoSize !== "auto" && css(["align-items:center;"]);
 });
 StyledChipWrapper.displayName = "StyledChipWrapper";

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

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["styled","css","CollapseExpandSingleIcon","CloseSmallIcon","Input","StyledInputWrapper","StyledComboBoxInput","displayName","StyledIconDefaults","StyledComboBoxCollapseExpandSingleIcon","props","$open","StyledComboBoxCloseSmallIcon","StyledComboBoxList","div","$width","StyledChipWrapper","$autoSize"],"sources":["../../../../src/components/ComboBox/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { CollapseExpandSingleIcon, CloseSmallIcon } from \"../Icons/collection\";\nimport { Input } from \"../Input\";\nimport { StyledInputWrapper } from \"../Input/Styles\";\nimport tw from \"twin.macro\";\n\nexport const StyledComboBoxInput = styled(Input)<{ $loading?: boolean }>`\n  overflow: hidden;\n  text-overflow: ellipsis;\n  width: 100%;\n`;\n\nStyledComboBoxInput.displayName = \"StyledComboBoxInput\";\n\nconst StyledIconDefaults = css`\n  flex-shrink: 0;\n  cursor: pointer;\n`;\n\nexport const StyledComboBoxCollapseExpandSingleIcon = styled(\n  CollapseExpandSingleIcon\n)<{ $open?: boolean }>`\n  ${StyledIconDefaults};\n  color: var(--color-theme-600);\n  transform: rotate(180deg);\n\n  ${(props) =>\n    props.$open &&\n    css`\n      transform: rotate(0deg);\n    `}\n`;\n\nStyledComboBoxCollapseExpandSingleIcon.displayName =\n  \"StyledComboBoxCollapseExpandSingleIcon\";\n\nexport const StyledComboBoxCloseSmallIcon = styled(CloseSmallIcon)`\n  ${StyledIconDefaults};\n  opacity: 0;\n  transition-property: all;\n  transition-duration: 0.2s;\n  transition-delay: 0.5s;\n\n  ${StyledComboBoxInput}:hover, ${StyledInputWrapper}:hover & {\n    opacity: 1;\n    transition-delay: 0s;\n  }\n`;\n\nStyledComboBoxCloseSmallIcon.displayName = \"StyledComboBoxCloseSmallIcon\";\n\nexport const StyledComboBoxList = styled.div<{ $width?: number }>`\n  min-width: 260px;\n  background-color: var(--page-paper-main);\n  border-radius: 8px;\n  border: 1px solid var(--border-primary);\n  box-shadow: var(--shadow-tertiary);\n  margin: 8px 0;\n  width: ${(props) => `${props.$width}px`};\n`;\n\nStyledComboBoxList.displayName = \"StyledComboBoxList\";\n\nexport const StyledChipWrapper = styled.div<{\n  $autoSize: string;\n  $open?: boolean;\n}>`\n  ${tw`tw-flex`};\n  ${tw`tw-gap-1`};\n  ${tw`tw-flex-1`};\n\n  overflow: ${({ $open }) => ($open ? \"auto\" : \"hidden\")};\n\n  ${({ $autoSize }) =>\n    $autoSize === \"auto\" &&\n    css`\n      ${tw`tw-flex-wrap`};\n      ${tw`tw-w-full`};\n    `}\n\n  ${({ $autoSize }) =>\n    $autoSize !== \"auto\" &&\n    css`\n      align-items: center;\n    `}\n`;\nStyledChipWrapper.displayName = \"StyledChipWrapper\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,wBAAwB,EAAEC,cAAc,QAAQ,qBAAqB;AAC9E,SAASC,KAAK,QAAQ,UAAU;AAChC,SAASC,kBAAkB,QAAQ,iBAAiB;AAGpD,OAAO,IAAMC,mBAAmB,GAAGN,MAAM,CAACI,KAAK,CAAC;EAAA;EAAA;AAAA,0DAI/C;AAEDE,mBAAmB,CAACC,WAAW,GAAG,qBAAqB;AAEvD,IAAMC,kBAAkB,GAAGP,GAAG,mCAG7B;AAED,OAAO,IAAMQ,sCAAsC,GAAGT,MAAM,CAC1DE,wBAAwB,CACzB;EAAA;EAAA;AAAA,wEACGM,kBAAkB,EAIlB,UAACE,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,IACXV,GAAG,6BAEF;AAAA,EACJ;AAEDQ,sCAAsC,CAACF,WAAW,GAChD,wCAAwC;AAE1C,OAAO,IAAMK,4BAA4B,GAAGZ,MAAM,CAACG,cAAc,CAAC;EAAA;EAAA;AAAA,sJAC9DK,kBAAkB,EAMlBF,mBAAmB,EAAWD,kBAAkB,CAInD;AAEDO,4BAA4B,CAACL,WAAW,GAAG,8BAA8B;AAEzE,OAAO,IAAMM,kBAAkB,GAAGb,MAAM,CAACc,GAAG;EAAA;EAAA;AAAA,oLAOjC,UAACJ,KAAK;EAAA,OAAQA,KAAK,CAACK,MAAM;AAAA,CAAI,CACxC;AAEDF,kBAAkB,CAACN,WAAW,GAAG,oBAAoB;AAErD,OAAO,IAAMS,iBAAiB,GAAGhB,MAAM,CAACc,GAAG;EAAA;EAAA;AAAA,+CAIrC;EAAA;AAAQ,CAAC,EACT;EAAA;AAAS,CAAC,EACV;EAAA;AAAU,CAAC,EAEH;EAAA,IAAGH,KAAK,QAALA,KAAK;EAAA,OAAQA,KAAK,GAAG,MAAM,GAAG,QAAQ;AAAA,CAAC,EAEpD;EAAA,IAAGM,SAAS,SAATA,SAAS;EAAA,OACZA,SAAS,KAAK,MAAM,IACpBhB,GAAG,iBACG;IAAA;EAAa,CAAC,EACd;IAAA;EAAU,CAAC,CAChB;AAAA,GAED;EAAA,IAAGgB,SAAS,SAATA,SAAS;EAAA,OACZA,SAAS,KAAK,MAAM,IACpBhB,GAAG,yBAEF;AAAA,EACJ;AACDe,iBAAiB,CAACT,WAAW,GAAG,mBAAmB"}
+{"version":3,"file":"Styles.js","names":["styled","css","CollapseExpandSingleIcon","CloseSmallIcon","Input","StyledInputWrapper","StyledComboBoxInput","displayName","StyledIconDefaults","StyledComboBoxCollapseExpandSingleIcon","props","$open","StyledComboBoxCloseSmallIcon","StyledComboBoxList","div","$width","$hide","StyledChipWrapper","$autoSize"],"sources":["../../../../src/components/ComboBox/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { CollapseExpandSingleIcon, CloseSmallIcon } from \"../Icons/collection\";\nimport { Input } from \"../Input\";\nimport { StyledInputWrapper } from \"../Input/Styles\";\nimport tw from \"twin.macro\";\n\nexport const StyledComboBoxInput = styled(Input)<{ $loading?: boolean }>`\n  overflow: hidden;\n  text-overflow: ellipsis;\n  width: 100%;\n`;\n\nStyledComboBoxInput.displayName = \"StyledComboBoxInput\";\n\nconst StyledIconDefaults = css`\n  flex-shrink: 0;\n  cursor: pointer;\n`;\n\nexport const StyledComboBoxCollapseExpandSingleIcon = styled(\n  CollapseExpandSingleIcon\n)<{ $open?: boolean }>`\n  ${StyledIconDefaults};\n  color: var(--color-theme-600);\n  transform: rotate(180deg);\n\n  ${(props) =>\n    props.$open &&\n    css`\n      transform: rotate(0deg);\n    `}\n`;\n\nStyledComboBoxCollapseExpandSingleIcon.displayName =\n  \"StyledComboBoxCollapseExpandSingleIcon\";\n\nexport const StyledComboBoxCloseSmallIcon = styled(CloseSmallIcon)`\n  ${StyledIconDefaults};\n  opacity: 0;\n  transition-property: all;\n  transition-duration: 0.2s;\n  transition-delay: 0.5s;\n\n  ${StyledComboBoxInput}:hover, ${StyledInputWrapper}:hover & {\n    opacity: 1;\n    transition-delay: 0s;\n  }\n`;\n\nStyledComboBoxCloseSmallIcon.displayName = \"StyledComboBoxCloseSmallIcon\";\n\nexport const StyledComboBoxList = styled.div<{\n  $width?: number;\n  $hide: boolean;\n}>`\n  min-width: 260px;\n  background-color: var(--page-paper-main);\n  border-radius: 8px;\n  border: 1px solid var(--border-primary);\n  box-shadow: var(--shadow-tertiary);\n  margin: 8px 0;\n  width: ${(props) => `${props.$width}px`};\n  ${({ $hide }) =>\n    $hide === true &&\n    css`\n      display: none;\n    `}\n`;\n\nStyledComboBoxList.displayName = \"StyledComboBoxList\";\n\nexport const StyledChipWrapper = styled.div<{\n  $autoSize: string;\n  $open?: boolean;\n}>`\n  ${tw`tw-flex`};\n  ${tw`tw-gap-1`};\n  ${tw`tw-flex-1`};\n\n  overflow: ${({ $open }) => ($open ? \"auto\" : \"hidden\")};\n\n  ${({ $autoSize }) =>\n    $autoSize === \"auto\" &&\n    css`\n      ${tw`tw-flex-wrap`};\n      ${tw`tw-w-full`};\n    `}\n\n  ${({ $autoSize }) =>\n    $autoSize !== \"auto\" &&\n    css`\n      align-items: center;\n    `}\n`;\nStyledChipWrapper.displayName = \"StyledChipWrapper\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,wBAAwB,EAAEC,cAAc,QAAQ,qBAAqB;AAC9E,SAASC,KAAK,QAAQ,UAAU;AAChC,SAASC,kBAAkB,QAAQ,iBAAiB;AAGpD,OAAO,IAAMC,mBAAmB,GAAGN,MAAM,CAACI,KAAK,CAAC;EAAA;EAAA;AAAA,0DAI/C;AAEDE,mBAAmB,CAACC,WAAW,GAAG,qBAAqB;AAEvD,IAAMC,kBAAkB,GAAGP,GAAG,mCAG7B;AAED,OAAO,IAAMQ,sCAAsC,GAAGT,MAAM,CAC1DE,wBAAwB,CACzB;EAAA;EAAA;AAAA,wEACGM,kBAAkB,EAIlB,UAACE,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,IACXV,GAAG,6BAEF;AAAA,EACJ;AAEDQ,sCAAsC,CAACF,WAAW,GAChD,wCAAwC;AAE1C,OAAO,IAAMK,4BAA4B,GAAGZ,MAAM,CAACG,cAAc,CAAC;EAAA;EAAA;AAAA,sJAC9DK,kBAAkB,EAMlBF,mBAAmB,EAAWD,kBAAkB,CAInD;AAEDO,4BAA4B,CAACL,WAAW,GAAG,8BAA8B;AAEzE,OAAO,IAAMM,kBAAkB,GAAGb,MAAM,CAACc,GAAG;EAAA;EAAA;AAAA,wLAUjC,UAACJ,KAAK;EAAA,OAAQA,KAAK,CAACK,MAAM;AAAA,CAAI,EACrC;EAAA,IAAGC,KAAK,QAALA,KAAK;EAAA,OACRA,KAAK,KAAK,IAAI,IACdf,GAAG,mBAEF;AAAA,EACJ;AAEDY,kBAAkB,CAACN,WAAW,GAAG,oBAAoB;AAErD,OAAO,IAAMU,iBAAiB,GAAGjB,MAAM,CAACc,GAAG;EAAA;EAAA;AAAA,+CAIrC;EAAA;AAAQ,CAAC,EACT;EAAA;AAAS,CAAC,EACV;EAAA;AAAU,CAAC,EAEH;EAAA,IAAGH,KAAK,SAALA,KAAK;EAAA,OAAQA,KAAK,GAAG,MAAM,GAAG,QAAQ;AAAA,CAAC,EAEpD;EAAA,IAAGO,SAAS,SAATA,SAAS;EAAA,OACZA,SAAS,KAAK,MAAM,IACpBjB,GAAG,iBACG;IAAA;EAAa,CAAC,EACd;IAAA;EAAU,CAAC,CAChB;AAAA,GAED;EAAA,IAAGiB,SAAS,SAATA,SAAS;EAAA,OACZA,SAAS,KAAK,MAAM,IACpBjB,GAAG,yBAEF;AAAA,EACJ;AACDgB,iBAAiB,CAACV,WAAW,GAAG,mBAAmB"}

package/dist/esm/components/Steppers/DateStepper/Styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Steppers/DateStepper/Styles.ts"],"names":[],"mappings":";AASA,eAAO,MAAM,YAAY,uEAmDxB,CAAC;AAEF,eAAO,MAAM,UAAU,6GAOtB,CAAC;AAEF,eAAO,MAAM,iBAAiB,wQAQ7B,CAAC;AAEF,eAAO,MAAM,UAAU,qEAGtB,CAAC;AAEF,UAAU,SAAS;IACjB,aAAa,EAAE,OAAO,CAAC;IACvB,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,SAAS,2EAwErB,CAAC;AAEF,eAAO,MAAM,aAAa;;sEAEzB,CAAC"}
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Steppers/DateStepper/Styles.ts"],"names":[],"mappings":";AASA,eAAO,MAAM,YAAY,uEAoDxB,CAAC;AAEF,eAAO,MAAM,UAAU,6GAOtB,CAAC;AAEF,eAAO,MAAM,iBAAiB,wQAQ7B,CAAC;AAEF,eAAO,MAAM,UAAU,qEAGtB,CAAC;AAEF,UAAU,SAAS;IACjB,aAAa,EAAE,OAAO,CAAC;IACvB,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,SAAS,2EAwErB,CAAC;AAEF,eAAO,MAAM,aAAa;;sEAEzB,CAAC"}

package/dist/esm/components/Steppers/DateStepper/Styles.js

@@ -8,7 +8,7 @@ import { IconButton } from "../../IconButton";
 export var StyledButton = styled.button.withConfig({
   displayName: "Styles__StyledButton",
   componentId: "sc-1v8h7mt-0"
-})(["", " ", " ", " color:var(--color-theme-700);margin:0;padding:0;background:none;width:100%;height:auto;border:none;height:30px;line-height:1;transition:all 0.3s ease;svg{fill:currentColor;}&::-moz-focus-inner{border:0;}&:focus{outline:none;}&:hover{text-decoration:none;}&:disabled{cursor:default;opacity:50%;pointer-events:none;}"], FontStyle, BoxSizingStyle, {
+})(["", " ", " ", " color:var(--color-theme-700);margin:0;padding:0;padding-top:0;background:none;width:100%;height:auto;border:none;height:30px;line-height:1;transition:all 0.3s ease;svg{fill:currentColor;}&::-moz-focus-inner{border:0;}&:focus{outline:none;}&:hover{text-decoration:none;}&:disabled{cursor:default;opacity:50%;pointer-events:none;}"], FontStyle, BoxSizingStyle, {
   "position": "relative",
   "margin": "0px",
   "display": "inline-block",

package/dist/esm/components/Steppers/DateStepper/Styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["styled","css","ButtonGroup","FontStyle","BoxSizingStyle","screen","Menu","IconButton","StyledButton","button","StyledMenu","StyledButtonGroup","StyledSpan","span","StyledDiv","div","props","$isTargetable","$isRounded","md","StyledControl","displayName"],"sources":["../../../../../src/components/Steppers/DateStepper/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { ButtonGroup } from \"../../ButtonGroup\";\nimport { FontStyle } from \"../../FontStyle\";\nimport { BoxSizingStyle } from \"../../BoxSizingStyle\";\nimport { screen } from \"../../BreakPoints\";\nimport tw from \"twin.macro\";\nimport { Menu } from \"../../Menu\";\nimport { IconButton } from \"../../IconButton\";\n\nexport const StyledButton = styled.button`\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n  ${tw`\n    tw-relative\n    tw-antialiased\n    tw-align-middle\n    tw-font-medium\n    tw-inline-block\n    tw-leading-none\n    tw-m-0\n    tw-no-underline\n    tw-text-sm\n    tw-select-none\n    tw-cursor-pointer\n    tw-text-center\n  `}\n\n  color: var(--color-theme-700);\n  margin: 0;\n  padding: 0;\n  background: none;\n  width: 100%;\n  height: auto;\n  border: none;\n  height: 30px;\n  line-height: 1;\n  transition: all 0.3s ease;\n\n  svg {\n    fill: currentColor;\n  }\n\n  &::-moz-focus-inner {\n    border: 0;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &:hover {\n    text-decoration: none;\n  }\n\n  &:disabled {\n    cursor: default;\n    opacity: 50%;\n    pointer-events: none;\n  }\n`;\n\nexport const StyledMenu = styled(Menu)`\n  ${tw`\n    tw-w-auto\n    tw-h-auto\n    tw-py-4\n    tw-px-2\n  `}\n`;\n\nexport const StyledButtonGroup = styled(ButtonGroup)`\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n  button:hover {\n    position: relative;\n    z-index: 1;\n  }\n`;\n\nexport const StyledSpan = styled.span`\n  line-height: 30px;\n  color: var(--color-theme-700);\n`;\n\ninterface StyledDiv {\n  $isTargetable: boolean;\n  $isRounded: boolean;\n}\n\nexport const StyledDiv = styled.div<StyledDiv>`\n  ${(props) =>\n    props.$isTargetable &&\n    css`\n      ${tw`tw-pointer-events-none`}\n    `}\n\n  ${(props) =>\n    props.$isRounded &&\n    css`\n      border-radius: var(--ac-br-rounded);\n    `}\n\n  ${tw`\n    tw-relative\n    tw-text-center\n    tw-p-0\n    tw-antialiased\n    tw-align-middle\n    tw-font-medium\n    tw-inline-block\n    tw-leading-none\n    tw-m-0\n    tw-no-underline\n    tw-text-sm\n    tw-select-none\n    tw-cursor-pointer\n    tw-border\n    tw-border-solid\n  `}\n\n  height: 32px;\n  transition: all 0.3s ease;\n  background-color: transparent;\n  border: solid 1px var(--color-theme-700);\n  color: var(--color-theme-700);\n  margin-right: -1px;\n  display: none;\n\n  ${screen.md} {\n    display: block;\n  }\n\n  svg {\n    fill: currentColor;\n  }\n\n  &::-moz-focus-inner {\n    border: 0;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &:disabled {\n    cursor: default;\n    opacity: 50%;\n    pointer-events: none;\n  }\n\n  &:hover {\n    border-color: var(--color-primary);\n    color: var(--color-primary);\n    text-decoration: none;\n  }\n\n  &:active {\n    border-color: var(--color-primary);\n    color: var(--color-primary);\n    background-color: var(--color-primary-200);\n  }\n`;\n\nexport const StyledControl = styled(IconButton)`\n  border-radius: var(--ac-br-8);\n`;\n\nStyledButtonGroup.displayName = \"StyledButtonGroup\";\nStyledSpan.displayName = \"StyledSpan\";\nStyledDiv.displayName = \"StyledDiv\";\nStyledMenu.displayName = \"StyledMenu\";\nStyledButton.displayName = \"StyledButton\";\nStyledControl.displayName = \"StyledControl\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,WAAW,QAAQ,mBAAmB;AAC/C,SAASC,SAAS,QAAQ,iBAAiB;AAC3C,SAASC,cAAc,QAAQ,sBAAsB;AACrD,SAASC,MAAM,QAAQ,mBAAmB;AAE1C,SAASC,IAAI,QAAQ,YAAY;AACjC,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,OAAO,IAAMC,YAAY,GAAGR,MAAM,CAACS,MAAM;EAAA;EAAA;AAAA,kVACrCN,SAAS,EACTC,cAAc,EAEZ;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAaJ,CAAC,CAkCF;AAED,OAAO,IAAMM,UAAU,GAAGV,MAAM,CAACM,IAAI,CAAC;EAAA;EAAA;AAAA,aAChC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAKJ,CAAC,CACF;AAED,OAAO,IAAMK,iBAAiB,GAAGX,MAAM,CAACE,WAAW,CAAC;EAAA;EAAA;AAAA,6DAChDC,SAAS,EACTC,cAAc,CAMjB;AAED,OAAO,IAAMQ,UAAU,GAAGZ,MAAM,CAACa,IAAI;EAAA;EAAA;AAAA,sDAGpC;AAOD,OAAO,IAAMC,SAAS,GAAGd,MAAM,CAACe,GAAG;EAAA;EAAA;AAAA,oiBAC/B,UAACC,KAAK;EAAA,OACNA,KAAK,CAACC,aAAa,IACnBhB,GAAG,WACG;IAAA;EAAuB,CAAC,CAC7B;AAAA,GAED,UAACe,KAAK;EAAA,OACNA,KAAK,CAACE,UAAU,IAChBjB,GAAG,yCAEF;AAAA,GAEC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAgBJ,CAAC,EAUCI,MAAM,CAACc,EAAE,CAiCZ;AAED,OAAO,IAAMC,aAAa,GAAGpB,MAAM,CAACO,UAAU,CAAC;EAAA;EAAA;AAAA,qCAE9C;AAEDI,iBAAiB,CAACU,WAAW,GAAG,mBAAmB;AACnDT,UAAU,CAACS,WAAW,GAAG,YAAY;AACrCP,SAAS,CAACO,WAAW,GAAG,WAAW;AACnCX,UAAU,CAACW,WAAW,GAAG,YAAY;AACrCb,YAAY,CAACa,WAAW,GAAG,cAAc;AACzCD,aAAa,CAACC,WAAW,GAAG,eAAe"}
+{"version":3,"file":"Styles.js","names":["styled","css","ButtonGroup","FontStyle","BoxSizingStyle","screen","Menu","IconButton","StyledButton","button","StyledMenu","StyledButtonGroup","StyledSpan","span","StyledDiv","div","props","$isTargetable","$isRounded","md","StyledControl","displayName"],"sources":["../../../../../src/components/Steppers/DateStepper/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { ButtonGroup } from \"../../ButtonGroup\";\nimport { FontStyle } from \"../../FontStyle\";\nimport { BoxSizingStyle } from \"../../BoxSizingStyle\";\nimport { screen } from \"../../BreakPoints\";\nimport tw from \"twin.macro\";\nimport { Menu } from \"../../Menu\";\nimport { IconButton } from \"../../IconButton\";\n\nexport const StyledButton = styled.button`\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n  ${tw`\n    tw-relative\n    tw-antialiased\n    tw-align-middle\n    tw-font-medium\n    tw-inline-block\n    tw-leading-none\n    tw-m-0\n    tw-no-underline\n    tw-text-sm\n    tw-select-none\n    tw-cursor-pointer\n    tw-text-center\n  `}\n\n  color: var(--color-theme-700);\n  margin: 0;\n  padding: 0;\n  padding-top: 0; // @todo - delete\n  background: none;\n  width: 100%;\n  height: auto;\n  border: none;\n  height: 30px;\n  line-height: 1;\n  transition: all 0.3s ease;\n\n  svg {\n    fill: currentColor;\n  }\n\n  &::-moz-focus-inner {\n    border: 0;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &:hover {\n    text-decoration: none;\n  }\n\n  &:disabled {\n    cursor: default;\n    opacity: 50%;\n    pointer-events: none;\n  }\n`;\n\nexport const StyledMenu = styled(Menu)`\n  ${tw`\n    tw-w-auto\n    tw-h-auto\n    tw-py-4\n    tw-px-2\n  `}\n`;\n\nexport const StyledButtonGroup = styled(ButtonGroup)`\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n  button:hover {\n    position: relative;\n    z-index: 1;\n  }\n`;\n\nexport const StyledSpan = styled.span`\n  line-height: 30px;\n  color: var(--color-theme-700);\n`;\n\ninterface StyledDiv {\n  $isTargetable: boolean;\n  $isRounded: boolean;\n}\n\nexport const StyledDiv = styled.div<StyledDiv>`\n  ${(props) =>\n    props.$isTargetable &&\n    css`\n      ${tw`tw-pointer-events-none`}\n    `}\n\n  ${(props) =>\n    props.$isRounded &&\n    css`\n      border-radius: var(--ac-br-rounded);\n    `}\n\n  ${tw`\n    tw-relative\n    tw-text-center\n    tw-p-0\n    tw-antialiased\n    tw-align-middle\n    tw-font-medium\n    tw-inline-block\n    tw-leading-none\n    tw-m-0\n    tw-no-underline\n    tw-text-sm\n    tw-select-none\n    tw-cursor-pointer\n    tw-border\n    tw-border-solid\n  `}\n\n  height: 32px;\n  transition: all 0.3s ease;\n  background-color: transparent;\n  border: solid 1px var(--color-theme-700);\n  color: var(--color-theme-700);\n  margin-right: -1px;\n  display: none;\n\n  ${screen.md} {\n    display: block;\n  }\n\n  svg {\n    fill: currentColor;\n  }\n\n  &::-moz-focus-inner {\n    border: 0;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &:disabled {\n    cursor: default;\n    opacity: 50%;\n    pointer-events: none;\n  }\n\n  &:hover {\n    border-color: var(--color-primary);\n    color: var(--color-primary);\n    text-decoration: none;\n  }\n\n  &:active {\n    border-color: var(--color-primary);\n    color: var(--color-primary);\n    background-color: var(--color-primary-200);\n  }\n`;\n\nexport const StyledControl = styled(IconButton)`\n  border-radius: var(--ac-br-8);\n`;\n\nStyledButtonGroup.displayName = \"StyledButtonGroup\";\nStyledSpan.displayName = \"StyledSpan\";\nStyledDiv.displayName = \"StyledDiv\";\nStyledMenu.displayName = \"StyledMenu\";\nStyledButton.displayName = \"StyledButton\";\nStyledControl.displayName = \"StyledControl\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,WAAW,QAAQ,mBAAmB;AAC/C,SAASC,SAAS,QAAQ,iBAAiB;AAC3C,SAASC,cAAc,QAAQ,sBAAsB;AACrD,SAASC,MAAM,QAAQ,mBAAmB;AAE1C,SAASC,IAAI,QAAQ,YAAY;AACjC,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,OAAO,IAAMC,YAAY,GAAGR,MAAM,CAACS,MAAM;EAAA;EAAA;AAAA,gWACrCN,SAAS,EACTC,cAAc,EAEZ;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAaJ,CAAC,CAmCF;AAED,OAAO,IAAMM,UAAU,GAAGV,MAAM,CAACM,IAAI,CAAC;EAAA;EAAA;AAAA,aAChC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAKJ,CAAC,CACF;AAED,OAAO,IAAMK,iBAAiB,GAAGX,MAAM,CAACE,WAAW,CAAC;EAAA;EAAA;AAAA,6DAChDC,SAAS,EACTC,cAAc,CAMjB;AAED,OAAO,IAAMQ,UAAU,GAAGZ,MAAM,CAACa,IAAI;EAAA;EAAA;AAAA,sDAGpC;AAOD,OAAO,IAAMC,SAAS,GAAGd,MAAM,CAACe,GAAG;EAAA;EAAA;AAAA,oiBAC/B,UAACC,KAAK;EAAA,OACNA,KAAK,CAACC,aAAa,IACnBhB,GAAG,WACG;IAAA;EAAuB,CAAC,CAC7B;AAAA,GAED,UAACe,KAAK;EAAA,OACNA,KAAK,CAACE,UAAU,IAChBjB,GAAG,yCAEF;AAAA,GAEC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAgBJ,CAAC,EAUCI,MAAM,CAACc,EAAE,CAiCZ;AAED,OAAO,IAAMC,aAAa,GAAGpB,MAAM,CAACO,UAAU,CAAC;EAAA;EAAA;AAAA,qCAE9C;AAEDI,iBAAiB,CAACU,WAAW,GAAG,mBAAmB;AACnDT,UAAU,CAACS,WAAW,GAAG,YAAY;AACrCP,SAAS,CAACO,WAAW,GAAG,WAAW;AACnCX,UAAU,CAACW,WAAW,GAAG,YAAY;AACrCb,YAAY,CAACa,WAAW,GAAG,cAAc;AACzCD,aAAa,CAACC,WAAW,GAAG,eAAe"}

package/dist/index.js

@@ -8995,7 +8995,7 @@
   var StyledButton$1 = styled__default["default"].button.withConfig({
     displayName: "Styles__StyledButton",
     componentId: "sc-1v8h7mt-0"
-  })(["", " ", " ", " color:var(--color-theme-700);margin:0;padding:0;background:none;width:100%;height:auto;border:none;height:30px;line-height:1;transition:all 0.3s ease;svg{fill:currentColor;}&::-moz-focus-inner{border:0;}&:focus{outline:none;}&:hover{text-decoration:none;}&:disabled{cursor:default;opacity:50%;pointer-events:none;}"], FontStyle, BoxSizingStyle, {
+  })(["", " ", " ", " color:var(--color-theme-700);margin:0;padding:0;padding-top:0;background:none;width:100%;height:auto;border:none;height:30px;line-height:1;transition:all 0.3s ease;svg{fill:currentColor;}&::-moz-focus-inner{border:0;}&:focus{outline:none;}&:hover{text-decoration:none;}&:disabled{cursor:default;opacity:50%;pointer-events:none;}"], FontStyle, BoxSizingStyle, {
     "position": "relative",
     "margin": "0px",
     "display": "inline-block",
@@ -15323,8 +15323,11 @@
   var StyledComboBoxList = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledComboBoxList",
     componentId: "sc-5qvkpb-3"
-  })(["min-width:260px;background-color:var(--page-paper-main);border-radius:8px;border:1px solid var(--border-primary);box-shadow:var(--shadow-tertiary);margin:8px 0;width:", ";"], function (props) {
+  })(["min-width:260px;background-color:var(--page-paper-main);border-radius:8px;border:1px solid var(--border-primary);box-shadow:var(--shadow-tertiary);margin:8px 0;width:", ";", ""], function (props) {
     return "".concat(props.$width, "px");
+  }, function (_ref) {
+    var $hide = _ref.$hide;
+    return $hide === true && styled.css(["display:none;"]);
   });
   StyledComboBoxList.displayName = "StyledComboBoxList";
   var StyledChipWrapper = styled__default["default"].div.withConfig({
@@ -15336,18 +15339,18 @@
     "gap": "0.25rem"
   }, {
     "flex": "1 1 0%"
-  }, function (_ref) {
-    var $open = _ref.$open;
-    return $open ? "auto" : "hidden";
   }, function (_ref2) {
-    var $autoSize = _ref2.$autoSize;
+    var $open = _ref2.$open;
+    return $open ? "auto" : "hidden";
+  }, function (_ref3) {
+    var $autoSize = _ref3.$autoSize;
     return $autoSize === "auto" && styled.css(["", ";", ";"], {
       "flexWrap": "wrap"
     }, {
       "width": "100%"
     });
-  }, function (_ref3) {
-    var $autoSize = _ref3.$autoSize;
+  }, function (_ref4) {
+    var $autoSize = _ref4.$autoSize;
     return $autoSize !== "auto" && styled.css(["align-items:center;"]);
   });
   StyledChipWrapper.displayName = "StyledChipWrapper";
@@ -15482,7 +15485,7 @@
     return isFirst.current;
   };
 
-  var _excluded$j = ["options", "selected", "loading", "loadingText", "onChange", "placeholder", "handleEmptyAction", "disabled", "size", "invalid", "type", "renderChip", "forceCloseMenu", "renderOption", "limitChips", "hiddenNumberText", "inPortal", "inputWrapperClassName", "scrollWrapper", "onClose", "onClear", "onDeselect"];
+  var _excluded$j = ["options", "selected", "loading", "loadingText", "onChange", "placeholder", "handleEmptyAction", "disabled", "size", "invalid", "type", "renderChip", "forceCloseMenu", "renderOption", "limitChips", "hiddenNumberText", "inPortal", "inputWrapperClassName", "scrollWrapper", "onClose", "onClear", "onDeselect", "defaultValue"];
   var ComboBox = function ComboBox(_ref) {
     var _comboBoxRef$current2, _comboBoxRef$current3;
     var _ref$options = _ref.options,
@@ -15516,6 +15519,7 @@
       onClose = _ref.onClose,
       onClear = _ref.onClear,
       onDeselect = _ref.onDeselect,
+      defaultValue = _ref.defaultValue,
       prop = _objectWithoutProperties(_ref, _excluded$j);
     var selectedName = React.useMemo(function () {
       var value = "";
@@ -15772,6 +15776,9 @@
     }, [type, selected, options, open, limitChips, hiddenNumberText, renderChipAdornment, size]);
     var showXIcon = Array.isArray(selected) && type === "multiple" && selected.length > 0;
     var hasSelected = type === "multiple" && Array.isArray(selected) && selected.length > 0;
+    var showMenu = React.useMemo(function () {
+      return Boolean(options.length || defaultValue || Number(value.length) > 0);
+    }, [defaultValue, options.length, value]);
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: "c-combo-box"
     }, type === "multiple" ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(_StyledStyledInputWrapper, {
@@ -15816,7 +15823,7 @@
       onMouseDown: handleMouseDown,
       onClick: handleDeselect,
       "data-testid": "deselect-all"
-    }, /*#__PURE__*/React__default["default"].createElement(StyledComboBoxCloseSmallIcon, null)), /*#__PURE__*/React__default["default"].createElement(StyledComboBoxCollapseExpandSingleIcon, {
+    }, /*#__PURE__*/React__default["default"].createElement(StyledComboBoxCloseSmallIcon, null)), showMenu && /*#__PURE__*/React__default["default"].createElement(StyledComboBoxCollapseExpandSingleIcon, {
       $open: open
     }))))) : /*#__PURE__*/React__default["default"].createElement(StyledComboBoxInput, {
       className: classNames__default["default"]("c-combo-box-input", inputWrapperClassName),
@@ -15824,6 +15831,7 @@
       wrapperClick: onOpen,
       onFocus: function onFocus() {
         setFocused(!focused);
+        onOpen();
       },
       onClick: onOpen,
       wrapRef: comboBoxRef,
@@ -15844,7 +15852,7 @@
         onClick: handleDeselect,
         variant: "text gray",
         size: "small"
-      }, /*#__PURE__*/React__default["default"].createElement(StyledComboBoxCloseSmallIcon, null)) : null, /*#__PURE__*/React__default["default"].createElement(StyledComboBoxCollapseExpandSingleIcon, {
+      }, /*#__PURE__*/React__default["default"].createElement(StyledComboBoxCloseSmallIcon, null)) : null, showMenu && /*#__PURE__*/React__default["default"].createElement(StyledComboBoxCollapseExpandSingleIcon, {
         $open: open
       })) : null
     }), !disabled ? /*#__PURE__*/React__default["default"].createElement(ConditionalWrapper, {
@@ -15866,7 +15874,8 @@
       noIsolation: true,
       allowPinchZoom: true
     }, /*#__PURE__*/React__default["default"].createElement(StyledComboBoxList, {
-      $width: (_comboBoxRef$current3 = comboBoxRef.current) === null || _comboBoxRef$current3 === void 0 ? void 0 : _comboBoxRef$current3.clientWidth
+      $width: (_comboBoxRef$current3 = comboBoxRef.current) === null || _comboBoxRef$current3 === void 0 ? void 0 : _comboBoxRef$current3.clientWidth,
+      $hide: !showMenu
     }, /*#__PURE__*/React__default["default"].createElement(Autocomplete, _extends({}, prop, {
       inputEl: childNode,
       selected: selected,
@@ -15874,7 +15883,8 @@
       renderOption: handleRenderOption,
       options: options,
       type: type,
-      handleEmptyAction: emptyAction
+      handleEmptyAction: emptyAction,
+      defaultValue: defaultValue
     })))))) : null);
   };
   ComboBox.displayName = "ComboBox";