@k8slens/lds 0.1.15

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.
Files changed (62) hide show
  1. package/README.md +50 -0
  2. package/lib/cjs/Button/Button.d.ts +33 -0
  3. package/lib/cjs/Button/Button.js +1 -0
  4. package/lib/cjs/Button/Button.module.css.js +1 -0
  5. package/lib/cjs/Button/shared.d.ts +14 -0
  6. package/lib/cjs/ButtonBar/ButtonBar.d.ts +17 -0
  7. package/lib/cjs/ButtonBar/ButtonBar.js +1 -0
  8. package/lib/cjs/ButtonBar/ButtonBar.module.css.js +1 -0
  9. package/lib/cjs/Input/Input.d.ts +15 -0
  10. package/lib/cjs/Input/Input.js +1 -0
  11. package/lib/cjs/Input/Input.module.css.js +1 -0
  12. package/lib/cjs/LoadingIndicator/LoadingIndicator.d.ts +13 -0
  13. package/lib/cjs/LoadingIndicator/LoadingIndicator.js +1 -0
  14. package/lib/cjs/LoadingIndicator/LoadingIndicator.module.css.js +1 -0
  15. package/lib/cjs/Modal/Modal.d.ts +29 -0
  16. package/lib/cjs/Modal/Modal.js +1 -0
  17. package/lib/cjs/Modal/Modal.module.css.js +1 -0
  18. package/lib/cjs/Panel/Panel.d.ts +31 -0
  19. package/lib/cjs/Panel/Panel.js +1 -0
  20. package/lib/cjs/Panel/Panel.module.css.js +1 -0
  21. package/lib/cjs/Switch/Switch.d.ts +5 -0
  22. package/lib/cjs/Switch/Switch.js +1 -0
  23. package/lib/cjs/Switch/Switch.module.css.js +1 -0
  24. package/lib/cjs/_virtual/_tslib.js +1 -0
  25. package/lib/cjs/components.d.ts +7 -0
  26. package/lib/cjs/index.css +1 -0
  27. package/lib/cjs/index.d.ts +2 -0
  28. package/lib/cjs/index.electron.d.ts +2 -0
  29. package/lib/cjs/index.electron.js +1 -0
  30. package/lib/cjs/index.js +1 -0
  31. package/lib/es/Button/Button.d.ts +33 -0
  32. package/lib/es/Button/Button.js +1 -0
  33. package/lib/es/Button/Button.module.css.js +1 -0
  34. package/lib/es/Button/shared.d.ts +14 -0
  35. package/lib/es/ButtonBar/ButtonBar.d.ts +17 -0
  36. package/lib/es/ButtonBar/ButtonBar.js +1 -0
  37. package/lib/es/ButtonBar/ButtonBar.module.css.js +1 -0
  38. package/lib/es/Input/Input.d.ts +15 -0
  39. package/lib/es/Input/Input.js +1 -0
  40. package/lib/es/Input/Input.module.css.js +1 -0
  41. package/lib/es/LoadingIndicator/LoadingIndicator.d.ts +13 -0
  42. package/lib/es/LoadingIndicator/LoadingIndicator.js +1 -0
  43. package/lib/es/LoadingIndicator/LoadingIndicator.module.css.js +1 -0
  44. package/lib/es/Modal/Modal.d.ts +29 -0
  45. package/lib/es/Modal/Modal.js +1 -0
  46. package/lib/es/Modal/Modal.module.css.js +1 -0
  47. package/lib/es/Panel/Panel.d.ts +31 -0
  48. package/lib/es/Panel/Panel.js +1 -0
  49. package/lib/es/Panel/Panel.module.css.js +1 -0
  50. package/lib/es/Switch/Switch.d.ts +5 -0
  51. package/lib/es/Switch/Switch.js +1 -0
  52. package/lib/es/Switch/Switch.module.css.js +1 -0
  53. package/lib/es/_virtual/_tslib.js +1 -0
  54. package/lib/es/components.d.ts +7 -0
  55. package/lib/es/index.css +1 -0
  56. package/lib/es/index.d.ts +2 -0
  57. package/lib/es/index.electron.d.ts +2 -0
  58. package/lib/es/index.electron.js +1 -0
  59. package/lib/es/index.js +1 -0
  60. package/lib/web/lds-v0-1-15/index.css +1 -0
  61. package/lib/web/lds-v0-1-15/index.js +1 -0
  62. package/package.json +74 -0
package/README.md ADDED
@@ -0,0 +1,50 @@
1
+ # Lens Design System – Core React Component Library
2
+
3
+ ## Documentation
4
+ Browse the documentation at [lensapp.github.io/lens-design-system](http://lensapp.github.io/lens-design-system/?path=/docs/core).
5
+
6
+ ## What is included?
7
+
8
+ ### ES Modules
9
+ - `./lib/es/index.js` - Main ES module
10
+ - `./lib/es/index.electron.js` - Main ES module for Electron
11
+ - `./lib/es/ComponentName/ComponentName.js` - Individual ES modules
12
+
13
+ ### CommonJS modules
14
+ - `./lib/cjs/index.js` - Main CommonJS module
15
+ - `./lib/cjs/ComponentName/ComponentName.js` - Individual CommonJS modules
16
+
17
+ ### AMD package
18
+ - `./lib/web/[version-number]/index.css` - Static CSS for web
19
+ - `./lib/web/[version-number]/index.js` - AMD package for RequireJS. Requires external `react` import.
20
+
21
+ ## Usage with React apps
22
+ - run `npm i -s @k8slens/lds @k8slens/lds-tokens`
23
+ - import `@k8slens/lds-tokens/lib/web/font-imports.css` in your React app to include fonts
24
+ - import `@k8slens/lds/index.css` in your React app to include general styles
25
+ - Use in a component:
26
+
27
+ ```js
28
+ import { Button } from "@k8slens/lds";
29
+
30
+ export const Component = () => (
31
+ <Button label="My Button" />
32
+ );
33
+ ```
34
+
35
+ ## Usage with Electron React apps
36
+ - run `npm i -s @k8slens/lds @k8slens/lds-tokens`
37
+ - import `@k8slens/lds-tokens/lib/electron/fonts.css` in your React Electron app to include fonts
38
+ - import `@k8slens/lds/index.css` in your React Electron app to include general styles
39
+ - Use in a component:
40
+
41
+ ```js
42
+ import { Button } from "@k8slens/lds";
43
+
44
+ export const Component = () => (
45
+ <Button label="My Button" />
46
+ );
47
+ ```
48
+
49
+ ## Usage on web
50
+ TBD
@@ -0,0 +1,33 @@
1
+ import React, { ButtonHTMLAttributes, ReactNode } from "react";
2
+ import { Props } from "./shared";
3
+ export interface ButtonProps extends Props, Pick<ButtonHTMLAttributes<HTMLButtonElement>, "id" | "className" | "aria-label"> {
4
+ buttonType?: ButtonHTMLAttributes<HTMLButtonElement>["type"];
5
+ loading?: boolean;
6
+ /**
7
+ * When set to true true, if the onClick callback returns a promise,
8
+ * loading activity indicator will be shown until the promise has been resolved/rejected.
9
+ */
10
+ loadingStateOnPromise?: boolean;
11
+ onClick?(e: React.MouseEvent<HTMLButtonElement, MouseEvent>): Promise<unknown> | unknown;
12
+ }
13
+ export interface ButtonPropsWithLabelNode extends Omit<Props, "label">, Pick<ButtonHTMLAttributes<HTMLButtonElement>, "id" | "className"> {
14
+ buttonType?: ButtonHTMLAttributes<HTMLButtonElement>["type"];
15
+ loading?: boolean;
16
+ /**
17
+ * When set to true true, if the onClick callback returns a promise,
18
+ * loading activity indicator will be shown until the promise has been resolved/rejected.
19
+ */
20
+ loadingStateOnPromise?: boolean;
21
+ "aria-label": string;
22
+ label: ReactNode;
23
+ onClick?(e: React.MouseEvent<HTMLButtonElement, MouseEvent>): Promise<unknown> | unknown;
24
+ }
25
+ /**
26
+ * A simple, accessible, button component. Set `icon` prop to show an icon, aligned left by default.
27
+ * Set `loading` prop to show a loading indicator. Setting `loadingStateOnPromise` and returning a promise
28
+ * from `onClick` will show a loading indicator until the promise has been resolved/rejected.
29
+ *
30
+ * Usage: `import { Button } from "@k8slens/lds"`
31
+ */
32
+ declare const Button: React.ForwardRefExoticComponent<(ButtonProps | ButtonPropsWithLabelNode) & React.RefAttributes<HTMLButtonElement>>;
33
+ export default Button;
@@ -0,0 +1 @@
1
+ "use strict";var e=require("react"),t=require("clsx"),a=require("@k8slens/lds-icons"),n=require("./Button.module.css.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=l(e),r=l(t),o=a.base.SpinnerIcon;var u=e.forwardRef((function(t,a){var l,u=t.label,c=t.primary,s=t.discreet,d=t.allCaps,f=t.disabled,m=void 0!==f&&f,p=t.loading,b=void 0!==p&&p,v=t.className,y=t["aria-label"],E=t.id,g=t.type,N=void 0===g?"default":g,C=t.buttonType,h=void 0===C?"button":C,k=t.icon,q=t.iconPosition,j=void 0===q?"left":q,R=t.loadingStateOnPromise,S=void 0!==R&&R,x=t.onClick,P=t.children,w=e.useRef(!0);e.useEffect((function(){return w.current=!0,function(){w.current=!1}}),[]);var B=e.useState(!1),F=B[0],I=B[1],L=b||F,O=e.useCallback((function(e){if("function"==typeof x&&!L){var t,a=x(e);S&&("object"==typeof(t=a)&&null!==t&&"then"in t&&"function"==typeof t.then)&&(I(!0),a.finally((function(){w.current&&I(!1)})))}}),[x,L,S]);return c&&(N="primary"),i.default.createElement("button",{ref:a,id:E,type:h,onClick:O,className:r.default(n.button,v,N,(l={},l[n.allCaps]=d,l[n.discreet]=s,l[n.loading]=L,l)),"aria-label":y||("string"==typeof u?u:""),disabled:m||F},k&&"left"===j&&i.default.createElement(k,{className:n.icon}),i.default.createElement("span",{className:n.label},u),P,k&&"right"===j&&i.default.createElement(k,{className:r.default(n.icon,n.iconR)}),L&&i.default.createElement(i.default.Fragment,null,i.default.createElement(o,{className:r.default(n.icon,n.spinner)}),i.default.createElement("span",{className:"lds-only-aria","aria-live":"polite","aria-busy":"true"}," ","Loading")))}));module.exports=u;
@@ -0,0 +1 @@
1
+ "use strict";module.exports={button:"lds-button",allCaps:"lds-button--all-caps",icon:"lds-button--icon",iconR:"lds-button--icon-r",discreet:"lds-button--discreet",loading:"lds-button--loading",spinner:"lds-button--spinner",label:"lds-button--label"};
@@ -0,0 +1,14 @@
1
+ import { type Icon } from "@k8slens/lds-icons/lib/es/Icon/Icon.d";
2
+ export declare type Type = "default" | "primary" | "ok" | "danger" | "caution";
3
+ export declare type IconPosition = "right" | "left";
4
+ export interface Props {
5
+ label: string;
6
+ icon?: Icon;
7
+ iconPosition?: IconPosition;
8
+ type?: Type;
9
+ primary?: boolean;
10
+ disabled?: boolean;
11
+ discreet?: boolean;
12
+ allCaps?: boolean;
13
+ children?: React.ReactNode;
14
+ }
@@ -0,0 +1,17 @@
1
+ import React, { PropsWithChildren } from "react";
2
+ declare type ExtractIntrinsicElementProps<Element extends keyof JSX.IntrinsicElements> = JSX.IntrinsicElements[Element];
3
+ declare type ExtractComponentProps<TComponentOrTProps> = (TComponentOrTProps extends React.ComponentType<infer TProps> ? TProps : TComponentOrTProps);
4
+ declare type ExtractProps<TComponentOrTProps> = TComponentOrTProps extends keyof JSX.IntrinsicElements ? ExtractIntrinsicElementProps<TComponentOrTProps> : ExtractComponentProps<TComponentOrTProps>;
5
+ export declare type Type = "default" | "centered" | "stacked" | "grid";
6
+ export declare type ButtonBarProps<ElementType extends JSX.IntrinsicElements | React.ElementType<any>> = Partial<Omit<ExtractProps<ElementType>, "children" | "as" | "type" | "gridSize">> & {
7
+ as?: keyof JSX.IntrinsicElements | React.ElementType<any> | undefined;
8
+ type?: Type;
9
+ gridSize?: Number;
10
+ };
11
+ /**
12
+ * A container for buttons. Set `type` prop to change the layout of the buttons.
13
+ *
14
+ * Usage: `import { ButtonBar } from "@k8slens/lds"`
15
+ */
16
+ declare function ButtonBar<ElementType extends JSX.IntrinsicElements | React.ElementType<any>>({ as: Component, type, gridSize, children, ...props }: PropsWithChildren<ButtonBarProps<ElementType>>): JSX.Element;
17
+ export default ButtonBar;
@@ -0,0 +1 @@
1
+ "use strict";var e=require("../_virtual/_tslib.js"),r=require("react"),t=require("clsx"),i=require("./ButtonBar.module.css.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=u(r),n=u(t);module.exports=function(t){var u,d=t.as,l=void 0===d?"div":d,s=t.type,o=void 0===s?"default":s,c=t.gridSize,f=t.children,g=e.__rest(t,["as","type","gridSize","children"]),m=r.useMemo((function(){return"number"==typeof c?c:r.Children.toArray(f).filter((function(e){return r.isValidElement(e)})).length}),[c,f]);return a.default.createElement(l,e.__assign({},g,{className:n.default(i.buttonBar,g.className||"",(u={},u[i[o]]="default"!==o&&"grid"!==o,u[i.bGrid]="grid"===o,u[i["grid-".concat(m)]]="grid"===o,u))}),f)};
@@ -0,0 +1 @@
1
+ "use strict";module.exports={buttonBar:"lds-button-bar",centered:"lds-button-bar--centered",stacked:"lds-button-bar--stacked",bGrid:"lds-button-bar--b-grid","grid-2":"lds-button-bar--grid---2","grid-3":"lds-button-bar--grid---3","grid-4":"lds-button-bar--grid---4","grid-5":"lds-button-bar--grid---5"};
@@ -0,0 +1,15 @@
1
+ import React, { HTMLInputTypeAttribute } from "react";
2
+ import { Icon } from "@k8slens/lds-icons/lib/es/Icon/Icon";
3
+ export declare type InputType = Exclude<HTMLInputTypeAttribute, "button" | "checkbox" | "radio" | "number">;
4
+ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
5
+ icon?: Icon;
6
+ type?: InputType;
7
+ wrapperProps?: React.HTMLAttributes<HTMLDivElement>;
8
+ }
9
+ /**
10
+ * A simple input component. Set `icon` prop to show an icon on the right side of the input.
11
+ *
12
+ * Usage: `import { Input } from "@k8slens/lds"`
13
+ */
14
+ declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
15
+ export default Input;
@@ -0,0 +1 @@
1
+ "use strict";var e=require("../_virtual/_tslib.js"),r=require("react"),a=require("clsx"),t=require("./Input.module.css.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=s(r),u=s(a),i=r.forwardRef((function(r,a){var s=r.icon,i=r.wrapperProps,n=e.__rest(r,["icon","wrapperProps"]);return l.default.createElement("div",e.__assign({},i,{className:u.default(t.wrapper,null==i?void 0:i.className)}),l.default.createElement("input",e.__assign({ref:a},n,{className:u.default(t.input,(null==n?void 0:n.className)||"")})),s&&l.default.createElement(s,{className:t.icon}))}));module.exports=i;
@@ -0,0 +1 @@
1
+ "use strict";module.exports={wrapper:"lds-input--wrapper",input:"lds-input",icon:"lds-input--icon"};
@@ -0,0 +1,13 @@
1
+ import React from "react";
2
+ import { type Props as IconProps } from "@k8slens/lds-icons/lib/es/Icon/Icon.d";
3
+ export interface LoadingIndicatorProps {
4
+ size?: IconProps["size"];
5
+ className?: string;
6
+ }
7
+ /**
8
+ * A loading indicator component.
9
+ *
10
+ * Usage: `import { LoadingIndicator } from "@k8slens/lds"`
11
+ */
12
+ declare const LoadingIndicator: React.FC<LoadingIndicatorProps>;
13
+ export default LoadingIndicator;
@@ -0,0 +1 @@
1
+ "use strict";var e=require("react"),r=require("clsx"),t=require("@k8slens/lds-icons"),a=require("./LoadingIndicator.module.css.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=n(e),i=n(r),u=t.base.SpinnerIcon;module.exports=function(e){var r=e.size,t=e.className;return s.default.createElement("div",{className:i.default(a.loadingIndicator,t)},s.default.createElement(u,{size:r}))};
@@ -0,0 +1 @@
1
+ "use strict";module.exports={loadingIndicator:"lds-loading-indicator"};
@@ -0,0 +1,29 @@
1
+ import React, { PropsWithChildren, ReactNode } from "react";
2
+ import { PanelProps } from "../Panel/Panel";
3
+ import { ButtonBarProps } from "../ButtonBar/ButtonBar";
4
+ export interface ModalProps<Component extends keyof JSX.IntrinsicElements | React.ElementType> {
5
+ title: string;
6
+ subTitle?: string;
7
+ isOpen: boolean;
8
+ onClose: () => void;
9
+ size: "sm" | "md" | "lg" | "xl";
10
+ contentComponent?: PanelProps<Component>["wrapperComponent"];
11
+ contentProps?: PanelProps<Component>["wrapperProps"];
12
+ buttonBarProps?: Omit<ButtonBarProps<"footer">, "as">;
13
+ className?: string;
14
+ footer?: ReactNode;
15
+ }
16
+ /**
17
+ * A responsive modal component. Use `title` and `subTitle` props to add a content for the header and `footer` prop
18
+ * to add content to the footer (wrapped in `ButtonBar` component). Set `isOpen` prop to `true` to show the modal.
19
+ * To change the modal size change `size` prop to `sm | md | lg | xl`.
20
+ *
21
+ * Extends `Panel` component. To pass props to the `Panel` component content,
22
+ * use `contentComponent` and `contentProps` props.
23
+ *
24
+ * To pass props to `ButtonBar` use the `buttonBarProps` prop.
25
+ *
26
+ * Usage: `import { Modal } from "@k8slens/lds"`
27
+ */
28
+ declare function Modal<Component extends keyof JSX.IntrinsicElements | React.ElementType>({ children, isOpen, onClose, title, subTitle, size, contentComponent, contentProps: _contentProps, buttonBarProps, className, footer }: PropsWithChildren<ModalProps<Component>>): JSX.Element | null;
29
+ export default Modal;
@@ -0,0 +1 @@
1
+ "use strict";var e=require("../_virtual/_tslib.js"),t=require("react"),a=require("clsx"),r=require("@headlessui/react"),l=require("../Panel/Panel.js"),o=require("../ButtonBar/ButtonBar.js"),s=require("./Modal.module.css.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=n(t),i=n(a);module.exports=function(a){var n=a.children,d=a.isOpen,c=a.onClose,m=a.title,f=a.subTitle,p=a.size,_=void 0===p?"md":p,v=a.contentComponent,h=a.contentProps,g=a.buttonBarProps,q=void 0===g?{}:g,C=a.className,N=void 0===C?"":C,P=a.footer,b=t.useMemo((function(){return e.__assign(e.__assign({},h||{}),{className:i.default(s.modalContent,(null==h?void 0:h.className)||"")})}),[h]);return d?u.default.createElement(r.Dialog,{open:d,onClose:c,className:i.default(s.modal,s[_],"lds-web")},u.default.createElement(l,{wrapperComponent:v||"div",wrapperProps:b,className:N,headerComponent:r.Dialog.Title,headerProps:{as:"header"},header:u.default.createElement(u.default.Fragment,null,u.default.createElement("h3",{className:"lds-h1"},m),f?u.default.createElement("p",{className:s.subTitle},f):null),footer:P,footerComponent:o,footerProps:e.__assign(e.__assign({},q),{as:"footer"})},n)):null};
@@ -0,0 +1 @@
1
+ "use strict";module.exports={modal:"lds-modal",modalContent:"lds-modal--modal-content",subTitle:"lds-modal--sub-title",sm:"lds-modal--sm",lg:"lds-modal--lg",xl:"lds-modal--xl"};
@@ -0,0 +1,31 @@
1
+ import React, { Fragment, ReactNode } from "react";
2
+ declare type ExtractIntrinsicElementProps<Element extends keyof JSX.IntrinsicElements> = JSX.IntrinsicElements[Element];
3
+ declare type ExtractComponentProps<TComponentOrTProps> = (TComponentOrTProps extends React.ComponentType<infer TProps> ? TProps : TComponentOrTProps);
4
+ declare type ExtractProps<TComponentOrTProps> = TComponentOrTProps extends keyof JSX.IntrinsicElements ? ExtractIntrinsicElementProps<TComponentOrTProps> : ExtractComponentProps<TComponentOrTProps>;
5
+ export interface PanelProps<WrapperComponent extends keyof JSX.IntrinsicElements | React.ElementType = typeof Fragment, HeaderComponent extends keyof JSX.IntrinsicElements | React.ElementType = "header", ContentComponent extends keyof JSX.IntrinsicElements | React.ElementType = "div", FooterComponent extends keyof JSX.IntrinsicElements | React.ElementType = "footer"> {
6
+ header?: ReactNode;
7
+ footer?: ReactNode;
8
+ className?: string;
9
+ wrapperComponent?: WrapperComponent;
10
+ wrapperProps?: ExtractProps<WrapperComponent>;
11
+ headerComponent?: HeaderComponent;
12
+ headerProps?: ExtractProps<HeaderComponent>;
13
+ contentComponent?: ContentComponent | undefined;
14
+ contentProps?: ExtractProps<ContentComponent>;
15
+ footerComponent?: FooterComponent;
16
+ footerProps?: ExtractProps<FooterComponent>;
17
+ loading?: boolean;
18
+ }
19
+ /**
20
+ * A responsive panel component. Use `header` and `footer` props to add a header and footer to the panel.
21
+ * Set `loading` prop to `true` to show a loading indicator.
22
+ *
23
+ * Header is a HTML `header` element by default while footer is `footer` element and content a `div` element.
24
+ * To wrap elements inside and element, set `wrapperComponent` prop to a component or HTML element.
25
+ * To change the header, content and footer elements, set `headerComponent | contentComponent | footerComponent`
26
+ * props to a component or an HTML element.
27
+ *
28
+ * Usage: `import { Panel } from "@k8slens/lds"`
29
+ */
30
+ declare function Panel<WrapperComponent extends keyof JSX.IntrinsicElements | React.ElementType | typeof Fragment = typeof Fragment, HeaderComponent extends keyof JSX.IntrinsicElements | React.ElementType = "header", ContentComponent extends keyof JSX.IntrinsicElements | React.ElementType = "div", FooterComponent extends keyof JSX.IntrinsicElements | React.ElementType = "footer">({ header, footer, className, wrapperComponent, wrapperProps, headerComponent, headerProps, contentComponent, contentProps, footerComponent, footerProps, loading, children }: React.PropsWithChildren<PanelProps<WrapperComponent, HeaderComponent, ContentComponent, FooterComponent>>): JSX.Element;
31
+ export default Panel;
@@ -0,0 +1 @@
1
+ "use strict";var e=require("../_virtual/_tslib.js"),a=require("react"),t=require("clsx"),n=require("../LoadingIndicator/LoadingIndicator.js"),r=require("./Panel.module.css.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=l(a),s=l(t);module.exports=function(t){var l,d,i,c=t.header,u=t.footer,m=t.className,f=t.wrapperComponent,p=t.wrapperProps,g=t.headerComponent,_=t.headerProps,v=t.contentComponent,N=t.contentProps,h=t.footerComponent,q=t.footerProps,E=t.loading,P=t.children,j=f||a.Fragment,x=g||"header",C=v||"div",I=h||"footer";return o.default.createElement(j,e.__assign({},p||{}),c&&o.default.createElement(x,e.__assign({},_||{},{className:s.default(r.panel,r.header,m,null==_?void 0:_.className,(l={},l[r.loading]=E,l))}),c),o.default.createElement(C,e.__assign({},N||{},{className:s.default(r.panel,r.content,m,null==N?void 0:N.className,(d={},d[r.loading]=E,d))}),P,E&&o.default.createElement(n,{size:"xxl",className:r.loadingIndicator})),u&&o.default.createElement(I,e.__assign({},q||{},{className:s.default(r.panel,r.footer,m,null==q?void 0:q.className,(i={},i[r.loading]=E,i))}),u))};
@@ -0,0 +1 @@
1
+ "use strict";module.exports={panel:"lds-panel",header:"lds-panel--header",content:"lds-panel--content",footer:"lds-panel--footer",loading:"lds-panel--loading",loadingIndicator:"lds-panel--loading-indicator"};
@@ -0,0 +1,5 @@
1
+ import type { ChangeEvent, HTMLProps } from "react";
2
+ export interface SwitchProps extends Omit<HTMLProps<HTMLInputElement>, "onChange"> {
3
+ onChange?: (checked: boolean, event: ChangeEvent<HTMLInputElement>) => void;
4
+ }
5
+ export declare function Switch({ children, disabled, onChange, ...props }: SwitchProps): JSX.Element;
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_tslib.js"),t=require("./Switch.module.css.js"),r=require("react"),a=require("clsx");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=i(r),n=i(a);exports.Switch=function(r){var a,i=r.children,c=r.disabled,s=r.onChange,d=e.__rest(r,["children","disabled","onChange"]);return l.default.createElement("label",{className:n.default(t.Switch,(a={},a[t.disabled]=c,a)),"data-testid":"switch"},i,l.default.createElement("input",e.__assign({type:"checkbox",role:"switch",disabled:c,onChange:function(e){return null==s?void 0:s(e.target.checked,e)}},d)))};
@@ -0,0 +1 @@
1
+ "use strict";module.exports={Switch:"lds-switch",disabled:"lds-switch--disabled"};
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.__assign=function(){return exports.__assign=Object.assign||function(e){for(var t,r=1,o=arguments.length;r<o;r++)for(var n in t=arguments[r])Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n]);return e},exports.__assign.apply(this,arguments)},exports.__rest=function(e,t){var r={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(r[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(o=Object.getOwnPropertySymbols(e);n<o.length;n++)t.indexOf(o[n])<0&&Object.prototype.propertyIsEnumerable.call(e,o[n])&&(r[o[n]]=e[o[n]])}return r};
@@ -0,0 +1,7 @@
1
+ export { default as Button } from "./Button/Button";
2
+ export { default as ButtonBar } from "./ButtonBar/ButtonBar";
3
+ export { default as Input } from "./Input/Input";
4
+ export { default as LoadingIndicator } from "./LoadingIndicator/LoadingIndicator";
5
+ export { default as Modal } from "./Modal/Modal";
6
+ export { default as Panel } from "./Panel/Panel";
7
+ export { Switch } from "./Switch/Switch";
@@ -0,0 +1 @@
1
+ :root{--transition-base-easing-in-out:ease-in-out;--transition-base-easing-default:ease;--transition-base-duration-slow:.75s;--transition-base-duration-default:.25s;--shadow-switch-thumb-focused:0 0 0 2px var(--alias-color-brand-primary);--opacity-base-disabled:0.5;--typography-font-family-open-sans:"Open Sans",sans-serif;--typography-font-family-roboto:"Roboto","Helvetica","Arial",sans-serif;--typography-base-line-height-9xl:1;--typography-base-line-height-8xl:1;--typography-base-line-height-7xl:1;--typography-base-line-height-6xl:1;--typography-base-font-secondary:"Open Sans",sans-serif;--typography-base-font-primary:"Roboto","Helvetica","Arial",sans-serif;--spacing-p-margin-top:0rem;--spacing-h4-margin-bottom:0rem;--spacing-h3-margin-bottom:0rem;--spacing-switch-thumb-size:20px;--spacing-base-9-5:2.375rem;--spacing-base-8-5:2.125rem;--spacing-base-7-5:1.875rem;--spacing-base-6-5:1.625rem;--spacing-base-5-5:1.375rem;--spacing-base-4-5:1.125rem;--spacing-base-3-5:0.875rem;--spacing-base-2-75:0.6875rem;--spacing-base-2-5:0.625rem;--spacing-base-2-25:0.5625rem;--spacing-base-1-75:0.4375rem;--spacing-base-1-5:0.375rem;--spacing-base-1-25:0.3125rem;--spacing-base-0-75:0.1875rem;--spacing-base-0-5:0.125rem;--spacing-base-0-25:0.0625rem;--spacing-base-96:24rem;--spacing-base-80:20rem;--spacing-base-72:18rem;--spacing-base-64:16rem;--spacing-base-60:15rem;--spacing-base-56:14rem;--spacing-base-52:13rem;--spacing-base-48:12rem;--spacing-base-44:11rem;--spacing-base-40:10rem;--spacing-base-36:9rem;--spacing-base-32:8rem;--spacing-base-28:7rem;--spacing-base-24:6rem;--spacing-base-20:5rem;--spacing-base-18:4.5rem;--spacing-base-16:4rem;--spacing-base-14:3.5rem;--spacing-base-12:3rem;--spacing-base-10:2.5rem;--spacing-base-9:2.25rem;--spacing-base-8:2rem;--spacing-base-7:1.75rem;--spacing-base-6:1.5rem;--spacing-base-5:1.25rem;--spacing-base-4:1rem;--spacing-base-3:0.75rem;--spacing-base-2:0.5rem;--spacing-base-1:0.25rem;--hues-bright-green-lightness:60%;--hues-bright-green-saturation:60%;--hues-bright-green-hue:110;--hues-green-lightness:40%;--hues-green-saturation:60%;--hues-green-hue:138;--hues-orange-lightness:60%;--hues-orange-saturation:100%;--hues-orange-hue:38;--hues-red-lightness:60%;--hues-red-saturation:100%;--hues-red-hue:359;--hues-blue-lightness:52%;--hues-blue-saturation:60%;--hues-blue-hue:206deg;--color-base-translucent-light-50:hsla(0,0%,100%,.5);--color-base-translucent-light-25:hsla(0,0%,100%,.25);--color-base-translucent-dark-05:rgba(0,0,0,.05);--color-base-translucent-dark-60:rgba(0,0,0,.4);--color-base-translucent-dark-40:rgba(0,0,0,.4);--color-base-translucent-dark-25:rgba(0,0,0,.25);--color-base-translucent-dark-10:rgba(0,0,0,.1);--color-base-black:#000;--color-base-white:#fff;--size-input-height:var(--spacing-base-10);--size-button-height:var(--spacing-base-10);--shadow-switch-thumb-disabled:inset 0 0 0 2px var(--color-base-translucent-dark-40);--shadow-base-inner:inset 0 2px 4px 0 var(--color-base-translucent-dark-05);--shadow-base-2xl:0 25px 50px -12px var(--color-base-translucent-dark-25);--shadow-base-xl:0 20px 25px -5px var(--color-base-translucent-dark-10),0 8px 10px -6px var(--color-base-translucent-dark-10);--shadow-base-lg:0 10px 15px -3px var(--color-base-translucent-dark-10),0 4px 6px -4px var(--color-base-translucent-dark-10);--shadow-base-md:0 4px 6px -1px var(--color-base-translucent-dark-10),0 2px 4px -2px var(--color-base-translucent-dark-10);--shadow-base-default:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px var(--color-base-translucent-dark-10);--shadow-base-sm:0 0 0 2px var(--color-base-translucent-dark-05);--alias-color-background-highlight-25:var(--color-base-translucent-light-25);--alias-color-background-overlay-popup:var(--color-base-translucent-dark-60);--alias-color-background-overlay-blocked:var(--color-base-translucent-dark-40);--alias-color-background-elevation-negative:var(--color-base-translucent-dark-40);--alias-color-border-vivid:var(--color-base-white);--alias-color-text-accent:var(--color-base-white);--typography-font-header:var(--typography-font-family-open-sans);--typography-font-main:var(--typography-font-family-roboto);--typography-base-line-height-5xl:var(--spacing-base-10);--typography-base-line-height-4xl:var(--spacing-base-10);--typography-base-line-height-3xl:var(--spacing-base-10);--typography-base-line-height-2xl:var(--spacing-base-10);--typography-base-line-height-xl:var(--spacing-base-7);--typography-base-line-height-lg:var(--spacing-base-6);--typography-base-line-height-base:var(--spacing-base-5);--typography-base-line-height-sm:var(--spacing-base-4);--typography-base-line-height-xs:var(--spacing-base-4);--typography-base-size-9xl:var(--spacing-base-24);--typography-base-size-8xl:var(--spacing-base-18);--typography-base-size-7xl:var(--spacing-base-16);--typography-base-size-6xl:var(--spacing-base-12);--typography-base-size-5xl:var(--spacing-base-9);--typography-base-size-4xl:var(--spacing-base-7-5);--typography-base-size-3xl:var(--spacing-base-8);--typography-base-size-2xl:var(--spacing-base-6);--typography-base-size-xl:var(--spacing-base-5);--typography-base-size-lg:var(--spacing-base-4);--typography-base-size-base:var(--spacing-base-3-5);--typography-base-size-sm:var(--spacing-base-3);--typography-base-size-xs:var(--spacing-base-2-75);--spacing-p-margin-bottom:var(--spacing-base-5);--spacing-h4-margin-top:var(--spacing-base-4);--spacing-h3-margin-top:var(--spacing-base-4);--spacing-h2-margin-bottom:var(--spacing-base-3);--spacing-h2-margin-top:var(--spacing-base-7);--spacing-h1-margin-bottom:var(--spacing-base-3-5);--spacing-h1-margin-top:var(--spacing-base-6-5);--spacing-input-icon-margin-y:var(--spacing-base-2-5);--spacing-input-icon-margin-x:var(--spacing-base-2-5);--spacing-input-padding-inline-end:var(--spacing-base-10);--spacing-button-icon-size:var(--spacing-base-5);--spacing-base-xl2:var(--spacing-base-8);--spacing-base-xl:var(--spacing-base-6);--spacing-base-lg:var(--spacing-base-4);--spacing-base-md:var(--spacing-base-3);--spacing-base-sm:var(--spacing-base-2);--spacing-base-xs:var(--spacing-base-1);--hues-blue-gray-hue:var(--hues-blue-hue);--color-background-switch-thumb:var(--color-base-white);--color-base-bright-green-600:hsl(var(--hues-bright-green-hue),var(--hues-bright-green-saturation),var(--hues-bright-green-lightness));--color-base-green-400:hsl(var(--hues-green-hue),var(--hues-green-saturation),var(--hues-green-lightness));--color-base-orange-600:hsl(var(--hues-orange-hue),var(--hues-orange-saturation),var(--hues-orange-lightness));--color-base-orange-400:hsl(var(--hues-orange-hue),var(--hues-orange-saturation),40%);--color-base-red-600:hsl(var(--hues-red-hue),var(--hues-red-saturation),var(--hues-red-lightness));--color-base-blue-600:hsl(var(--hues-blue-hue),var(--hues-blue-saturation),60%);--color-base-blue-500:hsl(var(--hues-blue-hue),var(--hues-blue-saturation),var(--hues-blue-lightness));--alias-color-info:var(--color-base-blue-600);--alias-color-caution-dark:var(--color-base-orange-400);--spacing-input-padding-inline-start:var(--spacing-base-md);--spacing-button-icon-margin-inline-end:var(--spacing-base-md);--spacing-button-padding-y:var(--spacing-base-sm);--spacing-button-padding-x:var(--spacing-base-lg);--color-font-input-focus:var(--alias-color-text-accent);--color-background-switch-highlight:var(--alias-color-background-highlight-25);--color-base-bright-green-default:var(--color-base-bright-green-600);--color-base-green-default:var(--color-base-green-400);--color-base-orange-default:var(--color-base-orange-600);--color-base-red-default:var(--color-base-red-600);--color-base-blue-gray-980:hsl(var(--hues-blue-gray-hue),15%,98%);--color-base-blue-gray-900:hsl(var(--hues-blue-gray-hue),15%,90%);--color-base-blue-gray-850:hsl(var(--hues-blue-gray-hue),15%,85%);--color-base-blue-gray-800:hsl(var(--hues-blue-gray-hue),10%,80%);--color-base-blue-gray-750:hsl(var(--hues-blue-gray-hue),5%,75%);--color-base-blue-gray-650:hsl(var(--hues-blue-gray-hue),5%,65%);--color-base-blue-gray-550:hsl(var(--hues-blue-gray-hue),6%,55%);--color-base-blue-gray-450:hsl(var(--hues-blue-gray-hue),6%,45%);--color-base-blue-gray-350:hsl(var(--hues-blue-gray-hue),6%,35%);--color-base-blue-gray-230:hsl(var(--hues-blue-gray-hue),8%,23%);--color-base-blue-gray-200:hsl(var(--hues-blue-gray-hue),9%,20%);--color-base-blue-gray-160:hsl(var(--hues-blue-gray-hue),10%,16%);--color-base-blue-gray-130:hsl(var(--hues-blue-gray-hue),7%,13%);--color-base-blue-default:var(--color-base-blue-500);--alias-color-background-quinary:var(--color-base-blue-gray-350);--alias-color-background-quarternary:var(--color-base-blue-gray-230);--alias-color-background-tertiary:var(--color-base-blue-gray-200);--alias-color-background-secondary:var(--color-base-blue-gray-160);--alias-color-background-base:var(--color-base-blue-gray-130);--alias-color-ok:var(--color-base-green-default);--alias-color-caution:var(--color-base-orange-default);--alias-color-danger:var(--color-base-red-default);--alias-color-border-focus:var(--color-base-blue-default);--alias-color-border-strong:var(--color-base-blue-gray-550);--alias-color-border-default:var(--color-base-blue-gray-350);--alias-color-border-weak:var(--color-base-blue-gray-230);--alias-color-text-quarternary:var(--color-base-blue-gray-850);--alias-color-text-tertiary:var(--color-base-blue-gray-650);--alias-color-text-secondary:var(--color-base-blue-gray-350);--alias-color-brand-primary:var(--color-base-blue-default);--color-background-switch-track-active:var(--color-base-bright-green-default);--color-background-button-caution-base:var(--alias-color-caution-dark);--color-base-blue-gray-default:var(--color-base-blue-gray-450);--alias-color-text-primary:var(--color-base-blue-gray-default);--color-font-input-placeholder:var(--alias-color-text-secondary);--color-font-input-default:var(--alias-color-text-tertiary);--color-font-button-danger-discreet:var(--alias-color-danger);--color-font-button-caution-discreet:var(--alias-color-caution);--color-font-button-ok-discreet:var(--alias-color-ok);--color-font-button-secondary-discreet:var(--alias-color-text-tertiary);--color-font-button-secondary-base:var(--alias-color-text-quarternary);--color-font-button-primary-discreet:var(--alias-color-brand-primary);--color-font-button-primary-base:var(--alias-color-text-quarternary);--color-font-link:var(--alias-color-brand-primary);--color-border-input-invalid:var(--alias-color-danger);--color-border-input-focus:var(--alias-color-border-focus);--color-border-input-default:var(--alias-color-border-weak);--color-border-button-danger-discreet:var(--alias-color-danger);--color-border-button-caution-discreet:var(--alias-color-caution);--color-border-button-ok-discreet:var(--alias-color-ok);--color-border-button-secondary-discreet:var(--alias-color-border-strong);--color-border-button-primary-discreet:var(--alias-color-brand-primary);--color-background-switch-track-inactive:var(--alias-color-background-quinary);--color-background-input-focus:var(--alias-color-background-quarternary);--color-background-input-default:var(--alias-color-background-base);--color-background-button-danger-base:var(--alias-color-danger);--color-background-button-ok-base:var(--alias-color-ok);--color-background-button-secondary-base:var(--alias-color-background-quarternary);--color-background-button-primary-base:var(--alias-color-brand-primary);--color-background-block-footer:var(--alias-color-background-secondary);--color-background-block-content:var(--alias-color-background-tertiary);--color-background-block-header:var(--alias-color-background-quarternary)}html.light{--alias-color-brand-primary:#3b8ece;--alias-color-text-primary:#6c747a;--alias-color-text-secondary:#bcc0c2;--alias-color-text-tertiary:#363b3f;--alias-color-text-quarternary:#f9fafb;--alias-color-text-accent:#000;--alias-color-border-weak:#d3dade;--alias-color-border-default:#a1a6aa;--alias-color-border-strong:#6c747a;--alias-color-border-vivid:#000;--alias-color-border-focus:#3b8ece;--alias-color-danger:#ff3336;--alias-color-caution:#ffb433;--alias-color-caution-dark:#cc8100;--alias-color-ok:#29a34e;--alias-color-info:#5ca1d6;--alias-color-background-base:#f9fafb;--alias-color-background-secondary:#c7cdd1;--alias-color-background-tertiary:#e2e6e9;--alias-color-background-quarternary:#d3dade;--alias-color-background-quinary:#a1a6aa;--alias-color-background-elevation-negative:rgba(0,0,0,.1);--alias-color-background-overlay-blocked:hsla(0,0%,100%,.5);--alias-color-background-overlay-popup:rgba(0,0,0,.25);--alias-color-background-highlight-25:rgba(0,0,0,.05)}.lds-icon{display:inline-block}.lds-icon--svg svg{height:100%;max-width:inherit;min-width:inherit;width:100%}.lds-icon--svg.sm{height:1.125rem;width:1.125rem}.lds-icon--svg,.lds-icon--svg.md{height:var(--spacing-base-5);width:var(--spacing-base-5)}.lds-icon--svg.lg{height:var(--spacing-base-6);width:var(--spacing-base-6)}.lds-icon--svg.xl{height:var(--spacing-base-7);width:var(--spacing-base-7)}.lds-icon--svg.xxl{height:var(--spacing-base-8);width:var(--spacing-base-8)}.lds-icon--svg>svg{fill:var(--color-font-base)}.lds-icon--svg.black>svg{fill:var(--color-base-black)}.lds-icon--svg.on-dark>svg{fill:var(--color-base-white)}.lds-icon--svg.primary>svg{fill:var(--color-base-blue-default)}.lds-icon--svg.ok>svg{fill:var(--color-background-button-ok-base)}.lds-icon--svg.info>svg{fill:var(--color-background-button-info-base)}.lds-icon--svg.caution>svg{fill:var(--color-background-button-caution-base)}.lds-icon--svg.danger>svg{fill:var(--color-background-button-danger-base)}.lds-only-aria{clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute!important;width:1px}body{font-family:var(--typography-base-font-primary)}.lds-h1,.lds-web .lds-h1:is(h1,h2,h3,h4,h5,h6),.lds-web h2{color:var(--alias-color-text-accent);font-size:1.875rem;line-height:2.25rem}.lds-web .lds-h1:is(h1,h2,h3,h4,h5,h6),.lds-web h2{margin-bottom:var(--spacing-h1-margin-bottom);margin-top:var(--spacing-h1-margin-top)}.lds-h2,.lds-web .lds-h2:is(h1,h2,h3,h4,h5,h6),.lds-web h3{color:var(--alias-color-text-accent);font-size:1.5rem;line-height:2rem}.lds-web .lds-h2:is(h1,h2,h3,h4,h5,h6),.lds-web h3{margin-bottom:var(--spacing-h2-margin-bottom);margin-top:var(--spacing-h2-margin-top)}.lds-h3,.lds-web .lds-h3:is(h1,h2,h3,h4,h5,h6),.lds-web h4{color:var(--alias-color-text-secondary);font-size:1rem;font-weight:700;line-height:1.5rem;text-transform:uppercase}.lds-web .lds-h3:is(h1,h2,h3,h4,h5,h6),.lds-web h4{margin-bottom:var(--spacing-h3-margin-bottom);margin-top:var(--spacing-h3-margin-top)}.lds-h4,.lds-web .lds-h4:is(h1,h2,h3,h4,h5,h6),.lds-web h5{color:var(--alias-color-text-accent);font-size:1rem;font-weight:700;line-height:1.5rem}.lds-web .lds-h4:is(h1,h2,h3,h4,h5,h6),.lds-web h5{margin-bottom:var(--spacing-h4-margin-bottom);margin-top:var(--spacing-h4-margin-top)}.lds-web{font-size:1rem;line-height:1.5rem}.lds-web p{margin-bottom:var(--spacing-p-margin-bottom);margin-top:var(--spacing-p-margin-top)}.lds-web code{background:var(--alias-color-background-elevation-negative);display:inline-block;font-size:.75rem;line-height:1rem;line-height:1;padding:var(--spacing-base-0-5) var(--spacing-base-1-5)}.lds-web code,.lds-web dfn{color:var(--alias-color-text-tertiary)}.lds-web dfn{font-style:normal}.lds-web ul{list-style-type:disc}.lds-web a{color:var(--alias-color-text-accent);text-decoration:underline}.lds-web a.primary{color:var(--alias-color-brand-primary);text-decoration:underline}a.lds-button{display:inline-block;text-align:center;-webkit-text-decoration-line:none;text-decoration-line:none}.lds-button{background-color:var(--color-background-button-secondary-base);border-color:transparent;border-radius:.25rem;border-width:1px;color:var(--color-font-button-secondary-base);font-family:var(--typography-font-main);font-size:1rem;height:var(--size-button-height);line-height:1.5rem;padding:var(--spacing-button-padding-y) var(--spacing-button-padding-x);transition:background-color var(--transition-base-duration-default) var(--transition-base-easing-default)}.lds-button--all-caps{text-transform:uppercase}.lds-button>.lds-button--icon{height:1em;margin-left:0;margin-right:var(--spacing-button-icon-margin-inline-end);overflow:visible;width:var(--spacing-button-icon-size)}.lds-button>.lds-button--icon>svg{fill:var(--color-font-button-secondary-base);height:var(--spacing-button-icon-size);width:var(--spacing-button-icon-size)}.lds-button>.lds-button--icon-r{margin-left:var(--spacing-button-icon-margin-inline-end);margin-right:0}.lds-button--discreet{background-color:transparent;border-color:var(--color-border-button-secondary-discreet);border-width:1px;color:var(--color-font-button-secondary-discreet)}.lds-button--discreet>.lds-button--icon>svg{fill:var(--color-font-button-secondary-discreet)}.lds-button.primary{background-color:var(--color-background-button-primary-base);color:var(--color-font-button-primary-base)}.lds-button.primary>.lds-button--icon>svg{fill:var(--color-font-button-primary-base)}.lds-button--discreet.primary{background-color:transparent;border-color:var(--color-border-button-primary-discreet);border-width:1px;color:var(--color-font-button-primary-discreet)}.lds-button--discreet.primary>.lds-button--icon>svg{fill:var(--color-font-button-primary-discreet)}.lds-button.ok{background-color:var(--color-background-button-ok-base)}.lds-button--discreet.ok{background-color:transparent;border-color:var(--color-border-button-ok-discreet);border-width:1px}.lds-button--discreet.ok,.lds-button--discreet.ok>.lds-button--icon{color:var(--color-font-button-ok-discreet)}.lds-button--discreet.ok>.lds-button--icon>svg{fill:var(--color-font-button-ok-discreet)}.lds-button.caution{background-color:var(--color-background-button-caution-base)}.lds-button--discreet.caution{background-color:transparent;border-color:var(--color-border-button-caution-discreet);border-width:1px}.lds-button--discreet.caution,.lds-button--discreet.caution>.lds-button--icon{color:var(--color-font-button-caution-discreet)}.lds-button--discreet.caution>.lds-button--icon>svg{fill:var(--color-font-button-caution-discreet)}.lds-button:is(.danger,[type=reset]){background-color:var(--color-background-button-danger-base)}.lds-button--discreet:is(.danger,[type=reset]){background-color:transparent;border-color:var(--color-border-button-danger-discreet);border-width:1px;color:var(--color-font-button-danger-discreet)}.lds-button--discreet:is(.danger,[type=reset])>.lds-button--icon{color:var(--color-font-button-danger-discreet)}.lds-button--discreet:is(.danger,[type=reset])>.lds-button--icon>svg{fill:var(--color-font-button-danger-discreet)}.lds-button--loading{cursor:default;position:relative}.lds-button--loading>.lds-button--spinner{left:50%;margin-left:-.625rem;margin-top:-.625rem;position:absolute;top:50%}.lds-button--loading>.lds-button--icon:not(.lds-button--spinner),.lds-button--loading>.lds-button--label{opacity:var(--opacity-base-disabled)}a.lds-button.disabled{pointer-events:none}.lds-button.disabled,.lds-button[disabled]{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);cursor:default;opacity:var(--opacity-base-disabled)}.lds-button-bar{display:flex;flex-direction:column;margin-top:var(--spacing-base-2);padding-bottom:var(--spacing-base-2);padding-top:var(--spacing-base-2)}@media (min-width:640px){.lds-button-bar{flex-direction:row;flex-wrap:wrap;justify-content:space-between}}.lds-button-bar>a,.lds-button-bar>button{margin:var(--spacing-base-2) var(--spacing-base-1)}.lds-button-bar.lds-button-bar--centered{display:flex;justify-content:center}.lds-button-bar.lds-button-bar--centered>a,.lds-button-bar.lds-button-bar--centered>button{margin-left:var(--spacing-base-4);margin-right:var(--spacing-base-4)}.lds-button-bar.lds-button-bar--stacked{flex-direction:column;flex-wrap:nowrap}.lds-button-bar.lds-button-bar--stacked a,.lds-button-bar.lds-button-bar--stacked>button{margin-bottom:var(--spacing-base-2);margin-left:0;margin-right:0;margin-top:var(--spacing-base-2)}.lds-button-bar.lds-button-bar--b-grid{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));margin-bottom:0;margin-top:0}@media (min-width:640px){.lds-button-bar.lds-button-bar--b-grid{-moz-column-gap:var(--spacing-base-4);column-gap:var(--spacing-base-4);padding-bottom:0;padding-top:0}}.lds-button-bar.lds-button-bar--b-grid>a,.lds-button-bar.lds-button-bar--b-grid>button{margin-left:0;margin-right:0}@media (min-width:640px){.lds-button-bar.lds-button-bar--grid---2{grid-template-columns:repeat(2,minmax(0,1fr))}.lds-button-bar.lds-button-bar--grid---3{grid-template-columns:repeat(3,minmax(0,1fr))}.lds-button-bar.lds-button-bar--grid---4{grid-template-columns:repeat(4,minmax(0,1fr))}.lds-button-bar.lds-button-bar--grid---5{grid-template-columns:repeat(5,minmax(0,1fr))}}.lds-input--wrapper{position:relative}.lds-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:.25rem;border-width:1px;width:100%}.lds-input:focus{outline:2px solid transparent;outline-offset:2px;z-index:10}.lds-input{-webkit-text-fill-color:var(--color-font-input-default);background-color:var(--color-background-input-default);border-color:var(--color-border-input-default);box-shadow:0 0 0 9999px var(--color-background-input-default) inset;caret-color:var(--alias-color-border-vivid);color:var(--color-font-input-default);height:var(--size-input-height);padding-left:var(--spacing-input-padding-inline-start);padding-right:var(--spacing-input-padding-inline-end);transition:border-color var(--transition-base-duration-default) var(--transition-base-easing-default)}.lds-input:disabled{opacity:var(--opacity-base-disabled)}.lds-input:focus{-webkit-text-fill-color:var(--color-font-input-focus);background-color:var(--color-background-input-focus);border-color:var(--color-border-input-focus);color:var(--color-font-input-focus)}.lds-input[aria-invalid]{border-color:var(--color-border-input-invalid)}.lds-input::-moz-placeholder{opacity:var(--opacity-base-disabled)}.lds-input::placeholder{opacity:var(--opacity-base-disabled)}.lds-input+.lds-input--icon{position:absolute;right:var(--spacing-input-icon-margin-x);top:var(--spacing-input-icon-margin-y);z-index:50}.lds-input+.lds-input--icon>svg{fill:var(--color-font-input-default)}.lds-input:disabled+.lds-input--icon>svg{opacity:var(--opacity-base-disabled)}.lds-input[aria-invalid]+.lds-input--icon>svg{fill:var(--color-border-input-invalid)}.lds-loading-indicator{align-items:center;bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0}.lds-loading-indicator>span{display:block;left:-50%;top:-50%}.lds-panel{font-size:.875rem;line-height:1.25rem;width:100%}.lds-panel--content,.lds-panel--footer,.lds-panel--header{margin:0;padding:var(--spacing-base-4)}.lds-panel--header{background-color:var(--color-background-block-header);text-align:center}.lds-panel--content{background-color:var(--color-background-block-content)}.lds-panel--footer{background-color:var(--color-background-block-footer)}@media (min-width:640px){.lds-panel--header{border-top-left-radius:.75rem;border-top-right-radius:.75rem;margin-top:var(--spacing-base-6);padding:var(--spacing-base-8) var(--spacing-base-6)}.lds-panel--content{padding:var(--spacing-base-6)}.lds-panel--footer{border-bottom-left-radius:.75rem;border-bottom-right-radius:.75rem;margin-bottom:var(--spacing-base-6);padding-left:var(--spacing-base-6);padding-right:var(--spacing-base-6)}}.lds-panel--loading{position:relative}.lds-panel--footer,.lds-panel--header{opacity:1;transition:opacity var(--transition-base-duration-slow) var(--transition-base-easing-in-out)}.lds-panel--footer.lds-panel--loading,.lds-panel--header.lds-panel--loading{opacity:var(--opacity-base-disabled)}.lds-panel--loading-indicator{align-items:center;background-color:var(--alias-color-background-overlay-blocked);bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0}.lds-panel--loading-indicator svg{fill:var(--alias-color-text-tertiary)}.lds-panel--loading{pointer-events:none}.lds-panel--header:is(h2,h3,h4,h5,h6){margin-bottom:0}.lds-panel--footer.lds-button-bar{margin-top:0;padding-bottom:var(--spacing-base-2);padding-top:var(--spacing-base-2)}.lds-modal{align-items:center;background:var(--alias-color-background-overlay-popup);bottom:0;display:flex;justify-content:center;left:0;overflow:hidden;position:fixed;right:0;top:0;z-index:50}.lds-modal--modal-content{flex-grow:1;max-width:28rem;width:100%}@media (min-width:640px){.lds-modal--modal-content{border-radius:.75rem}}.lds-modal--modal-content{box-shadow:var(--shadow-base-xl)}.lds-modal--modal-content>header{margin:0;padding-bottom:var(--spacing-base-4);padding-top:var(--spacing-base-4)}@media (min-width:640px){.lds-modal--modal-content>header{margin:0}}.lds-modal--modal-content>header h3.lds-h1{margin-bottom:0;margin-top:0}.lds-modal--modal-content>header .lds-modal--sub-title{color:var(--alias-color-text-tertiary);margin-bottom:0;margin-top:var(--spacing-base-2)}.lds-modal--modal-content>footer{margin:0}@media (min-width:640px){.lds-modal--modal-content>footer{margin:0}}.lds-modal.lds-modal--sm .lds-modal--modal-content{max-width:20rem}.lds-modal.lds-modal--lg .lds-modal--modal-content{max-width:48rem}.lds-modal.lds-modal--xl .lds-modal--modal-content{max-width:64rem}.lds-switch{--thumb-size:var(--spacing-switch-thumb-size);--thumb-color:var(--color-background-switch-thumb);--thumb-color-highlight:var(--color-background-switch-thumb-highlight);--track-size:calc(var(--thumb-size)*2);--track-padding:2px;--track-color-inactive:var(--color-background-switch-track-inactive);--track-color-active:var(--color-background-switch-track-active);--thumb-position:0%;--thumb-transition-duration:var(--transition-base-duration-default);--hover-highlight-size:0;align-items:center;color:var(--alias-color-text-accent);cursor:pointer;display:flex;font-weight:500;gap:2ch;justify-content:space-between;-webkit-user-select:none;-moz-user-select:none;user-select:none}.lds-switch>input{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--track-color-inactive);block-size:var(--thumb-size);border:none;border-radius:var(--track-size);box-sizing:content-box;display:grid;flex-shrink:0;grid:[track] 1fr/[track] 1fr;inline-size:var(--track-size);outline-offset:5px;padding:var(--track-padding);pointer-events:none;transition:background-color var(--transition-base-duration-default) var(--transition-base-easing-default)}.lds-switch>input:before{background:var(--thumb-color);block-size:var(--thumb-size);border-radius:50%;box-shadow:0 0 0 var(--hover-highlight-size) var(--thumb-color-highlight);content:"";cursor:pointer;grid-area:track;inline-size:var(--thumb-size);pointer-events:auto;transform:translateX(var(--thumb-position));transition:transform var(--thumb-transition-duration) var(--transition-base-easing-default),box-shadow var(--transition-base-duration-default) var(--transition-base-easing-default)}.lds-switch>input:not(:disabled):hover:before{--hover-highlight-size:.3rem}.lds-switch>input:checked{--thumb-position:100%;background:var(--track-color-active)}.lds-switch>input:disabled{--track-color-inactive:var(--color-background-switch-track-inactive);--thumb-color:transparent}.lds-switch>input:disabled:before{box-shadow:var(--shadow-switch-thumb-disabled);cursor:not-allowed}.lds-switch>input:focus-visible{box-shadow:var(--shadow-switch-thumb-focused)}.lds-switch--disabled{cursor:not-allowed}
@@ -0,0 +1,2 @@
1
+ import "./index.css";
2
+ export * from "./components";
@@ -0,0 +1,2 @@
1
+ import "./index.css";
2
+ export * from "./components";
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("./Button/Button.js"),e=require("./ButtonBar/ButtonBar.js"),r=require("./Input/Input.js"),o=require("./LoadingIndicator/LoadingIndicator.js"),i=require("./Modal/Modal.js"),n=require("./Panel/Panel.js"),u=require("./Switch/Switch.js");exports.Button=t,exports.ButtonBar=e,exports.Input=r,exports.LoadingIndicator=o,exports.Modal=i,exports.Panel=n,exports.Switch=u.Switch;
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("./Button/Button.js"),e=require("./ButtonBar/ButtonBar.js"),r=require("./Input/Input.js"),o=require("./LoadingIndicator/LoadingIndicator.js"),i=require("./Modal/Modal.js"),n=require("./Panel/Panel.js"),u=require("./Switch/Switch.js");exports.Button=t,exports.ButtonBar=e,exports.Input=r,exports.LoadingIndicator=o,exports.Modal=i,exports.Panel=n,exports.Switch=u.Switch;
@@ -0,0 +1,33 @@
1
+ import React, { ButtonHTMLAttributes, ReactNode } from "react";
2
+ import { Props } from "./shared";
3
+ export interface ButtonProps extends Props, Pick<ButtonHTMLAttributes<HTMLButtonElement>, "id" | "className" | "aria-label"> {
4
+ buttonType?: ButtonHTMLAttributes<HTMLButtonElement>["type"];
5
+ loading?: boolean;
6
+ /**
7
+ * When set to true true, if the onClick callback returns a promise,
8
+ * loading activity indicator will be shown until the promise has been resolved/rejected.
9
+ */
10
+ loadingStateOnPromise?: boolean;
11
+ onClick?(e: React.MouseEvent<HTMLButtonElement, MouseEvent>): Promise<unknown> | unknown;
12
+ }
13
+ export interface ButtonPropsWithLabelNode extends Omit<Props, "label">, Pick<ButtonHTMLAttributes<HTMLButtonElement>, "id" | "className"> {
14
+ buttonType?: ButtonHTMLAttributes<HTMLButtonElement>["type"];
15
+ loading?: boolean;
16
+ /**
17
+ * When set to true true, if the onClick callback returns a promise,
18
+ * loading activity indicator will be shown until the promise has been resolved/rejected.
19
+ */
20
+ loadingStateOnPromise?: boolean;
21
+ "aria-label": string;
22
+ label: ReactNode;
23
+ onClick?(e: React.MouseEvent<HTMLButtonElement, MouseEvent>): Promise<unknown> | unknown;
24
+ }
25
+ /**
26
+ * A simple, accessible, button component. Set `icon` prop to show an icon, aligned left by default.
27
+ * Set `loading` prop to show a loading indicator. Setting `loadingStateOnPromise` and returning a promise
28
+ * from `onClick` will show a loading indicator until the promise has been resolved/rejected.
29
+ *
30
+ * Usage: `import { Button } from "@k8slens/lds"`
31
+ */
32
+ declare const Button: React.ForwardRefExoticComponent<(ButtonProps | ButtonPropsWithLabelNode) & React.RefAttributes<HTMLButtonElement>>;
33
+ export default Button;
@@ -0,0 +1 @@
1
+ import e,{forwardRef as t,useRef as n,useEffect as a,useState as i,useCallback as l}from"react";import o from"clsx";import{base as r}from"@k8slens/lds-icons";import c from"./Button.module.css.js";var s=r.SpinnerIcon;var m=t((function(t,r){var m,d=t.label,u=t.primary,f=t.discreet,p=t.allCaps,b=t.disabled,v=void 0!==b&&b,y=t.loading,g=void 0!==y&&y,E=t.className,N=t["aria-label"],h=t.id,C=t.type,k=void 0===C?"default":C,j=t.buttonType,x=void 0===j?"button":j,P=t.icon,S=t.iconPosition,B=void 0===S?"left":S,F=t.loadingStateOnPromise,I=void 0!==F&&F,L=t.onClick,O=t.children,R=n(!0);a((function(){return R.current=!0,function(){R.current=!1}}),[]);var T=i(!1),q=T[0],w=T[1],z=g||q,A=l((function(e){if("function"==typeof L&&!z){var t,n=L(e);I&&("object"==typeof(t=n)&&null!==t&&"then"in t&&"function"==typeof t.then)&&(w(!0),n.finally((function(){R.current&&w(!1)})))}}),[L,z,I]);return u&&(k="primary"),e.createElement("button",{ref:r,id:h,type:x,onClick:A,className:o(c.button,E,k,(m={},m[c.allCaps]=p,m[c.discreet]=f,m[c.loading]=z,m)),"aria-label":N||("string"==typeof d?d:""),disabled:v||q},P&&"left"===B&&e.createElement(P,{className:c.icon}),e.createElement("span",{className:c.label},d),O,P&&"right"===B&&e.createElement(P,{className:o(c.icon,c.iconR)}),z&&e.createElement(e.Fragment,null,e.createElement(s,{className:o(c.icon,c.spinner)}),e.createElement("span",{className:"lds-only-aria","aria-live":"polite","aria-busy":"true"}," ","Loading")))}));export{m as default};
@@ -0,0 +1 @@
1
+ var t={button:"lds-button",allCaps:"lds-button--all-caps",icon:"lds-button--icon",iconR:"lds-button--icon-r",discreet:"lds-button--discreet",loading:"lds-button--loading",spinner:"lds-button--spinner",label:"lds-button--label"};export{t as default};
@@ -0,0 +1,14 @@
1
+ import { type Icon } from "@k8slens/lds-icons/lib/es/Icon/Icon.d";
2
+ export declare type Type = "default" | "primary" | "ok" | "danger" | "caution";
3
+ export declare type IconPosition = "right" | "left";
4
+ export interface Props {
5
+ label: string;
6
+ icon?: Icon;
7
+ iconPosition?: IconPosition;
8
+ type?: Type;
9
+ primary?: boolean;
10
+ disabled?: boolean;
11
+ discreet?: boolean;
12
+ allCaps?: boolean;
13
+ children?: React.ReactNode;
14
+ }
@@ -0,0 +1,17 @@
1
+ import React, { PropsWithChildren } from "react";
2
+ declare type ExtractIntrinsicElementProps<Element extends keyof JSX.IntrinsicElements> = JSX.IntrinsicElements[Element];
3
+ declare type ExtractComponentProps<TComponentOrTProps> = (TComponentOrTProps extends React.ComponentType<infer TProps> ? TProps : TComponentOrTProps);
4
+ declare type ExtractProps<TComponentOrTProps> = TComponentOrTProps extends keyof JSX.IntrinsicElements ? ExtractIntrinsicElementProps<TComponentOrTProps> : ExtractComponentProps<TComponentOrTProps>;
5
+ export declare type Type = "default" | "centered" | "stacked" | "grid";
6
+ export declare type ButtonBarProps<ElementType extends JSX.IntrinsicElements | React.ElementType<any>> = Partial<Omit<ExtractProps<ElementType>, "children" | "as" | "type" | "gridSize">> & {
7
+ as?: keyof JSX.IntrinsicElements | React.ElementType<any> | undefined;
8
+ type?: Type;
9
+ gridSize?: Number;
10
+ };
11
+ /**
12
+ * A container for buttons. Set `type` prop to change the layout of the buttons.
13
+ *
14
+ * Usage: `import { ButtonBar } from "@k8slens/lds"`
15
+ */
16
+ declare function ButtonBar<ElementType extends JSX.IntrinsicElements | React.ElementType<any>>({ as: Component, type, gridSize, children, ...props }: PropsWithChildren<ButtonBarProps<ElementType>>): JSX.Element;
17
+ export default ButtonBar;
@@ -0,0 +1 @@
1
+ import{__rest as r,__assign as t}from"../_virtual/_tslib.js";import e,{useMemo as i,Children as o,isValidElement as a}from"react";import n from"clsx";import d from"./ButtonBar.module.css.js";function l(l){var u,c=l.as,m=void 0===c?"div":c,s=l.type,f=void 0===s?"default":s,p=l.gridSize,g=l.children,v=r(l,["as","type","gridSize","children"]),b=i((function(){return"number"==typeof p?p:o.toArray(g).filter((function(r){return a(r)})).length}),[p,g]);return e.createElement(m,t({},v,{className:n(d.buttonBar,v.className||"",(u={},u[d[f]]="default"!==f&&"grid"!==f,u[d.bGrid]="grid"===f,u[d["grid-".concat(b)]]="grid"===f,u))}),g)}export{l as default};
@@ -0,0 +1 @@
1
+ var t={buttonBar:"lds-button-bar",centered:"lds-button-bar--centered",stacked:"lds-button-bar--stacked",bGrid:"lds-button-bar--b-grid","grid-2":"lds-button-bar--grid---2","grid-3":"lds-button-bar--grid---3","grid-4":"lds-button-bar--grid---4","grid-5":"lds-button-bar--grid---5"};export{t as default};
@@ -0,0 +1,15 @@
1
+ import React, { HTMLInputTypeAttribute } from "react";
2
+ import { Icon } from "@k8slens/lds-icons/lib/es/Icon/Icon";
3
+ export declare type InputType = Exclude<HTMLInputTypeAttribute, "button" | "checkbox" | "radio" | "number">;
4
+ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
5
+ icon?: Icon;
6
+ type?: InputType;
7
+ wrapperProps?: React.HTMLAttributes<HTMLDivElement>;
8
+ }
9
+ /**
10
+ * A simple input component. Set `icon` prop to show an icon on the right side of the input.
11
+ *
12
+ * Usage: `import { Input } from "@k8slens/lds"`
13
+ */
14
+ declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
15
+ export default Input;
@@ -0,0 +1 @@
1
+ import{__rest as r,__assign as e}from"../_virtual/_tslib.js";import a,{forwardRef as t}from"react";import s from"clsx";import o from"./Input.module.css.js";var l=t((function(t,l){var m=t.icon,p=t.wrapperProps,c=r(t,["icon","wrapperProps"]);return a.createElement("div",e({},p,{className:s(o.wrapper,null==p?void 0:p.className)}),a.createElement("input",e({ref:l},c,{className:s(o.input,(null==c?void 0:c.className)||"")})),m&&a.createElement(m,{className:o.icon}))}));export{l as default};
@@ -0,0 +1 @@
1
+ var p={wrapper:"lds-input--wrapper",input:"lds-input",icon:"lds-input--icon"};export{p as default};
@@ -0,0 +1,13 @@
1
+ import React from "react";
2
+ import { type Props as IconProps } from "@k8slens/lds-icons/lib/es/Icon/Icon.d";
3
+ export interface LoadingIndicatorProps {
4
+ size?: IconProps["size"];
5
+ className?: string;
6
+ }
7
+ /**
8
+ * A loading indicator component.
9
+ *
10
+ * Usage: `import { LoadingIndicator } from "@k8slens/lds"`
11
+ */
12
+ declare const LoadingIndicator: React.FC<LoadingIndicatorProps>;
13
+ export default LoadingIndicator;
@@ -0,0 +1 @@
1
+ import e from"react";import r from"clsx";import{base as o}from"@k8slens/lds-icons";import a from"./LoadingIndicator.module.css.js";var s=o.SpinnerIcon,t=function(o){var t=o.size,i=o.className;return e.createElement("div",{className:r(a.loadingIndicator,i)},e.createElement(s,{size:t}))};export{t as default};
@@ -0,0 +1 @@
1
+ var a={loadingIndicator:"lds-loading-indicator"};export{a as default};
@@ -0,0 +1,29 @@
1
+ import React, { PropsWithChildren, ReactNode } from "react";
2
+ import { PanelProps } from "../Panel/Panel";
3
+ import { ButtonBarProps } from "../ButtonBar/ButtonBar";
4
+ export interface ModalProps<Component extends keyof JSX.IntrinsicElements | React.ElementType> {
5
+ title: string;
6
+ subTitle?: string;
7
+ isOpen: boolean;
8
+ onClose: () => void;
9
+ size: "sm" | "md" | "lg" | "xl";
10
+ contentComponent?: PanelProps<Component>["wrapperComponent"];
11
+ contentProps?: PanelProps<Component>["wrapperProps"];
12
+ buttonBarProps?: Omit<ButtonBarProps<"footer">, "as">;
13
+ className?: string;
14
+ footer?: ReactNode;
15
+ }
16
+ /**
17
+ * A responsive modal component. Use `title` and `subTitle` props to add a content for the header and `footer` prop
18
+ * to add content to the footer (wrapped in `ButtonBar` component). Set `isOpen` prop to `true` to show the modal.
19
+ * To change the modal size change `size` prop to `sm | md | lg | xl`.
20
+ *
21
+ * Extends `Panel` component. To pass props to the `Panel` component content,
22
+ * use `contentComponent` and `contentProps` props.
23
+ *
24
+ * To pass props to `ButtonBar` use the `buttonBarProps` prop.
25
+ *
26
+ * Usage: `import { Modal } from "@k8slens/lds"`
27
+ */
28
+ declare function Modal<Component extends keyof JSX.IntrinsicElements | React.ElementType>({ children, isOpen, onClose, title, subTitle, size, contentComponent, contentProps: _contentProps, buttonBarProps, className, footer }: PropsWithChildren<ModalProps<Component>>): JSX.Element | null;
29
+ export default Modal;
@@ -0,0 +1 @@
1
+ import{__assign as e}from"../_virtual/_tslib.js";import o,{useMemo as t}from"react";import r from"clsx";import{Dialog as a}from"@headlessui/react";import l from"../Panel/Panel.js";import n from"../ButtonBar/ButtonBar.js";import s from"./Modal.module.css.js";function m(m){var i=m.children,p=m.isOpen,c=m.onClose,d=m.title,u=m.subTitle,f=m.size,h=void 0===f?"md":f,v=m.contentComponent,C=m.contentProps,N=m.buttonBarProps,P=void 0===N?{}:N,b=m.className,B=void 0===b?"":b,E=m.footer,j=t((function(){return e(e({},C||{}),{className:r(s.modalContent,(null==C?void 0:C.className)||"")})}),[C]);return p?o.createElement(a,{open:p,onClose:c,className:r(s.modal,s[h],"lds-web")},o.createElement(l,{wrapperComponent:v||"div",wrapperProps:j,className:B,headerComponent:a.Title,headerProps:{as:"header"},header:o.createElement(o.Fragment,null,o.createElement("h3",{className:"lds-h1"},d),u?o.createElement("p",{className:s.subTitle},u):null),footer:E,footerComponent:n,footerProps:e(e({},P),{as:"footer"})},i)):null}export{m as default};
@@ -0,0 +1 @@
1
+ var l={modal:"lds-modal",modalContent:"lds-modal--modal-content",subTitle:"lds-modal--sub-title",sm:"lds-modal--sm",lg:"lds-modal--lg",xl:"lds-modal--xl"};export{l as default};
@@ -0,0 +1,31 @@
1
+ import React, { Fragment, ReactNode } from "react";
2
+ declare type ExtractIntrinsicElementProps<Element extends keyof JSX.IntrinsicElements> = JSX.IntrinsicElements[Element];
3
+ declare type ExtractComponentProps<TComponentOrTProps> = (TComponentOrTProps extends React.ComponentType<infer TProps> ? TProps : TComponentOrTProps);
4
+ declare type ExtractProps<TComponentOrTProps> = TComponentOrTProps extends keyof JSX.IntrinsicElements ? ExtractIntrinsicElementProps<TComponentOrTProps> : ExtractComponentProps<TComponentOrTProps>;
5
+ export interface PanelProps<WrapperComponent extends keyof JSX.IntrinsicElements | React.ElementType = typeof Fragment, HeaderComponent extends keyof JSX.IntrinsicElements | React.ElementType = "header", ContentComponent extends keyof JSX.IntrinsicElements | React.ElementType = "div", FooterComponent extends keyof JSX.IntrinsicElements | React.ElementType = "footer"> {
6
+ header?: ReactNode;
7
+ footer?: ReactNode;
8
+ className?: string;
9
+ wrapperComponent?: WrapperComponent;
10
+ wrapperProps?: ExtractProps<WrapperComponent>;
11
+ headerComponent?: HeaderComponent;
12
+ headerProps?: ExtractProps<HeaderComponent>;
13
+ contentComponent?: ContentComponent | undefined;
14
+ contentProps?: ExtractProps<ContentComponent>;
15
+ footerComponent?: FooterComponent;
16
+ footerProps?: ExtractProps<FooterComponent>;
17
+ loading?: boolean;
18
+ }
19
+ /**
20
+ * A responsive panel component. Use `header` and `footer` props to add a header and footer to the panel.
21
+ * Set `loading` prop to `true` to show a loading indicator.
22
+ *
23
+ * Header is a HTML `header` element by default while footer is `footer` element and content a `div` element.
24
+ * To wrap elements inside and element, set `wrapperComponent` prop to a component or HTML element.
25
+ * To change the header, content and footer elements, set `headerComponent | contentComponent | footerComponent`
26
+ * props to a component or an HTML element.
27
+ *
28
+ * Usage: `import { Panel } from "@k8slens/lds"`
29
+ */
30
+ declare function Panel<WrapperComponent extends keyof JSX.IntrinsicElements | React.ElementType | typeof Fragment = typeof Fragment, HeaderComponent extends keyof JSX.IntrinsicElements | React.ElementType = "header", ContentComponent extends keyof JSX.IntrinsicElements | React.ElementType = "div", FooterComponent extends keyof JSX.IntrinsicElements | React.ElementType = "footer">({ header, footer, className, wrapperComponent, wrapperProps, headerComponent, headerProps, contentComponent, contentProps, footerComponent, footerProps, loading, children }: React.PropsWithChildren<PanelProps<WrapperComponent, HeaderComponent, ContentComponent, FooterComponent>>): JSX.Element;
31
+ export default Panel;
@@ -0,0 +1 @@
1
+ import{__assign as e}from"../_virtual/_tslib.js";import o,{Fragment as a}from"react";import r from"clsx";import n from"../LoadingIndicator/LoadingIndicator.js";import t from"./Panel.module.css.js";function l(l){var s,m,c,i=l.header,d=l.footer,p=l.className,f=l.wrapperComponent,u=l.wrapperProps,N=l.headerComponent,g=l.headerProps,h=l.contentComponent,v=l.contentProps,E=l.footerComponent,P=l.footerProps,x=l.loading,C=l.children,j=f||a,I=N||"header",w=h||"div",L=E||"footer";return o.createElement(j,e({},u||{}),i&&o.createElement(I,e({},g||{},{className:r(t.panel,t.header,p,null==g?void 0:g.className,(s={},s[t.loading]=x,s))}),i),o.createElement(w,e({},v||{},{className:r(t.panel,t.content,p,null==v?void 0:v.className,(m={},m[t.loading]=x,m))}),C,x&&o.createElement(n,{size:"xxl",className:t.loadingIndicator})),d&&o.createElement(L,e({},P||{},{className:r(t.panel,t.footer,p,null==P?void 0:P.className,(c={},c[t.loading]=x,c))}),d))}export{l as default};
@@ -0,0 +1 @@
1
+ var a={panel:"lds-panel",header:"lds-panel--header",content:"lds-panel--content",footer:"lds-panel--footer",loading:"lds-panel--loading",loadingIndicator:"lds-panel--loading-indicator"};export{a as default};
@@ -0,0 +1,5 @@
1
+ import type { ChangeEvent, HTMLProps } from "react";
2
+ export interface SwitchProps extends Omit<HTMLProps<HTMLInputElement>, "onChange"> {
3
+ onChange?: (checked: boolean, event: ChangeEvent<HTMLInputElement>) => void;
4
+ }
5
+ export declare function Switch({ children, disabled, onChange, ...props }: SwitchProps): JSX.Element;
@@ -0,0 +1 @@
1
+ import{__rest as e,__assign as t}from"../_virtual/_tslib.js";import r from"./Switch.module.css.js";import i from"react";import a from"clsx";function c(c){var l,n=c.children,o=c.disabled,d=c.onChange,s=e(c,["children","disabled","onChange"]);return i.createElement("label",{className:a(r.Switch,(l={},l[r.disabled]=o,l)),"data-testid":"switch"},n,i.createElement("input",t({type:"checkbox",role:"switch",disabled:o,onChange:function(e){return null==d?void 0:d(e.target.checked,e)}},s)))}export{c as Switch};
@@ -0,0 +1 @@
1
+ var d={Switch:"lds-switch",disabled:"lds-switch--disabled"};export{d as default};
@@ -0,0 +1 @@
1
+ var r=function(){return r=Object.assign||function(r){for(var t,e=1,n=arguments.length;e<n;e++)for(var o in t=arguments[e])Object.prototype.hasOwnProperty.call(t,o)&&(r[o]=t[o]);return r},r.apply(this,arguments)};function t(r,t){var e={};for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&t.indexOf(n)<0&&(e[n]=r[n]);if(null!=r&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(r);o<n.length;o++)t.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(r,n[o])&&(e[n[o]]=r[n[o]])}return e}export{r as __assign,t as __rest};
@@ -0,0 +1,7 @@
1
+ export { default as Button } from "./Button/Button";
2
+ export { default as ButtonBar } from "./ButtonBar/ButtonBar";
3
+ export { default as Input } from "./Input/Input";
4
+ export { default as LoadingIndicator } from "./LoadingIndicator/LoadingIndicator";
5
+ export { default as Modal } from "./Modal/Modal";
6
+ export { default as Panel } from "./Panel/Panel";
7
+ export { Switch } from "./Switch/Switch";
@@ -0,0 +1 @@
1
+ :root{--transition-base-easing-in-out:ease-in-out;--transition-base-easing-default:ease;--transition-base-duration-slow:.75s;--transition-base-duration-default:.25s;--shadow-switch-thumb-focused:0 0 0 2px var(--alias-color-brand-primary);--opacity-base-disabled:0.5;--typography-font-family-open-sans:"Open Sans",sans-serif;--typography-font-family-roboto:"Roboto","Helvetica","Arial",sans-serif;--typography-base-line-height-9xl:1;--typography-base-line-height-8xl:1;--typography-base-line-height-7xl:1;--typography-base-line-height-6xl:1;--typography-base-font-secondary:"Open Sans",sans-serif;--typography-base-font-primary:"Roboto","Helvetica","Arial",sans-serif;--spacing-p-margin-top:0rem;--spacing-h4-margin-bottom:0rem;--spacing-h3-margin-bottom:0rem;--spacing-switch-thumb-size:20px;--spacing-base-9-5:2.375rem;--spacing-base-8-5:2.125rem;--spacing-base-7-5:1.875rem;--spacing-base-6-5:1.625rem;--spacing-base-5-5:1.375rem;--spacing-base-4-5:1.125rem;--spacing-base-3-5:0.875rem;--spacing-base-2-75:0.6875rem;--spacing-base-2-5:0.625rem;--spacing-base-2-25:0.5625rem;--spacing-base-1-75:0.4375rem;--spacing-base-1-5:0.375rem;--spacing-base-1-25:0.3125rem;--spacing-base-0-75:0.1875rem;--spacing-base-0-5:0.125rem;--spacing-base-0-25:0.0625rem;--spacing-base-96:24rem;--spacing-base-80:20rem;--spacing-base-72:18rem;--spacing-base-64:16rem;--spacing-base-60:15rem;--spacing-base-56:14rem;--spacing-base-52:13rem;--spacing-base-48:12rem;--spacing-base-44:11rem;--spacing-base-40:10rem;--spacing-base-36:9rem;--spacing-base-32:8rem;--spacing-base-28:7rem;--spacing-base-24:6rem;--spacing-base-20:5rem;--spacing-base-18:4.5rem;--spacing-base-16:4rem;--spacing-base-14:3.5rem;--spacing-base-12:3rem;--spacing-base-10:2.5rem;--spacing-base-9:2.25rem;--spacing-base-8:2rem;--spacing-base-7:1.75rem;--spacing-base-6:1.5rem;--spacing-base-5:1.25rem;--spacing-base-4:1rem;--spacing-base-3:0.75rem;--spacing-base-2:0.5rem;--spacing-base-1:0.25rem;--hues-bright-green-lightness:60%;--hues-bright-green-saturation:60%;--hues-bright-green-hue:110;--hues-green-lightness:40%;--hues-green-saturation:60%;--hues-green-hue:138;--hues-orange-lightness:60%;--hues-orange-saturation:100%;--hues-orange-hue:38;--hues-red-lightness:60%;--hues-red-saturation:100%;--hues-red-hue:359;--hues-blue-lightness:52%;--hues-blue-saturation:60%;--hues-blue-hue:206deg;--color-base-translucent-light-50:hsla(0,0%,100%,.5);--color-base-translucent-light-25:hsla(0,0%,100%,.25);--color-base-translucent-dark-05:rgba(0,0,0,.05);--color-base-translucent-dark-60:rgba(0,0,0,.4);--color-base-translucent-dark-40:rgba(0,0,0,.4);--color-base-translucent-dark-25:rgba(0,0,0,.25);--color-base-translucent-dark-10:rgba(0,0,0,.1);--color-base-black:#000;--color-base-white:#fff;--size-input-height:var(--spacing-base-10);--size-button-height:var(--spacing-base-10);--shadow-switch-thumb-disabled:inset 0 0 0 2px var(--color-base-translucent-dark-40);--shadow-base-inner:inset 0 2px 4px 0 var(--color-base-translucent-dark-05);--shadow-base-2xl:0 25px 50px -12px var(--color-base-translucent-dark-25);--shadow-base-xl:0 20px 25px -5px var(--color-base-translucent-dark-10),0 8px 10px -6px var(--color-base-translucent-dark-10);--shadow-base-lg:0 10px 15px -3px var(--color-base-translucent-dark-10),0 4px 6px -4px var(--color-base-translucent-dark-10);--shadow-base-md:0 4px 6px -1px var(--color-base-translucent-dark-10),0 2px 4px -2px var(--color-base-translucent-dark-10);--shadow-base-default:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px var(--color-base-translucent-dark-10);--shadow-base-sm:0 0 0 2px var(--color-base-translucent-dark-05);--alias-color-background-highlight-25:var(--color-base-translucent-light-25);--alias-color-background-overlay-popup:var(--color-base-translucent-dark-60);--alias-color-background-overlay-blocked:var(--color-base-translucent-dark-40);--alias-color-background-elevation-negative:var(--color-base-translucent-dark-40);--alias-color-border-vivid:var(--color-base-white);--alias-color-text-accent:var(--color-base-white);--typography-font-header:var(--typography-font-family-open-sans);--typography-font-main:var(--typography-font-family-roboto);--typography-base-line-height-5xl:var(--spacing-base-10);--typography-base-line-height-4xl:var(--spacing-base-10);--typography-base-line-height-3xl:var(--spacing-base-10);--typography-base-line-height-2xl:var(--spacing-base-10);--typography-base-line-height-xl:var(--spacing-base-7);--typography-base-line-height-lg:var(--spacing-base-6);--typography-base-line-height-base:var(--spacing-base-5);--typography-base-line-height-sm:var(--spacing-base-4);--typography-base-line-height-xs:var(--spacing-base-4);--typography-base-size-9xl:var(--spacing-base-24);--typography-base-size-8xl:var(--spacing-base-18);--typography-base-size-7xl:var(--spacing-base-16);--typography-base-size-6xl:var(--spacing-base-12);--typography-base-size-5xl:var(--spacing-base-9);--typography-base-size-4xl:var(--spacing-base-7-5);--typography-base-size-3xl:var(--spacing-base-8);--typography-base-size-2xl:var(--spacing-base-6);--typography-base-size-xl:var(--spacing-base-5);--typography-base-size-lg:var(--spacing-base-4);--typography-base-size-base:var(--spacing-base-3-5);--typography-base-size-sm:var(--spacing-base-3);--typography-base-size-xs:var(--spacing-base-2-75);--spacing-p-margin-bottom:var(--spacing-base-5);--spacing-h4-margin-top:var(--spacing-base-4);--spacing-h3-margin-top:var(--spacing-base-4);--spacing-h2-margin-bottom:var(--spacing-base-3);--spacing-h2-margin-top:var(--spacing-base-7);--spacing-h1-margin-bottom:var(--spacing-base-3-5);--spacing-h1-margin-top:var(--spacing-base-6-5);--spacing-input-icon-margin-y:var(--spacing-base-2-5);--spacing-input-icon-margin-x:var(--spacing-base-2-5);--spacing-input-padding-inline-end:var(--spacing-base-10);--spacing-button-icon-size:var(--spacing-base-5);--spacing-base-xl2:var(--spacing-base-8);--spacing-base-xl:var(--spacing-base-6);--spacing-base-lg:var(--spacing-base-4);--spacing-base-md:var(--spacing-base-3);--spacing-base-sm:var(--spacing-base-2);--spacing-base-xs:var(--spacing-base-1);--hues-blue-gray-hue:var(--hues-blue-hue);--color-background-switch-thumb:var(--color-base-white);--color-base-bright-green-600:hsl(var(--hues-bright-green-hue),var(--hues-bright-green-saturation),var(--hues-bright-green-lightness));--color-base-green-400:hsl(var(--hues-green-hue),var(--hues-green-saturation),var(--hues-green-lightness));--color-base-orange-600:hsl(var(--hues-orange-hue),var(--hues-orange-saturation),var(--hues-orange-lightness));--color-base-orange-400:hsl(var(--hues-orange-hue),var(--hues-orange-saturation),40%);--color-base-red-600:hsl(var(--hues-red-hue),var(--hues-red-saturation),var(--hues-red-lightness));--color-base-blue-600:hsl(var(--hues-blue-hue),var(--hues-blue-saturation),60%);--color-base-blue-500:hsl(var(--hues-blue-hue),var(--hues-blue-saturation),var(--hues-blue-lightness));--alias-color-info:var(--color-base-blue-600);--alias-color-caution-dark:var(--color-base-orange-400);--spacing-input-padding-inline-start:var(--spacing-base-md);--spacing-button-icon-margin-inline-end:var(--spacing-base-md);--spacing-button-padding-y:var(--spacing-base-sm);--spacing-button-padding-x:var(--spacing-base-lg);--color-font-input-focus:var(--alias-color-text-accent);--color-background-switch-highlight:var(--alias-color-background-highlight-25);--color-base-bright-green-default:var(--color-base-bright-green-600);--color-base-green-default:var(--color-base-green-400);--color-base-orange-default:var(--color-base-orange-600);--color-base-red-default:var(--color-base-red-600);--color-base-blue-gray-980:hsl(var(--hues-blue-gray-hue),15%,98%);--color-base-blue-gray-900:hsl(var(--hues-blue-gray-hue),15%,90%);--color-base-blue-gray-850:hsl(var(--hues-blue-gray-hue),15%,85%);--color-base-blue-gray-800:hsl(var(--hues-blue-gray-hue),10%,80%);--color-base-blue-gray-750:hsl(var(--hues-blue-gray-hue),5%,75%);--color-base-blue-gray-650:hsl(var(--hues-blue-gray-hue),5%,65%);--color-base-blue-gray-550:hsl(var(--hues-blue-gray-hue),6%,55%);--color-base-blue-gray-450:hsl(var(--hues-blue-gray-hue),6%,45%);--color-base-blue-gray-350:hsl(var(--hues-blue-gray-hue),6%,35%);--color-base-blue-gray-230:hsl(var(--hues-blue-gray-hue),8%,23%);--color-base-blue-gray-200:hsl(var(--hues-blue-gray-hue),9%,20%);--color-base-blue-gray-160:hsl(var(--hues-blue-gray-hue),10%,16%);--color-base-blue-gray-130:hsl(var(--hues-blue-gray-hue),7%,13%);--color-base-blue-default:var(--color-base-blue-500);--alias-color-background-quinary:var(--color-base-blue-gray-350);--alias-color-background-quarternary:var(--color-base-blue-gray-230);--alias-color-background-tertiary:var(--color-base-blue-gray-200);--alias-color-background-secondary:var(--color-base-blue-gray-160);--alias-color-background-base:var(--color-base-blue-gray-130);--alias-color-ok:var(--color-base-green-default);--alias-color-caution:var(--color-base-orange-default);--alias-color-danger:var(--color-base-red-default);--alias-color-border-focus:var(--color-base-blue-default);--alias-color-border-strong:var(--color-base-blue-gray-550);--alias-color-border-default:var(--color-base-blue-gray-350);--alias-color-border-weak:var(--color-base-blue-gray-230);--alias-color-text-quarternary:var(--color-base-blue-gray-850);--alias-color-text-tertiary:var(--color-base-blue-gray-650);--alias-color-text-secondary:var(--color-base-blue-gray-350);--alias-color-brand-primary:var(--color-base-blue-default);--color-background-switch-track-active:var(--color-base-bright-green-default);--color-background-button-caution-base:var(--alias-color-caution-dark);--color-base-blue-gray-default:var(--color-base-blue-gray-450);--alias-color-text-primary:var(--color-base-blue-gray-default);--color-font-input-placeholder:var(--alias-color-text-secondary);--color-font-input-default:var(--alias-color-text-tertiary);--color-font-button-danger-discreet:var(--alias-color-danger);--color-font-button-caution-discreet:var(--alias-color-caution);--color-font-button-ok-discreet:var(--alias-color-ok);--color-font-button-secondary-discreet:var(--alias-color-text-tertiary);--color-font-button-secondary-base:var(--alias-color-text-quarternary);--color-font-button-primary-discreet:var(--alias-color-brand-primary);--color-font-button-primary-base:var(--alias-color-text-quarternary);--color-font-link:var(--alias-color-brand-primary);--color-border-input-invalid:var(--alias-color-danger);--color-border-input-focus:var(--alias-color-border-focus);--color-border-input-default:var(--alias-color-border-weak);--color-border-button-danger-discreet:var(--alias-color-danger);--color-border-button-caution-discreet:var(--alias-color-caution);--color-border-button-ok-discreet:var(--alias-color-ok);--color-border-button-secondary-discreet:var(--alias-color-border-strong);--color-border-button-primary-discreet:var(--alias-color-brand-primary);--color-background-switch-track-inactive:var(--alias-color-background-quinary);--color-background-input-focus:var(--alias-color-background-quarternary);--color-background-input-default:var(--alias-color-background-base);--color-background-button-danger-base:var(--alias-color-danger);--color-background-button-ok-base:var(--alias-color-ok);--color-background-button-secondary-base:var(--alias-color-background-quarternary);--color-background-button-primary-base:var(--alias-color-brand-primary);--color-background-block-footer:var(--alias-color-background-secondary);--color-background-block-content:var(--alias-color-background-tertiary);--color-background-block-header:var(--alias-color-background-quarternary)}html.light{--alias-color-brand-primary:#3b8ece;--alias-color-text-primary:#6c747a;--alias-color-text-secondary:#bcc0c2;--alias-color-text-tertiary:#363b3f;--alias-color-text-quarternary:#f9fafb;--alias-color-text-accent:#000;--alias-color-border-weak:#d3dade;--alias-color-border-default:#a1a6aa;--alias-color-border-strong:#6c747a;--alias-color-border-vivid:#000;--alias-color-border-focus:#3b8ece;--alias-color-danger:#ff3336;--alias-color-caution:#ffb433;--alias-color-caution-dark:#cc8100;--alias-color-ok:#29a34e;--alias-color-info:#5ca1d6;--alias-color-background-base:#f9fafb;--alias-color-background-secondary:#c7cdd1;--alias-color-background-tertiary:#e2e6e9;--alias-color-background-quarternary:#d3dade;--alias-color-background-quinary:#a1a6aa;--alias-color-background-elevation-negative:rgba(0,0,0,.1);--alias-color-background-overlay-blocked:hsla(0,0%,100%,.5);--alias-color-background-overlay-popup:rgba(0,0,0,.25);--alias-color-background-highlight-25:rgba(0,0,0,.05)}.lds-icon{display:inline-block}.lds-icon--svg svg{height:100%;max-width:inherit;min-width:inherit;width:100%}.lds-icon--svg.sm{height:1.125rem;width:1.125rem}.lds-icon--svg,.lds-icon--svg.md{height:var(--spacing-base-5);width:var(--spacing-base-5)}.lds-icon--svg.lg{height:var(--spacing-base-6);width:var(--spacing-base-6)}.lds-icon--svg.xl{height:var(--spacing-base-7);width:var(--spacing-base-7)}.lds-icon--svg.xxl{height:var(--spacing-base-8);width:var(--spacing-base-8)}.lds-icon--svg>svg{fill:var(--color-font-base)}.lds-icon--svg.black>svg{fill:var(--color-base-black)}.lds-icon--svg.on-dark>svg{fill:var(--color-base-white)}.lds-icon--svg.primary>svg{fill:var(--color-base-blue-default)}.lds-icon--svg.ok>svg{fill:var(--color-background-button-ok-base)}.lds-icon--svg.info>svg{fill:var(--color-background-button-info-base)}.lds-icon--svg.caution>svg{fill:var(--color-background-button-caution-base)}.lds-icon--svg.danger>svg{fill:var(--color-background-button-danger-base)}.lds-only-aria{clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute!important;width:1px}body{font-family:var(--typography-base-font-primary)}.lds-h1,.lds-web .lds-h1:is(h1,h2,h3,h4,h5,h6),.lds-web h2{color:var(--alias-color-text-accent);font-size:1.875rem;line-height:2.25rem}.lds-web .lds-h1:is(h1,h2,h3,h4,h5,h6),.lds-web h2{margin-bottom:var(--spacing-h1-margin-bottom);margin-top:var(--spacing-h1-margin-top)}.lds-h2,.lds-web .lds-h2:is(h1,h2,h3,h4,h5,h6),.lds-web h3{color:var(--alias-color-text-accent);font-size:1.5rem;line-height:2rem}.lds-web .lds-h2:is(h1,h2,h3,h4,h5,h6),.lds-web h3{margin-bottom:var(--spacing-h2-margin-bottom);margin-top:var(--spacing-h2-margin-top)}.lds-h3,.lds-web .lds-h3:is(h1,h2,h3,h4,h5,h6),.lds-web h4{color:var(--alias-color-text-secondary);font-size:1rem;font-weight:700;line-height:1.5rem;text-transform:uppercase}.lds-web .lds-h3:is(h1,h2,h3,h4,h5,h6),.lds-web h4{margin-bottom:var(--spacing-h3-margin-bottom);margin-top:var(--spacing-h3-margin-top)}.lds-h4,.lds-web .lds-h4:is(h1,h2,h3,h4,h5,h6),.lds-web h5{color:var(--alias-color-text-accent);font-size:1rem;font-weight:700;line-height:1.5rem}.lds-web .lds-h4:is(h1,h2,h3,h4,h5,h6),.lds-web h5{margin-bottom:var(--spacing-h4-margin-bottom);margin-top:var(--spacing-h4-margin-top)}.lds-web{font-size:1rem;line-height:1.5rem}.lds-web p{margin-bottom:var(--spacing-p-margin-bottom);margin-top:var(--spacing-p-margin-top)}.lds-web code{background:var(--alias-color-background-elevation-negative);display:inline-block;font-size:.75rem;line-height:1rem;line-height:1;padding:var(--spacing-base-0-5) var(--spacing-base-1-5)}.lds-web code,.lds-web dfn{color:var(--alias-color-text-tertiary)}.lds-web dfn{font-style:normal}.lds-web ul{list-style-type:disc}.lds-web a{color:var(--alias-color-text-accent);text-decoration:underline}.lds-web a.primary{color:var(--alias-color-brand-primary);text-decoration:underline}a.lds-button{display:inline-block;text-align:center;-webkit-text-decoration-line:none;text-decoration-line:none}.lds-button{background-color:var(--color-background-button-secondary-base);border-color:transparent;border-radius:.25rem;border-width:1px;color:var(--color-font-button-secondary-base);font-family:var(--typography-font-main);font-size:1rem;height:var(--size-button-height);line-height:1.5rem;padding:var(--spacing-button-padding-y) var(--spacing-button-padding-x);transition:background-color var(--transition-base-duration-default) var(--transition-base-easing-default)}.lds-button--all-caps{text-transform:uppercase}.lds-button>.lds-button--icon{height:1em;margin-left:0;margin-right:var(--spacing-button-icon-margin-inline-end);overflow:visible;width:var(--spacing-button-icon-size)}.lds-button>.lds-button--icon>svg{fill:var(--color-font-button-secondary-base);height:var(--spacing-button-icon-size);width:var(--spacing-button-icon-size)}.lds-button>.lds-button--icon-r{margin-left:var(--spacing-button-icon-margin-inline-end);margin-right:0}.lds-button--discreet{background-color:transparent;border-color:var(--color-border-button-secondary-discreet);border-width:1px;color:var(--color-font-button-secondary-discreet)}.lds-button--discreet>.lds-button--icon>svg{fill:var(--color-font-button-secondary-discreet)}.lds-button.primary{background-color:var(--color-background-button-primary-base);color:var(--color-font-button-primary-base)}.lds-button.primary>.lds-button--icon>svg{fill:var(--color-font-button-primary-base)}.lds-button--discreet.primary{background-color:transparent;border-color:var(--color-border-button-primary-discreet);border-width:1px;color:var(--color-font-button-primary-discreet)}.lds-button--discreet.primary>.lds-button--icon>svg{fill:var(--color-font-button-primary-discreet)}.lds-button.ok{background-color:var(--color-background-button-ok-base)}.lds-button--discreet.ok{background-color:transparent;border-color:var(--color-border-button-ok-discreet);border-width:1px}.lds-button--discreet.ok,.lds-button--discreet.ok>.lds-button--icon{color:var(--color-font-button-ok-discreet)}.lds-button--discreet.ok>.lds-button--icon>svg{fill:var(--color-font-button-ok-discreet)}.lds-button.caution{background-color:var(--color-background-button-caution-base)}.lds-button--discreet.caution{background-color:transparent;border-color:var(--color-border-button-caution-discreet);border-width:1px}.lds-button--discreet.caution,.lds-button--discreet.caution>.lds-button--icon{color:var(--color-font-button-caution-discreet)}.lds-button--discreet.caution>.lds-button--icon>svg{fill:var(--color-font-button-caution-discreet)}.lds-button:is(.danger,[type=reset]){background-color:var(--color-background-button-danger-base)}.lds-button--discreet:is(.danger,[type=reset]){background-color:transparent;border-color:var(--color-border-button-danger-discreet);border-width:1px;color:var(--color-font-button-danger-discreet)}.lds-button--discreet:is(.danger,[type=reset])>.lds-button--icon{color:var(--color-font-button-danger-discreet)}.lds-button--discreet:is(.danger,[type=reset])>.lds-button--icon>svg{fill:var(--color-font-button-danger-discreet)}.lds-button--loading{cursor:default;position:relative}.lds-button--loading>.lds-button--spinner{left:50%;margin-left:-.625rem;margin-top:-.625rem;position:absolute;top:50%}.lds-button--loading>.lds-button--icon:not(.lds-button--spinner),.lds-button--loading>.lds-button--label{opacity:var(--opacity-base-disabled)}a.lds-button.disabled{pointer-events:none}.lds-button.disabled,.lds-button[disabled]{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);cursor:default;opacity:var(--opacity-base-disabled)}.lds-button-bar{display:flex;flex-direction:column;margin-top:var(--spacing-base-2);padding-bottom:var(--spacing-base-2);padding-top:var(--spacing-base-2)}@media (min-width:640px){.lds-button-bar{flex-direction:row;flex-wrap:wrap;justify-content:space-between}}.lds-button-bar>a,.lds-button-bar>button{margin:var(--spacing-base-2) var(--spacing-base-1)}.lds-button-bar.lds-button-bar--centered{display:flex;justify-content:center}.lds-button-bar.lds-button-bar--centered>a,.lds-button-bar.lds-button-bar--centered>button{margin-left:var(--spacing-base-4);margin-right:var(--spacing-base-4)}.lds-button-bar.lds-button-bar--stacked{flex-direction:column;flex-wrap:nowrap}.lds-button-bar.lds-button-bar--stacked a,.lds-button-bar.lds-button-bar--stacked>button{margin-bottom:var(--spacing-base-2);margin-left:0;margin-right:0;margin-top:var(--spacing-base-2)}.lds-button-bar.lds-button-bar--b-grid{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));margin-bottom:0;margin-top:0}@media (min-width:640px){.lds-button-bar.lds-button-bar--b-grid{-moz-column-gap:var(--spacing-base-4);column-gap:var(--spacing-base-4);padding-bottom:0;padding-top:0}}.lds-button-bar.lds-button-bar--b-grid>a,.lds-button-bar.lds-button-bar--b-grid>button{margin-left:0;margin-right:0}@media (min-width:640px){.lds-button-bar.lds-button-bar--grid---2{grid-template-columns:repeat(2,minmax(0,1fr))}.lds-button-bar.lds-button-bar--grid---3{grid-template-columns:repeat(3,minmax(0,1fr))}.lds-button-bar.lds-button-bar--grid---4{grid-template-columns:repeat(4,minmax(0,1fr))}.lds-button-bar.lds-button-bar--grid---5{grid-template-columns:repeat(5,minmax(0,1fr))}}.lds-input--wrapper{position:relative}.lds-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:.25rem;border-width:1px;width:100%}.lds-input:focus{outline:2px solid transparent;outline-offset:2px;z-index:10}.lds-input{-webkit-text-fill-color:var(--color-font-input-default);background-color:var(--color-background-input-default);border-color:var(--color-border-input-default);box-shadow:0 0 0 9999px var(--color-background-input-default) inset;caret-color:var(--alias-color-border-vivid);color:var(--color-font-input-default);height:var(--size-input-height);padding-left:var(--spacing-input-padding-inline-start);padding-right:var(--spacing-input-padding-inline-end);transition:border-color var(--transition-base-duration-default) var(--transition-base-easing-default)}.lds-input:disabled{opacity:var(--opacity-base-disabled)}.lds-input:focus{-webkit-text-fill-color:var(--color-font-input-focus);background-color:var(--color-background-input-focus);border-color:var(--color-border-input-focus);color:var(--color-font-input-focus)}.lds-input[aria-invalid]{border-color:var(--color-border-input-invalid)}.lds-input::-moz-placeholder{opacity:var(--opacity-base-disabled)}.lds-input::placeholder{opacity:var(--opacity-base-disabled)}.lds-input+.lds-input--icon{position:absolute;right:var(--spacing-input-icon-margin-x);top:var(--spacing-input-icon-margin-y);z-index:50}.lds-input+.lds-input--icon>svg{fill:var(--color-font-input-default)}.lds-input:disabled+.lds-input--icon>svg{opacity:var(--opacity-base-disabled)}.lds-input[aria-invalid]+.lds-input--icon>svg{fill:var(--color-border-input-invalid)}.lds-loading-indicator{align-items:center;bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0}.lds-loading-indicator>span{display:block;left:-50%;top:-50%}.lds-panel{font-size:.875rem;line-height:1.25rem;width:100%}.lds-panel--content,.lds-panel--footer,.lds-panel--header{margin:0;padding:var(--spacing-base-4)}.lds-panel--header{background-color:var(--color-background-block-header);text-align:center}.lds-panel--content{background-color:var(--color-background-block-content)}.lds-panel--footer{background-color:var(--color-background-block-footer)}@media (min-width:640px){.lds-panel--header{border-top-left-radius:.75rem;border-top-right-radius:.75rem;margin-top:var(--spacing-base-6);padding:var(--spacing-base-8) var(--spacing-base-6)}.lds-panel--content{padding:var(--spacing-base-6)}.lds-panel--footer{border-bottom-left-radius:.75rem;border-bottom-right-radius:.75rem;margin-bottom:var(--spacing-base-6);padding-left:var(--spacing-base-6);padding-right:var(--spacing-base-6)}}.lds-panel--loading{position:relative}.lds-panel--footer,.lds-panel--header{opacity:1;transition:opacity var(--transition-base-duration-slow) var(--transition-base-easing-in-out)}.lds-panel--footer.lds-panel--loading,.lds-panel--header.lds-panel--loading{opacity:var(--opacity-base-disabled)}.lds-panel--loading-indicator{align-items:center;background-color:var(--alias-color-background-overlay-blocked);bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0}.lds-panel--loading-indicator svg{fill:var(--alias-color-text-tertiary)}.lds-panel--loading{pointer-events:none}.lds-panel--header:is(h2,h3,h4,h5,h6){margin-bottom:0}.lds-panel--footer.lds-button-bar{margin-top:0;padding-bottom:var(--spacing-base-2);padding-top:var(--spacing-base-2)}.lds-modal{align-items:center;background:var(--alias-color-background-overlay-popup);bottom:0;display:flex;justify-content:center;left:0;overflow:hidden;position:fixed;right:0;top:0;z-index:50}.lds-modal--modal-content{flex-grow:1;max-width:28rem;width:100%}@media (min-width:640px){.lds-modal--modal-content{border-radius:.75rem}}.lds-modal--modal-content{box-shadow:var(--shadow-base-xl)}.lds-modal--modal-content>header{margin:0;padding-bottom:var(--spacing-base-4);padding-top:var(--spacing-base-4)}@media (min-width:640px){.lds-modal--modal-content>header{margin:0}}.lds-modal--modal-content>header h3.lds-h1{margin-bottom:0;margin-top:0}.lds-modal--modal-content>header .lds-modal--sub-title{color:var(--alias-color-text-tertiary);margin-bottom:0;margin-top:var(--spacing-base-2)}.lds-modal--modal-content>footer{margin:0}@media (min-width:640px){.lds-modal--modal-content>footer{margin:0}}.lds-modal.lds-modal--sm .lds-modal--modal-content{max-width:20rem}.lds-modal.lds-modal--lg .lds-modal--modal-content{max-width:48rem}.lds-modal.lds-modal--xl .lds-modal--modal-content{max-width:64rem}.lds-switch{--thumb-size:var(--spacing-switch-thumb-size);--thumb-color:var(--color-background-switch-thumb);--thumb-color-highlight:var(--color-background-switch-thumb-highlight);--track-size:calc(var(--thumb-size)*2);--track-padding:2px;--track-color-inactive:var(--color-background-switch-track-inactive);--track-color-active:var(--color-background-switch-track-active);--thumb-position:0%;--thumb-transition-duration:var(--transition-base-duration-default);--hover-highlight-size:0;align-items:center;color:var(--alias-color-text-accent);cursor:pointer;display:flex;font-weight:500;gap:2ch;justify-content:space-between;-webkit-user-select:none;-moz-user-select:none;user-select:none}.lds-switch>input{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--track-color-inactive);block-size:var(--thumb-size);border:none;border-radius:var(--track-size);box-sizing:content-box;display:grid;flex-shrink:0;grid:[track] 1fr/[track] 1fr;inline-size:var(--track-size);outline-offset:5px;padding:var(--track-padding);pointer-events:none;transition:background-color var(--transition-base-duration-default) var(--transition-base-easing-default)}.lds-switch>input:before{background:var(--thumb-color);block-size:var(--thumb-size);border-radius:50%;box-shadow:0 0 0 var(--hover-highlight-size) var(--thumb-color-highlight);content:"";cursor:pointer;grid-area:track;inline-size:var(--thumb-size);pointer-events:auto;transform:translateX(var(--thumb-position));transition:transform var(--thumb-transition-duration) var(--transition-base-easing-default),box-shadow var(--transition-base-duration-default) var(--transition-base-easing-default)}.lds-switch>input:not(:disabled):hover:before{--hover-highlight-size:.3rem}.lds-switch>input:checked{--thumb-position:100%;background:var(--track-color-active)}.lds-switch>input:disabled{--track-color-inactive:var(--color-background-switch-track-inactive);--thumb-color:transparent}.lds-switch>input:disabled:before{box-shadow:var(--shadow-switch-thumb-disabled);cursor:not-allowed}.lds-switch>input:focus-visible{box-shadow:var(--shadow-switch-thumb-focused)}.lds-switch--disabled{cursor:not-allowed}
@@ -0,0 +1,2 @@
1
+ import "./index.css";
2
+ export * from "./components";
@@ -0,0 +1,2 @@
1
+ import "./index.css";
2
+ export * from "./components";
@@ -0,0 +1 @@
1
+ export{default as Button}from"./Button/Button.js";export{default as ButtonBar}from"./ButtonBar/ButtonBar.js";export{default as Input}from"./Input/Input.js";export{default as LoadingIndicator}from"./LoadingIndicator/LoadingIndicator.js";export{default as Modal}from"./Modal/Modal.js";export{default as Panel}from"./Panel/Panel.js";export{Switch}from"./Switch/Switch.js";
@@ -0,0 +1 @@
1
+ export{default as Button}from"./Button/Button.js";export{default as ButtonBar}from"./ButtonBar/ButtonBar.js";export{default as Input}from"./Input/Input.js";export{default as LoadingIndicator}from"./LoadingIndicator/LoadingIndicator.js";export{default as Modal}from"./Modal/Modal.js";export{default as Panel}from"./Panel/Panel.js";export{Switch}from"./Switch/Switch.js";
@@ -0,0 +1 @@
1
+ :root{--transition-base-easing-in-out:ease-in-out;--transition-base-easing-default:ease;--transition-base-duration-slow:.75s;--transition-base-duration-default:.25s;--shadow-switch-thumb-focused:0 0 0 2px var(--alias-color-brand-primary);--opacity-base-disabled:0.5;--typography-font-family-open-sans:"Open Sans",sans-serif;--typography-font-family-roboto:"Roboto","Helvetica","Arial",sans-serif;--typography-base-line-height-9xl:1;--typography-base-line-height-8xl:1;--typography-base-line-height-7xl:1;--typography-base-line-height-6xl:1;--typography-base-font-secondary:"Open Sans",sans-serif;--typography-base-font-primary:"Roboto","Helvetica","Arial",sans-serif;--spacing-p-margin-top:0rem;--spacing-h4-margin-bottom:0rem;--spacing-h3-margin-bottom:0rem;--spacing-switch-thumb-size:20px;--spacing-base-9-5:2.375rem;--spacing-base-8-5:2.125rem;--spacing-base-7-5:1.875rem;--spacing-base-6-5:1.625rem;--spacing-base-5-5:1.375rem;--spacing-base-4-5:1.125rem;--spacing-base-3-5:0.875rem;--spacing-base-2-75:0.6875rem;--spacing-base-2-5:0.625rem;--spacing-base-2-25:0.5625rem;--spacing-base-1-75:0.4375rem;--spacing-base-1-5:0.375rem;--spacing-base-1-25:0.3125rem;--spacing-base-0-75:0.1875rem;--spacing-base-0-5:0.125rem;--spacing-base-0-25:0.0625rem;--spacing-base-96:24rem;--spacing-base-80:20rem;--spacing-base-72:18rem;--spacing-base-64:16rem;--spacing-base-60:15rem;--spacing-base-56:14rem;--spacing-base-52:13rem;--spacing-base-48:12rem;--spacing-base-44:11rem;--spacing-base-40:10rem;--spacing-base-36:9rem;--spacing-base-32:8rem;--spacing-base-28:7rem;--spacing-base-24:6rem;--spacing-base-20:5rem;--spacing-base-18:4.5rem;--spacing-base-16:4rem;--spacing-base-14:3.5rem;--spacing-base-12:3rem;--spacing-base-10:2.5rem;--spacing-base-9:2.25rem;--spacing-base-8:2rem;--spacing-base-7:1.75rem;--spacing-base-6:1.5rem;--spacing-base-5:1.25rem;--spacing-base-4:1rem;--spacing-base-3:0.75rem;--spacing-base-2:0.5rem;--spacing-base-1:0.25rem;--hues-bright-green-lightness:60%;--hues-bright-green-saturation:60%;--hues-bright-green-hue:110;--hues-green-lightness:40%;--hues-green-saturation:60%;--hues-green-hue:138;--hues-orange-lightness:60%;--hues-orange-saturation:100%;--hues-orange-hue:38;--hues-red-lightness:60%;--hues-red-saturation:100%;--hues-red-hue:359;--hues-blue-lightness:52%;--hues-blue-saturation:60%;--hues-blue-hue:206deg;--color-base-translucent-light-50:hsla(0,0%,100%,.5);--color-base-translucent-light-25:hsla(0,0%,100%,.25);--color-base-translucent-dark-05:rgba(0,0,0,.05);--color-base-translucent-dark-60:rgba(0,0,0,.4);--color-base-translucent-dark-40:rgba(0,0,0,.4);--color-base-translucent-dark-25:rgba(0,0,0,.25);--color-base-translucent-dark-10:rgba(0,0,0,.1);--color-base-black:#000;--color-base-white:#fff;--size-input-height:var(--spacing-base-10);--size-button-height:var(--spacing-base-10);--shadow-switch-thumb-disabled:inset 0 0 0 2px var(--color-base-translucent-dark-40);--shadow-base-inner:inset 0 2px 4px 0 var(--color-base-translucent-dark-05);--shadow-base-2xl:0 25px 50px -12px var(--color-base-translucent-dark-25);--shadow-base-xl:0 20px 25px -5px var(--color-base-translucent-dark-10),0 8px 10px -6px var(--color-base-translucent-dark-10);--shadow-base-lg:0 10px 15px -3px var(--color-base-translucent-dark-10),0 4px 6px -4px var(--color-base-translucent-dark-10);--shadow-base-md:0 4px 6px -1px var(--color-base-translucent-dark-10),0 2px 4px -2px var(--color-base-translucent-dark-10);--shadow-base-default:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px var(--color-base-translucent-dark-10);--shadow-base-sm:0 0 0 2px var(--color-base-translucent-dark-05);--alias-color-background-highlight-25:var(--color-base-translucent-light-25);--alias-color-background-overlay-popup:var(--color-base-translucent-dark-60);--alias-color-background-overlay-blocked:var(--color-base-translucent-dark-40);--alias-color-background-elevation-negative:var(--color-base-translucent-dark-40);--alias-color-border-vivid:var(--color-base-white);--alias-color-text-accent:var(--color-base-white);--typography-font-header:var(--typography-font-family-open-sans);--typography-font-main:var(--typography-font-family-roboto);--typography-base-line-height-5xl:var(--spacing-base-10);--typography-base-line-height-4xl:var(--spacing-base-10);--typography-base-line-height-3xl:var(--spacing-base-10);--typography-base-line-height-2xl:var(--spacing-base-10);--typography-base-line-height-xl:var(--spacing-base-7);--typography-base-line-height-lg:var(--spacing-base-6);--typography-base-line-height-base:var(--spacing-base-5);--typography-base-line-height-sm:var(--spacing-base-4);--typography-base-line-height-xs:var(--spacing-base-4);--typography-base-size-9xl:var(--spacing-base-24);--typography-base-size-8xl:var(--spacing-base-18);--typography-base-size-7xl:var(--spacing-base-16);--typography-base-size-6xl:var(--spacing-base-12);--typography-base-size-5xl:var(--spacing-base-9);--typography-base-size-4xl:var(--spacing-base-7-5);--typography-base-size-3xl:var(--spacing-base-8);--typography-base-size-2xl:var(--spacing-base-6);--typography-base-size-xl:var(--spacing-base-5);--typography-base-size-lg:var(--spacing-base-4);--typography-base-size-base:var(--spacing-base-3-5);--typography-base-size-sm:var(--spacing-base-3);--typography-base-size-xs:var(--spacing-base-2-75);--spacing-p-margin-bottom:var(--spacing-base-5);--spacing-h4-margin-top:var(--spacing-base-4);--spacing-h3-margin-top:var(--spacing-base-4);--spacing-h2-margin-bottom:var(--spacing-base-3);--spacing-h2-margin-top:var(--spacing-base-7);--spacing-h1-margin-bottom:var(--spacing-base-3-5);--spacing-h1-margin-top:var(--spacing-base-6-5);--spacing-input-icon-margin-y:var(--spacing-base-2-5);--spacing-input-icon-margin-x:var(--spacing-base-2-5);--spacing-input-padding-inline-end:var(--spacing-base-10);--spacing-button-icon-size:var(--spacing-base-5);--spacing-base-xl2:var(--spacing-base-8);--spacing-base-xl:var(--spacing-base-6);--spacing-base-lg:var(--spacing-base-4);--spacing-base-md:var(--spacing-base-3);--spacing-base-sm:var(--spacing-base-2);--spacing-base-xs:var(--spacing-base-1);--hues-blue-gray-hue:var(--hues-blue-hue);--color-background-switch-thumb:var(--color-base-white);--color-base-bright-green-600:hsl(var(--hues-bright-green-hue),var(--hues-bright-green-saturation),var(--hues-bright-green-lightness));--color-base-green-400:hsl(var(--hues-green-hue),var(--hues-green-saturation),var(--hues-green-lightness));--color-base-orange-600:hsl(var(--hues-orange-hue),var(--hues-orange-saturation),var(--hues-orange-lightness));--color-base-orange-400:hsl(var(--hues-orange-hue),var(--hues-orange-saturation),40%);--color-base-red-600:hsl(var(--hues-red-hue),var(--hues-red-saturation),var(--hues-red-lightness));--color-base-blue-600:hsl(var(--hues-blue-hue),var(--hues-blue-saturation),60%);--color-base-blue-500:hsl(var(--hues-blue-hue),var(--hues-blue-saturation),var(--hues-blue-lightness));--alias-color-info:var(--color-base-blue-600);--alias-color-caution-dark:var(--color-base-orange-400);--spacing-input-padding-inline-start:var(--spacing-base-md);--spacing-button-icon-margin-inline-end:var(--spacing-base-md);--spacing-button-padding-y:var(--spacing-base-sm);--spacing-button-padding-x:var(--spacing-base-lg);--color-font-input-focus:var(--alias-color-text-accent);--color-background-switch-highlight:var(--alias-color-background-highlight-25);--color-base-bright-green-default:var(--color-base-bright-green-600);--color-base-green-default:var(--color-base-green-400);--color-base-orange-default:var(--color-base-orange-600);--color-base-red-default:var(--color-base-red-600);--color-base-blue-gray-980:hsl(var(--hues-blue-gray-hue),15%,98%);--color-base-blue-gray-900:hsl(var(--hues-blue-gray-hue),15%,90%);--color-base-blue-gray-850:hsl(var(--hues-blue-gray-hue),15%,85%);--color-base-blue-gray-800:hsl(var(--hues-blue-gray-hue),10%,80%);--color-base-blue-gray-750:hsl(var(--hues-blue-gray-hue),5%,75%);--color-base-blue-gray-650:hsl(var(--hues-blue-gray-hue),5%,65%);--color-base-blue-gray-550:hsl(var(--hues-blue-gray-hue),6%,55%);--color-base-blue-gray-450:hsl(var(--hues-blue-gray-hue),6%,45%);--color-base-blue-gray-350:hsl(var(--hues-blue-gray-hue),6%,35%);--color-base-blue-gray-230:hsl(var(--hues-blue-gray-hue),8%,23%);--color-base-blue-gray-200:hsl(var(--hues-blue-gray-hue),9%,20%);--color-base-blue-gray-160:hsl(var(--hues-blue-gray-hue),10%,16%);--color-base-blue-gray-130:hsl(var(--hues-blue-gray-hue),7%,13%);--color-base-blue-default:var(--color-base-blue-500);--alias-color-background-quinary:var(--color-base-blue-gray-350);--alias-color-background-quarternary:var(--color-base-blue-gray-230);--alias-color-background-tertiary:var(--color-base-blue-gray-200);--alias-color-background-secondary:var(--color-base-blue-gray-160);--alias-color-background-base:var(--color-base-blue-gray-130);--alias-color-ok:var(--color-base-green-default);--alias-color-caution:var(--color-base-orange-default);--alias-color-danger:var(--color-base-red-default);--alias-color-border-focus:var(--color-base-blue-default);--alias-color-border-strong:var(--color-base-blue-gray-550);--alias-color-border-default:var(--color-base-blue-gray-350);--alias-color-border-weak:var(--color-base-blue-gray-230);--alias-color-text-quarternary:var(--color-base-blue-gray-850);--alias-color-text-tertiary:var(--color-base-blue-gray-650);--alias-color-text-secondary:var(--color-base-blue-gray-350);--alias-color-brand-primary:var(--color-base-blue-default);--color-background-switch-track-active:var(--color-base-bright-green-default);--color-background-button-caution-base:var(--alias-color-caution-dark);--color-base-blue-gray-default:var(--color-base-blue-gray-450);--alias-color-text-primary:var(--color-base-blue-gray-default);--color-font-input-placeholder:var(--alias-color-text-secondary);--color-font-input-default:var(--alias-color-text-tertiary);--color-font-button-danger-discreet:var(--alias-color-danger);--color-font-button-caution-discreet:var(--alias-color-caution);--color-font-button-ok-discreet:var(--alias-color-ok);--color-font-button-secondary-discreet:var(--alias-color-text-tertiary);--color-font-button-secondary-base:var(--alias-color-text-quarternary);--color-font-button-primary-discreet:var(--alias-color-brand-primary);--color-font-button-primary-base:var(--alias-color-text-quarternary);--color-font-link:var(--alias-color-brand-primary);--color-border-input-invalid:var(--alias-color-danger);--color-border-input-focus:var(--alias-color-border-focus);--color-border-input-default:var(--alias-color-border-weak);--color-border-button-danger-discreet:var(--alias-color-danger);--color-border-button-caution-discreet:var(--alias-color-caution);--color-border-button-ok-discreet:var(--alias-color-ok);--color-border-button-secondary-discreet:var(--alias-color-border-strong);--color-border-button-primary-discreet:var(--alias-color-brand-primary);--color-background-switch-track-inactive:var(--alias-color-background-quinary);--color-background-input-focus:var(--alias-color-background-quarternary);--color-background-input-default:var(--alias-color-background-base);--color-background-button-danger-base:var(--alias-color-danger);--color-background-button-ok-base:var(--alias-color-ok);--color-background-button-secondary-base:var(--alias-color-background-quarternary);--color-background-button-primary-base:var(--alias-color-brand-primary);--color-background-block-footer:var(--alias-color-background-secondary);--color-background-block-content:var(--alias-color-background-tertiary);--color-background-block-header:var(--alias-color-background-quarternary)}html.light{--alias-color-brand-primary:#3b8ece;--alias-color-text-primary:#6c747a;--alias-color-text-secondary:#bcc0c2;--alias-color-text-tertiary:#363b3f;--alias-color-text-quarternary:#f9fafb;--alias-color-text-accent:#000;--alias-color-border-weak:#d3dade;--alias-color-border-default:#a1a6aa;--alias-color-border-strong:#6c747a;--alias-color-border-vivid:#000;--alias-color-border-focus:#3b8ece;--alias-color-danger:#ff3336;--alias-color-caution:#ffb433;--alias-color-caution-dark:#cc8100;--alias-color-ok:#29a34e;--alias-color-info:#5ca1d6;--alias-color-background-base:#f9fafb;--alias-color-background-secondary:#c7cdd1;--alias-color-background-tertiary:#e2e6e9;--alias-color-background-quarternary:#d3dade;--alias-color-background-quinary:#a1a6aa;--alias-color-background-elevation-negative:rgba(0,0,0,.1);--alias-color-background-overlay-blocked:hsla(0,0%,100%,.5);--alias-color-background-overlay-popup:rgba(0,0,0,.25);--alias-color-background-highlight-25:rgba(0,0,0,.05)}.lds-icon{display:inline-block}.lds-icon--svg svg{height:100%;max-width:inherit;min-width:inherit;width:100%}.lds-icon--svg.sm{height:1.125rem;width:1.125rem}.lds-icon--svg,.lds-icon--svg.md{height:var(--spacing-base-5);width:var(--spacing-base-5)}.lds-icon--svg.lg{height:var(--spacing-base-6);width:var(--spacing-base-6)}.lds-icon--svg.xl{height:var(--spacing-base-7);width:var(--spacing-base-7)}.lds-icon--svg.xxl{height:var(--spacing-base-8);width:var(--spacing-base-8)}.lds-icon--svg>svg{fill:var(--color-font-base)}.lds-icon--svg.black>svg{fill:var(--color-base-black)}.lds-icon--svg.on-dark>svg{fill:var(--color-base-white)}.lds-icon--svg.primary>svg{fill:var(--color-base-blue-default)}.lds-icon--svg.ok>svg{fill:var(--color-background-button-ok-base)}.lds-icon--svg.info>svg{fill:var(--color-background-button-info-base)}.lds-icon--svg.caution>svg{fill:var(--color-background-button-caution-base)}.lds-icon--svg.danger>svg{fill:var(--color-background-button-danger-base)}.lds-only-aria{clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute!important;width:1px}body{font-family:var(--typography-base-font-primary)}.lds-h1,.lds-web .lds-h1:is(h1,h2,h3,h4,h5,h6),.lds-web h2{color:var(--alias-color-text-accent);font-size:1.875rem;line-height:2.25rem}.lds-web .lds-h1:is(h1,h2,h3,h4,h5,h6),.lds-web h2{margin-bottom:var(--spacing-h1-margin-bottom);margin-top:var(--spacing-h1-margin-top)}.lds-h2,.lds-web .lds-h2:is(h1,h2,h3,h4,h5,h6),.lds-web h3{color:var(--alias-color-text-accent);font-size:1.5rem;line-height:2rem}.lds-web .lds-h2:is(h1,h2,h3,h4,h5,h6),.lds-web h3{margin-bottom:var(--spacing-h2-margin-bottom);margin-top:var(--spacing-h2-margin-top)}.lds-h3,.lds-web .lds-h3:is(h1,h2,h3,h4,h5,h6),.lds-web h4{color:var(--alias-color-text-secondary);font-size:1rem;font-weight:700;line-height:1.5rem;text-transform:uppercase}.lds-web .lds-h3:is(h1,h2,h3,h4,h5,h6),.lds-web h4{margin-bottom:var(--spacing-h3-margin-bottom);margin-top:var(--spacing-h3-margin-top)}.lds-h4,.lds-web .lds-h4:is(h1,h2,h3,h4,h5,h6),.lds-web h5{color:var(--alias-color-text-accent);font-size:1rem;font-weight:700;line-height:1.5rem}.lds-web .lds-h4:is(h1,h2,h3,h4,h5,h6),.lds-web h5{margin-bottom:var(--spacing-h4-margin-bottom);margin-top:var(--spacing-h4-margin-top)}.lds-web{font-size:1rem;line-height:1.5rem}.lds-web p{margin-bottom:var(--spacing-p-margin-bottom);margin-top:var(--spacing-p-margin-top)}.lds-web code{background:var(--alias-color-background-elevation-negative);display:inline-block;font-size:.75rem;line-height:1rem;line-height:1;padding:var(--spacing-base-0-5) var(--spacing-base-1-5)}.lds-web code,.lds-web dfn{color:var(--alias-color-text-tertiary)}.lds-web dfn{font-style:normal}.lds-web ul{list-style-type:disc}.lds-web a{color:var(--alias-color-text-accent);text-decoration:underline}.lds-web a.primary{color:var(--alias-color-brand-primary);text-decoration:underline}a.lds-button{display:inline-block;text-align:center;-webkit-text-decoration-line:none;text-decoration-line:none}.lds-button{background-color:var(--color-background-button-secondary-base);border-color:transparent;border-radius:.25rem;border-width:1px;color:var(--color-font-button-secondary-base);font-family:var(--typography-font-main);font-size:1rem;height:var(--size-button-height);line-height:1.5rem;padding:var(--spacing-button-padding-y) var(--spacing-button-padding-x);transition:background-color var(--transition-base-duration-default) var(--transition-base-easing-default)}.lds-button--all-caps{text-transform:uppercase}.lds-button>.lds-button--icon{height:1em;margin-left:0;margin-right:var(--spacing-button-icon-margin-inline-end);overflow:visible;width:var(--spacing-button-icon-size)}.lds-button>.lds-button--icon>svg{fill:var(--color-font-button-secondary-base);height:var(--spacing-button-icon-size);width:var(--spacing-button-icon-size)}.lds-button>.lds-button--icon-r{margin-left:var(--spacing-button-icon-margin-inline-end);margin-right:0}.lds-button--discreet{background-color:transparent;border-color:var(--color-border-button-secondary-discreet);border-width:1px;color:var(--color-font-button-secondary-discreet)}.lds-button--discreet>.lds-button--icon>svg{fill:var(--color-font-button-secondary-discreet)}.lds-button.primary{background-color:var(--color-background-button-primary-base);color:var(--color-font-button-primary-base)}.lds-button.primary>.lds-button--icon>svg{fill:var(--color-font-button-primary-base)}.lds-button--discreet.primary{background-color:transparent;border-color:var(--color-border-button-primary-discreet);border-width:1px;color:var(--color-font-button-primary-discreet)}.lds-button--discreet.primary>.lds-button--icon>svg{fill:var(--color-font-button-primary-discreet)}.lds-button.ok{background-color:var(--color-background-button-ok-base)}.lds-button--discreet.ok{background-color:transparent;border-color:var(--color-border-button-ok-discreet);border-width:1px}.lds-button--discreet.ok,.lds-button--discreet.ok>.lds-button--icon{color:var(--color-font-button-ok-discreet)}.lds-button--discreet.ok>.lds-button--icon>svg{fill:var(--color-font-button-ok-discreet)}.lds-button.caution{background-color:var(--color-background-button-caution-base)}.lds-button--discreet.caution{background-color:transparent;border-color:var(--color-border-button-caution-discreet);border-width:1px}.lds-button--discreet.caution,.lds-button--discreet.caution>.lds-button--icon{color:var(--color-font-button-caution-discreet)}.lds-button--discreet.caution>.lds-button--icon>svg{fill:var(--color-font-button-caution-discreet)}.lds-button:is(.danger,[type=reset]){background-color:var(--color-background-button-danger-base)}.lds-button--discreet:is(.danger,[type=reset]){background-color:transparent;border-color:var(--color-border-button-danger-discreet);border-width:1px;color:var(--color-font-button-danger-discreet)}.lds-button--discreet:is(.danger,[type=reset])>.lds-button--icon{color:var(--color-font-button-danger-discreet)}.lds-button--discreet:is(.danger,[type=reset])>.lds-button--icon>svg{fill:var(--color-font-button-danger-discreet)}.lds-button--loading{cursor:default;position:relative}.lds-button--loading>.lds-button--spinner{left:50%;margin-left:-.625rem;margin-top:-.625rem;position:absolute;top:50%}.lds-button--loading>.lds-button--icon:not(.lds-button--spinner),.lds-button--loading>.lds-button--label{opacity:var(--opacity-base-disabled)}a.lds-button.disabled{pointer-events:none}.lds-button.disabled,.lds-button[disabled]{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);cursor:default;opacity:var(--opacity-base-disabled)}.lds-button-bar{display:flex;flex-direction:column;margin-top:var(--spacing-base-2);padding-bottom:var(--spacing-base-2);padding-top:var(--spacing-base-2)}@media (min-width:640px){.lds-button-bar{flex-direction:row;flex-wrap:wrap;justify-content:space-between}}.lds-button-bar>a,.lds-button-bar>button{margin:var(--spacing-base-2) var(--spacing-base-1)}.lds-button-bar.lds-button-bar--centered{display:flex;justify-content:center}.lds-button-bar.lds-button-bar--centered>a,.lds-button-bar.lds-button-bar--centered>button{margin-left:var(--spacing-base-4);margin-right:var(--spacing-base-4)}.lds-button-bar.lds-button-bar--stacked{flex-direction:column;flex-wrap:nowrap}.lds-button-bar.lds-button-bar--stacked a,.lds-button-bar.lds-button-bar--stacked>button{margin-bottom:var(--spacing-base-2);margin-left:0;margin-right:0;margin-top:var(--spacing-base-2)}.lds-button-bar.lds-button-bar--b-grid{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));margin-bottom:0;margin-top:0}@media (min-width:640px){.lds-button-bar.lds-button-bar--b-grid{-moz-column-gap:var(--spacing-base-4);column-gap:var(--spacing-base-4);padding-bottom:0;padding-top:0}}.lds-button-bar.lds-button-bar--b-grid>a,.lds-button-bar.lds-button-bar--b-grid>button{margin-left:0;margin-right:0}@media (min-width:640px){.lds-button-bar.lds-button-bar--grid---2{grid-template-columns:repeat(2,minmax(0,1fr))}.lds-button-bar.lds-button-bar--grid---3{grid-template-columns:repeat(3,minmax(0,1fr))}.lds-button-bar.lds-button-bar--grid---4{grid-template-columns:repeat(4,minmax(0,1fr))}.lds-button-bar.lds-button-bar--grid---5{grid-template-columns:repeat(5,minmax(0,1fr))}}.lds-input--wrapper{position:relative}.lds-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:.25rem;border-width:1px;width:100%}.lds-input:focus{outline:2px solid transparent;outline-offset:2px;z-index:10}.lds-input{-webkit-text-fill-color:var(--color-font-input-default);background-color:var(--color-background-input-default);border-color:var(--color-border-input-default);box-shadow:0 0 0 9999px var(--color-background-input-default) inset;caret-color:var(--alias-color-border-vivid);color:var(--color-font-input-default);height:var(--size-input-height);padding-left:var(--spacing-input-padding-inline-start);padding-right:var(--spacing-input-padding-inline-end);transition:border-color var(--transition-base-duration-default) var(--transition-base-easing-default)}.lds-input:disabled{opacity:var(--opacity-base-disabled)}.lds-input:focus{-webkit-text-fill-color:var(--color-font-input-focus);background-color:var(--color-background-input-focus);border-color:var(--color-border-input-focus);color:var(--color-font-input-focus)}.lds-input[aria-invalid]{border-color:var(--color-border-input-invalid)}.lds-input::-moz-placeholder{opacity:var(--opacity-base-disabled)}.lds-input::placeholder{opacity:var(--opacity-base-disabled)}.lds-input+.lds-input--icon{position:absolute;right:var(--spacing-input-icon-margin-x);top:var(--spacing-input-icon-margin-y);z-index:50}.lds-input+.lds-input--icon>svg{fill:var(--color-font-input-default)}.lds-input:disabled+.lds-input--icon>svg{opacity:var(--opacity-base-disabled)}.lds-input[aria-invalid]+.lds-input--icon>svg{fill:var(--color-border-input-invalid)}.lds-loading-indicator{align-items:center;bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0}.lds-loading-indicator>span{display:block;left:-50%;top:-50%}.lds-panel{font-size:.875rem;line-height:1.25rem;width:100%}.lds-panel--content,.lds-panel--footer,.lds-panel--header{margin:0;padding:var(--spacing-base-4)}.lds-panel--header{background-color:var(--color-background-block-header);text-align:center}.lds-panel--content{background-color:var(--color-background-block-content)}.lds-panel--footer{background-color:var(--color-background-block-footer)}@media (min-width:640px){.lds-panel--header{border-top-left-radius:.75rem;border-top-right-radius:.75rem;margin-top:var(--spacing-base-6);padding:var(--spacing-base-8) var(--spacing-base-6)}.lds-panel--content{padding:var(--spacing-base-6)}.lds-panel--footer{border-bottom-left-radius:.75rem;border-bottom-right-radius:.75rem;margin-bottom:var(--spacing-base-6);padding-left:var(--spacing-base-6);padding-right:var(--spacing-base-6)}}.lds-panel--loading{position:relative}.lds-panel--footer,.lds-panel--header{opacity:1;transition:opacity var(--transition-base-duration-slow) var(--transition-base-easing-in-out)}.lds-panel--footer.lds-panel--loading,.lds-panel--header.lds-panel--loading{opacity:var(--opacity-base-disabled)}.lds-panel--loading-indicator{align-items:center;background-color:var(--alias-color-background-overlay-blocked);bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0}.lds-panel--loading-indicator svg{fill:var(--alias-color-text-tertiary)}.lds-panel--loading{pointer-events:none}.lds-panel--header:is(h2,h3,h4,h5,h6){margin-bottom:0}.lds-panel--footer.lds-button-bar{margin-top:0;padding-bottom:var(--spacing-base-2);padding-top:var(--spacing-base-2)}.lds-modal{align-items:center;background:var(--alias-color-background-overlay-popup);bottom:0;display:flex;justify-content:center;left:0;overflow:hidden;position:fixed;right:0;top:0;z-index:50}.lds-modal--modal-content{flex-grow:1;max-width:28rem;width:100%}@media (min-width:640px){.lds-modal--modal-content{border-radius:.75rem}}.lds-modal--modal-content{box-shadow:var(--shadow-base-xl)}.lds-modal--modal-content>header{margin:0;padding-bottom:var(--spacing-base-4);padding-top:var(--spacing-base-4)}@media (min-width:640px){.lds-modal--modal-content>header{margin:0}}.lds-modal--modal-content>header h3.lds-h1{margin-bottom:0;margin-top:0}.lds-modal--modal-content>header .lds-modal--sub-title{color:var(--alias-color-text-tertiary);margin-bottom:0;margin-top:var(--spacing-base-2)}.lds-modal--modal-content>footer{margin:0}@media (min-width:640px){.lds-modal--modal-content>footer{margin:0}}.lds-modal.lds-modal--sm .lds-modal--modal-content{max-width:20rem}.lds-modal.lds-modal--lg .lds-modal--modal-content{max-width:48rem}.lds-modal.lds-modal--xl .lds-modal--modal-content{max-width:64rem}.lds-switch{--thumb-size:var(--spacing-switch-thumb-size);--thumb-color:var(--color-background-switch-thumb);--thumb-color-highlight:var(--color-background-switch-thumb-highlight);--track-size:calc(var(--thumb-size)*2);--track-padding:2px;--track-color-inactive:var(--color-background-switch-track-inactive);--track-color-active:var(--color-background-switch-track-active);--thumb-position:0%;--thumb-transition-duration:var(--transition-base-duration-default);--hover-highlight-size:0;align-items:center;color:var(--alias-color-text-accent);cursor:pointer;display:flex;font-weight:500;gap:2ch;justify-content:space-between;-webkit-user-select:none;-moz-user-select:none;user-select:none}.lds-switch>input{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--track-color-inactive);block-size:var(--thumb-size);border:none;border-radius:var(--track-size);box-sizing:content-box;display:grid;flex-shrink:0;grid:[track] 1fr/[track] 1fr;inline-size:var(--track-size);outline-offset:5px;padding:var(--track-padding);pointer-events:none;transition:background-color var(--transition-base-duration-default) var(--transition-base-easing-default)}.lds-switch>input:before{background:var(--thumb-color);block-size:var(--thumb-size);border-radius:50%;box-shadow:0 0 0 var(--hover-highlight-size) var(--thumb-color-highlight);content:"";cursor:pointer;grid-area:track;inline-size:var(--thumb-size);pointer-events:auto;transform:translateX(var(--thumb-position));transition:transform var(--thumb-transition-duration) var(--transition-base-easing-default),box-shadow var(--transition-base-duration-default) var(--transition-base-easing-default)}.lds-switch>input:not(:disabled):hover:before{--hover-highlight-size:.3rem}.lds-switch>input:checked{--thumb-position:100%;background:var(--track-color-active)}.lds-switch>input:disabled{--track-color-inactive:var(--color-background-switch-track-inactive);--thumb-color:transparent}.lds-switch>input:disabled:before{box-shadow:var(--shadow-switch-thumb-disabled);cursor:not-allowed}.lds-switch>input:focus-visible{box-shadow:var(--shadow-switch-thumb-focused)}.lds-switch--disabled{cursor:not-allowed}
@@ -0,0 +1 @@
1
+ define(["exports","react","react-dom"],(function(e,n,t){"use strict";function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function o(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:function(){return e[t]}})}})),n.default=e,Object.freeze(n)}var a=r(n),i=o(n);function u(e){var n,t,r="";if("string"==typeof e||"number"==typeof e)r+=e;else if("object"==typeof e)if(Array.isArray(e))for(n=0;n<e.length;n++)e[n]&&(t=u(e[n]))&&(r&&(r+=" "),r+=t);else for(n in e)e[n]&&(r&&(r+=" "),r+=n);return r}function l(){for(var e,n,t=0,r="";t<arguments.length;)(e=arguments[t++])&&(n=u(e))&&(r&&(r+=" "),r+=n);return r}var c=function(){return c=Object.assign||function(e){for(var n,t=1,r=arguments.length;t<r;t++)for(var o in n=arguments[t])Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o]);return e},c.apply(this,arguments)};function s(e,n){var t={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&n.indexOf(r)<0&&(t[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);o<r.length;o++)n.indexOf(r[o])<0&&Object.prototype.propertyIsEnumerable.call(e,r[o])&&(t[r[o]]=e[r[o]])}return t}function f(e){var n,t,r="";if("string"==typeof e||"number"==typeof e)r+=e;else if("object"==typeof e)if(Array.isArray(e))for(n=0;n<e.length;n++)e[n]&&(t=f(e[n]))&&(r&&(r+=" "),r+=t);else for(n in e)e[n]&&(r&&(r+=" "),r+=n);return r}function d(){for(var e,n,t=0,r="";t<arguments.length;)(e=arguments[t++])&&(n=f(e))&&(r&&(r+=" "),r+=n);return r}var p,v,m,g,h,b,y,E,w,P="lds-icon",O="lds-icon--svg",N=function(e){var t,r=e.color,o=void 0===r?"default":r,i=e.size,u=void 0===i?"md":i,l=e.className,c=void 0===l?"":l,s=e.children,f=n.useMemo((function(){if("number"==typeof u)return{width:"".concat(u,"px"),height:"".concat(u,"px")}}),[u]);return a.default.createElement("span",{"aria-hidden":!0,className:d(P,c,(t={},t[u]="string"==typeof u&&"md"!==u,t[o]="string"==typeof o&&"default"!==o,t)),style:f},s)},C=function(e){var n=e.icon,t=s(e,["icon"]);return a.default.createElement(N,c({},t,{className:d(t.className,O)}),a.default.createElement(n,null))};function x(){return x=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},x.apply(this,arguments)}var S=function(e){return i.createElement("svg",x({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 32",width:64,height:64},e),p||(p=i.createElement("circle",{cx:16,cy:3,r:0},i.createElement("animate",{attributeName:"r",values:"0;3;0;0",dur:"1s",repeatCount:"indefinite",begin:0,keySplines:"0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8",calcMode:"spline"}))),v||(v=i.createElement("circle",{transform:"rotate(45 16 16)",cx:16,cy:3,r:0},i.createElement("animate",{attributeName:"r",values:"0;3;0;0",dur:"1s",repeatCount:"indefinite",begin:"0.125s",keySplines:"0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8",calcMode:"spline"}))),m||(m=i.createElement("circle",{transform:"rotate(90 16 16)",cx:16,cy:3,r:0},i.createElement("animate",{attributeName:"r",values:"0;3;0;0",dur:"1s",repeatCount:"indefinite",begin:"0.25s",keySplines:"0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8",calcMode:"spline"}))),g||(g=i.createElement("circle",{transform:"rotate(135 16 16)",cx:16,cy:3,r:0},i.createElement("animate",{attributeName:"r",values:"0;3;0;0",dur:"1s",repeatCount:"indefinite",begin:"0.375s",keySplines:"0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8",calcMode:"spline"}))),h||(h=i.createElement("circle",{transform:"rotate(180 16 16)",cx:16,cy:3,r:0},i.createElement("animate",{attributeName:"r",values:"0;3;0;0",dur:"1s",repeatCount:"indefinite",begin:"0.5s",keySplines:"0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8",calcMode:"spline"}))),b||(b=i.createElement("circle",{transform:"rotate(225 16 16)",cx:16,cy:3,r:0},i.createElement("animate",{attributeName:"r",values:"0;3;0;0",dur:"1s",repeatCount:"indefinite",begin:"0.625s",keySplines:"0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8",calcMode:"spline"}))),y||(y=i.createElement("circle",{transform:"rotate(270 16 16)",cx:16,cy:3,r:0},i.createElement("animate",{attributeName:"r",values:"0;3;0;0",dur:"1s",repeatCount:"indefinite",begin:"0.75s",keySplines:"0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8",calcMode:"spline"}))),E||(E=i.createElement("circle",{transform:"rotate(315 16 16)",cx:16,cy:3,r:0},i.createElement("animate",{attributeName:"r",values:"0;3;0;0",dur:"1s",repeatCount:"indefinite",begin:"0.875s",keySplines:"0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8",calcMode:"spline"}))),w||(w=i.createElement("circle",{transform:"rotate(180 16 16)",cx:16,cy:3,r:0},i.createElement("animate",{attributeName:"r",values:"0;3;0;0",dur:"1s",repeatCount:"indefinite",begin:"0.5s",keySplines:"0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8",calcMode:"spline"}))))},T=function(e){var n=s(e,[]);return a.default.createElement(C,c({icon:S},n))},F="lds-button",k="lds-button--all-caps",A="lds-button--icon",j="lds-button--icon-r",D="lds-button--discreet",R="lds-button--loading",M="lds-button--spinner",L="lds-button--label",I=T;var B=n.forwardRef((function(e,t){var r,o=e.label,i=e.primary,u=e.discreet,c=e.allCaps,s=e.disabled,f=void 0!==s&&s,d=e.loading,p=void 0!==d&&d,v=e.className,m=e["aria-label"],g=e.id,h=e.type,b=void 0===h?"default":h,y=e.buttonType,E=void 0===y?"button":y,w=e.icon,P=e.iconPosition,O=void 0===P?"left":P,N=e.loadingStateOnPromise,C=void 0!==N&&N,x=e.onClick,S=e.children,T=n.useRef(!0);n.useEffect((function(){return T.current=!0,function(){T.current=!1}}),[]);var B=n.useState(!1),H=B[0],q=B[1],U=p||H,_=n.useCallback((function(e){if("function"==typeof x&&!U){var n=x(e);C&&function(e){return"object"==typeof e&&null!==e&&"then"in e&&"function"==typeof e.then}(n)&&(q(!0),n.finally((function(){T.current&&q(!1)})))}}),[x,U,C]);return i&&(b="primary"),a.default.createElement("button",{ref:t,id:g,type:E,onClick:_,className:l(F,v,b,(r={},r[k]=c,r[D]=u,r[R]=U,r)),"aria-label":m||("string"==typeof o?o:""),disabled:f||H},w&&"left"===O&&a.default.createElement(w,{className:A}),a.default.createElement("span",{className:L},o),S,w&&"right"===O&&a.default.createElement(w,{className:l(A,j)}),U&&a.default.createElement(a.default.Fragment,null,a.default.createElement(I,{className:l(A,M)}),a.default.createElement("span",{className:"lds-only-aria","aria-live":"polite","aria-busy":"true"}," ","Loading")))})),H=function(){return H=Object.assign||function(e){for(var n,t=1,r=arguments.length;t<r;t++)for(var o in n=arguments[t])Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o]);return e},H.apply(this,arguments)};function q(e,n){var t={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&n.indexOf(r)<0&&(t[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);o<r.length;o++)n.indexOf(r[o])<0&&Object.prototype.propertyIsEnumerable.call(e,r[o])&&(t[r[o]]=e[r[o]])}return t}function U(e,n,t,r){return new(t||(t=Promise))((function(o,a){function i(e){try{l(r.next(e))}catch(e){a(e)}}function u(e){try{l(r.throw(e))}catch(e){a(e)}}function l(e){var n;e.done?o(e.value):(n=e.value,n instanceof t?n:new t((function(e){e(n)}))).then(i,u)}l((r=r.apply(e,n||[])).next())}))}function _(e,n){var t,r,o,a,i={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return a={next:u(0),throw:u(1),return:u(2)},"function"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function u(a){return function(u){return function(a){if(t)throw new TypeError("Generator is already executing.");for(;i;)try{if(t=1,r&&(o=2&a[0]?r.return:a[0]?r.throw||((o=r.return)&&o.call(r),0):r.next)&&!(o=o.call(r,a[1])).done)return o;switch(r=0,o&&(a=[2&a[0],o.value]),a[0]){case 0:case 1:o=a;break;case 4:return i.label++,{value:a[1],done:!1};case 5:i.label++,r=a[1],a=[0];continue;case 7:a=i.ops.pop(),i.trys.pop();continue;default:if(!(o=i.trys,(o=o.length>0&&o[o.length-1])||6!==a[0]&&2!==a[0])){i=0;continue}if(3===a[0]&&(!o||a[1]>o[0]&&a[1]<o[3])){i.label=a[1];break}if(6===a[0]&&i.label<o[1]){i.label=o[1],o=a;break}if(o&&i.label<o[2]){i.label=o[2],i.ops.push(a);break}o[2]&&i.ops.pop(),i.trys.pop();continue}a=n.call(e,i)}catch(e){a=[6,e],r=0}finally{t=o=0}if(5&a[0])throw a[1];return{value:a[0]?a[1]:void 0,done:!0}}([a,u])}}}function z(e,n,t){if(t||2===arguments.length)for(var r,o=0,a=n.length;o<a;o++)!r&&o in n||(r||(r=Array.prototype.slice.call(n,0,o)),r[o]=n[o]);return e.concat(r||Array.prototype.slice.call(n))}var W={buttonBar:"lds-button-bar",centered:"lds-button-bar--centered",stacked:"lds-button-bar--stacked",bGrid:"lds-button-bar--b-grid","grid-2":"lds-button-bar--grid---2","grid-3":"lds-button-bar--grid---3","grid-4":"lds-button-bar--grid---4","grid-5":"lds-button-bar--grid---5"};function G(e){var t,r=e.as,o=void 0===r?"div":r,i=e.type,u=void 0===i?"default":i,c=e.gridSize,s=e.children,f=q(e,["as","type","gridSize","children"]),d=n.useMemo((function(){return"number"==typeof c?c:n.Children.toArray(s).filter((function(e){return n.isValidElement(e)})).length}),[c,s]);return a.default.createElement(o,H({},f,{className:l(W.buttonBar,f.className||"",(t={},t[W[u]]="default"!==u&&"grid"!==u,t[W.bGrid]="grid"===u,t[W["grid-".concat(d)]]="grid"===u,t))}),s)}var Y="lds-input--wrapper",V="lds-input",K="lds-input--icon",Q=n.forwardRef((function(e,n){var t=e.icon,r=e.wrapperProps,o=q(e,["icon","wrapperProps"]);return a.default.createElement("div",H({},r,{className:l(Y,null==r?void 0:r.className)}),a.default.createElement("input",H({ref:n},o,{className:l(V,(null==o?void 0:o.className)||"")})),t&&a.default.createElement(t,{className:K}))})),J="lds-loading-indicator",X=T,Z=function(e){var n=e.size,t=e.className;return a.default.createElement("div",{className:l(J,t)},a.default.createElement(X,{size:n}))},$="undefined"==typeof window||"undefined"==typeof document,ee=$?n.useEffect:n.useLayoutEffect;function ne(e){var t=n.useRef(e);return ee((function(){t.current=e}),[e]),t}function te(e){"function"==typeof queueMicrotask?queueMicrotask(e):Promise.resolve().then(e).catch((function(e){return setTimeout((function(){throw e}))}))}function re(){var e=[],n=[],t={enqueue:function(e){n.push(e)},addEventListener:function(e,n,r,o){return e.addEventListener(n,r,o),t.add((function(){return e.removeEventListener(n,r,o)}))},requestAnimationFrame:function(){for(var e=[],n=0;n<arguments.length;n++)e[n]=arguments[n];var r=requestAnimationFrame.apply(void 0,e);return t.add((function(){return cancelAnimationFrame(r)}))},nextFrame:function(){for(var e=[],n=0;n<arguments.length;n++)e[n]=arguments[n];return t.requestAnimationFrame((function(){return t.requestAnimationFrame.apply(t,e)}))},setTimeout:function(){for(var e=[],n=0;n<arguments.length;n++)e[n]=arguments[n];var r=setTimeout.apply(void 0,e);return t.add((function(){return clearTimeout(r)}))},microTask:function(){for(var e=[],n=0;n<arguments.length;n++)e[n]=arguments[n];var r={current:!0};return te((function(){r.current&&e[0]()})),t.add((function(){r.current=!1}))},add:function(n){return e.push(n),function(){var t=e.indexOf(n);t>=0&&(0,e.splice(t,1)[0])()}},dispose:function(){for(var n=0,t=e.splice(0);n<t.length;n++){(0,t[n])()}},workQueue:function(){return U(this,void 0,void 0,(function(){var e,t;return _(this,(function(r){switch(r.label){case 0:e=0,t=n.splice(0),r.label=1;case 1:return e<t.length?[4,(0,t[e])()]:[3,4];case 2:r.sent(),r.label=3;case 3:return e++,[3,1];case 4:return[2]}}))}))}};return t}var oe,ae=function(e){var n=ne(e);return a.default.useCallback((function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];return n.current.apply(n,e)}),[n])},ie={serverHandoffComplete:!1};function ue(){var e=n.useState(ie.serverHandoffComplete),t=e[0],r=e[1];return n.useEffect((function(){!0!==t&&r(!0)}),[t]),n.useEffect((function(){!1===ie.serverHandoffComplete&&(ie.serverHandoffComplete=!0)}),[]),t}var le=0;function ce(){return++le}var se=null!=(oe=a.default.useId)?oe:function(){var e=ue(),n=a.default.useState(e?ce:null),t=n[0],r=n[1];return ee((function(){null===t&&r(ce())}),[t]),null!=t?""+t:void 0};function fe(e,n){for(var t=[],r=2;r<arguments.length;r++)t[r-2]=arguments[r];if(e in n){var o=n[e];return"function"==typeof o?o.apply(void 0,t):o}var a=new Error('Tried to handle "'.concat(e,'" but there is no handler defined. Only defined handlers are: ').concat(Object.keys(n).map((function(e){return'"'.concat(e,'"')})).join(", "),"."));throw Error.captureStackTrace&&Error.captureStackTrace(a,fe),a}function de(e){return $?null:e instanceof Node?e.ownerDocument:null!=e&&e.hasOwnProperty("current")&&e.current instanceof Node?e.current.ownerDocument:document}var pe=["[contentEditable=true]","[tabindex]","a[href]","area[href]","button:not([disabled])","iframe","input:not([disabled])","select:not([disabled])","textarea:not([disabled])"].map((function(e){return"".concat(e,":not([tabindex='-1'])")})).join(","),ve=function(e){return e[e.First=1]="First",e[e.Previous=2]="Previous",e[e.Next=4]="Next",e[e.Last=8]="Last",e[e.WrapAround=16]="WrapAround",e[e.NoScroll=32]="NoScroll",e}(ve||{}),me=function(e){return e[e.Error=0]="Error",e[e.Overflow=1]="Overflow",e[e.Success=2]="Success",e[e.Underflow=3]="Underflow",e}(me||{}),ge=function(e){return e[e.Previous=-1]="Previous",e[e.Next=1]="Next",e}(ge||{});var he=function(e){return e[e.Strict=0]="Strict",e[e.Loose=1]="Loose",e}(he||{});function be(e){null==e||e.focus({preventScroll:!0})}var ye=["textarea","input"].join(",");function Ee(e,n,t,r){void 0===t&&(t=!0),void 0===r&&(r=null);var o=Array.isArray(e)?e.length>0?e[0].ownerDocument:document:e.ownerDocument,a=Array.isArray(e)?t?function(e,n){return void 0===n&&(n=function(e){return e}),e.slice().sort((function(e,t){var r=n(e),o=n(t);if(null===r||null===o)return 0;var a=r.compareDocumentPosition(o);return a&Node.DOCUMENT_POSITION_FOLLOWING?-1:a&Node.DOCUMENT_POSITION_PRECEDING?1:0}))}(e):e:function(e){return void 0===e&&(e=document.body),null==e?[]:Array.from(e.querySelectorAll(pe))}(e);r=null!=r?r:o.activeElement;var i,u=function(){if(5&n)return 1;if(10&n)return-1;throw new Error("Missing Focus.First, Focus.Previous, Focus.Next or Focus.Last")}(),l=function(){if(1&n)return 0;if(2&n)return Math.max(0,a.indexOf(r))-1;if(4&n)return Math.max(0,a.indexOf(r))+1;if(8&n)return a.length-1;throw new Error("Missing Focus.First, Focus.Previous, Focus.Next or Focus.Last")}(),c=32&n?{preventScroll:!0}:{},s=0,f=a.length;do{if(s>=f||s+f<=0)return 0;var d=l+s;if(16&n)d=(d+f)%f;else{if(d<0)return 3;if(d>=f)return 1}null==(i=a[d])||i.focus(c),s+=u}while(i!==o.activeElement);return 6&n&&function(e){var n,t;return null!=(t=null==(n=null==e?void 0:e.matches)?void 0:n.call(e,ye))&&t}(i)&&i.select(),i.hasAttribute("tabindex")||i.setAttribute("tabindex","0"),2}function we(e,t,r){var o=ne(t);n.useEffect((function(){function n(e){o.current(e)}return document.addEventListener(e,n,r),function(){return document.removeEventListener(e,n,r)}}),[e,r])}function Pe(e,t,r){void 0===r&&(r=!0);var o=n.useRef(!1);function a(n,r){if(o.current&&!n.defaultPrevented){var a=function e(n){return"function"==typeof n?e(n()):Array.isArray(n)||n instanceof Set?n:[n]}(e),i=r(n);if(null!==i&&i.ownerDocument.documentElement.contains(i)){for(var u=0,l=a;u<l.length;u++){var c=l[u];if(null!==c){var s=c instanceof HTMLElement?c:c.current;if(null!=s&&s.contains(i))return}}return!function(e,n){var t,r;return void 0===n&&(n=0),e!==(null==(r=de(e))?void 0:r.body)&&fe(n,((t={})[0]=function(){return e.matches(pe)},t[1]=function(){for(var n=e;null!==n;){if(n.matches(pe))return!0;n=n.parentElement}return!1},t))}(i,he.Loose)&&-1!==i.tabIndex&&n.preventDefault(),t(n,i)}}}n.useEffect((function(){requestAnimationFrame((function(){o.current=r}))}),[r]);var i=n.useRef(null);we("mousedown",(function(e){var n,t;o.current&&(i.current=(null==(t=null==(n=e.composedPath)?void 0:n.call(e))?void 0:t[0])||e.target)}),!0),we("click",(function(e){!i.current||(a(e,(function(){return i.current})),i.current=null)}),!0),we("blur",(function(e){return a(e,(function(){return window.document.activeElement instanceof HTMLIFrameElement?window.document.activeElement:null}))}),!0)}var Oe=Symbol();function Ne(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];var r=n.useRef(e);n.useEffect((function(){r.current=e}),[e]);var o=ae((function(e){for(var n=0,t=r.current;n<t.length;n++){var o=t[n];null!=o&&("function"==typeof o?o(e):o.current=e)}}));return e.every((function(e){return null==e||(null==e?void 0:e[Oe])}))?void 0:o}var Ce=function(e){return e[e.None=0]="None",e[e.RenderStrategy=1]="RenderStrategy",e[e.Static=2]="Static",e}(Ce||{}),xe=function(e){return e[e.Unmount=0]="Unmount",e[e.Hidden=1]="Hidden",e}(xe||{});function Se(e){var n,t=e.ourProps,r=e.theirProps,o=e.slot,a=e.defaultTag,i=e.features,u=e.visible,l=void 0===u||u,c=e.name,s=Fe(r,t);if(l)return Te(s,o,a,c);var f=null!=i?i:0;if(2&f){var d=s.static,p=void 0!==d&&d,v=q(s,["static"]);if(p)return Te(v,o,a,c)}if(1&f){var m=s.unmount,g=(p=void 0===m||m,q(s,["unmount"]));return fe(p?0:1,((n={})[0]=function(){return null},n[1]=function(){return Te(H(H({},g),{hidden:!0,style:{display:"none"}}),o,a,c)},n))}return Te(s,o,a,c)}function Te(e,t,r,o){var a;void 0===t&&(t={});var i=je(e,["unmount","static"]),u=i.as,l=void 0===u?r:u,c=i.children,s=i.refName,f=void 0===s?"ref":s,d=q(i,["as","children","refName"]),p=void 0!==e.ref?((a={})[f]=e.ref,a):{},v="function"==typeof c?c(t):c;d.className&&"function"==typeof d.className&&(d.className=d.className(t));var m={};if(t){for(var g=!1,h=[],b=0,y=Object.entries(t);b<y.length;b++){var E=y[b],w=E[0],P=E[1];"boolean"==typeof P&&(g=!0),!0===P&&h.push(w)}g&&(m["data-headlessui-state"]=h.join(" "))}if(l===n.Fragment&&Object.keys(Ae(d)).length>0){if(!n.isValidElement(v)||Array.isArray(v)&&v.length>1)throw new Error(['Passing props on "Fragment"!',"","The current component <".concat(o,' /> is rendering a "Fragment".'),"However we need to passthrough the following props:",Object.keys(d).map((function(e){return" - ".concat(e)})).join("\n"),"","You can apply a few solutions:",['Add an `as="..."` prop, to ensure that we render an actual element instead of a "Fragment".',"Render a single element as the child so that we can forward the props onto that element."].map((function(e){return" - ".concat(e)})).join("\n")].join("\n"));return n.cloneElement(v,Object.assign({},Fe(v.props,Ae(je(d,["ref"]))),m,p,function(){for(var e=[],n=0;n<arguments.length;n++)e[n]=arguments[n];return{ref:e.every((function(e){return null==e}))?void 0:function(n){for(var t=0,r=e;t<r.length;t++){var o=r[t];null!=o&&("function"==typeof o?o(n):o.current=n)}}}}(v.ref,p.ref)))}return n.createElement(l,Object.assign({},je(d,["ref"]),l!==n.Fragment&&p,l!==n.Fragment&&m),v)}function Fe(){for(var e=[],n=0;n<arguments.length;n++)e[n]=arguments[n];if(0===e.length)return{};if(1===e.length)return e[0];for(var t={},r={},o=0,a=e;o<a.length;o++){var i=a[o];for(var u in i)u.startsWith("on")&&"function"==typeof i[u]?(null!=r[u]||(r[u]=[]),r[u].push(i[u])):t[u]=i[u]}if(t.disabled||t["aria-disabled"])return Object.assign(t,Object.fromEntries(Object.keys(r).map((function(e){return[e,void 0]}))));var l=function(e){var n;Object.assign(t,((n={})[e]=function(n){for(var t=[],o=1;o<arguments.length;o++)t[o-1]=arguments[o];for(var a=r[e],i=0,u=a;i<u.length;i++){var l=u[i];if((n instanceof Event||(null==n?void 0:n.nativeEvent)instanceof Event)&&n.defaultPrevented)return;l.apply(void 0,z([n],t,!1))}},n))};for(var i in r)l(i);return t}function ke(e){var t;return Object.assign(n.forwardRef(e),{displayName:null!=(t=e.displayName)?t:e.name})}function Ae(e){var n=Object.assign({},e);for(var t in n)void 0===n[t]&&delete n[t];return n}function je(e,n){void 0===n&&(n=[]);for(var t=Object.assign({},e),r=0,o=n;r<o.length;r++){var a=o[r];a in t&&delete t[a]}return t}function De(e){for(var n=e.parentElement,t=null;n&&!(n instanceof HTMLFieldSetElement);)n instanceof HTMLLegendElement&&(t=n),n=n.parentElement;var r=""===(null==n?void 0:n.getAttribute("disabled"));return(!r||!function(e){if(!e)return!1;for(var n=e.previousElementSibling;null!==n;){if(n instanceof HTMLLegendElement)return!1;n=n.previousElementSibling}return!0}(t))&&r}var Re=function(e){return e[e.None=1]="None",e[e.Focusable=2]="Focusable",e[e.Hidden=4]="Hidden",e}(Re||{}),Me=ke((function(e,n){var t=e.features,r=void 0===t?1:t,o=q(e,["features"]);return Se({ourProps:{ref:n,"aria-hidden":2==(2&r)||void 0,style:H({position:"fixed",top:1,left:1,width:1,height:0,padding:0,margin:-1,overflow:"hidden",clip:"rect(0, 0, 0, 0)",whiteSpace:"nowrap",borderWidth:"0"},4==(4&r)&&2!=(2&r)&&{display:"none"})},theirProps:o,slot:{},defaultTag:"div",name:"Hidden"})})),Le=n.createContext(null);Le.displayName="OpenClosedContext";var Ie=function(e){return e[e.Open=0]="Open",e[e.Closed=1]="Closed",e}(Ie||{});var Be=function(e){return e.Space=" ",e.Enter="Enter",e.Escape="Escape",e.Backspace="Backspace",e.Delete="Delete",e.ArrowLeft="ArrowLeft",e.ArrowUp="ArrowUp",e.ArrowRight="ArrowRight",e.ArrowDown="ArrowDown",e.Home="Home",e.End="End",e.PageUp="PageUp",e.PageDown="PageDown",e.Tab="Tab",e}(Be||{});function He(e,t){var r=n.useRef([]),o=ae(e);n.useEffect((function(){for(var e=z([],r.current,!0),n=0,a=t.entries();n<a.length;n++){var i=a[n],u=i[0],l=i[1];if(r.current[u]!==l){var c=o(t,e);return r.current=t,c}}}),z([o],t,!0))}var qe=function(e){return e[e.Forwards=0]="Forwards",e[e.Backwards=1]="Backwards",e}(qe||{});function Ue(){var e=n.useRef(0);return function(e,t,r){var o=ne(t);n.useEffect((function(){function n(e){o.current(e)}return window.addEventListener(e,n,r),function(){return window.removeEventListener(e,n,r)}}),[e,r])}("keydown",(function(n){"Tab"===n.key&&(e.current=n.shiftKey?1:0)}),!0),e}function _e(){var e=n.useRef(!1);return ee((function(){return e.current=!0,function(){e.current=!1}}),[]),e}function ze(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];return n.useMemo((function(){return de.apply(void 0,e)}),z([],e,!0))}function We(e,t,r,o){var a=ne(r);n.useEffect((function(){function n(e){a.current(e)}return(e=null!=e?e:window).addEventListener(t,n,o),function(){return e.removeEventListener(t,n,o)}}),[e,t,o])}var Ge=function(e){return e[e.None=1]="None",e[e.InitialFocus=2]="InitialFocus",e[e.TabLock=4]="TabLock",e[e.FocusLock=8]="FocusLock",e[e.RestoreFocus=16]="RestoreFocus",e[e.All=30]="All",e}(Ge||{}),Ye=Object.assign(ke((function(e,t){var r=n.useRef(null),o=Ne(r,t),i=e.initialFocus,u=e.containers,l=e.features,c=void 0===l?30:l,s=q(e,["initialFocus","containers","features"]);ue()||(c=1);var f=ze(r);!function(e,t){var r=e.ownerDocument,o=n.useRef(null);We(null==r?void 0:r.defaultView,"focusout",(function(e){!t||o.current||(o.current=e.target)}),!0),He((function(){t||((null==r?void 0:r.activeElement)===(null==r?void 0:r.body)&&be(o.current),o.current=null)}),[t]);var a=n.useRef(!1);n.useEffect((function(){return a.current=!1,function(){a.current=!0,te((function(){!a.current||(be(o.current),o.current=null)}))}}),[])}({ownerDocument:f},Boolean(16&c));var d=function(e,t){var r=e.ownerDocument,o=e.container,a=e.initialFocus,i=n.useRef(null),u=_e();return He((function(){if(t){var e=o.current;!e||te((function(){if(u.current){var n=null==r?void 0:r.activeElement;if(null!=a&&a.current){if((null==a?void 0:a.current)===n)return void(i.current=n)}else if(e.contains(n))return void(i.current=n);null!=a&&a.current?be(a.current):Ee(e,ve.First)===me.Error&&console.warn("There are no focusable elements inside the <FocusTrap />"),i.current=null==r?void 0:r.activeElement}}))}}),[t]),i}({ownerDocument:f,container:r,initialFocus:i},Boolean(2&c));!function(e,n){var t=e.ownerDocument,r=e.container,o=e.containers,a=e.previousActiveElement,i=_e();We(null==t?void 0:t.defaultView,"focus",(function(e){if(n&&i.current){var t=new Set(null==o?void 0:o.current);t.add(r);var u=a.current;if(u){var l=e.target;l&&l instanceof HTMLElement?function(e,n){for(var t,r=0,o=e;r<o.length;r++){if(null!=(t=o[r].current)&&t.contains(n))return!0}return!1}(t,l)?(a.current=l,be(l)):(e.preventDefault(),e.stopPropagation(),be(u)):be(a.current)}}}),!0)}({ownerDocument:f,container:r,containers:u,previousActiveElement:d},Boolean(8&c));var p=Ue(),v=ae((function(){var e,n=r.current;!n||fe(p.current,((e={})[qe.Forwards]=function(){return Ee(n,ve.First)},e[qe.Backwards]=function(){return Ee(n,ve.Last)},e))})),m={ref:o};return a.default.createElement(a.default.Fragment,null,Boolean(4&c)&&a.default.createElement(Me,{as:"button",type:"button",onFocus:v,features:Re.Focusable}),Se({ourProps:m,theirProps:s,defaultTag:"div",name:"FocusTrap"}),Boolean(4&c)&&a.default.createElement(Me,{as:"button",type:"button",onFocus:v,features:Re.Focusable}))})),{features:Ge});var Ve=new Set,Ke=new Map;function Qe(e){e.setAttribute("aria-hidden","true"),e.inert=!0}function Je(e){var n=Ke.get(e);!n||(null===n["aria-hidden"]?e.removeAttribute("aria-hidden"):e.setAttribute("aria-hidden",n["aria-hidden"]),e.inert=n.inert)}function Xe(e,n){void 0===n&&(n=!0),ee((function(){if(n&&e.current){var t=e.current,r=de(t);if(r){Ve.add(t);for(var o=0,a=Ke.keys();o<a.length;o++){var i=a[o];i.contains(t)&&(Je(i),Ke.delete(i))}return r.querySelectorAll("body > *").forEach((function(e){if(e instanceof HTMLElement){for(var n=0,t=Ve;n<t.length;n++){var r=t[n];if(e.contains(r))return}1===Ve.size&&(Ke.set(e,{"aria-hidden":e.getAttribute("aria-hidden"),inert:e.inert}),Qe(e))}})),function(){if(Ve.delete(t),Ve.size>0)r.querySelectorAll("body > *").forEach((function(e){if(e instanceof HTMLElement&&!Ke.has(e)){for(var n=0,t=Ve;n<t.length;n++){var r=t[n];if(e.contains(r))return}Ke.set(e,{"aria-hidden":e.getAttribute("aria-hidden"),inert:e.inert}),Qe(e)}}));else for(var e=0,n=Ke.keys();e<n.length;e++){var o=n[e];Je(o),Ke.delete(o)}}}}}),[n])}var Ze=n.createContext(!1);function $e(){return n.useContext(Ze)}function en(e){return a.default.createElement(Ze.Provider,{value:e.force},e.children)}function nn(e){var t=$e(),r=n.useContext(an),o=ze(e),a=n.useState((function(){if(!t&&null!==r||$)return null;var e=null==o?void 0:o.getElementById("headlessui-portal-root");if(e)return e;if(null===o)return null;var n=o.createElement("div");return n.setAttribute("id","headlessui-portal-root"),o.body.appendChild(n)})),i=a[0],u=a[1];return n.useEffect((function(){null!==i&&(null!=o&&o.body.contains(i)||null==o||o.body.appendChild(i))}),[i,o]),n.useEffect((function(){t||null!==r&&u(r.current)}),[r,u,t]),i}var tn=n.Fragment,rn=ke((function(e,r){var o=e,a=n.useRef(null),i=Ne(function(e,n){var t;return void 0===n&&(n=!0),Object.assign(e,((t={})[Oe]=n,t))}((function(e){a.current=e})),r),u=ze(a),l=nn(a),c=n.useState((function(){var e;return $?null:null!=(e=null==u?void 0:u.createElement("div"))?e:null}))[0],s=ue(),f=n.useRef(!1);return ee((function(){if(f.current=!1,l&&c)return l.contains(c)||(c.setAttribute("data-headlessui-portal",""),l.appendChild(c)),function(){f.current=!0,te((function(){var e;!f.current||!l||!c||(l.removeChild(c),l.childNodes.length<=0&&(null==(e=l.parentElement)||e.removeChild(l)))}))}}),[l,c]),s&&l&&c?t.createPortal(Se({ourProps:{ref:i},theirProps:o,defaultTag:tn,name:"Portal"}),c):null})),on=n.Fragment,an=n.createContext(null),un=ke((function(e,n){var t=e.target,r=q(e,["target"]),o={ref:Ne(n)};return a.default.createElement(an.Provider,{value:t},Se({ourProps:o,theirProps:r,defaultTag:on,name:"Popover.Group"}))})),ln=Object.assign(rn,{Group:un}),cn=n.createContext(null);function sn(){var e=n.useContext(cn);if(null===e){var t=new Error("You used a <Description /> component, but it is not inside a relevant parent.");throw Error.captureStackTrace&&Error.captureStackTrace(t,sn),t}return e}function fn(){var e=n.useState([]),t=e[0],r=e[1];return[t.length>0?t.join(" "):void 0,n.useMemo((function(){return function(e){var t=ae((function(e){return r((function(n){return z(z([],n,!0),[e],!1)})),function(){return r((function(n){var t=n.slice(),r=t.indexOf(e);return-1!==r&&t.splice(r,1),t}))}})),o=n.useMemo((function(){return{register:t,slot:e.slot,name:e.name,props:e.props}}),[t,e.slot,e.name,e.props]);return a.default.createElement(cn.Provider,{value:o},e.children)}}),[r])]}var dn=ke((function(e,n){var t=sn(),r="headlessui-description-".concat(se()),o=Ne(n);ee((function(){return t.register(r)}),[r,t.register]);var a=e;return Se({ourProps:H(H({ref:o},t.props),{id:r}),theirProps:a,slot:t.slot||{},defaultTag:"p",name:t.name||"Description"})})),pn=n.createContext((function(){}));pn.displayName="StackContext";var vn,mn=function(e){return e[e.Add=0]="Add",e[e.Remove=1]="Remove",e}(mn||{});function gn(e){var t=e.children,r=e.onUpdate,o=e.type,i=e.element,u=e.enabled,l=n.useContext(pn),c=ae((function(){for(var e=[],n=0;n<arguments.length;n++)e[n]=arguments[n];null==r||r.apply(void 0,e),l.apply(void 0,e)}));return ee((function(){var e=void 0===u||!0===u;return e&&c(0,o,i),function(){e&&c(1,o,i)}}),[c,o,i,u]),a.default.createElement(pn.Provider,{value:c},t)}var hn=function(e){return e[e.Open=0]="Open",e[e.Closed=1]="Closed",e}(hn||{}),bn=function(e){return e[e.SetTitleId=0]="SetTitleId",e}(bn||{}),yn=((vn={})[0]=function(e,n){return e.titleId===n.id?e:H(H({},e),{titleId:n.id})},vn),En=n.createContext(null);function wn(e){var t=n.useContext(En);if(null===t){var r=new Error("<".concat(e," /> is missing a parent <Dialog /> component."));throw Error.captureStackTrace&&Error.captureStackTrace(r,wn),r}return t}function Pn(e,t){n.useEffect((function(){var n;if(t&&e){var r=re(),o=e.documentElement,a=(null!=(n=e.defaultView)?n:window).innerWidth-o.clientWidth;if(l(o,"overflow","hidden"),a>0){var i=o.clientWidth-o.offsetWidth;l(o,"paddingRight","".concat(a-i,"px"))}if(/iPhone/gi.test(window.navigator.platform)||/Mac/gi.test(window.navigator.platform)&&window.navigator.maxTouchPoints>0){var u=window.pageYOffset;l(o,"position","fixed"),l(o,"marginTop","-".concat(u,"px")),l(o,"width","100%"),r.add((function(){return window.scrollTo(0,u)}))}return r.dispose}function l(e,n,t){var o,a=e.style.getPropertyValue(n);return Object.assign(e.style,((o={})[n]=t,o)),r.add((function(){var t;Object.assign(e.style,((t={})[n]=a,t))}))}}),[e,t])}function On(e,n){return fe(n.type,yn,e,n)}En.displayName="DialogContext";var Nn=Ce.RenderStrategy|Ce.Static,Cn=ke((function(e,t){var r,o=e.open,i=e.onClose,u=e.initialFocus,l=e.__demoMode,c=void 0!==l&&l,s=q(e,["open","onClose","initialFocus","__demoMode"]),f=n.useState(0),d=f[0],p=f[1],v=n.useContext(Le);void 0===o&&null!==v&&(o=fe(v,((r={})[Ie.Open]=!0,r[Ie.Closed]=!1,r)));var m=n.useRef(new Set),g=n.useRef(null),h=Ne(g,t),b=n.useRef(null),y=ze(g),E=e.hasOwnProperty("open")||null!==v,w=e.hasOwnProperty("onClose");if(!E&&!w)throw new Error("You have to provide an `open` and an `onClose` prop to the `Dialog` component.");if(!E)throw new Error("You provided an `onClose` prop to the `Dialog`, but forgot an `open` prop.");if(!w)throw new Error("You provided an `open` prop to the `Dialog`, but forgot an `onClose` prop.");if("boolean"!=typeof o)throw new Error("You provided an `open` prop to the `Dialog`, but the value is not a boolean. Received: ".concat(o));if("function"!=typeof i)throw new Error("You provided an `onClose` prop to the `Dialog`, but the value is not a function. Received: ".concat(i));var P=o?0:1,O=n.useReducer(On,{titleId:null,descriptionId:null,panelRef:n.createRef()}),N=O[0],C=O[1],x=ae((function(){return i(!1)})),S=ae((function(e){return C({type:0,id:e})})),T=!!ue()&&(!c&&0===P),F=d>1,k=null!==n.useContext(En),A=F?"parent":"leaf";Xe(g,!!F&&T),Pe((function(){var e,n;return z(z([],Array.from(null!=(e=null==y?void 0:y.querySelectorAll("body > *, [data-headlessui-portal]"))?e:[]).filter((function(e){return!(!(e instanceof HTMLElement)||e.contains(b.current)||N.panelRef.current&&e.contains(N.panelRef.current))})),!0),[null!=(n=N.panelRef.current)?n:g.current],!1)}),x,T&&!F),We(null==y?void 0:y.defaultView,"keydown",(function(e){e.defaultPrevented||e.key===Be.Escape&&0===P&&(F||(e.preventDefault(),e.stopPropagation(),x()))})),Pn(y,0===P&&!k),n.useEffect((function(){if(0===P&&g.current){var e=new IntersectionObserver((function(e){for(var n=0,t=e;n<t.length;n++){var r=t[n];0===r.boundingClientRect.x&&0===r.boundingClientRect.y&&0===r.boundingClientRect.width&&0===r.boundingClientRect.height&&x()}}));return e.observe(g.current),function(){return e.disconnect()}}}),[P,g,x]);var j=fn(),D=j[0],R=j[1],M="headlessui-dialog-".concat(se()),L=n.useMemo((function(){return[{dialogState:P,close:x,setTitleId:S},N]}),[P,N,x,S]),I=n.useMemo((function(){return{open:0===P}}),[P]),B={ref:h,id:M,role:"dialog","aria-modal":0===P||void 0,"aria-labelledby":N.titleId,"aria-describedby":D};return a.default.createElement(gn,{type:"Dialog",enabled:0===P,element:g,onUpdate:ae((function(e,n,t){var r;"Dialog"===n&&fe(e,((r={})[mn.Add]=function(){m.current.add(t),p((function(e){return e+1}))},r[mn.Remove]=function(){m.current.add(t),p((function(e){return e-1}))},r))}))},a.default.createElement(en,{force:!0},a.default.createElement(ln,null,a.default.createElement(En.Provider,{value:L},a.default.createElement(ln.Group,{target:g},a.default.createElement(en,{force:!1},a.default.createElement(R,{slot:I,name:"Dialog.Description"},a.default.createElement(Ye,{initialFocus:u,containers:m,features:T?fe(A,{parent:Ye.features.RestoreFocus,leaf:Ye.features.All&~Ye.features.FocusLock}):Ye.features.None},Se({ourProps:B,theirProps:s,slot:I,defaultTag:"div",features:Nn,visible:0===P,name:"Dialog"})))))))),a.default.createElement(Me,{features:Re.Hidden,ref:b}))})),xn=ke((function(e,t){var r=wn("Dialog.Overlay")[0],o=r.dialogState,a=r.close,i=Ne(t),u="headlessui-dialog-overlay-".concat(se()),l=ae((function(e){if(e.target===e.currentTarget){if(De(e.currentTarget))return e.preventDefault();e.preventDefault(),e.stopPropagation(),a()}}));return Se({ourProps:{ref:i,id:u,"aria-hidden":!0,onClick:l},theirProps:e,slot:n.useMemo((function(){return{open:0===o}}),[o]),defaultTag:"div",name:"Dialog.Overlay"})})),Sn=ke((function(e,t){var r=wn("Dialog.Backdrop"),o=r[0].dialogState,i=r[1],u=Ne(t),l="headlessui-dialog-backdrop-".concat(se());n.useEffect((function(){if(null===i.panelRef.current)throw new Error("A <Dialog.Backdrop /> component is being used, but a <Dialog.Panel /> component is missing.")}),[i.panelRef]);var c=n.useMemo((function(){return{open:0===o}}),[o]);return a.default.createElement(en,{force:!0},a.default.createElement(ln,null,Se({ourProps:{ref:u,id:l,"aria-hidden":!0},theirProps:e,slot:c,defaultTag:"div",name:"Dialog.Backdrop"})))})),Tn=ke((function(e,t){var r=wn("Dialog.Panel"),o=r[0].dialogState,a=Ne(t,r[1].panelRef),i="headlessui-dialog-panel-".concat(se()),u=n.useMemo((function(){return{open:0===o}}),[o]),l=ae((function(e){e.stopPropagation()}));return Se({ourProps:{ref:a,id:i,onClick:l},theirProps:e,slot:u,defaultTag:"div",name:"Dialog.Panel"})})),Fn=ke((function(e,t){var r=wn("Dialog.Title")[0],o=r.dialogState,a=r.setTitleId,i="headlessui-dialog-title-".concat(se()),u=Ne(t);n.useEffect((function(){return a(i),function(){return a(null)}}),[i,a]);var l=n.useMemo((function(){return{open:0===o}}),[o]);return Se({ourProps:{ref:u,id:i},theirProps:e,slot:l,defaultTag:"h2",name:"Dialog.Title"})})),kn=Object.assign(Cn,{Backdrop:Sn,Panel:Tn,Overlay:xn,Title:Fn,Description:dn}),An="lds-panel",jn="lds-panel--header",Dn="lds-panel--content",Rn="lds-panel--footer",Mn="lds-panel--loading",Ln="lds-panel--loading-indicator";function In(e){var t,r,o,i=e.header,u=e.footer,c=e.className,s=e.wrapperComponent,f=e.wrapperProps,d=e.headerComponent,p=e.headerProps,v=e.contentComponent,m=e.contentProps,g=e.footerComponent,h=e.footerProps,b=e.loading,y=e.children,E=s||n.Fragment,w=d||"header",P=v||"div",O=g||"footer";return a.default.createElement(E,H({},f||{}),i&&a.default.createElement(w,H({},p||{},{className:l(An,jn,c,null==p?void 0:p.className,(t={},t[Mn]=b,t))}),i),a.default.createElement(P,H({},m||{},{className:l(An,Dn,c,null==m?void 0:m.className,(r={},r[Mn]=b,r))}),y,b&&a.default.createElement(Z,{size:"xxl",className:Ln})),u&&a.default.createElement(O,H({},h||{},{className:l(An,Rn,c,null==h?void 0:h.className,(o={},o[Mn]=b,o))}),u))}var Bn={modal:"lds-modal",modalContent:"lds-modal--modal-content",subTitle:"lds-modal--sub-title",sm:"lds-modal--sm",lg:"lds-modal--lg",xl:"lds-modal--xl"};var Hn="lds-switch",qn="lds-switch--disabled";e.Button=B,e.ButtonBar=G,e.Input=Q,e.LoadingIndicator=Z,e.Modal=function(e){var t=e.children,r=e.isOpen,o=e.onClose,i=e.title,u=e.subTitle,c=e.size,s=void 0===c?"md":c,f=e.contentComponent,d=e.contentProps,p=e.buttonBarProps,v=void 0===p?{}:p,m=e.className,g=void 0===m?"":m,h=e.footer,b=n.useMemo((function(){return H(H({},d||{}),{className:l(Bn.modalContent,(null==d?void 0:d.className)||"")})}),[d]);return r?a.default.createElement(kn,{open:r,onClose:o,className:l(Bn.modal,Bn[s],"lds-web")},a.default.createElement(In,{wrapperComponent:f||"div",wrapperProps:b,className:g,headerComponent:kn.Title,headerProps:{as:"header"},header:a.default.createElement(a.default.Fragment,null,a.default.createElement("h3",{className:"lds-h1"},i),u?a.default.createElement("p",{className:Bn.subTitle},u):null),footer:h,footerComponent:G,footerProps:H(H({},v),{as:"footer"})},t)):null},e.Panel=In,e.Switch=function(e){var n,t=e.children,r=e.disabled,o=e.onChange,i=q(e,["children","disabled","onChange"]);return a.default.createElement("label",{className:l(Hn,(n={},n[qn]=r,n)),"data-testid":"switch"},t,a.default.createElement("input",H({type:"checkbox",role:"switch",disabled:r,onChange:function(e){return null==o?void 0:o(e.target.checked,e)}},i)))},Object.defineProperty(e,"__esModule",{value:!0})}));
package/package.json ADDED
@@ -0,0 +1,74 @@
1
+ {
2
+ "name": "@k8slens/lds",
3
+ "version": "0.1.15",
4
+ "description": "Lens Design System – Core React Component Library",
5
+ "author": "Mirantis Inc",
6
+ "license": "MIT",
7
+ "main": "./lib/cjs/index.js",
8
+ "module": "./lib/es/index.js",
9
+ "types": "./lib/es/index.d.ts",
10
+ "type": "module",
11
+ "files": [
12
+ "lib/"
13
+ ],
14
+ "scripts": {
15
+ "start": "npm run rollup-watch",
16
+ "build": "npm run clean && npm run rollup",
17
+ "build:production": "npm run build",
18
+ "rollup-watch": "rollup -c --watch",
19
+ "rollup": "rollup -c",
20
+ "clean": "rimraf lib",
21
+ "test": "jest",
22
+ "lint": "eslint --resolve-plugins-relative-to ./node_modules/@k8slens/eslint-config .",
23
+ "format": "eslint --resolve-plugins-relative-to ./node_modules/@k8slens/eslint-config --fix .",
24
+ "prepack": "node prepack"
25
+ },
26
+ "dependencies": {
27
+ "@k8slens/lds-tokens": ">=0.1.0 <1.0.0",
28
+ "@rollup/plugin-node-resolve": "^14.0.1",
29
+ "@svgr/rollup": "^6.3.1",
30
+ "glob": "^8.0.3",
31
+ "postcss-import": "^15.0.0",
32
+ "rimraf": "^3.0.2",
33
+ "rollup": "^2.79.0",
34
+ "rollup-plugin-delete": "^2.0.0",
35
+ "rollup-plugin-inline-svg": "^3.0.3",
36
+ "rollup-plugin-peer-deps-external": "^2.2.4",
37
+ "rollup-plugin-postcss": "^4.0.2",
38
+ "rollup-plugin-terser": "^7.0.2",
39
+ "rollup-plugin-typescript": "^1.0.1",
40
+ "rollup-plugin-typescript2": "^0.33.0",
41
+ "tailwindcss": "^3.1.8"
42
+ },
43
+ "devDependencies": {
44
+ "@k8slens/eslint-config": ">=0.1.0 <1.0.0",
45
+ "@storybook/react": "^6.5.10",
46
+ "@testing-library/jest-dom": "^5.16.5",
47
+ "@testing-library/react": "^13.4.0",
48
+ "@testing-library/user-event": "^13.5.0",
49
+ "@types/jest": "^27.5.2",
50
+ "eslint": "^8.26.0",
51
+ "jest": "^29.2.2",
52
+ "jest-environment-jsdom": "^29.2.2",
53
+ "ts-jest": "^29.0.3"
54
+ },
55
+ "peerDependencies": {
56
+ "@headlessui/react": "^1.7.3",
57
+ "@k8slens/lds-icons": ">=0.1.0 <1.0.0",
58
+ "@types/react": "^18.0.18",
59
+ "@types/react-dom": "^18.0.6",
60
+ "clsx": "^1.2.1",
61
+ "react": "^18.2.0",
62
+ "react-dom": "^18.2.0"
63
+ },
64
+ "jest": {
65
+ "testEnvironment": "jsdom",
66
+ "transform": {
67
+ "^.+\\.(ts|tsx|js|jsx)$": "ts-jest"
68
+ },
69
+ "moduleNameMapper": {
70
+ "\\.(css|less)$": "<rootDir>/../../__mocks__/CSSStub.js",
71
+ "\\.svg": "<rootDir>/../../__mocks__/SVGStub.js"
72
+ }
73
+ }
74
+ }