jvetrau-ds 0.1.17 → 0.1.18

package/components/button/button.cjs

@@ -28,7 +28,7 @@ const Button = ({
   if (react.isValidElement(icon) && icon.type === Icon__default.default) {
     const iconElement = icon;
     resolvedIcon = react.cloneElement(iconElement, {
-      size: iconElement.props.size ?? "s",
+      size: iconElement.props.size ?? "base",
       className: classnames.classnames("button__icon", iconElement.props.className),
       "aria-hidden": iconElement.props["aria-hidden"] ?? true,
       focusable: iconElement.props.focusable ?? false

package/components/button/button.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/button/button.tsx"],"names":["classnames","isValidElement","Icon","cloneElement","jsxs"],"mappings":";;;;;;;;;;;;AAeA,MAAM,SAAgC,CAAC;AAAA,EACrC,KAAA,GAAQ,SAAA;AAAA,EACR,IAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA,GAAW,KAAA;AAAA,EACX,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,UAAA,GAAa,CAAC,CAAC,IAAA,IAAQ,CAAC,QAAA;AAE9B,EAAA,MAAM,OAAA,GAAUA,qBAAA,CAAW,QAAA,EAAU,SAAA,EAAW;AAAA,IAC9C,mBAAmB,KAAA,KAAU,SAAA;AAAA,IAC7B,kBAAA,EAAoB,QAAA;AAAA,IACpB,mBAAA,EAAqB;AAAA,GACtB,CAAA;AAED,EAAA,IAAI,YAAA,GAAe,IAAA;AAEnB,EAAA,IAAIC,oBAAA,CAAe,IAAI,CAAA,IAAK,IAAA,CAAK,SAASC,qBAAA,EAAM;AAC9C,IAAA,MAAM,WAAA,GAAc,IAAA;AAEpB,IAAA,YAAA,GAAeC,mBAAa,WAAA,EAAa;AAAA,MACvC,IAAA,EAAM,WAAA,CAAY,KAAA,CAAM,IAAA,IAAQ,GAAA;AAAA,MAChC,SAAA,EAAWH,qBAAA,CAAW,cAAA,EAAgB,WAAA,CAAY,MAAM,SAAS,CAAA;AAAA,MACjE,aAAA,EAAe,WAAA,CAAY,KAAA,CAAM,aAAa,CAAA,IAAK,IAAA;AAAA,MACnD,SAAA,EAAW,WAAA,CAAY,KAAA,CAAM,SAAA,IAAa;AAAA,KAC3C,CAAA;AAAA,EACH;AAEA,EAAA,uBACEI,eAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACX,QAAA;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,YAAA;AAAA,QACA;AAAA;AAAA;AAAA,GACH;AAEJ,CAAA;AAEA,IAAO,cAAA,GAAQ","file":"button.cjs","sourcesContent":["import React, {\n  cloneElement,\n  isValidElement,\n  type ReactElement,\n} from 'react';\nimport './button.css';\nimport { classnames } from '../helpers/classnames';\nimport Icon, { type IconProps } from '../../icons/icon';\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  state?: 'default' | 'primary';\n  icon?: React.ReactNode;\n}\n\nconst Button: React.FC<ButtonProps> = ({\n  state = 'default',\n  icon,\n  className = '',\n  disabled = false,\n  children,\n  ...props\n}) => {\n  const isIconOnly = !!icon && !children;\n\n  const classes = classnames('button', className, {\n    'button--primary': state === 'primary',\n    'button--disabled': disabled,\n    'button--icon-only': isIconOnly,\n  });\n\n  let resolvedIcon = icon;\n\n  if (isValidElement(icon) && icon.type === Icon) {\n    const iconElement = icon as ReactElement<IconProps>;\n\n    resolvedIcon = cloneElement(iconElement, {\n      size: iconElement.props.size ?? 's',\n      className: classnames('button__icon', iconElement.props.className),\n      'aria-hidden': iconElement.props['aria-hidden'] ?? true,\n      focusable: iconElement.props.focusable ?? false,\n    });\n  }\n\n  return (\n    <button\n      className={classes}\n      disabled={disabled}\n      {...props}\n    >\n      {resolvedIcon}\n      {children}\n    </button>\n  );\n};\n\nexport default Button;"]}
+{"version":3,"sources":["../../../src/components/button/button.tsx"],"names":["classnames","isValidElement","Icon","cloneElement","jsxs"],"mappings":";;;;;;;;;;;;AAeA,MAAM,SAAgC,CAAC;AAAA,EACrC,KAAA,GAAQ,SAAA;AAAA,EACR,IAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA,GAAW,KAAA;AAAA,EACX,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,UAAA,GAAa,CAAC,CAAC,IAAA,IAAQ,CAAC,QAAA;AAE9B,EAAA,MAAM,OAAA,GAAUA,qBAAA,CAAW,QAAA,EAAU,SAAA,EAAW;AAAA,IAC9C,mBAAmB,KAAA,KAAU,SAAA;AAAA,IAC7B,kBAAA,EAAoB,QAAA;AAAA,IACpB,mBAAA,EAAqB;AAAA,GACtB,CAAA;AAED,EAAA,IAAI,YAAA,GAAe,IAAA;AAEnB,EAAA,IAAIC,oBAAA,CAAe,IAAI,CAAA,IAAK,IAAA,CAAK,SAASC,qBAAA,EAAM;AAC9C,IAAA,MAAM,WAAA,GAAc,IAAA;AAEpB,IAAA,YAAA,GAAeC,mBAAa,WAAA,EAAa;AAAA,MACvC,IAAA,EAAM,WAAA,CAAY,KAAA,CAAM,IAAA,IAAQ,MAAA;AAAA,MAChC,SAAA,EAAWH,qBAAA,CAAW,cAAA,EAAgB,WAAA,CAAY,MAAM,SAAS,CAAA;AAAA,MACjE,aAAA,EAAe,WAAA,CAAY,KAAA,CAAM,aAAa,CAAA,IAAK,IAAA;AAAA,MACnD,SAAA,EAAW,WAAA,CAAY,KAAA,CAAM,SAAA,IAAa;AAAA,KAC3C,CAAA;AAAA,EACH;AAEA,EAAA,uBACEI,eAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACX,QAAA;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,YAAA;AAAA,QACA;AAAA;AAAA;AAAA,GACH;AAEJ,CAAA;AAEA,IAAO,cAAA,GAAQ","file":"button.cjs","sourcesContent":["import React, {\n  cloneElement,\n  isValidElement,\n  type ReactElement,\n} from 'react';\nimport './button.css';\nimport { classnames } from '../helpers/classnames';\nimport Icon, { type IconProps } from '../../icons/icon';\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  state?: 'default' | 'primary';\n  icon?: React.ReactNode;\n}\n\nconst Button: React.FC<ButtonProps> = ({\n  state = 'default',\n  icon,\n  className = '',\n  disabled = false,\n  children,\n  ...props\n}) => {\n  const isIconOnly = !!icon && !children;\n\n  const classes = classnames('button', className, {\n    'button--primary': state === 'primary',\n    'button--disabled': disabled,\n    'button--icon-only': isIconOnly,\n  });\n\n  let resolvedIcon = icon;\n\n  if (isValidElement(icon) && icon.type === Icon) {\n    const iconElement = icon as ReactElement<IconProps>;\n\n    resolvedIcon = cloneElement(iconElement, {\n      size: iconElement.props.size ?? 'base',\n      className: classnames('button__icon', iconElement.props.className),\n      'aria-hidden': iconElement.props['aria-hidden'] ?? true,\n      focusable: iconElement.props.focusable ?? false,\n    });\n  }\n\n  return (\n    <button\n      className={classes}\n      disabled={disabled}\n      {...props}\n    >\n      {resolvedIcon}\n      {children}\n    </button>\n  );\n};\n\nexport default Button;"]}

package/components/button/button.js

@@ -22,7 +22,7 @@ const Button = ({
   if (isValidElement(icon) && icon.type === Icon) {
     const iconElement = icon;
     resolvedIcon = cloneElement(iconElement, {
-      size: iconElement.props.size ?? "s",
+      size: iconElement.props.size ?? "base",
       className: classnames("button__icon", iconElement.props.className),
       "aria-hidden": iconElement.props["aria-hidden"] ?? true,
       focusable: iconElement.props.focusable ?? false

package/components/button/button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":";;;;;;AAeA,MAAM,SAAgC,CAAC;AAAA,EACrC,KAAA,GAAQ,SAAA;AAAA,EACR,IAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA,GAAW,KAAA;AAAA,EACX,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,UAAA,GAAa,CAAC,CAAC,IAAA,IAAQ,CAAC,QAAA;AAE9B,EAAA,MAAM,OAAA,GAAU,UAAA,CAAW,QAAA,EAAU,SAAA,EAAW;AAAA,IAC9C,mBAAmB,KAAA,KAAU,SAAA;AAAA,IAC7B,kBAAA,EAAoB,QAAA;AAAA,IACpB,mBAAA,EAAqB;AAAA,GACtB,CAAA;AAED,EAAA,IAAI,YAAA,GAAe,IAAA;AAEnB,EAAA,IAAI,cAAA,CAAe,IAAI,CAAA,IAAK,IAAA,CAAK,SAAS,IAAA,EAAM;AAC9C,IAAA,MAAM,WAAA,GAAc,IAAA;AAEpB,IAAA,YAAA,GAAe,aAAa,WAAA,EAAa;AAAA,MACvC,IAAA,EAAM,WAAA,CAAY,KAAA,CAAM,IAAA,IAAQ,GAAA;AAAA,MAChC,SAAA,EAAW,UAAA,CAAW,cAAA,EAAgB,WAAA,CAAY,MAAM,SAAS,CAAA;AAAA,MACjE,aAAA,EAAe,WAAA,CAAY,KAAA,CAAM,aAAa,CAAA,IAAK,IAAA;AAAA,MACnD,SAAA,EAAW,WAAA,CAAY,KAAA,CAAM,SAAA,IAAa;AAAA,KAC3C,CAAA;AAAA,EACH;AAEA,EAAA,uBACE,IAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACX,QAAA;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,YAAA;AAAA,QACA;AAAA;AAAA;AAAA,GACH;AAEJ,CAAA;AAEA,IAAO,cAAA,GAAQ","file":"button.js","sourcesContent":["import React, {\n  cloneElement,\n  isValidElement,\n  type ReactElement,\n} from 'react';\nimport './button.css';\nimport { classnames } from '../helpers/classnames';\nimport Icon, { type IconProps } from '../../icons/icon';\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  state?: 'default' | 'primary';\n  icon?: React.ReactNode;\n}\n\nconst Button: React.FC<ButtonProps> = ({\n  state = 'default',\n  icon,\n  className = '',\n  disabled = false,\n  children,\n  ...props\n}) => {\n  const isIconOnly = !!icon && !children;\n\n  const classes = classnames('button', className, {\n    'button--primary': state === 'primary',\n    'button--disabled': disabled,\n    'button--icon-only': isIconOnly,\n  });\n\n  let resolvedIcon = icon;\n\n  if (isValidElement(icon) && icon.type === Icon) {\n    const iconElement = icon as ReactElement<IconProps>;\n\n    resolvedIcon = cloneElement(iconElement, {\n      size: iconElement.props.size ?? 's',\n      className: classnames('button__icon', iconElement.props.className),\n      'aria-hidden': iconElement.props['aria-hidden'] ?? true,\n      focusable: iconElement.props.focusable ?? false,\n    });\n  }\n\n  return (\n    <button\n      className={classes}\n      disabled={disabled}\n      {...props}\n    >\n      {resolvedIcon}\n      {children}\n    </button>\n  );\n};\n\nexport default Button;"]}
+{"version":3,"sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":";;;;;;AAeA,MAAM,SAAgC,CAAC;AAAA,EACrC,KAAA,GAAQ,SAAA;AAAA,EACR,IAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA,GAAW,KAAA;AAAA,EACX,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,UAAA,GAAa,CAAC,CAAC,IAAA,IAAQ,CAAC,QAAA;AAE9B,EAAA,MAAM,OAAA,GAAU,UAAA,CAAW,QAAA,EAAU,SAAA,EAAW;AAAA,IAC9C,mBAAmB,KAAA,KAAU,SAAA;AAAA,IAC7B,kBAAA,EAAoB,QAAA;AAAA,IACpB,mBAAA,EAAqB;AAAA,GACtB,CAAA;AAED,EAAA,IAAI,YAAA,GAAe,IAAA;AAEnB,EAAA,IAAI,cAAA,CAAe,IAAI,CAAA,IAAK,IAAA,CAAK,SAAS,IAAA,EAAM;AAC9C,IAAA,MAAM,WAAA,GAAc,IAAA;AAEpB,IAAA,YAAA,GAAe,aAAa,WAAA,EAAa;AAAA,MACvC,IAAA,EAAM,WAAA,CAAY,KAAA,CAAM,IAAA,IAAQ,MAAA;AAAA,MAChC,SAAA,EAAW,UAAA,CAAW,cAAA,EAAgB,WAAA,CAAY,MAAM,SAAS,CAAA;AAAA,MACjE,aAAA,EAAe,WAAA,CAAY,KAAA,CAAM,aAAa,CAAA,IAAK,IAAA;AAAA,MACnD,SAAA,EAAW,WAAA,CAAY,KAAA,CAAM,SAAA,IAAa;AAAA,KAC3C,CAAA;AAAA,EACH;AAEA,EAAA,uBACE,IAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACX,QAAA;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,YAAA;AAAA,QACA;AAAA;AAAA;AAAA,GACH;AAEJ,CAAA;AAEA,IAAO,cAAA,GAAQ","file":"button.js","sourcesContent":["import React, {\n  cloneElement,\n  isValidElement,\n  type ReactElement,\n} from 'react';\nimport './button.css';\nimport { classnames } from '../helpers/classnames';\nimport Icon, { type IconProps } from '../../icons/icon';\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  state?: 'default' | 'primary';\n  icon?: React.ReactNode;\n}\n\nconst Button: React.FC<ButtonProps> = ({\n  state = 'default',\n  icon,\n  className = '',\n  disabled = false,\n  children,\n  ...props\n}) => {\n  const isIconOnly = !!icon && !children;\n\n  const classes = classnames('button', className, {\n    'button--primary': state === 'primary',\n    'button--disabled': disabled,\n    'button--icon-only': isIconOnly,\n  });\n\n  let resolvedIcon = icon;\n\n  if (isValidElement(icon) && icon.type === Icon) {\n    const iconElement = icon as ReactElement<IconProps>;\n\n    resolvedIcon = cloneElement(iconElement, {\n      size: iconElement.props.size ?? 'base',\n      className: classnames('button__icon', iconElement.props.className),\n      'aria-hidden': iconElement.props['aria-hidden'] ?? true,\n      focusable: iconElement.props.focusable ?? false,\n    });\n  }\n\n  return (\n    <button\n      className={classes}\n      disabled={disabled}\n      {...props}\n    >\n      {resolvedIcon}\n      {children}\n    </button>\n  );\n};\n\nexport default Button;"]}

package/components/button-icon/button-icon.d.cts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { a as IconName } from '../../types-PU1522Kr.cjs';
+import { a as IconName } from '../../types-DboVOY__.cjs';
 
 interface ButtonIconProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     icon: IconName;

package/components/button-icon/button-icon.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { a as IconName } from '../../types-PU1522Kr.js';
+import { a as IconName } from '../../types-DboVOY__.js';
 
 interface ButtonIconProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     icon: IconName;

package/components/button-icon/index.d.cts

@@ -1,3 +1,3 @@
 export { ButtonIconProps, default } from './button-icon.cjs';
 import 'react';
-import '../../types-PU1522Kr.cjs';
+import '../../types-DboVOY__.cjs';

package/components/button-icon/index.d.ts

@@ -1,3 +1,3 @@
 export { ButtonIconProps, default } from './button-icon.js';
 import 'react';
-import '../../types-PU1522Kr.js';
+import '../../types-DboVOY__.js';

package/components/index.d.cts

@@ -15,4 +15,4 @@ export { default as Logo, LogoProps } from './logo/logo.cjs';
 export { default as Avatar, AvatarProps } from './avatar/avatar.cjs';
 export { default as Attach, AttachProps } from './attach/attach.cjs';
 import 'react';
-import '../types-PU1522Kr.cjs';
+import '../types-DboVOY__.cjs';

package/components/index.d.ts

@@ -15,4 +15,4 @@ export { default as Logo, LogoProps } from './logo/logo.js';
 export { default as Avatar, AvatarProps } from './avatar/avatar.js';
 export { default as Attach, AttachProps } from './attach/attach.js';
 import 'react';
-import '../types-PU1522Kr.js';
+import '../types-DboVOY__.js';

package/icons/assets/arrow-link.d.cts

@@ -1,4 +1,4 @@
-import { I as IconGlyph } from '../../types-PU1522Kr.cjs';
+import { I as IconGlyph } from '../../types-DboVOY__.cjs';
 import 'react';
 
 declare const arrowLink: IconGlyph;

package/icons/assets/arrow-link.d.ts

@@ -1,4 +1,4 @@
-import { I as IconGlyph } from '../../types-PU1522Kr.js';
+import { I as IconGlyph } from '../../types-DboVOY__.js';
 import 'react';
 
 declare const arrowLink: IconGlyph;

package/icons/assets/arrow-right.d.cts

@@ -1,4 +1,4 @@
-import { I as IconGlyph } from '../../types-PU1522Kr.cjs';
+import { I as IconGlyph } from '../../types-DboVOY__.cjs';
 import 'react';
 
 declare const arrowRight: IconGlyph;

package/icons/assets/arrow-right.d.ts

@@ -1,4 +1,4 @@
-import { I as IconGlyph } from '../../types-PU1522Kr.js';
+import { I as IconGlyph } from '../../types-DboVOY__.js';
 import 'react';
 
 declare const arrowRight: IconGlyph;

package/icons/assets/chevron-right.d.cts

@@ -1,4 +1,4 @@
-import { I as IconGlyph } from '../../types-PU1522Kr.cjs';
+import { I as IconGlyph } from '../../types-DboVOY__.cjs';
 import 'react';
 
 declare const chevronRight: IconGlyph;

package/icons/assets/chevron-right.d.ts

@@ -1,4 +1,4 @@
-import { I as IconGlyph } from '../../types-PU1522Kr.js';
+import { I as IconGlyph } from '../../types-DboVOY__.js';
 import 'react';
 
 declare const chevronRight: IconGlyph;

package/icons/assets/fullscreen.d.cts

@@ -1,4 +1,4 @@
-import { I as IconGlyph } from '../../types-PU1522Kr.cjs';
+import { I as IconGlyph } from '../../types-DboVOY__.cjs';
 import 'react';
 
 declare const fullscreen: IconGlyph;

package/icons/assets/fullscreen.d.ts

@@ -1,4 +1,4 @@
-import { I as IconGlyph } from '../../types-PU1522Kr.js';
+import { I as IconGlyph } from '../../types-DboVOY__.js';
 import 'react';
 
 declare const fullscreen: IconGlyph;

package/icons/assets/pause.d.cts

@@ -1,4 +1,4 @@
-import { I as IconGlyph } from '../../types-PU1522Kr.cjs';
+import { I as IconGlyph } from '../../types-DboVOY__.cjs';
 import 'react';
 
 declare const pause: IconGlyph;

package/icons/assets/pause.d.ts

@@ -1,4 +1,4 @@
-import { I as IconGlyph } from '../../types-PU1522Kr.js';
+import { I as IconGlyph } from '../../types-DboVOY__.js';
 import 'react';
 
 declare const pause: IconGlyph;

package/icons/assets/play.d.cts

@@ -1,4 +1,4 @@
-import { I as IconGlyph } from '../../types-PU1522Kr.cjs';
+import { I as IconGlyph } from '../../types-DboVOY__.cjs';
 import 'react';
 
 declare const play: IconGlyph;

package/icons/assets/play.d.ts

@@ -1,4 +1,4 @@
-import { I as IconGlyph } from '../../types-PU1522Kr.js';
+import { I as IconGlyph } from '../../types-DboVOY__.js';
 import 'react';
 
 declare const play: IconGlyph;

package/icons/assets/settings.d.cts

@@ -1,4 +1,4 @@
-import { I as IconGlyph } from '../../types-PU1522Kr.cjs';
+import { I as IconGlyph } from '../../types-DboVOY__.cjs';
 import 'react';
 
 declare const settings: IconGlyph;

package/icons/assets/settings.d.ts

@@ -1,4 +1,4 @@
-import { I as IconGlyph } from '../../types-PU1522Kr.js';
+import { I as IconGlyph } from '../../types-DboVOY__.js';
 import 'react';
 
 declare const settings: IconGlyph;

package/icons/assets/sound-off.d.cts

@@ -1,4 +1,4 @@
-import { I as IconGlyph } from '../../types-PU1522Kr.cjs';
+import { I as IconGlyph } from '../../types-DboVOY__.cjs';
 import 'react';
 
 declare const soundOff: IconGlyph;

package/icons/assets/sound-off.d.ts

@@ -1,4 +1,4 @@
-import { I as IconGlyph } from '../../types-PU1522Kr.js';
+import { I as IconGlyph } from '../../types-DboVOY__.js';
 import 'react';
 
 declare const soundOff: IconGlyph;

package/icons/assets/sound.d.cts

@@ -1,4 +1,4 @@
-import { I as IconGlyph } from '../../types-PU1522Kr.cjs';
+import { I as IconGlyph } from '../../types-DboVOY__.cjs';
 import 'react';
 
 declare const sound: IconGlyph;

package/icons/assets/sound.d.ts

@@ -1,4 +1,4 @@
-import { I as IconGlyph } from '../../types-PU1522Kr.js';
+import { I as IconGlyph } from '../../types-DboVOY__.js';
 import 'react';
 
 declare const sound: IconGlyph;

package/icons/icon.cjs

@@ -3,17 +3,25 @@
 var jsxRuntime = require('react/jsx-runtime');
 require('./icon.css');
 var registry = require('./registry');
-var size = require('../tokens/scales/size');
+var runtime = require('../tokens/runtime');
 
-const iconSizeMap = size.sizeIcon;
+const iconSizeMap = {
+  base: runtime.sizeIconBase,
+  compact: runtime.sizeIconCompact
+};
+const iconGlyphGridMap = {
+  base: "l",
+  compact: "m"
+};
 const Icon = ({
   name,
-  size: iconSize = "m",
+  size: iconSize = "base",
   className,
   ...props
 }) => {
   const glyph = registry.iconRegistry[name];
   const size = iconSizeMap[iconSize];
+  const glyphGrid = iconGlyphGridMap[iconSize];
   const viewBox = `0 0 ${size} ${size}`;
   const classes = ["icon", className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -32,7 +40,7 @@ const Icon = ({
       "aria-hidden": "true",
       focusable: "false",
       ...props,
-      children: glyph[iconSize]
+      children: glyph[glyphGrid]
     }
   );
 };

package/icons/icon.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/icons/icon.tsx"],"names":["sizeIcon","iconRegistry","jsx"],"mappings":";;;;;;;AA0BA,MAAM,WAAA,GAAwCA,aAAA;AAE9C,MAAM,OAAsB,CAAC;AAAA,EAC3B,IAAA;AAAA,EACA,MAAM,QAAA,GAAW,GAAA;AAAA,EACjB,SAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,KAAA,GAAQC,sBAAa,IAAI,CAAA;AAC/B,EAAA,MAAM,IAAA,GAAO,YAAY,QAAQ,CAAA;AACjC,EAAA,MAAM,OAAA,GAAU,CAAA,IAAA,EAAO,IAAI,CAAA,CAAA,EAAI,IAAI,CAAA,CAAA;AACnC,EAAA,MAAM,OAAA,GAAU,CAAC,MAAA,EAAQ,SAAS,EAAE,MAAA,CAAO,OAAO,CAAA,CAAE,IAAA,CAAK,GAAG,CAAA;AAE5D,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACX,KAAA,EAAO,IAAA;AAAA,MACP,MAAA,EAAQ,IAAA;AAAA,MACR,OAAA;AAAA,MACA,IAAA,EAAK,MAAA;AAAA,MACL,KAAA,EAAM,4BAAA;AAAA,MACN,MAAA,EAAO,cAAA;AAAA,MACP,WAAA,EAAa,GAAA;AAAA,MACb,aAAA,EAAc,OAAA;AAAA,MACd,cAAA,EAAe,OAAA;AAAA,MACf,aAAA,EAAY,MAAA;AAAA,MACZ,SAAA,EAAU,OAAA;AAAA,MACT,GAAG,KAAA;AAAA,MAEH,gBAAM,QAAQ;AAAA;AAAA,GACjB;AAEJ,CAAA;AAEA,IAAO,YAAA,GAAQ","file":"icon.cjs","sourcesContent":["import React, { type FC } from 'react';\nimport './icon.css';\nimport { iconRegistry } from './registry';\nimport type { IconName, IconSize } from './types';\nimport { sizeIcon } from '../tokens/scales/size';\n\n/*import {\n  sizeIconXS,\n  sizeIconS,\n  sizeIconM,\n  sizeIconL,\n} from '../tokens/scales/size';*/\n\nexport interface IconProps\n  extends Omit<React.SVGAttributes<SVGSVGElement>, 'size'> {\n  name: IconName;\n  size?: IconSize;\n}\n\n/*const iconSizeMap: Record<IconSize, number> = {\n  xs: sizeIconXS,\n  s: sizeIconS,\n  m: sizeIconM,\n  l: sizeIconL,\n};*/\n\nconst iconSizeMap: Record<IconSize, number> = sizeIcon;\n\nconst Icon: FC<IconProps> = ({\n  name,\n  size: iconSize = 'm',\n  className,\n  ...props\n}) => {\n  const glyph = iconRegistry[name];\n  const size = iconSizeMap[iconSize];\n  const viewBox = `0 0 ${size} ${size}`;\n  const classes = ['icon', className].filter(Boolean).join(' ');\n\n  return (\n    <svg\n      className={classes}\n      width={size}\n      height={size}\n      viewBox={viewBox}\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      stroke=\"currentColor\"\n      strokeWidth={1.5}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n      focusable=\"false\"\n      {...props}\n    >\n      {glyph[iconSize]}\n    </svg>\n  );\n};\n\nexport default Icon;"]}
+{"version":3,"sources":["../../src/icons/icon.tsx"],"names":["sizeIconBase","sizeIconCompact","iconRegistry","jsx"],"mappings":";;;;;;;AAeA,MAAM,WAAA,GAAwC;AAAA,EAC5C,IAAA,EAAMA,oBAAA;AAAA,EACN,OAAA,EAASC;AACX,CAAA;AAEA,MAAM,gBAAA,GAAoD;AAAA,EACxD,IAAA,EAAM,GAAA;AAAA,EACN,OAAA,EAAS;AACX,CAAA;AAEA,MAAM,OAAsB,CAAC;AAAA,EAC3B,IAAA;AAAA,EACA,MAAM,QAAA,GAAW,MAAA;AAAA,EACjB,SAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,KAAA,GAAQC,sBAAa,IAAI,CAAA;AAC/B,EAAA,MAAM,IAAA,GAAO,YAAY,QAAQ,CAAA;AACjC,EAAA,MAAM,SAAA,GAAY,iBAAiB,QAAQ,CAAA;AAE3C,EAAA,MAAM,OAAA,GAAU,CAAA,IAAA,EAAO,IAAI,CAAA,CAAA,EAAI,IAAI,CAAA,CAAA;AACnC,EAAA,MAAM,OAAA,GAAU,CAAC,MAAA,EAAQ,SAAS,EAAE,MAAA,CAAO,OAAO,CAAA,CAAE,IAAA,CAAK,GAAG,CAAA;AAE5D,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACX,KAAA,EAAO,IAAA;AAAA,MACP,MAAA,EAAQ,IAAA;AAAA,MACR,OAAA;AAAA,MACA,IAAA,EAAK,MAAA;AAAA,MACL,KAAA,EAAM,4BAAA;AAAA,MACN,MAAA,EAAO,cAAA;AAAA,MACP,WAAA,EAAa,GAAA;AAAA,MACb,aAAA,EAAc,OAAA;AAAA,MACd,cAAA,EAAe,OAAA;AAAA,MACf,aAAA,EAAY,MAAA;AAAA,MACZ,SAAA,EAAU,OAAA;AAAA,MACT,GAAG,KAAA;AAAA,MAEH,gBAAM,SAAS;AAAA;AAAA,GAClB;AAEJ,CAAA;AAEA,IAAO,YAAA,GAAQ","file":"icon.cjs","sourcesContent":["import React, { type FC } from 'react';\nimport './icon.css';\nimport { iconRegistry } from './registry';\nimport type { IconGlyphSize, IconName, IconSize } from './types';\nimport {\n  sizeIconBase,\n  sizeIconCompact,\n} from '../tokens/runtime';\n\nexport interface IconProps\n  extends Omit<React.SVGAttributes<SVGSVGElement>, 'size'> {\n  name: IconName;\n  size?: IconSize;\n}\n\nconst iconSizeMap: Record<IconSize, number> = {\n  base: sizeIconBase,\n  compact: sizeIconCompact,\n};\n\nconst iconGlyphGridMap: Record<IconSize, IconGlyphSize> = {\n  base: 'l',\n  compact: 'm',\n};\n\nconst Icon: FC<IconProps> = ({\n  name,\n  size: iconSize = 'base',\n  className,\n  ...props\n}) => {\n  const glyph = iconRegistry[name];\n  const size = iconSizeMap[iconSize];\n  const glyphGrid = iconGlyphGridMap[iconSize];\n\n  const viewBox = `0 0 ${size} ${size}`;\n  const classes = ['icon', className].filter(Boolean).join(' ');\n\n  return (\n    <svg\n      className={classes}\n      width={size}\n      height={size}\n      viewBox={viewBox}\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      stroke=\"currentColor\"\n      strokeWidth={1.5}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n      focusable=\"false\"\n      {...props}\n    >\n      {glyph[glyphGrid]}\n    </svg>\n  );\n};\n\nexport default Icon;"]}

package/icons/icon.d.cts

@@ -1,4 +1,4 @@
-import { a as IconName, b as IconSize } from '../types-PU1522Kr.cjs';
+import { a as IconName, b as IconSize } from '../types-DboVOY__.cjs';
 import React, { FC } from 'react';
 
 interface IconProps extends Omit<React.SVGAttributes<SVGSVGElement>, 'size'> {

package/icons/icon.d.ts

@@ -1,4 +1,4 @@
-import { a as IconName, b as IconSize } from '../types-PU1522Kr.js';
+import { a as IconName, b as IconSize } from '../types-DboVOY__.js';
 import React, { FC } from 'react';
 
 interface IconProps extends Omit<React.SVGAttributes<SVGSVGElement>, 'size'> {

package/icons/icon.js

@@ -1,17 +1,25 @@
 import { jsx } from 'react/jsx-runtime';
 import './icon.css';
 import { iconRegistry } from './registry';
-import { sizeIcon } from '../tokens/scales/size';
+import { sizeIconCompact, sizeIconBase } from '../tokens/runtime';
 
-const iconSizeMap = sizeIcon;
+const iconSizeMap = {
+  base: sizeIconBase,
+  compact: sizeIconCompact
+};
+const iconGlyphGridMap = {
+  base: "l",
+  compact: "m"
+};
 const Icon = ({
   name,
-  size: iconSize = "m",
+  size: iconSize = "base",
   className,
   ...props
 }) => {
   const glyph = iconRegistry[name];
   const size = iconSizeMap[iconSize];
+  const glyphGrid = iconGlyphGridMap[iconSize];
   const viewBox = `0 0 ${size} ${size}`;
   const classes = ["icon", className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsx(
@@ -30,7 +38,7 @@ const Icon = ({
       "aria-hidden": "true",
       focusable: "false",
       ...props,
-      children: glyph[iconSize]
+      children: glyph[glyphGrid]
     }
   );
 };

package/icons/icon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/icons/icon.tsx"],"names":[],"mappings":";;;;;AA0BA,MAAM,WAAA,GAAwC,QAAA;AAE9C,MAAM,OAAsB,CAAC;AAAA,EAC3B,IAAA;AAAA,EACA,MAAM,QAAA,GAAW,GAAA;AAAA,EACjB,SAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,KAAA,GAAQ,aAAa,IAAI,CAAA;AAC/B,EAAA,MAAM,IAAA,GAAO,YAAY,QAAQ,CAAA;AACjC,EAAA,MAAM,OAAA,GAAU,CAAA,IAAA,EAAO,IAAI,CAAA,CAAA,EAAI,IAAI,CAAA,CAAA;AACnC,EAAA,MAAM,OAAA,GAAU,CAAC,MAAA,EAAQ,SAAS,EAAE,MAAA,CAAO,OAAO,CAAA,CAAE,IAAA,CAAK,GAAG,CAAA;AAE5D,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACX,KAAA,EAAO,IAAA;AAAA,MACP,MAAA,EAAQ,IAAA;AAAA,MACR,OAAA;AAAA,MACA,IAAA,EAAK,MAAA;AAAA,MACL,KAAA,EAAM,4BAAA;AAAA,MACN,MAAA,EAAO,cAAA;AAAA,MACP,WAAA,EAAa,GAAA;AAAA,MACb,aAAA,EAAc,OAAA;AAAA,MACd,cAAA,EAAe,OAAA;AAAA,MACf,aAAA,EAAY,MAAA;AAAA,MACZ,SAAA,EAAU,OAAA;AAAA,MACT,GAAG,KAAA;AAAA,MAEH,gBAAM,QAAQ;AAAA;AAAA,GACjB;AAEJ,CAAA;AAEA,IAAO,YAAA,GAAQ","file":"icon.js","sourcesContent":["import React, { type FC } from 'react';\nimport './icon.css';\nimport { iconRegistry } from './registry';\nimport type { IconName, IconSize } from './types';\nimport { sizeIcon } from '../tokens/scales/size';\n\n/*import {\n  sizeIconXS,\n  sizeIconS,\n  sizeIconM,\n  sizeIconL,\n} from '../tokens/scales/size';*/\n\nexport interface IconProps\n  extends Omit<React.SVGAttributes<SVGSVGElement>, 'size'> {\n  name: IconName;\n  size?: IconSize;\n}\n\n/*const iconSizeMap: Record<IconSize, number> = {\n  xs: sizeIconXS,\n  s: sizeIconS,\n  m: sizeIconM,\n  l: sizeIconL,\n};*/\n\nconst iconSizeMap: Record<IconSize, number> = sizeIcon;\n\nconst Icon: FC<IconProps> = ({\n  name,\n  size: iconSize = 'm',\n  className,\n  ...props\n}) => {\n  const glyph = iconRegistry[name];\n  const size = iconSizeMap[iconSize];\n  const viewBox = `0 0 ${size} ${size}`;\n  const classes = ['icon', className].filter(Boolean).join(' ');\n\n  return (\n    <svg\n      className={classes}\n      width={size}\n      height={size}\n      viewBox={viewBox}\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      stroke=\"currentColor\"\n      strokeWidth={1.5}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n      focusable=\"false\"\n      {...props}\n    >\n      {glyph[iconSize]}\n    </svg>\n  );\n};\n\nexport default Icon;"]}
+{"version":3,"sources":["../../src/icons/icon.tsx"],"names":[],"mappings":";;;;;AAeA,MAAM,WAAA,GAAwC;AAAA,EAC5C,IAAA,EAAM,YAAA;AAAA,EACN,OAAA,EAAS;AACX,CAAA;AAEA,MAAM,gBAAA,GAAoD;AAAA,EACxD,IAAA,EAAM,GAAA;AAAA,EACN,OAAA,EAAS;AACX,CAAA;AAEA,MAAM,OAAsB,CAAC;AAAA,EAC3B,IAAA;AAAA,EACA,MAAM,QAAA,GAAW,MAAA;AAAA,EACjB,SAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,KAAA,GAAQ,aAAa,IAAI,CAAA;AAC/B,EAAA,MAAM,IAAA,GAAO,YAAY,QAAQ,CAAA;AACjC,EAAA,MAAM,SAAA,GAAY,iBAAiB,QAAQ,CAAA;AAE3C,EAAA,MAAM,OAAA,GAAU,CAAA,IAAA,EAAO,IAAI,CAAA,CAAA,EAAI,IAAI,CAAA,CAAA;AACnC,EAAA,MAAM,OAAA,GAAU,CAAC,MAAA,EAAQ,SAAS,EAAE,MAAA,CAAO,OAAO,CAAA,CAAE,IAAA,CAAK,GAAG,CAAA;AAE5D,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACX,KAAA,EAAO,IAAA;AAAA,MACP,MAAA,EAAQ,IAAA;AAAA,MACR,OAAA;AAAA,MACA,IAAA,EAAK,MAAA;AAAA,MACL,KAAA,EAAM,4BAAA;AAAA,MACN,MAAA,EAAO,cAAA;AAAA,MACP,WAAA,EAAa,GAAA;AAAA,MACb,aAAA,EAAc,OAAA;AAAA,MACd,cAAA,EAAe,OAAA;AAAA,MACf,aAAA,EAAY,MAAA;AAAA,MACZ,SAAA,EAAU,OAAA;AAAA,MACT,GAAG,KAAA;AAAA,MAEH,gBAAM,SAAS;AAAA;AAAA,GAClB;AAEJ,CAAA;AAEA,IAAO,YAAA,GAAQ","file":"icon.js","sourcesContent":["import React, { type FC } from 'react';\nimport './icon.css';\nimport { iconRegistry } from './registry';\nimport type { IconGlyphSize, IconName, IconSize } from './types';\nimport {\n  sizeIconBase,\n  sizeIconCompact,\n} from '../tokens/runtime';\n\nexport interface IconProps\n  extends Omit<React.SVGAttributes<SVGSVGElement>, 'size'> {\n  name: IconName;\n  size?: IconSize;\n}\n\nconst iconSizeMap: Record<IconSize, number> = {\n  base: sizeIconBase,\n  compact: sizeIconCompact,\n};\n\nconst iconGlyphGridMap: Record<IconSize, IconGlyphSize> = {\n  base: 'l',\n  compact: 'm',\n};\n\nconst Icon: FC<IconProps> = ({\n  name,\n  size: iconSize = 'base',\n  className,\n  ...props\n}) => {\n  const glyph = iconRegistry[name];\n  const size = iconSizeMap[iconSize];\n  const glyphGrid = iconGlyphGridMap[iconSize];\n\n  const viewBox = `0 0 ${size} ${size}`;\n  const classes = ['icon', className].filter(Boolean).join(' ');\n\n  return (\n    <svg\n      className={classes}\n      width={size}\n      height={size}\n      viewBox={viewBox}\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      stroke=\"currentColor\"\n      strokeWidth={1.5}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n      focusable=\"false\"\n      {...props}\n    >\n      {glyph[glyphGrid]}\n    </svg>\n  );\n};\n\nexport default Icon;"]}

package/icons/index.d.cts

@@ -1,3 +1,3 @@
 export { default as Icon, IconProps } from './icon.cjs';
-export { a as IconName, b as IconSize } from '../types-PU1522Kr.cjs';
+export { a as IconName, b as IconSize } from '../types-DboVOY__.cjs';
 import 'react';

package/icons/index.d.ts

@@ -1,3 +1,3 @@
 export { default as Icon, IconProps } from './icon.js';
-export { a as IconName, b as IconSize } from '../types-PU1522Kr.js';
+export { a as IconName, b as IconSize } from '../types-DboVOY__.js';
 import 'react';

package/icons/manifest.d.cts

@@ -1,2 +1,2 @@
-export { i as iconManifest } from '../types-PU1522Kr.cjs';
+export { i as iconManifest } from '../types-DboVOY__.cjs';
 import 'react';

package/icons/manifest.d.ts

@@ -1,2 +1,2 @@
-export { i as iconManifest } from '../types-PU1522Kr.js';
+export { i as iconManifest } from '../types-DboVOY__.js';
 import 'react';

package/icons/public.d.cts

@@ -1,3 +1,3 @@
 export { default as Icon, IconProps } from './icon.cjs';
-export { a as IconName, b as IconSize } from '../types-PU1522Kr.cjs';
+export { a as IconName, b as IconSize } from '../types-DboVOY__.cjs';
 import 'react';

package/icons/public.d.ts

@@ -1,3 +1,3 @@
 export { default as Icon, IconProps } from './icon.js';
-export { a as IconName, b as IconSize } from '../types-PU1522Kr.js';
+export { a as IconName, b as IconSize } from '../types-DboVOY__.js';
 import 'react';

package/icons/registry.d.cts

@@ -1,4 +1,4 @@
-import { a as IconName, I as IconGlyph } from '../types-PU1522Kr.cjs';
+import { a as IconName, I as IconGlyph } from '../types-DboVOY__.cjs';
 import 'react';
 
 declare const iconRegistry: Record<IconName, IconGlyph>;

package/icons/registry.d.ts

@@ -1,4 +1,4 @@
-import { a as IconName, I as IconGlyph } from '../types-PU1522Kr.js';
+import { a as IconName, I as IconGlyph } from '../types-DboVOY__.js';
 import 'react';
 
 declare const iconRegistry: Record<IconName, IconGlyph>;

package/icons/types.d.cts

@@ -1,2 +1,2 @@
 import 'react';
-export { c as IconCategory, I as IconGlyph, d as IconManifestItem, a as IconName, b as IconSize } from '../types-PU1522Kr.cjs';
+export { c as IconCategory, I as IconGlyph, d as IconGlyphSize, e as IconManifestItem, a as IconName, b as IconSize } from '../types-DboVOY__.cjs';

package/icons/types.d.ts

@@ -1,2 +1,2 @@
 import 'react';
-export { c as IconCategory, I as IconGlyph, d as IconManifestItem, a as IconName, b as IconSize } from '../types-PU1522Kr.js';
+export { c as IconCategory, I as IconGlyph, d as IconGlyphSize, e as IconManifestItem, a as IconName, b as IconSize } from '../types-DboVOY__.js';

package/index.d.cts

@@ -26,4 +26,4 @@ export { default as LayoutBase, LayoutBaseProps } from './layouts/base/base.cjs'
 export { default as LayoutSidebar, LayoutSidebarProps } from './layouts/sidebar/sidebar.cjs';
 export { default as Attach, AttachItem, AttachProps } from './components/attach/attach.cjs';
 import 'react';
-import './types-PU1522Kr.cjs';
+import './types-DboVOY__.cjs';

package/index.d.ts

@@ -26,4 +26,4 @@ export { default as LayoutBase, LayoutBaseProps } from './layouts/base/base.js';
 export { default as LayoutSidebar, LayoutSidebarProps } from './layouts/sidebar/sidebar.js';
 export { default as Attach, AttachItem, AttachProps } from './components/attach/attach.js';
 import 'react';
-import './types-PU1522Kr.js';
+import './types-DboVOY__.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jvetrau-ds",
-  "version": "0.1.17",
+  "version": "0.1.18",
   "description": "Multi-brand React design system with semantic tokens",
   "license": "UNLICENSED",
   "type": "module",
@@ -19,24 +19,24 @@
       "require": "./index.cjs"
     },
     "./patterns": {
-      "types": "./patterns.d.ts",
-      "import": "./patterns.js",
-      "require": "./patterns.cjs"
+      "types": "./patterns/public.d.ts",
+      "import": "./patterns/public.js",
+      "require": "./patterns/public.cjs"
     },
     "./layouts": {
-      "types": "./layouts.d.ts",
-      "import": "./layouts.js",
-      "require": "./layouts.cjs"
+      "types": "./layouts/public.d.ts",
+      "import": "./layouts/public.js",
+      "require": "./layouts/public.cjs"
     },
     "./icons": {
-      "types": "./icons.d.ts",
-      "import": "./icons.js",
-      "require": "./icons.cjs"
+      "types": "./icons/public.d.ts",
+      "import": "./icons/public.js",
+      "require": "./icons/public.cjs"
     },
     "./tokens": {
-      "types": "./tokens.d.ts",
-      "import": "./tokens.js",
-      "require": "./tokens.cjs"
+      "types": "./tokens/public.d.ts",
+      "import": "./tokens/public.js",
+      "require": "./tokens/public.cjs"
     },
     "./base.css": "./base.css",
     "./styles.css": "./styles.css",

package/themes/base/desktop.css

@@ -147,6 +147,8 @@
   --size-grid-margin: 20px;
   --size-grid-padding-horz: 40px;
   --size-grid-padding-vert: 0px;
+  --size-icon-base: 32px;
+  --size-icon-compact: 24px;
   --size-tab-height: 36px;
   --tone-value1: 0px;
 }

package/themes/base/desktop.md

@@ -182,6 +182,8 @@
 | `size/grid/margin` | `float` | `20` |
 | `size/grid/padding/horz` | `float` | `40` |
 | `size/grid/padding/vert` | `float` | `0` |
+| `size/icon/base` | `float` | `32` |
+| `size/icon/compact` | `float` | `24` |
 | `size/tab/height` | `float` | `36` |
 
 ## tone

package/themes/base/desktop.scoped.css

@@ -147,6 +147,8 @@
   --size-grid-margin: 20px;
   --size-grid-padding-horz: 40px;
   --size-grid-padding-vert: 0px;
+  --size-icon-base: 32px;
+  --size-icon-compact: 24px;
   --size-tab-height: 36px;
   --tone-value1: 0px;
 }

package/themes/base/diagram.css

@@ -147,6 +147,8 @@
   --size-grid-margin: 20px;
   --size-grid-padding-horz: 40px;
   --size-grid-padding-vert: 0px;
+  --size-icon-base: 32px;
+  --size-icon-compact: 24px;
   --size-tab-height: 36px;
   --tone-value1: 0px;
 }

package/themes/base/diagram.md

@@ -182,6 +182,8 @@
 | `size/grid/margin` | `float` | `20` |
 | `size/grid/padding/horz` | `float` | `40` |
 | `size/grid/padding/vert` | `float` | `0` |
+| `size/icon/base` | `float` | `32` |
+| `size/icon/compact` | `float` | `24` |
 | `size/tab/height` | `float` | `36` |
 
 ## tone

package/themes/base/diagram.scoped.css

@@ -147,6 +147,8 @@
   --size-grid-margin: 20px;
   --size-grid-padding-horz: 40px;
   --size-grid-padding-vert: 0px;
+  --size-icon-base: 32px;
+  --size-icon-compact: 24px;
   --size-tab-height: 36px;
   --tone-value1: 0px;
 }

package/themes/base/mobile.css

@@ -147,6 +147,8 @@
   --size-grid-margin: 20px;
   --size-grid-padding-horz: 20px;
   --size-grid-padding-vert: 0px;
+  --size-icon-base: 32px;
+  --size-icon-compact: 24px;
   --size-tab-height: 36px;
   --tone-value1: 0px;
 }

package/themes/base/mobile.md

@@ -182,6 +182,8 @@
 | `size/grid/margin` | `float` | `20` |
 | `size/grid/padding/horz` | `float` | `20` |
 | `size/grid/padding/vert` | `float` | `0` |
+| `size/icon/base` | `float` | `32` |
+| `size/icon/compact` | `float` | `24` |
 | `size/tab/height` | `float` | `36` |
 
 ## tone

package/themes/base/mobile.scoped.css

@@ -147,6 +147,8 @@
   --size-grid-margin: 20px;
   --size-grid-padding-horz: 20px;
   --size-grid-padding-vert: 0px;
+  --size-icon-base: 32px;
+  --size-icon-compact: 24px;
   --size-tab-height: 36px;
   --tone-value1: 0px;
 }

package/themes/brandcopilot/desktop.css

@@ -147,6 +147,8 @@
   --size-grid-margin: 20px;
   --size-grid-padding-horz: 40px;
   --size-grid-padding-vert: 0px;
+  --size-icon-base: 32px;
+  --size-icon-compact: 24px;
   --size-tab-height: 36px;
   --tone-value1: 0px;
 }

package/themes/brandcopilot/desktop.md

@@ -182,6 +182,8 @@
 | `size/grid/margin` | `float` | `20` |
 | `size/grid/padding/horz` | `float` | `40` |
 | `size/grid/padding/vert` | `float` | `0` |
+| `size/icon/base` | `float` | `32` |
+| `size/icon/compact` | `float` | `24` |
 | `size/tab/height` | `float` | `36` |
 
 ## tone

package/themes/brandcopilot/desktop.scoped.css

@@ -147,6 +147,8 @@
   --size-grid-margin: 20px;
   --size-grid-padding-horz: 40px;
   --size-grid-padding-vert: 0px;
+  --size-icon-base: 32px;
+  --size-icon-compact: 24px;
   --size-tab-height: 36px;
   --tone-value1: 0px;
 }

package/themes/brandcopilot/diagram.css

@@ -147,6 +147,8 @@
   --size-grid-margin: 20px;
   --size-grid-padding-horz: 40px;
   --size-grid-padding-vert: 0px;
+  --size-icon-base: 32px;
+  --size-icon-compact: 24px;
   --size-tab-height: 36px;
   --tone-value1: 0px;
 }

package/themes/brandcopilot/diagram.md

@@ -182,6 +182,8 @@
 | `size/grid/margin` | `float` | `20` |
 | `size/grid/padding/horz` | `float` | `40` |
 | `size/grid/padding/vert` | `float` | `0` |
+| `size/icon/base` | `float` | `32` |
+| `size/icon/compact` | `float` | `24` |
 | `size/tab/height` | `float` | `36` |
 
 ## tone