@veracity/vui 3.0.0-beta.8 → 3.0.0

package/dist/avatar/avatar.js

@@ -1,4 +1,17 @@
-import{filterUndefined as e}from"../utils/object.js";import{cs as t}from"../utils/styles.js";import{omitThemingProps as n,useStyleConfig as r}from"../core/theme.js";import{styled as i}from"../core/styled.js";import{vui as a}from"../core/vui.js";import o from"../icon/icon.js";import s from"../image/image.js";import{loadImageUrl as c}from"../utils/images.js";import{defaultGetInitials as l}from"./helpers.js";import{useEffect as u,useState as d}from"react";import{Fragment as f,jsx as p}from"react/jsx-runtime";const m=i.spanBox`
+import { filterUndefined } from "../utils/object.js";
+import { cs } from "../utils/styles.js";
+import { omitThemingProps, useStyleConfig } from "../core/theme.js";
+import { styled } from "../core/styled.js";
+import { vui } from "../core/vui.js";
+import icon_default from "../icon/icon.js";
+import image_default from "../image/image.js";
+import { loadImageUrl } from "../utils/images.js";
+import { defaultGetInitials } from "./helpers.js";
+import { useEffect, useState } from "react";
+import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
+
+//#region src/avatar/avatar.tsx
+const AvatarBase = styled.spanBox`
   align-items: center;
   display: inline-flex;
   flex-shrink: 0;
@@ -18,5 +31,78 @@ import{filterUndefined as e}from"../utils/object.js";import{cs as t}from"../util
     cursor: not-allowed;
     user-select: none;
   }
-`,h=a((i,a)=>{let{children:s,className:c,disabled:u,getInitials:d=l,icon:f,isInteractive:h=i.onClick!==void 0,isSquare:_,name:v=``,src:y,...b}=n(i),{activeBg:x,h:S,hoverBg:C,iconSize:w,...T}=r(`Avatar`,i),E=_?i.size===`sm`?`3px`:`6px`:`50%`,D=d(v),O=!u&&h?{cursor:`pointer`,hoverBg:C,hoverOpacity:y?.85:1,activeOpacity:y?.7:1,activeBg:x,focusRing:3,tabIndex:0,userSelect:`none`}:{},k=e({borderRadius:E,"aria-disabled":u});return p(m,{borderRadius:E,className:t(`vui-avatar`,c),h:S,ref:a,w:S,...T,...O,...k,...b,children:s||(y?p(g,{borderRadius:E,icon:f,iconSize:w,initials:D,src:y}):f?p(o,{name:f,size:w}):D||p(o,{name:`uiUser`,size:w}))})});function g({src:e,borderRadius:t,icon:n,iconSize:r,initials:i}){let[a,l]=d(!1);return u(()=>{let t=!1;return c(e).then(e=>{t||l(e)}),()=>{t=!0}},[e]),a?p(s,{borderRadius:t,src:e}):n?p(o,{name:n,size:r}):i?p(f,{children:i}):p(o,{name:`uiUser`,size:r})}h.displayName=`Avatar`;var _=h;export{h as Avatar,m as AvatarBase,_ as default};globalThis.__vuiVersion__=`3.0.0-beta.8`;
+`;
+/** Displays user data, such as name initials or profile image. */
+const Avatar = vui((props, ref) => {
+	const { children, className, disabled, getInitials = defaultGetInitials, icon, isInteractive = props.onClick !== void 0, isSquare, name = "", src,...rest } = omitThemingProps(props);
+	const { activeBg, h, hoverBg, iconSize,...styles } = useStyleConfig("Avatar", props);
+	const borderRadius = isSquare ? props.size === "sm" ? "3px" : "6px" : "50%";
+	const initials = getInitials(name);
+	const interactiveProps = !disabled && isInteractive ? {
+		cursor: "pointer",
+		hoverBg,
+		hoverOpacity: src ? .85 : 1,
+		activeOpacity: src ? .7 : 1,
+		activeBg,
+		focusRing: 3,
+		tabIndex: 0,
+		userSelect: "none"
+	} : {};
+	const aliasedProps = filterUndefined({
+		borderRadius,
+		"aria-disabled": disabled
+	});
+	return /* @__PURE__ */ jsx(AvatarBase, {
+		borderRadius,
+		className: cs("vui-avatar", className),
+		h,
+		ref,
+		w: h,
+		...styles,
+		...interactiveProps,
+		...aliasedProps,
+		...rest,
+		children: children ? children : src ? /* @__PURE__ */ jsx(LazyImageOrDefault, {
+			borderRadius,
+			icon,
+			iconSize,
+			initials,
+			src
+		}) : icon ? /* @__PURE__ */ jsx(icon_default, {
+			name: icon,
+			size: iconSize
+		}) : initials ? initials : /* @__PURE__ */ jsx(icon_default, {
+			name: "uiUser",
+			size: iconSize
+		})
+	});
+});
+function LazyImageOrDefault({ src, borderRadius, icon, iconSize, initials }) {
+	const [imgLoaded, setImgLoaded] = useState(false);
+	useEffect(() => {
+		let cancelled = false;
+		loadImageUrl(src).then((res) => {
+			if (!cancelled) setImgLoaded(res);
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [src]);
+	return imgLoaded ? /* @__PURE__ */ jsx(image_default, {
+		borderRadius,
+		src
+	}) : icon ? /* @__PURE__ */ jsx(icon_default, {
+		name: icon,
+		size: iconSize
+	}) : initials ? /* @__PURE__ */ jsx(Fragment$1, { children: initials }) : /* @__PURE__ */ jsx(icon_default, {
+		name: "uiUser",
+		size: iconSize
+	});
+}
+Avatar.displayName = "Avatar";
+var avatar_default = Avatar;
+
+//#endregion
+export { Avatar, AvatarBase, avatar_default as default };
+globalThis.__vuiVersion__ = "3.0.0"
 //# sourceMappingURL=avatar.js.map

package/dist/avatar/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","names":["Icon","Image"],"sources":["../../src/avatar/avatar.tsx"],"sourcesContent":["import { useEffect, useState } from 'react'\n\nimport { omitThemingProps, styled, useStyleConfig, vui } from '../core'\nimport type { IconProp, IconProps } from '../icon'\nimport Icon from '../icon'\nimport Image from '../image'\nimport { cs, filterUndefined } from '../utils'\nimport { loadImageUrl } from '../utils/images'\nimport type { AvatarProps } from './avatar.types'\nimport { defaultGetInitials } from './helpers'\n\nexport const AvatarBase = styled.spanBox`\n  align-items: center;\n  display: inline-flex;\n  flex-shrink: 0;\n  font-weight: medium;\n  justify-content: center;\n  line-height: normal;\n  outline: none;\n  overflow: hidden;\n  transition-duration: fast;\n\n  &:focus {\n    border-color: transparent;\n  }\n\n  &[aria-disabled='true'] {\n    opacity: 0.5;\n    cursor: not-allowed;\n    user-select: none;\n  }\n`\n\n/** Displays user data, such as name initials or profile image. */\nexport const Avatar = vui<'span', AvatarProps>((props, ref) => {\n  const {\n    children,\n    className,\n    disabled,\n    getInitials = defaultGetInitials,\n    icon,\n    isInteractive = props.onClick !== undefined,\n    isSquare,\n    name = '',\n    src,\n    ...rest\n  } = omitThemingProps(props)\n  const { activeBg, h, hoverBg, iconSize, ...styles } = useStyleConfig('Avatar', props)\n\n  const borderRadius = isSquare ? (props.size === 'sm' ? '3px' : '6px') : '50%'\n  const initials = getInitials(name)\n\n  const interactiveProps =\n    !disabled && isInteractive\n      ? ({\n          cursor: 'pointer',\n          hoverBg,\n          hoverOpacity: src ? 0.85 : 1,\n          activeOpacity: src ? 0.7 : 1,\n          activeBg,\n          focusRing: 3,\n          tabIndex: 0,\n          userSelect: 'none',\n        } as const)\n      : {}\n\n  const aliasedProps = filterUndefined({\n    borderRadius: borderRadius,\n    'aria-disabled': disabled,\n  })\n\n  return (\n    <AvatarBase\n      borderRadius={borderRadius}\n      className={cs('vui-avatar', className)}\n      h={h}\n      ref={ref}\n      w={h}\n      {...styles}\n      {...interactiveProps}\n      {...aliasedProps}\n      {...rest}\n    >\n      {children ? (\n        children\n      ) : src ? (\n        <LazyImageOrDefault borderRadius={borderRadius} icon={icon} iconSize={iconSize} initials={initials} src={src} />\n      ) : icon ? (\n        <Icon name={icon} size={iconSize} />\n      ) : initials ? (\n        initials\n      ) : (\n        <Icon name=\"uiUser\" size={iconSize} />\n      )}\n    </AvatarBase>\n  )\n})\n\nfunction LazyImageOrDefault({\n  src,\n  borderRadius,\n  icon,\n  iconSize,\n  initials,\n}: {\n  src: string\n  borderRadius: string\n  icon: IconProp | undefined\n  iconSize: IconProps['size']\n  initials: string\n}) {\n  const [imgLoaded, setImgLoaded] = useState(false)\n  useEffect(() => {\n    let cancelled = false\n    loadImageUrl(src).then(res => {\n      if (!cancelled) setImgLoaded(res)\n    })\n    return () => {\n      cancelled = true\n    }\n  }, [src])\n\n  return imgLoaded ? (\n    <Image borderRadius={borderRadius} src={src} />\n  ) : icon ? (\n    <Icon name={icon} size={iconSize} />\n  ) : initials ? (\n    <>{initials}</>\n  ) : (\n    <Icon name=\"uiUser\" size={iconSize} />\n  )\n}\n\nAvatar.displayName = 'Avatar'\nexport default Avatar\n"],"mappings":"+fAWA,MAAa,EAAa,EAAO,OAAO;;;;;;;;;;;;;;;;;;;;EAuB3B,EAAS,GAA0B,EAAO,IAAQ,CAC7D,GAAM,CACJ,WACA,YACA,WACA,cAAc,EACd,OACA,gBAAgB,EAAM,UAAY,IAAA,GAClC,WACA,OAAO,GACP,MACA,GAAG,GACD,EAAiB,EAAM,CACrB,CAAE,WAAU,IAAG,UAAS,WAAU,GAAG,GAAW,EAAe,SAAU,EAAM,CAE/E,EAAe,EAAY,EAAM,OAAS,KAAO,MAAQ,MAAS,MAClE,EAAW,EAAY,EAAK,CAE5B,EACJ,CAAC,GAAY,EACR,CACC,OAAQ,UACR,UACA,aAAc,EAAM,IAAO,EAC3B,cAAe,EAAM,GAAM,EAC3B,WACA,UAAW,EACX,SAAU,EACV,WAAY,OACb,CACD,EAAE,CAEF,EAAe,EAAgB,CACrB,eACd,gBAAiB,EAClB,CAAC,CAEF,OACE,EAAC,EAAA,CACe,eACd,UAAW,EAAG,aAAc,EAAU,CACnC,IACE,MACL,EAAG,EACH,GAAI,EACJ,GAAI,EACJ,GAAI,EACJ,GAAI,WAEH,IAEG,EACF,EAAC,EAAA,CAAiC,eAAoB,OAAgB,WAAoB,WAAe,OAAO,CAC9G,EACF,EAACA,EAAAA,CAAK,KAAM,EAAM,KAAM,GAAY,CAClC,GAGF,EAACA,EAAAA,CAAK,KAAK,SAAS,KAAM,GAAY,GAE7B,EAEf,CAEF,SAAS,EAAmB,CAC1B,MACA,eACA,OACA,WACA,YAOC,CACD,GAAM,CAAC,EAAW,GAAgB,EAAS,GAAM,CAWjD,OAVA,MAAgB,CACd,IAAI,EAAY,GAIhB,OAHA,EAAa,EAAI,CAAC,KAAK,GAAO,CACvB,GAAW,EAAa,EAAI,EACjC,KACW,CACX,EAAY,KAEb,CAAC,EAAI,CAAC,CAEF,EACL,EAACC,EAAAA,CAAoB,eAAmB,OAAO,CAC7C,EACF,EAACD,EAAAA,CAAK,KAAM,EAAM,KAAM,GAAY,CAClC,EACF,EAAA,EAAA,CAAA,SAAG,EAAA,CAAY,CAEf,EAACA,EAAAA,CAAK,KAAK,SAAS,KAAM,GAAY,CAI1C,EAAO,YAAc,SACrB,IAAA,EAAe"}
+{"version":3,"file":"avatar.js","names":["Icon","Image"],"sources":["../../src/avatar/avatar.tsx"],"sourcesContent":["import { useEffect, useState } from 'react'\n\nimport { omitThemingProps, styled, useStyleConfig, vui } from '../core'\nimport type { IconProp, IconProps } from '../icon'\nimport Icon from '../icon'\nimport Image from '../image'\nimport { cs, filterUndefined } from '../utils'\nimport { loadImageUrl } from '../utils/images'\nimport type { AvatarProps } from './avatar.types'\nimport { defaultGetInitials } from './helpers'\n\nexport const AvatarBase = styled.spanBox`\n  align-items: center;\n  display: inline-flex;\n  flex-shrink: 0;\n  font-weight: medium;\n  justify-content: center;\n  line-height: normal;\n  outline: none;\n  overflow: hidden;\n  transition-duration: fast;\n\n  &:focus {\n    border-color: transparent;\n  }\n\n  &[aria-disabled='true'] {\n    opacity: 0.5;\n    cursor: not-allowed;\n    user-select: none;\n  }\n`\n\n/** Displays user data, such as name initials or profile image. */\nexport const Avatar = vui<'span', AvatarProps>((props, ref) => {\n  const {\n    children,\n    className,\n    disabled,\n    getInitials = defaultGetInitials,\n    icon,\n    isInteractive = props.onClick !== undefined,\n    isSquare,\n    name = '',\n    src,\n    ...rest\n  } = omitThemingProps(props)\n  const { activeBg, h, hoverBg, iconSize, ...styles } = useStyleConfig('Avatar', props)\n\n  const borderRadius = isSquare ? (props.size === 'sm' ? '3px' : '6px') : '50%'\n  const initials = getInitials(name)\n\n  const interactiveProps =\n    !disabled && isInteractive\n      ? ({\n          cursor: 'pointer',\n          hoverBg,\n          hoverOpacity: src ? 0.85 : 1,\n          activeOpacity: src ? 0.7 : 1,\n          activeBg,\n          focusRing: 3,\n          tabIndex: 0,\n          userSelect: 'none',\n        } as const)\n      : {}\n\n  const aliasedProps = filterUndefined({\n    borderRadius: borderRadius,\n    'aria-disabled': disabled,\n  })\n\n  return (\n    <AvatarBase\n      borderRadius={borderRadius}\n      className={cs('vui-avatar', className)}\n      h={h}\n      ref={ref}\n      w={h}\n      {...styles}\n      {...interactiveProps}\n      {...aliasedProps}\n      {...rest}\n    >\n      {children ? (\n        children\n      ) : src ? (\n        <LazyImageOrDefault borderRadius={borderRadius} icon={icon} iconSize={iconSize} initials={initials} src={src} />\n      ) : icon ? (\n        <Icon name={icon} size={iconSize} />\n      ) : initials ? (\n        initials\n      ) : (\n        <Icon name=\"uiUser\" size={iconSize} />\n      )}\n    </AvatarBase>\n  )\n})\n\nfunction LazyImageOrDefault({\n  src,\n  borderRadius,\n  icon,\n  iconSize,\n  initials,\n}: {\n  src: string\n  borderRadius: string\n  icon: IconProp | undefined\n  iconSize: IconProps['size']\n  initials: string\n}) {\n  const [imgLoaded, setImgLoaded] = useState(false)\n  useEffect(() => {\n    let cancelled = false\n    loadImageUrl(src).then(res => {\n      if (!cancelled) setImgLoaded(res)\n    })\n    return () => {\n      cancelled = true\n    }\n  }, [src])\n\n  return imgLoaded ? (\n    <Image borderRadius={borderRadius} src={src} />\n  ) : icon ? (\n    <Icon name={icon} size={iconSize} />\n  ) : initials ? (\n    <>{initials}</>\n  ) : (\n    <Icon name=\"uiUser\" size={iconSize} />\n  )\n}\n\nAvatar.displayName = 'Avatar'\nexport default Avatar\n"],"mappings":";;;;;;;;;;;;;AAWA,MAAa,aAAa,OAAO,OAAO;;;;;;;;;;;;;;;;;;;;;;AAuBxC,MAAa,SAAS,KAA0B,OAAO,QAAQ;CAC7D,MAAM,EACJ,UACA,WACA,UACA,cAAc,oBACd,MACA,gBAAgB,MAAM,YAAY,QAClC,UACA,OAAO,IACP,IACA,GAAG,SACD,iBAAiB,MAAM;CAC3B,MAAM,EAAE,UAAU,GAAG,SAAS,SAAU,GAAG,WAAW,eAAe,UAAU,MAAM;CAErF,MAAM,eAAe,WAAY,MAAM,SAAS,OAAO,QAAQ,QAAS;CACxE,MAAM,WAAW,YAAY,KAAK;CAElC,MAAM,mBACJ,CAAC,YAAY,gBACR;EACC,QAAQ;EACR;EACA,cAAc,MAAM,MAAO;EAC3B,eAAe,MAAM,KAAM;EAC3B;EACA,WAAW;EACX,UAAU;EACV,YAAY;EACb,GACD,EAAE;CAER,MAAM,eAAe,gBAAgB;EACrB;EACd,iBAAiB;EAClB,CAAC;AAEF,QACE,oBAAC;EACe;EACd,WAAW,GAAG,cAAc,UAAU;EACnC;EACE;EACL,GAAG;EACH,GAAI;EACJ,GAAI;EACJ,GAAI;EACJ,GAAI;YAEH,WACC,WACE,MACF,oBAAC;GAAiC;GAAoB;GAAgB;GAAoB;GAAe;IAAO,GAC9G,OACF,oBAACA;GAAK,MAAM;GAAM,MAAM;IAAY,GAClC,WACF,WAEA,oBAACA;GAAK,MAAK;GAAS,MAAM;IAAY;GAE7B;EAEf;AAEF,SAAS,mBAAmB,EAC1B,KACA,cACA,MACA,UACA,YAOC;CACD,MAAM,CAAC,WAAW,gBAAgB,SAAS,MAAM;AACjD,iBAAgB;EACd,IAAI,YAAY;AAChB,eAAa,IAAI,CAAC,MAAK,QAAO;AAC5B,OAAI,CAAC,UAAW,cAAa,IAAI;IACjC;AACF,eAAa;AACX,eAAY;;IAEb,CAAC,IAAI,CAAC;AAET,QAAO,YACL,oBAACC;EAAoB;EAAmB;GAAO,GAC7C,OACF,oBAACD;EAAK,MAAM;EAAM,MAAM;GAAY,GAClC,WACF,4CAAG,WAAY,GAEf,oBAACA;EAAK,MAAK;EAAS,MAAM;GAAY;;AAI1C,OAAO,cAAc;AACrB,qBAAe"}

package/dist/avatar/avatar.types.d.ts

@@ -1,6 +1,8 @@
 import { ThemingProps } from "../theme/types.js";
 import { SystemProps } from "../system/system.js";
+import "../system/index.js";
 import { IconProp } from "../icon/icon.types.js";
+import "../icon/index.js";
 
 //#region src/avatar/avatar.types.d.ts
 type AvatarProps = SystemProps & ThemingProps<'Avatar'> & {

package/dist/avatar/avatar.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.types.d.ts","names":[],"sources":["../../src/avatar/avatar.types.ts"],"sourcesContent":[],"mappings":";;;;;KAIY,WAAA,CAAA,CAAA,CAAc,cACxB;;EADU,WAAA,CAAA,CAAA,CAAW,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,QAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA;EAAA,CAAA,CAAA,CAAA,CAAA,QAAA,CAAA,MAAA,CAAA,EAAA,CAAA,QAAA,CAAA,KAAA,CAAA,IAAA,CAAA,WAAA,CAAA,OAAA,CAAA,CAAA,CAAA;UAAG,CAAA,CAAA,CAAA,OAAA;;aASf,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA,CAAA,MAAA,CAAA,CAAA,CAAA,CAAA,CAAA,MAAA;EAAQ,CAAA,CAAA,CAAA,CAAA,OAAA,CAAA,EAAA,CAAA,IAAA,CAAA,EAAA,CAAA,GAAA,CAAA,IAAA,CAAA,OAAA,CAAA,CAAA,CAAA;SAAR"}
+{"version":3,"file":"avatar.types.d.ts","names":[],"sources":["../../src/avatar/avatar.types.ts"],"sourcesContent":[],"mappings":";;;;;;;KAIY,WAAA,CAAA,CAAA,CAAc,cACxB;;;;EADU,QAAA,CAAA,CAAA,CAAA,OAAW;EAAG,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,QAAA,CAAA,EAAA,CAAA,OAAA,CAAA,QAAA,CAAA,KAAA,CAAA,EAAA,CAAA,GAAA,CAAA,QAAA,CAAA,IAAA,CAAA,CAAA,CAAA;EACxB,WAAA,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA,CAAA,MAAA,CAAA,CAAA,CAAA,CAAA,CAAA,MAAA;EAQS,CAAA,CAAA,CAAA,CAAA,OAAA,CAAA,EAAA,CAAA,IAAA,CAAA,EAAA,CAAA,GAAA,CAAA,IAAA,CAAA,OAAA,CAAA,CAAA,CAAA;EAAQ,IAAA,CAAA,CAAA,CAAR,QAAQ"}

package/dist/avatar/helpers.js

@@ -1,2 +1,11 @@
-function e(e=``){let[t=``,n=``]=e.split(` `);return`${t.charAt(0)}${n.charAt(0)}`.toUpperCase()}export{e as defaultGetInitials};globalThis.__vuiVersion__=`3.0.0-beta.8`;
+//#region src/avatar/helpers.ts
+/** Gets initials from the name for the Avatar. */
+function defaultGetInitials(name = "") {
+	const [first = "", last = ""] = name.split(" ");
+	return `${first.charAt(0)}${last.charAt(0)}`.toUpperCase();
+}
+
+//#endregion
+export { defaultGetInitials };
+globalThis.__vuiVersion__ = "3.0.0"
 //# sourceMappingURL=helpers.js.map

package/dist/avatar/helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.js","names":[],"sources":["../../src/avatar/helpers.ts"],"sourcesContent":["/** Gets initials from the name for the Avatar. */\nexport function defaultGetInitials(name = '') {\n  const [first = '', last = ''] = name.split(' ')\n\n  return `${first.charAt(0)}${last.charAt(0)}`.toUpperCase()\n}\n"],"mappings":"AACA,SAAgB,EAAmB,EAAO,GAAI,CAC5C,GAAM,CAAC,EAAQ,GAAI,EAAO,IAAM,EAAK,MAAM,IAAI,CAE/C,MAAO,GAAG,EAAM,OAAO,EAAE,GAAG,EAAK,OAAO,EAAE,GAAG,aAAa"}
+{"version":3,"file":"helpers.js","names":[],"sources":["../../src/avatar/helpers.ts"],"sourcesContent":["/** Gets initials from the name for the Avatar. */\nexport function defaultGetInitials(name = '') {\n  const [first = '', last = ''] = name.split(' ')\n\n  return `${first.charAt(0)}${last.charAt(0)}`.toUpperCase()\n}\n"],"mappings":";;AACA,SAAgB,mBAAmB,OAAO,IAAI;CAC5C,MAAM,CAAC,QAAQ,IAAI,OAAO,MAAM,KAAK,MAAM,IAAI;AAE/C,QAAO,GAAG,MAAM,OAAO,EAAE,GAAG,KAAK,OAAO,EAAE,GAAG,aAAa"}

package/dist/avatar/index.d.ts

@@ -0,0 +1,2 @@
+import { AvatarProps } from "./avatar.types.js";
+import { Avatar, AvatarBase } from "./avatar.js";

package/dist/avatar/theme.js

@@ -1,2 +1,170 @@
-var e={baseStyle:{},defaultProps:{size:`md`,variant:`subtleGrey`,fontWeight:`medium`},sizes:{sm:{fontSize:`xs`,h:24,iconSize:`xs`},md:{fontSize:`sm`,h:32,iconSize:`sm`},lg:{fontSize:`md`,h:40,iconSize:`md`},xl:{fontSize:`lg`,h:48,iconSize:`xl`},xxl:{fontSize:`lg`,h:56,iconSize:`xxl`}},variants:{subtleGrey:{bg:`sandstone.90`,hoverBg:`sandstone.85`,borderColor:`sandstone.90`,color:`sandstone.20`,activeBg:`sandstone.79`},subtleBlue:{bg:`skyBlue.95`,hoverBg:`skyBlue.hover`,activeBg:`skyBlue.85`,borderColor:`skyBlue.95`,color:`seaBlue.main`},subtleRed:{bg:`energyRed.95`,borderColor:`energyRed.95`,hoverBg:`energyRed.90`,activeBg:`energyRed.85`,color:`energyRed.45`},subtleYellow:{bg:`sunflower.85`,hoverBg:`sunflower.70`,activeBg:`sunflower.65`,borderColor:`sunflower.85`,color:`sunflower.20`},subtleGreen:{bg:`landGreen.95`,hoverBg:`landGreen.90`,borderColor:`landGreen.95`,color:`landGreen.30`,activeBg:`landGreen.85`},subtleLavender:{bg:`hsl(232, 58%, 90%)`,hoverBg:`hsl(232, 58%, 85%)`,borderColor:`hsl(232, 58%, 90%)`,color:`hsl(232, 58%, 50%)`,activeBg:`hsl(232, 58%, 80%)`},subtleEucalyptus:{bg:`hsl(178, 80%, 85%)`,hoverBg:`hsl(178, 80%, 80%)`,borderColor:`hsl(178, 80%, 85%)`,color:`hsl(178, 80%, 20%)`,activeBg:`hsl(178, 80%, 75%)`},subtleTerracotta:{bg:`hsl(34, 100%, 85%)`,hoverBg:`hsl(34, 100%, 80%)`,borderColor:`hsl(34, 100%, 85%)`,color:`hsl(34, 100%, 20%)`,activeBg:`hsl(34, 100%, 75%)`},solidBlue:{bg:`seaBlue.main`,hoverBg:`seaBlue.35`,activeBg:`seaBlue.40`,borderColor:`seaBlue.main`,color:`white`},solidDarkBlue:{bg:`darkBlue.18`,hoverBg:`darkBlue.25`,activeBg:`darkBlue.35`,borderColor:`darkBlue.18`,color:`white`},solidRed:{bg:`energyRed.45`,hoverBg:`energyRed.54`,activeBg:`energyRed.60`,borderColor:`energyRed.45`,color:`white`},solidYellow:{bg:`sunflower.50`,hoverBg:`sunflower.80`,activeBg:`sunflower.85`,borderColor:`sunflower.50`,color:`sunflower.15`},solidGreen:{bg:`landGreen.35`,hoverBg:`landGreen.41`,activeBg:`landGreen.45`,borderColor:`landGreen.35`,color:`white`},solidLavender:{bg:`hsl(232, 58%, 60%)`,hoverBg:`hsl(232, 58%, 65%)`,borderColor:`hsl(232, 58%, 60%)`,color:`white`,activeBg:`hsl(232, 58%, 70%)`},solidEucalyptus:{bg:`hsl(178, 80%, 25%)`,hoverBg:`hsl(178, 80%, 35%)`,borderColor:`hsl(178, 80%, 25%)`,color:`white`,activeBg:`hsl(178, 80%, 42%)`},solidTerracotta:{bg:`hsl(34, 100%, 30%)`,hoverBg:`hsl(34, 100%, 40%)`,borderColor:`hsl(34, 100%, 35%)`,color:`white`,activeBg:`hsl(34, 100%, 45%)`},primaryLight:{bg:`buttonTypePrimaryDefaultBackgroundColorLight`,borderColor:`buttonTypePrimaryDefaultBorderColorLight`,color:`buttonTypePrimaryDefaultTextColorLight`,hoverBg:`buttonTypePrimaryHoverBackgroundColorLight`,hoverBorderColor:`buttonTypePrimaryHoverBorderColorLight`,hoverColor:`buttonTypePrimaryHoverTextColorLight`,activeBg:`buttonTypePrimaryActiveBackgroundColorLight`,activeBorderColor:`buttonTypePrimaryActiveBorderColorLight`,activeColor:`buttonTypePrimaryActiveTextColorLight`}}};export{e as default};globalThis.__vuiVersion__=`3.0.0-beta.8`;
+//#region src/avatar/theme.ts
+const baseStyle = {};
+const defaultProps = {
+	size: "md",
+	variant: "subtleGrey",
+	fontWeight: "medium"
+};
+const sizes = {
+	sm: {
+		fontSize: "xs",
+		h: 24,
+		iconSize: "xs"
+	},
+	md: {
+		fontSize: "sm",
+		h: 32,
+		iconSize: "sm"
+	},
+	lg: {
+		fontSize: "md",
+		h: 40,
+		iconSize: "md"
+	},
+	xl: {
+		fontSize: "lg",
+		h: 48,
+		iconSize: "xl"
+	},
+	xxl: {
+		fontSize: "lg",
+		h: 56,
+		iconSize: "xxl"
+	}
+};
+const variants = {
+	subtleGrey: {
+		bg: "sandstone.90",
+		hoverBg: "sandstone.85",
+		borderColor: "sandstone.90",
+		color: "sandstone.20",
+		activeBg: "sandstone.79"
+	},
+	subtleBlue: {
+		bg: "skyBlue.95",
+		hoverBg: "skyBlue.hover",
+		activeBg: "skyBlue.85",
+		borderColor: "skyBlue.95",
+		color: "seaBlue.main"
+	},
+	subtleRed: {
+		bg: "energyRed.95",
+		borderColor: "energyRed.95",
+		hoverBg: "energyRed.90",
+		activeBg: "energyRed.85",
+		color: "energyRed.45"
+	},
+	subtleYellow: {
+		bg: "sunflower.85",
+		hoverBg: "sunflower.70",
+		activeBg: "sunflower.65",
+		borderColor: "sunflower.85",
+		color: "sunflower.20"
+	},
+	subtleGreen: {
+		bg: "landGreen.95",
+		hoverBg: "landGreen.90",
+		borderColor: "landGreen.95",
+		color: "landGreen.30",
+		activeBg: "landGreen.85"
+	},
+	subtleLavender: {
+		bg: "hsl(232, 58%, 90%)",
+		hoverBg: "hsl(232, 58%, 85%)",
+		borderColor: "hsl(232, 58%, 90%)",
+		color: "hsl(232, 58%, 50%)",
+		activeBg: "hsl(232, 58%, 80%)"
+	},
+	subtleEucalyptus: {
+		bg: "hsl(178, 80%, 85%)",
+		hoverBg: "hsl(178, 80%, 80%)",
+		borderColor: "hsl(178, 80%, 85%)",
+		color: "hsl(178, 80%, 20%)",
+		activeBg: "hsl(178, 80%, 75%)"
+	},
+	subtleTerracotta: {
+		bg: "hsl(34, 100%, 85%)",
+		hoverBg: "hsl(34, 100%, 80%)",
+		borderColor: "hsl(34, 100%, 85%)",
+		color: "hsl(34, 100%, 20%)",
+		activeBg: "hsl(34, 100%, 75%)"
+	},
+	solidBlue: {
+		bg: "seaBlue.main",
+		hoverBg: "seaBlue.35",
+		activeBg: "seaBlue.40",
+		borderColor: "seaBlue.main",
+		color: "white"
+	},
+	solidDarkBlue: {
+		bg: "darkBlue.18",
+		hoverBg: "darkBlue.25",
+		activeBg: "darkBlue.35",
+		borderColor: "darkBlue.18",
+		color: "white"
+	},
+	solidRed: {
+		bg: "energyRed.45",
+		hoverBg: "energyRed.54",
+		activeBg: "energyRed.60",
+		borderColor: "energyRed.45",
+		color: "white"
+	},
+	solidYellow: {
+		bg: "sunflower.50",
+		hoverBg: "sunflower.80",
+		activeBg: "sunflower.85",
+		borderColor: "sunflower.50",
+		color: "sunflower.15"
+	},
+	solidGreen: {
+		bg: "landGreen.35",
+		hoverBg: "landGreen.41",
+		activeBg: "landGreen.45",
+		borderColor: "landGreen.35",
+		color: "white"
+	},
+	solidLavender: {
+		bg: "hsl(232, 58%, 60%)",
+		hoverBg: "hsl(232, 58%, 65%)",
+		borderColor: "hsl(232, 58%, 60%)",
+		color: "white",
+		activeBg: "hsl(232, 58%, 70%)"
+	},
+	solidEucalyptus: {
+		bg: "hsl(178, 80%, 25%)",
+		hoverBg: "hsl(178, 80%, 35%)",
+		borderColor: "hsl(178, 80%, 25%)",
+		color: "white",
+		activeBg: "hsl(178, 80%, 42%)"
+	},
+	solidTerracotta: {
+		bg: "hsl(34, 100%, 30%)",
+		hoverBg: "hsl(34, 100%, 40%)",
+		borderColor: "hsl(34, 100%, 35%)",
+		color: "white",
+		activeBg: "hsl(34, 100%, 45%)"
+	},
+	primaryLight: {
+		bg: "buttonTypePrimaryDefaultBackgroundColorLight",
+		borderColor: "buttonTypePrimaryDefaultBorderColorLight",
+		color: "buttonTypePrimaryDefaultTextColorLight",
+		hoverBg: "buttonTypePrimaryHoverBackgroundColorLight",
+		hoverBorderColor: "buttonTypePrimaryHoverBorderColorLight",
+		hoverColor: "buttonTypePrimaryHoverTextColorLight",
+		activeBg: "buttonTypePrimaryActiveBackgroundColorLight",
+		activeBorderColor: "buttonTypePrimaryActiveBorderColorLight",
+		activeColor: "buttonTypePrimaryActiveTextColorLight"
+	}
+};
+var theme_default = {
+	baseStyle,
+	defaultProps,
+	sizes,
+	variants
+};
+
+//#endregion
+export { theme_default as default };
+globalThis.__vuiVersion__ = "3.0.0"
 //# sourceMappingURL=theme.js.map

package/dist/avatar/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","names":[],"sources":["../../src/avatar/theme.ts"],"sourcesContent":["const baseStyle = {}\n\nconst defaultProps = {\n  size: 'md',\n  variant: 'subtleGrey',\n  fontWeight: 'medium',\n}\n\nconst sizes = {\n  sm: {\n    fontSize: 'xs',\n    h: 24,\n    iconSize: 'xs',\n  },\n  md: {\n    fontSize: 'sm',\n    h: 32,\n    iconSize: 'sm',\n  },\n  lg: {\n    fontSize: 'md',\n    h: 40,\n    iconSize: 'md',\n  },\n  xl: {\n    fontSize: 'lg',\n    h: 48,\n    iconSize: 'xl',\n  },\n  xxl: {\n    fontSize: 'lg',\n    h: 56,\n    iconSize: 'xxl',\n  },\n}\n\nconst variants = {\n  subtleGrey: {\n    bg: 'sandstone.90',\n    hoverBg: 'sandstone.85',\n    borderColor: 'sandstone.90',\n    color: 'sandstone.20',\n    activeBg: 'sandstone.79',\n  },\n  subtleBlue: {\n    bg: 'skyBlue.95',\n    hoverBg: 'skyBlue.hover',\n    activeBg: 'skyBlue.85',\n    borderColor: 'skyBlue.95',\n    color: 'seaBlue.main',\n  },\n  subtleRed: {\n    bg: 'energyRed.95',\n    borderColor: 'energyRed.95',\n    hoverBg: 'energyRed.90',\n    activeBg: 'energyRed.85',\n    color: 'energyRed.45',\n  },\n  subtleYellow: {\n    bg: 'sunflower.85',\n    hoverBg: 'sunflower.70',\n    activeBg: 'sunflower.65',\n    borderColor: 'sunflower.85',\n    color: 'sunflower.20',\n  },\n  subtleGreen: {\n    bg: 'landGreen.95',\n    hoverBg: 'landGreen.90',\n    borderColor: 'landGreen.95',\n    color: 'landGreen.30',\n    activeBg: 'landGreen.85',\n  },\n  subtleLavender: {\n    bg: 'hsl(232, 58%, 90%)',\n    hoverBg: 'hsl(232, 58%, 85%)',\n    borderColor: 'hsl(232, 58%, 90%)',\n    color: 'hsl(232, 58%, 50%)',\n    activeBg: 'hsl(232, 58%, 80%)',\n  },\n  subtleEucalyptus: {\n    bg: 'hsl(178, 80%, 85%)',\n    hoverBg: 'hsl(178, 80%, 80%)',\n    borderColor: 'hsl(178, 80%, 85%)',\n    color: 'hsl(178, 80%, 20%)',\n    activeBg: 'hsl(178, 80%, 75%)',\n  },\n  subtleTerracotta: {\n    bg: 'hsl(34, 100%, 85%)',\n    hoverBg: 'hsl(34, 100%, 80%)',\n    borderColor: 'hsl(34, 100%, 85%)',\n    color: 'hsl(34, 100%, 20%)',\n    activeBg: 'hsl(34, 100%, 75%)',\n  },\n\n  /** solids next */\n  solidBlue: {\n    bg: 'seaBlue.main',\n    hoverBg: 'seaBlue.35',\n    activeBg: 'seaBlue.40',\n    borderColor: 'seaBlue.main',\n    color: 'white',\n  },\n  solidDarkBlue: {\n    bg: 'darkBlue.18',\n    hoverBg: 'darkBlue.25',\n    activeBg: 'darkBlue.35',\n    borderColor: 'darkBlue.18',\n    color: 'white',\n  },\n  solidRed: {\n    bg: 'energyRed.45',\n    hoverBg: 'energyRed.54',\n    activeBg: 'energyRed.60',\n    borderColor: 'energyRed.45',\n    color: 'white',\n  },\n  solidYellow: {\n    bg: 'sunflower.50',\n    hoverBg: 'sunflower.80',\n    activeBg: 'sunflower.85',\n    borderColor: 'sunflower.50',\n    color: 'sunflower.15',\n  },\n  solidGreen: {\n    bg: 'landGreen.35',\n    hoverBg: 'landGreen.41',\n    activeBg: 'landGreen.45',\n    borderColor: 'landGreen.35',\n    color: 'white',\n  },\n  solidLavender: {\n    bg: 'hsl(232, 58%, 60%)',\n    hoverBg: 'hsl(232, 58%, 65%)',\n    borderColor: 'hsl(232, 58%, 60%)',\n    color: 'white',\n    activeBg: 'hsl(232, 58%, 70%)',\n  },\n  solidEucalyptus: {\n    bg: 'hsl(178, 80%, 25%)',\n    hoverBg: 'hsl(178, 80%, 35%)',\n    borderColor: 'hsl(178, 80%, 25%)',\n    color: 'white',\n    activeBg: 'hsl(178, 80%, 42%)',\n  },\n  solidTerracotta: {\n    bg: 'hsl(34, 100%, 30%)',\n    hoverBg: 'hsl(34, 100%, 40%)',\n    borderColor: 'hsl(34, 100%, 35%)',\n    color: 'white',\n    activeBg: 'hsl(34, 100%, 45%)',\n  },\n  /** internal, used in *header* next */\n  primaryLight: {\n    bg: 'buttonTypePrimaryDefaultBackgroundColorLight',\n    borderColor: 'buttonTypePrimaryDefaultBorderColorLight',\n    color: 'buttonTypePrimaryDefaultTextColorLight',\n    hoverBg: 'buttonTypePrimaryHoverBackgroundColorLight',\n    hoverBorderColor: 'buttonTypePrimaryHoverBorderColorLight',\n    hoverColor: 'buttonTypePrimaryHoverTextColorLight',\n    activeBg: 'buttonTypePrimaryActiveBackgroundColorLight',\n    activeBorderColor: 'buttonTypePrimaryActiveBorderColorLight',\n    activeColor: 'buttonTypePrimaryActiveTextColorLight',\n  },\n}\n\nexport default {\n  baseStyle,\n  defaultProps,\n  sizes,\n  variants,\n}\n"],"mappings":"AAqKA,IAAA,EAAe,CACb,UAtKgB,EAAE,CAuKlB,aArKmB,CACnB,KAAM,KACN,QAAS,aACT,WAAY,SACb,CAkKC,MAhKY,CACZ,GAAI,CACF,SAAU,KACV,EAAG,GACH,SAAU,KACX,CACD,GAAI,CACF,SAAU,KACV,EAAG,GACH,SAAU,KACX,CACD,GAAI,CACF,SAAU,KACV,EAAG,GACH,SAAU,KACX,CACD,GAAI,CACF,SAAU,KACV,EAAG,GACH,SAAU,KACX,CACD,IAAK,CACH,SAAU,KACV,EAAG,GACH,SAAU,MACX,CACF,CAuIC,SArIe,CACf,WAAY,CACV,GAAI,eACJ,QAAS,eACT,YAAa,eACb,MAAO,eACP,SAAU,eACX,CACD,WAAY,CACV,GAAI,aACJ,QAAS,gBACT,SAAU,aACV,YAAa,aACb,MAAO,eACR,CACD,UAAW,CACT,GAAI,eACJ,YAAa,eACb,QAAS,eACT,SAAU,eACV,MAAO,eACR,CACD,aAAc,CACZ,GAAI,eACJ,QAAS,eACT,SAAU,eACV,YAAa,eACb,MAAO,eACR,CACD,YAAa,CACX,GAAI,eACJ,QAAS,eACT,YAAa,eACb,MAAO,eACP,SAAU,eACX,CACD,eAAgB,CACd,GAAI,qBACJ,QAAS,qBACT,YAAa,qBACb,MAAO,qBACP,SAAU,qBACX,CACD,iBAAkB,CAChB,GAAI,qBACJ,QAAS,qBACT,YAAa,qBACb,MAAO,qBACP,SAAU,qBACX,CACD,iBAAkB,CAChB,GAAI,qBACJ,QAAS,qBACT,YAAa,qBACb,MAAO,qBACP,SAAU,qBACX,CAGD,UAAW,CACT,GAAI,eACJ,QAAS,aACT,SAAU,aACV,YAAa,eACb,MAAO,QACR,CACD,cAAe,CACb,GAAI,cACJ,QAAS,cACT,SAAU,cACV,YAAa,cACb,MAAO,QACR,CACD,SAAU,CACR,GAAI,eACJ,QAAS,eACT,SAAU,eACV,YAAa,eACb,MAAO,QACR,CACD,YAAa,CACX,GAAI,eACJ,QAAS,eACT,SAAU,eACV,YAAa,eACb,MAAO,eACR,CACD,WAAY,CACV,GAAI,eACJ,QAAS,eACT,SAAU,eACV,YAAa,eACb,MAAO,QACR,CACD,cAAe,CACb,GAAI,qBACJ,QAAS,qBACT,YAAa,qBACb,MAAO,QACP,SAAU,qBACX,CACD,gBAAiB,CACf,GAAI,qBACJ,QAAS,qBACT,YAAa,qBACb,MAAO,QACP,SAAU,qBACX,CACD,gBAAiB,CACf,GAAI,qBACJ,QAAS,qBACT,YAAa,qBACb,MAAO,QACP,SAAU,qBACX,CAED,aAAc,CACZ,GAAI,+CACJ,YAAa,2CACb,MAAO,yCACP,QAAS,6CACT,iBAAkB,yCAClB,WAAY,uCACZ,SAAU,8CACV,kBAAmB,0CACnB,YAAa,wCACd,CACF,CAOA"}
+{"version":3,"file":"theme.js","names":[],"sources":["../../src/avatar/theme.ts"],"sourcesContent":["const baseStyle = {}\n\nconst defaultProps = {\n  size: 'md',\n  variant: 'subtleGrey',\n  fontWeight: 'medium',\n}\n\nconst sizes = {\n  sm: {\n    fontSize: 'xs',\n    h: 24,\n    iconSize: 'xs',\n  },\n  md: {\n    fontSize: 'sm',\n    h: 32,\n    iconSize: 'sm',\n  },\n  lg: {\n    fontSize: 'md',\n    h: 40,\n    iconSize: 'md',\n  },\n  xl: {\n    fontSize: 'lg',\n    h: 48,\n    iconSize: 'xl',\n  },\n  xxl: {\n    fontSize: 'lg',\n    h: 56,\n    iconSize: 'xxl',\n  },\n}\n\nconst variants = {\n  subtleGrey: {\n    bg: 'sandstone.90',\n    hoverBg: 'sandstone.85',\n    borderColor: 'sandstone.90',\n    color: 'sandstone.20',\n    activeBg: 'sandstone.79',\n  },\n  subtleBlue: {\n    bg: 'skyBlue.95',\n    hoverBg: 'skyBlue.hover',\n    activeBg: 'skyBlue.85',\n    borderColor: 'skyBlue.95',\n    color: 'seaBlue.main',\n  },\n  subtleRed: {\n    bg: 'energyRed.95',\n    borderColor: 'energyRed.95',\n    hoverBg: 'energyRed.90',\n    activeBg: 'energyRed.85',\n    color: 'energyRed.45',\n  },\n  subtleYellow: {\n    bg: 'sunflower.85',\n    hoverBg: 'sunflower.70',\n    activeBg: 'sunflower.65',\n    borderColor: 'sunflower.85',\n    color: 'sunflower.20',\n  },\n  subtleGreen: {\n    bg: 'landGreen.95',\n    hoverBg: 'landGreen.90',\n    borderColor: 'landGreen.95',\n    color: 'landGreen.30',\n    activeBg: 'landGreen.85',\n  },\n  subtleLavender: {\n    bg: 'hsl(232, 58%, 90%)',\n    hoverBg: 'hsl(232, 58%, 85%)',\n    borderColor: 'hsl(232, 58%, 90%)',\n    color: 'hsl(232, 58%, 50%)',\n    activeBg: 'hsl(232, 58%, 80%)',\n  },\n  subtleEucalyptus: {\n    bg: 'hsl(178, 80%, 85%)',\n    hoverBg: 'hsl(178, 80%, 80%)',\n    borderColor: 'hsl(178, 80%, 85%)',\n    color: 'hsl(178, 80%, 20%)',\n    activeBg: 'hsl(178, 80%, 75%)',\n  },\n  subtleTerracotta: {\n    bg: 'hsl(34, 100%, 85%)',\n    hoverBg: 'hsl(34, 100%, 80%)',\n    borderColor: 'hsl(34, 100%, 85%)',\n    color: 'hsl(34, 100%, 20%)',\n    activeBg: 'hsl(34, 100%, 75%)',\n  },\n\n  /** solids next */\n  solidBlue: {\n    bg: 'seaBlue.main',\n    hoverBg: 'seaBlue.35',\n    activeBg: 'seaBlue.40',\n    borderColor: 'seaBlue.main',\n    color: 'white',\n  },\n  solidDarkBlue: {\n    bg: 'darkBlue.18',\n    hoverBg: 'darkBlue.25',\n    activeBg: 'darkBlue.35',\n    borderColor: 'darkBlue.18',\n    color: 'white',\n  },\n  solidRed: {\n    bg: 'energyRed.45',\n    hoverBg: 'energyRed.54',\n    activeBg: 'energyRed.60',\n    borderColor: 'energyRed.45',\n    color: 'white',\n  },\n  solidYellow: {\n    bg: 'sunflower.50',\n    hoverBg: 'sunflower.80',\n    activeBg: 'sunflower.85',\n    borderColor: 'sunflower.50',\n    color: 'sunflower.15',\n  },\n  solidGreen: {\n    bg: 'landGreen.35',\n    hoverBg: 'landGreen.41',\n    activeBg: 'landGreen.45',\n    borderColor: 'landGreen.35',\n    color: 'white',\n  },\n  solidLavender: {\n    bg: 'hsl(232, 58%, 60%)',\n    hoverBg: 'hsl(232, 58%, 65%)',\n    borderColor: 'hsl(232, 58%, 60%)',\n    color: 'white',\n    activeBg: 'hsl(232, 58%, 70%)',\n  },\n  solidEucalyptus: {\n    bg: 'hsl(178, 80%, 25%)',\n    hoverBg: 'hsl(178, 80%, 35%)',\n    borderColor: 'hsl(178, 80%, 25%)',\n    color: 'white',\n    activeBg: 'hsl(178, 80%, 42%)',\n  },\n  solidTerracotta: {\n    bg: 'hsl(34, 100%, 30%)',\n    hoverBg: 'hsl(34, 100%, 40%)',\n    borderColor: 'hsl(34, 100%, 35%)',\n    color: 'white',\n    activeBg: 'hsl(34, 100%, 45%)',\n  },\n  /** internal, used in *header* next */\n  primaryLight: {\n    bg: 'buttonTypePrimaryDefaultBackgroundColorLight',\n    borderColor: 'buttonTypePrimaryDefaultBorderColorLight',\n    color: 'buttonTypePrimaryDefaultTextColorLight',\n    hoverBg: 'buttonTypePrimaryHoverBackgroundColorLight',\n    hoverBorderColor: 'buttonTypePrimaryHoverBorderColorLight',\n    hoverColor: 'buttonTypePrimaryHoverTextColorLight',\n    activeBg: 'buttonTypePrimaryActiveBackgroundColorLight',\n    activeBorderColor: 'buttonTypePrimaryActiveBorderColorLight',\n    activeColor: 'buttonTypePrimaryActiveTextColorLight',\n  },\n}\n\nexport default {\n  baseStyle,\n  defaultProps,\n  sizes,\n  variants,\n}\n"],"mappings":";AAAA,MAAM,YAAY,EAAE;AAEpB,MAAM,eAAe;CACnB,MAAM;CACN,SAAS;CACT,YAAY;CACb;AAED,MAAM,QAAQ;CACZ,IAAI;EACF,UAAU;EACV,GAAG;EACH,UAAU;EACX;CACD,IAAI;EACF,UAAU;EACV,GAAG;EACH,UAAU;EACX;CACD,IAAI;EACF,UAAU;EACV,GAAG;EACH,UAAU;EACX;CACD,IAAI;EACF,UAAU;EACV,GAAG;EACH,UAAU;EACX;CACD,KAAK;EACH,UAAU;EACV,GAAG;EACH,UAAU;EACX;CACF;AAED,MAAM,WAAW;CACf,YAAY;EACV,IAAI;EACJ,SAAS;EACT,aAAa;EACb,OAAO;EACP,UAAU;EACX;CACD,YAAY;EACV,IAAI;EACJ,SAAS;EACT,UAAU;EACV,aAAa;EACb,OAAO;EACR;CACD,WAAW;EACT,IAAI;EACJ,aAAa;EACb,SAAS;EACT,UAAU;EACV,OAAO;EACR;CACD,cAAc;EACZ,IAAI;EACJ,SAAS;EACT,UAAU;EACV,aAAa;EACb,OAAO;EACR;CACD,aAAa;EACX,IAAI;EACJ,SAAS;EACT,aAAa;EACb,OAAO;EACP,UAAU;EACX;CACD,gBAAgB;EACd,IAAI;EACJ,SAAS;EACT,aAAa;EACb,OAAO;EACP,UAAU;EACX;CACD,kBAAkB;EAChB,IAAI;EACJ,SAAS;EACT,aAAa;EACb,OAAO;EACP,UAAU;EACX;CACD,kBAAkB;EAChB,IAAI;EACJ,SAAS;EACT,aAAa;EACb,OAAO;EACP,UAAU;EACX;CAGD,WAAW;EACT,IAAI;EACJ,SAAS;EACT,UAAU;EACV,aAAa;EACb,OAAO;EACR;CACD,eAAe;EACb,IAAI;EACJ,SAAS;EACT,UAAU;EACV,aAAa;EACb,OAAO;EACR;CACD,UAAU;EACR,IAAI;EACJ,SAAS;EACT,UAAU;EACV,aAAa;EACb,OAAO;EACR;CACD,aAAa;EACX,IAAI;EACJ,SAAS;EACT,UAAU;EACV,aAAa;EACb,OAAO;EACR;CACD,YAAY;EACV,IAAI;EACJ,SAAS;EACT,UAAU;EACV,aAAa;EACb,OAAO;EACR;CACD,eAAe;EACb,IAAI;EACJ,SAAS;EACT,aAAa;EACb,OAAO;EACP,UAAU;EACX;CACD,iBAAiB;EACf,IAAI;EACJ,SAAS;EACT,aAAa;EACb,OAAO;EACP,UAAU;EACX;CACD,iBAAiB;EACf,IAAI;EACJ,SAAS;EACT,aAAa;EACb,OAAO;EACP,UAAU;EACX;CAED,cAAc;EACZ,IAAI;EACJ,aAAa;EACb,OAAO;EACP,SAAS;EACT,kBAAkB;EAClB,YAAY;EACZ,UAAU;EACV,mBAAmB;EACnB,aAAa;EACd;CACF;AAED,oBAAe;CACb;CACA;CACA;CACA;CACD"}

package/dist/badge/badge.d.ts

@@ -1,5 +1,6 @@
 import { VuiComponent } from "../core/vui.js";
 import { BadgeProps } from "./badge.types.js";
+import "../index.js";
 
 //#region src/badge/badge.d.ts
 

package/dist/badge/badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"badge.d.ts","names":[],"sources":["../../src/badge/badge.tsx"],"sourcesContent":[],"mappings":";;;;;;;;AAaA,CAAA,CAAA,CAAA,KAAA,CAAA,UAAA,CAAA,GAAA,CAAA,IAAA,CAAA,GAAA,CAAA,UAAA,CAAA,WAAA,CAAA,IAAA,CAAA,CAAA,IAAA,CAAA,KAAA,CAAA,EAAA,CAAA,IAAA,CAAA,EAAA,CAAA,CAAA,CAAA,CAAA,OAAA,CAAA,CAAA,GAAA,CAAA,IAAA,CAAA,aAAA;;AAAkB,OAAA,CAAA,KAAA,CAAL,KAAK,CAAA,CAAA,YAAA,CAAA,CAAA,IAAA,CAAA,CAAA,CAAA,UAAA,CAAA"}
+{"version":3,"file":"badge.d.ts","names":[],"sources":["../../src/badge/badge.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;AAaA,CAAA,CAAA;cAAa,OAAK,qBAAA"}

package/dist/badge/badge.js

@@ -1,2 +1,35 @@
-import e from"./theme.js";import{vui as t}from"../core/vui.js";import{Tag as n}from"../tag/tag.js";import{jsx as r}from"react/jsx-runtime";const i=t((t,i)=>{let{variant:a,...o}=t,{variants:s}=e??{},c=s[a??`subtleSandstone`].container.bg,l=s[a??`subtleSandstone`].container.color;return r(n,{bg:c,className:`vui-badge`,color:l,isInteractive:!1,isRound:!0,minW:`20px`,ref:i,...o,onDelete:void 0})});i.displayName=`Badge`;var a=i;export{i as Badge,a as default};globalThis.__vuiVersion__=`3.0.0-beta.8`;
+import theme_default from "./theme.js";
+import { vui } from "../core/vui.js";
+import { Tag } from "../tag/tag.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/badge/badge.tsx
+/**
+* Badges are round, non-interactive tags.
+*
+* These components are used for displaying information only; they might be used as a “counter” for push notifications.
+*/
+const Badge = vui((props, ref) => {
+	const { variant,...rest } = props;
+	const { variants } = theme_default ?? {};
+	const bg = variants[variant ?? "subtleSandstone"].container.bg;
+	const color = variants[variant ?? "subtleSandstone"].container.color;
+	return /* @__PURE__ */ jsx(Tag, {
+		bg,
+		className: "vui-badge",
+		color,
+		isInteractive: false,
+		isRound: true,
+		minW: "20px",
+		ref,
+		...rest,
+		onDelete: void 0
+	});
+});
+Badge.displayName = "Badge";
+var badge_default = Badge;
+
+//#endregion
+export { Badge, badge_default as default };
+globalThis.__vuiVersion__ = "3.0.0"
 //# sourceMappingURL=badge.js.map

package/dist/badge/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","names":["theme"],"sources":["../../src/badge/badge.tsx"],"sourcesContent":["import { vui } from '../core'\nimport type { TagProps } from '../tag'\nimport { Tag } from '../tag'\nimport type { Dict } from '../utils'\nimport type { BadgeProps } from './badge.types'\nimport theme from './theme'\n\n/**\n * Badges are round, non-interactive tags.\n *\n * These components are used for displaying information only; they might be used as a “counter” for push notifications.\n */\n\nexport const Badge = vui<'span', BadgeProps>((props, ref) => {\n  const { variant, ...rest } = props as TagProps\n  const { variants } = (theme as Dict) ?? {}\n\n  const bg = variants[variant ?? 'subtleSandstone'].container.bg\n  const color = variants[variant ?? 'subtleSandstone'].container.color\n\n  return (\n    <Tag\n      bg={bg}\n      className=\"vui-badge\"\n      color={color}\n      isInteractive={false}\n      isRound\n      minW=\"20px\"\n      ref={ref}\n      {...rest}\n      onDelete={undefined}\n    />\n  )\n})\n\nBadge.displayName = 'Badge'\nexport default Badge\n"],"mappings":"2IAaA,MAAa,EAAQ,GAAyB,EAAO,IAAQ,CAC3D,GAAM,CAAE,UAAS,GAAG,GAAS,EACvB,CAAE,YAAcA,GAAkB,EAAE,CAEpC,EAAK,EAAS,GAAW,mBAAmB,UAAU,GACtD,EAAQ,EAAS,GAAW,mBAAmB,UAAU,MAE/D,OACE,EAAC,EAAA,CACK,KACJ,UAAU,YACH,QACP,cAAe,GACf,QAAA,GACA,KAAK,OACA,MACL,GAAI,EACJ,SAAU,IAAA,IACV,EAEJ,CAEF,EAAM,YAAc,QACpB,IAAA,EAAe"}
+{"version":3,"file":"badge.js","names":["theme"],"sources":["../../src/badge/badge.tsx"],"sourcesContent":["import { vui } from '../core'\nimport type { TagProps } from '../tag'\nimport { Tag } from '../tag'\nimport type { Dict } from '../utils'\nimport type { BadgeProps } from './badge.types'\nimport theme from './theme'\n\n/**\n * Badges are round, non-interactive tags.\n *\n * These components are used for displaying information only; they might be used as a “counter” for push notifications.\n */\n\nexport const Badge = vui<'span', BadgeProps>((props, ref) => {\n  const { variant, ...rest } = props as TagProps\n  const { variants } = (theme as Dict) ?? {}\n\n  const bg = variants[variant ?? 'subtleSandstone'].container.bg\n  const color = variants[variant ?? 'subtleSandstone'].container.color\n\n  return (\n    <Tag\n      bg={bg}\n      className=\"vui-badge\"\n      color={color}\n      isInteractive={false}\n      isRound\n      minW=\"20px\"\n      ref={ref}\n      {...rest}\n      onDelete={undefined}\n    />\n  )\n})\n\nBadge.displayName = 'Badge'\nexport default Badge\n"],"mappings":";;;;;;;;;;;AAaA,MAAa,QAAQ,KAAyB,OAAO,QAAQ;CAC3D,MAAM,EAAE,QAAS,GAAG,SAAS;CAC7B,MAAM,EAAE,aAAcA,iBAAkB,EAAE;CAE1C,MAAM,KAAK,SAAS,WAAW,mBAAmB,UAAU;CAC5D,MAAM,QAAQ,SAAS,WAAW,mBAAmB,UAAU;AAE/D,QACE,oBAAC;EACK;EACJ,WAAU;EACH;EACP,eAAe;EACf;EACA,MAAK;EACA;EACL,GAAI;EACJ,UAAU;GACV;EAEJ;AAEF,MAAM,cAAc;AACpB,oBAAe"}

package/dist/badge/badge.types.d.ts

@@ -1,7 +1,10 @@
 import { ThemingProps } from "../theme/types.js";
 import { SystemProps } from "../system/system.js";
+import "../system/index.js";
 import { IconProp } from "../icon/icon.types.js";
+import "../icon/index.js";
 import { TagInnerProps } from "../tag/tag.types.js";
+import "../tag/index.js";
 
 //#region src/badge/badge.types.d.ts
 type BadgeInnerProps = {

package/dist/badge/badge.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"badge.types.d.ts","names":[],"sources":["../../src/badge/badge.types.ts"],"sourcesContent":[],"mappings":";;;;;;KAKY,eAAA,CAAA,CAAA;;EAAA,IAAA,CAAA,CAAA,CAEH,QAFG,CAAA,CAAA,CAEQ,GAAA,CAAI,OAFG;EAAA,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,UAAA,CAAA,IAAA,CAAA,EAAA,CAAA,GAAA,CAAA,IAAA,CAAA,IAAA,CAAA,CAAA,CAAA;UAElB,CAAA,CAAA,CAEI,QAFJ,CAAA,CAAA,CAEe,GAAA,CAAI,OAFnB;;WAEI,CAAA,CAAA,CAEC,QAFD,CAAA,CAAA,CAEY,GAAA,CAAI,OAFhB;;MAEC,CAAA,CAAA,CAEL,KAAA,CAAM,SAFD;;AAEL,IAAA,CAGG,UAAA,CAAA,CAAA,CAAa,WAHV,CAAA,CAAA,CAGwB,YAHxB,CAAA,CAAA,KAAA,CAAA,CAAA,CAAA,CAAA,CAGgD,aAHhD,CAAA,CAAA,CAGgE,eAHhE"}
+{"version":3,"file":"badge.types.d.ts","names":[],"sources":["../../src/badge/badge.types.ts"],"sourcesContent":[],"mappings":";;;;;;;;;KAKY,eAAA,CAAA,CAAA;;SAEH,WAAW,GAAA,CAAI;;aAEX,WAAW,GAAA,CAAI;EAJhB,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,UAAA,CAAA,IAAA,CAAA,EAAA,CAAA,GAAA,CAAA,KAAA,CAAA,IAAA,CAAA,CAAA,CAAA;EAEH,SAAA,CAAA,CAAA,CAIK,QAJL,CAAA,CAAA,CAIgB,GAAA,CAAI,OAJpB;EAAW,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,UAAA,CAAA,IAAA,CAAA,EAAA,CAAA,WAAA,CAAA,EAAA,CAAA,QAAA,CAAA,CAAA,CAAA;EAEP,IAAA,CAAA,CAAA,CAIJ,KAAA,CAAM,SAJF;CAAW;AAEV,IAAA,CAKF,UAAA,CAAA,CAAA,CAAa,WALX,CAAA,CAAA,CAKyB,YALzB,CAAA,CAAA,KAAA,CAAA,CAAA,CAAA,CAAA,CAKiD,aALjD,CAAA,CAAA,CAKiE,eALjE"}

package/dist/badge/index.d.ts

@@ -0,0 +1 @@
+import { Badge } from "./badge.js";

package/dist/badge/theme.js

@@ -1,2 +1,120 @@
-var e={baseStyle:{},defaultProps:{size:`md`,variant:`subtleSandstone`,fontWeight:`medium`},parts:[`container`,`icon`,`text`],sizes:{xxs:{container:{borderRadius:`lg`,fontSize:`sm`,h:16,spaceX:2},icon:{size:`xs`}},xs:{container:{borderRadius:`lg`,fontSize:`sm`,h:20,spaceX:4},icon:{size:`xs`}},sm:{container:{fontSize:`sm`,h:24,spaceX:4},icon:{size:`xs`}},md:{container:{fontSize:`sm`,h:32,spaceX:6},icon:{size:`sm`}},lg:{container:{fontSize:`md`,h:40,spaceX:8},icon:{size:`md`}}},variants:{subtleSandstone:{container:{bg:`sandstone.90`,color:`sandstone.20`,borderColor:`transparent`}},subtleEarth:{container:{bg:`earth.95`,color:`earth.20`}},subtleBlue:{container:{bg:`skyBlue.95`,color:`seaBlue.main`}},subtleBlue2:{container:{bg:`skyBlue.95`,color:`skyBlue.20`}},subtleRed:{container:{bg:`energyRed.95`,color:`energyRed.45`}},subtleYellow:{container:{bg:`sunflower.85`,color:`sunflower.20`}},subtleGreen:{container:{bg:`landGreen.95`,color:`landGreen.30`}},solidBlue:{container:{bg:`skyBlue.65`,color:`skyBlue.20`}},solidDarkBlue:{container:{bg:`darkBlue.18`,borderColor:`darkBlue.18`,color:`white`}},solidRed:{container:{bg:`energyRed.45`,color:`white`}},solidYellow:{container:{bg:`sunflower.50`,color:`sunflower.15`}},solidGreen:{container:{bg:`landGreen.35`,color:`white`}}}};export{e as default};globalThis.__vuiVersion__=`3.0.0-beta.8`;
+//#region src/badge/theme.ts
+const baseStyle = {};
+const defaultProps = {
+	size: "md",
+	variant: "subtleSandstone",
+	fontWeight: "medium"
+};
+const parts = [
+	"container",
+	"icon",
+	"text"
+];
+const sizes = {
+	xxs: {
+		container: {
+			borderRadius: "lg",
+			fontSize: "sm",
+			h: 16,
+			spaceX: 2
+		},
+		icon: { size: "xs" }
+	},
+	xs: {
+		container: {
+			borderRadius: "lg",
+			fontSize: "sm",
+			h: 20,
+			spaceX: 4
+		},
+		icon: { size: "xs" }
+	},
+	sm: {
+		container: {
+			fontSize: "sm",
+			h: 24,
+			spaceX: 4
+		},
+		icon: { size: "xs" }
+	},
+	md: {
+		container: {
+			fontSize: "sm",
+			h: 32,
+			spaceX: 6
+		},
+		icon: { size: "sm" }
+	},
+	lg: {
+		container: {
+			fontSize: "md",
+			h: 40,
+			spaceX: 8
+		},
+		icon: { size: "md" }
+	}
+};
+const variants = {
+	subtleSandstone: { container: {
+		bg: "sandstone.90",
+		color: "sandstone.20",
+		borderColor: "transparent"
+	} },
+	subtleEarth: { container: {
+		bg: "earth.95",
+		color: "earth.20"
+	} },
+	subtleBlue: { container: {
+		bg: "skyBlue.95",
+		color: "seaBlue.main"
+	} },
+	subtleBlue2: { container: {
+		bg: "skyBlue.95",
+		color: "skyBlue.20"
+	} },
+	subtleRed: { container: {
+		bg: "energyRed.95",
+		color: "energyRed.45"
+	} },
+	subtleYellow: { container: {
+		bg: "sunflower.85",
+		color: "sunflower.20"
+	} },
+	subtleGreen: { container: {
+		bg: "landGreen.95",
+		color: "landGreen.30"
+	} },
+	solidBlue: { container: {
+		bg: "skyBlue.65",
+		color: "skyBlue.20"
+	} },
+	solidDarkBlue: { container: {
+		bg: "darkBlue.18",
+		borderColor: "darkBlue.18",
+		color: "white"
+	} },
+	solidRed: { container: {
+		bg: "energyRed.45",
+		color: "white"
+	} },
+	solidYellow: { container: {
+		bg: "sunflower.50",
+		color: "sunflower.15"
+	} },
+	solidGreen: { container: {
+		bg: "landGreen.35",
+		color: "white"
+	} }
+};
+var theme_default = {
+	baseStyle,
+	defaultProps,
+	parts,
+	sizes,
+	variants
+};
+
+//#endregion
+export { theme_default as default };
+globalThis.__vuiVersion__ = "3.0.0"
 //# sourceMappingURL=theme.js.map

package/dist/badge/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","names":[],"sources":["../../src/badge/theme.ts"],"sourcesContent":["const baseStyle = {}\n\nconst defaultProps = {\n  size: 'md',\n  variant: 'subtleSandstone',\n  fontWeight: 'medium',\n}\n\nconst parts = ['container', 'icon', 'text']\n\nconst sizes = {\n  xxs: {\n    container: {\n      borderRadius: 'lg',\n      fontSize: 'sm',\n      h: 16,\n      spaceX: 2,\n    },\n    icon: {\n      size: 'xs',\n    },\n  },\n  xs: {\n    container: {\n      borderRadius: 'lg',\n      fontSize: 'sm',\n      h: 20,\n      spaceX: 4,\n    },\n    icon: {\n      size: 'xs',\n    },\n  },\n  sm: {\n    container: {\n      fontSize: 'sm',\n      h: 24,\n      spaceX: 4,\n    },\n    icon: {\n      size: 'xs',\n    },\n  },\n  md: {\n    container: {\n      fontSize: 'sm',\n      h: 32,\n      spaceX: 6,\n    },\n    icon: {\n      size: 'sm',\n    },\n  },\n  lg: {\n    container: {\n      fontSize: 'md',\n      h: 40,\n      spaceX: 8,\n    },\n    icon: {\n      size: 'md',\n    },\n  },\n}\n\nconst variants = {\n  subtleSandstone: {\n    container: {\n      bg: 'sandstone.90',\n      color: 'sandstone.20',\n      borderColor: 'transparent',\n    },\n  },\n  subtleEarth: {\n    container: {\n      bg: 'earth.95',\n      color: 'earth.20',\n    },\n  },\n  subtleBlue: {\n    container: {\n      bg: 'skyBlue.95',\n      color: 'seaBlue.main',\n    },\n  },\n  subtleBlue2: {\n    container: {\n      bg: 'skyBlue.95',\n      color: 'skyBlue.20',\n    },\n  },\n  subtleRed: {\n    container: {\n      bg: 'energyRed.95',\n      color: 'energyRed.45',\n    },\n  },\n  subtleYellow: {\n    container: {\n      bg: 'sunflower.85',\n      color: 'sunflower.20',\n    },\n  },\n  subtleGreen: {\n    container: {\n      bg: 'landGreen.95',\n      color: 'landGreen.30',\n    },\n  },\n\n  /** solids next */\n  solidBlue: {\n    container: {\n      bg: 'skyBlue.65',\n      color: 'skyBlue.20',\n    },\n  },\n\n  solidDarkBlue: {\n    container: {\n      bg: 'darkBlue.18',\n      borderColor: 'darkBlue.18',\n      color: 'white',\n    },\n  },\n  solidRed: {\n    container: {\n      bg: 'energyRed.45',\n      color: 'white',\n    },\n  },\n  solidYellow: {\n    container: {\n      bg: 'sunflower.50',\n      color: 'sunflower.15',\n    },\n  },\n  solidGreen: {\n    container: {\n      bg: 'landGreen.35',\n      color: 'white',\n    },\n  },\n}\n\nexport default {\n  baseStyle,\n  defaultProps,\n  parts,\n  sizes,\n  variants,\n}\n"],"mappings":"AAiJA,IAAA,EAAe,CACb,UAlJgB,EAAE,CAmJlB,aAjJmB,CACnB,KAAM,KACN,QAAS,kBACT,WAAY,SACb,CA8IC,MA5IY,CAAC,YAAa,OAAQ,OAAO,CA6IzC,MA3IY,CACZ,IAAK,CACH,UAAW,CACT,aAAc,KACd,SAAU,KACV,EAAG,GACH,OAAQ,EACT,CACD,KAAM,CACJ,KAAM,KACP,CACF,CACD,GAAI,CACF,UAAW,CACT,aAAc,KACd,SAAU,KACV,EAAG,GACH,OAAQ,EACT,CACD,KAAM,CACJ,KAAM,KACP,CACF,CACD,GAAI,CACF,UAAW,CACT,SAAU,KACV,EAAG,GACH,OAAQ,EACT,CACD,KAAM,CACJ,KAAM,KACP,CACF,CACD,GAAI,CACF,UAAW,CACT,SAAU,KACV,EAAG,GACH,OAAQ,EACT,CACD,KAAM,CACJ,KAAM,KACP,CACF,CACD,GAAI,CACF,UAAW,CACT,SAAU,KACV,EAAG,GACH,OAAQ,EACT,CACD,KAAM,CACJ,KAAM,KACP,CACF,CACF,CAuFC,SArFe,CACf,gBAAiB,CACf,UAAW,CACT,GAAI,eACJ,MAAO,eACP,YAAa,cACd,CACF,CACD,YAAa,CACX,UAAW,CACT,GAAI,WACJ,MAAO,WACR,CACF,CACD,WAAY,CACV,UAAW,CACT,GAAI,aACJ,MAAO,eACR,CACF,CACD,YAAa,CACX,UAAW,CACT,GAAI,aACJ,MAAO,aACR,CACF,CACD,UAAW,CACT,UAAW,CACT,GAAI,eACJ,MAAO,eACR,CACF,CACD,aAAc,CACZ,UAAW,CACT,GAAI,eACJ,MAAO,eACR,CACF,CACD,YAAa,CACX,UAAW,CACT,GAAI,eACJ,MAAO,eACR,CACF,CAGD,UAAW,CACT,UAAW,CACT,GAAI,aACJ,MAAO,aACR,CACF,CAED,cAAe,CACb,UAAW,CACT,GAAI,cACJ,YAAa,cACb,MAAO,QACR,CACF,CACD,SAAU,CACR,UAAW,CACT,GAAI,eACJ,MAAO,QACR,CACF,CACD,YAAa,CACX,UAAW,CACT,GAAI,eACJ,MAAO,eACR,CACF,CACD,WAAY,CACV,UAAW,CACT,GAAI,eACJ,MAAO,QACR,CACF,CACF,CAQA"}
+{"version":3,"file":"theme.js","names":[],"sources":["../../src/badge/theme.ts"],"sourcesContent":["const baseStyle = {}\n\nconst defaultProps = {\n  size: 'md',\n  variant: 'subtleSandstone',\n  fontWeight: 'medium',\n}\n\nconst parts = ['container', 'icon', 'text']\n\nconst sizes = {\n  xxs: {\n    container: {\n      borderRadius: 'lg',\n      fontSize: 'sm',\n      h: 16,\n      spaceX: 2,\n    },\n    icon: {\n      size: 'xs',\n    },\n  },\n  xs: {\n    container: {\n      borderRadius: 'lg',\n      fontSize: 'sm',\n      h: 20,\n      spaceX: 4,\n    },\n    icon: {\n      size: 'xs',\n    },\n  },\n  sm: {\n    container: {\n      fontSize: 'sm',\n      h: 24,\n      spaceX: 4,\n    },\n    icon: {\n      size: 'xs',\n    },\n  },\n  md: {\n    container: {\n      fontSize: 'sm',\n      h: 32,\n      spaceX: 6,\n    },\n    icon: {\n      size: 'sm',\n    },\n  },\n  lg: {\n    container: {\n      fontSize: 'md',\n      h: 40,\n      spaceX: 8,\n    },\n    icon: {\n      size: 'md',\n    },\n  },\n}\n\nconst variants = {\n  subtleSandstone: {\n    container: {\n      bg: 'sandstone.90',\n      color: 'sandstone.20',\n      borderColor: 'transparent',\n    },\n  },\n  subtleEarth: {\n    container: {\n      bg: 'earth.95',\n      color: 'earth.20',\n    },\n  },\n  subtleBlue: {\n    container: {\n      bg: 'skyBlue.95',\n      color: 'seaBlue.main',\n    },\n  },\n  subtleBlue2: {\n    container: {\n      bg: 'skyBlue.95',\n      color: 'skyBlue.20',\n    },\n  },\n  subtleRed: {\n    container: {\n      bg: 'energyRed.95',\n      color: 'energyRed.45',\n    },\n  },\n  subtleYellow: {\n    container: {\n      bg: 'sunflower.85',\n      color: 'sunflower.20',\n    },\n  },\n  subtleGreen: {\n    container: {\n      bg: 'landGreen.95',\n      color: 'landGreen.30',\n    },\n  },\n\n  /** solids next */\n  solidBlue: {\n    container: {\n      bg: 'skyBlue.65',\n      color: 'skyBlue.20',\n    },\n  },\n\n  solidDarkBlue: {\n    container: {\n      bg: 'darkBlue.18',\n      borderColor: 'darkBlue.18',\n      color: 'white',\n    },\n  },\n  solidRed: {\n    container: {\n      bg: 'energyRed.45',\n      color: 'white',\n    },\n  },\n  solidYellow: {\n    container: {\n      bg: 'sunflower.50',\n      color: 'sunflower.15',\n    },\n  },\n  solidGreen: {\n    container: {\n      bg: 'landGreen.35',\n      color: 'white',\n    },\n  },\n}\n\nexport default {\n  baseStyle,\n  defaultProps,\n  parts,\n  sizes,\n  variants,\n}\n"],"mappings":";AAAA,MAAM,YAAY,EAAE;AAEpB,MAAM,eAAe;CACnB,MAAM;CACN,SAAS;CACT,YAAY;CACb;AAED,MAAM,QAAQ;CAAC;CAAa;CAAQ;CAAO;AAE3C,MAAM,QAAQ;CACZ,KAAK;EACH,WAAW;GACT,cAAc;GACd,UAAU;GACV,GAAG;GACH,QAAQ;GACT;EACD,MAAM,EACJ,MAAM,MACP;EACF;CACD,IAAI;EACF,WAAW;GACT,cAAc;GACd,UAAU;GACV,GAAG;GACH,QAAQ;GACT;EACD,MAAM,EACJ,MAAM,MACP;EACF;CACD,IAAI;EACF,WAAW;GACT,UAAU;GACV,GAAG;GACH,QAAQ;GACT;EACD,MAAM,EACJ,MAAM,MACP;EACF;CACD,IAAI;EACF,WAAW;GACT,UAAU;GACV,GAAG;GACH,QAAQ;GACT;EACD,MAAM,EACJ,MAAM,MACP;EACF;CACD,IAAI;EACF,WAAW;GACT,UAAU;GACV,GAAG;GACH,QAAQ;GACT;EACD,MAAM,EACJ,MAAM,MACP;EACF;CACF;AAED,MAAM,WAAW;CACf,iBAAiB,EACf,WAAW;EACT,IAAI;EACJ,OAAO;EACP,aAAa;EACd,EACF;CACD,aAAa,EACX,WAAW;EACT,IAAI;EACJ,OAAO;EACR,EACF;CACD,YAAY,EACV,WAAW;EACT,IAAI;EACJ,OAAO;EACR,EACF;CACD,aAAa,EACX,WAAW;EACT,IAAI;EACJ,OAAO;EACR,EACF;CACD,WAAW,EACT,WAAW;EACT,IAAI;EACJ,OAAO;EACR,EACF;CACD,cAAc,EACZ,WAAW;EACT,IAAI;EACJ,OAAO;EACR,EACF;CACD,aAAa,EACX,WAAW;EACT,IAAI;EACJ,OAAO;EACR,EACF;CAGD,WAAW,EACT,WAAW;EACT,IAAI;EACJ,OAAO;EACR,EACF;CAED,eAAe,EACb,WAAW;EACT,IAAI;EACJ,aAAa;EACb,OAAO;EACR,EACF;CACD,UAAU,EACR,WAAW;EACT,IAAI;EACJ,OAAO;EACR,EACF;CACD,aAAa,EACX,WAAW;EACT,IAAI;EACJ,OAAO;EACR,EACF;CACD,YAAY,EACV,WAAW;EACT,IAAI;EACJ,OAAO;EACR,EACF;CACF;AAED,oBAAe;CACb;CACA;CACA;CACA;CACA;CACD"}

package/dist/box/box.d.ts

@@ -1,10 +1,11 @@
 import { SystemProps } from "../system/system.js";
 import { BoxProps } from "./box.types.js";
 import { VuiComponent } from "../core/vui.js";
-import * as styled_components7 from "styled-components";
+import "../index.js";
+import * as styled_components5 from "styled-components";
 
 //#region src/box/box.d.ts
-declare const BoxBase: styled_components7.StyledComponent<"div", styled_components7.DefaultTheme, SystemProps, never>;
+declare const BoxBase: styled_components5.StyledComponent<"div", styled_components5.DefaultTheme, SystemProps, never>;
 /** Organizes content layout into columns or rows with easy centering. */
 declare const Box: VuiComponent<"div", BoxProps>;
 //#endregion

package/dist/box/box.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"box.d.ts","names":[],"sources":["../../src/box/box.tsx"],"sourcesContent":[],"mappings":";;;;;;cAIa,SAAO,kBAAA,CAAA,uBAInB,kBAAA,CAJmB,YAAA,CAAA,CAAA,WAAA,CAAA;;cAOP,KAAG,oBAAA"}
+{"version":3,"file":"box.d.ts","names":[],"sources":["../../src/box/box.tsx"],"sourcesContent":[],"mappings":";;;;;;;cAIa,SAAO,kBAAA,CAAA,uBAInB,kBAAA,CAJmB,YAAA,CAAA,CAAA,WAAA,CAAA;;cAOP,KAAG,oBAAA"}