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

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{Typography as t}from"../typography/index.js";import{V3_MediaQuery as n,V3_Radius as s,V3_Spacing as a,V3_Colour as d,V3_Border as l,V3_Font as c}from"../v3_theme/index.js";const g=e.nav`
-    display: flex;
-`,m=e.div`
-    align-self: flex-start;
-
-    display: flex;
-    align-items: center;
-
-    ${n.MaxWidth.lg} {
-        align-self: center;
-    }
-`,p=e.div`
-    display: inline-flex;
-    align-items: center;
-`,b=e(o)`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    outline: none;
-    border-radius: ${s.sm};
-    height: 2.5rem;
-    width: 2.5rem;
-    padding: 0 ${a["spacing-8"]};
-
-    color: ${d["icon-primary"]};
-
-    svg {
-        height: 1.25rem;
-        width: 1.25rem;
-    }
-
-    &:disabled {
-        color: ${d["icon-disabled-subtle"]};
-        cursor: not-allowed;
-    }
-
-    &:hover,
-    &:focus-visible {
-        background-color: ${d["bg-hover"]};
-    }
-`,$=e(o)`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    outline: none;
-    margin: ${a["spacing-4"]};
-    border-radius: ${s.sm};
-    height: 2.5rem;
-    width: 2.5rem;
-    padding: 0 ${a["spacing-8"]};
-
-    color: ${d["icon-primary"]};
-
-    svg {
-        height: 1.25rem;
-        width: 1.25rem;
-    }
-
-    &:disabled {
-        color: ${d["icon-disabled-subtle"]};
-        cursor: not-allowed;
-    }
-
-    &:not(:disabled):hover,
-    &:not(:disabled):focus-visible {
-        background: ${d["bg-hover"]};
-    }
-`,h=e.button`
-    outline: none;
-    margin: ${a["spacing-4"]};
-    box-shadow: none;
-    border: ${l["width-010"]} ${l.solid}
-        ${e=>i`
-                ${e.$selected?d["bg-primary"]:d.border}
-            `};
-    border-radius: ${s.sm};
-    min-width: 2.5rem;
-    height: 2.5rem;
-    padding: 0 ${a["spacing-8"]};
-
-    background: ${e=>e.$selected?d["bg-primary"]:d.bg};
-    cursor: pointer;
-
-    ${c["body-baseline-regular"]};
-    text-align: center;
-    color: ${e=>e.$selected?d["text-inverse"]:d.text};
-
-    ${e=>e.$selected?i`
-                  font-weight: ${c.Spec["weight-bold"]};
-
-                  &:hover,
-                  &:focus-visible {
-                      border-color: ${d["bg-selected-strongest-hover"]};
-                      background: ${d["bg-selected-strongest-hover"]};
-                      color: ${d["text-inverse"]};
-                  }
-              `:i`
-                  &:hover,
-                  &:focus-visible {
-                      border-color: ${d["bg-hover"]};
-                      background: ${d["bg-hover"]};
-                      color: ${d["text-hover"]};
-                      font-weight: ${c.Spec["weight-semibold"]};
-                  }
-              `}
-`,u=e.div`
-    position: relative;
-
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    margin: ${a["spacing-4"]};
-    border-radius: ${s.sm};
-    width: 2.5rem;
-    height: 2.5rem;
-
-    cursor: pointer;
-`,v=e.div`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    margin: ${a["spacing-4"]};
-
-    color: ${d.text};
-`,f=e(t.BodyBL)`
-    white-space: nowrap;
-`,y=e(t.BodyBL)`
-    margin: 0 ${a["spacing-16"]};
-    white-space: nowrap;
-`,x=e(r)`
-    width: 3.5rem;
-    height: 2.5rem;
-    ${c["body-baseline-regular"]};
-
-    input {
-        padding: 0 ${a["spacing-8"]};
-        text-align: center;
-    }
-`,w=e.div`
-    position: absolute;
-    top: -${a["spacing-8"]};
-    transform: translateY(-100%);
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    border: none;
-    border-radius: ${s.sm};
-    width: max-content;
-    padding: ${a["spacing-4"]} ${a["spacing-12"]};
-
-    background-color: ${d["bg-hover"]};
-
-    ${c["body-xs-regular"]}
-    color: ${d["text-hover"]};
-`,j=e.div`
-    margin-left: ${a["spacing-4"]};
-    width: 10rem;
-`;export{b as EllipsisButton,u as EllipsisContainer,w as Hover,j as InputSelectWrapper,x as InputView,f as Label,y as LabelDivider,$ as NavigationButton,h as PageItem,m as PaginationList,p as PaginationMenu,v as PaginationMobileInput,g as PaginationWrapper};
+import"./pagination.styles_1u898rb.css";const i="p1afjf30",p="p1ma9kw3",s="p1sz1s7f",t="irakt3t",a="i1eo6n86",n="pia4hww",o="p673w5b",e="e1peilt2",r="p1yg278j",x="l1nxoktb",f="lquxmfr",g="i1hj21s6",l="h1x6xag5",m="issm41d";export{e as ellipsisContainer,l as hover,t as iconButton,a as iconButtonNavigation,m as inputSelectWrapper,g as inputView,x as label,f as labelDivider,n as pageItem,o as pageItemSelected,p as paginationList,s as paginationMenu,r 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\";\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":"mVA2BO,MAAMA,EAAoBC,EAAOC,GAAG;;EAI9BC,EAAiBF,EAAOG,GAAG;;;;;;MAMlCC,EAAcC,SAASC;;;EAKhBC,EAAiBP,EAAOG,GAAG;;;EAK3BK,EAAiBR,EAAOS,EAAc;;;;;;qBAM9BC,EAAc;;;iBAGlBC,EAAW;;aAEfC,EAAU;;;;;;;;iBAQNA,EAAU;;;;;;4BAMCA,EAAU;;EAIzBC,EAAmBb,EAAOS,EAA2B;;;;;;cAMpDE,EAAW;qBACJD,EAAc;;;iBAGlBC,EAAW;;aAEfC,EAAU;;;;;;;;iBAQNA,EAAU;;;;;;sBAMLA,EAAU;;EAInBE,EAAWd,EAAOe,MAAkB;;cAEnCJ,EAAW;;cAEXK,EAAU,gBAAgBA,EAAUC;UACvCC,GACCC,CAAG;kBACGD,EAAME,UAAYR,EAAU,cAAgBA,EAAUS;;qBAEnDX,EAAc;;;iBAGlBC,EAAW;;kBAETO,GACXA,EAAME,UAAYR,EAAU,cAAgBA,EAAUU;;;MAGxDC,EAAQ;;aAEAL,GACNA,EAAME,UAAYR,EAAU,gBAAkBA,EAAUY;;MAEzDN,GACCA,EAAME,UACAD,CAAG;iCACgBI,EAAQE,KAAK;;;;sCAIRb,EAAU;oCACZA,EAAU;+BACfA,EAAU;;gBAG3BO,CAAG;;;sCAGqBP,EAAU;oCACZA,EAAU;+BACfA,EAAU;qCACJW,EAAQE,KAAK;;;EAKrCC,EAAoB1B,EAAOG,GAAG;;;;;;;cAO7BQ,EAAW;qBACJD,EAAc;;;;;EAOtBiB,EAAwB3B,EAAOG,GAAG;;;;;cAKjCQ,EAAW;;aAEZC,EAAUY;EAGVI,EAAQ5B,EAAO6B,EAAWC,OAAO;;EAIjCC,EAAe/B,EAAO6B,EAAWC,OAAO;gBACrCnB,EAAW;;EAIdqB,EAAYhC,EAAOiC,EAAM;;;MAGhCV,EAAQ;;;qBAGOZ,EAAW;;;EAKnBuB,EAAQlC,EAAOG,GAAG;;YAEnBQ,EAAW;;;;;;;;qBAQFD,EAAc;;eAEpBC,EAAW,gBAAgBA,EAAW;;wBAE7BC,EAAU;;MAE5BW,EAAQ;aACDX,EAAU;EAGVuB,EAAqBnC,EAAOG,GAAG;mBACzBQ,EAAW;;"}
+{"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":"kEAMO,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_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/phone-number-input/phone-number-input.d.ts

@@ -1,2 +1,2 @@
 import type { PhoneNumberInputProps } from "./types";
-export declare const PhoneNumberInput: ({ onChange, value, allowClear, onClear, onBlur, error, fixedCountry, optionPlaceholder, optionSearchPlaceholder, enableSearch, onHideOptions, onShowOptions, placeholder, autoComplete, noBorder, ...otherProps }: PhoneNumberInputProps) => import("react/jsx-runtime").JSX.Element;
+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 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/string-helper.js";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{onChange:s,value:d,allowClear:m,onClear:h,onBlur:C,error:b,fixedCountry:f=!1,optionPlaceholder:y="Select",optionSearchPlaceholder:j,enableSearch:v,onHideOptions:g,onShowOptions:S,placeholder:x,autoComplete:O,noBorder:w=!1}=u,B=e(u,["onChange","value","allowClear","onClear","onBlur","error","fixedCountry","optionPlaceholder","optionSearchPlaceholder","enableSearch","onHideOptions","onShowOptions","placeholder","autoComplete","noBorder"]);const[P]=r(i.getCountries()),[N,E]=r(void 0),[H,$]=r(""),_=t(null),L=a({ref:_,formatter:e=>i.formatNumber(e.replace(/[^0-9]/g,""),N)});n((()=>{const e=P.filter((e=>e.countryCode===p(null==d?void 0:d.countryCode)))[0];E(e),$(i.formatNumber(null==d?void 0:d.number,e))}),[d]);const M=e=>{k(H,e),s&&V(H,e)},V=(e,o)=>{const r=i.formatNumber(e,o);null==s||s({number:r.replace(/[\s()]+/g,""),countryCode:o&&c(o.countryCode)})},k=(e,o)=>{$(i.formatNumber(e,o)),E(o)};return o(l,Object.assign({ref:_,value:H,onChange:()=>{const e=L();if(!e)return;const{nextValue:o,updateCaretPosition:r}=e;r(),k(o,N),s&&V(o,N)},allowClear:m&&!!H,onClear:()=>{h?h():$("")},onBlur:C,error:b,placeholder:x,addon:f?{type:"label",attributes:{value:c(null==N?void 0:N.countryCode)}}:{type:"list",attributes:{"aria-label":"Country code",placeholder:y,options:P,selectedOption:N,enableSearch:v,searchPlaceholder:j,valueExtractor:e=>`+${e.countryCode}`,listExtractor:e=>({title:e.name,secondaryLabel:c(e.countryCode)}),onSelectOption:M,onHideOptions:g,onShowOptions:S}},inputMode:"numeric",autoComplete:O,"aria-label":"Enter phone number",noBorder:w},B))},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\";\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":["PhoneNumberInput","_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","replace","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":"qcAQO,MAAMA,EAAoBC,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,EAAAjB,EAhBgB,kNAqB7B,MAAOkB,GAAWC,EACdC,EAAuBC,iBAGpBC,EAAiBC,GAAsBJ,OAE5CK,IACKC,EAAYC,GAAiBP,EAAiB,IAE/CQ,EAAUC,EAAyB,MAEnCC,EAAoBC,EAAkB,CACxCC,IAAKJ,EACLK,UAAY9B,GACRkB,EAAuBa,aACnB/B,EAAMgC,QAAQ,UAAW,IACzBZ,KAOZa,GAAU,KACN,MAAMC,EAAiBlB,EAAQmB,QAC1BC,GACGA,EAAQC,cAAgBC,EAAqBtC,aAAK,EAALA,EAAOqC,eAC1D,GAEFhB,EAAmBa,GACnBV,EACIN,EAAuBa,aAAa/B,aAAK,EAALA,EAAOuC,OAAQL,GACtD,GACF,CAAClC,IAKJ,MAqBMwC,EAAsBJ,IACxBK,EAA0BlB,EAAYa,GAClCrC,GACA2C,EAAuBnB,EAAYa,EACvC,EAMEM,EAAyB,CAC3BnB,EACAH,KAEA,MAAMuB,EAAqBzB,EAAuBa,aAC9CR,EACAH,GAEJrB,SAAAA,EAAW,CACPwC,OAAQI,EAAmBX,QAAQ,WAAY,IAC/CK,YACIjB,GAAmBwB,EAAcxB,EAAgBiB,cACvD,EAGAI,EAA4B,CAC9BlB,EACAH,KAEAI,EACIN,EAAuBa,aAAaR,EAAYH,IAGpDC,EAAmBD,EAAgB,EAqCvC,OACIyB,EAACC,EAAUC,OAAAC,OAAA,CACPnB,IAAKJ,EACLzB,MAAOuB,EACPxB,SAvFkB,KACtB,MAAMkD,EAAYtB,IAClB,IAAKsB,EAAW,OAEhB,MAAMC,UAAEA,EAASC,oBAAEA,GAAwBF,EAE3CE,IACAV,EAA0BS,EAAW9B,GACjCrB,GACA2C,EAAuBQ,EAAW9B,EACtC,EA8EInB,WAAYA,KAAgBsB,EAC5BrB,QAjGY,KACZA,EACAA,IAEAsB,EAAc,GAClB,EA6FIrB,OAAQA,EACRC,MAAOA,EACPO,YAAaA,EACbyC,MA3CA/C,EACO,CACHgD,KAAM,QACNC,WAAY,CACRtD,MAAO4C,EAAcxB,aAAe,EAAfA,EAAiBiB,eAIvC,CACHgB,KAAM,OACNC,WAAY,CACR,aAAc,eACd3C,YAAaL,EACbU,UACAkB,eAAgBd,EAChBZ,aAAcA,EACd+C,kBAAmBhD,EACnBiD,eAAiBC,GAAW,IAAIA,EAAOpB,cACvCqB,cAAgBD,IAAM,CAClBE,MAAOF,EAAOG,KACdC,eAAgBjB,EAAca,EAAOpB,eAEzCyB,eAAgBtB,EAChB/B,cAAeA,EACfC,cAAeA,IAoBvBqD,UAAU,UACVnD,aAAcA,EAAY,aACf,qBACXC,SAAUA,GACNC,GACN,EAWJwB,EAAwBD,GACnBA,EAAcA,EAAYL,QAAQ,IAAK,IAAM,GAGlDY,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\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":"+gBAQO,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"}

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

@@ -50,4 +50,5 @@ export interface PhoneNumberInputProps extends React.AriaAttributes {
     readOnly?: boolean | undefined;
     id?: string | undefined;
     autoComplete?: string | undefined;
+    getAriaLabel?: ((country?: CountryValue) => string) | undefined;
 }

package/pill/pill.d.ts

@@ -1,2 +1,2 @@
 import type { PillProps } from "./types";
-export declare const Pill: ({ type, colorType, children, icon, ...otherProps }: PillProps) => JSX.Element;
+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\";\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":["Pill","_a","type","colorType","children","icon","otherProps","__rest","_jsxs","Wrapper","Object","assign","$type","$color","React","cloneElement","_jsx","Label"],"mappings":"2KAKO,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\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,IAIJC,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_1wiyl8.css";const w="w2wrvwd",l="w1bnitgk",i="w10rd591",n="w14ozhbm",o="w1dquypt",r="wijzmbj",t="wtf7rkw",m="w17huuqy",s="w1lx8mm6",p="wnrixoo",y="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,y as wrapperOutlineGrey,h as wrapperOutlinePrimary,c as wrapperOutlineRed,b as wrapperOutlineYellow,l as wrapperSolid,i as wrapperSolidBlack,m as wrapperSolidBlue,o as wrapperSolidGreen,n as wrapperSolidGrey,s as wrapperSolidPrimary,t as wrapperSolidRed,r 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"}

package/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/popover/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./popover";
-export * from "./popover-hoc";
+export * from "./popover-inline";
+export * from "./popover-trigger";
 export * from "./types";

package/popover/index.js

@@ -1,2 +1,2 @@
-export{Popover}from"./popover.js";export{withPopover}from"./popover-hoc.js";
+export{Popover}from"./popover.js";export{PopoverInline}from"./popover-inline/popover-inline.js";export{PopoverTrigger}from"./popover-trigger.js";
 //# sourceMappingURL=index.js.map

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

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

package/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":["PopoverInline","_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":"gRAMO,MAAMA,EAAiBC,IAAA,IAAAC,UAC1BA,EAASC,QACTA,EAAOC,KACPA,EAAIC,eACJA,EAAiB,UAASC,oBAC1BA,EAAsB,WAASL,EAC5BM,EAAUC,EAAAP,EANa,uEAW1B,MAAMQ,IAAeN,EAErB,OACIO,EAACC,EAAcC,OAAAC,OAAA,CAAA,EAAKN,EAAU,CAAAO,SAC1BC,EAAA,OAAA,CAAA,aACgBb,QAAAA,EAAcO,OAAaO,EAAY,YACnDC,KAAK,SAAQ,gBACC,SACdC,SAAU,EACVC,UAAWC,yBACWf,EAAc,6BACRC,EAAmBQ,SAAA,CAE9CX,EACAC,GACGM,EAAA,OAAA,CACIS,UAAWE,EACPZ,GAAca,GACjBR,SAEAV,SAIA"}

package/popover/popover-inline/popover-inline.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const popoverInlineText: import("@linaria/core").LinariaClassName;
+export declare const popoverInlineIconWithContent: import("@linaria/core").LinariaClassName;

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

@@ -0,0 +1,2 @@
+import"./popover-inline.styles_bkopnt.css";const p="p1h7dfwa",o="pzf43s3";export{o as popoverInlineIconWithContent,p as popoverInlineText};
+//# sourceMappingURL=popover-inline.styles.js.map

package/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":["popoverInlineText","popoverInlineIconWithContent"],"mappings":"iFAIO,MAAMA,EAAiB,WAmCjBC,EAA4B"}

package/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/popover/popover-trigger.d.ts

@@ -0,0 +1,2 @@
+import type { PopoverTriggerProps } from "./types";
+export declare const PopoverTrigger: ({ children, popoverContent, trigger: _trigger, position, zIndex, rootNode, customOffset, delay, onPopoverAppear, onPopoverDismiss, popoverAriaLabel, enableFlip, enableResize, overflow, triggerOnFocus, isModal, className, ...otherProps }: PopoverTriggerProps) => import("react/jsx-runtime").JSX.Element;

package/popover/popover-trigger.js

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

package/popover/popover-trigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-trigger.js","sources":["../../src/popover/popover-trigger.tsx"],"sourcesContent":["import {\n    autoUpdate,\n    flip,\n    FloatingFocusManager,\n    FloatingPortal,\n    limitShift,\n    offset,\n    shift,\n    size,\n    useClick,\n    useDismiss,\n    useFloating,\n    useFocus,\n    useHover,\n    useInteractions,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport { useRef, useState } from \"react\";\n\nimport { useFloatingChild } from \"../overlay/use-floating-context\";\nimport { useInheritedThemeScope, useMaxWidthMediaQuery } from \"../theme\";\nimport { useId } from \"../util\";\nimport { Popover } from \"./popover\";\nimport * as styles from \"./popover-trigger.styles\";\nimport type { PopoverTriggerProps, PopoverTriggerType } from \"./types\";\n\nexport const PopoverTrigger = ({\n    children,\n    popoverContent,\n    trigger: _trigger = \"click\",\n    position = \"top\",\n    zIndex,\n    rootNode,\n    customOffset,\n    delay,\n    onPopoverAppear,\n    onPopoverDismiss,\n    popoverAriaLabel,\n    enableFlip = true,\n    enableResize = false,\n    overflow = \"auto\",\n    triggerOnFocus = false,\n    isModal = true,\n    className,\n    ...otherProps\n}: PopoverTriggerProps) => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const [visible, setVisible] = useState<boolean>(false);\n    const nodeRef = useRef<HTMLElement | null>(null);\n    const popoverRef = useRef<HTMLElement | null>(null);\n    const isMobile = useMaxWidthMediaQuery(\"sm\");\n    const [availableHeight, setAvailableHeight] = useState(0);\n    const internalId = useId();\n    const popoverContainerId = `${internalId}-popover`;\n\n    const { refs, floatingStyles, context } = useFloating({\n        open: visible,\n        placement: position,\n        whileElementsMounted: autoUpdate,\n        middleware: [\n            offset(customOffset ?? 16),\n            enableFlip && flip(),\n            shift({\n                limiter: limitShift(),\n            }),\n            enableResize &&\n                size({\n                    apply({ availableHeight }) {\n                        setAvailableHeight(availableHeight);\n                    },\n                }),\n        ],\n        onOpenChange: (isOpen) => {\n            setVisible(isOpen);\n\n            // this callback is triggering twice on hover, the check here prevents extra calls\n            if (visible !== isOpen) {\n                handleVisibilityChange(isOpen);\n            }\n        },\n    });\n    const parentZIndex = useFloatingChild();\n    const { themeProps, themeStyle } = useInheritedThemeScope(visible);\n\n    const trigger: PopoverTriggerType = isMobile ? \"click\" : _trigger;\n    const isTooltip = trigger === \"hover\";\n\n    const click = useClick(context, {\n        // allow trigger by Space/Enter, but disable mouse click in hover mode\n        ignoreMouse: isTooltip,\n    });\n\n    const dismiss = useDismiss(context);\n\n    const hover = useHover(context, {\n        enabled: isTooltip,\n        // short window to enter the floating element without it closing\n        delay: {\n            open: delay?.open ?? 0,\n            close: delay?.close ?? 500,\n        },\n    });\n\n    const focus = useFocus(context, {\n        enabled: triggerOnFocus,\n    });\n\n    const { getReferenceProps, getFloatingProps } = useInteractions([\n        click,\n        dismiss,\n        hover,\n        focus,\n    ]);\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const isFocusInside = (node: Node | null) => {\n        if (!node) return false;\n\n        if (\n            node instanceof HTMLElement &&\n            node.hasAttribute(\"data-floating-ui-focus-guard\")\n        ) {\n            return true;\n        }\n\n        const refEl = nodeRef.current;\n        const floatingEl = popoverRef.current?.parentElement;\n\n        return (\n            (!!refEl && refEl.contains(node)) ||\n            (!!floatingEl && floatingEl.contains(node))\n        );\n    };\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handlePopoverMobileClose = () => {\n        setVisible(false);\n        handleVisibilityChange(false);\n    };\n\n    const handleVisibilityChange = (nextVisible: boolean) => {\n        if (nextVisible && onPopoverAppear) onPopoverAppear();\n        if (!nextVisible && onPopoverDismiss) onPopoverDismiss();\n    };\n\n    const handleBlur = (e: React.FocusEvent<HTMLElement>) => {\n        // On mobile, ModalV2 handles its own dismiss via onMobileClose\n        if (isModal || (isMobile && typeof popoverContent !== \"function\"))\n            return;\n\n        const next =\n            (e.relatedTarget as Node | null) ??\n            (document.activeElement as Node | null);\n\n        if (next && isFocusInside(next)) return;\n\n        setVisible(false);\n        handleVisibilityChange(false);\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderPopover = () => {\n        if (typeof popoverContent === \"function\") {\n            return popoverContent(\n                enableResize ? { maxHeight: availableHeight, overflow } : {}\n            );\n        }\n\n        return (\n            <Popover\n                visible\n                onMobileClose={handlePopoverMobileClose}\n                maxHeight={enableResize ? availableHeight : undefined}\n                overflow={enableResize ? overflow : undefined}\n                ariaLabel={popoverAriaLabel}\n                id={popoverContainerId}\n            >\n                {popoverContent}\n            </Popover>\n        );\n    };\n\n    return (\n        <>\n            <div\n                ref={(node) => {\n                    nodeRef.current = node;\n                    refs.setReference(node);\n                }}\n                {...getReferenceProps({\n                    onClick: (event) => {\n                        // prevent popover interaction from triggering click events on parents\n                        event.stopPropagation();\n                        event.preventDefault();\n                    },\n                })}\n                {...otherProps}\n                className={clsx(styles.triggerContainer, className)}\n            >\n                {children}\n            </div>\n            {visible && (\n                <FloatingPortal root={rootNode}>\n                    <FloatingFocusManager\n                        context={context}\n                        {...(!isModal && {\n                            initialFocus: -1,\n                            returnFocus: false,\n                            modal: false,\n                        })}\n                    >\n                        <div\n                            ref={(node) => {\n                                popoverRef.current = node;\n                                refs.setFloating(node);\n                            }}\n                            {...themeProps}\n                            onBlur={handleBlur}\n                            style={{\n                                ...themeStyle,\n                                ...floatingStyles,\n                                outline: \"none\",\n                                zIndex: zIndex ?? parentZIndex,\n                            }}\n                            {...getFloatingProps()}\n                        >\n                            {renderPopover()}\n                        </div>\n                    </FloatingFocusManager>\n                </FloatingPortal>\n            )}\n        </>\n    );\n};\n"],"names":["PopoverTrigger","_a","children","popoverContent","trigger","_trigger","position","zIndex","rootNode","customOffset","delay","onPopoverAppear","onPopoverDismiss","popoverAriaLabel","enableFlip","enableResize","overflow","triggerOnFocus","isModal","className","otherProps","__rest","visible","setVisible","useState","nodeRef","useRef","popoverRef","isMobile","useMaxWidthMediaQuery","availableHeight","setAvailableHeight","popoverContainerId","useId","refs","floatingStyles","context","useFloating","open","placement","whileElementsMounted","autoUpdate","middleware","offset","flip","shift","limiter","limitShift","size","apply","onOpenChange","isOpen","handleVisibilityChange","parentZIndex","useFloatingChild","themeProps","themeStyle","useInheritedThemeScope","isTooltip","click","useClick","ignoreMouse","dismiss","useDismiss","hover","useHover","enabled","_b","close","_c","focus","useFocus","getReferenceProps","getFloatingProps","useInteractions","handlePopoverMobileClose","nextVisible","_jsxs","_jsx","Object","assign","ref","node","current","setReference","onClick","event","stopPropagation","preventDefault","clsx","styles.triggerContainer","FloatingPortal","root","FloatingFocusManager","initialFocus","returnFocus","modal","setFloating","onBlur","e","next","relatedTarget","document","activeElement","HTMLElement","hasAttribute","refEl","floatingEl","parentElement","contains","isFocusInside","style","outline","maxHeight","Popover","onMobileClose","undefined","ariaLabel","id"],"mappings":"kmCA2BO,MAAMA,EAAkBC,aAAAC,SAC3BA,EAAQC,eACRA,EACAC,QAASC,EAAW,QAAOC,SAC3BA,EAAW,MAAKC,OAChBA,EAAMC,SACNA,EAAQC,aACRA,EAAYC,MACZA,EAAKC,gBACLA,EAAeC,iBACfA,EAAgBC,iBAChBA,EAAgBC,WAChBA,GAAa,EAAIC,aACjBA,GAAe,EAAKC,SACpBA,EAAW,OAAMC,eACjBA,GAAiB,EAAKC,QACtBA,GAAU,EAAIC,UACdA,GAASlB,EACNmB,EAAUC,EAAApB,EAlBc,CAAA,WAAA,iBAAA,UAAA,WAAA,SAAA,WAAA,eAAA,QAAA,kBAAA,mBAAA,mBAAA,aAAA,eAAA,WAAA,iBAAA,UAAA,cAuB3B,MAAOqB,EAASC,GAAcC,GAAkB,GAC1CC,EAAUC,EAA2B,MACrCC,EAAaD,EAA2B,MACxCE,EAAWC,EAAsB,OAChCC,EAAiBC,IAAsBP,EAAS,GAEjDQ,GAAqB,GADRC,eAGbC,KAAEA,GAAIC,eAAEA,GAAcC,QAAEA,IAAYC,EAAY,CAClDC,KAAMhB,EACNiB,UAAWjC,EACXkC,qBAAsBC,EACtBC,WAAY,CACRC,EAAOlC,QAAAA,EAAgB,IACvBK,GAAc8B,IACdC,EAAM,CACFC,QAASC,MAEbhC,GACIiC,EAAK,CACD,KAAAC,EAAMnB,gBAAEA,IACJC,GAAmBD,EACvB,KAGZoB,aAAeC,IACX5B,EAAW4B,GAGP7B,IAAY6B,GACZC,GAAuBD,EAC3B,IAGFE,GAAeC,KACfC,WAAEA,GAAUC,WAAEA,IAAeC,EAAuBnC,GAGpDoC,GAAwB,WADM9B,EAAW,QAAUvB,GAGnDsD,GAAQC,EAASxB,GAAS,CAE5ByB,YAAaH,KAGXI,GAAUC,EAAW3B,IAErB4B,GAAQC,EAAS7B,GAAS,CAC5B8B,QAASR,GAEThD,MAAO,CACH4B,KAAiB,QAAX6B,EAAAzD,eAAAA,EAAO4B,YAAI,IAAA6B,EAAAA,EAAI,EACrBC,MAAmB,QAAZC,EAAA3D,eAAAA,EAAO0D,aAAK,IAAAC,EAAAA,EAAI,OAIzBC,GAAQC,EAASnC,GAAS,CAC5B8B,QAASjD,KAGPuD,kBAAEA,GAAiBC,iBAAEA,IAAqBC,EAAgB,CAC5Df,GACAG,GACAE,GACAM,KA4BEK,GAA2B,KAC7BpD,GAAW,GACX6B,IAAuB,EAAM,EAG3BA,GAA0BwB,IACxBA,GAAejE,GAAiBA,KAC/BiE,GAAehE,GAAkBA,GAAkB,EA0C5D,OACIiE,eACIC,EAAA,MAAAC,OAAAC,OAAA,CACIC,IAAMC,IACFzD,EAAQ0D,QAAUD,EAClBhD,GAAKkD,aAAaF,EAAK,GAEvBV,GAAkB,CAClBa,QAAUC,IAENA,EAAMC,kBACND,EAAME,gBAAgB,IAG1BpE,EAAU,CACdD,UAAWsE,EAAKC,EAAyBvE,GAAUjB,SAElDA,KAEJoB,GACGwD,EAACa,EAAc,CAACC,KAAMpF,EAAQN,SAC1B4E,EAACe,EAAoBd,OAAAC,OAAA,CACjB5C,QAASA,KACHlB,GAAW,CACb4E,cAAc,EACdC,aAAa,EACbC,OAAO,aAGXlB,EAAA,MAAAC,OAAAC,OAAA,CACIC,IAAMC,IACFvD,EAAWwD,QAAUD,EACrBhD,GAAK+D,YAAYf,EAAK,GAEtB3B,GAAU,CACd2C,OA1EJC,UAEhB,GAAIjF,GAAYU,GAAsC,mBAAnBzB,EAC/B,OAEJ,MAAMiG,EAC8B,QAAhCnG,EAACkG,EAAEE,qBAA6B,IAAApG,EAAAA,EAC/BqG,SAASC,cAEVH,GAzCc,CAAClB,UACnB,IAAKA,EAAM,OAAO,EAElB,GACIA,aAAgBsB,aAChBtB,EAAKuB,aAAa,gCAElB,OAAO,EAGX,MAAMC,EAAQjF,EAAQ0D,QAChBwB,EAA+B,QAAlB1G,EAAA0B,EAAWwD,eAAO,IAAAlF,OAAA,EAAAA,EAAE2G,cAEvC,QACOF,GAASA,EAAMG,SAAS3B,MACxByB,GAAcA,EAAWE,SAAS3B,EAAM,EA0BnC4B,CAAcV,KAE1B7E,GAAW,GACX6B,IAAuB,GAAM,EA+DT2D,MAAKhC,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACExB,IACArB,IAAc,CACjB6E,QAAS,OACTzG,OAAQA,QAAAA,EAAU8C,MAElBoB,KAAkB,CAAAvE,SA9DZ,mBAAnBC,EACAA,EACHY,EAAe,CAAEkG,UAAWnF,EAAiBd,YAAa,IAK9D8D,EAACoC,EAAO,CACJ5F,SAAO,EACP6F,cAAexC,GACfsC,UAAWlG,EAAee,OAAkBsF,EAC5CpG,SAAUD,EAAeC,OAAWoG,EACpCC,UAAWxG,EACXyG,GAAItF,GAAkB9B,SAErBC,cAsDN"}

package/popover/popover-trigger.styles.d.ts

@@ -0,0 +1 @@
+export declare const triggerContainer: import("@linaria/core").LinariaClassName;

package/popover/popover-trigger.styles.js

@@ -0,0 +1,2 @@
+import"./popover-trigger.styles_8zokig.css";const o="tjxhm5y";export{o as triggerContainer};
+//# sourceMappingURL=popover-trigger.styles.js.map

package/popover/popover-trigger.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-trigger.styles.js","sources":["../../src/popover/popover-trigger.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nexport const triggerContainer = css`\n    display: inline;\n    width: fit-content;\n    cursor: pointer;\n    position: relative;\n`;\n"],"names":["triggerContainer"],"mappings":"mEAEO,MAAMA,EAAgB"}

package/popover/popover-trigger.styles_8zokig.css

@@ -0,0 +1 @@
+.tjxhm5y{display:inline;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;cursor:pointer;position:relative;}

package/popover/popover.d.ts

@@ -1,5 +1,2 @@
 import type { PopoverProps } from "./types";
-/**
- * @deprecated Use `PopoverV2` for improved positioning behaviour. This component will be removed in DS v3.
- */
-export declare const Popover: ({ children, visible, onMobileClose, ...otherProps }: PopoverProps) => JSX.Element;
+export declare const Popover: ({ children, visible, onMobileClose, maxHeight, overflow, ariaLabel, id, className, "data-testid": testId, ...otherProps }: PopoverProps) => JSX.Element;

package/popover/popover.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as r,Fragment as t,jsx as o}from"react/jsx-runtime";import i from"../external/lodash/debounce.js";import{useState as n,useRef as s,useEffect as l}from"react";import{r as c}from"../external/react-responsive/dist/react-responsive.js";import{Card as d}from"../card/card.js";import{Modal as m}from"../modal/modal.js";import{MediaWidths as a}from"../v2_spec/media-spec.js";import{V2_Text as p}from"../v2_text/text.js";import{BubbleWrap as h,MobileModalBox as f,ContentWrapper as u}from"./popover.styles.js";const v=v=>{var{children:x,visible:j,onMobileClose:w}=v,b=e(v,["children","visible","onMobileClose"]);const g=b["data-testid"]||"popover",[y,C]=n("none"),_=s(null),L=c.useMediaQuery({maxWidth:a.mobileL}),M=s(y);l((()=>(E(),window.addEventListener("resize",i(z,300)),()=>{window.removeEventListener("resize",i(z,300))})),[]);const z=()=>{E()},B=()=>{w&&w()},E=()=>{const e=O();var r;e&&(r=e,M.current=r,C(r))},O=()=>{if(_.current){const e=_.current.getBoundingClientRect(),r=24,t=e.y<r,o=window.innerWidth-r;return e.x<r?t?"top-left":"left":e.x+e.width>o?t?"top-right":"right":("top-left"===M.current||"left"===M.current)&&e.x-e.width/2>r||("top-right"===M.current||"right"===M.current)&&e.x+2*e.width<o?t?"top-center":"none":t?"top-center":void 0}},W=()=>"string"==typeof x?o(p.BodySmall,{children:x}):x;return r(t,{children:[o(h,Object.assign({ref:_,"data-testid":g,$visible:j,$offset:y},b,{children:o(d,{children:W()})})),L&&o(m,{show:null!=j&&j,onOverlayClick:B,children:o(f,{onClose:B,children:o(u,{children:W()})})})]})};export{v as Popover};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as o,Fragment as r,jsx as i}from"react/jsx-runtime";import t from"clsx";import{useRef as l,useMemo as s}from"react";import{Card as m}from"../card/card.js";import{Markup as a}from"../markup/markup.js";import{ModalV2 as d}from"../modal-v2/index.js";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as n}from"../theme/utils/use-apply-styles.js";import{useMaxWidthMediaQuery as p}from"../theme/utils/use-media-query.js";import{Typography as c}from"../typography/index.js";import{tokens as h,popoverCard as f,popoverCardWithMaxHeight as v,popoverCardWithOverflow as u,popoverContainer as j}from"./popover.styles.js";const b=b=>{var{children:x,visible:y=!1,onMobileClose:C,maxHeight:g,overflow:k,ariaLabel:w="More information",id:M,className:N,"data-testid":H="popover"}=b,q=e(b,["children","visible","onMobileClose","maxHeight","overflow","ariaLabel","id","className","data-testid"]);const B=p("sm"),L=l(null),O=s((()=>({[h.popoverCard.maxHeight]:void 0===g?null:`${g}px`,[h.popoverCard.overflowY]:null!=k?k:null})),[g,k]);n(L,O);const _=()=>{C&&C()},z=()=>"string"==typeof x?i(c.BodyMD,{children:x}):x;return o(r,{children:[y&&!B&&i("div",Object.assign({ref:L,tabIndex:0,"data-testid":H},q,{className:t(j,N),id:M,role:"dialog","aria-label":w,children:i(m,{className:t(f,void 0!==g&&v,k&&u),children:i(a,{baseTextSize:"body-md",children:z()})})})),B&&i(d,{show:y,onOverlayClick:_,onClose:_,id:M,role:"dialog","aria-label":w,children:o(d.Card,{children:[i(d.Content,{children:i(a,{children:z()})}),i(d.CloseButton,{})]})})]})};export{b as Popover};
 //# sourceMappingURL=popover.js.map