@usefragments/ui 1.6.0 → 2.0.0

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

@@ -1,22 +1,20 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const wrapper = "_wrapper_pnnzr_1";
-const label = "_label_pnnzr_8";
-const required = "_required_pnnzr_17";
-const helper = "_helper_pnnzr_22";
-const helperError = "_helperError_pnnzr_32";
-const errorMessage = "_errorMessage_pnnzr_33";
-const input = "_input_pnnzr_43";
-const sm = "_sm_pnnzr_74";
-const md = "_md_pnnzr_85";
-const lg = "_lg_pnnzr_96";
-const error = "_error_pnnzr_33";
-const success = "_success_pnnzr_118";
-const helperSuccess = "_helperSuccess_pnnzr_132";
-const inputContainer = "_inputContainer_pnnzr_136";
-const hasAdornment = "_hasAdornment_pnnzr_143";
-const shortcut = "_shortcut_pnnzr_144";
-const adornment = "_adornment_pnnzr_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,
@@ -29,8 +27,6 @@ const styles = {
   md,
   lg,
   error,
-  success,
-  helperSuccess,
   inputContainer,
   hasAdornment,
   shortcut,
@@ -43,7 +39,6 @@ exports.errorMessage = errorMessage;
 exports.hasAdornment = hasAdornment;
 exports.helper = helper;
 exports.helperError = helperError;
-exports.helperSuccess = helperSuccess;
 exports.input = input;
 exports.inputContainer = inputContainer;
 exports.label = label;
@@ -52,5 +47,4 @@ exports.md = md;
 exports.required = required;
 exports.shortcut = shortcut;
 exports.sm = sm;
-exports.success = success;
 exports.wrapper = wrapper;

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

@@ -1,20 +1,18 @@
-const wrapper = "_wrapper_pnnzr_1";
-const label = "_label_pnnzr_8";
-const required = "_required_pnnzr_17";
-const helper = "_helper_pnnzr_22";
-const helperError = "_helperError_pnnzr_32";
-const errorMessage = "_errorMessage_pnnzr_33";
-const input = "_input_pnnzr_43";
-const sm = "_sm_pnnzr_74";
-const md = "_md_pnnzr_85";
-const lg = "_lg_pnnzr_96";
-const error = "_error_pnnzr_33";
-const success = "_success_pnnzr_118";
-const helperSuccess = "_helperSuccess_pnnzr_132";
-const inputContainer = "_inputContainer_pnnzr_136";
-const hasAdornment = "_hasAdornment_pnnzr_143";
-const shortcut = "_shortcut_pnnzr_144";
-const adornment = "_adornment_pnnzr_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,27 +1,39 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const link = "_link_1o3ks_1";
-const subtle = "_subtle_1o3ks_43";
-const muted = "_muted_1o3ks_50";
-const underlineAlways = "_underline-always_1o3ks_57";
-const underlineHover = "_underline-hover_1o3ks_62";
-const underlineNone = "_underline-none_1o3ks_70";
+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_1o3ks_36",
-  subtle,
-  muted,
-  "underline-always": "_underline-always_1o3ks_57",
+  toneAccent,
+  toneNeutral,
+  colorPrimary,
+  colorSecondary,
+  colorTertiary,
+  "underline-always": "_underline-always_pkl8n_69",
   underlineAlways,
-  "underline-hover": "_underline-hover_1o3ks_62",
+  "underline-hover": "_underline-hover_pkl8n_75",
   underlineHover,
-  "underline-none": "_underline-none_1o3ks_70",
+  "underline-dotted": "_underline-dotted_pkl8n_88",
+  underlineDotted,
+  "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;
 exports.underlineNone = underlineNone;

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

@@ -1,27 +1,39 @@
-const link = "_link_1o3ks_1";
-const subtle = "_subtle_1o3ks_43";
-const muted = "_muted_1o3ks_50";
-const underlineAlways = "_underline-always_1o3ks_57";
-const underlineHover = "_underline-hover_1o3ks_62";
-const underlineNone = "_underline-none_1o3ks_70";
+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_1o3ks_36",
-  subtle,
-  muted,
-  "underline-always": "_underline-always_1o3ks_57",
+  toneAccent,
+  toneNeutral,
+  colorPrimary,
+  colorSecondary,
+  colorTertiary,
+  "underline-always": "_underline-always_pkl8n_69",
   underlineAlways,
-  "underline-hover": "_underline-hover_1o3ks_62",
+  "underline-hover": "_underline-hover_pkl8n_75",
   underlineHover,
-  "underline-none": "_underline-none_1o3ks_70",
+  "underline-dotted": "_underline-dotted_pkl8n_88",
+  underlineDotted,
+  "underline-none": "_underline-none_pkl8n_98",
   underlineNone
 };
 export {
+  colorPrimary,
+  colorSecondary,
+  colorTertiary,
   styles as default,
   link,
-  muted,
-  subtle,
+  toneAccent,
+  toneNeutral,
   underlineAlways,
+  underlineDotted,
   underlineHover,
   underlineNone
 };

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,10 +1,17 @@
 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';
+    underline?: 'always' | 'hover' | 'none' | 'dotted';
     /** Open in new tab (adds rel="noopener noreferrer") */
     external?: boolean;
     /**

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,CAAC;IACxC,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_10vux_2";
-const none = "_none_10vux_7";
-const disc = "_disc_10vux_19";
-const decimal = "_decimal_10vux_57";
-const icon = "_icon_10vux_102";
-const gapNone = "_gap-none_10vux_137";
-const gapXs = "_gap-xs_10vux_141";
-const gapSm = "_gap-sm_10vux_145";
-const gapMd = "_gap-md_10vux_149";
-const gapLg = "_gap-lg_10vux_153";
-const item = "_item_10vux_157";
-const iconItem = "_iconItem_10vux_161";
-const iconWrapper = "_iconWrapper_10vux_165";
-const itemContent = "_itemContent_10vux_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_10vux_137",
+  "gap-none": "_gap-none_1srbf_145",
   gapNone,
-  "gap-xs": "_gap-xs_10vux_141",
+  "gap-xs": "_gap-xs_1srbf_149",
   gapXs,
-  "gap-sm": "_gap-sm_10vux_145",
+  "gap-sm": "_gap-sm_1srbf_153",
   gapSm,
-  "gap-md": "_gap-md_10vux_149",
+  "gap-md": "_gap-md_1srbf_157",
   gapMd,
-  "gap-lg": "_gap-lg_10vux_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_10vux_2";
-const none = "_none_10vux_7";
-const disc = "_disc_10vux_19";
-const decimal = "_decimal_10vux_57";
-const icon = "_icon_10vux_102";
-const gapNone = "_gap-none_10vux_137";
-const gapXs = "_gap-xs_10vux_141";
-const gapSm = "_gap-sm_10vux_145";
-const gapMd = "_gap-md_10vux_149";
-const gapLg = "_gap-lg_10vux_153";
-const item = "_item_10vux_157";
-const iconItem = "_iconItem_10vux_161";
-const iconWrapper = "_iconWrapper_10vux_165";
-const itemContent = "_itemContent_10vux_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_10vux_137",
+  "gap-none": "_gap-none_1srbf_145",
   gapNone,
-  "gap-xs": "_gap-xs_10vux_141",
+  "gap-xs": "_gap-xs_1srbf_149",
   gapXs,
-  "gap-sm": "_gap-sm_10vux_145",
+  "gap-sm": "_gap-sm_1srbf_153",
   gapSm,
-  "gap-md": "_gap-md_10vux_149",
+  "gap-md": "_gap-md_1srbf_157",
   gapMd,
-  "gap-lg": "_gap-lg_10vux_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"}