@abgov/react-components 6.4.1 → 6.5.0-alpha.2

package/experimental/form/form.d.ts

@@ -1,6 +1,5 @@
-import { Margins, GoabFormStorageType, GoabFormOnMountDetail, GoabFormOnStateChange } from '@abgov/ui-components-common';
 import { ReactNode } from 'react';
-
+import { Margins, GoabFormStorageType, GoabFormOnMountDetail, GoabFormOnStateChange } from '@abgov/ui-components-common';
 interface WCProps extends Margins {
     ref?: React.RefObject<HTMLElement | null>;
     name: string;

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

@@ -1,6 +1,5 @@
-import { Margins } from '@abgov/ui-components-common';
 import { ReactNode } from 'react';
-
+import { Margins } from '@abgov/ui-components-common';
 interface WCProps extends Margins {
     heading: string;
 }

package/experimental/form/task.d.ts

@@ -1,6 +1,5 @@
-import { Margins } from '@abgov/ui-components-common';
 import { ReactNode } from 'react';
-
+import { Margins } from '@abgov/ui-components-common';
 interface WCProps extends Margins {
     status: "completed" | "not-started" | "cannot-start";
 }

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

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

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, 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;;;"}
+{"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,eAAiB;AAE3CC,QAAAA,UAAU,MAAM;;AACd,aAAS,YAAU,WAAM,YAAN,mBAAe,wBAAwB,UAAS;AAAA,EACrE,GAAG,EAAE;AAEL,WAAS,kBAAkB;AACzB,mBAAe,UAAU;AAAA,EAAA;AAG3B,WAAS,YAAY,GAAqB;AACxC,mBAAe,UAAU;AAClB,WAAA,iBAAiB,WAAW,eAAe;AAAA,EAAA;AAGpD,WAAS,UAAU,GAAqB;AACtC,mBAAe,UAAU;AAClB,WAAA,oBAAoB,WAAW,eAAe;AAAA,EAAA;AAGvD,WAAS,YAAY,GAAqB;;AACpC,QAAA,eAAe,YAAY,UAAU;AACvC;AAAA,IAAA;AAGF,UAAM,YAAY,WAAW;AAC7B,UAAM,WAAU,uCAAW,wBAAwB,MAAK;AACxD,UAAM,SAAS,EAAE;AACX,UAAA,WAAW,MAAM,YAAY;AAEnC,QAAI,UAAU,GAAG;AACf;AAAA,IAAA;AAIF,UAAM,YAAU,eAAU,YAAV,mBAAmB,wBAAwB,MAAK;AAGhE,UAAM,YAAY,KAAK;AAAA,MACrB,UAAU;AAAA,MACV,KAAK,IAAI,SAAS,SAAS,SAAS,OAAO;AAAA,IAC7C;AACA,UAAM,eAAe,KAAK,IAAI,UAAU,YAAY,EAAE;AAGtD,QAAI,gBAAgB,UAAU;AAC5B;AAAA,IAAA;AAIF,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,EAAA;AAIxC,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,2BAAAA,IAAC,OAAI,EAAA,KAAK,WAAW,WAAW,IAAI,QAClC,UAACA,2BAAA,IAAAC,KAAA,UAAA,EAAS,MAAK,cAAc,CAAA,EAC/B,CAAA;AAAA,QAAA,GACF;AAAA,uCACC,OAAI,EAAA,KAAK,UAAU,WAAW,IAAI,OAChC,UACHL,OAAA,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF;AAEJ;;;"}

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, 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;"}
+{"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,EAAE;AAEL,WAAS,kBAAkB;AACzB,mBAAe,UAAU;AAAA,EAAA;AAG3B,WAAS,YAAY,GAAqB;AACxC,mBAAe,UAAU;AAClB,WAAA,iBAAiB,WAAW,eAAe;AAAA,EAAA;AAGpD,WAAS,UAAU,GAAqB;AACtC,mBAAe,UAAU;AAClB,WAAA,oBAAoB,WAAW,eAAe;AAAA,EAAA;AAGvD,WAAS,YAAY,GAAqB;;AACpC,QAAA,eAAe,YAAY,UAAU;AACvC;AAAA,IAAA;AAGF,UAAM,YAAY,WAAW;AAC7B,UAAM,WAAU,uCAAW,wBAAwB,MAAK;AACxD,UAAM,SAAS,EAAE;AACX,UAAA,WAAW,MAAM,YAAY;AAEnC,QAAI,UAAU,GAAG;AACf;AAAA,IAAA;AAIF,UAAM,YAAU,eAAU,YAAV,mBAAmB,wBAAwB,MAAK;AAGhE,UAAM,YAAY,KAAK;AAAA,MACrB,UAAU;AAAA,MACV,KAAK,IAAI,SAAS,SAAS,SAAS,OAAO;AAAA,IAC7C;AACA,UAAM,eAAe,KAAK,IAAI,UAAU,YAAY,EAAE;AAGtD,QAAI,gBAAgB,UAAU;AAC5B;AAAA,IAAA;AAIF,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,EAAA;AAIxC,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,cAAc,CAAA,EAC/B,CAAA;AAAA,QAAA,GACF;AAAA,4BACC,OAAI,EAAA,KAAK,UAAU,WAAW,IAAI,OAChC,UACHA,OAAA,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}

package/icon-CK55b563.js.map

@@ -1 +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;;;"}
+{"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,IAAA;AAEC,aAAA,YAAA,mBAAS,iBAAiB,UAAU;AACvC,WAAO,MAAM;;AACR,OAAAC,MAAA,GAAA,YAAA,gBAAAA,IAAS,oBAAoB,UAAU;AAAA,IAC5C;AAAA,EAAA,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,EACH;AAEJ;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,EACV;AAEJ;;;"}

package/icon-CoYGOp1V.mjs.map

@@ -1 +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;"}
+{"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,IAAA;AAEC,aAAA,YAAA,mBAAS,iBAAiB,UAAU;AACvC,WAAO,MAAM;;AACR,OAAAA,MAAA,GAAA,YAAA,gBAAAA,IAAS,oBAAoB,UAAU;AAAA,IAC5C;AAAA,EAAA,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,EACH;AAEJ;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,EACV;AAEJ;"}

package/index.d.ts

@@ -17,12 +17,15 @@ export * from './lib/divider/divider';
 export * from './lib/drawer/drawer';
 export * from './lib/dropdown/dropdown';
 export * from './lib/dropdown/dropdown-item';
-export * from './lib/fieldset/fieldset';
 export * from './lib/file-upload-card/file-upload-card';
 export * from './lib/file-upload-input/file-upload-input';
 export * from './lib/footer/footer';
 export * from './lib/footer-meta-section/footer-meta-section';
 export * from './lib/footer-nav-section/footer-nav-section';
+export * from './lib/form/fieldset';
+export * from './lib/form/public-form-page';
+export * from './lib/form/public-form-summary';
+export * from './lib/form/public-form';
 export * from './lib/form-item/form-item';
 export * from './lib/form-step/form-step';
 export * from './lib/form-stepper/form-stepper';

package/index.js

@@ -721,53 +721,6 @@ function GoabDropdownItem({
     }
   );
 }
-function GoabFieldset({
-  heading,
-  buttonText,
-  id,
-  onContinue,
-  children,
-  mt,
-  mr,
-  mb,
-  ml,
-  first,
-  last
-}) {
-  const ref = react.useRef(null);
-  react.useEffect(() => {
-    if (!ref.current) return;
-    const current = ref.current;
-    const _continue = (e) => {
-      const event = e.detail;
-      return onContinue == null ? void 0 : onContinue(event);
-    };
-    if (onContinue) {
-      current.addEventListener("_continue", _continue);
-    }
-    return () => {
-      if (onContinue) {
-        current.removeEventListener("_continue", _continue);
-      }
-    };
-  }, [ref, onContinue]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "goa-public-form-page",
-    {
-      ref,
-      id,
-      first: first ? "true" : void 0,
-      last: last ? "true" : void 0,
-      heading,
-      buttontext: buttonText,
-      mt,
-      mr,
-      mb,
-      ml,
-      children
-    }
-  );
-}
 function GoabFileUploadCard({
   filename,
   size,
@@ -866,6 +819,209 @@ function GoabAppFooterNavSection({
     }
   );
 }
+function GoabFieldset({
+  id,
+  sectionTitle,
+  dispatchOn,
+  onContinue,
+  onChange,
+  children
+}) {
+  const ref = react.useRef(null);
+  react.useEffect(() => {
+    if (!ref.current) return;
+    const current = ref.current;
+    const changeListener = (e) => {
+      const detail = e.detail;
+      onChange == null ? void 0 : onChange(detail);
+    };
+    const continueListener = (e) => {
+      const event = e.detail;
+      return onContinue == null ? void 0 : onContinue(event);
+    };
+    if (onContinue) {
+      current.addEventListener("_continue", continueListener);
+    }
+    if (onChange) {
+      current.addEventListener("_change", changeListener);
+    }
+    return () => {
+      if (onContinue) {
+        current.removeEventListener("_continue", continueListener);
+      }
+      if (onChange) {
+        current.removeEventListener("_change", changeListener);
+      }
+    };
+  }, [ref, onContinue]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "goa-fieldset",
+    {
+      ref,
+      id,
+      "section-title": sectionTitle,
+      "dispatch-on": dispatchOn,
+      children
+    }
+  );
+}
+function GoabPublicFormPage({
+  id = "",
+  heading = "",
+  subHeading = "",
+  summaryHeading = "",
+  sectionTitle = "",
+  backUrl = "",
+  type = "step",
+  buttonText = "",
+  buttonVisibility = "visible",
+  first = false,
+  last = false,
+  onContinue,
+  onBack,
+  onFieldsetChange,
+  onComplete,
+  children,
+  mt,
+  mr,
+  mb,
+  ml
+}) {
+  const ref = react.useRef(null);
+  react.useEffect(() => {
+    if (!ref.current) return;
+    const current = ref.current;
+    const continueListener = (e) => {
+      onContinue == null ? void 0 : onContinue(e);
+    };
+    const backListener = (e) => {
+      onBack == null ? void 0 : onBack(e);
+    };
+    const fieldsetChangeListener = (e) => {
+      const detail = e.detail;
+      onFieldsetChange == null ? void 0 : onFieldsetChange(detail);
+    };
+    const completeListener = (e) => {
+      const detail = e.detail;
+      onComplete == null ? void 0 : onComplete(detail);
+    };
+    if (onContinue) {
+      current.addEventListener("_continue", continueListener);
+    }
+    if (onBack) {
+      current.addEventListener("_back", backListener);
+    }
+    if (onFieldsetChange) {
+      current.addEventListener("_fieldsetChange", fieldsetChangeListener);
+    }
+    if (onComplete) {
+      current.addEventListener("_complete", completeListener);
+    }
+    return () => {
+      if (onContinue) {
+        current.removeEventListener("_continue", continueListener);
+      }
+      if (onBack) {
+        current.removeEventListener("_back", backListener);
+      }
+      if (onFieldsetChange) {
+        current.removeEventListener("_fieldsetChange", fieldsetChangeListener);
+      }
+      if (onComplete) {
+        current.removeEventListener("_complete", completeListener);
+      }
+    };
+  }, [ref, onContinue, onBack, onFieldsetChange, onComplete]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "goa-public-form-page",
+    {
+      ref,
+      id,
+      heading,
+      "sub-heading": subHeading,
+      "section-title": sectionTitle,
+      "back-url": backUrl,
+      type,
+      "button-text": buttonText,
+      "button-visibility": buttonVisibility,
+      first,
+      last,
+      "summary-heading": summaryHeading,
+      mt,
+      mr,
+      mb,
+      ml,
+      children
+    }
+  );
+}
+function GoabPublicFormSummary({
+  heading = ""
+}) {
+  const ref = react.useRef(null);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "goa-public-form-summary",
+    {
+      ref,
+      heading
+    }
+  );
+}
+function GoabPublicForm({
+  status = "complete",
+  name,
+  onInit,
+  onComplete,
+  onStateChange,
+  children
+}) {
+  const ref = react.useRef(null);
+  const initialized = react.useRef(false);
+  react.useLayoutEffect(() => {
+    if (!ref.current) return;
+    const current = ref.current;
+    const initListener = (e) => {
+      onInit == null ? void 0 : onInit(e);
+    };
+    if (onInit && !initialized.current) {
+      current.addEventListener("_init", initListener);
+    }
+    const completeListener = (e) => {
+      const detail = e.detail;
+      onComplete == null ? void 0 : onComplete(detail);
+    };
+    const stateChangeListener = (e) => {
+      const detail = e.detail;
+      onStateChange == null ? void 0 : onStateChange(detail.data);
+    };
+    if (onComplete) {
+      current.addEventListener("_complete", completeListener);
+    }
+    if (onStateChange) {
+      current.addEventListener("_stateChange", stateChangeListener);
+    }
+    return () => {
+      if (onInit) {
+        current.removeEventListener("_init", initListener);
+      }
+      if (onComplete) {
+        current.removeEventListener("_complete", completeListener);
+      }
+      if (onStateChange) {
+        current.removeEventListener("_stateChange", stateChangeListener);
+      }
+    };
+  }, [onInit, onComplete, onStateChange]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "goa-public-form",
+    {
+      ref,
+      status,
+      name,
+      children
+    }
+  );
+}
 function GoabFormItem({
   children,
   helpText,
@@ -874,6 +1030,8 @@ function GoabFormItem({
   label,
   labelSize,
   maxWidth,
+  publicFormSummaryOrder,
+  name,
   mt,
   mr,
   mb,
@@ -890,6 +1048,8 @@ function GoabFormItem({
       requirement,
       helptext: typeof helpText === "string" ? helpText : void 0,
       maxwidth: maxWidth,
+      "public-form-summary-order": publicFormSummaryOrder,
+      name,
       mt,
       mr,
       mb,
@@ -1768,8 +1928,6 @@ const lightFormatters = {
   }
 };
 const dayPeriodEnum = {
-  am: "am",
-  pm: "pm",
   midnight: "midnight",
   noon: "noon",
   morning: "morning",
@@ -2705,7 +2863,7 @@ function GoabInput({
     const current = ref.current;
     const changeListener = (e) => {
       const detail = e.detail;
-      onChange(detail);
+      onChange == null ? void 0 : onChange(detail);
     };
     const clickListener = () => {
       onTrailingIconClick == null ? void 0 : onTrailingIconClick();
@@ -2778,15 +2936,15 @@ function GoabInput({
 const onDateChangeHandler = (onChange) => {
   return ({ name, value }) => {
     if (!value) {
-      onChange({ name, value: "" });
+      onChange == null ? void 0 : onChange({ name, value: "" });
       return;
     }
     if (typeof value === "string" && isValid(new Date(value))) {
-      onChange({ name, value: parseISO(value) });
+      onChange == null ? void 0 : onChange({ name, value: parseISO(value) });
       return;
     }
     if (isValid(value)) {
-      onChange({ name, value });
+      onChange == null ? void 0 : onChange({ name, value });
       return;
     }
   };
@@ -2794,10 +2952,10 @@ const onDateChangeHandler = (onChange) => {
 const onTimeChangeHandler = (onChange) => {
   return ({ name, value }) => {
     if (!value) {
-      onChange({ name, value: "" });
+      onChange == null ? void 0 : onChange({ name, value: "" });
       return;
     }
-    onChange({ name, value });
+    onChange == null ? void 0 : onChange({ name, value });
   };
 };
 function toString(value, tmpl = "yyyy-MM-dd") {
@@ -2887,7 +3045,10 @@ function GoabInputFile(props) {
       id: props.id,
       name: props.name,
       type: "file",
-      onChange: (e) => props.onChange({ name: e.target.name, value: e.target.value }),
+      onChange: (e) => {
+        var _a;
+        return (_a = props.onChange) == null ? void 0 : _a.call(props, { name: e.target.name, value: e.target.value });
+      },
       style: { backgroundColor: "revert" }
     }
   );
@@ -2902,7 +3063,8 @@ function GoabInputNumber({
   ...props
 }) {
   const onNumberChange = ({ name, value: value2 }) => {
-    props.onChange({ name, value: parseFloat(value2) });
+    var _a;
+    (_a = props.onChange) == null ? void 0 : _a.call(props, { name, value: parseFloat(value2) });
   };
   const onFocus = ({ name, value: value2 }) => {
     var _a;
@@ -3220,6 +3382,7 @@ function GoabRadioGroup({
   orientation,
   disabled,
   error,
+  id,
   testId,
   ariaLabel,
   mt,
@@ -3232,17 +3395,17 @@ function GoabRadioGroup({
   react.useEffect(() => {
     if (!el.current) return;
     const listener = (e) => {
-      if (!onChange) {
-        console.warn("Missing onChange function");
-        return;
-      }
       const detail = e.detail;
-      onChange(detail);
+      onChange == null ? void 0 : onChange(detail);
     };
     const currentEl = el.current;
-    currentEl.addEventListener("_change", listener);
+    if (onChange) {
+      currentEl.addEventListener("_change", listener);
+    }
     return () => {
-      currentEl.removeEventListener("_change", listener);
+      if (onChange) {
+        currentEl.removeEventListener("_change", listener);
+      }
     };
   }, [name, onChange]);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -3250,6 +3413,7 @@ function GoabRadioGroup({
     {
       testid: testId,
       ref: el,
+      id,
       name,
       value,
       orientation,
@@ -3453,11 +3617,15 @@ function GoabTextArea({
     const current = el.current;
     const listener = (e) => {
       const detail = e.detail;
-      onChange(detail);
+      onChange == null ? void 0 : onChange(detail);
     };
-    current.addEventListener("_change", listener);
+    if (onChange) {
+      current.addEventListener("_change", listener);
+    }
     return () => {
-      current.removeEventListener("_change", listener);
+      if (onChange) {
+        current.removeEventListener("_change", listener);
+      }
     };
   }, [el, onChange]);
   react.useEffect(() => {
@@ -3645,6 +3813,9 @@ exports.GoabPageBlock = GoabPageBlock;
 exports.GoabPages = GoabPages;
 exports.GoabPagination = GoabPagination;
 exports.GoabPopover = GoabPopover;
+exports.GoabPublicForm = GoabPublicForm;
+exports.GoabPublicFormPage = GoabPublicFormPage;
+exports.GoabPublicFormSummary = GoabPublicFormSummary;
 exports.GoabRadioGroup = GoabRadioGroup;
 exports.GoabRadioItem = GoabRadioItem;
 exports.GoabSideMenu = GoabSideMenu;