@activecollab/components 1.0.134 → 1.0.137

package/dist/esm/components/Toggle/Toggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../../../src/components/Toggle/Toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAU1C,MAAM,WAAW,YAAY;IAE3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,MAAM,2PAgBjB,CAAC"}
+{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../../../src/components/Toggle/Toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAU1C,MAAM,WAAW,YAAY;IAE3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,MAAM,2PAiBjB,CAAC"}

package/dist/esm/components/Toggle/Toggle.js

@@ -11,7 +11,8 @@ export var Toggle = /*#__PURE__*/forwardRef(function (_ref, ref) {
 
   return /*#__PURE__*/React.createElement(StyledToggle, {
     className: classNames("c-toggle", className),
-    $isHovered: hovered
+    $isHovered: hovered,
+    tabIndex: 0
   }, /*#__PURE__*/React.createElement(StyledToggleCheckbox, _extends({
     ref: ref,
     type: "checkbox"

package/dist/esm/components/Toggle/Toggle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Toggle/Toggle.tsx"],"names":["React","forwardRef","classNames","StyledToggle","StyledToggleCheckbox","StyledToggleSlider","StyledToggleSliderOff","StyledToggleSliderOn","Toggle","ref","hovered","className","args","displayName"],"mappings":";;;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SACEC,YADF,EAEEC,oBAFF,EAGEC,kBAHF,EAIEC,qBAJF,EAKEC,oBALF,QAMO,UANP;AAeA,OAAO,IAAMC,MAAM,gBAAGP,UAAU,CAG9B,gBAAkCQ,GAAlC,EAA0C;AAAA,MAAvCC,OAAuC,QAAvCA,OAAuC;AAAA,MAA9BC,SAA8B,QAA9BA,SAA8B;AAAA,MAAhBC,IAAgB;;AAC1C,sBACE,oBAAC,YAAD;AACE,IAAA,SAAS,EAAEV,UAAU,CAAC,UAAD,EAAaS,SAAb,CADvB;AAEE,IAAA,UAAU,EAAED;AAFd,kBAIE,oBAAC,oBAAD;AAAsB,IAAA,GAAG,EAAED,GAA3B;AAAgC,IAAA,IAAI,EAAC;AAArC,KAAoDG,IAApD,EAJF,eAKE,oBAAC,kBAAD,qBACE,oBAAC,oBAAD,aADF,eAEE,oBAAC,qBAAD,cAFF,CALF,CADF;AAYD,CAhB+B,CAAzB;AAkBPJ,MAAM,CAACK,WAAP,GAAqB,QAArB","sourcesContent":["import React, { forwardRef } from \"react\";\nimport classNames from \"classnames\";\nimport {\n  StyledToggle,\n  StyledToggleCheckbox,\n  StyledToggleSlider,\n  StyledToggleSliderOff,\n  StyledToggleSliderOn,\n} from \"./Styles\";\n\nexport interface IToggleProps {\n  /** Set hovered state. */\n  hovered?: boolean;\n  /** Custom classname for styling. */\n  className?: string;\n}\n\nexport const Toggle = forwardRef<\n  HTMLInputElement,\n  IToggleProps & Omit<React.ComponentPropsWithoutRef<\"div\">, keyof IToggleProps>\n>(({ hovered, className, ...args }, ref) => {\n  return (\n    <StyledToggle\n      className={classNames(\"c-toggle\", className)}\n      $isHovered={hovered}\n    >\n      <StyledToggleCheckbox ref={ref} type=\"checkbox\" {...args} />\n      <StyledToggleSlider>\n        <StyledToggleSliderOn>ON</StyledToggleSliderOn>\n        <StyledToggleSliderOff>OFF</StyledToggleSliderOff>\n      </StyledToggleSlider>\n    </StyledToggle>\n  );\n});\n\nToggle.displayName = \"Toggle\";\n"],"file":"Toggle.js"}
+{"version":3,"sources":["../../../../src/components/Toggle/Toggle.tsx"],"names":["React","forwardRef","classNames","StyledToggle","StyledToggleCheckbox","StyledToggleSlider","StyledToggleSliderOff","StyledToggleSliderOn","Toggle","ref","hovered","className","args","displayName"],"mappings":";;;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SACEC,YADF,EAEEC,oBAFF,EAGEC,kBAHF,EAIEC,qBAJF,EAKEC,oBALF,QAMO,UANP;AAeA,OAAO,IAAMC,MAAM,gBAAGP,UAAU,CAG9B,gBAAkCQ,GAAlC,EAA0C;AAAA,MAAvCC,OAAuC,QAAvCA,OAAuC;AAAA,MAA9BC,SAA8B,QAA9BA,SAA8B;AAAA,MAAhBC,IAAgB;;AAC1C,sBACE,oBAAC,YAAD;AACE,IAAA,SAAS,EAAEV,UAAU,CAAC,UAAD,EAAaS,SAAb,CADvB;AAEE,IAAA,UAAU,EAAED,OAFd;AAGE,IAAA,QAAQ,EAAE;AAHZ,kBAKE,oBAAC,oBAAD;AAAsB,IAAA,GAAG,EAAED,GAA3B;AAAgC,IAAA,IAAI,EAAC;AAArC,KAAoDG,IAApD,EALF,eAME,oBAAC,kBAAD,qBACE,oBAAC,oBAAD,aADF,eAEE,oBAAC,qBAAD,cAFF,CANF,CADF;AAaD,CAjB+B,CAAzB;AAmBPJ,MAAM,CAACK,WAAP,GAAqB,QAArB","sourcesContent":["import React, { forwardRef } from \"react\";\nimport classNames from \"classnames\";\nimport {\n  StyledToggle,\n  StyledToggleCheckbox,\n  StyledToggleSlider,\n  StyledToggleSliderOff,\n  StyledToggleSliderOn,\n} from \"./Styles\";\n\nexport interface IToggleProps {\n  /** Set hovered state. */\n  hovered?: boolean;\n  /** Custom classname for styling. */\n  className?: string;\n}\n\nexport const Toggle = forwardRef<\n  HTMLInputElement,\n  IToggleProps & Omit<React.ComponentPropsWithoutRef<\"div\">, keyof IToggleProps>\n>(({ hovered, className, ...args }, ref) => {\n  return (\n    <StyledToggle\n      className={classNames(\"c-toggle\", className)}\n      $isHovered={hovered}\n      tabIndex={0}\n    >\n      <StyledToggleCheckbox ref={ref} type=\"checkbox\" {...args} />\n      <StyledToggleSlider>\n        <StyledToggleSliderOn>ON</StyledToggleSliderOn>\n        <StyledToggleSliderOff>OFF</StyledToggleSliderOff>\n      </StyledToggleSlider>\n    </StyledToggle>\n  );\n});\n\nToggle.displayName = \"Toggle\";\n"],"file":"Toggle.js"}

package/dist/index.js

@@ -1438,6 +1438,23 @@
   BellOffIcon.displayName = "BellOffIcon";
   var BellOffIcon$1 = BellOffIcon;
 
+  var BillingIcon = /*#__PURE__*/React__default["default"].forwardRef(function (props, svgRef) {
+    return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
+      width: 24,
+      height: 24,
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "var(--color-theme-600)",
+      ref: svgRef
+    }, props), /*#__PURE__*/React__default["default"].createElement("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M4 5h3v2H4v10h3v2H4a2 2 0 01-2-2V7a2 2 0 012-2zm16 12h-3v2h3a2 2 0 002-2V7a2 2 0 00-2-2h-3v2h3v10zm-9 0h2v-1h1a1 1 0 001-1v-3a1 1 0 00-1-1h-3v-1h4V8h-2V7h-2v1h-1a1 1 0 00-1 1v3a1 1 0 001 1h3v1H9v2h2v1z"
+    }));
+  });
+  BillingIcon.displayName = "BillingIcon";
+  var BillingIcon$1 = BillingIcon;
+
   var BudgetAlertIcon = /*#__PURE__*/React__default["default"].forwardRef(function (props, svgRef) {
     return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
       width: 24,
@@ -3305,6 +3322,23 @@
   StarIcon.displayName = "StarIcon";
   var StarIcon$1 = StarIcon;
 
+  var SystemSettingsIcon = /*#__PURE__*/React__default["default"].forwardRef(function (props, svgRef) {
+    return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
+      width: 24,
+      height: 24,
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "var(--color-theme-600)",
+      ref: svgRef
+    }, props), /*#__PURE__*/React__default["default"].createElement("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M10.75 2a2 2 0 00-2 2v.154l-.029-.029a2 2 0 00-2.828 0L4.125 5.893a2 2 0 000 2.828l.029.029H4a2 2 0 00-2 2v2.5a2 2 0 002 2h.314l-.189.189a2 2 0 000 2.828l1.768 1.768a2 2 0 002.828 0l.029-.029A1.998 1.998 0 0010.748 22h2.502a2 2 0 002-2v-.154l.189.189a2 2 0 002.828 0l1.768-1.768a2 2 0 000-2.828l-.189-.189H20a2 2 0 002-2v-2.502a1.998 1.998 0 00-1.994-1.998l.029-.029a2 2 0 000-2.828l-1.768-1.768a2 2 0 00-2.828 0l-.189.189V4a2 2 0 00-2-2h-2.5zm0 2h2.5v.314c0 1.782 2.154 2.674 3.414 1.414l.189-.189 1.768 1.768-.032.032C17.33 8.597 18.22 10.749 20 10.75v2.5h-.154c-1.782 0-2.674 2.154-1.414 3.414l.189.189-1.768 1.768-.189-.189c-1.26-1.26-3.414-.368-3.414 1.414V20h-2.5c-.001-1.779-2.153-2.67-3.411-1.411l-.032.032-1.768-1.768.189-.189c1.26-1.26.368-3.414-1.414-3.414H4v-2.5h.154c1.782 0 2.674-2.154 1.414-3.414l-.029-.029 1.768-1.768.029.029c1.26 1.26 3.414.368 3.414-1.414V4zM10 12a2 2 0 114 0 2 2 0 01-4 0zm2-4a4 4 0 100 8 4 4 0 000-8z"
+    }));
+  });
+  SystemSettingsIcon.displayName = "SystemSettingsIcon";
+  var SystemSettingsIcon$1 = SystemSettingsIcon;
+
   var TaskAddIcon = /*#__PURE__*/React__default["default"].forwardRef(function (props, svgRef) {
     return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
       width: 24,
@@ -7167,7 +7201,7 @@
   });
   StyledInput.displayName = "StyledInput";
 
-  var _excluded$v = ["className", "style", "type", "disabled", "size", "invalid", "startAdornment", "endAdornment", "inputRef"];
+  var _excluded$v = ["className", "style", "type", "disabled", "size", "invalid", "startAdornment", "endAdornment", "wrapRef"];
   var Input = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
     var _ref$className = _ref.className,
         className = _ref$className === void 0 ? "" : _ref$className,
@@ -7182,11 +7216,11 @@
         invalid = _ref$invalid === void 0 ? false : _ref$invalid,
         startAdornment = _ref.startAdornment,
         endAdornment = _ref.endAdornment,
-        inputRef = _ref.inputRef,
+        wrapRef = _ref.wrapRef,
         rest = _objectWithoutProperties(_ref, _excluded$v);
 
     var intInputRef = React.useRef(null);
-    var handleRef = useForkRef(inputRef, intInputRef);
+    var handleRef = useForkRef(ref, intInputRef);
     var handleWrapperClick = React.useCallback(function () {
       var _intInputRef$current;
 
@@ -7199,7 +7233,7 @@
       style: style,
       className: classnames__default["default"]("c-input-wrapper", className),
       onClick: handleWrapperClick,
-      ref: ref
+      ref: wrapRef
     }, startAdornment, /*#__PURE__*/React__default["default"].createElement(StyledInput, _extends({
       ref: handleRef,
       type: type,
@@ -7526,7 +7560,7 @@
     return /*#__PURE__*/React__default["default"].createElement(Tag, props, /*#__PURE__*/React__default["default"].createElement("div", null, !disableSearch ? /*#__PURE__*/React__default["default"].createElement(StyledSelectForm, {
       ref: formRef
     }, /*#__PURE__*/React__default["default"].createElement(StyledSelectInput, {
-      inputRef: handleRef,
+      ref: handleRef,
       autoFocus: true,
       placeholder: placeholder
     }), actionIcon && actionLabel && /*#__PURE__*/React__default["default"].createElement(Tooltip, {
@@ -10346,7 +10380,7 @@
   var StyledToggleSlider = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledToggleSlider",
     componentId: "sc-4n6vdf-0"
-  })(["padding-left:6px;position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-evenly;background-color:transparent;border:1px solid var(--color-theme-600);overflow:hidden;border-radius:12.5px;font-size:11px;transition:0.3s;&:before{position:absolute;content:\"\";user-select:none;height:16px;width:16px;left:4px;bottom:3px;background-color:var(--color-theme-600);border-radius:50%;transition:0.3s;}"]);
+  })(["padding-left:6px;position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-evenly;background-color:transparent;border:1px solid var(--color-theme-600);overflow:hidden;border-radius:12.5px;font-size:11px;transition:0.3s;&::before{position:absolute;content:\"\";user-select:none;height:16px;width:16px;left:4px;bottom:3px;background-color:var(--color-theme-600);border-radius:50%;transition:0.3s;}"]);
   StyledToggleSlider.displayName = "StyledToggleSlider";
   var StyledToggleSliderOff = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledToggleSliderOff",
@@ -10363,11 +10397,11 @@
     componentId: "sc-4n6vdf-3"
   })(["opacity:0;width:0;height:0;&:checked + ", ":before{background-color:var(--page-paper-main);transform:translateX(25px);}&:checked + ", "{border-color:var(--color-sucess-green);background-color:var(--color-sucess-green);color:var(--color-sucess-green);", "{transform:translateX(30px);opacity:0;}", "{transform:translateX(0);opacity:1;}}&:disabled + ", "{opacity:0.5;cursor:default;}"], StyledToggleSlider, StyledToggleSlider, StyledToggleSliderOff, StyledToggleSliderOn, StyledToggleSlider);
   StyledToggleCheckbox.displayName = "StyledToggleCheckbox";
-  var StyledHelper = styled.css(["", "{transform:translateX(0);}", " + ", ":before{transform:translateX(3px);}", ":checked + ", "{&:before{transform:translateX(23px);}", "{transform:translateX(-2px);}}"], StyledToggleSliderOff, StyledToggleCheckbox, StyledToggleSlider, StyledToggleCheckbox, StyledToggleSlider, StyledToggleSliderOn);
+  var StyledHelper = styled.css(["", "{transform:translateX(0);}", " + ", ":before{transform:translateX(3px);}", ":checked + ", "{&::before{transform:translateX(23px);}", "{transform:translateX(-2px);}}"], StyledToggleSliderOff, StyledToggleCheckbox, StyledToggleSlider, StyledToggleCheckbox, StyledToggleSlider, StyledToggleSliderOn);
   var StyledToggle = styled__default["default"].label.withConfig({
     displayName: "Styles__StyledToggle",
     componentId: "sc-4n6vdf-4"
-  })(["", " ", " position:relative;display:inline-block;width:50px;height:24px;font-size:13px;font-weight:bold;line-height:13px;&:hover{", "}", ""], FontStyle, BoxSizingStyle, StyledHelper, function (props) {
+  })(["", " ", " position:relative;display:inline-block;width:50px;height:24px;font-size:13px;font-weight:bold;line-height:13px;border-radius:12.5px;&:hover{", "}&:focus{outline:1px solid var(--color-sucess-green);outline-offset:4px;}", ""], FontStyle, BoxSizingStyle, StyledHelper, function (props) {
     return props.$isHovered && styled.css(["", ""], StyledHelper);
   });
   StyledToggle.displayName = "StyledToggle";
@@ -10380,7 +10414,8 @@
 
     return /*#__PURE__*/React__default["default"].createElement(StyledToggle, {
       className: classnames__default["default"]("c-toggle", className),
-      $isHovered: hovered
+      $isHovered: hovered,
+      tabIndex: 0
     }, /*#__PURE__*/React__default["default"].createElement(StyledToggleCheckbox, _extends({
       ref: ref,
       type: "checkbox"
@@ -10546,8 +10581,8 @@
       className: "c-combo-box",
       onBlur: handleBlur,
       onFocus: onOpen,
-      ref: comboBoxRef,
-      inputRef: handleRef,
+      wrapRef: comboBoxRef,
+      ref: handleRef,
       value: loading && loadingText ? loadingText : value,
       onKeyDown: handleOnKeyDown,
       onChange: handleOnChange,
@@ -11287,6 +11322,7 @@
   exports.BackLink = BackLink;
   exports.BellOffIcon = BellOffIcon$1;
   exports.BellOffSmallIcon = BellOffSmallIcon$1;
+  exports.BillingIcon = BillingIcon$1;
   exports.Body1 = Body1;
   exports.Body2 = Body2;
   exports.Breadcrumbs = Breadcrumbs;
@@ -11488,6 +11524,7 @@
   exports.StarIcon = StarIcon$1;
   exports.StarOutlineIcon = StarOutlineIcon$1;
   exports.Steps = Steps;
+  exports.SystemSettingsIcon = SystemSettingsIcon$1;
   exports.Table = Table;
   exports.Tag = Tag;
   exports.TaskAddIcon = TaskAddIcon$1;