@lifesg/react-design-system 3.5.0-canary.7 → 4.0.0-alpha.10

package/uneditable-section/section-item.styles.d.ts

@@ -1,22 +1,9 @@
-import { UneditableSectionItemDisplayWidth } from "./types";
-interface ContainerStyleProps {
-    $widthStyle: UneditableSectionItemDisplayWidth;
-    $fullWidth?: boolean | undefined;
-}
-export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, keyof ContainerStyleProps> & ContainerStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, keyof ContainerStyleProps> & ContainerStyleProps, never>>> & string;
-export declare const IconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const Clickable: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>>> & string;
-export declare const LoadingLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
-export declare const Spinner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../shared/component-loading-spinner").ComponentLoadingSpinnerProps, never> & Partial<Pick<import("../shared/component-loading-spinner").ComponentLoadingSpinnerProps, never>>> & string & Omit<({ color, className, size, }: import("../shared/component-loading-spinner").ComponentLoadingSpinnerProps) => JSX.Element, keyof import("react").Component<any, {}, any>>;
-export declare const ErrorIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never> & Partial<Pick<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never>>> & string & Omit<{
-    (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-export declare const ErrorLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
-export declare const TryAgainLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
-export declare const StyledAlert: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").AlertProps, never> & Partial<Pick<import("..").AlertProps, never>>> & string & Omit<({ type, className, children, actionLink, actionLinkIcon, sizeType, showIcon, customIcon, maxCollapsedHeight, role, ...otherProps }: import("..").AlertProps) => JSX.Element, keyof import("react").Component<any, {}, any>>;
-export {};
+export declare const container: import("@linaria/core").LinariaClassName;
+export declare const iconContainer: import("@linaria/core").LinariaClassName;
+export declare const clickable: import("@linaria/core").LinariaClassName;
+export declare const loadingLabel: import("@linaria/core").LinariaClassName;
+export declare const spinner: import("@linaria/core").LinariaClassName;
+export declare const errorIcon: import("@linaria/core").LinariaClassName;
+export declare const errorLabel: import("@linaria/core").LinariaClassName;
+export declare const tryAgainLabel: import("@linaria/core").LinariaClassName;
+export declare const alert: import("@linaria/core").LinariaClassName;

package/uneditable-section/section-item.styles.js

@@ -1,64 +1,2 @@
-import{ExclamationTriangleIcon as e}from"@lifesg/react-icons/exclamation-triangle";import r,{css as i}from"styled-components";import{Alert as n}from"../alert/alert.js";import{ComponentLoadingSpinner as o}from"../shared/component-loading-spinner/component-loading-spinner.js";import{MediaQuery as t,Colour as l,Font as a}from"../theme/index.js";const s=r.li`
-    display: flex;
-    flex-direction: column;
-
-    ${e=>{switch(e.$widthStyle){case"half":return i`
-                    grid-column: auto / span ${e.$fullWidth?1:4};
-                `;case"full":return i`
-                    grid-column: auto / span ${e.$fullWidth?2:8};
-                `}}}
-
-    ${t.MaxWidth.lg} {
-        grid-column: 1 / -1;
-    }
-
-    overflow-wrap: break-word;
-`,d=r.div`
-    display: flex;
-    height: 100%;
-    align-items: center;
-    justify-content: center;
-    color: ${l["icon-primary"]};
-    margin-left: 0.5rem;
-
-    svg {
-        width: ${a.Spec["body-size-baseline"]};
-        height: ${a.Spec["body-size-baseline"]};
-    }
-`,c=r.button`
-    ${a["body-baseline-regular"]}
-    color: ${l.text};
-    border: none;
-    background: transparent;
-    padding: 0;
-    display: flex;
-    cursor: pointer;
-    align-items: center;
-    overflow-wrap: anywhere;
-    text-align: left;
-
-    span {
-        overflow-wrap: anywhere;
-        text-align: left;
-    }
-`,m=r.span`
-    color: ${l["text-disabled"]};
-`,p=r(o)`
-    margin-right: 0.5rem;
-    color: ${l["text-disabled"]};
-`,g=r(e)`
-    color: ${l["icon-warning"]};
-    margin-right: 0.5rem;
-    height: ${a.Spec["body-size-baseline"]};
-    width: ${a.Spec["body-size-baseline"]};
-`,f=r.span`
-    color: ${l["text-warning"]};
-`,h=r.span`
-    ${a["body-baseline-semibold"]}
-    color: ${l.hyperlink};
-    text-decoration: underline;
-    margin-left: 0.5rem;
-`,$=r(n)`
-    margin-top: 0.5rem;
-`;export{c as Clickable,s as Container,g as ErrorIcon,f as ErrorLabel,d as IconContainer,m as LoadingLabel,p as Spinner,$ as StyledAlert,h as TryAgainLabel};
+import"./section-item.styles_mwx8ht.css";const t="cfqoxdt",e="i6tvpcl",c="c988p37",l="l1fg6lie",s="s186v6u4",i="e13rb6hl",p="e13pxbfu",o="t1dzpnph",n="a1celal9";export{n as alert,c as clickable,t as container,i as errorIcon,p as errorLabel,e as iconContainer,l as loadingLabel,s as spinner,o as tryAgainLabel};
 //# sourceMappingURL=section-item.styles.js.map

package/uneditable-section/section-item.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"section-item.styles.js","sources":["../../src/uneditable-section/section-item.styles.tsx"],"sourcesContent":["import { ExclamationTriangleIcon } from \"@lifesg/react-icons/exclamation-triangle\";\nimport styled, { css } from \"styled-components\";\nimport { Alert } from \"../alert\";\nimport { ComponentLoadingSpinner } from \"../shared/component-loading-spinner\";\nimport { Colour, Font, MediaQuery } from \"../theme\";\nimport { UneditableSectionItemDisplayWidth } from \"./types\";\n\n// =============================================================================\n// STYLING INTERFACES\n// =============================================================================\ninterface ContainerStyleProps {\n    $widthStyle: UneditableSectionItemDisplayWidth;\n    $fullWidth?: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Container = styled.li<ContainerStyleProps>`\n    display: flex;\n    flex-direction: column;\n\n    ${(props) => {\n        switch (props.$widthStyle) {\n            case \"half\":\n                return css`\n                    grid-column: auto / span ${props.$fullWidth ? 1 : 4};\n                `;\n            case \"full\":\n                return css`\n                    grid-column: auto / span ${props.$fullWidth ? 2 : 8};\n                `;\n        }\n    }}\n\n    ${MediaQuery.MaxWidth.lg} {\n        grid-column: 1 / -1;\n    }\n\n    overflow-wrap: break-word;\n`;\n\nexport const IconContainer = styled.div`\n    display: flex;\n    height: 100%;\n    align-items: center;\n    justify-content: center;\n    color: ${Colour[\"icon-primary\"]};\n    margin-left: 0.5rem;\n\n    svg {\n        width: ${Font.Spec[\"body-size-baseline\"]};\n        height: ${Font.Spec[\"body-size-baseline\"]};\n    }\n`;\n\nexport const Clickable = styled.button`\n    ${Font[\"body-baseline-regular\"]}\n    color: ${Colour[\"text\"]};\n    border: none;\n    background: transparent;\n    padding: 0;\n    display: flex;\n    cursor: pointer;\n    align-items: center;\n    overflow-wrap: anywhere;\n    text-align: left;\n\n    span {\n        overflow-wrap: anywhere;\n        text-align: left;\n    }\n`;\n\n// -----------------------------------------------------------------------------\n// LOADING DISPLAY\n// -----------------------------------------------------------------------------\nexport const LoadingLabel = styled.span`\n    color: ${Colour[\"text-disabled\"]};\n`;\n\nexport const Spinner = styled(ComponentLoadingSpinner)`\n    margin-right: 0.5rem;\n    color: ${Colour[\"text-disabled\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// ERROR DISPLAY\n// -----------------------------------------------------------------------------\nexport const ErrorIcon = styled(ExclamationTriangleIcon)`\n    color: ${Colour[\"icon-warning\"]};\n    margin-right: 0.5rem;\n    height: ${Font.Spec[\"body-size-baseline\"]};\n    width: ${Font.Spec[\"body-size-baseline\"]};\n`;\n\nexport const ErrorLabel = styled.span`\n    color: ${Colour[\"text-warning\"]};\n`;\n\nexport const TryAgainLabel = styled.span`\n    ${Font[\"body-baseline-semibold\"]}\n    color: ${Colour[\"hyperlink\"]};\n    text-decoration: underline;\n    margin-left: 0.5rem;\n`;\n\nexport const StyledAlert = styled(Alert)`\n    margin-top: 0.5rem;\n`;\n"],"names":["Container","styled","li","props","$widthStyle","css","$fullWidth","MediaQuery","MaxWidth","lg","IconContainer","div","Colour","Font","Spec","Clickable","button","LoadingLabel","span","Spinner","ComponentLoadingSpinner","ErrorIcon","ExclamationTriangleIcon","ErrorLabel","TryAgainLabel","StyledAlert","Alert"],"mappings":"wVAkBO,MAAMA,EAAYC,EAAOC,EAAuB;;;;MAIhDC,IACC,OAAQA,EAAMC,aACV,IAAK,OACD,OAAOC,CAAG;+CACqBF,EAAMG,WAAa,EAAI;kBAE1D,IAAK,OACD,OAAOD,CAAG;+CACqBF,EAAMG,WAAa,EAAI;;;MAKhEC,EAAWC,SAASC;;;;;EAObC,EAAgBT,EAAOU,GAAG;;;;;aAK1BC,EAAO;;;;iBAIHC,EAAKC,KAAK;kBACTD,EAAKC,KAAK;;EAIfC,EAAYd,EAAOe,MAAM;MAChCH,EAAK;aACED,EAAa;;;;;;;;;;;;;;EAmBbK,EAAehB,EAAOiB,IAAI;aAC1BN,EAAO;EAGPO,EAAUlB,EAAOmB,EAAwB;;aAEzCR,EAAO;EAMPS,EAAYpB,EAAOqB,EAAwB;aAC3CV,EAAO;;cAENC,EAAKC,KAAK;aACXD,EAAKC,KAAK;EAGVS,EAAatB,EAAOiB,IAAI;aACxBN,EAAO;EAGPY,EAAgBvB,EAAOiB,IAAI;MAClCL,EAAK;aACED,EAAkB;;;EAKlBa,EAAcxB,EAAOyB,EAAM;;"}
+{"version":3,"file":"section-item.styles.js","sources":["../../src/uneditable-section/section-item.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, MediaQuery } from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const container = css`\n    display: flex;\n    flex-direction: column;\n    overflow-wrap: break-word;\n\n    &[data-width=\"half\"] {\n        grid-column: auto / span 4;\n\n        &[data-full-width=\"true\"] {\n            grid-column: auto / span 1;\n        }\n    }\n\n    &[data-width=\"full\"] {\n        grid-column: auto / span 8;\n\n        &[data-full-width=\"true\"] {\n            grid-column: auto / span 2;\n        }\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        &[data-width=\"half\"],\n        &[data-width=\"full\"] {\n            grid-column: 1 / -1;\n\n            &[data-full-width=\"true\"] {\n                grid-column: 1 / -1;\n            }\n        }\n    }\n`;\n\nexport const iconContainer = css`\n    display: flex;\n    height: 100%;\n    align-items: center;\n    justify-content: center;\n    color: ${Colour[\"icon-primary\"]};\n    margin-left: 0.5rem;\n\n    svg {\n        width: ${Font.Spec[\"body-size-baseline\"]};\n        height: ${Font.Spec[\"body-size-baseline\"]};\n    }\n`;\n\nexport const clickable = css`\n    ${Font[\"body-baseline-regular\"]}\n    color: ${Colour[\"text\"]};\n    border: none;\n    background: transparent;\n    padding: 0;\n    display: flex;\n    cursor: pointer;\n    align-items: center;\n    overflow-wrap: anywhere;\n    text-align: left;\n\n    span {\n        overflow-wrap: anywhere;\n        text-align: left;\n    }\n`;\n\n// -----------------------------------------------------------------------------\n// LOADING DISPLAY\n// -----------------------------------------------------------------------------\nexport const loadingLabel = css`\n    color: ${Colour[\"text-disabled\"]};\n`;\n\nexport const spinner = css`\n    margin-right: 0.5rem;\n    color: ${Colour[\"text-disabled\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// ERROR DISPLAY\n// -----------------------------------------------------------------------------\nexport const errorIcon = css`\n    color: ${Colour[\"icon-warning\"]};\n    margin-right: 0.5rem;\n    height: ${Font.Spec[\"body-size-baseline\"]};\n    width: ${Font.Spec[\"body-size-baseline\"]};\n`;\n\nexport const errorLabel = css`\n    color: ${Colour[\"text-warning\"]};\n`;\n\nexport const tryAgainLabel = css`\n    ${Font[\"body-baseline-semibold\"]}\n    color: ${Colour[\"hyperlink\"]};\n    text-decoration: underline;\n    margin-left: 0.5rem;\n`;\n\nexport const alert = css`\n    margin-top: 0.5rem;\n`;\n"],"names":["container","iconContainer","clickable","loadingLabel","spinner","errorIcon","errorLabel","tryAgainLabel","alert"],"mappings":"2EAOO,MAAMA,EAAS,UAiCTC,EAAa,UAcbC,EAAS,UAqBTC,EAAY,WAIZC,EAAO,WAQPC,EAAS,WAOTC,EAAU,WAIVC,EAAa,WAObC,EAAK"}

package/uneditable-section/section-item.styles_mwx8ht.css

@@ -0,0 +1,9 @@
+@layer fds{.cfqoxdt{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;overflow-wrap:break-word;}.cfqoxdt[data-width="half"]{grid-column:auto/span 4;}.cfqoxdt[data-width="half"][data-full-width="true"]{grid-column:auto/span 1;}.cfqoxdt[data-width="full"]{grid-column:auto/span 8;}.cfqoxdt[data-width="full"][data-full-width="true"]{grid-column:auto/span 2;}:where(body.fds-breakpoint-lg-max) .cfqoxdt[data-width="half"],:where(body.fds-breakpoint-lg-max) .cfqoxdt[data-width="full"]{-ms-grid-column:1/-1;grid-column:1/-1;}:where(body.fds-breakpoint-lg-max) .cfqoxdt[data-width="half"][data-full-width="true"],:where(body.fds-breakpoint-lg-max) .cfqoxdt[data-width="full"][data-full-width="true"]{-ms-grid-column:1/-1;grid-column:1/-1;}
+.i6tvpcl{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;color:var(--fds-colour-icon-primary);margin-left:0.5rem;}.i6tvpcl svg{width:var(--fds-font-body-size-baseline);height:var(--fds-font-body-size-baseline);}
+.c988p37{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text);border:none;background:transparent;padding:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;cursor:pointer;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-wrap:anywhere;text-align:left;}.c988p37 span{overflow-wrap:anywhere;text-align:left;}
+.l1fg6lie{color:var(--fds-colour-text-disabled);}
+.s186v6u4{margin-right:0.5rem;color:var(--fds-colour-text-disabled);}
+.e13rb6hl{color:var(--fds-colour-icon-warning);margin-right:0.5rem;height:var(--fds-font-body-size-baseline);width:var(--fds-font-body-size-baseline);}
+.e13pxbfu{color:var(--fds-colour-text-warning);}
+.t1dzpnph{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-hyperlink);-webkit-text-decoration:underline;text-decoration:underline;margin-left:0.5rem;}
+.a1celal9{margin-top:0.5rem;}}

package/uneditable-section/types.d.ts

@@ -1,63 +1,106 @@
-import React from "react";
-import { AlertProps } from "../alert";
-import { MaskAttributeProps } from "../masked-input";
+import type React from "react";
+import type { AlertProps } from "../alert";
+import type { MaskAttributeProps } from "../masked-input";
+/** Grid column span for an item within the section layout. */
 export type UneditableSectionItemDisplayWidth = "half" | "full";
+/** Whether the item value is currently masked or unmasked. */
 export type UneditableSectionItemMaskState = "masked" | "unmasked";
+/** Async loading state during a mask or unmask action. */
 export type UneditableSectionItemMaskLoadingState = "loading" | "fail";
+/**
+ * Props for the `UneditableSection.Item` sub-component.
+ */
 export interface UneditableSectionItemProps extends MaskAttributeProps {
     id?: string | undefined;
+    /** Field label shown above the item value. */
     label: string;
-    /** Note: masking is only available for string values */
+    /**
+     * The display value for the field.
+     *
+     * @remarks Masking is only available when `value` is a string.
+     */
     value: string | React.ReactNode;
-    /** The width that the item can span across. Values: "half", "full" */
-    displayWidth?: UneditableSectionItemDisplayWidth | undefined;
     /**
-     * Specifies if value is masked or unmasked.
-     * If undefined, no masking or unmasking controls will be rendered.
+     * Grid column span for the item within the section layout.
      *
-     * Values: "masked" | "unmasked"
+     * @default "full"
+     */
+    displayWidth?: UneditableSectionItemDisplayWidth | undefined;
+    /**
+     * Controls whether the value is masked or unmasked.
+     * When undefined, no mask or unmask controls are rendered.
      */
     maskState?: UneditableSectionItemMaskState | undefined;
     /**
-     * Specifies the state of the component when there is a
-     * loading behaviour from a mask/unmask action. If undefined
-     * the value will be rendered out.
-     *
-     * Values: "loading" | "fail"
+     * Async loading state during a mask or unmask action.
+     * When undefined, the resolved value is rendered directly.
      */
     maskLoadingState?: UneditableSectionItemMaskLoadingState | undefined;
-    /** If specified, one is unable to mask or unmask the value */
+    /** Prevents the user from toggling the mask or unmask control. */
     disableMaskUnmask?: boolean | undefined;
-    /** If specified, an Alert will be rendered below the item */
+    /** Alert rendered below the item value. */
     alert?: AlertProps | undefined;
 }
+/**
+ * Props for the `UneditableSection.ItemSection` sub-component.
+ */
 export interface UneditableSectionItemSectionProps extends React.HTMLAttributes<HTMLUListElement> {
-    /** Specifies if contents should take up the full width of the section */
+    /** Stretches every child item to fill the full width of the grid. */
     stretch?: boolean | undefined;
 }
+/**
+ * Props for the `UneditableSection` component.
+ */
 export interface UneditableSectionProps {
+    /** List of labeled read-only field items to render in a responsive grid. */
     items?: UneditableSectionItemProps[] | undefined;
+    /** Optional heading rendered above the items grid. */
     title?: string | undefined;
+    /** Optional description rendered below `title` and above the items grid. */
     description?: string | undefined;
-    /** A custom section at the top of the main uneditable items section */
+    /** Custom content rendered above the items grid, below `description`. */
     topSection?: JSX.Element | undefined;
-    /** A custom section at the bottom of the main uneditable items section */
+    /** Custom content rendered below the items grid. */
     bottomSection?: JSX.Element | undefined;
-    /** The body of the entire section */
+    /**
+     * Fully custom section body.
+     *
+     * @remarks When provided, `items`, `title`,`description`,
+     * `topSection`, and `bottomSection` are not rendered.
+     */
     children?: JSX.Element | JSX.Element[] | undefined;
     className?: string | undefined;
     "data-testid"?: string | undefined;
     id?: string | undefined;
-    /** If specified false, the background will be transparent. Else it is grey by default */
+    /**
+     * Applies a grey background to the section container.
+     * Set to `false` for a transparent background.
+     *
+     * @default true
+     */
     background?: boolean | undefined;
-    /** Specifies if contents should take up the full width of the section */
+    /** Stretches every item to fill the full column width of the grid. */
     stretch?: boolean | undefined;
-    /** If true, removes the default spacing and grid alignment based on `Layout.Content` */
+    /**
+     * When `true`, allows the section to span the full available width of its parent.
+     */
     fullWidth?: boolean | undefined;
-    /** The callback function when the mask icon is clicked */
+    /**
+     * Called when a mask control is activated on an item.
+     *
+     * @param item The item whose mask control was activated.
+     */
     onMask?: ((item: UneditableSectionItemProps) => void) | undefined;
-    /** The callback function when the unmask icon is clicked */
+    /**
+     * Called when an unmask control is activated on an item.
+     *
+     * @param item The item whose unmask control was activated.
+     */
     onUnmask?: ((item: UneditableSectionItemProps) => void) | undefined;
-    /** The callback function when the "Try again" button is clicked in error state */
+    /**
+     * Called when the retry button is clicked on an item in error state.
+     *
+     * @param item The item that encountered the mask/unmask error.
+     */
     onTryAgain?: ((item: UneditableSectionItemProps) => void) | undefined;
 }

package/uneditable-section/uneditable-section.d.ts

@@ -1,2 +1,3 @@
-import { UneditableSectionProps } from "./types";
-export declare const UneditableSectionBase: ({ items, title, description, topSection, bottomSection, children, background, stretch, fullWidth, onMask, onUnmask, onTryAgain, ...otherProps }: UneditableSectionProps) => import("react/jsx-runtime").JSX.Element;
+import React from "react";
+import type { UneditableSectionProps } from "./types";
+export declare const UneditableSectionBase: (props: UneditableSectionProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/uneditable-section/uneditable-section.js

@@ -1,2 +1,2 @@
-import{__rest as t}from"../_virtual/_tslib.js";import{jsx as n,jsxs as i,Fragment as e}from"react/jsx-runtime";import{UneditableSectionItem as r}from"./section-item.js";import{FullWidthWrapper as o,Wrapper as s,Title as c,Description as d,CustomSection as l,GridUl as a}from"./uneditable-section.styles.js";const h=h=>{var{items:m,title:u,description:b,topSection:g,bottomSection:p,children:f,background:k=!0,stretch:$,fullWidth:j,onMask:y,onUnmask:A,onTryAgain:S}=h,W=t(h,["items","title","description","topSection","bottomSection","children","background","stretch","fullWidth","onMask","onUnmask","onTryAgain"]);const M=t=>()=>{y&&y(t)},O=t=>()=>{A&&A(t)},T=t=>()=>{S&&S(t)},U=()=>{if(m&&m.length>0){const t=m.map(((t,i)=>n(r,Object.assign({},t,{onMask:M(t),onUnmask:O(t),onTryAgain:T(t),fullWidth:j}),i)));return n(a,{$stretch:$,$fullWidth:j,children:t})}return null},v=()=>f||i(e,{children:[u&&n(c,{forwardedAs:"h2",weight:"semibold",$stretch:$,children:u}),b&&n(d,{$stretch:$,children:b}),g&&n(l,{"data-id":"top-section",$stretch:$,children:g}),U(),p&&n(l,{"data-id":"bottom-section",$stretch:$,children:p})]});return j?n(o,Object.assign({$background:k},W,{children:v()})):n(s,Object.assign({$background:k},W,{type:"grid",children:v()}))};export{h as UneditableSectionBase};
+import{__rest as t}from"../_virtual/_tslib.js";import{jsx as e,jsxs as i,Fragment as n}from"react/jsx-runtime";import o from"clsx";import s from"react";import{Layout as r}from"../layout/index.js";import{Typography as a}from"../typography/index.js";import{UneditableSectionItem as c}from"./section-item.js";import{wrapperBackground as l,wrapper as m,title as d,columnWidthStretch as h,description as p,customSection as f,gridUl as u,gridUlFullWidth as g}from"./uneditable-section.styles.js";const b=s.forwardRef(((s,b)=>{var{items:y,title:N,description:j,topSection:k,bottomSection:S,children:v,background:x=!0,stretch:M,fullWidth:U,onMask:A,onUnmask:O,onTryAgain:T,className:W}=s,w=t(s,["items","title","description","topSection","bottomSection","children","background","stretch","fullWidth","onMask","onUnmask","onTryAgain","className"]);const B=t=>()=>{A&&A(t)},_=t=>()=>{O&&O(t)},C=t=>()=>{T&&T(t)},H=()=>{if(y&&y.length>0){const t=y.map(((t,i)=>e(c,Object.assign({},t,{onMask:B(t),onUnmask:_(t),onTryAgain:C(t),fullWidth:U}),i)));return e("ul",{className:o(u,M&&h,U&&g),children:t})}return null},L=()=>v||i(n,{children:[N&&e(a.HeadingSM,{as:"h2",weight:"semibold",className:o(d,M&&h),children:N}),j&&e(a.BodyBL,{className:o(p,M&&h),children:j}),k&&e("div",{"data-id":"top-section",className:o(f,M&&h),children:k}),H(),S&&e("div",{"data-id":"bottom-section",className:o(f,M&&h),children:S})]});return U?e("div",Object.assign({ref:b,className:o(x&&l,W)},w,{children:L()})):e(r.Content,Object.assign({ref:b,className:o(m,x&&l,W)},w,{type:"grid",children:L()}))}));b.displayName="UneditableSection";export{b as UneditableSectionBase};
 //# sourceMappingURL=uneditable-section.js.map

package/uneditable-section/uneditable-section.js.map

@@ -1 +1 @@
-{"version":3,"file":"uneditable-section.js","sources":["../../src/uneditable-section/uneditable-section.tsx"],"sourcesContent":["import { UneditableSectionItem } from \"./section-item\";\nimport { UneditableSectionItemProps, UneditableSectionProps } from \"./types\";\nimport {\n    CustomSection,\n    Description,\n    FullWidthWrapper,\n    GridUl,\n    Title,\n    Wrapper,\n} from \"./uneditable-section.styles\";\n\nexport const UneditableSectionBase = ({\n    items,\n    title,\n    description,\n    topSection,\n    bottomSection,\n    children,\n    background = true,\n    stretch,\n    fullWidth,\n    onMask,\n    onUnmask,\n    onTryAgain,\n    ...otherProps\n}: UneditableSectionProps) => {\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleItemMask = (item: UneditableSectionItemProps) => () => {\n        if (onMask) onMask(item);\n    };\n\n    const handleItemUnmask = (item: UneditableSectionItemProps) => () => {\n        if (onUnmask) onUnmask(item);\n    };\n\n    const handleTryAgain = (item: UneditableSectionItemProps) => () => {\n        if (onTryAgain) onTryAgain(item);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderItems = () => {\n        if (items && items.length > 0) {\n            const renderedItems = items.map((item, index) => {\n                return (\n                    <UneditableSectionItem\n                        key={index}\n                        {...item}\n                        onMask={handleItemMask(item)}\n                        onUnmask={handleItemUnmask(item)}\n                        onTryAgain={handleTryAgain(item)}\n                        fullWidth={fullWidth}\n                    />\n                );\n            });\n\n            return (\n                <GridUl $stretch={stretch} $fullWidth={fullWidth}>\n                    {renderedItems}\n                </GridUl>\n            );\n        }\n\n        return null;\n    };\n\n    const renderChildren = () => {\n        if (children) {\n            return children;\n        }\n\n        return (\n            <>\n                {title && (\n                    <Title\n                        forwardedAs=\"h2\"\n                        weight=\"semibold\"\n                        $stretch={stretch}\n                    >\n                        {title}\n                    </Title>\n                )}\n                {description && (\n                    <Description $stretch={stretch}>{description}</Description>\n                )}\n                {topSection && (\n                    <CustomSection data-id=\"top-section\" $stretch={stretch}>\n                        {topSection}\n                    </CustomSection>\n                )}\n                {renderItems()}\n                {bottomSection && (\n                    <CustomSection data-id=\"bottom-section\" $stretch={stretch}>\n                        {bottomSection}\n                    </CustomSection>\n                )}\n            </>\n        );\n    };\n\n    if (fullWidth) {\n        return (\n            <FullWidthWrapper $background={background} {...otherProps}>\n                {renderChildren()}\n            </FullWidthWrapper>\n        );\n    }\n    return (\n        <Wrapper $background={background} {...otherProps} type=\"grid\">\n            {renderChildren()}\n        </Wrapper>\n    );\n};\n"],"names":["UneditableSectionBase","_a","items","title","description","topSection","bottomSection","children","background","stretch","fullWidth","onMask","onUnmask","onTryAgain","otherProps","__rest","handleItemMask","item","handleItemUnmask","handleTryAgain","renderItems","length","renderedItems","map","index","_jsx","UneditableSectionItem","Object","assign","GridUl","$stretch","$fullWidth","renderChildren","_jsxs","_Fragment","Title","forwardedAs","weight","Description","CustomSection","FullWidthWrapper","$background","Wrapper","type"],"mappings":"mTAWO,MAAMA,EAAyBC,IAAA,IAAAC,MAClCA,EAAKC,MACLA,EAAKC,YACLA,EAAWC,WACXA,EAAUC,cACVA,EAAaC,SACbA,EAAQC,WACRA,GAAa,EAAIC,QACjBA,EAAOC,UACPA,EAASC,OACTA,EAAMC,SACNA,EAAQC,WACRA,GAAUZ,EACPa,EAAUC,EAAAd,EAbqB,6IAkBlC,MAAMe,EAAkBC,GAAqC,KACrDN,GAAQA,EAAOM,EAAK,EAGtBC,EAAoBD,GAAqC,KACvDL,GAAUA,EAASK,EAAK,EAG1BE,EAAkBF,GAAqC,KACrDJ,GAAYA,EAAWI,EAAK,EAM9BG,EAAc,KAChB,GAAIlB,GAASA,EAAMmB,OAAS,EAAG,CAC3B,MAAMC,EAAgBpB,EAAMqB,KAAI,CAACN,EAAMO,IAE/BC,EAACC,EAAqBC,OAAAC,OAAA,GAEdX,EAAI,CACRN,OAAQK,EAAeC,GACvBL,SAAUM,EAAiBD,GAC3BJ,WAAYM,EAAeF,GAC3BP,UAAWA,IALNc,KAUjB,OACIC,EAACI,EAAM,CAAAC,SAAWrB,EAAOsB,WAAcrB,EAASH,SAC3Ce,GAGb,CAEA,OAAO,IAAI,EAGTU,EAAiB,IACfzB,GAKA0B,EAAAC,EAAA,CAAA3B,SAAA,CACKJ,GACGsB,EAACU,EAAK,CACFC,YAAY,KACZC,OAAO,WAAUP,SACPrB,EAAOF,SAEhBJ,IAGRC,GACGqB,EAACa,EAAW,CAAAR,SAAWrB,EAAOF,SAAGH,IAEpCC,GACGoB,EAACc,EAAa,CAAA,UAAS,cAAaT,SAAWrB,EAAOF,SACjDF,IAGRe,IACAd,GACGmB,EAACc,aAAsB,iBAAgBT,SAAWrB,EAAOF,SACpDD,OAOrB,OAAII,EAEIe,EAACe,EAAgBb,OAAAC,OAAA,CAAAa,YAAcjC,GAAgBM,EAAU,CAAAP,SACpDyB,OAKTP,EAACiB,EAAOf,OAAAC,OAAA,CAAAa,YAAcjC,GAAgBM,EAAU,CAAE6B,KAAK,OAAMpC,SACxDyB,MACK"}
+{"version":3,"file":"uneditable-section.js","sources":["../../src/uneditable-section/uneditable-section.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type { NamedExoticComponent } from \"react\";\nimport React from \"react\";\n\nimport { Layout } from \"../layout\";\nimport { Typography } from \"../typography\";\nimport { UneditableSectionItem } from \"./section-item\";\nimport type {\n    UneditableSectionItemProps,\n    UneditableSectionProps,\n} from \"./types\";\nimport * as styles from \"./uneditable-section.styles\";\n\nconst Component = (\n    {\n        items,\n        title,\n        description,\n        topSection,\n        bottomSection,\n        children,\n        background = true,\n        stretch,\n        fullWidth,\n        onMask,\n        onUnmask,\n        onTryAgain,\n        className,\n        ...otherProps\n    }: UneditableSectionProps,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleItemMask = (item: UneditableSectionItemProps) => () => {\n        if (onMask) onMask(item);\n    };\n\n    const handleItemUnmask = (item: UneditableSectionItemProps) => () => {\n        if (onUnmask) onUnmask(item);\n    };\n\n    const handleTryAgain = (item: UneditableSectionItemProps) => () => {\n        if (onTryAgain) onTryAgain(item);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderItems = () => {\n        if (items && items.length > 0) {\n            const renderedItems = items.map((item, index) => {\n                return (\n                    <UneditableSectionItem\n                        key={index}\n                        {...item}\n                        onMask={handleItemMask(item)}\n                        onUnmask={handleItemUnmask(item)}\n                        onTryAgain={handleTryAgain(item)}\n                        fullWidth={fullWidth}\n                    />\n                );\n            });\n\n            return (\n                <ul\n                    className={clsx(\n                        styles.gridUl,\n                        stretch && styles.columnWidthStretch,\n                        fullWidth && styles.gridUlFullWidth\n                    )}\n                >\n                    {renderedItems}\n                </ul>\n            );\n        }\n\n        return null;\n    };\n\n    const renderChildren = () => {\n        if (children) {\n            return children;\n        }\n\n        return (\n            <>\n                {title && (\n                    <Typography.HeadingSM\n                        as=\"h2\"\n                        weight=\"semibold\"\n                        className={clsx(\n                            styles.title,\n                            stretch && styles.columnWidthStretch\n                        )}\n                    >\n                        {title}\n                    </Typography.HeadingSM>\n                )}\n                {description && (\n                    <Typography.BodyBL\n                        className={clsx(\n                            styles.description,\n                            stretch && styles.columnWidthStretch\n                        )}\n                    >\n                        {description}\n                    </Typography.BodyBL>\n                )}\n                {topSection && (\n                    <div\n                        data-id=\"top-section\"\n                        className={clsx(\n                            styles.customSection,\n                            stretch && styles.columnWidthStretch\n                        )}\n                    >\n                        {topSection}\n                    </div>\n                )}\n                {renderItems()}\n                {bottomSection && (\n                    <div\n                        data-id=\"bottom-section\"\n                        className={clsx(\n                            styles.customSection,\n                            stretch && styles.columnWidthStretch\n                        )}\n                    >\n                        {bottomSection}\n                    </div>\n                )}\n            </>\n        );\n    };\n\n    if (fullWidth) {\n        return (\n            <div\n                ref={ref}\n                className={clsx(\n                    background && styles.wrapperBackground,\n                    className\n                )}\n                {...otherProps}\n            >\n                {renderChildren()}\n            </div>\n        );\n    }\n    return (\n        <Layout.Content\n            ref={ref}\n            className={clsx(\n                styles.wrapper,\n                background && styles.wrapperBackground,\n                className\n            )}\n            {...otherProps}\n            type=\"grid\"\n        >\n            {renderChildren()}\n        </Layout.Content>\n    );\n};\n\nexport const UneditableSectionBase = React.forwardRef(Component);\n\n(UneditableSectionBase as NamedExoticComponent).displayName =\n    \"UneditableSection\";\n"],"names":["UneditableSectionBase","React","forwardRef","_a","ref","items","title","description","topSection","bottomSection","children","background","stretch","fullWidth","onMask","onUnmask","onTryAgain","className","otherProps","__rest","handleItemMask","item","handleItemUnmask","handleTryAgain","renderItems","length","renderedItems","map","index","_jsx","UneditableSectionItem","Object","assign","clsx","styles.gridUl","styles.columnWidthStretch","styles.gridUlFullWidth","renderChildren","_jsxs","_Fragment","Typography","HeadingSM","as","weight","styles.title","BodyBL","styles.description","styles.customSection","styles.wrapperBackground","Layout","Content","styles.wrapper","type","displayName"],"mappings":"0eAaA,MA0JaA,EAAwBC,EAAMC,YA1JzB,CACdC,EAgBAC,KAhBA,IAAAC,MACIA,EAAKC,MACLA,EAAKC,YACLA,EAAWC,WACXA,EAAUC,cACVA,EAAaC,SACbA,EAAQC,WACRA,GAAa,EAAIC,QACjBA,EAAOC,UACPA,EAASC,OACTA,EAAMC,SACNA,EAAQC,WACRA,EAAUC,UACVA,GAASd,EACNe,EAAUC,EAAAhB,EAdjB,yJAqBA,MAAMiB,EAAkBC,GAAqC,KACrDP,GAAQA,EAAOO,EAAK,EAGtBC,EAAoBD,GAAqC,KACvDN,GAAUA,EAASM,EAAK,EAG1BE,EAAkBF,GAAqC,KACrDL,GAAYA,EAAWK,EAAK,EAM9BG,EAAc,KAChB,GAAInB,GAASA,EAAMoB,OAAS,EAAG,CAC3B,MAAMC,EAAgBrB,EAAMsB,KAAI,CAACN,EAAMO,IAE/BC,EAACC,EAAqBC,OAAAC,OAAA,GAEdX,EAAI,CACRP,OAAQM,EAAeC,GACvBN,SAAUO,EAAiBD,GAC3BL,WAAYO,EAAeF,GAC3BR,UAAWA,IALNe,KAUjB,OACIC,EAAA,KAAA,CACIZ,UAAWgB,EACPC,EACAtB,GAAWuB,EACXtB,GAAauB,GAChB1B,SAEAgB,GAGb,CAEA,OAAO,IAAI,EAGTW,EAAiB,IACf3B,GAKA4B,EAAAC,EAAA,CAAA7B,SAAA,CACKJ,GACGuB,EAACW,EAAWC,UAAS,CACjBC,GAAG,KACHC,OAAO,WACP1B,UAAWgB,EACPW,EACAhC,GAAWuB,GACdzB,SAEAJ,IAGRC,GACGsB,EAACW,EAAWK,OAAM,CACd5B,UAAWgB,EACPa,EACAlC,GAAWuB,YAGd5B,IAGRC,GACGqB,EAAA,MAAA,CAAA,UACY,cACRZ,UAAWgB,EACPc,EACAnC,GAAWuB,GACdzB,SAEAF,IAGRgB,IACAf,GACGoB,EAAA,MAAA,CAAA,UACY,iBACRZ,UAAWgB,EACPc,EACAnC,GAAWuB,GACdzB,SAEAD,OAOrB,OAAII,EAEIgB,EAAA,MAAAE,OAAAC,OAAA,CACI5B,IAAKA,EACLa,UAAWgB,EACPtB,GAAcqC,EACd/B,IAEAC,EAAU,CAAAR,SAEb2B,OAKTR,EAACoB,EAAOC,uBACJ9C,IAAKA,EACLa,UAAWgB,EACPkB,EACAxC,GAAcqC,EACd/B,IAEAC,EAAU,CACdkC,KAAK,OAAM1C,SAEV2B,MACY,IAMxBrC,EAA+CqD,YAC5C"}

package/uneditable-section/uneditable-section.styles.d.ts

@@ -1,36 +1,8 @@
-interface WrapperStyleProps {
-    $background: boolean;
-}
-interface ContentStyleProps {
-    $stretch: boolean | undefined;
-}
-interface GridStyleProps extends ContentStyleProps {
-    $fullWidth?: boolean | undefined;
-}
-export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("..").ContentProps & import("react").RefAttributes<HTMLDivElement>, "$background"> & WrapperStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("..").ContentProps & import("react").RefAttributes<HTMLDivElement>, "$background"> & WrapperStyleProps, never>>> & string & Omit<(props: import("..").ContentProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const FullWidthWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$background"> & WrapperStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$background"> & WrapperStyleProps, never>>> & string;
-export declare const Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLHeadingElement> | undefined;
-} & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, "$stretch"> & ContentStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLHeadingElement> | undefined;
-} & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, "$stretch"> & ContentStyleProps, never>>> & string;
-export declare const Description: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-} & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, "$stretch"> & ContentStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-} & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, "$stretch"> & ContentStyleProps, never>>> & string;
-export declare const CustomSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$stretch"> & ContentStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$stretch"> & ContentStyleProps, never>>> & string;
-export declare const GridUl: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, keyof GridStyleProps> & GridStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, keyof GridStyleProps> & GridStyleProps, never>>> & string;
-export {};
+export declare const columnWidthStretch: import("@linaria/core").LinariaClassName;
+export declare const wrapper: import("@linaria/core").LinariaClassName;
+export declare const wrapperBackground: import("@linaria/core").LinariaClassName;
+export declare const title: import("@linaria/core").LinariaClassName;
+export declare const description: import("@linaria/core").LinariaClassName;
+export declare const customSection: import("@linaria/core").LinariaClassName;
+export declare const gridUl: import("@linaria/core").LinariaClassName;
+export declare const gridUlFullWidth: import("@linaria/core").LinariaClassName;

package/uneditable-section/uneditable-section.styles.js

@@ -1,40 +1,2 @@
-import r,{css as t}from"styled-components";import{Layout as o}from"../layout/index.js";import{MediaQuery as m,Colour as n}from"../theme/index.js";import{Typography as a}from"../typography/typography.js";const e=t`
-    grid-column: ${r=>r.$stretch?"1 / -1":"span 8"};
-
-    ${m.MaxWidth.sm} {
-        grid-column: 1 / -1;
-    }
-`,i=r(o.Content)`
-    background: ${({$background:r})=>r?n["bg-strong"]:"transparent"};
-    padding-top: 2rem;
-    padding-bottom: 2rem;
-`,d=r.div`
-    background: ${({$background:r})=>r?n["bg-strong"]:"transparent"};
-`,g=r(a.HeadingSM)`
-    margin-bottom: 1rem;
-    ${e}
-`,p=r(a.BodyBL)`
-    margin-bottom: 2rem;
-    ${e}
-`,s=r.div`
-    ${e}
-`,l=r.ul`
-    ${e}
-    column-gap: 2rem;
-    row-gap: 2rem;
-    display: grid;
-    grid-template-columns: ${({$fullWidth:r})=>r?"repeat(2, minmax(0, 1fr))":"repeat(8, minmax(0, 1fr))"};
-
-    ${m.MaxWidth.lg} {
-        column-gap: 1.5rem;
-    }
-
-    ${m.MaxWidth.sm} {
-        column-gap: 1rem;
-    }
-
-    &:not(:last-child) {
-        margin-bottom: 2rem;
-    }
-`;export{s as CustomSection,p as Description,d as FullWidthWrapper,l as GridUl,g as Title,i as Wrapper};
+import"./uneditable-section.styles_aj9zun.css";const t="cd0nwth",c="wbsp4gm",e="w3q0cqh",s="t29kg6u",n="dkpvxbb",o="ctukz41",u="g11duom5",b="gc97tp4";export{t as columnWidthStretch,o as customSection,n as description,u as gridUl,b as gridUlFullWidth,s as title,c as wrapper,e as wrapperBackground};
 //# sourceMappingURL=uneditable-section.styles.js.map

package/uneditable-section/uneditable-section.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"uneditable-section.styles.js","sources":["../../src/uneditable-section/uneditable-section.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { Layout } from \"../layout\";\nimport { Colour, MediaQuery } from \"../theme\";\nimport { Typography } from \"../typography\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ninterface WrapperStyleProps {\n    $background: boolean;\n}\n\ninterface ContentStyleProps {\n    $stretch: boolean | undefined;\n}\n\ninterface GridStyleProps extends ContentStyleProps {\n    $fullWidth?: boolean | undefined;\n}\n// =============================================================================\n// STYLING\n// =============================================================================\nconst columnWidthStyle = css<ContentStyleProps>`\n    grid-column: ${(props) => (props.$stretch ? \"1 / -1\" : \"span 8\")};\n\n    ${MediaQuery.MaxWidth.sm} {\n        grid-column: 1 / -1;\n    }\n`;\n\nexport const Wrapper = styled(Layout.Content)<WrapperStyleProps>`\n    background: ${({ $background }) =>\n        $background ? Colour[\"bg-strong\"] : \"transparent\"};\n    padding-top: 2rem;\n    padding-bottom: 2rem;\n`;\n\nexport const FullWidthWrapper = styled.div<WrapperStyleProps>`\n    background: ${({ $background }) =>\n        $background ? Colour[\"bg-strong\"] : \"transparent\"};\n`;\n\nexport const Title = styled(Typography.HeadingSM)<ContentStyleProps>`\n    margin-bottom: 1rem;\n    ${columnWidthStyle}\n`;\n\nexport const Description = styled(Typography.BodyBL)<ContentStyleProps>`\n    margin-bottom: 2rem;\n    ${columnWidthStyle}\n`;\n\nexport const CustomSection = styled.div<ContentStyleProps>`\n    ${columnWidthStyle}\n`;\n\nexport const GridUl = styled.ul<GridStyleProps>`\n    ${columnWidthStyle}\n    column-gap: 2rem;\n    row-gap: 2rem;\n    display: grid;\n    grid-template-columns: ${({ $fullWidth }) =>\n        $fullWidth ? \"repeat(2, minmax(0, 1fr))\" : \"repeat(8, minmax(0, 1fr))\"};\n\n    ${MediaQuery.MaxWidth.lg} {\n        column-gap: 1.5rem;\n    }\n\n    ${MediaQuery.MaxWidth.sm} {\n        column-gap: 1rem;\n    }\n\n    &:not(:last-child) {\n        margin-bottom: 2rem;\n    }\n`;\n"],"names":["columnWidthStyle","css","props","$stretch","MediaQuery","MaxWidth","sm","Wrapper","styled","Layout","Content","$background","Colour","FullWidthWrapper","div","Title","Typography","HeadingSM","Description","BodyBL","CustomSection","GridUl","ul","$fullWidth","lg"],"mappings":"2MAsBA,MAAMA,EAAmBC,CAAsB;mBAC3BC,GAAWA,EAAMC,SAAW,SAAW;;MAErDC,EAAWC,SAASC;;;EAKbC,EAAUC,EAAOC,EAAOC,QAA2B;kBAC9C,EAAGC,iBACbA,EAAcC,EAAO,aAAe;;;EAK/BC,EAAmBL,EAAOM,GAAsB;kBAC3C,EAAGH,iBACbA,EAAcC,EAAO,aAAe;EAG/BG,EAAQP,EAAOQ,EAAWC,UAA6B;;MAE9DjB;EAGOkB,EAAcV,EAAOQ,EAAWG,OAA0B;;MAEjEnB;EAGOoB,EAAgBZ,EAAOM,GAAsB;MACpDd;EAGOqB,EAASb,EAAOc,EAAkB;MACzCtB;;;;6BAIuB,EAAGuB,gBACxBA,EAAa,4BAA8B;;MAE7CnB,EAAWC,SAASmB;;;;MAIpBpB,EAAWC,SAASC;;;;;;;"}
+{"version":3,"file":"uneditable-section.styles.js","sources":["../../src/uneditable-section/uneditable-section.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, MediaQuery } from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nconst columnWidthBase = `\n    grid-column: span 8;\n\n    ${MediaQuery.MaxWidth.sm} {\n        grid-column: 1 / -1;\n    }\n`;\n\nexport const columnWidthStretch = css`\n    grid-column: 1 / -1;\n`;\n\nexport const wrapper = css`\n    padding-top: 2rem;\n    padding-bottom: 2rem;\n`;\n\nexport const wrapperBackground = css`\n    background: ${Colour[\"bg-strong\"]};\n`;\n\nexport const title = css`\n    margin-bottom: 1rem;\n    ${columnWidthBase}\n`;\n\nexport const description = css`\n    margin-bottom: 2rem;\n    ${columnWidthBase}\n`;\n\nexport const customSection = css`\n    ${columnWidthBase}\n`;\n\nexport const gridUl = css`\n    ${columnWidthBase}\n    column-gap: 2rem;\n    row-gap: 2rem;\n    display: grid;\n    grid-template-columns: repeat(8, minmax(0, 1fr));\n\n    ${MediaQuery.MaxWidth.lg} {\n        column-gap: 1.5rem;\n    }\n\n    ${MediaQuery.MaxWidth.sm} {\n        column-gap: 1rem;\n    }\n\n    &:not(:last-child) {\n        margin-bottom: 2rem;\n    }\n`;\n\nexport const gridUlFullWidth = css`\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n\n    ${MediaQuery.MaxWidth.sm} {\n        grid-template-columns: repeat(1, minmax(0, 1fr));\n    }\n`;\n"],"names":["columnWidthStretch","wrapper","wrapperBackground","title","description","customSection","gridUl","gridUlFullWidth"],"mappings":"iFAeO,MAAMA,EAAkB,UAIlBC,EAAO,UAKPC,EAAiB,UAIjBC,EAAK,UAKLC,EAAW,UAKXC,EAAa,UAIbC,EAAM,WAoBNC,EAAe"}

package/uneditable-section/uneditable-section.styles_aj9zun.css

@@ -0,0 +1,8 @@
+@layer fds{.cd0nwth{-ms-grid-column:1/-1;grid-column:1/-1;}
+.wbsp4gm{padding-top:2rem;padding-bottom:2rem;}
+.w3q0cqh{background:var(--fds-colour-bg-strong);}
+.t29kg6u{margin-bottom:1rem;grid-column:span 8;}:where(body.fds-breakpoint-sm-max) .t29kg6u{-ms-grid-column:1/-1;grid-column:1/-1;}
+.dkpvxbb{margin-bottom:2rem;grid-column:span 8;}:where(body.fds-breakpoint-sm-max) .dkpvxbb{-ms-grid-column:1/-1;grid-column:1/-1;}
+.ctukz41{grid-column:span 8;}:where(body.fds-breakpoint-sm-max) .ctukz41{-ms-grid-column:1/-1;grid-column:1/-1;}
+.g11duom5{grid-column:span 8;-webkit-column-gap:2rem;column-gap:2rem;row-gap:2rem;display:-ms-grid;display:grid;-ms-grid-columns:repeat(8, minmax(0, 1fr));grid-template-columns:repeat(8, minmax(0, 1fr));}:where(body.fds-breakpoint-sm-max) .g11duom5{-ms-grid-column:1/-1;grid-column:1/-1;}:where(body.fds-breakpoint-lg-max) .g11duom5{-webkit-column-gap:1.5rem;column-gap:1.5rem;}:where(body.fds-breakpoint-sm-max) .g11duom5{-webkit-column-gap:1rem;column-gap:1rem;}.g11duom5:not(:last-child){margin-bottom:2rem;}
+.gc97tp4{-ms-grid-columns:repeat(2, minmax(0, 1fr));grid-template-columns:repeat(2, minmax(0, 1fr));}:where(body.fds-breakpoint-sm-max) .gc97tp4{-ms-grid-columns:repeat(1, minmax(0, 1fr));grid-template-columns:repeat(1, minmax(0, 1fr));}}

package/unit-number/index.d.ts

@@ -1,2 +1,2 @@
-export * from "./unit-number-input";
 export * from "./types";
+export * from "./unit-number-input";

package/unit-number/types.d.ts

@@ -1,3 +1,6 @@
+/**
+ * Props for `UnitNumberInput`.
+ */
 export interface UnitNumberInputProps extends React.AriaAttributes {
     className?: string | undefined;
     id?: string | undefined;
@@ -5,23 +8,46 @@ export interface UnitNumberInputProps extends React.AriaAttributes {
     tabIndex?: number | undefined;
     "data-testid"?: string | undefined;
     readOnly?: boolean | undefined;
+    /**
+     * Placeholder text in `"floor-unit"` format.
+     *
+     * @default "00-8888"
+     */
     placeholder?: string | undefined;
     role?: React.AriaRole | undefined;
+    /**
+     * The combined unit number value in `"floor-unit"` format (e.g. `"01-234"`).
+     */
     value?: string | undefined;
     name?: string | undefined;
+    /** Renders the input in an error state. */
     error?: boolean | undefined;
     disabled?: boolean | undefined;
     autoComplete?: string | undefined;
+    /**
+     * Called when the value of either sub-input changes.
+     *
+     * @param value The combined value in `"floor-unit"` format, an empty string when
+     * both fields are empty, or `"Invalid unit number"` when only one field is filled.
+     */
     onChange?: ((value: string) => void) | undefined;
     /**
-     * Function that returns the raw values in the UnitNumberInput on change in an array format
-     * as such [floor, unit]
+     * Called when either sub-input changes.
+     *
+     * @param value The raw individual field values as `[floor, unit]`.
      */
     onChangeRaw?: ((value: string[]) => void) | undefined;
+    /**
+     * Called when focus leaves the component entirely.
+     *
+     * @param value The combined value in `"floor-unit"` format, an empty string when
+     * both fields are empty, or `"Invalid unit number"` when only one field is filled.
+     */
     onBlur?: ((value: string) => void) | undefined;
     /**
-     * Function that returns the raw values in the UnitNumberInput on blur in an array format
-     * as such [floor, unit]
+     * Called when focus leaves the component.
+     *
+     * @param value The raw individual field values as `[floor, unit]`.
      */
     onBlurRaw?: ((value: string[]) => void) | undefined;
 }

package/unit-number/unit-number-input.d.ts

@@ -1,2 +1,9 @@
-import { UnitNumberInputProps } from "./types";
-export declare const UnitNumberInput: ({ disabled, error, value, onChange, onBlur, onChangeRaw, onBlurRaw, readOnly, placeholder, autoComplete, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, ...otherProps }: UnitNumberInputProps) => import("react/jsx-runtime").JSX.Element;
+import type { UnitNumberInputProps } from "./types";
+/**
+ * A two-field input for entering Singapore-style unit numbers in `floor-unit` format.
+ *
+ * Use `UnitNumberInput` when you need a structured unit number entry that splits
+ * floor and unit into separate fields.
+ * @keywords address, field, floor, form, input, unit
+ */
+export declare const UnitNumberInput: ({ disabled, error, value, onChange, onBlur, onChangeRaw, onBlurRaw, readOnly, placeholder, autoComplete, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, className, ...otherProps }: UnitNumberInputProps) => import("react/jsx-runtime").JSX.Element;

package/unit-number/unit-number-input.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as r,jsx as t,Fragment as n}from"react/jsx-runtime";import{useState as a,useRef as i,useMemo as o,useEffect as l}from"react";import{VisuallyHidden as u,concatIds as d}from"../shared/accessibility/index.js";import{InputWrapper as s}from"../shared/input-wrapper/input-wrapper.js";import"../util/calendar-helper.js";import"../util/date-helper.js";import"../util/date-input-helper.js";import{useId as c}from"../util/simple-id-generator.js";import{StringHelper as p}from"../util/string-helper.js";import"@react-aria/live-announcer";import{useNextInputState as f}from"../util/use-next-input-state.js";import{HashContainer as h,ReadOnlyContainer as m,ReadOnlyLabel as b,UnitNumberDivider as y,FloorInput as g,UnitInput as v}from"./unit-number-input.style.js";const j=j=>{var{disabled:x,error:$,value:B,onChange:w,onBlur:O,onChangeRaw:k,onBlurRaw:A,readOnly:L,placeholder:R="00-8888",autoComplete:D,"aria-labelledby":I,"aria-describedby":T,"aria-invalid":V}=j,Z=e(j,["disabled","error","value","onChange","onBlur","onChangeRaw","onBlurRaw","readOnly","placeholder","autoComplete","aria-labelledby","aria-describedby","aria-invalid"]);const[E,F]=a(""),[H,P]=a(""),[U,_]=a("none"),z=c(),K=`${z}-floor-label`,q=`${z}-unit-label`,G=`${z}-live-message`,J=i(null),M=i(null),N=i(null),Q=i(E),S=i(H),W=i(U),X=e=>e.toLocaleUpperCase().replace(/[^0-9A-Za-z]/g,""),Y=f({ref:M,formatter:X}),ee=f({ref:N,formatter:X}),re=o((()=>{let e="";const r=me("Hash",E),t=me("Dash",H);switch(U){case"floor":e=r;break;case"unit":e=E?[r,t].join(" "):t;break;default:e=""}return e}),[U,E,H]),te=e=>{Q.current=e,F(e)},ne=e=>{S.current=e,P(e)},ae=e=>{W.current=e,_(e)};l((()=>{"floor"===U&&3===E.length&&N.current&&N.current.focus()}),[E]),l((()=>{se(B)}),[B]);const ie=e=>{ae(e.target.name),e.target.select()},oe=e=>{const r=e.target.name,t=e.target.value,n=de(t);"floor"===r?(te(n),n!==E&&ce(n,r)):"unit"===r&&(ne(n),n!==H&&ce(n,r))},le=e=>{const r=e.target.name;if("floor"===r){const e=Y();if(!e)return;const{nextValue:t,updateCaretPosition:n}=e;n(),te(t),ce(t,r)}else if("unit"===r){const e=ee();if(!e)return;const{nextValue:t,updateCaretPosition:n}=e;n(),ne(t),ce(t,r)}},ue=e=>{var r;"Backspace"!==e.code&&"Backspace"!==e.key||"unit"===U&&0===H.length&&(null===(r=M.current)||void 0===r||r.focus())},de=e=>/^[0-9]$/.test(e)?p.padValue(e,!0):e.toLocaleUpperCase(),se=e=>{if(e!==C)if(void 0===e||0===e.length)te(""),ne("");else{const r=e.split("-");if(2===r.length){const e=r[0],t=r[1];te("floor"===U?e:de(e)),ne("unit"===U?t:de(t))}}},ce=(e,r)=>{if(!w&&!k)return;const t={floor:Q.current,unit:S.current};if(t[r]=e,w){const e=fe(t);w(e)}k&&k([t.floor,t.unit])},pe=()=>{if(!O&&!A)return;const e={floor:de(Q.current),unit:de(S.current)};if(O){const r=fe(e);O(r)}A&&A([e.floor,e.unit])},fe=e=>{const r=[e.floor,e.unit];return e.floor.length>0&&e.unit.length>0?r.join("-"):r.every((e=>""===e))?"":C},he=e=>e.split("-");function me(e,r){return r?`${e} ${Array.from(r).join(" ")}`:""}return r(s,Object.assign({},Z,{ref:J,onClick:()=>{"none"===U&&M.current&&M.current.focus()},$disabled:x,$error:$,$readOnly:L,tabIndex:-1,onBlur:e=>{J.current&&J.current.contains(e.relatedTarget)||"none"!==W.current&&(ae("none"),pe())},children:[t(h,{"data-testid":"addon",$disabled:x,$readOnly:L,children:"#"}),L&&B?(e=>{const n=e.split("-"),a=[me("Hash",n[0]),me("Dash",n[1])].join(" ");return r(m,{"data-testid":"readonly-display",tabIndex:0,role:"textbox","aria-readonly":!0,"aria-labelledby":I,"aria-describedby":T,"aria-invalid":V,children:[t(b,{children:n[0]}),t(y,{children:"-"}),t(b,{children:n[1]}),t(u,{children:a})]})})(B):r(n,{children:[t(g,{name:"floor",maxLength:3,value:E,ref:M,onFocus:ie,onBlur:oe,onChange:le,disabled:x,readOnly:L,type:"text",pattern:"[0-9A-Z]{2,3}","data-testid":"floor-input","aria-labelledby":d(I,K),"aria-describedby":d(T,G),"aria-invalid":V,placeholder:"floor"!==U||L||x?he(R)[0]:"",autoComplete:D,styleType:"no-border"}),t(u,{"aria-hidden":!0,id:K,children:"Enter floor number"}),t(y,{$inactive:0===E.length,children:"-"}),t(v,{name:"unit",maxLength:5,value:H,ref:N,onFocus:ie,onBlur:oe,onChange:le,onKeyDown:ue,disabled:x,readOnly:L,type:"text",pattern:"[0-9A-Z]{2,5}","data-testid":"unit-input","aria-labelledby":d(I,q),"aria-describedby":d(T,G),"aria-invalid":V,placeholder:"unit"!==U||L||x?he(R)[1]:"",autoComplete:D,styleType:"no-border"}),t(u,{"aria-hidden":!0,id:q,children:"Enter unit number"}),t(u,{id:G,"aria-live":"polite",children:re})]})]}))},C="Invalid unit number";export{j as UnitNumberInput};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as r,jsx as t,Fragment as a}from"react/jsx-runtime";import n from"clsx";import{useState as o,useRef as i,useMemo as l,useEffect as s}from"react";import{Input as d}from"../input/input.js";import{labelAddonContainer as u}from"../input-group/input-group.styles.js";import{VisuallyHidden as c,concatIds as p}from"../shared/accessibility/index.js";import{InputWrapper as m}from"../shared/input-wrapper/input-wrapper.js";import{Typography as f}from"../typography/index.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as h}from"../util/simple-id-generator.js";import{StringHelper as b}from"../util/string-helper.js";import"@react-aria/live-announcer";import{useNextInputState as y}from"../util/use-next-input-state.js";import{hashContainer as g,readOnlyContainer as v,unitNumberDivider as j,input as x,floorInput as B,unitNumberDividerInactive as C,unitInput as N}from"./unit-number-input.styles.js";const w=w=>{var{disabled:k,error:O,value:$,onChange:A,onBlur:R,onChangeRaw:D,onBlurRaw:I,readOnly:T,placeholder:V="00-8888",autoComplete:Z,"aria-labelledby":E,"aria-describedby":F,"aria-invalid":H,className:P}=w,U=e(w,["disabled","error","value","onChange","onBlur","onChangeRaw","onBlurRaw","readOnly","placeholder","autoComplete","aria-labelledby","aria-describedby","aria-invalid","className"]);const[_,z]=o(""),[K,q]=o(""),[G,J]=o("none"),M=h(),Q=`${M}-floor-label`,S=`${M}-unit-label`,W=`${M}-live-message`,X=i(null),Y=i(null),ee=i(null),re=i(_),te=i(K),ae=i(G),ne=e=>e.toLocaleUpperCase().replace(/[^0-9A-Za-z]/g,""),oe=y({ref:Y,formatter:ne}),ie=y({ref:ee,formatter:ne}),le=l((()=>{let e="";const r=xe("Hash",_),t=xe("Dash",K);switch(G){case"floor":e=r;break;case"unit":e=_?[r,t].join(" "):t;break;default:e=""}return e}),[G,_,K]),se=e=>{re.current=e,z(e)},de=e=>{te.current=e,q(e)},ue=e=>{ae.current=e,J(e)};s((()=>{"floor"===G&&3===_.length&&ee.current&&ee.current.focus()}),[_]),s((()=>{be($)}),[$]);const ce=e=>{ue(e.target.name),e.target.select()},pe=e=>{const r=e.target.name,t=e.target.value,a=he(t);"floor"===r?(se(a),a!==_&&ye(a,r)):"unit"===r&&(de(a),a!==K&&ye(a,r))},me=e=>{const r=e.target.name;if("floor"===r){const e=oe();if(!e)return;const{nextValue:t,updateCaretPosition:a}=e;a(),se(t),ye(t,r)}else if("unit"===r){const e=ie();if(!e)return;const{nextValue:t,updateCaretPosition:a}=e;a(),de(t),ye(t,r)}},fe=e=>{var r;"Backspace"!==e.code&&"Backspace"!==e.key||"unit"===G&&0===K.length&&(null===(r=Y.current)||void 0===r||r.focus())},he=e=>/^[0-9]$/.test(e)?b.padValue(e,!0):e.toLocaleUpperCase(),be=e=>{if(e!==L)if(void 0===e||0===e.length)se(""),de("");else{const r=e.split("-");if(2===r.length){const e=r[0],t=r[1];se("floor"===G?e:he(e)),de("unit"===G?t:he(t))}}},ye=(e,r)=>{if(!A&&!D)return;const t={floor:re.current,unit:te.current};if(t[r]=e,A){const e=ve(t);A(e)}D&&D([t.floor,t.unit])},ge=()=>{if(!R&&!I)return;const e={floor:he(re.current),unit:he(te.current)};if(R){const r=ve(e);R(r)}I&&I([e.floor,e.unit])},ve=e=>{const r=[e.floor,e.unit];return e.floor.length>0&&e.unit.length>0?r.join("-"):r.every((e=>""===e))?"":L},je=e=>e.split("-");function xe(e,r){return r?`${e} ${Array.from(r).join(" ")}`:""}return r(m,Object.assign({},U,{ref:X,onClick:()=>{"none"===G&&Y.current&&Y.current.focus()},disabled:k,error:O,readOnly:T,tabIndex:-1,onBlur:e=>{X.current&&X.current.contains(e.relatedTarget)||"none"!==ae.current&&(ue("none"),ge())},className:P,children:[t("div",{"data-testid":"addon",className:n(g,u),"data-disabled":k,"data-read-only":T,children:"#"}),T&&$?(e=>{const a=e.split("-"),n=[xe("Hash",a[0]),xe("Dash",a[1])].join(" ");return r("div",{"data-testid":"readonly-display",tabIndex:0,role:"textbox","aria-readonly":!0,"aria-labelledby":E,"aria-describedby":F,"aria-invalid":H,className:v,children:[t(f.BodyBL,{children:a[0]}),t(f.BodyBL,{className:j,children:"-"}),t(f.BodyBL,{children:a[1]}),t(c,{children:n})]})})($):r(a,{children:[t(d,{name:"floor",maxLength:3,value:_,ref:Y,onFocus:ce,onBlur:pe,onChange:me,disabled:k,readOnly:T,type:"text",pattern:"[0-9A-Z]{2,3}","data-testid":"floor-input","aria-labelledby":p(E,Q),"aria-describedby":p(F,W),"aria-invalid":H,placeholder:"floor"!==G||T||k?je(V)[0]:"",autoComplete:Z,styleType:"no-border",className:n(x,B)}),t(c,{"aria-hidden":!0,id:Q,children:"Enter floor number"}),t(f.BodyBL,{className:n(j,0===_.length&&C),children:"-"}),t(d,{name:"unit",maxLength:5,value:K,ref:ee,onFocus:ce,onBlur:pe,onChange:me,onKeyDown:fe,disabled:k,readOnly:T,type:"text",pattern:"[0-9A-Z]{2,5}","data-testid":"unit-input","aria-labelledby":p(E,S),"aria-describedby":p(F,W),"aria-invalid":H,placeholder:"unit"!==G||T||k?je(V)[1]:"",autoComplete:Z,styleType:"no-border",className:n(x,B,N)}),t(c,{"aria-hidden":!0,id:S,children:"Enter unit number"}),t(c,{id:W,"aria-live":"polite",children:le})]})]}))},L="Invalid unit number";export{w as UnitNumberInput};
 //# sourceMappingURL=unit-number-input.js.map