@a-type/ui 6.0.31 → 6.0.33

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -34,7 +34,7 @@ export function ButtonRoot(_a) {
34
34
  !iconOnlyTools.info.hasIconOnly &&
35
35
  isDropdownTriggerFromContext;
36
36
  const finalRef = useMergedRef(ref, iconOnlyTools.ref);
37
- const buttonProps = Object.assign(Object.assign(Object.assign({ ref: finalRef }, iconOnlyTools.props), props), { disabled: disabled || isLoading, 'data-input-border-flush': true, 'data-disabled': visuallyDisabled, 'data-focus-visible': visuallyFocused ? true : undefined, 'data-size': size, 'data-loading': isLoading, 'data-dropdown-trigger': isDropdownTrigger ? true : undefined, tabIndex: visuallyDisabled ? -1 : undefined, 'data-toggleable': toggled !== undefined, 'data-disable-icon-mode': disableIconMode, 'data-force-icon-mode': forceIconMode, 'data-emphasis': emphasis, className: clsx(emphasis === 'unstyled' ? cls.unstyled : cls.root, emphasis === 'ghost' && '@mode-bold', size === 'small' ? '@mode-dense' : '', color ? `@mode-${color}` : '', className) });
37
+ const buttonProps = Object.assign(Object.assign(Object.assign({ ref: finalRef }, iconOnlyTools.props), { disabled: disabled || isLoading, 'data-input-border-flush': true, 'data-disabled': visuallyDisabled, 'data-focus-visible': visuallyFocused ? true : undefined, 'data-size': size, 'data-loading': isLoading, 'data-dropdown-trigger': isDropdownTrigger ? true : undefined, tabIndex: visuallyDisabled ? -1 : undefined, 'data-toggleable': toggled !== undefined, 'data-disable-icon-mode': disableIconMode, 'data-force-icon-mode': forceIconMode, 'data-emphasis': emphasis, className: clsx(emphasis === 'unstyled' ? cls.unstyled : cls.root, emphasis === 'ghost' && '@mode-bold', size === 'small' ? '@mode-dense' : '', color ? `@mode-${color}` : '', className) }), props);
38
38
  // set state when toggleable
39
39
  if (toggled !== undefined) {
40
40
  buttonProps['aria-pressed'] = !!toggled;
@@ -1 +1 @@
1
- {"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/button/Button.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/button/Button.tsx"],"names":[],"mappings":"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"}
@@ -4,4 +4,4 @@ export interface ChipProps extends SlotDivProps {
4
4
  ref?: Ref<any>;
5
5
  emphasis?: 'default' | 'primary' | 'ambient';
6
6
  }
7
- export declare function Chip({ className, ...rest }: ChipProps): import("react/jsx-runtime").JSX.Element;
7
+ export declare function Chip({ className, emphasis, ...rest }: ChipProps): import("react/jsx-runtime").JSX.Element;
@@ -14,8 +14,7 @@ import classNames from 'clsx';
14
14
  import { SlotDiv } from '../utility/SlotDiv.js';
15
15
  import cls from './Chip.module.css';
16
16
  export function Chip(_a) {
17
- var _b;
18
- var { className } = _a, rest = __rest(_a, ["className"]);
19
- return (_jsx(SlotDiv, Object.assign({ className: classNames('@mode-dense', cls.root, className), role: rest.onClick ? 'button' : undefined, "data-emphasis": (_b = rest.emphasis) !== null && _b !== void 0 ? _b : 'default' }, rest)));
17
+ var { className, emphasis } = _a, rest = __rest(_a, ["className", "emphasis"]);
18
+ return (_jsx(SlotDiv, Object.assign({ className: classNames(cls.root, className), role: rest.onClick ? 'button' : undefined }, rest, { "data-emphasis": emphasis !== null && emphasis !== void 0 ? emphasis : 'default' })));
20
19
  }
21
20
  //# sourceMappingURL=Chip.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Chip.js","sourceRoot":"","sources":["../../../src/components/chip/Chip.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,UAAU,MAAM,MAAM,CAAC;AAE9B,OAAO,EAAE,OAAO,EAAgB,MAAM,uBAAuB,CAAC;AAC9D,OAAO,GAAG,MAAM,mBAAmB,CAAC;AAOpC,MAAM,UAAU,IAAI,CAAC,EAAiC;;QAAjC,EAAE,SAAS,OAAsB,EAAjB,IAAI,cAApB,aAAsB,CAAF;IACxC,OAAO,CACN,KAAC,OAAO,kBACP,SAAS,EAAE,UAAU,CAAC,aAAa,EAAE,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,EACzD,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,mBAC1B,MAAA,IAAI,CAAC,QAAQ,mCAAI,SAAS,IACrC,IAAI,EACP,CACF,CAAC;AACH,CAAC"}
1
+ {"version":3,"file":"Chip.js","sourceRoot":"","sources":["../../../src/components/chip/Chip.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,UAAU,MAAM,MAAM,CAAC;AAE9B,OAAO,EAAE,OAAO,EAAgB,MAAM,uBAAuB,CAAC;AAC9D,OAAO,GAAG,MAAM,mBAAmB,CAAC;AAOpC,MAAM,UAAU,IAAI,CAAC,EAA2C;QAA3C,EAAE,SAAS,EAAE,QAAQ,OAAsB,EAAjB,IAAI,cAA9B,yBAAgC,CAAF;IAClD,OAAO,CACN,KAAC,OAAO,kBACP,SAAS,EAAE,UAAU,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,EAC1C,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,IACrC,IAAI,qBACO,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,SAAS,IACnC,CACF,CAAC;AACH,CAAC"}
@@ -16,8 +16,8 @@
16
16
  font-weight: var(--m-prose-ambient-weight);
17
17
  font-family: var(--m-prose-ambient-font);
18
18
 
19
- &:not(:is(button)) {
20
- padding: var(--m-action-padding);
19
+ && {
20
+ padding: var(--m-space-sm) var(--m-space-md);
21
21
  }
22
22
 
23
23
  &[data-emphasis='primary'] {
@@ -26,7 +26,7 @@ export const Colors = {
26
26
  };
27
27
  export const AsButton = {
28
28
  render(args) {
29
- return (_jsxs(Box, { gap: true, items: "center", children: [_jsx(Button, { render: _jsx(Chip, { color: "primary", children: "Clickable Chip" }) }), _jsx(Chip, Object.assign({}, args, { children: "Non-clickable Chip" }))] }));
29
+ return (_jsxs(Box, { gap: true, items: "center", children: [_jsx(Chip, { render: _jsx(Button, {}), emphasis: "primary", children: "Clickable Chip" }), _jsx(Chip, Object.assign({}, args, { children: "Non-clickable Chip" }))] }));
30
30
  },
31
31
  };
32
32
  //# sourceMappingURL=Chip.stories.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Chip.stories.js","sourceRoot":"","sources":["../../../src/components/chip/Chip.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,IAAI;IACf,IAAI,EAAE;QACL,QAAQ,EAAE,MAAM;QAChB,QAAQ,EAAE,SAAS;KACnB;IACD,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CAC2B,CAAC;AAE9B,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,CAAC,IAAI;QACV,OAAO,KAAC,IAAI,oBAAK,IAAI,EAAI,CAAC;IAC3B,CAAC;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAU;IAC5B,MAAM;QACL,OAAO,CACN,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,aAC3C,KAAC,IAAI,IAAC,SAAS,EAAC,eAAe,qBAAY,EAC3C,KAAC,IAAI,0BAAe,EACpB,KAAC,IAAI,IAAC,SAAS,EAAC,cAAc,uBAAc,EAC5C,KAAC,IAAI,IAAC,SAAS,EAAC,iBAAiB,0BAAiB,EAClD,KAAC,IAAI,IAAC,SAAS,EAAC,eAAe,wBAAe,EAC9C,KAAC,IAAI,IAAC,SAAS,EAAC,aAAa,sBAAa,EAC1C,KAAC,IAAI,IAAC,SAAS,EAAC,YAAY,qBAAY,EACxC,KAAC,IAAI,IAAC,SAAS,EAAC,cAAc,uBAAc,EAC5C,KAAC,IAAI,IAAC,SAAS,EAAC,iBAAiB,0BAAiB,EAClD,KAAC,IAAI,IAAC,SAAS,EAAC,gBAAgB,yBAAgB,IAC3C,CACN,CAAC;IACH,CAAC;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC9B,MAAM,CAAC,IAAI;QACV,OAAO,CACN,MAAC,GAAG,IAAC,GAAG,QAAC,KAAK,EAAC,QAAQ,aACtB,KAAC,MAAM,IAAC,MAAM,EAAE,KAAC,IAAI,IAAC,KAAK,EAAC,SAAS,+BAAsB,GAAI,EAC/D,KAAC,IAAI,oBAAK,IAAI,sCAA2B,IACpC,CACN,CAAC;IACH,CAAC;CACD,CAAC"}
1
+ {"version":3,"file":"Chip.stories.js","sourceRoot":"","sources":["../../../src/components/chip/Chip.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,IAAI;IACf,IAAI,EAAE;QACL,QAAQ,EAAE,MAAM;QAChB,QAAQ,EAAE,SAAS;KACnB;IACD,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CAC2B,CAAC;AAE9B,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,CAAC,IAAI;QACV,OAAO,KAAC,IAAI,oBAAK,IAAI,EAAI,CAAC;IAC3B,CAAC;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAU;IAC5B,MAAM;QACL,OAAO,CACN,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,aAC3C,KAAC,IAAI,IAAC,SAAS,EAAC,eAAe,qBAAY,EAC3C,KAAC,IAAI,0BAAe,EACpB,KAAC,IAAI,IAAC,SAAS,EAAC,cAAc,uBAAc,EAC5C,KAAC,IAAI,IAAC,SAAS,EAAC,iBAAiB,0BAAiB,EAClD,KAAC,IAAI,IAAC,SAAS,EAAC,eAAe,wBAAe,EAC9C,KAAC,IAAI,IAAC,SAAS,EAAC,aAAa,sBAAa,EAC1C,KAAC,IAAI,IAAC,SAAS,EAAC,YAAY,qBAAY,EACxC,KAAC,IAAI,IAAC,SAAS,EAAC,cAAc,uBAAc,EAC5C,KAAC,IAAI,IAAC,SAAS,EAAC,iBAAiB,0BAAiB,EAClD,KAAC,IAAI,IAAC,SAAS,EAAC,gBAAgB,yBAAgB,IAC3C,CACN,CAAC;IACH,CAAC;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC9B,MAAM,CAAC,IAAI;QACV,OAAO,CACN,MAAC,GAAG,IAAC,GAAG,QAAC,KAAK,EAAC,QAAQ,aACtB,KAAC,IAAI,IAAC,MAAM,EAAE,KAAC,MAAM,KAAG,EAAE,QAAQ,EAAC,SAAS,+BAErC,EACP,KAAC,IAAI,oBAAK,IAAI,sCAA2B,IACpC,CACN,CAAC;IACH,CAAC;CACD,CAAC"}
@@ -8,7 +8,8 @@ export interface IconProps extends UseRenderComponentProps<'svg', {
8
8
  name: IconName;
9
9
  size?: number;
10
10
  loading?: boolean;
11
+ filled?: boolean;
11
12
  }
12
- export declare const Icon: ({ ref, name, size, className, loading: loadingProp, render, style, ...rest }: IconProps & {
13
+ export declare const Icon: ({ ref, name, size, className, loading: loadingProp, render, style, filled, ...rest }: IconProps & {
13
14
  ref?: React.Ref<SVGSVGElement>;
14
15
  }) => import("react/jsx-runtime").JSX.Element;
@@ -16,7 +16,7 @@ import { Spinner } from '../spinner/Spinner.js';
16
16
  import cls from './Icon.module.css';
17
17
  import { useIconLoading } from './IconLoadingContext.js';
18
18
  export const Icon = function Icon(_a) {
19
- var { ref, name, size, className, loading: loadingProp, render, style } = _a, rest = __rest(_a, ["ref", "name", "size", "className", "loading", "render", "style"]);
19
+ var { ref, name, size, className, loading: loadingProp, render, style, filled } = _a, rest = __rest(_a, ["ref", "name", "size", "className", "loading", "render", "style", "filled"]);
20
20
  const loadingContext = useIconLoading();
21
21
  const loading = loadingProp !== false && (loadingProp || loadingContext);
22
22
  const slotted = useRender({
@@ -28,6 +28,7 @@ export const Icon = function Icon(_a) {
28
28
  name,
29
29
  loading,
30
30
  icon: true,
31
+ filled,
31
32
  },
32
33
  render,
33
34
  });
@@ -1 +1 @@
1
- {"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../src/components/icon/Icon.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,SAAS,EAA2B,MAAM,2BAA2B,CAAC;AAC/E,OAAO,UAAU,MAAM,MAAM,CAAC;AAE9B,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAEhD,OAAO,GAAG,MAAM,mBAAmB,CAAC;AACpC,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAYzD,MAAM,CAAC,MAAM,IAAI,GAAG,SAAS,IAAI,CAAC,EAWjC;QAXiC,EACjC,GAAG,EACH,IAAI,EACJ,IAAI,EACJ,SAAS,EACT,OAAO,EAAE,WAAW,EACpB,MAAM,EACN,KAAK,OAIL,EAHG,IAAI,cAR0B,kEASjC,CADO;IAIP,MAAM,cAAc,GAAG,cAAc,EAAE,CAAC;IACxC,MAAM,OAAO,GAAG,WAAW,KAAK,KAAK,IAAI,CAAC,WAAW,IAAI,cAAc,CAAC,CAAC;IAEzE,MAAM,OAAO,GAAG,SAAS,CAAC;QACzB,cAAc,EAAE,KAAK;QACrB,GAAG;QACH,KAAK,kBACJ,SAAS,EAAE,UAAU,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,EAClD,KAAK,kCACD,KAAK,KACR,QAAQ,EAAE,IAAI,CAAC,CAAC,CAAC,GAAG,IAAI,IAAI,CAAC,CAAC,CAAC,SAAS,KAEzC,QAAQ,EAAE,cAAK,SAAS,EAAE,SAAS,IAAI,EAAE,GAAI,IAC1C,IAAI,CACP;QACD,KAAK,EAAE;YACN,IAAI;YACJ,IAAI;YACJ,OAAO;YACP,IAAI,EAAE,IAAI;SACV;QACD,MAAM;KACN,CAAC,CAAC;IAEH,IAAI,OAAO,EAAE,CAAC;QACb,OAAO,CACN,KAAC,OAAO,kBACP,IAAI,EAAE,IAAI,qBAEV,KAAK,EACJ,gCACI,KAAK,KACR,QAAQ,EAAE,IAAI,GACG,EAEnB,SAAS,EAAE,UAAU,CAAC,MAAM,EAAE,GAAG,CAAC,OAAO,EAAE,SAAS,CAAC,IAChD,IAAY,EAChB,CACF,CAAC;IACH,CAAC;IAED,OAAO,OAAO,CAAC;AAChB,CAAC,CAAC"}
1
+ {"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../src/components/icon/Icon.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,SAAS,EAA2B,MAAM,2BAA2B,CAAC;AAC/E,OAAO,UAAU,MAAM,MAAM,CAAC;AAE9B,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAEhD,OAAO,GAAG,MAAM,mBAAmB,CAAC;AACpC,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAazD,MAAM,CAAC,MAAM,IAAI,GAAG,SAAS,IAAI,CAAC,EAYjC;QAZiC,EACjC,GAAG,EACH,IAAI,EACJ,IAAI,EACJ,SAAS,EACT,OAAO,EAAE,WAAW,EACpB,MAAM,EACN,KAAK,EACL,MAAM,OAIN,EAHG,IAAI,cAT0B,4EAUjC,CADO;IAIP,MAAM,cAAc,GAAG,cAAc,EAAE,CAAC;IACxC,MAAM,OAAO,GAAG,WAAW,KAAK,KAAK,IAAI,CAAC,WAAW,IAAI,cAAc,CAAC,CAAC;IAEzE,MAAM,OAAO,GAAG,SAAS,CAAC;QACzB,cAAc,EAAE,KAAK;QACrB,GAAG;QACH,KAAK,kBACJ,SAAS,EAAE,UAAU,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,EAClD,KAAK,kCACD,KAAK,KACR,QAAQ,EAAE,IAAI,CAAC,CAAC,CAAC,GAAG,IAAI,IAAI,CAAC,CAAC,CAAC,SAAS,KAEzC,QAAQ,EAAE,cAAK,SAAS,EAAE,SAAS,IAAI,EAAE,GAAI,IAC1C,IAAI,CACP;QACD,KAAK,EAAE;YACN,IAAI;YACJ,IAAI;YACJ,OAAO;YACP,IAAI,EAAE,IAAI;YACV,MAAM;SACN;QACD,MAAM;KACN,CAAC,CAAC;IAEH,IAAI,OAAO,EAAE,CAAC;QACb,OAAO,CACN,KAAC,OAAO,kBACP,IAAI,EAAE,IAAI,qBAEV,KAAK,EACJ,gCACI,KAAK,KACR,QAAQ,EAAE,IAAI,GACG,EAEnB,SAAS,EAAE,UAAU,CAAC,MAAM,EAAE,GAAG,CAAC,OAAO,EAAE,SAAS,CAAC,IAChD,IAAY,EAChB,CACF,CAAC;IACH,CAAC;IAED,OAAO,OAAO,CAAC;AAChB,CAAC,CAAC"}
@@ -2,9 +2,13 @@
2
2
  fill: none;
3
3
  flex-shrink: 0;
4
4
 
5
- --size: calc(round(16px / var(--m-global-space-density), 1px));
5
+ --size: 1em;
6
6
  width: var(--size);
7
7
  height: var(--size);
8
+
9
+ &[data-filled='true'] {
10
+ fill: var(--m-color-main);
11
+ }
8
12
  }
9
13
 
10
14
  .spinner {
@@ -2,7 +2,7 @@ import type { StoryObj } from '@storybook/react-vite';
2
2
  import { Icon } from './Icon.js';
3
3
  declare const meta: {
4
4
  title: string;
5
- component: ({ ref, name, size, className, loading: loadingProp, render, style, ...rest }: import("./Icon.js").IconProps & {
5
+ component: ({ ref, name, size, className, loading: loadingProp, render, style, filled, ...rest }: import("./Icon.js").IconProps & {
6
6
  ref?: React.Ref<SVGSVGElement>;
7
7
  }) => import("react/jsx-runtime").JSX.Element;
8
8
  argTypes: {
@@ -90,6 +90,12 @@
90
90
  position: relative;
91
91
  display: flex;
92
92
 
93
+ & img,
94
+ & svg {
95
+ width: --fn-literal(15px);
96
+ height: --fn-literal(15px);
97
+ }
98
+
93
99
  @media (min-width: 768px) {
94
100
  @apply --mx-bg(var(--m-color-neutral-light));
95
101
  @apply --mx-bg-faded(50%);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@a-type/ui",
3
- "version": "6.0.31",
3
+ "version": "6.0.33",
4
4
  "type": "module",
5
5
  "repository": {
6
6
  "url": "https://github.com/a-type/ui"
@@ -76,7 +76,6 @@ export function ButtonRoot({
76
76
  const buttonProps = {
77
77
  ref: finalRef,
78
78
  ...iconOnlyTools.props,
79
- ...props,
80
79
  disabled: disabled || isLoading,
81
80
  'data-input-border-flush': true,
82
81
  'data-disabled': visuallyDisabled,
@@ -96,6 +95,7 @@ export function ButtonRoot({
96
95
  color ? `@mode-${color}` : '',
97
96
  className,
98
97
  ),
98
+ ...props,
99
99
  };
100
100
  // set state when toggleable
101
101
  if (toggled !== undefined) {
@@ -16,8 +16,8 @@
16
16
  font-weight: var(--m-prose-ambient-weight);
17
17
  font-family: var(--m-prose-ambient-font);
18
18
 
19
- &:not(:is(button)) {
20
- padding: var(--m-action-padding);
19
+ && {
20
+ padding: var(--m-space-sm) var(--m-space-md);
21
21
  }
22
22
 
23
23
  &[data-emphasis='primary'] {
@@ -48,7 +48,9 @@ export const AsButton: Story = {
48
48
  render(args) {
49
49
  return (
50
50
  <Box gap items="center">
51
- <Button render={<Chip color="primary">Clickable Chip</Chip>} />
51
+ <Chip render={<Button />} emphasis="primary">
52
+ Clickable Chip
53
+ </Chip>
52
54
  <Chip {...args}>Non-clickable Chip</Chip>
53
55
  </Box>
54
56
  );
@@ -8,13 +8,13 @@ export interface ChipProps extends SlotDivProps {
8
8
  emphasis?: 'default' | 'primary' | 'ambient';
9
9
  }
10
10
 
11
- export function Chip({ className, ...rest }: ChipProps) {
11
+ export function Chip({ className, emphasis, ...rest }: ChipProps) {
12
12
  return (
13
13
  <SlotDiv
14
- className={classNames('@mode-dense', cls.root, className)}
14
+ className={classNames(cls.root, className)}
15
15
  role={rest.onClick ? 'button' : undefined}
16
- data-emphasis={rest.emphasis ?? 'default'}
17
16
  {...rest}
17
+ data-emphasis={emphasis ?? 'default'}
18
18
  />
19
19
  );
20
20
  }
@@ -2,9 +2,13 @@
2
2
  fill: none;
3
3
  flex-shrink: 0;
4
4
 
5
- --size: calc(round(16px / var(--m-global-space-density), 1px));
5
+ --size: 1em;
6
6
  width: var(--size);
7
7
  height: var(--size);
8
+
9
+ &[data-filled='true'] {
10
+ fill: var(--m-color-main);
11
+ }
8
12
  }
9
13
 
10
14
  .spinner {
@@ -14,6 +14,7 @@ export interface IconProps
14
14
  name: IconName;
15
15
  size?: number;
16
16
  loading?: boolean;
17
+ filled?: boolean;
17
18
  }
18
19
 
19
20
  export const Icon = function Icon({
@@ -24,6 +25,7 @@ export const Icon = function Icon({
24
25
  loading: loadingProp,
25
26
  render,
26
27
  style,
28
+ filled,
27
29
  ...rest
28
30
  }: IconProps & {
29
31
  ref?: React.Ref<SVGSVGElement>;
@@ -48,6 +50,7 @@ export const Icon = function Icon({
48
50
  name,
49
51
  loading,
50
52
  icon: true,
53
+ filled,
51
54
  },
52
55
  render,
53
56
  });
@@ -90,6 +90,12 @@
90
90
  position: relative;
91
91
  display: flex;
92
92
 
93
+ & img,
94
+ & svg {
95
+ width: --fn-literal(15px);
96
+ height: --fn-literal(15px);
97
+ }
98
+
93
99
  @media (min-width: 768px) {
94
100
  @apply --mx-bg(var(--m-color-neutral-light));
95
101
  @apply --mx-bg-faded(50%);