@lifesg/react-design-system 4.0.0-alpha.3 → 4.0.0-alpha.5

package/filter/types.d.ts

@@ -2,6 +2,11 @@ import type { CSSProperties, ReactNode } from "react";
 import type { ButtonStyleType } from "../button/types";
 import type { FormLabelAddonProps } from "../form/types";
 import type { Insets } from "../shared/types";
+/**
+ * Rendering context for the filter panel.
+ *
+ * `"default"` indicates the desktop sidebar; `"mobile"` indicates the modal overlay.
+ */
 export type Mode = "default" | "mobile";
 interface FilterSidebarCustomLabelProps {
     headerTitle?: string | undefined;
@@ -13,96 +18,233 @@ interface FilterModalCustomLabelProps {
     doneButtonLabel?: string | undefined;
     clearButtonLabel?: string | undefined;
 }
+/**
+ * Shared props for the sidebar and modal variants of the filter panel.
+ */
 export interface FilterBaseProps {
     id?: string | undefined;
     "data-testid"?: string | undefined;
     className?: string | undefined;
     style?: CSSProperties | undefined;
+    /**
+     * Number of active filter selections displayed as a badge on the header and
+     * toggle button.
+     */
+    count?: number | undefined;
+    /**
+     * When `true`, the clear button is rendered in a disabled state.
+     *
+     * @default false
+     */
     clearButtonDisabled?: boolean | undefined;
-    /** Called when clear button is pressed */
+    /** Called when the clear button is pressed. */
     onClear?: (() => void) | undefined;
+    /**
+     * Content rendered inside the filter panel.
+     *
+     * Pass a render function to receive the current `Mode` and conditionally
+     * render different content for desktop (`"default"`) and mobile (`"mobile"`).
+     */
     children?: ReactNode | ((mode: Mode) => ReactNode);
     /**
-     * @deprecated
-     * use customLabels instead
+     * @deprecated Use `customLabels` instead.
      */
     headerTitle?: string | undefined;
     /**
-     * @deprecated
-     * use customLabels instead
+     * @deprecated Use `customLabels` instead.
      */
     toggleFilterButtonLabel?: string | undefined;
     /**
-     * @deprecated
-     * use customLabels instead
+     * @deprecated Use `customLabels` instead.
      */
     doneButtonLabel?: string | undefined;
 }
+/**
+ * Props for the desktop sidebar variant of the filter panel.
+ */
 export interface FilterSidebarProps extends FilterBaseProps {
+    /** Overrides default labels used by the sidebar variant. */
     customLabels?: FilterSidebarCustomLabelProps | undefined;
 }
+/**
+ * Props for the mobile modal variant of the filter panel.
+ */
 export interface FilterModalProps extends FilterBaseProps {
-    /** Called when dismiss button is pressed (mobile mode only) */
+    /** Called when the dismiss (close) button is pressed in the modal overlay. */
     onDismiss?: (() => void) | undefined;
-    /** Called when done button is pressed (mobile mode only) */
+    /** Called when the done button is pressed in the modal overlay. */
     onDone?: (() => void) | undefined;
+    /** Called when the modal overlay is opened by the toggle button. */
     onModalOpen?: () => void;
+    /**
+     * Visual style of the toggle button that opens the modal.
+     *
+     * @default "light"
+     */
     toggleFilterButtonStyle?: ButtonStyleType | undefined;
+    /** Overrides default labels used by the modal variant. */
     customLabels?: FilterModalCustomLabelProps | undefined;
+    /**
+     * Safe-area insets applied to the modal header and footer, useful for
+     * notch or home-indicator offsets on mobile devices.
+     */
     insets?: Insets | undefined;
 }
+/**
+ * Props for the `Filter` component, combining both sidebar and modal variants.
+ */
 export interface FilterProps extends Omit<FilterSidebarProps, "customLabels">, Omit<FilterModalProps, "customLabels"> {
+    /**
+     * Overrides default labels for the active variant.
+     *
+     * Only the labels relevant to the current mode (sidebar or modal) are used.
+     */
     customLabels?: FilterModalCustomLabelProps | FilterSidebarCustomLabelProps | undefined;
 }
+/**
+ * Props for a single collapsible filter section within a filter panel.
+ */
 export interface FilterItemProps {
+    /**
+     * Content rendered inside the filter item.
+     *
+     * Pass a render function to receive the current `Mode` and minimised state,
+     * enabling content to adapt between desktop and mobile contexts.
+     */
     children: React.ReactNode | ((mode: Mode, state: {
         minimised: boolean;
     }) => React.ReactNode);
-    /** Specifies if header divider is visible in default mode */
+    /**
+     * Whether a divider line is shown above the item in desktop mode.
+     *
+     * @default true
+     */
     showDivider?: boolean | undefined;
-    /** Specifies if divider is visible in mobile mode */
+    /**
+     * Whether a divider line is shown above the item in mobile mode.
+     *
+     * @default true
+     */
     showMobileDivider?: boolean | undefined;
+    /** Label rendered in the item header. */
     title?: string | undefined;
+    /** Optional popover addon displayed inline with the title. */
     addon?: FormLabelAddonProps | undefined;
     className?: string | undefined;
     id?: string | undefined;
     "data-testid"?: string | undefined;
+    /**
+     * Whether the item can be expanded or collapsed in desktop mode.
+     * Items are always expanded in mobile mode regardless of this setting.
+     *
+     * @default true
+     */
     collapsible?: boolean | undefined;
-    /** Specifies the initial expand state for the uncontrolled component */
+    /**
+     * Initial expanded state for the uncontrolled component.
+     * Has no effect when `expanded` is provided.
+     *
+     * @default false
+     */
     initialExpanded?: boolean | undefined;
-    /** Specifies the expand state for the controlled component */
+    /**
+     * Controls the expanded state. When provided, the component is controlled
+     * and `onExpandChange` must be used to update the value.
+     */
     expanded?: boolean | undefined;
-    /** Called when the expand state changes */
+    /**
+     * Called when the user toggles the expand/collapse state.
+     */
     onExpandChange?: ((expanded: boolean) => void) | undefined;
+    /**
+     * Whether the item content can be minimised to show a truncated height with
+     * a "View more" button.
+     *
+     * @default false
+     */
     minimisable?: boolean | undefined;
+    /**
+     * Height in pixels to clip the content when minimised.
+     * Defaults to 50% of content height, capped at 216 px.
+     */
     minimisedHeight?: number | undefined;
     style?: React.CSSProperties | undefined;
 }
+/**
+ * Props for a full-screen sub-page overlay within the mobile filter modal.
+ *
+ * `Filter.Page` provides a back-navigation header and a done button,
+ * intended for drill-down selection flows inside a filter item.
+ */
 export interface FilterPageProps {
+    "data-testid"?: string | undefined;
     children: React.ReactNode;
-    /** Called when dismiss button is pressed */
+    /** Called when the back (dismiss) button is pressed. */
     onDismiss?: (() => void) | undefined;
-    /** Called when done button is pressed */
+    /** Called when the done button is pressed. */
     onDone?: (() => void) | undefined;
 }
+/**
+ * Default shape for a checkbox option in `Filter.Checkbox`.
+ *
+ * Nest `options` to create hierarchical groups with parent-level
+ * select/deselect all behavior.
+ */
 export interface FilterItemCheckboxOptionProps {
     value: any;
     label: string;
+    /** Nested child options. Providing children makes this item a parent node. */
     options?: FilterItemCheckboxOptionProps[] | undefined;
 }
+/**
+ * Props for `Filter.Checkbox`, a filter item that renders a list of selectable
+ * checkboxes (desktop) or toggle chips (mobile).
+ *
+ * Supply a generic type `T` to use a custom option shape together with
+ * `labelExtractor` and `valueExtractor`.
+ */
 export interface FilterItemCheckboxProps<T = FilterItemCheckboxOptionProps> extends Omit<FilterItemProps, "children"> {
+    /** The full list of selectable options. */
     options: T[];
+    /**
+     * The currently selected options. When provided, the component syncs its
+     * internal selection state to this value.
+     */
     selectedOptions?: T[] | undefined;
+    /**
+     * Called when the selection changes.
+     *
+     * @param options The updated array of selected options.
+     */
     onSelect?: ((options: T[]) => void) | undefined;
-    /** Function to derive display value from an item. If not set, checks `item.label`. */
+    /**
+     * Derives the display label from an option item.
+     * Falls back to `item.label` when not provided.
+     */
     labelExtractor?: ((item: T) => React.ReactNode) | undefined;
-    /** Function to derive value from an item. If not set, checks `item.value`. */
+    /**
+     * Derives the unique value key from an option item.
+     * Falls back to `item.value` when not provided.
+     */
     valueExtractor?: ((item: T) => string) | undefined;
-    /** Changes min-width of toggle in mobile view to fit content */
+    /**
+     * When `true`, toggle chips in mobile mode grow to fit their content width
+     * instead of stretching to a fixed minimum width.
+     */
     useToggleContentWidth?: boolean | undefined;
-    /** Display checkbox list for mobile view */
+    /**
+     * When `true`, renders checkboxes instead of toggle chips in mobile mode.
+     * Has no effect for nested option trees, which always use checkboxes.
+     *
+     * @default false
+     */
     showAsCheckboxInMobile?: boolean | undefined;
-    /** Whether to allow minimising (show "View more" button) */
+    /**
+     * When `true`, shows a "View more / View less" button when there are more
+     * options than the minimised threshold.
+     *
+     * @default true
+     */
     minimisableOptions?: boolean | undefined;
 }
 export {};

package/footer/footer-download-app.styles_1v1j2us.css

@@ -1,4 +1,4 @@
-.wmm1xbv{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}:where(body.fds-breakpoint-lg-max) .wmm1xbv{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0;}
+@layer fds{.wmm1xbv{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}:where(body.fds-breakpoint-lg-max) .wmm1xbv{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0;}
 .l171bo4j{margin-bottom:var(--fds-spacing-16);color:var(--fds-footer-colour-text);}
 .a17bpz54{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;row-gap:var(--fds-spacing-16);-webkit-column-gap:var(--fds-spacing-16);column-gap:var(--fds-spacing-16);}
-.a30jq0e img{width:auto;height:3.75rem;object-fit:contain;display:block;}:where(body.fds-breakpoint-lg-max) .a30jq0e img{height:3rem;width:100%;}
+.a30jq0e img{width:auto;height:3.75rem;object-fit:contain;display:block;}:where(body.fds-breakpoint-lg-max) .a30jq0e img{height:3rem;width:100%;}}

package/footer/footer-resource-addon.styles_1jepb1d.css

@@ -1,4 +1,4 @@
-.ieulqso{max-height:var(--fds-spacing-72);max-width:100%;}
+@layer fds{.ieulqso{max-height:var(--fds-spacing-72);max-width:100%;}
 .gaeoncc{height:4.5rem;}
 .prt8kdt{height:3.5rem;}
-.ich52w2{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;gap:var(--fds-spacing-32);margin-top:var(--fds-spacing-16);}
+.ich52w2{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;gap:var(--fds-spacing-32);margin-top:var(--fds-spacing-16);}}

package/footer/footer.d.ts

@@ -1,2 +1,9 @@
 import type { FooterProps } from "./types";
-export declare const Footer: <T>({ children, links, lastUpdated, disclaimerLinks, showDownloadAddon, showResourceAddon, logoSrc, copyrightInfo, onFooterLinkClick, layout, hideLogo, className, ...otherProps }: FooterProps<T>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Site-wide footer with navigation links, branding, and legal copy.
+ *
+ * Use `Footer` at the bottom of a page to surface navigation links grouped
+ * into columns, a theme-appropriate logo, download-app or resource add-ons,
+ * and disclaimer links with auto-generated copyright text.
+ */
+export declare const Footer: <T>({ children, links, lastUpdated, disclaimerLinks, showDownloadAddon, showResourceAddon, logoSrc, logoAlt, copyrightInfo, onFooterLinkClick, layout, hideLogo, className, ...otherProps }: FooterProps<T>) => import("react/jsx-runtime").JSX.Element;

package/footer/footer.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as o,jsx as t,Fragment as i}from"react/jsx-runtime";import r from"clsx";import{useContext as s}from"react";import{Divider as l}from"../divider/divider.js";import{Layout as n}from"../layout/index.js";import{ThemeContext as a}from"../theme/theme-provider/context.js";import{Typography as c}from"../typography/index.js";import{bottomSection as d,bottomSectionContent as m,copyrightText as h,copyrightSection as p,baseFooter as u,logoSection as f,logoImage as g,logoSize as k,linkSectionWrapper as v,linkSection as y,addonSection as N,topSection as j,fullWidthDivider as L,disclaimerTextLink as C,footerLink as b}from"./footer.styles.js";import{DownloadApp as w}from"./footer-download-app.js";import{FooterHelper as x}from"./footer-helper.js";import{ResourceAddon as D}from"./footer-resource-addon.js";const S=S=>{var{children:A,links:O,lastUpdated:F,disclaimerLinks:I,showDownloadAddon:R,showResourceAddon:T,logoSrc:U,copyrightInfo:X,onFooterLinkClick:$,layout:_="default",hideLogo:B,className:M}=S,q=e(S,["children","links","lastUpdated","disclaimerLinks","showDownloadAddon","showResourceAddon","logoSrc","copyrightInfo","onFooterLinkClick","layout","hideLogo","className"]);const z="stretch"===_,E=s(a),G=o=>o.map(((o,i)=>{const{"data-options":r}=o,s=e(o,["data-options"]);return t("li",{children:t(c.LinkMD,Object.assign({underlineStyle:"none",className:b},s,{onClick:e=>((e,o)=>{o.onClick?(e.preventDefault(),o.onClick(e)):$&&(e.preventDefault(),$(o))})(e,o)}))},i)}));return o("footer",Object.assign({},q,{className:r(u,M),children:[(()=>{let s=null;if(A)return A;if(O||R){const l=x.getFooterLogoAttribute(null==E?void 0:E.theme),{src:n,logoType:a}=l,c=e(l,["src","logoType"]);s=o(i,{children:[(U||n)&&!B&&t("div",{"data-testid":"logo-section",className:f,children:t("img",Object.assign({src:U||n,"data-testid":"logo",className:r(g,a&&k[a])},c))}),t("div",{className:v,children:null==O?void 0:O.map(((e,o)=>t("ul",{"data-testid":`link-col-${o}`,className:y,children:G(e)},`link-col-${o}`)))}),R&&t("div",{className:N,children:t(w,{})}),!R&&T&&t("div",{className:N,children:t(D,{})})]})}return s?o(i,{children:[t(n.Content,{className:j,stretch:z,children:s}),t(l,{className:L})]}):null})(),o(n.Content,{className:d,stretch:z,children:[t("div",{className:m,children:(()=>{const e=x.getDisclaimerLinks(null==E?void 0:E.theme,I);return Object.keys(e).map((o=>t(c.LinkXS,Object.assign({underlineStyle:"none",className:C},e[o]),o)))})()},"disclaimer"),t("div",{className:r(m,p),children:t(c.BodyXS,{"data-testid":"copyright-text",className:h,children:X||o(i,{children:["©"," ",x.getCopyrightInfo(F,null==E?void 0:E.theme)]})})},"copyright")]})]}))};export{S as Footer};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as o,jsx as t,Fragment as i}from"react/jsx-runtime";import l from"clsx";import{useContext as r}from"react";import{Divider as s}from"../divider/divider.js";import{Layout as n}from"../layout/index.js";import{ThemeContext as a}from"../theme/theme-provider/context.js";import{Typography as c}from"../typography/index.js";import{bottomSection as d,bottomSectionContent as m,copyrightText as h,copyrightSection as p,baseFooter as u,logoSection as f,logoImage as g,logoSize as k,linkSectionWrapper as v,linkSection as y,addonSection as N,topSection as j,fullWidthDivider as L,disclaimerTextLink as C,footerLink as b}from"./footer.styles.js";import{DownloadApp as w}from"./footer-download-app.js";import{FooterHelper as x}from"./footer-helper.js";import{ResourceAddon as A}from"./footer-resource-addon.js";const D=D=>{var{children:S,links:O,lastUpdated:F,disclaimerLinks:I,showDownloadAddon:R,showResourceAddon:T,logoSrc:U,logoAlt:X="",copyrightInfo:$,onFooterLinkClick:_,layout:B="default",hideLogo:M,className:q}=D,z=e(D,["children","links","lastUpdated","disclaimerLinks","showDownloadAddon","showResourceAddon","logoSrc","logoAlt","copyrightInfo","onFooterLinkClick","layout","hideLogo","className"]);const E="stretch"===B,G=r(a),H=o=>o.map(((o,i)=>{const{"data-options":l}=o,r=e(o,["data-options"]);return t("li",{children:t(c.LinkMD,Object.assign({underlineStyle:"none",className:b},r,{onClick:e=>((e,o)=>{o.onClick?(e.preventDefault(),o.onClick(e)):_&&(e.preventDefault(),_(o))})(e,o)}))},i)}));return o("footer",Object.assign({},z,{className:l(u,q),children:[(()=>{let r=null;if(S)return S;if(O||R){const s=x.getFooterLogoAttribute(null==G?void 0:G.theme),{src:n,alt:a,logoType:c}=s,d=e(s,["src","alt","logoType"]);r=o(i,{children:[(U||n)&&!M&&t("div",{"data-testid":"logo-section",className:f,children:t("img",Object.assign({src:U||n,"data-testid":"logo",className:l(g,c&&k[c]),alt:X||a},d))}),t("div",{className:v,children:null==O?void 0:O.map(((e,o)=>t("ul",{"data-testid":`link-col-${o}`,className:y,children:H(e)},`link-col-${o}`)))}),R&&t("div",{className:N,children:t(w,{})}),!R&&T&&t("div",{className:N,children:t(A,{})})]})}return r?o(i,{children:[t(n.Content,{className:j,stretch:E,children:r}),t(s,{className:L})]}):null})(),o(n.Content,{className:d,stretch:E,children:[t("div",{className:m,children:(()=>{const e=x.getDisclaimerLinks(null==G?void 0:G.theme,I);return Object.keys(e).map((o=>t(c.LinkXS,Object.assign({underlineStyle:"none",className:C},e[o]),o)))})()},"disclaimer"),t("div",{className:l(m,p),children:t(c.BodyXS,{"data-testid":"copyright-text",className:h,children:$||o(i,{children:["©"," ",x.getCopyrightInfo(F,null==G?void 0:G.theme)]})})},"copyright")]})]}))};export{D as Footer};
 //# sourceMappingURL=footer.js.map

package/footer/footer.js.map

@@ -1 +1 @@
-{"version":3,"file":"footer.js","sources":["../../src/footer/footer.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type React from \"react\";\nimport { useContext } from \"react\";\n\nimport { Divider } from \"../divider\";\nimport { Layout } from \"../layout\";\nimport { ThemeContext } from \"../theme/theme-provider/context\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./footer.styles\";\nimport { DownloadApp } from \"./footer-download-app\";\nimport type { InternalDisclaimerLinks } from \"./footer-helper\";\nimport { FooterHelper } from \"./footer-helper\";\nimport { ResourceAddon } from \"./footer-resource-addon\";\nimport type { FooterLinkProps, FooterProps } from \"./types\";\n\nexport const Footer = <T,>({\n    children,\n    links,\n    lastUpdated,\n    disclaimerLinks,\n    showDownloadAddon,\n    showResourceAddon,\n    logoSrc,\n    copyrightInfo,\n    onFooterLinkClick,\n    layout = \"default\",\n    hideLogo,\n    className,\n    ...otherProps\n}: FooterProps<T>) => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const isStretch = layout === \"stretch\";\n    const theme = useContext(ThemeContext);\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleLinkClick = <K extends T>(\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: FooterLinkProps<K>\n    ) => {\n        /**\n         * Individual link onClick will override\n         * the onFooterLinkClick callback\n         */\n        if (item.onClick) {\n            event.preventDefault();\n            item.onClick(event);\n        } else if (onFooterLinkClick) {\n            event.preventDefault();\n            onFooterLinkClick(item);\n        } else {\n            // do nothing, let default behaviour happen\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderDisclaimerLinks = () => {\n        const links = FooterHelper.getDisclaimerLinks(\n            theme?.theme,\n            disclaimerLinks\n        );\n\n        return (Object.keys(links) as (keyof InternalDisclaimerLinks)[]).map(\n            (key) => {\n                return (\n                    <Typography.LinkXS\n                        key={key}\n                        underlineStyle=\"none\"\n                        className={styles.disclaimerTextLink}\n                        {...links[key]}\n                    />\n                );\n            }\n        );\n    };\n\n    const renderFooterLinks = (links: FooterLinkProps<T>[]) => {\n        return links.map((link, index) => {\n            const { \"data-options\": _options, ...otherProps } = link;\n\n            return (\n                <li key={index}>\n                    <Typography.LinkMD\n                        underlineStyle=\"none\"\n                        className={styles.footerLink}\n                        {...otherProps}\n                        onClick={(event) => handleLinkClick(event, link)}\n                    />\n                </li>\n            );\n        });\n    };\n\n    const renderTopSection = () => {\n        let component: React.ReactNode = null;\n\n        if (children) {\n            return children;\n        }\n\n        if (links || showDownloadAddon) {\n            const { src, logoType, ...otherLogoAttributes } =\n                FooterHelper.getFooterLogoAttribute(theme?.theme);\n            component = (\n                <>\n                    {(logoSrc || src) && !hideLogo && (\n                        <div\n                            data-testid=\"logo-section\"\n                            className={styles.logoSection}\n                        >\n                            <img\n                                src={logoSrc || src}\n                                data-testid=\"logo\"\n                                className={clsx(\n                                    styles.logoImage,\n                                    logoType && styles.logoSize[logoType]\n                                )}\n                                {...otherLogoAttributes}\n                            />\n                        </div>\n                    )}\n                    <div className={styles.linkSectionWrapper}>\n                        {links?.map((columnLinks, columnIndex) => (\n                            <ul\n                                key={`link-col-${columnIndex}`}\n                                data-testid={`link-col-${columnIndex}`}\n                                className={styles.linkSection}\n                            >\n                                {renderFooterLinks(columnLinks)}\n                            </ul>\n                        ))}\n                    </div>\n                    {showDownloadAddon && (\n                        <div className={styles.addonSection}>\n                            <DownloadApp />\n                        </div>\n                    )}\n                    {/* when showDownloadAddon and showResourceAddon are enabled, showDownloadAddon should take priority to being rendered */}\n                    {!showDownloadAddon && showResourceAddon && (\n                        <div className={styles.addonSection}>\n                            <ResourceAddon />\n                        </div>\n                    )}\n                </>\n            );\n        }\n\n        if (component) {\n            return (\n                <>\n                    <Layout.Content\n                        className={styles.topSection}\n                        stretch={isStretch}\n                    >\n                        {component}\n                    </Layout.Content>\n                    <Divider className={styles.fullWidthDivider} />\n                </>\n            );\n        }\n\n        return null;\n    };\n    return (\n        <footer {...otherProps} className={clsx(styles.baseFooter, className)}>\n            {renderTopSection()}\n            <Layout.Content\n                className={styles.bottomSection}\n                stretch={isStretch}\n            >\n                <div key=\"disclaimer\" className={styles.bottomSectionContent}>\n                    {renderDisclaimerLinks()}\n                </div>\n                <div\n                    key=\"copyright\"\n                    className={clsx(\n                        styles.bottomSectionContent,\n                        styles.copyrightSection\n                    )}\n                >\n                    <Typography.BodyXS\n                        data-testid={\"copyright-text\"}\n                        className={styles.copyrightText}\n                    >\n                        {copyrightInfo || (\n                            <>\n                                &copy;{\" \"}\n                                {FooterHelper.getCopyrightInfo(\n                                    lastUpdated,\n                                    theme?.theme\n                                )}\n                            </>\n                        )}\n                    </Typography.BodyXS>\n                </div>\n            </Layout.Content>\n        </footer>\n    );\n};\n"],"names":["Footer","_a","children","links","lastUpdated","disclaimerLinks","showDownloadAddon","showResourceAddon","logoSrc","copyrightInfo","onFooterLinkClick","layout","hideLogo","className","otherProps","__rest","isStretch","theme","useContext","ThemeContext","renderFooterLinks","map","link","index","_options","_jsx","Typography","LinkMD","Object","assign","underlineStyle","styles.footerLink","onClick","event","item","preventDefault","handleLinkClick","_jsxs","clsx","styles.baseFooter","component","FooterHelper","getFooterLogoAttribute","src","logoType","otherLogoAttributes","_Fragment","styles.logoSection","styles.logoImage","styles.logoSize","styles.linkSectionWrapper","columnLinks","columnIndex","styles.linkSection","styles.addonSection","DownloadApp","ResourceAddon","Layout","Content","styles.topSection","stretch","Divider","styles.fullWidthDivider","renderTopSection","styles.bottomSection","styles.bottomSectionContent","getDisclaimerLinks","keys","key","LinkXS","styles.disclaimerTextLink","renderDisclaimerLinks","styles.copyrightSection","BodyXS","styles.copyrightText","getCopyrightInfo"],"mappings":"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"}
+{"version":3,"file":"footer.js","sources":["../../src/footer/footer.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type React from \"react\";\nimport { useContext } from \"react\";\n\nimport { Divider } from \"../divider\";\nimport { Layout } from \"../layout\";\nimport { ThemeContext } from \"../theme/theme-provider/context\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./footer.styles\";\nimport { DownloadApp } from \"./footer-download-app\";\nimport type { InternalDisclaimerLinks } from \"./footer-helper\";\nimport { FooterHelper } from \"./footer-helper\";\nimport { ResourceAddon } from \"./footer-resource-addon\";\nimport type { FooterLinkProps, FooterProps } from \"./types\";\n\n/**\n * Site-wide footer with navigation links, branding, and legal copy.\n *\n * Use `Footer` at the bottom of a page to surface navigation links grouped\n * into columns, a theme-appropriate logo, download-app or resource add-ons,\n * and disclaimer links with auto-generated copyright text.\n */\nexport const Footer = <T,>({\n    children,\n    links,\n    lastUpdated,\n    disclaimerLinks,\n    showDownloadAddon,\n    showResourceAddon,\n    logoSrc,\n    logoAlt = \"\",\n    copyrightInfo,\n    onFooterLinkClick,\n    layout = \"default\",\n    hideLogo,\n    className,\n    ...otherProps\n}: FooterProps<T>) => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const isStretch = layout === \"stretch\";\n    const theme = useContext(ThemeContext);\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleLinkClick = <K extends T>(\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: FooterLinkProps<K>\n    ) => {\n        /**\n         * Individual link onClick will override\n         * the onFooterLinkClick callback\n         */\n        if (item.onClick) {\n            event.preventDefault();\n            item.onClick(event);\n        } else if (onFooterLinkClick) {\n            event.preventDefault();\n            onFooterLinkClick(item);\n        } else {\n            // do nothing, let default behaviour happen\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderDisclaimerLinks = () => {\n        const links = FooterHelper.getDisclaimerLinks(\n            theme?.theme,\n            disclaimerLinks\n        );\n\n        return (Object.keys(links) as (keyof InternalDisclaimerLinks)[]).map(\n            (key) => {\n                return (\n                    <Typography.LinkXS\n                        key={key}\n                        underlineStyle=\"none\"\n                        className={styles.disclaimerTextLink}\n                        {...links[key]}\n                    />\n                );\n            }\n        );\n    };\n\n    const renderFooterLinks = (links: FooterLinkProps<T>[]) => {\n        return links.map((link, index) => {\n            const { \"data-options\": _options, ...otherProps } = link;\n\n            return (\n                <li key={index}>\n                    <Typography.LinkMD\n                        underlineStyle=\"none\"\n                        className={styles.footerLink}\n                        {...otherProps}\n                        onClick={(event) => handleLinkClick(event, link)}\n                    />\n                </li>\n            );\n        });\n    };\n\n    const renderTopSection = () => {\n        let component: React.ReactNode = null;\n\n        if (children) {\n            return children;\n        }\n\n        if (links || showDownloadAddon) {\n            const { src, alt, logoType, ...otherLogoAttributes } =\n                FooterHelper.getFooterLogoAttribute(theme?.theme);\n            component = (\n                <>\n                    {(logoSrc || src) && !hideLogo && (\n                        <div\n                            data-testid=\"logo-section\"\n                            className={styles.logoSection}\n                        >\n                            <img\n                                src={logoSrc || src}\n                                data-testid=\"logo\"\n                                className={clsx(\n                                    styles.logoImage,\n                                    logoType && styles.logoSize[logoType]\n                                )}\n                                alt={logoAlt || alt}\n                                {...otherLogoAttributes}\n                            />\n                        </div>\n                    )}\n                    <div className={styles.linkSectionWrapper}>\n                        {links?.map((columnLinks, columnIndex) => (\n                            <ul\n                                key={`link-col-${columnIndex}`}\n                                data-testid={`link-col-${columnIndex}`}\n                                className={styles.linkSection}\n                            >\n                                {renderFooterLinks(columnLinks)}\n                            </ul>\n                        ))}\n                    </div>\n                    {showDownloadAddon && (\n                        <div className={styles.addonSection}>\n                            <DownloadApp />\n                        </div>\n                    )}\n                    {/* when showDownloadAddon and showResourceAddon are enabled, showDownloadAddon should take priority to being rendered */}\n                    {!showDownloadAddon && showResourceAddon && (\n                        <div className={styles.addonSection}>\n                            <ResourceAddon />\n                        </div>\n                    )}\n                </>\n            );\n        }\n\n        if (component) {\n            return (\n                <>\n                    <Layout.Content\n                        className={styles.topSection}\n                        stretch={isStretch}\n                    >\n                        {component}\n                    </Layout.Content>\n                    <Divider className={styles.fullWidthDivider} />\n                </>\n            );\n        }\n\n        return null;\n    };\n    return (\n        <footer {...otherProps} className={clsx(styles.baseFooter, className)}>\n            {renderTopSection()}\n            <Layout.Content\n                className={styles.bottomSection}\n                stretch={isStretch}\n            >\n                <div key=\"disclaimer\" className={styles.bottomSectionContent}>\n                    {renderDisclaimerLinks()}\n                </div>\n                <div\n                    key=\"copyright\"\n                    className={clsx(\n                        styles.bottomSectionContent,\n                        styles.copyrightSection\n                    )}\n                >\n                    <Typography.BodyXS\n                        data-testid={\"copyright-text\"}\n                        className={styles.copyrightText}\n                    >\n                        {copyrightInfo || (\n                            <>\n                                &copy;{\" \"}\n                                {FooterHelper.getCopyrightInfo(\n                                    lastUpdated,\n                                    theme?.theme\n                                )}\n                            </>\n                        )}\n                    </Typography.BodyXS>\n                </div>\n            </Layout.Content>\n        </footer>\n    );\n};\n"],"names":["Footer","_a","children","links","lastUpdated","disclaimerLinks","showDownloadAddon","showResourceAddon","logoSrc","logoAlt","copyrightInfo","onFooterLinkClick","layout","hideLogo","className","otherProps","__rest","isStretch","theme","useContext","ThemeContext","renderFooterLinks","map","link","index","_options","_jsx","Typography","LinkMD","Object","assign","underlineStyle","styles.footerLink","onClick","event","item","preventDefault","handleLinkClick","_jsxs","clsx","styles.baseFooter","component","FooterHelper","getFooterLogoAttribute","src","alt","logoType","otherLogoAttributes","_Fragment","styles.logoSection","styles.logoImage","styles.logoSize","styles.linkSectionWrapper","columnLinks","columnIndex","styles.linkSection","styles.addonSection","DownloadApp","ResourceAddon","Layout","Content","styles.topSection","stretch","Divider","styles.fullWidthDivider","renderTopSection","styles.bottomSection","styles.bottomSectionContent","getDisclaimerLinks","keys","key","LinkXS","styles.disclaimerTextLink","renderDisclaimerLinks","styles.copyrightSection","BodyXS","styles.copyrightText","getCopyrightInfo"],"mappings":"y1BAsBO,MAAMA,EAAcC,IAAA,IAAAC,SACvBA,EAAQC,MACRA,EAAKC,YACLA,EAAWC,gBACXA,EAAeC,kBACfA,EAAiBC,kBACjBA,EAAiBC,QACjBA,EAAOC,QACPA,EAAU,GAAEC,cACZA,EAAaC,kBACbA,EAAiBC,OACjBA,EAAS,UAASC,SAClBA,EAAQC,UACRA,GAASb,EACNc,EAAUC,EAAAf,EAdU,sLAmBvB,MAAMgB,EAAuB,YAAXL,EACZM,EAAQC,EAAWC,GA8CnBC,EAAqBlB,GAChBA,EAAMmB,KAAI,CAACC,EAAMC,KACpB,MAAQ,eAAgBC,GAA4BF,EAAfR,EAAUC,EAAKO,EAA9C,CAAA,iBAEN,OACIG,EAAA,KAAA,CAAAxB,SACIwB,EAACC,EAAWC,OAAMC,OAAAC,OAAA,CACdC,eAAe,OACfjB,UAAWkB,GACPjB,EAAU,CACdkB,QAAUC,GApDN,EACpBA,EACAC,KAMIA,EAAKF,SACLC,EAAME,iBACND,EAAKF,QAAQC,IACNvB,IACPuB,EAAME,iBACNzB,EAAkBwB,GACf,EAsC6BE,CAAgBH,EAAOX,OAL1CC,EAOJ,IA4EjB,OACIc,4BAAYvB,EAAU,CAAED,UAAWyB,EAAKC,EAAmB1B,aAxEtC,MACrB,IAAI2B,EAA6B,KAEjC,GAAIvC,EACA,OAAOA,EAGX,GAAIC,GAASG,EAAmB,CAC5B,MAAML,EACFyC,EAAaC,uBAAuBzB,aAAK,EAALA,EAAOA,QADzC0B,IAAEA,EAAGC,IAAEA,EAAGC,SAAEA,GAAQ7C,EAAK8C,EAAmB/B,EAAAf,EAA5C,CAAA,MAAA,MAAA,aAENwC,EACIH,EAAAU,EAAA,CAAA9C,SAAA,EACMM,GAAWoC,KAAS/B,GAClBa,uBACgB,eACZZ,UAAWmC,EAAkB/C,SAE7BwB,uBACIkB,IAAKpC,GAAWoC,EAAG,cACP,OACZ9B,UAAWyB,EACPW,EACAJ,GAAYK,EAAgBL,IAEhCD,IAAKpC,GAAWoC,GACZE,MAIhBrB,EAAA,MAAA,CAAKZ,UAAWsC,EAAyBlD,SACpCC,aAAK,EAALA,EAAOmB,KAAI,CAAC+B,EAAaC,IACtB5B,EAAA,KAAA,CAAA,cAEiB,YAAY4B,IACzBxC,UAAWyC,EAAkBrD,SAE5BmB,EAAkBgC,IAJd,YAAYC,SAQ5BhD,GACGoB,EAAA,MAAA,CAAKZ,UAAW0C,EAAmBtD,SAC/BwB,EAAC+B,EAAW,OAIlBnD,GAAqBC,GACnBmB,EAAA,MAAA,CAAKZ,UAAW0C,EAAmBtD,SAC/BwB,EAACgC,EAAa,QAKlC,CAEA,OAAIjB,EAEIH,EAAAU,EAAA,CAAA9C,SAAA,CACIwB,EAACiC,EAAOC,QAAO,CACX9C,UAAW+C,EACXC,QAAS7C,EAASf,SAEjBuC,IAELf,EAACqC,EAAO,CAACjD,UAAWkD,OAKzB,IAAI,EAINC,GACD3B,EAACqB,EAAOC,QAAO,CACX9C,UAAWoD,EACXJ,QAAS7C,EAASf,SAAA,CAElBwB,EAAA,MAAA,CAAsBZ,UAAWqD,EAA2BjE,SAnH1C,MAC1B,MAAMC,EAAQuC,EAAa0B,mBACvBlD,aAAK,EAALA,EAAOA,MACPb,GAGJ,OAAQwB,OAAOwC,KAAKlE,GAA6CmB,KAC5DgD,GAEO5C,EAACC,EAAW4C,sBAERxC,eAAe,OACfjB,UAAW0D,GACPrE,EAAMmE,IAHLA,IAOpB,EAmGYG,IADI,cAGT/C,EAAA,MAAA,CAEIZ,UAAWyB,EACP4B,EACAO,GACHxE,SAEDwB,EAACC,EAAWgD,sBACK,iBACb7D,UAAW8D,EAAoB1E,SAE9BQ,GACG4B,EAAAU,EAAA,CAAA9C,SAAA,CAAA,IACW,IACNwC,EAAamC,iBACVzE,EACAc,aAAK,EAALA,EAAOA,aAfnB,mBAsBP"}

package/footer/footer.styles_1msorhc.css

@@ -1,4 +1,4 @@
-.b1ozupxm{background:var(--fds-footer-colour-bg);}
+@layer fds{.b1ozupxm{background:var(--fds-footer-colour-bg);}
 .f1b3ng0m{color:var(--fds-footer-link-colour-text);}.f1b3ng0m:hover{color:var(--fds-footer-link-colour-text-hover);}
 .f1f7a2pi{width:100%;}
 .t1nab4kr{padding:var(--fds-spacing-64) 0;}:where(body.fds-breakpoint-lg-max) .t1nab4kr{padding:var(--fds-spacing-32) 0;}:where(body.fds-breakpoint-lg-max) .t1nab4kr [data-id="container"]{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:var(--fds-spacing-32);}
@@ -16,4 +16,4 @@
 .bakpusz{-webkit-flex:1 1 50%;-ms-flex:1 1 50%;flex:1 1 50%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}:where(body.fds-breakpoint-lg-max) .bakpusz{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:var(--fds-spacing-8);}:where(body.fds-breakpoint-lg-max) .bakpusz:not(:last-child){margin-right:0;}
 .cb1d27e{-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;}:where(body.fds-breakpoint-lg-max) .cb1d27e{margin-top:var(--fds-spacing-16);-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;}
 .cntgl6w{color:var(--fds-footer-colour-text);}
-.d2vgmpj{color:var(--fds-footer-disclaimer-link-colour-text);}.d2vgmpj:not(:last-child){margin-right:var(--fds-spacing-16);}.d2vgmpj:hover{color:var(--fds-footer-disclaimer-link-colour-text-hover);}:where(body.fds-breakpoint-lg-max) .d2vgmpj:not(:last-child){margin-right:0;}
+.d2vgmpj{color:var(--fds-footer-disclaimer-link-colour-text);}.d2vgmpj:not(:last-child){margin-right:var(--fds-spacing-16);}.d2vgmpj:hover{color:var(--fds-footer-disclaimer-link-colour-text-hover);}:where(body.fds-breakpoint-lg-max) .d2vgmpj:not(:last-child){margin-right:0;}}

package/footer/types.d.ts

@@ -1,38 +1,89 @@
 import type { TypographyLinkProps } from "../typography";
 type DisclaimerTextLinkProps = Omit<TypographyLinkProps, "children">;
+/**
+ * Override attributes for the built-in disclaimer links rendered at the bottom of the footer.
+ *
+ * Each key corresponds to a standard disclaimer link. When a key is omitted, the
+ * default URL for the active theme is used. Provided values are merged with the
+ * theme defaults, so only the attributes supplied are overridden.
+ */
 export interface DisclaimerLinks {
     privacy?: DisclaimerTextLinkProps | undefined;
     termsOfUse?: DisclaimerTextLinkProps | undefined;
     reportVulnerability?: DisclaimerTextLinkProps | undefined;
 }
+/**
+ * Props for a single link rendered in the footer navigation columns.
+ *
+ * Extends `TypographyLinkProps`. The type parameter `T` is the shape of any
+ * application-specific metadata attached to the link via `data-options`, and
+ * is passed back through the `onFooterLinkClick` callback.
+ */
 export interface FooterLinkProps<T = void> extends TypographyLinkProps {
     /** Any custom attributes you would like to pass to the link */
     "data-options"?: T | undefined;
     "data-testid"?: string | undefined;
 }
+/**
+ * Props for the `Footer` component.
+ *
+ * The type parameter `T` flows through `FooterLinkProps` and is returned via
+ * `onFooterLinkClick`, allowing consumers to attach typed metadata to each link.
+ */
 export interface FooterProps<T = void> {
     /** The footer links. Multi array to present in different columns */
     links?: FooterLinkProps<T>[][] | undefined;
     /** Indicates if the download app icons are to be present */
     showDownloadAddon?: boolean | undefined;
-    /** Indicates if additional app resources should be displayed */
+    /**
+     * Indicates if additional app resources should be displayed.
+     *
+     * When both `showDownloadAddon` and `showResourceAddon` are `true`,
+     * `showDownloadAddon` takes priority and the resource add-on is not rendered.
+     */
     showResourceAddon?: boolean | undefined;
     /** Custom component. This overrides the logo, links and download section */
     children?: JSX.Element | JSX.Element[] | undefined;
-    /** Custom disclaimer link attributes */
+    /**
+     * Override attributes for the built-in disclaimer links.
+     *
+     * Each supplied key is merged with the theme defaults. Omitted keys fall
+     * back to the default URLs for the active theme.
+     */
     disclaimerLinks?: DisclaimerLinks | undefined;
     /** A custom copyright text */
     copyrightInfo?: string | undefined;
     /** Custom logo source */
     logoSrc?: string | undefined;
-    /** Last updated date value that is displayed in the bottom of the Footer */
+    /** Custom logo alt text */
+    logoAlt?: string | undefined;
+    /**
+     * Date displayed in the copyright line as "Last updated D MMMM YYYY".
+     *
+     * @remarks Falls back to the current date when omitted.
+     */
     lastUpdated?: Date | undefined;
+    /**
+     * Called when a footer navigation link is clicked.
+     *
+     * Receives the full `FooterLinkProps` for the clicked link. If the link
+     * defines its own `onClick` handler, that handler takes priority and
+     * `onFooterLinkClick` is not called.
+     */
     onFooterLinkClick?: ((link: FooterLinkProps<T>) => void) | undefined;
-    /** Determines if the content of the footer scales with the max width */
+    /**
+     * Controls whether the footer content is constrained to a maximum width or
+     * stretches to fill the full viewport width.
+     *
+     * @default "default"
+     */
     layout?: "default" | "stretch" | undefined;
     id?: string | undefined;
     "data-testid"?: string | undefined;
     className?: string | undefined;
+    /**
+     * Suppresses the logo even when a `logoSrc` or a theme-based logo URL is available.
+     */
     hideLogo?: boolean | undefined;
 }
 export {};

package/form/form-label-addon.styles_b00z8p.css

@@ -1 +1 @@
-.akbk9y1{padding-left:var(--fds-spacing-4);display:inline;}
+@layer fds{.akbk9y1{padding-left:var(--fds-spacing-4);display:inline;}}

package/form/form-label.styles.js

@@ -1,2 +1,2 @@
-import"./form-label.styles_rk98yd.css";const s="l170pjsx",e="lf1tnj",l="eyg2zu6",o="e4aab9k",r="e39ds6s",t="s1n6ixex";export{l as errorIcon,r as errorMessage,o as errorMessageContainer,e as label,s as labelContainer,t as subtitle};
+import"./form-label.styles_1nbe0bm.css";const s="l170pjsx",e="lf1tnj",l="eyg2zu6",o="e4aab9k",t="e39ds6s",b="s1n6ixex";export{l as errorIcon,t as errorMessage,o as errorMessageContainer,e as label,s as labelContainer,b as subtitle};
 //# sourceMappingURL=form-label.styles.js.map

package/form/form-label.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-label.styles.js","sources":["../../src/form/form-label.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const labelContainer = css`\n    margin-bottom: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const label = css`\n    color: ${Colour[\"text-subtle\"]};\n    display: inline-block;\n    ${Font[\"form-label\"]}\n    font-weight: ${Font.Spec[\"weight-semibold\"]};\n`;\n\nexport const errorIcon = css`\n    height: 1lh;\n    width: 1em;\n    flex-shrink: 0;\n    color: ${Colour[\"icon-error-strong\"]};\n`;\n\nexport const errorMessageContainer = css`\n    ${Font[\"body-sm-semibold\"]}\n    display: flex;\n    gap: ${Spacing[\"spacing-4\"]};\n    margin-top: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const errorMessage = css`\n    color: ${Colour[\"text-error\"]};\n    ${Font[\"body-sm-semibold\"]}\n    margin-bottom: 0;\n    outline: none;\n`;\n\nexport const subtitle = css`\n    ${Font[\"form-description\"]}\n    color: ${Colour[\"text-subtler\"]};\n    display: block;\n`;\n"],"names":["labelContainer","label","errorIcon","errorMessageContainer","errorMessage","subtitle"],"mappings":"2DAOO,MAAMA,EAAc,WAIdC,EAAK,SAOLC,EAAS,UAOTC,EAAqB,UAOrBC,EAAY,UAOZC,EAAQ"}
+{"version":3,"file":"form-label.styles.js","sources":["../../src/form/form-label.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const labelContainer = css`\n    margin-bottom: ${Spacing[\"spacing-8\"]};\n    display: flex;\n    flex-direction: column;\n    gap: ${Spacing[\"spacing-4\"]};\n`;\n\nexport const label = css`\n    color: ${Colour[\"text-subtle\"]};\n    display: inline-block;\n    ${Font[\"form-label\"]}\n    font-weight: ${Font.Spec[\"weight-semibold\"]};\n`;\n\nexport const errorIcon = css`\n    height: 1lh;\n    width: 1em;\n    flex-shrink: 0;\n    color: ${Colour[\"icon-error-strong\"]};\n`;\n\nexport const errorMessageContainer = css`\n    ${Font[\"body-sm-semibold\"]}\n    display: flex;\n    gap: ${Spacing[\"spacing-4\"]};\n    margin-top: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const errorMessage = css`\n    color: ${Colour[\"text-error\"]};\n    ${Font[\"body-sm-semibold\"]}\n    margin-bottom: 0;\n    outline: none;\n`;\n\nexport const subtitle = css`\n    ${Font[\"form-description\"]}\n    color: ${Colour[\"text-subtler\"]};\n    display: block;\n`;\n"],"names":["labelContainer","label","errorIcon","errorMessageContainer","errorMessage","subtitle"],"mappings":"4DAOO,MAAMA,EAAc,WAOdC,EAAK,SAOLC,EAAS,UAOTC,EAAqB,UAOrBC,EAAY,UAOZC,EAAQ"}

package/form/form-label.styles_1nbe0bm.css

@@ -0,0 +1,6 @@
+@layer fds{.l170pjsx{margin-bottom:var(--fds-spacing-8);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:var(--fds-spacing-4);}
+.lf1tnj{color:var(--fds-colour-text-subtle);display:inline-block;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-form-label-size);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-form-label-lh);letter-spacing:var(--fds-font-form-label-ls);font-weight:var(--fds-font-weight-semibold);}
+.eyg2zu6{height:1lh;width:1em;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;color:var(--fds-colour-icon-error-strong);}
+.e4aab9k{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-sm);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-sm);letter-spacing:var(--fds-font-body-ls-sm);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:var(--fds-spacing-4);margin-top:var(--fds-spacing-8);}
+.e39ds6s{color:var(--fds-colour-text-error);font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-sm);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-sm);letter-spacing:var(--fds-font-body-ls-sm);margin-bottom:0;outline:none;}
+.s1n6ixex{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-form-description-size);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-form-description-lh);letter-spacing:var(--fds-font-form-description-ls);color:var(--fds-colour-text-subtler);display:block;}}

package/form/form-textarea.styles_3p9qoy.css

@@ -1,3 +1,3 @@
-.l1g6v039{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;margin-top:var(--fds-spacing-8);}
+@layer fds{.l1g6v039{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;margin-top:var(--fds-spacing-8);}
 .exxic43{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;margin-right:var(--fds-spacing-12);gap:var(--fds-spacing-4);}
-.ebp2a0d{margin-top:0;}
+.ebp2a0d{margin-top:0;}}

package/form/form-wrapper.js

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as r}from"react/jsx-runtime";import{Children as l,cloneElement as s}from"react";import{ColDiv as t}from"../layout/col-div.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as o}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{FormErrorMessage as i,FormLabel as a}from"./form-label.js";import{container as d}from"./form-wrapper.styles.js";const n=({label:n,errorMessage:m,id:c,children:p,layoutType:b,xxsCols:u,xsCols:x,smCols:f,mdCols:g,lgCols:j,xlCols:C,xxlCols:y,"data-testid":h,"data-error-testid":v})=>{const $=!b&&(u||x||f||g||j||C||y)?"grid":b||"flex",w="string"==typeof m?m.trim():m,F=o(),O=`${null!=c?c:F}-label`,B=`${null!=c?c:F}-label-subtitle`,I=`${null!=c?c:F}-error-message`;const M=(e=>{switch(e){case"grid":return t;case"flex":return"div"}})($);return e(M,Object.assign({className:d,"data-testid":h},(e=>{switch(e){case"grid":return{xxsCols:u,xsCols:x,smCols:f,mdCols:g,lgCols:j,xlCols:C,xxlCols:y};case"flex":return}})($),{children:[n&&r(a,"string"==typeof n?{htmlFor:`${c}-base`,"data-testid":c?`${c}-label`:"form-label",id:O,children:n}:Object.assign({htmlFor:`${c}-base`,"data-testid":c?`${c}-label`:"form-label",id:O},n)),(()=>{const e={"aria-invalid":!!m,"aria-describedby":[w?I:void 0,"object"==typeof n&&(null==n?void 0:n.subtitle)?B:void 0].filter(Boolean).join(" ")||void 0,"aria-labelledby":n?O:void 0};return l.map(p,(r=>s(r,e)))})(),w&&r(i,{id:I,tabIndex:0,"data-testid":null!=v?v:c?`${c}-error-message`:"error-message",children:w})]}))};export{n as FormWrapper};
+import{jsxs as e,jsx as r}from"react/jsx-runtime";import{Children as l,isValidElement as t,Fragment as s,cloneElement as o}from"react";import{ColDiv as i}from"../layout/col-div.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as a}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{FormErrorMessage as d,FormLabel as n}from"./form-label.js";import{container as m}from"./form-wrapper.styles.js";const c=({label:c,errorMessage:p,id:b,children:u,layoutType:x,xxsCols:f,xsCols:g,smCols:j,mdCols:C,lgCols:y,xlCols:h,xxlCols:v,"data-testid":$,"data-error-testid":w})=>{const F=!x&&(f||g||j||C||y||h||v)?"grid":x||"flex",O="string"==typeof p?p.trim():p,B=a(),I=`${null!=b?b:B}-label`,M=`${null!=b?b:B}-label-subtitle`,N=`${null!=b?b:B}-error-message`;const T=(e=>{switch(e){case"grid":return i;case"flex":return"div"}})(F);return e(T,Object.assign({className:m,"data-testid":$},(e=>{switch(e){case"grid":return{xxsCols:f,xsCols:g,smCols:j,mdCols:C,lgCols:y,xlCols:h,xxlCols:v};case"flex":return}})(F),{children:[c&&r(n,"string"==typeof c?{htmlFor:`${b}-base`,"data-testid":b?`${b}-label`:"form-label",id:I,children:c}:Object.assign({htmlFor:`${b}-base`,"data-testid":b?`${b}-label`:"form-label",id:I},c)),(()=>{const e={"aria-invalid":!!p,"aria-describedby":[O?N:void 0,"object"==typeof c&&(null==c?void 0:c.subtitle)?M:void 0].filter(Boolean).join(" ")||void 0,"aria-labelledby":c?I:void 0};return l.map(u,(r=>t(r)&&r.type===s?o(r):o(r,e)))})(),O&&r(d,{id:N,tabIndex:0,"data-testid":null!=w?w:b?`${b}-error-message`:"error-message",children:O})]}))};export{c as FormWrapper};
 //# sourceMappingURL=form-wrapper.js.map

package/form/form-wrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-wrapper.js","sources":["../../src/form/form-wrapper.tsx"],"sourcesContent":["/**\n * This is a SUPPORTING component\n * (Do not include in the main export)\n *\n */\n\nimport type { ElementType } from \"react\";\nimport { Children, cloneElement } from \"react\";\n\nimport { ColDiv } from \"../layout/col-div\";\nimport { useId } from \"../util\";\nimport { FormErrorMessage, FormLabel } from \"./form-label\";\nimport * as styles from \"./form-wrapper.styles\";\nimport type { FormElementLayoutType, FormWrapperProps } from \"./types\";\n\nexport const FormWrapper = ({\n    label,\n    errorMessage: eRaw,\n    id,\n    children,\n    layoutType,\n    xxsCols,\n    xsCols,\n    smCols,\n    mdCols,\n    lgCols,\n    xlCols,\n    xxlCols,\n    \"data-testid\": testId,\n    \"data-error-testid\": errorTestId,\n}: FormWrapperProps): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const updatedLayoutType = getLayoutType();\n    const errorMessage = typeof eRaw === \"string\" ? eRaw.trim() : eRaw;\n    const internalId = useId();\n    const labelId = `${id ?? internalId}-label`; // matches FormLabel\n    const subtitleId = `${id ?? internalId}-label-subtitle`; // matches FormLabel\n    const errorMessageId = `${id ?? internalId}-error-message`;\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n\n    const isInvalidState = (): boolean => {\n        return !!eRaw;\n    };\n\n    const hasSubtitleLabel = (): boolean => {\n        return typeof label === \"object\" && !!label?.subtitle;\n    };\n\n    const getAriaDescribedBy = (): string | undefined => {\n        return (\n            [\n                errorMessage ? errorMessageId : undefined,\n                hasSubtitleLabel() ? subtitleId : undefined,\n            ]\n                .filter(Boolean)\n                .join(\" \") || undefined\n        );\n    };\n\n    function getLayoutType(): FormElementLayoutType {\n        if (\n            !layoutType &&\n            (xxsCols ||\n                xsCols ||\n                smCols ||\n                mdCols ||\n                lgCols ||\n                xlCols ||\n                xxlCols)\n        ) {\n            return \"grid\";\n        } else if (!layoutType) {\n            return \"flex\";\n        } else {\n            return layoutType;\n        }\n    }\n\n    const getContainerLayoutProps = (layoutType: FormElementLayoutType) => {\n        switch (layoutType) {\n            case \"grid\":\n                return {\n                    xxsCols,\n                    xsCols,\n                    smCols,\n                    mdCols,\n                    lgCols,\n                    xlCols,\n                    xxlCols,\n                };\n            case \"flex\":\n                return undefined;\n        }\n    };\n\n    const getContainerComponent = (\n        layoutType: FormElementLayoutType\n    ): ElementType => {\n        switch (layoutType) {\n            case \"grid\":\n                return ColDiv;\n            case \"flex\":\n                return \"div\";\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    const renderFormLabel = (): JSX.Element => {\n        if (typeof label === \"string\") {\n            return (\n                <FormLabel\n                    htmlFor={`${id}-base`}\n                    // FIXME: kept for backwards-compatibility\n                    // in most cases data-testid should be separate from id\n                    data-testid={id ? `${id}-label` : \"form-label\"}\n                    id={labelId}\n                >\n                    {label}\n                </FormLabel>\n            );\n        }\n        return (\n            <FormLabel\n                htmlFor={`${id}-base`}\n                data-testid={id ? `${id}-label` : \"form-label\"}\n                id={labelId}\n                {...label}\n            />\n        );\n    };\n\n    const renderChildren = (): JSX.Element | JSX.Element[] => {\n        const ariaState = {\n            \"aria-invalid\": isInvalidState(),\n            \"aria-describedby\": getAriaDescribedBy(),\n            \"aria-labelledby\": label ? labelId : undefined,\n        };\n        return Children.map(children, (child) =>\n            cloneElement(child, ariaState)\n        );\n    };\n\n    const ContainerComponent = getContainerComponent(updatedLayoutType);\n\n    return (\n        <ContainerComponent\n            className={styles.container}\n            data-testid={testId}\n            {...getContainerLayoutProps(updatedLayoutType)}\n        >\n            {label && renderFormLabel()}\n            {renderChildren()}\n            {errorMessage && (\n                <FormErrorMessage\n                    id={errorMessageId}\n                    tabIndex={0}\n                    data-testid={\n                        errorTestId ??\n                        // FIXME: kept for backwards-compatibility\n                        // in most cases data-testid should be separate from id\n                        (id ? `${id}-error-message` : \"error-message\")\n                    }\n                >\n                    {errorMessage}\n                </FormErrorMessage>\n            )}\n        </ContainerComponent>\n    );\n};\n"],"names":["FormWrapper","label","errorMessage","eRaw","id","children","layoutType","xxsCols","xsCols","smCols","mdCols","lgCols","xlCols","xxlCols","testId","errorTestId","updatedLayoutType","trim","internalId","useId","labelId","subtitleId","errorMessageId","ContainerComponent","ColDiv","getContainerComponent","_jsxs","className","styles.container","getContainerLayoutProps","_jsx","FormLabel","htmlFor","Object","assign","ariaState","undefined","subtitle","filter","Boolean","join","Children","map","child","cloneElement","renderChildren","FormErrorMessage","tabIndex"],"mappings":"+cAeO,MAAMA,EAAc,EACvBC,QACAC,aAAcC,EACdC,KACAC,WACAC,aACAC,UACAC,SACAC,SACAC,SACAC,SACAC,SACAC,UACA,cAAeC,EACf,oBAAqBC,MAKrB,MAAMC,GAgCGV,IACAC,GACGC,GACAC,GACAC,GACAC,GACAC,GACAC,GAEG,OACCP,GACD,OA1CTJ,EAA+B,iBAATC,EAAoBA,EAAKc,OAASd,EACxDe,EAAaC,IACbC,EAAU,GAAGhB,QAAAA,EAAMc,UACnBG,EAAa,GAAGjB,QAAAA,EAAMc,mBACtBI,EAAiB,GAAGlB,QAAAA,EAAMc,kBA4ChC,MAmEMK,EAlDwB,CAC1BjB,IAEA,OAAQA,GACJ,IAAK,OACD,OAAOkB,EACX,IAAK,OACD,MAAO,QA2CQC,CAAsBT,GAEjD,OACIU,EAACH,iBACGI,UAAWC,gBACEd,GAxEW,CAACR,IAC7B,OAAQA,GACJ,IAAK,OACD,MAAO,CACHC,UACAC,SACAC,SACAC,SACAC,SACAC,SACAC,WAER,IAAK,OACD,SA4DAgB,CAAwBb,GAAkB,CAAAX,SAAA,CAE7CJ,GAxCG6B,EAACC,EAFY,iBAAV9B,EAEO,CACN+B,QAAS,GAAG5B,SAAS,cAGRA,EAAK,GAAGA,UAAa,aAClCA,GAAIgB,EAAOf,SAEVJ,GAKCgC,OAAAC,OAAA,CACNF,QAAS,GAAG5B,SAAS,cACRA,EAAK,GAAGA,UAAa,aAClCA,GAAIgB,GACAnB,IAKO,MACnB,MAAMkC,EAAY,CACd,iBA/FKhC,EAgGL,mBAvFA,CACID,EAAeoB,OAAiBc,EANhB,iBAAVnC,IAAwBA,aAAK,EAALA,EAAOoC,UAOhBhB,OAAae,GAEjCE,OAAOC,SACPC,KAAK,WAAQJ,EAmFlB,kBAAmBnC,EAAQmB,OAAUgB,GAEzC,OAAOK,EAASC,IAAIrC,GAAWsC,GAC3BC,EAAaD,EAAOR,IACvB,EAYIU,GACA3C,GACG4B,EAACgB,GACG1C,GAAIkB,EACJyB,SAAU,EAAC,cAEPhC,QAAAA,EAGCX,EAAK,GAAGA,kBAAqB,gBAAgBC,SAGjDH,OAGQ"}
+{"version":3,"file":"form-wrapper.js","sources":["../../src/form/form-wrapper.tsx"],"sourcesContent":["/**\n * This is a SUPPORTING component\n * (Do not include in the main export)\n *\n */\n\nimport type { ElementType } from \"react\";\nimport { Children, cloneElement, Fragment, isValidElement } from \"react\";\n\nimport { ColDiv } from \"../layout/col-div\";\nimport { useId } from \"../util\";\nimport { FormErrorMessage, FormLabel } from \"./form-label\";\nimport * as styles from \"./form-wrapper.styles\";\nimport type { FormElementLayoutType, FormWrapperProps } from \"./types\";\n\nexport const FormWrapper = ({\n    label,\n    errorMessage: eRaw,\n    id,\n    children,\n    layoutType,\n    xxsCols,\n    xsCols,\n    smCols,\n    mdCols,\n    lgCols,\n    xlCols,\n    xxlCols,\n    \"data-testid\": testId,\n    \"data-error-testid\": errorTestId,\n}: FormWrapperProps): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const updatedLayoutType = getLayoutType();\n    const errorMessage = typeof eRaw === \"string\" ? eRaw.trim() : eRaw;\n    const internalId = useId();\n    const labelId = `${id ?? internalId}-label`; // matches FormLabel\n    const subtitleId = `${id ?? internalId}-label-subtitle`; // matches FormLabel\n    const errorMessageId = `${id ?? internalId}-error-message`;\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n\n    const isInvalidState = (): boolean => {\n        return !!eRaw;\n    };\n\n    const hasSubtitleLabel = (): boolean => {\n        return typeof label === \"object\" && !!label?.subtitle;\n    };\n\n    const getAriaDescribedBy = (): string | undefined => {\n        return (\n            [\n                errorMessage ? errorMessageId : undefined,\n                hasSubtitleLabel() ? subtitleId : undefined,\n            ]\n                .filter(Boolean)\n                .join(\" \") || undefined\n        );\n    };\n\n    function getLayoutType(): FormElementLayoutType {\n        if (\n            !layoutType &&\n            (xxsCols ||\n                xsCols ||\n                smCols ||\n                mdCols ||\n                lgCols ||\n                xlCols ||\n                xxlCols)\n        ) {\n            return \"grid\";\n        } else if (!layoutType) {\n            return \"flex\";\n        } else {\n            return layoutType;\n        }\n    }\n\n    const getContainerLayoutProps = (layoutType: FormElementLayoutType) => {\n        switch (layoutType) {\n            case \"grid\":\n                return {\n                    xxsCols,\n                    xsCols,\n                    smCols,\n                    mdCols,\n                    lgCols,\n                    xlCols,\n                    xxlCols,\n                };\n            case \"flex\":\n                return undefined;\n        }\n    };\n\n    const getContainerComponent = (\n        layoutType: FormElementLayoutType\n    ): ElementType => {\n        switch (layoutType) {\n            case \"grid\":\n                return ColDiv;\n            case \"flex\":\n                return \"div\";\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    const renderFormLabel = (): JSX.Element => {\n        if (typeof label === \"string\") {\n            return (\n                <FormLabel\n                    htmlFor={`${id}-base`}\n                    // FIXME: kept for backwards-compatibility\n                    // in most cases data-testid should be separate from id\n                    data-testid={id ? `${id}-label` : \"form-label\"}\n                    id={labelId}\n                >\n                    {label}\n                </FormLabel>\n            );\n        }\n        return (\n            <FormLabel\n                htmlFor={`${id}-base`}\n                data-testid={id ? `${id}-label` : \"form-label\"}\n                id={labelId}\n                {...label}\n            />\n        );\n    };\n\n    const renderChildren = (): JSX.Element | JSX.Element[] => {\n        const ariaState = {\n            \"aria-invalid\": isInvalidState(),\n            \"aria-describedby\": getAriaDescribedBy(),\n            \"aria-labelledby\": label ? labelId : undefined,\n        };\n        return Children.map(children, (child) => {\n            if (isValidElement(child) && child.type === Fragment) {\n                return cloneElement(child);\n            }\n            return cloneElement(child, ariaState);\n        });\n    };\n\n    const ContainerComponent = getContainerComponent(updatedLayoutType);\n\n    return (\n        <ContainerComponent\n            className={styles.container}\n            data-testid={testId}\n            {...getContainerLayoutProps(updatedLayoutType)}\n        >\n            {label && renderFormLabel()}\n            {renderChildren()}\n            {errorMessage && (\n                <FormErrorMessage\n                    id={errorMessageId}\n                    tabIndex={0}\n                    data-testid={\n                        errorTestId ??\n                        // FIXME: kept for backwards-compatibility\n                        // in most cases data-testid should be separate from id\n                        (id ? `${id}-error-message` : \"error-message\")\n                    }\n                >\n                    {errorMessage}\n                </FormErrorMessage>\n            )}\n        </ContainerComponent>\n    );\n};\n"],"names":["FormWrapper","label","errorMessage","eRaw","id","children","layoutType","xxsCols","xsCols","smCols","mdCols","lgCols","xlCols","xxlCols","testId","errorTestId","updatedLayoutType","trim","internalId","useId","labelId","subtitleId","errorMessageId","ContainerComponent","ColDiv","getContainerComponent","_jsxs","className","styles.container","getContainerLayoutProps","_jsx","FormLabel","htmlFor","Object","assign","ariaState","undefined","subtitle","filter","Boolean","join","Children","map","child","isValidElement","type","Fragment","cloneElement","renderChildren","FormErrorMessage","tabIndex"],"mappings":"ifAeO,MAAMA,EAAc,EACvBC,QACAC,aAAcC,EACdC,KACAC,WACAC,aACAC,UACAC,SACAC,SACAC,SACAC,SACAC,SACAC,UACA,cAAeC,EACf,oBAAqBC,MAKrB,MAAMC,GAgCGV,IACAC,GACGC,GACAC,GACAC,GACAC,GACAC,GACAC,GAEG,OACCP,GACD,OA1CTJ,EAA+B,iBAATC,EAAoBA,EAAKc,OAASd,EACxDe,EAAaC,IACbC,EAAU,GAAGhB,QAAAA,EAAMc,UACnBG,EAAa,GAAGjB,QAAAA,EAAMc,mBACtBI,EAAiB,GAAGlB,QAAAA,EAAMc,kBA4ChC,MAsEMK,EArDwB,CAC1BjB,IAEA,OAAQA,GACJ,IAAK,OACD,OAAOkB,EACX,IAAK,OACD,MAAO,QA8CQC,CAAsBT,GAEjD,OACIU,EAACH,iBACGI,UAAWC,gBACEd,GA3EW,CAACR,IAC7B,OAAQA,GACJ,IAAK,OACD,MAAO,CACHC,UACAC,SACAC,SACAC,SACAC,SACAC,SACAC,WAER,IAAK,OACD,SA+DAgB,CAAwBb,GAAkB,CAAAX,SAAA,CAE7CJ,GA3CG6B,EAACC,EAFY,iBAAV9B,EAEO,CACN+B,QAAS,GAAG5B,SAAS,cAGRA,EAAK,GAAGA,UAAa,aAClCA,GAAIgB,EAAOf,SAEVJ,GAKCgC,OAAAC,OAAA,CACNF,QAAS,GAAG5B,SAAS,cACRA,EAAK,GAAGA,UAAa,aAClCA,GAAIgB,GACAnB,IAKO,MACnB,MAAMkC,EAAY,CACd,iBA/FKhC,EAgGL,mBAvFA,CACID,EAAeoB,OAAiBc,EANhB,iBAAVnC,IAAwBA,aAAK,EAALA,EAAOoC,UAOhBhB,OAAae,GAEjCE,OAAOC,SACPC,KAAK,WAAQJ,EAmFlB,kBAAmBnC,EAAQmB,OAAUgB,GAEzC,OAAOK,EAASC,IAAIrC,GAAWsC,GACvBC,EAAeD,IAAUA,EAAME,OAASC,EACjCC,EAAaJ,GAEjBI,EAAaJ,EAAOR,IAC7B,EAYGa,GACA9C,GACG4B,EAACmB,GACG7C,GAAIkB,EACJ4B,SAAU,EAAC,cAEPnC,QAAAA,EAGCX,EAAK,GAAGA,kBAAqB,gBAAgBC,SAGjDH,OAGQ"}

package/form/form-wrapper.styles_199rslu.css

@@ -1 +1 @@
-.c10mmo3e{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.c10mmo3e:not(:last-child){margin-bottom:var(--fds-spacing-32);}
+@layer fds{.c10mmo3e{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.c10mmo3e:not(:last-child){margin-bottom:var(--fds-spacing-32);}}