@linzjs/lui 17.54.0 → 17.56.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,3 +1,18 @@
1
+ # [17.56.0](https://github.com/linz/lui/compare/v17.55.0...v17.56.0) (2023-05-16)
2
+
3
+
4
+ ### Features
5
+
6
+ * Provide LUI Accordion export ([#941](https://github.com/linz/lui/issues/941)) ([1a5f7d1](https://github.com/linz/lui/commit/1a5f7d144a680584a5d3dd2744d9348c4876ec84))
7
+
8
+ # [17.55.0](https://github.com/linz/lui/compare/v17.54.0...v17.55.0) (2023-05-15)
9
+
10
+
11
+ ### Features
12
+
13
+ * Add LUI Accordion component ([57bb446](https://github.com/linz/lui/commit/57bb4465d9159e60164f6d014f3a4c660a557a23))
14
+ * Add LUI Accordion component ([39c5dc7](https://github.com/linz/lui/commit/39c5dc74218e09c77e1f694b2725454dd05501c6))
15
+
1
16
  # [17.54.0](https://github.com/linz/lui/compare/v17.53.0...v17.54.0) (2023-05-07)
2
17
 
3
18
 
@@ -0,0 +1,11 @@
1
+ import { CSSProperties, ReactNode } from 'react';
2
+ import './LuiAccordion.scss';
3
+ export interface ILuiAccordion {
4
+ heading: ReactNode;
5
+ children: ReactNode;
6
+ expanded?: boolean;
7
+ iconColor?: string;
8
+ className?: string;
9
+ style?: CSSProperties;
10
+ }
11
+ export declare const LuiAccordion: (props: ILuiAccordion) => JSX.Element;
package/dist/index.d.ts CHANGED
@@ -65,6 +65,7 @@ export { LuiSidePanelProvider } from './components/LuiSidePanel/LuiSidePanel';
65
65
  export { LuiSwitchButton } from './components/LuiSwitchButton/LuiSwitchButton';
66
66
  export { LuiAccordicard } from './components/LuiAccordicard/LuiAccordicard';
67
67
  export { LuiAccordicardStatic } from './components/LuiAccordicardStatic/LuiAccordicardStatic';
68
+ export { LuiAccordion } from './components/LuiAccordion/LuiAccordion';
68
69
  export { LuiListBox, ILuiListBoxItem, ILuiListBoxProps, IItemRendererProps, } from './components/LuiListBox/LuiListBox';
69
70
  export { RadioItemRenderer } from './components/LuiListBox/Renderers/RadioItemRenderer';
70
71
  export { CheckboxItemRenderer } from './components/LuiListBox/Renderers/CheckboxItemRenderer';
package/dist/index.js CHANGED
@@ -25426,8 +25426,8 @@ function styleInject(css, ref) {
25426
25426
  }
25427
25427
  }
25428
25428
 
25429
- var css_248z$a = ".LuiFloatingWindow-buttons {\n display: flex;\n align-items: center;\n}\n\n.LuiFloatingWindow-extra-buttons-divider {\n margin-right: 4px;\n margin-left: 8px;\n margin-top: -6px;\n font-size: x-large;\n opacity: 0.7;\n}\n\n.FloatingWindow-window {\n box-shadow: 0px 1px 6px 0px #00000026, 0px 6px 10px 0px #00000040;\n position: absolute;\n background-color: #ffffff;\n top: 10%;\n left: 5%;\n display: flex;\n flex-direction: column;\n border-radius: 9px;\n}\n\n.FloatingWindow-container {\n display: flex;\n height: calc(100% - 50px);\n width: 100%;\n overflow: auto;\n}\n\n.FloatingWindow-header-element {\n flex: 0;\n}\n\n.FloatingWindow-header {\n height: 48px;\n line-height: 48px;\n color: #2a292c;\n padding: 0 8px;\n display: flex;\n overflow: hidden;\n justify-content: space-between;\n border-bottom: 2px #eaeaea solid;\n font-size: 1em;\n font-weight: 600;\n}\n\n.FloatingWindow-header-title-text {\n font-size: 1em;\n font-weight: 600;\n overflow: hidden;\n}\n\n.FloatingWindow-buttons {\n display: flex;\n align-items: center;\n}\n\n.FloatingWindow-extra-buttons-divider {\n margin-right: 4px;\n margin-left: 8px;\n margin-top: -6px;\n font-size: x-large;\n opacity: 0.7;\n}\n\n.FloatingWindowHeaderButton-button {\n padding: 0 0 0 8px;\n border: none;\n outline: none;\n border-radius: 50%;\n background-color: transparent;\n color: #6b6966;\n display: flex;\n}\n\n.FloatingWindowHeaderButton-icon {\n fill: #6b6966;\n}\n\n.floating-window-icon {\n display: inline-block;\n height: 24px;\n max-height: 24px;\n max-width: 24px;\n width: 24px;\n fill: #6b6966;\n}";
25430
- styleInject(css_248z$a);
25429
+ var css_248z$b = ".LuiFloatingWindow-buttons {\n display: flex;\n align-items: center;\n}\n\n.LuiFloatingWindow-extra-buttons-divider {\n margin-right: 4px;\n margin-left: 8px;\n margin-top: -6px;\n font-size: x-large;\n opacity: 0.7;\n}\n\n.FloatingWindow-window {\n box-shadow: 0px 1px 6px 0px #00000026, 0px 6px 10px 0px #00000040;\n position: absolute;\n background-color: #ffffff;\n top: 10%;\n left: 5%;\n display: flex;\n flex-direction: column;\n border-radius: 9px;\n}\n\n.FloatingWindow-container {\n display: flex;\n height: calc(100% - 50px);\n width: 100%;\n overflow: auto;\n}\n\n.FloatingWindow-header-element {\n flex: 0;\n}\n\n.FloatingWindow-header {\n height: 48px;\n line-height: 48px;\n color: #2a292c;\n padding: 0 8px;\n display: flex;\n overflow: hidden;\n justify-content: space-between;\n border-bottom: 2px #eaeaea solid;\n font-size: 1em;\n font-weight: 600;\n}\n\n.FloatingWindow-header-title-text {\n font-size: 1em;\n font-weight: 600;\n overflow: hidden;\n}\n\n.FloatingWindow-buttons {\n display: flex;\n align-items: center;\n}\n\n.FloatingWindow-extra-buttons-divider {\n margin-right: 4px;\n margin-left: 8px;\n margin-top: -6px;\n font-size: x-large;\n opacity: 0.7;\n}\n\n.FloatingWindowHeaderButton-button {\n padding: 0 0 0 8px;\n border: none;\n outline: none;\n border-radius: 50%;\n background-color: transparent;\n color: #6b6966;\n display: flex;\n}\n\n.FloatingWindowHeaderButton-icon {\n fill: #6b6966;\n}\n\n.floating-window-icon {\n display: inline-block;\n height: 24px;\n max-height: 24px;\n max-width: 24px;\n width: 24px;\n fill: #6b6966;\n}";
25430
+ styleInject(css_248z$b);
25431
25431
 
25432
25432
  /**
25433
25433
  * Overwrite the common buttons for floating window to
@@ -27676,8 +27676,8 @@ ReactSplitGrid.defaultProps = {
27676
27676
  onDrag: undefined,
27677
27677
  };
27678
27678
 
27679
- var css_248z$9 = ".LuiResizableLayout-leftPanel {\n display: flex;\n flex-direction: column;\n /* this overflow and the one below (LuiResizableLayout-leftPanelBody) are need to make only\n the search result div scroll (instead of the whole page) */\n overflow: auto;\n}\n\n.LuiResizableLayout-rightPanel {\n display: flex;\n flex-direction: column;\n /* this overflow and the one below (LuiResizableLayout-leftPanelBody) are need to make only\n the search result div scroll (instead of the whole page) */\n overflow: auto;\n}\n\n.LuiResizableLayout-leftPanelBody {\n overflow-y: auto;\n}\n\n.LuiResizableLayout-gutterParentControl {\n display: flex;\n /* use visibility and opacity instead of display: none as we want to be able to fade in on hover */\n visibility: hidden;\n opacity: 0;\n position: fixed;\n top: 50%;\n z-index: 500;\n margin-left: -30px;\n /*half total control width, minus half the gutter width*/\n transition: 0.3s all 2s ease-in;\n}\n\n.LuiResizableLayout-gutterControlLeft, .LuiResizableLayout-gutterControlRight {\n background-color: #eaeaea;\n width: 32px;\n height: 80px;\n text-align: center;\n display: flex;\n align-items: center;\n}\n\n.LuiResizableLayout-gutterControlLeft {\n border-radius: 3px 0 0 3px;\n}\n\n.LuiResizableLayout-gutterControlRight {\n border-radius: 0 3px 3px 0;\n}\n\n.LuiResizableLayout-gutterControlLeft > .LuiIcon, .LuiResizableLayout-gutterControlRight > .LuiIcon {\n height: auto;\n}\n\n.LuiResizableLayout-gutterControlLeft:hover, .LuiResizableLayout-gutterControlRight:hover {\n background-color: #73c8e1;\n cursor: pointer;\n}\n\n.LuiResizableLayout-gutterControl-collapsed {\n visibility: hidden;\n}\n\n/* TODO: move the expand gutter button so it doesn't show over the scroll bar */\n.LuiResizableLayout-gutterParentControlVisible {\n visibility: visible;\n opacity: 1;\n}\n\n.LuiResizableLayout-grid {\n display: grid;\n height: 100%;\n}\n\n.LuiResizableLayout-gutterCol {\n grid-row: 1/-1;\n cursor: col-resize;\n width: 16px;\n z-index: 1;\n}\n\n.LuiResizableLayout-gutterCol-collapsed {\n width: 4px;\n}\n\n.LuiResizableLayout-gutterCol1 {\n grid-column: 2;\n}\n\n.LuiResizableLayout-gutterCol:hover > .LuiResizableLayout-gutterParentControl {\n visibility: visible;\n opacity: 1;\n transition: 0s all 0s ease-in;\n}\n\n.LuiResizableLayout-gutterSlider {\n width: 4px;\n height: 100%;\n background-color: #eaeaea;\n pointer-events: none;\n}\n\n.LuiResizableLayout-gutterCol:hover .LuiResizableLayout-gutterSlider, .LuiResizableLayout-gutterCol:active .LuiResizableLayout-gutterSlider {\n background-color: #73c8e1;\n}";
27680
- styleInject(css_248z$9);
27679
+ var css_248z$a = ".LuiResizableLayout-leftPanel {\n display: flex;\n flex-direction: column;\n /* this overflow and the one below (LuiResizableLayout-leftPanelBody) are need to make only\n the search result div scroll (instead of the whole page) */\n overflow: auto;\n}\n\n.LuiResizableLayout-rightPanel {\n display: flex;\n flex-direction: column;\n /* this overflow and the one below (LuiResizableLayout-leftPanelBody) are need to make only\n the search result div scroll (instead of the whole page) */\n overflow: auto;\n}\n\n.LuiResizableLayout-leftPanelBody {\n overflow-y: auto;\n}\n\n.LuiResizableLayout-gutterParentControl {\n display: flex;\n /* use visibility and opacity instead of display: none as we want to be able to fade in on hover */\n visibility: hidden;\n opacity: 0;\n position: fixed;\n top: 50%;\n z-index: 500;\n margin-left: -30px;\n /*half total control width, minus half the gutter width*/\n transition: 0.3s all 2s ease-in;\n}\n\n.LuiResizableLayout-gutterControlLeft, .LuiResizableLayout-gutterControlRight {\n background-color: #eaeaea;\n width: 32px;\n height: 80px;\n text-align: center;\n display: flex;\n align-items: center;\n}\n\n.LuiResizableLayout-gutterControlLeft {\n border-radius: 3px 0 0 3px;\n}\n\n.LuiResizableLayout-gutterControlRight {\n border-radius: 0 3px 3px 0;\n}\n\n.LuiResizableLayout-gutterControlLeft > .LuiIcon, .LuiResizableLayout-gutterControlRight > .LuiIcon {\n height: auto;\n}\n\n.LuiResizableLayout-gutterControlLeft:hover, .LuiResizableLayout-gutterControlRight:hover {\n background-color: #73c8e1;\n cursor: pointer;\n}\n\n.LuiResizableLayout-gutterControl-collapsed {\n visibility: hidden;\n}\n\n/* TODO: move the expand gutter button so it doesn't show over the scroll bar */\n.LuiResizableLayout-gutterParentControlVisible {\n visibility: visible;\n opacity: 1;\n}\n\n.LuiResizableLayout-grid {\n display: grid;\n height: 100%;\n}\n\n.LuiResizableLayout-gutterCol {\n grid-row: 1/-1;\n cursor: col-resize;\n width: 16px;\n z-index: 1;\n}\n\n.LuiResizableLayout-gutterCol-collapsed {\n width: 4px;\n}\n\n.LuiResizableLayout-gutterCol1 {\n grid-column: 2;\n}\n\n.LuiResizableLayout-gutterCol:hover > .LuiResizableLayout-gutterParentControl {\n visibility: visible;\n opacity: 1;\n transition: 0s all 0s ease-in;\n}\n\n.LuiResizableLayout-gutterSlider {\n width: 4px;\n height: 100%;\n background-color: #eaeaea;\n pointer-events: none;\n}\n\n.LuiResizableLayout-gutterCol:hover .LuiResizableLayout-gutterSlider, .LuiResizableLayout-gutterCol:active .LuiResizableLayout-gutterSlider {\n background-color: #73c8e1;\n}";
27680
+ styleInject(css_248z$a);
27681
27681
 
27682
27682
  var GutterComponent = function (props) {
27683
27683
  var leftIcon = (React__default["default"].createElement(LuiIcon, { name: "ic_double_arrow_left", alt: "", status: "interactive" }));
@@ -27995,8 +27995,8 @@ function LuiFormikForm(props) {
27995
27995
  " "))));
27996
27996
  }
27997
27997
 
27998
- var css_248z$8 = "/**\n @deprecated\n */\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n.LuiError {\n font-family: \"Open Sans\", system-ui, sans-serif;\n font-style: normal;\n font-weight: 600;\n margin-bottom: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.5rem;\n color: #2a292c;\n}\n.LuiError-errorIcon {\n vertical-align: middle;\n display: inline-block;\n}\n.LuiError-errorText {\n margin-left: 0.5rem;\n}";
27999
- styleInject(css_248z$8);
27998
+ var css_248z$9 = "/**\n @deprecated\n */\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n.LuiError {\n font-family: \"Open Sans\", system-ui, sans-serif;\n font-style: normal;\n font-weight: 600;\n margin-bottom: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.5rem;\n color: #2a292c;\n}\n.LuiError-errorIcon {\n vertical-align: middle;\n display: inline-block;\n}\n.LuiError-errorText {\n margin-left: 0.5rem;\n}";
27999
+ styleInject(css_248z$9);
28000
28000
 
28001
28001
  var LuiError = function (_a) {
28002
28002
  var error = _a.error, className = _a.className;
@@ -52500,8 +52500,8 @@ function isChromatic() {
52500
52500
  (window === null || window === void 0 ? void 0 : window.location.href.match(/chromatic=true/)));
52501
52501
  }
52502
52502
 
52503
- var css_248z$7 = ":export {\n charcoal: #2a292c;\n fuscous: #6b6966;\n gray: #989189;\n silver: #beb9b4;\n lily: #eaeaea;\n dew: #DAD7D6;\n hint: #f9f9f9;\n snow: #ffffff;\n white: #ffffff;\n teal: #00425d;\n sea: #007198;\n electric: #0096cc;\n spray: #73c8e1;\n polar: #e2f3f7;\n memesia: #1F69C3;\n sherpa: #004b50;\n surfie: #017a76;\n persian: #00a599;\n downy: #73cdc8;\n iceberg: #dcf5f0;\n sacramento: #004e32;\n salem: #08814d;\n pigment: #0aa245;\n granny: #9bd79b;\n panache: #e9fae7;\n brand-primary: #004b50;\n brand-secondary: #017a76;\n engine: #cc0000;\n carrot: #EA6A2E;\n kendall: #F5CCCC;\n elizabeth: #FBDED0;\n andrea: #3A7CDF;\n celestial: #D7E5F9;\n golf: #0AA345;\n error: #cc0000;\n error-bg: #F5CCCC;\n error-focus: #5a0000;\n warning: #EA6A2E;\n warning-bg: #fbdfd2;\n warning-focus: #b33a01;\n success: #0aa245;\n success-bg: #e9fae7;\n info: #3A7CDF;\n info-bg: #d8e5f9;\n visited: #00425d;\n green-hover: #107c3a;\n green-active: #094a22;\n green-btn: #0aa245;\n txt-link: #1F69C3;\n primary-hover-btn: #005678;\n selection: #c7e9f3;\n heading-color: #017a76;\n heading-color--secondary: #2a292c;\n base-type-color: #2a292c;\n input-text: #2a292c;\n input-placeholder: #6b6966;\n input-placeholder-when-disabled: #989189;\n base-icon-color: #007198;\n disabled-color: #989189;\n disabled-color-dark: #6b6966;\n linz-color-primary: #023d48;\n linz-color-primary-hover: #01818a;\n linz-color-tertiary: #e1e44a;\n linz-color-tertiary-hover: #cdcf59;\n color-test-pink: #f09;\n linz-linear-gradient-blue: linear-gradient(70deg, #00425d 12%, #007198 100%);\n linz-linear-gradient-teal: linear-gradient(270deg, #00a599 1%, #73cdc8 100%);\n}";
52504
- styleInject(css_248z$7);
52503
+ var css_248z$8 = ":export {\n charcoal: #2a292c;\n fuscous: #6b6966;\n gray: #989189;\n silver: #beb9b4;\n lily: #eaeaea;\n dew: #DAD7D6;\n hint: #f9f9f9;\n snow: #ffffff;\n white: #ffffff;\n teal: #00425d;\n sea: #007198;\n electric: #0096cc;\n spray: #73c8e1;\n polar: #e2f3f7;\n memesia: #1F69C3;\n sherpa: #004b50;\n surfie: #017a76;\n persian: #00a599;\n downy: #73cdc8;\n iceberg: #dcf5f0;\n sacramento: #004e32;\n salem: #08814d;\n pigment: #0aa245;\n granny: #9bd79b;\n panache: #e9fae7;\n brand-primary: #004b50;\n brand-secondary: #017a76;\n engine: #cc0000;\n carrot: #EA6A2E;\n kendall: #F5CCCC;\n elizabeth: #FBDED0;\n andrea: #3A7CDF;\n celestial: #D7E5F9;\n golf: #0AA345;\n error: #cc0000;\n error-bg: #F5CCCC;\n error-focus: #5a0000;\n warning: #EA6A2E;\n warning-bg: #fbdfd2;\n warning-focus: #b33a01;\n success: #0aa245;\n success-bg: #e9fae7;\n info: #3A7CDF;\n info-bg: #d8e5f9;\n visited: #00425d;\n green-hover: #107c3a;\n green-active: #094a22;\n green-btn: #0aa245;\n txt-link: #1F69C3;\n primary-hover-btn: #005678;\n selection: #c7e9f3;\n heading-color: #017a76;\n heading-color--secondary: #2a292c;\n base-type-color: #2a292c;\n input-text: #2a292c;\n input-placeholder: #6b6966;\n input-placeholder-when-disabled: #989189;\n base-icon-color: #007198;\n disabled-color: #989189;\n disabled-color-dark: #6b6966;\n linz-color-primary: #023d48;\n linz-color-primary-hover: #01818a;\n linz-color-tertiary: #e1e44a;\n linz-color-tertiary-hover: #cdcf59;\n color-test-pink: #f09;\n linz-linear-gradient-blue: linear-gradient(70deg, #00425d 12%, #007198 100%);\n linz-linear-gradient-teal: linear-gradient(270deg, #00a599 1%, #73cdc8 100%);\n}";
52504
+ styleInject(css_248z$8);
52505
52505
 
52506
52506
  var _excluded = ["allowCreateWhileLoading", "createOptionPosition", "formatCreateLabel", "isValidNewOption", "getNewOptionData", "onCreateOption", "options", "onChange"];
52507
52507
 
@@ -52622,13 +52622,13 @@ function LuiComboSelectActual(givenProps, ref) {
52622
52622
  // box-shadow: "-8px 0px 0 0 #cc0000";
52623
52623
  // border-radius: "4px";
52624
52624
  var id = useGenerateOrDefaultId(props === null || props === void 0 ? void 0 : props.id);
52625
- var selectProp = __assign(__assign({ inputId: id }, props), { classNamePrefix: 'LuiComboSelect', theme: function (theme) { return (__assign(__assign({}, theme), { colors: __assign(__assign({}, theme.colors), { primary: css_248z$7['sea'], primary75: css_248z$7['electric'], primary50: css_248z$7['spray'], primary25: css_248z$7['polar'], neutral90: css_248z$7['charcoal'], neutral80: css_248z$7['charcoal'], neutral70: css_248z$7['charcoal'], neutral60: css_248z$7['fuscous'], neutral50: css_248z$7['fuscous'], neutral40: css_248z$7['gray'], neutral30: css_248z$7['gray'], neutral20: css_248z$7['silver'], neutral10: css_248z$7['lily'], neutral5: css_248z$7['hint'], danger: css_248z$7['error'], dangerLight: css_248z$7['error-bg'] }) })); }, styles: {
52625
+ var selectProp = __assign(__assign({ inputId: id }, props), { classNamePrefix: 'LuiComboSelect', theme: function (theme) { return (__assign(__assign({}, theme), { colors: __assign(__assign({}, theme.colors), { primary: css_248z$8['sea'], primary75: css_248z$8['electric'], primary50: css_248z$8['spray'], primary25: css_248z$8['polar'], neutral90: css_248z$8['charcoal'], neutral80: css_248z$8['charcoal'], neutral70: css_248z$8['charcoal'], neutral60: css_248z$8['fuscous'], neutral50: css_248z$8['fuscous'], neutral40: css_248z$8['gray'], neutral30: css_248z$8['gray'], neutral20: css_248z$8['silver'], neutral10: css_248z$8['lily'], neutral5: css_248z$8['hint'], danger: css_248z$8['error'], dangerLight: css_248z$8['error-bg'] }) })); }, styles: {
52626
52626
  control: function (provided, state) { return (__assign(__assign({}, provided), {
52627
52627
  /* matches style of .LuiTextInput-input */
52628
52628
  boxShadow: 'none', border: state.isFocused ? '1px solid #053d52' : '1px solid #b2b2b2', '&:hover, &:active': {
52629
52629
  borderColor: '#053d52'
52630
52630
  } })); },
52631
- dropdownIndicator: function (provided) { return (__assign(__assign({}, provided), { color: css_248z$7['fuscous'] })); },
52631
+ dropdownIndicator: function (provided) { return (__assign(__assign({}, provided), { color: css_248z$8['fuscous'] })); },
52632
52632
  indicatorSeparator: function (provided) { return (__assign(__assign({}, provided), { width: 0 })); },
52633
52633
  input: function (provided) { return (__assign(__assign({}, provided), { height: '40px', minHeight: '40px', fontWeight: 400, input: {
52634
52634
  height: '38px !important'
@@ -52636,10 +52636,10 @@ function LuiComboSelectActual(givenProps, ref) {
52636
52636
  singleValue: function (provided) { return (__assign(__assign({}, provided), { color: '#414042', fontWeight: 400 })); },
52637
52637
  placeholder: function (provided) { return (__assign(__assign({}, provided), {
52638
52638
  /* please keep this in sync with FormVars.scss/mixin.formPlaceholder */
52639
- fontWeight: 'normal', fontStyle: 'italic', color: css_248z$7['input-placeholder'] })); },
52639
+ fontWeight: 'normal', fontStyle: 'italic', color: css_248z$8['input-placeholder'] })); },
52640
52640
  option: function (provided, _a) {
52641
52641
  var isSelected = _a.isSelected;
52642
- return (__assign(__assign({}, provided), { color: css_248z$7['input-text'], backgroundColor: isSelected ? css_248z$7['selection'] : css_248z$7['white'] }));
52642
+ return (__assign(__assign({}, provided), { color: css_248z$8['input-text'], backgroundColor: isSelected ? css_248z$8['selection'] : css_248z$8['white'] }));
52643
52643
  }
52644
52644
  } });
52645
52645
  return (React__default["default"].createElement("label", { htmlFor: id, className: clsx('LuiComboSelect-label', props.error && 'hasError') },
@@ -55011,8 +55011,8 @@ var LuiModalHeader = function (props) {
55011
55011
  React__default["default"].createElement(LuiIcon, { name: "ic_clear", alt: "Help", size: "lg" }))))))));
55012
55012
  };
55013
55013
 
55014
- var css_248z$6 = "@keyframes react-loading-skeleton {\n 100% {\n transform: translateX(100%);\n }\n}\n\n.react-loading-skeleton {\n --base-color: #ebebeb;\n --highlight-color: #f5f5f5;\n --animation-duration: 1.5s;\n --animation-direction: normal;\n --pseudo-element-display: block; /* Enable animation */\n\n background-color: var(--base-color);\n\n width: 100%;\n border-radius: 0.25rem;\n display: inline-flex;\n line-height: 1;\n\n position: relative;\n user-select: none;\n overflow: hidden;\n z-index: 1; /* Necessary for overflow: hidden to work correctly in Safari */\n}\n\n.react-loading-skeleton::after {\n content: ' ';\n display: var(--pseudo-element-display);\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 100%;\n background-repeat: no-repeat;\n background-image: linear-gradient(\n 90deg,\n var(--base-color),\n var(--highlight-color),\n var(--base-color)\n );\n transform: translateX(-100%);\n\n animation-name: react-loading-skeleton;\n animation-direction: var(--animation-direction);\n animation-duration: var(--animation-duration);\n animation-timing-function: ease-in-out;\n animation-iteration-count: infinite;\n}\n\n@media (prefers-reduced-motion) {\n .react-loading-skeleton {\n --pseudo-element-display: none; /* Disable animation */\n }\n}\n";
55015
- styleInject(css_248z$6);
55014
+ var css_248z$7 = "@keyframes react-loading-skeleton {\n 100% {\n transform: translateX(100%);\n }\n}\n\n.react-loading-skeleton {\n --base-color: #ebebeb;\n --highlight-color: #f5f5f5;\n --animation-duration: 1.5s;\n --animation-direction: normal;\n --pseudo-element-display: block; /* Enable animation */\n\n background-color: var(--base-color);\n\n width: 100%;\n border-radius: 0.25rem;\n display: inline-flex;\n line-height: 1;\n\n position: relative;\n user-select: none;\n overflow: hidden;\n z-index: 1; /* Necessary for overflow: hidden to work correctly in Safari */\n}\n\n.react-loading-skeleton::after {\n content: ' ';\n display: var(--pseudo-element-display);\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 100%;\n background-repeat: no-repeat;\n background-image: linear-gradient(\n 90deg,\n var(--base-color),\n var(--highlight-color),\n var(--base-color)\n );\n transform: translateX(-100%);\n\n animation-name: react-loading-skeleton;\n animation-direction: var(--animation-direction);\n animation-duration: var(--animation-duration);\n animation-timing-function: ease-in-out;\n animation-iteration-count: infinite;\n}\n\n@media (prefers-reduced-motion) {\n .react-loading-skeleton {\n --pseudo-element-display: none; /* Disable animation */\n }\n}\n";
55015
+ styleInject(css_248z$7);
55016
55016
 
55017
55017
  /**
55018
55018
  * @internal
@@ -60285,8 +60285,8 @@ var LuiSidePanelProvider = function (_a) {
60285
60285
  React__default["default"].createElement(LuiSidePanelContainer, __assign({}, props))));
60286
60286
  };
60287
60287
 
60288
- var css_248z$5 = ".lui-switch-checkbox {\n height: 0;\n width: 0;\n visibility: hidden;\n}\n\n.lui-switch-label {\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: pointer;\n width: 40px;\n height: 20px;\n background: grey;\n border-radius: 40px;\n position: relative;\n transition: background-color 0.2s;\n}\n\n.lui-switch-label .lui-switch-button {\n content: \"\";\n position: absolute;\n top: 2px;\n left: 2px;\n width: 18px;\n height: 16px;\n border-radius: 18px;\n transition: 0.2s;\n background: #fff;\n box-shadow: 0 0 2px 0 rgba(10, 10, 10, 0.29);\n}\n\n.lui-switch-checkbox:checked + .lui-switch-label .lui-switch-button {\n left: calc(100% - 2px);\n transform: translateX(-100%);\n}\n\n.lui-switch-label:active .lui-switch-button {\n width: 20px;\n}";
60289
- styleInject(css_248z$5);
60288
+ var css_248z$6 = ".lui-switch-checkbox {\n height: 0;\n width: 0;\n visibility: hidden;\n}\n\n.lui-switch-label {\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: pointer;\n width: 40px;\n height: 20px;\n background: grey;\n border-radius: 40px;\n position: relative;\n transition: background-color 0.2s;\n}\n\n.lui-switch-label .lui-switch-button {\n content: \"\";\n position: absolute;\n top: 2px;\n left: 2px;\n width: 18px;\n height: 16px;\n border-radius: 18px;\n transition: 0.2s;\n background: #fff;\n box-shadow: 0 0 2px 0 rgba(10, 10, 10, 0.29);\n}\n\n.lui-switch-checkbox:checked + .lui-switch-label .lui-switch-button {\n left: calc(100% - 2px);\n transform: translateX(-100%);\n}\n\n.lui-switch-label:active .lui-switch-button {\n width: 20px;\n}";
60289
+ styleInject(css_248z$6);
60290
60290
 
60291
60291
  var LuiSwitchButton = function (props) {
60292
60292
  var generatedId = useGenerateOrDefaultId();
@@ -67917,6 +67917,27 @@ var LuiAccordicardStatic = function (props) {
67917
67917
  React__default["default"].createElement(LuiIcon, { className: clsx('LuiAccordicardStatic-chevron', isOpen ? 'LuiAccordicardStatic-chevron--isOpen' : null), name: 'ic_expand_more', alt: "expand", title: "Expand and collapse panel", size: "md" }))));
67918
67918
  };
67919
67919
 
67920
+ var css_248z$5 = "/**\n @deprecated\n */\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n.lui-accordion {\n padding: 8px;\n display: flex;\n box-shadow: 0px 2px 3px 0px #00000040, 0px 0px 3px 0px #00000026;\n}\n.lui-accordion .accordion-heading {\n padding: 4px;\n}\n.lui-accordion h4 {\n padding: 4px;\n}\n.lui-accordion > summary {\n display: flex;\n align-items: center;\n cursor: pointer;\n}\n.lui-accordion > summary h4 {\n margin-top: 0;\n display: inline-block;\n}";
67921
+ styleInject(css_248z$5);
67922
+
67923
+ var LuiAccordion = function (props) {
67924
+ var _a = props.expanded, expanded = _a === void 0 ? false : _a, heading = props.heading, children = props.children, _b = props.iconColor, iconColor = _b === void 0 ? '#017A76' : _b, className = props.className, _c = props.style, style = _c === void 0 ? {} : _c;
67925
+ var _d = React.useState(expanded), open = _d[0], setOpen = _d[1];
67926
+ React__default["default"].useEffect(function () {
67927
+ setOpen(expanded);
67928
+ }, [expanded]);
67929
+ var toggle = function (event) {
67930
+ //Reason for event.preventDefault() : https://github.com/facebook/react/issues/15486
67931
+ event.preventDefault();
67932
+ setOpen(!open);
67933
+ };
67934
+ return (React__default["default"].createElement("details", { style: style, className: clsx('lui-accordion', className), open: open },
67935
+ React__default["default"].createElement("summary", { onClick: toggle, "data-testid": "lui-accordion-summary-".concat(open) },
67936
+ React__default["default"].createElement(LuiIcon, { color: iconColor, size: "md", name: open ? 'ic_keyboard_arrow_down' : 'ic_keyboard_arrow_right', alt: open ? 'Close' : 'Expand', "aria-label": open ? 'Expanded' : 'Closed' }),
67937
+ React__default["default"].isValidElement(heading) ? (heading) : (React__default["default"].createElement("h4", { className: "accordion-heading", "data-testid": "lui-accordion-heading-".concat(open) }, heading))),
67938
+ children));
67939
+ };
67940
+
67920
67941
  var css_248z$4 = "/**\n @deprecated\n */\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n.LuiListBox {\n padding: 0;\n list-style: none;\n}\n.LuiListBox .LuiListBoxItem {\n font-family: \"Open Sans\", system-ui, sans-serif;\n font-style: normal;\n font-weight: normal;\n user-select: none;\n color: #2a292c;\n line-height: 24px;\n outline: none;\n padding: 0.5rem 0.75rem;\n border: 2px solid transparent;\n}\n.LuiListBox .LuiListBoxItem:focus-visible {\n border-color: #007198;\n}\n.LuiListBox .LuiListBoxItem.LuiListBoxItem-selected {\n background: #e2f3f7;\n}\n.LuiListBox .LuiListBoxItem:hover, .LuiListBox .LuiListBoxItem.LuiListBoxItem-selected:hover {\n background: #d6eef4;\n}\n.LuiListBox .LuiListBoxItem.LuiListBoxItem-disabled {\n background: #eaeaea;\n}\n.LuiListBox .LuiListBox-emptyIndicator, .LuiListBox .LuiListBox-loadingIndicator {\n padding: 0.5rem 0.75rem;\n}\n.LuiListBox .LuiListBoxGroup .LuiListBoxGroup-heading {\n font-family: \"Open Sans\", system-ui, sans-serif;\n font-style: normal;\n font-weight: normal;\n font-size: 14px;\n user-select: none;\n color: #6b6966;\n line-height: 16px;\n padding: 0.5rem 0.5rem;\n}";
67921
67942
  styleInject(css_248z$4);
67922
67943
 
@@ -71558,6 +71579,7 @@ exports.LOLUserLastLogin = LOLUserLastLogin;
71558
71579
  exports.LUI_WINDOW_NAME = LUI_WINDOW_NAME;
71559
71580
  exports.LuiAccordicard = LuiAccordicard;
71560
71581
  exports.LuiAccordicardStatic = LuiAccordicardStatic;
71582
+ exports.LuiAccordion = LuiAccordion;
71561
71583
  exports.LuiAlertModal = LuiAlertModal;
71562
71584
  exports.LuiAlertModalButtons = LuiAlertModalButtons;
71563
71585
  exports.LuiBadge = LuiBadge;