@semcore/icon 16.7.2-prerelease.27 → 16.7.2-prerelease.29

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/lib/cjs/Icon.js +30 -1
  2. package/lib/cjs/Icon.js.map +1 -1
  3. package/lib/es6/Icon.js +30 -1
  4. package/lib/es6/Icon.js.map +1 -1
  5. package/lib/esm/Icon.mjs +30 -1
  6. package/lib/types/Icon.d.ts +20 -2
  7. package/package.json +50 -50
package/lib/cjs/Icon.js CHANGED
@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.default = void 0;
8
8
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9
9
  var _core = require("@semcore/core");
10
+ var _indentStyles = require("@semcore/core/lib/utils/indentStyles");
10
11
  var _propsForElement = _interopRequireDefault(require("@semcore/core/lib/utils/propsForElement"));
11
12
  var _useColorResolver = require("@semcore/core/lib/utils/use/useColorResolver");
12
13
  var _react = _interopRequireDefault(require("react"));
@@ -17,11 +18,28 @@ const styles = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_sta
17
18
  "__SIcon": "___SIcon_814te_gg_",
18
19
  "--color": "--color_814te"
19
20
  });
21
+ function calculateIndentStyles(props, scaleIndent) {
22
+ return (0, _indentStyles.removeUndefinedKeys)({
23
+ margin: (0, _indentStyles.getAutoOrScaleIndent)(props['m'], scaleIndent),
24
+ marginTop: (0, _indentStyles.getAutoOrScaleIndent)(props['mt'], scaleIndent) || (0, _indentStyles.getAutoOrScaleIndent)(props['my'], scaleIndent),
25
+ marginBottom: (0, _indentStyles.getAutoOrScaleIndent)(props['mb'], scaleIndent) || (0, _indentStyles.getAutoOrScaleIndent)(props['my'], scaleIndent),
26
+ marginLeft: (0, _indentStyles.getAutoOrScaleIndent)(props['ml'], scaleIndent) || (0, _indentStyles.getAutoOrScaleIndent)(props['mx'], scaleIndent),
27
+ marginRight: (0, _indentStyles.getAutoOrScaleIndent)(props['mr'], scaleIndent) || (0, _indentStyles.getAutoOrScaleIndent)(props['mx'], scaleIndent)
28
+ });
29
+ }
20
30
  function Icon({
21
31
  width = 16,
22
32
  height = 16,
23
33
  viewBox = '0 0 16 16',
24
34
  color: colorProps,
35
+ scaleIndent = 4,
36
+ m,
37
+ mt,
38
+ mb,
39
+ my,
40
+ ml,
41
+ mr,
42
+ mx,
25
43
  ...props
26
44
  }, ref) {
27
45
  const SIcon = 'svg';
@@ -34,13 +52,24 @@ function Icon({
34
52
  } = sstyles.cn('SIcon', {
35
53
  'use:color': color
36
54
  });
55
+ const indentStyles = _react.default.useMemo(() => {
56
+ return calculateIndentStyles({
57
+ m,
58
+ mt,
59
+ mb,
60
+ my,
61
+ ml,
62
+ mr,
63
+ mx
64
+ }, scaleIndent);
65
+ }, [scaleIndent, m, mt, mb, my, ml, mr, mx]);
37
66
  return /*#__PURE__*/_react.default.createElement(SIcon, (0, _extends2.default)({
38
67
  width: width,
39
68
  height: height,
40
69
  viewBox: viewBox,
41
70
  "aria-hidden": "true"
42
71
  }, (0, _propsForElement.default)(props), {
43
- style: Object.assign({}, style, props.style),
72
+ style: Object.assign({}, style, props.style, indentStyles),
44
73
  className: `${className} ${props.className ?? ''}`,
45
74
  ref: ref
46
75
  }));
package/lib/cjs/Icon.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Icon.js","names":["_core","require","_propsForElement","_interopRequireDefault","_useColorResolver","_react","styles","sstyled","insert","Icon","width","height","viewBox","color","colorProps","props","ref","SIcon","resolveColor","useColorResolver","sstyles","className","style","cn","default","createElement","_extends2","propsForElement","Object","assign","_default","exports","createBaseComponent"],"sources":["../../src/Icon.tsx"],"sourcesContent":["import { createBaseComponent, sstyled } from '@semcore/core';\nimport propsForElement from '@semcore/core/lib/utils/propsForElement';\nimport { useColorResolver } from '@semcore/core/lib/utils/use/useColorResolver';\nimport React from 'react';\n\nimport styles from './style/icon.shadow.css';\n\nexport type IconProps = React.SVGProps<SVGSVGElement> & {\n /**\n * Icon width\n * @internal\n */\n width?: string | number;\n /**\n * Icon height\n * @internal\n */\n height?: string | number;\n /**\n * SVG viewBox attribute\n * @internal\n */\n viewBox?: string;\n /** Icon color */\n color?: string;\n};\n\nfunction Icon({\n width = 16,\n height = 16,\n viewBox = '0 0 16 16',\n color: colorProps,\n ...props\n}: IconProps, ref: React.ForwardedRef<SVGSVGElement>) {\n const SIcon = 'svg';\n\n const resolveColor = useColorResolver();\n const color = resolveColor(colorProps);\n\n const sstyles = sstyled(styles);\n const { className, style } = sstyles.cn('SIcon', {\n 'use:color': color,\n });\n\n return (\n <SIcon\n width={width}\n height={height}\n viewBox={viewBox}\n aria-hidden='true'\n {...propsForElement(props)}\n style={Object.assign({}, style, props.style)}\n className={`${className} ${props.className ?? ''}`}\n ref={ref}\n />\n );\n}\n\nexport default createBaseComponent<'svg', IconProps>(Icon);\n"],"mappings":";;;;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,gBAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,iBAAA,GAAAH,OAAA;AACA,IAAAI,MAAA,GAAAF,sBAAA,CAAAF,OAAA;AAA0B;AAAA,MAAAK,MAAA,8BAAAN,KAAA,CAAAO,OAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;AAAA;AAwB1B,SAASC,IAAIA,CAAC;EACZC,KAAK,GAAG,EAAE;EACVC,MAAM,GAAG,EAAE;EACXC,OAAO,GAAG,WAAW;EACrBC,KAAK,EAAEC,UAAU;EACjB,GAAGC;AACM,CAAC,EAAEC,GAAsC,EAAE;EACpD,MAAMC,KAAK,GAAG,KAAK;EAEnB,MAAMC,YAAY,GAAG,IAAAC,kCAAgB,EAAC,CAAC;EACvC,MAAMN,KAAK,GAAGK,YAAY,CAACJ,UAAU,CAAC;EAEtC,MAAMM,OAAO,GAAG,IAAAb,aAAO,EAACD,MAAM,CAAC;EAC/B,MAAM;IAAEe,SAAS;IAAEC;EAAM,CAAC,GAAGF,OAAO,CAACG,EAAE,CAAC,OAAO,EAAE;IAC/C,WAAW,EAAEV;EACf,CAAC,CAAC;EAEF,oBACER,MAAA,CAAAmB,OAAA,CAAAC,aAAA,CAACR,KAAK,MAAAS,SAAA,CAAAF,OAAA;IACJd,KAAK,EAAEA,KAAM;IACbC,MAAM,EAAEA,MAAO;IACfC,OAAO,EAAEA,OAAQ;IACjB,eAAY;EAAM,GACd,IAAAe,wBAAe,EAACZ,KAAK,CAAC;IAC1BO,KAAK,EAAEM,MAAM,CAACC,MAAM,CAAC,CAAC,CAAC,EAAEP,KAAK,EAAEP,KAAK,CAACO,KAAK,CAAE;IAC7CD,SAAS,EAAE,GAAGA,SAAS,IAAIN,KAAK,CAACM,SAAS,IAAI,EAAE,EAAG;IACnDL,GAAG,EAAEA;EAAI,EACV,CAAC;AAEN;AAAC,IAAAc,QAAA,GAAAC,OAAA,CAAAP,OAAA,GAEc,IAAAQ,yBAAmB,EAAmBvB,IAAI,CAAC","ignoreList":[]}
1
+ {"version":3,"file":"Icon.js","names":["_core","require","_indentStyles","_propsForElement","_interopRequireDefault","_useColorResolver","_react","styles","sstyled","insert","calculateIndentStyles","props","scaleIndent","removeUndefinedKeys","margin","getAutoOrScaleIndent","marginTop","marginBottom","marginLeft","marginRight","Icon","width","height","viewBox","color","colorProps","m","mt","mb","my","ml","mr","mx","ref","SIcon","resolveColor","useColorResolver","sstyles","className","style","cn","indentStyles","React","useMemo","default","createElement","_extends2","propsForElement","Object","assign","_default","exports","createBaseComponent"],"sources":["../../src/Icon.tsx"],"sourcesContent":["import { createBaseComponent, sstyled } from '@semcore/core';\nimport { removeUndefinedKeys, getAutoOrScaleIndent } from '@semcore/core/lib/utils/indentStyles';\nimport propsForElement from '@semcore/core/lib/utils/propsForElement';\nimport { useColorResolver } from '@semcore/core/lib/utils/use/useColorResolver';\nimport React from 'react';\n\nimport styles from './style/icon.shadow.css';\n\nexport type IconProps = {\n /**\n * Icon width\n * @internal\n */\n width?: string | number;\n /**\n * Icon height\n * @internal\n */\n height?: string | number;\n /**\n * SVG viewBox attribute\n * @internal\n */\n viewBox?: string;\n /** Icon color */\n color?: string;\n\n /** CSS `margin` property */\n m?: number | string;\n\n /** CSS `margin-top` property */\n mt?: number | string;\n\n /** CSS `margin-right` property */\n mr?: number | string;\n\n /** CSS `margin-bottom` property */\n mb?: number | string;\n\n /** CSS `margin-left` property */\n ml?: number | string;\n\n /** CSS `margin-left` and `margin-right` property */\n mx?: number | string;\n\n /** CSS `margin-top` and `margin-bottom` property */\n my?: number | string;\n\n /**\n * Multiplier of all indents. For example, if you specify a margin-top equal to 3 (mt = {3}), it will be 12px (3 * 4 = 12).\n * @default 4\n */\n scaleIndent?: number;\n};\n\nfunction calculateIndentStyles(props: IconProps, scaleIndent: number) {\n return removeUndefinedKeys({\n margin: getAutoOrScaleIndent(props['m'], scaleIndent),\n marginTop:\n getAutoOrScaleIndent(props['mt'], scaleIndent) ||\n getAutoOrScaleIndent(props['my'], scaleIndent),\n marginBottom:\n getAutoOrScaleIndent(props['mb'], scaleIndent) ||\n getAutoOrScaleIndent(props['my'], scaleIndent),\n marginLeft:\n getAutoOrScaleIndent(props['ml'], scaleIndent) ||\n getAutoOrScaleIndent(props['mx'], scaleIndent),\n marginRight:\n getAutoOrScaleIndent(props['mr'], scaleIndent) ||\n getAutoOrScaleIndent(props['mx'], scaleIndent),\n });\n}\n\nfunction Icon({\n width = 16,\n height = 16,\n viewBox = '0 0 16 16',\n color: colorProps,\n scaleIndent = 4,\n m,\n mt,\n mb,\n my,\n ml,\n mr,\n mx,\n ...props\n}: React.SVGProps<SVGSVGElement> & IconProps, ref: React.ForwardedRef<SVGSVGElement>) {\n const SIcon = 'svg';\n\n const resolveColor = useColorResolver();\n const color = resolveColor(colorProps);\n\n const sstyles = sstyled(styles);\n const { className, style } = sstyles.cn('SIcon', {\n 'use:color': color,\n });\n\n const indentStyles: React.CSSProperties = React.useMemo(() => {\n return calculateIndentStyles({ m, mt, mb, my, ml, mr, mx }, scaleIndent);\n }, [\n scaleIndent,\n m,\n mt,\n mb,\n my,\n ml,\n mr,\n mx,\n ]);\n\n return (\n <SIcon\n width={width}\n height={height}\n viewBox={viewBox}\n aria-hidden='true'\n {...propsForElement(props)}\n style={Object.assign({}, style, props.style, indentStyles)}\n className={`${className} ${props.className ?? ''}`}\n ref={ref}\n />\n );\n}\n\nexport default createBaseComponent<'svg', IconProps>(Icon);\n"],"mappings":"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","ignoreList":[]}
package/lib/es6/Icon.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import { sstyled as _sstyled } from "@semcore/core";
3
3
  import { createBaseComponent, sstyled } from '@semcore/core';
4
+ import { removeUndefinedKeys, getAutoOrScaleIndent } from '@semcore/core/lib/utils/indentStyles';
4
5
  import propsForElement from '@semcore/core/lib/utils/propsForElement';
5
6
  import { useColorResolver } from '@semcore/core/lib/utils/use/useColorResolver';
6
7
  import React from 'react';
@@ -11,11 +12,28 @@ const styles = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*
11
12
  "__SIcon": "___SIcon_814te_gg_",
12
13
  "--color": "--color_814te"
13
14
  });
15
+ function calculateIndentStyles(props, scaleIndent) {
16
+ return removeUndefinedKeys({
17
+ margin: getAutoOrScaleIndent(props['m'], scaleIndent),
18
+ marginTop: getAutoOrScaleIndent(props['mt'], scaleIndent) || getAutoOrScaleIndent(props['my'], scaleIndent),
19
+ marginBottom: getAutoOrScaleIndent(props['mb'], scaleIndent) || getAutoOrScaleIndent(props['my'], scaleIndent),
20
+ marginLeft: getAutoOrScaleIndent(props['ml'], scaleIndent) || getAutoOrScaleIndent(props['mx'], scaleIndent),
21
+ marginRight: getAutoOrScaleIndent(props['mr'], scaleIndent) || getAutoOrScaleIndent(props['mx'], scaleIndent)
22
+ });
23
+ }
14
24
  function Icon({
15
25
  width = 16,
16
26
  height = 16,
17
27
  viewBox = '0 0 16 16',
18
28
  color: colorProps,
29
+ scaleIndent = 4,
30
+ m,
31
+ mt,
32
+ mb,
33
+ my,
34
+ ml,
35
+ mr,
36
+ mx,
19
37
  ...props
20
38
  }, ref) {
21
39
  const SIcon = 'svg';
@@ -28,13 +46,24 @@ function Icon({
28
46
  } = sstyles.cn('SIcon', {
29
47
  'use:color': color
30
48
  });
49
+ const indentStyles = React.useMemo(() => {
50
+ return calculateIndentStyles({
51
+ m,
52
+ mt,
53
+ mb,
54
+ my,
55
+ ml,
56
+ mr,
57
+ mx
58
+ }, scaleIndent);
59
+ }, [scaleIndent, m, mt, mb, my, ml, mr, mx]);
31
60
  return /*#__PURE__*/React.createElement(SIcon, _extends({
32
61
  width: width,
33
62
  height: height,
34
63
  viewBox: viewBox,
35
64
  "aria-hidden": "true"
36
65
  }, propsForElement(props), {
37
- style: Object.assign({}, style, props.style),
66
+ style: Object.assign({}, style, props.style, indentStyles),
38
67
  className: `${className} ${props.className ?? ''}`,
39
68
  ref: ref
40
69
  }));
package/lib/es6/Icon.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Icon.js","names":["createBaseComponent","sstyled","propsForElement","useColorResolver","React","styles","_sstyled","insert","Icon","width","height","viewBox","color","colorProps","props","ref","SIcon","resolveColor","sstyles","className","style","cn","createElement","_extends","Object","assign"],"sources":["../../src/Icon.tsx"],"sourcesContent":["import { createBaseComponent, sstyled } from '@semcore/core';\nimport propsForElement from '@semcore/core/lib/utils/propsForElement';\nimport { useColorResolver } from '@semcore/core/lib/utils/use/useColorResolver';\nimport React from 'react';\n\nimport styles from './style/icon.shadow.css';\n\nexport type IconProps = React.SVGProps<SVGSVGElement> & {\n /**\n * Icon width\n * @internal\n */\n width?: string | number;\n /**\n * Icon height\n * @internal\n */\n height?: string | number;\n /**\n * SVG viewBox attribute\n * @internal\n */\n viewBox?: string;\n /** Icon color */\n color?: string;\n};\n\nfunction Icon({\n width = 16,\n height = 16,\n viewBox = '0 0 16 16',\n color: colorProps,\n ...props\n}: IconProps, ref: React.ForwardedRef<SVGSVGElement>) {\n const SIcon = 'svg';\n\n const resolveColor = useColorResolver();\n const color = resolveColor(colorProps);\n\n const sstyles = sstyled(styles);\n const { className, style } = sstyles.cn('SIcon', {\n 'use:color': color,\n });\n\n return (\n <SIcon\n width={width}\n height={height}\n viewBox={viewBox}\n aria-hidden='true'\n {...propsForElement(props)}\n style={Object.assign({}, style, props.style)}\n className={`${className} ${props.className ?? ''}`}\n ref={ref}\n />\n );\n}\n\nexport default createBaseComponent<'svg', IconProps>(Icon);\n"],"mappings":";;AAAA,SAASA,mBAAmB,EAAEC,OAAO,QAAQ,eAAe;AAC5D,OAAOC,eAAe,MAAM,yCAAyC;AACrE,SAASC,gBAAgB,QAAQ,8CAA8C;AAC/E,OAAOC,KAAK,MAAM,OAAO;AAAC;AAAA,MAAAC,MAAA,8BAAAC,QAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;AAAA;AAwB1B,SAASC,IAAIA,CAAC;EACZC,KAAK,GAAG,EAAE;EACVC,MAAM,GAAG,EAAE;EACXC,OAAO,GAAG,WAAW;EACrBC,KAAK,EAAEC,UAAU;EACjB,GAAGC;AACM,CAAC,EAAEC,GAAsC,EAAE;EACpD,MAAMC,KAAK,GAAG,KAAK;EAEnB,MAAMC,YAAY,GAAGd,gBAAgB,CAAC,CAAC;EACvC,MAAMS,KAAK,GAAGK,YAAY,CAACJ,UAAU,CAAC;EAEtC,MAAMK,OAAO,GAAGjB,OAAO,CAACI,MAAM,CAAC;EAC/B,MAAM;IAAEc,SAAS;IAAEC;EAAM,CAAC,GAAGF,OAAO,CAACG,EAAE,CAAC,OAAO,EAAE;IAC/C,WAAW,EAAET;EACf,CAAC,CAAC;EAEF,oBACER,KAAA,CAAAkB,aAAA,CAACN,KAAK,EAAAO,QAAA;IACJd,KAAK,EAAEA,KAAM;IACbC,MAAM,EAAEA,MAAO;IACfC,OAAO,EAAEA,OAAQ;IACjB,eAAY;EAAM,GACdT,eAAe,CAACY,KAAK,CAAC;IAC1BM,KAAK,EAAEI,MAAM,CAACC,MAAM,CAAC,CAAC,CAAC,EAAEL,KAAK,EAAEN,KAAK,CAACM,KAAK,CAAE;IAC7CD,SAAS,EAAE,GAAGA,SAAS,IAAIL,KAAK,CAACK,SAAS,IAAI,EAAE,EAAG;IACnDJ,GAAG,EAAEA;EAAI,EACV,CAAC;AAEN;AAEA,eAAef,mBAAmB,CAAmBQ,IAAI,CAAC","ignoreList":[]}
1
+ {"version":3,"file":"Icon.js","names":["createBaseComponent","sstyled","removeUndefinedKeys","getAutoOrScaleIndent","propsForElement","useColorResolver","React","styles","_sstyled","insert","calculateIndentStyles","props","scaleIndent","margin","marginTop","marginBottom","marginLeft","marginRight","Icon","width","height","viewBox","color","colorProps","m","mt","mb","my","ml","mr","mx","ref","SIcon","resolveColor","sstyles","className","style","cn","indentStyles","useMemo","createElement","_extends","Object","assign"],"sources":["../../src/Icon.tsx"],"sourcesContent":["import { createBaseComponent, sstyled } from '@semcore/core';\nimport { removeUndefinedKeys, getAutoOrScaleIndent } from '@semcore/core/lib/utils/indentStyles';\nimport propsForElement from '@semcore/core/lib/utils/propsForElement';\nimport { useColorResolver } from '@semcore/core/lib/utils/use/useColorResolver';\nimport React from 'react';\n\nimport styles from './style/icon.shadow.css';\n\nexport type IconProps = {\n /**\n * Icon width\n * @internal\n */\n width?: string | number;\n /**\n * Icon height\n * @internal\n */\n height?: string | number;\n /**\n * SVG viewBox attribute\n * @internal\n */\n viewBox?: string;\n /** Icon color */\n color?: string;\n\n /** CSS `margin` property */\n m?: number | string;\n\n /** CSS `margin-top` property */\n mt?: number | string;\n\n /** CSS `margin-right` property */\n mr?: number | string;\n\n /** CSS `margin-bottom` property */\n mb?: number | string;\n\n /** CSS `margin-left` property */\n ml?: number | string;\n\n /** CSS `margin-left` and `margin-right` property */\n mx?: number | string;\n\n /** CSS `margin-top` and `margin-bottom` property */\n my?: number | string;\n\n /**\n * Multiplier of all indents. For example, if you specify a margin-top equal to 3 (mt = {3}), it will be 12px (3 * 4 = 12).\n * @default 4\n */\n scaleIndent?: number;\n};\n\nfunction calculateIndentStyles(props: IconProps, scaleIndent: number) {\n return removeUndefinedKeys({\n margin: getAutoOrScaleIndent(props['m'], scaleIndent),\n marginTop:\n getAutoOrScaleIndent(props['mt'], scaleIndent) ||\n getAutoOrScaleIndent(props['my'], scaleIndent),\n marginBottom:\n getAutoOrScaleIndent(props['mb'], scaleIndent) ||\n getAutoOrScaleIndent(props['my'], scaleIndent),\n marginLeft:\n getAutoOrScaleIndent(props['ml'], scaleIndent) ||\n getAutoOrScaleIndent(props['mx'], scaleIndent),\n marginRight:\n getAutoOrScaleIndent(props['mr'], scaleIndent) ||\n getAutoOrScaleIndent(props['mx'], scaleIndent),\n });\n}\n\nfunction Icon({\n width = 16,\n height = 16,\n viewBox = '0 0 16 16',\n color: colorProps,\n scaleIndent = 4,\n m,\n mt,\n mb,\n my,\n ml,\n mr,\n mx,\n ...props\n}: React.SVGProps<SVGSVGElement> & IconProps, ref: React.ForwardedRef<SVGSVGElement>) {\n const SIcon = 'svg';\n\n const resolveColor = useColorResolver();\n const color = resolveColor(colorProps);\n\n const sstyles = sstyled(styles);\n const { className, style } = sstyles.cn('SIcon', {\n 'use:color': color,\n });\n\n const indentStyles: React.CSSProperties = React.useMemo(() => {\n return calculateIndentStyles({ m, mt, mb, my, ml, mr, mx }, scaleIndent);\n }, [\n scaleIndent,\n m,\n mt,\n mb,\n my,\n ml,\n mr,\n mx,\n ]);\n\n return (\n <SIcon\n width={width}\n height={height}\n viewBox={viewBox}\n aria-hidden='true'\n {...propsForElement(props)}\n style={Object.assign({}, style, props.style, indentStyles)}\n className={`${className} ${props.className ?? ''}`}\n ref={ref}\n />\n );\n}\n\nexport default createBaseComponent<'svg', IconProps>(Icon);\n"],"mappings":"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","ignoreList":[]}
package/lib/esm/Icon.mjs CHANGED
@@ -1,5 +1,6 @@
1
1
  import _extends from "@babel/runtime/helpers/esm/extends";
2
2
  import { createBaseComponent, sstyled } from "@semcore/core";
3
+ import { removeUndefinedKeys, getAutoOrScaleIndent } from "@semcore/core/lib/utils/indentStyles";
3
4
  import propsForElement from "@semcore/core/lib/utils/propsForElement";
4
5
  import { useColorResolver } from "@semcore/core/lib/utils/use/useColorResolver";
5
6
  import React from "react";
@@ -17,11 +18,28 @@ const styles = (
17
18
  "--color": "--color_814te"
18
19
  })
19
20
  );
21
+ function calculateIndentStyles(props, scaleIndent) {
22
+ return removeUndefinedKeys({
23
+ margin: getAutoOrScaleIndent(props["m"], scaleIndent),
24
+ marginTop: getAutoOrScaleIndent(props["mt"], scaleIndent) || getAutoOrScaleIndent(props["my"], scaleIndent),
25
+ marginBottom: getAutoOrScaleIndent(props["mb"], scaleIndent) || getAutoOrScaleIndent(props["my"], scaleIndent),
26
+ marginLeft: getAutoOrScaleIndent(props["ml"], scaleIndent) || getAutoOrScaleIndent(props["mx"], scaleIndent),
27
+ marginRight: getAutoOrScaleIndent(props["mr"], scaleIndent) || getAutoOrScaleIndent(props["mx"], scaleIndent)
28
+ });
29
+ }
20
30
  function Icon({
21
31
  width = 16,
22
32
  height = 16,
23
33
  viewBox = "0 0 16 16",
24
34
  color: colorProps,
35
+ scaleIndent = 4,
36
+ m,
37
+ mt,
38
+ mb,
39
+ my,
40
+ ml,
41
+ mr,
42
+ mx,
25
43
  ...props
26
44
  }, ref) {
27
45
  const SIcon = "svg";
@@ -34,13 +52,24 @@ function Icon({
34
52
  } = sstyles.cn("SIcon", {
35
53
  "use:color": color
36
54
  });
55
+ const indentStyles = React.useMemo(() => {
56
+ return calculateIndentStyles({
57
+ m,
58
+ mt,
59
+ mb,
60
+ my,
61
+ ml,
62
+ mr,
63
+ mx
64
+ }, scaleIndent);
65
+ }, [scaleIndent, m, mt, mb, my, ml, mr, mx]);
37
66
  return /* @__PURE__ */ React.createElement(SIcon, _extends({
38
67
  width,
39
68
  height,
40
69
  viewBox,
41
70
  "aria-hidden": "true"
42
71
  }, propsForElement(props), {
43
- style: Object.assign({}, style, props.style),
72
+ style: Object.assign({}, style, props.style, indentStyles),
44
73
  className: `${className} ${props.className ?? ""}`,
45
74
  ref
46
75
  }));
package/lib/types/Icon.d.ts CHANGED
@@ -1,5 +1,4 @@
1
- import React from 'react';
2
- export type IconProps = React.SVGProps<SVGSVGElement> & {
1
+ export type IconProps = {
3
2
  /**
4
3
  * Icon width
5
4
  * @internal
@@ -17,6 +16,25 @@ export type IconProps = React.SVGProps<SVGSVGElement> & {
17
16
  viewBox?: string;
18
17
  /** Icon color */
19
18
  color?: string;
19
+ /** CSS `margin` property */
20
+ m?: number | string;
21
+ /** CSS `margin-top` property */
22
+ mt?: number | string;
23
+ /** CSS `margin-right` property */
24
+ mr?: number | string;
25
+ /** CSS `margin-bottom` property */
26
+ mb?: number | string;
27
+ /** CSS `margin-left` property */
28
+ ml?: number | string;
29
+ /** CSS `margin-left` and `margin-right` property */
30
+ mx?: number | string;
31
+ /** CSS `margin-top` and `margin-bottom` property */
32
+ my?: number | string;
33
+ /**
34
+ * Multiplier of all indents. For example, if you specify a margin-top equal to 3 (mt = {3}), it will be 12px (3 * 4 = 12).
35
+ * @default 4
36
+ */
37
+ scaleIndent?: number;
20
38
  };
21
39
  declare const _default: import("@semcore/core").Intergalactic.Component<"svg", IconProps, {}, never[]>;
22
40
  export default _default;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@semcore/icon",
3
3
  "description": "Semrush Icon Component",
4
- "version": "16.7.2-prerelease.27",
4
+ "version": "16.7.2-prerelease.29",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/esm/index.mjs",
7
7
  "typings": "lib/types/index.d.ts",
@@ -24,7 +24,7 @@
24
24
  "cheerio": "1.1.2",
25
25
  "fs-extra": "11.3.2",
26
26
  "html-to-react": "1.7.0",
27
- "@semcore/core": "17.0.0-prerelease.27",
27
+ "@semcore/core": "17.0.0-prerelease.29",
28
28
  "@semcore/testing-utils": "1.0.0"
29
29
  },
30
30
  "exports": {
@@ -228,16 +228,6 @@
228
228
  "import": "./lib/color/Yahoo/l/index.mjs",
229
229
  "require": "./lib/color/Yahoo/l/index.js"
230
230
  },
231
- "./color/WhatsApp/m": {
232
- "types": "./lib/color/WhatsApp/m/index.d.ts",
233
- "import": "./lib/color/WhatsApp/m/index.mjs",
234
- "require": "./lib/color/WhatsApp/m/index.js"
235
- },
236
- "./color/WhatsApp/l": {
237
- "types": "./lib/color/WhatsApp/l/index.d.ts",
238
- "import": "./lib/color/WhatsApp/l/index.mjs",
239
- "require": "./lib/color/WhatsApp/l/index.js"
240
- },
241
231
  "./color/WooCommerceColored/m": {
242
232
  "types": "./lib/color/WooCommerceColored/m/index.d.ts",
243
233
  "import": "./lib/color/WooCommerceColored/m/index.mjs",
@@ -248,6 +238,16 @@
248
238
  "import": "./lib/color/WooCommerceColored/l/index.mjs",
249
239
  "require": "./lib/color/WooCommerceColored/l/index.js"
250
240
  },
241
+ "./color/WhatsApp/m": {
242
+ "types": "./lib/color/WhatsApp/m/index.d.ts",
243
+ "import": "./lib/color/WhatsApp/m/index.mjs",
244
+ "require": "./lib/color/WhatsApp/m/index.js"
245
+ },
246
+ "./color/WhatsApp/l": {
247
+ "types": "./lib/color/WhatsApp/l/index.d.ts",
248
+ "import": "./lib/color/WhatsApp/l/index.mjs",
249
+ "require": "./lib/color/WhatsApp/l/index.js"
250
+ },
251
251
  "./color/WhatConvertsColored/m": {
252
252
  "types": "./lib/color/WhatConvertsColored/m/index.d.ts",
253
253
  "import": "./lib/color/WhatConvertsColored/m/index.mjs",
@@ -378,6 +378,16 @@
378
378
  "import": "./lib/color/Microsoft/l/index.mjs",
379
379
  "require": "./lib/color/Microsoft/l/index.js"
380
380
  },
381
+ "./color/MetaColored/m": {
382
+ "types": "./lib/color/MetaColored/m/index.d.ts",
383
+ "import": "./lib/color/MetaColored/m/index.mjs",
384
+ "require": "./lib/color/MetaColored/m/index.js"
385
+ },
386
+ "./color/MetaColored/l": {
387
+ "types": "./lib/color/MetaColored/l/index.d.ts",
388
+ "import": "./lib/color/MetaColored/l/index.mjs",
389
+ "require": "./lib/color/MetaColored/l/index.js"
390
+ },
381
391
  "./color/Matomo/m": {
382
392
  "types": "./lib/color/Matomo/m/index.d.ts",
383
393
  "import": "./lib/color/Matomo/m/index.mjs",
@@ -388,15 +398,15 @@
388
398
  "import": "./lib/color/Matomo/l/index.mjs",
389
399
  "require": "./lib/color/Matomo/l/index.js"
390
400
  },
391
- "./color/MetaColored/m": {
392
- "types": "./lib/color/MetaColored/m/index.d.ts",
393
- "import": "./lib/color/MetaColored/m/index.mjs",
394
- "require": "./lib/color/MetaColored/m/index.js"
401
+ "./color/Mailchimp/m": {
402
+ "types": "./lib/color/Mailchimp/m/index.d.ts",
403
+ "import": "./lib/color/Mailchimp/m/index.mjs",
404
+ "require": "./lib/color/Mailchimp/m/index.js"
395
405
  },
396
- "./color/MetaColored/l": {
397
- "types": "./lib/color/MetaColored/l/index.d.ts",
398
- "import": "./lib/color/MetaColored/l/index.mjs",
399
- "require": "./lib/color/MetaColored/l/index.js"
406
+ "./color/Mailchimp/l": {
407
+ "types": "./lib/color/Mailchimp/l/index.d.ts",
408
+ "import": "./lib/color/Mailchimp/l/index.mjs",
409
+ "require": "./lib/color/Mailchimp/l/index.js"
400
410
  },
401
411
  "./color/LookerStudio/m": {
402
412
  "types": "./lib/color/LookerStudio/m/index.d.ts",
@@ -478,16 +488,6 @@
478
488
  "import": "./lib/color/GoogleSearchConsole/l/index.mjs",
479
489
  "require": "./lib/color/GoogleSearchConsole/l/index.js"
480
490
  },
481
- "./color/Mailchimp/m": {
482
- "types": "./lib/color/Mailchimp/m/index.d.ts",
483
- "import": "./lib/color/Mailchimp/m/index.mjs",
484
- "require": "./lib/color/Mailchimp/m/index.js"
485
- },
486
- "./color/Mailchimp/l": {
487
- "types": "./lib/color/Mailchimp/l/index.d.ts",
488
- "import": "./lib/color/Mailchimp/l/index.mjs",
489
- "require": "./lib/color/Mailchimp/l/index.js"
490
- },
491
491
  "./color/GoogleMyBusiness/m": {
492
492
  "types": "./lib/color/GoogleMyBusiness/m/index.d.ts",
493
493
  "import": "./lib/color/GoogleMyBusiness/m/index.mjs",
@@ -1558,16 +1558,6 @@
1558
1558
  "import": "./lib/Sent/l/index.mjs",
1559
1559
  "require": "./lib/Sent/l/index.js"
1560
1560
  },
1561
- "./SemrushRank/m": {
1562
- "types": "./lib/SemrushRank/m/index.d.ts",
1563
- "import": "./lib/SemrushRank/m/index.mjs",
1564
- "require": "./lib/SemrushRank/m/index.js"
1565
- },
1566
- "./SemrushRank/l": {
1567
- "types": "./lib/SemrushRank/l/index.d.ts",
1568
- "import": "./lib/SemrushRank/l/index.mjs",
1569
- "require": "./lib/SemrushRank/l/index.js"
1570
- },
1571
1561
  "./Semrush/m": {
1572
1562
  "types": "./lib/Semrush/m/index.d.ts",
1573
1563
  "import": "./lib/Semrush/m/index.mjs",
@@ -1578,6 +1568,16 @@
1578
1568
  "import": "./lib/Semrush/l/index.mjs",
1579
1569
  "require": "./lib/Semrush/l/index.js"
1580
1570
  },
1571
+ "./SemrushRank/m": {
1572
+ "types": "./lib/SemrushRank/m/index.d.ts",
1573
+ "import": "./lib/SemrushRank/m/index.mjs",
1574
+ "require": "./lib/SemrushRank/m/index.js"
1575
+ },
1576
+ "./SemrushRank/l": {
1577
+ "types": "./lib/SemrushRank/l/index.d.ts",
1578
+ "import": "./lib/SemrushRank/l/index.mjs",
1579
+ "require": "./lib/SemrushRank/l/index.js"
1580
+ },
1581
1581
  "./Sellzone/m": {
1582
1582
  "types": "./lib/Sellzone/m/index.d.ts",
1583
1583
  "import": "./lib/Sellzone/m/index.mjs",
@@ -2228,16 +2228,6 @@
2228
2228
  "import": "./lib/Opera/l/index.mjs",
2229
2229
  "require": "./lib/Opera/l/index.js"
2230
2230
  },
2231
- "./Oil/m": {
2232
- "types": "./lib/Oil/m/index.d.ts",
2233
- "import": "./lib/Oil/m/index.mjs",
2234
- "require": "./lib/Oil/m/index.js"
2235
- },
2236
- "./Oil/l": {
2237
- "types": "./lib/Oil/l/index.d.ts",
2238
- "import": "./lib/Oil/l/index.mjs",
2239
- "require": "./lib/Oil/l/index.js"
2240
- },
2241
2231
  "./NotificationNo/m": {
2242
2232
  "types": "./lib/NotificationNo/m/index.d.ts",
2243
2233
  "import": "./lib/NotificationNo/m/index.mjs",
@@ -2248,6 +2238,16 @@
2248
2238
  "import": "./lib/NotificationNo/l/index.mjs",
2249
2239
  "require": "./lib/NotificationNo/l/index.js"
2250
2240
  },
2241
+ "./Oil/m": {
2242
+ "types": "./lib/Oil/m/index.d.ts",
2243
+ "import": "./lib/Oil/m/index.mjs",
2244
+ "require": "./lib/Oil/m/index.js"
2245
+ },
2246
+ "./Oil/l": {
2247
+ "types": "./lib/Oil/l/index.d.ts",
2248
+ "import": "./lib/Oil/l/index.mjs",
2249
+ "require": "./lib/Oil/l/index.js"
2250
+ },
2251
2251
  "./Notification/m": {
2252
2252
  "types": "./lib/Notification/m/index.d.ts",
2253
2253
  "import": "./lib/Notification/m/index.mjs",