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

package/otp-verification/thumbnail/phone-thumbnail.d.ts

@@ -1,7 +1,5 @@
 interface PhoneThumbnailProps {
-    width?: number;
-    height?: number;
     className?: string;
 }
-export declare const PhoneThumbnail: ({ width, height, className, }: PhoneThumbnailProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PhoneThumbnail: ({ className }: PhoneThumbnailProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/otp-verification/thumbnail/phone-thumbnail.js

@@ -1,18 +1,2 @@
-import{jsxs as C,jsx as i}from"react/jsx-runtime";import l from"styled-components";import{V3_Colour as c}from"../../v3_theme/index.js";const e=l.svg`
-    .background-circle {
-        fill: ${c["bg-stronger"]};
-    }
-
-    .primary-path {
-        fill: ${c["icon-primary"]};
-    }
-
-    .validation-icon {
-        fill: ${c["bg-available"]};
-    }
-
-    .accent-light {
-        fill: ${c["bg-selected-stronger"]};
-    }
-`,t=({width:l=120,height:c=120,className:t})=>C(e,{width:l,height:c,viewBox:"0 0 120 120",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:t,children:[C("g",{clipPath:"url(#clip0_phone_icon)",children:[i("circle",{cx:"60",cy:"60.5",r:"60",className:"background-circle"}),i("path",{d:"M85.7091 99.047L56.9789 106.705C51.6167 108.134 46.0606 104.916 44.6318 99.5553L27.1393 33.9319C25.9969 29.6444 27.8244 25.2332 31.3437 22.9073C32.2263 22.3231 33.2151 21.8712 34.2899 21.5845L34.4374 21.5449L40.7667 19.8586L56.4455 15.6787L56.4545 15.6763L63.02 13.9267C68.3822 12.497 73.9383 15.715 75.3671 21.0761L92.8596 86.6995C94.2888 92.0619 91.0712 97.6172 85.7091 99.047Z",className:"primary-path"}),i("path",{d:"M90.0893 85.5165L72.9593 22.8765C72.8393 22.4365 72.6893 22.0165 72.5093 21.6165C72.0993 20.6965 71.5393 19.8765 70.8693 19.1765C70.2493 18.5365 69.5393 17.9865 68.7593 17.5665C66.8993 16.5465 64.6593 16.2165 62.4593 16.8065L58.8593 17.8765C58.8593 17.8765 58.8693 17.9065 58.8793 17.9265C59.2793 19.4065 58.8293 20.8265 57.8893 21.0665L42.2093 25.2365C41.3193 25.4765 40.3093 24.5765 39.8593 23.2265L36.0693 24.2365C31.5193 25.4465 28.7793 30.1665 29.9993 34.7265L30.3093 35.8765L32.1393 42.7565L35.8493 56.6765L36.8693 60.5165L38.1493 65.3165L47.0793 97.5165C48.2893 102.067 53.0093 104.807 57.5693 103.587L83.9993 95.9965C88.5493 94.7865 91.2893 90.0665 90.0693 85.5065L90.0893 85.5165ZM38.6893 26.3265L34.8993 27.3365C34.5793 27.4265 34.2493 27.2265 34.1593 26.9065C34.0693 26.5865 34.2693 26.2565 34.5893 26.1665L38.3793 25.1565C38.6993 25.0665 39.0293 25.2665 39.1193 25.5865C39.2093 25.9065 39.0093 26.2365 38.6893 26.3265ZM65.6893 19.3265L61.8993 20.3365C61.5793 20.4265 61.2493 20.2265 61.1593 19.9065C61.0693 19.5865 61.2693 19.2565 61.5893 19.1665L65.3793 18.1565C65.6993 18.0665 66.0293 18.2665 66.1193 18.5865C66.2093 18.9065 66.0093 19.2365 65.6893 19.3265Z",fill:"white"}),i("path",{d:"M55.1766 48.5674L51.606 46.5059C51.2659 46.3096 50.9001 46.2639 50.5086 46.3688C50.1181 46.4734 49.8247 46.6958 49.6283 47.0358C49.4155 47.4045 49.3616 47.7846 49.4665 48.1761C49.5711 48.5666 49.8047 48.857 50.1673 49.0473L54.9279 51.7972C55.2737 52.015 55.6424 52.0715 56.0339 51.9665C56.4244 51.8619 56.7262 51.6258 56.9393 51.2583L62.4123 41.7787C62.6086 41.4387 62.6559 41.0788 62.5541 40.699C62.4521 40.3181 62.231 40.0296 61.891 39.8332C61.5509 39.6369 61.1851 39.5912 60.7935 39.6961C60.403 39.8007 60.1096 40.0231 59.9133 40.3631L55.1766 48.5674ZM59.9961 59.3129C58.1413 59.8099 56.3037 59.9251 54.4835 59.6586C52.6632 59.392 50.988 58.817 49.4577 57.9335C47.9274 57.05 46.5918 55.8867 45.4509 54.4435C44.3099 53.0004 43.4909 51.3514 42.9939 49.4965C42.4969 47.6417 42.3817 45.8041 42.6482 43.9838C42.9147 42.1635 43.4897 40.4882 44.3732 38.958C45.2567 37.4277 46.42 36.0921 47.8631 34.9511C49.3063 33.8102 50.9552 32.9912 52.8101 32.4942C54.6649 31.9972 56.5025 31.8819 58.3227 32.1485C60.143 32.415 61.8183 32.99 63.3485 33.8736C64.8788 34.7571 66.2144 35.9204 67.3554 37.3635C68.4963 38.8067 69.3153 40.4557 69.8123 42.3105C70.3093 44.1654 70.4246 46.003 70.158 47.8233C69.8915 49.6435 69.3165 51.3188 68.433 52.8491C67.5495 54.3794 66.3862 55.715 64.9431 56.8559C63.5 57.9969 61.851 58.8159 59.9961 59.3129Z",className:"validation-icon"}),i("path",{d:"M76.5801 68.8601C77.3501 68.6501 77.8201 67.8501 77.6101 67.0801C77.4001 66.3101 76.6001 65.8401 75.8301 66.0501L49.0801 73.1601C48.3101 73.3701 47.8401 74.1701 48.0501 74.9401C48.2601 75.7101 49.0601 76.1801 49.8301 75.9701L76.5801 68.8601Z",className:"accent-light"}),i("path",{d:"M78.5098 76.1402C79.2798 75.9302 79.7498 75.1302 79.5398 74.3602C79.3298 73.5902 78.5298 73.1202 77.7598 73.3302L51.0098 80.4402C50.2398 80.6502 49.7698 81.4502 49.9798 82.2202C50.1898 82.9902 50.9898 83.4602 51.7598 83.2502L78.5098 76.1402Z",className:"accent-light"}),i("path",{d:"M81.6702 82.3401C81.4602 81.5701 80.6602 81.1001 79.8902 81.3101L53.1402 88.4201C52.3702 88.6301 51.9002 89.4301 52.1102 90.2001C52.3202 90.9701 53.1202 91.4401 53.8902 91.2301L80.6402 84.1201C81.4102 83.9101 81.8802 83.1101 81.6702 82.3401Z",className:"accent-light"})]}),i("defs",{children:i("clipPath",{id:"clip0_phone_icon",children:i("rect",{width:"120",height:"120",fill:"white"})})})]});export{t as PhoneThumbnail};
+import{jsxs as C,jsx as c}from"react/jsx-runtime";import a from"clsx";import{thumbnail as L,phoneThumbnail as i}from"./thumbnail.styles.js";const l=({className:l})=>C("svg",{viewBox:"0 0 120 120",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:a(L,i,l),children:[C("g",{clipPath:"url(#clip0_phone_icon)",children:[c("circle",{cx:"60",cy:"60.5",r:"60",className:"background-circle"}),c("path",{d:"M85.7091 99.047L56.9789 106.705C51.6167 108.134 46.0606 104.916 44.6318 99.5553L27.1393 33.9319C25.9969 29.6444 27.8244 25.2332 31.3437 22.9073C32.2263 22.3231 33.2151 21.8712 34.2899 21.5845L34.4374 21.5449L40.7667 19.8586L56.4455 15.6787L56.4545 15.6763L63.02 13.9267C68.3822 12.497 73.9383 15.715 75.3671 21.0761L92.8596 86.6995C94.2888 92.0619 91.0712 97.6172 85.7091 99.047Z",className:"primary-path"}),c("path",{d:"M90.0893 85.5165L72.9593 22.8765C72.8393 22.4365 72.6893 22.0165 72.5093 21.6165C72.0993 20.6965 71.5393 19.8765 70.8693 19.1765C70.2493 18.5365 69.5393 17.9865 68.7593 17.5665C66.8993 16.5465 64.6593 16.2165 62.4593 16.8065L58.8593 17.8765C58.8593 17.8765 58.8693 17.9065 58.8793 17.9265C59.2793 19.4065 58.8293 20.8265 57.8893 21.0665L42.2093 25.2365C41.3193 25.4765 40.3093 24.5765 39.8593 23.2265L36.0693 24.2365C31.5193 25.4465 28.7793 30.1665 29.9993 34.7265L30.3093 35.8765L32.1393 42.7565L35.8493 56.6765L36.8693 60.5165L38.1493 65.3165L47.0793 97.5165C48.2893 102.067 53.0093 104.807 57.5693 103.587L83.9993 95.9965C88.5493 94.7865 91.2893 90.0665 90.0693 85.5065L90.0893 85.5165ZM38.6893 26.3265L34.8993 27.3365C34.5793 27.4265 34.2493 27.2265 34.1593 26.9065C34.0693 26.5865 34.2693 26.2565 34.5893 26.1665L38.3793 25.1565C38.6993 25.0665 39.0293 25.2665 39.1193 25.5865C39.2093 25.9065 39.0093 26.2365 38.6893 26.3265ZM65.6893 19.3265L61.8993 20.3365C61.5793 20.4265 61.2493 20.2265 61.1593 19.9065C61.0693 19.5865 61.2693 19.2565 61.5893 19.1665L65.3793 18.1565C65.6993 18.0665 66.0293 18.2665 66.1193 18.5865C66.2093 18.9065 66.0093 19.2365 65.6893 19.3265Z",fill:"white"}),c("path",{d:"M55.1766 48.5674L51.606 46.5059C51.2659 46.3096 50.9001 46.2639 50.5086 46.3688C50.1181 46.4734 49.8247 46.6958 49.6283 47.0358C49.4155 47.4045 49.3616 47.7846 49.4665 48.1761C49.5711 48.5666 49.8047 48.857 50.1673 49.0473L54.9279 51.7972C55.2737 52.015 55.6424 52.0715 56.0339 51.9665C56.4244 51.8619 56.7262 51.6258 56.9393 51.2583L62.4123 41.7787C62.6086 41.4387 62.6559 41.0788 62.5541 40.699C62.4521 40.3181 62.231 40.0296 61.891 39.8332C61.5509 39.6369 61.1851 39.5912 60.7935 39.6961C60.403 39.8007 60.1096 40.0231 59.9133 40.3631L55.1766 48.5674ZM59.9961 59.3129C58.1413 59.8099 56.3037 59.9251 54.4835 59.6586C52.6632 59.392 50.988 58.817 49.4577 57.9335C47.9274 57.05 46.5918 55.8867 45.4509 54.4435C44.3099 53.0004 43.4909 51.3514 42.9939 49.4965C42.4969 47.6417 42.3817 45.8041 42.6482 43.9838C42.9147 42.1635 43.4897 40.4882 44.3732 38.958C45.2567 37.4277 46.42 36.0921 47.8631 34.9511C49.3063 33.8102 50.9552 32.9912 52.8101 32.4942C54.6649 31.9972 56.5025 31.8819 58.3227 32.1485C60.143 32.415 61.8183 32.99 63.3485 33.8736C64.8788 34.7571 66.2144 35.9204 67.3554 37.3635C68.4963 38.8067 69.3153 40.4557 69.8123 42.3105C70.3093 44.1654 70.4246 46.003 70.158 47.8233C69.8915 49.6435 69.3165 51.3188 68.433 52.8491C67.5495 54.3794 66.3862 55.715 64.9431 56.8559C63.5 57.9969 61.851 58.8159 59.9961 59.3129Z",className:"validation-icon"}),c("path",{d:"M76.5801 68.8601C77.3501 68.6501 77.8201 67.8501 77.6101 67.0801C77.4001 66.3101 76.6001 65.8401 75.8301 66.0501L49.0801 73.1601C48.3101 73.3701 47.8401 74.1701 48.0501 74.9401C48.2601 75.7101 49.0601 76.1801 49.8301 75.9701L76.5801 68.8601Z",className:"accent-light"}),c("path",{d:"M78.5098 76.1402C79.2798 75.9302 79.7498 75.1302 79.5398 74.3602C79.3298 73.5902 78.5298 73.1202 77.7598 73.3302L51.0098 80.4402C50.2398 80.6502 49.7698 81.4502 49.9798 82.2202C50.1898 82.9902 50.9898 83.4602 51.7598 83.2502L78.5098 76.1402Z",className:"accent-light"}),c("path",{d:"M81.6702 82.3401C81.4602 81.5701 80.6602 81.1001 79.8902 81.3101L53.1402 88.4201C52.3702 88.6301 51.9002 89.4301 52.1102 90.2001C52.3202 90.9701 53.1202 91.4401 53.8902 91.2301L80.6402 84.1201C81.4102 83.9101 81.8802 83.1101 81.6702 82.3401Z",className:"accent-light"})]}),c("defs",{children:c("clipPath",{id:"clip0_phone_icon",children:c("rect",{width:"120",height:"120",fill:"white"})})})]});export{l as PhoneThumbnail};
 //# sourceMappingURL=phone-thumbnail.js.map

package/otp-verification/thumbnail/phone-thumbnail.js.map

@@ -1 +1 @@
-{"version":3,"file":"phone-thumbnail.js","sources":["../../../src/otp-verification/thumbnail/phone-thumbnail.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { V3_Colour } from \"../../v3_theme\";\n\ninterface PhoneThumbnailProps {\n    width?: number;\n    height?: number;\n    className?: string;\n}\n\nconst StyledSvg = styled.svg`\n    .background-circle {\n        fill: ${V3_Colour[\"bg-stronger\"]};\n    }\n\n    .primary-path {\n        fill: ${V3_Colour[\"icon-primary\"]};\n    }\n\n    .validation-icon {\n        fill: ${V3_Colour[\"bg-available\"]};\n    }\n\n    .accent-light {\n        fill: ${V3_Colour[\"bg-selected-stronger\"]};\n    }\n`;\n\nexport const PhoneThumbnail = ({\n    width = 120,\n    height = 120,\n    className,\n}: PhoneThumbnailProps) => {\n    return (\n        <StyledSvg\n            width={width}\n            height={height}\n            viewBox=\"0 0 120 120\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            className={className}\n        >\n            <g clipPath=\"url(#clip0_phone_icon)\">\n                <circle\n                    cx=\"60\"\n                    cy=\"60.5\"\n                    r=\"60\"\n                    className=\"background-circle\"\n                />\n                <path\n                    d=\"M85.7091 99.047L56.9789 106.705C51.6167 108.134 46.0606 104.916 44.6318 99.5553L27.1393 33.9319C25.9969 29.6444 27.8244 25.2332 31.3437 22.9073C32.2263 22.3231 33.2151 21.8712 34.2899 21.5845L34.4374 21.5449L40.7667 19.8586L56.4455 15.6787L56.4545 15.6763L63.02 13.9267C68.3822 12.497 73.9383 15.715 75.3671 21.0761L92.8596 86.6995C94.2888 92.0619 91.0712 97.6172 85.7091 99.047Z\"\n                    className=\"primary-path\"\n                />\n                <path\n                    d=\"M90.0893 85.5165L72.9593 22.8765C72.8393 22.4365 72.6893 22.0165 72.5093 21.6165C72.0993 20.6965 71.5393 19.8765 70.8693 19.1765C70.2493 18.5365 69.5393 17.9865 68.7593 17.5665C66.8993 16.5465 64.6593 16.2165 62.4593 16.8065L58.8593 17.8765C58.8593 17.8765 58.8693 17.9065 58.8793 17.9265C59.2793 19.4065 58.8293 20.8265 57.8893 21.0665L42.2093 25.2365C41.3193 25.4765 40.3093 24.5765 39.8593 23.2265L36.0693 24.2365C31.5193 25.4465 28.7793 30.1665 29.9993 34.7265L30.3093 35.8765L32.1393 42.7565L35.8493 56.6765L36.8693 60.5165L38.1493 65.3165L47.0793 97.5165C48.2893 102.067 53.0093 104.807 57.5693 103.587L83.9993 95.9965C88.5493 94.7865 91.2893 90.0665 90.0693 85.5065L90.0893 85.5165ZM38.6893 26.3265L34.8993 27.3365C34.5793 27.4265 34.2493 27.2265 34.1593 26.9065C34.0693 26.5865 34.2693 26.2565 34.5893 26.1665L38.3793 25.1565C38.6993 25.0665 39.0293 25.2665 39.1193 25.5865C39.2093 25.9065 39.0093 26.2365 38.6893 26.3265ZM65.6893 19.3265L61.8993 20.3365C61.5793 20.4265 61.2493 20.2265 61.1593 19.9065C61.0693 19.5865 61.2693 19.2565 61.5893 19.1665L65.3793 18.1565C65.6993 18.0665 66.0293 18.2665 66.1193 18.5865C66.2093 18.9065 66.0093 19.2365 65.6893 19.3265Z\"\n                    fill=\"white\"\n                />\n                <path\n                    d=\"M55.1766 48.5674L51.606 46.5059C51.2659 46.3096 50.9001 46.2639 50.5086 46.3688C50.1181 46.4734 49.8247 46.6958 49.6283 47.0358C49.4155 47.4045 49.3616 47.7846 49.4665 48.1761C49.5711 48.5666 49.8047 48.857 50.1673 49.0473L54.9279 51.7972C55.2737 52.015 55.6424 52.0715 56.0339 51.9665C56.4244 51.8619 56.7262 51.6258 56.9393 51.2583L62.4123 41.7787C62.6086 41.4387 62.6559 41.0788 62.5541 40.699C62.4521 40.3181 62.231 40.0296 61.891 39.8332C61.5509 39.6369 61.1851 39.5912 60.7935 39.6961C60.403 39.8007 60.1096 40.0231 59.9133 40.3631L55.1766 48.5674ZM59.9961 59.3129C58.1413 59.8099 56.3037 59.9251 54.4835 59.6586C52.6632 59.392 50.988 58.817 49.4577 57.9335C47.9274 57.05 46.5918 55.8867 45.4509 54.4435C44.3099 53.0004 43.4909 51.3514 42.9939 49.4965C42.4969 47.6417 42.3817 45.8041 42.6482 43.9838C42.9147 42.1635 43.4897 40.4882 44.3732 38.958C45.2567 37.4277 46.42 36.0921 47.8631 34.9511C49.3063 33.8102 50.9552 32.9912 52.8101 32.4942C54.6649 31.9972 56.5025 31.8819 58.3227 32.1485C60.143 32.415 61.8183 32.99 63.3485 33.8736C64.8788 34.7571 66.2144 35.9204 67.3554 37.3635C68.4963 38.8067 69.3153 40.4557 69.8123 42.3105C70.3093 44.1654 70.4246 46.003 70.158 47.8233C69.8915 49.6435 69.3165 51.3188 68.433 52.8491C67.5495 54.3794 66.3862 55.715 64.9431 56.8559C63.5 57.9969 61.851 58.8159 59.9961 59.3129Z\"\n                    className=\"validation-icon\"\n                />\n                <path\n                    d=\"M76.5801 68.8601C77.3501 68.6501 77.8201 67.8501 77.6101 67.0801C77.4001 66.3101 76.6001 65.8401 75.8301 66.0501L49.0801 73.1601C48.3101 73.3701 47.8401 74.1701 48.0501 74.9401C48.2601 75.7101 49.0601 76.1801 49.8301 75.9701L76.5801 68.8601Z\"\n                    className=\"accent-light\"\n                />\n                <path\n                    d=\"M78.5098 76.1402C79.2798 75.9302 79.7498 75.1302 79.5398 74.3602C79.3298 73.5902 78.5298 73.1202 77.7598 73.3302L51.0098 80.4402C50.2398 80.6502 49.7698 81.4502 49.9798 82.2202C50.1898 82.9902 50.9898 83.4602 51.7598 83.2502L78.5098 76.1402Z\"\n                    className=\"accent-light\"\n                />\n                <path\n                    d=\"M81.6702 82.3401C81.4602 81.5701 80.6602 81.1001 79.8902 81.3101L53.1402 88.4201C52.3702 88.6301 51.9002 89.4301 52.1102 90.2001C52.3202 90.9701 53.1202 91.4401 53.8902 91.2301L80.6402 84.1201C81.4102 83.9101 81.8802 83.1101 81.6702 82.3401Z\"\n                    className=\"accent-light\"\n                />\n            </g>\n            <defs>\n                <clipPath id=\"clip0_phone_icon\">\n                    <rect width=\"120\" height=\"120\" fill=\"white\" />\n                </clipPath>\n            </defs>\n        </StyledSvg>\n    );\n};\n"],"names":["StyledSvg","styled","svg","V3_Colour","PhoneThumbnail","width","height","className","_jsxs","viewBox","fill","xmlns","children","clipPath","_jsx","cx","cy","r","d","id"],"mappings":"uIAUA,MAAMA,EAAYC,EAAOC,GAAG;;gBAEZC,EAAU;;;;gBAIVA,EAAU;;;;gBAIVA,EAAU;;;;gBAIVA,EAAU;;EAIbC,EAAiB,EAC1BC,QAAQ,IACRC,SAAS,IACTC,eAGIC,EAACR,EAAS,CACNK,MAAOA,EACPC,OAAQA,EACRG,QAAQ,cACRC,KAAK,OACLC,MAAM,6BACNJ,UAAWA,EAASK,SAAA,CAEpBJ,EAAA,IAAA,CAAGK,SAAS,yBAAwBD,SAAA,CAChCE,EAAA,SAAA,CACIC,GAAG,KACHC,GAAG,OACHC,EAAE,KACFV,UAAU,sBAEdO,EAAA,OAAA,CACII,EAAE,8XACFX,UAAU,iBAEdO,EAAA,OAAA,CACII,EAAE,spCACFR,KAAK,UAETI,EAAA,OAAA,CACII,EAAE,0yCACFX,UAAU,oBAEdO,UACII,EAAE,oPACFX,UAAU,iBAEdO,EAAA,OAAA,CACII,EAAE,oPACFX,UAAU,iBAEdO,EAAA,OAAA,CACII,EAAE,oPACFX,UAAU,oBAGlBO,EAAA,OAAA,CAAAF,SACIE,EAAA,WAAA,CAAUK,GAAG,mBAAkBP,SAC3BE,EAAA,OAAA,CAAMT,MAAM,MAAMC,OAAO,MAAMI,KAAK"}
+{"version":3,"file":"phone-thumbnail.js","sources":["../../../src/otp-verification/thumbnail/phone-thumbnail.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport * as styles from \"./thumbnail.styles\";\n\ninterface PhoneThumbnailProps {\n    className?: string;\n}\n\nexport const PhoneThumbnail = ({ className }: PhoneThumbnailProps) => {\n    return (\n        <svg\n            viewBox=\"0 0 120 120\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            className={clsx(styles.thumbnail, styles.phoneThumbnail, className)}\n        >\n            <g clipPath=\"url(#clip0_phone_icon)\">\n                <circle\n                    cx=\"60\"\n                    cy=\"60.5\"\n                    r=\"60\"\n                    className=\"background-circle\"\n                />\n                <path\n                    d=\"M85.7091 99.047L56.9789 106.705C51.6167 108.134 46.0606 104.916 44.6318 99.5553L27.1393 33.9319C25.9969 29.6444 27.8244 25.2332 31.3437 22.9073C32.2263 22.3231 33.2151 21.8712 34.2899 21.5845L34.4374 21.5449L40.7667 19.8586L56.4455 15.6787L56.4545 15.6763L63.02 13.9267C68.3822 12.497 73.9383 15.715 75.3671 21.0761L92.8596 86.6995C94.2888 92.0619 91.0712 97.6172 85.7091 99.047Z\"\n                    className=\"primary-path\"\n                />\n                <path\n                    d=\"M90.0893 85.5165L72.9593 22.8765C72.8393 22.4365 72.6893 22.0165 72.5093 21.6165C72.0993 20.6965 71.5393 19.8765 70.8693 19.1765C70.2493 18.5365 69.5393 17.9865 68.7593 17.5665C66.8993 16.5465 64.6593 16.2165 62.4593 16.8065L58.8593 17.8765C58.8593 17.8765 58.8693 17.9065 58.8793 17.9265C59.2793 19.4065 58.8293 20.8265 57.8893 21.0665L42.2093 25.2365C41.3193 25.4765 40.3093 24.5765 39.8593 23.2265L36.0693 24.2365C31.5193 25.4465 28.7793 30.1665 29.9993 34.7265L30.3093 35.8765L32.1393 42.7565L35.8493 56.6765L36.8693 60.5165L38.1493 65.3165L47.0793 97.5165C48.2893 102.067 53.0093 104.807 57.5693 103.587L83.9993 95.9965C88.5493 94.7865 91.2893 90.0665 90.0693 85.5065L90.0893 85.5165ZM38.6893 26.3265L34.8993 27.3365C34.5793 27.4265 34.2493 27.2265 34.1593 26.9065C34.0693 26.5865 34.2693 26.2565 34.5893 26.1665L38.3793 25.1565C38.6993 25.0665 39.0293 25.2665 39.1193 25.5865C39.2093 25.9065 39.0093 26.2365 38.6893 26.3265ZM65.6893 19.3265L61.8993 20.3365C61.5793 20.4265 61.2493 20.2265 61.1593 19.9065C61.0693 19.5865 61.2693 19.2565 61.5893 19.1665L65.3793 18.1565C65.6993 18.0665 66.0293 18.2665 66.1193 18.5865C66.2093 18.9065 66.0093 19.2365 65.6893 19.3265Z\"\n                    fill=\"white\"\n                />\n                <path\n                    d=\"M55.1766 48.5674L51.606 46.5059C51.2659 46.3096 50.9001 46.2639 50.5086 46.3688C50.1181 46.4734 49.8247 46.6958 49.6283 47.0358C49.4155 47.4045 49.3616 47.7846 49.4665 48.1761C49.5711 48.5666 49.8047 48.857 50.1673 49.0473L54.9279 51.7972C55.2737 52.015 55.6424 52.0715 56.0339 51.9665C56.4244 51.8619 56.7262 51.6258 56.9393 51.2583L62.4123 41.7787C62.6086 41.4387 62.6559 41.0788 62.5541 40.699C62.4521 40.3181 62.231 40.0296 61.891 39.8332C61.5509 39.6369 61.1851 39.5912 60.7935 39.6961C60.403 39.8007 60.1096 40.0231 59.9133 40.3631L55.1766 48.5674ZM59.9961 59.3129C58.1413 59.8099 56.3037 59.9251 54.4835 59.6586C52.6632 59.392 50.988 58.817 49.4577 57.9335C47.9274 57.05 46.5918 55.8867 45.4509 54.4435C44.3099 53.0004 43.4909 51.3514 42.9939 49.4965C42.4969 47.6417 42.3817 45.8041 42.6482 43.9838C42.9147 42.1635 43.4897 40.4882 44.3732 38.958C45.2567 37.4277 46.42 36.0921 47.8631 34.9511C49.3063 33.8102 50.9552 32.9912 52.8101 32.4942C54.6649 31.9972 56.5025 31.8819 58.3227 32.1485C60.143 32.415 61.8183 32.99 63.3485 33.8736C64.8788 34.7571 66.2144 35.9204 67.3554 37.3635C68.4963 38.8067 69.3153 40.4557 69.8123 42.3105C70.3093 44.1654 70.4246 46.003 70.158 47.8233C69.8915 49.6435 69.3165 51.3188 68.433 52.8491C67.5495 54.3794 66.3862 55.715 64.9431 56.8559C63.5 57.9969 61.851 58.8159 59.9961 59.3129Z\"\n                    className=\"validation-icon\"\n                />\n                <path\n                    d=\"M76.5801 68.8601C77.3501 68.6501 77.8201 67.8501 77.6101 67.0801C77.4001 66.3101 76.6001 65.8401 75.8301 66.0501L49.0801 73.1601C48.3101 73.3701 47.8401 74.1701 48.0501 74.9401C48.2601 75.7101 49.0601 76.1801 49.8301 75.9701L76.5801 68.8601Z\"\n                    className=\"accent-light\"\n                />\n                <path\n                    d=\"M78.5098 76.1402C79.2798 75.9302 79.7498 75.1302 79.5398 74.3602C79.3298 73.5902 78.5298 73.1202 77.7598 73.3302L51.0098 80.4402C50.2398 80.6502 49.7698 81.4502 49.9798 82.2202C50.1898 82.9902 50.9898 83.4602 51.7598 83.2502L78.5098 76.1402Z\"\n                    className=\"accent-light\"\n                />\n                <path\n                    d=\"M81.6702 82.3401C81.4602 81.5701 80.6602 81.1001 79.8902 81.3101L53.1402 88.4201C52.3702 88.6301 51.9002 89.4301 52.1102 90.2001C52.3202 90.9701 53.1202 91.4401 53.8902 91.2301L80.6402 84.1201C81.4102 83.9101 81.8802 83.1101 81.6702 82.3401Z\"\n                    className=\"accent-light\"\n                />\n            </g>\n            <defs>\n                <clipPath id=\"clip0_phone_icon\">\n                    <rect width=\"120\" height=\"120\" fill=\"white\" />\n                </clipPath>\n            </defs>\n        </svg>\n    );\n};\n"],"names":["PhoneThumbnail","className","_jsxs","viewBox","fill","xmlns","clsx","styles.thumbnail","styles.phoneThumbnail","children","clipPath","_jsx","cx","cy","r","d","id","width","height"],"mappings":"kJAQaA,EAAiB,EAAGC,eAEzBC,EAAA,MAAA,CACIC,QAAQ,cACRC,KAAK,OACLC,MAAM,6BACNJ,UAAWK,EAAKC,EAAkBC,EAAuBP,GAAUQ,SAAA,CAEnEP,EAAA,IAAA,CAAGQ,SAAS,yBAAwBD,SAAA,CAChCE,EAAA,SAAA,CACIC,GAAG,KACHC,GAAG,OACHC,EAAE,KACFb,UAAU,sBAEdU,EAAA,OAAA,CACII,EAAE,8XACFd,UAAU,iBAEdU,EAAA,OAAA,CACII,EAAE,spCACFX,KAAK,UAETO,EAAA,OAAA,CACII,EAAE,0yCACFd,UAAU,oBAEdU,UACII,EAAE,oPACFd,UAAU,iBAEdU,EAAA,OAAA,CACII,EAAE,oPACFd,UAAU,iBAEdU,EAAA,OAAA,CACII,EAAE,oPACFd,UAAU,oBAGlBU,EAAA,OAAA,CAAAF,SACIE,EAAA,WAAA,CAAUK,GAAG,mBAAkBP,SAC3BE,EAAA,OAAA,CAAMM,MAAM,MAAMC,OAAO,MAAMd,KAAK"}

package/otp-verification/thumbnail/thumbnail.styles.d.ts

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

package/otp-verification/thumbnail/thumbnail.styles.js

@@ -0,0 +1,2 @@
+import"./thumbnail.styles_shqylh.css";const t="tzhqtbi",i="p19527g1",s="e1m2pw4s";export{s as emailThumbnail,i as phoneThumbnail,t as thumbnail};
+//# sourceMappingURL=thumbnail.styles.js.map

package/otp-verification/thumbnail/thumbnail.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"thumbnail.styles.js","sources":["../../../src/otp-verification/thumbnail/thumbnail.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, MediaQuery } from \"../../theme\";\n\nexport const thumbnail = css`\n    width: 120px;\n    height: 120px;\n\n    ${MediaQuery.MaxWidth.sm} {\n        width: 64px;\n        height: 64px;\n    }\n`;\n\nexport const phoneThumbnail = css`\n    .background-circle {\n        fill: ${Colour[\"bg-stronger\"]};\n    }\n\n    .primary-path {\n        fill: ${Colour[\"icon-primary\"]};\n    }\n\n    .validation-icon {\n        fill: ${Colour[\"bg-available\"]};\n    }\n\n    .accent-light {\n        fill: ${Colour[\"bg-selected-stronger\"]};\n    }\n`;\n\nexport const emailThumbnail = css`\n    .background-circle {\n        fill: ${Colour[\"bg-stronger\"]};\n    }\n\n    .primary-path {\n        fill: ${Colour[\"icon-primary\"]};\n    }\n\n    .validation-icon {\n        fill: ${Colour[\"bg-available\"]};\n    }\n\n    .accent-light-3 {\n        fill: ${Colour[\"icon-primary-subtle\"]};\n    }\n\n    .accent-light-4 {\n        fill: ${Colour[\"icon-primary-subtlest\"]};\n    }\n`;\n"],"names":["thumbnail","phoneThumbnail","emailThumbnail"],"mappings":"gFAIO,MAAMA,EAAS,UAUTC,EAAc,WAkBdC,EAAc"}

package/otp-verification/thumbnail/thumbnail.styles_shqylh.css

@@ -0,0 +1,3 @@
+@layer fds{.tzhqtbi{width:120px;height:120px;}:where(body.fds-breakpoint-sm-max) .tzhqtbi{width:64px;height:64px;}
+.p19527g1 .background-circle{fill:var(--fds-colour-bg-stronger);}.p19527g1 .primary-path{fill:var(--fds-colour-icon-primary);}.p19527g1 .validation-icon{fill:var(--fds-colour-bg-available);}.p19527g1 .accent-light{fill:var(--fds-colour-bg-selected-stronger);}
+.e1m2pw4s .background-circle{fill:var(--fds-colour-bg-stronger);}.e1m2pw4s .primary-path{fill:var(--fds-colour-icon-primary);}.e1m2pw4s .validation-icon{fill:var(--fds-colour-bg-available);}.e1m2pw4s .accent-light-3{fill:var(--fds-colour-icon-primary-subtle);}.e1m2pw4s .accent-light-4{fill:var(--fds-colour-icon-primary-subtlest);}}

package/otp-verification/verification-section.js

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as i}from"react/jsx-runtime";import{FormErrorMessage as t}from"../form/form-label.js";import{InputGroup as r}from"../input-group/input-group.js";import{concatIds as o}from"../shared/accessibility/index.js";import"../theme/theme-provider/index.js";import"react";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as d}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{useMaxWidthMediaQuery as n}from"../theme/utils/use-media-query.js";import{Typography as a}from"../typography/index.js";import{EmailThumbnail as l}from"./thumbnail/email-thumbnail.js";import{PhoneThumbnail as s}from"./thumbnail/phone-thumbnail.js";import{VerificationSectionWrapper as m,SectionContainer as p,VerifyInputWrapper as u,VerifyButton as h,ReSendMessage as v}from"./verification-section-styles.js";const y=({id:y,"data-testid":c,type:f,showVerifyOtpThumbnail:j=!1,verifyOtpTitle:b,verifyOtpMessage:g,otpCode:$,setOtpCode:x,isVerifyLoading:O,countdown:w,onVerifyOtp:T,verifyOtpError:k,otpPrefix:C,otpSeparator:V})=>{const q=n("sm")?64:120,M=d(),P=`${M}-title`,B=`${M}-message`,D=`${M}-verify-input-addon`,E=`${M}-verify-error`;return e(m,{id:y,"data-testid":c,role:"group",children:[j?i("div",{"aria-hidden":!0,children:i("email"===f?l:s,{width:q,height:q})}):null,e(p,{children:[e("div",{children:[i(a.BodyMD,{weight:"semibold",id:P,"data-testid":c?`${c}-title`:void 0,children:b}),i(a.BodyMD,{weight:"regular",id:B,"data-testid":c?`${c}-message`:void 0,children:g})]}),e("div",{children:[e(u,{children:[i(r,{id:y?`${y}-verify-input`:void 0,"data-testid":c?`${c}-verify-input`:void 0,value:$,onChange:e=>null==x?void 0:x(e.target.value),placeholder:"Enter OTP",addon:{type:"label",attributes:{value:`${null!=C?C:""}${null!=V?V:""}`}},type:"number",error:!!k,"aria-labelledby":P,"aria-describedby":o(B,D,k?E:void 0),"aria-invalid":!!k,"aria-required":!0}),i(h,{id:y?`${y}-verify-button`:void 0,type:"button","data-testid":c?`${c}-verify-button`:void 0,onClick:T,loading:O,styleType:"light",disabled:!$||0===$.length,children:!O&&"Verify"})]}),k&&i(t,{id:E,"data-testid":c?`${c}-verify-error`:void 0,role:"alert",children:k})]}),w.isRunning&&e(v,{id:y?`${y}-countdown`:void 0,"data-testid":c?`${c}-countdown`:void 0,children:["Resend OTP in ",w.formatTime()]})]})]})};export{y as VerificationSection};
+import{jsxs as i,jsx as e}from"react/jsx-runtime";import{Button as t}from"../button/button.js";import{FormErrorMessage as r}from"../form/form-label.js";import{InputGroup as o}from"../input-group/input-group.js";import{concatIds as d}from"../shared/accessibility/index.js";import{Typography as a}from"../typography/index.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"react";import{useId as n}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{EmailThumbnail as l}from"./thumbnail/email-thumbnail.js";import{PhoneThumbnail as s}from"./thumbnail/phone-thumbnail.js";import{verificationSectionWrapper as m,sectionContainer as p,verifyInputWrapper as u,verifyButton as c,resendMessage as v}from"./verification-section.styles.js";const y=({id:y,"data-testid":f,type:h,showVerifyOtpThumbnail:b=!1,verifyOtpTitle:g,verifyOtpMessage:j,otpCode:$,setOtpCode:O,isVerifyLoading:w,countdown:x,onVerifyOtp:T,verifyOtpError:N,otpPrefix:C,otpSeparator:M})=>{const V=n(),B=`${V}-title`,D=`${V}-message`,P=`${V}-verify-input-addon`,E=`${V}-verify-error`;return i("div",{id:y,"data-testid":f,role:"group",className:m,children:[b?e("div",{"aria-hidden":!0,children:e("email"===h?l:s,{})}):null,i("div",{className:p,children:[i("div",{children:[e(a.BodyMD,{weight:"semibold",id:B,"data-testid":f?`${f}-title`:void 0,children:g}),e(a.BodyMD,{weight:"regular",id:D,"data-testid":f?`${f}-message`:void 0,children:j})]}),i("div",{children:[i("div",{className:u,children:[e(o,{id:y?`${y}-verify-input`:void 0,"data-testid":f?`${f}-verify-input`:void 0,value:$,onChange:i=>null==O?void 0:O(i.target.value),placeholder:"Enter OTP",addon:{type:"label",attributes:{value:`${null!=C?C:""}${null!=M?M:""}`}},type:"number",error:!!N,"aria-labelledby":B,"aria-describedby":d(D,P,N?E:void 0),"aria-invalid":!!N,"aria-required":!0}),e(t,{id:y?`${y}-verify-button`:void 0,type:"button","data-testid":f?`${f}-verify-button`:void 0,onClick:T,loading:w,styleType:"light",disabled:!$||0===$.length,className:c,children:!w&&"Verify"})]}),N&&e(r,{id:E,"data-testid":f?`${f}-verify-error`:void 0,role:"alert",children:N})]}),x.isRunning&&i(a.BodyMD,{id:y?`${y}-countdown`:void 0,"data-testid":f?`${f}-countdown`:void 0,className:v,children:["Resend OTP in ",x.formatTime()]})]})]})};export{y as VerificationSection};
 //# sourceMappingURL=verification-section.js.map

package/otp-verification/verification-section.js.map

@@ -1 +1 @@
-{"version":3,"file":"verification-section.js","sources":["../../src/otp-verification/verification-section.tsx"],"sourcesContent":["import { FormErrorMessage } from \"../form/form-label\";\nimport { InputGroup } from \"../input-group\";\nimport { concatIds } from \"../shared/accessibility\";\nimport { useMaxWidthMediaQuery } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport type { VerificationSectionProps } from \"./internal-types\";\nimport { EmailThumbnail, PhoneThumbnail } from \"./thumbnail\";\nimport {\n    ReSendMessage,\n    SectionContainer,\n    VerificationSectionWrapper,\n    VerifyButton,\n    VerifyInputWrapper,\n} from \"./verification-section-styles\";\n\nexport const VerificationSection = ({\n    id,\n    \"data-testid\": dataTestId,\n    type,\n    showVerifyOtpThumbnail = false,\n    verifyOtpTitle,\n    verifyOtpMessage,\n    otpCode,\n    setOtpCode,\n    isVerifyLoading,\n    countdown,\n    onVerifyOtp,\n    verifyOtpError,\n    otpPrefix,\n    otpSeparator,\n}: VerificationSectionProps) => {\n    const isMobile = useMaxWidthMediaQuery(\"sm\");\n    const thumbnailSize = isMobile ? 64 : 120;\n    const internalId = useId();\n\n    const titleId = `${internalId}-title`;\n    const messageId = `${internalId}-message`;\n    const otpAddonId = `${internalId}-verify-input-addon`;\n    const verifyErrorId = `${internalId}-verify-error`;\n\n    const renderThumbnail = () => {\n        if (!showVerifyOtpThumbnail) return null;\n\n        return (\n            <div aria-hidden>\n                {type === \"email\" ? (\n                    <EmailThumbnail\n                        width={thumbnailSize}\n                        height={thumbnailSize}\n                    />\n                ) : (\n                    <PhoneThumbnail\n                        width={thumbnailSize}\n                        height={thumbnailSize}\n                    />\n                )}\n            </div>\n        );\n    };\n\n    return (\n        <VerificationSectionWrapper\n            id={id}\n            data-testid={dataTestId}\n            role=\"group\"\n        >\n            {renderThumbnail()}\n            <SectionContainer>\n                <div>\n                    <Typography.BodyMD\n                        weight=\"semibold\"\n                        id={titleId}\n                        data-testid={\n                            dataTestId ? `${dataTestId}-title` : undefined\n                        }\n                    >\n                        {verifyOtpTitle}\n                    </Typography.BodyMD>\n                    <Typography.BodyMD\n                        weight=\"regular\"\n                        id={messageId}\n                        data-testid={\n                            dataTestId ? `${dataTestId}-message` : undefined\n                        }\n                    >\n                        {verifyOtpMessage}\n                    </Typography.BodyMD>\n                </div>\n                <div>\n                    <VerifyInputWrapper>\n                        <InputGroup\n                            id={id ? `${id}-verify-input` : undefined}\n                            data-testid={\n                                dataTestId\n                                    ? `${dataTestId}-verify-input`\n                                    : undefined\n                            }\n                            value={otpCode}\n                            onChange={(e) => setOtpCode?.(e.target.value)}\n                            placeholder=\"Enter OTP\"\n                            addon={{\n                                type: \"label\",\n                                attributes: {\n                                    value: `${otpPrefix ?? \"\"}${\n                                        otpSeparator ?? \"\"\n                                    }`,\n                                },\n                            }}\n                            type=\"number\"\n                            error={!!verifyOtpError}\n                            aria-labelledby={titleId}\n                            aria-describedby={concatIds(\n                                messageId,\n                                otpAddonId,\n                                verifyOtpError ? verifyErrorId : undefined\n                            )}\n                            aria-invalid={!!verifyOtpError}\n                            aria-required={true}\n                        />\n                        <VerifyButton\n                            id={id ? `${id}-verify-button` : undefined}\n                            type=\"button\"\n                            data-testid={\n                                dataTestId\n                                    ? `${dataTestId}-verify-button`\n                                    : undefined\n                            }\n                            onClick={onVerifyOtp}\n                            loading={isVerifyLoading}\n                            styleType=\"light\"\n                            disabled={!otpCode || otpCode.length === 0}\n                        >\n                            {!isVerifyLoading && \"Verify\"}\n                        </VerifyButton>\n                    </VerifyInputWrapper>\n                    {verifyOtpError && (\n                        <FormErrorMessage\n                            id={verifyErrorId}\n                            data-testid={\n                                dataTestId\n                                    ? `${dataTestId}-verify-error`\n                                    : undefined\n                            }\n                            role=\"alert\"\n                        >\n                            {verifyOtpError}\n                        </FormErrorMessage>\n                    )}\n                </div>\n                {countdown.isRunning && (\n                    <ReSendMessage\n                        id={id ? `${id}-countdown` : undefined}\n                        data-testid={\n                            dataTestId ? `${dataTestId}-countdown` : undefined\n                        }\n                    >\n                        Resend OTP in {countdown.formatTime()}\n                    </ReSendMessage>\n                )}\n            </SectionContainer>\n        </VerificationSectionWrapper>\n    );\n};\n"],"names":["VerificationSection","id","dataTestId","type","showVerifyOtpThumbnail","verifyOtpTitle","verifyOtpMessage","otpCode","setOtpCode","isVerifyLoading","countdown","onVerifyOtp","verifyOtpError","otpPrefix","otpSeparator","thumbnailSize","useMaxWidthMediaQuery","internalId","useId","titleId","messageId","otpAddonId","verifyErrorId","_jsxs","VerificationSectionWrapper","role","_jsx","children","EmailThumbnail","PhoneThumbnail","width","height","SectionContainer","Typography","BodyMD","weight","undefined","VerifyInputWrapper","InputGroup","value","onChange","e","target","placeholder","addon","attributes","error","concatIds","VerifyButton","onClick","loading","styleType","disabled","length","FormErrorMessage","isRunning","ReSendMessage","formatTime"],"mappings":"ojCAgBO,MAAMA,EAAsB,EAC/BC,KACA,cAAeC,EACfC,OACAC,0BAAyB,EACzBC,iBACAC,mBACAC,UACAC,aACAC,kBACAC,YACAC,cACAC,iBACAC,YACAC,mBAEA,MACMC,EADWC,EAAsB,MACN,GAAK,IAChCC,EAAaC,IAEbC,EAAU,GAAGF,UACbG,EAAY,GAAGH,YACfI,EAAa,GAAGJ,uBAChBK,EAAgB,GAAGL,iBAsBzB,OACIM,EAACC,EAA0B,CACvBvB,GAAIA,gBACSC,EACbuB,KAAK,kBAvBJrB,EAGDsB,EAAA,MAAA,CAAA,eAAA,EAAAC,SAEQD,EADM,UAATvB,EACIyB,EAKAC,EALc,CACXC,MAAOf,EACPgB,OAAQhB,MAPY,KA0BhCQ,EAACS,EAAgB,CAAAL,SAAA,CACbJ,EAAA,MAAA,CAAAI,SAAA,CACID,EAACO,EAAWC,OAAM,CACdC,OAAO,WACPlC,GAAIkB,EAAO,cAEPjB,EAAa,GAAGA,eAAqBkC,EAAST,SAGjDtB,IAELqB,EAACO,EAAWC,OAAM,CACdC,OAAO,UACPlC,GAAImB,EAAS,cAETlB,EAAa,GAAGA,iBAAuBkC,EAAST,SAGnDrB,OAGTiB,mBACIA,EAACc,aACGX,EAACY,EAAU,CACPrC,GAAIA,EAAK,GAAGA,sBAAoBmC,EAAS,cAErClC,EACM,GAAGA,sBACHkC,EAEVG,MAAOhC,EACPiC,SAAWC,GAAMjC,aAAU,EAAVA,EAAaiC,EAAEC,OAAOH,OACvCI,YAAY,YACZC,MAAO,CACHzC,KAAM,QACN0C,WAAY,CACRN,MAAO,GAAG1B,QAAAA,EAAa,KACnBC,QAAAA,EAAgB,OAI5BX,KAAK,SACL2C,QAASlC,EAAc,kBACNO,EAAO,mBACN4B,EACd3B,EACAC,EACAT,EAAiBU,OAAgBc,oBAErBxB,EAAc,iBACf,IAEnBc,EAACsB,EAAY,CACT/C,GAAIA,EAAK,GAAGA,uBAAqBmC,EACjCjC,KAAK,SAAQ,cAETD,EACM,GAAGA,uBACHkC,EAEVa,QAAStC,EACTuC,QAASzC,EACT0C,UAAU,QACVC,UAAW7C,GAA8B,IAAnBA,EAAQ8C,OAAY1B,UAExClB,GAAmB,cAG5BG,GACGc,EAAC4B,EAAgB,CACbrD,GAAIqB,gBAEApB,EACM,GAAGA,sBACHkC,EAEVX,KAAK,QAAOE,SAEXf,OAIZF,EAAU6C,WACPhC,EAACiC,EAAa,CACVvD,GAAIA,EAAK,GAAGA,mBAAiBmC,EAAS,cAElClC,EAAa,GAAGA,mBAAyBkC,EAAST,SAAA,CAAA,iBAGvCjB,EAAU+C,qBAIZ"}
+{"version":3,"file":"verification-section.js","sources":["../../src/otp-verification/verification-section.tsx"],"sourcesContent":["import { Button } from \"../button\";\nimport { FormErrorMessage } from \"../form/form-label\";\nimport { InputGroup } from \"../input-group\";\nimport { concatIds } from \"../shared/accessibility\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport type { VerificationSectionProps } from \"./internal-types\";\nimport { EmailThumbnail, PhoneThumbnail } from \"./thumbnail\";\nimport * as styles from \"./verification-section.styles\";\n\nexport const VerificationSection = ({\n    id,\n    \"data-testid\": dataTestId,\n    type,\n    showVerifyOtpThumbnail = false,\n    verifyOtpTitle,\n    verifyOtpMessage,\n    otpCode,\n    setOtpCode,\n    isVerifyLoading,\n    countdown,\n    onVerifyOtp,\n    verifyOtpError,\n    otpPrefix,\n    otpSeparator,\n}: VerificationSectionProps) => {\n    const internalId = useId();\n\n    const titleId = `${internalId}-title`;\n    const messageId = `${internalId}-message`;\n    const otpAddonId = `${internalId}-verify-input-addon`;\n    const verifyErrorId = `${internalId}-verify-error`;\n\n    const renderThumbnail = () => {\n        if (!showVerifyOtpThumbnail) return null;\n\n        return (\n            <div aria-hidden>\n                {type === \"email\" ? <EmailThumbnail /> : <PhoneThumbnail />}\n            </div>\n        );\n    };\n\n    return (\n        <div\n            id={id}\n            data-testid={dataTestId}\n            role=\"group\"\n            className={styles.verificationSectionWrapper}\n        >\n            {renderThumbnail()}\n            <div className={styles.sectionContainer}>\n                <div>\n                    <Typography.BodyMD\n                        weight=\"semibold\"\n                        id={titleId}\n                        data-testid={\n                            dataTestId ? `${dataTestId}-title` : undefined\n                        }\n                    >\n                        {verifyOtpTitle}\n                    </Typography.BodyMD>\n                    <Typography.BodyMD\n                        weight=\"regular\"\n                        id={messageId}\n                        data-testid={\n                            dataTestId ? `${dataTestId}-message` : undefined\n                        }\n                    >\n                        {verifyOtpMessage}\n                    </Typography.BodyMD>\n                </div>\n                <div>\n                    <div className={styles.verifyInputWrapper}>\n                        <InputGroup\n                            id={id ? `${id}-verify-input` : undefined}\n                            data-testid={\n                                dataTestId\n                                    ? `${dataTestId}-verify-input`\n                                    : undefined\n                            }\n                            value={otpCode}\n                            onChange={(e) => setOtpCode?.(e.target.value)}\n                            placeholder=\"Enter OTP\"\n                            addon={{\n                                type: \"label\",\n                                attributes: {\n                                    value: `${otpPrefix ?? \"\"}${\n                                        otpSeparator ?? \"\"\n                                    }`,\n                                },\n                            }}\n                            type=\"number\"\n                            error={!!verifyOtpError}\n                            aria-labelledby={titleId}\n                            aria-describedby={concatIds(\n                                messageId,\n                                otpAddonId,\n                                verifyOtpError ? verifyErrorId : undefined\n                            )}\n                            aria-invalid={!!verifyOtpError}\n                            aria-required={true}\n                        />\n                        <Button\n                            id={id ? `${id}-verify-button` : undefined}\n                            type=\"button\"\n                            data-testid={\n                                dataTestId\n                                    ? `${dataTestId}-verify-button`\n                                    : undefined\n                            }\n                            onClick={onVerifyOtp}\n                            loading={isVerifyLoading}\n                            styleType=\"light\"\n                            disabled={!otpCode || otpCode.length === 0}\n                            className={styles.verifyButton}\n                        >\n                            {!isVerifyLoading && \"Verify\"}\n                        </Button>\n                    </div>\n                    {verifyOtpError && (\n                        <FormErrorMessage\n                            id={verifyErrorId}\n                            data-testid={\n                                dataTestId\n                                    ? `${dataTestId}-verify-error`\n                                    : undefined\n                            }\n                            role=\"alert\"\n                        >\n                            {verifyOtpError}\n                        </FormErrorMessage>\n                    )}\n                </div>\n                {countdown.isRunning && (\n                    <Typography.BodyMD\n                        id={id ? `${id}-countdown` : undefined}\n                        data-testid={\n                            dataTestId ? `${dataTestId}-countdown` : undefined\n                        }\n                        className={styles.resendMessage}\n                    >\n                        Resend OTP in {countdown.formatTime()}\n                    </Typography.BodyMD>\n                )}\n            </div>\n        </div>\n    );\n};\n"],"names":["VerificationSection","id","dataTestId","type","showVerifyOtpThumbnail","verifyOtpTitle","verifyOtpMessage","otpCode","setOtpCode","isVerifyLoading","countdown","onVerifyOtp","verifyOtpError","otpPrefix","otpSeparator","internalId","useId","titleId","messageId","otpAddonId","verifyErrorId","_jsxs","role","className","styles.verificationSectionWrapper","children","_jsx","EmailThumbnail","PhoneThumbnail","styles.sectionContainer","Typography","BodyMD","weight","undefined","styles.verifyInputWrapper","InputGroup","value","onChange","e","target","placeholder","addon","attributes","error","concatIds","Button","onClick","loading","styleType","disabled","length","styles.verifyButton","FormErrorMessage","isRunning","styles.resendMessage","formatTime"],"mappings":"wzBAUO,MAAMA,EAAsB,EAC/BC,KACA,cAAeC,EACfC,OACAC,0BAAyB,EACzBC,iBACAC,mBACAC,UACAC,aACAC,kBACAC,YACAC,cACAC,iBACAC,YACAC,mBAEA,MAAMC,EAAaC,IAEbC,EAAU,GAAGF,UACbG,EAAY,GAAGH,YACfI,EAAa,GAAGJ,uBAChBK,EAAgB,GAAGL,iBAYzB,OACIM,EAAA,MAAA,CACIpB,GAAIA,gBACSC,EACboB,KAAK,QACLC,UAAWC,EAAiCC,SAAA,CAd3CrB,EAGDsB,EAAA,MAAA,CAAA,eAAA,EAAAD,SACwBC,EAAV,UAATvB,EAAoBwB,EAAqBC,EAAP,CAAA,KAJP,KAiBhCP,EAAA,MAAA,CAAKE,UAAWM,EAAuBJ,SAAA,CACnCJ,EAAA,MAAA,CAAAI,SAAA,CACIC,EAACI,EAAWC,QACRC,OAAO,WACP/B,GAAIgB,EAAO,cAEPf,EAAa,GAAGA,eAAqB+B,EAASR,SAGjDpB,IAELqB,EAACI,EAAWC,OAAM,CACdC,OAAO,UACP/B,GAAIiB,gBAEAhB,EAAa,GAAGA,iBAAuB+B,EAASR,SAGnDnB,OAGTe,EAAA,MAAA,CAAAI,SAAA,CACIJ,EAAA,MAAA,CAAKE,UAAWW,EAAyBT,SAAA,CACrCC,EAACS,EAAU,CACPlC,GAAIA,EAAK,GAAGA,sBAAoBgC,EAAS,cAErC/B,EACM,GAAGA,sBACH+B,EAEVG,MAAO7B,EACP8B,SAAWC,GAAM9B,aAAU,EAAVA,EAAa8B,EAAEC,OAAOH,OACvCI,YAAY,YACZC,MAAO,CACHtC,KAAM,QACNuC,WAAY,CACRN,MAAO,GAAGvB,QAAAA,EAAa,KACnBC,QAAAA,EAAgB,OAI5BX,KAAK,SACLwC,QAAS/B,EAAc,kBACNK,EAAO,mBACN2B,EACd1B,EACAC,EACAP,EAAiBQ,OAAgBa,oBAErBrB,EAAc,iBACf,IAEnBc,EAACmB,EAAM,CACH5C,GAAIA,EAAK,GAAGA,uBAAqBgC,EACjC9B,KAAK,SAAQ,cAETD,EACM,GAAGA,uBACH+B,EAEVa,QAASnC,EACToC,QAAStC,EACTuC,UAAU,QACVC,UAAW1C,GAA8B,IAAnBA,EAAQ2C,OAC9B3B,UAAW4B,EAAmB1B,UAE5BhB,GAAmB,cAG5BG,GACGc,EAAC0B,GACGnD,GAAImB,EAAa,cAEblB,EACM,GAAGA,sBACH+B,EAEVX,KAAK,QAAOG,SAEXb,OAIZF,EAAU2C,WACPhC,EAACS,EAAWC,OAAM,CACd9B,GAAIA,EAAK,GAAGA,mBAAiBgC,EAAS,cAElC/B,EAAa,GAAGA,mBAAyB+B,EAE7CV,UAAW+B,EAAoB7B,SAAA,CAAA,iBAEhBf,EAAU6C,qBAInC"}

package/otp-verification/verification-section.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const verificationSectionWrapper: import("@linaria/core").LinariaClassName;
+export declare const sectionContainer: import("@linaria/core").LinariaClassName;
+export declare const resendMessage: import("@linaria/core").LinariaClassName;
+export declare const verifyInputWrapper: import("@linaria/core").LinariaClassName;
+export declare const verifyButton: import("@linaria/core").LinariaClassName;

package/otp-verification/verification-section.styles.js

@@ -0,0 +1,2 @@
+import"./verification-section.styles_x8jj.css";const i="v1j5kvy",o="s1h7j64h",t="rl8lhyn",j="v1ob0u9j",s="v61u1jj";export{t as resendMessage,o as sectionContainer,i as verificationSectionWrapper,s as verifyButton,j as verifyInputWrapper};
+//# sourceMappingURL=verification-section.styles.js.map

package/otp-verification/verification-section.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"verification-section.styles.js","sources":["../../src/otp-verification/verification-section.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, MediaQuery, Spacing } from \"../theme\";\n\nexport const verificationSectionWrapper = css`\n    display: flex;\n    align-items: center;\n    background-color: ${Colour[\"bg-strong\"]};\n    padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-32\"]};\n    gap: ${Spacing[\"spacing-32\"]};\n\n    ${MediaQuery.MaxWidth.sm} {\n        flex-direction: column;\n        align-items: start;\n        gap: ${Spacing[\"spacing-16\"]};\n        padding: ${Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const sectionContainer = css`\n    display: flex;\n    flex-direction: column;\n    gap: ${Spacing[\"spacing-16\"]};\n`;\n\nexport const resendMessage = css`\n    color: ${Colour[\"text-subtlest\"]};\n`;\n\nexport const verifyInputWrapper = css`\n    display: flex;\n    gap: ${Spacing[\"spacing-8\"]};\n    max-width: 472px;\n`;\n\nexport const verifyButton = css`\n    flex-shrink: 0;\n    width: 83px;\n`;\n"],"names":["verificationSectionWrapper","sectionContainer","resendMessage","verifyInputWrapper","verifyButton"],"mappings":"+EAIO,MAAMA,EAA0B,UAe1BC,EAAgB,WAMhBC,EAAa,UAIbC,EAAkB,WAMlBC,EAAY"}

package/otp-verification/verification-section.styles_x8jj.css

@@ -0,0 +1,5 @@
+@layer fds{.v1j5kvy{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;background-color:var(--fds-colour-bg-strong);padding:var(--fds-spacing-16) var(--fds-spacing-32);gap:var(--fds-spacing-32);}:where(body.fds-breakpoint-sm-max) .v1j5kvy{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:start;-webkit-box-align:start;-ms-flex-align:start;align-items:start;gap:var(--fds-spacing-16);padding:var(--fds-spacing-16);}
+.s1h7j64h{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:var(--fds-spacing-16);}
+.rl8lhyn{color:var(--fds-colour-text-subtlest);}
+.v1ob0u9j{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:var(--fds-spacing-8);max-width:472px;}
+.v61u1jj{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;width:83px;}}

package/overlay/overlay.js

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import{FloatingTree as t,useFloatingNodeId as o,FloatingNode as r}from"@floating-ui/react";import n from"clsx";import{useState as l,useRef as s,useEffect as i}from"react";import a from"react-dom";import"../theme/theme-provider/index.js";import{useInheritedThemeScope as d}from"../theme/theme-provider/hooks.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as c}from"../theme/utils/use-apply-styles.js";import"../theme/utils/use-media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as m}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{tokens as u,root as p,rootShow as y,wrapper as v,wrapperShow as g,wrapperHide as b,wrapperStacked as h,wrapperBackgroundBlur as f,wrapperDisableTransition as j}from"./overlay.styles.js";import{useFloatingParent as O}from"./use-floating-context.js";const k=({show:t=!1,rootId:k,onOverlayClick:L,children:w,backgroundOpacity:x,backgroundBlur:C=!0,disableTransition:P=!1,enableOverlayClick:T=!1,zIndex:E,id:D,containerRef:I})=>{const[S,q]=l(null),[W,Y]=l(),z=m(),A=o(),B=s(),F=s(!1),N=s(null),$=s(null),R=D?`lifesg-ds-overlay-root-${D}`:"lifesg-ds-overlay-root",V=null!=E?E:W?99999:99998,{themeProps:G,themeStyle:H}=d(t);O(V),c(N,{[u.root.zIndex]:V}),i((()=>(U(),q(M()),()=>{ee(),Z().length<1&&(K()&&(te("remove"),re()),X("remove"))})),[]),i((()=>{if(t){const e=Q();J(e),_(),K()&&1===Z().length&&(oe(),te("add"));const t=setTimeout((()=>{X("add")}),200);return()=>clearTimeout(t)}{ee(),K()&&Z().length<1&&(te("remove"),re());const e=setTimeout((()=>{Z().length<1&&X("remove")}),200);return()=>clearTimeout(e)}}),[t]),i((()=>{if(t)return document.addEventListener("mousedown",ne,!0),()=>{document.removeEventListener("mousedown",ne,!0)}}),[t]);const J=e=>{B.current=e,Y(e)},K=()=>/(iPad|iPhone|iPod)/g.test(navigator.userAgent),M=()=>document&&k?document.getElementById(k):document?document.body:null,Q=()=>Z().length>0,U=()=>{const e=document.documentElement.clientWidth,t=window.innerWidth-e;document.documentElement.style.setProperty(u.global.scrollbarWidth,`${t}px`)},X=e=>{const t=document.body.classList.contains(u.global.overlayOpenClass);"add"!==e||t?"remove"===e&&t&&document.body.classList.remove(u.global.overlayOpenClass):document.body.classList.add(u.global.overlayOpenClass)},Z=()=>{const e=document.body.dataset.lifesgDsOverlayOrder;return e?e.split(","):[]},_=()=>{const e=Z();document.body.dataset.lifesgDsOverlayOrder=[...e,z].join(",")},ee=()=>{const e=Z();document.body.dataset.lifesgDsOverlayOrder=e.filter((e=>e!==z)).join(",")},te=e=>{if(!K())return;const t=document.body.classList.contains(u.global.overlayScrollLockClass);"add"!==e||t?"remove"===e&&t&&document.body.classList.remove(u.global.overlayScrollLockClass):document.body.classList.add(u.global.overlayScrollLockClass)},oe=()=>{const e=document.body.style,t=e.top?e.top:window.scrollY+"px";document.body.style.setProperty(u.global.scrollY,t)},re=()=>{if(!K())return;const e=document.body.style.getPropertyValue(u.global.scrollY);requestAnimationFrame((()=>{window.scrollTo({top:parseFloat(e)})}))},ne=e=>{var t;const o=null!==(t=null==I?void 0:I.current)&&void 0!==t?t:$.current,r=$.current;if(!o)return void(F.current=!1);const n=e.target,l=r===n,s=o===n,i=o.contains(n);F.current=!l&&(s||i)},le=e=>{var t;const o=null!==(t=null==I?void 0:I.current)&&void 0!==t?t:$.current,r=$.current;if(!o)return void(F.current=!1);const n=e.target,l=r===n,s=o===n,i=o.contains(n);!l&&(s||i)||F.current||!L||!T||(e.preventDefault(),L()),F.current=!1};return S?a.createPortal(e("div",Object.assign({ref:N,id:R,"data-testid":R,className:n(p,t&&y)},G,{style:H,children:w&&e(r,{id:A,children:e("div",{ref:$,"data-testid":"overlay-wrapper",className:n(v,t?g:b,W&&h,C&&f,P&&j),onClick:le,children:w})})})),S):null},L=o=>e(t,{children:e(k,Object.assign({},o))});export{L as Overlay};
+import{jsx as e}from"react/jsx-runtime";import{FloatingTree as t,useFloatingNodeId as o,FloatingNode as r}from"@floating-ui/react";import n from"clsx";import{useState as l,useRef as s,useEffect as i}from"react";import a from"react-dom";import"../theme/theme-provider/index.js";import{useInheritedThemeScope as d}from"../theme/theme-provider/hooks.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as c}from"../theme/utils/use-apply-styles.js";import"../theme/utils/use-media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as m}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{tokens as u,root as p,rootShow as y,wrapper as v,wrapperShow as g,wrapperHide as h,wrapperStacked as b,wrapperBackgroundBlur as f,wrapperDisableTransition as j}from"./overlay.styles.js";import{useFloatingParent as O}from"./use-floating-context.js";const k=({show:t=!1,rootId:k,onOverlayClick:L,children:w,backgroundBlur:x=!0,disableTransition:C=!1,enableOverlayClick:P=!1,zIndex:T,id:E,containerRef:D})=>{const[I,S]=l(null),[q,W]=l(),Y=m(),z=o(),A=s(),B=s(!1),F=s(null),N=s(null),$=E?`lifesg-ds-overlay-root-${E}`:"lifesg-ds-overlay-root",R=null!=T?T:q?99999:99998,{themeProps:V,themeStyle:G}=d(t);O(R),c(F,{[u.root.zIndex]:R}),i((()=>(Q(),S(K()),()=>{_(),X().length<1&&(J()&&(ee("remove"),oe()),U("remove"))})),[]),i((()=>{if(t){const e=M();H(e),Z(),J()&&1===X().length&&(te(),ee("add"));const t=setTimeout((()=>{U("add")}),200);return()=>clearTimeout(t)}{_(),J()&&X().length<1&&(ee("remove"),oe());const e=setTimeout((()=>{X().length<1&&U("remove")}),200);return()=>clearTimeout(e)}}),[t]),i((()=>{if(t)return document.addEventListener("mousedown",re,!0),()=>{document.removeEventListener("mousedown",re,!0)}}),[t]);const H=e=>{A.current=e,W(e)},J=()=>/(iPad|iPhone|iPod)/g.test(navigator.userAgent),K=()=>document&&k?document.getElementById(k):document?document.body:null,M=()=>X().length>0,Q=()=>{const e=document.documentElement.clientWidth,t=window.innerWidth-e;document.documentElement.style.setProperty(u.global.scrollbarWidth,`${t}px`)},U=e=>{const t=document.body.classList.contains(u.global.overlayOpenClass);"add"!==e||t?"remove"===e&&t&&document.body.classList.remove(u.global.overlayOpenClass):document.body.classList.add(u.global.overlayOpenClass)},X=()=>{const e=document.body.dataset.lifesgDsOverlayOrder;return e?e.split(","):[]},Z=()=>{const e=X();document.body.dataset.lifesgDsOverlayOrder=[...e,Y].join(",")},_=()=>{const e=X();document.body.dataset.lifesgDsOverlayOrder=e.filter((e=>e!==Y)).join(",")},ee=e=>{if(!J())return;const t=document.body.classList.contains(u.global.overlayScrollLockClass);"add"!==e||t?"remove"===e&&t&&document.body.classList.remove(u.global.overlayScrollLockClass):document.body.classList.add(u.global.overlayScrollLockClass)},te=()=>{const e=document.body.style,t=e.top?e.top:window.scrollY+"px";document.body.style.setProperty(u.global.scrollY,t)},oe=()=>{if(!J())return;const e=document.body.style.getPropertyValue(u.global.scrollY);requestAnimationFrame((()=>{window.scrollTo({top:parseFloat(e)})}))},re=e=>{var t;const o=null!==(t=null==D?void 0:D.current)&&void 0!==t?t:N.current,r=N.current;if(!o)return void(B.current=!1);const n=e.target,l=r===n,s=o===n,i=o.contains(n);B.current=!l&&(s||i)},ne=e=>{var t;const o=null!==(t=null==D?void 0:D.current)&&void 0!==t?t:N.current,r=N.current;if(!o)return void(B.current=!1);const n=e.target,l=r===n,s=o===n,i=o.contains(n);!l&&(s||i)||B.current||!L||!P||(e.preventDefault(),L()),B.current=!1};return I?a.createPortal(e("div",Object.assign({ref:F,id:$,"data-testid":$,className:n(p,t&&y)},V,{style:G,children:w&&e(r,{id:z,children:e("div",{ref:N,"data-testid":"overlay-wrapper",className:n(v,t?g:h,q&&b,x&&f,C&&j),onClick:ne,children:w})})})),I):null},L=o=>e(t,{children:e(k,Object.assign({},o))});export{L as Overlay};
 //# sourceMappingURL=overlay.js.map

package/overlay/overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.js","sources":["../../src/overlay/overlay.tsx"],"sourcesContent":["import {\n    FloatingNode,\n    FloatingTree,\n    useFloatingNodeId,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport ReactDOM from \"react-dom\";\n\nimport { useApplyStyle, useInheritedThemeScope } from \"../theme\";\nimport { useId } from \"../util\";\nimport * as styles from \"./overlay.styles\";\nimport type { OverlayProps } from \"./types\";\nimport { useFloatingParent } from \"./use-floating-context\";\n\nconst OverlayComponent = ({\n    show = false,\n    rootId,\n    onOverlayClick,\n    children,\n    backgroundOpacity: _backgroundOpacity,\n    backgroundBlur = true,\n    disableTransition = false,\n    enableOverlayClick = false,\n    zIndex: customZIndex,\n    id,\n    containerRef,\n}: OverlayProps): JSX.Element | null => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [rootElement, setRootElement] = useState<HTMLElement | null>(null);\n    const [isStacked, _setIsStacked] = useState<boolean>();\n    const uid = useId();\n    const nodeId = useFloatingNodeId();\n\n    const stacked = useRef<boolean>();\n    // Track where mousedown started to prevent closing drawer during text selection drag\n    const mouseDownInsideModalRef = useRef(false);\n    const rootRef = useRef<HTMLDivElement>(null);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n\n    const overlayRootId = id\n        ? `lifesg-ds-overlay-root-${id}`\n        : \"lifesg-ds-overlay-root\";\n    const zIndex = customZIndex ?? (isStacked ? 99999 : 99998);\n    const { themeProps, themeStyle } = useInheritedThemeScope(show);\n\n    useFloatingParent(zIndex);\n\n    useApplyStyle(rootRef, { [styles.tokens.root.zIndex]: zIndex });\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        initialiseStylesForDocumentBody();\n        setRootElement(getRootElement());\n\n        return () => {\n            removeOverlay();\n\n            if (getOverlayOrder().length < 1) {\n                if (isIOS()) {\n                    applyScrollLockClassForIOS(\"remove\");\n                    scrollToLastScrollPositionForIOS();\n                }\n\n                applyBodyStyleClass(\"remove\");\n            }\n        };\n    }, []);\n\n    useEffect(() => {\n        if (show) {\n            const isStacked = checkIfStacked();\n            setStacked(isStacked);\n\n            addOverlay();\n\n            if (isIOS() && getOverlayOrder().length === 1) {\n                saveScrollPosition();\n                applyScrollLockClassForIOS(\"add\");\n            }\n\n            const timerId = setTimeout(() => {\n                applyBodyStyleClass(\"add\");\n            }, 200); // Allow overlay animations to complete\n\n            return () => clearTimeout(timerId);\n        } else {\n            removeOverlay();\n\n            if (isIOS() && getOverlayOrder().length < 1) {\n                applyScrollLockClassForIOS(\"remove\");\n                scrollToLastScrollPositionForIOS();\n            }\n\n            const timerId = setTimeout(() => {\n                if (getOverlayOrder().length < 1) {\n                    applyBodyStyleClass(\"remove\");\n                }\n            }, 200); // Allow overlay animations to complete\n\n            return () => clearTimeout(timerId);\n        }\n    }, [show]);\n\n    // Track mousedown origin to distinguish clicks from text selection drags\n    useEffect(() => {\n        if (!show) return;\n\n        document.addEventListener(\"mousedown\", handleDocumentMouseDown, true);\n        return () => {\n            document.removeEventListener(\n                \"mousedown\",\n                handleDocumentMouseDown,\n                true\n            );\n        };\n    }, [show]);\n\n    // =============================================================================\n    // REF FUNCTIONS\n    // =============================================================================\n    const setStacked = (data: boolean) => {\n        stacked.current = data;\n        _setIsStacked(data);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const isIOS = () => /(iPad|iPhone|iPod)/g.test(navigator.userAgent);\n\n    const getRootElement = (): HTMLElement | null => {\n        if (document && rootId) {\n            return document.getElementById(rootId);\n        } else if (document) {\n            // If rootId not specified, we'll use body\n            return document.body;\n        } else {\n            return null;\n        }\n    };\n\n    const checkIfStacked = () => {\n        return getOverlayOrder().length > 0;\n    };\n\n    const initialiseStylesForDocumentBody = () => {\n        const documentWidth = document.documentElement.clientWidth;\n        const windowWidth = window.innerWidth;\n        const scrollBarWidth = windowWidth - documentWidth;\n\n        document.documentElement.style.setProperty(\n            styles.tokens.global.scrollbarWidth,\n            `${scrollBarWidth}px`\n        );\n    };\n\n    /**\n     * This sets the style of <body> to hide the scrollbar\n     */\n    const applyBodyStyleClass = (action: \"add\" | \"remove\") => {\n        const isOverlayStyleClassApplied = document.body.classList.contains(\n            styles.tokens.global.overlayOpenClass\n        );\n\n        if (action === \"add\" && !isOverlayStyleClassApplied) {\n            document.body.classList.add(styles.tokens.global.overlayOpenClass);\n        } else if (action === \"remove\" && isOverlayStyleClassApplied) {\n            document.body.classList.remove(\n                styles.tokens.global.overlayOpenClass\n            );\n        }\n    };\n\n    const getOverlayOrder = () => {\n        const attr = document.body.dataset.lifesgDsOverlayOrder;\n        return attr ? attr.split(\",\") : [];\n    };\n\n    const addOverlay = () => {\n        const order = getOverlayOrder();\n        document.body.dataset.lifesgDsOverlayOrder = [...order, uid].join(\",\");\n    };\n\n    const removeOverlay = () => {\n        const order = getOverlayOrder();\n        document.body.dataset.lifesgDsOverlayOrder = order\n            .filter((o) => o !== uid)\n            .join(\",\");\n    };\n\n    /**\n     * This sets the style of <body> to further prevent scrolling on iOS\n     *\n     * ref: https://stackoverflow.com/a/57455820/3932279\n     * `overflow: hidden` and `overscroll-behavior` is ignored by iOS, this is\n     * an alternative solution\n     *\n     * as a side effect this causes the scroll position to reset, so additional\n     * logic to restore the scroll on close is required\n     */\n    const applyScrollLockClassForIOS = (action: \"add\" | \"remove\") => {\n        if (!isIOS()) {\n            return;\n        }\n\n        const isClassApplied = document.body.classList.contains(\n            styles.tokens.global.overlayScrollLockClass\n        );\n\n        if (action === \"add\" && !isClassApplied) {\n            document.body.classList.add(\n                styles.tokens.global.overlayScrollLockClass\n            );\n        } else if (action === \"remove\" && isClassApplied) {\n            document.body.classList.remove(\n                styles.tokens.global.overlayScrollLockClass\n            );\n        }\n    };\n\n    const saveScrollPosition = () => {\n        const bodyStyle = document.body.style;\n        const scrollY = bodyStyle.top ? bodyStyle.top : window.scrollY + \"px\";\n\n        document.body.style.setProperty(styles.tokens.global.scrollY, scrollY);\n    };\n\n    const scrollToLastScrollPositionForIOS = () => {\n        if (!isIOS()) {\n            return;\n        }\n\n        const scrollY = document.body.style.getPropertyValue(\n            styles.tokens.global.scrollY\n        );\n        requestAnimationFrame(() => {\n            window.scrollTo({\n                top: parseFloat(scrollY),\n            });\n        });\n    };\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleDocumentMouseDown = (e: MouseEvent) => {\n        const container = containerRef?.current ?? wrapperRef.current;\n        const wrapper = wrapperRef.current;\n        if (!container) {\n            mouseDownInsideModalRef.current = false;\n            return;\n        }\n\n        const target = e.target as Node;\n        const clickedOnWrapper = wrapper === target;\n        const clickedOnContainer = container === target;\n        const clickedInsideContainer = container.contains(target);\n\n        // Track if mousedown started inside modal content\n        mouseDownInsideModalRef.current =\n            !clickedOnWrapper && (clickedOnContainer || clickedInsideContainer);\n    };\n\n    const handleWrapperClick = (event: React.MouseEvent<HTMLDivElement>) => {\n        const container = containerRef?.current ?? wrapperRef.current;\n        const wrapper = wrapperRef.current;\n        if (!container) {\n            mouseDownInsideModalRef.current = false;\n            return;\n        }\n\n        const target = event.target as Node;\n        const clickedOnWrapper = wrapper === target;\n        const clickedOnContainer = container === target;\n        const clickedInsideContainer = container.contains(target);\n        const clickedInsideModal = clickedOnContainer || clickedInsideContainer;\n\n        // Only close if both mousedown AND click happened outside modal\n        if (\n            (clickedOnWrapper || !clickedInsideModal) &&\n            !mouseDownInsideModalRef.current &&\n            onOverlayClick &&\n            enableOverlayClick\n        ) {\n            event.preventDefault();\n            onOverlayClick();\n        }\n\n        mouseDownInsideModalRef.current = false;\n    };\n\n    // =============================================================================\n    // RENDER\n    // =============================================================================\n    const renderWrapper = () => (\n        <FloatingNode id={nodeId}>\n            <div\n                ref={wrapperRef}\n                data-testid=\"overlay-wrapper\"\n                className={clsx(\n                    styles.wrapper,\n                    show ? styles.wrapperShow : styles.wrapperHide,\n                    isStacked && styles.wrapperStacked,\n                    backgroundBlur && styles.wrapperBackgroundBlur,\n                    disableTransition && styles.wrapperDisableTransition\n                )}\n                onClick={handleWrapperClick}\n            >\n                {children}\n            </div>\n        </FloatingNode>\n    );\n\n    const renderComponent = () => (\n        <div\n            ref={rootRef}\n            id={overlayRootId}\n            data-testid={overlayRootId}\n            className={clsx(styles.root, show && styles.rootShow)}\n            {...themeProps}\n            style={themeStyle}\n        >\n            {children && renderWrapper()}\n        </div>\n    );\n\n    return rootElement\n        ? ReactDOM.createPortal(renderComponent(), rootElement)\n        : null;\n};\n\nexport const Overlay = (props: OverlayProps) => {\n    return (\n        <FloatingTree>\n            <OverlayComponent {...props} />\n        </FloatingTree>\n    );\n};\n"],"names":["OverlayComponent","show","rootId","onOverlayClick","children","backgroundOpacity","_backgroundOpacity","backgroundBlur","disableTransition","enableOverlayClick","zIndex","customZIndex","id","containerRef","rootElement","setRootElement","useState","isStacked","_setIsStacked","uid","useId","nodeId","useFloatingNodeId","stacked","useRef","mouseDownInsideModalRef","rootRef","wrapperRef","overlayRootId","themeProps","themeStyle","useInheritedThemeScope","useFloatingParent","useApplyStyle","styles.tokens","root","useEffect","initialiseStylesForDocumentBody","getRootElement","removeOverlay","getOverlayOrder","length","isIOS","applyScrollLockClassForIOS","scrollToLastScrollPositionForIOS","applyBodyStyleClass","checkIfStacked","setStacked","addOverlay","saveScrollPosition","timerId","setTimeout","clearTimeout","document","addEventListener","handleDocumentMouseDown","removeEventListener","data","current","test","navigator","userAgent","getElementById","body","documentWidth","documentElement","clientWidth","scrollBarWidth","window","innerWidth","style","setProperty","global","scrollbarWidth","action","isOverlayStyleClassApplied","classList","contains","overlayOpenClass","remove","add","attr","dataset","lifesgDsOverlayOrder","split","order","join","filter","o","isClassApplied","overlayScrollLockClass","bodyStyle","scrollY","top","getPropertyValue","requestAnimationFrame","scrollTo","parseFloat","e","container","_a","wrapper","target","clickedOnWrapper","clickedOnContainer","clickedInsideContainer","handleWrapperClick","event","preventDefault","ReactDOM","createPortal","_jsx","Object","assign","ref","className","clsx","styles.root","styles.rootShow","FloatingNode","styles.wrapper","styles.wrapperShow","styles.wrapperHide","styles.wrapperStacked","styles.wrapperBackgroundBlur","styles.wrapperDisableTransition","onClick","Overlay","props","FloatingTree"],"mappings":"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"}
+{"version":3,"file":"overlay.js","sources":["../../src/overlay/overlay.tsx"],"sourcesContent":["import {\n    FloatingNode,\n    FloatingTree,\n    useFloatingNodeId,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport ReactDOM from \"react-dom\";\n\nimport { useApplyStyle, useInheritedThemeScope } from \"../theme\";\nimport { useId } from \"../util\";\nimport * as styles from \"./overlay.styles\";\nimport type { OverlayProps } from \"./types\";\nimport { useFloatingParent } from \"./use-floating-context\";\n\nconst OverlayComponent = ({\n    show = false,\n    rootId,\n    onOverlayClick,\n    children,\n    backgroundBlur = true,\n    disableTransition = false,\n    enableOverlayClick = false,\n    zIndex: customZIndex,\n    id,\n    containerRef,\n}: OverlayProps): JSX.Element | null => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [rootElement, setRootElement] = useState<HTMLElement | null>(null);\n    const [isStacked, _setIsStacked] = useState<boolean>();\n    const uid = useId();\n    const nodeId = useFloatingNodeId();\n\n    const stacked = useRef<boolean>();\n    // Track where mousedown started to prevent closing drawer during text selection drag\n    const mouseDownInsideModalRef = useRef(false);\n    const rootRef = useRef<HTMLDivElement>(null);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n\n    const overlayRootId = id\n        ? `lifesg-ds-overlay-root-${id}`\n        : \"lifesg-ds-overlay-root\";\n    const zIndex = customZIndex ?? (isStacked ? 99999 : 99998);\n    const { themeProps, themeStyle } = useInheritedThemeScope(show);\n\n    useFloatingParent(zIndex);\n\n    useApplyStyle(rootRef, { [styles.tokens.root.zIndex]: zIndex });\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        initialiseStylesForDocumentBody();\n        setRootElement(getRootElement());\n\n        return () => {\n            removeOverlay();\n\n            if (getOverlayOrder().length < 1) {\n                if (isIOS()) {\n                    applyScrollLockClassForIOS(\"remove\");\n                    scrollToLastScrollPositionForIOS();\n                }\n\n                applyBodyStyleClass(\"remove\");\n            }\n        };\n    }, []);\n\n    useEffect(() => {\n        if (show) {\n            const isStacked = checkIfStacked();\n            setStacked(isStacked);\n\n            addOverlay();\n\n            if (isIOS() && getOverlayOrder().length === 1) {\n                saveScrollPosition();\n                applyScrollLockClassForIOS(\"add\");\n            }\n\n            const timerId = setTimeout(() => {\n                applyBodyStyleClass(\"add\");\n            }, 200); // Allow overlay animations to complete\n\n            return () => clearTimeout(timerId);\n        } else {\n            removeOverlay();\n\n            if (isIOS() && getOverlayOrder().length < 1) {\n                applyScrollLockClassForIOS(\"remove\");\n                scrollToLastScrollPositionForIOS();\n            }\n\n            const timerId = setTimeout(() => {\n                if (getOverlayOrder().length < 1) {\n                    applyBodyStyleClass(\"remove\");\n                }\n            }, 200); // Allow overlay animations to complete\n\n            return () => clearTimeout(timerId);\n        }\n    }, [show]);\n\n    // Track mousedown origin to distinguish clicks from text selection drags\n    useEffect(() => {\n        if (!show) return;\n\n        document.addEventListener(\"mousedown\", handleDocumentMouseDown, true);\n        return () => {\n            document.removeEventListener(\n                \"mousedown\",\n                handleDocumentMouseDown,\n                true\n            );\n        };\n    }, [show]);\n\n    // =============================================================================\n    // REF FUNCTIONS\n    // =============================================================================\n    const setStacked = (data: boolean) => {\n        stacked.current = data;\n        _setIsStacked(data);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const isIOS = () => /(iPad|iPhone|iPod)/g.test(navigator.userAgent);\n\n    const getRootElement = (): HTMLElement | null => {\n        if (document && rootId) {\n            return document.getElementById(rootId);\n        } else if (document) {\n            // If rootId not specified, we'll use body\n            return document.body;\n        } else {\n            return null;\n        }\n    };\n\n    const checkIfStacked = () => {\n        return getOverlayOrder().length > 0;\n    };\n\n    const initialiseStylesForDocumentBody = () => {\n        const documentWidth = document.documentElement.clientWidth;\n        const windowWidth = window.innerWidth;\n        const scrollBarWidth = windowWidth - documentWidth;\n\n        document.documentElement.style.setProperty(\n            styles.tokens.global.scrollbarWidth,\n            `${scrollBarWidth}px`\n        );\n    };\n\n    /**\n     * This sets the style of <body> to hide the scrollbar\n     */\n    const applyBodyStyleClass = (action: \"add\" | \"remove\") => {\n        const isOverlayStyleClassApplied = document.body.classList.contains(\n            styles.tokens.global.overlayOpenClass\n        );\n\n        if (action === \"add\" && !isOverlayStyleClassApplied) {\n            document.body.classList.add(styles.tokens.global.overlayOpenClass);\n        } else if (action === \"remove\" && isOverlayStyleClassApplied) {\n            document.body.classList.remove(\n                styles.tokens.global.overlayOpenClass\n            );\n        }\n    };\n\n    const getOverlayOrder = () => {\n        const attr = document.body.dataset.lifesgDsOverlayOrder;\n        return attr ? attr.split(\",\") : [];\n    };\n\n    const addOverlay = () => {\n        const order = getOverlayOrder();\n        document.body.dataset.lifesgDsOverlayOrder = [...order, uid].join(\",\");\n    };\n\n    const removeOverlay = () => {\n        const order = getOverlayOrder();\n        document.body.dataset.lifesgDsOverlayOrder = order\n            .filter((o) => o !== uid)\n            .join(\",\");\n    };\n\n    /**\n     * This sets the style of <body> to further prevent scrolling on iOS\n     *\n     * ref: https://stackoverflow.com/a/57455820/3932279\n     * `overflow: hidden` and `overscroll-behavior` is ignored by iOS, this is\n     * an alternative solution\n     *\n     * as a side effect this causes the scroll position to reset, so additional\n     * logic to restore the scroll on close is required\n     */\n    const applyScrollLockClassForIOS = (action: \"add\" | \"remove\") => {\n        if (!isIOS()) {\n            return;\n        }\n\n        const isClassApplied = document.body.classList.contains(\n            styles.tokens.global.overlayScrollLockClass\n        );\n\n        if (action === \"add\" && !isClassApplied) {\n            document.body.classList.add(\n                styles.tokens.global.overlayScrollLockClass\n            );\n        } else if (action === \"remove\" && isClassApplied) {\n            document.body.classList.remove(\n                styles.tokens.global.overlayScrollLockClass\n            );\n        }\n    };\n\n    const saveScrollPosition = () => {\n        const bodyStyle = document.body.style;\n        const scrollY = bodyStyle.top ? bodyStyle.top : window.scrollY + \"px\";\n\n        document.body.style.setProperty(styles.tokens.global.scrollY, scrollY);\n    };\n\n    const scrollToLastScrollPositionForIOS = () => {\n        if (!isIOS()) {\n            return;\n        }\n\n        const scrollY = document.body.style.getPropertyValue(\n            styles.tokens.global.scrollY\n        );\n        requestAnimationFrame(() => {\n            window.scrollTo({\n                top: parseFloat(scrollY),\n            });\n        });\n    };\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleDocumentMouseDown = (e: MouseEvent) => {\n        const container = containerRef?.current ?? wrapperRef.current;\n        const wrapper = wrapperRef.current;\n        if (!container) {\n            mouseDownInsideModalRef.current = false;\n            return;\n        }\n\n        const target = e.target as Node;\n        const clickedOnWrapper = wrapper === target;\n        const clickedOnContainer = container === target;\n        const clickedInsideContainer = container.contains(target);\n\n        // Track if mousedown started inside modal content\n        mouseDownInsideModalRef.current =\n            !clickedOnWrapper && (clickedOnContainer || clickedInsideContainer);\n    };\n\n    const handleWrapperClick = (event: React.MouseEvent<HTMLDivElement>) => {\n        const container = containerRef?.current ?? wrapperRef.current;\n        const wrapper = wrapperRef.current;\n        if (!container) {\n            mouseDownInsideModalRef.current = false;\n            return;\n        }\n\n        const target = event.target as Node;\n        const clickedOnWrapper = wrapper === target;\n        const clickedOnContainer = container === target;\n        const clickedInsideContainer = container.contains(target);\n        const clickedInsideModal = clickedOnContainer || clickedInsideContainer;\n\n        // Only close if both mousedown AND click happened outside modal\n        if (\n            (clickedOnWrapper || !clickedInsideModal) &&\n            !mouseDownInsideModalRef.current &&\n            onOverlayClick &&\n            enableOverlayClick\n        ) {\n            event.preventDefault();\n            onOverlayClick();\n        }\n\n        mouseDownInsideModalRef.current = false;\n    };\n\n    // =============================================================================\n    // RENDER\n    // =============================================================================\n    const renderWrapper = () => (\n        <FloatingNode id={nodeId}>\n            <div\n                ref={wrapperRef}\n                data-testid=\"overlay-wrapper\"\n                className={clsx(\n                    styles.wrapper,\n                    show ? styles.wrapperShow : styles.wrapperHide,\n                    isStacked && styles.wrapperStacked,\n                    backgroundBlur && styles.wrapperBackgroundBlur,\n                    disableTransition && styles.wrapperDisableTransition\n                )}\n                onClick={handleWrapperClick}\n            >\n                {children}\n            </div>\n        </FloatingNode>\n    );\n\n    const renderComponent = () => (\n        <div\n            ref={rootRef}\n            id={overlayRootId}\n            data-testid={overlayRootId}\n            className={clsx(styles.root, show && styles.rootShow)}\n            {...themeProps}\n            style={themeStyle}\n        >\n            {children && renderWrapper()}\n        </div>\n    );\n\n    return rootElement\n        ? ReactDOM.createPortal(renderComponent(), rootElement)\n        : null;\n};\n\nexport const Overlay = (props: OverlayProps) => {\n    return (\n        <FloatingTree>\n            <OverlayComponent {...props} />\n        </FloatingTree>\n    );\n};\n"],"names":["OverlayComponent","show","rootId","onOverlayClick","children","backgroundBlur","disableTransition","enableOverlayClick","zIndex","customZIndex","id","containerRef","rootElement","setRootElement","useState","isStacked","_setIsStacked","uid","useId","nodeId","useFloatingNodeId","stacked","useRef","mouseDownInsideModalRef","rootRef","wrapperRef","overlayRootId","themeProps","themeStyle","useInheritedThemeScope","useFloatingParent","useApplyStyle","styles.tokens","root","useEffect","initialiseStylesForDocumentBody","getRootElement","removeOverlay","getOverlayOrder","length","isIOS","applyScrollLockClassForIOS","scrollToLastScrollPositionForIOS","applyBodyStyleClass","checkIfStacked","setStacked","addOverlay","saveScrollPosition","timerId","setTimeout","clearTimeout","document","addEventListener","handleDocumentMouseDown","removeEventListener","data","current","test","navigator","userAgent","getElementById","body","documentWidth","documentElement","clientWidth","scrollBarWidth","window","innerWidth","style","setProperty","global","scrollbarWidth","action","isOverlayStyleClassApplied","classList","contains","overlayOpenClass","remove","add","attr","dataset","lifesgDsOverlayOrder","split","order","join","filter","o","isClassApplied","overlayScrollLockClass","bodyStyle","scrollY","top","getPropertyValue","requestAnimationFrame","scrollTo","parseFloat","e","container","_a","wrapper","target","clickedOnWrapper","clickedOnContainer","clickedInsideContainer","handleWrapperClick","event","preventDefault","ReactDOM","createPortal","_jsx","Object","assign","ref","className","clsx","styles.root","styles.rootShow","FloatingNode","styles.wrapper","styles.wrapperShow","styles.wrapperHide","styles.wrapperStacked","styles.wrapperBackgroundBlur","styles.wrapperDisableTransition","onClick","Overlay","props","FloatingTree"],"mappings":"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"}

package/overlay/overlay.styles_12wym18.css

@@ -1,8 +1,8 @@
-.r1042j6c{position:fixed;left:0;top:0;height:0;width:0;visibility:hidden;z-index:var(--fds-internal-overlay-root-zIndex);}.lifesg-ds-overlay-open {padding-right:var(--fds-internal-overlay-body-scrollbarWidth, 0)!important;overflow:hidden;scrollbar-width:none;-ms-overflow-style:none;}.lifesg-ds-overlay-open::-webkit-scrollbar {display:none;}.lifesg-ds-overlay-scroll-lock {position:fixed;top:var(--fds-internal-overlay-body-scrollY, 0);bottom:0;}
+@layer fds{.r1042j6c{position:fixed;left:0;top:0;height:0;width:0;visibility:hidden;z-index:var(--fds-internal-overlay-root-zIndex);}.lifesg-ds-overlay-open {padding-right:var(--fds-internal-overlay-body-scrollbarWidth, 0)!important;overflow:hidden;scrollbar-width:none;-ms-overflow-style:none;}.lifesg-ds-overlay-open::-webkit-scrollbar {display:none;}.lifesg-ds-overlay-scroll-lock {position:fixed;top:var(--fds-internal-overlay-body-scrollY, 0);bottom:0;}
 .rceie2f{height:100%;width:100vw;visibility:visible;}
 .w1q7jcf6{position:absolute;left:0;top:0;background-color:var(--fds-colour-overlay-strong);-webkit-backdrop-filter:none;backdrop-filter:none;-webkit-transition:opacity 200ms ease;transition:opacity 200ms ease;}
 .w14rsmxt{background-color:var(--fds-colour-overlay-subtle);}
 .w1xh3xyq{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);}
 .wv8m6sc{visibility:visible;opacity:1;pointer-events:auto;height:100%;width:100vw;}
 .w1q7bprp{visibility:hidden;opacity:0;transition-delay:400ms;pointer-events:none;height:0;width:0;}
-.w1ttt09o{-webkit-transition:none;transition:none;transition-delay:0ms;}
+.w1ttt09o{-webkit-transition:none;transition:none;transition-delay:0ms;}}

package/overlay/types.d.ts

@@ -3,8 +3,6 @@ export interface OverlayProps {
     show?: boolean | undefined;
     /** The id of the root element to attach the overlay to */
     rootId?: string | undefined;
-    /** @deprecated no longer has effect */
-    backgroundOpacity?: number | undefined;
     backgroundBlur?: boolean | undefined;
     disableTransition?: boolean | undefined;
     enableOverlayClick?: boolean | undefined;
@@ -14,14 +12,3 @@ export interface OverlayProps {
     /** The container that defines the boundaries for overlay click detection */
     containerRef?: React.RefObject<HTMLElement> | undefined;
 }
-/**
- * @deprecated For library internal use only
- */
-export interface StyleProps {
-    $show: boolean;
-    $backgroundBlur?: boolean | undefined;
-    $disableTransition?: boolean | undefined;
-    $enableOverlayClick?: boolean | undefined;
-    zIndex?: number | undefined;
-    $stacked?: boolean | undefined;
-}

package/package.json

@@ -1,7 +1,19 @@
 {
   "name": "@lifesg/react-design-system",
-  "version": "4.0.0-alpha.3",
+  "version": "4.0.0-alpha.5",
   "description": "A component design system for LifeSG web apps",
+  "keywords": [
+    "design-system"
+  ],
+  "homepage": "https://github.com/LifeSG/react-design-system#readme",
+  "bugs": {
+    "url": "https://github.com/LifeSG/react-design-system/issues"
+  },
+  "license": "ISC",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/LifeSG/react-design-system.git"
+  },
   "main": "./cjs/index.js",
   "module": "./index.js",
   "types": "./index.d.ts",
@@ -145,12 +157,6 @@
       "require": "./cjs/error-display/index.js",
       "default": "./error-display/index.js"
     },
-    "./example": {
-      "types": "./example/index.d.ts",
-      "import": "./example/index.js",
-      "require": "./cjs/example/index.js",
-      "default": "./example/index.js"
-    },
     "./feedback-rating": {
       "types": "./feedback-rating/index.d.ts",
       "import": "./feedback-rating/index.js",
@@ -528,12 +534,6 @@
       "import": "./unit-number/index.js",
       "require": "./cjs/unit-number/index.js",
       "default": "./unit-number/index.js"
-    },
-    "./v3_theme": {
-      "types": "./v3_theme/index.d.ts",
-      "import": "./v3_theme/index.js",
-      "require": "./cjs/v3_theme/index.js",
-      "default": "./v3_theme/index.js"
     }
   },
   "dependencies": {
@@ -550,7 +550,6 @@
     "@floating-ui/react": ">=0.26.23 <1.0.0",
     "@lifesg/react-icons": "^1.5.0",
     "react": "^17.0.2 || ^18.0.0 || ^19.0.0",
-    "react-dom": "^17.0.2 || ^18.0.0 || ^19.0.0",
-    "styled-components": "^6.4.0"
+    "react-dom": "^17.0.2 || ^18.0.0 || ^19.0.0"
   }
 }

package/pagination/pagination.styles.js

@@ -1,2 +1,2 @@
-import"./pagination.styles_1u898rb.css";const i="p1afjf30",p="p1ma9kw3",s="p1sz1s7f",t="irakt3t",a="i1eo6n86",n="pia4hww",o="p673w5b",e="e1peilt2",r="p1yg278j",x="l1nxoktb",f="lquxmfr",g="i1hj21s6",l="h1x6xag5",m="issm41d";export{e as ellipsisContainer,l as hover,t as iconButton,a as iconButtonNavigation,m as inputSelectWrapper,g as inputView,x as label,f as labelDivider,n as pageItem,o as pageItemSelected,p as paginationList,s as paginationMenu,r as paginationMobileInput,i as paginationWrapper};
+import"./pagination.styles_6bcgva.css";const i="p1afjf30",p="p1ma9kw3",a="p1sz1s7f",s="irakt3t",t="i1eo6n86",n="pia4hww",o="p673w5b",e="e1peilt2",g="p1yg278j",x="l1nxoktb",f="lquxmfr",l="i1hj21s6",m="h1x6xag5",r="issm41d";export{e as ellipsisContainer,m as hover,s as iconButton,t as iconButtonNavigation,r as inputSelectWrapper,l as inputView,x as label,f as labelDivider,n as pageItem,o as pageItemSelected,p as paginationList,a as paginationMenu,g as paginationMobileInput,i as paginationWrapper};
 //# sourceMappingURL=pagination.styles.js.map

package/pagination/pagination.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.styles.js","sources":["../../src/pagination/pagination.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, MediaQuery, Radius, Spacing } from \"../theme\";\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const paginationWrapper = css`\n    display: flex;\n`;\n\nexport const paginationList = css`\n    align-self: flex-start;\n\n    display: flex;\n    align-items: center;\n\n    ${MediaQuery.MaxWidth.lg} {\n        align-self: center;\n    }\n`;\n\nexport const paginationMenu = css`\n    display: inline-flex;\n    align-items: center;\n`;\n\nexport const iconButton = css`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    outline: none;\n    border-radius: ${Radius.sm};\n    height: 2.5rem;\n    width: 2.5rem;\n    padding: 0 ${Spacing[\"spacing-8\"]};\n\n    color: ${Colour[\"icon-primary\"]};\n\n    svg {\n        height: 1.25rem;\n        width: 1.25rem;\n    }\n\n    &:disabled {\n        color: ${Colour[\"icon-disabled-subtle\"]};\n        cursor: not-allowed;\n    }\n\n    &:not(:disabled):hover,\n    &:not(:disabled):focus-visible {\n        background: ${Colour[\"bg-hover\"]};\n    }\n`;\n\nexport const iconButtonNavigation = css`\n    margin: ${Spacing[\"spacing-4\"]};\n`;\n\nexport const pageItem = css`\n    outline: none;\n    margin: ${Spacing[\"spacing-4\"]};\n    box-shadow: none;\n    border: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n    border-radius: ${Radius.sm};\n    min-width: 2.5rem;\n    height: 2.5rem;\n    padding: 0 ${Spacing[\"spacing-8\"]};\n\n    background: ${Colour.bg};\n    cursor: pointer;\n\n    ${Font[\"body-baseline-regular\"]};\n    text-align: center;\n    color: ${Colour.text};\n\n    &:hover,\n    &:focus-visible {\n        border-color: ${Colour[\"bg-hover\"]};\n        background: ${Colour[\"bg-hover\"]};\n        color: ${Colour[\"text-hover\"]};\n        font-weight: ${Font.Spec[\"weight-semibold\"]};\n    }\n`;\n\nexport const pageItemSelected = css`\n    border-color: ${Colour[\"bg-primary\"]};\n    background: ${Colour[\"bg-primary\"]};\n    color: ${Colour[\"text-inverse\"]};\n    font-weight: ${Font.Spec[\"weight-bold\"]};\n\n    &:hover,\n    &:focus-visible {\n        border-color: ${Colour[\"bg-selected-strongest-hover\"]};\n        background: ${Colour[\"bg-selected-strongest-hover\"]};\n        color: ${Colour[\"text-inverse\"]};\n        font-weight: ${Font.Spec[\"weight-bold\"]};\n    }\n`;\n\nexport const ellipsisContainer = css`\n    position: relative;\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    margin: ${Spacing[\"spacing-4\"]};\n\n    cursor: pointer;\n`;\n\nexport const paginationMobileInput = css`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    margin: ${Spacing[\"spacing-4\"]};\n\n    color: ${Colour.text};\n`;\n\nexport const label = css`\n    white-space: nowrap;\n`;\n\nexport const labelDivider = css`\n    margin: 0 ${Spacing[\"spacing-16\"]};\n    white-space: nowrap;\n`;\n\nexport const inputView = css`\n    width: 3.5rem;\n    height: 2.5rem;\n    ${Font[\"body-baseline-regular\"]};\n\n    input {\n        padding: 0 ${Spacing[\"spacing-8\"]};\n        text-align: center;\n    }\n`;\n\nexport const hover = css`\n    position: absolute;\n    top: calc(${Spacing[\"spacing-8\"]} * -1);\n    transform: translateY(-100%);\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    border: none;\n    border-radius: ${Radius.sm};\n    width: max-content;\n    padding: ${Spacing[\"spacing-4\"]} ${Spacing[\"spacing-12\"]};\n\n    background: ${Colour[\"bg-hover\"]};\n\n    ${Font[\"body-xs-regular\"]}\n    color: ${Colour[\"text-hover\"]};\n`;\n\nexport const inputSelectWrapper = css`\n    margin-left: ${Spacing[\"spacing-4\"]};\n    width: 10rem;\n`;\n"],"names":["paginationWrapper","paginationList","paginationMenu","iconButton","iconButtonNavigation","pageItem","pageItemSelected","ellipsisContainer","paginationMobileInput","label","labelDivider","inputView","hover","inputSelectWrapper"],"mappings":"kEAMO,MAAMA,EAAiB,WAIjBC,EAAc,WAWdC,EAAc,WAKdC,EAAU,UA6BVC,EAAoB,WAIpBC,EAAQ,UA0BRC,EAAgB,UAehBC,EAAiB,WAYjBC,EAAqB,WAUrBC,EAAK,WAILC,EAAY,UAKZC,EAAS,WAWTC,EAAK,WAoBLC,EAAkB"}
+{"version":3,"file":"pagination.styles.js","sources":["../../src/pagination/pagination.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, MediaQuery, Radius, Spacing } from \"../theme\";\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const paginationWrapper = css`\n    display: flex;\n`;\n\nexport const paginationList = css`\n    align-self: flex-start;\n\n    display: flex;\n    align-items: center;\n\n    ${MediaQuery.MaxWidth.lg} {\n        align-self: center;\n    }\n`;\n\nexport const paginationMenu = css`\n    display: inline-flex;\n    align-items: center;\n`;\n\nexport const iconButton = css`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    outline: none;\n    border-radius: ${Radius.sm};\n    height: 2.5rem;\n    width: 2.5rem;\n    padding: 0 ${Spacing[\"spacing-8\"]};\n\n    color: ${Colour[\"icon-primary\"]};\n\n    svg {\n        height: 1.25rem;\n        width: 1.25rem;\n    }\n\n    &:disabled {\n        color: ${Colour[\"icon-disabled-subtle\"]};\n        cursor: not-allowed;\n    }\n\n    &:not(:disabled):hover,\n    &:not(:disabled):focus-visible {\n        background: ${Colour[\"bg-hover\"]};\n    }\n`;\n\nexport const iconButtonNavigation = css`\n    margin: ${Spacing[\"spacing-4\"]};\n`;\n\nexport const pageItem = css`\n    outline: none;\n    margin: ${Spacing[\"spacing-4\"]};\n    box-shadow: none;\n    border: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n    border-radius: ${Radius.sm};\n    min-width: 2.5rem;\n    height: 2.5rem;\n    padding: 0 ${Spacing[\"spacing-8\"]};\n\n    background: ${Colour.bg};\n    cursor: pointer;\n\n    ${Font[\"body-baseline-regular\"]};\n    text-align: center;\n    color: ${Colour.text};\n\n    &:hover,\n    &:focus-visible {\n        border-color: ${Colour[\"bg-hover\"]};\n        background: ${Colour[\"bg-hover\"]};\n        color: ${Colour[\"text-hover\"]};\n        font-weight: ${Font.Spec[\"weight-semibold\"]};\n    }\n`;\n\nexport const pageItemSelected = css`\n    border-color: ${Colour[\"bg-primary\"]};\n    background: ${Colour[\"bg-primary\"]};\n    color: ${Colour[\"text-inverse\"]};\n    font-weight: ${Font.Spec[\"weight-bold\"]};\n\n    &:hover,\n    &:focus-visible {\n        border-color: ${Colour[\"bg-selected-strongest-hover\"]};\n        background: ${Colour[\"bg-selected-strongest-hover\"]};\n        color: ${Colour[\"text-inverse\"]};\n        font-weight: ${Font.Spec[\"weight-bold\"]};\n    }\n`;\n\nexport const ellipsisContainer = css`\n    position: relative;\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    margin: ${Spacing[\"spacing-4\"]};\n\n    cursor: pointer;\n`;\n\nexport const paginationMobileInput = css`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    margin: ${Spacing[\"spacing-4\"]};\n\n    color: ${Colour.text};\n`;\n\nexport const label = css`\n    white-space: nowrap;\n`;\n\nexport const labelDivider = css`\n    margin: 0 ${Spacing[\"spacing-16\"]};\n    white-space: nowrap;\n`;\n\nexport const inputView = css`\n    width: 3.5rem;\n    height: 2.5rem;\n    ${Font[\"body-baseline-regular\"]};\n\n    input {\n        padding: 0 ${Spacing[\"spacing-8\"]};\n        text-align: center;\n    }\n`;\n\nexport const hover = css`\n    position: absolute;\n    top: calc(${Spacing[\"spacing-8\"]} * -1);\n    transform: translateY(-100%);\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    border: none;\n    border-radius: ${Radius.sm};\n    width: max-content;\n    padding: ${Spacing[\"spacing-4\"]} ${Spacing[\"spacing-12\"]};\n\n    background: ${Colour[\"bg-hover\"]};\n\n    ${Font[\"body-xs-regular\"]}\n    color: ${Colour[\"text-hover\"]};\n`;\n\nexport const inputSelectWrapper = css`\n    margin-left: ${Spacing[\"spacing-4\"]};\n    width: 10rem;\n`;\n"],"names":["paginationWrapper","paginationList","paginationMenu","iconButton","iconButtonNavigation","pageItem","pageItemSelected","ellipsisContainer","paginationMobileInput","label","labelDivider","inputView","hover","inputSelectWrapper"],"mappings":"iEAMO,MAAMA,EAAiB,WAIjBC,EAAc,WAWdC,EAAc,WAKdC,EAAU,UA6BVC,EAAoB,WAIpBC,EAAQ,UA0BRC,EAAgB,UAehBC,EAAiB,WAYjBC,EAAqB,WAUrBC,EAAK,WAILC,EAAY,UAKZC,EAAS,WAWTC,EAAK,WAoBLC,EAAkB"}

package/{cjs/pagination/pagination.styles_1u898rb.css → pagination/pagination.styles_6bcgva.css}

@@ -1,14 +1,14 @@
-.p1afjf30{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
+@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);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);}
+.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);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);}.i1hj21s6 input{padding:0 var(--fds-spacing-8);text-align:center;}
-.h1x6xag5{position:absolute;top:calc(var(--fds-spacing-8) * -1);-webkit-transform:translateY(-100%);-moz-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;border:none;border-radius:var(--fds-radius-sm);width:-webkit-max-content;width:-moz-max-content;width:max-content;padding:var(--fds-spacing-4) var(--fds-spacing-12);background:var(--fds-colour-bg-hover);font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-xs);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);color:var(--fds-colour-text-hover);}
-.issm41d{margin-left:var(--fds-spacing-4);width:10rem;}
+.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/pill/pill.styles.js

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

package/{cjs/pill/pill.styles_1wiyl8.css → pill/pill.styles_xwrniu.css}

@@ -1,4 +1,4 @@
-.w2wrvwd{border-radius:var(--fds-radius-full);padding:0.125rem 0.5rem;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;max-width:100%;font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-xs);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:0.25rem;border:var(--fds-border-width-010) var(--fds-border-style-solid);}.w2wrvwd svg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}
+@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);}
@@ -14,4 +14,4 @@
 .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;}
+.l1uma0l6{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;text-align:left;}}

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

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

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

package/popover/popover.styles_ujnf0h.css

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

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

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