@sats-group/ui-lib 81.6.1 → 82.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sats-group/ui-lib",
-  "version": "81.6.1",
+  "version": "82.1.0",
   "description": "SATS web user interface library",
   "engines": {
     "node": "^18 || ^20",

package/react/components.js

@@ -1,2 +1,2 @@
-const e=["badge","banner","bomb","button","checkbox","chip","chip-selected","collapse","confirmation","context-menu","cropped-image","div-button","dropdown-list","expander","filter","filter-wrapper","flag","form-content","hidden-input","link","link-button","link-card","message","message-field","modal","progress-bar","radio","scale-bar","search","select","select-option","tag","text","text-area","text-input","toggle","toolbox","visually-button","visually-hidden"],t=[".badge",".banner",".bomb",".button",".checkbox",".chip",".chip-selected",".collapse",".confirmation",".context-menu",".cropped-image",".div-button",".dropdown-list",".expander",".filter",".filter-wrapper",".flag",".form-content",".hidden-input",".link",".link-button",".link-card",".message",".message-field",".modal",".progress-bar",".radio",".scale-bar",".search",".select",".select-option",".tag",".text",".text-area",".text-input",".toggle",".toolbox",".visually-button",".visually-hidden"];export{e as names,t as selectors};
+const e=["badge","banner","bomb","button","checkbox","chip","chip-selected","collapse","confirmation","context-menu","cropped-image","div-button","dropdown-list","expander","filter","filter-wrapper","flag","form-content","hidden-input","link","link-button","link-card","message","message-field","modal","pagination","progress-bar","radio","scale-bar","search","select","select-option","tag","text","text-area","text-input","toggle","toolbox","visually-button","visually-hidden"],t=[".badge",".banner",".bomb",".button",".checkbox",".chip",".chip-selected",".collapse",".confirmation",".context-menu",".cropped-image",".div-button",".dropdown-list",".expander",".filter",".filter-wrapper",".flag",".form-content",".hidden-input",".link",".link-button",".link-card",".message",".message-field",".modal",".pagination",".progress-bar",".radio",".scale-bar",".search",".select",".select-option",".tag",".text",".text-area",".text-input",".toggle",".toolbox",".visually-button",".visually-hidden"];export{e as names,t as selectors};
 //# sourceMappingURL=components.js.map

package/react/components.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../react/components.ts"],
-  "sourcesContent": ["export const names = [\n  'badge',\n  'banner',\n  'bomb',\n  'button',\n  'checkbox',\n  'chip',\n  'chip-selected',\n  'collapse',\n  'confirmation',\n  'context-menu',\n  'cropped-image',\n  'div-button',\n  'dropdown-list',\n  'expander',\n  'filter',\n  'filter-wrapper',\n  'flag',\n  'form-content',\n  'hidden-input',\n  'link',\n  'link-button',\n  'link-card',\n  'message',\n  'message-field',\n  'modal',\n  'progress-bar',\n  'radio',\n  'scale-bar',\n  'search',\n  'select',\n  'select-option',\n  'tag',\n  'text',\n  'text-area',\n  'text-input',\n  'toggle',\n  'toolbox',\n  'visually-button',\n  'visually-hidden',\n];\n\nexport const selectors = [\n  '.badge',\n  '.banner',\n  '.bomb',\n  '.button',\n  '.checkbox',\n  '.chip',\n  '.chip-selected',\n  '.collapse',\n  '.confirmation',\n  '.context-menu',\n  '.cropped-image',\n  '.div-button',\n  '.dropdown-list',\n  '.expander',\n  '.filter',\n  '.filter-wrapper',\n  '.flag',\n  '.form-content',\n  '.hidden-input',\n  '.link',\n  '.link-button',\n  '.link-card',\n  '.message',\n  '.message-field',\n  '.modal',\n  '.progress-bar',\n  '.radio',\n  '.scale-bar',\n  '.search',\n  '.select',\n  '.select-option',\n  '.tag',\n  '.text',\n  '.text-area',\n  '.text-input',\n  '.toggle',\n  '.toolbox',\n  '.visually-button',\n  '.visually-hidden',\n];\n"],
-  "mappings": "AAAO,MAAMA,EAAQ,CACnB,QACA,SACA,OACA,SACA,WACA,OACA,gBACA,WACA,eACA,eACA,gBACA,aACA,gBACA,WACA,SACA,iBACA,OACA,eACA,eACA,OACA,cACA,YACA,UACA,gBACA,QACA,eACA,QACA,YACA,SACA,SACA,gBACA,MACA,OACA,YACA,aACA,SACA,UACA,kBACA,iBACF,EAEaC,EAAY,CACvB,SACA,UACA,QACA,UACA,YACA,QACA,iBACA,YACA,gBACA,gBACA,iBACA,cACA,iBACA,YACA,UACA,kBACA,QACA,gBACA,gBACA,QACA,eACA,aACA,WACA,iBACA,SACA,gBACA,SACA,aACA,UACA,UACA,iBACA,OACA,QACA,aACA,cACA,UACA,WACA,mBACA,kBACF",
+  "sourcesContent": ["export const names = [\n  'badge',\n  'banner',\n  'bomb',\n  'button',\n  'checkbox',\n  'chip',\n  'chip-selected',\n  'collapse',\n  'confirmation',\n  'context-menu',\n  'cropped-image',\n  'div-button',\n  'dropdown-list',\n  'expander',\n  'filter',\n  'filter-wrapper',\n  'flag',\n  'form-content',\n  'hidden-input',\n  'link',\n  'link-button',\n  'link-card',\n  'message',\n  'message-field',\n  'modal',\n  'pagination',\n  'progress-bar',\n  'radio',\n  'scale-bar',\n  'search',\n  'select',\n  'select-option',\n  'tag',\n  'text',\n  'text-area',\n  'text-input',\n  'toggle',\n  'toolbox',\n  'visually-button',\n  'visually-hidden',\n];\n\nexport const selectors = [\n  '.badge',\n  '.banner',\n  '.bomb',\n  '.button',\n  '.checkbox',\n  '.chip',\n  '.chip-selected',\n  '.collapse',\n  '.confirmation',\n  '.context-menu',\n  '.cropped-image',\n  '.div-button',\n  '.dropdown-list',\n  '.expander',\n  '.filter',\n  '.filter-wrapper',\n  '.flag',\n  '.form-content',\n  '.hidden-input',\n  '.link',\n  '.link-button',\n  '.link-card',\n  '.message',\n  '.message-field',\n  '.modal',\n  '.pagination',\n  '.progress-bar',\n  '.radio',\n  '.scale-bar',\n  '.search',\n  '.select',\n  '.select-option',\n  '.tag',\n  '.text',\n  '.text-area',\n  '.text-input',\n  '.toggle',\n  '.toolbox',\n  '.visually-button',\n  '.visually-hidden',\n];\n"],
+  "mappings": "AAAO,MAAMA,EAAQ,CACnB,QACA,SACA,OACA,SACA,WACA,OACA,gBACA,WACA,eACA,eACA,gBACA,aACA,gBACA,WACA,SACA,iBACA,OACA,eACA,eACA,OACA,cACA,YACA,UACA,gBACA,QACA,aACA,eACA,QACA,YACA,SACA,SACA,gBACA,MACA,OACA,YACA,aACA,SACA,UACA,kBACA,iBACF,EAEaC,EAAY,CACvB,SACA,UACA,QACA,UACA,YACA,QACA,iBACA,YACA,gBACA,gBACA,iBACA,cACA,iBACA,YACA,UACA,kBACA,QACA,gBACA,gBACA,QACA,eACA,aACA,WACA,iBACA,SACA,cACA,gBACA,SACA,aACA,UACA,UACA,iBACA,OACA,QACA,aACA,cACA,UACA,WACA,mBACA,kBACF",
   "names": ["names", "selectors"]
 }

package/react/pagination/index.d.ts

@@ -0,0 +1,2 @@
+import Pagination from './pagination';
+export default Pagination;

package/react/pagination/index.js

@@ -0,0 +1,2 @@
+import o from"./pagination";var a=o;export{a as default};
+//# sourceMappingURL=index.js.map

package/react/pagination/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../react/pagination/index.ts"],
+  "sourcesContent": ["import Pagination from './pagination';\nexport default Pagination;\n"],
+  "mappings": "AAAA,OAAOA,MAAgB,eACvB,IAAOC,EAAQD",
+  "names": ["Pagination", "pagination_default"]
+}

package/react/pagination/pagination.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { Pagination as Props } from './pagination.types';
+declare const Pagination: React.FC<Props>;
+export default Pagination;

package/react/pagination/pagination.js

@@ -0,0 +1,2 @@
+var P=Object.defineProperty,x=Object.defineProperties;var L=Object.getOwnPropertyDescriptors;var g=Object.getOwnPropertySymbols;var k=Object.prototype.hasOwnProperty,C=Object.prototype.propertyIsEnumerable;var c=(n,i,a)=>i in n?P(n,i,{enumerable:!0,configurable:!0,writable:!0,value:a}):n[i]=a,t=(n,i)=>{for(var a in i||(i={}))k.call(i,a)&&c(n,a,i[a]);if(g)for(var a of g(i))C.call(i,a)&&c(n,a,i[a]);return n},l=(n,i)=>x(n,L(i));var b=(n,i)=>{var a={};for(var e in n)k.call(n,e)&&i.indexOf(e)<0&&(a[e]=n[e]);if(n!=null&&g)for(var e of g(n))i.indexOf(e)<0&&C.call(n,e)&&(a[e]=n[e]);return a};import o from"react";import h from"../icons/24/arrow-right";import M from"../select";import H from"../text";import{prep as T}from"./prep";const v=p=>{var m=p,{bordered:n,children:i,text:a}=m,e=b(m,["bordered","children","text"]);return o.createElement(e["aria-disabled"]===!0||e["aria-disabled"]==="true"?"div":"a",l(t({},e),{className:n?"pagination__link pagination__link--bordered":"pagination__link"}),i||o.createElement(H,{size:H.sizes.small,tight:!0},a))},_=(n,i)=>i?a=>i(a,n):void 0,y=(n,i)=>i?a=>{const e=n.at(a.target.selectedIndex);if(e)return _(e,i)}:void 0,S=({entries:n,label:i,next:a,onNext:e,onPage:p,onPrevious:m,previous:u,select:r,windowSize:E})=>{const s=n.findIndex(d=>d["aria-current"]),f=s===-1?void 0:n.at(s),N=T(n,s,E);return o.createElement("nav",{className:"pagination","aria-label":i},o.createElement("div",{className:"pagination__content"},u?o.createElement(v,l(t({},u),{"aria-disabled":s===0,bordered:!0,onClick:_(u,m)}),o.createElement("div",{className:"pagination__icon pagination__icon--flipped"},o.createElement(h,null))):null,o.createElement("div",{className:r?"pagination__entries pagination__entries--hideable":"pagination__entries"},N.map(d=>o.createElement(v,l(t({},d),{key:d.href,onClick:_(d,p)})))),r?o.createElement("div",{className:"pagination__select"},o.createElement(M,l(t({},r),{onChange:r.onChange?r.onChange:y(n,p),options:r.options?r.options:n.map(d=>({text:d["aria-label"],value:d.href})),value:r.value?r.value:p&&f?f.href:void 0}))):null,a?o.createElement(v,l(t({},a),{"aria-disabled":s===n.length-1,bordered:!0,onClick:_(a,e)}),o.createElement("div",{className:"pagination__icon"},o.createElement(h,null))):null))};var j=S;export{j as default};
+//# sourceMappingURL=pagination.js.map

package/react/pagination/pagination.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../react/pagination/pagination.tsx"],
+  "sourcesContent": ["import React, { type MouseEventHandler } from 'react';\nimport SvgArrowRight from '../icons/24/arrow-right';\nimport Select from '../select';\nimport Text from '../text';\nimport type { ClickHandler, Pagination as Props } from './pagination.types';\nimport { prep } from './prep';\n\nconst Link: React.FC<React.PropsWithChildren<Props['entries'][0]>> = ({\n  bordered,\n  children,\n  text,\n  ...rest\n}) =>\n  React.createElement(\n    rest['aria-disabled'] === true || rest['aria-disabled'] === 'true'\n      ? 'div'\n      : 'a',\n    {\n      ...rest,\n      className: bordered\n        ? 'pagination__link pagination__link--bordered'\n        : 'pagination__link',\n    },\n    children ? (\n      children\n    ) : (\n      <Text size={Text.sizes.small} tight>\n        {text}\n      </Text>\n    ),\n  );\n\nconst linkHandler = (\n  entry: Props['entries'][0],\n  handler?: ClickHandler,\n): MouseEventHandler<HTMLAnchorElement> | undefined =>\n  handler ? event => handler(event, entry) : undefined;\n\nconst selectHandler = (\n  entries: Props['entries'],\n  handler?: ClickHandler,\n): React.ChangeEventHandler<HTMLSelectElement> | undefined =>\n  handler\n    ? event => {\n        const entry = entries.at(event.target.selectedIndex);\n        if (entry) {\n          return linkHandler(entry, handler);\n        }\n      }\n    : undefined;\n\nconst Pagination: React.FC<Props> = ({\n  entries,\n  label,\n  next,\n  onNext,\n  onPage,\n  onPrevious,\n  previous,\n  select,\n  windowSize,\n}) => {\n  const index = entries.findIndex(entry => entry['aria-current']);\n  const currentEntry = index === -1 ? undefined : entries.at(index);\n  const visibleEntries = prep(entries, index, windowSize);\n\n  return (\n    <nav className=\"pagination\" aria-label={label}>\n      <div className=\"pagination__content\">\n        {previous ? (\n          <Link\n            {...previous}\n            aria-disabled={index === 0}\n            bordered\n            onClick={linkHandler(previous, onPrevious)}\n          >\n            <div className=\"pagination__icon pagination__icon--flipped\">\n              <SvgArrowRight />\n            </div>\n          </Link>\n        ) : null}\n        <div\n          className={\n            select\n              ? 'pagination__entries pagination__entries--hideable'\n              : 'pagination__entries'\n          }\n        >\n          {visibleEntries.map(entry => (\n            <Link\n              {...entry}\n              key={entry.href}\n              onClick={linkHandler(entry, onPage)}\n            />\n          ))}\n        </div>\n        {select ? (\n          <div className=\"pagination__select\">\n            <Select\n              {...select}\n              onChange={\n                select.onChange\n                  ? select.onChange\n                  : selectHandler(entries, onPage)\n              }\n              options={\n                select.options\n                  ? select.options\n                  : entries.map(entry => ({\n                      text: entry['aria-label'],\n                      value: entry.href,\n                    }))\n              }\n              value={\n                select.value\n                  ? select.value\n                  : onPage && currentEntry\n                    ? currentEntry.href\n                    : undefined\n              }\n            />\n          </div>\n        ) : null}\n        {next ? (\n          <Link\n            {...next}\n            aria-disabled={index === entries.length - 1}\n            bordered\n            onClick={linkHandler(next, onNext)}\n          >\n            <div className=\"pagination__icon\">\n              <SvgArrowRight />\n            </div>\n          </Link>\n        ) : null}\n      </div>\n    </nav>\n  );\n};\n\nexport default Pagination;\n"],
+  "mappings": "+kBAAA,OAAOA,MAAuC,QAC9C,OAAOC,MAAmB,0BAC1B,OAAOC,MAAY,YACnB,OAAOC,MAAU,UAEjB,OAAS,QAAAC,MAAY,SAErB,MAAMC,EAAgEC,GAKnE,CALmE,IAAAC,EAAAD,EACpE,UAAAE,EACA,SAAAC,EACA,KAAAC,CAVF,EAOsEH,EAIjEI,EAAAC,EAJiEL,EAIjE,CAHH,WACA,WACA,SAGA,OAAAP,EAAM,cACJW,EAAK,eAAe,IAAM,IAAQA,EAAK,eAAe,IAAM,OACxD,MACA,IACJE,EAAAC,EAAA,GACKH,GADL,CAEE,UAAWH,EACP,8CACA,kBACN,GACAC,GAGET,EAAA,cAACG,EAAA,CAAK,KAAMA,EAAK,MAAM,MAAO,MAAK,IAChCO,CACH,CAEJ,GAEIK,EAAc,CAClBC,EACAC,IAEAA,EAAUC,GAASD,EAAQC,EAAOF,CAAK,EAAI,OAEvCG,EAAgB,CACpBC,EACAH,IAEAA,EACIC,GAAS,CACP,MAAMF,EAAQI,EAAQ,GAAGF,EAAM,OAAO,aAAa,EACnD,GAAIF,EACF,OAAOD,EAAYC,EAAOC,CAAO,CAErC,EACA,OAEAI,EAA8B,CAAC,CACnC,QAAAD,EACA,MAAAE,EACA,KAAAC,EACA,OAAAC,EACA,OAAAC,EACA,WAAAC,EACA,SAAAC,EACA,OAAAC,EACA,WAAAC,CACF,IAAM,CACJ,MAAMC,EAAQV,EAAQ,UAAUJ,GAASA,EAAM,cAAc,CAAC,EACxDe,EAAeD,IAAU,GAAK,OAAYV,EAAQ,GAAGU,CAAK,EAC1DE,EAAiB5B,EAAKgB,EAASU,EAAOD,CAAU,EAEtD,OACE7B,EAAA,cAAC,OAAI,UAAU,aAAa,aAAYsB,GACtCtB,EAAA,cAAC,OAAI,UAAU,uBACZ2B,EACC3B,EAAA,cAACK,EAAAQ,EAAAC,EAAA,GACKa,GADL,CAEC,gBAAeG,IAAU,EACzB,SAAQ,GACR,QAASf,EAAYY,EAAUD,CAAU,IAEzC1B,EAAA,cAAC,OAAI,UAAU,8CACbA,EAAA,cAACC,EAAA,IAAc,CACjB,CACF,EACE,KACJD,EAAA,cAAC,OACC,UACE4B,EACI,oDACA,uBAGLI,EAAe,IAAIhB,GAClBhB,EAAA,cAACK,EAAAQ,EAAAC,EAAA,GACKE,GADL,CAEC,IAAKA,EAAM,KACX,QAASD,EAAYC,EAAOS,CAAM,GACpC,CACD,CACH,EACCG,EACC5B,EAAA,cAAC,OAAI,UAAU,sBACbA,EAAA,cAACE,EAAAW,EAAAC,EAAA,GACKc,GADL,CAEC,SACEA,EAAO,SACHA,EAAO,SACPT,EAAcC,EAASK,CAAM,EAEnC,QACEG,EAAO,QACHA,EAAO,QACPR,EAAQ,IAAIJ,IAAU,CACpB,KAAMA,EAAM,YAAY,EACxB,MAAOA,EAAM,IACf,EAAE,EAER,MACEY,EAAO,MACHA,EAAO,MACPH,GAAUM,EACRA,EAAa,KACb,QAEV,CACF,EACE,KACHR,EACCvB,EAAA,cAACK,EAAAQ,EAAAC,EAAA,GACKS,GADL,CAEC,gBAAeO,IAAUV,EAAQ,OAAS,EAC1C,SAAQ,GACR,QAASL,EAAYQ,EAAMC,CAAM,IAEjCxB,EAAA,cAAC,OAAI,UAAU,oBACbA,EAAA,cAACC,EAAA,IAAc,CACjB,CACF,EACE,IACN,CACF,CAEJ,EAEA,IAAOgC,EAAQZ",
+  "names": ["React", "SvgArrowRight", "Select", "Text", "prep", "Link", "_a", "_b", "bordered", "children", "text", "rest", "__objRest", "__spreadProps", "__spreadValues", "linkHandler", "entry", "handler", "event", "selectHandler", "entries", "Pagination", "label", "next", "onNext", "onPage", "onPrevious", "previous", "select", "windowSize", "index", "currentEntry", "visibleEntries", "pagination_default"]
+}

package/react/pagination/pagination.scss

@@ -0,0 +1,119 @@
+@use 'sass:math';
+@use '../../tokens/colours';
+@use '../../tokens/spacing';
+
+.pagination {
+  @mixin break {
+    @container (min-width: 400px) {
+      @content;
+    }
+  }
+
+  @mixin hover {
+    @media (hover: hover) {
+      &:hover {
+        @content;
+      }
+    }
+  }
+
+  container-type: inline-size;
+
+  &__content {
+    align-items: center;
+    display: flex;
+    gap: spacing.$s;
+  }
+
+  &__entries {
+    display: contents;
+
+    &--hideable:has(+ .pagination__select) {
+      display: none;
+
+      @include break {
+        display: contents;
+      }
+    }
+  }
+
+  &__select {
+    @include break {
+      display: none;
+    }
+  }
+
+  &__link {
+    $size: 38px;
+    border-radius: math.div($size, 2);
+    display: grid;
+    flex-shrink: 0;
+    height: $size;
+    max-height: $size;
+    min-height: $size;
+    min-width: $size;
+    padding: 0 spacing.$s;
+    place-items: center;
+    text-decoration: none;
+
+    @include hover {
+      background: var(--surface-primary-hover);
+      color: var(--buttons-primary-hover);
+    }
+
+    &--bordered {
+      background: var(--buttons-clean-default);
+      border: 1px solid var(--ge-divider-default);
+      color: var(--on-buttons-on-clean-default);
+      padding: 0;
+
+      @include break {
+        &[aria-disabled='true'] {
+          display: none;
+        }
+      }
+
+      @include hover {
+        background: var(--buttons-clean-default);
+        color: var(--on-buttons-on-clean-default);
+      }
+    }
+
+    &[aria-current='page'] {
+      background: var(--buttons-primary-default);
+      color: var(--on-buttons-on-primary-default);
+      outline-color: var(--buttons-primary-default);
+
+      @include break {
+        & + .pagination__link--bordered {
+          display: none;
+        }
+      }
+
+      @include hover {
+        background: var(--buttons-primary-hover);
+        color: var(--on-buttons-on-primary-default);
+      }
+    }
+
+    &[aria-disabled='true'] {
+      background: var(--buttons-clean-disabled);
+      color: var(--surface-secondary-disabled);
+
+      @include hover {
+        background: var(--buttons-clean-disabled);
+        color: var(--surface-secondary-disabled);
+      }
+    }
+  }
+
+  &__icon {
+    &--flipped {
+      rotate: 180deg;
+    }
+
+    svg {
+      display: block;
+    }
+  }
+}

package/react/pagination/pagination.types.d.ts

@@ -0,0 +1,22 @@
+import type { AnchorHTMLAttributes } from 'react';
+import type { Select } from '../select/select.types';
+export type Link = AnchorHTMLAttributes<HTMLAnchorElement> & Required<Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'aria-label' | 'href'>> & {
+    'aria-current'?: 'page';
+    bordered?: boolean;
+    text: string;
+};
+export type ClickHandler = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>, entry: Link) => void;
+export type Pagination = {
+    entries: Link[];
+    /** `Pagination` is a `nav` and needs to be labeled */
+    label: string;
+    next?: Link;
+    onNext?: ClickHandler;
+    onPage?: ClickHandler;
+    onPrevious?: ClickHandler;
+    previous?: Link;
+    /** If passed, renders a `Select` in slimmer containers */
+    select?: Select;
+    /** Enforced minimum of `5` */
+    windowSize: number;
+};

package/react/pagination/pagination.types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=pagination.types.js.map

package/react/pagination/pagination.types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/react/pagination/prep.d.ts

@@ -0,0 +1,9 @@
+import type { Pagination as Props } from './pagination.types';
+declare const filter: (entries: Props["entries"], currentIndex: number, windowSize: number) => typeof entries;
+/**
+ * To do less work on the client,
+ * use this on `entries` on the server
+ * before passing them to `Pagination`.
+ */
+export declare const prep: typeof filter;
+export {};

package/react/pagination/prep.js

@@ -0,0 +1,2 @@
+const u=(t,n,i)=>{const c=Math.max(i,5);if(t.length<=i)return t;const e=t.length-1,a=c-2,o=a/2;let s=Math.max(n-Math.floor(o),1),r=Math.min(n+Math.ceil(o),e);const l=Math.max(a-(r-s),0);s===1?r=r+l:r===e&&(s=s-l);const f=t.at(0),m=t.at(-1);if(!f||!m)return t;const p=t.slice(s,r);return p.unshift(f),p.push(m),p},h={text:"..."},d=(t,n)=>{const i=t.at(1),c=t.at(-2),e=n.at(1),a=n.at(-2);if(!i||!c||!e||!a)return n;const o=Array.from(n);return i.href!==e.href&&o.splice(1,1,Object.assign({},e,h)),c.href!==a.href&&o.splice(-2,1,Object.assign({},a,h)),o},x=(t,n,i)=>d(t,u(t,n,i));export{x as prep};
+//# sourceMappingURL=prep.js.map

package/react/pagination/prep.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../react/pagination/prep.ts"],
+  "sourcesContent": ["import type { Pagination as Props } from './pagination.types';\n\nconst filter = (\n  entries: Props['entries'],\n  currentIndex: number,\n  windowSize: number,\n): typeof entries => {\n  // NOTE: We can't have a window size less than 5,\n  // as it's then not possible to implement the design.\n  // The minimum UI renders [initial, ellipsis, current, ellipsis, ultimate].\n  const minimumWindowSize = Math.max(windowSize, 5);\n\n  if (entries.length <= windowSize) {\n    return entries;\n  }\n\n  const ultimateIndex = entries.length - 1;\n  const dynamicWindowSize = minimumWindowSize - 2;\n  const maxRadius = dynamicWindowSize / 2;\n  let start = Math.max(currentIndex - Math.floor(maxRadius), 1);\n  let stop = Math.min(currentIndex + Math.ceil(maxRadius), ultimateIndex);\n  const pad = Math.max(dynamicWindowSize - (stop - start), 0);\n  if (start === 1) {\n    stop = stop + pad;\n  } else if (stop === ultimateIndex) {\n    start = start - pad;\n  }\n\n  const initial = entries.at(0);\n  const ultimate = entries.at(-1);\n  if (!initial || !ultimate) {\n    return entries;\n  }\n\n  const dynamicWindow = entries.slice(start, stop);\n  dynamicWindow.unshift(initial);\n  dynamicWindow.push(ultimate);\n\n  return dynamicWindow;\n};\n\nconst overrides = { text: '...' };\n\nconst replaceText = (entries: Props['entries'], subset: Props['entries']) => {\n  const peninitial = entries.at(1);\n  const penultimate = entries.at(-2);\n  const subsetPeninitial = subset.at(1);\n  const subsetPenultimate = subset.at(-2);\n  if (!peninitial || !penultimate || !subsetPeninitial || !subsetPenultimate) {\n    return subset;\n  }\n\n  const newSubset = Array.from(subset);\n\n  if (peninitial.href !== subsetPeninitial.href) {\n    newSubset.splice(1, 1, Object.assign({}, subsetPeninitial, overrides));\n  }\n\n  if (penultimate.href !== subsetPenultimate.href) {\n    newSubset.splice(-2, 1, Object.assign({}, subsetPenultimate, overrides));\n  }\n\n  return newSubset;\n};\n\n/**\n * To do less work on the client,\n * use this on `entries` on the server\n * before passing them to `Pagination`.\n */\nexport const prep: typeof filter = (entries, currentIndex, windowSize) =>\n  replaceText(entries, filter(entries, currentIndex, windowSize));\n"],
+  "mappings": "AAEA,MAAMA,EAAS,CACbC,EACAC,EACAC,IACmB,CAInB,MAAMC,EAAoB,KAAK,IAAID,EAAY,CAAC,EAEhD,GAAIF,EAAQ,QAAUE,EACpB,OAAOF,EAGT,MAAMI,EAAgBJ,EAAQ,OAAS,EACjCK,EAAoBF,EAAoB,EACxCG,EAAYD,EAAoB,EACtC,IAAIE,EAAQ,KAAK,IAAIN,EAAe,KAAK,MAAMK,CAAS,EAAG,CAAC,EACxDE,EAAO,KAAK,IAAIP,EAAe,KAAK,KAAKK,CAAS,EAAGF,CAAa,EACtE,MAAMK,EAAM,KAAK,IAAIJ,GAAqBG,EAAOD,GAAQ,CAAC,EACtDA,IAAU,EACZC,EAAOA,EAAOC,EACLD,IAASJ,IAClBG,EAAQA,EAAQE,GAGlB,MAAMC,EAAUV,EAAQ,GAAG,CAAC,EACtBW,EAAWX,EAAQ,GAAG,EAAE,EAC9B,GAAI,CAACU,GAAW,CAACC,EACf,OAAOX,EAGT,MAAMY,EAAgBZ,EAAQ,MAAMO,EAAOC,CAAI,EAC/C,OAAAI,EAAc,QAAQF,CAAO,EAC7BE,EAAc,KAAKD,CAAQ,EAEpBC,CACT,EAEMC,EAAY,CAAE,KAAM,KAAM,EAE1BC,EAAc,CAACd,EAA2Be,IAA6B,CAC3E,MAAMC,EAAahB,EAAQ,GAAG,CAAC,EACzBiB,EAAcjB,EAAQ,GAAG,EAAE,EAC3BkB,EAAmBH,EAAO,GAAG,CAAC,EAC9BI,EAAoBJ,EAAO,GAAG,EAAE,EACtC,GAAI,CAACC,GAAc,CAACC,GAAe,CAACC,GAAoB,CAACC,EACvD,OAAOJ,EAGT,MAAMK,EAAY,MAAM,KAAKL,CAAM,EAEnC,OAAIC,EAAW,OAASE,EAAiB,MACvCE,EAAU,OAAO,EAAG,EAAG,OAAO,OAAO,CAAC,EAAGF,EAAkBL,CAAS,CAAC,EAGnEI,EAAY,OAASE,EAAkB,MACzCC,EAAU,OAAO,GAAI,EAAG,OAAO,OAAO,CAAC,EAAGD,EAAmBN,CAAS,CAAC,EAGlEO,CACT,EAOaC,EAAsB,CAACrB,EAASC,EAAcC,IACzDY,EAAYd,EAASD,EAAOC,EAASC,EAAcC,CAAU,CAAC",
+  "names": ["filter", "entries", "currentIndex", "windowSize", "minimumWindowSize", "ultimateIndex", "dynamicWindowSize", "maxRadius", "start", "stop", "pad", "initial", "ultimate", "dynamicWindow", "overrides", "replaceText", "subset", "peninitial", "penultimate", "subsetPeninitial", "subsetPenultimate", "newSubset", "prep"]
+}

package/react/search/search.d.ts

@@ -16,6 +16,7 @@ declare const RefSearch: React.ForwardRefExoticComponent<{
     name: string;
     onChangeFunc?: (arg: string) => void;
     onClear?: () => void;
+    onInputClick?: () => void;
     theme?: import("../types").ObjectValues<typeof themes>;
     variant?: import("../types").ObjectValues<typeof variants>;
 } & import("../types").InputHtmlProps & React.RefAttributes<HTMLInputElement>>;

package/react/search/search.js

@@ -1,2 +1,2 @@
-"use client";var Z=Object.defineProperty,b=Object.defineProperties;var R=Object.getOwnPropertyDescriptors;var N=Object.getOwnPropertySymbols;var H=Object.prototype.hasOwnProperty,O=Object.prototype.propertyIsEnumerable;var D=(e,a,i)=>a in e?Z(e,a,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[a]=i,p=(e,a)=>{for(var i in a||(a={}))H.call(a,i)&&D(e,i,a[i]);if(N)for(var i of N(a))O.call(a,i)&&D(e,i,a[i]);return e},f=(e,a)=>b(e,R(a));var P=(e,a)=>{var i={};for(var l in e)H.call(e,l)&&a.indexOf(l)<0&&(i[l]=e[l]);if(e!=null&&N)for(var l of N(e))a.indexOf(l)<0&&O.call(e,l)&&(i[l]=e[l]);return i};import t from"classnames";import s,{useRef as ss,useState as V}from"react";import n from"../button";import es from"../hooks/use-click-outside";import{useIsMounted as rs}from"../hooks/use-is-mounted";import as from"../icons/18/close";import is from"../icons/24/search";import _ from"../text";import ns from"../use-input-validation";import{themes as h,inputSizes as m,variants as v,expandDirections as ls}from"./search.types";const j=s.forwardRef((os,G)=>{var x=os,{button:e,customErrorMessages:a,clear:i,disabled:l,label:y,isLabelVisible:$=!0,name:q,onChangeFunc:A=()=>{},onClear:B=()=>{},expandable:c,placeholder:L,required:S,inputSize:o=m.small,theme:d=h.inline,variant:r=v.default,value:W="",helpText:g,helpIcon:z}=x,F=P(x,["button","customErrorMessages","clear","disabled","label","isLabelVisible","name","onChangeFunc","onClear","expandable","placeholder","required","inputSize","theme","variant","value","helpText","helpIcon"]);const[J,K,I]=ns(a),T=ss(null),[w,C]=V(!1),Q=rs();es(T,()=>C(!1));const[E,U]=V(W),M=u=>{A(u),U(u)},X=u=>{M(u.target.value),J(u)},k=()=>{M(""),B()},Y=()=>{k(),C(!1)};return s.createElement("div",{className:t("search",{[`search--expand-direction-${c==null?void 0:c.direction}`]:c==null?void 0:c.direction})},Q?s.createElement("div",{className:t("search__inner",{"search__inner--expandable":c,"search__inner--expand":w}),ref:T},d===h.inline&&$?s.createElement(_,{theme:_.themes.emphasis,size:o===m.large?_.sizes.large:_.sizes.small,className:t("search__header",{[`search__header--variant-${r}`]:r})},y):null,s.createElement("div",{className:t("search__input-wrapper",{[`search__input-wrapper--size-${o}`]:o,[`search__input-wrapper--theme-${d}`]:d,[`search__input-wrapper--variant-${r}`]:r})},s.createElement("label",{className:"search__label"},s.createElement("div",{className:t("search__icon",{[`search__icon--variant-${r}`]:r})},s.createElement(is,null)),s.createElement("input",f(p({},F),{className:t("search__input",{[`search__input--variant-${r}`]:r,[`search__input--size-${o}`]:o}),disabled:l,name:q,onChange:X,onClick:()=>C(!0),value:E,onInvalid:K,placeholder:L,ref:G,required:S,type:"search","aria-label":d===h.floating||!$?y:void 0}))),s.createElement("div",{className:t("search__clear-button",{"search__clear-button--visible":E})},s.createElement(n,f(p({},i),{onClick:k,size:o===m.small?n.sizes.small:n.sizes.basic,type:"button",variant:r===v.fixed?n.variants.fixedTertiary:n.variants.tertiary}))),e?s.createElement(n,f(p({},e),{className:"search__search-button",variant:r===v.fixed?n.variants.secondaryWhite:n.variants.secondary,type:"submit",size:o===m.small?n.sizes.small:n.sizes.basic})):null,c&&w?s.createElement(n,f(p({},c.close),{className:"search__close-button",onClick:Y,leadingIcon:s.createElement(as,null),size:o===m.small?n.sizes.small:n.sizes.basic,type:"button",variant:r===v.fixed?n.variants.fixedTertiary:n.variants.tertiary})):null),I?s.createElement("div",{"aria-hidden":"true",className:"search__error"},s.createElement(_,null,I)):null,d===h.inline&&g?s.createElement(_,{size:_.sizes.interface,className:t("search__help-text",{[`search__help-text--variant-${r}`]:r})},z,g):null):s.createElement("div",{className:"search__loading-inner"},d===h.inline&&$?s.createElement("div",{className:t("search__loading-extra",{[`search__loading-extra--${r}`]:r})},y):null,s.createElement("div",{className:t("search__loading-input",{[`search__loading-input--${r}`]:r,[`search__loading-input--${o}`]:o})}),d===h.inline&&g?s.createElement("div",{className:t("search__loading-extra",{[`search__loading-extra--${r}`]:r})},z,g):null))});j.displayName="Search";const ts=Object.assign(j,{themes:h,variants:v,inputSizes:m,expandDirections:ls});var $s=ts;export{$s as default};
+"use client";var b=Object.defineProperty,R=Object.defineProperties;var ss=Object.getOwnPropertyDescriptors;var N=Object.getOwnPropertySymbols;var H=Object.prototype.hasOwnProperty,O=Object.prototype.propertyIsEnumerable;var D=(e,a,i)=>a in e?b(e,a,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[a]=i,p=(e,a)=>{for(var i in a||(a={}))H.call(a,i)&&D(e,i,a[i]);if(N)for(var i of N(a))O.call(a,i)&&D(e,i,a[i]);return e},f=(e,a)=>R(e,ss(a));var P=(e,a)=>{var i={};for(var l in e)H.call(e,l)&&a.indexOf(l)<0&&(i[l]=e[l]);if(e!=null&&N)for(var l of N(e))a.indexOf(l)<0&&O.call(e,l)&&(i[l]=e[l]);return i};import t from"classnames";import s,{useRef as es,useState as V}from"react";import n from"../button";import rs from"../hooks/use-click-outside";import{useIsMounted as as}from"../hooks/use-is-mounted";import is from"../icons/18/close";import ns from"../icons/24/search";import _ from"../text";import ls from"../use-input-validation";import{themes as h,inputSizes as m,variants as v,expandDirections as ts}from"./search.types";const j=s.forwardRef((cs,J)=>{var x=cs,{button:e,customErrorMessages:a,clear:i,disabled:l,label:y,isLabelVisible:$=!0,name:q,onChangeFunc:A=()=>{},onClear:B=()=>{},onInputClick:L=()=>{},expandable:c,placeholder:S,required:W,inputSize:o=m.small,theme:d=h.inline,variant:r=v.default,value:F="",helpText:g,helpIcon:z}=x,G=P(x,["button","customErrorMessages","clear","disabled","label","isLabelVisible","name","onChangeFunc","onClear","onInputClick","expandable","placeholder","required","inputSize","theme","variant","value","helpText","helpIcon"]);const[K,Q,I]=ls(a),T=es(null),[w,C]=V(!1),U=as();rs(T,()=>C(!1));const[E,X]=V(F),M=u=>{A(u),X(u)},Y=u=>{M(u.target.value),K(u)},k=()=>{M(""),B()},Z=()=>{k(),C(!1)};return s.createElement("div",{className:t("search",{[`search--expand-direction-${c==null?void 0:c.direction}`]:c==null?void 0:c.direction})},U?s.createElement("div",{className:t("search__inner",{"search__inner--expandable":c,"search__inner--expand":w}),ref:T},d===h.inline&&$?s.createElement(_,{theme:_.themes.emphasis,size:o===m.large?_.sizes.large:_.sizes.small,className:t("search__header",{[`search__header--variant-${r}`]:r})},y):null,s.createElement("div",{className:t("search__input-wrapper",{[`search__input-wrapper--size-${o}`]:o,[`search__input-wrapper--theme-${d}`]:d,[`search__input-wrapper--variant-${r}`]:r})},s.createElement("label",{className:"search__label"},s.createElement("div",{className:t("search__icon",{[`search__icon--variant-${r}`]:r})},s.createElement(ns,null)),s.createElement("input",f(p({},G),{className:t("search__input",{[`search__input--variant-${r}`]:r,[`search__input--size-${o}`]:o}),disabled:l,name:q,onChange:Y,onClick:()=>{C(!0),L()},value:E,onInvalid:Q,placeholder:S,ref:J,required:W,type:"search","aria-label":d===h.floating||!$?y:void 0}))),s.createElement("div",{className:t("search__clear-button",{"search__clear-button--visible":E})},s.createElement(n,f(p({},i),{onClick:k,size:o===m.small?n.sizes.small:n.sizes.basic,type:"button",variant:r===v.fixed?n.variants.fixedTertiary:n.variants.tertiary}))),e?s.createElement(n,f(p({},e),{className:"search__search-button",variant:r===v.fixed?n.variants.secondaryWhite:n.variants.secondary,type:"submit",size:o===m.small?n.sizes.small:n.sizes.basic})):null,c&&w?s.createElement(n,f(p({},c.close),{className:"search__close-button",onClick:Z,leadingIcon:s.createElement(is,null),size:o===m.small?n.sizes.small:n.sizes.basic,type:"button",variant:r===v.fixed?n.variants.fixedTertiary:n.variants.tertiary})):null),I?s.createElement("div",{"aria-hidden":"true",className:"search__error"},s.createElement(_,null,I)):null,d===h.inline&&g?s.createElement(_,{size:_.sizes.interface,className:t("search__help-text",{[`search__help-text--variant-${r}`]:r})},z,g):null):s.createElement("div",{className:"search__loading-inner"},d===h.inline&&$?s.createElement("div",{className:t("search__loading-extra",{[`search__loading-extra--${r}`]:r})},y):null,s.createElement("div",{className:t("search__loading-input",{[`search__loading-input--${r}`]:r,[`search__loading-input--${o}`]:o})}),d===h.inline&&g?s.createElement("div",{className:t("search__loading-extra",{[`search__loading-extra--${r}`]:r})},z,g):null))});j.displayName="Search";const os=Object.assign(j,{themes:h,variants:v,inputSizes:m,expandDirections:ts});var Cs=os;export{Cs as default};
 //# sourceMappingURL=search.js.map

package/react/search/search.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../react/search/search.tsx"],
-  "sourcesContent": ["'use client';\n\nimport classNames from 'classnames';\nimport React, { useRef, useState } from 'react';\n\nimport Button from '../button';\nimport useClickOutside from '../hooks/use-click-outside';\nimport { useIsMounted } from '../hooks/use-is-mounted';\nimport CloseIcon from '../icons/18/close';\nimport SearchIcon from '../icons/24/search';\nimport Text from '../text';\nimport useInputValidation from '../use-input-validation';\n\nimport {\n  Search as Props,\n  themes,\n  inputSizes,\n  variants,\n  expandDirections,\n} from './search.types';\n\nconst RefSearch = React.forwardRef<HTMLInputElement, Props>(\n  (\n    {\n      button,\n      customErrorMessages,\n      clear,\n      disabled,\n      label,\n      isLabelVisible = true,\n      name,\n      onChangeFunc = () => {},\n      onClear = () => {},\n      expandable,\n      placeholder,\n      required,\n      inputSize = inputSizes.small,\n      theme = themes.inline,\n      variant = variants.default,\n      value = '',\n      helpText,\n      helpIcon,\n      ...restProps\n    },\n    ref,\n  ) => {\n    const [validationOnChange, handleInvalid, error] =\n      useInputValidation(customErrorMessages);\n    const searchArea = useRef<HTMLDivElement>(null);\n    const [expand, setExpand] = useState(false);\n    const isMounted = useIsMounted();\n\n    useClickOutside(searchArea, () => setExpand(false));\n\n    const [inputValue, setInputValue] = useState(value);\n\n    const setValue = (value: string) => {\n      onChangeFunc(value);\n      setInputValue(value);\n    };\n\n    const handleChange: React.ChangeEventHandler<HTMLInputElement> = e => {\n      setValue(e.target.value);\n      validationOnChange(e);\n    };\n\n    const handleClear = () => {\n      setValue('');\n      onClear();\n    };\n\n    const handleClose = () => {\n      handleClear();\n      setExpand(false);\n    };\n\n    return (\n      <div\n        className={classNames('search', {\n          [`search--expand-direction-${expandable?.direction}`]:\n            expandable?.direction,\n        })}\n      >\n        {isMounted ? (\n          <div\n            className={classNames('search__inner', {\n              'search__inner--expandable': expandable,\n              'search__inner--expand': expand,\n            })}\n            ref={searchArea}\n          >\n            {theme === themes.inline && isLabelVisible ? (\n              <Text\n                theme={Text.themes.emphasis}\n                size={\n                  inputSize === inputSizes.large\n                    ? Text.sizes.large\n                    : Text.sizes.small\n                }\n                className={classNames('search__header', {\n                  [`search__header--variant-${variant}`]: variant,\n                })}\n              >\n                {label}\n              </Text>\n            ) : null}\n            <div\n              className={classNames('search__input-wrapper', {\n                [`search__input-wrapper--size-${inputSize}`]: inputSize,\n                [`search__input-wrapper--theme-${theme}`]: theme,\n                [`search__input-wrapper--variant-${variant}`]: variant,\n              })}\n            >\n              <label className=\"search__label\">\n                <div\n                  className={classNames('search__icon', {\n                    [`search__icon--variant-${variant}`]: variant,\n                  })}\n                >\n                  <SearchIcon />\n                </div>\n                <input\n                  {...restProps}\n                  className={classNames('search__input', {\n                    [`search__input--variant-${variant}`]: variant,\n                    [`search__input--size-${inputSize}`]: inputSize,\n                  })}\n                  disabled={disabled}\n                  name={name}\n                  onChange={handleChange}\n                  onClick={() => setExpand(true)}\n                  value={inputValue}\n                  onInvalid={handleInvalid}\n                  placeholder={placeholder}\n                  ref={ref}\n                  required={required}\n                  type=\"search\"\n                  aria-label={\n                    theme === themes.floating || !isLabelVisible\n                      ? label\n                      : undefined\n                  }\n                />\n              </label>\n              <div\n                className={classNames('search__clear-button', {\n                  'search__clear-button--visible': inputValue,\n                })}\n              >\n                <Button\n                  {...clear}\n                  onClick={handleClear}\n                  size={\n                    inputSize === inputSizes.small\n                      ? Button.sizes.small\n                      : Button.sizes.basic\n                  }\n                  type=\"button\"\n                  variant={\n                    variant === variants.fixed\n                      ? Button.variants.fixedTertiary\n                      : Button.variants.tertiary\n                  }\n                />\n              </div>\n              {button ? (\n                <Button\n                  {...button}\n                  className=\"search__search-button\"\n                  variant={\n                    variant === variants.fixed\n                      ? Button.variants.secondaryWhite\n                      : Button.variants.secondary\n                  }\n                  type=\"submit\"\n                  size={\n                    inputSize === inputSizes.small\n                      ? Button.sizes.small\n                      : Button.sizes.basic\n                  }\n                />\n              ) : null}\n              {expandable && expand ? (\n                <Button\n                  {...expandable.close}\n                  className=\"search__close-button\"\n                  onClick={handleClose}\n                  leadingIcon={<CloseIcon />}\n                  size={\n                    inputSize === inputSizes.small\n                      ? Button.sizes.small\n                      : Button.sizes.basic\n                  }\n                  type=\"button\"\n                  variant={\n                    variant === variants.fixed\n                      ? Button.variants.fixedTertiary\n                      : Button.variants.tertiary\n                  }\n                />\n              ) : null}\n            </div>\n            {error ? (\n              <div aria-hidden=\"true\" className=\"search__error\">\n                <Text>{error}</Text>\n              </div>\n            ) : null}\n            {theme === themes.inline && helpText ? (\n              <Text\n                size={Text.sizes.interface}\n                className={classNames('search__help-text', {\n                  [`search__help-text--variant-${variant}`]: variant,\n                })}\n              >\n                {helpIcon}\n                {helpText}\n              </Text>\n            ) : null}\n          </div>\n        ) : (\n          <div className=\"search__loading-inner\">\n            {theme === themes.inline && isLabelVisible ? (\n              <div\n                className={classNames('search__loading-extra', {\n                  [`search__loading-extra--${variant}`]: variant,\n                })}\n              >\n                {label}\n              </div>\n            ) : null}\n            <div\n              className={classNames('search__loading-input', {\n                [`search__loading-input--${variant}`]: variant,\n                [`search__loading-input--${inputSize}`]: inputSize,\n              })}\n            ></div>\n            {theme === themes.inline && helpText ? (\n              <div\n                className={classNames('search__loading-extra', {\n                  [`search__loading-extra--${variant}`]: variant,\n                })}\n              >\n                {helpIcon}\n                {helpText}\n              </div>\n            ) : null}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\n// NOTE: Stack traces will show \"forwardRef\" instead of \"Search\" if this is not set.\nRefSearch.displayName = 'Search';\n\nconst Search: typeof RefSearch & {\n  themes: typeof themes;\n  variants: typeof variants;\n  inputSizes: typeof inputSizes;\n  expandDirections: typeof expandDirections;\n} = Object.assign(RefSearch, {\n  themes,\n  variants,\n  inputSizes,\n  expandDirections,\n});\n\nexport default Search;\n"],
-  "mappings": "4lBAEA,OAAOA,MAAgB,aACvB,OAAOC,GAAS,UAAAC,GAAQ,YAAAC,MAAgB,QAExC,OAAOC,MAAY,YACnB,OAAOC,OAAqB,6BAC5B,OAAS,gBAAAC,OAAoB,0BAC7B,OAAOC,OAAe,oBACtB,OAAOC,OAAgB,qBACvB,OAAOC,MAAU,UACjB,OAAOC,OAAwB,0BAE/B,OAEE,UAAAC,EACA,cAAAC,EACA,YAAAC,EACA,oBAAAC,OACK,iBAEP,MAAMC,EAAYd,EAAM,WACtB,CACEe,GAqBAC,IACG,CAtBH,IAAAC,EAAAF,GACE,QAAAG,EACA,oBAAAC,EACA,MAAAC,EACA,SAAAC,EACA,MAAAC,EACA,eAAAC,EAAiB,GACjB,KAAAC,EACA,aAAAC,EAAe,IAAM,CAAC,EACtB,QAAAC,EAAU,IAAM,CAAC,EACjB,WAAAC,EACA,YAAAC,EACA,SAAAC,EACA,UAAAC,EAAYnB,EAAW,MACvB,MAAAoB,EAAQrB,EAAO,OACf,QAAAsB,EAAUpB,EAAS,QACnB,MAAAqB,EAAQ,GACR,SAAAC,EACA,SAAAC,CAzCN,EAuBIlB,EAmBKmB,EAAAC,EAnBLpB,EAmBK,CAlBH,SACA,sBACA,QACA,WACA,QACA,iBACA,OACA,eACA,UACA,aACA,cACA,WACA,YACA,QACA,UACA,QACA,WACA,aAKF,KAAM,CAACqB,EAAoBC,EAAeC,CAAK,EAC7C/B,GAAmBU,CAAmB,EAClCsB,EAAaxC,GAAuB,IAAI,EACxC,CAACyC,EAAQC,CAAS,EAAIzC,EAAS,EAAK,EACpC0C,EAAYvC,GAAa,EAE/BD,GAAgBqC,EAAY,IAAME,EAAU,EAAK,CAAC,EAElD,KAAM,CAACE,EAAYC,CAAa,EAAI5C,EAAS+B,CAAK,EAE5Cc,EAAYd,GAAkB,CAClCR,EAAaQ,CAAK,EAClBa,EAAcb,CAAK,CACrB,EAEMe,EAA2DC,GAAK,CACpEF,EAASE,EAAE,OAAO,KAAK,EACvBX,EAAmBW,CAAC,CACtB,EAEMC,EAAc,IAAM,CACxBH,EAAS,EAAE,EACXrB,EAAQ,CACV,EAEMyB,EAAc,IAAM,CACxBD,EAAY,EACZP,EAAU,EAAK,CACjB,EAEA,OACE3C,EAAA,cAAC,OACC,UAAWD,EAAW,SAAU,CAC9B,CAAC,4BAA4B4B,GAAA,YAAAA,EAAY,SAAS,EAAE,EAClDA,GAAA,YAAAA,EAAY,SAChB,CAAC,GAEAiB,EACC5C,EAAA,cAAC,OACC,UAAWD,EAAW,gBAAiB,CACrC,4BAA6B4B,EAC7B,wBAAyBe,CAC3B,CAAC,EACD,IAAKD,GAEJV,IAAUrB,EAAO,QAAUa,EAC1BvB,EAAA,cAACQ,EAAA,CACC,MAAOA,EAAK,OAAO,SACnB,KACEsB,IAAcnB,EAAW,MACrBH,EAAK,MAAM,MACXA,EAAK,MAAM,MAEjB,UAAWT,EAAW,iBAAkB,CACtC,CAAC,2BAA2BiC,CAAO,EAAE,EAAGA,CAC1C,CAAC,GAEAV,CACH,EACE,KACJtB,EAAA,cAAC,OACC,UAAWD,EAAW,wBAAyB,CAC7C,CAAC,+BAA+B+B,CAAS,EAAE,EAAGA,EAC9C,CAAC,gCAAgCC,CAAK,EAAE,EAAGA,EAC3C,CAAC,kCAAkCC,CAAO,EAAE,EAAGA,CACjD,CAAC,GAEDhC,EAAA,cAAC,SAAM,UAAU,iBACfA,EAAA,cAAC,OACC,UAAWD,EAAW,eAAgB,CACpC,CAAC,yBAAyBiC,CAAO,EAAE,EAAGA,CACxC,CAAC,GAEDhC,EAAA,cAACO,GAAA,IAAW,CACd,EACAP,EAAA,cAAC,QAAAoD,EAAAC,EAAA,GACKjB,GADL,CAEC,UAAWrC,EAAW,gBAAiB,CACrC,CAAC,0BAA0BiC,CAAO,EAAE,EAAGA,EACvC,CAAC,uBAAuBF,CAAS,EAAE,EAAGA,CACxC,CAAC,EACD,SAAUT,EACV,KAAMG,EACN,SAAUwB,EACV,QAAS,IAAML,EAAU,EAAI,EAC7B,MAAOE,EACP,UAAWN,EACX,YAAaX,EACb,IAAKZ,EACL,SAAUa,EACV,KAAK,SACL,aACEE,IAAUrB,EAAO,UAAY,CAACa,EAC1BD,EACA,QAER,CACF,EACAtB,EAAA,cAAC,OACC,UAAWD,EAAW,uBAAwB,CAC5C,gCAAiC8C,CACnC,CAAC,GAED7C,EAAA,cAACG,EAAAiD,EAAAC,EAAA,GACKjC,GADL,CAEC,QAAS8B,EACT,KACEpB,IAAcnB,EAAW,MACrBR,EAAO,MAAM,MACbA,EAAO,MAAM,MAEnB,KAAK,SACL,QACE6B,IAAYpB,EAAS,MACjBT,EAAO,SAAS,cAChBA,EAAO,SAAS,UAExB,CACF,EACCe,EACClB,EAAA,cAACG,EAAAiD,EAAAC,EAAA,GACKnC,GADL,CAEC,UAAU,wBACV,QACEc,IAAYpB,EAAS,MACjBT,EAAO,SAAS,eAChBA,EAAO,SAAS,UAEtB,KAAK,SACL,KACE2B,IAAcnB,EAAW,MACrBR,EAAO,MAAM,MACbA,EAAO,MAAM,OAErB,EACE,KACHwB,GAAce,EACb1C,EAAA,cAACG,EAAAiD,EAAAC,EAAA,GACK1B,EAAW,OADhB,CAEC,UAAU,uBACV,QAASwB,EACT,YAAanD,EAAA,cAACM,GAAA,IAAU,EACxB,KACEwB,IAAcnB,EAAW,MACrBR,EAAO,MAAM,MACbA,EAAO,MAAM,MAEnB,KAAK,SACL,QACE6B,IAAYpB,EAAS,MACjBT,EAAO,SAAS,cAChBA,EAAO,SAAS,UAExB,EACE,IACN,EACCqC,EACCxC,EAAA,cAAC,OAAI,cAAY,OAAO,UAAU,iBAChCA,EAAA,cAACQ,EAAA,KAAMgC,CAAM,CACf,EACE,KACHT,IAAUrB,EAAO,QAAUwB,EAC1BlC,EAAA,cAACQ,EAAA,CACC,KAAMA,EAAK,MAAM,UACjB,UAAWT,EAAW,oBAAqB,CACzC,CAAC,8BAA8BiC,CAAO,EAAE,EAAGA,CAC7C,CAAC,GAEAG,EACAD,CACH,EACE,IACN,EAEAlC,EAAA,cAAC,OAAI,UAAU,yBACZ+B,IAAUrB,EAAO,QAAUa,EAC1BvB,EAAA,cAAC,OACC,UAAWD,EAAW,wBAAyB,CAC7C,CAAC,0BAA0BiC,CAAO,EAAE,EAAGA,CACzC,CAAC,GAEAV,CACH,EACE,KACJtB,EAAA,cAAC,OACC,UAAWD,EAAW,wBAAyB,CAC7C,CAAC,0BAA0BiC,CAAO,EAAE,EAAGA,EACvC,CAAC,0BAA0BF,CAAS,EAAE,EAAGA,CAC3C,CAAC,EACF,EACAC,IAAUrB,EAAO,QAAUwB,EAC1BlC,EAAA,cAAC,OACC,UAAWD,EAAW,wBAAyB,CAC7C,CAAC,0BAA0BiC,CAAO,EAAE,EAAGA,CACzC,CAAC,GAEAG,EACAD,CACH,EACE,IACN,CAEJ,CAEJ,CACF,EAGApB,EAAU,YAAc,SAExB,MAAMwC,GAKF,OAAO,OAAOxC,EAAW,CAC3B,OAAAJ,EACA,SAAAE,EACA,WAAAD,EACA,iBAAAE,EACF,CAAC,EAED,IAAO0C,GAAQD",
-  "names": ["classNames", "React", "useRef", "useState", "Button", "useClickOutside", "useIsMounted", "CloseIcon", "SearchIcon", "Text", "useInputValidation", "themes", "inputSizes", "variants", "expandDirections", "RefSearch", "_a", "ref", "_b", "button", "customErrorMessages", "clear", "disabled", "label", "isLabelVisible", "name", "onChangeFunc", "onClear", "expandable", "placeholder", "required", "inputSize", "theme", "variant", "value", "helpText", "helpIcon", "restProps", "__objRest", "validationOnChange", "handleInvalid", "error", "searchArea", "expand", "setExpand", "isMounted", "inputValue", "setInputValue", "setValue", "handleChange", "e", "handleClear", "handleClose", "__spreadProps", "__spreadValues", "Search", "search_default"]
+  "sourcesContent": ["'use client';\n\nimport classNames from 'classnames';\nimport React, { useRef, useState } from 'react';\n\nimport Button from '../button';\nimport useClickOutside from '../hooks/use-click-outside';\nimport { useIsMounted } from '../hooks/use-is-mounted';\nimport CloseIcon from '../icons/18/close';\nimport SearchIcon from '../icons/24/search';\nimport Text from '../text';\nimport useInputValidation from '../use-input-validation';\n\nimport {\n  Search as Props,\n  themes,\n  inputSizes,\n  variants,\n  expandDirections,\n} from './search.types';\n\nconst RefSearch = React.forwardRef<HTMLInputElement, Props>(\n  (\n    {\n      button,\n      customErrorMessages,\n      clear,\n      disabled,\n      label,\n      isLabelVisible = true,\n      name,\n      onChangeFunc = () => {},\n      onClear = () => {},\n      onInputClick = () => {},\n      expandable,\n      placeholder,\n      required,\n      inputSize = inputSizes.small,\n      theme = themes.inline,\n      variant = variants.default,\n      value = '',\n      helpText,\n      helpIcon,\n      ...restProps\n    },\n    ref,\n  ) => {\n    const [validationOnChange, handleInvalid, error] =\n      useInputValidation(customErrorMessages);\n    const searchArea = useRef<HTMLDivElement>(null);\n    const [expand, setExpand] = useState(false);\n    const isMounted = useIsMounted();\n\n    useClickOutside(searchArea, () => setExpand(false));\n\n    const [inputValue, setInputValue] = useState(value);\n\n    const setValue = (value: string) => {\n      onChangeFunc(value);\n      setInputValue(value);\n    };\n\n    const handleChange: React.ChangeEventHandler<HTMLInputElement> = e => {\n      setValue(e.target.value);\n      validationOnChange(e);\n    };\n\n    const handleClear = () => {\n      setValue('');\n      onClear();\n    };\n\n    const handleClose = () => {\n      handleClear();\n      setExpand(false);\n    };\n\n    return (\n      <div\n        className={classNames('search', {\n          [`search--expand-direction-${expandable?.direction}`]:\n            expandable?.direction,\n        })}\n      >\n        {isMounted ? (\n          <div\n            className={classNames('search__inner', {\n              'search__inner--expandable': expandable,\n              'search__inner--expand': expand,\n            })}\n            ref={searchArea}\n          >\n            {theme === themes.inline && isLabelVisible ? (\n              <Text\n                theme={Text.themes.emphasis}\n                size={\n                  inputSize === inputSizes.large\n                    ? Text.sizes.large\n                    : Text.sizes.small\n                }\n                className={classNames('search__header', {\n                  [`search__header--variant-${variant}`]: variant,\n                })}\n              >\n                {label}\n              </Text>\n            ) : null}\n            <div\n              className={classNames('search__input-wrapper', {\n                [`search__input-wrapper--size-${inputSize}`]: inputSize,\n                [`search__input-wrapper--theme-${theme}`]: theme,\n                [`search__input-wrapper--variant-${variant}`]: variant,\n              })}\n            >\n              <label className=\"search__label\">\n                <div\n                  className={classNames('search__icon', {\n                    [`search__icon--variant-${variant}`]: variant,\n                  })}\n                >\n                  <SearchIcon />\n                </div>\n                <input\n                  {...restProps}\n                  className={classNames('search__input', {\n                    [`search__input--variant-${variant}`]: variant,\n                    [`search__input--size-${inputSize}`]: inputSize,\n                  })}\n                  disabled={disabled}\n                  name={name}\n                  onChange={handleChange}\n                  onClick={() => {\n                    setExpand(true);\n                    onInputClick();\n                  }}\n                  value={inputValue}\n                  onInvalid={handleInvalid}\n                  placeholder={placeholder}\n                  ref={ref}\n                  required={required}\n                  type=\"search\"\n                  aria-label={\n                    theme === themes.floating || !isLabelVisible\n                      ? label\n                      : undefined\n                  }\n                />\n              </label>\n              <div\n                className={classNames('search__clear-button', {\n                  'search__clear-button--visible': inputValue,\n                })}\n              >\n                <Button\n                  {...clear}\n                  onClick={handleClear}\n                  size={\n                    inputSize === inputSizes.small\n                      ? Button.sizes.small\n                      : Button.sizes.basic\n                  }\n                  type=\"button\"\n                  variant={\n                    variant === variants.fixed\n                      ? Button.variants.fixedTertiary\n                      : Button.variants.tertiary\n                  }\n                />\n              </div>\n              {button ? (\n                <Button\n                  {...button}\n                  className=\"search__search-button\"\n                  variant={\n                    variant === variants.fixed\n                      ? Button.variants.secondaryWhite\n                      : Button.variants.secondary\n                  }\n                  type=\"submit\"\n                  size={\n                    inputSize === inputSizes.small\n                      ? Button.sizes.small\n                      : Button.sizes.basic\n                  }\n                />\n              ) : null}\n              {expandable && expand ? (\n                <Button\n                  {...expandable.close}\n                  className=\"search__close-button\"\n                  onClick={handleClose}\n                  leadingIcon={<CloseIcon />}\n                  size={\n                    inputSize === inputSizes.small\n                      ? Button.sizes.small\n                      : Button.sizes.basic\n                  }\n                  type=\"button\"\n                  variant={\n                    variant === variants.fixed\n                      ? Button.variants.fixedTertiary\n                      : Button.variants.tertiary\n                  }\n                />\n              ) : null}\n            </div>\n            {error ? (\n              <div aria-hidden=\"true\" className=\"search__error\">\n                <Text>{error}</Text>\n              </div>\n            ) : null}\n            {theme === themes.inline && helpText ? (\n              <Text\n                size={Text.sizes.interface}\n                className={classNames('search__help-text', {\n                  [`search__help-text--variant-${variant}`]: variant,\n                })}\n              >\n                {helpIcon}\n                {helpText}\n              </Text>\n            ) : null}\n          </div>\n        ) : (\n          <div className=\"search__loading-inner\">\n            {theme === themes.inline && isLabelVisible ? (\n              <div\n                className={classNames('search__loading-extra', {\n                  [`search__loading-extra--${variant}`]: variant,\n                })}\n              >\n                {label}\n              </div>\n            ) : null}\n            <div\n              className={classNames('search__loading-input', {\n                [`search__loading-input--${variant}`]: variant,\n                [`search__loading-input--${inputSize}`]: inputSize,\n              })}\n            ></div>\n            {theme === themes.inline && helpText ? (\n              <div\n                className={classNames('search__loading-extra', {\n                  [`search__loading-extra--${variant}`]: variant,\n                })}\n              >\n                {helpIcon}\n                {helpText}\n              </div>\n            ) : null}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\n// NOTE: Stack traces will show \"forwardRef\" instead of \"Search\" if this is not set.\nRefSearch.displayName = 'Search';\n\nconst Search: typeof RefSearch & {\n  themes: typeof themes;\n  variants: typeof variants;\n  inputSizes: typeof inputSizes;\n  expandDirections: typeof expandDirections;\n} = Object.assign(RefSearch, {\n  themes,\n  variants,\n  inputSizes,\n  expandDirections,\n});\n\nexport default Search;\n"],
+  "mappings": "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",
+  "names": ["classNames", "React", "useRef", "useState", "Button", "useClickOutside", "useIsMounted", "CloseIcon", "SearchIcon", "Text", "useInputValidation", "themes", "inputSizes", "variants", "expandDirections", "RefSearch", "_a", "ref", "_b", "button", "customErrorMessages", "clear", "disabled", "label", "isLabelVisible", "name", "onChangeFunc", "onClear", "onInputClick", "expandable", "placeholder", "required", "inputSize", "theme", "variant", "value", "helpText", "helpIcon", "restProps", "__objRest", "validationOnChange", "handleInvalid", "error", "searchArea", "expand", "setExpand", "isMounted", "inputValue", "setInputValue", "setValue", "handleChange", "e", "handleClear", "handleClose", "__spreadProps", "__spreadValues", "Search", "search_default"]
 }

package/react/search/search.types.d.ts

@@ -34,6 +34,7 @@ export type Search = {
     name: string;
     onChangeFunc?: (arg: string) => void;
     onClear?: () => void;
+    onInputClick?: () => void;
     theme?: ObjectValues<typeof themes>;
     variant?: ObjectValues<typeof variants>;
 } & InputHtmlProps;

package/react/search/search.types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../react/search/search.types.ts"],
-  "sourcesContent": ["import type { ReactElement } from 'react';\nimport type { Button } from '../button/button.types';\nimport type { InputHtmlProps, ObjectValues } from '../types';\nimport type { Messages } from '../use-input-validation.types';\n\nexport const themes = {\n  floating: 'floating',\n  inline: 'inline',\n} as const;\n\nexport const inputSizes = {\n  small: 'small',\n  large: 'large',\n} as const;\n\nexport const variants = {\n  default: 'default',\n  fixed: 'fixed',\n} as const;\n\nexport const expandDirections = {\n  left: 'left',\n  right: 'right',\n} as const;\n\nexport type Search = {\n  button?: Button;\n  clear: Button;\n  customErrorMessages?: Messages;\n  expandable?: {\n    close: Button;\n    direction?: ObjectValues<typeof expandDirections>;\n  };\n  helpIcon?: ReactElement;\n  helpText?: string;\n  inputSize?: ObjectValues<typeof inputSizes>; //NOTE: This is not named `size` due to InputHTMLProps having a `size` attribute that will clash\n  isLabelVisible?: boolean;\n  label: string;\n  name: string;\n  onChangeFunc?: (arg: string) => void;\n  onClear?: () => void;\n  theme?: ObjectValues<typeof themes>;\n  variant?: ObjectValues<typeof variants>;\n} & InputHtmlProps;\n"],
+  "sourcesContent": ["import type { ReactElement } from 'react';\nimport type { Button } from '../button/button.types';\nimport type { InputHtmlProps, ObjectValues } from '../types';\nimport type { Messages } from '../use-input-validation.types';\n\nexport const themes = {\n  floating: 'floating',\n  inline: 'inline',\n} as const;\n\nexport const inputSizes = {\n  small: 'small',\n  large: 'large',\n} as const;\n\nexport const variants = {\n  default: 'default',\n  fixed: 'fixed',\n} as const;\n\nexport const expandDirections = {\n  left: 'left',\n  right: 'right',\n} as const;\n\nexport type Search = {\n  button?: Button;\n  clear: Button;\n  customErrorMessages?: Messages;\n  expandable?: {\n    close: Button;\n    direction?: ObjectValues<typeof expandDirections>;\n  };\n  helpIcon?: ReactElement;\n  helpText?: string;\n  inputSize?: ObjectValues<typeof inputSizes>; //NOTE: This is not named `size` due to InputHTMLProps having a `size` attribute that will clash\n  isLabelVisible?: boolean;\n  label: string;\n  name: string;\n  onChangeFunc?: (arg: string) => void;\n  onClear?: () => void;\n  onInputClick?: () => void;\n  theme?: ObjectValues<typeof themes>;\n  variant?: ObjectValues<typeof variants>;\n} & InputHtmlProps;\n"],
   "mappings": "AAKO,MAAMA,EAAS,CACpB,SAAU,WACV,OAAQ,QACV,EAEaC,EAAa,CACxB,MAAO,QACP,MAAO,OACT,EAEaC,EAAW,CACtB,QAAS,UACT,MAAO,OACT,EAEaC,EAAmB,CAC9B,KAAM,OACN,MAAO,OACT",
   "names": ["themes", "inputSizes", "variants", "expandDirections"]
 }

package/react/select/select.js

@@ -1,2 +1,2 @@
-"use client";var A=Object.defineProperty;var r=Object.getOwnPropertySymbols;var x=Object.prototype.hasOwnProperty,w=Object.prototype.propertyIsEnumerable;var b=(e,s,t)=>s in e?A(e,s,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[s]=t,f=(e,s)=>{for(var t in s||(s={}))x.call(s,t)&&b(e,t,s[t]);if(r)for(var t of r(s))w.call(s,t)&&b(e,t,s[t]);return e};var C=(e,s)=>{var t={};for(var n in e)x.call(e,n)&&s.indexOf(n)<0&&(t[n]=e[n]);if(e!=null&&r)for(var n of r(e))s.indexOf(n)<0&&w.call(e,n)&&(t[n]=e[n]);return t};import c from"classnames";import*as l from"react";import D from"../use-input-validation";import F from"../select-option/select-option";import i from"../text";import W from"../icons/18/arrow-down";import{labelPositions as E,themes as B,variants as h}from"./select.types";const y=l.forwardRef((J,z)=>{var S=J,{children:e,className:s,id:t,isLabelVisible:n=!0,label:m,labelPosition:$=E.stacked,name:O,onChange:P=()=>{},onChangeOption:T=()=>{},options:u=[],required:_,spaceBetween:k,theme:a,variant:N=h.large,wide:p}=S,v=C(S,["children","className","id","isLabelVisible","label","labelPosition","name","onChange","onChangeOption","options","required","spaceBetween","theme","variant","wide"]);const[H,M,d]=D(),L=o=>{P(o),T(u.find(({value:j})=>j===o.target.value)),H(o)},g=_?l.createElement("span",{className:"select__asterisk"},"*"):null;return l.createElement("div",{className:c("select",s,{"select--error":d})},l.createElement("div",{className:c(`select__content select__content--position-${$}`,{"select__content--wide":p,"select__content--space-between":k,[`select__content--theme-${a}`]:a})},n?l.createElement("label",{className:"select__label",htmlFor:t},m||e?l.createElement("div",{className:c("select__label-text",{[`select__label-text--theme-${a}`]:a})},l.createElement(i,{size:N===h.small?i.sizes.small:i.sizes.basic,theme:a===I.themes.ghost?i.themes.normal:i.themes.emphasis},m),g,e):_?g:null):null,l.createElement("div",{className:c("select__native-wrapper",{"select__native-wrapper--wide":p})},l.createElement("select",f({"aria-label":n?void 0:m,className:c(`select__select select__select--variant-${N}`,{"select__select--wide":p,[`select__select--theme-${a}`]:a}),id:t,name:O,onChange:L,onInvalid:o=>{v.onInvalid&&v.onInvalid(o),M(o)},ref:z,required:_},v),u.map(o=>l.createElement(F,f({key:o.value},o)))),l.createElement("span",{className:c("select__chevron",{[`select__chevron--theme-${a}`]:a})},l.createElement(W,null))),d?l.createElement("div",{"aria-hidden":"true",className:"select__error"},d):null))});y.displayName="Select";const G=y,I=Object.assign(G,{labelPositions:E,variants:h,themes:B});var R=I;export{R as default};
+"use client";var j=Object.defineProperty;var r=Object.getOwnPropertySymbols;var b=Object.prototype.hasOwnProperty,C=Object.prototype.propertyIsEnumerable;var x=(e,s,t)=>s in e?j(e,s,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[s]=t,f=(e,s)=>{for(var t in s||(s={}))b.call(s,t)&&x(e,t,s[t]);if(r)for(var t of r(s))C.call(s,t)&&x(e,t,s[t]);return e};var E=(e,s)=>{var t={};for(var n in e)b.call(e,n)&&s.indexOf(n)<0&&(t[n]=e[n]);if(e!=null&&r)for(var n of r(e))s.indexOf(n)<0&&C.call(e,n)&&(t[n]=e[n]);return t};import c from"classnames";import*as l from"react";import A from"../use-input-validation";import D from"../select-option/select-option";import i from"../text";import F from"../icons/18/arrow-down";import{labelPositions as w,themes as W,variants as h}from"./select.types";const y=l.forwardRef((G,k)=>{var S=G,{children:e,className:s,id:t,isLabelVisible:n=!0,label:m,labelPosition:$=w.stacked,name:O,onChange:P=()=>{},onChangeOption:T=()=>{},options:u=[],required:_,theme:a,variant:N=h.large,wide:p}=S,v=E(S,["children","className","id","isLabelVisible","label","labelPosition","name","onChange","onChangeOption","options","required","theme","variant","wide"]);const[z,H,d]=A(),M=o=>{P(o),T(u.find(({value:L})=>L===o.target.value)),z(o)},g=_?l.createElement("span",{className:"select__asterisk"},"*"):null;return l.createElement("div",{className:c("select",s,{"select--error":d})},l.createElement("div",{className:c(`select__content select__content--position-${$}`,{"select__content--wide":p,[`select__content--theme-${a}`]:a})},n?l.createElement("label",{className:"select__label",htmlFor:t},m||e?l.createElement("div",{className:c("select__label-text",{[`select__label-text--theme-${a}`]:a})},l.createElement(i,{size:N===h.small?i.sizes.small:i.sizes.basic,theme:a===I.themes.ghost?i.themes.normal:i.themes.emphasis},m),g,e):_?g:null):null,l.createElement("div",{className:c("select__native-wrapper",{"select__native-wrapper--wide":p})},l.createElement("select",f({"aria-label":n?void 0:m,className:c(`select__select select__select--variant-${N}`,{"select__select--wide":p,[`select__select--theme-${a}`]:a}),id:t,name:O,onChange:M,onInvalid:o=>{v.onInvalid&&v.onInvalid(o),H(o)},ref:k,required:_},v),u.map(o=>l.createElement(D,f({key:o.value},o)))),l.createElement("span",{className:c("select__chevron",{[`select__chevron--theme-${a}`]:a})},l.createElement(F,null))),d?l.createElement("div",{"aria-hidden":"true",className:"select__error"},d):null))});y.displayName="Select";const B=y,I=Object.assign(B,{labelPositions:w,variants:h,themes:W});var q=I;export{q as default};
 //# sourceMappingURL=select.js.map

package/react/select/select.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../react/select/select.tsx"],
-  "sourcesContent": ["'use client';\n\nimport cn from 'classnames';\nimport * as React from 'react';\n\nimport useInputValidation from '../use-input-validation';\n\nimport Option from '../select-option/select-option';\nimport Text from '../text';\nimport SvgArrowDown from '../icons/18/arrow-down';\n\nimport {\n  labelPositions,\n  Select as Props,\n  themes,\n  variants,\n} from './select.types';\n\n// NOTE: `onChangeOption` works like `onChange` but returns the props for that option instead of an event object.\nconst RefSelect = React.forwardRef<\n  HTMLSelectElement,\n  React.PropsWithChildren<Props>\n>(\n  (\n    {\n      children,\n      className,\n      id,\n      isLabelVisible = true,\n      label,\n      labelPosition = labelPositions.stacked,\n      name,\n      onChange = () => {},\n      onChangeOption = () => {},\n      options = [],\n      required,\n      spaceBetween,\n      theme,\n      variant = variants.large,\n      wide,\n      ...restProps\n    },\n    ref,\n  ) => {\n    const [validationOnChange, onInvalid, error] = useInputValidation();\n\n    const onInputChange = (e: React.ChangeEvent<HTMLSelectElement>) => {\n      onChange(e);\n      onChangeOption(options.find(({ value }) => value === e.target.value));\n      validationOnChange(e);\n    };\n\n    const asterix = required ? (\n      <span className=\"select__asterisk\">*</span>\n    ) : null;\n\n    return (\n      <div className={cn('select', className, { 'select--error': error })}>\n        <div\n          className={cn(\n            `select__content select__content--position-${labelPosition}`,\n            {\n              'select__content--wide': wide,\n              'select__content--space-between': spaceBetween,\n              [`select__content--theme-${theme}`]: theme,\n            },\n          )}\n        >\n          {isLabelVisible ? (\n            <label className=\"select__label\" htmlFor={id}>\n              {label || children ? (\n                <div\n                  className={cn('select__label-text', {\n                    [`select__label-text--theme-${theme}`]: theme,\n                  })}\n                >\n                  <Text\n                    size={\n                      variant === variants.small\n                        ? Text.sizes.small\n                        : Text.sizes.basic\n                    }\n                    theme={\n                      theme === Select.themes.ghost\n                        ? Text.themes.normal\n                        : Text.themes.emphasis\n                    }\n                  >\n                    {label}\n                  </Text>\n                  {asterix}\n                  {children}\n                </div>\n              ) : required ? (\n                asterix\n              ) : null}\n            </label>\n          ) : null}\n          <div\n            className={cn('select__native-wrapper', {\n              'select__native-wrapper--wide': wide,\n            })}\n          >\n            <select\n              aria-label={isLabelVisible ? undefined : label}\n              className={cn(\n                `select__select select__select--variant-${variant}`,\n                {\n                  'select__select--wide': wide,\n                  [`select__select--theme-${theme}`]: theme,\n                },\n              )}\n              id={id}\n              name={name}\n              onChange={onInputChange}\n              onInvalid={e => {\n                // NOTE: To not break compatibility\n                if (restProps.onInvalid) restProps.onInvalid(e);\n                onInvalid(e);\n              }}\n              ref={ref}\n              required={required}\n              {...restProps}\n            >\n              {options.map(option => (\n                <Option key={option.value} {...option} />\n              ))}\n            </select>\n            <span\n              className={cn(`select__chevron`, {\n                [`select__chevron--theme-${theme}`]: theme,\n              })}\n            >\n              <SvgArrowDown />\n            </span>\n          </div>\n\n          {/* NOTE: This is aria-hidden because reporting of validation errors is handled by the browser */}\n          {error ? (\n            <div aria-hidden=\"true\" className=\"select__error\">\n              {error}\n            </div>\n          ) : null}\n        </div>\n      </div>\n    );\n  },\n);\n\n// NOTE: If this isn't set, stack traces say \"forwardRef\" instead of \"Select\"\nRefSelect.displayName = 'Select';\n\n// NOTE: Since `React.forwardRef` props aren't generic, the component is cast so that generics work as intended. See https://stackoverflow.com/a/58473012\nconst SelectComponent = RefSelect as <OptionExtra>(\n  props: Props<OptionExtra> & {\n    ref?: React.Ref<HTMLSelectElement>;\n  },\n) => React.ReactElement;\n\nconst Select: typeof SelectComponent & {\n  labelPositions: typeof labelPositions;\n  variants: typeof variants;\n  themes: typeof themes;\n} = Object.assign(SelectComponent, { labelPositions, variants, themes });\n\nexport default Select;\n"],
-  "mappings": "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",
-  "names": ["cn", "React", "useInputValidation", "Option", "Text", "SvgArrowDown", "labelPositions", "themes", "variants", "RefSelect", "_a", "ref", "_b", "children", "className", "id", "isLabelVisible", "label", "labelPosition", "name", "onChange", "onChangeOption", "options", "required", "spaceBetween", "theme", "variant", "wide", "restProps", "__objRest", "validationOnChange", "onInvalid", "error", "onInputChange", "e", "value", "asterix", "Select", "__spreadValues", "option", "SelectComponent", "select_default"]
+  "sourcesContent": ["'use client';\n\nimport cn from 'classnames';\nimport * as React from 'react';\n\nimport useInputValidation from '../use-input-validation';\n\nimport Option from '../select-option/select-option';\nimport Text from '../text';\nimport SvgArrowDown from '../icons/18/arrow-down';\n\nimport {\n  labelPositions,\n  Select as Props,\n  themes,\n  variants,\n} from './select.types';\n\n// NOTE: `onChangeOption` works like `onChange` but returns the props for that option instead of an event object.\nconst RefSelect = React.forwardRef<\n  HTMLSelectElement,\n  React.PropsWithChildren<Props>\n>(\n  (\n    {\n      children,\n      className,\n      id,\n      isLabelVisible = true,\n      label,\n      labelPosition = labelPositions.stacked,\n      name,\n      onChange = () => {},\n      onChangeOption = () => {},\n      options = [],\n      required,\n      theme,\n      variant = variants.large,\n      wide,\n      ...restProps\n    },\n    ref,\n  ) => {\n    const [validationOnChange, onInvalid, error] = useInputValidation();\n\n    const onInputChange = (e: React.ChangeEvent<HTMLSelectElement>) => {\n      onChange(e);\n      onChangeOption(options.find(({ value }) => value === e.target.value));\n      validationOnChange(e);\n    };\n\n    const asterix = required ? (\n      <span className=\"select__asterisk\">*</span>\n    ) : null;\n\n    return (\n      <div className={cn('select', className, { 'select--error': error })}>\n        <div\n          className={cn(\n            `select__content select__content--position-${labelPosition}`,\n            {\n              'select__content--wide': wide,\n              [`select__content--theme-${theme}`]: theme,\n            },\n          )}\n        >\n          {isLabelVisible ? (\n            <label className=\"select__label\" htmlFor={id}>\n              {label || children ? (\n                <div\n                  className={cn('select__label-text', {\n                    [`select__label-text--theme-${theme}`]: theme,\n                  })}\n                >\n                  <Text\n                    size={\n                      variant === variants.small\n                        ? Text.sizes.small\n                        : Text.sizes.basic\n                    }\n                    theme={\n                      theme === Select.themes.ghost\n                        ? Text.themes.normal\n                        : Text.themes.emphasis\n                    }\n                  >\n                    {label}\n                  </Text>\n                  {asterix}\n                  {children}\n                </div>\n              ) : required ? (\n                asterix\n              ) : null}\n            </label>\n          ) : null}\n          <div\n            className={cn('select__native-wrapper', {\n              'select__native-wrapper--wide': wide,\n            })}\n          >\n            <select\n              aria-label={isLabelVisible ? undefined : label}\n              className={cn(\n                `select__select select__select--variant-${variant}`,\n                {\n                  'select__select--wide': wide,\n                  [`select__select--theme-${theme}`]: theme,\n                },\n              )}\n              id={id}\n              name={name}\n              onChange={onInputChange}\n              onInvalid={e => {\n                // NOTE: To not break compatibility\n                if (restProps.onInvalid) restProps.onInvalid(e);\n                onInvalid(e);\n              }}\n              ref={ref}\n              required={required}\n              {...restProps}\n            >\n              {options.map(option => (\n                <Option key={option.value} {...option} />\n              ))}\n            </select>\n            <span\n              className={cn(`select__chevron`, {\n                [`select__chevron--theme-${theme}`]: theme,\n              })}\n            >\n              <SvgArrowDown />\n            </span>\n          </div>\n\n          {/* NOTE: This is aria-hidden because reporting of validation errors is handled by the browser */}\n          {error ? (\n            <div aria-hidden=\"true\" className=\"select__error\">\n              {error}\n            </div>\n          ) : null}\n        </div>\n      </div>\n    );\n  },\n);\n\n// NOTE: If this isn't set, stack traces say \"forwardRef\" instead of \"Select\"\nRefSelect.displayName = 'Select';\n\n// NOTE: Since `React.forwardRef` props aren't generic, the component is cast so that generics work as intended. See https://stackoverflow.com/a/58473012\nconst SelectComponent = RefSelect as <OptionExtra>(\n  props: Props<OptionExtra> & {\n    ref?: React.Ref<HTMLSelectElement>;\n  },\n) => React.ReactElement;\n\nconst Select: typeof SelectComponent & {\n  labelPositions: typeof labelPositions;\n  variants: typeof variants;\n  themes: typeof themes;\n} = Object.assign(SelectComponent, { labelPositions, variants, themes });\n\nexport default Select;\n"],
+  "mappings": "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",
+  "names": ["cn", "React", "useInputValidation", "Option", "Text", "SvgArrowDown", "labelPositions", "themes", "variants", "RefSelect", "_a", "ref", "_b", "children", "className", "id", "isLabelVisible", "label", "labelPosition", "name", "onChange", "onChangeOption", "options", "required", "theme", "variant", "wide", "restProps", "__objRest", "validationOnChange", "onInvalid", "error", "onInputChange", "e", "value", "asterix", "Select", "__spreadValues", "option", "SelectComponent", "select_default"]
 }

package/react/select/select.scss

@@ -23,17 +23,11 @@
       flex-wrap: nowrap;
     }
 
-    &--space-between {
-      justify-content: space-between;
-    }
-
     &--theme-ghost {
       align-items: center;
       display: flex;
       flex-direction: row;
       gap: spacing.$xs;
-      flex-wrap: wrap;
-      padding-left: spacing.$xs;
     }
   }
 
@@ -106,6 +100,7 @@
       padding-top: spacing.$xs;
       padding-bottom: spacing.$xs;
       padding-left: spacing.$xs;
+      background-color: var(--surface-secondary-default);
     }
 
     @media (hover: hover) {
@@ -145,7 +140,7 @@
 
   &__asterisk {
     color: var(--on-surface-featured);
-    margin-left: spacing.$xs;
+    margin-left: spacing.$xxs;
   }
 
   &__label-text {

package/react/select/select.types.d.ts

@@ -22,5 +22,4 @@ export type Select<OptionExtra = any> = {
     variant?: ObjectValues<typeof variants>;
     wide?: boolean;
     theme?: ObjectValues<typeof themes>;
-    spaceBetween?: boolean;
 } & SelectHtmlProps;

package/react/select/select.types.js

@@ -1,2 +1,2 @@
-const a={inline:"inline",stacked:"stacked"},i={small:"small",large:"large"},l={ghost:"ghost"};export{a as labelPositions,l as themes,i as variants};
+const i={inline:"inline",stacked:"stacked"},a={small:"small",large:"large"},l={ghost:"ghost"};export{i as labelPositions,l as themes,a as variants};
 //# sourceMappingURL=select.types.js.map

package/react/select/select.types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../react/select/select.types.ts"],
-  "sourcesContent": ["import { ObjectValues, SelectHtmlProps } from '../types';\n\nimport { SelectOption } from '../select-option/select-option.types';\n\nexport const labelPositions = {\n  inline: 'inline',\n  stacked: 'stacked',\n} as const;\n\nexport const variants = {\n  small: 'small',\n  large: 'large',\n} as const;\n\nexport const themes = {\n  ghost: 'ghost',\n} as const;\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type Select<OptionExtra = any> = {\n  id: string;\n  isLabelVisible?: boolean;\n  label?: string;\n  labelPosition?: ObjectValues<typeof labelPositions>;\n  name: string;\n  onChangeOption?: (option?: SelectOption<OptionExtra>) => void;\n  options?: SelectOption<OptionExtra>[];\n  variant?: ObjectValues<typeof variants>;\n  wide?: boolean;\n  theme?: ObjectValues<typeof themes>;\n  spaceBetween?: boolean;\n} & SelectHtmlProps;\n"],
+  "sourcesContent": ["import { ObjectValues, SelectHtmlProps } from '../types';\n\nimport { SelectOption } from '../select-option/select-option.types';\n\nexport const labelPositions = {\n  inline: 'inline',\n  stacked: 'stacked',\n} as const;\n\nexport const variants = {\n  small: 'small',\n  large: 'large',\n} as const;\n\nexport const themes = {\n  ghost: 'ghost',\n} as const;\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type Select<OptionExtra = any> = {\n  id: string;\n  isLabelVisible?: boolean;\n  label?: string;\n  labelPosition?: ObjectValues<typeof labelPositions>;\n  name: string;\n  onChangeOption?: (option?: SelectOption<OptionExtra>) => void;\n  options?: SelectOption<OptionExtra>[];\n  variant?: ObjectValues<typeof variants>;\n  wide?: boolean;\n  theme?: ObjectValues<typeof themes>;\n} & SelectHtmlProps;\n"],
   "mappings": "AAIO,MAAMA,EAAiB,CAC5B,OAAQ,SACR,QAAS,SACX,EAEaC,EAAW,CACtB,MAAO,QACP,MAAO,OACT,EAEaC,EAAS,CACpB,MAAO,OACT",
   "names": ["labelPositions", "variants", "themes"]
 }

package/react/style.scss

@@ -18,6 +18,7 @@
 @use "./message/message.scss";
 @use "./message-field/message-field.scss";
 @use "./modal/modal.scss";
+@use "./pagination/pagination.scss";
 @use "./progress-bar/progress-bar.scss";
 @use "./radio/radio.scss";
 @use "./scale-bar/scale-bar.scss";