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

package/cjs/pagination/pagination.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),i=require("@lifesg/react-icons/chevron-2-left"),a=require("@lifesg/react-icons/chevron-2-right"),t=require("@lifesg/react-icons/chevron-left"),n=require("@lifesg/react-icons/chevron-line-left"),r=require("@lifesg/react-icons/chevron-line-right"),s=require("@lifesg/react-icons/chevron-right"),o=require("@lifesg/react-icons/ellipsis-horizontal"),l=require("react"),c=require("../external/react-responsive/dist/react-responsive.js"),u=require("styled-components"),d=require("../input-select/input-select.js"),h=require("../shared/accessibility/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var g=require("../util/simple-id-generator.js");require("../util/string-helper.js");var p=require("../v3_theme/index.js"),v=require("./pagination.styles.js");function f(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const x=f(l).default.forwardRef((({id:f,"data-testid":x,className:b,pageSize:m=10,totalItems:C,activePage:q,pageSizeOptions:I=j,showFirstAndLastNav:S,showPageSizeChanger:M=!1,onPageChange:P,onPageSizeChange:E},$)=>{const y=l.useContext(u.ThemeContext),L=p.V3_Breakpoint["sm-max"]({theme:y}),w=c.reactResponsiveExports.useMediaQuery({maxWidth:L}),[H,O]=l.useState(!1),[N,k]=l.useState(!1),[B,z]=l.useState(""),[F,R]=l.useState(I[0]),[V,W]=l.useState(!w&&M&&F?F.value:m),A=`${l.useRef(g.SimpleIdGenerator.generate()).current}-pagination`,D=Math.ceil(C/V),_=1===q,G=q===D,Q=q>1?()=>Y(1):void 0,T=q<D?()=>Y(D):void 0,J=q>1?()=>Y(q-1):void 0,K=q<D?()=>Y(parseInt(q.toString())+1):void 0;l.useEffect((()=>{q&&U(q)}),[q]),l.useEffect((()=>{W(m),R(I.find((e=>e.value===m)))}),[m]);const U=e=>{z(e.toString())},X=()=>{O(!1),k(!1)},Y=e=>{P&&(P(e),U(e))},Z=()=>{const e=Math.min(D,q+5);Y(e),U(e),O(!0),k(!1)},ee=()=>{const e=Math.max(1,q-5);Y(e),U(e),O(!1),k(!0)},ie=e=>{const i=e.target.value;if(void 0===i||0===i.length)z("");else if(/^[0-9]+$/.test(i)){const e=parseInt(i.replace(/[^0-9]/g,""));U(Math.max(1,Math.min(D,e)))}else z(i.replace(/[^0-9]/g,""))},ae=e=>{e.preventDefault(),B&&(null==P||P(parseInt(B)))},te=()=>{O(!0)},ne=()=>{O(!1)},re=()=>{k(!0)},se=()=>{k(!1)},oe=a=>e.jsxs(v.EllipsisContainer,{children:[e.jsx(v.EllipsisButton,{focusHighlight:!1,focusOutline:"browser","aria-label":"Previous 5 pages",onMouseEnter:re,onMouseLeave:se,onFocus:re,onBlur:se,onClick:ee,children:N?e.jsx(i.Chevron2LeftIcon,{"aria-hidden":!0}):e.jsx(o.EllipsisHorizontalIcon,{"aria-hidden":!0})}),N&&e.jsx(v.Hover,{children:"Previous 5 pages"})]},a),le=i=>e.jsxs(v.EllipsisContainer,{children:[e.jsx(v.EllipsisButton,{focusHighlight:!1,focusOutline:"browser","aria-label":"Next 5 pages",onMouseEnter:te,onMouseLeave:ne,onFocus:te,onBlur:ne,onClick:Z,children:H?e.jsx(a.Chevron2RightIcon,{"aria-hidden":!0}):e.jsx(o.EllipsisHorizontalIcon,{"aria-hidden":!0})}),H&&e.jsx(v.Hover,{children:"Next 5 pages"})]},i);return e.jsxs(v.PaginationWrapper,{className:b,ref:$,id:f||"pagination-wrapper","data-testid":x||"pagination","aria-labelledby":A,children:[e.jsx(h.VisuallyHidden,{id:A,"aria-hidden":!0,children:"pagination"}),e.jsx(v.PaginationList,{children:e.jsxs(v.PaginationMenu,{children:[S&&e.jsx(v.NavigationButton,{onClick:Q,disabled:_,focusHighlight:!1,$position:"left","aria-label":"First page",focusOutline:"browser",children:e.jsx(n.ChevronLineLeftIcon,{"aria-hidden":!0})}),e.jsx(v.NavigationButton,{onClick:J,disabled:_,focusHighlight:!1,$position:"left","aria-label":"Previous page",focusOutline:"browser",children:e.jsx(t.ChevronLeftIcon,{"aria-hidden":!0})}),w?e.jsxs(v.PaginationMobileInput,{children:[e.jsx("form",{onSubmit:ae,children:e.jsx(v.InputView,{value:B,onChange:ie,autoComplete:"off",type:"numeric",id:(f||"pagination")+"-input","data-testid":(x||"pagination")+"-input","aria-label":`Page ${q} of ${D}`})}),e.jsx(v.LabelDivider,{children:"/"}),e.jsx(v.Label,{children:D})]}):[...Array(D)].map(((i,a)=>{const t=a+1,n=D-5,r=q===t;return D<=7?e.jsx(v.PageItem,{onClick:()=>Y(t),$selected:r,"aria-label":`page ${t} of ${D}`,"aria-current":!!r&&"page",onMouseOver:X,onFocus:X,children:t},t):q+1>5&&2===t?oe(t):q-1<=n&&t===D-1-1?le(t):t<=5&&q+1<=5||t<=1||t===q||t<=q+1&&t>=q-1-1||t>n&&q-1>n||t>D-1?e.jsx(v.PageItem,{onClick:()=>Y(t),$selected:r,"aria-label":`page ${t} of ${D}`,"aria-current":!!r&&"page",onMouseOver:X,onFocus:X,children:t},t):null})),e.jsx(v.NavigationButton,{onClick:K,disabled:G,focusHighlight:!1,$position:"right","aria-label":"Next page",focusOutline:"browser",children:e.jsx(s.ChevronRightIcon,{"aria-hidden":!0})}),S&&e.jsx(v.NavigationButton,{onClick:T,disabled:G,focusHighlight:!1,$position:"right","aria-label":"Last page",focusOutline:"browser",children:e.jsx(r.ChevronLineRightIcon,{"aria-hidden":!0})})]})}),M&&!w&&e.jsx(v.InputSelectWrapper,{children:e.jsx(d.InputSelect,{options:I,valueExtractor:e=>e.value,listExtractor:e=>e.label,displayValueExtractor:e=>e.label,selectedOption:F,onSelectOption:e=>{R(e);const i=e.value,a=Math.ceil(C/i);W(i);E&&E(q>=a?a:q,i)}})})]})})),j=[{value:10,label:"10 per page"},{value:20,label:"20 per page"},{value:30,label:"30 per page"}];exports.Pagination=x;
+"use strict";var e=require("react/jsx-runtime"),i=require("@lifesg/react-icons/chevron-2-left"),a=require("@lifesg/react-icons/chevron-2-right"),n=require("@lifesg/react-icons/chevron-left"),t=require("@lifesg/react-icons/chevron-line-left"),s=require("@lifesg/react-icons/chevron-line-right"),r=require("@lifesg/react-icons/chevron-right"),l=require("@lifesg/react-icons/ellipsis-horizontal"),o=require("clsx"),c=require("react"),u=require("../input/input.js"),d=require("../input-select/input-select.js"),h=require("../shared/accessibility/index.js"),p=require("../shared/clickable-icon/clickable-icon.js");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var g=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var v=require("../util/use-mount.js"),f=require("../theme/utils/use-media-query.js"),j=require("../typography/index.js"),m=require("./pagination.styles.js");function x(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var b=x(o);const q=x(c).default.forwardRef((({id:o,"data-testid":x,className:q,pageSize:I=10,totalItems:C,activePage:y,pageSizeOptions:k=N,showFirstAndLastNav:M,showPageSizeChanger:S=!1,onPageChange:B,onPageSizeChange:L},w)=>{const O=v.useIsMounted(),H=f.useMaxWidthMediaQuery("sm"),[$,z]=c.useState(!1),[E,P]=c.useState(!1),[F,R]=c.useState(""),[V,W]=c.useState(k[0]),[A,D]=c.useState(!H&&S&&V?V.value:I),T=`${g.useId()}-pagination`,Q=Math.ceil(C/A),G=1===y,J=y===Q,K=y>1?()=>ee(1):void 0,U=y<Q?()=>ee(Q):void 0,X=y>1?()=>ee(y-1):void 0,Y=y<Q?()=>ee(parseInt(y.toString())+1):void 0;c.useEffect((()=>{y&&Z(y)}),[y]),c.useEffect((()=>{D(I),W(k.find((e=>e.value===I)))}),[I]);const Z=e=>{R(e.toString())},_=()=>{z(!1),P(!1)},ee=e=>{B&&(B(e),Z(e))},ie=()=>{const e=Math.min(Q,y+5);ee(e),Z(e),z(!0),P(!1)},ae=()=>{const e=Math.max(1,y-5);ee(e),Z(e),z(!1),P(!0)},ne=e=>{const i=e.target.value;if(void 0===i||0===i.length)R("");else if(/^[0-9]+$/.test(i)){const e=parseInt(i.replace(/[^0-9]/g,""));Z(Math.max(1,Math.min(Q,e)))}else R(i.replace(/[^0-9]/g,""))},te=e=>{e.preventDefault(),F&&(null==B||B(parseInt(F)))},se=()=>{z(!0)},re=()=>{z(!1)},le=()=>{P(!0)},oe=()=>{P(!1)},ce=a=>e.jsxs("div",{className:m.ellipsisContainer,children:[e.jsx(p.ClickableIcon,{className:m.iconButton,focusHighlight:!1,focusOutline:"browser","aria-label":"Previous 5 pages",onMouseEnter:le,onMouseLeave:oe,onFocus:le,onBlur:oe,onClick:ae,children:E?e.jsx(i.Chevron2LeftIcon,{"aria-hidden":!0}):e.jsx(l.EllipsisHorizontalIcon,{"aria-hidden":!0})}),E&&e.jsx("div",{className:m.hover,children:"Previous 5 pages"})]},a),ue=i=>e.jsxs("div",{className:m.ellipsisContainer,children:[e.jsx(p.ClickableIcon,{className:m.iconButton,focusHighlight:!1,focusOutline:"browser","aria-label":"Next 5 pages",onMouseEnter:se,onMouseLeave:re,onFocus:se,onBlur:re,onClick:ie,children:$?e.jsx(a.Chevron2RightIcon,{"aria-hidden":!0}):e.jsx(l.EllipsisHorizontalIcon,{"aria-hidden":!0})}),$&&e.jsx("div",{className:m.hover,children:"Next 5 pages"})]},i);return e.jsxs("nav",{className:b.default(m.paginationWrapper,q),ref:w,id:o||"pagination-wrapper","data-testid":x||"pagination","aria-labelledby":T,children:[e.jsx(h.VisuallyHidden,{id:T,"aria-hidden":!0,children:"pagination"}),e.jsx("div",{className:m.paginationList,children:e.jsxs("div",{className:m.paginationMenu,children:[M&&e.jsx(p.ClickableIcon,{className:b.default(m.iconButton,m.iconButtonNavigation),onClick:K,disabled:G,focusHighlight:!1,"aria-label":"First page",focusOutline:"browser",children:e.jsx(t.ChevronLineLeftIcon,{"aria-hidden":!0})}),e.jsx(p.ClickableIcon,{className:b.default(m.iconButton,m.iconButtonNavigation),onClick:X,disabled:G,focusHighlight:!1,"aria-label":"Previous page",focusOutline:"browser",children:e.jsx(n.ChevronLeftIcon,{"aria-hidden":!0})}),O&&H?e.jsxs("div",{className:m.paginationMobileInput,children:[e.jsx("form",{onSubmit:te,children:e.jsx(u.Input,{className:m.inputView,value:F,onChange:ne,autoComplete:"off",type:"numeric",id:(o||"pagination")+"-input","data-testid":(x||"pagination")+"-input","aria-label":`Page ${y} of ${Q}`})}),e.jsx(j.Typography.BodyBL,{className:m.labelDivider,children:"/"}),e.jsx(j.Typography.BodyBL,{className:m.label,children:Q})]}):[...Array(Q)].map(((i,a)=>{const n=a+1,t=Q-5,s=y===n;return Q<=7?e.jsx("button",{onClick:()=>ee(n),className:b.default(m.pageItem,s&&m.pageItemSelected),"aria-label":`page ${n} of ${Q}`,"aria-current":!!s&&"page",onMouseOver:_,onFocus:_,children:n},n):y+1>5&&2===n?ce(n):y-1<=t&&n===Q-1-1?ue(n):n<=5&&y+1<=5||n<=1||n===y||n<=y+1&&n>=y-1-1||n>t&&y-1>t||n>Q-1?e.jsx("button",{onClick:()=>ee(n),className:b.default(m.pageItem,s&&m.pageItemSelected),"aria-label":`page ${n} of ${Q}`,"aria-current":!!s&&"page",onMouseOver:_,onFocus:_,children:n},n):null})),e.jsx(p.ClickableIcon,{className:b.default(m.iconButton,m.iconButtonNavigation),onClick:Y,disabled:J,focusHighlight:!1,"aria-label":"Next page",focusOutline:"browser",children:e.jsx(r.ChevronRightIcon,{"aria-hidden":!0})}),M&&e.jsx(p.ClickableIcon,{className:b.default(m.iconButton,m.iconButtonNavigation),onClick:U,disabled:J,focusHighlight:!1,"aria-label":"Last page",focusOutline:"browser",children:e.jsx(s.ChevronLineRightIcon,{"aria-hidden":!0})})]})}),S&&!H&&e.jsxs("div",{className:m.inputSelectWrapper,children:[e.jsx(h.VisuallyHidden,{id:`${T}-page-size`,children:"Items per page"}),e.jsx(d.InputSelect,{"aria-labelledby":`${T}-page-size`,options:k,valueExtractor:e=>e.value,listExtractor:e=>e.label,displayValueExtractor:e=>e.label,selectedOption:V,onSelectOption:e=>{W(e);const i=e.value,a=Math.ceil(C/i);D(i);L&&L(y>=a?a:y,i)}})]})]})})),N=[{value:10,label:"10 per page"},{value:20,label:"20 per page"},{value:30,label:"30 per page"}];exports.Pagination=q;
 //# sourceMappingURL=pagination.js.map

package/cjs/pagination/pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.js","sources":["../../../src/pagination/pagination.tsx"],"sourcesContent":["import { Chevron2LeftIcon } from \"@lifesg/react-icons/chevron-2-left\";\nimport { Chevron2RightIcon } from \"@lifesg/react-icons/chevron-2-right\";\nimport { ChevronLeftIcon } from \"@lifesg/react-icons/chevron-left\";\nimport { ChevronLineLeftIcon } from \"@lifesg/react-icons/chevron-line-left\";\nimport { ChevronLineRightIcon } from \"@lifesg/react-icons/chevron-line-right\";\nimport { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport { EllipsisHorizontalIcon } from \"@lifesg/react-icons/ellipsis-horizontal\";\nimport React, { useContext, useEffect, useRef, useState } from \"react\";\nimport { useMediaQuery } from \"react-responsive\";\nimport { ThemeContext } from \"styled-components\";\n\nimport { InputSelect } from \"../input-select\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { SimpleIdGenerator } from \"../util\";\nimport { V3_Breakpoint } from \"../v3_theme\";\nimport {\n    EllipsisButton,\n    EllipsisContainer,\n    Hover,\n    InputSelectWrapper,\n    InputView,\n    Label,\n    LabelDivider,\n    NavigationButton,\n    PageItem,\n    PaginationList,\n    PaginationMenu,\n    PaginationMobileInput,\n    PaginationWrapper,\n} from \"./pagination.styles\";\nimport type { PageSizeItemProps, PaginationProps } from \"./types\";\n\nconst Component = (\n    {\n        id,\n        \"data-testid\": dataTestId,\n        className,\n        pageSize = 10,\n        totalItems,\n        activePage,\n        pageSizeOptions = DEFAULT_OPTIONS,\n        showFirstAndLastNav,\n        showPageSizeChanger = false,\n        onPageChange,\n        onPageSizeChange,\n    }: PaginationProps,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n\n    const theme = useContext(ThemeContext);\n    const mobileBreakpoint = V3_Breakpoint[\"sm-max\"]({ theme });\n\n    const isMobile = useMediaQuery({\n        maxWidth: mobileBreakpoint,\n    });\n    const [hoverRightButton, setHoverRightButton] = useState(false);\n    const [hoverLeftButton, setHoverLeftButton] = useState(false);\n    const [inputText, setInputText] = useState<string>(\"\");\n\n    const [selectedOption, setSelectedOption] = useState<\n        PageSizeItemProps | undefined\n    >(pageSizeOptions[0]);\n    const [pageSizeLocal, setPageSize] = useState<number>(\n        !isMobile && showPageSizeChanger\n            ? selectedOption\n                ? selectedOption.value\n                : pageSize\n            : pageSize\n    );\n\n    const boundaryRange = 1;\n    const siblingRange = 1;\n\n    const internalId = useRef(SimpleIdGenerator.generate());\n    const paginationId = `${internalId.current}-pagination`;\n\n    const totalPages = Math.ceil(totalItems / pageSizeLocal);\n    const isFirstPage = activePage === 1;\n    const isLastPage = activePage === totalPages;\n\n    const firstPaginationItem =\n        activePage > 1 ? () => handlePaginationItemClick(1) : undefined;\n    const lastPaginationItem =\n        activePage < totalPages\n            ? () => handlePaginationItemClick(totalPages)\n            : undefined;\n    const prevPaginationItem =\n        activePage > 1\n            ? () => handlePaginationItemClick(activePage - 1)\n            : undefined;\n    const nextPaginationItem =\n        activePage < totalPages\n            ? () =>\n                  handlePaginationItemClick(parseInt(activePage.toString()) + 1)\n            : undefined;\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        if (activePage) {\n            setInputValue(activePage);\n        }\n    }, [activePage]);\n\n    useEffect(() => {\n        setPageSize(pageSize);\n        setSelectedOption(\n            pageSizeOptions.find((option) => option.value === pageSize)\n        );\n    }, [pageSize]);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const setInputValue = (value: number) => {\n        setInputText(value.toString());\n    };\n\n    const closeAllTooltips = () => {\n        setHoverRightButton(false);\n        setHoverLeftButton(false);\n    };\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handlePaginationItemClick = (pageIndex: number) => {\n        if (onPageChange) {\n            onPageChange(pageIndex);\n            setInputValue(pageIndex);\n        }\n    };\n\n    const handleFastForwardClick = () => {\n        const currentIndex = Math.min(totalPages, activePage + 5);\n        handlePaginationItemClick(currentIndex);\n        setInputValue(currentIndex);\n        setHoverRightButton(true);\n        setHoverLeftButton(false);\n    };\n\n    const handleFastBackwardClick = () => {\n        const currentIndex = Math.max(1, activePage - 5);\n        handlePaginationItemClick(currentIndex);\n        setInputValue(currentIndex);\n        setHoverRightButton(false);\n        setHoverLeftButton(true);\n    };\n\n    const handleInput = (event: React.ChangeEvent<HTMLInputElement>) => {\n        const value = event.target.value;\n        const numericRegex = /^[0-9]+$/;\n        if (value === undefined || value.length === 0) {\n            setInputText(\"\");\n        } else if (!numericRegex.test(value)) {\n            setInputText(value.replace(/[^0-9]/g, \"\"));\n        } else {\n            const newPage = parseInt(value.replace(/[^0-9]/g, \"\"));\n            setInputValue(Math.max(1, Math.min(totalPages, newPage)));\n        }\n    };\n\n    const handleInputSubmit = (event: React.FormEvent) => {\n        event.preventDefault();\n        if (inputText) {\n            onPageChange?.(parseInt(inputText));\n        }\n    };\n\n    const onHoverRightButton = () => {\n        setHoverRightButton(true);\n    };\n\n    const onBlurRightButton = () => {\n        setHoverRightButton(false);\n    };\n\n    const onHoverLeftButton = () => {\n        setHoverLeftButton(true);\n    };\n\n    const onBlurLeftButton = () => {\n        setHoverLeftButton(false);\n    };\n\n    const handleListItemClick = (item: PageSizeItemProps) => {\n        setSelectedOption(item);\n        const pagesize = item.value;\n        const totalPage = Math.ceil(totalItems / pagesize);\n\n        setPageSize(pagesize);\n\n        const page = activePage >= totalPage ? totalPage : activePage;\n\n        if (onPageSizeChange) {\n            onPageSizeChange(page, pagesize);\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderPaginationItems = () => {\n        return [...Array(totalPages)].map((e, i) => {\n            const pageIndex = i + 1;\n            const startRange = boundaryRange + 2 + siblingRange * 2;\n            const endRange = totalPages - startRange;\n            const totalRange = (boundaryRange + siblingRange) * 2 + 3;\n            const active = activePage === pageIndex;\n            if (totalPages <= totalRange) {\n                return (\n                    <PageItem\n                        key={pageIndex}\n                        onClick={() => handlePaginationItemClick(pageIndex)}\n                        $selected={active}\n                        aria-label={`page ${pageIndex} of ${totalPages}`}\n                        aria-current={active ? \"page\" : false}\n                        onMouseOver={closeAllTooltips}\n                        onFocus={closeAllTooltips}\n                    >\n                        {pageIndex}\n                    </PageItem>\n                );\n            }\n\n            const ellipsisStart =\n                activePage + siblingRange > startRange &&\n                pageIndex === boundaryRange + 1;\n            if (ellipsisStart) {\n                return renderStartEllipsis(pageIndex);\n            }\n\n            const ellipsisEnd =\n                activePage - siblingRange <= endRange &&\n                pageIndex === totalPages - boundaryRange - 1;\n            if (ellipsisEnd) {\n                return renderEndEllipsis(pageIndex);\n            }\n\n            const paginationStart =\n                (pageIndex <= startRange &&\n                    activePage + siblingRange <= startRange) ||\n                pageIndex <= boundaryRange;\n            const paginationMiddle =\n                pageIndex === activePage ||\n                (pageIndex <= activePage + siblingRange &&\n                    pageIndex >= activePage - siblingRange - 1);\n            const paginationEnd =\n                (pageIndex > endRange &&\n                    activePage - siblingRange > endRange) ||\n                pageIndex > totalPages - boundaryRange;\n            if (paginationStart || paginationMiddle || paginationEnd) {\n                return (\n                    <PageItem\n                        key={pageIndex}\n                        onClick={() => handlePaginationItemClick(pageIndex)}\n                        $selected={active}\n                        aria-label={`page ${pageIndex} of ${totalPages}`}\n                        aria-current={active ? \"page\" : false}\n                        onMouseOver={closeAllTooltips}\n                        onFocus={closeAllTooltips}\n                    >\n                        {pageIndex}\n                    </PageItem>\n                );\n            }\n\n            return null;\n        });\n    };\n\n    const renderStartEllipsis = (pageIndex: number) => (\n        <EllipsisContainer key={pageIndex}>\n            <EllipsisButton\n                focusHighlight={false}\n                focusOutline=\"browser\"\n                aria-label={\"Previous 5 pages\"}\n                onMouseEnter={onHoverLeftButton}\n                onMouseLeave={onBlurLeftButton}\n                onFocus={onHoverLeftButton}\n                onBlur={onBlurLeftButton}\n                onClick={handleFastBackwardClick}\n            >\n                {hoverLeftButton ? (\n                    <Chevron2LeftIcon aria-hidden />\n                ) : (\n                    <EllipsisHorizontalIcon aria-hidden />\n                )}\n            </EllipsisButton>\n            {hoverLeftButton && <Hover>Previous 5 pages</Hover>}\n        </EllipsisContainer>\n    );\n\n    const renderEndEllipsis = (pageIndex: number) => (\n        <EllipsisContainer key={pageIndex}>\n            <EllipsisButton\n                focusHighlight={false}\n                focusOutline=\"browser\"\n                aria-label={\"Next 5 pages\"}\n                onMouseEnter={onHoverRightButton}\n                onMouseLeave={onBlurRightButton}\n                onFocus={onHoverRightButton}\n                onBlur={onBlurRightButton}\n                onClick={handleFastForwardClick}\n            >\n                {hoverRightButton ? (\n                    <Chevron2RightIcon aria-hidden />\n                ) : (\n                    <EllipsisHorizontalIcon aria-hidden />\n                )}\n            </EllipsisButton>\n            {hoverRightButton && <Hover>Next 5 pages</Hover>}\n        </EllipsisContainer>\n    );\n\n    const renderMobile = () => (\n        <PaginationMobileInput>\n            <form onSubmit={handleInputSubmit}>\n                <InputView\n                    value={inputText}\n                    onChange={handleInput}\n                    autoComplete=\"off\"\n                    type=\"numeric\"\n                    id={(id || \"pagination\") + \"-input\"}\n                    data-testid={(dataTestId || \"pagination\") + \"-input\"}\n                    aria-label={`Page ${activePage} of ${totalPages}`}\n                />\n            </form>\n            <LabelDivider>/</LabelDivider>\n            <Label>{totalPages}</Label>\n        </PaginationMobileInput>\n    );\n\n    return (\n        <PaginationWrapper\n            className={className}\n            ref={ref}\n            id={id || \"pagination-wrapper\"}\n            data-testid={dataTestId || \"pagination\"}\n            aria-labelledby={paginationId}\n        >\n            <VisuallyHidden id={paginationId} aria-hidden>\n                pagination\n            </VisuallyHidden>\n            <PaginationList>\n                <PaginationMenu>\n                    {showFirstAndLastNav && (\n                        <NavigationButton\n                            onClick={firstPaginationItem}\n                            disabled={isFirstPage}\n                            focusHighlight={false}\n                            $position=\"left\"\n                            aria-label=\"First page\"\n                            focusOutline=\"browser\"\n                        >\n                            <ChevronLineLeftIcon aria-hidden />\n                        </NavigationButton>\n                    )}\n                    <NavigationButton\n                        onClick={prevPaginationItem}\n                        disabled={isFirstPage}\n                        focusHighlight={false}\n                        $position=\"left\"\n                        aria-label=\"Previous page\"\n                        focusOutline=\"browser\"\n                    >\n                        <ChevronLeftIcon aria-hidden />\n                    </NavigationButton>\n                    {isMobile ? renderMobile() : renderPaginationItems()}\n                    <NavigationButton\n                        onClick={nextPaginationItem}\n                        disabled={isLastPage}\n                        focusHighlight={false}\n                        $position=\"right\"\n                        aria-label=\"Next page\"\n                        focusOutline=\"browser\"\n                    >\n                        <ChevronRightIcon aria-hidden />\n                    </NavigationButton>\n                    {showFirstAndLastNav && (\n                        <NavigationButton\n                            onClick={lastPaginationItem}\n                            disabled={isLastPage}\n                            focusHighlight={false}\n                            $position=\"right\"\n                            aria-label=\"Last page\"\n                            focusOutline=\"browser\"\n                        >\n                            <ChevronLineRightIcon aria-hidden />\n                        </NavigationButton>\n                    )}\n                </PaginationMenu>\n            </PaginationList>\n            {showPageSizeChanger && !isMobile && (\n                <InputSelectWrapper>\n                    <InputSelect\n                        options={pageSizeOptions}\n                        valueExtractor={(item) => item.value}\n                        listExtractor={(item) => item.label}\n                        displayValueExtractor={(item) => item.label}\n                        selectedOption={selectedOption}\n                        onSelectOption={handleListItemClick}\n                    />\n                </InputSelectWrapper>\n            )}\n        </PaginationWrapper>\n    );\n};\nexport const Pagination = React.forwardRef(Component);\n\nconst DEFAULT_OPTIONS: PageSizeItemProps[] = [\n    { value: 10, label: \"10 per page\" },\n    { value: 20, label: \"20 per page\" },\n    { value: 30, label: \"30 per page\" },\n];\n"],"names":["Pagination","React","forwardRef","id","dataTestId","className","pageSize","totalItems","activePage","pageSizeOptions","DEFAULT_OPTIONS","showFirstAndLastNav","showPageSizeChanger","onPageChange","onPageSizeChange","ref","theme","useContext","ThemeContext","mobileBreakpoint","V3_Breakpoint","isMobile","useMediaQuery","maxWidth","hoverRightButton","setHoverRightButton","useState","hoverLeftButton","setHoverLeftButton","inputText","setInputText","selectedOption","setSelectedOption","pageSizeLocal","setPageSize","value","paginationId","useRef","SimpleIdGenerator","generate","current","totalPages","Math","ceil","isFirstPage","isLastPage","firstPaginationItem","handlePaginationItemClick","undefined","lastPaginationItem","prevPaginationItem","nextPaginationItem","parseInt","toString","useEffect","setInputValue","find","option","closeAllTooltips","pageIndex","handleFastForwardClick","currentIndex","min","handleFastBackwardClick","max","handleInput","event","target","length","test","newPage","replace","handleInputSubmit","preventDefault","onHoverRightButton","onBlurRightButton","onHoverLeftButton","onBlurLeftButton","renderStartEllipsis","_jsxs","EllipsisContainer","children","_jsx","EllipsisButton","focusHighlight","focusOutline","onMouseEnter","onMouseLeave","onFocus","onBlur","onClick","Chevron2LeftIcon","EllipsisHorizontalIcon","Hover","renderEndEllipsis","Chevron2RightIcon","PaginationWrapper","VisuallyHidden","PaginationList","PaginationMenu","NavigationButton","disabled","$position","ChevronLineLeftIcon","ChevronLeftIcon","PaginationMobileInput","onSubmit","InputView","onChange","autoComplete","type","LabelDivider","Label","Array","map","e","i","endRange","boundaryRange","active","PageItem","onMouseOver","ChevronRightIcon","ChevronLineRightIcon","InputSelectWrapper","InputSelect","options","valueExtractor","item","listExtractor","label","displayValueExtractor","onSelectOption","pagesize","totalPage"],"mappings":"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"}
+{"version":3,"file":"pagination.js","sources":["../../../src/pagination/pagination.tsx"],"sourcesContent":["import { Chevron2LeftIcon } from \"@lifesg/react-icons/chevron-2-left\";\nimport { Chevron2RightIcon } from \"@lifesg/react-icons/chevron-2-right\";\nimport { ChevronLeftIcon } from \"@lifesg/react-icons/chevron-left\";\nimport { ChevronLineLeftIcon } from \"@lifesg/react-icons/chevron-line-left\";\nimport { ChevronLineRightIcon } from \"@lifesg/react-icons/chevron-line-right\";\nimport { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport { EllipsisHorizontalIcon } from \"@lifesg/react-icons/ellipsis-horizontal\";\nimport clsx from \"clsx\";\nimport React, { useEffect, useState } from \"react\";\n\nimport { Input } from \"../input\";\nimport { InputSelect } from \"../input-select\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { useMaxWidthMediaQuery } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useId, useIsMounted } from \"../util\";\nimport * as styles from \"./pagination.styles\";\nimport type { PageSizeItemProps, PaginationProps } from \"./types\";\n\nconst Component = (\n    {\n        id,\n        \"data-testid\": dataTestId,\n        className,\n        pageSize = 10,\n        totalItems,\n        activePage,\n        pageSizeOptions = DEFAULT_OPTIONS,\n        showFirstAndLastNav,\n        showPageSizeChanger = false,\n        onPageChange,\n        onPageSizeChange,\n    }: PaginationProps,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n\n    const isMounted = useIsMounted();\n    const isMobile = useMaxWidthMediaQuery(\"sm\");\n    const [hoverRightButton, setHoverRightButton] = useState(false);\n    const [hoverLeftButton, setHoverLeftButton] = useState(false);\n    const [inputText, setInputText] = useState<string>(\"\");\n\n    const [selectedOption, setSelectedOption] = useState<\n        PageSizeItemProps | undefined\n    >(pageSizeOptions[0]);\n    const [pageSizeLocal, setPageSize] = useState<number>(\n        !isMobile && showPageSizeChanger\n            ? selectedOption\n                ? selectedOption.value\n                : pageSize\n            : pageSize\n    );\n\n    const boundaryRange = 1;\n    const siblingRange = 1;\n\n    const internalId = useId();\n    const paginationId = `${internalId}-pagination`;\n\n    const totalPages = Math.ceil(totalItems / pageSizeLocal);\n    const isFirstPage = activePage === 1;\n    const isLastPage = activePage === totalPages;\n\n    const firstPaginationItem =\n        activePage > 1 ? () => handlePaginationItemClick(1) : undefined;\n    const lastPaginationItem =\n        activePage < totalPages\n            ? () => handlePaginationItemClick(totalPages)\n            : undefined;\n    const prevPaginationItem =\n        activePage > 1\n            ? () => handlePaginationItemClick(activePage - 1)\n            : undefined;\n    const nextPaginationItem =\n        activePage < totalPages\n            ? () =>\n                  handlePaginationItemClick(parseInt(activePage.toString()) + 1)\n            : undefined;\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        if (activePage) {\n            setInputValue(activePage);\n        }\n    }, [activePage]);\n\n    useEffect(() => {\n        setPageSize(pageSize);\n        setSelectedOption(\n            pageSizeOptions.find((option) => option.value === pageSize)\n        );\n    }, [pageSize]);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const setInputValue = (value: number) => {\n        setInputText(value.toString());\n    };\n\n    const closeAllTooltips = () => {\n        setHoverRightButton(false);\n        setHoverLeftButton(false);\n    };\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handlePaginationItemClick = (pageIndex: number) => {\n        if (onPageChange) {\n            onPageChange(pageIndex);\n            setInputValue(pageIndex);\n        }\n    };\n\n    const handleFastForwardClick = () => {\n        const currentIndex = Math.min(totalPages, activePage + 5);\n        handlePaginationItemClick(currentIndex);\n        setInputValue(currentIndex);\n        setHoverRightButton(true);\n        setHoverLeftButton(false);\n    };\n\n    const handleFastBackwardClick = () => {\n        const currentIndex = Math.max(1, activePage - 5);\n        handlePaginationItemClick(currentIndex);\n        setInputValue(currentIndex);\n        setHoverRightButton(false);\n        setHoverLeftButton(true);\n    };\n\n    const handleInput = (event: React.ChangeEvent<HTMLInputElement>) => {\n        const value = event.target.value;\n        const numericRegex = /^[0-9]+$/;\n        if (value === undefined || value.length === 0) {\n            setInputText(\"\");\n        } else if (!numericRegex.test(value)) {\n            setInputText(value.replace(/[^0-9]/g, \"\"));\n        } else {\n            const newPage = parseInt(value.replace(/[^0-9]/g, \"\"));\n            setInputValue(Math.max(1, Math.min(totalPages, newPage)));\n        }\n    };\n\n    const handleInputSubmit = (event: React.FormEvent) => {\n        event.preventDefault();\n        if (inputText) {\n            onPageChange?.(parseInt(inputText));\n        }\n    };\n\n    const onHoverRightButton = () => {\n        setHoverRightButton(true);\n    };\n\n    const onBlurRightButton = () => {\n        setHoverRightButton(false);\n    };\n\n    const onHoverLeftButton = () => {\n        setHoverLeftButton(true);\n    };\n\n    const onBlurLeftButton = () => {\n        setHoverLeftButton(false);\n    };\n\n    const handleListItemClick = (item: PageSizeItemProps) => {\n        setSelectedOption(item);\n        const pagesize = item.value;\n        const totalPage = Math.ceil(totalItems / pagesize);\n\n        setPageSize(pagesize);\n\n        const page = activePage >= totalPage ? totalPage : activePage;\n\n        if (onPageSizeChange) {\n            onPageSizeChange(page, pagesize);\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderPaginationItems = () => {\n        return [...Array(totalPages)].map((e, i) => {\n            const pageIndex = i + 1;\n            const startRange = boundaryRange + 2 + siblingRange * 2;\n            const endRange = totalPages - startRange;\n            const totalRange = (boundaryRange + siblingRange) * 2 + 3;\n            const active = activePage === pageIndex;\n            if (totalPages <= totalRange) {\n                return (\n                    <button\n                        key={pageIndex}\n                        onClick={() => handlePaginationItemClick(pageIndex)}\n                        className={clsx(\n                            styles.pageItem,\n                            active && styles.pageItemSelected\n                        )}\n                        aria-label={`page ${pageIndex} of ${totalPages}`}\n                        aria-current={active ? \"page\" : false}\n                        onMouseOver={closeAllTooltips}\n                        onFocus={closeAllTooltips}\n                    >\n                        {pageIndex}\n                    </button>\n                );\n            }\n\n            const ellipsisStart =\n                activePage + siblingRange > startRange &&\n                pageIndex === boundaryRange + 1;\n            if (ellipsisStart) {\n                return renderStartEllipsis(pageIndex);\n            }\n\n            const ellipsisEnd =\n                activePage - siblingRange <= endRange &&\n                pageIndex === totalPages - boundaryRange - 1;\n            if (ellipsisEnd) {\n                return renderEndEllipsis(pageIndex);\n            }\n\n            const paginationStart =\n                (pageIndex <= startRange &&\n                    activePage + siblingRange <= startRange) ||\n                pageIndex <= boundaryRange;\n            const paginationMiddle =\n                pageIndex === activePage ||\n                (pageIndex <= activePage + siblingRange &&\n                    pageIndex >= activePage - siblingRange - 1);\n            const paginationEnd =\n                (pageIndex > endRange &&\n                    activePage - siblingRange > endRange) ||\n                pageIndex > totalPages - boundaryRange;\n            if (paginationStart || paginationMiddle || paginationEnd) {\n                return (\n                    <button\n                        key={pageIndex}\n                        onClick={() => handlePaginationItemClick(pageIndex)}\n                        className={clsx(\n                            styles.pageItem,\n                            active && styles.pageItemSelected\n                        )}\n                        aria-label={`page ${pageIndex} of ${totalPages}`}\n                        aria-current={active ? \"page\" : false}\n                        onMouseOver={closeAllTooltips}\n                        onFocus={closeAllTooltips}\n                    >\n                        {pageIndex}\n                    </button>\n                );\n            }\n\n            return null;\n        });\n    };\n\n    const renderStartEllipsis = (pageIndex: number) => (\n        <div key={pageIndex} className={styles.ellipsisContainer}>\n            <ClickableIcon\n                className={styles.iconButton}\n                focusHighlight={false}\n                focusOutline=\"browser\"\n                aria-label={\"Previous 5 pages\"}\n                onMouseEnter={onHoverLeftButton}\n                onMouseLeave={onBlurLeftButton}\n                onFocus={onHoverLeftButton}\n                onBlur={onBlurLeftButton}\n                onClick={handleFastBackwardClick}\n            >\n                {hoverLeftButton ? (\n                    <Chevron2LeftIcon aria-hidden />\n                ) : (\n                    <EllipsisHorizontalIcon aria-hidden />\n                )}\n            </ClickableIcon>\n            {hoverLeftButton && (\n                <div className={styles.hover}>Previous 5 pages</div>\n            )}\n        </div>\n    );\n\n    const renderEndEllipsis = (pageIndex: number) => (\n        <div key={pageIndex} className={styles.ellipsisContainer}>\n            <ClickableIcon\n                className={styles.iconButton}\n                focusHighlight={false}\n                focusOutline=\"browser\"\n                aria-label={\"Next 5 pages\"}\n                onMouseEnter={onHoverRightButton}\n                onMouseLeave={onBlurRightButton}\n                onFocus={onHoverRightButton}\n                onBlur={onBlurRightButton}\n                onClick={handleFastForwardClick}\n            >\n                {hoverRightButton ? (\n                    <Chevron2RightIcon aria-hidden />\n                ) : (\n                    <EllipsisHorizontalIcon aria-hidden />\n                )}\n            </ClickableIcon>\n            {hoverRightButton && (\n                <div className={styles.hover}>Next 5 pages</div>\n            )}\n        </div>\n    );\n\n    const renderMobile = () => (\n        <div className={styles.paginationMobileInput}>\n            <form onSubmit={handleInputSubmit}>\n                <Input\n                    className={styles.inputView}\n                    value={inputText}\n                    onChange={handleInput}\n                    autoComplete=\"off\"\n                    type=\"numeric\"\n                    id={(id || \"pagination\") + \"-input\"}\n                    data-testid={(dataTestId || \"pagination\") + \"-input\"}\n                    aria-label={`Page ${activePage} of ${totalPages}`}\n                />\n            </form>\n            <Typography.BodyBL className={styles.labelDivider}>\n                /\n            </Typography.BodyBL>\n            <Typography.BodyBL className={styles.label}>\n                {totalPages}\n            </Typography.BodyBL>\n        </div>\n    );\n\n    return (\n        <nav\n            className={clsx(styles.paginationWrapper, className)}\n            ref={ref}\n            id={id || \"pagination-wrapper\"}\n            data-testid={dataTestId || \"pagination\"}\n            aria-labelledby={paginationId}\n        >\n            <VisuallyHidden id={paginationId} aria-hidden>\n                pagination\n            </VisuallyHidden>\n            <div className={styles.paginationList}>\n                <div className={styles.paginationMenu}>\n                    {showFirstAndLastNav && (\n                        <ClickableIcon\n                            className={clsx(\n                                styles.iconButton,\n                                styles.iconButtonNavigation\n                            )}\n                            onClick={firstPaginationItem}\n                            disabled={isFirstPage}\n                            focusHighlight={false}\n                            aria-label=\"First page\"\n                            focusOutline=\"browser\"\n                        >\n                            <ChevronLineLeftIcon aria-hidden />\n                        </ClickableIcon>\n                    )}\n                    <ClickableIcon\n                        className={clsx(\n                            styles.iconButton,\n                            styles.iconButtonNavigation\n                        )}\n                        onClick={prevPaginationItem}\n                        disabled={isFirstPage}\n                        focusHighlight={false}\n                        aria-label=\"Previous page\"\n                        focusOutline=\"browser\"\n                    >\n                        <ChevronLeftIcon aria-hidden />\n                    </ClickableIcon>\n                    {isMounted && isMobile\n                        ? renderMobile()\n                        : renderPaginationItems()}\n                    <ClickableIcon\n                        className={clsx(\n                            styles.iconButton,\n                            styles.iconButtonNavigation\n                        )}\n                        onClick={nextPaginationItem}\n                        disabled={isLastPage}\n                        focusHighlight={false}\n                        aria-label=\"Next page\"\n                        focusOutline=\"browser\"\n                    >\n                        <ChevronRightIcon aria-hidden />\n                    </ClickableIcon>\n                    {showFirstAndLastNav && (\n                        <ClickableIcon\n                            className={clsx(\n                                styles.iconButton,\n                                styles.iconButtonNavigation\n                            )}\n                            onClick={lastPaginationItem}\n                            disabled={isLastPage}\n                            focusHighlight={false}\n                            aria-label=\"Last page\"\n                            focusOutline=\"browser\"\n                        >\n                            <ChevronLineRightIcon aria-hidden />\n                        </ClickableIcon>\n                    )}\n                </div>\n            </div>\n            {showPageSizeChanger && !isMobile && (\n                <div className={styles.inputSelectWrapper}>\n                    <VisuallyHidden id={`${paginationId}-page-size`}>\n                        Items per page\n                    </VisuallyHidden>\n                    <InputSelect\n                        aria-labelledby={`${paginationId}-page-size`}\n                        options={pageSizeOptions}\n                        valueExtractor={(item) => item.value}\n                        listExtractor={(item) => item.label}\n                        displayValueExtractor={(item) => item.label}\n                        selectedOption={selectedOption}\n                        onSelectOption={handleListItemClick}\n                    />\n                </div>\n            )}\n        </nav>\n    );\n};\nexport const Pagination = React.forwardRef(Component);\n\nconst DEFAULT_OPTIONS: PageSizeItemProps[] = [\n    { value: 10, label: \"10 per page\" },\n    { value: 20, label: \"20 per page\" },\n    { value: 30, label: \"30 per page\" },\n];\n"],"names":["Pagination","React","forwardRef","id","dataTestId","className","pageSize","totalItems","activePage","pageSizeOptions","DEFAULT_OPTIONS","showFirstAndLastNav","showPageSizeChanger","onPageChange","onPageSizeChange","ref","isMounted","useIsMounted","isMobile","useMaxWidthMediaQuery","hoverRightButton","setHoverRightButton","useState","hoverLeftButton","setHoverLeftButton","inputText","setInputText","selectedOption","setSelectedOption","pageSizeLocal","setPageSize","value","paginationId","useId","totalPages","Math","ceil","isFirstPage","isLastPage","firstPaginationItem","handlePaginationItemClick","undefined","lastPaginationItem","prevPaginationItem","nextPaginationItem","parseInt","toString","useEffect","setInputValue","find","option","closeAllTooltips","pageIndex","handleFastForwardClick","currentIndex","min","handleFastBackwardClick","max","handleInput","event","target","length","test","newPage","replace","handleInputSubmit","preventDefault","onHoverRightButton","onBlurRightButton","onHoverLeftButton","onBlurLeftButton","renderStartEllipsis","_jsxs","styles.ellipsisContainer","children","_jsx","ClickableIcon","styles.iconButton","focusHighlight","focusOutline","onMouseEnter","onMouseLeave","onFocus","onBlur","onClick","Chevron2LeftIcon","EllipsisHorizontalIcon","styles.hover","renderEndEllipsis","Chevron2RightIcon","clsx","styles.paginationWrapper","VisuallyHidden","styles.paginationList","styles.paginationMenu","styles.iconButtonNavigation","disabled","ChevronLineLeftIcon","ChevronLeftIcon","styles.paginationMobileInput","onSubmit","Input","styles.inputView","onChange","autoComplete","type","Typography","BodyBL","styles.labelDivider","styles.label","Array","map","e","i","endRange","boundaryRange","active","styles.pageItem","styles.pageItemSelected","onMouseOver","ChevronRightIcon","ChevronLineRightIcon","styles.inputSelectWrapper","InputSelect","options","valueExtractor","item","listExtractor","label","displayValueExtractor","onSelectOption","pagesize","totalPage"],"mappings":"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"}

package/cjs/pagination/pagination.styles.js

@@ -1,165 +1,2 @@
-"use strict";var e=require("styled-components"),o=require("../input/input.js"),r=require("../shared/clickable-icon/clickable-icon.js"),i=require("../typography/index.js"),t=require("../v3_theme/index.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=n(e);const l=a.default.nav`
-    display: flex;
-`,s=a.default.div`
-    align-self: flex-start;
-
-    display: flex;
-    align-items: center;
-
-    ${t.V3_MediaQuery.MaxWidth.lg} {
-        align-self: center;
-    }
-`,d=a.default.div`
-    display: inline-flex;
-    align-items: center;
-`,c=a.default(r.ClickableIcon)`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    outline: none;
-    border-radius: ${t.V3_Radius.sm};
-    height: 2.5rem;
-    width: 2.5rem;
-    padding: 0 ${t.V3_Spacing["spacing-8"]};
-
-    color: ${t.V3_Colour["icon-primary"]};
-
-    svg {
-        height: 1.25rem;
-        width: 1.25rem;
-    }
-
-    &:disabled {
-        color: ${t.V3_Colour["icon-disabled-subtle"]};
-        cursor: not-allowed;
-    }
-
-    &:hover,
-    &:focus-visible {
-        background-color: ${t.V3_Colour["bg-hover"]};
-    }
-`,u=a.default(r.ClickableIcon)`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    outline: none;
-    margin: ${t.V3_Spacing["spacing-4"]};
-    border-radius: ${t.V3_Radius.sm};
-    height: 2.5rem;
-    width: 2.5rem;
-    padding: 0 ${t.V3_Spacing["spacing-8"]};
-
-    color: ${t.V3_Colour["icon-primary"]};
-
-    svg {
-        height: 1.25rem;
-        width: 1.25rem;
-    }
-
-    &:disabled {
-        color: ${t.V3_Colour["icon-disabled-subtle"]};
-        cursor: not-allowed;
-    }
-
-    &:not(:disabled):hover,
-    &:not(:disabled):focus-visible {
-        background: ${t.V3_Colour["bg-hover"]};
-    }
-`,g=a.default.button`
-    outline: none;
-    margin: ${t.V3_Spacing["spacing-4"]};
-    box-shadow: none;
-    border: ${t.V3_Border["width-010"]} ${t.V3_Border.solid}
-        ${o=>e.css`
-                ${o.$selected?t.V3_Colour["bg-primary"]:t.V3_Colour.border}
-            `};
-    border-radius: ${t.V3_Radius.sm};
-    min-width: 2.5rem;
-    height: 2.5rem;
-    padding: 0 ${t.V3_Spacing["spacing-8"]};
-
-    background: ${e=>e.$selected?t.V3_Colour["bg-primary"]:t.V3_Colour.bg};
-    cursor: pointer;
-
-    ${t.V3_Font["body-baseline-regular"]};
-    text-align: center;
-    color: ${e=>e.$selected?t.V3_Colour["text-inverse"]:t.V3_Colour.text};
-
-    ${o=>o.$selected?e.css`
-                  font-weight: ${t.V3_Font.Spec["weight-bold"]};
-
-                  &:hover,
-                  &:focus-visible {
-                      border-color: ${t.V3_Colour["bg-selected-strongest-hover"]};
-                      background: ${t.V3_Colour["bg-selected-strongest-hover"]};
-                      color: ${t.V3_Colour["text-inverse"]};
-                  }
-              `:e.css`
-                  &:hover,
-                  &:focus-visible {
-                      border-color: ${t.V3_Colour["bg-hover"]};
-                      background: ${t.V3_Colour["bg-hover"]};
-                      color: ${t.V3_Colour["text-hover"]};
-                      font-weight: ${t.V3_Font.Spec["weight-semibold"]};
-                  }
-              `}
-`,p=a.default.div`
-    position: relative;
-
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    margin: ${t.V3_Spacing["spacing-4"]};
-    border-radius: ${t.V3_Radius.sm};
-    width: 2.5rem;
-    height: 2.5rem;
-
-    cursor: pointer;
-`,b=a.default.div`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    margin: ${t.V3_Spacing["spacing-4"]};
-
-    color: ${t.V3_Colour.text};
-`,h=a.default(i.Typography.BodyBL)`
-    white-space: nowrap;
-`,$=a.default(i.Typography.BodyBL)`
-    margin: 0 ${t.V3_Spacing["spacing-16"]};
-    white-space: nowrap;
-`,V=a.default(o.Input)`
-    width: 3.5rem;
-    height: 2.5rem;
-    ${t.V3_Font["body-baseline-regular"]};
-
-    input {
-        padding: 0 ${t.V3_Spacing["spacing-8"]};
-        text-align: center;
-    }
-`,_=a.default.div`
-    position: absolute;
-    top: -${t.V3_Spacing["spacing-8"]};
-    transform: translateY(-100%);
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    border: none;
-    border-radius: ${t.V3_Radius.sm};
-    width: max-content;
-    padding: ${t.V3_Spacing["spacing-4"]} ${t.V3_Spacing["spacing-12"]};
-
-    background-color: ${t.V3_Colour["bg-hover"]};
-
-    ${t.V3_Font["body-xs-regular"]}
-    color: ${t.V3_Colour["text-hover"]};
-`,m=a.default.div`
-    margin-left: ${t.V3_Spacing["spacing-4"]};
-    width: 10rem;
-`;exports.EllipsisButton=c,exports.EllipsisContainer=p,exports.Hover=_,exports.InputSelectWrapper=m,exports.InputView=V,exports.Label=h,exports.LabelDivider=$,exports.NavigationButton=u,exports.PageItem=g,exports.PaginationList=s,exports.PaginationMenu=d,exports.PaginationMobileInput=b,exports.PaginationWrapper=l;
+"use strict";require("./pagination.styles_1u898rb.css");exports.ellipsisContainer="e1peilt2",exports.hover="h1x6xag5",exports.iconButton="irakt3t",exports.iconButtonNavigation="i1eo6n86",exports.inputSelectWrapper="issm41d",exports.inputView="i1hj21s6",exports.label="l1nxoktb",exports.labelDivider="lquxmfr",exports.pageItem="pia4hww",exports.pageItemSelected="p673w5b",exports.paginationList="p1ma9kw3",exports.paginationMenu="p1sz1s7f",exports.paginationMobileInput="p1yg278j",exports.paginationWrapper="p1afjf30";
 //# sourceMappingURL=pagination.styles.js.map

package/cjs/pagination/pagination.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.styles.js","sources":["../../../src/pagination/pagination.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { Input } from \"../input\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { Typography } from \"../typography\";\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_Font,\n    V3_MediaQuery,\n    V3_Radius,\n    V3_Spacing,\n} from \"../v3_theme\";\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface StyleProps {\n    $selected: boolean;\n}\ninterface ButtonProps {\n    $position: string;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const PaginationWrapper = styled.nav`\n    display: flex;\n`;\n\nexport const PaginationList = styled.div`\n    align-self: flex-start;\n\n    display: flex;\n    align-items: center;\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        align-self: center;\n    }\n`;\n\nexport const PaginationMenu = styled.div`\n    display: inline-flex;\n    align-items: center;\n`;\n\nexport const EllipsisButton = styled(ClickableIcon)`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    outline: none;\n    border-radius: ${V3_Radius[\"sm\"]};\n    height: 2.5rem;\n    width: 2.5rem;\n    padding: 0 ${V3_Spacing[\"spacing-8\"]};\n\n    color: ${V3_Colour[\"icon-primary\"]};\n\n    svg {\n        height: 1.25rem;\n        width: 1.25rem;\n    }\n\n    &:disabled {\n        color: ${V3_Colour[\"icon-disabled-subtle\"]};\n        cursor: not-allowed;\n    }\n\n    &:hover,\n    &:focus-visible {\n        background-color: ${V3_Colour[\"bg-hover\"]};\n    }\n`;\n\nexport const NavigationButton = styled(ClickableIcon)<ButtonProps>`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    outline: none;\n    margin: ${V3_Spacing[\"spacing-4\"]};\n    border-radius: ${V3_Radius[\"sm\"]};\n    height: 2.5rem;\n    width: 2.5rem;\n    padding: 0 ${V3_Spacing[\"spacing-8\"]};\n\n    color: ${V3_Colour[\"icon-primary\"]};\n\n    svg {\n        height: 1.25rem;\n        width: 1.25rem;\n    }\n\n    &:disabled {\n        color: ${V3_Colour[\"icon-disabled-subtle\"]};\n        cursor: not-allowed;\n    }\n\n    &:not(:disabled):hover,\n    &:not(:disabled):focus-visible {\n        background: ${V3_Colour[\"bg-hover\"]};\n    }\n`;\n\nexport const PageItem = styled.button<StyleProps>`\n    outline: none;\n    margin: ${V3_Spacing[\"spacing-4\"]};\n    box-shadow: none;\n    border: ${V3_Border[\"width-010\"]} ${V3_Border.solid}\n        ${(props) =>\n            css`\n                ${props.$selected ? V3_Colour[\"bg-primary\"] : V3_Colour.border}\n            `};\n    border-radius: ${V3_Radius[\"sm\"]};\n    min-width: 2.5rem;\n    height: 2.5rem;\n    padding: 0 ${V3_Spacing[\"spacing-8\"]};\n\n    background: ${(props) =>\n        props.$selected ? V3_Colour[\"bg-primary\"] : V3_Colour.bg};\n    cursor: pointer;\n\n    ${V3_Font[\"body-baseline-regular\"]};\n    text-align: center;\n    color: ${(props) =>\n        props.$selected ? V3_Colour[\"text-inverse\"] : V3_Colour.text};\n\n    ${(props) =>\n        props.$selected\n            ? css`\n                  font-weight: ${V3_Font.Spec[\"weight-bold\"]};\n\n                  &:hover,\n                  &:focus-visible {\n                      border-color: ${V3_Colour[\"bg-selected-strongest-hover\"]};\n                      background: ${V3_Colour[\"bg-selected-strongest-hover\"]};\n                      color: ${V3_Colour[\"text-inverse\"]};\n                  }\n              `\n            : css`\n                  &:hover,\n                  &:focus-visible {\n                      border-color: ${V3_Colour[\"bg-hover\"]};\n                      background: ${V3_Colour[\"bg-hover\"]};\n                      color: ${V3_Colour[\"text-hover\"]};\n                      font-weight: ${V3_Font.Spec[\"weight-semibold\"]};\n                  }\n              `}\n`;\n\nexport const EllipsisContainer = styled.div`\n    position: relative;\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    margin: ${V3_Spacing[\"spacing-4\"]};\n    border-radius: ${V3_Radius[\"sm\"]};\n    width: 2.5rem;\n    height: 2.5rem;\n\n    cursor: pointer;\n`;\n\nexport const PaginationMobileInput = styled.div`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    margin: ${V3_Spacing[\"spacing-4\"]};\n\n    color: ${V3_Colour.text};\n`;\n\nexport const Label = styled(Typography.BodyBL)`\n    white-space: nowrap;\n`;\n\nexport const LabelDivider = styled(Typography.BodyBL)`\n    margin: 0 ${V3_Spacing[\"spacing-16\"]};\n    white-space: nowrap;\n`;\n\nexport const InputView = styled(Input)`\n    width: 3.5rem;\n    height: 2.5rem;\n    ${V3_Font[\"body-baseline-regular\"]};\n\n    input {\n        padding: 0 ${V3_Spacing[\"spacing-8\"]};\n        text-align: center;\n    }\n`;\n\nexport const Hover = styled.div`\n    position: absolute;\n    top: -${V3_Spacing[\"spacing-8\"]};\n    transform: translateY(-100%);\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    border: none;\n    border-radius: ${V3_Radius[\"sm\"]};\n    width: max-content;\n    padding: ${V3_Spacing[\"spacing-4\"]} ${V3_Spacing[\"spacing-12\"]};\n\n    background-color: ${V3_Colour[\"bg-hover\"]};\n\n    ${V3_Font[\"body-xs-regular\"]}\n    color: ${V3_Colour[\"text-hover\"]};\n`;\n\nexport const InputSelectWrapper = styled.div`\n    margin-left: ${V3_Spacing[\"spacing-4\"]};\n    width: 10rem;\n`;\n"],"names":["PaginationWrapper","styled","nav","PaginationList","div","V3_MediaQuery","MaxWidth","lg","PaginationMenu","EllipsisButton","ClickableIcon","V3_Radius","V3_Spacing","V3_Colour","NavigationButton","PageItem","button","V3_Border","solid","props","css","$selected","border","bg","V3_Font","text","Spec","EllipsisContainer","PaginationMobileInput","Label","Typography","BodyBL","LabelDivider","InputView","Input","Hover","InputSelectWrapper"],"mappings":"gSA2BO,MAAMA,EAAoBC,EAAAA,QAAOC,GAAG;;EAI9BC,EAAiBF,EAAAA,QAAOG,GAAG;;;;;;MAMlCC,EAAAA,cAAcC,SAASC;;;EAKhBC,EAAiBP,EAAAA,QAAOG,GAAG;;;EAK3BK,EAAiBR,EAAAA,QAAOS,EAAAA,cAAc;;;;;;qBAM9BC,EAAAA,UAAc;;;iBAGlBC,EAAAA,WAAW;;aAEfC,EAAAA,UAAU;;;;;;;;iBAQNA,EAAAA,UAAU;;;;;;4BAMCA,EAAAA,UAAU;;EAIzBC,EAAmBb,EAAAA,QAAOS,EAAAA,cAA2B;;;;;;cAMpDE,EAAAA,WAAW;qBACJD,EAAAA,UAAc;;;iBAGlBC,EAAAA,WAAW;;aAEfC,EAAAA,UAAU;;;;;;;;iBAQNA,EAAAA,UAAU;;;;;;sBAMLA,EAAAA,UAAU;;EAInBE,EAAWd,EAAAA,QAAOe,MAAkB;;cAEnCJ,EAAAA,WAAW;;cAEXK,EAAAA,UAAU,gBAAgBA,EAAAA,UAAUC;UACvCC,GACCC,KAAG;kBACGD,EAAME,UAAYR,EAAAA,UAAU,cAAgBA,EAAAA,UAAUS;;qBAEnDX,EAAAA,UAAc;;;iBAGlBC,EAAAA,WAAW;;kBAETO,GACXA,EAAME,UAAYR,EAAAA,UAAU,cAAgBA,EAAAA,UAAUU;;;MAGxDC,EAAAA,QAAQ;;aAEAL,GACNA,EAAME,UAAYR,EAAAA,UAAU,gBAAkBA,EAAAA,UAAUY;;MAEzDN,GACCA,EAAME,UACAD,KAAG;iCACgBI,EAAAA,QAAQE,KAAK;;;;sCAIRb,EAAAA,UAAU;oCACZA,EAAAA,UAAU;+BACfA,EAAAA,UAAU;;gBAG3BO,KAAG;;;sCAGqBP,EAAAA,UAAU;oCACZA,EAAAA,UAAU;+BACfA,EAAAA,UAAU;qCACJW,EAAAA,QAAQE,KAAK;;;EAKrCC,EAAoB1B,EAAAA,QAAOG,GAAG;;;;;;;cAO7BQ,EAAAA,WAAW;qBACJD,EAAAA,UAAc;;;;;EAOtBiB,EAAwB3B,EAAAA,QAAOG,GAAG;;;;;cAKjCQ,EAAAA,WAAW;;aAEZC,EAAAA,UAAUY;EAGVI,EAAQ5B,EAAAA,QAAO6B,aAAWC,OAAO;;EAIjCC,EAAe/B,EAAAA,QAAO6B,aAAWC,OAAO;gBACrCnB,EAAAA,WAAW;;EAIdqB,EAAYhC,EAAAA,QAAOiC,EAAAA,MAAM;;;MAGhCV,EAAAA,QAAQ;;;qBAGOZ,EAAAA,WAAW;;;EAKnBuB,EAAQlC,EAAAA,QAAOG,GAAG;;YAEnBQ,EAAAA,WAAW;;;;;;;;qBAQFD,EAAAA,UAAc;;eAEpBC,EAAAA,WAAW,gBAAgBA,EAAAA,WAAW;;wBAE7BC,EAAAA,UAAU;;MAE5BW,EAAAA,QAAQ;aACDX,EAAAA,UAAU;EAGVuB,EAAqBnC,EAAAA,QAAOG,GAAG;mBACzBQ,EAAAA,WAAW;;"}
+{"version":3,"file":"pagination.styles.js","sources":["../../../src/pagination/pagination.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, MediaQuery, Radius, Spacing } from \"../theme\";\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const paginationWrapper = css`\n    display: flex;\n`;\n\nexport const paginationList = css`\n    align-self: flex-start;\n\n    display: flex;\n    align-items: center;\n\n    ${MediaQuery.MaxWidth.lg} {\n        align-self: center;\n    }\n`;\n\nexport const paginationMenu = css`\n    display: inline-flex;\n    align-items: center;\n`;\n\nexport const iconButton = css`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    outline: none;\n    border-radius: ${Radius.sm};\n    height: 2.5rem;\n    width: 2.5rem;\n    padding: 0 ${Spacing[\"spacing-8\"]};\n\n    color: ${Colour[\"icon-primary\"]};\n\n    svg {\n        height: 1.25rem;\n        width: 1.25rem;\n    }\n\n    &:disabled {\n        color: ${Colour[\"icon-disabled-subtle\"]};\n        cursor: not-allowed;\n    }\n\n    &:not(:disabled):hover,\n    &:not(:disabled):focus-visible {\n        background: ${Colour[\"bg-hover\"]};\n    }\n`;\n\nexport const iconButtonNavigation = css`\n    margin: ${Spacing[\"spacing-4\"]};\n`;\n\nexport const pageItem = css`\n    outline: none;\n    margin: ${Spacing[\"spacing-4\"]};\n    box-shadow: none;\n    border: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n    border-radius: ${Radius.sm};\n    min-width: 2.5rem;\n    height: 2.5rem;\n    padding: 0 ${Spacing[\"spacing-8\"]};\n\n    background: ${Colour.bg};\n    cursor: pointer;\n\n    ${Font[\"body-baseline-regular\"]};\n    text-align: center;\n    color: ${Colour.text};\n\n    &:hover,\n    &:focus-visible {\n        border-color: ${Colour[\"bg-hover\"]};\n        background: ${Colour[\"bg-hover\"]};\n        color: ${Colour[\"text-hover\"]};\n        font-weight: ${Font.Spec[\"weight-semibold\"]};\n    }\n`;\n\nexport const pageItemSelected = css`\n    border-color: ${Colour[\"bg-primary\"]};\n    background: ${Colour[\"bg-primary\"]};\n    color: ${Colour[\"text-inverse\"]};\n    font-weight: ${Font.Spec[\"weight-bold\"]};\n\n    &:hover,\n    &:focus-visible {\n        border-color: ${Colour[\"bg-selected-strongest-hover\"]};\n        background: ${Colour[\"bg-selected-strongest-hover\"]};\n        color: ${Colour[\"text-inverse\"]};\n        font-weight: ${Font.Spec[\"weight-bold\"]};\n    }\n`;\n\nexport const ellipsisContainer = css`\n    position: relative;\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    margin: ${Spacing[\"spacing-4\"]};\n\n    cursor: pointer;\n`;\n\nexport const paginationMobileInput = css`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    margin: ${Spacing[\"spacing-4\"]};\n\n    color: ${Colour.text};\n`;\n\nexport const label = css`\n    white-space: nowrap;\n`;\n\nexport const labelDivider = css`\n    margin: 0 ${Spacing[\"spacing-16\"]};\n    white-space: nowrap;\n`;\n\nexport const inputView = css`\n    width: 3.5rem;\n    height: 2.5rem;\n    ${Font[\"body-baseline-regular\"]};\n\n    input {\n        padding: 0 ${Spacing[\"spacing-8\"]};\n        text-align: center;\n    }\n`;\n\nexport const hover = css`\n    position: absolute;\n    top: calc(${Spacing[\"spacing-8\"]} * -1);\n    transform: translateY(-100%);\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    border: none;\n    border-radius: ${Radius.sm};\n    width: max-content;\n    padding: ${Spacing[\"spacing-4\"]} ${Spacing[\"spacing-12\"]};\n\n    background: ${Colour[\"bg-hover\"]};\n\n    ${Font[\"body-xs-regular\"]}\n    color: ${Colour[\"text-hover\"]};\n`;\n\nexport const inputSelectWrapper = css`\n    margin-left: ${Spacing[\"spacing-4\"]};\n    width: 10rem;\n`;\n"],"names":[],"mappings":"4GAoG8B,yBA0CZ,8BApHK,uCA6BU,sCA2GF,4BA/BT,yBATJ,gCAIO,2BAnEJ,mCA0BQ,iCA3EF,kCAWA,yCA2FO,qCA1GJ"}

package/cjs/pagination/pagination.styles_1u898rb.css

@@ -0,0 +1,14 @@
+.p1afjf30{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
+.p1ma9kw3{-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}:where(body.fds-breakpoint-lg-max) .p1ma9kw3{-webkit-align-self:center;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;}
+.p1sz1s7f{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
+.irakt3t{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;outline:none;border-radius:var(--fds-radius-sm);height:2.5rem;width:2.5rem;padding:0 var(--fds-spacing-8);color:var(--fds-colour-icon-primary);}.irakt3t svg{height:1.25rem;width:1.25rem;}.irakt3t:disabled{color:var(--fds-colour-icon-disabled-subtle);cursor:not-allowed;}.irakt3t:not(:disabled):hover,.irakt3t:not(:disabled):focus-visible{background:var(--fds-colour-bg-hover);}
+.i1eo6n86{margin:var(--fds-spacing-4);}
+.pia4hww{outline:none;margin:var(--fds-spacing-4);box-shadow:none;border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-sm);min-width:2.5rem;height:2.5rem;padding:0 var(--fds-spacing-8);background:var(--fds-colour-bg);cursor:pointer;font-family:var(--fds-font-family);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);text-align:center;color:var(--fds-colour-text);}.pia4hww:hover,.pia4hww:focus-visible{border-color:var(--fds-colour-bg-hover);background:var(--fds-colour-bg-hover);color:var(--fds-colour-text-hover);font-weight:var(--fds-font-weight-semibold);}
+.p673w5b{border-color:var(--fds-colour-bg-primary);background:var(--fds-colour-bg-primary);color:var(--fds-colour-text-inverse);font-weight:var(--fds-font-weight-bold);}.p673w5b:hover,.p673w5b:focus-visible{border-color:var(--fds-colour-bg-selected-strongest-hover);background:var(--fds-colour-bg-selected-strongest-hover);color:var(--fds-colour-text-inverse);font-weight:var(--fds-font-weight-bold);}
+.e1peilt2{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:var(--fds-spacing-4);cursor:pointer;}
+.p1yg278j{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:var(--fds-spacing-4);color:var(--fds-colour-text);}
+.l1nxoktb{white-space:nowrap;}
+.lquxmfr{margin:0 var(--fds-spacing-16);white-space:nowrap;}
+.i1hj21s6{width:3.5rem;height:2.5rem;font-family:var(--fds-font-family);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);}.i1hj21s6 input{padding:0 var(--fds-spacing-8);text-align:center;}
+.h1x6xag5{position:absolute;top:calc(var(--fds-spacing-8) * -1);-webkit-transform:translateY(-100%);-moz-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-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;border:none;border-radius:var(--fds-radius-sm);width:-webkit-max-content;width:-moz-max-content;width:max-content;padding:var(--fds-spacing-4) var(--fds-spacing-12);background:var(--fds-colour-bg-hover);font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-xs);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);color:var(--fds-colour-text-hover);}
+.issm41d{margin-left:var(--fds-spacing-4);width:10rem;}

package/cjs/phone-number-input/phone-number-input.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),o=require("react"),t=require("../input-group/input-group.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("../util/string-helper.js");var n=require("../util/use-next-input-state.js"),l=require("./phone-number-input-helper.js");const u=e=>e?e.replace("+",""):"",a=e=>e?e.includes("+")?e:`+${e}`:"";exports.PhoneNumberInput=i=>{var{onChange:p,value:s,allowClear:c,onClear:d,onBlur:h,error:m,fixedCountry:b=!1,optionPlaceholder:C="Select",optionSearchPlaceholder:y,enableSearch:f,onHideOptions:S,onShowOptions:v,placeholder:j,autoComplete:P,noBorder:x=!1}=i,N=e.__rest(i,["onChange","value","allowClear","onClear","onBlur","error","fixedCountry","optionPlaceholder","optionSearchPlaceholder","enableSearch","onHideOptions","onShowOptions","placeholder","autoComplete","noBorder"]);const[g]=o.useState(l.PhoneNumberInputHelper.getCountries()),[q,O]=o.useState(void 0),[H,I]=o.useState(""),w=o.useRef(null),B=n.useNextInputState({ref:w,formatter:e=>l.PhoneNumberInputHelper.formatNumber(e.replace(/[^0-9]/g,""),q)});o.useEffect((()=>{const e=g.filter((e=>e.countryCode===u(null==s?void 0:s.countryCode)))[0];O(e),I(l.PhoneNumberInputHelper.formatNumber(null==s?void 0:s.number,e))}),[s]);const E=e=>{$(H,e),p&&_(H,e)},_=(e,r)=>{const o=l.PhoneNumberInputHelper.formatNumber(e,r);null==p||p({number:o.replace(/[\s()]+/g,""),countryCode:r&&a(r.countryCode)})},$=(e,r)=>{I(l.PhoneNumberInputHelper.formatNumber(e,r)),O(r)};return r.jsx(t.InputGroup,Object.assign({ref:w,value:H,onChange:()=>{const e=B();if(!e)return;const{nextValue:r,updateCaretPosition:o}=e;o(),$(r,q),p&&_(r,q)},allowClear:c&&!!H,onClear:()=>{d?d():I("")},onBlur:h,error:m,placeholder:j,addon:b?{type:"label",attributes:{value:a(null==q?void 0:q.countryCode)}}:{type:"list",attributes:{"aria-label":"Country code",placeholder:C,options:g,selectedOption:q,enableSearch:f,searchPlaceholder:y,valueExtractor:e=>`+${e.countryCode}`,listExtractor:e=>({title:e.name,secondaryLabel:a(e.countryCode)}),onSelectOption:E,onHideOptions:S,onShowOptions:v}},inputMode:"numeric",autoComplete:P,"aria-label":"Enter phone number",noBorder:x},N))};
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),o=require("react"),t=require("../input-group/input-group.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var n=require("../util/use-next-input-state.js"),l=require("./phone-number-input-helper.js");const u=e=>e?e.replace("+",""):"",a=e=>e?e.includes("+")?e:`+${e}`:"";exports.PhoneNumberInput=i=>{var p,{id:s,onChange:c,value:d,allowClear:h,onClear:b,onBlur:m,error:C,fixedCountry:v=!1,optionPlaceholder:y="Select",optionSearchPlaceholder:f,enableSearch:S,onHideOptions:g,onShowOptions:j,placeholder:P,autoComplete:q,noBorder:x=!1,getAriaLabel:N}=i,O=e.__rest(i,["id","onChange","value","allowClear","onClear","onBlur","error","fixedCountry","optionPlaceholder","optionSearchPlaceholder","enableSearch","onHideOptions","onShowOptions","placeholder","autoComplete","noBorder","getAriaLabel"]);const[H]=o.useState(l.PhoneNumberInputHelper.getCountries()),[I,w]=o.useState(void 0),[B,E]=o.useState(""),_=o.useRef(null),L=n.useNextInputState({ref:_,formatter:e=>l.PhoneNumberInputHelper.formatNumber(e.replace(/[^0-9]/g,""),I)}),A=null!==(p=null==N?void 0:N(I))&&void 0!==p?p:"Enter phone number";o.useEffect((()=>{const e=H.filter((e=>e.countryCode===u(null==d?void 0:d.countryCode)))[0];w(e),E(l.PhoneNumberInputHelper.formatNumber(null==d?void 0:d.number,e))}),[d]);const $=e=>{M(B,e),c&&G(B,e)},G=(e,r)=>{const o=l.PhoneNumberInputHelper.formatNumber(e,r);null==c||c({number:o.replace(/[\s()]+/g,""),countryCode:r&&a(r.countryCode)})},M=(e,r)=>{E(l.PhoneNumberInputHelper.formatNumber(e,r)),w(r)};return r.jsx(t.InputGroup,Object.assign({id:s,ref:_,value:B,onChange:()=>{const e=L();if(!e)return;const{nextValue:r,updateCaretPosition:o}=e;o(),M(r,I),c&&G(r,I)},allowClear:h&&!!B,onClear:()=>{b?b():E("")},onBlur:m,error:C,placeholder:P,addon:v?{type:"label",attributes:{value:a(null==I?void 0:I.countryCode)}}:{type:"list",attributes:{"aria-label":"Country code",placeholder:y,options:H,selectedOption:I,enableSearch:S,searchPlaceholder:f,valueExtractor:e=>`+${e.countryCode}`,listExtractor:e=>({title:e.name,secondaryLabel:a(e.countryCode)}),onSelectOption:$,onHideOptions:g,onShowOptions:j}},inputMode:"numeric",autoComplete:q,noBorder:x,"aria-label":A},O))};
 //# sourceMappingURL=phone-number-input.js.map

package/cjs/phone-number-input/phone-number-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"phone-number-input.js","sources":["../../../src/phone-number-input/phone-number-input.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\nimport { InputGroup } from \"../input-group/input-group\";\nimport type { AddonProps, LabelAddon, ListAddon } from \"../input-group/types\";\nimport { useNextInputState } from \"../util\";\nimport { PhoneNumberInputHelper } from \"./phone-number-input-helper\";\nimport type { CountryValue, PhoneNumberInputProps } from \"./types\";\n\nexport const PhoneNumberInput = ({\n    onChange,\n    value,\n    allowClear,\n    onClear,\n    onBlur,\n    error,\n    fixedCountry = false,\n    optionPlaceholder = \"Select\",\n    optionSearchPlaceholder,\n    enableSearch,\n    onHideOptions,\n    onShowOptions,\n    placeholder,\n    autoComplete,\n    noBorder = false,\n    ...otherProps\n}: PhoneNumberInputProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [options] = useState<CountryValue[]>(\n        PhoneNumberInputHelper.getCountries()\n    );\n\n    const [selectedCountry, setSelectedCountry] = useState<\n        CountryValue | undefined\n    >(undefined);\n    const [inputValue, setInputValue] = useState<string>(\"\");\n\n    const nodeRef = useRef<HTMLInputElement>(null);\n\n    const getNextInputState = useNextInputState({\n        ref: nodeRef,\n        formatter: (value) =>\n            PhoneNumberInputHelper.formatNumber(\n                value.replace(/[^0-9]/g, \"\"),\n                selectedCountry\n            ),\n    });\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        const selectedOption = options.filter(\n            (country) =>\n                country.countryCode === normaliseCountryCode(value?.countryCode)\n        )[0];\n\n        setSelectedCountry(selectedOption);\n        setInputValue(\n            PhoneNumberInputHelper.formatNumber(value?.number, selectedOption)\n        );\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleClear = () => {\n        if (onClear) {\n            onClear();\n        } else {\n            setInputValue(\"\");\n        }\n    };\n\n    const handleInputChange = () => {\n        const nextState = getNextInputState();\n        if (!nextState) return;\n\n        const { nextValue, updateCaretPosition } = nextState;\n\n        updateCaretPosition();\n        performLocalChangeHandler(nextValue, selectedCountry);\n        if (onChange) {\n            performOnChangeHandler(nextValue, selectedCountry);\n        }\n    };\n\n    const handleSelectOption = (country: CountryValue) => {\n        performLocalChangeHandler(inputValue, country);\n        if (onChange) {\n            performOnChangeHandler(inputValue, country);\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const performOnChangeHandler = (\n        inputValue: string,\n        selectedCountry: CountryValue | undefined\n    ) => {\n        const formatedInputValue = PhoneNumberInputHelper.formatNumber(\n            inputValue,\n            selectedCountry\n        );\n        onChange?.({\n            number: formatedInputValue.replace(/[\\s()]+/g, \"\"), // strip formatted spaces\n            countryCode:\n                selectedCountry && addPlusPrefix(selectedCountry.countryCode),\n        });\n    };\n\n    const performLocalChangeHandler = (\n        inputValue: string,\n        selectedCountry: CountryValue | undefined\n    ) => {\n        setInputValue(\n            PhoneNumberInputHelper.formatNumber(inputValue, selectedCountry)\n        );\n\n        setSelectedCountry(selectedCountry);\n    };\n\n    const getAddonProps = (): AddonProps<CountryValue, string> => {\n        if (fixedCountry) {\n            return {\n                type: \"label\",\n                attributes: {\n                    value: addPlusPrefix(selectedCountry?.countryCode),\n                } as LabelAddon,\n            };\n        } else {\n            return {\n                type: \"list\",\n                attributes: {\n                    \"aria-label\": \"Country code\",\n                    placeholder: optionPlaceholder,\n                    options,\n                    selectedOption: selectedCountry,\n                    enableSearch: enableSearch,\n                    searchPlaceholder: optionSearchPlaceholder,\n                    valueExtractor: (option) => `+${option.countryCode}`,\n                    listExtractor: (option) => ({\n                        title: option.name,\n                        secondaryLabel: addPlusPrefix(option.countryCode),\n                    }),\n                    onSelectOption: handleSelectOption,\n                    onHideOptions: onHideOptions,\n                    onShowOptions: onShowOptions,\n                } as ListAddon<CountryValue, string>,\n            };\n        }\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <InputGroup\n            ref={nodeRef}\n            value={inputValue}\n            onChange={handleInputChange}\n            allowClear={allowClear && !!inputValue}\n            onClear={handleClear}\n            onBlur={onBlur}\n            error={error}\n            placeholder={placeholder}\n            addon={getAddonProps()}\n            inputMode=\"numeric\"\n            autoComplete={autoComplete}\n            aria-label=\"Enter phone number\"\n            noBorder={noBorder}\n            {...otherProps}\n        />\n    );\n};\n\n// =============================================================================\n// HELPER FUNCTIONS\n// =============================================================================\n/**\n * This strips the + off the specified country code if it\n * is present.\n */\nconst normaliseCountryCode = (countryCode: string | undefined): string => {\n    return countryCode ? countryCode.replace(\"+\", \"\") : \"\";\n};\n\nconst addPlusPrefix = (countryCode?: string): string => {\n    if (!countryCode) return \"\";\n    return countryCode.includes(\"+\") ? countryCode : `+${countryCode}`;\n};\n"],"names":["normaliseCountryCode","countryCode","replace","addPlusPrefix","includes","_a","onChange","value","allowClear","onClear","onBlur","error","fixedCountry","optionPlaceholder","optionSearchPlaceholder","enableSearch","onHideOptions","onShowOptions","placeholder","autoComplete","noBorder","otherProps","__rest","options","useState","PhoneNumberInputHelper","getCountries","selectedCountry","setSelectedCountry","undefined","inputValue","setInputValue","nodeRef","useRef","getNextInputState","useNextInputState","ref","formatter","formatNumber","useEffect","selectedOption","filter","country","number","handleSelectOption","performLocalChangeHandler","performOnChangeHandler","formatedInputValue","_jsx","InputGroup","Object","assign","nextState","nextValue","updateCaretPosition","addon","type","attributes","searchPlaceholder","valueExtractor","option","listExtractor","title","name","secondaryLabel","onSelectOption","inputMode"],"mappings":"kWAQO,MAiLDA,EAAwBC,GACnBA,EAAcA,EAAYC,QAAQ,IAAK,IAAM,GAGlDC,EAAiBF,GACdA,EACEA,EAAYG,SAAS,KAAOH,EAAc,IAAIA,IAD5B,4BAtLII,IAAA,IAAAC,SAC7BA,EAAQC,MACRA,EAAKC,WACLA,EAAUC,QACVA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,aACLA,GAAe,EAAKC,kBACpBA,EAAoB,SAAQC,wBAC5BA,EAAuBC,aACvBA,EAAYC,cACZA,EAAaC,cACbA,EAAaC,YACbA,EAAWC,aACXA,EAAYC,SACZA,GAAW,GAAKf,EACbgB,EAAUC,EAAAA,OAAAjB,EAhBgB,kNAqB7B,MAAOkB,GAAWC,EAAAA,SACdC,EAAAA,uBAAuBC,iBAGpBC,EAAiBC,GAAsBJ,EAAAA,cAE5CK,IACKC,EAAYC,GAAiBP,EAAAA,SAAiB,IAE/CQ,EAAUC,EAAAA,OAAyB,MAEnCC,EAAoBC,EAAAA,kBAAkB,CACxCC,IAAKJ,EACLK,UAAY9B,GACRkB,EAAAA,uBAAuBa,aACnB/B,EAAML,QAAQ,UAAW,IACzByB,KAOZY,EAAAA,WAAU,KACN,MAAMC,EAAiBjB,EAAQkB,QAC1BC,GACGA,EAAQzC,cAAgBD,EAAqBO,aAAK,EAALA,EAAON,eAC1D,GAEF2B,EAAmBY,GACnBT,EACIN,EAAAA,uBAAuBa,aAAa/B,aAAK,EAALA,EAAOoC,OAAQH,GACtD,GACF,CAACjC,IAKJ,MAqBMqC,EAAsBF,IACxBG,EAA0Bf,EAAYY,GAClCpC,GACAwC,EAAuBhB,EAAYY,EACvC,EAMEI,EAAyB,CAC3BhB,EACAH,KAEA,MAAMoB,EAAqBtB,EAAAA,uBAAuBa,aAC9CR,EACAH,GAEJrB,SAAAA,EAAW,CACPqC,OAAQI,EAAmB7C,QAAQ,WAAY,IAC/CD,YACI0B,GAAmBxB,EAAcwB,EAAgB1B,cACvD,EAGA4C,EAA4B,CAC9Bf,EACAH,KAEAI,EACIN,EAAAA,uBAAuBa,aAAaR,EAAYH,IAGpDC,EAAmBD,EAAgB,EAqCvC,OACIqB,EAAAA,IAACC,EAAAA,WAAUC,OAAAC,OAAA,CACPf,IAAKJ,EACLzB,MAAOuB,EACPxB,SAvFkB,KACtB,MAAM8C,EAAYlB,IAClB,IAAKkB,EAAW,OAEhB,MAAMC,UAAEA,EAASC,oBAAEA,GAAwBF,EAE3CE,IACAT,EAA0BQ,EAAW1B,GACjCrB,GACAwC,EAAuBO,EAAW1B,EACtC,EA8EInB,WAAYA,KAAgBsB,EAC5BrB,QAjGY,KACZA,EACAA,IAEAsB,EAAc,GAClB,EA6FIrB,OAAQA,EACRC,MAAOA,EACPO,YAAaA,EACbqC,MA3CA3C,EACO,CACH4C,KAAM,QACNC,WAAY,CACRlD,MAAOJ,EAAcwB,aAAe,EAAfA,EAAiB1B,eAIvC,CACHuD,KAAM,OACNC,WAAY,CACR,aAAc,eACdvC,YAAaL,EACbU,UACAiB,eAAgBb,EAChBZ,aAAcA,EACd2C,kBAAmB5C,EACnB6C,eAAiBC,GAAW,IAAIA,EAAO3D,cACvC4D,cAAgBD,IAAM,CAClBE,MAAOF,EAAOG,KACdC,eAAgB7D,EAAcyD,EAAO3D,eAEzCgE,eAAgBrB,EAChB5B,cAAeA,EACfC,cAAeA,IAoBvBiD,UAAU,UACV/C,aAAcA,EAAY,aACf,qBACXC,SAAUA,GACNC,GACN"}
+{"version":3,"file":"phone-number-input.js","sources":["../../../src/phone-number-input/phone-number-input.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\nimport { InputGroup } from \"../input-group/input-group\";\nimport type { AddonProps, LabelAddon, ListAddon } from \"../input-group/types\";\nimport { useNextInputState } from \"../util\";\nimport { PhoneNumberInputHelper } from \"./phone-number-input-helper\";\nimport type { CountryValue, PhoneNumberInputProps } from \"./types\";\n\nexport const PhoneNumberInput = ({\n    id,\n    onChange,\n    value,\n    allowClear,\n    onClear,\n    onBlur,\n    error,\n    fixedCountry = false,\n    optionPlaceholder = \"Select\",\n    optionSearchPlaceholder,\n    enableSearch,\n    onHideOptions,\n    onShowOptions,\n    placeholder,\n    autoComplete,\n    noBorder = false,\n    getAriaLabel,\n    ...otherProps\n}: PhoneNumberInputProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [options] = useState<CountryValue[]>(\n        PhoneNumberInputHelper.getCountries()\n    );\n\n    const [selectedCountry, setSelectedCountry] = useState<\n        CountryValue | undefined\n    >(undefined);\n    const [inputValue, setInputValue] = useState<string>(\"\");\n\n    const nodeRef = useRef<HTMLInputElement>(null);\n\n    const getNextInputState = useNextInputState({\n        ref: nodeRef,\n        formatter: (value) =>\n            PhoneNumberInputHelper.formatNumber(\n                value.replace(/[^0-9]/g, \"\"),\n                selectedCountry\n            ),\n    });\n\n    const resolvedAriaLabel =\n        getAriaLabel?.(selectedCountry) ?? \"Enter phone number\";\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        const selectedOption = options.filter(\n            (country) =>\n                country.countryCode === normaliseCountryCode(value?.countryCode)\n        )[0];\n\n        setSelectedCountry(selectedOption);\n        setInputValue(\n            PhoneNumberInputHelper.formatNumber(value?.number, selectedOption)\n        );\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleClear = () => {\n        if (onClear) {\n            onClear();\n        } else {\n            setInputValue(\"\");\n        }\n    };\n\n    const handleInputChange = () => {\n        const nextState = getNextInputState();\n        if (!nextState) return;\n\n        const { nextValue, updateCaretPosition } = nextState;\n\n        updateCaretPosition();\n        performLocalChangeHandler(nextValue, selectedCountry);\n        if (onChange) {\n            performOnChangeHandler(nextValue, selectedCountry);\n        }\n    };\n\n    const handleSelectOption = (country: CountryValue) => {\n        performLocalChangeHandler(inputValue, country);\n        if (onChange) {\n            performOnChangeHandler(inputValue, country);\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const performOnChangeHandler = (\n        inputValue: string,\n        selectedCountry: CountryValue | undefined\n    ) => {\n        const formatedInputValue = PhoneNumberInputHelper.formatNumber(\n            inputValue,\n            selectedCountry\n        );\n        onChange?.({\n            number: formatedInputValue.replace(/[\\s()]+/g, \"\"), // strip formatted spaces\n            countryCode:\n                selectedCountry && addPlusPrefix(selectedCountry.countryCode),\n        });\n    };\n\n    const performLocalChangeHandler = (\n        inputValue: string,\n        selectedCountry: CountryValue | undefined\n    ) => {\n        setInputValue(\n            PhoneNumberInputHelper.formatNumber(inputValue, selectedCountry)\n        );\n\n        setSelectedCountry(selectedCountry);\n    };\n\n    const getAddonProps = (): AddonProps<CountryValue, string> => {\n        if (fixedCountry) {\n            return {\n                type: \"label\",\n                attributes: {\n                    value: addPlusPrefix(selectedCountry?.countryCode),\n                } as LabelAddon,\n            };\n        } else {\n            return {\n                type: \"list\",\n                attributes: {\n                    \"aria-label\": \"Country code\",\n                    placeholder: optionPlaceholder,\n                    options,\n                    selectedOption: selectedCountry,\n                    enableSearch: enableSearch,\n                    searchPlaceholder: optionSearchPlaceholder,\n                    valueExtractor: (option) => `+${option.countryCode}`,\n                    listExtractor: (option) => ({\n                        title: option.name,\n                        secondaryLabel: addPlusPrefix(option.countryCode),\n                    }),\n                    onSelectOption: handleSelectOption,\n                    onHideOptions: onHideOptions,\n                    onShowOptions: onShowOptions,\n                } as ListAddon<CountryValue, string>,\n            };\n        }\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <InputGroup\n            id={id}\n            ref={nodeRef}\n            value={inputValue}\n            onChange={handleInputChange}\n            allowClear={allowClear && !!inputValue}\n            onClear={handleClear}\n            onBlur={onBlur}\n            error={error}\n            placeholder={placeholder}\n            addon={getAddonProps()}\n            inputMode=\"numeric\"\n            autoComplete={autoComplete}\n            noBorder={noBorder}\n            aria-label={resolvedAriaLabel}\n            {...otherProps}\n        />\n    );\n};\n\n// =============================================================================\n// HELPER FUNCTIONS\n// =============================================================================\n/**\n * This strips the + off the specified country code if it\n * is present.\n */\nconst normaliseCountryCode = (countryCode: string | undefined): string => {\n    return countryCode ? countryCode.replace(\"+\", \"\") : \"\";\n};\n\nconst addPlusPrefix = (countryCode?: string): string => {\n    if (!countryCode) return \"\";\n    return countryCode.includes(\"+\") ? countryCode : `+${countryCode}`;\n};\n"],"names":["normaliseCountryCode","countryCode","replace","addPlusPrefix","includes","_a","id","onChange","value","allowClear","onClear","onBlur","error","fixedCountry","optionPlaceholder","optionSearchPlaceholder","enableSearch","onHideOptions","onShowOptions","placeholder","autoComplete","noBorder","getAriaLabel","otherProps","__rest","options","useState","PhoneNumberInputHelper","getCountries","selectedCountry","setSelectedCountry","undefined","inputValue","setInputValue","nodeRef","useRef","getNextInputState","useNextInputState","ref","formatter","formatNumber","resolvedAriaLabel","_b","useEffect","selectedOption","filter","country","number","handleSelectOption","performLocalChangeHandler","performOnChangeHandler","formatedInputValue","_jsx","InputGroup","Object","assign","nextState","nextValue","updateCaretPosition","addon","type","attributes","searchPlaceholder","valueExtractor","option","listExtractor","title","name","secondaryLabel","onSelectOption","inputMode"],"mappings":"kbAQO,MAuLDA,EAAwBC,GACnBA,EAAcA,EAAYC,QAAQ,IAAK,IAAM,GAGlDC,EAAiBF,GACdA,EACEA,EAAYG,SAAS,KAAOH,EAAc,IAAIA,IAD5B,4BA5LII,WAAAC,GAC7BA,EAAEC,SACFA,EAAQC,MACRA,EAAKC,WACLA,EAAUC,QACVA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,aACLA,GAAe,EAAKC,kBACpBA,EAAoB,SAAQC,wBAC5BA,EAAuBC,aACvBA,EAAYC,cACZA,EAAaC,cACbA,EAAaC,YACbA,EAAWC,aACXA,EAAYC,SACZA,GAAW,EAAKC,aAChBA,GAAYjB,EACTkB,EAAUC,EAAAA,OAAAnB,EAlBgB,sOAuB7B,MAAOoB,GAAWC,EAAAA,SACdC,EAAAA,uBAAuBC,iBAGpBC,EAAiBC,GAAsBJ,EAAAA,cAE5CK,IACKC,EAAYC,GAAiBP,EAAAA,SAAiB,IAE/CQ,EAAUC,EAAAA,OAAyB,MAEnCC,EAAoBC,EAAAA,kBAAkB,CACxCC,IAAKJ,EACLK,UAAY/B,GACRmB,EAAAA,uBAAuBa,aACnBhC,EAAMN,QAAQ,UAAW,IACzB2B,KAINY,EAC6B,QAA/BC,EAAApB,aAAY,EAAZA,EAAeO,UAAgB,IAAAa,EAAAA,EAAI,qBAKvCC,EAAAA,WAAU,KACN,MAAMC,EAAiBnB,EAAQoB,QAC1BC,GACGA,EAAQ7C,cAAgBD,EAAqBQ,aAAK,EAALA,EAAOP,eAC1D,GAEF6B,EAAmBc,GACnBX,EACIN,EAAAA,uBAAuBa,aAAahC,aAAK,EAALA,EAAOuC,OAAQH,GACtD,GACF,CAACpC,IAKJ,MAqBMwC,EAAsBF,IACxBG,EAA0BjB,EAAYc,GAClCvC,GACA2C,EAAuBlB,EAAYc,EACvC,EAMEI,EAAyB,CAC3BlB,EACAH,KAEA,MAAMsB,EAAqBxB,EAAAA,uBAAuBa,aAC9CR,EACAH,GAEJtB,SAAAA,EAAW,CACPwC,OAAQI,EAAmBjD,QAAQ,WAAY,IAC/CD,YACI4B,GAAmB1B,EAAc0B,EAAgB5B,cACvD,EAGAgD,EAA4B,CAC9BjB,EACAH,KAEAI,EACIN,EAAAA,uBAAuBa,aAAaR,EAAYH,IAGpDC,EAAmBD,EAAgB,EAqCvC,OACIuB,EAAAA,IAACC,EAAAA,WAAUC,OAAAC,OAAA,CACPjD,GAAIA,EACJgC,IAAKJ,EACL1B,MAAOwB,EACPzB,SAxFkB,KACtB,MAAMiD,EAAYpB,IAClB,IAAKoB,EAAW,OAEhB,MAAMC,UAAEA,EAASC,oBAAEA,GAAwBF,EAE3CE,IACAT,EAA0BQ,EAAW5B,GACjCtB,GACA2C,EAAuBO,EAAW5B,EACtC,EA+EIpB,WAAYA,KAAgBuB,EAC5BtB,QAlGY,KACZA,EACAA,IAEAuB,EAAc,GAClB,EA8FItB,OAAQA,EACRC,MAAOA,EACPO,YAAaA,EACbwC,MA5CA9C,EACO,CACH+C,KAAM,QACNC,WAAY,CACRrD,MAAOL,EAAc0B,aAAe,EAAfA,EAAiB5B,eAIvC,CACH2D,KAAM,OACNC,WAAY,CACR,aAAc,eACd1C,YAAaL,EACbW,UACAmB,eAAgBf,EAChBb,aAAcA,EACd8C,kBAAmB/C,EACnBgD,eAAiBC,GAAW,IAAIA,EAAO/D,cACvCgE,cAAgBD,IAAM,CAClBE,MAAOF,EAAOG,KACdC,eAAgBjE,EAAc6D,EAAO/D,eAEzCoE,eAAgBrB,EAChB/B,cAAeA,EACfC,cAAeA,IAqBvBoD,UAAU,UACVlD,aAAcA,EACdC,SAAUA,EAAQ,aACNoB,GACRlB,GACN"}

package/cjs/pill/pill.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("react"),i=require("./pill.style.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=l(t);exports.Pill=t=>{var{type:l,colorType:n="black",children:a,icon:s}=t,o=e.__rest(t,["type","colorType","children","icon"]);return r.jsxs(i.Wrapper,Object.assign({$type:l,$color:n},o,{children:[s&&c.default.cloneElement(s,{"aria-hidden":!0}),r.jsx(i.Label,{children:a})]}))};
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),l=require("clsx"),a=require("react"),i=require("./pill.styles.js");function p(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var t=p(l),n=p(a);const s={solid:{black:i.wrapperSolidBlack,grey:i.wrapperSolidGrey,green:i.wrapperSolidGreen,yellow:i.wrapperSolidYellow,red:i.wrapperSolidRed,blue:i.wrapperSolidBlue,primary:i.wrapperSolidPrimary},outline:{black:i.wrapperOutlineBlack,grey:i.wrapperOutlineGrey,green:i.wrapperOutlineGreen,yellow:i.wrapperOutlineYellow,red:i.wrapperOutlineRed,blue:i.wrapperOutlineBlue,primary:i.wrapperOutlinePrimary}};exports.Pill=l=>{var{type:a,colorType:p="black",children:o,icon:u,className:c}=l,d=e.__rest(l,["type","colorType","children","icon","className"]);return r.jsxs("div",Object.assign({},d,{className:t.default(i.wrapperBase,"solid"===a&&i.wrapperSolid,s[a][p],c),children:[u&&n.default.cloneElement(u,{"aria-hidden":!0}),r.jsx("div",{className:i.label,children:o})]}))};
 //# sourceMappingURL=pill.js.map

package/cjs/pill/pill.js.map

@@ -1 +1 @@
-{"version":3,"file":"pill.js","sources":["../../../src/pill/pill.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Label, Wrapper } from \"./pill.style\";\nimport type { PillProps } from \"./types\";\n\nexport const Pill = ({\n    type,\n    colorType = \"black\",\n    children,\n    icon,\n    ...otherProps\n}: PillProps): JSX.Element => {\n    return (\n        <Wrapper $type={type} $color={colorType} {...otherProps}>\n            {icon && React.cloneElement(icon, { \"aria-hidden\": true })}\n            <Label>{children}</Label>\n        </Wrapper>\n    );\n};\n"],"names":["_a","type","colorType","children","icon","otherProps","__rest","_jsxs","Wrapper","Object","assign","$type","$color","React","cloneElement","_jsx","Label"],"mappings":"mOAKqBA,IAAA,IAAAC,KACjBA,EAAIC,UACJA,EAAY,QAAOC,SACnBA,EAAQC,KACRA,GAAIJ,EACDK,EAAUC,EAAAA,OAAAN,EALI,wCAOjB,OACIO,EAAAA,KAACC,EAAAA,QAAOC,OAAAC,OAAA,CAAAC,MAAQV,EAAIW,OAAUV,GAAeG,EAAU,CAAAF,SAAA,CAClDC,GAAQS,EAAAA,QAAMC,aAAaV,EAAM,CAAE,eAAe,IACnDW,MAACC,EAAAA,MAAK,CAAAb,SAAEA,OACF"}
+{"version":3,"file":"pill.js","sources":["../../../src/pill/pill.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\n\nimport * as styles from \"./pill.styles\";\nimport type { PillColorType, PillProps, PillType } from \"./types\";\n\nconst WRAPPER_CLASS: Record<PillType, Record<PillColorType, string>> = {\n    solid: {\n        black: styles.wrapperSolidBlack,\n        grey: styles.wrapperSolidGrey,\n        green: styles.wrapperSolidGreen,\n        yellow: styles.wrapperSolidYellow,\n        red: styles.wrapperSolidRed,\n        blue: styles.wrapperSolidBlue,\n        primary: styles.wrapperSolidPrimary,\n    },\n    outline: {\n        black: styles.wrapperOutlineBlack,\n        grey: styles.wrapperOutlineGrey,\n        green: styles.wrapperOutlineGreen,\n        yellow: styles.wrapperOutlineYellow,\n        red: styles.wrapperOutlineRed,\n        blue: styles.wrapperOutlineBlue,\n        primary: styles.wrapperOutlinePrimary,\n    },\n};\n\nexport const Pill = ({\n    type,\n    colorType = \"black\",\n    children,\n    icon,\n    className,\n    ...otherProps\n}: PillProps): JSX.Element => {\n    return (\n        <div\n            {...otherProps}\n            className={clsx(\n                styles.wrapperBase,\n                type === \"solid\" && styles.wrapperSolid,\n                WRAPPER_CLASS[type][colorType],\n                className\n            )}\n        >\n            {icon && React.cloneElement(icon, { \"aria-hidden\": true })}\n            <div className={styles.label}>{children}</div>\n        </div>\n    );\n};\n"],"names":["WRAPPER_CLASS","solid","black","styles.wrapperSolidBlack","grey","styles.wrapperSolidGrey","green","styles.wrapperSolidGreen","yellow","styles.wrapperSolidYellow","red","styles.wrapperSolidRed","blue","styles.wrapperSolidBlue","primary","styles.wrapperSolidPrimary","outline","styles.wrapperOutlineBlack","styles.wrapperOutlineGrey","styles.wrapperOutlineGreen","styles.wrapperOutlineYellow","styles.wrapperOutlineRed","styles.wrapperOutlineBlue","styles.wrapperOutlinePrimary","_a","type","colorType","children","icon","className","otherProps","__rest","_jsxs","Object","assign","clsx","styles.wrapperBase","styles.wrapperSolid","React","cloneElement","_jsx","styles.label"],"mappings":"gPAMA,MAAMA,EAAiE,CACnEC,MAAO,CACHC,MAAOC,EAAAA,kBACPC,KAAMC,EAAAA,iBACNC,MAAOC,EAAAA,kBACPC,OAAQC,EAAAA,mBACRC,IAAKC,EAAAA,gBACLC,KAAMC,EAAAA,iBACNC,QAASC,EAAAA,qBAEbC,QAAS,CACLd,MAAOe,EAAAA,oBACPb,KAAMc,EAAAA,mBACNZ,MAAOa,EAAAA,oBACPX,OAAQY,EAAAA,qBACRV,IAAKW,EAAAA,kBACLT,KAAMU,EAAAA,mBACNR,QAASS,EAAAA,qCAIIC,IAAA,IAAAC,KACjBA,EAAIC,UACJA,EAAY,QAAOC,SACnBA,EAAQC,KACRA,EAAIC,UACJA,GAASL,EACNM,EAAUC,EAAAA,OAAAP,EANI,oDAQjB,OACIQ,EAAAA,KAAA,MAAAC,OAAAC,OAAA,GACQJ,EAAU,CACdD,UAAWM,EAAAA,QACPC,EAAAA,YACS,UAATX,GAAoBY,EAAAA,aACpBrC,EAAcyB,GAAMC,GACpBG,GACHF,SAAA,CAEAC,GAAQU,UAAMC,aAAaX,EAAM,CAAE,eAAe,IACnDY,EAAAA,IAAA,MAAA,CAAKX,UAAWY,EAAAA,MAAYd,SAAGA,OAC7B"}

package/cjs/pill/pill.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./pill.styles_1wiyl8.css");exports.label="l1uma0l6",exports.wrapperBase="w2wrvwd",exports.wrapperOutlineBlack="wnrixoo",exports.wrapperOutlineBlue="w19krjn1",exports.wrapperOutlineGreen="w1nlhiv2",exports.wrapperOutlineGrey="wnolbsf",exports.wrapperOutlinePrimary="w1h3c6yz",exports.wrapperOutlineRed="w1c1fn8z",exports.wrapperOutlineYellow="wfw4qqz",exports.wrapperSolid="w1bnitgk",exports.wrapperSolidBlack="w10rd591",exports.wrapperSolidBlue="w17huuqy",exports.wrapperSolidGreen="w1dquypt",exports.wrapperSolidGrey="w14ozhbm",exports.wrapperSolidPrimary="w1lx8mm6",exports.wrapperSolidRed="wtf7rkw",exports.wrapperSolidYellow="wijzmbj";
+//# sourceMappingURL=pill.styles.js.map

package/cjs/pill/pill.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pill.styles.js","sources":["../../../src/pill/pill.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, Radius } from \"../theme\";\n\nexport const wrapperBase = css`\n    border-radius: ${Radius[\"full\"]};\n    padding: 0.125rem 0.5rem;\n    width: fit-content;\n    max-width: 100%;\n    ${Font[\"body-xs-semibold\"]}\n    display: flex;\n    align-items: center;\n    gap: 0.25rem;\n    border: ${Border[\"width-010\"]} ${Border.solid};\n    svg {\n        flex-shrink: 0;\n    }\n`;\n\nexport const wrapperSolid = css`\n    color: ${Colour[\"text-inverse\"]};\n    border-color: transparent;\n`;\n\nexport const wrapperSolidBlack = css`\n    background: ${Colour[\"bg-inverse\"]};\n`;\n\nexport const wrapperSolidGrey = css`\n    background: ${Colour[\"bg-inverse-subtler\"]};\n`;\n\nexport const wrapperSolidGreen = css`\n    background: ${Colour[\"bg-success-strong\"]};\n`;\n\nexport const wrapperSolidYellow = css`\n    background: ${Colour[\"bg-warning-strong\"]};\n`;\n\nexport const wrapperSolidRed = css`\n    background: ${Colour[\"bg-error-strong\"]};\n`;\n\nexport const wrapperSolidBlue = css`\n    background: ${Colour[\"bg-info-strong\"]};\n`;\n\nexport const wrapperSolidPrimary = css`\n    background: ${Colour[\"bg-primary\"]};\n`;\n\nexport const wrapperOutlineBlack = css`\n    background: ${Colour.bg};\n    border-color: ${Colour.border};\n    color: ${Colour.text};\n`;\n\nexport const wrapperOutlineGrey = css`\n    background: ${Colour[\"bg-stronger\"]};\n    border-color: ${Colour[\"border-strong\"]};\n    color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const wrapperOutlineGreen = css`\n    background: ${Colour[\"bg-success\"]};\n    border-color: ${Colour[\"border-success\"]};\n    color: ${Colour[\"text-success\"]};\n`;\n\nexport const wrapperOutlineYellow = css`\n    background: ${Colour[\"bg-warning\"]};\n    border-color: ${Colour[\"border-warning\"]};\n    color: ${Colour[\"text-warning\"]};\n`;\n\nexport const wrapperOutlineRed = css`\n    background: ${Colour[\"bg-error\"]};\n    border-color: ${Colour[\"border-error\"]};\n    color: ${Colour[\"text-error\"]};\n`;\n\nexport const wrapperOutlineBlue = css`\n    background: ${Colour[\"bg-info\"]};\n    border-color: ${Colour[\"border-info\"]};\n    color: ${Colour[\"text-info\"]};\n`;\n\nexport const wrapperOutlinePrimary = css`\n    background: ${Colour[\"bg-primary-subtlest\"]};\n    border-color: ${Colour[\"border-primary\"]};\n    color: ${Colour[\"text-primary\"]};\n`;\n\nexport const label = css`\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 2;\n    text-align: left;\n`;\n"],"names":[],"mappings":"mFA8FkB,+BA1FM,sCAgDQ,qCA8BD,uCAlBC,sCAND,wCA8BG,qCAZJ,wCANG,+BAnDR,qCAKK,oCAoBD,qCAZC,oCAJD,uCAoBG,mCARJ,qCAJG"}

package/cjs/pill/pill.styles_1wiyl8.css

@@ -0,0 +1,17 @@
+.w2wrvwd{border-radius:var(--fds-radius-full);padding:0.125rem 0.5rem;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;max-width:100%;font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-xs);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:0.25rem;border:var(--fds-border-width-010) var(--fds-border-style-solid);}.w2wrvwd svg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}
+.w1bnitgk{color:var(--fds-colour-text-inverse);border-color:transparent;}
+.w10rd591{background:var(--fds-colour-bg-inverse);}
+.w14ozhbm{background:var(--fds-colour-bg-inverse-subtler);}
+.w1dquypt{background:var(--fds-colour-bg-success-strong);}
+.wijzmbj{background:var(--fds-colour-bg-warning-strong);}
+.wtf7rkw{background:var(--fds-colour-bg-error-strong);}
+.w17huuqy{background:var(--fds-colour-bg-info-strong);}
+.w1lx8mm6{background:var(--fds-colour-bg-primary);}
+.wnrixoo{background:var(--fds-colour-bg);border-color:var(--fds-colour-border);color:var(--fds-colour-text);}
+.wnolbsf{background:var(--fds-colour-bg-stronger);border-color:var(--fds-colour-border-strong);color:var(--fds-colour-text-subtler);}
+.w1nlhiv2{background:var(--fds-colour-bg-success);border-color:var(--fds-colour-border-success);color:var(--fds-colour-text-success);}
+.wfw4qqz{background:var(--fds-colour-bg-warning);border-color:var(--fds-colour-border-warning);color:var(--fds-colour-text-warning);}
+.w1c1fn8z{background:var(--fds-colour-bg-error);border-color:var(--fds-colour-border-error);color:var(--fds-colour-text-error);}
+.w19krjn1{background:var(--fds-colour-bg-info);border-color:var(--fds-colour-border-info);color:var(--fds-colour-text-info);}
+.w1h3c6yz{background:var(--fds-colour-bg-primary-subtlest);border-color:var(--fds-colour-border-primary);color:var(--fds-colour-text-primary);}
+.l1uma0l6{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;text-align:left;}

package/cjs/popover/index.js

@@ -1,2 +1,2 @@
-"use strict";var o=require("./popover.js"),r=require("./popover-hoc.js");exports.Popover=o.Popover,exports.withPopover=r.withPopover;
+"use strict";var e=require("./popover.js"),r=require("./popover-inline/popover-inline.js"),o=require("./popover-trigger.js");exports.Popover=e.Popover,exports.PopoverInline=r.PopoverInline,exports.PopoverTrigger=o.PopoverTrigger;
 //# sourceMappingURL=index.js.map

package/cjs/popover/popover-inline/popover-inline.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("../../_virtual/_tslib.js"),r=require("react/jsx-runtime"),n=require("clsx"),t=require("../popover-trigger.js"),i=require("./popover-inline.styles.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=l(n);exports.PopoverInline=n=>{var{ariaLabel:l,content:o,icon:s,underlineStyle:u="default",underlineHoverStyle:d="default"}=n,c=e.__rest(n,["ariaLabel","content","icon","underlineStyle","underlineHoverStyle"]);const p=!!o;return r.jsx(t.PopoverTrigger,Object.assign({},c,{children:r.jsxs("span",{"aria-label":null!=l?l:p?void 0:"More info",role:"button","aria-haspopup":"dialog",tabIndex:0,className:i.popoverInlineText,"data-underline-style":u,"data-underline-hover-style":d,children:[o,s&&r.jsx("span",{className:a.default(p&&i.popoverInlineIconWithContent),children:s})]})}))};
+//# sourceMappingURL=popover-inline.js.map

package/cjs/popover/popover-inline/popover-inline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-inline.js","sources":["../../../../src/popover/popover-inline/popover-inline.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport { PopoverTrigger } from \"../popover-trigger\";\nimport type { PopoverInlineProps } from \"../types\";\nimport * as styles from \"./popover-inline.styles\";\n\nexport const PopoverInline = ({\n    ariaLabel,\n    content,\n    icon,\n    underlineStyle = \"default\",\n    underlineHoverStyle = \"default\",\n    ...otherProps\n}: PopoverInlineProps) => {\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const hasContent = !!content;\n\n    return (\n        <PopoverTrigger {...otherProps}>\n            <span\n                aria-label={ariaLabel ?? (hasContent ? undefined : \"More info\")}\n                role=\"button\"\n                aria-haspopup=\"dialog\"\n                tabIndex={0}\n                className={styles.popoverInlineText}\n                data-underline-style={underlineStyle}\n                data-underline-hover-style={underlineHoverStyle}\n            >\n                {content}\n                {icon && (\n                    <span\n                        className={clsx(\n                            hasContent && styles.popoverInlineIconWithContent\n                        )}\n                    >\n                        {icon}\n                    </span>\n                )}\n            </span>\n        </PopoverTrigger>\n    );\n};\n"],"names":["_a","ariaLabel","content","icon","underlineStyle","underlineHoverStyle","otherProps","__rest","hasContent","_jsx","PopoverTrigger","Object","assign","children","_jsxs","undefined","role","tabIndex","className","styles.popoverInlineText","clsx","styles.popoverInlineIconWithContent"],"mappings":"4RAM8BA,IAAA,IAAAC,UAC1BA,EAASC,QACTA,EAAOC,KACPA,EAAIC,eACJA,EAAiB,UAASC,oBAC1BA,EAAsB,WAASL,EAC5BM,EAAUC,EAAAA,OAAAP,EANa,uEAW1B,MAAMQ,IAAeN,EAErB,OACIO,MAACC,EAAAA,eAAcC,OAAAC,OAAA,CAAA,EAAKN,EAAU,CAAAO,SAC1BC,OAAA,OAAA,CAAA,aACgBb,QAAAA,EAAcO,OAAaO,EAAY,YACnDC,KAAK,SAAQ,gBACC,SACdC,SAAU,EACVC,UAAWC,2CACWf,EAAc,6BACRC,EAAmBQ,SAAA,CAE9CX,EACAC,GACGM,EAAAA,IAAA,OAAA,CACIS,UAAWE,EAAAA,QACPZ,GAAca,gCACjBR,SAEAV,SAIA"}

package/cjs/popover/popover-inline/popover-inline.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./popover-inline.styles_bkopnt.css");exports.popoverInlineIconWithContent="pzf43s3",exports.popoverInlineText="p1h7dfwa";
+//# sourceMappingURL=popover-inline.styles.js.map

package/cjs/popover/popover-inline/popover-inline.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-inline.styles.js","sources":["../../../../src/popover/popover-inline/popover-inline.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour } from \"../../theme\";\n\nexport const popoverInlineText = css`\n    color: ${Colour[\"text-primary\"]};\n    font-weight: 600;\n    text-underline-position: under;\n\n    &[data-underline-style=\"underline\"] {\n        text-decoration: underline 1px;\n    }\n\n    &[data-underline-style=\"underline-dashed\"] {\n        text-decoration: underline dashed 1px;\n    }\n\n    &:hover,\n    &:focus-visible {\n        color: ${Colour[\"text-hover\"]};\n    }\n\n    &[data-underline-hover-style=\"underline\"]:hover,\n    &[data-underline-hover-style=\"underline\"]:focus-visible {\n        text-decoration: underline 1px;\n    }\n\n    &[data-underline-hover-style=\"underline-dashed\"]:hover,\n    &[data-underline-hover-style=\"underline-dashed\"]:focus-visible {\n        text-decoration: underline dashed 1px;\n    }\n\n    svg {\n        height: 1lh; /* align vertically */\n        width: 1em; /* scale icon with font size */\n        vertical-align: top;\n    }\n`;\n\nexport const popoverInlineIconWithContent = css`\n    margin-left: 0.25rem;\n`;\n"],"names":[],"mappings":"sIAuCyC,oCAnCX"}

package/cjs/popover/popover-inline/popover-inline.styles_bkopnt.css

@@ -0,0 +1,2 @@
+.p1h7dfwa{color:var(--fds-colour-text-primary);font-weight:600;text-underline-position:under;}.p1h7dfwa[data-underline-style="underline"]{-webkit-text-decoration:underline 1px;text-decoration:underline 1px;}.p1h7dfwa[data-underline-style="underline-dashed"]{-webkit-text-decoration:underline dashed 1px;text-decoration:underline dashed 1px;}.p1h7dfwa:hover,.p1h7dfwa:focus-visible{color:var(--fds-colour-text-hover);}.p1h7dfwa[data-underline-hover-style="underline"]:hover,.p1h7dfwa[data-underline-hover-style="underline"]:focus-visible{-webkit-text-decoration:underline 1px;text-decoration:underline 1px;}.p1h7dfwa[data-underline-hover-style="underline-dashed"]:hover,.p1h7dfwa[data-underline-hover-style="underline-dashed"]:focus-visible{-webkit-text-decoration:underline dashed 1px;text-decoration:underline dashed 1px;}.p1h7dfwa svg{height:1lh;width:1em;vertical-align:top;}
+.pzf43s3{margin-left:0.25rem;}

package/cjs/popover/popover-trigger.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("@floating-ui/react"),i=require("clsx"),o=require("react"),n=require("../overlay/use-floating-context.js");require("../theme/theme-provider/index.js");var s=require("../theme/theme-provider/hooks.js");require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var l=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var a=require("../theme/utils/use-media-query.js"),u=require("./popover.js"),c=require("./popover-trigger.styles.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=d(i);exports.PopoverTrigger=i=>{var d,v,{children:g,popoverContent:f,trigger:m="click",position:h="top",zIndex:j,rootNode:b,customOffset:q,delay:x,onPopoverAppear:y,onPopoverDismiss:F,popoverAriaLabel:O,enableFlip:P=!0,enableResize:k=!1,overflow:M="auto",triggerOnFocus:C=!1,isModal:w=!0,className:z}=i,I=e.__rest(i,["children","popoverContent","trigger","position","zIndex","rootNode","customOffset","delay","onPopoverAppear","onPopoverDismiss","popoverAriaLabel","enableFlip","enableResize","overflow","triggerOnFocus","isModal","className"]);const[R,S]=o.useState(!1),A=o.useRef(null),H=o.useRef(null),N=a.useMaxWidthMediaQuery("sm"),[D,E]=o.useState(0),L=`${l.useId()}-popover`,{refs:T,floatingStyles:_,context:B}=t.useFloating({open:R,placement:h,whileElementsMounted:t.autoUpdate,middleware:[t.offset(null!=q?q:16),P&&t.flip(),t.shift({limiter:t.limitShift()}),k&&t.size({apply({availableHeight:e}){E(e)}})],onOpenChange:e=>{S(e),R!==e&&ee(e)}}),Q=n.useFloatingChild(),{themeProps:U,themeStyle:W}=s.useInheritedThemeScope(R),$="hover"===(N?"click":m),G=t.useClick(B,{ignoreMouse:$}),J=t.useDismiss(B),K=t.useHover(B,{enabled:$,delay:{open:null!==(d=null==x?void 0:x.open)&&void 0!==d?d:0,close:null!==(v=null==x?void 0:x.close)&&void 0!==v?v:500}}),V=t.useFocus(B,{enabled:C}),{getReferenceProps:X,getFloatingProps:Y}=t.useInteractions([G,J,K,V]),Z=()=>{S(!1),ee(!1)},ee=e=>{e&&y&&y(),!e&&F&&F()};return r.jsxs(r.Fragment,{children:[r.jsx("div",Object.assign({ref:e=>{A.current=e,T.setReference(e)}},X({onClick:e=>{e.stopPropagation(),e.preventDefault()}}),I,{className:p.default(c.triggerContainer,z),children:g})),R&&r.jsx(t.FloatingPortal,{root:b,children:r.jsx(t.FloatingFocusManager,Object.assign({context:B},!w&&{initialFocus:-1,returnFocus:!1,modal:!1},{children:r.jsx("div",Object.assign({ref:e=>{H.current=e,T.setFloating(e)}},U,{onBlur:e=>{var r;if(w||N&&"function"!=typeof f)return;const t=null!==(r=e.relatedTarget)&&void 0!==r?r:document.activeElement;t&&(e=>{var r;if(!e)return!1;if(e instanceof HTMLElement&&e.hasAttribute("data-floating-ui-focus-guard"))return!0;const t=A.current,i=null===(r=H.current)||void 0===r?void 0:r.parentElement;return!!t&&t.contains(e)||!!i&&i.contains(e)})(t)||(S(!1),ee(!1))},style:Object.assign(Object.assign(Object.assign({},W),_),{outline:"none",zIndex:null!=j?j:Q})},Y(),{children:"function"==typeof f?f(k?{maxHeight:D,overflow:M}:{}):r.jsx(u.Popover,{visible:!0,onMobileClose:Z,maxHeight:k?D:void 0,overflow:k?M:void 0,ariaLabel:O,id:L,children:f})}))}))})]})};
+//# sourceMappingURL=popover-trigger.js.map