@activecollab/components 2.0.94 → 2.0.96

package/dist/index.js

@@ -11527,7 +11527,9 @@
   var StyledInputWrapper = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledInputWrapper",
     componentId: "sc-ce8kcp-0"
-  })(["align-items:center;background-color:var(--input-background-color);border-color:var(--color-theme-500);border-radius:8px;border-style:solid;border-width:1px;cursor:text;display:flex;height:32px;padding-block:4px;padding-inline:4px;transition:all 0.3s ease;width:360px;", " ", " ", " ", " ", " ", " ", " ", ""], FontStyle, BoxSizingStyle, function (props) {
+  })(["align-items:center;cursor:text;display:flex;height:32px;padding-block:4px;padding-inline:4px;transition:all 0.3s ease;width:360px;", " ", " ", " ", " ", " ", " ", " ", " ", ""], FontStyle, BoxSizingStyle, function (props) {
+    return props.$mode === "outlined" && styled.css(["background-color:var(--input-background-color);border-color:var(--color-theme-500);border-radius:8px;border-style:solid;border-width:1px;"]);
+  }, function (props) {
     return props.$size === "small" && styled.css(["border-radius:6px;height:24px;"]);
   }, function (props) {
     return props.$size === "big" && styled.css(["height:40px;"]);
@@ -11538,13 +11540,13 @@
   }, function (props) {
     return !props.$disabled && !props.$invalid && styled.css(["&:focus-within,&:hover{border-color:var(--color-primary);}"]);
   }, function (props) {
-    return !props.$disabled && props.$invalid && styled.css(["border-color:var(--red-alert);"]);
+    return !props.$disabled && props.$invalid && props.$mode === "outlined" && styled.css(["border-color:var(--red-alert);"]);
   });
   StyledInputWrapper.displayName = "StyledInputWrapper";
   var StyledInput$2 = styled__default["default"].input.withConfig({
     displayName: "Styles__StyledInput",
     componentId: "sc-ce8kcp-1"
-  })(["background-color:var(--input-background-color);border:none;color:var(--color-theme-900);font-size:0.875rem;font-weight:400;letter-spacing:0.02em;margin-block:0;margin-inline:4px;outline:none;padding:0;width:100%;&::placeholder{color:var(--color-theme-transparent-500);}", " ", " ", " ", " ", ""], function (props) {
+  })(["background-color:var(--input-background-color);border:none;color:var(--color-theme-900);font-size:0.875rem;font-weight:400;letter-spacing:0.02em;margin-block:0;margin-inline:4px;outline:none;padding:0;width:100%;&::placeholder{color:var(--color-theme-transparent-500);}", " ", " ", " ", " ", " ", ""], function (props) {
     return props.$size === "big" && styled.css(["font-size:1rem;"]);
   }, function (props) {
     return props.$size === "biggest" && styled.css(["font-size:1.25rem;font-weight:700;"]);
@@ -11554,6 +11556,8 @@
     return props.$loading && styled.css(["cursor:progress;"]);
   }, function (props) {
     return props.align && styled.css(["text-align:", ";"], props.align);
+  }, function (props) {
+    return props.$mode === "flat" && props.$invalid && styled.css(["color:var(--red-alert);"]);
   });
   StyledInput$2.displayName = "StyledInput";
   var StyledPasswordIndicatorWrapper = styled__default["default"].div.withConfig({
@@ -11598,7 +11602,7 @@
   });
   StyledInputSelectTrigger.displayName = "StyledInputSelectTrigger";
 
-  var _excluded$R = ["className", "style", "type", "disabled", "size", "invalid", "startAdornment", "endAdornment", "wrapRef", "wrapperClick"];
+  var _excluded$R = ["className", "style", "type", "disabled", "size", "invalid", "startAdornment", "endAdornment", "wrapRef", "wrapperClick", "mode"];
   var Input = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
     var _ref$className = _ref.className,
       className = _ref$className === void 0 ? "" : _ref$className,
@@ -11615,6 +11619,8 @@
       endAdornment = _ref.endAdornment,
       wrapRef = _ref.wrapRef,
       wrapperClick = _ref.wrapperClick,
+      _ref$mode = _ref.mode,
+      mode = _ref$mode === void 0 ? "outlined" : _ref$mode,
       rest = _objectWithoutProperties(_ref, _excluded$R);
     var intInputRef = React.useRef(null);
     var handleRef = useForkRef(ref, intInputRef);
@@ -11627,6 +11633,7 @@
       $size: size,
       $invalid: invalid,
       $disabled: disabled,
+      $mode: mode,
       style: style,
       className: classNames__default["default"]("c-input-wrapper", className),
       onClick: handleWrapperClick,
@@ -11638,6 +11645,8 @@
       disabled: disabled,
       className: "c-input",
       "aria-invalid": invalid,
+      $invalid: invalid,
+      $mode: mode,
       "data-form-type": "other"
     }, rest)), endAdornment);
   });
@@ -14093,7 +14102,7 @@
   var StyledTextarea = styled__default["default"].textarea.withConfig({
     displayName: "Styles__StyledTextarea",
     componentId: "sc-m6jqw8-0"
-  })(["", " ", " ", " ", " ", " border-width:1px;border-style:solid;", " border-radius:8px;padding:4px 8px 6px 8px;height:auto;background-color:var(--input-background-color);transition:all 0.3s ease;width:360px;min-height:90px;outline:none;", " ", " ", " ", " &::placeholder{", "}", ""], {
+  })(["", " ", " ", " ", " ", " border-width:1px;border-style:solid;background-color:var(--input-background-color);", " border-radius:8px;padding:4px 8px 6px 8px;height:auto;transition:all 0.3s ease;width:360px;min-height:90px;outline:none;", " ", " ", " ", " ", " &::placeholder{", "}", " ", ""], {
     "fontSize": "0.875rem"
   }, {
     "color": "var(--color-theme-900)"
@@ -14106,35 +14115,43 @@
   }, {
     "borderColor": "var(--color-theme-500)"
   }, FontStyle, BoxSizingStyle, function (props) {
+    return props.$mode === "flat" && styled.css(["border:none;background-color:transparent;"]);
+  }, function (props) {
     return props.disabled && styled.css(["", ""], {
       "cursor": "not-allowed",
       "opacity": "0.5"
     });
   }, function (props) {
-    return !props.disabled && !props.$invalid && styled.css(["&:active,&:focus,&:hover{", "}"], {
+    return !props.disabled && !props.$invalid && props.$mode === "outlined" && styled.css(["&:active,&:focus,&:hover{", "}"], {
       "borderColor": "var(--color-primary)"
     });
   }, {
     "color": "var(--color-theme-transparent-500)"
   }, function (props) {
-    return !props.disabled && props.$invalid && styled.css(["", ""], {
+    return !props.disabled && props.$invalid && props.$mode === "outlined" && styled.css(["", ""], {
       "borderColor": "var(--red-alert)"
     });
+  }, function (props) {
+    return !props.disabled && props.$invalid && props.$mode === "flat" && styled.css(["color:var(--red-alert);"]);
   });
   StyledTextarea.displayName = "StyledTextarea";
 
-  var _excluded$F = ["className", "disabled", "invalid"];
+  var _excluded$F = ["className", "disabled", "invalid", "mode"];
   var Textarea = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var className = _ref.className,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       _ref$invalid = _ref.invalid,
       invalid = _ref$invalid === void 0 ? false : _ref$invalid,
+      _ref$mode = _ref.mode,
+      mode = _ref$mode === void 0 ? "outlined" : _ref$mode,
       rest = _objectWithoutProperties(_ref, _excluded$F);
     return /*#__PURE__*/React__default["default"].createElement(StyledTextarea, _extends({}, rest, {
       $invalid: invalid,
       ref: ref,
+      $mode: mode,
       disabled: disabled,
+      "aria-invalid": invalid,
       className: classNames__default["default"]("c-textarea", {
         "c-textarea__disabled": disabled
       }, className)
@@ -14462,7 +14479,7 @@
   })(["white-space:pre-wrap;overflow-wrap:break-word;resize:none;"]);
   StyledAutoResizeTextarea.displayName = "StyledAutoResizeTextarea";
 
-  var _excluded$B = ["minRows", "maxRows", "lineHeight", "onChange", "className", "preventNewRowOnEnter", "cursorAtTextEnd", "onKeyDown", "value"];
+  var _excluded$B = ["minRows", "maxRows", "lineHeight", "onChange", "className", "preventNewRowOnEnter", "cursorAtTextEnd", "onKeyDown", "value", "mode"];
   var AutoResizeTextarea = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$minRows = _ref.minRows,
       minRows = _ref$minRows === void 0 ? 1 : _ref$minRows,
@@ -14478,6 +14495,8 @@
       cursorAtTextEnd = _ref$cursorAtTextEnd === void 0 ? false : _ref$cursorAtTextEnd,
       onKeyDown = _ref.onKeyDown,
       value = _ref.value,
+      _ref$mode = _ref.mode,
+      mode = _ref$mode === void 0 ? "outlined" : _ref$mode,
       rest = _objectWithoutProperties(_ref, _excluded$B);
     var innerRef = React.useRef(null);
     var _useState = React.useState(minRows),
@@ -14525,6 +14544,7 @@
       onKeyDown: handleTextAreaKeyDown,
       onFocus: handleFocus,
       rows: rows,
+      mode: mode,
       className: classNames__default["default"]("c-autoresizetextarea", className),
       style: {
         minHeight: "".concat(lineHeight, "px"),
@@ -16161,41 +16181,46 @@
   var StyledSelectTrigger = styled__default["default"](Trigger).withConfig({
     displayName: "Styles__StyledSelectTrigger",
     componentId: "sc-9799p2-0"
-  })(["display:flex;align-items:center;justify-content:space-between;border:1px solid var(--color-theme-500);padding:0 4px 0 8px;width:300px;transition:border-color 0.3s ease;background-color:var(--input-background-color);", " ", " ", " ", " ", " ", ";"], function (_ref) {
-    var disabled = _ref.disabled;
-    return disabled && styled.css(["opacity:50%;cursor:default;"]);
+  })(["display:flex;align-items:center;justify-content:space-between;padding:0 4px 0 8px;width:300px;transition:border-color 0.3s ease;background-color:transparent;border:none;", " ", " ", " ", " ", " ", " ", ";"], function (_ref) {
+    var $mode = _ref.$mode;
+    return $mode === "outlined" && styled.css(["border:1px solid var(--color-theme-500);background-color:var(--input-background-color);"]);
   }, function (_ref2) {
-    var $invalid = _ref2.$invalid,
-      disabled = _ref2.disabled;
-    return !$invalid && !disabled && styled.css(["&:hover,&:focus{border-color:var(--color-primary-700);}"]);
+    var disabled = _ref2.disabled;
+    return disabled && styled.css(["opacity:50%;cursor:default;"]);
   }, function (_ref3) {
-    var $invalid = _ref3.$invalid;
-    return $invalid && styled.css(["", " &:hover{", "}"], {
+    var $invalid = _ref3.$invalid,
+      disabled = _ref3.disabled,
+      $mode = _ref3.$mode;
+    return !$invalid && !disabled && $mode === "outlined" && styled.css(["&:hover,&:focus{border-color:var(--color-primary-700);}"]);
+  }, function (_ref4) {
+    var $invalid = _ref4.$invalid,
+      $mode = _ref4.$mode;
+    return $invalid && $mode === "outlined" && styled.css(["", " &:hover{", "}"], {
       "borderColor": "var(--red-alert)"
     }, {
       "borderColor": "var(--red-alert)"
     });
-  }, function (_ref4) {
-    var $size = _ref4.$size;
-    return $size === "small" && styled.css(["height:24px;border-radius:var(--ac-br-6);"]);
   }, function (_ref5) {
     var $size = _ref5.$size;
-    return $size === "regular" && styled.css(["height:32px;border-radius:var(--ac-br-8);"]);
+    return $size === "small" && styled.css(["height:24px;border-radius:var(--ac-br-6);"]);
   }, function (_ref6) {
     var $size = _ref6.$size;
+    return $size === "regular" && styled.css(["height:32px;border-radius:var(--ac-br-8);"]);
+  }, function (_ref7) {
+    var $size = _ref7.$size;
     return $size === "big" && styled.css(["height:40px;border-radius:var(--ac-br-8);"]);
   });
   StyledSelectTrigger.displayName = "StyledSelectTrigger";
   var StyledCaretIcon = styled__default["default"](CollapseExpandSingleIcon$1).withConfig({
     displayName: "Styles__StyledCaretIcon",
     componentId: "sc-9799p2-1"
-  })(["margin-left:8px;flex-shrink:0;transition:transform 200ms ease;", ""], function (_ref7) {
-    var $open = _ref7.$open;
+  })(["margin-left:8px;flex-shrink:0;transition:transform 200ms ease;", ""], function (_ref8) {
+    var $open = _ref8.$open;
     return !$open && styled.css(["transform:rotate(180deg);"]);
   });
   StyledCaretIcon.displayName = "StyledCaretIcon";
 
-  var _excluded$m = ["children", "type", "size", "invalid", "open", "endAdornment", "typographyProps"];
+  var _excluded$m = ["children", "type", "size", "invalid", "open", "endAdornment", "typographyProps", "mode"];
   var SelectTrigger = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
       _ref$type = _ref.type,
@@ -16208,18 +16233,23 @@
       open = _ref$open === void 0 ? false : _ref$open,
       endAdornment = _ref.endAdornment,
       typographyProps = _ref.typographyProps,
+      _ref$mode = _ref.mode,
+      mode = _ref$mode === void 0 ? "outlined" : _ref$mode,
       rest = _objectWithoutProperties(_ref, _excluded$m);
     return /*#__PURE__*/React__default["default"].createElement(StyledSelectTrigger, _extends({
       ref: ref,
       role: "button",
       type: type,
       $size: size,
-      $invalid: invalid
+      $invalid: invalid,
+      "aria-invalid": invalid,
+      $mode: mode
     }, rest), /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       as: "div",
       overflow: "truncate",
       whitespace: "no-wrap",
-      variant: size === "small" || size === "regular" ? "Body 2" : "Body 1"
+      variant: size === "small" || size === "regular" ? "Body 2" : "Body 1",
+      color: mode === "flat" && invalid ? "alert" : undefined
     }, typographyProps), children), endAdornment ? endAdornment : /*#__PURE__*/React__default["default"].createElement(StyledCaretIcon, {
       $open: open
     }));