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

package/theme/styles/sgw-digital-lobby.css

@@ -1,11 +1,11 @@
 @import url("./default.css");
 
-/* 
-============================================================================
-PRIMITIVES COLORS
-============================================================================
-*/
 [data-fds-theme="sgw-digital-lobby"] {
+    /* 
+    ============================================================================
+    PRIMITIVES COLORS
+    ============================================================================
+    */
     --fds-colour-brand-10: #0E113C;
     --fds-colour-brand-20: #191E67;
     --fds-colour-brand-30: #232A92;
@@ -94,8 +94,8 @@ PRIMITIVES COLORS
     --fds-colour-info-90: #CCE3F1;
     --fds-colour-info-95: #E3F1F8;
     --fds-colour-info-100: #F4FAFD;
-    --fds-colour-white: #FFF;
-    --fds-colour-black: #000;
+    --fds-colour-white: #FFFFFF;
+    --fds-colour-black: #000000;
     --fds-colour-primary-inverse: #FEAB10;
 
     /*
@@ -231,6 +231,124 @@ PRIMITIVES COLORS
     /* focus ring */
     --fds-colour-focus-ring: var(--fds-colour-primary-50);
     --fds-colour-focus-ring-inverse: var(--fds-colour-white);
+
+    /* 
+    ========================================================================
+    COMPONENT TOKENS
+    ========================================================================
+    */
+
+    /* Button */
+    --fds-button-radius: var(--fds-radius-sm);
+    --fds-button-default-colour-bg: var(--fds-colour-bg-primary);
+    --fds-button-default-colour-bg-hover: var(--fds-colour-bg-primary-hover);
+    --fds-button-default-colour-text: var(--fds-colour-text-inverse);
+    --fds-button-secondary-colour-border: var(--fds-colour-border-primary);
+    --fds-button-secondary-colour-text: var(--fds-colour-text-primary);
+    --fds-button-light-colour-text: var(--fds-colour-text-primary);
+    --fds-button-link-colour-text: var(--fds-colour-text-primary);
+
+    /* Navbar */
+    --fds-navbar-full-height: 6rem;
+    --fds-navbar-full-logo-height: 2rem;
+    --fds-navbar-compressed-height: 4rem;
+    --fds-navbar-compressed-logo-height: 1.5rem;
+    --fds-navbar-mobile-height: 3.5rem;
+    --fds-navbar-mobile-logo-height: 1.5rem;
+    --fds-navbar-colour-bg: var(--fds-colour-bg);
+    --fds-navbar-colour-icon: var(--fds-colour-icon);
+    --fds-navbar-link-colour-text: var(--fds-colour-text);
+    --fds-navbar-link-colour-text-hover: var(--fds-colour-text-hover);
+    --fds-navbar-link-colour-text-selected-hover: var(
+        --fds-colour-text-selected-hover
+    );
+
+    /* Footer */
+    --fds-footer-colour-bg: var(--fds-colour-bg-strong);
+    --fds-footer-colour-text: var(--fds-colour-text);
+    --fds-footer-link-colour-text: var(--fds-colour-text);
+    --fds-footer-link-colour-text-hover: var(--fds-colour-text-hover);
+    --fds-footer-disclaimer-link-colour-text: var(--fds-colour-text);
+    --fds-footer-disclaimer-link-colour-text-hover: var(
+        --fds-colour-text-subtler
+    );
+
+    /* Animation */
+    --fds-animation-loading-dots-spinner-colour: var(--fds-colour-icon-primary);
+
+    /* 
+    ========================================================================
+    SHADOW
+    ========================================================================
+    */
+    --fds-shadow-xs-subtle: 0 0 4px 1px
+        rgb(from var(--fds-colour-neutral-50) r g b / 24%);
+    --fds-shadow-xs-strong: 0 0 4px 1px
+        rgb(from var(--fds-colour-neutral-50) r g b / 50%);
+    --fds-shadow-xs-focus-strong: 0 0 4px 1px
+        rgb(from var(--fds-colour-border-focus) r g b / 50%);
+    --fds-shadow-xs-error-strong: 0 0 4px 1px
+        rgb(from var(--fds-colour-border-error) r g b / 50%);
+    --fds-shadow-sm-subtle: 0 2px 4px 0
+        rgb(from var(--fds-colour-neutral-50) r g b / 24%);
+    --fds-shadow-sm-strong: 0 2px 4px 0
+        rgb(from var(--fds-colour-neutral-50) r g b / 50%);
+    --fds-shadow-md-subtle: 0 2px 8px 0
+        rgb(from var(--fds-colour-neutral-50) r g b / 24%);
+    --fds-shadow-md-strong: 0 2px 8px 0
+        rgb(from var(--fds-colour-neutral-50) r g b / 50%);
+    --fds-shadow-lg-subtle: 0 2px 12px 1px
+        rgb(from var(--fds-colour-neutral-50) r g b / 24%);
+    --fds-shadow-lg-strong: 0 2px 12px 1px
+        rgb(from var(--fds-colour-neutral-50) r g b / 50%);
+
+    /*
+    ============================================================================
+    FONT
+    ============================================================================
+    */
+    --fds-font-variant: no-common-ligatures;
+    --fds-font-heading-size-xxl: 3.75rem;
+    --fds-font-heading-size-xl: 3rem;
+    --fds-font-heading-size-lg: 2.5rem;
+    --fds-font-heading-size-md: 2rem;
+    --fds-font-heading-size-sm: 1.625rem;
+    --fds-font-heading-size-xs: 1.375rem;
+    --fds-font-heading-lh-xxl: 4.5rem;
+    --fds-font-heading-lh-xl: 3.5rem;
+    --fds-font-heading-lh-lg: 3rem;
+    --fds-font-heading-lh-md: 2.5rem;
+    --fds-font-heading-lh-sm: 2.25rem;
+    --fds-font-heading-lh-xs: 1.75rem;
+    --fds-font-heading-ls-xxl: -0.035rem;
+    --fds-font-heading-ls-xl: -0.035em;
+    --fds-font-heading-ls-lg: -0.02rem;
+    --fds-font-heading-ls-md: -0.02rem;
+    --fds-font-heading-ls-sm: 0rem;
+    --fds-font-heading-ls-xs: 0rem;
+    --fds-font-weight-light: 300;
+    --fds-font-weight-regular: 400;
+    --fds-font-weight-semibold: 600;
+    --fds-font-weight-bold: 700;
+    --fds-font-family: "Libre Franklin";
+    --fds-font-body-size-baseline: 1.375rem;
+    --fds-font-body-size-md: 1.2rem;
+    --fds-font-body-size-sm: 1.125rem;
+    --fds-font-body-size-xs: 1rem;
+    --fds-font-body-lh-baseline: 1.75rem;
+    --fds-font-body-lh-md: 1.625rem;
+    --fds-font-body-lh-sm: 1.625rem;
+    --fds-font-body-lh-xs: 1.5rem;
+    --fds-font-body-ls-baseline: 0rem;
+    --fds-font-body-ls-md: 0rem;
+    --fds-font-body-ls-sm: 0rem;
+    --fds-font-body-ls-xs: 0.009rem;
+    --fds-font-form-label-size: 1.25rem;
+    --fds-font-form-description-size: 1.125rem;
+    --fds-font-form-label-lh: 1.625rem;
+    --fds-font-form-description-lh: 1.625rem;
+    --fds-font-form-label-ls: 0rem;
+    --fds-font-form-description-ls: 0rem;
 }
 
 /* 
@@ -366,52 +484,4 @@ SEMANTIC COLOURS - DARK MODE
     /* focus ring - adjusted for dark mode */
     --fds-colour-focus-ring: var(--fds-colour-primary-60);
     --fds-colour-focus-ring-inverse: var(--fds-colour-black);
-
-    /*
-    ============================================================================
-    FONT
-    ============================================================================
-    */
-    --fds-font-variant: no-common-ligatures;
-    --fds-font-heading-size-xxl: 3.75rem;
-    --fds-font-heading-size-xl: 3rem;
-    --fds-font-heading-size-lg: 2.5rem;
-    --fds-font-heading-size-md: 2rem;
-    --fds-font-heading-size-sm: 1.625rem;
-    --fds-font-heading-size-xs: 1.375rem;
-    --fds-font-heading-lh-xxl: 4.5rem;
-    --fds-font-heading-lh-xl: 3.5rem;
-    --fds-font-heading-lh-lg: 3rem;
-    --fds-font-heading-lh-md: 2.5rem;
-    --fds-font-heading-lh-sm: 2.25rem;
-    --fds-font-heading-lh-xs: 1.75rem;
-    --fds-font-heading-ls-xxl: -0.035rem;
-    --fds-font-heading-ls-xl: -0.035em;
-    --fds-font-heading-ls-lg: -0.02rem;
-    --fds-font-heading-ls-md: -0.02rem;
-    --fds-font-heading-ls-sm: 0rem;
-    --fds-font-heading-ls-xs: 0rem;
-    --fds-font-weight-light: 300;
-    --fds-font-weight-regular: 400;
-    --fds-font-weight-semibold: 600;
-    --fds-font-weight-bold: 700;
-    --fds-font-family: "Libre Franklin";
-    --fds-font-body-size-baseline: 1.375rem;
-    --fds-font-body-size-md: 1.2rem;
-    --fds-font-body-size-sm: 1.125rem;
-    --fds-font-body-size-xs: 1rem;
-    --fds-font-body-lh-baseline: 1.75rem;
-    --fds-font-body-lh-md: 1.625rem;
-    --fds-font-body-lh-sm: 1.625rem;
-    --fds-font-body-lh-xs: 1.5rem;
-    --fds-font-body-ls-baseline: 0rem;
-    --fds-font-body-ls-md: 0rem;
-    --fds-font-body-ls-sm: 0rem;
-    --fds-font-body-ls-xs: 0.009rem;
-    --fds-font-form-label-size: 1.25rem;
-    --fds-font-form-description-size: 1.125rem;
-    --fds-font-form-label-lh: 1.625rem;
-    --fds-font-form-description-lh: 1.625rem;
-    --fds-font-form-label-ls: 0rem;
-    --fds-font-form-description-ls: 0rem;
 }

package/theme/styles/spf.css

@@ -94,8 +94,8 @@ PRIMITIVE COLOURS
     --fds-colour-info-90: #CAE3F4;
     --fds-colour-info-95: #E2F0F9;
     --fds-colour-info-100: #F4FAFD;
-    --fds-colour-white: #FFF;
-    --fds-colour-black: #000;
+    --fds-colour-white: #FFFFFF;
+    --fds-colour-black: #000000;
     --fds-colour-primary-inverse: #FFCB6A;
 
     /*
@@ -243,6 +243,124 @@ PRIMITIVE COLOURS
     /* focus ring */
     --fds-colour-focus-ring: var(--fds-colour-primary-50);
     --fds-colour-focus-ring-inverse: var(--fds-colour-white);
+
+    /* 
+    ========================================================================
+    COMPONENT TOKENS
+    ========================================================================
+    */
+
+    /* Button */
+    --fds-button-radius: var(--fds-radius-sm);
+    --fds-button-default-colour-bg: var(--fds-colour-bg-primary);
+    --fds-button-default-colour-bg-hover: var(--fds-colour-bg-primary-hover);
+    --fds-button-default-colour-text: var(--fds-colour-text-inverse);
+    --fds-button-secondary-colour-border: var(--fds-colour-border-primary);
+    --fds-button-secondary-colour-text: var(--fds-colour-text-primary);
+    --fds-button-light-colour-text: var(--fds-colour-text-primary);
+    --fds-button-link-colour-text: var(--fds-colour-text-primary);
+
+    /* Navbar */
+    --fds-navbar-full-height: 6rem;
+    --fds-navbar-full-logo-height: 3rem;
+    --fds-navbar-compressed-height: 5rem;
+    --fds-navbar-compressed-logo-height: 2rem;
+    --fds-navbar-mobile-height: 4rem;
+    --fds-navbar-mobile-logo-height: 2rem;
+    --fds-navbar-colour-bg: var(--fds-colour-bg);
+    --fds-navbar-colour-icon: var(--fds-colour-icon);
+    --fds-navbar-link-colour-text: var(--fds-colour-text-primary-strongest);
+    --fds-navbar-link-colour-text-hover: var(--fds-colour-text-subtler);
+    --fds-navbar-link-colour-text-selected-hover: var(
+        --fds-colour-text-subtler
+    );
+
+    /* Footer */
+    --fds-footer-colour-bg: var(--fds-colour-bg-inverse);
+    --fds-footer-colour-text: var(--fds-colour-text-inverse);
+    --fds-footer-link-colour-text: var(--fds-colour-text-inverse);
+    --fds-footer-link-colour-text-hover: var(--fds-colour-text-inverse);
+    --fds-footer-disclaimer-link-colour-text: var(--fds-colour-text-inverse);
+    --fds-footer-disclaimer-link-colour-text-hover: var(
+        --fds-colour-text-inverse
+    );
+
+    /* Animation */
+    --fds-animation-loading-dots-spinner-colour: var(--fds-colour-icon-primary);
+
+    /* 
+    ========================================================================
+    SHADOW
+    ========================================================================
+    */
+    --fds-shadow-xs-subtle: 0 0 4px 1px
+        rgb(from var(--fds-colour-neutral-50) r g b / 24%);
+    --fds-shadow-xs-strong: 0 0 4px 1px
+        rgb(from var(--fds-colour-neutral-50) r g b / 50%);
+    --fds-shadow-xs-focus-strong: 0 0 4px 1px
+        rgb(from var(--fds-colour-border-focus) r g b / 50%);
+    --fds-shadow-xs-error-strong: 0 0 4px 1px
+        rgb(from var(--fds-colour-border-error) r g b / 50%);
+    --fds-shadow-sm-subtle: 0 2px 4px 0
+        rgb(from var(--fds-colour-neutral-50) r g b / 24%);
+    --fds-shadow-sm-strong: 0 2px 4px 0
+        rgb(from var(--fds-colour-neutral-50) r g b / 50%);
+    --fds-shadow-md-subtle: 0 2px 8px 0
+        rgb(from var(--fds-colour-neutral-50) r g b / 24%);
+    --fds-shadow-md-strong: 0 2px 8px 0
+        rgb(from var(--fds-colour-neutral-50) r g b / 50%);
+    --fds-shadow-lg-subtle: 0 2px 12px 1px
+        rgb(from var(--fds-colour-neutral-50) r g b / 24%);
+    --fds-shadow-lg-strong: 0 2px 12px 1px
+        rgb(from var(--fds-colour-neutral-50) r g b / 50%);
+
+    /*
+    ============================================================================
+    FONT
+    ============================================================================
+    */
+    --fds-font-variant: no-common-ligatures;
+    --fds-font-heading-size-xxl: 3.75rem;
+    --fds-font-heading-size-xl: 3rem;
+    --fds-font-heading-size-lg: 2.5rem;
+    --fds-font-heading-size-md: 2rem;
+    --fds-font-heading-size-sm: 1.75rem;
+    --fds-font-heading-size-xs: 1.5rem;
+    --fds-font-heading-lh-xxl: 4.5rem;
+    --fds-font-heading-lh-xl: 3.5rem;
+    --fds-font-heading-lh-lg: 3rem;
+    --fds-font-heading-lh-md: 2.25rem;
+    --fds-font-heading-lh-sm: 2rem;
+    --fds-font-heading-lh-xs: 1.75rem;
+    --fds-font-heading-ls-xxl: -0.035rem;
+    --fds-font-heading-ls-xl: -0.02rem;
+    --fds-font-heading-ls-lg: -0.02rem;
+    --fds-font-heading-ls-md: 0rem;
+    --fds-font-heading-ls-sm: 0rem;
+    --fds-font-heading-ls-xs: 0rem;
+    --fds-font-weight-light: 300;
+    --fds-font-weight-regular: 400;
+    --fds-font-weight-semibold: 600;
+    --fds-font-weight-bold: 700;
+    --fds-font-family: "Public Sans";
+    --fds-font-body-size-baseline: 1.2rem;
+    --fds-font-body-size-md: 1.125rem;
+    --fds-font-body-size-sm: 1rem;
+    --fds-font-body-size-xs: 0.875rem;
+    --fds-font-body-lh-baseline: 1.5rem;
+    --fds-font-body-lh-md: 1.5rem;
+    --fds-font-body-lh-sm: 1.5rem;
+    --fds-font-body-lh-xs: 1.125rem;
+    --fds-font-body-ls-baseline: 0rem;
+    --fds-font-body-ls-md: 0.009rem;
+    --fds-font-body-ls-sm: 0.008rem;
+    --fds-font-body-ls-xs: 0.008rem;
+    --fds-font-form-label-size: 1.125rem;
+    --fds-font-form-description-size: 1rem;
+    --fds-font-form-label-lh: 1.5rem;
+    --fds-font-form-description-lh: 1.625rem;
+    --fds-font-form-label-ls: 0.009rem;
+    --fds-font-form-description-ls: 0.008rem;
 }
 
 /*
@@ -378,96 +496,4 @@ SEMANTIC COLOURS - DARK MODE
     /* focus ring - adjusted for dark mode */
     --fds-colour-focus-ring: var(--fds-colour-primary-60);
     --fds-colour-focus-ring-inverse: var(--fds-colour-black);
-
-    /*
-    ============================================================================
-    COMPONENT TOKENS
-    ============================================================================
-    */
-
-    /* Button */
-    --fds-button-radius: var(--fds-radius-md);
-    --fds-button-default-colour-bg: var(--fds-colour-bg-primary);
-    --fds-button-default-colour-bg-hover: var(--fds-colour-bg-primary-hover);
-    --fds-button-default-colour-text: var(--fds-colour-text-inverse);
-    --fds-button-secondary-colour-border: var(--fds-colour-border-primary);
-    --fds-button-secondary-colour-text: var(--fds-colour-text-primary);
-    --fds-button-light-colour-text: var(--fds-colour-text-primary);
-    --fds-button-link-colour-text: var(--fds-colour-text-primary);
-
-    /* Animation */
-    --fds-animation-loading-dots-spinner-colour: var(--fds-colour-icon-primary);
-
-    /* Navbar */
-    --fds-navbar-full-height: 6rem;
-    --fds-navbar-full-logo-height: 3rem;
-    --fds-navbar-compressed-height: 5rem;
-    --fds-navbar-compressed-logo-height: 2rem;
-    --fds-navbar-mobile-height: 4rem;
-    --fds-navbar-mobile-logo-height: 2rem;
-    --fds-navbar-colour-bg: var(--fds-colour-bg);
-    --fds-navbar-colour-icon: var(--fds-colour-icon);
-    --fds-navbar-link-colour-text: var(--fds-colour-text-primary-strongest);
-    --fds-navbar-link-colour-text-hover: var(--fds-colour-text-subtler);
-    --fds-navbar-link-colour-text-selected-hover: var(
-        --fds-colour-text-subtler
-    );
-
-    /* Footer */
-    --fds-footer-colour-bg: var(--fds-colour-bg-inverse);
-    --fds-footer-colour-text: var(--fds-colour-text-inverse);
-    --fds-footer-link-colour-text: var(--fds-colour-text-inverse);
-    --fds-footer-link-colour-text-hover: var(--fds-colour-text-inverse);
-    --fds-footer-disclaimer-link-colour-text: var(--fds-colour-text-inverse);
-    --fds-footer-disclaimer-link-colour-text-hover: var(
-        --fds-colour-text-inverse
-    );
-
-    /*
-    ============================================================================
-    FONT
-    ============================================================================
-    */
-    --fds-font-variant: no-common-ligatures;
-    --fds-font-heading-size-xxl: 3.75rem;
-    --fds-font-heading-size-xl: 3rem;
-    --fds-font-heading-size-lg: 2.5rem;
-    --fds-font-heading-size-md: 2rem;
-    --fds-font-heading-size-sm: 1.75rem;
-    --fds-font-heading-size-xs: 1.5rem;
-    --fds-font-heading-lh-xxl: 4.5rem;
-    --fds-font-heading-lh-xl: 3.5rem;
-    --fds-font-heading-lh-lg: 3rem;
-    --fds-font-heading-lh-md: 2.25rem;
-    --fds-font-heading-lh-sm: 2rem;
-    --fds-font-heading-lh-xs: 1.75rem;
-    --fds-font-heading-ls-xxl: -0.035rem;
-    --fds-font-heading-ls-xl: -0.02rem;
-    --fds-font-heading-ls-lg: -0.02rem;
-    --fds-font-heading-ls-md: 0rem;
-    --fds-font-heading-ls-sm: 0rem;
-    --fds-font-heading-ls-xs: 0rem;
-    --fds-font-weight-light: 300;
-    --fds-font-weight-regular: 400;
-    --fds-font-weight-semibold: 600;
-    --fds-font-weight-bold: 700;
-    --fds-font-family: "Public Sans";
-    --fds-font-body-size-baseline: 1.2rem;
-    --fds-font-body-size-md: 1.125rem;
-    --fds-font-body-size-sm: 1rem;
-    --fds-font-body-size-xs: 0.875rem;
-    --fds-font-body-lh-baseline: 1.5rem;
-    --fds-font-body-lh-md: 1.5rem;
-    --fds-font-body-lh-sm: 1.5rem;
-    --fds-font-body-lh-xs: 1.125rem;
-    --fds-font-body-ls-baseline: 0rem;
-    --fds-font-body-ls-md: 0.009rem;
-    --fds-font-body-ls-sm: 0.008rem;
-    --fds-font-body-ls-xs: 0.008rem;
-    --fds-font-form-label-size: 1.125rem;
-    --fds-font-form-description-size: 1rem;
-    --fds-font-form-label-lh: 1.5rem;
-    --fds-font-form-description-lh: 1.625rem;
-    --fds-font-form-label-ls: 0.009rem;
-    --fds-font-form-description-ls: 0.008rem;
 }

package/theme/styles/supportgowhere.css

@@ -94,58 +94,10 @@ PRIMITIVES COLORS
     --fds-colour-info-90: #CCE3F1;
     --fds-colour-info-95: #E3F1F8;
     --fds-colour-info-100: #F4FAFD;
-    --fds-colour-white: #FFF;
-    --fds-colour-black: #000;
+    --fds-colour-white: #FFFFFF;
+    --fds-colour-black: #000000;
     --fds-colour-primary-inverse: #FEAB10;
 
-    /*
-    ============================================================================
-    FONT
-    ============================================================================
-    */
-    --fds-font-variant: no-common-ligatures;
-    --fds-font-heading-size-xxl: 3rem;
-    --fds-font-heading-size-xl: 2.5rem;
-    --fds-font-heading-size-lg: 2rem;
-    --fds-font-heading-size-md: 1.625rem;
-    --fds-font-heading-size-sm: 1.375rem;
-    --fds-font-heading-size-xs: 1.125rem;
-    --fds-font-heading-lh-xxl: 3.5rem;
-    --fds-font-heading-lh-xl: 3rem;
-    --fds-font-heading-lh-lg: 2.5rem;
-    --fds-font-heading-lh-md: 2.25rem;
-    --fds-font-heading-lh-sm: 1.75rem;
-    --fds-font-heading-lh-xs: 1.625rem;
-    --fds-font-heading-ls-xxl: -0.035rem;
-    --fds-font-heading-ls-xl: -0.02rem;
-    --fds-font-heading-ls-lg: -0.02rem;
-    --fds-font-heading-ls-md: 0rem;
-    --fds-font-heading-ls-sm: 0rem;
-    --fds-font-heading-ls-xs: 0rem;
-    --fds-font-weight-light: 300;
-    --fds-font-weight-regular: 400;
-    --fds-font-weight-semibold: 600;
-    --fds-font-weight-bold: 700;
-    --fds-font-family: "Libre Franklin";
-    --fds-font-body-size-baseline: 1.125rem;
-    --fds-font-body-size-md: 1rem;
-    --fds-font-body-size-sm: 0.875rem;
-    --fds-font-body-size-xs: 0.75rem;
-    --fds-font-body-lh-baseline: 1.625rem;
-    --fds-font-body-lh-md: 1.5rem;
-    --fds-font-body-lh-sm: 1.625rem;
-    --fds-font-body-lh-xs: 1.25rem;
-    --fds-font-body-ls-baseline: 0rem;
-    --fds-font-body-ls-md: 0.009rem;
-    --fds-font-body-ls-sm: 0.008rem;
-    --fds-font-body-ls-xs: 0.008rem;
-    --fds-font-form-label-size: 1rem;
-    --fds-font-form-description-size: 0.875rem;
-    --fds-font-form-label-lh: 1.5rem;
-    --fds-font-form-description-lh: 1.625rem;
-    --fds-font-form-label-ls: 0.009rem;
-    --fds-font-form-description-ls: 0.008rem;
-
     /*
     ============================================================================
     SEMANTIC COLOURS - LIGHT MODE
@@ -279,6 +231,124 @@ PRIMITIVES COLORS
     /* focus ring */
     --fds-colour-focus-ring: var(--fds-colour-primary-50);
     --fds-colour-focus-ring-inverse: var(--fds-colour-white);
+
+    /* 
+    ========================================================================
+    COMPONENT TOKENS
+    ========================================================================
+    */
+
+    /* Button */
+    --fds-button-radius: var(--fds-radius-sm);
+    --fds-button-default-colour-bg: var(--fds-colour-bg-primary);
+    --fds-button-default-colour-bg-hover: var(--fds-colour-bg-primary-hover);
+    --fds-button-default-colour-text: var(--fds-colour-text-inverse);
+    --fds-button-secondary-colour-border: var(--fds-colour-border-primary);
+    --fds-button-secondary-colour-text: var(--fds-colour-text-primary);
+    --fds-button-light-colour-text: var(--fds-colour-text-primary);
+    --fds-button-link-colour-text: var(--fds-colour-text-primary);
+
+    /* Navbar */
+    --fds-navbar-full-height: 6rem;
+    --fds-navbar-full-logo-height: 2rem;
+    --fds-navbar-compressed-height: 4rem;
+    --fds-navbar-compressed-logo-height: 1.5rem;
+    --fds-navbar-mobile-height: 3.5rem;
+    --fds-navbar-mobile-logo-height: 1.5rem;
+    --fds-navbar-colour-bg: var(--fds-colour-bg);
+    --fds-navbar-colour-icon: var(--fds-colour-icon);
+    --fds-navbar-link-colour-text: var(--fds-colour-text);
+    --fds-navbar-link-colour-text-hover: var(--fds-colour-text-hover);
+    --fds-navbar-link-colour-text-selected-hover: var(
+        --fds-colour-text-selected-hover
+    );
+
+    /* Footer */
+    --fds-footer-colour-bg: var(--fds-colour-bg-strong);
+    --fds-footer-colour-text: var(--fds-colour-text);
+    --fds-footer-link-colour-text: var(--fds-colour-text);
+    --fds-footer-link-colour-text-hover: var(--fds-colour-text-hover);
+    --fds-footer-disclaimer-link-colour-text: var(--fds-colour-text);
+    --fds-footer-disclaimer-link-colour-text-hover: var(
+        --fds-colour-text-subtler
+    );
+
+    /* Animation */
+    --fds-animation-loading-dots-spinner-colour: var(--fds-colour-icon-primary);
+
+    /* 
+    ========================================================================
+    SHADOW
+    ========================================================================
+    */
+    --fds-shadow-xs-subtle: 0 0 4px 1px
+        rgb(from var(--fds-colour-neutral-50) r g b / 24%);
+    --fds-shadow-xs-strong: 0 0 4px 1px
+        rgb(from var(--fds-colour-neutral-50) r g b / 50%);
+    --fds-shadow-xs-focus-strong: 0 0 4px 1px
+        rgb(from var(--fds-colour-border-focus) r g b / 50%);
+    --fds-shadow-xs-error-strong: 0 0 4px 1px
+        rgb(from var(--fds-colour-border-error) r g b / 50%);
+    --fds-shadow-sm-subtle: 0 2px 4px 0
+        rgb(from var(--fds-colour-neutral-50) r g b / 24%);
+    --fds-shadow-sm-strong: 0 2px 4px 0
+        rgb(from var(--fds-colour-neutral-50) r g b / 50%);
+    --fds-shadow-md-subtle: 0 2px 8px 0
+        rgb(from var(--fds-colour-neutral-50) r g b / 24%);
+    --fds-shadow-md-strong: 0 2px 8px 0
+        rgb(from var(--fds-colour-neutral-50) r g b / 50%);
+    --fds-shadow-lg-subtle: 0 2px 12px 1px
+        rgb(from var(--fds-colour-neutral-50) r g b / 24%);
+    --fds-shadow-lg-strong: 0 2px 12px 1px
+        rgb(from var(--fds-colour-neutral-50) r g b / 50%);
+
+    /*
+    ============================================================================
+    FONT
+    ============================================================================
+    */
+    --fds-font-variant: no-common-ligatures;
+    --fds-font-heading-size-xxl: 3rem;
+    --fds-font-heading-size-xl: 2.5rem;
+    --fds-font-heading-size-lg: 2rem;
+    --fds-font-heading-size-md: 1.625rem;
+    --fds-font-heading-size-sm: 1.375rem;
+    --fds-font-heading-size-xs: 1.125rem;
+    --fds-font-heading-lh-xxl: 3.5rem;
+    --fds-font-heading-lh-xl: 3rem;
+    --fds-font-heading-lh-lg: 2.5rem;
+    --fds-font-heading-lh-md: 2.25rem;
+    --fds-font-heading-lh-sm: 1.75rem;
+    --fds-font-heading-lh-xs: 1.625rem;
+    --fds-font-heading-ls-xxl: -0.035rem;
+    --fds-font-heading-ls-xl: -0.02rem;
+    --fds-font-heading-ls-lg: -0.02rem;
+    --fds-font-heading-ls-md: 0rem;
+    --fds-font-heading-ls-sm: 0rem;
+    --fds-font-heading-ls-xs: 0rem;
+    --fds-font-weight-light: 300;
+    --fds-font-weight-regular: 400;
+    --fds-font-weight-semibold: 600;
+    --fds-font-weight-bold: 700;
+    --fds-font-family: "Libre Franklin";
+    --fds-font-body-size-baseline: 1.125rem;
+    --fds-font-body-size-md: 1rem;
+    --fds-font-body-size-sm: 0.875rem;
+    --fds-font-body-size-xs: 0.75rem;
+    --fds-font-body-lh-baseline: 1.625rem;
+    --fds-font-body-lh-md: 1.5rem;
+    --fds-font-body-lh-sm: 1.625rem;
+    --fds-font-body-lh-xs: 1.25rem;
+    --fds-font-body-ls-baseline: 0rem;
+    --fds-font-body-ls-md: 0.009rem;
+    --fds-font-body-ls-sm: 0.008rem;
+    --fds-font-body-ls-xs: 0.008rem;
+    --fds-font-form-label-size: 1rem;
+    --fds-font-form-description-size: 0.875rem;
+    --fds-font-form-label-lh: 1.5rem;
+    --fds-font-form-description-lh: 1.625rem;
+    --fds-font-form-label-ls: 0.009rem;
+    --fds-font-form-description-ls: 0.008rem;
 }
 
 /*

package/theme/theme-provider/breakpoint.js

@@ -1,2 +1,2 @@
-import{Breakpoint as n}from"../tokens/breakpoint.js";import{parsePxOrRemValue as m,parseCSSVariableValue as i}from"../utils/css-variable.js";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import"react";import"../../util/string-helper.js";import"./context.js";const s="fds-breakpoint-";function t(t){const e=document.body,a=window.innerWidth;[...e.classList].forEach((n=>{n.startsWith(s)&&e.classList.remove(n)}));const o=function(m){const s=n=>{const s=i(n,m);return s||(m!==document.documentElement?i(n,document.documentElement):s)};return[{key:"xxs",min:s(n["xxs-min"]),max:s(n["xxs-max"])},{key:"xs",min:s(n["xs-min"]),max:s(n["xs-max"])},{key:"sm",min:s(n["sm-min"]),max:s(n["sm-max"])},{key:"md",min:s(n["md-min"]),max:s(n["md-max"])},{key:"lg",min:s(n["lg-min"]),max:s(n["lg-max"])},{key:"xl",min:s(n["xl-min"]),max:s(n["xl-max"])},{key:"xxl",min:s(n["xxl-min"]),max:1/0}]}(t);o.forEach((n=>{const i=m(n.min),t=n.max===1/0?1/0:m(n.max),o=a>=i,r=t!==1/0&&a<=t;o&&(t===1/0||r)&&e.classList.add(`${s}${n.key}`),o&&e.classList.add(`${s}${n.key}-min`),r&&e.classList.add(`${s}${n.key}-max`)}))}function e(n){if(!globalThis.window)return;const m=()=>{t(n)};return m(),globalThis.window.addEventListener("resize",m),()=>{globalThis.window.removeEventListener("resize",m)}}export{t as applyBreakpointClasses,e as setupBreakpointListener};
+import{Breakpoint as n}from"../tokens/breakpoint.js";import{parsePxOrRemValue as i,parseCSSVariableValue as m}from"../utils/css-variable.js";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import"react";import"../../util/simple-id-generator.js";import"../../util/string-helper.js";import"@react-aria/live-announcer";import"./context.js";const e="fds-breakpoint-";function t(t){const s=document.body,a=window.innerWidth;[...s.classList].forEach((n=>{n.startsWith(e)&&s.classList.remove(n)}));const o=function(i){const e=n=>{const e=m(n,i);return e||(i!==document.documentElement?m(n,document.documentElement):e)};return[{key:"xxs",min:e(n["xxs-min"]),max:e(n["xxs-max"])},{key:"xs",min:e(n["xs-min"]),max:e(n["xs-max"])},{key:"sm",min:e(n["sm-min"]),max:e(n["sm-max"])},{key:"md",min:e(n["md-min"]),max:e(n["md-max"])},{key:"lg",min:e(n["lg-min"]),max:e(n["lg-max"])},{key:"xl",min:e(n["xl-min"]),max:e(n["xl-max"])},{key:"xxl",min:e(n["xxl-min"]),max:1/0}]}(t);o.forEach((n=>{const m=i(n.min),t=n.max===1/0?1/0:i(n.max),o=a>=m,r=t!==1/0&&a<=t;o&&(t===1/0||r)&&s.classList.add(`${e}${n.key}`),o&&s.classList.add(`${e}${n.key}-min`),r&&s.classList.add(`${e}${n.key}-max`)}))}function s(n){if(!globalThis.window)return;const i=()=>{t(n)};return i(),globalThis.window.addEventListener("resize",i),()=>{globalThis.window.removeEventListener("resize",i)}}export{t as applyBreakpointClasses,s as setupBreakpointListener};
 //# sourceMappingURL=breakpoint.js.map

package/theme/theme-provider/breakpoint.js.map

@@ -1 +1 @@
-{"version":3,"file":"breakpoint.js","sources":["../../../src/theme/theme-provider/breakpoint.ts"],"sourcesContent":["import { Breakpoint } from \"../tokens/breakpoint\";\nimport type { CSSVariableString } from \"../types\";\nimport { parseCSSVariableValue, parsePxOrRemValue } from \"../utils\";\n\nfunction getBreakpointRanges(sourceElement: HTMLElement) {\n    const getBreakpointValue = (token: CSSVariableString) => {\n        const scopedValue = parseCSSVariableValue(token, sourceElement);\n        if (scopedValue) return scopedValue;\n\n        if (sourceElement !== document.documentElement) {\n            return parseCSSVariableValue(token, document.documentElement);\n        }\n\n        return scopedValue;\n    };\n\n    return [\n        {\n            key: \"xxs\",\n            min: getBreakpointValue(Breakpoint[\"xxs-min\"]),\n            max: getBreakpointValue(Breakpoint[\"xxs-max\"]),\n        },\n        {\n            key: \"xs\",\n            min: getBreakpointValue(Breakpoint[\"xs-min\"]),\n            max: getBreakpointValue(Breakpoint[\"xs-max\"]),\n        },\n        {\n            key: \"sm\",\n            min: getBreakpointValue(Breakpoint[\"sm-min\"]),\n            max: getBreakpointValue(Breakpoint[\"sm-max\"]),\n        },\n        {\n            key: \"md\",\n            min: getBreakpointValue(Breakpoint[\"md-min\"]),\n            max: getBreakpointValue(Breakpoint[\"md-max\"]),\n        },\n        {\n            key: \"lg\",\n            min: getBreakpointValue(Breakpoint[\"lg-min\"]),\n            max: getBreakpointValue(Breakpoint[\"lg-max\"]),\n        },\n        {\n            key: \"xl\",\n            min: getBreakpointValue(Breakpoint[\"xl-min\"]),\n            max: getBreakpointValue(Breakpoint[\"xl-max\"]),\n        },\n        {\n            key: \"xxl\",\n            min: getBreakpointValue(Breakpoint[\"xxl-min\"]),\n            max: Infinity,\n        },\n    ] as const;\n}\n\nconst BREAKPOINT_CLASS_PREFIX = \"fds-breakpoint-\";\n\nexport function applyBreakpointClasses(sourceElement: HTMLElement) {\n    const body = document.body;\n    const width = window.innerWidth;\n\n    [...body.classList].forEach((cls) => {\n        if (cls.startsWith(BREAKPOINT_CLASS_PREFIX)) {\n            body.classList.remove(cls);\n        }\n    });\n\n    const BREAKPOINT_RANGES = getBreakpointRanges(sourceElement);\n\n    BREAKPOINT_RANGES.forEach((range) => {\n        const minValue = parsePxOrRemValue(range.min);\n        const maxValue =\n            range.max === Infinity\n                ? Infinity\n                : parsePxOrRemValue(range.max as string);\n\n        const isMinMatched = width >= minValue;\n        const isMaxMatched = maxValue === Infinity ? false : width <= maxValue;\n        const isWithinRange =\n            isMinMatched && (maxValue === Infinity || isMaxMatched);\n\n        if (isWithinRange) {\n            body.classList.add(`${BREAKPOINT_CLASS_PREFIX}${range.key}`);\n        }\n\n        if (isMinMatched) {\n            body.classList.add(`${BREAKPOINT_CLASS_PREFIX}${range.key}-min`);\n        }\n\n        if (isMaxMatched) {\n            body.classList.add(`${BREAKPOINT_CLASS_PREFIX}${range.key}-max`);\n        }\n    });\n}\n\nexport function setupBreakpointListener(sourceElement: HTMLElement) {\n    if (!globalThis.window) return;\n\n    const handleBreakpointChange = () => {\n        applyBreakpointClasses(sourceElement);\n    };\n\n    handleBreakpointChange();\n    globalThis.window.addEventListener(\"resize\", handleBreakpointChange);\n\n    return () => {\n        globalThis.window.removeEventListener(\"resize\", handleBreakpointChange);\n    };\n}\n"],"names":["BREAKPOINT_CLASS_PREFIX","applyBreakpointClasses","sourceElement","body","document","width","window","innerWidth","classList","forEach","cls","startsWith","remove","BREAKPOINT_RANGES","getBreakpointValue","token","scopedValue","parseCSSVariableValue","documentElement","key","min","Breakpoint","max","Infinity","getBreakpointRanges","range","minValue","parsePxOrRemValue","maxValue","isMinMatched","isMaxMatched","add","setupBreakpointListener","globalThis","handleBreakpointChange","addEventListener","removeEventListener"],"mappings":"oSAuDA,MAAMA,EAA0B,kBAE1B,SAAUC,EAAuBC,GACnC,MAAMC,EAAOC,SAASD,KAChBE,EAAQC,OAAOC,WAErB,IAAIJ,EAAKK,WAAWC,SAASC,IACrBA,EAAIC,WAAWX,IACfG,EAAKK,UAAUI,OAAOF,EAC1B,IAGJ,MAAMG,EA/DV,SAA6BX,GACzB,MAAMY,EAAsBC,IACxB,MAAMC,EAAcC,EAAsBF,EAAOb,GACjD,OAAIc,IAEAd,IAAkBE,SAASc,gBACpBD,EAAsBF,EAAOX,SAASc,iBAG1CF,EAAW,EAGtB,MAAO,CACH,CACIG,IAAK,MACLC,IAAKN,EAAmBO,EAAW,YACnCC,IAAKR,EAAmBO,EAAW,aAEvC,CACIF,IAAK,KACLC,IAAKN,EAAmBO,EAAW,WACnCC,IAAKR,EAAmBO,EAAW,YAEvC,CACIF,IAAK,KACLC,IAAKN,EAAmBO,EAAW,WACnCC,IAAKR,EAAmBO,EAAW,YAEvC,CACIF,IAAK,KACLC,IAAKN,EAAmBO,EAAW,WACnCC,IAAKR,EAAmBO,EAAW,YAEvC,CACIF,IAAK,KACLC,IAAKN,EAAmBO,EAAW,WACnCC,IAAKR,EAAmBO,EAAW,YAEvC,CACIF,IAAK,KACLC,IAAKN,EAAmBO,EAAW,WACnCC,IAAKR,EAAmBO,EAAW,YAEvC,CACIF,IAAK,MACLC,IAAKN,EAAmBO,EAAW,YACnCC,IAAKC,KAGjB,CAc8BC,CAAoBtB,GAE9CW,EAAkBJ,SAASgB,IACvB,MAAMC,EAAWC,EAAkBF,EAAML,KACnCQ,EACFH,EAAMH,MAAQC,IACRA,IACAI,EAAkBF,EAAMH,KAE5BO,EAAexB,GAASqB,EACxBI,EAAeF,IAAaL,KAAmBlB,GAASuB,EAE1DC,IAAiBD,IAAaL,KAAYO,IAG1C3B,EAAKK,UAAUuB,IAAI,GAAG/B,IAA0ByB,EAAMN,OAGtDU,GACA1B,EAAKK,UAAUuB,IAAI,GAAG/B,IAA0ByB,EAAMN,WAGtDW,GACA3B,EAAKK,UAAUuB,IAAI,GAAG/B,IAA0ByB,EAAMN,UAC1D,GAER,CAEM,SAAUa,EAAwB9B,GACpC,IAAK+B,WAAW3B,OAAQ,OAExB,MAAM4B,EAAyB,KAC3BjC,EAAuBC,EAAc,EAMzC,OAHAgC,IACAD,WAAW3B,OAAO6B,iBAAiB,SAAUD,GAEtC,KACHD,WAAW3B,OAAO8B,oBAAoB,SAAUF,EAAuB,CAE/E"}
+{"version":3,"file":"breakpoint.js","sources":["../../../src/theme/theme-provider/breakpoint.ts"],"sourcesContent":["import { Breakpoint } from \"../tokens/breakpoint\";\nimport type { CSSVariableString } from \"../types\";\nimport { parseCSSVariableValue, parsePxOrRemValue } from \"../utils\";\n\nfunction getBreakpointRanges(sourceElement: HTMLElement) {\n    const getBreakpointValue = (token: CSSVariableString) => {\n        const scopedValue = parseCSSVariableValue(token, sourceElement);\n        if (scopedValue) return scopedValue;\n\n        if (sourceElement !== document.documentElement) {\n            return parseCSSVariableValue(token, document.documentElement);\n        }\n\n        return scopedValue;\n    };\n\n    return [\n        {\n            key: \"xxs\",\n            min: getBreakpointValue(Breakpoint[\"xxs-min\"]),\n            max: getBreakpointValue(Breakpoint[\"xxs-max\"]),\n        },\n        {\n            key: \"xs\",\n            min: getBreakpointValue(Breakpoint[\"xs-min\"]),\n            max: getBreakpointValue(Breakpoint[\"xs-max\"]),\n        },\n        {\n            key: \"sm\",\n            min: getBreakpointValue(Breakpoint[\"sm-min\"]),\n            max: getBreakpointValue(Breakpoint[\"sm-max\"]),\n        },\n        {\n            key: \"md\",\n            min: getBreakpointValue(Breakpoint[\"md-min\"]),\n            max: getBreakpointValue(Breakpoint[\"md-max\"]),\n        },\n        {\n            key: \"lg\",\n            min: getBreakpointValue(Breakpoint[\"lg-min\"]),\n            max: getBreakpointValue(Breakpoint[\"lg-max\"]),\n        },\n        {\n            key: \"xl\",\n            min: getBreakpointValue(Breakpoint[\"xl-min\"]),\n            max: getBreakpointValue(Breakpoint[\"xl-max\"]),\n        },\n        {\n            key: \"xxl\",\n            min: getBreakpointValue(Breakpoint[\"xxl-min\"]),\n            max: Infinity,\n        },\n    ] as const;\n}\n\nconst BREAKPOINT_CLASS_PREFIX = \"fds-breakpoint-\";\n\nexport function applyBreakpointClasses(sourceElement: HTMLElement) {\n    const body = document.body;\n    const width = window.innerWidth;\n\n    [...body.classList].forEach((cls) => {\n        if (cls.startsWith(BREAKPOINT_CLASS_PREFIX)) {\n            body.classList.remove(cls);\n        }\n    });\n\n    const BREAKPOINT_RANGES = getBreakpointRanges(sourceElement);\n\n    BREAKPOINT_RANGES.forEach((range) => {\n        const minValue = parsePxOrRemValue(range.min);\n        const maxValue =\n            range.max === Infinity\n                ? Infinity\n                : parsePxOrRemValue(range.max as string);\n\n        const isMinMatched = width >= minValue;\n        const isMaxMatched = maxValue === Infinity ? false : width <= maxValue;\n        const isWithinRange =\n            isMinMatched && (maxValue === Infinity || isMaxMatched);\n\n        if (isWithinRange) {\n            body.classList.add(`${BREAKPOINT_CLASS_PREFIX}${range.key}`);\n        }\n\n        if (isMinMatched) {\n            body.classList.add(`${BREAKPOINT_CLASS_PREFIX}${range.key}-min`);\n        }\n\n        if (isMaxMatched) {\n            body.classList.add(`${BREAKPOINT_CLASS_PREFIX}${range.key}-max`);\n        }\n    });\n}\n\nexport function setupBreakpointListener(sourceElement: HTMLElement) {\n    if (!globalThis.window) return;\n\n    const handleBreakpointChange = () => {\n        applyBreakpointClasses(sourceElement);\n    };\n\n    handleBreakpointChange();\n    globalThis.window.addEventListener(\"resize\", handleBreakpointChange);\n\n    return () => {\n        globalThis.window.removeEventListener(\"resize\", handleBreakpointChange);\n    };\n}\n"],"names":["BREAKPOINT_CLASS_PREFIX","applyBreakpointClasses","sourceElement","body","document","width","window","innerWidth","classList","forEach","cls","startsWith","remove","BREAKPOINT_RANGES","getBreakpointValue","token","scopedValue","parseCSSVariableValue","documentElement","key","min","Breakpoint","max","Infinity","getBreakpointRanges","range","minValue","parsePxOrRemValue","maxValue","isMinMatched","isMaxMatched","add","setupBreakpointListener","globalThis","handleBreakpointChange","addEventListener","removeEventListener"],"mappings":"iXAuDA,MAAMA,EAA0B,kBAE1B,SAAUC,EAAuBC,GACnC,MAAMC,EAAOC,SAASD,KAChBE,EAAQC,OAAOC,WAErB,IAAIJ,EAAKK,WAAWC,SAASC,IACrBA,EAAIC,WAAWX,IACfG,EAAKK,UAAUI,OAAOF,EAC1B,IAGJ,MAAMG,EA/DV,SAA6BX,GACzB,MAAMY,EAAsBC,IACxB,MAAMC,EAAcC,EAAsBF,EAAOb,GACjD,OAAIc,IAEAd,IAAkBE,SAASc,gBACpBD,EAAsBF,EAAOX,SAASc,iBAG1CF,EAAW,EAGtB,MAAO,CACH,CACIG,IAAK,MACLC,IAAKN,EAAmBO,EAAW,YACnCC,IAAKR,EAAmBO,EAAW,aAEvC,CACIF,IAAK,KACLC,IAAKN,EAAmBO,EAAW,WACnCC,IAAKR,EAAmBO,EAAW,YAEvC,CACIF,IAAK,KACLC,IAAKN,EAAmBO,EAAW,WACnCC,IAAKR,EAAmBO,EAAW,YAEvC,CACIF,IAAK,KACLC,IAAKN,EAAmBO,EAAW,WACnCC,IAAKR,EAAmBO,EAAW,YAEvC,CACIF,IAAK,KACLC,IAAKN,EAAmBO,EAAW,WACnCC,IAAKR,EAAmBO,EAAW,YAEvC,CACIF,IAAK,KACLC,IAAKN,EAAmBO,EAAW,WACnCC,IAAKR,EAAmBO,EAAW,YAEvC,CACIF,IAAK,MACLC,IAAKN,EAAmBO,EAAW,YACnCC,IAAKC,KAGjB,CAc8BC,CAAoBtB,GAE9CW,EAAkBJ,SAASgB,IACvB,MAAMC,EAAWC,EAAkBF,EAAML,KACnCQ,EACFH,EAAMH,MAAQC,IACRA,IACAI,EAAkBF,EAAMH,KAE5BO,EAAexB,GAASqB,EACxBI,EAAeF,IAAaL,KAAmBlB,GAASuB,EAE1DC,IAAiBD,IAAaL,KAAYO,IAG1C3B,EAAKK,UAAUuB,IAAI,GAAG/B,IAA0ByB,EAAMN,OAGtDU,GACA1B,EAAKK,UAAUuB,IAAI,GAAG/B,IAA0ByB,EAAMN,WAGtDW,GACA3B,EAAKK,UAAUuB,IAAI,GAAG/B,IAA0ByB,EAAMN,UAC1D,GAER,CAEM,SAAUa,EAAwB9B,GACpC,IAAK+B,WAAW3B,OAAQ,OAExB,MAAM4B,EAAyB,KAC3BjC,EAAuBC,EAAc,EAMzC,OAHAgC,IACAD,WAAW3B,OAAO6B,iBAAiB,SAAUD,GAEtC,KACHD,WAAW3B,OAAO8B,oBAAoB,SAAUF,EAAuB,CAE/E"}

package/theme/theme-provider/index.js

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import{forwardRef as t,useState as r,useEffect as o,useMemo as m}from"react";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import{mergeRefs as s}from"../../util/merge-refs.js";import"../../util/string-helper.js";import{useIsomorphicLayoutEffect as i}from"../../util/use-isomorphic-layout-effect.js";import{setupBreakpointListener as l}from"./breakpoint.js";import{ThemeContext as n}from"./context.js";import{listenToSystemColourMode as a}from"./system-colour-mode.js";const c=t((({children:t,theme:c="lifesg",mode:d="auto",className:u,style:f},p)=>{const h="auto"!==d,[j,y]=r(h?d:"light"),[g,x]=r(null);i((()=>{const e=null!=g?g:document.documentElement;return l(e)}),[g,c,j]),o((()=>{if(!h)return a(y);y(d)}),[h,d]);const v=m((()=>({theme:c,mode:j,themeElement:g})),[c,j,g]);return e(n.Provider,{value:v,children:e("div",{ref:s(p,x),"data-fds-theme":c,"data-fds-theme-mode":j,className:u,style:f,children:t})})}));export{c as ThemeProvider};
+import{jsx as e}from"react/jsx-runtime";import{forwardRef as t,useState as r,useEffect as o,useMemo as m}from"react";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import{mergeRefs as i}from"../../util/merge-refs.js";import"../../util/simple-id-generator.js";import"../../util/string-helper.js";import"@react-aria/live-announcer";import{useIsomorphicLayoutEffect as s}from"../../util/use-isomorphic-layout-effect.js";import{setupBreakpointListener as l}from"./breakpoint.js";import{ThemeContext as n}from"./context.js";import{listenToSystemColourMode as a}from"./system-colour-mode.js";const c=t((({children:t,theme:c="lifesg",mode:u="auto",className:d,style:p},f)=>{const h="auto"!==u,[j,y]=r(h?u:"light"),[g,v]=r(null);s((()=>{const e=null!=g?g:document.documentElement;return l(e)}),[g,c,j]),o((()=>{if(!h)return a(y);y(u)}),[h,u]);const x=m((()=>({theme:c,mode:j,themeElement:g})),[c,j,g]);return e(n.Provider,{value:x,children:e("div",{ref:i(f,v),"data-fds-theme":c,"data-fds-theme-mode":j,className:d,style:p,children:t})})}));export{c as ThemeProvider};
 //# sourceMappingURL=index.js.map