@abgov/react-components 5.4.0 → 6.0.0-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (91) hide show
  1. package/experimental/form/form-summary.d.ts +2 -1
  2. package/experimental/form/form.d.ts +10 -21
  3. package/experimental/form/task-list.d.ts +6 -5
  4. package/experimental/form/task.d.ts +6 -5
  5. package/experimental/index.d.ts +2 -2
  6. package/experimental/resizable-panel/ResizablePanel.d.ts +2 -1
  7. package/experimental.js +4 -4
  8. package/experimental.js.map +1 -1
  9. package/experimental.mjs +4 -4
  10. package/experimental.mjs.map +1 -1
  11. package/{icon-1IRcN4Uf.js → icon-DmXlIizF.js} +3 -3
  12. package/icon-DmXlIizF.js.map +1 -0
  13. package/{icon-DgSW1II3.mjs → icon-iZ6Uu6WB.mjs} +3 -3
  14. package/icon-iZ6Uu6WB.mjs.map +1 -0
  15. package/index.d.ts +60 -61
  16. package/index.js +241 -257
  17. package/index.js.map +1 -1
  18. package/index.mjs +241 -257
  19. package/index.mjs.map +1 -1
  20. package/lib/accordion/accordion.d.ts +11 -12
  21. package/lib/app-header/app-header.d.ts +4 -3
  22. package/lib/app-header-menu/app-header-menu.d.ts +8 -7
  23. package/lib/badge/badge.d.ts +10 -10
  24. package/lib/block/block.d.ts +9 -9
  25. package/lib/button/button.d.ts +14 -20
  26. package/lib/button-group/button-group.d.ts +9 -11
  27. package/lib/calendar/calendar.d.ts +6 -5
  28. package/lib/callout/callout.d.ts +13 -17
  29. package/lib/card/card-actions.d.ts +4 -3
  30. package/lib/card/card-content.d.ts +4 -3
  31. package/lib/card/card-group.d.ts +4 -3
  32. package/lib/card/card-image.d.ts +4 -3
  33. package/lib/card/card.d.ts +6 -4
  34. package/lib/card/index.d.ts +5 -5
  35. package/lib/checkbox/checkbox.d.ts +7 -6
  36. package/lib/chip/chip.d.ts +9 -10
  37. package/lib/circular-progress/circular-progress.d.ts +9 -11
  38. package/lib/container/container.d.ts +14 -17
  39. package/lib/date-picker/date-picker.d.ts +6 -5
  40. package/lib/details/details.d.ts +6 -6
  41. package/lib/divider/divider.d.ts +5 -4
  42. package/lib/drawer/drawer.d.ts +2 -1
  43. package/lib/dropdown/dropdown-item.d.ts +7 -6
  44. package/lib/dropdown/dropdown.d.ts +7 -7
  45. package/lib/fieldset/fieldset.d.ts +7 -6
  46. package/lib/file-upload-card/file-upload-card.d.ts +8 -6
  47. package/lib/file-upload-input/file-upload-input.d.ts +8 -7
  48. package/lib/filter-chip/filter-chip.d.ts +4 -4
  49. package/lib/footer/footer.d.ts +6 -5
  50. package/lib/footer-meta-section/footer-meta-section.d.ts +5 -5
  51. package/lib/footer-nav-section/footer-nav-section.d.ts +5 -4
  52. package/lib/form-item/form-item.d.ts +11 -12
  53. package/lib/form-step/form-step.d.ts +7 -7
  54. package/lib/form-stepper/form-stepper.d.ts +7 -7
  55. package/lib/grid/grid.d.ts +5 -4
  56. package/lib/hero-banner/hero-banner-actions.d.ts +4 -3
  57. package/lib/hero-banner/hero-banner.d.ts +4 -3
  58. package/lib/icon/icon.d.ts +11 -18
  59. package/lib/icon-button/icon-button.d.ts +10 -12
  60. package/lib/input/input.d.ts +40 -43
  61. package/lib/link/link.d.ts +7 -7
  62. package/lib/link-button/link-button.d.ts +9 -10
  63. package/lib/microsite-header/microsite-header.d.ts +12 -14
  64. package/lib/modal/modal.d.ts +12 -17
  65. package/lib/notification/notification.d.ts +9 -11
  66. package/lib/one-column-layout/one-column-layout.d.ts +6 -5
  67. package/lib/page-block/page-block.d.ts +5 -4
  68. package/lib/pages/pages.d.ts +6 -5
  69. package/lib/pagination/pagination.d.ts +7 -6
  70. package/lib/popover/popover.d.ts +8 -8
  71. package/lib/radio-group/radio-group.d.ts +9 -9
  72. package/lib/radio-group/radio.d.ts +5 -4
  73. package/lib/side-menu/side-menu.d.ts +5 -5
  74. package/lib/side-menu-group/side-menu-group.d.ts +8 -8
  75. package/lib/side-menu-heading/side-menu-heading.d.ts +8 -7
  76. package/lib/skeleton/skeleton.d.ts +10 -12
  77. package/lib/spacer/spacer.d.ts +9 -9
  78. package/lib/spinner/spinner.d.ts +10 -10
  79. package/lib/tab/tab.d.ts +3 -3
  80. package/lib/table/table-sort-header.d.ts +7 -6
  81. package/lib/table/table.d.ts +10 -11
  82. package/lib/tabs/tabs.d.ts +7 -5
  83. package/lib/text/text.d.ts +11 -16
  84. package/lib/textarea/textarea.d.ts +9 -10
  85. package/lib/three-column-layout/three-column-layout.d.ts +5 -4
  86. package/lib/tooltip/tooltip.d.ts +10 -11
  87. package/lib/two-column-layout/two-column-layout.d.ts +5 -4
  88. package/package.json +2 -2
  89. package/common/styling.d.ts +0 -12
  90. package/icon-1IRcN4Uf.js.map +0 -1
  91. package/icon-DgSW1II3.mjs.map +0 -1
@@ -6,4 +6,5 @@ declare global {
6
6
  }
7
7
  }
8
8
  }
9
- export declare function GoASimpleFormSummary(): import("react/jsx-runtime").JSX.Element;
9
+ export declare function GoabSimpleFormSummary(): import("react/jsx-runtime").JSX.Element;
10
+ export default GoabSimpleFormSummary;
@@ -1,18 +1,10 @@
1
- import { ReactNode } from "react";
2
- import { Margins } from "../../common/styling";
3
- export type FormState = {
4
- form: Record<string, Record<string, {
5
- label: string;
6
- value: string;
7
- }>>;
8
- history: string[];
9
- editting: string;
10
- lastModified?: Date;
11
- };
1
+ import { Margins, GoabFormStorageType, GoabFormOnMountDetail, GoabFormOnStateChange } from '../../../../../dist/libs/common/index.d.ts';
2
+ import { ReactNode } from 'react';
3
+
12
4
  interface WCProps extends Margins {
13
5
  ref?: React.MutableRefObject<HTMLElement | undefined>;
14
6
  name: string;
15
- storage: "none" | "local" | "session";
7
+ storage: GoabFormStorageType;
16
8
  }
17
9
  declare global {
18
10
  namespace JSX {
@@ -21,15 +13,12 @@ declare global {
21
13
  }
22
14
  }
23
15
  }
24
- interface GoAFormProps extends Margins {
16
+ interface GoabFormProps extends Margins {
25
17
  children: ReactNode;
26
18
  name: string;
27
- storage: "none" | "local" | "session";
28
- onMount: (fn: (next: string) => void) => void;
29
- onStateChange?: (id: string, state: Record<string, Record<string, {
30
- label: string;
31
- value: string;
32
- }>>) => void;
19
+ storage: GoabFormStorageType;
20
+ onMount: (e: GoabFormOnMountDetail) => void;
21
+ onStateChange?: (e: GoabFormOnStateChange) => void;
33
22
  }
34
- export declare function GoASimpleForm({ name, storage, onMount, onStateChange, mt, mr, mb, ml, children, }: GoAFormProps): import("react/jsx-runtime").JSX.Element;
35
- export {};
23
+ export declare function GoabSimpleForm({ name, storage, onMount, onStateChange, mt, mr, mb, ml, children, }: GoabFormProps): import("react/jsx-runtime").JSX.Element;
24
+ export default GoabSimpleForm;
@@ -1,5 +1,6 @@
1
- import { ReactNode } from "react";
2
- import { Margins } from "../../common/styling";
1
+ import { Margins } from '../../../../../dist/libs/common/index.d.ts';
2
+ import { ReactNode } from 'react';
3
+
3
4
  interface WCProps extends Margins {
4
5
  heading: string;
5
6
  }
@@ -10,9 +11,9 @@ declare global {
10
11
  }
11
12
  }
12
13
  }
13
- type GoAPublicFormTaskListProps = {
14
+ type GoabPublicFormTaskListProps = {
14
15
  heading: string;
15
16
  children: ReactNode;
16
17
  };
17
- export declare function GoAPublicFormTaskList({ heading, children }: GoAPublicFormTaskListProps): import("react/jsx-runtime").JSX.Element;
18
- export {};
18
+ export declare function GoabPublicFormTaskList({ heading, children }: GoabPublicFormTaskListProps): import("react/jsx-runtime").JSX.Element;
19
+ export default GoabPublicFormTaskList;
@@ -1,5 +1,6 @@
1
- import { ReactNode } from "react";
2
- import { Margins } from "../../common/styling";
1
+ import { Margins } from '../../../../../dist/libs/common/index.d.ts';
2
+ import { ReactNode } from 'react';
3
+
3
4
  interface WCProps extends Margins {
4
5
  status: "completed" | "not-started" | "cannot-start";
5
6
  }
@@ -10,9 +11,9 @@ declare global {
10
11
  }
11
12
  }
12
13
  }
13
- type GoAPublicFormTaskProps = {
14
+ type GoabPublicFormTaskProps = {
14
15
  status: "completed" | "not-started" | "cannot-start";
15
16
  children: ReactNode;
16
17
  };
17
- export declare function GoAPublicFormTask({ status, children }: GoAPublicFormTaskProps): import("react/jsx-runtime").JSX.Element;
18
- export {};
18
+ export declare function GoabPublicFormTask({ status, children }: GoabPublicFormTaskProps): import("react/jsx-runtime").JSX.Element;
19
+ export default GoabPublicFormTask;
@@ -1,2 +1,2 @@
1
- export * from "./resizable-panel/ResizablePanel";
2
- export * from "../lib/drawer/drawer";
1
+ export * from './resizable-panel/ResizablePanel';
2
+ export * from '../lib/drawer/drawer';
@@ -1,4 +1,5 @@
1
- import { ReactNode } from "react";
1
+ import { ReactNode } from 'react';
2
+
2
3
  export type ResizableProps = {
3
4
  minWidth?: number;
4
5
  children: ReactNode;
package/experimental.js CHANGED
@@ -2,7 +2,7 @@
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
3
  const jsxRuntime = require("react/jsx-runtime");
4
4
  const react = require("react");
5
- const icon = require("./icon-1IRcN4Uf.js");
5
+ const icon = require("./icon-DmXlIizF.js");
6
6
  const panel = "_panel_m3z4m_1";
7
7
  const panelBackground = "_panelBackground_m3z4m_8";
8
8
  const children = "_children_m3z4m_12";
@@ -16,12 +16,12 @@ const Css = {
16
16
  width
17
17
  };
18
18
  function ResizablePanel(props) {
19
- const maxWidth = react.useRef(0);
20
- const resizeBarState = react.useRef("static");
21
19
  const bgRef = react.useRef(null);
22
20
  const sectionRef = react.useRef(null);
23
21
  const widthRef = react.useRef(null);
24
22
  const handleRef = react.useRef(null);
23
+ const maxWidth = react.useRef(0);
24
+ const resizeBarState = react.useRef("static");
25
25
  const [width2, setWidth] = react.useState();
26
26
  react.useEffect(() => {
27
27
  var _a;
@@ -77,7 +77,7 @@ function ResizablePanel(props) {
77
77
  children: [
78
78
  /* @__PURE__ */ jsxRuntime.jsxs("section", { ref: sectionRef, className: Css.panel, children: [
79
79
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: Css.children, children: props.children }),
80
- /* @__PURE__ */ jsxRuntime.jsx("div", { ref: handleRef, className: Css.handle, children: /* @__PURE__ */ jsxRuntime.jsx(icon.GoAIcon, { type: "reorder-two" }) })
80
+ /* @__PURE__ */ jsxRuntime.jsx("div", { ref: handleRef, className: Css.handle, children: /* @__PURE__ */ jsxRuntime.jsx(icon.GoabIcon, { type: "reorder-two" }) })
81
81
  ] }),
82
82
  /* @__PURE__ */ jsxRuntime.jsx("div", { ref: widthRef, className: Css.width, children: width2 })
83
83
  ]
@@ -1 +1 @@
1
- {"version":3,"file":"experimental.js","sources":["../../../libs/react-components/src/experimental/resizable-panel/ResizablePanel.tsx","../../../libs/react-components/src/lib/drawer/drawer.tsx"],"sourcesContent":["import { ReactNode, useEffect, useRef, useState } from \"react\";\nimport Css from \"./ResizablePanel.module.css\";\nimport { GoAIcon } from \"../../lib/icon/icon\";\n\nexport type ResizableProps = {\n minWidth?: number;\n children: ReactNode;\n};\n\ntype MouseState = \"static\" | \"active\";\n\nexport function ResizablePanel(props: ResizableProps): JSX.Element {\n // value refs\n const maxWidth = useRef<number>(0);\n const resizeBarState = useRef<MouseState>(\"static\");\n\n // element refs\n const bgRef = useRef<HTMLDivElement | null>(null);\n const sectionRef = useRef<HTMLElement | null>(null);\n const widthRef = useRef<HTMLDivElement | null>(null);\n const handleRef = useRef<HTMLDivElement | null>(null);\n\n // state\n const [width, setWidth] = useState<string>();\n\n useEffect(() => {\n maxWidth.current = bgRef.current?.getBoundingClientRect().width ?? 0;\n }, []);\n\n function resetMouseState() {\n resizeBarState.current = \"static\";\n }\n\n function onMouseDown(_: React.MouseEvent) {\n resizeBarState.current = \"active\";\n window.addEventListener(\"mouseup\", resetMouseState);\n }\n\n function onMouseUp(_: React.MouseEvent) {\n resizeBarState.current = \"static\";\n window.removeEventListener(\"mouseup\", resetMouseState);\n }\n\n function onMouseMove(e: React.MouseEvent) {\n if (resizeBarState.current === \"static\") {\n return;\n }\n\n const sectionEl = sectionRef.current;\n const xOffset = sectionEl?.getBoundingClientRect().x || 0;\n const mouseX = e.clientX;\n const minWidth = props.minWidth || 0;\n\n if (mouseX <= 0) {\n return;\n }\n\n // mouse direction\n const newXPos = handleRef.current?.getBoundingClientRect().x ?? 0;\n\n // set width of preview area\n const calcWidth = Math.max(\n newXPos - xOffset,\n Math.min(mouseX - xOffset, maxWidth.current),\n );\n const elementWidth = Math.max(minWidth, calcWidth - 64); // 4rem padding\n\n // prevent dragging bar more than allowed\n if (elementWidth <= minWidth) {\n return;\n }\n\n // set resizable area width\n sectionEl?.setAttribute(\"style\", `width: ${calcWidth}px;`);\n // set displayed px width\n widthRef.current?.setAttribute(\n \"style\",\n `right: ${maxWidth.current - calcWidth + 32}px`,\n );\n setWidth(`${Math.round(elementWidth)}px`);\n }\n\n return (\n <div\n ref={bgRef}\n className={Css.panelBackground}\n onMouseDown={onMouseDown}\n onMouseMove={onMouseMove}\n onMouseUp={onMouseUp}\n >\n <section ref={sectionRef} className={Css.panel}>\n <div className={Css.children}>{props.children}</div>\n <div ref={handleRef} className={Css.handle}>\n <GoAIcon type=\"reorder-two\" />\n </div>\n </section>\n <div ref={widthRef} className={Css.width}>\n {width}\n </div>\n </div>\n );\n}\n\nexport default ResizablePanel;\n","import { ReactNode, useEffect, useRef } from \"react\";\n\ntype DrawerPosition = \"bottom\" | \"left\" | \"right\" | undefined;\ntype DrawerSizeUnit = \"px\" | \"rem\" | \"ch\" | \"vh\" | \"vw\";\ntype DrawerSize = `${number}${DrawerSizeUnit}` | undefined;\n\ninterface WCProps {\n open: boolean | undefined;\n position: DrawerPosition;\n heading?: string;\n maxsize?: DrawerSize;\n testid?: string;\n ref: React.RefObject<HTMLElement>;\n}\n\ndeclare global {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n // eslint-disable-next-line @typescript-eslint/no-empty-interface\n interface IntrinsicElements {\n \"goa-drawer\": WCProps & React.HTMLAttributes<HTMLElement>;\n }\n }\n}\n\nexport interface GoADrawerProps {\n open: boolean;\n position: DrawerPosition;\n heading?: string;\n maxSize?: DrawerSize;\n testId?: string;\n children: ReactNode;\n onClose: () => void;\n}\n\nexport function GoADrawer({\n open,\n position,\n heading,\n maxSize,\n testId,\n children,\n onClose,\n}: GoADrawerProps): JSX.Element {\n const el = useRef<HTMLElement>(null);\n\n useEffect(() => {\n if (!el?.current || !onClose) {\n return;\n }\n el.current?.addEventListener(\"_close\", onClose)\n return () => {\n el.current?.removeEventListener(\"_close\", onClose)\n }\n }, [el, onClose])\n\n return (\n <goa-drawer\n ref={el}\n open={open ? true : undefined}\n position={position}\n heading={heading}\n maxsize={maxSize}\n data-testid={testId}\n >\n {children}\n </goa-drawer>\n );\n}\n\nexport default GoADrawer;\n"],"names":["useRef","width","useState","useEffect","jsxs","jsx","GoAIcon","children","_a"],"mappings":"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"}
1
+ {"version":3,"file":"experimental.js","sources":["../../../libs/react-components/src/experimental/resizable-panel/ResizablePanel.tsx","../../../libs/react-components/src/lib/drawer/drawer.tsx"],"sourcesContent":["import { ReactNode, useEffect, useRef, useState } from \"react\";\nimport Css from \"./ResizablePanel.module.css\";\nimport { GoabIcon } from \"../../lib/icon/icon\";\n\nexport type ResizableProps = {\n minWidth?: number;\n children: ReactNode;\n};\n\ntype MouseState = \"static\" | \"active\";\n\nexport function ResizablePanel(props: ResizableProps): JSX.Element {\n // element refs\n const bgRef = useRef<HTMLDivElement | null>(null);\n const sectionRef = useRef<HTMLElement | null>(null);\n const widthRef = useRef<HTMLDivElement | null>(null);\n const handleRef = useRef<HTMLDivElement | null>(null);\n\n // value refs\n const maxWidth = useRef<number>(0);\n const resizeBarState = useRef<MouseState>(\"static\");\n\n // state\n const [width, setWidth] = useState<string>();\n\n useEffect(() => {\n maxWidth.current = bgRef.current?.getBoundingClientRect().width ?? 0;\n }, []);\n\n function resetMouseState() {\n resizeBarState.current = \"static\";\n }\n\n function onMouseDown(_: React.MouseEvent) {\n resizeBarState.current = \"active\";\n window.addEventListener(\"mouseup\", resetMouseState);\n }\n\n function onMouseUp(_: React.MouseEvent) {\n resizeBarState.current = \"static\";\n window.removeEventListener(\"mouseup\", resetMouseState);\n }\n\n function onMouseMove(e: React.MouseEvent) {\n if (resizeBarState.current === \"static\") {\n return;\n }\n\n const sectionEl = sectionRef.current;\n const xOffset = sectionEl?.getBoundingClientRect().x || 0;\n const mouseX = e.clientX;\n const minWidth = props.minWidth || 0;\n\n if (mouseX <= 0) {\n return;\n }\n\n // mouse direction\n const newXPos = handleRef.current?.getBoundingClientRect().x ?? 0;\n\n // set width of preview area\n const calcWidth = Math.max(\n newXPos - xOffset,\n Math.min(mouseX - xOffset, maxWidth.current),\n );\n const elementWidth = Math.max(minWidth, calcWidth - 64); // 4rem padding\n\n // prevent dragging bar more than allowed\n if (elementWidth <= minWidth) {\n return;\n }\n\n // set resizable area width\n sectionEl?.setAttribute(\"style\", `width: ${calcWidth}px;`);\n // set displayed px width\n widthRef.current?.setAttribute(\n \"style\",\n `right: ${maxWidth.current - calcWidth + 32}px`,\n );\n setWidth(`${Math.round(elementWidth)}px`);\n }\n\n return (\n <div\n ref={bgRef}\n className={Css.panelBackground}\n onMouseDown={onMouseDown}\n onMouseMove={onMouseMove}\n onMouseUp={onMouseUp}\n >\n <section ref={sectionRef} className={Css.panel}>\n <div className={Css.children}>{props.children}</div>\n <div ref={handleRef} className={Css.handle}>\n <GoabIcon type=\"reorder-two\" />\n </div>\n </section>\n <div ref={widthRef} className={Css.width}>\n {width}\n </div>\n </div>\n );\n}\n\nexport default ResizablePanel;\n","import { ReactNode, useEffect, useRef } from \"react\";\n\ntype DrawerPosition = \"bottom\" | \"left\" | \"right\" | undefined;\ntype DrawerSizeUnit = \"px\" | \"rem\" | \"ch\" | \"vh\" | \"vw\";\ntype DrawerSize = `${number}${DrawerSizeUnit}` | undefined;\n\ninterface WCProps {\n open: boolean | undefined;\n position: DrawerPosition;\n heading?: string;\n maxsize?: DrawerSize;\n testid?: string;\n ref: React.RefObject<HTMLElement>;\n}\n\ndeclare global {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n // eslint-disable-next-line @typescript-eslint/no-empty-interface\n interface IntrinsicElements {\n \"goa-drawer\": WCProps & React.HTMLAttributes<HTMLElement>;\n }\n }\n}\n\nexport interface GoADrawerProps {\n open: boolean;\n position: DrawerPosition;\n heading?: string;\n maxSize?: DrawerSize;\n testId?: string;\n children: ReactNode;\n onClose: () => void;\n}\n\nexport function GoADrawer({\n open,\n position,\n heading,\n maxSize,\n testId,\n children,\n onClose,\n}: GoADrawerProps): JSX.Element {\n const el = useRef<HTMLElement>(null);\n\n useEffect(() => {\n if (!el?.current || !onClose) {\n return;\n }\n el.current?.addEventListener(\"_close\", onClose)\n return () => {\n el.current?.removeEventListener(\"_close\", onClose)\n }\n }, [el, onClose])\n\n return (\n <goa-drawer\n ref={el}\n open={open ? true : undefined}\n position={position}\n heading={heading}\n maxsize={maxSize}\n data-testid={testId}\n >\n {children}\n </goa-drawer>\n );\n}\n\nexport default GoADrawer;\n"],"names":["useRef","width","useState","useEffect","jsxs","jsx","GoabIcon","children","_a"],"mappings":"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"}
package/experimental.mjs CHANGED
@@ -1,6 +1,6 @@
1
1
  import { jsxs, jsx } from "react/jsx-runtime";
2
2
  import { useRef, useState, useEffect } from "react";
3
- import { G as GoAIcon } from "./icon-DgSW1II3.mjs";
3
+ import { G as GoabIcon } from "./icon-iZ6Uu6WB.mjs";
4
4
  const panel = "_panel_m3z4m_1";
5
5
  const panelBackground = "_panelBackground_m3z4m_8";
6
6
  const children = "_children_m3z4m_12";
@@ -14,12 +14,12 @@ const Css = {
14
14
  width
15
15
  };
16
16
  function ResizablePanel(props) {
17
- const maxWidth = useRef(0);
18
- const resizeBarState = useRef("static");
19
17
  const bgRef = useRef(null);
20
18
  const sectionRef = useRef(null);
21
19
  const widthRef = useRef(null);
22
20
  const handleRef = useRef(null);
21
+ const maxWidth = useRef(0);
22
+ const resizeBarState = useRef("static");
23
23
  const [width2, setWidth] = useState();
24
24
  useEffect(() => {
25
25
  var _a;
@@ -75,7 +75,7 @@ function ResizablePanel(props) {
75
75
  children: [
76
76
  /* @__PURE__ */ jsxs("section", { ref: sectionRef, className: Css.panel, children: [
77
77
  /* @__PURE__ */ jsx("div", { className: Css.children, children: props.children }),
78
- /* @__PURE__ */ jsx("div", { ref: handleRef, className: Css.handle, children: /* @__PURE__ */ jsx(GoAIcon, { type: "reorder-two" }) })
78
+ /* @__PURE__ */ jsx("div", { ref: handleRef, className: Css.handle, children: /* @__PURE__ */ jsx(GoabIcon, { type: "reorder-two" }) })
79
79
  ] }),
80
80
  /* @__PURE__ */ jsx("div", { ref: widthRef, className: Css.width, children: width2 })
81
81
  ]
@@ -1 +1 @@
1
- {"version":3,"file":"experimental.mjs","sources":["../../../libs/react-components/src/experimental/resizable-panel/ResizablePanel.tsx","../../../libs/react-components/src/lib/drawer/drawer.tsx"],"sourcesContent":["import { ReactNode, useEffect, useRef, useState } from \"react\";\nimport Css from \"./ResizablePanel.module.css\";\nimport { GoAIcon } from \"../../lib/icon/icon\";\n\nexport type ResizableProps = {\n minWidth?: number;\n children: ReactNode;\n};\n\ntype MouseState = \"static\" | \"active\";\n\nexport function ResizablePanel(props: ResizableProps): JSX.Element {\n // value refs\n const maxWidth = useRef<number>(0);\n const resizeBarState = useRef<MouseState>(\"static\");\n\n // element refs\n const bgRef = useRef<HTMLDivElement | null>(null);\n const sectionRef = useRef<HTMLElement | null>(null);\n const widthRef = useRef<HTMLDivElement | null>(null);\n const handleRef = useRef<HTMLDivElement | null>(null);\n\n // state\n const [width, setWidth] = useState<string>();\n\n useEffect(() => {\n maxWidth.current = bgRef.current?.getBoundingClientRect().width ?? 0;\n }, []);\n\n function resetMouseState() {\n resizeBarState.current = \"static\";\n }\n\n function onMouseDown(_: React.MouseEvent) {\n resizeBarState.current = \"active\";\n window.addEventListener(\"mouseup\", resetMouseState);\n }\n\n function onMouseUp(_: React.MouseEvent) {\n resizeBarState.current = \"static\";\n window.removeEventListener(\"mouseup\", resetMouseState);\n }\n\n function onMouseMove(e: React.MouseEvent) {\n if (resizeBarState.current === \"static\") {\n return;\n }\n\n const sectionEl = sectionRef.current;\n const xOffset = sectionEl?.getBoundingClientRect().x || 0;\n const mouseX = e.clientX;\n const minWidth = props.minWidth || 0;\n\n if (mouseX <= 0) {\n return;\n }\n\n // mouse direction\n const newXPos = handleRef.current?.getBoundingClientRect().x ?? 0;\n\n // set width of preview area\n const calcWidth = Math.max(\n newXPos - xOffset,\n Math.min(mouseX - xOffset, maxWidth.current),\n );\n const elementWidth = Math.max(minWidth, calcWidth - 64); // 4rem padding\n\n // prevent dragging bar more than allowed\n if (elementWidth <= minWidth) {\n return;\n }\n\n // set resizable area width\n sectionEl?.setAttribute(\"style\", `width: ${calcWidth}px;`);\n // set displayed px width\n widthRef.current?.setAttribute(\n \"style\",\n `right: ${maxWidth.current - calcWidth + 32}px`,\n );\n setWidth(`${Math.round(elementWidth)}px`);\n }\n\n return (\n <div\n ref={bgRef}\n className={Css.panelBackground}\n onMouseDown={onMouseDown}\n onMouseMove={onMouseMove}\n onMouseUp={onMouseUp}\n >\n <section ref={sectionRef} className={Css.panel}>\n <div className={Css.children}>{props.children}</div>\n <div ref={handleRef} className={Css.handle}>\n <GoAIcon type=\"reorder-two\" />\n </div>\n </section>\n <div ref={widthRef} className={Css.width}>\n {width}\n </div>\n </div>\n );\n}\n\nexport default ResizablePanel;\n","import { ReactNode, useEffect, useRef } from \"react\";\n\ntype DrawerPosition = \"bottom\" | \"left\" | \"right\" | undefined;\ntype DrawerSizeUnit = \"px\" | \"rem\" | \"ch\" | \"vh\" | \"vw\";\ntype DrawerSize = `${number}${DrawerSizeUnit}` | undefined;\n\ninterface WCProps {\n open: boolean | undefined;\n position: DrawerPosition;\n heading?: string;\n maxsize?: DrawerSize;\n testid?: string;\n ref: React.RefObject<HTMLElement>;\n}\n\ndeclare global {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n // eslint-disable-next-line @typescript-eslint/no-empty-interface\n interface IntrinsicElements {\n \"goa-drawer\": WCProps & React.HTMLAttributes<HTMLElement>;\n }\n }\n}\n\nexport interface GoADrawerProps {\n open: boolean;\n position: DrawerPosition;\n heading?: string;\n maxSize?: DrawerSize;\n testId?: string;\n children: ReactNode;\n onClose: () => void;\n}\n\nexport function GoADrawer({\n open,\n position,\n heading,\n maxSize,\n testId,\n children,\n onClose,\n}: GoADrawerProps): JSX.Element {\n const el = useRef<HTMLElement>(null);\n\n useEffect(() => {\n if (!el?.current || !onClose) {\n return;\n }\n el.current?.addEventListener(\"_close\", onClose)\n return () => {\n el.current?.removeEventListener(\"_close\", onClose)\n }\n }, [el, onClose])\n\n return (\n <goa-drawer\n ref={el}\n open={open ? true : undefined}\n position={position}\n heading={heading}\n maxsize={maxSize}\n data-testid={testId}\n >\n {children}\n </goa-drawer>\n );\n}\n\nexport default GoADrawer;\n"],"names":["width","children","_a"],"mappings":"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"}
1
+ {"version":3,"file":"experimental.mjs","sources":["../../../libs/react-components/src/experimental/resizable-panel/ResizablePanel.tsx","../../../libs/react-components/src/lib/drawer/drawer.tsx"],"sourcesContent":["import { ReactNode, useEffect, useRef, useState } from \"react\";\nimport Css from \"./ResizablePanel.module.css\";\nimport { GoabIcon } from \"../../lib/icon/icon\";\n\nexport type ResizableProps = {\n minWidth?: number;\n children: ReactNode;\n};\n\ntype MouseState = \"static\" | \"active\";\n\nexport function ResizablePanel(props: ResizableProps): JSX.Element {\n // element refs\n const bgRef = useRef<HTMLDivElement | null>(null);\n const sectionRef = useRef<HTMLElement | null>(null);\n const widthRef = useRef<HTMLDivElement | null>(null);\n const handleRef = useRef<HTMLDivElement | null>(null);\n\n // value refs\n const maxWidth = useRef<number>(0);\n const resizeBarState = useRef<MouseState>(\"static\");\n\n // state\n const [width, setWidth] = useState<string>();\n\n useEffect(() => {\n maxWidth.current = bgRef.current?.getBoundingClientRect().width ?? 0;\n }, []);\n\n function resetMouseState() {\n resizeBarState.current = \"static\";\n }\n\n function onMouseDown(_: React.MouseEvent) {\n resizeBarState.current = \"active\";\n window.addEventListener(\"mouseup\", resetMouseState);\n }\n\n function onMouseUp(_: React.MouseEvent) {\n resizeBarState.current = \"static\";\n window.removeEventListener(\"mouseup\", resetMouseState);\n }\n\n function onMouseMove(e: React.MouseEvent) {\n if (resizeBarState.current === \"static\") {\n return;\n }\n\n const sectionEl = sectionRef.current;\n const xOffset = sectionEl?.getBoundingClientRect().x || 0;\n const mouseX = e.clientX;\n const minWidth = props.minWidth || 0;\n\n if (mouseX <= 0) {\n return;\n }\n\n // mouse direction\n const newXPos = handleRef.current?.getBoundingClientRect().x ?? 0;\n\n // set width of preview area\n const calcWidth = Math.max(\n newXPos - xOffset,\n Math.min(mouseX - xOffset, maxWidth.current),\n );\n const elementWidth = Math.max(minWidth, calcWidth - 64); // 4rem padding\n\n // prevent dragging bar more than allowed\n if (elementWidth <= minWidth) {\n return;\n }\n\n // set resizable area width\n sectionEl?.setAttribute(\"style\", `width: ${calcWidth}px;`);\n // set displayed px width\n widthRef.current?.setAttribute(\n \"style\",\n `right: ${maxWidth.current - calcWidth + 32}px`,\n );\n setWidth(`${Math.round(elementWidth)}px`);\n }\n\n return (\n <div\n ref={bgRef}\n className={Css.panelBackground}\n onMouseDown={onMouseDown}\n onMouseMove={onMouseMove}\n onMouseUp={onMouseUp}\n >\n <section ref={sectionRef} className={Css.panel}>\n <div className={Css.children}>{props.children}</div>\n <div ref={handleRef} className={Css.handle}>\n <GoabIcon type=\"reorder-two\" />\n </div>\n </section>\n <div ref={widthRef} className={Css.width}>\n {width}\n </div>\n </div>\n );\n}\n\nexport default ResizablePanel;\n","import { ReactNode, useEffect, useRef } from \"react\";\n\ntype DrawerPosition = \"bottom\" | \"left\" | \"right\" | undefined;\ntype DrawerSizeUnit = \"px\" | \"rem\" | \"ch\" | \"vh\" | \"vw\";\ntype DrawerSize = `${number}${DrawerSizeUnit}` | undefined;\n\ninterface WCProps {\n open: boolean | undefined;\n position: DrawerPosition;\n heading?: string;\n maxsize?: DrawerSize;\n testid?: string;\n ref: React.RefObject<HTMLElement>;\n}\n\ndeclare global {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n // eslint-disable-next-line @typescript-eslint/no-empty-interface\n interface IntrinsicElements {\n \"goa-drawer\": WCProps & React.HTMLAttributes<HTMLElement>;\n }\n }\n}\n\nexport interface GoADrawerProps {\n open: boolean;\n position: DrawerPosition;\n heading?: string;\n maxSize?: DrawerSize;\n testId?: string;\n children: ReactNode;\n onClose: () => void;\n}\n\nexport function GoADrawer({\n open,\n position,\n heading,\n maxSize,\n testId,\n children,\n onClose,\n}: GoADrawerProps): JSX.Element {\n const el = useRef<HTMLElement>(null);\n\n useEffect(() => {\n if (!el?.current || !onClose) {\n return;\n }\n el.current?.addEventListener(\"_close\", onClose)\n return () => {\n el.current?.removeEventListener(\"_close\", onClose)\n }\n }, [el, onClose])\n\n return (\n <goa-drawer\n ref={el}\n open={open ? true : undefined}\n position={position}\n heading={heading}\n maxsize={maxSize}\n data-testid={testId}\n >\n {children}\n </goa-drawer>\n );\n}\n\nexport default GoADrawer;\n"],"names":["width","children","_a"],"mappings":"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"}
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  const jsxRuntime = require("react/jsx-runtime");
3
- function GoAIcon({
3
+ function GoabIcon({
4
4
  type,
5
5
  theme,
6
6
  size,
@@ -34,5 +34,5 @@ function GoAIcon({
34
34
  }
35
35
  );
36
36
  }
37
- exports.GoAIcon = GoAIcon;
38
- //# sourceMappingURL=icon-1IRcN4Uf.js.map
37
+ exports.GoabIcon = GoabIcon;
38
+ //# sourceMappingURL=icon-DmXlIizF.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"icon-DmXlIizF.js","sources":["../../../libs/react-components/src/lib/icon/icon.tsx"],"sourcesContent":["import {\n GoabIconFilledType,\n GoabIconSize,\n GoabIconTheme,\n GoabIconType,\n Margins,\n} from \"@abgov/ui-components-common\";\n\ninterface IonIconProps {\n name: GoabIconType | GoabIconFilledType;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\ninterface IonIconElement extends HTMLElement {}\n\ndeclare global {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n // eslint-disable-next-line @typescript-eslint/no-empty-interface\n interface IntrinsicElements {\n \"ion-icon\": IonIconProps & React.HTMLAttributes<IonIconElement>;\n }\n }\n}\n\ndeclare global {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n // eslint-disable-next-line @typescript-eslint/no-empty-interface\n interface IntrinsicElements {\n \"goa-icon\": WCProps & React.HTMLAttributes<IonIconElement>;\n }\n }\n}\n\nexport interface GoabIconProps extends Margins {\n type: GoabIconType;\n size?: GoabIconSize;\n theme?: GoabIconTheme;\n inverted?: string;\n fillColor?: string;\n opacity?: number;\n title?: string;\n ariaLabel?: string;\n testId?: string;\n}\n\ninterface WCProps extends Margins {\n type: GoabIconType;\n theme?: GoabIconTheme;\n size?: GoabIconSize;\n inverted?: string;\n fillcolor?: string;\n opacity?: number;\n title?: string;\n arialabel?: string;\n testid?: string;\n}\n\nexport function GoabIcon({\n type,\n theme,\n size,\n inverted,\n fillColor,\n opacity,\n title,\n ariaLabel,\n mt,\n mr,\n mb,\n ml,\n testId,\n}: GoabIconProps): JSX.Element {\n return (\n <goa-icon\n type={type}\n theme={theme}\n size={size}\n inverted={inverted}\n fillcolor={fillColor}\n opacity={opacity}\n title={title}\n arialabel={ariaLabel}\n mt={mt}\n mr={mr}\n mb={mb}\n ml={ml}\n testid={testId}\n />\n );\n}\n"],"names":["jsx"],"mappings":";;AA2DO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA+B;AAE3B,SAAAA,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,IAAA;AAAA,EAAA;AAGd;;"}
@@ -1,5 +1,5 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
- function GoAIcon({
2
+ function GoabIcon({
3
3
  type,
4
4
  theme,
5
5
  size,
@@ -34,6 +34,6 @@ function GoAIcon({
34
34
  );
35
35
  }
36
36
  export {
37
- GoAIcon as G
37
+ GoabIcon as G
38
38
  };
39
- //# sourceMappingURL=icon-DgSW1II3.mjs.map
39
+ //# sourceMappingURL=icon-iZ6Uu6WB.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"icon-iZ6Uu6WB.mjs","sources":["../../../libs/react-components/src/lib/icon/icon.tsx"],"sourcesContent":["import {\n GoabIconFilledType,\n GoabIconSize,\n GoabIconTheme,\n GoabIconType,\n Margins,\n} from \"@abgov/ui-components-common\";\n\ninterface IonIconProps {\n name: GoabIconType | GoabIconFilledType;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\ninterface IonIconElement extends HTMLElement {}\n\ndeclare global {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n // eslint-disable-next-line @typescript-eslint/no-empty-interface\n interface IntrinsicElements {\n \"ion-icon\": IonIconProps & React.HTMLAttributes<IonIconElement>;\n }\n }\n}\n\ndeclare global {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n // eslint-disable-next-line @typescript-eslint/no-empty-interface\n interface IntrinsicElements {\n \"goa-icon\": WCProps & React.HTMLAttributes<IonIconElement>;\n }\n }\n}\n\nexport interface GoabIconProps extends Margins {\n type: GoabIconType;\n size?: GoabIconSize;\n theme?: GoabIconTheme;\n inverted?: string;\n fillColor?: string;\n opacity?: number;\n title?: string;\n ariaLabel?: string;\n testId?: string;\n}\n\ninterface WCProps extends Margins {\n type: GoabIconType;\n theme?: GoabIconTheme;\n size?: GoabIconSize;\n inverted?: string;\n fillcolor?: string;\n opacity?: number;\n title?: string;\n arialabel?: string;\n testid?: string;\n}\n\nexport function GoabIcon({\n type,\n theme,\n size,\n inverted,\n fillColor,\n opacity,\n title,\n ariaLabel,\n mt,\n mr,\n mb,\n ml,\n testId,\n}: GoabIconProps): JSX.Element {\n return (\n <goa-icon\n type={type}\n theme={theme}\n size={size}\n inverted={inverted}\n fillcolor={fillColor}\n opacity={opacity}\n title={title}\n arialabel={ariaLabel}\n mt={mt}\n mr={mr}\n mb={mb}\n ml={ml}\n testid={testId}\n />\n );\n}\n"],"names":[],"mappings":";AA2DO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA+B;AAE3B,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,IAAA;AAAA,EAAA;AAGd;"}
package/index.d.ts CHANGED
@@ -1,61 +1,60 @@
1
- export * from "./lib/accordion/accordion";
2
- export * from "./lib/app-header/app-header";
3
- export * from "./lib/app-header-menu/app-header-menu";
4
- export * from "./lib/badge/badge";
5
- export * from "./lib/block/block";
6
- export * from "./lib/button/button";
7
- export * from "./lib/button-group/button-group";
8
- export * from "./lib/calendar/calendar";
9
- export * from "./lib/callout/callout";
10
- export * from "./lib/checkbox/checkbox";
11
- export * from "./lib/chip/chip";
12
- export * from "./lib/circular-progress/circular-progress";
13
- export * from "./lib/container/container";
14
- export * from "./lib/date-picker/date-picker";
15
- export * from "./lib/details/details";
16
- export * from "./lib/divider/divider";
17
- export * from "./lib/dropdown/dropdown";
18
- export * from "./lib/dropdown/dropdown-item";
19
- export * from "./lib/fieldset/fieldset";
20
- export * from "./lib/file-upload-card/file-upload-card";
21
- export * from "./lib/file-upload-input/file-upload-input";
22
- export * from "./lib/footer/footer";
23
- export * from "./lib/footer-meta-section/footer-meta-section";
24
- export * from "./lib/footer-nav-section/footer-nav-section";
25
- export * from "./lib/form-item/form-item";
26
- export * from "./lib/form-step/form-step";
27
- export * from "./lib/form-stepper/form-stepper";
28
- export * from "./lib/grid/grid";
29
- export * from "./lib/hero-banner/hero-banner";
30
- export * from "./lib/hero-banner/hero-banner-actions";
31
- export * from "./lib/icon-button/icon-button";
32
- export * from "./lib/icon/icon";
33
- export * from "./lib/input/input";
34
- export * from "./lib/link/link";
35
- export * from "./lib/link-button/link-button";
36
- export * from "./lib/microsite-header/microsite-header";
37
- export * from "./lib/modal/modal";
38
- export * from "./lib/notification/notification";
39
- export * from "./lib/one-column-layout/one-column-layout";
40
- export * from "./lib/page-block/page-block";
41
- export * from "./lib/pages/pages";
42
- export * from "./lib/pagination/pagination";
43
- export * from "./lib/popover/popover";
44
- export * from "./lib/radio-group/radio-group";
45
- export * from "./lib/side-menu-group/side-menu-group";
46
- export * from "./lib/side-menu-heading/side-menu-heading";
47
- export * from "./lib/side-menu/side-menu";
48
- export * from "./lib/skeleton/skeleton";
49
- export * from "./lib/spacer/spacer";
50
- export * from "./lib/spinner/spinner";
51
- export * from "./lib/table/table";
52
- export * from "./lib/table/table-sort-header";
53
- export * from "./lib/tabs/tabs";
54
- export * from "./lib/tab/tab";
55
- export * from "./lib/text/text";
56
- export * from "./lib/textarea/textarea";
57
- export * from "./lib/three-column-layout/three-column-layout";
58
- export * from "./lib/tooltip/tooltip";
59
- export * from "./lib/two-column-layout/two-column-layout";
60
- export * from "./lib/filter-chip/filter-chip";
61
- export * from "./common/styling";
1
+ export * from './lib/accordion/accordion';
2
+ export * from './lib/app-header/app-header';
3
+ export * from './lib/app-header-menu/app-header-menu';
4
+ export * from './lib/badge/badge';
5
+ export * from './lib/block/block';
6
+ export * from './lib/button/button';
7
+ export * from './lib/button-group/button-group';
8
+ export * from './lib/calendar/calendar';
9
+ export * from './lib/callout/callout';
10
+ export * from './lib/checkbox/checkbox';
11
+ export * from './lib/chip/chip';
12
+ export * from './lib/circular-progress/circular-progress';
13
+ export * from './lib/container/container';
14
+ export * from './lib/date-picker/date-picker';
15
+ export * from './lib/details/details';
16
+ export * from './lib/divider/divider';
17
+ export * from './lib/dropdown/dropdown';
18
+ export * from './lib/dropdown/dropdown-item';
19
+ export * from './lib/fieldset/fieldset';
20
+ export * from './lib/file-upload-card/file-upload-card';
21
+ export * from './lib/file-upload-input/file-upload-input';
22
+ export * from './lib/footer/footer';
23
+ export * from './lib/footer-meta-section/footer-meta-section';
24
+ export * from './lib/footer-nav-section/footer-nav-section';
25
+ export * from './lib/form-item/form-item';
26
+ export * from './lib/form-step/form-step';
27
+ export * from './lib/form-stepper/form-stepper';
28
+ export * from './lib/grid/grid';
29
+ export * from './lib/hero-banner/hero-banner';
30
+ export * from './lib/hero-banner/hero-banner-actions';
31
+ export * from './lib/icon-button/icon-button';
32
+ export * from './lib/icon/icon';
33
+ export * from './lib/input/input';
34
+ export * from './lib/link/link';
35
+ export * from './lib/link-button/link-button';
36
+ export * from './lib/microsite-header/microsite-header';
37
+ export * from './lib/modal/modal';
38
+ export * from './lib/notification/notification';
39
+ export * from './lib/one-column-layout/one-column-layout';
40
+ export * from './lib/page-block/page-block';
41
+ export * from './lib/pages/pages';
42
+ export * from './lib/pagination/pagination';
43
+ export * from './lib/popover/popover';
44
+ export * from './lib/radio-group/radio-group';
45
+ export * from './lib/side-menu-group/side-menu-group';
46
+ export * from './lib/side-menu-heading/side-menu-heading';
47
+ export * from './lib/side-menu/side-menu';
48
+ export * from './lib/skeleton/skeleton';
49
+ export * from './lib/spacer/spacer';
50
+ export * from './lib/spinner/spinner';
51
+ export * from './lib/table/table';
52
+ export * from './lib/table/table-sort-header';
53
+ export * from './lib/tabs/tabs';
54
+ export * from './lib/tab/tab';
55
+ export * from './lib/text/text';
56
+ export * from './lib/textarea/textarea';
57
+ export * from './lib/three-column-layout/three-column-layout';
58
+ export * from './lib/tooltip/tooltip';
59
+ export * from './lib/two-column-layout/two-column-layout';
60
+ export * from './lib/filter-chip/filter-chip';