@phillips/seldon 1.88.0 → 1.89.0

package/dist/components/Accordion/Accordion.d.ts

@@ -1,5 +1,6 @@
 import { AccordionVariantKey } from './types';
-import { default as React } from 'react';
+import { default as React, ComponentProps } from 'react';
+import * as Accordion from '@radix-ui/react-accordion';
 export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Unique id for component testing
@@ -16,6 +17,14 @@ export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
      * Child element pass in to display as item content.
      */
     children?: React.ReactNode;
+    /**
+     * Optionally control the expanded state of the accordion items.
+     */
+    value?: ComponentProps<typeof Accordion.Root>['value'];
+    /**
+     * Callback function to be called when the expanded state of the items change.
+     */
+    onValueChanged?: ComponentProps<typeof Accordion.Root>['onValueChange'];
 }
 /**
  * ## Overview
@@ -26,5 +35,5 @@ export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
  *
  * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/components-accordion--overview)
  */
-declare const AccordionComponent: ({ className, children, ...props }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
+declare const AccordionComponent: React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<HTMLDivElement>>;
 export default AccordionComponent;

package/dist/components/Accordion/Accordion.js

@@ -1,21 +1,31 @@
-import { jsx as s } from "react/jsx-runtime";
-import c from "../../node_modules/classnames/index.js";
-import { getCommonProps as i } from "../../utils/index.js";
-import { Root as e } from "../../node_modules/@radix-ui/react-accordion/dist/index.js";
-import { getAccordionVariantProps as d } from "./utils.js";
-const N = ({ className: m, children: t, ...o }) => {
-  const { className: a, ...r } = i(o, "Accordion"), n = d(o.variant);
-  return /* @__PURE__ */ s(
-    e,
-    {
-      className: c(`${a}`, m),
-      ...r,
-      ...n,
-      id: o == null ? void 0 : o.id,
-      children: t
-    }
-  );
-};
+import { jsx as d } from "react/jsx-runtime";
+import { forwardRef as f } from "react";
+import l from "../../node_modules/classnames/index.js";
+import { getCommonProps as A } from "../../utils/index.js";
+import { Root as C } from "../../node_modules/@radix-ui/react-accordion/dist/index.js";
+import { getAccordionVariantProps as N } from "./utils.js";
+const P = f(
+  ({ className: r, children: a, variant: t, value: m, onValueChanged: n, ...o }, s) => {
+    const { className: c, ...i } = A(o, "Accordion"), e = N(t, m);
+    return (
+      // @ts-expect-error radix-ui type checking is too aggressive ans we know the values are valid
+      /* @__PURE__ */ d(
+        C,
+        {
+          className: l(`${c}`, r),
+          ...i,
+          ...e,
+          id: o == null ? void 0 : o.id,
+          ref: s,
+          value: m,
+          onValueChange: n,
+          children: a
+        }
+      )
+    );
+  }
+);
+P.displayName = "Accordion";
 export {
-  N as default
+  P as default
 };

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

@@ -3,10 +3,7 @@ import { AccordionItemProps } from './AccordionItem';
 import { AccordionVariants } from './types';
 declare const meta: {
     title: string;
-    component: ({ className, children, ...props }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
-    args: {
-        transitionTimeInMs: number;
-    };
+    component: import('react').ForwardRefExoticComponent<AccordionProps & import('react').RefAttributes<HTMLDivElement>>;
     argTypes: {
         variant: {
             options: AccordionVariants[];
@@ -20,3 +17,6 @@ export default meta;
 export declare const AccordionLarge: ({ transitionTimeInMs, ...props }: AccordionProps & AccordionItemProps) => import("react/jsx-runtime").JSX.Element;
 export declare const AccordionSmall: ({ transitionTimeInMs, ...props }: AccordionProps & AccordionItemProps) => import("react/jsx-runtime").JSX.Element;
 export declare const AccordionSubmenu: ({ transitionTimeInMs, ...props }: AccordionProps & AccordionItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ControlledAccordion: ({ items, ...props }: AccordionProps & {
+    items: AccordionItemProps[];
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Accordion/types.d.ts

@@ -1,3 +1,4 @@
+import { AccordionMultipleProps, AccordionSingleProps } from '@radix-ui/react-accordion';
 export interface AccordionHeaderType {
     /**
      * Child element pass in to display as header label.
@@ -52,15 +53,11 @@ export declare enum AccordionVariants {
     singleNonCollapsible = "singleNonCollapsible"
 }
 export type AccordionVariantKey = keyof typeof AccordionVariants;
-export declare enum AccordionType {
-    single = "single",
-    multiple = "multiple"
-}
 export interface AccordionVariantProps {
     /**
      * Determines whether multiple elements can be opened at the same time or not.
      */
-    type: AccordionType;
+    type: AccordionSingleProps['type'] | AccordionMultipleProps['type'];
     /**
      * Determines if an open element can be closed by clicking on it.
      * Only applicable to the `single` variants.

package/dist/components/Accordion/types.js

@@ -1,6 +1,5 @@
-var e = /* @__PURE__ */ ((l) => (l.multiple = "multiple", l.singleCollapsible = "singleCollapsible", l.singleNonCollapsible = "singleNonCollapsible", l))(e || {}), s = /* @__PURE__ */ ((l) => (l.single = "single", l.multiple = "multiple", l))(s || {}), g = /* @__PURE__ */ ((l) => (l.lg = "lg", l.sm = "sm", l))(g || {});
+var e = /* @__PURE__ */ ((l) => (l.multiple = "multiple", l.singleCollapsible = "singleCollapsible", l.singleNonCollapsible = "singleNonCollapsible", l))(e || {}), s = /* @__PURE__ */ ((l) => (l.lg = "lg", l.sm = "sm", l))(s || {});
 export {
-  g as AccordionItemVariant,
-  s as AccordionType,
+  s as AccordionItemVariant,
   e as AccordionVariants
 };

package/dist/components/Accordion/utils.d.ts

@@ -1,9 +1,10 @@
-import { AccordionVariantKey, AccordionVariantProps } from './types';
+import { AccordionVariantKey } from './types';
+import { AccordionMultipleProps, AccordionSingleProps } from '@radix-ui/react-accordion';
 /**
  * Sets the type and collapsible props based on the variant prop
  * The collapsible prop should only be passed when the variant is single
  */
-export declare const getAccordionVariantProps: (variant?: AccordionVariantKey) => AccordionVariantProps;
+export declare const getAccordionVariantProps: (variant?: AccordionVariantKey, value?: string[] | string) => AccordionSingleProps | AccordionMultipleProps;
 /**
  * A helper for getting the classes of the Accordion icons
  * @param className - The className of the component

package/dist/components/Accordion/utils.js

@@ -1,12 +1,12 @@
-import s from "../../node_modules/classnames/index.js";
-import { AccordionType as l, AccordionVariants as e } from "./types.js";
-const c = (i) => {
-  const o = { type: l.multiple };
-  return i === e.singleCollapsible && (o.type = l.single, o.collapsible = !0), i === e.singleNonCollapsible && (o.type = l.single, o.collapsible = !1), o;
-}, p = (i, o, n) => s(`${i}__icon`, `${i}-${n}__icon`, {
-  [`${i}__icon--lg`]: o
+import i from "../../node_modules/classnames/index.js";
+import { AccordionVariants as n } from "./types.js";
+const t = (o, e) => {
+  const r = { type: "multiple" };
+  return (o === n.singleCollapsible || o === n.singleNonCollapsible) && Array.isArray(e) && console.error("The value prop should not be an array when using a single variant"), o === n.singleCollapsible ? { type: "single" } : o === n.singleNonCollapsible ? { type: "single" } : r;
+}, p = (o, e, r) => i(`${o}__icon`, `${o}-${r}__icon`, {
+  [`${o}__icon--lg`]: e
 });
 export {
-  c as getAccordionVariantProps,
+  t as getAccordionVariantProps,
   p as getIconClasses
 };

package/dist/components/Tags/Tags.d.ts

@@ -0,0 +1,55 @@
+export interface I18nObject {
+    clearAllLabel?: string;
+}
+export interface TagsListProps {
+    /**
+     * Unique id for component testing
+     */
+    id: string;
+    /**
+     * Base class for TagsList component.
+     */
+    className?: string;
+    /**
+     * Child element pass in to display as item content.
+     */
+    children?: React.ReactNode;
+    /**
+     * `onRemove` callback provides the tag that is to be removed as a string
+     */
+    onClear: () => void;
+    /**
+     * Clear All label is translatable
+     */
+    clearAllLabel?: string;
+}
+export interface TagProps {
+    /**
+     * Unique id for component testing
+     */
+    id: string;
+    /**
+     * Base class for TagsList component.
+     */
+    className?: string;
+    /**
+     * `onRemove` callback provides the tag that is to be removed as a string
+     */
+    onRemove: (tag: string) => void;
+    /**
+     * Tag item label.
+     */
+    label: string;
+}
+export declare const Tag: ({ id, className, onRemove, label }: TagProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * ## Overview
+ *
+ * Overview of Tags component
+ *
+ * [Figma Link](https://www.figma.com/design/hMu9IWH5N3KamJy8tLFdyV/EASEL-Compendium%3A-Tokens%2C-Components-%26-Patterns?node-id=11648-3225&node-type=canvas&m=dev)
+ *
+ * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/components-tags--overview)
+ */
+declare const TagsList: import('react').ForwardRefExoticComponent<TagsListProps & import('react').RefAttributes<HTMLDivElement>>;
+export default TagsList;

package/dist/components/Tags/Tags.js

@@ -0,0 +1,43 @@
+import { jsxs as m, jsx as o } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import $ from "../../node_modules/classnames/index.js";
+import { getCommonProps as g, px as a } from "../../utils/index.js";
+import N from "../Button/Button.js";
+import { ButtonVariants as v } from "../Button/types.js";
+import h from "../../assets/chevronRight.svg.js";
+const u = p(
+  ({ className: l, children: t, clearAllLabel: e = "Clear All", onClear: n, ...s }, c) => {
+    const r = "tags-list", { className: d, ...f } = g(s, "TagsList"), { id: i } = s;
+    return /* @__PURE__ */ m(
+      "div",
+      {
+        className: $(`${a}-${r}`, d, l),
+        ...f,
+        ...s,
+        "data-testid": `${r}-${i}`,
+        ref: c,
+        children: [
+          t,
+          Array.isArray(t) && t.length > 0 && /* @__PURE__ */ m(
+            N,
+            {
+              onClick: n,
+              "data-testid": `${i}-clear-all-button`,
+              className: `${a}-${r}--clear`,
+              "aria-label": e,
+              variant: v.tertiary,
+              children: [
+                /* @__PURE__ */ o("div", { className: `${a}-left-arrow`, children: /* @__PURE__ */ o(h, {}) }),
+                /* @__PURE__ */ o("div", { className: `${a}-label`, children: e })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+u.displayName = "Tags";
+export {
+  u as default
+};

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

@@ -0,0 +1,27 @@
+import { TagsListProps } from './Tags';
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<TagsListProps & import('react').RefAttributes<HTMLDivElement>>;
+};
+export default meta;
+interface StoryProps extends TagsListProps {
+    playgroundWidth: string;
+}
+export declare const Playground: {
+    ({ playgroundWidth, ...args }: StoryProps): import("react/jsx-runtime").JSX.Element;
+    args: {
+        playgroundWidth: number;
+        className: string;
+    };
+    argTypes: {
+        onClear: {
+            action: string;
+        };
+        playgroundWidth: {
+            control: {
+                type: string;
+                min: number;
+            };
+        };
+    };
+};

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

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

package/dist/index.d.ts

@@ -33,6 +33,7 @@ export { default as ViewingsList, type ViewingsListProps } from './patterns/View
 export { default as Modal, type ModalProps } from './components/Modal/Modal';
 export { default as Drawer } from './components/Drawer/Drawer';
 export { default as Pagination, type PaginationProps, type PaginationOption, type PaginationOptionValue, } from './components/Pagination/Pagination';
+export { default as TagsList } from './components/Tags/Tags';
 export { default as StatefulViewingsList, type StatefulViewingsListProps, } from './patterns/ViewingsList/StatefulViewingsList';
 export * from './components/Text';
 export * from './components/TextSymbol';

package/dist/index.js

@@ -56,77 +56,78 @@ import { default as co } from "./patterns/ViewingsList/ViewingsList.js";
 import { default as So } from "./components/Modal/Modal.js";
 import { default as Po } from "./components/Drawer/Drawer.js";
 import { default as Io } from "./components/Pagination/Pagination.js";
-import { default as To } from "./patterns/ViewingsList/StatefulViewingsList.js";
-import { TextVariants as Ao } from "./components/Text/types.js";
-import { default as vo } from "./components/Text/Text.js";
-import { TextSymbolVariants as yo } from "./components/TextSymbol/types.js";
-import { default as Do } from "./components/TextSymbol/TextSymbol.js";
-import { default as Ro } from "./components/Accordion/Accordion.js";
-import { default as Mo } from "./components/Accordion/AccordionItem.js";
-import { AccordionItemVariant as Go, AccordionVariants as Oo } from "./components/Accordion/types.js";
-import { default as Eo } from "./patterns/UserManagement/UserManagement.js";
-import { AuthState as Uo } from "./patterns/UserManagement/types.js";
-import { SupportedLanguages as zo } from "./types/commonTypes.js";
-import { default as jo } from "./components/Breadcrumb/Breadcrumb.js";
+import { default as To } from "./components/Tags/Tags.js";
+import { default as Ao } from "./patterns/ViewingsList/StatefulViewingsList.js";
+import { TextVariants as vo } from "./components/Text/types.js";
+import { default as yo } from "./components/Text/Text.js";
+import { TextSymbolVariants as Do } from "./components/TextSymbol/types.js";
+import { default as Ro } from "./components/TextSymbol/TextSymbol.js";
+import { default as Mo } from "./components/Accordion/Accordion.js";
+import { default as Go } from "./components/Accordion/AccordionItem.js";
+import { AccordionItemVariant as Wo, AccordionVariants as Eo } from "./components/Accordion/types.js";
+import { default as Uo } from "./patterns/UserManagement/UserManagement.js";
+import { AuthState as zo } from "./patterns/UserManagement/types.js";
+import { SupportedLanguages as jo } from "./types/commonTypes.js";
+import { default as Jo } from "./components/Breadcrumb/Breadcrumb.js";
 import "react/jsx-runtime";
 import "./node_modules/classnames/index.js";
-import { default as Jo } from "./components/Dropdown/Dropdown.js";
-import { default as Xo } from "./components/Video/Video.js";
-import { default as $o } from "./patterns/LanguageSelector/LanguageSelector.js";
-import { default as ot } from "./components/ContentPeek/ContentPeek.js";
-import { default as rt } from "./components/Collapsible/Collapsible.js";
-import { default as ft } from "./components/Collapsible/CollapsibleContent.js";
-import { default as lt } from "./components/Collapsible/CollapsibleTrigger.js";
-import { SeldonProvider as dt } from "./providers/SeldonProvider/SeldonProvider.js";
-import { default as ut } from "./components/PageContentWrapper/PageContentWrapper.js";
-import { default as nt } from "./components/Carousel/Carousel.js";
-import { default as gt } from "./components/Carousel/CarouselContent.js";
-import { default as Ct } from "./components/Carousel/CarouselItem.js";
-import { default as Lt } from "./components/Carousel/CarouselDots.js";
-import { default as ht } from "./components/Detail/Detail.js";
-import { default as bt } from "./patterns/DetailList/DetailList.js";
-import { DetailListAlignment as kt } from "./patterns/DetailList/types.js";
-import { default as Vt } from "./components/PinchZoom/PinchZoom.js";
-import { default as wt } from "./components/Tabs/TabsContainer.js";
-import { default as Bt } from "./components/Tabs/TabsContent.js";
-import { default as Nt } from "./components/SeldonImage/SeldonImage.js";
-import { default as Ft } from "./patterns/SaleHeaderBanner/SaleHeaderBanner.js";
-import { default as Ht } from "./patterns/SaleHeaderBanner/SaleHeaderBrowseAuctions.js";
-import { AuctionState as Ot } from "./patterns/SaleHeaderBanner/types.js";
-import { default as Et } from "./components/Countdown/Countdown.js";
-import { CountdownVariants as Ut } from "./components/Countdown/types.js";
+import { default as Xo } from "./components/Dropdown/Dropdown.js";
+import { default as $o } from "./components/Video/Video.js";
+import { default as ot } from "./patterns/LanguageSelector/LanguageSelector.js";
+import { default as rt } from "./components/ContentPeek/ContentPeek.js";
+import { default as ft } from "./components/Collapsible/Collapsible.js";
+import { default as lt } from "./components/Collapsible/CollapsibleContent.js";
+import { default as dt } from "./components/Collapsible/CollapsibleTrigger.js";
+import { SeldonProvider as ut } from "./providers/SeldonProvider/SeldonProvider.js";
+import { default as nt } from "./components/PageContentWrapper/PageContentWrapper.js";
+import { default as gt } from "./components/Carousel/Carousel.js";
+import { default as Ct } from "./components/Carousel/CarouselContent.js";
+import { default as Lt } from "./components/Carousel/CarouselItem.js";
+import { default as ht } from "./components/Carousel/CarouselDots.js";
+import { default as bt } from "./components/Detail/Detail.js";
+import { default as kt } from "./patterns/DetailList/DetailList.js";
+import { DetailListAlignment as Vt } from "./patterns/DetailList/types.js";
+import { default as wt } from "./components/PinchZoom/PinchZoom.js";
+import { default as Bt } from "./components/Tabs/TabsContainer.js";
+import { default as Nt } from "./components/Tabs/TabsContent.js";
+import { default as Ft } from "./components/SeldonImage/SeldonImage.js";
+import { default as Ht } from "./patterns/SaleHeaderBanner/SaleHeaderBanner.js";
+import { default as Ot } from "./patterns/SaleHeaderBanner/SaleHeaderBrowseAuctions.js";
+import { AuctionState as Et } from "./patterns/SaleHeaderBanner/types.js";
+import { default as Ut } from "./components/Countdown/Countdown.js";
+import { CountdownVariants as zt } from "./components/Countdown/types.js";
 export {
-  Ro as Accordion,
-  Mo as AccordionItem,
-  Go as AccordionItemVariant,
-  Oo as AccordionVariants,
+  Mo as Accordion,
+  Go as AccordionItem,
+  Wo as AccordionItemVariant,
+  Eo as AccordionVariants,
   S as AccountCircle,
   P as ArrowPrev,
-  Ot as AuctionState,
-  Uo as AuthState,
-  jo as Breadcrumb,
+  Et as AuctionState,
+  zo as AuthState,
+  Jo as Breadcrumb,
   Ce as Button,
   Le as ButtonVariants,
   I as Calendar,
-  nt as Carousel,
-  gt as CarouselContent,
-  Lt as CarouselDots,
-  Ct as CarouselItem,
+  gt as Carousel,
+  Ct as CarouselContent,
+  ht as CarouselDots,
+  Lt as CarouselItem,
   T as ChevronDown,
   A as ChevronNext,
   v as ChevronRight,
   y as Close,
-  rt as Collapsible,
-  ft as CollapsibleContent,
-  lt as CollapsibleTrigger,
-  ot as ContentPeek,
-  Et as Countdown,
-  Ut as CountdownVariants,
-  ht as Detail,
-  bt as DetailList,
-  kt as DetailListAlignment,
+  ft as Collapsible,
+  lt as CollapsibleContent,
+  dt as CollapsibleTrigger,
+  rt as ContentPeek,
+  Ut as Countdown,
+  zt as CountdownVariants,
+  bt as Detail,
+  kt as DetailList,
+  Vt as DetailListAlignment,
   Po as Drawer,
-  Jo as Dropdown,
+  Xo as Dropdown,
   be as ErrorBoundary,
   R as Facebook,
   D as FavoriteOutline,
@@ -141,7 +142,7 @@ export {
   he as IconButton,
   Ee as Input,
   Y as Instagram,
-  $o as LanguageSelector,
+  ot as LanguageSelector,
   Ue as Link,
   je as LinkBlock,
   Je as LinkList,
@@ -156,38 +157,39 @@ export {
   He as NavigationList,
   f as PaddingTokens,
   pe as Page,
-  ut as PageContentWrapper,
+  nt as PageContentWrapper,
   Io as Pagination,
   K as PhillipsLogo,
-  Vt as PinchZoom,
+  wt as PinchZoom,
   _ as Plus,
   ee as React,
   W as Reddit,
   Xe as Row,
   ie as SSRMediaQuery,
-  Ft as SaleHeaderBanner,
-  Ht as SaleHeaderBrowseAuctions,
+  Ht as SaleHeaderBanner,
+  Ot as SaleHeaderBrowseAuctions,
   ro as Search,
-  Nt as SeldonImage,
-  dt as SeldonProvider,
+  Ft as SeldonImage,
+  ut as SeldonProvider,
   fo as Select,
   te as Share,
   io as Social,
   s as SpacingTokens,
   lo as SplitPanel,
   ae as Spotify,
-  To as StatefulViewingsList,
+  Ao as StatefulViewingsList,
   po as Subscribe,
   xo as SubscriptionState,
-  zo as SupportedLanguages,
-  wt as TabsContainer,
-  Bt as TabsContent,
-  vo as Text,
-  yo as TextSymbolVariants,
-  Do as TextSymbols,
-  Ao as TextVariants,
-  Eo as UserManagement,
-  Xo as Video,
+  jo as SupportedLanguages,
+  Bt as TabsContainer,
+  Nt as TabsContent,
+  To as TagsList,
+  yo as Text,
+  Do as TextSymbolVariants,
+  Ro as TextSymbols,
+  vo as TextVariants,
+  Uo as UserManagement,
+  $o as Video,
   co as ViewingsList,
   se as WeChat,
   me as Youtube,

package/dist/node_modules/exenv/index.js

@@ -1,4 +1,4 @@
-import { __module as t } from "../../_virtual/index5.js";
+import { __module as t } from "../../_virtual/index6.js";
 /*!
   Copyright (c) 2015 Jed Watson.
   Based on code that is Copyright 2013-2015, Facebook, Inc.

package/dist/node_modules/prop-types/node_modules/react-is/index.js

@@ -1,4 +1,4 @@
-import { __module as e } from "../../../../_virtual/index6.js";
+import { __module as e } from "../../../../_virtual/index5.js";
 import { __require as o } from "./cjs/react-is.production.min.js";
 import { __require as t } from "./cjs/react-is.development.js";
 var r;

package/dist/scss/_vars.scss

@@ -149,6 +149,7 @@ $breakpoint-xl: 1801px;
   --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;
@@ -290,6 +291,7 @@ $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);

package/dist/scss/componentStyles.scss

@@ -36,6 +36,7 @@
 @use 'components/ContentPeek/contentPeek';
 @use 'components/PageContentWrapper/pageContentWrapper';
 @use 'components/Carousel/carousel';
+@use 'components/Tags/tags';
 @use 'components/Countdown/countdown';
 @use 'components/Countdown/duration';
 

package/dist/scss/components/Input/_input.scss

@@ -14,8 +14,9 @@ $lg: #{$px}-input--lg;
   }
 
   &__label {
+    @include text($string2);
+
     color: $pure-black;
-    font-size: 0.75rem;
     font-variation-settings: 'wght' 600;
     margin-bottom: 0.5rem;
     word-break: break-word;
@@ -47,7 +48,7 @@ $lg: #{$px}-input--lg;
     -webkit-box-orient: vertical;
     display: -webkit-box;
     -webkit-line-clamp: 2;
-    line-height: 1.25;
+    line-height: $spacing-md;
     overflow: hidden;
   }
 

package/dist/scss/components/Tags/_tags.scss

@@ -0,0 +1,137 @@
+@use '../../allPartials' as *;
+
+.#{$px}-tags-list {
+  align-items: center;
+  display: flex;
+  flex-flow: row wrap;
+  gap: $spacing-sm;
+
+  .#{$px}-tag {
+    align-items: center;
+    background-color: $pure-white;
+    border: 1px solid $button-hover;
+    border-radius: 6.25rem;
+    cursor: default;
+    display: flex;
+    gap: 0;
+    height: $button-tertiary-height;
+    justify-content: center;
+    padding: 0 $spacing-xsm 0 $spacing-sm;
+
+    &__label {
+      color: $button-hover;
+      font-size: 0.75rem;
+      font-variation-settings: 'wght' 600;
+      text-align: center;
+    }
+
+    &__button {
+      align-items: center;
+      display: flex;
+      gap: $spacing-micro;
+      height: $button-tertiary-height;
+      justify-content: center;
+      padding: 0;
+
+      &--close {
+        height: 1.25rem;
+        width: 1.25rem;
+
+        svg {
+          height: 1rem;
+          width: 1rem;
+
+          path {
+            fill: $button-hover;
+          }
+
+          &:focus {
+            fill: $pure-black;
+          }
+        }
+
+        &:hover {
+          background-color: $pure-white;
+
+          svg {
+            path {
+              fill: $pure-black;
+            }
+          }
+        }
+
+        &:focus {
+          svg {
+            path {
+              fill: $pure-black;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &--clear {
+    align-items: center;
+    border-color: $pure-white;
+    display: flex;
+    gap: 0;
+    height: 2rem;
+
+    &:hover {
+      cursor: pointer;
+
+      .#{$px}-left-arrow {
+        svg {
+          fill: $pure-black;
+
+          path {
+            fill: $pure-black;
+          }
+        }
+      }
+    }
+
+    &:focus-visible {
+      border-color: $button-hover;
+      border-radius: 6.25rem;
+      gap: 0;
+      outline-offset: 0;
+      padding: 0;
+    }
+
+    .#{$px}-left-arrow {
+      transform: rotateX(-1);
+
+      svg {
+        height: 1rem;
+        width: 1rem;
+      }
+
+      &:hover {
+        background: $pure-white;
+
+        svg {
+          fill: $pure-black;
+
+          path {
+            fill: $pure-black;
+          }
+        }
+      }
+
+      &:focus-visible {
+        &:focus-visible {
+          outline: none;
+          outline-offset: none;
+        }
+      }
+    }
+
+    .#{$px}-label {
+      color: $pure-black;
+      font-size: 0.875rem;
+      font-variation-settings: 'wght' 600;
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.88.0",
+  "version": "1.89.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/PhillipsAuctionHouse/seldon"