@usefragments/ui 1.7.0 → 2.0.0

package/dist/components/Input/Input.module.scss.js

@@ -1,20 +1,18 @@
-const wrapper = "_wrapper_2s7a9_1";
-const label = "_label_2s7a9_8";
-const required = "_required_2s7a9_17";
-const helper = "_helper_2s7a9_22";
-const helperError = "_helperError_2s7a9_32";
-const errorMessage = "_errorMessage_2s7a9_33";
-const input = "_input_2s7a9_43";
-const sm = "_sm_2s7a9_74";
-const md = "_md_2s7a9_85";
-const lg = "_lg_2s7a9_96";
-const error = "_error_2s7a9_33";
-const success = "_success_2s7a9_118";
-const helperSuccess = "_helperSuccess_2s7a9_132";
-const inputContainer = "_inputContainer_2s7a9_136";
-const hasAdornment = "_hasAdornment_2s7a9_143";
-const shortcut = "_shortcut_2s7a9_144";
-const adornment = "_adornment_2s7a9_238";
+const wrapper = "_wrapper_ydgym_1";
+const label = "_label_ydgym_8";
+const required = "_required_ydgym_17";
+const helper = "_helper_ydgym_22";
+const helperError = "_helperError_ydgym_32";
+const errorMessage = "_errorMessage_ydgym_33";
+const input = "_input_ydgym_43";
+const sm = "_sm_ydgym_81";
+const md = "_md_ydgym_92";
+const lg = "_lg_ydgym_104";
+const error = "_error_ydgym_33";
+const inputContainer = "_inputContainer_ydgym_131";
+const hasAdornment = "_hasAdornment_ydgym_138";
+const shortcut = "_shortcut_ydgym_139";
+const adornment = "_adornment_ydgym_226";
 const styles = {
   wrapper,
   label,
@@ -27,8 +25,6 @@ const styles = {
   md,
   lg,
   error,
-  success,
-  helperSuccess,
   inputContainer,
   hasAdornment,
   shortcut,
@@ -42,7 +38,6 @@ export {
   hasAdornment,
   helper,
   helperError,
-  helperSuccess,
   input,
   inputContainer,
   label,
@@ -51,6 +46,5 @@ export {
   required,
   shortcut,
   sm,
-  success,
   wrapper
 };

package/dist/components/Input/index.cjs

@@ -51,7 +51,6 @@ const InputRoot = React__namespace.forwardRef(function Input2({
   size: sizeProp,
   disabled = false,
   error = false,
-  success = false,
   required = false,
   label,
   helperText,
@@ -113,18 +112,8 @@ const InputRoot = React__namespace.forwardRef(function Input2({
     return () => document.removeEventListener("keydown", handler);
   }, [shortcut, shortcutBehavior]);
   const hasAdornment = !!(startAdornment || endAdornment);
-  const inputClasses = [
-    Input_module.default.input,
-    Input_module.default[size],
-    error && Input_module.default.error,
-    success && Input_module.default.success,
-    inputClassName
-  ].filter(Boolean).join(" ");
-  const helperClasses = [
-    Input_module.default.helper,
-    error && Input_module.default.helperError,
-    success && Input_module.default.helperSuccess
-  ].filter(Boolean).join(" ");
+  const inputClasses = [Input_module.default.input, Input_module.default[size], error && Input_module.default.error, inputClassName].filter(Boolean).join(" ");
+  const helperClasses = [Input_module.default.helper, error && Input_module.default.helperError].filter(Boolean).join(" ");
   const wrapperClasses = [Input_module.default.wrapper, className].filter(Boolean).join(" ");
   const labelClasses = Input_module.default.label;
   const sharedInputProps = {
@@ -189,7 +178,6 @@ const InputRoot = React__namespace.forwardRef(function Input2({
       ...rootProps,
       disabled,
       invalid: error,
-      "data-success": success || void 0,
       className: [wrapperClasses, rootProps == null ? void 0 : rootProps.className].filter(Boolean).join(" "),
       style: { ...(rootProps == null ? void 0 : rootProps.style) ?? {}, ...style ?? {} },
       children: [

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

@@ -20,8 +20,6 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     disabled?: boolean;
     /** Show error styling */
     error?: boolean;
-    /** Show success styling */
-    success?: boolean;
     /** Visible label text */
     label?: string;
     /** Whether the field is required */

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Input/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B;;;GAGG;AACH,MAAM,WAAW,UAAW,SAAQ,IAAI,CACtC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,MAAM,GAAG,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,WAAW,GAAG,WAAW,GAAG,OAAO,CACjF;IACC,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wCAAwC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,CAAC;IAChE;;8DAE0D;IAC1D,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yBAAyB;IACzB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wCAAwC;IACxC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oEAAoE;IACpE,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,mEAAmE;IACnE,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,sEAAsE;IACtE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;iCAC6B;IAC7B,gBAAgB,CAAC,EAAE,cAAc,GAAG,aAAa,CAAC;IAClD,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,gDAAgD;IAChD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IACnD,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IACpD,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC/D,2CAA2C;IAC3C,SAAS,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;IACjD,mDAAmD;IACnD,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACjC,kDAAkD;IAClD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;uBACmB;IACnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,yBAAyB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAoOD,eAAO,MAAM,KAAK;;CAEhB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Input/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B;;;GAGG;AACH,MAAM,WAAW,UAAW,SAAQ,IAAI,CACtC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,MAAM,GAAG,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,WAAW,GAAG,WAAW,GAAG,OAAO,CACjF;IACC,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wCAAwC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,CAAC;IAChE;;8DAE0D;IAC1D,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yBAAyB;IACzB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wCAAwC;IACxC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oEAAoE;IACpE,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,mEAAmE;IACnE,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,sEAAsE;IACtE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;iCAC6B;IAC7B,gBAAgB,CAAC,EAAE,cAAc,GAAG,aAAa,CAAC;IAClD,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,gDAAgD;IAChD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IACnD,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IACpD,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC/D,2CAA2C;IAC3C,SAAS,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;IACjD,mDAAmD;IACnD,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACjC,kDAAkD;IAClD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;uBACmB;IACnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,yBAAyB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAsND,eAAO,MAAM,KAAK;;CAEhB,CAAC"}

package/dist/components/Input/index.js

@@ -32,7 +32,6 @@ const InputRoot = React.forwardRef(function Input2({
   size: sizeProp,
   disabled = false,
   error = false,
-  success = false,
   required = false,
   label,
   helperText,
@@ -94,18 +93,8 @@ const InputRoot = React.forwardRef(function Input2({
     return () => document.removeEventListener("keydown", handler);
   }, [shortcut, shortcutBehavior]);
   const hasAdornment = !!(startAdornment || endAdornment);
-  const inputClasses = [
-    styles.input,
-    styles[size],
-    error && styles.error,
-    success && styles.success,
-    inputClassName
-  ].filter(Boolean).join(" ");
-  const helperClasses = [
-    styles.helper,
-    error && styles.helperError,
-    success && styles.helperSuccess
-  ].filter(Boolean).join(" ");
+  const inputClasses = [styles.input, styles[size], error && styles.error, inputClassName].filter(Boolean).join(" ");
+  const helperClasses = [styles.helper, error && styles.helperError].filter(Boolean).join(" ");
   const wrapperClasses = [styles.wrapper, className].filter(Boolean).join(" ");
   const labelClasses = styles.label;
   const sharedInputProps = {
@@ -170,7 +159,6 @@ const InputRoot = React.forwardRef(function Input2({
       ...rootProps,
       disabled,
       invalid: error,
-      "data-success": success || void 0,
       className: [wrapperClasses, rootProps == null ? void 0 : rootProps.className].filter(Boolean).join(" "),
       style: { ...(rootProps == null ? void 0 : rootProps.style) ?? {}, ...style ?? {} },
       children: [

package/dist/components/Link/Link.module.scss.cjs

@@ -1,30 +1,38 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const link = "_link_vu9e1_1";
-const subtle = "_subtle_vu9e1_43";
-const muted = "_muted_vu9e1_50";
-const underlineAlways = "_underline-always_vu9e1_57";
-const underlineHover = "_underline-hover_vu9e1_63";
-const underlineDotted = "_underline-dotted_vu9e1_76";
-const underlineNone = "_underline-none_vu9e1_86";
+const link = "_link_pkl8n_1";
+const toneAccent = "_toneAccent_pkl8n_37";
+const toneNeutral = "_toneNeutral_pkl8n_41";
+const colorPrimary = "_colorPrimary_pkl8n_48";
+const colorSecondary = "_colorSecondary_pkl8n_55";
+const colorTertiary = "_colorTertiary_pkl8n_62";
+const underlineAlways = "_underline-always_pkl8n_69";
+const underlineHover = "_underline-hover_pkl8n_75";
+const underlineDotted = "_underline-dotted_pkl8n_88";
+const underlineNone = "_underline-none_pkl8n_98";
 const styles = {
   link,
-  "default": "_default_vu9e1_36",
-  subtle,
-  muted,
-  "underline-always": "_underline-always_vu9e1_57",
+  toneAccent,
+  toneNeutral,
+  colorPrimary,
+  colorSecondary,
+  colorTertiary,
+  "underline-always": "_underline-always_pkl8n_69",
   underlineAlways,
-  "underline-hover": "_underline-hover_vu9e1_63",
+  "underline-hover": "_underline-hover_pkl8n_75",
   underlineHover,
-  "underline-dotted": "_underline-dotted_vu9e1_76",
+  "underline-dotted": "_underline-dotted_pkl8n_88",
   underlineDotted,
-  "underline-none": "_underline-none_vu9e1_86",
+  "underline-none": "_underline-none_pkl8n_98",
   underlineNone
 };
+exports.colorPrimary = colorPrimary;
+exports.colorSecondary = colorSecondary;
+exports.colorTertiary = colorTertiary;
 exports.default = styles;
 exports.link = link;
-exports.muted = muted;
-exports.subtle = subtle;
+exports.toneAccent = toneAccent;
+exports.toneNeutral = toneNeutral;
 exports.underlineAlways = underlineAlways;
 exports.underlineDotted = underlineDotted;
 exports.underlineHover = underlineHover;

package/dist/components/Link/Link.module.scss.js

@@ -1,29 +1,37 @@
-const link = "_link_vu9e1_1";
-const subtle = "_subtle_vu9e1_43";
-const muted = "_muted_vu9e1_50";
-const underlineAlways = "_underline-always_vu9e1_57";
-const underlineHover = "_underline-hover_vu9e1_63";
-const underlineDotted = "_underline-dotted_vu9e1_76";
-const underlineNone = "_underline-none_vu9e1_86";
+const link = "_link_pkl8n_1";
+const toneAccent = "_toneAccent_pkl8n_37";
+const toneNeutral = "_toneNeutral_pkl8n_41";
+const colorPrimary = "_colorPrimary_pkl8n_48";
+const colorSecondary = "_colorSecondary_pkl8n_55";
+const colorTertiary = "_colorTertiary_pkl8n_62";
+const underlineAlways = "_underline-always_pkl8n_69";
+const underlineHover = "_underline-hover_pkl8n_75";
+const underlineDotted = "_underline-dotted_pkl8n_88";
+const underlineNone = "_underline-none_pkl8n_98";
 const styles = {
   link,
-  "default": "_default_vu9e1_36",
-  subtle,
-  muted,
-  "underline-always": "_underline-always_vu9e1_57",
+  toneAccent,
+  toneNeutral,
+  colorPrimary,
+  colorSecondary,
+  colorTertiary,
+  "underline-always": "_underline-always_pkl8n_69",
   underlineAlways,
-  "underline-hover": "_underline-hover_vu9e1_63",
+  "underline-hover": "_underline-hover_pkl8n_75",
   underlineHover,
-  "underline-dotted": "_underline-dotted_vu9e1_76",
+  "underline-dotted": "_underline-dotted_pkl8n_88",
   underlineDotted,
-  "underline-none": "_underline-none_vu9e1_86",
+  "underline-none": "_underline-none_pkl8n_98",
   underlineNone
 };
 export {
+  colorPrimary,
+  colorSecondary,
+  colorTertiary,
   styles as default,
   link,
-  muted,
-  subtle,
+  toneAccent,
+  toneNeutral,
   underlineAlways,
   underlineDotted,
   underlineHover,

package/dist/components/Link/index.cjs

@@ -28,10 +28,20 @@ function composeEventHandlers(childHandler, parentHandler) {
     parentHandler(...args);
   });
 }
+const TONE_CLASS = {
+  accent: Link_module.default.toneAccent,
+  neutral: Link_module.default.toneNeutral
+};
+const COLOR_CLASS = {
+  primary: Link_module.default.colorPrimary,
+  secondary: Link_module.default.colorSecondary,
+  tertiary: Link_module.default.colorTertiary
+};
 const LinkRoot = React__namespace.forwardRef(
   function Link2({
     children,
-    variant = "default",
+    tone = "accent",
+    color,
     underline = "hover",
     external = false,
     asChild = false,
@@ -43,7 +53,8 @@ const LinkRoot = React__namespace.forwardRef(
   }, ref) {
     const classes = [
       Link_module.default.link,
-      Link_module.default[variant],
+      TONE_CLASS[tone],
+      color && COLOR_CLASS[color],
       Link_module.default[`underline-${underline}`],
       className
     ].filter(Boolean).join(" ");

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

@@ -1,8 +1,15 @@
 import * as React from 'react';
-export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+export type LinkTone = 'accent' | 'neutral';
+export type LinkColor = 'primary' | 'secondary' | 'tertiary';
+export interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'color'> {
     children: React.ReactNode;
-    /** Visual variant */
-    variant?: 'default' | 'subtle' | 'muted';
+    /** Colour. `accent` (default) is the link ink; `neutral` reads as body text
+     * until hovered, for secondary and contextual links.
+     * @default 'accent' */
+    tone?: LinkTone;
+    /** Text-hierarchy colour for a `neutral` link (Text's `color` axis).
+     * `tertiary` is the quietest link, for metadata and footers. */
+    color?: LinkColor;
     /** Underline style */
     underline?: 'always' | 'hover' | 'none' | 'dotted';
     /** Open in new tab (adds rel="noopener noreferrer") */

package/dist/components/Link/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Link/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAC9E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,qBAAqB;IACrB,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;IACzC,sBAAsB;IACtB,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;IACnD,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAmED,eAAO,MAAM,IAAI;;CAEf,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Link/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,MAAM,MAAM,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;AAC5C,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;AAE7D,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC7F,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;2BAEuB;IACvB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;oEACgE;IAChE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,sBAAsB;IACtB,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;IACnD,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAgFD,eAAO,MAAM,IAAI;;CAEf,CAAC"}

package/dist/components/Link/index.js

@@ -9,10 +9,20 @@ function composeEventHandlers(childHandler, parentHandler) {
     parentHandler(...args);
   });
 }
+const TONE_CLASS = {
+  accent: styles.toneAccent,
+  neutral: styles.toneNeutral
+};
+const COLOR_CLASS = {
+  primary: styles.colorPrimary,
+  secondary: styles.colorSecondary,
+  tertiary: styles.colorTertiary
+};
 const LinkRoot = React.forwardRef(
   function Link2({
     children,
-    variant = "default",
+    tone = "accent",
+    color,
     underline = "hover",
     external = false,
     asChild = false,
@@ -24,7 +34,8 @@ const LinkRoot = React.forwardRef(
   }, ref) {
     const classes = [
       styles.link,
-      styles[variant],
+      TONE_CLASS[tone],
+      color && COLOR_CLASS[color],
       styles[`underline-${underline}`],
       className
     ].filter(Boolean).join(" ");

package/dist/components/List/List.module.scss.cjs

@@ -1,35 +1,38 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const list = "_list_1tx1c_2";
-const none = "_none_1tx1c_7";
-const disc = "_disc_1tx1c_19";
-const decimal = "_decimal_1tx1c_57";
-const icon = "_icon_1tx1c_102";
-const gapNone = "_gap-none_1tx1c_137";
-const gapXs = "_gap-xs_1tx1c_141";
-const gapSm = "_gap-sm_1tx1c_145";
-const gapMd = "_gap-md_1tx1c_149";
-const gapLg = "_gap-lg_1tx1c_153";
-const item = "_item_1tx1c_157";
-const iconItem = "_iconItem_1tx1c_161";
-const iconWrapper = "_iconWrapper_1tx1c_165";
-const itemContent = "_itemContent_1tx1c_172";
+const list = "_list_1srbf_2";
+const none = "_none_1srbf_7";
+const disc = "_disc_1srbf_21";
+const decimal = "_decimal_1srbf_61";
+const icon = "_icon_1srbf_108";
+const gapNone = "_gap-none_1srbf_145";
+const gapXs = "_gap-xs_1srbf_149";
+const gapSm = "_gap-sm_1srbf_153";
+const gapMd = "_gap-md_1srbf_157";
+const gapLg = "_gap-lg_1srbf_161";
+const gapXl = "_gap-xl_1srbf_165";
+const item = "_item_1srbf_169";
+const iconItem = "_iconItem_1srbf_173";
+const iconWrapper = "_iconWrapper_1srbf_177";
+const itemContent = "_itemContent_1srbf_184";
 const styles = {
   list,
   none,
   disc,
   decimal,
   icon,
-  "gap-none": "_gap-none_1tx1c_137",
+  "gap-none": "_gap-none_1srbf_145",
   gapNone,
-  "gap-xs": "_gap-xs_1tx1c_141",
+  "gap-xs": "_gap-xs_1srbf_149",
   gapXs,
-  "gap-sm": "_gap-sm_1tx1c_145",
+  "gap-sm": "_gap-sm_1srbf_153",
   gapSm,
-  "gap-md": "_gap-md_1tx1c_149",
+  "gap-md": "_gap-md_1srbf_157",
   gapMd,
-  "gap-lg": "_gap-lg_1tx1c_153",
+  "gap-lg": "_gap-lg_1srbf_161",
   gapLg,
+  "gap-xl": "_gap-xl_1srbf_165",
+  gapXl,
   item,
   iconItem,
   iconWrapper,
@@ -42,6 +45,7 @@ exports.gapLg = gapLg;
 exports.gapMd = gapMd;
 exports.gapNone = gapNone;
 exports.gapSm = gapSm;
+exports.gapXl = gapXl;
 exports.gapXs = gapXs;
 exports.icon = icon;
 exports.iconItem = iconItem;

package/dist/components/List/List.module.scss.js

@@ -1,33 +1,36 @@
-const list = "_list_1tx1c_2";
-const none = "_none_1tx1c_7";
-const disc = "_disc_1tx1c_19";
-const decimal = "_decimal_1tx1c_57";
-const icon = "_icon_1tx1c_102";
-const gapNone = "_gap-none_1tx1c_137";
-const gapXs = "_gap-xs_1tx1c_141";
-const gapSm = "_gap-sm_1tx1c_145";
-const gapMd = "_gap-md_1tx1c_149";
-const gapLg = "_gap-lg_1tx1c_153";
-const item = "_item_1tx1c_157";
-const iconItem = "_iconItem_1tx1c_161";
-const iconWrapper = "_iconWrapper_1tx1c_165";
-const itemContent = "_itemContent_1tx1c_172";
+const list = "_list_1srbf_2";
+const none = "_none_1srbf_7";
+const disc = "_disc_1srbf_21";
+const decimal = "_decimal_1srbf_61";
+const icon = "_icon_1srbf_108";
+const gapNone = "_gap-none_1srbf_145";
+const gapXs = "_gap-xs_1srbf_149";
+const gapSm = "_gap-sm_1srbf_153";
+const gapMd = "_gap-md_1srbf_157";
+const gapLg = "_gap-lg_1srbf_161";
+const gapXl = "_gap-xl_1srbf_165";
+const item = "_item_1srbf_169";
+const iconItem = "_iconItem_1srbf_173";
+const iconWrapper = "_iconWrapper_1srbf_177";
+const itemContent = "_itemContent_1srbf_184";
 const styles = {
   list,
   none,
   disc,
   decimal,
   icon,
-  "gap-none": "_gap-none_1tx1c_137",
+  "gap-none": "_gap-none_1srbf_145",
   gapNone,
-  "gap-xs": "_gap-xs_1tx1c_141",
+  "gap-xs": "_gap-xs_1srbf_149",
   gapXs,
-  "gap-sm": "_gap-sm_1tx1c_145",
+  "gap-sm": "_gap-sm_1srbf_153",
   gapSm,
-  "gap-md": "_gap-md_1tx1c_149",
+  "gap-md": "_gap-md_1srbf_157",
   gapMd,
-  "gap-lg": "_gap-lg_1tx1c_153",
+  "gap-lg": "_gap-lg_1srbf_161",
   gapLg,
+  "gap-xl": "_gap-xl_1srbf_165",
+  gapXl,
   item,
   iconItem,
   iconWrapper,
@@ -41,6 +44,7 @@ export {
   gapMd,
   gapNone,
   gapSm,
+  gapXl,
   gapXs,
   icon,
   iconItem,

package/dist/components/List/index.cjs

@@ -21,14 +21,14 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
-const ListContext = React__namespace.createContext({ variant: "disc" });
+const ListContext = React__namespace.createContext({ marker: "disc" });
 function useListContext() {
   return React__namespace.useContext(ListContext);
 }
 function ListRoot({
   children,
   as: Component = "ul",
-  variant = "disc",
+  marker = "disc",
   gap = "sm",
   className,
   style,
@@ -36,21 +36,21 @@ function ListRoot({
 }) {
   const classes = [
     List_module.default.list,
-    List_module.default[variant],
+    List_module.default[marker],
     List_module.default[`gap-${gap}`],
     className
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxRuntime.jsx(ListContext.Provider, { value: { variant }, children: /* @__PURE__ */ jsxRuntime.jsx(Component, { ...htmlProps, className: classes, style, children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(ListContext.Provider, { value: { marker }, children: /* @__PURE__ */ jsxRuntime.jsx(Component, { ...htmlProps, className: classes, style, children }) });
 }
 function ListItem({ children, icon, className, style, ...htmlProps }) {
-  const { variant } = useListContext();
+  const { marker } = useListContext();
   const classes = [
     List_module.default.item,
-    variant === "icon" && List_module.default.iconItem,
+    marker === "icon" && List_module.default.iconItem,
     className
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxRuntime.jsxs("li", { ...htmlProps, className: classes, style, children: [
-    variant === "icon" && icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: List_module.default.iconWrapper, children: icon }) : null,
+    marker === "icon" && icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: List_module.default.iconWrapper, children: icon }) : null,
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: List_module.default.itemContent, children })
   ] });
 }

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

@@ -1,23 +1,26 @@
 import * as React from 'react';
+export type ListMarker = 'none' | 'disc' | 'decimal' | 'icon';
 export interface ListProps extends React.HTMLAttributes<HTMLUListElement | HTMLOListElement> {
     children: React.ReactNode;
     /** List type */
     as?: 'ul' | 'ol';
-    /** List style variant */
-    variant?: 'none' | 'disc' | 'decimal' | 'icon';
-    /** Spacing between items */
-    gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg';
+    /** Marker drawn before each item. Not chrome, so it is `marker`, not `variant`.
+     * @default 'disc' */
+    marker?: ListMarker;
+    /** Spacing between items
+     * @default 'sm' */
+    gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 }
 export interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {
     children: React.ReactNode;
-    /** Icon to display (only used with variant="icon") */
+    /** Icon to display (only used with marker="icon") */
     icon?: React.ReactNode;
 }
 interface ListContextValue {
-    variant: NonNullable<ListProps['variant']>;
+    marker: ListMarker;
 }
 declare function useListContext(): ListContextValue;
-declare function ListRoot({ children, as: Component, variant, gap, className, style, ...htmlProps }: ListProps): import("react/jsx-runtime").JSX.Element;
+declare function ListRoot({ children, as: Component, marker, gap, className, style, ...htmlProps }: ListProps): import("react/jsx-runtime").JSX.Element;
 declare function ListItem({ children, icon, className, style, ...htmlProps }: ListItemProps): import("react/jsx-runtime").JSX.Element;
 export declare const List: typeof ListRoot & {
     Item: typeof ListItem;

package/dist/components/List/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/List/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,GAAG,gBAAgB,CAAC;IAC1F,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gBAAgB;IAChB,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACjB,yBAAyB;IACzB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;IAC/C,4BAA4B;IAC5B,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC1C;AAED,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC;IACxE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,sDAAsD;IACtD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAMD,UAAU,gBAAgB;IACxB,OAAO,EAAE,WAAW,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC;CAC5C;AAID,iBAAS,cAAc,qBAEtB;AAMD,iBAAS,QAAQ,CAAC,EAChB,QAAQ,EACR,EAAE,EAAE,SAAgB,EACpB,OAAgB,EAChB,GAAU,EACV,SAAS,EACT,KAAK,EACL,GAAG,SAAS,EACb,EAAE,SAAS,2CAiBX;AAED,iBAAS,QAAQ,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,SAAS,EAAE,EAAE,aAAa,2CAmBlF;AAMD,eAAO,MAAM,IAAI;;CAEf,CAAC;AAGH,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/List/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;AAE9D,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,GAAG,gBAAgB,CAAC;IAC1F,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gBAAgB;IAChB,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACjB;yBACqB;IACrB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB;uBACmB;IACnB,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CACjD;AAED,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC;IACxE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,qDAAqD;IACrD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAMD,UAAU,gBAAgB;IACxB,MAAM,EAAE,UAAU,CAAC;CACpB;AAID,iBAAS,cAAc,qBAEtB;AAMD,iBAAS,QAAQ,CAAC,EAChB,QAAQ,EACR,EAAE,EAAE,SAAgB,EACpB,MAAe,EACf,GAAU,EACV,SAAS,EACT,KAAK,EACL,GAAG,SAAS,EACb,EAAE,SAAS,2CAiBX;AAED,iBAAS,QAAQ,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,SAAS,EAAE,EAAE,aAAa,2CAmBlF;AAMD,eAAO,MAAM,IAAI;;CAEf,CAAC;AAGH,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/List/index.js

@@ -2,14 +2,14 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import styles from "./List.module.scss.js";
-const ListContext = React.createContext({ variant: "disc" });
+const ListContext = React.createContext({ marker: "disc" });
 function useListContext() {
   return React.useContext(ListContext);
 }
 function ListRoot({
   children,
   as: Component = "ul",
-  variant = "disc",
+  marker = "disc",
   gap = "sm",
   className,
   style,
@@ -17,21 +17,21 @@ function ListRoot({
 }) {
   const classes = [
     styles.list,
-    styles[variant],
+    styles[marker],
     styles[`gap-${gap}`],
     className
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx(ListContext.Provider, { value: { variant }, children: /* @__PURE__ */ jsx(Component, { ...htmlProps, className: classes, style, children }) });
+  return /* @__PURE__ */ jsx(ListContext.Provider, { value: { marker }, children: /* @__PURE__ */ jsx(Component, { ...htmlProps, className: classes, style, children }) });
 }
 function ListItem({ children, icon, className, style, ...htmlProps }) {
-  const { variant } = useListContext();
+  const { marker } = useListContext();
   const classes = [
     styles.item,
-    variant === "icon" && styles.iconItem,
+    marker === "icon" && styles.iconItem,
     className
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs("li", { ...htmlProps, className: classes, style, children: [
-    variant === "icon" && icon ? /* @__PURE__ */ jsx("span", { className: styles.iconWrapper, children: icon }) : null,
+    marker === "icon" && icon ? /* @__PURE__ */ jsx("span", { className: styles.iconWrapper, children: icon }) : null,
     /* @__PURE__ */ jsx("span", { className: styles.itemContent, children })
   ] });
 }

package/dist/components/Listbox/Listbox.module.scss.cjs

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const listbox = "_listbox_nqz6z_1";
-const item = "_item_nqz6z_45";
-const itemActive = "_itemActive_nqz6z_70";
-const itemSelected = "_itemSelected_nqz6z_74";
-const itemDisabled = "_itemDisabled_nqz6z_79";
-const group = "_group_nqz6z_84";
-const groupLabel = "_groupLabel_nqz6z_92";
-const empty = "_empty_nqz6z_106";
+const listbox = "_listbox_10arb_1";
+const item = "_item_10arb_44";
+const itemActive = "_itemActive_10arb_70";
+const itemSelected = "_itemSelected_10arb_74";
+const itemDisabled = "_itemDisabled_10arb_79";
+const group = "_group_10arb_85";
+const groupLabel = "_groupLabel_10arb_93";
+const empty = "_empty_10arb_107";
 const styles = {
   listbox,
   item,