@linzjs/lui 17.6.0 → 17.8.1

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,24 @@
1
+ ## [17.8.1](https://github.com/linz/lui/compare/v17.8.0...v17.8.1) (2022-08-08)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * SwitchButtonBugFixing ([#714](https://github.com/linz/lui/issues/714)) ([3bf8018](https://github.com/linz/lui/commit/3bf80185707752a1ae9cfebf53415cefa5b74d84))
7
+
8
+ # [17.8.0](https://github.com/linz/lui/compare/v17.7.0...v17.8.0) (2022-08-05)
9
+
10
+
11
+ ### Features
12
+
13
+ * **LuiInput:** Switch button component ([#713](https://github.com/linz/lui/issues/713)) ([499ddb0](https://github.com/linz/lui/commit/499ddb02fb785603d5edeb0fd38871678e8d7bb8))
14
+
15
+ # [17.7.0](https://github.com/linz/lui/compare/v17.6.0...v17.7.0) (2022-07-28)
16
+
17
+
18
+ ### Features
19
+
20
+ * ic_feedback_lightbuld_alt added ([#711](https://github.com/linz/lui/issues/711)) ([19078da](https://github.com/linz/lui/commit/19078da43a99f2fd254838da1e577fbd31ca15b5))
21
+
1
22
  # [17.6.0](https://github.com/linz/lui/compare/v17.5.12...v17.6.0) (2022-07-28)
2
23
 
3
24
 
@@ -0,0 +1 @@
1
+ <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1Zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7Zm2.85 11.1-.85.6V16h-4v-2.3l-.85-.6A4.997 4.997 0 0 1 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1Z" fill="#000"/></svg>
@@ -299,6 +299,12 @@ iconMap['ic_feedback_lightbulb'] = (
299
299
  </svg>
300
300
  );
301
301
 
302
+ iconMap['ic_feedback_lightbulb_alt'] = (
303
+ <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
304
+ <path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1Zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7Zm2.85 11.1-.85.6V16h-4v-2.3l-.85-.6A4.997 4.997 0 0 1 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1Z" />
305
+ </svg>
306
+ );
307
+
302
308
  iconMap['ic_file_attached_outline'] = (
303
309
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
304
310
  <path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6ZM6 20V4h7v5h5v11H6Z" />
@@ -0,0 +1,6 @@
1
+ import { ChangeEvent } from 'react';
2
+ import './../../scss/Components/LuiSwitchButton/LuiSwitchButton.scss';
3
+ export declare const LuiSwitchButton: (props: {
4
+ checked: boolean;
5
+ onChange: (event: ChangeEvent<HTMLInputElement>) => any;
6
+ }) => JSX.Element;
package/dist/index.d.ts CHANGED
@@ -58,3 +58,4 @@ export { LuiShadow } from './components/LuiShadow/LuiShadow';
58
58
  export { LuiSidePanel } from './components/LuiSidePanel/LuiSidePanel';
59
59
  export { LuiSidePanelProvider } from './components/LuiSidePanel/LuiSidePanel';
60
60
  export { LuiAccordicard } from './components/LuiAccordicard/LuiAccordicard';
61
+ export { LuiSwitchButton } from './components/LuiSwitchButton/LuiSwitchButton';
package/dist/index.js CHANGED
@@ -261,6 +261,8 @@ iconMap['ic_expand_more'] = (React__default["default"].createElement("svg", { xm
261
261
  React__default["default"].createElement("path", { d: "M16.594 8.297 18 9.703l-6 6-6-6 1.406-1.406L12 12.891z" })));
262
262
  iconMap['ic_feedback_lightbulb'] = (React__default["default"].createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
263
263
  React__default["default"].createElement("path", { d: "M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2Zm-3-3h6c.55 0 1-.45 1-1s-.45-1-1-1H9c-.55 0-1 .45-1 1s.45 1 1 1Zm3-17C7.86 2 4.5 5.36 4.5 9.5c0 3.82 2.66 5.86 3.77 6.5h7.46c1.11-.64 3.77-2.68 3.77-6.5C19.5 5.36 16.14 2 12 2Z" })));
264
+ iconMap['ic_feedback_lightbulb_alt'] = (React__default["default"].createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
265
+ React__default["default"].createElement("path", { d: "M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1Zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7Zm2.85 11.1-.85.6V16h-4v-2.3l-.85-.6A4.997 4.997 0 0 1 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1Z" })));
264
266
  iconMap['ic_file_attached_outline'] = (React__default["default"].createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
265
267
  React__default["default"].createElement("path", { d: "M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6ZM6 20V4h7v5h5v11H6Z" })));
266
268
  iconMap['ic_filter_list'] = (React__default["default"].createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
@@ -896,8 +898,8 @@ function LuiFormikForm(props) {
896
898
  " "))));
897
899
  }
898
900
 
899
- var css_248z$4 = "/**\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}";
900
- styleInject(css_248z$4);
901
+ var css_248z$5 = "/**\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}";
902
+ styleInject(css_248z$5);
901
903
 
902
904
  var LuiError = function (_a) {
903
905
  var error = _a.error, className = _a.className;
@@ -25065,8 +25067,8 @@ function isChromatic() {
25065
25067
  return !!((window === null || window === void 0 ? void 0 : window.navigator.userAgent.match(/Chromatic/)) || (window === null || window === void 0 ? void 0 : window.location.href.match(/chromatic=true/)));
25066
25068
  }
25067
25069
 
25068
- var css_248z$3 = ":export {\n charcoal: #2a292c;\n fuscous: #6b6966;\n gray: #989189;\n silver: #beb9b4;\n lily: #eaeaea;\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 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 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: #0096cc;\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}";
25069
- styleInject(css_248z$3);
25070
+ var css_248z$4 = ":export {\n charcoal: #2a292c;\n fuscous: #6b6966;\n gray: #989189;\n silver: #beb9b4;\n lily: #eaeaea;\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 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 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: #0096cc;\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}";
25071
+ styleInject(css_248z$4);
25070
25072
 
25071
25073
  var _excluded = ["allowCreateWhileLoading", "createOptionPosition", "formatCreateLabel", "isValidNewOption", "getNewOptionData", "onCreateOption", "options", "onChange"];
25072
25074
 
@@ -25187,13 +25189,13 @@ function LuiComboSelectActual(givenProps, ref) {
25187
25189
  // box-shadow: "-8px 0px 0 0 #cc0000";
25188
25190
  // border-radius: "4px";
25189
25191
  var id = useGenerateOrDefaultId(props === null || props === void 0 ? void 0 : props.id);
25190
- var selectProp = __assign(__assign({ inputId: id }, props), { classNamePrefix: 'LuiComboSelect', theme: function (theme) { return (__assign(__assign({}, theme), { colors: __assign(__assign({}, theme.colors), { primary: css_248z$3['sea'], primary75: css_248z$3['electric'], primary50: css_248z$3['spray'], primary25: css_248z$3['polar'], neutral90: css_248z$3['charcoal'], neutral80: css_248z$3['charcoal'], neutral70: css_248z$3['charcoal'], neutral60: css_248z$3['fuscous'], neutral50: css_248z$3['fuscous'], neutral40: css_248z$3['gray'], neutral30: css_248z$3['gray'], neutral20: css_248z$3['silver'], neutral10: css_248z$3['lily'], neutral5: css_248z$3['hint'], danger: css_248z$3['error'], dangerLight: css_248z$3['error-bg'] }) })); }, styles: {
25192
+ var selectProp = __assign(__assign({ inputId: id }, props), { classNamePrefix: 'LuiComboSelect', theme: function (theme) { return (__assign(__assign({}, theme), { colors: __assign(__assign({}, theme.colors), { primary: css_248z$4['sea'], primary75: css_248z$4['electric'], primary50: css_248z$4['spray'], primary25: css_248z$4['polar'], neutral90: css_248z$4['charcoal'], neutral80: css_248z$4['charcoal'], neutral70: css_248z$4['charcoal'], neutral60: css_248z$4['fuscous'], neutral50: css_248z$4['fuscous'], neutral40: css_248z$4['gray'], neutral30: css_248z$4['gray'], neutral20: css_248z$4['silver'], neutral10: css_248z$4['lily'], neutral5: css_248z$4['hint'], danger: css_248z$4['error'], dangerLight: css_248z$4['error-bg'] }) })); }, styles: {
25191
25193
  control: function (provided, state) { return (__assign(__assign({}, provided), {
25192
25194
  /* matches style of .LuiTextInput-input */
25193
25195
  boxShadow: 'none', border: state.isFocused ? '1px solid #053d52' : '1px solid #b2b2b2', '&:hover, &:active': {
25194
25196
  borderColor: '#053d52',
25195
25197
  } })); },
25196
- dropdownIndicator: function (provided) { return (__assign(__assign({}, provided), { color: css_248z$3['fuscous'] })); },
25198
+ dropdownIndicator: function (provided) { return (__assign(__assign({}, provided), { color: css_248z$4['fuscous'] })); },
25197
25199
  indicatorSeparator: function (provided) { return (__assign(__assign({}, provided), { width: 0 })); },
25198
25200
  input: function (provided) { return (__assign(__assign({}, provided), { height: '40px', minHeight: '40px', fontWeight: 400, input: {
25199
25201
  height: '38px !important',
@@ -25201,10 +25203,10 @@ function LuiComboSelectActual(givenProps, ref) {
25201
25203
  singleValue: function (provided) { return (__assign(__assign({}, provided), { color: '#414042', fontWeight: 400 })); },
25202
25204
  placeholder: function (provided) { return (__assign(__assign({}, provided), {
25203
25205
  /* please keep this in sync with FormVars.scss/mixin.formPlaceholder */
25204
- fontWeight: 'normal', fontStyle: 'italic', color: css_248z$3['input-placeholder'] })); },
25206
+ fontWeight: 'normal', fontStyle: 'italic', color: css_248z$4['input-placeholder'] })); },
25205
25207
  option: function (provided, _a) {
25206
25208
  var isSelected = _a.isSelected;
25207
- return (__assign(__assign({}, provided), { color: css_248z$3['input-text'], backgroundColor: isSelected ? css_248z$3['selection'] : css_248z$3['white'] }));
25209
+ return (__assign(__assign({}, provided), { color: css_248z$4['input-text'], backgroundColor: isSelected ? css_248z$4['selection'] : css_248z$4['white'] }));
25208
25210
  },
25209
25211
  } });
25210
25212
  return (React__default["default"].createElement("label", { htmlFor: id, className: clsx('LuiComboSelect-label', props.error && 'hasError') },
@@ -28164,8 +28166,8 @@ var LuiModalHeader = function (props) {
28164
28166
  React__default["default"].createElement("i", { className: "material-icons-round lui-modal-header-btn-size" }, "close")))))));
28165
28167
  };
28166
28168
 
28167
- var css_248z$2 = "@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 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";
28168
- styleInject(css_248z$2);
28169
+ var css_248z$3 = "@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 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";
28170
+ styleInject(css_248z$3);
28169
28171
 
28170
28172
  /**
28171
28173
  * @internal
@@ -32731,11 +32733,11 @@ tippy.setDefaultProps({
32731
32733
  render: render
32732
32734
  });
32733
32735
 
32734
- var css_248z$1 = ".tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:\"\";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}";
32735
- styleInject(css_248z$1);
32736
+ var css_248z$2 = ".tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:\"\";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}";
32737
+ styleInject(css_248z$2);
32736
32738
 
32737
- var css_248z = ".tippy-box{border:1px transparent}.tippy-box[data-placement^=top]>.tippy-arrow:after{border-top-color:inherit;border-width:8px 8px 0;bottom:-8px;left:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:after{border-bottom-color:inherit;border-width:0 8px 8px;top:-8px;left:0}.tippy-box[data-placement^=left]>.tippy-arrow:after{border-left-color:inherit;border-width:8px 0 8px 8px;right:-8px;top:0}.tippy-box[data-placement^=right]>.tippy-arrow:after{border-width:8px 8px 8px 0;left:-8px;top:0;border-right-color:inherit}.tippy-box[data-placement^=top]>.tippy-svg-arrow>svg:first-child:not(:last-child){top:17px}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow>svg:first-child:not(:last-child){bottom:17px}.tippy-box[data-placement^=left]>.tippy-svg-arrow>svg:first-child:not(:last-child){left:12px}.tippy-box[data-placement^=right]>.tippy-svg-arrow>svg:first-child:not(:last-child){right:12px}.tippy-arrow{border-color:inherit}.tippy-arrow:after{content:\"\";z-index:-1;position:absolute;border-color:transparent;border-style:solid}";
32738
- styleInject(css_248z);
32739
+ var css_248z$1 = ".tippy-box{border:1px transparent}.tippy-box[data-placement^=top]>.tippy-arrow:after{border-top-color:inherit;border-width:8px 8px 0;bottom:-8px;left:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:after{border-bottom-color:inherit;border-width:0 8px 8px;top:-8px;left:0}.tippy-box[data-placement^=left]>.tippy-arrow:after{border-left-color:inherit;border-width:8px 0 8px 8px;right:-8px;top:0}.tippy-box[data-placement^=right]>.tippy-arrow:after{border-width:8px 8px 8px 0;left:-8px;top:0;border-right-color:inherit}.tippy-box[data-placement^=top]>.tippy-svg-arrow>svg:first-child:not(:last-child){top:17px}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow>svg:first-child:not(:last-child){bottom:17px}.tippy-box[data-placement^=left]>.tippy-svg-arrow>svg:first-child:not(:last-child){left:12px}.tippy-box[data-placement^=right]>.tippy-svg-arrow>svg:first-child:not(:last-child){right:12px}.tippy-arrow{border-color:inherit}.tippy-arrow:after{content:\"\";z-index:-1;position:absolute;border-color:transparent;border-style:solid}";
32740
+ styleInject(css_248z$1);
32739
32741
 
32740
32742
  var id = 0;
32741
32743
  var getKey = function () { return id++; };
@@ -32863,6 +32865,17 @@ var LuiAccordicard = function (props) {
32863
32865
  React__default["default"].createElement(LuiIcon, { className: clsx('LuiAccordicard-chevron', isOpen ? 'LuiAccordicard-chevron--isOpen' : null), name: 'ic_expand_more', alt: "expand", size: "md" }))));
32864
32866
  };
32865
32867
 
32868
+ var css_248z = ".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}";
32869
+ styleInject(css_248z);
32870
+
32871
+ var LuiSwitchButton = function (props) {
32872
+ var generatedId = useGenerateOrDefaultId();
32873
+ return (React__default["default"].createElement(React__default["default"].Fragment, null,
32874
+ React__default["default"].createElement("input", __assign({ className: "lui-switch-checkbox", type: "checkbox", "data-testid": 'lui-switch-new', id: generatedId }, props)),
32875
+ React__default["default"].createElement("label", { "data-testid": "label", style: { background: props.checked ? '#007198' : 'gray' }, className: "lui-switch-label", htmlFor: generatedId },
32876
+ React__default["default"].createElement("span", { className: "lui-switch-button" }))));
32877
+ };
32878
+
32866
32879
  exports.FIRM_KEY = FIRM_KEY;
32867
32880
  exports.FIRM_NAME_KEY = FIRM_NAME_KEY;
32868
32881
  exports.GLOBAL_CLIENT_REFERENCE_KEY = GLOBAL_CLIENT_REFERENCE_KEY;
@@ -32939,6 +32952,7 @@ exports.LuiSidePanel = LuiSidePanel;
32939
32952
  exports.LuiSidePanelProvider = LuiSidePanelProvider;
32940
32953
  exports.LuiStaticMessage = LuiStaticMessage;
32941
32954
  exports.LuiStatusSpinner = LuiStatusSpinner;
32955
+ exports.LuiSwitchButton = LuiSwitchButton;
32942
32956
  exports.LuiTab = LuiTab;
32943
32957
  exports.LuiTabs = LuiTabs;
32944
32958
  exports.LuiTabsContext = LuiTabsContext;