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

package/pagination/pagination.styles.js

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

package/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\";\nimport { Input } from \"../input\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { Border, Colour, Font, MediaQuery, Radius, Spacing } from \"../theme\";\nimport { Typography } from \"../typography\";\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    ${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: ${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    &:hover,\n    &:focus-visible {\n        background-color: ${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: ${Spacing[\"spacing-4\"]};\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 PageItem = styled.button<StyleProps>`\n    outline: none;\n    margin: ${Spacing[\"spacing-4\"]};\n    box-shadow: none;\n    border: ${Border[\"width-010\"]} ${Border.solid}\n        ${(props) =>\n            css`\n                ${props.$selected ? Colour[\"bg-primary\"] : Colour.border}\n            `};\n    border-radius: ${Radius[\"sm\"]};\n    min-width: 2.5rem;\n    height: 2.5rem;\n    padding: 0 ${Spacing[\"spacing-8\"]};\n\n    background: ${(props) =>\n        props.$selected ? Colour[\"bg-primary\"] : Colour.bg};\n    cursor: pointer;\n\n    ${Font[\"body-baseline-regular\"]};\n    text-align: center;\n    color: ${(props) =>\n        props.$selected ? Colour[\"text-inverse\"] : Colour.text};\n\n    ${(props) =>\n        props.$selected\n            ? css`\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                  }\n              `\n            : css`\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`;\n\nexport const EllipsisContainer = styled.div`\n    position: relative;\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    margin: ${Spacing[\"spacing-4\"]};\n    border-radius: ${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: ${Spacing[\"spacing-4\"]};\n\n    color: ${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 ${Spacing[\"spacing-16\"]};\n    white-space: nowrap;\n`;\n\nexport const InputView = styled(Input)`\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 = styled.div`\n    position: absolute;\n    top: -${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: ${Radius[\"sm\"]};\n    width: max-content;\n    padding: ${Spacing[\"spacing-4\"]} ${Spacing[\"spacing-12\"]};\n\n    background-color: ${Colour[\"bg-hover\"]};\n\n    ${Font[\"body-xs-regular\"]}\n    color: ${Colour[\"text-hover\"]};\n`;\n\nexport const InputSelectWrapper = styled.div`\n    margin-left: ${Spacing[\"spacing-4\"]};\n    width: 10rem;\n`;\n"],"names":["PaginationWrapper","styled","nav","PaginationList","div","MediaQuery","MaxWidth","lg","PaginationMenu","EllipsisButton","ClickableIcon","Radius","Spacing","Colour","NavigationButton","PageItem","button","Border","solid","props","css","$selected","border","bg","Font","text","Spec","EllipsisContainer","PaginationMobileInput","Label","Typography","BodyBL","LabelDivider","InputView","Input","Hover","InputSelectWrapper"],"mappings":"mUAmBO,MAAMA,EAAoBC,EAAOC,GAAG;;EAI9BC,EAAiBF,EAAOG,GAAG;;;;;;MAMlCC,EAAWC,SAASC;;;EAKbC,EAAiBP,EAAOG,GAAG;;;EAK3BK,EAAiBR,EAAOS,EAAc;;;;;;qBAM9BC,EAAW;;;iBAGfC,EAAQ;;aAEZC,EAAO;;;;;;;;iBAQHA,EAAO;;;;;;4BAMIA,EAAO;;EAItBC,EAAmBb,EAAOS,EAA2B;;;;;;cAMpDE,EAAQ;qBACDD,EAAW;;;iBAGfC,EAAQ;;aAEZC,EAAO;;;;;;;;iBAQHA,EAAO;;;;;;sBAMFA,EAAO;;EAIhBE,EAAWd,EAAOe,MAAkB;;cAEnCJ,EAAQ;;cAERK,EAAO,gBAAgBA,EAAOC;UACjCC,GACCC,CAAG;kBACGD,EAAME,UAAYR,EAAO,cAAgBA,EAAOS;;qBAE7CX,EAAW;;;iBAGfC,EAAQ;;kBAENO,GACXA,EAAME,UAAYR,EAAO,cAAgBA,EAAOU;;;MAGlDC,EAAK;;aAEGL,GACNA,EAAME,UAAYR,EAAO,gBAAkBA,EAAOY;;MAEnDN,GACCA,EAAME,UACAD,CAAG;iCACgBI,EAAKE,KAAK;;;;sCAILb,EAAO;oCACTA,EAAO;+BACZA,EAAO;;gBAGxBO,CAAG;;;sCAGqBP,EAAO;oCACTA,EAAO;+BACZA,EAAO;qCACDW,EAAKE,KAAK;;;EAKlCC,EAAoB1B,EAAOG,GAAG;;;;;;;cAO7BQ,EAAQ;qBACDD,EAAW;;;;;EAOnBiB,EAAwB3B,EAAOG,GAAG;;;;;cAKjCQ,EAAQ;;aAETC,EAAOY;EAGPI,EAAQ5B,EAAO6B,EAAWC,OAAO;;EAIjCC,EAAe/B,EAAO6B,EAAWC,OAAO;gBACrCnB,EAAQ;;EAIXqB,EAAYhC,EAAOiC,EAAM;;;MAGhCV,EAAK;;;qBAGUZ,EAAQ;;;EAKhBuB,EAAQlC,EAAOG,GAAG;;YAEnBQ,EAAQ;;;;;;;;qBAQCD,EAAW;;eAEjBC,EAAQ,gBAAgBA,EAAQ;;wBAEvBC,EAAO;;MAEzBW,EAAK;aACEX,EAAO;EAGPuB,EAAqBnC,EAAOG,GAAG;mBACzBQ,EAAQ;;"}
+{"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":["paginationWrapper","paginationList","paginationMenu","iconButton","iconButtonNavigation","pageItem","pageItemSelected","ellipsisContainer","paginationMobileInput","label","labelDivider","inputView","hover","inputSelectWrapper"],"mappings":"iEAMO,MAAMA,EAAiB,WAIjBC,EAAc,WAWdC,EAAc,WAKdC,EAAU,UA6BVC,EAAoB,WAIpBC,EAAQ,UA0BRC,EAAgB,UAehBC,EAAiB,WAYjBC,EAAqB,WAUrBC,EAAK,WAILC,EAAY,UAKZC,EAAS,WAWTC,EAAK,WAoBLC,EAAkB"}

package/pagination/pagination.styles_6bcgva.css

@@ -0,0 +1,14 @@
+@layer fds{.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-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);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-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);}.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-body);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/pagination/types.d.ts

@@ -1,16 +1,64 @@
+/**
+ * Props for the `Pagination` component.
+ */
 export interface PaginationProps {
     id?: string | undefined;
     "data-testid"?: string | undefined;
     className?: string | undefined;
+    /**
+     * Number of items displayed per page.
+     *
+     * @default 10
+     */
     pageSize?: number | undefined;
+    /**
+     * Total number of items across all pages. Used to compute the total page count.
+     */
     totalItems: number;
+    /**
+     * The currently active 1-based page number. This is a controlled prop;
+     * update it in response to `onPageChange`.
+     */
     activePage: number;
+    /**
+     * Options listed in the page-size changer dropdown.
+     *
+     * Only relevant when `showPageSizeChanger` is `true`.
+     *
+     * @default 10, 20, 30 per page
+     */
     pageSizeOptions?: PageSizeItemProps[] | undefined;
+    /**
+     * When `true`, renders first-page and last-page navigation buttons
+     * alongside the previous/next buttons.
+     */
     showFirstAndLastNav?: boolean | undefined;
+    /**
+     * When `true`, renders a dropdown on desktop viewports to change the `pageSize`.
+     *
+     * @default false
+     */
     showPageSizeChanger?: boolean | undefined;
+    /**
+     * Called when the user navigates to a different page.
+     *
+     * @param page The 1-based index of the newly selected page.
+     */
     onPageChange?: ((page: number) => void) | undefined;
+    /**
+     * Called when the user selects a different page size from
+     * the dropdown  and `showPageSizeChanger` is `true`.
+     *
+     * @param page The adjusted active page after the size change. If the current
+     * `activePage` exceeds the new total page count, this value is capped to the
+     * new last page.
+     * @param pageSize The newly selected number of items per page.
+     */
     onPageSizeChange?: ((page: number, pageSize: number) => void) | undefined;
 }
+/**
+ * A single option in the page-size changer dropdown.
+ */
 export interface PageSizeItemProps {
     value: number;
     label: string;

package/phone-number-input/phone-number-input-helper.d.ts

@@ -1,5 +1,5 @@
-import { CountryValue } from "./types";
-export declare namespace PhoneNumberInputHelper {
-    const getCountries: () => CountryValue[];
-    const formatNumber: (numberText?: string, country?: CountryValue) => string;
+import type { CountryValue } from "./types";
+export declare class PhoneNumberInputHelper {
+    static getCountries(): CountryValue[];
+    static formatNumber(numberText?: string, country?: CountryValue): string;
 }

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

@@ -1,2 +1,2 @@
-import t from"../external/lodash/reduce.js";import{CountryData as e}from"./data/country-code.js";const r=(t,e,r,n)=>r?t+"".padEnd(e.length,".")+" "+r:t+"".padEnd(e.length,".")+" "+n;var n;!function(n){n.getCountries=()=>[].concat(...e.map((t=>({name:t[0],regions:t[1],iso2:t[2],countryCode:t[3],format:r("+",t[3],t[4],"... ... ... ... ..")})))),n.formatNumber=(e="",r)=>{if(!r)return e;const n=e.replace(/[\s()]+/g,""),{format:o}=r,i=o.split(" ");i.shift();const a=i.join(" ");return t(a,((t,e)=>{if(0===t.remainingText.length)return t;if("."!==e)return{formattedText:t.formattedText+e,remainingText:t.remainingText};const r=t.remainingText.slice(0,1),n=t.remainingText.slice(1);return{formattedText:t.formattedText+r,remainingText:n}}),{formattedText:"",remainingText:n}).formattedText}}(n||(n={}));export{n as PhoneNumberInputHelper};
+import t from"../external/lodash/reduce.js";import{CountryData as e}from"./data/country-code.js";const r=(t,e,r,n)=>r?t+"".padEnd(e.length,".")+" "+r:t+"".padEnd(e.length,".")+" "+n;class n{static getCountries(){return[].concat(...e.map((t=>({name:t[0],regions:t[1],iso2:t[2],countryCode:t[3],format:r("+",t[3],t[4],"... ... ... ... ..")}))))}static formatNumber(e="",r){if(!r)return e;const n=e.replace(/[\s()]+/g,""),{format:a}=r,i=a.split(" ");i.shift();const o=i.join(" ");return t(o,((t,e)=>{if(0===t.remainingText.length)return t;if("."!==e)return{formattedText:t.formattedText+e,remainingText:t.remainingText};const r=t.remainingText.slice(0,1),n=t.remainingText.slice(1);return{formattedText:t.formattedText+r,remainingText:n}}),{formattedText:"",remainingText:n}).formattedText}}export{n as PhoneNumberInputHelper};
 //# sourceMappingURL=phone-number-input-helper.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"phone-number-input-helper.js","sources":["../../src/phone-number-input/phone-number-input-helper.tsx"],"sourcesContent":["import reduce from \"lodash/reduce\";\nimport { CountryData } from \"./data/country-code\";\nimport { CountryValue } from \"./types\";\n\n// Format stucture: prefix+countryCode+' '+defaultMask\nconst defaultMask = \"... ... ... ... ..\";\nconst prefix = \"+\";\n\n// =============================================================================\n// HELPER FUNCTIONS\n// =============================================================================\nconst getMask = (\n    prefix: string,\n    countryCode: string,\n    predefinedMask: string,\n    defaultMask: string\n) => {\n    if (!predefinedMask) {\n        return prefix + \"\".padEnd(countryCode.length, \".\") + \" \" + defaultMask;\n    } else {\n        return (\n            prefix + \"\".padEnd(countryCode.length, \".\") + \" \" + predefinedMask\n        );\n    }\n};\n\nexport namespace PhoneNumberInputHelper {\n    export const getCountries = (): CountryValue[] => {\n        const countries: CountryValue[] = [];\n        return countries.concat(\n            ...CountryData.map((country): CountryValue => {\n                const countryItem = {\n                    name: country[0] as string,\n                    regions: country[1] as string[],\n                    iso2: country[2] as string,\n                    countryCode: country[3] as string,\n                    format: getMask(\n                        prefix,\n                        country[3] as string,\n                        country[4] as string,\n                        defaultMask\n                    ),\n                };\n\n                return countryItem;\n            })\n        );\n    };\n\n    export const formatNumber = (\n        numberText = \"\",\n        country?: CountryValue\n    ): string => {\n        if (!country) return numberText;\n\n        const numberTextWithoutSpace = numberText.replace(/[\\s()]+/g, \"\");\n\n        const { format } = country;\n\n        /**\n         * Strip the prefix. The format usually contains\n         * the prefix (e.g. +.. .... ....). And we are\n         * only concerned about the actual number format\n         */\n        const removedPrefix = format.split(\" \");\n        removedPrefix.shift();\n\n        const pattern = removedPrefix.join(\" \");\n\n        const formattedObject = reduce(\n            pattern,\n            (acc, character) => {\n                if (acc.remainingText.length === 0) {\n                    return acc;\n                }\n\n                if (character !== \".\") {\n                    return {\n                        formattedText: acc.formattedText + character,\n                        remainingText: acc.remainingText,\n                    };\n                }\n\n                const head = acc.remainingText.slice(0, 1);\n                const tail = acc.remainingText.slice(1);\n\n                return {\n                    formattedText: acc.formattedText + head,\n                    remainingText: tail,\n                };\n            },\n            {\n                formattedText: \"\",\n                remainingText: numberTextWithoutSpace,\n            }\n        );\n\n        const formattedNumber = formattedObject.formattedText;\n        return formattedNumber;\n    };\n}\n"],"names":["getMask","prefix","countryCode","predefinedMask","defaultMask","padEnd","length","PhoneNumberInputHelper","getCountries","concat","CountryData","map","country","name","regions","iso2","format","formatNumber","numberText","numberTextWithoutSpace","replace","removedPrefix","split","shift","pattern","join","reduce","acc","character","remainingText","formattedText","head","slice","tail"],"mappings":"iGAKA,MAMMA,EAAU,CACZC,EACAC,EACAC,EACAC,IAEKD,EAIGF,EAAS,GAAGI,OAAOH,EAAYI,OAAQ,KAAO,IAAMH,EAHjDF,EAAS,GAAGI,OAAOH,EAAYI,OAAQ,KAAO,IAAMF,EAQ7D,IAAWG,GAAjB,SAAiBA,GACAA,EAAAC,aAAe,IACU,GACjBC,UACVC,EAAYC,KAAKC,IACI,CAChBC,KAAMD,EAAQ,GACdE,QAASF,EAAQ,GACjBG,KAAMH,EAAQ,GACdV,YAAaU,EAAQ,GACrBI,OAAQhB,EA9Bb,IAgCSY,EAAQ,GACRA,EAAQ,GAlCZ,2BA4CHL,EAAAU,aAAe,CACxBC,EAAa,GACbN,KAEA,IAAKA,EAAS,OAAOM,EAErB,MAAMC,EAAyBD,EAAWE,QAAQ,WAAY,KAExDJ,OAAEA,GAAWJ,EAObS,EAAgBL,EAAOM,MAAM,KACnCD,EAAcE,QAEd,MAAMC,EAAUH,EAAcI,KAAK,KA+BnC,OA7BwBC,EACpBF,GACA,CAACG,EAAKC,KACF,GAAiC,IAA7BD,EAAIE,cAAcvB,OAClB,OAAOqB,EAGX,GAAkB,MAAdC,EACA,MAAO,CACHE,cAAeH,EAAIG,cAAgBF,EACnCC,cAAeF,EAAIE,eAI3B,MAAME,EAAOJ,EAAIE,cAAcG,MAAM,EAAG,GAClCC,EAAON,EAAIE,cAAcG,MAAM,GAErC,MAAO,CACHF,cAAeH,EAAIG,cAAgBC,EACnCF,cAAeI,EAClB,GAEL,CACIH,cAAe,GACfD,cAAeV,IAIiBW,aAClB,CAE7B,CA1ED,CAAiBvB,IAAAA,EAAsB,CAAA"}
+{"version":3,"file":"phone-number-input-helper.js","sources":["../../src/phone-number-input/phone-number-input-helper.tsx"],"sourcesContent":["import reduce from \"lodash/reduce\";\n\nimport { CountryData } from \"./data/country-code\";\nimport type { CountryValue } from \"./types\";\n\n// Format stucture: prefix+countryCode+' '+defaultMask\nconst defaultMask = \"... ... ... ... ..\";\nconst prefix = \"+\";\n\n// =============================================================================\n// HELPER FUNCTIONS\n// =============================================================================\nconst getMask = (\n    prefix: string,\n    countryCode: string,\n    predefinedMask: string,\n    defaultMask: string\n) => {\n    if (!predefinedMask) {\n        return prefix + \"\".padEnd(countryCode.length, \".\") + \" \" + defaultMask;\n    } else {\n        return (\n            prefix + \"\".padEnd(countryCode.length, \".\") + \" \" + predefinedMask\n        );\n    }\n};\n\nexport class PhoneNumberInputHelper {\n    public static getCountries(): CountryValue[] {\n        const countries: CountryValue[] = [];\n        return countries.concat(\n            ...CountryData.map((country): CountryValue => {\n                const countryItem = {\n                    name: country[0] as string,\n                    regions: country[1] as string[],\n                    iso2: country[2] as string,\n                    countryCode: country[3] as string,\n                    format: getMask(\n                        prefix,\n                        country[3] as string,\n                        country[4] as string,\n                        defaultMask\n                    ),\n                };\n\n                return countryItem;\n            })\n        );\n    }\n\n    public static formatNumber(\n        numberText = \"\",\n        country?: CountryValue\n    ): string {\n        if (!country) return numberText;\n\n        const numberTextWithoutSpace = numberText.replace(/[\\s()]+/g, \"\");\n\n        const { format } = country;\n\n        /**\n         * Strip the prefix. The format usually contains\n         * the prefix (e.g. +.. .... ....). And we are\n         * only concerned about the actual number format\n         */\n        const removedPrefix = format.split(\" \");\n        removedPrefix.shift();\n\n        const pattern = removedPrefix.join(\" \");\n\n        const formattedObject = reduce(\n            pattern,\n            (acc, character) => {\n                if (acc.remainingText.length === 0) {\n                    return acc;\n                }\n\n                if (character !== \".\") {\n                    return {\n                        formattedText: acc.formattedText + character,\n                        remainingText: acc.remainingText,\n                    };\n                }\n\n                const head = acc.remainingText.slice(0, 1);\n                const tail = acc.remainingText.slice(1);\n\n                return {\n                    formattedText: acc.formattedText + head,\n                    remainingText: tail,\n                };\n            },\n            {\n                formattedText: \"\",\n                remainingText: numberTextWithoutSpace,\n            }\n        );\n\n        const formattedNumber = formattedObject.formattedText;\n        return formattedNumber;\n    }\n}\n"],"names":["getMask","prefix","countryCode","predefinedMask","defaultMask","padEnd","length","PhoneNumberInputHelper","getCountries","concat","CountryData","map","country","name","regions","iso2","format","formatNumber","numberText","numberTextWithoutSpace","replace","removedPrefix","split","shift","pattern","join","reduce","acc","character","remainingText","formattedText","head","slice","tail"],"mappings":"iGAMA,MAMMA,EAAU,CACZC,EACAC,EACAC,EACAC,IAEKD,EAIGF,EAAS,GAAGI,OAAOH,EAAYI,OAAQ,KAAO,IAAMH,EAHjDF,EAAS,GAAGI,OAAOH,EAAYI,OAAQ,KAAO,IAAMF,QAQtDG,EACF,mBAAOC,GAEV,MADkC,GACjBC,UACVC,EAAYC,KAAKC,IACI,CAChBC,KAAMD,EAAQ,GACdE,QAASF,EAAQ,GACjBG,KAAMH,EAAQ,GACdV,YAAaU,EAAQ,GACrBI,OAAQhB,EA9Bb,IAgCSY,EAAQ,GACRA,EAAQ,GAlCZ,0BA0ChB,CAEO,mBAAOK,CACVC,EAAa,GACbN,GAEA,IAAKA,EAAS,OAAOM,EAErB,MAAMC,EAAyBD,EAAWE,QAAQ,WAAY,KAExDJ,OAAEA,GAAWJ,EAObS,EAAgBL,EAAOM,MAAM,KACnCD,EAAcE,QAEd,MAAMC,EAAUH,EAAcI,KAAK,KA+BnC,OA7BwBC,EACpBF,GACA,CAACG,EAAKC,KACF,GAAiC,IAA7BD,EAAIE,cAAcvB,OAClB,OAAOqB,EAGX,GAAkB,MAAdC,EACA,MAAO,CACHE,cAAeH,EAAIG,cAAgBF,EACnCC,cAAeF,EAAIE,eAI3B,MAAME,EAAOJ,EAAIE,cAAcG,MAAM,EAAG,GAClCC,EAAON,EAAIE,cAAcG,MAAM,GAErC,MAAO,CACHF,cAAeH,EAAIG,cAAgBC,EACnCF,cAAeI,EAClB,GAEL,CACIH,cAAe,GACfD,cAAeV,IAIiBW,aAE5C"}

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

@@ -1,2 +1,10 @@
-import { PhoneNumberInputProps } from "./types";
+import type { PhoneNumberInputProps } from "./types";
+/**
+ * A phone number field composed of a country code selector and a number input.
+ *
+ * Use `PhoneNumberInput` when collecting an internationalised phone number.
+ * The country code can be selected from a searchable dropdown or locked to a
+ * fixed value via `fixedCountry`.
+ * @keywords contact, country code, field, form, input, number, telephone
+ */
 export declare const PhoneNumberInput: ({ id, onChange, value, allowClear, onClear, onBlur, error, fixedCountry, optionPlaceholder, optionSearchPlaceholder, enableSearch, onHideOptions, onShowOptions, placeholder, autoComplete, noBorder, getAriaLabel, ...otherProps }: PhoneNumberInputProps) => import("react/jsx-runtime").JSX.Element;

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

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

package/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\";\nimport { InputGroup } from \"../input-group/input-group\";\nimport { AddonProps, LabelAddon, ListAddon } from \"../input-group/types\";\nimport { useNextInputState } from \"../util\";\nimport { PhoneNumberInputHelper } from \"./phone-number-input-helper\";\nimport { 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":["PhoneNumberInput","_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","replace","resolvedAriaLabel","_b","useEffect","selectedOption","filter","country","countryCode","normaliseCountryCode","number","handleSelectOption","performLocalChangeHandler","performOnChangeHandler","formatedInputValue","addPlusPrefix","_jsx","InputGroup","Object","assign","nextState","nextValue","updateCaretPosition","addon","type","attributes","searchPlaceholder","valueExtractor","option","listExtractor","title","name","secondaryLabel","onSelectOption","inputMode","includes"],"mappings":"4iBAOO,MAAMA,EAAoBC,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,EAAAnB,EAlBgB,sOAuB7B,MAAOoB,GAAWC,EACdC,EAAuBC,iBAGpBC,EAAiBC,GAAsBJ,OAE5CK,IACKC,EAAYC,GAAiBP,EAAiB,IAE/CQ,EAAUC,EAAyB,MAEnCC,EAAoBC,EAAkB,CACxCC,IAAKJ,EACLK,UAAY/B,GACRmB,EAAuBa,aACnBhC,EAAMiC,QAAQ,UAAW,IACzBZ,KAINa,EAC6B,QAA/BC,EAAArB,aAAY,EAAZA,EAAeO,UAAgB,IAAAc,EAAAA,EAAI,qBAKvCC,GAAU,KACN,MAAMC,EAAiBpB,EAAQqB,QAC1BC,GACGA,EAAQC,cAAgBC,EAAqBzC,aAAK,EAALA,EAAOwC,eAC1D,GAEFlB,EAAmBe,GACnBZ,EACIN,EAAuBa,aAAahC,aAAK,EAALA,EAAO0C,OAAQL,GACtD,GACF,CAACrC,IAKJ,MAqBM2C,EAAsBJ,IACxBK,EAA0BpB,EAAYe,GAClCxC,GACA8C,EAAuBrB,EAAYe,EACvC,EAMEM,EAAyB,CAC3BrB,EACAH,KAEA,MAAMyB,EAAqB3B,EAAuBa,aAC9CR,EACAH,GAEJtB,SAAAA,EAAW,CACP2C,OAAQI,EAAmBb,QAAQ,WAAY,IAC/CO,YACInB,GAAmB0B,EAAc1B,EAAgBmB,cACvD,EAGAI,EAA4B,CAC9BpB,EACAH,KAEAI,EACIN,EAAuBa,aAAaR,EAAYH,IAGpDC,EAAmBD,EAAgB,EAqCvC,OACI2B,EAACC,EAAUC,OAAAC,OAAA,CACPrD,GAAIA,EACJgC,IAAKJ,EACL1B,MAAOwB,EACPzB,SAxFkB,KACtB,MAAMqD,EAAYxB,IAClB,IAAKwB,EAAW,OAEhB,MAAMC,UAAEA,EAASC,oBAAEA,GAAwBF,EAE3CE,IACAV,EAA0BS,EAAWhC,GACjCtB,GACA8C,EAAuBQ,EAAWhC,EACtC,EA+EIpB,WAAYA,KAAgBuB,EAC5BtB,QAlGY,KACZA,EACAA,IAEAuB,EAAc,GAClB,EA8FItB,OAAQA,EACRC,MAAOA,EACPO,YAAaA,EACb4C,MA5CAlD,EACO,CACHmD,KAAM,QACNC,WAAY,CACRzD,MAAO+C,EAAc1B,aAAe,EAAfA,EAAiBmB,eAIvC,CACHgB,KAAM,OACNC,WAAY,CACR,aAAc,eACd9C,YAAaL,EACbW,UACAoB,eAAgBhB,EAChBb,aAAcA,EACdkD,kBAAmBnD,EACnBoD,eAAiBC,GAAW,IAAIA,EAAOpB,cACvCqB,cAAgBD,IAAM,CAClBE,MAAOF,EAAOG,KACdC,eAAgBjB,EAAca,EAAOpB,eAEzCyB,eAAgBtB,EAChBlC,cAAeA,EACfC,cAAeA,IAqBvBwD,UAAU,UACVtD,aAAcA,EACdC,SAAUA,EAAQ,aACNqB,GACRnB,GACN,EAWJ0B,EAAwBD,GACnBA,EAAcA,EAAYP,QAAQ,IAAK,IAAM,GAGlDc,EAAiBP,GACdA,EACEA,EAAY2B,SAAS,KAAO3B,EAAc,IAAIA,IAD5B"}
+{"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\n// @catalog\n/**\n * A phone number field composed of a country code selector and a number input.\n *\n * Use `PhoneNumberInput` when collecting an internationalised phone number.\n * The country code can be selected from a searchable dropdown or locked to a\n * fixed value via `fixedCountry`.\n * @keywords contact, country code, field, form, input, number, telephone\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        // eslint-disable-next-line react-hooks/exhaustive-deps\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":["PhoneNumberInput","_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","replace","resolvedAriaLabel","_b","useEffect","selectedOption","filter","country","countryCode","normaliseCountryCode","number","handleSelectOption","performLocalChangeHandler","performOnChangeHandler","formatedInputValue","addPlusPrefix","_jsx","InputGroup","Object","assign","nextState","nextValue","updateCaretPosition","addon","type","attributes","searchPlaceholder","valueExtractor","option","listExtractor","title","name","secondaryLabel","onSelectOption","inputMode","includes"],"mappings":"+gBAiBO,MAAMA,EAAoBC,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,EAAAnB,EAlBgB,sOAuB7B,MAAOoB,GAAWC,EACdC,EAAuBC,iBAGpBC,EAAiBC,GAAsBJ,OAE5CK,IACKC,EAAYC,GAAiBP,EAAiB,IAE/CQ,EAAUC,EAAyB,MAEnCC,EAAoBC,EAAkB,CACxCC,IAAKJ,EACLK,UAAY/B,GACRmB,EAAuBa,aACnBhC,EAAMiC,QAAQ,UAAW,IACzBZ,KAINa,EAC6B,QAA/BC,EAAArB,aAAY,EAAZA,EAAeO,UAAgB,IAAAc,EAAAA,EAAI,qBAKvCC,GAAU,KACN,MAAMC,EAAiBpB,EAAQqB,QAC1BC,GACGA,EAAQC,cAAgBC,EAAqBzC,aAAK,EAALA,EAAOwC,eAC1D,GAEFlB,EAAmBe,GACnBZ,EACIN,EAAuBa,aAAahC,aAAK,EAALA,EAAO0C,OAAQL,GACtD,GAEF,CAACrC,IAKJ,MAqBM2C,EAAsBJ,IACxBK,EAA0BpB,EAAYe,GAClCxC,GACA8C,EAAuBrB,EAAYe,EACvC,EAMEM,EAAyB,CAC3BrB,EACAH,KAEA,MAAMyB,EAAqB3B,EAAuBa,aAC9CR,EACAH,GAEJtB,SAAAA,EAAW,CACP2C,OAAQI,EAAmBb,QAAQ,WAAY,IAC/CO,YACInB,GAAmB0B,EAAc1B,EAAgBmB,cACvD,EAGAI,EAA4B,CAC9BpB,EACAH,KAEAI,EACIN,EAAuBa,aAAaR,EAAYH,IAGpDC,EAAmBD,EAAgB,EAqCvC,OACI2B,EAACC,EAAUC,OAAAC,OAAA,CACPrD,GAAIA,EACJgC,IAAKJ,EACL1B,MAAOwB,EACPzB,SAxFkB,KACtB,MAAMqD,EAAYxB,IAClB,IAAKwB,EAAW,OAEhB,MAAMC,UAAEA,EAASC,oBAAEA,GAAwBF,EAE3CE,IACAV,EAA0BS,EAAWhC,GACjCtB,GACA8C,EAAuBQ,EAAWhC,EACtC,EA+EIpB,WAAYA,KAAgBuB,EAC5BtB,QAlGY,KACZA,EACAA,IAEAuB,EAAc,GAClB,EA8FItB,OAAQA,EACRC,MAAOA,EACPO,YAAaA,EACb4C,MA5CAlD,EACO,CACHmD,KAAM,QACNC,WAAY,CACRzD,MAAO+C,EAAc1B,aAAe,EAAfA,EAAiBmB,eAIvC,CACHgB,KAAM,OACNC,WAAY,CACR,aAAc,eACd9C,YAAaL,EACbW,UACAoB,eAAgBhB,EAChBb,aAAcA,EACdkD,kBAAmBnD,EACnBoD,eAAiBC,GAAW,IAAIA,EAAOpB,cACvCqB,cAAgBD,IAAM,CAClBE,MAAOF,EAAOG,KACdC,eAAgBjB,EAAca,EAAOpB,eAEzCyB,eAAgBtB,EAChBlC,cAAeA,EACfC,cAAeA,IAqBvBwD,UAAU,UACVtD,aAAcA,EACdC,SAAUA,EAAQ,aACNqB,GACRnB,GACN,EAWJ0B,EAAwBD,GACnBA,EAAcA,EAAYP,QAAQ,IAAK,IAAM,GAGlDc,EAAiBP,GACdA,EACEA,EAAY2B,SAAS,KAAO3B,EAAc,IAAIA,IAD5B"}

package/phone-number-input/types.d.ts

@@ -1,47 +1,107 @@
-import React from "react";
+import type React from "react";
+/**
+ * Represents a selectable country entry in the phone number country code dropdown.
+ */
 export interface CountryValue {
+    /** The country name. */
     name: string;
+    /** The country region. */
     regions: string[];
+    /**
+     * ISO 3166-1 alpha-2 country code.
+     */
     iso2: string;
+    /**
+     * Calling code for the country, without the leading `+`.
+     */
     countryCode: string;
+    /**
+     * Phone number format mask applied to the phone number field.
+     */
     format: string;
 }
+/**
+ * Value shape for `PhoneNumberInput`, representing the selected country code
+ * and the phone number separately.
+ */
 export interface PhoneNumberInputValue {
     /**
-     * You may choose to specify with or without the +. The return value
-     * will always contain the +
+     * Country calling code. May be supplied with or without a leading `+`;
      */
     countryCode?: string | undefined;
+    /**
+     * The phone number number, without the country code prefix.
+     */
     number?: string | undefined;
 }
+/**
+ * Props for the `PhoneNumberInput` component.
+ */
 export interface PhoneNumberInputProps extends React.AriaAttributes {
-    /** The value of the input */
+    /**
+     * Controlled value containing the selected country code and phone number.
+     */
     value?: PhoneNumberInputValue | undefined;
+    /**
+     * Renders the input in an error state when `true`.
+     */
     error?: boolean | undefined;
-    /** Specifies if the clear button should be present in the input */
+    /**
+     * Shows a clear button inside the input when `true` and the field has a value.
+     */
     allowClear?: boolean | undefined;
     "data-testid"?: string | undefined;
     className?: string | undefined;
+    /**
+     * Removes the visible border from the input group when `true`.
+     *
+     * @default false
+     */
     noBorder?: boolean | undefined;
     /**
-     * Specifies if the country code is a fixed value and the user
-     * cannot select another option
+     * When `true`, the country code is displayed as a static label and the
+     * user cannot change it. When `false`, a searchable dropdown is rendered.
+     *
+     * @default false
      */
     fixedCountry?: boolean | undefined;
+    /**
+     * Called whenever the country or phone number changes.
+     *
+     * @param value Updated phone number value including the leading `+`.
+     */
     onChange?: ((value: PhoneNumberInputValue) => void) | undefined;
-    /** Called when the clear button in the input field is clicked */
+    /**
+     * Called when the clear button is activated.
+     */
     onClear?: () => void | undefined;
-    /** Called when a defocus happens */
+    /**
+     * Called when the input loses focus.
+     */
     onBlur?: (() => void) | undefined;
-    /** The placeholder value for the dropdown selector */
+    /**
+     * Placeholder text shown in the country code dropdown when no country is
+     * selected.
+     *
+     * @default "Select"
+     */
     optionPlaceholder?: string | undefined;
-    /** The placeholder value for the dropdown search */
+    /**
+     * Placeholder text shown inside the search field of the country code
+     * dropdown. Only relevant when `enableSearch` is `true`.
+     */
     optionSearchPlaceholder?: string | undefined;
-    /** Specifies if search is enabled in the dropdown */
+    /**
+     * Enables a search field inside the country code dropdown.
+     */
     enableSearch?: boolean | undefined;
-    /** Called when the dropdown is dismissed */
+    /**
+     * Called when the country code dropdown closes.
+     */
     onHideOptions?: (() => void) | undefined;
-    /** Called when the dropdown is visible */
+    /**
+     * Called when the country code dropdown opens.
+     */
     onShowOptions?: (() => void) | undefined;
     disabled?: boolean | undefined;
     name?: string | undefined;
@@ -50,5 +110,10 @@ export interface PhoneNumberInputProps extends React.AriaAttributes {
     readOnly?: boolean | undefined;
     id?: string | undefined;
     autoComplete?: string | undefined;
+    /**
+     * Returns the accessible label for the phone number input.
+     *
+     * @param country Currently selected country, or `undefined`.
+     */
     getAriaLabel?: ((country?: CountryValue) => string) | undefined;
 }

package/pill/pill.d.ts

@@ -1,2 +1,9 @@
-import { PillProps } from "./types";
-export declare const Pill: ({ type, colorType, children, icon, ...otherProps }: PillProps) => JSX.Element;
+import type { PillProps } from "./types";
+/**
+ * A compact label used to display status, category, or metadata.
+ *
+ * Use `Pill` to surface short, read-only information — such as a tag or status
+ * badge — inline with other content.
+ * @keywords badge, label, status
+ */
+export declare const Pill: ({ type, colorType, children, icon, className, ...otherProps }: PillProps) => JSX.Element;

package/pill/pill.js

@@ -1,2 +1,2 @@
-import{__rest as r}from"../_virtual/_tslib.js";import{jsxs as e,jsx as o}from"react/jsx-runtime";import t from"react";import{Wrapper as i,Label as c}from"./pill.style.js";const l=l=>{var{type:n,colorType:p="black",children:m,icon:a}=l,s=r(l,["type","colorType","children","icon"]);return e(i,Object.assign({$type:n,$color:p},s,{children:[a&&t.cloneElement(a,{"aria-hidden":!0}),o(c,{children:m})]}))};export{l as Pill};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as r,jsx as l}from"react/jsx-runtime";import i from"clsx";import o from"react";import{label as c,wrapperBase as a,wrapperSolid as s,wrapperOutlinePrimary as t,wrapperOutlineBlue as m,wrapperOutlineRed as n,wrapperOutlineYellow as p,wrapperOutlineGreen as d,wrapperOutlineGrey as y,wrapperOutlineBlack as b,wrapperSolidPrimary as u,wrapperSolidBlue as f,wrapperSolidRed as g,wrapperSolidYellow as h,wrapperSolidGreen as j,wrapperSolidGrey as v,wrapperSolidBlack as N}from"./pill.styles.js";const k={solid:{black:N,grey:v,green:j,yellow:h,red:g,blue:f,primary:u},outline:{black:b,grey:y,green:d,yellow:p,red:n,blue:m,primary:t}},x=t=>{var{type:m,colorType:n="black",children:p,icon:d,className:y}=t,b=e(t,["type","colorType","children","icon","className"]);return r("div",Object.assign({},b,{className:i(a,"solid"===m&&s,k[m][n],y),children:[d&&o.cloneElement(d,{"aria-hidden":!0}),l("div",{className:c,children:p})]}))};export{x as Pill};
 //# sourceMappingURL=pill.js.map

package/pill/pill.js.map

@@ -1 +1 @@
-{"version":3,"file":"pill.js","sources":["../../src/pill/pill.tsx"],"sourcesContent":["import React from \"react\";\nimport { PillProps } from \"./types\";\nimport { Label, Wrapper } from \"./pill.style\";\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":["Pill","_a","type","colorType","children","icon","otherProps","__rest","_jsxs","Wrapper","Object","assign","$type","$color","React","cloneElement","_jsx","Label"],"mappings":"2KAIO,MAAMA,EAAQC,IAAA,IAAAC,KACjBA,EAAIC,UACJA,EAAY,QAAOC,SACnBA,EAAQC,KACRA,GAAIJ,EACDK,EAAUC,EAAAN,EALI,wCAOjB,OACIO,EAACC,EAAOC,OAAAC,OAAA,CAAAC,MAAQV,EAAIW,OAAUV,GAAeG,EAAU,CAAAF,SAAA,CAClDC,GAAQS,EAAMC,aAAaV,EAAM,CAAE,eAAe,IACnDW,EAACC,EAAK,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\n// @catalog\n/**\n * A compact label used to display status, category, or metadata.\n *\n * Use `Pill` to surface short, read-only information — such as a tag or status\n * badge — inline with other content.\n * @keywords badge, label, status\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","Pill","_a","type","colorType","children","icon","className","otherProps","__rest","_jsxs","Object","assign","clsx","styles.wrapperBase","styles.wrapperSolid","React","cloneElement","_jsx","styles.label"],"mappings":"oiBAMA,MAAMA,EAAiE,CACnEC,MAAO,CACHC,MAAOC,EACPC,KAAMC,EACNC,MAAOC,EACPC,OAAQC,EACRC,IAAKC,EACLC,KAAMC,EACNC,QAASC,GAEbC,QAAS,CACLd,MAAOe,EACPb,KAAMc,EACNZ,MAAOa,EACPX,OAAQY,EACRV,IAAKW,EACLT,KAAMU,EACNR,QAASS,IAYJC,EAAQC,IAAA,IAAAC,KACjBA,EAAIC,UACJA,EAAY,QAAOC,SACnBA,EAAQC,KACRA,EAAIC,UACJA,GAASL,EACNM,EAAUC,EAAAP,EANI,oDAQjB,OACIQ,EAAA,MAAAC,OAAAC,OAAA,GACQJ,EAAU,CACdD,UAAWM,EACPC,EACS,UAATX,GAAoBY,EACpBtC,EAAc0B,GAAMC,GACpBG,GACHF,SAAA,CAEAC,GAAQU,EAAMC,aAAaX,EAAM,CAAE,eAAe,IACnDY,EAAA,MAAA,CAAKX,UAAWY,EAAYd,SAAGA,OAC7B"}

package/pill/pill.styles.d.ts

@@ -0,0 +1,17 @@
+export declare const wrapperBase: import("@linaria/core").LinariaClassName;
+export declare const wrapperSolid: import("@linaria/core").LinariaClassName;
+export declare const wrapperSolidBlack: import("@linaria/core").LinariaClassName;
+export declare const wrapperSolidGrey: import("@linaria/core").LinariaClassName;
+export declare const wrapperSolidGreen: import("@linaria/core").LinariaClassName;
+export declare const wrapperSolidYellow: import("@linaria/core").LinariaClassName;
+export declare const wrapperSolidRed: import("@linaria/core").LinariaClassName;
+export declare const wrapperSolidBlue: import("@linaria/core").LinariaClassName;
+export declare const wrapperSolidPrimary: import("@linaria/core").LinariaClassName;
+export declare const wrapperOutlineBlack: import("@linaria/core").LinariaClassName;
+export declare const wrapperOutlineGrey: import("@linaria/core").LinariaClassName;
+export declare const wrapperOutlineGreen: import("@linaria/core").LinariaClassName;
+export declare const wrapperOutlineYellow: import("@linaria/core").LinariaClassName;
+export declare const wrapperOutlineRed: import("@linaria/core").LinariaClassName;
+export declare const wrapperOutlineBlue: import("@linaria/core").LinariaClassName;
+export declare const wrapperOutlinePrimary: import("@linaria/core").LinariaClassName;
+export declare const label: import("@linaria/core").LinariaClassName;

package/pill/pill.styles.js

@@ -0,0 +1,2 @@
+import"./pill.styles_xwrniu.css";const w="w2wrvwd",l="w1bnitgk",i="w10rd591",n="w14ozhbm",r="w1dquypt",o="wijzmbj",t="wtf7rkw",m="w17huuqy",s="w1lx8mm6",p="wnrixoo",u="wnolbsf",z="w1nlhiv2",b="wfw4qqz",c="w1c1fn8z",f="w19krjn1",h="w1h3c6yz",q="l1uma0l6";export{q as label,w as wrapperBase,p as wrapperOutlineBlack,f as wrapperOutlineBlue,z as wrapperOutlineGreen,u as wrapperOutlineGrey,h as wrapperOutlinePrimary,c as wrapperOutlineRed,b as wrapperOutlineYellow,l as wrapperSolid,i as wrapperSolidBlack,m as wrapperSolidBlue,r as wrapperSolidGreen,n as wrapperSolidGrey,s as wrapperSolidPrimary,t as wrapperSolidRed,o as wrapperSolidYellow};
+//# sourceMappingURL=pill.styles.js.map

package/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":["wrapperBase","wrapperSolid","wrapperSolidBlack","wrapperSolidGrey","wrapperSolidGreen","wrapperSolidYellow","wrapperSolidRed","wrapperSolidBlue","wrapperSolidPrimary","wrapperOutlineBlack","wrapperOutlineGrey","wrapperOutlineGreen","wrapperOutlineYellow","wrapperOutlineRed","wrapperOutlineBlue","wrapperOutlinePrimary","label"],"mappings":"qDAIO,MAAMA,EAAW,UAeXC,EAAY,WAKZC,EAAiB,WAIjBC,EAAgB,WAIhBC,EAAiB,WAIjBC,EAAkB,UAIlBC,EAAe,UAIfC,EAAgB,WAIhBC,EAAmB,WAInBC,EAAmB,UAMnBC,EAAkB,UAMlBC,EAAmB,WAMnBC,EAAoB,UAMpBC,EAAiB,WAMjBC,EAAkB,WAMlBC,EAAqB,WAMrBC,EAAK"}