From 482b9575de76c2f9a48a6add4a0287de2f2e3d30 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ma=C5=82gorzata=20Bie=C5=84?= Date: Thu, 24 Oct 2024 13:39:59 +0200 Subject: [PATCH] feat: added service catalog item page --- assets/service-catalog-bundle.js | 110 +++- assets/shared-bundle.js | 569 ++++++++++-------- .../ServiceCatalogItemPage.tsx | 128 ++++ src/modules/service-catalog/index.tsx | 1 + .../renderServiceCatalogItem.tsx | 26 + .../service-catalog/translations/en-us.yml | 15 + .../custom_pages/service_catalog_item.hbs | 18 + 7 files changed, 602 insertions(+), 265 deletions(-) create mode 100644 src/modules/service-catalog/ServiceCatalogItemPage.tsx create mode 100644 src/modules/service-catalog/renderServiceCatalogItem.tsx create mode 100644 templates/custom_pages/service_catalog_item.hbs diff --git a/assets/service-catalog-bundle.js b/assets/service-catalog-bundle.js index 388189a84..d1a3561c2 100644 --- a/assets/service-catalog-bundle.js +++ b/assets/service-catalog-bundle.js @@ -1,4 +1,4 @@ -import { s as styled, J as getColorV8, j as jsxRuntimeExports, aa as SvgShapesFill, ab as Grid, ac as Col, ad as Row, ae as Skeleton, af as MD, ag as SM, a as useTranslation, ah as LG, A as Anchor, _ as Button, r as reactExports, ai as CursorPagination, a6 as reactDomExports, a7 as ThemeProviders, a8 as createTheme } from 'shared'; +import { s as styled, J as getColorV8, j as jsxRuntimeExports, aa as SvgShapesFill, ab as Grid, ac as Col, ad as Row, ae as Skeleton, af as MD, ag as SM, a as useTranslation, ah as LG, A as Anchor, _ as Button, r as reactExports, ai as CursorPagination, a6 as reactDomExports, a7 as ThemeProviders, a8 as createTheme, aj as XXXL, ak as SvgChevronUpFill, al as SvgChevronDownFill } from 'shared'; const ItemContainer = styled.a ` display: flex; @@ -21,7 +21,7 @@ const ItemContainer = styled.a ` color: ${(props) => getColorV8("grey", 800, props.theme)}; } `; -const ItemTitle = styled.div ` +const ItemTitle$1 = styled.div ` font-size: ${(props) => props.theme.fontSizes.md}; font-weight: ${(props) => props.theme.fontWeights.semibold}; display: -webkit-box; @@ -54,7 +54,7 @@ const IconContainer = styled.div ` align-content: center; `; const ServiceCatalogListItem = ({ serviceItem, }) => { - return (jsxRuntimeExports.jsxs(ItemContainer, { href: "#", children: [jsxRuntimeExports.jsx(IconContainer, { children: jsxRuntimeExports.jsx(SvgShapesFill, {}) }), jsxRuntimeExports.jsxs(TextContainer$1, { children: [jsxRuntimeExports.jsx(ItemTitle, { children: serviceItem.name }), jsxRuntimeExports.jsx(ItemDescription, { children: serviceItem.description })] })] })); + return (jsxRuntimeExports.jsxs(ItemContainer, { href: "#", children: [jsxRuntimeExports.jsx(IconContainer, { children: jsxRuntimeExports.jsx(SvgShapesFill, {}) }), jsxRuntimeExports.jsxs(TextContainer$1, { children: [jsxRuntimeExports.jsx(ItemTitle$1, { children: serviceItem.name }), jsxRuntimeExports.jsx(ItemDescription, { children: serviceItem.description })] })] })); }; const SkeletonItem = styled.div ` @@ -86,7 +86,7 @@ const LoadingState = () => { return (jsxRuntimeExports.jsx(StyledGrid$1, { children: jsxRuntimeExports.jsxs(Row, { wrap: "wrap", children: [jsxRuntimeExports.jsx(SkeletonCol, {}), jsxRuntimeExports.jsx(SkeletonCol, {}), jsxRuntimeExports.jsx(SkeletonCol, {})] }) })); }; -const Container$1 = styled.div ` +const Container$2 = styled.div ` padding: ${(p) => p.theme.space.xl} 0; display: flex; flex-direction: column; @@ -105,13 +105,13 @@ const EmptyState = ({ helpCenterPath }) => { window.location.href = helpCenterPath; }; const { t } = useTranslation(); - return (jsxRuntimeExports.jsxs(Container$1, { children: [jsxRuntimeExports.jsxs(TextContainer, { children: [jsxRuntimeExports.jsx(LG, { children: t("service-catalog.empty-state.no-services", "No services in sight") }), jsxRuntimeExports.jsx(MD, { children: t("service-catalog.empty-state.description", "Once services are added to catalog, you’ll find them here.") }), jsxRuntimeExports.jsx(Anchor, { isExternal: true, href: "#", target: "_blank", children: t("service-catalog.empty-state.support-article-link", "Learn about the service catalog") })] }), jsxRuntimeExports.jsx(Button, { isPrimary: true, onClick: handleRedirect, children: t("service-catalog.empty-state.go-to-homepage", "Go to the homepage") })] })); + return (jsxRuntimeExports.jsxs(Container$2, { children: [jsxRuntimeExports.jsxs(TextContainer, { children: [jsxRuntimeExports.jsx(LG, { children: t("service-catalog.empty-state.no-services", "No services in sight") }), jsxRuntimeExports.jsx(MD, { children: t("service-catalog.empty-state.description", "Once services are added to catalog, you’ll find them here.") }), jsxRuntimeExports.jsx(Anchor, { isExternal: true, href: "#", target: "_blank", children: t("service-catalog.empty-state.support-article-link", "Learn about the service catalog") })] }), jsxRuntimeExports.jsx(Button, { isPrimary: true, onClick: handleRedirect, children: t("service-catalog.empty-state.go-to-homepage", "Go to the homepage") })] })); }; const StyledCol = styled(Col) ` margin-bottom: ${(props) => props.theme.space.md}; `; -const Container = styled.div ` +const Container$1 = styled.div ` padding-top: ${(props) => props.theme.space.sm}; `; const StyledGrid = styled(Grid) ` @@ -155,7 +155,7 @@ function ServiceCatalogList({ helpCenterPath, }) { setCurrentCursor(`page[before]=${meta?.before_cursor}`); } }; - return (jsxRuntimeExports.jsx(Container, { children: isLoading ? (jsxRuntimeExports.jsx(LoadingState, {})) : (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(StyledGrid, { children: jsxRuntimeExports.jsx(Row, { wrap: "wrap", children: serviceCatalogItems.length !== 0 && + return (jsxRuntimeExports.jsx(Container$1, { children: isLoading ? (jsxRuntimeExports.jsx(LoadingState, {})) : (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(StyledGrid, { children: jsxRuntimeExports.jsx(Row, { wrap: "wrap", children: serviceCatalogItems.length !== 0 && serviceCatalogItems.map((record) => (jsxRuntimeExports.jsx(StyledCol, { xs: 12, sm: 6, md: 4, lg: 3, children: jsxRuntimeExports.jsx(ServiceCatalogListItem, { serviceItem: record }, record.id) }, record.id))) }) }), serviceCatalogItems.length === 0 && (jsxRuntimeExports.jsx(EmptyState, { helpCenterPath: helpCenterPath })), serviceCatalogItems.length > 0 && (jsxRuntimeExports.jsxs(CursorPagination, { children: [jsxRuntimeExports.jsx(CursorPagination.Previous, { onClick: handlePreviousClick, disabled: !currentCursor || (currentCursor?.startsWith("page[before]") && !meta?.has_more), children: t("service-catalog.pagination.previous", "Previous") }), jsxRuntimeExports.jsx(CursorPagination.Next, { onClick: handleNextClick, disabled: (currentCursor?.startsWith("page[after]") && !meta?.has_more) || @@ -166,4 +166,98 @@ async function renderServiceCatalogList(container, settings, helpCenterPath) { reactDomExports.render(jsxRuntimeExports.jsx(ThemeProviders, { theme: createTheme(settings), children: jsxRuntimeExports.jsx(ServiceCatalogList, { helpCenterPath: helpCenterPath }) }), container); } -export { renderServiceCatalogList }; +const ItemTitle = styled(XXXL) ` + font-weight: ${(props) => props.theme.fontWeights.semibold}; +`; +const CollapsibleDescription = styled.div ` + font-size: ${(props) => props.theme.fontSizes.md}; + text-align: left; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: ${(props) => (props.expanded ? "none" : 3)}; + overflow: hidden; + margin-top: ${(props) => props.theme.space.md}; + padding-right: ${(props) => props.theme.space.xl}; + + @media (max-width: ${(props) => props.theme.breakpoints.md}) { + padding-right: 0; + } +`; +const Container = styled.div ` + display: flex; + flex-direction: row; + justify-content: space-between; + gap: ${(props) => props.theme.space.xxl}; + + @media (max-width: ${(props) => props.theme.breakpoints.md}) { + flex-direction: column; + } +`; +const LeftColumn = styled.div ` + flex: 2; + border-bottom: ${(props) => props.theme.borders.sm} + ${(props) => getColorV8("grey", 300, props.theme)}; + padding-bottom: ${(props) => props.theme.space.lg}; + margin-right: ${(props) => props.theme.space.xl}; + + @media (max-width: ${(props) => props.theme.breakpoints.md}) { + margin-right: 0; + } +`; +const RightColumn = styled.div ` + flex: 1; + margin-left: ${(props) => props.theme.space.xl}; + + @media (max-width: ${(props) => props.theme.breakpoints.md}) { + position: sticky; + bottom: 0; + margin-left: 0; + } +`; +const ToggleButton = styled(Button) ` + margin-top: ${(props) => props.theme.space.sm}; + font-size: ${(props) => props.theme.fontSizes.md}; + &:hover { + text-decoration: none; + } +`; +const ButtonWrapper = styled.div ` + padding: ${(props) => props.theme.space.lg}; + border: ${(props) => props.theme.borders.sm} + ${(props) => getColorV8("grey", 300, props.theme)}; + display: flex; + flex-direction: column; + align-items: center; + + @media (max-width: ${(props) => props.theme.breakpoints.md}) { + position: sticky; + bottom: 0; + background: ${(props) => props.theme.colors.background}; + padding: ${(props) => props.theme.space.md}; + border: none; + border-top: ${(props) => props.theme.borders.sm} + ${(props) => getColorV8("grey", 300, props.theme)}; + } +`; +function ServiceCatalogItemPage({ serviceCatalogItem, }) { + const [isExpanded, setIsExpanded] = reactExports.useState(false); + const { t } = useTranslation(); + const toggleDescription = () => { + setIsExpanded(!isExpanded); + }; + return (jsxRuntimeExports.jsxs(Container, { children: [jsxRuntimeExports.jsxs(LeftColumn, { children: [jsxRuntimeExports.jsx(ItemTitle, { tag: "h1", children: serviceCatalogItem.name }), jsxRuntimeExports.jsx(CollapsibleDescription, { expanded: isExpanded, children: serviceCatalogItem.description }), jsxRuntimeExports.jsxs(ToggleButton, { "aria-hidden": "true", isLink: true, onClick: toggleDescription, children: [isExpanded + ? t("service-catalog.item.read-less", "Read less") + : t("service-catalog.item.read-more", "Read more"), jsxRuntimeExports.jsx(Button.EndIcon, { children: isExpanded ? jsxRuntimeExports.jsx(SvgChevronUpFill, {}) : jsxRuntimeExports.jsx(SvgChevronDownFill, {}) })] })] }), jsxRuntimeExports.jsx(RightColumn, { children: jsxRuntimeExports.jsx(ButtonWrapper, { children: jsxRuntimeExports.jsx(Button, { isPrimary: true, size: "large", isStretched: true, children: t("service-catalog.item.submit-button", "Submit request") }) }) })] })); +} + +//data mocked for now +const serviceCatalogItem = { + id: 1, + name: "Apple MacBook Pro", + description: "Request for a new Apple MacBook Pro. The MacBook Pro is equipped with Apple's powerful M3 Pro chip, featuring a 12-core CPU, 18-core GPU, and a 16-core Neural Engine, making it ideal for high-performance tasks. It comes with a 140W USB-C power adapter, three Thunderbolt 4 ports, HDMI, SDXC card slot, headphone jack, and MagSafe 3 port. The backlit Magic Keyboard with Touch ID enhances security and usability. Exclusively for Engineering, Design, and Marketing departments, the 16-inch model includes up to 36+ GB of memory and 1+ TB of storage, while other departments can request machines with up to 36 GB of memory and 512 GB of storage.", +}; +async function renderServiceCatalogItem(container, settings) { + reactDomExports.render(jsxRuntimeExports.jsx(ThemeProviders, { theme: createTheme(settings), children: jsxRuntimeExports.jsx(ServiceCatalogItemPage, { serviceCatalogItem: serviceCatalogItem }) }), container); +} + +export { renderServiceCatalogItem, renderServiceCatalogList }; diff --git a/assets/shared-bundle.js b/assets/shared-bundle.js index ee0132b3d..c456375c0 100644 --- a/assets/shared-bundle.js +++ b/assets/shared-bundle.js @@ -4852,8 +4852,8 @@ function retrieveComponentStyles(componentId, props) { return componentStyles; } -function _extends$S() { - _extends$S = Object.assign ? Object.assign.bind() : function (target) { +function _extends$U() { + _extends$U = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { @@ -4864,7 +4864,7 @@ function _extends$S() { } return target; }; - return _extends$S.apply(this, arguments); + return _extends$U.apply(this, arguments); } function _assertThisInitialized(self) { @@ -5148,7 +5148,7 @@ var unitRegExp$1 = /((?!\w)a|na|hc|mc|dg|me[r]?|xe|ni(?![a-zA-Z])|mm|cp|tp|xp|q( function mergeSymbolMaps$1(additionalSymbols) { var symbolMap = {}; - symbolMap.symbols = additionalSymbols ? _extends$S({}, defaultSymbolMap$1.symbols, additionalSymbols.symbols) : _extends$S({}, defaultSymbolMap$1.symbols); + symbolMap.symbols = additionalSymbols ? _extends$U({}, defaultSymbolMap$1.symbols, additionalSymbols.symbols) : _extends$U({}, defaultSymbolMap$1.symbols); return symbolMap; } @@ -6184,7 +6184,7 @@ function guard$1(lowerBoundary, upperBoundary, value) { function darken$1(amount, color) { if (color === 'transparent') return color; var hslColor = parseToHsl$1(color); - return toColorString$1(_extends$S({}, hslColor, { + return toColorString$1(_extends$U({}, hslColor, { lightness: guard$1(0, 1, hslColor.lightness - parseFloat(amount)) })); } // prettier-ignore @@ -6278,7 +6278,7 @@ function getContrast(color1, color2) { function lighten$1(amount, color) { if (color === 'transparent') return color; var hslColor = parseToHsl$1(color); - return toColorString$1(_extends$S({}, hslColor, { + return toColorString$1(_extends$U({}, hslColor, { lightness: guard$1(0, 1, hslColor.lightness + parseFloat(amount)) })); } // prettier-ignore @@ -7859,17 +7859,17 @@ StyledAnchor.defaultProps = { * found at http://www.apache.org/licenses/LICENSE-2.0. */ -var _path$G; -function _extends$R() { _extends$R = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$R.apply(this, arguments); } +var _path$I; +function _extends$T() { _extends$T = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$T.apply(this, arguments); } var SvgNewWindowStroke = function SvgNewWindowStroke(props) { - return /*#__PURE__*/reactExports.createElement("svg", _extends$R({ + return /*#__PURE__*/reactExports.createElement("svg", _extends$T({ xmlns: "http://www.w3.org/2000/svg", width: 12, height: 12, focusable: "false", viewBox: "0 0 12 12", "aria-hidden": "true" - }, props), _path$G || (_path$G = /*#__PURE__*/reactExports.createElement("path", { + }, props), _path$I || (_path$I = /*#__PURE__*/reactExports.createElement("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", @@ -8048,9 +8048,9 @@ Anchor.propTypes = { */ var _g$7, _circle$a; -function _extends$Q() { _extends$Q = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$Q.apply(this, arguments); } +function _extends$S() { _extends$S = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$S.apply(this, arguments); } var SvgAlertErrorStroke$2 = function SvgAlertErrorStroke(props) { - return /*#__PURE__*/reactExports.createElement("svg", _extends$Q({ + return /*#__PURE__*/reactExports.createElement("svg", _extends$S({ xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, @@ -8083,9 +8083,9 @@ var SvgAlertErrorStroke$2 = function SvgAlertErrorStroke(props) { */ var _g$6; -function _extends$P() { _extends$P = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$P.apply(this, arguments); } +function _extends$R() { _extends$R = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$R.apply(this, arguments); } var SvgCheckCircleStroke$3 = function SvgCheckCircleStroke(props) { - return /*#__PURE__*/reactExports.createElement("svg", _extends$P({ + return /*#__PURE__*/reactExports.createElement("svg", _extends$R({ xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, @@ -8113,17 +8113,17 @@ var SvgCheckCircleStroke$3 = function SvgCheckCircleStroke(props) { * found at http://www.apache.org/licenses/LICENSE-2.0. */ -var _path$F, _circle$9; -function _extends$O() { _extends$O = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$O.apply(this, arguments); } +var _path$H, _circle$9; +function _extends$Q() { _extends$Q = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$Q.apply(this, arguments); } var SvgAlertWarningStroke$2 = function SvgAlertWarningStroke(props) { - return /*#__PURE__*/reactExports.createElement("svg", _extends$O({ + return /*#__PURE__*/reactExports.createElement("svg", _extends$Q({ xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, focusable: "false", viewBox: "0 0 16 16", "aria-hidden": "true" - }, props), _path$F || (_path$F = /*#__PURE__*/reactExports.createElement("path", { + }, props), _path$H || (_path$H = /*#__PURE__*/reactExports.createElement("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", @@ -8144,9 +8144,9 @@ var SvgAlertWarningStroke$2 = function SvgAlertWarningStroke(props) { */ var _g$5, _circle$8; -function _extends$N() { _extends$N = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$N.apply(this, arguments); } +function _extends$P() { _extends$P = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$P.apply(this, arguments); } var SvgInfoStroke = function SvgInfoStroke(props) { - return /*#__PURE__*/reactExports.createElement("svg", _extends$N({ + return /*#__PURE__*/reactExports.createElement("svg", _extends$P({ xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, @@ -8268,17 +8268,17 @@ Notification.propTypes = { * found at http://www.apache.org/licenses/LICENSE-2.0. */ -var _path$E; -function _extends$M() { _extends$M = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$M.apply(this, arguments); } +var _path$G; +function _extends$O() { _extends$O = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$O.apply(this, arguments); } var SvgXStroke$4 = function SvgXStroke(props) { - return /*#__PURE__*/reactExports.createElement("svg", _extends$M({ + return /*#__PURE__*/reactExports.createElement("svg", _extends$O({ xmlns: "http://www.w3.org/2000/svg", width: 12, height: 12, focusable: "false", viewBox: "0 0 12 12", "aria-hidden": "true" - }, props), _path$E || (_path$E = /*#__PURE__*/reactExports.createElement("path", { + }, props), _path$G || (_path$G = /*#__PURE__*/reactExports.createElement("path", { stroke: "currentColor", strokeLinecap: "round", d: "M3 9l6-6m0 6L3 3" @@ -9140,7 +9140,7 @@ var CSSTransition = /*#__PURE__*/function (_React$Component) { _this$props.classNames; var props = _objectWithoutPropertiesLoose$1(_this$props, ["classNames"]); - return /*#__PURE__*/React__default.createElement(Transition$1, _extends$S({}, props, { + return /*#__PURE__*/React__default.createElement(Transition$1, _extends$U({}, props, { onEnter: this.onEnter, onEntered: this.onEntered, onEntering: this.onEntering, @@ -9383,7 +9383,7 @@ var TransitionGroup = /*#__PURE__*/function (_React$Component) { if (this.mounted) { this.setState(function (state) { - var children = _extends$S({}, state.children); + var children = _extends$U({}, state.children); delete children[child.key]; return { @@ -10028,9 +10028,9 @@ StyledHint$1.defaultProps = { */ var _g$4, _circle$7; -function _extends$L() { _extends$L = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$L.apply(this, arguments); } +function _extends$N() { _extends$N = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$N.apply(this, arguments); } var SvgAlertErrorStroke$1 = function SvgAlertErrorStroke(props) { - return /*#__PURE__*/reactExports.createElement("svg", _extends$L({ + return /*#__PURE__*/reactExports.createElement("svg", _extends$N({ xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, @@ -10062,17 +10062,17 @@ var SvgAlertErrorStroke$1 = function SvgAlertErrorStroke(props) { * found at http://www.apache.org/licenses/LICENSE-2.0. */ -var _path$D, _circle$6; -function _extends$K() { _extends$K = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$K.apply(this, arguments); } +var _path$F, _circle$6; +function _extends$M() { _extends$M = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$M.apply(this, arguments); } var SvgAlertWarningStroke$1 = function SvgAlertWarningStroke(props) { - return /*#__PURE__*/reactExports.createElement("svg", _extends$K({ + return /*#__PURE__*/reactExports.createElement("svg", _extends$M({ xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, focusable: "false", viewBox: "0 0 16 16", "aria-hidden": "true" - }, props), _path$D || (_path$D = /*#__PURE__*/reactExports.createElement("path", { + }, props), _path$F || (_path$F = /*#__PURE__*/reactExports.createElement("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", @@ -10093,9 +10093,9 @@ var SvgAlertWarningStroke$1 = function SvgAlertWarningStroke(props) { */ var _g$3; -function _extends$J() { _extends$J = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$J.apply(this, arguments); } +function _extends$L() { _extends$L = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$L.apply(this, arguments); } var SvgCheckCircleStroke$2 = function SvgCheckCircleStroke(props) { - return /*#__PURE__*/reactExports.createElement("svg", _extends$J({ + return /*#__PURE__*/reactExports.createElement("svg", _extends$L({ xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, @@ -10654,17 +10654,17 @@ StyledCheckMessage.defaultProps = { * found at http://www.apache.org/licenses/LICENSE-2.0. */ -var _path$C; -function _extends$I() { _extends$I = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$I.apply(this, arguments); } +var _path$E; +function _extends$K() { _extends$K = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$K.apply(this, arguments); } var SvgCheckSmFill = function SvgCheckSmFill(props) { - return /*#__PURE__*/reactExports.createElement("svg", _extends$I({ + return /*#__PURE__*/reactExports.createElement("svg", _extends$K({ xmlns: "http://www.w3.org/2000/svg", width: 12, height: 12, focusable: "false", viewBox: "0 0 12 12", "aria-hidden": "true" - }, props), _path$C || (_path$C = /*#__PURE__*/reactExports.createElement("path", { + }, props), _path$E || (_path$E = /*#__PURE__*/reactExports.createElement("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", @@ -10700,17 +10700,17 @@ StyledCheckSvg.defaultProps = { * found at http://www.apache.org/licenses/LICENSE-2.0. */ -var _path$B; -function _extends$H() { _extends$H = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$H.apply(this, arguments); } +var _path$D; +function _extends$J() { _extends$J = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$J.apply(this, arguments); } var SvgDashFill = function SvgDashFill(props) { - return /*#__PURE__*/reactExports.createElement("svg", _extends$H({ + return /*#__PURE__*/reactExports.createElement("svg", _extends$J({ xmlns: "http://www.w3.org/2000/svg", width: 12, height: 12, focusable: "false", viewBox: "0 0 12 12", "aria-hidden": "true" - }, props), _path$B || (_path$B = /*#__PURE__*/reactExports.createElement("path", { + }, props), _path$D || (_path$D = /*#__PURE__*/reactExports.createElement("path", { stroke: "currentColor", strokeLinecap: "round", strokeWidth: 2, @@ -10956,9 +10956,9 @@ StyledFileListItem.defaultProps = { */ var _circle$5; -function _extends$G() { _extends$G = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$G.apply(this, arguments); } +function _extends$I() { _extends$I = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$I.apply(this, arguments); } var SvgCircleSmFill$1 = function SvgCircleSmFill(props) { - return /*#__PURE__*/reactExports.createElement("svg", _extends$G({ + return /*#__PURE__*/reactExports.createElement("svg", _extends$I({ xmlns: "http://www.w3.org/2000/svg", width: 12, height: 12, @@ -11062,9 +11062,9 @@ StyledToggleMessage.defaultProps = { */ var _circle$4; -function _extends$F() { _extends$F = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$F.apply(this, arguments); } +function _extends$H() { _extends$H = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$H.apply(this, arguments); } var SvgCircleSmFill = function SvgCircleSmFill(props) { - return /*#__PURE__*/reactExports.createElement("svg", _extends$F({ + return /*#__PURE__*/reactExports.createElement("svg", _extends$H({ xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, @@ -12117,17 +12117,17 @@ FileList.Item = Item; * found at http://www.apache.org/licenses/LICENSE-2.0. */ -var _path$A; -function _extends$E() { _extends$E = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$E.apply(this, arguments); } +var _path$C; +function _extends$G() { _extends$G = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$G.apply(this, arguments); } var SvgXStroke$3 = function SvgXStroke(props) { - return /*#__PURE__*/reactExports.createElement("svg", _extends$E({ + return /*#__PURE__*/reactExports.createElement("svg", _extends$G({ xmlns: "http://www.w3.org/2000/svg", width: 12, height: 12, focusable: "false", viewBox: "0 0 12 12", "aria-hidden": "true" - }, props), _path$A || (_path$A = /*#__PURE__*/reactExports.createElement("path", { + }, props), _path$C || (_path$C = /*#__PURE__*/reactExports.createElement("path", { stroke: "currentColor", strokeLinecap: "round", d: "M3 9l6-6m0 6L3 3" @@ -12141,17 +12141,17 @@ var SvgXStroke$3 = function SvgXStroke(props) { * found at http://www.apache.org/licenses/LICENSE-2.0. */ -var _path$z; -function _extends$D() { _extends$D = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$D.apply(this, arguments); } +var _path$B; +function _extends$F() { _extends$F = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$F.apply(this, arguments); } var SvgXStroke$2 = function SvgXStroke(props) { - return /*#__PURE__*/reactExports.createElement("svg", _extends$D({ + return /*#__PURE__*/reactExports.createElement("svg", _extends$F({ xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, focusable: "false", viewBox: "0 0 16 16", "aria-hidden": "true" - }, props), _path$z || (_path$z = /*#__PURE__*/reactExports.createElement("path", { + }, props), _path$B || (_path$B = /*#__PURE__*/reactExports.createElement("path", { stroke: "currentColor", strokeLinecap: "round", d: "M3 13L13 3m0 10L3 3" @@ -12201,17 +12201,17 @@ const Close$2 = CloseComponent$1; * found at http://www.apache.org/licenses/LICENSE-2.0. */ -var _path$y; -function _extends$C() { _extends$C = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$C.apply(this, arguments); } +var _path$A; +function _extends$E() { _extends$E = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$E.apply(this, arguments); } var SvgTrashStroke$1 = function SvgTrashStroke(props) { - return /*#__PURE__*/reactExports.createElement("svg", _extends$C({ + return /*#__PURE__*/reactExports.createElement("svg", _extends$E({ xmlns: "http://www.w3.org/2000/svg", width: 12, height: 12, focusable: "false", viewBox: "0 0 12 12", "aria-hidden": "true" - }, props), _path$y || (_path$y = /*#__PURE__*/reactExports.createElement("path", { + }, props), _path$A || (_path$A = /*#__PURE__*/reactExports.createElement("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", @@ -12226,17 +12226,17 @@ var SvgTrashStroke$1 = function SvgTrashStroke(props) { * found at http://www.apache.org/licenses/LICENSE-2.0. */ -var _path$x; -function _extends$B() { _extends$B = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$B.apply(this, arguments); } +var _path$z; +function _extends$D() { _extends$D = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$D.apply(this, arguments); } var SvgTrashStroke = function SvgTrashStroke(props) { - return /*#__PURE__*/reactExports.createElement("svg", _extends$B({ + return /*#__PURE__*/reactExports.createElement("svg", _extends$D({ xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, focusable: "false", viewBox: "0 0 16 16", "aria-hidden": "true" - }, props), _path$x || (_path$x = /*#__PURE__*/reactExports.createElement("path", { + }, props), _path$z || (_path$z = /*#__PURE__*/reactExports.createElement("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", @@ -12275,17 +12275,17 @@ const Delete = DeleteComponent; * found at http://www.apache.org/licenses/LICENSE-2.0. */ -var _path$w, _rect$2; -function _extends$A() { _extends$A = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$A.apply(this, arguments); } +var _path$y, _rect$2; +function _extends$C() { _extends$C = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$C.apply(this, arguments); } var SvgFilePdfStroke$1 = function SvgFilePdfStroke(props) { - return /*#__PURE__*/reactExports.createElement("svg", _extends$A({ + return /*#__PURE__*/reactExports.createElement("svg", _extends$C({ xmlns: "http://www.w3.org/2000/svg", width: 12, height: 12, focusable: "false", viewBox: "0 0 12 12", "aria-hidden": "true" - }, props), _path$w || (_path$w = /*#__PURE__*/reactExports.createElement("path", { + }, props), _path$y || (_path$y = /*#__PURE__*/reactExports.createElement("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", @@ -12308,17 +12308,17 @@ var SvgFilePdfStroke$1 = function SvgFilePdfStroke(props) { * found at http://www.apache.org/licenses/LICENSE-2.0. */ -var _path$v; -function _extends$z() { _extends$z = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$z.apply(this, arguments); } +var _path$x; +function _extends$B() { _extends$B = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$B.apply(this, arguments); } var SvgFileZipStroke$1 = function SvgFileZipStroke(props) { - return /*#__PURE__*/reactExports.createElement("svg", _extends$z({ + return /*#__PURE__*/reactExports.createElement("svg", _extends$B({ xmlns: "http://www.w3.org/2000/svg", width: 12, height: 12, focusable: "false", viewBox: "0 0 12 12", "aria-hidden": "true" - }, props), _path$v || (_path$v = /*#__PURE__*/reactExports.createElement("path", { + }, props), _path$x || (_path$x = /*#__PURE__*/reactExports.createElement("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", @@ -12333,17 +12333,17 @@ var SvgFileZipStroke$1 = function SvgFileZipStroke(props) { * found at http://www.apache.org/licenses/LICENSE-2.0. */ -var _path$u, _circle$3; -function _extends$y() { _extends$y = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$y.apply(this, arguments); } +var _path$w, _circle$3; +function _extends$A() { _extends$A = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$A.apply(this, arguments); } var SvgFileImageStroke$1 = function SvgFileImageStroke(props) { - return /*#__PURE__*/reactExports.createElement("svg", _extends$y({ + return /*#__PURE__*/reactExports.createElement("svg", _extends$A({ xmlns: "http://www.w3.org/2000/svg", width: 12, height: 12, focusable: "false", viewBox: "0 0 12 12", "aria-hidden": "true" - }, props), _path$u || (_path$u = /*#__PURE__*/reactExports.createElement("path", { + }, props), _path$w || (_path$w = /*#__PURE__*/reactExports.createElement("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", @@ -12364,17 +12364,17 @@ var SvgFileImageStroke$1 = function SvgFileImageStroke(props) { * found at http://www.apache.org/licenses/LICENSE-2.0. */ -var _path$t; -function _extends$x() { _extends$x = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$x.apply(this, arguments); } +var _path$v; +function _extends$z() { _extends$z = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$z.apply(this, arguments); } var SvgFileDocumentStroke$1 = function SvgFileDocumentStroke(props) { - return /*#__PURE__*/reactExports.createElement("svg", _extends$x({ + return /*#__PURE__*/reactExports.createElement("svg", _extends$z({ xmlns: "http://www.w3.org/2000/svg", width: 12, height: 12, focusable: "false", viewBox: "0 0 12 12", "aria-hidden": "true" - }, props), _path$t || (_path$t = /*#__PURE__*/reactExports.createElement("path", { + }, props), _path$v || (_path$v = /*#__PURE__*/reactExports.createElement("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", @@ -12389,17 +12389,17 @@ var SvgFileDocumentStroke$1 = function SvgFileDocumentStroke(props) { * found at http://www.apache.org/licenses/LICENSE-2.0. */ -var _path$s; -function _extends$w() { _extends$w = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$w.apply(this, arguments); } +var _path$u; +function _extends$y() { _extends$y = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$y.apply(this, arguments); } var SvgFileSpreadsheetStroke$1 = function SvgFileSpreadsheetStroke(props) { - return /*#__PURE__*/reactExports.createElement("svg", _extends$w({ + return /*#__PURE__*/reactExports.createElement("svg", _extends$y({ xmlns: "http://www.w3.org/2000/svg", width: 12, height: 12, focusable: "false", viewBox: "0 0 12 12", "aria-hidden": "true" - }, props), _path$s || (_path$s = /*#__PURE__*/reactExports.createElement("path", { + }, props), _path$u || (_path$u = /*#__PURE__*/reactExports.createElement("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", @@ -12414,17 +12414,17 @@ var SvgFileSpreadsheetStroke$1 = function SvgFileSpreadsheetStroke(props) { * found at http://www.apache.org/licenses/LICENSE-2.0. */ -var _path$r; -function _extends$v() { _extends$v = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$v.apply(this, arguments); } +var _path$t; +function _extends$x() { _extends$x = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$x.apply(this, arguments); } var SvgFilePresentationStroke$1 = function SvgFilePresentationStroke(props) { - return /*#__PURE__*/reactExports.createElement("svg", _extends$v({ + return /*#__PURE__*/reactExports.createElement("svg", _extends$x({ xmlns: "http://www.w3.org/2000/svg", width: 12, height: 12, focusable: "false", viewBox: "0 0 12 12", "aria-hidden": "true" - }, props), _path$r || (_path$r = /*#__PURE__*/reactExports.createElement("path", { + }, props), _path$t || (_path$t = /*#__PURE__*/reactExports.createElement("path", { fill: "none", stroke: "currentColor", d: "M10.5 3.21V11c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h5.79c.13 0 .26.05.35.15l2.21 2.21c.1.09.15.21.15.35zM6 9.5h2c.28 0 .5-.22.5-.5V8c0-.28-.22-.5-.5-.5H6c-.28 0-.5.22-.5.5v1c0 .28.22.5.5.5zm-2-2h2c.28 0 .5-.22.5-.5V6c0-.28-.22-.5-.5-.5H4c-.28 0-.5.22-.5.5v1c0 .28.22.5.5.5zm3.5-7V3c0 .28.22.5.5.5h2.5" @@ -12438,17 +12438,17 @@ var SvgFilePresentationStroke$1 = function SvgFilePresentationStroke(props) { * found at http://www.apache.org/licenses/LICENSE-2.0. */ -var _path$q; -function _extends$u() { _extends$u = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$u.apply(this, arguments); } +var _path$s; +function _extends$w() { _extends$w = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$w.apply(this, arguments); } var SvgFileGenericStroke$1 = function SvgFileGenericStroke(props) { - return /*#__PURE__*/reactExports.createElement("svg", _extends$u({ + return /*#__PURE__*/reactExports.createElement("svg", _extends$w({ xmlns: "http://www.w3.org/2000/svg", width: 12, height: 12, focusable: "false", viewBox: "0 0 12 12", "aria-hidden": "true" - }, props), _path$q || (_path$q = /*#__PURE__*/reactExports.createElement("path", { + }, props), _path$s || (_path$s = /*#__PURE__*/reactExports.createElement("path", { fill: "none", stroke: "currentColor", d: "M10.5 3.21V11c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h5.79c.13 0 .26.05.35.15l2.21 2.21c.1.09.15.21.15.35zM7.5.5V3c0 .28.22.5.5.5h2.5" @@ -12463,9 +12463,9 @@ var SvgFileGenericStroke$1 = function SvgFileGenericStroke(props) { */ var _g$2; -function _extends$t() { _extends$t = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$t.apply(this, arguments); } +function _extends$v() { _extends$v = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$v.apply(this, arguments); } var SvgCheckCircleStroke$1 = function SvgCheckCircleStroke(props) { - return /*#__PURE__*/reactExports.createElement("svg", _extends$t({ + return /*#__PURE__*/reactExports.createElement("svg", _extends$v({ xmlns: "http://www.w3.org/2000/svg", width: 12, height: 12, @@ -12493,17 +12493,17 @@ var SvgCheckCircleStroke$1 = function SvgCheckCircleStroke(props) { * found at http://www.apache.org/licenses/LICENSE-2.0. */ -var _path$p; -function _extends$s() { _extends$s = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$s.apply(this, arguments); } +var _path$r; +function _extends$u() { _extends$u = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$u.apply(this, arguments); } var SvgFileErrorStroke$1 = function SvgFileErrorStroke(props) { - return /*#__PURE__*/reactExports.createElement("svg", _extends$s({ + return /*#__PURE__*/reactExports.createElement("svg", _extends$u({ xmlns: "http://www.w3.org/2000/svg", width: 12, height: 12, focusable: "false", viewBox: "0 0 12 12", "aria-hidden": "true" - }, props), _path$p || (_path$p = /*#__PURE__*/reactExports.createElement("path", { + }, props), _path$r || (_path$r = /*#__PURE__*/reactExports.createElement("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", @@ -12518,17 +12518,17 @@ var SvgFileErrorStroke$1 = function SvgFileErrorStroke(props) { * found at http://www.apache.org/licenses/LICENSE-2.0. */ -var _path$o, _rect$1; -function _extends$r() { _extends$r = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$r.apply(this, arguments); } +var _path$q, _rect$1; +function _extends$t() { _extends$t = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$t.apply(this, arguments); } var SvgFilePdfStroke = function SvgFilePdfStroke(props) { - return /*#__PURE__*/reactExports.createElement("svg", _extends$r({ + return /*#__PURE__*/reactExports.createElement("svg", _extends$t({ xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, focusable: "false", viewBox: "0 0 16 16", "aria-hidden": "true" - }, props), _path$o || (_path$o = /*#__PURE__*/reactExports.createElement("path", { + }, props), _path$q || (_path$q = /*#__PURE__*/reactExports.createElement("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", @@ -12551,17 +12551,17 @@ var SvgFilePdfStroke = function SvgFilePdfStroke(props) { * found at http://www.apache.org/licenses/LICENSE-2.0. */ -var _path$n; -function _extends$q() { _extends$q = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$q.apply(this, arguments); } +var _path$p; +function _extends$s() { _extends$s = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$s.apply(this, arguments); } var SvgFileZipStroke = function SvgFileZipStroke(props) { - return /*#__PURE__*/reactExports.createElement("svg", _extends$q({ + return /*#__PURE__*/reactExports.createElement("svg", _extends$s({ xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, focusable: "false", viewBox: "0 0 16 16", "aria-hidden": "true" - }, props), _path$n || (_path$n = /*#__PURE__*/reactExports.createElement("path", { + }, props), _path$p || (_path$p = /*#__PURE__*/reactExports.createElement("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", @@ -12576,17 +12576,17 @@ var SvgFileZipStroke = function SvgFileZipStroke(props) { * found at http://www.apache.org/licenses/LICENSE-2.0. */ -var _path$m, _circle$2; -function _extends$p() { _extends$p = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$p.apply(this, arguments); } +var _path$o, _circle$2; +function _extends$r() { _extends$r = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$r.apply(this, arguments); } var SvgFileImageStroke = function SvgFileImageStroke(props) { - return /*#__PURE__*/reactExports.createElement("svg", _extends$p({ + return /*#__PURE__*/reactExports.createElement("svg", _extends$r({ xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, focusable: "false", viewBox: "0 0 16 16", "aria-hidden": "true" - }, props), _path$m || (_path$m = /*#__PURE__*/reactExports.createElement("path", { + }, props), _path$o || (_path$o = /*#__PURE__*/reactExports.createElement("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", @@ -12606,17 +12606,17 @@ var SvgFileImageStroke = function SvgFileImageStroke(props) { * found at http://www.apache.org/licenses/LICENSE-2.0. */ -var _path$l; -function _extends$o() { _extends$o = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$o.apply(this, arguments); } +var _path$n; +function _extends$q() { _extends$q = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$q.apply(this, arguments); } var SvgFileDocumentStroke = function SvgFileDocumentStroke(props) { - return /*#__PURE__*/reactExports.createElement("svg", _extends$o({ + return /*#__PURE__*/reactExports.createElement("svg", _extends$q({ xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, focusable: "false", viewBox: "0 0 16 16", "aria-hidden": "true" - }, props), _path$l || (_path$l = /*#__PURE__*/reactExports.createElement("path", { + }, props), _path$n || (_path$n = /*#__PURE__*/reactExports.createElement("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", @@ -12631,17 +12631,17 @@ var SvgFileDocumentStroke = function SvgFileDocumentStroke(props) { * found at http://www.apache.org/licenses/LICENSE-2.0. */ -var _path$k; -function _extends$n() { _extends$n = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$n.apply(this, arguments); } +var _path$m; +function _extends$p() { _extends$p = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$p.apply(this, arguments); } var SvgFileSpreadsheetStroke = function SvgFileSpreadsheetStroke(props) { - return /*#__PURE__*/reactExports.createElement("svg", _extends$n({ + return /*#__PURE__*/reactExports.createElement("svg", _extends$p({ xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, focusable: "false", viewBox: "0 0 16 16", "aria-hidden": "true" - }, props), _path$k || (_path$k = /*#__PURE__*/reactExports.createElement("path", { + }, props), _path$m || (_path$m = /*#__PURE__*/reactExports.createElement("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", @@ -12656,17 +12656,17 @@ var SvgFileSpreadsheetStroke = function SvgFileSpreadsheetStroke(props) { * found at http://www.apache.org/licenses/LICENSE-2.0. */ -var _path$j; -function _extends$m() { _extends$m = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$m.apply(this, arguments); } +var _path$l; +function _extends$o() { _extends$o = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$o.apply(this, arguments); } var SvgFilePresentationStroke = function SvgFilePresentationStroke(props) { - return /*#__PURE__*/reactExports.createElement("svg", _extends$m({ + return /*#__PURE__*/reactExports.createElement("svg", _extends$o({ xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, focusable: "false", viewBox: "0 0 16 16", "aria-hidden": "true" - }, props), _path$j || (_path$j = /*#__PURE__*/reactExports.createElement("path", { + }, props), _path$l || (_path$l = /*#__PURE__*/reactExports.createElement("path", { fill: "none", stroke: "currentColor", d: "M14.5 4.2V15c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h8.85c.13 0 .26.05.36.15l3.15 3.2c.09.1.14.22.14.35zm-4-3.7V4c0 .28.22.5.5.5h3.5M7 9.5h4c.28 0 .5.22.5.5v3c0 .28-.22.5-.5.5H7c-.28 0-.5-.22-.5-.5v-3c0-.28.22-.5.5-.5zm-.5 2H5c-.28 0-.5-.22-.5-.5V8c0-.28.22-.5.5-.5h4c.28 0 .5.22.5.5v1.5" @@ -12680,17 +12680,17 @@ var SvgFilePresentationStroke = function SvgFilePresentationStroke(props) { * found at http://www.apache.org/licenses/LICENSE-2.0. */ -var _path$i; -function _extends$l() { _extends$l = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$l.apply(this, arguments); } +var _path$k; +function _extends$n() { _extends$n = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$n.apply(this, arguments); } var SvgFileGenericStroke = function SvgFileGenericStroke(props) { - return /*#__PURE__*/reactExports.createElement("svg", _extends$l({ + return /*#__PURE__*/reactExports.createElement("svg", _extends$n({ xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, focusable: "false", viewBox: "0 0 16 16", "aria-hidden": "true" - }, props), _path$i || (_path$i = /*#__PURE__*/reactExports.createElement("path", { + }, props), _path$k || (_path$k = /*#__PURE__*/reactExports.createElement("path", { fill: "none", stroke: "currentColor", d: "M14.5 4.2V15c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h8.85c.13 0 .26.05.36.15l3.15 3.2c.09.1.14.22.14.35zm-4-3.7V4c0 .28.22.5.5.5h3.5" @@ -12704,17 +12704,17 @@ var SvgFileGenericStroke = function SvgFileGenericStroke(props) { * found at http://www.apache.org/licenses/LICENSE-2.0. */ -var _path$h; -function _extends$k() { _extends$k = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$k.apply(this, arguments); } +var _path$j; +function _extends$m() { _extends$m = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$m.apply(this, arguments); } var SvgFileErrorStroke = function SvgFileErrorStroke(props) { - return /*#__PURE__*/reactExports.createElement("svg", _extends$k({ + return /*#__PURE__*/reactExports.createElement("svg", _extends$m({ xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, focusable: "false", viewBox: "0 0 16 16", "aria-hidden": "true" - }, props), _path$h || (_path$h = /*#__PURE__*/reactExports.createElement("path", { + }, props), _path$j || (_path$j = /*#__PURE__*/reactExports.createElement("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", @@ -13110,6 +13110,33 @@ LG.defaultProps = { * found at http://www.apache.org/licenses/LICENSE-2.0. */ +const XXXL = reactExports.forwardRef((_ref, ref) => { + let { + tag, + ...other + } = _ref; + return React__default.createElement(StyledFont, Object.assign({ + as: tag, + ref: ref, + size: "3xlarge" + }, other)); +}); +XXXL.displayName = 'XXXL'; +XXXL.propTypes = { + tag: PropTypes.any, + isBold: PropTypes.bool +}; +XXXL.defaultProps = { + tag: 'div' +}; + +/** +* Copyright Zendesk, Inc. +* +* Use of this source code is governed under the Apache License, Version 2.0 +* found at http://www.apache.org/licenses/LICENSE-2.0. +*/ + const Paragraph = reactExports.forwardRef((props, ref) => React__default.createElement(StyledParagraph$1, Object.assign({ ref: ref }, props))); @@ -13612,7 +13639,7 @@ function callOnChangeProps(action, state, newState) { } }); if (props.onStateChange && Object.keys(changes).length) { - props.onStateChange(_extends$S({ + props.onStateChange(_extends$U({ type: type }, changes)); } @@ -13622,7 +13649,7 @@ function invokeOnChangeHandler(key, action, state, newState) { type = action.type; var handler = "on" + capitalizeString(key) + "Change"; if (props[handler] && newState[key] !== undefined && newState[key] !== state[key]) { - props[handler](_extends$S({ + props[handler](_extends$U({ type: type }, newState)); } @@ -13752,7 +13779,7 @@ function useEnhancedReducer(reducer, initialState, props) { actionRef.current = action; state = getState(state, action.props); var changes = reducer(state, action); - var newState = action.props.stateReducer(state, _extends$S({}, action, { + var newState = action.props.stateReducer(state, _extends$U({}, action, { changes: changes })); return newState; @@ -13762,7 +13789,7 @@ function useEnhancedReducer(reducer, initialState, props) { dispatch = _useReducer[1]; var propsRef = useLatestRef$1(props); var dispatchWithProps = reactExports.useCallback(function (action) { - return dispatch(_extends$S({ + return dispatch(_extends$U({ props: propsRef.current }, action)); }, [propsRef]); @@ -13926,7 +13953,7 @@ function useA11yMessageSetter(getA11yMessage, dependencyArray, _ref3) { return; } updateA11yStatus(function () { - return getA11yMessage(_extends$S({ + return getA11yMessage(_extends$U({ highlightedIndex: highlightedIndex, highlightedItem: items[highlightedIndex], resultCount: items.length @@ -13976,10 +14003,10 @@ function getChangesOnSelection(props, highlightedIndex, inputValue) { inputValue = true; } var shouldSelect = ((_props$items = props.items) == null ? void 0 : _props$items.length) && highlightedIndex >= 0; - return _extends$S({ + return _extends$U({ isOpen: false, highlightedIndex: -1 - }, shouldSelect && _extends$S({ + }, shouldSelect && _extends$U({ selectedItem: props.items[highlightedIndex], isOpen: getDefaultValue$1(props, 'isOpen'), highlightedIndex: getDefaultValue$1(props, 'highlightedIndex') @@ -14006,7 +14033,7 @@ var commonPropTypes = { }; // Shared between useSelect, useCombobox, Downshift. -var commonDropdownPropTypes = _extends$S({}, commonPropTypes, { +var commonDropdownPropTypes = _extends$U({}, commonPropTypes, { getA11yStatusMessage: PropTypes.func, highlightedIndex: PropTypes.number, defaultHighlightedIndex: PropTypes.number, @@ -14083,7 +14110,7 @@ function downshiftCommonReducer(state, action, stateChangeTypes) { default: throw new Error('Reducer called without proper action type.'); } - return _extends$S({}, state, changes); + return _extends$U({}, state, changes); } // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment __assign(__assign({}, commonDropdownPropTypes), { items: PropTypes.array.isRequired, isItemDisabled: PropTypes.func, getA11ySelectionMessage: PropTypes.func }); @@ -14170,11 +14197,11 @@ function getInitialState$1(props) { if (inputValue === '' && selectedItem && props.defaultInputValue === undefined && props.initialInputValue === undefined && props.inputValue === undefined) { inputValue = props.itemToString(selectedItem); } - return _extends$S({}, initialState, { + return _extends$U({}, initialState, { inputValue: inputValue }); } -_extends$S({}, commonDropdownPropTypes, { +_extends$U({}, commonDropdownPropTypes, { items: PropTypes.array.isRequired, isItemDisabled: PropTypes.func, selectedItemChanged: PropTypes.func, @@ -14220,7 +14247,7 @@ function useControlledReducer(reducer, initialState, props) { }, [state.selectedItem, props.selectedItem]); return [getState(state, props), dispatch]; } -var defaultProps$1 = _extends$S({}, defaultProps$3, { +var defaultProps$1 = _extends$U({}, defaultProps$3, { selectedItemChanged: function selectedItemChanged(prevItem, item) { return prevItem !== item; }, @@ -14278,7 +14305,7 @@ function downshiftUseComboboxReducer(state, action) { changes = getChangesOnSelection(props, state.highlightedIndex); break; case InputKeyDownEscape: - changes = _extends$S({ + changes = _extends$U({ isOpen: false, highlightedIndex: -1 }, !state.isOpen && { @@ -14307,7 +14334,7 @@ function downshiftUseComboboxReducer(state, action) { }; break; case InputBlur: - changes = _extends$S({ + changes = _extends$U({ isOpen: false, highlightedIndex: -1 }, state.highlightedIndex >= 0 && ((_props$items = props.items) == null ? void 0 : _props$items.length) && action.selectItem && { @@ -14342,7 +14369,7 @@ function downshiftUseComboboxReducer(state, action) { default: return downshiftCommonReducer(state, action, stateChangeTypes$1); } - return _extends$S({}, state, changes); + return _extends$U({}, state, changes); } /* eslint-enable complexity */ @@ -14356,7 +14383,7 @@ function useCombobox$1(userProps) { userProps = {}; } // Props defaults and destructuring. - var props = _extends$S({}, defaultProps$1, userProps); + var props = _extends$U({}, defaultProps$1, userProps); var items = props.items, scrollIntoView = props.scrollIntoView, environment = props.environment, @@ -14394,7 +14421,7 @@ function useCombobox$1(userProps) { // Effects. // Sets a11y status message on changes in state. - useA11yMessageSetter(getA11yStatusMessage, [isOpen, highlightedIndex, inputValue, items], _extends$S({ + useA11yMessageSetter(getA11yStatusMessage, [isOpen, highlightedIndex, inputValue, items], _extends$U({ isInitialMount: isInitialMountRef.current, previousResultCount: previousResultCountRef.current, items: items, @@ -14402,7 +14429,7 @@ function useCombobox$1(userProps) { itemToString: itemToString }, state)); // Sets a11y status message on changes in selectedItem. - useA11yMessageSetter(getA11ySelectionMessage, [selectedItem], _extends$S({ + useA11yMessageSetter(getA11ySelectionMessage, [selectedItem], _extends$U({ isInitialMount: isInitialMountRef.current, previousResultCount: previousResultCountRef.current, items: items, @@ -14540,7 +14567,7 @@ function useCombobox$1(userProps) { // Getter props. var getLabelProps = reactExports.useCallback(function (labelProps) { - return _extends$S({ + return _extends$U({ id: elementIds.labelId, htmlFor: elementIds.inputId }, labelProps); @@ -14555,7 +14582,7 @@ function useCombobox$1(userProps) { rest = _objectWithoutPropertiesLoose$1(_ref, _excluded$1); var _ref2 = _temp2 === void 0 ? {} : _temp2; _ref2.suppressRefError; - return _extends$S((_extends2 = {}, _extends2[refKey] = handleRefs(ref, function (menuNode) { + return _extends$U((_extends2 = {}, _extends2[refKey] = handleRefs(ref, function (menuNode) { menuRef.current = menuNode; }), _extends2.id = elementIds.menuId, _extends2.role = 'listbox', _extends2['aria-labelledby'] = rest && rest['aria-label'] ? undefined : "" + elementIds.labelId, _extends2.onMouseLeave = callAllEventHandlers(onMouseLeave, function () { dispatch({ @@ -14609,7 +14636,7 @@ function useCombobox$1(userProps) { var itemHandleMouseDown = function itemHandleMouseDown(e) { return e.preventDefault(); }; - return _extends$S((_extends3 = {}, _extends3[refKey] = handleRefs(ref, function (itemNode) { + return _extends$U((_extends3 = {}, _extends3[refKey] = handleRefs(ref, function (itemNode) { if (itemNode) { itemRefs.current[elementIds.getItemId(index)] = itemNode; } @@ -14633,9 +14660,9 @@ function useCombobox$1(userProps) { type: ToggleButtonClick }); }; - return _extends$S((_extends4 = {}, _extends4[refKey] = handleRefs(ref, function (toggleButtonNode) { + return _extends$U((_extends4 = {}, _extends4[refKey] = handleRefs(ref, function (toggleButtonNode) { toggleButtonRef.current = toggleButtonNode; - }), _extends4['aria-controls'] = elementIds.menuId, _extends4['aria-expanded'] = latestState.isOpen, _extends4.id = elementIds.toggleButtonId, _extends4.tabIndex = -1, _extends4), !rest.disabled && _extends$S({}, { + }), _extends4['aria-controls'] = elementIds.menuId, _extends4['aria-expanded'] = latestState.isOpen, _extends4.id = elementIds.toggleButtonId, _extends4.tabIndex = -1, _extends4), !rest.disabled && _extends$U({}, { onClick: callAllEventHandlers(onClick, toggleButtonHandleClick) }), rest); }, [dispatch, latest, elementIds]); @@ -14690,7 +14717,7 @@ function useCombobox$1(userProps) { var _eventHandlers; eventHandlers = (_eventHandlers = {}, _eventHandlers[onChangeKey] = callAllEventHandlers(onChange, onInput, inputHandleChange), _eventHandlers.onKeyDown = callAllEventHandlers(onKeyDown, inputHandleKeyDown), _eventHandlers.onBlur = callAllEventHandlers(onBlur, inputHandleBlur), _eventHandlers.onClick = callAllEventHandlers(onClick, inputHandleClick), _eventHandlers); } - return _extends$S((_extends5 = {}, _extends5[refKey] = handleRefs(ref, function (inputNode) { + return _extends$U((_extends5 = {}, _extends5[refKey] = handleRefs(ref, function (inputNode) { inputRef.current = inputNode; }), _extends5['aria-activedescendant'] = latestState.isOpen && latestState.highlightedIndex > -1 ? elementIds.getItemId(latestState.highlightedIndex) : '', _extends5['aria-autocomplete'] = 'list', _extends5['aria-controls'] = elementIds.menuId, _extends5['aria-expanded'] = latestState.isOpen, _extends5['aria-labelledby'] = rest && rest['aria-label'] ? undefined : elementIds.labelId, _extends5.autoComplete = 'off', _extends5.id = elementIds.inputId, _extends5.role = 'combobox', _extends5.value = latestState.inputValue, _extends5), eventHandlers, rest); }, [setGetterPropCallInfo, latest, elementIds, inputKeyDownHandlers, dispatch, mouseAndTouchTrackersRef, environment]); @@ -14768,7 +14795,7 @@ function getA11yRemovalMessage(selectionParameters) { itemToStringLocal = selectionParameters.itemToString; return itemToStringLocal(removedSelectedItem) + " has been removed."; } -_extends$S({}, commonPropTypes, { +_extends$U({}, commonPropTypes, { selectedItems: PropTypes.array, initialSelectedItems: PropTypes.array, defaultSelectedItems: PropTypes.array, @@ -15542,17 +15569,17 @@ const useCombobox = _ref => { * found at http://www.apache.org/licenses/LICENSE-2.0. */ -var _path$g; -function _extends$j() { _extends$j = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$j.apply(this, arguments); } +var _path$i; +function _extends$l() { _extends$l = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$l.apply(this, arguments); } var SvgChevronDownStroke$1 = function SvgChevronDownStroke(props) { - return /*#__PURE__*/reactExports.createElement("svg", _extends$j({ + return /*#__PURE__*/reactExports.createElement("svg", _extends$l({ xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, focusable: "false", viewBox: "0 0 16 16", "aria-hidden": "true" - }, props), _path$g || (_path$g = /*#__PURE__*/reactExports.createElement("path", { + }, props), _path$i || (_path$i = /*#__PURE__*/reactExports.createElement("path", { fill: "currentColor", d: "M12.688 5.61a.5.5 0 01.69.718l-.066.062-5 4a.5.5 0 01-.542.054l-.082-.054-5-4a.5.5 0 01.55-.83l.074.05L8 9.359l4.688-3.75z" }))); @@ -16325,17 +16352,17 @@ StyledTag$1.defaultProps = { * found at http://www.apache.org/licenses/LICENSE-2.0. */ -var _path$f; -function _extends$i() { _extends$i = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$i.apply(this, arguments); } +var _path$h; +function _extends$k() { _extends$k = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$k.apply(this, arguments); } var SvgXStroke$1 = function SvgXStroke(props) { - return /*#__PURE__*/reactExports.createElement("svg", _extends$i({ + return /*#__PURE__*/reactExports.createElement("svg", _extends$k({ xmlns: "http://www.w3.org/2000/svg", width: 12, height: 12, focusable: "false", viewBox: "0 0 12 12", "aria-hidden": "true" - }, props), _path$f || (_path$f = /*#__PURE__*/reactExports.createElement("path", { + }, props), _path$h || (_path$h = /*#__PURE__*/reactExports.createElement("path", { stroke: "currentColor", strokeLinecap: "round", d: "M3 9l6-6m0 6L3 3" @@ -20132,7 +20159,7 @@ var defineProperty = function (obj, key, value) { return obj; }; -var _extends$h = Object.assign || function (target) { +var _extends$j = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; @@ -20154,7 +20181,7 @@ var _extends$h = Object.assign || function (target) { * @returns {Object} ClientRect like output */ function getClientRect(offsets) { - return _extends$h({}, offsets, { + return _extends$j({}, offsets, { right: offsets.left + offsets.width, bottom: offsets.top + offsets.height }); @@ -20442,7 +20469,7 @@ function computeAutoPlacement(placement, refRect, popper, reference, boundariesE }; var sortedAreas = Object.keys(rects).map(function (key) { - return _extends$h({ + return _extends$j({ key: key }, rects[key], { area: getArea(rects[key]) @@ -21084,9 +21111,9 @@ function computeStyle(data, options) { }; // Update `data` attributes, styles and arrowStyles - data.attributes = _extends$h({}, attributes, data.attributes); - data.styles = _extends$h({}, styles, data.styles); - data.arrowStyles = _extends$h({}, data.offsets.arrow, data.arrowStyles); + data.attributes = _extends$j({}, attributes, data.attributes); + data.styles = _extends$j({}, styles, data.styles); + data.arrowStyles = _extends$j({}, data.offsets.arrow, data.arrowStyles); return data; } @@ -21366,7 +21393,7 @@ function flip(data, options) { // this object contains `position`, we want to preserve it along with // any additional property we may add in the future - data.offsets.popper = _extends$h({}, data.offsets.popper, getPopperOffsets(data.instance.popper, data.offsets.reference, data.placement)); + data.offsets.popper = _extends$j({}, data.offsets.popper, getPopperOffsets(data.instance.popper, data.offsets.reference, data.placement)); data = runModifiers(data.instance.modifiers, data, 'flip'); } @@ -21640,7 +21667,7 @@ function preventOverflow(data, options) { order.forEach(function (placement) { var side = ['left', 'top'].indexOf(placement) !== -1 ? 'primary' : 'secondary'; - popper = _extends$h({}, popper, check[side](placement)); + popper = _extends$j({}, popper, check[side](placement)); }); data.offsets.popper = popper; @@ -21675,7 +21702,7 @@ function shift(data) { end: defineProperty({}, side, reference[side] + reference[measurement] - popper[measurement]) }; - data.offsets.popper = _extends$h({}, popper, shiftOffsets[shiftvariation]); + data.offsets.popper = _extends$j({}, popper, shiftOffsets[shiftvariation]); } return data; @@ -22207,7 +22234,7 @@ var Popper$1 = function () { this.update = debounce(this.update.bind(this)); // with {} we create a new object with the options inside it - this.options = _extends$h({}, Popper.Defaults, options); + this.options = _extends$j({}, Popper.Defaults, options); // init state this.state = { @@ -22222,13 +22249,13 @@ var Popper$1 = function () { // Deep merge modifiers options this.options.modifiers = {}; - Object.keys(_extends$h({}, Popper.Defaults.modifiers, options.modifiers)).forEach(function (name) { - _this.options.modifiers[name] = _extends$h({}, Popper.Defaults.modifiers[name] || {}, options.modifiers ? options.modifiers[name] : {}); + Object.keys(_extends$j({}, Popper.Defaults.modifiers, options.modifiers)).forEach(function (name) { + _this.options.modifiers[name] = _extends$j({}, Popper.Defaults.modifiers[name] || {}, options.modifiers ? options.modifiers[name] : {}); }); // Refactoring modifiers' list (Object => Array) this.modifiers = Object.keys(this.options.modifiers).map(function (name) { - return _extends$h({ + return _extends$j({ name: name }, _this.options.modifiers[name]); }) @@ -22731,8 +22758,8 @@ function (_React$Component) { placement: _this.props.placement, eventsEnabled: _this.props.eventsEnabled, positionFixed: _this.props.positionFixed, - modifiers: _extends$S({}, _this.props.modifiers, { - arrow: _extends$S({}, _this.props.modifiers && _this.props.modifiers.arrow, { + modifiers: _extends$U({}, _this.props.modifiers, { + arrow: _extends$U({}, _this.props.modifiers && _this.props.modifiers.arrow, { enabled: !!_this.arrowNode, element: _this.arrowNode }), @@ -22745,7 +22772,7 @@ function (_React$Component) { }); _defineProperty$2(_assertThisInitialized(_assertThisInitialized(_this)), "getPopperStyle", function () { - return !_this.popperNode || !_this.state.data ? initialStyle : _extends$S({ + return !_this.popperNode || !_this.state.data ? initialStyle : _extends$U({ position: _this.state.data.offsets.popper.position }, _this.state.data.styles); }); @@ -22847,7 +22874,7 @@ function Popper(_ref) { props = _objectWithoutPropertiesLoose$1(_ref, ["referenceElement"]); return reactExports.createElement(ManagerReferenceNodeContext.Consumer, null, function (referenceNode) { - return reactExports.createElement(InnerPopper, _extends$S({ + return reactExports.createElement(InnerPopper, _extends$U({ referenceElement: referenceElement !== undefined ? referenceElement : referenceNode }, props)); }); @@ -22893,7 +22920,7 @@ function (_React$Component) { function Reference(props) { return reactExports.createElement(ManagerReferenceNodeSetterContext.Consumer, null, function (setReferenceNode) { - return reactExports.createElement(InnerReference, _extends$S({ + return reactExports.createElement(InnerReference, _extends$U({ setReferenceNode: setReferenceNode }, props)); }); @@ -23770,17 +23797,17 @@ Message.propTypes = { * found at http://www.apache.org/licenses/LICENSE-2.0. */ -var _path$e; -function _extends$g() { _extends$g = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$g.apply(this, arguments); } +var _path$g; +function _extends$i() { _extends$i = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$i.apply(this, arguments); } var SvgPlusStroke = function SvgPlusStroke(props) { - return /*#__PURE__*/reactExports.createElement("svg", _extends$g({ + return /*#__PURE__*/reactExports.createElement("svg", _extends$i({ xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, focusable: "false", viewBox: "0 0 16 16", "aria-hidden": "true" - }, props), _path$e || (_path$e = /*#__PURE__*/reactExports.createElement("path", { + }, props), _path$g || (_path$g = /*#__PURE__*/reactExports.createElement("path", { stroke: "currentColor", strokeLinecap: "round", d: "M7.5 2.5v12m6-6h-12" @@ -23794,17 +23821,17 @@ var SvgPlusStroke = function SvgPlusStroke(props) { * found at http://www.apache.org/licenses/LICENSE-2.0. */ -var _path$d; -function _extends$f() { _extends$f = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$f.apply(this, arguments); } +var _path$f; +function _extends$h() { _extends$h = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$h.apply(this, arguments); } var SvgChevronRightStroke$2 = function SvgChevronRightStroke(props) { - return /*#__PURE__*/reactExports.createElement("svg", _extends$f({ + return /*#__PURE__*/reactExports.createElement("svg", _extends$h({ xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, focusable: "false", viewBox: "0 0 16 16", "aria-hidden": "true" - }, props), _path$d || (_path$d = /*#__PURE__*/reactExports.createElement("path", { + }, props), _path$f || (_path$f = /*#__PURE__*/reactExports.createElement("path", { fill: "currentColor", d: "M5.61 3.312a.5.5 0 01.718-.69l.062.066 4 5a.5.5 0 01.054.542l-.054.082-4 5a.5.5 0 01-.83-.55l.05-.074L9.359 8l-3.75-4.688z" }))); @@ -23817,17 +23844,17 @@ var SvgChevronRightStroke$2 = function SvgChevronRightStroke(props) { * found at http://www.apache.org/licenses/LICENSE-2.0. */ -var _path$c; -function _extends$e() { _extends$e = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$e.apply(this, arguments); } +var _path$e; +function _extends$g() { _extends$g = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$g.apply(this, arguments); } var SvgChevronLeftStroke$2 = function SvgChevronLeftStroke(props) { - return /*#__PURE__*/reactExports.createElement("svg", _extends$e({ + return /*#__PURE__*/reactExports.createElement("svg", _extends$g({ xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, focusable: "false", viewBox: "0 0 16 16", "aria-hidden": "true" - }, props), _path$c || (_path$c = /*#__PURE__*/reactExports.createElement("path", { + }, props), _path$e || (_path$e = /*#__PURE__*/reactExports.createElement("path", { fill: "currentColor", d: "M10.39 12.688a.5.5 0 01-.718.69l-.062-.066-4-5a.5.5 0 01-.054-.542l.054-.082 4-5a.5.5 0 01.83.55l-.05.074L6.641 8l3.75 4.688z" }))); @@ -23840,17 +23867,17 @@ var SvgChevronLeftStroke$2 = function SvgChevronLeftStroke(props) { * found at http://www.apache.org/licenses/LICENSE-2.0. */ -var _path$b; -function _extends$d() { _extends$d = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$d.apply(this, arguments); } +var _path$d; +function _extends$f() { _extends$f = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$f.apply(this, arguments); } var SvgCheckLgStroke = function SvgCheckLgStroke(props) { - return /*#__PURE__*/reactExports.createElement("svg", _extends$d({ + return /*#__PURE__*/reactExports.createElement("svg", _extends$f({ xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, focusable: "false", viewBox: "0 0 16 16", "aria-hidden": "true" - }, props), _path$b || (_path$b = /*#__PURE__*/reactExports.createElement("path", { + }, props), _path$d || (_path$d = /*#__PURE__*/reactExports.createElement("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", @@ -28454,17 +28481,17 @@ function getStartOfWeek(locale) { * found at http://www.apache.org/licenses/LICENSE-2.0. */ -var _path$a; -function _extends$c() { _extends$c = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$c.apply(this, arguments); } +var _path$c; +function _extends$e() { _extends$e = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$e.apply(this, arguments); } var SvgChevronLeftStroke$1 = function SvgChevronLeftStroke(props) { - return /*#__PURE__*/reactExports.createElement("svg", _extends$c({ + return /*#__PURE__*/reactExports.createElement("svg", _extends$e({ xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, focusable: "false", viewBox: "0 0 16 16", "aria-hidden": "true" - }, props), _path$a || (_path$a = /*#__PURE__*/reactExports.createElement("path", { + }, props), _path$c || (_path$c = /*#__PURE__*/reactExports.createElement("path", { fill: "currentColor", d: "M10.39 12.688a.5.5 0 01-.718.69l-.062-.066-4-5a.5.5 0 01-.054-.542l.054-.082 4-5a.5.5 0 01.83.55l-.05.074L6.641 8l3.75 4.688z" }))); @@ -28477,17 +28504,17 @@ var SvgChevronLeftStroke$1 = function SvgChevronLeftStroke(props) { * found at http://www.apache.org/licenses/LICENSE-2.0. */ -var _path$9; -function _extends$b() { _extends$b = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$b.apply(this, arguments); } +var _path$b; +function _extends$d() { _extends$d = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$d.apply(this, arguments); } var SvgChevronRightStroke$1 = function SvgChevronRightStroke(props) { - return /*#__PURE__*/reactExports.createElement("svg", _extends$b({ + return /*#__PURE__*/reactExports.createElement("svg", _extends$d({ xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, focusable: "false", viewBox: "0 0 16 16", "aria-hidden": "true" - }, props), _path$9 || (_path$9 = /*#__PURE__*/reactExports.createElement("path", { + }, props), _path$b || (_path$b = /*#__PURE__*/reactExports.createElement("path", { fill: "currentColor", d: "M5.61 3.312a.5.5 0 01.718-.69l.062.066 4 5a.5.5 0 01.054.542l-.054.082-4 5a.5.5 0 01-.83-.55l.05-.074L9.359 8l-3.75-4.688z" }))); @@ -33120,15 +33147,15 @@ function useGrid(_ref) { environment: PropTypes.any }); -var _path$8, _circle$1; -function _extends$a() { _extends$a = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$a.apply(this, arguments); } +var _path$a, _circle$1; +function _extends$c() { _extends$c = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$c.apply(this, arguments); } var SvgAlertWarningStroke = function SvgAlertWarningStroke(props) { - return /*#__PURE__*/reactExports.createElement("svg", _extends$a({ + return /*#__PURE__*/reactExports.createElement("svg", _extends$c({ xmlns: "http://www.w3.org/2000/svg", width: 12, height: 12, viewBox: "0 0 12 12" - }, props), _path$8 || (_path$8 = /*#__PURE__*/reactExports.createElement("path", { + }, props), _path$a || (_path$a = /*#__PURE__*/reactExports.createElement("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", @@ -33141,10 +33168,10 @@ var SvgAlertWarningStroke = function SvgAlertWarningStroke(props) { }))); }; -var _rect, _path$7; -function _extends$9() { _extends$9 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$9.apply(this, arguments); } +var _rect, _path$9; +function _extends$b() { _extends$b = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$b.apply(this, arguments); } var SvgCreditCardStroke = function SvgCreditCardStroke(props) { - return /*#__PURE__*/reactExports.createElement("svg", _extends$9({ + return /*#__PURE__*/reactExports.createElement("svg", _extends$b({ xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, @@ -33158,7 +33185,7 @@ var SvgCreditCardStroke = function SvgCreditCardStroke(props) { stroke: "currentColor", rx: 0.5, ry: 0.5 - })), _path$7 || (_path$7 = /*#__PURE__*/reactExports.createElement("path", { + })), _path$9 || (_path$9 = /*#__PURE__*/reactExports.createElement("path", { fill: "currentColor", d: "M.5 5h15v2H.5z" }))); @@ -34326,9 +34353,9 @@ StyledHeader$1.defaultProps = { */ var _g$1, _circle; -function _extends$8() { _extends$8 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$8.apply(this, arguments); } +function _extends$a() { _extends$a = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$a.apply(this, arguments); } var SvgAlertErrorStroke = function SvgAlertErrorStroke(props) { - return /*#__PURE__*/reactExports.createElement("svg", _extends$8({ + return /*#__PURE__*/reactExports.createElement("svg", _extends$a({ xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, @@ -34602,17 +34629,17 @@ Body.displayName = 'Body'; * found at http://www.apache.org/licenses/LICENSE-2.0. */ -var _path$6; -function _extends$7() { _extends$7 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$7.apply(this, arguments); } +var _path$8; +function _extends$9() { _extends$9 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$9.apply(this, arguments); } var SvgXStroke = function SvgXStroke(props) { - return /*#__PURE__*/reactExports.createElement("svg", _extends$7({ + return /*#__PURE__*/reactExports.createElement("svg", _extends$9({ xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, focusable: "false", viewBox: "0 0 16 16", "aria-hidden": "true" - }, props), _path$6 || (_path$6 = /*#__PURE__*/reactExports.createElement("path", { + }, props), _path$8 || (_path$8 = /*#__PURE__*/reactExports.createElement("path", { stroke: "currentColor", strokeLinecap: "round", d: "M3 13L13 3m0 10L3 3" @@ -35177,17 +35204,17 @@ const Section = SectionComponent; * found at http://www.apache.org/licenses/LICENSE-2.0. */ -var _path$5; -function _extends$6() { _extends$6 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$6.apply(this, arguments); } +var _path$7; +function _extends$8() { _extends$8 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$8.apply(this, arguments); } var SvgChevronDownStroke = function SvgChevronDownStroke(props) { - return /*#__PURE__*/reactExports.createElement("svg", _extends$6({ + return /*#__PURE__*/reactExports.createElement("svg", _extends$8({ xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, focusable: "false", viewBox: "0 0 16 16", "aria-hidden": "true" - }, props), _path$5 || (_path$5 = /*#__PURE__*/reactExports.createElement("path", { + }, props), _path$7 || (_path$7 = /*#__PURE__*/reactExports.createElement("path", { fill: "currentColor", d: "M12.688 5.61a.5.5 0 01.69.718l-.066.062-5 4a.5.5 0 01-.542.054l-.082-.054-5-4a.5.5 0 01.55-.83l.074.05L8 9.359l4.688-3.75z" }))); @@ -35420,9 +35447,9 @@ Accordion.Panel = Panel; Accordion.Section = Section; var _g; -function _extends$5() { _extends$5 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5.apply(this, arguments); } +function _extends$7() { _extends$7 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$7.apply(this, arguments); } var SvgCheckCircleStroke = function SvgCheckCircleStroke(props) { - return /*#__PURE__*/reactExports.createElement("svg", _extends$5({ + return /*#__PURE__*/reactExports.createElement("svg", _extends$7({ xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, @@ -35441,15 +35468,15 @@ var SvgCheckCircleStroke = function SvgCheckCircleStroke(props) { })))); }; -var _path$4; -function _extends$4() { _extends$4 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); } +var _path$6; +function _extends$6() { _extends$6 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$6.apply(this, arguments); } var SvgShapesFill = function SvgShapesFill(props) { - return /*#__PURE__*/reactExports.createElement("svg", _extends$4({ + return /*#__PURE__*/reactExports.createElement("svg", _extends$6({ xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, viewBox: "0 0 16 16" - }, props), _path$4 || (_path$4 = /*#__PURE__*/reactExports.createElement("path", { + }, props), _path$6 || (_path$6 = /*#__PURE__*/reactExports.createElement("path", { fill: "currentColor", d: "M6 9a1 1 0 011 1v5a1 1 0 01-1 1H1a1 1 0 01-1-1v-5a1 1 0 011-1h5zm6.25-.5a3.75 3.75 0 110 7.5 3.75 3.75 0 010-7.5zM8.857.486l3 5A1 1 0 0111 7H5a1 1 0 01-.857-1.514l3-5a1 1 0 011.714 0z" }))); @@ -35648,7 +35675,7 @@ var unitRegExp = /((?!\w)a|na|hc|mc|dg|me[r]?|xe|ni(?![a-zA-Z])|mm|cp|tp|xp|q(?! // Merges additional math functionality into the defaults. function mergeSymbolMaps(additionalSymbols) { var symbolMap = {}; - symbolMap.symbols = additionalSymbols ? _extends$S({}, defaultSymbolMap.symbols, additionalSymbols.symbols) : _extends$S({}, defaultSymbolMap.symbols); + symbolMap.symbols = additionalSymbols ? _extends$U({}, defaultSymbolMap.symbols, additionalSymbols.symbols) : _extends$U({}, defaultSymbolMap.symbols); return symbolMap; } function exec(operators, values) { @@ -36440,7 +36467,7 @@ function curry(f) { function adjustHue(degree, color) { if (color === 'transparent') return color; var hslColor = parseToHsl(color); - return toColorString(_extends$S({}, hslColor, { + return toColorString(_extends$U({}, hslColor, { hue: hslColor.hue + parseFloat(degree) })); } @@ -36478,7 +36505,7 @@ function guard(lowerBoundary, upperBoundary, value) { function darken(amount, color) { if (color === 'transparent') return color; var hslColor = parseToHsl(color); - return toColorString(_extends$S({}, hslColor, { + return toColorString(_extends$U({}, hslColor, { lightness: guard(0, 1, hslColor.lightness - parseFloat(amount)) })); } @@ -36513,7 +36540,7 @@ curry /* :: */(darken); function desaturate(amount, color) { if (color === 'transparent') return color; var hslColor = parseToHsl(color); - return toColorString(_extends$S({}, hslColor, { + return toColorString(_extends$U({}, hslColor, { saturation: guard(0, 1, hslColor.saturation - parseFloat(amount)) })); } @@ -36547,7 +36574,7 @@ curry /* :: */(desaturate); function lighten(amount, color) { if (color === 'transparent') return color; var hslColor = parseToHsl(color); - return toColorString(_extends$S({}, hslColor, { + return toColorString(_extends$U({}, hslColor, { lightness: guard(0, 1, hslColor.lightness + parseFloat(amount)) })); } @@ -36586,11 +36613,11 @@ function mix(weight, color, otherColor) { if (otherColor === 'transparent') return color; if (weight === 0) return otherColor; var parsedColor1 = parseToRgb(color); - var color1 = _extends$S({}, parsedColor1, { + var color1 = _extends$U({}, parsedColor1, { alpha: typeof parsedColor1.alpha === 'number' ? parsedColor1.alpha : 1 }); var parsedColor2 = parseToRgb(otherColor); - var color2 = _extends$S({}, parsedColor2, { + var color2 = _extends$U({}, parsedColor2, { alpha: typeof parsedColor2.alpha === 'number' ? parsedColor2.alpha : 1 }); @@ -36646,7 +36673,7 @@ function opacify(amount, color) { if (color === 'transparent') return color; var parsedColor = parseToRgb(color); var alpha = typeof parsedColor.alpha === 'number' ? parsedColor.alpha : 1; - var colorWithAlpha = _extends$S({}, parsedColor, { + var colorWithAlpha = _extends$U({}, parsedColor, { alpha: guard(0, 1, (alpha * 100 + parseFloat(amount) * 100) / 100) }); return rgba(colorWithAlpha); @@ -36683,7 +36710,7 @@ curry /* :: */(opacify); function saturate(amount, color) { if (color === 'transparent') return color; var hslColor = parseToHsl(color); - return toColorString(_extends$S({}, hslColor, { + return toColorString(_extends$U({}, hslColor, { saturation: guard(0, 1, hslColor.saturation + parseFloat(amount)) })); } @@ -36716,7 +36743,7 @@ curry /* :: */(saturate); */ function setHue(hue, color) { if (color === 'transparent') return color; - return toColorString(_extends$S({}, parseToHsl(color), { + return toColorString(_extends$U({}, parseToHsl(color), { hue: parseFloat(hue) })); } @@ -36749,7 +36776,7 @@ curry /* :: */(setHue); */ function setLightness(lightness, color) { if (color === 'transparent') return color; - return toColorString(_extends$S({}, parseToHsl(color), { + return toColorString(_extends$U({}, parseToHsl(color), { lightness: parseFloat(lightness) })); } @@ -36782,7 +36809,7 @@ curry /* :: */(setLightness); */ function setSaturation(saturation, color) { if (color === 'transparent') return color; - return toColorString(_extends$S({}, parseToHsl(color), { + return toColorString(_extends$U({}, parseToHsl(color), { saturation: parseFloat(saturation) })); } @@ -36883,7 +36910,7 @@ function transparentize(amount, color) { if (color === 'transparent') return color; var parsedColor = parseToRgb(color); var alpha = typeof parsedColor.alpha === 'number' ? parsedColor.alpha : 1; - var colorWithAlpha = _extends$S({}, parsedColor, { + var colorWithAlpha = _extends$U({}, parsedColor, { alpha: guard(0, 1, +(alpha * 100 - parseFloat(amount) * 100).toFixed(2) / 100) }); return rgba(colorWithAlpha); @@ -37312,17 +37339,17 @@ StyledIcon.defaultProps = { * found at http://www.apache.org/licenses/LICENSE-2.0. */ -var _path$3; -function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); } +var _path$5; +function _extends$5() { _extends$5 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5.apply(this, arguments); } var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) { - return /*#__PURE__*/reactExports.createElement("svg", _extends$3({ + return /*#__PURE__*/reactExports.createElement("svg", _extends$5({ xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, focusable: "false", viewBox: "0 0 16 16", "aria-hidden": "true" - }, props), _path$3 || (_path$3 = /*#__PURE__*/reactExports.createElement("path", { + }, props), _path$5 || (_path$5 = /*#__PURE__*/reactExports.createElement("path", { fill: "currentColor", d: "M10.39 12.688a.5.5 0 01-.718.69l-.062-.066-4-5a.5.5 0 01-.054-.542l.054-.082 4-5a.5.5 0 01.83.55l-.05.074L6.641 8l3.75 4.688z" }))); @@ -37335,17 +37362,17 @@ var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) { * found at http://www.apache.org/licenses/LICENSE-2.0. */ -var _path$2; -function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); } +var _path$4; +function _extends$4() { _extends$4 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); } var SvgChevronRightStroke = function SvgChevronRightStroke(props) { - return /*#__PURE__*/reactExports.createElement("svg", _extends$2({ + return /*#__PURE__*/reactExports.createElement("svg", _extends$4({ xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, focusable: "false", viewBox: "0 0 16 16", "aria-hidden": "true" - }, props), _path$2 || (_path$2 = /*#__PURE__*/reactExports.createElement("path", { + }, props), _path$4 || (_path$4 = /*#__PURE__*/reactExports.createElement("path", { fill: "currentColor", d: "M5.61 3.312a.5.5 0 01.718-.69l.062.066 4 5a.5.5 0 01.054.542l-.054.082-4 5a.5.5 0 01-.83-.55l.05-.074L9.359 8l-3.75-4.688z" }))); @@ -37358,17 +37385,17 @@ var SvgChevronRightStroke = function SvgChevronRightStroke(props) { * found at http://www.apache.org/licenses/LICENSE-2.0. */ -var _path$1; -function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); } +var _path$3; +function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); } var SvgChevronDoubleLeftStroke = function SvgChevronDoubleLeftStroke(props) { - return /*#__PURE__*/reactExports.createElement("svg", _extends$1({ + return /*#__PURE__*/reactExports.createElement("svg", _extends$3({ xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, focusable: "false", viewBox: "0 0 16 16", "aria-hidden": "true" - }, props), _path$1 || (_path$1 = /*#__PURE__*/reactExports.createElement("path", { + }, props), _path$3 || (_path$3 = /*#__PURE__*/reactExports.createElement("path", { fill: "currentColor", d: "M7.812 13.39a.5.5 0 01-.64-.012l-.062-.066-4-5a.5.5 0 01-.054-.542l.054-.082 4-5a.5.5 0 01.83.55l-.05.074L4.141 8l3.75 4.688a.5.5 0 01-.079.702zm5 0a.5.5 0 01-.64-.012l-.062-.066-4-5a.5.5 0 01-.054-.542l.054-.082 4-5a.5.5 0 01.83.55l-.05.074L9.141 8l3.75 4.688a.5.5 0 01-.079.702z" }))); @@ -37446,17 +37473,17 @@ const Previous = PreviousComponent; * found at http://www.apache.org/licenses/LICENSE-2.0. */ -var _path; -function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } +var _path$2; +function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); } var SvgChevronDoubleRightStroke = function SvgChevronDoubleRightStroke(props) { - return /*#__PURE__*/reactExports.createElement("svg", _extends({ + return /*#__PURE__*/reactExports.createElement("svg", _extends$2({ xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, focusable: "false", viewBox: "0 0 16 16", "aria-hidden": "true" - }, props), _path || (_path = /*#__PURE__*/reactExports.createElement("path", { + }, props), _path$2 || (_path$2 = /*#__PURE__*/reactExports.createElement("path", { fill: "currentColor", d: "M8.188 2.61a.5.5 0 01.64.013l.062.065 4 5a.5.5 0 01.054.542l-.054.082-4 5a.5.5 0 01-.83-.55l.05-.074L11.859 8l-3.75-4.688a.5.5 0 01.079-.702zm-5 0a.5.5 0 01.64.013l.062.065 4 5a.5.5 0 01.054.542l-.054.082-4 5a.5.5 0 01-.83-.55l.05-.074L6.859 8l-3.75-4.688a.5.5 0 01.079-.702z" }))); @@ -37501,4 +37528,32 @@ CursorPagination.Next = Next; CursorPagination.Previous = Previous; CursorPagination.Last = Last; -export { $e as $, Anchor as A, SvgAlertWarningStroke as B, Close$3 as C, Datepicker as D, MediaInput as E, Field$1 as F, SvgCreditCardStroke as G, Hint$1 as H, Input as I, getColorV8 as J, Header$1 as K, Label$2 as L, Message$1 as M, Notification as N, Option as O, Progress as P, SvgCheckCircleStroke as Q, useModalContainer as R, Span as S, Title as T, Modal as U, Body as V, Accordion as W, Paragraph as X, Footer as Y, FooterItem as Z, Button as _, useTranslation as a, Close as a0, addFlashNotification as a1, debounce$3 as a2, Alert as a3, initI18next as a4, loadTranslations as a5, reactDomExports as a6, ThemeProviders as a7, createTheme as a8, FLASH_NOTIFICATIONS_KEY as a9, SvgShapesFill as aa, Grid as ab, Col as ac, Row as ad, Skeleton as ae, MD as af, SM as ag, LG as ah, CursorPagination as ai, Textarea as b, commonjsGlobal as c, Field as d, Label$1 as e, Hint as f, getDefaultExportFromCjs as g, Combobox as h, Message as i, jsxRuntimeExports as j, Checkbox as k, OptGroup as l, FileList as m, File as n, Tooltip as o, purify as p, mime as q, reactExports as r, styled as s, useDropzone as t, useToast as u, FileUpload as v, useGrid as w, focusStyles as x, FauxInput as y, Tag$1 as z }; +var _path$1; +function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); } +var SvgChevronUpFill = function SvgChevronUpFill(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends$1({ + xmlns: "http://www.w3.org/2000/svg", + width: 16, + height: 16, + viewBox: "0 0 16 16" + }, props), _path$1 || (_path$1 = /*#__PURE__*/reactExports.createElement("path", { + fill: "currentColor", + d: "M3.625 10.78a1 1 0 01-1.343-1.476l.093-.085 5-4a1 1 0 011.147-.072l.103.072 5 4a1 1 0 01-1.147 1.634l-.103-.072L8 7.28l-4.375 3.5z" + }))); +}; + +var _path; +function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } +var SvgChevronDownFill = function SvgChevronDownFill(props) { + return /*#__PURE__*/reactExports.createElement("svg", _extends({ + xmlns: "http://www.w3.org/2000/svg", + width: 16, + height: 16, + viewBox: "0 0 16 16" + }, props), _path || (_path = /*#__PURE__*/reactExports.createElement("path", { + fill: "currentColor", + d: "M12.375 5.22a1 1 0 011.343 1.476l-.093.085-5 4a1 1 0 01-1.147.072l-.103-.072-5-4a1 1 0 011.147-1.634l.103.072L8 8.72l4.375-3.5z" + }))); +}; + +export { $e as $, Anchor as A, SvgAlertWarningStroke as B, Close$3 as C, Datepicker as D, MediaInput as E, Field$1 as F, SvgCreditCardStroke as G, Hint$1 as H, Input as I, getColorV8 as J, Header$1 as K, Label$2 as L, Message$1 as M, Notification as N, Option as O, Progress as P, SvgCheckCircleStroke as Q, useModalContainer as R, Span as S, Title as T, Modal as U, Body as V, Accordion as W, Paragraph as X, Footer as Y, FooterItem as Z, Button as _, useTranslation as a, Close as a0, addFlashNotification as a1, debounce$3 as a2, Alert as a3, initI18next as a4, loadTranslations as a5, reactDomExports as a6, ThemeProviders as a7, createTheme as a8, FLASH_NOTIFICATIONS_KEY as a9, SvgShapesFill as aa, Grid as ab, Col as ac, Row as ad, Skeleton as ae, MD as af, SM as ag, LG as ah, CursorPagination as ai, XXXL as aj, SvgChevronUpFill as ak, SvgChevronDownFill as al, Textarea as b, commonjsGlobal as c, Field as d, Label$1 as e, Hint as f, getDefaultExportFromCjs as g, Combobox as h, Message as i, jsxRuntimeExports as j, Checkbox as k, OptGroup as l, FileList as m, File as n, Tooltip as o, purify as p, mime as q, reactExports as r, styled as s, useDropzone as t, useToast as u, FileUpload as v, useGrid as w, focusStyles as x, FauxInput as y, Tag$1 as z }; diff --git a/src/modules/service-catalog/ServiceCatalogItemPage.tsx b/src/modules/service-catalog/ServiceCatalogItemPage.tsx new file mode 100644 index 000000000..c0d37e42a --- /dev/null +++ b/src/modules/service-catalog/ServiceCatalogItemPage.tsx @@ -0,0 +1,128 @@ +import { XXXL } from "@zendeskgarden/react-typography"; +import type { ServiceCatalogItem } from "./data-types/ServiceCatalogItem"; +import styled from "styled-components"; +import { Button } from "@zendeskgarden/react-buttons"; +import { useState } from "react"; +import ChevronUp from "@zendeskgarden/svg-icons/src/16/chevron-up-fill.svg"; +import ChevronDown from "@zendeskgarden/svg-icons/src/16/chevron-down-fill.svg"; +import { getColorV8 } from "@zendeskgarden/react-theming"; +import { useTranslation } from "react-i18next"; + +const ItemTitle = styled(XXXL)` + font-weight: ${(props) => props.theme.fontWeights.semibold}; +`; + +const CollapsibleDescription = styled.div<{ expanded: boolean }>` + font-size: ${(props) => props.theme.fontSizes.md}; + text-align: left; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: ${(props) => (props.expanded ? "none" : 3)}; + overflow: hidden; + margin-top: ${(props) => props.theme.space.md}; + padding-right: ${(props) => props.theme.space.xl}; + + @media (max-width: ${(props) => props.theme.breakpoints.md}) { + padding-right: 0; + } +`; +const Container = styled.div` + display: flex; + flex-direction: row; + justify-content: space-between; + gap: ${(props) => props.theme.space.xxl}; + + @media (max-width: ${(props) => props.theme.breakpoints.md}) { + flex-direction: column; + } +`; + +const LeftColumn = styled.div` + flex: 2; + border-bottom: ${(props) => props.theme.borders.sm} + ${(props) => getColorV8("grey", 300, props.theme)}; + padding-bottom: ${(props) => props.theme.space.lg}; + margin-right: ${(props) => props.theme.space.xl}; + + @media (max-width: ${(props) => props.theme.breakpoints.md}) { + margin-right: 0; + } +`; + +const RightColumn = styled.div` + flex: 1; + margin-left: ${(props) => props.theme.space.xl}; + + @media (max-width: ${(props) => props.theme.breakpoints.md}) { + position: sticky; + bottom: 0; + margin-left: 0; + } +`; + +const ToggleButton = styled(Button)` + margin-top: ${(props) => props.theme.space.sm}; + font-size: ${(props) => props.theme.fontSizes.md}; + &:hover { + text-decoration: none; + } +`; + +const ButtonWrapper = styled.div` + padding: ${(props) => props.theme.space.lg}; + border: ${(props) => props.theme.borders.sm} + ${(props) => getColorV8("grey", 300, props.theme)}; + display: flex; + flex-direction: column; + align-items: center; + + @media (max-width: ${(props) => props.theme.breakpoints.md}) { + position: sticky; + bottom: 0; + background: ${(props) => props.theme.colors.background}; + padding: ${(props) => props.theme.space.md}; + border: none; + border-top: ${(props) => props.theme.borders.sm} + ${(props) => getColorV8("grey", 300, props.theme)}; + } +`; +interface ServiceCatalogItemPageProps { + serviceCatalogItem: ServiceCatalogItem; +} + +export function ServiceCatalogItemPage({ + serviceCatalogItem, +}: ServiceCatalogItemPageProps) { + const [isExpanded, setIsExpanded] = useState(false); + const { t } = useTranslation(); + + const toggleDescription = () => { + setIsExpanded(!isExpanded); + }; + + return ( + + + {serviceCatalogItem.name} + + {serviceCatalogItem.description} + + + + + + + + + + ); +} diff --git a/src/modules/service-catalog/index.tsx b/src/modules/service-catalog/index.tsx index 2774feb7c..056e42a2c 100644 --- a/src/modules/service-catalog/index.tsx +++ b/src/modules/service-catalog/index.tsx @@ -1 +1,2 @@ export { renderServiceCatalogList } from "./renderServiceCatalogList"; +export { renderServiceCatalogItem } from "./renderServiceCatalogItem"; diff --git a/src/modules/service-catalog/renderServiceCatalogItem.tsx b/src/modules/service-catalog/renderServiceCatalogItem.tsx new file mode 100644 index 000000000..998312d27 --- /dev/null +++ b/src/modules/service-catalog/renderServiceCatalogItem.tsx @@ -0,0 +1,26 @@ +import { render } from "react-dom"; + +import { ServiceCatalogItemPage } from "./ServiceCatalogItemPage"; +import { createTheme, ThemeProviders } from "../shared"; +import type { Settings } from "../shared"; +import type { ServiceCatalogItem } from "./data-types/ServiceCatalogItem"; + +//data mocked for now +const serviceCatalogItem: ServiceCatalogItem = { + id: 1, + name: "Apple MacBook Pro", + description: + "Request for a new Apple MacBook Pro. The MacBook Pro is equipped with Apple's powerful M3 Pro chip, featuring a 12-core CPU, 18-core GPU, and a 16-core Neural Engine, making it ideal for high-performance tasks. It comes with a 140W USB-C power adapter, three Thunderbolt 4 ports, HDMI, SDXC card slot, headphone jack, and MagSafe 3 port. The backlit Magic Keyboard with Touch ID enhances security and usability. Exclusively for Engineering, Design, and Marketing departments, the 16-inch model includes up to 36+ GB of memory and 1+ TB of storage, while other departments can request machines with up to 36 GB of memory and 512 GB of storage.", +}; + +export async function renderServiceCatalogItem( + container: HTMLElement, + settings: Settings +) { + render( + + + , + container + ); +} diff --git a/src/modules/service-catalog/translations/en-us.yml b/src/modules/service-catalog/translations/en-us.yml index bc49d4a43..12da8fcba 100644 --- a/src/modules/service-catalog/translations/en-us.yml +++ b/src/modules/service-catalog/translations/en-us.yml @@ -40,3 +40,18 @@ parts: title: "Empty state go to homepage link" screenshot: "https://drive.google.com/file/d/1D_3VXzWSuj9f34PsFPa0b4uELz8-T9ll/view?usp=drive_link" value: "Go to the homepage" + - translation: + key: "service-catalog.item.read-more" + title: "Button to show whole description of the service catalog item" + screenshot: "https://drive.google.com/file/d/12NmVTiEng1AUB20Hj68WrU6Q2ZBSnwVd/view?usp=drive_link" + value: "Read more" + - translation: + key: "service-catalog.item.read-less" + title: "Button to hide part of the description of the service catalog item" + screenshot: "https://drive.google.com/file/d/1BYDLuhii7aQs18TkKflGCpReb_UCKSeD/view?usp=drive_link" + value: "Read less" + - translation: + key: "service-catalog.item.submit-button" + title: "Button to submit a request for service catalog item" + screenshot: "https://drive.google.com/file/d/1kuv7v6Vtx787TdVz8AOmD6v0ow79Xd6c/view?usp=drive_link" + value: "Submit request" diff --git a/templates/custom_pages/service_catalog_item.hbs b/templates/custom_pages/service_catalog_item.hbs new file mode 100644 index 000000000..dafbcfd6f --- /dev/null +++ b/templates/custom_pages/service_catalog_item.hbs @@ -0,0 +1,18 @@ +
+
+
+
+ +
+
+
+
+ +