@activecollab/components
Version:
ActiveCollab Components
24,498 lines • 1.08 MB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('classnames'), require('styled-components'), require('resize-observer-polyfill'), require('react-focus-lock'), require('react-remove-scroll'), require('react-dom'), require('@popperjs/core'), require('react-transition-group'), require('moment-timezone'), require('@tanstack/react-virtual'), require('country-explorer'), require('compromise'), require('compromise-dates'), require('moment')) :
typeof define === 'function' && define.amd ? define(['exports', 'react', 'classnames', 'styled-components', 'resize-observer-polyfill', 'react-focus-lock', 'react-remove-scroll', 'react-dom', '@popperjs/core', 'react-transition-group', 'moment-timezone', '@tanstack/react-virtual', 'country-explorer', 'compromise', 'compromise-dates', 'moment'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.components = {}, global.React, global.classNames, global.styled, global.ResizeObserver, global.FocusLock, global.reactRemoveScroll, global.ReactDOM, global.PopperJS, global.reactTransitionGroup, global["moment-timezone"], global.reactVirtual, global.countryExplorer, global.compromise, global.compromiseDates, global.moment));
})(this, (function (exports, React, classNames, styled, ResizeObserver, FocusLock, reactRemoveScroll, ReactDOM, core, reactTransitionGroup, moment, reactVirtual, countryExplorer, nlp, plg, moment$1) { 'use strict';
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
var ResizeObserver__default = /*#__PURE__*/_interopDefaultLegacy(ResizeObserver);
var FocusLock__default = /*#__PURE__*/_interopDefaultLegacy(FocusLock);
var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
var nlp__default = /*#__PURE__*/_interopDefaultLegacy(nlp);
var plg__default = /*#__PURE__*/_interopDefaultLegacy(plg);
var moment__default$1 = /*#__PURE__*/_interopDefaultLegacy(moment$1);
function _iterableToArrayLimit(r, l) {
var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
if (null != t) {
var e,
n,
i,
u,
a = [],
f = !0,
o = !1;
try {
if (i = (t = t.call(r)).next, 0 === l) {
if (Object(t) !== t) return;
f = !1;
} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
} catch (r) {
o = !0, n = r;
} finally {
try {
if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
} finally {
if (o) throw n;
}
}
return a;
}
}
function ownKeys(e, r) {
var t = Object.keys(e);
if (Object.getOwnPropertySymbols) {
var o = Object.getOwnPropertySymbols(e);
r && (o = o.filter(function (r) {
return Object.getOwnPropertyDescriptor(e, r).enumerable;
})), t.push.apply(t, o);
}
return t;
}
function _objectSpread2(e) {
for (var r = 1; r < arguments.length; r++) {
var t = null != arguments[r] ? arguments[r] : {};
r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
_defineProperty(e, r, t[r]);
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
});
}
return e;
}
function _toPrimitive(t, r) {
if ("object" != typeof t || !t) return t;
var e = t[Symbol.toPrimitive];
if (void 0 !== e) {
var i = e.call(t, r || "default");
if ("object" != typeof i) return i;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return ("string" === r ? String : Number)(t);
}
function _toPropertyKey(t) {
var i = _toPrimitive(t, "string");
return "symbol" == typeof i ? i : String(i);
}
function _defineProperty(obj, key, value) {
key = _toPropertyKey(key);
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function _extends() {
_extends = Object.assign ? Object.assign.bind() : function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
function _objectWithoutProperties(source, excluded) {
if (source == null) return {};
var target = _objectWithoutPropertiesLoose(source, excluded);
var key, i;
if (Object.getOwnPropertySymbols) {
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
for (i = 0; i < sourceSymbolKeys.length; i++) {
key = sourceSymbolKeys[i];
if (excluded.indexOf(key) >= 0) continue;
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
target[key] = source[key];
}
}
return target;
}
function _slicedToArray(arr, i) {
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
}
function _arrayWithHoles(arr) {
if (Array.isArray(arr)) return arr;
}
function _unsupportedIterableToArray(o, minLen) {
if (!o) return;
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(o);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}
function _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
return arr2;
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
var BoxSizingStyle = styled.css(["box-sizing:border-box;*{box-sizing:border-box;}"]);
var FontStyle = styled.css(["font-family:-apple-system,BlinkMacSystemFont,\"Roboto\",\"Helvetica Neue\",Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;"]);
var StyledButton$2 = styled__default["default"].button.withConfig({
displayName: "Styles__StyledButton",
componentId: "sc-vi1kcr-0"
})(["", " ", " -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;vertical-align:middle;font-weight:500;display:inline-block;line-height:1;margin:0;text-decoration:none;font-size:0.875rem;user-select:none;cursor:pointer;text-align:center;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:288px;border:none;height:32px;transition:background-color 0.3s ease,box-shadow 0.3s ease,color 0.3s ease,border-color 0.3s ease;svg{fill:currentColor;}&:focus{outline:none;}&:hover{text-decoration:none;}&:disabled{cursor:default;opacity:50%;pointer-events:none;}", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", ""], FontStyle, BoxSizingStyle, function (props) {
return props.size === "small" && styled.css(["height:24px;"]);
}, function (props) {
return props.size === "big" && styled.css(["height:40px;"]);
}, function (props) {
return (props.variant === "primary" || props.variant === "contained") && styled.css(["padding:0 16px;background-color:var(--color-primary);border-radius:var(--ac-br-rounded);color:var(--page-paper-main);&:hover,&:focus-visible{box-shadow:0 3px 6px -2px var(--color-primary-500);background-color:var(--color-primary-800);}&:active{box-shadow:0 4px 10px -2px var(--color-primary-600);background-color:var(--color-primary-800);}"]);
}, function (props) {
return (props.variant === "secondary" || props.variant === "outlined") && styled.css(["padding:0 16px;background-color:transparent;border-radius:var(--ac-br-rounded);border:solid 1px var(--color-theme-700);color:var(--color-theme-700);&:hover,&:focus-visible{border-color:var(--color-primary);color:var(--color-primary);}&:active{border-color:var(--color-primary);color:var(--color-primary);background-color:var(--color-primary-200);}"]);
}, function (props) {
return props.variant === "dark transparent" && styled.css(["padding:0 8px;background-color:rgba(0,0,0,0.5);border-radius:var(--ac-br-6);color:var(--only-white);&:hover,&:focus-visible{background-color:rgba(0,0,0,0.85);}&:active{background-color:var(--only-black);}"]);
}, function (props) {
return (props.variant === "tertiary" || props.variant === "text colored") && styled.css(["padding:0 8px;background-color:transparent;border-radius:var(--ac-br-6);color:var(--color-primary);&:hover,&:focus-visible{background-color:var(--color-primary-200);}&:active{background-color:var(--color-primary-300);}"]);
}, function (props) {
return (props.variant === "option" || props.variant === "text gray") && styled.css(["padding:0 8px;background-color:transparent;border-radius:var(--ac-br-6);color:var(--color-theme-700);&:hover,&:focus-visible{background-color:var(--color-theme-300);color:var(--color-theme-900);}&:active{background-color:var(--color-theme-400);color:var(--color-theme-900);}"]);
}, function (props) {
return props.variant === "circle raised" && styled.css(["padding:0 6px;background-color:transparent;border-radius:var(--ac-br-rounded);color:var(--color-theme-700);&:hover,&:focus-visible{background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary);}&:active{background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary-hover);}"]);
}, function (props) {
return props.iconOnly && styled.css(["display:inline-flex;justify-content:center;align-items:center;padding:0;width:32px;", ";", " ", ""], (props.size === "small" || props.size === "big") && styled.css(["border-radius:var(--ac-br-rounded);"]), props.size === "small" && styled.css(["width:24px;"]), props.size === "big" && styled.css(["width:40px;"]));
}, function (props) {
return (props.variant === "primary" || props.variant === "contained" || props.variant === "secondary" || props.variant === "outlined") && styled.css([".c-btn__elements__element:first-child svg{margin-left:-6px;}.c-btn__elements__element:last-child svg{margin-right:-6px;}", ""], (props.size === "small" || props.size === "big") && styled.css(["border-radius:var(--ac-br-rounded);"]));
}, function (props) {
return (props.variant === "tertiary" || props.variant === "text colored" || props.variant === "option" || props.variant === "text gray" || props.variant === "dark transparent") && styled.css([".c-btn__elements__element:first-child svg{margin-left:-4px;}.c-btn__elements__element:last-child svg{margin-right:-4px;}", " ", ""], props.size === "small" && styled.css(["border-radius:var(--ac-br-4);"]), props.size === "big" && styled.css(["border-radius:var(--ac-br-8);"]));
}, function (props) {
return props.active && styled.css(["", " ", " ", " ", " ", " ", ""], (props.variant === "primary" || props.variant === "contained") && styled.css(["background-color:var(--color-primary-800);"]), (props.variant === "secondary" || props.variant === "outlined") && styled.css(["border-color:var(--color-primary);color:var(--color-primary);"]), props.variant === "dark transparent" && styled.css(["background-color:var(--only-black);"]), props.variant === "circle raised" && styled.css(["background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary-hover);"]), (props.variant === "tertiary" || props.variant === "text colored") && styled.css(["background-color:var(--color-primary-200);"]), (props.variant === "option" || props.variant === "text gray") && styled.css(["color:var(--color-primary);&:hover,&:focus-visible{color:var(--color-primary);}", ""], props.children instanceof Array && styled.css(["background-color:var(--color-theme-300);"])));
});
StyledButton$2.displayName = "StyledButton";
var StyledButtonElements = styled__default["default"].span.withConfig({
displayName: "Styles__StyledButtonElements",
componentId: "sc-vi1kcr-1"
})(["display:flex;align-items:center;"]);
StyledButtonElements.displayName = "StyledButtonElements";
var StyledButtonElement = styled__default["default"].span.withConfig({
displayName: "Styles__StyledButtonElement",
componentId: "sc-vi1kcr-2"
})(["display:inline-flex;svg{margin:0 4px;}"]);
StyledButtonElement.displayName = "StyledButtonElement";
var _excluded$4M = ["children", "active", "variant", "size", "className"];
/**
* @component Button
* @description
* Button component is used to trigger an action or event, such as submitting a form,
* opening a Dialog, canceling an action, or performing a delete operation.
*
* @prop {variant} - adds unique look and feel to button.
* @prop {size} - controls the size of a button.
* @prop {active} - adds active/pressed state to a button.
*
* @example
* return (
* <Button className="mr-2" variant="primary" size="big">
* Save
* </Button>
* )
* @see
* https://system.activecollab.com/?path=/story/components-button-indicators-button--button
* https://design.activecollab.com/docs/components/button
*/
var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var children = _ref.children,
_ref$active = _ref.active,
active = _ref$active === void 0 ? false : _ref$active,
_ref$variant = _ref.variant,
variant = _ref$variant === void 0 ? "contained" : _ref$variant,
_ref$size = _ref.size,
size = _ref$size === void 0 ? "medium" : _ref$size,
className = _ref.className,
args = _objectWithoutProperties(_ref, _excluded$4M);
return /*#__PURE__*/React__default["default"].createElement(StyledButton$2, _extends({
className: classNames__default["default"]("c-btn", className, {
"c-btn--contained": variant === "primary" || variant === "contained",
"c-btn--outlined": variant === "secondary" || variant === "outlined",
"c-btn--text_colored": variant === "tertiary" || variant === "text colored",
"c-btn--text_gray": variant === "option" || variant === "text gray",
"c-btn--dark_transparent": variant === "dark transparent",
"c-btn--circle-raised": variant === "circle raised",
"c-btn--big": size === "big",
"c-btn--small": size === "small",
"c-btn--icon-only": children instanceof Object && !(children instanceof Array)
}),
iconOnly: children instanceof Object && !(children instanceof Array),
variant: variant,
active: active,
size: size,
ref: ref,
"aria-pressed": active,
role: "button"
}, args), children instanceof Array ? /*#__PURE__*/React__default["default"].createElement(StyledButtonElements, {
className: "c-btn__elements"
}, children.map(function (value, index) {
return value ? /*#__PURE__*/React__default["default"].createElement(StyledButtonElement, {
className: "c-btn__elements__element",
key: index
}, value) : null;
})) : children);
});
Button.displayName = "Button";
var StyledGlobalAddButton = styled__default["default"](Button).withConfig({
displayName: "Styles__StyledGlobalAddButton",
componentId: "sc-7mpctc-0"
})(["svg{fill:var(--color-theme-100);}&:hover svg{transform:rotate(90deg);transition:ease 0.3s;}"]);
StyledGlobalAddButton.displayName = "StyledGlobalAddButton";
var GradientDefs = function GradientDefs(_ref) {
var _match$1$match, _parts$find;
var gradient = _ref.gradient;
if (!gradient) return null;
var match = gradient.match(/linear-gradient\((.*)\)$/);
if (!match) return null;
var parts = (_match$1$match = match[1].match(/(#[0-9a-fA-F]{3,6}|rgba?\([^)]*\)|[0-9.]+deg)/g)) !== null && _match$1$match !== void 0 ? _match$1$match : [];
var anglePart = (_parts$find = parts.find(function (p) {
return /\d+deg/.test(p);
})) !== null && _parts$find !== void 0 ? _parts$find : "0deg";
var angle = Number(anglePart.replace("deg", "")) || 0;
var colors = parts.filter(function (p) {
return /^#|rgb/.test(p);
});
if (colors.length < 2) return null;
return /*#__PURE__*/React__default["default"].createElement("defs", null, /*#__PURE__*/React__default["default"].createElement("linearGradient", {
id: "icon-gradient",
"data-testid": "icon-gradient",
gradientTransform: "rotate(".concat(angle, ")")
}, colors.map(function (color, i) {
return /*#__PURE__*/React__default["default"].createElement("stop", {
key: i,
offset: "".concat(i / (colors.length - 1) * 100, "%"),
stopColor: color
});
})));
};
var _excluded$4L = ["gradient"];
/**
* @component AddCrossTinyIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <AddCrossTinyIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <AddCrossTinyIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var AddCrossTinyIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4L);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "AddCrossTinyIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M12 4a1 1 0 011 1v6h6a1 1 0 010 2h-6v6a1 1 0 01-2 0l-.001-6H5a1 1 0 010-2h6V5a1 1 0 011-1z",
fillRule: "evenodd"
}));
});
AddCrossTinyIcon.displayName = "AddCrossTinyIcon";
var AddCrossTinyIcon$1 = AddCrossTinyIcon;
var _excluded$4K = ["className", "disabled"];
var GlobalAddButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var className = _ref.className,
_ref$disabled = _ref.disabled,
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
rest = _objectWithoutProperties(_ref, _excluded$4K);
return /*#__PURE__*/React__default["default"].createElement(StyledGlobalAddButton, _extends({
ref: ref,
variant: "contained",
disabled: disabled,
className: classNames__default["default"]("c-global-add-btn", className)
}, rest), /*#__PURE__*/React__default["default"].createElement(AddCrossTinyIcon$1, null));
});
GlobalAddButton.displayName = "GlobalAddButton";
var StyledButtonGroup$1 = styled__default["default"].div.withConfig({
displayName: "Styles__StyledButtonGroup",
componentId: "sc-1vw4iq2-0"
})(["", " ", " ", " button{&:disabled{opacity:1;color:var(--color-theme-500);pointer-events:none;}&:first-child:not(:last-child){svg{margin-right:-4px;}", " ", "}&:last-child:not(:first-child){svg{margin-left:-4px;}", " ", "}&:not(:first-child):not(:last-child){", " ", "}}svg{", "}"], {
"display": "flex",
"flexDirection": "row"
}, FontStyle, BoxSizingStyle, {
"marginRight": "-1px",
"borderTopRightRadius": "0px",
"borderBottomRightRadius": "0px"
}, function (props) {
return props.$invalid && styled.css(["border-top-color:var(--red-alert) !important;border-bottom-color:var(--red-alert) !important;border-left-color:var(--red-alert) !important;"]);
}, {
"borderTopLeftRadius": "0px",
"borderBottomLeftRadius": "0px"
}, function (props) {
return props.$invalid && styled.css(["border-top-color:var(--red-alert) !important;border-bottom-color:var(--red-alert) !important;border-right-color:var(--red-alert) !important;"]);
}, {
"marginRight": "-1px",
"borderRadius": "0px"
}, function (props) {
return props.$invalid && styled.css(["border-top-color:var(--red-alert) !important;border-bottom-color:var(--red-alert) !important;"]);
}, {
"fill": "currentColor",
"color": "var(--color-theme-900)"
});
StyledButtonGroup$1.displayName = "StyledButtonGroup";
var _excluded$4J = ["children", "className", "invalid"];
var ButtonGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var children = _ref.children,
className = _ref.className,
invalid = _ref.invalid,
rest = _objectWithoutProperties(_ref, _excluded$4J);
return /*#__PURE__*/React__default["default"].createElement(StyledButtonGroup$1, _extends({
ref: ref,
className: classNames__default["default"]("c-btn-group", className),
$invalid: invalid
}, rest), children);
});
ButtonGroup.displayName = "ButtonGroup";
var StyledList$1 = styled__default["default"].ul.withConfig({
displayName: "Styles__StyledList",
componentId: "sc-dv1w0m-0"
})(["list-style-type:none;margin:0;padding:0;"]);
StyledList$1.displayName = "StyledList";
var StyledListItem$1 = styled__default["default"].li.withConfig({
displayName: "Styles__StyledListItem",
componentId: "sc-dv1w0m-1"
})(["", " ", " display:flex;flex-direction:row;align-items:center;cursor:pointer;padding:0 1rem;margin:0.25rem 0;font-size:0.875rem;user-select:none;color:var(--color-theme-900);line-height:28px;> svg:first-child{margin-right:8px;}&:hover,&:focus-visible{background-color:var(--color-theme-200);outline:none;}"], BoxSizingStyle, FontStyle);
StyledListItem$1.displayName = "StyledListItem";
var StyledListSeparator$1 = styled__default["default"].div.withConfig({
displayName: "Styles__StyledListSeparator",
componentId: "sc-dv1w0m-2"
})(["border-top:1px solid var(--border-primary);margin:12px 16px;height:1px;"]);
StyledListSeparator$1.displayName = "StyledListSeparator";
var _excluded$4I = ["children", "className"];
var ListItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var children = _ref.children,
className = _ref.className,
props = _objectWithoutProperties(_ref, _excluded$4I);
return /*#__PURE__*/React__default["default"].createElement(StyledListItem$1, _extends({
className: classNames__default["default"]("c-list-item", className),
ref: ref,
tabIndex: 0
}, props), children);
});
ListItem.displayName = "ListItem";
var _excluded$4H = ["className"];
var ListSeparator = function ListSeparator(_ref) {
var className = _ref.className,
props = _objectWithoutProperties(_ref, _excluded$4H);
return /*#__PURE__*/React__default["default"].createElement(StyledListSeparator$1, _extends({
className: classNames__default["default"]("c-list-separator", className)
}, props));
};
ListSeparator.displayName = "ListSeparator";
var _excluded$4G = ["children", "className"];
var _List = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var children = _ref.children,
className = _ref.className,
props = _objectWithoutProperties(_ref, _excluded$4G);
return /*#__PURE__*/React__default["default"].createElement(StyledList$1, _extends({
className: className,
ref: ref,
tabIndex: -1
}, props), children);
});
_List.displayName = "List";
// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/34757
var List = Object.assign({}, _List, {
Item: ListItem,
Separator: ListSeparator
});
var StyledNavElement = styled__default["default"].nav.withConfig({
displayName: "Styles__StyledNavElement",
componentId: "sc-rxaesd-0"
})(["", " ", " ", " ", ""], {
"width": "100%"
}, {
"overflow": "hidden"
}, FontStyle, BoxSizingStyle);
StyledNavElement.displayName = "StyledNavElement";
var StyledListWrapper = styled__default["default"].div.withConfig({
displayName: "Styles__StyledListWrapper",
componentId: "sc-rxaesd-1"
})(["", ""], {
"display": "inline-block"
});
StyledListWrapper.displayName = "StyledListWrapper";
var StyledOList = styled__default["default"].ol.withConfig({
displayName: "Styles__StyledOList",
componentId: "sc-rxaesd-2"
})(["", " ", " ", " ", " ", " ", ""], {
"display": "flex"
}, {
"alignItems": "flex-start"
}, {
"alignItems": "center"
}, {
"listStyleType": "none"
}, {
"padding": "0px"
}, {
"margin": "0px"
});
StyledOList.displayName = "StyledOList";
var StyledMenuList = styled__default["default"](List).withConfig({
displayName: "Styles__StyledMenuList",
componentId: "sc-rxaesd-3"
})(["", ""], {
"paddingTop": "0.5rem",
"paddingBottom": "0.5rem"
});
StyledMenuList.displayName = "StyledMenuList";
var StyledBreadcrumbListItem = styled__default["default"].li.withConfig({
displayName: "Styles__StyledBreadcrumbListItem",
componentId: "sc-rxaesd-4"
})(["", " ", ""], {
"display": "flex"
}, {
"flexShrink": "0"
});
StyledBreadcrumbListItem.displayName = "StyledBreadcrumbListItem";
var layers = {
cloud: 100000,
skyscraper: 1300,
tower: 1200,
house: 1000
};
var colors$1 = {
yellow: {
name: "Yellow",
color: "#FDF196",
darker: "#948D5D",
lighter: "#EBD429"
},
orange: {
name: "Orange",
color: "#FBBB75",
darker: "#916C43",
lighter: "#E99841"
},
beige: {
name: "Beige",
color: "#EAC2AD",
darker: "#877064",
lighter: "#B98A72"
},
pink: {
name: "Pink",
color: "#FBD6E7",
darker: "#917C86",
lighter: "#E4A1C0"
},
coral: {
name: "Coral",
color: "#FF9C9C",
darker: "#945A5A",
lighter: "#DB4545"
},
purpleDirty: {
name: "Purple dirty",
color: "#C49CB6",
darker: "#715A69",
lighter: "#B16E9A"
},
purple: {
name: "Purple",
color: "#BEACF9",
darker: "#6E6390",
lighter: "#9B86DF"
},
blueAqua: {
name: "Blue aqua",
color: "#BDF7FD",
darker: "#6D8F92",
lighter: "#7BDDE7"
},
bluePale: {
name: "Blue pale",
color: "#BEEAFF",
darker: "#6E8794",
lighter: "#92BFD4"
},
blueSky: {
name: "Blue sky",
color: "#A0CBFD",
darker: "#5C7592",
lighter: "#568CCB"
},
turquoise: {
name: "Turquoise",
color: "#B9E4E0",
darker: "#6B8482",
lighter: "#70BFB8"
},
greenPale: {
name: "Green pale",
color: "#C3E799",
darker: "#718658",
lighter: "#80C333"
},
greenOliveDrab: {
name: "Green olive drab",
color: "#98B57C",
darker: "#647157",
lighter: "#819F65"
},
graySilver: {
name: "Gray silver",
color: "#DDDDDD",
darker: "#808080",
lighter: "#ACACAC"
},
gray: {
name: "Gray",
color: "#CACACA",
darker: "#757575",
lighter: "#7D7D7D"
},
greenSuccess: {
name: "Green success",
color: "#64CD93"
},
redAlert: {
name: "Red alert",
color: "#ED6161"
},
yellowWarning: {
name: "Yellow warning",
color: "#FFCC6B"
}
};
var aiColors = {
aiGradient: {
name: "AI Gradient",
color: "linear-gradient(135deg, #4da2ed, #9f69e5, #ec43d8, #f72222)",
lighter: "linear-gradient(135deg,rgba(77, 162, 237, 0.1),rgba(159, 105, 229, 0.1),rgba(236, 67, 216, 0.1),rgba(230, 10, 10, 0.1))"
}
};
var currencyMultiplier = {
k: 1000,
m: 1000000,
b: 1000000000,
t: 1000000000000
};
var fixedDecimalSpaces = function fixedDecimalSpaces(num, fixed) {
fixed = fixed || 0;
fixed = Math.pow(10, fixed);
var parts = num.toString().split(".");
if (parts.length > 1 && parseInt(parts[1]) > fixed) {
return Math.floor(num * fixed) / fixed;
}
return Math.round(num * fixed) / fixed;
};
var getNumberFromString = function getNumberFromString(number) {
var thousandSeparator = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ",";
var decimalSeparator = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ".";
if (typeof number === "string" && number === "") {
return NaN;
}
if (!isNaN(Number(number)) || typeof number === "number") {
return Number(number);
}
if (decimalSeparator === ",") {
var parts = number.split(decimalSeparator);
var result = 0;
if (parts.length === 2) {
result = parts[0] ? parseFloat(String(parts[0]).replaceAll(thousandSeparator, "")) : 0;
if (result < 0) {
result -= parts[1] ? parseFloat(String(parts[1])) / Math.pow(10, parts[1].length) : 0;
} else {
result += parts[1] ? parseFloat(String(parts[1])) / Math.pow(10, parts[1].length) : 0;
}
return result;
}
if (parts.length === 1) {
result = parseFloat(String(parts[0]).replaceAll(thousandSeparator, ""));
return result;
}
return 0;
} else {
return parseFloat(String(number).replaceAll(thousandSeparator, ""));
}
};
/**
* @function formatNumber
* @description
* Formats a number or string into a human-readable format with options for thousand separators,
* decimal precision, and shortening the number using suffixes (K, M, B, T).
* It can handle negative numbers and optionally trim decimals and set number of decimal places based on the configuration.
*
* @param {string | number} n - The number or string to be formatted.
* @param {"," | "." | " " | ""} [thousandSeparator=","] - The character to use as a thousand separator.
* @param {"," | "."} [decimalSeperator="."] - The character to use as a decimal separator.
* @param {boolean} [trimDecimals=true] - Whether to trim decimals to the specified number of decimal spaces.
* @param {number} [decimalSpaces=2] - The number of decimal spaces to keep in the formatted output.
* @param {"long" | "short"} [format="long"] - The format type, either "long" for full numbers or "short" for shortened numbers with suffixes.
* @param {number} [shortenThreshold=1000] - The minimum numeric value at which the number should be shortened
* using suffixes. Numbers below this threshold will always be shown in long format.
*
* @returns {string} - The formatted number as a string with separators and potentially with decimals.
*
* @example
* formatNumber(1500) // "1,500.00"
* formatNumber(1500000, ",", ".", true, 2, "short") // "1.5M"
*/
var formatNumber = function formatNumber(n) {
var thousandSeparator = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ",";
var decimalSeperator = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ".";
var trimDecimals = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
var decimalSpaces = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 2;
var format = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : "long";
var shortenThreshold = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : 1000;
if (n === undefined || n === null) return "";
var number = getNumberFromString(n, thousandSeparator, decimalSeperator);
if (isNaN(number)) {
return "";
}
var isNegative = number < 0;
var absoluteNumber = Math.abs(number);
var suffixes = ["", "K", "M", "B", "T"];
var scale = 0;
var shouldShorten = absoluteNumber >= shortenThreshold && format === "short";
while (shouldShorten && scale < suffixes.length - 1 && absoluteNumber >= 1000) {
absoluteNumber /= 1000;
scale++;
}
var formattedNum = scale === 0 ? fixedDecimalSpaces(absoluteNumber, decimalSpaces) : parseFloat(absoluteNumber.toFixed(1));
if (formattedNum === 1000 && scale > 0 && scale < 4) {
formattedNum = 1;
scale++;
}
var result = numberWithSeparator(trimDecimals ? formattedNum : formattedNum.toFixed(decimalSpaces), thousandSeparator, decimalSeperator);
return isNegative ? "-".concat(result).concat(suffixes[scale]) : "".concat(result).concat(suffixes[scale]);
};
var numberWithSeparator = function numberWithSeparator(x) {
var thousandSeparator = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ",";
var decimalSeparator = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ".";
var format = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
if (!format) {
return x;
}
var parts = x.toString().split(".");
parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, thousandSeparator);
return parts.join(decimalSeparator);
};
/**
* @function formatCurrency
* @description
* Formats a number or string as a currency string with options for thousand separators,
* decimal precision, currency code, currency code position, and the use of suffixes (K, M, B, T) if needed.
* It can handle negative values and supports customization of the currency code and its position.
*
* @param {string | number} n - The number or string to be formatted as currency.
* @param {"," | "." | " " | ""} [thousandSeparator=","] - The character to use as a thousand separator.
* @param {"," | "."} [decimalSeperator="."] - The character to use as a decimal separator.
* @param {boolean} [trimDecimals=false] - Whether to trim decimals to the specified number of decimal spaces.
* @param {number} [decimalSpaces=2] - The number of decimal spaces to keep in the formatted output.
* @param {"long" | "short"} [format="long"] - The format type, either "long" for full numbers or "short" for shortened numbers with suffixes.
* @param {string} [currencyCode=""] - The currency code to append or prepend to the formatted number.
* @param {"right" | "left"} [currencyCodePosition="right"] - The position of the currency code relative to the formatted number.
*
* @returns {string} - The formatted currency string, including the currency code if provided.
*
* @example
* formatCurrency(1500, ",", ".", false, 2, "long", "USD", "right") // "1,500.00 USD"
* formatCurrency(1500000, ",", ".", true, 2, "short", "JPY", "left") // "JPY 1.5M"
*/
var formatCurrency = function formatCurrency(n) {
var thousandSeparator = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ",";
var decimalSeperator = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ".";
var trimDecimals = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
var decimalSpaces = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 2;
var format = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : "long";
var currencyCode = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : "";
var currencyCodePosition = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : "right";
var formattedNum = formatNumber(n, thousandSeparator, decimalSeperator, trimDecimals, decimalSpaces, format, 10000);
if (!currencyCode) {
return formattedNum;
}
return currencyCodePosition === "right" ? "".concat(formattedNum, " ").concat(currencyCode) : "".concat(currencyCode, " ").concat(formattedNum);
};
var validateStopwatchTime = function validateStopwatchTime(value) {
return /^([0-9]{0,2})?(((:([0-5][0-9])?)|(:[0-5]?))|(\.[0-9]{0,2})|(,[0-9]{0,2}))?$/g.test(value);
};
var validateTimeInput = function validateTimeInput(value, withLeadingZero) {
if (withLeadingZero) {
return /^(([0-9][0-9]?|[1-9][0-9]{2,8})?(([:,.][0-5][0-9]?)|([:,.][0-5]?)|(\.[0-9]{1,2})|(,[0-9]{1,2}))?)$/.test(value);
} else {
return /^(([1-9][0-9]*|0)?(([:,.][0-5][0-9]?)|([:,.][0-5]?)|(\.[0-9]{1,2})|(,[0-9]{1,2}))?)$/.test(value);
}
};
var validateNumberInput = function validateNumberInput(value, disableMacros, decimalSeparator, decimalLength) {
var limit = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 12;
if (value.startsWith("00")) {
return false;
}
var numericInput = disableMacros ? value : value.replace(/([0-9.]+)([kmbtKMBT])/, function (_, num, unit) {
return (parseFloat(num) * currencyMultiplier[unit.toLowerCase()]).toString();
});
var regexString = "^(-?\\d{0,".concat(limit, "}(?:\\").concat(decimalSeparator, "\\d{0,").concat(decimalLength, "})?)?$");
return new RegExp(regexString).test(numericInput);
};
var isValidUrl = function isValidUrl(string) {
try {
new URL(string);
return true;
} catch (_) {
return false;
}
};
function setRef(ref, value) {
if (typeof ref === "function") {
ref(value);
} else if (ref) {
ref.current = value;
}
}
function useForkRef(refA, refB) {
return React.useMemo(function () {
return function (refValue) {
setRef(refA, refValue);
setRef(refB, refValue);
};
}, [refA, refB]);
}
var useResizeObserver = function useResizeObserver(ref) {
var _useState = React.useState(),
_useState2 = _slicedToArray(_useState, 2),
dimensions = _useState2[0],
setDimensions = _useState2[1];
React.useEffect(function () {
var observeTarget = ref === null || ref === void 0 ? void 0 : ref.current;
var resizeObserver = new ResizeObserver__default["default"](function (entries) {
entries.forEach(function (entry) {
setDimensions(entry.contentRect);
});
});
observeTarget && resizeObserver.observe(observeTarget);
return function () {
observeTarget && resizeObserver.unobserve(observeTarget);
};
}, [ref]);
return dimensions;
};
var useResizeObserver$1 = useResizeObserver;
/**
* @function formatHours
* @description
* Formats a decimal number representing hours into a formatted string (HH:MM) or a short form if needed.
* The input can be a number, string, or undefined. It handles various formats and can optionally add a
* leading zero to the hours component. With the new "format" argument, if set to "short" and the value is
* greater than or equal to 1000, it will return a shortened format (e.g., 1K) similar to formatNumber.
*
* @param {number | string | undefined} num - The input representing the hours.
* @param {boolean} [withLeadingZeroHours=false] - Whether to add a leading zero to the hours part.
* @param {boolean} [trimZeroMinutes=false] - Whether to remove minutes if they are zero.
* @param {"long" | "short"} [format="long"] - The format type, either "long" for full numbers or "short" for abbreviated output.
*
* @returns {string} - A formatted time string or a shortened string.
*
* @example
* formatHours(1.5) // "1:30"
* formatHours("3.5", true) // "03:30"
* formatHours(1500, false, false, "short") // "1K" (using formatNumber)
*/
var formatHours = function formatHours(num) {
var withLeadingZeroHours = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
var trimZeroMinutes = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
var format = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : "long";
// Handle the explicit zero case.
if (num === 0 || num === "0") {
return trimZeroMinutes ? "0" : withLeadingZeroHours ? "00:00" : "0:00";
}
if (!num) {
return "";
}
// If the input is in colon format, process it as before.
if (typeof num === "string" && num.indexOf(":") >= 0) {
// eslint-disable-next-line prefer-const
var _num$split = num.split(":"),
_num$split2 = _slicedToArray(_num$split, 2),
_hours = _num$split2[0],
_minutes = _num$split2[1];
if (_minutes && _minutes.length === 1 && Number(_minutes) < 10) {
_minutes = "".concat(Number(_minutes), "0");
}
if (_hours && _minutes) {
if (trimZeroMinutes && _minutes === "00") {
return withLeadingZeroHours ? withLeadingZero(_hours) : String(Number(_hours));
}
return withLeadingZeroHours ? "".concat(withLeadingZero(_hours), ":").concat(_minutes) : "".concat(_hours, ":").concat(_minutes);
} else if (_hours && !_minutes) {
return withLeadingZeroHours ? "".concat(withLeadingZero(_hours), ":00") : "".concat(_hours, ":00");
} else if (!_hours && _minutes) {
return withLeadingZeroHours ? "00:".concat(_minutes) : "0:".concat(_minutes);
} else if (!_hours && !_minutes) {
return withLeadingZeroHours ? "00:00" : "0:00";
}
return withLeadingZeroHours ? "00:".concat(_minutes) : "0:".concat(_minutes);
}
// Replace comma with dot if needed.
if (typeof num === "string" && num.indexOf(",") >= 0) {
num = num.replace(",", ".");
}
var input = typeof num === "string" ? parseFloat(num) : num;
// Use short formatting if specified and the value is >= 1000.
if (format === "short" && input >= 1000) {
return formatNumber(input, ",", ".", true, 2, "short");
}
// For whole numbers.
if (!isDecimal(input)) {
if (trimZeroMinutes) {
return withLeadingZeroHours ? withLeadingZero(input) : String(Number(input));
}
return withLeadingZeroHours ? "".concat(withLeadingZero(input), ":00") : "".concat(input, ":00");
}
// Process decimal hours.
var decimal = input.toFixed(2);
var time = decimal.toString().split(".");
var hours = time[0];
if (withLeadingZeroHours) {
hours = withLeadingZero(hours);
}
var minutes = time[1];
var minutesFormatted = Math.round(parseInt(minutes, 10) / 100 * 60);
if (trimZeroMinutes && minutesFormatted === 0) {
return hours;
}
return "".concat(hours, ":").concat(withLeadingZero(minutesFormatted));
};
var withLeadingZero = function withLeadingZero(num) {
var size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
var s = "".concat(num);
while (s.length < size) s = "0" + s;
return s;
};
var isDecimal = function isDecimal(num) {
return !Number.isInteger(num);
};
var isValidTime = function isValidTime(time) {
return time === undefined || /^([01]\d|2[0-3]):([0-5]\d)$/.test(time);
};
var StyledIconButton$1 = styled__default["default"](Button).withConfig({
displayName: "Styles__StyledIconButton",
componentId: "sc-1teza2f-0"
})(["display:inline-flex;justify-content:center;align-items:center;padding:0;width:32px;", " ", ""], function (_ref) {
var size = _ref.size;
return size === "small" && styled.css(["width:24px;svg{width:18px;height:18px;}"]);
}, function (_ref2) {
var size = _ref2.size;
return size === "big" && styled.css(["width:40px;"]);
});
var _excluded$4F = ["children", "className", "variant", "size", "active"];
// eslint-disable-next-line @typescript-eslint/no-empty-interface
/**
* @component IconButton
* @description
* IconButton composes the Button component except that it renders only an icon.
* Since IconButton only renders an icon, you have to pass the aria-label prop,
* so screen readers can give meaning to the button.
*
* @props See Button props.
*
* @example
* return (
* <IconButton className="mr-2" variant="primary" size="medium" aria-label="Close dialog">
* <CloseIcon />
* </IconButton>
* )
* @see
* https://system.activecollab.com/?path=/story/components-button-indicators-button--icon-button
* https://design.activecollab.com/docs/components/button
*/
var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var children = _ref.children,
className = _ref.className,
variant = _ref.variant,
size = _ref.size,
active = _ref.active,
args = _objectWithoutProperties(_ref, _excluded$4F);
return /*#__PURE__*/React__default["default"].createElement(StyledIconButton$1, _extends({
className: className,
variant: variant,
size: size,
active: active,
ref: ref
}, args), children);
});
IconButton.displayName = "IconButton";
var _excluded$4E = ["gradient"];
/**
* @component AccessLogIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <AccessLogIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <AccessLogIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var AccessLogIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4E);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "AccessLogIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M8.127 13.646a.5.5 0 01.146.354v3H9.37a.5.5 0 010 1H7.773a.5.5 0 01-.5-.5V14a.5.5 0 01.854-.354z"
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M10.42 13.646a.5.5 0 01.353-.146h2a.5.5 0 01.5.5v3.5a.5.5 0 01-.5.5h-2a.5.5 0 01-.5-.5V14a.5.5 0 01.146-.354zm.853.854V17h1v-2.5h-1z"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M14.5 13.5a.5.5 0 00-.5.5v3.5a.5.5 0 00.5.5h2a.5.5 0 00.5-.5V16a.5.5 0 00-.5-.5H16a.5.5 0 000 1v.5h-1v-2.5h1.5a.5.5 0 000-1h-2z"
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M5 2h11.03L21 7.075V20a2 2 0 01-2 2H5a2 2 0 01-2-2V4a2 2 0 012-2zm10.19 2H5v16h14V7.891L15.19 4z"
}));
});
AccessLogIcon.displayName = "AccessLogIcon";
var AccessLogIcon$1 = AccessLogIcon;
var _excluded$4D = ["gradient"];
/**
* @component ActivityIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <ActivityIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <ActivityIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var ActivityIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4D);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "ActivityIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M6 4a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2H6zm0-2h12a4 4 0 014 4v12a4 4 0 01-4 4H6a4 4 0 01-4-4V6a4 4 0 014-4zm2.962 10.317a1 1 0 01-.949.684H5.76a1 1 0 010-2h1.532l1.772-5.317c.304-.912 1.594-.912 1.898 0l3.051 9.154 1.051-3.154a1 1 0 01.95-.684H18a1 1 0 010 2h-1.266l-1.772 5.316c-.304.912-1.594.912-1.898 0l-3.05-9.153-1.052 3.154z"
}), /*#__PURE__*/React__default["default"].createElement("path", {
stroke: "#F4F5F7",
strokeWidth: 0.1,
opacity: 0.01,
d: "M.05.05h23.9v23.9H.05z"
}));
});
ActivityIcon.displayName = "ActivityIcon";
var ActivityIcon$1 = ActivityIcon;
var _excluded$4C = ["gradient"];
/**
* @component AddCrossIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <AddCrossIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <AddCrossIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var AddCrossIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4C);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 10,
height: 10,
viewBox: "0 0 10 10",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "AddCrossIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M6 0v4h4v2H6v4H4V6H0V4h4V0h2z",
fillRule: "nonzero"
}));
});
AddCrossIcon.displayName = "AddCrossIcon";
var AddCrossIcon$1 = AddCrossIcon;
var _excluded$4B = ["gradient"];
/**
* @component ArchiveIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <ArchiveIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <ArchiveIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var ArchiveIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4B);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "ArchiveIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M3 5a2 2 0 012-2h14a2 2 0 012 2v3a2 2 0 01-2 2v9a2 2 0 01-2 2H7a2 2 0 01-2-2v-9a2 2 0 01-2-2V5zm4 5h10v9H7v-9zm12-2H5V5h14v3zm-4 4H9v2h6v-2z"
}));
});
ArchiveIcon.displayName = "ArchiveIcon";
var ArchiveIcon$1 = ArchiveIcon;
var _excluded$4A = ["gradient"];
/**
* @component ArrowBackMobileIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <ArrowBackMobileIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <ArrowBackMobileIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var ArrowBackMobileIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4A);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "ArrowBackMobileIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M14.293 4.222a1 1 0 011.492 1.327l-.078.087L9.343 12l6.364 6.364a1 1 0 01.078 1.327l-.078.087a1 1 0 01-1.327.078l-.087-.078-7.071-7.07a1 1 0 01-.078-1.328l.078-.087 7.07-7.071z"
}));
});
ArrowBackMobileIcon.displayName = "ArrowBackMobileIcon";
var ArrowBackMobileIcon$1 = ArrowBackMobileIcon;
var _excluded$4z = ["gradient"];
/**
* @component ArrowCollapseMultipleIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <ArrowCollapseMultipleIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <ArrowCollapseMultipleIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var ArrowCollapseMultipleIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4z);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "ArrowCollapseMultipleIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M12 15l4.72 4.461a.867.867 0 010 1.275.995.995 0 01-1.25.08l-.098-.08L12 17.549l-3.372 3.187a.993.993 0 01-1.349 0 .865.865 0 01-.079-1.19l.08-.085L12 15zm4.72-11.736a.867.867 0 010 1.275L12 9 7.28 4.539a.867.867 0 010-1.275.993.993 0 011.348 0L12 6.451l3.372-3.187a.993.993 0 011.349 0zM6 11h12a1 1 0 010 2H6a1 1 0 010-2z",
fillRule: "evenodd"
}));
});
ArrowCollapseMultipleIcon.displayName = "ArrowCollapseMultipleIcon";
var ArrowCollapseMultipleIcon$1 = ArrowCollapseMultipleIcon;
var _excluded$4y = ["gradient"];
/**
* @component ArrowDownLongIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <ArrowDownLongIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <ArrowDownLongIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var ArrowDownLongIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4y);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "ArrowDownLongIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M13 5v9h4l-5 5-5-5h4V5z",
fillRule: "evenodd"
}));
});
ArrowDownLongIcon.displayName = "ArrowDownLongIcon";
var ArrowDownLongIcon$1 = ArrowDownLongIcon;
var _excluded$4x = ["gradient"];
/**
* @component ArrowDownSmallIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <ArrowDownSmallIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <ArrowDownSmallIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var ArrowDownSmallIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4x);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 16,
height: 16,
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "ArrowDownSmallIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M10.248 6.843a.662.662 0 01.9 0 .578.578 0 010 .85L8 10.666 4.853 7.692a.578.578 0 010-.85.662.662 0 01.9 0L8 8.968l2.248-2.124z"
}));
});
ArrowDownSmallIcon.displayName = "ArrowDownSmallIcon";
var ArrowDownSmallIcon$1 = ArrowDownSmallIcon;
var _excluded$4w = ["gradient"];
/**
* @component ArrowDownIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <ArrowDownIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <ArrowDownIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var ArrowDownIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4w);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
xmlns: "http://www.w3.org/2000/svg",
width: 24,
height: 24,
"data-testid": "ArrowDownIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M15.372 10.264a.993.993 0 011.349 0 .867.867 0 010 1.275L12 16l-4.72-4.461a.867.867 0 010-1.275.993.993 0 011.348 0L12 13.451l3.372-3.187z"
}));
});
ArrowDownIcon.displayName = "ArrowDownIcon";
var ArrowDownIcon$1 = ArrowDownIcon;
var _excluded$4v = ["gradient"];
/**
* @component ArrowExpandeMultipleIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <ArrowExpandeMultipleIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <ArrowExpandeMultipleIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var ArrowExpandeMultipleIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4v);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "ArrowExpandeMultipleIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M16.72 15.264a.867.867 0 010 1.275L12 21l-4.72-4.461a.867.867 0 010-1.275.993.993 0 011.348 0L12 18.451l3.372-3.187a.993.993 0 011.349 0zM18 11a1 1 0 010 2H6a1 1 0 010-2h12zm-6-8l4.72 4.461a.867.867 0 010 1.275.995.995 0 01-1.25.08l-.098-.08L12 5.549 8.628 8.736a.993.993 0 01-1.349 0 .865.865 0 01-.079-1.19l.08-.085L12 3z",
fillRule: "evenodd"
}));
});
ArrowExpandeMultipleIcon.displayName = "ArrowExpandeMultipleIcon";
var ArrowExpandeMultipleIcon$1 = ArrowExpandeMultipleIcon;
var _excluded$4u = ["gradient"];
/**
* @component ArrowLeftBoxIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <ArrowLeftBoxIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <ArrowLeftBoxIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var ArrowLeftBoxIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4u);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "ArrowLeftBoxIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M8.92 15.59L6.33 13H16v-2H6.33l2.59-2.59L7.5 7l-5 5 5 5 1.42-1.41zM8 3v2h11v14H8v2h11a2 2 0 002-2V5c0-1.11-.89-2-2-2H8z",
fillRule: "evenodd"
}));
});
ArrowLeftBoxIcon.displayName = "ArrowLeftBoxIcon";
var ArrowLeftBoxIcon$1 = ArrowLeftBoxIcon;
var _excluded$4t = ["gradient"];
/**
* @component ArrowLeftIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <ArrowLeftIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <ArrowLeftIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var ArrowLeftIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4t);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "ArrowLeftIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M13.45 6.337l-5.657 5.657 5.657 5.657a1 1 0 101.414-1.414l-4.241-4.243 4.241-4.243a1 1 0 00-1.414-1.414z",
fillRule: "evenodd"
}));
});
ArrowLeftIcon.displayName = "ArrowLeftIcon";
var ArrowLeftIcon$1 = ArrowLeftIcon;
var _excluded$4s = ["gradient"];
/**
* @component ArrowRefreshIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <ArrowRefreshIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <ArrowRefreshIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var ArrowRefreshIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4s);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "ArrowRefreshIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M12 3a9 9 0 00-9 9H1l3 3.89L7 12H5a7 7 0 117 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42A8.896 8.896 0 0012 21a9 9 0 100-18z"
}));
});
ArrowRefreshIcon.displayName = "ArrowRefreshIcon";
var ArrowRefreshIcon$1 = ArrowRefreshIcon;
var _excluded$4r = ["gradient"];
/**
* @component ArrowRestoreIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <ArrowRestoreIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <ArrowRestoreIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var ArrowRestoreIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4r);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
xmlns: "http://www.w3.org/2000/svg",
width: 24,
height: 24,
"data-testid": "ArrowRestoreIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M17.026 19.796a9 9 0 01-12.294-3.294l-1.732 1 .653-4.87 4.543 1.87-1.732 1a7 7 0 102.562-9.563 6.944 6.944 0 00-3.248 4.254l-1.94-.52a8.896 8.896 0 014.188-5.466 9 9 0 019 15.589z",
clipRule: "evenodd"
}));
});
ArrowRestoreIcon.displayName = "ArrowRestoreIcon";
var ArrowRestoreIcon$1 = ArrowRestoreIcon;
var _excluded$4q = ["gradient"];
/**
* @component ArrowRightIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <ArrowRightIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <ArrowRightIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var ArrowRightIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4q);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "ArrowRightIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M10.914 6.337l5.657 5.657-5.657 5.657A1 1 0 019.5 16.237l4.241-4.243L9.5 7.751a1 1 0 011.414-1.414z",
fillRule: "evenodd"
}));
});
ArrowRightIcon.displayName = "ArrowRightIcon";
var ArrowRightIcon$1 = ArrowRightIcon;
var _excluded$4p = ["gradient"];
/**
* @component ArrowUpLongIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <ArrowUpLongIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <ArrowUpLongIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var ArrowUpLongIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4p);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "ArrowUpLongIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M13 19v-9h4l-5-5-5 5h4v9z",
fillRule: "evenodd"
}));
});
ArrowUpLongIcon.displayName = "ArrowUpLongIcon";
var ArrowUpLongIcon$1 = ArrowUpLongIcon;
var _excluded$4o = ["gradient"];
/**
* @component ArrowUpIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <ArrowUpIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <ArrowUpIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var ArrowUpIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4o);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
xmlns: "http://www.w3.org/2000/svg",
width: 24,
height: 24,
"data-testid": "ArrowUpIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M15.372 14.236a.993.993 0 001.349 0 .867.867 0 000-1.275L12 8.5l-4.72 4.461a.867.867 0 000 1.275.993.993 0 001.348 0L12 11.049l3.372 3.187z"
}));
});
ArrowUpIcon.displayName = "ArrowUpIcon";
var ArrowUpIcon$1 = ArrowUpIcon;
var _excluded$4n = ["gradient"];
/**
* @component AssignIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <AssignIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <AssignIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var AssignIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4n);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "AssignIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M12 2c.685 0 1.354.069 2.001.2v2.052a8 8 0 00-7.86 13.195 3.988 3.988 0 011.981-1.05A19.248 19.248 0 0112 16c1.292 0 2.585.133 3.877.398.76.156 1.444.525 1.983 1.048A7.97 7.97 0 0020 12c0-.69-.087-1.36-.252-2H21.8c.131.646.2 1.315.2 2a9.971 9.971 0 01-3.073 7.212l-.001.001-.056.053a10.057 10.057 0 01-1.61 1.24A9.953 9.953 0 0112 22a9.954 9.954 0 01-4.951-1.31l-.31-.184-.02-.013a10.02 10.02 0 01-1.634-1.27l-.012-.01A9.971 9.971 0 012 12C2 6.477 6.477 2 12 2zm0 16c-1.157 0-2.315.119-3.476.357a1.998 1.998 0 00-.831.385A7.958 7.958 0 0012 20a7.963 7.963 0 004.307-1.257 1.984 1.984 0 00-.832-.386A17.249 17.249 0 0012 18zm0-11a4 4 0 110 8 4 4 0 010-8zm0 2a2 2 0 100 4 2 2 0 000-4zm8-7v2h2v2h-2v2h-2V5.999L16 6V4l2-.001V2h2z",
fillRule: "evenodd"
}));
});
AssignIcon.displayName = "AssignIcon";
var AssignIcon$1 = AssignIcon;
var _excluded$4m = ["gradient"];
/**
* @component AttachmentIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <AttachmentIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <AttachmentIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var AttachmentIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4m);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "AttachmentIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M12.814 2.454l1.414 1.414-8.485 8.486a4 4 0 005.512 5.794l.144-.138 8.132-8.131a1.5 1.5 0 00-2.014-2.219l-.107.097-8.58 8.58-1.414-1.414 8.58-8.58a3.5 3.5 0 015.082 4.81l-.133.14-8.131 8.132A6 6 0 014.172 11.1l.156-.162 8.486-8.485z",
fillRule: "evenodd"
}));
});
AttachmentIcon.displayName = "AttachmentIcon";
var AttachmentIcon$1 = AttachmentIcon;
var _excluded$4l = ["gradient"];
/**
* @component BellOffSmallIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <BellOffSmallIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <BellOffSmallIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var BellOffSmallIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4l);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 12,
height: 12,
viewBox: "0 0 12 12",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "BellOffSmallIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M8 11v1H4v-1h4zM1.414.707l9.9 9.9-.707.707L9.293 10H2V5c0-.665.162-1.292.45-1.843L.706 1.414l.707-.707zm1.591 4.117L3 5v4h5.293l-5.09-5.09c-.11.286-.18.593-.198.914zM7 0v1.126c1.725.444 3 2.01 3 3.874v2.9l-1-1V5a3 3 0 00-2.824-2.995L6 2c-.546 0-1.058.146-1.499.4l-.726-.725A3.98 3.98 0 015 1.126L5 0h2z",
fillRule: "evenodd"
}));
});
BellOffSmallIcon.displayName = "BellOffSmallIcon";
var BellOffSmallIcon$1 = BellOffSmallIcon;
var _excluded$4k = ["gradient"];
/**
* @component BellOffIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <BellOffIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <BellOffIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var BellOffIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4k);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "BellOffIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M11 19c0 .6.4 1 1 1s1-.4 1-1h2c0 1.7-1.3 3-3 3s-3-1.3-3-3h2zM4.222 2.808l16.97 16.97-1.414 1.414L16.586 18H3v-3.9l.7-.2C4.5 13.6 5 12.8 5 12v-2c0-1.029.232-2.028.652-2.932L2.808 4.222l1.414-1.414zM12 1c1.44 0 2.696 1.014 2.97 2.51l.03.19c2.4 1.2 4 3.6 4 6.3v2c0 .8.5 1.6 1.3 1.9l.7.2v2.674l-3.909-3.907A4.121 4.121 0 0117 12v-2c0-1.9-1.1-3.7-2.9-4.5l-1-.5-.1-1.1c-.1-.5-.5-.9-1-.9s-.9.4-1 .9L10.9 5l-1 .5-.118.055-1.481-1.482c.224-.137.458-.262.699-.373.2-1.6 1.5-2.7 3-2.7zm2.586 15L7.198 8.613C7.068 9.06 7 9.527 7 10v2c0 1.4-.8 2.8-2 3.5v.5h9.586z",
fillRule: "evenodd"
}));
});
BellOffIcon.displayName = "BellOffIcon";
var BellOffIcon$1 = BellOffIcon;
var _excluded$4j = ["gradient"];
/**
* @component BillingIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <BillingIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <BillingIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var BillingIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4j);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "BillingIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__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 _excluded$4i = ["gradient"];
/**
* @component BudgetAlertIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <BudgetAlertIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <BudgetAlertIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var BudgetAlertIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4i);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "BudgetAlertIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M14 17v1h-4v-1h4zM13 5l.001 1.1A5.002 5.002 0 0117 11v5H7v-5a5.002 5.002 0 014-4.9V5h2zm-1 2a4 4 0 00-3.995 3.8L8 11v4h8v-4a4 4 0 00-3.8-3.995L12 7z",
fillRule: "nonzero"
}));
});
BudgetAlertIcon.displayName = "BudgetAlertIcon";
var BudgetAlertIcon$1 = BudgetAlertIcon;
var _excluded$4h = ["gradient"];
/**
* @component CalendarAddXIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <CalendarAddXIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <CalendarAddXIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var CalendarAddXIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4h);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "CalendarAddXIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M7 2v2h10V2h2v2h1a2 2 0 012 2v6h-2V9H4v11h8v2H4a2 2 0 01-2-2V6a2 2 0 012-2h1V2h2zm12 12v3h3v2h-3v3h-2v-3h-3v-2l3-.001V14h2zm-9.586-3.828l1.414 1.414L9.414 13l1.414 1.414-1.414 1.414L8 14.414l-1.413 1.414-1.414-1.414L6.585 13l-1.413-1.413 1.414-1.414L8 11.586l1.414-1.414z",
fillRule: "evenodd"
}));
});
CalendarAddXIcon.displayName = "CalendarAddXIcon";
var CalendarAddXIcon$1 = CalendarAddXIcon;
var _excluded$4g = ["gradient"];
/**
* @component CalendarImportIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <CalendarImportIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <CalendarImportIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var CalendarImportIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4g);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 18,
height: 18,
viewBox: "0 0 18 18",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "CalendarImportIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M5.25 1.5V3h7.5V1.5h1.5V3H15a1.5 1.5 0 011.5 1.5v3.75H15v-1.5H3V15h6v1.5H3A1.5 1.5 0 011.5 15V4.5A1.5 1.5 0 013 3h.75V1.5h1.5z"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M12.75 13.5v3h1.5v-3h2.25l-3-3-3 3h2.25z"
}));
});
CalendarImportIcon.displayName = "CalendarImportIcon";
var CalendarImportIcon$1 = CalendarImportIcon;
var _excluded$4f = ["gradient"];
/**
* @component CalendarIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <CalendarIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <CalendarIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var CalendarIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4f);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "CalendarIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M7 2v2h10V2h2v2h1a2 2 0 012 2v14a2 2 0 01-2 2H4a2 2 0 01-2-2V6a2 2 0 012-2h1V2h2zm13 7H4v11h16V9zm-10 2v4H6v-4h4z",
fillRule: "evenodd"
}));
});
CalendarIcon.displayName = "CalendarIcon";
var CalendarIcon$1 = CalendarIcon;
var _excluded$4e = ["gradient"];
/**
* @component CancelCrossIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <CancelCrossIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <CancelCrossIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var CancelCrossIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4e);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "CancelCrossIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M16.95 5.636l1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z",
fillRule: "evenodd"
}));
});
CancelCrossIcon.displayName = "CancelCrossIcon";
var CancelCrossIcon$1 = CancelCrossIcon;
var _excluded$4d = ["gradient"];
/**
* @component CaretLeftIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <CaretLeftIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <CaretLeftIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var CaretLeftIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4d);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 18,
height: 18,
viewBox: "0 0 18 18",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "CaretLeftIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M10 5v8L6 9l4-4z",
fillRule: "evenodd"
}));
});
CaretLeftIcon.displayName = "CaretLeftIcon";
var CaretLeftIcon$1 = CaretLeftIcon;
var _excluded$4c = ["gradient"];
/**
* @component CaretRightIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <CaretRightIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <CaretRightIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var CaretRightIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4c);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 18,
height: 18,
viewBox: "0 0 18 18",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "CaretRightIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M8 5v8l4-4-4-4z",
fillRule: "evenodd"
}));
});
CaretRightIcon.displayName = "CaretRightIcon";
var CaretRightIcon$1 = CaretRightIcon;
var _excluded$4b = ["gradient"];
/**
* @component ChatIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <ChatIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <ChatIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var ChatIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4b);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "ChatIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M20 4a3 3 0 013 3v9.2a3 3 0 01-3 3H7.794L1 23V7a3 3 0 013-3h16z",
fillRule: "evenodd"
}));
});
ChatIcon.displayName = "ChatIcon";
var ChatIcon$1 = ChatIcon;
var _excluded$4a = ["gradient"];
/**
* @component CheckIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <CheckIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <CheckIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var CheckIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4a);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "CheckIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M5.613 10.21l.094.083L10 14.585l8.293-8.292a1 1 0 011.497 1.32l-.083.094-9 9a1 1 0 01-1.414 0l-5-5a1 1 0 011.32-1.497z",
fillRule: "evenodd"
}));
});
CheckIcon.displayName = "CheckIcon";
var CheckIcon$1 = CheckIcon;
var _excluded$49 = ["gradient"];
/**
* @component CheckboxBlankTogglerIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <CheckboxBlankTogglerIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <CheckboxBlankTogglerIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var CheckboxBlankTogglerIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$49);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "CheckboxBlankTogglerIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm0 2a8 8 0 100 16 8 8 0 000-16zm3.607 5.707a1 1 0 010 1.414l-3.657 3.657a1 1 0 01-1.414 0L8.707 12.95a1 1 0 011.414-1.414l1.12 1.12 2.951-2.949a1 1 0 011.415 0z",
fillRule: "evenodd"
}));
});
CheckboxBlankTogglerIcon.displayName = "CheckboxBlankTogglerIcon";
var CheckboxBlankTogglerIcon$1 = CheckboxBlankTogglerIcon;
var _excluded$48 = ["gradient"];
/**
* @component CheckboxCircleArrowIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <CheckboxCircleArrowIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <CheckboxCircleArrowIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var CheckboxCircleArrowIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$48);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "CheckboxCircleArrowIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12c0-.338.017-.671.05-1h2.012A8 8 0 1012 4V2zm3.607 7.707a1 1 0 010 1.414l-3.657 3.657a1 1 0 01-1.414 0L8.707 12.95a1 1 0 111.414-1.414l1.12 1.12 2.951-2.949a1 1 0 011.415 0zM5 1l5 4-5 4V6H2V4h3V1z"
}));
});
CheckboxCircleArrowIcon.displayName = "CheckboxCircleArrowIcon";
var CheckboxCircleArrowIcon$1 = CheckboxCircleArrowIcon;
var _excluded$47 = ["gradient"];
/**
* @component CheckboxDocumentsIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <CheckboxDocumentsIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <CheckboxDocumentsIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var CheckboxDocumentsIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$47);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
xmlns: "http://www.w3.org/2000/svg",
width: 24,
height: 24,
"data-testid": "CheckboxDocumentsIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M5 4h10.19L19 7.891V20H5V4zm11.03-2H5a2 2 0 00-2 2v16a2 2 0 002 2h14a2 2 0 002-2V7.075L16.03 2zm.667 9.82a1.105 1.105 0 00.02-1.499.96.96 0 00-1.414-.021l-4.446 4.58-2.16-2.225a.96.96 0 00-1.414.021c-.385.42-.376 1.09.02 1.499l2.16 2.225c.776.8 2.012.8 2.788 0l4.446-4.58z",
clipRule: "evenodd"
}));
});
CheckboxDocumentsIcon.displayName = "CheckboxDocumentsIcon";
var CheckboxDocumentsIcon$1 = CheckboxDocumentsIcon;
var _excluded$46 = ["gradient"];
/**
* @component CheckboxIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <CheckboxIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <CheckboxIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var CheckboxIcon$2 = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$46);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 16,
height: 16,
viewBox: "0 0 16 16",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "CheckboxIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("g", {
fillRule: "evenodd"
}, /*#__PURE__*/React__default["default"].createElement("rect", {
stroke: "#8E8E8E",
x: 0.5,
y: 0.5,
width: 15,
height: 15,
rx: 2
}), /*#__PURE__*/React__default["default"].createElement("path", {
stroke: "#979797",
strokeWidth: 2,
d: "M12.243 5l-5.657 5.657-2.829-2.829"
})));
});
CheckboxIcon$2.displayName = "CheckboxIcon";
var CheckboxIcon$3 = CheckboxIcon$2;
var _excluded$45 = ["gradient"];
/**
* @component ChecklistSmallIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <ChecklistSmallIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <ChecklistSmallIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var ChecklistSmallIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$45);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 12,
height: 12,
viewBox: "0 0 12 12",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "ChecklistSmallIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M2.5 9a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm0 1a.5.5 0 100 1 .5.5 0 000-1zm8.5 0v1H5v-1h6zM2.5 5a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm0 1a.5.5 0 100 1 .5.5 0 000-1zM11 6v1H5V6h6zM2.5 1a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm0 1a.5.5 0 100 1 .5.5 0 000-1zM11 2v1H5V2h6z",
fillRule: "evenodd"
}));
});
ChecklistSmallIcon.displayName = "ChecklistSmallIcon";
var ChecklistSmallIcon$1 = ChecklistSmallIcon;
var _excluded$44 = ["gradient"];
/**
* @component ChecklistIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <ChecklistIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <ChecklistIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var ChecklistIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$44);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "ChecklistIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M5 16a3 3 0 110 6 3 3 0 010-6zm16 2a1 1 0 010 2H11a1 1 0 010-2h10zM5 18a1 1 0 100 2 1 1 0 000-2zm0-9a3 3 0 110 6 3 3 0 010-6zm16 2a1 1 0 010 2H11a1 1 0 010-2h10zM5 11a1 1 0 100 2 1 1 0 000-2zm0-9a3 3 0 110 6 3 3 0 010-6zm16 2a1 1 0 010 2H11a1 1 0 010-2h10zM5 4a1 1 0 100 2 1 1 0 000-2z",
fillRule: "evenodd"
}));
});
ChecklistIcon.displayName = "ChecklistIcon";
var ChecklistIcon$1 = ChecklistIcon;
var _excluded$43 = ["gradient"];
/**
* @component CircleMultipleIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <CircleMultipleIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <CircleMultipleIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var CircleMultipleIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$43);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "CircleMultipleIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M19.657 8.343A8 8 0 118.343 19.657 8 8 0 0119.657 8.343zm-9.9 1.414a6 6 0 108.486 8.486 6 6 0 00-8.486-8.486zM10 2a7.97 7.97 0 015.291 2H10a6 6 0 00-5.996 5.775L4 10v5.291A8 8 0 0110 2z",
fillRule: "evenodd"
}));
});
CircleMultipleIcon.displayName = "CircleMultipleIcon";
var CircleMultipleIcon$1 = CircleMultipleIcon;
var _excluded$42 = ["gradient"];
/**
* @component ClockAddIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <ClockAddIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <ClockAddIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var ClockAddIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$42);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "ClockAddIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10h-2a8 8 0 10-8 8v2C6.477 22 2 17.523 2 12zm17 2v3h3v2h-3v3h-2v-3.001L14 19v-2l3-.001V14h2zm-8-8v4.999L6 11v2h7V6h-2z",
fillRule: "evenodd"
}));
});
ClockAddIcon.displayName = "ClockAddIcon";
var ClockAddIcon$1 = ClockAddIcon;
var _excluded$41 = ["gradient"];
/**
* @component ClockDollarIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <ClockDollarIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <ClockDollarIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var ClockDollarIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$41);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "ClockDollarIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10h-2a8 8 0 10-8 8v2C6.477 22 2 17.523 2 12zm9-6v4.999L6 11v2h7V6h-2z"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M19 23h-2v-1h-2v-2h4v-1h-3a1 1 0 01-1-1v-3a1 1 0 011-1h1v-1h2v1h2v2h-4v1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1v1z"
}));
});
ClockDollarIcon.displayName = "ClockDollarIcon";
var ClockDollarIcon$1 = ClockDollarIcon;
var _excluded$40 = ["gradient"];
/**
* @component ClockSmallIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <ClockSmallIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <ClockSmallIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var ClockSmallIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$40);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 12,
height: 12,
viewBox: "0 0 12 12",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "ClockSmallIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M5.5.9a5.5 5.5 0 110 11 5.5 5.5 0 010-11zm0 1a4.5 4.5 0 100 9 4.5 4.5 0 000-9zM6 3v3h3v1H5V3h1z",
fillRule: "evenodd"
}));
});
ClockSmallIcon.displayName = "ClockSmallIcon";
var ClockSmallIcon$1 = ClockSmallIcon;
var _excluded$3$ = ["gradient"];
/**
* @component ClockStopwatchIndicatorIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <ClockStopwatchIndicatorIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <ClockStopwatchIndicatorIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var ClockStopwatchIndicatorIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3$);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "ClockStopwatchIndicatorIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm0 2a8 8 0 100 16 8 8 0 000-16zm1 2v7h-2V6h2zM19.586.172l4.242 4.242-1.414 1.414-4.242-4.242L19.586.172z"
}));
});
ClockStopwatchIndicatorIcon.displayName = "ClockStopwatchIndicatorIcon";
var ClockStopwatchIndicatorIcon$1 = ClockStopwatchIndicatorIcon;
var _excluded$3_ = ["gradient"];
/**
* @component ClockStopwatchSmallIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <ClockStopwatchSmallIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <ClockStopwatchSmallIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var ClockStopwatchSmallIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3_);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 12,
height: 12,
viewBox: "0 0 12 12",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "ClockStopwatchSmallIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M5.5.9a5.5 5.5 0 110 11 5.5 5.5 0 010-11zm0 1a4.5 4.5 0 100 9 4.5 4.5 0 000-9zm.515 1v4H5v-4h1.015zM9.797 0l2.152 2.121-.717.707L9.08.708 9.797 0z",
fillRule: "evenodd"
}));
});
ClockStopwatchSmallIcon.displayName = "ClockStopwatchSmallIcon";
var ClockStopwatchSmallIcon$1 = ClockStopwatchSmallIcon;
var _excluded$3Z = ["gradient"];
/**
* @component ClockStopwatchIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <ClockStopwatchIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <ClockStopwatchIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var ClockStopwatchIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3Z);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "ClockStopwatchIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M12 2c2.393 0 4.59.84 6.312 2.243l1.604-1.657L21.33 4 19.73 5.654A9.959 9.959 0 0122 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm0 2a8 8 0 100 16 8 8 0 000-16zm-1 2v7h2V6h-2z",
fillRule: "evenodd"
}));
});
ClockStopwatchIcon.displayName = "ClockStopwatchIcon";
var ClockStopwatchIcon$1 = ClockStopwatchIcon;
var _excluded$3Y = ["gradient"];
/**
* @component ClockIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <ClockIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <ClockIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var ClockIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3Y);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "ClockIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm0 2a8 8 0 100 16 8 8 0 000-16zm1 2v7H6v-2h5V6h2z",
fillRule: "evenodd"
}));
});
ClockIcon.displayName = "ClockIcon";
var ClockIcon$1 = ClockIcon;
var _excluded$3X = ["gradient"];
/**
* @component CloseCircleIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <CloseCircleIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <CloseCircleIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var CloseCircleIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3X);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "CloseCircleIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm0 2a8 8 0 100 16 8 8 0 000-16zM9.194 7.79l2.805 2.806 2.807-2.805a.992.992 0 111.403 1.403l-2.806 2.805 2.806 2.807a.992.992 0 11-1.403 1.403L12 13.403 9.194 16.21a.992.992 0 11-1.403-1.403L10.596 12 7.79 9.194A.992.992 0 119.194 7.79z"
}));
});
CloseCircleIcon.displayName = "CloseCircleIcon";
var CloseCircleIcon$1 = CloseCircleIcon;
var _excluded$3W = ["gradient"];
/**
* @component CloseDocumentIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <CloseDocumentIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <CloseDocumentIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var CloseDocumentIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3W);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
xmlns: "http://www.w3.org/2000/svg",
width: 24,
height: 24,
"data-testid": "CloseDocumentIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M5 4h10.19L19 7.891V20H5V4zm11.03-2H5a2 2 0 00-2 2v16a2 2 0 002 2h14a2 2 0 002-2V7.075L16.03 2zM9.707 9.293a1 1 0 00-1.414 1.414L10.586 13l-2.293 2.293a1 1 0 101.414 1.414L12 14.414l2.293 2.293a1 1 0 001.414-1.414L13.414 13l2.293-2.293a1 1 0 00-1.414-1.414L12 11.586 9.707 9.293z",
clipRule: "evenodd"
}));
});
CloseDocumentIcon.displayName = "CloseDocumentIcon";
var CloseDocumentIcon$1 = CloseDocumentIcon;
var _excluded$3V = ["gradient"];
/**
* @component CloseSmallIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <CloseSmallIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <CloseSmallIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var CloseSmallIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3V);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "CloseSmallIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M9.485 8.071l2.828 2.827 2.83-2.827a1 1 0 011.413 1.414l-2.828 2.828 2.828 2.83a1 1 0 01-1.414 1.413l-2.829-2.828-2.828 2.828a1 1 0 11-1.414-1.414l2.827-2.829-2.827-2.828a1 1 0 011.414-1.414z",
fillRule: "evenodd"
}));
});
CloseSmallIcon.displayName = "CloseSmallIcon";
var CloseSmallIcon$1 = CloseSmallIcon;
var _excluded$3U = ["gradient"];
/**
* @component CloseIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <CloseIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <CloseIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var CloseIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3U);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "CloseIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M7.613 6.21l.094.083L12 10.585l4.293-4.292a1 1 0 011.497 1.32l-.083.094L13.415 12l4.292 4.293a1 1 0 01-1.32 1.497l-.094-.083L12 13.415l-4.293 4.292a1 1 0 01-1.497-1.32l.083-.094L10.585 12 6.293 7.707a1 1 0 011.32-1.497z"
}));
});
CloseIcon.displayName = "CloseIcon";
var CloseIcon$1 = CloseIcon;
var _excluded$3T = ["gradient"];
/**
* @component CollapsIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <CollapsIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <CollapsIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var CollapsIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3T);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 6,
height: 9,
viewBox: "0 0 6 9",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "CollapsIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M4.243.22L0 4.462l4.243 4.243a.75.75 0 101.06-1.06l-3.18-3.183 3.18-3.182A.75.75 0 004.243.22z",
fillRule: "evenodd"
}));
});
CollapsIcon.displayName = "CollapsIcon";
var CollapsIcon$1 = CollapsIcon;
var _excluded$3S = ["gradient"];
/**
* @component CollapseAllIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <CollapseAllIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <CollapseAllIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var CollapseAllIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3S);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "CollapseAllIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M12 15l4.72 4.461a.867.867 0 010 1.275.993.993 0 01-1.348 0L12 17.549l-3.372 3.187a.993.993 0 01-1.349 0 .867.867 0 010-1.275L12 15zm4.72-11.736a.867.867 0 010 1.275L12 9 7.28 4.539a.867.867 0 010-1.275.993.993 0 011.348 0L12 6.451l3.372-3.187a.993.993 0 011.349 0zM12 14a2 2 0 100-4 2 2 0 000 4z",
fillRule: "nonzero"
}));
});
CollapseAllIcon.displayName = "CollapseAllIcon";
var CollapseAllIcon$1 = CollapseAllIcon;
var _excluded$3R = ["gradient"];
/**
* @component CollapseExpandSingleIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <CollapseExpandSingleIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <CollapseExpandSingleIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var CollapseExpandSingleIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3R);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "CollapseExpandSingleIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M15.372 14.736a.993.993 0 001.349 0 .867.867 0 000-1.275L12 9l-4.72 4.461a.867.867 0 000 1.275.993.993 0 001.348 0L12 11.549l3.372 3.187z",
fillRule: "nonzero"
}));
});
CollapseExpandSingleIcon.displayName = "CollapseExpandSingleIcon";
var CollapseExpandSingleIcon$1 = CollapseExpandSingleIcon;
var _excluded$3Q = ["gradient"];
/**
* @component CompanyAddIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <CompanyAddIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <CompanyAddIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var CompanyAddIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3Q);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 18,
height: 20,
viewBox: "0 0 18 20",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "CompanyAddIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M10 0v2H2v16h5v-3.5h2V18h5V8h2v12H0V2a2 2 0 012-2h8zm3 14v2h-2v-2h2zm-8 0v2H3v-2h2zm8-5v2h-2V9h2zM9 9v2H7V9h2zM5 9v2H3V9h2zm4-5v2H7V4h2zM5 4v2H3V4h2zm11-4v2h2v2h-2v2h-2V3.999L12 4V2l2-.001V0h2z"
}));
});
CompanyAddIcon.displayName = "CompanyAddIcon";
var CompanyAddIcon$1 = CompanyAddIcon;
var _excluded$3P = ["gradient"];
/**
* @component CompanyIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <CompanyIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <CompanyIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var CompanyIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3P);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "CompanyIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M20 22H4V4a2 2 0 012-2h12a2 2 0 012 2v18zM6 20h5v-3.5h2V20h5V4H6v16zm11-4v2h-2v-2h2zm-8 0v2H7v-2h2zm8-5v2h-2v-2h2zm-4 0v2h-2v-2h2zm-4 0v2H7v-2h2zm4-5v2h-2V6h2zm4 0v2h-2V6h2zM9 6v2H7V6h2z"
}));
});
CompanyIcon.displayName = "CompanyIcon";
var CompanyIcon$1 = CompanyIcon;
var _excluded$3O = ["gradient"];
/**
* @component ComputerIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <ComputerIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <ComputerIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var ComputerIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3O);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "ComputerIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M21 16H3V4h18m0-2H3c-1.11 0-2 .89-2 2v12a2 2 0 002 2h7v2H8v2h8v-2h-2v-2h7a2 2 0 002-2V4a2 2 0 00-2-2z",
fillRule: "evenodd"
}));
});
ComputerIcon.displayName = "ComputerIcon";
var ComputerIcon$1 = ComputerIcon;
var _excluded$3N = ["gradient"];
/**
* @component CopyIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <CopyIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <CopyIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var CopyIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3N);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "CopyIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M20 20V8H8v12h12m2 0a2 2 0 01-2 2H8a2 2 0 01-2-2V8c0-1.11.89-2 2-2h12a2 2 0 012 2v12M4 16H2V4a2 2 0 012-2h13v2H4v12z",
fillRule: "evenodd"
}));
});
CopyIcon.displayName = "CopyIcon";
var CopyIcon$1 = CopyIcon;
var _excluded$3M = ["gradient"];
/**
* @component CrownBlankIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <CrownBlankIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <CrownBlankIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var CrownBlankIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3M);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "CrownBlankIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M15.674 9.488l2.704-.98L17.3 13H6.7L5.663 8.507l2.662.978A1 1 0 009.45 9.17L12 5.988l2.552 3.186a1 1 0 001.122.314zM8.5 7.482L4.69 6.097a1 1 0 00-1.32 1.145L5 15h14l1.63-7.758a1 1 0 00-1.32-1.145L15.5 7.482l-2.747-3.14a1 1 0 00-1.506 0L8.5 7.482zM19 17H5v1c0 .6.4 1 1 1h12c.6 0 1-.4 1-1v-1z",
fillRule: "evenodd"
}));
});
CrownBlankIcon.displayName = "CrownBlankIcon";
var CrownBlankIcon$1 = CrownBlankIcon;
var _excluded$3L = ["gradient"];
/**
* @component CrownSelectedIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <CrownSelectedIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <CrownSelectedIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var CrownSelectedIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3L);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "CrownSelectedIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M8.5 7.487L4.69 6.1a1 1 0 00-1.32 1.146L5 15h14l1.63-7.753A1 1 0 0019.31 6.1L15.5 7.487l-2.747-3.14a1 1 0 00-1.506 0L8.5 7.487zM19 17H5v1c0 .6.4 1 1 1h12c.6 0 1-.4 1-1v-1z",
fillRule: "nonzero"
}));
});
CrownSelectedIcon.displayName = "CrownSelectedIcon";
var CrownSelectedIcon$1 = CrownSelectedIcon;
var _excluded$3K = ["gradient"];
/**
* @component DependencySmallIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <DependencySmallIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <DependencySmallIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var DependencySmallIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3K);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 12,
height: 12,
viewBox: "0 0 12 12",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "DependencySmallIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M10 7a2 2 0 110 4 2 2 0 010-4zm0 1a1 1 0 100 2 1 1 0 000-2zM4.5 6v2.499L7 8.5v1H3.5V6h1zM4 1a2 2 0 110 4 2 2 0 010-4zm0 1a1 1 0 100 2 1 1 0 000-2z",
fillRule: "evenodd"
}));
});
DependencySmallIcon.displayName = "DependencySmallIcon";
var DependencySmallIcon$1 = DependencySmallIcon;
var _excluded$3J = ["gradient"];
/**
* @component DependencyIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <DependencyIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <DependencyIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var DependencyIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3J);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "DependencyIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M19 14a4 4 0 110 8 4 4 0 010-8zm0 2a2 2 0 100 4 2 2 0 000-4zM8 12v4.998L13 17v2H6v-7h2zM7 2a4 4 0 110 8 4 4 0 010-8zm0 2a2 2 0 100 4 2 2 0 000-4z",
fillRule: "evenodd"
}));
});
DependencyIcon.displayName = "DependencyIcon";
var DependencyIcon$1 = DependencyIcon;
var _excluded$3I = ["gradient"];
/**
* @component DescriptionSmallIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <DescriptionSmallIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <DescriptionSmallIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var DescriptionSmallIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3I);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 18,
height: 18,
viewBox: "0 0 18 18",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "DescriptionSmallIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M15 15H3a1.5 1.5 0 01-1.5-1.5v-9A1.5 1.5 0 013 3h12a1.5 1.5 0 011.5 1.5v9A1.5 1.5 0 0115 15zM3 4.5v9h12v-9H3zm1.5 2.25h9v1.5h-9v-1.5zm0 3H12v1.5H4.5v-1.5z"
}));
});
DescriptionSmallIcon.displayName = "DescriptionSmallIcon";
var DescriptionSmallIcon$1 = DescriptionSmallIcon;
var _excluded$3H = ["gradient"];
/**
* @component DescriptionIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <DescriptionIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <DescriptionIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var DescriptionIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3H);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "DescriptionIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M20 20H4a2 2 0 01-2-2V6a2 2 0 012-2h16a2 2 0 012 2v12a2 2 0 01-2 2zM4 6v12h16V6H4zm2 3h12v2H6V9zm0 4h10v2H6v-2z"
}));
});
DescriptionIcon.displayName = "DescriptionIcon";
var DescriptionIcon$1 = DescriptionIcon;
var _excluded$3G = ["gradient"];
/**
* @component DiscussionAddIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <DiscussionAddIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <DiscussionAddIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var DiscussionAddIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3G);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "DiscussionAddIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M22 13v9l-4-4H8a2 2 0 01-1.995-1.85L6 16v-1h10a3.001 3.001 0 002.829-2H22zM12 2v2H4v8.17L5.17 11H16l.001 1.732a1.987 1.987 0 01-.82.26L15 13H6l-4 4V4a2 2 0 011.85-1.995L4 2h8zm7 0v3h3v2h-3v3h-2V6.999L14 7V5l3-.001V2h2z",
fillRule: "evenodd"
}));
});
DiscussionAddIcon.displayName = "DiscussionAddIcon";
var DiscussionAddIcon$1 = DiscussionAddIcon;
var _excluded$3F = ["gradient"];
/**
* @component DiscussionIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <DiscussionIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <DiscussionIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var DiscussionIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3F);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "DiscussionIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M15 11H5.17l-.59.59-.58.58V4h11v7zm0-9H4a2 2 0 00-2 2v13l4-4h9a2 2 0 002-2V4a2 2 0 00-2-2zm5 4h-1v6a3 3 0 01-3 3H6v1a2 2 0 002 2h10l4 4V8a2 2 0 00-2-2z"
}));
});
DiscussionIcon.displayName = "DiscussionIcon";
var DiscussionIcon$1 = DiscussionIcon;
var _excluded$3E = ["gradient"];
/**
* @component DollarCheckmarkSmallIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <DollarCheckmarkSmallIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <DollarCheckmarkSmallIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var DollarCheckmarkSmallIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3E);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 12,
height: 12,
viewBox: "0 0 12 12",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "DollarCheckmarkSmallIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M11.243 8.121l.707.707-2.829 2.829L7 9.536l.707-.708 1.414 1.414 2.122-2.12zM5.5 0a5.5 5.5 0 015.293 7l-1.05.001A4.5 4.5 0 106 9.972v1.006A5.5 5.5 0 115.5 0zM6 2v1h1v1H5v1h2v3H6v1H5V8H4V7h2V6H4V3h1V2h1z",
fillRule: "evenodd"
}));
});
DollarCheckmarkSmallIcon.displayName = "DollarCheckmarkSmallIcon";
var DollarCheckmarkSmallIcon$1 = DollarCheckmarkSmallIcon;
var _excluded$3D = ["gradient"];
/**
* @component DollarCheckmarkIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <DollarCheckmarkIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <DollarCheckmarkIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var DollarCheckmarkIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3D);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "DollarCheckmarkIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M12 2c5.523 0 10 4.477 10 10h-2a8 8 0 10-8 8v2C6.477 22 2 17.523 2 12S6.477 2 12 2zm9.607 13.707a1 1 0 010 1.414l-3.657 3.657a1 1 0 01-1.414 0l-1.829-1.828a1 1 0 011.414-1.414l1.12 1.12 2.951-2.949a1 1 0 011.415 0zM13 7v1h2v2h-4v1h3a1 1 0 01.993.883L15 12v3a1 1 0 01-.883.993L14 16h-1v1h-2v-1H9v-2h4v-1h-3a1 1 0 01-.993-.883L9 12V9a1 1 0 01.883-.993L10 8h1V7h2z",
fillRule: "evenodd"
}));
});
DollarCheckmarkIcon.displayName = "DollarCheckmarkIcon";
var DollarCheckmarkIcon$1 = DollarCheckmarkIcon;
var _excluded$3C = ["gradient"];
/**
* @component DollarClockSmallIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <DollarClockSmallIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <DollarClockSmallIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var DollarClockSmallIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3C);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 12,
height: 12,
viewBox: "0 0 12 12",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "DollarClockSmallIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M10 5v1h1v1H9v1h2v3h-1v1H9v-1H8v-1h2V9H8V6h1V5h1zM8 1v3L6 6l1 1v1.25l-2-2-2 2V10h4v1H2V8l2-2-2-2V1h6zM7 2H3v1.75l2 2 2-2V2z",
fillRule: "evenodd"
}));
});
DollarClockSmallIcon.displayName = "DollarClockSmallIcon";
var DollarClockSmallIcon$1 = DollarClockSmallIcon;
var _excluded$3B = ["gradient"];
/**
* @component DollarClockIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <DollarClockIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <DollarClockIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var DollarClockIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3B);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "DollarClockIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M20 13v1h2v2h-4v1h3a1 1 0 01.993.883L22 18v3a1 1 0 01-.883.993L21 22h-1v1h-2v-1h-2v-2h4v-1h-3a1 1 0 01-.993-.883L16 18v-3a1 1 0 01.883-.993L17 14h1v-1h2zM18 2v6l-4 4 1.199 1.199L14.2 14.7 12 12.5l-4 4V20h6v2H6v-6l4-4-4-4V2h12zm-2 2H8v3.5l4 4 4-4V4z",
fillRule: "evenodd"
}));
});
DollarClockIcon.displayName = "DollarClockIcon";
var DollarClockIcon$1 = DollarClockIcon;
var _excluded$3A = ["gradient"];
/**
* @component DollarDocumentPlusIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <DollarDocumentPlusIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <DollarDocumentPlusIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var DollarDocumentPlusIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3A);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
xmlns: "http://www.w3.org/2000/svg",
width: 24,
height: 24,
"data-testid": "DollarDocumentPlusIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M16.03 2L21 7.075V12h-2V7.891L15.19 4H5v16l7-.001V22H5a2 2 0 01-2-2V4a2 2 0 012-2h11.03zM19 14v3h3v2h-3v3h-2v-3.001L14 19v-2l3-.001V14h2zm-7-7v1h2v2h-4v1h3a1 1 0 01.993.883L14 12v3a1 1 0 01-.883.993L13 16h-1v1h-2v-1H8v-2h4v-1H9a1 1 0 01-.993-.883L8 12V9a1 1 0 01.883-.993L9 8h1V7h2z",
clipRule: "evenodd"
}));
});
DollarDocumentPlusIcon.displayName = "DollarDocumentPlusIcon";
var DollarDocumentPlusIcon$1 = DollarDocumentPlusIcon;
var _excluded$3z = ["gradient"];
/**
* @component DollarDocumentIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <DollarDocumentIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <DollarDocumentIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var DollarDocumentIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3z);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "DollarDocumentIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M15.19 4H5v16h14V7.891L15.19 4zM5 2h11.03L21 7.075V20a2 2 0 01-2 2H5a2 2 0 01-2-2V4a2 2 0 012-2zm6 15h2v-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"
}));
});
DollarDocumentIcon.displayName = "DollarDocumentIcon";
var DollarDocumentIcon$1 = DollarDocumentIcon;
var _excluded$3y = ["gradient"];
/**
* @component DollarOffSmallIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <DollarOffSmallIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <DollarOffSmallIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var DollarOffSmallIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3y);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 12,
height: 12,
viewBox: "0 0 12 12",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "DollarOffSmallIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M1.05 1.05l9.9 9.9-.707.707L8.47 9.883A.996.996 0 018 10H7v1H5v-1H4a1 1 0 01-1-1V8h1v.7a.3.3 0 00.3.3h3.286l-3-3H4a1 1 0 01-1-1v-.587L.342 1.757l.707-.707zM8 5a1 1 0 011 1v1.586l-1-1V6.3a.3.3 0 00-.3-.3h-.286l-1-1H8zM7 1v1h1a1 1 0 011 1v1H8v-.7a.3.3 0 00-.3-.3H4.414l-.883-.883C3.67 2.042 3.83 2 4 2h1V1h2z",
fillRule: "evenodd"
}));
});
DollarOffSmallIcon.displayName = "DollarOffSmallIcon";
var DollarOffSmallIcon$1 = DollarOffSmallIcon;
var _excluded$3x = ["gradient"];
/**
* @component DollarOffIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <DollarOffIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <DollarOffIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var DollarOffIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3x);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "DollarOffIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M3 4.27L4.28 3 21 19.72 19.73 21l-3.67-3.67c-.62.67-1.52 1.22-2.56 1.49V21h-3v-2.18C8.47 18.31 7 16.79 7 15h2c0 1.08 1.37 2 3 2 1.13 0 2.14-.44 2.65-1.08l-2.97-2.97C9.58 12.42 7 11.75 7 9c0-.23 0-.45.07-.66L3 4.27m7.5.91V3h3v2.18C15.53 5.69 17 7.21 17 9h-2c0-1.08-1.37-2-3-2-.37 0-.72.05-1.05.13L9.4 5.58l1.1-.4z",
fillRule: "evenodd"
}));
});
DollarOffIcon.displayName = "DollarOffIcon";
var DollarOffIcon$1 = DollarOffIcon;
var _excluded$3w = ["gradient"];
/**
* @component DollarSmallIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <DollarSmallIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <DollarSmallIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var DollarSmallIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3w);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 12,
height: 12,
viewBox: "0 0 12 12",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "DollarSmallIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M8 10H7v1H5v-1H4a1 1 0 01-1-1V8h1v.7a.3.3 0 00.3.3h3.4a.3.3 0 00.3-.3V6.3a.3.3 0 00-.3-.3H4a1 1 0 01-1-1V3a1 1 0 011-1h1V1h2v1h1a1 1 0 011 1v1H8v-.7a.3.3 0 00-.3-.3H4.3a.3.3 0 00-.3.3v1.4a.3.3 0 00.3.3H8a1 1 0 011 1v3a1 1 0 01-1 1z",
fillRule: "evenodd"
}));
});
DollarSmallIcon.displayName = "DollarSmallIcon";
var DollarSmallIcon$1 = DollarSmallIcon;
var _excluded$3v = ["gradient"];
/**
* @component DollarIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <DollarIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <DollarIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var DollarIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3v);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "DollarIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M7 15h2c0 1.08 1.37 2 3 2s3-.92 3-2c0-1.1-1.04-1.5-3.24-2.03C9.64 12.44 7 11.78 7 9c0-1.79 1.47-3.31 3.5-3.82V3h3v2.18C15.53 5.69 17 7.21 17 9h-2c0-1.08-1.37-2-3-2s-3 .92-3 2c0 1.1 1.04 1.5 3.24 2.03C14.36 11.56 17 12.22 17 15c0 1.79-1.47 3.31-3.5 3.82V21h-3v-2.18C8.47 18.31 7 16.79 7 15z",
fillRule: "evenodd"
}));
});
DollarIcon.displayName = "DollarIcon";
var DollarIcon$1 = DollarIcon;
var _excluded$3u = ["gradient"];
/**
* @component DownloadIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <DownloadIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <DownloadIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var DownloadIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3u);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "DownloadIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M5 21h14v-2H5m14-9h-4V4H9v6H5l7 7 7-7z",
fillRule: "nonzero"
}));
});
DownloadIcon.displayName = "DownloadIcon";
var DownloadIcon$1 = DownloadIcon;
var _excluded$3t = ["gradient"];
/**
* @component DriveIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <DriveIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <DriveIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var DriveIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3t);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "DriveIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M7.71 3.5L1.15 15l3.43 6 6.55-11.5M9.73 15L6.3 21h13.12l3.43-6m-.57-1L15.42 2H8.57l6.86 12h6.85z",
fillRule: "evenodd"
}));
});
DriveIcon.displayName = "DriveIcon";
var DriveIcon$1 = DriveIcon;
var _excluded$3s = ["gradient"];
/**
* @component DropboxIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <DropboxIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <DropboxIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var DropboxIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3s);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "DropboxIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M2 7.2l5 3.19 5-3.19L7 4 2 7.2m10 0l5 3.19 5-3.19L17 4l-5 3.2M2 13.55l5 3.19 5-3.19-5-3.2-5 3.2m15-3.2l-5 3.2 5 3.19 5-3.19-5-3.2M7.03 17.8l5.01 3.2 5-3.2-5-3.19-5.01 3.19z",
fillRule: "evenodd"
}));
});
DropboxIcon.displayName = "DropboxIcon";
var DropboxIcon$1 = DropboxIcon;
var _excluded$3r = ["gradient"];
/**
* @component DuplicateIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <DuplicateIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <DuplicateIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var DuplicateIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3r);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "DuplicateIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M20 20V8H8v12h12m2 0a2 2 0 01-2 2H8a2 2 0 01-2-2V8c0-1.11.89-2 2-2h12a2 2 0 012 2v12m-7-9v2h2v2h-2v2h-2v-2.001L11 15v-2l2-.001V11h2zM4 16H2V4a2 2 0 012-2h13v2H4v12z",
fillRule: "evenodd"
}));
});
DuplicateIcon.displayName = "DuplicateIcon";
var DuplicateIcon$1 = DuplicateIcon;
var _excluded$3q = ["gradient"];
/**
* @component EditMultipleIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <EditMultipleIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <EditMultipleIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var EditMultipleIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3q);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "EditMultipleIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M17.83 11l1.41 1.41-7.125 7.125a.997.997 0 01-1.493-1.316l.083-.094L17.83 11zM10 13a1 1 0 01.117 1.993L10 15H4a1 1 0 01-.117-1.993L4 13h6zm10.83-5l1.41 1.41-1.83 1.83L19 9.83 20.83 8zM14 9a1 1 0 01.117 1.993L14 11H4a1 1 0 01-.117-1.993L4 9h10zm3-4a1 1 0 01.117 1.993L17 7H4a1 1 0 01-.117-1.993L4 5h13z",
fillRule: "evenodd"
}));
});
EditMultipleIcon.displayName = "EditMultipleIcon";
var EditMultipleIcon$1 = EditMultipleIcon;
var _excluded$3p = ["gradient"];
/**
* @component EditIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <EditIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <EditIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var EditIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3p);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "EditIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M3 5v14a2 2 0 002 2h14a2 2 0 002-2v-7h-2v7H5V5h7V3H5c-1.11 0-2 .89-2 2zm6.875 10.535L18 7.41 16.59 6l-8.125 8.125a.997.997 0 101.41 1.41zM19.17 6.24L21 4.41 19.59 3l-1.83 1.83 1.41 1.41z",
fillRule: "evenodd"
}));
});
EditIcon.displayName = "EditIcon";
var EditIcon$1 = EditIcon;
var _excluded$3o = ["gradient"];
/**
* @component EmojiIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <EmojiIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <EmojiIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var EmojiIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3o);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "EmojiIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M12 17.5c2.33 0 4.3-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5M8.5 11a1.5 1.5 0 100-3 1.5 1.5 0 000 3m7 0a1.5 1.5 0 100-3 1.5 1.5 0 000 3M12 20a8 8 0 110-16 8 8 0 010 16m0-18C6.47 2 2 6.5 2 12a10 10 0 0010 10c5.523 0 10-4.477 10-10A10 10 0 0012 2z",
fillRule: "evenodd"
}));
});
EmojiIcon.displayName = "EmojiIcon";
var EmojiIcon$1 = EmojiIcon;
var _excluded$3n = ["gradient"];
/**
* @component EstimatePlusIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <EstimatePlusIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <EstimatePlusIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var EstimatePlusIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3n);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "EstimatePlusIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M12 2c5.523 0 10 4.477 10 10 0 .338-.017.672-.05 1.001L20 13v-1a8 8 0 10-8 8h1l.001 1.95c-.33.033-.663.05-1.001.05-5.523 0-10-4.477-10-10S6.477 2 12 2zm7 12v3h3v2h-3v3h-2v-3.001L14 19v-2l3-.001V14h2zm-7-8a6 6 0 016 6h-2a4 4 0 10-4 4v2a6 6 0 010-12zm0 4a2 2 0 110 4 2 2 0 010-4z"
}));
});
EstimatePlusIcon.displayName = "EstimatePlusIcon";
var EstimatePlusIcon$1 = EstimatePlusIcon;
var _excluded$3m = ["gradient"];
/**
* @component EstimatesIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <EstimatesIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <EstimatesIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var EstimatesIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3m);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "EstimatesIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M12 20a8 8 0 100-16 8 8 0 000 16zm0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-6a4 4 0 100-8 4 4 0 000 8zm0 2a6 6 0 110-12 6 6 0 010 12zm0-4a2 2 0 110-4 2 2 0 010 4z"
}), /*#__PURE__*/React__default["default"].createElement("path", {
stroke: "#F4F5F7",
strokeWidth: 0.1,
opacity: 0.01,
d: "M.05.05h23.9v23.9H.05z"
}));
});
EstimatesIcon.displayName = "EstimatesIcon";
var EstimatesIcon$1 = EstimatesIcon;
var _excluded$3l = ["gradient"];
/**
* @component ExpandAllIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <ExpandAllIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <ExpandAllIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var ExpandAllIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3l);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "ExpandAllIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M16.72 15.264a.867.867 0 010 1.275L12 21l-4.72-4.461a.867.867 0 010-1.275.993.993 0 011.348 0L12 18.451l3.372-3.187a.993.993 0 011.349 0zM12 3l4.72 4.461a.867.867 0 010 1.275.993.993 0 01-1.348 0L12 5.549 8.628 8.736a.993.993 0 01-1.349 0 .867.867 0 010-1.275L12 3zm0 11a2 2 0 100-4 2 2 0 000 4z",
fillRule: "nonzero"
}));
});
ExpandAllIcon.displayName = "ExpandAllIcon";
var ExpandAllIcon$1 = ExpandAllIcon;
var _excluded$3k = ["gradient"];
/**
* @component ExpenseAddIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <ExpenseAddIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <ExpenseAddIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var ExpenseAddIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3k);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "ExpenseAddIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M19 14v3h3v2h-3v3h-2v-3.001L14 19v-2l3-.001V14h2zm1-11a2 2 0 011.994 1.85L22 5v7h-2V5H4v14h8v2H4a2 2 0 01-1.995-1.85L2 19V5c0-1.06.81-1.919 1.85-1.995L4 3h16zm-9 4v1h2v2H9v1h3a1 1 0 01.993.883L13 12v3a1 1 0 01-.883.993L12 16h-1v1H9v-1H7v-2h4v-1H8a1 1 0 01-.993-.883L7 12V9a1 1 0 01.883-.993L8 8h1V7h2z",
fillRule: "evenodd"
}));
});
ExpenseAddIcon.displayName = "ExpenseAddIcon";
var ExpenseAddIcon$1 = ExpenseAddIcon;
var _excluded$3j = ["gradient"];
/**
* @component ExpensePlusIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <ExpensePlusIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <ExpensePlusIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var ExpensePlusIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3j);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
xmlns: "http://www.w3.org/2000/svg",
width: 24,
height: 24,
"data-testid": "ExpensePlusIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M20 21a2 2 0 001.994-1.85L22 19v-7h-2v7H4V5h8V3H4a2 2 0 00-1.995 1.85L2 5v14c0 1.06.81 1.919 1.85 1.994L4 21h16z",
clipRule: "evenodd"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M11 8V7H9v1H8l-.117.007A1 1 0 007 9v3l.007.117A1 1 0 008 13h3v1H7v2h2v1h2v-1h1l.117-.007A1 1 0 0013 15v-3l-.007-.117A1 1 0 0012 11H9v-1h4V8h-2zm8.057-3.943c.17.61.53 1.282 1.096 1.848A4.298 4.298 0 0022 7.001c-.61.17-1.281.529-1.847 1.095a4.296 4.296 0 00-1.095 1.846 4.3 4.3 0 00-1.096-1.846A4.299 4.299 0 0016.114 7a4.296 4.296 0 001.848-1.095 4.297 4.297 0 001.095-1.848zm-2.943-2.412c.079.28.244.59.505.851.26.26.57.426.85.504a1.98 1.98 0 00-.85.505c-.26.26-.426.57-.505.85a1.98 1.98 0 00-.504-.85A1.98 1.98 0 0014.76 3c.28-.078.59-.243.85-.504.26-.26.426-.57.504-.85z"
}));
});
ExpensePlusIcon.displayName = "ExpensePlusIcon";
var ExpensePlusIcon$1 = ExpensePlusIcon;
var _excluded$3i = ["gradient"];
/**
* @component EyeOffSmallIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <EyeOffSmallIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <EyeOffSmallIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var EyeOffSmallIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3i);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 12,
height: 12,
viewBox: "0 0 12 12",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "EyeOffSmallIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M1.05 1.05l9.9 9.9-.707.707L8.205 9.62C7.517 9.866 6.775 10 6 10 3.273 10 .944 8.341 0 6a6.35 6.35 0 011.971-2.615L.343 1.757l.707-.707zM1.19 6C2.09 7.792 3.95 8.933 6 8.933c.463 0 .915-.058 1.35-.168L6.176 7.59c-.058.006-.117.009-.176.009-.904 0-1.636-.716-1.636-1.6 0-.07.004-.14.013-.207L2.736 4.15A5.273 5.273 0 001.189 6zM6 2c2.727 0 5.056 1.659 6 4a6.35 6.35 0 01-1.972 2.615l-.765-.766A5.273 5.273 0 0010.811 6C9.91 4.208 8.05 3.067 6 3.067c-.463 0-.916.058-1.35.168l-.857-.855A6.553 6.553 0 016 2zm0 2.4c.904 0 1.636.716 1.636 1.6 0 .07-.004.14-.013.208l-1.8-1.799C5.88 4.403 5.94 4.4 6 4.4z",
fillRule: "evenodd"
}));
});
EyeOffSmallIcon.displayName = "EyeOffSmallIcon";
var EyeOffSmallIcon$1 = EyeOffSmallIcon;
var _excluded$3h = ["gradient"];
/**
* @component EyeOffIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <EyeOffIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <EyeOffIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var EyeOffIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3h);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "EyeOffIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M2 5.27L3.28 4 20 20.72 18.73 22l-3.08-3.08c-1.15.38-2.37.58-3.65.58-5 0-9.27-3.11-11-7.5.69-1.76 1.79-3.31 3.19-4.54L2 5.27M12 9a3 3 0 012.83 4L11 9.17A3 3 0 0112 9m0-4.5c5 0 9.27 3.11 11 7.5a11.79 11.79 0 01-4 5.19l-1.42-1.43A9.862 9.862 0 0020.82 12 9.821 9.821 0 0012 6.5c-1.09 0-2.16.18-3.16.5L7.3 5.47c1.44-.62 3.03-.97 4.7-.97M3.18 12A9.821 9.821 0 0012 17.5c.69 0 1.37-.07 2-.21L11.72 15A3.064 3.064 0 019 12.28L5.6 8.87c-.99.85-1.82 1.91-2.42 3.13z",
fillRule: "evenodd"
}));
});
EyeOffIcon.displayName = "EyeOffIcon";
var EyeOffIcon$1 = EyeOffIcon;
var _excluded$3g = ["gradient"];
/**
* @component EyeSmallIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <EyeSmallIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <EyeSmallIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var EyeSmallIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3g);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 12,
height: 12,
viewBox: "0 0 12 12",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "EyeSmallIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M6 4.4c.904 0 1.636.716 1.636 1.6 0 .884-.732 1.6-1.636 1.6-.904 0-1.636-.716-1.636-1.6 0-.884.732-1.6 1.636-1.6M6 2c2.727 0 5.056 1.659 6 4-.944 2.341-3.273 4-6 4S.944 8.341 0 6c.944-2.341 3.273-4 6-4M1.19 6C2.09 7.792 3.95 8.933 6 8.933S9.91 7.792 10.81 6C9.91 4.208 8.05 3.067 6 3.067S2.09 4.208 1.19 6z",
fillRule: "evenodd"
}));
});
EyeSmallIcon.displayName = "EyeSmallIcon";
var EyeSmallIcon$1 = EyeSmallIcon;
var _excluded$3f = ["gradient"];
/**
* @component EyeIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <EyeIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <EyeIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var EyeIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3f);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "EyeIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M12 9a3 3 0 110 6 3 3 0 010-6m0-4.5c5 0 9.27 3.11 11 7.5-1.73 4.39-6 7.5-11 7.5S2.73 16.39 1 12c1.73-4.39 6-7.5 11-7.5M3.18 12a9.821 9.821 0 0017.64 0 9.821 9.821 0 00-17.64 0z",
fillRule: "evenodd"
}));
});
EyeIcon.displayName = "EyeIcon";
var EyeIcon$1 = EyeIcon;
var _excluded$3e = ["gradient"];
/**
* @component FilterIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <FilterIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <FilterIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var FilterIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3e);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "FilterIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M7 13h10a1 1 0 000-2H7a1 1 0 000 2zM3 7a1 1 0 001 1h16a1 1 0 000-2H4a1 1 0 00-1 1zm8 11h2a1 1 0 000-2h-2a1 1 0 000 2z",
fillRule: "evenodd"
}));
});
FilterIcon.displayName = "FilterIcon";
var FilterIcon$1 = FilterIcon;
var _excluded$3d = ["gradient"];
/**
* @component FolderMoveIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <FolderMoveIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <FolderMoveIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var FolderMoveIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3d);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "FolderMoveIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M10 4l2 2h8a2 2 0 011.995 1.851L22 8v10c0 1.06-.81 1.919-1.85 1.995L20 20H4a2 2 0 01-1.994-1.85L2 18V6a2 2 0 011.851-1.995L4 4h6zm10 4H4v10h16V8zm-10 2l4 3-4 3v-2H6v-2h4v-2z",
fillRule: "evenodd"
}));
});
FolderMoveIcon.displayName = "FolderMoveIcon";
var FolderMoveIcon$1 = FolderMoveIcon;
var _excluded$3c = ["gradient"];
/**
* @component FolderOutlineIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <FolderOutlineIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <FolderOutlineIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var FolderOutlineIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3c);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "FolderOutlineIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M20 18H4V8h16m0-2h-8l-2-2H4c-1.11 0-2 .89-2 2v12a2 2 0 002 2h16a2 2 0 002-2V8a2 2 0 00-2-2z",
fillRule: "evenodd"
}));
});
FolderOutlineIcon.displayName = "FolderOutlineIcon";
var FolderOutlineIcon$1 = FolderOutlineIcon;
var _excluded$3b = ["gradient"];
/**
* @component GiftIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <GiftIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <GiftIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var GiftIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3b);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "GiftIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M22 12v8a2 2 0 01-2 2H4a2 2 0 01-2-2v-8a1 1 0 01-1-1V8a2 2 0 012-2h3.17A3 3 0 019 2c1 0 1.88.5 2.43 1.24v-.01L12 4l.57-.77v.01C13.12 2.5 14 2 15 2a3 3 0 012.83 4H21a2 2 0 012 2v3a1 1 0 01-1 1zM4 20h7v-8H4v8zm16 0v-8h-7v8h7zM9 4a1 1 0 100 2 1 1 0 000-2zm6 0a1 1 0 100 2 1 1 0 000-2zM3 8v2h8V8H3zm10 0v2h8V8h-8z"
}));
});
GiftIcon.displayName = "GiftIcon";
var GiftIcon$1 = GiftIcon;
var _excluded$3a = ["gradient"];
/**
* @component GroupByIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <GroupByIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <GroupByIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var GroupByIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3a);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "GroupByIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M20.598 9a1 1 0 01-1.994-.123V5.392h-3.486a.997.997 0 110-1.995l4.486-.005.118.007a1 1 0 01.883.993v4.49l-.007.12V9zM5.396 15.122v3.487h3.486a.998.998 0 010 1.995l-4.486.005-.118-.007a1 1 0 01-.883-.993v-4.49l.007-.12a.997.997 0 01.993-.877l.12.008a1 1 0 01.881.992zm8.726 4.478a.998.998 0 00.878.998l.12.008h4.489a1 1 0 00.993-.884l.007-.118-.005-4.486a.998.998 0 00-1.995 0v3.486h-3.487a1 1 0 00-1 .996zM5.391 5.396h3.487a1 1 0 00.992-.88l.008-.12A.997.997 0 009 3.401l-.12-.008H4.392a1 1 0 00-.993.884l-.007.118.005 4.486a.998.998 0 001.995 0V5.396h-.001zM8 9a1 1 0 011-1h6a1 1 0 110 2H9a1 1 0 01-1-1zm1 2a1 1 0 100 2h6a1 1 0 000-2H9zm-1 4a1 1 0 011-1h6a1 1 0 110 2H9a1 1 0 01-1-1z"
}));
});
GroupByIcon.displayName = "GroupByIcon";
var GroupByIcon$1 = GroupByIcon;
var _excluded$39 = ["gradient"];
/**
* @component HashtagIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <HashtagIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <HashtagIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var HashtagIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$39);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "HashtagIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M5.33 21l.719-4H2l.354-2h4.049l1.073-6H3.427l.354-2H7.83l.719-4h2.024l-.719 4h6.073l.719-4h2.024l-.719 4H22l-.354 2h-4.049l-1.073 6h4.049l-.354 2H16.17l-.719 4h-2.024l.719-4H8.073l-.719 4H5.33zM9.5 9l-1.073 6H14.5l1.073-6H9.5z"
}));
});
HashtagIcon.displayName = "HashtagIcon";
var HashtagIcon$1 = HashtagIcon;
var _excluded$38 = ["gradient"];
/**
* @component HelpIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <HelpIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <HelpIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var HelpIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$38);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "HelpIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M12 4a8 8 0 100 16 8 8 0 000-16zm0-2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm-1 13h2v2h-2v-2zm2-5a1 1 0 00-2 0H9a3 3 0 114 2.83V14h-2v-1a2 2 0 011.276-1.865c.572-.311.724-.653.724-1.135z",
fillRule: "evenodd"
}));
});
HelpIcon.displayName = "HelpIcon";
var HelpIcon$1 = HelpIcon;
var _excluded$37 = ["gradient"];
/**
* @component HistoryOfChangesIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <HistoryOfChangesIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <HistoryOfChangesIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var HistoryOfChangesIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$37);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "HistoryOfChangesIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M10.33 4.176a8 8 0 11-.113 15.623l-.446 1.95a10 10 0 10-5.196-3.05l-.008.008.242.242.05.051H3.274a1 1 0 100 2h4a1 1 0 001-1v-4a1 1 0 10-2 0v1.586l-.038-.038a8 8 0 014.095-13.372z"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M12 13h4v2h-6V8h2v5z"
}));
});
HistoryOfChangesIcon.displayName = "HistoryOfChangesIcon";
var HistoryOfChangesIcon$1 = HistoryOfChangesIcon;
var _excluded$36 = ["gradient"];
/**
* @component ImageIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <ImageIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <ImageIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var ImageIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$36);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "ImageIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M20 4a2 2 0 011.994 1.85L22 6v12a2 2 0 01-1.85 1.994L20 20H4a2 2 0 01-1.995-1.85L2 18V6a2 2 0 011.85-1.995L4 4h16zm0 2H4v12h16V6zm-5.5 4l4.5 6H5l3.5-4.5 2.5 3 3.5-4.5zm-8-3a1.5 1.5 0 110 3 1.5 1.5 0 010-3z"
}));
});
ImageIcon.displayName = "ImageIcon";
var ImageIcon$1 = ImageIcon;
var _excluded$35 = ["gradient"];
/**
* @component InfoSmallIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <InfoSmallIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <InfoSmallIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var InfoSmallIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$35);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 15,
height: 15,
viewBox: "0 0 15 15",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "InfoSmallIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M7.5 14a6.5 6.5 0 100-13 6.5 6.5 0 000 13zm0 1a7.5 7.5 0 110-15 7.5 7.5 0 010 15zM7 6h1v6H7V6zm0-3h1v1H7V3z",
fillRule: "nonzero"
}));
});
InfoSmallIcon.displayName = "InfoSmallIcon";
var InfoSmallIcon$1 = InfoSmallIcon;
var _excluded$34 = ["gradient"];
/**
* @component InfoIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <InfoIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <InfoIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var InfoIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$34);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "InfoIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm0 2a8 8 0 100 16 8 8 0 000-16zm-1 5V7h2v2h-2zm0 8v-6h2v6h-2z",
fillRule: "evenodd"
}));
});
InfoIcon.displayName = "InfoIcon";
var InfoIcon$1 = InfoIcon;
var _excluded$33 = ["gradient"];
/**
* @component InsertLinkIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <InsertLinkIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <InsertLinkIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var InsertLinkIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$33);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "InsertLinkIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1 0 1.71-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z",
fillRule: "evenodd"
}));
});
InsertLinkIcon.displayName = "InsertLinkIcon";
var InsertLinkIcon$1 = InsertLinkIcon;
var _excluded$32 = ["gradient"];
/**
* @component IntegrationsIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <IntegrationsIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <IntegrationsIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var IntegrationsIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$32);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "IntegrationsIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M10 6H5v13h13v-5h-8V6zm2 6h8v7a2 2 0 01-2 2H5a2 2 0 01-2-2V6a2 2 0 012-2h7v8zm4-7v3h3V5h-3zm-2-2h5a2 2 0 012 2v5h-7V3z"
}), /*#__PURE__*/React__default["default"].createElement("path", {
stroke: "#F4F5F7",
strokeWidth: 0.1,
opacity: 0.01,
d: "M.05.05h23.9v23.9H.05z"
}));
});
IntegrationsIcon.displayName = "IntegrationsIcon";
var IntegrationsIcon$1 = IntegrationsIcon;
var _excluded$31 = ["gradient"];
/**
* @component InvoicesIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <InvoicesIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <InvoicesIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var InvoicesIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$31);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "InvoicesIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M15.19 4H5v16h14V7.891L15.19 4zM5 2h11.03L21 7.075V20a2 2 0 01-2 2H5a2 2 0 01-2-2V4a2 2 0 012-2zm4.974 11.752c-.01.532.13.952.42 1.26.29.308.649.504 1.078.588v-2.926a3.017 3.017 0 00-.448-.126 11.322 11.322 0 01-1.022-.329 3.337 3.337 0 01-.903-.504 2.325 2.325 0 01-.637-.784c-.159-.313-.238-.702-.238-1.169 0-.476.091-.896.273-1.26.182-.364.422-.67.721-.917a3.291 3.291 0 011.036-.574 4.667 4.667 0 011.218-.245V5.688h.826v1.078c.42.047.814.138 1.183.273.369.135.693.322.973.56.28.238.509.534.686.889.177.355.28.775.308 1.26H13.46a1.472 1.472 0 00-.35-.952c-.224-.261-.495-.392-.812-.392v2.478l.343.084a9 9 0 01.371.098c.69.187 1.223.418 1.596.693.373.275.649.562.826.861.177.299.282.597.315.896.033.299.049.565.049.798 0 .205-.051.464-.154.777a2.62 2.62 0 01-.553.917c-.266.299-.623.565-1.071.798-.448.233-1.022.373-1.722.42v1.19h-.826v-1.19c-1.045-.075-1.862-.397-2.45-.966-.588-.57-.929-1.405-1.022-2.506h1.974zm2.324 1.848c.168-.019.343-.058.525-.119a1.63 1.63 0 00.49-.259 1.38 1.38 0 00.357-.413c.093-.163.14-.357.14-.581 0-.364-.114-.637-.343-.819-.229-.182-.618-.348-1.169-.497V15.6zm-.826-7.196a1.54 1.54 0 00-.462.07 1.22 1.22 0 00-.406.217c-.121.098-.217.22-.287.364-.07.145-.105.315-.105.511 0 .308.098.546.294.714.196.168.518.303.966.406V8.404z"
}), /*#__PURE__*/React__default["default"].createElement("path", {
stroke: "#F4F5F7",
strokeWidth: 0.1,
opacity: 0.01,
d: "M.05.05h23.9v23.9H.05z"
}));
});
InvoicesIcon.displayName = "InvoicesIcon";
var InvoicesIcon$1 = InvoicesIcon;
var _excluded$30 = ["gradient"];
/**
* @component LabelsIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <LabelsIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <LabelsIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var LabelsIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$30);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "LabelsIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M17 2a3 3 0 013 3v17l-8-4-8 4V5a3 3 0 013-3h10zm0 2H7a1 1 0 00-.993.883L6 5v13.764l6-3 6 3V5a1 1 0 00-.883-.993L17 4z",
fillRule: "evenodd"
}));
});
LabelsIcon.displayName = "LabelsIcon";
var LabelsIcon$1 = LabelsIcon;
var _excluded$2$ = ["gradient"];
/**
* @component LetterArrowRightIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <LetterArrowRightIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <LetterArrowRightIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var LetterArrowRightIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2$);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "LetterArrowRightIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M2 17h4v-3l5 4.5L6 23v-3H2v-3zM4 4a2 2 0 00-2 2v9h2V8l8 5 8-5v10h-7v2h7a2 2 0 002-2V6a2 2 0 00-2-2H4zm8 7L4 6h16l-8 5z"
}));
});
LetterArrowRightIcon.displayName = "LetterArrowRightIcon";
var LetterArrowRightIcon$1 = LetterArrowRightIcon;
var _excluded$2_ = ["gradient"];
/**
* @component LetterFastIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <LetterFastIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <LetterFastIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var LetterFastIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2_);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
xmlns: "http://www.w3.org/2000/svg",
width: 24,
height: 24,
"data-testid": "LetterFastIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M8 6c-1.1 0-2 .9-2 2v9a2 2 0 002 2h13c1.11 0 2-.89 2-2V8a2 2 0 00-2-2H8zm0 11V9.67L14.5 13 21 9.67V17H8zm0-9h13l-6.5 3.31L8 8zm-4 9.5H1c-.552 0-1-.45-1-1s.448-1 1-1h3c-.013 1.22-.013 1.887 0 2zm0-10c-.013.113-.013.78 0 2H1c-.55 0-1-.45-1-1s.45-1 1-1h3zm-4 5c0-.55.45-1 1-1h3v2H1c-.55 0-1-.45-1-1z",
clipRule: "evenodd"
}));
});
LetterFastIcon.displayName = "LetterFastIcon";
var LetterFastIcon$1 = LetterFastIcon;
var _excluded$2Z = ["gradient"];
/**
* @component LetterIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <LetterIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <LetterIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var LetterIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2Z);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "LetterIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M2 6a2 2 0 012-2h16a2 2 0 012 2v12a2 2 0 01-2 2H4a2 2 0 01-2-2V6zm2 9v3h16V8l-8 5-8-5v7zm0-9l8 5 8-5H4z"
}));
});
LetterIcon.displayName = "LetterIcon";
var LetterIcon$1 = LetterIcon;
var _excluded$2Y = ["gradient"];
/**
* @component LockSmallIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <LockSmallIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <LockSmallIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var LockSmallIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2Y);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 12,
height: 12,
viewBox: "0 0 12 12",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "LockSmallIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M7 0a2 2 0 012 2v1h1a1 1 0 011 1v7a1 1 0 01-1 1H2a1 1 0 01-1-1V4c0-.555.445-1 1-1h1V2a2 2 0 012-2h2zm3 4H2v7h8V4zM7 6v3H5V6h2zm0-5H5a1 1 0 00-.993.883L4 2v1h4V2a1 1 0 00-.883-.993L7 1z",
fillRule: "evenodd"
}));
});
LockSmallIcon.displayName = "LockSmallIcon";
var LockSmallIcon$1 = LockSmallIcon;
var _excluded$2X = ["gradient"];
/**
* @component LockIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <LockIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <LockIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var LockIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2X);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "LockIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M12 17a2 2 0 01-2-2c0-1.11.89-2 2-2a2 2 0 110 4m6 3V10H6v10h12m0-12a2 2 0 012 2v10a2 2 0 01-2 2H6a2 2 0 01-2-2V10c0-1.11.89-2 2-2h1V6a5 5 0 1110 0v2h1m-6-5a3 3 0 00-3 3v2h6V6a3 3 0 00-3-3z",
fillRule: "evenodd"
}));
});
LockIcon.displayName = "LockIcon";
var LockIcon$1 = LockIcon;
var _excluded$2W = ["gradient"];
/**
* @component MarkerIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <MarkerIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <MarkerIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var MarkerIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2W);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "MarkerIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M12 17a1 1 0 010 2H4a1 1 0 010-2h8zm0-4a1 1 0 010 2H4a1 1 0 010-2h8zm10-1a1 1 0 01-.883.993l-5.25-.002c-.214 0-.442-.06-.626-.2L13.436 11H4a1 1 0 010-2h9.592l1.611-1.604A.998.998 0 0116 7h5a1 1 0 011 1v4zm-5.579-3.001l-1.079 1.079.921.921 3.736.001V9l-3.578-.001zM12 5a1 1 0 010 2H4a1 1 0 110-2h8z",
fillRule: "evenodd"
}));
});
MarkerIcon.displayName = "MarkerIcon";
var MarkerIcon$1 = MarkerIcon;
var _excluded$2V = ["gradient"];
/**
* @component MessageAddIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <MessageAddIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <MessageAddIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var MessageAddIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2V);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "MessageAddIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M11 4v2H6v11.26L10.39 15H18v-2h2v2a2 2 0 01-2 2H9.995L4 21V6a2 2 0 012-2h5zm7-1v3h3v2h-3v3h-2V8h-3V6h3V3h2z",
fillRule: "evenodd"
}));
});
MessageAddIcon.displayName = "MessageAddIcon";
var MessageAddIcon$1 = MessageAddIcon;
var _excluded$2U = ["gradient"];
/**
* @component MessageEmptyIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <MessageEmptyIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <MessageEmptyIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var MessageEmptyIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2U);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "MessageEmptyIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M22 4v12a2 2 0 01-2 2H7.995L2 22V4a2 2 0 012-2h16a2 2 0 012 2zm-2 0H4v14.26L7.39 16H20V4z",
fillRule: "evenodd"
}));
});
MessageEmptyIcon.displayName = "MessageEmptyIcon";
var MessageEmptyIcon$1 = MessageEmptyIcon;
var _excluded$2T = ["gradient"];
/**
* @component MessageSmallIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <MessageSmallIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <MessageSmallIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var MessageSmallIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2T);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 12,
height: 12,
viewBox: "0 0 12 12",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "MessageSmallIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M12 2v8H3.998L1 12V2h11zm-1 1H2v7.13L3.695 9H11V3zM6 6v1H3V6h3zm4-2v1H3V4h7z",
fillRule: "evenodd"
}));
});
MessageSmallIcon.displayName = "MessageSmallIcon";
var MessageSmallIcon$1 = MessageSmallIcon;
var _excluded$2S = ["gradient"];
/**
* @component MessageSolidIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <MessageSolidIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <MessageSolidIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var MessageSolidIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2S);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
xmlns: "http://www.w3.org/2000/svg",
width: 24,
height: 24,
"data-testid": "MessageSolidIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M22 4v12a2 2 0 01-2 2H7.995L2 22V4a2 2 0 012-2h16a2 2 0 012 2z",
clipRule: "evenodd"
}));
});
MessageSolidIcon.displayName = "MessageSolidIcon";
var MessageSolidIcon$1 = MessageSolidIcon;
var _excluded$2R = ["gradient"];
/**
* @component MessageIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <MessageIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <MessageIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var MessageIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2R);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "MessageIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M22 4v12a2 2 0 01-2 2H7.995L2 22V4a2 2 0 012-2h16a2 2 0 012 2zm-2 0H4v14.26L7.39 16H20V4zm-8 6v2H6v-2h6zm6-4v2H6V6h12z",
fillRule: "evenodd"
}));
});
MessageIcon.displayName = "MessageIcon";
var MessageIcon$1 = MessageIcon;
var _excluded$2Q = ["gradient"];
/**
* @component MinusIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <MinusIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <MinusIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var MinusIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2Q);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "MinusIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("rect", {
x: 5,
y: 11,
width: 14,
height: 2,
rx: 1,
fillRule: "evenodd"
}));
});
MinusIcon.displayName = "MinusIcon";
var MinusIcon$1 = MinusIcon;
var _excluded$2P = ["gradient"];
/**
* @component MobileMenuIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <MobileMenuIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <MobileMenuIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var MobileMenuIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2P);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "MobileMenuIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M20 17a1 1 0 110 2H4a1 1 0 110-2h16zm0-6a1 1 0 110 2H4a1 1 0 110-2h16zm0-6a1 1 0 110 2H4a1 1 0 010-2h16z"
}));
});
MobileMenuIcon.displayName = "MobileMenuIcon";
var MobileMenuIcon$1 = MobileMenuIcon;
var _excluded$2O = ["gradient"];
/**
* @component MoonIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <MoonIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <MoonIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var MoonIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2O);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 20,
height: 20,
viewBox: "0 0 20 20",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "MoonIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M10.06.509a1 1 0 01-.067 1.085 6.015 6.015 0 008.413 8.413 1 1 0 011.59.896A10.02 10.02 0 119.097.004a1 1 0 01.963.505zm-2.765 1.93a8.019 8.019 0 1010.266 10.266A8.014 8.014 0 017.295 2.439z"
}));
});
MoonIcon.displayName = "MoonIcon";
var MoonIcon$1 = MoonIcon;
var _excluded$2N = ["gradient"];
/**
* @component MoveTriggerIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <MoveTriggerIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <MoveTriggerIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var MoveTriggerIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2N);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 10,
height: 10,
viewBox: "0 0 10 10",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "MoveTriggerIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M0 0h10v1H0zm0 3h10v1H0zm0 3h10v1H0zm0 3h10v1H0z",
fillRule: "evenodd"
}));
});
MoveTriggerIcon.displayName = "MoveTriggerIcon";
var MoveTriggerIcon$1 = MoveTriggerIcon;
var _excluded$2M = ["gradient"];
/**
* @component MoveIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <MoveIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <MoveIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var MoveIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2M);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "MoveIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M4 16a2 2 0 01-2-2V4a2 2 0 012-2h10a2 2 0 011.995 1.85L16 4H4v10h7v-3l4 4-4 4v-3H4zm15 4V8H8v4H6V8a2 2 0 012-2h11a2 2 0 012 2v12a2 2 0 01-2 2H8a2 2 0 01-2-2v-2h2v2h11z"
}));
});
MoveIcon.displayName = "MoveIcon";
var MoveIcon$1 = MoveIcon;
var _excluded$2L = ["gradient"];
/**
* @component MyWorkIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <MyWorkIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <MyWorkIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var MyWorkIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2L);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "MyWorkIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M12 12a2 2 0 100-4 2 2 0 000 4zm0 2a4 4 0 110-8 4 4 0 010 8zm-7 5c.4-1.647 1.356-2.88 2.53-3.265A14.25 14.25 0 0112 15c1.49 0 2.98.245 4.47.735C17.645 16.12 18.6 17.353 19 19h-2.085c-.274-.757-.696-1.243-1.068-1.365A12.252 12.252 0 0012 17c-1.275 0-2.555.21-3.847.635-.372.122-.794.608-1.068 1.365H5zM5 4a1 1 0 00-1 1v14a1 1 0 001 1h14a1 1 0 001-1V5a1 1 0 00-1-1H5zm0-2h14a3 3 0 013 3v14a3 3 0 01-3 3H5a3 3 0 01-3-3V5a3 3 0 013-3z"
}), /*#__PURE__*/React__default["default"].createElement("path", {
stroke: "#F4F5F7",
strokeWidth: 0.1,
opacity: 0.01,
d: "M.05.05h23.9v23.9H.05z"
}));
});
MyWorkIcon.displayName = "MyWorkIcon";
var MyWorkIcon$1 = MyWorkIcon;
var _excluded$2K = ["gradient"];
/**
* @component NoteAddIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <NoteAddIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <NoteAddIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var NoteAddIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2K);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "NoteAddIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M7 14v3h3v2H7v3H5v-3.001L2 19v-2l3-.001V14h2zM19 3c1.05 0 1.918.82 1.994 1.851L21 5v10l-6 6h-3v-2h2v-5h5V5H5v7H3V5c0-1.05.82-1.918 1.851-1.994L5 3h14zm-7 8v2H8v-2h4zm5-4v2H7V7h10z",
fillRule: "evenodd"
}));
});
NoteAddIcon.displayName = "NoteAddIcon";
var NoteAddIcon$1 = NoteAddIcon;
var _excluded$2J = ["gradient"];
/**
* @component NoteIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <NoteIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <NoteIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var NoteIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2J);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "NoteIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M19 5v9h-5v5H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h10l6-6V5c0-1.1-.9-2-2-2zm-7 10H7v-2h5v2zm5-4H7V7h10v2z",
fillRule: "evenodd"
}));
});
NoteIcon.displayName = "NoteIcon";
var NoteIcon$1 = NoteIcon;
var _excluded$2I = ["gradient"];
/**
* @component NotebookIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <NotebookIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <NotebookIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var NotebookIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2I);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
xmlns: "http://www.w3.org/2000/svg",
width: 24,
height: 24,
"data-testid": "NotebookIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M3 4v16a2 2 0 002 2h14a2 2 0 002-2V4a2 2 0 00-2-2H5a2 2 0 00-2 2zm2 0h14v16H5V4zm12 2H7v2h10V6zm-3 4H7v2h7v-2z",
clipRule: "evenodd"
}));
});
NotebookIcon.displayName = "NotebookIcon";
var NotebookIcon$1 = NotebookIcon;
var _excluded$2H = ["gradient"];
/**
* @component NotificationBellIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <NotificationBellIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <NotificationBellIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var NotificationBellIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2H);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "NotificationBellIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M21 19H3v-3.9l.7-.2C4.5 14.6 5 13.8 5 13v-2c0-2.7 1.6-5.2 4-6.3.2-1.6 1.5-2.7 3-2.7s2.8 1.1 3 2.7c2.4 1.2 4 3.6 4 6.3v2c0 .8.5 1.6 1.3 1.9l.7.2V19zM5 17h14v-.5c-1.2-.7-2-2-2-3.5v-2c0-1.9-1.1-3.7-2.9-4.5l-1-.5-.1-1.1c-.1-.5-.5-.9-1-.9s-.9.4-1 .9L10.9 6l-1 .5C8.1 7.3 7 9.1 7 11v2c0 1.4-.8 2.8-2 3.5v.5zm8 3h2c0 1.7-1.3 3-3 3s-3-1.3-3-3h2c0 .6.4 1 1 1s1-.4 1-1zm0 0h2c0 1.7-1.3 3-3 3s-3-1.3-3-3h2c0 .6.4 1 1 1s1-.4 1-1z"
}));
});
NotificationBellIcon.displayName = "NotificationBellIcon";
var NotificationBellIcon$1 = NotificationBellIcon;
var _excluded$2G = ["gradient"];
/**
* @component OpenExpandedIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <OpenExpandedIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <OpenExpandedIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var OpenExpandedIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2G);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "OpenExpandedIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3m-2 16H5V5h5V3H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-5h-2v5z",
fillRule: "nonzero"
}));
});
OpenExpandedIcon.displayName = "OpenExpandedIcon";
var OpenExpandedIcon$1 = OpenExpandedIcon;
var _excluded$2F = ["gradient"];
/**
* @component OpenSheetIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <OpenSheetIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <OpenSheetIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var OpenSheetIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2F);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "OpenSheetIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M12 5a1 1 0 00-1 1v6L8 9v2.25H5v1.5h3V15l3-3v6a1 1 0 001 1h6a1 1 0 001-1V6a1 1 0 00-1-1h-6zm5 2h-4v10h4V7z"
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M2 4a2 2 0 012-2h16a2 2 0 012 2v16a2 2 0 01-2 2H4a2 2 0 01-2-2V4zm18 0H4v16h16V4z"
}));
});
OpenSheetIcon.displayName = "OpenSheetIcon";
var OpenSheetIcon$1 = OpenSheetIcon;
var _excluded$2E = ["gradient"];
/**
* @component OrderFirstIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <OrderFirstIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <OrderFirstIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var OrderFirstIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2E);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "OrderFirstIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M4 4h16a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V5a1 1 0 011-1zm2 14h12a1 1 0 010 2H6a1 1 0 010-2zm0-4h12a1 1 0 010 2H6a1 1 0 010-2zm0-4h12a1 1 0 010 2H6a1 1 0 010-2z",
fillRule: "evenodd"
}));
});
OrderFirstIcon.displayName = "OrderFirstIcon";
var OrderFirstIcon$1 = OrderFirstIcon;
var _excluded$2D = ["gradient"];
/**
* @component PaidSmallIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <PaidSmallIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <PaidSmallIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var PaidSmallIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2D);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 12,
height: 12,
viewBox: "0 0 12 12",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "PaidSmallIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M11.243 8.121l.707.707-2.829 2.829L7 9.536l.707-.708 1.414 1.414 2.122-2.12zM5.5 0a5.5 5.5 0 015.293 7l-1.05.001A4.5 4.5 0 106 9.972v1.006A5.5 5.5 0 115.5 0zM6 2v1h1v1H5v1h2v3H6v1H5V8H4V7h2V6H4V3h1V2h1z",
fillRule: "evenodd"
}));
});
PaidSmallIcon.displayName = "PaidSmallIcon";
var PaidSmallIcon$1 = PaidSmallIcon;
var _excluded$2C = ["gradient"];
/**
* @component PauseCircleOutlineIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <PauseCircleOutlineIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <PauseCircleOutlineIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var PauseCircleOutlineIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2C);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "PauseCircleOutlineIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm0 2a8 8 0 100 16 8 8 0 000-16zm-1 5v6H9V9h2zm4 0v6h-2V9h2z",
fillRule: "evenodd"
}));
});
PauseCircleOutlineIcon.displayName = "PauseCircleOutlineIcon";
var PauseCircleOutlineIcon$1 = PauseCircleOutlineIcon;
var _excluded$2B = ["gradient"];
/**
* @component PauseIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <PauseIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <PauseIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var PauseIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2B);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "PauseIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M12 3a9 9 0 110 18 9 9 0 010-18zm-1 6H9v6h2V9zm4 0h-2v6h2V9z",
fillRule: "evenodd"
}));
});
PauseIcon.displayName = "PauseIcon";
var PauseIcon$1 = PauseIcon;
var _excluded$2A = ["gradient"];
/**
* @component PauseSmallIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <PauseSmallIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <PauseSmallIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var PauseSmallIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2A);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "PauseSmallIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M8 7h3v10H8V7zm5 0h3v10h-3V7z",
fillRule: "evenodd"
}));
});
PauseSmallIcon.displayName = "PauseSmallIcon";
var PauseSmallIcon$1 = PauseSmallIcon;
var _excluded$2z = ["gradient"];
/**
* @component PencilSmallIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <PencilSmallIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <PencilSmallIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var PencilSmallIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2z);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 12,
height: 12,
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "PencilSmallIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M9 3.47L2.46 10H2v-.46L8.53 3l.47.47zM9.98.145l-.915.915 1.875 1.875.915-.915a.498.498 0 000-.705l-1.17-1.17a.5.5 0 00-.705 0zm-1.45 1.45L1 9.125V11h1.875l7.53-7.53L8.53 1.595z",
fillRule: "evenodd"
}));
});
PencilSmallIcon.displayName = "PencilSmallIcon";
var PencilSmallIcon$1 = PencilSmallIcon;
var _excluded$2y = ["gradient"];
/**
* @component PencilIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <PencilIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <PencilIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var PencilIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2y);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "PencilIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M14.06 9l.94.94L5.92 19H5v-.92L14.06 9m3.6-6c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29m-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75z",
fillRule: "evenodd"
}));
});
PencilIcon.displayName = "PencilIcon";
var PencilIcon$1 = PencilIcon;
var _excluded$2x = ["gradient"];
/**
* @component PendingPaymentSmallIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <PendingPaymentSmallIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <PendingPaymentSmallIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var PendingPaymentSmallIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2x);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 12,
height: 12,
viewBox: "0 0 12 12",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "PendingPaymentSmallIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M10 5v1h1v1H9v1h2v3h-1v1H9v-1H8v-1h2V9H8V6h1V5h1zM8 1v3L6 6l1 1v1.25l-2-2-2 2V10h4v1H2V8l2-2-2-2V1h6zM7 2H3v1.75l2 2 2-2V2z",
fillRule: "evenodd"
}));
});
PendingPaymentSmallIcon.displayName = "PendingPaymentSmallIcon";
var PendingPaymentSmallIcon$1 = PendingPaymentSmallIcon;
var _excluded$2w = ["gradient"];
/**
* @component PeopleIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <PeopleIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <PeopleIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var PeopleIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2w);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "PeopleIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M20.998 16.775l-.148-.387a2.001 2.001 0 00-1.601-1.27 12.961 12.961 0 00-2.317-.105c-.253-.76-.683-1.527-.932-1.937a14.912 14.912 0 013.518.06 4.003 4.003 0 013.203 2.54l.147.387a2 2 0 01-1.614 2.696 27.849 27.849 0 01-3.248.24c0-.355-.004-.741-.127-1.115L17.587 17a27.311 27.311 0 003.41-.225zM17.5 10a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm0 2a3.5 3.5 0 110-7 3.5 3.5 0 010 7zM5.437 14.315a2 2 0 00-1.494 1.333L3 18.51c1.826.327 3.65.49 5.473.49a30.99 30.99 0 005.474-.49l-.943-2.862a2 2 0 00-1.494-1.333A14.924 14.924 0 008.473 14c-1.01 0-2.021.105-3.036.315zm-.406-1.958A16.924 16.924 0 018.473 12c1.148 0 2.295.119 3.443.357a4 4 0 012.987 2.665l.943 2.862A2 2 0 0114.3 20.48a33.015 33.015 0 01-5.827.52c-1.941 0-3.883-.174-5.825-.521a2 2 0 01-1.547-2.595l.942-2.862a4 4 0 012.988-2.665zM8.474 9a2.5 2.5 0 100-5 2.5 2.5 0 000 5zm0 2a4.5 4.5 0 110-9 4.5 4.5 0 010 9z"
}), /*#__PURE__*/React__default["default"].createElement("path", {
stroke: "#F4F5F7",
strokeWidth: 0.1,
opacity: 0.01,
d: "M.05.05h23.9v23.9H.05z"
}));
});
PeopleIcon.displayName = "PeopleIcon";
var PeopleIcon$1 = PeopleIcon;
var _excluded$2v = ["gradient"];
/**
* @component PersonArrowOutCircleIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <PersonArrowOutCircleIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <PersonArrowOutCircleIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var PersonArrowOutCircleIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2v);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "PersonArrowOutCircleIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M12 2c.338 0 .672.017 1.001.05L13 3.5c0 .19.008.38.024.566a8 8 0 00-6.883 13.38A3.987 3.987 0 018.122 16.4 19.252 19.252 0 0112 16c1.292 0 2.585.133 3.877.398.76.156 1.444.525 1.983 1.048A7.97 7.97 0 0020 12c0-.69-.087-1.36-.252-2H21.8c.131.646.2 1.315.2 2a9.968 9.968 0 01-2.85 6.99l-.224.223-.329.302-.325.274-.353.272-.314.222-.345.223A9.953 9.953 0 0112 22a9.954 9.954 0 01-4.951-1.31l-.33-.197-.324-.21-.374-.266-.137-.105-.223-.177-.293-.25-.295-.273A9.971 9.971 0 012 12C2 6.477 6.477 2 12 2zm0 16c-1.157 0-2.315.119-3.476.357a1.999 1.999 0 00-.831.385A7.958 7.958 0 0012 20a7.963 7.963 0 004.307-1.257 1.983 1.983 0 00-.832-.386A17.253 17.253 0 0012 18zm0-11a4 4 0 110 8 4 4 0 010-8zm0 2a2 2 0 100 4 2 2 0 000-4zm6-8v3h-3v2h3v3l5-4-5-4z"
}));
});
PersonArrowOutCircleIcon.displayName = "PersonArrowOutCircleIcon";
var PersonArrowOutCircleIcon$1 = PersonArrowOutCircleIcon;
var _excluded$2u = ["gradient"];
/**
* @component PersonCircleOffIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <PersonCircleOffIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <PersonCircleOffIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var PersonCircleOffIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2u);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "PersonCircleOffIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M12 2l.28.004.316.013.244.018.402.041.14.019.267.04.162.029.19.036a10.013 10.013 0 017.753 7.587l.062.3.042.233.044.276.031.244.017.154.022.257.02.367c.006.127.008.254.008.382l-.002.207-.01.299-.022.323-.04.397-.032.238-.059.354-.062.308-.05.22-.046.184a9.93 9.93 0 01-.12.422l-.092.283-.13.357-.113.283-.094.215-.161.341-.136.265-.178.32-.13.217c-.145.237-.302.47-.47.696l-.274.356-.229.273-.14.157-.258.274-.226.224-.104.099-.238.215-.312.262-.398.305-.284.199-.33.213a9.99 9.99 0 01-.35.208l-.266.145-.383.19-.291.132-.346.142-.358.132-.31.1-.402.116-.138.035-.187.045-.347.072-.443.074-.305.04-.16.016-.423.032-.271.011L12 22l-.2-.002-.331-.012-.373-.026-.167-.017-.164-.019-.246-.033-.336-.056-.3-.06-.31-.072-.415-.113-.297-.093-.323-.112-.284-.11-.343-.147-.266-.124-.28-.14-.159-.086-.328-.188-.177-.108-.297-.193-.383-.272-.316-.247-.316-.267-.333-.307-.208-.207-.247-.262-.17-.192-.245-.294-.18-.233a10.017 10.017 0 01-.361-.511l-.171-.27-.063-.103-.1-.17-.142-.259-.198-.392-.1-.213-.126-.295-.11-.281a9.91 9.91 0 01-.312-.984l-.096-.403-.062-.309-.059-.354-.06-.49-.028-.376-.013-.278A10.18 10.18 0 012 12C2 6.477 6.477 2 12 2zm0 16c-1.157 0-2.315.119-3.476.357a1.998 1.998 0 00-.831.385c.264.17.538.323.822.46l.287.133.295.122.356.13.292.09.146.042.27.068.248.055.281.051c.108.018.216.034.325.047l.38.037.28.017L12 20l.368-.008.167-.01.167-.012c.12-.01.24-.024.36-.04l.289-.044.24-.044.248-.054.313-.08.16-.047.234-.075.3-.107.395-.163.247-.114.304-.156.214-.12a8 8 0 00.3-.183 1.984 1.984 0 00-.83-.386A17.249 17.249 0 0012 18zm-8-6l.008.352.014.24.025.28.024.196.04.265.043.236.063.29.046.184.083.29.034.11.113.329.17.42.07.158c.09.193.186.382.29.567l.202.34.126.194.241.34.18.23.134.162.235.264a3.988 3.988 0 011.981-1.05A19.248 19.248 0 0112 16c1.05 0 2.102.088 3.152.263L13.57 14.68a4 4 0 01-5.25-5.25L5.814 6.927A7.967 7.967 0 004 12zm8-8a7.966 7.966 0 00-4.935 1.703l11.231 11.231.118-.152.18-.25.17-.258.097-.157.094-.16.14-.257.131-.263.103-.225.133-.321.119-.328.098-.313.104-.39.063-.291.053-.297c.02-.12.036-.242.05-.365l.03-.32.01-.181c.008-.135.011-.27.011-.406l-.012-.443a8.034 8.034 0 00-.078-.762l-.081-.449a8.012 8.012 0 00-5.843-6.097l-.422-.096-.353-.062-.358-.046-.477-.036L12 4zm-.117 8.997l-1.879-1.881L10 11a2 2 0 001.883 1.997zM12 7a4 4 0 013.92 4.804L11.194 7.08c.26-.053.53-.081.805-.081z",
fillRule: "evenodd"
}));
});
PersonCircleOffIcon.displayName = "PersonCircleOffIcon";
var PersonCircleOffIcon$1 = PersonCircleOffIcon;
var _excluded$2t = ["gradient"];
/**
* @component PersonCircleIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <PersonCircleIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <PersonCircleIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var PersonCircleIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2t);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "PersonCircleIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M12 2l.28.004.316.013.244.018.402.041.14.019.267.04.162.029.19.036a10.01 10.01 0 017.864 8.151L21.8 10l.046.244.056.352.031.244.017.154.022.257.02.367c.006.127.008.254.008.382l-.002.207-.01.299-.022.323-.04.397-.032.238-.059.354-.062.308-.05.22-.046.184a9.93 9.93 0 01-.12.422l-.092.283-.13.357-.113.283-.094.215-.161.341-.136.265-.178.32-.13.217c-.145.237-.302.47-.47.696l-.274.356-.229.273-.14.157-.258.274-.226.224-.104.099-.238.215-.312.262-.398.305-.284.199-.33.213a9.99 9.99 0 01-.35.208l-.266.145-.383.19-.291.132-.346.142-.358.132-.31.1-.402.116-.138.035-.187.045-.347.072-.443.074-.305.04-.16.016-.423.032-.271.011L12 22l-.2-.002-.331-.012-.373-.026-.167-.017-.164-.019-.246-.033-.336-.056-.3-.06-.31-.072-.415-.113-.297-.093-.323-.112-.284-.11-.343-.147-.266-.124-.28-.14-.159-.086-.328-.188-.177-.108-.297-.193-.383-.272-.316-.247-.316-.267-.333-.307-.208-.207-.247-.262-.17-.192-.245-.294-.18-.233a10.017 10.017 0 01-.361-.511l-.171-.27-.063-.103-.1-.17-.142-.259-.198-.392-.1-.213-.126-.295-.11-.281a9.91 9.91 0 01-.312-.984l-.096-.403-.062-.309-.059-.354-.06-.49-.028-.376-.013-.278A10.18 10.18 0 012 12C2 6.477 6.477 2 12 2zm0 16c-1.157 0-2.315.119-3.476.357a1.998 1.998 0 00-.831.385c.264.17.538.323.822.46l.287.133.295.122.356.13.292.09.146.042.27.068.248.055.281.051c.108.018.216.034.325.047l.38.037.28.017L12 20l.368-.008.167-.01.167-.012c.12-.01.24-.024.36-.04l.289-.044.24-.044.248-.054.313-.08.16-.047.234-.075.3-.107.395-.163.247-.114.304-.156.214-.12a8 8 0 00.3-.183 1.984 1.984 0 00-.83-.386A17.249 17.249 0 0012 18zm0-14a8 8 0 00-8 8l.008.352.014.24.025.28.024.196.04.265.043.236.063.29.046.184.083.29.034.11.113.329.17.42.07.158c.09.193.186.382.29.567l.202.34.126.194.241.34.18.23.134.162.235.264a3.988 3.988 0 011.981-1.05A19.248 19.248 0 0112 16c1.292 0 2.585.133 3.877.398.76.156 1.444.525 1.983 1.048l.236-.265.193-.236.125-.163.18-.25.17-.258.097-.157.094-.16.14-.257.131-.263.103-.225.133-.321.119-.328.098-.313.104-.39.063-.291.053-.297c.02-.12.036-.242.05-.365l.03-.32.01-.181c.008-.135.011-.27.011-.406l-.012-.443a8.034 8.034 0 00-.078-.762l-.081-.449a8.012 8.012 0 00-5.843-6.097l-.422-.096-.353-.062-.358-.046a8.054 8.054 0 00-.409-.033l.359.028-.213-.019-.214-.012L12 4zm0 3a4 4 0 110 8 4 4 0 010-8zm0 2a2 2 0 100 4 2 2 0 000-4z",
fillRule: "evenodd"
}));
});
PersonCircleIcon.displayName = "PersonCircleIcon";
var PersonCircleIcon$1 = PersonCircleIcon;
var _excluded$2s = ["gradient"];
/**
* @component PersonListIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <PersonListIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <PersonListIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var PersonListIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2s);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "PersonListIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M17 16c1.33 0 3.216.507 3.683 2l.216.682a.5.5 0 01-.191.562c-.726.504-1.96.756-3.703.756-1.77 0-3.019-.26-3.745-.78a.5.5 0 01-.198-.511l.15-.709c.423-1.38 2.458-2 3.788-2zm0-5a2 2 0 110 4 2 2 0 010-4zm-4.2 1a1 1 0 01-1 1H9a1 1 0 110-2h2.8a1 1 0 011 1zm-1.133 5a1 1 0 01-1 1H9a1 1 0 110-2h1.667a1 1 0 011 1zM19 6a1 1 0 110 2H9a1 1 0 010-2h10zM5 5.5c.83 0 1.5.67 1.5 1.5S5.83 8.5 5 8.5 3.5 7.83 3.5 7 4.17 5.5 5 5.5zm0 5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5-1.5-.67-1.5-1.5.67-1.5 1.5-1.5zm0 5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5-1.5-.67-1.5-1.5.67-1.5 1.5-1.5z"
}));
});
PersonListIcon.displayName = "PersonListIcon";
var PersonListIcon$1 = PersonListIcon;
var _excluded$2r = ["gradient"];
/**
* @component PersonPlusIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <PersonPlusIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <PersonPlusIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var PersonPlusIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2r);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "PersonPlusIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M12 13c1.382 0 2.764.119 4.145.357 1.687.29 3.06 1.306 3.598 2.665l1.135 2.862c.417 1.05-.27 2.18-1.534 2.526-.107.03-.217.052-.329.069A47.673 47.673 0 0112 22c-2.339 0-4.677-.174-7.015-.521-1.31-.195-2.181-1.234-1.947-2.321a1.73 1.73 0 01.083-.274l1.136-2.862c.539-1.359 1.91-2.375 3.597-2.665A24.402 24.402 0 0112 13zm0 2c-1.292 0-2.586.105-3.884.315-.896.145-1.624.653-1.91 1.333L5 19.51c2.335.327 4.668.49 7 .49a50.46 50.46 0 007-.49l-1.206-2.862c-.286-.68-1.014-1.188-1.91-1.333A24.237 24.237 0 0012 15zm0-13c.711 0 1.388.149 2 .416v2.349A3 3 0 1014.829 8h2.072A5.002 5.002 0 017 7a5 5 0 015-5zm8 0v2h2v2h-2v2h-2V5.999L16 6V4l2-.001V2h2z",
fillRule: "evenodd"
}));
});
PersonPlusIcon.displayName = "PersonPlusIcon";
var PersonPlusIcon$1 = PersonPlusIcon;
var _excluded$2q = ["gradient"];
/**
* @component PersonIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <PersonIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <PersonIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var PersonIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2q);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "PersonIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M12 13c1.382 0 2.764.119 4.145.357 1.687.29 3.06 1.306 3.598 2.665l1.135 2.862c.417 1.05-.27 2.18-1.534 2.526-.107.03-.217.052-.329.069A47.673 47.673 0 0112 22c-2.339 0-4.677-.174-7.015-.521-1.31-.195-2.181-1.234-1.947-2.321a1.73 1.73 0 01.083-.274l1.136-2.862c.539-1.359 1.91-2.375 3.597-2.665A24.402 24.402 0 0112 13zm0 2c-1.292 0-2.586.105-3.884.315-.896.145-1.624.653-1.91 1.333L5 19.51c2.335.327 4.668.49 7 .49a50.46 50.46 0 007-.49l-1.206-2.862c-.286-.68-1.014-1.188-1.91-1.333A24.237 24.237 0 0012 15zm0-13a5 5 0 110 10 5 5 0 010-10zm0 2a3 3 0 100 6 3 3 0 000-6z",
fillRule: "evenodd"
}));
});
PersonIcon.displayName = "PersonIcon";
var PersonIcon$1 = PersonIcon;
var _excluded$2p = ["gradient"];
/**
* @component PinIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <PinIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <PinIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var PinIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2p);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
xmlns: "http://www.w3.org/2000/svg",
width: 24,
height: 24,
"data-testid": "PinIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M2.585 5.739c-.78.78-.78 2.044 0 2.824l5.367 5.367.77 3.585a.993.993 0 00.705.756 1 1 0 00.98-.256l3.098-3.098 4.79 4.79a.998.998 0 101.412-1.412l-4.79-4.79 3.098-3.098a.99.99 0 00.291-.638.991.991 0 00-.253-.736.994.994 0 00-.545-.312l-3.578-.769-5.367-5.367a1.997 1.997 0 00-2.824 0L2.585 5.739zm12.723 4.552l-1.797-.386a1.997 1.997 0 01-.993-.54L7.151 3.996 3.997 7.151l5.367 5.367c.272.272.46.617.54.993l.387 1.796 5.016-5.016z",
clipRule: "evenodd"
}));
});
PinIcon.displayName = "PinIcon";
var PinIcon$1 = PinIcon;
var _excluded$2o = ["gradient"];
/**
* @component PlayCircleOutlineIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <PlayCircleOutlineIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <PlayCircleOutlineIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var PlayCircleOutlineIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2o);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "PlayCircleOutlineIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm0 2a8 8 0 100 16 8 8 0 000-16zM9.8 8l6.4 4-6.4 4V8z",
fillRule: "evenodd"
}));
});
PlayCircleOutlineIcon.displayName = "PlayCircleOutlineIcon";
var PlayCircleOutlineIcon$1 = PlayCircleOutlineIcon;
var _excluded$2n = ["gradient"];
/**
* @component PlayIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <PlayIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <PlayIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var PlayIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2n);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "PlayIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M12 3a9 9 0 110 18 9 9 0 010-18zm-2 6v6l5-3-5-3z",
fillRule: "evenodd"
}));
});
PlayIcon.displayName = "PlayIcon";
var PlayIcon$1 = PlayIcon;
var _excluded$2m = ["gradient"];
/**
* @component PlaySmallIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <PlaySmallIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <PlaySmallIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var PlaySmallIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2m);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "PlaySmallIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M9 17V7l8 5z",
fillRule: "evenodd"
}));
});
PlaySmallIcon.displayName = "PlaySmallIcon";
var PlaySmallIcon$1 = PlaySmallIcon;
var _excluded$2l = ["gradient"];
/**
* @component PriorityLowIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <PriorityLowIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <PriorityLowIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var PriorityLowIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2l);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "PriorityLowIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M12 17.25c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5-1.5-.67-1.5-1.5.67-1.5 1.5-1.5zm0-13.5c.748 0 1.363.57 1.432 1.3l.006.169L13 14.75h-2l-.438-9.501a1.439 1.439 0 011.24-1.485l.168-.014H12z"
}));
});
PriorityLowIcon.displayName = "PriorityLowIcon";
var PriorityLowIcon$1 = PriorityLowIcon;
var _excluded$2k = ["gradient"];
/**
* @component ProjectAddIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <ProjectAddIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <ProjectAddIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var ProjectAddIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2k);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "ProjectAddIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M4 4v5h5V4H4zm0-2h5a2 2 0 012 2v5a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2zm0 13v5h5v-5H4zm0-2h5a2 2 0 012 2v5a2 2 0 01-2 2H4a2 2 0 01-2-2v-5a2 2 0 012-2zm11-9v5h5V4h-5zm4 10v3h3v2h-3v3h-2v-3h-3v-2h3v-3h2zm1-12a2 2 0 012 2v5a2 2 0 01-2 2h-5a2 2 0 01-2-2V4a2 2 0 012-2h5z",
fillRule: "evenodd"
}));
});
ProjectAddIcon.displayName = "ProjectAddIcon";
var ProjectAddIcon$1 = ProjectAddIcon;
var _excluded$2j = ["gradient"];
/**
* @component ProjectSearchIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <ProjectSearchIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <ProjectSearchIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var ProjectSearchIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2j);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "ProjectSearchIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M17 13a4 4 0 013.446 6.032L22 21l-1 1-1.968-1.554A3.999 3.999 0 1117 13zm-8 0a2 2 0 012 2v5a2 2 0 01-2 2H4a2 2 0 01-2-2v-5a2 2 0 012-2h5zm0 2H4v5h5v-5zm8 0a2 2 0 100 4 2 2 0 000-4zM9 2a2 2 0 012 2v5a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2h5zm11 0a2 2 0 012 2v5a2 2 0 01-2 2h-5a2 2 0 01-2-2V4a2 2 0 012-2h5zM9 4H4v5h5V4zm11 0h-5v5h5V4z"
}));
});
ProjectSearchIcon.displayName = "ProjectSearchIcon";
var ProjectSearchIcon$1 = ProjectSearchIcon;
var _excluded$2i = ["gradient"];
/**
* @component ProjectStarIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <ProjectStarIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <ProjectStarIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var ProjectStarIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2i);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "ProjectStarIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M4 15v5h5v-5H4zm0-2h5a2 2 0 012 2v5a2 2 0 01-2 2H4a2 2 0 01-2-2v-5a2 2 0 012-2zm11-9v5h5V4h-5zm0-2h5a2 2 0 012 2v5a2 2 0 01-2 2h-5a2 2 0 01-2-2V4a2 2 0 012-2zm0 13v5h5v-5h-5zm0-2h5a2 2 0 012 2v5a2 2 0 01-2 2h-5a2 2 0 01-2-2v-5a2 2 0 012-2z"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M6.505 9.631L4.198 10.9a.429.429 0 01-.592-.193.477.477 0 01-.044-.29l.44-2.687-1.865-1.903a.474.474 0 01-.008-.649.432.432 0 01.251-.133l2.578-.392 1.153-2.445a.43.43 0 01.787 0L8.05 4.653l2.578.392c.24.036.406.269.371.52a.467.467 0 01-.128.262L9.006 7.73l.44 2.686a.456.456 0 01-.357.53.42.42 0 01-.278-.046L6.505 9.63z"
}));
});
ProjectStarIcon.displayName = "ProjectStarIcon";
var ProjectStarIcon$1 = ProjectStarIcon;
var _excluded$2h = ["gradient"];
/**
* @component ProjectTemplateAddIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <ProjectTemplateAddIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <ProjectTemplateAddIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var ProjectTemplateAddIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2h);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "ProjectTemplateAddIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M20 15v3h3v2h-3v3h-2v-3h-3v-2h3v-3h2zm0-7a2 2 0 012 2v3h-2v-3H10v10h3v2h-3a2 2 0 01-2-2V10a2 2 0 012-2h10zM7 5h10a2 2 0 011.995 1.85L19 7H7v12a2 2 0 01-2-2V7a2 2 0 012-2zm7-3a2 2 0 011.995 1.85L16 4H4v12a2 2 0 01-2-2V4a2 2 0 012-2h10z",
fillRule: "evenodd"
}));
});
ProjectTemplateAddIcon.displayName = "ProjectTemplateAddIcon";
var ProjectTemplateAddIcon$1 = ProjectTemplateAddIcon;
var _excluded$2g = ["gradient"];
/**
* @component ProjectTemplateConvertIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <ProjectTemplateConvertIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <ProjectTemplateConvertIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var ProjectTemplateConvertIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2g);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "ProjectTemplateConvertIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M20 4a2 2 0 012 2v14a2 2 0 01-2 2H6a2 2 0 01-2-2v-8h2v8h14V6h-8V4h8zM8 1a2 2 0 012 2v5a2 2 0 01-2 2H3a2 2 0 01-2-2V3a2 2 0 012-2h5zm8.37 10.121l-1.906 1.93L17 15.585 15.586 17l-2.536-2.536-1.929 1.907v-5.25h5.25zM8 3v5H3V3h5z",
fillRule: "evenodd"
}));
});
ProjectTemplateConvertIcon.displayName = "ProjectTemplateConvertIcon";
var ProjectTemplateConvertIcon$1 = ProjectTemplateConvertIcon;
var _excluded$2f = ["gradient"];
/**
* @component ProjectTemplateIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <ProjectTemplateIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <ProjectTemplateIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var ProjectTemplateIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2f);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "ProjectTemplateIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M20 4a2 2 0 012 2v14a2 2 0 01-2 2H6a2 2 0 01-2-2v-8h2v8h14V6h-8V4h8zm-8.464 6.121l2.535 2.536L16 10.75V16h-5.249l1.906-1.929-2.536-2.535 1.415-1.415zM8 1a2 2 0 012 2v5a2 2 0 01-2 2H3a2 2 0 01-2-2V3a2 2 0 012-2h5zm0 2H3v5h5V3z",
fillRule: "evenodd"
}));
});
ProjectTemplateIcon.displayName = "ProjectTemplateIcon";
var ProjectTemplateIcon$1 = ProjectTemplateIcon;
var _excluded$2e = ["gradient"];
/**
* @component ProjectsIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <ProjectsIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <ProjectsIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var ProjectsIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2e);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "ProjectsIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M4 4v5h5V4H4zm0-2h5a2 2 0 012 2v5a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2zm0 13v5h5v-5H4zm0-2h5a2 2 0 012 2v5a2 2 0 01-2 2H4a2 2 0 01-2-2v-5a2 2 0 012-2zm11-9v5h5V4h-5zm0-2h5a2 2 0 012 2v5a2 2 0 01-2 2h-5a2 2 0 01-2-2V4a2 2 0 012-2zm0 13v5h5v-5h-5zm0-2h5a2 2 0 012 2v5a2 2 0 01-2 2h-5a2 2 0 01-2-2v-5a2 2 0 012-2z"
}), /*#__PURE__*/React__default["default"].createElement("path", {
stroke: "#F4F5F7",
strokeWidth: 0.1,
opacity: 0.01,
d: "M.05.05h23.9v23.9H.05z"
}));
});
ProjectsIcon.displayName = "ProjectsIcon";
var ProjectsIcon$1 = ProjectsIcon;
var _excluded$2d = ["gradient"];
/**
* @component RadioBlankIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <RadioBlankIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <RadioBlankIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var RadioBlankIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2d);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "RadioBlankIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm0 2a8 8 0 100 16 8 8 0 000-16z",
fillRule: "evenodd"
}));
});
RadioBlankIcon.displayName = "RadioBlankIcon";
var RadioBlankIcon$1 = RadioBlankIcon;
var _excluded$2c = ["gradient"];
/**
* @component RadioButtonIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <RadioButtonIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <RadioButtonIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var RadioButtonIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2c);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 16,
height: 16,
viewBox: "0 0 16 16",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "RadioButtonIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("g", {
fillRule: "evenodd"
}, /*#__PURE__*/React__default["default"].createElement("circle", {
stroke: "#5D2BFF",
cx: 8,
cy: 8,
r: 7.5
}), /*#__PURE__*/React__default["default"].createElement("circle", {
cx: 8,
cy: 8,
r: 5
})));
});
RadioButtonIcon.displayName = "RadioButtonIcon";
var RadioButtonIcon$1 = RadioButtonIcon;
var _excluded$2b = ["gradient"];
/**
* @component RearangeIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <RearangeIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <RearangeIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var RearangeIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2b);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "RearangeIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M9 16a2 2 0 110 4 2 2 0 010-4zm6 0a2 2 0 110 4 2 2 0 010-4zm-6-6a2 2 0 110 4 2 2 0 010-4zm6 0a2 2 0 110 4 2 2 0 010-4zM9 4a2 2 0 110 4 2 2 0 010-4zm6 0a2 2 0 110 4 2 2 0 010-4z",
fillRule: "evenodd"
}));
});
RearangeIcon.displayName = "RearangeIcon";
var RearangeIcon$1 = RearangeIcon;
var _excluded$2a = ["gradient"];
/**
* @component RearrangeSmallIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <RearrangeSmallIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <RearrangeSmallIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var RearrangeSmallIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2a);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 12,
height: 12,
viewBox: "0 0 12 12",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "RearrangeSmallIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M4 8a1 1 0 110 2 1 1 0 010-2zm4 0a1 1 0 110 2 1 1 0 010-2zM4 5a1 1 0 110 2 1 1 0 010-2zm4 0a1 1 0 110 2 1 1 0 010-2zM4 2a1 1 0 110 2 1 1 0 010-2zm4 0a1 1 0 110 2 1 1 0 010-2z",
fillRule: "evenodd"
}));
});
RearrangeSmallIcon.displayName = "RearrangeSmallIcon";
var RearrangeSmallIcon$1 = RearrangeSmallIcon;
var _excluded$29 = ["gradient"];
/**
* @component RecurringCheckmarkSmallIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <RecurringCheckmarkSmallIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <RecurringCheckmarkSmallIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var RecurringCheckmarkSmallIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$29);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 12,
height: 12,
viewBox: "0 0 12 12",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "RecurringCheckmarkSmallIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M1 5.874a5.002 5.002 0 008.743 3.442l-.78-.45 2.3-.982.3 2.482-.939-.542A6.002 6.002 0 01.001 6.141l1-.267zm6.93-1.177a.5.5 0 010 .707L5.975 7.39a.5.5 0 01-.707 0l-.971-.975a.5.5 0 01.707-.708l.617.622 1.602-1.63a.5.5 0 01.707 0zM9 .804a5.996 5.996 0 013 5.052l-1.001.268.001-.043a5.002 5.002 0 00-8.743-3.398l.779.451-2.3.982-.298-2.482.938.54A6.002 6.002 0 019 .805z",
fillRule: "evenodd"
}));
});
RecurringCheckmarkSmallIcon.displayName = "RecurringCheckmarkSmallIcon";
var RecurringCheckmarkSmallIcon$1 = RecurringCheckmarkSmallIcon;
var _excluded$28 = ["gradient"];
/**
* @component RecurringCheckmarkIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <RecurringCheckmarkIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <RecurringCheckmarkIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var RecurringCheckmarkIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$28);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "RecurringCheckmarkIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M5.014 12a6.944 6.944 0 001.826 4.73l.21.22a7 7 0 009.727.167l.173-.167-1.414-1.414 4.871-.63-.629 4.872-1.414-1.414a9 9 0 01-12.728 0 8.891 8.891 0 01-2.498-4.788A9.017 9.017 0 013 12.01h.006V12h2.008zm10.593-2.293a1 1 0 010 1.414l-3.657 3.657a1 1 0 01-1.414 0L8.707 12.95a1 1 0 011.414-1.414l1.12 1.12 2.951-2.949a1 1 0 011.415 0zm-3.246-6.7c2.1.084 4.175.898 5.813 2.444l.19.185.225.234.096.104.118.133a8.861 8.861 0 012.04 4.216l.043.25c.071.44.109.886.113 1.332h-.006l.001.095h-2.008a6.955 6.955 0 00-1.245-4.005l-.186-.254-.094-.12a7 7 0 00-10.238-.737l-.173.166 1.414 1.414-4.871.63.629-4.872 1.414 1.414a8.976 8.976 0 016.725-2.629z",
fillRule: "evenodd"
}));
});
RecurringCheckmarkIcon.displayName = "RecurringCheckmarkIcon";
var RecurringCheckmarkIcon$1 = RecurringCheckmarkIcon;
var _excluded$27 = ["gradient"];
/**
* @component RecurringDollarIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <RecurringDollarIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <RecurringDollarIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var RecurringDollarIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$27);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
xmlns: "http://www.w3.org/2000/svg",
width: 24,
height: 24,
"data-testid": "RecurringDollarIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M5.014 12a6.944 6.944 0 001.826 4.73l.21.22a7 7 0 009.727.167l.173-.167-1.414-1.414 4.871-.63-.629 4.872-1.414-1.414a9 9 0 01-12.728 0 8.892 8.892 0 01-2.498-4.789A9.016 9.016 0 013 12.01h.006V12h2.008zm7.347-8.993c2.1.084 4.175.898 5.813 2.444l.19.185.225.234.096.104.118.133a8.862 8.862 0 012.04 4.216l.043.25c.071.44.109.886.114 1.332h-.007l.001.095h-2.008a6.955 6.955 0 00-1.245-4.005l-.186-.254-.094-.12a7 7 0 00-10.238-.737l-.173.166 1.414 1.414-4.872.63.63-4.872 1.414 1.414a8.976 8.976 0 016.725-2.629z",
clipRule: "evenodd"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M13 17h-2v-1H9v-2h4v-1h-3a1 1 0 01-1-1V9a1 1 0 011-1h1V7h2v1h2v2h-4v1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1v1z"
}));
});
RecurringDollarIcon.displayName = "RecurringDollarIcon";
var RecurringDollarIcon$1 = RecurringDollarIcon;
var _excluded$26 = ["gradient"];
/**
* @component RecurringSmallIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <RecurringSmallIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <RecurringSmallIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var RecurringSmallIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$26);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 12,
height: 12,
viewBox: "0 0 12 12",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "RecurringSmallIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M9.182 2.818l.113.117.107.119a4.43 4.43 0 011.02 2.107l.021.125c.036.22.054.444.057.666h-.004l.001.048H9.493a3.475 3.475 0 00-.715-2.13l-.047-.06a3.5 3.5 0 00-5.119-.369l-.087.084.707.707-2.436.315.315-2.436.707.707A4.488 4.488 0 016.18 1.504c1.05.041 2.088.449 2.907 1.222l.095.092zM2.818 9.182a4.446 4.446 0 01-1.249-2.394 4.508 4.508 0 01-.069-.783h.003V6h1.004a3.472 3.472 0 00.913 2.365l.105.11a3.5 3.5 0 004.863.084l.087-.084-.707-.707 2.436-.315-.315 2.436-.707-.707a4.5 4.5 0 01-6.364 0z"
}));
});
RecurringSmallIcon.displayName = "RecurringSmallIcon";
var RecurringSmallIcon$1 = RecurringSmallIcon;
var _excluded$25 = ["gradient"];
/**
* @component ReportTimeIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <ReportTimeIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <ReportTimeIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var ReportTimeIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$25);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "ReportTimeIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M15 9a7 7 0 110 14 7 7 0 010-14zm-3-9c1.235 0 2.29.758 2.752 1.828L14.82 2H19c1.05 0 1.918.82 1.994 1.851L21 4v5.292a9.017 9.017 0 00-1.999-1.356L19 4h-2v3H7V4H5v16l1.936.001c.362.728.82 1.4 1.356 2L5 22c-1.05 0-1.918-.82-1.994-1.851L3 20V4c0-1.05.82-1.918 1.851-1.994L5 2h4.18C9.6.84 10.7 0 12 0zm3 11a5 5 0 100 10 5 5 0 000-10zm1 2v1.999L19 15v2h-5v-4h2zM12 2c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1z",
fillRule: "evenodd"
}));
});
ReportTimeIcon.displayName = "ReportTimeIcon";
var ReportTimeIcon$1 = ReportTimeIcon;
var _excluded$24 = ["gradient"];
/**
* @component ReportsIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <ReportsIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <ReportsIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var ReportsIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$24);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "ReportsIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M17 6v2H7V6H6v15h12V6h-1zm0-2h1a2 2 0 012 2v15a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h1V3h2c.336-2 1.336-3 3-3s2.664 1 3 3h2v1zM8 16h2v3H8v-3zm3-3h2v6h-2v-6zm3-3h2v9h-2v-9zm-1-5V3.332C13 2.327 12.61 2 12 2s-1 .303-1 1.332V5H9v1h6V5h-2z"
}), /*#__PURE__*/React__default["default"].createElement("path", {
stroke: "#F4F5F7",
strokeWidth: 0.1,
opacity: 0.01,
d: "M.05.05h23.9v23.9H.05z"
}));
});
ReportsIcon.displayName = "ReportsIcon";
var ReportsIcon$1 = ReportsIcon;
var _excluded$23 = ["gradient"];
/**
* @component RocketSmallIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <RocketSmallIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <RocketSmallIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var RocketSmallIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$23);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
xmlns: "http://www.w3.org/2000/svg",
width: 18,
height: 18,
"data-testid": "RocketSmallIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M11.4 13.35H3v-3l1.828-2.284a12.928 12.928 0 01-.028-.838C4.8 5.079 6.6 2.52 9 .75c2.4 1.77 4.2 4.33 4.2 6.478 0 .265-.01.547-.027.838L15 10.35v3h-3.6zm.89-1.2h1.51v-1.38l-.825-1.03c-.151.878-.38 1.734-.686 2.41zm-6.58 0c-.305-.676-.534-1.532-.685-2.41L4.2 10.77v1.38h1.51zm5.978 2.4L9 17.55l-2.688-3h5.376zM9 15.75l1.152-1.2H7.848L9 15.75zM6 7.228c0 1.958.52 4.184 1.065 4.922h3.87C11.48 11.412 12 9.186 12 7.228c0-1.448-1.178-3.383-3-4.945C7.178 3.845 6 5.78 6 7.228zm3 .722a1.2 1.2 0 110-2.4 1.2 1.2 0 010 2.4z"
}));
});
RocketSmallIcon.displayName = "RocketSmallIcon";
var RocketSmallIcon$1 = RocketSmallIcon;
var _excluded$22 = ["gradient"];
/**
* @component RocketIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <RocketIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <RocketIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var RocketIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$22);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "RocketIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M15.2 17.8H4v-4l2.437-3.046A17.833 17.833 0 016.4 9.637C6.4 6.772 8.8 3.36 12 1c3.2 2.36 5.6 5.772 5.6 8.637 0 .354-.012.73-.037 1.117L20 13.8v4h-4.8zm1.186-1.6H18.4v-1.839l-1.1-1.374c-.202 1.171-.507 2.312-.915 3.213zm-8.771 0c-.408-.901-.713-2.042-.916-3.213L5.6 14.361V16.2h2.015zm7.97 3.2L12 23.4l-3.585-4h7.17zM12 21l1.536-1.6h-3.072L12 21zM8 9.637c0 2.61.694 5.579 1.42 6.563h5.16c.726-.984 1.42-3.952 1.42-6.563 0-1.93-1.57-4.51-4-6.594-2.43 2.084-4 4.664-4 6.594zm4 .963a1.6 1.6 0 110-3.2 1.6 1.6 0 010 3.2z"
}));
});
RocketIcon.displayName = "RocketIcon";
var RocketIcon$1 = RocketIcon;
var _excluded$21 = ["gradient"];
/**
* @component SaveIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <SaveIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <SaveIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var SaveIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$21);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "SaveIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M17 3H5a2 2 0 00-2 2v14a2 2 0 002 2h14c1.1 0 2-.9 2-2V7l-4-4zm2 16H5V5h11.17L19 7.83V19zm-7-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3zM7 7h8v2H7V7z"
}));
});
SaveIcon.displayName = "SaveIcon";
var SaveIcon$1 = SaveIcon;
var _excluded$20 = ["gradient"];
/**
* @component SearchLargeIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <SearchLargeIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <SearchLargeIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var SearchLargeIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$20);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 32,
height: 32,
viewBox: "0 0 32 32",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "SearchLargeIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M14 4c5.523 0 10 4.477 10 10 0 2.31-.783 4.436-2.098 6.129.088.04.17.09.248.15l.126.111 5.334 5.334a1.333 1.333 0 01-1.76 1.996l-.126-.11-5.334-5.334a1.332 1.332 0 01-.263-.373A9.953 9.953 0 0114 24C8.477 24 4 19.523 4 14S8.477 4 14 4zm0 2.667a7.333 7.333 0 100 14.666 7.333 7.333 0 000-14.666z"
}));
});
SearchLargeIcon.displayName = "SearchLargeIcon";
var SearchLargeIcon$1 = SearchLargeIcon;
var _excluded$1$ = ["gradient"];
/**
* @component SearchIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <SearchIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <SearchIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var SearchIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$1$);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "SearchIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M16.717 15.708a6 6 0 10-1.07 1.056l.602-.46.468-.596zm1.572 1.238l2.883 2.882a1 1 0 01-1.415 1.415l-2.891-2.892a8 8 0 111.423-1.405z"
}));
});
SearchIcon.displayName = "SearchIcon";
var SearchIcon$1 = SearchIcon;
var _excluded$1_ = ["gradient"];
/**
* @component SendBlankIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <SendBlankIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <SendBlankIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var SendBlankIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$1_);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "SendBlankIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M1.241 1.405A2 2 0 013.812.53l.14.07 17.801 9.641a2 2 0 01.135 3.438l-.135.08-17.8 9.642a2 2 0 01-2.948-1.61L1 21.642V15l6-3-6-3V2.358a2 2 0 01.241-.953zM3 2.358v5.406L11.472 12 3 16.235v5.406L20.799 12 3 2.358z",
fillRule: "evenodd"
}));
});
SendBlankIcon.displayName = "SendBlankIcon";
var SendBlankIcon$1 = SendBlankIcon;
var _excluded$1Z = ["gradient"];
/**
* @component SendFilledIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <SendFilledIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <SendFilledIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var SendFilledIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$1Z);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "SendFilledIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M3.953 23.4l17.8-9.641a2 2 0 000-3.518L3.953.6A2 2 0 001 2.358V9l8 3-8 3v6.642a2 2 0 002.953 1.759z",
fillRule: "evenodd"
}));
});
SendFilledIcon.displayName = "SendFilledIcon";
var SendFilledIcon$1 = SendFilledIcon;
var _excluded$1Y = ["gradient"];
/**
* @component SettingsIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <SettingsIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <SettingsIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var SettingsIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$1Y);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "SettingsIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M4.14 16H3a1 1 0 000 2h1.14c.45 1.72 2 3 3.86 3 1.86 0 3.41-1.28 3.86-3H21a1 1 0 000-2h-9.14c-.45-1.72-2-3-3.86-3-1.86 0-3.41 1.28-3.86 3zM6 17c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2zM16 3c-1.86 0-3.41 1.28-3.86 3H3a1 1 0 100 2h9.14c.45 1.72 2 3 3.86 3 1.86 0 3.41-1.28 3.86-3H21a1 1 0 000-2h-1.14c-.45-1.72-2-3-3.86-3zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z",
fillRule: "evenodd"
}));
});
SettingsIcon.displayName = "SettingsIcon";
var SettingsIcon$1 = SettingsIcon;
var _excluded$1X = ["gradient"];
/**
* @component ShieldIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <ShieldIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <ShieldIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var ShieldIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$1X);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "ShieldIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M11.873 4.063c.084-.01.17-.01.254 0l5.92.741c.563.07.962.584.892 1.147l-1.18 9.442c-.033.272-.175.52-.392.687l-4.741 3.652a1.026 1.026 0 01-1.252 0L6.633 16.08a1.028 1.028 0 01-.393-.687L5.061 5.951a1.027 1.027 0 01.891-1.147l5.92-.74zm.509-2.04a3.076 3.076 0 00-.764 0l-5.92.742a3.082 3.082 0 00-2.674 3.441l1.179 9.442c.102.817.526 1.56 1.178 2.061l4.741 3.652a3.077 3.077 0 003.756 0l4.741-3.652a3.084 3.084 0 001.178-2.061l1.179-9.442a3.082 3.082 0 00-2.674-3.441l-5.92-.741zm3.825 8.684a1 1 0 10-1.414-1.414l-3.71 3.71-1.302-1.628a1 1 0 10-1.562 1.25l1.302 1.627a2 2 0 002.976.165l3.71-3.71z"
}));
});
ShieldIcon.displayName = "ShieldIcon";
var ShieldIcon$1 = ShieldIcon;
var _excluded$1W = ["gradient"];
/**
* @component SortGeneralIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <SortGeneralIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <SortGeneralIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var SortGeneralIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$1W);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "SortGeneralIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M17 6v11h3l-4 4-4-4h3V6h2zM8 3l4 4H9v11H7V7H4l4-4z",
fillRule: "evenodd"
}));
});
SortGeneralIcon.displayName = "SortGeneralIcon";
var SortGeneralIcon$1 = SortGeneralIcon;
var _excluded$1V = ["gradient"];
/**
* @component SortIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <SortIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <SortIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var SortIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$1V);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 10,
height: 10,
viewBox: "0 0 10 10",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "SortIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M10 8v2H0V8h10zM7 4v2H0V4h7zM4 0v2H0V0h4z",
fillRule: "evenodd"
}));
});
SortIcon.displayName = "SortIcon";
var SortIcon$1 = SortIcon;
var _excluded$1U = ["gradient"];
/**
* @component SortListIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <SortListIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <SortListIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var SortListIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$1U);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 20,
height: 18,
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "SortListIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M16 0l4 4h-3v10h3l-4 4-4-4h3V4h-3l4-4zM9 13a1 1 0 110 2H1a1 1 0 110-2h8zm3-5a1 1 0 110 2H4a1 1 0 010-2h8zM9 3a1 1 0 010 2H1a1 1 0 010-2h8z"
}));
});
SortListIcon.displayName = "SortListIcon";
var SortListIcon$1 = SortListIcon;
var _excluded$1T = ["gradient"];
/**
* @component SortSmallIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <SortSmallIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <SortSmallIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var SortSmallIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$1T);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 10,
height: 10,
viewBox: "0 0 10 10",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "SortSmallIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M10 1v2H0V1h10zM7 4v2H0V4h7zM4 7v2H0V7h4z"
}));
});
SortSmallIcon.displayName = "SortSmallIcon";
var SortSmallIcon$1 = SortSmallIcon;
var _excluded$1S = ["gradient"];
/**
* @component SparkIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <SparkIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <SparkIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var SparkIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$1S);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
xmlns: "http://www.w3.org/2000/svg",
width: 24,
height: 24,
viewBox: "0 0 24 24",
"data-testid": "SparkIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M11.616 3.523c.082-.232.442-.232.524 0a15.2 15.2 0 003.574 5.643 15.241 15.241 0 005.428 3.498l.212.078c.231.082.232.44 0 .522l-.212.077a15.233 15.233 0 00-5.428 3.497 15.263 15.263 0 00-3.363 5.081l-.132.346-.077.212-.019.041c-.1.177-.385.177-.485 0l-.019-.04-.078-.213-.134-.346a15.291 15.291 0 00-3.365-5.08 15.265 15.265 0 00-5.284-3.446l-.358-.13c-.232-.082-.232-.443 0-.524a15.194 15.194 0 005.642-3.573 15.198 15.198 0 003.574-5.643zm.262 4.017a17.346 17.346 0 01-2.421 3.04A17.338 17.338 0 016.415 13a17.388 17.388 0 013.041 2.424 17.404 17.404 0 012.423 3.04 17.343 17.343 0 012.42-3.04 17.36 17.36 0 013.04-2.422 17.37 17.37 0 01-3.04-2.422 17.363 17.363 0 01-2.421-3.04z",
clipRule: "evenodd"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M19.707 2.103c.037-.094.19-.094.226 0A4.194 4.194 0 0022.31 4.48c.094.037.094.19 0 .227a4.19 4.19 0 00-2.377 2.376c-.036.094-.189.094-.225 0a4.195 4.195 0 00-2.377-2.376c-.094-.037-.094-.19 0-.227a4.186 4.186 0 002.376-2.377z"
}));
});
SparkIcon.displayName = "SparkIcon";
var SparkIcon$1 = SparkIcon;
var _excluded$1R = ["gradient"];
/**
* @component StarOutlineIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <StarOutlineIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <StarOutlineIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var StarOutlineIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$1R);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "StarOutlineIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M12.706 2.103a1 1 0 01.454.455l2.63 5.329 5.881.854a1 1 0 01.554 1.706l-4.255 4.148 1.005 5.857a1 1 0 01-1.451 1.054l-5.26-2.765-5.26 2.765a1 1 0 01-1.451-1.054l1.004-5.857-4.255-4.148a1 1 0 01.554-1.706l5.881-.854 2.63-5.33a1 1 0 011.34-.454zm1.756 7.612L12.263 5.26l-2.198 4.455-4.916.713 3.557 3.469-.84 4.895 4.398-2.31 4.396 2.31-.839-4.895 3.557-3.468-4.916-.714z",
fillRule: "evenodd"
}));
});
StarOutlineIcon.displayName = "StarOutlineIcon";
var StarOutlineIcon$1 = StarOutlineIcon;
var _excluded$1Q = ["gradient"];
/**
* @component StarIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <StarIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <StarIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var StarIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$1Q);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "StarIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M12.264 18.74l-5.26 2.766a1 1 0 01-1.451-1.054l1.004-5.857-4.255-4.148a1 1 0 01.554-1.706l5.881-.854 2.63-5.33a1 1 0 011.793 0l2.63 5.33 5.881.854a1 1 0 01.554 1.706l-4.255 4.148 1.005 5.857a1 1 0 01-1.451 1.054l-5.26-2.765z",
fillRule: "nonzero"
}));
});
StarIcon.displayName = "StarIcon";
var StarIcon$1 = StarIcon;
var _excluded$1P = ["gradient"];
/**
* @component StatusIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <StatusIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <StatusIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var StatusIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$1P);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "StatusIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm0 2a8 8 0 100 16 8 8 0 000-16z"
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M10.579 6.003a1 1 0 01.875.696l2.3 7.285 1.372-2.47A1 1 0 0116 11h2a1 1 0 110 2h-1.412l-2.214 3.986a1 1 0 01-1.828-.185L10.29 9.656l-1.396 2.791A1 1 0 018 13H6a1 1 0 110-2h1.382l2.224-4.447a1 1 0 01.973-.55z"
}));
});
StatusIcon.displayName = "StatusIcon";
var StatusIcon$1 = StatusIcon;
var _excluded$1O = ["gradient"];
/**
* @component StopwatchIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <StopwatchIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <StopwatchIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var StopwatchIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$1O);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
xmlns: "http://www.w3.org/2000/svg",
width: 16,
height: 16,
"data-testid": "StopwatchIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M8 1.333a6.667 6.667 0 110 13.333A6.667 6.667 0 018 1.333zm0 1.334a5.333 5.333 0 100 10.666A5.333 5.333 0 008 2.667zM8.666 4v4.667H7.333V4h1.333zm4.39-3.886l2.83 2.829-.943.942-2.829-2.828.943-.943z",
clipRule: "evenodd"
}));
});
StopwatchIcon.displayName = "StopwatchIcon";
var StopwatchIcon$1 = StopwatchIcon;
var _excluded$1N = ["gradient"];
/**
* @component SunIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <SunIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <SunIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var SunIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$1N);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 22,
height: 22,
viewBox: "0 0 22 22",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "SunIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M11 0a1 1 0 011 1v1.818a1 1 0 11-2 0V1a1 1 0 011-1z"
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M5 11a6 6 0 1112 0 6 6 0 01-12 0zm6-4a4 4 0 100 8 4 4 0 000-8z"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M12 19.182a1 1 0 10-2 0V21a1 1 0 102 0v-1.818zM3.22 3.22a1 1 0 011.414 0l1.291 1.291a1 1 0 11-1.414 1.414l-1.29-1.29a1 1 0 010-1.415zM17.489 16.075a1 1 0 00-1.414 1.414l1.29 1.29a1 1 0 001.415-1.413l-1.291-1.291zM0 11a1 1 0 011-1h1.818a1 1 0 110 2H1a1 1 0 01-1-1zM19.182 10a1 1 0 100 2H21a1 1 0 100-2h-1.818zM5.925 16.075a1 1 0 010 1.414l-1.29 1.29a1 1 0 01-1.415-1.413l1.291-1.291a1 1 0 011.414 0zM18.78 4.634a1 1 0 00-1.414-1.414l-1.291 1.291a1 1 0 001.414 1.414l1.29-1.29z"
}));
});
SunIcon.displayName = "SunIcon";
var SunIcon$1 = SunIcon;
var _excluded$1M = ["gradient"];
/**
* @component SystemSettingsIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <SystemSettingsIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <SystemSettingsIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var SystemSettingsIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$1M);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "SystemSettingsIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__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 _excluded$1L = ["gradient"];
/**
* @component TaskAddIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <TaskAddIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <TaskAddIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var TaskAddIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$1L);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "TaskAddIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M12 2c5.523 0 10 4.477 10 10h-2a8 8 0 10-8 8v2C6.477 22 2 17.523 2 12S6.477 2 12 2zm7 12v3h3v2h-3v3h-2v-3.001L14 19v-2l3-.001V14h2zm-3.393-4.293a1 1 0 010 1.414l-3.657 3.657a1 1 0 01-1.414 0L8.707 12.95a1 1 0 011.414-1.414l1.12 1.12 2.951-2.949a1 1 0 011.415 0z",
fillRule: "evenodd"
}));
});
TaskAddIcon.displayName = "TaskAddIcon";
var TaskAddIcon$1 = TaskAddIcon;
var _excluded$1K = ["gradient"];
/**
* @component TaskListAddIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <TaskListAddIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <TaskListAddIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var TaskListAddIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$1K);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "TaskListAddIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M20 14v3h3v2h-3v3h-2v-3h-3v-2h3v-3h2zm-8 4a1 1 0 010 2H5a1 1 0 010-2h7zm0-4a1 1 0 010 2H5a1 1 0 010-2h7zm7-4a1 1 0 010 2H5a1 1 0 010-2h14zm0-6a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5a1 1 0 011-1h14z",
fillRule: "evenodd"
}));
});
TaskListAddIcon.displayName = "TaskListAddIcon";
var TaskListAddIcon$1 = TaskListAddIcon;
var _excluded$1J = ["gradient"];
/**
* @component TaskListCompleteIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <TaskListCompleteIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <TaskListCompleteIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var TaskListCompleteIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$1J);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "TaskListCompleteIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M11 18a1 1 0 110 2H5a1 1 0 110-2h6zm0-4a1 1 0 110 2H5a1 1 0 110-2h6zm8-4a1 1 0 110 2H5a1 1 0 110-2h14zm0-6a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5a1 1 0 011-1h14zm3.192 11.293a1 1 0 010 1.414l-3.657 3.657a1 1 0 01-1.414 0l-1.828-1.828a1 1 0 011.414-1.415l1.12 1.121 2.951-2.95a1 1 0 011.414 0z"
}));
});
TaskListCompleteIcon.displayName = "TaskListCompleteIcon";
var TaskListCompleteIcon$1 = TaskListCompleteIcon;
var _excluded$1I = ["gradient"];
/**
* @component TaskListIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <TaskListIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <TaskListIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var TaskListIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$1I);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "TaskListIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M5 4h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5a1 1 0 011-1zm0 14h14a1 1 0 110 2H5a1 1 0 110-2zm0-4h14a1 1 0 110 2H5a1 1 0 110-2zm0-4h14a1 1 0 110 2H5a1 1 0 110-2z"
}));
});
TaskListIcon.displayName = "TaskListIcon";
var TaskListIcon$1 = TaskListIcon;
var _excluded$1H = ["gradient"];
/**
* @component ThumbUpOutlineIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <ThumbUpOutlineIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <ThumbUpOutlineIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var ThumbUpOutlineIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$1H);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 14,
height: 14,
viewBox: "0 0 14 14",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "ThumbUpOutlineIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M8.647.034c.424.02.847.164 1.173.542.263.305.403.73.403 1.262l-.003.513-.015.658-.019.374-.028.33c-.033.312-.08.567-.148.796l-.022.065.069.091c.289.364.59.477 1.119.496l.15.003h.251c.682 0 1.239.08 1.679.286.37.175.624.435.726.876.07 2.43-.78 5.856-1.727 6.803a3.787 3.787 0 01-.494.433c-.39.278-.697.388-1.434.434l-.344.017-.405.01-.71.009c-1.71 0-2.668-.214-4.006-.754l-.393-.158a1.468 1.468 0 01-1.36.912H1.53c-.81 0-1.468-.657-1.468-1.468V7.5c0-.81.657-1.468 1.468-1.468h1.58c.443 0 .84.196 1.11.506.097-.236.216-.453.359-.635.21-.266.434-.459.881-.79l.286-.213c.973-.745 1.316-1.249 1.316-2.158l.005-.264c.028-.685.165-1.227.4-1.635.304-.526.745-.77 1.132-.808zM8.615.71l.027.003-.05.008c-.171.042-.377.18-.54.46-.199.347-.313.86-.313 1.56l-.005.202c-.054 1.114-.572 1.755-1.776 2.645l-.237.175-.23.182c-.168.138-.28.25-.381.377-.265.337-.448.94-.533 1.415v4.697l.539.216c1.172.473 2.01.675 3.414.702l.334.003.855-.012.335-.01.28-.016.122-.01.213-.025.177-.033a1.34 1.34 0 00.344-.126l.118-.072.06-.04c.12-.086.248-.2.406-.36.788-.787 1.597-4.044 1.54-6.234-.036-.148-.145-.259-.346-.354-.33-.154-.8-.222-1.39-.222h-.253c-.94-.005-1.484-.228-1.998-1.036l-.092-.145.062-.16c.11-.282.175-.626.21-1.134l.02-.363.012-.419.006-.746c0-.378-.087-.645-.238-.82C9.127.81 8.87.722 8.615.71zm-5.505 6H1.529a.79.79 0 00-.79.79v5.064c0 .437.354.79.79.79h1.58a.79.79 0 00.791-.79V7.5a.79.79 0 00-.79-.79z",
fillRule: "evenodd"
}));
});
ThumbUpOutlineIcon.displayName = "ThumbUpOutlineIcon";
var ThumbUpOutlineIcon$1 = ThumbUpOutlineIcon;
var _excluded$1G = ["gradient"];
/**
* @component TrashIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <TrashIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <TrashIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var TrashIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$1G);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "TrashIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M8 4l1-2h6l1 2h4v2h-1v13a2 2 0 01-2 2H7a2 2 0 01-2-2V6H4V4h4zm3 2v13h2V6h-2zM7 6v13h2V6H7zm10 0h-2v13h2V6z"
}), /*#__PURE__*/React__default["default"].createElement("path", {
stroke: "#F4F5F7",
strokeWidth: 0.1,
opacity: 0.01,
d: "M.05.05h23.9v23.9H.05z"
}));
});
TrashIcon.displayName = "TrashIcon";
var TrashIcon$1 = TrashIcon;
var _excluded$1F = ["gradient"];
/**
* @component TreeDotsIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <TreeDotsIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <TreeDotsIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var TreeDotsIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$1F);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "TreeDotsIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M6 10a2 2 0 110 4 2 2 0 010-4zm6 0a2 2 0 110 4 2 2 0 010-4zm6 0a2 2 0 110 4 2 2 0 010-4z",
fillRule: "nonzero"
}));
});
TreeDotsIcon.displayName = "TreeDotsIcon";
var TreeDotsIcon$1 = TreeDotsIcon;
var _excluded$1E = ["gradient"];
/**
* @component UploadIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <UploadIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <UploadIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var UploadIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$1E);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "UploadIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M6 18v-4h2v1.999h8V14h2v4H6zm6-14l4.95 4.95-1.414 1.414L13 7.829V14h-2V7.827l-2.536 2.537L7.05 8.95 12 4z",
fillRule: "evenodd"
}));
});
UploadIcon.displayName = "UploadIcon";
var UploadIcon$1 = UploadIcon;
var _excluded$1D = ["gradient"];
/**
* @component ViewDayIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <ViewDayIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <ViewDayIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var ViewDayIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$1D);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "ViewDayIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M9 6a1 1 0 011-1h9a1 1 0 110 2h-9a1 1 0 01-1-1zM9 12a1 1 0 011-1h9a1 1 0 110 2h-9a1 1 0 01-1-1zM9 18a1 1 0 011-1h9a1 1 0 110 2h-9a1 1 0 01-1-1zM5 4a1 1 0 011 1v14a1 1 0 11-2 0V5a1 1 0 011-1z"
}));
});
ViewDayIcon.displayName = "ViewDayIcon";
var ViewDayIcon$1 = ViewDayIcon;
var _excluded$1C = ["gradient"];
/**
* @component ViewGridIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <ViewGridIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <ViewGridIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var ViewGridIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$1C);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "ViewGridIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M12 16c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2m0-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2m0-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2M6 16c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2m0-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2m0-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2m12 12c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2m0-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2m0-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2z",
fillRule: "evenodd"
}));
});
ViewGridIcon.displayName = "ViewGridIcon";
var ViewGridIcon$1 = ViewGridIcon;
var _excluded$1B = ["gradient"];
/**
* @component ViewListIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <ViewListIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <ViewListIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var ViewListIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$1B);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "ViewListIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M19 17a1 1 0 010 2H5a1 1 0 010-2h14zm0-6a1 1 0 010 2H5a1 1 0 010-2h14zm0-6a1 1 0 010 2H5a1 1 0 110-2h14z",
fillRule: "evenodd"
}));
});
ViewListIcon.displayName = "ViewListIcon";
var ViewListIcon$1 = ViewListIcon;
var _excluded$1A = ["gradient"];
/**
* @component ViewTimelineIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <ViewTimelineIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <ViewTimelineIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var ViewTimelineIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$1A);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "ViewTimelineIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M10 17h10a1 1 0 010 2H10a1 1 0 010-2zm-3-6h10a1 1 0 010 2H7a1 1 0 010-2zM4 5h10a1 1 0 010 2H4a1 1 0 110-2z",
fillRule: "evenodd"
}));
});
ViewTimelineIcon.displayName = "ViewTimelineIcon";
var ViewTimelineIcon$1 = ViewTimelineIcon;
var _excluded$1z = ["gradient"];
/**
* @component VolumeHighIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <VolumeHighIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <VolumeHighIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var VolumeHighIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$1z);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "VolumeHighIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M14 3.23c4 .91 7 4.49 7 8.77 0 4.187-2.871 7.704-6.74 8.707l-.26.063V18.7c2.89-.86 5-3.53 5-6.7a7.005 7.005 0 00-4.754-6.632L14 5.29V3.23zM12 4v16l-5-5H3V9h4l5-5zm2 3.97c1.5.74 2.5 2.26 2.5 4.03a4.403 4.403 0 01-2.307 3.903L14 16V7.97z",
fillRule: "evenodd"
}));
});
VolumeHighIcon.displayName = "VolumeHighIcon";
var VolumeHighIcon$1 = VolumeHighIcon;
var _excluded$1y = ["gradient"];
/**
* @component WarningTriangleSmallIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <WarningTriangleSmallIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <WarningTriangleSmallIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var WarningTriangleSmallIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$1y);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 12,
height: 12,
viewBox: "0 0 12 12",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "WarningTriangleSmallIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M6.54 1.123c.19.093.347.233.45.403l4.872 7.982c.298.49.097 1.102-.45 1.369-.166.08-.352.123-.541.123H1.129C.505 11 0 10.548 0 9.991c0-.169.047-.335.138-.483l4.871-7.982c.298-.49.984-.67 1.531-.403zM6 2l-5 8h10L6 2zm0 4a1.5 1.5 0 110 3 1.5 1.5 0 010-3z",
fillRule: "evenodd"
}));
});
WarningTriangleSmallIcon.displayName = "WarningTriangleSmallIcon";
var WarningTriangleSmallIcon$1 = WarningTriangleSmallIcon;
var _excluded$1x = ["gradient"];
/**
* @component WarningTriangleIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <WarningTriangleIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <WarningTriangleIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var WarningTriangleIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$1x);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "WarningTriangleIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M13.08 2.247c.381.185.694.465.902.805l8.742 14.964c.597.978.194 2.204-.9 2.738a2.472 2.472 0 01-1.082.246H3.258C2.01 21 1 20.097 1 18.982c0-.337.095-.67.276-.966l8.742-14.964c.597-.978 1.968-1.339 3.063-.805zM12 4L3 19h18L12 4zm0 7a3 3 0 110 6 3 3 0 010-6z",
fillRule: "evenodd"
}));
});
WarningTriangleIcon.displayName = "WarningTriangleIcon";
var WarningTriangleIcon$1 = WarningTriangleIcon;
var _excluded$1w = ["gradient"];
/**
* @component WarningIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <WarningIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <WarningIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var WarningIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$1w);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "WarningIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm0 2a8 8 0 100 16 8 8 0 000-16zm1 11v2h-2v-2h2zm0-8v6h-2V7h2z",
fillRule: "evenodd"
}));
});
WarningIcon.displayName = "WarningIcon";
var WarningIcon$1 = WarningIcon;
var _excluded$1v = ["gradient"];
/**
* @component WorkloadIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <WorkloadIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <WorkloadIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var WorkloadIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$1v);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "WorkloadIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
stroke: "#F4F5F7",
strokeWidth: 0.1,
opacity: 0.01,
d: "M.05.05h23.9v23.9H.05z"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M22 12a.834.834 0 00-.41-.717l-1.959-1.158 1.96-1.157a.834.834 0 000-1.435l-9.167-5.417a.833.833 0 00-.848 0L2.409 7.533a.833.833 0 000 1.435l1.96 1.157-1.96 1.158a.833.833 0 000 1.435l1.96 1.157-1.96 1.158a.833.833 0 000 1.435l9.167 5.416a.829.829 0 00.848 0l9.167-5.416a.834.834 0 000-1.435l-1.96-1.158 1.96-1.157A.834.834 0 0022 12zM12 3.801l7.528 4.45L12 12.698 4.471 8.25 12 3.801zm-.424 10.583a.829.829 0 00.848 0l5.57-3.29 1.535.907L12 16.449 4.471 12l1.536-.907 5.569 3.291zm7.952 1.366L12 20.2l-7.529-4.45 1.536-.907 5.57 3.29a.829.829 0 00.848 0l5.57-3.29 1.533.907z"
}));
});
WorkloadIcon.displayName = "WorkloadIcon";
var WorkloadIcon$1 = WorkloadIcon;
var MenuContext = /*#__PURE__*/React.createContext({});
var MenuContextProvider = MenuContext.Provider;
MenuContext.Consumer;
var useMenuContext = function useMenuContext() {
return React.useContext(MenuContext);
};
var StyledBubble = styled__default["default"].div.withConfig({
displayName: "Styles__StyledBubble",
componentId: "sc-tloccl-0"
})(["", " transition:opacity 0.2s,visibility 0.2s;", " ", " background-color:var(--page-paper-main);"], {
"visibility": "visible",
"display": "block",
"borderRadius": "0.5rem",
"borderWidth": "1px",
"borderStyle": "solid",
"borderColor": "var(--color-theme-200)",
"--tw-bg-opacity": "1",
"backgroundColor": "rgb(255 255 255 / var(--tw-bg-opacity))",
"color": "var(--color-theme-800)",
"opacity": "1",
"--tw-shadow": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
"--tw-shadow-colored": "0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color)",
"boxShadow": "var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)"
}, FontStyle, BoxSizingStyle);
StyledBubble.displayName = "StyledBubble";
var _excluded$1u = ["children", "className", "innerRef", "style"];
var Bubble = function Bubble(_ref) {
var children = _ref.children,
className = _ref.className,
_ref$innerRef = _ref.innerRef,
innerRef = _ref$innerRef === void 0 ? null : _ref$innerRef,
_ref$style = _ref.style,
style = _ref$style === void 0 ? {} : _ref$style,
rest = _objectWithoutProperties(_ref, _excluded$1u);
return /*#__PURE__*/React__default["default"].createElement(StyledBubble, _extends({}, rest, {
ref: innerRef,
className: classNames__default["default"]("c-bubble", className),
style: style
}), children);
};
Bubble.displayName = "Bubble";
var StyledMenu$2 = styled__default["default"](Bubble).withConfig({
displayName: "Styles__StyledMenu",
componentId: "sc-8fhkp-0"
})(["", " ", " ", " color:var(--color-theme-700);a:focus,a:active{outline:none;}", " ", " ", " ", ""], {
"marginTop": "0.25rem",
"marginBottom": "0.25rem",
"overflow": "auto",
"borderColor": "var(--border-primary)",
"backgroundColor": "var(--page-paper-main)"
}, FontStyle, BoxSizingStyle, function (props) {
return props.$mode === "normal" && styled.css(["width:260px;"]);
}, function (props) {
return props.$mode === "wider" && styled.css(["width:350px;"]);
}, function (props) {
return props.$mode === "tiny" && styled.css(["width:180px;"]);
}, function (props) {
return props.$mode === "widest" && styled.css(["width:590px;"]);
});
StyledMenu$2.displayName = "StyledMenu";
var StyledMenuFooter$1 = styled__default["default"].div.withConfig({
displayName: "Styles__StyledMenuFooter",
componentId: "sc-8fhkp-1"
})(["", " display:flex;border-top:1px solid var(--border-primary);height:32px;align-items:center;"], {
"display": "flex",
"paddingLeft": "0.5rem",
"paddingRight": "0.5rem",
"paddingTop": "0.25rem",
"paddingBottom": "0.25rem"
});
StyledMenuFooter$1.displayName = "StyledMenuFooter";
var StyledMenuHeader = styled__default["default"].div.withConfig({
displayName: "Styles__StyledMenuHeader",
componentId: "sc-8fhkp-2"
})(["", " border-bottom:1px solid var(--border-primary);height:32px;"], {
"display": "flex",
"alignItems": "center",
"justifyContent": "space-between",
"paddingLeft": "0.5rem",
"paddingRight": "0.5rem",
"paddingTop": "0.25rem",
"paddingBottom": "0.25rem"
});
StyledMenuHeader.displayName = "StyledMenuHeader";
var StyledOverlay = styled__default["default"].div.withConfig({
displayName: "Styles__StyledOverlay",
componentId: "sc-flnrpv-0"
})(["position:fixed;top:0;right:0;bottom:0;left:0;", ""], function (props) {
return !props.$disableBackgroundColor && styled.css(["background:var(--modal-background);backdrop-filter:blur(2px);"]);
});
StyledOverlay.displayName = "StyledOverlay";
var _excluded$1t = ["className", "disableBackgroundColor"];
var Overlay = function Overlay(_ref) {
var className = _ref.className,
_ref$disableBackgroun = _ref.disableBackgroundColor,
disableBackgroundColor = _ref$disableBackgroun === void 0 ? false : _ref$disableBackgroun,
rest = _objectWithoutProperties(_ref, _excluded$1t);
return /*#__PURE__*/React__default["default"].createElement(StyledOverlay, _extends({
className: classNames__default["default"]("c-overlay", className),
$disableBackgroundColor: disableBackgroundColor
}, rest));
};
Overlay.displayName = "Overlay";
var StyledPopper = styled__default["default"]("div").withConfig({
displayName: "Styles__StyledPopper",
componentId: "sc-1hgjasy-0"
})(["&[data-popper-reference-hidden]{display:none !important;pointer-events:none !important;}"]);
var _excluded$1s = ["children", "anchorEl", "open", "style", "transition", "placement", "strategy", "afterWrite"];
var Popper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var children = _ref.children,
anchorEl = _ref.anchorEl,
_ref$open = _ref.open,
open = _ref$open === void 0 ? false : _ref$open,
style = _ref.style,
_ref$transition = _ref.transition,
transition = _ref$transition === void 0 ? false : _ref$transition,
_ref$placement = _ref.placement,
initialPlacement = _ref$placement === void 0 ? "bottom" : _ref$placement,
_ref$strategy = _ref.strategy,
strategy = _ref$strategy === void 0 ? "absolute" : _ref$strategy,
afterWrite = _ref.afterWrite,
rest = _objectWithoutProperties(_ref, _excluded$1s);
var _useState = React.useState(true),
_useState2 = _slicedToArray(_useState, 2),
exited = _useState2[0],
setExited = _useState2[1];
var _useState3 = React.useState(initialPlacement),
_useState4 = _slicedToArray(_useState3, 2),
placement = _useState4[0],
setPlacement = _useState4[1];
var ownRef = React.useRef(null);
var popperRef = React.useRef();
var handleInnerRef = useForkRef(ownRef, ref);
var handlePopperUpdate = function handlePopperUpdate(data) {
setPlacement(data.placement || "bottom");
};
var handleOpen = React.useCallback(function () {
if (!ownRef.current || !anchorEl || !open) {
return;
}
if (popperRef.current) {
popperRef.current.destroy();
}
var modifiers = [{
name: "hide",
enabled: true,
phase: "main",
fn: function fn() {
var referenceElement = anchorEl;
var currentElement = referenceElement;
var isHidden = false;
while (currentElement) {
var computedStyle = getComputedStyle(currentElement);
if (computedStyle.display === "none" || computedStyle.visibility === "hidden") {
isHidden = true;
break;
}
currentElement = currentElement.parentElement;
}
if (isHidden) {
var _ownRef$current;
(_ownRef$current = ownRef.current) === null || _ownRef$current === void 0 || _ownRef$current.setAttribute("data-popper-reference-hidden", "");
} else {
var _ownRef$current2;
(_ownRef$current2 = ownRef.current) === null || _ownRef$current2 === void 0 || _ownRef$current2.removeAttribute("data-popper-reference-hidden");
}
}
}];
if (typeof afterWrite === "function") {
modifiers.push({
phase: "afterWrite",
enabled: true,
name: "popper-after-write",
fn: afterWrite
});
}
popperRef.current = core.createPopper(anchorEl, ownRef.current, {
placement,
onFirstUpdate: handlePopperUpdate,
strategy,
modifiers
});
}, [afterWrite, anchorEl, open, placement, strategy]);
var handleClose = function handleClose() {
if (!popperRef.current) {
return;
}
popperRef.current.destroy();
};
var handleRef = React.useCallback(function (node) {
handleInnerRef(node);
handleOpen();
}, [handleOpen, handleInnerRef]);
var handleEnter = function handleEnter() {
setExited(false);
};
var handleExited = function handleExited() {
setExited(true);
handleClose();
};
React.useEffect(function () {
return function () {
handleClose();
};
}, []);
React.useEffect(function () {
if (!open && !transition) {
handleClose();
}
}, [open, transition]);
React.useEffect(function () {
if (popperRef.current) {
popperRef.current.update();
}
});
if (!open && (!transition || exited)) {
return null;
}
var childProps = {
placement
};
if (transition) {
childProps.transitionProps = {
in: open,
onEnter: handleEnter,
onExited: handleExited
};
}
return /*#__PURE__*/React__default["default"].createElement(StyledPopper, _extends({
ref: handleRef
}, rest, {
style: _objectSpread2({}, style)
}), typeof children === "function" ? children(childProps) : children);
});
Popper.displayName = "Popper";
var StyledWindow = styled__default["default"].div.withConfig({
displayName: "Style__StyledWindow",
componentId: "sc-rnlftg-0"
})(["", " ", " position:fixed;top:0;right:0;bottom:0;left:0;"], FontStyle, BoxSizingStyle);
StyledWindow.displayName = "StyledWindow";
var getContainer = function getContainer(container) {
return typeof container === "function" ? container() : container;
};
var Portal = function Portal(_ref) {
var children = _ref.children,
_ref$container = _ref.container,
container = _ref$container === void 0 ? document.body : _ref$container;
var _useState = React.useState(null),
_useState2 = _slicedToArray(_useState, 2),
mountNode = _useState2[0],
setMountNode = _useState2[1];
React.useEffect(function () {
setMountNode(getContainer(container));
}, [container]);
return mountNode ? /*#__PURE__*/ReactDOM__default["default"].createPortal(children, mountNode) : mountNode;
};
Portal.displayName = "Portal";
var LayerContext = /*#__PURE__*/React.createContext({});
var LayerContextProvider = LayerContext.Provider;
var LayerContextConsumer = LayerContext.Consumer;
var useLayerContext = function useLayerContext() {
return React.useContext(LayerContext);
};
var LayerContext$1 = LayerContext;
var _excluded$1r = ["children", "onClose", "className", "style", "onKeyDown", "disableFocusLock", "disableScrollLock", "disableCloseOnEsc", "onClick"];
var returnFocus = {
preventScroll: true
};
var Window = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var children = _ref.children,
onClose = _ref.onClose,
className = _ref.className,
style = _ref.style,
onKeyDown = _ref.onKeyDown,
_ref$disableFocusLock = _ref.disableFocusLock,
disableFocusLock = _ref$disableFocusLock === void 0 ? false : _ref$disableFocusLock,
_ref$disableScrollLoc = _ref.disableScrollLock,
disableScrollLock = _ref$disableScrollLoc === void 0 ? false : _ref$disableScrollLoc,
_ref$disableCloseOnEs = _ref.disableCloseOnEsc,
disableCloseOnEsc = _ref$disableCloseOnEs === void 0 ? false : _ref$disableCloseOnEs,
onClick = _ref.onClick,
rest = _objectWithoutProperties(_ref, _excluded$1r);
var innerRef = React.useRef(null);
var handleRef = useForkRef(innerRef, ref);
var _useLayerContext = useLayerContext(),
_useLayerContext$zInd = _useLayerContext.zIndex,
zIndex = _useLayerContext$zInd === void 0 ? layers.skyscraper : _useLayerContext$zInd;
var handleKeyDown = React.useCallback(function (event) {
if (!event.defaultPrevented && (event.key === "Esc" || event.key === "Escape") && !disableCloseOnEsc) {
event.preventDefault();
if (onClose) {
onClose();
}
}
if (typeof onKeyDown === "function") {
onKeyDown(event);
}
}, [disableCloseOnEsc, onClose, onKeyDown]);
var handleClick = React.useCallback(function (event) {
event === null || event === void 0 || event.stopPropagation();
typeof onClick === "function" && onClick(event);
}, [onClick]);
return /*#__PURE__*/React__default["default"].createElement(Portal, null, /*#__PURE__*/React__default["default"].createElement(FocusLock__default["default"], {
returnFocus: returnFocus,
disabled: disableFocusLock
}, /*#__PURE__*/React__default["default"].createElement(reactRemoveScroll.RemoveScroll, {
forwardProps: true,
ref: handleRef,
enabled: !disableScrollLock,
noIsolation: true
}, /*#__PURE__*/React__default["default"].createElement(StyledWindow, _extends({}, rest, {
style: _objectSpread2({
zIndex
}, style),
onKeyDown: handleKeyDown,
tabIndex: 0,
className: classNames__default["default"]("c-window", className),
onClick: handleClick
}), children))));
});
Window.displayName = "Window";
// source: https://twitter.com/mattpocockuk/status/1671908303918473217/photo/1
// eslint-disable-next-line @typescript-eslint/ban-types
var Menu = function Menu(_ref) {
var children = _ref.children,
_ref$disableFocusLock = _ref.disableFocusLock,
disableFocusLock = _ref$disableFocusLock === void 0 ? false : _ref$disableFocusLock,
onMenuClick = _ref.onMenuClick,
_ref$handleScroll = _ref.handleScroll,
handleScroll = _ref$handleScroll === void 0 ? true : _ref$handleScroll,
_ref$mode = _ref.mode,
mode = _ref$mode === void 0 ? "normal" : _ref$mode,
_ref$open = _ref.open,
defaultOpen = _ref$open === void 0 ? false : _ref$open,
onOpen = _ref.onOpen,
onClose = _ref.onClose,
onBeforeClose = _ref.onBeforeClose,
_ref$position = _ref.position,
position = _ref$position === void 0 ? "bottom-start" : _ref$position,
target = _ref.target,
className = _ref.className,
menuClassName = _ref.menuClassName,
popperClassName = _ref.popperClassName,
backgroundElementClass = _ref.backgroundElementClass,
_ref$windowAbsolutely = _ref.windowAbsolutelyPositioned,
windowAbsolutelyPositioned = _ref$windowAbsolutely === void 0 ? false : _ref$windowAbsolutely,
onPopperOpen = _ref.onPopperOpen;
var _useState = React.useState(defaultOpen),
_useState2 = _slicedToArray(_useState, 2),
open = _useState2[0],
setOpen = _useState2[1];
var _useState3 = React.useState(),
_useState4 = _slicedToArray(_useState3, 2),
childNode = _useState4[0],
setChildNode = _useState4[1];
var elementRef = React.useRef(null);
var isOpenAtLeastOnce = React.useRef(false);
React.useEffect(function () {
setOpen(defaultOpen);
}, [defaultOpen]);
var handleRefRef = useForkRef(target ? target.ref : undefined, setChildNode);
var handleRef = useForkRef(handleRefRef, elementRef);
var handleOpen = React.useCallback(function (event) {
var _target$props;
event === null || event === void 0 || event.preventDefault();
event === null || event === void 0 || event.stopPropagation();
setOpen(true);
typeof onOpen === "function" && onOpen();
typeof (target === null || target === void 0 || (_target$props = target.props) === null || _target$props === void 0 ? void 0 : _target$props.onClick) === "function" && target.props.onClick(event);
}, [onOpen, target === null || target === void 0 ? void 0 : target.props]);
var handleClose = React.useCallback(function () {
if (typeof onBeforeClose === "function" && !onBeforeClose()) {
return;
}
setOpen(false);
typeof onClose === "function" && onClose();
}, [onClose, onBeforeClose]);
var childProps = {
forceClose: handleClose
};
var targetProps = {
open,
ref: handleRef,
onClick: handleOpen
};
React.useEffect(function () {
if (open) {
isOpenAtLeastOnce.current = true;
} else if (!open && isOpenAtLeastOnce.current) {
var _elementRef$current;
(_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 || _elementRef$current.focus();
isOpenAtLeastOnce.current = false;
}
}, [open]);
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, target && /*#__PURE__*/React__default["default"].cloneElement(target, targetProps), open ? /*#__PURE__*/React__default["default"].createElement(Window, {
onClose: handleClose,
disableScrollLock: !handleScroll,
disableFocusLock: disableFocusLock,
style: {
position: windowAbsolutelyPositioned ? "absolute" : "fixed"
}
}, /*#__PURE__*/React__default["default"].createElement(Overlay, {
className: backgroundElementClass,
onClick: handleClose,
tabIndex: -1,
disableBackgroundColor: true
}), /*#__PURE__*/React__default["default"].createElement(Popper, {
anchorEl: childNode,
open: childNode ? open : false,
placement: position,
className: popperClassName,
tabIndex: -1,
afterWrite: onPopperOpen
}, /*#__PURE__*/React__default["default"].createElement(StyledMenu$2, {
className: classNames__default["default"]("c-simple-menu__paper", "c-simple-menu__".concat(mode), menuClassName, className),
$mode: mode,
onMouseDown: onMenuClick
}, /*#__PURE__*/React__default["default"].createElement(MenuContextProvider, {
value: {
open,
setOpen
}
}, typeof children === "function" ? children(childProps) : children)))) : null);
};
Menu.displayName = "Menu";
var colors = {
primary: {
"color": "var(--color-theme-900)"
},
secondary: {
"color": "var(--color-theme-700)"
},
tertiary: {
"color": "var(--color-theme-600)"
},
quaternary: {
"color": "var(--color-theme-transparent-500)"
},
"theme-primary": {
"color": "var(--color-primary)"
},
"theme-secondary": {
"color": "var(--color-secondary)"
},
"page-paper": {
"color": "var(--page-paper-main)"
},
"only-white": {
"color": "var(--only-white)"
},
"only-black": {
"color": "var(--only-black)"
},
success: {
"color": "var(--color-sucess-green)"
},
alert: {
"color": "var(--red-alert)"
},
warning: {
"color": "var(--warning)"
}
};
var StyledTypography = styled__default["default"].div.withConfig({
displayName: "Styles__StyledTypography",
componentId: "sc-mskw5w-0"
})(["", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", ""], FontStyle, BoxSizingStyle, function (props) {
return colors[props.$color];
}, function (props) {
return props.$variant === "Title 1" && styled.css(["", ""], {
"fontSize": "2rem"
});
}, function (props) {
return props.$variant === "Title 2" && styled.css(["", ""], {
"fontSize": "1.675rem"
});
}, function (props) {
return props.$variant === "Header 2" && styled.css(["", ""], {
"fontSize": "1.125rem"
});
}, function (props) {
return (props.$variant === "Header 3" || props.$variant === "Body 1") && styled.css(["", ""], {
"fontSize": "1rem"
});
}, function (props) {
return props.$variant === "Body 2" && styled.css(["", ""], {
"fontSize": "0.875rem"
});
}, function (props) {
return props.$variant === "Caption 1" && styled.css(["", ""], {
"fontSize": "0.75rem"
});
}, function (props) {
return props.$variant === "Caption 2" && styled.css(["", ""], {
"fontSize": "0.625rem"
});
}, function (props) {
return props.$italic ? styled.css(["font-style:italic;"]) : styled.css(["font-style:normal;"]);
}, function (props) {
return props.$tabularNums ? styled.css(["font-variant-numeric:tabular-nums;"]) : styled.css(["font-variant-numeric:normal;"]);
}, function (props) {
return props.$letterSpacing === "regular" && styled.css(["", ""], {
"letterSpacing": "0.02em"
});
}, function (props) {
return props.$letterSpacing === "tight" && styled.css(["", ""], {
"letterSpacing": "0em"
});
}, function (props) {
return props.$letterSpacing === "wide" && styled.css(["", ""], {
"letterSpacing": "0.08em"
});
}, function (props) {
return props.$lineHeight === "regular" && styled.css(["", ""], {
"lineHeight": "1.375"
});
}, function (props) {
return props.$lineHeight === "tight" && styled.css(["", ""], {
"lineHeight": "1"
});
}, function (props) {
return props.$lineHeight === "loose" && styled.css(["", ""], {
"lineHeight": "1.625"
});
}, function (props) {
return props.$align === "left" && styled.css(["text-align:left;"]);
}, function (props) {
return props.$align === "right" && styled.css(["text-align:right;"]);
}, function (props) {
return props.$align === "center" && styled.css(["text-align:center;"]);
}, function (props) {
return props.$align === "justify" && styled.css(["text-align:justify;"]);
}, function (props) {
return props.$decoration === "none" && styled.css(["text-decoration:none;"]);
}, function (props) {
return props.$decoration === "underline" && styled.css(["text-decoration:underline;"]);
}, function (props) {
return props.$decoration === "line-through" && styled.css(["text-decoration:line-through;"]);
}, function (props) {
return props.$transform === "regular" && styled.css(["text-transform:none;"]);
}, function (props) {
return props.$transform === "uppercase" && styled.css(["text-transform:uppercase;"]);
}, function (props) {
return props.$transform === "lowercase" && styled.css(["text-transform:lowercase;"]);
}, function (props) {
return props.$transform === "capitalize" && styled.css(["text-transform:capitalize;"]);
}, function (props) {
return props.$overflow === "visible" && styled.css(["overflow:visible;"]);
}, function (props) {
return props.$overflow === "ellipsis" && styled.css(["text-overflow:ellipsis;"]);
}, function (props) {
return props.$overflow === "truncate" && styled.css(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
}, function (props) {
return props.$whitespace === "regular" && styled.css(["white-space:normal;"]);
}, function (props) {
return props.$whitespace === "no-wrap" && styled.css(["white-space:nowrap;"]);
}, function (props) {
return props.$whitespace === "pre" && styled.css(["white-space:pre;"]);
}, function (props) {
return props.$whitespace === "pre-wrap" && styled.css(["white-space:pre-wrap;"]);
}, function (props) {
return props.$whitespace === "pre-line" && styled.css(["white-space:pre-line;"]);
}, function (props) {
return props.$whitespace === "break-spaces" && styled.css(["white-space:break-spaces;"]);
}, function (props) {
return props.$wordBreak === "regular" && styled.css(["overflow-wrap:normal;word-break:normal;"]);
}, function (props) {
return props.$wordBreak === "smart" && styled.css(["overflow-wrap:break-word;"]);
}, function (props) {
return props.$wordBreak === "all" && styled.css(["word-break:break-all;"]);
}, function (props) {
return props.$weight === "regular" && styled.css(["", ""], {
"fontWeight": "400"
});
}, function (props) {
return props.$weight === "light" && styled.css(["", ""], {
"fontWeight": "300"
});
}, function (props) {
return props.$weight === "medium" && styled.css(["", ""], {
"fontWeight": "500"
});
}, function (props) {
return props.$weight === "bold" && styled.css(["", ""], {
"fontWeight": "700"
});
});
StyledTypography.displayName = "StyledTypography";
var _excluded$1q = ["variant", "as", "color", "italic", "tabularNums", "letterSpacing", "lineHeight", "align", "decoration", "transform", "overflow", "whitespace", "wordBreak", "weight", "className", "children"];
var Typography = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var _ref$variant = _ref.variant,
variant = _ref$variant === void 0 ? "Title 1" : _ref$variant,
as = _ref.as,
_ref$color = _ref.color,
color = _ref$color === void 0 ? "primary" : _ref$color,
_ref$italic = _ref.italic,
italic = _ref$italic === void 0 ? false : _ref$italic,
_ref$tabularNums = _ref.tabularNums,
tabularNums = _ref$tabularNums === void 0 ? false : _ref$tabularNums,
_ref$letterSpacing = _ref.letterSpacing,
letterSpacing = _ref$letterSpacing === void 0 ? "tight" : _ref$letterSpacing,
_ref$lineHeight = _ref.lineHeight,
lineHeight = _ref$lineHeight === void 0 ? "regular" : _ref$lineHeight,
_ref$align = _ref.align,
align = _ref$align === void 0 ? "left" : _ref$align,
_ref$decoration = _ref.decoration,
decoration = _ref$decoration === void 0 ? "none" : _ref$decoration,
_ref$transform = _ref.transform,
transform = _ref$transform === void 0 ? "regular" : _ref$transform,
_ref$overflow = _ref.overflow,
overflow = _ref$overflow === void 0 ? "visible" : _ref$overflow,
_ref$whitespace = _ref.whitespace,
whitespace = _ref$whitespace === void 0 ? "regular" : _ref$whitespace,
_ref$wordBreak = _ref.wordBreak,
wordBreak = _ref$wordBreak === void 0 ? "regular" : _ref$wordBreak,
_ref$weight = _ref.weight,
weight = _ref$weight === void 0 ? "regular" : _ref$weight,
className = _ref.className,
children = _ref.children,
props = _objectWithoutProperties(_ref, _excluded$1q);
var Component = as || "div";
return /*#__PURE__*/React__default["default"].createElement(StyledTypography, _extends({
as: Component,
className: classNames__default["default"]("typography", className),
$italic: italic,
$tabularNums: tabularNums,
$letterSpacing: letterSpacing,
$lineHeight: lineHeight,
$align: align,
$decoration: decoration,
$transform: transform,
$overflow: overflow,
$whitespace: whitespace,
$wordBreak: wordBreak,
$variant: variant,
$color: color,
$weight: weight,
ref: ref
}, props), children);
});
Typography.displayName = "Typography";
var _excluded$1p = ["title", "className", "leftElement", "rightElement"];
var MenuHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var title = _ref.title,
className = _ref.className,
leftElement = _ref.leftElement,
rightElement = _ref.rightElement,
props = _objectWithoutProperties(_ref, _excluded$1p);
return /*#__PURE__*/React__default["default"].createElement(StyledMenuHeader, _extends({}, props, {
className: classNames__default["default"]("c-menu-header", className),
ref: ref
}), leftElement || /*#__PURE__*/React__default["default"].createElement("div", {
style: {
minWidth: "24px"
}
}, "\xA0"), /*#__PURE__*/React__default["default"].createElement(Typography, {
variant: "Body 2",
color: "secondary",
weight: "bold",
overflow: "truncate",
style: {
marginLeft: "4px",
marginRight: "4px "
}
}, title), rightElement || /*#__PURE__*/React__default["default"].createElement("div", {
style: {
minWidth: "24px"
}
}, "\xA0"));
});
MenuHeader.displayName = "MenuHeader";
var _excluded$1o = ["children", "className"];
var MenuFooter = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var children = _ref.children,
className = _ref.className,
props = _objectWithoutProperties(_ref, _excluded$1o);
return /*#__PURE__*/React__default["default"].createElement(StyledMenuFooter$1, _extends({}, props, {
className: classNames__default["default"]("c-menu-footer", className),
ref: ref
}), children);
});
MenuFooter.displayName = "MenuFooter";
var _excluded$1n = ["children", "className", "separator"];
var Breadcrumbs = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var _dimensions$width, _childDimensions$widt;
var children = _ref.children,
className = _ref.className,
_ref$separator = _ref.separator,
separator = _ref$separator === void 0 ? "/" : _ref$separator,
rest = _objectWithoutProperties(_ref, _excluded$1n);
var internalRef = React.useRef(null);
var listWrapperRef = React.useRef(null);
var olRef = React.useRef(null);
var widthCollectionRef = React.useRef([]);
var handleRef = useForkRef(ref, internalRef);
var _useState = React.useState(0),
_useState2 = _slicedToArray(_useState, 2),
menuBreadcrumbs = _useState2[0],
setMenuBreadcrumbs = _useState2[1];
var dimensions = useResizeObserver$1(internalRef);
var childDimensions = useResizeObserver$1(listWrapperRef);
var parentWidth = (_dimensions$width = dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) !== null && _dimensions$width !== void 0 ? _dimensions$width : 0;
var childWidth = (_childDimensions$widt = childDimensions === null || childDimensions === void 0 ? void 0 : childDimensions.width) !== null && _childDimensions$widt !== void 0 ? _childDimensions$widt : 0;
var childrenCollection = React.useMemo(function () {
return React__default["default"].Children.toArray(children);
}, [children]);
var _useMemo = React.useMemo(function () {
return [childrenCollection.slice(0, menuBreadcrumbs), childrenCollection.slice(menuBreadcrumbs, childrenCollection.length)];
}, [childrenCollection, menuBreadcrumbs]),
_useMemo2 = _slicedToArray(_useMemo, 2),
menuCollection = _useMemo2[0],
listCollection = _useMemo2[1];
React.useEffect(function () {
widthCollectionRef.current = [];
setMenuBreadcrumbs(0);
}, [childrenCollection.length]);
React.useEffect(function () {
var diffWidth = childWidth - parentWidth;
if (diffWidth > 0) {
var _offsetWidth, _olRef$current, _olRef$current$queryS, _olRef$current2, _breadcrumbItems$leng;
var separatorWidth = (_offsetWidth = (_olRef$current = olRef.current) === null || _olRef$current === void 0 || (_olRef$current = _olRef$current.querySelectorAll("[data-role=\"separator\"]")[0]) === null || _olRef$current === void 0 ? void 0 : _olRef$current.offsetWidth) !== null && _offsetWidth !== void 0 ? _offsetWidth : 0;
var breadcrumbItems = (_olRef$current$queryS = (_olRef$current2 = olRef.current) === null || _olRef$current2 === void 0 ? void 0 : _olRef$current2.querySelectorAll("[data-role=\"item\"]")) !== null && _olRef$current$queryS !== void 0 ? _olRef$current$queryS : [];
var childWidthCollection = [];
var maxIndex = ((_breadcrumbItems$leng = breadcrumbItems === null || breadcrumbItems === void 0 ? void 0 : breadcrumbItems.length) !== null && _breadcrumbItems$leng !== void 0 ? _breadcrumbItems$leng : 1) - 1;
var currentIndex = 0;
var childSumWidth = 0;
while (diffWidth > childSumWidth && maxIndex >= currentIndex) {
var _offsetWidth2, _breadcrumbItems$curr;
var _childWidth = (_offsetWidth2 = (_breadcrumbItems$curr = breadcrumbItems[currentIndex]) === null || _breadcrumbItems$curr === void 0 ? void 0 : _breadcrumbItems$curr.offsetWidth) !== null && _offsetWidth2 !== void 0 ? _offsetWidth2 : 0;
var result = separatorWidth + _childWidth;
childWidthCollection.push(result);
childSumWidth += result;
currentIndex += 1;
}
if (childWidthCollection.length === listCollection.length) {
childWidthCollection.pop();
}
widthCollectionRef.current = [...widthCollectionRef.current, ...childWidthCollection];
setMenuBreadcrumbs(function (oldVal) {
return oldVal + childWidthCollection.length;
});
}
}, [listCollection.length, parentWidth, childWidth]);
React.useEffect(function () {
var diffWidth = parentWidth - childWidth;
if (diffWidth > 0 && widthCollectionRef.current.length > 0) {
var total = widthCollectionRef.current.length;
var collection = [...widthCollectionRef.current];
var sumWidth = 0;
while (diffWidth > sumWidth && collection.length > 0) {
var _collection;
var lastWidth = (_collection = collection[collection.length - 1]) !== null && _collection !== void 0 ? _collection : 0;
if (diffWidth < lastWidth + sumWidth) {
sumWidth = diffWidth;
} else {
var _collection$pop;
sumWidth += (_collection$pop = collection.pop()) !== null && _collection$pop !== void 0 ? _collection$pop : 0;
}
}
var totalToDecrease = total - collection.length;
setMenuBreadcrumbs(function (oldVal) {
var newValue = oldVal - totalToDecrease;
return newValue > 0 ? newValue : 0;
});
var end = total - totalToDecrease;
widthCollectionRef.current = end > 0 ? widthCollectionRef.current.slice(0, end) : [];
}
}, [parentWidth, childWidth]);
return /*#__PURE__*/React__default["default"].createElement(StyledNavElement, _extends({
className: className,
ref: handleRef
}, rest), /*#__PURE__*/React__default["default"].createElement(StyledListWrapper, {
ref: listWrapperRef
}, /*#__PURE__*/React__default["default"].createElement(StyledOList, {
ref: olRef
}, menuCollection.length > 0 ? /*#__PURE__*/React__default["default"].createElement(StyledBreadcrumbListItem, {
"data-role": "menu"
}, /*#__PURE__*/React__default["default"].createElement(Menu, {
target: /*#__PURE__*/React__default["default"].createElement(IconButton, {
variant: "text gray"
}, /*#__PURE__*/React__default["default"].createElement(TreeDotsIcon$1, null))
}, /*#__PURE__*/React__default["default"].createElement(StyledMenuList, null, menuCollection.map(function (child, index) {
return /*#__PURE__*/React__default["default"].createElement(ListItem, {
key: index
}, child);
})))) : null, listCollection.map(function (child, index) {
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
key: index
}, index > 0 || menuCollection.length > 0 ? /*#__PURE__*/React__default["default"].createElement(StyledBreadcrumbListItem, {
"data-role": "separator"
}, separator) : null, /*#__PURE__*/React__default["default"].createElement(StyledBreadcrumbListItem, {
"data-role": "item"
}, child));
}))));
});
Breadcrumbs.displayName = "Breadcrumbs";
var StyledBadge$1 = styled__default["default"].div.withConfig({
displayName: "Styles__StyledBadge",
componentId: "sc-6o8do5-0"
})(["", " align-items:center;background-color:", ";border:", ";block-size:", ";border-radius:100%;color:var(--color-theme-100);display:flex;font-size:10px;font-weight:500;inline-size:", ";justify-content:center;padding:", ";pointer-events:none;position:absolute;z-index:1;", " ", " ", " ", " ", ""], FontStyle, function (props) {
return !props.backgroundColor ? "var(--color-primary)" : props.backgroundColor;
}, function (props) {
return props.isStandalone ? "none" : "2px solid var(--page-paper-main)";
}, function (props) {
return props.dimension + "px";
}, function (props) {
return props.dimension + "px";
}, function (props) {
return props.value && (props.value > 99 ? "4px" : props.value < 100 && "2px");
}, function (_ref) {
var isStandalone = _ref.isStandalone;
return isStandalone && styled.css(["position:static;z-index:0;"]);
}, function (_ref2) {
var position = _ref2.position;
return position === "top-left" && styled.css(["inset-block-start:0;inset-inline-start:0;"]);
}, function (_ref3) {
var position = _ref3.position;
return position === "top-right" && styled.css(["inset-block-start:0;inset-inline-end:0;"]);
}, function (_ref4) {
var position = _ref4.position;
return position === "bottom-right" && styled.css(["inset-block-end:0;inset-inline-end:0;"]);
}, function (_ref5) {
var position = _ref5.position;
return position === "bottom-left" && styled.css(["inset-block-end:0;inset-inline-start:0;"]);
});
/**
* @component Badge
* @description
* In some products, you might need to show a badge on the right corner of the avatar.
* We call this a badge. Here's an example that shows if the user is online.
*
* @prop {position} - dictates the position of a badge.
* @prop {dimension} - controls the size of a badge (width and height) in pixels.
* @prop {backgroundColor} - background-color of a badge.
*
* @example
* <IconButton variant="text gray" size="big">
* <BellOffIcon />
* <Badge position="top-right" backgroundColor="red" dimension={16} />
* </IconButton>
*
* @see
* https://system.activecollab.com/?path=/story/components-button-indicators-badge--badge
*/
var Badge = function Badge(_ref) {
var _ref$dimension = _ref.dimension,
dimension = _ref$dimension === void 0 ? 8 : _ref$dimension,
className = _ref.className,
_ref$position = _ref.position,
position = _ref$position === void 0 ? "bottom-left" : _ref$position,
backgroundColor = _ref.backgroundColor,
value = _ref.value,
_ref$isStandalone = _ref.isStandalone,
isStandalone = _ref$isStandalone === void 0 ? false : _ref$isStandalone;
return /*#__PURE__*/React__default["default"].createElement(StyledBadge$1, {
className: classNames__default["default"]("c-badge", className),
dimension: dimension,
position: position,
isStandalone: isStandalone,
backgroundColor: backgroundColor,
role: "status",
value: value
}, value && value > 100 ? 99 + "+" : value);
};
var _excluded$1m = ["weight", "children"];
var Body2 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var _ref$weight = _ref.weight,
weight = _ref$weight === void 0 ? "regular" : _ref$weight,
children = _ref.children,
props = _objectWithoutProperties(_ref, _excluded$1m);
return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
variant: "Body 2",
weight: weight,
ref: ref
}, props), children);
});
Body2.displayName = "Body2";
var StyledCounterButtonWrapper = styled__default["default"].div.withConfig({
displayName: "Styles__StyledCounterButtonWrapper",
componentId: "sc-1ecrcba-0"
})(["", " ", " ", " width:fit-content;"], {
"display": "flex"
}, FontStyle, BoxSizingStyle);
StyledCounterButtonWrapper.displayName = "StyledCounterButtonWrapper";
var StyledCounterButton = styled__default["default"](Button).withConfig({
displayName: "Styles__StyledCounterButton",
componentId: "sc-1ecrcba-1"
})(["", " ", " ", " ", ""], function (props) {
return props.$active && !props.disabled && styled.css(["padding:0 8px;svg{fill:var(--color-primary);}&:hover{background:var(--color-primary-300);}"]);
}, function (props) {
return props.$selected && styled.css(["border-top-right-radius:0;border-bottom-right-radius:0;background-color:var(--color-primary-200);"]);
}, function (props) {
return !props.$selected && styled.css(["@media (max-width:768px){width:32px;}"]);
}, function (props) {
return props.disabled && styled.css(["pointer-events:none;opacity:0.5;"]);
});
StyledCounterButton.displayName = "StyledCounterButton";
var StyledCounterButtonReset = styled__default["default"](Button).withConfig({
displayName: "Styles__StyledCounterButtonReset",
componentId: "sc-1ecrcba-2"
})(["background-color:var(--color-primary-200);border-top-left-radius:0;border-bottom-left-radius:0;&:hover,&:focus-visible{background-color:var(--color-primary-300);border-top-left-radius:0;border-bottom-left-radius:0;}"]);
StyledCounterButtonReset.displayName = "StyledCounterButtonReset";
var StyledCounterButtonLabel = styled__default["default"](Body2).withConfig({
displayName: "Styles__StyledCounterButtonLabel",
componentId: "sc-1ecrcba-3"
})(["", " @media (max-width:768px){display:none;}", ":hover &&{", "}", ""], {
"pointerEvents": "none"
}, StyledCounterButton, function (props) {
return !props.$active && styled.css(["color:var(--color-theme-900);"]);
}, function (props) {
return props.$active && styled.css(["color:var(--color-primary);"]);
});
StyledCounterButtonLabel.displayName = "StyledCounterButtonLabel";
var StyledBadge = styled__default["default"](Badge).withConfig({
displayName: "Styles__StyledBadge",
componentId: "sc-1ecrcba-4"
})(["margin-left:4px;margin-right:-6px;"]);
StyledBadge.displayName = "StyledBadge";
var StyledTooltip = styled__default["default"].div.withConfig({
displayName: "Styles__StyledTooltip",
componentId: "sc-rur9b5-0"
})(["", " ", " max-width:200px;border-radius:8px;padding:4px 10px;text-align:center;background-color:rgba(0,0,0,0.9);font-size:12px;font-weight:500;line-height:normal;color:#fff;margin:4px;", ""], BoxSizingStyle, FontStyle, function (props) {
return props.$isLight && styled.css(["background-color:var(--page-paper-main);box-shadow:var(--shadow-secondary);color:var(--color-theme-700);"]);
});
var defaultStyle$3 = {
transitionProperty: "opacity, transform",
transitionDuration: ".15s, .10s, .15s",
transitionTimingFunction: "ease, ease, cubic-bezier(0.39, 0.575, 0.565, 1)",
transformOrigin: "50% 0",
transform: "scale(.85)",
opacity: 0
};
var transitionStyles$4 = {
entering: {
opacity: 1,
transform: "scale(1)",
transitionDelay: ".6s"
},
entered: {
opacity: 1,
transform: "scale(1)"
},
exiting: {
opacity: 0,
transform: "scale(.85)"
},
exited: {
opacity: 0,
transform: "scale(.85)"
}
};
var FromElement = function FromElement(_ref) {
var _ref$in = _ref.in,
inProp = _ref$in === void 0 ? false : _ref$in,
onEnter = _ref.onEnter,
onExited = _ref.onExited,
children = _ref.children,
style = _ref.style,
_ref$timeout = _ref.timeout,
timeout = _ref$timeout === void 0 ? 1000 : _ref$timeout;
return /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.Transition, {
appear: true,
in: inProp,
timeout: timeout,
onEnter: onEnter,
onExited: onExited
}, function (state) {
return /*#__PURE__*/React.cloneElement(children, {
style: _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({
visibility: state === "exited" && !inProp ? "hidden" : undefined
}, defaultStyle$3), transitionStyles$4[state]), style), children.props.style)
});
});
};
FromElement.displayName = "FromElement";
var _excluded$1l = ["children"];
var TooltipAnimation = function TooltipAnimation(_ref) {
var children = _ref.children,
props = _objectWithoutProperties(_ref, _excluded$1l);
return /*#__PURE__*/React__default["default"].createElement(FromElement, _extends({
timeout: 0
}, props), children);
};
var Tooltip = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
var children = _ref2.children,
title = _ref2.title,
className = _ref2.className,
style = _ref2.style,
_ref2$isLight = _ref2.isLight,
isLight = _ref2$isLight === void 0 ? false : _ref2$isLight,
_ref2$placement = _ref2.placement,
placement = _ref2$placement === void 0 ? "top" : _ref2$placement,
_ref2$TransitionCompo = _ref2.TransitionComponent,
TransitionComponent = _ref2$TransitionCompo === void 0 ? TooltipAnimation : _ref2$TransitionCompo,
popperTooltipStyle = _ref2.popperTooltipStyle,
popperTooltipClassName = _ref2.popperTooltipClassName,
disable = _ref2.disable;
var _useLayerContext = useLayerContext(),
_useLayerContext$zInd = _useLayerContext.zIndex,
zIndex = _useLayerContext$zInd === void 0 ? layers.skyscraper : _useLayerContext$zInd;
var _useState = React.useState(false),
_useState2 = _slicedToArray(_useState, 2),
open = _useState2[0],
setOpen = _useState2[1];
var _useState3 = React.useState(),
_useState4 = _slicedToArray(_useState3, 2),
childNode = _useState4[0],
setChildNode = _useState4[1];
var handleEnter = function handleEnter(event) {
var childrenProps = children.props;
if (event.type === "mouseover" && childrenProps.onMouseOver) {
childrenProps.onMouseOver(event);
}
childNode && childNode.removeAttribute("title");
setOpen(true);
};
var handleLeave = function handleLeave(event) {
var childrenProps = children.props;
if (event.type === "mouseleave" && childrenProps.onMouseLeave && event.currentTarget === childNode) {
childrenProps.onMouseLeave(event);
}
setOpen(false);
};
var handleOwnRef = useForkRef(children.ref, ref);
var handleRef = useForkRef(setChildNode, handleOwnRef);
var childrenProps = {
onMouseOver: handleEnter,
onMouseLeave: handleLeave,
ref: handleRef
};
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].cloneElement(children, childrenProps), !disable && /*#__PURE__*/React__default["default"].createElement(Portal, null, /*#__PURE__*/React__default["default"].createElement(Popper, {
anchorEl: childNode,
open: childNode ? open : false,
placement: placement,
transition: true,
className: popperTooltipClassName,
style: _objectSpread2({
zIndex
}, popperTooltipStyle),
role: "tooltip"
}, function (_ref3) {
var _ref3$transitionProps = _ref3.transitionProps,
transitionProps = _ref3$transitionProps === void 0 ? {} : _ref3$transitionProps;
return /*#__PURE__*/React__default["default"].createElement(TransitionComponent, _extends({}, transitionProps, {
style: style
}), /*#__PURE__*/React__default["default"].createElement(StyledTooltip, {
className: classNames__default["default"]("c-tooltip-ds", className),
$isLight: isLight
}, title));
})));
});
Tooltip.displayName = "Tooltip";
var _excluded$1k = ["label", "icon", "active", "counter", "tooltipText", "onClearAll", "className", "labelClassName", "disabled"];
var CounterButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var label = _ref.label,
icon = _ref.icon,
active = _ref.active,
_ref$counter = _ref.counter,
counter = _ref$counter === void 0 ? 0 : _ref$counter,
tooltipText = _ref.tooltipText,
onClearAll = _ref.onClearAll,
className = _ref.className,
labelClassName = _ref.labelClassName,
_ref$disabled = _ref.disabled,
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
args = _objectWithoutProperties(_ref, _excluded$1k);
return /*#__PURE__*/React__default["default"].createElement(StyledCounterButtonWrapper, {
ref: ref,
className: className
}, /*#__PURE__*/React__default["default"].createElement(StyledCounterButton, _extends({
disabled: disabled,
"aria-disabled": disabled,
className: classNames__default["default"]("c-counter-button", {
"c-counter-button__selected": counter
})
}, args, {
variant: "text gray",
$active: counter > 0 || active,
$selected: counter > 0
}), icon && /*#__PURE__*/React__default["default"].cloneElement(icon, {
className: classNames__default["default"]("c-counter-button__icon")
}), label && /*#__PURE__*/React__default["default"].createElement(StyledCounterButtonLabel, {
color: "secondary",
weight: "medium",
className: classNames__default["default"]("c-counter-button__label", labelClassName),
$active: counter > 0 || active
}, label), counter > 0 ? /*#__PURE__*/React__default["default"].createElement(StyledBadge, {
isStandalone: true,
dimension: 16,
value: counter
}) : null), counter > 0 ? /*#__PURE__*/React__default["default"].createElement(Tooltip, {
title: "".concat(tooltipText),
popperTooltipClassName: "z-index-1300"
}, /*#__PURE__*/React__default["default"].createElement(StyledCounterButtonReset, {
variant: "text colored",
className: "c-counter-button__reset",
onClick: onClearAll
}, /*#__PURE__*/React__default["default"].createElement(CloseSmallIcon$1, null))) : null);
});
CounterButton.displayName = "CounterButton";
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, {
"position": "relative",
"margin": "0px",
"display": "inline-block",
"cursor": "pointer",
"userSelect": "none",
"textAlign": "center",
"verticalAlign": "middle",
"fontSize": "0.875rem",
"lineHeight": "1",
"fontWeight": "500",
"textDecorationLine": "none",
"WebkitFontSmoothing": "antialiased",
"MozOsxFontSmoothing": "grayscale"
});
var StyledMenu$1 = styled__default["default"](Menu).withConfig({
displayName: "Styles__StyledMenu",
componentId: "sc-1v8h7mt-1"
})(["", ""], {
"height": "auto",
"width": "auto",
"paddingLeft": "0.5rem",
"paddingRight": "0.5rem",
"paddingTop": "1rem",
"paddingBottom": "1rem"
});
var StyledButtonGroup = styled__default["default"](ButtonGroup).withConfig({
displayName: "Styles__StyledButtonGroup",
componentId: "sc-1v8h7mt-2"
})(["", " ", " button:hover{position:relative;z-index:1;}"], FontStyle, BoxSizingStyle);
var StyledSpan$1 = styled__default["default"].span.withConfig({
displayName: "Styles__StyledSpan",
componentId: "sc-1v8h7mt-3"
})(["line-height:30px;color:var(--color-theme-700);"]);
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;", " 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",
"padding": "0px",
"textAlign": "center",
"verticalAlign": "middle",
"fontSize": "0.875rem",
"lineHeight": "1",
"fontWeight": "500",
"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",
componentId: "sc-1v8h7mt-5"
})(["border-radius:var(--ac-br-8);"]);
StyledButtonGroup.displayName = "StyledButtonGroup";
StyledSpan$1.displayName = "StyledSpan";
StyledDiv$1.displayName = "StyledDiv";
StyledMenu$1.displayName = "StyledMenu";
StyledButton$1.displayName = "StyledButton";
StyledControl.displayName = "StyledControl";
var size = {
sm: "640px",
md: "768px",
lg: "1024px",
xl: "1280px",
xxl: "1536px"
};
var screen = {
sm: "@media (min-width: ".concat(size.sm, ")"),
md: "@media (min-width: ".concat(size.md, ")"),
lg: "@media (min-width: ".concat(size.lg, ")"),
xl: "@media (min-width: ".concat(size.xl, ")"),
xxl: "@media (min-width: ".concat(size.xxl, ")")
};
var StyledDialog = styled__default["default"].div.withConfig({
displayName: "Styles__StyledDialog",
componentId: "sc-jwpvgm-0"
})(["display:flex;flex-direction:column;flex:1 1 auto;max-height:calc(100vh - 156px);background-color:var(--page-paper-main);color:var(--color-theme-900);box-shadow:var(--shadow-primary);border-radius:8px;width:310px;margin:60px auto 30px auto;position:relative;", " ", " ", "{width:540px;margin:126px auto 30px auto;}"], FontStyle, BoxSizingStyle, screen.sm);
StyledDialog.displayName = "StyledDialog";
var StyledDialogTitle = styled__default["default"].div.withConfig({
displayName: "Styles__StyledDialogTitle",
componentId: "sc-jwpvgm-1"
})(["padding:20px 30px;", " ", ""], FontStyle, BoxSizingStyle);
StyledDialogTitle.displayName = "StyledDialogTitle";
var StyledDialogContent = styled__default["default"].div.withConfig({
displayName: "Styles__StyledDialogContent",
componentId: "sc-jwpvgm-2"
})(["padding:20px 30px;max-height:580px;overflow-y:auto;flex:1 1 auto;", " ", ""], FontStyle, BoxSizingStyle);
StyledDialogContent.displayName = "StyledDialogContent";
var StyledDialogContentDivider = styled__default["default"].div.withConfig({
displayName: "Styles__StyledDialogContentDivider",
componentId: "sc-jwpvgm-3"
})(["border-top:1px solid var(--border-primary);height:1px;"]);
StyledDialogContentDivider.displayName = "StyledDialogContentDivider";
var StyledDialogActions = styled__default["default"].div.withConfig({
displayName: "Styles__StyledDialogActions",
componentId: "sc-jwpvgm-4"
})(["padding:20px 30px;", " ", ""], FontStyle, BoxSizingStyle);
StyledDialogActions.displayName = "StyledDialogActions";
var _excluded$1j = ["className", "children"];
// import { useDialogContext } from "./DialogContext";
var DialogActions = function DialogActions(_ref) {
var className = _ref.className,
children = _ref.children,
rest = _objectWithoutProperties(_ref, _excluded$1j);
// useDialogContext();
return /*#__PURE__*/React__default["default"].createElement(StyledDialogActions, _extends({
className: classNames__default["default"]("c-dialog-actions", className)
}, rest), children);
};
DialogActions.displayName = "DialogActions";
var _excluded$1i = ["className", "children"];
// import { useDialogContext } from "./DialogContext";
var DialogContent = function DialogContent(_ref) {
var className = _ref.className,
children = _ref.children,
rest = _objectWithoutProperties(_ref, _excluded$1i);
// useDialogContext();
return /*#__PURE__*/React__default["default"].createElement(StyledDialogContent, _extends({
className: classNames__default["default"]("c-dialog-content", className)
}, rest), children);
};
DialogContent.displayName = "DialogContent";
// import { useDialogContext } from "./DialogContext";
var DialogContentDivider = function DialogContentDivider(_ref) {
var className = _ref.className;
// useDialogContext();
return /*#__PURE__*/React__default["default"].createElement(StyledDialogContentDivider, {
className: classNames__default["default"]("c-dialog-content-divider", className)
});
};
DialogContentDivider.displayName = "DialogContentDivider";
var _excluded$1h = ["children"];
var Header3 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var children = _ref.children,
props = _objectWithoutProperties(_ref, _excluded$1h);
return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
weight: "bold",
variant: "Header 3",
ref: ref
}, props), children);
});
Header3.displayName = "Header3";
var _excluded$1g = ["children", "className", "disableDefaultHeading"];
// import { useDialogContext } from "./DialogContext";
var DialogTitle = function DialogTitle(_ref) {
var children = _ref.children,
className = _ref.className,
_ref$disableDefaultHe = _ref.disableDefaultHeading,
disableDefaultHeading = _ref$disableDefaultHe === void 0 ? false : _ref$disableDefaultHe,
rest = _objectWithoutProperties(_ref, _excluded$1g);
// useDialogContext();
return /*#__PURE__*/React__default["default"].createElement(StyledDialogTitle, _extends({
className: classNames__default["default"]("c-dialog-title-wrapper", className)
}, rest), disableDefaultHeading ? children : /*#__PURE__*/React__default["default"].createElement(Header3, null, children));
};
DialogTitle.displayName = "DialogTitle";
function createChainedFunction() {
for (var _len = arguments.length, functions = new Array(_len), _key = 0; _key < _len; _key++) {
functions[_key] = arguments[_key];
}
return functions.reduce(function (acc, func) {
if (func === null) {
return acc;
}
return function chainedFunction() {
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
args[_key2] = arguments[_key2];
}
acc && acc.apply(this, args);
func && func.apply(this, args);
};
},
// eslint-disable-next-line @typescript-eslint/no-empty-function
function () {});
}
var _excluded$1f = ["children", "disableFocusLock", "disableScrollLock", "disableBackgroundClick", "disableBackgroundColor", "disableCloseOnEsc", "open", "onClose", "onClickOutside"];
var getHasTransition = function getHasTransition(children) {
return children.props ? Object.prototype.hasOwnProperty.call(children.props, "in") : false;
};
var Modal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var children = _ref.children,
_ref$disableFocusLock = _ref.disableFocusLock,
disableFocusLock = _ref$disableFocusLock === void 0 ? false : _ref$disableFocusLock,
_ref$disableScrollLoc = _ref.disableScrollLock,
disableScrollLock = _ref$disableScrollLoc === void 0 ? false : _ref$disableScrollLoc,
_ref$disableBackgroun = _ref.disableBackgroundClick,
disableBackgroundClick = _ref$disableBackgroun === void 0 ? false : _ref$disableBackgroun,
_ref$disableBackgroun2 = _ref.disableBackgroundColor,
disableBackgroundColor = _ref$disableBackgroun2 === void 0 ? false : _ref$disableBackgroun2,
_ref$disableCloseOnEs = _ref.disableCloseOnEsc,
disableCloseOnEsc = _ref$disableCloseOnEs === void 0 ? false : _ref$disableCloseOnEs,
_ref$open = _ref.open,
defaultOpen = _ref$open === void 0 ? false : _ref$open,
onClose = _ref.onClose,
onClickOutside = _ref.onClickOutside,
rest = _objectWithoutProperties(_ref, _excluded$1f);
var _useState = React.useState(defaultOpen),
_useState2 = _slicedToArray(_useState, 2),
open = _useState2[0],
setOpen = _useState2[1];
var _useState3 = React.useState(true),
_useState4 = _slicedToArray(_useState3, 2),
exited = _useState4[0],
setExited = _useState4[1];
var innerRef = React.useRef(null);
var handleRef = useForkRef(innerRef, ref);
var hasTransition = React.useMemo(function () {
return getHasTransition(children);
}, [children]);
React.useEffect(function () {
setOpen(defaultOpen);
}, [defaultOpen]);
var handleClose = React.useCallback(function () {
setOpen(false);
if (!hasTransition) {
typeof onClose === "function" && onClose();
}
}, [hasTransition, onClose]);
var handleBackgroundClick = React.useCallback(function (event) {
if (!disableBackgroundClick) {
event.preventDefault();
return handleClose();
}
if (onClickOutside) {
onClickOutside(event);
}
}, [disableBackgroundClick, onClickOutside, handleClose]);
var handleEnter = React.useCallback(function () {
setExited(false);
}, []);
var handleExited = React.useCallback(function () {
setExited(true);
typeof onClose === "function" && onClose();
}, [onClose]);
var childProps = React.useMemo(function () {
var props = {};
// It's a Transition like component
if (hasTransition && children) {
props = {
onEnter: createChainedFunction(handleEnter, children.props.onEnter),
onExited: createChainedFunction(handleExited, children.props.onExited),
in: open
};
}
return props;
}, [children, handleEnter, handleExited, hasTransition, open]);
if (!open && (!hasTransition || exited)) {
return null;
}
return /*#__PURE__*/React__default["default"].createElement(Window, _extends({}, rest, {
ref: handleRef,
onClose: handleClose,
disableFocusLock: disableFocusLock,
disableScrollLock: disableScrollLock,
disableCloseOnEsc: disableCloseOnEsc
}), open ? /*#__PURE__*/React__default["default"].createElement(Overlay, {
onClick: handleBackgroundClick,
disableBackgroundColor: disableBackgroundColor
}) : null, /*#__PURE__*/React.cloneElement(children, childProps));
});
Modal.displayName = "Modal";
var _excluded$1e = ["in", "children", "style", "timeout"];
var defaultStyle$2 = function defaultStyle(duration) {
return {
transition: "all ".concat(duration, "ms ease-in-out"),
opacity: 0
};
};
var transitionStyles$3 = {
entering: {
opacity: 1
},
entered: {
opacity: 1
},
exiting: {
opacity: 0
},
exited: {
opacity: 0
}
};
var Fade = function Fade(_ref) {
var _ref$in = _ref.in,
inProp = _ref$in === void 0 ? false : _ref$in,
children = _ref.children,
style = _ref.style,
_ref$timeout = _ref.timeout,
timeout = _ref$timeout === void 0 ? 500 : _ref$timeout,
rest = _objectWithoutProperties(_ref, _excluded$1e);
return /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.Transition, _extends({
appear: true,
in: inProp,
timeout: timeout
}, rest), function (state) {
return /*#__PURE__*/React.cloneElement(children, {
style: _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({
visibility: state === "exited" && !inProp ? "hidden" : undefined
}, defaultStyle$2(timeout)), transitionStyles$3[state]), style), children.props.style)
});
});
};
Fade.displayName = "Fade";
var _excluded$1d = ["in", "children", "style", "timeout", "initialDirection"];
var Slide = function Slide(_ref) {
var _ref$in = _ref.in,
inProp = _ref$in === void 0 ? false : _ref$in,
children = _ref.children,
style = _ref.style,
_ref$timeout = _ref.timeout,
timeout = _ref$timeout === void 0 ? 300 : _ref$timeout,
_ref$initialDirection = _ref.initialDirection,
initialDirection = _ref$initialDirection === void 0 ? "left" : _ref$initialDirection,
rest = _objectWithoutProperties(_ref, _excluded$1d);
var directionSign;
switch (initialDirection) {
case "right":
directionSign = "100%, 0";
break;
case "top":
directionSign = "0, -100%";
break;
case "bottom":
directionSign = "0, 100%";
break;
default:
directionSign = "-100%, 0";
}
var defaultStyle = function defaultStyle(timeout) {
return {
transition: "all ".concat(timeout, "ms ease")
};
};
var transitionStyles = {
entering: {
transform: "translate(0,0)"
},
entered: {
transform: "translate(0,0)"
},
exiting: {
transform: "translate(".concat(directionSign, ")")
},
exited: {
transform: "translate(".concat(directionSign, ")")
}
};
return /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.Transition, _extends({
in: inProp,
timeout: timeout
}, rest), function (state) {
return /*#__PURE__*/React.cloneElement(children, {
style: _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({
visibility: state === "exited" && !inProp ? "hidden" : undefined
}, defaultStyle(timeout)), transitionStyles[state]), style), children.props.style)
});
});
};
Slide.displayName = "Slide";
var defaultStyle$1 = {
transitionProperty: "opacity, transform",
transitionTimingFunction: "linear ease-out",
transform: "translateY(-100%)",
opacity: 0
};
var transitionStyles$2 = {
entering: {
opacity: 1,
transform: "translateY(0)",
transitionDuration: ".3s"
},
entered: {
opacity: 1,
transform: "translateY(0)",
transitionDuration: ".3s"
},
exiting: {
opacity: 0,
transform: "translateY(-100%)",
transitionDuration: ".2s"
},
exited: {
opacity: 0,
transform: "translateY(-100%)",
transitionDuration: ".2s"
}
};
var SlideFromTop = function SlideFromTop(_ref) {
var _ref$in = _ref.in,
inProp = _ref$in === void 0 ? false : _ref$in,
onEnter = _ref.onEnter,
onExited = _ref.onExited,
children = _ref.children,
style = _ref.style,
_ref$timeout = _ref.timeout,
timeout = _ref$timeout === void 0 ? 400 : _ref$timeout;
return /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.Transition, {
appear: true,
in: inProp,
timeout: timeout,
onEnter: onEnter,
onExited: onExited
}, function (state) {
return /*#__PURE__*/React.cloneElement(children, {
style: _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({
visibility: state === "exited" && !inProp ? "hidden" : undefined
}, defaultStyle$1), transitionStyles$2[state]), style), children.props.style)
});
});
};
SlideFromTop.displayName = "SlideFromTop";
var StyledSlideLeftRight = styled.createGlobalStyle(["", " ", ""], function (props) {
return props.$direction === "left" && styled.css(["&.c-slide-enter{position:absolute;transform:translateX(100%);}&.c-slide-enter-active{transform:translateX(0%);transition:all 200ms ease;}&.c-slide-exit{position:absolute;}&.c-slide-exit-active{transform:translateX(-100%);transition:all 200ms ease;}"]);
}, function (props) {
return props.$direction === "right" && styled.css(["&.c-slide-enter{position:absolute;transform:translateX(-100%);}&.c-slide-enter-active{transform:translateX(0%);transition:all 200ms ease;}&.c-slide-exit{position:absolute;}&.c-slide-exit-active{transform:translateX(100%);transition:all 200ms ease;}"]);
});
var _excluded$1c = ["children", "direction"];
var SlideLeftRightTransition = function SlideLeftRightTransition(_ref) {
var children = _ref.children,
_ref$direction = _ref.direction,
direction = _ref$direction === void 0 ? "left" : _ref$direction,
props = _objectWithoutProperties(_ref, _excluded$1c);
return /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.CSSTransition, _extends({
timeout: 200,
classNames: "c-slide",
unmountOnExit: true
}, props), /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, children, /*#__PURE__*/React__default["default"].createElement(StyledSlideLeftRight, {
$direction: direction
})));
};
SlideLeftRightTransition.displayName = "SlideLeftRightTransition";
var ResizeTransition = function ResizeTransition(_ref) {
var _ref$in = _ref.in,
inProp = _ref$in === void 0 ? false : _ref$in,
onEnter = _ref.onEnter,
onExited = _ref.onExited,
children = _ref.children,
style = _ref.style,
_ref$timeout = _ref.timeout,
timeout = _ref$timeout === void 0 ? 200 : _ref$timeout;
var defaultStyle = React.useMemo(function () {
return {
transitionProperty: "width, height",
transitionDuration: "".concat(timeout, "ms"),
transitionTimingFunction: "ease"
};
}, [timeout]);
return /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.Transition, {
appear: true,
in: inProp,
timeout: timeout,
onEnter: onEnter,
onExited: onExited
}, function (state) {
return /*#__PURE__*/React.cloneElement(children, {
style: _objectSpread2(_objectSpread2(_objectSpread2({
visibility: state === "exited" && !inProp ? "hidden" : undefined
}, defaultStyle), style), children.props.style)
});
});
};
ResizeTransition.displayName = "ResizeTransition";
var _excluded$1b = ["in", "children", "style", "timeout"];
var defaultStyle = function defaultStyle(duration) {
return {
transition: "all ".concat(duration, "ms ease-in"),
transform: "scaleX(0)",
opacity: 0,
transformOrigin: "left"
};
};
var transitionStyles$1 = {
entering: {
transform: "scaleX(1)",
opacity: 1
},
entered: {
transform: "scaleX(1)",
opacity: 1
},
exiting: {
transform: "scaleX(0)",
opacity: 0
},
exited: {
transform: "scaleX(0)",
opacity: 0
}
};
var Reveal = function Reveal(_ref) {
var _ref$in = _ref.in,
inProp = _ref$in === void 0 ? false : _ref$in,
children = _ref.children,
style = _ref.style,
_ref$timeout = _ref.timeout,
timeout = _ref$timeout === void 0 ? 200 : _ref$timeout,
rest = _objectWithoutProperties(_ref, _excluded$1b);
return /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.Transition, _extends({
appear: true,
in: inProp,
timeout: timeout
}, rest), function (state) {
return /*#__PURE__*/React.cloneElement(children, {
style: _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, defaultStyle(inProp ? timeout : 0)), transitionStyles$1[state]), style), children.props.style)
});
});
};
Reveal.displayName = "Reveal";
var transitionStyles = {
entered: {
transform: "scale(1)"
},
exiting: {
transform: "scale(0)"
}
};
var Scale = function Scale(_ref) {
var _ref$in = _ref.in,
inProp = _ref$in === void 0 ? false : _ref$in,
onEnter = _ref.onEnter,
onExited = _ref.onExited,
children = _ref.children,
style = _ref.style,
_ref$timeout = _ref.timeout,
timeout = _ref$timeout === void 0 ? 200 : _ref$timeout;
var defaultStyle = React.useMemo(function () {
return {
transitionProperty: "transform",
transitionDuration: "".concat(timeout, "ms"),
transform: "scale(0)"
};
}, [timeout]);
return /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.Transition, {
in: inProp,
timeout: timeout,
onEnter: onEnter,
onExited: onExited
}, function (state) {
return /*#__PURE__*/React.cloneElement(children, {
style: _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, defaultStyle), transitionStyles[state]), style), children.props.style)
});
});
};
Scale.displayName = "Scale";
var _excluded$1a = ["children", "open", "onClose", "className", "enableBackgroundClick", "disableCloseOnEsc", "animate", "onClickOutside"];
var _Dialog = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var children = _ref.children,
_ref$open = _ref.open,
open = _ref$open === void 0 ? false : _ref$open,
onClose = _ref.onClose,
className = _ref.className,
_ref$enableBackground = _ref.enableBackgroundClick,
enableBackgroundClick = _ref$enableBackground === void 0 ? false : _ref$enableBackground,
_ref$disableCloseOnEs = _ref.disableCloseOnEsc,
disableCloseOnEsc = _ref$disableCloseOnEs === void 0 ? false : _ref$disableCloseOnEs,
_ref$animate = _ref.animate,
animate = _ref$animate === void 0 ? "slide" : _ref$animate,
onClickOutside = _ref.onClickOutside,
rest = _objectWithoutProperties(_ref, _excluded$1a);
var animateDialog = function animateDialog() {
switch (animate) {
case "fade":
return /*#__PURE__*/React__default["default"].createElement(Fade, {
in: open
}, /*#__PURE__*/React__default["default"].createElement(StyledDialog, {
className: classNames__default["default"]("c-dialog", className)
}, children));
default:
return /*#__PURE__*/React__default["default"].createElement(SlideFromTop, {
in: open
}, /*#__PURE__*/React__default["default"].createElement(StyledDialog, {
className: classNames__default["default"]("c-dialog", className)
}, children));
}
};
return (
/*#__PURE__*/
// <DialogContext.Provider value={{}}>
React__default["default"].createElement(Modal, _extends({
ref: ref,
open: open,
onClose: onClose,
disableBackgroundClick: !enableBackgroundClick,
disableCloseOnEsc: disableCloseOnEsc,
onClickOutside: onClickOutside
}, rest), animateDialog())
// </DialogContext.Provider>
);
});
_Dialog.displayName = "Dialog";
// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/34757
var Dialog = Object.assign({}, _Dialog, {
Title: DialogTitle,
Content: DialogContent,
ContentDivider: DialogContentDivider,
Actions: DialogActions
});
var ConfirmDialog = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var _ref$open = _ref.open,
open = _ref$open === void 0 ? false : _ref$open,
onCancel = _ref.onCancel,
onConfirm = _ref.onConfirm,
className = _ref.className,
_ref$dialogTitle = _ref.dialogTitle,
dialogTitle = _ref$dialogTitle === void 0 ? "Discard changes?" : _ref$dialogTitle,
_ref$dialogContent = _ref.dialogContent,
dialogContent = _ref$dialogContent === void 0 ? "All unsaved changes will be lost." : _ref$dialogContent,
_ref$confirmBtnText = _ref.confirmBtnText,
confirmBtnText = _ref$confirmBtnText === void 0 ? "OK" : _ref$confirmBtnText,
_ref$cancelBtnText = _ref.cancelBtnText,
cancelBtnText = _ref$cancelBtnText === void 0 ? "Cancel" : _ref$cancelBtnText,
_ref$shouldShowCancel = _ref.shouldShowCancelButton,
shouldShowCancelButton = _ref$shouldShowCancel === void 0 ? true : _ref$shouldShowCancel,
_ref$isLoading = _ref.isLoading,
isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading;
React.useEffect(function () {
var handleKeyDown = function handleKeyDown(event) {
if (event.key === "Enter" && onConfirm) {
event.preventDefault();
onConfirm();
}
};
if (open) {
window.addEventListener("keydown", handleKeyDown);
}
return function () {
window.removeEventListener("keydown", handleKeyDown);
};
}, [open, onConfirm]);
return /*#__PURE__*/React__default["default"].createElement(Dialog, {
ref: ref,
open: open,
onClose: onCancel,
className: classNames__default["default"]("c-confirm-dialog", className),
disableCloseOnEsc: isLoading
}, /*#__PURE__*/React__default["default"].createElement(Dialog.Title, null, dialogTitle), /*#__PURE__*/React__default["default"].createElement(Dialog.ContentDivider, null), /*#__PURE__*/React__default["default"].createElement(Dialog.Content, null, /*#__PURE__*/React__default["default"].createElement(Body2, {
lineHeight: "loose",
color: "secondary",
whitespace: "pre-line"
}, dialogContent)), /*#__PURE__*/React__default["default"].createElement(Dialog.ContentDivider, null), /*#__PURE__*/React__default["default"].createElement(Dialog.Actions, null, /*#__PURE__*/React__default["default"].createElement(Button, {
variant: "primary",
style: {
marginRight: "12px"
},
onClick: onConfirm,
disabled: isLoading
}, confirmBtnText), shouldShowCancelButton ? /*#__PURE__*/React__default["default"].createElement(Button, {
variant: "secondary",
"data-action": "cancel",
onClick: onCancel,
type: "button",
disabled: isLoading
}, cancelBtnText) : null));
});
ConfirmDialog.displayName = "ConfirmDialog";
var StyledConfirmDialog$1 = styled__default["default"](ConfirmDialog).withConfig({
displayName: "Styles__StyledConfirmDialog",
componentId: "sc-18towna-0"
})([".modal-header{padding:16px 30px;h1{margin:0;font-size:16px;}}.modal-body{padding:10px 30px;}.modal-divider{border-top:1px solid var(--border-primary);height:1px;}.modal-footer{padding:16px 30px;}"]);
StyledConfirmDialog$1.displayName = "StyledConfirmDialog";
var StyledDatePickerContainerInner = styled__default["default"].div.withConfig({
displayName: "Styles__StyledDatePickerContainerInner",
componentId: "sc-18towna-1"
})(["& > *{font-family:-apple-system,BlinkMacSystemFont,\"Roboto\",\"Helvetica Neue\",Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}&{@keyframes slide-up{from{transform:translateY(0);opacity:1;}to{transform:translateY(-20px);opacity:0;}}@keyframes slide-down{from{transform:translateY(0);opacity:1;}to{transform:translateY(20px);opacity:0;}}.slide-up{animation:slide-up 0.3s ease-in-out;}.slide-down{animation:slide-down 0.3s ease-in-out;}.today-day{position:relative;&::after{position:absolute;content:\"\";bottom:2px;height:3px;width:3px;border-radius:3px;margin:0 auto;left:0;right:0;background:var(--color-primary);}}.today-day,.today-month,.today-year{color:var(--color-primary);background-color:none;}.selected{background-color:var(--color-primary) !important;color:var(--color-theme-100) !important;}.disabled{pointer-events:none;color:var(--color-theme-500);}.hovered{background-color:var(--color-primary-300);}}.userAvailability,.nonWorkingDaysOfWeek{color:var(--red-alert);&.hovered:hover:not(.selected){background-color:rgba(237,97,97,0.1);color:var(--red-alert);}&.today-day{color:var(--red-alert);&:after{background-color:var(--red-alert);}&.hovered:hover:not(.selected):after{background-color:var(--red-alert);}}}.selected{background-color:var(--color-primary);color:var(--color-theme-100);&.today-day{color:var(--color-theme-100);&:after{background-color:var(--color-theme-100);}}&.userAvailability,&.nonWorkingDaysOfWeek{background-color:var(--red-alert) !important;color:var(--color-theme-100) !important;}}.nonWorkingDay{color:var(--color-theme-500);&.hovered:hover:not(.selected){color:var(--color-theme-500);}&.today-day{color:var(--color-primary-500);&:after{background-color:var(--color-primary-500);}&.hovered:hover:not(.selected){color:var(--color-theme-500);&:after{background-color:var(--color-theme-500);}}}&.userAvailability,&.nonWorkingDaysOfWeek{&.hovered:hover:not(.selected){color:var(--color-theme-500);background-color:var(--color-primary-300);&.today-day:after{background-color:var(--color-theme-500);}}}&.selected{color:rgba(255,255,255,0.6);background-color:var(--color-primary);.neon &{color:rgba(0,0,0,0.4);}&.today-day{color:rgba(255,255,255,0.6);.neon &{color:rgba(0,0,0,0.4);}&:after{background-color:rgba(255,255,255,0.6);.neon &{background-color:rgba(0,0,0,0.4);}}}}}.disabled{cursor:default;color:var(--color-theme-500);&.hovered:hover{color:var(--color-theme-500);}}.outside{cursor:default;opacity:0.25;color:var(--color-theme-900);&.userAvailability.hovered:hover:not(.selected),&.nonWorkingDaysOfWeek.hovered:hover:not(.selected){background:var(--color-primary-300);}&.userAvailability:not(.selected),&.nonWorkingDaysOfWeek:not(.selected),&.userAvailability.hovered:hover:not(.selected),&.nonWorkingDaysOfWeek.hovered:hover:not(.selected),&.nonWorkingDay.hovered:hover:not(.selected),&.nonWorkingDay:not(.selected),&.today-day.hovered:hover:not(.selected),&.today-day:not(.selected){color:var(--color-theme-900);}&.userAvailability.today-day:not(.selected):after,&.nonWorkingDaysOfWeek.today-day:not(.selected):after,&.userAvailability.today-day.hovered:hover:not(.selected):after,&.nonWorkingDaysOfWeek.today-day.hovered:hover:not(.selected):after,&.nonWorkingDay.today-day:not(.selected):after,&.nonWorkingDay.today-day.hovered:hover:not(.selected):after,&.today-day.hovered:hover:not(.selected):after,&.today-day:not(.selected):after{background-color:var(--color-theme-900);}&.hovered:hover:not(.selected){background:var(--color-primary-400);}&.selected{color:var(--page-paper-main);background:var(--color-primary);.neon &{color:var(--page-paper-main);}&.today-day{&:after{background:var(--page-paper-main);.neon &{background:var(--page-paper-main);}}&.nonWorkingDay{color:var(--page-paper-main);.neon &{color:var(--page-paper-main);}}}}}"]);
var StyledDatePickerWrapper = styled__default["default"].div.withConfig({
displayName: "Styles__StyledDatePickerWrapper",
componentId: "sc-18towna-2"
})(["position:relative;display:inline-block;width:100%;"]);
StyledDatePickerWrapper.displayName = "StyledDatePickerWrapper";
var StyledDaysOfWeek = styled__default["default"].div.withConfig({
displayName: "Styles__StyledDaysOfWeek",
componentId: "sc-18towna-3"
})(["display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-weight:bold;margin-bottom:0;width:100%;"]);
StyledDaysOfWeek.displayName = "StyledDaysOfWeek";
var StyledDayName = styled__default["default"].div.withConfig({
displayName: "Styles__StyledDayName",
componentId: "sc-18towna-4"
})(["width:27px;height:27px;display:grid;place-items:center;font-size:11px;font-weight:400;color:var(--color-theme-600);user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;"]);
StyledDayName.displayName = "StyledDayName";
var StyledCalendarDates = styled__default["default"].div.withConfig({
displayName: "Styles__StyledCalendarDates",
componentId: "sc-18towna-5"
})(["display:grid;grid-template-columns:repeat(7,1fr);text-align:center;row-gap:4px;width:100%;"]);
StyledCalendarDates.displayName = "StyledCalendarDates";
var StyledCalendarDate = styled__default["default"].div.withConfig({
displayName: "Styles__StyledCalendarDate",
componentId: "sc-18towna-6"
})(["cursor:pointer;border-radius:50%;transition:background 0.3s;width:27px;height:27px;display:grid;place-items:center;font-size:13px;font-weight:700;color:var(--color-theme-900);user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;&:hover{background-color:var(--color-primary-300);}"]);
StyledCalendarDate.displayName = "StyledCalendarDate";
var StyledCaption = styled__default["default"].span.withConfig({
displayName: "Styles__StyledCaption",
componentId: "sc-18towna-7"
})(["font-size:18.5px;font-weight:500;padding:0 16px;border-radius:15px;color:var(--color-theme-900);user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;&.year-caption{margin:auto !important;}&:hover{background-color:var(--color-primary-300);}"]);
StyledCaption.displayName = "StyledCaption";
var StyledCalendarSelector = styled__default["default"].div.withConfig({
displayName: "Styles__StyledCalendarSelector",
componentId: "sc-18towna-8"
})(["height:230px;display:grid;place-items:center;width:100%;max-width:212px;margin:auto;"]);
StyledCalendarSelector.displayName = "StyledCalendarSelector";
var StyledYearSelect = styled__default["default"].div.withConfig({
displayName: "Styles__StyledYearSelect",
componentId: "sc-18towna-9"
})(["display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:8px 20px;max-height:210px;overflow-y:auto;width:100%;"]);
StyledYearSelect.displayName = "StyledYearSelect";
var StyledYearOption = styled__default["default"].div.withConfig({
displayName: "Styles__StyledYearOption",
componentId: "sc-18towna-10"
})(["cursor:pointer;text-align:center;border-radius:16px;transition:background 0.2s;font-size:14px;margin:auto;font-weight:700;font-size:14px;line-height:18px;width:50px;margin-bottom:16px;height:20px;color:var(--color-theme-900);user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;&:hover{background-color:var(--color-primary-300);}"]);
StyledYearOption.displayName = "StyledYearOption";
var StyledMonthOption = styled__default["default"].div.withConfig({
displayName: "Styles__StyledMonthOption",
componentId: "sc-18towna-11"
})(["text-align:center;cursor:pointer;border-radius:16px;transition:background 0.2s;margin:13.5px auto;font-weight:700;font-size:14px;line-height:18px;width:50px;margin-bottom:16px;height:20px;color:var(--color-theme-900);user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;&:hover{background-color:var(--color-primary-300);}"]);
StyledMonthOption.displayName = "StyledMonthOption";
var StyledMonthSelect = styled__default["default"].div.withConfig({
displayName: "Styles__StyledMonthSelect",
componentId: "sc-18towna-12"
})(["display:grid;grid-template-columns:repeat(3,1fr);gap:4px;width:100%;height:220px;margin:auto;"]);
StyledMonthSelect.displayName = "StyledMonthSelect";
var StyledMonthSelector = styled__default["default"].div.withConfig({
displayName: "Styles__StyledMonthSelector",
componentId: "sc-18towna-13"
})(["width:100%;padding:8px 20px;"]);
StyledMonthSelector.displayName = "StyledMonthSelector";
var StyledControls = styled__default["default"].div.withConfig({
displayName: "Styles__StyledControls",
componentId: "sc-18towna-14"
})(["display:flex;justify-content:space-between;border-top:1px solid var(--border-primary);margin:8px 0 0;padding:8px 24px 0px;"]);
StyledControls.displayName = "StyledControls";
var StyledControlsLeft = styled__default["default"].div.withConfig({
displayName: "Styles__StyledControlsLeft",
componentId: "sc-18towna-15"
})(["display:flex;gap:8px;"]);
StyledControlsLeft.displayName = "StyledControlsLeft";
var StyledClearInstantButton = styled__default["default"](Button).withConfig({
displayName: "Styles__StyledClearInstantButton",
componentId: "sc-18towna-16"
})(["margin:auto !important;"]);
StyledClearInstantButton.displayName = "StyledClearInstantButton";
var StyledCalendarHeader = styled__default["default"].div.withConfig({
displayName: "Styles__StyledCalendarHeader",
componentId: "sc-18towna-17"
})(["display:flex;justify-content:space-between;align-items:center;font-weight:bold;margin:auto;margin-bottom:4px;cursor:pointer;width:230px;"]);
StyledCalendarHeader.displayName = "StyledCalendarHeader";
var toMoment = function toMoment(date) {
if (moment__default["default"].isMoment(date)) {
return date;
} else if (typeof date === "number") {
return moment__default["default"].utc(date * 1000);
} else if (typeof date === "string") {
return moment__default["default"].utc(date);
}
return null;
};
var DatePicker = function DatePicker(_ref) {
var defaultSelected = _ref.selected,
onChange = _ref.onChange,
onSave = _ref.onSave,
onClear = _ref.onClear,
onClose = _ref.onClose,
_ref$instant = _ref.instant,
instant = _ref$instant === void 0 ? true : _ref$instant,
target = _ref.target,
_ref$mode = _ref.mode,
mode = _ref$mode === void 0 ? "daily" : _ref$mode,
_ref$saveLabel = _ref.saveLabel,
saveLabel = _ref$saveLabel === void 0 ? "Save" : _ref$saveLabel,
_ref$cancelLabel = _ref.cancelLabel,
cancelLabel = _ref$cancelLabel === void 0 ? "Cancel" : _ref$cancelLabel,
_ref$clearLabel = _ref.clearLabel,
clearLabel = _ref$clearLabel === void 0 ? "Clear" : _ref$clearLabel,
disabledDaysBefore = _ref.disabledDaysBefore,
disabledDaysAfter = _ref.disabledDaysAfter,
_ref$disabled = _ref.disabled,
disabledDays = _ref$disabled === void 0 ? [] : _ref$disabled,
modifiers = _ref.modifiers,
disableAnimations = _ref.disableAnimations,
_ref$firstDayOfWeek = _ref.firstDayOfWeek,
firstDayOfWeek = _ref$firstDayOfWeek === void 0 ? 0 : _ref$firstDayOfWeek,
forceClose = _ref.forceClose,
required = _ref.required,
month = _ref.month,
disableYearPicker = _ref.disableYearPicker,
_ref$position = _ref.position,
position = _ref$position === void 0 ? "bottom-start" : _ref$position,
menuClassName = _ref.menuClassName,
popperClassName = _ref.popperClassName,
_ref$enableConfirmMod = _ref.enableConfirmModal,
enableConfirmModal = _ref$enableConfirmMod === void 0 ? false : _ref$enableConfirmMod,
_ref$modalHeaderText = _ref.modalHeaderText,
modalHeaderText = _ref$modalHeaderText === void 0 ? "Discard changes?" : _ref$modalHeaderText,
_ref$modalDiscardMess = _ref.modalDiscardMessage,
modalDiscardMessage = _ref$modalDiscardMess === void 0 ? "All unsaved changes will be lost." : _ref$modalDiscardMess,
_ref$modalDiscardBtnT = _ref.modalDiscardBtnText,
modalDiscardBtnText = _ref$modalDiscardBtnT === void 0 ? "OK" : _ref$modalDiscardBtnT,
_ref$modalCancelBtnTe = _ref.modalCancelBtnText,
modalCancelBtnText = _ref$modalCancelBtnTe === void 0 ? "Cancel" : _ref$modalCancelBtnTe,
backgroundElementClass = _ref.backgroundElementClass,
popperTooltipClassName = _ref.popperTooltipClassName,
popperTooltipStyle = _ref.popperTooltipStyle,
open = _ref.open,
onCalendarToggle = _ref.onCalendarToggle,
onDayClick = _ref.onDayClick,
showControls = _ref.showControls;
var _useState = React.useState(open),
_useState2 = _slicedToArray(_useState, 2),
isOpen = _useState2[0],
setIsOpen = _useState2[1];
var _useState3 = React.useState(false),
_useState4 = _slicedToArray(_useState3, 2),
isYearSelectOpen = _useState4[0],
setIsYearSelectOpen = _useState4[1];
var _useState5 = React.useState(false),
_useState6 = _slicedToArray(_useState5, 2),
showDiscardModal = _useState6[0],
setShowDiscardModal = _useState6[1];
var _useState7 = React.useState(mode === "monthly" || mode === "quarterly"),
_useState8 = _slicedToArray(_useState7, 2),
isMonthSelectOpen = _useState8[0],
setIsMonthSelectOpen = _useState8[1];
var _useState9 = React.useState(null),
_useState10 = _slicedToArray(_useState9, 2),
monthTransitionDirection = _useState10[0],
setMonthTransitionDirection = _useState10[1];
var _useState11 = React.useState(function () {
if (defaultSelected && defaultSelected.from) {
return toMoment(defaultSelected.from);
}
if (month) {
return toMoment(month);
}
return moment__default["default"].utc();
}),
_useState12 = _slicedToArray(_useState11, 2),
currentDate = _useState12[0],
setCurrentDate = _useState12[1];
var _useState13 = React.useState(function () {
if (defaultSelected && defaultSelected.from) {
return toMoment(defaultSelected.from);
} else if (month) {
return toMoment(month);
}
return moment__default["default"].utc();
}),
_useState14 = _slicedToArray(_useState13, 2),
targetDate = _useState14[0],
setTargetDate = _useState14[1];
var _useState15 = React.useState(function () {
if (!defaultSelected) {
return null;
}
if (!defaultSelected.from) {
return null;
}
return {
from: toMoment(defaultSelected.from),
to: defaultSelected.to ? toMoment(defaultSelected.to) : null
};
}),
_useState16 = _slicedToArray(_useState15, 2),
selected = _useState16[0],
setSelected = _useState16[1];
var _useState17 = React.useState(null),
_useState18 = _slicedToArray(_useState17, 2),
hoveredDate = _useState18[0],
setHoveredDate = _useState18[1];
var timezone = moment__default["default"].defaultZone ? moment__default["default"].defaultZone.name : moment__default["default"].tz.guess();
var currentDateInTimezone = moment__default["default"]().tz(timezone).format("YYYY-MM-DD");
var today = moment__default["default"].utc(currentDateInTimezone);
var selectedYearRef = React.useRef(null);
var datePickerRef = React.useRef(null);
var handleSelection = React.useCallback(function (range) {
if (!range) {
setSelected(null);
if (onChange) onChange(undefined);
if (instant && onSave) {
onSave(undefined);
}
} else {
setSelected(range);
if (onChange) onChange({
from: range.from.utc().unix(),
to: range !== null && range !== void 0 && range.to ? moment__default["default"](range.to).utc().unix() : null
});
if (instant && onSave) {
onSave({
from: range.from.utc().unix(),
to: range !== null && range !== void 0 && range.to ? moment__default["default"](range.to).utc().unix() : null
});
}
}
}, [onChange, onSave, instant]);
var toggleCalendar = React.useCallback(function () {
if (target) {
setIsOpen(!isOpen);
if (onCalendarToggle) onCalendarToggle(!isOpen);
}
}, [isOpen, onCalendarToggle, target]);
var toggleYearSelect = React.useCallback(function () {
setIsYearSelectOpen(!isYearSelectOpen);
setIsMonthSelectOpen(true);
}, [isYearSelectOpen]);
var toggleMonthSelect = React.useCallback(function () {
if (mode !== "monthly" && mode !== "quarterly") {
setIsMonthSelectOpen(!isMonthSelectOpen);
}
}, [isMonthSelectOpen, mode]);
React.useEffect(function () {
if (defaultSelected && defaultSelected.from) {
setSelected({
from: toMoment(defaultSelected.from),
to: defaultSelected.to ? toMoment(defaultSelected.to) : null
});
setCurrentDate(toMoment(defaultSelected.from) || moment__default["default"].utc());
setTargetDate(toMoment(defaultSelected.from) || moment__default["default"].utc());
} else {
setSelected(null);
}
}, [defaultSelected, month]);
var handleDateSelect = function handleDateSelect(date) {
var isSameMonth = date.isSame(currentDate, "month");
if (isSameMonth || disableAnimations) {
setCurrentDate(date);
setTargetDate(date);
} else {
var direction = date.isBefore(currentDate, "month") ? "prev" : "next";
setTargetDate(date);
setMonthTransitionDirection(direction);
}
switch (mode) {
case "daily":
handleDailySelection(date);
break;
case "weekly":
handleWeeklySelection(date);
break;
case "custom":
handleCustomSelection(date);
break;
default:
console.warn("Unhandled mode: ".concat(mode));
}
if (instant && mode !== "custom" && forceClose) toggleCalendar();
};
var handleDailySelection = function handleDailySelection(date) {
if (!date.isSame(selected === null || selected === void 0 ? void 0 : selected.from)) {
handleSelection({
from: date,
to: date
});
} else if (!required) {
handleSelection(undefined);
}
};
var handleWeeklySelection = function handleWeeklySelection(date) {
var _selected$from;
var currentDayOfWeek = date.day();
var daysToSubtract = (currentDayOfWeek - firstDayOfWeek + 7) % 7;
var startOfWeek = date.clone().subtract(daysToSubtract, "days").startOf("day");
var endOfWeek = startOfWeek.clone().add(6, "days");
if (!startOfWeek.isSame(selected === null || selected === void 0 || (_selected$from = selected.from) === null || _selected$from === void 0 ? void 0 : _selected$from.startOf("day"))) {
handleSelection({
from: startOfWeek,
to: endOfWeek
});
} else if (!required) {
handleSelection(undefined);
}
};
var handleCustomSelection = function handleCustomSelection(date) {
if (!selected || (selected === null || selected === void 0 ? void 0 : selected.from) === moment__default["default"].utc(Number(defaultSelected === null || defaultSelected === void 0 ? void 0 : defaultSelected.from) * 1000)) {
setSelected({
from: date.utc(),
to: null
});
handleSelection({
from: date,
to: null
});
return;
}
if (moment__default["default"].isMoment(selected === null || selected === void 0 ? void 0 : selected.from) && !(selected !== null && selected !== void 0 && selected.to) && !(selected !== null && selected !== void 0 && selected.from.isSame(date.utc(), "day"))) {
var newSelection = selected !== null && selected !== void 0 && selected.from.isBefore(date) ? {
from: selected.from,
to: date.utc()
} : {
from: date.utc(),
to: selected.from
};
setSelected(newSelection);
handleSelection({
from: newSelection.from,
to: newSelection.to
});
} else if (moment__default["default"].isMoment(selected === null || selected === void 0 ? void 0 : selected.from) && moment__default["default"].isMoment(selected === null || selected === void 0 ? void 0 : selected.to)) {
setSelected({
from: date,
to: null
});
handleSelection({
from: date,
to: null
});
} else if (moment__default["default"].isMoment(selected === null || selected === void 0 ? void 0 : selected.from) && selected !== null && selected !== void 0 && selected.from.isSame(date.utc(), "day") && !required) {
setSelected(null);
handleSelection(undefined);
} else if (selected.from === null && selected.to === null) {
setSelected({
from: date.utc(),
to: null
});
handleSelection({
from: date,
to: date
});
}
};
var handleSave = function handleSave() {
if (onSave) {
toggleCalendar();
if (mode === "custom" && !(selected !== null && selected !== void 0 && selected.to)) {
setSelected({
from: moment__default["default"].utc(selected === null || selected === void 0 ? void 0 : selected.from),
to: moment__default["default"].utc(selected === null || selected === void 0 ? void 0 : selected.from)
});
}
if (selected) {
onSave({
from: moment__default["default"].utc(selected === null || selected === void 0 ? void 0 : selected.from).unix(),
to: selected !== null && selected !== void 0 && selected.to ? moment__default["default"].utc(selected === null || selected === void 0 ? void 0 : selected.to).unix() : moment__default["default"].utc(selected === null || selected === void 0 ? void 0 : selected.from).unix()
});
} else {
if (!required) {
onSave(undefined);
setCurrentDate(moment__default["default"].utc());
setTargetDate(moment__default["default"].utc());
}
}
}
};
var handleMonthChange = React.useCallback(function (direction) {
setMonthTransitionDirection(direction);
if (isMonthSelectOpen) {
setTargetDate(function (prevDate) {
if (prevDate) {
return direction === "prev" ? prevDate.clone().subtract(1, "year") : prevDate.clone().add(1, "year");
}
return prevDate;
});
if (disableAnimations) {
setCurrentDate(function (prevDate) {
return direction === "prev" ? prevDate.clone().subtract(1, "year") : prevDate.clone().add(1, "year");
});
}
} else {
setTargetDate(function (prevDate) {
if (prevDate) {
return direction === "prev" ? prevDate.clone().subtract(1, "month") : prevDate.clone().add(1, "month");
}
return prevDate;
});
if (disableAnimations) {
setCurrentDate(function (prevDate) {
return direction === "prev" ? prevDate.clone().subtract(1, "month") : prevDate.clone().add(1, "month");
});
}
}
}, [disableAnimations, isMonthSelectOpen]);
var handleYearChange = React.useCallback(function (direction) {
if (isMonthSelectOpen && !disableAnimations) {
setMonthTransitionDirection(direction);
} else {
setCurrentDate(function (prevDate) {
return direction === "prev" ? prevDate.clone().subtract(1, "year") : prevDate.clone().add(1, "year");
});
}
setTargetDate(function (prevDate) {
if (prevDate) {
return direction === "prev" ? prevDate.clone().subtract(1, "year") : prevDate.clone().add(1, "year");
}
return prevDate;
});
}, [disableAnimations, isMonthSelectOpen]);
var onAnimationEnd = function onAnimationEnd() {
if (targetDate) {
setCurrentDate(targetDate);
setMonthTransitionDirection(null);
}
};
var handleYearSelect = function handleYearSelect(year) {
setCurrentDate(currentDate.clone().year(year));
setTargetDate(currentDate.clone().year(year));
setIsYearSelectOpen(false);
setIsMonthSelectOpen(true);
};
var handleMonthSelect = function handleMonthSelect(month) {
var newDate = currentDate.clone().utc().month(month);
setCurrentDate(newDate);
setTargetDate(newDate);
if (mode === "monthly") {
var _selected$to;
var _range = {
from: newDate.clone().startOf("month"),
to: newDate.clone().endOf("month").startOf("day")
};
var isSameMonth = (selected === null || selected === void 0 ? void 0 : selected.from.isSame(_range.from, "month")) && (selected === null || selected === void 0 || (_selected$to = selected.to) === null || _selected$to === void 0 ? void 0 : _selected$to.isSame(_range.to, "month"));
if (isSameMonth) {
if (!required) {
handleSelection(undefined);
if (instant && onSave) {
setCurrentDate(moment__default["default"].utc());
setTargetDate(moment__default["default"].utc());
}
}
} else {
handleSelection(_range);
}
}
if (mode === "quarterly") {
var _selected$to2;
var quarterRange = {
from: newDate.clone().startOf("quarter"),
to: newDate.clone().endOf("quarter").startOf("day")
};
var isSameQuarter = (selected === null || selected === void 0 ? void 0 : selected.from.isSame(quarterRange.from, "quarter")) && (selected === null || selected === void 0 || (_selected$to2 = selected.to) === null || _selected$to2 === void 0 ? void 0 : _selected$to2.isSame(quarterRange.to, "quarter"));
if (isSameQuarter) {
if (!required) {
handleSelection(undefined);
if (instant && onSave) {
setCurrentDate(moment__default["default"].utc());
setTargetDate(moment__default["default"].utc());
}
}
} else {
handleSelection(quarterRange);
}
}
if (mode !== "monthly" && mode !== "quarterly") {
setIsMonthSelectOpen(false);
}
if (instant && (mode === "monthly" || mode === "quarterly") && forceClose) toggleCalendar();
};
React.useEffect(function () {
if (isYearSelectOpen && selectedYearRef.current) {
var _selectedYearRef$curr;
selectedYearRef === null || selectedYearRef === void 0 || (_selectedYearRef$curr = selectedYearRef.current) === null || _selectedYearRef$curr === void 0 || _selectedYearRef$curr.scrollIntoView({
behavior: "smooth",
block: "center"
});
}
}, [isYearSelectOpen]);
var renderDaysOfWeek = function renderDaysOfWeek() {
var daysOfWeek = moment__default["default"].weekdaysShort();
var orderedDays = [...daysOfWeek.slice(firstDayOfWeek), ...daysOfWeek.slice(0, firstDayOfWeek)];
return orderedDays.map(function (day) {
return /*#__PURE__*/React__default["default"].createElement(StyledDayName, {
key: day
}, day[0]);
});
};
var animationClass = React.useMemo(function () {
return monthTransitionDirection && !disableAnimations ? monthTransitionDirection === "next" ? "slide-down" : "slide-up" : "";
}, [disableAnimations, monthTransitionDirection]);
var handleDayClick = function handleDayClick(day, modifiers) {
if (modifiers.some(function (mod) {
return mod === "day_disabled";
})) {
return;
}
if (onDayClick) onDayClick(day, modifiers);
handleDateSelect(day);
};
var getHoverRange = function getHoverRange() {
if (!hoveredDate) return null;
if (mode === "quarterly") {
var startMonth = hoveredDate.clone().startOf("quarter");
var endMonth = hoveredDate.clone().endOf("quarter");
return {
from: startMonth,
to: endMonth
};
}
if (mode === "weekly") {
var currentDayOfWeek = hoveredDate.day();
var daysToSubtract = (currentDayOfWeek - firstDayOfWeek + 7) % 7;
var startOfWeek = hoveredDate.clone().subtract(daysToSubtract, "days").startOf("day");
var endOfWeek = startOfWeek.clone().add(6, "days");
return {
from: startOfWeek,
to: endOfWeek
};
}
if (mode === "custom" && selected !== null && selected !== void 0 && selected.from && !(selected !== null && selected !== void 0 && selected.to)) {
var from = selected.from.isBefore(hoveredDate) ? selected.from : hoveredDate;
var to = selected.from.isAfter(hoveredDate) ? selected.from : hoveredDate;
return {
from,
to
};
}
return null;
};
var renderCalendarDates = function renderCalendarDates() {
var startOfMonth = currentDate.clone().startOf("month");
var startDate = startOfMonth.clone().isoWeekday(firstDayOfWeek);
var endDate = startDate.clone().add(6, "weeks");
var date = startDate.clone();
var dates = [];
var hoverRange = getHoverRange();
var _loop = function _loop() {
var clonedDate = date.clone();
var isToday = clonedDate.isSame(today, "day");
var isSelected = selected && (clonedDate.isBetween(selected.from, selected.to, "day", "[]") || clonedDate.isSame(selected.from, "day") || clonedDate.isSame(selected.to, "day"));
var isHovered = hoverRange && (mode === "weekly" || mode === "custom") && clonedDate.isBetween(hoverRange.from, hoverRange.to, "day", "[]");
var isDisabled = disabledDaysBefore && clonedDate.isBefore(disabledDaysBefore, "day") || disabledDaysAfter && clonedDate.isAfter(disabledDaysAfter, "day") || disabledDays.includes(clonedDate.day());
var modifierClasses = [];
var modifierTitles = [];
var titles;
if (modifiers) Object.keys(modifiers || {}).forEach(function (modifier) {
var _modifiers$modifier = modifiers[modifier](clonedDate),
matched = _modifiers$modifier.matched,
title = _modifiers$modifier.title;
if (matched) {
modifierClasses.push(modifier);
if (title) modifierTitles.push(title);
}
});
if (modifierTitles.length) {
titles = /*#__PURE__*/React__default["default"].createElement("div", {
key: "title-wrapper-".concat(clonedDate.toString())
}, modifierTitles.map(function (title, index) {
return /*#__PURE__*/React__default["default"].createElement("div", {
key: "title-text-".concat(index)
}, title);
}));
}
var isOutside = !clonedDate.isSame(currentDate, "month");
dates.push( /*#__PURE__*/React__default["default"].createElement(Tooltip, {
title: titles,
disable: !modifierTitles.length,
key: clonedDate.toString(),
popperTooltipClassName: popperTooltipClassName,
popperTooltipStyle: popperTooltipStyle
}, /*#__PURE__*/React__default["default"].createElement(StyledCalendarDate, {
className: "".concat(isSelected ? "selected" : "", " ").concat(isToday ? "today-day" : "", "\n ").concat(isDisabled ? "disabled" : "", " ").concat(isHovered ? "hovered" : "", " ").concat(modifierClasses.join(" "), "\n ").concat(isOutside ? "outside" : ""),
onClick: function onClick() {
return handleDayClick(clonedDate, modifierClasses);
},
onMouseEnter: mode === "weekly" || mode === "custom" ? function () {
return setHoveredDate(clonedDate);
} : undefined,
onMouseLeave: mode === "weekly" || mode === "custom" ? function () {
return setHoveredDate(null);
} : undefined
}, clonedDate.date())));
date.add(1, "day");
};
while (date.isBefore(endDate)) {
_loop();
}
return dates;
};
var renderYearSelect = function renderYearSelect() {
var years = Array.from({
length: 200
}, function (_, i) {
return 1900 + i;
});
return /*#__PURE__*/React__default["default"].createElement(StyledYearSelect, null, years.map(function (year) {
var isSelected = selected && ((selected === null || selected === void 0 ? void 0 : selected.to) && year >= selected.from.year() && year <= selected.to.year() || year === selected.from.year() || (selected === null || selected === void 0 ? void 0 : selected.to) && year === selected.to.year());
var isDisabledYear = disabledDaysBefore && year < disabledDaysBefore.year() || disabledDaysAfter && year > disabledDaysAfter.year();
return /*#__PURE__*/React__default["default"].createElement(StyledYearOption, {
key: year,
ref: year === currentDate.year() ? selectedYearRef : null,
className: "".concat(isSelected ? "selected" : "", " ").concat(year === today.year() ? "today-year" : "", " ").concat(isDisabledYear ? "disabled" : ""),
onClick: function onClick() {
return handleYearSelect(year);
}
}, year);
}));
};
var renderMonthSelect = function renderMonthSelect() {
var months = moment__default["default"].months();
var hoverRange = getHoverRange();
return /*#__PURE__*/React__default["default"].createElement(StyledMonthSelect, null, months.map(function (month, index) {
var monthDate = currentDate.clone().month(index);
var isSelected = selected && (monthDate.isBetween(selected.from, selected.to, "month", "[]") || monthDate.isSame(selected.from, "month") || monthDate.isSame(selected.to, "month"));
var isDisabledMonth = disabledDaysBefore && monthDate.isBefore(disabledDaysBefore, "month") || disabledDaysAfter && monthDate.isAfter(disabledDaysAfter, "month");
var isHoveredQuarter = hoverRange && mode === "quarterly" && monthDate.isBetween(hoverRange.from, hoverRange.to, "month", "[]");
return /*#__PURE__*/React__default["default"].createElement(StyledMonthOption, {
key: month,
className: "".concat(isSelected ? "selected" : "", " ").concat(index === today.month() && currentDate.year() === today.year() ? "today-month" : "", " ").concat(isDisabledMonth ? "disabled" : "", " ").concat(isHoveredQuarter ? "hovered" : ""),
onClick: function onClick() {
return handleMonthSelect(index);
},
onMouseEnter: mode === "quarterly" ? function () {
return setHoveredDate(monthDate);
} : undefined,
onMouseLeave: mode === "quarterly" ? function () {
return setHoveredDate(null);
} : undefined
}, month.substring(0, 3));
}));
};
var captionText = React.useMemo(function () {
var isCurrentYear = currentDate.isSame(today, "year");
return !isMonthSelectOpen && !isYearSelectOpen ? "".concat(currentDate.format("MMMM")).concat(isCurrentYear ? "" : " ".concat(currentDate.format("YYYY"))) : currentDate.format("YYYY");
}, [currentDate, isMonthSelectOpen, isYearSelectOpen, today]);
var handleClear = React.useCallback(function () {
if (typeof onClear === "function") onClear();
handleSelection(undefined);
}, [handleSelection, onClear]);
var handleClose = React.useCallback(function () {
var _selected$to3;
if (mode === "custom" && instant && selected) {
setSelected({
from: moment__default["default"].utc(selected === null || selected === void 0 ? void 0 : selected.from),
to: selected !== null && selected !== void 0 && selected.to ? moment__default["default"].utc(selected === null || selected === void 0 ? void 0 : selected.to) : moment__default["default"].utc(selected === null || selected === void 0 ? void 0 : selected.from)
});
}
if (instant && onSave && mode === "custom" && selected && (!(selected !== null && selected !== void 0 && selected.from.isSame(moment__default["default"].utc(Number(defaultSelected === null || defaultSelected === void 0 ? void 0 : defaultSelected.from) * 1000))) || !(selected !== null && selected !== void 0 && (_selected$to3 = selected.to) !== null && _selected$to3 !== void 0 && _selected$to3.isSame(moment__default["default"].utc(Number(defaultSelected === null || defaultSelected === void 0 ? void 0 : defaultSelected.to) * 1000))))) {
onSave({
from: moment__default["default"].utc(selected === null || selected === void 0 ? void 0 : selected.from).unix(),
to: selected !== null && selected !== void 0 && selected.to ? moment__default["default"].utc(selected === null || selected === void 0 ? void 0 : selected.to).unix() : moment__default["default"].utc(selected === null || selected === void 0 ? void 0 : selected.from).unix()
});
}
if (mode === "custom" && instant && !selected && onSave) {
onSave(undefined);
}
setCurrentDate(defaultSelected !== null && defaultSelected !== void 0 && defaultSelected.from ? toMoment(defaultSelected.from) : month ? toMoment(month) : moment__default["default"].utc());
setTargetDate(defaultSelected !== null && defaultSelected !== void 0 && defaultSelected.from ? toMoment(defaultSelected.from) : month ? toMoment(month) : moment__default["default"].utc());
setSelected(defaultSelected !== null && defaultSelected !== void 0 && defaultSelected.from ? {
from: toMoment(defaultSelected.from),
to: defaultSelected.to ? toMoment(defaultSelected.to) : null
} : null);
toggleCalendar();
setIsYearSelectOpen(false);
setIsMonthSelectOpen(mode === "monthly" || mode === "quarterly");
setMonthTransitionDirection(null);
if (typeof onClose === "function") onClose();
}, [defaultSelected, instant, mode, month, onClose, onSave, selected, toggleCalendar]);
var handleBeforeClose = React.useCallback(function () {
var shouldClose = true;
if (!target || !enableConfirmModal || instant || required) {
shouldClose = true;
}
if (target && enableConfirmModal && !instant && !required && (selected && !defaultSelected || !selected && defaultSelected || selected !== null && selected !== void 0 && selected.from && defaultSelected !== null && defaultSelected !== void 0 && defaultSelected.from && !selected.from.isSame(toMoment(defaultSelected.from)) || selected !== null && selected !== void 0 && selected.to && defaultSelected !== null && defaultSelected !== void 0 && defaultSelected.to && !selected.to.isSame(toMoment(defaultSelected.to)))) {
shouldClose = false;
setShowDiscardModal(true);
}
if (shouldClose) handleClose();
return shouldClose;
}, [defaultSelected, enableConfirmModal, handleClose, instant, required, selected, target]);
var Wrapper = target ? Menu : "div";
var handleCaptionClick = React.useCallback(function () {
isMonthSelectOpen && !disableYearPicker ? toggleYearSelect() : toggleMonthSelect();
}, [disableYearPicker, isMonthSelectOpen, toggleMonthSelect, toggleYearSelect]);
var handleCloseDiscardModal = React.useCallback(function () {
setShowDiscardModal(false);
}, []);
var handleSaveDiscardModal = React.useCallback(function () {
setSelected(defaultSelected !== null && defaultSelected !== void 0 && defaultSelected.from ? {
from: toMoment(defaultSelected.from),
to: defaultSelected.to ? toMoment(defaultSelected.to) : null
} : null);
setShowDiscardModal(false);
handleClose();
}, [defaultSelected, handleClose]);
var wrapperProps = target ? {
className: "c-date-picker--calendar",
target,
onBeforeClose: handleBeforeClose,
onClose: handleClose,
open: isOpen,
active: isOpen,
onOpen: toggleCalendar,
position,
menuClassName,
popperClassName,
backgroundElementClass
} : {
className: "c-date-picker--calendar"
};
React.useEffect(function () {
var handleKeyDown = function handleKeyDown(event) {
if (event.key === "ArrowRight") {
handleMonthChange("next");
} else if (event.key === "ArrowLeft") {
handleMonthChange("prev");
} else if (event.key === "ArrowUp") {
handleYearChange("next");
} else if (event.key === "ArrowDown") {
handleYearChange("prev");
}
};
if (isOpen) {
window.addEventListener("keydown", handleKeyDown);
} else {
window.removeEventListener("keydown", handleKeyDown);
}
return function () {
window.removeEventListener("keydown", handleKeyDown);
};
}, [isOpen, handleMonthChange, handleYearChange]);
var saveIsDisabled = function saveIsDisabled() {
if (!target) return false;
if (!defaultSelected && !selected) {
return true;
}
if (defaultSelected && selected && defaultSelected.from && selected.from.isSame(toMoment(defaultSelected.from)) && defaultSelected.to && selected.to && selected.to.isSame(toMoment(defaultSelected.to))) {
return true;
}
return false;
};
return /*#__PURE__*/React__default["default"].createElement(StyledDatePickerWrapper, {
ref: datePickerRef
}, /*#__PURE__*/React__default["default"].createElement(Wrapper, wrapperProps, /*#__PURE__*/React__default["default"].createElement(StyledDatePickerContainerInner, null, /*#__PURE__*/React__default["default"].createElement(StyledCalendarHeader, null, isYearSelectOpen ? null : /*#__PURE__*/React__default["default"].createElement(IconButton, {
onClick: function onClick() {
return handleMonthChange("prev");
},
variant: "text gray",
size: "small"
}, /*#__PURE__*/React__default["default"].createElement(ArrowLeftIcon$1, null)), /*#__PURE__*/React__default["default"].createElement(StyledCaption, {
className: "".concat(animationClass, " ").concat(isYearSelectOpen ? "year-caption" : ""),
key: isMonthSelectOpen ? currentDate.year() : currentDate.month(),
onClick: handleCaptionClick,
onAnimationEnd: onAnimationEnd
}, captionText), isYearSelectOpen ? null : /*#__PURE__*/React__default["default"].createElement(IconButton, {
onClick: function onClick() {
return handleMonthChange("next");
},
variant: "text gray",
size: "small"
}, /*#__PURE__*/React__default["default"].createElement(ArrowRightIcon$1, null))), /*#__PURE__*/React__default["default"].createElement(StyledCalendarSelector, null, isYearSelectOpen ? renderYearSelect() : isMonthSelectOpen ? /*#__PURE__*/React__default["default"].createElement(StyledMonthSelector, {
className: animationClass,
key: currentDate.year(),
onAnimationEnd: onAnimationEnd
}, renderMonthSelect()) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(StyledDaysOfWeek, null, renderDaysOfWeek()), /*#__PURE__*/React__default["default"].createElement(StyledCalendarDates, {
className: animationClass,
key: currentDate.month()
}, renderCalendarDates()))), (target || showControls) && (!instant ? /*#__PURE__*/React__default["default"].createElement(StyledControls, null, /*#__PURE__*/React__default["default"].createElement(StyledControlsLeft, null, /*#__PURE__*/React__default["default"].createElement(Button, {
size: "small",
variant: "primary",
onClick: handleSave,
disabled: saveIsDisabled()
}, saveLabel), /*#__PURE__*/React__default["default"].createElement(Tooltip, {
title: cancelLabel,
popperTooltipStyle: {
zIndex: 1301
}
}, /*#__PURE__*/React__default["default"].createElement(IconButton, {
size: "small",
variant: "text gray",
onClick: handleBeforeClose
}, /*#__PURE__*/React__default["default"].createElement(CancelCrossIcon$1, null)))), !required ? /*#__PURE__*/React__default["default"].createElement(Button, {
size: "small",
onClick: handleClear,
variant: "text gray"
}, clearLabel) : null) : !required ? /*#__PURE__*/React__default["default"].createElement(StyledControls, null, /*#__PURE__*/React__default["default"].createElement(StyledClearInstantButton, {
size: "small",
onClick: handleClear,
variant: "text gray"
}, clearLabel)) : null))), !instant && target && !required && enableConfirmModal ? /*#__PURE__*/React__default["default"].createElement(StyledConfirmDialog$1, {
className: "modal-select-date",
open: showDiscardModal,
onCancel: handleCloseDiscardModal,
onConfirm: handleSaveDiscardModal,
dialogTitle: modalHeaderText,
dialogContent: modalDiscardMessage,
cancelBtnText: modalCancelBtnText,
confirmBtnText: modalDiscardBtnText
}) : null);
};
/**
* This component allow you to select date range. It accepts two parameters "from" and "to" as valid format
* onChange and onBack and onForward it will return "from: Date" and "to: Date" as function arguments
*/
var DateStepper = function DateStepper(_ref) {
var step = _ref.step,
formatCallback = _ref.formatCallback,
onChange = _ref.onChange,
from = _ref.from,
to = _ref.to,
onBack = _ref.onBack,
onForward = _ref.onForward,
minValue = _ref.minValue,
maxValue = _ref.maxValue,
className = _ref.className,
_ref$period = _ref.period,
period = _ref$period === void 0 ? "week" : _ref$period,
_ref$withDatePicker = _ref.withDatePicker,
withDatePicker = _ref$withDatePicker === void 0 ? true : _ref$withDatePicker,
_ref$defaultMonth = _ref.defaultMonth,
defaultMonth = _ref$defaultMonth === void 0 ? moment__default["default"]() : _ref$defaultMonth,
enableYearPicker = _ref.enableYearPicker,
_ref$position = _ref.position,
position = _ref$position === void 0 ? "bottom" : _ref$position,
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],
setFromDate = _useState2[1];
var _useState3 = React.useState(moment__default["default"].utc(to)),
_useState4 = _slicedToArray(_useState3, 2),
toDate = _useState4[0],
setToDate = _useState4[1];
var getDatesByPeriod = React.useCallback(function (interval) {
var date = fromDate ? fromDate : moment__default["default"]();
if (step === "daily") {
date.add(interval, "days");
return [date, date.clone()];
} else if (step === "weekly") {
date.add(interval, "weeks");
return [date.clone().startOf(period), date.clone().endOf(period)];
} else if (step === "monthly") {
date.add(interval, "months");
return [date.clone().startOf("month"), date.clone().endOf("month")];
} else if (step === "quarterly") {
date.add(interval, "quarters");
return [date.clone().startOf("quarter"), date.clone().endOf("quarter")];
} else if (step === "yearly") {
date.add(interval, "years");
return [date.clone().startOf("year"), date.clone().endOf("year")];
}
return [date, date];
}, [fromDate, period, step]);
var getDateFormatted = React.useMemo(function () {
if (formatCallback) {
return formatCallback(fromDate, toDate);
}
var actualYear = moment__default["default"]().year();
var showWeekOrCustomDateFormat = function showWeekOrCustomDateFormat(start, end) {
if (start.year() === actualYear && end.year() === actualYear) {
return start.utc().format("MMM DD") + " - " + end.utc().format("MMM DD");
} else {
return start.utc().format("MMM DD YYYY") + " - " + end.utc().format("MMM DD YYYY");
}
};
if (step === "daily") {
if (fromDate.year() === actualYear) {
return fromDate.utc().format("MMM DD");
}
return fromDate.utc().format("MMM DD YYYY");
} else if (step === "weekly") {
var startDate = fromDate.clone().utc().startOf(period);
var endDate = startDate.clone().utc().endOf(period);
return showWeekOrCustomDateFormat(startDate, endDate);
} else if (step === "monthly") {
return fromDate.utc().format("MMM YYYY");
} else if (step === "quarterly") {
return "Q".concat(fromDate.utc().quarter(), "/").concat(fromDate.utc().format("YYYY"));
} else if (step === "yearly") {
return fromDate.utc().format("YYYY");
} else if (step === "range") {
return showWeekOrCustomDateFormat(fromDate, toDate);
}
return "";
}, [fromDate, toDate, step, formatCallback, period]);
var datePickerMode = React.useMemo(function () {
if (step === "range") return "custom";
if (step === "yearly") return "custom";
return step;
}, [step]);
var onDatePickerChange = React.useCallback(function (dates) {
var fromDateTemp = moment__default["default"].utc(Number(dates === null || dates === void 0 ? void 0 : dates.from) * 1000);
var toDateTemp = moment__default["default"].utc(Number(dates === null || dates === void 0 ? void 0 : dates.to) * 1000);
setFromDate(fromDateTemp);
setToDate(toDateTemp);
if (onChange && moment__default["default"].isMoment(fromDateTemp) && moment__default["default"].isMoment(toDateTemp)) {
onChange(fromDateTemp.toDate(), toDateTemp.toDate());
}
}, [onChange, setFromDate, setToDate]);
var isAfterMaxDate = React.useMemo(function () {
return moment__default["default"].isMoment(maxValue) && moment__default["default"](moment__default["default"].utc(maxValue).format("YYYY-MM-DD")).isSameOrBefore(toDate.utc().format("YYYY-MM-DD"));
}, [maxValue, toDate]);
var isBeforeMinDate = React.useMemo(function () {
return moment__default["default"].isMoment(minValue) && moment__default["default"].utc(moment__default["default"].utc(minValue).format("YYYY-MM-DD")).isSameOrAfter(toDate.utc().format("YYYY-MM-DD"));
}, [minValue, toDate]);
React.useEffect(function () {
if (isBeforeMinDate) {
if (step === "daily") {
setFromDate(moment__default["default"].utc(minValue));
setToDate(moment__default["default"].utc(minValue));
}
}
if (isAfterMaxDate) {
if (step === "daily") {
setFromDate(moment__default["default"].utc(maxValue));
setToDate(moment__default["default"].utc(maxValue));
}
}
}, [step, minValue, maxValue, isBeforeMinDate, isAfterMaxDate]);
var onRightClickHandler = React.useCallback(function () {
if (isAfterMaxDate) {
return;
}
var _getDatesByPeriod = getDatesByPeriod(1),
_getDatesByPeriod2 = _slicedToArray(_getDatesByPeriod, 2),
newFrom = _getDatesByPeriod2[0],
newTo = _getDatesByPeriod2[1];
setFromDate(moment__default["default"].utc(newFrom));
setToDate(moment__default["default"].utc(newTo));
if (onChange) {
onChange(moment__default["default"].utc(newFrom), moment__default["default"].utc(newTo));
}
if (onForward) {
onForward(moment__default["default"].utc(newFrom).toDate(), moment__default["default"].utc(newTo).toDate());
}
}, [isAfterMaxDate, getDatesByPeriod, onChange, onForward]);
var onLeftClickHandler = React.useCallback(function () {
if (isBeforeMinDate) {
return;
}
var _getDatesByPeriod3 = getDatesByPeriod(-1),
_getDatesByPeriod4 = _slicedToArray(_getDatesByPeriod3, 2),
newFrom = _getDatesByPeriod4[0],
newTo = _getDatesByPeriod4[1];
setFromDate(moment__default["default"].utc(newFrom));
setToDate(moment__default["default"].utc(newTo));
if (onChange) {
onChange(moment__default["default"].utc(newFrom), moment__default["default"].utc(newTo));
}
if (onBack) {
onBack(moment__default["default"].utc(newFrom).toDate(), moment__default["default"].utc(newTo).toDate());
}
}, [isBeforeMinDate, getDatesByPeriod, onChange, onBack]);
var renderLeftRightButtons = React.useMemo(function () {
return step !== "range";
}, [step]);
React.useEffect(function () {
setFromDate(moment__default["default"].utc(from));
setToDate(moment__default["default"].utc(to));
}, [from, to]);
var dateStepperWidth = function dateStepperWidth(fromDay, toDay, range) {
if (fromDay.utc().year() !== moment__default["default"].utc().year() || toDay.utc().year() !== moment__default["default"].utc().year()) {
switch (range) {
case "daily":
case "monthly":
return {
minWidth: "122px"
};
case "weekly":
case "custom":
return {
minWidth: "232px"
};
}
}
switch (range) {
case "monthly":
return {
minWidth: "122px"
};
case "weekly":
case "custom":
return {
minWidth: "182px"
};
}
return {
minWidth: "102px"
};
};
var isDisabled = React.useCallback(function (day) {
var dayFormat = moment__default["default"].utc(day).format("YYYY-MM-DD");
var isBefore = moment__default["default"].isMoment(maxValue) && moment__default["default"](moment__default["default"].utc(maxValue).format("YYYY-MM-DD")).isBefore(dayFormat);
var isAfter = moment__default["default"].isMoment(minValue) && moment__default["default"](moment__default["default"].utc(minValue).format("YYYY-MM-DD")).isAfter(dayFormat);
return isBefore || isAfter;
}, [maxValue, minValue]);
var modifiers = React.useMemo(function () {
return {
disabled: function disabled(day) {
return {
matched: isDisabled(day),
title: null
};
},
nonWorkingDay: function nonWorkingDay(day) {
return {
matched: isDisabled(day),
title: null
};
}
};
}, [isDisabled]);
return /*#__PURE__*/React__default["default"].createElement(StyledButtonGroup, {
className: classNames__default["default"]("c-date-stepper", className)
}, renderLeftRightButtons ? /*#__PURE__*/React__default["default"].createElement(StyledControl, {
type: "button",
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,
target: /*#__PURE__*/React__default["default"].createElement(StyledButton$1, {
type: "button"
}, getDateFormatted),
mode: datePickerMode,
selected: {
from: moment__default["default"].utc(fromDate).unix(),
to: moment__default["default"].utc(toDate).unix()
},
onChange: onDatePickerChange,
firstDayOfWeek: period === "week" ? 0 : 1,
modifiers: modifiers,
disabledDaysAfter: maxValue,
disabledDaysBefore: minValue,
disableYearPicker: !enableYearPicker,
popperClassName: popperClassName,
position: position,
key: datePickerMode,
instant: true,
required: true
}) : /*#__PURE__*/React__default["default"].createElement(StyledSpan$1, null, getDateFormatted)), renderLeftRightButtons ? /*#__PURE__*/React__default["default"].createElement(StyledControl, {
type: "button",
variant: mode === "flat" ? "text gray" : "secondary",
onClick: onRightClickHandler,
disabled: isAfterMaxDate
}, /*#__PURE__*/React__default["default"].createElement(ArrowRightIcon$1, null)) : null);
};
DateStepper.displayName = "DateStepper";
var StyledSteps = styled__default["default"].div.withConfig({
displayName: "Styles__StyledSteps",
componentId: "sc-fkt5j2-0"
})(["", " ", " display:flex;justify-content:center;"], FontStyle, BoxSizingStyle);
var StyledStep = styled__default["default"].div.withConfig({
displayName: "Styles__StyledStep",
componentId: "sc-fkt5j2-1"
})(["display:inline-block;width:8px;height:8px;background-color:var(--color-theme-400);border-radius:50%;margin:0 5px;", ""], function (props) {
return props.$isActiveStep && styled.css(["background-color:var(--color-primary);"]);
});
StyledSteps.displayName = "StyledSteps";
StyledStep.displayName = "StyledStep";
var Steps = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var numberOfSteps = _ref.numberOfSteps,
activeStep = _ref.activeStep,
_ref$progressive = _ref.progressive,
progressive = _ref$progressive === void 0 ? false : _ref$progressive,
wrapperClassName = _ref.wrapperClassName;
var steps = React.useMemo(function () {
// fastest way to generate an array of N numbers
var a = [];
var b = numberOfSteps;
while (b--) {
a[b] = b + 1;
}
return a;
}, [numberOfSteps]);
var activeSteps = React.useMemo(function () {
if (!progressive) {
return [activeStep];
}
return steps.filter(function (step) {
return step <= activeStep;
});
}, [activeStep, progressive, steps]);
return /*#__PURE__*/React__default["default"].createElement(StyledSteps, {
className: classNames__default["default"]("c-steps-wrapper", wrapperClassName),
ref: ref
}, steps.map(function (step) {
return /*#__PURE__*/React__default["default"].createElement(StyledStep, {
key: "step-".concat(step),
$isActiveStep: activeSteps.indexOf(step) > -1
});
}));
});
Steps.displayName = "Steps";
var StyledTableHead = styled__default["default"].thead.withConfig({
displayName: "Styles__StyledTableHead",
componentId: "sc-e16t6w-0"
})(["", " ", " ", " ", " ", " ", ""], FontStyle, BoxSizingStyle, {
"textAlign": "left",
"textTransform": "uppercase"
}, {
"fontSize": "0.6875rem",
"fontWeight": "600",
"color": "var(--color-theme-700)"
}, function (props) {
return props.$headerVariant && props.$headerVariant === "primary" && styled.css(["th{", "}tr{td:first-child,th:first-child{", "}}"], {
"whiteSpace": "nowrap",
"paddingBottom": "2rem",
"paddingLeft": "1rem",
"paddingRight": "1rem",
"paddingTop": "0.5rem"
}, {
"paddingLeft": "1.5rem"
});
}, function (props) {
return props.$headerVariant && props.$headerVariant === "secondary" && styled.css(["th{", "}tr{th{padding-bottom:8px;padding-left:16px;}}tr{th:last-child{padding-right:16px;}}"], {
"whiteSpace": "nowrap"
});
});
StyledTableHead.displayName = "StyledTableHead";
var StyledTableBody = styled__default["default"].tbody.withConfig({
displayName: "Styles__StyledTableBody",
componentId: "sc-e16t6w-1"
})(["", " ", " ", " td{", "}&:not(.c-table__grouped__head){td{", "}}a{", " &:hover{", "}}"], FontStyle, BoxSizingStyle, {
"overflow": "hidden",
"textOverflow": "ellipsis",
"whiteSpace": "nowrap"
}, {
"overflow": "hidden",
"textOverflow": "ellipsis",
"whiteSpace": "nowrap"
}, {
"color": "var(--color-theme-700)"
}, {
"color": "var(--color-primary)",
"textDecorationLine": "none"
}, {
"textDecorationLine": "underline"
});
StyledTableBody.displayName = "StyledTableBody";
var StyledTableWrapper = styled__default["default"].div.withConfig({
displayName: "Styles__StyledTableWrapper",
componentId: "sc-e16t6w-2"
})(["", " ", " ", " &:before{", " content:\"\";top:39px;z-index:-1;}"], FontStyle, BoxSizingStyle, {
"marginLeft": "1rem",
"marginRight": "1rem",
"marginTop": "2rem",
"overflowX": "auto",
"overflowY": "hidden"
}, {
"position": "absolute",
"bottom": "0px",
"left": "0px",
"right": "0px",
"borderRadius": "0.5rem",
"backgroundColor": "var(--page-paper-main)",
"--tw-shadow": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
"--tw-shadow-colored": "0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color)",
"boxShadow": "var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)"
});
StyledTableWrapper.displayName = "StyledTableWrapper";
var StyledTable = styled__default["default"].table.withConfig({
displayName: "Styles__StyledTable",
componentId: "sc-e16t6w-3"
})(["", " border-spacing:0;", " tr th,", " tr td{&:last-child{", "}}td{", "}", ""], {
"width": "100%",
"padding": "0px",
"paddingBottom": "1rem",
"fontSize": "0.75rem",
"lineHeight": "1rem"
}, StyledTableHead, StyledTableBody, {
"textAlign": "right"
}, {
"paddingLeft": "1rem",
"paddingRight": "1rem",
"paddingTop": "0.75rem",
"paddingBottom": "0.75rem"
}, function (props) {
return props.$striped && styled.css(["", ":not(.c-table__grouped__head){tr:nth-child(odd){", "}}"], StyledTableBody, {
"backgroundColor": "var(--color-theme-200)"
});
});
StyledTable.displayName = "StyledTable";
var StyledDataTable = styled__default["default"].div.withConfig({
displayName: "Styles__StyledDataTable",
componentId: "sc-e16t6w-4"
})(["", " ", " &.c-table__collapsible{.c-table__head{tr{th{position:sticky;top:0;z-index:1;}}}}&.c-table__grouped{.c-table__head th{", " &:last-child{", "}}}&.c-data-table{position:relative;.c-table__head th{&:last-child{", "}}}.c-table__cell{", " &:hover{.c-table__icon{", "}}}.c-table__overlay{", " top:0px;border-top-left-radius:8px;border-top-right-radius:8px;background:rgba(0,0,0,0.02);.neon &{background:rgba(0,0,0,0.1);}z-index:5;}.c-table__icon-wrapper{", "}.c-table__label{", "}.c-table__icon{transform:translateY(1px);", " fill:var(--color-theme-900);&:hover{", "}}.c-table__icon--inactive{", "}.c-table__icon--active{", "}.c-table__icon--desc{transform:rotate(-180deg) scale(-1,1);}.c-table__grouped__head{", " > :first-child{", "}a:first-child{", "}}.c-table__head--hidden{", "}.c-table__collapse_icon--expanded{transition-duration:0.3s;", "}.c-table__collapse_icon--collapsed{transform:rotate(180deg);transition-duration:0.3s;", "}.c-table__head__icon-wrapper__icon{", " transform:translate(-24px,-5px);}&.c-table__collapsible{.c-table__group{.c-table__row:last-child .c-table__cell{border-bottom:1px solid var(--border-primary);}&:last-child{.c-table__row:last-child .c-table__cell{border-bottom:0;}}}.c-table__grouped__head{tr td{border-bottom:1px solid var(--border-primary);}.c-table__body__collapse td{border-bottom:0;}&.last{tr td{border-bottom:0 !important;}}}.c-table__grouped__head--expanded{tr:last-child td{border-bottom:0;}}}.c-table__collapse_body{tr{background-color:transparent !important;}td:last-child{", "}", "}.c-table__row{td:first-child{position:sticky;left:0;z-index:1;}&:nth-child(odd){td{", "}}&:nth-child(even){td{", "}}}.c-table__row{th:first-child{position:sticky;left:0;z-index:2 !important;}}&.c-table__collapsible .c-table__body{tr{td:first-child,th:first-child{", "}}}.c-table__body__icon{", " padding-left:0 !important;transform:translateY(8px);}&.padding-b-0{", "}.cursor-pointer{", "}.text-center{", "}.opacity-75{", "}.hidden{", "}"], FontStyle, BoxSizingStyle, {
"paddingBottom": "1rem"
}, {
"paddingRight": "0px"
}, {
"paddingRight": "0px"
}, {
"position": "relative"
}, {
"opacity": "0.5"
}, {
"pointerEvents": "none",
"position": "absolute",
"left": "0px",
"width": "100%"
}, {
"display": "inline-block",
"userSelect": "none"
}, {
"borderWidth": "0px",
"borderStyle": "solid",
"borderColor": "transparent"
}, {
"marginLeft": "0.25rem"
}, {
"opacity": "1"
}, {
"opacity": "0"
}, {
"opacity": "1"
}, {
"fontWeight": "700"
}, {
"color": "var(--color-theme-900)"
}, {
"color": "var(--color-primary)"
}, {
"pointerEvents": "none",
"opacity": "0"
}, {
"cursor": "pointer"
}, {
"cursor": "pointer"
}, {
"position": "absolute",
"cursor": "pointer"
}, {
"borderWidth": "0px"
}, {
"position": "absolute"
}, {
"backgroundColor": "var(--color-theme-200)"
}, {
"backgroundColor": "var(--page-paper-main)"
}, {
"paddingLeft": "1.5rem"
}, {
"padding": "0px"
}, {
"paddingBottom": "0px"
}, {
"cursor": "pointer"
}, {
"textAlign": "center"
}, {
"opacity": "0.75"
}, {
"display": "none"
});
StyledDataTable.displayName = "StyledDataTable";
var Table = function Table(_ref) {
var children = _ref.children,
className = _ref.className,
wrapperClassName = _ref.wrapperClassName,
_ref$striped = _ref.striped,
striped = _ref$striped === void 0 ? false : _ref$striped,
innerRef = _ref.innerRef;
return /*#__PURE__*/React__default["default"].createElement(StyledTableWrapper, {
className: classNames__default["default"]("c-table__wrap", wrapperClassName)
}, /*#__PURE__*/React__default["default"].createElement(StyledTable, {
ref: innerRef,
className: classNames__default["default"]("c-table", className),
$striped: striped
}, children));
};
Table.displayName = "Table";
var Thead = function Thead(_ref2) {
var children = _ref2.children,
className = _ref2.className,
_ref2$headerVariant = _ref2.headerVariant,
headerVariant = _ref2$headerVariant === void 0 ? "primary" : _ref2$headerVariant;
return /*#__PURE__*/React__default["default"].createElement(StyledTableHead, {
$headerVariant: headerVariant,
className: classNames__default["default"]("c-table__head", className)
}, children);
};
Thead.displayName = "Thead";
var Tbody = function Tbody(_ref3) {
var children = _ref3.children,
className = _ref3.className;
return /*#__PURE__*/React__default["default"].createElement(StyledTableBody, {
className: classNames__default["default"]("c-table__body", className)
}, children);
};
Tbody.displayName = "Tbody";
var linearAnimation = styled.keyframes(["0%{background-position:left;}100%{background-position:right;}"]);
var StyledSkeletonLoader = styled__default["default"].div.withConfig({
displayName: "Styles__StyledSkeletonLoader",
componentId: "sc-1n0a2yl-0"
})(["width:70%;background:linear-gradient( 90deg,rgba(255,255,255,0) 20%,rgba(0,0,0,0.05) 50%,rgba(255,255,255,0) 60% );background-size:400%;height:16px;border-radius:8px;.neon &{background:linear-gradient( 90deg,rgba(255,255,255,0) 20%,rgba(0,0,0,0.2) 50%,rgba(255,255,255,0) 60% );background-size:500%;}animation-duration:1s;animation-iteration-count:infinite;animation-name:", ";animation-timing-function:linear;animation-direction:reverse;"], linearAnimation);
var _excluded$19 = ["className"];
var SkeletonLoader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var className = _ref.className,
rest = _objectWithoutProperties(_ref, _excluded$19);
return /*#__PURE__*/React__default["default"].createElement(StyledSkeletonLoader, _extends({
ref: ref,
className: classNames__default["default"]("c-loader c-loader--linear", className)
}, rest));
});
SkeletonLoader.displayName = "SkeletonLoader";
var dotAnimation = styled.keyframes(["0%,80%,100%{transform:scale(0);}40%{transform:scale(1);}"]);
var StyledDotsLoader = styled__default["default"].span.withConfig({
displayName: "Styles__StyledDotsLoader",
componentId: "sc-1f35d5h-0"
})(["display:inline-block;text-align:center;& > span{display:inline-block;width:18px;height:18px;background-color:#777;border-radius:100%;animation:", " 1.4s infinite ease-in-out both;}span:nth-child(1){animation-delay:-0.32s;}span:nth-child(2){animation-delay:-0.16s;}"], dotAnimation);
var _excluded$18 = ["className"];
var DotsLoader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var className = _ref.className,
rest = _objectWithoutProperties(_ref, _excluded$18);
return /*#__PURE__*/React__default["default"].createElement(StyledDotsLoader, _extends({
ref: ref,
className: classNames__default["default"]("c-loader c-loader--dots", className)
}, rest), /*#__PURE__*/React__default["default"].createElement("span", null), /*#__PURE__*/React__default["default"].createElement("span", null), /*#__PURE__*/React__default["default"].createElement("span", null));
});
DotsLoader.displayName = "DotsLoader";
var rotateAnimation = styled.keyframes(["from{transform:rotate(0deg);}to{transform:rotate(359deg);}"]);
var StyledSpinnerLoader$1 = styled__default["default"].div.withConfig({
displayName: "Styles__StyledSpinnerLoader",
componentId: "sc-1ht53g9-0"
})(["", " border-radius:100%;flex-shrink:0;", " ", " ", " ", ""], BoxSizingStyle, function (props) {
return styled.css(["width:", "px;height:", "px;animation:", " ", "s infinite linear;"], props.$diameter, props.$diameter, rotateAnimation, props.$rotateDurationInSeconds);
}, function (props) {
return props.$activeColorPercentage === "25%" && styled.css(["border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";border-top:", "px solid ", ";"], props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$activeStrokeColor);
}, function (props) {
return props.$activeColorPercentage === "50%" && styled.css(["border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";border-top:", "px solid ", ";"], props.$stroke, props.$activeStrokeColor, props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$activeStrokeColor);
}, function (props) {
return props.$activeColorPercentage === "75%" && styled.css(["border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";border-top:", "px solid ", ";"], props.$stroke, props.$activeStrokeColor, props.$stroke, props.$activeStrokeColor, props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$activeStrokeColor);
});
var _excluded$17 = ["radius", "stroke", "activeStrokeColor", "inactiveStrokeColor", "activeColorPercentage", "rotateDurationInSeconds", "className"];
var SpinnerLoader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var _ref$radius = _ref.radius,
radius = _ref$radius === void 0 ? 10 : _ref$radius,
_ref$stroke = _ref.stroke,
stroke = _ref$stroke === void 0 ? 2 : _ref$stroke,
_ref$activeStrokeColo = _ref.activeStrokeColor,
activeStrokeColor = _ref$activeStrokeColo === void 0 ? "var(--color-secondary)" : _ref$activeStrokeColo,
_ref$inactiveStrokeCo = _ref.inactiveStrokeColor,
inactiveStrokeColor = _ref$inactiveStrokeCo === void 0 ? "var(--color-theme-transparent-300)" : _ref$inactiveStrokeCo,
_ref$activeColorPerce = _ref.activeColorPercentage,
activeColorPercentage = _ref$activeColorPerce === void 0 ? "25%" : _ref$activeColorPerce,
_ref$rotateDurationIn = _ref.rotateDurationInSeconds,
rotateDurationInSeconds = _ref$rotateDurationIn === void 0 ? 0.75 : _ref$rotateDurationIn,
className = _ref.className,
rest = _objectWithoutProperties(_ref, _excluded$17);
return /*#__PURE__*/React__default["default"].createElement(StyledSpinnerLoader$1, _extends({
ref: ref,
className: className,
$diameter: radius * 2,
$stroke: stroke,
$activeStrokeColor: activeStrokeColor,
$inactiveStrokeColor: inactiveStrokeColor,
$activeColorPercentage: activeColorPercentage,
$rotateDurationInSeconds: rotateDurationInSeconds
}, rest));
});
SpinnerLoader.displayName = "SpinnerLoader";
var moveLineAnimation = function moveLineAnimation(percentage) {
return styled.keyframes(["0%{transform:translateX(", ");}100%{transform:translateX(", ");}"], percentage === "25%" ? "-110%" : percentage === "50%" ? "-70%" : "-55%", percentage === "25%" ? "400%" : percentage === "50%" ? "220%" : "200%");
};
var StyledLinearLoader = styled__default["default"].div.withConfig({
displayName: "Styles__StyledLinearLoader",
componentId: "sc-x4ge7a-0"
})(["width:100%;height:", "px;position:relative;overflow:hidden;background-color:", ";border-radius:", "px;&::before{content:\"\";position:absolute;top:0;border-radius:", "px;left:0;width:", ";height:100%;background-color:", ";animation:", " ", "s infinite linear;}"], function (props) {
return props.$height;
}, function (props) {
return props.$inactiveStrokeColor;
}, function (props) {
return props.$height;
}, function (props) {
return props.$height;
}, function (props) {
return props.$activeColorPercentage;
}, function (props) {
return props.$activeStrokeColor;
}, function (props) {
return moveLineAnimation(props.$activeColorPercentage);
}, function (props) {
return props.$animationDuration;
});
StyledLinearLoader.displayName = "StyledLinearLoader";
var _excluded$16 = ["height", "activeStrokeColor", "inactiveStrokeColor", "activeColorPercentage", "animationDuration"];
var LinearLoader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var _ref$height = _ref.height,
height = _ref$height === void 0 ? 4 : _ref$height,
_ref$activeStrokeColo = _ref.activeStrokeColor,
activeStrokeColor = _ref$activeStrokeColo === void 0 ? "var(--color-secondary)" : _ref$activeStrokeColo,
_ref$inactiveStrokeCo = _ref.inactiveStrokeColor,
inactiveStrokeColor = _ref$inactiveStrokeCo === void 0 ? "var(--color-theme-transparent-300)" : _ref$inactiveStrokeCo,
_ref$activeColorPerce = _ref.activeColorPercentage,
activeColorPercentage = _ref$activeColorPerce === void 0 ? "25%" : _ref$activeColorPerce,
_ref$animationDuratio = _ref.animationDuration,
animationDuration = _ref$animationDuratio === void 0 ? 0.75 : _ref$animationDuratio,
rest = _objectWithoutProperties(_ref, _excluded$16);
return /*#__PURE__*/React__default["default"].createElement(StyledLinearLoader, _extends({
ref: ref,
$height: height,
$activeStrokeColor: activeStrokeColor,
$inactiveStrokeColor: inactiveStrokeColor,
$activeColorPercentage: activeColorPercentage,
$animationDuration: animationDuration
}, rest));
});
LinearLoader.displayName = "LinearLoader";
var _excluded$15 = ["header", "rows", "className", "sortBy", "sortDirection", "onSortCallback", "theadClass", "noResultsCallback", "groupBy", "groupHead", "isCollapsible", "emptyValue", "loading", "loadingRows"];
var SortDirection = /*#__PURE__*/function (SortDirection) {
SortDirection["None"] = "none";
SortDirection["Asc"] = "asc";
SortDirection["Desc"] = "desc";
return SortDirection;
}({});
var groupByKey = function groupByKey(items, key) {
if (items[0] instanceof Array) {
items = items[0];
}
return items.reduce(function (result, item) {
return _objectSpread2(_objectSpread2({}, result), {}, {
[item[key] !== null ? " " + item[key] : item[key]]: [...(result[item[key] !== null ? " " + item[key] : item[key]] || []), item]
});
}, {});
};
var initialCollapsed = function initialCollapsed(rows, groupBy) {
if (groupBy) {
var groupedData = groupByKey(rows, groupBy);
var keys = Object.keys(groupedData);
var collapsedKeys = {};
keys.forEach(function (key) {
collapsedKeys[key] = true;
});
return collapsedKeys;
}
return {};
};
var DataTable = function DataTable(_ref) {
var header = _ref.header,
_ref$rows = _ref.rows,
rows = _ref$rows === void 0 ? [] : _ref$rows,
className = _ref.className,
sortBy = _ref.sortBy,
_ref$sortDirection = _ref.sortDirection,
sortDirection = _ref$sortDirection === void 0 ? SortDirection.None : _ref$sortDirection,
onSortCallback = _ref.onSortCallback,
theadClass = _ref.theadClass,
noResultsCallback = _ref.noResultsCallback,
groupBy = _ref.groupBy,
_ref$groupHead = _ref.groupHead,
groupHead = _ref$groupHead === void 0 ? function () {
return null;
} : _ref$groupHead,
isCollapsible = _ref.isCollapsible,
emptyValue = _ref.emptyValue,
loading = _ref.loading,
_ref$loadingRows = _ref.loadingRows,
loadingRows = _ref$loadingRows === void 0 ? 7 : _ref$loadingRows,
args = _objectWithoutProperties(_ref, _excluded$15);
var _useState = React.useState(sortDirection),
_useState2 = _slicedToArray(_useState, 2),
columnDirection = _useState2[0],
setColumnDirection = _useState2[1];
var _useState3 = React.useState(sortBy),
_useState4 = _slicedToArray(_useState3, 2),
active = _useState4[0],
setActive = _useState4[1];
var _useState5 = React.useState(),
_useState6 = _slicedToArray(_useState5, 2),
hovered = _useState6[0],
setHovered = _useState6[1];
var _useState7 = React.useState(function () {
return initialCollapsed(rows, groupBy);
}),
_useState8 = _slicedToArray(_useState7, 2),
collapsed = _useState8[0],
setCollapsed = _useState8[1];
var sort = function sort(sortByKey, direction, rowsData) {
if (direction === SortDirection.None) {
return rowsData;
}
if (rowsData instanceof Array) return rowsData.sort(function (a, b) {
if (direction === SortDirection.Asc) {
if (a[sortByKey] === null) {
return 1;
}
if (b[sortByKey] === null) {
return -1;
}
}
if (a[sortByKey] === null) {
return -1;
}
if (b[sortByKey] === null) {
return 1;
}
if (typeof a[sortByKey] === "number") {
if (direction === SortDirection.Asc) {
return a[sortByKey] - b[sortByKey];
}
return b[sortByKey] - a[sortByKey];
}
var first = a[sortByKey].toString();
var second = b[sortByKey].toString();
if (direction === SortDirection.Asc) {
return first.localeCompare(second);
}
return second.localeCompare(first);
});
return {};
};
var initialData = React.useCallback(function () {
if (sortBy && !groupBy) {
return sort(sortBy, sortDirection, rows);
}
if (sortBy && groupBy) {
sort(sortBy, sortDirection, rows);
return groupByKey(rows, groupBy);
}
if (!sortBy && groupBy) {
return groupByKey(rows, groupBy);
}
return rows;
}, [groupBy, rows, sortBy, sortDirection]);
var _useState9 = React.useState(initialData),
_useState10 = _slicedToArray(_useState9, 2),
data = _useState10[0],
setData = _useState10[1];
var getNextSortDirection = function getNextSortDirection(previousDirection, sameColumn) {
if (!sameColumn) {
return SortDirection.Asc;
}
if (previousDirection === SortDirection.Asc) {
return SortDirection.Desc;
}
return SortDirection.Asc;
};
var sortColumn = React.useCallback(function (event) {
var index = event.currentTarget.dataset.index;
if (index && header[index] && header[index].sortable) {
var direction = getNextSortDirection(columnDirection, header[index].key === active);
setActive(header[index].key);
setColumnDirection(direction);
if (groupBy) {
var grouped = _objectSpread2({}, data);
if (groupBy !== header[index].key) {
Object.keys(grouped).map(function (key) {
grouped[key] = sort(header[index].key, direction, grouped[key]);
});
} else {
if (rows instanceof Object) {
grouped = sort(header[index].key, direction, rows);
grouped = groupByKey([grouped], groupBy);
}
}
setData(grouped);
} else {
setData(sort(header[index].key, direction, data));
}
if (onSortCallback) {
onSortCallback(header[index].key, direction);
}
}
return null;
}, [setData, data, columnDirection, setColumnDirection, header, active, setActive, onSortCallback, groupBy, rows]);
var cellMouseOver = React.useCallback(function (e) {
if (e.target instanceof HTMLElement) {
if (e.target.dataset.key) {
setHovered(e.target.dataset.key);
}
}
}, []);
var cellMouseOut = React.useCallback(function () {
setHovered(null);
}, []);
React.useEffect(function () {
setData(initialData());
setCollapsed(initialCollapsed(rows, groupBy));
}, [rows, groupBy, initialData]);
var renderNoResults = React.useCallback(function () {
return /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", {
colSpan: header.length,
className: classNames__default["default"]({
"text-center": !noResultsCallback
})
}, noResultsCallback ? noResultsCallback() : "There is no data."));
}, [header, noResultsCallback]);
var tableRef = React.useRef(null);
var overlayStyles = function overlayStyles() {
if (tableRef.current) {
return tableRef.current.clientHeight + 5;
}
};
var renderCell = React.useCallback(function (h, row, colIndex) {
if (h.renderCallback) {
return h.renderCallback(row, h.key, colIndex);
}
if (row[h.key] === null && emptyValue) {
return /*#__PURE__*/React__default["default"].createElement("i", {
className: "opacity-75"
}, emptyValue[h.key]);
}
return row[h.key];
}, [emptyValue]);
var renderRow = React.useCallback(function (row, rowIndex) {
return /*#__PURE__*/React__default["default"].createElement("tr", {
key: rowIndex,
"data-index": rowIndex,
"data-direction": "asc",
className: "c-table__row",
onMouseOver: cellMouseOver,
onMouseLeave: cellMouseOut
}, header.map(function (h, colIndex) {
return /*#__PURE__*/React__default["default"].createElement("td", {
key: colIndex,
className: classNames__default["default"]("c-table__cell c-data-table__item", {
hovered: hovered === h.key
}),
"data-key": h.key,
style: header[colIndex].style ? header[colIndex].style : {}
}, renderCell(h, row, colIndex));
}));
}, [cellMouseOut, cellMouseOver, header, hovered, renderCell]);
var toggleCollapse = React.useCallback(function (event) {
var collapseKey = event.currentTarget.dataset.groupkey;
setCollapsed(function (prevState) {
var newState = _objectSpread2({}, prevState);
newState[collapseKey] = !prevState[collapseKey];
return newState;
});
}, []);
var renderPlaceholders = React.useMemo(function () {
var placeholders = Array(loadingRows).fill({}).map(function (_, index) {
return /*#__PURE__*/React__default["default"].createElement("tr", {
key: index,
className: "c-table__row",
onMouseOver: cellMouseOver,
onMouseLeave: cellMouseOut
}, header.map(function (col, colIndex) {
return /*#__PURE__*/React__default["default"].createElement("td", {
key: colIndex,
className: classNames__default["default"]("c-table__cell c-data-table__item", {
hovered: hovered === col.key
}),
"data-key": col.key
}, /*#__PURE__*/React__default["default"].createElement(SkeletonLoader, null));
}));
});
return /*#__PURE__*/React__default["default"].createElement(Tbody, null, placeholders);
}, [cellMouseOut, cellMouseOver, header, hovered, loadingRows]);
var renderRows = React.useMemo(function () {
if (data && data instanceof Array && data.length > 0 || typeof data === "object" && Object.keys(data).length > 0) {
if (groupBy) {
var keys = Object.keys(data);
return keys.map(function (key, i) {
return /*#__PURE__*/React__default["default"].createElement(React.Fragment, {
key: key
}, isCollapsible && /*#__PURE__*/React__default["default"].createElement(Tbody, {
className: "c-table__collapse_body"
}, /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", {
"data-groupkey": key,
onClick: toggleCollapse,
className: "c-table__body__icon c-table--toggle-collapsed"
}, /*#__PURE__*/React__default["default"].createElement(CollapseExpandSingleIcon$1, {
className: classNames__default["default"]({
"c-table__collapse_icon--expanded": !collapsed[key],
"c-table__collapse_icon--collapsed": collapsed[key]
})
})))), /*#__PURE__*/React__default["default"].createElement(Tbody, {
className: classNames__default["default"]("c-table__grouped__head", "head_".concat(i), {
"c-table__grouped__head--expanded": isCollapsible && !collapsed[key],
"c-table__grouped__head--collapsed": isCollapsible && collapsed[key],
last: i === keys.length - 1,
first: i === 0
})
}, groupHead(data[key], keys[i] !== "null" ? keys[i].trim() : null)), /*#__PURE__*/React__default["default"].createElement(Tbody, {
className: classNames__default["default"]("c-table__group c-table_group_".concat(i), {
hidden: collapsed[key]
})
}, data[key].map(function (row, index) {
return renderRow(row, index);
})));
});
}
return /*#__PURE__*/React__default["default"].createElement(Tbody, null, data instanceof Array && data.map(function (row, rowIndex) {
return renderRow(row, rowIndex);
}));
}
return renderNoResults();
}, [data, groupBy, renderRow, groupHead, collapsed, isCollapsible, renderNoResults, toggleCollapse]);
var allGroupsCollapsed = React.useMemo(function () {
return Object.keys(collapsed).every(function (key) {
return collapsed[key];
});
}, [collapsed]);
var hasCollapsed = React.useMemo(function () {
return Object.keys(collapsed).some(function (key) {
return collapsed[key];
});
}, [collapsed]);
var toggleAllCollapsed = React.useCallback(function () {
if (hasCollapsed) {
setCollapsed(function (prevState) {
var newState = _objectSpread2({}, prevState);
Object.keys(newState).forEach(function (key) {
newState[key] = false;
});
return newState;
});
} else {
setCollapsed(function (prevState) {
var newState = _objectSpread2({}, prevState);
Object.keys(newState).forEach(function (key) {
newState[key] = true;
});
return newState;
});
}
}, [hasCollapsed]);
return /*#__PURE__*/React__default["default"].createElement(StyledDataTable, _extends({
as: Table,
innerRef: tableRef,
className: classNames__default["default"]("c-data-table", className, {
"c-table__grouped": groupBy,
"c-table__collapsible": isCollapsible,
"padding-b-0": groupBy && collapsed[Object.keys(data).slice(-1)[0]]
})
}, args), /*#__PURE__*/React__default["default"].createElement(Thead, {
className: theadClass
}, header.length > 0 && /*#__PURE__*/React__default["default"].createElement("tr", {
className: "c-table__row"
}, header.map(function (h, index) {
return /*#__PURE__*/React__default["default"].createElement("th", {
key: h.key,
className: classNames__default["default"]("c-table__cell", {
"c-table__cell--hovered": hovered === h.key,
"c-table__head--hidden": groupBy && allGroupsCollapsed && h.hideCollapsed
}),
onMouseOver: cellMouseOver,
onMouseLeave: cellMouseOut,
"data-key": h.key,
style: h.style
}, isCollapsible && groupBy && index === 0 && /*#__PURE__*/React__default["default"].createElement("span", {
className: "c-table__head__icon-wrapper",
onClick: toggleAllCollapsed,
"data-test": "toggle-collapse"
}, hasCollapsed ? /*#__PURE__*/React__default["default"].createElement(ExpandAllIcon$1, {
className: "c-table__head__icon-wrapper__icon"
}) : /*#__PURE__*/React__default["default"].createElement(CollapseAllIcon$1, {
className: "c-table__head__icon-wrapper__icon"
})), hovered === h.key && /*#__PURE__*/React__default["default"].createElement("div", {
className: "c-table__overlay",
style: {
height: overlayStyles() + "px"
}
}), /*#__PURE__*/React__default["default"].createElement("div", {
onClick: sortColumn,
"data-index": index,
className: classNames__default["default"]("c-table__icon-wrapper", {
"cursor-pointer": h.sortable === true
})
}, /*#__PURE__*/React__default["default"].createElement("span", {
className: "c-table__label"
}, h.label), h.sortable && /*#__PURE__*/React__default["default"].createElement(SortIcon$1, {
width: "10px",
height: "10px",
className: classNames__default["default"]("c-table__icon", {
"c-table__icon--inactive": h.key !== active,
"c-table__icon--active": h.key === active,
"c-table__icon--asc": columnDirection === SortDirection.Asc && h.key === active,
"c-table__icon--desc": columnDirection === SortDirection.Desc && h.key === active
})
})));
}))), loading ? renderPlaceholders : renderRows);
};
DataTable.displayName = "DataTable";
var burstScale = styled.keyframes(["from{transform:scale(0);}to{transform:scale(1);}"]);
var burstAnimation = styled.keyframes(["from{stroke-dashoffset:0;}to{stroke-dashoffset:8;}"]);
var StyledCompleteCheckbox = styled__default["default"].button.withConfig({
displayName: "Styles__StyledCompleteCheckbox",
componentId: "sc-1801dzg-0"
})(["", " border-color:var(--color-theme-600);transition:ease 0.3s all;background-color:transparent;padding:0;svg{", " top:50%;left:50%;transform:translate(-50%,-50%);}svg path{fill:none;stroke:#32b370;stroke-width:3;transform:scale(0);}", " svg polyline{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:0.3s;stroke-dasharray:13;stroke-dashoffset:13;stroke:#d2d2d2;", "}", " ", " ", " ", " ", ""], {
"position": "relative",
"height": "1.5rem",
"width": "1.5rem",
"cursor": "pointer",
"borderRadius": "9999px",
"borderWidth": "1px",
"borderStyle": "solid"
}, {
"pointerEvents": "none",
"position": "absolute"
}, function (props) {
return props.$primary && styled.css(["svg path{stroke:var(--color-primary);}"]);
}, function (props) {
return props.$primary && styled.css(["stroke:var(--color-theme-500);"]);
}, function (props) {
return props.$completed && styled.css(["box-shadow:inset 0 0 0 12px var(--color-primary);border-color:var(--color-primary);border-width:0px;", " &:hover{box-shadow:inset 0 0 0 12px #84cc7c;", "}svg polyline{stroke-dashoffset:0;stroke:#fff;", "}svg path{stroke-dasharray:8;stroke-dashoffset:0;transform-origin:24px 24px;}"], !props.$primary && styled.css(["", " box-shadow:inset 0 0 0 12px #84cc7c;border-color:#84cc7c;"], {
"borderWidth": "1px",
"borderStyle": "solid"
}), props.$primary && styled.css(["box-shadow:inset 0 0 0 12px var(--color-primary);"]), props.$primary && styled.css(["stroke:var(--color-theme-100);"]));
}, function (props) {
return !props.$completed && !props.$disabled && styled.css(["&:hover,&:focus-visible{border:1px solid var(--color-primary);box-shadow:inset 0 0 0 2px var(--color-primary);border-width:0px;outline:none;", " svg polyline{stroke-dashoffset:0;}}"], !props.$primary && styled.css(["border:1px solid #84cc7c;box-shadow:inset 0 0 0 2px #84cc7c;"]));
}, function (props) {
return props.$animation && styled.css(["svg path{animation:", " 0.6s ease 0s 1 normal,", " 0.4s ease 0.2s 1 normal;}"], burstScale, burstAnimation);
}, function (props) {
return props.$disabled && styled.css(["", " opacity:0.5;"], {
"cursor": "default"
});
}, function (props) {
return !props.$checkMarkClassName && styled.css(["svg{", "}"], {
"height": "3rem",
"width": "3rem"
});
});
StyledCompleteCheckbox.displayName = "StyledCompleteCheckbox";
var _excluded$14 = ["completed", "disabled", "animate", "onClick", "className", "primary", "checkMarkClassName"];
var CompleteCheckbox = function CompleteCheckbox(_ref) {
var _ref$completed = _ref.completed,
completed = _ref$completed === void 0 ? false : _ref$completed,
_ref$disabled = _ref.disabled,
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
_ref$animate = _ref.animate,
animate = _ref$animate === void 0 ? false : _ref$animate,
onClick = _ref.onClick,
className = _ref.className,
_ref$primary = _ref.primary,
primary = _ref$primary === void 0 ? false : _ref$primary,
checkMarkClassName = _ref.checkMarkClassName,
rest = _objectWithoutProperties(_ref, _excluded$14);
return /*#__PURE__*/React__default["default"].createElement(StyledCompleteCheckbox, _extends({
onClick: onClick,
className: classNames__default["default"]("c-complete-checkbox", className),
$primary: primary,
$completed: completed,
$disabled: disabled,
$animation: !disabled && completed && animate,
$checkMarkClassName: !!checkMarkClassName
}, rest), /*#__PURE__*/React__default["default"].createElement("svg", {
viewBox: "0 0 48 48",
className: checkMarkClassName
}, /*#__PURE__*/React__default["default"].createElement("path", {
d: "M7,7l5.7,5.7 M0,24h8 M7,41l5.7-5.7 M24,48v-8 M41,41l-5.7-5.7 M48,24h-8 M41,7l-5.7,5.7 M24,0v8"
}), /*#__PURE__*/React__default["default"].createElement("polyline", {
points: "19.5,24 22.5,27 28.5,21"
})));
};
CompleteCheckbox.displayName = "CompleteCheckbox";
var PaperStyles = styled.css(["", " border-radius:var(--ac-br-8);", " ", ""], {
"backgroundColor": "var(--page-paper-main)"
}, FontStyle, BoxSizingStyle);
var StyledPaper = styled__default["default"].div.withConfig({
displayName: "Styles__StyledPaper",
componentId: "sc-1ld1e2o-0"
})(["", " ", " ", " ", ""], PaperStyles, function (props) {
return props.type === "paper-3" && styled.css(["border:solid 1px var(--border-primary);"]);
}, function (props) {
return props.type === "tile-1" && styled.css(["border:solid 1px var(--color-theme-300);"]);
}, function (props) {
return (props.type === "tile-1" || props.type === "tile-2") && styled.css(["&:hover{background-color:var(--color-theme-200);}"]);
});
StyledPaper.displayName = "StyledPaper";
var _excluded$13 = ["children", "className", "type", "hover", "useOptimizedShadow"];
/**
* This is a component description and should sit directly above your component
*/
var Paper = /*#__PURE__*/React.forwardRef(function (_ref, innerRef) {
var children = _ref.children,
className = _ref.className,
_ref$type = _ref.type,
type = _ref$type === void 0 ? "paper-1" : _ref$type,
_ref$hover = _ref.hover,
hover = _ref$hover === void 0 ? false : _ref$hover,
_ref$useOptimizedShad = _ref.useOptimizedShadow,
useOptimizedShadow = _ref$useOptimizedShad === void 0 ? false : _ref$useOptimizedShad,
rest = _objectWithoutProperties(_ref, _excluded$13);
return /*#__PURE__*/React__default["default"].createElement(StyledPaper, _extends({
className: classNames__default["default"](className, {
"ac-shadow--raised--lg": !useOptimizedShadow && hover && type === "paper-1",
"ac-shadow-optimized--lg": useOptimizedShadow && hover && type === "paper-1",
"ac-shadow--lg": !hover && type === "paper-1",
"ac-shadow--raised--sm": !useOptimizedShadow && hover && type === "paper-2" || !useOptimizedShadow && hover && type === "paper-3",
"ac-shadow-optimized--sm": useOptimizedShadow && hover && type === "paper-2" || useOptimizedShadow && hover && type === "paper-3",
"ac-shadow--sm": !hover && type === "paper-2" || !hover && type === "paper-3"
}),
ref: innerRef,
type: type
}, rest), children);
});
Paper.displayName = "Paper";
var StyledScaleBarInner = styled__default["default"].div.withConfig({
displayName: "Styles__StyledScaleBarInner",
componentId: "sc-1jbevna-0"
})(["", " height:3px;background:#37ba82;z-index:1;", ""], {
"position": "relative"
}, function (props) {
return props.$width && styled.css(["width:", "%;"], props.$width);
});
var StyledScaleBar = styled__default["default"].div.withConfig({
displayName: "Styles__StyledScaleBar",
componentId: "sc-1jbevna-1"
})(["", " ", ""], {
"width": "100%"
}, BoxSizingStyle);
StyledScaleBar.displayName = "StyledScaleBar";
StyledScaleBarInner.displayName = "StyledScaleBarInner";
var ScaleBar = function ScaleBar(_ref) {
var width = _ref.width,
className = _ref.className;
return /*#__PURE__*/React__default["default"].createElement(StyledScaleBar, {
className: classNames__default["default"]("c-scale-bar", className)
}, /*#__PURE__*/React__default["default"].createElement(StyledScaleBarInner, {
className: "c-scale-bar__progress",
$width: width
}));
};
ScaleBar.displayName = "ScaleBar";
var StyledCard = styled__default["default"](Paper).withConfig({
displayName: "Styles__StyledCard",
componentId: "sc-hllbj1-0"
})(["", " ", ""], {
"color": "var(--color-theme-900)"
}, function (_ref) {
var $pointer = _ref.$pointer;
return $pointer && styled.css(["cursor:pointer;"]);
});
StyledCard.displayName = "StyledCard";
var _excluded$12 = ["children", "className", "hoverable", "variant", "onClick"];
var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var children = _ref.children,
className = _ref.className,
_ref$hoverable = _ref.hoverable,
hoverable = _ref$hoverable === void 0 ? false : _ref$hoverable,
_ref$variant = _ref.variant,
variant = _ref$variant === void 0 ? "paper-2" : _ref$variant,
onClick = _ref.onClick,
rest = _objectWithoutProperties(_ref, _excluded$12);
return /*#__PURE__*/React__default["default"].createElement(StyledCard, _extends({}, rest, {
type: variant,
className: classNames__default["default"]("c-card", className),
hover: hoverable,
$pointer: typeof onClick === "function",
onClick: onClick,
useOptimizedShadow: true,
ref: ref
}), children);
});
Card.displayName = "Card";
var StyledEntityCard$1 = styled__default["default"](Card).withConfig({
displayName: "Styles__StyledEntityCard",
componentId: "sc-3vmxf-0"
})(["padding:12px;line-height:1.375;", " ", ""], function (props) {
return props.$renderAs === "list-item" && styled.css(["display:grid;grid-auto-flow:column;align-items:center;min-height:48px;margin-bottom:4px;"]);
}, function (props) {
return props.$renderAs === "grid-item" && styled.css(["display:flex;flex-direction:column;height:250px;width:250px;.card-body{flex-grow:1;}"]);
});
StyledEntityCard$1.displayName = "StyledEntityCard";
var EntityCard$1 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var _ref$renderAs = _ref.renderAs,
renderAs = _ref$renderAs === void 0 ? "list-item" : _ref$renderAs,
properties = _ref.properties,
className = _ref.className;
var renderAsListItem = React.useCallback(function (properties) {
return properties.filter(function (p) {
return p.showInList;
}).map(function (p) {
return /*#__PURE__*/React__default["default"].createElement("div", {
key: p.name,
className: "entity-property-".concat(p.name)
}, p.render());
});
}, []);
var renderAsGridItem = React.useCallback(function (properties) {
var headerSection = properties.filter(function (p) {
return p.cardSection === "header";
});
var bodySection = properties.filter(function (p) {
return p.cardSection === "body";
});
var footerSection = properties.filter(function (p) {
return p.cardSection === "footer";
});
var renderProperty = function renderProperty(p) {
return /*#__PURE__*/React__default["default"].createElement("div", {
key: p.name,
className: "entity-property-".concat(p.name)
}, p.render());
};
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
className: "card-header"
}, headerSection.map(function (p) {
return renderProperty(p);
})), /*#__PURE__*/React__default["default"].createElement("div", {
className: "card-body"
}, bodySection.map(function (p) {
return renderProperty(p);
})), /*#__PURE__*/React__default["default"].createElement("div", {
className: "card-footer"
}, footerSection.map(function (p) {
return renderProperty(p);
})));
}, []);
return /*#__PURE__*/React__default["default"].createElement(StyledEntityCard$1, {
ref: ref,
hoverable: true,
className: classNames__default["default"]("entity-card-wrapper", {
"grid-item": renderAs === "grid-item",
"list-item": renderAs === "list-item"
}, className),
variant: renderAs === "grid-item" ? "paper-1" : "paper-2",
$renderAs: renderAs
}, renderAs === "list-item" ? renderAsListItem(properties) : null, renderAs === "grid-item" ? renderAsGridItem(properties) : null);
});
EntityCard$1.displayName = "EntityCard";
var _excluded$11 = ["weight", "children"];
var Title1 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var _ref$weight = _ref.weight,
weight = _ref$weight === void 0 ? "light" : _ref$weight,
children = _ref.children,
props = _objectWithoutProperties(_ref, _excluded$11);
return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
weight: weight,
variant: "Title 1",
ref: ref
}, props), children);
});
Title1.displayName = "Title1";
var _excluded$10 = ["weight", "children"];
var Title2 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var _ref$weight = _ref.weight,
weight = _ref$weight === void 0 ? "light" : _ref$weight,
children = _ref.children,
props = _objectWithoutProperties(_ref, _excluded$10);
return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
weight: weight,
variant: "Title 2",
ref: ref
}, props), children);
});
Title2.displayName = "Title2";
var _excluded$$ = ["children"];
var Header2 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var children = _ref.children,
props = _objectWithoutProperties(_ref, _excluded$$);
return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
weight: "bold",
variant: "Header 2",
ref: ref
}, props), children);
});
Header2.displayName = "Header2";
var _excluded$_ = ["weight", "children"];
var Body1 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var _ref$weight = _ref.weight,
weight = _ref$weight === void 0 ? "regular" : _ref$weight,
children = _ref.children,
props = _objectWithoutProperties(_ref, _excluded$_);
return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
variant: "Body 1",
weight: weight,
ref: ref
}, props), children);
});
Body1.displayName = "Body1";
var _excluded$Z = ["weight", "children"];
var Caption1 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var _ref$weight = _ref.weight,
weight = _ref$weight === void 0 ? "regular" : _ref$weight,
children = _ref.children,
props = _objectWithoutProperties(_ref, _excluded$Z);
return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
variant: "Caption 1",
weight: weight,
ref: ref
}, props), children);
});
Caption1.displayName = "Caption1";
var _excluded$Y = ["weight", "children"];
var Caption2 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var _ref$weight = _ref.weight,
weight = _ref$weight === void 0 ? "regular" : _ref$weight,
children = _ref.children,
props = _objectWithoutProperties(_ref, _excluded$Y);
return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
variant: "Caption 2",
weight: weight,
ref: ref
}, props), children);
});
Caption2.displayName = "Caption2";
var StyledChildrenWrapper$1 = styled__default["default"].div.withConfig({
displayName: "Styles__StyledChildrenWrapper",
componentId: "sc-13n85xv-0"
})(["", ""], {
"flexShrink": "0"
});
StyledChildrenWrapper$1.displayName = "StyledChildrenWrapper";
var StyledWrapper$2 = styled__default["default"].div.withConfig({
displayName: "Styles__StyledWrapper",
componentId: "sc-13n85xv-1"
})(["", " justify-content:", ";"], {
"marginBottom": "1rem",
"display": "flex",
"alignItems": "center",
"gap": "1rem"
}, function (_ref) {
var $expanded = _ref.$expanded;
return $expanded ? "space-between" : "flex-start";
});
StyledWrapper$2.displayName = "StyledWrapper";
var StyledTitle = styled__default["default"](Body2).withConfig({
displayName: "Styles__StyledTitle",
componentId: "sc-13n85xv-2"
})(["", " cursor:", ";"], {
"overflow": "hidden",
"textOverflow": "ellipsis",
"whiteSpace": "nowrap"
}, function (_ref2) {
var $readOnly = _ref2.$readOnly;
return $readOnly ? "default" : "pointer";
});
StyledTitle.displayName = "StyledTitle";
var StyledDividerLine = styled__default["default"].div.withConfig({
displayName: "Styles__StyledDividerLine",
componentId: "sc-13n85xv-3"
})(["", " border-top:1px solid var(--border-primary);"], {
"flex": "1 1 0%"
});
StyledDividerLine.displayName = "StyledDividerLine";
var StyledCollapseExpandSingleIcon = styled__default["default"](CollapseExpandSingleIcon$1).withConfig({
displayName: "Styles__StyledCollapseExpandSingleIcon",
componentId: "sc-13n85xv-4"
})(["", " transform:", ";transition:all 0.2s ease;"], {
"marginRight": "0.25rem",
"cursor": "pointer"
}, function (_ref3) {
var $expanded = _ref3.$expanded;
return $expanded ? "rotate(0deg)" : "rotate(180deg)";
});
StyledCollapseExpandSingleIcon.displayName = "StyledCollapseExpandSingleIcon";
var EntitiesHeader = function EntitiesHeader(_ref) {
var onClick = _ref.onClick,
title = _ref.title,
children = _ref.children,
_ref$expanded = _ref.expanded,
expanded = _ref$expanded === void 0 ? true : _ref$expanded,
_ref$readOnly = _ref.readOnly,
readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
className = _ref.className;
var ref = React.useRef(null);
var _useState = React.useState(expanded || readOnly),
_useState2 = _slicedToArray(_useState, 2),
open = _useState2[0],
setOpen = _useState2[1];
React.useEffect(function () {
setOpen(expanded || readOnly);
}, [expanded, readOnly]);
var handleOnClick = React.useCallback(function () {
var _ref$current;
(_ref$current = ref.current) === null || _ref$current === void 0 || _ref$current.focus();
setOpen(function (prev) {
return !prev;
});
if (onClick) onClick();
}, [onClick]);
return /*#__PURE__*/React__default["default"].createElement(StyledWrapper$2, {
className: className,
tabIndex: 0,
ref: ref,
$expanded: open
}, !readOnly ? /*#__PURE__*/React__default["default"].createElement(Button, {
variant: "text gray",
size: "small",
onClick: handleOnClick
}, /*#__PURE__*/React__default["default"].createElement(StyledCollapseExpandSingleIcon, {
$expanded: open
}), /*#__PURE__*/React__default["default"].createElement(StyledTitle, {
$readOnly: readOnly,
color: "secondary",
weight: "medium"
}, title)) : /*#__PURE__*/React__default["default"].createElement(StyledTitle, {
$readOnly: readOnly,
color: "secondary",
weight: "medium"
}, title), !open && /*#__PURE__*/React__default["default"].createElement(StyledDividerLine, {
"data-testid": "divider-line"
}), open && /*#__PURE__*/React__default["default"].createElement(StyledChildrenWrapper$1, null, children));
};
var StyledSignifier = styled__default["default"].div.withConfig({
displayName: "Styles__StyledSignifier",
componentId: "sc-1idn4je-0"
})(["", " ", " ", " cursor:default;", " ", ""], {
"display": "inline-flex",
"alignItems": "center",
"color": "var(--color-theme-800)"
}, FontStyle, BoxSizingStyle, function (props) {
return props.$direction === "c-signifier--top" && styled.css(["--signifier-in:60%;--signifier-out:-60%;"]);
}, function (props) {
return props.$direction === "c-signifier--bottom" && styled.css(["--signifier-in:-60%;--signifier-out:60%;"]);
});
StyledSignifier.displayName = "StyledSignifier";
var StyledSignifierTransition = styled__default["default"](reactTransitionGroup.CSSTransition).withConfig({
displayName: "Styles__StyledSignifierTransition",
componentId: "sc-1idn4je-1"
})(["&.c-signifier--animate-enter{opacity:0;transform:translateY(var(--signifier-in));}&.c-signifier--animate-enter-active{opacity:1;transform:translateY(0%);transition-duration:300ms;}&.c-signifier--animate-exit{transform:translateY(0%);opacity:1;}&.c-signifier--animate-exit-active{transform:translateY(var(--signifier-out));opacity:0;transition-duration:300ms;}"]);
StyledSignifierTransition.displayName = "StyledSignifierTransition";
var StyledIcon$1 = styled__default["default"].svg.withConfig({
displayName: "Styles__StyledIcon",
componentId: "sc-1idn4je-2"
})(["", ""], {
"marginRight": "0.25rem",
"fontSize": "0.75rem",
"lineHeight": "1rem"
});
StyledIcon$1.displayName = "StyledIcon";
var signifierTypes = ["EyeIcon", "EyeSmallIcon", "PencilIcon", "PencilSmallIcon", "EyeOffIcon", "EyeOffSmallIcon", "ChecklistIcon", "ChecklistSmallIcon", "WarningTriangleIcon", "WarningTriangleSmallIcon", "DependencyIcon", "DependencySmallIcon", "MessageIcon", "MessageSmallIcon", "ClockStopwatchIcon", "ClockStopwatchSmallIcon", "ClockIcon", "ClockSmallIcon", "DollarOffIcon", "DollarOffSmallIcon", "DollarIcon", "DollarSmallIcon", "DollarCheckmarkIcon", "DollarCheckmarkSmallIcon", "DollarClockIcon", "DollarClockSmallIcon", "BellOffIcon", "BellOffSmallIcon", "LockIcon", "LockSmallIcon", "RecurringCheckmarkIcon", "RecurringCheckmarkSmallIcon"];
var Signifier = function Signifier(_ref) {
var Component = _ref.type,
_ref$value = _ref.value,
value = _ref$value === void 0 ? null : _ref$value,
className = _ref.className,
tooltipText = _ref.tooltipText,
tooltipClassName = _ref.tooltipClassName;
if (signifierTypes.indexOf(Component.displayName) === -1) {
console.warn("You are using unsupported Signifier icon");
}
var _useState = React.useState("c-signifier--top"),
_useState2 = _slicedToArray(_useState, 2),
direction = _useState2[0],
setDirection = _useState2[1];
var _useState3 = React.useState(value),
_useState4 = _slicedToArray(_useState3, 2),
setPrevValue = _useState4[1];
var label = React.useMemo(function () {
if (!value || value < 1) return null;
var max = 1000000000;
var newValue = value;
if (newValue > max) {
newValue = max;
}
if (newValue === max) {
return "".concat(Math.floor(newValue / 1000000000), "B+");
} else if (newValue > 999999) {
return "".concat(Math.floor(newValue / 1000000), "M");
} else if (newValue > 999) {
return "".concat(Math.floor(newValue / 1000), "k");
}
return "".concat(newValue);
}, [value]);
React.useEffect(function () {
value && setPrevValue(function (v) {
v && setDirection(v - value > 0 ? "c-signifier--top" : "c-signifier--bottom");
return value;
});
}, [value]);
var renderSignifier = React.useMemo(function () {
return /*#__PURE__*/React__default["default"].createElement(StyledSignifier, {
className: classNames__default["default"]("c-signifier", className),
$direction: direction
}, /*#__PURE__*/React__default["default"].createElement(StyledIcon$1, {
as: Component
}), value !== null && /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.SwitchTransition, {
mode: "out-in"
}, /*#__PURE__*/React__default["default"].createElement(StyledSignifierTransition, {
key: label,
timeout: 300,
classNames: "c-signifier--animate"
}, Component.displayName.includes("SmallIcon") ? /*#__PURE__*/React__default["default"].createElement(Caption1, {
color: "secondary"
}, label) : /*#__PURE__*/React__default["default"].createElement(Body1, {
color: "secondary"
}, label))));
}, [className, direction, Component, value, label]);
return /*#__PURE__*/React__default["default"].createElement(Tooltip, {
title: tooltipText !== null && tooltipText !== void 0 ? tooltipText : "",
disable: !tooltipText,
popperTooltipClassName: tooltipClassName
}, renderSignifier);
};
Signifier.displayName = "Signifier";
var StyledWrapper$1 = styled__default["default"].span.withConfig({
displayName: "Styles__StyledWrapper",
componentId: "sc-5x2tyd-0"
})(["display:inline-flex;border-radius:100%;position:relative;"]);
var StyledAvatar = styled__default["default"].img.withConfig({
displayName: "Styles__StyledAvatar",
componentId: "sc-5x2tyd-1"
})(["border-radius:100%;object-fit:cover;"]);
var _excluded$X = ["url", "alt", "size", "className", "imgClassName", "children"];
/**
* @component Avatar
* @description
* The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.
*
* @prop {url} - The image url of the Avatar.
* @prop {size} - controls the size of an Avatar (width and height) in pixels.
* @prop {alt} - alt attribute of the img.
* @prop {imgClassName} - class name that attaches to img element nested in Wrapper
*
* @example
* <Avatar url="https://faces-img.xcdn.link/image-lorem-face-954.jpg" alt="Profile picture of John" />
*
* @example
* <Avatar
* url="https://faces-img.xcdn.link/image-lorem-face-954.jpg"
* alt="Profile picture of John">
* <Badge size={8} backgroundColor="green" position="bottom-left" />
* </Avatar>
*
* @see
* https://system.activecollab.com/?path=/story/components-button-indicators-avatar--avatar
* @see
* https://design.activecollab.com/docs/components/avatar
*/
var Avatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var url = _ref.url,
_ref$alt = _ref.alt,
alt = _ref$alt === void 0 ? "Avatar Image" : _ref$alt,
_ref$size = _ref.size,
size = _ref$size === void 0 ? 24 : _ref$size,
className = _ref.className,
imgClassName = _ref.imgClassName,
children = _ref.children,
rest = _objectWithoutProperties(_ref, _excluded$X);
var _useState = React.useState(false),
_useState2 = _slicedToArray(_useState, 2),
imageLoaded = _useState2[0],
setImageLoaded = _useState2[1];
return /*#__PURE__*/React__default["default"].createElement(StyledWrapper$1, {
className: className
}, children, /*#__PURE__*/React__default["default"].createElement(StyledAvatar, _extends({
ref: ref,
src: url,
alt: alt,
width: size,
height: size,
onLoad: function onLoad() {
setImageLoaded(true);
},
role: "img",
className: imgClassName,
style: {
display: imageLoaded ? "block" : "none"
}
}, rest)), !imageLoaded && /*#__PURE__*/React__default["default"].createElement(SkeletonLoader, {
"data-testid": "loader",
style: {
width: size,
height: size,
borderRadius: "100%"
}
}));
});
Avatar.displayName = "Avatar";
var StyledDot = styled__default["default"].div.withConfig({
displayName: "Styles__StyledDot",
componentId: "sc-1hwsgu3-0"
})(["border-radius:100%;", " ", ""], function (props) {
return props.$size && styled.css(["width:", "px;height:", "px;"], props.$size, props.$size);
}, function (props) {
return props.$color && styled.css(["background-color:", ";"], props.$color);
});
var _excluded$W = ["color", "size", "className"];
var Dot = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var color = _ref.color,
_ref$size = _ref.size,
size = _ref$size === void 0 ? 8 : _ref$size,
className = _ref.className,
rest = _objectWithoutProperties(_ref, _excluded$W);
return /*#__PURE__*/React__default["default"].createElement(StyledDot, _extends({
className: classNames__default["default"]("c-dot", className),
ref: ref,
$color: color,
$size: size
}, rest));
});
Dot.displayName = "Dot";
var StyledTag = styled__default["default"].div.withConfig({
displayName: "Styles__StyledTag",
componentId: "sc-1chtb47-0"
})(["", " font-size:13px;line-height:1.375;", " ", ""], {
"display": "flex",
"alignItems": "center"
}, BoxSizingStyle, FontStyle);
StyledTag.displayName = "StyledTag";
var StyledTagDot = styled__default["default"](Dot).withConfig({
displayName: "Styles__StyledTagDot",
componentId: "sc-1chtb47-1"
})(["", ""], function (props) {
return props.$showText && styled.css(["", ""], {
"marginRight": "0.25rem"
});
});
StyledTagDot.displayName = "StyledTagDot";
var StyledTagText = styled__default["default"].div.withConfig({
displayName: "Styles__StyledTagText",
componentId: "sc-1chtb47-2"
})(["", " ", ""], {
"textTransform": "uppercase"
}, function (props) {
return props.color && styled.css(["color:", ";"], props.color);
});
StyledTagText.displayName = "StyledTagText";
var _excluded$V = ["name", "color", "showText", "showDot", "className"];
var Tag = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var name = _ref.name,
color = _ref.color,
_ref$showText = _ref.showText,
showText = _ref$showText === void 0 ? true : _ref$showText,
_ref$showDot = _ref.showDot,
showDot = _ref$showDot === void 0 ? true : _ref$showDot,
className = _ref.className,
rest = _objectWithoutProperties(_ref, _excluded$V);
return /*#__PURE__*/React__default["default"].createElement(StyledTag, _extends({
className: classNames__default["default"]("c-tag", className),
ref: ref
}, rest), showDot ? /*#__PURE__*/React__default["default"].createElement(StyledTagDot, {
$showText: showText,
color: color
}) : null, showText ? /*#__PURE__*/React__default["default"].createElement(StyledTagText, {
color: color
}, name) : null);
});
Tag.displayName = "Tag";
var StyledNav = styled__default["default"].nav.withConfig({
displayName: "Styles__StyledNav",
componentId: "sc-1khiypw-0"
})(["", " height:100%;width:100%;overflow:clip visible;", " ", " ", " ", ""], {
"display": "flex"
}, function (props) {
return props.$align === "left" && styled.css(["", ""], {
"justifyContent": "flex-start"
});
}, function (props) {
return props.$align === "center" && styled.css(["", ""], {
"justifyContent": "center"
});
}, function (props) {
return props.$align === "right" && styled.css(["", ""], {
"justifyContent": "flex-end"
});
}, function (props) {
return props.$role === "light" && styled.css(["height:auto;"]);
});
StyledNav.displayName = "StyledNav";
var StyledNavList = styled__default["default"].ul.withConfig({
displayName: "Styles__StyledNavList",
componentId: "sc-1khiypw-1"
})(["", " overflow:clip visible;"], {
"margin": "0px",
"display": "flex",
"listStyleType": "none",
"padding": "0px"
});
StyledNavList.displayName = "StyledNavList";
var StyledNavListItem = styled__default["default"].li.withConfig({
displayName: "Styles__StyledNavListItem",
componentId: "sc-1khiypw-2"
})(["", " color:var(--color-theme-700);font-size:15px;display:flex;align-items:center;font-weight:500;padding:0 10px;flex-shrink:0;&:hover,&:hover *{", "}", " &::after{content:\"\";", " bottom:0;left:50%;transform:translateX(-50%);height:3px;transition:width 0.3s ease,background-color 0.3s ease;}", " ", " ", " ", ""], {
"position": "relative",
"cursor": "default",
"userSelect": "none",
"fontSize": "0.875rem",
"lineHeight": "1.25rem"
}, function (props) {
return !props.$disabled && styled.css(["", ""], {
"color": "var(--color-primary)"
});
}, function (props) {
return !props.$active && !props.$disabled && styled.css(["", ""], {
"cursor": "pointer"
});
}, {
"position": "absolute",
"margin": "auto",
"display": "block",
"width": "0px",
"backgroundColor": "transparent"
}, function (props) {
return props.$active && styled.css(["", " &::after{", "}"], {
"pointerEvents": "none"
}, {
"width": "100%",
"backgroundColor": "var(--color-primary)"
});
}, function (props) {
return props.$disabled && styled.css(["", ""], {
"cursor": "not-allowed",
"userSelect": "none",
"opacity": "0.5"
});
}, function (props) {
return props.$role === "light" && styled.css(["", " color:var(--color-theme-800);font-weight:400;padding:0 8px;&::after{bottom:-4px;height:2px;}"], {
"fontSize": "0.875rem",
"lineHeight": "1.25rem"
});
}, function (props) {
return props.$active && styled.css(["", " & *{", "}"], {
"color": "var(--color-primary)"
}, {
"color": "var(--color-primary)"
});
});
StyledNavListItem.displayName = "StyledNavListItem";
var StyledNavAsSelect = styled__default["default"].div.withConfig({
displayName: "Styles__StyledNavAsSelect",
componentId: "sc-1khiypw-3"
})(["padding:0 10px;height:100%;display:flex;align-items:center;gap:4px;svg{color:var(--color-primary);top:1px;position:relative;}", ""], function (props) {
return props.$active && styled.css(["", " & *{", "}"], {
"color": "var(--color-primary)"
}, {
"color": "var(--color-primary)"
});
});
StyledNavAsSelect.displayName = "StyledNavAsSelect";
var StyledNavAsMoreTarget = styled__default["default"].div.withConfig({
displayName: "Styles__StyledNavAsMoreTarget",
componentId: "sc-1khiypw-4"
})(["padding:0 10px;height:100%;display:flex;align-items:center;", ""], function (props) {
return props.$role === "light" && styled.css(["padding:0;"]);
});
StyledNavAsMoreTarget.displayName = "StyledNavAsMoreTarget";
var _excluded$U = ["children", "active", "disabled", "className", "role"];
var Item = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var children = _ref.children,
_ref$active = _ref.active,
active = _ref$active === void 0 ? false : _ref$active,
_ref$disabled = _ref.disabled,
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
className = _ref.className,
role = _ref.role,
rest = _objectWithoutProperties(_ref, _excluded$U);
return /*#__PURE__*/React__default["default"].createElement(StyledNavListItem, _extends({
className: classNames__default["default"]("c-nav__item", {
"c-nav__item--active": active
}, className),
ref: ref
}, rest, {
$active: active,
$disabled: disabled,
$role: role
}), children);
});
Item.displayName = "Item";
var StyledNavListItemMore = styled__default["default"](Item).withConfig({
displayName: "Styles__StyledNavListItemMore",
componentId: "sc-m6npdq-0"
})(["", " cursor:pointer;&::after{content:\"\";", " bottom:0;left:50%;transform:translateX(-50%);height:3px;transition:width 0.3s ease,background-color 0.3s ease;", "}"], function (props) {
return props.role !== "light" && styled.css(["padding:0;"]);
}, {
"position": "absolute",
"margin": "auto",
"display": "block",
"width": "0px",
"backgroundColor": "transparent"
}, {
"width": "100%",
"backgroundColor": "var(--color-primary)"
});
StyledNavListItemMore.displayName = "StyledNavListItemMore";
var StyledExpand = styled__default["default"].svg.withConfig({
displayName: "Styles__StyledExpand",
componentId: "sc-zjpl2-0"
})(["", ""], {
"height": "1.5rem",
"width": "1.5rem",
"fill": "currentColor"
});
StyledExpand.displayName = "StyledExpand";
var StyledExpandSingle = styled__default["default"](StyledExpand).withConfig({
displayName: "Styles__StyledExpandSingle",
componentId: "sc-zjpl2-1"
})(["", ""], function (props) {
return !props.$expanded && styled.css(["transform:rotate(180deg);"]);
});
StyledExpandSingle.displayName = "StyledExpandSingle";
var _excluded$T = ["expanded"];
var ExpandSingle = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var _ref$expanded = _ref.expanded,
expanded = _ref$expanded === void 0 ? false : _ref$expanded,
rest = _objectWithoutProperties(_ref, _excluded$T);
return /*#__PURE__*/React__default["default"].createElement(StyledExpandSingle, _extends({
ref: ref,
viewBox: "0 0 24 24",
$expanded: expanded
}, rest), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M15.372 14.736a.993.993 0 001.349 0 .867.867 0 000-1.275L12 9l-4.72 4.461a.867.867 0 000 1.275.993.993 0 001.348 0L12 11.549l3.372 3.187z",
fillRule: "nonzero"
}));
});
ExpandSingle.displayName = "ExpandSingle";
var StyledOptionContentWrapper = styled__default["default"].div.withConfig({
displayName: "Styles__StyledOptionContentWrapper",
componentId: "sc-6fiqyy-0"
})(["display:flex;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;align-items:center;height:100%;flex-grow:1;"]);
StyledOptionContentWrapper.displayName = "StyledOptionContentWrapper";
var StyledOptionIndicator = styled__default["default"].div.withConfig({
displayName: "Styles__StyledOptionIndicator",
componentId: "sc-6fiqyy-1"
})(["height:24px;width:24px;border-radius:100%;margin-right:8px;flex-shrink:0;", ""], function (props) {
return props.backgroundColor && !props.children && styled.css(["background-color:", ";"], props.backgroundColor);
});
StyledOptionIndicator.displayName = "StyledOptionIndicator";
var StyledOptionText = styled__default["default"](Body2).withConfig({
displayName: "Styles__StyledOptionText",
componentId: "sc-6fiqyy-2"
})(["", " flex-grow:1;line-height:28px;padding-right:10px;", ""], {
"overflow": "hidden",
"textOverflow": "ellipsis",
"whiteSpace": "nowrap"
}, function (props) {
return props.textColor && styled.css(["color:", ";"], props.textColor);
});
StyledOptionText.displayName = "StyledOptionText";
var StyledAdditionalInfo = styled__default["default"].span.withConfig({
displayName: "Styles__StyledAdditionalInfo",
componentId: "sc-6fiqyy-3"
})(["margin:0 0 0 5px;line-height:18px;flex-shrink:0;"]);
StyledAdditionalInfo.displayName = "StyledAdditionalInfo";
var StyledMultiAvatarImg = styled.css(["width:inherit;height:inherit;"]);
var StyledMultiAvatarInner = styled__default["default"].div.withConfig({
displayName: "Styles__StyledMultiAvatarInner",
componentId: "sc-k6nldn-0"
})(["overflow:hidden;position:absolute;display:inline-flex;"]);
var StyledMultiAvatar = styled__default["default"].div.withConfig({
displayName: "Styles__StyledMultiAvatar",
componentId: "sc-k6nldn-1"
})(["", " border-radius:100%;position:relative;overflow:hidden;", " ", " ", ""], BoxSizingStyle, function (props) {
return props.$urlCount === 2 && styled.css(["", ":first-child{left:0;img{transform:translateX(-20%);}}", ":last-child{right:0;img{transform:translateX(-20%);}}"], StyledMultiAvatarInner, StyledMultiAvatarInner);
}, function (props) {
return props.$urlCount === 3 && styled.css(["", ":nth-child(1){left:0;img{transform:translateX(-20%);}}", ":nth-child(2){right:0;top:0;img{", "}}", ":nth-child(3){right:0;bottom:0;img{", "}}"], StyledMultiAvatarInner, StyledMultiAvatarInner, StyledMultiAvatarImg, StyledMultiAvatarInner, StyledMultiAvatarImg);
}, function (props) {
return props.$urlCount > 3 && styled.css(["img{", "}", ":nth-child(1){left:0;}", ":nth-child(2){left:0;bottom:0;}", ":nth-child(3){right:0;top:0;}", ":nth-child(4){right:0;bottom:0;}"], StyledMultiAvatarImg, StyledMultiAvatarInner, StyledMultiAvatarInner, StyledMultiAvatarInner, StyledMultiAvatarInner);
});
StyledMultiAvatar.displayName = "StyledMultiAvatar";
StyledMultiAvatarInner.displayName = "StyledMultiAvatarInner";
/**
* @component MultiAvatar
* @description
* The MultiAvatar component is used to represent user, and displays the profile picture, initials or fallback icon.
*
* @prop {url} - The image urls of the MultiAvatar.
* @prop {size} - controls the size of an MultiAvatar (width and height) in pixels.
* @prop {alt} - alt attributes of the imgs.
*
* @example
* <MultiAvatar
* url={["https://faces-img.xcdn.link/image-lorem-face-954.jpg", "https://faces-img.xcdn.link/image-lorem-face-953.jpg"]}
* alt={["Profile picture of John", "Profile picture of Sarah"]} />
*
* @example
* <MultiAvatar
* url={["https://faces-img.xcdn.link/image-lorem-face-954.jpg", "https://faces-img.xcdn.link/image-lorem-face-953.jpg"]}
* alt={["Profile picture of John", "Profile picture of Sarah"]}
* >
* <Badge />
* </MultiAvatar>
*
* @see
* https://system.activecollab.com/?path=/story/components-button-indicators-avatar--avatar
* @see
* https://design.activecollab.com/docs/components/avatar
*/
var MultiAvatar = function MultiAvatar(_ref) {
var url = _ref.url,
alt = _ref.alt,
_ref$size = _ref.size,
size = _ref$size === void 0 ? 24 : _ref$size,
className = _ref.className,
children = _ref.children;
var setSize = React.useCallback(function (i) {
switch (url.length) {
case 1:
return {
width: "".concat(size, "px"),
height: "".concat(size, "px")
};
case 2:
return {
width: "".concat(size / 2, "px"),
height: "".concat(size, "px")
};
case 3:
if (i === 0) {
return {
width: "".concat(size / 2, "px"),
height: "".concat(size, "px")
};
} else {
return {
width: "".concat(size / 2, "px"),
height: "".concat(size / 2, "px")
};
}
default:
return {
width: "".concat(size / 2, "px"),
height: "".concat(size / 2, "px")
};
}
}, [size, url.length]);
var slicedUrl = React.useMemo(function () {
if ((url === null || url === void 0 ? void 0 : url.length) > 4) {
return url.slice(0, 4);
}
return url;
}, [url]);
return /*#__PURE__*/React__default["default"].createElement("span", {
className: "tw-relative tw-inline-flex"
}, /*#__PURE__*/React__default["default"].createElement(StyledMultiAvatar, {
style: {
width: "".concat(size, "px"),
height: "".concat(size, "px")
},
className: className,
$urlCount: url.length
}, slicedUrl.map(function (v, i) {
return /*#__PURE__*/React__default["default"].createElement(StyledMultiAvatarInner, {
style: setSize(i),
className: "c-multi-avatar__wrapper",
key: "avatar_".concat(i)
}, /*#__PURE__*/React__default["default"].createElement("img", {
src: v,
alt: alt && alt[i] ? alt[i] : "avatar_".concat(i),
width: size,
height: size
}));
})), children);
};
MultiAvatar.displayName = "MultiAvatar";
var OptionContent = function OptionContent(_ref) {
var imageUrl = _ref.imageUrl,
color = _ref.color,
textColor = _ref.textColor,
name = _ref.name,
additionalInfo = _ref.additionalInfo;
return /*#__PURE__*/React__default["default"].createElement(StyledOptionContentWrapper, null, imageUrl || color ? /*#__PURE__*/React__default["default"].createElement(StyledOptionIndicator, {
className: "c-option--label",
backgroundColor: color
}, imageUrl ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, Array.isArray(imageUrl) ? /*#__PURE__*/React__default["default"].createElement(MultiAvatar, {
className: "c-option--multi-avatar",
url: imageUrl
}) : /*#__PURE__*/React__default["default"].createElement(Avatar, {
className: "c-option--avatar",
url: imageUrl
})) : null) : null, /*#__PURE__*/React__default["default"].createElement(StyledOptionText, {
className: "c-option--text",
textColor: textColor
}, name), additionalInfo ? /*#__PURE__*/React__default["default"].createElement(StyledAdditionalInfo, null, additionalInfo) : null);
};
OptionContent.displayName = "OptionContent";
var _excluded$S = ["mixed", "data-testid"];
/**
* @component CheckboxIcon
* @description
*
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
* The Icon component is
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
*
*
* @example
* return (
* <CheckboxIcon className="mr-2" showAdditionalIcon={true} />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var CheckboxIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var mixed = _ref.mixed,
testId = _ref["data-testid"],
props = _objectWithoutProperties(_ref, _excluded$S);
// const [animate, setAnimate] = useState(false);
// const mountRef = useRef(false);
// useEffect(() => {
// if (mountRef.current) {
// setAnimate(true);
// } else {
// mountRef.current = true;
// }
// }, [mixed]);
if (mixed) {
return /*#__PURE__*/React__default["default"].createElement("svg", {
width: "16",
height: "16",
viewBox: "0 0 16 16",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "checkbox-mixed-icon"
}, /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M14.2222 0C15.2041 0 16 0.795938 16 1.77778V14.2222C16 15.2041 15.2041 16 14.2222 16H1.77778C0.795938 16 0 15.2041 0 14.2222V1.77778C0 0.795938 0.795938 0 1.77778 0H14.2222Z",
fill: "var(--color-secondary)"
}), /*#__PURE__*/React__default["default"].createElement("rect", {
x: "3",
y: "7",
width: 10,
height: "2",
rx: "1",
fill: "var(--page-paper-main)"
}));
}
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 16,
height: 16,
viewBox: "0 0 16 16",
xmlns: "http://www.w3.org/2000/svg",
fill: "var(--color-theme-600)",
focusable: false,
ref: svgRef
}, props, {
"data-testid": testId
}), /*#__PURE__*/React__default["default"].createElement("g", {
fillRule: "evenodd"
}, /*#__PURE__*/React__default["default"].createElement("rect", {
stroke: "#8E8E8E",
x: 0.5,
y: 0.5,
width: 15,
height: 15,
rx: 2
}), /*#__PURE__*/React__default["default"].createElement("path", {
stroke: "#979797",
strokeWidth: 2,
d: "M12.243 5l-5.657 5.657-2.829-2.829"
})));
});
CheckboxIcon.displayName = "CheckboxIcon";
var CheckboxIcon$1 = CheckboxIcon;
var StyledInput$3 = styled__default["default"].input.withConfig({
displayName: "Styles__StyledInput",
componentId: "sc-y7zymm-0"
})(["border:0px;clip:rect(0px,0px,0px,0px);cursor:pointer;height:1px;margin:-1px;opacity:0;overflow:hidden;padding:0px;position:absolute;white-space:nowrap;width:1px;"]);
StyledInput$3.displayName = "StyledInput";
var StyledLabel = styled__default["default"].label.withConfig({
displayName: "Styles__StyledLabel",
componentId: "sc-y7zymm-1"
})([""]);
StyledLabel.displayName = "StyledLabel";
var StyledCheckbox$1 = styled__default["default"].div.withConfig({
displayName: "Styles__StyledCheckbox",
componentId: "sc-y7zymm-2"
})(["height:16px;width:16px;position:relative;transition-duration:0.2s;border-radius:2px;path{transition-duration:0.2s;stroke:transparent;stroke-dashoffset:12;stroke-dasharray:12;}svg{cursor:pointer;border-radius:2px;fill:transparent;}", " rect{transition-duration:0.2s;", " ", "}", ":disabled ~ ", "{opacity:0.5;cursor:not-allowed;}", ":focus ~ ", "{", "}&:not(.c-checkbox__controlled) ", ":hover:not(:checked) ~ ", "{path{stroke:var(--color-secondary-500);stroke-dashoffset:24;}rect{stroke:var(--color-secondary);", " stroke-width:3px;}}", " ", ":checked ~ ", "{path{", "}rect{stroke:var(--color-secondary);stroke-width:19px;", "}}"], function (props) {
return props.$disabled && styled.css(["svg{cursor:not-allowed;}"]);
}, function (props) {
return !props.mixed && styled.css(["stroke:var(--color-theme-500);"]);
}, function (props) {
return props.mixed && styled.css(["stroke:transparent;"]);
}, StyledInput$3, StyledLabel, StyledInput$3, StyledLabel, function (props) {
return !props.mixed && styled.css(["rect{stroke:var(--color-secondary);stroke-width:3px;}"]);
}, StyledInput$3, StyledLabel, function (props) {
return props.mixed && styled.css(["stroke:transparent;"]);
}, function (props) {
return props.hover && !props.mixed && styled.css(["", ":not(:checked) ~ ", "{path{stroke:var(--color-secondary-500);stroke-dashoffset:24;}rect{stroke:var(--color-secondary);stroke-width:3px;}}"], StyledInput$3, StyledLabel);
}, StyledInput$3, StyledLabel, function (props) {
return !props.mixed && styled.css(["stroke:var(--page-paper-main);stroke-dashoffset:24;"]);
}, function (props) {
return props.mixed && styled.css(["stroke:transparent;"]);
});
StyledCheckbox$1.displayName = "StyledCheckbox";
var _excluded$R = ["className", "hover", "id", "mixed", "checked", "onChange", "disabled"];
/**
* Checkbox component
*/
var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var className = _ref.className,
hover = _ref.hover,
_ref$id = _ref.id,
id = _ref$id === void 0 ? "checkbox" : _ref$id,
_ref$mixed = _ref.mixed,
mixed = _ref$mixed === void 0 ? false : _ref$mixed,
checked = _ref.checked,
onChange = _ref.onChange,
disabled = _ref.disabled,
rest = _objectWithoutProperties(_ref, _excluded$R);
var _useState = React.useState(mixed && !checked),
_useState2 = _slicedToArray(_useState, 2),
indeterminate = _useState2[0],
setIndeterminate = _useState2[1];
var _useState3 = React.useState(checked),
_useState4 = _slicedToArray(_useState3, 2),
initialChecked = _useState4[0],
setInitialChecked = _useState4[1];
var handleChange = React.useCallback(function (e) {
typeof onChange === "function" && onChange(e);
setInitialChecked(function (prev) {
return !prev;
});
setIndeterminate(false);
}, [onChange]);
React.useEffect(function () {
if (checked !== initialChecked) {
setInitialChecked(checked);
setIndeterminate(false);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [checked]);
React.useEffect(function () {
if (mixed !== indeterminate && !checked) {
setIndeterminate(mixed);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [mixed]);
return /*#__PURE__*/React__default["default"].createElement(StyledCheckbox$1, {
className: classNames__default["default"]("c-checkbox", {
"c-checkbox__hover": hover,
"c-checkbox__controlled": typeof hover === "boolean"
}, className),
hover: hover,
tabIndex: -1,
mixed: indeterminate,
$disabled: disabled
}, /*#__PURE__*/React__default["default"].createElement(StyledInput$3, _extends({
role: "checkbox",
id: id,
className: "c-checkbox--input",
type: "checkbox",
ref: ref
}, rest, {
checked: initialChecked,
onChange: handleChange,
disabled: disabled
})), /*#__PURE__*/React__default["default"].createElement(StyledLabel, {
htmlFor: id,
className: "c-checkbox--label"
}, /*#__PURE__*/React__default["default"].createElement(CheckboxIcon$1, {
"data-testid": "checkbox-icon",
height: 16,
width: 16,
mixed: indeterminate
})));
});
Checkbox.displayName = "Checkbox";
var InputResetStyle = styled.css(["margin:0;padding:0;border:0;outline:0;font:inherit;"]);
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) {
return props.$mode === "flat" && styled.css(["background-color:transparent;border:none;border-radius:none;"]);
}, function (props) {
return props.$size === "small" && styled.css(["border-radius:6px;height:24px;"]);
}, function (props) {
return props.$size === "big" && styled.css(["height:40px;"]);
}, function (props) {
return props.$size === "biggest" && styled.css(["height:48px;"]);
}, function (props) {
return props.$disabled && styled.css(["cursor:default;opacity:50%;"]);
}, function (props) {
return !props.$disabled && !props.$invalid && styled.css(["&:focus-within,&:hover{border-color:var(--color-primary);}"]);
}, function (props) {
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);}", " ", " ", " ", " ", " ", ""], BoxSizingStyle, InputResetStyle, function (props) {
return props.$mode === "flat" && styled.css(["background-color:transparent;"]);
}, 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;"]);
}, function (props) {
return props.disabled && styled.css(["cursor:default;"]);
}, function (props) {
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({
displayName: "Styles__StyledPasswordIndicatorWrapper",
componentId: "sc-ce8kcp-2"
})(["display:flex;gap:2px;margin-top:6px;margin-bottom:4px;"]);
StyledPasswordIndicatorWrapper.displayName = "StyledPasswordIndicatorWrapper";
var StyledPasswordIndicator = styled__default["default"].div.withConfig({
displayName: "Styles__StyledPasswordIndicator",
componentId: "sc-ce8kcp-3"
})(["width:100%;height:4px;border-radius:6px;background-color:", ";"], function (props) {
var $strength = props.$strength,
$index = props.$index;
if ($strength === 0) {
return "var(--color-theme-300)";
} else if ($strength === 1) {
return $index === 0 ? "var(--red-alert)" : "var(--color-theme-300)";
} else if ($strength === 2) {
return $index < 2 ? "var(--color-orange)" : "var(--color-theme-300)";
} else if ($strength === 3) {
return $index < 3 ? "var(--color-blue-sky)" : "var(--color-theme-300)";
} else {
return "var(--color-sucess-green)";
}
});
StyledPasswordIndicator.displayName = "StyledPasswordIndicator";
var StyledInputSelectTrigger = styled__default["default"].div.withConfig({
displayName: "Styles__StyledInputSelectTrigger",
componentId: "sc-ce8kcp-4"
})(["display:flex;gap:6px;align-items:center;margin-right:2px;margin-left:8px;color:var(--color-theme-700);font-weight:400;letter-spacing:0.02em;font-size:0.875rem;flex-shrink:0;cursor:", ";pointer-events:", ";", ""], function (props) {
if (props.$disabled) {
return "unset";
}
return "pointer";
}, function (props) {
if (props.$disabled) {
return "none";
}
return "unset";
}, function (props) {
return props.$size === "big" && styled.css(["font-size:1rem;"]);
});
StyledInputSelectTrigger.displayName = "StyledInputSelectTrigger";
var StyledFlagTriggerLabel = styled__default["default"].span.withConfig({
displayName: "Styles__StyledFlagTriggerLabel",
componentId: "sc-ce8kcp-5"
})(["font-size:", ";"], function (_ref) {
var $size = _ref.$size;
return $size === "small" ? "20px" : "24px";
});
StyledFlagTriggerLabel.displayName = "StyledFlagTriggerLabel";
var StyledOptionFlag = styled__default["default"].span.withConfig({
displayName: "Styles__StyledOptionFlag",
componentId: "sc-ce8kcp-6"
})(["font-size:24px;margin-right:4px;"]);
StyledFlagTriggerLabel.displayName = "StyledOptionFlag";
var StyledOptionName = styled__default["default"](Body2).withConfig({
displayName: "Styles__StyledOptionName",
componentId: "sc-ce8kcp-7"
})(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
StyledOptionName.displayName = "StyledOptionName";
var StyledOptionCode = styled__default["default"](Body2).withConfig({
displayName: "Styles__StyledOptionCode",
componentId: "sc-ce8kcp-8"
})(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-left:auto;color:var(--color-theme-600);flex-shrink:0;"]);
StyledOptionCode.displayName = "StyledOptionCode";
var StyledOptionRowEnd = styled__default["default"].span.withConfig({
displayName: "Styles__StyledOptionRowEnd",
componentId: "sc-ce8kcp-9"
})(["display:flex;align-items:center;gap:8px;"]);
StyledOptionRowEnd.displayName = "StyledOptionRowEnd";
var StyledOptionWrapper = styled__default["default"].span.withConfig({
displayName: "Styles__StyledOptionWrapper",
componentId: "sc-ce8kcp-10"
})(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-right:8px;display:flex;justify-items:center;align-items:center;"]);
StyledOptionWrapper.displayName = "StyledOptionWrapper";
var _excluded$Q = ["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,
style = _ref.style,
_ref$type = _ref.type,
type = _ref$type === void 0 ? "text" : _ref$type,
_ref$disabled = _ref.disabled,
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
_ref$size = _ref.size,
size = _ref$size === void 0 ? "regular" : _ref$size,
_ref$invalid = _ref.invalid,
invalid = _ref$invalid === void 0 ? false : _ref$invalid,
startAdornment = _ref.startAdornment,
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$Q);
var intInputRef = React.useRef(null);
var handleRef = useForkRef(ref, intInputRef);
var handleWrapperClick = React.useCallback(function () {
var _intInputRef$current;
(_intInputRef$current = intInputRef.current) === null || _intInputRef$current === void 0 || _intInputRef$current.focus();
wrapperClick && wrapperClick();
}, [wrapperClick]);
return /*#__PURE__*/React__default["default"].createElement(StyledInputWrapper, {
$size: size,
$invalid: invalid,
$disabled: disabled,
$mode: mode,
style: style,
className: classNames__default["default"]("c-input-wrapper", className),
onClick: handleWrapperClick,
ref: wrapRef
}, startAdornment, /*#__PURE__*/React__default["default"].createElement(StyledInput$2, _extends({
ref: handleRef,
type: type,
$size: size,
disabled: disabled,
className: "c-input",
"aria-invalid": invalid,
$invalid: invalid,
$mode: mode,
"data-form-type": "other"
}, rest)), endAdornment);
});
Input.displayName = "Input";
var StyledRadioInput = styled__default["default"].input.withConfig({
displayName: "Styles__StyledRadioInput",
componentId: "sc-1xh9uc2-0"
})(["display:none;"]);
StyledRadioInput.displayName = "StyledRadioInput";
var StyledRadioLabel = styled__default["default"].label.withConfig({
displayName: "Styles__StyledRadioLabel",
componentId: "sc-1xh9uc2-1"
})(["", ""], {
"display": "inline-flex",
"alignItems": "center"
});
StyledRadioLabel.displayName = "StyledRadioLabel";
var StyledRadioButton$1 = styled__default["default"].div.withConfig({
displayName: "Styles__StyledRadioButton",
componentId: "sc-1xh9uc2-2"
})(["", " ", " height:16px;width:16px;position:relative;svg{cursor:pointer;fill:transparent;}circle:first-child{transition-duration:0.2s;stroke:var(--color-theme-500);}circle:last-child{transition-duration:0.2s;transform-origin:center;transform:scale(0);fill:var(--color-secondary-500);}input:focus ~ ", "{circle:first-child{stroke:var(--color-secondary);}}input:disabled ~ ", "{pointer-events:none;opacity:0.5;}", " ", " input:checked ~ ", "{circle:first-child{stroke:var(--color-secondary);}circle:last-child{transform:scale(1);fill:var(--color-secondary);}}"], BoxSizingStyle, {
"display": "inline-flex",
"alignItems": "center"
}, StyledRadioLabel, StyledRadioLabel, function (props) {
return props.$isControlled !== true && styled.css(["input:hover ~ ", "{circle:first-child{stroke:var(--color-secondary);}circle:last-child{transform:scale(1);}}"], StyledRadioLabel);
}, function (props) {
return props.$isHovered && styled.css(["", "{circle:first-child{stroke:var(--color-secondary);}circle:last-child{transform:scale(1);}}"], StyledRadioLabel);
}, StyledRadioLabel);
StyledRadioButton$1.displayName = "StyledRadioButton";
var _excluded$P = ["className", "id", "hover"];
var RadioButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var _ref$className = _ref.className,
className = _ref$className === void 0 ? "" : _ref$className,
_ref$id = _ref.id,
id = _ref$id === void 0 ? "radio" : _ref$id,
hover = _ref.hover,
props = _objectWithoutProperties(_ref, _excluded$P);
return /*#__PURE__*/React__default["default"].createElement(StyledRadioButton$1, {
className: classNames__default["default"]("c-radio-btn", {
"c-radio-btn__hover": hover,
"c-radio-btn__controlled": typeof hover === "boolean"
}, className),
$isHovered: hover,
$isControlled: typeof hover === "boolean"
}, /*#__PURE__*/React__default["default"].createElement(StyledRadioInput, _extends({
id: id,
className: "c-radio-btn--input",
type: "radio",
ref: ref
}, props)), /*#__PURE__*/React__default["default"].createElement(StyledRadioLabel, {
htmlFor: id,
className: "c-radio-btn--label"
}, /*#__PURE__*/React__default["default"].createElement(RadioButtonIcon$1, {
width: "16",
height: "16"
})));
});
RadioButton.displayName = "RadioButton";
var StyledSelectInput = styled__default["default"](Input).withConfig({
displayName: "Styles__StyledSelectInput",
componentId: "sc-gfxqpu-0"
})([""]);
StyledSelectInput.displayName = "StyledSelectInput";
var StyledSelectForm = styled__default["default"].form.withConfig({
displayName: "Styles__StyledSelectForm",
componentId: "sc-gfxqpu-1"
})(["margin:12px 12px 0 12px;display:flex;", "{width:100%;border-radius:4px;}*{margin:auto 0;}"], StyledSelectInput);
StyledSelectForm.displayName = "StyledSelectForm";
var StyledStartAdornment = styled__default["default"].div.withConfig({
displayName: "Styles__StyledStartAdornment",
componentId: "sc-gfxqpu-2"
})(["margin-right:8px;margin-left:-4px;"]);
StyledStartAdornment.displayName = "StyledStartAdornment";
var StyledEndAdornment = styled__default["default"].div.withConfig({
displayName: "Styles__StyledEndAdornment",
componentId: "sc-gfxqpu-3"
})(["margin-left:8px;margin-right:-4px;"]);
StyledEndAdornment.displayName = "StyledEndAdornment";
var StyledCheckbox = styled__default["default"](Checkbox).withConfig({
displayName: "Styles__StyledCheckbox",
componentId: "sc-gfxqpu-4"
})(["margin-left:12px;"]);
StyledCheckbox.displayName = "StyledCheckbox";
var StyledRadioButton = styled__default["default"](RadioButton).withConfig({
displayName: "Styles__StyledRadioButton",
componentId: "sc-gfxqpu-5"
})(["margin-left:12px;"]);
StyledRadioButton.displayName = "StyledRadioButton";
var handleKeyboardMovement = function handleKeyboardMovement(e, hover, flatOptions, showAddNew, showDefaultOption) {
if (e.key === "ArrowDown" || e.key === "ArrowUp") {
e.preventDefault();
}
var options = flatOptions;
if (showDefaultOption) options = [{
id: null
}, ...options];
if (showAddNew) options = [...options, {
id: "addNew"
}];
var hoveredIndex = options.findIndex(function (option) {
return option.id === hover;
});
if (e.key === "ArrowDown") {
var isHoveredLastOption = options.findIndex(function (v) {
return v.id === hover;
}) + 1 >= options.length;
return hoveredIndex === -1 || isHoveredLastOption ? options[0].id : options[hoveredIndex + 1].id;
}
if (e.key === "ArrowUp") {
var isHoveredFirstOption = options[0].id === hover;
return hoveredIndex === -1 || isHoveredFirstOption ? options[options.length - 1].id : options[hoveredIndex - 1].id;
}
};
var StyledScrollShadow = styled__default["default"].div.withConfig({
displayName: "Styles__StyledScrollShadow",
componentId: "sc-17pcaqo-0"
})(["", ""], {
"position": "relative"
});
var StyledScrollShadowTop = styled__default["default"].div.withConfig({
displayName: "Styles__StyledScrollShadowTop",
componentId: "sc-17pcaqo-1"
})(["", " background-image:linear-gradient( to top,", ",", " );"], {
"position": "absolute",
"left": "0px",
"right": "0px",
"top": "0px",
"height": "0.5rem"
}, function (props) {
return props.$innerColor ? props.$innerColor : "var(--page-paper-main-shadow)";
}, function (props) {
return props.$outerColor ? props.$outerColor : "var(--page-paper-main)";
});
var StyledScrollShadowBottom = styled__default["default"].div.withConfig({
displayName: "Styles__StyledScrollShadowBottom",
componentId: "sc-17pcaqo-2"
})(["", " background-image:linear-gradient( to top,", ",", " );"], {
"position": "absolute",
"left": "0px",
"right": "0px",
"bottom": "0px",
"height": "0.5rem"
}, function (props) {
return props.$outerColor ? props.$outerColor : "var(--page-paper-main)";
}, function (props) {
return props.$innerColor ? props.$innerColor : "var(--page-paper-main-shadow)";
});
var StyledScrollShadowLeft = styled__default["default"].div.withConfig({
displayName: "Styles__StyledScrollShadowLeft",
componentId: "sc-17pcaqo-3"
})(["", " background-image:linear-gradient( to left,", ",", " );"], {
"position": "absolute",
"top": "0px",
"bottom": "0px",
"left": "0px",
"width": "0.5rem"
}, function (props) {
return props.$innerColor ? props.$innerColor : "var(--page-paper-main-shadow)";
}, function (props) {
return props.$outerColor ? props.$outerColor : "var(--page-paper-main)";
});
var StyledScrollShadowRight = styled__default["default"].div.withConfig({
displayName: "Styles__StyledScrollShadowRight",
componentId: "sc-17pcaqo-4"
})(["", " background-image:linear-gradient( to right,", ",", " );"], {
"position": "absolute",
"top": "0px",
"bottom": "0px",
"right": "0px",
"width": "0.5rem"
}, function (props) {
return props.$innerColor ? props.$innerColor : "var(--page-paper-main-shadow)";
}, function (props) {
return props.$outerColor ? props.$outerColor : "var(--page-paper-main)";
});
StyledScrollShadow.displayName = "StyledScrollShadow";
StyledScrollShadowTop.displayName = "StyledScrollShadowTop";
StyledScrollShadowBottom.displayName = "StyledScrollShadowBottom";
StyledScrollShadowLeft.displayName = "StyledScrollShadowLeft";
StyledScrollShadowRight.displayName = "StyledScrollShadowRight";
var _excluded$O = ["children", "className", "disableVertical", "disableHorizontal", "invertHorizontal", "invertVertical", "innerColor", "outerColor"];
var ScrollShadow = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var children = _ref.children,
className = _ref.className,
_ref$disableVertical = _ref.disableVertical,
disableVertical = _ref$disableVertical === void 0 ? false : _ref$disableVertical,
_ref$disableHorizonta = _ref.disableHorizontal,
disableHorizontal = _ref$disableHorizonta === void 0 ? false : _ref$disableHorizonta,
_ref$invertHorizontal = _ref.invertHorizontal,
invertHorizontal = _ref$invertHorizontal === void 0 ? false : _ref$invertHorizontal,
_ref$invertVertical = _ref.invertVertical,
invertVertical = _ref$invertVertical === void 0 ? false : _ref$invertVertical,
innerColor = _ref.innerColor,
outerColor = _ref.outerColor,
rest = _objectWithoutProperties(_ref, _excluded$O);
var _useState = React.useState({
top: 0,
right: 0,
bottom: 0,
left: 0
}),
_useState2 = _slicedToArray(_useState, 2),
opacity = _useState2[0],
setOpacity = _useState2[1];
var handleScroll = React.useCallback(function (event) {
var _ref2 = event.target,
scrollHeight = _ref2.scrollHeight,
clientHeight = _ref2.clientHeight,
scrollWidth = _ref2.scrollWidth,
clientWidth = _ref2.clientWidth;
var _ref3 = event.target,
scrollTop = _ref3.scrollTop,
scrollLeft = _ref3.scrollLeft;
if (scrollLeft < 0) {
scrollLeft *= -1;
}
if (scrollTop < 0) {
scrollTop *= -1;
}
setOpacity(function (prevState) {
var top = 1 / 20 * Math.min(scrollTop, 20);
var bottomScrollTop = scrollHeight - clientHeight;
var bottom = 1 / 20 * (bottomScrollTop - Math.max(scrollTop, bottomScrollTop - 20));
var left = 1 / 20 * Math.min(scrollLeft, 20);
var offset = scrollWidth - clientWidth;
var right = 1 / 20 * (offset - Math.max(scrollLeft, offset - 20));
var newState = {
top: 0,
bottom: 0,
left: 0,
right: 0
};
if (!disableVertical) {
newState.top = invertVertical ? bottom : top;
newState.bottom = invertVertical ? top : bottom;
}
if (!disableHorizontal) {
newState.left = invertHorizontal ? right : left;
newState.right = invertHorizontal ? left : right;
}
if (newState.top !== prevState.top || newState.bottom !== prevState.bottom || newState.left !== prevState.left || newState.right !== prevState.right) {
return newState;
}
return prevState;
});
}, [invertHorizontal, invertVertical, disableVertical, disableHorizontal]);
return /*#__PURE__*/React__default["default"].createElement(StyledScrollShadow, _extends({}, rest, {
ref: ref,
className: classNames__default["default"]("c-scroll-shadow", className)
}), children({
onScroll: handleScroll
}), !disableVertical ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(StyledScrollShadowTop, {
$innerColor: innerColor,
$outerColor: outerColor,
style: {
opacity: opacity.top
}
}), /*#__PURE__*/React__default["default"].createElement(StyledScrollShadowBottom, {
$innerColor: innerColor,
$outerColor: outerColor,
style: {
opacity: opacity.bottom
}
})) : null, !disableHorizontal ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(StyledScrollShadowLeft, {
$innerColor: innerColor,
$outerColor: outerColor,
style: {
opacity: opacity.left
}
}), /*#__PURE__*/React__default["default"].createElement(StyledScrollShadowRight, {
$innerColor: innerColor,
$outerColor: outerColor,
style: {
opacity: opacity.right
}
})) : null);
});
ScrollShadow.displayName = "ScrollShadow";
var useInitScrollRef = function useInitScrollRef(element) {
var invert = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
var ref = React.useRef(element);
React.useEffect(function () {
if (ref.current) {
ref.current.scrollTop = invert ? -1 : 1;
ref.current.scrollTop = 0;
ref.current.scrollLeft = invert ? -1 : 1;
ref.current.scrollLeft = 0;
}
}, [invert]);
return ref;
};
var useHeight = function useHeight(ref) {
var _useState = React.useState(0),
_useState2 = _slicedToArray(_useState, 2),
height = _useState2[0],
setHeight = _useState2[1];
React.useEffect(function () {
if (ref && ref.current) {
var element = ref.current;
var prevMaxHeight = element.style.maxHeight;
var prevVisibility = element.style.visibility;
element.style.visibility = "hidden";
element.style.maxHeight = "none";
var elementHeight = element.clientHeight;
element.style.visibility = prevVisibility;
element.style.maxHeight = prevMaxHeight;
return setHeight(elementHeight);
}
}, [ref]);
return height;
};
var useInputNumber = function useInputNumber(_ref, inputRef) {
var _ref$decimalSeparator = _ref.decimalSeparator,
decimalSeparator = _ref$decimalSeparator === void 0 ? "." : _ref$decimalSeparator,
_ref$thousandSeparato = _ref.thousandSeparator,
thousandSeparator = _ref$thousandSeparato === void 0 ? "," : _ref$thousandSeparato,
disableAbbreviation = _ref.disableAbbreviation,
disableMacros = _ref.disableMacros,
decimalLength = _ref.decimalLength,
_ref$value = _ref.value,
value = _ref$value === void 0 ? undefined : _ref$value,
onChange = _ref.onChange,
onSave = _ref.onSave,
onEnterKeyPress = _ref.onEnterKeyPress,
onClick = _ref.onClick,
onCancel = _ref.onCancel,
allowEmptyValue = _ref.allowEmptyValue,
_ref$step = _ref.step,
step = _ref$step === void 0 ? 1 : _ref$step,
_ref$trimDecimals = _ref.trimDecimals,
trimDecimals = _ref$trimDecimals === void 0 ? true : _ref$trimDecimals,
limit = _ref.limit,
_ref$validation = _ref.validation,
validation = _ref$validation === void 0 ? validateNumberInput : _ref$validation,
min = _ref.min,
max = _ref.max,
onBlur = _ref.onBlur,
update = _ref.update,
_ref$shortenThreshold = _ref.shortenThreshold,
shortenThreshold = _ref$shortenThreshold === void 0 ? 1000 : _ref$shortenThreshold;
var isMaxValid = max === undefined || min === undefined || Number(max) >= Number(min);
if (!isMaxValid) {
console.warn("Warning: The maximum value is set to be lower than the minimum value. The maximum value will be ignored.");
}
var _useState = React.useState(function () {
return value;
}),
_useState2 = _slicedToArray(_useState, 2),
numericValue = _useState2[0],
setNumericValue = _useState2[1];
var _useState3 = React.useState(function () {
return value;
}),
_useState4 = _slicedToArray(_useState3, 2),
prevNumericValue = _useState4[0],
setPrevNumericValue = _useState4[1];
var _useState5 = React.useState(function () {
return formatNumber(value, thousandSeparator, decimalSeparator, trimDecimals, decimalLength, disableAbbreviation ? "long" : "short", shortenThreshold);
}),
_useState6 = _slicedToArray(_useState5, 2),
currentValue = _useState6[0],
setCurrentValue = _useState6[1];
var _useState7 = React.useState(function () {
return formatNumber(value, thousandSeparator, decimalSeparator, trimDecimals, decimalLength, disableAbbreviation ? "long" : "short", shortenThreshold);
}),
_useState8 = _slicedToArray(_useState7, 2),
prevValue = _useState8[0],
setPrevValue = _useState8[1];
var _useState9 = React.useState(function () {
return formatNumber(value, "", decimalSeparator, false, decimalLength, "long", shortenThreshold);
}),
_useState10 = _slicedToArray(_useState9, 2),
unformattedValue = _useState10[0],
setUnformattedValue = _useState10[1];
var _useState11 = React.useState(function () {
return formatNumber(value, "", decimalSeparator, false, decimalLength, "long", shortenThreshold);
}),
_useState12 = _slicedToArray(_useState11, 2),
unformattedPrevValue = _useState12[0],
setUnformattedPrevValue = _useState12[1];
var _useState13 = React.useState(false),
_useState14 = _slicedToArray(_useState13, 2),
focused = _useState14[0],
setFocused = _useState14[1];
React.useEffect(function () {
if (value !== prevNumericValue && (!focused || update)) {
setCurrentValue(formatNumber(value, thousandSeparator, decimalSeparator, trimDecimals, decimalLength, disableAbbreviation ? "long" : "short", shortenThreshold));
setPrevValue(formatNumber(value, thousandSeparator, decimalSeparator, trimDecimals, decimalLength, disableAbbreviation ? "long" : "short", shortenThreshold));
setUnformattedValue(formatNumber(value, "", decimalSeparator, false, decimalLength, "long", shortenThreshold));
setUnformattedPrevValue(formatNumber(value, "", decimalSeparator, false, decimalLength, "long", shortenThreshold));
setNumericValue(value);
setPrevNumericValue(value);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [disableAbbreviation, thousandSeparator, decimalSeparator, decimalLength, trimDecimals, value, focused]);
var escapeRef = React.useRef(false);
var handleBlur = React.useCallback(function (e) {
if (escapeRef.current) {
setCurrentValue(prevValue);
setUnformattedValue(unformattedPrevValue);
setNumericValue(prevNumericValue);
if (onChange) onChange(prevNumericValue);
} else {
if (e.target.value.trim().length > 0 && prevValue !== e.target.value) {
var _value = formatNumber(currentValue, thousandSeparator, decimalSeparator, trimDecimals, decimalLength, disableAbbreviation ? "long" : "short", shortenThreshold);
var _unformatedValue = formatNumber(currentValue, "", decimalSeparator, false, decimalLength, "long", shortenThreshold);
var _numericValue = getNumberFromString(_unformatedValue, thousandSeparator, decimalSeparator);
setPrevValue(_value);
setUnformattedPrevValue(_unformatedValue);
setUnformattedValue(_unformatedValue);
setNumericValue(_numericValue);
setPrevNumericValue(_numericValue);
if (_numericValue !== prevNumericValue) onChange === null || onChange === void 0 || onChange(_numericValue);
setCurrentValue(_value);
typeof onSave === "function" && onSave(e);
} else {
if (!allowEmptyValue) {
setCurrentValue(prevValue);
setUnformattedValue(unformattedPrevValue);
setNumericValue(prevNumericValue);
onChange === null || onChange === void 0 || onChange(prevNumericValue);
typeof onCancel === "function" && onCancel(e);
} else {
if (prevValue !== e.target.value) {
onSave === null || onSave === void 0 || onSave(e);
} else {
typeof onCancel === "function" && onCancel(e);
}
}
}
}
setFocused(false);
typeof onBlur === "function" && onBlur(e);
}, [currentValue, onBlur, prevValue, unformattedPrevValue, prevNumericValue, onChange, thousandSeparator, decimalSeparator, trimDecimals, decimalLength, disableAbbreviation, shortenThreshold, onSave, allowEmptyValue, onCancel]);
var updateValue = React.useCallback(function (type) {
if (max !== undefined && Number(numericValue) > max || min !== undefined && Number(numericValue) < min) {
return;
}
var newValue = numericValue;
if (type === "increment") {
if (max === undefined || Number(numericValue) + step <= max) {
newValue = Number(numericValue) + step;
} else if (Number(numericValue) < max) {
newValue = max;
} else {
return;
}
} else if (type === "decrement") {
if (min === undefined || Number(numericValue) - step >= min) {
newValue = Number(numericValue) - step;
} else if (Number(numericValue) > min) {
newValue = min;
} else {
return;
}
}
var formattedValue;
if (decimalLength !== undefined) {
formattedValue = Number(newValue).toFixed(decimalLength);
} else {
formattedValue = Number(newValue).toFixed(2);
}
if (decimalLength !== undefined && decimalLength === 0) {
formattedValue = Math.round(Number(newValue)).toString();
}
if (formattedValue.includes(".") || formattedValue.includes(",")) {
formattedValue = formattedValue.replace(".", decimalSeparator);
}
setNumericValue(newValue);
setPrevNumericValue(newValue);
setUnformattedValue(formattedValue);
setCurrentValue(formattedValue);
if (onChange) onChange(newValue);
}, [max, numericValue, min, decimalLength, onChange, step, decimalSeparator]);
var handleKeyDown = React.useCallback(function (e) {
if (e.key === "Enter") {
e.target.blur();
if (typeof onEnterKeyPress === "function") onEnterKeyPress(numericValue);
}
if (e.key === "ArrowLeft") {
return;
}
if (e.key === "ArrowRight") {
return;
}
if (e.key === "ArrowUp") {
e.preventDefault();
updateValue("increment");
}
if (e.key === "ArrowDown") {
e.preventDefault();
updateValue("decrement");
}
if (e.key === "Escape") {
escapeRef.current = true;
e.target.blur();
typeof onCancel === "function" && onCancel(e);
escapeRef.current = false;
}
if (e.key === "Backspace") {
return;
}
if (e.key === "Delete") {
return;
}
if ((e.metaKey || e.ctrlKey) && e.key === "a") {
var _inputRef$current;
(_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.select();
return;
}
if (e.key === "Tab") {
return;
}
if ((e.metaKey || e.ctrlKey) && e.key === "v") {
e.preventDefault();
return;
}
// Disallow "-" if min is 0 or greater
if (e.key === "-" && min !== undefined && Number(min) >= 0) {
e.preventDefault();
return;
}
// Disallow decimal separator if decimalLength is 0
if (e.key === decimalSeparator && decimalLength === 0) {
e.preventDefault();
return;
}
var input = e.target;
var currentValue = input.value;
var start = input.selectionStart;
var end = input.selectionEnd;
var newValue = currentValue.substring(0, start) + e.key + currentValue.substring(end);
if (!validation(newValue, Boolean(disableMacros), decimalSeparator, decimalLength !== null && decimalLength !== void 0 ? decimalLength : 0, limit)) {
e.preventDefault();
return;
}
}, [decimalLength, decimalSeparator, disableMacros, inputRef, limit, min, numericValue, onCancel, onEnterKeyPress, updateValue, validation]);
var handleChange = React.useCallback(function (e) {
var inputValue = e.target.value;
var numericNewValue = undefined;
var numericInput = disableMacros ? inputValue : inputValue.replace(/(\d+(?:[.,]\d+)?)([kmbtKMBT])/, function (_, num, unit) {
var normalizedNum = num.replace(",", ".");
var parts = normalizedNum.split(".");
var integerPart = parts[0];
var fractionalPart = parts[1];
var newInteger = parseInt(integerPart, 10) * currencyMultiplier[unit.toLowerCase()];
numericNewValue = parseFloat("".concat(newInteger ? newInteger : 0, ".").concat(fractionalPart ? fractionalPart : 0));
var result = newInteger.toString();
if (fractionalPart !== undefined) {
result += decimalSeparator + fractionalPart;
}
return result;
});
if (numericNewValue === undefined) {
if (inputValue) {
numericNewValue = parseFloat(inputValue.replace(",", "."));
} else {
numericNewValue = undefined;
}
}
setCurrentValue(numericInput);
setUnformattedValue(numericInput);
setNumericValue(numericNewValue);
if (onChange && numericNewValue !== numericValue) onChange(numericNewValue);
}, [disableMacros, onChange, numericValue, decimalSeparator]);
var handleClick = React.useCallback(function (e) {
if (typeof onClick === "function") {
onClick(e);
}
}, [onClick]);
var handleFocus = React.useCallback(function () {
setCurrentValue(unformattedValue);
setFocused(true);
}, [unformattedValue]);
var handleDoubleClick = React.useCallback(function () {
if (inputRef.current) {
var _inputRef$current2;
(_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.select();
}
}, [inputRef]);
return {
value: currentValue,
onBlur: handleBlur,
onKeyDown: handleKeyDown,
onChange: handleChange,
onClick: handleClick,
onDoubleClick: handleDoubleClick,
onFocus: handleFocus,
focused,
unformattedValue,
numericValue
};
};
var _excluded$N = ["as", "className", "invert", "style"];
var ScrollElement = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var _ref$as = _ref.as,
as = _ref$as === void 0 ? "div" : _ref$as,
className = _ref.className,
_ref$invert = _ref.invert,
invert = _ref$invert === void 0 ? false : _ref$invert,
style = _ref.style,
rest = _objectWithoutProperties(_ref, _excluded$N);
var internalRef = useInitScrollRef(null, invert);
var handleRef = useForkRef(internalRef, ref);
var props = _objectSpread2(_objectSpread2({}, rest), {}, {
ref: handleRef,
className: classNames__default["default"]("c-scroll-element", className),
style: _objectSpread2({
overflow: "auto"
}, style)
});
return /*#__PURE__*/React__default["default"].createElement(as, props);
});
ScrollElement.displayName = "ScrollElement";
var StyledOption = styled__default["default"].li.withConfig({
displayName: "Styles__StyledOption",
componentId: "sc-1232l97-0"
})(["", " font-size:14px;display:flex;justify-content:space-between;height:28px;padding-left:16px;padding-right:16px;margin-top:4px;margin-bottom:4px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;transition-duration:0.1s;color:var(--color-theme-900);", " ", " ", ""], {
"userSelect": "none",
"fontWeight": "400"
}, FontStyle, BoxSizingStyle, function (props) {
return props.hover && styled.css(["background-color:var(--color-theme-200);"]);
});
StyledOption.displayName = "StyledOption";
var StyledAutocompleteScrollShadow = styled__default["default"](ScrollShadow).withConfig({
displayName: "Styles__StyledAutocompleteScrollShadow",
componentId: "sc-1bc1vz9-0"
})(["margin-top:4px;", ""], function (props) {
return props.$isHidden && styled.css(["", ";"], {
"display": "none"
});
});
StyledAutocompleteScrollShadow.displayName = "StyledAutocompleteScrollShadow";
var StyledAutocompleteBody = styled__default["default"](List).withConfig({
displayName: "Styles__StyledAutocompleteBody",
componentId: "sc-1bc1vz9-1"
})(["max-height:340px;overflow:auto;margin-bottom:6px;"]);
StyledAutocompleteBody.displayName = "StyledAutocompleteBody";
var StyledAutocompleteNewItem = styled__default["default"](StyledOption).withConfig({
displayName: "Styles__StyledAutocompleteNewItem",
componentId: "sc-1bc1vz9-2"
})(["", ";justify-content:start;&:before{content:\"+ \";margin-right:4px;}", ""], {
"cursor": "pointer",
"userSelect": "none"
}, function (props) {
return props.hover && styled.css(["background-color:var(--color-theme-200);content:\"+ \";"]);
});
StyledAutocompleteNewItem.displayName = "StyledAutocompleteNewItem";
var StyledHiglightedText = styled__default["default"].span.withConfig({
displayName: "useHighlightText__StyledHiglightedText",
componentId: "sc-13agf6o-0"
})(["background-color:var(--color-primary-200);"]);
StyledHiglightedText.displayName = "StyledHiglightedText";
var useHighlightText = function useHighlightText(text, searchBy) {
var matchCase = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
var textComparator = text;
var searchByComparator = searchBy;
if (!text) return;
if (!matchCase) {
textComparator = text.toLowerCase();
searchByComparator = searchBy.toLowerCase();
}
if (searchBy && textComparator && textComparator.indexOf(searchByComparator) >= 0) {
var beforeHighlighted = text.substring(0, textComparator.indexOf(searchByComparator));
var highLighted = text.substring(textComparator.indexOf(searchByComparator), textComparator.indexOf(searchByComparator) + searchBy.length);
var afterHighlighted = text.substring(textComparator.indexOf(searchByComparator) + searchBy.length);
return /*#__PURE__*/React__default["default"].createElement(React.Fragment, null, beforeHighlighted.replace(/ /g, "\u00a0"), /*#__PURE__*/React__default["default"].createElement(StyledHiglightedText, {
className: "c-option--text__highlight"
}, highLighted.replace(/ /g, "\u00a0")), afterHighlighted.replace(/ /g, "\u00a0"));
}
return text;
};
var highlightText = useHighlightText;
var Option = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var id = _ref.id,
name = _ref.name,
_ref$tooltip = _ref.tooltip,
tooltip = _ref$tooltip === void 0 ? "" : _ref$tooltip,
hover = _ref.hover,
className = _ref.className,
renderOption = _ref.renderOption,
onMouseEnter = _ref.onMouseEnter,
_ref$onClick = _ref.onClick,
onClick = _ref$onClick === void 0 ? function () {
return null;
} : _ref$onClick;
var handleOnMouseEnter = React.useCallback(function () {
if (onMouseEnter) {
onMouseEnter(id);
}
}, [onMouseEnter, id]);
return /*#__PURE__*/React__default["default"].createElement(StyledOption, {
ref: hover ? ref : null,
title: tooltip ? tooltip : name,
onMouseEnter: handleOnMouseEnter,
onTouchStart: handleOnMouseEnter,
className: classNames__default["default"]("c-option", className),
hover: hover,
onClick: onClick
}, renderOption ? renderOption : name);
});
Option.displayName = "Option";
var StyledOptionGroupLi = styled__default["default"].li.withConfig({
displayName: "Styles__StyledOptionGroupLi",
componentId: "sc-16v5afu-0"
})(["flex-direction:column;cursor:pointer;"]);
var StyledOptionGroup = styled__default["default"].div.withConfig({
displayName: "Styles__StyledOptionGroup",
componentId: "sc-16v5afu-1"
})(["", " ", " ", ""], {
"userSelect": "none"
}, FontStyle, BoxSizingStyle);
StyledOptionGroup.displayName = "StyledOptionGroup";
var StyledOptionGroupHeader = styled__default["default"].div.withConfig({
displayName: "Styles__StyledOptionGroupHeader",
componentId: "sc-16v5afu-2"
})(["height:28px;display:flex;justify-content:space-between;align-items:center;padding:0 16px;margin:6px 0;*{margin:auto 0;}"]);
StyledOptionGroupHeader.displayName = "StyledOptionGroupHeader";
var StyledOptionGroupHeaderName = styled__default["default"](Body2).withConfig({
displayName: "Styles__StyledOptionGroupHeaderName",
componentId: "sc-16v5afu-3"
})(["padding-right:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"]);
StyledOptionGroupHeaderName.displayName = "StyledOptionGroupHeaderName";
var StyledOptionGroupOption = styled__default["default"].div.withConfig({
displayName: "Styles__StyledOptionGroupOption",
componentId: "sc-16v5afu-4"
})(["", ""], function (props) {
return props.hover && styled.css(["background-color:var(--color-theme-200);"]);
});
StyledOptionGroupOption.displayName = "StyledOptionGroupOption";
var OptionGroup = function OptionGroup(_ref) {
var id = _ref.id,
name = _ref.name,
options = _ref.options,
type = _ref.type,
hover = _ref.hover,
checked = _ref.checked,
onChange = _ref.onChange,
setHover = _ref.setHover,
optionGroupClassName = _ref.optionGroupClassName,
_ref$mixedOptions = _ref.mixedOptions,
mixedOptions = _ref$mixedOptions === void 0 ? [] : _ref$mixedOptions;
React.useEffect(function () {
if (hover === id && type !== "single") {
var _document$getElementB;
(_document$getElementB = document.getElementById("".concat(id))) === null || _document$getElementB === void 0 || _document$getElementB.focus();
}
}, [hover, type, id]);
var isAllOptionsChecked = React.useMemo(function () {
return options.every(function (option) {
return checked.includes(option.id);
});
}, [options, checked]);
var handleHover = React.useCallback(function () {
if (setHover) {
setHover(type === "single" ? undefined : id);
}
}, [setHover, type, id]);
var allOptionValues = React.useMemo(function () {
return options.map(function (option) {
return option.id;
});
}, [options]);
var isMixed = React.useMemo(function () {
return (options.some(function (option) {
return checked.includes(option.id);
}) || mixedOptions.some(function (item) {
return allOptionValues.includes(item);
})) && !isAllOptionsChecked;
}, [allOptionValues, checked, isAllOptionsChecked, mixedOptions, options]);
var handleClick = React.useCallback(function (e) {
e.stopPropagation();
e.preventDefault();
if (onChange) {
if (isAllOptionsChecked) {
onChange(checked.filter(function (i) {
return allOptionValues.includes(i) === false;
}));
} else {
var values = [...checked, ...allOptionValues];
var unique = values.filter(function (item, pos) {
return values.indexOf(item) === pos;
});
onChange(unique);
}
}
}, [allOptionValues, checked, isAllOptionsChecked, onChange]);
return /*#__PURE__*/React__default["default"].createElement(StyledOptionGroupLi, {
key: id,
className: classNames__default["default"]("c-option-group", optionGroupClassName),
onClick: handleClick
}, /*#__PURE__*/React__default["default"].createElement(StyledOptionGroup, {
key: id
}, /*#__PURE__*/React__default["default"].createElement(StyledOptionGroupOption, {
onMouseEnter: handleHover,
hover: hover === id && type === "multiple"
}, /*#__PURE__*/React__default["default"].createElement(StyledOptionGroupHeader, null, /*#__PURE__*/React__default["default"].createElement(StyledOptionGroupHeaderName, {
weight: "bold"
}, name), type === "multiple" && /*#__PURE__*/React__default["default"].createElement(Checkbox, {
id: "".concat(id),
checked: isAllOptionsChecked,
mixed: isMixed,
onChange: handleClick,
type: "checkbox"
})))));
};
OptionGroup.displayName = "OptionGroup";
function isOptionGroup(item) {
return item.options !== undefined;
}
var Autocomplete = function Autocomplete(_ref) {
var type = _ref.type,
_ref$options = _ref.options,
options = _ref$options === void 0 ? [] : _ref$options,
inputEl = _ref.inputEl,
_ref$selected = _ref.selected,
selected = _ref$selected === void 0 ? [] : _ref$selected,
emptyValue = _ref.emptyValue,
noResultText = _ref.noResultText,
_ref$renderOption = _ref.renderOption,
renderOption = _ref$renderOption === void 0 ? function (option) {
return option === null || option === void 0 ? void 0 : option.name;
} : _ref$renderOption,
defaultValue = _ref.defaultValue,
_ref$sortDirection = _ref.sortDirection,
sortDirection = _ref$sortDirection === void 0 ? "asc" : _ref$sortDirection,
handleChange = _ref.handleChange,
optionClassName = _ref.optionClassName,
handleEmptyAction = _ref.handleEmptyAction,
disabledInternalSort = _ref.disabledInternalSort,
AutocompleteClassName = _ref.AutocompleteClassName,
handleDefaultOptionChange = _ref.handleDefaultOptionChange,
preselectDefaultValue = _ref.preselectDefaultValue,
_ref$keepSameOptionsO = _ref.keepSameOptionsOrder,
keepSameOptionsOrder = _ref$keepSameOptionsO === void 0 ? false : _ref$keepSameOptionsO,
_ref$autoHeightMax = _ref.autoHeightMax,
autoHeightMax = _ref$autoHeightMax === void 0 ? 340 : _ref$autoHeightMax,
clearInputOnSelect = _ref.clearInputOnSelect,
_ref$mixedOptions = _ref.mixedOptions,
mixedOptions = _ref$mixedOptions === void 0 ? [] : _ref$mixedOptions,
filterCriteria = _ref.filterCriteria,
disableVirtualization = _ref.disableVirtualization;
var listContainerRef = React.useRef(null);
var itemRef = React.useRef(null);
var selectedOptions = React.useMemo(function () {
if (Array.isArray(selected)) {
return selected;
}
return [selected];
}, [selected]);
var handleSort = React.useCallback(function (opts) {
var _opts$;
if (keepSameOptionsOrder) {
return opts;
}
var isGrouped = Array.isArray((_opts$ = opts[0]) === null || _opts$ === void 0 ? void 0 : _opts$.options);
var sortOptions = function sortOptions(a, b) {
var aSelected = selectedOptions.includes(a.id);
var bSelected = selectedOptions.includes(b.id);
var aMixed = mixedOptions.includes(a.id);
var bMixed = mixedOptions.includes(b.id);
if (aSelected && !bSelected) {
return -1;
}
if (!aSelected && bSelected) {
return 1;
}
if (aMixed && !bMixed) {
return -1;
}
if (!aMixed && bMixed) {
return 1;
}
return 0;
};
if (isGrouped) {
return opts.map(function (group) {
var sortedGroupOptions = group.options.sort(sortOptions);
return _objectSpread2(_objectSpread2({}, group), {}, {
options: sortedGroupOptions
});
});
} else {
return opts.sort(sortOptions);
}
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[mixedOptions, selectedOptions]);
var sortList = React.useCallback(function (options) {
var _options$;
if (disabledInternalSort) {
return handleSort([...options]);
}
var isGrouped = Array.isArray((_options$ = options[0]) === null || _options$ === void 0 ? void 0 : _options$.options);
if (isGrouped) {
var sortedOptions = options.map(function (group) {
var sortedGroupOptions = group.options.sort(function (a, b) {
return sortDirection === "asc" ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name);
});
return _objectSpread2(_objectSpread2({}, group), {}, {
options: handleSort(sortedGroupOptions)
});
});
return handleSort(sortedOptions);
} else {
var _sortedOptions = options.sort(function (a, b) {
return sortDirection === "asc" ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name);
});
return handleSort(_sortedOptions);
}
}, [sortDirection, disabledInternalSort, handleSort]);
var _useState = React.useState(function () {
return sortList(options);
}),
_useState2 = _slicedToArray(_useState, 2),
sortedList = _useState2[0],
setSortedList = _useState2[1];
React.useEffect(function () {
setSortedList(sortList(options));
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [options]);
var _useState3 = React.useState({
item: undefined,
by: undefined
}),
_useState4 = _slicedToArray(_useState3, 2),
hover = _useState4[0],
setHover = _useState4[1];
var _useState5 = React.useState(""),
_useState6 = _slicedToArray(_useState5, 2),
filter = _useState6[0],
setFilter = _useState6[1];
var handleEmpty = React.useCallback(function (e) {
if (e && e.button !== 0) {
return;
}
if (handleEmptyAction) {
var _inputEl$current;
inputEl === null || inputEl === void 0 || (_inputEl$current = inputEl.current) === null || _inputEl$current === void 0 || _inputEl$current.focus();
setFilter("");
handleEmptyAction(filter);
}
}, [filter, handleEmptyAction, inputEl]);
var onAddNewMouseEnter = React.useCallback(function () {
return setHover({
item: "addNew",
by: "mouse"
});
}, []);
var showAddNew = React.useMemo(function () {
return !!(emptyValue && filter.trim() && options.every(function (option) {
if (isOptionGroup(option)) {
return option.options.every(function (v) {
return v.name.toLowerCase() !== filter.trim().toLowerCase();
});
}
return option.name.toLowerCase() !== filter.trim().toLowerCase();
}));
}, [emptyValue, filter, options]);
var filterOptions = React.useCallback(function (options, filter) {
var trimmedFilter = filter.trim();
var isGrouped = options[0] && isOptionGroup(options[0]);
var matchesFilter = function matchesFilter(option) {
var nameMatch = option.name.toLowerCase().includes(trimmedFilter.toLowerCase());
if (filterCriteria && trimmedFilter) {
return nameMatch || filterCriteria(option, trimmedFilter);
}
return nameMatch;
};
if (isGrouped) {
var hovered = false;
return options.reduce(function (acc, groupedOption) {
var filteredOptions = groupedOption.options.filter(matchesFilter);
if (filteredOptions.length > 0) {
if (!hovered && filter) {
setHover({
item: filteredOptions[0].id,
by: "keyboard"
});
}
hovered = true;
return [...acc, _objectSpread2(_objectSpread2({}, groupedOption), {}, {
options: filteredOptions
})];
}
return [...acc];
}, []);
} else {
var filteredOptions = options.filter(matchesFilter);
if (filter && filteredOptions.length > 0) {
setHover({
item: filteredOptions[0].id,
by: "keyboard"
});
}
if (filteredOptions.length === 0 && emptyValue) {
setHover({
item: "addNew",
by: "keyboard"
});
}
return filteredOptions;
}
}, [emptyValue, filterCriteria]);
var list = React.useMemo(function () {
return filterOptions(sortedList, filter);
}, [filter, filterOptions, sortedList]);
var showDefaultOption = React.useMemo(function () {
return !!defaultValue && !filter;
}, [defaultValue, filter]);
var flatOptions = React.useMemo(function () {
var options = list.reduce(function (acc, option) {
if (!isOptionGroup(option)) {
return [...acc, option];
}
return [...acc, ...option.options];
}, []);
return filterOptions(options, filter);
}, [filter, filterOptions, list]);
var showNoResultCondition = React.useMemo(function () {
return noResultText && !showAddNew && list.length < 1 && (defaultValue && filter || !defaultValue);
}, [noResultText, showAddNew, list.length, defaultValue, filter]);
var virtualItems = React.useMemo(function () {
var items = [];
if (showDefaultOption) {
items.push({
type: "default",
id: "default"
});
}
list.forEach(function (item, index) {
if (isOptionGroup(item)) {
items.push({
type: "group",
id: item.id,
item
});
item.options.forEach(function (option) {
items.push({
type: "option",
id: option.id,
item: option,
index
});
});
} else {
items.push({
type: "option",
id: item.id,
item,
index
});
}
});
if (showNoResultCondition) {
items.push({
type: "noResult",
id: "noResult"
});
}
if (showAddNew) {
items.push({
type: "addNew",
id: "addNew"
});
}
return items;
}, [list, showDefaultOption, showNoResultCondition, showAddNew]);
var shouldUseVirtualization = !disableVirtualization && virtualItems.length > 40;
var rowVirtualizer = reactVirtual.useVirtualizer({
count: virtualItems.length,
getScrollElement: function getScrollElement() {
return listContainerRef.current;
},
estimateSize: function estimateSize() {
return 28;
},
overscan: 5,
gap: 4
});
var handleInputChange = React.useCallback(function (e) {
if (e.target && !(e.key === "ArrowDown") && !(e.key === "ArrowUp") && !(e.key === "Enter")) {
setFilter(e.target.value);
}
}, []);
var handleHoverCallback = React.useCallback(function (e) {
setHover({
item: e,
by: "mouse"
});
}, []);
var toggleSelected = React.useCallback(function (id) {
var result;
if (id !== null) {
if (type === "multiple") {
if (selectedOptions.includes(id)) {
result = selectedOptions.filter(function (_id) {
return _id !== id;
});
} else {
result = [...selectedOptions, id];
}
} else {
result = id;
}
if (clearInputOnSelect && inputEl !== null && inputEl !== void 0 && inputEl.current) {
inputEl.current.value = "";
inputEl.current.dispatchEvent(new Event("change", {
bubbles: true
}));
}
setFilter("");
} else {
if (typeof handleDefaultOptionChange === "function") {
handleDefaultOptionChange();
return;
}
}
if (typeof handleChange === "function") {
handleChange(result);
}
}, [clearInputOnSelect, handleChange, handleDefaultOptionChange, inputEl, selectedOptions, type]);
var handleMouseEnter = React.useCallback(function (e) {
if (e === undefined || e === null) {
return setHover({
item: null,
by: "mouse"
});
}
setHover({
item: e,
by: "mouse"
});
}, []);
var handleClick = React.useCallback(function (e) {
e.preventDefault();
toggleSelected(hover.item);
}, [toggleSelected, hover]);
var handleRenderOption = React.useCallback(function (item, index) {
if (isOptionGroup(item)) {
return /*#__PURE__*/React__default["default"].createElement(OptionGroup, {
checked: selectedOptions,
name: item.name,
tooltip: item.tooltip,
key: item.id,
setHover: handleHoverCallback,
id: item.id,
hover: hover.item,
options: item.options,
renderOptions: handleRenderOption,
type: type,
onChange: handleChange,
filter: filter,
mixedOptions: mixedOptions
});
}
return /*#__PURE__*/React__default["default"].createElement(Option, {
name: item.name,
ref: hover.item === item.id ? itemRef : null,
key: index,
tooltip: item.tooltip,
onMouseEnter: handleMouseEnter,
onClick: handleClick,
id: item.id,
hover: item.id === hover.item,
className: optionClassName,
renderOption: renderOption(_objectSpread2(_objectSpread2({}, item), {}, {
name: highlightText(item.name, filter)
}), {
id: "option_".concat(item.id),
checked: selectedOptions && selectedOptions.includes(item.id),
hover: hover.item === item.id,
onChange: function onChange() {
return null;
}
})
});
}, [handleClick, handleMouseEnter, hover.item, optionClassName, renderOption, filter, selectedOptions, handleHoverCallback, type, handleChange, mixedOptions]);
var handleOnMouseLeave = React.useCallback(function () {
setHover({
item: undefined,
by: "mouse"
});
}, []);
React.useEffect(function () {
if (hover.by === "keyboard" && hover.item !== undefined) {
var index = virtualItems.findIndex(function (item) {
return item.id === hover.item;
});
if (index !== -1) {
rowVirtualizer.scrollToIndex(index, {
align: "center"
});
}
}
}, [hover, rowVirtualizer, virtualItems]);
var handleOnKeyDown = React.useCallback(function (e) {
if (e.key === "Enter") {
e.preventDefault();
if (hover.item === undefined && filter === "") {
return;
}
if (hover.item === "addNew") {
handleEmpty(null);
return;
}
if (hover.item === null && handleDefaultOptionChange) {
handleDefaultOptionChange();
return;
}
if (typeof hover.item !== "undefined" || hover.item !== null) {
toggleSelected(hover.item);
setFilter("");
}
return;
}
setHover({
item: handleKeyboardMovement(e, hover.item, flatOptions, showAddNew, showDefaultOption),
by: "keyboard"
});
}, [filter, flatOptions, toggleSelected, handleDefaultOptionChange, handleEmpty, hover, showAddNew, showDefaultOption]);
React.useEffect(function () {
var _inputEl$current2;
var listenerTarget = (_inputEl$current2 = inputEl === null || inputEl === void 0 ? void 0 : inputEl.current) !== null && _inputEl$current2 !== void 0 ? _inputEl$current2 : document;
listenerTarget.addEventListener("input", handleInputChange);
listenerTarget.addEventListener("keydown", handleOnKeyDown);
return function () {
listenerTarget.removeEventListener("input", handleInputChange);
listenerTarget.removeEventListener("keydown", handleOnKeyDown);
};
}, [handleInputChange, handleOnKeyDown, inputEl]);
var isDefaultOptionSelected = React.useCallback(function () {
if (preselectDefaultValue) {
return selectedOptions.length < 1 || selectedOptions[0] === "";
} else {
return selectedOptions[0] === null || selectedOptions.length === flatOptions.length;
}
}, [flatOptions.length, preselectDefaultValue, selectedOptions]);
var renderVirtualItem = React.useCallback(function (virtualItem, index) {
switch (virtualItem.type) {
case "default":
return /*#__PURE__*/React__default["default"].createElement(Option, {
name: String(defaultValue),
ref: hover.item === null ? itemRef : null,
hover: hover.item === null,
onMouseEnter: handleMouseEnter,
onClick: function onClick(e) {
e.preventDefault();
toggleSelected(null);
},
renderOption: renderOption({
name: defaultValue,
id: null
}, {
checked: isDefaultOptionSelected(),
hover: hover.item === null,
onChange: function onChange() {
return null;
}
})
});
case "group":
if (!virtualItem.item || !isOptionGroup(virtualItem.item)) return null;
return /*#__PURE__*/React__default["default"].createElement(OptionGroup, {
checked: selectedOptions,
name: virtualItem.item.name,
tooltip: virtualItem.item.tooltip,
key: virtualItem.item.id,
setHover: handleHoverCallback,
id: virtualItem.item.id,
hover: hover.item,
options: virtualItem.item.options,
renderOptions: handleRenderOption,
type: type,
onChange: handleChange,
filter: filter,
mixedOptions: mixedOptions
});
case "option":
if (!virtualItem.item || isOptionGroup(virtualItem.item)) return null;
return /*#__PURE__*/React__default["default"].createElement(Option, {
name: virtualItem.item.name,
ref: hover.item === virtualItem.id ? itemRef : null,
key: index,
tooltip: virtualItem.item.tooltip,
onMouseEnter: function onMouseEnter() {
return handleMouseEnter(virtualItem.id);
},
onClick: handleClick,
id: virtualItem.id,
hover: virtualItem.id === hover.item,
className: optionClassName,
renderOption: renderOption(_objectSpread2(_objectSpread2({}, virtualItem.item), {}, {
name: highlightText(virtualItem.item.name, filter)
}), {
id: "option_".concat(virtualItem.id),
checked: selectedOptions && selectedOptions.includes(virtualItem.id),
hover: hover.item === virtualItem.id,
onChange: function onChange() {
return null;
}
})
});
case "noResult":
return /*#__PURE__*/React__default["default"].createElement(_StyledStyledOption, null, noResultText);
case "addNew":
return /*#__PURE__*/React__default["default"].createElement(StyledAutocompleteNewItem, {
ref: hover.item === "addNew" ? itemRef : null,
key: "emptyValue",
hover: hover.item === "addNew",
onMouseDown: handleEmpty,
onMouseEnter: onAddNewMouseEnter
}, emptyValue);
default:
return null;
}
}, [defaultValue, hover.item, handleMouseEnter, renderOption, isDefaultOptionSelected, selectedOptions, handleHoverCallback, handleRenderOption, type, handleChange, filter, mixedOptions, handleClick, optionClassName, noResultText, handleEmpty, onAddNewMouseEnter, emptyValue, toggleSelected]);
return /*#__PURE__*/React__default["default"].createElement(StyledAutocompleteScrollShadow, {
className: AutocompleteClassName,
$isHidden: !defaultValue && !emptyValue && !noResultText && list.length < 1
}, function (_ref2) {
var _onScroll = _ref2.onScroll;
return /*#__PURE__*/React__default["default"].createElement(StyledAutocompleteBody, {
key: "body",
onMouseLeave: handleOnMouseLeave
}, /*#__PURE__*/React__default["default"].createElement("div", {
ref: listContainerRef,
style: {
height: "".concat(Math.min(rowVirtualizer.getTotalSize() + 12, autoHeightMax), "px"),
overflow: "auto"
},
onScroll: function onScroll(e) {
if (_onScroll) _onScroll(e);
}
}, /*#__PURE__*/React__default["default"].createElement("div", {
style: {
height: "".concat(rowVirtualizer.getTotalSize(), "px"),
width: "100%",
position: "relative"
}
}, shouldUseVirtualization ? rowVirtualizer.getVirtualItems().map(function (virtualRow) {
var item = virtualItems[virtualRow.index];
return /*#__PURE__*/React__default["default"].createElement("div", {
key: virtualRow.index,
"data-index": virtualRow.index,
style: {
position: "absolute",
top: 0,
left: 0,
width: "100%",
transform: "translateY(".concat(virtualRow.start, "px)")
}
}, renderVirtualItem(item, virtualRow.index));
}) : virtualItems.map(function (item, index) {
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
key: index
}, renderVirtualItem(item, index));
}))));
});
};
Autocomplete.displayName = "Autocomplete";
var _StyledStyledOption = styled__default["default"](StyledOption).withConfig({
displayName: "Autocomplete___StyledStyledOption",
componentId: "sc-9x4q7e-0"
})(["cursor:auto"]);
var _excluded$M = ["type", "mode", "target", "options", "selected", "mixed", "position", "onChange", "placeholder", "emptyAction", "disableSearch", "forceCloseMenu", "selectClassName", "keepSameOptionsOrder", "onSelectOpen", "onSelectClose", "renderOption", "handleDefaultOptionChange", "preselectDefaultValue", "startAdornment", "endAdornment", "focusInput", "disableVirtualization"];
var Select = function Select(_ref) {
var _ref$type = _ref.type,
type = _ref$type === void 0 ? "single" : _ref$type,
mode = _ref.mode,
target = _ref.target,
options = _ref.options,
_ref$selected = _ref.selected,
selected = _ref$selected === void 0 ? [] : _ref$selected,
_ref$mixed = _ref.mixed,
mixed = _ref$mixed === void 0 ? [] : _ref$mixed,
_ref$position = _ref.position,
position = _ref$position === void 0 ? "bottom-start" : _ref$position,
_ref$onChange = _ref.onChange,
onChange = _ref$onChange === void 0 ? function () {
return null;
} : _ref$onChange,
placeholder = _ref.placeholder,
_ref$emptyAction = _ref.emptyAction,
emptyAction = _ref$emptyAction === void 0 ? function () {
return null;
} : _ref$emptyAction,
_ref$disableSearch = _ref.disableSearch,
disableSearch = _ref$disableSearch === void 0 ? false : _ref$disableSearch,
forceCloseMenu = _ref.forceCloseMenu,
selectClassName = _ref.selectClassName,
_ref$keepSameOptionsO = _ref.keepSameOptionsOrder,
keepSameOptionsOrder = _ref$keepSameOptionsO === void 0 ? false : _ref$keepSameOptionsO,
onSelectOpen = _ref.onSelectOpen,
onSelectClose = _ref.onSelectClose,
renderOption = _ref.renderOption,
handleDefaultOptionChange = _ref.handleDefaultOptionChange,
_ref$preselectDefault = _ref.preselectDefaultValue,
preselectDefaultValue = _ref$preselectDefault === void 0 ? type === "single" : _ref$preselectDefault,
startAdornment = _ref.startAdornment,
endAdornment = _ref.endAdornment,
_ref$focusInput = _ref.focusInput,
focusInput = _ref$focusInput === void 0 ? false : _ref$focusInput,
disableVirtualization = _ref.disableVirtualization,
prop = _objectWithoutProperties(_ref, _excluded$M);
if (disableSearch && (startAdornment || endAdornment)) {
console.warn("Adornments are not visible when search bar is hidden");
}
var childNode = React.useRef();
var elementRef = React.useRef(null);
var handleRef = useForkRef(childNode, elementRef);
var Tag = !target ? "div" : Menu;
var formRef = React.useRef(null);
var _useState = React.useState(false),
_useState2 = _slicedToArray(_useState, 2),
open = _useState2[0],
setOpen = _useState2[1];
var selectedOptions = React.useMemo(function () {
return selected instanceof Array ? selected : [selected];
}, [selected]);
var selectOptions = React.useMemo(function () {
if (!options) {
return [];
}
return options;
}, [options]);
var allOptionValues = React.useMemo(function () {
return selectOptions.reduce(function (acc, option) {
if (!isOptionGroup(option)) {
return [...acc, option.id];
}
var allGroupOptions = option.options.map(function (option) {
return option.id;
});
return [...acc, ...allGroupOptions];
}, []);
}, [selectOptions]);
var mixedOptions = React.useRef(type === "multiple" && mixed.length ? mixed : []);
var removeFromMixedOptions = React.useCallback(function (idsToRemove) {
mixedOptions.current = mixedOptions.current.filter(function (mixedOption) {
return !idsToRemove.includes(mixedOption);
});
}, []);
var isAllOptionsChecked = React.useMemo(function () {
return allOptionValues.every(function (option) {
return selectedOptions.includes(option);
});
}, [allOptionValues, selectedOptions]);
var someOptionsChecked = React.useMemo(function () {
return allOptionValues.some(function (option) {
return selectedOptions.includes(option);
});
}, [allOptionValues, selectedOptions]);
React.useEffect(function () {
if (open && target || !target && focusInput) {
var _childNode$current;
childNode === null || childNode === void 0 || (_childNode$current = childNode.current) === null || _childNode$current === void 0 || _childNode$current.focus();
}
}, [focusInput, open, target]);
var handleChange = React.useCallback(function (selectedValue) {
if (forceCloseMenu) {
if (typeof onSelectClose === "function") onSelectClose();
setOpen(false);
}
if (selectedValue !== undefined && selectedValue !== selected && !(selectedValue instanceof Array && selectedValue.includes(undefined))) {
onChange(selectedValue);
type === "multiple" && mixedOptions.current.length && removeFromMixedOptions(selectedValue);
}
}, [forceCloseMenu, selected, onSelectClose, onChange, type, removeFromMixedOptions]);
var onClose = React.useCallback(function () {
setOpen(false);
if (onSelectClose) {
onSelectClose();
}
}, [onSelectClose]);
var onOpen = React.useCallback(function () {
setOpen(true);
if (onSelectOpen) {
onSelectOpen();
}
}, [onSelectOpen]);
var props = React.useMemo(function () {
if (target) {
return {
menuClassName: classNames__default["default"]("c-select", selectClassName),
onClose,
onOpen,
target,
mode,
open,
position,
onPopperOpen: function onPopperOpen() {
var _elementRef$current;
return elementRef === null || elementRef === void 0 || (_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 ? void 0 : _elementRef$current.focus();
}
};
}
return {
className: classNames__default["default"]("c-select", selectClassName)
};
}, [target, selectClassName, onClose, onOpen, mode, open, position]);
var handleEmptyAction = React.useCallback(function (value) {
var _formRef$current;
emptyAction(value);
if (forceCloseMenu) {
setOpen(false);
}
(_formRef$current = formRef.current) === null || _formRef$current === void 0 || _formRef$current.reset();
}, [emptyAction, forceCloseMenu]);
var handleDefaultOptionChangeCallback = React.useCallback(function () {
if (type === "multiple") {
if (selectedOptions.length === allOptionValues.length) {
if (typeof handleDefaultOptionChange === "function") {
handleDefaultOptionChange();
} else {
onChange([]);
}
} else {
if (typeof handleDefaultOptionChange === "function") {
handleDefaultOptionChange();
} else {
onChange(allOptionValues);
}
}
} else {
if (typeof handleDefaultOptionChange === "function") {
handleDefaultOptionChange();
} else {
onChange("");
}
}
if (forceCloseMenu) {
setOpen(false);
}
}, [onChange, type, forceCloseMenu, selectedOptions.length, allOptionValues, handleDefaultOptionChange]);
var handleRenderOption = React.useCallback(function (option, props) {
if (typeof renderOption === "function") {
return renderOption(option, props);
}
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(OptionContent, {
imageUrl: option.image,
color: option.color,
textColor: option.textColor,
name: option.name,
additionalInfo: option.additionalInfo
}), option.id === null ? type === "multiple" ? /*#__PURE__*/React__default["default"].createElement(StyledCheckbox, _extends({
checked: isAllOptionsChecked,
mixed: someOptionsChecked && !isAllOptionsChecked
}, props)) : /*#__PURE__*/React__default["default"].createElement(StyledRadioButton, _extends({
checked: selectedOptions.length < 1 || !selectedOptions[0]
}, props)) : type === "multiple" ? /*#__PURE__*/React__default["default"].createElement(StyledCheckbox, _extends({
mixed: mixedOptions.current.includes(option.id)
}, props)) : /*#__PURE__*/React__default["default"].createElement(StyledRadioButton, props));
}, [isAllOptionsChecked, renderOption, type, someOptionsChecked, selectedOptions]);
return /*#__PURE__*/React__default["default"].createElement(Tag, props, /*#__PURE__*/React__default["default"].createElement("div", null, !disableSearch ? /*#__PURE__*/React__default["default"].createElement(StyledSelectForm, {
ref: formRef
}, startAdornment ? /*#__PURE__*/React__default["default"].createElement(StyledStartAdornment, null, startAdornment) : null, /*#__PURE__*/React__default["default"].createElement(StyledSelectInput, {
ref: handleRef,
placeholder: placeholder
}), endAdornment ? /*#__PURE__*/React__default["default"].createElement(StyledEndAdornment, null, endAdornment) : null) : null, /*#__PURE__*/React__default["default"].createElement(Autocomplete, _extends({}, prop, {
clearInputOnSelect: true,
inputEl: childNode,
handleEmptyAction: handleEmptyAction,
selected: selected,
handleChange: handleChange,
renderOption: handleRenderOption,
options: options,
mixedOptions: mixedOptions.current,
handleDefaultOptionChange: handleDefaultOptionChangeCallback,
type: type,
preselectDefaultValue: preselectDefaultValue,
keepSameOptionsOrder: keepSameOptionsOrder,
disableVirtualization: disableVirtualization
}))));
};
Select.displayName = "Select";
var Nav = function Nav(_ref) {
var _dimensions$width, _childDimensions$widt;
var children = _ref.children,
_ref$alignment = _ref.alignment,
alignment = _ref$alignment === void 0 ? "left" : _ref$alignment,
onSelect = _ref.onSelect,
className = _ref.className,
_ref$role = _ref.role,
role = _ref$role === void 0 ? "bold" : _ref$role,
targetId = _ref.targetId;
var _useState = React.useState(0),
_useState2 = _slicedToArray(_useState, 2),
active = _useState2[0],
setActive = _useState2[1];
var _useState3 = React.useState(false),
_useState4 = _slicedToArray(_useState3, 2),
moreOpened = _useState4[0],
setMoreOpened = _useState4[1];
var _useState5 = React.useState("inline"),
_useState6 = _slicedToArray(_useState5, 2),
type = _useState6[0],
setType = _useState6[1];
var setMoreOpen = React.useCallback(function () {
return setMoreOpened(true);
}, []);
var setMoreClose = React.useCallback(function () {
return setMoreOpened(false);
}, []);
var navItemNames = React.useMemo(function () {
return children ? React.Children.toArray(children).map(function (item) {
var _item$props;
return item === null || item === void 0 || (_item$props = item.props) === null || _item$props === void 0 ? void 0 : _item$props.name;
}) : [];
}, [children]);
var allOptions = React.useMemo(function () {
return navItemNames === null || navItemNames === void 0 ? void 0 : navItemNames.map(function (name, index) {
return {
id: index,
name: name
};
});
}, [navItemNames]);
var navRef = React.useRef(null);
var wrapRef = React.useRef(null);
var dimensions = useResizeObserver$1(wrapRef);
var childDimensions = useResizeObserver$1(navRef);
var parentWidth = (_dimensions$width = dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) !== null && _dimensions$width !== void 0 ? _dimensions$width : 0;
var childWidth = (_childDimensions$widt = childDimensions === null || childDimensions === void 0 ? void 0 : childDimensions.width) !== null && _childDimensions$widt !== void 0 ? _childDimensions$widt : 0;
var _useState7 = React.useState(childWidth),
_useState8 = _slicedToArray(_useState7, 2),
childrenWidth = _useState8[0],
setChildrenWidth = _useState8[1];
React.useLayoutEffect(function () {
if (type === "inline") setChildrenWidth(childWidth);
}, [childWidth, type]);
var onClick = React.useCallback(function (e) {
if (e.metaKey || e.ctrlKey) {
return;
}
if (e.target && e.currentTarget.dataset.index && !e.currentTarget.dataset.disabled) {
var _index = Number(e.currentTarget.dataset.index);
setActive(_index);
if (onSelect) {
onSelect(_index);
}
}
}, [onSelect]);
var onMoreOptionClick = React.useCallback(function (id) {
setActive(id);
if (onSelect) {
onSelect(id);
}
}, [onSelect]);
React.useMemo(function () {
React.Children.forEach(children, function (child, index) {
if (child && child.props.active) {
setActive(index);
}
});
}, [children]);
var navAsSelect = React.useMemo(function () {
return /*#__PURE__*/React__default["default"].createElement(StyledNavAsSelect, {
id: targetId,
$active: true
}, /*#__PURE__*/React__default["default"].createElement("span", null, navItemNames[active]), /*#__PURE__*/React__default["default"].createElement(ExpandSingle, {
expanded: moreOpened,
fill: "currentColor"
}));
}, [active, moreOpened, navItemNames, targetId]);
React.useEffect(function () {
if (!navRef.current || !wrapRef.current) return;
if (!childrenWidth || !parentWidth) return;
if (childrenWidth < parentWidth) {
setType("inline");
} else {
setType("dropdown");
}
}, [childrenWidth, parentWidth]);
if (!children) return;
return /*#__PURE__*/React__default["default"].createElement(StyledNav, {
className: classNames__default["default"]("c-nav", className),
$align: alignment,
$role: role,
ref: wrapRef
}, /*#__PURE__*/React__default["default"].createElement(StyledNavList, {
ref: navRef
}, type === "inline" && React.Children.toArray(children).map(function (child, index) {
var element = child;
return /*#__PURE__*/React.cloneElement(element, {
active: index === active,
role,
onClick,
"data-index": index,
"data-disabled": element.props.disabled
});
}), type === "dropdown" ? /*#__PURE__*/React__default["default"].createElement(StyledNavListItemMore, {
name: navItemNames[active],
role: role
}, /*#__PURE__*/React__default["default"].createElement(Select, {
selected: active,
target: navAsSelect,
disabledInternalSort: true,
options: allOptions,
type: "single",
mode: "normal",
forceCloseMenu: true,
disableSearch: true,
keepSameOptionsOrder: true,
onChange: onMoreOptionClick,
onSelectOpen: setMoreOpen,
onSelectClose: setMoreClose
})) : null));
};
Nav.displayName = "Nav";
var _excluded$L = ["children", "as", "disablePointerEvents"];
var InputAdornmentBase = styled__default["default"].div.withConfig({
displayName: "InputAdornment__InputAdornmentBase",
componentId: "sc-1xfjx1z-0"
})(["", " ", ""], {
"marginLeft": "0.25rem",
"marginRight": "0.25rem",
"display": "flex",
"alignItems": "center",
"gap": "0.5rem"
}, function (props) {
return props.$disablePointerEvents && styled.css(["", ""], {
"pointerEvents": "none"
});
});
var InputAdornment = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var children = _ref.children,
as = _ref.as,
disablePointerEvents = _ref.disablePointerEvents,
rest = _objectWithoutProperties(_ref, _excluded$L);
var Component = as || "div";
return /*#__PURE__*/React__default["default"].createElement(InputAdornmentBase, _extends({}, rest, {
as: Component,
$disablePointerEvents: disablePointerEvents,
ref: ref
}), children);
});
InputAdornment.displayName = "InputAdornment";
var useInputHours = function useInputHours(_ref, inputRef) {
var value = _ref.value,
withLeadingZero = _ref.withLeadingZero,
onSave = _ref.onSave,
_ref$validation = _ref.validation,
validation = _ref$validation === void 0 ? validateTimeInput : _ref$validation,
allowEmptyValue = _ref.allowEmptyValue,
onCancel = _ref.onCancel,
_ref$minuteIncrement = _ref.minuteIncrement,
minuteIncrement = _ref$minuteIncrement === void 0 ? 1 : _ref$minuteIncrement,
incrementOnlySelected = _ref.incrementOnlySelected,
onEnterKeyPress = _ref.onEnterKeyPress,
onChange = _ref.onChange,
onClick = _ref.onClick;
var _useState = React.useState(function () {
return formatHours(value, withLeadingZero);
}),
_useState2 = _slicedToArray(_useState, 2),
currentValue = _useState2[0],
setCurrentValue = _useState2[1];
var _useState3 = React.useState(function () {
return formatHours(value, withLeadingZero);
}),
_useState4 = _slicedToArray(_useState3, 2),
prevValue = _useState4[0],
setPrevValue = _useState4[1];
var escapeRef = React.useRef(false);
var handleBlur = React.useCallback(function (e) {
if (escapeRef.current) {
setCurrentValue(prevValue);
} else {
if (e.target.value.trim().length > 0 && prevValue !== e.target.value) {
var _value = formatHours(e.target.value, withLeadingZero);
setPrevValue(_value);
setCurrentValue(_value);
typeof onSave === "function" && onSave(e);
} else {
if (!allowEmptyValue) {
setCurrentValue(prevValue);
typeof onCancel === "function" && onCancel(e);
} else {
if (typeof onSave === "function" && prevValue !== e.target.value) {
onSave(e);
} else {
typeof onCancel === "function" && onCancel(e);
}
}
}
}
}, [allowEmptyValue, onCancel, onSave, prevValue, withLeadingZero]);
var handleIncrementDecrement = React.useCallback(function (increment) {
if (inputRef.current) {
var selectionStart = inputRef.current.selectionStart;
if (selectionStart !== null) {
var dotsIndex = currentValue.indexOf(":");
var _currentValue$split$m = currentValue.split(":").map(Number),
_currentValue$split$m2 = _slicedToArray(_currentValue$split$m, 2),
hours = _currentValue$split$m2[0],
minutes = _currentValue$split$m2[1];
var newHours = hours;
var newMinutes = minutes;
if (selectionStart < dotsIndex) {
if (increment) {
newHours += 1;
} else {
newHours -= 1;
if (newHours < 0) newHours = 0;
}
} else if (selectionStart > dotsIndex) {
if (increment) {
newMinutes += minuteIncrement;
if (newMinutes > 59) {
newMinutes = 0;
if (!incrementOnlySelected) newHours += 1;
}
} else {
if (newMinutes >= minuteIncrement || newMinutes === 0) {
newMinutes -= minuteIncrement;
if (newMinutes < 0 && newHours > 0) {
newMinutes = 60 - minuteIncrement;
if (!incrementOnlySelected) newHours -= 1;
}
if (newHours < 0) {
newHours = 0;
}
} else {
newMinutes = 0;
}
}
}
var newMinutesString = newMinutes < 10 ? "0".concat(newMinutes) : newMinutes;
var newHoursString = withLeadingZero && newHours < 10 ? "0".concat(newHours) : newHours;
var newValue = "".concat(newHoursString, ":").concat(newMinutesString);
if (validation(newValue, withLeadingZero)) {
setCurrentValue(newValue);
if (onChange) onChange(newValue);
requestAnimationFrame(function () {
var _inputRef$current;
var newDotsIndex = newValue.indexOf(":");
var isHoursSelected = selectionStart < newDotsIndex;
var newSelectionStart = isHoursSelected ? 0 : newDotsIndex + 1;
var selectionEnd = isHoursSelected ? newDotsIndex : newValue.length;
(_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.setSelectionRange(newSelectionStart, selectionEnd);
});
}
}
}
}, [currentValue, incrementOnlySelected, inputRef, minuteIncrement, onChange, validation, withLeadingZero]);
var handleKeyDown = React.useCallback(function (e) {
if (e.key === "Enter") {
e.target.blur();
if (typeof onEnterKeyPress === "function") onEnterKeyPress(e.target.value);
}
if (e.key === "ArrowLeft") {
return;
}
if (e.key === "ArrowRight") {
return;
}
if (e.key === "Escape") {
escapeRef.current = true;
e.target.blur();
typeof onCancel === "function" && onCancel(e);
escapeRef.current = false;
}
if (e.key === "Backspace") {
return;
}
if (e.key === "Delete") {
return;
}
if ((e.metaKey || e.ctrlKey) && e.key === "a") {
var _inputRef$current2;
(_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.select();
return;
}
var input = e.target;
var start = input.selectionStart;
var end = input.selectionEnd;
var currentValue = input.value;
if (e.key === "Tab") {
if (start !== end) {
if (e.shiftKey) {
var newDotsIndex = currentValue.indexOf(":");
var isMinutesSelected = start > newDotsIndex;
if (isMinutesSelected) {
var _inputRef$current3;
e.preventDefault();
(_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 || _inputRef$current3.setSelectionRange(0, newDotsIndex);
}
} else {
var _newDotsIndex = currentValue.indexOf(":");
var isHoursSelected = start < _newDotsIndex;
if (isHoursSelected) {
var _inputRef$current4;
e.preventDefault();
(_inputRef$current4 = inputRef.current) === null || _inputRef$current4 === void 0 || _inputRef$current4.setSelectionRange(_newDotsIndex + 1, currentValue.length);
}
}
}
return;
}
if (start !== end) {
if (e.key === "ArrowUp") {
handleIncrementDecrement(true);
return;
}
if (e.key === "ArrowDown") {
handleIncrementDecrement(false);
return;
}
var newValue = currentValue.substring(0, start) + e.key + currentValue.substring(end);
if (!validation(newValue, withLeadingZero)) {
e.preventDefault();
return;
}
} else {
var _newValue = currentValue.substring(0, start) + e.key + currentValue.substring(end);
if (!validation(_newValue, withLeadingZero)) {
e.preventDefault();
return;
}
}
}, [handleIncrementDecrement, inputRef, onCancel, onEnterKeyPress, validation, withLeadingZero]);
var handleChange = React.useCallback(function (e) {
setCurrentValue(e.target.value);
if (onChange) onChange(e.target.value);
}, [onChange]);
var handleClick = React.useCallback(function (e) {
var _inputRef$current5;
var selectionStart = (_inputRef$current5 = inputRef.current) === null || _inputRef$current5 === void 0 ? void 0 : _inputRef$current5.selectionStart;
if (inputRef.current && currentValue && currentValue.length > 0 && typeof selectionStart === "number") {
var dotsIndex = currentValue.indexOf(":");
if (selectionStart < dotsIndex) {
var _inputRef$current6;
(_inputRef$current6 = inputRef.current) === null || _inputRef$current6 === void 0 || _inputRef$current6.setSelectionRange(0, dotsIndex);
} else if (selectionStart >= dotsIndex) {
var _inputRef$current7;
(_inputRef$current7 = inputRef.current) === null || _inputRef$current7 === void 0 || _inputRef$current7.setSelectionRange(dotsIndex + 1, currentValue.length);
}
}
if (typeof onClick === "function") {
onClick(e);
}
}, [currentValue, inputRef, onClick]);
var handleDoubleClick = React.useCallback(function () {
if (inputRef.current) {
var _inputRef$current8;
(_inputRef$current8 = inputRef.current) === null || _inputRef$current8 === void 0 || _inputRef$current8.select();
}
}, [inputRef]);
var inputProps = React.useMemo(function () {
return {
value: currentValue,
onBlur: handleBlur,
onKeyDown: handleKeyDown,
onChange: handleChange,
onClick: handleClick,
onDoubleClick: handleDoubleClick
};
}, [currentValue, handleBlur, handleChange, handleClick, handleDoubleClick, handleKeyDown]);
return {
inputProps,
setCurrentValue,
setPrevValue
};
};
var _excluded$K = ["value", "onCancel", "onSave", "onEnterKeyPress", "allowEmptyValue", "withLeadingZero", "validation", "incrementOnlySelected", "minuteIncrement", "className", "onChange", "onClick", "align"];
var InputHours = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var defaultValue = _ref.value,
onCancel = _ref.onCancel,
onSave = _ref.onSave,
externalEnterKeyPress = _ref.onEnterKeyPress,
allowEmptyValue = _ref.allowEmptyValue,
_ref$withLeadingZero = _ref.withLeadingZero,
withLeadingZero = _ref$withLeadingZero === void 0 ? true : _ref$withLeadingZero,
_ref$validation = _ref.validation,
validation = _ref$validation === void 0 ? validateTimeInput : _ref$validation,
_ref$incrementOnlySel = _ref.incrementOnlySelected,
incrementOnlySelected = _ref$incrementOnlySel === void 0 ? false : _ref$incrementOnlySel,
_ref$minuteIncrement = _ref.minuteIncrement,
minuteIncrement = _ref$minuteIncrement === void 0 ? 1 : _ref$minuteIncrement,
className = _ref.className,
externalOnChange = _ref.onChange,
externalOnClick = _ref.onClick,
_ref$align = _ref.align,
align = _ref$align === void 0 ? "center" : _ref$align,
rest = _objectWithoutProperties(_ref, _excluded$K);
var inputRef = React.useRef(null);
var handleRef = useForkRef(ref, inputRef);
var _useInputHours = useInputHours({
value: defaultValue,
withLeadingZero,
onSave,
validation,
allowEmptyValue,
onCancel,
minuteIncrement,
incrementOnlySelected,
onEnterKeyPress: externalEnterKeyPress,
onChange: externalOnChange,
onClick: externalOnClick
}, inputRef),
inputProps = _useInputHours.inputProps;
var value = inputProps.value,
onBlur = inputProps.onBlur,
onKeyDown = inputProps.onKeyDown,
onChange = inputProps.onChange,
onClick = inputProps.onClick,
onDoubleClick = inputProps.onDoubleClick;
return /*#__PURE__*/React__default["default"].createElement(Input, _extends({}, rest, {
align: align,
className: className,
placeholder: withLeadingZero ? "00:00" : "0:00",
value: value,
onBlur: onBlur,
onKeyDown: onKeyDown,
onChange: onChange,
onClick: onClick,
onDoubleClick: onDoubleClick,
ref: handleRef,
autoComplete: "off"
}));
});
InputHours.displayName = "InputHours";
var _excluded$J = ["decimalLength", "decimalSeparator", "disableAbbreviation", "disabled", "disableMacros", "invalid", "step", "thousandSeparator", "value", "onCancel", "onSave", "onEnterKeyPress", "allowEmptyValue", "onChange", "onClick", "limit", "placeholder", "trimDecimals", "min", "max", "onBlur", "update", "shortenThreshold"];
var InputNumber = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var _ref$decimalLength = _ref.decimalLength,
decimalLength = _ref$decimalLength === void 0 ? 2 : _ref$decimalLength,
_ref$decimalSeparator = _ref.decimalSeparator,
decimalSeparator = _ref$decimalSeparator === void 0 ? "." : _ref$decimalSeparator,
_ref$disableAbbreviat = _ref.disableAbbreviation,
disableAbbreviation = _ref$disableAbbreviat === void 0 ? false : _ref$disableAbbreviat,
disabled = _ref.disabled,
_ref$disableMacros = _ref.disableMacros,
disableMacros = _ref$disableMacros === void 0 ? false : _ref$disableMacros,
invalid = _ref.invalid,
_ref$step = _ref.step,
step = _ref$step === void 0 ? 1 : _ref$step,
_ref$thousandSeparato = _ref.thousandSeparator,
thousandSeparator = _ref$thousandSeparato === void 0 ? "," : _ref$thousandSeparato,
defaultValue = _ref.value,
onCancel = _ref.onCancel,
onSave = _ref.onSave,
externalEnterKeyPress = _ref.onEnterKeyPress,
allowEmptyValue = _ref.allowEmptyValue,
externalOnChange = _ref.onChange,
externalOnClick = _ref.onClick,
limit = _ref.limit,
placeholder = _ref.placeholder,
_ref$trimDecimals = _ref.trimDecimals,
trimDecimals = _ref$trimDecimals === void 0 ? true : _ref$trimDecimals,
min = _ref.min,
max = _ref.max,
externalOnBlur = _ref.onBlur,
_ref$update = _ref.update,
update = _ref$update === void 0 ? false : _ref$update,
_ref$shortenThreshold = _ref.shortenThreshold,
shortenThreshold = _ref$shortenThreshold === void 0 ? 1000 : _ref$shortenThreshold,
rest = _objectWithoutProperties(_ref, _excluded$J);
var inputRef = React.useRef(null);
var handleRef = useForkRef(ref, inputRef);
var _useInputNumber = useInputNumber({
decimalLength,
decimalSeparator,
disableAbbreviation,
disableMacros,
step,
thousandSeparator,
onEnterKeyPress: externalEnterKeyPress,
onChange: externalOnChange,
onClick: externalOnClick,
value: defaultValue,
onCancel,
onSave,
allowEmptyValue,
limit,
trimDecimals,
min,
max,
onBlur: externalOnBlur,
update,
shortenThreshold
}, inputRef),
value = _useInputNumber.value,
onBlur = _useInputNumber.onBlur,
onKeyDown = _useInputNumber.onKeyDown,
onChange = _useInputNumber.onChange,
onClick = _useInputNumber.onClick,
onFocus = _useInputNumber.onFocus,
onDoubleClick = _useInputNumber.onDoubleClick;
return /*#__PURE__*/React__default["default"].createElement(Input, _extends({}, rest, {
ref: handleRef,
placeholder: placeholder,
value: value,
type: "text",
disabled: disabled,
invalid: invalid,
onChange: onChange,
onBlur: onBlur,
onKeyDown: onKeyDown,
onClick: onClick,
onDoubleClick: onDoubleClick,
onFocus: onFocus,
"aria-placeholder": placeholder,
"aria-disabled": disabled,
"aria-invalid": invalid
}));
});
InputNumber.displayName = "InputNumber";
var _excluded$I = ["currency", "size", "startAdornment", "endAdornment", "disabled"];
var InputCurrency = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var currency = _ref.currency,
size = _ref.size,
startAdornment = _ref.startAdornment,
endAdornment = _ref.endAdornment,
disabled = _ref.disabled,
rest = _objectWithoutProperties(_ref, _excluded$I);
var variant = React.useMemo(function () {
if (size === "biggest") {
return "Header 2";
}
if (size === "big") {
return "Body 1";
}
return "Body 2";
}, [size]);
var weight = React.useMemo(function () {
return size === "biggest" ? "bold" : "regular";
}, [size]);
return /*#__PURE__*/React__default["default"].createElement(InputNumber, _extends({
size: size,
align: "right",
ref: ref,
disabled: disabled,
shortenThreshold: 10000,
endAdornment: endAdornment && /*#__PURE__*/React__default["default"].createElement(InputAdornment, {
disablePointerEvents: disabled
}, endAdornment)
}, rest, {
startAdornment: /*#__PURE__*/React__default["default"].createElement(InputAdornment, {
disablePointerEvents: disabled
}, /*#__PURE__*/React__default["default"].createElement(Typography, {
variant: variant,
weight: weight
}, currency), startAdornment)
}));
});
InputCurrency.displayName = "InputCurrency";
var _excluded$H = ["size", "disabled", "show", "hideControl", "showTooltipText", "hideTooltipText", "value", "validation", "errorMessage", "invalid", "onChange"];
var transform = {
biggest: "big",
regular: "small",
big: "medium"
};
var StypedEyeIconSmall = styled__default["default"](EyeSmallIcon$1).withConfig({
displayName: "InputPassword__StypedEyeIconSmall",
componentId: "sc-v930fj-0"
})(["", ""], {
"cursor": "pointer"
});
var StypedEyeOffIconSmall = styled__default["default"](EyeOffSmallIcon$1).withConfig({
displayName: "InputPassword__StypedEyeOffIconSmall",
componentId: "sc-v930fj-1"
})(["", ""], {
"cursor": "pointer"
});
var StypedEyeIcon = styled__default["default"](EyeIcon$1).withConfig({
displayName: "InputPassword__StypedEyeIcon",
componentId: "sc-v930fj-2"
})(["", ""], {
"cursor": "pointer"
});
var StypedEyeOffIcon = styled__default["default"](EyeOffIcon$1).withConfig({
displayName: "InputPassword__StypedEyeOffIcon",
componentId: "sc-v930fj-3"
})(["", ""], {
"cursor": "pointer"
});
var StyledInfoIcon = styled__default["default"](InfoIcon$1).withConfig({
displayName: "InputPassword__StyledInfoIcon",
componentId: "sc-v930fj-4"
})(["", ""], {
"marginRight": "0.25rem",
"cursor": "help",
"fill": "var(--red-alert)"
});
var StyledInfoSmallIcon = styled__default["default"](InfoSmallIcon$1).withConfig({
displayName: "InputPassword__StyledInfoSmallIcon",
componentId: "sc-v930fj-5"
})(["", ""], {
"marginRight": "0.25rem",
"cursor": "help",
"fill": "var(--red-alert)"
});
var StyledInputPasswordWrapper = styled__default["default"].div.withConfig({
displayName: "InputPassword__StyledInputPasswordWrapper",
componentId: "sc-v930fj-6"
})(["width:fit-content;display:flex;flex-direction:column;"]);
var InputPasswordAdornment = function InputPasswordAdornment(_ref) {
var invalid = _ref.invalid,
errorMessage = _ref.errorMessage,
size = _ref.size,
hideControl = _ref.hideControl,
showText = _ref.showText,
hideTooltipText = _ref.hideTooltipText,
showTooltipText = _ref.showTooltipText,
disabled = _ref.disabled,
toggleShow = _ref.toggleShow;
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, invalid && errorMessage && /*#__PURE__*/React__default["default"].createElement(Tooltip, {
title: errorMessage
}, size === "regular" ? /*#__PURE__*/React__default["default"].createElement(StyledInfoSmallIcon, null) : /*#__PURE__*/React__default["default"].createElement(StyledInfoIcon, null)), !hideControl && /*#__PURE__*/React__default["default"].createElement(Tooltip, {
title: showText ? hideTooltipText : showTooltipText
}, /*#__PURE__*/React__default["default"].createElement(IconButton, {
variant: "text gray",
type: "button",
size: transform[size],
disabled: disabled,
onClick: toggleShow,
style: {
flexShrink: 0
}
}, showText ? size === "regular" ? /*#__PURE__*/React__default["default"].createElement(StypedEyeOffIconSmall, null) : /*#__PURE__*/React__default["default"].createElement(StypedEyeOffIcon, null) : size === "regular" ? /*#__PURE__*/React__default["default"].createElement(StypedEyeIconSmall, null) : /*#__PURE__*/React__default["default"].createElement(StypedEyeIcon, null))));
};
var InputPassword = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
var _validation$levels;
var _ref2$size = _ref2.size,
size = _ref2$size === void 0 ? "regular" : _ref2$size,
disabled = _ref2.disabled,
_ref2$show = _ref2.show,
show = _ref2$show === void 0 ? false : _ref2$show,
hideControl = _ref2.hideControl,
_ref2$showTooltipText = _ref2.showTooltipText,
showTooltipText = _ref2$showTooltipText === void 0 ? "Show" : _ref2$showTooltipText,
_ref2$hideTooltipText = _ref2.hideTooltipText,
hideTooltipText = _ref2$hideTooltipText === void 0 ? "Hide" : _ref2$hideTooltipText,
_ref2$value = _ref2.value,
defaultValue = _ref2$value === void 0 ? "" : _ref2$value,
validation = _ref2.validation,
errorMessage = _ref2.errorMessage,
invalid = _ref2.invalid,
onChange = _ref2.onChange,
rest = _objectWithoutProperties(_ref2, _excluded$H);
var inputRef = React.useRef(null);
var handleRef = useForkRef(ref, inputRef);
var _useState = React.useState(show),
_useState2 = _slicedToArray(_useState, 2),
showText = _useState2[0],
setShowText = _useState2[1];
var _useState3 = React.useState(0),
_useState4 = _slicedToArray(_useState3, 2),
strength = _useState4[0],
setStrength = _useState4[1];
var _useState5 = React.useState(function () {
return defaultValue;
}),
_useState6 = _slicedToArray(_useState5, 2),
value = _useState6[0],
setValue = _useState6[1];
var handleChange = React.useCallback(function (e) {
setValue(e.target.value);
typeof (validation === null || validation === void 0 ? void 0 : validation.getStrength) === "function" && setStrength(validation.getStrength(e.target.value));
typeof onChange === "function" && onChange(e.target.value);
}, [onChange, validation]);
var toggleShow = React.useCallback(function () {
var _inputRef$current;
(_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
setShowText(function (prevState) {
return !prevState;
});
}, []);
React.useEffect(function () {
setShowText(show);
}, [show]);
if (validation !== null && validation !== void 0 && validation.levels && validation !== null && validation !== void 0 && validation.getStrength && typeof (validation === null || validation === void 0 ? void 0 : validation.getStrength) === "function") {
if (validation.levels.length !== 5) {
console.warn("Levels length must be exactly 5.");
}
if (typeof validation.getStrength("test") !== "number") {
console.warn("getStrength must be a function that accepts a string and returns a number.");
}
}
return /*#__PURE__*/React__default["default"].createElement(StyledInputPasswordWrapper, null, /*#__PURE__*/React__default["default"].createElement(Input, _extends({}, rest, {
ref: handleRef,
size: size,
value: value,
disabled: disabled,
type: showText ? "text" : "password",
onChange: handleChange,
invalid: invalid,
"data-testid": "InputPassword",
endAdornment: /*#__PURE__*/React__default["default"].createElement(InputPasswordAdornment, {
invalid: invalid,
errorMessage: errorMessage,
size: size,
hideControl: hideControl,
showText: showText,
hideTooltipText: hideTooltipText,
showTooltipText: showTooltipText,
disabled: disabled,
toggleShow: toggleShow
})
})), (validation === null || validation === void 0 || (_validation$levels = validation.levels) === null || _validation$levels === void 0 ? void 0 : _validation$levels.length) === 5 && typeof (validation === null || validation === void 0 ? void 0 : validation.getStrength) === "function" && typeof (validation === null || validation === void 0 ? void 0 : validation.getStrength("test")) === "number" && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(StyledPasswordIndicatorWrapper, null, [...Array(4)].map(function (_, index) {
return /*#__PURE__*/React__default["default"].createElement(StyledPasswordIndicator, {
key: index,
$strength: strength,
$index: index,
"data-testid": strength >= index + 1 ? "active" : ""
});
})), /*#__PURE__*/React__default["default"].createElement(Caption1, {
align: "right",
color: "tertiary"
}, validation.levels[strength])));
});
InputPassword.displayName = "InputPassword";
var StyledButton = styled__default["default"].button.withConfig({
displayName: "Styles__StyledButton",
componentId: "sc-1tom9pu-0"
})(["border:none;margin:0;padding:0;width:auto;overflow:visible;cursor:pointer;background:transparent;outline:none;color:inherit;font:inherit;line-height:inherit;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;-webkit-appearance:none;&::-moz-focus-inner{border:0;padding:0;}"]);
StyledButton.displayName = "StyledButton";
var InputSelect = function InputSelect(_ref) {
var onChange = _ref.onChange,
size = _ref.size,
selected = _ref.selected,
options = _ref.options,
_ref$search = _ref.search,
search = _ref$search === void 0 ? false : _ref$search,
_ref$disabled = _ref.disabled,
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
_ref$disabledInternal = _ref.disabledInternalSort,
disabledInternalSort = _ref$disabledInternal === void 0 ? true : _ref$disabledInternal,
_ref$keepSameOptionsO = _ref.keepSameOptionsOrder,
keepSameOptionsOrder = _ref$keepSameOptionsO === void 0 ? true : _ref$keepSameOptionsO,
selectedLabel = _ref.selectedLabel,
renderOption = _ref.renderOption,
filterCriteria = _ref.filterCriteria;
return /*#__PURE__*/React__default["default"].createElement(Select, {
onChange: onChange,
forceCloseMenu: true,
disableSearch: !search,
target: /*#__PURE__*/React__default["default"].createElement(_StyledStyledButton, null, /*#__PURE__*/React__default["default"].createElement(StyledInputSelectTrigger, {
$disabled: disabled,
$size: size
}, selectedLabel ? selectedLabel : selected, size === "big" ? /*#__PURE__*/React__default["default"].createElement(ArrowDownIcon$1, {
fill: "var(--color-theme-700)"
}) : /*#__PURE__*/React__default["default"].createElement(ArrowDownSmallIcon$1, {
fill: "var(--color-theme-700)"
}))),
options: options,
disabledInternalSort: disabledInternalSort,
keepSameOptionsOrder: keepSameOptionsOrder,
selected: selected,
renderOption: renderOption,
filterCriteria: filterCriteria
});
};
var _StyledStyledButton = styled__default["default"](StyledButton).withConfig({
displayName: "InputSelect___StyledStyledButton",
componentId: "sc-1lmb5y-0"
})(["flex-shrink:0"]);
var _excluded$G = ["size", "disabled", "value", "onChange", "scheme"];
var defaultOptions = [{
id: "https://",
name: "https://"
}, {
id: "http://",
name: "http://"
}];
var InputUrl = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var _ref$size = _ref.size,
size = _ref$size === void 0 ? "regular" : _ref$size,
disabled = _ref.disabled,
_ref$value = _ref.value,
defaultValue = _ref$value === void 0 ? "" : _ref$value,
onChange = _ref.onChange,
scheme = _ref.scheme,
rest = _objectWithoutProperties(_ref, _excluded$G);
var inputRef = React.useRef(null);
var handleRef = useForkRef(ref, inputRef);
var options = React.useMemo(function () {
if (scheme && scheme.length > 0) {
if (Array.isArray(scheme)) {
return scheme.map(function (i) {
return {
id: i,
name: i
};
});
} else {
return [{
id: scheme,
name: scheme
}];
}
}
return defaultOptions;
}, [scheme]);
var _useState = React.useState(options[0].id),
_useState2 = _slicedToArray(_useState, 2),
prefix = _useState2[0],
setPrefix = _useState2[1];
var _useState3 = React.useState(""),
_useState4 = _slicedToArray(_useState3, 2),
value = _useState4[0],
setValue = _useState4[1];
var separatePrefixFromValue = function separatePrefixFromValue(fullValue) {
var newPrefix = prefix;
var newValue = fullValue;
options.forEach(function (option) {
if (fullValue.startsWith(option.id)) {
newPrefix = option.id;
newValue = fullValue.replace(option.id, "");
}
});
setValue(newValue);
return {
newPrefix,
newValue
};
};
React.useEffect(function () {
var _separatePrefixFromVa = separatePrefixFromValue(defaultValue),
newPrefix = _separatePrefixFromVa.newPrefix,
newValue = _separatePrefixFromVa.newValue;
setPrefix(newPrefix);
setValue(newValue);
// eslint-disable-next-line
}, [defaultValue]);
var handleChange = React.useCallback(function (e) {
var inputValue = e.target.value;
if (!inputValue.startsWith(prefix)) {
var _separatePrefixFromVa2 = separatePrefixFromValue(inputValue),
newPrefix = _separatePrefixFromVa2.newPrefix,
newValue = _separatePrefixFromVa2.newValue;
setPrefix(newPrefix);
setValue(newValue);
typeof onChange === "function" && onChange(newPrefix + newValue);
} else {
var _newValue = inputValue.replace(prefix, "");
setValue(_newValue);
typeof onChange === "function" && onChange(prefix + _newValue);
}
},
// eslint-disable-next-line
[onChange, prefix]);
var handleSelectChange = React.useCallback(function (val) {
setPrefix(val);
setTimeout(function () {
var _inputRef$current;
(_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
}, 200);
typeof onChange === "function" && onChange(val + value);
}, [onChange, value]);
var handlePaste = function handlePaste(e) {
e.preventDefault();
var paste = e.clipboardData.getData("text");
var _separatePrefixFromVa3 = separatePrefixFromValue(paste),
newPrefix = _separatePrefixFromVa3.newPrefix,
newValue = _separatePrefixFromVa3.newValue;
if (newPrefix !== prefix) {
setPrefix(newPrefix);
}
setValue(newValue);
if (typeof onChange === "function") {
onChange(newPrefix + newValue);
}
};
var startAdornmentComponent = React.useMemo(function () {
if (options.length > 1) {
return /*#__PURE__*/React__default["default"].createElement(InputSelect, {
key: prefix,
size: size,
onChange: handleSelectChange,
options: options,
selected: prefix,
disabled: disabled
});
} else {
return /*#__PURE__*/React__default["default"].createElement(StyledInputSelectTrigger, {
key: prefix,
$disabled: disabled,
$size: size
}, prefix);
}
}, [disabled, handleSelectChange, options, prefix, size]);
React.useEffect(function () {
if (options.length > 0) {
setPrefix(options[0].id);
}
}, [options]);
return /*#__PURE__*/React__default["default"].createElement(Input, _extends({}, rest, {
ref: handleRef,
size: size,
value: value,
disabled: disabled,
type: "text",
onPaste: handlePaste,
onChange: handleChange,
"data-testid": "InputUrl",
startAdornment: startAdornmentComponent
}));
});
InputUrl.displayName = "InputUrl";
var _excluded$F = ["size", "disabled", "value", "onChange", "defaultCountry"];
var renderOption$2 = function renderOption(option, data) {
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(StyledOptionWrapper, null, /*#__PURE__*/React__default["default"].createElement(StyledOptionFlag, null, countryExplorer.getCountryFlag(option.id)), /*#__PURE__*/React__default["default"].createElement(StyledOptionName, null, option.name)), /*#__PURE__*/React__default["default"].createElement(StyledOptionRowEnd, null, /*#__PURE__*/React__default["default"].createElement(StyledOptionCode, null, option.additionalInfo), /*#__PURE__*/React__default["default"].createElement(RadioButton, {
checked: data.checked,
onChange: data.onChange
})));
};
var InputPhone = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var _ref$size = _ref.size,
size = _ref$size === void 0 ? "regular" : _ref$size,
disabled = _ref.disabled,
_ref$value = _ref.value,
defaultValue = _ref$value === void 0 ? "" : _ref$value,
onChange = _ref.onChange,
_ref$defaultCountry = _ref.defaultCountry,
defaultCountry = _ref$defaultCountry === void 0 ? "US" : _ref$defaultCountry,
rest = _objectWithoutProperties(_ref, _excluded$F);
var inputRef = React.useRef(null);
var handleRef = useForkRef(ref, inputRef);
var _useState = React.useState(defaultCountry),
_useState2 = _slicedToArray(_useState, 2),
prefix = _useState2[0],
setPrefix = _useState2[1];
var _useState3 = React.useState(""),
_useState4 = _slicedToArray(_useState3, 2),
value = _useState4[0],
setValue = _useState4[1];
var options = countryExplorer.countriesArraySortedByName.map(function (country) {
return {
id: country.countryCode,
name: country.name,
additionalInfo: "+".concat(country.callingCode)
};
});
var separatePrefixFromValue = function separatePrefixFromValue(fullValue) {
var newPrefix = prefix;
var newValue = fullValue;
if (fullValue.startsWith("+") || fullValue.startsWith("00")) {
var prefixLength = fullValue.startsWith("+") ? 1 : 2;
var digits = fullValue.slice(prefixLength);
for (var i = digits.length; i >= 1; i--) {
var code = digits.slice(0, i);
if (countryExplorer.callingCodeToCountryCodeMap[code]) {
newPrefix = countryExplorer.callingCodeToCountryCodeMap[code];
var dialCode = countryExplorer.getCountryCallingCode(newPrefix);
newValue = fullValue.slice(prefixLength + dialCode.length);
break;
}
}
}
return {
newPrefix,
newValue
};
};
React.useEffect(function () {
var _separatePrefixFromVa = separatePrefixFromValue(defaultValue),
newPrefix = _separatePrefixFromVa.newPrefix,
newValue = _separatePrefixFromVa.newValue;
setPrefix(newPrefix);
setValue(newValue);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [defaultValue]);
var handleChange = React.useCallback(function (e) {
var inputValue = e.target.value;
if (/[^0-9+]/.test(inputValue)) {
return;
}
var _separatePrefixFromVa2 = separatePrefixFromValue(inputValue),
newPrefix = _separatePrefixFromVa2.newPrefix,
newValue = _separatePrefixFromVa2.newValue;
setPrefix(newPrefix);
setValue(newValue);
typeof onChange === "function" && onChange("+".concat(countryExplorer.getCountryCallingCode(newPrefix)).concat(newValue));
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[onChange, prefix]);
var handleSelectChange = function handleSelectChange(val) {
setPrefix(val);
setTimeout(function () {
var _inputRef$current;
(_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
}, 200);
typeof onChange === "function" && onChange("+".concat(countryExplorer.getCountryCallingCode(val)).concat(value));
};
var handlePaste = function handlePaste(e) {
e.preventDefault();
var paste = e.clipboardData.getData("text");
var filteredPaste = paste.replace(/[^0-9+]/g, "");
var inputElement = e.currentTarget;
var selectionStart = inputElement.selectionStart,
selectionEnd = inputElement.selectionEnd;
if (selectionStart !== null && selectionEnd !== null) {
var currentValue = inputElement.value;
var beforeSelection = currentValue.slice(0, selectionStart);
var afterSelection = currentValue.slice(selectionEnd);
var newValueAfterPaste = beforeSelection + filteredPaste + afterSelection;
var _separatePrefixFromVa3 = separatePrefixFromValue(newValueAfterPaste),
newPrefix = _separatePrefixFromVa3.newPrefix,
newValue = _separatePrefixFromVa3.newValue;
setPrefix(newPrefix);
setValue(newValue);
typeof onChange === "function" && onChange("+".concat(countryExplorer.getCountryCallingCode(newPrefix)).concat(newValue));
}
};
return /*#__PURE__*/React__default["default"].createElement(Input, _extends({}, rest, {
ref: handleRef,
size: size,
value: value,
disabled: disabled,
type: "text",
onPaste: handlePaste,
onChange: handleChange,
"data-testid": "InputPhone",
startAdornment: /*#__PURE__*/React__default["default"].createElement(InputSelect, {
size: size,
onChange: handleSelectChange,
options: options,
selected: prefix,
filterCriteria: function filterCriteria(option, filter) {
var _option$additionalInf;
return !!(option !== null && option !== void 0 && (_option$additionalInf = option.additionalInfo) !== null && _option$additionalInf !== void 0 && _option$additionalInf.toLowerCase().includes(filter));
},
selectedLabel: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(StyledFlagTriggerLabel, {
$size: size
}, countryExplorer.getCountryFlag(prefix)), "+", countryExplorer.getCountryCallingCode(prefix)),
disabled: disabled,
keepSameOptionsOrder: false,
search: true,
renderOption: renderOption$2
})
}));
});
InputPhone.displayName = "InputPhone";
var StyledComboBoxInput = styled__default["default"](Input).withConfig({
displayName: "Styles__StyledComboBoxInput",
componentId: "sc-5qvkpb-0"
})(["overflow:hidden;text-overflow:ellipsis;width:100%;"]);
StyledComboBoxInput.displayName = "StyledComboBoxInput";
var StyledIconDefaults = styled.css(["flex-shrink:0;cursor:pointer;"]);
var StyledComboBoxCollapseExpandSingleIcon = styled__default["default"](CollapseExpandSingleIcon$1).withConfig({
displayName: "Styles__StyledComboBoxCollapseExpandSingleIcon",
componentId: "sc-5qvkpb-1"
})(["", ";color:var(--color-theme-600);transform:rotate(180deg);", ""], StyledIconDefaults, function (props) {
return props.$open && styled.css(["transform:rotate(0deg);"]);
});
StyledComboBoxCollapseExpandSingleIcon.displayName = "StyledComboBoxCollapseExpandSingleIcon";
var StyledComboBoxCloseSmallIcon = styled__default["default"](CloseSmallIcon$1).withConfig({
displayName: "Styles__StyledComboBoxCloseSmallIcon",
componentId: "sc-5qvkpb-2"
})(["", ";opacity:0;transition-property:all;transition-duration:0.2s;transition-delay:0.5s;", ":hover,", ":hover &{opacity:1;transition-delay:0s;}"], StyledIconDefaults, StyledComboBoxInput, StyledInputWrapper);
StyledComboBoxCloseSmallIcon.displayName = "StyledComboBoxCloseSmallIcon";
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) {
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({
displayName: "Styles__StyledChipWrapper",
componentId: "sc-5qvkpb-4"
})(["", ";", ";", ";", " ", " ", ""], {
"display": "flex"
}, {
"gap": "0.25rem"
}, {
"flex": "1 1 0%"
}, function (_ref2) {
var $open = _ref2.$open;
return !$open && styled.css(["overflow:hidden;"]);
}, function (_ref3) {
var $autoSize = _ref3.$autoSize;
return $autoSize === "auto" && styled.css(["", ";", ";"], {
"flexWrap": "wrap"
}, {
"width": "100%"
});
}, function (_ref4) {
var $autoSize = _ref4.$autoSize;
return $autoSize !== "auto" && styled.css(["align-items:center;"]);
});
StyledChipWrapper.displayName = "StyledChipWrapper";
var ConditionalWrapper = function ConditionalWrapper(_ref) {
var condition = _ref.condition,
wrap = _ref.wrap,
children = _ref.children;
return condition ? wrap(children) : children;
};
var useIsFirstRender = function useIsFirstRender() {
var isFirst = React.useRef(true);
if (isFirst.current) {
isFirst.current = false;
return true;
}
return isFirst.current;
};
function useOnClickOutside(ref, handler) {
React.useEffect(function () {
var listener = function listener(event) {
// Do nothing if clicking ref's element or descendent elements
if (!ref.current || ref.current.contains(event.target)) {
return;
}
handler(event);
};
document.addEventListener("mousedown", listener);
document.addEventListener("touchstart", listener);
return function () {
document.removeEventListener("mousedown", listener);
document.removeEventListener("touchstart", listener);
};
},
// Add ref and handler to effect dependencies
// It's worth noting that because passed in handler is a new ...
// ... function on every render that will cause this effect ...
// ... callback/cleanup to run every render. It's not a big deal ...
// ... but to optimize you can wrap handler in useCallback before ...
// ... passing it into this hook.
[ref, handler]);
}
var _excluded$E = ["children", "type"];
var Trigger = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var children = _ref.children,
_ref$type = _ref.type,
type = _ref$type === void 0 ? "button" : _ref$type,
rest = _objectWithoutProperties(_ref, _excluded$E);
return /*#__PURE__*/React__default["default"].createElement(StyledButton, _extends({
ref: ref,
role: "button",
type: type
}, rest), children);
});
Trigger.displayName = "Trigger";
// prettier-ignore
var ChipContainer = styled__default["default"].div.withConfig({
displayName: "Styles__ChipContainer",
componentId: "sc-7s0bd1-0"
})(["align-items:center;border-radius:0.25rem;display:flex;height:1.5rem;max-width:220px;overflow:hidden;padding-left:0.375rem;", " ", " background-color:var(--color-theme-400);color:var(--color-theme-900);font-size:0.875rem;font-weight:400;letter-spacing:0.02em;line-height:1.375;", "{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}", " ", " ", " ", " ", " ", " ", ""], FontStyle, BoxSizingStyle, StyledTypography, function (_ref) {
var color = _ref.color;
return color && styled.css(["", "{color:", ";}"], StyledTypography, color);
}, function (_ref2) {
var backgroundColor = _ref2.backgroundColor;
return backgroundColor && styled.css(["background-color:", ";"], backgroundColor);
}, function (props) {
return props.showClose ? null : styled.css(["padding-right:0.375rem;"]);
}, function (props) {
return props.size === "regular" && styled.css(["height:24px;"]);
}, function (props) {
return props.size === "small" && styled.css(["height:18px;"]);
}, function (props) {
return props.size === "big" && styled.css(["height:30px;"]);
}, function (props) {
return props.size === "biggest" && styled.css(["height:40px;"]);
});
ChipContainer.displayName = "ChipContainer";
var ChipLabel = styled__default["default"].span.withConfig({
displayName: "Styles__ChipLabel",
componentId: "sc-7s0bd1-1"
})(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;"]);
ChipLabel.displayName = "ChipLabel";
var ChipTrigger = styled__default["default"](Trigger).withConfig({
displayName: "Styles__ChipTrigger",
componentId: "sc-7s0bd1-2"
})(["align-items:center;display:flex;justify-content:center;margin-left:0.125rem;&:hover{background-color:var(--color-theme-transparent-400);}", " ", " ", " ", ""], function (props) {
return props.size === "regular" && styled.css(["height:24px;width:24px;"]);
}, function (props) {
return props.size === "small" && styled.css(["height:18px;width:18px;"]);
}, function (props) {
return props.size === "big" && styled.css(["height:30px;width:30px;"]);
}, function (props) {
return props.size === "biggest" && styled.css(["height:40px;width:40px;"]);
});
ChipTrigger.displayName = "ChipTrigger";
var ChipCloseIcon = styled__default["default"](CloseSmallIcon$1).withConfig({
displayName: "Styles__ChipCloseIcon",
componentId: "sc-7s0bd1-3"
})(["color:var(--color-theme-700);"]);
ChipCloseIcon.displayName = "ChipCloseIcon";
var _excluded$D = ["startAdornment", "label", "onClose", "size", "color", "backgroundColor", "closeClassName", "typographyProps"];
var Chip = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var startAdornment = _ref.startAdornment,
label = _ref.label,
onClose = _ref.onClose,
_ref$size = _ref.size,
size = _ref$size === void 0 ? "regular" : _ref$size,
color = _ref.color,
backgroundColor = _ref.backgroundColor,
closeClassName = _ref.closeClassName,
typographyProps = _ref.typographyProps,
rest = _objectWithoutProperties(_ref, _excluded$D);
var showClose = typeof onClose === "function";
var variant = React.useMemo(function () {
switch (size) {
case "big":
return "Body 1";
case "biggest":
return "Body 1";
default:
return "Caption 1";
}
}, [size]);
return /*#__PURE__*/React__default["default"].createElement(ChipContainer, _extends({}, rest, {
ref: ref,
size: size,
showClose: showClose,
color: color,
backgroundColor: backgroundColor,
"data-testid": "chip-container"
}), startAdornment, /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
variant: variant,
"data-testid": "chip-typography",
weight: size === "biggest" ? "medium" : "regular"
}, typographyProps), label), showClose ? /*#__PURE__*/React__default["default"].createElement(ChipTrigger, {
size: size,
onClick: onClose,
className: closeClassName
}, /*#__PURE__*/React__default["default"].createElement(ChipCloseIcon, {
fill: color ? color : "currentColor"
})) : null);
});
Chip.displayName = "Chip";
var _excluded$C = ["options", "selected", "loading", "loadingText", "onChange", "onInputChange", "placeholder", "handleEmptyAction", "disabled", "size", "invalid", "type", "renderChip", "forceCloseMenu", "renderOption", "limitChips", "hiddenNumberText", "inPortal", "inputWrapperClassName", "scrollWrapper", "onClose", "onClear", "onDeselect", "defaultValue", "open", "onOpen", "triggerMode", "noResultText", "emptyValue", "disableVirtualization", "hideClearButton"];
var sizeMap = {
small: 18,
regular: 24,
big: 30,
biggest: 40
};
var ComboBox = function ComboBox(_ref) {
var _comboBoxRef$current2, _comboBoxRef$current3;
var _ref$options = _ref.options,
options = _ref$options === void 0 ? [] : _ref$options,
selected = _ref.selected,
_ref$loading = _ref.loading,
loading = _ref$loading === void 0 ? false : _ref$loading,
loadingText = _ref.loadingText,
onChange = _ref.onChange,
onInputChange = _ref.onInputChange,
placeholder = _ref.placeholder,
handleEmptyAction = _ref.handleEmptyAction,
_ref$disabled = _ref.disabled,
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
_ref$size = _ref.size,
size = _ref$size === void 0 ? "regular" : _ref$size,
_ref$invalid = _ref.invalid,
invalid = _ref$invalid === void 0 ? false : _ref$invalid,
_ref$type = _ref.type,
type = _ref$type === void 0 ? "single" : _ref$type,
renderChip = _ref.renderChip,
_ref$forceCloseMenu = _ref.forceCloseMenu,
forceCloseMenu = _ref$forceCloseMenu === void 0 ? type === "single" : _ref$forceCloseMenu,
renderOption = _ref.renderOption,
_ref$limitChips = _ref.limitChips,
limitChips = _ref$limitChips === void 0 ? 2 : _ref$limitChips,
hiddenNumberText = _ref.hiddenNumberText,
_ref$inPortal = _ref.inPortal,
inPortal = _ref$inPortal === void 0 ? false : _ref$inPortal,
inputWrapperClassName = _ref.inputWrapperClassName,
scrollWrapper = _ref.scrollWrapper,
onClose = _ref.onClose,
onClear = _ref.onClear,
onDeselect = _ref.onDeselect,
defaultValue = _ref.defaultValue,
_ref$open = _ref.open,
defaultOpen = _ref$open === void 0 ? false : _ref$open,
onOpen = _ref.onOpen,
triggerMode = _ref.triggerMode,
noResultText = _ref.noResultText,
emptyValue = _ref.emptyValue,
disableVirtualization = _ref.disableVirtualization,
_ref$hideClearButton = _ref.hideClearButton,
hideClearButton = _ref$hideClearButton === void 0 ? false : _ref$hideClearButton,
prop = _objectWithoutProperties(_ref, _excluded$C);
var selectedName = React.useMemo(function () {
var value = "";
if (!selected) {
return value;
}
options.map(function (v) {
if (v !== null && v !== void 0 && v.options) {
return v.options.find(function (q) {
if (q.id === selected) {
value = q.name;
return;
}
});
} else {
if (v.id === selected) {
value = v.name;
return;
}
}
});
return value;
}, [options, selected]);
var _useState = React.useState(selectedName),
_useState2 = _slicedToArray(_useState, 2),
value = _useState2[0],
setValue = _useState2[1];
var _useState3 = React.useState(false),
_useState4 = _slicedToArray(_useState3, 2),
focused = _useState4[0],
setFocused = _useState4[1];
var handleOnChange = React.useCallback(function (e) {
setValue(e.target.value);
onInputChange === null || onInputChange === void 0 || onInputChange(e.target.value);
}, [onInputChange]);
var childNode = React.useRef();
var elementRef = React.useRef(null);
var handleRef = useForkRef(childNode, elementRef);
var wrapperRef = React.useRef(null);
var chipWrapper = React.useRef(null);
var comboBoxRef = React.useRef(null);
var _useState5 = React.useState(defaultOpen),
_useState6 = _slicedToArray(_useState5, 2),
open = _useState6[0],
setOpen = _useState6[1];
var isFirstRender = useIsFirstRender();
useOnClickOutside(wrapperRef, function (e) {
var _comboBoxRef$current;
if (e.target && (_comboBoxRef$current = comboBoxRef.current) !== null && _comboBoxRef$current !== void 0 && _comboBoxRef$current.contains(e.target)) {
return;
}
setOpen(false);
});
var handleOnKeyDown = React.useCallback(function (e) {
if (e.key === "Escape" && open) {
setOpen(false);
setValue(selectedName);
e.stopPropagation();
}
if (e.key === "Enter" && type === "multiple") {
setValue("");
}
if (e.key === "Enter" && !open && focused) {
setOpen(true);
onOpen === null || onOpen === void 0 || onOpen();
}
}, [focused, onOpen, open, selectedName, type]);
React.useEffect(function () {
var _childNode$current, _childNode$current2;
open && (childNode === null || childNode === void 0 || (_childNode$current = childNode.current) === null || _childNode$current === void 0 ? void 0 : _childNode$current.focus());
!open && (childNode === null || childNode === void 0 || (_childNode$current2 = childNode.current) === null || _childNode$current2 === void 0 ? void 0 : _childNode$current2.blur());
}, [childNode, open]);
React.useEffect(function () {
setValue(selectedName);
}, [selectedName]);
React.useEffect(function () {
if (open !== defaultOpen) setOpen(defaultOpen);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [defaultOpen]);
React.useEffect(function () {
if (!open && !isFirstRender && !focused) {
if (typeof onClose === "function") {
onClose();
}
}
}, [focused, isFirstRender, onClose, open]);
var emptyAction = React.useCallback(function (v) {
handleEmptyAction === null || handleEmptyAction === void 0 || handleEmptyAction(v);
setOpen(false);
}, [handleEmptyAction]);
var handleChange = React.useCallback(function (selectedValue) {
if (selectedValue !== selected && typeof onChange === "function") {
onChange(selectedValue);
}
if (forceCloseMenu) {
setOpen(false);
}
}, [forceCloseMenu, onChange, selected]);
var handleOpen = React.useCallback(function () {
if (!disabled) {
setOpen(true);
onOpen === null || onOpen === void 0 || onOpen();
}
}, [disabled, onOpen]);
var handleRenderOption = React.useCallback(function (option, props) {
if (typeof renderOption === "function") {
return renderOption(option, props);
}
if (type === "multiple") {
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(OptionContent, {
imageUrl: option.image,
color: option.color,
textColor: option.textColor,
name: option.name
}), /*#__PURE__*/React__default["default"].createElement(Checkbox, props));
}
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(OptionContent, {
imageUrl: option.image,
color: option.color,
textColor: option.textColor,
name: option.name
}), /*#__PURE__*/React__default["default"].createElement(RadioButton, props));
}, [type, renderOption]);
var handleDeselect = React.useCallback(function (e) {
e.stopPropagation();
if (typeof onDeselect === "function") {
onDeselect();
} else if (type === "multiple") {
onChange === null || onChange === void 0 || onChange([]);
} else {
onChange === null || onChange === void 0 || onChange("");
}
onClear === null || onClear === void 0 || onClear();
setOpen(false);
}, [type, onChange, onClear, onDeselect]);
var handleMouseDown = React.useCallback(function (e) {
e.preventDefault();
}, []);
var handleBlur = React.useCallback(function () {
setValue(selectedName);
setFocused(!focused);
}, [focused, selectedName]);
var renderChipAdornment = React.useCallback(function (option, index) {
if (typeof renderChip === "function") {
return renderChip(option, index);
}
var avatarProps = {
size: 18
};
switch (size) {
case "big":
avatarProps.size = 22;
break;
case "small":
avatarProps.size = 14;
break;
}
var startAdornment = option.image ? /*#__PURE__*/React__default["default"].createElement(_StyledAvatar, _extends({
url: option.image
}, avatarProps, {
$_css: {
"marginTop": "0.125rem",
"marginBottom": "0.125rem"
},
$_css2: {
"marginRight": "0.125rem"
}
})) : undefined;
var onClose = function onClose(e) {
e.preventDefault();
e.stopPropagation();
if (Array.isArray(selected) && selected.includes(option.id)) {
if (typeof onChange === "function") {
var newSelected = selected.filter(function (item) {
return item !== option.id;
});
onChange(newSelected);
}
}
};
var showOnClose = true;
if (disabled) {
showOnClose = false;
}
if (option.color) {
showOnClose = false;
}
return /*#__PURE__*/React__default["default"].createElement(Chip, {
className: "c-combo-box-chip",
startAdornment: startAdornment,
label: option.name,
key: index,
backgroundColor: option.color,
color: option.chipColor,
onClose: showOnClose ? onClose : undefined,
size: size
});
}, [disabled, onChange, renderChip, selected, size]);
var autoSize = React.useMemo(function () {
if (type === "multiple" && open && Array.isArray(selected) && selected.length > 1) {
return "auto";
}
return size;
}, [open, selected, size, type]);
var startAdornment = React.useMemo(function () {
if (type === "multiple" && Array.isArray(selected) && selected.length > 0) {
var elements = [];
var total = 0;
options.forEach(function (option, index) {
var isGrouped = isOptionGroup(option);
if (selected.includes(option.id) && !isGrouped) {
total = total + 1;
elements.push(renderChipAdornment(option, index));
} else if (isGrouped) {
var groupedOptions = option.options.filter(function (o) {
return selected.includes(o.id);
});
total = total + groupedOptions.length;
if (groupedOptions.length > 0) {
groupedOptions.forEach(function (o, _index) {
elements.push(renderChipAdornment(o, "".concat(index, "_").concat(_index)));
});
}
}
});
var _hidden = 0;
if (!open && limitChips > 0 && elements.length > limitChips) {
_hidden = elements.splice(limitChips, elements.length - limitChips).length;
}
return /*#__PURE__*/React__default["default"].createElement(React.Fragment, null, elements, _hidden > 0 && /*#__PURE__*/React__default["default"].createElement(_StyledTypography$1, {
variant: size === "small" ? "Caption 1" : size === "regular" ? "Body 2" : "Body 1"
}, typeof hiddenNumberText === "function" ? hiddenNumberText(_hidden) : "+".concat(_hidden)));
}
if (type === "single" && selected) {
var optionItem;
options.forEach(function (option) {
if (isOptionGroup(option)) {
optionItem = option.options.find(function (child) {
return child.id === selected;
});
} else if (!optionItem && option.id === selected) {
optionItem = option;
}
});
if (optionItem && optionItem.image) {
var avatarSize = size === "big" ? 22 : size === "regular" ? 18 : 14;
if (Array.isArray(optionItem.image)) {
return /*#__PURE__*/React__default["default"].createElement(MultiAvatar, {
url: optionItem.image,
size: avatarSize
});
}
return /*#__PURE__*/React__default["default"].createElement(Avatar, {
url: optionItem.image,
size: avatarSize
});
}
}
return undefined;
}, [type, selected, options, open, limitChips, hiddenNumberText, renderChipAdornment, size]);
var showXIcon = Array.isArray(selected) && type === "multiple" && selected.length > 0 && !hideClearButton;
var hasSelected = type === "multiple" && Array.isArray(selected) && selected.length > 0;
var showMenu = React.useMemo(function () {
var hasOptions = (options === null || options === void 0 ? void 0 : options.length) > 0;
var valueExists = function valueExists(option) {
return option.id.toString().includes(value) || option.name.includes(value);
};
var isValueInOptions = options === null || options === void 0 ? void 0 : options.some(function (option) {
return isOptionGroup(option) ? option.options.some(valueExists) : valueExists(option);
});
return hasOptions && (!!defaultValue || !value) || value && (isValueInOptions || emptyValue || noResultText);
}, [defaultValue, emptyValue, noResultText, options, 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, {
$disabled: disabled,
$size: size,
$invalid: invalid,
ref: comboBoxRef,
$mode: triggerMode,
className: classNames__default["default"]("c-combo-box-input-wrapper", inputWrapperClassName),
onClick: function onClick() {
var _elementRef$current;
(_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 || _elementRef$current.click();
},
$_css3: autoSize === "auto" ? "auto" : undefined,
$_css4: autoSize === "auto" && scrollWrapper ? "scroll" : undefined
}, /*#__PURE__*/React__default["default"].createElement(_StyledStyledChipWrapper, {
$autoSize: autoSize,
$open: open,
ref: chipWrapper,
$_css5: autoSize === "auto" && scrollWrapper ? sizeMap[size] * 3 + 8 + "px" : undefined
}, startAdornment, /*#__PURE__*/React__default["default"].createElement(StyledInput$2, {
className: "c-combo-box-input",
onBlur: handleBlur,
onFocus: function onFocus() {
setFocused(!focused);
},
onClick: handleOpen,
ref: handleRef,
value: loading && loadingText ? loadingText : value,
onKeyDown: handleOnKeyDown,
onChange: handleOnChange,
placeholder: !hasSelected ? placeholder : undefined,
$mode: triggerMode,
disabled: disabled,
$size: size,
$loading: loading,
style: {
display: "flex",
flex: 1,
alignSelf: "center",
width: autoSize === "auto" ? "auto" : "100%"
}
})), !disabled && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, loading ? /*#__PURE__*/React__default["default"].createElement(SpinnerLoader, null) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, showXIcon && /*#__PURE__*/React__default["default"].createElement(_StyledTrigger, {
onMouseDown: handleMouseDown,
onClick: handleDeselect,
"data-testid": "deselect-all"
}, /*#__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),
onBlur: handleBlur,
wrapperClick: handleOpen,
onFocus: function onFocus() {
setFocused(!focused);
handleOpen();
},
onClick: handleOpen,
mode: triggerMode,
wrapRef: comboBoxRef,
ref: handleRef,
value: loading && loadingText ? loadingText : value,
onKeyDown: handleOnKeyDown,
onChange: handleOnChange,
placeholder: placeholder,
disabled: disabled,
size: size,
invalid: invalid,
$loading: loading,
startAdornment: startAdornment,
endAdornment: !disabled ? /*#__PURE__*/React__default["default"].createElement(InputAdornment, {
disablePointerEvents: disabled
}, loading ? /*#__PURE__*/React__default["default"].createElement(SpinnerLoader, null) : selected && !hideClearButton ? /*#__PURE__*/React__default["default"].createElement(IconButton, {
onMouseDown: handleMouseDown,
onClick: handleDeselect,
variant: "text gray",
size: "small"
}, /*#__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, {
condition: inPortal,
wrap: function wrap(children) {
return /*#__PURE__*/React__default["default"].createElement(Portal, null, children);
}
}, /*#__PURE__*/React__default["default"].createElement(Popper, {
anchorEl: comboBoxRef.current,
open: open,
placement: "bottom",
style: {
zIndex: 10,
width: (_comboBoxRef$current2 = comboBoxRef.current) === null || _comboBoxRef$current2 === void 0 ? void 0 : _comboBoxRef$current2.clientWidth
},
ref: wrapperRef,
strategy: "fixed"
}, /*#__PURE__*/React__default["default"].createElement(reactRemoveScroll.RemoveScroll, {
noIsolation: true,
allowPinchZoom: true
}, /*#__PURE__*/React__default["default"].createElement(StyledComboBoxList, {
className: "c-combo-box--list",
$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, {
emptyValue: emptyValue,
noResultText: noResultText,
inputEl: childNode,
selected: selected,
handleChange: handleChange,
renderOption: handleRenderOption,
options: options,
type: type,
defaultValue: defaultValue,
handleEmptyAction: emptyAction,
disableVirtualization: disableVirtualization
})))))) : null);
};
ComboBox.displayName = "ComboBox";
var _StyledAvatar = styled__default["default"](Avatar).withConfig({
displayName: "ComboBox___StyledAvatar",
componentId: "sc-uvsz9l-0"
})(["", " ", ""], function (p) {
return p.$_css;
}, function (p) {
return p.$_css2;
});
var _StyledTypography$1 = styled__default["default"](Typography).withConfig({
displayName: "ComboBox___StyledTypography",
componentId: "sc-uvsz9l-1"
})(["display:flex;flex-shrink:0;align-items:center;"]);
var _StyledStyledInputWrapper = styled__default["default"](StyledInputWrapper).withConfig({
displayName: "ComboBox___StyledStyledInputWrapper",
componentId: "sc-uvsz9l-2"
})(["display:flex;justify-content:space-between;flex:1;height:", ";overflow-y:", ";"], function (p) {
return p.$_css3;
}, function (p) {
return p.$_css4;
});
var _StyledStyledChipWrapper = styled__default["default"](StyledChipWrapper).withConfig({
displayName: "ComboBox___StyledStyledChipWrapper",
componentId: "sc-uvsz9l-3"
})(["max-height:", ";"], function (p) {
return p.$_css5;
});
var _StyledTrigger = styled__default["default"](Trigger).withConfig({
displayName: "ComboBox___StyledTrigger",
componentId: "sc-uvsz9l-4"
})(["display:flex;justify-content:center;"]);
var _excluded$B = ["mode", "selected", "min", "max", "onChange", "step", "size", "className", "placeholder", "triggerMode", "disabled", "invalid", "enableVirtualization", "addCustomTimeLabel"];
nlp__default["default"].plugin(plg__default["default"]);
var StyledInputTimeWrapper = styled__default["default"].div.withConfig({
displayName: "InputTime__StyledInputTimeWrapper",
componentId: "sc-71akdh-0"
})(["max-width:176px;flex:1;& .c-combo-box--list{min-width:176px;}"]);
var renderOption$1 = function renderOption(option) {
return /*#__PURE__*/React__default["default"].createElement("div", {
id: option.id,
"data-testid": "time-option-".concat(option.id)
}, option.name);
};
var InputTime = function InputTime(_ref) {
var _ref$mode = _ref.mode,
mode = _ref$mode === void 0 ? "24" : _ref$mode,
defaultSelected = _ref.selected,
_ref$min = _ref.min,
min = _ref$min === void 0 ? "00:00" : _ref$min,
_ref$max = _ref.max,
max = _ref$max === void 0 ? "23:45" : _ref$max,
onChange = _ref.onChange,
_ref$step = _ref.step,
step = _ref$step === void 0 ? 15 : _ref$step,
size = _ref.size,
className = _ref.className,
placeholder = _ref.placeholder,
triggerMode = _ref.triggerMode,
disabled = _ref.disabled,
invalid = _ref.invalid,
_ref$enableVirtualiza = _ref.enableVirtualization,
enableVirtualization = _ref$enableVirtualiza === void 0 ? false : _ref$enableVirtualiza,
_ref$addCustomTimeLab = _ref.addCustomTimeLabel,
addCustomTimeLabel = _ref$addCustomTimeLab === void 0 ? "Add" : _ref$addCustomTimeLab,
rest = _objectWithoutProperties(_ref, _excluded$B);
var _useState = React.useState(false),
_useState2 = _slicedToArray(_useState, 2),
isOpen = _useState2[0],
setIsOpen = _useState2[1];
var _useState3 = React.useState(undefined),
_useState4 = _slicedToArray(_useState3, 2),
search = _useState4[0],
setSearch = _useState4[1];
var generateTimeOptions = function generateTimeOptions() {
var allOptions = [];
var currentTime = moment__default$1["default"]("00:00", "HH:mm");
while (currentTime.isBefore(moment__default$1["default"]("24:00", "HH:mm"))) {
allOptions.push({
id: currentTime.format("HH:mm"),
name: currentTime.format(mode === "12" ? "hh:mm A" : "HH:mm")
});
currentTime.add(step, "minutes");
}
return allOptions;
};
var timeOptionsFilter = function timeOptionsFilter(options, _min, _max) {
var minTime = moment__default$1["default"](isValidTime(_min) ? _min : "00:00", "HH:mm");
var maxTime = moment__default$1["default"](isValidTime(_max) ? _max : "23:45", "HH:mm");
return options.filter(function (option) {
return moment__default$1["default"](option.id, "HH:mm").isSameOrAfter(minTime) && moment__default$1["default"](option.id, "HH:mm").isSameOrBefore(maxTime);
});
};
var _useState5 = React.useState(generateTimeOptions()),
_useState6 = _slicedToArray(_useState5, 2),
allTimeOptions = _useState6[0],
setAllTimeOptions = _useState6[1];
var timeOptions = React.useMemo(function () {
return timeOptionsFilter(allTimeOptions, min, max);
}, [allTimeOptions, min, max]);
var isInOptions = React.useCallback(function (option) {
return timeOptions.some(function (opt) {
return opt.id === option;
});
}, [timeOptions]);
var isValidDefaultSelected = defaultSelected ? isInOptions(defaultSelected) : false;
var _useState7 = React.useState(isValidDefaultSelected ? defaultSelected : undefined),
_useState8 = _slicedToArray(_useState7, 2),
selected = _useState8[0],
setSelected = _useState8[1];
var handleInputChange = React.useCallback(function (text) {
setSearch(text);
if (/\d{1,2}:\d{2}/.test(text.trim())) {
return;
}
var doc = nlp__default["default"](text);
var parsed = doc.times().get()[0];
if (parsed && parsed["24h"] && parsed["24h"] !== selected) {
var value = moment__default$1["default"](parsed).format("HH:mm");
if (timeOptions.some(function (option) {
return option.id === value;
})) {
setSelected(value);
onChange === null || onChange === void 0 || onChange(value);
setIsOpen(false);
}
}
}, [onChange, selected, timeOptions]);
var handleEmptyAction = function handleEmptyAction(newTime) {
var time = String(newTime);
if (isValidTime(time)) {
var newOption = {
id: time,
name: mode === "12" ? moment__default$1["default"](time, "HH:mm").format("hh:mm A") : time
};
var newOptions = [...timeOptions];
var index = newOptions.findIndex(function (option) {
return moment__default$1["default"](option.id, "HH:mm") > moment__default$1["default"](time, "HH:mm");
});
if (index === -1) {
newOptions.push(newOption);
} else {
newOptions.splice(index, 0, newOption);
}
setAllTimeOptions(newOptions);
onChange === null || onChange === void 0 || onChange(time);
setSelected(time);
}
};
var handleChange = function handleChange(e) {
setSelected(e);
onChange === null || onChange === void 0 || onChange(e);
};
var handleOpen = function handleOpen() {
setIsOpen(true);
};
var handleClose = function handleClose() {
setIsOpen(false);
};
React.useEffect(function () {
if (isOpen && selected) {
var _document$getElementB;
var selectedItem = (_document$getElementB = document.getElementById(selected)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.parentElement;
selectedItem === null || selectedItem === void 0 || selectedItem.scrollIntoView({
behavior: "smooth",
block: "center"
});
}
}, [isOpen, selected]);
React.useEffect(function () {
if (defaultSelected !== selected && timeOptions.some(function (opt) {
return opt.id === defaultSelected;
})) setSelected(defaultSelected);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [defaultSelected, timeOptions]);
var isValid = function isValid(time) {
return !isInOptions(time) && isValidTime(time);
};
return /*#__PURE__*/React__default["default"].createElement(StyledInputTimeWrapper, {
className: classNames__default["default"]("c-input-time", className)
}, /*#__PURE__*/React__default["default"].createElement(ComboBox, _extends({}, rest, {
options: timeOptions,
open: isOpen,
disabledInternalSort: true,
selected: selected,
keepSameOptionsOrder: true,
onInputChange: handleInputChange,
onChange: handleChange,
handleEmptyAction: handleEmptyAction,
emptyValue: isValid(search) ? "".concat(addCustomTimeLabel, " ").concat(search) : undefined,
forceCloseMenu: true,
placeholder: placeholder,
renderOption: renderOption$1,
autoHeightMax: 226,
size: size,
onClose: handleClose,
onOpen: handleOpen,
triggerMode: triggerMode,
disabled: disabled,
invalid: invalid,
disableVirtualization: !enableVirtualization
})));
};
var _excluded$A = ["value", "variant", "thousandSeparator", "decimalSeparator", "trimDecimals", "decimalSpaces", "format", "disableTooltip", "className", "as", "shortenThreshold"];
var DisplayNumber = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var value = _ref.value,
_ref$variant = _ref.variant,
variant = _ref$variant === void 0 ? "Body 2" : _ref$variant,
_ref$thousandSeparato = _ref.thousandSeparator,
thousandSeparator = _ref$thousandSeparato === void 0 ? "," : _ref$thousandSeparato,
_ref$decimalSeparator = _ref.decimalSeparator,
decimalSeparator = _ref$decimalSeparator === void 0 ? "." : _ref$decimalSeparator,
_ref$trimDecimals = _ref.trimDecimals,
trimDecimals = _ref$trimDecimals === void 0 ? true : _ref$trimDecimals,
_ref$decimalSpaces = _ref.decimalSpaces,
decimalSpaces = _ref$decimalSpaces === void 0 ? 2 : _ref$decimalSpaces,
_ref$format = _ref.format,
format = _ref$format === void 0 ? "long" : _ref$format,
_ref$disableTooltip = _ref.disableTooltip,
disableTooltip = _ref$disableTooltip === void 0 ? false : _ref$disableTooltip,
className = _ref.className,
_ref$as = _ref.as,
as = _ref$as === void 0 ? "span" : _ref$as,
_ref$shortenThreshold = _ref.shortenThreshold,
shortenThreshold = _ref$shortenThreshold === void 0 ? 1000 : _ref$shortenThreshold,
rest = _objectWithoutProperties(_ref, _excluded$A);
var formattedValue = formatNumber(value, thousandSeparator, decimalSeparator, trimDecimals, decimalSpaces, format, shortenThreshold);
var formattedLongValue = formatNumber(value, thousandSeparator, decimalSeparator, trimDecimals, decimalSpaces, "long");
if (format === "short") {
return /*#__PURE__*/React__default["default"].createElement(Tooltip, {
title: formatNumber(value, thousandSeparator, decimalSeparator, false, decimalSpaces, "long"),
disable: disableTooltip || !formattedLongValue.includes(thousandSeparator) && !formattedLongValue.includes(decimalSeparator)
}, /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
as: as,
variant: variant,
className: className,
ref: ref
}, rest), formattedValue));
}
return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
as: as,
variant: variant,
className: className,
ref: ref
}, rest), formattedLongValue);
});
DisplayNumber.displayName = "DisplayNumber";
var _excluded$z = ["value", "variant", "currencyCode", "currencyPosition", "thousandSeparator", "decimalSeparator", "trimDecimals", "decimalSpaces", "format", "disableTooltip", "className", "as"];
var DisplayCurrency = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var value = _ref.value,
_ref$variant = _ref.variant,
variant = _ref$variant === void 0 ? "Body 2" : _ref$variant,
_ref$currencyCode = _ref.currencyCode,
currencyCode = _ref$currencyCode === void 0 ? "USD" : _ref$currencyCode,
_ref$currencyPosition = _ref.currencyPosition,
currencyPosition = _ref$currencyPosition === void 0 ? "right" : _ref$currencyPosition,
_ref$thousandSeparato = _ref.thousandSeparator,
thousandSeparator = _ref$thousandSeparato === void 0 ? "," : _ref$thousandSeparato,
_ref$decimalSeparator = _ref.decimalSeparator,
decimalSeparator = _ref$decimalSeparator === void 0 ? "." : _ref$decimalSeparator,
_ref$trimDecimals = _ref.trimDecimals,
trimDecimals = _ref$trimDecimals === void 0 ? true : _ref$trimDecimals,
_ref$decimalSpaces = _ref.decimalSpaces,
decimalSpaces = _ref$decimalSpaces === void 0 ? 2 : _ref$decimalSpaces,
_ref$format = _ref.format,
format = _ref$format === void 0 ? "long" : _ref$format,
_ref$disableTooltip = _ref.disableTooltip,
disableTooltip = _ref$disableTooltip === void 0 ? false : _ref$disableTooltip,
className = _ref.className,
_ref$as = _ref.as,
as = _ref$as === void 0 ? "span" : _ref$as,
rest = _objectWithoutProperties(_ref, _excluded$z);
var formattedValue = formatCurrency(value, thousandSeparator, decimalSeparator, trimDecimals, decimalSpaces, "short", currencyCode, currencyPosition);
var formattedLongValue = formatCurrency(value, thousandSeparator, decimalSeparator, trimDecimals, decimalSpaces, "long", currencyCode, currencyPosition);
if (format === "short") {
return /*#__PURE__*/React__default["default"].createElement(Tooltip, {
title: formatCurrency(value, thousandSeparator, decimalSeparator, false, decimalSpaces, "long", currencyCode, currencyPosition),
disable: disableTooltip || !formattedLongValue.includes(thousandSeparator) && !formattedLongValue.includes(decimalSeparator)
}, /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
as: as,
variant: variant,
className: className,
ref: ref
}, rest), formattedValue));
}
return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
as: as,
variant: variant,
className: className,
ref: ref
}, rest), formattedLongValue);
});
DisplayCurrency.displayName = "DisplayCurrency";
var _excluded$y = ["value", "variant", "thousandSeparator", "decimalSeparator", "trimZeroMinutes", "trimDecimals", "decimalSpaces", "format", "disableTooltip", "className", "withLeadingZero", "as"];
var DisplayHours = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var value = _ref.value,
_ref$variant = _ref.variant,
variant = _ref$variant === void 0 ? "Body 2" : _ref$variant,
_ref$thousandSeparato = _ref.thousandSeparator,
thousandSeparator = _ref$thousandSeparato === void 0 ? "," : _ref$thousandSeparato,
_ref$decimalSeparator = _ref.decimalSeparator,
decimalSeparator = _ref$decimalSeparator === void 0 ? "." : _ref$decimalSeparator,
_ref$trimZeroMinutes = _ref.trimZeroMinutes,
trimZeroMinutes = _ref$trimZeroMinutes === void 0 ? false : _ref$trimZeroMinutes,
_ref$trimDecimals = _ref.trimDecimals,
trimDecimals = _ref$trimDecimals === void 0 ? true : _ref$trimDecimals,
_ref$decimalSpaces = _ref.decimalSpaces,
decimalSpaces = _ref$decimalSpaces === void 0 ? 2 : _ref$decimalSpaces,
_ref$format = _ref.format,
format = _ref$format === void 0 ? "long" : _ref$format,
_ref$disableTooltip = _ref.disableTooltip,
disableTooltip = _ref$disableTooltip === void 0 ? false : _ref$disableTooltip,
className = _ref.className,
withLeadingZero = _ref.withLeadingZero,
_ref$as = _ref.as,
as = _ref$as === void 0 ? "span" : _ref$as,
rest = _objectWithoutProperties(_ref, _excluded$y);
var shouldDisplayShort = format === "short" && value >= 1000;
var longValue = formatHours(value, withLeadingZero, trimZeroMinutes, "long");
var shortValue = formatNumber(value, thousandSeparator, decimalSeparator, trimDecimals, decimalSpaces, "short");
if (shouldDisplayShort) {
return /*#__PURE__*/React__default["default"].createElement(Tooltip, {
title: formatHours(value),
disable: disableTooltip
}, /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
as: as,
variant: variant,
className: className,
ref: ref
}, rest), shortValue));
}
return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
as: as,
variant: variant,
className: className,
ref: ref
}, rest), longValue);
});
DisplayHours.displayName = "DisplayHours";
var _excluded$x = ["expanded"];
var ExpandAll = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var _ref$expanded = _ref.expanded,
expanded = _ref$expanded === void 0 ? false : _ref$expanded,
rest = _objectWithoutProperties(_ref, _excluded$x);
return /*#__PURE__*/React__default["default"].createElement(StyledExpand, _extends({
ref: ref,
viewBox: "0 0 24 24"
}, rest), expanded ? /*#__PURE__*/React__default["default"].createElement("path", {
d: "M13 16l4.72 4.461a.867.867 0 010 1.275.993.993 0 01-1.348 0L13 18.549l-3.372 3.187a.993.993 0 01-1.349 0 .867.867 0 010-1.275L13 16zm4.72-11.736a.867.867 0 010 1.275L13 10 8.28 5.539a.867.867 0 010-1.275.993.993 0 011.348 0L13 7.451l3.372-3.187a.993.993 0 011.349 0zM13 15a2 2 0 100-4 2 2 0 000 4z"
}) : /*#__PURE__*/React__default["default"].createElement("path", {
d: "M17.72 16.264a.867.867 0 010 1.275L13 22l-4.72-4.461a.867.867 0 010-1.275.993.993 0 011.348 0L13 19.451l3.372-3.187a.993.993 0 011.349 0zM13 4l4.72 4.461a.867.867 0 010 1.275.993.993 0 01-1.348 0L13 6.549 9.628 9.736a.993.993 0 01-1.349 0 .867.867 0 010-1.275L13 4zm0 11a2 2 0 100-4 2 2 0 000 4z"
}));
});
ExpandAll.displayName = "ExpandAll";
var StyledMenuSelectorDots = styled__default["default"](TreeDotsIcon$1).withConfig({
displayName: "Styles__StyledMenuSelectorDots",
componentId: "sc-1x7qbnu-0"
})(["", ""], {
"marginLeft": "0.5rem",
"flexShrink": "0",
"cursor": "pointer"
});
StyledMenuSelectorDots.displayName = "StyledMenuSelectorDots";
var StyledMenuSelectorBack = styled__default["default"](ArrowLeftIcon$1).withConfig({
displayName: "Styles__StyledMenuSelectorBack",
componentId: "sc-1x7qbnu-1"
})(["", ""], {
"marginRight": "0.5rem",
"flexShrink": "0",
"cursor": "pointer",
"stroke": "currentColor"
});
StyledMenuSelectorBack.displayName = "StyledMenuSelectorBack";
var StyledMenuSelector = styled__default["default"].div.withConfig({
displayName: "Styles__StyledMenuSelector",
componentId: "sc-1x7qbnu-2"
})(["", " ", " color:var(--color-theme-700);"], BoxSizingStyle, FontStyle);
StyledMenuSelector.displayName = "StyledMenuSelector";
var StyledMenuSelectorInner = styled__default["default"].div.withConfig({
displayName: "Styles__StyledMenuSelectorInner",
componentId: "sc-1x7qbnu-3"
})(["", ""], {
"margin": "1rem",
"display": "flex",
"alignItems": "center"
});
StyledMenuSelectorInner.displayName = "StyledMenuSelectorInner";
var MenuSelector = function MenuSelector(_ref) {
var defaultValue = _ref.defaultValue,
children = _ref.children,
placeholder = _ref.placeholder,
onChange = _ref.onChange,
onBack = _ref.onBack,
onEdit = _ref.onEdit,
_ref$autoFocus = _ref.autoFocus,
autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
className = _ref.className,
onFocus = _ref.onFocus,
onBlur = _ref.onBlur,
_ref$autoComplete = _ref.autoComplete,
autoComplete = _ref$autoComplete === void 0 ? false : _ref$autoComplete;
var handleChange = React.useCallback(function (e) {
if (typeof onChange === "function") {
onChange(e.target.value);
}
}, [onChange]);
return /*#__PURE__*/React__default["default"].createElement(StyledMenuSelector, {
className: classNames__default["default"]("c-menu-selector", className)
}, /*#__PURE__*/React__default["default"].createElement(StyledMenuSelectorInner, null, typeof onBack === "function" ? /*#__PURE__*/React__default["default"].createElement(StyledMenuSelectorBack, {
onClick: onBack,
width: "16px",
height: "16px"
}) : null, /*#__PURE__*/React__default["default"].createElement(Input, {
onChange: handleChange,
placeholder: placeholder,
autoFocus: autoFocus,
defaultValue: defaultValue,
onFocus: onFocus,
onBlur: onBlur,
autoComplete: autoComplete ? "on" : "off"
}), typeof onEdit === "function" ? /*#__PURE__*/React__default["default"].createElement(StyledMenuSelectorDots, {
onClick: onEdit
}) : null), children);
};
MenuSelector.displayName = "MenuSelector";
var StyledTextarea = styled__default["default"].textarea.withConfig({
displayName: "Styles__StyledTextarea",
componentId: "sc-m6jqw8-0"
})(["", " ", " ", " ", " ", " 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)"
}, {
"lineHeight": "1.375"
}, {
"letterSpacing": "0.02em"
}, {
"fontWeight": "400"
}, {
"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 && 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 && 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$w = ["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$w);
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)
}));
});
Textarea.displayName = "Textarea";
var StyledSheetIcons = styled__default["default"].div.withConfig({
displayName: "Styles__StyledSheetIcons",
componentId: "sc-144eyxd-0"
})(["display:flex;height:0;position:relative;span{position:relative;background-color:var(--page-paper-main);box-shadow:var(--shadow-secondary);cursor:pointer;border-radius:100%;width:40px;height:40px;display:flex;justify-content:center;align-items:center;& > *{height:40px;width:40px;padding:8px;fill:var(--color-theme-600);}}@media (max-width:640px){display:none;}"]);
StyledSheetIcons.displayName = "StyledSheetIcons";
var StyledSheetWrapper = styled__default["default"].div.withConfig({
displayName: "Styles__StyledSheetWrapper",
componentId: "sc-144eyxd-1"
})(["", " ", " position:relative;max-width:95vw;display:flex;flex-direction:row;", " ", " ", " ", " ", " ", " ", ""], BoxSizingStyle, FontStyle, function (props) {
return props.$mode === "stretch" ? styled.css(["margin-top:8px;height:calc(100vh - 16px);width:calc(100vw - 100px);max-width:1000px;", "{flex-direction:column;width:0;height:calc(100vh - 32px);& > *{margin-bottom:8px;animation-fill-mode:both;}span{top:8px;}}"], StyledSheetIcons) : styled.css(["max-height:calc(100vh - 156px);margin-top:126px;margin-bottom:30px;width:540px;flex-direction:column;", "{flex-direction:row-reverse;& > *{margin-left:8px;animation-fill-mode:both;}span{top:-48px;right:8px;}}"], StyledSheetIcons);
}, function (props) {
return props.$mode === "stretch" && styled.css(["@media (max-width:640px){width:100%;height:100%;}"]);
}, function (props) {
return props.$position === "center" && styled.css(["", ""], {
"marginLeft": "auto",
"marginRight": "auto"
});
}, function (props) {
return props.$position === "left" && styled.css(["", ""], {
"marginLeft": "0.5rem",
"marginRight": "auto"
});
}, function (props) {
return props.$position === "right" && styled.css(["", ""], {
"marginLeft": "auto",
"marginRight": "0.5rem"
});
}, function (props) {
return props.$mode === "stretch" && props.$position !== "left" && styled.css(["", "{span{right:48px;}}"], StyledSheetIcons);
}, function (props) {
return props.$mode === "stretch" && props.$position === "left" && styled.css(["flex-direction:row-reverse;", "{span{right:-8px;}}"], StyledSheetIcons);
});
StyledSheetWrapper.displayName = "StyledSheetWrapper";
var StyledSheetWrapperPaper = styled__default["default"].div.attrs(function (props) {
return {
className: props.paperClass
};
}).withConfig({
displayName: "Styles__StyledSheetWrapperPaper",
componentId: "sc-144eyxd-2"
})(["background-color:var(--page-paper-main);color:var(--color-theme-900);box-shadow:var(--shadow-primary);border-radius:6px;overflow:auto;animation:0.3s linear ease-out;", ""], {
"flex": "1 1 auto"
});
StyledSheetWrapperPaper.displayName = "StyledSheetWrapperPaper";
var StyledSheetControlsTop = styled.keyframes(["0%{opacity:0;transform:translateY(-200px);}100%{opacity:1;transform:translateY(0);}"]);
var StyledSheetControlsBottom = styled.keyframes(["0%{opacity:1;transform:translateY(0);}100%{opacity:0;transform:translateY(-200px);}"]);
var StyledSheetControlsCenterIn = styled.keyframes(["0%{transform:translateY(-150px);opacity:0;}100%{transform:translateY(0);opacity:1;}"]);
var StyledSheetControlsCenterOut = styled.keyframes(["0%{transform:translateY(0);opacity:1;}100%{transform:translateY(-150px);opacity:0;}"]);
var StyledAnimatedSpan = styled__default["default"].span.withConfig({
displayName: "Styles__StyledAnimatedSpan",
componentId: "sc-144eyxd-3"
})(["&:hover svg{fill:var(--color-primary);}", " ", " ", " ", " ", ""], function (props) {
return props.$state === "entering" && styled.css(["opacity:1;", ""], props.$mode === "stretch" ? styled.css(["animation-name:", ";animation-duration:", ";animation-delay:", ";"], StyledSheetControlsTop, "".concat(props.$durationIn, "s"), "".concat(props.$durationIn, "s")) : styled.css(["animation-name:", ";animation-duration:", ";animation-delay:0s;"], StyledSheetControlsCenterIn, "".concat(props.$maxDurationIn, "s")));
}, function (props) {
return props.$state === "entered" && styled.css(["opacity:1;"]);
}, function (props) {
return props.$disabled && styled.css(["pointer-events:none;svg{opacity:0.5;}"]);
}, function (props) {
return props.$state === "exiting" && styled.css(["opacity:0;", ""], props.$mode === "stretch" ? styled.css(["animation-name:", ";animation-duration:", ";animation-delay:", ";"], StyledSheetControlsBottom, "".concat(props.$durationOut, "s"), "".concat(props.$durationOut, "s")) : styled.css(["animation-name:", ";animation-duration:", ";animation-delay:0;"], StyledSheetControlsCenterOut, "".concat(props.$maxDurationOut, "s")));
}, function (props) {
return props.$state === "exited" && styled.css(["opacity:0;"]);
});
StyledAnimatedSpan.displayName = "StyledAnimatedSpan";
var StyledCssTransition = styled__default["default"](reactTransitionGroup.CSSTransition).withConfig({
displayName: "Styles__StyledCssTransition",
componentId: "sc-144eyxd-4"
})(["", " ", " ", " ", ""], function (props) {
return props.$direction === "top" && styled.css(["&.c-sheet__animation-enter{opacity:0;transform:translateY(-100%);}&.c-sheet__animation-enter-active{opacity:1;transform:translateY(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-appear{opacity:0;transform:translateY(-100%);}&.c-sheet__animation-appear-active{opacity:1;transform:translateY(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-exit{opacity:1;}&.c-sheet__animation-exit-active{opacity:0;transform:translateY(-100%);transition:opacity 200ms,transform 200ms;}"]);
}, function (props) {
return props.$direction === "bottom" && styled.css(["&.c-sheet__animation-enter{opacity:0;transform:translateY(100%);}&.c-sheet__animation-enter-active{opacity:1;transform:translateY(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-appear{opacity:0;transform:translateY(100%);}&.c-sheet__animation-appear-active{opacity:1;transform:translateY(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-exit{opacity:1;}&.c-sheet__animation-exit-active{opacity:0;transform:translateY(100%);transition:opacity 200ms,transform 200ms;}"]);
}, function (props) {
return props.$direction === "left" && styled.css(["&.c-sheet__animation-enter{opacity:0;transform:translateX(-100%);}&.c-sheet__animation-enter-active{opacity:1;transform:translateX(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-appear{opacity:0;transform:translateX(-100%);}&.c-sheet__animation-appear-active{opacity:1;transform:translateX(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-exit{opacity:1;}&.c-sheet__animation-exit-active{opacity:0;transform:translateX(-100%);transition:opacity 200ms,transform 200ms;}"]);
}, function (props) {
return props.$direction === "right" && styled.css(["&.c-sheet__animation-enter{opacity:0;transform:translateX(100%);}&.c-sheet__animation-enter-active{opacity:1;transform:translateX(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-appear{opacity:0;transform:translateX(100%);}&.c-sheet__animation-appear-active{opacity:1;transform:translateX(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-exit{opacity:1;}&.c-sheet__animation-exit-active{opacity:0;transform:translateX(100%);transition:opacity 200ms,transform 200ms;}"]);
});
StyledCssTransition.displayName = "StyledCssTransition";
var StyledListSeparator = styled__default["default"](ListSeparator).withConfig({
displayName: "Styles__StyledListSeparator",
componentId: "sc-144eyxd-5"
})(["margin:0;"]);
StyledListSeparator.displayName = "StyledListSeparator";
var StyledIconsWrapperSmall = styled__default["default"].div.withConfig({
displayName: "Styles__StyledIconsWrapperSmall",
componentId: "sc-144eyxd-6"
})(["height:40px;display:flex;gap:8px;padding-left:16px;padding-right:16px;align-items:center;place-content:end;flex-direction:row-reverse;"]);
StyledIconsWrapperSmall.displayName = "StyledIconsWrapperSmall";
var StyledHeader$1 = styled__default["default"].div.withConfig({
displayName: "Styles__StyledHeader",
componentId: "sc-144eyxd-7"
})(["@media (min-width:640px){display:none;}"]);
StyledHeader$1.displayName = "StyledHeader";
var _excluded$v = ["children", "onClose", "controls", "open", "animation", "position", "mode", "disableFocusLock", "disableScrollLock", "disableBackgroundColor", "bodyStyle", "bodyClassName", "disableBackgroundClick"];
var Sheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var children = _ref.children,
onClose = _ref.onClose,
_ref$controls = _ref.controls,
controls = _ref$controls === void 0 ? [] : _ref$controls,
_ref$open = _ref.open,
defaultOpen = _ref$open === void 0 ? false : _ref$open,
_ref$animation = _ref.animation,
animation = _ref$animation === void 0 ? "top" : _ref$animation,
_ref$position = _ref.position,
position = _ref$position === void 0 ? "center" : _ref$position,
_ref$mode = _ref.mode,
mode = _ref$mode === void 0 ? "normal" : _ref$mode,
_ref$disableFocusLock = _ref.disableFocusLock,
disableFocusLock = _ref$disableFocusLock === void 0 ? false : _ref$disableFocusLock,
_ref$disableScrollLoc = _ref.disableScrollLock,
disableScrollLock = _ref$disableScrollLoc === void 0 ? false : _ref$disableScrollLoc,
_ref$disableBackgroun = _ref.disableBackgroundColor,
disableBackgroundColor = _ref$disableBackgroun === void 0 ? false : _ref$disableBackgroun,
bodyStyle = _ref.bodyStyle,
bodyClassName = _ref.bodyClassName,
_ref$disableBackgroun2 = _ref.disableBackgroundClick,
disableBackgroundClick = _ref$disableBackgroun2 === void 0 ? false : _ref$disableBackgroun2,
rest = _objectWithoutProperties(_ref, _excluded$v);
var _useState = React.useState(defaultOpen),
_useState2 = _slicedToArray(_useState, 2),
open = _useState2[0],
setOpen = _useState2[1];
var _useState3 = React.useState(true),
_useState4 = _slicedToArray(_useState3, 2),
exited = _useState4[0],
setExited = _useState4[1];
React.useEffect(function () {
setOpen(defaultOpen);
}, [defaultOpen]);
var handleEnter = React.useCallback(function () {
setExited(false);
}, []);
var handleExited = React.useCallback(function () {
setExited(true);
onClose === null || onClose === void 0 || onClose();
}, [onClose]);
var handleClose = React.useCallback(function () {
setOpen(false);
}, []);
var handleBackgroundClick = React.useCallback(function (event) {
if (!disableBackgroundClick) {
event.preventDefault();
handleClose();
}
}, [disableBackgroundClick, handleClose]);
React.useImperativeHandle(ref, function () {
return {
close: handleClose
};
});
if (!open && exited) {
return null;
}
return /*#__PURE__*/React__default["default"].createElement(Window, _extends({}, rest, {
onClose: handleClose,
disableFocusLock: disableFocusLock,
disableScrollLock: disableScrollLock
}), open && /*#__PURE__*/React__default["default"].createElement(Overlay, {
onClick: handleBackgroundClick,
disableBackgroundColor: disableBackgroundColor
}), /*#__PURE__*/React__default["default"].createElement(StyledSheetWrapper, {
className: classNames__default["default"]("c-sheet__wrapper", bodyClassName),
style: bodyStyle,
$position: position,
$mode: mode
}, controls.length > 0 && /*#__PURE__*/React__default["default"].createElement(StyledSheetIcons, null, controls.map(function (_ref2, index) {
var IconComponent = _ref2.icon,
tooltip = _ref2.tooltip,
onClick = _ref2.onClick,
disabled = _ref2.disabled,
className = _ref2.className;
var maxDurationIn = 4;
var maxDurationOut = 2;
var control = index + 1;
var durationOut = Math.max(0, maxDurationOut - control);
var durationIn = Math.min(control, maxDurationIn);
return /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.Transition, {
appear: true,
in: open,
timeout: maxDurationIn * 100,
key: "c-sheet-control-".concat(index)
}, function (state) {
return /*#__PURE__*/React__default["default"].createElement(Tooltip, {
title: tooltip,
disable: !tooltip || disabled
}, /*#__PURE__*/React__default["default"].createElement(StyledAnimatedSpan, {
onClick: onClick,
$disabled: disabled,
$mode: mode,
$state: state,
className: className,
$maxDurationIn: maxDurationIn / 10,
$maxDurationOut: maxDurationOut / 10,
$durationOut: durationOut / 10,
$durationIn: durationIn / 10
}, IconComponent));
});
})), /*#__PURE__*/React__default["default"].createElement(StyledCssTransition, {
appear: true,
in: open,
timeout: 400,
classNames: "c-sheet__animation",
$direction: animation,
onEnter: handleEnter,
onExited: handleExited
}, /*#__PURE__*/React__default["default"].createElement(StyledSheetWrapperPaper, {
paperClass: "c-sheet__wrapper__paper"
}, controls.length > 0 && /*#__PURE__*/React__default["default"].createElement(StyledHeader$1, null, /*#__PURE__*/React__default["default"].createElement(StyledIconsWrapperSmall, null, controls.map(function (_ref3, index) {
var IconComponent = _ref3.icon,
tooltip = _ref3.tooltip,
onClick = _ref3.onClick,
disabled = _ref3.disabled,
className = _ref3.className;
return /*#__PURE__*/React__default["default"].createElement(Tooltip, {
title: tooltip,
disable: !tooltip || disabled,
key: index
}, /*#__PURE__*/React__default["default"].createElement(IconButton, {
onClick: onClick,
disabled: disabled,
className: className,
variant: "text gray"
}, IconComponent));
})), /*#__PURE__*/React__default["default"].createElement(StyledListSeparator, null)), children))));
});
Sheet.displayName = "Sheet";
var StyledHeader = styled__default["default"](Paper).withConfig({
displayName: "Styles__StyledHeader",
componentId: "sc-xrlqib-0"
})(["", " ", " padding:0 1rem;display:flex;overflow:hidden;min-width:350px;@media screen and (max-width:350px){overflow:auto;}"], function (props) {
return props.size === "big" && styled.css(["height:140px;"]);
}, function (props) {
return props.size === "small" && styled.css(["height:4rem;"]);
});
StyledHeader.displayName = "StyledHeader";
var _excluded$u = ["className", "size", "children"];
var Header = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var className = _ref.className,
_ref$size = _ref.size,
size = _ref$size === void 0 ? "small" : _ref$size,
children = _ref.children,
rest = _objectWithoutProperties(_ref, _excluded$u);
return /*#__PURE__*/React__default["default"].createElement(StyledHeader, _extends({
type: "paper-2",
className: classNames__default["default"]("c-header", className),
size: size,
ref: ref
}, rest), children);
});
Header.displayName = "Header";
var StyledAutoResizeTextarea = styled__default["default"](Textarea).withConfig({
displayName: "Styles__StyledAutoResizeTextarea",
componentId: "sc-jg98vj-0"
})(["white-space:pre-wrap;overflow-wrap:break-word;resize:none;"]);
StyledAutoResizeTextarea.displayName = "StyledAutoResizeTextarea";
var _excluded$t = ["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,
_ref$maxRows = _ref.maxRows,
maxRows = _ref$maxRows === void 0 ? 6 : _ref$maxRows,
_ref$lineHeight = _ref.lineHeight,
lineHeight = _ref$lineHeight === void 0 ? 18 : _ref$lineHeight,
onChange = _ref.onChange,
className = _ref.className,
_ref$preventNewRowOnE = _ref.preventNewRowOnEnter,
preventNewRowOnEnter = _ref$preventNewRowOnE === void 0 ? false : _ref$preventNewRowOnE,
_ref$cursorAtTextEnd = _ref.cursorAtTextEnd,
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$t);
var innerRef = React.useRef(null);
var _useState = React.useState(minRows),
_useState2 = _slicedToArray(_useState, 2),
rows = _useState2[0],
setRows = _useState2[1];
var handleRef = useForkRef(ref, innerRef);
var calcRows = React.useCallback(function (elem) {
if (elem) {
var previousRows = elem.rows || minRows;
elem.rows = minRows;
var currentRows = Math.floor(elem.scrollHeight / lineHeight);
if (currentRows === previousRows) {
elem.rows = currentRows;
}
if (currentRows >= maxRows) {
elem.rows = maxRows;
elem.scrollTop = elem.scrollHeight;
}
setRows(currentRows < maxRows ? currentRows : maxRows);
}
}, [lineHeight, maxRows, minRows]);
React.useEffect(function () {
calcRows(innerRef.current);
}, [value, calcRows]);
var handleOnChange = React.useCallback(function (e) {
calcRows(e.target);
typeof onChange === "function" && onChange(e);
}, [onChange, calcRows]);
var handleFocus = React.useCallback(function (e) {
if (cursorAtTextEnd) {
e.target.setSelectionRange(e.target.value.length, e.target.value.length);
}
}, [cursorAtTextEnd]);
var handleTextAreaKeyDown = React.useCallback(function (e) {
if (preventNewRowOnEnter && e.key === "Enter") {
e.preventDefault();
}
typeof onKeyDown === "function" && onKeyDown(e);
}, [preventNewRowOnEnter, onKeyDown]);
return /*#__PURE__*/React__default["default"].createElement(StyledAutoResizeTextarea, _extends({}, rest, {
value: value,
ref: handleRef,
onChange: handleOnChange,
onKeyDown: handleTextAreaKeyDown,
onFocus: handleFocus,
rows: rows,
mode: mode,
className: classNames__default["default"]("c-autoresizetextarea", className),
style: {
minHeight: "".concat(lineHeight, "px"),
lineHeight: "".concat(lineHeight, "px")
}
}));
});
AutoResizeTextarea.displayName = "AutoResizeTextarea";
var StyledAccordion = styled__default["default"].div.withConfig({
displayName: "Styles__StyledAccordion",
componentId: "sc-h8w6zs-0"
})(["", " ", " ", ""], {
"overflow": "hidden",
"borderRadius": "0.5rem",
"borderWidth": "1px",
"borderBottomWidth": "0px",
"borderStyle": "solid",
"borderColor": "var(--border-primary)"
}, FontStyle, BoxSizingStyle);
StyledAccordion.displayName = "StyledAccordion";
var StyledAccordionItem = styled__default["default"].div.withConfig({
displayName: "Styles__StyledAccordionItem",
componentId: "sc-h8w6zs-1"
})(["display:flex;flex-direction:column;background-color:var(--page-paper-main);border:1px solid transparent;border-bottom:1px solid var(--border-primary);overflow:hidden;", " ", ""], FontStyle, BoxSizingStyle);
StyledAccordionItem.displayName = "StyledAccordionItem";
var StyledAccordionItemBody = styled__default["default"].div.withConfig({
displayName: "Styles__StyledAccordionItemBody",
componentId: "sc-h8w6zs-2"
})(["margin:0 16px;", " ", ""], FontStyle, BoxSizingStyle);
StyledAccordionItemBody.displayName = "StyledAccordionItemHead";
var StyledAccordionItemHead = styled__default["default"].div.withConfig({
displayName: "Styles__StyledAccordionItemHead",
componentId: "sc-h8w6zs-3"
})(["user-select:none;padding:8px 16px;display:flex;flex-direction:row;justify-content:space-between;color:var(--color-theme-900);cursor:pointer;", " ", " .text{font-weight:bold;font-size:13px;}.icon{width:16px;height:16px;fill:currentColor;transform:translateY(-4px);}"], FontStyle, BoxSizingStyle);
StyledAccordionItemHead.displayName = "StyledAccordionItemHead";
var StyledAccordionItemHeadText = styled__default["default"].div.withConfig({
displayName: "Styles__StyledAccordionItemHeadText",
componentId: "sc-h8w6zs-4"
})(["font-weight:bold;font-size:13px;"]);
StyledAccordionItemHeadText.displayName = "StyledAccordionItemHeadText";
var StyledAccordionItemHeadIcon = styled__default["default"].div.withConfig({
displayName: "Styles__StyledAccordionItemHeadIcon",
componentId: "sc-h8w6zs-5"
})(["width:16px;height:16px;fill:currentColor;transform:translateY(-4px);"]);
StyledAccordionItemHeadIcon.displayName = "StyledAccordionItemHeadIcon";
var AccordionContext = /*#__PURE__*/React__default["default"].createContext(null);
var Accordion = function Accordion(_ref) {
var children = _ref.children,
className = _ref.className,
_ref$allowMultipleExp = _ref.allowMultipleExpanded,
allowMultipleExpanded = _ref$allowMultipleExp === void 0 ? false : _ref$allowMultipleExp,
_ref$allowZeroExpande = _ref.allowZeroExpanded,
allowZeroExpanded = _ref$allowZeroExpande === void 0 ? false : _ref$allowZeroExpande,
onChange = _ref.onChange,
_ref$preExpanded = _ref.preExpanded,
preExpanded = _ref$preExpanded === void 0 ? [] : _ref$preExpanded,
_ref$disableToggleIco = _ref.disableToggleIcon,
disableToggleIcon = _ref$disableToggleIco === void 0 ? false : _ref$disableToggleIco,
customToggleIcon = _ref.customToggleIcon;
var _useState = React.useState(preExpanded),
_useState2 = _slicedToArray(_useState, 2),
expandedItems = _useState2[0],
setExpandedItems = _useState2[1];
var toggleExpandedCallback = React.useCallback(function (id) {
setExpandedItems(function (prevExpanded) {
if (prevExpanded.indexOf(id) > -1) {
if (!allowZeroExpanded && prevExpanded.length === 1) {
return prevExpanded;
}
return prevExpanded.filter(function (item) {
return item !== id;
});
} else {
if (!allowMultipleExpanded) {
return [id];
}
return [...prevExpanded, id];
}
});
if (onChange) {
onChange(id);
}
}, [allowMultipleExpanded, allowZeroExpanded, onChange]);
return /*#__PURE__*/React__default["default"].createElement(AccordionContext.Provider, {
value: {
expandedItems,
toggleExpanded: toggleExpandedCallback,
disableToggleIcon,
customToggleIcon
}
}, /*#__PURE__*/React__default["default"].createElement(StyledAccordion, {
className: classNames__default["default"]("accordion", className)
}, children));
};
Accordion.displayName = "Accordion";
var ItemContext = /*#__PURE__*/React__default["default"].createContext(null);
var AccordionItem = function AccordionItem(_ref) {
var children = _ref.children,
className = _ref.className,
id = _ref.id;
var accordionContext = React.useContext(AccordionContext);
var itemId = React.useMemo(function () {
if (!id) {
var randomString = Math.random().toString(36).slice(2);
return "accordion-item-".concat(randomString);
}
return id;
}, [id]);
return /*#__PURE__*/React__default["default"].createElement(ItemContext.Provider, {
value: {
isItemExpanded: accordionContext ? accordionContext.expandedItems.indexOf(itemId) > -1 : false,
id: itemId
}
}, /*#__PURE__*/React__default["default"].createElement(StyledAccordionItem, {
className: classNames__default["default"]("accordionItem", className)
}, children));
};
AccordionItem.displayName = "AccordionItem";
var AccordionItemHead = function AccordionItemHead(_ref) {
var children = _ref.children,
className = _ref.className;
var accordionContext = React.useContext(AccordionContext);
var itemContext = React.useContext(ItemContext);
var _useMemo = React.useMemo(function () {
return {
toggleExpanded: accordionContext ? accordionContext.toggleExpanded : null,
disableToggleIcon: accordionContext ? accordionContext.disableToggleIcon : false,
customToggleIcon: accordionContext ? accordionContext.customToggleIcon : null
};
}, [accordionContext]),
toggleExpanded = _useMemo.toggleExpanded,
disableToggleIcon = _useMemo.disableToggleIcon,
customToggleIcon = _useMemo.customToggleIcon;
var id = React.useMemo(function () {
return itemContext ? itemContext.id : "";
}, [itemContext]);
var onClickCallback = React.useCallback(function () {
if (toggleExpanded) {
toggleExpanded(id);
}
}, [id, toggleExpanded]);
var toggleIcon = React.useMemo(function () {
return customToggleIcon ? customToggleIcon : /*#__PURE__*/React__default["default"].createElement(CollapseExpandSingleIcon$1, {
style: {
transform: "rotate(180deg)"
}
});
}, [customToggleIcon]);
return /*#__PURE__*/React__default["default"].createElement(StyledAccordionItemHead, {
onClick: onClickCallback,
className: classNames__default["default"]("accordionItemHead", className)
}, /*#__PURE__*/React__default["default"].createElement(StyledAccordionItemHeadText, {
className: "accordionItemHead__text"
}, children), /*#__PURE__*/React__default["default"].createElement(StyledAccordionItemHeadIcon, {
className: "accordionItemHead__icon"
}, !disableToggleIcon ? toggleIcon : null));
};
AccordionItemHead.displayName = "AccordionItemHead";
var AccordionItemBody = function AccordionItemBody(_ref) {
var children = _ref.children,
className = _ref.className;
var itemContext = React.useContext(ItemContext);
var divRef = React.useRef(null);
var duration = 200;
var height = useHeight(divRef);
var defaultStyle = {
transition: "max-height ".concat(duration, "ms linear"),
maxHeight: 0
};
var transitionStyles = {
entering: {
maxHeight: height
},
entered: {
maxHeight: height
},
exiting: {
maxHeight: 0
},
exited: {
maxHeight: 0
}
};
return /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.Transition, {
timeout: 200,
in: itemContext === null || itemContext === void 0 ? void 0 : itemContext.isItemExpanded
}, function (state) {
return /*#__PURE__*/React__default["default"].createElement(StyledAccordionItemBody, {
ref: divRef,
className: classNames__default["default"]("accordionItemBody", className),
style: _objectSpread2(_objectSpread2({}, defaultStyle), transitionStyles[state])
}, children);
});
};
AccordionItemBody.displayName = "AccordionItemBody";
var StyledChoose$1 = styled__default["default"].button.withConfig({
displayName: "Styles__StyledChoose",
componentId: "sc-1j2qv02-0"
})(["", " ", " ", " ", " height:32px;padding:0 16px;transition:all 0.3s ease;border:1px solid var(--border-primary);font-size:13px;transition-duration:0.3s;&:hover{", " box-shadow:inset 0 0 5px 3px var(--color-primary-300);}", ""], {
"margin": "0px",
"display": "inline-block",
"verticalAlign": "middle",
"fontWeight": "500",
"lineHeight": "1",
"textDecorationLine": "none",
"WebkitFontSmoothing": "antialiased",
"MozOsxFontSmoothing": "grayscale"
}, {
"cursor": "pointer",
"userSelect": "none",
"borderRadius": "0.5rem",
"textAlign": "center",
"color": "var(--color-theme-700)"
}, FontStyle, BoxSizingStyle, {
"borderColor": "var(--color-primary)"
}, function (props) {
return props.active && styled.css(["", " background-color:var(--color-primary-300);"], {
"zIndex": "0",
"borderColor": "var(--color-primary)"
});
});
StyledChoose$1.displayName = "StyledChoose";
var _excluded$s = ["children", "disabled", "active", "className"];
/**
* Choose component
*/
var Choose = function Choose(_ref) {
var children = _ref.children,
_ref$disabled = _ref.disabled,
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
_ref$active = _ref.active,
active = _ref$active === void 0 ? false : _ref$active,
className = _ref.className,
args = _objectWithoutProperties(_ref, _excluded$s);
return /*#__PURE__*/React__default["default"].createElement(StyledChoose$1, _extends({
disabled: disabled,
className: classNames__default["default"]("c-choose", className),
active: active
}, args), children);
};
Choose.displayName = "Choose";
var StyledChoose = styled__default["default"](Choose).withConfig({
displayName: "ChooseV2__StyledChoose",
componentId: "sc-142e30o-0"
})(["", ""], function (props) {
return !props.active && styled.css(["background-color:transparent !important;"]);
});
var ChooseV2 = function ChooseV2(_ref) {
var _ref$required = _ref.required,
required = _ref$required === void 0 ? false : _ref$required,
_ref$multiple = _ref.multiple,
multiple = _ref$multiple === void 0 ? false : _ref$multiple,
_ref$invalid = _ref.invalid,
invalid = _ref$invalid === void 0 ? false : _ref$invalid,
options = _ref.options,
selected = _ref.selected,
onChange = _ref.onChange;
var handleSelect = function handleSelect(id) {
if (multiple) {
var newSelected = selected.includes(id) ? selected.filter(function (s) {
return s !== id;
}) : [...selected, id];
if (required && newSelected.length === 0) {
return;
}
onChange(newSelected);
} else {
if (required && selected.includes(id)) {
return;
}
var _newSelected = selected.includes(id) ? [] : [id];
onChange(_newSelected);
}
};
return /*#__PURE__*/React__default["default"].createElement(ButtonGroup, {
invalid: invalid
}, options.map(function (option) {
return /*#__PURE__*/React__default["default"].createElement(StyledChoose, {
key: option.id,
active: selected.includes(option.id),
disabled: option.disabled,
onClick: function onClick() {
return handleSelect(option.id);
}
}, option.name);
}));
};
var StyledLinkElement = styled__default["default"].div.withConfig({
displayName: "Styles__StyledLinkElement",
componentId: "sc-1c1jdox-0"
})([""]);
var StyledLink = styled__default["default"].a.withConfig({
displayName: "Styles__StyledLink",
componentId: "sc-1c1jdox-1"
})(["", " ", " ", " border:none;height:32px;transition:background-color 0.3s ease,box-shadow 0.3s ease,color 0.3s ease,border-color 0.3s ease;svg{fill:currentColor;}&::-moz-focus-inner{border:0;}&:focus{outline:none;}&:hover{text-decoration:none;}", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", ""], FontStyle, BoxSizingStyle, {
"margin": "0px",
"display": "inline-flex",
"cursor": "pointer",
"userSelect": "none",
"alignItems": "center",
"justifyContent": "center",
"fontSize": "0.875rem",
"lineHeight": "1",
"fontWeight": "500",
"textDecorationLine": "none",
"WebkitFontSmoothing": "antialiased",
"MozOsxFontSmoothing": "grayscale"
}, function (props) {
return props.disabled && styled.css(["cursor:default;opacity:50%;pointer-events:none;"]);
}, function (props) {
return props.size === "small" && styled.css(["height:24px;"]);
}, function (props) {
return props.size === "big" && styled.css(["height:40px;"]);
}, function (props) {
return (props.variant === "primary" || props.variant === "contained") && styled.css(["padding:0 16px;background-color:var(--color-primary);border-radius:16px;color:var(--color-theme-100);&:focus,&:hover{box-shadow:0 3px 6px -2px var(--color-primary-500);background-color:var(--color-primary-800);}&:active{box-shadow:0 4px 10px -2px var(--color-primary-600);background-color:var(--color-primary-800);}"]);
}, function (props) {
return (props.variant === "secondary" || props.variant === "outlined") && styled.css(["padding:0 16px;background-color:transparent;border-radius:16px;border:solid 1px var(--color-theme-600);color:var(--color-theme-600);&:focus,&:hover{border-color:var(--color-primary);color:var(--color-primary);}&:active{border-color:var(--color-primary);color:var(--color-primary);background-color:var(--color-primary-200);}"]);
}, function (props) {
return (props.variant === "tertiary" || props.variant === "text colored") && styled.css(["padding:0 8px;background-color:transparent;border-radius:6px;color:var(--color-primary);&:focus,&:hover{background-color:var(--color-primary-200);}&:active{background-color:var(--color-primary-300);}"]);
}, function (props) {
return (props.variant === "option" || props.variant === "text gray") && styled.css(["padding:0 8px;background-color:transparent;border-radius:6px;color:var(--color-theme-600);&:focus,&:hover{background-color:var(--color-theme-300);color:var(--color-theme-900);}&:active{background-color:var(--color-theme-400);color:var(--color-theme-900);}"]);
}, function (props) {
return props.variant === "dark transparent" && styled.css(["padding:0 8px;background-color:rgba(0,0,0,0.5);border-radius:var(--ac-br-6);color:var(--only-white);&:hover{background-color:rgba(0,0,0,0.85);}&:active{background-color:var(--only-black);}"]);
}, function (props) {
return props.variant === "circle raised" && styled.css(["padding:0 6px;background-color:transparent;border-radius:var(--ac-br-rounded);color:var(--color-theme-700);transition:ease 0.3s all;&:hover{background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary);}&:active{background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary-hover);}"]);
}, function (props) {
return props.variant === "text link-primary" && styled.css(["line-height:14px;letter-spacing:0.25px;color:var(--color-primary);text-decoration:underline var(--color-primary);text-underline-offset:3px;height:fit-content;&:hover{text-decoration:none;}&:focus{text-decoration:none;outline:1px solid var(--color-primary);outline-offset:2px;border-radius:2px;}"]);
}, function (props) {
return props.variant === "text link-gray" && styled.css(["line-height:14px;letter-spacing:0.25px;color:var(--color-theme-700);text-decoration:underline var(--color-theme-700);text-underline-offset:3px;height:fit-content;&:hover{text-decoration:none;}&:focus{text-decoration:none;outline:1px solid var(--color-primary);outline-offset:2px;border-radius:2px;}"]);
}, function (props) {
return props.$iconOnly && styled.css(["padding:0;width:32px;", " ", ""], props.size === "small" && styled.css(["radius:16px;width:24px;"]), props.size === "big" && styled.css(["radius:20px;width:40px;"]));
}, function (props) {
return (props.variant === "primary" || props.variant === "contained" || props.variant === "secondary" || props.variant === "outlined") && styled.css(["", ":first-child svg{margin-left:-6px;}", ":last-child svg{margin-right:-6px;}", " ", ""], StyledLinkElement, StyledLinkElement, props.size === "small" && styled.css(["radius:16px;"]), props.size === "big" && styled.css(["radius:20px;"]));
}, function (props) {
return (props.variant === "tertiary" || props.variant === "text colored" || props.variant === "option" || props.variant === "text gray" || props.variant === "dark transparent") && styled.css(["", ":first-child svg{margin-left:-4px;}", ":last-child svg{margin-right:-4px;}", " ", ""], StyledLinkElement, StyledLinkElement, props.size === "small" && styled.css(["radius:4px;"]), props.size === "big" && styled.css(["radius:8px;"]));
});
var StyledLinkElements = styled__default["default"].div.withConfig({
displayName: "Styles__StyledLinkElements",
componentId: "sc-1c1jdox-2"
})(["display:flex;align-items:center;", "{display:inline-flex;svg{margin:0 4px;}}"], StyledLinkElement);
var StyledBackLink = styled__default["default"].a.withConfig({
displayName: "Styles__StyledBackLink",
componentId: "sc-1c1jdox-3"
})(["", " ", " ", " text-decoration:none;border:transparent 1px solid;border-radius:20px;height:32px;font-size:10px;font-weight:500;display:table-cell;vertical-align:middle;&:before,&:after{content:\"\";", " border-width:0 1px 1px 0;position:absolute;left:0;transition:all ease 0.3s;}&:before{", " transform:translateX(1rem) translateY(0.1rem) rotate(135deg);}&:after{", " transform:translateX(2rem) translateY(0.1rem) rotate(135deg);}&:hover{text-decoration:none;border-color:var(--border-primary);&:before{", " transform:translateX(0rem) translateY(0.1rem) rotate(135deg);}&:after{", " transform:translateX(1rem) translateY(0.1rem) rotate(135deg);}}"], FontStyle, BoxSizingStyle, {
"display": "inline-flex",
"cursor": "pointer",
"paddingLeft": "2rem",
"paddingRight": "1rem",
"verticalAlign": "middle",
"fontSize": "0.6875rem",
"textTransform": "uppercase",
"color": "var(--color-theme-600)"
}, {
"display": "inline-block",
"height": "0.5rem",
"width": "0.5rem",
"borderStyle": "solid",
"backgroundRepeat": "no-repeat",
"padding": "0px",
"color": "var(--color-theme-700)"
}, {
"opacity": "1"
}, {
"opacity": "0"
}, {
"opacity": "0"
}, {
"opacity": "1"
});
StyledBackLink.displayName = "StyledBackLink";
StyledLinkElement.displayName = "StyledLinkElement";
StyledLinkElements.displayName = "StyledLinkElements";
StyledLink.displayName = "StyledLink";
var _excluded$r = ["children", "className"];
/**
* Back link component
*/
var BackLink = function BackLink(_ref) {
var children = _ref.children,
className = _ref.className,
args = _objectWithoutProperties(_ref, _excluded$r);
return /*#__PURE__*/React__default["default"].createElement(StyledBackLink, _extends({
className: classNames__default["default"]("c-back-link", className)
}, args), children);
};
BackLink.displayName = "BackLink";
var _excluded$q = ["as", "children", "variant", "size", "disabled", "className"];
/**
* Link component
*/
var Link = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var as = _ref.as,
children = _ref.children,
_ref$variant = _ref.variant,
variant = _ref$variant === void 0 ? "contained" : _ref$variant,
size = _ref.size,
_ref$disabled = _ref.disabled,
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
className = _ref.className,
args = _objectWithoutProperties(_ref, _excluded$q);
var Component = as || "a";
return /*#__PURE__*/React__default["default"].createElement(StyledLink, _extends({
ref: ref,
as: Component,
disabled: disabled,
className: classNames__default["default"]("c-link", className, {
"c-link--contained": variant === "primary" || variant === "contained",
"c-link--outlined": variant === "secondary" || variant === "outlined",
"c-link--text_colored": variant === "tertiary" || variant === "text colored",
"c-link--text_gray": variant === "option" || variant === "text gray",
"c-link--dark_transparent": variant === "dark transparent",
"c-link--circle_raised": variant === "circle raised",
"c-link--big": size === "big",
"c-link--small": size === "small",
"c-link--icon-only": children instanceof Object && !(children instanceof Array),
"c-link--disabled": disabled
}),
variant: variant,
size: size,
$iconOnly: children instanceof Object && !(children instanceof Array)
}, args), children instanceof Array ? /*#__PURE__*/React__default["default"].createElement(StyledLinkElements, {
className: "c-link__elements"
}, children.map(function (value, index) {
return value ? /*#__PURE__*/React__default["default"].createElement(StyledLinkElement, {
className: "c-link__elements__element",
key: index
}, value) : null;
})) : children);
});
Link.displayName = "Link";
var StyledSelectDate = styled__default["default"].div.withConfig({
displayName: "Styles__StyledSelectDate",
componentId: "sc-1jkx994-0"
})(["", " ", ""], FontStyle, BoxSizingStyle);
StyledSelectDate.displayName = "StyledSelectDate";
var StyledSelectDateButton = styled__default["default"].button.withConfig({
displayName: "Styles__StyledSelectDateButton",
componentId: "sc-1jkx994-1"
})(["margin:0;padding:0;border:none;background:none;width:auto;height:auto;color:var(--color-theme-700);span,svg{cursor:pointer;}span{color:var(--color-secondary);}svg:hover{fill:var(--color-secondary);}"]);
StyledSelectDateButton.displayName = "StyledSelectDateButton";
var StyledConfirmDialog = styled__default["default"](ConfirmDialog).withConfig({
displayName: "Styles__StyledConfirmDialog",
componentId: "sc-1jkx994-2"
})([".modal-header{padding:16px 30px;h1{margin:0;font-size:16px;}}.modal-body{padding:10px 30px;}.modal-divider{border-top:1px solid var(--border-primary);height:1px;}.modal-footer{padding:16px 30px;}"]);
StyledConfirmDialog.displayName = "StyledConfirmDialog";
var StyledSelectDateDatePicker = styled__default["default"].div.withConfig({
displayName: "Styles__StyledSelectDateDatePicker",
componentId: "sc-1jkx994-3"
})(["", " color:red;"], {
"paddingBottom": "0.5rem",
"paddingTop": "1rem"
});
StyledSelectDateDatePicker.displayName = "StyledSelectDateDatePicker";
var StyledSelectDateFooter = styled__default["default"].div.withConfig({
displayName: "Styles__StyledSelectDateFooter",
componentId: "sc-1jkx994-4"
})(["", " border-top:1px solid var(--border-primary);", ""], {
"paddingLeft": "1rem",
"paddingRight": "1rem",
"paddingTop": "0.5rem",
"paddingBottom": "0.5rem"
}, function (props) {
return props.$mode === "instant" && styled.css(["", ""], {
"display": "flex"
});
});
StyledSelectDateFooter.displayName = "StyledSelectDateFooter";
var StyledSelectDateButtons = styled__default["default"].div.withConfig({
displayName: "Styles__StyledSelectDateButtons",
componentId: "sc-1jkx994-5"
})(["", ""], {
"display": "flex"
});
StyledSelectDateButtons.displayName = "StyledSelectDateButtons";
var StyledButtonSave = styled__default["default"](Button).withConfig({
displayName: "Styles__StyledButtonSave",
componentId: "sc-1jkx994-6"
})(["", ""], {
"marginRight": "0.5rem"
});
StyledButtonSave.displayName = "StyledButtonSave";
var StyledButtonClose = styled__default["default"](Button).withConfig({
displayName: "Styles__StyledButtonClose",
componentId: "sc-1jkx994-7"
})(["", ""], {
"marginLeft": "auto"
});
StyledButtonClose.displayName = "StyledButtonClose";
var StyledButtonCloseColored = styled__default["default"](Button).withConfig({
displayName: "Styles__StyledButtonCloseColored",
componentId: "sc-1jkx994-8"
})(["", ""], {
"marginLeft": "auto",
"marginRight": "auto"
});
StyledButtonCloseColored.displayName = "StyledButtonCloseColored";
var StyledIconComponent = styled__default["default"].svg.withConfig({
displayName: "Styles__StyledIconComponent",
componentId: "sc-1jkx994-9"
})(["span,svg{cursor:pointer;}span{color:var(--color-secondary);}svg:hover{fill:var(--color-secondary);}"]);
StyledIconComponent.displayName = "StyledIconComponent";
var SelectDateTarget = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var IconComponent = _ref.icon,
_ref$title = _ref.title,
title = _ref$title === void 0 ? "" : _ref$title,
onClick = _ref.onClick,
_ref$forceHideTooltip = _ref.forceHideTooltip,
forceHideTooltip = _ref$forceHideTooltip === void 0 ? false : _ref$forceHideTooltip,
targetIconClassName = _ref.targetIconClassName,
popperTooltipStyle = _ref.popperTooltipStyle,
popperTooltipClassName = _ref.popperTooltipClassName,
_ref$active = _ref.active,
active = _ref$active === void 0 ? false : _ref$active;
return /*#__PURE__*/React__default["default"].createElement(Tooltip, {
title: title,
popperTooltipStyle: popperTooltipStyle,
popperTooltipClassName: popperTooltipClassName,
disable: forceHideTooltip || title === ""
}, /*#__PURE__*/React__default["default"].createElement(IconButton, {
variant: "text gray",
size: "small",
active: active,
ref: ref,
onClick: onClick,
type: "button"
}, /*#__PURE__*/React__default["default"].createElement(StyledIconComponent, {
as: IconComponent,
className: classNames__default["default"]("date-picker-target", targetIconClassName)
})));
});
SelectDateTarget.displayName = "SelectDateTarget";
var getShortDateFormat = function getShortDateFormat(value) {
return value.replace(/Y|,$/gi, "").trim();
};
var formatDate = function formatDate(value) {
var format = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "YYYY-MM-DD";
var long = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
if (typeof value === "undefined") {
return "";
}
var date;
var year;
if (typeof value === "number") {
date = moment__default$1["default"].unix(value);
year = moment__default$1["default"]().utc().year();
} else {
date = moment__default$1["default"](value);
year = moment__default$1["default"]().year();
}
if (!long) {
if (date.year() === year) {
return date.format(getShortDateFormat(format));
}
}
return date.format(format);
};
var isDayInRange = function isDayInRange(day, data) {
var fromMoment = moment__default["default"].unix(data.from).utc();
var toMoment = moment__default["default"].unix(data.to).utc();
if (data.repeating) {
var year = day.year();
var from = moment__default["default"].utc({
year,
month: fromMoment.month(),
date: fromMoment.date()
});
var to = moment__default["default"].utc({
year,
month: toMoment.month(),
date: toMoment.date()
});
return day.isSameOrAfter(from, "day") && day.isSameOrBefore(to, "day");
}
return day.isSameOrAfter(fromMoment, "day") && day.isSameOrBefore(toMoment, "day");
};
var SelectDate = function SelectDate(_ref) {
var _ref$changeMode = _ref.changeMode,
mode = _ref$changeMode === void 0 ? "instant" : _ref$changeMode,
_ref$trigger = _ref.trigger,
labelType = _ref$trigger === void 0 ? "text" : _ref$trigger,
_ref$saveButtonText = _ref.saveButtonText,
saveButtonText = _ref$saveButtonText === void 0 ? "Save" : _ref$saveButtonText,
_ref$cancelButtonText = _ref.cancelButtonText,
cancelButtonText = _ref$cancelButtonText === void 0 ? "Cancel" : _ref$cancelButtonText,
_ref$clearButtonText = _ref.clearButtonText,
clearButtonText = _ref$clearButtonText === void 0 ? "Clear" : _ref$clearButtonText,
_ref$modalHeaderText = _ref.modalHeaderText,
modalHeaderText = _ref$modalHeaderText === void 0 ? "Discard changes?" : _ref$modalHeaderText,
_ref$modalDiscardMess = _ref.modalDiscardMessage,
modalDiscardMessage = _ref$modalDiscardMess === void 0 ? "All unsaved changes will be lost." : _ref$modalDiscardMess,
_ref$modalDiscardBtnT = _ref.modalDiscardBtnText,
modalDiscardBtnText = _ref$modalDiscardBtnT === void 0 ? "OK" : _ref$modalDiscardBtnT,
_ref$modalCancelBtnTe = _ref.modalCancelBtnText,
modalCancelBtnText = _ref$modalCancelBtnTe === void 0 ? "Cancel" : _ref$modalCancelBtnTe,
onDayClick = _ref.onDayClick,
onSave = _ref.onSave,
onCancel = _ref.onCancel,
onToggleDatePicker = _ref.onToggleDatePicker,
_ref$required = _ref.required,
dateRequired = _ref$required === void 0 ? false : _ref$required,
_ref$longDateFormat = _ref.longDateFormat,
longDateFormat = _ref$longDateFormat === void 0 ? false : _ref$longDateFormat,
_ref$defaultShowDateP = _ref.defaultShowDatePicker,
defaultShowDatePicker = _ref$defaultShowDateP === void 0 ? false : _ref$defaultShowDateP,
_ref$firstDayOfWeek = _ref.firstDayOfWeek,
firstDayOfWeek = _ref$firstDayOfWeek === void 0 ? 0 : _ref$firstDayOfWeek,
selectedDays = _ref.selectedDays,
_ref$selectionMode = _ref.selectionMode,
selectionMode = _ref$selectionMode === void 0 ? "custom" : _ref$selectionMode,
menuClassName = _ref.menuClassName,
targetClassName = _ref.targetClassName,
icon = _ref.icon,
_ref$defaultLabelText = _ref.defaultLabelText,
defaultLabelText = _ref$defaultLabelText === void 0 ? "Set..." : _ref$defaultLabelText,
targetTextClassName = _ref.targetTextClassName,
targetIconClassName = _ref.targetIconClassName,
backgroundElementClass = _ref.backgroundElementClass,
dateFormat = _ref.dateFormat,
forceClose = _ref.forceClose,
defaultMonth = _ref.defaultMonth,
_ref$daysToModify = _ref.daysToModify,
daysToModify = _ref$daysToModify === void 0 ? [] : _ref$daysToModify,
_ref$weekends = _ref.weekends,
weekends = _ref$weekends === void 0 ? [] : _ref$weekends,
_ref$weekendLabel = _ref.weekendLabel,
weekendLabel = _ref$weekendLabel === void 0 ? "Weekend" : _ref$weekendLabel,
_ref$nonWorkingDaysOf = _ref.nonWorkingDaysOfWeek,
_nonWorkingDaysOfWeek = _ref$nonWorkingDaysOf === void 0 ? [] : _ref$nonWorkingDaysOf,
_ref$nonWorkingDaysOf2 = _ref.nonWorkingDaysOfWeekLabel,
nonWorkingDaysOfWeekLabel = _ref$nonWorkingDaysOf2 === void 0 ? "Unavailable" : _ref$nonWorkingDaysOf2,
_ref$weekendIsSelecta = _ref.weekendIsSelectable,
weekendIsSelectable = _ref$weekendIsSelecta === void 0 ? false : _ref$weekendIsSelecta,
tooltipText = _ref.tooltipText,
popperTooltipClassName = _ref.popperTooltipClassName,
popperClassName = _ref.popperClassName,
popperTooltipStyle = _ref.popperTooltipStyle,
position = _ref.position,
disableDaysBefore = _ref.disableDaysBefore,
enableYearPicker = _ref.enableYearPicker,
disableAnimations = _ref.disableAnimations,
disabledDaysAfter = _ref.disabledDaysAfter,
onChange = _ref.onChange;
var labelText = React.useMemo(function () {
if (!selectedDays) {
return defaultLabelText;
} else if (!selectedDays.from && !selectedDays.to) {
return defaultLabelText;
} else {
var formattedEndDate = selectedDays.to ? formatDate(toMoment(selectedDays.to), dateFormat, longDateFormat) : "";
var formattedStartDate = selectedDays.from ? formatDate(toMoment(selectedDays === null || selectedDays === void 0 ? void 0 : selectedDays.from), dateFormat, longDateFormat) : "";
if (selectedDays.to && selectedDays.from && toMoment(selectedDays.from).isSame(toMoment(selectedDays.to))) {
return formattedEndDate;
}
if (!selectedDays.to && selectedDays.from) {
return formattedStartDate;
}
return "".concat(formattedStartDate, " - ").concat(formattedEndDate);
}
}, [selectedDays, dateFormat, defaultLabelText, longDateFormat]);
var modifiers = React.useMemo(function () {
var userAvailabilities = daysToModify.filter(function (data) {
return data.type === "user_day_off";
});
var globalDaysOff = daysToModify.filter(function (data) {
return data.type === "global_day_off";
});
var selectableGlobalDaysOff = daysToModify.filter(function (data) {
return data.type === "selectable_global_day_off";
});
return {
userAvailability: function userAvailability(day) {
var matchedData = userAvailabilities.find(function (data) {
return isDayInRange(day, data);
});
return {
matched: !!matchedData,
title: matchedData ? matchedData.title : null
};
},
weekend: function weekend(day) {
var isWeekend = weekends.includes(day.day());
return {
matched: isWeekend,
title: isWeekend ? weekendLabel : null
};
},
nonWorkingDay: function nonWorkingDay(day) {
if (weekends.includes(day.day())) {
return {
matched: true,
title: ""
};
}
var nonWorkingDays = [...selectableGlobalDaysOff, ...globalDaysOff];
var matchedData = nonWorkingDays.find(function (data) {
return isDayInRange(day, data);
});
return {
matched: !!matchedData,
title: matchedData ? matchedData.title : null
};
},
nonWorkingDaysOfWeek: function nonWorkingDaysOfWeek(day) {
var isNonWorkingDay = _nonWorkingDaysOfWeek.includes(day.day());
return {
matched: isNonWorkingDay,
title: isNonWorkingDay ? nonWorkingDaysOfWeekLabel : null
};
},
day_disabled: function day_disabled(day) {
var globalDayOff = globalDaysOff.find(function (data) {
return isDayInRange(day, data);
});
return {
matched: !!globalDayOff,
title: null
};
}
};
}, [daysToModify, _nonWorkingDaysOfWeek, nonWorkingDaysOfWeekLabel, weekendLabel, weekends]);
var renderTargetEl = React.useMemo(function () {
if (labelType === "icon" && icon) {
return /*#__PURE__*/React__default["default"].createElement(SelectDateTarget, {
icon: icon,
title: tooltipText,
targetIconClassName: targetIconClassName,
popperTooltipClassName: popperTooltipClassName,
popperTooltipStyle: popperTooltipStyle
});
}
if (typeof labelType === "function") {
return labelType(labelText);
}
return /*#__PURE__*/React__default["default"].createElement(StyledSelectDateButton, {
type: "button",
className: classNames__default["default"]("date-picker-target", targetClassName)
}, /*#__PURE__*/React__default["default"].createElement("span", {
className: targetTextClassName
}, labelText));
}, [icon, labelText, labelType, popperTooltipClassName, popperTooltipStyle, targetClassName, targetIconClassName, targetTextClassName, tooltipText]);
return /*#__PURE__*/React__default["default"].createElement(StyledSelectDate, {
className: "select-date"
}, labelType !== "inline" ? /*#__PURE__*/React__default["default"].createElement(DatePicker, {
target: renderTargetEl,
position: position,
menuClassName: menuClassName,
popperClassName: popperClassName,
month: defaultMonth,
instant: mode === "instant",
mode: selectionMode,
required: dateRequired,
selected: selectedDays,
firstDayOfWeek: firstDayOfWeek,
saveLabel: saveButtonText,
cancelLabel: cancelButtonText,
clearLabel: clearButtonText,
onSave: onSave,
onChange: onChange,
onClose: onCancel,
modifiers: modifiers,
modalHeaderText: modalHeaderText,
modalDiscardMessage: modalDiscardMessage,
modalDiscardBtnText: modalDiscardBtnText,
modalCancelBtnText: modalCancelBtnText,
disabledDaysBefore: disableDaysBefore,
disabledDaysAfter: disabledDaysAfter,
backgroundElementClass: backgroundElementClass,
disabled: weekendIsSelectable ? [] : weekends,
popperTooltipClassName: popperTooltipClassName,
popperTooltipStyle: popperTooltipStyle,
open: defaultShowDatePicker,
onCalendarToggle: onToggleDatePicker,
onDayClick: onDayClick,
enableConfirmModal: mode === "atomic" && !dateRequired,
disableYearPicker: !enableYearPicker,
disableAnimations: disableAnimations,
showControls: true,
forceClose: forceClose
}) : /*#__PURE__*/React__default["default"].createElement(DatePicker, {
month: defaultMonth,
instant: mode === "instant",
mode: selectionMode,
required: dateRequired,
selected: selectedDays,
firstDayOfWeek: firstDayOfWeek,
saveLabel: saveButtonText,
cancelLabel: cancelButtonText,
clearLabel: clearButtonText,
disabledDaysBefore: disableDaysBefore,
disabledDaysAfter: disabledDaysAfter,
popperTooltipClassName: popperTooltipClassName,
popperTooltipStyle: popperTooltipStyle,
disabled: weekendIsSelectable ? [] : weekends,
onSave: onSave,
onChange: onChange,
modifiers: modifiers,
onDayClick: onDayClick,
disableYearPicker: !enableYearPicker,
disableAnimations: disableAnimations,
showControls: true,
open: true
}));
};
SelectDate.displayName = "SelectDate";
var StyledToastMessage = styled__default["default"].div.withConfig({
displayName: "Styles__StyledToastMessage",
componentId: "sc-7wr5ky-0"
})(["display:flex;flex-direction:row;align-items:center;height:36px;width:fit-content;max-width:100%;padding:10px 8px 10px 16px;border-radius:18px;", " ", " ", " ", " ", " ", ""], FontStyle, BoxSizingStyle, function (props) {
return props.$type === "error" && styled.css(["background-color:#f1a5a5;", ""], props.$dropShadow && styled.css(["box-shadow:0px 7px 12px -4px rgba(234,179,179,0.7);"]));
}, function (props) {
return props.$type === "success" && styled.css(["background-color:#afdfdb;", ""], props.$dropShadow && styled.css(["box-shadow:0px 7px 12px -4px rgba(182,218,215,0.7);"]));
}, function (props) {
return props.$type === "general" && styled.css(["background-color:#bddff6;", ""], props.$dropShadow && styled.css(["box-shadow:0px 7px 12px -4px rgba(166,199,220,0.7);"]));
}, function (props) {
return props.$type === "warning" && styled.css(["background-color:#ffffd1;", ""], props.$dropShadow && styled.css(["box-shadow:0px 7px 12px -4px rgba(242,242,208,0.7);"]));
});
var StyledToastMessageText = styled__default["default"].div.withConfig({
displayName: "Styles__StyledToastMessageText",
componentId: "sc-7wr5ky-1"
})(["", " ", " ", " ", " color:rgba(48,48,55,0.65);"], {
"fontSize": "0.75rem"
}, {
"fontWeight": "700"
}, {
"overflow": "hidden",
"textOverflow": "ellipsis",
"whiteSpace": "nowrap"
}, {
"marginRight": "0.5rem"
});
var StyledCloseSmallIcon = styled__default["default"](CloseSmallIcon$1).withConfig({
displayName: "Styles__StyledCloseSmallIcon",
componentId: "sc-7wr5ky-2"
})(["fill:rgba(48,48,55,0.3);flex-shrink:0;cursor:pointer;&:hover{fill:rgba(48,48,55,0.65);}"]);
StyledToastMessage.displayName = "StyledToastMessage";
StyledCloseSmallIcon.displayName = "StyledCloseSmallIcon";
var _excluded$p = ["text", "type", "onClose", "dismissible", "dropShadow", "timeout"];
var ToastMessage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var text = _ref.text,
type = _ref.type,
onClose = _ref.onClose,
_ref$dismissible = _ref.dismissible,
dismissible = _ref$dismissible === void 0 ? false : _ref$dismissible,
_ref$dropShadow = _ref.dropShadow,
dropShadow = _ref$dropShadow === void 0 ? false : _ref$dropShadow,
_ref$timeout = _ref.timeout,
timeout = _ref$timeout === void 0 ? 0 : _ref$timeout,
rest = _objectWithoutProperties(_ref, _excluded$p);
var handleOnClose = React.useCallback(function () {
if (typeof onClose === "function") {
onClose();
}
}, [onClose]);
React.useEffect(function () {
if (timeout > 0) {
var timer = setTimeout(handleOnClose, timeout);
return function () {
return clearTimeout(timer);
};
}
}, [dismissible, timeout, handleOnClose]);
return /*#__PURE__*/React__default["default"].createElement(StyledToastMessage, _extends({
ref: ref,
$type: type,
$dropShadow: dropShadow
}, rest), /*#__PURE__*/React__default["default"].createElement(StyledToastMessageText, null, text), dismissible ? /*#__PURE__*/React__default["default"].createElement(StyledCloseSmallIcon, {
onClick: handleOnClose
}) : null);
});
ToastMessage.displayName = "ToastMessage";
var StyledValueButtonLabel = styled__default["default"](Body2).withConfig({
displayName: "Styles__StyledValueButtonLabel",
componentId: "sc-7n59oz-0"
})(["opacity:60%;margin-right:2px;"]);
StyledValueButtonLabel.displayName = "StyledValueButtonLabel";
var StyledValueButtonValue = styled__default["default"](Body2).withConfig({
displayName: "Styles__StyledValueButtonValue",
componentId: "sc-7n59oz-1"
})([""]);
StyledValueButtonValue.displayName = "StyledValueButtonValue";
var StyledValueButton$1 = styled__default["default"](Button).withConfig({
displayName: "Styles__StyledValueButton",
componentId: "sc-7n59oz-2"
})(["", " ", ""], function (props) {
return props.$active && styled.css(["", ",", "{", " color:var(--color-theme-900) !important;}svg{fill:var(--color-primary);}"], StyledValueButtonLabel, StyledValueButtonValue, {
"pointerEvents": "none"
});
}, function (props) {
return props.$active !== true && styled.css(["{&:hover{", ",", "{", " color:var(--color-theme-900) !important;}}"], StyledValueButtonLabel, StyledValueButtonValue, {
"pointerEvents": "none"
});
});
StyledValueButton$1.displayName = "StyledValueButton";
var _excluded$o = ["active", "alwaysShowIcon", "icon", "label", "value"];
var ValueButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var _ref$active = _ref.active,
active = _ref$active === void 0 ? false : _ref$active,
_ref$alwaysShowIcon = _ref.alwaysShowIcon,
alwaysShowIcon = _ref$alwaysShowIcon === void 0 ? false : _ref$alwaysShowIcon,
icon = _ref.icon,
label = _ref.label,
value = _ref.value,
args = _objectWithoutProperties(_ref, _excluded$o);
return /*#__PURE__*/React__default["default"].createElement(StyledValueButton$1, _extends({
className: "c-value-button"
}, args, {
ref: ref,
variant: "text gray",
$active: active
}), icon && alwaysShowIcon ? /*#__PURE__*/React__default["default"].cloneElement(icon, {
style: {
display: "inline-block"
}
}) : null, label ? /*#__PURE__*/React__default["default"].createElement(StyledValueButtonLabel, {
color: "secondary",
weight: "medium",
className: "c-value-button__label"
}, label, ":") : null, /*#__PURE__*/React__default["default"].createElement(StyledValueButtonValue, {
color: "secondary",
weight: "medium",
className: "c-value-button__value"
}, value));
});
ValueButton.displayName = "ValueButton";
var StyledSelectTrigger = styled__default["default"](Trigger).withConfig({
displayName: "Styles__StyledSelectTrigger",
componentId: "sc-9799p2-0"
})(["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 disabled = _ref2.disabled;
return disabled && styled.css(["opacity:50%;cursor:default;"]);
}, function (_ref3) {
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 (_ref5) {
var $size = _ref5.$size;
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);"]);
}, function (_ref8) {
var $size = _ref8.$size;
return $size === "biggest" && styled.css(["height:48px;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 (_ref9) {
var $open = _ref9.$open;
return !$open && styled.css(["transform:rotate(180deg);"]);
});
StyledCaretIcon.displayName = "StyledCaretIcon";
var _excluded$n = ["children", "type", "size", "invalid", "open", "endAdornment", "typographyProps", "mode"];
var SelectTrigger = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var children = _ref.children,
_ref$type = _ref.type,
type = _ref$type === void 0 ? "button" : _ref$type,
_ref$size = _ref.size,
size = _ref$size === void 0 ? "regular" : _ref$size,
_ref$invalid = _ref.invalid,
invalid = _ref$invalid === void 0 ? false : _ref$invalid,
_ref$open = _ref.open,
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$n);
var variant = React.useMemo(function () {
if (size === "big") {
return "Body 1";
}
if (size === "biggest") {
return "Header 2";
}
return "Body 2";
}, [size]);
return /*#__PURE__*/React__default["default"].createElement(StyledSelectTrigger, _extends({
ref: ref,
role: "button",
type: type,
$size: size,
$invalid: invalid,
"aria-invalid": invalid,
$mode: mode
}, rest), /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
as: "div",
overflow: "truncate",
whitespace: "no-wrap",
variant: variant,
weight: size === "biggest" ? "bold" : "regular",
color: mode === "flat" && invalid ? "alert" : undefined
}, typographyProps), children), endAdornment ? endAdornment : /*#__PURE__*/React__default["default"].createElement(StyledCaretIcon, {
$open: open
}));
});
SelectTrigger.displayName = "SelectTrigger";
var _excluded$m = ["mode", "selected", "min", "max", "onChange", "target", "triggerMode", "step"];
var renderOption = function renderOption(option) {
return /*#__PURE__*/React__default["default"].createElement("div", {
id: option.id
}, option.name);
};
var SelectTime = function SelectTime(_ref) {
var _ref$mode = _ref.mode,
mode = _ref$mode === void 0 ? "24" : _ref$mode,
selected = _ref.selected,
_ref$min = _ref.min,
min = _ref$min === void 0 ? "00:00" : _ref$min,
_ref$max = _ref.max,
max = _ref$max === void 0 ? "23:45" : _ref$max,
onChange = _ref.onChange,
target = _ref.target,
triggerMode = _ref.triggerMode,
_ref$step = _ref.step,
step = _ref$step === void 0 ? 15 : _ref$step,
rest = _objectWithoutProperties(_ref, _excluded$m);
var generateTimeOptions = function generateTimeOptions() {
var minTime = moment__default$1["default"](isValidTime(min) ? min : "00:00", "HH:mm");
var maxTime = moment__default$1["default"](isValidTime(max) ? max : "23:45", "HH:mm");
var options = [];
var currentTime = minTime.clone();
while (currentTime.isSameOrBefore(maxTime)) {
options.push({
id: currentTime.format("HH:mm"),
name: currentTime.format(mode === "12" ? "hh:mm A" : "HH:mm")
});
currentTime.add(step, "minutes");
}
return options;
};
var timeOptions = generateTimeOptions();
var displaySelectedTime = moment__default$1["default"](selected, "HH:mm").format(mode === "12" ? "hh:mm A" : "HH:mm");
var handleScrollToSelected = function handleScrollToSelected() {
if (selected) {
setTimeout(function () {
var _document$getElementB;
var selectedItem = (_document$getElementB = document.getElementById(selected)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.parentElement;
selectedItem === null || selectedItem === void 0 || selectedItem.scrollIntoView({
behavior: "smooth",
block: "center"
});
}, 50);
}
};
return /*#__PURE__*/React__default["default"].createElement(Select, {
options: timeOptions,
disabledInternalSort: true,
selected: selected,
disableSearch: true,
keepSameOptionsOrder: true,
target: target ? target : /*#__PURE__*/React__default["default"].createElement(SelectTrigger, _extends({
mode: triggerMode
}, rest), displaySelectedTime),
mode: "tiny",
renderOption: renderOption,
onChange: onChange,
forceCloseMenu: true,
onSelectOpen: handleScrollToSelected
});
};
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;}"]);
StyledToggleSlider.displayName = "StyledToggleSlider";
var StyledToggleSliderOff = styled__default["default"].div.withConfig({
displayName: "Styles__StyledToggleSliderOff",
componentId: "sc-4n6vdf-1"
})(["user-select:none;transform:translateX(-3px);opacity:1;transition-duration:0.3s;white-space:nowrap;color:var(--color-theme-600);"]);
StyledToggleSliderOff.displayName = "StyledToggleSliderOff";
var StyledToggleSliderOn = styled__default["default"].div.withConfig({
displayName: "Styles__StyledToggleSliderOn",
componentId: "sc-4n6vdf-2"
})(["user-select:none;transform:translateX(-30px);opacity:0;transition-duration:0.3s;white-space:nowrap;color:var(--page-paper-main);"]);
StyledToggleSliderOn.displayName = "StyledToggleSliderOn";
var StyledToggleCheckbox = styled__default["default"].input.withConfig({
displayName: "Styles__StyledToggleCheckbox",
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 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;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";
var _excluded$l = ["hovered", "className"];
var Toggle = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var hovered = _ref.hovered,
className = _ref.className,
args = _objectWithoutProperties(_ref, _excluded$l);
return /*#__PURE__*/React__default["default"].createElement(StyledToggle, {
className: classNames__default["default"]("c-toggle", className),
$isHovered: hovered,
tabIndex: 0
}, /*#__PURE__*/React__default["default"].createElement(StyledToggleCheckbox, _extends({
ref: ref,
type: "checkbox"
}, args)), /*#__PURE__*/React__default["default"].createElement(StyledToggleSlider, null, /*#__PURE__*/React__default["default"].createElement(StyledToggleSliderOn, null, "ON"), /*#__PURE__*/React__default["default"].createElement(StyledToggleSliderOff, null, "OFF")));
});
Toggle.displayName = "Toggle";
var StyledText = styled__default["default"](Body2).withConfig({
displayName: "Styles__StyledText",
componentId: "sc-1fx7urq-0"
})(["transition:ease 0.3s all;color:var(--color-primary);position:relative;"]);
StyledText.displayName = "StyledText";
var StyledAddCrossIcon = styled__default["default"](AddCrossIcon$1).withConfig({
displayName: "Styles__StyledAddCrossIcon",
componentId: "sc-1fx7urq-1"
})(["fill:var(--page-paper-main);background:var(--color-primary);border-radius:30px;padding:7px;box-sizing:content-box;"]);
StyledAddCrossIcon.displayName = "StyledAddCrossIcon";
var StyledAddToListButton = styled__default["default"]("button").withConfig({
displayName: "Styles__StyledAddToListButton",
componentId: "sc-1fx7urq-2"
})(["display:flex;justify-content:center;gap:12px;align-items:center;height:32px;padding:4px 16px 4px 4px;position:relative;background:none;border:none;cursor:pointer;&:before{content:\"\";display:block;height:2px;width:0%;position:absolute;left:16px;background:var(--color-primary);transition:ease 0.3s all;border-radius:30px;opacity:0;}&:hover{", "{color:var(--page-paper-main);}&:before{height:32px;width:100%;left:0;opacity:1;}", "{fill:var(--page-paper-main);transform:rotate(90deg);transition:ease 0.3s;}}"], StyledText, StyledAddCrossIcon);
StyledAddToListButton.displayName = "StyledAddToListButton";
var _excluded$k = ["text", "className"];
var AddToListButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var text = _ref.text,
className = _ref.className,
rest = _objectWithoutProperties(_ref, _excluded$k);
return /*#__PURE__*/React__default["default"].createElement(StyledAddToListButton, _extends({
ref: ref,
className: classNames__default["default"]("c--add-to-list-btn", className)
}, rest), /*#__PURE__*/React__default["default"].createElement(StyledAddCrossIcon, null), /*#__PURE__*/React__default["default"].createElement(StyledText, {
weight: "medium"
}, text));
});
AddToListButton.displayName = "AddToListButton";
var StyledProgressBar = styled__default["default"].div.withConfig({
displayName: "Styles__StyledProgressBar",
componentId: "sc-k5nm08-0"
})(["", " ", " ", ""], BoxSizingStyle, function (props) {
return props.$width ? styled.css(["width:", "%;"], props.$width) : styled.css(["width:100%;"]);
}, function (props) {
return props.$color ? styled.css(["background-color:", ";"], props.$color) : styled.css(["background-color:var(--color-theme-300);"]);
});
StyledProgressBar.displayName = "StyledProgressBar";
var StyledProgressBarProgress = styled__default["default"].div.withConfig({
displayName: "Styles__StyledProgressBarProgress",
componentId: "sc-k5nm08-1"
})(["", " ", ""], function (props) {
return props.$height ? styled.css(["height:", "px;"], props.$height) : styled.css(["height:3px;"]);
}, function (props) {
return props.$color ? styled.css(["background-color:", ";"], props.$color) : styled.css(["background-color:var(--color-secondary);"]);
});
StyledProgressBarProgress.displayName = "StyledProgressBarProgress";
var ProgressBar = function ProgressBar(_ref) {
var _ref$progress = _ref.progress,
progress = _ref$progress === void 0 ? 0 : _ref$progress,
backgroundColor = _ref.backgroundColor,
progressColor = _ref.progressColor,
_ref$stroke = _ref.stroke,
stroke = _ref$stroke === void 0 ? 3 : _ref$stroke,
_ref$width = _ref.width,
width = _ref$width === void 0 ? 100 : _ref$width,
className = _ref.className;
var progressNumber = React.useMemo(function () {
var width = progress;
if (progress > 100) {
width = 100;
}
if (progress < 0) {
width = 0;
}
return width;
}, [progress]);
var widthPercent = React.useMemo(function () {
var width_percent = width;
if (width > 100) {
width_percent = 100;
}
if (width <= 0) {
width_percent = 100;
}
return width_percent;
}, [width]);
var height = React.useMemo(function () {
var stroke_min = stroke;
if (stroke <= 0) {
stroke_min = 3;
}
return stroke_min;
}, [stroke]);
return /*#__PURE__*/React__default["default"].createElement(StyledProgressBar, {
className: classNames__default["default"]("c-progress-bar", className),
$color: backgroundColor,
$width: widthPercent
}, /*#__PURE__*/React__default["default"].createElement(StyledProgressBarProgress, {
className: "c-progress-bar__progress",
style: {
width: "".concat(progressNumber, "%")
},
$height: height,
$color: progressColor
}));
};
ProgressBar.displayName = "ProgressBar";
var StyledWrapper = styled__default["default"].div.withConfig({
displayName: "Styles__StyledWrapper",
componentId: "sc-o6dcyu-0"
})(["position:relative;display:inline-flex;"]);
StyledWrapper.displayName = "StyledWrapper";
var StyledChildrenWrapper = styled__default["default"].div.withConfig({
displayName: "Styles__StyledChildrenWrapper",
componentId: "sc-o6dcyu-1"
})(["position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;"]);
StyledChildrenWrapper.displayName = "StyledChildrenWrapper";
var StyledSvg = styled__default["default"].svg.withConfig({
displayName: "Styles__StyledSvg",
componentId: "sc-o6dcyu-2"
})(["transform:rotate(-90deg);"]);
StyledSvg.displayName = "StyledSvg";
var StyledBackgroundCircle = styled__default["default"].circle.withConfig({
displayName: "Styles__StyledBackgroundCircle",
componentId: "sc-o6dcyu-3"
})(["fill:transparent;transition:stroke-dashoffset 0.5s linear,stroke 300ms ease-out;", " ", ""], function (props) {
return props.$color ? styled.css(["stroke:", ";"], props.$color) : styled.css(["stroke:var(--color-theme-transparent-300);"]);
}, function (props) {
return props.$strokeDashOffset && styled.css(["stroke-dashoffset:", ";"], props.$strokeDashOffset);
});
StyledBackgroundCircle.displayName = "StyledBackgroundCircle";
var StyledForegroundCircle = styled__default["default"].circle.withConfig({
displayName: "Styles__StyledForegroundCircle",
componentId: "sc-o6dcyu-4"
})(["fill:transparent;transition:stroke-dashoffset 0.5s linear,stroke 300ms ease-out;", " ", " ", ""], function (props) {
return props.$roundStroke && styled.css(["stroke-linecap:round;"]);
}, function (props) {
return props.$color ? styled.css(["stroke:", ";"], props.$color) : styled.css(["stroke:var(--color-secondary);"]);
}, function (props) {
return props.$strokeDashOffset && styled.css(["stroke-dashoffset:", ";"], props.$strokeDashOffset);
});
StyledForegroundCircle.displayName = "StyledForegroundCircle";
var StyledProgressRingPercentage = styled__default["default"].text.withConfig({
displayName: "Styles__StyledProgressRingPercentage",
componentId: "sc-o6dcyu-5"
})(["transform:rotate(90deg);", " ", ""], function (props) {
return props.$color ? styled.css(["fill:", ";"], props.$color) : styled.css(["fill:var(--color-secondary);"]);
}, function (props) {
return props.$fontSize ? styled.css(["font-size:", "px;"], props.$fontSize) : styled.css(["font-size:10px;"]);
});
StyledProgressRingPercentage.displayName = "StyledProgressRingPercentage";
var _excluded$j = ["className", "children"];
var ProgressCircle = function ProgressCircle(_ref) {
var backgroundColor = _ref.backgroundColor,
progressColor = _ref.progressColor,
_ref$progress = _ref.progress,
progress = _ref$progress === void 0 ? 0 : _ref$progress,
_ref$radius = _ref.radius,
radius = _ref$radius === void 0 ? 20 : _ref$radius,
_ref$stroke = _ref.stroke,
stroke = _ref$stroke === void 0 ? 3 : _ref$stroke,
_ref$roundStroke = _ref.roundStroke,
roundStroke = _ref$roundStroke === void 0 ? false : _ref$roundStroke,
className = _ref.className,
_ref$showPercentage = _ref.showPercentage,
showPercentage = _ref$showPercentage === void 0 ? false : _ref$showPercentage,
fontSize = _ref.fontSize;
if (stroke > radius) {
console.warn("Stroke can not have value greater than the radius.");
stroke = radius;
}
var progressNumber = React.useMemo(function () {
var width = progress;
if (progress > 100) {
width = 100;
}
if (progress < 0) {
width = 0;
}
return width;
}, [progress]);
var normalizedRadius = React.useMemo(function () {
return radius - stroke / 2;
}, [radius, stroke]);
var circumference = React.useMemo(function () {
return normalizedRadius * 2 * Math.PI;
}, [normalizedRadius]);
var strokeDashoffsetOuter = React.useMemo(function () {
return circumference - (100 - progressNumber) / 100 * circumference;
}, [circumference, progressNumber]);
var strokeDashoffsetInner = React.useMemo(function () {
return circumference - progressNumber / 100 * circumference;
}, [circumference, progressNumber]);
return /*#__PURE__*/React__default["default"].createElement(StyledSvg, {
height: radius * 2,
width: radius * 2,
className: className,
"data-progress": progressNumber,
"data-testid": "progress-circle"
}, /*#__PURE__*/React__default["default"].createElement(StyledBackgroundCircle, {
$color: backgroundColor,
$strokeDashOffset: -strokeDashoffsetOuter,
strokeWidth: stroke,
strokeDasharray: "".concat(circumference, " ").concat(circumference),
r: normalizedRadius,
cx: radius,
cy: radius
}), /*#__PURE__*/React__default["default"].createElement(StyledForegroundCircle, {
$color: progressColor,
$strokeDashOffset: strokeDashoffsetInner,
strokeWidth: stroke,
strokeDasharray: "".concat(circumference, " ").concat(circumference),
$roundStroke: roundStroke,
r: normalizedRadius,
cx: radius,
cy: radius
}), showPercentage ? /*#__PURE__*/React__default["default"].createElement(StyledProgressRingPercentage, {
$color: progressColor,
$fontSize: fontSize,
x: "50%",
y: "-50%",
dominantBaseline: "central",
textAnchor: "middle"
}, progressNumber, "%") : null);
};
var ProgressRing = function ProgressRing(_ref2) {
var className = _ref2.className,
children = _ref2.children,
rest = _objectWithoutProperties(_ref2, _excluded$j);
return /*#__PURE__*/React__default["default"].createElement(StyledWrapper, {
className: classNames__default["default"](className),
"data-testid": "progress-ring"
}, /*#__PURE__*/React__default["default"].createElement(ProgressCircle, rest), children ? /*#__PURE__*/React__default["default"].createElement(StyledChildrenWrapper, null, children) : null);
};
ProgressRing.displayName = "ProgressRing";
var _excluded$i = ["radius"];
var ProgressPie = function ProgressPie(_ref) {
var _ref$radius = _ref.radius,
radius = _ref$radius === void 0 ? 20 : _ref$radius,
rest = _objectWithoutProperties(_ref, _excluded$i);
return /*#__PURE__*/React__default["default"].createElement(ProgressCircle, _extends({}, rest, {
stroke: radius,
radius: radius
}));
};
ProgressPie.displayName = "ProgressPie";
var ApplauseIcon = /*#__PURE__*/React__default["default"].forwardRef(function (props, svgRef) {
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: "14",
height: "14",
xmlns: "http://www.w3.org/2000/svg",
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement("g", {
fill: "none",
fillRule: "evenodd"
}, /*#__PURE__*/React__default["default"].createElement("path", {
d: "M8.247 7.533 4.746 4.49s-.94-.783-1.826.167c-.197.21-.288.435-.339.63-.12.461.073.948.446 1.244l3.61 2.859-2.488-1.973s-.647-.51-1.325.171c-.55.552-.747 1.206.266 2.073l3.58 3.007s3.844 2.701 6.374-.832c1.36-1.901.122-1.806.451-6.802 0 0-.01-1.13-1.223-1.13s-1.035 2.823-1.035 2.823L6.792 3.153s-.916-.743-1.6 0c-.845.917.09 1.772.09 1.772l2.965 2.608Z",
stroke: "#000",
strokeWidth: ".677",
fill: "#FFD60B"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M6.215 5.817 2.714 2.775s-.94-.783-1.826.167c-.197.21-.288.434-.34.63-.12.461.074.948.447 1.243l3.61 2.86-2.489-1.973s-.647-.51-1.324.171c-.55.552-.747 1.206.266 2.073l3.579 3.007s3.844 2.701 6.374-.832c1.362-1.901.123-1.806.452-6.802 0 0-.01-1.13-1.223-1.13-1.214 0-1.035 2.823-1.035 2.823L4.76 1.437s-.916-.743-1.6 0c-.845.917.09 1.772.09 1.772l2.965 2.608Z",
fill: "#975F00"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M8.247 7.533 4.746 4.49s-.94-.783-1.826.167c-.197.21-.288.435-.339.63-.12.461.073.948.446 1.244l3.61 2.859-2.488-1.973s-.647-.51-1.325.171c-.55.552-.747 1.206.266 2.073l3.58 3.007s3.844 2.701 6.374-.832c1.36-1.901.122-1.806.451-6.802 0 0-.01-1.13-1.223-1.13s-1.035 2.823-1.035 2.823L6.792 3.153s-.916-.743-1.6 0c-.845.917.09 1.772.09 1.772l2.965 2.608Z",
stroke: "#975F00",
strokeWidth: ".677",
fill: "#FFD60B"
}), /*#__PURE__*/React__default["default"].createElement("path", {
stroke: "#29ABE2",
strokeWidth: ".677",
strokeLinecap: "round",
d: "M10.387.339v.79M11.9 1.59 12.938.555M8.873 1.591 7.836.554"
})));
});
ApplauseIcon.displayName = "ApplauseIcon";
var ApplauseIcon$1 = ApplauseIcon;
var HeartIcon = /*#__PURE__*/React__default["default"].forwardRef(function (props, svgRef) {
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: "14",
height: "14",
xmlns: "http://www.w3.org/2000/svg",
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement("g", {
fill: "none",
fillRule: "evenodd"
}, /*#__PURE__*/React__default["default"].createElement("path", {
d: "M10.274 0a3.726 3.726 0 0 1 3.047 5.871h.002L7 14 .677 5.871A3.726 3.726 0 1 1 7 1.947 3.724 3.724 0 0 1 10.274 0Z",
fill: "#ED1C24"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M3.726 1.355c.363 0 .708.082 1.015.228A3.274 3.274 0 0 0 1.583 4.74a2.371 2.371 0 0 1 2.143-3.386Z",
fill: "#FFF"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M10.274 0a3.726 3.726 0 0 1 3.047 5.871h.002L7 14 .677 5.871.67 5.86l-.012-.02-.005-.013c-.003-.01.001-.013.01-.011l.015.005a.18.18 0 0 1 .01.004l.036.021.05.033.085.062.108.084.168.133.248.204.41.346.571.49.367.317.84.735L4.989 9.5l1.308 1.163.652.581 4.666-6A3.185 3.185 0 0 0 9.08.227h-.085C9.393.08 9.824 0 10.274 0Z",
fill: "#C1272D"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M10.274.339c.936 0 1.782.379 2.395.992s.992 1.46.992 2.395c0 .723-.226 1.393-.612 1.943L7 13.45.95 5.668a3.382 3.382 0 0 1-.611-1.943c0-.936.379-1.782.992-2.395A3.376 3.376 0 0 1 3.726.339a3.37 3.37 0 0 1 1.728.473A3.405 3.405 0 0 1 7 2.853 3.396 3.396 0 0 1 8.546.812a3.37 3.37 0 0 1 1.728-.473Z",
stroke: "#650408",
strokeWidth: ".677"
})));
});
HeartIcon.displayName = "HeartIcon";
var HeartIcon$1 = HeartIcon;
var PartyIcon = /*#__PURE__*/React__default["default"].forwardRef(function (props, svgRef) {
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: "14",
height: "14",
xmlns: "http://www.w3.org/2000/svg",
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement("g", {
fill: "none",
fillRule: "evenodd"
}, /*#__PURE__*/React__default["default"].createElement("path", {
d: "M6.774 3.048s.903-2.71-2.71-2.71",
stroke: "#ED1C24",
strokeWidth: ".645"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M10.952 6.875s2.71-.904 2.71 2.71",
stroke: "#00A4FF",
strokeWidth: ".645"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M9.71 3.839s1.806.903 1.806-.904c0-.903.903-.903.903-.903s1.807 0 .904-1.806",
stroke: "#ED1C24",
strokeWidth: ".645"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M2.935 2.484a.678.678 0 1 1 .001-1.355.678.678 0 0 1 0 1.355M13.554 4.8l-.451.238-.06.507-.366-.356-.5.099.225-.457-.249-.445.505.072.346-.374.087.503z",
fill: "#BF0FCE"
}), /*#__PURE__*/React__default["default"].createElement("path", {
fill: "#00A4FF",
d: "m9.058.36-.301.442.194.498-.513-.149-.414.339-.017-.535-.45-.289.503-.181.136-.517.328.422z"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M11.95 10.04s.412.935 1.807 1.807",
stroke: "#ED1C24",
strokeWidth: ".645"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M9.422 2.705S9.556 1.26 10.96.909M10.417 13.02s.487-.946 1.616-.355",
stroke: "#00A4FF",
strokeWidth: ".645"
}), /*#__PURE__*/React__default["default"].createElement("g", {
transform: "rotate(45 .483 7.493)"
}, /*#__PURE__*/React__default["default"].createElement("path", {
fill: "#FFD60B",
d: "M0 1.806h9.484L4.742 12.419z"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M8.806 1.806 4.742 12.42l-.773-2.017L7.26 1.806h1.546Z",
fill: "#FFB000"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "m8.962 2.145-4.22 9.444-4.22-9.444h8.44Z",
stroke: "#975F00",
strokeWidth: ".677"
}), /*#__PURE__*/React__default["default"].createElement("ellipse", {
stroke: "#975F00",
strokeWidth: ".677",
fill: "#FFF",
cx: "4.742",
cy: "1.581",
rx: "4.403",
ry: "1.242"
}))));
});
PartyIcon.displayName = "PartyIcon";
var PartyIcon$1 = PartyIcon;
var SmileIcon = /*#__PURE__*/React__default["default"].forwardRef(function (props, svgRef) {
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: "14",
height: "14",
xmlns: "http://www.w3.org/2000/svg",
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement("g", {
fill: "none",
fillRule: "evenodd"
}, /*#__PURE__*/React__default["default"].createElement("circle", {
fill: "#FFD60B",
cx: "7",
cy: "7",
r: "7"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M7 0A7 7 0 1 1 .008 6.653 6.323 6.323 0 1 0 6.653.008C6.768.003 6.883 0 7 0Z",
fill: "#FFB000"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M7 0a6.989 6.989 0 0 1 5.58 2.774 7 7 0 0 0-9.807 9.807A7 7 0 0 1 7 0Z",
fill: "#FFEB97"
}), /*#__PURE__*/React__default["default"].createElement("circle", {
stroke: "#975F00",
strokeWidth: ".677",
cx: "7",
cy: "7",
r: "6.661"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M11.853 7.226a4.29 4.29 0 0 1-8.577 0h8.577Z",
fill: "#FFF"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M11.19 7.75a3.92 3.92 0 0 1-3.69 3.5 3.92 3.92 0 0 1-3.69-3.5h7.38M12 7H3a4.77 4.77 0 0 0 4.5 5A4.77 4.77 0 0 0 12 7Z",
fill: "#975F00",
fillRule: "nonzero"
}), /*#__PURE__*/React__default["default"].createElement("rect", {
fill: "#000",
fillRule: "nonzero",
x: "5",
y: "4",
width: "2",
height: "2",
rx: "1"
}), /*#__PURE__*/React__default["default"].createElement("rect", {
fill: "#000",
fillRule: "nonzero",
x: "9",
y: "4",
width: "2",
height: "2",
rx: "1"
})));
});
SmileIcon.displayName = "SmileIcon";
var SmileIcon$1 = SmileIcon;
var ThinkingIcon = /*#__PURE__*/React__default["default"].forwardRef(function (props, svgRef) {
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: "14",
height: "14",
xmlns: "http://www.w3.org/2000/svg",
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement("g", {
fill: "none",
fillRule: "evenodd"
}, /*#__PURE__*/React__default["default"].createElement("circle", {
fill: "#FFD60B",
cx: "7",
cy: "7",
r: "7"
}), /*#__PURE__*/React__default["default"].createElement("rect", {
fill: "#000",
fillRule: "nonzero",
x: "6",
y: "4",
width: "2",
height: "2",
rx: "1"
}), /*#__PURE__*/React__default["default"].createElement("rect", {
fill: "#000",
fillRule: "nonzero",
x: "10",
y: "5",
width: "2",
height: "2",
rx: "1"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M7 0A7 7 0 1 1 .008 6.653 6.323 6.323 0 1 0 6.653.008C6.768.003 6.883 0 7 0Z",
fill: "#FFB000"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M7 0a6.989 6.989 0 0 1 5.58 2.774 7 7 0 0 0-9.807 9.807A7 7 0 0 1 7 0Z",
fill: "#FFEB97"
}), /*#__PURE__*/React__default["default"].createElement("circle", {
stroke: "#975F00",
strokeWidth: ".677",
cx: "7",
cy: "7",
r: "6.661"
}), /*#__PURE__*/React__default["default"].createElement("path", {
fill: "#FFF",
d: "M2 14V7h2.968v2.258H10v2.484H7.687V14z"
}), /*#__PURE__*/React__default["default"].createElement("path", {
fill: "#CCC",
d: "M2 12h5.113v2H2z"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M4.593 7.375v2.258h5.032v1.734h-2.21v2.258h-5.04v-6.25h2.218Z",
stroke: "#5A3900",
strokeWidth: ".75"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M6.206 7.71s3.326-.847 4.657.847",
stroke: "#000"
}), /*#__PURE__*/React__default["default"].createElement("path", {
fill: "#000",
fillRule: "nonzero",
d: "M10 3h2v1h-2zM6 2h2v1H6z"
})));
});
ThinkingIcon.displayName = "ThinkingIcon";
var ThinkingIcon$1 = ThinkingIcon;
var ThumbsUpIcon = /*#__PURE__*/React__default["default"].forwardRef(function (props, svgRef) {
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: "14",
height: "14",
xmlns: "http://www.w3.org/2000/svg",
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement("g", {
fill: "none",
fillRule: "evenodd"
}, /*#__PURE__*/React__default["default"].createElement("path", {
d: "M7 2.71C7 4.477 5.308 4.866 4.516 5.87c-.487.62-.677 1.806-.677 1.806v5.194C5.182 13.341 6.096 14 8.806 14c2.164-.021 2.54-.045 3.388-.903.903-.903 1.806-4.39 1.806-6.323 0-.15-.04-.322-.08-.514-.198-.934-1.401-1.129-2.404-1.129-.718 0-1.401.11-1.423.11-.214 0-.315-.299-.226-.527.266-.684.294-1.755.294-2.908C10.161 0 8.581 0 8.581 0S7 0 7 2.71Z",
fill: "#FFD60B"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "m4.122 12.763 1.516.785 2.565.34h1.985l1.61-.822 1.469-4.105V7.484c-.558 2.76-1.498 4.33-2.818 4.71-1.32.38-3.408.145-6.265-.702l-.062 1.271Z",
fill: "#FFB000"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "m4.516 6.473 1.659-1.416.967-1.495.365-2.419L8.695.341l1.088.525-.14 1.328c-.231-.748-.577-1.001-1.037-.759-.69.364.198 3.188-1.653 4.131-1.851.943-2.83 3.42-2.83 4.836V7.398l.393-.925Z",
fill: "#FFEB97"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M8.57.34c.155.007.614.055.932.425.19.22.32.553.32 1.041 0 1.103-.015 2.13-.27 2.785.518.815 1.092.876 1.713.88h.251c.518 0 1.098.049 1.534.254.256.12.462.297.532.579.069 2.345-.761 5.687-1.63 6.555-.787.797-1.156.783-3.146.802-1.968 0-2.958-.358-3.878-.73a37.501 37.501 0 0 0-.75-.297v-4.93c.028-.168.2-1.11.605-1.624.241-.306.576-.548.912-.797.83-.613 1.644-1.26 1.644-2.573 0-.815.148-1.364.36-1.73.31-.539.758-.63.87-.64Z",
stroke: "#975F00",
strokeWidth: ".677"
}), /*#__PURE__*/React__default["default"].createElement("rect", {
stroke: "#975F00",
strokeWidth: ".677",
fill: "#FFF",
x: ".339",
y: "6.339",
width: "3.839",
height: "7.323",
rx: "1.129"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M.677 11.516c0 .25.203.452.452.452h2.258c.25 0 .452-.202.452-.452v1.355c0 .25-.202.452-.452.452H1.13a.452.452 0 0 1-.452-.452Z",
fill: "#CCC"
})));
});
ThumbsUpIcon.displayName = "ThumbsUpIcon";
var ThumbsUpIcon$1 = ThumbsUpIcon;
var ThumbsDownIcon = /*#__PURE__*/React__default["default"].forwardRef(function (props, svgRef) {
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: "14",
height: "14",
xmlns: "http://www.w3.org/2000/svg",
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement("g", {
fill: "none",
fillRule: "evenodd"
}, /*#__PURE__*/React__default["default"].createElement("path", {
d: "M7 11.29C7 9.523 8.692 9.134 9.484 8.13c.487-.62.677-1.806.677-1.806V1.129C8.818.659 7.904 0 5.194 0 3.03.021 2.654.045 1.806.903.903 1.806 0 5.293 0 7.226c0 .15.04.322.08.514.198.934 1.401 1.129 2.404 1.129.718 0 1.401-.11 1.423-.11.214 0 .315.299.226.527-.266.684-.294 1.755-.294 2.908C3.839 14 5.419 14 5.419 14S7 14 7 11.29Z",
fill: "#FFD60B"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M9.878 1.237 8.362.452 5.797.112H3.812l-1.61.822L.733 5.04v1.477c.558-2.76 1.498-4.33 2.818-4.71 1.32-.38 3.408-.145 6.265.702l.062-1.271Z",
fill: "#FFB000"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M9.484 7.527 7.825 8.943l-.967 1.495-.365 2.419-1.188.802-1.088-.525.14-1.328c.231.748.577 1.001 1.037.759.69-.364-.198-3.188 1.653-4.131 1.851-.943 2.83-3.42 2.83-4.836v3.004l-.393.925Z",
fill: "#FFEB97"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M5.43 13.66c-.155-.007-.614-.055-.932-.425-.19-.22-.32-.553-.32-1.041 0-1.103.015-2.13.27-2.785-.518-.815-1.092-.876-1.713-.88h-.251c-.518 0-1.098-.049-1.534-.254-.256-.12-.462-.297-.532-.579-.069-2.345.761-5.687 1.63-6.555C2.834.344 3.203.358 5.193.34c2.083 0 3.072.401 4.04.795.195.079.388.157.589.232v4.93c-.029.168-.202 1.11-.606 1.624-.213.27-.499.49-.794.71-1.074.8-1.762 1.446-1.762 2.66 0 .815-.148 1.364-.36 1.73-.31.539-.758.63-.87.64Z",
stroke: "#975F00",
strokeWidth: ".677"
}), /*#__PURE__*/React__default["default"].createElement("rect", {
stroke: "#975F00",
strokeWidth: ".677",
fill: "#FFF",
transform: "rotate(180 11.742 4)",
x: "9.823",
y: ".339",
width: "3.839",
height: "7.323",
rx: "1.129"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M13.323 2.484a.452.452 0 0 0-.452-.452h-2.258a.452.452 0 0 0-.452.452V1.129c0-.25.202-.452.452-.452h2.258c.25 0 .452.203.452.452Z",
fill: "#CCC"
})));
});
ThumbsDownIcon.displayName = "ThumbsDownIcon";
var ThumbsDownIcon$1 = ThumbsDownIcon;
var _excluded$h = ["invalid", "required", "size", "children", "className", "weight", "htmlFor"];
var Label = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var _ref$invalid = _ref.invalid,
invalid = _ref$invalid === void 0 ? false : _ref$invalid,
_ref$required = _ref.required,
required = _ref$required === void 0 ? false : _ref$required,
_ref$size = _ref.size,
size = _ref$size === void 0 ? "regular" : _ref$size,
children = _ref.children,
className = _ref.className,
_ref$weight = _ref.weight,
weight = _ref$weight === void 0 ? "bold" : _ref$weight,
htmlFor = _ref.htmlFor,
props = _objectWithoutProperties(_ref, _excluded$h);
var color = invalid ? "alert" : "primary";
var variant = size === "regular" ? "Body 2" : "Caption 1";
return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
as: "label",
className: classNames__default["default"]("c-label", className),
variant: variant,
color: color,
weight: weight,
ref: ref,
htmlFor: htmlFor
}, props), children, required ? "*" : null);
});
Label.displayName = "Label";
var GlobalStyle = styled.createGlobalStyle([":root{--color-primary:#5d2bff;--color-secondary:#5d2bff;--color-theme-100:#ffffff;--color-theme-200:#f6f6f9;--color-theme-300:#ebebee;--color-theme-400:#d7d7da;--color-theme-500:#b9b9bd;--color-theme-600:#89898e;--color-theme-700:#6d6d73;--color-theme-800:#5b5b61;--color-theme-900:#303037;--color-primary-200:rgba(93,43,255,0.05);--color-primary-300:rgba(93,43,255,0.1);--color-primary-400:rgba(93,43,255,0.25);--color-primary-500:rgba(93,43,255,0.5);--color-primary-600:rgba(93,43,255,0.75);--color-primary-700:#5d2bff;--color-primary-800:#4a21cd;--color-primary-900:#32178b;--color-secondary-200:rgba(93,43,255,0.05);--color-secondary-300:rgba(93,43,255,0.1);--color-secondary-400:rgba(93,43,255,0.25);--color-secondary-500:rgba(93,43,255,0.5);--color-secondary-600:rgba(93,43,255,0.75);--color-secondary-700:#5d2bff;--color-secondary-800:#4a21cd;--color-secondary-900:#32178b;--color-theme-transparent-200:rgba(36,36,76,0.04);--color-theme-transparent-300:rgba(48,48,55,0.1);--color-theme-transparent-400:rgba(48,48,55,0.2);--color-theme-transparent-500:rgba(48,48,55,0.34);--color-theme-transparent-600:rgba(48,48,55,0.57);--color-theme-transparent-700:rgba(48,48,55,0.7);--color-theme-transparent-800:rgba(48,48,55,0.8);--color-primary-opaque-300:#efeaff;--color-primary-opaque-400:#d6caff;--color-secondary-opaque-300:#efeaff;--color-secondary-opaque-400:#d6caff;--color-sucess-green:#64cd93;--color-pale-green:#c3e799;--color-yellow:#FDF196;--color-yellow-darker:#948D5D;--color-yellow-lighter:#EBD429;--color-orange:#FBBB75;--color-orange-darker:#916C43;--color-orange-lighter:#E99841;--color-beige:#EAC2AD;--color-beige-darker:#877064;--color-beige-lighter:#B98A72;--color-pink:#FBD6E7;--color-pink-darker:#917C86;--color-pink-lighter:#E4A1C0;--color-coral:#FF9C9C;--color-coral-darker:#945A5A;--color-coral-lighter:#DB4545;--color-purple-dirty:#C49CB6;--color-purple-dirty-darker:#715A69;--color-purple-dirty-lighter:#B16E9A;--color-purple:#BEACF9;--color-purple-darker:#6E6390;--color-purple-lighter:#9B86DF;--color-blue-aqua:#BDF7FD;--color-blue-aqua-darker:#6D8F92;--color-blue-aqua-lighter:#7BDDE7;--color-blue-pale:#BEEAFF;--color-blue-pale-darker:#6E8794;--color-blue-pale-lighter:#92BFD4;--color-blue-sky:#A0CBFD;--color-blue-sky-darker:#5C7592;--color-blue-sky-lighter:#568CCB;--color-turquoise:#B9E4E0;--color-turquoise-darker:#6B8482;--color-turquoise-lighter:#70BFB8;--color-green-pale:#C3E799;--color-green-pale-darker:#718658;--color-green-pale-lighter:#80C333;--color-green-olive-drab:#98B57C;--color-green-olive-drab-darker:#647157;--color-green-olive-drab-lighter:#819F65;--color-gray-silver:#DDDDDD;--color-gray-silver-darker:#808080;--color-gray-silver-lighter:#ACACAC;--color-gray:#CACACA;--color-gray-darker:#757575;--color-gray-lighter:#7D7D7D;--body-bg-main:rgb(244,245,247);--body-bg-main-transparent:rgba(244,245,247,0);--page-paper-main:#ffffff;--border-primary:#d7d7da;--note-bg:#fff9f1;--shadow-primary-hover:0 64px 64px 0 rgba(0,0,0,0.1),0 32px 32px 0 rgba(0,0,0,0.06),0 16px 16px 0 rgba(0,0,0,0.04),0 4px 4px 0 rgba(0,0,0,0.04),0 2px 2px 0 rgba(0,0,0,0.04);--shadow-primary:0 64px 64px 0 rgba(0,0,0,0.06),0 32px 32px 0 rgba(0,0,0,0.03),0 16px 16px 0 rgba(0,0,0,0.02),0 4px 4px 0 rgba(0,0,0,0.02),0 2px 2px 0 rgba(0,0,0,0.02);--shadow-secondary:0 4px 14px 0 rgba(0,0,0,0.17);--shadow-tertiary:0 4px 6px -2px rgba(0,0,0,0.05),0 10px 15px -3px rgba(0,0,0,0.1);--shadow-tertiary-hover:0 4px 10px -2px rgba(0,0,0,0.1),0 12px 20px -3px rgba(0,0,0,0.2);--page-paper-main-shadow:rgba( 255,255,255,0 );--modal-background:rgba(244,245,247,0.6);--highlight-dark:rgba(0,0,0,0.03);--input-background-color:#ffffff;--ai-gradient:linear-gradient(135deg,#4da2ed,#9f69e5,#ec43d8,#f72222);--ai-gradient-lighter:linear-gradient( 135deg,rgba(77,162,237,0.1),rgba(159,105,229,0.1),rgba(236,67,216,0.1),rgba(230,10,10,0.1) );--red-alert:rgb(237,97,97);--warning:#ffcc6b;--only-white:#ffffff;--only-black:#000000;--ac-br-4:4px;--ac-br-6:6px;--ac-br-8:8px;--ac-br-rounded:999px;}.cupcake{--color-primary:#29bcdd;--color-secondary:#fe6fa7;--color-primary-200:rgba(41,188,221,0.07);--color-primary-300:rgba(41,188,221,0.12);--color-primary-400:rgba(41,188,221,0.26);--color-primary-500:rgba(41,188,221,0.52);--color-primary-600:rgba(41,188,221,0.75);--color-primary-700:#29bcdd;--color-primary-800:#219fbb;--color-primary-900:#1a768b;--color-secondary-200:rgba(254,111,167,0.07);--color-secondary-300:rgba(254,111,167,0.13);--color-secondary-400:rgba(254,111,167,0.27);--color-secondary-500:rgba(254,111,167,0.52);--color-secondary-600:rgba(254,111,167,0.75);--color-secondary-700:#fe6fa7;--color-secondary-800:#dd6091;--color-secondary-900:#ab496f;--color-primary-opaque-300:#e5f7fb;--color-primary-opaque-400:#c8eef6;--color-secondary-opaque-300:#ffecf4;--color-secondary-opaque-400:#ffd8e7;}.classic{--color-primary:#4182f2;--color-secondary:#4182f2;--color-primary-200:rgba(65,130,242,0.07);--color-primary-300:rgba(65,130,242,0.13);--color-primary-400:rgba(65,130,242,0.26);--color-primary-500:rgba(65,130,242,0.52);--color-primary-600:rgba(65,130,242,0.75);--color-primary-700:#4182f2;--color-primary-800:#356bc8;--color-primary-900:#244a8a;--color-secondary-200:rgba(65,130,242,0.07);--color-secondary-300:rgba(65,130,242,0.13);--color-secondary-400:rgba(65,130,242,0.26);--color-secondary-500:rgba(65,130,242,0.52);--color-secondary-600:rgba(65,130,242,0.75);--color-secondary-700:#4182f2;--color-secondary-800:#356bc8;--color-secondary-900:#244a8a;--color-primary-opaque-300:#e6effd;--color-primary-opaque-400:#cedffc;--color-secondary-opaque-300:#e6effd;--color-secondary-opaque-400:#cedffc;}.neon{--color-primary:#67ffc8;--color-secondary:#67ffc8;--color-theme-100:#000000;--color-theme-200:#31333e;--color-theme-300:#2b2d37;--color-theme-400:#1f2024;--color-theme-500:#6D6D73;--color-theme-600:#89898e;--color-theme-700:#b0b0b5;--color-theme-800:#dfdfe5;--color-theme-900:#ffffff;--color-primary-200:rgba(103,255,200,0.05);--color-primary-300:rgba(103,255,200,0.1);--color-primary-400:rgba(103,255,200,0.25);--color-primary-500:rgba(103,255,200,0.5);--color-primary-600:rgba(103,255,200,0.75);--color-primary-700:#67ffc8;--color-primary-800:#a5ffdf;--color-primary-900:#d0fdec;--color-secondary-200:rgba(103,255,200,0.05);--color-secondary-300:rgba(103,255,200,0.1);--color-secondary-400:rgba(103,255,200,0.25);--color-secondary-500:rgba(103,255,200,0.5);--color-secondary-600:rgba(103,255,200,0.75);--color-secondary-700:#67ffc8;--color-secondary-800:#a5ffdf;--color-secondary-900:#d0fdec;--color-theme-transparent-200:rgba(6,7,8,0.12);--color-theme-transparent-300:rgba(6,7,8,0.22);--color-theme-transparent-400:rgba(6,7,8,0.5);--color-theme-transparent-500:rgba(255,255,255,0.27);--color-theme-transparent-600:rgba(255,255,255,0.4);--color-theme-transparent-700:rgba(255,255,255,0.6);--color-theme-transparent-800:rgba(255,255,255,0.85);--color-primary-opaque-300:#3b4e51;--color-primary-opaque-400:#436b64;--color-secondary-opaque-300:#3b4e51;--color-secondary-opaque-400:#436b64;--body-bg-main:rgb(44,46,56);--body-bg-main-transparent:rgba(44,46,56,0);--page-paper-main:#373a44;--border-primary:#1f2024;--note-bg:#464545;--shadow-primary-hover:0 64px 64px 0 rgba(0,0,0,0.2),0 32px 32px 0 rgba(0,0,0,0.2),0 16px 16px 0 rgba(0,0,0,0.2),0 4px 4px 0 rgba(0,0,0,0.2),0 2px 2px 0 rgba(0,0,0,0.2);--shadow-primary:0 64px 64px 0 rgba(0,0,0,0.1),0 32px 32px 0 rgba(0,0,0,0.1),0 16px 16px 0 rgba(0,0,0,0.1),0 4px 4px 0 rgba(0,0,0,0.1),0 2px 2px 0 rgba(0,0,0,0.1);--shadow-secondary:0 4px 14px 0 rgba(0,0,0,0.3);--shadow-tertiary:0 4px 6px -2px rgba(0,0,0,0.1),0 10px 15px -3px rgba(0,0,0,0.15);--shadow-tertiary-hover:0 4px 12px -2px rgba(0,0,0,0.4),0 10px 30px -3px rgba(0,0,0,0.5);--page-paper-main-shadow:rgba( 55,58,68,0 );--modal-background:rgba(44,46,56,0.7);--highlight-dark:rgba(0,0,0,0.06);--input-background-color:#2c2e38;--only-white:#ffffff;--only-black:#000000;}html{color-scheme:light;}html{&.neon{color-scheme:dark;}}.ac-shadow,.ac-shadow--raised{&--lg{box-shadow:var(--shadow-primary);}&--sm{box-shadow:var(--shadow-tertiary);}}.ac-shadow--raised{&--lg{transition:box-shadow 0.3s;&:hover{box-shadow:var(--shadow-primary-hover);}}&--sm{transition:box-shadow 0.3s;&:hover{box-shadow:var(--shadow-tertiary-hover);}}}.ac-shadow-optimized--sm{position:relative;box-shadow:var(--shadow-tertiary);&::before{position:absolute;top:0;left:0;width:100%;height:100%;content:\"\";box-shadow:var(--shadow-tertiary);opacity:0;border-radius:var(--ac-br-6);transition:opacity 0.3s ease;z-index:-1;}@media (hover:hover){&:hover::before{opacity:1;}}}.ac-shadow-optimized--lg{position:relative;box-shadow:var(--shadow-primary);&::before{position:absolute;top:0;left:0;width:100%;height:100%;content:\"\";box-shadow:var(--shadow-primary);opacity:0;border-radius:var(--ac-br-8);transition:opacity 0.3s ease;z-index:-1;}@media (hover:hover){&:hover::before{opacity:1;}}}.ac-border-radius{&-4{border-radius:var(--ac-br-4);}&-6{border-radius:var(--ac-br-6);}&-8{border-radius:var(--ac-br-8);}&-rounded{border-radius:var(--ac-br-rounded);}}.c-cooltip{position:relative;--cooltip-spacing:0.5rem;--cooltip-padding:0.25rem 0.625rem;--cooltip-max-width:12.5rem;--cooltip-transition-duration:0.15s,0.1s,0.15s;--cooltip-transition-delay:0.6s;--cooltip-timing:ease,ease,cubic-bezier(0.39,0.575,0.565,1);}.c-cooltip::after{pointer-events:none;content:attr(data-tooltip);position:absolute;color:#fff;opacity:0;background-color:rgba(0,0,0,0.9);border-radius:0.5rem;font-size:0.75rem;font-weight:500;line-height:1.3;max-width:var(--cooltip-max-width);padding:var(--cooltip-padding);text-align:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}.c-cooltip--top::after{bottom:calc(100% + var(--cooltip-spacing));left:50%;transform:scale(0.85) translateX(-50%);transform-origin:0;}.c-cooltip--right::after{left:calc(100% + var(--cooltip-spacing));transform:scale(0.85);}.c-cooltip--bottom::after{top:calc(100% + var(--cooltip-spacing));left:50%;transform:scale(0.85) translateX(-50%);transform-origin:0;}.c-cooltip--left::after{right:calc(100% + var(--cooltip-spacing));transform:scale(0.85);}.c-cooltip:disabled::after,[aria-pressed=\"true\"]::after{display:none;}@media (hover:hover){.c-cooltip--top:not(:focus):hover::after,.c-cooltip--bottom:not(:focus):hover::after{transition-property:opacity,transform;transition-duration:var(--cooltip-transition-duration);transition-delay:var(--cooltip-transition-delay);transition-timing-function:var(--cooltip-timing);transform:scale(1) translateX(-50%);opacity:1;}.c-cooltip--right:not(:focus):hover::after,.c-cooltip--left:not(:focus):hover::after{transition-property:opacity,transform;transition-duration:var(--cooltip-transition-duration);transition-delay:var(--cooltip-transition-delay);transition-timing-function:var(--cooltip-timing);transform:scale(1);opacity:1;}}.c-date-picker--calendar{width:260px;padding:16px 0px 8px 0px;margin:auto;background-color:var(--page-paper-main);}"]);
var StyledDiv = styled__default["default"].div.withConfig({
displayName: "Styles__StyledDiv",
componentId: "sc-1wapx2a-0"
})(["", " ", " ", ""], FontStyle, BoxSizingStyle, {
"position": "relative",
"display": "inline-block",
"maxWidth": "100%"
});
var StyledSpan = styled__default["default"](Typography).withConfig({
displayName: "Styles__StyledSpan",
componentId: "sc-1wapx2a-1"
})(["visibility:hidden;display:block;padding-left:4px;padding-right:4px;padding-top:1px;padding-bottom:1px;position:relative;border:1px solid transparent;border-radius:6px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:pre;font-variant-numeric:tabular-nums;", " ", " &:empty:before{content:\" \";}"], function (_ref) {
var $disabled = _ref.$disabled;
return $disabled && styled.css(["visibility:visible;"]);
}, function (_ref2) {
var invalid = _ref2.invalid;
return invalid && styled.css(["border:1px solid var(--red-alert);"]);
});
StyledSpan.displayName = "StyledSpan";
var StyledInput$1 = styled__default["default"](Typography).withConfig({
displayName: "Styles__StyledInput",
componentId: "sc-1wapx2a-2"
})(["", " background-color:inherit;padding-left:4px;padding-right:4px;padding-top:1px;padding-bottom:1px;text-overflow:ellipsis;font-variant-numeric:tabular-nums;&:focus-whitin{text-overflow:clip;}outline-width:0px;outline:none;&:disabled{opacity:0;}", ""], {
"position": "absolute",
"inset": "0px",
"boxSizing": "border-box",
"width": "100%",
"overflow": "hidden",
"whiteSpace": "nowrap",
"borderRadius": "0.375rem",
"borderWidth": "1px",
"borderStyle": "solid",
"borderColor": "transparent",
":focus-within": {
"overflow": "scroll",
"borderColor": "var(--color-theme-700)"
},
":hover": {
"borderColor": "var(--color-theme-700)"
}
}, function (_ref3) {
var invalid = _ref3.invalid;
return invalid && styled.css(["border-color:var(--red-alert) !important;"]);
});
StyledInput$1.displayName = "StyledInput";
var _excluded$g = ["className", "variant", "weight", "disabled", "inputProps", "wrapRef", "children", "invalid"];
var EditableContent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var className = _ref.className,
_ref$variant = _ref.variant,
variant = _ref$variant === void 0 ? "Body 2" : _ref$variant,
weight = _ref.weight,
_ref$disabled = _ref.disabled,
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
inputProps = _ref.inputProps,
wrapRef = _ref.wrapRef,
children = _ref.children,
invalid = _ref.invalid,
props = _objectWithoutProperties(_ref, _excluded$g);
var intInputRef = React.useRef(null);
var handleRef = useForkRef(ref, intInputRef);
var handleBlur = React.useCallback(function (evt) {
if (intInputRef !== null && intInputRef !== void 0 && intInputRef.current) {
intInputRef.current.scrollLeft = 0;
}
typeof (inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur) === "function" && (inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur(evt));
}, [inputProps]);
return /*#__PURE__*/React__default["default"].createElement(StyledDiv, _extends({
className: className,
ref: wrapRef
}, props), /*#__PURE__*/React__default["default"].createElement(StyledSpan, {
variant: variant,
forwardedAs: "span",
weight: weight,
$disabled: disabled,
className: "presentation"
}, children ? children : inputProps === null || inputProps === void 0 ? void 0 : inputProps.value), /*#__PURE__*/React__default["default"].createElement(StyledInput$1, _extends({}, inputProps, {
ref: handleRef,
forwardedAs: "input",
variant: variant,
weight: weight,
value: inputProps === null || inputProps === void 0 ? void 0 : inputProps.value,
onBlur: handleBlur,
disabled: disabled,
"data-form-type": "other",
invalid: invalid
})));
});
EditableContent.displayName = "EditableContent";
var _excluded$f = ["onSave", "onCancel", "value", "inputProps", "allowEmptyString"];
var EditableText = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var onSave = _ref.onSave,
onCancel = _ref.onCancel,
value = _ref.value,
inputProps = _ref.inputProps,
allowEmptyString = _ref.allowEmptyString,
props = _objectWithoutProperties(_ref, _excluded$f);
var _useState = React.useState(value),
_useState2 = _slicedToArray(_useState, 2),
currentValue = _useState2[0],
setCurrentValue = _useState2[1];
var _useState3 = React.useState(value),
_useState4 = _slicedToArray(_useState3, 2),
prevValue = _useState4[0],
setPrevValue = _useState4[1];
var escapeRef = React.useRef(false);
React.useEffect(function () {
if (currentValue !== value) {
setCurrentValue(value);
setPrevValue(value);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [value]);
var handleBlur = React.useCallback(function (e) {
if (escapeRef.current) {
setCurrentValue(prevValue);
escapeRef.current = false;
} else {
if (e.target.value.trim().length > 0 && prevValue !== e.target.value) {
setPrevValue(e.target.value);
setCurrentValue(e.target.value);
typeof onSave === "function" && onSave(e);
} else {
!allowEmptyString ? setCurrentValue(prevValue) : typeof onSave === "function" && prevValue !== e.target.value && onSave(e);
}
}
}, [allowEmptyString, onSave, prevValue]);
var handleKeyDown = React.useCallback(function (e) {
if (e.key === "Enter") {
e.target.blur();
}
if (e.key === "Escape") {
escapeRef.current = true;
e.target.blur();
typeof onCancel === "function" && onCancel();
}
}, [onCancel]);
var handleChange = React.useCallback(function (e) {
setCurrentValue(e.target.value);
}, []);
return /*#__PURE__*/React__default["default"].createElement(EditableContent, _extends({}, props, {
ref: ref,
inputProps: _objectSpread2(_objectSpread2({}, inputProps), {}, {
value: currentValue !== null && currentValue !== void 0 ? currentValue : "",
onBlur: handleBlur,
onKeyDown: handleKeyDown,
onChange: handleChange,
type: "text",
className: classNames__default["default"]("c-input", inputProps === null || inputProps === void 0 ? void 0 : inputProps.className)
})
}));
});
EditableText.displayName = "EditableText";
var _excluded$e = ["value", "onCancel", "onSave", "allowEmptyValue", "withLeadingZero", "validation", "incrementOnlySelected", "minuteIncrement", "className", "onEnterKeyPress", "inputProps", "onClick", "ticking", "onFocus"];
var StyledEditableContent = styled__default["default"](EditableContent).withConfig({
displayName: "EditableHours__StyledEditableContent",
componentId: "sc-nvi34j-0"
})(["", ""], function (_ref) {
var $ticking = _ref.$ticking;
return $ticking && styled.css([".presentation{visibility:visible;}input{opacity:0;}"]);
});
var EditableHours = /*#__PURE__*/React__default["default"].forwardRef(function (_ref2, ref) {
var defaultValue = _ref2.value,
onCancel = _ref2.onCancel,
onSave = _ref2.onSave,
allowEmptyValue = _ref2.allowEmptyValue,
_ref2$withLeadingZero = _ref2.withLeadingZero,
withLeadingZero = _ref2$withLeadingZero === void 0 ? true : _ref2$withLeadingZero,
_ref2$validation = _ref2.validation,
validation = _ref2$validation === void 0 ? validateTimeInput : _ref2$validation,
_ref2$incrementOnlySe = _ref2.incrementOnlySelected,
incrementOnlySelected = _ref2$incrementOnlySe === void 0 ? false : _ref2$incrementOnlySe,
_ref2$minuteIncrement = _ref2.minuteIncrement,
minuteIncrement = _ref2$minuteIncrement === void 0 ? 1 : _ref2$minuteIncrement,
className = _ref2.className,
externalEnterKeyPress = _ref2.onEnterKeyPress,
externalInputProps = _ref2.inputProps,
externalOnClick = _ref2.onClick,
ticking = _ref2.ticking,
onFocus = _ref2.onFocus,
rest = _objectWithoutProperties(_ref2, _excluded$e);
var inputRef = React.useRef(null);
var handleRef = useForkRef(ref, inputRef);
var _useInputHours = useInputHours({
value: defaultValue,
withLeadingZero,
onSave,
validation,
allowEmptyValue,
onCancel,
minuteIncrement,
incrementOnlySelected,
onEnterKeyPress: externalEnterKeyPress,
onClick: externalOnClick
}, inputRef),
inputProps = _useInputHours.inputProps,
setCurrentValue = _useInputHours.setCurrentValue,
setPrevValue = _useInputHours.setPrevValue;
var value = inputProps.value,
onBlur = inputProps.onBlur,
onKeyDown = inputProps.onKeyDown,
onChange = inputProps.onChange,
onClick = inputProps.onClick,
onDoubleClick = inputProps.onDoubleClick;
React.useEffect(function () {
var _value;
if (defaultValue !== undefined) {
_value = formatHours(defaultValue, withLeadingZero);
}
setCurrentValue(function (prevState) {
if (prevState !== _value) {
return _value;
}
return prevState;
});
setPrevValue(function (prevState) {
if (prevState !== _value) {
return _value;
}
return prevState;
});
}, [defaultValue, setCurrentValue, setPrevValue, withLeadingZero]);
var splitTime = React.useMemo(function () {
if (value && ticking) {
var _value$split = value.split(":"),
_value$split2 = _slicedToArray(_value$split, 2),
hours = _value$split2[0],
minutes = _value$split2[1];
return {
hours,
minutes
};
}
}, [value, ticking]);
return /*#__PURE__*/React__default["default"].createElement(StyledEditableContent, _extends({
ref: handleRef,
className: className,
inputProps: _objectSpread2(_objectSpread2({}, externalInputProps), {}, {
value,
onBlur,
onKeyDown,
onChange,
onClick,
onDoubleClick,
onFocus,
type: "text"
}),
$ticking: ticking
}, rest), ticking && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, splitTime === null || splitTime === void 0 ? void 0 : splitTime.hours, /*#__PURE__*/React__default["default"].createElement("span", {
className: "tw-animate-ping"
}, ":"), splitTime === null || splitTime === void 0 ? void 0 : splitTime.minutes));
});
EditableHours.displayName = "EditableHours";
var _excluded$d = ["decimalLength", "decimalSeparator", "disableAbbreviation", "disabled", "disableMacros", "step", "thousandSeparator", "value", "onSave", "onCancel", "className", "allowEmptyValue", "onEnterKeyPress", "onClick", "onChange", "trimDecimals", "min", "max", "invalid"];
var EditableCurrency = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var _ref$decimalLength = _ref.decimalLength,
decimalLength = _ref$decimalLength === void 0 ? 2 : _ref$decimalLength,
_ref$decimalSeparator = _ref.decimalSeparator,
decimalSeparator = _ref$decimalSeparator === void 0 ? "." : _ref$decimalSeparator,
_ref$disableAbbreviat = _ref.disableAbbreviation,
disableAbbreviation = _ref$disableAbbreviat === void 0 ? false : _ref$disableAbbreviat,
disabled = _ref.disabled,
_ref$disableMacros = _ref.disableMacros,
disableMacros = _ref$disableMacros === void 0 ? false : _ref$disableMacros,
_ref$step = _ref.step,
step = _ref$step === void 0 ? 1 : _ref$step,
_ref$thousandSeparato = _ref.thousandSeparator,
thousandSeparator = _ref$thousandSeparato === void 0 ? "," : _ref$thousandSeparato,
defaultValue = _ref.value,
onSave = _ref.onSave,
onCancel = _ref.onCancel,
className = _ref.className,
allowEmptyValue = _ref.allowEmptyValue,
externalEnterKeyPress = _ref.onEnterKeyPress,
externalOnClick = _ref.onClick,
externalOnChange = _ref.onChange,
_ref$trimDecimals = _ref.trimDecimals,
trimDecimals = _ref$trimDecimals === void 0 ? true : _ref$trimDecimals,
min = _ref.min,
max = _ref.max,
invalid = _ref.invalid,
rest = _objectWithoutProperties(_ref, _excluded$d);
var inputRef = React.useRef(null);
var handleRef = useForkRef(ref, inputRef);
var _useInputNumber = useInputNumber({
decimalLength,
decimalSeparator,
disableAbbreviation,
disableMacros,
step,
thousandSeparator,
value: defaultValue,
onSave,
allowEmptyValue,
onCancel,
onChange: externalOnChange,
onEnterKeyPress: externalEnterKeyPress,
onClick: externalOnClick,
trimDecimals,
min,
max,
shortenThreshold: 10000
}, inputRef),
value = _useInputNumber.value,
onBlur = _useInputNumber.onBlur,
onKeyDown = _useInputNumber.onKeyDown,
onChange = _useInputNumber.onChange,
onClick = _useInputNumber.onClick,
onDoubleClick = _useInputNumber.onDoubleClick,
onFocus = _useInputNumber.onFocus,
focused = _useInputNumber.focused,
unformattedValue = _useInputNumber.unformattedValue;
var formattedValue = React.useMemo(function () {
return focused ? value : numberWithSeparator(value !== null && value !== void 0 ? value : "", "", decimalSeparator);
}, [focused, value, decimalSeparator]);
return /*#__PURE__*/React__default["default"].createElement(Tooltip, {
title: numberWithSeparator(unformattedValue !== null && unformattedValue !== void 0 ? unformattedValue : "", thousandSeparator, decimalSeparator),
disable: focused
}, /*#__PURE__*/React__default["default"].createElement(EditableContent, {
disabled: disabled,
ref: handleRef,
className: className,
invalid: invalid,
inputProps: _objectSpread2({
value: formattedValue,
onBlur: onBlur,
onChange: onChange,
onKeyDown: onKeyDown,
onClick: onClick,
onFocus: onFocus,
onDoubleClick: onDoubleClick
}, rest)
}));
});
EditableCurrency.displayName = "EditableCurrency";
var _excluded$c = ["withDocuments"];
var FolderIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
var _ref$withDocuments = _ref.withDocuments,
withDocuments = _ref$withDocuments === void 0 ? false : _ref$withDocuments,
props = _objectWithoutProperties(_ref, _excluded$c);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
width: 100,
height: 100,
viewBox: "0 0 100 100",
xmlns: "http://www.w3.org/2000/svg",
ref: svgRef
}, props), /*#__PURE__*/React__default["default"].createElement("defs", null, /*#__PURE__*/React__default["default"].createElement("filter", {
x: "-14.9%",
y: "-112.5%",
width: "129.8%",
height: "275%",
filterUnits: "objectBoundingBox",
id: "image_svg__a"
}, /*#__PURE__*/React__default["default"].createElement("feOffset", {
dy: -2,
in: "SourceAlpha",
result: "shadowOffsetOuter1"
}), /*#__PURE__*/React__default["default"].createElement("feGaussianBlur", {
stdDeviation: 2,
in: "shadowOffsetOuter1",
result: "shadowBlurOuter1"
}), /*#__PURE__*/React__default["default"].createElement("feColorMatrix", {
values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0",
in: "shadowBlurOuter1"
})), /*#__PURE__*/React__default["default"].createElement("path", {
id: "image_svg__b",
d: "M4 28h47v8H4z"
})), /*#__PURE__*/React__default["default"].createElement("g", {
fillRule: "evenodd"
}, /*#__PURE__*/React__default["default"].createElement("path", {
d: "M90 20H50L40 10H10C4.45 10 0 14.45 0 20v60c0 5.523 4.477 10 10 10h80c5.523 0 10-4.477 10-10V30c0-5.55-4.5-10-10-10z",
fill: "#32178B"
}), withDocuments ? /*#__PURE__*/React__default["default"].createElement("path", {
d: "M8 20h42v9H4v-5a4 4 0 014-4z",
fill: "#FFFFFF"
}) : null, /*#__PURE__*/React__default["default"].createElement("use", {
filter: "url(#image_svg__a)",
xlinkHref: "#image_svg__b",
fill: "black"
}), /*#__PURE__*/React__default["default"].createElement("use", {
xlinkHref: "#image_svg__b",
fill: "#D8D8D8"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M90 20H50l-10 8H5a5 5 0 00-5 5v47c0 5.523 4.477 10 10 10h80c5.523 0 10-4.477 10-10V30c0-5.55-4.5-10-10-10z",
fill: "#5D2BFF"
})));
});
FolderIcon.displayName = "FolderIcon";
var FolderIcon$1 = FolderIcon;
var StyledEntityCard = styled__default["default"](Card).withConfig({
displayName: "Styles__StyledEntityCard",
componentId: "sc-bjeea8-0"
})(["line-height:1.375;", " ", " ", " ", ""], function (_ref) {
var $renderAs = _ref.$renderAs;
return $renderAs === "list" && styled.css(["display:flex;flex-direction:row;align-items:center;min-height:48px;margin-bottom:4px;justify-content:space-between;padding:0 16px 0 16px;"]);
}, function (_ref2) {
var $renderAs = _ref2.$renderAs;
return $renderAs === "grid" && styled.css(["display:flex;flex-direction:column;position:relative;padding:20px 24px;height:280px;"]);
}, function (props) {
return props.$background && styled.css(["background-color:", ";"], props.$background);
}, function (_ref3) {
var $isCollection = _ref3.$isCollection,
$background = _ref3.$background;
return $isCollection && styled.css(["&::after{display:block;content:\"\";position:absolute;top:0;bottom:0;right:0;left:0;transform:rotate(-3deg);z-index:-1;", ";background-color:", ";}"], PaperStyles, $background);
});
StyledEntityCard.displayName = "StyledEntityCard";
var StyledEntityProperty = styled__default["default"]("div").withConfig({
displayName: "Styles__StyledEntityProperty",
componentId: "sc-bjeea8-1"
})(["", " ", " ", " ", " ", " ", " ", " ", " ", ""], function (_ref4) {
var $renderAs = _ref4.$renderAs,
$width = _ref4.$width;
return $renderAs === "list" && styled.css(["display:flex;align-items:center;min-width:24px;flex:", ";"], $width ? "initial" : 1);
}, function (props) {
return props.$renderAs === "list" && props.$order && styled.css(["order:", ";"], props.$order);
}, function (props) {
return props.$renderAs === "list" && props.$width && styled.css(["width:", ";"], props.$width);
}, function (_ref5) {
var $visibleFromBreakpoint = _ref5.$visibleFromBreakpoint;
return $visibleFromBreakpoint && styled.css(["", ""], {
"display": "none"
});
}, function (_ref6) {
var $visibleFromBreakpoint = _ref6.$visibleFromBreakpoint;
return $visibleFromBreakpoint === "sm" && styled.css(["", ""], {
"@media (min-width: 640px)": {
"display": "flex"
}
});
}, function (_ref7) {
var $visibleFromBreakpoint = _ref7.$visibleFromBreakpoint;
return $visibleFromBreakpoint === "md" && styled.css(["", ""], {
"@media (min-width: 768px)": {
"display": "flex"
}
});
}, function (_ref8) {
var $visibleFromBreakpoint = _ref8.$visibleFromBreakpoint;
return $visibleFromBreakpoint === "lg" && styled.css(["", ""], {
"@media (min-width: 1024px)": {
"display": "flex"
}
});
}, function (_ref9) {
var $visibleFromBreakpoint = _ref9.$visibleFromBreakpoint;
return $visibleFromBreakpoint === "xl" && styled.css(["", ""], {
"@media (min-width: 1280px)": {
"display": "flex"
}
});
}, function (_ref10) {
var $visibleFromBreakpoint = _ref10.$visibleFromBreakpoint;
return $visibleFromBreakpoint === "2xl" && styled.css(["", ""], {
"@media (min-width: 1536px)": {
"display": "flex"
}
});
});
StyledEntityProperty.displayName = "StyledEntityProperty";
var StyledEntityGroup = styled__default["default"]("div").withConfig({
displayName: "Styles__StyledEntityGroup",
componentId: "sc-bjeea8-2"
})(["", " ", ""], function (_ref11) {
var $renderAs = _ref11.$renderAs,
$gap = _ref11.$gap;
return $renderAs === "grid" && styled.css(["display:grid;grid-gap:", ";grid-template-columns:repeat(auto-fill,minmax(260px,1fr));"], $gap ? "".concat($gap, "px") : "initial");
}, function (props) {
return props.$renderAs === "list" && styled.css(["display:flex;flex-direction:column;"]);
});
StyledEntityGroup.displayName = "StyledEntityGroup";
styled__default["default"]("div").withConfig({
displayName: "Styles__StyledEntityActions",
componentId: "sc-bjeea8-3"
})(["display:flex;flex-direction:column;align-items:center;", " ", ""], function (_ref12) {
var $renderAs = _ref12.$renderAs;
return $renderAs === "grid" && styled.css(["position:absolute;right:16px;top:20px;"]);
}, function (_ref13) {
var $renderAs = _ref13.$renderAs;
return $renderAs === "list" && styled.css(["justify-self:flex-end;"]);
});
var _excluded$b = ["children", "gap", "renderAs"];
var EntityGroupContext = /*#__PURE__*/React__default["default"].createContext({
renderAs: "grid"
});
var EntityGroup = function EntityGroup(_ref) {
var children = _ref.children,
gap = _ref.gap,
_ref$renderAs = _ref.renderAs,
renderAs = _ref$renderAs === void 0 ? "grid" : _ref$renderAs,
rest = _objectWithoutProperties(_ref, _excluded$b);
return /*#__PURE__*/React__default["default"].createElement(EntityGroupContext.Provider, {
value: {
renderAs: renderAs
}
}, /*#__PURE__*/React__default["default"].createElement(StyledEntityGroup, _extends({
$renderAs: renderAs,
$gap: gap
}, rest), children));
};
EntityGroup.displayName = "EntityGroup";
var _excluded$a = ["children", "isCollection", "background", "className", "as"];
var EntityCard = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var children = _ref.children,
isCollection = _ref.isCollection,
background = _ref.background,
className = _ref.className,
as = _ref.as,
rest = _objectWithoutProperties(_ref, _excluded$a);
var _useContext = React.useContext(EntityGroupContext),
renderAs = _useContext.renderAs;
var classSuffix = "c-entity-card-".concat(renderAs);
var paperType = renderAs === "grid" ? "paper-1" : "paper-2";
var Component = as || Card;
return /*#__PURE__*/React__default["default"].createElement(StyledEntityCard, _extends({
as: Component,
$renderAs: renderAs,
$background: background,
variant: paperType,
className: classNames__default["default"]("c-entity-card", classSuffix, className),
$isCollection: isCollection
}, rest, {
ref: ref
}), children);
});
EntityCard.displayName = "EntityCard";
var _excluded$9 = ["listOrder", "listWidth", "visibleFromBreakpoint", "className"];
var EntityProperty = function EntityProperty(_ref) {
var listOrder = _ref.listOrder,
listWidth = _ref.listWidth,
visibleFromBreakpoint = _ref.visibleFromBreakpoint,
className = _ref.className,
props = _objectWithoutProperties(_ref, _excluded$9);
var _useContext = React.useContext(EntityGroupContext),
renderAs = _useContext.renderAs;
var classSuffix = "c-entity-property-".concat(renderAs);
return /*#__PURE__*/React__default["default"].createElement(StyledEntityProperty, _extends({
className: classNames__default["default"]("c-entity-property", classSuffix, className)
}, props, {
$order: listOrder,
$width: listWidth,
$visibleFromBreakpoint: visibleFromBreakpoint,
$renderAs: renderAs
}));
};
EntityProperty.displayName = "EntityProperty";
var _excluded$8 = ["children"];
var EntitySeparator = function EntitySeparator(_ref) {
var children = _ref.children,
rest = _objectWithoutProperties(_ref, _excluded$8);
return /*#__PURE__*/React__default["default"].createElement(_StyledDiv, rest, children);
};
var _StyledDiv = styled__default["default"]("div").withConfig({
displayName: "EntitySeparator___StyledDiv",
componentId: "sc-5xbpkw-0"
})(["grid-column:1 / -1;"]);
var Entity = {
Group: EntityGroup,
Card: EntityCard,
Property: EntityProperty,
Separator: EntitySeparator
};
var useEntityGroupContext = function useEntityGroupContext() {
return React__default["default"].useContext(EntityGroupContext);
};
var StyledMenu = styled__default["default"](Menu).withConfig({
displayName: "Styles__StyledMenu",
componentId: "sc-lxuoiz-0"
})(["", " ", ""], {
"position": "relative"
}, {
"overflow": "hidden"
});
var StyledMenuFooter = styled__default["default"](MenuFooter).withConfig({
displayName: "Styles__StyledMenuFooter",
componentId: "sc-lxuoiz-1"
})(["", ""], {
"justifyContent": "center"
});
var StyledStartMenuList = styled__default["default"](List).withConfig({
displayName: "Styles__StyledStartMenuList",
componentId: "sc-lxuoiz-2"
})(["", ""], {
"paddingTop": "0.5rem",
"paddingBottom": "0.5rem"
});
var StyledStartMenuListItem = styled__default["default"](ListItem).withConfig({
displayName: "Styles__StyledStartMenuListItem",
componentId: "sc-lxuoiz-3"
})(["", ""], {
"paddingRight": "0.75rem"
});
var StyledStartMenuTitle = styled__default["default"].div.withConfig({
displayName: "Styles__StyledStartMenuTitle",
componentId: "sc-lxuoiz-4"
})(["", ""], {
"flex": "1 1 0%"
});
var StyledStartMenuNoResults = styled__default["default"].div.withConfig({
displayName: "Styles__StyledStartMenuNoResults",
componentId: "sc-lxuoiz-5"
})(["", " ", ""], {
"paddingTop": "0.125rem",
"paddingBottom": "0.125rem"
}, {
"textAlign": "center"
});
var StyledStartMenuDot = styled__default["default"].span.withConfig({
displayName: "Styles__StyledStartMenuDot",
componentId: "sc-lxuoiz-6"
})(["border-radius:50%;background-color:var(--color-primary);color:var(--page-paper-main);line-height:15px;width:15px;font-weight:bold;font-size:10px;text-align:center;margin-left:4px;"]);
StyledMenu.displayName = "StyledMenu";
StyledMenuFooter.displayName = "StyledMenuFooter";
StyledStartMenuList.displayName = "StyledStartMenuList";
StyledStartMenuListItem.displayName = "StyledStartMenuListItem";
StyledStartMenuTitle.displayName = "StyledStartMenuTitle";
StyledStartMenuDot.displayName = "StyledStartMenuDot";
StyledStartMenuNoResults.displayName = "StyledStartMenuNoResults";
var StartMenu = function StartMenu(_ref) {
var data = _ref.data,
selected = _ref.selected,
onItemClick = _ref.onItemClick,
style = _ref.style,
onHeightChange = _ref.onHeightChange,
shouldRenderSubmenus = _ref.shouldRenderSubmenus,
emptyFilterText = _ref.emptyFilterText,
children = _ref.children;
var ref = React.useRef(null);
var dimensions = useResizeObserver$1(ref);
var height = dimensions === null || dimensions === void 0 ? void 0 : dimensions.height;
React.useEffect(function () {
if (height && height > 0) {
onHeightChange(height);
}
}, [height, onHeightChange]);
return /*#__PURE__*/React__default["default"].createElement("div", {
style: style,
ref: ref
}, /*#__PURE__*/React__default["default"].createElement(StyledStartMenuList, null, shouldRenderSubmenus ? data.map(function (_ref2, index) {
var id = _ref2.id,
title = _ref2.title,
submenu = _ref2.submenu;
var count = 0;
// Popricati o ovome kada je selected[id] vrednost 0.
if (typeof selected[id] === "string") {
count += 1;
} else {
var _selected$id;
count = (_selected$id = selected[id]) === null || _selected$id === void 0 ? void 0 : _selected$id.length;
}
if ((submenu === null || submenu === void 0 ? void 0 : submenu.length) > 1) {
return /*#__PURE__*/React__default["default"].createElement(StyledStartMenuListItem, {
key: "filter-list-item-".concat(index),
onClick: function onClick() {
return onItemClick(id);
}
}, /*#__PURE__*/React__default["default"].createElement(StyledStartMenuTitle, null, title), count > 0 ? /*#__PURE__*/React__default["default"].createElement(Badge, {
dimension: 16,
value: count,
isStandalone: true
}) : null, /*#__PURE__*/React__default["default"].createElement(ArrowRightIcon$1, null));
}
}) : emptyFilterText ? /*#__PURE__*/React__default["default"].createElement(StyledStartMenuNoResults, null, emptyFilterText) : null, children));
};
var Submenu = function Submenu(_ref) {
var onBack = _ref.onBack,
onHeightChange = _ref.onHeightChange,
style = _ref.style,
children = _ref.children,
title = _ref.title,
indexPage = _ref.indexPage;
var ref = React.useRef(null);
var dimensions = useResizeObserver$1(ref);
var height = dimensions === null || dimensions === void 0 ? void 0 : dimensions.height;
React.useEffect(function () {
if (height && height > 0 && !indexPage) {
onHeightChange === null || onHeightChange === void 0 || onHeightChange(height);
}
}, [height, onHeightChange, indexPage]);
return /*#__PURE__*/React__default["default"].createElement("div", {
style: style,
ref: ref
}, /*#__PURE__*/React__default["default"].createElement(MenuHeader, {
title: title,
leftElement: /*#__PURE__*/React__default["default"].createElement(IconButton, {
onClick: onBack,
variant: "text gray",
size: "small"
}, /*#__PURE__*/React__default["default"].createElement(ArrowLeftIcon$1, null))
}), children);
};
var _excluded$7 = ["id", "title", "submenu", "searchPlaceholder", "disableInternalSort", "isSingleSelect", "defaultValue"];
var Filter = function Filter(_ref) {
var data = _ref.data,
_ref$selected = _ref.selected,
selected = _ref$selected === void 0 ? {} : _ref$selected,
label = _ref.label,
clearAllText = _ref.clearAllText,
_ref$resetLabel = _ref.resetLabel,
resetLabel = _ref$resetLabel === void 0 ? "Reset" : _ref$resetLabel,
onChange = _ref.onChange,
_ref$width = _ref.width,
width = _ref$width === void 0 ? 260 : _ref$width,
noResultText = _ref.noResultText,
emptyFilterText = _ref.emptyFilterText,
children = _ref.children,
_ref$icon = _ref.icon,
icon = _ref$icon === void 0 ? /*#__PURE__*/React__default["default"].createElement(FilterIcon$1, null) : _ref$icon,
_ref$position = _ref.position,
position = _ref$position === void 0 ? "bottom-end" : _ref$position,
_ref$disabled = _ref.disabled,
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
className = _ref.className;
var _useState = React.useState(false),
_useState2 = _slicedToArray(_useState, 2),
open = _useState2[0],
setOpen = _useState2[1];
var _useState3 = React.useState("index"),
_useState4 = _slicedToArray(_useState3, 2),
menu = _useState4[0],
setMenu = _useState4[1];
var _useState5 = React.useState(true),
_useState6 = _slicedToArray(_useState5, 2),
isLeft = _useState6[0],
setIsLeft = _useState6[1];
var _useState7 = React.useState(0),
_useState8 = _slicedToArray(_useState7, 2),
height = _useState8[0],
setHeight = _useState8[1];
var _useState9 = React.useState("index"),
_useState10 = _slicedToArray(_useState9, 2),
enteredMenu = _useState10[0],
setEnteredMenu = _useState10[1];
var _useState11 = React.useState(function () {
return selected;
}),
_useState12 = _slicedToArray(_useState11, 2),
filter = _useState12[0],
setFilter = _useState12[1];
React.useEffect(function () {
if (Object.keys(selected).length > 0 || Object.keys(filter).length > 0) {
setFilter(selected);
}
}, [selected, filter]);
var handleOpen = React.useCallback(function () {
setOpen(true);
}, []);
var handleClose = React.useCallback(function () {
setOpen(false);
setMenu("index");
setHeight(0);
}, []);
var handleHeight = React.useCallback(function (element) {
var _element$offsetHeight;
setHeight((_element$offsetHeight = element === null || element === void 0 ? void 0 : element.offsetHeight) !== null && _element$offsetHeight !== void 0 ? _element$offsetHeight : 0);
}, []);
var handleItemClick = React.useCallback(function (value) {
setMenu(value);
setIsLeft(true);
}, []);
var setIndex = React.useCallback(function () {
setMenu("index");
setIsLeft(false);
}, []);
var handleChange = React.useCallback(function (selectedArray) {
var newFilters = {};
if (selectedArray.length) {
newFilters = _objectSpread2(_objectSpread2({}, filter), {}, {
[menu]: selectedArray
});
} else {
newFilters = _objectSpread2({}, filter);
delete newFilters[menu];
}
setFilter(newFilters);
onChange(newFilters);
}, [filter, menu, onChange]);
var handleClearAll = React.useCallback(function (event) {
event.stopPropagation();
setFilter({});
onChange({});
}, [onChange]);
var handleReset = React.useCallback(function () {
var newFilters = _objectSpread2({}, filter);
delete newFilters[menu];
setFilter(newFilters);
onChange(newFilters);
}, [filter, menu, onChange]);
var count = React.useMemo(function () {
var c = 0;
Object.values(filter).forEach(function (entry) {
if (typeof entry === "string") {
return c += 1;
}
return c += entry.length;
});
return c;
}, [filter]);
var shouldRenderSubmenus = React.useMemo(function () {
if (data.length === 0) {
return false;
}
for (var entry of data) {
var _entry$submenu;
if (((_entry$submenu = entry.submenu) === null || _entry$submenu === void 0 ? void 0 : _entry$submenu.length) > 1) {
return true;
}
}
return false;
}, [data]);
return /*#__PURE__*/React__default["default"].createElement(StyledMenu, {
open: open,
onOpen: handleOpen,
onClose: handleClose,
position: position,
target: /*#__PURE__*/React__default["default"].createElement(CounterButton, {
active: open,
label: label,
icon: icon,
counter: count,
tooltipText: clearAllText,
onClearAll: handleClearAll,
disabled: disabled,
labelClassName: className
})
}, /*#__PURE__*/React__default["default"].createElement(ResizeTransition, {
in: true
}, /*#__PURE__*/React__default["default"].createElement("div", {
style: {
height,
width
}
}, /*#__PURE__*/React__default["default"].createElement(SlideLeftRightTransition, {
in: menu === "index",
direction: isLeft ? "left" : "right",
onEnter: handleHeight,
onEntered: function onEntered() {
return setEnteredMenu("index");
}
}, /*#__PURE__*/React__default["default"].createElement(FocusLock.MoveFocusInside, null, /*#__PURE__*/React__default["default"].createElement(StartMenu, {
data: data,
selected: filter,
style: {
width
},
onHeightChange: setHeight,
onItemClick: handleItemClick,
shouldRenderSubmenus: shouldRenderSubmenus,
emptyFilterText: emptyFilterText
}, children))), shouldRenderSubmenus && data.map(function (_ref2, index) {
var _filter$id;
var id = _ref2.id,
title = _ref2.title,
submenu = _ref2.submenu,
searchPlaceholder = _ref2.searchPlaceholder,
disableInternalSort = _ref2.disableInternalSort,
isSingleSelect = _ref2.isSingleSelect,
defaultValue = _ref2.defaultValue,
rest = _objectWithoutProperties(_ref2, _excluded$7);
return /*#__PURE__*/React__default["default"].createElement(SlideLeftRightTransition, {
key: "filter-submenu-".concat(index),
in: menu === id,
direction: isLeft ? "left" : "right",
onEnter: handleHeight,
onEntered: function onEntered() {
return setEnteredMenu(id);
}
}, /*#__PURE__*/React__default["default"].createElement(Submenu, {
title: title,
onBack: setIndex,
onHeightChange: setHeight,
style: {
width
},
indexPage: menu === "index"
}, /*#__PURE__*/React__default["default"].createElement(FocusLock.MoveFocusInside, {
disabled: enteredMenu !== id
}, /*#__PURE__*/React__default["default"].createElement(Select, _extends({
options: submenu,
selected: filter[id],
onChange: handleChange,
type: isSingleSelect ? "single" : "multiple",
autoHeightMax: 255,
placeholder: searchPlaceholder,
noResultText: noResultText,
keepSameOptionsOrder: Boolean(submenu.length <= 7),
disableSearch: Boolean(submenu.length <= 7),
disabledInternalSort: disableInternalSort,
defaultValue: defaultValue
}, rest)), (_filter$id = filter[id]) !== null && _filter$id !== void 0 && _filter$id.length ? /*#__PURE__*/React__default["default"].createElement(StyledMenuFooter, null, /*#__PURE__*/React__default["default"].createElement(Button, {
variant: "text colored",
size: "small",
onClick: handleReset
}, resetLabel)) : null)));
}))));
};
var WizardContext = /*#__PURE__*/React.createContext({});
var WizardContextProvider = WizardContext.Provider;
WizardContext.Consumer;
var useWizardContext = function useWizardContext() {
return React.useContext(WizardContext);
};
var StepActionButton = function StepActionButton(_ref) {
var onNextButtonClick = _ref.onNextButtonClick,
_ref$actionLabel = _ref.actionLabel,
actionLabel = _ref$actionLabel === void 0 ? "Proceed" : _ref$actionLabel,
isLast = _ref.isLast,
disabled = _ref.disabled,
className = _ref.className;
return /*#__PURE__*/React__default["default"].createElement(Button, {
className: className,
onClick: onNextButtonClick,
disabled: disabled
}, actionLabel, !isLast ? /*#__PURE__*/React__default["default"].createElement(ArrowRightIcon$1, null) : null);
};
StepActionButton.displayName = "StepActionButton";
var StyledStepHeader = styled__default["default"].div.withConfig({
displayName: "Styles__StyledStepHeader",
componentId: "sc-88drbd-0"
})(["display:flex;padding:12px 12px 12px 32px;justify-content:space-between;"]);
var StyledStepTitle = styled__default["default"].div.withConfig({
displayName: "Styles__StyledStepTitle",
componentId: "sc-88drbd-1"
})(["display:flex;flex-direction:column;justify-content:center;"]);
var StyledStepHeaderLeft = styled__default["default"].div.withConfig({
displayName: "Styles__StyledStepHeaderLeft",
componentId: "sc-88drbd-2"
})(["display:flex;"]);
var StyledCustomStep = styled__default["default"].div.withConfig({
displayName: "Styles__StyledCustomStep",
componentId: "sc-88drbd-3"
})(["overflow-y:auto;"]);
var Step = function Step(_ref) {
var index = _ref.index,
isLast = _ref.isLast,
subtitle = _ref.subtitle,
title = _ref.title,
onNextButtonClick = _ref.onNextButtonClick,
onPreviousButtonClick = _ref.onPreviousButtonClick,
onClose = _ref.onClose,
children = _ref.children,
_ref$actionLabel = _ref.actionLabel,
actionLabel = _ref$actionLabel === void 0 ? "Proceed" : _ref$actionLabel,
_ref$shouldRenderNext = _ref.shouldRenderNextButton,
shouldRenderNextButton = _ref$shouldRenderNext === void 0 ? true : _ref$shouldRenderNext,
_ref$changingStepInPr = _ref.changingStepInProgress,
changingStepInProgress = _ref$changingStepInPr === void 0 ? false : _ref$changingStepInPr,
_ref$disableBackButto = _ref.disableBackButton,
disableBackButton = _ref$disableBackButto === void 0 ? false : _ref$disableBackButto,
customRightHeader = _ref.customRightHeader,
_ref$skip = _ref.skip,
skip = _ref$skip === void 0 ? false : _ref$skip;
var onActionButtonClick = React.useCallback(function () {
if (isLast && onClose) {
return onClose();
}
return onNextButtonClick && onNextButtonClick();
}, [isLast, onClose, onNextButtonClick]);
return !skip ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(StyledStepHeader, null, /*#__PURE__*/React__default["default"].createElement(StyledStepHeaderLeft, null, !disableBackButton && index && index > 0 ? /*#__PURE__*/React__default["default"].createElement(IconButton, {
onClick: onPreviousButtonClick,
variant: "text gray",
className: "tw--ml-3 tw-mr-2",
disabled: changingStepInProgress
}, /*#__PURE__*/React__default["default"].createElement(ArrowBackMobileIcon$1, null)) : null, /*#__PURE__*/React__default["default"].createElement(StyledStepTitle, null, /*#__PURE__*/React__default["default"].createElement(Caption2, null, title), /*#__PURE__*/React__default["default"].createElement(Header3, null, subtitle))), customRightHeader ? customRightHeader : /*#__PURE__*/React__default["default"].createElement(IconButton, {
onClick: onClose,
variant: "text gray",
disabled: changingStepInProgress
}, /*#__PURE__*/React__default["default"].createElement(CancelCrossIcon$1, null))), /*#__PURE__*/React__default["default"].createElement(Dialog.ContentDivider, null), shouldRenderNextButton ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Dialog.Content, null, children), /*#__PURE__*/React__default["default"].createElement(Dialog.ContentDivider, null), /*#__PURE__*/React__default["default"].createElement(Dialog.Actions, null, /*#__PURE__*/React__default["default"].createElement(StepActionButton, {
isLast: isLast,
actionLabel: actionLabel,
onNextButtonClick: onActionButtonClick
}))) : /*#__PURE__*/React__default["default"].createElement(StyledCustomStep, null, children)) : null;
};
Step.displayName = "Step";
var Wizard = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var title = _ref.title,
open = _ref.open,
onClose = _ref.onClose,
_ref$disableCloseOnEs = _ref.disableCloseOnEsc,
disableCloseOnEsc = _ref$disableCloseOnEs === void 0 ? false : _ref$disableCloseOnEs,
children = _ref.children,
dialogClassName = _ref.dialogClassName;
var childrenCollection = React.useMemo(function () {
return React__default["default"].Children.toArray(children);
}, [children]);
var _useState = React.useState(0),
_useState2 = _slicedToArray(_useState, 2),
activeStep = _useState2[0],
setActiveStep = _useState2[1];
var _useState3 = React.useState(false),
_useState4 = _slicedToArray(_useState3, 2),
changingStepInProgress = _useState4[0],
setChangingStepInProgress = _useState4[1];
React.useEffect(function () {
if (open) {
setActiveStep(0);
}
}, [open]);
var goNext = React.useCallback(function () {
var index = childrenCollection.findIndex(function (step, index) {
var _stepEl$props;
var stepEl = step;
return !(stepEl !== null && stepEl !== void 0 && (_stepEl$props = stepEl.props) !== null && _stepEl$props !== void 0 && _stepEl$props.skip) && index > activeStep;
});
setActiveStep(index);
}, [activeStep, childrenCollection]);
var goPrevious = React.useCallback(function () {
var index = 0;
for (var i = childrenCollection.length - 1; i >= 0; i--) {
var _step$props;
var step = childrenCollection[i];
if (!(step !== null && step !== void 0 && (_step$props = step.props) !== null && _step$props !== void 0 && _step$props.skip) && i < activeStep) {
index = i;
break;
}
}
setActiveStep(index);
}, [activeStep, childrenCollection]);
var renderActiveStep = React.useMemo(function () {
var element = childrenCollection[activeStep];
if ((element === null || element === void 0 ? void 0 : element.type) === Step) {
return /*#__PURE__*/React__default["default"].cloneElement(element, {
index: activeStep,
isLast: childrenCollection.length - 1 === activeStep,
title,
onNextButtonClick: goNext,
onPreviousButtonClick: goPrevious,
onClose,
changingStepInProgress: changingStepInProgress
});
}
return null;
}, [activeStep, changingStepInProgress, childrenCollection, goNext, goPrevious, onClose, title]);
return /*#__PURE__*/React__default["default"].createElement(WizardContextProvider, {
value: {
activeStep,
setActiveStep,
goNext,
goPrevious,
close: onClose,
setChangingStepInProgress
}
}, /*#__PURE__*/React__default["default"].createElement(Dialog, {
ref: ref,
open: open,
onClose: onClose,
disableCloseOnEsc: disableCloseOnEsc,
className: dialogClassName
}, renderActiveStep));
});
Wizard.displayName = "Wizard";
var AvatarGroupsStyles = styled__default["default"].div.withConfig({
displayName: "Styles__AvatarGroupsStyles",
componentId: "sc-1padv46-0"
})(["", " align-items:center;align-items:center;border-radius:var(--ac-br-6);cursor:", ";display:flex;justify-content:center;padding:", ";user-select:none;width:fit-content;&:hover{background-color:", ";transition:all 0.2s ease-in-out;}"], FontStyle, function (_ref) {
var hasTooltip = _ref.hasTooltip;
return hasTooltip ? "default" : "pointer";
}, function (_ref2) {
var hasTooltip = _ref2.hasTooltip;
return hasTooltip ? "5px 0" : "5px";
}, function (props) {
return !props.hasTooltip && "var(--color-theme-300)";
});
var LengthCountStyles = styled__default["default"].div.withConfig({
displayName: "Styles__LengthCountStyles",
componentId: "sc-1padv46-1"
})(["align-items:center;background-color:var(--color-theme-400);block-size:", ";border-radius:var(--ac-br-rounded);display:flex;inline-size:", ";justify-content:center;outline:1px solid var(--page-paper-main);z-index:99;"], function (props) {
return props.size + "px";
}, function (props) {
return props.size + "px";
});
var _excluded$6 = ["limit", "size", "children", "hasTooltip"];
var AvatarGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var _Children$toArray;
var limit = _ref.limit,
_ref$size = _ref.size,
size = _ref$size === void 0 ? 34 : _ref$size,
children = _ref.children,
_ref$hasTooltip = _ref.hasTooltip,
hasTooltip = _ref$hasTooltip === void 0 ? false : _ref$hasTooltip,
rest = _objectWithoutProperties(_ref, _excluded$6);
// always display counter with min +2 as +1 can takes space of an 1 more Avatar
var minChildren = React.Children.count(children) - limit > 1 ? false : true;
// gap between Avatars
var gap = 8;
var _children = minChildren ? React.Children.toArray(children) : React.Children.toArray(children).slice(0, limit);
var handleVariant = React.useMemo(function () {
if (size >= 34) return "Caption 1";
return "Caption 2";
}, [size]);
// get all names indexed above limit number from alt tag on Avatar for counter tooltip
var nameArr = (_Children$toArray = React.Children.toArray(children)) === null || _Children$toArray === void 0 ? void 0 : _Children$toArray.slice(limit).map(function (item) {
var _ref2 = item,
props = _ref2.props;
return props.alt;
});
return /*#__PURE__*/React__default["default"].createElement(AvatarGroupsStyles, _extends({
hasTooltip: hasTooltip,
ref: ref
}, rest), _children.map(function (child, index) {
var item = child;
var tooltipText = item.props.alt;
var alt = "Image of ".concat(tooltipText);
return /*#__PURE__*/React__default["default"].createElement(Tooltip, {
title: tooltipText ? tooltipText : "",
disable: !hasTooltip,
key: alt
}, /*#__PURE__*/React.cloneElement(item, _objectSpread2(_objectSpread2({}, item.props), {}, {
size: size,
alt: alt,
style: {
// component preserves it's width
marginLeft: "-".concat(index === 0 ? null : gap, "px"),
outline: "1px solid var(--page-paper-main)"
}
})));
}), limit >= React.Children.count(children) || minChildren ? null : /*#__PURE__*/React__default["default"].createElement(_StyledTooltip, {
title: nameArr.join(",\n"),
disable: !hasTooltip
}, /*#__PURE__*/React__default["default"].createElement(_StyledLengthCountStyles, {
size: size,
role: "status",
"aria-label": "Rest of the users",
$_css: "-".concat(gap, "px")
}, /*#__PURE__*/React__default["default"].createElement(Typography, {
variant: handleVariant,
weight: "medium"
}, "+", React.Children.count(children) - limit))));
});
AvatarGroup.displayName = "AvatarGroup";
var _StyledTooltip = styled__default["default"](Tooltip).withConfig({
displayName: "AvatarGroup___StyledTooltip",
componentId: "sc-1rsx1j5-0"
})({
whiteSpace: "break-spaces",
lineHeight: "18px"
});
var _StyledLengthCountStyles = styled__default["default"](LengthCountStyles).withConfig({
displayName: "AvatarGroup___StyledLengthCountStyles",
componentId: "sc-1rsx1j5-1"
})(function (p) {
return {
marginLeft: p.$_css
};
});
var StyledCommandPalette = styled__default["default"].div.withConfig({
displayName: "CommandPalettestyles__StyledCommandPalette",
componentId: "sc-na3mad-0"
})(["", " background-color:var(--page-paper-main);border-radius:10px;box-sizing:border-box;max-width:600px;mark{background-color:var(--color-primary-300);color:var(--color-theme-900);}"], FontStyle);
var StyledCommandPaletteWrapper = styled__default["default"].div.withConfig({
displayName: "CommandPalettestyles__StyledCommandPaletteWrapper",
componentId: "sc-na3mad-1"
})(["overflow-x:hidden;overflow-y:auto;max-height:450px;&:not(:empty){border-top:1px solid var(--color-theme-400);padding-bottom:8px;padding-top:8px;}"]);
var StyledCommandPaletteHeader = styled__default["default"].div.withConfig({
displayName: "CommandPalettestyles__StyledCommandPaletteHeader",
componentId: "sc-na3mad-2"
})(["align-items:center;display:flex;padding-bottom:12px;padding-left:16px;padding-right:16px;padding-top:12px;"]);
var StyledSearchIcon = styled__default["default"].div.withConfig({
displayName: "CommandPalettestyles__StyledSearchIcon",
componentId: "sc-na3mad-3"
})(["margin-right:8px;svg{vertical-align:middle;}"]);
var StyledInput = styled__default["default"].input.withConfig({
displayName: "CommandPalettestyles__StyledInput",
componentId: "sc-na3mad-4"
})(["all:unset;caret-color:var(--color-primary);color:var(--color-theme-900);width:100%;", "{font-size:32px;font-weight:300;letter-spacing:0.5px;line-height:44px;}::-webkit-outer-spin-button,::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&[type=\"search\"]::-webkit-search-decoration,&[type=\"search\"]::-webkit-search-cancel-button,&[type=\"search\"]::-webkit-search-results-button,&[type=\"search\"]::-webkit-search-results-decoration{-webkit-appearance:none;}&[type=\"number\"]{-moz-appearance:textfield;}::placeholder{color:var(--color-theme-transparent-500);}::selection{background:var(--color-primary-300);}"], screen.sm);
var StyledParameter = styled__default["default"].span.withConfig({
displayName: "CommandPalettestyles__StyledParameter",
componentId: "sc-na3mad-5"
})(["color:var(--color-theme-transparent-500);margin-right:8px;flex-shrink:0;", "{font-size:32px;font-weight:300;letter-spacing:0.5px;line-height:44px;}"], screen.sm);
var StyledActionWrapper = styled__default["default"].div.withConfig({
displayName: "CommandPalettestyles__StyledActionWrapper",
componentId: "sc-na3mad-6"
})(["align-items:center;display:flex;gap:8px;"]);
var StyledIcon = styled__default["default"].div.withConfig({
displayName: "CommandPalettestyles__StyledIcon",
componentId: "sc-na3mad-7"
})(["margin-right:8px;svg{vertical-align:middle;}"]);
var StyledCommandPaletteList = styled__default["default"].ul.withConfig({
displayName: "CommandPalettestyles__StyledCommandPaletteList",
componentId: "sc-na3mad-8"
})(["list-style-type:none;margin:0;padding:0;overflow:hidden;&:not(:first-child){border-top:1px solid var(--color-theme-400);}"]);
var StyledHeading = styled__default["default"].p.withConfig({
displayName: "CommandPalettestyles__StyledHeading",
componentId: "sc-na3mad-9"
})(["font-size:12px;margin-top:12px;margin-bottom:4px;font-weight:bold;padding-left:18px;letter-spacing:0.5px;color:var(--color-theme-600);"]);
// prettier-ignore
var StyledCommandPaletteItem = styled__default["default"].a.withConfig({
displayName: "CommandPalettestyles__StyledCommandPaletteItem",
componentId: "sc-na3mad-10"
})(["align-items:center;cursor:pointer;display:flex;padding-bottom:12px;padding-left:18px;padding-right:18px;padding-top:12px;position:relative;background-color:", ";&:focus{background-color:var(--color-theme-200);}&::before{display:", ";background-color:var(--color-primary);content:\"\";height:100%;left:0;position:absolute;width:2px;}&:focus{outline:none;}"], function (_ref) {
var $selected = _ref.$selected;
return $selected ? "var(--color-theme-200)" : "transparent";
}, function (_ref2) {
var $selected = _ref2.$selected;
return $selected ? "block" : "none";
});
var StyledCommandPaletteCommandItem = styled__default["default"](StyledCommandPaletteItem).withConfig({
displayName: "CommandPalettestyles__StyledCommandPaletteCommandItem",
componentId: "sc-na3mad-11"
})(["user-select:none;"]);
var StyledSpinnerLoader = styled__default["default"](SpinnerLoader).withConfig({
displayName: "CommandPalettestyles__StyledSpinnerLoader",
componentId: "sc-na3mad-12"
})(["margin-right:4px;"]);
var StyledCommandPaletteItemLoader = styled__default["default"].div.withConfig({
displayName: "CommandPalettestyles__StyledCommandPaletteItemLoader",
componentId: "sc-na3mad-13"
})(["align-items:center;display:flex;gap:8px;padding-bottom:12px;padding-left:18px;padding-right:18px;padding-top:12px;pointer-events:none;user-select:none;"]);
var ModeContext = /*#__PURE__*/React.createContext({
mode: "default",
setMode: function setMode() {
return null;
},
idModeEnabled: false
});
var ModeContextProvider = ModeContext.Provider;
var useModeContext = function useModeContext() {
return React.useContext(ModeContext);
};
var SelectedContext = /*#__PURE__*/React.createContext({
selected: 0,
setSelected: function setSelected() {
return null;
}
});
var SelectedContextProvider = SelectedContext.Provider;
var useSelectedContext = function useSelectedContext() {
return React.useContext(SelectedContext);
};
var SearchContext = /*#__PURE__*/React.createContext({
search: "",
onChangeSearch: function onChangeSearch() {
return null;
}
});
var SearchContextProvider = SearchContext.Provider;
var useSearchContext = function useSearchContext() {
return React.useContext(SearchContext);
};
var _excluded$5 = ["title", "renderIcon", "className", "index", "as"];
var CommandPaletteCommandItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var title = _ref.title,
renderIcon = _ref.renderIcon,
className = _ref.className,
index = _ref.index,
as = _ref.as,
rest = _objectWithoutProperties(_ref, _excluded$5);
var Component = as || "a";
var icon = renderIcon();
var _useSelectedContext = useSelectedContext(),
selected = _useSelectedContext.selected,
setSelected = _useSelectedContext.setSelected;
var onMouseEnter = function onMouseEnter() {
setSelected(index);
};
return /*#__PURE__*/React__default["default"].createElement("li", null, /*#__PURE__*/React__default["default"].createElement(StyledCommandPaletteCommandItem, _extends({}, rest, {
as: Component,
ref: ref,
className: classNames__default["default"]("cp-item cp-command", className),
tabIndex: 1,
"aria-selected": selected === index,
onMouseEnter: onMouseEnter,
$selected: index === selected
}), /*#__PURE__*/React__default["default"].createElement(StyledIcon, null, icon), /*#__PURE__*/React__default["default"].createElement(_StyledTypography, {
overflow: "truncate",
whitespace: "no-wrap",
variant: "Body 1",
color: "primary"
}, title), /*#__PURE__*/React__default["default"].createElement(ArrowRightIcon$1, null)));
});
CommandPaletteCommandItem.displayName = "CommandPaletteCommandItem";
var _StyledTypography = styled__default["default"](Typography).withConfig({
displayName: "CommandPaletteCommandItem___StyledTypography",
componentId: "sc-1t486ve-0"
})(["flex:1;"]);
var CommandPaletteHeader = function CommandPaletteHeader(_ref) {
var _ref$loading = _ref.loading,
loading = _ref$loading === void 0 ? false : _ref$loading,
commandsLength = _ref.commandsLength,
itemsLength = _ref.itemsLength;
var inputRef = React.useRef(null);
var _useModeContext = useModeContext(),
mode = _useModeContext.mode,
setMode = _useModeContext.setMode,
idModeEnabled = _useModeContext.idModeEnabled;
var _useSelectedContext = useSelectedContext(),
setSelected = _useSelectedContext.setSelected,
selected = _useSelectedContext.selected;
var _useSearchContext = useSearchContext(),
search = _useSearchContext.search,
onChangeSearch = _useSearchContext.onChangeSearch;
var focusInput = function focusInput() {
if (inputRef && inputRef.current) {
inputRef.current.focus();
}
};
var clearInput = function clearInput() {
if (inputRef && inputRef.current) {
inputRef.current.value = "";
onChangeSearch("");
}
};
React.useEffect(function () {
if (search.length > 0) {
if (itemsLength > commandsLength) {
setSelected(commandsLength);
} else {
setSelected(0);
}
}
}, [search, commandsLength, itemsLength, setSelected]);
React.useEffect(function () {
focusInput();
}, [mode]);
var handleInputPlaceholder = React.useMemo(function () {
if (typeof mode === "object") {
return "Search";
}
if (mode === "id") {
return "1";
}
return "Search or jump to";
}, [mode]);
var handleKeyDown = function handleKeyDown(e) {
if (e.key === "Backspace" && mode !== "default" && e.target.value === "") {
setMode("default");
clearInput();
}
if (e.key === "Enter") {
var selectedItem = document.querySelectorAll(".cp-item")[selected];
if (itemsLength > 0) {
selectedItem.click();
}
}
};
return /*#__PURE__*/React__default["default"].createElement(StyledCommandPaletteHeader, {
className: "cp-header"
}, /*#__PURE__*/React__default["default"].createElement(StyledSearchIcon, null, /*#__PURE__*/React__default["default"].createElement(SearchLargeIcon$1, null)), mode === "id" ? /*#__PURE__*/React__default["default"].createElement(StyledParameter, null, "ID#:") : null, typeof mode === "object" ? /*#__PURE__*/React__default["default"].createElement(StyledParameter, null, mode.name.length > 10 ? mode.name.slice(0, 10) + "..." : mode.name, "/") : null, /*#__PURE__*/React__default["default"].createElement(StyledInput, {
ref: inputRef,
autoFocus: true,
placeholder: handleInputPlaceholder,
type: "search",
"aria-autocomplete": "list",
autoCapitalize: "none",
autoComplete: "off",
autoCorrect: "off",
role: "combobox",
spellCheck: false,
value: search,
onKeyDown: handleKeyDown,
onChange: function onChange(e) {
var inputText = e.target.value;
if (inputText.startsWith("#") && idModeEnabled && search.length === 0) {
setMode("id");
onChangeSearch(inputText.slice(1));
return;
}
onChangeSearch(inputText);
}
}), /*#__PURE__*/React__default["default"].createElement(StyledActionWrapper, null, loading ? /*#__PURE__*/React__default["default"].createElement(StyledSpinnerLoader, {
"aria-busy": true,
"aria-label": "Loading...",
"aria-valuemax": 100,
"aria-valuemin": 0,
role: "progressbar"
}) : null, mode !== "id" && typeof mode !== "object" && idModeEnabled && search.length === 0 ? /*#__PURE__*/React__default["default"].createElement(Tooltip, {
title: "Search by ID",
placement: "top"
}, /*#__PURE__*/React__default["default"].createElement(IconButton, {
onKeyPress: function onKeyPress(e) {
if (e.key === "Enter") {
setMode("id");
clearInput();
}
},
onClick: function onClick() {
setMode("id");
clearInput();
},
variant: "text gray"
}, /*#__PURE__*/React__default["default"].createElement(HashtagIcon$1, null))) : null, search.length > 0 || mode === "id" || typeof mode === "object" ? /*#__PURE__*/React__default["default"].createElement(Tooltip, {
title: "Clear",
placement: "top"
}, /*#__PURE__*/React__default["default"].createElement(IconButton, {
variant: "text gray",
onKeyPress: function onKeyPress(e) {
if (e.key === "Enter") {
setMode("default");
clearInput();
focusInput();
}
},
onClick: function onClick() {
setMode("default");
clearInput();
focusInput();
}
}, /*#__PURE__*/React__default["default"].createElement(CloseIcon$1, null))) : null));
};
CommandPaletteHeader.displayName = "CommandPaletteItem";
var findHighlightedSearch = function findHighlightedSearch(searchValue, target) {
if (searchValue && target) {
var purifiedTarget = target === null || target === void 0 ? void 0 : target.replace(/<script.*?>.*?<\/script>/gi, "");
var parser = new DOMParser();
var doc = parser.parseFromString(purifiedTarget, "text/html");
var text = doc.body.textContent || "";
var checkValidSearchChars = searchValue.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
var regex = new RegExp("(".concat(checkValidSearchChars, ")"), "gi");
return text.replace(regex, "<mark>$1</mark>");
}
return "";
};
var _excluded$4 = ["title", "renderIcon", "className", "index", "loading", "as"];
var generateRandomWidth = function generateRandomWidth() {
// generate range 30-80
var randomNum = Math.round(Math.random() * 30 + 30);
return randomNum + "%";
};
var CommandPaletteItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var title = _ref.title,
renderIcon = _ref.renderIcon,
className = _ref.className,
index = _ref.index,
loading = _ref.loading,
as = _ref.as,
rest = _objectWithoutProperties(_ref, _excluded$4);
var Component = as || "a";
var icon = renderIcon && renderIcon();
var _useSelectedContext = useSelectedContext(),
selected = _useSelectedContext.selected,
setSelected = _useSelectedContext.setSelected;
var _useSearchContext = useSearchContext(),
search = _useSearchContext.search;
var onMouseEnter = function onMouseEnter() {
setSelected(index);
};
if (loading) {
return /*#__PURE__*/React__default["default"].createElement(StyledCommandPaletteItemLoader, {
"aria-busy": true,
"aria-disabled": true
}, /*#__PURE__*/React__default["default"].createElement(_StyledSkeletonLoader, null), /*#__PURE__*/React__default["default"].createElement(_StyledSkeletonLoader2, {
$_css: generateRandomWidth()
}));
}
return /*#__PURE__*/React__default["default"].createElement("li", null, /*#__PURE__*/React__default["default"].createElement(StyledCommandPaletteItem, _extends({}, rest, {
as: Component,
ref: ref,
className: classNames__default["default"]("cp-item", className),
tabIndex: 1,
"aria-selected": selected === index,
onMouseEnter: onMouseEnter,
$selected: index === selected
}), /*#__PURE__*/React__default["default"].createElement(StyledIcon, null, icon), search && title ? /*#__PURE__*/React__default["default"].createElement(Typography, {
overflow: "truncate",
whitespace: "no-wrap",
variant: "Body 1",
color: "primary",
dangerouslySetInnerHTML: {
__html: findHighlightedSearch(search, title)
}
}) : null));
});
CommandPaletteItem.displayName = "CommandPaletteItem";
var _StyledSkeletonLoader = styled__default["default"](SkeletonLoader).withConfig({
displayName: "CommandPaletteItem___StyledSkeletonLoader",
componentId: "sc-6tfj5q-0"
})({
width: 24,
height: 24,
borderRadius: "100%"
});
var _StyledSkeletonLoader2 = styled__default["default"](SkeletonLoader).withConfig({
displayName: "CommandPaletteItem___StyledSkeletonLoader2",
componentId: "sc-6tfj5q-1"
})(function (p) {
return {
width: p.$_css,
height: 16
};
});
var CommandPaletteList = function CommandPaletteList(_ref) {
var children = _ref.children,
heading = _ref.heading,
_ref$visible = _ref.visible,
visible = _ref$visible === void 0 ? false : _ref$visible;
return visible ? /*#__PURE__*/React__default["default"].createElement(StyledCommandPaletteList, {
className: "cp-list",
tabIndex: -1,
role: "listbox"
}, heading ? /*#__PURE__*/React__default["default"].createElement(StyledHeading, {
tabIndex: -1
}, heading) : null, children) : null;
};
CommandPaletteList.displayName = "CommandPaletteList";
var hasChildren = function hasChildren(element) {
return /*#__PURE__*/React.isValidElement(element) && Boolean(element.props.children);
};
var hasComplexChildren = function hasComplexChildren(element) {
return /*#__PURE__*/React.isValidElement(element) && hasChildren(element) && React.Children.toArray(element.props.children).reduce(function (response, child) {
return response || /*#__PURE__*/React.isValidElement(child);
}, false);
};
var deepMap = function deepMap(children, deepMapFn) {
return React.Children.toArray(children).map(function (child, index, mapChildren) {
if ( /*#__PURE__*/React.isValidElement(child) && hasComplexChildren(child)) {
return deepMapFn( /*#__PURE__*/React.cloneElement(child, _objectSpread2(_objectSpread2({}, child.props), {}, {
children: deepMap(child.props.children, deepMapFn)
})));
}
return deepMapFn(child, index, mapChildren);
});
};
var _excluded$3 = ["children", "onChangeSearch", "search", "mode", "setMode", "loading", "idModeEnabled"];
var _CommandPalette = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var children = _ref.children,
onChangeSearch = _ref.onChangeSearch,
search = _ref.search,
mode = _ref.mode,
setMode = _ref.setMode,
loading = _ref.loading,
_ref$idModeEnabled = _ref.idModeEnabled,
idModeEnabled = _ref$idModeEnabled === void 0 ? false : _ref$idModeEnabled,
rest = _objectWithoutProperties(_ref, _excluded$3);
var _useState = React.useState(0),
_useState2 = _slicedToArray(_useState, 2),
selected = _useState2[0],
setSelected = _useState2[1];
var listWrapperRef = React.useRef(null);
var scrollToTop = function scrollToTop() {
var _listWrapperRef$curre;
(_listWrapperRef$curre = listWrapperRef.current) === null || _listWrapperRef$curre === void 0 || _listWrapperRef$curre.scrollTo({
top: 0,
behavior: "smooth"
});
};
var scrollToBottom = function scrollToBottom() {
var _listWrapperRef$curre2;
(_listWrapperRef$curre2 = listWrapperRef.current) === null || _listWrapperRef$curre2 === void 0 || _listWrapperRef$curre2.scrollTo({
top: listWrapperRef.current.scrollHeight,
behavior: "smooth"
});
};
var filterChildren = React.useMemo(function () {
var itemsLength = 0;
var commandsLength = 0;
var items = deepMap(children, function (child) {
var item = child;
var clonedElement;
if (item && item.type === CommandPaletteList) {
clonedElement = /*#__PURE__*/React.cloneElement(item, _objectSpread2({}, item.props));
}
if (item && item.type === CommandPaletteCommandItem) {
clonedElement = /*#__PURE__*/React.cloneElement(item, _objectSpread2(_objectSpread2({}, item.props), {}, {
index: itemsLength,
selected
}));
itemsLength++;
commandsLength++;
}
if (item && item.type === CommandPaletteItem) {
clonedElement = /*#__PURE__*/React.cloneElement(item, _objectSpread2(_objectSpread2({}, item.props), {}, {
index: itemsLength,
selected
}));
itemsLength++;
}
return clonedElement;
});
return {
items,
itemsLength,
commandsLength
};
}, [children, selected]);
var handleChangeSelected = function handleChangeSelected(direction) {
var items = document.querySelectorAll(".cp-item");
var index = 0;
var newIndex = 0;
var newItem = null;
if (direction === "down") {
items.forEach(function (_, i) {
if (i === selected) {
index = i;
}
});
newIndex = index === items.length - 1 ? 0 : index + 1;
} else if (direction === "up") {
items.forEach(function (_, i) {
if (i === selected) {
index = i;
}
});
newIndex = !index ? items.length - 1 : index - 1;
} else {
setSelected(0);
}
newItem = items[newIndex];
if (newItem && typeof newIndex === "number") {
setSelected(newIndex);
newItem.scrollIntoView({
behavior: "smooth",
block: newIndex ? "center" : "end"
});
}
};
return /*#__PURE__*/React__default["default"].createElement(Dialog, _extends({}, rest, {
ref: ref,
animate: "fade"
}), /*#__PURE__*/React__default["default"].createElement(SearchContextProvider, {
value: {
search,
onChangeSearch
}
}, /*#__PURE__*/React__default["default"].createElement(SelectedContextProvider, {
value: {
selected: selected,
setSelected
}
}, /*#__PURE__*/React__default["default"].createElement(StyledCommandPalette, {
onKeyDown: function onKeyDown(e) {
if (e.key === "ArrowDown") {
e.preventDefault();
handleChangeSelected("down");
}
if (e.key === "ArrowUp") {
e.preventDefault();
handleChangeSelected("up");
}
if (e.key === "End") {
e.preventDefault();
scrollToBottom();
setSelected(filterChildren.itemsLength - 1);
}
if (e.key === "Home") {
e.preventDefault();
scrollToTop();
setSelected(0);
}
}
}, /*#__PURE__*/React__default["default"].createElement(ModeContextProvider, {
value: {
mode,
setMode,
idModeEnabled
}
}, /*#__PURE__*/React__default["default"].createElement(CommandPaletteHeader, {
commandsLength: filterChildren.commandsLength,
itemsLength: filterChildren.itemsLength,
loading: loading
})), /*#__PURE__*/React__default["default"].createElement(StyledCommandPaletteWrapper, {
ref: listWrapperRef
}, filterChildren.items)))));
});
_CommandPalette.displayName = "CommandPalette";
// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/34757
var CommandPalette = Object.assign({}, _CommandPalette, {
List: CommandPaletteList,
Item: CommandPaletteItem,
CommandItem: CommandPaletteCommandItem
});
var Container = styled__default["default"].div.withConfig({
displayName: "EmptySlatestyles__Container",
componentId: "sc-jfbqky-0"
})(["display:flex;align-items:center;flex-direction:column;justify-content:center;text-align:center;gap:24px;", "{flex-direction:row;}"], screen.lg);
var SubContainer = styled__default["default"].div.withConfig({
displayName: "EmptySlatestyles__SubContainer",
componentId: "sc-jfbqky-1"
})(["display:flex;align-items:center;flex-direction:column;justify-content:center;max-width:400px;padding-left:20px;padding-right:20px;", "{align-items:flex-start;}"], screen.lg);
var StyledImg = styled__default["default"].img.withConfig({
displayName: "EmptySlatestyles__StyledImg",
componentId: "sc-jfbqky-2"
})(["width:280px;height:280px;"]);
var Title = styled__default["default"](Typography).withConfig({
displayName: "EmptySlatestyles__Title",
componentId: "sc-jfbqky-3"
})(["margin-block-end:8px;text-align:center;", "{text-align:start;}"], screen.lg);
var Description = styled__default["default"](Typography).withConfig({
displayName: "EmptySlatestyles__Description",
componentId: "sc-jfbqky-4"
})(["text-align:center;", "{text-align:start;}"], screen.lg);
var FooterContainer = styled__default["default"].div.withConfig({
displayName: "EmptySlatestyles__FooterContainer",
componentId: "sc-jfbqky-5"
})(["margin-block-start:24px;display:flex;flex-direction:column;gap:12px;align-items:center;", "{flex-direction:row;}"], screen.lg);
var _excluded$2 = ["children"];
// eslint-disable-next-line @typescript-eslint/no-empty-interface
var EmptySlateFooter = function EmptySlateFooter(_ref) {
var children = _ref.children,
rest = _objectWithoutProperties(_ref, _excluded$2);
return /*#__PURE__*/React__default["default"].createElement(FooterContainer, rest, children);
};
EmptySlateFooter.displayName = "EmptySlateFooter";
var _excluded$1 = ["title", "description", "src", "alt", "children"];
var EmptySlate = function EmptySlate(_ref) {
var title = _ref.title,
description = _ref.description,
src = _ref.src,
alt = _ref.alt,
children = _ref.children,
rest = _objectWithoutProperties(_ref, _excluded$1);
return /*#__PURE__*/React__default["default"].createElement(Container, _extends({}, rest, {
role: "status"
}), /*#__PURE__*/React__default["default"].createElement(StyledImg, {
src: src,
alt: alt
}), /*#__PURE__*/React__default["default"].createElement(SubContainer, null, /*#__PURE__*/React__default["default"].createElement(Title, {
weight: "light",
variant: "Title 1"
}, title), description && /*#__PURE__*/React__default["default"].createElement(Description, {
color: "tertiary",
variant: "Body 1"
}, description), children));
};
EmptySlate.Footer = EmptySlateFooter;
EmptySlate.displayName = "EmptySlate";
var StyledToolbar = styled__default["default"].div.withConfig({
displayName: "Toolbarstyles__StyledToolbar",
componentId: "sc-n5xxbc-0"
})(["box-sizing:border-box;background-color:var(--page-paper-main);border-radius:8px;border:1px solid var(--color-theme-300);box-shadow:0px 64px 64px rgba(0,0,0,0.06),0px 32px 32px rgba(0,0,0,0.03),0px 16px 16px rgba(0,0,0,0.02),0px 4px 4px rgba(0,0,0,0.02),0px 2px 2px rgba(0,0,0,0.02);bottom:24px;display:flex;left:50%;padding:12px 16px;position:fixed;transform:translateX(-50%);width:100%;max-width:800px;"]);
function Toolbar(_ref) {
var _ref$open = _ref.open,
open = _ref$open === void 0 ? false : _ref$open;
_ref.renderInPortal;
var children = _ref.children,
className = _ref.className,
style = _ref.style;
// Abstract content with default values.
var TOOLBAR_CONTENT = /*#__PURE__*/React__default["default"].createElement(StyledToolbar, {
className: classNames__default["default"]("c-toolbar", className),
role: "toolbar",
tabIndex: -1,
"aria-orientation": "horizontal",
"aria-modal": "true",
style: style
}, children);
return open ? TOOLBAR_CONTENT : null;
}
Toolbar.displayName = "Toolbar";
var StyledInfoBoxWrapper = styled__default["default"].div.withConfig({
displayName: "Styles__StyledInfoBoxWrapper",
componentId: "sc-amgpyr-0"
})(["gap:4px;width:100%;border-radius:8px;padding-inline:16px;padding-block:12px;", " position:relative;"], function (_ref) {
var $type = _ref.$type,
$color = _ref.$color,
$opacity = _ref.$opacity;
return $type === "ai" ? "\n background: linear-gradient(\n 135deg,\n rgba(77, 162, 237, 0.1),\n rgba(159, 105, 229, 0.1),\n rgba(236, 67, 216, 0.1),\n rgba(230, 10, 10, 0.1)\n );\n border: none;\n\n &::before {\n content: \"\";\n position: absolute;\n inset: 0;\n padding: 1px;\n border-radius: 0.375rem;\n background: linear-gradient(135deg, #4da2ed, #9f69e5, #ec43d8, #f72222);\n -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n -webkit-mask-composite: xor;\n mask-composite: exclude;\n pointer-events: none;\n z-index: 1;\n }\n " : "\n background-color: ".concat($color + $opacity, ";\n border: 1px solid ").concat($color, ";\n ");
});
StyledInfoBoxWrapper.displayName = "StyledInfoBoxWrapper";
var StyledInfoBoxHeader = styled__default["default"].div.withConfig({
displayName: "Styles__StyledInfoBoxHeader",
componentId: "sc-amgpyr-1"
})(["display:flex;width:100%;flex-direction:column;gap:", ";"], function (_ref2) {
var $hasTitle = _ref2.$hasTitle;
return $hasTitle ? "4px" : "none";
});
StyledInfoBoxHeader.displayName = "StyledInfoBoxHeader";
var StyledInfoBoxContainer = styled__default["default"].div.withConfig({
displayName: "Styles__StyledInfoBoxContainer",
componentId: "sc-amgpyr-2"
})(["display:flex;justify-items:space-between;width:100%;gap:8px;"]);
StyledInfoBoxContainer.displayName = "StyledInfoBoxContainer";
var SyledInfoBoxInnerHeader = styled__default["default"].div.withConfig({
displayName: "Styles__SyledInfoBoxInnerHeader",
componentId: "sc-amgpyr-3"
})(["display:flex;"]);
SyledInfoBoxInnerHeader.displayName = "SyledInfoBoxInnerHeader";
var _excluded = ["type", "children", "showIcon", "icon", "title", "action"];
var InfoBox = function InfoBox(_ref) {
var _ref$type = _ref.type,
type = _ref$type === void 0 ? "default" : _ref$type,
children = _ref.children,
showIcon = _ref.showIcon,
icon = _ref.icon,
_ref$title = _ref.title,
title = _ref$title === void 0 ? null : _ref$title,
_ref$action = _ref.action,
action = _ref$action === void 0 ? null : _ref$action,
rest = _objectWithoutProperties(_ref, _excluded);
var statusColors = {
success: colors$1.greenSuccess.color,
warning: colors$1.redAlert.color,
note: colors$1.yellowWarning.color,
default: colors$1.blueSky.color,
neutral: colors$1.gray.color,
ai: aiColors.aiGradient.color
};
// https://davidwalsh.name/hex-opacity
var opacity = "1A";
return /*#__PURE__*/React__default["default"].createElement(StyledInfoBoxWrapper, _extends({
$color: "".concat(statusColors[type]),
$opacity: opacity,
$type: type
}, rest), /*#__PURE__*/React__default["default"].createElement(StyledInfoBoxContainer, null, showIcon && /*#__PURE__*/React__default["default"].createElement("span", null, icon && /*#__PURE__*/React__default["default"].isValidElement(icon) ? ( /*#__PURE__*/React__default["default"].cloneElement(icon, {
fill: statusColors[type],
width: 18
})) : type === "success" ? /*#__PURE__*/React__default["default"].createElement(CheckboxBlankTogglerIcon$1, {
fill: statusColors[type],
width: 18
}) : type === "warning" ? /*#__PURE__*/React__default["default"].createElement(CloseCircleIcon$1, {
fill: statusColors[type],
width: 18
}) : type === "ai" ? /*#__PURE__*/React__default["default"].createElement(InfoIcon$1, {
gradient: statusColors[type],
width: 18
}) : type === "note" || type === "default" ? /*#__PURE__*/React__default["default"].createElement(InfoIcon$1, {
fill: statusColors[type],
width: 18
}) : /*#__PURE__*/React__default["default"].createElement(InfoIcon$1, {
fill: statusColors["neutral"],
width: 18
})), /*#__PURE__*/React__default["default"].createElement(StyledInfoBoxHeader, {
$hasTitle: title ? true : false
}, /*#__PURE__*/React__default["default"].createElement(SyledInfoBoxInnerHeader, null, typeof title === "string" && title ? /*#__PURE__*/React__default["default"].createElement(Body2, {
weight: "bold",
lineHeight: "loose"
}, title) : title, action), children)));
};
var StyledSortWrapper = styled__default["default"].div.withConfig({
displayName: "Styles__StyledSortWrapper",
componentId: "sc-11r5ac9-0"
})(["", ";"], {
"width": "fit-content"
});
StyledSortWrapper.displayName = "StyledSortWrapper";
var StyledValueButton = styled__default["default"](ValueButton).withConfig({
displayName: "Styles__StyledValueButton",
componentId: "sc-11r5ac9-1"
})(["", ";"], {
"display": "none",
"alignItems": "center",
"@media (min-width: 768px)": {
"display": "flex"
}
});
StyledValueButton.displayName = "StyledValueButton";
var StyledIconButton = styled__default["default"](IconButton).withConfig({
displayName: "Styles__StyledIconButton",
componentId: "sc-11r5ac9-2"
})(["", ";"], {
"display": "flex",
"alignItems": "center",
":hover": {
"color": "var(--color-primary)"
},
"@media (min-width: 768px)": {
"display": "none"
}
});
StyledIconButton.displayName = "StyledIconButton";
var StyledSortIcon = styled__default["default"](SortGeneralIcon$1).withConfig({
displayName: "Styles__StyledSortIcon",
componentId: "sc-11r5ac9-3"
})(["", ";"], {
"marginTop": "0px"
});
StyledSortIcon.displayName = "StyledSortIcon";
var StyledSortIconDown = styled__default["default"](ArrowDownLongIcon$1).withConfig({
displayName: "Styles__StyledSortIconDown",
componentId: "sc-11r5ac9-4"
})(["", ";"], {
"flexShrink": "0"
});
StyledSortIconDown.displayName = "StyledSortIconDown";
var StyledSortIconUp = styled__default["default"](ArrowUpLongIcon$1).withConfig({
displayName: "Styles__StyledSortIconUp",
componentId: "sc-11r5ac9-5"
})(["", ";"], {
"flexShrink": "0"
});
StyledSortIconUp.displayName = "StyledSortIconUp";
var StyledList = styled__default["default"](List).withConfig({
displayName: "Styles__StyledList",
componentId: "sc-11r5ac9-6"
})(["", ";"], {
"paddingTop": "0.5rem",
"paddingBottom": "0.5rem"
});
StyledList.displayName = "StyledList";
var StyledListItem = styled__default["default"](ListItem).withConfig({
displayName: "Styles__StyledListItem",
componentId: "sc-11r5ac9-7"
})(["", ";svg{visibility:hidden;}&:hover svg{fill:var(--color-theme-500);visibility:visible;}", ""], {
"justifyContent": "space-between"
}, function (props) {
return props.$active && styled.css(["", ";svg{fill:var(--color-primary);visibility:visible;}&:hover svg{fill:var(--color-primary);visibility:visible;}"], {
"color": "var(--color-primary)"
});
});
StyledListItem.displayName = "StyledListItem";
var StyledListItemName = styled__default["default"].span.withConfig({
displayName: "Styles__StyledListItemName",
componentId: "sc-11r5ac9-8"
})(["", ";"], {
"overflow": "hidden",
"textOverflow": "ellipsis",
"whiteSpace": "nowrap"
});
StyledListItemName.displayName = "StyledListItemName";
var Sort = function Sort(_ref) {
var label = _ref.label,
icon = _ref.icon,
options = _ref.options,
selected = _ref.selected,
onChange = _ref.onChange,
target = _ref.target,
className = _ref.className;
var _useState = React.useState(false),
_useState2 = _slicedToArray(_useState, 2),
open = _useState2[0],
setOpen = _useState2[1];
var handleClose = React.useCallback(function () {
return setOpen(false);
}, []);
var handleOpen = React.useCallback(function () {
return setOpen(true);
}, []);
var handleOnChange = React.useCallback(function (event) {
var nextSortBy = event.currentTarget.dataset.id;
var nextOrder = selected.sortDirection === "desc" ? "asc" : "desc";
if (nextSortBy !== selected.sortBy) {
var _options$find;
nextOrder = ((_options$find = options.find(function (opt) {
return opt.id === nextSortBy;
})) === null || _options$find === void 0 ? void 0 : _options$find.defaultDirection) || "asc";
}
onChange({
sortBy: nextSortBy,
sortDirection: nextOrder
});
}, [onChange, selected, options]);
var labelText = React.useMemo(function () {
var _options$find$name, _options$find2;
return (_options$find$name = (_options$find2 = options.find(function (opt) {
return opt.id === selected.sortBy;
})) === null || _options$find2 === void 0 ? void 0 : _options$find2.name) !== null && _options$find$name !== void 0 ? _options$find$name : "";
}, [selected.sortBy, options]);
if (!labelText) {
console.warn("Cannot find selected id in options.");
}
return /*#__PURE__*/React__default["default"].createElement(Menu, {
onOpen: handleOpen,
onClose: handleClose,
position: "bottom-end",
target: target || /*#__PURE__*/React__default["default"].createElement(StyledSortWrapper, {
className: className
}, /*#__PURE__*/React__default["default"].createElement(StyledValueButton, {
active: open,
value: labelText,
label: label,
"data-testid": "sort-button"
}), /*#__PURE__*/React__default["default"].createElement(StyledIconButton, {
active: open,
variant: "text gray",
"data-testid": "sort-icon-button"
}, icon || /*#__PURE__*/React__default["default"].createElement(StyledSortIcon, null)))
}, /*#__PURE__*/React__default["default"].createElement(StyledList, null, options.map(function (_ref2) {
var id = _ref2.id,
name = _ref2.name,
defaultDirection = _ref2.defaultDirection;
var showDownArrow = selected.sortDirection === "asc";
if (selected.sortBy !== id) {
showDownArrow = defaultDirection === "asc";
}
return /*#__PURE__*/React__default["default"].createElement(StyledListItem, {
key: id,
onClick: handleOnChange,
"data-id": id,
"data-testid": id,
$active: id === selected.sortBy
}, /*#__PURE__*/React__default["default"].createElement(StyledListItemName, null, name), showDownArrow ? /*#__PURE__*/React__default["default"].createElement(StyledSortIconDown, null) : /*#__PURE__*/React__default["default"].createElement(StyledSortIconUp, null));
})));
};
exports.AccessLogIcon = AccessLogIcon$1;
exports.Accordion = Accordion;
exports.AccordionContext = AccordionContext;
exports.AccordionItem = AccordionItem;
exports.AccordionItemBody = AccordionItemBody;
exports.AccordionItemHead = AccordionItemHead;
exports.ActivityIcon = ActivityIcon$1;
exports.AddCrossIcon = AddCrossIcon$1;
exports.AddCrossTinyIcon = AddCrossTinyIcon$1;
exports.AddToListButton = AddToListButton;
exports.ApplauseIcon = ApplauseIcon$1;
exports.ArchiveIcon = ArchiveIcon$1;
exports.ArrowBackMobileIcon = ArrowBackMobileIcon$1;
exports.ArrowCollapseMultipleIcon = ArrowCollapseMultipleIcon$1;
exports.ArrowDownIcon = ArrowDownIcon$1;
exports.ArrowDownLongIcon = ArrowDownLongIcon$1;
exports.ArrowDownSmallIcon = ArrowDownSmallIcon$1;
exports.ArrowExpandeMultipleIcon = ArrowExpandeMultipleIcon$1;
exports.ArrowLeftBoxIcon = ArrowLeftBoxIcon$1;
exports.ArrowLeftIcon = ArrowLeftIcon$1;
exports.ArrowRefreshIcon = ArrowRefreshIcon$1;
exports.ArrowRestoreIcon = ArrowRestoreIcon$1;
exports.ArrowRightIcon = ArrowRightIcon$1;
exports.ArrowUpIcon = ArrowUpIcon$1;
exports.ArrowUpLongIcon = ArrowUpLongIcon$1;
exports.AssignIcon = AssignIcon$1;
exports.AttachmentIcon = AttachmentIcon$1;
exports.AutoResizeTextarea = AutoResizeTextarea;
exports.Autocomplete = Autocomplete;
exports.Avatar = Avatar;
exports.AvatarGroup = AvatarGroup;
exports.BackLink = BackLink;
exports.Badge = Badge;
exports.BellOffIcon = BellOffIcon$1;
exports.BellOffSmallIcon = BellOffSmallIcon$1;
exports.BillingIcon = BillingIcon$1;
exports.Body1 = Body1;
exports.Body2 = Body2;
exports.Breadcrumbs = Breadcrumbs;
exports.Bubble = Bubble;
exports.BudgetAlertIcon = BudgetAlertIcon$1;
exports.Button = Button;
exports.ButtonGroup = ButtonGroup;
exports.CalendarAddXIcon = CalendarAddXIcon$1;
exports.CalendarIcon = CalendarIcon$1;
exports.CalendarImportIcon = CalendarImportIcon$1;
exports.CancelCrossIcon = CancelCrossIcon$1;
exports.Caption1 = Caption1;
exports.Caption2 = Caption2;
exports.Card = Card;
exports.CaretLeftIcon = CaretLeftIcon$1;
exports.CaretRightIcon = CaretRightIcon$1;
exports.ChatIcon = ChatIcon$1;
exports.CheckIcon = CheckIcon$1;
exports.Checkbox = Checkbox;
exports.CheckboxBlankTogglerIcon = CheckboxBlankTogglerIcon$1;
exports.CheckboxCircleArrowIcon = CheckboxCircleArrowIcon$1;
exports.CheckboxDocumentsIcon = CheckboxDocumentsIcon$1;
exports.CheckboxIcon = CheckboxIcon$3;
exports.ChecklistIcon = ChecklistIcon$1;
exports.ChecklistSmallIcon = ChecklistSmallIcon$1;
exports.Chip = Chip;
exports.Choose = Choose;
exports.ChooseV2 = ChooseV2;
exports.CircleMultipleIcon = CircleMultipleIcon$1;
exports.ClockAddIcon = ClockAddIcon$1;
exports.ClockDollarIcon = ClockDollarIcon$1;
exports.ClockIcon = ClockIcon$1;
exports.ClockSmallIcon = ClockSmallIcon$1;
exports.ClockStopwatchIcon = ClockStopwatchIcon$1;
exports.ClockStopwatchIndicatorIcon = ClockStopwatchIndicatorIcon$1;
exports.ClockStopwatchSmallIcon = ClockStopwatchSmallIcon$1;
exports.CloseCircleIcon = CloseCircleIcon$1;
exports.CloseDocumentIcon = CloseDocumentIcon$1;
exports.CloseIcon = CloseIcon$1;
exports.CloseSmallIcon = CloseSmallIcon$1;
exports.CollapsIcon = CollapsIcon$1;
exports.CollapseAllIcon = CollapseAllIcon$1;
exports.CollapseExpandSingleIcon = CollapseExpandSingleIcon$1;
exports.ComboBox = ComboBox;
exports.CommandPalette = CommandPalette;
exports.CompanyAddIcon = CompanyAddIcon$1;
exports.CompanyIcon = CompanyIcon$1;
exports.CompleteCheckbox = CompleteCheckbox;
exports.ComputerIcon = ComputerIcon$1;
exports.ConfirmDialog = ConfirmDialog;
exports.CopyIcon = CopyIcon$1;
exports.CounterButton = CounterButton;
exports.CrownBlankIcon = CrownBlankIcon$1;
exports.CrownSelectedIcon = CrownSelectedIcon$1;
exports.DataTable = DataTable;
exports.DatePicker = DatePicker;
exports.DateStepper = DateStepper;
exports.DependencyIcon = DependencyIcon$1;
exports.DependencySmallIcon = DependencySmallIcon$1;
exports.DescriptionIcon = DescriptionIcon$1;
exports.DescriptionSmallIcon = DescriptionSmallIcon$1;
exports.Dialog = Dialog;
exports.DiscussionAddIcon = DiscussionAddIcon$1;
exports.DiscussionIcon = DiscussionIcon$1;
exports.DisplayCurrency = DisplayCurrency;
exports.DisplayHours = DisplayHours;
exports.DisplayNumber = DisplayNumber;
exports.DollarCheckmarkIcon = DollarCheckmarkIcon$1;
exports.DollarCheckmarkSmallIcon = DollarCheckmarkSmallIcon$1;
exports.DollarClockIcon = DollarClockIcon$1;
exports.DollarClockSmallIcon = DollarClockSmallIcon$1;
exports.DollarDocumentIcon = DollarDocumentIcon$1;
exports.DollarDocumentPlusIcon = DollarDocumentPlusIcon$1;
exports.DollarIcon = DollarIcon$1;
exports.DollarOffIcon = DollarOffIcon$1;
exports.DollarOffSmallIcon = DollarOffSmallIcon$1;
exports.DollarSmallIcon = DollarSmallIcon$1;
exports.Dot = Dot;
exports.DotsLoader = DotsLoader;
exports.DownloadIcon = DownloadIcon$1;
exports.DriveIcon = DriveIcon$1;
exports.DropboxIcon = DropboxIcon$1;
exports.DuplicateIcon = DuplicateIcon$1;
exports.EditIcon = EditIcon$1;
exports.EditMultipleIcon = EditMultipleIcon$1;
exports.EditableContent = EditableContent;
exports.EditableCurrency = EditableCurrency;
exports.EditableHours = EditableHours;
exports.EditableText = EditableText;
exports.EmojiIcon = EmojiIcon$1;
exports.EmptySlate = EmptySlate;
exports.EntitiesHeader = EntitiesHeader;
exports.Entity = Entity;
exports.EntityCard = EntityCard$1;
exports.EstimatePlusIcon = EstimatePlusIcon$1;
exports.EstimatesIcon = EstimatesIcon$1;
exports.ExpandAll = ExpandAll;
exports.ExpandAllIcon = ExpandAllIcon$1;
exports.ExpandSingle = ExpandSingle;
exports.ExpenseAddIcon = ExpenseAddIcon$1;
exports.ExpensePlusIcon = ExpensePlusIcon$1;
exports.EyeIcon = EyeIcon$1;
exports.EyeOffIcon = EyeOffIcon$1;
exports.EyeOffSmallIcon = EyeOffSmallIcon$1;
exports.EyeSmallIcon = EyeSmallIcon$1;
exports.Fade = Fade;
exports.Filter = Filter;
exports.FilterIcon = FilterIcon$1;
exports.FolderIcon = FolderIcon$1;
exports.FolderMoveIcon = FolderMoveIcon$1;
exports.FolderOutlineIcon = FolderOutlineIcon$1;
exports.FromElement = FromElement;
exports.GiftIcon = GiftIcon$1;
exports.GlobalAddButton = GlobalAddButton;
exports.GlobalStyle = GlobalStyle;
exports.GroupByIcon = GroupByIcon$1;
exports.HashtagIcon = HashtagIcon$1;
exports.Header = Header;
exports.Header2 = Header2;
exports.Header3 = Header3;
exports.HeartIcon = HeartIcon$1;
exports.HelpIcon = HelpIcon$1;
exports.HistoryOfChangesIcon = HistoryOfChangesIcon$1;
exports.IconButton = IconButton;
exports.ImageIcon = ImageIcon$1;
exports.InfoBox = InfoBox;
exports.InfoIcon = InfoIcon$1;
exports.InfoSmallIcon = InfoSmallIcon$1;
exports.Input = Input;
exports.InputAdornment = InputAdornment;
exports.InputCurrency = InputCurrency;
exports.InputHours = InputHours;
exports.InputNumber = InputNumber;
exports.InputPassword = InputPassword;
exports.InputPhone = InputPhone;
exports.InputTime = InputTime;
exports.InputUrl = InputUrl;
exports.InsertLinkIcon = InsertLinkIcon$1;
exports.IntegrationsIcon = IntegrationsIcon$1;
exports.InvoicesIcon = InvoicesIcon$1;
exports.Item = Item;
exports.ItemContext = ItemContext;
exports.Label = Label;
exports.LabelsIcon = LabelsIcon$1;
exports.LayerContext = LayerContext$1;
exports.LayerContextConsumer = LayerContextConsumer;
exports.LayerContextProvider = LayerContextProvider;
exports.LetterArrowRightIcon = LetterArrowRightIcon$1;
exports.LetterFastIcon = LetterFastIcon$1;
exports.LetterIcon = LetterIcon$1;
exports.LinearLoader = LinearLoader;
exports.Link = Link;
exports.List = List;
exports.ListItem = ListItem;
exports.ListSeparator = ListSeparator;
exports.LockIcon = LockIcon$1;
exports.LockSmallIcon = LockSmallIcon$1;
exports.MarkerIcon = MarkerIcon$1;
exports.Menu = Menu;
exports.MenuFooter = MenuFooter;
exports.MenuHeader = MenuHeader;
exports.MenuSelector = MenuSelector;
exports.MessageAddIcon = MessageAddIcon$1;
exports.MessageEmptyIcon = MessageEmptyIcon$1;
exports.MessageIcon = MessageIcon$1;
exports.MessageSmallIcon = MessageSmallIcon$1;
exports.MessageSolidIcon = MessageSolidIcon$1;
exports.MinusIcon = MinusIcon$1;
exports.MobileMenuIcon = MobileMenuIcon$1;
exports.Modal = Modal;
exports.MoonIcon = MoonIcon$1;
exports.MoveIcon = MoveIcon$1;
exports.MoveTriggerIcon = MoveTriggerIcon$1;
exports.MultiAvatar = MultiAvatar;
exports.MyWorkIcon = MyWorkIcon$1;
exports.Nav = Nav;
exports.NoteAddIcon = NoteAddIcon$1;
exports.NoteIcon = NoteIcon$1;
exports.NotebookIcon = NotebookIcon$1;
exports.NotificationBellIcon = NotificationBellIcon$1;
exports.OpenExpandedIcon = OpenExpandedIcon$1;
exports.OpenSheetIcon = OpenSheetIcon$1;
exports.Option = Option;
exports.OptionGroup = OptionGroup;
exports.OrderFirstIcon = OrderFirstIcon$1;
exports.Overlay = Overlay;
exports.PaidSmallIcon = PaidSmallIcon$1;
exports.Paper = Paper;
exports.PartyIcon = PartyIcon$1;
exports.PauseCircleOutlineIcon = PauseCircleOutlineIcon$1;
exports.PauseIcon = PauseIcon$1;
exports.PauseSmallIcon = PauseSmallIcon$1;
exports.PencilIcon = PencilIcon$1;
exports.PencilSmallIcon = PencilSmallIcon$1;
exports.PendingPaymentSmallIcon = PendingPaymentSmallIcon$1;
exports.PeopleIcon = PeopleIcon$1;
exports.PersonArrowOutCircleIcon = PersonArrowOutCircleIcon$1;
exports.PersonCircleIcon = PersonCircleIcon$1;
exports.PersonCircleOffIcon = PersonCircleOffIcon$1;
exports.PersonIcon = PersonIcon$1;
exports.PersonListIcon = PersonListIcon$1;
exports.PersonPlusIcon = PersonPlusIcon$1;
exports.PinIcon = PinIcon$1;
exports.PlayCircleOutlineIcon = PlayCircleOutlineIcon$1;
exports.PlayIcon = PlayIcon$1;
exports.PlaySmallIcon = PlaySmallIcon$1;
exports.Popper = Popper;
exports.Portal = Portal;
exports.PriorityLowIcon = PriorityLowIcon$1;
exports.ProgressBar = ProgressBar;
exports.ProgressCircle = ProgressCircle;
exports.ProgressPie = ProgressPie;
exports.ProgressRing = ProgressRing;
exports.ProjectAddIcon = ProjectAddIcon$1;
exports.ProjectSearchIcon = ProjectSearchIcon$1;
exports.ProjectStarIcon = ProjectStarIcon$1;
exports.ProjectTemplateAddIcon = ProjectTemplateAddIcon$1;
exports.ProjectTemplateConvertIcon = ProjectTemplateConvertIcon$1;
exports.ProjectTemplateIcon = ProjectTemplateIcon$1;
exports.ProjectsIcon = ProjectsIcon$1;
exports.RadioBlankIcon = RadioBlankIcon$1;
exports.RadioButton = RadioButton;
exports.RadioButtonIcon = RadioButtonIcon$1;
exports.RearangeIcon = RearangeIcon$1;
exports.RearrangeSmallIcon = RearrangeSmallIcon$1;
exports.RecurringCheckmarkIcon = RecurringCheckmarkIcon$1;
exports.RecurringCheckmarkSmallIcon = RecurringCheckmarkSmallIcon$1;
exports.RecurringDollarIcon = RecurringDollarIcon$1;
exports.RecurringSmallIcon = RecurringSmallIcon$1;
exports.ReportTimeIcon = ReportTimeIcon$1;
exports.ReportsIcon = ReportsIcon$1;
exports.ResizeTransition = ResizeTransition;
exports.Reveal = Reveal;
exports.RocketIcon = RocketIcon$1;
exports.RocketSmallIcon = RocketSmallIcon$1;
exports.SaveIcon = SaveIcon$1;
exports.Scale = Scale;
exports.ScaleBar = ScaleBar;
exports.ScrollElement = ScrollElement;
exports.ScrollShadow = ScrollShadow;
exports.SearchIcon = SearchIcon$1;
exports.SearchLargeIcon = SearchLargeIcon$1;
exports.Select = Select;
exports.SelectDate = SelectDate;
exports.SelectTime = SelectTime;
exports.SelectTrigger = SelectTrigger;
exports.SendBlankIcon = SendBlankIcon$1;
exports.SendFilledIcon = SendFilledIcon$1;
exports.SettingsIcon = SettingsIcon$1;
exports.Sheet = Sheet;
exports.ShieldIcon = ShieldIcon$1;
exports.Signifier = Signifier;
exports.SkeletonLoader = SkeletonLoader;
exports.Slide = Slide;
exports.SlideFromTop = SlideFromTop;
exports.SlideLeftRightTransition = SlideLeftRightTransition;
exports.SmileIcon = SmileIcon$1;
exports.Sort = Sort;
exports.SortDirection = SortDirection;
exports.SortGeneralIcon = SortGeneralIcon$1;
exports.SortIcon = SortIcon$1;
exports.SortListIcon = SortListIcon$1;
exports.SortSmallIcon = SortSmallIcon$1;
exports.SparkIcon = SparkIcon$1;
exports.SpinnerLoader = SpinnerLoader;
exports.StarIcon = StarIcon$1;
exports.StarOutlineIcon = StarOutlineIcon$1;
exports.StatusIcon = StatusIcon$1;
exports.Step = Step;
exports.StepActionButton = StepActionButton;
exports.Steps = Steps;
exports.StopwatchIcon = StopwatchIcon$1;
exports.StyledInputTimeWrapper = StyledInputTimeWrapper;
exports.SunIcon = SunIcon$1;
exports.SystemSettingsIcon = SystemSettingsIcon$1;
exports.Table = Table;
exports.Tag = Tag;
exports.TaskAddIcon = TaskAddIcon$1;
exports.TaskListAddIcon = TaskListAddIcon$1;
exports.TaskListCompleteIcon = TaskListCompleteIcon$1;
exports.TaskListIcon = TaskListIcon$1;
exports.Tbody = Tbody;
exports.Textarea = Textarea;
exports.Thead = Thead;
exports.ThinkingIcon = ThinkingIcon$1;
exports.ThumbUpOutlineIcon = ThumbUpOutlineIcon$1;
exports.ThumbsDownIcon = ThumbsDownIcon$1;
exports.ThumbsUpIcon = ThumbsUpIcon$1;
exports.Title1 = Title1;
exports.Title2 = Title2;
exports.ToastMessage = ToastMessage;
exports.Toggle = Toggle;
exports.Toolbar = Toolbar;
exports.Tooltip = Tooltip;
exports.TrashIcon = TrashIcon$1;
exports.TreeDotsIcon = TreeDotsIcon$1;
exports.Trigger = Trigger;
exports.UploadIcon = UploadIcon$1;
exports.ValueButton = ValueButton;
exports.ViewDayIcon = ViewDayIcon$1;
exports.ViewGridIcon = ViewGridIcon$1;
exports.ViewListIcon = ViewListIcon$1;
exports.ViewTimelineIcon = ViewTimelineIcon$1;
exports.VolumeHighIcon = VolumeHighIcon$1;
exports.WarningIcon = WarningIcon$1;
exports.WarningTriangleIcon = WarningTriangleIcon$1;
exports.WarningTriangleSmallIcon = WarningTriangleSmallIcon$1;
exports.Window = Window;
exports.Wizard = Wizard;
exports.WorkloadIcon = WorkloadIcon$1;
exports._CommandPalette = _CommandPalette;
exports._Dialog = _Dialog;
exports._List = _List;
exports.aiColors = aiColors;
exports.colors = colors$1;
exports.formatCurrency = formatCurrency;
exports.formatHours = formatHours;
exports.formatNumber = formatNumber;
exports.getNumberFromString = getNumberFromString;
exports.isOptionGroup = isOptionGroup;
exports.isValidUrl = isValidUrl;
exports.layers = layers;
exports.numberWithSeparator = numberWithSeparator;
exports.signifierTypes = signifierTypes;
exports.toMoment = toMoment;
exports.useEntityGroupContext = useEntityGroupContext;
exports.useForkRef = useForkRef;
exports.useHeight = useHeight;
exports.useInitScrollRef = useInitScrollRef;
exports.useInputNumber = useInputNumber;
exports.useLayerContext = useLayerContext;
exports.useMenuContext = useMenuContext;
exports.useResizeObserver = useResizeObserver$1;
exports.useWizardContext = useWizardContext;
exports.validateNumberInput = validateNumberInput;
exports.validateStopwatchTime = validateStopwatchTime;
exports.validateTimeInput = validateTimeInput;
Object.defineProperty(exports, '__esModule', { value: true });
}));
//# sourceMappingURL=index.js.map