@activecollab/components 2.0.219 → 2.0.220

package/dist/index.js

@@ -9673,20 +9673,25 @@
   var StyledDiv$1 = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledDiv",
     componentId: "sc-1v8h7mt-4"
-  })(["", " ", " ", " height:32px;transition:all 0.3s ease;background-color:transparent;border:solid 1px var(--color-theme-700);color:var(--color-theme-700);margin-right:-1px;display:block;@media (max-width:768px){display:none;}svg{fill:currentColor;}&::-moz-focus-inner{border:0;}&:focus{outline:none;}&:disabled{cursor:default;opacity:50%;pointer-events:none;}&:hover{border-color:var(--color-primary);color:var(--color-primary);text-decoration:none;}&:active{border-color:var(--color-primary);color:var(--color-primary);background-color:var(--color-primary-200);}"], function (props) {
+  })(["", " ", " ", " ", " height:32px;transition:all 0.3s ease;background-color:transparent;", " color:var(--color-theme-700);margin-right:-1px;display:block;", " svg{fill:currentColor;}&::-moz-focus-inner{border:0;}&:focus{outline:none;}&:disabled{cursor:default;opacity:50%;pointer-events:none;}&:hover{", " color:var(--color-primary);text-decoration:none;}&:active{", " color:var(--color-primary);}"], function (props) {
     return props.$isTargetable && styled.css(["", ""], {
       "pointerEvents": "none"
     });
   }, function (props) {
     return props.$isRounded && styled.css(["border-radius:var(--ac-br-rounded);"]);
+  }, function (props) {
+    return props.$mode !== "flat" ? {
+      "borderWidth": "1px",
+      "borderStyle": "solid"
+    } : {
+      "borderWidth": "0px"
+    };
   }, {
     "position": "relative",
     "margin": "0px",
     "display": "inline-block",
     "cursor": "pointer",
     "userSelect": "none",
-    "borderWidth": "1px",
-    "borderStyle": "solid",
     "padding": "0px",
     "textAlign": "center",
     "verticalAlign": "middle",
@@ -9696,6 +9701,14 @@
     "textDecorationLine": "none",
     "WebkitFontSmoothing": "antialiased",
     "MozOsxFontSmoothing": "grayscale"
+  }, function (props) {
+    return props.$mode !== "flat" && styled.css(["border:1px solid var(--color-theme-700);"]);
+  }, function (props) {
+    return !props.$alwaysShowDate && styled.css(["@media (max-width:768px){display:none;}"]);
+  }, function (props) {
+    return props.$mode !== "flat" && styled.css(["border-color:var(--color-primary);"]);
+  }, function (props) {
+    return props.$mode !== "flat" && styled.css(["border-color:var(--color-primary);background-color:var(--color-primary-200);"]);
   });
   var StyledControl = styled__default["default"](IconButton).withConfig({
     displayName: "Styles__StyledControl",
@@ -11178,7 +11191,11 @@
       enableYearPicker = _ref.enableYearPicker,
       _ref$position = _ref.position,
       position = _ref$position === void 0 ? "bottom" : _ref$position,
-      popperClassName = _ref.popperClassName;
+      popperClassName = _ref.popperClassName,
+      _ref$mode = _ref.mode,
+      mode = _ref$mode === void 0 ? "outlined" : _ref$mode,
+      _ref$alwaysShowDate = _ref.alwaysShowDate,
+      alwaysShowDate = _ref$alwaysShowDate === void 0 ? false : _ref$alwaysShowDate;
     var _useState = React.useState(moment__default["default"].utc(from)),
       _useState2 = _slicedToArray(_useState, 2),
       fromDate = _useState2[0],
@@ -11370,12 +11387,14 @@
       className: classNames__default["default"]("c-date-stepper", className)
     }, renderLeftRightButtons ? /*#__PURE__*/React__default["default"].createElement(StyledControl, {
       type: "button",
-      variant: "secondary",
+      variant: mode === "flat" ? "text gray" : "secondary",
       onClick: onLeftClickHandler,
       disabled: isBeforeMinDate
     }, /*#__PURE__*/React__default["default"].createElement(ArrowLeftIcon$1, null)) : null, /*#__PURE__*/React__default["default"].createElement(StyledDiv$1, {
       $isTargetable: step === "yearly" || !withDatePicker,
       $isRounded: step === "range",
+      $mode: mode,
+      $alwaysShowDate: alwaysShowDate,
       style: dateStepperWidth(fromDate, toDate, step)
     }, withDatePicker && step !== "yearly" ? /*#__PURE__*/React__default["default"].createElement(DatePicker, {
       month: defaultMonth,
@@ -11400,7 +11419,7 @@
       required: true
     }) : /*#__PURE__*/React__default["default"].createElement(StyledSpan$1, null, getDateFormatted)), renderLeftRightButtons ? /*#__PURE__*/React__default["default"].createElement(StyledControl, {
       type: "button",
-      variant: "secondary",
+      variant: mode === "flat" ? "text gray" : "secondary",
       onClick: onRightClickHandler,
       disabled: isAfterMaxDate
     }, /*#__PURE__*/React__default["default"].createElement(ArrowRightIcon$1, null)) : null);