@stack-spot/citric-react 0.9.0 → 0.10.0

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.
Files changed (7) hide show
  1. package/dist/citric.css +4 -4
  2. package/dist/components/IconBox.d.ts +6 -6
  3. package/dist/components/IconBox.d.ts.map +1 -1
  4. package/dist/components/IconBox.js +3 -14
  5. package/dist/components/IconBox.js.map +1 -1
  6. package/package.json +3 -3
  7. package/src/components/IconBox.tsx +19 -35
package/dist/citric.css CHANGED
@@ -648,11 +648,11 @@
648
648
  margin-left: 6px;
649
649
  }
650
650
  &.asc:after {
651
- content: var(--citric-icon-fill-ChevronUpFill);
651
+ content: var(--citric-icon-fill-ChevronUp);
652
652
  font-family: CitricIconsFill;
653
653
  }
654
654
  &.desc:after {
655
- content: var(--citric-icon-fill-ChevronDownFill);
655
+ content: var(--citric-icon-fill-ChevronDown);
656
656
  font-family: CitricIconsFill;
657
657
  }
658
658
  }
@@ -1299,7 +1299,7 @@ input[type="range"][data-citric="slider"] {
1299
1299
 
1300
1300
  [data-citric="rating"] {
1301
1301
  --icon: var(--citric-icon-outline-Star);
1302
- --icon-fill: var(--citric-icon-fill-StarFill);
1302
+ --icon-fill: var(--citric-icon-fill-Star);
1303
1303
  display: flex;
1304
1304
  flex-direction: row-reverse;
1305
1305
  width: fit-content;
@@ -1971,7 +1971,7 @@ input[type="reset"][data-citric="icon-box"], .apply-citric input[type="reset"].c
1971
1971
 
1972
1972
  input[data-citric="favorite"][type="checkbox"] {
1973
1973
  --icon: var(--citric-icon-outline-Star);
1974
- --icon-fill: var(--citric-icon-fill-StarFill);
1974
+ --icon-fill: var(--citric-icon-fill-Star);
1975
1975
  --height: 42px;
1976
1976
  display: flex;
1977
1977
  align-items: center;
package/dist/components/IconBox.d.ts CHANGED
@@ -1,11 +1,11 @@
1
- import { IconGroup, IconOwnProps } from '@stack-spot/citric-icons';
1
+ import { BaseIconProps, IconGroup } from '@stack-spot/citric-icons';
2
2
  import { HTMLTag, WithColorPalette, WithColorScheme } from '../types.js';
3
3
  type IconBoxTag = 'a' | 'button' | 'i' | 'span' | 'div';
4
- export interface BaseIconBoxProps<T extends IconBoxTag, G extends IconGroup> extends Partial<IconOwnProps<G>>, WithColorScheme, WithColorPalette {
4
+ export interface BaseIconBoxProps<T extends IconBoxTag, G extends IconGroup> extends BaseIconProps<G>, WithColorScheme, WithColorPalette {
5
5
  /**
6
6
  * The HTML element to render.
7
7
  *
8
- * @default "'i' if the icon is provided, 'span' otherwise"
8
+ * @default 'i'
9
9
  */
10
10
  tag?: T;
11
11
  /**
@@ -13,7 +13,7 @@ export interface BaseIconBoxProps<T extends IconBoxTag, G extends IconGroup> ext
13
13
  *
14
14
  * @default 'circle'
15
15
  */
16
- appearance?: 'circle' | 'square' | 'text';
16
+ appearance?: 'circle' | 'square';
17
17
  /**
18
18
  * Size of the box.
19
19
  *
@@ -36,8 +36,8 @@ export interface BaseIconBoxProps<T extends IconBoxTag, G extends IconGroup> ext
36
36
  */
37
37
  analytics?: boolean;
38
38
  }
39
- export type IconBoxProps<T extends IconBoxTag, G extends IconGroup> = HTMLTag[T] & BaseIconBoxProps<T, G>;
40
- export declare function IconBox<T extends IconBoxTag = 'i', G extends IconGroup = 'outline'>({ group, icon, tag, colorScheme, colorPalette, appearance, size, className, analytics, onClick, feedback, children, ...props }: IconBoxProps<T, G>): import("react/jsx-runtime").JSX.Element;
39
+ export type IconBoxProps<T extends IconBoxTag, G extends IconGroup> = Omit<HTMLTag[T], 'children'> & BaseIconBoxProps<T, G>;
40
+ export declare function IconBox<T extends IconBoxTag = 'i', G extends IconGroup = 'outline'>({ group, icon, tag, colorScheme, colorPalette, appearance, size, className, analytics, onClick, feedback, ...props }: IconBoxProps<T, G>): import("react/jsx-runtime").JSX.Element;
41
41
  /**
42
42
  * Shortcut to <IconBox tag="button" />
43
43
  */
package/dist/components/IconBox.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"IconBox.d.ts","sourceRoot":"","sources":["../../src/components/IconBox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIlE,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAGrE,KAAK,UAAU,GAAG,GAAG,GAAG,QAAQ,GAAG,GAAG,GAAG,MAAM,GAAG,KAAK,CAAA;AAEvD,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,UAAU,EAAE,CAAC,SAAS,SAAS,CAAE,SAC3E,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,EAAE,eAAe,EAAE,gBAAgB;IAC3D;;;;OAIG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC;IACR;;;;OAIG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC1C;;;;OAIG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;;OASG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,UAAU,EAAE,CAAC,SAAS,SAAS,IAAI,OAAO,CAAC,CAAC,CAAC,GAAG,gBAAgB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;AAEzG,wBAAgB,OAAO,CAAC,CAAC,SAAS,UAAU,GAAG,GAAG,EAAE,CAAC,SAAS,SAAS,GAAG,SAAS,EAAE,EACnF,KAAK,EACL,IAAI,EACJ,GAAG,EACH,WAAW,EACX,YAAY,EACZ,UAAU,EACV,IAAI,EACJ,SAAS,EACT,SAAS,EACT,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,YAAY,CAAC,CAAC,EAAE,CAAC,CAAC,2CAsBpB;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,2CAExG;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,2CAEjG"}
1
+ {"version":3,"file":"IconBox.d.ts","sourceRoot":"","sources":["../../src/components/IconBox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AAInE,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAGrE,KAAK,UAAU,GAAG,GAAG,GAAG,QAAQ,GAAG,GAAG,GAAG,MAAM,GAAG,KAAK,CAAA;AAEvD,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,UAAU,EAAE,CAAC,SAAS,SAAS,CAAE,SAAQ,aAAa,CAAC,CAAC,CAAC,EAAE,eAAe,EAAE,gBAAgB;IACtI;;;;OAIG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC;IACR;;;;OAIG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACjC;;;;OAIG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;;OASG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,UAAU,EAAE,CAAC,SAAS,SAAS,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,GAAG,gBAAgB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;AAE3H,wBAAgB,OAAO,CAAC,CAAC,SAAS,UAAU,GAAG,GAAG,EAAE,CAAC,SAAS,SAAS,GAAG,SAAS,EACjF,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,WAAW,EAAE,YAAY,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,CAAC,CAAC,EAAE,CAAC,CAAC,2CAoBzI;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,2CAExG;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,2CAEjG"}
package/dist/components/IconBox.js CHANGED
@@ -2,8 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { listToClass } from '@stack-spot/portal-theme';
3
3
  import { useCallback } from 'react';
4
4
  import { useCitricController } from '../context/hooks.js';
5
- import { asCitricProps, CitricComponent } from './CitricComponent.js';
6
- export function IconBox({ group, icon, tag, colorScheme, colorPalette, appearance, size, className, analytics, onClick, feedback, children, ...props }) {
5
+ import { CitricComponent } from './CitricComponent.js';
6
+ export function IconBox({ group, icon, tag, colorScheme, colorPalette, appearance, size, className, analytics, onClick, feedback, ...props }) {
7
7
  const citric = useCitricController();
8
8
  const handleClick = useCallback((e) => {
9
9
  onClick?.(e);
@@ -12,18 +12,7 @@ export function IconBox({ group, icon, tag, colorScheme, colorPalette, appearanc
12
12
  else if (tag === 'a')
13
13
  citric?.onClickLink?.(e, analytics ?? false);
14
14
  }, [tag]);
15
- const allProps = {
16
- component: 'icon-box',
17
- className: listToClass([icon && 'citric-icon', icon && (group || 'outline'), icon, appearance, size, className]),
18
- colorScheme: colorScheme,
19
- colorPalette: colorPalette,
20
- 'data-feedback': feedback || undefined,
21
- onClick: ['button', 'a'].includes(tag ?? '') ? handleClick : onClick,
22
- ...props,
23
- };
24
- if (tag === 'a' && citric?.renderLink)
25
- return citric.renderLink(asCitricProps(allProps));
26
- return _jsx(CitricComponent, { tag: (tag || (icon ? 'i' : 'span')), ...allProps, children: children });
15
+ return _jsx(CitricComponent, { tag: (tag || 'i'), component: "icon-box", className: listToClass(['citric-icon', group || 'outline', icon, appearance, size, className]), colorScheme: colorScheme, colorPalette: colorPalette, "data-feedback": feedback || undefined, onClick: ['button', 'a'].includes(tag ?? '') ? handleClick : onClick, ...props });
27
16
  }
28
17
  /**
29
18
  * Shortcut to <IconBox tag="button" />
package/dist/components/IconBox.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"IconBox.js","sourceRoot":"","sources":["../../src/components/IconBox.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AACnC,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AA2ClE,MAAM,UAAU,OAAO,CAA8D,EACnF,KAAK,EACL,IAAI,EACJ,GAAG,EACH,WAAW,EACX,YAAY,EACZ,UAAU,EACV,IAAI,EACJ,SAAS,EACT,SAAS,EACT,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACW;IACnB,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAA;IAEpC,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,CAAwB,EAAE,EAAE;QAC3D,OAAO,EAAE,CAAC,CAAC,CAAC,CAAA;QACZ,IAAI,GAAG,KAAK,QAAQ;YAAE,MAAM,EAAE,aAAa,EAAE,CAAC,CAAC,EAAE,SAAS,IAAI,KAAK,CAAC,CAAA;aAC/D,IAAI,GAAG,KAAK,GAAG;YAAE,MAAM,EAAE,WAAW,EAAE,CAAC,CAAC,EAAE,SAAS,IAAI,KAAK,CAAC,CAAA;IACpE,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAA;IAET,MAAM,QAAQ,GAAG;QACf,SAAS,EAAE,UAAU;QACrB,SAAS,EAAE,WAAW,CAAC,CAAC,IAAI,IAAI,aAAa,EAAE,IAAI,IAAI,CAAC,KAAK,IAAI,SAAS,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC;QAChH,WAAW,EAAE,WAAW;QACxB,YAAY,EAAE,YAAY;QAC1B,eAAe,EAAE,QAAQ,IAAI,SAAS;QACtC,OAAO,EAAE,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,QAAQ,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO;QACpE,GAAG,KAAK;KACA,CAAA;IAEV,IAAI,GAAG,KAAK,GAAG,IAAI,MAAM,EAAE,UAAU;QAAE,OAAO,MAAM,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAA;IAExF,OAAO,KAAC,eAAe,IAAC,GAAG,EAAE,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAQ,KAAM,QAAQ,YAAG,QAAQ,GAAmB,CAAA;AAChH,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,UAAU,CAAkC,KAA6C;IACvG,OAAO,OAAO,CAAC,EAAE,GAAG,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,QAAQ,EAAE,CAAC,CAAA;AAC3E,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,QAAQ,CAAkC,KAAwC;IAChG,OAAO,OAAO,CAAC,EAAE,GAAG,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAA;AACxC,CAAC"}
1
+ {"version":3,"file":"IconBox.js","sourceRoot":"","sources":["../../src/components/IconBox.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AACnC,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AA0CnD,MAAM,UAAU,OAAO,CACrB,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,WAAW,EAAE,YAAY,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAsB;IAExI,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAA;IAEpC,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,CAAwB,EAAE,EAAE;QAC3D,OAAO,EAAE,CAAC,CAAC,CAAC,CAAA;QACZ,IAAI,GAAG,KAAK,QAAQ;YAAE,MAAM,EAAE,aAAa,EAAE,CAAC,CAAC,EAAE,SAAS,IAAI,KAAK,CAAC,CAAA;aAC/D,IAAI,GAAG,KAAK,GAAG;YAAE,MAAM,EAAE,WAAW,EAAE,CAAC,CAAC,EAAE,SAAS,IAAI,KAAK,CAAC,CAAA;IACpE,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAA;IAET,OAAO,KAAC,eAAe,IACrB,GAAG,EAAE,CAAC,GAAG,IAAI,GAAG,CAAQ,EACxB,SAAS,EAAC,UAAU,EACpB,SAAS,EAAE,WAAW,CAAC,CAAC,aAAa,EAAE,KAAK,IAAI,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC,EAC9F,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,mBACX,QAAQ,IAAI,SAAS,EACpC,OAAO,EAAE,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,QAAQ,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,KAChE,KAAK,GACT,CAAA;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,UAAU,CAAkC,KAA6C;IACvG,OAAO,OAAO,CAAC,EAAE,GAAG,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,QAAQ,EAAE,CAAC,CAAA;AAC3E,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,QAAQ,CAAkC,KAAwC;IAChG,OAAO,OAAO,CAAC,EAAE,GAAG,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAA;AACxC,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stack-spot/citric-react",
3
- "version": "0.9.0",
3
+ "version": "0.10.0",
4
4
  "author": "StackSpot",
5
5
  "main": "dist/index.js",
6
6
  "typings": "dist/index.d.ts",
@@ -15,8 +15,8 @@
15
15
  "url": "https://github.com/stack-spot/citric"
16
16
  },
17
17
  "peerDependencies": {
18
- "@stack-spot/citric-icons": ">=0.1.1",
19
- "@stack-spot/portal-theme": ">=1.2.0",
18
+ "@stack-spot/citric-icons": ">=0.2.1",
19
+ "@stack-spot/portal-theme": ">=1.2.1",
20
20
  "@stack-spot/portal-translate": ">=1.2.2",
21
21
  "lodash": ">=4.17.21",
22
22
  "react": ">=18",
package/src/components/IconBox.tsx CHANGED
@@ -1,18 +1,17 @@
1
- import { IconGroup, IconOwnProps } from '@stack-spot/citric-icons'
1
+ import { BaseIconProps, IconGroup } from '@stack-spot/citric-icons'
2
2
  import { listToClass } from '@stack-spot/portal-theme'
3
3
  import { useCallback } from 'react'
4
4
  import { useCitricController } from '../context/hooks'
5
5
  import { HTMLTag, WithColorPalette, WithColorScheme } from '../types'
6
- import { asCitricProps, CitricComponent } from './CitricComponent'
6
+ import { CitricComponent } from './CitricComponent'
7
7
 
8
8
  type IconBoxTag = 'a' | 'button' | 'i' | 'span' | 'div'
9
9
 
10
- export interface BaseIconBoxProps<T extends IconBoxTag, G extends IconGroup> extends
11
- Partial<IconOwnProps<G>>, WithColorScheme, WithColorPalette {
10
+ export interface BaseIconBoxProps<T extends IconBoxTag, G extends IconGroup> extends BaseIconProps<G>, WithColorScheme, WithColorPalette {
12
11
  /**
13
12
  * The HTML element to render.
14
13
  *
15
- * @default "'i' if the icon is provided, 'span' otherwise"
14
+ * @default 'i'
16
15
  */
17
16
  tag?: T,
18
17
  /**
@@ -20,7 +19,7 @@ export interface BaseIconBoxProps<T extends IconBoxTag, G extends IconGroup> ext
20
19
  *
21
20
  * @default 'circle'
22
21
  */
23
- appearance?: 'circle' | 'square' | 'text',
22
+ appearance?: 'circle' | 'square',
24
23
  /**
25
24
  * Size of the box.
26
25
  *
@@ -44,23 +43,11 @@ export interface BaseIconBoxProps<T extends IconBoxTag, G extends IconGroup> ext
44
43
  analytics?: boolean,
45
44
  }
46
45
 
47
- export type IconBoxProps<T extends IconBoxTag, G extends IconGroup> = HTMLTag[T] & BaseIconBoxProps<T, G>
46
+ export type IconBoxProps<T extends IconBoxTag, G extends IconGroup> = Omit<HTMLTag[T], 'children'> & BaseIconBoxProps<T, G>
48
47
 
49
- export function IconBox<T extends IconBoxTag = 'i', G extends IconGroup = 'outline'>({
50
- group,
51
- icon,
52
- tag,
53
- colorScheme,
54
- colorPalette,
55
- appearance,
56
- size,
57
- className,
58
- analytics,
59
- onClick,
60
- feedback,
61
- children,
62
- ...props
63
- }: IconBoxProps<T, G>) {
48
+ export function IconBox<T extends IconBoxTag = 'i', G extends IconGroup = 'outline'>(
49
+ { group, icon, tag, colorScheme, colorPalette, appearance, size, className, analytics, onClick, feedback, ...props }: IconBoxProps<T, G>,
50
+ ) {
64
51
  const citric = useCitricController()
65
52
 
66
53
  const handleClick = useCallback((e: React.MouseEvent<any>) => {
@@ -69,19 +56,16 @@ export function IconBox<T extends IconBoxTag = 'i', G extends IconGroup = 'outli
69
56
  else if (tag === 'a') citric?.onClickLink?.(e, analytics ?? false)
70
57
  }, [tag])
71
58
 
72
- const allProps = {
73
- component: 'icon-box',
74
- className: listToClass([icon && 'citric-icon', icon && (group || 'outline'), icon, appearance, size, className]),
75
- colorScheme: colorScheme,
76
- colorPalette: colorPalette,
77
- 'data-feedback': feedback || undefined,
78
- onClick: ['button', 'a'].includes(tag ?? '') ? handleClick : onClick,
79
- ...props,
80
- } as const
81
-
82
- if (tag === 'a' && citric?.renderLink) return citric.renderLink(asCitricProps(allProps))
83
-
84
- return <CitricComponent tag={(tag || (icon ? 'i' : 'span')) as any} {...allProps}>{children}</CitricComponent>
59
+ return <CitricComponent
60
+ tag={(tag || 'i') as any}
61
+ component="icon-box"
62
+ className={listToClass(['citric-icon', group || 'outline', icon, appearance, size, className])}
63
+ colorScheme={colorScheme}
64
+ colorPalette={colorPalette}
65
+ data-feedback={feedback || undefined}
66
+ onClick={['button', 'a'].includes(tag ?? '') ? handleClick : onClick}
67
+ {...props}
68
+ />
85
69
  }
86
70
 
87
71
  /**