@pedidopago/ui 1.7.21 → 1.7.23

package/dist/shared/theme/theme.js

@@ -4,239 +4,33 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.defaultTheme = void 0;
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-var fontSizes = {
-  tiny: '0.625rem',
-  xxxs: '0.75rem',
-  xxs: '0.875rem',
-  xs: '1rem',
-  sm: '1.125rem',
-  md: '1.25rem',
-  lg: '1.5rem',
-  xl: '2rem',
-  xxl: '2.5rem',
-  xxxl: '3.25rem',
-  display: '4rem',
-  giant: '5rem'
-};
-var buttonSize = {
-  xs: '2.25em',
-  // 36px - 2.25em
-  sm: '2.75em',
-  // 44px - 2.75em
-  md: '3.25em',
-  // 52px - 3.25em
-  lg: '3.75em',
-  // 60px - 3.75em
-  xl: '4.25em' // breaking change: (60px 3.75em) > (68px 4.25em)
-};
-
-var breakpoints = {
-  base: '0px',
-  sm: '30rem',
-  md: '48rem',
-  lg: '64rem',
-  xl: '80rem',
-  xxl: '100rem'
-};
-var space = {
-  px: '1px',
-  0.5: '0.125rem',
-  1: '0.25rem',
-  1.5: '0.375rem',
-  2: '0.5rem',
-  2.5: '0.625rem',
-  3: '0.75rem',
-  3.5: '0.875rem',
-  4: '1rem',
-  5: '1.25rem',
-  6: '1.5rem',
-  7: '1.75rem',
-  8: '2rem',
-  9: '2.25rem',
-  10: '2.5rem',
-  12: '3rem',
-  14: '3.5rem',
-  16: '4rem',
-  20: '5rem',
-  24: '6rem',
-  28: '7rem',
-  32: '8rem',
-  36: '9rem',
-  40: '10rem',
-  44: '11rem',
-  48: '12rem',
-  52: '13rem',
-  56: '14rem',
-  60: '15rem',
-  64: '16rem',
-  72: '18rem',
-  80: '20rem',
-  96: '24rem',
-  112: '28rem',
-  128: '32rem'
-};
-var fontWeight = {
-  normal: '400',
-  bold: '700',
-  '100': '100',
-  '200': '200',
-  '300': '300',
-  '400': '400',
-  '500': '500',
-  '600': '600',
-  '700': '700',
-  '800': '800',
-  '900': '900'
-};
-var colors = {
-  body: {
-    light: '#fff',
-    dark: '#000'
-  },
-  primary: {
-    alert: 'rgba(181, 241, 221, 0.2)',
-    disabled: '#9DF1D5',
-    default: '#22E0A1',
-    hover: '#1fcb92',
-    focus: '#1cb582',
-    transparent: 'transparent'
-  },
-  secondary: {
-    disabled: '#BED0FD',
-    default: '#034AFD',
-    hover: '#1F56E0',
-    focus: '#1C4CC7'
-  },
-  tertiary: {
-    disabled: '#EAEFED',
-    default: '#CAD6D1',
-    hover: '#A3B8B0',
-    focus: '#709085'
-  },
-  neutral: {
-    white: '#FFFFFF',
-    neutral1: '#EAEFED',
-    neutral2: '#CAD6D1',
-    neutral3: '#A3B8B0',
-    neutral4: '#709085',
-    neutral5: '#587169',
-    neutral6: '#465953',
-    black: '#34423D'
-  },
-  background: {
-    linear1: 'linear-gradient(107.46deg, #034AFD 0%, #1ECAAF 111.36%)',
-    linear2: 'linear-gradient(99.45deg, rgba(255, 255, 255, 0) 34.2%, #FFFFFF 94.04%), #EAEFED',
-    linear3: 'linear-gradient(100.62deg, #FFFFFF 6.63%, rgba(255, 255, 255, 0) 93.99%), #EAEFED',
-    light: '#FFFFFF'
-  },
-  informative: {
-    default: '#3B82F6',
-    blurred: '#B1CDFB',
-    dark: '#364f62',
-    gradient: 'linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%), #B1CDFB'
-  },
-  success: {
-    default: '#34D399',
-    blurred: '#B5F1DD',
-    dark: '#345f50',
-    gradient: 'linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%), #B5F1DD'
-  },
-  success_secondary: {
-    default: '#34D3C9',
-    blurred: '#AAFAF5',
-    dark: '#345f59',
-    gradient: 'linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%), #AAFAF5'
-  },
-  warning: {
-    default: '#FB923C',
-    blurred: '#FDE7D5',
-    dark: '#5c523d',
-    gradient: 'linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%), #FDD3B1'
-  },
-  warning_secondary: {
-    default: '#FFC453',
-    blurred: '#FFF1D6',
-    dark: '#5c523d',
-    gradient: 'linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%), #FFE8BD'
-  },
-  error: {
-    default: '#EF4444',
-    blurred: '#F6CFD8',
-    dark: '#5a433f',
-    gradient: 'linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%), #F6CFD8'
-  },
-  critical: {
-    default: '#B80F60',
-    blurred: '#E0A6C2',
-    dark: '#4f3844',
-    gradient: 'linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%), #E0A6C2'
-  }
-};
+var _breakpoints = require("./objects/breakpoints");
+var _colors = require("./objects/colors");
+var _shadows = require("./objects/shadows");
+var _sizes = require("./objects/sizes");
+var _spaces = require("./objects/spaces");
+var _typography = require("./objects/typography");
+var _zIndexes = require("./objects/z-indexes");
 var borderRadius = {
   default: '0.5rem'
 };
-var spacing = _objectSpread(_objectSpread({}, space), {}, {
-  quarck: '0.25rem',
-  nano: '0.5rem',
-  xxxs: '1rem',
-  xxs: '1.5rem',
-  xs: '2rem',
-  sm: '2.5rem',
-  md: '3rem',
-  lg: '3.5rem',
-  xl: '4rem',
-  xxl: '5rem',
-  xxxl: '6rem',
-  huge: '6.5rem',
-  giant: '7rem'
-});
-var spacingest = _objectSpread(_objectSpread({}, space), {}, {
-  quarck: '0.25rem',
-  nano: '0.5rem',
-  xs: '1rem',
-  sm: '1.5rem',
-  md: '2rem',
-  lg: '2.5rem'
-});
-var shadow = {
-  level1: '0px 4px 8px rgba(165, 171, 179, 0.16)',
-  level2: '0px 8px 24px rgba(165, 171, 179, 0.4)',
-  level3: '0px 16px 32px rgba(165, 171, 179, 0.4)'
-};
 var transition = {
   speed: '0.2s'
 };
-var zIndex = {
-  default: '0',
-  level1: '1',
-  level2: '2',
-  level3: '3',
-  level4: '4',
-  level6: '6',
-  level8: '8',
-  level12: '12',
-  level16: '16',
-  level24: '24',
-  level48: '48'
-};
 var defaultTheme = {
-  fontSizes: fontSizes,
-  fontWeight: fontWeight,
-  breakpoints: breakpoints,
-  colors: colors,
-  space: space,
-  spacing: spacing,
-  spacingest: spacingest,
+  fontSizes: _sizes.fontSizes,
+  fontWeight: _typography.fontWeight,
+  breakpoints: _breakpoints.breakpoints,
+  colors: _colors.colors.light,
+  lightColors: _colors.colors.light,
+  darkColors: _colors.colors.dark,
+  space: _spaces.space,
+  spacing: _spaces.spacing,
+  spacingest: _spaces.spacingest,
   borderRadius: borderRadius,
-  shadow: shadow,
-  buttonSize: buttonSize,
+  shadow: _shadows.shadow.light,
+  buttonSize: _sizes.buttonSize,
   transition: transition,
-  zIndex: zIndex
+  zIndex: _zIndexes.zIndex
 };
 exports.defaultTheme = defaultTheme;

package/dist/shared/theme/theme.types.d.ts

@@ -1,5 +1,13 @@
 import { defaultTheme } from '.';
-export type ExtendThemeProps = typeof defaultTheme;
+export type ThemeBase = typeof defaultTheme;
+export type ExtendThemeProps = ThemeBase;
+export type ThemeBaseColors = ThemeBase['colors'];
+export type ExtendedThemeParams = Omit<ThemeBase, 'colors'> & {
+    colors: {
+        dark: ThemeBaseColors;
+        light: ThemeBaseColors;
+    } | ThemeBaseColors;
+};
 export type ThemeProps = ExtendThemeProps & {
     [key: string]: any;
 };

package/dist/shared/theme/theme.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.types.d.ts","sourceRoot":"","sources":["../../../src/shared/theme/theme.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,GAAG,CAAC;AAEjC,MAAM,MAAM,gBAAgB,GAAG,OAAO,YAAY,CAAC;AAEnD,MAAM,MAAM,UAAU,GAAG,gBAAgB,GAAG;IAC1C,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;KAC5B,GAAG,IAAI,MAAM,gBAAgB,CAAC,CAAC,EAAE,OAAO,CACrC,gBAAgB,CAAC,GAAG,CAAC,GACrB;SACG,IAAI,IAAI,MAAM,gBAAgB,CAAC,GAAG,CAAC,GAAG,OAAO,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,MAAM;KACrF,CACJ;CACF,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,CAC9B,WAAW,EACT,CAAE,gBAAgB,GAAG;IACjB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB,CAAA,KACF,gBAAgB,CAAC;AAEtB,MAAM,MAAM,iBAAiB,GACzB,YAAY,GACZ,WAAW,GACX,eAAe,GACf,eAAe,GACf,kBAAkB,GAClB,iBAAiB,GACjB,eAAe,GACf,eAAe,GACf,oBAAoB,GACpB,mBAAmB,GACnB,iBAAiB,GACjB,iBAAiB,GACjB,mBAAmB,GACnB,kBAAkB,GAClB,gBAAgB,GAChB,gBAAgB,GAChB,eAAe,GACf,kBAAkB,GAClB,kBAAkB,GAClB,kBAAkB,GAClB,kBAAkB,GAClB,kBAAkB,GAClB,kBAAkB,GAClB,eAAe,GACf,oBAAoB,GACpB,oBAAoB,GACpB,oBAAoB,GACpB,kBAAkB,GAClB,qBAAqB,GACrB,qBAAqB,GACrB,sBAAsB,GACtB,iBAAiB,GACjB,iBAAiB,GACjB,kBAAkB,GAClB,2BAA2B,GAC3B,2BAA2B,GAC3B,4BAA4B,GAC5B,iBAAiB,GACjB,iBAAiB,GACjB,kBAAkB,GAClB,2BAA2B,GAC3B,2BAA2B,GAC3B,4BAA4B,GAC5B,eAAe,GACf,eAAe,GACf,gBAAgB,GAChB,kBAAkB,GAClB,kBAAkB,GAClB,mBAAmB,CAAC"}
+{"version":3,"file":"theme.types.d.ts","sourceRoot":"","sources":["../../../src/shared/theme/theme.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,GAAG,CAAC;AAEjC,MAAM,MAAM,SAAS,GAAG,OAAO,YAAY,CAAC;AAE5C,MAAM,MAAM,gBAAgB,GAAG,SAAS,CAAC;AAEzC,MAAM,MAAM,eAAe,GAAG,SAAS,CAAC,QAAQ,CAAC,CAAC;AAElD,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,SAAS,EAAE,QAAQ,CAAC,GAAG;IAC5D,MAAM,EACF;QACE,IAAI,EAAE,eAAe,CAAC;QACtB,KAAK,EAAE,eAAe,CAAC;KACxB,GACD,eAAe,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,gBAAgB,GAAG;IAC1C,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;KAC5B,GAAG,IAAI,MAAM,gBAAgB,CAAC,CAAC,EAAE,OAAO,CACrC,gBAAgB,CAAC,GAAG,CAAC,GACrB;SACG,IAAI,IAAI,MAAM,gBAAgB,CAAC,GAAG,CAAC,GAAG,OAAO,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,MAAM;KACrF,CACJ;CACF,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,CAC9B,WAAW,EACT,CAAE,gBAAgB,GAAG;IACjB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB,CAAA,KACF,gBAAgB,CAAC;AAEtB,MAAM,MAAM,iBAAiB,GACzB,YAAY,GACZ,WAAW,GACX,eAAe,GACf,eAAe,GACf,kBAAkB,GAClB,iBAAiB,GACjB,eAAe,GACf,eAAe,GACf,oBAAoB,GACpB,mBAAmB,GACnB,iBAAiB,GACjB,iBAAiB,GACjB,mBAAmB,GACnB,kBAAkB,GAClB,gBAAgB,GAChB,gBAAgB,GAChB,eAAe,GACf,kBAAkB,GAClB,kBAAkB,GAClB,kBAAkB,GAClB,kBAAkB,GAClB,kBAAkB,GAClB,kBAAkB,GAClB,eAAe,GACf,oBAAoB,GACpB,oBAAoB,GACpB,oBAAoB,GACpB,kBAAkB,GAClB,qBAAqB,GACrB,qBAAqB,GACrB,sBAAsB,GACtB,iBAAiB,GACjB,iBAAiB,GACjB,kBAAkB,GAClB,2BAA2B,GAC3B,2BAA2B,GAC3B,4BAA4B,GAC5B,iBAAiB,GACjB,iBAAiB,GACjB,kBAAkB,GAClB,2BAA2B,GAC3B,2BAA2B,GAC3B,4BAA4B,GAC5B,eAAe,GACf,eAAe,GACf,gBAAgB,GAChB,kBAAkB,GAClB,kBAAkB,GAClB,mBAAmB,CAAC"}

package/dist/utils/customColorMode.d.ts

@@ -0,0 +1,2 @@
+export declare function customColorMode<L, D>(light: L, dark: D): L | D;
+//# sourceMappingURL=customColorMode.d.ts.map

package/dist/utils/customColorMode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"customColorMode.d.ts","sourceRoot":"","sources":["../../src/utils/customColorMode.ts"],"names":[],"mappings":"AAEA,wBAAgB,eAAe,CAAC,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,SAItD"}

package/dist/utils/customColorMode.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.customColorMode = customColorMode;
+var _react = require("@emotion/react");
+function customColorMode(light, dark) {
+  var theme = (0, _react.useTheme)();
+  return theme.colorMode === 'dark' ? dark : light;
+}

package/dist/utils/getColorValue.js

@@ -17,7 +17,7 @@ var _colorCheck = require("../utils/colorCheck");
 var getColorValue = function getColorValue(color, theme, defaultValue) {
   if ((0, _colorCheck.isHexColor)(color) || (0, _colorCheck.isRgbHslColor)(color)) return color;
   var colorIsThemeColor = theme && (0, _colorCheck.stripThemeColors)(color, theme.colors);
-  return colorIsThemeColor || defaultValue || 'inherit';
+  return colorIsThemeColor || color || defaultValue || 'inherit';
 };
 exports.getColorValue = getColorValue;
 var getThemeHex = function getThemeHex(path, obj) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pedidopago/ui",
-  "version": "1.7.21",
+  "version": "1.7.23",
   "description": "Quick build beatiful Pedido Pago apps",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -24,8 +24,10 @@
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
     "@tanstack/react-virtual": "^3.0.0-beta.54",
+    "@types/fs-extra": "^11.0.1",
     "classnames": "^2.3.2",
     "framer-motion": "^10.10.0",
+    "fs-extra": "^11.1.1",
     "libphonenumber-js": "^1.10.34",
     "phone": "^3.1.33",
     "react": "^18.2.0",
@@ -42,7 +44,8 @@
     "icons:build": "ts-node --project ./node.tsconfig.json -T ./src/components/Icon/scripts/run-build.ts && eslint ./src/components/Icon --ext .js,.jsx,.ts,.tsx --fix",
     "storybook": "start-storybook -p 6006 -s public",
     "build-storybook": "build-storybook -s public",
-    "chromatic": "npx chromatic"
+    "chromatic": "npx chromatic",
+    "pp-snippet": "yarn ts-node --project ./node.tsconfig.json -T ./scripts/generators/generate-snippet.ts"
   },
   "eslintConfig": {
     "extends": [
@@ -113,8 +116,11 @@
     "react-docgen-typescript-webpack-plugin": "^1.1.0",
     "react-scripts": "^5.0.0",
     "storybook-dark-mode": "^2.1.1",
-    "ts-node": "^10.4.0",
+    "ts-node": "^10.9.1",
     "typescript": "^4.3.5",
     "webpack": "^5"
+  },
+  "bin": {
+    "snippet": "yarn ts-node --project ./node.tsconfig.json -T ./scripts/generators/generate-snippet.ts"
   }
 }

package/dist/components/Steps/components/StepIconMobile/index.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import { StepIconProps } from '../../types';
-export declare const StepIconMobile: ({ stepPosition, isSelectedStep, hasStartGradient, hasEndGratient, activeColor, }: StepIconProps) => JSX.Element;
-//# sourceMappingURL=index.d.ts.map

package/dist/components/Steps/components/StepIconMobile/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Steps/components/StepIconMobile/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAO5C,eAAO,MAAM,cAAc,qFAMxB,aAAa,gBAgGf,CAAC"}

package/dist/components/Steps/components/StepIconMobile/index.js

@@ -1,126 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.StepIconMobile = void 0;
-var _react = require("@emotion/react");
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject;
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-var IconContainer = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin-right: 20px;\n  margin-bottom: -10px;\n"])));
-var StepIconMobile = function StepIconMobile(_ref) {
-  var stepPosition = _ref.stepPosition,
-    isSelectedStep = _ref.isSelectedStep,
-    hasStartGradient = _ref.hasStartGradient,
-    hasEndGratient = _ref.hasEndGratient,
-    _ref$activeColor = _ref.activeColor,
-    activeColor = _ref$activeColor === void 0 ? 'primary' : _ref$activeColor;
-  var theme = (0, _react.useTheme)();
-  var strokeColor = theme.colors[activeColor].default;
-  var neutralStrokeColor = theme.colors.neutral.neutral1;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: isSelectedStep ? /*#__PURE__*/(0, _jsxRuntime.jsx)(IconContainer, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
-        width: "16",
-        height: "81",
-        viewBox: "0 0 16 81",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
-          width: "3",
-          height: "32",
-          transform: "translate(6.5 0.785156)",
-          fill: "url(#".concat(stepPosition, ")")
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
-          cx: "8",
-          cy: "40.7852",
-          r: "5",
-          fill: "#F8FAF9",
-          stroke: strokeColor,
-          strokeWidth: "6"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
-          width: "3",
-          height: "32",
-          transform: "translate(6.5 48.7852)",
-          fill: "url(#".concat(stepPosition, "-2)")
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("defs", {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("linearGradient", {
-            id: stepPosition,
-            x1: "1.5",
-            y1: "33.5",
-            x2: "1.5",
-            y2: "5.63098e-10",
-            gradientUnits: "userSpaceOnUse",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("stop", {
-              stopColor: strokeColor
-            }), hasStartGradient && /*#__PURE__*/(0, _jsxRuntime.jsx)("stop", {
-              offset: "1",
-              stopColor: strokeColor,
-              stopOpacity: "0"
-            })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("linearGradient", {
-            id: "".concat(stepPosition, "-2"),
-            x1: "1.88295",
-            y1: "-0.857085",
-            x2: "1.64628",
-            y2: "41.7156",
-            gradientUnits: "userSpaceOnUse",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("stop", {
-              stopColor: strokeColor
-            }), hasEndGratient && /*#__PURE__*/(0, _jsxRuntime.jsx)("stop", {
-              offset: "1",
-              stopColor: strokeColor,
-              stopOpacity: "0"
-            })]
-          })]
-        })]
-      })
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(IconContainer, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
-        width: "16",
-        height: "81",
-        viewBox: "0 0 16 81",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
-          width: "3",
-          height: "32",
-          transform: "translate(6.5 0.785156)",
-          fill: neutralStrokeColor
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
-          cx: "8",
-          cy: "40.7852",
-          r: "7",
-          fill: "#F8FAF9",
-          stroke: "#B7C7C2",
-          strokeWidth: "2"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
-          width: "3",
-          height: "32",
-          transform: "translate(6.5 48.7852)",
-          fill: "url(#".concat(stepPosition, ")")
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("defs", {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("linearGradient", {
-            id: stepPosition,
-            x1: "1.5",
-            y1: "0",
-            x2: "1.5",
-            y2: "32",
-            gradientUnits: "userSpaceOnUse",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("stop", {
-              stopColor: neutralStrokeColor
-            }), hasEndGratient && /*#__PURE__*/(0, _jsxRuntime.jsx)("stop", {
-              offset: "1",
-              stopColor: neutralStrokeColor,
-              stopOpacity: "0"
-            })]
-          })
-        })]
-      })
-    })
-  });
-};
-exports.StepIconMobile = StepIconMobile;