@semcore/icon 16.8.0-prerelease.3 → 16.8.0

package/lib/es6/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","names":["useBox","createBaseComponent","sstyled","keyboardFocusEnhance","hasLabels","logger","propsForElement","useForkRef","useColorResolver","cn","React","styles","_sstyled","insert","Icon","props","ref","_useBox","_objectSpread","interactive","_useBox2","_slicedToArray","SIcon","other","colorProps","color","resolveColor","_keyboardFocusEnhance","disabled","keyboardFocused","propsEnhance","_objectWithoutProperties","_excluded","sstyles","_sstyles$cn","className","style","onKeyDown","event","onClick","key","preventDefault","labelCheckRef","useRef","useEffect","process","env","NODE_ENV","warn","current","displayName","forkedRef","createElement","_extends","role","undefined","Object","assign"],"sources":["../../src/Icon.jsx"],"sourcesContent":["import { useBox } from '@semcore/base-components';\nimport { createBaseComponent, sstyled } from '@semcore/core';\nimport keyboardFocusEnhance from '@semcore/core/lib/utils/enhances/keyboardFocusEnhance';\nimport hasLabels from '@semcore/core/lib/utils/hasLabels';\nimport logger from '@semcore/core/lib/utils/logger';\nimport propsForElement from '@semcore/core/lib/utils/propsForElement';\nimport { useForkRef } from '@semcore/core/lib/utils/ref';\nimport { useColorResolver } from '@semcore/core/lib/utils/use/useColorResolver';\nimport cn from 'classnames';\nimport React from 'react';\n\nimport styles from './style/icon.shadow.css';\n\nfunction Icon(props, ref) {\n  const [SIcon, other] = useBox(\n    {\n      'tag': 'svg',\n      'data-ui-name': 'Icon',\n      'width': 16,\n      'height': 16,\n      'viewBox': '0 0 16 16',\n      'focusable': props.interactive,\n      ...props,\n    },\n    ref,\n  );\n\n  const { interactive, color: colorProps } = props;\n  const resolveColor = useColorResolver();\n  const color = resolveColor(colorProps);\n  const { keyboardFocused, ...propsEnhance } = keyboardFocusEnhance()({\n    disabled: !interactive,\n    ...other,\n  });\n  const sstyles = sstyled(styles);\n  const { className, style } = sstyles.cn('SIcon', {\n    'use:color': color,\n    'interactive': interactive,\n    'keyboardFocused': keyboardFocused,\n  });\n\n  function onKeyDown(event) {\n    if (propsEnhance.onKeyDown) {\n      return propsEnhance.onKeyDown(event);\n    }\n\n    if (interactive && propsEnhance.onClick && (event.key === 'Enter' || event.key === ' ')) {\n      event.preventDefault();\n      propsEnhance.onClick(event);\n    }\n  }\n\n  const labelCheckRef = React.useRef();\n  React.useEffect(() => {\n    if (!interactive) return;\n    if (process.env.NODE_ENV !== 'production') {\n      logger.warn(\n        labelCheckRef.current && !hasLabels(labelCheckRef.current),\n        `'aria-label' or 'aria-labelledby' are required props for interactive icons`,\n        props['data-ui-name'] || Icon.displayName,\n      );\n    }\n  }, [interactive]);\n  const forkedRef = useForkRef(ref, labelCheckRef);\n\n  return (\n    <SIcon\n      role={interactive ? 'button' : undefined}\n      aria-hidden={interactive ? undefined : 'true'}\n      {...propsForElement(propsEnhance)}\n      style={Object.assign({}, style, propsEnhance.style)}\n      className={cn(className, propsEnhance.className) || undefined}\n      onKeyDown={onKeyDown}\n      ref={forkedRef}\n    />\n  );\n}\n\nIcon.displayName = 'Icon';\n\nexport default createBaseComponent(Icon);\n"],"mappings":"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","ignoreList":[]}
+{"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","_ref","ref","_props$className","_ref$width","width","_ref$height","height","_ref$viewBox","viewBox","colorProps","color","_ref$scaleIndent","m","mt","mb","my","ml","mr","mx","_objectWithoutProperties","_excluded","SIcon","resolveColor","sstyles","_sstyles$cn","cn","className","style","indentStyles","useMemo","createElement","_extends","Object","assign","concat"],"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/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["default"],"sources":["../../src/index.js"],"sourcesContent":["export { default } from './Icon';\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,QAAQ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["default"],"sources":["../../src/index.ts"],"sourcesContent":["import type { IconProps } from './Icon';\n\nexport { default } from './Icon';\n\nexport type {\n  IconProps,\n};\n"],"mappings":"AAEA,SAASA,OAAO,QAAQ,QAAQ","ignoreList":[]}

package/lib/es6/style/icon.shadow.css

@@ -8,16 +8,3 @@ SIcon {
   outline: none;
   color: var(--color);
 }
-
-
-SIcon[interactive] {
-  cursor: pointer;
-
-  &:hover {
-    filter: brightness(0.8);
-  }
-
-  path {
-    pointer-events: none;
-  }
-}

package/lib/esm/Icon.mjs

@@ -1,83 +1,67 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import { createBaseComponent, sstyled } from "@semcore/core";
-import { useBox } from "@semcore/base-components";
-import keyboardFocusEnhance from "@semcore/core/lib/utils/enhances/keyboardFocusEnhance";
-import hasLabels from "@semcore/core/lib/utils/hasLabels";
-import logger from "@semcore/core/lib/utils/logger";
+import { sstyled, createBaseComponent } from "@semcore/core";
+import { removeUndefinedKeys, getAutoOrScaleIndent } from "@semcore/core/lib/utils/indentStyles";
 import propsForElement from "@semcore/core/lib/utils/propsForElement";
-import { useForkRef } from "@semcore/core/lib/utils/ref";
 import { useColorResolver } from "@semcore/core/lib/utils/use/useColorResolver";
-import cn from "classnames";
 import React from "react";
-var _excluded = ["keyboardFocused"];
+var _excluded = ["width", "height", "viewBox", "color", "scaleIndent", "m", "mt", "mb", "my", "ml", "mr", "mx"];
 /*!__reshadow-styles__:"./style/icon.shadow.css"*/
 var styles = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SIcon_1fcg9_gg_{display:inline-block;-moz-user-select:none;user-select:none;shape-rendering:geometricPrecision;box-sizing:content-box;fill:currentColor;flex-shrink:0;outline:0;color:var(--color_1fcg9)}.___SIcon_1fcg9_gg_.__interactive_1fcg9_gg_{cursor:pointer}@media (hover:hover){.___SIcon_1fcg9_gg_.__interactive_1fcg9_gg_:hover{filter:brightness(.8)}}.___SIcon_1fcg9_gg_.__interactive_1fcg9_gg_ path{pointer-events:none}",
+    ".___SIcon_nd9fk_gg_{display:inline-block;-webkit-user-select:none;-moz-user-select:none;user-select:none;shape-rendering:geometricPrecision;box-sizing:content-box;fill:currentColor;flex-shrink:0;outline:0;color:var(--color_nd9fk)}",
     /*__inner_css_end__*/
-    "1fcg9_gg_"
+    "nd9fk_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SIcon": "___SIcon_1fcg9_gg_",
-    "--color": "--color_1fcg9",
-    "_interactive": "__interactive_1fcg9_gg_"
+    "__SIcon": "___SIcon_nd9fk_gg_",
+    "--color": "--color_nd9fk"
   })
 );
-function Icon(props, ref) {
-  var _useBox = useBox(_objectSpread({
-    "tag": "svg",
-    "data-ui-name": "Icon",
-    "width": 16,
-    "height": 16,
-    "viewBox": "0 0 16 16",
-    "focusable": props.interactive
-  }, props), ref), _useBox2 = _slicedToArray(_useBox, 2), SIcon = _useBox2[0], other = _useBox2[1];
-  var interactive = props.interactive, colorProps = props.color;
+function calculateIndentStyles(props, scaleIndent) {
+  return removeUndefinedKeys({
+    margin: getAutoOrScaleIndent(props["m"], scaleIndent),
+    marginTop: getAutoOrScaleIndent(props["mt"], scaleIndent) || getAutoOrScaleIndent(props["my"], scaleIndent),
+    marginBottom: getAutoOrScaleIndent(props["mb"], scaleIndent) || getAutoOrScaleIndent(props["my"], scaleIndent),
+    marginLeft: getAutoOrScaleIndent(props["ml"], scaleIndent) || getAutoOrScaleIndent(props["mx"], scaleIndent),
+    marginRight: getAutoOrScaleIndent(props["mr"], scaleIndent) || getAutoOrScaleIndent(props["mx"], scaleIndent)
+  });
+}
+function Icon(_ref, ref) {
+  var _props$className;
+  var _ref$width = _ref.width, width = _ref$width === void 0 ? 16 : _ref$width, _ref$height = _ref.height, height = _ref$height === void 0 ? 16 : _ref$height, _ref$viewBox = _ref.viewBox, viewBox = _ref$viewBox === void 0 ? "0 0 16 16" : _ref$viewBox, colorProps = _ref.color, _ref$scaleIndent = _ref.scaleIndent, scaleIndent = _ref$scaleIndent === void 0 ? 4 : _ref$scaleIndent, m = _ref.m, mt = _ref.mt, mb = _ref.mb, my = _ref.my, ml = _ref.ml, mr = _ref.mr, mx = _ref.mx, props = _objectWithoutProperties(_ref, _excluded);
+  var SIcon = "svg";
   var resolveColor = useColorResolver();
   var color = resolveColor(colorProps);
-  var _keyboardFocusEnhance = keyboardFocusEnhance()(_objectSpread({
-    disabled: !interactive
-  }, other)), keyboardFocused = _keyboardFocusEnhance.keyboardFocused, propsEnhance = _objectWithoutProperties(_keyboardFocusEnhance, _excluded);
   var sstyles = sstyled(styles);
   var _sstyles$cn = sstyles.cn("SIcon", {
-    "use:color": color,
-    "interactive": interactive,
-    "keyboardFocused": keyboardFocused
+    "use:color": color
   }), className = _sstyles$cn.className, style = _sstyles$cn.style;
-  function onKeyDown(event) {
-    if (propsEnhance.onKeyDown) {
-      return propsEnhance.onKeyDown(event);
-    }
-    if (interactive && propsEnhance.onClick && (event.key === "Enter" || event.key === " ")) {
-      event.preventDefault();
-      propsEnhance.onClick(event);
-    }
-  }
-  var labelCheckRef = React.useRef();
-  React.useEffect(function() {
-    if (!interactive) return;
-    if (process.env.NODE_ENV !== "production") {
-      logger.warn(labelCheckRef.current && !hasLabels(labelCheckRef.current), "'aria-label' or 'aria-labelledby' are required props for interactive icons", props["data-ui-name"] || Icon.displayName);
-    }
-  }, [interactive]);
-  var forkedRef = useForkRef(ref, labelCheckRef);
+  var indentStyles = React.useMemo(function() {
+    return calculateIndentStyles({
+      m,
+      mt,
+      mb,
+      my,
+      ml,
+      mr,
+      mx
+    }, scaleIndent);
+  }, [scaleIndent, m, mt, mb, my, ml, mr, mx]);
   return /* @__PURE__ */ React.createElement(SIcon, _extends({
-    role: interactive ? "button" : void 0,
-    "aria-hidden": interactive ? void 0 : "true"
-  }, propsForElement(propsEnhance), {
-    style: Object.assign({}, style, propsEnhance.style),
-    className: cn(className, propsEnhance.className) || void 0,
-    onKeyDown,
-    ref: forkedRef
+    width,
+    height,
+    viewBox,
+    "aria-hidden": "true"
+  }, propsForElement(props), {
+    style: Object.assign({}, style, props.style, indentStyles),
+    className: "".concat(className, " ").concat((_props$className = props.className) !== null && _props$className !== void 0 ? _props$className : ""),
+    ref
   }));
 }
-Icon.displayName = "Icon";
-const Icon$1 = createBaseComponent(Icon);
+const Icon_default = createBaseComponent(Icon);
 export {
-  Icon$1 as default
+  Icon_default as default
 };

package/lib/esm/style/icon.shadow.css

@@ -8,16 +8,3 @@ SIcon {
   outline: none;
   color: var(--color);
 }
-
-
-SIcon[interactive] {
-  cursor: pointer;
-
-  &:hover {
-    filter: brightness(0.8);
-  }
-
-  path {
-    pointer-events: none;
-  }
-}

package/lib/pay/AmericanExpress/l/index.d.ts

@@ -0,0 +1,5 @@
+
+import type { IconProps } from '../../../types/index.mjs';
+declare const Icon: React.FC<React.SVGProps<SVGSVGElement> & IconProps>;
+export default Icon;
+    

package/lib/pay/AmericanExpress/l/index.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _core = require("@semcore/core");
+var _index = _interopRequireDefault(require("../../../cjs/index.js"));
+var _excluded = ["width", "height", "viewBox"];
+function RootAmericanExpress(_ref, ref) {
+  var _ref$width = _ref.width,
+    width = _ref$width === void 0 ? '32' : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? '24' : _ref$height,
+    _ref$viewBox = _ref.viewBox,
+    viewBox = _ref$viewBox === void 0 ? '0 0 32 24' : _ref$viewBox,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return /*#__PURE__*/_react["default"].createElement(_index["default"], (0, _extends2["default"])({
+    ref: ref,
+    "data-name": "AmericanExpress",
+    "data-ui-name": "AmericanExpress",
+    "data-group": "l",
+    width: width,
+    height: height,
+    viewBox: viewBox
+  }, props), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M32 21.82c0 1.2-.9 2.18-2 2.18H2c-1.1 0-2-.98-2-2.18V2.18C0 .98.9 0 2 0h28c1.1 0 2 .98 2 2.18v19.64Z",
+    fill: "#006FCE",
+    shapeRendering: "geometricPrecision"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M4.66 12.34h1.96l-.98-2.28-.98 2.28ZM32 8h-5.03l-1.22 1.26L24.65 8H13.97L13 10.06 12.02 8h-4.3v.91L7.23 8H3.56L0 16h4.3l.48-1.26h1.23L6.5 16h4.78v-.91l.37.91h2.45l.37-1.03V16h9.8l1.23-1.26L26.6 16h5.03l-3.19-4L32 8Zm-14.84 6.86h-1.34V10.4l-2.09 4.46h-1.22l-2.09-4.46v4.46H7.6l-.49-1.26H4.17l-.5 1.26H2.09l2.58-5.72h2.08l2.33 5.37V9.14h2.33l1.84 3.89 1.72-3.89h2.33v5.72h-.13Zm12.14 0h-1.84l-1.59-1.95-1.84 1.95h-5.52V9.14h5.64l1.72 1.83 1.84-1.83h1.72L26.73 12l2.57 2.86Zm-9.44-4.57v1.02h3.07v1.15h-3.07v1.14h3.44l1.59-1.71-1.47-1.6h-3.56Z",
+    fill: "#fff",
+    shapeRendering: "geometricPrecision"
+  }));
+}
+RootAmericanExpress.displayName = 'AmericanExpress';
+var AmericanExpress = exports["default"] = (0, _core.createBaseComponent)(RootAmericanExpress);

package/lib/pay/AmericanExpress/l/index.mjs

@@ -0,0 +1,33 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { createBaseComponent } from '@semcore/core';
+import Icon from '../../../esm/index.mjs';
+function RootAmericanExpress({
+  width = '32',
+  height = '24',
+  viewBox = '0 0 32 24',
+  ...props
+}, ref) {
+  return /*#__PURE__*/React.createElement(Icon, _extends({
+    ref: ref,
+    "data-name": "AmericanExpress",
+    "data-ui-name": "AmericanExpress",
+    "data-group": "l",
+    width: width,
+    height: height,
+    viewBox: viewBox
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M32 21.82c0 1.2-.9 2.18-2 2.18H2c-1.1 0-2-.98-2-2.18V2.18C0 .98.9 0 2 0h28c1.1 0 2 .98 2 2.18v19.64Z",
+    fill: "#006FCE",
+    shapeRendering: "geometricPrecision"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M4.66 12.34h1.96l-.98-2.28-.98 2.28ZM32 8h-5.03l-1.22 1.26L24.65 8H13.97L13 10.06 12.02 8h-4.3v.91L7.23 8H3.56L0 16h4.3l.48-1.26h1.23L6.5 16h4.78v-.91l.37.91h2.45l.37-1.03V16h9.8l1.23-1.26L26.6 16h5.03l-3.19-4L32 8Zm-14.84 6.86h-1.34V10.4l-2.09 4.46h-1.22l-2.09-4.46v4.46H7.6l-.49-1.26H4.17l-.5 1.26H2.09l2.58-5.72h2.08l2.33 5.37V9.14h2.33l1.84 3.89 1.72-3.89h2.33v5.72h-.13Zm12.14 0h-1.84l-1.59-1.95-1.84 1.95h-5.52V9.14h5.64l1.72 1.83 1.84-1.83h1.72L26.73 12l2.57 2.86Zm-9.44-4.57v1.02h3.07v1.15h-3.07v1.14h3.44l1.59-1.71-1.47-1.6h-3.56Z",
+    fill: "#fff",
+    shapeRendering: "geometricPrecision"
+  }));
+}
+RootAmericanExpress.displayName = 'AmericanExpress';
+const AmericanExpress = createBaseComponent(RootAmericanExpress);
+export { AmericanExpress as default };

package/lib/pay/AmericanExpress/m/index.d.ts

@@ -0,0 +1,5 @@
+
+import type { IconProps } from '../../../types/index.mjs';
+declare const Icon: React.FC<React.SVGProps<SVGSVGElement> & IconProps>;
+export default Icon;
+    

package/lib/pay/AmericanExpress/m/index.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _core = require("@semcore/core");
+var _index = _interopRequireDefault(require("../../../cjs/index.js"));
+var _excluded = ["width", "height", "viewBox"];
+function RootAmericanExpress(_ref, ref) {
+  var _ref$width = _ref.width,
+    width = _ref$width === void 0 ? '21' : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? '16' : _ref$height,
+    _ref$viewBox = _ref.viewBox,
+    viewBox = _ref$viewBox === void 0 ? '0 0 21 16' : _ref$viewBox,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return /*#__PURE__*/_react["default"].createElement(_index["default"], (0, _extends2["default"])({
+    ref: ref,
+    "data-name": "AmericanExpress",
+    "data-ui-name": "AmericanExpress",
+    "data-group": "m",
+    width: width,
+    height: height,
+    viewBox: viewBox
+  }, props), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M21 14.55c0 .8-.6 1.45-1.31 1.45H1.3C.6 16 0 15.35 0 14.55V1.45C0 .65.6 0 1.31 0H19.7C20.4 0 21 .65 21 1.45v13.1Z",
+    fill: "#006FCE",
+    shapeRendering: "geometricPrecision"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M3.06 8.23h1.28L3.7 6.7l-.64 1.53ZM21 5.33h-3.3l-.8.84-.73-.84h-7L8.53 6.7l-.64-1.37H5.07v.61l-.32-.6H2.33L0 10.66h2.82l.32-.84h.8l.32.84H7.4v-.61l.24.6h1.61l.24-.68v.69h6.44l.8-.84.73.84h3.3L18.66 8 21 5.33ZM11.26 9.9h-.88V6.93L9 9.9h-.8L6.84 6.93V9.9H4.99l-.32-.83H2.74l-.33.83H1.37l1.69-3.8h1.37l1.52 3.58V6.1h1.53L8.7 8.69l1.13-2.6h1.52V9.9h-.08Zm7.97 0h-1.2l-1.05-1.29-1.21 1.3h-3.62V6.1h3.7l1.13 1.21 1.2-1.21h1.13L17.54 8l1.69 1.9Zm-6.2-3.04v.68h2.02v.76h-2.02v.77h2.26l1.04-1.15-.96-1.06h-2.34Z",
+    fill: "#fff",
+    shapeRendering: "geometricPrecision"
+  }));
+}
+RootAmericanExpress.displayName = 'AmericanExpress';
+var AmericanExpress = exports["default"] = (0, _core.createBaseComponent)(RootAmericanExpress);

package/lib/pay/AmericanExpress/m/index.mjs

@@ -0,0 +1,33 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { createBaseComponent } from '@semcore/core';
+import Icon from '../../../esm/index.mjs';
+function RootAmericanExpress({
+  width = '21',
+  height = '16',
+  viewBox = '0 0 21 16',
+  ...props
+}, ref) {
+  return /*#__PURE__*/React.createElement(Icon, _extends({
+    ref: ref,
+    "data-name": "AmericanExpress",
+    "data-ui-name": "AmericanExpress",
+    "data-group": "m",
+    width: width,
+    height: height,
+    viewBox: viewBox
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M21 14.55c0 .8-.6 1.45-1.31 1.45H1.3C.6 16 0 15.35 0 14.55V1.45C0 .65.6 0 1.31 0H19.7C20.4 0 21 .65 21 1.45v13.1Z",
+    fill: "#006FCE",
+    shapeRendering: "geometricPrecision"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M3.06 8.23h1.28L3.7 6.7l-.64 1.53ZM21 5.33h-3.3l-.8.84-.73-.84h-7L8.53 6.7l-.64-1.37H5.07v.61l-.32-.6H2.33L0 10.66h2.82l.32-.84h.8l.32.84H7.4v-.61l.24.6h1.61l.24-.68v.69h6.44l.8-.84.73.84h3.3L18.66 8 21 5.33ZM11.26 9.9h-.88V6.93L9 9.9h-.8L6.84 6.93V9.9H4.99l-.32-.83H2.74l-.33.83H1.37l1.69-3.8h1.37l1.52 3.58V6.1h1.53L8.7 8.69l1.13-2.6h1.52V9.9h-.08Zm7.97 0h-1.2l-1.05-1.29-1.21 1.3h-3.62V6.1h3.7l1.13 1.21 1.2-1.21h1.13L17.54 8l1.69 1.9Zm-6.2-3.04v.68h2.02v.76h-2.02v.77h2.26l1.04-1.15-.96-1.06h-2.34Z",
+    fill: "#fff",
+    shapeRendering: "geometricPrecision"
+  }));
+}
+RootAmericanExpress.displayName = 'AmericanExpress';
+const AmericanExpress = createBaseComponent(RootAmericanExpress);
+export { AmericanExpress as default };

package/lib/pay/CreditCard/l/index.d.ts

@@ -0,0 +1,5 @@
+
+import type { IconProps } from '../../../types/index.mjs';
+declare const Icon: React.FC<React.SVGProps<SVGSVGElement> & IconProps>;
+export default Icon;
+    

package/lib/pay/CreditCard/l/index.js

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _core = require("@semcore/core");
+var _index = _interopRequireDefault(require("../../../cjs/index.js"));
+var _excluded = ["width", "height", "viewBox"];
+function RootCreditCard(_ref, ref) {
+  var _ref$width = _ref.width,
+    width = _ref$width === void 0 ? '32' : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? '24' : _ref$height,
+    _ref$viewBox = _ref.viewBox,
+    viewBox = _ref$viewBox === void 0 ? '0 0 32 24' : _ref$viewBox,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return /*#__PURE__*/_react["default"].createElement(_index["default"], (0, _extends2["default"])({
+    ref: ref,
+    "data-name": "CreditCard",
+    "data-ui-name": "CreditCard",
+    "data-group": "l",
+    width: width,
+    height: height,
+    viewBox: viewBox
+  }, props), /*#__PURE__*/_react["default"].createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M32 21.82c0 1.2-.9 2.18-2 2.18H2c-1.1 0-2-.98-2-2.18V2.18C0 .98.9 0 2 0h28c1.1 0 2 .98 2 2.18v19.64Z",
+    fill: "#8A8E9B",
+    shapeRendering: "geometricPrecision"
+  }), /*#__PURE__*/_react["default"].createElement("rect", {
+    x: "4",
+    y: "6",
+    width: "12",
+    height: "3",
+    rx: "1.5",
+    fill: "#F4F5F9"
+  }), /*#__PURE__*/_react["default"].createElement("rect", {
+    x: "4",
+    y: "16",
+    width: "4",
+    height: "2",
+    rx: "1",
+    fill: "#E0E1E9"
+  }), /*#__PURE__*/_react["default"].createElement("rect", {
+    x: "10",
+    y: "16",
+    width: "4",
+    height: "2",
+    rx: "1",
+    fill: "#E0E1E9"
+  }), /*#__PURE__*/_react["default"].createElement("rect", {
+    x: "16",
+    y: "16",
+    width: "4",
+    height: "2",
+    rx: "1",
+    fill: "#E0E1E9"
+  }), /*#__PURE__*/_react["default"].createElement("rect", {
+    x: "22",
+    y: "16",
+    width: "4",
+    height: "2",
+    rx: "1",
+    fill: "#E0E1E9"
+  }));
+}
+RootCreditCard.displayName = 'CreditCard';
+var CreditCard = exports["default"] = (0, _core.createBaseComponent)(RootCreditCard);

package/lib/pay/CreditCard/l/index.mjs

@@ -0,0 +1,64 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { createBaseComponent } from '@semcore/core';
+import Icon from '../../../esm/index.mjs';
+function RootCreditCard({
+  width = '32',
+  height = '24',
+  viewBox = '0 0 32 24',
+  ...props
+}, ref) {
+  return /*#__PURE__*/React.createElement(Icon, _extends({
+    ref: ref,
+    "data-name": "CreditCard",
+    "data-ui-name": "CreditCard",
+    "data-group": "l",
+    width: width,
+    height: height,
+    viewBox: viewBox
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M32 21.82c0 1.2-.9 2.18-2 2.18H2c-1.1 0-2-.98-2-2.18V2.18C0 .98.9 0 2 0h28c1.1 0 2 .98 2 2.18v19.64Z",
+    fill: "#8A8E9B",
+    shapeRendering: "geometricPrecision"
+  }), /*#__PURE__*/React.createElement("rect", {
+    x: "4",
+    y: "6",
+    width: "12",
+    height: "3",
+    rx: "1.5",
+    fill: "#F4F5F9"
+  }), /*#__PURE__*/React.createElement("rect", {
+    x: "4",
+    y: "16",
+    width: "4",
+    height: "2",
+    rx: "1",
+    fill: "#E0E1E9"
+  }), /*#__PURE__*/React.createElement("rect", {
+    x: "10",
+    y: "16",
+    width: "4",
+    height: "2",
+    rx: "1",
+    fill: "#E0E1E9"
+  }), /*#__PURE__*/React.createElement("rect", {
+    x: "16",
+    y: "16",
+    width: "4",
+    height: "2",
+    rx: "1",
+    fill: "#E0E1E9"
+  }), /*#__PURE__*/React.createElement("rect", {
+    x: "22",
+    y: "16",
+    width: "4",
+    height: "2",
+    rx: "1",
+    fill: "#E0E1E9"
+  }));
+}
+RootCreditCard.displayName = 'CreditCard';
+const CreditCard = createBaseComponent(RootCreditCard);
+export { CreditCard as default };

package/lib/pay/CreditCard/m/index.d.ts

@@ -0,0 +1,5 @@
+
+import type { IconProps } from '../../../types/index.mjs';
+declare const Icon: React.FC<React.SVGProps<SVGSVGElement> & IconProps>;
+export default Icon;
+    

package/lib/pay/CreditCard/m/index.js

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _core = require("@semcore/core");
+var _index = _interopRequireDefault(require("../../../cjs/index.js"));
+var _excluded = ["width", "height", "viewBox"];
+function RootCreditCard(_ref, ref) {
+  var _ref$width = _ref.width,
+    width = _ref$width === void 0 ? '21' : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? '16' : _ref$height,
+    _ref$viewBox = _ref.viewBox,
+    viewBox = _ref$viewBox === void 0 ? '0 0 21 16' : _ref$viewBox,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return /*#__PURE__*/_react["default"].createElement(_index["default"], (0, _extends2["default"])({
+    ref: ref,
+    "data-name": "CreditCard",
+    "data-ui-name": "CreditCard",
+    "data-group": "m",
+    width: width,
+    height: height,
+    viewBox: viewBox
+  }, props), /*#__PURE__*/_react["default"].createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M21 14.55c0 .8-.6 1.45-1.31 1.45H1.3C.6 16 0 15.35 0 14.55V1.45C0 .65.6 0 1.31 0H19.7C20.4 0 21 .65 21 1.45v13.1Z",
+    fill: "#8A8E9B",
+    shapeRendering: "geometricPrecision"
+  }), /*#__PURE__*/_react["default"].createElement("rect", {
+    x: "2.63",
+    y: "4",
+    width: "7.88",
+    height: "2",
+    rx: "1",
+    fill: "#F4F5F9"
+  }), /*#__PURE__*/_react["default"].createElement("rect", {
+    x: "2.63",
+    y: "10.67",
+    width: "2.63",
+    height: "1.33",
+    rx: ".67",
+    fill: "#E0E1E9"
+  }), /*#__PURE__*/_react["default"].createElement("rect", {
+    x: "6.56",
+    y: "10.67",
+    width: "2.63",
+    height: "1.33",
+    rx: ".67",
+    fill: "#E0E1E9"
+  }), /*#__PURE__*/_react["default"].createElement("rect", {
+    x: "10.5",
+    y: "10.67",
+    width: "2.63",
+    height: "1.33",
+    rx: ".67",
+    fill: "#E0E1E9"
+  }), /*#__PURE__*/_react["default"].createElement("rect", {
+    x: "14.44",
+    y: "10.67",
+    width: "2.63",
+    height: "1.33",
+    rx: ".67",
+    fill: "#E0E1E9"
+  }));
+}
+RootCreditCard.displayName = 'CreditCard';
+var CreditCard = exports["default"] = (0, _core.createBaseComponent)(RootCreditCard);