@uva-glass/component-library 2.0.2 → 2.1.1

package/dist/SelectListbox.module-D-jCitTr.js

@@ -0,0 +1,25 @@
+import './assets/SelectListbox.css';const e = {
+  "select-listbox-container": "_select-listbox-container_seapf_1",
+  "select-listbox__wrapper": "_select-listbox__wrapper_seapf_5",
+  "select-listbox-trigger": "_select-listbox-trigger_seapf_15",
+  "select-listbox-trigger--default": "_select-listbox-trigger--default_seapf_30",
+  "select-listbox-trigger--small": "_select-listbox-trigger--small_seapf_34",
+  "select-listbox-trigger--medium": "_select-listbox-trigger--medium_seapf_38",
+  "select-listbox-trigger-label": "_select-listbox-trigger-label_seapf_43",
+  "select-listbox__wrapper--align-right": "_select-listbox__wrapper--align-right_seapf_52",
+  "select-listbox-trigger--bold": "_select-listbox-trigger--bold_seapf_56",
+  "select-listbox-trigger--pill": "_select-listbox-trigger--pill_seapf_60",
+  "select-listbox-trigger--pillLeft": "_select-listbox-trigger--pillLeft_seapf_65",
+  "select-listbox-trigger--pillRight": "_select-listbox-trigger--pillRight_seapf_70",
+  "select-listbox-trigger--darkBorder": "_select-listbox-trigger--darkBorder_seapf_75",
+  "select-listbox-trigger--noborder": "_select-listbox-trigger--noborder_seapf_89",
+  "select-listbox-trigger-icon": "_select-listbox-trigger-icon_seapf_101",
+  "select-listbox-trigger-icon--open": "_select-listbox-trigger-icon--open_seapf_106",
+  "select-listbox": "_select-listbox_seapf_1",
+  "select-listbox-option": "_select-listbox-option_seapf_120",
+  "select-listbox-option--active": "_select-listbox-option--active_seapf_133"
+};
+export {
+  e as s
+};
+//# sourceMappingURL=SelectListbox.module-D-jCitTr.js.map

package/dist/SelectListbox.module-D-jCitTr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectListbox.module-D-jCitTr.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}

package/dist/assets/FormInput.css

@@ -1 +1 @@
-._form-field__container_c9jem_1{align-items:center;display:flex;flex-wrap:wrap}._form-field__container--label-left_c9jem_7{align-items:flex-start;flex-direction:row;gap:1rem;line-height:2.5rem}._form-field__container--label-left_c9jem_7>label:after{line-height:3.6}._form-field__container--label-top_c9jem_18{align-items:flex-start;flex-direction:column;gap:.5rem;line-height:normal}._form-field__input-feedback-container_c9jem_25{display:flex;flex:1;flex-direction:column;line-height:1.5;position:relative;width:100%}._form-field__input-container_c9jem_34{display:flex;flex:1}._form-field__input_c9jem_25{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:1px solid;border-radius:.5rem;color:var(--color-black);flex:1;font-family:inherit;font-size:inherit;height:2.75rem;margin:0 0 .5rem;min-height:2.5rem;padding:0 1rem;text-align:inherit}._form-field__input_c9jem_25::-webkit-outer-spin-button,._form-field__input_c9jem_25::-webkit-inner-spin-button{margin:0}._form-field__input--error_c9jem_60{border-color:var(--color-red-500)}
+._form-field__container_pfk4n_1{align-items:center;display:flex;flex-wrap:wrap}._form-field__container--label-left_pfk4n_7{align-items:flex-start;flex-direction:row;gap:1rem;line-height:2.5rem}._form-field__container--label-left_pfk4n_7>label:after{line-height:3.6}._form-field__container--label-top_pfk4n_18{align-items:flex-start;flex-direction:column;gap:.5rem;line-height:normal}._form-field__input-feedback-container_pfk4n_25{display:flex;flex:1;flex-direction:column;gap:.5rem;line-height:1.5;position:relative;width:100%}._form-field__input-container_pfk4n_35{display:flex;flex:1}._form-field__input_pfk4n_25{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:1px solid;border-radius:.5rem;color:var(--color-black);flex:1;font-family:inherit;font-size:inherit;height:2.75rem;min-height:2.5rem;padding:0 1rem;text-align:inherit}._form-field__input_pfk4n_25::-webkit-outer-spin-button,._form-field__input_pfk4n_25::-webkit-inner-spin-button{margin:0}._form-field__input--error_pfk4n_60{border-color:var(--color-red-500)}

package/dist/assets/InputField.css

@@ -1 +1 @@
-._input-field-wrapper_zd1td_1{align-items:center;display:flex;position:relative}._input-field_zd1td_1{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:1px solid;border-radius:.5rem;color:var(--color-black);flex:1;font-family:inherit;font-size:inherit;height:2.75rem;margin:0;padding:0 1rem;text-align:inherit}._input-field--large_zd1td_22{height:3rem}._input-field_zd1td_1:disabled{color:var(--color-scarpa-flow)}._input-field__clear-button_zd1td_30{align-items:center;background:none;border:none;cursor:pointer;display:flex;height:100%;padding:0 1rem 0 .5rem;position:absolute;right:0}
+._input-field-wrapper_1h8mk_1{align-items:center;display:flex;position:relative}._input-field_1h8mk_1{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:1px solid;border-radius:.5rem;color:var(--color-black);flex:1;font-family:inherit;font-size:inherit;height:2.75rem;margin:0;padding:0 1rem;text-align:inherit}._input-field--large_1h8mk_22{height:3rem}._input-field--compact_1h8mk_26{max-width:6.25rem}._input-field_1h8mk_1:disabled{color:var(--color-scarpa-flow)}._input-field__clear-button_1h8mk_34{align-items:center;background:none;border:none;cursor:pointer;display:flex;height:100%;padding:0 1rem 0 .5rem;position:absolute;right:0}

package/dist/assets/SelectListbox.css

@@ -1 +1 @@
-._select-listbox-container_x5lzf_1{position:relative}._select-listbox__wrapper_x5lzf_5{border-radius:.5rem;box-shadow:0 0 .25rem #00000040;height:auto;overflow:hidden;position:fixed;width:auto;z-index:20}._select-listbox-trigger_x5lzf_15{align-items:center;background-color:var(--color-white);border:1px solid var(--color-silver);border-radius:.5rem;cursor:pointer;display:flex;font:inherit;justify-content:space-between;line-height:inherit;overflow:hidden;padding:.4rem 2rem .4rem 1rem;width:100%}._select-listbox-trigger--default_x5lzf_30{padding:.75rem 2rem .75rem 1rem}._select-listbox-trigger--small_x5lzf_34{padding:.4rem 2rem .4rem 1rem}._select-listbox-trigger-label_x5lzf_38{overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap;width:100%}._select-listbox__wrapper--align-right_x5lzf_46{right:0}._select-listbox-trigger--bold_x5lzf_50{font-weight:var(--semibold)}._select-listbox-trigger--pill_x5lzf_54{border-radius:6.25rem;padding:.5rem 1.5rem}._select-listbox-trigger--pillLeft_x5lzf_59{border-radius:6.25rem 0 0 6.25rem;padding-left:1.5rem}._select-listbox-trigger--pillRight_x5lzf_64{border-radius:0 6.25rem 6.25rem 0;padding-right:1.25rem}._select-listbox-trigger_x5lzf_15:focus-visible{background-color:var(--color-lavender);outline:1px solid var(--color-scarpa-flow)}._select-listbox-trigger_x5lzf_15:focus-visible,._select-listbox-trigger_x5lzf_15:hover{background-color:var(--color-lavender)}._select-listbox-trigger--noborder_x5lzf_79{border:none}._select-listbox-trigger--pillLeft_x5lzf_59+._select-listbox__wrapper_x5lzf_5{left:1rem}._select-listbox-trigger--pillRight_x5lzf_64+._select-listbox__wrapper--align-right_x5lzf_46{right:1rem}._select-listbox-trigger-icon_x5lzf_91{position:absolute;right:.875rem}._select-listbox-trigger-icon--open_x5lzf_96{transform:rotate(180deg)}._select-listbox_x5lzf_1{background-color:var(--color-white);list-style:none;margin:0;min-width:100%;overflow-y:auto;padding:4px;width:fit-content}._select-listbox-option_x5lzf_110{align-items:center;border-radius:.25rem;cursor:pointer;display:flex;justify-content:space-between;padding:.5rem .75rem;position:relative;-webkit-user-select:none;user-select:none}._select-listbox-option--active_x5lzf_122,._select-listbox-option_x5lzf_110:hover{background-color:var(--color-grey-100);box-shadow:0 0 0 1px var(--color-white)}._select-listbox-option_x5lzf_110[aria-selected=true]{font-weight:var(--semibold)}
+._select-listbox-container_seapf_1{position:relative}._select-listbox__wrapper_seapf_5{border-radius:.5rem;box-shadow:0 0 .25rem #00000040;height:auto;overflow:hidden;position:fixed;width:auto;z-index:20}._select-listbox-trigger_seapf_15{align-items:center;background-color:var(--color-white);border:1px solid var(--color-silver);border-radius:.5rem;cursor:pointer;display:flex;font:inherit;justify-content:space-between;line-height:inherit;overflow:hidden;padding:.4rem 2rem .4rem 1rem;width:100%}._select-listbox-trigger--default_seapf_30{padding:.75rem 2rem .75rem 1rem}._select-listbox-trigger--small_seapf_34{padding:.4rem 2rem .4rem 1rem}._select-listbox-trigger--medium_seapf_38{height:2.75rem;padding:.5rem 2rem .5rem 1rem}._select-listbox-trigger-label_seapf_43{min-height:1.5rem;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap;width:100%}._select-listbox__wrapper--align-right_seapf_52{right:0}._select-listbox-trigger--bold_seapf_56{font-weight:var(--semibold)}._select-listbox-trigger--pill_seapf_60{border-radius:6.25rem;padding:.5rem 1.5rem}._select-listbox-trigger--pillLeft_seapf_65{border-radius:6.25rem 0 0 6.25rem;padding-left:1.5rem}._select-listbox-trigger--pillRight_seapf_70{border-radius:0 6.25rem 6.25rem 0;padding-right:1.25rem}._select-listbox-trigger--darkBorder_seapf_75{border-color:var(--color-dark)}._select-listbox-trigger_seapf_15:focus-visible{background-color:var(--color-lavender);outline:1px solid var(--color-scarpa-flow)}._select-listbox-trigger_seapf_15:focus-visible,._select-listbox-trigger_seapf_15:hover{background-color:var(--color-lavender)}._select-listbox-trigger--noborder_seapf_89{border:none}._select-listbox-trigger--pillLeft_seapf_65+._select-listbox__wrapper_seapf_5{left:1rem}._select-listbox-trigger--pillRight_seapf_70+._select-listbox__wrapper--align-right_seapf_52{right:1rem}._select-listbox-trigger-icon_seapf_101{position:absolute;right:.875rem}._select-listbox-trigger-icon--open_seapf_106{transform:rotate(180deg)}._select-listbox_seapf_1{background-color:var(--color-white);list-style:none;margin:0;min-width:100%;overflow-y:auto;padding:4px;width:fit-content}._select-listbox-option_seapf_120{align-items:center;border-radius:.25rem;cursor:pointer;display:flex;justify-content:space-between;padding:.5rem .75rem;position:relative;-webkit-user-select:none;user-select:none}._select-listbox-option--active_seapf_133,._select-listbox-option_seapf_120:hover{background-color:var(--color-grey-100);box-shadow:0 0 0 1px var(--color-white)}._select-listbox-option_seapf_120[aria-selected=true]{font-weight:var(--semibold)}

package/dist/components/FormInput/FormInput.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 export interface FormInputProps {
     /** The id of the input element. */
     id: string;
@@ -15,5 +16,7 @@ export interface FormInputProps {
     onChange: (value: string) => void;
     /** Determines if the container wrapper is rendered. */
     noContainer?: boolean;
+    /** Optional custom input that will replace the default input */
+    customInput?: ReactNode;
 }
-export declare const FormInput: ({ id, label, labelPosition, type, required, notValidatedText, onChange, noContainer, }: FormInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FormInput: ({ id, label, labelPosition, type, required, notValidatedText, onChange, noContainer, customInput, }: FormInputProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/FormInput/FormInput.js

@@ -1,5 +1,5 @@
-import { jsxs as l, Fragment as b, jsx as e } from "react/jsx-runtime";
-import { c } from "../../clsx-OuTLNxxd.js";
+import { jsxs as p, Fragment as b, jsx as o } from "react/jsx-runtime";
+import { c as a } from "../../clsx-OuTLNxxd.js";
 import "react";
 import "../Buttons/Button.js";
 import "../Buttons/LinkButton.js";
@@ -9,7 +9,7 @@ import "@react-aria/dialog";
 import "@react-aria/focus";
 import "@react-aria/overlays";
 import "../OverlayCloseButton/OverlayCloseButton.js";
-import { FeedbackBox as j } from "../FeedbackBox/FeedbackBox.js";
+import { FeedbackBox as v } from "../FeedbackBox/FeedbackBox.js";
 import "../GridRow/GridRow.js";
 import "../IconButton/IconButton.js";
 import "../Input/Input.js";
@@ -25,46 +25,47 @@ import "../SelectListbox/SelectProvider.js";
 import "../Sortable/components/SortableItem.js";
 import "../../SortableProvider-BUsvniX7.js";
 import '../../assets/FormInput.css';const r = {
-  "form-field__container": "_form-field__container_c9jem_1",
-  "form-field__container--label-left": "_form-field__container--label-left_c9jem_7",
-  "form-field__container--label-top": "_form-field__container--label-top_c9jem_18",
-  "form-field__input-feedback-container": "_form-field__input-feedback-container_c9jem_25",
-  "form-field__input-container": "_form-field__input-container_c9jem_34",
-  "form-field__input": "_form-field__input_c9jem_25",
-  "form-field__input--error": "_form-field__input--error_c9jem_60"
-}, Q = ({
-  id: t,
-  label: m,
-  labelPosition: p = "top",
-  type: n = "text",
-  required: a = !1,
-  notValidatedText: i = "",
+  "form-field__container": "_form-field__container_pfk4n_1",
+  "form-field__container--label-left": "_form-field__container--label-left_pfk4n_7",
+  "form-field__container--label-top": "_form-field__container--label-top_pfk4n_18",
+  "form-field__input-feedback-container": "_form-field__input-feedback-container_pfk4n_25",
+  "form-field__input-container": "_form-field__input-container_pfk4n_35",
+  "form-field__input": "_form-field__input_pfk4n_25",
+  "form-field__input--error": "_form-field__input--error_pfk4n_60"
+}, S = ({
+  id: n,
+  label: t,
+  labelPosition: c = "top",
+  type: f = "text",
+  required: d = !1,
+  notValidatedText: e = "",
   onChange: _,
-  noContainer: d = !1
+  noContainer: s = !1,
+  customInput: m
 }) => {
-  const s = (o) => ["e", "E", "+", "-"].includes(o.key) && o.preventDefault(), u = (o) => {
-    typeof _ == "function" && _(o.target.value);
-  }, f = /* @__PURE__ */ l(b, { children: [
-    m && /* @__PURE__ */ e(h, { htmlFor: t, required: a, alignRight: !0, children: m }),
-    /* @__PURE__ */ l("div", { className: r["form-field__input-feedback-container"], children: [
-      /* @__PURE__ */ e("div", { className: r["form-field__input-container"], children: /* @__PURE__ */ e(
+  const u = (i) => ["e", "E", "+", "-"].includes(i.key) && i.preventDefault(), k = (i) => {
+    typeof _ == "function" && _(i.target.value);
+  }, l = /* @__PURE__ */ p(b, { children: [
+    t && /* @__PURE__ */ o(h, { htmlFor: n, required: d, alignRight: !0, children: t }),
+    /* @__PURE__ */ p("div", { className: r["form-field__input-feedback-container"], children: [
+      m || /* @__PURE__ */ o("div", { className: r["form-field__input-container"], children: /* @__PURE__ */ o(
         "input",
         {
-          id: t,
-          type: n,
-          ...n === "number" && { onKeyDown: s },
-          onChange: u,
-          className: c(r["form-field__input"], [
-            i !== "" && r["form-field__input--error"]
+          id: n,
+          type: f,
+          ...f === "number" && { onKeyDown: u },
+          onChange: k,
+          className: a(r["form-field__input"], [
+            e !== "" && r["form-field__input--error"]
           ])
         }
       ) }),
-      i !== "" && /* @__PURE__ */ e(j, { level: "error", feedback: i })
+      e !== "" && /* @__PURE__ */ o(v, { level: "error", feedback: e })
     ] })
   ] });
-  return d ? f : /* @__PURE__ */ e("div", { className: c(r["form-field__container"], r[`form-field__container--label-${p}`]), children: f });
+  return s ? l : /* @__PURE__ */ o("div", { className: a(r["form-field__container"], r[`form-field__container--label-${c}`]), children: l });
 };
 export {
-  Q as FormInput
+  S as FormInput
 };
 //# sourceMappingURL=FormInput.js.map

package/dist/components/FormInput/FormInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormInput.js","sources":["../../../src/components/FormInput/FormInput.tsx"],"sourcesContent":["import clsx from 'clsx';\n\nimport styles from './FormInput.module.css';\n\nimport { FeedbackBox, Label } from 'components';\n\nexport interface FormInputProps {\n  /** The id of the input element. */\n  id: string;\n  /** label text if empthy the label is not renderd */\n  label: string;\n  /** label position `top` or `left`. The default is `top`. */\n  labelPosition?: 'top' | 'left';\n  /** The type of the input element. */\n  type?: 'text' | 'password' | 'email' | 'number';\n  /** Shows red * */\n  required?: boolean;\n  /** error text to display if set */\n  notValidatedText?: string;\n  /** Returns array of selected values as number */\n  onChange: (value: string) => void;\n  /** Determines if the container wrapper is rendered. */\n  noContainer?: boolean;\n}\n\nexport const FormInput = ({\n  id,\n  label,\n  labelPosition = 'top',\n  type = 'text',\n  required = false,\n  notValidatedText = '',\n  onChange,\n  noContainer = false,\n}: FormInputProps) => {\n  const blockInvalidChar = (event: React.KeyboardEvent<HTMLInputElement>) =>\n    ['e', 'E', '+', '-'].includes(event.key) && event.preventDefault();\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    if (typeof onChange === 'function') {\n      onChange(event.target.value);\n    }\n  };\n\n  const componentContent = (\n    <>\n      {label && (\n        <Label htmlFor={id} required={required} alignRight>\n          {label}\n        </Label>\n      )}\n\n      <div className={styles['form-field__input-feedback-container']}>\n        <div className={styles['form-field__input-container']}>\n          <input\n            id={id}\n            type={type}\n            {...(type === 'number' && { onKeyDown: blockInvalidChar })}\n            onChange={handleChange}\n            className={clsx(styles['form-field__input'], [\n              notValidatedText !== '' && styles['form-field__input--error'],\n            ])}\n          />\n        </div>\n        {notValidatedText !== '' && <FeedbackBox level=\"error\" feedback={notValidatedText} />}\n      </div>\n    </>\n  );\n\n  return noContainer ? (\n    componentContent\n  ) : (\n    <div className={clsx(styles['form-field__container'], styles[`form-field__container--label-${labelPosition}`])}>\n      {componentContent}\n    </div>\n  );\n};\n"],"names":["FormInput","id","label","labelPosition","type","required","notValidatedText","onChange","noContainer","blockInvalidChar","event","handleChange","componentContent","jsxs","Fragment","Label","styles","jsx","clsx","FeedbackBox"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyBaA,IAAY,CAAC;AAAA,EACxB,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,kBAAAC,IAAmB;AAAA,EACnB,UAAAC;AAAA,EACA,aAAAC,IAAc;AAChB,MAAsB;AACpB,QAAMC,IAAmB,CAACC,MACxB,CAAC,KAAK,KAAK,KAAK,GAAG,EAAE,SAASA,EAAM,GAAG,KAAKA,EAAM,eAAe,GAE7DC,IAAe,CAACD,MAA+C;AAC/D,IAAA,OAAOH,KAAa,cACbA,EAAAG,EAAM,OAAO,KAAK;AAAA,EAE/B,GAEME,IAED,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAAZ,uBACEa,GAAM,EAAA,SAASd,GAAI,UAAAI,GAAoB,YAAU,IAC/C,UACHH,EAAA,CAAA;AAAA,IAGD,gBAAAW,EAAA,OAAA,EAAI,WAAWG,EAAO,sCAAsC,GAC3D,UAAA;AAAA,MAAA,gBAAAC,EAAC,OAAI,EAAA,WAAWD,EAAO,6BAA6B,GAClD,UAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAAhB;AAAA,UACA,MAAAG;AAAA,UACC,GAAIA,MAAS,YAAY,EAAE,WAAWK,EAAiB;AAAA,UACxD,UAAUE;AAAA,UACV,WAAWO,EAAKF,EAAO,mBAAmB,GAAG;AAAA,YAC3CV,MAAqB,MAAMU,EAAO,0BAA0B;AAAA,UAC7D,CAAA;AAAA,QAAA;AAAA,MAAA,GAEL;AAAA,MACCV,MAAqB,MAAM,gBAAAW,EAACE,KAAY,OAAM,SAAQ,UAAUb,EAAkB,CAAA;AAAA,IAAA,EACrF,CAAA;AAAA,EAAA,GACF;AAGF,SAAOE,IACLI,IAEC,gBAAAK,EAAA,OAAA,EAAI,WAAWC,EAAKF,EAAO,uBAAuB,GAAGA,EAAO,gCAAgCb,CAAa,EAAE,CAAC,GAC1G,UACHS,GAAA;AAEJ;"}
+{"version":3,"file":"FormInput.js","sources":["../../../src/components/FormInput/FormInput.tsx"],"sourcesContent":["import clsx from 'clsx';\n\nimport type { ReactNode } from 'react';\n\nimport styles from './FormInput.module.css';\n\nimport { FeedbackBox, Label } from 'components';\n\nexport interface FormInputProps {\n  /** The id of the input element. */\n  id: string;\n  /** label text if empthy the label is not renderd */\n  label: string;\n  /** label position `top` or `left`. The default is `top`. */\n  labelPosition?: 'top' | 'left';\n  /** The type of the input element. */\n  type?: 'text' | 'password' | 'email' | 'number';\n  /** Shows red * */\n  required?: boolean;\n  /** error text to display if set */\n  notValidatedText?: string;\n  /** Returns array of selected values as number */\n  onChange: (value: string) => void;\n  /** Determines if the container wrapper is rendered. */\n  noContainer?: boolean;\n  /** Optional custom input that will replace the default input */\n  customInput?: ReactNode;\n}\n\nexport const FormInput = ({\n  id,\n  label,\n  labelPosition = 'top',\n  type = 'text',\n  required = false,\n  notValidatedText = '',\n  onChange,\n  noContainer = false,\n  customInput,\n}: FormInputProps) => {\n  const blockInvalidChar = (event: React.KeyboardEvent<HTMLInputElement>) =>\n    ['e', 'E', '+', '-'].includes(event.key) && event.preventDefault();\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    if (typeof onChange === 'function') {\n      onChange(event.target.value);\n    }\n  };\n\n  const componentContent = (\n    <>\n      {label && (\n        <Label htmlFor={id} required={required} alignRight>\n          {label}\n        </Label>\n      )}\n\n      <div className={styles['form-field__input-feedback-container']}>\n        {customInput ? (\n          customInput\n        ) : (\n          <div className={styles['form-field__input-container']}>\n            <input\n              id={id}\n              type={type}\n              {...(type === 'number' && { onKeyDown: blockInvalidChar })}\n              onChange={handleChange}\n              className={clsx(styles['form-field__input'], [\n                notValidatedText !== '' && styles['form-field__input--error'],\n              ])}\n            />\n          </div>\n        )}\n        {notValidatedText !== '' && <FeedbackBox level=\"error\" feedback={notValidatedText} />}\n      </div>\n    </>\n  );\n\n  return noContainer ? (\n    componentContent\n  ) : (\n    <div className={clsx(styles['form-field__container'], styles[`form-field__container--label-${labelPosition}`])}>\n      {componentContent}\n    </div>\n  );\n};\n"],"names":["FormInput","id","label","labelPosition","type","required","notValidatedText","onChange","noContainer","customInput","blockInvalidChar","event","handleChange","componentContent","jsxs","Fragment","Label","styles","jsx","clsx","FeedbackBox"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BaA,IAAY,CAAC;AAAA,EACxB,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,kBAAAC,IAAmB;AAAA,EACnB,UAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,aAAAC;AACF,MAAsB;AACpB,QAAMC,IAAmB,CAACC,MACxB,CAAC,KAAK,KAAK,KAAK,GAAG,EAAE,SAASA,EAAM,GAAG,KAAKA,EAAM,eAAe,GAE7DC,IAAe,CAACD,MAA+C;AAC/D,IAAA,OAAOJ,KAAa,cACbA,EAAAI,EAAM,OAAO,KAAK;AAAA,EAE/B,GAEME,IAED,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAAb,uBACEc,GAAM,EAAA,SAASf,GAAI,UAAAI,GAAoB,YAAU,IAC/C,UACHH,EAAA,CAAA;AAAA,IAGD,gBAAAY,EAAA,OAAA,EAAI,WAAWG,EAAO,sCAAsC,GAC1D,UAAA;AAAA,MAAAR,KAGE,gBAAAS,EAAA,OAAA,EAAI,WAAWD,EAAO,6BAA6B,GAClD,UAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAAjB;AAAA,UACA,MAAAG;AAAA,UACC,GAAIA,MAAS,YAAY,EAAE,WAAWM,EAAiB;AAAA,UACxD,UAAUE;AAAA,UACV,WAAWO,EAAKF,EAAO,mBAAmB,GAAG;AAAA,YAC3CX,MAAqB,MAAMW,EAAO,0BAA0B;AAAA,UAC7D,CAAA;AAAA,QAAA;AAAA,MAAA,GAEL;AAAA,MAEDX,MAAqB,MAAM,gBAAAY,EAACE,KAAY,OAAM,SAAQ,UAAUd,EAAkB,CAAA;AAAA,IAAA,EACrF,CAAA;AAAA,EAAA,GACF;AAGF,SAAOE,IACLK,IAEC,gBAAAK,EAAA,OAAA,EAAI,WAAWC,EAAKF,EAAO,uBAAuB,GAAGA,EAAO,gCAAgCd,CAAa,EAAE,CAAC,GAC1G,UACHU,GAAA;AAEJ;"}

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

@@ -3,3 +3,4 @@ import { FormInputProps } from './FormInput';
 declare const _default: Meta<FormInputProps>;
 export default _default;
 export declare const FromInputExample: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, FormInputProps>;
+export declare const WithCustomInputExample: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, FormInputProps>;

package/dist/components/FormInput/FormInput.stories.js

@@ -1,28 +1,43 @@
-import { jsx as n } from "react/jsx-runtime";
-import { fn as a } from "../../index-DWzkl4aY.js";
-import { FormInput as t } from "./FormInput.js";
-const o = `
+import { jsx as t } from "react/jsx-runtime";
+import { fn as i } from "../../index-DWzkl4aY.js";
+import { FormInput as a } from "./FormInput.js";
+import { SelectListbox as o } from "../SelectListbox/SelectListbox.js";
+const m = `
 // Has all HTMLInputElement props available except "className" and "style" 
 <FormInput  />
-`, i = {
+`, f = {
   title: "Organisms/FormInput",
-  component: t,
+  component: a,
   argTypes: {},
   args: {},
   parameters: {
-    inspectComponent: t,
-    codeString: o
+    inspectComponent: a,
+    codeString: m
   }
-}, r = (e) => /* @__PURE__ */ n(t, { ...e }), s = r.bind({});
-s.args = {
+}, r = (e) => /* @__PURE__ */ t(a, { ...e }), p = r.bind({});
+p.args = {
   id: "vak",
   label: "Vaknaam (NL)",
   labelPosition: "left",
   required: !0,
-  onChange: a()
+  onChange: i()
+};
+const u = r.bind({}), l = [
+  { label: "English", value: "EN" },
+  { label: "Dutch", value: "NL" },
+  { label: "German", value: "DE" },
+  { label: "Danish", value: "DK" }
+];
+u.args = {
+  id: "language",
+  label: "Language",
+  labelPosition: "left",
+  required: !0,
+  customInput: /* @__PURE__ */ t(o, { options: l, defaultValue: "NL", size: "medium", children: l.map(({ label: e, value: n }, s) => /* @__PURE__ */ t(o.SelectOption, { option: { label: e, value: n }, index: s, children: e }, n)) })
 };
 export {
-  s as FromInputExample,
-  i as default
+  p as FromInputExample,
+  u as WithCustomInputExample,
+  f as default
 };
 //# sourceMappingURL=FormInput.stories.js.map

package/dist/components/FormInput/FormInput.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormInput.stories.js","sources":["../../../src/components/FormInput/FormInput.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { FormInputProps } from './FormInput';\n\nimport { FormInput } from './FormInput';\n\nconst codeString = `\n// Has all HTMLInputElement props available except \"className\" and \"style\" \n<FormInput  />\n`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Organisms/FormInput',\n  component: FormInput,\n  argTypes: {},\n  args: {},\n  parameters: {\n    inspectComponent: FormInput,\n    codeString: codeString,\n  },\n} as Meta<FormInputProps>;\n\nconst Template: StoryFn<FormInputProps> = (args) => {\n  return <FormInput {...args} />;\n};\n\nexport const FromInputExample = Template.bind({});\n\nFromInputExample.args = {\n  id: 'vak',\n  label: 'Vaknaam (NL)',\n  labelPosition: 'left',\n  required: true,\n  onChange: fn(),\n};\n"],"names":["codeString","FormInput_stories","FormInput","Template","args","jsx","FromInputExample","fn"],"mappings":";;;AAOA,MAAMA,IAAa;AAAA;AAAA;AAAA,GAMJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU,CAAC;AAAA,EACX,MAAM,CAAC;AAAA,EACP,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAoC,CAACC,MAClC,gBAAAC,EAACH,GAAW,EAAA,GAAGE,EAAM,CAAA,GAGjBE,IAAmBH,EAAS,KAAK,CAAE,CAAA;AAEhDG,EAAiB,OAAO;AAAA,EACtB,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,eAAe;AAAA,EACf,UAAU;AAAA,EACV,UAAUC,EAAG;AACf;"}
+{"version":3,"file":"FormInput.stories.js","sources":["../../../src/components/FormInput/FormInput.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { FormInputProps } from './FormInput';\n\nimport { FormInput } from './FormInput';\n\nimport { SelectListbox } from 'components/SelectListbox';\n\nconst codeString = `\n// Has all HTMLInputElement props available except \"className\" and \"style\" \n<FormInput  />\n`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Organisms/FormInput',\n  component: FormInput,\n  argTypes: {},\n  args: {},\n  parameters: {\n    inspectComponent: FormInput,\n    codeString: codeString,\n  },\n} as Meta<FormInputProps>;\n\nconst Template: StoryFn<FormInputProps> = (args) => {\n  return <FormInput {...args} />;\n};\n\nexport const FromInputExample = Template.bind({});\n\nFromInputExample.args = {\n  id: 'vak',\n  label: 'Vaknaam (NL)',\n  labelPosition: 'left',\n  required: true,\n  onChange: fn(),\n};\n\nexport const WithCustomInputExample = Template.bind({});\n\nconst mockOptions = [\n  { label: 'English', value: 'EN' },\n  { label: 'Dutch', value: 'NL' },\n  { label: 'German', value: 'DE' },\n  { label: 'Danish', value: 'DK' },\n];\n\nWithCustomInputExample.args = {\n  id: 'language',\n  label: 'Language',\n  labelPosition: 'left',\n  required: true,\n  customInput: (\n    <SelectListbox options={mockOptions} defaultValue=\"NL\" size=\"medium\">\n      {mockOptions.map(({ label, value }, index) => (\n        <SelectListbox.SelectOption option={{ label, value }} index={index} key={value}>\n          {label}\n        </SelectListbox.SelectOption>\n      ))}\n    </SelectListbox>\n  ),\n};\n"],"names":["codeString","FormInput_stories","FormInput","Template","args","jsx","FromInputExample","fn","WithCustomInputExample","mockOptions","SelectListbox","label","value","index"],"mappings":";;;;AASA,MAAMA,IAAa;AAAA;AAAA;AAAA,GAMJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU,CAAC;AAAA,EACX,MAAM,CAAC;AAAA,EACP,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAoC,CAACC,MAClC,gBAAAC,EAACH,GAAW,EAAA,GAAGE,EAAM,CAAA,GAGjBE,IAAmBH,EAAS,KAAK,CAAE,CAAA;AAEhDG,EAAiB,OAAO;AAAA,EACtB,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,eAAe;AAAA,EACf,UAAU;AAAA,EACV,UAAUC,EAAG;AACf;AAEO,MAAMC,IAAyBL,EAAS,KAAK,CAAE,CAAA,GAEhDM,IAAc;AAAA,EAClB,EAAE,OAAO,WAAW,OAAO,KAAK;AAAA,EAChC,EAAE,OAAO,SAAS,OAAO,KAAK;AAAA,EAC9B,EAAE,OAAO,UAAU,OAAO,KAAK;AAAA,EAC/B,EAAE,OAAO,UAAU,OAAO,KAAK;AACjC;AAEAD,EAAuB,OAAO;AAAA,EAC5B,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,eAAe;AAAA,EACf,UAAU;AAAA,EACV,aACE,gBAAAH,EAACK,GAAc,EAAA,SAASD,GAAa,cAAa,MAAK,MAAK,UACzD,UAAAA,EAAY,IAAI,CAAC,EAAE,OAAAE,GAAO,OAAAC,EAAA,GAASC,MACjC,gBAAAR,EAAAK,EAAc,cAAd,EAA2B,QAAQ,EAAE,OAAAC,GAAO,OAAAC,EAAS,GAAA,OAAAC,GACnD,UADsEF,EAAA,GAAAC,CAEzE,CACD,EACH,CAAA;AAEJ;"}

package/dist/components/InputField/InputField.d.ts

@@ -2,6 +2,8 @@ import { InputHTMLAttributes, ReactNode } from 'react';
 export interface InputFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style'> {
     /** The variant to render. Possible values: `undefined`, `large`. The default is `undefined`. */
     variant?: 'large';
+    /** The width to render. Possible values: `undefined`, `compact`. The default is `undefined`. */
+    width?: 'compact';
     /** The type of the input element. */
     type?: 'text' | 'password' | 'email';
     /** The id of the input element. */

package/dist/components/InputField/InputField.js

@@ -1,34 +1,46 @@
-import { jsxs as m, jsx as p } from "react/jsx-runtime";
-import { forwardRef as h, useState as b, useRef as g, useEffect as x } from "react";
-import { c as z } from "../../clsx-OuTLNxxd.js";
+import { jsxs as h, jsx as p } from "react/jsx-runtime";
+import { forwardRef as k, useState as b, useRef as g, useEffect as x } from "react";
+import { c as y } from "../../clsx-OuTLNxxd.js";
 import '../../assets/InputField.css';const i = {
-  "input-field-wrapper": "_input-field-wrapper_zd1td_1",
-  "input-field": "_input-field_zd1td_1",
-  "input-field--large": "_input-field--large_zd1td_22",
-  "input-field__clear-button": "_input-field__clear-button_zd1td_30"
-}, N = h(
-  ({ autoComplete: c = "off", id: r, value: e, variant: s, type: d = "text", clearTrigger: n, onClear: u, ...f }, t) => {
-    const [o, a] = b(0), l = g(null);
+  "input-field-wrapper": "_input-field-wrapper_1h8mk_1",
+  "input-field": "_input-field_1h8mk_1",
+  "input-field--large": "_input-field--large_1h8mk_22",
+  "input-field--compact": "_input-field--compact_1h8mk_26",
+  "input-field__clear-button": "_input-field__clear-button_1h8mk_34"
+}, W = k(
+  ({
+    autoComplete: u = "off",
+    id: r,
+    value: e,
+    variant: f,
+    width: o,
+    type: s = "text",
+    clearTrigger: n,
+    onClear: c,
+    ...a
+  }, t) => {
+    const [_, d] = b(0), l = g(null);
     x(() => {
-      l.current && a(l.current.offsetWidth);
+      l.current && d(l.current.offsetWidth);
     }, [e]);
-    const _ = () => {
-      u && t && "current" in t && t.current && (u(), t.current.focus());
+    const m = () => {
+      c && t && "current" in t && t.current && (c(), t.current.focus());
     };
-    return /* @__PURE__ */ m("div", { className: i["input-field-wrapper"], children: [
+    return /* @__PURE__ */ h("div", { className: i["input-field-wrapper"], children: [
       /* @__PURE__ */ p(
         "input",
         {
-          ...f,
-          autoComplete: c,
+          ...a,
+          autoComplete: u,
           ref: t,
           id: r,
-          className: z(i["input-field"], {
-            [i["input-field--large"]]: s === "large"
+          className: y(i["input-field"], {
+            [i["input-field--large"]]: f === "large",
+            [i["input-field--compact"]]: o === "compact"
           }),
-          type: d,
+          type: s,
           value: e,
-          style: { paddingRight: e && n ? o : void 0 }
+          style: { paddingRight: e && n ? _ : void 0 }
         }
       ),
       e && n && /* @__PURE__ */ p(
@@ -36,7 +48,7 @@ import '../../assets/InputField.css';const i = {
         {
           type: "button",
           className: i["input-field__clear-button"],
-          onClick: _,
+          onClick: m,
           ref: l,
           "aria-label": `clear trigger for ${r}`,
           children: n
@@ -46,6 +58,6 @@ import '../../assets/InputField.css';const i = {
   }
 );
 export {
-  N as InputField
+  W as InputField
 };
 //# sourceMappingURL=InputField.js.map

package/dist/components/InputField/InputField.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputField.js","sources":["../../../src/components/InputField/InputField.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport type { InputHTMLAttributes, ReactNode } from 'react';\n\nimport styles from './InputField.module.css';\n\nexport interface InputFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style'> {\n  /** The variant to render. Possible values: `undefined`, `large`. The default is `undefined`. */\n  variant?: 'large';\n  /** The type of the input element. */\n  type?: 'text' | 'password' | 'email';\n  /** The id of the input element. */\n  id: string;\n  /** An element that represents a clear button. */\n  clearTrigger?: ReactNode;\n  /** The callback that is invoked when the clear button is triggered. */\n  onClear?: () => void;\n}\n\n/** Represents a component that renders an input field which can have a clear button. */\nexport const InputField = forwardRef<HTMLInputElement, InputFieldProps>(\n  (\n    { autoComplete = 'off', id, value, variant, type = 'text', clearTrigger, onClear, ...restProps }: InputFieldProps,\n    forwardedRef\n  ) => {\n    const [clearButtonWidth, setClearButtonWidth] = useState<number>(0);\n    const clearButtonRef = useRef<HTMLButtonElement>(null);\n\n    useEffect(() => {\n      if (clearButtonRef.current) {\n        setClearButtonWidth(clearButtonRef.current.offsetWidth);\n      }\n    }, [value]);\n\n    const handleClearTriggerClick = () => {\n      if (onClear && forwardedRef && 'current' in forwardedRef && forwardedRef.current) {\n        onClear();\n        forwardedRef.current.focus();\n      }\n    };\n\n    return (\n      <div className={styles['input-field-wrapper']}>\n        <input\n          {...restProps}\n          autoComplete={autoComplete}\n          ref={forwardedRef}\n          id={id}\n          className={clsx(styles['input-field'], {\n            [styles['input-field--large']]: variant === 'large',\n          })}\n          type={type}\n          value={value}\n          style={{ paddingRight: value && clearTrigger ? clearButtonWidth : undefined }}\n        />\n        {value && clearTrigger && (\n          <button\n            type=\"button\"\n            className={styles['input-field__clear-button']}\n            onClick={handleClearTriggerClick}\n            ref={clearButtonRef}\n            aria-label={`clear trigger for ${id}`}\n          >\n            {clearTrigger}\n          </button>\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["InputField","forwardRef","autoComplete","id","value","variant","type","clearTrigger","onClear","restProps","forwardedRef","clearButtonWidth","setClearButtonWidth","useState","clearButtonRef","useRef","useEffect","handleClearTriggerClick","jsxs","styles","jsx","clsx"],"mappings":";;;;;;;;GAqBaA,IAAaC;AAAA,EACxB,CACE,EAAE,cAAAC,IAAe,OAAO,IAAAC,GAAI,OAAAC,GAAO,SAAAC,GAAS,MAAAC,IAAO,QAAQ,cAAAC,GAAc,SAAAC,GAAS,GAAGC,EAAA,GACrFC,MACG;AACH,UAAM,CAACC,GAAkBC,CAAmB,IAAIC,EAAiB,CAAC,GAC5DC,IAAiBC,EAA0B,IAAI;AAErD,IAAAC,EAAU,MAAM;AACd,MAAIF,EAAe,WACGF,EAAAE,EAAe,QAAQ,WAAW;AAAA,IACxD,GACC,CAACV,CAAK,CAAC;AAEV,UAAMa,IAA0B,MAAM;AACpC,MAAIT,KAAWE,KAAgB,aAAaA,KAAgBA,EAAa,YAC/DF,EAAA,GACRE,EAAa,QAAQ,MAAM;AAAA,IAE/B;AAEA,WACG,gBAAAQ,EAAA,OAAA,EAAI,WAAWC,EAAO,qBAAqB,GAC1C,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAGX;AAAA,UACJ,cAAAP;AAAA,UACA,KAAKQ;AAAA,UACL,IAAAP;AAAA,UACA,WAAWkB,EAAKF,EAAO,aAAa,GAAG;AAAA,YACrC,CAACA,EAAO,oBAAoB,CAAC,GAAGd,MAAY;AAAA,UAAA,CAC7C;AAAA,UACD,MAAAC;AAAA,UACA,OAAAF;AAAA,UACA,OAAO,EAAE,cAAcA,KAASG,IAAeI,IAAmB,OAAU;AAAA,QAAA;AAAA,MAC9E;AAAA,MACCP,KAASG,KACR,gBAAAa;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAWD,EAAO,2BAA2B;AAAA,UAC7C,SAASF;AAAA,UACT,KAAKH;AAAA,UACL,cAAY,qBAAqBX,CAAE;AAAA,UAElC,UAAAI;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,GAEJ;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"InputField.js","sources":["../../../src/components/InputField/InputField.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport type { InputHTMLAttributes, ReactNode } from 'react';\n\nimport styles from './InputField.module.css';\n\nexport interface InputFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style'> {\n  /** The variant to render. Possible values: `undefined`, `large`. The default is `undefined`. */\n  variant?: 'large';\n  /** The width to render. Possible values: `undefined`, `compact`. The default is `undefined`. */\n  width?: 'compact';\n  /** The type of the input element. */\n  type?: 'text' | 'password' | 'email';\n  /** The id of the input element. */\n  id: string;\n  /** An element that represents a clear button. */\n  clearTrigger?: ReactNode;\n  /** The callback that is invoked when the clear button is triggered. */\n  onClear?: () => void;\n}\n\n/** Represents a component that renders an input field which can have a clear button. */\nexport const InputField = forwardRef<HTMLInputElement, InputFieldProps>(\n  (\n    {\n      autoComplete = 'off',\n      id,\n      value,\n      variant,\n      width,\n      type = 'text',\n      clearTrigger,\n      onClear,\n      ...restProps\n    }: InputFieldProps,\n    forwardedRef\n  ) => {\n    const [clearButtonWidth, setClearButtonWidth] = useState<number>(0);\n    const clearButtonRef = useRef<HTMLButtonElement>(null);\n\n    useEffect(() => {\n      if (clearButtonRef.current) {\n        setClearButtonWidth(clearButtonRef.current.offsetWidth);\n      }\n    }, [value]);\n\n    const handleClearTriggerClick = () => {\n      if (onClear && forwardedRef && 'current' in forwardedRef && forwardedRef.current) {\n        onClear();\n        forwardedRef.current.focus();\n      }\n    };\n\n    return (\n      <div className={styles['input-field-wrapper']}>\n        <input\n          {...restProps}\n          autoComplete={autoComplete}\n          ref={forwardedRef}\n          id={id}\n          className={clsx(styles['input-field'], {\n            [styles['input-field--large']]: variant === 'large',\n            [styles['input-field--compact']]: width === 'compact',\n          })}\n          type={type}\n          value={value}\n          style={{ paddingRight: value && clearTrigger ? clearButtonWidth : undefined }}\n        />\n        {value && clearTrigger && (\n          <button\n            type=\"button\"\n            className={styles['input-field__clear-button']}\n            onClick={handleClearTriggerClick}\n            ref={clearButtonRef}\n            aria-label={`clear trigger for ${id}`}\n          >\n            {clearTrigger}\n          </button>\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["InputField","forwardRef","autoComplete","id","value","variant","width","type","clearTrigger","onClear","restProps","forwardedRef","clearButtonWidth","setClearButtonWidth","useState","clearButtonRef","useRef","useEffect","handleClearTriggerClick","jsxs","styles","jsx","clsx"],"mappings":";;;;;;;;;GAuBaA,IAAaC;AAAA,EACxB,CACE;AAAA,IACE,cAAAC,IAAe;AAAA,IACf,IAAAC;AAAA,IACA,OAAAC;AAAA,IACA,SAAAC;AAAA,IACA,OAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,cAAAC;AAAA,IACA,SAAAC;AAAA,IACA,GAAGC;AAAA,KAELC,MACG;AACH,UAAM,CAACC,GAAkBC,CAAmB,IAAIC,EAAiB,CAAC,GAC5DC,IAAiBC,EAA0B,IAAI;AAErD,IAAAC,EAAU,MAAM;AACd,MAAIF,EAAe,WACGF,EAAAE,EAAe,QAAQ,WAAW;AAAA,IACxD,GACC,CAACX,CAAK,CAAC;AAEV,UAAMc,IAA0B,MAAM;AACpC,MAAIT,KAAWE,KAAgB,aAAaA,KAAgBA,EAAa,YAC/DF,EAAA,GACRE,EAAa,QAAQ,MAAM;AAAA,IAE/B;AAEA,WACG,gBAAAQ,EAAA,OAAA,EAAI,WAAWC,EAAO,qBAAqB,GAC1C,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAGX;AAAA,UACJ,cAAAR;AAAA,UACA,KAAKS;AAAA,UACL,IAAAR;AAAA,UACA,WAAWmB,EAAKF,EAAO,aAAa,GAAG;AAAA,YACrC,CAACA,EAAO,oBAAoB,CAAC,GAAGf,MAAY;AAAA,YAC5C,CAACe,EAAO,sBAAsB,CAAC,GAAGd,MAAU;AAAA,UAAA,CAC7C;AAAA,UACD,MAAAC;AAAA,UACA,OAAAH;AAAA,UACA,OAAO,EAAE,cAAcA,KAASI,IAAeI,IAAmB,OAAU;AAAA,QAAA;AAAA,MAC9E;AAAA,MACCR,KAASI,KACR,gBAAAa;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAWD,EAAO,2BAA2B;AAAA,UAC7C,SAASF;AAAA,UACT,KAAKH;AAAA,UACL,cAAY,qBAAqBZ,CAAE;AAAA,UAElC,UAAAK;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,GAEJ;AAAA,EAAA;AAGN;"}

package/dist/components/SelectListbox/SelectListBox.stories.js

@@ -92,7 +92,7 @@ const d = ({
       default: !1
     },
     variant: {
-      options: ["default", "noborder", "pill", "pillLeft", "pillRight"],
+      options: ["default", "noborder", "pill", "pillLeft", "pillRight", "darkBorder"],
       control: { type: "select" }
     },
     optionPositionRight: {
@@ -144,7 +144,7 @@ const d = ({
   mobileBreakpoint: "28rem",
   size: "default",
   onChange: i()
-}, W = (l) => /* @__PURE__ */ a("div", { style: { width: "10rem", margin: "0rem auto 0 auto" }, children: /* @__PURE__ */ a(r, { ...l, children: n.map(({ label: t, value: c }, h) => /* @__PURE__ */ a(r.SelectOption, { option: { label: t, value: c }, index: h, children: t }, `${c}`)) }) }), z = W.bind({});
+}, W = (l) => /* @__PURE__ */ a("div", { style: { width: "30rem", margin: "0rem auto 0 auto" }, children: /* @__PURE__ */ a(r, { ...l, children: n.map(({ label: t, value: c }, h) => /* @__PURE__ */ a(r.SelectOption, { option: { label: t, value: c }, index: h, children: t }, `${c}`)) }) }), z = W.bind({});
 z.args = {
   ...o
 };