@phillips/seldon 1.131.0 → 1.132.1

package/dist/assets/icons.d.ts

@@ -18,6 +18,7 @@ export { default as Reddit } from './icon-footer-red.svg?react';
 export { default as FooterWeChat } from './icon-footer-wechat.svg?react';
 export { default as Instagram } from './instagram.svg?react';
 export { default as Lock } from './lock.svg?react';
+export { default as Menu } from './menu.svg?react';
 export { default as Minus } from './minus.svg?react';
 export { default as PhillipsLogo } from './PhillipsLogo.svg?react';
 export { default as Plus } from './plus.svg?react';

package/dist/assets/menu.svg.js

@@ -0,0 +1,5 @@
+import * as e from "react";
+const o = (t) => /* @__PURE__ */ e.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("path", { d: "M2 8H22M2 16H22", stroke: "black", strokeWidth: 2 }));
+export {
+  o as default
+};

package/dist/components/Carousel/Carousel.stories.d.ts

@@ -21,7 +21,9 @@ export declare const CarouselWithDots: {
     (props: CarouselProps & CarouselDotsProps): import("react/jsx-runtime").JSX.Element;
     args: {
         maxDots: number;
+        id: string;
     } | {
+        id: string;
         maxDots?: undefined;
     };
     argTypes: {};
@@ -30,6 +32,7 @@ export declare const CarouselWithDotsAndArrows: {
     (props: CarouselProps & CarouselDotsProps): import("react/jsx-runtime").JSX.Element;
     args: {
         maxDots: number;
+        id: string;
     };
     argTypes: {};
 };
@@ -37,6 +40,7 @@ export declare const CarouselWithDotsOverflow: {
     (props: CarouselProps & CarouselDotsProps): import("react/jsx-runtime").JSX.Element;
     args: {
         maxDots: number;
+        id: string;
     };
     argTypes: {};
 };

package/dist/components/Carousel/CarouselDots.d.ts

@@ -1,5 +1,9 @@
 import { ComponentProps } from 'react';
 export interface CarouselDotsProps extends ComponentProps<'div'> {
+    /**
+     * A unique `id` for the `<CarouselDots>`
+     */
+    id: string;
     /**
      * The maximum number of dots to display.
      */

package/dist/components/Carousel/CarouselDots.js

@@ -1,16 +1,16 @@
 import { jsx as m } from "react/jsx-runtime";
 import E from "../../node_modules/classnames/index.js";
-import { forwardRef as G, useId as L, useState as S, useRef as M, useCallback as l, useEffect as q, useMemo as z } from "react";
-import { useCarousel as A } from "./utils.js";
-import { getCommonProps as F } from "../../utils/index.js";
-import { CarouselDot as H } from "./CarouselDot.js";
-const h = 10, C = 12, J = (h + C) / 2, K = G(
-  ({ className: N, maxDots: I = 9, position: v = "inline", numberOfSlides: V = 0, ...g }, b) => {
-    const { className: c, ...k } = F(g, "CarouselDots"), y = L(), { api: t, onSlideChange: a } = A(), [R, T] = S(0), [i, O] = S(
-      Array.from({ length: V }, (e, o) => o)
-    ), r = M(null), [D, $] = S([]), w = l((e) => {
+import { forwardRef as G, useState as S, useRef as L, useCallback as l, useEffect as M, useMemo as q } from "react";
+import { useCarousel as z } from "./utils.js";
+import { getCommonProps as A } from "../../utils/index.js";
+import { CarouselDot as F } from "./CarouselDot.js";
+const h = 10, C = 12, H = (h + C) / 2, J = G(
+  ({ className: v, maxDots: g = 9, position: V = "inline", numberOfSlides: b = 0, id: I, ...D }, k) => {
+    const { className: c, ...y } = A({ id: I, ...D }, "CarouselDots"), { api: t, onSlideChange: a } = z(), [R, T] = S(0), [i, O] = S(
+      Array.from({ length: b }, (e, o) => o)
+    ), r = L(null), [$, w] = S([]), N = l((e) => {
       r.current && r.current.scrollTo?.({
-        left: e * (h + C) - r.current.offsetWidth / 2 + J,
+        left: e * (h + C) - r.current.offsetWidth / 2 + H,
         // Center dot in container
         behavior: "smooth"
       });
@@ -23,36 +23,36 @@ const h = 10, C = 12, J = (h + C) / 2, K = G(
       O(e.scrollSnapList());
     }, []), n = l(
       (e) => {
-        T(e.selectedScrollSnap()), w(e.selectedScrollSnap());
+        T(e.selectedScrollSnap()), N(e.selectedScrollSnap());
       },
-      [w]
+      [N]
     ), u = l(
       (e) => {
         a?.(e.selectedScrollSnap());
       },
       [a]
     );
-    q(() => {
+    M(() => {
       if (t)
         return f(t), n(t), t.on("reInit", f).on("reInit", n).on("select", n).on("settle", u), () => {
           t.off("reInit", f).off("reInit", n).off("select", n).off("settle", u);
         };
     }, [t, f, n, u]);
-    const s = z(() => D.sort((e, o) => e - o), [D]);
+    const s = q(() => $.sort((e, o) => e - o), [$]);
     return /* @__PURE__ */ m(
       "div",
       {
-        ref: b,
+        ref: k,
         role: "group",
         "aria-roledescription": "pagination",
         "aria-label": "pagination",
-        className: E(`${c}`, N, `${c}-${v}`),
-        ...g,
-        ...k,
+        className: E(`${c}`, v, `${c}-${V}`),
+        ...D,
+        ...y,
         children: /* @__PURE__ */ m("div", { className: `${c}-container`, children: /* @__PURE__ */ m(
           "div",
           {
-            style: { "--max-width": `${I * h + (I - 1) * C + 2}px` },
+            style: { "--max-width": `${g * h + (g - 1) * C + 2}px` },
             className: `${c}-container-inner`,
             ref: r,
             children: i.map((e, o) => {
@@ -64,17 +64,17 @@ const h = 10, C = 12, J = (h + C) / 2, K = G(
                 !(o >= i.length - 2 && s.includes(i.length - 1) && s.includes(i.length - 2))
               );
               return /* @__PURE__ */ m(
-                H,
+                F,
                 {
                   onClick: () => P(o),
                   isSelected: W,
                   scrollableContainerRef: r,
                   onInViewChange: (j) => {
-                    $(j ? (p) => [...p, o] : (p) => p.filter((B) => B !== o));
+                    w(j ? (p) => [...p, o] : (p) => p.filter((B) => B !== o));
                   },
                   variant: _ ? "sm" : "md"
                 },
-                `${y}-dot-${o}`
+                `${I}-dot-${o}`
               );
             })
           }
@@ -83,7 +83,7 @@ const h = 10, C = 12, J = (h + C) / 2, K = G(
     );
   }
 );
-K.displayName = "CarouselDots";
+J.displayName = "CarouselDots";
 export {
-  K as default
+  J as default
 };

package/dist/components/DatePicker/DatePicker.d.ts

@@ -23,7 +23,7 @@ export interface DatePickerProps extends Omit<InputProps, 'defaultValue' | 'onCh
      */
     hideLabel?: boolean;
     /**
-     * A custom `id` for the `<input>`
+     * A unique `id` for the `<input>`
      */
     id: string;
     /**

package/dist/components/Input/Input.d.ts

@@ -19,9 +19,9 @@ export interface InputProps extends Omit<React.ComponentProps<'input'>, 'size'>
      */
     hideLabel?: boolean;
     /**
-     * A custom `id` for the `<input>`
+     * A unique `id` for the `<input>`
      */
-    id?: string;
+    id: string;
     /**
      * Boolean to dictate whether input is inline with the label or not. `true` to use the inline version.
      */

package/dist/components/Input/Input.js

@@ -1,62 +1,62 @@
-import { jsxs as k, jsx as s } from "react/jsx-runtime";
-import * as u from "react";
+import { jsxs as P, jsx as d } from "react/jsx-runtime";
+import * as R from "react";
 import n from "../../node_modules/classnames/index.js";
-import { px as t, useNormalizedInputProps as z } from "../../utils/index.js";
-const C = u.forwardRef(
+import { px as t, useNormalizedInputProps as k } from "../../utils/index.js";
+const z = R.forwardRef(
   ({
     className: p,
-    defaultValue: $,
-    disabled: m,
-    hideLabel: c,
+    defaultValue: o,
+    disabled: u,
+    hideLabel: $,
     id: a,
-    inline: _,
-    invalid: b,
-    invalidText: h,
-    labelText: f,
-    onChange: v,
-    onClick: x,
-    placeholder: w,
-    readOnly: d,
-    size: I = "md",
-    type: r = "text",
-    value: N,
-    warn: y,
-    warnText: j,
+    inline: m,
+    invalid: c,
+    invalidText: _,
+    labelText: b,
+    onChange: h,
+    onClick: f,
+    placeholder: v,
+    readOnly: e,
+    size: x = "md",
+    type: s = "text",
+    value: w,
+    warn: N,
+    warnText: y,
     isSkeletonLoading: l,
-    ...o
-  }, P) => {
-    const e = u.useId(), i = z({
-      disabled: m,
-      id: a || e,
-      invalid: b,
-      invalidText: h,
-      readOnly: d,
-      type: r,
-      warn: y,
-      warnText: j
-    }), R = n(`${t}-${r}-input`, `${t}-input`, `${t}-input--${I}`, {
-      [`${t}-input--inline`]: _,
-      [`${t}-input--readonly`]: d,
+    ...r
+  }, I) => {
+    const i = k({
+      disabled: u,
+      id: a,
+      invalid: c,
+      invalidText: _,
+      readOnly: e,
+      type: s,
+      warn: N,
+      warnText: y
+    }), j = n(`${t}-${s}-input`, `${t}-input`, `${t}-input--${x}`, {
+      [`${t}-input--inline`]: m,
+      [`${t}-input--readonly`]: e,
       [`${t}-input--disabled`]: i.disabled,
       [`${t}-input--invalid`]: i.invalid,
       [`${t}-input--warn`]: i.warn,
       [`${p}__wrapper`]: p,
-      [`${t}-input--hidden`]: o.hidden
+      [`${t}-input--hidden`]: r.hidden
     });
-    return /* @__PURE__ */ k("div", { className: R, children: [
-      /* @__PURE__ */ s(
+    return /* @__PURE__ */ P("div", { className: j, children: [
+      /* @__PURE__ */ d(
         "label",
         {
-          "data-testid": `label-${a || e}`,
-          htmlFor: a || e,
+          "data-testid": `label-${a}`,
+          htmlFor: a,
           className: n(`${t}-input__label`, {
-            [`${t}-input__label--hidden`]: c,
+            [`${t}-input__label--hidden`]: $,
             [`${t}-skeleton`]: l
           }),
-          children: f
+          children: b
         }
       ),
-      /* @__PURE__ */ s(
+      /* @__PURE__ */ d(
         "input",
         {
           className: n(`${t}-input__input`, p, {
@@ -64,22 +64,22 @@ const C = u.forwardRef(
           }),
           "data-testid": a,
           disabled: i.disabled,
-          id: a || e,
-          onChange: v,
-          onClick: x,
-          placeholder: l ? "" : w,
-          readOnly: d,
-          ref: P,
+          id: a,
+          onChange: h,
+          onClick: f,
+          placeholder: l ? "" : v,
+          readOnly: e,
+          ref: I,
           type: i.type,
-          ...i.type !== "checkbox" && i.type !== "radio" ? { value: N, defaultValue: $ } : {},
-          ...o
+          ...i.type !== "checkbox" && i.type !== "radio" ? { value: w, defaultValue: o } : {},
+          ...r
         }
       ),
-      i.validation ? i.validation : /* @__PURE__ */ s("p", { className: n(`${t}-input__validation`), children: " " })
+      i.validation ? i.validation : /* @__PURE__ */ d("p", { className: n(`${t}-input__validation`), children: " " })
     ] });
   }
 );
-C.displayName = "Input";
+z.displayName = "Input";
 export {
-  C as default
+  z as default
 };

package/dist/components/Pagination/Pagination.js

@@ -18,21 +18,21 @@ const Q = ({
   previousLabel: j = "Previous",
   nextLabel: C = "Next",
   selectLabel: v = "Select",
-  ...s
+  ...d
 }) => {
-  const N = "pagination", { className: a, ...O } = T(s, "Pagination"), { id: p } = s, { pendingState: I, setPendingState: w } = R(f(g)), l = I || g, d = (e, r) => {
+  const N = "pagination", { className: a, ...O } = T(d, "Pagination"), { id: l } = d, { pendingState: I, setPendingState: w } = R(f(g)), s = I || g, p = (e, r) => {
     const m = f(e);
     w(m), _(m, r);
   }, [t, n] = B(() => {
-    const e = o.findIndex((h) => f(h) === l) - 1, r = o.at(e) || "", m = (o.findIndex((h) => f(h) === l) + 1) % o.length, V = o[m];
+    const e = o.findIndex((h) => f(h) === s) - 1, r = o.at(e) || "", m = (o.findIndex((h) => f(h) === s) + 1) % o.length, V = o[m];
     return [r, V];
-  }, [o, l]);
+  }, [o, s]);
   return /* @__PURE__ */ k(
     "div",
     {
       className: u(`${b}-${N}`, { [`${a}__wrapper`]: a }, P),
       ...O,
-      ...s,
+      ...d,
       children: [
         /* @__PURE__ */ i(
           $,
@@ -41,9 +41,9 @@ const Q = ({
               [`${a}__button--is-disabled`]: c
             }),
             onClick: (e) => {
-              typeof t == "object" && t.href && e.preventDefault(), d(t);
+              typeof t == "object" && t.href && e.preventDefault(), p(t);
             },
-            "data-testid": `${p}-previous-button`,
+            "data-testid": `${l}-previous-button`,
             isDisabled: c,
             "aria-label": j,
             variant: y.primary,
@@ -57,16 +57,17 @@ const Q = ({
           {
             className: S === "inline" ? `${b}--inline-pagination` : void 0,
             "aria-label": v,
-            value: l,
+            value: s,
             onChange: (e) => {
               const r = M(o, e?.currentTarget.value);
-              r && d(r, e);
+              r && p(r, e);
             },
-            "data-testid": `${p}-select-button`,
+            "data-testid": `${l}-select-button`,
             hideLabel: !0,
             labelText: v,
             disabled: c,
             showIcon: !1,
+            id: `${l}-select-button`,
             children: o.map((e) => {
               const r = f(e);
               return /* @__PURE__ */ i("option", { value: r, children: typeof e == "string" || typeof e == "number" ? e : e.label }, r);
@@ -80,9 +81,9 @@ const Q = ({
               [`${a}__button--is-disabled`]: c
             }),
             onClick: (e) => {
-              typeof n == "object" && n.href && e.preventDefault(), d(n);
+              typeof n == "object" && n.href && e.preventDefault(), p(n);
             },
-            "data-testid": `${p}-next-button`,
+            "data-testid": `${l}-next-button`,
             isDisabled: c,
             "aria-label": C,
             variant: y.primary,

package/dist/components/Select/Select.d.ts

@@ -7,6 +7,10 @@ export interface SelectProps extends Merge<InputProps, React.ComponentProps<'sel
      * Option elements that are selectable
      */
     children: React.ReactNode;
+    /**
+     * A unique `id` for the `<Select>`
+     */
+    id: string;
     /**
      * Determines if you want to show the icon
      */

package/dist/components/Select/Select.js

@@ -1,51 +1,51 @@
 import { jsxs as p, jsx as s } from "react/jsx-runtime";
-import * as d from "react";
-import a from "../../node_modules/classnames/index.js";
+import * as k from "react";
+import n from "../../node_modules/classnames/index.js";
 import { px as e, useNormalizedInputProps as z } from "../../utils/index.js";
 import { SelectVariants as c } from "./types.js";
 import D from "../../assets/chevronDown.svg.js";
-const F = d.forwardRef(
+const F = k.forwardRef(
   ({
-    children: m,
+    children: d,
     className: i,
-    defaultValue: u,
-    disabled: $,
-    hideLabel: _,
+    defaultValue: m,
+    disabled: u,
+    hideLabel: $,
     id: t,
     showIcon: l = !0,
-    variant: f = c.default,
-    inline: b,
-    invalid: v,
-    invalidText: h,
-    labelText: w,
-    onChange: C,
+    variant: _ = c.default,
+    inline: f,
+    invalid: b,
+    invalidText: v,
+    labelText: h,
+    onChange: w,
     onClick: V,
     readOnly: r,
-    size: x = "md",
-    value: y,
-    warn: N,
-    warnText: S,
-    ...g
+    size: C = "md",
+    value: x,
+    warn: y,
+    warnText: N,
+    ...S
   }, j) => {
-    const o = "select", I = d.useId(), n = z({
-      disabled: $,
-      id: t ?? I,
-      invalid: v,
-      invalidText: h,
+    const o = "select", a = z({
+      disabled: u,
+      id: t,
+      invalid: b,
+      invalidText: v,
       readOnly: r,
       type: o,
-      warn: N,
-      warnText: S
-    }), P = a(`${e}-${o}-input`, `${e}-input`, `${e}-input--${x}`, {
-      [`${e}-input--inline`]: b,
+      warn: y,
+      warnText: N
+    }), P = n(`${e}-${o}-input`, `${e}-input`, `${e}-input--${C}`, {
+      [`${e}-input--inline`]: f,
       [`${e}-input--readonly`]: r,
-      [`${e}-input--disabled`]: n.disabled,
-      [`${e}-input--invalid`]: n.invalid,
-      [`${e}-input--warn`]: n.warn,
+      [`${e}-input--disabled`]: a.disabled,
+      [`${e}-input--invalid`]: a.invalid,
+      [`${e}-input--warn`]: a.warn,
       [`${i}__wrapper`]: i
-    }), R = a(i, `${e}-input__input`, {
-      [`${e}-input__select--tertiary`]: f === c.tertiary
-    }), k = a(`${e}-select-container`, {
+    }), R = n(i, `${e}-input__input`, {
+      [`${e}-input__select--tertiary`]: _ === c.tertiary
+    }), g = n(`${e}-select-container`, {
       [`${e}-select-container--show__icon`]: l
     });
     return /* @__PURE__ */ p("div", { className: P, children: [
@@ -54,29 +54,29 @@ const F = d.forwardRef(
         {
           "data-testid": `${t}-label`,
           htmlFor: t,
-          className: a(`${e}-input__label`, { [`${e}-input__label--hidden`]: _ }),
-          children: w
+          className: n(`${e}-input__label`, { [`${e}-input__label--hidden`]: $ }),
+          children: h
         }
       ),
-      /* @__PURE__ */ p("div", { className: k, children: [
+      /* @__PURE__ */ p("div", { className: g, children: [
         /* @__PURE__ */ s(
           "select",
           {
             className: R,
             "data-testid": t,
-            defaultValue: u,
-            disabled: n.disabled,
+            defaultValue: m,
+            disabled: a.disabled,
             id: t,
-            onChange: C,
+            onChange: w,
             ref: j,
-            value: y,
-            ...g,
-            children: m
+            value: x,
+            ...S,
+            children: d
           }
         ),
         l ? /* @__PURE__ */ s(D, {}) : null
       ] }),
-      n.validation
+      a.validation
     ] });
   }
 );

package/dist/components/TextArea/TextArea.d.ts

@@ -0,0 +1,26 @@
+import { ComponentProps } from 'react';
+export interface TextAreaProps extends ComponentProps<'textarea'> {
+    /**
+     * Optional classnane
+     */
+    className?: string;
+    /**
+     * Boolean to specify whether we need to display skeleton loader
+     */
+    isSkeletonLoading?: boolean;
+    /**
+     * Text that will be read by a screen reader when visiting this control
+     */
+    labelText: React.ReactNode;
+}
+/**
+ * ## Overview
+ *
+ * Overview of this widget
+ *
+ * [Figma Link](https://www.figma.com/design/hMu9IWH5N3KamJy8tLFdyV/EASEL-Compendium%3A-Tokens%2C-Components-%26-Patterns?node-id=11973-9589&m=dev)
+ *
+ * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/components-textarea--overview)
+ */
+declare const TextArea: import('react').ForwardRefExoticComponent<Omit<TextAreaProps, "ref"> & import('react').RefAttributes<HTMLTextAreaElement>>;
+export default TextArea;

package/dist/components/TextArea/TextArea.js

@@ -0,0 +1,43 @@
+import { jsxs as f, jsx as t } from "react/jsx-runtime";
+import { forwardRef as $, useId as u } from "react";
+import l from "../../node_modules/classnames/index.js";
+import { px as r } from "../../utils/index.js";
+import N from "../../assets/menu.svg.js";
+const _ = $(
+  ({ className: o, id: e, isSkeletonLoading: m, labelText: i, maxLength: n = 3e3, name: c, rows: d = 2, ...p }, x) => {
+    const s = `${r}-text-area`, a = u();
+    return /* @__PURE__ */ f("div", { className: l(`${s}__wrapper`), children: [
+      /* @__PURE__ */ t(
+        "label",
+        {
+          "data-testid": `text-area-${e ?? a}-label`,
+          htmlFor: e ?? a,
+          className: l(`${r}-input__label`, {
+            [`${r}-skeleton`]: m
+          }),
+          children: i
+        }
+      ),
+      /* @__PURE__ */ t(
+        "textarea",
+        {
+          ...p,
+          className: l(s, o, {
+            [`${r}-skeleton`]: m
+          }),
+          id: e ?? a,
+          rows: d,
+          maxLength: n,
+          name: c,
+          ref: x,
+          "data-testid": `text-area-${e ?? a}-input`
+        }
+      ),
+      /* @__PURE__ */ t("div", { className: `${s}-resizer__icon`, children: /* @__PURE__ */ t(N, {}) })
+    ] });
+  }
+);
+_.displayName = "TextArea";
+export {
+  _ as default
+};

package/dist/components/TextArea/TextArea.stories.d.ts

@@ -0,0 +1,44 @@
+import { TextAreaProps } from './TextArea';
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<Omit<TextAreaProps, "ref"> & import('react').RefAttributes<HTMLTextAreaElement>>;
+};
+export default meta;
+export declare const Playground: {
+    (props: TextAreaProps): import("react/jsx-runtime").JSX.Element;
+    args: {
+        children: string;
+        labelText: string;
+        rows: number;
+        isSkeletonLoading: boolean;
+        name: string;
+        maxLength: number;
+    };
+    argTypes: {
+        labelText: {
+            control: {
+                type: string;
+            };
+        };
+        rows: {
+            control: {
+                type: string;
+            };
+        };
+        isSkeletonLoading: {
+            control: {
+                type: string;
+            };
+        };
+        maxLength: {
+            control: {
+                type: string;
+            };
+        };
+        name: {
+            control: {
+                type: string;
+            };
+        };
+    };
+};

package/dist/components/TextArea/TextArea.test.d.ts

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

package/dist/components/TextArea/index.d.ts

@@ -0,0 +1 @@
+export { default as TextArea, type TextAreaProps } from './TextArea';

package/dist/index.d.ts

@@ -66,3 +66,4 @@ export * from './components/Countdown/types';
 export * from './patterns/ObjectTile';
 export * from './patterns/BidSnapshot';
 export * from './components/Article';
+export * from './components/TextArea';