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

package/cjs/pagination/pagination.styles.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"pagination.styles.js","sources":["../../../src/pagination/pagination.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { Input } from \"../input\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { Border, Colour, Font, MediaQuery, Radius, Spacing } from \"../theme\";\nimport { Typography } from \"../typography\";\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface StyleProps {\n    $selected: boolean;\n}\ninterface ButtonProps {\n    $position: string;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const PaginationWrapper = styled.nav`\n    display: flex;\n`;\n\nexport const PaginationList = styled.div`\n    align-self: flex-start;\n\n    display: flex;\n    align-items: center;\n\n    ${MediaQuery.MaxWidth.lg} {\n        align-self: center;\n    }\n`;\n\nexport const PaginationMenu = styled.div`\n    display: inline-flex;\n    align-items: center;\n`;\n\nexport const EllipsisButton = styled(ClickableIcon)`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    outline: none;\n    border-radius: ${Radius[\"sm\"]};\n    height: 2.5rem;\n    width: 2.5rem;\n    padding: 0 ${Spacing[\"spacing-8\"]};\n\n    color: ${Colour[\"icon-primary\"]};\n\n    svg {\n        height: 1.25rem;\n        width: 1.25rem;\n    }\n\n    &:disabled {\n        color: ${Colour[\"icon-disabled-subtle\"]};\n        cursor: not-allowed;\n    }\n\n    &:hover,\n    &:focus-visible {\n        background-color: ${Colour[\"bg-hover\"]};\n    }\n`;\n\nexport const NavigationButton = styled(ClickableIcon)<ButtonProps>`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    outline: none;\n    margin: ${Spacing[\"spacing-4\"]};\n    border-radius: ${Radius[\"sm\"]};\n    height: 2.5rem;\n    width: 2.5rem;\n    padding: 0 ${Spacing[\"spacing-8\"]};\n\n    color: ${Colour[\"icon-primary\"]};\n\n    svg {\n        height: 1.25rem;\n        width: 1.25rem;\n    }\n\n    &:disabled {\n        color: ${Colour[\"icon-disabled-subtle\"]};\n        cursor: not-allowed;\n    }\n\n    &:not(:disabled):hover,\n    &:not(:disabled):focus-visible {\n        background: ${Colour[\"bg-hover\"]};\n    }\n`;\n\nexport const PageItem = styled.button<StyleProps>`\n    outline: none;\n    margin: ${Spacing[\"spacing-4\"]};\n    box-shadow: none;\n    border: ${Border[\"width-010\"]} ${Border.solid}\n        ${(props) =>\n            css`\n                ${props.$selected ? Colour[\"bg-primary\"] : Colour.border}\n            `};\n    border-radius: ${Radius[\"sm\"]};\n    min-width: 2.5rem;\n    height: 2.5rem;\n    padding: 0 ${Spacing[\"spacing-8\"]};\n\n    background: ${(props) =>\n        props.$selected ? Colour[\"bg-primary\"] : Colour.bg};\n    cursor: pointer;\n\n    ${Font[\"body-baseline-regular\"]};\n    text-align: center;\n    color: ${(props) =>\n        props.$selected ? Colour[\"text-inverse\"] : Colour.text};\n\n    ${(props) =>\n        props.$selected\n            ? css`\n                  font-weight: ${Font.Spec[\"weight-bold\"]};\n\n                  &:hover,\n                  &:focus-visible {\n                      border-color: ${Colour[\"bg-selected-strongest-hover\"]};\n                      background: ${Colour[\"bg-selected-strongest-hover\"]};\n                      color: ${Colour[\"text-inverse\"]};\n                  }\n              `\n            : css`\n                  &:hover,\n                  &:focus-visible {\n                      border-color: ${Colour[\"bg-hover\"]};\n                      background: ${Colour[\"bg-hover\"]};\n                      color: ${Colour[\"text-hover\"]};\n                      font-weight: ${Font.Spec[\"weight-semibold\"]};\n                  }\n              `}\n`;\n\nexport const EllipsisContainer = styled.div`\n    position: relative;\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    margin: ${Spacing[\"spacing-4\"]};\n    border-radius: ${Radius[\"sm\"]};\n    width: 2.5rem;\n    height: 2.5rem;\n\n    cursor: pointer;\n`;\n\nexport const PaginationMobileInput = styled.div`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    margin: ${Spacing[\"spacing-4\"]};\n\n    color: ${Colour.text};\n`;\n\nexport const Label = styled(Typography.BodyBL)`\n    white-space: nowrap;\n`;\n\nexport const LabelDivider = styled(Typography.BodyBL)`\n    margin: 0 ${Spacing[\"spacing-16\"]};\n    white-space: nowrap;\n`;\n\nexport const InputView = styled(Input)`\n    width: 3.5rem;\n    height: 2.5rem;\n    ${Font[\"body-baseline-regular\"]};\n\n    input {\n        padding: 0 ${Spacing[\"spacing-8\"]};\n        text-align: center;\n    }\n`;\n\nexport const Hover = styled.div`\n    position: absolute;\n    top: -${Spacing[\"spacing-8\"]};\n    transform: translateY(-100%);\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    border: none;\n    border-radius: ${Radius[\"sm\"]};\n    width: max-content;\n    padding: ${Spacing[\"spacing-4\"]} ${Spacing[\"spacing-12\"]};\n\n    background-color: ${Colour[\"bg-hover\"]};\n\n    ${Font[\"body-xs-regular\"]}\n    color: ${Colour[\"text-hover\"]};\n`;\n\nexport const InputSelectWrapper = styled.div`\n    margin-left: ${Spacing[\"spacing-4\"]};\n    width: 10rem;\n`;\n"],"names":["PaginationWrapper","styled","nav","PaginationList","div","MediaQuery","MaxWidth","lg","PaginationMenu","EllipsisButton","ClickableIcon","Radius","Spacing","Colour","NavigationButton","PageItem","button","Border","solid","props","css","$selected","border","bg","Font","text","Spec","EllipsisContainer","PaginationMobileInput","Label","Typography","BodyBL","LabelDivider","InputView","Input","Hover","InputSelectWrapper"],"mappings":"kSAmBO,MAAMA,EAAoBC,EAAAA,QAAOC,GAAG;;EAI9BC,EAAiBF,EAAAA,QAAOG,GAAG;;;;;;MAMlCC,EAAAA,WAAWC,SAASC;;;EAKbC,EAAiBP,EAAAA,QAAOG,GAAG;;;EAK3BK,EAAiBR,EAAAA,QAAOS,EAAAA,cAAc;;;;;;qBAM9BC,EAAAA,OAAW;;;iBAGfC,EAAAA,QAAQ;;aAEZC,EAAAA,OAAO;;;;;;;;iBAQHA,EAAAA,OAAO;;;;;;4BAMIA,EAAAA,OAAO;;EAItBC,EAAmBb,EAAAA,QAAOS,EAAAA,cAA2B;;;;;;cAMpDE,EAAAA,QAAQ;qBACDD,EAAAA,OAAW;;;iBAGfC,EAAAA,QAAQ;;aAEZC,EAAAA,OAAO;;;;;;;;iBAQHA,EAAAA,OAAO;;;;;;sBAMFA,EAAAA,OAAO;;EAIhBE,EAAWd,EAAAA,QAAOe,MAAkB;;cAEnCJ,EAAAA,QAAQ;;cAERK,EAAAA,OAAO,gBAAgBA,EAAAA,OAAOC;UACjCC,GACCC,KAAG;kBACGD,EAAME,UAAYR,EAAAA,OAAO,cAAgBA,EAAAA,OAAOS;;qBAE7CX,EAAAA,OAAW;;;iBAGfC,EAAAA,QAAQ;;kBAENO,GACXA,EAAME,UAAYR,EAAAA,OAAO,cAAgBA,EAAAA,OAAOU;;;MAGlDC,EAAAA,KAAK;;aAEGL,GACNA,EAAME,UAAYR,EAAAA,OAAO,gBAAkBA,EAAAA,OAAOY;;MAEnDN,GACCA,EAAME,UACAD,KAAG;iCACgBI,EAAAA,KAAKE,KAAK;;;;sCAILb,EAAAA,OAAO;oCACTA,EAAAA,OAAO;+BACZA,EAAAA,OAAO;;gBAGxBO,KAAG;;;sCAGqBP,EAAAA,OAAO;oCACTA,EAAAA,OAAO;+BACZA,EAAAA,OAAO;qCACDW,EAAAA,KAAKE,KAAK;;;EAKlCC,EAAoB1B,EAAAA,QAAOG,GAAG;;;;;;;cAO7BQ,EAAAA,QAAQ;qBACDD,EAAAA,OAAW;;;;;EAOnBiB,EAAwB3B,EAAAA,QAAOG,GAAG;;;;;cAKjCQ,EAAAA,QAAQ;;aAETC,EAAAA,OAAOY;EAGPI,EAAQ5B,EAAAA,QAAO6B,aAAWC,OAAO;;EAIjCC,EAAe/B,EAAAA,QAAO6B,aAAWC,OAAO;gBACrCnB,EAAAA,QAAQ;;EAIXqB,EAAYhC,EAAAA,QAAOiC,EAAAA,MAAM;;;MAGhCV,EAAAA,KAAK;;;qBAGUZ,EAAAA,QAAQ;;;EAKhBuB,EAAQlC,EAAAA,QAAOG,GAAG;;YAEnBQ,EAAAA,QAAQ;;;;;;;;qBAQCD,EAAAA,OAAW;;eAEjBC,EAAAA,QAAQ,gBAAgBA,EAAAA,QAAQ;;wBAEvBC,EAAAA,OAAO;;MAEzBW,EAAAA,KAAK;aACEX,EAAAA,OAAO;EAGPuB,EAAqBnC,EAAAA,QAAOG,GAAG;mBACzBQ,EAAAA,QAAQ;;"}
+{"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":"2GAoG8B,yBA0CZ,8BApHK,uCA6BU,sCA2GF,4BA/BT,yBATJ,gCAIO,2BAnEJ,mCA0BQ,iCA3EF,kCAWA,yCA2FO,qCA1GJ"}

package/cjs/pagination/pagination.styles_6bcgva.css

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

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

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

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

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

package/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("../util/date-helper.js"),require("../util/date-input-helper.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:f="Select",optionSearchPlaceholder:S,enableSearch:g,onHideOptions:y,onShowOptions:j,placeholder:q,autoComplete:P,noBorder:N=!1,getAriaLabel:x}=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==x?void 0:x(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:q,addon:v?{type:"label",attributes:{value:a(null==I?void 0:I.countryCode)}}:{type:"list",attributes:{"aria-label":"Country code",placeholder:f,options:H,selectedOption:I,enableSearch:g,searchPlaceholder:S,valueExtractor:e=>`+${e.countryCode}`,listExtractor:e=>({title:e.name,secondaryLabel:a(e.countryCode)}),onSelectOption:$,onHideOptions:y,onShowOptions:j}},inputMode:"numeric",autoComplete:P,noBorder:N,"aria-label":A},O))};
+"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\";\nimport { InputGroup } from \"../input-group/input-group\";\nimport { AddonProps, LabelAddon, ListAddon } from \"../input-group/types\";\nimport { useNextInputState } from \"../util\";\nimport { PhoneNumberInputHelper } from \"./phone-number-input-helper\";\nimport { CountryValue, PhoneNumberInputProps } from \"./types\";\n\nexport const PhoneNumberInput = ({\n    id,\n    onChange,\n    value,\n    allowClear,\n    onClear,\n    onBlur,\n    error,\n    fixedCountry = false,\n    optionPlaceholder = \"Select\",\n    optionSearchPlaceholder,\n    enableSearch,\n    onHideOptions,\n    onShowOptions,\n    placeholder,\n    autoComplete,\n    noBorder = false,\n    getAriaLabel,\n    ...otherProps\n}: PhoneNumberInputProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [options] = useState<CountryValue[]>(\n        PhoneNumberInputHelper.getCountries()\n    );\n\n    const [selectedCountry, setSelectedCountry] = useState<\n        CountryValue | undefined\n    >(undefined);\n    const [inputValue, setInputValue] = useState<string>(\"\");\n\n    const nodeRef = useRef<HTMLInputElement>(null);\n\n    const getNextInputState = useNextInputState({\n        ref: nodeRef,\n        formatter: (value) =>\n            PhoneNumberInputHelper.formatNumber(\n                value.replace(/[^0-9]/g, \"\"),\n                selectedCountry\n            ),\n    });\n\n    const resolvedAriaLabel =\n        getAriaLabel?.(selectedCountry) ?? \"Enter phone number\";\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        const selectedOption = options.filter(\n            (country) =>\n                country.countryCode === normaliseCountryCode(value?.countryCode)\n        )[0];\n\n        setSelectedCountry(selectedOption);\n        setInputValue(\n            PhoneNumberInputHelper.formatNumber(value?.number, selectedOption)\n        );\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleClear = () => {\n        if (onClear) {\n            onClear();\n        } else {\n            setInputValue(\"\");\n        }\n    };\n\n    const handleInputChange = () => {\n        const nextState = getNextInputState();\n        if (!nextState) return;\n\n        const { nextValue, updateCaretPosition } = nextState;\n\n        updateCaretPosition();\n        performLocalChangeHandler(nextValue, selectedCountry);\n        if (onChange) {\n            performOnChangeHandler(nextValue, selectedCountry);\n        }\n    };\n\n    const handleSelectOption = (country: CountryValue) => {\n        performLocalChangeHandler(inputValue, country);\n        if (onChange) {\n            performOnChangeHandler(inputValue, country);\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const performOnChangeHandler = (\n        inputValue: string,\n        selectedCountry: CountryValue | undefined\n    ) => {\n        const formatedInputValue = PhoneNumberInputHelper.formatNumber(\n            inputValue,\n            selectedCountry\n        );\n        onChange?.({\n            number: formatedInputValue.replace(/[\\s()]+/g, \"\"), // strip formatted spaces\n            countryCode:\n                selectedCountry && addPlusPrefix(selectedCountry.countryCode),\n        });\n    };\n\n    const performLocalChangeHandler = (\n        inputValue: string,\n        selectedCountry: CountryValue | undefined\n    ) => {\n        setInputValue(\n            PhoneNumberInputHelper.formatNumber(inputValue, selectedCountry)\n        );\n\n        setSelectedCountry(selectedCountry);\n    };\n\n    const getAddonProps = (): AddonProps<CountryValue, string> => {\n        if (fixedCountry) {\n            return {\n                type: \"label\",\n                attributes: {\n                    value: addPlusPrefix(selectedCountry?.countryCode),\n                } as LabelAddon,\n            };\n        } else {\n            return {\n                type: \"list\",\n                attributes: {\n                    \"aria-label\": \"Country code\",\n                    placeholder: optionPlaceholder,\n                    options,\n                    selectedOption: selectedCountry,\n                    enableSearch: enableSearch,\n                    searchPlaceholder: optionSearchPlaceholder,\n                    valueExtractor: (option) => `+${option.countryCode}`,\n                    listExtractor: (option) => ({\n                        title: option.name,\n                        secondaryLabel: addPlusPrefix(option.countryCode),\n                    }),\n                    onSelectOption: handleSelectOption,\n                    onHideOptions: onHideOptions,\n                    onShowOptions: onShowOptions,\n                } as ListAddon<CountryValue, string>,\n            };\n        }\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <InputGroup\n            id={id}\n            ref={nodeRef}\n            value={inputValue}\n            onChange={handleInputChange}\n            allowClear={allowClear && !!inputValue}\n            onClear={handleClear}\n            onBlur={onBlur}\n            error={error}\n            placeholder={placeholder}\n            addon={getAddonProps()}\n            inputMode=\"numeric\"\n            autoComplete={autoComplete}\n            noBorder={noBorder}\n            aria-label={resolvedAriaLabel}\n            {...otherProps}\n        />\n    );\n};\n\n// =============================================================================\n// HELPER FUNCTIONS\n// =============================================================================\n/**\n * This strips the + off the specified country code if it\n * is present.\n */\nconst normaliseCountryCode = (countryCode: string | undefined): string => {\n    return countryCode ? countryCode.replace(\"+\", \"\") : \"\";\n};\n\nconst addPlusPrefix = (countryCode?: string): string => {\n    if (!countryCode) return \"\";\n    return countryCode.includes(\"+\") ? countryCode : `+${countryCode}`;\n};\n"],"names":["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":"kdAOO,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"}
+{"version":3,"file":"phone-number-input.js","sources":["../../../src/phone-number-input/phone-number-input.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\nimport { InputGroup } from \"../input-group/input-group\";\nimport type { AddonProps, LabelAddon, ListAddon } from \"../input-group/types\";\nimport { useNextInputState } from \"../util\";\nimport { PhoneNumberInputHelper } from \"./phone-number-input-helper\";\nimport type { CountryValue, PhoneNumberInputProps } from \"./types\";\n\n// @catalog\n/**\n * A phone number field composed of a country code selector and a number input.\n *\n * Use `PhoneNumberInput` when collecting an internationalised phone number.\n * The country code can be selected from a searchable dropdown or locked to a\n * fixed value via `fixedCountry`.\n * @keywords contact, country code, field, form, input, number, telephone\n */\nexport const PhoneNumberInput = ({\n    id,\n    onChange,\n    value,\n    allowClear,\n    onClear,\n    onBlur,\n    error,\n    fixedCountry = false,\n    optionPlaceholder = \"Select\",\n    optionSearchPlaceholder,\n    enableSearch,\n    onHideOptions,\n    onShowOptions,\n    placeholder,\n    autoComplete,\n    noBorder = false,\n    getAriaLabel,\n    ...otherProps\n}: PhoneNumberInputProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [options] = useState<CountryValue[]>(\n        PhoneNumberInputHelper.getCountries()\n    );\n\n    const [selectedCountry, setSelectedCountry] = useState<\n        CountryValue | undefined\n    >(undefined);\n    const [inputValue, setInputValue] = useState<string>(\"\");\n\n    const nodeRef = useRef<HTMLInputElement>(null);\n\n    const getNextInputState = useNextInputState({\n        ref: nodeRef,\n        formatter: (value) =>\n            PhoneNumberInputHelper.formatNumber(\n                value.replace(/[^0-9]/g, \"\"),\n                selectedCountry\n            ),\n    });\n\n    const resolvedAriaLabel =\n        getAriaLabel?.(selectedCountry) ?? \"Enter phone number\";\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        const selectedOption = options.filter(\n            (country) =>\n                country.countryCode === normaliseCountryCode(value?.countryCode)\n        )[0];\n\n        setSelectedCountry(selectedOption);\n        setInputValue(\n            PhoneNumberInputHelper.formatNumber(value?.number, selectedOption)\n        );\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleClear = () => {\n        if (onClear) {\n            onClear();\n        } else {\n            setInputValue(\"\");\n        }\n    };\n\n    const handleInputChange = () => {\n        const nextState = getNextInputState();\n        if (!nextState) return;\n\n        const { nextValue, updateCaretPosition } = nextState;\n\n        updateCaretPosition();\n        performLocalChangeHandler(nextValue, selectedCountry);\n        if (onChange) {\n            performOnChangeHandler(nextValue, selectedCountry);\n        }\n    };\n\n    const handleSelectOption = (country: CountryValue) => {\n        performLocalChangeHandler(inputValue, country);\n        if (onChange) {\n            performOnChangeHandler(inputValue, country);\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const performOnChangeHandler = (\n        inputValue: string,\n        selectedCountry: CountryValue | undefined\n    ) => {\n        const formatedInputValue = PhoneNumberInputHelper.formatNumber(\n            inputValue,\n            selectedCountry\n        );\n        onChange?.({\n            number: formatedInputValue.replace(/[\\s()]+/g, \"\"), // strip formatted spaces\n            countryCode:\n                selectedCountry && addPlusPrefix(selectedCountry.countryCode),\n        });\n    };\n\n    const performLocalChangeHandler = (\n        inputValue: string,\n        selectedCountry: CountryValue | undefined\n    ) => {\n        setInputValue(\n            PhoneNumberInputHelper.formatNumber(inputValue, selectedCountry)\n        );\n\n        setSelectedCountry(selectedCountry);\n    };\n\n    const getAddonProps = (): AddonProps<CountryValue, string> => {\n        if (fixedCountry) {\n            return {\n                type: \"label\",\n                attributes: {\n                    value: addPlusPrefix(selectedCountry?.countryCode),\n                } as LabelAddon,\n            };\n        } else {\n            return {\n                type: \"list\",\n                attributes: {\n                    \"aria-label\": \"Country code\",\n                    placeholder: optionPlaceholder,\n                    options,\n                    selectedOption: selectedCountry,\n                    enableSearch: enableSearch,\n                    searchPlaceholder: optionSearchPlaceholder,\n                    valueExtractor: (option) => `+${option.countryCode}`,\n                    listExtractor: (option) => ({\n                        title: option.name,\n                        secondaryLabel: addPlusPrefix(option.countryCode),\n                    }),\n                    onSelectOption: handleSelectOption,\n                    onHideOptions: onHideOptions,\n                    onShowOptions: onShowOptions,\n                } as ListAddon<CountryValue, string>,\n            };\n        }\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <InputGroup\n            id={id}\n            ref={nodeRef}\n            value={inputValue}\n            onChange={handleInputChange}\n            allowClear={allowClear && !!inputValue}\n            onClear={handleClear}\n            onBlur={onBlur}\n            error={error}\n            placeholder={placeholder}\n            addon={getAddonProps()}\n            inputMode=\"numeric\"\n            autoComplete={autoComplete}\n            noBorder={noBorder}\n            aria-label={resolvedAriaLabel}\n            {...otherProps}\n        />\n    );\n};\n\n// =============================================================================\n// HELPER FUNCTIONS\n// =============================================================================\n/**\n * This strips the + off the specified country code if it\n * is present.\n */\nconst normaliseCountryCode = (countryCode: string | undefined): string => {\n    return countryCode ? countryCode.replace(\"+\", \"\") : \"\";\n};\n\nconst addPlusPrefix = (countryCode?: string): string => {\n    if (!countryCode) return \"\";\n    return countryCode.includes(\"+\") ? countryCode : `+${countryCode}`;\n};\n"],"names":["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":"kbAiBO,MAwLDA,EAAwBC,GACnBA,EAAcA,EAAYC,QAAQ,IAAK,IAAM,GAGlDC,EAAiBF,GACdA,EACEA,EAAYG,SAAS,KAAOH,EAAc,IAAIA,IAD5B,4BA7LII,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,GAEF,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\";\nimport { PillProps } from \"./types\";\nimport { Label, Wrapper } from \"./pill.style\";\n\nexport const Pill = ({\n    type,\n    colorType = \"black\",\n    children,\n    icon,\n    ...otherProps\n}: PillProps): JSX.Element => {\n    return (\n        <Wrapper $type={type} $color={colorType} {...otherProps}>\n            {icon && React.cloneElement(icon, { \"aria-hidden\": true })}\n            <Label>{children}</Label>\n        </Wrapper>\n    );\n};\n"],"names":["_a","type","colorType","children","icon","otherProps","__rest","_jsxs","Wrapper","Object","assign","$type","$color","React","cloneElement","_jsx","Label"],"mappings":"mOAIqBA,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\n// @catalog\n/**\n * A compact label used to display status, category, or metadata.\n *\n * Use `Pill` to surface short, read-only information — such as a tag or status\n * badge — inline with other content.\n * @keywords badge, label, status\n */\nexport const Pill = ({\n    type,\n    colorType = \"black\",\n    children,\n    icon,\n    className,\n    ...otherProps\n}: PillProps): JSX.Element => {\n    return (\n        <div\n            {...otherProps}\n            className={clsx(\n                styles.wrapperBase,\n                type === \"solid\" && styles.wrapperSolid,\n                WRAPPER_CLASS[type][colorType],\n                className\n            )}\n        >\n            {icon && React.cloneElement(icon, { \"aria-hidden\": true })}\n            <div className={styles.label}>{children}</div>\n        </div>\n    );\n};\n"],"names":["WRAPPER_CLASS","solid","black","styles.wrapperSolidBlack","grey","styles.wrapperSolidGrey","green","styles.wrapperSolidGreen","yellow","styles.wrapperSolidYellow","red","styles.wrapperSolidRed","blue","styles.wrapperSolidBlue","primary","styles.wrapperSolidPrimary","outline","styles.wrapperOutlineBlack","styles.wrapperOutlineGrey","styles.wrapperOutlineGreen","styles.wrapperOutlineYellow","styles.wrapperOutlineRed","styles.wrapperOutlineBlue","styles.wrapperOutlinePrimary","_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,qCAYIC,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_xwrniu.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_xwrniu.css

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

package/cjs/popover/index.js

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"popover-inline.js","sources":["../../../../src/popover/popover-inline/popover-inline.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport { PopoverTrigger } from \"../popover-trigger\";\nimport * as styles from \"./popover-inline.styles\";\nimport type { PopoverInlineProps } from \"./types\";\n\n/**\n * An inline text or icon element that opens a popover on interaction.\n *\n * Use `PopoverInline` to embed a labelled trigger directly within a body of content.\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":"4RAW8BA,IAAA,IAAAC,UAC1BA,EAASC,QACTA,EAAOC,KACPA,EAAIC,eACJA,EAAiB,UAASC,oBAC1BA,EAAsB,WAASL,EAC5BM,EAAUC,EAAAA,OAAAP,EANa,uEAW1B,MAAMQ,IAAeN,EAErB,OACIO,MAACC,EAAAA,eAAcC,OAAAC,OAAA,CAAA,EAAKN,EAAU,CAAAO,SAC1BC,OAAA,OAAA,CAAA,aACgBb,QAAAA,EAAcO,OAAaO,EAAY,YACnDC,KAAK,SAAQ,gBACC,SACdC,SAAU,EACVC,UAAWC,2CACWf,EAAc,6BACRC,EAAmBQ,SAAA,CAE9CX,EACAC,GACGM,EAAAA,IAAA,OAAA,CACIS,UAAWE,EAAAA,QACPZ,GAAca,gCACjBR,SAEAV,SAIA"}

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

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

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

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

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

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

package/cjs/popover/popover-trigger.js

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

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

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

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

@@ -0,0 +1,2 @@
+"use strict";require("./popover-trigger.styles_8zokig.css");exports.triggerContainer="tjxhm5y";
+//# sourceMappingURL=popover-trigger.styles.js.map

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

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

package/cjs/popover/popover-trigger.styles_8zokig.css

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

package/cjs/popover/popover.js

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

package/cjs/popover/popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.js","sources":["../../../src/popover/popover.tsx"],"sourcesContent":["import debounce from \"lodash/debounce\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { useMediaQuery } from \"react-responsive\";\nimport { Card } from \"src/card\";\nimport { Modal } from \"../modal/modal\";\nimport { MediaWidths } from \"../v2_spec/media-spec\";\nimport { V2_Text } from \"../v2_text/text\";\nimport {\n    BubbleWrap,\n    ContentWrapper,\n    MobileModalBox,\n    OffsetPosition,\n} from \"./popover.styles\";\nimport { PopoverProps } from \"./types\";\n\n/**\n * @deprecated Use `PopoverV2` for improved positioning behaviour. This component will be removed in DS v3.\n */\nexport const Popover = ({\n    children,\n    visible,\n    onMobileClose,\n    ...otherProps\n}: PopoverProps): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const testId = otherProps[\"data-testid\"] || \"popover\";\n    const [offset, _setOffset] = useState<OffsetPosition>(\"none\");\n    const bubbleRef = useRef<HTMLDivElement>(null);\n    const isMobile = useMediaQuery({\n        maxWidth: MediaWidths.mobileL,\n    });\n\n    /**\n     * Have to use refs to allow the state values to be accessible\n     * by the event listener callback functions\n     * Reference:\n     * https://stackoverflow.com/questions/55265255/react-usestate-hook-event-handler-using-initial-state\n     */\n    const offsetStateRef = useRef<OffsetPosition>(offset);\n\n    // =============================================================================\n    // REF FUNCTIONS\n    // =============================================================================\n    const setOffset = (value: OffsetPosition) => {\n        offsetStateRef.current = value;\n        _setOffset(value);\n    };\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        updateOffsetPosition();\n        window.addEventListener(\"resize\", debounce(handleViewportResize, 300));\n\n        return () => {\n            window.removeEventListener(\n                \"resize\",\n                debounce(handleViewportResize, 300)\n            );\n        };\n    }, []);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleViewportResize = () => {\n        updateOffsetPosition();\n    };\n\n    const handleMobileClose = () => {\n        if (onMobileClose) {\n            onMobileClose();\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const updateOffsetPosition = () => {\n        const newOffsetPosition = getOffsetPosition();\n\n        if (newOffsetPosition) {\n            setOffset(newOffsetPosition);\n        }\n    };\n\n    const getOffsetPosition = (): OffsetPosition | undefined => {\n        if (bubbleRef.current) {\n            const bubbleRect = bubbleRef.current.getBoundingClientRect();\n            const paddingBuffer = 24; // buffer for all sides\n            const hasExceededTop = bubbleRect.y < paddingBuffer;\n            const rightLimit = window.innerWidth - paddingBuffer;\n\n            if (bubbleRect.x < paddingBuffer) {\n                // Exceed left\n                return hasExceededTop ? \"top-left\" : \"left\";\n            } else if (bubbleRect.x + bubbleRect.width > rightLimit) {\n                // Exceed right\n                return hasExceededTop ? \"top-right\" : \"right\";\n            }\n\n            /**\n             * Handle cases where there is more space and we can\n             * shift bubble back to center\n             */\n            if (\n                (offsetStateRef.current === \"top-left\" ||\n                    offsetStateRef.current === \"left\") &&\n                bubbleRect.x - bubbleRect.width / 2 > paddingBuffer\n            ) {\n                return hasExceededTop ? \"top-center\" : \"none\";\n            }\n\n            if (\n                (offsetStateRef.current === \"top-right\" ||\n                    offsetStateRef.current === \"right\") &&\n                bubbleRect.x + bubbleRect.width * 2 < rightLimit\n            ) {\n                return hasExceededTop ? \"top-center\" : \"none\";\n            }\n\n            if (hasExceededTop) {\n                return \"top-center\";\n            }\n\n            // All ok, do nothing\n            return undefined;\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderContent = () =>\n        typeof children === \"string\" ? (\n            <V2_Text.BodySmall>{children}</V2_Text.BodySmall>\n        ) : (\n            children\n        );\n\n    return (\n        <>\n            <BubbleWrap\n                ref={bubbleRef}\n                data-testid={testId}\n                $visible={visible}\n                $offset={offset}\n                {...otherProps}\n            >\n                <Card>{renderContent()}</Card>\n            </BubbleWrap>\n            {isMobile && (\n                <Modal\n                    show={visible ?? false}\n                    onOverlayClick={handleMobileClose}\n                >\n                    <MobileModalBox onClose={handleMobileClose}>\n                        <ContentWrapper>{renderContent()}</ContentWrapper>\n                    </MobileModalBox>\n                </Modal>\n            )}\n        </>\n    );\n};\n"],"names":["_a","children","visible","onMobileClose","otherProps","__rest","testId","offset","_setOffset","useState","bubbleRef","useRef","isMobile","useMediaQuery","maxWidth","MediaWidths","mobileL","offsetStateRef","useEffect","updateOffsetPosition","window","addEventListener","debounce","handleViewportResize","removeEventListener","handleMobileClose","newOffsetPosition","getOffsetPosition","value","current","bubbleRect","getBoundingClientRect","paddingBuffer","hasExceededTop","y","rightLimit","innerWidth","x","width","renderContent","_jsx","V2_Text","BodySmall","_jsxs","_Fragment","BubbleWrap","Object","assign","ref","$visible","$offset","Card","Modal","show","onOverlayClick","MobileModalBox","onClose","ContentWrapper"],"mappings":"wYAkBwBA,QAAAC,SACpBA,EAAQC,QACRA,EAAOC,cACPA,KACGC,EAAUC,EAAAA,OAAAL,EAJO,CAAA,WAAA,UAAA,kBASpB,MAAMM,EAASF,EAAW,gBAAkB,WACrCG,EAAQC,GAAcC,EAAAA,SAAyB,QAChDC,EAAYC,EAAAA,OAAuB,MACnCC,EAAWC,EAAAA,uBAAAA,cAAc,CAC3BC,SAAUC,EAAAA,YAAYC,UASpBC,EAAiBN,EAAAA,OAAuBJ,GAa9CW,EAAAA,WAAU,KACNC,IACAC,OAAOC,iBAAiB,SAAUC,EAAAA,QAASC,EAAsB,MAE1D,KACHH,OAAOI,oBACH,SACAF,EAAAA,QAASC,EAAsB,KAClC,IAEN,IAKH,MAAMA,EAAuB,KACzBJ,GAAsB,EAGpBM,EAAoB,KAClBtB,GACAA,GACJ,EAMEgB,EAAuB,KACzB,MAAMO,EAAoBC,IArCZ,IAACC,EAuCXF,IAvCWE,EAwCDF,EAvCdT,EAAeY,QAAUD,EACzBpB,EAAWoB,GAuCX,EAGED,EAAoB,KACtB,GAAIjB,EAAUmB,QAAS,CACnB,MAAMC,EAAapB,EAAUmB,QAAQE,wBAC/BC,EAAgB,GAChBC,EAAiBH,EAAWI,EAAIF,EAChCG,EAAaf,OAAOgB,WAAaJ,EAEvC,OAAIF,EAAWO,EAAIL,EAERC,EAAiB,WAAa,OAC9BH,EAAWO,EAAIP,EAAWQ,MAAQH,EAElCF,EAAiB,YAAc,SAQV,aAA3BhB,EAAeY,SACe,SAA3BZ,EAAeY,UACnBC,EAAWO,EAAIP,EAAWQ,MAAQ,EAAIN,IAMV,cAA3Bf,EAAeY,SACe,UAA3BZ,EAAeY,UACnBC,EAAWO,EAAuB,EAAnBP,EAAWQ,MAAYH,EAN/BF,EAAiB,aAAe,OAWvCA,EACO,kBAIX,CACJ,GAMEM,EAAgB,IACE,iBAAbtC,EACHuC,EAAAA,IAACC,UAAQC,UAAS,CAAAzC,SAAEA,IAA6B,EAKzD,OACI0C,EAAAA,KAAAC,EAAAA,SAAA,CAAA3C,SAAA,CACIuC,EAAAA,IAACK,EAAAA,WAAUC,OAAAC,OAAA,CACPC,IAAKtC,EAAS,cACDJ,EAAM2C,SACT/C,EAAOgD,QACR3C,GACLH,EAAU,CAAAH,SAEduC,MAACW,EAAAA,KAAI,CAAAlD,SAAEsC,SAEV3B,GACG4B,EAAAA,IAACY,EAAAA,MAAK,CACFC,KAAMnD,SAAAA,EACNoD,eAAgB7B,EAAiBxB,SAEjCuC,EAAAA,IAACe,iBAAc,CAACC,QAAS/B,EAAiBxB,SACtCuC,EAAAA,IAACiB,EAAAA,eAAc,CAAAxD,SAAEsC,YAI9B"}
+{"version":3,"file":"popover.js","sources":["../../../src/popover/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 { useApplyStyle, useMaxWidthMediaQuery } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./popover.styles\";\nimport type { PopoverProps } from \"./types\";\n\n// @catalog\n/**\n * The presentational overlay for a popover panel. Renders as a floating card\n * on desktop and modal on mobile.\n *\n * Use with `PopoverTrigger`, which manages visibility state and positioning.\n * @keywords info, overlay, tooltip\n */\nexport const Popover = ({\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}: PopoverProps): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const isMobile = useMaxWidthMediaQuery(\"sm\");\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","isMobile","useMaxWidthMediaQuery","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":"utBAmBwBA,IAAA,IAAAC,SACpBA,EAAQC,QACRA,GAAU,EAAKC,cACfA,EAAaC,UACbA,EAASC,SACTA,EAAQC,UACRA,EAAY,mBAAkBC,GAC9BA,EAAEC,UACFA,EACA,cAAeC,EAAS,WAAST,EAC9BU,EAAUC,EAAAA,OAAAX,EAVO,0GAepB,MAAMY,EAAWC,EAAAA,sBAAsB,MACjCC,EAAsBC,EAAAA,OAAuB,MAC7CC,EAAmBC,EAAAA,SACrB,KAAA,CACI,CAACC,EAAAA,OAAcC,YAAYf,gBACTgB,IAAdhB,EAA0B,KAAO,GAAGA,MACxC,CAACc,EAAAA,OAAcC,YAAYE,WAAYhB,QAAAA,EAAY,QAEvD,CAACD,EAAWC,IAEhBiB,EAAAA,cAAcR,EAAqBE,GAKnC,MAAMO,EAAoB,KAClBpB,GACAA,GACJ,EAMEqB,EAAgB,IACE,iBAAbvB,EACHwB,EAAAA,IAACC,aAAWC,OAAM,CAAA1B,SAAEA,IAA6B,EAKzD,OACI2B,EAAAA,KAAAC,EAAAA,SAAA,CAAA5B,SAAA,CACKC,IAAYU,GACTa,MAAA,MAAAK,OAAAC,OAAA,CACIC,IAAKlB,EACLmB,SAAU,EAAC,cACExB,GACTC,EAAU,CACdF,UAAW0B,EAAAA,QAAKC,EAAAA,iBAAyB3B,GACzCD,GAAIA,EACJ6B,KAAK,SAAQ,aACD9B,EAASL,SAErBwB,EAAAA,IAACY,OAAI,CACD7B,UAAW0B,UACPI,EAAAA,iBACclB,IAAdhB,GACImC,EAAAA,yBACJlC,GAAYmC,EAAAA,yBACfvC,SAEDwB,EAAAA,IAACgB,EAAAA,OAAM,CAACC,aAAa,mBAChBlB,WAKhBZ,GACGa,EAAAA,IAACkB,EAAAA,QAAO,CACJC,KAAM1C,EACN2C,eAAgBtB,EAChBuB,QAASvB,EACThB,GAAIA,EACJ6B,KAAK,SAAQ,aACD9B,EAASL,SAErB2B,EAAAA,KAACe,EAAAA,QAAQN,KAAI,CAAApC,SAAA,CACTwB,EAAAA,IAACkB,EAAAA,QAAQI,QAAO,CAAA9C,SACZwB,EAAAA,IAACgB,SAAM,CAAAxC,SAAEuB,QAEbC,EAAAA,IAACkB,EAAAA,QAAQK,YAAW,CAAA,UAIjC"}