UNPKG

@abgov/react-components

Version:

Government of Alberta - UI components for React

1 lines 330 kB
{"version":3,"file":"index.mjs","sources":["../../../libs/react-components/src/lib/accordion/accordion.tsx","../../../libs/react-components/src/lib/app-header/app-header.tsx","../../../libs/react-components/src/lib/app-header-menu/app-header-menu.tsx","../../../libs/react-components/src/lib/badge/badge.tsx","../../../libs/react-components/src/lib/block/block.tsx","../../../libs/react-components/src/lib/button/button.tsx","../../../libs/react-components/src/lib/button-group/button-group.tsx","../../../libs/react-components/src/lib/calendar/calendar.tsx","../../../libs/react-components/src/lib/callout/callout.tsx","../../../libs/react-components/src/lib/checkbox/checkbox.tsx","../../../libs/react-components/src/lib/checkbox-list/checkbox-list.tsx","../../../libs/react-components/src/lib/chip/chip.tsx","../../../libs/react-components/src/lib/circular-progress/circular-progress.tsx","../../../libs/react-components/src/lib/container/container.tsx","../../../libs/react-components/src/lib/date-picker/date-picker.tsx","../../../libs/react-components/src/lib/details/details.tsx","../../../libs/react-components/src/lib/divider/divider.tsx","../../../libs/react-components/src/lib/dropdown/dropdown.tsx","../../../libs/react-components/src/lib/dropdown/dropdown-item.tsx","../../../libs/react-components/src/lib/file-upload-card/file-upload-card.tsx","../../../libs/react-components/src/lib/file-upload-input/file-upload-input.tsx","../../../libs/react-components/src/lib/footer/footer.tsx","../../../libs/react-components/src/lib/footer-meta-section/footer-meta-section.tsx","../../../libs/react-components/src/lib/footer-nav-section/footer-nav-section.tsx","../../../libs/react-components/src/lib/form/fieldset.tsx","../../../libs/react-components/src/lib/form/public-form-page.tsx","../../../libs/react-components/src/lib/form/public-form-summary.tsx","../../../libs/react-components/src/lib/form/public-form.tsx","../../../libs/react-components/src/lib/form/public-subform.tsx","../../../libs/react-components/src/lib/form/public-subform-index.tsx","../../../libs/react-components/src/lib/form/task.tsx","../../../libs/react-components/src/lib/form/task-list.tsx","../../../libs/react-components/src/lib/form-item/form-item.tsx","../../../libs/react-components/src/lib/form-step/form-step.tsx","../../../libs/react-components/src/lib/form-stepper/form-stepper.tsx","../../../libs/react-components/src/lib/grid/grid.tsx","../../../libs/react-components/src/lib/hero-banner/hero-banner.tsx","../../../libs/react-components/src/lib/hero-banner/hero-banner-actions.tsx","../../../libs/react-components/src/lib/icon-button/icon-button.tsx","../../../node_modules/date-fns/toDate.mjs","../../../node_modules/date-fns/constructFrom.mjs","../../../node_modules/date-fns/constants.mjs","../../../node_modules/date-fns/_lib/defaultOptions.mjs","../../../node_modules/date-fns/startOfWeek.mjs","../../../node_modules/date-fns/startOfISOWeek.mjs","../../../node_modules/date-fns/getISOWeekYear.mjs","../../../node_modules/date-fns/startOfDay.mjs","../../../node_modules/date-fns/_lib/getTimezoneOffsetInMilliseconds.mjs","../../../node_modules/date-fns/differenceInCalendarDays.mjs","../../../node_modules/date-fns/startOfISOWeekYear.mjs","../../../node_modules/date-fns/isDate.mjs","../../../node_modules/date-fns/isValid.mjs","../../../node_modules/date-fns/startOfYear.mjs","../../../node_modules/date-fns/locale/en-US/_lib/formatDistance.mjs","../../../node_modules/date-fns/locale/_lib/buildFormatLongFn.mjs","../../../node_modules/date-fns/locale/en-US/_lib/formatLong.mjs","../../../node_modules/date-fns/locale/en-US/_lib/formatRelative.mjs","../../../node_modules/date-fns/locale/_lib/buildLocalizeFn.mjs","../../../node_modules/date-fns/locale/en-US/_lib/localize.mjs","../../../node_modules/date-fns/locale/_lib/buildMatchFn.mjs","../../../node_modules/date-fns/locale/_lib/buildMatchPatternFn.mjs","../../../node_modules/date-fns/locale/en-US/_lib/match.mjs","../../../node_modules/date-fns/locale/en-US.mjs","../../../node_modules/date-fns/getDayOfYear.mjs","../../../node_modules/date-fns/getISOWeek.mjs","../../../node_modules/date-fns/getWeekYear.mjs","../../../node_modules/date-fns/startOfWeekYear.mjs","../../../node_modules/date-fns/getWeek.mjs","../../../node_modules/date-fns/_lib/addLeadingZeros.mjs","../../../node_modules/date-fns/_lib/format/lightFormatters.mjs","../../../node_modules/date-fns/_lib/format/formatters.mjs","../../../node_modules/date-fns/_lib/format/longFormatters.mjs","../../../node_modules/date-fns/_lib/protectedTokens.mjs","../../../node_modules/date-fns/format.mjs","../../../node_modules/date-fns/parseISO.mjs","../../../libs/react-components/src/lib/input/input.tsx","../../../libs/react-components/src/lib/link/link.tsx","../../../libs/react-components/src/lib/link-button/link-button.tsx","../../../libs/react-components/src/lib/menu-button/menu-button.tsx","../../../libs/react-components/src/lib/menu-button/menu-action.tsx","../../../libs/react-components/src/lib/microsite-header/microsite-header.tsx","../../../libs/react-components/src/lib/modal/modal.tsx","../../../libs/react-components/src/lib/notification/notification.tsx","../../../libs/react-components/src/lib/one-column-layout/one-column-layout.tsx","../../../libs/react-components/src/lib/page-block/page-block.tsx","../../../libs/react-components/src/lib/pages/pages.tsx","../../../libs/react-components/src/lib/pagination/pagination.tsx","../../../libs/react-components/src/lib/popover/popover.tsx","../../../libs/react-components/src/lib/radio-group/radio.tsx","../../../libs/react-components/src/lib/radio-group/radio-group.tsx","../../../libs/react-components/src/lib/side-menu-group/side-menu-group.tsx","../../../libs/react-components/src/lib/side-menu-heading/side-menu-heading.tsx","../../../libs/react-components/src/lib/side-menu/side-menu.tsx","../../../libs/react-components/src/lib/skeleton/skeleton.tsx","../../../libs/react-components/src/lib/spacer/spacer.tsx","../../../libs/react-components/src/lib/spinner/spinner.tsx","../../../libs/react-components/src/lib/table/table.tsx","../../../libs/react-components/src/lib/table/table-sort-header.tsx","../../../libs/react-components/src/lib/tabs/tabs.tsx","../../../libs/react-components/src/lib/tab/tab.tsx","../../../libs/react-components/src/lib/temporary-notification-ctrl/temporary-notification-ctrl.tsx","../../../libs/react-components/src/lib/text/text.tsx","../../../libs/react-components/src/lib/textarea/textarea.tsx","../../../libs/react-components/src/lib/three-column-layout/three-column-layout.tsx","../../../libs/react-components/src/lib/tooltip/tooltip.tsx","../../../libs/react-components/src/lib/two-column-layout/two-column-layout.tsx","../../../libs/react-components/src/lib/filter-chip/filter-chip.tsx","../../../libs/common/src/lib/messaging/messaging.ts","../../../libs/common/src/lib/public-form-controller.ts","../../../libs/react-components/src/lib/use-public-form-controller.ts"],"sourcesContent":["import { ReactNode, useEffect, useRef, type JSX } from \"react\";\n\nimport type {\n GoabAccordionHeadingSize,\n GoabAccordionIconPosition,\n Margins,\n} from \"@abgov/ui-components-common\";\n\ninterface WCProps extends Margins {\n ref: React.RefObject<HTMLElement | null>;\n open?: string;\n headingsize?: GoabAccordionHeadingSize;\n heading: string;\n secondarytext?: string;\n headingContent?: ReactNode;\n maxwidth?: string;\n testid?: string;\n iconposition?: GoabAccordionIconPosition;\n}\n\ndeclare module \"react\" {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n interface IntrinsicElements {\n \"goa-accordion\": WCProps & React.HTMLAttributes<HTMLElement>;\n }\n }\n}\n\nexport interface GoabAccordionProps extends Margins {\n open?: boolean;\n headingSize?: GoabAccordionHeadingSize;\n secondaryText?: string;\n heading: string;\n headingContent?: ReactNode;\n maxWidth?: string;\n testId?: string;\n iconPosition?: GoabAccordionIconPosition;\n onChange?: (open: boolean) => void;\n children?: ReactNode;\n}\n\nexport function GoabAccordion({\n open,\n heading,\n headingSize,\n secondaryText,\n headingContent,\n iconPosition,\n maxWidth,\n testId,\n onChange,\n children,\n mt,\n mr,\n mb,\n ml,\n}: GoabAccordionProps): JSX.Element {\n const ref = useRef<HTMLElement>(null);\n\n useEffect(() => {\n const element = ref.current;\n if (element && onChange) {\n const handler = (event: Event) => {\n const customEvent = event as CustomEvent;\n onChange(customEvent.detail.open);\n };\n element.addEventListener(\"_change\", handler);\n return () => {\n element.removeEventListener(\"_change\", handler);\n };\n }\n }, [onChange]);\n return (\n <goa-accordion\n ref={ref}\n open={open ? \"true\" : undefined}\n headingsize={headingSize}\n heading={heading}\n secondarytext={secondaryText}\n iconposition={iconPosition}\n maxwidth={maxWidth}\n testid={testId}\n mt={mt}\n mr={mr}\n mb={mb}\n ml={ml}\n >\n {headingContent && <div slot=\"headingcontent\">{headingContent}</div>}\n {children}\n </goa-accordion>\n );\n}\n\nexport default GoabAccordion;\n","import { useEffect, useRef, type JSX } from \"react\";\n\ninterface WCProps {\n heading?: string;\n url?: string;\n maxcontentwidth?: string;\n fullmenubreakpoint?: number;\n hasmenuclickhandler?: string;\n ref: React.RefObject<HTMLElement | null>;\n testid?: string;\n}\n\ndeclare module \"react\" {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n interface IntrinsicElements {\n \"goa-app-header\": WCProps & React.HTMLAttributes<HTMLElement>;\n }\n }\n}\n\nexport interface GoabAppHeaderProps {\n heading?: string;\n url?: string;\n maxContentWidth?: string;\n fullMenuBreakpoint?: number;\n children?: React.ReactNode;\n onMenuClick?: () => void;\n testId?: string;\n}\n\nexport function GoabAppHeader({\n heading,\n url,\n maxContentWidth,\n fullMenuBreakpoint,\n testId,\n children,\n onMenuClick,\n}: GoabAppHeaderProps): JSX.Element {\n const el = useRef<HTMLElement>(null);\n\n useEffect(() => {\n if (!el.current) {\n return;\n }\n if (!onMenuClick) {\n return;\n }\n const current = el.current;\n const listener = () => {\n onMenuClick();\n };\n current.addEventListener(\"_menuClick\", listener);\n return () => {\n current.removeEventListener(\"_menuClick\", listener);\n };\n }, [el, onMenuClick]);\n\n return (\n <goa-app-header\n ref={el}\n heading={heading}\n url={url}\n fullmenubreakpoint={fullMenuBreakpoint}\n maxcontentwidth={maxContentWidth}\n testid={testId}\n hasmenuclickhandler={onMenuClick ? \"true\" : \"false\"}\n >\n {children}\n </goa-app-header>\n );\n}\n\nexport default GoabAppHeader;\n","import { ReactNode } from \"react\";\nimport { GoabIconType } from \"@abgov/ui-components-common\";\n\ninterface WCProps {\n heading: string;\n leadingicon?: GoabIconType;\n testid?: string;\n}\n\n/* eslint-disable-next-line */\nexport interface GoabAppHeaderMenuProps {\n heading: string;\n leadingIcon?: GoabIconType;\n testId?: string;\n children?: ReactNode;\n}\n\ndeclare module \"react\" {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n interface IntrinsicElements {\n \"goa-app-header-menu\": WCProps & React.HTMLAttributes<HTMLElement>;\n }\n }\n}\n\nexport function GoabAppHeaderMenu(props: GoabAppHeaderMenuProps) {\n return (\n <goa-app-header-menu\n heading={props.heading}\n leadingicon={props.leadingIcon}\n testid={props.testId}\n >\n {props.children}\n </goa-app-header-menu>\n );\n}\n\nexport default GoabAppHeaderMenu;\n","import { GoabBadgeType, Margins, GoabIconType } from \"@abgov/ui-components-common\";\nimport type { JSX } from \"react\";\n\ninterface WCProps extends Margins {\n type: GoabBadgeType;\n icon?: string;\n content?: string;\n arialabel?: string;\n testid?: string;\n icontype?: GoabIconType;\n}\n\ndeclare module \"react\" {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n interface IntrinsicElements {\n \"goa-badge\": WCProps & React.HTMLAttributes<HTMLElement>;\n }\n }\n}\n\nexport interface GoabBadgeProps extends Margins {\n type: GoabBadgeType;\n icon?: boolean;\n content?: string;\n testId?: string;\n ariaLabel?: string;\n iconType?: GoabIconType;\n}\n\n/**\n * Determines the icon display logic for the badge component.\n * Priority order:\n * 1. icon={true} - always show icon, starting with default\n * 2. icon={false} - always hide icon (overrides iconType)\n * 3. iconType provided - show custom icon\n * 4. default/no icon or iconType set - hide icon\n */\nfunction getIconValue(icon?: boolean, iconType?: GoabIconType): \"true\" | \"false\" {\n // Explicit icon prop takes precedence\n if (icon !== undefined) {\n return icon ? \"true\" : \"false\";\n }\n\n // Show custom icon if iconType is provided\n return iconType ? \"true\" : \"false\";\n}\n\nexport function GoabBadge({\n type,\n content,\n icon,\n testId,\n mt,\n mr,\n mb,\n ml,\n ariaLabel,\n iconType,\n}: GoabBadgeProps): JSX.Element {\n return (\n <goa-badge\n type={type}\n content={content}\n // Handle icon display priority: explicit icon prop takes precedence over iconType\n icon={getIconValue(icon, iconType)}\n testid={testId}\n arialabel={ariaLabel}\n icontype={iconType}\n mt={mt}\n mr={mr}\n mb={mb}\n ml={ml}\n />\n );\n}\n\n/**\n * @deprecated\n */\nexport function GoabInfoBadge({\n content,\n testId,\n icon,\n mt,\n mr,\n mb,\n ml,\n ariaLabel,\n}: GoabBadgeProps): JSX.Element {\n return (\n <GoabBadge\n type=\"information\"\n icon={icon}\n content={content}\n testId={testId}\n ariaLabel={ariaLabel}\n mt={mt}\n mr={mr}\n mb={mb}\n ml={ml}\n />\n );\n}\n\n/**\n * @deprecated\n */\nexport function GoabSuccessBadge({\n content,\n testId,\n icon,\n mt,\n mr,\n mb,\n ml,\n ariaLabel,\n}: GoabBadgeProps): JSX.Element {\n return (\n <GoabBadge\n type=\"success\"\n icon={icon}\n content={content}\n ariaLabel={ariaLabel}\n testId={testId}\n mt={mt}\n mr={mr}\n mb={mb}\n ml={ml}\n />\n );\n}\n\n/**\n * @deprecated\n */\nexport function GoabImportantBadge({\n content,\n testId,\n icon,\n mt,\n mr,\n mb,\n ml,\n ariaLabel,\n}: GoabBadgeProps): JSX.Element {\n return (\n <GoabBadge\n type=\"important\"\n icon={icon}\n content={content}\n testId={testId}\n ariaLabel={ariaLabel}\n mt={mt}\n mr={mr}\n mb={mb}\n ml={ml}\n />\n );\n}\n\n/**\n * @deprecated\n */\nexport function GoabEmergencyBadge({\n content,\n testId,\n icon,\n mt,\n mr,\n mb,\n ml,\n ariaLabel,\n}: GoabBadgeProps): JSX.Element {\n return (\n <GoabBadge\n type=\"emergency\"\n icon={icon}\n content={content}\n testId={testId}\n ariaLabel={ariaLabel}\n mt={mt}\n mr={mr}\n mb={mb}\n ml={ml}\n />\n );\n}\n","import {\n GoabBlockAlignment,\n GoabBlockDirection,\n Margins,\n Spacing,\n} from \"@abgov/ui-components-common\";\nimport { ReactNode } from \"react\";\n\nexport interface WCProps extends Margins {\n gap?: Spacing;\n direction?: GoabBlockDirection;\n alignment?: GoabBlockAlignment;\n testid?: string;\n}\n\ndeclare module \"react\" {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n interface IntrinsicElements {\n \"goa-block\": WCProps & React.HTMLAttributes<HTMLElement>;\n }\n }\n}\n\n/* eslint-disable-next-line */\nexport interface GoabBlockProps extends Margins {\n gap?: Spacing;\n direction?: GoabBlockDirection;\n alignment?: GoabBlockAlignment;\n testId?: string;\n children?: ReactNode;\n}\n\nexport function GoabBlock(props: GoabBlockProps) {\n return (\n <goa-block\n gap={props.gap}\n direction={props.direction}\n alignment={props.alignment}\n mt={props.mt}\n mr={props.mr}\n mb={props.mb}\n ml={props.ml}\n testid={props.testId}\n >\n {props.children}\n </goa-block>\n );\n}\n","import { ReactNode, useEffect, useRef, type JSX } from \"react\";\nimport {\n GoabButtonSize,\n GoabButtonType,\n GoabButtonVariant,\n GoabIconType,\n Margins,\n} from \"@abgov/ui-components-common\";\n\ninterface WCProps extends Margins {\n type?: GoabButtonType;\n size?: GoabButtonSize;\n variant?: GoabButtonVariant;\n disabled?: string;\n leadingicon?: string;\n trailingicon?: string;\n width?: string;\n testid?: string;\n action?: string;\n actionArgs?: string;\n actionArg?: 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-button\": WCProps & React.HTMLAttributes<HTMLElement>;\n }\n }\n}\n\nexport interface GoabButtonProps extends Margins {\n type?: GoabButtonType;\n size?: GoabButtonSize;\n variant?: GoabButtonVariant;\n disabled?: boolean;\n leadingIcon?: GoabIconType;\n trailingIcon?: GoabIconType;\n width?: string;\n onClick?: () => void;\n testId?: string;\n action?: string;\n actionArgs?: Record<string, unknown>;\n actionArg?: string;\n children?: ReactNode;\n}\n\nexport function GoabButton({\n disabled,\n type,\n size,\n variant,\n leadingIcon,\n trailingIcon,\n width,\n testId,\n children,\n onClick,\n mt,\n mr,\n mb,\n ml,\n action,\n actionArgs,\n actionArg,\n}: GoabButtonProps): JSX.Element {\n const el = useRef<HTMLElement>(null);\n\n useEffect(() => {\n if (!el.current) {\n return;\n }\n if (!onClick) {\n return;\n }\n const current = el.current;\n const listener = () => {\n onClick();\n };\n\n current.addEventListener(\"_click\", listener);\n return () => {\n current.removeEventListener(\"_click\", listener);\n };\n }, [el, onClick]);\n\n return (\n <goa-button\n ref={el}\n type={type}\n size={size}\n variant={variant}\n disabled={disabled ? \"true\" : undefined}\n leadingicon={leadingIcon}\n trailingicon={trailingIcon}\n width={width}\n testid={testId}\n action={action}\n action-arg={actionArg}\n action-args={JSON.stringify(actionArgs)}\n mt={mt}\n mr={mr}\n mb={mb}\n ml={ml}\n >\n {children}\n </goa-button>\n );\n}\n\nexport default GoabButton;\n","import {\n GoabButtonGroupAlignment,\n GoabButtonGroupGap,\n Margins,\n} from \"@abgov/ui-components-common\";\n\nimport type { JSX } from \"react\";\n\ninterface WCProps extends Margins {\n alignment: GoabButtonGroupAlignment;\n gap?: GoabButtonGroupGap;\n testid?: string;\n}\n\ndeclare module \"react\" {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n interface IntrinsicElements {\n \"goa-button-group\": WCProps & React.HTMLAttributes<HTMLElement>;\n }\n }\n}\n\nexport interface GoabButtonGroupProps extends Margins {\n alignment: GoabButtonGroupAlignment;\n gap?: GoabButtonGroupGap;\n testId?: string;\n children?: React.ReactNode;\n}\n\nexport function GoabButtonGroup({\n alignment,\n gap,\n testId,\n children,\n mt,\n mr,\n mb,\n ml,\n}: GoabButtonGroupProps): JSX.Element {\n return (\n <goa-button-group\n alignment={alignment}\n gap={gap}\n mt={mt}\n mr={mr}\n mb={mb}\n ml={ml}\n testid={testId}\n >\n {children}\n </goa-button-group>\n );\n}\n\nexport default GoabButtonGroup;\n","import { useEffect, useRef, type JSX } from \"react\";\nimport { GoabCalendarOnChangeDetail, Margins } from \"@abgov/ui-components-common\";\n\ninterface WCProps extends Margins {\n ref: React.RefObject<HTMLElement | null>;\n name?: string;\n value?: string;\n min?: string;\n max?: string;\n testid?: string;\n}\n\ndeclare module \"react\" {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n interface IntrinsicElements {\n \"goa-calendar\": WCProps & React.HTMLAttributes<HTMLElement>;\n }\n }\n}\nexport interface GoabCalendarProps extends Margins {\n name?: string;\n value?: string;\n min?: string;\n max?: string;\n testId?: string;\n onChange: (details: GoabCalendarOnChangeDetail) => void;\n}\n\nexport function GoabCalendar({\n name,\n value,\n min,\n max,\n testId,\n mt,\n mr,\n mb,\n ml,\n onChange,\n}: GoabCalendarProps): JSX.Element {\n const ref = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (!ref.current) {\n return;\n }\n const current = ref.current;\n const listener = (e: Event) => {\n onChange({\n name: name || \"\",\n value: (e as CustomEvent).detail.value,\n });\n }\n current.addEventListener(\"_change\", listener);\n\n return () => {\n current.removeEventListener(\"_change\", listener);\n }\n }, []);\n\n return (\n <goa-calendar\n ref={ref}\n name={name}\n value={value}\n min={min || undefined}\n max={max || undefined}\n testid={testId}\n mt={mt}\n mr={mr}\n mb={mb}\n ml={ml}\n />\n );\n}\n\nexport default GoabCalendar;\n","import {\n GoabCalloutAriaLive,\n GoabCalloutSize,\n GoabCalloutType,\n GoabCalloutIconTheme,\n Margins,\n} from \"@abgov/ui-components-common\";\n\ninterface WCProps extends Margins {\n heading?: string;\n type?: GoabCalloutType;\n size?: GoabCalloutSize;\n arialive?: GoabCalloutAriaLive;\n maxwidth?: string;\n icontheme?: GoabCalloutIconTheme;\n testid?: string;\n}\n\ndeclare module \"react\" {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n interface IntrinsicElements {\n \"goa-callout\": WCProps & React.HTMLAttributes<HTMLElement>;\n }\n }\n}\n\nexport interface GoabCalloutProps extends Margins {\n heading?: string;\n type?: GoabCalloutType;\n size?: GoabCalloutSize;\n iconTheme?: GoabCalloutIconTheme;\n maxWidth?: string;\n testId?: string;\n ariaLive?: GoabCalloutAriaLive;\n children?: React.ReactNode;\n}\n\nexport const GoabCallout = ({\n heading,\n type = \"information\",\n iconTheme = \"outline\",\n size = \"large\",\n maxWidth,\n testId,\n ariaLive = \"off\",\n children,\n mt,\n mr,\n mb,\n ml,\n}: GoabCalloutProps) => {\n return (\n <goa-callout\n heading={heading}\n type={type}\n size={size}\n maxwidth={maxWidth}\n arialive={ariaLive}\n icontheme={iconTheme}\n mt={mt}\n mr={mr}\n mb={mb}\n ml={ml}\n testid={testId}\n >\n {children}\n </goa-callout>\n );\n};\n\nexport default GoabCallout;\n","import { GoabCheckboxOnChangeDetail, Margins } from \"@abgov/ui-components-common\";\nimport { useEffect, useRef, type JSX } from \"react\";\n\ndeclare module \"react\" {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n interface IntrinsicElements {\n \"goa-checkbox\": WCProps & React.HTMLAttributes<HTMLElement>;\n }\n }\n}\n\ninterface WCProps extends Margins {\n ref: React.RefObject<HTMLElement | null>;\n id?: string;\n name: string;\n checked?: string;\n indeterminate?: string;\n disabled?: string;\n error?: string;\n text?: string;\n value?: string | number;\n arialabel?: string;\n description?: string | React.ReactNode;\n reveal?: React.ReactNode;\n revealarialabel?: string;\n maxwidth?: string;\n testid?: string;\n}\n\n/* eslint-disable-next-line */\nexport interface GoabCheckboxProps extends Margins {\n id?: string;\n name: string;\n checked?: boolean;\n indeterminate?: boolean;\n disabled?: boolean;\n error?: boolean;\n text?: string;\n value?: string | number | boolean;\n children?: React.ReactNode;\n testId?: string;\n ariaLabel?: string;\n description?: string | React.ReactNode;\n reveal?: React.ReactNode;\n revealAriaLabel?: string;\n maxWidth?: string;\n onChange?: (detail: GoabCheckboxOnChangeDetail) => void;\n}\n\n// legacy\nexport type Props = GoabCheckboxProps;\n\nexport function GoabCheckbox({\n id,\n name,\n testId,\n error,\n disabled,\n checked,\n indeterminate,\n value,\n text,\n description,\n reveal,\n revealAriaLabel,\n maxWidth,\n children,\n onChange,\n ariaLabel,\n mt,\n mr,\n mb,\n ml,\n}: GoabCheckboxProps): JSX.Element {\n const el = useRef<HTMLElement>(null);\n useEffect(() => {\n if (!el.current) {\n return;\n }\n const current = el.current;\n const listener = (e: Event) => {\n const detail = (e as CustomEvent<GoabCheckboxOnChangeDetail>).detail;\n onChange?.(detail);\n };\n\n current.addEventListener(\"_change\", listener);\n\n return () => {\n current.removeEventListener(\"_change\", listener);\n };\n }, [name, onChange]);\n\n return (\n <goa-checkbox\n testid={testId}\n ref={el}\n id={id}\n name={name}\n error={error ? \"true\" : undefined}\n checked={checked ? \"true\" : undefined}\n indeterminate={indeterminate ? \"true\" : undefined}\n disabled={disabled ? \"true\" : undefined}\n text={text}\n value={typeof value === \"boolean\" ? (value ? \"true\" : undefined) : value}\n arialabel={ariaLabel}\n revealarialabel={revealAriaLabel}\n description={typeof description === \"string\" ? description : undefined}\n maxwidth={maxWidth}\n mt={mt}\n mr={mr}\n mb={mb}\n ml={ml}\n >\n {children}\n {typeof description !== \"string\" && description && (\n <div slot=\"description\">{description}</div>\n )}\n {reveal && <div slot=\"reveal\">{reveal}</div>}\n </goa-checkbox>\n );\n}\n\nexport default GoabCheckbox;\n","import {\n GoabCheckboxListOnChangeDetail,\n Margins\n} from \"@abgov/ui-components-common\";\nimport { useEffect, useRef, type JSX } from \"react\";\n\ndeclare module \"react\" {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n interface IntrinsicElements {\n \"goa-checkbox-list\": WCProps & React.HTMLAttributes<HTMLElement>;\n }\n }\n}\n\ninterface WCProps extends Margins {\n ref: React.RefObject<HTMLElement | null>;\n name: string;\n value?: string[];\n disabled?: string;\n error?: string;\n testid?: string;\n maxwidth?: string;\n}\n\nexport interface GoabCheckboxListProps extends Margins {\n name: string;\n value?: string[];\n disabled?: boolean;\n error?: boolean;\n testId?: string;\n maxWidth?: string;\n children?: React.ReactNode;\n onChange?: (detail: GoabCheckboxListOnChangeDetail) => void;\n}\n\nexport function GoabCheckboxList({\n name,\n value = [],\n disabled,\n error,\n testId,\n maxWidth,\n children,\n onChange,\n mt,\n mr,\n mb,\n ml,\n}: GoabCheckboxListProps): JSX.Element {\n const el = useRef<HTMLElement>(null);\n\n useEffect(() => {\n if (!el.current) return;\n\n const current = el.current;\n const listener = (e: Event) => {\n try {\n const detail = (e as CustomEvent<GoabCheckboxListOnChangeDetail>).detail;\n onChange?.(detail);\n } catch (error) {\n console.error(\"Error handling checkbox list change:\", error);\n }\n };\n\n try {\n current.addEventListener(\"_change\", listener);\n } catch (error) {\n console.error(\"Failed to attach checkbox list listener:\", error);\n }\n\n return () => {\n try {\n current.removeEventListener(\"_change\", listener);\n } catch (error) {\n console.error(\"Failed to remove checkbox list listener:\", error);\n }\n };\n }, [onChange]);\n\n return (\n <goa-checkbox-list\n ref={el}\n name={name}\n value={value}\n disabled={disabled ? \"true\" : undefined}\n error={error ? \"true\" : undefined}\n testid={testId}\n maxwidth={maxWidth}\n mt={mt}\n mr={mr}\n mb={mb}\n ml={ml}\n >\n {children}\n </goa-checkbox-list>\n );\n}\n\nexport default GoabCheckboxList;\n","import { GoabChipTheme, GoabChipVariant, Margins } from \"@abgov/ui-components-common\";\nimport { useEffect, useRef } from \"react\";\n\ninterface WCProps extends Margins {\n ref: React.RefObject<HTMLElement | null>;\n leadingicon?: string;\n icontheme?: GoabChipTheme;\n error?: string;\n deletable?: string;\n content: string;\n variant?: GoabChipVariant;\n testid?: string;\n}\n\ndeclare module \"react\" {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n interface IntrinsicElements {\n \"goa-chip\": WCProps & React.HTMLAttributes<HTMLElement>;\n }\n }\n}\n\nexport interface GoabChipProps extends Margins {\n onClick?: () => void;\n deletable?: boolean;\n leadingIcon?: string;\n iconTheme?: GoabChipTheme;\n error?: boolean;\n content: string;\n variant?: GoabChipVariant;\n testId?: string;\n}\n\nexport const GoabChip = ({\n leadingIcon,\n iconTheme,\n deletable,\n error,\n variant,\n content,\n onClick,\n mt,\n mr,\n mb,\n ml,\n testId,\n}: GoabChipProps) => {\n const el = useRef<HTMLElement>(null);\n useEffect(() => {\n if (!el.current) return;\n if (!onClick) return;\n\n const current = el.current;\n const listener = () => {\n onClick();\n };\n\n current.addEventListener(\"_click\", listener);\n return () => {\n current.removeEventListener(\"_click\", listener);\n };\n }, [el, onClick]);\n\n return (\n <goa-chip\n ref={el}\n leadingicon={leadingIcon}\n icontheme={iconTheme}\n error={error ? \"true\" : undefined}\n deletable={deletable ? \"true\" : undefined}\n content={content}\n variant={variant}\n mt={mt}\n mr={mr}\n mb={mb}\n ml={ml}\n testid={testId}\n />\n );\n};\n\nexport default GoabChip;\n","import {\n GoabCircularProgressSize,\n GoabCircularProgressVariant,\n} from \"@abgov/ui-components-common\";\n\ninterface WCProps {\n variant?: GoabCircularProgressVariant;\n size?: GoabCircularProgressSize;\n message?: string;\n visible?: string;\n progress?: number;\n testid?: string;\n}\n\ndeclare module \"react\" {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n interface IntrinsicElements {\n \"goa-circular-progress\": WCProps & React.HTMLAttributes<HTMLElement>;\n }\n }\n}\n\nexport interface GoabCircularProgressProps {\n variant?: GoabCircularProgressVariant;\n size?: GoabCircularProgressSize;\n message?: string;\n visible?: boolean;\n progress?: number;\n testId?: string;\n}\n\nexport const GoabCircularProgress = ({\n visible,\n message,\n progress,\n variant,\n size,\n testId,\n}: GoabCircularProgressProps) => {\n return (\n <goa-circular-progress\n visible={visible ? \"true\" : undefined}\n message={message}\n progress={progress}\n variant={variant}\n size={size}\n testid={testId}\n />\n );\n};\n\nexport default GoabCircularProgress;\n","import {\n GoabContainerAccent,\n GoabContainerPadding,\n GoabContainerType,\n GoabContainerWidth,\n Margins,\n} from \"@abgov/ui-components-common\";\nimport { ReactNode, type JSX } from \"react\";\n\ninterface WCProps extends Margins {\n type?: GoabContainerType;\n accent?: GoabContainerAccent;\n padding?: GoabContainerPadding;\n width?: GoabContainerWidth;\n maxwidth?: string;\n testid?: string;\n}\n\ndeclare module \"react\" {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n interface IntrinsicElements {\n \"goa-container\": WCProps & React.HTMLAttributes<HTMLElement>;\n }\n }\n}\n\nexport interface GoabContainerProps extends Margins {\n accent?: GoabContainerAccent;\n type?: GoabContainerType;\n heading?: ReactNode;\n title?: ReactNode;\n padding?: GoabContainerPadding;\n actions?: ReactNode;\n children?: ReactNode;\n width?: GoabContainerWidth;\n maxWidth?: string;\n testId?: string;\n}\n\nexport function GoabContainer({\n accent,\n heading,\n title,\n padding,\n children,\n actions,\n type,\n width,\n maxWidth,\n mt,\n mr,\n mb,\n ml,\n testId,\n}: GoabContainerProps): JSX.Element {\n const headingContent = heading || title;\n return (\n <goa-container\n type={type}\n padding={padding}\n accent={accent}\n width={width}\n maxwidth={maxWidth}\n mt={mt}\n mr={mr}\n mb={mb}\n ml={ml}\n testid={testId}\n >\n {headingContent && <div slot=\"title\">{headingContent}</div>}\n {children}\n {actions && <div slot=\"actions\">{actions}</div>}\n </goa-container>\n );\n}\n\nexport default GoabContainer;\n","import { useEffect, useRef, type JSX } from \"react\";\nimport {\n GoabDatePickerInputType,\n GoabDatePickerOnChangeDetail,\n Margins,\n} from \"@abgov/ui-components-common\";\n\ninterface WCProps extends Margins {\n ref: React.RefObject<HTMLElement | null>;\n name?: string;\n value?: string;\n error?: string;\n min?: string;\n max?: string;\n type?: string;\n relative?: string;\n disabled?: string;\n testid?: string;\n width?: string;\n}\n\ndeclare module \"react\" {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n interface IntrinsicElements {\n \"goa-date-picker\": WCProps & React.HTMLAttributes<HTMLElement>;\n }\n }\n}\n\nexport interface GoabDatePickerProps extends Margins {\n name?: string;\n value?: Date | string | undefined;\n error?: boolean;\n min?: Date | string;\n max?: Date | string;\n type?: GoabDatePickerInputType;\n testId?: string;\n /***\n * @deprecated This property has no effect and will be removed in a future version\n */\n relative?: boolean;\n disabled?: boolean;\n width?: string;\n onChange?: (detail: GoabDatePickerOnChangeDetail) => void;\n}\n\nexport function GoabDatePicker({\n name,\n value,\n error,\n min,\n max,\n testId,\n disabled,\n type,\n mt,\n mr,\n mb,\n ml,\n relative,\n width,\n onChange,\n}: GoabDatePickerProps): JSX.Element {\n const ref = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (value && typeof value !== \"string\") {\n console.warn(\"Using a `Date` type for value is deprecated. Instead use a string of the format `yyyy-mm-dd`\")\n }\n }, []);\n\n useEffect(() => {\n if (!ref.current) {\n return;\n }\n const current = ref.current;\n\n const handleChange = (e: Event) => {\n const detail = (e as CustomEvent<GoabDatePickerOnChangeDetail>).detail;\n onChange?.(detail);\n };\n\n if (onChange) {\n current.addEventListener(\"_change\", handleChange);\n }\n\n return () => {\n if (onChange) {\n current.removeEventListener(\"_change\", handleChange);\n }\n };\n }, [onChange]);\n\n const formatValue = (value: Date | string | undefined) => {\n if (!value) return \"\";\n\n if (value instanceof Date) {\n return value.toISOString();\n }\n\n return value;\n };\n\n return (\n <goa-date-picker\n ref={ref}\n name={name}\n value={formatValue(value) || undefined}\n type={type}\n error={error ? \"true\" : undefined}\n disabled={disabled ? \"true\" : undefined}\n min={formatValue(min) || undefined}\n max={formatValue(max) || undefined}\n testid={testId}\n mt={mt}\n mr={mr}\n mb={mb}\n ml={ml}\n relative={relative ? \"true\" : undefined}\n width={width}\n />\n );\n}\n\nexport default GoabDatePicker;\n","import { Margins } from \"@abgov/ui-components-common\";\nimport { ReactNode } from \"react\";\n\ninterface WCProps extends Margins {\n heading: string;\n open?: string;\n maxwidth?: string;\n testid?: string;\n}\n\ndeclare module \"react\" {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n interface IntrinsicElements {\n \"goa-details\": WCProps & React.HTMLAttributes<HTMLElement>;\n }\n }\n}\n\n/* eslint-disable-next-line */\nexport interface GoabDetailsProps extends Margins {\n heading: string;\n open?: boolean;\n maxWidth?: string;\n testId?: string;\n children: ReactNode;\n}\n\nexport function GoabDetails(props: GoabDetailsProps) {\n return (\n <goa-details\n heading={props.heading}\n open={props.open ? \"true\" : undefined}\n maxwidth={props.maxWidth}\n testid={props.testId}\n mt={props.mt}\n mr={props.mr}\n mb={props.mb}\n ml={props.ml}\n >\n {props.children}\n </goa-details>\n );\n}\n\nexport default GoabDetails;\n","import { Margins } from \"@abgov/ui-components-common\";\n\ninterface WCProps extends Margins {\n testid?: string;\n}\ndeclare module \"react\" {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n interface IntrinsicElements {\n \"goa-divider\": WCProps & React.HTMLAttributes<HTMLElement>;\n }\n }\n}\n\nexport interface GoabDividerProps extends Margins {\n testId?: string;\n}\n\nexport function GoabDivider(props: GoabDividerProps) {\n return (\n <goa-divider\n mt={props.mt}\n mr={props.mr}\n mb={props.mb}\n ml={props.ml}\n testid={props.testId}\n />\n );\n}\n\nexport default GoabDivider;\n","import {\n GoabDropdownOnChangeDetail,\n GoabIconType,\n Margins,\n} from \"@abgov/ui-components-common\";\nimport { useEffect, useRef, type JSX } from \"react\";\n\ninterface WCProps extends Margins {\n ref: React.RefObject<HTMLElement | null>;\n arialabel?: string;\n arialabelledby?: string;\n disabled?: string;\n error?: string;\n filterable?: string;\n leadingicon?: string;\n maxheight?: string;\n multiselect?: string;\n name?: string;\n native?: string;\n placeholder?: string;\n value?: string;\n width?: string;\n maxwidth?: string;\n relative?: string;\n id?: string;\n autocomplete?: string;\n testid?: string;\n}\n\ndeclare module \"react\" {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n // eslint-disable-next-line @typescript-eslint/no-empty-interface\n interface IntrinsicElements {\n \"goa-dropdown\": WCProps & React.HTMLAttributes<HTMLElement>;\n }\n }\n}\n\nexport interface GoabDropdownProps extends Margins {\n name?: string;\n value?: string[] | string;\n onChange?: (detail: GoabDropdownOnChangeDetail) => void;\n\n // optional\n ariaLabel?: string;\n ariaLabelledBy?: string;\n id?: string;\n children?: React.ReactNode;\n disabled?: boolean;\n error?: boolean;\n filterable?: boolean;\n leadingIcon?: GoabIconType;\n maxHeight?: string;\n multiselect?: boolean;\n native?: boolean;\n placeholder?: string;\n testId?: string;\n width?: string;\n maxWidth?: string;\n autoComplete?: string;\n /***\n * @deprecated This property has no effect and will be removed in a future version\n */\n relative?: boolean;\n}\n\nfunction stringify(value: string | string[] | undefined): string {\n if (typeof value === \"undefined\") {\n return \"\";\n }\n if (typeof value === \"string\") {\n return value;\n }\n return JSON.stringify(value);\n}\n\nexport function GoabDropdown(props: GoabDropdownProps): JSX.Element {\n const el = useRef<HTMLElement>(null);\n useEffect(() => {\n if (!el.current) {\n return;\n }\n const current = el.current;\n const handler = (e: Event) => {\n const detail = (e as CustomEvent<GoabDropdownOnChangeDetail>).detail;\n props.onChange?.(detail);\n };\n if (props.onChange) {\n current.addEventListener(\"_change\", handler);\n }\n return () => {\n if (props.onChange) {\n current.removeEventListener(\"_change\", handler);\n }\n };\n }, [el, props]);\n\n return (\n <goa-dropdown\n ref={el}\n name={props.name}\n value={stringify(props.value)}\n arialabel={props.ariaLabel}\n arialabelledby={props.ariaLabelledBy}\n disabled={props.disabled ? \"true\" : undefined}\n error={props.error ? \"true\" : undefined}\n filterable={props.filterable ? \"true\" : undefined}\n leadingicon={props.leadingIcon}\n maxheight={props.maxHeight}\n mb={props.mb}\n ml={props.ml}\n mr={props.mr}\n mt={props.mt}\n multiselect={props.multiselect ? \"true\" : undefined}\n native={props.native ? \"true\" : undefined}\n placeholder={props.placeholder}\n testid={props.testId}\n width={props.width}\n maxwidth={props.maxWidth}\n relative={props.relative ? \"true\" : undefined}\n autocomplete={props.autoComplete}\n id={props.id}\n >\n {props.children}\n </goa-dropdown>\n );\n}\n\nexport default GoabDropdown;\n","import { useEffect } from \"react\";\nimport { GoabDropdownItemMountType } from \"@abgov/ui-components-common\";\n\ninterface WCProps {\n value: string;\n label?: string;\n filter?: string;\n mount?: GoabDropdownItemMountType;\n\n // @deprecated\n name?: string;\n}\n\ndeclare module \"react\" {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n interface IntrinsicElements {\n \"goa-dropdown-item\": WCProps & React.HTMLAttributes<HTMLElement>;\n }\n }\n}\n\nexport interface GoabDropdownItemProps {\n value: string;\n label?: string;\n filter?: string;\n testId?: string;\n mountType?: GoabDropdownItemMountType;\n\n // @deprecated\n name?: string;\n}\n\nexport function GoabDropdownOption(props: GoabDropdownItemProps) {\n useEffect(() => {\n console.warn(\"GoabDropdownOption is deprecated. Please use GoabDropdownItem\");\n }, []);\n\n return <GoabDropdownItem {...props} />;\n}\n\nexport function GoabDropdownItem({\n value,\n label,\n filter,\n name,\n mountType = \"append\",\n}: GoabDropdownItemProps) {\n return (\n <goa-dropdown-item\n value={value}\n label={label}\n filter={filter}\n name={name}\n mount={mountType}\n />\n );\n}\n","import {\n GoabFileUploadOnCancelDetail,\n GoabFileUploadOnDeleteDetail,\n} from \"@abgov/ui-components-common\";\nimport { useEffect, useRef } from \"react\";\n\ninterface WCProps {\n ref: React.RefObject<HTMLElement | null>;\n filename: string;\n size: number;\n type?: string;\n progress?: number;\n error?: string;\n testid?: string;\n}\n\ndeclare module \"react\" {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n interface IntrinsicElements {\n \"goa-file-upload-card\": WCProps & React.HTMLAttributes<HTMLElement>;\n }\n }\n}\n\n/* eslint-disable-next-line */\nexport interface GoabFileUploadCardProps {\n filename: string;\n size: number;\n type?: string;\n progress?: number;\n testId?: string;\n error?: string;\n onDelete?: (detail: GoabFileUploadOnDeleteDetail) => void;\n onCancel?: (detail: GoabFileUploadOnCancelDetail) => void;\n}\n\nexport function GoabFileUploadCard({\n filename,\n size,\n type,\n progress,\n error,\n testId,\n onDelete,\n onCancel,\n}: GoabFileUploadCardProps) {\n const el = useRef<HTMLElement>(null);\n\n useEffect(() => {\n if (!el.current) return;\n\n const current = el.current;\n const deleteHandler = () => onDelete?.({ filename });\n const cancelHandler = () => onCancel?.({ filename });\n current.addEventListener(\"_delete\", deleteHandler);\n current.addEventListener(\"_cancel\", cancelHandler);\n return () => {\n current.removeEventListener(\"_delete\", deleteHandler);\n current.removeEventListener(\"_cancel\", cancelHandler);\n };\n }, [el, onDelete, onCancel]);\n\n return (\n <goa-file-upload-card\n ref={el}\n filename={filename}\n size={size}\n type={type}\n progress={progress}\n error={error}\n testid={testId}\n />\n );\n}\n\nexport default GoabFileUploadCard;\n","import {\n GoabFileUploadInputOnSelectFileDetail,\n GoabFileUploadInputVariant,\n} from \"@abgov/ui-components-common\";\nimport { useEffect, useRef } from \"react\";\n\ninterface WCProps {\n ref: React.RefObject<HTMLElement | null>;\n variant?: GoabFileUploadInputVariant;\n accept?: string;\n maxfilesize?: string;\n testid?: string;\n}\n\ndeclare module \"react\" {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n interface IntrinsicElements {\n \"goa-file-upload-input\": WCProps & React.HTMLAttributes<HTMLElement>;\n }\n }\n}\n\n/* eslint-disable-next-line */\nexport interface GoabFileUploadInputProps {\n variant?: GoabFileUploadInputVariant;\n accept?: string;\n maxFileSize?: string;\n testId?: string;\n onSelectFile: (detail: GoabFileUploadInputOnSelectFileDetail) => void;\n}\n\nexport function GoabFileUploadInput({\n variant,\n accept,\n maxFileSize,\n testId,\n onSelectFile,\n}: GoabFileUploadInputProps) {\n const el = useRef<HTMLElement>(null);\n\n useEffect(() => {\n if (!el.current) return;\n\n const current = el.current;\n const handler = (e: Event) => {\n const detail = (e as CustomEvent<GoabFileUploadInputOnSelectFileDetail>).detail;\n onSelectFile(detail);\n };\n current.addEventListener(\"_selectFile\", handler);\n return () => {\n current.removeEventListener(\"_selectFile\", handler);\n };\n }, [el, onSelectFile]);\n\n return (\n <goa-file-upload-input\n ref={el}\n variant={variant}\n accept={accept}\n maxfilesize={maxFileSize}\n testid={testId}\n />\n );\n}\n\nexport default GoabFileUploadInput;\n","import { ReactNode, type JSX } from \"react\";\n\ninterface WCProps {\n maxcontentwidth?: string;\n testid?: string;\n url?: string;\n}\n\ndeclare module \"react\" {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n interface IntrinsicElements {\n \"goa-app-footer\": WCProps & React.HTMLAttributes<HTMLElement>;\n }\n }\n}\n\n/* eslint-disable-next-line */\nexport interface GoabAppFooterProps {\n maxContentWidth?: string;\n children?: ReactNode;\n testId?: string;\n url?: string;\n}\n\n// legacy name\nexport type FooterProps = GoabAppFooterProps;\n\nexport function GoabAppFooter({\n maxContentWidth,\n children,\n testId,\n url,\n}: GoabAppFooterProps): JSX.Element {\n return (\n <goa-app-footer maxcontentwidth={maxContentWidth} testid={testId} url={url}>\n {children}\n </goa-app-footer>\n );\n}\n\nexport default GoabAppFooter;\n","import { ReactNode } from \"react\";\n\ninterface WCProps {\n testid?: string;\n}\n\ndeclare module \"react\" {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n interface IntrinsicElements {\n \"goa-app-footer-meta-section\": WCProps & React.HTMLAttributes<HTMLElement>;\n }\n }\n}\n\n/* eslint-disable-next-line */\nexport interface GoabAppFooterMetaSectionProps {\n testId?: string;\n children?: ReactNode;\n}\n\nexport function GoabAppFooterMetaSection({\n testId,\n children,\n}: GoabAppFooterMetaSectionProps) {\n return (\n <goa-app-footer-meta-section testid={testId} slot=\"meta\">\n {children}\n </goa-app-footer-meta-section>\n );\n}\n\nexport default GoabAppFooterMetaSection;\n","import { ReactNode } from \"react\";\n\ninterface WCProps {\n maxcolumncount?: number;\n heading?: string;\n testid?: string;\n}\n\ndeclare module \"react\" {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n interface IntrinsicElements {\n \"goa-app-footer-nav-section\": WCProps & React.HTMLAttributes<HTMLElement>;\n }\n }\n}\n\n/* eslint-disable-next-line */\nexport interface GoabFooterNavSectionProps {\n maxColumnCount?: number;\n heading?: string;\n testId?: string;\n children?: ReactNode;\n}\n\nexport function GoabAppFooterNavSection({\n heading,\n maxColumnCount = 1,\n testId,\n children,\n}: GoabFooterNavSectionProps) {\n return (\n <goa-app-footer-nav-section\n slot=\"nav\"\n heading={heading}\n maxcolumncount={maxColumnCount}\n testid={testId}\n >\n {children}\n </goa-app-footer-nav-section>\n );\n}\n\nexport default GoabAppFooterNavSection;\n","import { ReactNode, useEffect, useRef } from \"react\";\nimport {\n GoabFieldsetOnContinueDetail,\n GoabFormDispatchOn,\n} from \"@abgov/ui-components-common\";\n\ninterface WCProps {\n ref?: React.RefObject<HTMLElement | null>;\n id?: string;\n \"section-title\"?: string;\n \"dispatch-on\"?: string;\n}\n\ndeclare module \"react\" {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n interface IntrinsicElements {\n \"goa-fieldset\": WCProps & React.HTMLAttributes<HTMLElement>;\n }\n }\n}\n\ninterface GoabFieldsetProps {\n id?: string;\n sectionTitle?: string;\n dispatchOn?: GoabFormDispatchOn;\n onContinue?: (event: GoabFieldsetOnContinueDetail) => void;\n children: ReactNode;\n}\n\nexport function GoabFieldset({\n id,\n sectionTitle,\n dispatchOn,\n onContinue,\n children,\n\n}: GoabFieldsetProps) {\n const ref = useRef<HTMLElement>(null);\n\n useEffect(() => {\n if (!ref.current) return;\n const current = ref.current;\n\n const continueListener = (e: Event) => {\n const event = (e as CustomEvent<GoabFieldsetOnContinueDetail>).detail;\n return onContinue?.(event);\n };\n\n if (onContinue) {\n current.addEventListener(\"_continue\", continueListener);\n }\n\n return () => {\n if (onContinue) {\n current.removeEventListener(\"_continue\", continueListener);\n }