@abgov/react-components 6.3.0-alpha.4 → 6.3.0-alpha.5

package/experimental/form/form-summary.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-declare global {
+declare module "react" {
     namespace JSX {
         interface IntrinsicElements {
             "goa-simple-form-summary": React.HTMLAttributes<HTMLElement>;

package/experimental/form/form.d.ts

@@ -2,11 +2,11 @@ import { Margins, GoabFormStorageType, GoabFormOnMountDetail, GoabFormOnStateCha
 import { ReactNode } from 'react';
 
 interface WCProps extends Margins {
-    ref?: React.MutableRefObject<HTMLElement | undefined>;
+    ref?: React.RefObject<HTMLElement | null>;
     name: string;
     storage: GoabFormStorageType;
 }
-declare global {
+declare module "react" {
     namespace JSX {
         interface IntrinsicElements {
             "goa-simple-form": WCProps & React.HTMLAttributes<HTMLElement>;

package/experimental/form/task-list.d.ts

@@ -4,7 +4,7 @@ import { ReactNode } from 'react';
 interface WCProps extends Margins {
     heading: string;
 }
-declare global {
+declare module "react" {
     namespace JSX {
         interface IntrinsicElements {
             "goa-public-form-task-list": WCProps & React.HTMLAttributes<HTMLElement>;
@@ -15,5 +15,5 @@ type GoabPublicFormTaskListProps = {
     heading: string;
     children: ReactNode;
 };
-export declare function GoabPublicFormTaskList({ heading, children }: GoabPublicFormTaskListProps): import("react/jsx-runtime").JSX.Element;
+export declare function GoabPublicFormTaskList({ heading, children, }: GoabPublicFormTaskListProps): import("react/jsx-runtime").JSX.Element;
 export default GoabPublicFormTaskList;

package/experimental/form/task.d.ts

@@ -4,7 +4,7 @@ import { ReactNode } from 'react';
 interface WCProps extends Margins {
     status: "completed" | "not-started" | "cannot-start";
 }
-declare global {
+declare module "react" {
     namespace JSX {
         interface IntrinsicElements {
             "goa-public-form-task": WCProps & React.HTMLAttributes<HTMLElement>;

package/experimental/resizable-panel/ResizablePanel.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ReactNode, JSX } from 'react';
 
 export type ResizableProps = {
     minWidth?: number;

package/experimental.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const icon = require("./icon-BPmPItnm.js");
+const icon = require("./icon-CK55b563.js");
 const panel = "_panel_m3z4m_1";
 const panelBackground = "_panelBackground_m3z4m_8";
 const children = "_children_m3z4m_12";

package/experimental.js.map

@@ -1 +1 @@
-{"version":3,"file":"experimental.js","sources":["../../../libs/react-components/src/experimental/resizable-panel/ResizablePanel.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"],"names":["useRef","width","useState","useEffect","jsxs","jsx","GoabIcon"],"mappings":";;;;;;;;;;;;;;;;;AAWO,SAAS,eAAe,OAAoC;AAE3D,QAAA,QAAQA,aAA8B,IAAI;AAC1C,QAAA,aAAaA,aAA2B,IAAI;AAC5C,QAAA,WAAWA,aAA8B,IAAI;AAC7C,QAAA,YAAYA,aAA8B,IAAI;AAG9C,QAAA,WAAWA,aAAe,CAAC;AAC3B,QAAA,iBAAiBA,aAAmB,QAAQ;AAGlD,QAAM,CAACC,QAAO,QAAQ,IAAIC,MAAiB,SAAA;AAE3CC,QAAAA,UAAU,MAAM;;AACd,aAAS,YAAU,WAAM,YAAN,mBAAe,wBAAwB,UAAS;AAAA,EACrE,GAAG,CAAE,CAAA;AAEL,WAAS,kBAAkB;AACzB,mBAAe,UAAU;AAAA,EAC3B;AAEA,WAAS,YAAY,GAAqB;AACxC,mBAAe,UAAU;AAClB,WAAA,iBAAiB,WAAW,eAAe;AAAA,EACpD;AAEA,WAAS,UAAU,GAAqB;AACtC,mBAAe,UAAU;AAClB,WAAA,oBAAoB,WAAW,eAAe;AAAA,EACvD;AAEA,WAAS,YAAY,GAAqB;;AACpC,QAAA,eAAe,YAAY,UAAU;AACvC;AAAA,IACF;AAEA,UAAM,YAAY,WAAW;AAC7B,UAAM,WAAU,uCAAW,wBAAwB,MAAK;AACxD,UAAM,SAAS,EAAE;AACX,UAAA,WAAW,MAAM,YAAY;AAEnC,QAAI,UAAU,GAAG;AACf;AAAA,IACF;AAGA,UAAM,YAAU,eAAU,YAAV,mBAAmB,wBAAwB,MAAK;AAGhE,UAAM,YAAY,KAAK;AAAA,MACrB,UAAU;AAAA,MACV,KAAK,IAAI,SAAS,SAAS,SAAS,OAAO;AAAA,IAAA;AAE7C,UAAM,eAAe,KAAK,IAAI,UAAU,YAAY,EAAE;AAGtD,QAAI,gBAAgB,UAAU;AAC5B;AAAA,IACF;AAGA,2CAAW,aAAa,SAAS,UAAU,SAAS;AAEpD,mBAAS,YAAT,mBAAkB;AAAA,MAChB;AAAA,MACA,UAAU,SAAS,UAAU,YAAY,EAAE;AAAA;AAE7C,aAAS,GAAG,KAAK,MAAM,YAAY,CAAC,IAAI;AAAA,EAC1C;AAGE,SAAAC,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,IAAI;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MAEA,UAAA;AAAA,QAAAA,gCAAC,WAAQ,EAAA,KAAK,YAAY,WAAW,IAAI,OACvC,UAAA;AAAA,UAAAC,+BAAC,OAAI,EAAA,WAAW,IAAI,UAAW,gBAAM,UAAS;AAAA,UAC9CA,2BAAA,IAAC,OAAI,EAAA,KAAK,WAAW,WAAW,IAAI,QAClC,UAACA,2BAAAA,IAAAC,KAAAA,UAAA,EAAS,MAAK,cAAA,CAAc,EAC/B,CAAA;AAAA,QAAA,GACF;AAAA,uCACC,OAAI,EAAA,KAAK,UAAU,WAAW,IAAI,OAChC,UACHL,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;;;"}
+{"version":3,"file":"experimental.js","sources":["../../../libs/react-components/src/experimental/resizable-panel/ResizablePanel.tsx"],"sourcesContent":["import { ReactNode, useEffect, useRef, useState, type JSX } 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"],"names":["useRef","width","useState","useEffect","jsxs","jsx","GoabIcon"],"mappings":";;;;;;;;;;;;;;;;;AAWO,SAAS,eAAe,OAAoC;AAE3D,QAAA,QAAQA,aAA8B,IAAI;AAC1C,QAAA,aAAaA,aAA2B,IAAI;AAC5C,QAAA,WAAWA,aAA8B,IAAI;AAC7C,QAAA,YAAYA,aAA8B,IAAI;AAG9C,QAAA,WAAWA,aAAe,CAAC;AAC3B,QAAA,iBAAiBA,aAAmB,QAAQ;AAGlD,QAAM,CAACC,QAAO,QAAQ,IAAIC,MAAiB,SAAA;AAE3CC,QAAAA,UAAU,MAAM;;AACd,aAAS,YAAU,WAAM,YAAN,mBAAe,wBAAwB,UAAS;AAAA,EACrE,GAAG,CAAE,CAAA;AAEL,WAAS,kBAAkB;AACzB,mBAAe,UAAU;AAAA,EAC3B;AAEA,WAAS,YAAY,GAAqB;AACxC,mBAAe,UAAU;AAClB,WAAA,iBAAiB,WAAW,eAAe;AAAA,EACpD;AAEA,WAAS,UAAU,GAAqB;AACtC,mBAAe,UAAU;AAClB,WAAA,oBAAoB,WAAW,eAAe;AAAA,EACvD;AAEA,WAAS,YAAY,GAAqB;;AACpC,QAAA,eAAe,YAAY,UAAU;AACvC;AAAA,IACF;AAEA,UAAM,YAAY,WAAW;AAC7B,UAAM,WAAU,uCAAW,wBAAwB,MAAK;AACxD,UAAM,SAAS,EAAE;AACX,UAAA,WAAW,MAAM,YAAY;AAEnC,QAAI,UAAU,GAAG;AACf;AAAA,IACF;AAGA,UAAM,YAAU,eAAU,YAAV,mBAAmB,wBAAwB,MAAK;AAGhE,UAAM,YAAY,KAAK;AAAA,MACrB,UAAU;AAAA,MACV,KAAK,IAAI,SAAS,SAAS,SAAS,OAAO;AAAA,IAAA;AAE7C,UAAM,eAAe,KAAK,IAAI,UAAU,YAAY,EAAE;AAGtD,QAAI,gBAAgB,UAAU;AAC5B;AAAA,IACF;AAGA,2CAAW,aAAa,SAAS,UAAU,SAAS;AAEpD,mBAAS,YAAT,mBAAkB;AAAA,MAChB;AAAA,MACA,UAAU,SAAS,UAAU,YAAY,EAAE;AAAA;AAE7C,aAAS,GAAG,KAAK,MAAM,YAAY,CAAC,IAAI;AAAA,EAC1C;AAGE,SAAAC,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,IAAI;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MAEA,UAAA;AAAA,QAAAA,gCAAC,WAAQ,EAAA,KAAK,YAAY,WAAW,IAAI,OACvC,UAAA;AAAA,UAAAC,+BAAC,OAAI,EAAA,WAAW,IAAI,UAAW,gBAAM,UAAS;AAAA,UAC9CA,2BAAA,IAAC,OAAI,EAAA,KAAK,WAAW,WAAW,IAAI,QAClC,UAACA,2BAAAA,IAAAC,KAAAA,UAAA,EAAS,MAAK,cAAA,CAAc,EAC/B,CAAA;AAAA,QAAA,GACF;AAAA,uCACC,OAAI,EAAA,KAAK,UAAU,WAAW,IAAI,OAChC,UACHL,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;;;"}

package/experimental.mjs

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useRef, useState, useEffect } from "react";
-import { a as GoabIcon } from "./icon-BNGrU_R_.mjs";
-import { G } from "./icon-BNGrU_R_.mjs";
+import { a as GoabIcon } from "./icon-CoYGOp1V.mjs";
+import { G } from "./icon-CoYGOp1V.mjs";
 const panel = "_panel_m3z4m_1";
 const panelBackground = "_panelBackground_m3z4m_8";
 const children = "_children_m3z4m_12";

package/experimental.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"experimental.mjs","sources":["../../../libs/react-components/src/experimental/resizable-panel/ResizablePanel.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"],"names":["width"],"mappings":";;;;;;;;;;;;;;;;AAWO,SAAS,eAAe,OAAoC;AAE3D,QAAA,QAAQ,OAA8B,IAAI;AAC1C,QAAA,aAAa,OAA2B,IAAI;AAC5C,QAAA,WAAW,OAA8B,IAAI;AAC7C,QAAA,YAAY,OAA8B,IAAI;AAG9C,QAAA,WAAW,OAAe,CAAC;AAC3B,QAAA,iBAAiB,OAAmB,QAAQ;AAGlD,QAAM,CAACA,QAAO,QAAQ,IAAI,SAAiB;AAE3C,YAAU,MAAM;;AACd,aAAS,YAAU,WAAM,YAAN,mBAAe,wBAAwB,UAAS;AAAA,EACrE,GAAG,CAAE,CAAA;AAEL,WAAS,kBAAkB;AACzB,mBAAe,UAAU;AAAA,EAC3B;AAEA,WAAS,YAAY,GAAqB;AACxC,mBAAe,UAAU;AAClB,WAAA,iBAAiB,WAAW,eAAe;AAAA,EACpD;AAEA,WAAS,UAAU,GAAqB;AACtC,mBAAe,UAAU;AAClB,WAAA,oBAAoB,WAAW,eAAe;AAAA,EACvD;AAEA,WAAS,YAAY,GAAqB;;AACpC,QAAA,eAAe,YAAY,UAAU;AACvC;AAAA,IACF;AAEA,UAAM,YAAY,WAAW;AAC7B,UAAM,WAAU,uCAAW,wBAAwB,MAAK;AACxD,UAAM,SAAS,EAAE;AACX,UAAA,WAAW,MAAM,YAAY;AAEnC,QAAI,UAAU,GAAG;AACf;AAAA,IACF;AAGA,UAAM,YAAU,eAAU,YAAV,mBAAmB,wBAAwB,MAAK;AAGhE,UAAM,YAAY,KAAK;AAAA,MACrB,UAAU;AAAA,MACV,KAAK,IAAI,SAAS,SAAS,SAAS,OAAO;AAAA,IAAA;AAE7C,UAAM,eAAe,KAAK,IAAI,UAAU,YAAY,EAAE;AAGtD,QAAI,gBAAgB,UAAU;AAC5B;AAAA,IACF;AAGA,2CAAW,aAAa,SAAS,UAAU,SAAS;AAEpD,mBAAS,YAAT,mBAAkB;AAAA,MAChB;AAAA,MACA,UAAU,SAAS,UAAU,YAAY,EAAE;AAAA;AAE7C,aAAS,GAAG,KAAK,MAAM,YAAY,CAAC,IAAI;AAAA,EAC1C;AAGE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,IAAI;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MAEA,UAAA;AAAA,QAAA,qBAAC,WAAQ,EAAA,KAAK,YAAY,WAAW,IAAI,OACvC,UAAA;AAAA,UAAA,oBAAC,OAAI,EAAA,WAAW,IAAI,UAAW,gBAAM,UAAS;AAAA,UAC9C,oBAAC,OAAI,EAAA,KAAK,WAAW,WAAW,IAAI,QAClC,UAAC,oBAAA,UAAA,EAAS,MAAK,cAAA,CAAc,EAC/B,CAAA;AAAA,QAAA,GACF;AAAA,4BACC,OAAI,EAAA,KAAK,UAAU,WAAW,IAAI,OAChC,UACHA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"experimental.mjs","sources":["../../../libs/react-components/src/experimental/resizable-panel/ResizablePanel.tsx"],"sourcesContent":["import { ReactNode, useEffect, useRef, useState, type JSX } 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"],"names":["width"],"mappings":";;;;;;;;;;;;;;;;AAWO,SAAS,eAAe,OAAoC;AAE3D,QAAA,QAAQ,OAA8B,IAAI;AAC1C,QAAA,aAAa,OAA2B,IAAI;AAC5C,QAAA,WAAW,OAA8B,IAAI;AAC7C,QAAA,YAAY,OAA8B,IAAI;AAG9C,QAAA,WAAW,OAAe,CAAC;AAC3B,QAAA,iBAAiB,OAAmB,QAAQ;AAGlD,QAAM,CAACA,QAAO,QAAQ,IAAI,SAAiB;AAE3C,YAAU,MAAM;;AACd,aAAS,YAAU,WAAM,YAAN,mBAAe,wBAAwB,UAAS;AAAA,EACrE,GAAG,CAAE,CAAA;AAEL,WAAS,kBAAkB;AACzB,mBAAe,UAAU;AAAA,EAC3B;AAEA,WAAS,YAAY,GAAqB;AACxC,mBAAe,UAAU;AAClB,WAAA,iBAAiB,WAAW,eAAe;AAAA,EACpD;AAEA,WAAS,UAAU,GAAqB;AACtC,mBAAe,UAAU;AAClB,WAAA,oBAAoB,WAAW,eAAe;AAAA,EACvD;AAEA,WAAS,YAAY,GAAqB;;AACpC,QAAA,eAAe,YAAY,UAAU;AACvC;AAAA,IACF;AAEA,UAAM,YAAY,WAAW;AAC7B,UAAM,WAAU,uCAAW,wBAAwB,MAAK;AACxD,UAAM,SAAS,EAAE;AACX,UAAA,WAAW,MAAM,YAAY;AAEnC,QAAI,UAAU,GAAG;AACf;AAAA,IACF;AAGA,UAAM,YAAU,eAAU,YAAV,mBAAmB,wBAAwB,MAAK;AAGhE,UAAM,YAAY,KAAK;AAAA,MACrB,UAAU;AAAA,MACV,KAAK,IAAI,SAAS,SAAS,SAAS,OAAO;AAAA,IAAA;AAE7C,UAAM,eAAe,KAAK,IAAI,UAAU,YAAY,EAAE;AAGtD,QAAI,gBAAgB,UAAU;AAC5B;AAAA,IACF;AAGA,2CAAW,aAAa,SAAS,UAAU,SAAS;AAEpD,mBAAS,YAAT,mBAAkB;AAAA,MAChB;AAAA,MACA,UAAU,SAAS,UAAU,YAAY,EAAE;AAAA;AAE7C,aAAS,GAAG,KAAK,MAAM,YAAY,CAAC,IAAI;AAAA,EAC1C;AAGE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,IAAI;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MAEA,UAAA;AAAA,QAAA,qBAAC,WAAQ,EAAA,KAAK,YAAY,WAAW,IAAI,OACvC,UAAA;AAAA,UAAA,oBAAC,OAAI,EAAA,WAAW,IAAI,UAAW,gBAAM,UAAS;AAAA,UAC9C,oBAAC,OAAI,EAAA,KAAK,WAAW,WAAW,IAAI,QAClC,UAAC,oBAAA,UAAA,EAAS,MAAK,cAAA,CAAc,EAC/B,CAAA;AAAA,QAAA,GACF;AAAA,4BACC,OAAI,EAAA,KAAK,UAAU,WAAW,IAAI,OAChC,UACHA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/{icon-BPmPItnm.js → icon-CK55b563.js}

@@ -2,8 +2,8 @@
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 function GoabDrawer({
-  open,
   position,
+  open,
   heading,
   maxSize,
   testId,
@@ -27,8 +27,8 @@ function GoabDrawer({
     "goa-drawer",
     {
       ref: el,
-      open: open ? true : void 0,
       position,
+      open: open ? true : void 0,
       heading: typeof heading === "string" ? heading : void 0,
       maxsize: maxSize,
       testid: testId,
@@ -45,6 +45,7 @@ function GoabIcon({
   theme,
   size,
   inverted,
+  // TODO: change to boolean only
   fillColor,
   opacity,
   title,
@@ -61,7 +62,7 @@ function GoabIcon({
       type,
       theme,
       size,
-      inverted,
+      inverted: typeof inverted === "boolean" ? inverted ? "true" : void 0 : inverted,
       fillcolor: fillColor,
       opacity,
       title,
@@ -76,4 +77,4 @@ function GoabIcon({
 }
 exports.GoabDrawer = GoabDrawer;
 exports.GoabIcon = GoabIcon;
-//# sourceMappingURL=icon-BPmPItnm.js.map
+//# sourceMappingURL=icon-CK55b563.js.map

package/icon-CK55b563.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-CK55b563.js","sources":["../../../libs/react-components/src/lib/drawer/drawer.tsx","../../../libs/react-components/src/lib/icon/icon.tsx"],"sourcesContent":["import { ReactNode, useEffect, useRef, type JSX } from \"react\";\nimport { GoabDrawerPosition, GoabDrawerSize } from \"@abgov/ui-components-common\";\n\ninterface WCProps {\n  position: GoabDrawerPosition;\n  open?: boolean;\n  heading?: string;\n  maxsize?: GoabDrawerSize;\n  testid?: string;\n  ref: React.RefObject<HTMLElement | null>;\n}\n\ndeclare module \"react\" {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    interface IntrinsicElements {\n      \"goa-drawer\": WCProps & React.HTMLAttributes<HTMLElement>;\n    }\n  }\n}\n\nexport interface GoabDrawerProps {\n  position: GoabDrawerPosition;\n  open?: boolean;\n  heading?: string | ReactNode;\n  maxSize?: GoabDrawerSize;\n  testId?: string;\n  actions?: ReactNode;\n  children: ReactNode;\n  onClose: () => void;\n}\n\nexport function GoabDrawer({\n  position,\n  open,\n  heading,\n  maxSize,\n  testId,\n  actions,\n  children,\n  onClose,\n}: GoabDrawerProps): 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      position={position}\n      open={open ? true : undefined}\n      heading={typeof heading === \"string\" ? heading : undefined}\n      maxsize={maxSize}\n      testid={testId}\n    >\n      {heading && typeof heading !== \"string\" && <div slot=\"heading\">{heading}</div>}\n      {actions && <div slot=\"actions\">{actions}</div>}\n      {children}\n    </goa-drawer>\n  );\n}\n\nexport default GoabDrawer;\n","import {\n  GoabIconFilledType,\n  GoabIconSize,\n  GoabIconTheme,\n  GoabIconType,\n  Margins,\n} from \"@abgov/ui-components-common\";\n\nimport type { JSX } from \"react\";\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 module \"react\" {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    interface IntrinsicElements {\n      \"ion-icon\": IonIconProps & React.HTMLAttributes<IonIconElement>;\n    }\n  }\n}\n\ndeclare module \"react\" {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\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 | boolean; // TODO: Change type to only boolean\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, // TODO: change to boolean only\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={\n        typeof inverted === \"boolean\" ? (inverted ? \"true\" : undefined) : inverted\n      }\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":["useRef","useEffect","_a","jsxs","jsx"],"mappings":";;;AAgCO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAiC;AACzB,QAAA,KAAKA,aAAoB,IAAI;AAEnCC,QAAAA,UAAU,MAAM;;AACd,QAAI,EAAC,yBAAI,YAAW,CAAC,SAAS;AAC5B;AAAA,IACF;AACG,aAAA,YAAA,mBAAS,iBAAiB,UAAU;AACvC,WAAO,MAAM;;AACR,OAAAC,MAAA,GAAA,YAAA,gBAAAA,IAAS,oBAAoB,UAAU;AAAA,IAAO;AAAA,EACnD,GACC,CAAC,IAAI,OAAO,CAAC;AAGd,SAAAC,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,MAAM,OAAO,OAAO;AAAA,MACpB,SAAS,OAAO,YAAY,WAAW,UAAU;AAAA,MACjD,SAAS;AAAA,MACT,QAAQ;AAAA,MAEP,UAAA;AAAA,QAAA,WAAW,OAAO,YAAY,2CAAa,OAAI,EAAA,MAAK,WAAW,UAAQ,SAAA;AAAA,QACvE,WAAWC,2BAAA,IAAC,OAAI,EAAA,MAAK,WAAW,UAAQ,SAAA;AAAA,QACxC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;ACTO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;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,UACE,OAAO,aAAa,YAAa,WAAW,SAAS,SAAa;AAAA,MAEpE,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/{icon-BNGrU_R_.mjs → icon-CoYGOp1V.mjs}

@@ -1,8 +1,8 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useRef, useEffect } from "react";
 function GoabDrawer({
-  open,
   position,
+  open,
   heading,
   maxSize,
   testId,
@@ -26,8 +26,8 @@ function GoabDrawer({
     "goa-drawer",
     {
       ref: el,
-      open: open ? true : void 0,
       position,
+      open: open ? true : void 0,
       heading: typeof heading === "string" ? heading : void 0,
       maxsize: maxSize,
       testid: testId,
@@ -44,6 +44,7 @@ function GoabIcon({
   theme,
   size,
   inverted,
+  // TODO: change to boolean only
   fillColor,
   opacity,
   title,
@@ -60,7 +61,7 @@ function GoabIcon({
       type,
       theme,
       size,
-      inverted,
+      inverted: typeof inverted === "boolean" ? inverted ? "true" : void 0 : inverted,
       fillcolor: fillColor,
       opacity,
       title,
@@ -77,4 +78,4 @@ export {
   GoabDrawer as G,
   GoabIcon as a
 };
-//# sourceMappingURL=icon-BNGrU_R_.mjs.map
+//# sourceMappingURL=icon-CoYGOp1V.mjs.map

package/icon-CoYGOp1V.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-CoYGOp1V.mjs","sources":["../../../libs/react-components/src/lib/drawer/drawer.tsx","../../../libs/react-components/src/lib/icon/icon.tsx"],"sourcesContent":["import { ReactNode, useEffect, useRef, type JSX } from \"react\";\nimport { GoabDrawerPosition, GoabDrawerSize } from \"@abgov/ui-components-common\";\n\ninterface WCProps {\n  position: GoabDrawerPosition;\n  open?: boolean;\n  heading?: string;\n  maxsize?: GoabDrawerSize;\n  testid?: string;\n  ref: React.RefObject<HTMLElement | null>;\n}\n\ndeclare module \"react\" {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    interface IntrinsicElements {\n      \"goa-drawer\": WCProps & React.HTMLAttributes<HTMLElement>;\n    }\n  }\n}\n\nexport interface GoabDrawerProps {\n  position: GoabDrawerPosition;\n  open?: boolean;\n  heading?: string | ReactNode;\n  maxSize?: GoabDrawerSize;\n  testId?: string;\n  actions?: ReactNode;\n  children: ReactNode;\n  onClose: () => void;\n}\n\nexport function GoabDrawer({\n  position,\n  open,\n  heading,\n  maxSize,\n  testId,\n  actions,\n  children,\n  onClose,\n}: GoabDrawerProps): 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      position={position}\n      open={open ? true : undefined}\n      heading={typeof heading === \"string\" ? heading : undefined}\n      maxsize={maxSize}\n      testid={testId}\n    >\n      {heading && typeof heading !== \"string\" && <div slot=\"heading\">{heading}</div>}\n      {actions && <div slot=\"actions\">{actions}</div>}\n      {children}\n    </goa-drawer>\n  );\n}\n\nexport default GoabDrawer;\n","import {\n  GoabIconFilledType,\n  GoabIconSize,\n  GoabIconTheme,\n  GoabIconType,\n  Margins,\n} from \"@abgov/ui-components-common\";\n\nimport type { JSX } from \"react\";\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 module \"react\" {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    interface IntrinsicElements {\n      \"ion-icon\": IonIconProps & React.HTMLAttributes<IonIconElement>;\n    }\n  }\n}\n\ndeclare module \"react\" {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\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 | boolean; // TODO: Change type to only boolean\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, // TODO: change to boolean only\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={\n        typeof inverted === \"boolean\" ? (inverted ? \"true\" : undefined) : inverted\n      }\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":["_a"],"mappings":";;AAgCO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAiC;AACzB,QAAA,KAAK,OAAoB,IAAI;AAEnC,YAAU,MAAM;;AACd,QAAI,EAAC,yBAAI,YAAW,CAAC,SAAS;AAC5B;AAAA,IACF;AACG,aAAA,YAAA,mBAAS,iBAAiB,UAAU;AACvC,WAAO,MAAM;;AACR,OAAAA,MAAA,GAAA,YAAA,gBAAAA,IAAS,oBAAoB,UAAU;AAAA,IAAO;AAAA,EACnD,GACC,CAAC,IAAI,OAAO,CAAC;AAGd,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,MAAM,OAAO,OAAO;AAAA,MACpB,SAAS,OAAO,YAAY,WAAW,UAAU;AAAA,MACjD,SAAS;AAAA,MACT,QAAQ;AAAA,MAEP,UAAA;AAAA,QAAA,WAAW,OAAO,YAAY,gCAAa,OAAI,EAAA,MAAK,WAAW,UAAQ,SAAA;AAAA,QACvE,WAAW,oBAAC,OAAI,EAAA,MAAK,WAAW,UAAQ,SAAA;AAAA,QACxC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;ACTO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;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,UACE,OAAO,aAAa,YAAa,WAAW,SAAS,SAAa;AAAA,MAEpE,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.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const icon = require("./icon-BPmPItnm.js");
+const icon = require("./icon-CK55b563.js");
 function GoabAccordion({
   open,
   heading,
@@ -37,7 +37,7 @@ function GoabAccordion({
     "goa-accordion",
     {
       ref,
-      open,
+      open: open ? "true" : void 0,
       headingsize: headingSize,
       heading,
       secondarytext: secondaryText,
@@ -90,7 +90,7 @@ function GoabAppHeader({
       fullmenubreakpoint: fullMenuBreakpoint,
       maxcontentwidth: maxContentWidth,
       testid: testId,
-      hasmenuclickhandler: !!onMenuClick,
+      hasmenuclickhandler: onMenuClick ? "true" : "false",
       children
     }
   );
@@ -122,7 +122,7 @@ function GoabBadge({
     {
       type,
       content,
-      icon: icon2,
+      icon: icon2 ? "true" : void 0,
       testid: testId,
       arialabel: ariaLabel,
       mt,
@@ -249,8 +249,8 @@ function GoabBlock(props) {
   );
 }
 function GoabButton({
-  disabled = false,
-  type = "primary",
+  disabled,
+  type,
   size,
   variant,
   leadingIcon,
@@ -288,7 +288,7 @@ function GoabButton({
       type,
       size,
       variant,
-      disabled: disabled || void 0,
+      disabled: disabled ? "true" : void 0,
       leadingicon: leadingIcon,
       trailingicon: trailingIcon,
       width,
@@ -439,11 +439,11 @@ function GoabCheckbox({
       ref: el,
       id,
       name,
-      error,
-      checked: checked || false,
-      disabled,
+      error: error ? "true" : void 0,
+      checked: checked ? "true" : void 0,
+      disabled: disabled ? "true" : void 0,
       text,
-      value,
+      value: typeof value === "boolean" ? value ? "true" : void 0 : value,
       arialabel: ariaLabel,
       description: typeof description === "string" ? description : void 0,
       maxwidth: maxWidth,
@@ -459,10 +459,10 @@ function GoabCheckbox({
   );
 }
 const GoabChip = ({
-  leadingIcon = "",
-  iconTheme = "outline",
-  deletable = false,
-  error = false,
+  leadingIcon,
+  iconTheme,
+  deletable,
+  error,
   variant,
   content,
   onClick,
@@ -491,8 +491,8 @@ const GoabChip = ({
       ref: el,
       leadingicon: leadingIcon,
       icontheme: iconTheme,
-      error,
-      deletable,
+      error: error ? "true" : void 0,
+      deletable: deletable ? "true" : void 0,
       content,
       variant,
       mt,
@@ -514,7 +514,7 @@ const GoabCircularProgress = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "goa-circular-progress",
     {
-      visible: visible ? "true" : "false",
+      visible: visible ? "true" : void 0,
       message: message2,
       progress,
       variant,
@@ -597,8 +597,8 @@ function GoabDatePicker({
       ref,
       name,
       value: (value == null ? void 0 : value.toISOString()) || "",
-      error,
-      disabled,
+      error: error ? "true" : void 0,
+      disabled: disabled ? "true" : void 0,
       min: min == null ? void 0 : min.toISOString(),
       max: max == null ? void 0 : max.toISOString(),
       testid: testId,
@@ -606,7 +606,7 @@ function GoabDatePicker({
       mr,
       mb,
       ml,
-      relative
+      relative: relative ? "true" : void 0
     }
   );
 }
@@ -615,7 +615,7 @@ function GoabDetails(props) {
     "goa-details",
     {
       heading: props.heading,
-      open: props.open,
+      open: props.open ? "true" : void 0,
       maxwidth: props.maxWidth,
       testid: props.testId,
       mt: props.mt,
@@ -671,21 +671,21 @@ function GoabDropdown(props) {
       value: stringify(props.value),
       arialabel: props.ariaLabel,
       arialabelledby: props.ariaLabelledBy,
-      disabled: props.disabled,
-      error: props.error,
-      filterable: props.filterable,
+      disabled: props.disabled ? "true" : void 0,
+      error: props.error ? "true" : void 0,
+      filterable: props.filterable ? "true" : void 0,
       leadingicon: props.leadingIcon,
       maxheight: props.maxHeight,
       mb: props.mb,
       ml: props.ml,
       mr: props.mr,
       mt: props.mt,
-      multiselect: props.multiselect,
-      native: props.native,
+      multiselect: props.multiselect ? "true" : void 0,
+      native: props.native ? "true" : void 0,
       placeholder: props.placeholder,
       testid: props.testId,
       width: props.width,
-      relative: props.relative,
+      relative: props.relative ? "true" : void 0,
       id: props.id,
       children: props.children
     }
@@ -697,7 +697,13 @@ function GoabDropdownOption(props) {
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsx(GoabDropdownItem, { ...props });
 }
-function GoabDropdownItem({ value, label, filter, name, mountType = "append" }) {
+function GoabDropdownItem({
+  value,
+  label,
+  filter,
+  name,
+  mountType = "append"
+}) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "goa-dropdown-item",
     {
@@ -724,28 +730,28 @@ function GoabFieldset({
 }) {
   const ref = react.useRef(null);
   react.useEffect(() => {
-    var _a;
+    if (!ref.current) return;
+    const current = ref.current;
     const _continue = (e) => {
       const event = e.detail;
       return onContinue == null ? void 0 : onContinue(event);
     };
     if (onContinue) {
-      (_a = ref.current) == null ? void 0 : _a.addEventListener("_continue", _continue);
+      current.addEventListener("_continue", _continue);
     }
     return () => {
-      var _a2;
       if (onContinue) {
-        (_a2 = ref.current) == null ? void 0 : _a2.removeEventListener("_continue", _continue);
+        current.removeEventListener("_continue", _continue);
       }
     };
-  }, [ref.current, onContinue]);
+  }, [ref, onContinue]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "goa-public-form-page",
     {
       ref,
       id,
-      first,
-      last,
+      first: first ? "true" : void 0,
+      last: last ? "true" : void 0,
       heading,
       buttontext: buttonText,
       mt,
@@ -835,14 +841,7 @@ function GoabAppFooterMetaSection({
   testId,
   children
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "goa-app-footer-meta-section",
-    {
-      testid: testId,
-      slot: "meta",
-      children
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsx("goa-app-footer-meta-section", { testid: testId, slot: "meta", children });
 }
 function GoabAppFooterNavSection({
   heading,
@@ -1031,7 +1030,7 @@ function GoabIconButton({
     {
       ref,
       icon: icon2,
-      disabled,
+      disabled: disabled ? "true" : void 0,
       variant,
       size,
       title,
@@ -2729,7 +2728,7 @@ function GoabInput({
     {
       ref,
       debounce,
-      focused,
+      focused: focused ? "true" : void 0,
       type,
       name,
       autocapitalize: autoCapitalize,
@@ -2737,10 +2736,10 @@ function GoabInput({
       leadingicon: leadingIcon,
       trailingicon: trailingIcon,
       variant,
-      disabled,
-      readonly,
+      disabled: disabled ? "true" : void 0,
+      readonly: readonly ? "true" : void 0,
       placeholder,
-      error,
+      error: error ? "true" : void 0,
       testid: testId,
       value,
       width,
@@ -2755,7 +2754,7 @@ function GoabInput({
       mr,
       mb,
       ml,
-      handletrailingiconclick: !!onTrailingIconClick,
+      handletrailingiconclick: onTrailingIconClick ? "true" : "false",
       trailingiconarialabel: trailingIconAriaLabel,
       children: [
         leadingContent && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "leadingContent", children: leadingContent }),
@@ -2991,7 +2990,7 @@ function GoabMicrositeHeader({
       maxcontentwidth: maxContentWidth,
       feedbackurltarget: feedbackUrlTarget,
       headerurltarget: headerUrlTarget,
-      hasfeedbackhandler: !!onFeedbackClick,
+      hasfeedbackhandler: onFeedbackClick ? "true" : "false",
       children: version && typeof version !== "string" && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "version", children: version })
     }
   );
@@ -3026,8 +3025,8 @@ function GoabModal({
     "goa-modal",
     {
       ref: el,
-      open,
-      closable: !!onClose,
+      open: open ? "true" : void 0,
+      closable: onClose ? "true" : "false",
       maxwidth: maxWidth,
       transition,
       calloutvariant: calloutVariant,
@@ -3095,7 +3094,7 @@ function GoabPages(props) {
   );
 }
 function GoabPagination({ onChange, ...props }) {
-  const ref = react.useRef();
+  const ref = react.useRef(null);
   react.useEffect(() => {
     if (!ref.current) {
       return;
@@ -3146,9 +3145,9 @@ function GoabPopover({
       testid: testId,
       maxwidth: maxWidth,
       minwidth: minWidth,
-      padded,
+      padded: typeof padded === "undefined" ? void 0 : padded ? "true" : "false",
       position,
-      relative,
+      relative: relative ? "true" : void 0,
       mt,
       mr,
       mb,
@@ -3169,7 +3168,6 @@ function GoabRadioItem({
   disabled,
   checked,
   error,
-  testId,
   ariaLabel,
   children,
   mt,
@@ -3185,9 +3183,9 @@ function GoabRadioItem({
       value,
       description: typeof description === "string" ? description : void 0,
       maxwidth: maxWidth,
-      error,
-      disabled,
-      checked,
+      error: error ? "true" : void 0,
+      disabled: disabled ? "true" : void 0,
+      checked: checked ? "true" : void 0,
       arialabel: ariaLabel,
       mt,
       mr,
@@ -3205,8 +3203,8 @@ function GoabRadioGroup({
   value,
   children,
   orientation,
-  disabled = false,
-  error = false,
+  disabled,
+  error,
   testId,
   ariaLabel,
   mt,
@@ -3240,8 +3238,8 @@ function GoabRadioGroup({
       name,
       value,
       orientation,
-      disabled,
-      error,
+      disabled: disabled ? "true" : void 0,
+      error: error ? "true" : void 0,
       arialabel: ariaLabel,
       mt,
       mr,
@@ -3324,7 +3322,7 @@ function GoabSpinner({
       type,
       size,
       progress,
-      invert,
+      invert: invert ? "true" : void 0,
       testid: testId
     }
   );
@@ -3350,7 +3348,6 @@ function GoabTable({ onSort, ...props }) {
     {
       ref,
       width: props.width,
-      stickyheader: false,
       variant: props.variant,
       testid: props.testId,
       mt: props.mt,
@@ -3470,13 +3467,13 @@ function GoabTextArea({
       placeholder,
       value,
       rows,
-      readOnly,
-      disabled,
+      readOnly: readOnly ? "true" : void 0,
+      disabled: disabled ? "true" : void 0,
       countby: countBy,
       maxcount: maxCount,
       width,
       maxwidth: maxWidth,
-      error,
+      error: error ? "true" : void 0,
       testid: testId,
       arialabel: ariaLabel,
       mt,
@@ -3537,7 +3534,7 @@ function GoabTwoColumnLayout(props) {
 }
 const GoabFilterChip = ({
   iconTheme = "outline",
-  error = false,
+  error,
   content,
   onClick,
   mt,
@@ -3561,7 +3558,7 @@ const GoabFilterChip = ({
     {
       ref: el,
       icontheme: iconTheme,
-      error,
+      error: error ? "true" : void 0,
       content,
       mt,
       mr,