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

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

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

package/cjs/pagination/pagination.styles_1u898rb.css

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

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

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

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

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

package/cjs/pill/pill.js

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

package/cjs/pill/pill.js.map

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

package/cjs/pill/pill.styles.js

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

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

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

package/cjs/pill/pill.styles_1wiyl8.css

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

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

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

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

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

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

@@ -1,22 +1,2 @@
-"use strict";var e=require("styled-components"),t=require("../../v3_theme/index.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=r(e);const o=e=>{switch(e){case"underline":return"text-decoration: underline 1px;";case"underline-dashed":return"text-decoration: underline dashed 1px;"}},i=n.default.span`
-    color: ${t.V3_Colour["text-primary"]};
-    font-weight: 600;
-    text-underline-position: under;
-
-    ${({$defaultStyle:e})=>o(e)}
-
-    &:hover,
-    &:focus-visible {
-        color: ${t.V3_Colour["text-hover"]};
-        ${({$hoverStyle:e})=>o(e)}
-    }
-
-    svg {
-        height: 1lh; // align vertically
-        width: 1em; // scale icon with font size
-        vertical-align: top;
-    }
-`,l=n.default.span`
-    ${e=>!e.$standalone&&"margin-left: 0.25rem;"}
-`;exports.StyledIcon=l,exports.StyledText=i;
+"use strict";require("./popover-inline.styles_ziag9c.css");exports.popoverInlineIconWithContent="pf3txif",exports.popoverInlineText="p19t6gs0";
 //# sourceMappingURL=popover-inline.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"popover-inline.styles.js","sources":["../../../../src/popover-v2/popover-inline/popover-inline.styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { V3_Colour } from \"../../v3_theme\";\nimport type { PopoverInlineStyle } from \"../types\";\n\n// =============================================================================\n// STYLE INTERFACE\n// =============================================================================\n\ninterface StyledTextProps {\n    $defaultStyle: PopoverInlineStyle;\n    $hoverStyle: PopoverInlineStyle;\n}\n\ninterface StyledIconProps {\n    $standalone: boolean;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nconst getTextStyle = (style: PopoverInlineStyle) => {\n    switch (style) {\n        case \"underline\":\n            return \"text-decoration: underline 1px;\";\n        case \"underline-dashed\":\n            return \"text-decoration: underline dashed 1px;\";\n    }\n};\n\nexport const StyledText = styled.span<StyledTextProps>`\n    color: ${V3_Colour[\"text-primary\"]};\n    font-weight: 600;\n    text-underline-position: under;\n\n    ${({ $defaultStyle }) => getTextStyle($defaultStyle)}\n\n    &:hover,\n    &:focus-visible {\n        color: ${V3_Colour[\"text-hover\"]};\n        ${({ $hoverStyle }) => getTextStyle($hoverStyle)}\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 StyledIcon = styled.span<StyledIconProps>`\n    ${(props) => !props.$standalone && \"margin-left: 0.25rem;\"}\n`;\n"],"names":["getTextStyle","style","StyledText","styled","span","V3_Colour","$defaultStyle","$hoverStyle","StyledIcon","props","$standalone"],"mappings":"wKAqBA,MAAMA,EAAgBC,IAClB,OAAQA,GACJ,IAAK,YACD,MAAO,kCACX,IAAK,mBACD,MAAO,2CAINC,EAAaC,EAAAA,QAAOC,IAAqB;aACzCC,EAAAA,UAAU;;;;MAIjB,EAAGC,mBAAoBN,EAAaM;;;;iBAIzBD,EAAAA,UAAU;UACjB,EAAGE,iBAAkBP,EAAaO;;;;;;;;EAU/BC,EAAaL,EAAAA,QAAOC,IAAqB;MAC/CK,IAAWA,EAAMC,aAAe;"}
+{"version":3,"file":"popover-inline.styles.js","sources":["../../../../src/popover-v2/popover-inline/popover-inline.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour } from \"../../theme\";\n\nexport const popoverInlineText = css`\n    color: ${Colour[\"text-primary\"]};\n    font-weight: 600;\n    text-underline-position: under;\n\n    &[data-underline-style=\"underline\"] {\n        text-decoration: underline 1px;\n    }\n\n    &[data-underline-style=\"underline-dashed\"] {\n        text-decoration: underline dashed 1px;\n    }\n\n    &:hover,\n    &:focus-visible {\n        color: ${Colour[\"text-hover\"]};\n    }\n\n    &[data-underline-hover-style=\"underline\"]:hover,\n    &[data-underline-hover-style=\"underline\"]:focus-visible {\n        text-decoration: underline 1px;\n    }\n\n    &[data-underline-hover-style=\"underline-dashed\"]:hover,\n    &[data-underline-hover-style=\"underline-dashed\"]:focus-visible {\n        text-decoration: underline dashed 1px;\n    }\n\n    svg {\n        height: 1lh; /* align vertically */\n        width: 1em; /* scale icon with font size */\n        vertical-align: top;\n    }\n`;\n\nexport const popoverInlineIconWithContent = css`\n    margin-left: 0.25rem;\n`;\n"],"names":[],"mappings":"yIAuCyC,oCAnCX"}

package/cjs/popover-v2/popover-inline/popover-inline.styles_ziag9c.css

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

package/cjs/popover-v2/popover-trigger.js

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

package/cjs/popover-v2/popover-trigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover-trigger.js","sources":["../../../src/popover-v2/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 type React from \"react\";\nimport { useContext, useRef, useState } from \"react\";\nimport { useMediaQuery } from \"react-responsive\";\nimport { ThemeContext } from \"styled-components\";\n\nimport { useFloatingChild } from \"../overlay/use-floating-context\";\nimport { useInheritedThemeScope } from \"../theme/theme-provider/hooks\";\nimport { SimpleIdGenerator } from \"../util\";\nimport { V3_Breakpoint } from \"../v3_theme\";\nimport { PopoverV2 } from \"./popover\";\nimport { TriggerContainer } from \"./popover-trigger.styles\";\nimport type { PopoverV2TriggerProps, PopoverV2TriggerType } 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    ...otherProps\n}: PopoverV2TriggerProps) => {\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 theme = useContext(ThemeContext);\n    const mobileBreakpoint = V3_Breakpoint[\"sm-max\"]({ theme });\n    const isMobile = useMediaQuery({ maxWidth: mobileBreakpoint });\n    const [availableHeight, setAvailableHeight] = useState(0);\n    const internalId = useRef(SimpleIdGenerator.generate());\n    const popoverContainerId = `${internalId.current}-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: PopoverV2TriggerType = 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        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            <PopoverV2\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            </PopoverV2>\n        );\n    };\n\n    return (\n        <>\n            <TriggerContainer\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            >\n                {children}\n            </TriggerContainer>\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":["_a","children","popoverContent","trigger","_trigger","position","zIndex","rootNode","customOffset","delay","onPopoverAppear","onPopoverDismiss","popoverAriaLabel","enableFlip","enableResize","overflow","triggerOnFocus","isModal","otherProps","__rest","visible","setVisible","useState","nodeRef","useRef","popoverRef","theme","useContext","ThemeContext","mobileBreakpoint","V3_Breakpoint","isMobile","useMediaQuery","maxWidth","availableHeight","setAvailableHeight","popoverContainerId","SimpleIdGenerator","generate","current","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","_Fragment","_jsx","TriggerContainer","Object","assign","ref","node","setReference","onClick","event","stopPropagation","preventDefault","FloatingPortal","root","FloatingFocusManager","initialFocus","returnFocus","modal","setFloating","onBlur","e","next","relatedTarget","document","activeElement","HTMLElement","hasAttribute","refEl","floatingEl","parentElement","contains","isFocusInside","style","outline","maxHeight","PopoverV2","onMobileClose","undefined","ariaLabel","id"],"mappings":"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"}
+{"version":3,"file":"popover-trigger.js","sources":["../../../src/popover-v2/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 {\n    Breakpoint,\n    useDesignToken,\n    useInheritedThemeScope,\n    useSafeMaxWidthMediaQuery,\n} from \"../theme\";\nimport { useId } from \"../util\";\nimport { PopoverV2 } from \"./popover\";\nimport * as styles from \"./popover-trigger.styles\";\nimport type { PopoverV2TriggerProps, PopoverV2TriggerType } 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}: PopoverV2TriggerProps) => {\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 mobileBreakpoint = useDesignToken(Breakpoint[\"sm-max\"]);\n    const isMobile = useSafeMaxWidthMediaQuery(mobileBreakpoint);\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: PopoverV2TriggerType = 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            <PopoverV2\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            </PopoverV2>\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":["_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","mobileBreakpoint","useDesignToken","Breakpoint","isMobile","useSafeMaxWidthMediaQuery","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","PopoverV2","onMobileClose","undefined","ariaLabel","id"],"mappings":"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"}

package/cjs/popover-v2/popover-trigger.styles.js

@@ -1,7 +1,2 @@
-"use strict";function t(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}const e=t(require("styled-components")).default.div`
-    display: inline;
-    width: fit-content;
-    cursor: pointer;
-    position: relative;
-`;exports.TriggerContainer=e;
+"use strict";require("./popover-trigger.styles_1yq7ffk.css");exports.triggerContainer="tg7uzp3";
 //# sourceMappingURL=popover-trigger.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"popover-trigger.styles.js","sources":["../../../src/popover-v2/popover-trigger.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const TriggerContainer = styled.div`\n    display: inline;\n    width: fit-content;\n    cursor: pointer;\n    position: relative;\n`;\n"],"names":["TriggerContainer","styled","div"],"mappings":"qFAKO,MAAMA,kCAAmBC,QAAOC,GAAG;;;;;"}
+{"version":3,"file":"popover-trigger.styles.js","sources":["../../../src/popover-v2/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":[],"mappings":"gHAE6B"}

package/cjs/popover-v2/popover-trigger.styles_1yq7ffk.css

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

package/cjs/popover-v2/popover.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),i=require("react"),o=require("../external/react-responsive/dist/react-responsive.js"),a=require("styled-components"),s=require("../modal-v2/index.js"),t=require("../typography/index.js"),l=require("../v3_theme/index.js"),n=require("./popover.styles.js");exports.PopoverV2=d=>{var{children:x,visible:u,onMobileClose:c,maxHeight:h,overflow:p,ariaLabel:v,id:j}=d,m=e.__rest(d,["children","visible","onMobileClose","maxHeight","overflow","ariaLabel","id"]);const b=m["data-testid"]||"popover",C=i.useContext(a.ThemeContext),g=l.V3_Breakpoint["sm-max"]({theme:C}),y=o.reactResponsiveExports.useMediaQuery({maxWidth:g}),M=()=>{c&&c()},q=()=>"string"==typeof x?r.jsx(t.Typography.BodyMD,{children:x}):x;return r.jsxs(r.Fragment,{children:[u&&r.jsx(n.PopoverContainer,Object.assign({tabIndex:0,"data-testid":b},m,{id:j,role:"dialog","aria-label":null!=v?v:"More information",children:r.jsx(n.PopoverCard,{$maxHeight:h,$overflow:p,children:q()})})),y&&r.jsx(s.ModalV2,{show:null!=u&&u,onOverlayClick:M,onClose:M,id:j,role:"dialog","aria-label":null!=v?v:"More information",children:r.jsxs(s.ModalV2.Card,{children:[r.jsx(s.ModalV2.Content,{children:q()}),r.jsx(s.ModalV2.CloseButton,{})]})})]})};
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),i=require("clsx"),o=require("react"),s=require("../card/card.js"),a=require("../markup/markup.js"),t=require("../modal-v2/index.js");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js");var l=require("../theme/tokens/breakpoint.js");require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var d=require("../theme/utils/media-query.js"),n=require("../theme/utils/use-apply-styles.js"),u=require("../theme/utils/use-design-token.js"),p=require("../typography/index.js"),h=require("./popover.styles.js");function m(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=m(i);exports.PopoverV2=i=>{var{children:m,visible:j=!1,onMobileClose:v,maxHeight:x,overflow:q,ariaLabel:y="More information",id:b,className:f,"data-testid":k="popover"}=i,C=e.__rest(i,["children","visible","onMobileClose","maxHeight","overflow","ariaLabel","id","className","data-testid"]);const M=u.useDesignToken(l.Breakpoint["sm-max"]),g=d.useSafeMaxWidthMediaQuery(M),w=o.useRef(null),V=o.useMemo((()=>({[h.tokens.popoverCard.maxHeight]:void 0===x?null:`${x}px`,[h.tokens.popoverCard.overflowY]:null!=q?q:null})),[x,q]);n.useApplyStyle(w,V);const H=()=>{v&&v()},N=()=>"string"==typeof m?r.jsx(p.Typography.BodyMD,{children:m}):m;return r.jsxs(r.Fragment,{children:[j&&!g&&r.jsx("div",Object.assign({ref:w,tabIndex:0,"data-testid":k},C,{className:c.default(h.popoverContainer,f),id:b,role:"dialog","aria-label":y,children:r.jsx(s.Card,{className:c.default(h.popoverCard,void 0!==x&&h.popoverCardWithMaxHeight,q&&h.popoverCardWithOverflow),children:r.jsx(a.Markup,{baseTextSize:"body-md",children:N()})})})),g&&r.jsx(t.ModalV2,{show:j,onOverlayClick:H,onClose:H,id:b,role:"dialog","aria-label":y,children:r.jsxs(t.ModalV2.Card,{children:[r.jsx(t.ModalV2.Content,{children:r.jsx(a.Markup,{children:N()})}),r.jsx(t.ModalV2.CloseButton,{})]})})]})};
 //# sourceMappingURL=popover.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"popover.js","sources":["../../../src/popover-v2/popover.tsx"],"sourcesContent":["import { useContext } from \"react\";\nimport { useMediaQuery } from \"react-responsive\";\nimport { ThemeContext } from \"styled-components\";\n\nimport { ModalV2 } from \"../modal-v2\";\nimport { Typography } from \"../typography\";\nimport { V3_Breakpoint } from \"../v3_theme\";\nimport { PopoverCard, PopoverContainer } from \"./popover.styles\";\nimport type { PopoverV2Props } from \"./types\";\n\nexport const PopoverV2 = ({\n    children,\n    visible,\n    onMobileClose,\n    maxHeight,\n    overflow,\n    ariaLabel,\n    id,\n    ...otherProps\n}: PopoverV2Props): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const testId = otherProps[\"data-testid\"] || \"popover\";\n    const theme = useContext(ThemeContext);\n    const mobileBreakpoint = V3_Breakpoint[\"sm-max\"]({ theme });\n    const isMobile = useMediaQuery({ maxWidth: mobileBreakpoint });\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleMobileClose = () => {\n        if (onMobileClose) {\n            onMobileClose();\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderContent = () =>\n        typeof children === \"string\" ? (\n            <Typography.BodyMD>{children}</Typography.BodyMD>\n        ) : (\n            children\n        );\n\n    return (\n        <>\n            {visible && (\n                <PopoverContainer\n                    tabIndex={0}\n                    data-testid={testId}\n                    {...otherProps}\n                    id={id}\n                    role=\"dialog\"\n                    aria-label={ariaLabel ?? \"More information\"}\n                >\n                    <PopoverCard $maxHeight={maxHeight} $overflow={overflow}>\n                        {renderContent()}\n                    </PopoverCard>\n                </PopoverContainer>\n            )}\n            {isMobile && (\n                <ModalV2\n                    show={visible ?? false}\n                    onOverlayClick={handleMobileClose}\n                    onClose={handleMobileClose}\n                    id={id}\n                    role=\"dialog\"\n                    aria-label={ariaLabel ?? \"More information\"}\n                >\n                    <ModalV2.Card>\n                        <ModalV2.Content>{renderContent()}</ModalV2.Content>\n                        <ModalV2.CloseButton />\n                    </ModalV2.Card>\n                </ModalV2>\n            )}\n        </>\n    );\n};\n"],"names":["_a","children","visible","onMobileClose","maxHeight","overflow","ariaLabel","id","otherProps","__rest","testId","theme","useContext","ThemeContext","mobileBreakpoint","V3_Breakpoint","isMobile","useMediaQuery","maxWidth","handleMobileClose","renderContent","_jsx","Typography","BodyMD","_jsxs","_Fragment","PopoverContainer","Object","assign","tabIndex","role","PopoverCard","$maxHeight","$overflow","ModalV2","show","onOverlayClick","onClose","Card","Content","CloseButton"],"mappings":"mWAU0BA,IAAA,IAAAC,SACtBA,EAAQC,QACRA,EAAOC,cACPA,EAAaC,UACbA,EAASC,SACTA,EAAQC,UACRA,EAASC,GACTA,GAAEP,EACCQ,EAAUC,EAAAA,OAAAT,EARS,gFAatB,MAAMU,EAASF,EAAW,gBAAkB,UACtCG,EAAQC,EAAAA,WAAWC,gBACnBC,EAAmBC,EAAAA,cAAc,UAAU,CAAEJ,UAC7CK,EAAWC,EAAAA,uBAAAA,cAAc,CAAEC,SAAUJ,IAKrCK,EAAoB,KAClBhB,GACAA,GACJ,EAMEiB,EAAgB,IACE,iBAAbnB,EACHoB,EAAAA,IAACC,aAAWC,OAAM,CAAAtB,SAAEA,IAA6B,EAKzD,OACIuB,EAAAA,KAAAC,WAAA,CAAAxB,SAAA,CACKC,GACGmB,MAACK,EAAAA,iBAAgBC,OAAAC,OAAA,CACbC,SAAU,EAAC,cACEnB,GACTF,EAAU,CACdD,GAAIA,EACJuB,KAAK,SAAQ,aACDxB,QAAAA,EAAa,mBAAkBL,SAE3CoB,EAAAA,IAACU,cAAW,CAAAC,WAAa5B,EAAS6B,UAAa5B,EAAQJ,SAClDmB,SAIZJ,GACGK,EAAAA,IAACa,EAAAA,QAAO,CACJC,KAAMjC,SAAAA,EACNkC,eAAgBjB,EAChBkB,QAASlB,EACTZ,GAAIA,EACJuB,KAAK,SAAQ,aACDxB,QAAAA,EAAa,mBAAkBL,SAE3CuB,EAAAA,KAACU,UAAQI,gBACLjB,MAACa,EAAAA,QAAQK,QAAO,CAAAtC,SAAEmB,MAClBC,MAACa,EAAAA,QAAQM,YAAW,WAIjC"}
+{"version":3,"file":"popover.js","sources":["../../../src/popover-v2/popover.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useMemo, useRef } from \"react\";\n\nimport { Card } from \"../card\";\nimport { Markup } from \"../markup\";\nimport { ModalV2 } from \"../modal-v2\";\nimport {\n    Breakpoint,\n    useApplyStyle,\n    useDesignToken,\n    useSafeMaxWidthMediaQuery,\n} from \"../theme\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./popover.styles\";\nimport type { PopoverV2Props } from \"./types\";\n\nexport const PopoverV2 = ({\n    children,\n    visible = false,\n    onMobileClose,\n    maxHeight,\n    overflow,\n    ariaLabel = \"More information\",\n    id,\n    className,\n    \"data-testid\": testId = \"popover\",\n    ...otherProps\n}: PopoverV2Props): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const mobileBreakpoint = useDesignToken(Breakpoint[\"sm-max\"]);\n    const isMobile = useSafeMaxWidthMediaQuery(mobileBreakpoint);\n    const popoverContainerRef = useRef<HTMLDivElement>(null);\n    const popoverCardStyle = useMemo(\n        () => ({\n            [styles.tokens.popoverCard.maxHeight]:\n                maxHeight === undefined ? null : `${maxHeight}px`,\n            [styles.tokens.popoverCard.overflowY]: overflow ?? null,\n        }),\n        [maxHeight, overflow]\n    );\n    useApplyStyle(popoverContainerRef, popoverCardStyle);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleMobileClose = () => {\n        if (onMobileClose) {\n            onMobileClose();\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderContent = () =>\n        typeof children === \"string\" ? (\n            <Typography.BodyMD>{children}</Typography.BodyMD>\n        ) : (\n            children\n        );\n\n    return (\n        <>\n            {visible && !isMobile && (\n                <div\n                    ref={popoverContainerRef}\n                    tabIndex={0}\n                    data-testid={testId}\n                    {...otherProps}\n                    className={clsx(styles.popoverContainer, className)}\n                    id={id}\n                    role=\"dialog\"\n                    aria-label={ariaLabel}\n                >\n                    <Card\n                        className={clsx(\n                            styles.popoverCard,\n                            maxHeight !== undefined &&\n                                styles.popoverCardWithMaxHeight,\n                            overflow && styles.popoverCardWithOverflow\n                        )}\n                    >\n                        <Markup baseTextSize=\"body-md\">\n                            {renderContent()}\n                        </Markup>\n                    </Card>\n                </div>\n            )}\n            {isMobile && (\n                <ModalV2\n                    show={visible}\n                    onOverlayClick={handleMobileClose}\n                    onClose={handleMobileClose}\n                    id={id}\n                    role=\"dialog\"\n                    aria-label={ariaLabel}\n                >\n                    <ModalV2.Card>\n                        <ModalV2.Content>\n                            <Markup>{renderContent()}</Markup>\n                        </ModalV2.Content>\n                        <ModalV2.CloseButton />\n                    </ModalV2.Card>\n                </ModalV2>\n            )}\n        </>\n    );\n};\n"],"names":["_a","children","visible","onMobileClose","maxHeight","overflow","ariaLabel","id","className","testId","otherProps","__rest","mobileBreakpoint","useDesignToken","Breakpoint","isMobile","useSafeMaxWidthMediaQuery","popoverContainerRef","useRef","popoverCardStyle","useMemo","styles.tokens","popoverCard","undefined","overflowY","useApplyStyle","handleMobileClose","renderContent","_jsx","Typography","BodyMD","_jsxs","_Fragment","Object","assign","ref","tabIndex","clsx","styles.popoverContainer","role","Card","styles.popoverCard","styles.popoverCardWithMaxHeight","styles.popoverCardWithOverflow","Markup","baseTextSize","ModalV2","show","onOverlayClick","onClose","Content","CloseButton"],"mappings":"izBAgB0BA,IAAA,IAAAC,SACtBA,EAAQC,QACRA,GAAU,EAAKC,cACfA,EAAaC,UACbA,EAASC,SACTA,EAAQC,UACRA,EAAY,mBAAkBC,GAC9BA,EAAEC,UACFA,EACA,cAAeC,EAAS,WAAST,EAC9BU,EAAUC,EAAAA,OAAAX,EAVS,0GAetB,MAAMY,EAAmBC,EAAAA,eAAeC,EAAAA,WAAW,WAC7CC,EAAWC,EAAAA,0BAA0BJ,GACrCK,EAAsBC,EAAAA,OAAuB,MAC7CC,EAAmBC,EAAAA,SACrB,KAAA,CACI,CAACC,EAAAA,OAAcC,YAAYlB,gBACTmB,IAAdnB,EAA0B,KAAO,GAAGA,MACxC,CAACiB,EAAAA,OAAcC,YAAYE,WAAYnB,QAAAA,EAAY,QAEvD,CAACD,EAAWC,IAEhBoB,EAAAA,cAAcR,EAAqBE,GAKnC,MAAMO,EAAoB,KAClBvB,GACAA,GACJ,EAMEwB,EAAgB,IACE,iBAAb1B,EACH2B,EAAAA,IAACC,aAAWC,OAAM,CAAA7B,SAAEA,IAA6B,EAKzD,OACI8B,EAAAA,KAAAC,EAAAA,SAAA,CAAA/B,SAAA,CACKC,IAAYa,GACTa,MAAA,MAAAK,OAAAC,OAAA,CACIC,IAAKlB,EACLmB,SAAU,EAAC,cACE3B,GACTC,EAAU,CACdF,UAAW6B,EAAAA,QAAKC,EAAAA,iBAAyB9B,GACzCD,GAAIA,EACJgC,KAAK,SAAQ,aACDjC,EAASL,SAErB2B,EAAAA,IAACY,OAAI,CACDhC,UAAW6B,UACPI,EAAAA,iBACclB,IAAdnB,GACIsC,EAAAA,yBACJrC,GAAYsC,EAAAA,yBACf1C,SAED2B,EAAAA,IAACgB,EAAAA,OAAM,CAACC,aAAa,mBAChBlB,WAKhBZ,GACGa,EAAAA,IAACkB,EAAAA,QAAO,CACJC,KAAM7C,EACN8C,eAAgBtB,EAChBuB,QAASvB,EACTnB,GAAIA,EACJgC,KAAK,SAAQ,aACDjC,EAASL,SAErB8B,EAAAA,KAACe,EAAAA,QAAQN,KAAI,CAAAvC,SAAA,CACT2B,EAAAA,IAACkB,EAAAA,QAAQI,QAAO,CAAAjD,SACZ2B,EAAAA,IAACgB,SAAM,CAAA3C,SAAE0B,QAEbC,EAAAA,IAACkB,EAAAA,QAAQK,YAAW,CAAA,UAIjC"}

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

@@ -1,44 +1,2 @@
-"use strict";var e=require("styled-components"),r=require("../card/card.js"),t=require("../modal/modal-box.js"),o=require("../shared/html-content/html-content.js");require("../theme/theme-provider/index.js"),require("react"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js");var i=require("../theme/tokens/colour.js");require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("../util/string-helper.js");var a=require("../v3_theme/index.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=n(e);const l=d.default.div`
-    max-width: 30rem;
-    padding: 0 1rem;
-    pointer-events: auto;
-    outline: none;
-`,s=d.default(r.Card)`
-    color: ${i.Colour.text};
-    ${o.applyHtmlContentStyle({textSize:"body-md"})}
-
-    ${a.V3_MediaQuery.MaxWidth.sm} {
-        display: none;
-    }
-
-    ${({$maxHeight:e})=>void 0!==e&&`\n        max-height: ${e}px;\n    `}
-
-    ${({$overflow:e})=>e&&`\n        overflow-y: ${e};\n    `}
-
-    &::-webkit-scrollbar {
-        width: 14px;
-    }
-
-    &::-webkit-scrollbar-track {
-        background: transparent;
-    }
-
-    &::-webkit-scrollbar-thumb {
-        background: ${a.V3_Colour["bg-inverse-subtlest"]};
-        border: 5px solid transparent;
-        border-radius: ${a.V3_Radius.full};
-        background-clip: padding-box;
-    }
-`;d.default(t.ModalBox)`
-    padding: 3.5rem 1.25rem 2.5rem;
-`,d.default.div`
-    overflow-y: scroll;
-
-    &::-webkit-scrollbar {
-        display: none; /* Chrome/Safari/Webkit */
-    }
-
-    color: ${a.V3_Colour.text};
-    ${o.applyHtmlContentStyle({textSize:"body-md"})}
-`,exports.PopoverCard=s,exports.PopoverContainer=l;
+"use strict";require("./popover.styles_lslc72.css");exports.popoverCard="pz2lvdt",exports.popoverCardWithMaxHeight="p1j0bvgi",exports.popoverCardWithOverflow="ps47yom",exports.popoverContainer="pcmd570",exports.tokens={popoverCard:{maxHeight:"--fds-internal-popoverV2-popoverCard-maxHeight",overflowY:"--fds-internal-popoverV2-popoverCard-overflowY"}};
 //# sourceMappingURL=popover.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"popover.styles.js","sources":["../../../src/popover-v2/popover.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { Card } from \"../card\";\nimport { ModalBox } from \"../modal/modal-box\";\nimport { applyHtmlContentStyle } from \"../shared/html-content/html-content\";\nimport { Colour } from \"../theme\";\nimport { V3_Colour, V3_MediaQuery, V3_Radius } from \"../v3_theme\";\nimport type { PopoverOverflowType } from \"./types\";\n// =============================================================================\n// STYLES INTERFACE\n// =============================================================================\ninterface PopoverCardStyleProps {\n    $overflow?: PopoverOverflowType | undefined;\n    $maxHeight?: number | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const PopoverContainer = styled.div`\n    max-width: 30rem;\n    padding: 0 1rem;\n    pointer-events: auto;\n    outline: none;\n`;\n\nexport const PopoverCard = styled(Card)<PopoverCardStyleProps>`\n    color: ${Colour.text};\n    ${applyHtmlContentStyle({ textSize: \"body-md\" })}\n\n    ${V3_MediaQuery.MaxWidth.sm} {\n        display: none;\n    }\n\n    ${({ $maxHeight }) =>\n        $maxHeight !== undefined &&\n        `\n        max-height: ${$maxHeight}px;\n    `}\n\n    ${({ $overflow }) =>\n        $overflow &&\n        `\n        overflow-y: ${$overflow};\n    `}\n\n    &::-webkit-scrollbar {\n        width: 14px;\n    }\n\n    &::-webkit-scrollbar-track {\n        background: transparent;\n    }\n\n    &::-webkit-scrollbar-thumb {\n        background: ${V3_Colour[\"bg-inverse-subtlest\"]};\n        border: 5px solid transparent;\n        border-radius: ${V3_Radius[\"full\"]};\n        background-clip: padding-box;\n    }\n`;\n\nexport const MobileModalBox = styled(ModalBox)`\n    padding: 3.5rem 1.25rem 2.5rem;\n`;\n\nexport const ContentWrapper = styled.div`\n    overflow-y: scroll;\n\n    &::-webkit-scrollbar {\n        display: none; /* Chrome/Safari/Webkit */\n    }\n\n    color: ${V3_Colour.text};\n    ${applyHtmlContentStyle({ textSize: \"body-md\" })}\n`;\n"],"names":["PopoverContainer","styled","div","PopoverCard","Card","Colour","text","applyHtmlContentStyle","textSize","V3_MediaQuery","MaxWidth","sm","$maxHeight","undefined","$overflow","V3_Colour","V3_Radius","ModalBox"],"mappings":"ypBAmBO,MAAMA,EAAmBC,EAAAA,QAAOC,GAAG;;;;;EAO7BC,EAAcF,EAAAA,QAAOG,EAAAA,KAA4B;aACjDC,EAAAA,OAAOC;MACdC,wBAAsB,CAAEC,SAAU;;MAElCC,EAAAA,cAAcC,SAASC;;;;MAIvB,EAAGC,qBACcC,IAAfD,GACA,yBACcA;;MAGhB,EAAGE,eACDA,GACA,yBACcA;;;;;;;;;;;sBAYAC,EAAAA,UAAU;;yBAEPC,EAAAA,UAAgB;;;EAKXf,EAAAA,QAAOgB,EAAAA,SAAS;;EAIhBhB,EAAAA,QAAOC,GAAG;;;;;;;aAO3Ba,EAAAA,UAAUT;MACjBC,wBAAsB,CAAEC,SAAU;"}
+{"version":3,"file":"popover.styles.js","sources":["../../../src/popover-v2/popover.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, MediaQuery, Radius } from \"../theme\";\n\nexport const tokens = {\n    popoverCard: {\n        maxHeight: \"--fds-internal-popoverV2-popoverCard-maxHeight\",\n        overflowY: \"--fds-internal-popoverV2-popoverCard-overflowY\",\n    },\n} as const;\n\nexport const popoverContainer = css`\n    max-width: 30rem;\n    padding: 0 1rem;\n    pointer-events: auto;\n    outline: none;\n`;\n\nexport const popoverCard = css`\n    color: ${Colour.text};\n\n    ${MediaQuery.MaxWidth.sm} {\n        display: none;\n    }\n\n    &::-webkit-scrollbar {\n        width: 14px;\n    }\n\n    &::-webkit-scrollbar-track {\n        background: transparent;\n    }\n\n    &::-webkit-scrollbar-thumb {\n        background: ${Colour[\"bg-inverse-subtlest\"]};\n        border: 5px solid transparent;\n        border-radius: ${Radius.full};\n        background-clip: padding-box;\n    }\n`;\n\nexport const popoverCardWithMaxHeight = css`\n    ${tokens.popoverCard.maxHeight}: initial;\n    max-height: var(${tokens.popoverCard.maxHeight});\n`;\n\nexport const popoverCardWithOverflow = css`\n    ${tokens.popoverCard.overflowY}: initial;\n    overflow-y: var(${tokens.popoverCard.overflowY});\n`;\n"],"names":["popoverCard","maxHeight","overflowY"],"mappings":"kGAkBwB,2CAuBa,2CAKD,mCAnCP,yBAPP,CAClBA,YAAa,CACTC,UAAW,iDACXC,UAAW"}

package/cjs/popover-v2/popover.styles_lslc72.css

@@ -0,0 +1,4 @@
+.pcmd570{max-width:30rem;padding:0 1rem;pointer-events:auto;outline:none;}
+.pz2lvdt{color:var(--fds-colour-text);}:where(body.fds-breakpoint-sm-max) .pz2lvdt{display:none;}.pz2lvdt::-webkit-scrollbar{width:14px;}.pz2lvdt::-webkit-scrollbar-track{background:transparent;}.pz2lvdt::-webkit-scrollbar-thumb{background:var(--fds-colour-bg-inverse-subtlest);border:5px solid transparent;border-radius:var(--fds-radius-full);-webkit-background-clip:padding-box;background-clip:padding-box;}
+.p1j0bvgi{--fds-internal-popoverV2-popoverCard-maxHeight:initial;max-height:var(--fds-internal-popoverV2-popoverCard-maxHeight);}
+.ps47yom{--fds-internal-popoverV2-popoverCard-overflowY:initial;overflow-y:var(--fds-internal-popoverV2-popoverCard-overflowY);}

package/cjs/predictive-text-input/predictive-text-input.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("../external/lodash/debounce.js"),s=require("react"),a=require("../input/input.js"),i=require("../shared/accessibility/index.js");require("styled-components"),require("../util/string-helper.js"),require("../v3_theme/index.js"),require("../shared/dropdown-list-v2/dropdown-label.styles.js");var o=require("../shared/dropdown-list-v2/dropdown-list.js"),l=require("../shared/dropdown-list-v2/dropdown-list-state.js");require("../shared/dropdown-list-v2/expandable-element.js"),require("@lifesg/react-icons/caret-right"),require("react-virtuoso"),require("../button/button.style.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var n=require("../util/simple-id-generator.js");require("../shared/dropdown-wrapper/dropdown-wrapper.styles.js");var d=require("../shared/dropdown-wrapper/element-with-dropdown.js");require("../shared/dropdown-list-v2/dropdown-list.styles.js"),require("../shared/dropdown-list-v2/dropdown-search.js"),require("../shared/dropdown-list-v2/nested-dropdown-list.styles.js"),require("immer"),require("../external/lodash/_getTag.js"),require("../external/lodash/isArguments.js"),require("../external/lodash/_baseGetTag.js"),require("../external/lodash/isBuffer.js"),require("../external/lodash/isTypedArray.js"),require("../external/lodash/_Stack.js"),require("../external/lodash/_SetCache.js"),require("../external/lodash/_equalByTag.js");var u=require("../shared/input-wrapper/input-wrapper.js");exports.PredictiveTextInput=c=>{var{className:p,"data-testid":h,selectedOption:x,minimumCharacters:j=3,fetchOptions:m,placeholder:v="Enter here...",readOnly:g=!1,disabled:w=!1,error:f,valueExtractor:q,listExtractor:y,displayValueExtractor:b,onSelectOption:S,alignment:E,dropdownZIndex:T,dropdownRootNode:I,dropdownWidth:O,"aria-describedby":_}=c,C=e.__rest(c,["className","data-testid","selectedOption","minimumCharacters","fetchOptions","placeholder","readOnly","disabled","error","valueExtractor","listExtractor","displayValueExtractor","onSelectOption","alignment","dropdownZIndex","dropdownRootNode","dropdownWidth","aria-describedby"]);const D=e=>e?b?b(e):e.toString():"",[N,$]=s.useState((()=>x?D(x):"")),[R,L]=s.useState((()=>x?D(x):"")),[W,k]=s.useState([]),[B,V]=s.useState(!0),[A,F]=s.useState(!1),[H,Z]=s.useState(!!x),[G,P]=s.useState(x),[M,z]=s.useState(!1),[J,K]=s.useState(!1),[Q]=s.useState((()=>n.SimpleIdGenerator.generate())),[U,X]=s.useState(null),Y=`${Q}-instruction`,ee=s.useRef(null),re=s.useRef(null),te=s.useRef(m),se=s.useCallback((r=>e.__awaiter(void 0,void 0,void 0,(function*(){if(te.current){F(!1),V(!0);try{const e=yield te.current(r);L(r),k(null!=e?e:[]),V(!1)}catch(e){F(!0),V(!1)}}}))),[]),ae=s.useCallback(t.default((e=>{se(e)}),500),[se]);s.useEffect((()=>{te.current=m}),[m]),s.useEffect((()=>{N&&N.length>=j?H?N!==R&&ae(N):(z(!0),ae(N)):ae.cancel(),""===N&&G&&(null==S||S(void 0,void 0),pe(),P(void 0)),x&&N!==D(x)&&Z(!1)}),[N,x]),s.useEffect((()=>{$(x?D(x):""),L(x?D(x):""),P(x),k([]),Z(!!x)}),[x]),s.useEffect((()=>{var e;const r=he(),t=null!==(e=null==W?void 0:W.length)&&void 0!==e?e:0;"loading"===r&&N.length>=j?X("Loading suggested results"):"fail"!==r?!M||B||A||X(0===t?N?"No results found.":null:`${t} result${t>1?"s":""} found. Press down arrow to scroll through the list.`):X("Suggestions failed to load. Try again.")}),[W,N,A,B]),s.useEffect((()=>()=>{ae.cancel()}),[ae]);const ie=(e,r)=>{var t;null===(t=re.current)||void 0===t||t.focus(),$(D(e)),L(e?D(e):""),Z(!0),P(e),z(!1),null==S||S(e,r)},oe=()=>{K(!0)},le=e=>{M||!ee.current||ee.current.contains(e.relatedTarget)||(K(!1),ue())},ne=()=>{z(!1),K(!1)},de=()=>{$(""),k([]),Z(!1),z(!1),null==S||S(void 0,void 0)},ue=()=>{if(!H)if(G){const e=D(G);$(e),z(!1)}else de()},ce=e=>{$(e.target.value),Z(!1)},pe=e=>{L(""),Z(!1),k([]),V(!0)},he=()=>A?"fail":B?"loading":"success";return r.jsx(l.DropdownListState,{children:r.jsx(d.ElementWithDropdown,{enabled:!g&&!w,isOpen:M,renderElement:()=>r.jsxs(u.InputWrapper,{className:p,"data-testid":h,ref:ee,tabIndex:-1,onFocus:oe,onBlur:le,$focused:J,$disabled:w,$readOnly:g,$error:f,children:[r.jsxs(i.VisuallyHidden,{id:Y,"aria-hidden":!0,children:["Type in ",j," or more characters for suggested results."]}),U&&r.jsx(i.VisuallyHidden,{"aria-live":"polite",children:U}),r.jsx(a.Input,Object.assign({role:"combobox",ref:re,id:Q,type:"text",value:N,onChange:ce,placeholder:v,readOnly:g,disabled:w,allowClear:!0,onClear:de,"aria-expanded":M,"aria-controls":Q,"aria-autocomplete":"list","aria-haspopup":"listbox",onBlur:N.length<j?ue:void 0,styleType:"no-border","aria-describedby":i.concatIds(_,Y)},C))]}),renderDropdown:()=>r.jsx(r.Fragment,{children:r.jsx(o.DropdownList,{listboxId:Q,listItems:W,onSelectItem:ie,onDismiss:ne,valueExtractor:q,listExtractor:y,itemsLoadState:he(),itemTruncationType:"end",itemMaxLines:1,labelDisplayType:"next-line",disableItemFocus:!0,onRetry:()=>se(N),width:O,matchElementWidth:!0})}),onOpen:()=>{!H&&N.length>=j&&K(!0)},onClose:()=>{z(!1),K(!1),ue()},onDismiss:()=>{var e;z(!1),K(!1),ue(),null===(e=re.current)||void 0===e||e.focus()},clickToToggle:!1,offset:8,alignment:E,fitAvailableHeight:!0,customZIndex:T,rootNode:I})})};
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("../external/lodash/debounce.js"),s=require("react"),i=require("../input/input.js"),a=require("../shared/accessibility/index.js");require("clsx"),require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var o=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer"),require("../shared/dropdown-list/dropdown-label.styles_1dwmd8f.css");var l=require("../shared/dropdown-list/dropdown-list.js"),n=require("../shared/dropdown-list/dropdown-list-state.js");require("../shared/dropdown-list/expandable-element.js"),require("@lifesg/react-icons/caret-right"),require("@lifesg/react-icons/exclamation-circle-fill"),require("@lifesg/react-icons/minus-square-fill"),require("@lifesg/react-icons/square"),require("@lifesg/react-icons/square-tick-fill"),require("@lifesg/react-icons/tick"),require("react-virtuoso"),require("../markup/markup.js"),require("../shared/component-loading-spinner/component-loading-spinner.styles_15eq02i.css");var d=require("../shared/dropdown-wrapper/element-with-dropdown.js"),u=require("../shared/input-wrapper/input-wrapper.js");require("../shared/dropdown-list/dropdown-list.styles_1qveyb9.css"),require("../shared/dropdown-list/dropdown-search.js"),require("../shared/dropdown-list/nested-dropdown-list.styles_wdhxoe.css"),require("immer"),require("../external/lodash/_getTag.js"),require("../external/lodash/isArguments.js"),require("../external/lodash/_baseGetTag.js"),require("../external/lodash/isBuffer.js"),require("../external/lodash/isTypedArray.js"),require("../external/lodash/_Stack.js"),require("../external/lodash/_SetCache.js"),require("../external/lodash/_equalByTag.js"),require("../shared/dropdown-list/virtuoso-components.js");exports.PredictiveTextInput=c=>{var{className:p,"data-testid":h,selectedOption:m,minimumCharacters:q=3,fetchOptions:f,placeholder:x="Enter here...",readOnly:g=!1,disabled:j=!1,error:w,valueExtractor:v,listExtractor:y,displayValueExtractor:b,onSelectOption:_,alignment:S,dropdownZIndex:T,dropdownRootNode:E,dropdownWidth:I,"aria-describedby":C}=c,O=e.__rest(c,["className","data-testid","selectedOption","minimumCharacters","fetchOptions","placeholder","readOnly","disabled","error","valueExtractor","listExtractor","displayValueExtractor","onSelectOption","alignment","dropdownZIndex","dropdownRootNode","dropdownWidth","aria-describedby"]);const k=e=>e?b?b(e):e.toString():"",[A,D]=s.useState((()=>m?k(m):"")),[H,N]=s.useState((()=>m?k(m):"")),[P,R]=s.useState([]),[G,L]=s.useState(!0),[M,W]=s.useState(!1),[B,V]=s.useState(!!m),[F,Z]=s.useState(m),[$,z]=s.useState(!1),[J,K]=s.useState(!1),Q=o.useId(),[U,X]=s.useState(null),Y=`${Q}-instruction`,ee=s.useRef(null),re=s.useRef(null),te=s.useRef(f),se=s.useCallback((r=>e.__awaiter(void 0,void 0,void 0,(function*(){if(te.current){W(!1),L(!0);try{const e=yield te.current(r);N(r),R(null!=e?e:[]),L(!1)}catch(e){W(!0),L(!1)}}}))),[]),ie=s.useCallback(t.default((e=>{se(e)}),500),[se]);s.useEffect((()=>{te.current=f}),[f]),s.useEffect((()=>{A&&A.length>=q?B?A!==H&&ie(A):(z(!0),ie(A)):ie.cancel(),""===A&&F&&(null==_||_(void 0,void 0),pe(),Z(void 0)),m&&A!==k(m)&&V(!1)}),[A,m]),s.useEffect((()=>{D(m?k(m):""),N(m?k(m):""),Z(m),R([]),V(!!m)}),[m]),s.useEffect((()=>{var e;const r=he(),t=null!==(e=null==P?void 0:P.length)&&void 0!==e?e:0;"loading"===r&&A.length>=q?X("Loading suggested results"):"fail"!==r?!$||G||M||X(0===t?A?"No results found.":null:`${t} result${t>1?"s":""} found. Press down arrow to scroll through the list.`):X("Suggestions failed to load. Try again.")}),[P,A,M,G]),s.useEffect((()=>()=>{ie.cancel()}),[ie]);const ae=(e,r)=>{var t;null===(t=re.current)||void 0===t||t.focus(),D(k(e)),N(e?k(e):""),V(!0),Z(e),z(!1),null==_||_(e,r)},oe=()=>{K(!0)},le=e=>{$||!ee.current||ee.current.contains(e.relatedTarget)||(K(!1),ue())},ne=()=>{z(!1),K(!1)},de=()=>{D(""),R([]),V(!1),z(!1),null==_||_(void 0,void 0)},ue=()=>{if(!B)if(F){const e=k(F);D(e),z(!1)}else de()},ce=e=>{D(e.target.value),V(!1)},pe=e=>{N(""),V(!1),R([]),L(!0)},he=()=>M?"fail":G?"loading":"success";return r.jsx(n.DropdownListState,{children:r.jsx(d.ElementWithDropdown,{enabled:!g&&!j,isOpen:$,renderElement:()=>r.jsxs(u.InputWrapper,{className:p,"data-testid":h,ref:ee,tabIndex:-1,onFocus:oe,onBlur:le,focused:J,disabled:j,readOnly:g,error:w,children:[r.jsxs(a.VisuallyHidden,{id:Y,"aria-hidden":!0,children:["Type in ",q," or more characters for suggested results."]}),U&&r.jsx(a.VisuallyHidden,{"aria-live":"polite",children:U}),r.jsx(i.Input,Object.assign({role:"combobox",ref:re,id:Q,type:"text",value:A,onChange:ce,placeholder:x,readOnly:g,disabled:j,allowClear:!0,onClear:de,"aria-expanded":$,"aria-controls":Q,"aria-autocomplete":"list","aria-haspopup":"listbox",onBlur:A.length<q?ue:void 0,styleType:"no-border","aria-describedby":a.concatIds(C,Y)},O))]}),renderDropdown:()=>r.jsx(r.Fragment,{children:r.jsx(l.DropdownList,{listboxId:Q,listItems:P,onSelectItem:ae,onDismiss:ne,valueExtractor:v,listExtractor:y,itemsLoadState:he(),itemTruncationType:"end",itemMaxLines:1,labelDisplayType:"next-line",disableItemFocus:!0,onRetry:()=>se(A),width:I,matchElementWidth:!0})}),onOpen:()=>{!B&&A.length>=q&&K(!0)},onClose:()=>{z(!1),K(!1),ue()},onDismiss:()=>{var e;z(!1),K(!1),ue(),null===(e=re.current)||void 0===e||e.focus()},clickToToggle:!1,offset:8,alignment:S,fitAvailableHeight:!0,customZIndex:T,rootNode:E})})};
 //# sourceMappingURL=predictive-text-input.js.map