@phillips/seldon 1.132.0 → 1.133.0

package/dist/scss/_vars.scss.js

@@ -0,0 +1,438 @@
+const e = `// prefix
+$px: seldon;
+
+////////////////////////
+/// COlORS:
+///////////////////////
+
+// Primary color palette
+$pure-black: #000;
+$primary-black: #323232;
+$white: #fff;
+
+// Secondary color palette
+$soft-black: #545454;
+$dark-gray: #7b7474;
+$soft-black-2: #535050;
+
+// Utilititarian color palette
+$keyline-gray: #949494;
+$medium-gray: #c3bebb;
+$light-gray: #eceae7;
+$off-white: #f4f2f1;
+
+// Notification color palette
+$error-red: #f00;
+$error-pink: rgba(255, 229, 229, 90%);
+$warn-yellow: #d6d141;
+$post-sale-pink: #ff0086;
+$cta-blue: #4a90e2;
+
+// AM color palette
+$widget-blue: #4a90e2;
+$widget-green: #6a9c53;
+$widget-maroon: #6b0000;
+$widget-red: #b00000;
+$clock-widget-blue: $widget-blue;
+$clock-widget-green: $widget-green;
+$clock-widget-maroon: $widget-maroon;
+$clock-widget-red: $widget-red;
+
+// Articker color palette
+$articker-red: #fc1e2b;
+$articker-orange: #ff8201;
+$articker-red-orange-gradient: linear-gradient(90deg, #fc1e2b, #ff8201);
+$overlay-black: rgba(0, 0, 0, 80%);
+
+// Legacy mapping
+$pure-white: $white;
+$post-sale-magenta: $post-sale-pink;
+
+// Text variables
+$header-color: $pure-black;
+$text-color: $soft-black;
+
+// Interactive Colors
+$button-hover: #75716f;
+
+// Misc. Colors
+$countdown-compact: #b40919;
+
+////////////////////////
+/// FONTS:
+///////////////////////
+// Font-variables
+$DistinctDisplay: 'DistinctDisplay';
+$DistinctDisplayItalic: 'DistinctDisplayItalic';
+$DistinctItalic: 'DistinctItalic';
+$DistinctText: 'DistinctText';
+$Distinct: 'Distinct';
+$header-family: $DistinctDisplay;
+$text-family: $DistinctText;
+
+////////////////////////
+/// LABEL TOKENS:
+///////////////////////
+
+// Used with the labelText mixin
+// @include labelText($label)
+$button: 'button';
+$link: 'link';
+$email: 'email';
+$label: 'label';
+$badge: 'badge';
+
+// Used with the hText mixin
+$blockquote: 'blockquote';
+$heading1: 'heading1';
+$heading2: 'heading2';
+$heading3: 'heading3';
+$heading4: 'heading4';
+$heading5: 'heading5';
+$title1: 'title1';
+$title2: 'title2';
+$title3: 'title3';
+$title4: 'title4';
+$body1: 'body1';
+$body2: 'body2';
+$body3: 'body3';
+$string1: 'string1';
+$string2: 'string2';
+$string3: 'string3';
+$snwHeaderLink: 'snwHeaderLink';
+$snwFlyoutLink: 'snwFlyoutLink';
+$snwHeadingHero1: 'snwHeadingHero1';
+$snwHeadingHero2: 'snwHeadingHero2';
+$text-tokens: $button, $link, $email, $label, $badge, $blockquote, $heading1, $heading2, $heading3, $heading4, $heading5,
+  $title1, $title2, $title3, $title4, $body1, $body2, $body3, $string1, $string2, $string3, $snwFlyoutLink,
+  $snwHeaderLink, $snwHeadingHero1, $snwHeadingHero2;
+
+////////////////////////
+/// Breakpoint TOKENS to be used for min-width comparisons, make sure they match BREAKPOINTS in constants.ts
+///////////////////////
+$breakpoint-sm: 361px;
+$breakpoint-md: 961px;
+$breakpoint-lg: 1401px;
+$breakpoint-xl: 1801px;
+
+////////////////////////
+/// FONT SIZE TOKENS:
+///////////////////////
+// @TODO: These tokens need to be aligned with the new values from the design system https://www.figma.com/design/hMu9IWH5N3KamJy8tLFdyV/EASEL-Compendium%3A-Tokens%2C-Components-%26-Patterns?node-id=7263-1361&node-type=canvas&m=dev
+// Once we update ObjectTile and other components will need to be updated to match the new token.
+:root {
+  --desktop-max-width: 120rem;
+  --quote-size: 1.5rem;
+  --quote-line-height: 2rem;
+  --heading-size1: 1.5rem;
+  --heading-line-height-size1: 1.75rem;
+  --heading-size2: 1.5rem;
+  --heading-line-height-size2: 1.75rem;
+  --heading-size3: 1.25rem;
+  --heading-line-height-size3: 1.5rem;
+  --heading-size4: 1rem;
+  --heading-line-height-size4: 1.25rem;
+  --heading-size5: 0.75rem;
+  --heading-line-height-size5: 1rem;
+  --string-size1: 1rem;
+  --string-line-height-size1: 1.25rem;
+  --string-size2: 0.75rem;
+  --string-line-height-size2: 1rem;
+  --string-size3: 0.5rem;
+  --string-line-height-size3: 0.75rem;
+  --body-size1: 1rem;
+  --body-line-height-size1: 1.5rem;
+  --body-size2: 0.75rem;
+  --body-line-height-size2: 1.25rem;
+  --body-size3: 0.5rem;
+  --body-line-height-size3: 1rem;
+  --label-size1: 1rem;
+  --label-size2: 0.75rem;
+  --label-size3: 0.56rem;
+  --link-label-size: 0.75rem;
+  --link-label-line-height: 0.75rem;
+  --button-label-size: 0.75rem;
+  --button-label-line-height: 1rem;
+  --button-tertiary-height: 1.75rem;
+  --badge-label-size: 0.5rem;
+  --badge-label-line-height: 0.67rem;
+  --snw-header-link-size: 1rem;
+  --snw-header-link-line-height: 1.5rem;
+  --snw-flyout-link-size: 1rem;
+  --snw-flyout-link-line-height: 1.75rem;
+  --snw-heading-hero-size1: 2rem;
+  --snw-heading-hero-line-height-size1: 2.375rem;
+  --snw-heading-hero-size2: 1.625rem;
+  --snw-heading-hero-line-height-size2: 1.9375rem;
+
+  @media (min-width: $breakpoint-md) {
+    --quote-size: 1.75rem;
+    --quote-line-height: 2.25rem;
+    --heading-size1: 1.75rem;
+    --heading-line-height-size1: 2rem;
+    --heading-size2: 1.75rem;
+    --heading-line-height-size2: 2rem;
+    --heading-size3: 1.5rem;
+    --heading-line-height-size3: 1.75rem;
+    --heading-size4: 1.25rem;
+    --heading-line-height-size4: 1.5rem;
+    --heading-size5: 1rem;
+    --heading-line-height-size5: 1.25rem;
+    --string-size1: 1.25rem;
+    --string-line-height-size1: 1.5rem;
+    --string-size2: 1rem;
+    --string-line-height-size2: 1.25rem;
+    --string-size3: 0.75rem;
+    --string-line-height-size3: 1rem;
+    --body-size1: 1.25rem;
+    --body-line-height-size1: 1.75rem;
+    --body-size2: 1rem;
+    --body-line-height-size2: 1.5rem;
+    --body-size3: 0.75rem;
+    --body-line-height-size3: 1.25rem;
+    --label-size1: 1.25rem;
+    --label-size2: 1rem;
+    --label-size3: 0.75rem;
+    --link-label-size: 1rem;
+    --link-label-line-height: 1rem;
+    --button-label-size: 1rem;
+    --button-label-line-height: 1.25rem;
+    --badge-label-size: 0.75rem;
+    --badge-label-line-height: 1rem;
+    --snw-header-link-size: 1rem;
+    --snw-header-link-line-height: 1.5rem;
+    --snw-flyout-link-size: 0.875rem;
+    --snw-flyout-link-line-height: 1.75rem;
+    --snw-heading-hero-size1: 2.375rem;
+    --snw-heading-hero-line-height-size1: 2.875rem;
+  }
+
+  @media (min-width: $breakpoint-lg) {
+    --snw-flyout-link-size: 0.875rem;
+    --snw-flyout-link-line-height: 1.75rem;
+  }
+
+  @media (min-width: $breakpoint-xl) {
+    --quote-size: 2rem;
+    --quote-line-height: 2.5rem;
+    --heading-size1: 2rem;
+    --heading-line-height-size1: 2.25rem;
+    --heading-size2: 2rem;
+    --heading-line-height-size2: 2.25rem;
+    --heading-size3: 1.75rem;
+    --heading-line-height-size3: 2rem;
+    --heading-size4: 1.5rem;
+    --heading-line-height-size4: 1.75rem;
+    --heading-size5: 1.25rem;
+    --heading-line-height-size5: 1.5rem;
+    --string-size1: 1.5rem;
+    --string-line-height-size1: 1.75rem;
+    --string-size2: 1.25rem;
+    --string-line-height-size2: 1.5rem;
+    --string-size3: 1rem;
+    --string-line-height-size3: 1.25rem;
+    --body-size1: 1.5rem;
+    --body-line-height-size1: 2rem;
+    --body-size2: 1.25rem;
+    --body-line-height-size2: 1.75rem;
+    --body-size3: 1rem;
+    --body-line-height-size3: 1.5rem;
+    --label-size1: 1.56rem;
+    --label-size2: 1.25rem;
+    --label-size3: 1rem;
+    --link-label-size: 1.25rem;
+    --link-label-line-height: 1.25rem;
+    --button-label-size: 1.25rem;
+    --button-label-line-height: 1.5rem;
+    --badge-label-size: 1rem;
+    --badge-label-line-height: 1.5rem;
+    --snw-header-link-size: 1.125rem;
+    --snw-header-link-line-height: 1.75rem;
+    --snw-flyout-link-size: 1.125rem;
+    --snw-flyout-link-line-height: 2.125rem;
+  }
+}
+
+// TITLE
+$title-size1: var(--heading-size1);
+$title-size2: var(--heading-size2);
+$title-size3: var(--heading-size3);
+$title-size4: var(--heading-size4);
+
+// HEADING
+$heading-size1: var(--heading-size1);
+$heading-line-height-size1: var(--heading-line-height-size1);
+$heading-size2: var(--heading-size2);
+$heading-line-height-size2: var(--heading-line-height-size2);
+$heading-size3: var(--heading-size3);
+$heading-line-height-size3: var(--heading-line-height-size3);
+$heading-size4: var(--heading-size4);
+$heading-line-height-size4: var(--heading-line-height-size4);
+$heading-size5: var(--heading-size5);
+$heading-line-height-size5: var(--heading-line-height-size5);
+
+// BODY
+$body-size1: var(--body-size1);
+$body-line-height-size1: var(--body-line-height-size1);
+$body-size2: var(--body-size2);
+$body-line-height-size2: var(--body-line-height-size2);
+$body-size3: var(--body-size3);
+$body-line-height-size3: var(--body-line-height-size3);
+
+// STRING
+$string-size1: var(--string-size1);
+$string-line-height-size1: var(--string-line-height-size1);
+$string-size2: var(--string-size2);
+$string-line-height-size2: var(--string-line-height-size2);
+$string-size3: var(--string-size3);
+$string-line-height-size3: var(--string-line-height-size3);
+
+// LABELS
+$email-label-size: var(--label-size2);
+$text-label-size: var(--label-size3);
+$badge-label-size: var(--label-size3);
+$link-label-size: var(--link-label-size);
+$button-label-size: var(--button-label-size);
+$link-label-line-height: var(--link-label-line-height);
+$button-label-line-height: var(--button-label-line-height);
+$button-tertiary-height: var(--button-tertiary-height);
+$badge-label-size: var(--badge-label-size);
+$badge-label-line-height: var(--badge-label-line-height);
+$snw-header-link-size: var(--snw-header-link-size);
+$snw-header-link-line-height: var(--snw-header-link-line-height);
+$snw-flyout-link-size: var(--snw-flyout-link-size);
+$snw-flyout-link-line-height: var(--snw-flyout-link-line-height);
+$snw-heading-hero-size1: var(--snw-heading-hero-size1);
+$snw-heading-hero-line-height1: var(--snw-heading-hero-line-height-size1);
+$snw-heading-hero-size2: var(--snw-heading-hero-size2);
+$snw-heading-hero-line-height2: var(--snw-heading-hero-line-height-size2);
+
+////////////////////////
+/// SPACING TOKENS:
+///////////////////////
+
+// SNOWFLAKES
+$snowflake-menu-padding: 1.25rem;
+
+/* stylelint-disable-next-line no-duplicate-selectors */
+:root {
+  --snw-button-padding: 0.8125rem;
+  --spacing-micro: 0.25rem;
+  --spacing-xsm: 0.5rem;
+  --spacing-sm: 0.75rem;
+  --spacing-md: 1.75rem;
+  --spacing-lg: 2.75rem;
+  --spacing-xl: 3.75rem;
+  --spacing-xxl: 4.75rem;
+  --spacing-xxxl: 5.75rem;
+
+  @media (min-width: $breakpoint-md) {
+    --snw-button-padding: 0.8125rem;
+    --spacing-micro: 0.25rem;
+    --spacing-xsm: 0.5rem;
+    --spacing-sm: 1rem;
+    --spacing-md: 2rem;
+    --spacing-lg: 3rem;
+    --spacing-xl: 4rem;
+    --spacing-xxl: 5rem;
+    --spacing-xxxl: 6rem;
+  }
+
+  @media (min-width: $breakpoint-xl) {
+    --snw-button-padding: 0.813rem;
+    --spacing-micro: 0.5rem;
+    --spacing-xsm: 0.75rem;
+    --spacing-sm: 1.25rem;
+    --spacing-md: 2.25rem;
+    --spacing-lg: 3.25rem;
+    --spacing-xl: 4.25rem;
+    --spacing-xxl: 5.25rem;
+    --spacing-xxxl: 6.25rem;
+  }
+}
+
+$spacing-micro: var(--spacing-micro);
+$spacing-xsm: var(--spacing-xsm);
+$spacing-sm: var(--spacing-sm);
+$spacing-md: var(--spacing-md);
+$spacing-lg: var(--spacing-lg);
+$spacing-xl: var(--spacing-xl);
+$spacing-xxl: var(--spacing-xl);
+$spacing-xxxl: var(--spacing-xxxl);
+$spacing-sizes: micro, xsm, sm, md, lg, xl, xxl, xxxl;
+
+// PADDING
+$padding-micro: var(--spacing-micro);
+$padding-xsm: var(--spacing-xsm);
+$padding-sm: var(--spacing-sm);
+$padding-md: var(--spacing-md);
+$padding-lg: var(--spacing-lg);
+$padding-xl: var(--spacing-xl);
+$padding-xxl: var(--spacing-xxl);
+$padding-tokens: $padding-micro, $padding-xsm, $padding-sm, $padding-md, $padding-lg, $padding-xl, $padding-xxl;
+$snw-button-padding: var(--snw-button-padding);
+
+// MARGIN
+$margin-micro: var(--spacing-micro);
+$margin-xsm: var(--spacing-xsm);
+$margin-sm: var(--spacing-sm);
+$margin-md: var(--spacing-md);
+$margin-lg: var(--spacing-lg);
+$margin-xl: var(--spacing-xl);
+$margin-xxl: var(--spacing-xxl);
+
+////////////////////////
+/// HEADER TOKENS:
+///////////////////////
+/* stylelint-disable-next-line no-duplicate-selectors */
+:root {
+  --header-height: 56px; // ideally we would calculate the size from the current text size plus spacing components so that it scales with the text size and spacing
+  --search-size: 2.625rem; // This should be calculated from the scaling text and scaling spacing tokens instead of hardcoding in case they change
+
+  @media (min-width: $breakpoint-md) {
+    --header-height: 123px; // ideally we would calculate the size from the current text size plus spacing components so that it scales with the text size and spacing
+  }
+
+  @media (min-width: $breakpoint-xl) {
+    --header-height: 135px; // ideally we would calculate the size from the current text size plus spacing components so that it scales with the text size and spacing
+    --search-size: 2.875rem; // This should be calculated from the scaling text and scaling spacing tokens instead of hardcoding in case they change
+  }
+}
+
+////////////////////////
+/// max-site-width TOKEN:
+///////////////////////
+$max-site-width: 1560px;
+$desktop-max-width: var(--desktop-max-width);
+
+////////////////////////
+/// z-index TOKENS:
+///////////////////////
+$modal-z-index: 30;
+
+////////////////////////
+/// Our tokens usually support at least 4 sizes.
+///////////////////////
+$size-sm: 'sm';
+$size-md: 'md';
+$size-lg: 'lg';
+$size-xl: 'xl';
+$size-xxl: 'xxl';
+$default-transition: 150ms cubic-bezier(0.16, 1, 0.3, 1);
+$drawer-content-transition: 350ms cubic-bezier(0, 0, 0.2, 1);
+$default-overlay-transition: 350ms cubic-bezier(0.4, 0, 0.2, 1);
+
+////////////////////////
+/// Mobile-specific tokens
+///////////////////////
+$mobile-minimum-clickable-area: 44px;
+
+////////////////////////
+/// Header Tokens
+///
+$search-size: var(--search-size);
+$header-height: var(--header-height);
+`;
+export {
+  e as default
+};

package/dist/scss/components/Icon/_icon.stories.scss

@@ -0,0 +1,32 @@
+@import '../../allPartials';
+
+.story-icon-flex-wrapper {
+  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 20%);
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  margin: 24px;
+  padding: 24px;
+  width: fit-content;
+
+  .icon-set {
+    display: flex;
+    flex-direction: column;
+    margin: 24px 12px;
+  }
+
+  .icon-name {
+    padding: 8px;
+    text-align: center;
+
+    @include text($string2);
+  }
+
+  .icon-wrapper {
+    &.show-border {
+      border: 1px solid black;
+    }
+
+    margin: 0 auto;
+  }
+}

package/dist/scss/components/IconButton/_iconButton.scss

@@ -8,7 +8,7 @@
   padding: 0;
   width: $spacing-md;
 
-  & > svg {
+  & svg {
     height: $button-label-line-height;
     width: $button-label-line-height;
   }
@@ -29,7 +29,7 @@
     background: $pure-white;
     color: $pure-black;
 
-    & > svg {
+    & svg {
       fill: $pure-black;
       height: calc($button-label-line-height * 1.5); // design-cheats-for-button-large
       margin-inline-end: unset;
@@ -93,10 +93,9 @@
     &:hover {
       background-color: $button-hover;
 
-      & > svg {
+      & svg {
         fill: $pure-white;
         margin-inline-end: unset;
-        position: absolute;
 
         path {
           fill: $pure-white;

package/dist/scss/components/Pagination/_pagination.scss

@@ -15,7 +15,7 @@
       opacity: 0.15;
       pointer-events: none;
 
-      svg path {
+      .#{$px}-icon path {
         fill: $pure-black;
       }
     }
@@ -23,7 +23,7 @@
     &:hover:not(:disabled) {
       background-color: inherit;
 
-      svg path {
+      .#{$px}-icon path {
         fill: $pure-black;
       }
     }

package/dist/scss/patterns/UserManagement/_userManagement.scss

@@ -55,9 +55,6 @@
   }
 
   &__account-icon {
-    height: 1.5rem;
-    width: 1.5rem;
-
     a {
       align-items: center;
       display: flex;

package/dist/site-furniture/Footer/Footer.js

@@ -1,9 +1,9 @@
 import { jsxs as t, jsx as o } from "react/jsx-runtime";
 import l from "../../node_modules/classnames/index.js";
 import { px as r, defaultYear as m } from "../../utils/index.js";
-import f from "../../assets/PhillipsLogo.svg.js";
-import { TextVariants as c } from "../../components/Text/types.js";
-import d from "../../components/Text/Text.js";
+import { TextVariants as f } from "../../components/Text/types.js";
+import c from "../../components/Text/Text.js";
+import n from "../../components/Icon/Icon.js";
 const $ = ({
   children: a,
   className: i,
@@ -12,8 +12,8 @@ const $ = ({
 }) => /* @__PURE__ */ t("footer", { "data-testid": e || "footer", id: e, className: l(`${r}-footer`, { className: i }), children: [
   /* @__PURE__ */ o("div", { className: `${r}-footer__links`, children: a }),
   /* @__PURE__ */ t("div", { className: `${r}-footer__copyright`, children: [
-    /* @__PURE__ */ o("h3", { "data-testid": "footer-logo", className: `${r}-footer__logo`, children: /* @__PURE__ */ o("a", { href: "/", "aria-label": "logo", children: /* @__PURE__ */ o(f, {}) }) }),
-    /* @__PURE__ */ o(d, { variant: c.body3, children: s })
+    /* @__PURE__ */ o("h3", { "data-testid": "footer-logo", className: `${r}-footer__logo`, children: /* @__PURE__ */ o("a", { href: "/", "aria-label": "logo", children: /* @__PURE__ */ o(n, { icon: "PhillipsLogo" }) }) }),
+    /* @__PURE__ */ o(c, { variant: f.body3, children: s })
   ] })
 ] });
 export {

package/dist/site-furniture/Header/Header.js

@@ -2,29 +2,29 @@ import { jsxs as o, jsx as a } from "react/jsx-runtime";
 import r, { createContext as j, forwardRef as R, useState as V } from "react";
 import l from "../../node_modules/classnames/index.js";
 import { findChildrenOfType as s, findChildrenExcludingTypes as w, px as e } from "../../utils/index.js";
-import L from "../../assets/PhillipsLogo.svg.js";
 import u from "../../patterns/UserManagement/UserManagement.js";
 import f from "../../patterns/LanguageSelector/LanguageSelector.js";
 import _ from "../../components/Navigation/Navigation.js";
-import { defaultHeaderContext as k } from "./utils.js";
-import { SSRMediaQuery as q } from "../../providers/SeldonProvider/utils.js";
-import { useMobileMenu as A } from "./hooks.js";
-const I = j(k), Q = R(
+import { defaultHeaderContext as I } from "./utils.js";
+import { SSRMediaQuery as L } from "../../providers/SeldonProvider/utils.js";
+import { useMobileMenu as k } from "./hooks.js";
+import q from "../../components/Icon/Icon.js";
+const A = j(I), Q = R(
   ({
-    logo: i = /* @__PURE__ */ a(L, {}),
-    logoHref: v = "/",
-    className: E,
+    logo: i = /* @__PURE__ */ a(q, { icon: "PhillipsLogo" }),
+    logoHref: E = "/",
+    className: v,
     children: t,
     toggleOpenText: C = "Open Menu",
     toggleCloseText: M = "Close Menu",
     logoText: x = "Home Page",
     disabled: m,
     ...y
-  }, S) => {
-    const c = s(t, u), $ = r.isValidElement(c?.[0]) ? r.cloneElement(c[0], { disabled: m }) : "", h = s(t, f), p = r.isValidElement(h?.[0]) ? r.cloneElement(h[0], { disabled: m }) : "", [g, b] = V(!1), N = s(t, _), H = w(t, [_, u, f]), { closeMenu: T, handleMenuToggle: O, isMenuOpen: d, toggleText: P } = A({ toggleOpenText: C, toggleCloseText: M });
-    return /* @__PURE__ */ o("header", { ...y, className: l(`${e}-header`, E), ref: S, children: [
+  }, $) => {
+    const c = s(t, u), b = r.isValidElement(c?.[0]) ? r.cloneElement(c[0], { disabled: m }) : "", h = s(t, f), p = r.isValidElement(h?.[0]) ? r.cloneElement(h[0], { disabled: m }) : "", [g, N] = V(!1), S = s(t, _), H = w(t, [_, u, f]), { closeMenu: T, handleMenuToggle: O, isMenuOpen: d, toggleText: P } = k({ toggleOpenText: C, toggleCloseText: M });
+    return /* @__PURE__ */ o("header", { ...y, className: l(`${e}-header`, v), ref: $, children: [
       /* @__PURE__ */ o("div", { className: `${e}-header__top-row`, children: [
-        /* @__PURE__ */ a(q.Media, { greaterThanOrEqual: "md", children: p }),
+        /* @__PURE__ */ a(L.Media, { greaterThanOrEqual: "md", children: p }),
         /* @__PURE__ */ o(
           "button",
           {
@@ -41,21 +41,21 @@ const I = j(k), Q = R(
             ]
           }
         ),
-        /* @__PURE__ */ a("h1", { "data-testid": "header-logo", className: `${e}-header__logo`, children: /* @__PURE__ */ a("a", { href: v, "aria-label": x, children: typeof i == "object" ? i : /* @__PURE__ */ a("img", { alt: "Phillips", "data-testid": "header-logo-img", src: i }) }) }),
-        $
+        /* @__PURE__ */ a("h1", { "data-testid": "header-logo", className: `${e}-header__logo`, children: /* @__PURE__ */ a("a", { href: E, "aria-label": x, children: typeof i == "object" ? i : /* @__PURE__ */ a("img", { alt: "Phillips", "data-testid": "header-logo-img", src: i }) }) }),
+        b
       ] }),
       /* @__PURE__ */ a("div", { className: l(`${e}-header__nav`, { [`${e}-header__nav--closed`]: !d }), children: /* @__PURE__ */ o(
-        I.Provider,
+        A.Provider,
         {
           value: {
             isMenuOpen: d,
             isSearchExpanded: g,
-            setIsSearchExpanded: b,
+            setIsSearchExpanded: N,
             closeMenu: T
           },
           children: [
             r.Children.map(
-              N,
+              S,
               (n) => r.isValidElement(n) ? r.cloneElement(n, {
                 children: [
                   ...r.Children.toArray(n.props.children),
@@ -80,6 +80,6 @@ const I = j(k), Q = R(
 );
 Q.displayName = "Header";
 export {
-  I as HeaderContext,
+  A as HeaderContext,
   Q as default
 };

package/dist/utils/index.d.ts

@@ -40,7 +40,7 @@ export interface InputProps {
      */
     disabled?: boolean;
     /**
-     * Specify a custom `id` for the `<input>`
+     * Specify a unique `id` for the `<input>`
      */
     id: string;
     /**

package/dist/utils/scssUtils.d.ts

@@ -0,0 +1,2 @@
+export declare const getScssVar: (scssVar: string, defaultValue: string) => string;
+export declare const getScssColors: () => string[];

package/dist/utils/scssUtils.js

@@ -0,0 +1,12 @@
+import l from "../scss/_vars.scss.js";
+const c = (r, a) => {
+  const n = l.split(`
+`).map((e) => {
+    const [o, s] = e.split(": ");
+    return { name: o, value: s?.replace(";", "") };
+  }), t = n.findIndex(({ name: e }) => e === r);
+  return r && t > -1 ? n[t].value : a;
+};
+export {
+  c as getScssVar
+};

package/dist/utils/scssUtils.test.d.ts

@@ -0,0 +1 @@
+export {};