@activecollab/components
Version:
ActiveCollab Components
30,638 lines • 1.36 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 _arrayLikeToArray(r, a) {
(null == a || a > r.length) && (a = r.length);
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
return n;
}
function _arrayWithHoles(r) {
if (Array.isArray(r)) return r;
}
function _defineProperty(e, r, t) {
return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
value: t,
enumerable: !0,
configurable: !0,
writable: !0
}) : e[r] = t, e;
}
function _extends() {
return _extends = Object.assign ? Object.assign.bind() : function (n) {
for (var e = 1; e < arguments.length; e++) {
var t = arguments[e];
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
}
return n;
}, _extends.apply(null, arguments);
}
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 _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.");
}
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 _objectWithoutProperties(e, t) {
if (null == e) return {};
var o,
r,
i = _objectWithoutPropertiesLoose(e, t);
if (Object.getOwnPropertySymbols) {
var n = Object.getOwnPropertySymbols(e);
for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
}
return i;
}
function _objectWithoutPropertiesLoose(r, e) {
if (null == r) return {};
var t = {};
for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
if (-1 !== e.indexOf(n)) continue;
t[n] = r[n];
}
return t;
}
function _slicedToArray(r, e) {
return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
}
function _taggedTemplateLiteral(e, t) {
return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, {
raw: {
value: Object.freeze(t)
}
}));
}
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 : i + "";
}
function _unsupportedIterableToArray(r, a) {
if (r) {
if ("string" == typeof r) return _arrayLikeToArray(r, a);
var t = {}.toString.call(r).slice(8, -1);
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
}
}
var BoxSizingStyle = styled.css(["box-sizing:border-box;*{box-sizing:border-box;}"]);
var FontStyle = styled.css(["font-family:-apple-system,BlinkMacSystemFont,\"Inter\",\"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$5S = ["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$5S);
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$5R = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$5R);
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": "AddCrossTinyIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M12 4a1 1 0 0 1 1 1v6h6a1 1 0 0 1 0 2h-6v6a1 1 0 0 1-2 0l-.001-6H5a1 1 0 0 1 0-2h6V5a1 1 0 0 1 1-1"
}));
});
AddCrossTinyIcon.displayName = "AddCrossTinyIcon";
var AddCrossTinyIcon$1 = AddCrossTinyIcon;
var _excluded$5Q = ["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$5Q);
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$5P = ["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$5P);
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$2 = styled__default["default"].ul.withConfig({
displayName: "Styles__StyledList",
componentId: "sc-dv1w0m-0"
})(["list-style-type:none;margin:0;padding:0;"]);
StyledList$2.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$5O = ["children", "className"];
var ListItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var children = _ref.children,
className = _ref.className,
props = _objectWithoutProperties(_ref, _excluded$5O);
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$5N = ["className"];
var ListSeparator = function ListSeparator(_ref) {
var className = _ref.className,
props = _objectWithoutProperties(_ref, _excluded$5N);
return /*#__PURE__*/React__default["default"].createElement(StyledListSeparator$1, _extends({
className: classNames__default["default"]("c-list-separator", className)
}, props));
};
ListSeparator.displayName = "ListSeparator";
var _excluded$5M = ["children", "className"];
var _List = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var children = _ref.children,
className = _ref.className,
props = _objectWithoutProperties(_ref, _excluded$5M);
return /*#__PURE__*/React__default["default"].createElement(StyledList$2, _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))"
}
};
// Single source of truth for theme identity. The theme name is the only class put on <html>;
// styling that targets "any dark theme" uses DARK_THEME_SELECTOR, which is derived from this list
// so a new theme never needs the selector updating by hand.
var THEMES = [{
name: "indigo",
title: "Indigo",
dark: false,
swatch: ["#5d2bff", "#5d2bff", "#f4f5f7"]
}, {
name: "cupcake",
title: "Cupcake",
dark: false,
swatch: ["#fe6fa7", "#29bcdd", "#f4f5f7"]
}, {
name: "classic",
title: "Classic",
dark: false,
swatch: ["#4182f2", "#4182f2", "#f4f5f7"]
}, {
name: "neon",
title: "Neon",
dark: true,
swatch: ["#67ffc8", "#67ffc8", "#24262e"]
}, {
name: "dracula",
title: "Dracula",
dark: true,
swatch: ["#ff79c6", "#bd93f9", "#20222c"]
}, {
name: "one-dark",
title: "One Dark",
dark: true,
swatch: ["#c678dd", "#61afef", "#20232a"]
}];
var THEME_NAMES = THEMES.map(function (theme) {
return theme.name;
});
var DARK_THEME_NAMES = THEMES.filter(function (theme) {
return theme.dark;
}).map(function (theme) {
return theme.name;
});
var LIGHT_THEME_NAMES = THEMES.filter(function (theme) {
return !theme.dark;
}).map(function (theme) {
return theme.name;
});
var DEFAULT_THEME = "indigo";
var DEFAULT_DARK_THEME = "neon";
var THEME_MODE_SINGLE = "single";
var THEME_MODE_SYSTEM = "system";
var isDarkTheme = function isDarkTheme(name) {
return Boolean(name) && DARK_THEME_NAMES.includes(name);
};
var knownTheme = function knownTheme(name, fallback) {
return name && THEME_NAMES.includes(name) ? name : fallback;
};
// Resolution is derived per render, never persisted — writing it back would destroy the user's pick.
var resolveTheme = function resolveTheme(_ref, prefersDark) {
var mode = _ref.mode,
theme = _ref.theme,
themeLight = _ref.themeLight,
themeDark = _ref.themeDark;
if (mode !== THEME_MODE_SYSTEM) {
return knownTheme(theme, DEFAULT_THEME);
}
return prefersDark ? knownTheme(themeDark, DEFAULT_DARK_THEME) : knownTheme(themeLight, DEFAULT_THEME);
};
// :is() and not :where() — :where() is zero-specificity and would silently lose to the light
// declarations it is meant to override.
// Compound onto an element that carries the theme class itself: `html${DARK_THEME_MATCH}`.
var DARK_THEME_MATCH = ":is(".concat(DARK_THEME_NAMES.map(function (name) {
return ".".concat(name);
}).join(", "), ")");
// Stand-alone ancestor selector: `${DARK_THEME_SELECTOR} &`. The leading `*` adds no specificity
// but stops stylis from reading a leading `:` as "attach to the parent" and gluing it onto `&`.
var DARK_THEME_SELECTOR = "*".concat(DARK_THEME_MATCH);
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 ? trimDecimals ? fixedDecimalSpaces(absoluteNumber, decimalSpaces) : absoluteNumber : trimDecimals ? parseFloat(absoluteNumber.toFixed(1)) : absoluteNumber;
if (scale > 0 && scale < 4) {
var checkValue = trimDecimals ? formattedNum : parseFloat(formattedNum.toFixed(decimalSpaces));
if (checkValue >= 1000) {
formattedNum = checkValue / 1000;
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$5L = ["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$5L);
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$5K = ["gradient"];
/**
* @component RecurringIcon
* @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 (
* <RecurringIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <RecurringIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var RecurringIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$5K);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
xmlns: "http://www.w3.org/2000/svg",
width: 18,
height: 18,
viewBox: "0 0 18 18",
"data-testid": "RecurringIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "m15.364 2.636.225.233.214.238a8.86 8.86 0 0 1 2.04 4.216l.043.25q.107.662.114 1.332h-.007l.001.095h-2.008a6.95 6.95 0 0 0-1.43-4.26l-.095-.12a7 7 0 0 0-10.238-.738l-.173.168 1.414 1.414-4.872.63.63-4.872 1.414 1.414A8.98 8.98 0 0 1 9.361.007c2.1.084 4.175.898 5.813 2.444zM2.636 15.364a8.9 8.9 0 0 1-2.498-4.789A9 9 0 0 1 0 9.01h.006V9h2.008a6.94 6.94 0 0 0 1.826 4.73l.21.22a7 7 0 0 0 9.727.167l.173-.167-1.414-1.414 4.871-.63-.629 4.872-1.414-1.414a9 9 0 0 1-12.728 0",
clipRule: "evenodd"
}));
});
RecurringIcon.displayName = "RecurringIcon";
var RecurringIcon$1 = RecurringIcon;
var _excluded$5J = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$5J);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
xmlns: "http://www.w3.org/2000/svg",
width: 24,
height: 24,
"data-testid": "AccessLogIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M8.127 13.646a.5.5 0 0 1 .146.354v3H9.37a.5.5 0 0 1 0 1H7.773a.5.5 0 0 1-.5-.5V14a.5.5 0 0 1 .854-.354"
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M10.42 13.646a.5.5 0 0 1 .353-.146h2a.5.5 0 0 1 .5.5v3.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5V14a.5.5 0 0 1 .146-.354Zm.853.854V17h1v-2.5z",
clipRule: "evenodd"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M14.5 13.5a.5.5 0 0 0-.5.5v3.5a.5.5 0 0 0 .5.5h2a.5.5 0 0 0 .5-.5V16a.5.5 0 0 0-.5-.5H16a.5.5 0 0 0 0 1v.5h-1v-2.5h1.5a.5.5 0 0 0 0-1z"
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M5 2h11.03L21 7.075V20a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2m10.19 2H5v16h14V7.891z",
clipRule: "evenodd"
}));
});
AccessLogIcon.displayName = "AccessLogIcon";
var AccessLogIcon$1 = AccessLogIcon;
var _excluded$5I = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$5I);
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": "ActivityIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M6 4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0-2h12a4 4 0 0 1 4 4v12a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V6a4 4 0 0 1 4-4m2.962 10.317a1 1 0 0 1-.949.684H5.76a1 1 0 0 1 0-2h1.532l1.772-5.317c.304-.912 1.594-.912 1.898 0l3.051 9.154 1.051-3.154a1 1 0 0 1 .95-.684H18a1 1 0 0 1 0 2h-1.266l-1.772 5.316c-.304.912-1.594.912-1.898 0l-3.05-9.153z"
}), /*#__PURE__*/React__default["default"].createElement("path", {
stroke: "#F4F5F7",
strokeWidth: 0.1,
d: "M.05.05h23.9v23.9H.05z",
opacity: 0.01
}));
});
ActivityIcon.displayName = "ActivityIcon";
var ActivityIcon$1 = ActivityIcon;
var _excluded$5H = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$5H);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
xmlns: "http://www.w3.org/2000/svg",
width: 10,
height: 10,
viewBox: "0 0 10 10",
"data-testid": "AddCrossIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "nonzero",
d: "M6 0v4h4v2H6v4H4V6H0V4h4V0z"
}));
});
AddCrossIcon.displayName = "AddCrossIcon";
var AddCrossIcon$1 = AddCrossIcon;
var _excluded$5G = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$5G);
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": "ArchiveIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2v9a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-9a2 2 0 0 1-2-2zm4 5h10v9H7zm12-2H5V5h14zm-4 4H9v2h6z",
clipRule: "evenodd"
}));
});
ArchiveIcon.displayName = "ArchiveIcon";
var ArchiveIcon$1 = ArchiveIcon;
var _excluded$5F = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$5F);
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": "ArrowBackMobileIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M14.293 4.222a1 1 0 0 1 1.492 1.327l-.078.087L9.343 12l6.364 6.364a1 1 0 0 1 .078 1.327l-.078.087a1 1 0 0 1-1.327.078l-.087-.078-7.071-7.07a1 1 0 0 1-.078-1.328l.078-.087z",
clipRule: "evenodd"
}));
});
ArrowBackMobileIcon.displayName = "ArrowBackMobileIcon";
var ArrowBackMobileIcon$1 = ArrowBackMobileIcon;
var _excluded$5E = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$5E);
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": "ArrowCollapseMultipleIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "m12 15 4.72 4.461a.867.867 0 0 1 0 1.275.995.995 0 0 1-1.25.08l-.098-.08L12 17.549l-3.372 3.187a.993.993 0 0 1-1.349 0 .865.865 0 0 1-.079-1.19l.08-.085zm4.72-11.736a.867.867 0 0 1 0 1.275L12 9 7.28 4.539a.867.867 0 0 1 0-1.275.993.993 0 0 1 1.348 0L12 6.451l3.372-3.187a.993.993 0 0 1 1.349 0M6 11h12a1 1 0 0 1 0 2H6a1 1 0 0 1 0-2"
}));
});
ArrowCollapseMultipleIcon.displayName = "ArrowCollapseMultipleIcon";
var ArrowCollapseMultipleIcon$1 = ArrowCollapseMultipleIcon;
var _excluded$5D = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$5D);
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": "ArrowDownLongIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M13 5v9h4l-5 5-5-5h4V5z"
}));
});
ArrowDownLongIcon.displayName = "ArrowDownLongIcon";
var ArrowDownLongIcon$1 = ArrowDownLongIcon;
var _excluded$5C = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$5C);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
xmlns: "http://www.w3.org/2000/svg",
width: 16,
height: 16,
"data-testid": "ArrowDownSmallIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M10.248 6.843a.66.66 0 0 1 .9 0 .58.58 0 0 1 0 .85L8 10.666 4.853 7.692a.58.58 0 0 1 0-.85.66.66 0 0 1 .9 0L8 8.968z",
clipRule: "evenodd"
}));
});
ArrowDownSmallIcon.displayName = "ArrowDownSmallIcon";
var ArrowDownSmallIcon$1 = ArrowDownSmallIcon;
var _excluded$5B = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$5B);
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: ref
}, 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 0 1 1.349 0 .867.867 0 0 1 0 1.275L12 16l-4.72-4.461a.867.867 0 0 1 0-1.275.993.993 0 0 1 1.348 0L12 13.451z"
}));
});
ArrowDownIcon.displayName = "ArrowDownIcon";
var ArrowDownIcon$1 = ArrowDownIcon;
var _excluded$5A = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$5A);
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": "ArrowExpandeMultipleIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M16.72 15.264a.867.867 0 0 1 0 1.275L12 21l-4.72-4.461a.867.867 0 0 1 0-1.275.993.993 0 0 1 1.348 0L12 18.451l3.372-3.187a.993.993 0 0 1 1.349 0M18 11a1 1 0 0 1 0 2H6a1 1 0 0 1 0-2zm-6-8 4.72 4.461a.867.867 0 0 1 0 1.275.995.995 0 0 1-1.25.08l-.098-.08L12 5.549 8.628 8.736a.993.993 0 0 1-1.349 0 .865.865 0 0 1-.079-1.19l.08-.085z"
}));
});
ArrowExpandeMultipleIcon.displayName = "ArrowExpandeMultipleIcon";
var ArrowExpandeMultipleIcon$1 = ArrowExpandeMultipleIcon;
var _excluded$5z = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$5z);
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": "ArrowLeftBoxIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M8.92 15.59 6.33 13H16v-2H6.33l2.59-2.59L7.5 7l-5 5 5 5zM8 3v2h11v14H8v2h11a2 2 0 0 0 2-2V5c0-1.11-.89-2-2-2z"
}));
});
ArrowLeftBoxIcon.displayName = "ArrowLeftBoxIcon";
var ArrowLeftBoxIcon$1 = ArrowLeftBoxIcon;
var _excluded$5y = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$5y);
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": "ArrowLeftIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "m13.45 6.337-5.657 5.657 5.657 5.657a1 1 0 1 0 1.414-1.414l-4.241-4.243 4.241-4.243a1 1 0 0 0-1.414-1.414"
}));
});
ArrowLeftIcon.displayName = "ArrowLeftIcon";
var ArrowLeftIcon$1 = ArrowLeftIcon;
var _excluded$5x = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$5x);
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": "ArrowRefreshIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M12 3a9 9 0 0 0-9 9H1l3 3.89L7 12H5a7 7 0 1 1 7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42A8.9 8.9 0 0 0 12 21a9 9 0 1 0 0-18",
clipRule: "evenodd"
}));
});
ArrowRefreshIcon.displayName = "ArrowRefreshIcon";
var ArrowRefreshIcon$1 = ArrowRefreshIcon;
var _excluded$5w = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$5w);
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: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M17.026 19.796a9 9 0 0 1-12.294-3.294l-1.732 1 .653-4.87 4.543 1.87-1.732 1a7 7 0 1 0 2.562-9.563 6.94 6.94 0 0 0-3.248 4.254l-1.94-.52a8.9 8.9 0 0 1 4.188-5.466 9 9 0 0 1 9 15.589",
clipRule: "evenodd"
}));
});
ArrowRestoreIcon.displayName = "ArrowRestoreIcon";
var ArrowRestoreIcon$1 = ArrowRestoreIcon;
var _excluded$5v = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$5v);
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": "ArrowRightIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "m10.914 6.337 5.657 5.657-5.657 5.657A1 1 0 0 1 9.5 16.237l4.241-4.243L9.5 7.751a1 1 0 0 1 1.414-1.414"
}));
});
ArrowRightIcon.displayName = "ArrowRightIcon";
var ArrowRightIcon$1 = ArrowRightIcon;
var _excluded$5u = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$5u);
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": "ArrowUpLongIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M13 19v-9h4l-5-5-5 5h4v9z"
}));
});
ArrowUpLongIcon.displayName = "ArrowUpLongIcon";
var ArrowUpLongIcon$1 = ArrowUpLongIcon;
var _excluded$5t = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$5t);
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: ref
}, 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 0 0 1.349 0 .867.867 0 0 0 0-1.275L12 8.5l-4.72 4.461a.867.867 0 0 0 0 1.275.993.993 0 0 0 1.348 0L12 11.049z"
}));
});
ArrowUpIcon.displayName = "ArrowUpIcon";
var ArrowUpIcon$1 = ArrowUpIcon;
var _excluded$5s = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$5s);
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": "AssignIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M12 2q1.029.002 2.001.2v2.052a8 8 0 0 0-7.86 13.195 4 4 0 0 1 1.981-1.05A19.3 19.3 0 0 1 12 16q1.938 0 3.877.398c.76.156 1.444.525 1.983 1.048A7.97 7.97 0 0 0 20 12c0-.69-.087-1.36-.252-2H21.8q.198.97.2 2a9.97 9.97 0 0 1-3.073 7.212l-.001.001-.056.053a10 10 0 0 1-1.61 1.24A9.95 9.95 0 0 1 12 22a9.95 9.95 0 0 1-4.951-1.31l-.31-.184-.02-.013a10 10 0 0 1-1.634-1.27l-.012-.01A9.97 9.97 0 0 1 2 12C2 6.477 6.477 2 12 2m0 16q-1.735 0-3.476.357a2 2 0 0 0-.831.385A7.96 7.96 0 0 0 12 20a7.96 7.96 0 0 0 4.307-1.257 2 2 0 0 0-.832-.386A17.3 17.3 0 0 0 12 18m0-11a4 4 0 1 1 0 8 4 4 0 0 1 0-8m0 2a2 2 0 1 0 0 4 2 2 0 0 0 0-4m8-7v2h2v2h-2v2h-2V5.999L16 6V4l2-.001V2z"
}));
});
AssignIcon.displayName = "AssignIcon";
var AssignIcon$1 = AssignIcon;
var _excluded$5r = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$5r);
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": "AttachmentIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "m12.814 2.454 1.414 1.414-8.485 8.486a4 4 0 0 0 5.512 5.794l.144-.138 8.132-8.131a1.5 1.5 0 0 0-2.014-2.219l-.107.097-8.58 8.58-1.414-1.414 8.58-8.58a3.5 3.5 0 0 1 5.082 4.81l-.133.14-8.131 8.132A6 6 0 0 1 4.172 11.1l.156-.162z"
}));
});
AttachmentIcon.displayName = "AttachmentIcon";
var AttachmentIcon$1 = AttachmentIcon;
var _excluded$5q = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$5q);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
xmlns: "http://www.w3.org/2000/svg",
width: 12,
height: 12,
viewBox: "0 0 12 12",
"data-testid": "BellOffSmallIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M8 11v1H4v-1zM1.414.707l9.9 9.9-.707.707L9.293 10H2V5c0-.665.162-1.292.45-1.843L.706 1.414zm1.591 4.117L3 5v4h5.293l-5.09-5.09c-.11.286-.18.593-.198.914M7 0v1.126c1.725.444 3 2.01 3 3.874v2.9l-1-1V5a3 3 0 0 0-2.824-2.995L6 2c-.546 0-1.058.146-1.499.4l-.726-.725A4 4 0 0 1 5 1.126L5 0z"
}));
});
BellOffSmallIcon.displayName = "BellOffSmallIcon";
var BellOffSmallIcon$1 = BellOffSmallIcon;
var _excluded$5p = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$5p);
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": "BellOffIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M11 19c0 .6.4 1 1 1s1-.4 1-1h2c0 1.7-1.3 3-3 3s-3-1.3-3-3zM4.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.222zM12 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 4 0 0 1 17 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.482Q8.638 3.867 9 3.7C9.2 2.1 10.5 1 12 1m2.586 15L7.198 8.613C7.068 9.06 7 9.527 7 10v2c0 1.4-.8 2.8-2 3.5v.5z"
}));
});
BellOffIcon.displayName = "BellOffIcon";
var BellOffIcon$1 = BellOffIcon;
var _excluded$5o = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$5o);
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": "BillingIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M13 7v1h2v2h-4v1h3a1 1 0 0 1 .993.884L15 12v3a1 1 0 0 1-.884.993L14 16h-1v1h-2v-1H9v-2h4v-1h-3a1 1 0 0 1-.993-.884L9 12V9a1 1 0 0 1 .884-.993L10 8h1V7z"
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2m0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16",
clipRule: "evenodd"
}));
});
BillingIcon.displayName = "BillingIcon";
var BillingIcon$1 = BillingIcon;
var _excluded$5n = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$5n);
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": "BudgetAlertIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "nonzero",
d: "M14 17v1h-4v-1zM13 5l.001 1.1A5 5 0 0 1 17 11v5H7v-5a5 5 0 0 1 4-4.9V5zm-1 2a4 4 0 0 0-3.995 3.8L8 11v4h8v-4a4 4 0 0 0-3.8-3.995z"
}));
});
BudgetAlertIcon.displayName = "BudgetAlertIcon";
var BudgetAlertIcon$1 = BudgetAlertIcon;
var _excluded$5m = ["gradient"];
/**
* @component BulbIcon
* @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 (
* <BulbIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <BulbIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var BulbIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$5m);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
xmlns: "http://www.w3.org/2000/svg",
width: 16,
height: 16,
viewBox: "0 0 16 16",
"data-testid": "BulbIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M9.132 13.6a.533.533 0 1 1 0 1.067H6.865a.533.533 0 0 1 0-1.067zM10.132 11.667a.533.533 0 0 1 0 1.066H5.865a.533.533 0 0 1 0-1.066zM7.999 1.333a4.667 4.667 0 0 1 2.666 8.495v.839H9.332v-.521c0-.663.421-1.236.91-1.682a3.333 3.333 0 1 0-4.488 0c.49.446.911 1.02.911 1.682v.52H5.332v-.838a4.667 4.667 0 0 1 2.667-8.495"
}));
});
BulbIcon.displayName = "BulbIcon";
var BulbIcon$1 = BulbIcon;
var _excluded$5l = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$5l);
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": "CalendarAddXIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M7 2v2h10V2h2v2h1a2 2 0 0 1 2 2v6h-2V9H4v11h8v2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1V2zm12 12v3h3v2h-3v3h-2v-3h-3v-2l3-.001V14zm-9.586-3.828 1.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.586z"
}));
});
CalendarAddXIcon.displayName = "CalendarAddXIcon";
var CalendarAddXIcon$1 = CalendarAddXIcon;
var _excluded$5k = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$5k);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
xmlns: "http://www.w3.org/2000/svg",
width: 18,
height: 18,
viewBox: "0 0 18 18",
"data-testid": "CalendarImportIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M5.25 1.5V3h7.5V1.5h1.5V3H15a1.5 1.5 0 0 1 1.5 1.5v3.75H15v-1.5H3V15h6v1.5H3A1.5 1.5 0 0 1 1.5 15V4.5A1.5 1.5 0 0 1 3 3h.75V1.5z",
clipRule: "evenodd"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M12.75 13.5v3h1.5v-3h2.25l-3-3-3 3z"
}));
});
CalendarImportIcon.displayName = "CalendarImportIcon";
var CalendarImportIcon$1 = CalendarImportIcon;
var _excluded$5j = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$5j);
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": "CalendarIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M7 2v2h10V2h2v2h1a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1V2zm13 7H4v11h16zm-10 2v4H6v-4z"
}));
});
CalendarIcon.displayName = "CalendarIcon";
var CalendarIcon$1 = CalendarIcon;
var _excluded$5i = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$5i);
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": "CancelCrossIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "m16.95 5.636 1.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"
}));
});
CancelCrossIcon.displayName = "CancelCrossIcon";
var CancelCrossIcon$1 = CancelCrossIcon;
var _excluded$5h = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$5h);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
xmlns: "http://www.w3.org/2000/svg",
width: 18,
height: 18,
viewBox: "0 0 18 18",
"data-testid": "CaretLeftIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M10 5v8L6 9z"
}));
});
CaretLeftIcon.displayName = "CaretLeftIcon";
var CaretLeftIcon$1 = CaretLeftIcon;
var _excluded$5g = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$5g);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
xmlns: "http://www.w3.org/2000/svg",
width: 18,
height: 18,
viewBox: "0 0 18 18",
"data-testid": "CaretRightIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M8 5v8l4-4z"
}));
});
CaretRightIcon.displayName = "CaretRightIcon";
var CaretRightIcon$1 = CaretRightIcon;
var _excluded$5f = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$5f);
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": "ChatIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M20 4a3 3 0 0 1 3 3v9.2a3 3 0 0 1-3 3H7.794L1 23V7a3 3 0 0 1 3-3z"
}));
});
ChatIcon.displayName = "ChatIcon";
var ChatIcon$1 = ChatIcon;
var _excluded$5e = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$5e);
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": "CheckIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "m5.613 10.21.094.083L10 14.585l8.293-8.292a1 1 0 0 1 1.497 1.32l-.083.094-9 9a1 1 0 0 1-1.414 0l-5-5a1 1 0 0 1 1.32-1.497"
}));
});
CheckIcon.displayName = "CheckIcon";
var CheckIcon$1 = CheckIcon;
var _excluded$5d = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$5d);
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": "CheckboxBlankTogglerIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2m0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16m3.607 5.707a1 1 0 0 1 0 1.414l-3.657 3.657a1 1 0 0 1-1.414 0L8.707 12.95a1 1 0 0 1 1.414-1.414l1.12 1.12 2.951-2.949a1 1 0 0 1 1.415 0"
}));
});
CheckboxBlankTogglerIcon.displayName = "CheckboxBlankTogglerIcon";
var CheckboxBlankTogglerIcon$1 = CheckboxBlankTogglerIcon;
var _excluded$5c = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$5c);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
xmlns: "http://www.w3.org/2000/svg",
width: 24,
height: 24,
"data-testid": "CheckboxCircleArrowIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12q0-.507.05-1h2.012A8 8 0 1 0 12 4zm3.607 7.707a1 1 0 0 1 0 1.414l-3.657 3.657a1 1 0 0 1-1.414 0L8.707 12.95a1 1 0 1 1 1.414-1.414l1.12 1.12 2.951-2.949a1 1 0 0 1 1.415 0M5 1l5 4-5 4V6H2V4h3z",
clipRule: "evenodd"
}));
});
CheckboxCircleArrowIcon.displayName = "CheckboxCircleArrowIcon";
var CheckboxCircleArrowIcon$1 = CheckboxCircleArrowIcon;
var _excluded$5b = ["gradient"];
/**
* @component CheckboxCircleBlankIcon
* @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 (
* <CheckboxCircleBlankIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <CheckboxCircleBlankIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var CheckboxCircleBlankIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$5b);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
xmlns: "http://www.w3.org/2000/svg",
width: 15,
height: 15,
viewBox: "0 0 15 15",
"data-testid": "CheckboxCircleBlankIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M7.5 0a7.5 7.5 0 1 1 0 15 7.5 7.5 0 0 1 0-15m0 1.5a6 6 0 1 0 0 12 6 6 0 0 0 0-12m2.705 4.28a.75.75 0 0 1 0 1.061L7.462 9.584a.75.75 0 0 1-1.06 0L5.03 8.212a.75.75 0 0 1 1.061-1.06l.84.84L9.144 5.78a.75.75 0 0 1 1.061 0",
clipRule: "evenodd"
}));
});
CheckboxCircleBlankIcon.displayName = "CheckboxCircleBlankIcon";
var CheckboxCircleBlankIcon$1 = CheckboxCircleBlankIcon;
var _excluded$5a = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$5a);
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: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M5 4h10.19L19 7.891V20H5zm11.03-2H5a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V7.075zm.667 9.82a1.105 1.105 0 0 0 .02-1.499.96.96 0 0 0-1.414-.021l-4.446 4.58-2.16-2.225a.96.96 0 0 0-1.414.021c-.385.42-.376 1.09.02 1.499l2.16 2.225c.776.8 2.012.8 2.788 0z",
clipRule: "evenodd"
}));
});
CheckboxDocumentsIcon.displayName = "CheckboxDocumentsIcon";
var CheckboxDocumentsIcon$1 = CheckboxDocumentsIcon;
var _excluded$59 = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$59);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
xmlns: "http://www.w3.org/2000/svg",
width: 16,
height: 16,
viewBox: "0 0 16 16",
"data-testid": "CheckboxIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("g", {
fillRule: "evenodd"
}, /*#__PURE__*/React__default["default"].createElement("rect", {
width: 15,
height: 15,
x: 0.5,
y: 0.5,
stroke: "#8E8E8E",
rx: 2
}), /*#__PURE__*/React__default["default"].createElement("path", {
stroke: "#979797",
strokeWidth: 2,
d: "m12.243 5-5.657 5.657-2.829-2.829"
})));
});
CheckboxIcon$2.displayName = "CheckboxIcon";
var CheckboxIcon$3 = CheckboxIcon$2;
var _excluded$58 = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$58);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
xmlns: "http://www.w3.org/2000/svg",
width: 12,
height: 12,
viewBox: "0 0 12 12",
"data-testid": "ChecklistSmallIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M2.5 9a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3m0 1a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1m8.5 0v1H5v-1zM2.5 5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3m0 1a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1M11 6v1H5V6zM2.5 1a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3m0 1a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1M11 2v1H5V2z"
}));
});
ChecklistSmallIcon.displayName = "ChecklistSmallIcon";
var ChecklistSmallIcon$1 = ChecklistSmallIcon;
var _excluded$57 = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$57);
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": "ChecklistIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M5 16a3 3 0 1 1 0 6 3 3 0 0 1 0-6m16 2a1 1 0 0 1 0 2H11a1 1 0 0 1 0-2zM5 18a1 1 0 1 0 0 2 1 1 0 0 0 0-2m0-9a3 3 0 1 1 0 6 3 3 0 0 1 0-6m16 2a1 1 0 0 1 0 2H11a1 1 0 0 1 0-2zM5 11a1 1 0 1 0 0 2 1 1 0 0 0 0-2m0-9a3 3 0 1 1 0 6 3 3 0 0 1 0-6m16 2a1 1 0 0 1 0 2H11a1 1 0 0 1 0-2zM5 4a1 1 0 1 0 0 2 1 1 0 0 0 0-2"
}));
});
ChecklistIcon.displayName = "ChecklistIcon";
var ChecklistIcon$1 = ChecklistIcon;
var _excluded$56 = ["gradient"];
/**
* @component CircleDotIcon
* @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 (
* <CircleDotIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <CircleDotIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var CircleDotIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$56);
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": "CircleDotIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M12 4.222a7.778 7.778 0 1 0 0 15.556 7.778 7.778 0 0 0 0-15.556M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20"
}), /*#__PURE__*/React__default["default"].createElement("circle", {
cx: 12,
cy: 12,
r: 3.3
}));
});
CircleDotIcon.displayName = "CircleDotIcon";
var CircleDotIcon$1 = CircleDotIcon;
var _excluded$55 = ["gradient"];
/**
* @component CircleIcon
* @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 (
* <CircleIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <CircleIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var CircleIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$55);
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": "CircleIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M12 4.222a7.778 7.778 0 1 0 0 15.556 7.778 7.778 0 0 0 0-15.556M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20"
}));
});
CircleIcon.displayName = "CircleIcon";
var CircleIcon$1 = CircleIcon;
var _excluded$54 = ["gradient"];
/**
* @component CircleSlashIcon
* @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.
*
* A ring (based on CircleIcon) crossed by a single diagonal line at 45 degrees,
* running from the bottom-left to the top-right. The slash matches the ring's
* stroke weight (~2.222 units).
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <CircleSlashIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <CircleSlashIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var CircleSlashIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$54);
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": "CircleSlashIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M12 4.222a7.778 7.778 0 1 0 0 15.556 7.778 7.778 0 0 0 0-15.556M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M5.716 19.856 19.856 5.716l-1.571-1.571L4.144 18.284z"
}));
});
CircleSlashIcon.displayName = "CircleSlashIcon";
var CircleSlashIcon$1 = CircleSlashIcon;
var _excluded$53 = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$53);
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": "CircleMultipleIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M19.657 8.343A8 8 0 1 1 8.343 19.657 8 8 0 0 1 19.657 8.343m-9.9 1.414a6 6 0 1 0 8.486 8.486 6 6 0 0 0-8.486-8.486M10 2a7.97 7.97 0 0 1 5.291 2H10a6 6 0 0 0-5.996 5.775L4 10v5.291A8 8 0 0 1 10 2"
}));
});
CircleMultipleIcon.displayName = "CircleMultipleIcon";
var CircleMultipleIcon$1 = CircleMultipleIcon;
var _excluded$52 = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$52);
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": "ClockAddIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10h-2a8 8 0 1 0-8 8v2C6.477 22 2 17.523 2 12m17 2v3h3v2h-3v3h-2v-3.001L14 19v-2l3-.001V14zm-8-8v4.999L6 11v2h7V6z"
}));
});
ClockAddIcon.displayName = "ClockAddIcon";
var ClockAddIcon$1 = ClockAddIcon;
var _excluded$51 = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$51);
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": "ClockDollarIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10h-2a8 8 0 1 0-8 8v2C6.477 22 2 17.523 2 12m9-6v4.999L6 11v2h7V6z",
clipRule: "evenodd"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M19 23h-2v-1h-2v-2h4v-1h-3a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h1v-1h2v1h2v2h-4v1h3a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1z"
}));
});
ClockDollarIcon.displayName = "ClockDollarIcon";
var ClockDollarIcon$1 = ClockDollarIcon;
var _excluded$50 = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$50);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
xmlns: "http://www.w3.org/2000/svg",
width: 12,
height: 12,
viewBox: "0 0 12 12",
"data-testid": "ClockSmallIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M5.5.9a5.5 5.5 0 1 1 0 11 5.5 5.5 0 0 1 0-11m0 1a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9M6 3v3h3v1H5V3z"
}));
});
ClockSmallIcon.displayName = "ClockSmallIcon";
var ClockSmallIcon$1 = ClockSmallIcon;
var _excluded$4$ = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4$);
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": "ClockStopwatchIndicatorIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2m0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16m1 2v7h-2V6zM19.586.172l4.242 4.242-1.414 1.414-4.242-4.242z",
clipRule: "evenodd"
}));
});
ClockStopwatchIndicatorIcon.displayName = "ClockStopwatchIndicatorIcon";
var ClockStopwatchIndicatorIcon$1 = ClockStopwatchIndicatorIcon;
var _excluded$4_ = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4_);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
xmlns: "http://www.w3.org/2000/svg",
width: 12,
height: 12,
viewBox: "0 0 12 12",
"data-testid": "ClockStopwatchSmallIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M5.5.9a5.5 5.5 0 1 1 0 11 5.5 5.5 0 0 1 0-11m0 1a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9m.515 1v4H5v-4zM9.797 0l2.152 2.121-.717.707L9.08.708z"
}));
});
ClockStopwatchSmallIcon.displayName = "ClockStopwatchSmallIcon";
var ClockStopwatchSmallIcon$1 = ClockStopwatchSmallIcon;
var _excluded$4Z = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4Z);
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": "ClockStopwatchIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M12 2c2.393 0 4.59.84 6.312 2.243l1.604-1.657L21.33 4 19.73 5.654A9.96 9.96 0 0 1 22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2m0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16m-1 2v7h2V6z"
}));
});
ClockStopwatchIcon.displayName = "ClockStopwatchIcon";
var ClockStopwatchIcon$1 = ClockStopwatchIcon;
var _excluded$4Y = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4Y);
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": "ClockIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2m0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16m1 2v7H6v-2h5V6z"
}));
});
ClockIcon.displayName = "ClockIcon";
var ClockIcon$1 = ClockIcon;
var _excluded$4X = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4X);
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": "CloseCircleIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2m0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16M9.194 7.79l2.805 2.806 2.807-2.805a.992.992 0 1 1 1.403 1.403l-2.806 2.805 2.806 2.807a.992.992 0 1 1-1.403 1.403L12 13.403 9.194 16.21a.992.992 0 1 1-1.403-1.403L10.596 12 7.79 9.194A.992.992 0 1 1 9.194 7.79",
clipRule: "evenodd"
}));
});
CloseCircleIcon.displayName = "CloseCircleIcon";
var CloseCircleIcon$1 = CloseCircleIcon;
var _excluded$4W = ["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, ref) {
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": "CloseDocumentIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M5 4h10.19L19 7.891V20H5zm11.03-2H5a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V7.075zM9.707 9.293a1 1 0 0 0-1.414 1.414L10.586 13l-2.293 2.293a1 1 0 1 0 1.414 1.414L12 14.414l2.293 2.293a1 1 0 0 0 1.414-1.414L13.414 13l2.293-2.293a1 1 0 0 0-1.414-1.414L12 11.586z",
clipRule: "evenodd"
}));
});
CloseDocumentIcon.displayName = "CloseDocumentIcon";
var CloseDocumentIcon$1 = CloseDocumentIcon;
var _excluded$4V = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4V);
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": "CloseSmallIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "m9.485 8.071 2.828 2.827 2.83-2.827a1 1 0 0 1 1.413 1.414l-2.828 2.828 2.828 2.83a1 1 0 0 1-1.414 1.413l-2.829-2.828-2.828 2.828a1 1 0 1 1-1.414-1.414l2.827-2.829-2.827-2.828a1 1 0 0 1 1.414-1.414"
}));
});
CloseSmallIcon.displayName = "CloseSmallIcon";
var CloseSmallIcon$1 = CloseSmallIcon;
var _excluded$4U = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4U);
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": "CloseIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "m7.613 6.21.094.083L12 10.585l4.293-4.292a1 1 0 0 1 1.497 1.32l-.083.094L13.415 12l4.292 4.293a1 1 0 0 1-1.32 1.497l-.094-.083L12 13.415l-4.293 4.292a1 1 0 0 1-1.497-1.32l.083-.094L10.585 12 6.293 7.707a1 1 0 0 1 1.32-1.497",
clipRule: "evenodd"
}));
});
CloseIcon.displayName = "CloseIcon";
var CloseIcon$1 = CloseIcon;
var _excluded$4T = ["gradient"];
/**
* @component CloudIcon
* @description
* Outline cloud glyph for cloud/storage/sync signifiers.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string applied to the stroke.
*
* @see https://design.activecollab.com/docs/foundations/icons
*/
var CloudIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4T);
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": "CloudIcon",
fill: "none",
stroke: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.stroke ? props.stroke : "var(--color-theme-600)",
strokeWidth: 2,
strokeLinecap: "round",
strokeLinejoin: "round",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M6.657 18c-2.572 0 -4.657 -2.007 -4.657 -4.483c0 -2.475 2.085 -4.482 4.657 -4.482c.393 -1.762 1.794 -3.2 3.675 -3.773c1.88 -.572 3.956 -.193 5.444 1c1.488 1.19 2.162 3.007 1.77 4.769h.99c1.913 0 3.464 1.56 3.464 3.486c0 1.927 -1.551 3.487 -3.465 3.487h-11.878"
}));
});
CloudIcon.displayName = "CloudIcon";
var CloudIcon$1 = CloudIcon;
var _excluded$4S = ["gradient"];
/**
* @component CloudDeployIcon
* @description
* Outline cloud glyph with an upward arrow through the middle for
* deploy/upload-to-cloud signifiers. The cloud's bottom edge has a cutout so
* it does not intersect the arrow shaft.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string applied to the stroke.
*
* @see https://design.activecollab.com/docs/foundations/icons
*/
var CloudDeployIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4S);
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": "CloudDeployIcon",
fill: "none",
stroke: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.stroke ? props.stroke : "var(--color-theme-600)",
strokeWidth: 2,
strokeLinecap: "round",
strokeLinejoin: "round",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M6.657 18c-2.572 0 -4.657 -2.007 -4.657 -4.483c0 -2.475 2.085 -4.482 4.657 -4.482c.393 -1.762 1.794 -3.2 3.675 -3.773c1.88 -.572 3.956 -.193 5.444 1c1.488 1.19 2.162 3.007 1.77 4.769h.99c1.913 0 3.464 1.56 3.464 3.486c0 1.927 -1.551 3.487 -3.465 3.487h-3.535M9 18h-2.343"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M12 20v-8"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M9.5 14.5l2.5 -2.5l2.5 2.5"
}));
});
CloudDeployIcon.displayName = "CloudDeployIcon";
var CloudDeployIcon$1 = CloudDeployIcon;
var _excluded$4R = ["gradient"];
/**
* @component CloudDeployFailedIcon
* @description
* Outline cloud glyph with an X through the bottom for failed
* deploy/upload-to-cloud signifiers. The cloud's bottom edge has a cutout so
* it does not intersect the X.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string applied to the stroke.
*
* @see https://design.activecollab.com/docs/foundations/icons
*/
var CloudDeployFailedIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
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,
viewBox: "0 0 24 24",
"data-testid": "CloudDeployFailedIcon",
fill: "none",
stroke: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.stroke ? props.stroke : "var(--color-theme-600)",
strokeWidth: 2,
strokeLinecap: "round",
strokeLinejoin: "round",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M6.657 18c-2.572 0 -4.657 -2.007 -4.657 -4.483c0 -2.475 2.085 -4.482 4.657 -4.482c.393 -1.762 1.794 -3.2 3.675 -3.773c1.88 -.572 3.956 -.193 5.444 1c1.488 1.19 2.162 3.007 1.77 4.769h.99c1.913 0 3.464 1.56 3.464 3.486c0 1.927 -1.551 3.487 -3.465 3.487h-1.535M7 18h-0.343"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M9.5 15.5l5 5"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M14.5 15.5l-5 5"
}));
});
CloudDeployFailedIcon.displayName = "CloudDeployFailedIcon";
var CloudDeployFailedIcon$1 = CloudDeployFailedIcon;
var _excluded$4Q = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4Q);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
xmlns: "http://www.w3.org/2000/svg",
width: 6,
height: 9,
viewBox: "0 0 6 9",
"data-testid": "CollapsIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M4.243.22 0 4.462l4.243 4.243a.75.75 0 1 0 1.06-1.06l-3.18-3.183 3.18-3.182A.75.75 0 0 0 4.243.22"
}));
});
CollapsIcon.displayName = "CollapsIcon";
var CollapsIcon$1 = CollapsIcon;
var _excluded$4P = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4P);
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": "CollapseAllIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "nonzero",
d: "m12 15 4.72 4.461a.867.867 0 0 1 0 1.275.993.993 0 0 1-1.348 0L12 17.549l-3.372 3.187a.993.993 0 0 1-1.349 0 .867.867 0 0 1 0-1.275zm4.72-11.736a.867.867 0 0 1 0 1.275L12 9 7.28 4.539a.867.867 0 0 1 0-1.275.993.993 0 0 1 1.348 0L12 6.451l3.372-3.187a.993.993 0 0 1 1.349 0M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4"
}));
});
CollapseAllIcon.displayName = "CollapseAllIcon";
var CollapseAllIcon$1 = CollapseAllIcon;
var _excluded$4O = ["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, ref) {
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,
viewBox: "0 0 24 24",
"data-testid": "CollapseExpandSingleIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "nonzero",
d: "M15.372 14.736a.993.993 0 0 0 1.349 0 .867.867 0 0 0 0-1.275L12 9l-4.72 4.461a.867.867 0 0 0 0 1.275.993.993 0 0 0 1.348 0L12 11.549z"
}));
});
CollapseExpandSingleIcon.displayName = "CollapseExpandSingleIcon";
var CollapseExpandSingleIcon$1 = CollapseExpandSingleIcon;
var _excluded$4N = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4N);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
xmlns: "http://www.w3.org/2000/svg",
width: 18,
height: 20,
viewBox: "0 0 18 20",
"data-testid": "CompanyAddIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M10 0v2H2v16h5v-3.5h2V18h5V8h2v12H0V2a2 2 0 0 1 2-2zm3 14v2h-2v-2zm-8 0v2H3v-2zm8-5v2h-2V9zM9 9v2H7V9zM5 9v2H3V9zm4-5v2H7V4zM5 4v2H3V4zm11-4v2h2v2h-2v2h-2V3.999L12 4V2l2-.001V0z",
clipRule: "evenodd"
}));
});
CompanyAddIcon.displayName = "CompanyAddIcon";
var CompanyAddIcon$1 = CompanyAddIcon;
var _excluded$4M = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4M);
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": "CompanyIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M20 22H4V4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2zM6 20h5v-3.5h2V20h5V4H6zm11-4v2h-2v-2zm-8 0v2H7v-2zm8-5v2h-2v-2zm-4 0v2h-2v-2zm-4 0v2H7v-2zm4-5v2h-2V6zm4 0v2h-2V6zM9 6v2H7V6z",
clipRule: "evenodd"
}));
});
CompanyIcon.displayName = "CompanyIcon";
var CompanyIcon$1 = CompanyIcon;
var _excluded$4L = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4L);
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": "ComputerIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M21 16H3V4h18m0-2H3c-1.11 0-2 .89-2 2v12a2 2 0 0 0 2 2h7v2H8v2h8v-2h-2v-2h7a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2"
}));
});
ComputerIcon.displayName = "ComputerIcon";
var ComputerIcon$1 = ComputerIcon;
var _excluded$4K = ["gradient"];
/**
* @component ConnectionIcon
* @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 (
* <ConnectionIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <ConnectionIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var ConnectionIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4K);
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": "ConnectionIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M6 19c.075-4.623 2.637-5.022 6.243-6.03C15.637 12.228 20.075 10.877 20 5h-2c-.075 4.623-2.637 5.022-6.243 6.03C8.363 11.772 3.925 13.123 4 19Z"
}), /*#__PURE__*/React__default["default"].createElement("circle", {
cx: 5,
cy: 19,
r: 2.5
}), /*#__PURE__*/React__default["default"].createElement("circle", {
cx: 19,
cy: 5,
r: 2.5
}));
});
ConnectionIcon.displayName = "ConnectionIcon";
var ConnectionIcon$1 = ConnectionIcon;
var _excluded$4J = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4J);
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": "CopyIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M20 20V8H8v12zm2 0a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V8c0-1.11.89-2 2-2h12a2 2 0 0 1 2 2zM4 16H2V4a2 2 0 0 1 2-2h13v2H4z"
}));
});
CopyIcon.displayName = "CopyIcon";
var CopyIcon$1 = CopyIcon;
var _excluded$4I = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4I);
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": "CrownBlankIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "m15.674 9.488 2.704-.98L17.3 13H6.7L5.663 8.507l2.662.978A1 1 0 0 0 9.45 9.17L12 5.988l2.552 3.186a1 1 0 0 0 1.122.314M8.5 7.482 4.69 6.097a1 1 0 0 0-1.32 1.145L5 15h14l1.63-7.758a1 1 0 0 0-1.32-1.145L15.5 7.482l-2.747-3.14a1 1 0 0 0-1.506 0zM19 17H5v1c0 .6.4 1 1 1h12c.6 0 1-.4 1-1z"
}));
});
CrownBlankIcon.displayName = "CrownBlankIcon";
var CrownBlankIcon$1 = CrownBlankIcon;
var _excluded$4H = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4H);
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": "CrownSelectedIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "nonzero",
d: "M8.5 7.487 4.69 6.1a1 1 0 0 0-1.32 1.146L5 15h14l1.63-7.753A1 1 0 0 0 19.31 6.1L15.5 7.487l-2.747-3.14a1 1 0 0 0-1.506 0zM19 17H5v1c0 .6.4 1 1 1h12c.6 0 1-.4 1-1z"
}));
});
CrownSelectedIcon.displayName = "CrownSelectedIcon";
var CrownSelectedIcon$1 = CrownSelectedIcon;
var _excluded$4G = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4G);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
xmlns: "http://www.w3.org/2000/svg",
width: 12,
height: 12,
viewBox: "0 0 12 12",
"data-testid": "DependencySmallIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M10 7a2 2 0 1 1 0 4 2 2 0 0 1 0-4m0 1a1 1 0 1 0 0 2 1 1 0 0 0 0-2M4.5 6v2.499L7 8.5v1H3.5V6zM4 1a2 2 0 1 1 0 4 2 2 0 0 1 0-4m0 1a1 1 0 1 0 0 2 1 1 0 0 0 0-2"
}));
});
DependencySmallIcon.displayName = "DependencySmallIcon";
var DependencySmallIcon$1 = DependencySmallIcon;
var _excluded$4F = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4F);
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": "DependencyIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M19 14a4 4 0 1 1 0 8 4 4 0 0 1 0-8m0 2a2 2 0 1 0 0 4 2 2 0 0 0 0-4M8 12v4.998L13 17v2H6v-7zM7 2a4 4 0 1 1 0 8 4 4 0 0 1 0-8m0 2a2 2 0 1 0 0 4 2 2 0 0 0 0-4"
}));
});
DependencyIcon.displayName = "DependencyIcon";
var DependencyIcon$1 = DependencyIcon;
var _excluded$4E = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4E);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
xmlns: "http://www.w3.org/2000/svg",
width: 18,
height: 18,
viewBox: "0 0 18 18",
"data-testid": "DescriptionSmallIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M15 15H3a1.5 1.5 0 0 1-1.5-1.5v-9A1.5 1.5 0 0 1 3 3h12a1.5 1.5 0 0 1 1.5 1.5v9A1.5 1.5 0 0 1 15 15M3 4.5v9h12v-9zm1.5 2.25h9v1.5h-9zm0 3H12v1.5H4.5z",
clipRule: "evenodd"
}));
});
DescriptionSmallIcon.displayName = "DescriptionSmallIcon";
var DescriptionSmallIcon$1 = DescriptionSmallIcon;
var _excluded$4D = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4D);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
xmlns: "http://www.w3.org/2000/svg",
width: 24,
height: 24,
"data-testid": "DescriptionIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M20 20H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2M4 6v12h16V6zm2 3h12v2H6zm0 4h10v2H6z",
clipRule: "evenodd"
}));
});
DescriptionIcon.displayName = "DescriptionIcon";
var DescriptionIcon$1 = DescriptionIcon;
var _excluded$4C = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4C);
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": "DiscussionAddIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M22 13v9l-4-4H8a2 2 0 0 1-1.995-1.85L6 16v-1h10a3 3 0 0 0 2.829-2zM12 2v2H4v8.17L5.17 11H16l.001 1.732a2 2 0 0 1-.82.26L15 13H6l-4 4V4a2 2 0 0 1 1.85-1.995L4 2zm7 0v3h3v2h-3v3h-2V6.999L14 7V5l3-.001V2z"
}));
});
DiscussionAddIcon.displayName = "DiscussionAddIcon";
var DiscussionAddIcon$1 = DiscussionAddIcon;
var _excluded$4B = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4B);
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": "DiscussionIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M15 11H5.17l-.59.59-.58.58V4h11zm0-9H4a2 2 0 0 0-2 2v13l4-4h9a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2m5 4h-1v6a3 3 0 0 1-3 3H6v1a2 2 0 0 0 2 2h10l4 4V8a2 2 0 0 0-2-2",
clipRule: "evenodd"
}));
});
DiscussionIcon.displayName = "DiscussionIcon";
var DiscussionIcon$1 = DiscussionIcon;
var _excluded$4A = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4A);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
xmlns: "http://www.w3.org/2000/svg",
width: 12,
height: 12,
viewBox: "0 0 12 12",
"data-testid": "DollarCheckmarkSmallIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "m11.243 8.121.707.707-2.829 2.829L7 9.536l.707-.708 1.414 1.414zM5.5 0a5.5 5.5 0 0 1 5.293 7l-1.05.001A4.5 4.5 0 1 0 6 9.972v1.006A5.5 5.5 0 1 1 5.5 0M6 2v1h1v1H5v1h2v3H6v1H5V8H4V7h2V6H4V3h1V2z"
}));
});
DollarCheckmarkSmallIcon.displayName = "DollarCheckmarkSmallIcon";
var DollarCheckmarkSmallIcon$1 = DollarCheckmarkSmallIcon;
var _excluded$4z = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4z);
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": "DollarCheckmarkIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M12 2c5.523 0 10 4.477 10 10h-2a8 8 0 1 0-8 8v2C6.477 22 2 17.523 2 12S6.477 2 12 2m9.607 13.707a1 1 0 0 1 0 1.414l-3.657 3.657a1 1 0 0 1-1.414 0l-1.829-1.828a1 1 0 0 1 1.414-1.414l1.12 1.12 2.951-2.949a1 1 0 0 1 1.415 0M13 7v1h2v2h-4v1h3a1 1 0 0 1 .993.883L15 12v3a1 1 0 0 1-.883.993L14 16h-1v1h-2v-1H9v-2h4v-1h-3a1 1 0 0 1-.993-.883L9 12V9a1 1 0 0 1 .883-.993L10 8h1V7z"
}));
});
DollarCheckmarkIcon.displayName = "DollarCheckmarkIcon";
var DollarCheckmarkIcon$1 = DollarCheckmarkIcon;
var _excluded$4y = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4y);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
xmlns: "http://www.w3.org/2000/svg",
width: 12,
height: 12,
viewBox: "0 0 12 12",
"data-testid": "DollarClockSmallIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M10 5v1h1v1H9v1h2v3h-1v1H9v-1H8v-1h2V9H8V6h1V5zM8 1v3L6 6l1 1v1.25l-2-2-2 2V10h4v1H2V8l2-2-2-2V1zM7 2H3v1.75l2 2 2-2z"
}));
});
DollarClockSmallIcon.displayName = "DollarClockSmallIcon";
var DollarClockSmallIcon$1 = DollarClockSmallIcon;
var _excluded$4x = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4x);
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": "DollarClockIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M20 13v1h2v2h-4v1h3a1 1 0 0 1 .993.883L22 18v3a1 1 0 0 1-.883.993L21 22h-1v1h-2v-1h-2v-2h4v-1h-3a1 1 0 0 1-.993-.883L16 18v-3a1 1 0 0 1 .883-.993L17 14h1v-1zM18 2v6l-4 4 1.199 1.199L14.2 14.7 12 12.5l-4 4V20h6v2H6v-6l4-4-4-4V2zm-2 2H8v3.5l4 4 4-4z"
}));
});
DollarClockIcon.displayName = "DollarClockIcon";
var DollarClockIcon$1 = DollarClockIcon;
var _excluded$4w = ["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, ref) {
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": "DollarDocumentPlusIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M16.03 2 21 7.075V12h-2V7.891L15.19 4H5v16l7-.001V22H5a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zM19 14v3h3v2h-3v3h-2v-3.001L14 19v-2l3-.001V14zm-7-7v1h2v2h-4v1h3a1 1 0 0 1 .993.883L14 12v3a1 1 0 0 1-.883.993L13 16h-1v1h-2v-1H8v-2h4v-1H9a1 1 0 0 1-.993-.883L8 12V9a1 1 0 0 1 .883-.993L9 8h1V7z",
clipRule: "evenodd"
}));
});
DollarDocumentPlusIcon.displayName = "DollarDocumentPlusIcon";
var DollarDocumentPlusIcon$1 = DollarDocumentPlusIcon;
var _excluded$4v = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4v);
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": "DollarDocumentIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M15.19 4H5v16h14V7.891zM5 2h11.03L21 7.075V20a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2m6 15h2v-1h1a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1h-3v-1h4V8h-2V7h-2v1h-1a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h3v1H9v2h2z",
clipRule: "evenodd"
}));
});
DollarDocumentIcon.displayName = "DollarDocumentIcon";
var DollarDocumentIcon$1 = DollarDocumentIcon;
var _excluded$4u = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4u);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
xmlns: "http://www.w3.org/2000/svg",
width: 12,
height: 12,
viewBox: "0 0 12 12",
"data-testid": "DollarOffSmallIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "m1.05 1.05 9.9 9.9-.707.707L8.47 9.883A1 1 0 0 1 8 10H7v1H5v-1H4a1 1 0 0 1-1-1V8h1v.7a.3.3 0 0 0 .3.3h3.286l-3-3H4a1 1 0 0 1-1-1v-.587L.342 1.757zM8 5a1 1 0 0 1 1 1v1.586l-1-1V6.3a.3.3 0 0 0-.3-.3h-.286l-1-1zM7 1v1h1a1 1 0 0 1 1 1v1H8v-.7a.3.3 0 0 0-.3-.3H4.414l-.883-.883C3.67 2.042 3.83 2 4 2h1V1z"
}));
});
DollarOffSmallIcon.displayName = "DollarOffSmallIcon";
var DollarOffSmallIcon$1 = DollarOffSmallIcon;
var _excluded$4t = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4t);
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": "DollarOffIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M3 4.27 4.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-.66zm7.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.58z"
}));
});
DollarOffIcon.displayName = "DollarOffIcon";
var DollarOffIcon$1 = DollarOffIcon;
var _excluded$4s = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4s);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
xmlns: "http://www.w3.org/2000/svg",
width: 12,
height: 12,
viewBox: "0 0 12 12",
"data-testid": "DollarSmallIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M8 10H7v1H5v-1H4a1 1 0 0 1-1-1V8h1v.7a.3.3 0 0 0 .3.3h3.4a.3.3 0 0 0 .3-.3V6.3a.3.3 0 0 0-.3-.3H4a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h1V1h2v1h1a1 1 0 0 1 1 1v1H8v-.7a.3.3 0 0 0-.3-.3H4.3a.3.3 0 0 0-.3.3v1.4a.3.3 0 0 0 .3.3H8a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1"
}));
});
DollarSmallIcon.displayName = "DollarSmallIcon";
var DollarSmallIcon$1 = DollarSmallIcon;
var _excluded$4r = ["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, ref) {
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,
viewBox: "0 0 24 24",
"data-testid": "DollarIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
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 15"
}));
});
DollarIcon.displayName = "DollarIcon";
var DollarIcon$1 = DollarIcon;
var _excluded$4q = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4q);
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": "DownloadIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "nonzero",
d: "M5 21h14v-2H5m14-9h-4V4H9v6H5l7 7z"
}));
});
DownloadIcon.displayName = "DownloadIcon";
var DownloadIcon$1 = DownloadIcon;
var _excluded$4p = ["gradient"];
/**
* @component DrawIcon
* @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 (
* <DrawIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <DrawIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var DrawIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4p);
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": "DrawIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "m14.06 9 .94.94L5.92 19H5v-.92zm3.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.94z",
clipRule: "evenodd"
}));
});
DrawIcon.displayName = "DrawIcon";
var DrawIcon$1 = DrawIcon;
var _excluded$4o = ["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, ref) {
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,
viewBox: "0 0 24 24",
"data-testid": "DriveIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M7.71 3.5 1.15 15l3.43 6 6.55-11.5M9.73 15 6.3 21h13.12l3.43-6m-.57-1L15.42 2H8.57l6.86 12z"
}));
});
DriveIcon.displayName = "DriveIcon";
var DriveIcon$1 = DriveIcon;
var _excluded$4n = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4n);
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": "DropboxIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "m2 7.2 5 3.19 5-3.19L7 4zm10 0 5 3.19 5-3.19L17 4zM2 13.55l5 3.19 5-3.19-5-3.2zm15-3.2-5 3.2 5 3.19 5-3.19zM7.03 17.8l5.01 3.2 5-3.2-5-3.19z"
}));
});
DropboxIcon.displayName = "DropboxIcon";
var DropboxIcon$1 = DropboxIcon;
var _excluded$4m = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4m);
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": "DuplicateIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M20 20V8H8v12zm2 0a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V8c0-1.11.89-2 2-2h12a2 2 0 0 1 2 2zm-7-9v2h2v2h-2v2h-2v-2.001L11 15v-2l2-.001V11zM4 16H2V4a2 2 0 0 1 2-2h13v2H4z"
}));
});
DuplicateIcon.displayName = "DuplicateIcon";
var DuplicateIcon$1 = DuplicateIcon;
var _excluded$4l = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4l);
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": "EditMultipleIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "m17.83 11 1.41 1.41-7.125 7.125a.997.997 0 0 1-1.493-1.316l.083-.094zM10 13a1 1 0 0 1 .117 1.993L10 15H4a1 1 0 0 1-.117-1.993L4 13zm10.83-5 1.41 1.41-1.83 1.83L19 9.83zM14 9a1 1 0 0 1 .117 1.993L14 11H4a1 1 0 0 1-.117-1.993L4 9zm3-4a1 1 0 0 1 .117 1.993L17 7H4a1 1 0 0 1-.117-1.993L4 5z"
}));
});
EditMultipleIcon.displayName = "EditMultipleIcon";
var EditMultipleIcon$1 = EditMultipleIcon;
var _excluded$4k = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4k);
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": "EditIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M3 5v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7h-2v7H5V5h7V3H5c-1.11 0-2 .89-2 2m6.875 10.535L18 7.41 16.59 6l-8.125 8.125a.997.997 0 1 0 1.41 1.41M19.17 6.24 21 4.41 19.59 3l-1.83 1.83z"
}));
});
EditIcon.displayName = "EditIcon";
var EditIcon$1 = EditIcon;
var _excluded$4j = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4j);
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": "EmojiIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
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 1 0 0-3 1.5 1.5 0 0 0 0 3m7 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3M12 20a8 8 0 1 1 0-16 8 8 0 0 1 0 16m0-18C6.47 2 2 6.5 2 12a10 10 0 0 0 10 10c5.523 0 10-4.477 10-10A10 10 0 0 0 12 2"
}));
});
EmojiIcon.displayName = "EmojiIcon";
var EmojiIcon$1 = EmojiIcon;
var _excluded$4i = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4i);
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": "EstimatePlusIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M12 2c5.523 0 10 4.477 10 10q0 .507-.05 1.001L20 13v-1a8 8 0 1 0-8 8h1l.001 1.95Q12.506 22 12 22C6.477 22 2 17.523 2 12S6.477 2 12 2m7 12v3h3v2h-3v3h-2v-3.001L14 19v-2l3-.001V14zm-7-8a6 6 0 0 1 6 6h-2a4 4 0 1 0-4 4v2a6 6 0 0 1 0-12m0 4a2 2 0 1 1 0 4 2 2 0 0 1 0-4",
clipRule: "evenodd"
}));
});
EstimatePlusIcon.displayName = "EstimatePlusIcon";
var EstimatePlusIcon$1 = EstimatePlusIcon;
var _excluded$4h = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4h);
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": "EstimatesIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16m0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10m0-6a4 4 0 1 0 0-8 4 4 0 0 0 0 8m0 2a6 6 0 1 1 0-12 6 6 0 0 1 0 12m0-4a2 2 0 1 1 0-4 2 2 0 0 1 0 4"
}), /*#__PURE__*/React__default["default"].createElement("path", {
stroke: "#F4F5F7",
strokeWidth: 0.1,
d: "M.05.05h23.9v23.9H.05z",
opacity: 0.01
}));
});
EstimatesIcon.displayName = "EstimatesIcon";
var EstimatesIcon$1 = EstimatesIcon;
var _excluded$4g = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4g);
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": "ExpandAllIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "nonzero",
d: "M16.72 15.264a.867.867 0 0 1 0 1.275L12 21l-4.72-4.461a.867.867 0 0 1 0-1.275.993.993 0 0 1 1.348 0L12 18.451l3.372-3.187a.993.993 0 0 1 1.349 0M12 3l4.72 4.461a.867.867 0 0 1 0 1.275.993.993 0 0 1-1.348 0L12 5.549 8.628 8.736a.993.993 0 0 1-1.349 0 .867.867 0 0 1 0-1.275zm0 11a2 2 0 1 0 0-4 2 2 0 0 0 0 4"
}));
});
ExpandAllIcon.displayName = "ExpandAllIcon";
var ExpandAllIcon$1 = ExpandAllIcon;
var _excluded$4f = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4f);
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": "ExpenseAddIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M19 14v3h3v2h-3v3h-2v-3.001L14 19v-2l3-.001V14zm1-11a2 2 0 0 1 1.994 1.85L22 5v7h-2V5H4v14h8v2H4a2 2 0 0 1-1.995-1.85L2 19V5c0-1.06.81-1.919 1.85-1.995L4 3zm-9 4v1h2v2H9v1h3a1 1 0 0 1 .993.883L13 12v3a1 1 0 0 1-.883.993L12 16h-1v1H9v-1H7v-2h4v-1H8a1 1 0 0 1-.993-.883L7 12V9a1 1 0 0 1 .883-.993L8 8h1V7z"
}));
});
ExpenseAddIcon.displayName = "ExpenseAddIcon";
var ExpenseAddIcon$1 = ExpenseAddIcon;
var _excluded$4e = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4e);
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: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M20 21a2 2 0 0 0 1.994-1.85L22 19v-7h-2v7H4V5h8V3H4a2 2 0 0 0-1.995 1.85L2 5v14c0 1.06.81 1.919 1.85 1.994L4 21z",
clipRule: "evenodd"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M11 8V7H9v1H8l-.117.007A1 1 0 0 0 7 9v3l.007.117A1 1 0 0 0 8 13h3v1H7v2h2v1h2v-1h1l.117-.007A1 1 0 0 0 13 15v-3l-.007-.117A1 1 0 0 0 12 11H9v-1h4V8zm8.057-3.943c.17.61.53 1.282 1.096 1.848A4.3 4.3 0 0 0 22 7.001c-.61.17-1.281.529-1.847 1.095a4.3 4.3 0 0 0-1.095 1.846 4.3 4.3 0 0 0-1.096-1.846A4.3 4.3 0 0 0 16.114 7a4.3 4.3 0 0 0 1.848-1.095 4.3 4.3 0 0 0 1.095-1.848m-2.943-2.412c.079.28.244.59.505.851.26.26.57.426.85.504a2 2 0 0 0-.85.505c-.26.26-.426.57-.505.85a2 2 0 0 0-.504-.85A2 2 0 0 0 14.76 3c.28-.078.59-.243.85-.504.26-.26.426-.57.504-.85Z"
}));
});
ExpensePlusIcon.displayName = "ExpensePlusIcon";
var ExpensePlusIcon$1 = ExpensePlusIcon;
var _excluded$4d = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4d);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
xmlns: "http://www.w3.org/2000/svg",
width: 12,
height: 12,
viewBox: "0 0 12 12",
"data-testid": "EyeOffSmallIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "m1.05 1.05 9.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 0 1 1.971-2.615L.343 1.757zM1.19 6C2.09 7.792 3.95 8.933 6 8.933q.696-.002 1.35-.168L6.176 7.59Q6.089 7.6 6 7.6c-.904 0-1.636-.716-1.636-1.6q0-.106.013-.207L2.736 4.15A5.3 5.3 0 0 0 1.189 6M6 2c2.727 0 5.056 1.659 6 4a6.35 6.35 0 0 1-1.972 2.615l-.765-.766A5.3 5.3 0 0 0 10.811 6C9.91 4.208 8.05 3.067 6 3.067c-.463 0-.916.058-1.35.168l-.857-.855A6.6 6.6 0 0 1 6 2m0 2.4c.904 0 1.636.716 1.636 1.6q0 .105-.013.208l-1.8-1.799Q5.91 4.4 6 4.4"
}));
});
EyeOffSmallIcon.displayName = "EyeOffSmallIcon";
var EyeOffSmallIcon$1 = EyeOffSmallIcon;
var _excluded$4c = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4c);
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": "EyeOffIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M2 5.27 3.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.54zM12 9a3 3 0 0 1 2.83 4L11 9.17A3 3 0 0 1 12 9m0-4.5c5 0 9.27 3.11 11 7.5a11.8 11.8 0 0 1-4 5.19l-1.42-1.43A9.86 9.86 0 0 0 20.82 12 9.82 9.82 0 0 0 12 6.5c-1.09 0-2.16.18-3.16.5L7.3 5.47c1.44-.62 3.03-.97 4.7-.97M3.18 12A9.82 9.82 0 0 0 12 17.5c.69 0 1.37-.07 2-.21L11.72 15A3.064 3.064 0 0 1 9 12.28L5.6 8.87c-.99.85-1.82 1.91-2.42 3.13"
}));
});
EyeOffIcon.displayName = "EyeOffIcon";
var EyeOffIcon$1 = EyeOffIcon;
var _excluded$4b = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4b);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
xmlns: "http://www.w3.org/2000/svg",
width: 12,
height: 12,
viewBox: "0 0 12 12",
"data-testid": "EyeSmallIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M6 4.4c.904 0 1.636.716 1.636 1.6S6.904 7.6 6 7.6 4.364 6.884 4.364 6 5.096 4.4 6 4.4M6 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 6"
}));
});
EyeSmallIcon.displayName = "EyeSmallIcon";
var EyeSmallIcon$1 = EyeSmallIcon;
var _excluded$4a = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$4a);
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": "EyeIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M12 9a3 3 0 1 1 0 6 3 3 0 0 1 0-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 0 0 17.64 0 9.821 9.821 0 0 0-17.64 0"
}));
});
EyeIcon.displayName = "EyeIcon";
var EyeIcon$1 = EyeIcon;
var _excluded$49 = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$49);
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": "FilterIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M7 13h10a1 1 0 0 0 0-2H7a1 1 0 0 0 0 2M3 7a1 1 0 0 0 1 1h16a1 1 0 0 0 0-2H4a1 1 0 0 0-1 1m8 11h2a1 1 0 0 0 0-2h-2a1 1 0 0 0 0 2"
}));
});
FilterIcon.displayName = "FilterIcon";
var FilterIcon$1 = FilterIcon;
var _excluded$48 = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$48);
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": "FolderMoveIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "m10 4 2 2h8a2 2 0 0 1 1.995 1.851L22 8v10c0 1.06-.81 1.919-1.85 1.995L20 20H4a2 2 0 0 1-1.994-1.85L2 18V6a2 2 0 0 1 1.851-1.995L4 4zm10 4H4v10h16zm-10 2 4 3-4 3v-2H6v-2h4z"
}));
});
FolderMoveIcon.displayName = "FolderMoveIcon";
var FolderMoveIcon$1 = FolderMoveIcon;
var _excluded$47 = ["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, ref) {
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,
viewBox: "0 0 24 24",
"data-testid": "FolderOutlineIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M20 18H4V8h16m0-2h-8l-2-2H4c-1.11 0-2 .89-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"
}));
});
FolderOutlineIcon.displayName = "FolderOutlineIcon";
var FolderOutlineIcon$1 = FolderOutlineIcon;
var _excluded$46 = ["gradient"];
/**
* @component FolderPlusIcon
* @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 (
* <FolderPlusIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <FolderPlusIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var FolderPlusIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$46);
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": "FolderPlusIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M22 12h-2V8H4v10h8v2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h6l2 2h8a2 2 0 0 1 2 2v4z"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M19 14v3h3v2h-3v3h-2v-3h-3v-2h3v-3z"
}));
});
FolderPlusIcon.displayName = "FolderPlusIcon";
var FolderPlusIcon$1 = FolderPlusIcon;
var _excluded$45 = ["gradient"];
/**
* @component GearIcon
* @description
* Outline gear/cog glyph for settings/configuration signifiers.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string applied to the stroke.
*
* @see https://design.activecollab.com/docs/foundations/icons
*/
var GearIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$45);
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": "GearIcon",
fill: "none",
stroke: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.stroke ? props.stroke : "var(--color-theme-600)",
strokeWidth: 2,
strokeLinecap: "round",
strokeLinejoin: "round",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"
}));
});
GearIcon.displayName = "GearIcon";
var GearIcon$1 = GearIcon;
var _excluded$44 = ["gradient"];
var maskUid$1 = 0;
/**
* @component GearFailedIcon
* @description
* Outline gear/cog glyph with a cutout in the lower-right corner holding an X
* badge — used to signify a failed settings/configuration action. The cutout
* separates the X from the gear outline.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string applied to the stroke.
*
* @see https://design.activecollab.com/docs/foundations/icons
*/
var GearFailedIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$44);
var _useState = React.useState(function () {
return "gear-failed-cut-".concat(++maskUid$1);
}),
_useState2 = _slicedToArray(_useState, 1),
maskId = _useState2[0];
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": "GearFailedIcon",
fill: "none",
stroke: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.stroke ? props.stroke : "var(--color-theme-600)",
strokeWidth: 2,
strokeLinecap: "round",
strokeLinejoin: "round",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("defs", null, /*#__PURE__*/React__default["default"].createElement("mask", {
id: maskId
}, /*#__PURE__*/React__default["default"].createElement("rect", {
x: 0,
y: 0,
width: 24,
height: 24,
fill: "#fff",
stroke: "none"
}), /*#__PURE__*/React__default["default"].createElement("circle", {
cx: 17.5,
cy: 17.5,
r: 5.5,
fill: "#000",
stroke: "none"
}))), /*#__PURE__*/React__default["default"].createElement("g", {
mask: "url(#".concat(maskId, ")")
}, /*#__PURE__*/React__default["default"].createElement("path", {
d: "M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"
})), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M15 15l5 5"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M20 15l-5 5"
}));
});
GearFailedIcon.displayName = "GearFailedIcon";
var GearFailedIcon$1 = GearFailedIcon;
var _excluded$43 = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$43);
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": "GiftIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M22 12v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-8a1 1 0 0 1-1-1V8a2 2 0 0 1 2-2h3.17A3 3 0 0 1 9 2c1 0 1.88.5 2.43 1.24v-.01L12 4l.57-.77v.01C13.12 2.5 14 2 15 2a3 3 0 0 1 2.83 4H21a2 2 0 0 1 2 2v3a1 1 0 0 1-1 1M4 20h7v-8H4zm16 0v-8h-7v8zM9 4a1 1 0 1 0 0 2 1 1 0 0 0 0-2m6 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2M3 8v2h8V8zm10 0v2h8V8z",
clipRule: "evenodd"
}));
});
GiftIcon.displayName = "GiftIcon";
var GiftIcon$1 = GiftIcon;
var _excluded$42 = ["gradient"];
/**
* @component GitBranchIcon
* @description
* Outline git-branch glyph for source-control signifiers.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string applied to the stroke.
*
* @see https://design.activecollab.com/docs/foundations/icons
*/
var GitBranchIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$42);
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": "GitBranchIcon",
fill: "none",
stroke: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.stroke ? props.stroke : "var(--color-theme-600)",
strokeWidth: 2,
strokeLinecap: "round",
strokeLinejoin: "round",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M7 18m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M7 6m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M17 6m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M7 8v8"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M9 18h4a4 4 0 0 0 4 -4v-6"
}));
});
GitBranchIcon.displayName = "GitBranchIcon";
var GitBranchIcon$1 = GitBranchIcon;
var _excluded$41 = ["gradient"];
/**
* @component GitCommitIcon
* @description
* Outline git-commit glyph (a node on a line) for source-control signifiers.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string applied to the stroke.
*
* @see https://design.activecollab.com/docs/foundations/icons
*/
var GitCommitIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$41);
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": "GitCommitIcon",
fill: "none",
stroke: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.stroke ? props.stroke : "var(--color-theme-600)",
strokeWidth: 2,
strokeLinecap: "round",
strokeLinejoin: "round",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M12 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M3 12h6"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M15 12h6"
}));
});
GitCommitIcon.displayName = "GitCommitIcon";
var GitCommitIcon$1 = GitCommitIcon;
var _excluded$40 = ["gradient"];
/**
* @component GitHubIcon
* @description
* GitHub brand glyph. Filled so it inverts with the theme (safe on Neon and any
* future dark theme) via the `--color-theme-600` token.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @see https://design.activecollab.com/docs/foundations/icons
*/
var GitHubIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$40);
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": "GitHubIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("g", {
transform: "scale(1.5)"
}, /*#__PURE__*/React__default["default"].createElement("path", {
d: "M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"
})));
});
GitHubIcon.displayName = "GitHubIcon";
var GitHubIcon$1 = GitHubIcon;
var _excluded$3$ = ["gradient"];
/**
* @component GitIcon
* @description
* Git brand glyph. Filled so it inverts with the theme (safe on Neon and any
* future dark theme) via the `--color-theme-600` token.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @see https://design.activecollab.com/docs/foundations/icons
*/
var GitIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3$);
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": "GitIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("g", {
transform: "scale(1.5)"
}, /*#__PURE__*/React__default["default"].createElement("path", {
d: "M15.698 7.287 8.712.302a1.03 1.03 0 0 0-1.457 0l-1.45 1.45 1.84 1.84a1.223 1.223 0 0 1 1.55 1.56l1.773 1.774a1.224 1.224 0 0 1 1.267 2.025 1.226 1.226 0 0 1-2.002-1.334L8.58 5.963v4.353a1.226 1.226 0 1 1-1.008-.036V5.887a1.226 1.226 0 0 1-.666-1.608L5.093 2.465l-4.79 4.79a1.03 1.03 0 0 0 0 1.457l6.986 6.986a1.03 1.03 0 0 0 1.457 0l6.953-6.953a1.03 1.03 0 0 0 0-1.457"
})));
});
GitIcon.displayName = "GitIcon";
var GitIcon$1 = GitIcon;
var _excluded$3_ = ["gradient"];
/**
* @component GitLabIcon
* @description
* GitLab brand glyph. Filled so it inverts with the theme (safe on Neon and any
* future dark theme) via the `--color-theme-600` token.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @see https://design.activecollab.com/docs/foundations/icons
*/
var GitLabIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3_);
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": "GitLabIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("g", {
transform: "scale(1.5)"
}, /*#__PURE__*/React__default["default"].createElement("path", {
d: "m15.734 6.1-.022-.058L13.534.358a.57.57 0 0 0-.563-.356.6.6 0 0 0-.328.122.6.6 0 0 0-.193.294l-1.47 4.499H5.025l-1.47-4.5A.572.572 0 0 0 2.47.358L.289 6.04l-.022.057A4.044 4.044 0 0 0 1.61 10.77l.007.006.02.014 3.318 2.485 1.64 1.242 1 .755a.67.67 0 0 0 .814 0l1-.755 1.64-1.242 3.338-2.5.009-.007a4.05 4.05 0 0 0 1.34-4.668Z"
})));
});
GitLabIcon.displayName = "GitLabIcon";
var GitLabIcon$1 = GitLabIcon;
var _excluded$3Z = ["gradient"];
/**
* @component GitMergeIcon
* @description
* Outline git merge glyph for source-control signifiers. Matches
* GitPullRequestIcon, but the incoming branch runs as a connector line into
* the upper-left node instead of ending in an arrowhead, signifying a merge.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string applied to the stroke.
*
* @see https://design.activecollab.com/docs/foundations/icons
*/
var GitMergeIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3Z);
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": "GitMergeIcon",
fill: "none",
stroke: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.stroke ? props.stroke : "var(--color-theme-600)",
strokeWidth: 2,
strokeLinecap: "round",
strokeLinejoin: "round",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M7 18m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M7 6m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M17 18m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M7 8v8"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M9 6h4a4 4 0 0 1 4 4v6"
}));
});
GitMergeIcon.displayName = "GitMergeIcon";
var GitMergeIcon$1 = GitMergeIcon;
var _excluded$3Y = ["gradient"];
/**
* @component GitPullRequestIcon
* @description
* Outline git pull-request glyph for source-control signifiers.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string applied to the stroke.
*
* @see https://design.activecollab.com/docs/foundations/icons
*/
var GitPullRequestIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3Y);
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": "GitPullRequestIcon",
fill: "none",
stroke: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.stroke ? props.stroke : "var(--color-theme-600)",
strokeWidth: 2,
strokeLinecap: "round",
strokeLinejoin: "round",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M6 18m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M6 6m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M18 18m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M6 8v8"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M11 6h5a2 2 0 0 1 2 2v8"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M14 9l-3 -3l3 -3"
}));
});
GitPullRequestIcon.displayName = "GitPullRequestIcon";
var GitPullRequestIcon$1 = GitPullRequestIcon;
var _excluded$3X = ["gradient"];
/**
* @component GitPullRequestDraftIcon
* @description
* Outline git pull-request glyph for a draft (work-in-progress) pull request.
* Matches GitPullRequestIcon, but the angled connector line into the target
* branch is dotted to signify the draft state, while the arrowhead stays solid.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string applied to the stroke.
*
* @see https://design.activecollab.com/docs/foundations/icons
*/
var GitPullRequestDraftIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3X);
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": "GitPullRequestDraftIcon",
fill: "none",
stroke: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.stroke ? props.stroke : "var(--color-theme-600)",
strokeWidth: 2,
strokeLinecap: "round",
strokeLinejoin: "round",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M6 18m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M6 6m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M18 18m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M6 8v8"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M11 6h5a2 2 0 0 1 2 2v8",
strokeDasharray: "0.01 3"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M14 9l-3 -3l3 -3"
}));
});
GitPullRequestDraftIcon.displayName = "GitPullRequestDraftIcon";
var GitPullRequestDraftIcon$1 = GitPullRequestDraftIcon;
var _excluded$3W = ["gradient"];
/**
* @component GitPullRequestClosedIcon
* @description
* Outline git pull-request glyph for a closed (unmerged) pull request.
* The left branch matches GitPullRequestIcon (two nodes and a connecting line).
* On the right, the incoming branch is shown as two evenly spaced dots leading
* up to an X node, signifying that the pull request was closed without merging.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string applied to the stroke.
*
* @see https://design.activecollab.com/docs/foundations/icons
*/
var GitPullRequestClosedIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
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,
viewBox: "0 0 24 24",
"data-testid": "GitPullRequestClosedIcon",
fill: "none",
stroke: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.stroke ? props.stroke : "var(--color-theme-600)",
strokeWidth: 2,
strokeLinecap: "round",
strokeLinejoin: "round",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M7 18m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M7 6m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M7 8v8"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M17 18m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M17 13.5v0"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M17 10.5v0"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M15 4l4 4"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M19 4l-4 4"
}));
});
GitPullRequestClosedIcon.displayName = "GitPullRequestClosedIcon";
var GitPullRequestClosedIcon$1 = GitPullRequestClosedIcon;
var _excluded$3V = ["gradient"];
/**
* @component GitRepositoryIcon
* @description
* Outline repository glyph (a stacked database cylinder) used as a
* source-control / repository signifier.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string applied to the stroke.
*
* @see https://design.activecollab.com/docs/foundations/icons
*/
var GitRepositoryIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3V);
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": "GitRepositoryIcon",
fill: "none",
stroke: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.stroke ? props.stroke : "var(--color-theme-600)",
strokeWidth: 2,
strokeLinecap: "round",
strokeLinejoin: "round",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M12 4m-8 0a8 2 0 1 0 16 0a8 2 0 1 0 -16 0"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M4 4v5a8 2 0 0 0 16 0v-5"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M4 9v5a8 2 0 0 0 16 0v-5"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M4 14v5a8 2 0 0 0 16 0v-5"
}));
});
GitRepositoryIcon.displayName = "GitRepositoryIcon";
var GitRepositoryIcon$1 = GitRepositoryIcon;
var _excluded$3U = ["gradient"];
var maskUid = 0;
/**
* @component GitRepositoryConnectIcon
* @description
* Outline repository glyph (a stacked database cylinder) with a cutout in the
* upper-right corner holding a small plug badge — used to signify connecting /
* linking a repository.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string applied to the stroke.
*
* @see https://design.activecollab.com/docs/foundations/icons
*/
var GitRepositoryConnectIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3U);
var _useState = React.useState(function () {
return "git-repository-connect-cut-".concat(++maskUid);
}),
_useState2 = _slicedToArray(_useState, 1),
maskId = _useState2[0];
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": "GitRepositoryConnectIcon",
fill: "none",
stroke: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.stroke ? props.stroke : "var(--color-theme-600)",
strokeWidth: 2,
strokeLinecap: "round",
strokeLinejoin: "round",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("defs", null, /*#__PURE__*/React__default["default"].createElement("mask", {
id: maskId
}, /*#__PURE__*/React__default["default"].createElement("rect", {
x: 0,
y: 0,
width: 24,
height: 24,
fill: "#fff",
stroke: "none"
}), /*#__PURE__*/React__default["default"].createElement("circle", {
cx: 18.8,
cy: 4.6,
r: 5.5,
fill: "#000",
stroke: "none"
}))), /*#__PURE__*/React__default["default"].createElement("g", {
mask: "url(#".concat(maskId, ")")
}, /*#__PURE__*/React__default["default"].createElement("path", {
d: "M12 4m-8 0a8 2 0 1 0 16 0a8 2 0 1 0 -16 0"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M4 4v5a8 2 0 0 0 16 0v-5"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M4 9v5a8 2 0 0 0 16 0v-5"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M4 14v5a8 2 0 0 0 16 0v-5"
})), /*#__PURE__*/React__default["default"].createElement("g", {
transform: "rotate(45 18.8 4.6)"
}, /*#__PURE__*/React__default["default"].createElement("path", {
d: "M17.6 1.9v1.4"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M20 1.9v1.4"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M16.7 3.3h4.2v1.5a2.1 2.1 0 0 1 -2.1 2.1a2.1 2.1 0 0 1 -2.1 -2.1z"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M18.8 6.9v1.6"
})));
});
GitRepositoryConnectIcon.displayName = "GitRepositoryConnectIcon";
var GitRepositoryConnectIcon$1 = GitRepositoryConnectIcon;
var _excluded$3T = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3T);
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": "GroupByIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M20.598 9a1 1 0 0 1-1.994-.123V5.392h-3.486a.997.997 0 1 1 0-1.995l4.486-.005.118.007a1 1 0 0 1 .883.993v4.49l-.007.12zM5.396 15.122v3.487h3.486a.998.998 0 0 1 0 1.995l-4.486.005-.118-.007a1 1 0 0 1-.883-.993v-4.49l.007-.12a.997.997 0 0 1 .993-.877l.12.008a1 1 0 0 1 .881.992m8.726 4.478a1 1 0 0 0 .878.998l.12.008h4.489a1 1 0 0 0 .993-.884l.007-.118-.005-4.486a.998.998 0 0 0-1.995 0v3.486h-3.487a1 1 0 0 0-1 .996M5.391 5.396h3.487a1 1 0 0 0 .992-.88l.008-.12A.997.997 0 0 0 9 3.401l-.12-.008H4.392a1 1 0 0 0-.993.884l-.007.118.005 4.486a.998.998 0 0 0 1.995 0V5.396zM8 9a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2H9a1 1 0 0 1-1-1m1 2a1 1 0 1 0 0 2h6a1 1 0 0 0 0-2zm-1 4a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2H9a1 1 0 0 1-1-1"
}));
});
GroupByIcon.displayName = "GroupByIcon";
var GroupByIcon$1 = GroupByIcon;
var _excluded$3S = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3S);
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": "HashtagIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "m5.33 21 .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 4zM9.5 9l-1.073 6H14.5l1.073-6z",
clipRule: "evenodd"
}));
});
HashtagIcon.displayName = "HashtagIcon";
var HashtagIcon$1 = HashtagIcon;
var _excluded$3R = ["gradient"];
/**
* @component HashIcon
* @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 (
* <HashIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <HashIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var HashIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3R);
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": "HashIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M6 10.5h12a1 1 0 0 0 0-2H6a1 1 0 0 0 0 2m0 5h12a1 1 0 0 0 0-2H6a1 1 0 0 0 0 2m3.897 4.575 1.2-16a1 1 0 0 0-1.994-.15l-1.2 16a1 1 0 0 0 1.994.15m5 0 1.2-16a1 1 0 0 0-1.994-.15l-1.2 16a1 1 0 0 0 1.994.15"
}));
});
HashIcon.displayName = "HashIcon";
var HashIcon$1 = HashIcon;
var _excluded$3Q = ["gradient"];
/**
* @component CommandLineIcon
* @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 (
* <CommandLineIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <CommandLineIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var CommandLineIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3Q);
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": "CommandLineIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "m5.419 7.814 7 5a1 1 0 0 0 1.162-1.628l-7-5a1 1 0 0 0-1.162 1.628m7 3.372-7 5a1 1 0 0 0 1.162 1.628l7-5a1 1 0 0 0-1.162-1.628M15 18h5a1 1 0 0 0 0-2h-5a1 1 0 0 0 0 2"
}));
});
CommandLineIcon.displayName = "CommandLineIcon";
var CommandLineIcon$1 = CommandLineIcon;
var _excluded$3P = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3P);
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": "HelpIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16m0-2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2m-1 13h2v2h-2zm2-5a1 1 0 0 0-2 0H9a3 3 0 1 1 4 2.83V14h-2v-1a2 2 0 0 1 1.276-1.865c.572-.311.724-.653.724-1.135"
}));
});
HelpIcon.displayName = "HelpIcon";
var HelpIcon$1 = HelpIcon;
var _excluded$3O = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3O);
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": "HistoryOfChangesIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M10.33 4.176a8 8 0 1 1-.113 15.623l-.446 1.95a10 10 0 1 0-5.196-3.05l-.008.008.242.242.05.051H3.274a1 1 0 1 0 0 2h4a1 1 0 0 0 1-1v-4a1 1 0 1 0-2 0v1.586l-.038-.038a8 8 0 0 1 4.095-13.372"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M12 13h4v2h-6V8h2z"
}));
});
HistoryOfChangesIcon.displayName = "HistoryOfChangesIcon";
var HistoryOfChangesIcon$1 = HistoryOfChangesIcon;
var _excluded$3N = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3N);
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": "ImageIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M20 4a2 2 0 0 1 1.994 1.85L22 6v12a2 2 0 0 1-1.85 1.994L20 20H4a2 2 0 0 1-1.995-1.85L2 18V6a2 2 0 0 1 1.85-1.995L4 4zm0 2H4v12h16zm-5.5 4 4.5 6H5l3.5-4.5 2.5 3zm-8-3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3",
clipRule: "evenodd"
}));
});
ImageIcon.displayName = "ImageIcon";
var ImageIcon$1 = ImageIcon;
var _excluded$3M = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3M);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
xmlns: "http://www.w3.org/2000/svg",
width: 15,
height: 15,
viewBox: "0 0 15 15",
"data-testid": "InfoSmallIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "nonzero",
d: "M7.5 14a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13m0 1a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15M7 6h1v6H7zm0-3h1v1H7z"
}));
});
InfoSmallIcon.displayName = "InfoSmallIcon";
var InfoSmallIcon$1 = InfoSmallIcon;
var _excluded$3L = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3L);
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": "InfoIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2m0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16m-1 5V7h2v2zm0 8v-6h2v6z"
}));
});
InfoIcon.displayName = "InfoIcon";
var InfoIcon$1 = InfoIcon;
var _excluded$3K = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3K);
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": "InsertLinkIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
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.1M8 13h8v-2H8zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5"
}));
});
InsertLinkIcon.displayName = "InsertLinkIcon";
var InsertLinkIcon$1 = InsertLinkIcon;
var _excluded$3J = ["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, ref) {
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,
viewBox: "0 0 24 24",
"data-testid": "IntegrationsIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M10 6H5v13h13v-5h-8zm2 6h8v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h7zm4-7v3h3V5zm-2-2h5a2 2 0 0 1 2 2v5h-7z"
}), /*#__PURE__*/React__default["default"].createElement("path", {
stroke: "#F4F5F7",
strokeWidth: 0.1,
d: "M.05.05h23.9v23.9H.05z",
opacity: 0.01
}));
});
IntegrationsIcon.displayName = "IntegrationsIcon";
var IntegrationsIcon$1 = IntegrationsIcon;
var _excluded$3I = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3I);
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": "InvoicesIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M15.19 4H5v16h14V7.891zM5 2h11.03L21 7.075V20a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2m4.974 11.752q-.015.798.42 1.26t1.078.588v-2.926a3 3 0 0 0-.448-.126 11 11 0 0 1-1.022-.329 3.3 3.3 0 0 1-.903-.504 2.3 2.3 0 0 1-.637-.784q-.238-.469-.238-1.169 0-.714.273-1.26t.721-.917a3.3 3.3 0 0 1 1.036-.574 4.7 4.7 0 0 1 1.218-.245V5.688h.826v1.078q.63.07 1.183.273t.973.56.686.889q.266.533.308 1.26H13.46a1.47 1.47 0 0 0-.35-.952q-.336-.392-.812-.392v2.478l.343.084a9 9 0 0 1 .371.098q1.036.28 1.596.693t.826.861.315.896q.05.448.049.798 0 .308-.154.777a2.6 2.6 0 0 1-.553.917q-.399.449-1.071.798t-1.722.42v1.19h-.826v-1.19q-1.568-.112-2.45-.966Q8.14 15.403 8 13.752zm2.324 1.848q.252-.028.525-.119a1.6 1.6 0 0 0 .49-.259 1.4 1.4 0 0 0 .357-.413q.14-.245.14-.581 0-.546-.343-.819t-1.169-.497zm-.826-7.196a1.5 1.5 0 0 0-.462.07 1.2 1.2 0 0 0-.406.217q-.182.148-.287.364-.105.217-.105.511 0 .462.294.714t.966.406z"
}), /*#__PURE__*/React__default["default"].createElement("path", {
stroke: "#F4F5F7",
strokeWidth: 0.1,
d: "M.05.05h23.9v23.9H.05z",
opacity: 0.01
}));
});
InvoicesIcon.displayName = "InvoicesIcon";
var InvoicesIcon$1 = InvoicesIcon;
var _excluded$3H = ["gradient"];
/**
* @component KeyIcon
* @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 (
* <KeyIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <KeyIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var KeyIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3H);
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": "KeyIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M2 12A6 6 0 0 1 14 12A6 6 0 0 1 2 12ZM11 10.8H21V15.8H19V13.2H18V15.8H16.5V13.2H11ZM5.1 12A2.9 2.9 0 0 0 10.9 12A2.9 2.9 0 0 0 5.1 12Z"
}));
});
KeyIcon.displayName = "KeyIcon";
var KeyIcon$1 = KeyIcon;
var _excluded$3G = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3G);
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": "LabelsIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M17 2a3 3 0 0 1 3 3v17l-8-4-8 4V5a3 3 0 0 1 3-3zm0 2H7a1 1 0 0 0-.993.883L6 5v13.764l6-3 6 3V5a1 1 0 0 0-.883-.993z"
}));
});
LabelsIcon.displayName = "LabelsIcon";
var LabelsIcon$1 = LabelsIcon;
var _excluded$3F = ["gradient"];
/**
* @component LayersIcon
* @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 (
* <LayersIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <LayersIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var LayersIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3F);
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": "LayersIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
stroke: "#F4F5F7",
strokeWidth: 0.1,
d: "M.05.05h23.9v23.9H.05z",
opacity: 0.01
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M22 12a.83.83 0 0 0-.41-.717l-1.959-1.158 1.96-1.157a.834.834 0 0 0 0-1.435l-9.167-5.417a.83.83 0 0 0-.848 0L2.409 7.533a.833.833 0 0 0 0 1.435l1.96 1.157-1.96 1.158a.833.833 0 0 0 0 1.435l1.96 1.157-1.96 1.158a.833.833 0 0 0 0 1.435l9.167 5.416a.83.83 0 0 0 .848 0l9.167-5.416a.834.834 0 0 0 0-1.435l-1.96-1.158 1.96-1.157A.83.83 0 0 0 22 12M12 3.801l7.528 4.45L12 12.698 4.471 8.25zm-.424 10.583a.83.83 0 0 0 .848 0l5.57-3.29 1.535.907L12 16.449 4.471 12l1.536-.907zm7.952 1.366L12 20.2l-7.529-4.45 1.536-.907 5.57 3.29a.83.83 0 0 0 .848 0l5.57-3.29z"
}));
});
LayersIcon.displayName = "LayersIcon";
var LayersIcon$1 = LayersIcon;
var _excluded$3E = ["gradient"];
/**
* @component LayerBackIcon
* @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 (
* <LayerBackIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <LayerBackIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var LayerBackIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3E);
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": "LayerBackIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M22 12a.83.83 0 0 0-.41-.717l-1.959-1.158 1.96-1.157a.834.834 0 0 0 0-1.435l-9.167-5.417a.83.83 0 0 0-.848 0L2.409 7.533a.833.833 0 0 0 0 1.435l1.96 1.157-1.96 1.158a.833.833 0 0 0 0 1.435l1.96 1.157-1.96 1.158a.833.833 0 0 0 0 1.435l9.167 5.416a.83.83 0 0 0 .848 0l9.167-5.416a.834.834 0 0 0 0-1.435l-1.96-1.158 1.96-1.157A.83.83 0 0 0 22 12M12 3.801l7.528 4.45L12 12.698 4.471 8.25zm-.424 10.583a.83.83 0 0 0 .848 0l5.57-3.29 1.535.907L12 16.449 4.471 12l1.536-.907z"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M19.528 15.75 12 20.2l-7.529-4.45 1.536-.907 5.57 3.29a.83.83 0 0 0 .848 0l5.57-3.29z"
}));
});
LayerBackIcon.displayName = "LayerBackIcon";
var LayerBackIcon$1 = LayerBackIcon;
var _excluded$3D = ["gradient"];
/**
* @component LayerBackwardIcon
* @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 (
* <LayerBackwardIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <LayerBackwardIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var LayerBackwardIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3D);
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": "LayerBackwardIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("mask", {
id: "layer-backward-cutout"
}, /*#__PURE__*/React__default["default"].createElement("rect", {
x: "0",
y: "0",
width: "24",
height: "24",
fill: "#fff"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M12 14.5 15.96 10.54 14.83 9.41 12.8 11.44V6.5H11.2V11.44L9.17 9.41 8.04 10.54Z",
fill: "#000",
stroke: "#000",
strokeWidth: 3,
strokeLinejoin: "round",
strokeLinecap: "round"
})), /*#__PURE__*/React__default["default"].createElement("g", {
mask: "url(#layer-backward-cutout)"
}, /*#__PURE__*/React__default["default"].createElement("path", {
d: "M22 12a.83.83 0 0 0-.41-.717l-1.959-1.158 1.96-1.157a.834.834 0 0 0 0-1.435l-9.167-5.417a.83.83 0 0 0-.848 0L2.409 7.533a.833.833 0 0 0 0 1.435l1.96 1.157-1.96 1.158a.833.833 0 0 0 0 1.435l1.96 1.157-1.96 1.158a.833.833 0 0 0 0 1.435l9.167 5.416a.83.83 0 0 0 .848 0l9.167-5.416a.834.834 0 0 0 0-1.435l-1.96-1.158 1.96-1.157A.83.83 0 0 0 22 12M12 3.801l7.528 4.45L12 12.698 4.471 8.25zm-.424 10.583a.83.83 0 0 0 .848 0l5.57-3.29 1.535.907L12 16.449 4.471 12l1.536-.907zm7.952 1.366L12 20.2l-7.529-4.45 1.536-.907 5.57 3.29a.83.83 0 0 0 .848 0l5.57-3.29z"
})), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M12 14.5 15.96 10.54 14.83 9.41 12.8 11.44V6.5H11.2V11.44L9.17 9.41 8.04 10.54Z"
}));
});
LayerBackwardIcon.displayName = "LayerBackwardIcon";
var LayerBackwardIcon$1 = LayerBackwardIcon;
var _excluded$3C = ["gradient"];
/**
* @component LayerForwardIcon
* @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 (
* <LayerForwardIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <LayerForwardIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var LayerForwardIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3C);
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": "LayerForwardIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("mask", {
id: "layer-forward-cutout"
}, /*#__PURE__*/React__default["default"].createElement("rect", {
x: "0",
y: "0",
width: "24",
height: "24",
fill: "#fff"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M12 2 15.96 5.96 14.83 7.09 12.8 5.06V10H11.2V5.06L9.17 7.09 8.04 5.96Z",
fill: "#000",
stroke: "#000",
strokeWidth: 3,
strokeLinejoin: "round",
strokeLinecap: "round"
})), /*#__PURE__*/React__default["default"].createElement("g", {
mask: "url(#layer-forward-cutout)"
}, /*#__PURE__*/React__default["default"].createElement("path", {
d: "M22 12a.83.83 0 0 0-.41-.717l-1.959-1.158 1.96-1.157a.834.834 0 0 0 0-1.435l-9.167-5.417a.83.83 0 0 0-.848 0L2.409 7.533a.833.833 0 0 0 0 1.435l1.96 1.157-1.96 1.158a.833.833 0 0 0 0 1.435l1.96 1.157-1.96 1.158a.833.833 0 0 0 0 1.435l9.167 5.416a.83.83 0 0 0 .848 0l9.167-5.416a.834.834 0 0 0 0-1.435l-1.96-1.158 1.96-1.157A.83.83 0 0 0 22 12M12 3.801l7.528 4.45L12 12.698 4.471 8.25zm-.424 10.583a.83.83 0 0 0 .848 0l5.57-3.29 1.535.907L12 16.449 4.471 12l1.536-.907zm7.952 1.366L12 20.2l-7.529-4.45 1.536-.907 5.57 3.29a.83.83 0 0 0 .848 0l5.57-3.29z"
})), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M12 2 15.96 5.96 14.83 7.09 12.8 5.06V10H11.2V5.06L9.17 7.09 8.04 5.96Z"
}));
});
LayerForwardIcon.displayName = "LayerForwardIcon";
var LayerForwardIcon$1 = LayerForwardIcon;
var _excluded$3B = ["gradient"];
/**
* @component LayerFrontIcon
* @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 (
* <LayerFrontIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <LayerFrontIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var LayerFrontIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3B);
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": "LayerFrontIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M22 12a.83.83 0 0 0-.41-.717l-1.959-1.158 1.96-1.157a.834.834 0 0 0 0-1.435l-9.167-5.417a.83.83 0 0 0-.848 0L2.409 7.533a.833.833 0 0 0 0 1.435l1.96 1.157-1.96 1.158a.833.833 0 0 0 0 1.435l1.96 1.157-1.96 1.158a.833.833 0 0 0 0 1.435l9.167 5.416a.83.83 0 0 0 .848 0l9.167-5.416a.834.834 0 0 0 0-1.435l-1.96-1.158 1.96-1.157A.83.83 0 0 0 22 12M12 3.801l7.528 4.45L12 12.698 4.471 8.25zm-.424 10.583a.83.83 0 0 0 .848 0l5.57-3.29 1.535.907L12 16.449 4.471 12l1.536-.907zm7.952 1.366L12 20.2l-7.529-4.45 1.536-.907 5.57 3.29a.83.83 0 0 0 .848 0l5.57-3.29z"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M12 3.801 19.528 8.251 12 12.698 4.471 8.25z"
}));
});
LayerFrontIcon.displayName = "LayerFrontIcon";
var LayerFrontIcon$1 = LayerFrontIcon;
var _excluded$3A = ["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, ref) {
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,
viewBox: "0 0 24 24",
"data-testid": "LetterArrowRightIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M2 17h4v-3l5 4.5L6 23v-3H2zM4 4a2 2 0 0 0-2 2v9h2V8l8 5 8-5v10h-7v2h7a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm8 7L4 6h16z",
clipRule: "evenodd"
}));
});
LetterArrowRightIcon.displayName = "LetterArrowRightIcon";
var LetterArrowRightIcon$1 = LetterArrowRightIcon;
var _excluded$3z = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3z);
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: ref
}, 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 0 0 2 2h13c1.11 0 2-.89 2-2V8a2 2 0 0 0-2-2zm0 11V9.67L14.5 13 21 9.67V17zm0-9h13l-6.5 3.31zm-4 9.5H1c-.552 0-1-.45-1-1s.448-1 1-1h3q-.02 1.83 0 2m0-10q-.02.17 0 2H1c-.55 0-1-.45-1-1s.45-1 1-1zm-4 5c0-.55.45-1 1-1h3v2H1c-.55 0-1-.45-1-1",
clipRule: "evenodd"
}));
});
LetterFastIcon.displayName = "LetterFastIcon";
var LetterFastIcon$1 = LetterFastIcon;
var _excluded$3y = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3y);
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": "LetterIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M2 6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6m2 9v3h16V8l-8 5-8-5zm0-9 8 5 8-5z",
clipRule: "evenodd"
}));
});
LetterIcon.displayName = "LetterIcon";
var LetterIcon$1 = LetterIcon;
var _excluded$3x = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3x);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
xmlns: "http://www.w3.org/2000/svg",
width: 12,
height: 12,
viewBox: "0 0 12 12",
"data-testid": "LockSmallIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M7 0a2 2 0 0 1 2 2v1h1a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4c0-.555.445-1 1-1h1V2a2 2 0 0 1 2-2zm3 4H2v7h8zM7 6v3H5V6zm0-5H5a1 1 0 0 0-.993.883L4 2v1h4V2a1 1 0 0 0-.883-.993z"
}));
});
LockSmallIcon.displayName = "LockSmallIcon";
var LockSmallIcon$1 = LockSmallIcon;
var _excluded$3w = ["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, ref) {
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,
viewBox: "0 0 24 24",
"data-testid": "LockIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M12 17a2 2 0 0 1-2-2c0-1.11.89-2 2-2a2 2 0 1 1 0 4m6 3V10H6v10zm0-12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V10c0-1.11.89-2 2-2h1V6a5 5 0 1 1 10 0v2zm-6-5a3 3 0 0 0-3 3v2h6V6a3 3 0 0 0-3-3"
}));
});
LockIcon.displayName = "LockIcon";
var LockIcon$1 = LockIcon;
var _excluded$3v = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3v);
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": "MarkerIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M12 17a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0-4a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm10-1a1 1 0 0 1-.883.993l-5.25-.002c-.214 0-.442-.06-.626-.2L13.436 11H4a1 1 0 0 1 0-2h9.592l1.611-1.604A1 1 0 0 1 16 7h5a1 1 0 0 1 1 1zm-5.579-3.001-1.079 1.079.921.921 3.736.001V9zM12 5a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2z"
}));
});
MarkerIcon.displayName = "MarkerIcon";
var MarkerIcon$1 = MarkerIcon;
var _excluded$3u = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3u);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
xmlns: "http://www.w3.org/2000/svg",
width: 24,
height: 24,
"data-testid": "MessageAddIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M11 4v2H6v11.26L10.39 15H18v-2h2v2a2 2 0 0 1-2 2H9.995L4 21V6a2 2 0 0 1 2-2zm7-1v3h3v2h-3v3h-2V8h-3V6h3V3z"
}));
});
MessageAddIcon.displayName = "MessageAddIcon";
var MessageAddIcon$1 = MessageAddIcon;
var _excluded$3t = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3t);
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": "MessageEmptyIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M22 4v12a2 2 0 0 1-2 2H7.995L2 22V4a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2m-2 0H4v14.26L7.39 16H20z"
}));
});
MessageEmptyIcon.displayName = "MessageEmptyIcon";
var MessageEmptyIcon$1 = MessageEmptyIcon;
var _excluded$3s = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3s);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
xmlns: "http://www.w3.org/2000/svg",
width: 12,
height: 12,
viewBox: "0 0 12 12",
"data-testid": "MessageSmallIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M12 2v8H3.998L1 12V2zm-1 1H2v7.13L3.695 9H11zM6 6v1H3V6zm4-2v1H3V4z"
}));
});
MessageSmallIcon.displayName = "MessageSmallIcon";
var MessageSmallIcon$1 = MessageSmallIcon;
var _excluded$3r = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3r);
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: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M22 4v12a2 2 0 0 1-2 2H7.995L2 22V4a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2",
clipRule: "evenodd"
}));
});
MessageSolidIcon.displayName = "MessageSolidIcon";
var MessageSolidIcon$1 = MessageSolidIcon;
var _excluded$3q = ["gradient"];
/**
* @component MessageStarIcon
* @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 (
* <MessageStarIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <MessageStarIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var MessageStarIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3q);
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": "MessageStarIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M11 4v2H6v11.26L10.39 15H18v-2h2v2a2 2 0 0 1-2 2H9.995L4 21V6a2 2 0 0 1 2-2z",
clipRule: "evenodd"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "m17.069 9.783-2.145 1.128a.408.408 0 0 1-.591-.43l.41-2.388-1.736-1.691a.408.408 0 0 1 .226-.696l2.398-.348 1.072-2.173a.408.408 0 0 1 .732 0l1.072 2.173 2.398.348a.408.408 0 0 1 .226.696l-1.735 1.691.41 2.388a.408.408 0 0 1-.592.43z"
}));
});
MessageStarIcon.displayName = "MessageStarIcon";
var MessageStarIcon$1 = MessageStarIcon;
var _excluded$3p = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3p);
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": "MessageIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M22 4v12a2 2 0 0 1-2 2H7.995L2 22V4a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2m-2 0H4v14.26L7.39 16H20zm-8 6v2H6v-2zm6-4v2H6V6z"
}));
});
MessageIcon.displayName = "MessageIcon";
var MessageIcon$1 = MessageIcon;
var _excluded$3o = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3o);
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": "MinusIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("rect", {
width: 14,
height: 2,
x: 5,
y: 11,
fillRule: "evenodd",
rx: 1
}));
});
MinusIcon.displayName = "MinusIcon";
var MinusIcon$1 = MinusIcon;
var _excluded$3n = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3n);
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": "MobileMenuIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M20 17a1 1 0 1 1 0 2H4a1 1 0 1 1 0-2zm0-6a1 1 0 1 1 0 2H4a1 1 0 1 1 0-2zm0-6a1 1 0 1 1 0 2H4a1 1 0 0 1 0-2z",
clipRule: "evenodd"
}));
});
MobileMenuIcon.displayName = "MobileMenuIcon";
var MobileMenuIcon$1 = MobileMenuIcon;
var _excluded$3m = ["gradient"];
/**
* @component MoneyStackIcon
* @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 (
* <MoneyStackIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <MoneyStackIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var MoneyStackIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3m);
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": "MoneyStackIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M15 12h1v1h-2v.5h1.5a.5.5 0 0 1 .497.442L16 14v1.5a.5.5 0 0 1-.442.496L15.5 16H15v.5h-1V16h-1v-1h2v-.5h-1.5a.5.5 0 0 1-.497-.442L13 14v-1.5a.5.5 0 0 1 .442-.496L13.5 12h.5v-.5h1z"
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M20.5 9c.828 0 1.5.56 1.5 1.25v7.5c0 .69-.672 1.25-1.5 1.25h-12c-.828 0-1.5-.56-1.5-1.25v-7.5C7 9.56 7.672 9 8.5 9zm-12 8.75h12v-7.5h-12z",
clipRule: "evenodd"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M18 6.5c.828 0 1.5.56 1.5 1.25H6v8.75l-.154-.007C5.09 16.43 4.5 15.897 4.5 15.25v-7.5c0-.69.672-1.25 1.5-1.25z"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M15.5 4c.828 0 1.5.56 1.5 1.25H3.5V14l-.154-.007C2.59 13.93 2 13.397 2 12.75v-7.5C2 4.56 2.672 4 3.5 4z"
}));
});
MoneyStackIcon.displayName = "MoneyStackIcon";
var MoneyStackIcon$1 = MoneyStackIcon;
var _excluded$3l = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3l);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
xmlns: "http://www.w3.org/2000/svg",
width: 20,
height: 20,
viewBox: "0 0 20 20",
"data-testid": "MoonIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M10.06.509a1 1 0 0 1-.067 1.085 6.015 6.015 0 0 0 8.413 8.413 1 1 0 0 1 1.59.896A10.02 10.02 0 1 1 9.097.004a1 1 0 0 1 .963.505m-2.765 1.93a8.019 8.019 0 1 0 10.266 10.266A8.014 8.014 0 0 1 7.295 2.439",
clipRule: "evenodd"
}));
});
MoonIcon.displayName = "MoonIcon";
var MoonIcon$1 = MoonIcon;
var _excluded$3k = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3k);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
xmlns: "http://www.w3.org/2000/svg",
width: 10,
height: 10,
viewBox: "0 0 10 10",
"data-testid": "MoveTriggerIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M0 0h10v1H0zm0 3h10v1H0zm0 3h10v1H0zm0 3h10v1H0z"
}));
});
MoveTriggerIcon.displayName = "MoveTriggerIcon";
var MoveTriggerIcon$1 = MoveTriggerIcon;
var _excluded$3j = ["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, ref) {
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,
viewBox: "0 0 24 24",
"data-testid": "MoveIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M4 16a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h10a2 2 0 0 1 1.995 1.85L16 4H4v10h7v-3l4 4-4 4v-3zm15 4V8H8v4H6V8a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2v-2h2v2z",
clipRule: "evenodd"
}));
});
MoveIcon.displayName = "MoveIcon";
var MoveIcon$1 = MoveIcon;
var _excluded$3i = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3i);
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": "MyWorkIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M12 12a2 2 0 1 0 0-4 2 2 0 0 0 0 4m0 2a4 4 0 1 1 0-8 4 4 0 0 1 0 8m-7 5c.4-1.647 1.356-2.88 2.53-3.265A14.3 14.3 0 0 1 12 15q2.235 0 4.47.735C17.645 16.12 18.6 17.353 19 19h-2.085c-.274-.757-.696-1.243-1.068-1.365A12.3 12.3 0 0 0 12 17q-1.91-.001-3.847.635c-.372.122-.794.608-1.068 1.365zM5 4a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1zm0-2h14a3 3 0 0 1 3 3v14a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V5a3 3 0 0 1 3-3"
}), /*#__PURE__*/React__default["default"].createElement("path", {
stroke: "#F4F5F7",
strokeWidth: 0.1,
d: "M.05.05h23.9v23.9H.05z",
opacity: 0.01
}));
});
MyWorkIcon.displayName = "MyWorkIcon";
var MyWorkIcon$1 = MyWorkIcon;
var _excluded$3h = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3h);
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": "NoteAddIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M7 14v3h3v2H7v3H5v-3.001L2 19v-2l3-.001V14zM19 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 3zm-7 8v2H8v-2zm5-4v2H7V7z"
}));
});
NoteAddIcon.displayName = "NoteAddIcon";
var NoteAddIcon$1 = NoteAddIcon;
var _excluded$3g = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3g);
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": "NoteIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M19 5v9h-5v5H5V5zm0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h10l6-6V5c0-1.1-.9-2-2-2m-7 10H7v-2h5zm5-4H7V7h10z"
}));
});
NoteIcon.displayName = "NoteIcon";
var NoteIcon$1 = NoteIcon;
var _excluded$3f = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3f);
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: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M3 4v16a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2m2 0h14v16H5zm12 2H7v2h10zm-3 4H7v2h7z",
clipRule: "evenodd"
}));
});
NotebookIcon.displayName = "NotebookIcon";
var NotebookIcon$1 = NotebookIcon;
var _excluded$3e = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3e);
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": "NotificationBellIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, 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.2zM5 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.5zm8 3h2c0 1.7-1.3 3-3 3s-3-1.3-3-3h2c0 .6.4 1 1 1s1-.4 1-1m0 0h2c0 1.7-1.3 3-3 3s-3-1.3-3-3h2c0 .6.4 1 1 1s1-.4 1-1"
}));
});
NotificationBellIcon.displayName = "NotificationBellIcon";
var NotificationBellIcon$1 = NotificationBellIcon;
var _excluded$3d = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3d);
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": "OpenExpandedIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "nonzero",
d: "M14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3m-2 16H5V5h5V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5h-2z"
}));
});
OpenExpandedIcon.displayName = "OpenExpandedIcon";
var OpenExpandedIcon$1 = OpenExpandedIcon;
var _excluded$3c = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3c);
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": "OpenSheetIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M12 5a1 1 0 0 0-1 1v6L8 9v2.25H5v1.5h3V15l3-3v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1zm5 2h-4v10h4z",
clipRule: "evenodd"
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M2 4a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2zm18 0H4v16h16z",
clipRule: "evenodd"
}));
});
OpenSheetIcon.displayName = "OpenSheetIcon";
var OpenSheetIcon$1 = OpenSheetIcon;
var _excluded$3b = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$3b);
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": "OrderFirstIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M4 4h16a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1m2 14h12a1 1 0 0 1 0 2H6a1 1 0 0 1 0-2m0-4h12a1 1 0 0 1 0 2H6a1 1 0 0 1 0-2m0-4h12a1 1 0 0 1 0 2H6a1 1 0 0 1 0-2"
}));
});
OrderFirstIcon.displayName = "OrderFirstIcon";
var OrderFirstIcon$1 = OrderFirstIcon;
var _excluded$3a = ["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, ref) {
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: 12,
height: 12,
viewBox: "0 0 12 12",
"data-testid": "PaidSmallIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "m11.243 8.121.707.707-2.829 2.829L7 9.536l.707-.708 1.414 1.414zM5.5 0a5.5 5.5 0 0 1 5.293 7l-1.05.001A4.5 4.5 0 1 0 6 9.972v1.006A5.5 5.5 0 1 1 5.5 0M6 2v1h1v1H5v1h2v3H6v1H5V8H4V7h2V6H4V3h1V2z"
}));
});
PaidSmallIcon.displayName = "PaidSmallIcon";
var PaidSmallIcon$1 = PaidSmallIcon;
var _excluded$39 = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$39);
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": "PauseCircleOutlineIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2m0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16m-1 5v6H9V9zm4 0v6h-2V9z"
}));
});
PauseCircleOutlineIcon.displayName = "PauseCircleOutlineIcon";
var PauseCircleOutlineIcon$1 = PauseCircleOutlineIcon;
var _excluded$38 = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$38);
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": "PauseIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M12 3a9 9 0 1 1 0 18 9 9 0 0 1 0-18m-1 6H9v6h2zm4 0h-2v6h2z"
}));
});
PauseIcon.displayName = "PauseIcon";
var PauseIcon$1 = PauseIcon;
var _excluded$37 = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$37);
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": "PauseSmallIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M8 7h3v10H8zm5 0h3v10h-3z"
}));
});
PauseSmallIcon.displayName = "PauseSmallIcon";
var PauseSmallIcon$1 = PauseSmallIcon;
var _excluded$36 = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$36);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
xmlns: "http://www.w3.org/2000/svg",
width: 12,
height: 12,
"data-testid": "PencilSmallIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M9 3.47 2.46 10H2v-.46L8.53 3zM9.98.145l-.915.915 1.875 1.875.915-.915a.5.5 0 0 0 0-.705l-1.17-1.17a.5.5 0 0 0-.705 0m-1.45 1.45L1 9.125V11h1.875l7.53-7.53z"
}));
});
PencilSmallIcon.displayName = "PencilSmallIcon";
var PencilSmallIcon$1 = PencilSmallIcon;
var _excluded$35 = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$35);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
xmlns: "http://www.w3.org/2000/svg",
width: 24,
height: 24,
"data-testid": "PencilIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "m14.06 9 .94.94L5.92 19H5v-.92zm3.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.94z"
}));
});
PencilIcon.displayName = "PencilIcon";
var PencilIcon$1 = PencilIcon;
var _excluded$34 = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$34);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
xmlns: "http://www.w3.org/2000/svg",
width: 12,
height: 12,
viewBox: "0 0 12 12",
"data-testid": "PendingPaymentSmallIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M10 5v1h1v1H9v1h2v3h-1v1H9v-1H8v-1h2V9H8V6h1V5zM8 1v3L6 6l1 1v1.25l-2-2-2 2V10h4v1H2V8l2-2-2-2V1zM7 2H3v1.75l2 2 2-2z"
}));
});
PendingPaymentSmallIcon.displayName = "PendingPaymentSmallIcon";
var PendingPaymentSmallIcon$1 = PendingPaymentSmallIcon;
var _excluded$33 = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$33);
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": "PeopleIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "m20.998 16.775-.148-.387a2 2 0 0 0-1.601-1.27 13 13 0 0 0-2.317-.105c-.253-.76-.683-1.527-.932-1.937a15 15 0 0 1 3.518.06 4 4 0 0 1 3.203 2.54l.147.387a2 2 0 0 1-1.614 2.696 28 28 0 0 1-3.248.24c0-.355-.004-.741-.127-1.115L17.587 17a27 27 0 0 0 3.41-.225zM17.5 10a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3m0 2a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7M5.437 14.315a2 2 0 0 0-1.494 1.333L3 18.51q2.739.49 5.473.49a31 31 0 0 0 5.474-.49l-.943-2.862a2 2 0 0 0-1.494-1.333A15 15 0 0 0 8.473 14q-1.514 0-3.036.315m-.406-1.958A17 17 0 0 1 8.473 12q1.722 0 3.443.357a4 4 0 0 1 2.987 2.665l.943 2.862A2 2 0 0 1 14.3 20.48a33 33 0 0 1-5.827.52q-2.912 0-5.825-.521a2 2 0 0 1-1.547-2.595l.942-2.862a4 4 0 0 1 2.988-2.665M8.474 9a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5m0 2a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9"
}), /*#__PURE__*/React__default["default"].createElement("path", {
stroke: "#F4F5F7",
strokeWidth: 0.1,
d: "M.05.05h23.9v23.9H.05z",
opacity: 0.01
}));
});
PeopleIcon.displayName = "PeopleIcon";
var PeopleIcon$1 = PeopleIcon;
var _excluded$32 = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$32);
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": "PersonArrowOutCircleIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M12 2q.507 0 1.001.05L13 3.5q0 .286.024.566a8 8 0 0 0-6.883 13.38A4 4 0 0 1 8.122 16.4 19.3 19.3 0 0 1 12 16q1.939 0 3.877.398c.76.156 1.444.525 1.983 1.048A7.97 7.97 0 0 0 20 12c0-.69-.087-1.36-.252-2H21.8q.198.97.2 2a9.97 9.97 0 0 1-2.85 6.99l-.224.223-.329.302-.325.274-.353.272-.314.222-.345.223A9.95 9.95 0 0 1 12 22a9.95 9.95 0 0 1-4.951-1.31l-.33-.197-.324-.21-.374-.266-.137-.105-.223-.177-.293-.25-.295-.273A9.97 9.97 0 0 1 2 12C2 6.477 6.477 2 12 2m0 16q-1.735 0-3.476.357a2 2 0 0 0-.831.385A7.96 7.96 0 0 0 12 20a7.96 7.96 0 0 0 4.307-1.257 2 2 0 0 0-.832-.386A17.3 17.3 0 0 0 12 18m0-11a4 4 0 1 1 0 8 4 4 0 0 1 0-8m0 2a2 2 0 1 0 0 4 2 2 0 0 0 0-4m6-8v3h-3v2h3v3l5-4z",
clipRule: "evenodd"
}));
});
PersonArrowOutCircleIcon.displayName = "PersonArrowOutCircleIcon";
var PersonArrowOutCircleIcon$1 = PersonArrowOutCircleIcon;
var _excluded$31 = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$31);
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": "PersonCircleOffIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "m12 2 .28.004.316.013.244.018.402.041.14.019.267.04.162.029.19.036a10.01 10.01 0 0 1 7.753 7.587l.062.3.042.233.044.276.031.244.017.154.022.257.02.367q.009.19.008.382l-.002.207-.01.299-.022.323-.04.397-.032.238-.059.354-.062.308-.05.22-.046.184a10 10 0 0 1-.12.422l-.092.283-.13.357-.113.283-.094.215-.161.341-.136.265-.178.32-.13.217q-.218.356-.47.696l-.274.356-.229.273-.14.157-.258.274-.226.224-.104.099-.238.215-.312.262-.398.305-.284.199-.33.213a10 10 0 0 1-.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 10 0 0 1-.361-.511l-.171-.27-.063-.103-.1-.17-.142-.259-.198-.392-.1-.213-.126-.295-.11-.281a10 10 0 0 1-.312-.984l-.096-.403-.062-.309-.059-.354-.06-.49-.028-.376-.013-.278A10 10 0 0 1 2 12C2 6.477 6.477 2 12 2m0 16q-1.735 0-3.476.357a2 2 0 0 0-.831.385q.396.255.822.46l.287.133.295.122.356.13.292.09.146.042.27.068.248.055.281.051q.162.027.325.047l.38.037.28.017L12 20l.368-.008.167-.01.167-.012q.18-.016.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 0 0 .3-.183 2 2 0 0 0-.83-.386A17.3 17.3 0 0 0 12 18m-8-6 .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.158q.135.29.29.567l.202.34.126.194.241.34.18.23.134.162.235.264a4 4 0 0 1 1.981-1.05A19.3 19.3 0 0 1 12 16q1.576 0 3.152.263L13.57 14.68a4 4 0 0 1-5.25-5.25L5.814 6.927A7.97 7.97 0 0 0 4 12m8-8a7.97 7.97 0 0 0-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-.297q.03-.18.05-.365l.03-.32.01-.181Q20 12.204 20 12l-.012-.443a8 8 0 0 0-.078-.762l-.081-.449a8.01 8.01 0 0 0-5.843-6.097l-.422-.096-.353-.062-.358-.046-.477-.036zm-.117 8.997-1.879-1.881L10 11a2 2 0 0 0 1.883 1.997M12 7a4 4 0 0 1 3.92 4.804L11.194 7.08q.391-.08.805-.081"
}));
});
PersonCircleOffIcon.displayName = "PersonCircleOffIcon";
var PersonCircleOffIcon$1 = PersonCircleOffIcon;
var _excluded$30 = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$30);
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": "PersonCircleIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "m12 2 .28.004.316.013.244.018.402.041.14.019.267.04.162.029.19.036a10.01 10.01 0 0 1 7.864 8.151L21.8 10l.046.244.056.352.031.244.017.154.022.257.02.367q.009.19.008.382l-.002.207-.01.299-.022.323-.04.397-.032.238-.059.354-.062.308-.05.22-.046.184a10 10 0 0 1-.12.422l-.092.283-.13.357-.113.283-.094.215-.161.341-.136.265-.178.32-.13.217q-.218.356-.47.696l-.274.356-.229.273-.14.157-.258.274-.226.224-.104.099-.238.215-.312.262-.398.305-.284.199-.33.213a10 10 0 0 1-.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 10 0 0 1-.361-.511l-.171-.27-.063-.103-.1-.17-.142-.259-.198-.392-.1-.213-.126-.295-.11-.281a10 10 0 0 1-.312-.984l-.096-.403-.062-.309-.059-.354-.06-.49-.028-.376-.013-.278A10 10 0 0 1 2 12C2 6.477 6.477 2 12 2m0 16q-1.735 0-3.476.357a2 2 0 0 0-.831.385q.396.255.822.46l.287.133.295.122.356.13.292.09.146.042.27.068.248.055.281.051q.162.027.325.047l.38.037.28.017L12 20l.368-.008.167-.01.167-.012q.18-.016.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 0 0 .3-.183 2 2 0 0 0-.83-.386A17.3 17.3 0 0 0 12 18m0-14a8 8 0 0 0-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.158q.135.29.29.567l.202.34.126.194.241.34.18.23.134.162.235.264a4 4 0 0 1 1.981-1.05A19.3 19.3 0 0 1 12 16q1.938 0 3.877.398c.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-.297q.03-.18.05-.365l.03-.32.01-.181Q20 12.204 20 12l-.012-.443a8 8 0 0 0-.078-.762l-.081-.449a8.01 8.01 0 0 0-5.843-6.097l-.422-.096-.353-.062-.358-.046a8 8 0 0 0-.409-.033l.359.028-.213-.019-.214-.012zm0 3a4 4 0 1 1 0 8 4 4 0 0 1 0-8m0 2a2 2 0 1 0 0 4 2 2 0 0 0 0-4"
}));
});
PersonCircleIcon.displayName = "PersonCircleIcon";
var PersonCircleIcon$1 = PersonCircleIcon;
var _excluded$2$ = ["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, ref) {
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,
viewBox: "0 0 24 24",
"data-testid": "PersonListIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M17 16c1.33 0 3.216.507 3.683 2l.216.682a.5.5 0 0 1-.191.562Q19.619 20 17.005 20q-2.655 0-3.745-.78a.5.5 0 0 1-.198-.511l.15-.709c.423-1.38 2.458-2 3.788-2m0-5a2 2 0 1 1 0 4 2 2 0 0 1 0-4m-4.2 1a1 1 0 0 1-1 1H9a1 1 0 1 1 0-2h2.8a1 1 0 0 1 1 1m-1.133 5a1 1 0 0 1-1 1H9a1 1 0 1 1 0-2h1.667a1 1 0 0 1 1 1M19 6a1 1 0 1 1 0 2H9a1 1 0 0 1 0-2zM5 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.5m0 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.5m0 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.5",
clipRule: "evenodd"
}));
});
PersonListIcon.displayName = "PersonListIcon";
var PersonListIcon$1 = PersonListIcon;
var _excluded$2_ = ["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, ref) {
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,
viewBox: "0 0 24 24",
"data-testid": "PersonPlusIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M12 13q2.073 0 4.145.357c1.687.29 3.06 1.306 3.598 2.665l1.135 2.862c.417 1.05-.27 2.18-1.534 2.526q-.16.044-.329.069A48 48 0 0 1 12 22q-3.508 0-7.015-.521c-1.31-.195-2.181-1.234-1.947-2.321a2 2 0 0 1 .083-.274l1.136-2.862c.539-1.359 1.91-2.375 3.597-2.665A24.4 24.4 0 0 1 12 13m0 2q-1.937 0-3.884.315c-.896.145-1.624.653-1.91 1.333L5 19.51q3.502.49 7 .49a50.5 50.5 0 0 0 7-.49l-1.206-2.862c-.286-.68-1.014-1.188-1.91-1.333A24 24 0 0 0 12 15m0-13c.711 0 1.388.149 2 .416v2.349A3 3 0 1 0 14.829 8h2.072A5.002 5.002 0 0 1 7 7a5 5 0 0 1 5-5m8 0v2h2v2h-2v2h-2V5.999L16 6V4l2-.001V2z"
}));
});
PersonPlusIcon.displayName = "PersonPlusIcon";
var PersonPlusIcon$1 = PersonPlusIcon;
var _excluded$2Z = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2Z);
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": "PersonIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M12 13q2.073 0 4.145.357c1.687.29 3.06 1.306 3.598 2.665l1.135 2.862c.417 1.05-.27 2.18-1.534 2.526q-.16.044-.329.069A48 48 0 0 1 12 22q-3.508 0-7.015-.521c-1.31-.195-2.181-1.234-1.947-2.321a2 2 0 0 1 .083-.274l1.136-2.862c.539-1.359 1.91-2.375 3.597-2.665A24.4 24.4 0 0 1 12 13m0 2q-1.937 0-3.884.315c-.896.145-1.624.653-1.91 1.333L5 19.51q3.502.49 7 .49a50.5 50.5 0 0 0 7-.49l-1.206-2.862c-.286-.68-1.014-1.188-1.91-1.333A24 24 0 0 0 12 15m0-13a5 5 0 1 1 0 10 5 5 0 0 1 0-10m0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6"
}));
});
PersonIcon.displayName = "PersonIcon";
var PersonIcon$1 = PersonIcon;
var _excluded$2Y = ["gradient"];
/**
* @component PinSmallIcon
* @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 (
* <PinSmallIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <PinSmallIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var PinSmallIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2Y);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
xmlns: "http://www.w3.org/2000/svg",
width: 12,
height: 12,
viewBox: "0 0 12 12",
"data-testid": "PinSmallIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M1.292 2.87a1 1 0 0 0 0 1.412l2.684 2.683.385 1.792a.5.5 0 0 0 .353.379.5.5 0 0 0 .49-.128l1.549-1.55 2.395 2.396a.5.5 0 0 0 .706-.706L7.459 6.753l1.549-1.55a.498.498 0 0 0-.254-.842l-1.789-.385-2.683-2.684a1 1 0 0 0-1.413 0zm6.362 2.275-.899-.193a1 1 0 0 1-.496-.27L3.576 1.998 1.998 3.577l2.684 2.683c.136.136.23.308.27.496l.193.899z",
clipRule: "evenodd"
}));
});
PinSmallIcon.displayName = "PinSmallIcon";
var PinSmallIcon$1 = PinSmallIcon;
var _excluded$2X = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2X);
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: ref
}, 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.99.99 0 0 0 .705.756 1 1 0 0 0 .98-.256l3.098-3.098 4.79 4.79a.998.998 0 1 0 1.412-1.412l-4.79-4.79 3.098-3.098a1 1 0 0 0 .291-.638 1 1 0 0 0-.253-.736 1 1 0 0 0-.545-.312l-3.578-.769-5.367-5.367a1.997 1.997 0 0 0-2.824 0zm12.723 4.552-1.797-.386a2 2 0 0 1-.993-.54L7.151 3.996 3.997 7.151l5.367 5.367c.272.272.46.617.54.993l.387 1.796z",
clipRule: "evenodd"
}));
});
PinIcon.displayName = "PinIcon";
var PinIcon$1 = PinIcon;
var _excluded$2W = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2W);
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": "PlayCircleOutlineIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2m0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16M9.8 8l6.4 4-6.4 4z"
}));
});
PlayCircleOutlineIcon.displayName = "PlayCircleOutlineIcon";
var PlayCircleOutlineIcon$1 = PlayCircleOutlineIcon;
var _excluded$2V = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2V);
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": "PlayIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M12 3a9 9 0 1 1 0 18 9 9 0 0 1 0-18m-2 6v6l5-3z"
}));
});
PlayIcon.displayName = "PlayIcon";
var PlayIcon$1 = PlayIcon;
var _excluded$2U = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2U);
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": "PlaySmallIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M9 17V7l8 5z"
}));
});
PlaySmallIcon.displayName = "PlaySmallIcon";
var PlaySmallIcon$1 = PlaySmallIcon;
var _excluded$2T = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2T);
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": "PriorityLowIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "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.5m0-13.5c.748 0 1.363.57 1.432 1.3l.006.169L13 14.75h-2l-.438-9.501a1.44 1.44 0 0 1 1.24-1.485l.168-.014z",
clipRule: "evenodd"
}));
});
PriorityLowIcon.displayName = "PriorityLowIcon";
var PriorityLowIcon$1 = PriorityLowIcon;
var _excluded$2S = ["gradient"];
/**
* @component ProjectIcon
* @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.
*
* A pencil (from PencilIcon) crossed at 45 degrees with a ruler, drawn as an
* outlined rectangle. The ruler sits behind the pencil, with a transparent
* break where the two cross.
*
* @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
* Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
*
* @example
* return (
* <ProjectIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <ProjectIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var ProjectIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2S);
var fillValue = gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)";
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": "ProjectIcon",
fill: fillValue,
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("mask", {
id: "project-icon-ruler-cut",
maskUnits: "userSpaceOnUse",
x: "0",
y: "0",
width: "24",
height: "24"
}, /*#__PURE__*/React__default["default"].createElement("rect", {
x: "0",
y: "0",
width: "24",
height: "24",
fill: "white"
}), /*#__PURE__*/React__default["default"].createElement("line", {
x1: "-2",
y1: "26",
x2: "26",
y2: "-2",
stroke: "black",
strokeWidth: "8.5"
})), /*#__PURE__*/React__default["default"].createElement("g", {
mask: "url(#project-icon-ruler-cut)"
}, /*#__PURE__*/React__default["default"].createElement("rect", {
transform: "rotate(45 12 12)",
x: "1.5",
y: "9.5",
width: "21",
height: "5",
rx: "1",
fill: "none",
stroke: fillValue,
strokeWidth: "2"
})), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "m14.06 9 .94.94L5.92 19H5v-.92zm3.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.94z"
}));
});
ProjectIcon.displayName = "ProjectIcon";
var ProjectIcon$1 = ProjectIcon;
var _excluded$2R = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2R);
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": "ProjectAddIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M4 4v5h5V4zm0-2h5a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2m0 13v5h5v-5zm0-2h5a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2m11-9v5h5V4zm4 10v3h3v2h-3v3h-2v-3h-3v-2h3v-3zm1-12a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-5a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z"
}));
});
ProjectAddIcon.displayName = "ProjectAddIcon";
var ProjectAddIcon$1 = ProjectAddIcon;
var _excluded$2Q = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2Q);
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": "ProjectSearchIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M17 13a4 4 0 0 1 3.446 6.032L22 21l-1 1-1.968-1.554A3.999 3.999 0 1 1 17 13m-8 0a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2zm0 2H4v5h5zm8 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4M9 2a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm11 0a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-5a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zM9 4H4v5h5zm11 0h-5v5h5z",
clipRule: "evenodd"
}));
});
ProjectSearchIcon.displayName = "ProjectSearchIcon";
var ProjectSearchIcon$1 = ProjectSearchIcon;
var _excluded$2P = ["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, ref) {
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,
viewBox: "0 0 24 24",
"data-testid": "ProjectStarIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M4 15v5h5v-5zm0-2h5a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2m11-9v5h5V4zm0-2h5a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-5a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2m0 13v5h5v-5zm0-2h5a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-5a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2",
clipRule: "evenodd"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M6.505 9.631 4.198 10.9a.43.43 0 0 1-.592-.193.48.48 0 0 1-.044-.29l.44-2.687-1.865-1.903a.474.474 0 0 1-.008-.649.43.43 0 0 1 .251-.133l2.578-.392 1.153-2.445a.43.43 0 0 1 .787 0L8.05 4.653l2.578.392c.24.036.406.269.371.52a.47.47 0 0 1-.128.262L9.006 7.73l.44 2.686a.456.456 0 0 1-.357.53.42.42 0 0 1-.278-.046z"
}));
});
ProjectStarIcon.displayName = "ProjectStarIcon";
var ProjectStarIcon$1 = ProjectStarIcon;
var _excluded$2O = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2O);
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": "ProjectTemplateAddIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M20 15v3h3v2h-3v3h-2v-3h-3v-2h3v-3zm0-7a2 2 0 0 1 2 2v3h-2v-3H10v10h3v2h-3a2 2 0 0 1-2-2V10a2 2 0 0 1 2-2zM7 5h10a2 2 0 0 1 1.995 1.85L19 7H7v12a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2m7-3a2 2 0 0 1 1.995 1.85L16 4H4v12a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z"
}));
});
ProjectTemplateAddIcon.displayName = "ProjectTemplateAddIcon";
var ProjectTemplateAddIcon$1 = ProjectTemplateAddIcon;
var _excluded$2N = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2N);
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": "ProjectTemplateConvertIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M20 4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8h2v8h14V6h-8V4zM8 1a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2zm8.37 10.121-1.906 1.93L17 15.585 15.586 17l-2.536-2.536-1.929 1.907v-5.25zM8 3v5H3V3z"
}));
});
ProjectTemplateConvertIcon.displayName = "ProjectTemplateConvertIcon";
var ProjectTemplateConvertIcon$1 = ProjectTemplateConvertIcon;
var _excluded$2M = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2M);
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": "ProjectTemplateIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M20 4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8h2v8h14V6h-8V4zm-8.464 6.121 2.535 2.536L16 10.75V16h-5.249l1.906-1.929-2.536-2.535zM8 1a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2zm0 2H3v5h5z"
}));
});
ProjectTemplateIcon.displayName = "ProjectTemplateIcon";
var ProjectTemplateIcon$1 = ProjectTemplateIcon;
var _excluded$2L = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2L);
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": "ProjectsIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M4 4v5h5V4zm0-2h5a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2m0 13v5h5v-5zm0-2h5a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2m11-9v5h5V4zm0-2h5a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-5a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2m0 13v5h5v-5zm0-2h5a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-5a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2"
}), /*#__PURE__*/React__default["default"].createElement("path", {
stroke: "#F4F5F7",
strokeWidth: 0.1,
d: "M.05.05h23.9v23.9H.05z",
opacity: 0.01
}));
});
ProjectsIcon.displayName = "ProjectsIcon";
var ProjectsIcon$1 = ProjectsIcon;
var _excluded$2K = ["gradient"];
/**
* @component PuzzleIcon
* @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 (
* <PuzzleIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <PuzzleIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var PuzzleIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2K);
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": "PuzzleIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M11.5 3A3.5 3.5 0 0 1 15 6.5h1.5a2 2 0 0 1 2 2V10a3.5 3.5 0 0 1 3.5 3.5l-.004.174A3.5 3.5 0 0 1 18.5 17v2a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-4.023h2a1.476 1.476 0 0 0 1.47-1.332l.007-.145A1.476 1.476 0 0 0 6 12.023H4V8.5a2 2 0 0 1 2-2h2a3.5 3.5 0 0 1 .905-2.349l.12-.126A3.5 3.5 0 0 1 11.5 3m0 2.023A1.476 1.476 0 0 0 10.023 6.5v2H6V10a3.5 3.5 0 0 1 3.5 3.5l-.004.174A3.5 3.5 0 0 1 6 17v2h10.5l.014-4.023H18.5a1.476 1.476 0 0 0 1.47-1.332l.007-.145a1.476 1.476 0 0 0-1.477-1.477h.16-2.146L16.5 8.5h-3.523v-2A1.476 1.476 0 0 0 11.5 5.023",
clipRule: "evenodd"
}));
});
PuzzleIcon.displayName = "PuzzleIcon";
var PuzzleIcon$1 = PuzzleIcon;
var _excluded$2J = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2J);
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": "RadioBlankIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2m0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16"
}));
});
RadioBlankIcon.displayName = "RadioBlankIcon";
var RadioBlankIcon$1 = RadioBlankIcon;
var _excluded$2I = ["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, ref) {
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: 16,
height: 16,
viewBox: "0 0 16 16",
"data-testid": "RadioButtonIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("g", {
fillRule: "evenodd"
}, /*#__PURE__*/React__default["default"].createElement("circle", {
cx: 8,
cy: 8,
r: 7.5,
stroke: "#5D2BFF"
}), /*#__PURE__*/React__default["default"].createElement("circle", {
cx: 8,
cy: 8,
r: 5
})));
});
RadioButtonIcon.displayName = "RadioButtonIcon";
var RadioButtonIcon$1 = RadioButtonIcon;
var _excluded$2H = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2H);
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": "RearangeIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M9 16a2 2 0 1 1 0 4 2 2 0 0 1 0-4m6 0a2 2 0 1 1 0 4 2 2 0 0 1 0-4m-6-6a2 2 0 1 1 0 4 2 2 0 0 1 0-4m6 0a2 2 0 1 1 0 4 2 2 0 0 1 0-4M9 4a2 2 0 1 1 0 4 2 2 0 0 1 0-4m6 0a2 2 0 1 1 0 4 2 2 0 0 1 0-4"
}));
});
RearangeIcon.displayName = "RearangeIcon";
var RearangeIcon$1 = RearangeIcon;
var _excluded$2G = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2G);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
xmlns: "http://www.w3.org/2000/svg",
width: 12,
height: 12,
viewBox: "0 0 12 12",
"data-testid": "RearrangeSmallIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M4 8a1 1 0 1 1 0 2 1 1 0 0 1 0-2m4 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2M4 5a1 1 0 1 1 0 2 1 1 0 0 1 0-2m4 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2M4 2a1 1 0 1 1 0 2 1 1 0 0 1 0-2m4 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2"
}));
});
RearrangeSmallIcon.displayName = "RearrangeSmallIcon";
var RearrangeSmallIcon$1 = RearrangeSmallIcon;
var _excluded$2F = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2F);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
xmlns: "http://www.w3.org/2000/svg",
width: 12,
height: 12,
viewBox: "0 0 12 12",
"data-testid": "RecurringCheckmarkSmallIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M1 5.874a5.002 5.002 0 0 0 8.743 3.442l-.78-.45 2.3-.982.3 2.482-.939-.542A6.002 6.002 0 0 1 .001 6.141zm6.93-1.177a.5.5 0 0 1 0 .707L5.975 7.39a.5.5 0 0 1-.707 0l-.971-.975a.5.5 0 0 1 .707-.708l.617.622 1.602-1.63a.5.5 0 0 1 .707 0M9 .804a6 6 0 0 1 3 5.052l-1.001.268.001-.043a5.002 5.002 0 0 0-8.743-3.398l.779.451-2.3.982-.298-2.482.938.54A6 6 0 0 1 9 .805"
}));
});
RecurringCheckmarkSmallIcon.displayName = "RecurringCheckmarkSmallIcon";
var RecurringCheckmarkSmallIcon$1 = RecurringCheckmarkSmallIcon;
var _excluded$2E = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2E);
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": "RecurringCheckmarkIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M5.014 12a6.94 6.94 0 0 0 1.826 4.73l.21.22a7 7 0 0 0 9.727.167l.173-.167-1.414-1.414 4.871-.63-.629 4.872-1.414-1.414a9 9 0 0 1-12.728 0 8.9 8.9 0 0 1-2.498-4.788A9 9 0 0 1 3 12.01h.006V12zm10.593-2.293a1 1 0 0 1 0 1.414l-3.657 3.657a1 1 0 0 1-1.414 0L8.707 12.95a1 1 0 0 1 1.414-1.414l1.12 1.12 2.951-2.949a1 1 0 0 1 1.415 0m-3.246-6.7c2.1.084 4.175.898 5.813 2.444l.19.185.225.234.096.104.118.133a8.86 8.86 0 0 1 2.04 4.216l.043.25q.107.661.113 1.332h-.006l.001.095h-2.008a6.96 6.96 0 0 0-1.245-4.005l-.186-.254-.094-.12a7 7 0 0 0-10.238-.737l-.173.166 1.414 1.414-4.871.63.629-4.872 1.414 1.414a8.98 8.98 0 0 1 6.725-2.629"
}));
});
RecurringCheckmarkIcon.displayName = "RecurringCheckmarkIcon";
var RecurringCheckmarkIcon$1 = RecurringCheckmarkIcon;
var _excluded$2D = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2D);
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: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M5.014 12a6.94 6.94 0 0 0 1.826 4.73l.21.22a7 7 0 0 0 9.727.167l.173-.167-1.414-1.414 4.871-.63-.629 4.872-1.414-1.414a9 9 0 0 1-12.728 0 8.9 8.9 0 0 1-2.498-4.789A9 9 0 0 1 3 12.01h.006V12zm7.347-8.993c2.1.084 4.175.898 5.813 2.444l.19.185.225.234.096.104.118.133a8.86 8.86 0 0 1 2.04 4.216l.043.25q.107.661.114 1.332h-.007l.001.095h-2.008a6.96 6.96 0 0 0-1.245-4.005l-.186-.254-.094-.12a7 7 0 0 0-10.238-.737l-.173.166 1.414 1.414-4.872.63.63-4.872 1.414 1.414a8.98 8.98 0 0 1 6.725-2.629",
clipRule: "evenodd"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M13 17h-2v-1H9v-2h4v-1h-3a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h1V7h2v1h2v2h-4v1h3a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1z"
}));
});
RecurringDollarIcon.displayName = "RecurringDollarIcon";
var RecurringDollarIcon$1 = RecurringDollarIcon;
var _excluded$2C = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2C);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
xmlns: "http://www.w3.org/2000/svg",
width: 12,
height: 12,
viewBox: "0 0 12 12",
"data-testid": "RecurringSmallIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "m9.182 2.818.113.117.107.119a4.43 4.43 0 0 1 1.02 2.107l.021.125q.053.331.057.666h-.004l.001.048H9.493a3.48 3.48 0 0 0-.715-2.13l-.047-.06a3.5 3.5 0 0 0-5.119-.369l-.087.084.707.707-2.436.315.315-2.436.707.707A4.49 4.49 0 0 1 6.18 1.504c1.05.041 2.088.449 2.907 1.222zM2.818 9.182a4.45 4.45 0 0 1-1.249-2.394 4.5 4.5 0 0 1-.069-.783h.003V6h1.004a3.47 3.47 0 0 0 .913 2.365l.105.11a3.5 3.5 0 0 0 4.863.084l.087-.084-.707-.707 2.436-.315-.315 2.436-.707-.707a4.5 4.5 0 0 1-6.364 0",
clipRule: "evenodd"
}));
});
RecurringSmallIcon.displayName = "RecurringSmallIcon";
var RecurringSmallIcon$1 = RecurringSmallIcon;
var _excluded$2B = ["gradient"];
/**
* @component ReminderIcon
* @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 (
* <ReminderIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <ReminderIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var ReminderIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2B);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
xmlns: "http://www.w3.org/2000/svg",
width: 18,
height: 18,
"data-testid": "ReminderIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M13.95 13.95h-3v-1.125h1.875V10.95h1.125z"
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M13.2 8.7a4.5 4.5 0 1 1 0 9 4.5 4.5 0 0 1 0-9m0 1.125a3.376 3.376 0 1 0 0 6.75 3.376 3.376 0 0 0 0-6.75",
clipRule: "evenodd"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M6 3h6V1.5h1.5V3H15a1.5 1.5 0 0 1 1.5 1.5v3H15V6H3v9h4.5v1.5H3A1.5 1.5 0 0 1 1.5 15V4.5A1.5 1.5 0 0 1 3 3h1.5V1.5H6z"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M6.75 9.75H4.5V7.5h2.25z"
}));
});
ReminderIcon.displayName = "ReminderIcon";
var ReminderIcon$1 = ReminderIcon;
var _excluded$2A = ["gradient"];
/**
* @component ReorderIcon
* @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 (
* <ReorderIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <ReorderIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var ReorderIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2A);
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": "ReorderIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M20 17a1 1 0 1 1 0 2H6a1 1 0 1 1 0-2zM10.314 12.157l-3.711 3.711-.017-2.71H3v-2h3.586l.016-2.714zM20 11a1 1 0 1 1 0 2h-7.5a1 1 0 1 1 0-2zM20 5a1 1 0 1 1 0 2H6a1 1 0 0 1 0-2z"
}));
});
ReorderIcon.displayName = "ReorderIcon";
var ReorderIcon$1 = ReorderIcon;
var _excluded$2z = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2z);
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": "ReportTimeIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M15 9a7 7 0 1 1 0 14 7 7 0 0 1 0-14m-3-9c1.235 0 2.29.758 2.752 1.828L14.82 2H19c1.05 0 1.918.82 1.994 1.851L21 4v5.292a9 9 0 0 0-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 0m3 11a5 5 0 1 0 0 10 5 5 0 0 0 0-10m1 2v1.999L19 15v2h-5v-4zM12 2c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1"
}));
});
ReportTimeIcon.displayName = "ReportTimeIcon";
var ReportTimeIcon$1 = ReportTimeIcon;
var _excluded$2y = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2y);
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": "ReportsIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M17 6v2H7V6H6v15h12V6zm0-2h1a2 2 0 0 1 2 2v15a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1V3h2q.504-3 3-3c2.496 0 2.664 1 3 3h2zM8 16h2v3H8zm3-3h2v6h-2zm3-3h2v9h-2zm-1-5V3.332C13 2.327 12.61 2 12 2s-1 .303-1 1.332V5H9v1h6V5z"
}), /*#__PURE__*/React__default["default"].createElement("path", {
stroke: "#F4F5F7",
strokeWidth: 0.1,
d: "M.05.05h23.9v23.9H.05z",
opacity: 0.01
}));
});
ReportsIcon.displayName = "ReportsIcon";
var ReportsIcon$1 = ReportsIcon;
var _excluded$2x = ["gradient"];
/**
* @component RobotIcon
* @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 (
* <RobotIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <RobotIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var RobotIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2x);
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": "RobotIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M9 11a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1M15 11a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1"
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M11.353 2.237a1 1 0 0 1 .81-.223l3 .5a1 1 0 0 1-.327 1.972L13 4.18V6h5c1.73 0 3 1.495 3 3.167v3.215l.552-.277a1 1 0 0 1 .895 1.79L21 14.618v3.215C21 19.505 19.73 21 18 21H6c-1.73 0-3-1.495-3-3.167v-3.215l-1.448-.723a1 1 0 0 1 .895-1.79l.553.277V9.167C3 7.495 4.27 6 6 6h5V3a1 1 0 0 1 .353-.763M6 8c-.479 0-1 .446-1 1.167v8.666C5 18.554 5.52 19 6 19h12c.478 0 1-.446 1-1.167V9.167C19 8.446 18.478 8 18 8z",
clipRule: "evenodd"
}));
});
RobotIcon.displayName = "RobotIcon";
var RobotIcon$1 = RobotIcon;
var _excluded$2w = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2w);
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: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M11.4 13.35H3v-3l1.828-2.284a13 13 0 0 1-.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.35v3zm.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.38zm5.978 2.4L9 17.55l-2.688-3zM9 15.75l1.152-1.2H7.848zM6 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.228m3 .722a1.2 1.2 0 1 1 0-2.4 1.2 1.2 0 0 1 0 2.4"
}));
});
RocketSmallIcon.displayName = "RocketSmallIcon";
var RocketSmallIcon$1 = RocketSmallIcon;
var _excluded$2v = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2v);
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": "RocketIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M15.2 17.8H4v-4l2.437-3.046A18 18 0 0 1 6.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.8v4zm1.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.2zm7.97 3.2L12 23.4l-3.585-4zM12 21l1.536-1.6h-3.072zM8 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.594m4 .963a1.6 1.6 0 1 1 0-3.2 1.6 1.6 0 0 1 0 3.2"
}));
});
RocketIcon.displayName = "RocketIcon";
var RocketIcon$1 = RocketIcon;
var _excluded$2u = ["gradient"];
/**
* @component RoundedRectangleIcon
* @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 (
* <RoundedRectangleIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <RoundedRectangleIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var RoundedRectangleIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2u);
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": "RoundedRectangleIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
stroke: "var(--color-theme-600)",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
d: "M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2",
style: {
fill: "none"
}
}));
});
RoundedRectangleIcon.displayName = "RoundedRectangleIcon";
var RoundedRectangleIcon$1 = RoundedRectangleIcon;
var _excluded$2t = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2t);
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": "SaveIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M17 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V7zm2 16H5V5h11.17L19 7.83zm-7-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3M7 7h8v2H7z",
clipRule: "evenodd"
}));
});
SaveIcon.displayName = "SaveIcon";
var SaveIcon$1 = SaveIcon;
var _excluded$2s = ["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, ref) {
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: 32,
height: 32,
viewBox: "0 0 32 32",
"data-testid": "SearchLargeIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M14 4c5.523 0 10 4.477 10 10 0 2.31-.783 4.436-2.098 6.129q.132.06.248.15l.126.111 5.334 5.334a1.333 1.333 0 0 1-1.76 1.996l-.126-.11-5.334-5.334a1.3 1.3 0 0 1-.263-.373A9.95 9.95 0 0 1 14 24C8.477 24 4 19.523 4 14S8.477 4 14 4m0 2.667a7.333 7.333 0 1 0 0 14.666 7.333 7.333 0 0 0 0-14.666",
clipRule: "evenodd"
}));
});
SearchLargeIcon.displayName = "SearchLargeIcon";
var SearchLargeIcon$1 = SearchLargeIcon;
var _excluded$2r = ["gradient"];
/**
* @component SearchPlusIcon
* @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 (
* <SearchPlusIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <SearchPlusIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var SearchPlusIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2r);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
xmlns: "http://www.w3.org/2000/svg",
width: 24,
height: 24,
"data-testid": "SearchPlusIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M10.5 3a7.5 7.5 0 0 1 5.927 12.097q.098.044.186.113l.094.083 4 4a1 1 0 0 1-1.32 1.497l-.094-.083-4-4a1 1 0 0 1-.197-.28A7.5 7.5 0 1 1 10.5 3m0 2a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11",
clipRule: "evenodd"
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M7.592 9.973h2.38V7.591a.595.595 0 0 1 1.191 0v2.38h2.381a.595.595 0 1 1 0 1.191h-2.38v2.381a.595.595 0 1 1-1.191 0l-.001-2.38h-2.38a.595.595 0 1 1 0-1.191",
clipRule: "evenodd"
}));
});
SearchPlusIcon.displayName = "SearchPlusIcon";
var SearchPlusIcon$1 = SearchPlusIcon;
var _excluded$2q = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2q);
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": "SearchIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M16.717 15.708a6 6 0 1 0-1.07 1.056l.602-.46zm1.572 1.238 2.883 2.882a1 1 0 0 1-1.415 1.415l-2.891-2.892a8 8 0 1 1 1.423-1.405"
}));
});
SearchIcon.displayName = "SearchIcon";
var SearchIcon$1 = SearchIcon;
var _excluded$2p = ["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, ref) {
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": "SendBlankIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M1.241 1.405A2 2 0 0 1 3.812.53l.14.07 17.801 9.641a2 2 0 0 1 .135 3.438l-.135.08-17.8 9.642a2 2 0 0 1-2.948-1.61L1 21.642V15l6-3-6-3V2.358a2 2 0 0 1 .241-.953M3 2.358v5.406L11.472 12 3 16.235v5.406L20.799 12z"
}));
});
SendBlankIcon.displayName = "SendBlankIcon";
var SendBlankIcon$1 = SendBlankIcon;
var _excluded$2o = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2o);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
xmlns: "http://www.w3.org/2000/svg",
width: 24,
height: 24,
"data-testid": "SendFilledIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "m3.953 23.4 17.8-9.641a2 2 0 0 0 0-3.518L3.953.6A2 2 0 0 0 1 2.358V9l8 3-8 3v6.642a2 2 0 0 0 2.953 1.759z"
}));
});
SendFilledIcon.displayName = "SendFilledIcon";
var SendFilledIcon$1 = SendFilledIcon;
var _excluded$2n = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2n);
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": "SettingsIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M4.14 16H3a1 1 0 0 0 0 2h1.14c.45 1.72 2 3 3.86 3s3.41-1.28 3.86-3H21a1 1 0 0 0 0-2h-9.14c-.45-1.72-2-3-3.86-3s-3.41 1.28-3.86 3M6 17c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2M16 3c-1.86 0-3.41 1.28-3.86 3H3a1 1 0 1 0 0 2h9.14c.45 1.72 2 3 3.86 3s3.41-1.28 3.86-3H21a1 1 0 0 0 0-2h-1.14c-.45-1.72-2-3-3.86-3m0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2"
}));
});
SettingsIcon.displayName = "SettingsIcon";
var SettingsIcon$1 = SettingsIcon;
var _excluded$2m = ["gradient"];
/**
* @component ShapesIcon
* @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 (
* <ShapesIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <ShapesIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var ShapesIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2m);
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": "ShapesIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M10.11 16.47a7 7 0 1 1 6.36-6.36l-1.99-.17a5 5 0 1 0-4.54 4.54ZM14.5 12h4a2.5 2.5 0 0 1 2.5 2.5v4a2.5 2.5 0 0 1-2.5 2.5h-4a2.5 2.5 0 0 1-2.5-2.5v-4a2.5 2.5 0 0 1 2.5-2.5m0 2h4a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5h-4a.5.5 0 0 1-.5-.5v-4a.5.5 0 0 1 .5-.5"
}));
});
ShapesIcon.displayName = "ShapesIcon";
var ShapesIcon$1 = ShapesIcon;
var _excluded$2l = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2l);
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": "ShieldIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M11.873 4.063q.127-.015.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 0 1-1.252 0L6.633 16.08a1.03 1.03 0 0 1-.393-.687L5.061 5.951a1.027 1.027 0 0 1 .891-1.147zm.509-2.04a3 3 0 0 0-.764 0l-5.92.742a3.08 3.08 0 0 0-2.674 3.441l1.179 9.442c.102.817.526 1.56 1.178 2.061l4.741 3.652a3.08 3.08 0 0 0 3.756 0l4.741-3.652a3.08 3.08 0 0 0 1.178-2.061l1.179-9.442a3.08 3.08 0 0 0-2.674-3.441zm3.825 8.684a1 1 0 1 0-1.414-1.414l-3.71 3.71-1.302-1.628a1 1 0 1 0-1.562 1.25l1.302 1.627a2 2 0 0 0 2.976.165z",
clipRule: "evenodd"
}));
});
ShieldIcon.displayName = "ShieldIcon";
var ShieldIcon$1 = ShieldIcon;
var _excluded$2k = ["gradient"];
/**
* @component SidebarLeftIcon
* @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 (
* <SidebarLeftIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <SidebarLeftIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var SidebarLeftIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2k);
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": "SidebarLeftIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M12 5a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm-5 2h4v10h-4z",
clipRule: "evenodd"
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M2 4a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2zm18 0H4v16h16z",
clipRule: "evenodd"
}));
});
SidebarLeftIcon.displayName = "SidebarLeftIcon";
var SidebarLeftIcon$1 = SidebarLeftIcon;
var _excluded$2j = ["gradient"];
/**
* @component SidebarRightIcon
* @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 (
* <SidebarRightIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <SidebarRightIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var SidebarRightIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2j);
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": "SidebarRightIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M12 5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1zm5 2h-4v10h4z",
clipRule: "evenodd"
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M2 4a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2zm18 0H4v16h16z",
clipRule: "evenodd"
}));
});
SidebarRightIcon.displayName = "SidebarRightIcon";
var SidebarRightIcon$1 = SidebarRightIcon;
var _excluded$2i = ["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, ref) {
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,
viewBox: "0 0 24 24",
"data-testid": "SortGeneralIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M17 6v11h3l-4 4-4-4h3V6zM8 3l4 4H9v11H7V7H4z"
}));
});
SortGeneralIcon.displayName = "SortGeneralIcon";
var SortGeneralIcon$1 = SortGeneralIcon;
var _excluded$2h = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2h);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
xmlns: "http://www.w3.org/2000/svg",
width: 10,
height: 10,
viewBox: "0 0 10 10",
"data-testid": "SortIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M10 8v2H0V8zM7 4v2H0V4zM4 0v2H0V0z"
}));
});
SortIcon.displayName = "SortIcon";
var SortIcon$1 = SortIcon;
var _excluded$2g = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2g);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
xmlns: "http://www.w3.org/2000/svg",
width: 20,
height: 18,
"data-testid": "SortListIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "m16 0 4 4h-3v10h3l-4 4-4-4h3V4h-3zM9 13a1 1 0 1 1 0 2H1a1 1 0 1 1 0-2zm3-5a1 1 0 1 1 0 2H4a1 1 0 0 1 0-2zM9 3a1 1 0 0 1 0 2H1a1 1 0 0 1 0-2z",
clipRule: "evenodd"
}));
});
SortListIcon.displayName = "SortListIcon";
var SortListIcon$1 = SortListIcon;
var _excluded$2f = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2f);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
xmlns: "http://www.w3.org/2000/svg",
width: 10,
height: 10,
viewBox: "0 0 10 10",
"data-testid": "SortSmallIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M10 1v2H0V1zM7 4v2H0V4zM4 7v2H0V7z",
clipRule: "evenodd"
}));
});
SortSmallIcon.displayName = "SortSmallIcon";
var SortSmallIcon$1 = SortSmallIcon;
var _excluded$2e = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2e);
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: ref
}, 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 0 0 3.574 5.643 15.2 15.2 0 0 0 5.428 3.498l.212.078c.231.082.232.44 0 .522l-.212.077a15.2 15.2 0 0 0-5.428 3.497 15.3 15.3 0 0 0-3.363 5.081l-.132.346-.077.212-.019.041c-.1.177-.385.177-.485 0l-.019-.04-.078-.213-.134-.346a15.3 15.3 0 0 0-3.365-5.08 15.3 15.3 0 0 0-5.284-3.446l-.358-.13c-.232-.082-.232-.443 0-.524a15.2 15.2 0 0 0 5.642-3.573 15.2 15.2 0 0 0 3.574-5.643m.262 4.017a17.4 17.4 0 0 1-2.421 3.04A17.3 17.3 0 0 1 6.415 13a17.4 17.4 0 0 1 3.041 2.424 17.4 17.4 0 0 1 2.423 3.04 17.3 17.3 0 0 1 2.42-3.04 17.4 17.4 0 0 1 3.04-2.422 17.4 17.4 0 0 1-3.04-2.422 17.4 17.4 0 0 1-2.421-3.04",
clipRule: "evenodd"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M19.707 2.103c.037-.094.19-.094.226 0A4.2 4.2 0 0 0 22.31 4.48c.094.037.094.19 0 .227a4.2 4.2 0 0 0-2.377 2.376c-.036.094-.189.094-.225 0a4.2 4.2 0 0 0-2.377-2.376c-.094-.037-.094-.19 0-.227a4.19 4.19 0 0 0 2.376-2.377"
}));
});
SparkIcon.displayName = "SparkIcon";
var SparkIcon$1 = SparkIcon;
var _excluded$2d = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2d);
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": "StarOutlineIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M12.706 2.103a1 1 0 0 1 .454.455l2.63 5.329 5.881.854a1 1 0 0 1 .554 1.706l-4.255 4.148 1.005 5.857a1 1 0 0 1-1.451 1.054l-5.26-2.765-5.26 2.765a1 1 0 0 1-1.451-1.054l1.004-5.857-4.255-4.148a1 1 0 0 1 .554-1.706l5.881-.854 2.63-5.33a1 1 0 0 1 1.34-.454m1.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.468z"
}));
});
StarOutlineIcon.displayName = "StarOutlineIcon";
var StarOutlineIcon$1 = StarOutlineIcon;
var _excluded$2c = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2c);
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": "StarIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "nonzero",
d: "m12.264 18.74-5.26 2.766a1 1 0 0 1-1.451-1.054l1.004-5.857-4.255-4.148a1 1 0 0 1 .554-1.706l5.881-.854 2.63-5.33a1 1 0 0 1 1.793 0l2.63 5.33 5.881.854a1 1 0 0 1 .554 1.706l-4.255 4.148 1.005 5.857a1 1 0 0 1-1.451 1.054z"
}));
});
StarIcon.displayName = "StarIcon";
var StarIcon$1 = StarIcon;
var _excluded$2b = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2b);
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": "StatusIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2m0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16",
clipRule: "evenodd"
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M10.579 6.003a1 1 0 0 1 .875.696l2.3 7.285 1.372-2.47A1 1 0 0 1 16 11h2a1 1 0 1 1 0 2h-1.412l-2.214 3.986a1 1 0 0 1-1.828-.185L10.29 9.656l-1.396 2.791A1 1 0 0 1 8 13H6a1 1 0 1 1 0-2h1.382l2.224-4.447a1 1 0 0 1 .973-.55",
clipRule: "evenodd"
}));
});
StatusIcon.displayName = "StatusIcon";
var StatusIcon$1 = StatusIcon;
var _excluded$2a = ["gradient"];
/**
* @component StickyIcon
* @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 (
* <StickyIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <StickyIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var StickyIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$2a);
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": "StickyIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M3 6.95a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4v6.087a4 4 0 0 1-1.161 2.819l-3.884 3.912a4 4 0 0 1-2.84 1.182H7a4 4 0 0 1-4-4z",
style: {
fill: "#ffcc6b"
}
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M17.031 13.95h2a2 2 0 0 0 1.992-1.818l.008-2.651v2.469q0 .092-.008.182l-.003.866a4 4 0 0 1-1.144 2.789L15.99 19.75a4 4 0 0 1-2.856 1.2H12.03a2 2 0 0 0 2-2v-2a3 3 0 0 1 3.001-3",
style: {
fill: "#c49cb6"
}
}));
});
StickyIcon.displayName = "StickyIcon";
var StickyIcon$1 = StickyIcon;
var _excluded$29 = ["gradient"];
/**
* @component StopIcon
* @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 (
* <StopIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <StopIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var StopIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$29);
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": "StopIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M12 1.5a10.5 10.5 0 1 0 0 21 10.5 10.5 0 0 0 0-21M16.5 15a1.5 1.5 0 0 1-1.5 1.5H9A1.5 1.5 0 0 1 7.5 15V9A1.5 1.5 0 0 1 9 7.5h6A1.5 1.5 0 0 1 16.5 9z"
}));
});
StopIcon.displayName = "StopIcon";
var StopIcon$1 = StopIcon;
var _excluded$28 = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$28);
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: ref
}, 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 1 1 0 13.333A6.667 6.667 0 0 1 8 1.333m0 1.334a5.333 5.333 0 1 0 0 10.666A5.333 5.333 0 0 0 8 2.667M8.666 4v4.667H7.333V4zm4.39-3.886 2.83 2.829-.943.942-2.829-2.828.943-.943Z",
clipRule: "evenodd"
}));
});
StopwatchIcon.displayName = "StopwatchIcon";
var StopwatchIcon$1 = StopwatchIcon;
var _excluded$27 = ["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, ref) {
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: 22,
height: 22,
viewBox: "0 0 22 22",
"data-testid": "SunIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M11 0a1 1 0 0 1 1 1v1.818a1 1 0 1 1-2 0V1a1 1 0 0 1 1-1"
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M5 11a6 6 0 1 1 12 0 6 6 0 0 1-12 0m6-4a4 4 0 1 0 0 8 4 4 0 0 0 0-8",
clipRule: "evenodd"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M12 19.182a1 1 0 1 0-2 0V21a1 1 0 1 0 2 0zM3.22 3.22a1 1 0 0 1 1.414 0l1.291 1.291a1 1 0 1 1-1.414 1.414l-1.29-1.29a1 1 0 0 1 0-1.415M17.489 16.075a1 1 0 0 0-1.414 1.414l1.29 1.29a1 1 0 0 0 1.415-1.413zM0 11a1 1 0 0 1 1-1h1.818a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1M19.182 10a1 1 0 1 0 0 2H21a1 1 0 1 0 0-2zM5.925 16.075a1 1 0 0 1 0 1.414l-1.29 1.29a1 1 0 0 1-1.415-1.413l1.291-1.291a1 1 0 0 1 1.414 0M18.78 4.634a1 1 0 0 0-1.414-1.414l-1.291 1.291a1 1 0 0 0 1.414 1.414z"
}));
});
SunIcon.displayName = "SunIcon";
var SunIcon$1 = SunIcon;
var _excluded$26 = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$26);
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": "SystemSettingsIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M10.75 2a2 2 0 0 0-2 2v.154l-.029-.029a2 2 0 0 0-2.828 0L4.125 5.893a2 2 0 0 0 0 2.828l.029.029H4a2 2 0 0 0-2 2v2.5a2 2 0 0 0 2 2h.314l-.189.189a2 2 0 0 0 0 2.828l1.768 1.768a2 2 0 0 0 2.828 0l.029-.029A2 2 0 0 0 10.748 22h2.502a2 2 0 0 0 2-2v-.154l.189.189a2 2 0 0 0 2.828 0l1.768-1.768a2 2 0 0 0 0-2.828l-.189-.189H20a2 2 0 0 0 2-2v-2.502a2 2 0 0 0-1.994-1.998l.029-.029a2 2 0 0 0 0-2.828l-1.768-1.768a2 2 0 0 0-2.828 0l-.189.189V4a2 2 0 0 0-2-2zm0 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.414zM10 12a2 2 0 1 1 4 0 2 2 0 0 1-4 0m2-4a4 4 0 1 0 0 8 4 4 0 0 0 0-8",
clipRule: "evenodd"
}));
});
SystemSettingsIcon.displayName = "SystemSettingsIcon";
var SystemSettingsIcon$1 = SystemSettingsIcon;
var _excluded$25 = ["gradient"];
/**
* @component TaskIcon
* @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 (
* <TaskIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <TaskIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var TaskIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$25);
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": "TaskIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2m0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16m3.607 5.707a1 1 0 0 1 0 1.414l-3.657 3.657a1 1 0 0 1-1.414 0L8.707 12.95a1 1 0 0 1 1.414-1.414l1.12 1.12 2.951-2.949a1 1 0 0 1 1.415 0"
}));
});
TaskIcon.displayName = "TaskIcon";
var TaskIcon$1 = TaskIcon;
var _excluded$24 = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$24);
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": "TaskAddIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M12 2c5.523 0 10 4.477 10 10h-2a8 8 0 1 0-8 8v2C6.477 22 2 17.523 2 12S6.477 2 12 2m7 12v3h3v2h-3v3h-2v-3.001L14 19v-2l3-.001V14zm-3.393-4.293a1 1 0 0 1 0 1.414l-3.657 3.657a1 1 0 0 1-1.414 0L8.707 12.95a1 1 0 0 1 1.414-1.414l1.12 1.12 2.951-2.949a1 1 0 0 1 1.415 0"
}));
});
TaskAddIcon.displayName = "TaskAddIcon";
var TaskAddIcon$1 = TaskAddIcon;
var _excluded$23 = ["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, ref) {
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: 24,
height: 24,
viewBox: "0 0 24 24",
"data-testid": "TaskListAddIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M20 14v3h3v2h-3v3h-2v-3h-3v-2h3v-3zm-8 4a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2zm0-4a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2zm7-4a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2zm0-6a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1z"
}));
});
TaskListAddIcon.displayName = "TaskListAddIcon";
var TaskListAddIcon$1 = TaskListAddIcon;
var _excluded$22 = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$22);
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": "TaskListCompleteIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M11 18a1 1 0 1 1 0 2H5a1 1 0 1 1 0-2zm0-4a1 1 0 1 1 0 2H5a1 1 0 1 1 0-2zm8-4a1 1 0 1 1 0 2H5a1 1 0 1 1 0-2zm0-6a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1zm3.192 11.293a1 1 0 0 1 0 1.414l-3.657 3.657a1 1 0 0 1-1.414 0l-1.828-1.828a1 1 0 0 1 1.414-1.415l1.12 1.121 2.951-2.95a1 1 0 0 1 1.414 0Z",
clipRule: "evenodd"
}));
});
TaskListCompleteIcon.displayName = "TaskListCompleteIcon";
var TaskListCompleteIcon$1 = TaskListCompleteIcon;
var _excluded$21 = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$21);
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": "TaskListIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M5 4h14a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1m0 14h14a1 1 0 1 1 0 2H5a1 1 0 1 1 0-2m0-4h14a1 1 0 1 1 0 2H5a1 1 0 1 1 0-2m0-4h14a1 1 0 1 1 0 2H5a1 1 0 1 1 0-2",
clipRule: "evenodd"
}));
});
TaskListIcon.displayName = "TaskListIcon";
var TaskListIcon$1 = TaskListIcon;
var _excluded$20 = ["gradient"];
/**
* @component TextAlignCenterIcon
* @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 (
* <TextAlignCenterIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <TextAlignCenterIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var TextAlignCenterIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$20);
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": "TextAlignCenterIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M4 4h16a1 1 0 0 1 1 1a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1a1 1 0 0 1 1-1zM7.5 9h9a1 1 0 0 1 1 1a1 1 0 0 1-1 1h-9a1 1 0 0 1-1-1a1 1 0 0 1 1-1zM4 14h16a1 1 0 0 1 1 1a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1a1 1 0 0 1 1-1zM7.5 19h9a1 1 0 0 1 1 1a1 1 0 0 1-1 1h-9a1 1 0 0 1-1-1a1 1 0 0 1 1-1z",
clipRule: "evenodd"
}));
});
TextAlignCenterIcon.displayName = "TextAlignCenterIcon";
var TextAlignCenterIcon$1 = TextAlignCenterIcon;
var _excluded$1$ = ["gradient"];
/**
* @component TextAlignJustifyIcon
* @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 (
* <TextAlignJustifyIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <TextAlignJustifyIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var TextAlignJustifyIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$1$);
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": "TextAlignJustifyIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M4 4h16a1 1 0 0 1 1 1a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1a1 1 0 0 1 1-1zM4 9h16a1 1 0 0 1 1 1a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1a1 1 0 0 1 1-1zM4 14h16a1 1 0 0 1 1 1a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1a1 1 0 0 1 1-1zM4 19h9a1 1 0 0 1 1 1a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1a1 1 0 0 1 1-1z",
clipRule: "evenodd"
}));
});
TextAlignJustifyIcon.displayName = "TextAlignJustifyIcon";
var TextAlignJustifyIcon$1 = TextAlignJustifyIcon;
var _excluded$1_ = ["gradient"];
/**
* @component TextAlignLeftIcon
* @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 (
* <TextAlignLeftIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <TextAlignLeftIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var TextAlignLeftIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$1_);
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": "TextAlignLeftIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M4 4h16a1 1 0 0 1 1 1a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1a1 1 0 0 1 1-1zM4 9h9a1 1 0 0 1 1 1a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1a1 1 0 0 1 1-1zM4 14h16a1 1 0 0 1 1 1a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1a1 1 0 0 1 1-1zM4 19h9a1 1 0 0 1 1 1a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1a1 1 0 0 1 1-1z",
clipRule: "evenodd"
}));
});
TextAlignLeftIcon.displayName = "TextAlignLeftIcon";
var TextAlignLeftIcon$1 = TextAlignLeftIcon;
var _excluded$1Z = ["gradient"];
/**
* @component TextAlignRightIcon
* @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 (
* <TextAlignRightIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <TextAlignRightIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var TextAlignRightIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$1Z);
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": "TextAlignRightIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M4 4h16a1 1 0 0 1 1 1a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1a1 1 0 0 1 1-1zM11 9h9a1 1 0 0 1 1 1a1 1 0 0 1-1 1h-9a1 1 0 0 1-1-1a1 1 0 0 1 1-1zM4 14h16a1 1 0 0 1 1 1a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1a1 1 0 0 1 1-1zM11 19h9a1 1 0 0 1 1 1a1 1 0 0 1-1 1h-9a1 1 0 0 1-1-1a1 1 0 0 1 1-1z",
clipRule: "evenodd"
}));
});
TextAlignRightIcon.displayName = "TextAlignRightIcon";
var TextAlignRightIcon$1 = TextAlignRightIcon;
var _excluded$1Y = ["gradient"];
/**
* @component TextStyleBoldIcon
* @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 (
* <TextStyleBoldIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <TextStyleBoldIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var TextStyleBoldIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$1Y);
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": "TextStyleBoldIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M19.53 15.65Q19.53 16.94 19.02 17.86Q18.5 18.79 17.6 19.37Q16.7 19.96 15.5 20.23Q14.31 20.5 12.97 20.5H4.47V3.5H12.25Q13.76 3.5 14.93 3.76Q16.11 4.02 16.92 4.55Q17.72 5.08 18.14 5.88Q18.56 6.69 18.56 7.77Q18.56 9.22 17.76 10.21Q16.95 11.21 15.31 11.56Q17.38 11.8 18.45 12.86Q19.53 13.91 19.53 15.65ZM14.97 8.25Q14.97 7.11 14.24 6.62Q13.51 6.14 12.08 6.14H8.02V10.35H12.1Q13.61 10.35 14.29 9.83Q14.97 9.3 14.97 8.25ZM15.96 15.37Q15.96 14.7 15.7 14.24Q15.43 13.78 14.97 13.5Q14.5 13.22 13.88 13.1Q13.26 12.98 12.54 12.98H8.02V17.86H12.67Q13.37 17.86 13.97 17.74Q14.58 17.63 15.02 17.34Q15.46 17.06 15.71 16.58Q15.96 16.1 15.96 15.37Z",
clipRule: "evenodd"
}));
});
TextStyleBoldIcon.displayName = "TextStyleBoldIcon";
var TextStyleBoldIcon$1 = TextStyleBoldIcon;
var _excluded$1X = ["gradient"];
/**
* @component TextStyleItalicIcon
* @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 (
* <TextStyleItalicIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <TextStyleItalicIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var TextStyleItalicIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$1X);
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": "TextStyleItalicIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M8.57 20.5 11.87 3.5H15.43L12.12 20.5Z",
clipRule: "evenodd"
}));
});
TextStyleItalicIcon.displayName = "TextStyleItalicIcon";
var TextStyleItalicIcon$1 = TextStyleItalicIcon;
var _excluded$1W = ["gradient"];
/**
* @component TextStyleStrikeIcon
* @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 (
* <TextStyleStrikeIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <TextStyleStrikeIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var TextStyleStrikeIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$1W);
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": "TextStyleStrikeIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M19.19 15.51Q19.19 16.63 18.78 17.55Q18.37 18.47 17.51 19.13Q16.65 19.78 15.31 20.14Q13.96 20.5 12.11 20.5Q10.47 20.5 9.22 20.21Q7.96 19.91 7.06 19.34Q6.17 18.76 5.61 17.91Q5.05 17.06 4.81 15.96L8.15 15.41Q8.29 15.96 8.56 16.42Q8.83 16.88 9.3 17.21Q9.78 17.55 10.49 17.73Q11.2 17.91 12.21 17.91Q13.96 17.91 14.9 17.38Q15.83 16.84 15.83 15.7Q15.83 15.02 15.45 14.59Q15.08 14.16 14.46 13.88Q13.83 13.59 13.03 13.41Q12.22 13.22 11.34 13.04Q10.63 12.88 9.93 12.7Q9.23 12.53 8.59 12.28Q7.95 12.04 7.4 11.7Q6.85 11.36 6.44 10.86Q6.04 10.36 5.81 9.69Q5.58 9.02 5.58 8.12Q5.58 6.89 6.07 6.01Q6.57 5.13 7.44 4.57Q8.31 4.02 9.52 3.76Q10.73 3.5 12.16 3.5Q13.78 3.5 14.93 3.75Q16.09 4 16.87 4.52Q17.65 5.04 18.1 5.82Q18.55 6.6 18.76 7.64L15.41 8.1Q15.15 7.03 14.36 6.49Q13.57 5.95 12.09 5.95Q11.17 5.95 10.57 6.11Q9.97 6.27 9.61 6.54Q9.25 6.81 9.1 7.16Q8.95 7.52 8.95 7.92Q8.95 8.53 9.24 8.92Q9.53 9.32 10.06 9.58Q10.59 9.84 11.32 10.02Q12.05 10.21 12.93 10.39Q13.71 10.56 14.47 10.74Q15.23 10.92 15.92 11.17Q16.61 11.41 17.21 11.77Q17.81 12.12 18.25 12.63Q18.69 13.14 18.94 13.84Q19.19 14.54 19.19 15.51Z",
clipRule: "evenodd"
}), /*#__PURE__*/React__default["default"].createElement("rect", {
x: "3",
y: "11",
width: "18",
height: "2",
rx: "1"
}));
});
TextStyleStrikeIcon.displayName = "TextStyleStrikeIcon";
var TextStyleStrikeIcon$1 = TextStyleStrikeIcon;
var _excluded$1V = ["gradient"];
/**
* @component TextStyleUnderlineIcon
* @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 (
* <TextStyleUnderlineIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <TextStyleUnderlineIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var TextStyleUnderlineIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$1V);
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": "TextStyleUnderlineIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M11.84 18Q10.45 18 9.3 17.67Q8.14 17.34 7.31 16.64Q6.47 15.94 6.01 14.85Q5.54 13.76 5.54 12.25V3H8.64V12.01Q8.64 12.94 8.87 13.62Q9.1 14.29 9.53 14.73Q9.96 15.17 10.57 15.37Q11.18 15.58 11.92 15.58Q12.68 15.58 13.31 15.36Q13.95 15.14 14.4 14.69Q14.86 14.24 15.11 13.55Q15.36 12.86 15.36 11.9V3H18.46V12.09Q18.46 13.61 17.97 14.72Q17.47 15.84 16.59 16.57Q15.71 17.3 14.5 17.65Q13.29 18 11.84 18Z",
clipRule: "evenodd"
}), /*#__PURE__*/React__default["default"].createElement("rect", {
x: "4",
y: "20",
width: "16",
height: "2",
rx: "1"
}));
});
TextStyleUnderlineIcon.displayName = "TextStyleUnderlineIcon";
var TextStyleUnderlineIcon$1 = TextStyleUnderlineIcon;
var _excluded$1U = ["gradient"];
/**
* @component TextIcon
* @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 (
* <TextIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <TextIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var TextIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$1U);
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": "TextIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "m2.656 19.296 1.353-3.999h5.64l1.353 4h2.43L8.09 4.5H5.61L.267 19.296zm6.408-5.844h-4.47L6.798 6.96h.062zm8.89 6.029c1.416 0 2.78-.759 3.405-1.959h.051v1.774h2.123v-7.434c0-2.163-1.672-3.548-4.286-3.548-2.666 0-4.328 1.436-4.45 3.384h2.091c.195-.964.995-1.579 2.277-1.579 1.353 0 2.163.718 2.163 1.918v.83l-2.953.174c-2.563.144-4.01 1.303-4.01 3.19 0 1.938 1.477 3.25 3.59 3.25m.616-1.754c-1.19 0-1.969-.615-1.969-1.558 0-.923.749-1.507 2.071-1.6l2.656-.164v.851c0 1.405-1.21 2.471-2.758 2.471",
clipRule: "evenodd"
}));
});
TextIcon.displayName = "TextIcon";
var TextIcon$1 = TextIcon;
var _excluded$1T = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$1T);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
xmlns: "http://www.w3.org/2000/svg",
width: 14,
height: 14,
viewBox: "0 0 14 14",
"data-testid": "ThumbUpOutlineIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
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.803a4 4 0 0 1-.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.47 1.47 0 0 1-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.3 1.3 0 0 0 .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.71m-5.505 6H1.529a.79.79 0 0 0-.79.79v5.064c0 .437.354.79.79.79h1.58a.79.79 0 0 0 .791-.79V7.5a.79.79 0 0 0-.79-.79"
}));
});
ThumbUpOutlineIcon.displayName = "ThumbUpOutlineIcon";
var ThumbUpOutlineIcon$1 = ThumbUpOutlineIcon;
var _excluded$1S = ["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, ref) {
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": "TrashIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "m8 4 1-2h6l1 2h4v2h-1v13a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6H4V4zm3 2v13h2V6zM7 6v13h2V6zm10 0h-2v13h2z"
}), /*#__PURE__*/React__default["default"].createElement("path", {
stroke: "#F4F5F7",
strokeWidth: 0.1,
d: "M.05.05h23.9v23.9H.05z",
opacity: 0.01
}));
});
TrashIcon.displayName = "TrashIcon";
var TrashIcon$1 = TrashIcon;
var _excluded$1R = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$1R);
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": "TreeDotsIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "nonzero",
d: "M6 10a2 2 0 1 1 0 4 2 2 0 0 1 0-4m6 0a2 2 0 1 1 0 4 2 2 0 0 1 0-4m6 0a2 2 0 1 1 0 4 2 2 0 0 1 0-4"
}));
});
TreeDotsIcon.displayName = "TreeDotsIcon";
var TreeDotsIcon$1 = TreeDotsIcon;
var _excluded$1Q = ["gradient"];
/**
* @component TriangleIcon
* @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 (
* <TriangleIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <TriangleIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var TriangleIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$1Q);
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": "TriangleIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
stroke: "var(--color-theme-600)",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
d: "M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0",
style: {
fill: "none"
}
}));
});
TriangleIcon.displayName = "TriangleIcon";
var TriangleIcon$1 = TriangleIcon;
var _excluded$1P = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$1P);
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": "UploadIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M6 18v-4h2v1.999h8V14h2v4zm6-14 4.95 4.95-1.414 1.414L13 7.829V14h-2V7.827l-2.536 2.537L7.05 8.95z"
}));
});
UploadIcon.displayName = "UploadIcon";
var UploadIcon$1 = UploadIcon;
var _excluded$1O = ["gradient"];
/**
* @component ViewCombinedIcon
* @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 (
* <ViewCombinedIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
* )
*
* @example
* return (
* <ViewCombinedIcon className="mr-2" />
* )
*
* @see
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
* @see
* https://design.activecollab.com/docs/foundations/icons
*/
var ViewCombinedIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
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: 24,
height: 24,
viewBox: "0 0 24 24",
"data-testid": "ViewCombinedIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M19 18a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2zm0-6a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2zm-7-8c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2M6 4c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2m12 0c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2"
}));
});
ViewCombinedIcon.displayName = "ViewCombinedIcon";
var ViewCombinedIcon$1 = ViewCombinedIcon;
var _excluded$1N = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$1N);
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": "ViewDayIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M9 6a1 1 0 0 1 1-1h9a1 1 0 1 1 0 2h-9a1 1 0 0 1-1-1M9 12a1 1 0 0 1 1-1h9a1 1 0 1 1 0 2h-9a1 1 0 0 1-1-1M9 18a1 1 0 0 1 1-1h9a1 1 0 1 1 0 2h-9a1 1 0 0 1-1-1M5 4a1 1 0 0 1 1 1v14a1 1 0 1 1-2 0V5a1 1 0 0 1 1-1"
}));
});
ViewDayIcon.displayName = "ViewDayIcon";
var ViewDayIcon$1 = ViewDayIcon;
var _excluded$1M = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$1M);
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": "ViewGridIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
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-2"
}));
});
ViewGridIcon.displayName = "ViewGridIcon";
var ViewGridIcon$1 = ViewGridIcon;
var _excluded$1L = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$1L);
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": "ViewListIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M19 17a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2zm0-6a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2zm0-6a1 1 0 0 1 0 2H5a1 1 0 1 1 0-2z"
}));
});
ViewListIcon.displayName = "ViewListIcon";
var ViewListIcon$1 = ViewListIcon;
var _excluded$1K = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$1K);
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": "ViewTimelineIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M10 17h10a1 1 0 0 1 0 2H10a1 1 0 0 1 0-2m-3-6h10a1 1 0 0 1 0 2H7a1 1 0 0 1 0-2M4 5h10a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2"
}));
});
ViewTimelineIcon.displayName = "ViewTimelineIcon";
var ViewTimelineIcon$1 = ViewTimelineIcon;
var _excluded$1J = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$1J);
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": "VolumeHighIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
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 0 0-4.754-6.632L14 5.29zM12 4v16l-5-5H3V9h4zm2 3.97c1.5.74 2.5 2.26 2.5 4.03a4.4 4.4 0 0 1-2.307 3.903L14 16z"
}));
});
VolumeHighIcon.displayName = "VolumeHighIcon";
var VolumeHighIcon$1 = VolumeHighIcon;
var _excluded$1I = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$1I);
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
xmlns: "http://www.w3.org/2000/svg",
width: 12,
height: 12,
viewBox: "0 0 12 12",
"data-testid": "WarningTriangleSmallIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
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-.403M6 2l-5 8h10zm0 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3"
}));
});
WarningTriangleSmallIcon.displayName = "WarningTriangleSmallIcon";
var WarningTriangleSmallIcon$1 = WarningTriangleSmallIcon;
var _excluded$1H = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$1H);
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": "WarningTriangleIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M13.08 2.247c.381.185.694.465.902.805l8.742 14.964c.597.978.194 2.204-.9 2.738a2.5 2.5 0 0 1-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-.805M12 4 3 19h18zm0 7a3 3 0 1 1 0 6 3 3 0 0 1 0-6"
}));
});
WarningTriangleIcon.displayName = "WarningTriangleIcon";
var WarningTriangleIcon$1 = WarningTriangleIcon;
var _excluded$1G = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$1G);
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": "WarningIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2m0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16m1 11v2h-2v-2zm0-8v6h-2V7z"
}));
});
WarningIcon.displayName = "WarningIcon";
var WarningIcon$1 = WarningIcon;
var _excluded$1F = ["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, ref) {
var gradient = _ref.gradient,
props = _objectWithoutProperties(_ref, _excluded$1F);
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": "WorkloadIcon",
fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
focusable: false,
ref: ref
}, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
gradient: gradient
}), /*#__PURE__*/React__default["default"].createElement("path", {
stroke: "#F4F5F7",
strokeWidth: 0.1,
d: "M.05.05h23.9v23.9H.05z",
opacity: 0.01
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M22 12a.83.83 0 0 0-.41-.717l-1.959-1.158 1.96-1.157a.834.834 0 0 0 0-1.435l-9.167-5.417a.83.83 0 0 0-.848 0L2.409 7.533a.833.833 0 0 0 0 1.435l1.96 1.157-1.96 1.158a.833.833 0 0 0 0 1.435l1.96 1.157-1.96 1.158a.833.833 0 0 0 0 1.435l9.167 5.416a.83.83 0 0 0 .848 0l9.167-5.416a.834.834 0 0 0 0-1.435l-1.96-1.158 1.96-1.157A.83.83 0 0 0 22 12M12 3.801l7.528 4.45L12 12.698 4.471 8.25zm-.424 10.583a.83.83 0 0 0 .848 0l5.57-3.29 1.535.907L12 16.449 4.471 12l1.536-.907zm7.952 1.366L12 20.2l-7.529-4.45 1.536-.907 5.57 3.29a.83.83 0 0 0 .848 0l5.57-3.29z"
}));
});
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, 1))",
"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$1E = ["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$1E);
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$1D = ["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$1D);
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$1C = ["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$1C);
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$1B = ["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$1B);
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();
event.stopPropagation();
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$1A = ["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$1A);
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$1z = ["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$1z);
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$1y = ["children", "className"];
var MenuFooter = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var children = _ref.children,
className = _ref.className,
props = _objectWithoutProperties(_ref, _excluded$1y);
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$1x = ["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$1x);
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 DEFAULT_DIMENSION = 8;
var LARGE_FONT_FROM_DIMENSION = 18;
var CIRCLE_PADDING_INLINE = 5;
var PILL_PADDING_INLINE = 10;
var DIGIT_INLINE_SIZE = 7;
var SMALL_CIRCLE_BELOW_DIMENSION = 16;
var dimensionOf = function dimensionOf(props) {
var _props$dimension;
return (_props$dimension = props.dimension) !== null && _props$dimension !== void 0 ? _props$dimension : DEFAULT_DIMENSION;
};
var paddingInlineOf = function paddingInlineOf(props) {
if (!props.hasLabel) {
return 0;
}
if (props.shape === "pill") {
return PILL_PADDING_INLINE;
}
var dimension = dimensionOf(props);
if (dimension >= SMALL_CIRCLE_BELOW_DIMENSION) {
return CIRCLE_PADDING_INLINE;
}
// A small circle keeps a single digit inside its box only with less padding.
return Math.max(0, Math.floor((dimension - DIGIT_INLINE_SIZE) / 2));
};
var StyledBadge$1 = styled__default["default"].div.withConfig({
displayName: "Styles__StyledBadge",
componentId: "sc-6o8do5-0"
})(["", " align-items:center;background-color:", ";block-size:", ";border-radius:999px;box-sizing:border-box;color:", ";display:flex;font-size:", ";font-variant-numeric:tabular-nums;font-weight:700;inline-size:auto;justify-content:center;min-inline-size:", ";padding-inline:", ";pointer-events:none;position:absolute;z-index:1;", " ", " ", " ", " ", " ", ""], FontStyle, function (props) {
return !props.backgroundColor ? "var(--color-primary)" : props.backgroundColor;
}, function (props) {
return dimensionOf(props) + "px";
}, function (props) {
return !props.textColor ? "var(--color-theme-100)" : props.textColor;
}, function (props) {
return dimensionOf(props) >= LARGE_FONT_FROM_DIMENSION ? "12px" : "10px";
}, function (props) {
return dimensionOf(props) + "px";
}, function (props) {
return paddingInlineOf(props) + "px";
}, function (_ref) {
var shadows = _ref.shadows;
return shadows && styled.css(["box-shadow:var(--shadow-tertiary);text-shadow:0 1px 2px rgba(0,0,0,0.25);"]);
}, function (_ref2) {
var isStandalone = _ref2.isStandalone;
return isStandalone && styled.css(["position:static;z-index:0;"]);
}, function (_ref3) {
var position = _ref3.position;
return position === "top-left" && styled.css(["inset-block-start:0;inset-inline-start:0;"]);
}, function (_ref4) {
var position = _ref4.position;
return position === "top-right" && styled.css(["inset-block-start:0;inset-inline-end:0;"]);
}, function (_ref5) {
var position = _ref5.position;
return position === "bottom-right" && styled.css(["inset-block-end:0;inset-inline-end:0;"]);
}, function (_ref6) {
var position = _ref6.position;
return position === "bottom-left" && styled.css(["inset-block-end:0;inset-inline-start:0;"]);
});
var getLabel = function getLabel(value, cap) {
if (!value) {
return null;
}
return cap && value > cap ? "".concat(cap, "+") : value;
};
/**
* @component Badge
* @description
* A small pill that sits on the corner of an avatar or an icon, or stands in a
* row on its own. It shows a count, or nothing at all when it marks a state.
*
* @prop {position} - dictates the position of a badge.
* @prop {dimension} - controls the height of a badge in pixels. The width grows with the content.
* @prop {shape} - "pill" adds horizontal padding so the badge reads as long.
* @prop {cap} - the highest number shown. Above it the badge renders `{cap}+`.
* @prop {backgroundColor} - background-color of a badge.
* @prop {textColor} - color of the number.
* @prop {isStandalone} - takes the badge out of absolute positioning.
*
* @example
* <IconButton variant="text gray" size="big">
* <BellOffIcon />
* <Badge position="top-right" backgroundColor="var(--red-alert)" dimension={16} value={7} cap={99} />
* </IconButton>
*
* @see
* https://system.activecollab.com/?path=/story/components-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,
textColor = _ref.textColor,
value = _ref.value,
cap = _ref.cap,
_ref$shape = _ref.shape,
shape = _ref$shape === void 0 ? "circle" : _ref$shape,
_ref$shadows = _ref.shadows,
shadows = _ref$shadows === void 0 ? false : _ref$shadows,
_ref$isStandalone = _ref.isStandalone,
isStandalone = _ref$isStandalone === void 0 ? false : _ref$isStandalone;
var label = getLabel(value, cap);
return /*#__PURE__*/React__default["default"].createElement(StyledBadge$1, {
className: classNames__default["default"]("c-badge", className),
dimension: dimension,
position: position,
shape: shape,
shadows: shadows,
hasLabel: label !== null,
isStandalone: isStandalone,
backgroundColor: backgroundColor,
textColor: textColor,
role: "status"
}, label);
};
var _excluded$1w = ["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$1w);
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$1v = ["children"];
var TooltipAnimation = function TooltipAnimation(_ref) {
var children = _ref.children,
props = _objectWithoutProperties(_ref, _excluded$1v);
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__*/
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore - due to @node/types making ts more strict
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$1u = ["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$1u);
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, function (props) {
return props.$step === "range" && styled.css(["padding:0 12px !important;"]);
}, {
"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-8);padding:0 12px !important;"]);
}, 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 _excluded$1t = ["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$1t);
// 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$4 = 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$4.displayName = "StyledInput";
var StyledLabel$1 = styled__default["default"].label.withConfig({
displayName: "Styles__StyledLabel",
componentId: "sc-y7zymm-1"
})([""]);
StyledLabel$1.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$4, StyledLabel$1, StyledInput$4, StyledLabel$1, function (props) {
return !props.mixed && styled.css(["rect{stroke:var(--color-secondary);stroke-width:3px;}"]);
}, StyledInput$4, StyledLabel$1, 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$4, StyledLabel$1);
}, StyledInput$4, StyledLabel$1, 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$1s = ["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$1s);
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$4, _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$1, {
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 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, ")")
};
// 0.02px below the breakpoint so these never overlap the min-width queries.
var below = function below(value) {
return "".concat(parseFloat(value) - 0.02, "px");
};
var screenBelow = {
sm: "@media (max-width: ".concat(below(size.sm), ")"),
md: "@media (max-width: ".concat(below(size.md), ")"),
lg: "@media (max-width: ".concat(below(size.lg), ")"),
xl: "@media (max-width: ".concat(below(size.xl), ")"),
xxl: "@media (max-width: ".concat(below(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;@media (max-width:640px){width:calc(100% - 32px);max-width:640px;margin-left:16px !important;margin-right:16px !important;}", " ", " ", "{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$1r = ["className", "children"];
// import { useDialogContext } from "./DialogContext";
var DialogActions = function DialogActions(_ref) {
var className = _ref.className,
children = _ref.children,
rest = _objectWithoutProperties(_ref, _excluded$1r);
// useDialogContext();
return /*#__PURE__*/React__default["default"].createElement(StyledDialogActions, _extends({
className: classNames__default["default"]("c-dialog-actions", className)
}, rest), children);
};
DialogActions.displayName = "DialogActions";
var _excluded$1q = ["className", "children"];
// import { useDialogContext } from "./DialogContext";
var DialogContent = function DialogContent(_ref) {
var className = _ref.className,
children = _ref.children,
rest = _objectWithoutProperties(_ref, _excluded$1q);
// 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$1p = ["children"];
var Header3 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var children = _ref.children,
props = _objectWithoutProperties(_ref, _excluded$1p);
return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
weight: "bold",
variant: "Header 3",
ref: ref
}, props), children);
});
Header3.displayName = "Header3";
var _excluded$1o = ["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$1o);
// 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$1n = ["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$1n);
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$1m = ["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$1m);
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$1l = ["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$1l);
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$1k = ["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$1k);
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$1j = ["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$1j);
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$1i = ["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$1i);
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 StyledConfirmation = styled__default["default"].div.withConfig({
displayName: "Styles__StyledConfirmation",
componentId: "sc-1hepb1k-0"
})(["display:flex;align-items:center;gap:8px;margin-top:16px;label{cursor:pointer;}"]);
StyledConfirmation.displayName = "StyledConfirmation";
var CONFIRMATION_CHECKBOX_ID = "confirm-dialog-confirmation";
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,
confirmationLabel = _ref.confirmationLabel;
var _useState = React.useState(false),
_useState2 = _slicedToArray(_useState, 2),
confirmed = _useState2[0],
setConfirmed = _useState2[1];
var isConfirmBlocked = Boolean(confirmationLabel) && !confirmed;
var handleToggleConfirmed = React.useCallback(function (event) {
return setConfirmed(event.target.checked);
}, []);
React.useEffect(function () {
if (!open) {
setConfirmed(false);
}
}, [open]);
React.useEffect(function () {
var handleKeyDown = function handleKeyDown(event) {
if (event.key === "Enter" && onConfirm && !isConfirmBlocked) {
event.preventDefault();
onConfirm();
}
};
if (open) {
window.addEventListener("keydown", handleKeyDown);
}
return function () {
window.removeEventListener("keydown", handleKeyDown);
};
}, [open, onConfirm, isConfirmBlocked]);
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), confirmationLabel ? /*#__PURE__*/React__default["default"].createElement(StyledConfirmation, {
className: "c-confirm-dialog--confirmation"
}, /*#__PURE__*/React__default["default"].createElement(Checkbox, {
id: CONFIRMATION_CHECKBOX_ID,
checked: confirmed,
onChange: handleToggleConfirmed,
disabled: isLoading
}), /*#__PURE__*/React__default["default"].createElement("label", {
htmlFor: CONFIRMATION_CHECKBOX_ID
}, /*#__PURE__*/React__default["default"].createElement(Body2, {
color: "secondary"
}, confirmationLabel))) : null), /*#__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 || isConfirmBlocked
}, 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,\"Inter\",\"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);", " &{color:rgba(0,0,0,0.4);}&.today-day{color:rgba(255,255,255,0.6);", " &{color:rgba(0,0,0,0.4);}&:after{background-color:rgba(255,255,255,0.6);", " &{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);", " &{color:var(--page-paper-main);}&.today-day{&:after{background:var(--page-paper-main);", " &{background:var(--page-paper-main);}}&.nonWorkingDay{color:var(--page-paper-main);", " &{color:var(--page-paper-main);}}}}}"], DARK_THEME_SELECTOR, DARK_THEME_SELECTOR, DARK_THEME_SELECTOR, DARK_THEME_SELECTOR, DARK_THEME_SELECTOR, DARK_THEME_SELECTOR);
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,
maxRange = _ref.maxRange,
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$modalTitle = _ref.modalTitle,
modalTitle = _ref$modalTitle === void 0 ? "Save Changes" : _ref$modalTitle,
_ref$modalDescription = _ref.modalDescription,
modalDescription = _ref$modalDescription === void 0 ? "You updated the date. Would you like to save this change?" : _ref$modalDescription,
_ref$modalSaveBtnText = _ref.modalSaveBtnText,
modalSaveBtnText = _ref$modalSaveBtnText === void 0 ? "Save" : _ref$modalSaveBtnText,
_ref$modalCancelBtnTe = _ref.modalCancelBtnText,
modalCancelBtnText = _ref$modalCancelBtnTe === void 0 ? "Discard" : _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),
_useState0 = _slicedToArray(_useState9, 2),
monthTransitionDirection = _useState0[0],
setMonthTransitionDirection = _useState0[1];
var _useState1 = React.useState(function () {
if (defaultSelected && defaultSelected.from) {
return toMoment(defaultSelected.from);
}
if (month) {
return toMoment(month);
}
return moment__default["default"].utc();
}),
_useState10 = _slicedToArray(_useState1, 2),
currentDate = _useState10[0],
setCurrentDate = _useState10[1];
var _useState11 = React.useState(function () {
if (defaultSelected && defaultSelected.from) {
return toMoment(defaultSelected.from);
} else if (month) {
return toMoment(month);
}
return moment__default["default"].utc();
}),
_useState12 = _slicedToArray(_useState11, 2),
targetDate = _useState12[0],
setTargetDate = _useState12[1];
var _useState13 = React.useState(function () {
if (!defaultSelected) {
return null;
}
if (!defaultSelected.from) {
return null;
}
return {
from: toMoment(defaultSelected.from),
to: defaultSelected.to ? toMoment(defaultSelected.to) : null
};
}),
_useState14 = _slicedToArray(_useState13, 2),
selected = _useState14[0],
setSelected = _useState14[1];
var _useState15 = React.useState(null),
_useState16 = _slicedToArray(_useState15, 2),
hoveredDate = _useState16[0],
setHoveredDate = _useState16[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);
React.useEffect(function () {
if (maxRange && defaultSelected !== null && defaultSelected !== void 0 && defaultSelected.from && defaultSelected !== null && defaultSelected !== void 0 && defaultSelected.to) {
var from = toMoment(defaultSelected.from);
var to = toMoment(defaultSelected.to);
if (from && to) {
var daysDiff = to.diff(from, "days") + 1;
if (daysDiff > maxRange) {
console.warn("DatePicker: selected range (".concat(daysDiff, " days) exceeds maxRange (").concat(maxRange, ")."));
}
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
var effectiveDisabledDaysBefore = React.useMemo(function () {
if (maxRange && mode === "custom" && selected !== null && selected !== void 0 && selected.from && !(selected !== null && selected !== void 0 && selected.to)) {
var maxRangeBefore = selected.from.clone().subtract(maxRange - 1, "days");
if (!disabledDaysBefore || maxRangeBefore.isAfter(disabledDaysBefore)) {
return maxRangeBefore;
}
}
return disabledDaysBefore;
}, [maxRange, mode, selected, disabledDaysBefore]);
var effectiveDisabledDaysAfter = React.useMemo(function () {
if (maxRange && mode === "custom" && selected !== null && selected !== void 0 && selected.from && !(selected !== null && selected !== void 0 && selected.to)) {
var maxRangeAfter = selected.from.clone().add(maxRange - 1, "days");
if (!disabledDaysAfter || maxRangeAfter.isBefore(disabledDaysAfter)) {
return maxRangeAfter;
}
}
return disabledDaysAfter;
}, [maxRange, mode, selected, disabledDaysAfter]);
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 = effectiveDisabledDaysBefore && clonedDate.isBefore(effectiveDisabledDaysBefore, "day") || effectiveDisabledDaysAfter && clonedDate.isAfter(effectiveDisabledDaysAfter, "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 handleSaveDiscardModal = React.useCallback(function () {
if (selected) {
if (onChange) {
onChange({
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 (onSave) {
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 (onChange) onChange(undefined);
if (onSave) onSave(undefined);
}
setShowDiscardModal(false);
if (target) {
setIsOpen(false);
if (onCalendarToggle) onCalendarToggle(false);
}
}, [selected, target, onChange, onSave, onCalendarToggle]);
var handleDiscardModal = 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);
if (target) {
setIsOpen(false);
if (onCalendarToggle) onCalendarToggle(false);
}
}, [defaultSelected === null || defaultSelected === void 0 ? void 0 : defaultSelected.from, defaultSelected === null || defaultSelected === void 0 ? void 0 : defaultSelected.to, onCalendarToggle, target]);
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: handleDiscardModal,
onConfirm: handleSaveDiscardModal,
dialogTitle: modalTitle,
dialogContent: modalDescription,
cancelBtnText: modalCancelBtnText,
confirmBtnText: modalSaveBtnText
}) : 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,
_ref$disableArrows = _ref.disableArrows,
disableArrows = _ref$disableArrows === void 0 ? false : _ref$disableArrows,
maxRange = _ref.maxRange;
var _useState = React.useState(moment__default["default"].utc(from)),
_useState2 = _slicedToArray(_useState, 2),
fromDate = _useState2[0],
setFromDate = _useState2[1];
var _useState3 = React.useState(to ? moment__default["default"].utc(to) : null),
_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")];
} else if (step === "custom") {
// For range step, calculate N days based on current selection
// Handle case where toDate is undefined
var effectiveToDate = !toDate ? fromDate : toDate;
var daysDiff = effectiveToDate.diff(fromDate, "days");
// If same day selected (daysDiff = 0), move by 1 day
var daysToMove = daysDiff === 0 ? 1 : daysDiff + 1;
var newFromDate = fromDate.clone().add(interval * daysToMove, "days");
var newToDate = daysDiff === 0 ? newFromDate.clone() : effectiveToDate.clone().add(interval * daysToMove, "days");
return [newFromDate, newToDate];
}
return [date, date];
}, [fromDate, toDate, period, step]);
var getDateFormatted = React.useMemo(function () {
if (formatCallback) {
return formatCallback(fromDate, toDate ? toDate : fromDate);
}
var actualYear = moment__default["default"]().year();
var showWeekOrCustomDateFormat = function showWeekOrCustomDateFormat(start, end) {
var endDate = end ? end : start;
if (start.year() === actualYear && end.year() === actualYear) {
return start.utc().format("MMM DD") + " - " + endDate.utc().format("MMM DD");
} else {
return start.utc().format("MMM DD YYYY") + " - " + endDate.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 === "custom") {
if (!toDate) {
if (fromDate.year() === actualYear) {
return fromDate.utc().format("MMM DD");
}
return fromDate.utc().format("MMM DD YYYY");
}
// If from and to are the same date, show only once
if (fromDate.format("YYYY-MM-DD") === toDate.format("YYYY-MM-DD")) {
if (fromDate.year() === actualYear) {
return fromDate.utc().format("MMM DD");
}
return fromDate.utc().format("MMM DD YYYY");
}
return showWeekOrCustomDateFormat(fromDate, toDate);
}
return "";
}, [fromDate, toDate, step, formatCallback, period]);
var datePickerMode = React.useMemo(function () {
if (step === "custom") return "custom";
if (step === "yearly") return "custom";
return step;
}, [step]);
var onDatePickerChange = React.useCallback(function (dates) {
console.log("dates: ", dates);
var fromDateTemp = moment__default["default"].utc(Number(dates === null || dates === void 0 ? void 0 : dates.from) * 1000);
var toDateTemp = dates !== null && dates !== void 0 && dates.to ? moment__default["default"].utc(Number(dates === null || dates === void 0 ? void 0 : dates.to) * 1000) : null;
setFromDate(fromDateTemp);
setToDate(toDateTemp);
if (onChange && step !== "custom" && moment__default["default"].isMoment(fromDateTemp) && moment__default["default"].isMoment(toDateTemp)) {
onChange(fromDateTemp.toDate(), toDateTemp.toDate());
}
}, [onChange, step]);
var onToggleDatePicker = React.useCallback(function (open) {
if (step === "custom" && !open) {
var toDateTemp = toDate ? toDate : fromDate;
setToDate(toDateTemp);
onChange === null || onChange === void 0 || onChange(fromDate.toDate(), toDateTemp.toDate());
}
}, [fromDate, onChange, step, toDate]);
var isAfterMaxDate = React.useMemo(function () {
return moment__default["default"].isMoment(maxValue) && toDate && 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) && toDate && 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).toDate(), moment__default["default"].utc(newTo).toDate());
}
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).toDate(), moment__default["default"].utc(newTo).toDate());
}
if (onBack) {
onBack(moment__default["default"].utc(newFrom).toDate(), moment__default["default"].utc(newTo).toDate());
}
}, [isBeforeMinDate, getDatesByPeriod, onChange, onBack]);
React.useEffect(function () {
setFromDate(moment__default["default"].utc(from));
setToDate(to ? moment__default["default"].utc(to) : null);
}, [from, to]);
var dateStepperWidth = function dateStepperWidth(fromDay, toDay, range) {
if (range === "range") {
return {
minWidth: "102px"
};
}
if (fromDay.utc().year() !== moment__default["default"].utc().year() || !!toDay && (toDay === null || toDay === void 0 ? void 0 : 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)
}, !disableArrows ? /*#__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: disableArrows,
$mode: mode,
$alwaysShowDate: alwaysShowDate,
style: dateStepperWidth(fromDate, toDate, step)
}, withDatePicker && step !== "yearly" ? /*#__PURE__*/React__default["default"].createElement(DatePicker, {
month: defaultMonth,
onCalendarToggle: onToggleDatePicker,
target: /*#__PURE__*/React__default["default"].createElement(StyledButton$1, {
$step: step,
type: "button"
}, getDateFormatted),
mode: datePickerMode,
selected: {
from: moment__default["default"].utc(fromDate).unix(),
to: toDate ? moment__default["default"].utc(toDate).unix() : null
},
onChange: onDatePickerChange,
firstDayOfWeek: period === "week" ? 0 : 1,
modifiers: modifiers,
disabledDaysAfter: maxValue,
disabledDaysBefore: minValue,
disableYearPicker: !enableYearPicker,
popperClassName: popperClassName,
position: position,
maxRange: maxRange,
key: datePickerMode,
instant: true,
required: true
}) : /*#__PURE__*/React__default["default"].createElement(StyledSpan$1, null, getDateFormatted)), !disableArrows ? /*#__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);", " &{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%"
}, DARK_THEME_SELECTOR, {
"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;", " &{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;"], DARK_THEME_SELECTOR, linearAnimation);
var _excluded$1h = ["className"];
var SkeletonLoader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var className = _ref.className,
rest = _objectWithoutProperties(_ref, _excluded$1h);
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$1g = ["className"];
var DotsLoader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var className = _ref.className,
rest = _objectWithoutProperties(_ref, _excluded$1g);
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$1f = ["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$1f);
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$1e = ["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$1e);
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$1d = ["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$1d);
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),
_useState0 = _slicedToArray(_useState9, 2),
data = _useState0[0],
setData = _useState0[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$1c = ["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$1c);
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$1b = ["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$1b);
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$1a = ["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$1a);
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$19 = ["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$19);
return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
weight: weight,
variant: "Title 1",
ref: ref
}, props), children);
});
Title1.displayName = "Title1";
var _excluded$18 = ["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$18);
return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
weight: weight,
variant: "Title 2",
ref: ref
}, props), children);
});
Title2.displayName = "Title2";
var _excluded$17 = ["children"];
var Header2 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var children = _ref.children,
props = _objectWithoutProperties(_ref, _excluded$17);
return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
weight: "bold",
variant: "Header 2",
ref: ref
}, props), children);
});
Header2.displayName = "Header2";
var _excluded$16 = ["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$16);
return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
variant: "Body 1",
weight: weight,
ref: ref
}, props), children);
});
Body1.displayName = "Body1";
var _excluded$15 = ["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$15);
return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
variant: "Caption 1",
weight: weight,
ref: ref
}, props), children);
});
Caption1.displayName = "Caption1";
var _excluded$14 = ["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$14);
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:", ";"], {
"maxWidth": "15rem",
"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", "PinIcon", "PinSmallIcon"];
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$13 = ["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$13);
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%;flex:none;aspect-ratio:1;", " ", ""], 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$12 = ["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$12);
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$11 = ["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$11);
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$10 = ["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$10);
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$$ = ["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$$);
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 StyledOptionIcon = styled__default["default"].span.withConfig({
displayName: "Styles__StyledOptionIcon",
componentId: "sc-6fiqyy-2"
})(["display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-right:8px;flex-shrink:0;color:currentColor;svg{width:16px;height:16px;}"]);
StyledOptionIcon.displayName = "StyledOptionIcon";
var StyledOptionText = styled__default["default"](Body2).withConfig({
displayName: "Styles__StyledOptionText",
componentId: "sc-6fiqyy-3"
})(["", " 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-4"
})(["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,
icon = _ref.icon;
return /*#__PURE__*/React__default["default"].createElement(StyledOptionContentWrapper, null, icon ? /*#__PURE__*/React__default["default"].createElement(StyledOptionIcon, {
className: "c-option--icon",
"aria-hidden": "true"
}, icon) : 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 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$3 = 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$3.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$_ = ["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$_);
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$3, _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$Z = ["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$Z);
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$Y = ["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$Y);
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);
}),
_useState0 = _slicedToArray(_useState9, 2),
unformattedValue = _useState0[0],
setUnformattedValue = _useState0[1];
var _useState1 = React.useState(function () {
return formatNumber(value, "", decimalSeparator, false, decimalLength, "long", shortenThreshold);
}),
_useState10 = _slicedToArray(_useState1, 2),
unformattedPrevValue = _useState10[0],
setUnformattedPrevValue = _useState10[1];
var _useState11 = React.useState(false),
_useState12 = _slicedToArray(_useState11, 2),
focused = _useState12[0],
setFocused = _useState12[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$X = ["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$X);
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 StyledOptionContent = styled__default["default"].span.withConfig({
displayName: "Styles__StyledOptionContent",
componentId: "sc-1232l97-1"
})(["display:flex;align-items:center;width:100%;justify-content:space-between;"]);
StyledOptionContent.displayName = "StyledOptionContent";
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, /*#__PURE__*/React__default["default"].createElement("span", null, beforeHighlighted.replace(/ /g, "\u00a0")), /*#__PURE__*/React__default["default"].createElement(StyledHiglightedText, {
className: "c-option--text__highlight"
}, highLighted.replace(/ /g, "\u00a0")), /*#__PURE__*/React__default["default"].createElement("span", null, 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
}, /*#__PURE__*/React__default["default"].createElement(StyledOptionContent, null, renderOption ? renderOption : name));
});
Option.displayName = "Option";
var StyledOptionGroupLi = styled__default["default"].li.withConfig({
displayName: "Styles__StyledOptionGroupLi",
componentId: "sc-16v5afu-0"
})(["flex-direction:column;cursor:", ";"], function (props) {
return props.type === "single" ? "default" : "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 StyledOptionGroupHeaderLabel = styled__default["default"].div.withConfig({
displayName: "Styles__StyledOptionGroupHeaderLabel",
componentId: "sc-16v5afu-3"
})(["display:flex;align-items:center;min-width:0;flex-grow:1;"]);
StyledOptionGroupHeaderLabel.displayName = "StyledOptionGroupHeaderLabel";
var StyledOptionGroupIcon = styled__default["default"].span.withConfig({
displayName: "Styles__StyledOptionGroupIcon",
componentId: "sc-16v5afu-4"
})(["display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-right:8px;flex-shrink:0;color:currentColor;svg{width:16px;height:16px;}"]);
StyledOptionGroupIcon.displayName = "StyledOptionGroupIcon";
var StyledOptionGroupHeaderName = styled__default["default"](Body2).withConfig({
displayName: "Styles__StyledOptionGroupHeaderName",
componentId: "sc-16v5afu-5"
})(["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-6"
})(["", ""], 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,
icon = _ref.icon,
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 && type !== "single") {
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, type]);
return /*#__PURE__*/React__default["default"].createElement(StyledOptionGroupLi, {
key: id,
type: type,
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(StyledOptionGroupHeaderLabel, null, icon ? /*#__PURE__*/React__default["default"].createElement(StyledOptionGroupIcon, {
className: "c-option-group--icon",
"aria-hidden": "true"
}, icon) : 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 collectLeafIds = function collectLeafIds(opts) {
return opts.reduce(function (acc, opt) {
return isOptionGroup(opt) ? [...acc, ...opt.options.map(function (o) {
return o.id;
})] : [...acc, opt.id];
}, []);
};
// Inserts an option at its alphabetical position among the options that share
// its checked state (checked items live at the top, so a checked option lands
// among the checked ones, sorted).
var insertAmongSameState = function insertAmongSameState(list, item, isChecked) {
var checked = isChecked(item.id);
var index = list.findIndex(function (o) {
return isChecked(o.id) === checked && o.name.localeCompare(item.name) > 0;
});
if (index === -1) {
index = checked ? list.reduce(function (acc, o, i) {
return isChecked(o.id) ? i + 1 : acc;
}, 0) : list.length;
}
return [...list.slice(0, index), item, ...list.slice(index)];
};
// Frozen options that are still present keep their order (checking/unchecking
// never moves them). Everything else — newly added options, or frozen options
// that moved here (e.g. when the list is regrouped) — is slotted in among the
// checked items, alphabetically.
var reconcileFlat = function reconcileFlat(prev, next, frozen, isChecked) {
var nextById = new Map(next.map(function (o) {
return [o.id, o];
}));
var base = prev.filter(function (o) {
return frozen.has(o.id) && nextById.has(o.id);
}).map(function (o) {
return nextById.get(o.id);
});
var baseIds = new Set(base.map(function (o) {
return o.id;
}));
var toPlace = next.filter(function (o) {
return !baseIds.has(o.id);
});
return toPlace.reduce(function (acc, item) {
return insertAmongSameState(acc, item, isChecked);
}, base);
};
var reconcileOrder = function reconcileOrder(prev, next, frozen, isChecked) {
if (!next.every(isOptionGroup) || !prev.every(isOptionGroup)) {
return reconcileFlat(prev, next, frozen, isChecked);
}
var prevGroupById = new Map(prev.map(function (group) {
return [group.id, group];
}));
return next.map(function (group) {
var _prevGroupById$get$op, _prevGroupById$get;
return _objectSpread2(_objectSpread2({}, group), {}, {
options: reconcileFlat((_prevGroupById$get$op = (_prevGroupById$get = prevGroupById.get(group.id)) === null || _prevGroupById$get === void 0 ? void 0 : _prevGroupById$get.options) !== null && _prevGroupById$get$op !== void 0 ? _prevGroupById$get$op : [], group.options, frozen, isChecked)
});
});
};
var Autocomplete = function Autocomplete(_ref) {
var type = _ref.type,
_ref$options = _ref.options,
optionsProp = _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);
// Tolerate sparse/holey option arrays (some callers build them via index
// assignment): drop holes and nullish entries so sorting never hits undefined.
var options = React.useMemo(function () {
return optionsProp.filter(Boolean);
}, [optionsProp]);
var selectedOptions = React.useMemo(function () {
if (Array.isArray(selected)) {
return selected;
}
return [selected];
}, [selected]);
// Ids whose position is fixed. Starts with everything present on open; a
// freshly added option joins this set once it becomes checked, so unchecking
// it later won't move it. Everything frozen keeps its order on every re-sort.
var frozenRef = React.useRef(new Set(collectLeafIds(options)));
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) {
return _objectSpread2(_objectSpread2({}, group), {}, {
options: [...group.options].sort(sortOptions)
});
});
} else {
return [...opts].sort(sortOptions);
}
}, [keepSameOptionsOrder, selectedOptions, mixedOptions]);
var sortList = React.useCallback(function (options) {
var _options$;
if (disabledInternalSort) {
return handleSort(options);
}
var alphaSort = function alphaSort(a, b) {
return sortDirection === "asc" ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name);
};
var isGrouped = Array.isArray((_options$ = options[0]) === null || _options$ === void 0 ? void 0 : _options$.options);
if (isGrouped) {
var sortedOptions = options.map(function (group) {
return _objectSpread2(_objectSpread2({}, group), {}, {
options: handleSort([...group.options].sort(alphaSort))
});
});
return handleSort(sortedOptions);
} else {
return handleSort([...options].sort(alphaSort));
}
}, [sortDirection, disabledInternalSort, handleSort]);
var _useState = React.useState(function () {
return sortList(options);
}),
_useState2 = _slicedToArray(_useState, 2),
sortedList = _useState2[0],
setSortedList = _useState2[1];
// The order is established on open. Options present then keep their place for
// the whole session — checking/unchecking never reorders them. Options added
// afterwards are slotted in among the checked items, alphabetically. The
// selection key is a primitive so a fresh `selected = []` default can't loop.
var isInitialSortRef = React.useRef(true);
var selectedKey = selectedOptions.join(",");
React.useEffect(function () {
if (isInitialSortRef.current) {
isInitialSortRef.current = false;
return;
}
if (keepSameOptionsOrder) {
setSortedList(sortList(options));
return;
}
if (sortedList.length === 0) {
frozenRef.current = new Set(collectLeafIds(options));
setSortedList(sortList(options));
return;
}
var isChecked = function isChecked(id) {
return selectedOptions.includes(id);
};
var frozen = frozenRef.current;
var nextFrozen = new Set(frozen);
collectLeafIds(options).forEach(function (id) {
if (!frozen.has(id) && isChecked(id)) {
nextFrozen.add(id);
}
});
frozenRef.current = nextFrozen;
setSortedList(reconcileOrder(sortedList, options, frozen, isChecked));
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [options, selectedKey]);
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) {
if (option.hidden) {
return false;
}
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,
icon: item.icon,
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 listenerTarget = inputEl === null || inputEl === void 0 ? void 0 : inputEl.current;
if (!listenerTarget) return;
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,
icon: virtualItem.item.icon,
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$W = ["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$W);
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 _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 onPopperOpen = React.useCallback(function () {
var _elementRef$current;
elementRef === null || elementRef === void 0 || (_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 || _elementRef$current.focus();
}, []);
var props = React.useMemo(function () {
if (target) {
return {
menuClassName: classNames__default["default"]("c-select", selectClassName),
onClose,
onOpen,
target,
mode,
open,
position,
onPopperOpen
};
}
return {
className: classNames__default["default"]("c-select", selectClassName)
};
}, [target, selectClassName, onClose, onOpen, mode, open, position, onPopperOpen]);
var handleEmptyAction = React.useCallback(function (value) {
emptyAction(value);
if (forceCloseMenu) {
setOpen(false);
}
// Clear the search input without triggering form reset events
if (elementRef !== null && elementRef !== void 0 && elementRef.current) {
elementRef.current.value = "";
}
}, [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);
}
if (option.icon && option.image) {
console.warn("Option has both `icon` and `image` set; `icon` takes precedence and `image` is ignored.");
}
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(OptionContent, {
icon: option.icon,
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, null, 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: disableSearch ? undefined : 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$V = ["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.25rem"
}, 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$V);
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$U = ["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$U);
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$T = ["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$T);
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$S = ["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$S);
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$R = ["size", "disabled", "show", "hideControl", "showTooltipText", "hideTooltipText", "value", "validation", "errorMessage", "invalid", "onChange", "wrapperClassName"];
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$1 = styled__default["default"](InfoIcon$1).withConfig({
displayName: "InputPassword__StyledInfoIcon",
componentId: "sc-v930fj-4"
})(["", ""], {
"marginRight": "0.25rem",
"cursor": "help",
"fill": "var(--red-alert)"
});
var StyledInfoSmallIcon$1 = 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$1, null) : /*#__PURE__*/React__default["default"].createElement(StyledInfoIcon$1, 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,
wrapperClassName = _ref2.wrapperClassName,
rest = _objectWithoutProperties(_ref2, _excluded$R);
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, {
className: wrapperClassName
}, /*#__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, {
type: "button"
}, /*#__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"]);
/**
* Sanitizes a string by replacing non-breaking spaces and other special whitespace
* with standard spaces, then trims the result.
*/
var sanitizeAndTrim = function sanitizeAndTrim(value) {
return value.replace(/\u00a0/g, " ") // Replace (\u00a0)
.replace(/\s+/g, " ") // Replace multiple whitespace with single space
.trim(); // Trim leading/trailing whitespace
};
var _excluded$Q = ["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$Q);
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 = sanitizeAndTrim(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 && !defaultValue) {
setPrefix(options[0].id);
}
}, [defaultValue, 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$P = ["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$P);
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 StyledInfoIcon = styled__default["default"](InfoIcon$1).withConfig({
displayName: "Styles__StyledInfoIcon",
componentId: "sc-5qvkpb-5"
})(["", ""], {
"cursor": "help",
"fill": "var(--red-alert)"
});
StyledInfoIcon.displayName = "StyledInfoIcon";
var StyledInfoSmallIcon = styled__default["default"](InfoSmallIcon$1).withConfig({
displayName: "Styles__StyledInfoSmallIcon",
componentId: "sc-5qvkpb-6"
})(["", ""], {
"cursor": "help",
"fill": "var(--red-alert)"
});
StyledInfoSmallIcon.displayName = "StyledInfoSmallIcon";
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$O = ["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$O);
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$N = ["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$N);
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 _templateObject, _templateObject2, _templateObject3, _templateObject4;
var _excluded$M = ["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", "errorMessage", "onCancel"];
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,
errorMessage = _ref.errorMessage,
onCancel = _ref.onCancel,
prop = _objectWithoutProperties(_ref, _excluded$M);
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;
}
onCancel === null || onCancel === void 0 || onCancel(selectedName);
setOpen(false);
});
var handleOnKeyDown = React.useCallback(function (e) {
if (e.key === "Tab" && open) {
setOpen(false);
}
if (e.key === "Escape" && open) {
setOpen(false);
setValue(selectedName);
onCancel === null || onCancel === void 0 || onCancel(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, onCancel, onOpen, open, selectedName, type]);
React.useEffect(function () {
if (!open && !isFirstRender) {
onClose === null || onClose === void 0 || onClose();
}
}, [open, onClose, isFirstRender]);
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);
}
setValue("");
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 (e) {
var _wrapperRef$current;
if (e.relatedTarget && (_wrapperRef$current = wrapperRef.current) !== null && _wrapperRef$current !== void 0 && _wrapperRef$current.contains(e.relatedTarget)) {
return;
}
setValue(selectedName);
setFocused(false);
}, [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)) && !(option !== null && option !== void 0 && option.hidden);
};
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 && !!handleEmptyAction || noResultText);
}, [defaultValue, emptyValue, handleEmptyAction, 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$3, {
className: "c-combo-box-input",
onBlur: handleBlur,
onFocus: function onFocus(e) {
try {
if (e.target.matches(":focus-visible")) {
setOpen(true);
onOpen === null || onOpen === void 0 || onOpen();
}
// eslint-disable-next-line no-empty
} catch (_error) {}
setFocused(true);
},
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",
tabIndex: -1
}, /*#__PURE__*/React__default["default"].createElement(StyledComboBoxCloseSmallIcon, 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)), 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(e) {
if (e.target.matches(":focus-visible")) {
setOpen(true);
onOpen === null || onOpen === void 0 || onOpen();
}
setFocused(true);
},
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), !loading && selected && !hideClearButton ? /*#__PURE__*/React__default["default"].createElement(IconButton, {
onMouseDown: handleMouseDown,
onClick: handleDeselect,
variant: "text gray",
size: "small",
tabIndex: -1
}, /*#__PURE__*/React__default["default"].createElement(StyledComboBoxCloseSmallIcon, null)) : 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)), 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)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n ", "\n ", "\n "])), function (p) {
return p.$_css;
}, function (p) {
return p.$_css2;
});
var _StyledTypography$1 = styled__default["default"](Typography)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n flex-shrink: 0;\n align-items: center;\n "])));
var _StyledStyledInputWrapper = styled__default["default"](StyledInputWrapper)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: flex;\n justify-content: space-between;\n flex: 1;\n height: ", ";\n overflow-y: ", ";\n "])), function (p) {
return p.$_css3;
}, function (p) {
return p.$_css4;
});
var _StyledStyledChipWrapper = styled__default["default"](StyledChipWrapper)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n max-height: ", ";\n "])), function (p) {
return p.$_css5;
});
var _StyledTrigger = styled__default["default"](Trigger).withConfig({
displayName: "ComboBox___StyledTrigger",
componentId: "sc-uvsz9l-0"
})(["display:flex;justify-content:center;"]);
var _excluded$L = ["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$L);
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$K = ["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$K);
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$J = ["value", "variant", "currencyCode", "currencyPosition", "thousandSeparator", "decimalSeparator", "trimDecimals", "decimalSpaces", "format", "disableTooltip", "className", "as", "currencyClassName"];
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,
currencyClassName = _ref.currencyClassName,
rest = _objectWithoutProperties(_ref, _excluded$J);
var formattedValue = formatNumber(value, thousandSeparator, decimalSeparator, trimDecimals, decimalSpaces, "short", 10000);
var formattedLongValue = formatNumber(value, thousandSeparator, decimalSeparator, trimDecimals, decimalSpaces, "long", 10000);
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), currencyPosition === "left" ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
className: currencyClassName
}, currencyCode), " ", formattedValue) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, formattedValue, " ", /*#__PURE__*/React__default["default"].createElement("span", {
className: currencyClassName
}, currencyCode))));
}
return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
as: as,
variant: variant,
className: className,
ref: ref
}, rest), currencyPosition === "left" ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
className: currencyClassName
}, currencyCode), " ", formattedLongValue) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, formattedLongValue, " ", /*#__PURE__*/React__default["default"].createElement("span", {
className: currencyClassName
}, currencyCode)));
});
DisplayCurrency.displayName = "DisplayCurrency";
var _excluded$I = ["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$I);
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$H = ["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$H);
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$G = ["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$G);
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$F = ["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$F);
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;@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$E = ["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$E);
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$D = ["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$D);
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;flex:1;min-width:0;"]);
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$C = ["children", "disabled", "active", "className", "type"];
/**
* 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,
_ref$type = _ref.type,
type = _ref$type === void 0 ? "button" : _ref$type,
args = _objectWithoutProperties(_ref, _excluded$C);
return /*#__PURE__*/React__default["default"].createElement(StyledChoose$1, _extends({
disabled: disabled,
className: classNames__default["default"]("c-choose", className),
active: active,
type: type
}, args), children);
};
Choose.displayName = "Choose";
var _excluded$B = ["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$B);
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 StyledChoose = styled__default["default"](Choose).withConfig({
displayName: "Styles__StyledChoose",
componentId: "sc-uv67fb-0"
})(["flex-shrink:0;white-space:nowrap;", ""], function (props) {
return !props.active && styled.css(["background-color:transparent !important;"]);
});
StyledChoose.displayName = "StyledChoose";
var StyledVerticalContainer = styled__default["default"].div.withConfig({
displayName: "Styles__StyledVerticalContainer",
componentId: "sc-uv67fb-1"
})(["display:flex;flex-direction:column;width:100%;gap:8px;"]);
StyledVerticalContainer.displayName = "StyledVerticalContainer";
var StyledLabel = styled__default["default"](Label).withConfig({
displayName: "Styles__StyledLabel",
componentId: "sc-uv67fb-2"
})(["", ""], function (props) {
return !props.$disabled ? styled.css(["cursor:pointer;"]) : styled.css(["cursor:not-allowed;"]);
});
StyledLabel.displayName = "StyledLabel";
var StyledRadioOption = styled__default["default"].div.withConfig({
displayName: "Styles__StyledRadioOption",
componentId: "sc-uv67fb-3"
})(["display:flex;align-items:center;gap:6px;", " &:hover{opacity:0.8;}&[data-disabled=\"true\"]{opacity:0.5;cursor:not-allowed;}"], function (props) {
return !props.$disabled ? styled.css(["cursor:pointer;"]) : styled.css(["cursor:not-allowed;"]);
});
StyledRadioOption.displayName = "StyledRadioOption";
var StyledFlexContainer = styled__default["default"].div.withConfig({
displayName: "Styles__StyledFlexContainer",
componentId: "sc-uv67fb-4"
})(["display:flex;width:100%;"]);
StyledFlexContainer.displayName = "StyledFlexContainer";
var _excluded$A = ["required", "multiple", "invalid", "options", "selected", "onChange", "type"];
var ChooseV2 = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var _parentSize$width, _flexSize$width;
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,
_ref$type = _ref.type,
type = _ref$type === void 0 ? "button" : _ref$type,
rest = _objectWithoutProperties(_ref, _excluded$A);
var internalRef = React.useRef(null);
var flexContainerRef = React.useRef(null);
var handleRef = useForkRef(ref, internalRef);
var _useState = React.useState(false),
_useState2 = _slicedToArray(_useState, 2),
useVerticalLayout = _useState2[0],
setUseVerticalLayout = _useState2[1];
var _useState3 = React.useState(false),
_useState4 = _slicedToArray(_useState3, 2),
isReady = _useState4[0],
setIsReady = _useState4[1];
var parentSize = useResizeObserver$1(internalRef);
var flexSize = useResizeObserver$1(flexContainerRef);
var parentWidth = (_parentSize$width = parentSize === null || parentSize === void 0 ? void 0 : parentSize.width) !== null && _parentSize$width !== void 0 ? _parentSize$width : 0;
var flexWidth = (_flexSize$width = flexSize === null || flexSize === void 0 ? void 0 : flexSize.width) !== null && _flexSize$width !== void 0 ? _flexSize$width : 0;
React.useEffect(function () {
if (parentWidth === 0) return;
var measure = function measure() {
var temp = document.createElement("div");
temp.style.display = "inline-flex";
temp.style.visibility = "hidden";
temp.style.position = "absolute";
temp.style.whiteSpace = "nowrap";
temp.style.pointerEvents = "none";
document.body.appendChild(temp);
options.forEach(function (option) {
var button = document.createElement("button");
button.textContent = option.name;
button.style.padding = "6px 12px";
button.style.border = "1px solid transparent";
button.style.marginRight = "4px";
temp.appendChild(button);
});
var totalWidth = temp.offsetWidth + 8;
document.body.removeChild(temp);
setUseVerticalLayout(totalWidth > parentWidth);
setIsReady(true);
};
requestAnimationFrame(measure);
}, [parentWidth, options, flexWidth]);
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 {
var _newSelected = selected.includes(id) ? [] : [id];
if (required && _newSelected.length === 0) return;
onChange(_newSelected);
}
};
if (!isReady) {
return /*#__PURE__*/React__default["default"].createElement("div", {
ref: handleRef,
style: {
width: "100%",
minHeight: "32px"
}
});
}
return /*#__PURE__*/React__default["default"].createElement("div", _extends({
ref: handleRef
}, rest, {
style: {
display: "flex",
width: "100%"
}
}), useVerticalLayout ? /*#__PURE__*/React__default["default"].createElement(StyledVerticalContainer, null, options.map(function (option) {
return /*#__PURE__*/React__default["default"].createElement(StyledRadioOption, {
$disabled: !!option.disabled,
key: option.id,
"data-disabled": option.disabled
}, multiple || !required ? /*#__PURE__*/React__default["default"].createElement(Checkbox, {
checked: selected.includes(option.id),
disabled: option.disabled,
onChange: function onChange() {
return !option.disabled && handleSelect(option.id);
},
name: "choose-v2-".concat(option.id),
id: "choose-v2-".concat(option.id)
}) : /*#__PURE__*/React__default["default"].createElement(RadioButton, {
checked: selected.includes(option.id),
disabled: option.disabled,
onChange: function onChange() {
return !option.disabled && handleSelect(option.id);
},
id: "choose-v2-".concat(option.id),
name: "choose-v2-".concat(option.id)
}), /*#__PURE__*/React__default["default"].createElement(StyledLabel, {
$disabled: !!option.disabled,
weight: "regular",
htmlFor: "choose-v2-".concat(option.id)
}, option.name));
})) : /*#__PURE__*/React__default["default"].createElement(StyledFlexContainer, {
ref: flexContainerRef
}, /*#__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);
},
type: type
}, option.name);
}))));
});
ChooseV2.displayName = "ChooseV2";
var StyledLinkElement = styled__default["default"].div.withConfig({
displayName: "Styles__StyledLinkElement",
componentId: "sc-1c1jdox-0"
})([""]);
var StyledLink$1 = 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$1.displayName = "StyledLink";
var _excluded$z = ["children", "className"];
/**
* Back link component
*/
var BackLink = function BackLink(_ref) {
var children = _ref.children,
className = _ref.className,
args = _objectWithoutProperties(_ref, _excluded$z);
return /*#__PURE__*/React__default["default"].createElement(StyledBackLink, _extends({
className: classNames__default["default"]("c-back-link", className)
}, args), children);
};
BackLink.displayName = "BackLink";
var _excluded$y = ["as", "children", "variant", "size", "disabled", "className", "isExternal"];
/**
* 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,
_ref$isExternal = _ref.isExternal,
isExternal = _ref$isExternal === void 0 ? false : _ref$isExternal,
args = _objectWithoutProperties(_ref, _excluded$y);
var Component = as || "a";
return /*#__PURE__*/React__default["default"].createElement(StyledLink$1, _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 || isExternal ? /*#__PURE__*/React__default["default"].createElement(StyledLinkElements, {
className: "c-link__elements"
}, (children instanceof Array ? children : [children]).map(function (value, index) {
return value ? /*#__PURE__*/React__default["default"].createElement(StyledLinkElement, {
className: "c-link__elements__element",
key: index
}, value) : null;
}), isExternal && /*#__PURE__*/React__default["default"].createElement(StyledLinkElement, {
className: "c-link__elements__element"
}, /*#__PURE__*/React__default["default"].createElement(OpenExpandedIcon$1, {
width: 16,
height: 16
}))) : 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$modalTitle = _ref.modalTitle,
modalTitle = _ref$modalTitle === void 0 ? "Save Changes" : _ref$modalTitle,
_ref$modalDescription = _ref.modalDescription,
modalDescription = _ref$modalDescription === void 0 ? "You updated the date. Would you like to save this change?" : _ref$modalDescription,
_ref$modalSaveBtnText = _ref.modalSaveBtnText,
modalSaveBtnText = _ref$modalSaveBtnText === void 0 ? "Save" : _ref$modalSaveBtnText,
_ref$modalCancelBtnTe = _ref.modalCancelBtnText,
modalCancelBtnText = _ref$modalCancelBtnTe === void 0 ? "Discard" : _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,
maxRange = _ref.maxRange;
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());
var title = null;
if (isNonWorkingDay) {
title = typeof nonWorkingDaysOfWeekLabel === "function" ? nonWorkingDaysOfWeekLabel(moment__default["default"].utc(day).format("YYYY-MM-DD")) : nonWorkingDaysOfWeekLabel;
}
return {
matched: isNonWorkingDay,
title
};
},
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,
modalTitle: modalTitle,
modalDescription: modalDescription,
modalSaveBtnText: modalSaveBtnText,
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,
maxRange: maxRange,
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,
maxRange: maxRange,
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$x = ["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$x);
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$w = ["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$w);
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$v = ["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$v);
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$u = ["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$u);
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$t = ["hovered", "className"];
var Toggle = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var hovered = _ref.hovered,
className = _ref.className,
args = _objectWithoutProperties(_ref, _excluded$t);
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$s = ["text", "className"];
var AddToListButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var text = _ref.text,
className = _ref.className,
rest = _objectWithoutProperties(_ref, _excluded$s);
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 SPACE = {
none: "0",
xs: "0.25rem",
sm: "0.5rem",
md: "1rem",
lg: "1.5rem",
xl: "2.5rem"
};
var FLEX_ALIGN = {
start: "flex-start",
center: "center",
end: "flex-end",
stretch: "stretch"
};
/** The default `code` mark: a quiet inline chip that keeps the line intact. */
var StyledCode = styled__default["default"].code.withConfig({
displayName: "Styles__StyledCode",
componentId: "sc-1fss4z4-0"
})(["padding:0 ", ";border-radius:", ";background-color:var(--color-theme-300);font-family:\"SFMono-Regular\",Menlo,Consolas,\"Liberation Mono\",monospace;font-size:0.85em;"], "0.25rem", "0.25rem");
StyledCode.displayName = "StyledCode";
/** The default `link` mark: an inline text link inside flowing content. */
var StyledLink = styled__default["default"].a.withConfig({
displayName: "Styles__StyledLink",
componentId: "sc-1fss4z4-1"
})(["color:var(--color-primary);text-decoration:underline var(--color-primary);text-underline-offset:3px;&:hover{text-decoration:none;}"]);
StyledLink.displayName = "StyledLink";
/**
* The default `code-block`: quiet preformatted content. It stays a bare
* `<pre><code>` on purpose — article surfaces inject a Copy button onto
* every `<pre>` they render.
*/
var StyledCodeBlock = styled__default["default"].pre.withConfig({
displayName: "Styles__StyledCodeBlock",
componentId: "sc-1fss4z4-2"
})(["margin:0;padding:", ";border-radius:", ";background-color:var(--color-theme-200);overflow-x:auto;code{font-family:\"SFMono-Regular\",Menlo,Consolas,\"Liberation Mono\",monospace;font-size:", ";color:var(--color-theme-900);}"], SPACE.md, "0.5rem", "0.875rem");
StyledCodeBlock.displayName = "StyledCodeBlock";
/**
* The default `table` block wrapper: Table ships page-level chrome (outer
* margins) that flowing content does not want — the PortableText Stack owns
* the vertical rhythm here.
*/
var StyledTableBlock = styled__default["default"].div.withConfig({
displayName: "Styles__StyledTableBlock",
componentId: "sc-1fss4z4-3"
})([".c-table__wrap{margin:0;}"]);
StyledTableBlock.displayName = "StyledTableBlock";
/** The default `divider` block: a themed horizontal rule. */
var StyledDivider = styled__default["default"].hr.withConfig({
displayName: "Styles__StyledDivider",
componentId: "sc-1fss4z4-4"
})(["margin:0;border:none;border-top:1px solid var(--border-primary);"]);
StyledDivider.displayName = "StyledDivider";
/**
* The default `list` block; rendered as ul or ol through the `as` prop, and
* tagged `data-portable-list` so the depth rules below scope to design-system
* lists — a stray `<ul>`/`<ol>` from an injected renderer is left untouched.
*
* Nesting works structurally: each level is its own StyledList inside a parent
* `<li>`, so it re-applies its own `padding-left` (indentation compounds) and,
* for ordered levels, restarts numbering. A nested list carries no vertical
* margin, so it hugs the item it belongs to.
*
* Both bullet and numbered levels change their marker by nesting depth, so
* levels stay distinct even where the two interleave:
* bullets disc → circle → square → (disc)
* numbers decimal → lower-alpha → lower-roman → (upper-alpha)
* Depth is counted from the list ancestors themselves (not per-tag), so an
* intervening `<ol>` never throws off a `<ul>`'s depth and vice-versa. The
* rules are ordered shallow-to-deep; a deeper rule is more specific, so it
* wins the cascade for the levels it applies to.
*/
var StyledList$1 = styled__default["default"].ul.withConfig({
displayName: "Styles__StyledList",
componentId: "sc-1fss4z4-5"
})(["margin:0;padding-left:", ";list-style:", " outside;li + li{margin-top:", ";}& ul[data-portable-list]{list-style-type:circle;}& ol[data-portable-list]{list-style-type:lower-alpha;}& [data-portable-list] ul[data-portable-list]{list-style-type:square;}& [data-portable-list] ol[data-portable-list]{list-style-type:lower-roman;}& [data-portable-list] [data-portable-list] ul[data-portable-list]{list-style-type:disc;}& [data-portable-list] [data-portable-list] ol[data-portable-list]{list-style-type:upper-alpha;}"], "1.25rem", function (_ref) {
var $ordered = _ref.$ordered;
return $ordered ? "decimal" : "disc";
}, SPACE.xs);
StyledList$1.displayName = "StyledList";
/**
* Portable Text envelope — the general content contract for structured,
* renderer-independent content (in-app messages, help, changelogs).
*
* The design system owns this envelope and the universal default set below.
* It never hardcodes a product element: concrete elements (callout,
* button-reference, doc-link, …) are defined in the application catalog and
* injected into the Portable Text engine through {@link PortableTextComponents}.
* See README.md next to this file for the full contract.
*/
/* ---- Spans and marks ------------------------------------------------- */
/**
* A mark with data. Parameterless marks travel as plain strings ("strong");
* marks that need data travel as objects discriminated by `type`.
*/
/** The one default mark that carries data. */
/** The leaf of every text run: a piece of text plus the marks wrapping it. */
/** Marks every client understands without injection. */
var PORTABLE_TEXT_DEFAULT_MARKS = ["strong", "em", "code", "link"];
/* ---- Blocks ----------------------------------------------------------- */
/** 1 maps to Title1, 2 to Title2, 3 to Header2 typography. */
/**
* A list item's children are its own spans first, then any nested `list`
* block(s) — the shape that carries multi-level lists. A spans-only item (no
* nested list) is the common, flat case and stays valid unchanged.
*/
/** Screenshots render framed (border, no shadow); illustrations render flat. */
/**
* Video variants name the hosting service; `src` is the canonical video URL.
* Their rendering carries service semantics (URL parsing, embed derivation),
* so it belongs to the application catalog — injected as a `media` block
* override — never to the default set. The default renderer degrades them.
*/
// A Record so the compiler checks the list against the union in both
// directions: a missing and a stray key each fail to build.
var MEDIA_IMAGE_VARIANTS = {
screenshot: true,
illustration: true
};
var isPortableTextMediaImageVariant = function isPortableTextMediaImageVariant(value) {
return typeof value === "string" && value in MEDIA_IMAGE_VARIANTS;
};
/** A table cell is a span array, so inline marks work inside cells. */
/** A themed horizontal rule between sections. Carries no data. */
/**
* Derived from the union's discriminators, so adding a block to the union
* without a renderer entry is a compile error, never silent drift.
*/
// A Record so the compiler checks the list against the union in both
// directions: a missing and a stray key each fail to build.
var DEFAULT_BLOCK_TYPES = {
paragraph: true,
heading: true,
list: true,
"list-item": true,
media: true,
"titled-text": true,
"code-block": true,
table: true,
divider: true
};
/** Blocks every client understands without injection. */
var PORTABLE_TEXT_DEFAULT_BLOCKS = Object.keys(DEFAULT_BLOCK_TYPES);
/* ---- Objects ----------------------------------------------------------- */
/**
* An embedded component the envelope does not interpret: `_type` names an
* application-catalog element, everything else is that element's data. An
* object whose `_type` has no injected renderer renders nothing and is logged.
*/
/** The root of a message body: what an API returns under `content`. */
/* ---- Injection contract ------------------------------------------------ */
/**
* Called once per unknown type instead of rendering it, so content written
* for newer clients degrades silently on older ones.
*/
/**
* What an application injects into the Portable Text engine: renderers for
* its catalog marks and objects, optional overrides for the default blocks,
* and the unknown-type hook.
*/
/* ---- Runtime guards ----------------------------------------------------- */
var isRecord = function isRecord(value) {
return typeof value === "object" && value !== null;
};
var isPortableTextSpan = function isPortableTextSpan(value) {
return isRecord(value) && typeof value.text === "string";
};
var isPortableTextTableRow = function isPortableTextTableRow(value) {
return Array.isArray(value) && value.every(function (cell) {
return Array.isArray(cell) && cell.every(isPortableTextSpan);
});
};
var isPortableTextObjectNode = function isPortableTextObjectNode(value) {
return isRecord(value) && value.type === "object" && typeof value._type === "string";
};
/**
* A block is any non-object node with a string `type`. Unknown block types
* stay valid on purpose — they render nothing on clients that predate them.
* Known types are held to their shape, so a serializer bug (a paragraph
* without `children`, a list of non-nodes) fails here instead of at render.
*/
var _isPortableTextBlock = function isPortableTextBlock(value) {
if (!isRecord(value) || typeof value.type !== "string" || value.type === "object") {
return false;
}
switch (value.type) {
case "paragraph":
return Array.isArray(value.children) && value.children.every(isPortableTextSpan);
case "heading":
return (value.id === undefined || typeof value.id === "string") && Array.isArray(value.children) && value.children.every(isPortableTextSpan);
case "list-item":
// The item's spans, plus optional nested `list` block(s). Widened only
// for nested lists: any other block child (a stray paragraph, an object)
// still fails, so a serializer bug is caught here, not at render.
return Array.isArray(value.children) && value.children.every(function (child) {
return isPortableTextSpan(child) || _isPortableTextBlock(child) && child.type === "list";
});
case "list":
// A list holds `list-item`s only. A sublist emitted as a sibling of the
// items (the classic half-implemented-nesting bug) renders invalid HTML
// — <ul> with a direct <ul> child — so it fails here, not at render.
// `list-item` is validated but sits outside the PortableTextBlock union,
// so the discriminator is checked before isPortableTextBlock narrows it.
return Array.isArray(value.children) && value.children.every(function (child) {
return isRecord(child) && child.type === "list-item" && _isPortableTextBlock(child);
});
case "media":
return typeof value.src === "string";
case "titled-text":
return typeof value.title === "string" && (value.content === undefined || isPortableTextContent(value.content));
case "code-block":
return typeof value.code === "string" && (value.language === undefined || typeof value.language === "string");
case "table":
return isPortableTextTableRow(value.header) && Array.isArray(value.rows) && value.rows.every(isPortableTextTableRow);
case "divider":
return true;
default:
return true;
}
};
var isPortableTextContent = function isPortableTextContent(value) {
return Array.isArray(value) && value.every(function (node) {
return _isPortableTextBlock(node) || isPortableTextObjectNode(node);
});
};
var StyledMedia = styled__default["default"].div.withConfig({
displayName: "Styles__StyledMedia",
componentId: "sc-zjz7mh-0"
})(["display:flex;flex-direction:column;gap:", ";width:100%;.c-media-frame{", "}.c-media-frame img{display:block;width:100%;height:auto;}"], SPACE.sm, function (_ref) {
var $bordered = _ref.$bordered;
return $bordered && styled.css(["overflow:hidden;border:1px solid var(--border-primary);border-radius:", ";"], "0.5rem");
});
StyledMedia.displayName = "StyledMedia";
var _excluded$r = ["src", "alt", "variant", "caption"];
/**
* An image block: a screenshot renders framed (border, no shadow), a flat
* illustration renders without a frame. The caption sits below the frame.
*/
var Media = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var src = _ref.src,
alt = _ref.alt,
_ref$variant = _ref.variant,
variant = _ref$variant === void 0 ? "illustration" : _ref$variant,
caption = _ref.caption,
rest = _objectWithoutProperties(_ref, _excluded$r);
return /*#__PURE__*/React__default["default"].createElement(StyledMedia, _extends({
ref: ref,
$bordered: variant === "screenshot"
}, rest), /*#__PURE__*/React__default["default"].createElement("div", {
className: "c-media-frame"
}, /*#__PURE__*/React__default["default"].createElement("img", {
src: src,
alt: alt !== null && alt !== void 0 ? alt : ""
})), caption ? /*#__PURE__*/React__default["default"].createElement(Caption1, {
color: "secondary"
}, caption) : null);
});
Media.displayName = "Media";
var StyledTitle1 = styled__default["default"](Title1).withConfig({
displayName: "Styles__StyledTitle1",
componentId: "sc-1f6o5d0-0"
})(["letter-spacing:-0.4px;"]);
StyledTitle1.displayName = "StyledTitle1";
var StyledStack = styled__default["default"].div.withConfig({
displayName: "Styles__StyledStack",
componentId: "sc-tbfmh1-0"
})(["display:flex;flex-direction:column;gap:", ";", ""], function (_ref) {
var $space = _ref.$space;
return SPACE[$space];
}, function (_ref2) {
var $align = _ref2.$align;
return $align ? "align-items: ".concat(FLEX_ALIGN[$align], ";") : "";
});
StyledStack.displayName = "StyledStack";
var _excluded$q = ["space", "align", "children"];
var Stack = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var _ref$space = _ref.space,
space = _ref$space === void 0 ? "md" : _ref$space,
align = _ref.align,
children = _ref.children,
rest = _objectWithoutProperties(_ref, _excluded$q);
return /*#__PURE__*/React__default["default"].createElement(StyledStack, _extends({
ref: ref,
$space: space,
$align: align
}, rest), children);
});
Stack.displayName = "Stack";
var _excluded$p = ["title", "variant", "children"];
/** Heading typography of a TitledText — a component prop, not wire data. */
/** Props every heading in the trio accepts: content plus an optional anchor id. */
var BoldTitle2 = function BoldTitle2(_ref) {
var id = _ref.id,
children = _ref.children;
return /*#__PURE__*/React__default["default"].createElement(Title2, {
id: id,
weight: "bold"
}, children);
};
/**
* The one heading trio the envelope renders — TitledText variants and the
* Portable Text `heading` / `titled-text` levels all resolve through this
* map, so the typography can never drift between them.
*/
var titledTextHeadings = {
title1: StyledTitle1,
title2: BoldTitle2,
header2: Header2
};
/** A heading plus body, with typography control on the heading. */
var TitledText = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
var _titledTextHeadings$v;
var title = _ref2.title,
_ref2$variant = _ref2.variant,
variant = _ref2$variant === void 0 ? "header2" : _ref2$variant,
children = _ref2.children,
rest = _objectWithoutProperties(_ref2, _excluded$p);
var Heading = (_titledTextHeadings$v = titledTextHeadings[variant]) !== null && _titledTextHeadings$v !== void 0 ? _titledTextHeadings$v : titledTextHeadings.header2;
return /*#__PURE__*/React__default["default"].createElement(Stack, _extends({
ref: ref,
space: children ? "xs" : "none"
}, rest), /*#__PURE__*/React__default["default"].createElement(Heading, null, title), children);
});
TitledText.displayName = "TitledText";
/**
* The default renderers for the universal set — everything a client renders
* without injection, and nothing more: no product element ever lands here.
* Injected {@link PortableTextComponents} maps take precedence entry by entry.
*/
var portableTextDefaultMarkRenderers = {
strong: function strong(_ref) {
var children = _ref.children;
return /*#__PURE__*/React__default["default"].createElement("strong", null, children);
},
em: function em(_ref2) {
var children = _ref2.children;
return /*#__PURE__*/React__default["default"].createElement("em", null, children);
},
code: function code(_ref3) {
var children = _ref3.children;
return /*#__PURE__*/React__default["default"].createElement(StyledCode, null, children);
},
link: function link(_ref4) {
var mark = _ref4.mark,
children = _ref4.children;
var href = mark === null || mark === void 0 ? void 0 : mark.href;
// A link mark without an href (authored as a plain string) has nowhere
// to go — keep the text, skip the anchor.
if (!href) {
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, children);
}
return /*#__PURE__*/React__default["default"].createElement(StyledLink, {
href: href,
target: "_blank",
rel: "noopener noreferrer"
}, children);
}
};
/** The semantic wire levels resolve to typography only here, in the renderer. */
var HEADING_LEVEL_VARIANTS = {
1: "title1",
2: "title2",
3: "header2"
};
/** The level `heading` and `titled-text` fall back to. */
var DEFAULT_HEADING_LEVEL = 3;
/**
* Resolve a semantic wire level to its typography variant. An absent level is
* the documented default; any other unrecognised level is a serializer bug on
* a fixed 1–3 scale, so it falls back to the default and is logged, per the
* contract's degradation rule.
*/
var headingVariantForLevel = function headingVariantForLevel(level) {
if (level === undefined) {
return HEADING_LEVEL_VARIANTS[DEFAULT_HEADING_LEVEL];
}
var variant = HEADING_LEVEL_VARIANTS[level];
if (!variant) {
console.warn("PortableText: unknown heading level ".concat(level, ", falling back to ").concat(DEFAULT_HEADING_LEVEL, "."));
return HEADING_LEVEL_VARIANTS[DEFAULT_HEADING_LEVEL];
}
return variant;
};
/** Heading levels map to the same typography TitledText uses. */
var HeadingBlock = function HeadingBlock(_ref5) {
var block = _ref5.block,
children = _ref5.children;
var _ref6 = block,
level = _ref6.level,
id = _ref6.id;
var Heading = titledTextHeadings[headingVariantForLevel(level)];
return /*#__PURE__*/React__default["default"].createElement(Heading, {
id: id
}, children);
};
var portableTextDefaultBlockRenderers = {
paragraph: function paragraph(_ref7) {
var children = _ref7.children;
return /*#__PURE__*/React__default["default"].createElement(Body1, null, children);
},
heading: HeadingBlock,
list: function list(_ref8) {
var block = _ref8.block,
children = _ref8.children;
var ordered = block.style === "number";
return (
/*#__PURE__*/
// `data-portable-list` scopes the depth-marker rules in Styles.ts to
// design-system lists, and marks the ancestors those rules count.
React__default["default"].createElement(StyledList$1, {
as: ordered ? "ol" : "ul",
$ordered: ordered,
"data-portable-list": ""
}, children)
);
},
"list-item": function listItem(_ref9) {
var children = _ref9.children;
return /*#__PURE__*/React__default["default"].createElement(Typography, {
variant: "Body 1",
as: "li"
}, children);
},
media: function media(_ref0) {
var block = _ref0.block;
var _ref1 = block,
src = _ref1.src,
alt = _ref1.alt,
variant = _ref1.variant,
caption = _ref1.caption;
// Video (and future) variants carry service semantics, so their renderer
// is application-catalog territory — an injected `media` override. The
// universal set covers images only; anything else degrades and warns, per
// the contract's degradation rule.
if (variant !== undefined && !isPortableTextMediaImageVariant(variant)) {
console.warn("PortableText: no default renderer for media variant \"".concat(variant, "\"."));
return null;
}
return /*#__PURE__*/React__default["default"].createElement(Media, {
src: src,
alt: alt,
variant: variant,
caption: caption
});
},
"titled-text": function titledText(_ref10) {
var block = _ref10.block,
children = _ref10.children;
var _ref11 = block,
title = _ref11.title,
level = _ref11.level;
return /*#__PURE__*/React__default["default"].createElement(TitledText, {
title: title,
variant: headingVariantForLevel(level)
}, children);
},
// No highlighter ships with the default set, so every language — known,
// unknown or absent — is plain preformatted text; the hint travels on
// data-language for surfaces that highlight.
"code-block": function codeBlock(_ref12) {
var block = _ref12.block;
var _ref13 = block,
code = _ref13.code,
language = _ref13.language;
return /*#__PURE__*/React__default["default"].createElement(StyledCodeBlock, {
"data-language": language || undefined
}, /*#__PURE__*/React__default["default"].createElement("code", null, code));
},
table: function table(_ref14) {
var block = _ref14.block,
renderSpans = _ref14.renderSpans;
var _ref15 = block,
header = _ref15.header,
rows = _ref15.rows;
// Standalone (engine-less) use has no span renderer — keep the raw text.
var cell = function cell(spans) {
return renderSpans ? renderSpans(spans) : spans.map(function (span, index) {
return /*#__PURE__*/React__default["default"].createElement(React.Fragment, {
key: index
}, span.text);
});
};
return /*#__PURE__*/React__default["default"].createElement(StyledTableBlock, null, /*#__PURE__*/React__default["default"].createElement(Table, null, /*#__PURE__*/React__default["default"].createElement(Thead, null, /*#__PURE__*/React__default["default"].createElement("tr", null, header.map(function (spans, index) {
return /*#__PURE__*/React__default["default"].createElement("th", {
key: index
}, cell(spans));
}))), /*#__PURE__*/React__default["default"].createElement(Tbody, null, rows.map(function (row, rowIndex) {
return /*#__PURE__*/React__default["default"].createElement("tr", {
key: rowIndex
}, row.map(function (spans, cellIndex) {
return /*#__PURE__*/React__default["default"].createElement("td", {
key: cellIndex
}, cell(spans));
}));
}))));
},
divider: function divider() {
return /*#__PURE__*/React__default["default"].createElement(StyledDivider, null);
}
};
var _excluded$o = ["content", "components", "space"];
var defaultUnknownTypeHandler = function defaultUnknownTypeHandler(kind, type) {
console.warn("PortableText: no renderer for ".concat(kind, " type \"").concat(type, "\"."));
};
/**
* A span's marks wrap its text inside out. An unknown mark is reported and
* skipped — the text stays, because dropping a word would break the sentence.
*/
var renderSpan = function renderSpan(span, ctx) {
var _span$marks;
return ((_span$marks = span.marks) !== null && _span$marks !== void 0 ? _span$marks : []).reduce(function (children, mark) {
var _ctx$components$marks, _ctx$components;
var type = typeof mark === "string" ? mark : mark.type;
var Renderer = (_ctx$components$marks = (_ctx$components = ctx.components) === null || _ctx$components === void 0 || (_ctx$components = _ctx$components.marks) === null || _ctx$components === void 0 ? void 0 : _ctx$components[type]) !== null && _ctx$components$marks !== void 0 ? _ctx$components$marks : portableTextDefaultMarkRenderers[type];
if (!Renderer) {
ctx.report("mark", type);
return children;
}
return /*#__PURE__*/React__default["default"].createElement(Renderer, {
mark: typeof mark === "string" ? undefined : mark
}, children);
}, span.text);
};
/**
* Traversal is structural, so the walker keeps no list of block types of its
* own: a `children` array holds spans or nested blocks, a nested `content`
* holds a node list, and anything else has no children to render.
*/
var renderBlockChildren = function renderBlockChildren(block, ctx) {
var _ref = block,
children = _ref.children,
content = _ref.content;
if (Array.isArray(children)) {
return children.map(function (child, index) {
return /*#__PURE__*/React__default["default"].createElement(React.Fragment, {
key: index
}, isPortableTextSpan(child) ? renderSpan(child, ctx) : _isPortableTextBlock(child) ? renderBlock(child, ctx) : null);
});
}
return isPortableTextContent(content) ? renderNodes(content, ctx) : undefined;
};
var renderBlock = function renderBlock(block, ctx) {
var _ctx$components$block, _ctx$components2;
var type = block.type;
var Renderer = (_ctx$components$block = (_ctx$components2 = ctx.components) === null || _ctx$components2 === void 0 || (_ctx$components2 = _ctx$components2.blocks) === null || _ctx$components2 === void 0 ? void 0 : _ctx$components2[type]) !== null && _ctx$components$block !== void 0 ? _ctx$components$block : portableTextDefaultBlockRenderers[type];
if (!Renderer) {
ctx.report("block", block.type);
return null;
}
// Blocks that carry spans outside `children` (table cells) render them
// through this engine-bound helper, so mark injection works there too.
var renderSpans = function renderSpans(spans) {
return spans.map(function (span, index) {
return /*#__PURE__*/React__default["default"].createElement(React.Fragment, {
key: index
}, renderSpan(span, ctx));
});
};
return /*#__PURE__*/React__default["default"].createElement(Renderer, {
block: block,
renderSpans: renderSpans
}, renderBlockChildren(block, ctx));
};
var renderObject = function renderObject(node, ctx) {
var _ctx$components3;
var Renderer = (_ctx$components3 = ctx.components) === null || _ctx$components3 === void 0 || (_ctx$components3 = _ctx$components3.objects) === null || _ctx$components3 === void 0 ? void 0 : _ctx$components3[node._type];
if (!Renderer) {
ctx.report("object", node._type);
return null;
}
return /*#__PURE__*/React__default["default"].createElement(Renderer, {
node: node
}, isPortableTextContent(node.content) ? renderNodes(node.content, ctx) : undefined);
};
var renderNodes = function renderNodes(nodes, ctx) {
return nodes.map(function (node, index) {
return /*#__PURE__*/React__default["default"].createElement(React.Fragment, {
key: index
}, isPortableTextObjectNode(node) ? renderObject(node, ctx) : renderBlock(node, ctx));
});
};
/**
* The Portable Text engine: walks a {@link PortableTextContent} envelope and
* renders it with the default renderers for the universal set, plus whatever
* the application injects through `components`. The engine itself is hollow —
* it knows no product element; an unknown block or object renders nothing and
* is reported once per type through `onUnknownType` (console.warn when the
* hook is absent).
*/
var PortableText = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
var content = _ref2.content,
components = _ref2.components,
_ref2$space = _ref2.space,
space = _ref2$space === void 0 ? "md" : _ref2$space,
rest = _objectWithoutProperties(_ref2, _excluded$o);
// Memoized so unknown types are reported once per type for a given
// content/components pair, not again on every parent re-render.
var nodes = React.useMemo(function () {
var reported = new Set();
var report = function report(kind, type) {
var _components$onUnknown;
var key = "".concat(kind, ":").concat(type);
if (reported.has(key)) return;
reported.add(key);
((_components$onUnknown = components === null || components === void 0 ? void 0 : components.onUnknownType) !== null && _components$onUnknown !== void 0 ? _components$onUnknown : defaultUnknownTypeHandler)(kind, type);
};
return renderNodes(content, {
components,
report
});
}, [content, components]);
return /*#__PURE__*/React__default["default"].createElement(Stack, _extends({
ref: ref,
space: space
}, rest), nodes);
});
PortableText.displayName = "PortableText";
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$n = ["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$n);
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$m = ["radius"];
var ProgressPie = function ProgressPie(_ref) {
var _ref$radius = _ref.radius,
radius = _ref$radius === void 0 ? 20 : _ref$radius,
rest = _objectWithoutProperties(_ref, _excluded$m);
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 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-progress-blue:#4182f2;--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;--selectable:#d7d7da;--selectable-active:#3b82f6;--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;--color-primary-100:rgba(93,43,255,0.03);--color-primary-opaque-200:#f7f4ff;--muted-text:#6d6d73;--alert-surface:rgba(243,24,72,0.12);--muted-surface:#d7d7da;--muted-surface-text:#303037;--stripe-pattern:#e6e6e9;--drop-overlay-bg:rgba(255,255,255,0.93);--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;--color-primary-100:rgba(41,188,221,0.04);--color-primary-opaque-200:#f0fafc;}.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;--color-primary-100:rgba(65,130,242,0.04);--color-primary-opaque-200:#f2f6fe;}.neon{--color-primary:#67ffc8;--color-secondary:#67ffc8;--color-theme-100:#000000;--color-theme-200:#292b34;--color-theme-300:#202129;--color-theme-400:#17171a;--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:#334447;--color-primary-opaque-400:#3c605a;--color-secondary-opaque-300:#334447;--color-secondary-opaque-400:#3c605a;--body-bg-main:rgb(36,38,46);--body-bg-main-transparent:rgba(36,38,46,0);--page-paper-main:#2f323a;--border-primary:#17171a;--selectable:#17171a;--selectable-active:#3b82f6;--note-bg:#3d3c3c;--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( 47,50,58,0 );--modal-background:rgba(36,38,46,0.7);--highlight-dark:rgba(0,0,0,0.06);--input-background-color:#24262e;--only-white:#ffffff;--only-black:#000000;--color-primary-100:rgba(103,255,200,0.08);--color-primary-opaque-200:#31403b;--muted-text:#cfcfd0;--alert-surface:rgba(243,24,72,0.25);--muted-surface:#b4b4b8;--muted-surface-text:#4a4a4a;--stripe-pattern:#524145;--drop-overlay-bg:rgba(47,50,58,0.93);}.dracula{--color-primary:#bd93f9;--color-secondary:#ff79c6;--color-theme-100:#000000;--color-theme-200:#262735;--color-theme-300:#1c1e27;--color-theme-400:#111217;--color-theme-500:#6272a4;--color-theme-600:#7d8ab8;--color-theme-700:#a4aecd;--color-theme-800:#dededa;--color-theme-900:#f8f8f2;--color-primary-200:rgba(189,147,249,0.05);--color-primary-300:rgba(189,147,249,0.1);--color-primary-400:rgba(189,147,249,0.25);--color-primary-500:rgba(189,147,249,0.5);--color-primary-600:rgba(189,147,249,0.75);--color-primary-700:#bd93f9;--color-primary-800:#d2b6fb;--color-primary-900:#e4d3fd;--color-secondary-200:rgba(255,121,198,0.05);--color-secondary-300:rgba(255,121,198,0.1);--color-secondary-400:rgba(255,121,198,0.25);--color-secondary-500:rgba(255,121,198,0.5);--color-secondary-600:rgba(255,121,198,0.75);--color-secondary-700:#ff79c6;--color-secondary-800:#ffa3d7;--color-secondary-900:#ffc9e7;--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:#42385b;--color-primary-opaque-400:#534472;--color-secondary-opaque-300:#543448;--color-secondary-opaque-400:#6f435f;--body-bg-main:rgb(32,34,44);--body-bg-main-transparent:rgba(32,34,44,0);--page-paper-main:#2c2f3c;--border-primary:#111217;--selectable:#111217;--selectable-active:#3b82f6;--note-bg:#323026;--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(44,47,60,0);--modal-background:rgba(32,34,44,0.7);--highlight-dark:rgba(0,0,0,0.06);--input-background-color:#191a22;--color-primary-100:rgba(189,147,249,0.08);--color-primary-opaque-200:#302c3e;--muted-text:#d0d0cb;--alert-surface:rgba(255,85,85,0.25);--muted-surface:#a9aec4;--muted-surface-text:#282a36;--stripe-pattern:#503d47;--drop-overlay-bg:rgba(44,47,60,0.93);}.one-dark{--color-primary:#61afef;--color-secondary:#c678dd;--color-theme-100:#000000;--color-theme-200:#22262e;--color-theme-300:#1c1f24;--color-theme-400:#191c21;--color-theme-500:#5c6370;--color-theme-600:#767d8a;--color-theme-700:#9aa2b1;--color-theme-800:#cdd3de;--color-theme-900:#dcdfe4;--color-primary-200:rgba(97,175,239,0.05);--color-primary-300:rgba(97,175,239,0.1);--color-primary-400:rgba(97,175,239,0.25);--color-primary-500:rgba(97,175,239,0.5);--color-primary-600:rgba(97,175,239,0.75);--color-primary-700:#61afef;--color-primary-800:#8ec6f4;--color-primary-900:#bcdcf9;--color-secondary-200:rgba(198,120,221,0.05);--color-secondary-300:rgba(198,120,221,0.1);--color-secondary-400:rgba(198,120,221,0.25);--color-secondary-500:rgba(198,120,221,0.5);--color-secondary-600:rgba(198,120,221,0.75);--color-secondary-700:#c678dd;--color-secondary-800:#d79ce8;--color-secondary-900:#e8c2f2;--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:#2d3e51;--color-primary-opaque-400:#364e65;--color-secondary-opaque-300:#402e47;--color-secondary-opaque-400:#543b5d;--body-bg-main:rgb(32,35,42);--body-bg-main-transparent:rgba(32,35,42,0);--page-paper-main:#292d35;--border-primary:#191c21;--selectable:#191c21;--selectable-active:#3b82f6;--note-bg:#302e28;--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(41,45,53,0);--modal-background:rgba(32,35,42,0.7);--highlight-dark:rgba(0,0,0,0.06);--input-background-color:#191c21;--color-primary-100:rgba(97,175,239,0.08);--color-primary-opaque-200:#25313e;--muted-text:#c5cbd6;--alert-surface:rgba(224,108,117,0.25);--muted-surface:#a3aab8;--muted-surface-text:#282c34;--stripe-pattern:#4b3e41;--drop-overlay-bg:rgba(41,45,53,0.93);}html{color-scheme:light;&", "{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);}"], DARK_THEME_MATCH);
var StyledDiv = styled__default["default"].div.withConfig({
displayName: "Styles__StyledDiv",
componentId: "sc-1wapx2a-0"
})(["", " ", " ", " ", ""], FontStyle, BoxSizingStyle, {
"position": "relative",
"display": "inline-block",
"maxWidth": "100%"
}, function (_ref) {
var $multiline = _ref.$multiline;
return $multiline && styled.css(["position:relative;display:flex;"]);
});
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 (_ref2) {
var $disabled = _ref2.$disabled;
return $disabled && styled.css(["visibility:visible;cursor:default !important;"]);
}, function (_ref3) {
var invalid = _ref3.invalid;
return invalid && styled.css(["border:1px solid var(--red-alert);"]);
});
StyledSpan.displayName = "StyledSpan";
var StyledInput$2 = 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;}&:not([data-hover-suppressed]):hover{border-color:var(--color-theme-700);}", ""], {
"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)"
}
}, function (_ref4) {
var invalid = _ref4.invalid;
return invalid && styled.css(["border-color:var(--red-alert) !important;"]);
});
StyledInput$2.displayName = "StyledInput";
var StyledMultilineSpan = styled__default["default"](StyledSpan).withConfig({
displayName: "Styles__StyledMultilineSpan",
componentId: "sc-1wapx2a-3"
})(["cursor:", ";z-index:2;width:100%;visibility:visible !important;&:hover{border-color:", ";}"], function (_ref5) {
var $disabled = _ref5.$disabled;
return $disabled ? "default" : "text !important";
}, function (_ref6) {
var invalid = _ref6.invalid,
$disabled = _ref6.$disabled;
return invalid ? "var(--red-alert)" : $disabled ? "transparent" : "var(--border-primary)";
});
StyledMultilineSpan.displayName = "StyledMultilineSpan";
var StyledTextareaSpan = styled__default["default"](Typography).withConfig({
displayName: "Styles__StyledTextareaSpan",
componentId: "sc-1wapx2a-4"
})(["", " background-color:var(--input-background-color);border-color:var(--color-theme-500);padding-left:4px;padding-right:4px;padding-top:1px;padding-bottom:1px;font-variant-numeric:tabular-nums;outline-width:0px;outline:none;resize:none;white-space:pre-wrap;overflow-wrap:break-word;height:calc(1.5em * 3 + 2px);min-height:calc(1.5em * 3 + 2px);opacity:0;pointer-events:none;z-index:1;&:focus{opacity:1;pointer-events:auto;background-color:var(--input-background-color);border-color:var(--color-primary);outline:none;z-index:3;}&:disabled{opacity:0;pointer-events:none;}", ""], {
"position": "absolute",
"inset": "0px",
"boxSizing": "border-box",
"width": "100%",
"borderRadius": "0.375rem",
"borderWidth": "1px",
"borderStyle": "solid"
}, function (_ref7) {
var invalid = _ref7.invalid;
return invalid && styled.css(["border-color:var(--red-alert) !important;"]);
});
StyledTextareaSpan.displayName = "StyledTextareaSpan";
var _excluded$l = ["className", "variant", "weight", "disabled", "inputProps", "wrapRef", "children", "invalid", "onMouseLeave"];
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,
onMouseLeave = _ref.onMouseLeave,
props = _objectWithoutProperties(_ref, _excluded$l);
var intInputRef = React.useRef(null);
var handleRef = useForkRef(ref, intInputRef);
var _useState = React.useState(false),
_useState2 = _slicedToArray(_useState, 2),
suppressHover = _useState2[0],
setSuppressHover = _useState2[1];
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]);
var handleKeyDown = React.useCallback(function (evt) {
if (evt.key === "Enter" || evt.key === "Escape") {
setSuppressHover(true);
}
typeof (inputProps === null || inputProps === void 0 ? void 0 : inputProps.onKeyDown) === "function" && inputProps.onKeyDown(evt);
}, [inputProps]);
var handleFocus = React.useCallback(function (evt) {
setSuppressHover(false);
typeof (inputProps === null || inputProps === void 0 ? void 0 : inputProps.onFocus) === "function" && inputProps.onFocus(evt);
}, [inputProps]);
var handleMouseLeave = React.useCallback(function (evt) {
setSuppressHover(false);
typeof onMouseLeave === "function" && onMouseLeave(evt);
}, [onMouseLeave]);
return /*#__PURE__*/React__default["default"].createElement(StyledDiv, _extends({
className: className,
ref: wrapRef
}, props, {
onMouseLeave: handleMouseLeave
}), /*#__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$2, _extends({}, inputProps, {
ref: handleRef,
forwardedAs: "input",
variant: variant,
weight: weight,
value: inputProps === null || inputProps === void 0 ? void 0 : inputProps.value,
onBlur: handleBlur,
onKeyDown: handleKeyDown,
onFocus: handleFocus,
disabled: disabled,
"data-form-type": "other",
"data-hover-suppressed": suppressHover ? "" : undefined,
invalid: invalid
})));
});
EditableContent.displayName = "EditableContent";
var _excluded$k = ["onSave", "onCancel", "value", "inputProps", "allowEmptyString", "multiline", "submitOnMetaEnter", "variant", "weight", "disabled", "invalid", "wrapRef", "children"];
var EditableText = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var onSave = _ref.onSave,
onCancel = _ref.onCancel,
value = _ref.value,
inputProps = _ref.inputProps,
allowEmptyString = _ref.allowEmptyString,
_ref$multiline = _ref.multiline,
multiline = _ref$multiline === void 0 ? false : _ref$multiline,
_ref$submitOnMetaEnte = _ref.submitOnMetaEnter,
submitOnMetaEnter = _ref$submitOnMetaEnte === void 0 ? false : _ref$submitOnMetaEnte,
_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,
invalid = _ref.invalid,
wrapRef = _ref.wrapRef,
children = _ref.children,
props = _objectWithoutProperties(_ref, _excluded$k);
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);
var intTextareaRef = React.useRef(null);
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);
}
}
// Reset scroll position for textarea
if (multiline && intTextareaRef !== null && intTextareaRef !== void 0 && intTextareaRef.current) {
intTextareaRef.current.scrollLeft = 0;
}
}, [allowEmptyString, onSave, prevValue, multiline]);
var handleFocus = React.useCallback(function (e) {
if (multiline) {
var textarea = e.target;
var length = textarea.value.length;
textarea.setSelectionRange(length, length);
}
}, [multiline]);
var handleKeyDown = React.useCallback(function (e) {
if (e.key === "Enter" && !multiline) {
e.target.blur();
}
if (e.key === "Enter" && multiline && submitOnMetaEnter && (e.metaKey || e.ctrlKey)) {
e.preventDefault();
e.target.blur();
}
if (e.key === "Escape") {
e.preventDefault();
e.stopPropagation();
escapeRef.current = true;
e.target.blur();
typeof onCancel === "function" && onCancel(e);
}
}, [onCancel, multiline, submitOnMetaEnter]);
var handleChange = React.useCallback(function (e) {
setCurrentValue(e.target.value);
}, []);
if (multiline) {
return /*#__PURE__*/React__default["default"].createElement(StyledDiv, _extends({
ref: ref || wrapRef
}, props, {
$multiline: multiline
}), /*#__PURE__*/React__default["default"].createElement(StyledMultilineSpan, {
variant: variant,
forwardedAs: "span",
weight: weight,
$disabled: disabled,
invalid: invalid,
className: "presentation",
onClick: function onClick() {
if (!disabled && intTextareaRef.current) {
intTextareaRef.current.focus();
}
}
}, children ? children : String(currentValue || "").replace(/\n/g, " ")), /*#__PURE__*/React__default["default"].createElement(StyledTextareaSpan, _extends({
ref: intTextareaRef,
forwardedAs: "textarea",
variant: variant,
weight: weight,
value: currentValue !== null && currentValue !== void 0 ? currentValue : "",
onFocus: handleFocus,
onBlur: handleBlur,
onKeyDown: handleKeyDown,
onChange: handleChange,
disabled: disabled,
invalid: invalid,
"data-form-type": "other",
placeholder: inputProps === null || inputProps === void 0 ? void 0 : inputProps.placeholder,
className: classNames__default["default"]("c-textarea", inputProps === null || inputProps === void 0 ? void 0 : inputProps.className),
rows: 3
}, inputProps)));
}
return /*#__PURE__*/React__default["default"].createElement(EditableContent, _extends({}, props, {
variant: variant,
weight: weight,
disabled: disabled,
invalid: invalid,
wrapRef: wrapRef,
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)
})
}), children);
});
EditableText.displayName = "EditableText";
var _excluded$j = ["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$j);
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$i = ["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$i);
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$h = ["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$h);
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 (_ref0) {
var $visibleFromBreakpoint = _ref0.$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 (_ref1) {
var $renderAs = _ref1.$renderAs,
$gap = _ref1.$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 (_ref10) {
var $renderAs = _ref10.$renderAs;
return $renderAs === "grid" && styled.css(["position:absolute;right:16px;top:20px;"]);
}, function (_ref11) {
var $renderAs = _ref11.$renderAs;
return $renderAs === "list" && styled.css(["justify-self:flex-end;"]);
});
var _excluded$g = ["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$g);
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$f = ["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$f);
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$e = ["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$e);
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$d = ["children"];
var EntitySeparator = function EntitySeparator(_ref) {
var children = _ref.children,
rest = _objectWithoutProperties(_ref, _excluded$d);
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;"]);
var StyledInputSubmenu = styled__default["default"].div.withConfig({
displayName: "Styles__StyledInputSubmenu",
componentId: "sc-lxuoiz-7"
})(["", ""], {
"paddingLeft": "0.75rem",
"paddingRight": "0.75rem",
"paddingBottom": "0.5rem",
"paddingTop": "0.75rem"
});
var StyledInputSubmenuFooter = styled__default["default"](MenuFooter).withConfig({
displayName: "Styles__StyledInputSubmenuFooter",
componentId: "sc-lxuoiz-8"
})(["", " height:auto;"], {
"justifyContent": "space-between",
"paddingTop": "0.75rem"
});
var StyledInput$1 = styled__default["default"](Input).withConfig({
displayName: "Styles__StyledInput",
componentId: "sc-lxuoiz-9"
})(["", ""], {
"marginBottom": "1.25rem",
"width": "100%"
});
StyledMenu.displayName = "StyledMenu";
StyledMenuFooter.displayName = "StyledMenuFooter";
StyledStartMenuList.displayName = "StyledStartMenuList";
StyledStartMenuListItem.displayName = "StyledStartMenuListItem";
StyledStartMenuTitle.displayName = "StyledStartMenuTitle";
StyledStartMenuDot.displayName = "StyledStartMenuDot";
StyledStartMenuNoResults.displayName = "StyledStartMenuNoResults";
StyledInputSubmenu.displayName = "StyledInputSubmenu";
StyledInputSubmenuFooter.displayName = "StyledInputSubmenuFooter";
StyledInput$1.displayName = "StyledInput";
var InputSubmenu = function InputSubmenu(_ref) {
var _ref$value = _ref.value,
value = _ref$value === void 0 ? "" : _ref$value,
placeholder = _ref.placeholder,
saveLabel = _ref.saveLabel,
_ref$clearLabel = _ref.clearLabel,
clearLabel = _ref$clearLabel === void 0 ? "Clear" : _ref$clearLabel,
onSave = _ref.onSave,
onClear = _ref.onClear;
var _useState = React.useState(value),
_useState2 = _slicedToArray(_useState, 2),
inputValue = _useState2[0],
setInputValue = _useState2[1];
React.useEffect(function () {
setInputValue(value);
}, [value]);
var handleChange = React.useCallback(function (event) {
setInputValue(event.target.value);
}, []);
var handleSave = React.useCallback(function () {
onSave(inputValue);
}, [inputValue, onSave]);
var handleKeyDown = React.useCallback(function (event) {
if (event.key === "Enter") {
onSave(inputValue);
}
}, [inputValue, onSave]);
return /*#__PURE__*/React__default["default"].createElement(StyledInputSubmenu, null, /*#__PURE__*/React__default["default"].createElement(StyledInput$1, {
value: inputValue,
onChange: handleChange,
onKeyDown: handleKeyDown,
placeholder: placeholder
}), /*#__PURE__*/React__default["default"].createElement(StyledInputSubmenuFooter, null, /*#__PURE__*/React__default["default"].createElement(Button, {
variant: "primary",
size: "small",
onClick: handleSave
}, saveLabel), /*#__PURE__*/React__default["default"].createElement(Button, {
variant: "text gray",
size: "small",
onClick: onClear
}, clearLabel)));
};
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,
type = _ref2.type;
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 (type === "input" || (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$c = ["id", "title", "submenu", "searchPlaceholder", "disableInternalSort", "isSingleSelect", "defaultValue", "type", "inputPlaceholder", "saveLabel", "clearLabel"];
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"),
_useState0 = _slicedToArray(_useState9, 2),
enteredMenu = _useState0[0],
setEnteredMenu = _useState0[1];
var _useState1 = React.useState(function () {
return selected;
}),
_useState10 = _slicedToArray(_useState1, 2),
filter = _useState10[0],
setFilter = _useState10[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 handleInputSave = React.useCallback(function (id, value) {
var newFilters = {};
if (value.trim()) {
newFilters = _objectSpread2(_objectSpread2({}, filter), {}, {
[id]: [value]
});
} else {
newFilters = _objectSpread2({}, filter);
delete newFilters[id];
}
setFilter(newFilters);
onChange(newFilters);
setIndex();
}, [filter, onChange, setIndex]);
var handleInputClear = React.useCallback(function (id) {
var newFilters = _objectSpread2({}, filter);
delete newFilters[id];
setFilter(newFilters);
onChange(newFilters);
setIndex();
}, [filter, onChange, setIndex]);
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.type === "input" || ((_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$, _filter$id, _filter$id2;
var id = _ref2.id,
title = _ref2.title,
submenu = _ref2.submenu,
searchPlaceholder = _ref2.searchPlaceholder,
disableInternalSort = _ref2.disableInternalSort,
isSingleSelect = _ref2.isSingleSelect,
defaultValue = _ref2.defaultValue,
_ref2$type = _ref2.type,
submenuType = _ref2$type === void 0 ? "select" : _ref2$type,
inputPlaceholder = _ref2.inputPlaceholder,
_ref2$saveLabel = _ref2.saveLabel,
saveLabel = _ref2$saveLabel === void 0 ? "Save" : _ref2$saveLabel,
clearLabel = _ref2.clearLabel,
rest = _objectWithoutProperties(_ref2, _excluded$c);
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
}, submenuType === "input" ? /*#__PURE__*/React__default["default"].createElement(InputSubmenu, {
value: (_filter$id$ = (_filter$id = filter[id]) === null || _filter$id === void 0 ? void 0 : _filter$id[0]) !== null && _filter$id$ !== void 0 ? _filter$id$ : "",
placeholder: inputPlaceholder,
saveLabel: saveLabel,
clearLabel: clearLabel,
onSave: function onSave(value) {
return handleInputSave(id, value);
},
onClear: function onClear() {
return handleInputClear(id);
}
}) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__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$id2 = filter[id]) !== null && _filter$id2 !== void 0 && _filter$id2.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 ContentStepperContext = /*#__PURE__*/React.createContext(undefined);
var ContentStepperContextProvider = function ContentStepperContextProvider(_ref) {
var children = _ref.children,
value = _ref.value;
return /*#__PURE__*/React__default["default"].createElement(ContentStepperContext.Provider, {
value: value
}, children);
};
var useContentStepperContext = function useContentStepperContext() {
var context = React.useContext(ContentStepperContext);
if (context === undefined) {
throw new Error("useContentWizardContext must be used within a ContentWizardContextProvider");
}
return context;
};
var ContentStep = function ContentStep(_ref) {
var children = _ref.children,
className = _ref.className;
return /*#__PURE__*/React__default["default"].createElement("div", {
className: className
}, children);
};
ContentStep.displayName = "ContentStep";
var StyledContentWizardContainer = styled__default["default"].div.withConfig({
displayName: "Styles__StyledContentWizardContainer",
componentId: "sc-16hr2bg-0"
})(["height:", ";width:100%;position:relative;overflow:hidden;"], function (_ref) {
var $height = _ref.$height;
return $height;
});
var StyledStepWrapper = styled__default["default"].div.withConfig({
displayName: "Styles__StyledStepWrapper",
componentId: "sc-16hr2bg-1"
})(["width:100%;"]);
var ContentStepper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var children = _ref.children,
className = _ref.className,
controlledStep = _ref.step,
onStepChange = _ref.onStepChange;
var childrenCollection = React.useMemo(function () {
return React__default["default"].Children.toArray(children);
}, [children]);
var _useState = React.useState(0),
_useState2 = _slicedToArray(_useState, 2),
internalStep = _useState2[0],
setInternalStep = _useState2[1];
var _useState3 = React.useState(0),
_useState4 = _slicedToArray(_useState3, 2),
enteredStep = _useState4[0],
setEnteredStep = _useState4[1];
var _useState5 = React.useState("auto"),
_useState6 = _slicedToArray(_useState5, 2),
height = _useState6[0],
setHeight = _useState6[1];
var previousStepRef = React.useRef(0);
// Use controlled step if provided, otherwise use internal state
var activeStep = controlledStep !== undefined ? controlledStep : internalStep;
// Calculate direction synchronously based on step change
var isLeft = React.useMemo(function () {
var prevStep = previousStepRef.current;
var direction = activeStep > prevStep;
previousStepRef.current = activeStep;
return direction;
}, [activeStep]);
var setActiveStep = React.useCallback(function (newStep) {
if (newStep === activeStep) return;
if (controlledStep === undefined) {
setInternalStep(newStep);
}
onStepChange === null || onStepChange === void 0 || onStepChange(newStep);
}, [activeStep, controlledStep, onStepChange]);
var goNext = React.useCallback(function () {
var nextIndex = Math.min(activeStep + 1, childrenCollection.length - 1);
setActiveStep(nextIndex);
}, [activeStep, childrenCollection.length, setActiveStep]);
var goPrevious = React.useCallback(function () {
var prevIndex = Math.max(activeStep - 1, 0);
setActiveStep(prevIndex);
}, [activeStep, setActiveStep]);
var handleHeight = React.useCallback(function (element) {
setHeight("".concat(element.offsetHeight, "px"));
}, []);
var handleEntered = React.useCallback(function (stepIndex) {
setEnteredStep(stepIndex);
}, []);
var renderSteps = React.useMemo(function () {
return childrenCollection.map(function (child, index) {
var element = child;
if ((element === null || element === void 0 ? void 0 : element.type) === ContentStep) {
var stepContent = /*#__PURE__*/React__default["default"].cloneElement(element, {
key: "step-".concat(index),
index,
isFirst: index === 0,
isLast: index === childrenCollection.length - 1
});
return /*#__PURE__*/React__default["default"].createElement(SlideLeftRightTransition, {
key: "transition-".concat(index),
in: activeStep === index,
direction: isLeft ? "left" : "right",
onEnter: handleHeight,
onEntered: function onEntered() {
return handleEntered(index);
}
}, /*#__PURE__*/React__default["default"].createElement(FocusLock.MoveFocusInside, {
disabled: enteredStep !== index
}, /*#__PURE__*/React__default["default"].createElement(StyledStepWrapper, null, stepContent)));
}
return null;
});
}, [activeStep, childrenCollection, isLeft, enteredStep, handleHeight, handleEntered]);
return /*#__PURE__*/React__default["default"].createElement(ContentStepperContextProvider, {
value: {
activeStep,
setActiveStep,
goNext,
goPrevious,
direction: isLeft ? "left" : "right",
totalSteps: childrenCollection.length
}
}, /*#__PURE__*/React__default["default"].createElement(ResizeTransition, {
in: true,
style: {
height,
width: "100%"
}
}, /*#__PURE__*/React__default["default"].createElement(StyledContentWizardContainer, {
ref: ref,
className: className,
$height: height
}, renderSteps)));
});
ContentStepper.displayName = "ContentStepper";
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$b = ["limit", "size", "children", "hasTooltip", "className"];
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,
className = _ref.className,
rest = _objectWithoutProperties(_ref, _excluded$b);
// 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({
className: className,
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)({
whiteSpace: "break-spaces",
lineHeight: "18px"
});
var _StyledLengthCountStyles = styled__default["default"](LengthCountStyles).withConfig({
displayName: "AvatarGroup___StyledLengthCountStyles",
componentId: "sc-1rsx1j5-0"
})(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$a = ["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$a);
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$9 = ["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$9);
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)({
width: 24,
height: 24,
borderRadius: "100%"
});
var _StyledSkeletonLoader2 = styled__default["default"](SkeletonLoader).withConfig({
displayName: "CommandPaletteItem___StyledSkeletonLoader2",
componentId: "sc-6tfj5q-0"
})(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$8 = ["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$8);
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$7 = ["children"];
// eslint-disable-next-line @typescript-eslint/no-empty-interface
var EmptySlateFooter = function EmptySlateFooter(_ref) {
var children = _ref.children,
rest = _objectWithoutProperties(_ref, _excluded$7);
return /*#__PURE__*/React__default["default"].createElement(FooterContainer, rest, children);
};
EmptySlateFooter.displayName = "EmptySlateFooter";
var _excluded$6 = ["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$6);
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);background-image:linear-gradient( var(--color-primary-300),var(--color-primary-300) );border-radius:8px;border:1px solid var(--color-primary);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:calc(50% + var(--toolbar-inline-offset,0px));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$5 = ["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$5);
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));
})));
};
var StepPulse = styled.keyframes(["0%,100%{opacity:1;}50%{opacity:0.35;}"]);
var StepSequenceStyle = styled.css(["", " display:inline-flex;align-items:center;padding:6px 8px;.c-step-sequence__step--success,.c-step-sequence__connector--success{--step-sequence-surface:var(--color-sucess-green);--step-sequence-ring:var(--color-sucess-green);--step-sequence-line:var(--color-sucess-green);}.c-step-sequence__step--info,.c-step-sequence__connector--info{--step-sequence-surface:var(--color-progress-blue);--step-sequence-ring:var(--color-progress-blue);--step-sequence-line:var(--color-progress-blue);}.c-step-sequence__step--warning,.c-step-sequence__connector--warning{--step-sequence-surface:var(--color-orange);--step-sequence-ring:var(--color-orange);--step-sequence-line:var(--color-orange);}.c-step-sequence__step--danger,.c-step-sequence__connector--danger{--step-sequence-surface:var(--red-alert);--step-sequence-ring:var(--red-alert);--step-sequence-line:var(--red-alert);}.c-step-sequence__step--neutral,.c-step-sequence__connector--neutral{--step-sequence-surface:var(--color-theme-500);--step-sequence-ring:var(--color-theme-400);--step-sequence-line:var(--color-theme-400);}.c-step-sequence__step{width:22px;height:22px;border-radius:50%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;flex-shrink:0;svg{display:block;}}.c-step-sequence__step--solid{background:var(--step-sequence-surface);}.c-step-sequence__step--outline{background:transparent;border:2px solid var(--step-sequence-ring);}.c-step-sequence__step--dashed{background:transparent;border:2px dashed var(--step-sequence-ring);}.c-step-sequence__step--pulse > *{animation:", " 1.4s ease-in-out infinite;}.c-step-sequence__dot{width:6px;height:6px;border-radius:50%;background:var(--step-sequence-surface);}.c-step-sequence__step--solid .c-step-sequence__dot{width:8px;height:8px;background:var(--only-white);}.c-step-sequence__connector{width:13px;height:2px;flex-shrink:0;background:var(--step-sequence-line);}"], BoxSizingStyle, StepPulse);
var StyledStepSequenceTrigger = styled__default["default"](Trigger).withConfig({
displayName: "Styles__StyledStepSequenceTrigger",
componentId: "sc-hp7ywn-0"
})(["", " border-radius:8px;transition:background-color 200ms ease;&:hover{background-color:var(--color-theme-200);}&:focus-visible{outline:2px solid var(--color-primary);outline-offset:1px;}"], StepSequenceStyle);
StyledStepSequenceTrigger.displayName = "StyledStepSequenceTrigger";
var StyledStepSequence = styled__default["default"].div.withConfig({
displayName: "Styles__StyledStepSequence",
componentId: "sc-hp7ywn-1"
})(["", ""], StepSequenceStyle);
StyledStepSequence.displayName = "StyledStepSequence";
/** Token colour role a step and its connector are painted with */
/** Ring style of a step: filled, toned outline or dashed outline */
var StepSequence = function StepSequence(_ref) {
var steps = _ref.steps,
onClick = _ref.onClick,
ariaLabel = _ref.ariaLabel,
className = _ref.className;
if (!steps.length) {
return null;
}
var content = steps.map(function (step, index) {
var _step$key, _step$connectorTone, _step$tooltip, _step$icon;
return /*#__PURE__*/React__default["default"].createElement(React.Fragment, {
key: (_step$key = step.key) !== null && _step$key !== void 0 ? _step$key : "step-".concat(index)
}, index > 0 && /*#__PURE__*/React__default["default"].createElement("span", {
className: classNames__default["default"]("c-step-sequence__connector", "c-step-sequence__connector--".concat((_step$connectorTone = step.connectorTone) !== null && _step$connectorTone !== void 0 ? _step$connectorTone : step.tone))
}), /*#__PURE__*/React__default["default"].createElement(Tooltip, {
title: (_step$tooltip = step.tooltip) !== null && _step$tooltip !== void 0 ? _step$tooltip : "",
disable: !step.tooltip
}, /*#__PURE__*/React__default["default"].createElement("span", {
className: classNames__default["default"]("c-step-sequence__step", "c-step-sequence__step--".concat(step.tone), "c-step-sequence__step--".concat(step.fill), {
"c-step-sequence__step--pulse": step.pulse
})
}, (_step$icon = step.icon) !== null && _step$icon !== void 0 ? _step$icon : /*#__PURE__*/React__default["default"].createElement("span", {
className: "c-step-sequence__dot"
}))));
});
if (onClick) {
return /*#__PURE__*/React__default["default"].createElement(StyledStepSequenceTrigger, {
className: classNames__default["default"]("c-step-sequence", className),
onClick: onClick,
"aria-label": ariaLabel
}, content);
}
return /*#__PURE__*/React__default["default"].createElement(StyledStepSequence, {
className: classNames__default["default"]("c-step-sequence", className),
"aria-label": ariaLabel
}, content);
};
StepSequence.displayName = "StepSequence";
/** The fifteen states a source-code spine node can be in */
/* Glyph colours: light on a filled step, the step's own tone on an outlined
one — the component paints rings and lines, the caller paints glyphs. */
var ON_SOLID = "var(--only-white)";
var AMBER = "var(--color-orange)";
/* Glyphs render at an even 12px: a 13px glyph in the 22px solid circle (or
the 18px content box of an outlined one) leaves half-pixel margins, so the
browser snaps it visibly off-centre — 12px keeps every margin a whole pixel
and renders the 2-unit strokes of the 24-grid icons at exactly 1px. */
var GLYPH = 12;
/**
* The fifteen spine states as generic `StepSequence` steps — the single
* source both the Spine State Explorer story and the app's source-code
* spine render from.
*
* A connector takes the tone of the step it points into, so `connectorTone`
* is only spelled out for a stage that has not been reached yet (queued /
* manual / locked) — there the line stays the faint neutral grey.
*/
var SPINE_STEP = {
done: {
tone: "success",
fill: "solid",
icon: /*#__PURE__*/React__default["default"].createElement(CheckIcon$1, {
fill: ON_SOLID,
width: GLYPH,
height: GLYPH
})
},
merged: {
tone: "success",
fill: "solid",
icon: /*#__PURE__*/React__default["default"].createElement(GitMergeIcon$1, {
stroke: ON_SOLID,
width: GLYPH,
height: GLYPH
})
},
committed: {
tone: "success",
fill: "solid",
icon: /*#__PURE__*/React__default["default"].createElement(GitCommitIcon$1, {
stroke: ON_SOLID,
width: GLYPH,
height: GLYPH
})
},
progress: {
tone: "info",
fill: "solid",
pulse: true
},
review: {
tone: "info",
fill: "solid",
icon: /*#__PURE__*/React__default["default"].createElement(EyeIcon$1, {
fill: ON_SOLID,
width: GLYPH,
height: GLYPH
})
},
active: {
tone: "info",
fill: "solid",
icon: /*#__PURE__*/React__default["default"].createElement(GitBranchIcon$1, {
stroke: ON_SOLID,
width: GLYPH,
height: GLYPH
})
},
queued: {
tone: "info",
fill: "outline",
icon: /*#__PURE__*/React__default["default"].createElement(ClockIcon$1, {
fill: "var(--color-progress-blue)",
width: GLYPH,
height: GLYPH
}),
connectorTone: "neutral"
},
failed: {
tone: "danger",
fill: "solid",
icon: /*#__PURE__*/React__default["default"].createElement(CloseIcon$1, {
fill: ON_SOLID,
width: GLYPH,
height: GLYPH
})
},
warning: {
tone: "warning",
fill: "solid",
icon: /*#__PURE__*/React__default["default"].createElement(WarningIcon$1, {
fill: ON_SOLID,
width: GLYPH,
height: GLYPH
})
},
conflict: {
tone: "danger",
fill: "solid",
icon: /*#__PURE__*/React__default["default"].createElement(WarningTriangleIcon$1, {
fill: ON_SOLID,
width: GLYPH,
height: GLYPH
})
},
skipped: {
tone: "neutral",
fill: "solid",
icon: /*#__PURE__*/React__default["default"].createElement(CircleSlashIcon$1, {
fill: ON_SOLID,
width: GLYPH,
height: GLYPH
})
},
manual: {
tone: "warning",
fill: "outline",
icon: /*#__PURE__*/React__default["default"].createElement(ClockIcon$1, {
fill: AMBER,
width: GLYPH,
height: GLYPH
}),
connectorTone: "neutral"
},
locked: {
tone: "warning",
fill: "outline",
icon: /*#__PURE__*/React__default["default"].createElement(LockIcon$1, {
fill: AMBER,
width: GLYPH,
height: GLYPH
}),
connectorTone: "neutral"
},
draft: {
tone: "neutral",
fill: "dashed",
icon: /*#__PURE__*/React__default["default"].createElement(GitPullRequestIcon$1, {
stroke: "var(--color-theme-600)",
width: GLYPH,
height: GLYPH
})
},
todo: {
tone: "neutral",
fill: "outline"
}
};
/**
* StackedCard — shared constants and the class/token contract.
*
* Kept in their own module so `Styles.ts` can consume them without importing a
* component file (and creating a cycle).
*/
/** Reference width of a stacked card, from the concept. */
var STACKED_CARD_WIDTH = 260;
/** Reference corner radius of a stacked card. */
var STACKED_CARD_RADIUS = 8;
/**
* Default cover `aspect-ratio`. Covers reserve their height with a ratio (not a
* pixel height) so a late image never reflows the card, and so the skeleton
* that stands in for it occupies exactly the same box.
*/
var STACKED_CARD_COVER_RATIO = "260 / 132";
/**
* Controls (a cover button, an entity "…" menu, the resize handle) are hidden
* until the card is hovered OR holds focus. Put this class on anything that
* should follow that reveal rule.
*/
var STACKED_CARD_CONTROL_CLASS = "sc-control";
/**
* Marks a child of a `row`-direction `StackedCardRow` as fixed width: it keeps
* its own width while the remaining children share what is left.
*/
var STACKED_CARD_FIXED_ATTR = "data-fixed";
/**
* Named row roles. The row is the layout increment: `title`/`footer` carry the
* system padding, `meta` is a tighter properties line, `cover` bleeds to the
* edge, and `custom` starts from the system padding for the caller to adjust.
*/
/** Role → default padding. */
var STACKED_CARD_ROLE_PADDING = {
cover: "0",
title: "8px 12px",
meta: "2px 12px 4px",
footer: "8px 12px",
custom: "8px 12px"
};
/**
* StackedCard chrome glyphs.
*
* These are part of the card's own chrome — they act on the CARD (collapse the
* cover, remove the cover, resize the card), never on the entity a card
* represents. They ship with the component rather than coming from the icon
* collection so a facade never has to re-pick them and every stacked card
* reads the same.
*/
/** Collapse the cover down to its thin strip. */
var StackedCardCollapseGlyph = function StackedCardCollapseGlyph() {
return /*#__PURE__*/React__default["default"].createElement("svg", {
viewBox: "0 0 16 16",
fill: "none",
"aria-hidden": "true"
}, /*#__PURE__*/React__default["default"].createElement("path", {
d: "M6.5 2.5v4h-4M9.5 13.5v-4h4",
stroke: "currentColor",
strokeWidth: "1.5",
strokeLinecap: "round",
strokeLinejoin: "round"
}));
};
/** Expand a collapsed cover — the inverse of collapse, shown on the strip. */
var StackedCardExpandGlyph = function StackedCardExpandGlyph() {
return /*#__PURE__*/React__default["default"].createElement("svg", {
viewBox: "0 0 16 16",
fill: "none",
"aria-hidden": "true"
}, /*#__PURE__*/React__default["default"].createElement("path", {
d: "M2.5 6.5v-4h4M13.5 9.5v4h-4",
stroke: "currentColor",
strokeWidth: "1.5",
strokeLinecap: "round",
strokeLinejoin: "round"
}));
};
/** Drop the cover entirely. */
var StackedCardRemoveCoverGlyph = function StackedCardRemoveCoverGlyph() {
return /*#__PURE__*/React__default["default"].createElement("svg", {
viewBox: "0 0 16 16",
fill: "none",
"aria-hidden": "true"
}, /*#__PURE__*/React__default["default"].createElement("rect", {
x: "2.25",
y: "3.75",
width: "11.5",
height: "8.5",
rx: "1.5",
stroke: "currentColor",
strokeWidth: "1.5"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M6 9.5L10 6M10 9.5L6 6",
stroke: "currentColor",
strokeWidth: "1.5",
strokeLinecap: "round"
}));
};
/** The bottom-right resize grip. */
var StackedCardResizeHandleGlyph = function StackedCardResizeHandleGlyph() {
return /*#__PURE__*/React__default["default"].createElement("svg", {
width: "14",
height: "14",
viewBox: "0 0 14 14",
fill: "none",
"aria-hidden": "true"
}, /*#__PURE__*/React__default["default"].createElement("path", {
d: "M12 6v6H6M12 9.5L9.5 12",
stroke: "currentColor",
strokeWidth: "1.5",
strokeLinecap: "round"
}));
};
/**
* StackedCard resize policy — pure math.
*
* The card reports intent; the HOST applies a resize policy (spec §7). This
* module is that policy, packaged as pure functions so the SAME code path
* serves the pointer drag and the keyboard resize. Nothing here touches the
* DOM, React or the card's content: it takes a start size, a delta and a
* policy, and returns a clamped size. `useStackedCardResize` wires events to
* it; the card's intrinsic content minimum is measured by the host and passed
* in as `contentMin`, so this module knows nothing about heroes or footers.
*
* The policy has four parts:
* - bounds — optional min/max per axis; unset means unbounded.
* - proportional — lock the aspect ratio captured at the start of the gesture;
* the scale is clamped by the BINDING axis so the ratio never
* distorts at a bound.
* - step — optional grid snap; proportion wins over the grid.
* - content min — the effective min is max(policyMin, contentMin) per axis,
* so a card can never be crushed below what its content needs.
*/
/** The card's intrinsic minimum, measured from its real content. */
/** The size captured at the start of a gesture (pointer down or a key press). */
/**
* `width` locks the vertical axis: an auto-height card takes a width and lets
* its rows set the height, so the gesture's vertical component is ignored.
*/
/** Which input drove a resize event. Hosts log undo entries per source. */
/** Keyboard resize nudges by the policy step, or this when no step is set. */
var DEFAULT_KEYBOARD_STEP = 8;
/** Shift + arrow resizes by a larger increment (the familiar coarse nudge). */
var SHIFT_STEP_MULTIPLIER = 4;
/** Keys the separator handles; everything else falls through to the browser. */
var RESIZE_KEYS = ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"];
var isResizeKey = function isResizeKey(key) {
return RESIZE_KEYS.includes(key);
};
var clamp = function clamp(v, lo, hi) {
return Math.min(hi !== null && hi !== void 0 ? hi : Number.POSITIVE_INFINITY, Math.max(lo, v));
};
var snap = function snap(v, step) {
return step && step > 0 ? Math.round(v / step) * step : v;
};
var makeStart = function makeStart(size, contentMin) {
return {
w: size.w,
h: size.h,
contentMin
};
};
/**
* The effective bounds a size is clamped to: the policy min floored by the
* content min, and the policy max (unbounded when unset). Independent of any
* live gesture, so a host can also use it for the aria value and Home/End.
*/
var effectiveBounds = function effectiveBounds(policy, contentMin) {
var _policy$minW, _policy$minH, _policy$maxW, _policy$maxH;
return {
wMin: Math.max((_policy$minW = policy.minW) !== null && _policy$minW !== void 0 ? _policy$minW : 0, contentMin.w),
hMin: Math.max((_policy$minH = policy.minH) !== null && _policy$minH !== void 0 ? _policy$minH : 0, contentMin.h),
wMax: (_policy$maxW = policy.maxW) !== null && _policy$maxW !== void 0 ? _policy$maxW : Number.POSITIVE_INFINITY,
hMax: (_policy$maxH = policy.maxH) !== null && _policy$maxH !== void 0 ? _policy$maxH : Number.POSITIVE_INFINITY
};
};
/**
* Whether an axis has a floor anyone asked for. `effectiveBounds` reports 0 for
* an unset minimum — correct as a clamp, but not something Home should jump to:
* an axis nobody gave a minimum must not collapse to nothing.
*/
var hasFloor = function hasFloor(policyMin, contentMin) {
return policyMin !== undefined || contentMin > 0;
};
/**
* Apply a delta to the start size under the policy — the single path for both
* inputs.
*
* `constrain` is the transient Shift-to-constrain lock: a free-form policy
* behaves proportionally for that one gesture; a proportional policy is already
* locked and ignores it. `axis: "width"` drops the gesture's vertical component;
* the height then holds still in free-form mode, and still follows the ratio in
* proportional mode (that is what proportional means).
*/
var applyResize = function applyResize(start, delta, policy) {
var opts = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
var _effectiveBounds = effectiveBounds(policy, start.contentMin),
wMin = _effectiveBounds.wMin,
hMin = _effectiveBounds.hMin,
wMax = _effectiveBounds.wMax,
hMax = _effectiveBounds.hMax;
var widthOnly = opts.axis === "width";
var dx = delta.dx;
var dy = widthOnly ? 0 : delta.dy;
// A ratio needs two non-zero sides to be a ratio at all; a width-only card
// parks a placeholder height, so fall back to free-form rather than dividing
// by zero.
var proportional = (policy.proportional || opts.constrain === true) && start.w > 0 && start.h > 0;
var w;
var h;
if (proportional) {
// one scale drives both axes; the corner's dominant direction wins, so a
// vertical drag is as effective as a horizontal one
var sW = (start.w + dx) / start.w;
var sH = (start.h + dy) / start.h;
var scale = Math.abs(sW - 1) >= Math.abs(sH - 1) ? sW : sH;
// step: proportion wins over the grid. Snap through the SCALE (driven off
// the width edge) so both axes move together and the ratio survives; the
// grid yields whenever honouring it would cost the ratio.
if (policy.step) {
scale = snap(start.w * scale, policy.step) / start.w;
}
// Then clamp the scale so both axes stay in bounds (the binding constraint):
// the ratio can never break at a bound — whichever edge is limiting stops
// both. The clamp comes last on purpose: a bound is a hard stop, so the card
// sits exactly on it rather than at the nearest grid line inside it.
var scaleMin = Math.max(wMin / start.w, hMin / start.h);
var scaleMax = Math.min(wMax / start.w, hMax / start.h);
scale = clamp(scale, scaleMin, Math.max(scaleMin, scaleMax));
w = start.w * scale;
h = start.h * scale;
} else {
w = clamp(snap(start.w + dx, policy.step), wMin, wMax);
h = widthOnly ? start.h : clamp(snap(start.h + dy, policy.step), hMin, hMax);
}
return {
w: Math.round(w),
h: Math.round(h)
};
};
/**
* Translate a resize key into the next size, reusing `applyResize` so the
* keyboard clamps exactly like the pointer. Arrows nudge by the step (Shift ×4);
* Home/End jump to the min/max of the allowed range, leaving any axis without
* that bound where it is. Returns null for a key the handle does not own, and
* for a vertical key on a width-only card.
*/
var keyboardResize = function keyboardResize(key, size, policy, contentMin) {
var opts = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
var widthOnly = opts.axis === "width";
if (widthOnly && (key === "ArrowUp" || key === "ArrowDown")) return null;
var base = policy.step && policy.step > 0 ? policy.step : DEFAULT_KEYBOARD_STEP;
var step = base * (opts.shiftKey ? SHIFT_STEP_MULTIPLIER : 1);
var start = makeStart(size, contentMin);
var b = effectiveBounds(policy, contentMin);
var apply = function apply(delta) {
return applyResize(start, delta, policy, {
axis: opts.axis
});
};
/**
* Home and End are absolute jumps to a bound, not nudges, so they ignore the
* grid: landing 4px off the minimum because that is where the nearest grid
* line fell would mean the keyboard could never reach the bound the pointer
* stops at.
*/
var jump = function jump(delta) {
return applyResize(start, delta, _objectSpread2(_objectSpread2({}, policy), {}, {
step: 0
}), {
axis: opts.axis
});
};
switch (key) {
case "ArrowRight":
return apply({
dx: step,
dy: 0
});
case "ArrowLeft":
return apply({
dx: -step,
dy: 0
});
case "ArrowDown":
return apply({
dx: 0,
dy: step
});
case "ArrowUp":
return apply({
dx: 0,
dy: -step
});
case "Home":
// jump to the min corner; an axis with no floor of its own stays put
return jump({
dx: hasFloor(policy.minW, contentMin.w) ? b.wMin - size.w : 0,
dy: !widthOnly && hasFloor(policy.minH, contentMin.h) ? b.hMin - size.h : 0
});
case "End":
// jump to the max corner; an unbounded axis simply doesn't move
return jump({
dx: Number.isFinite(b.wMax) ? b.wMax - size.w : 0,
dy: !widthOnly && Number.isFinite(b.hMax) ? b.hMax - size.h : 0
});
default:
return null;
}
};
/**
* The handle's `aria-valuenow`: the current size as a percent (0–100) of its
* allowed range. The corner resizes both axes, but the value must be a single
* number, so it reports the WIDTH axis — the one axis the fixed-box and the
* width-only cards share. Returns 0 when the range isn't finite (no max bound).
*/
var measurePercent = function measurePercent(size, policy, contentMin) {
var _effectiveBounds2 = effectiveBounds(policy, contentMin),
wMin = _effectiveBounds2.wMin,
wMax = _effectiveBounds2.wMax;
if (!Number.isFinite(wMax) || wMax <= wMin) return 0;
return Math.round(clamp((size.w - wMin) / (wMax - wMin) * 100, 0, 100));
};
/**
* Theming hooks.
*
* Every colour a StackedCard part needs is read through a `--sc-*` custom
* property with a built-in fallback, so the component looks right standing on
* its own and a host surface can still retint it by declaring the variable on
* any ancestor. No rgba/hex is baked into a rule; data colours (a swatch value,
* a priority colour) are always passed in by the caller.
*/
var SELECTION_RING = "var(--sc-selection-ring, var(--color-primary-500))";
var SCRIM = "var(--sc-scrim, rgba(0, 0, 0, 0.55))";
var SCRIM_STRONG = "var(--sc-scrim-strong, rgba(0, 0, 0, 0.72))";
var SCRIM_FG = "var(--sc-scrim-fg, #ffffff)";
/** Selector for anything carrying the control class. */
var CONTROL = ".".concat(STACKED_CARD_CONTROL_CLASS);
/**
* The one reveal rule the whole subsystem shares: controls are hidden until the
* card (or the cover) is hovered OR holds focus. The focus path is what keeps
* them reachable by keyboard instead of mouse-only.
*/
var revealControls = styled.css(["", "{opacity:0;transition:opacity 120ms ease;}&:hover ", ",&:focus-within ", "{opacity:1;}"], CONTROL, CONTROL, CONTROL);
/* ------------------------------------------------------------------ */
/* Stack — the vertical column. A card is a Stack of rows. */
/* ------------------------------------------------------------------ */
var StyledStackedCardStack = styled__default["default"].div.withConfig({
displayName: "Styles__StyledStackedCardStack",
componentId: "sc-vnqm9x-0"
})(["", " position:relative;display:flex;flex-direction:column;"], BoxSizingStyle);
StyledStackedCardStack.displayName = "StyledStackedCardStack";
/* ------------------------------------------------------------------ */
/* Row — the only layout primitive, differentiated by `role`. */
/* ------------------------------------------------------------------ */
var StyledStackedCardRow = styled__default["default"].div.withConfig({
displayName: "Styles__StyledStackedCardRow",
componentId: "sc-vnqm9x-1"
})(["", " position:relative;display:flex;flex-direction:", ";align-items:", ";gap:", ";padding:", ";", " ", ""], BoxSizingStyle, function (_ref) {
var $direction = _ref.$direction;
return $direction;
}, function (_ref2) {
var $direction = _ref2.$direction;
return $direction === "column" ? "stretch" : "center";
}, function (_ref3) {
var $direction = _ref3.$direction;
return $direction === "column" ? "4px" : "8px";
}, function (_ref4) {
var $role = _ref4.$role,
$bleed = _ref4.$bleed;
return $bleed ? "0" : STACKED_CARD_ROLE_PADDING[$role];
}, function (_ref5) {
var $background = _ref5.$background;
return $background && styled.css(["background:", ";"], $background);
}, function (_ref6) {
var $direction = _ref6.$direction;
return $direction === "row" && styled.css(["> *{flex:1 1 0;min-width:0;}> [", "]{flex:0 0 auto;}"], STACKED_CARD_FIXED_ATTR);
});
StyledStackedCardRow.displayName = "StyledStackedCardRow";
/* ------------------------------------------------------------------ */
/* Cover — a bleed row that holds media. */
/* ------------------------------------------------------------------ */
/**
* The media box reserves its height with `aspect-ratio` so the image (or the
* skeleton standing in for it) never reflows the card when it arrives.
*/
var StyledStackedCardCoverMedia = styled__default["default"].div.withConfig({
displayName: "Styles__StyledStackedCardCoverMedia",
componentId: "sc-vnqm9x-2"
})(["position:relative;width:100%;aspect-ratio:", ";overflow:hidden;", ""], function (_ref7) {
var $aspectRatio = _ref7.$aspectRatio;
return $aspectRatio;
}, revealControls);
StyledStackedCardCoverMedia.displayName = "StyledStackedCardCoverMedia";
/* The fill (an <img>, an inline <svg> wrapper, or a solid-colour box) is laid
over the reserved box and made to cover it. */
var StyledStackedCardCoverFill = styled__default["default"].div.withConfig({
displayName: "Styles__StyledStackedCardCoverFill",
componentId: "sc-vnqm9x-3"
})(["position:absolute;inset:0;> *{width:100%;height:100%;}> img{display:block;object-fit:cover;}> img,> svg{-webkit-user-drag:none;user-select:none;pointer-events:none;}"]);
StyledStackedCardCoverFill.displayName = "StyledStackedCardCoverFill";
var StyledStackedCardCoverCenter = styled__default["default"].div.withConfig({
displayName: "Styles__StyledStackedCardCoverCenter",
componentId: "sc-vnqm9x-4"
})(["position:absolute;inset:0;display:flex;align-items:center;justify-content:center;"]);
StyledStackedCardCoverCenter.displayName = "StyledStackedCardCoverCenter";
var StyledStackedCardCoverTopRight = styled__default["default"].div.withConfig({
displayName: "Styles__StyledStackedCardCoverTopRight",
componentId: "sc-vnqm9x-5"
})(["position:absolute;top:8px;right:8px;display:flex;gap:6px;"]);
StyledStackedCardCoverTopRight.displayName = "StyledStackedCardCoverTopRight";
/**
* Collapsed cover — the media box gives way to a thin strip. The strip IS the
* expand affordance: the whole bar is a button and a chevron hint is revealed
* on hover or focus. It reserves no height of its own; the caller's
* `collapsedStrip` (an ~8px colour bar, a favicon + domain row) sets how tall
* it reads.
*/
var StyledStackedCardCollapsedStrip = styled__default["default"].button.withConfig({
displayName: "Styles__StyledStackedCardCollapsedStrip",
componentId: "sc-vnqm9x-6"
})(["", " position:relative;display:flex;align-items:center;width:100%;min-height:16px;padding:0;border:0;background:transparent;cursor:pointer;text-align:left;", "{opacity:0;transition:opacity 120ms ease;}&:hover ", ",&:focus-visible ", "{opacity:1;}&:focus-visible{outline:2px solid ", ";outline-offset:-2px;}"], BoxSizingStyle, CONTROL, CONTROL, CONTROL, SELECTION_RING);
StyledStackedCardCollapsedStrip.displayName = "StyledStackedCardCollapsedStrip";
/* The expand chevron sits at the right, vertically centred, so it reads the
same whether the strip is a hairline colour bar or a taller favicon row. */
var StyledStackedCardStripExpand = styled__default["default"].span.withConfig({
displayName: "Styles__StyledStackedCardStripExpand",
componentId: "sc-vnqm9x-7"
})(["position:absolute;top:50%;right:8px;transform:translateY(-50%);display:inline-flex;width:16px;height:16px;color:var(--color-theme-600);svg{width:14px;height:14px;}"]);
StyledStackedCardStripExpand.displayName = "StyledStackedCardStripExpand";
/* ------------------------------------------------------------------ */
/* Cover chrome — scrim-backed controls that sit over media */
/* ------------------------------------------------------------------ */
/** Centered media control (a play button). The caller drops the glyph inside. */
var StyledStackedCardPlayBadge = styled__default["default"].span.withConfig({
displayName: "Styles__StyledStackedCardPlayBadge",
componentId: "sc-vnqm9x-8"
})(["display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:", ";color:", ";svg{fill:currentColor;width:20px;height:20px;margin-left:2px;}"], SCRIM, SCRIM_FG);
StyledStackedCardPlayBadge.displayName = "StyledStackedCardPlayBadge";
/** Top-right cover-management button (collapse, remove …). */
var StyledStackedCardCoverButton = styled__default["default"].button.withConfig({
displayName: "Styles__StyledStackedCardCoverButton",
componentId: "sc-vnqm9x-9"
})(["", " display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:0;border-radius:8px;cursor:pointer;color:", ";background:", ";svg{width:16px;height:16px;display:block;}&:hover{background:", ";}"], BoxSizingStyle, SCRIM_FG, SCRIM, SCRIM_STRONG);
StyledStackedCardCoverButton.displayName = "StyledStackedCardCoverButton";
/* ------------------------------------------------------------------ */
/* Resize (opt-in): handle on hover, the card only reports deltas */
/* ------------------------------------------------------------------ */
/* The grip is a focusable separator, so it needs a focus ring of its own — a
keyboard user has no pointer to tell them where they are. */
var StyledStackedCardResizeHandle = styled__default["default"].span.withConfig({
displayName: "Styles__StyledStackedCardResizeHandle",
componentId: "sc-vnqm9x-10"
})(["position:absolute;right:2px;bottom:2px;display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:4px;cursor:", ";color:var(--color-theme-600);z-index:2;&:hover{color:var(--color-theme-900);}&:focus-visible{outline:2px solid ", ";outline-offset:1px;color:var(--color-theme-900);}svg{display:block;}"], function (_ref8) {
var $axis = _ref8.$axis;
return $axis === "width" ? "ew-resize" : "nwse-resize";
}, SELECTION_RING);
StyledStackedCardResizeHandle.displayName = "StyledStackedCardResizeHandle";
/* ------------------------------------------------------------------ */
/* The shell */
/* ------------------------------------------------------------------ */
var hoverStyle = styled.css(["box-shadow:0 4px 12px rgba(0,0,0,0.12);border-color:var(--color-theme-500);"]);
var StyledStackedCard = styled__default["default"].div.withConfig({
displayName: "Styles__StyledStackedCard",
componentId: "sc-vnqm9x-11"
})(["", " position:relative;display:flex;flex-direction:column;width:", "px;border-radius:", "px;background-color:var(--page-paper-main);border:1px solid var(--border-primary);box-shadow:0 1px 3px rgba(0,0,0,0.08);overflow:hidden;transition:box-shadow 150ms ease,border-color 150ms ease;", " &:hover{", "}&:focus-visible{outline:none;", " box-shadow:0 0 0 2px ", ";}", " ", " ", " ", " ", " ", " ", " ", ""], BoxSizingStyle, STACKED_CARD_WIDTH, STACKED_CARD_RADIUS, revealControls, hoverStyle, hoverStyle, SELECTION_RING, function (_ref9) {
var $forceHover = _ref9.$forceHover;
return $forceHover && styled.css(["", " && ", "{opacity:1;}"], hoverStyle, CONTROL);
}, function (_ref0) {
var $priorityColor = _ref0.$priorityColor;
return $priorityColor && styled.css(["&::before{content:\"\";position:absolute;top:0;bottom:0;left:0;width:4px;background:", ";z-index:2;}"], $priorityColor);
}, function (_ref1) {
var $selected = _ref1.$selected;
return $selected && styled.css(["&&{border-color:", ";box-shadow:0 0 0 2px ", ";}"], SELECTION_RING, SELECTION_RING);
}, function (_ref10) {
var $disabled = _ref10.$disabled;
return $disabled && styled.css(["opacity:0.5;pointer-events:none;"]);
}, function (_ref11) {
var $pending = _ref11.$pending;
return $pending && styled.css(["opacity:0.6;pointer-events:none;cursor:progress;"]);
}, function (_ref12) {
var $isDragSource = _ref12.$isDragSource;
return $isDragSource && styled.css(["background:transparent;border:1px dashed var(--color-theme-500);box-shadow:none;&:hover{box-shadow:none;border-color:var(--color-theme-500);}> *{visibility:hidden;}"]);
}, function (_ref13) {
var $isDragPreview = _ref13.$isDragPreview;
return $isDragPreview && styled.css(["box-shadow:0 12px 28px rgba(0,0,0,0.24);cursor:grabbing;"]);
}, function (_ref14) {
var $entered = _ref14.$entered;
return $entered && styled.css(["&&{border-color:", ";box-shadow:inset 0 0 0 2px ", ",0 0 0 2px ", ";}"], SELECTION_RING, SELECTION_RING, SELECTION_RING);
});
StyledStackedCard.displayName = "StyledStackedCard";
var _excluded$4 = ["selected", "disabled", "pending", "isDragSource", "isDragPreview", "entered", "forceHover", "resizable", "resizeAxis", "resizeLabel", "priorityColor", "onResizeStart", "onResizeDelta", "onResizeCommit", "resizeHandleProps", "className", "children"];
/**
* StackedCard — the hollow shell for cards on drag-and-drop surfaces.
*
* This is NOT the base for cards in lists. It is the card for surfaces where
* dragging is a primary interaction: column boards and canvases. Content is
* laid out top to bottom in `StackedCardRow`s, which makes every card a
* portrait presentation of its data.
*
* ── The rule the whole subsystem hangs on ──────────────────────────────────
* THE SHELL STAYS HOLLOW. There is no `contentType` enum here, no per-type
* prop soup, no `if task …`. The shell owns only VISUAL STATES (selected,
* disabled, pending, priority, drag source/preview, entered) and one intent
* callback (`onResizeDelta`). Content is passed as `children` and composes the
* layout primitives. Typed cards — an ImageCard, a LinkCard, a TaskCard — are
* facades built on top of it in the consuming app, and adding one requires
* ZERO changes in this file.
*
* ── What the shell does NOT do ────────────────────────────────────────────
* It implements no drag-and-drop, no selection bookkeeping, no resize policy
* and no keyboard navigation. The card reports; the host decides. Drag
* choreography (the drag layer, the landing indicator, the drop) belongs to
* the host surface, which then feeds the result back as `isDragSource` /
* `isDragPreview`. The shell forwards its ref and spreads DOM props, so a host
* can attach `tabIndex`, ARIA, pointer and keyboard handlers to it.
*
* ── Resize ────────────────────────────────────────────────────────────────
* The grip is opt-in (`resizable`) and reports intent as a gesture: one
* `onResizeStart`, a stream of `onResizeDelta` previews measured FROM THE
* GESTURE START, and one `onResizeCommit` at the end — and only if the gesture
* moved anything. A host applies previews for live feedback and records an undo
* entry on the commit alone (spec §7e).
*
* Because the deltas are gesture-relative rather than incremental, a host can
* resolve every event against the size it snapshotted on start, and never has
* to keep a running accumulator. That is what makes a slow, few-pixels-at-a-time
* drag keep growing instead of stalling under a snap step.
*
* The grip itself is a focusable `role="separator"` and handles arrow keys
* (Shift for a coarse nudge). For the full policy — bounds, proportional mode,
* step snapping, content minimums, Home/End and the live `aria-valuenow` — use
* `useStackedCardResize` and spread its result through `resizeHandleProps`;
* those handlers then own the grip and the three callbacks above stay quiet.
*
* ── Theming ───────────────────────────────────────────────────────────────
* Colours resolve through `--sc-*` custom properties with built-in fallbacks:
* `--sc-selection-ring` (selection / focus / entered) and the cover scrim
* family `--sc-scrim`, `--sc-scrim-strong`, `--sc-scrim-fg`. Declare any of
* them on an ancestor to retint a whole surface.
*/
var StackedCard = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var selected = _ref.selected,
disabled = _ref.disabled,
pending = _ref.pending,
isDragSource = _ref.isDragSource,
isDragPreview = _ref.isDragPreview,
entered = _ref.entered,
forceHover = _ref.forceHover,
resizable = _ref.resizable,
_ref$resizeAxis = _ref.resizeAxis,
resizeAxis = _ref$resizeAxis === void 0 ? "both" : _ref$resizeAxis,
_ref$resizeLabel = _ref.resizeLabel,
resizeLabel = _ref$resizeLabel === void 0 ? "Resize card" : _ref$resizeLabel,
priorityColor = _ref.priorityColor,
onResizeStart = _ref.onResizeStart,
onResizeDelta = _ref.onResizeDelta,
onResizeCommit = _ref.onResizeCommit,
resizeHandleProps = _ref.resizeHandleProps,
className = _ref.className,
children = _ref.children,
rest = _objectWithoutProperties(_ref, _excluded$4);
/**
* One live gesture. `x`/`y` anchor a pointer drag; `dx`/`dy` carry the
* running total a keyboard gesture has nudged. `moved` gates the commit, so
* a click that never travelled is not a change.
*/
var gesture = React.useRef(null);
var emitDelta = React.useCallback(function (dx, dy) {
var g = gesture.current;
if (!g) return;
if (dx !== 0 || dy !== 0) g.moved = true;
onResizeDelta === null || onResizeDelta === void 0 || onResizeDelta(dx, dy, g.source);
}, [onResizeDelta]);
var endGesture = React.useCallback(function () {
var g = gesture.current;
if (!g) return;
gesture.current = null;
if (g.moved) onResizeCommit === null || onResizeCommit === void 0 || onResizeCommit(g.source);
}, [onResizeCommit]);
var handlePointerDown = React.useCallback(function (e) {
var _setPointerCapture, _ref2;
gesture.current = {
source: "pointer",
x: e.clientX,
y: e.clientY,
dx: 0,
dy: 0,
moved: false
};
(_setPointerCapture = (_ref2 = e.target).setPointerCapture) === null || _setPointerCapture === void 0 || _setPointerCapture.call(_ref2, e.pointerId);
e.preventDefault();
onResizeStart === null || onResizeStart === void 0 || onResizeStart("pointer");
}, [onResizeStart]);
var handlePointerMove = React.useCallback(function (e) {
var g = gesture.current;
if (!g || g.source !== "pointer") return;
// Measured from the gesture start, so the host resolves every event
// against one snapshot instead of accumulating.
emitDelta(e.clientX - g.x, e.clientY - g.y);
}, [emitDelta]);
/**
* Arrows nudge the running total; Shift makes it coarse. Home and End need
* bounds to resolve, which the bare shell does not have — they fall through
* to `useStackedCardResize`, or to the browser.
*/
var handleKeyDown = React.useCallback(function (e) {
var step = DEFAULT_KEYBOARD_STEP * (e.shiftKey ? SHIFT_STEP_MULTIPLIER : 1);
var dx = 0;
var dy = 0;
if (e.key === "ArrowRight") dx = step;else if (e.key === "ArrowLeft") dx = -step;else if (e.key === "ArrowDown") dy = step;else if (e.key === "ArrowUp") dy = -step;else return;
e.preventDefault();
if (!gesture.current || gesture.current.source !== "keyboard") {
gesture.current = {
source: "keyboard",
x: 0,
y: 0,
dx: 0,
dy: 0,
moved: false
};
onResizeStart === null || onResizeStart === void 0 || onResizeStart("keyboard");
}
var g = gesture.current;
g.dx += dx;
g.dy += dy;
emitDelta(g.dx, g.dy);
}, [emitDelta, onResizeStart]);
var handleKeyUp = React.useCallback(function (e) {
// One commit per hold, mirroring pointer-up after a stream of moves.
if (isResizeKey(e.key)) endGesture();
}, [endGesture]);
return /*#__PURE__*/React__default["default"].createElement(StyledStackedCard, _extends({
ref: ref,
$selected: selected,
$disabled: disabled,
$pending: pending,
$isDragSource: isDragSource,
$isDragPreview: isDragPreview,
$entered: entered,
$forceHover: forceHover,
$priorityColor: priorityColor,
className: classNames__default["default"]("c-stacked-card", className)
}, rest), children, resizable ? /*#__PURE__*/React__default["default"].createElement(StyledStackedCardResizeHandle, _extends({
$axis: resizeAxis,
className: classNames__default["default"]("c-stacked-card__resize-handle", STACKED_CARD_CONTROL_CLASS),
role: "separator",
tabIndex: 0,
"aria-label": resizeLabel,
onPointerDown: handlePointerDown,
onPointerMove: handlePointerMove,
onPointerUp: endGesture,
onLostPointerCapture: endGesture,
onKeyDown: handleKeyDown,
onKeyUp: handleKeyUp
}, resizeHandleProps), /*#__PURE__*/React__default["default"].createElement(StackedCardResizeHandleGlyph, null)) : null);
});
StackedCard.displayName = "StackedCard";
var _excluded$3 = ["role", "bleed", "direction", "background", "className", "children"];
/**
* StackedCard layout primitives.
*
* A stacked card is a portrait presentation of data: content stacks top to
* bottom in rows. There are three primitives and nothing else —
*
* - StackedCardStack — the vertical column. A card IS a stack of rows; the
* primitive is exported for nested stacks (a row that stacks internally).
* - StackedCardRow — the one layout primitive. Cover, title, meta, footer
* are all rows; a `role` sets the default padding so the anatomy stays
* predictable across every card type.
* - StackedCardCover — sugar for a bleed row that holds media, reserves its
* height with `aspect-ratio` so a late image never reflows the card, and
* carries two control slots (center + top-right).
*/
/* ------------------------------------------------------------------ */
/* Stack */
/* ------------------------------------------------------------------ */
/** A vertical flex column with no padding of its own. */
var StackedCardStack = StyledStackedCardStack;
/* ------------------------------------------------------------------ */
/* Row */
/* ------------------------------------------------------------------ */
/**
* One row of a card's stack.
*
* In `row` direction the first level of children is distributed evenly along
* the X axis; a child carrying the `data-fixed` attribute keeps its own width
* and the rest share what remains.
*/
var StackedCardRow = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
var _ref$role = _ref.role,
role = _ref$role === void 0 ? "custom" : _ref$role,
bleed = _ref.bleed,
_ref$direction = _ref.direction,
direction = _ref$direction === void 0 ? "row" : _ref$direction,
background = _ref.background,
className = _ref.className,
children = _ref.children,
rest = _objectWithoutProperties(_ref, _excluded$3);
return /*#__PURE__*/React__default["default"].createElement(StyledStackedCardRow, _extends({
ref: ref,
$role: role,
$bleed: bleed,
$direction: direction,
$background: background,
className: classNames__default["default"]("c-stacked-card__row", "c-stacked-card__row--".concat(role), {
"c-stacked-card__row--bleed": bleed
}, className)
}, rest), children);
});
StackedCardRow.displayName = "StackedCardRow";
/* ------------------------------------------------------------------ */
/* Cover */
/* ------------------------------------------------------------------ */
/**
* A bleed row that holds media.
*
* Controls in either slot are revealed on hover OR focus-within, so they stay
* reachable by keyboard. Collapsed, the media box gives way to a strip that is
* itself the expand button.
*/
var StackedCardCover = function StackedCardCover(_ref2) {
var _ref2$aspectRatio = _ref2.aspectRatio,
aspectRatio = _ref2$aspectRatio === void 0 ? STACKED_CARD_COVER_RATIO : _ref2$aspectRatio,
centerSlot = _ref2.centerSlot,
topRightSlot = _ref2.topRightSlot,
collapsed = _ref2.collapsed,
collapsedStrip = _ref2.collapsedStrip,
onExpand = _ref2.onExpand,
_ref2$expandLabel = _ref2.expandLabel,
expandLabel = _ref2$expandLabel === void 0 ? "Expand cover" : _ref2$expandLabel,
className = _ref2.className,
children = _ref2.children;
return /*#__PURE__*/React__default["default"].createElement(StackedCardRow, {
role: "cover",
bleed: true,
className: classNames__default["default"]("c-stacked-card__cover", className)
}, collapsed ? /*#__PURE__*/React__default["default"].createElement(StyledStackedCardCollapsedStrip, {
type: "button",
"aria-label": expandLabel,
onClick: onExpand,
className: "c-stacked-card__cover-strip"
}, collapsedStrip, /*#__PURE__*/React__default["default"].createElement(StyledStackedCardStripExpand, {
className: STACKED_CARD_CONTROL_CLASS,
"aria-hidden": "true"
}, /*#__PURE__*/React__default["default"].createElement(StackedCardExpandGlyph, null))) : /*#__PURE__*/React__default["default"].createElement(StyledStackedCardCoverMedia, {
$aspectRatio: aspectRatio,
className: "c-stacked-card__cover-media"
}, /*#__PURE__*/React__default["default"].createElement(StyledStackedCardCoverFill, null, children), centerSlot ? /*#__PURE__*/React__default["default"].createElement(StyledStackedCardCoverCenter, {
className: STACKED_CARD_CONTROL_CLASS
}, centerSlot) : null, topRightSlot ? /*#__PURE__*/React__default["default"].createElement(StyledStackedCardCoverTopRight, {
className: STACKED_CARD_CONTROL_CLASS
}, topRightSlot) : null));
};
StackedCardCover.displayName = "StackedCardCover";
/* ------------------------------------------------------------------ */
/* Cover chrome */
/* ------------------------------------------------------------------ */
/** Centered media control (a play button). Drop the glyph inside. */
var StackedCardPlayBadge = StyledStackedCardPlayBadge;
/** Top-right cover-management button (collapse, remove …). */
var StackedCardCoverButton = StyledStackedCardCoverButton;
/**
* The one place pointer and keyboard input meet the resize policy.
*
* `StackedCard`'s built-in grip reports raw deltas and knows no policy — enough
* for a host that just tracks a width. This hook is the full contract: it
* captures the gesture start, funnels both inputs through the pure policy in
* `resizePolicy.ts`, streams preview events and fires exactly ONE commit per
* gesture. It returns the props to spread on the grip, including the live
* separator ARIA.
*
* Preview versus commit (spec §7e): the continuous stream is live feedback
* only. A host creates an undo entry on the COMMIT, never on a preview — and a
* gesture that never changed the size commits nothing at all, so a bare click
* on the grip is not a change.
*
* The hook never touches the card's content: the intrinsic minimum is read
* through `contentMin`, which may be a getter so a card that measures its own
* footer can answer at the moment it is asked.
*/
/** The props to spread on the grip — `StackedCard`'s `resizeHandleProps`. */
var sameSize = function sameSize(a, b) {
return a.w === b.w && a.h === b.h;
};
var useStackedCardResize = function useStackedCardResize(_ref) {
var size = _ref.size,
policy = _ref.policy,
cardId = _ref.cardId,
contentMin = _ref.contentMin,
_ref$axis = _ref.axis,
axis = _ref$axis === void 0 ? "both" : _ref$axis,
_ref$scale = _ref.scale,
scale = _ref$scale === void 0 ? 1 : _ref$scale,
_ref$label = _ref.label,
label = _ref$label === void 0 ? "Resize card" : _ref$label,
onResize = _ref.onResize,
onResizeCommit = _ref.onResizeCommit;
// The pointer gesture's anchor: the size + content-min captured on pointer
// down, plus the pointer origin the delta is measured from.
var pointerStart = React.useRef(null);
// Mirrors the latest emitted size so pointer-up / key-up can commit exactly
// what preview last showed, without a stale closure.
var latest = React.useRef(size);
latest.current = size;
// Whether this gesture actually moved the card. A bare click, or a Home on an
// axis with no floor, leaves it false and commits nothing.
var dirty = React.useRef(false);
// Read through refs so the handlers below can stay stable across renders
// while still seeing the current policy, axis and zoom.
var policyRef = React.useRef(policy);
policyRef.current = policy;
var axisRef = React.useRef(axis);
axisRef.current = axis;
var scaleRef = React.useRef(scale);
scaleRef.current = scale;
var contentMinRef = React.useRef(contentMin);
contentMinRef.current = contentMin;
var readContentMin = React.useCallback(function () {
var source = contentMinRef.current;
return typeof source === "function" ? source() : source;
}, []);
var emitPreview = React.useCallback(function (next, source) {
// Nothing changed — not a preview, and not something to commit later.
if (sameSize(next, latest.current)) return;
latest.current = next;
dirty.current = true;
onResize(next, source);
}, [onResize]);
var handlePointerDown = React.useCallback(function (e) {
var _setPointerCapture, _ref2;
pointerStart.current = {
start: makeStart(latest.current, readContentMin()),
x: e.clientX,
y: e.clientY
};
dirty.current = false;
(_setPointerCapture = (_ref2 = e.target).setPointerCapture) === null || _setPointerCapture === void 0 || _setPointerCapture.call(_ref2, e.pointerId);
e.preventDefault();
}, [readContentMin]);
var handlePointerMove = React.useCallback(function (e) {
var ps = pointerStart.current;
if (!ps) return;
var z = scaleRef.current || 1;
var next = applyResize(ps.start, {
dx: (e.clientX - ps.x) / z,
dy: (e.clientY - ps.y) / z
}, policyRef.current,
// Shift held during a free-form drag = temporary proportional lock.
{
constrain: e.shiftKey,
axis: axisRef.current
});
emitPreview(next, "pointer");
}, [emitPreview]);
var endPointer = React.useCallback(function () {
if (!pointerStart.current) return;
pointerStart.current = null;
if (dirty.current) onResizeCommit(latest.current, "pointer");
dirty.current = false;
}, [onResizeCommit]);
var handleKeyDown = React.useCallback(function (e) {
var next = keyboardResize(e.key, latest.current, policyRef.current, readContentMin(), {
shiftKey: e.shiftKey,
axis: axisRef.current
});
if (!next) return;
// The key is ours even when it resolves to no movement (already pinned at
// a bound), so the browser must not also scroll the surface.
e.preventDefault();
emitPreview(next, "keyboard");
}, [emitPreview, readContentMin]);
var handleKeyUp = React.useCallback(function (e) {
if (!isResizeKey(e.key)) return;
// The gesture end for the keyboard is the key release: one commit per
// hold, mirroring pointer-up after a stream of moves.
if (dirty.current) onResizeCommit(latest.current, "keyboard");
dirty.current = false;
}, [onResizeCommit]);
return {
role: "separator",
tabIndex: 0,
"aria-label": label,
"aria-controls": cardId,
"aria-valuemin": 0,
"aria-valuemax": 100,
"aria-valuenow": measurePercent(size, policy, readContentMin()),
onPointerDown: handlePointerDown,
onPointerMove: handlePointerMove,
onPointerUp: endPointer,
onLostPointerCapture: endPointer,
onKeyDown: handleKeyDown,
onKeyUp: handleKeyUp
};
};
var StyledRow = styled__default["default"].div.withConfig({
displayName: "Styles__StyledRow",
componentId: "sc-1sfgw5v-0"
})(["display:flex;flex-direction:row;flex-wrap:wrap;align-items:", ";gap:", ";", ""], function (_ref) {
var $align = _ref.$align;
return FLEX_ALIGN[$align];
}, function (_ref2) {
var $space = _ref2.$space;
return SPACE[$space];
}, function (_ref3) {
var $collapse = _ref3.$collapse;
return $collapse && styled.css(["", "{flex-direction:column;align-items:stretch;}"], screenBelow[$collapse]);
});
StyledRow.displayName = "StyledRow";
var _excluded$2 = ["space", "align", "collapseBelow", "children"];
var Row = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var _ref$space = _ref.space,
space = _ref$space === void 0 ? "md" : _ref$space,
_ref$align = _ref.align,
align = _ref$align === void 0 ? "center" : _ref$align,
collapseBelow = _ref.collapseBelow,
children = _ref.children,
rest = _objectWithoutProperties(_ref, _excluded$2);
return /*#__PURE__*/React__default["default"].createElement(StyledRow, _extends({
ref: ref,
$space: space,
$align: align,
$collapse: collapseBelow
}, rest), children);
});
Row.displayName = "Row";
var StyledColumns = styled__default["default"].div.withConfig({
displayName: "Styles__StyledColumns",
componentId: "sc-1n1enni-0"
})(["display:flex;flex-direction:row;align-items:", ";gap:", ";> .c-columns-col{min-width:0;}", ""], function (_ref) {
var $alignY = _ref.$alignY;
return FLEX_ALIGN[$alignY];
}, function (_ref2) {
var $space = _ref2.$space;
return SPACE[$space];
}, function (_ref3) {
var $collapse = _ref3.$collapse;
return $collapse && styled.css(["", "{flex-direction:column;align-items:stretch;> .c-columns-col{flex:0 0 auto !important;width:100%;}}"], screenBelow[$collapse]);
});
StyledColumns.displayName = "StyledColumns";
var _excluded$1 = ["widths", "space", "alignY", "collapseBelow", "children"];
var Columns = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var widths = _ref.widths,
_ref$space = _ref.space,
space = _ref$space === void 0 ? "lg" : _ref$space,
_ref$alignY = _ref.alignY,
alignY = _ref$alignY === void 0 ? "stretch" : _ref$alignY,
collapseBelow = _ref.collapseBelow,
children = _ref.children,
rest = _objectWithoutProperties(_ref, _excluded$1);
return /*#__PURE__*/React__default["default"].createElement(StyledColumns, _extends({
ref: ref,
$space: space,
$alignY: alignY,
$collapse: collapseBelow
}, rest), React__default["default"].Children.toArray(children).map(function (child, index) {
var _widths$index;
return /*#__PURE__*/React__default["default"].createElement("div", {
className: "c-columns-col"
// eslint-disable-next-line react/no-array-index-key
,
key: index,
style: {
flex: "".concat((_widths$index = widths === null || widths === void 0 ? void 0 : widths[index]) !== null && _widths$index !== void 0 ? _widths$index : 1, " 1 0")
}
}, child);
}));
});
Columns.displayName = "Columns";
var StyledTiles = styled__default["default"].div.withConfig({
displayName: "Styles__StyledTiles",
componentId: "sc-mti52-0"
})(["display:grid;grid-template-columns:repeat(", ",minmax(0,1fr));gap:", ";", ""], function (_ref) {
var $cols = _ref.$cols;
return $cols;
}, function (_ref2) {
var $space = _ref2.$space;
return SPACE[$space];
}, function (_ref3) {
var $collapse = _ref3.$collapse;
return $collapse && styled.css(["", "{grid-template-columns:minmax(0,1fr);}"], screenBelow[$collapse]);
});
StyledTiles.displayName = "StyledTiles";
var _excluded = ["columns", "space", "collapseBelow", "children"];
var Tiles = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var columns = _ref.columns,
_ref$space = _ref.space,
space = _ref$space === void 0 ? "md" : _ref$space,
collapseBelow = _ref.collapseBelow,
children = _ref.children,
rest = _objectWithoutProperties(_ref, _excluded);
return /*#__PURE__*/React__default["default"].createElement(StyledTiles, _extends({
ref: ref,
$cols: columns,
$space: space,
$collapse: collapseBelow
}, rest), children);
});
Tiles.displayName = "Tiles";
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.BulbIcon = BulbIcon$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.CheckboxCircleBlankIcon = CheckboxCircleBlankIcon$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.CircleDotIcon = CircleDotIcon$1;
exports.CircleIcon = CircleIcon$1;
exports.CircleMultipleIcon = CircleMultipleIcon$1;
exports.CircleSlashIcon = CircleSlashIcon$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.CloudDeployFailedIcon = CloudDeployFailedIcon$1;
exports.CloudDeployIcon = CloudDeployIcon$1;
exports.CloudIcon = CloudIcon$1;
exports.CollapsIcon = CollapsIcon$1;
exports.CollapseAllIcon = CollapseAllIcon$1;
exports.CollapseExpandSingleIcon = CollapseExpandSingleIcon$1;
exports.Columns = Columns;
exports.ComboBox = ComboBox;
exports.CommandLineIcon = CommandLineIcon$1;
exports.CommandPalette = CommandPalette;
exports.CompanyAddIcon = CompanyAddIcon$1;
exports.CompanyIcon = CompanyIcon$1;
exports.CompleteCheckbox = CompleteCheckbox;
exports.ComputerIcon = ComputerIcon$1;
exports.ConfirmDialog = ConfirmDialog;
exports.ConnectionIcon = ConnectionIcon$1;
exports.ContentStep = ContentStep;
exports.ContentStepper = ContentStepper;
exports.CopyIcon = CopyIcon$1;
exports.CounterButton = CounterButton;
exports.CrownBlankIcon = CrownBlankIcon$1;
exports.CrownSelectedIcon = CrownSelectedIcon$1;
exports.DARK_THEME_MATCH = DARK_THEME_MATCH;
exports.DARK_THEME_NAMES = DARK_THEME_NAMES;
exports.DARK_THEME_SELECTOR = DARK_THEME_SELECTOR;
exports.DEFAULT_DARK_THEME = DEFAULT_DARK_THEME;
exports.DEFAULT_KEYBOARD_STEP = DEFAULT_KEYBOARD_STEP;
exports.DEFAULT_THEME = DEFAULT_THEME;
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.DrawIcon = DrawIcon$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.FLEX_ALIGN = FLEX_ALIGN;
exports.Fade = Fade;
exports.Filter = Filter;
exports.FilterIcon = FilterIcon$1;
exports.FolderIcon = FolderIcon$1;
exports.FolderMoveIcon = FolderMoveIcon$1;
exports.FolderOutlineIcon = FolderOutlineIcon$1;
exports.FolderPlusIcon = FolderPlusIcon$1;
exports.FromElement = FromElement;
exports.GearFailedIcon = GearFailedIcon$1;
exports.GearIcon = GearIcon$1;
exports.GiftIcon = GiftIcon$1;
exports.GitBranchIcon = GitBranchIcon$1;
exports.GitCommitIcon = GitCommitIcon$1;
exports.GitHubIcon = GitHubIcon$1;
exports.GitIcon = GitIcon$1;
exports.GitLabIcon = GitLabIcon$1;
exports.GitMergeIcon = GitMergeIcon$1;
exports.GitPullRequestClosedIcon = GitPullRequestClosedIcon$1;
exports.GitPullRequestDraftIcon = GitPullRequestDraftIcon$1;
exports.GitPullRequestIcon = GitPullRequestIcon$1;
exports.GitRepositoryConnectIcon = GitRepositoryConnectIcon$1;
exports.GitRepositoryIcon = GitRepositoryIcon$1;
exports.GlobalAddButton = GlobalAddButton;
exports.GlobalStyle = GlobalStyle;
exports.GroupByIcon = GroupByIcon$1;
exports.HashIcon = HashIcon$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.KeyIcon = KeyIcon$1;
exports.LIGHT_THEME_NAMES = LIGHT_THEME_NAMES;
exports.Label = Label;
exports.LabelsIcon = LabelsIcon$1;
exports.LayerBackIcon = LayerBackIcon$1;
exports.LayerBackwardIcon = LayerBackwardIcon$1;
exports.LayerContext = LayerContext$1;
exports.LayerContextConsumer = LayerContextConsumer;
exports.LayerContextProvider = LayerContextProvider;
exports.LayerForwardIcon = LayerForwardIcon$1;
exports.LayerFrontIcon = LayerFrontIcon$1;
exports.LayersIcon = LayersIcon$1;
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.Media = Media;
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.MessageStarIcon = MessageStarIcon$1;
exports.MinusIcon = MinusIcon$1;
exports.MobileMenuIcon = MobileMenuIcon$1;
exports.Modal = Modal;
exports.MoneyStackIcon = MoneyStackIcon$1;
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.PORTABLE_TEXT_DEFAULT_BLOCKS = PORTABLE_TEXT_DEFAULT_BLOCKS;
exports.PORTABLE_TEXT_DEFAULT_MARKS = PORTABLE_TEXT_DEFAULT_MARKS;
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.PinSmallIcon = PinSmallIcon$1;
exports.PlayCircleOutlineIcon = PlayCircleOutlineIcon$1;
exports.PlayIcon = PlayIcon$1;
exports.PlaySmallIcon = PlaySmallIcon$1;
exports.Popper = Popper;
exports.PortableText = PortableText;
exports.Portal = Portal;
exports.PriorityLowIcon = PriorityLowIcon$1;
exports.ProgressBar = ProgressBar;
exports.ProgressCircle = ProgressCircle;
exports.ProgressPie = ProgressPie;
exports.ProgressRing = ProgressRing;
exports.ProjectAddIcon = ProjectAddIcon$1;
exports.ProjectIcon = ProjectIcon$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.PuzzleIcon = PuzzleIcon$1;
exports.RESIZE_KEYS = RESIZE_KEYS;
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.RecurringIcon = RecurringIcon$1;
exports.RecurringSmallIcon = RecurringSmallIcon$1;
exports.ReminderIcon = ReminderIcon$1;
exports.ReorderIcon = ReorderIcon$1;
exports.ReportTimeIcon = ReportTimeIcon$1;
exports.ReportsIcon = ReportsIcon$1;
exports.ResizeTransition = ResizeTransition;
exports.Reveal = Reveal;
exports.RobotIcon = RobotIcon$1;
exports.RocketIcon = RocketIcon$1;
exports.RocketSmallIcon = RocketSmallIcon$1;
exports.RoundedRectangleIcon = RoundedRectangleIcon$1;
exports.Row = Row;
exports.SHIFT_STEP_MULTIPLIER = SHIFT_STEP_MULTIPLIER;
exports.SPACE = SPACE;
exports.SPINE_STEP = SPINE_STEP;
exports.STACKED_CARD_CONTROL_CLASS = STACKED_CARD_CONTROL_CLASS;
exports.STACKED_CARD_COVER_RATIO = STACKED_CARD_COVER_RATIO;
exports.STACKED_CARD_FIXED_ATTR = STACKED_CARD_FIXED_ATTR;
exports.STACKED_CARD_RADIUS = STACKED_CARD_RADIUS;
exports.STACKED_CARD_ROLE_PADDING = STACKED_CARD_ROLE_PADDING;
exports.STACKED_CARD_WIDTH = STACKED_CARD_WIDTH;
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.SearchPlusIcon = SearchPlusIcon$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.ShapesIcon = ShapesIcon$1;
exports.Sheet = Sheet;
exports.ShieldIcon = ShieldIcon$1;
exports.SidebarLeftIcon = SidebarLeftIcon$1;
exports.SidebarRightIcon = SidebarRightIcon$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.Stack = Stack;
exports.StackedCard = StackedCard;
exports.StackedCardCollapseGlyph = StackedCardCollapseGlyph;
exports.StackedCardCover = StackedCardCover;
exports.StackedCardCoverButton = StackedCardCoverButton;
exports.StackedCardExpandGlyph = StackedCardExpandGlyph;
exports.StackedCardPlayBadge = StackedCardPlayBadge;
exports.StackedCardRemoveCoverGlyph = StackedCardRemoveCoverGlyph;
exports.StackedCardResizeHandleGlyph = StackedCardResizeHandleGlyph;
exports.StackedCardRow = StackedCardRow;
exports.StackedCardStack = StackedCardStack;
exports.StarIcon = StarIcon$1;
exports.StarOutlineIcon = StarOutlineIcon$1;
exports.StatusIcon = StatusIcon$1;
exports.Step = Step;
exports.StepActionButton = StepActionButton;
exports.StepSequence = StepSequence;
exports.Steps = Steps;
exports.StickyIcon = StickyIcon$1;
exports.StopIcon = StopIcon$1;
exports.StopwatchIcon = StopwatchIcon$1;
exports.StyledInputTimeWrapper = StyledInputTimeWrapper;
exports.SunIcon = SunIcon$1;
exports.SystemSettingsIcon = SystemSettingsIcon$1;
exports.THEMES = THEMES;
exports.THEME_MODE_SINGLE = THEME_MODE_SINGLE;
exports.THEME_MODE_SYSTEM = THEME_MODE_SYSTEM;
exports.THEME_NAMES = THEME_NAMES;
exports.Table = Table;
exports.Tag = Tag;
exports.TaskAddIcon = TaskAddIcon$1;
exports.TaskIcon = TaskIcon$1;
exports.TaskListAddIcon = TaskListAddIcon$1;
exports.TaskListCompleteIcon = TaskListCompleteIcon$1;
exports.TaskListIcon = TaskListIcon$1;
exports.Tbody = Tbody;
exports.TextAlignCenterIcon = TextAlignCenterIcon$1;
exports.TextAlignJustifyIcon = TextAlignJustifyIcon$1;
exports.TextAlignLeftIcon = TextAlignLeftIcon$1;
exports.TextAlignRightIcon = TextAlignRightIcon$1;
exports.TextIcon = TextIcon$1;
exports.TextStyleBoldIcon = TextStyleBoldIcon$1;
exports.TextStyleItalicIcon = TextStyleItalicIcon$1;
exports.TextStyleStrikeIcon = TextStyleStrikeIcon$1;
exports.TextStyleUnderlineIcon = TextStyleUnderlineIcon$1;
exports.Textarea = Textarea;
exports.Thead = Thead;
exports.ThinkingIcon = ThinkingIcon$1;
exports.ThumbUpOutlineIcon = ThumbUpOutlineIcon$1;
exports.ThumbsDownIcon = ThumbsDownIcon$1;
exports.ThumbsUpIcon = ThumbsUpIcon$1;
exports.Tiles = Tiles;
exports.Title1 = Title1;
exports.Title2 = Title2;
exports.TitledText = TitledText;
exports.ToastMessage = ToastMessage;
exports.Toggle = Toggle;
exports.Toolbar = Toolbar;
exports.Tooltip = Tooltip;
exports.TrashIcon = TrashIcon$1;
exports.TreeDotsIcon = TreeDotsIcon$1;
exports.TriangleIcon = TriangleIcon$1;
exports.Trigger = Trigger;
exports.UploadIcon = UploadIcon$1;
exports.ValueButton = ValueButton;
exports.ViewCombinedIcon = ViewCombinedIcon$1;
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.applyResize = applyResize;
exports.clamp = clamp;
exports.colors = colors$1;
exports.effectiveBounds = effectiveBounds;
exports.formatCurrency = formatCurrency;
exports.formatHours = formatHours;
exports.formatNumber = formatNumber;
exports.getNumberFromString = getNumberFromString;
exports.isDarkTheme = isDarkTheme;
exports.isOptionGroup = isOptionGroup;
exports.isPortableTextBlock = _isPortableTextBlock;
exports.isPortableTextContent = isPortableTextContent;
exports.isPortableTextMediaImageVariant = isPortableTextMediaImageVariant;
exports.isPortableTextObjectNode = isPortableTextObjectNode;
exports.isPortableTextSpan = isPortableTextSpan;
exports.isPortableTextTableRow = isPortableTextTableRow;
exports.isResizeKey = isResizeKey;
exports.isValidUrl = isValidUrl;
exports.keyboardResize = keyboardResize;
exports.layers = layers;
exports.makeStart = makeStart;
exports.measurePercent = measurePercent;
exports.numberWithSeparator = numberWithSeparator;
exports.portableTextDefaultBlockRenderers = portableTextDefaultBlockRenderers;
exports.portableTextDefaultMarkRenderers = portableTextDefaultMarkRenderers;
exports.resolveTheme = resolveTheme;
exports.signifierTypes = signifierTypes;
exports.snap = snap;
exports.titledTextHeadings = titledTextHeadings;
exports.toMoment = toMoment;
exports.useContentStepperContext = useContentStepperContext;
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.useStackedCardResize = useStackedCardResize;
exports.useWizardContext = useWizardContext;
exports.validateNumberInput = validateNumberInput;
exports.validateStopwatchTime = validateStopwatchTime;
exports.validateTimeInput = validateTimeInput;
Object.defineProperty(exports, '__esModule', { value: true });
}));
//# sourceMappingURL=index.js.map