@lideralia/alife-uikit 1.3.13 → 1.3.15

package/dist/organisms/BiographicalEditor/EditorBanner/EditorBanner.js

@@ -0,0 +1,97 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EditorBanner = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _Icon = require("../../../atoms/Icon");
+
+var _Icons = require("../../../atoms/Icons");
+
+var _imgs = require("../../../atoms/imgs");
+
+var _Layout = require("../../../atoms/Layout");
+
+var _Typography = require("../../../atoms/Typography");
+
+const BannerWrapper = (0, _styledComponents.default)(_Layout.Flex).withConfig({
+  displayName: "EditorBanner__BannerWrapper",
+  componentId: "sc-1hovzse-0"
+})(["cursor:pointer;background-color:#feae36;border:1px solid #feae36;border-radius:18px;box-shadow:0px 8px 18px 0px rgba(60,54,58,0.1);overflow:hidden;position:relative;width:100%;align-items:center;padding:18px 18px 18px 12px;gap:9px;&::before{content:'';position:absolute;inset:0;background-color:rgba(255,255,255,0.6);pointer-events:none;}"]);
+const IllustrationBox = (0, _styledComponents.default)(_Layout.Flex).withConfig({
+  displayName: "EditorBanner__IllustrationBox",
+  componentId: "sc-1hovzse-1"
+})(["flex-shrink:0;align-items:center;justify-content:center;width:48px;height:48px;position:relative;"]);
+const Badge = (0, _styledComponents.default)(_Layout.Box).withConfig({
+  displayName: "EditorBanner__Badge",
+  componentId: "sc-1hovzse-2"
+})(["background-color:#f87818;border-radius:19px;padding:2px 10px;display:inline-flex;align-items:center;justify-content:center;width:fit-content;"]);
+const ArrowCircle = (0, _styledComponents.default)(_Layout.Flex).withConfig({
+  displayName: "EditorBanner__ArrowCircle",
+  componentId: "sc-1hovzse-3"
+})(["background-color:#f87818;border-radius:100px;flex-shrink:0;align-items:center;justify-content:center;width:36px;height:36px;position:relative;"]);
+
+const OverlayLayer = _styledComponents.default.div.withConfig({
+  displayName: "EditorBanner__OverlayLayer",
+  componentId: "sc-1hovzse-4"
+})(["position:absolute;inset:0;z-index:0;border-radius:18px;background:linear-gradient(345deg,rgba(255,255,255,0.15) 14.95%,rgba(255,255,255,0.50) 23.45%,rgba(255,255,255,0.70) 31.96%,rgba(255,255,255,0.80) 40.46%,rgba(255,255,255,0.90) 48.97%,rgba(255,255,255,0.90) 49.82%,rgba(255,255,255,0.95) 57.47%,rgba(255,255,255,0.98) 60.88%,#FFF 65.98%);pointer-events:none;opacity:0.72;"]);
+
+const EditorBanner = _ref => {
+  let {
+    onClick,
+    badgeLabel,
+    title
+  } = _ref;
+  return _react.default.createElement(BannerWrapper, {
+    onClick: onClick,
+    role: "button",
+    tabIndex: 0,
+    onKeyDown: e => e.key === 'Enter' && onClick && onClick()
+  }, _react.default.createElement(OverlayLayer, null), _react.default.createElement(_Layout.Flex, {
+    flex: "1",
+    gap: "9px",
+    alignItems: "center",
+    position: "relative",
+    minWidth: 0
+  }, _react.default.createElement(IllustrationBox, null, _react.default.createElement(_imgs.BiographicalEditor, {
+    width: "48",
+    height: "48"
+  })), _react.default.createElement(_Layout.Flex, {
+    flexDirection: "column",
+    gap: "2px",
+    justifyContent: "center",
+    flex: "1",
+    minWidth: 0
+  }, _react.default.createElement(Badge, null, _react.default.createElement(_Typography.Text, {
+    as: "span",
+    sizeText: "display12",
+    color: "white",
+    fontWeight: "bold",
+    style: {
+      whiteSpace: 'nowrap'
+    }
+  }, badgeLabel)), _react.default.createElement(_Typography.Text, {
+    sizeText: "display16",
+    color: "black96",
+    fontWeight: "bold",
+    style: {
+      whiteSpace: 'nowrap'
+    }
+  }, title))), _react.default.createElement(ArrowCircle, {
+    position: "relative"
+  }, _react.default.createElement(_Icon.Icon, {
+    sizeIcon: "display24",
+    color: "white"
+  }, _react.default.createElement(_Icons.IconArrowRight, {
+    stroke: "white"
+  }))));
+};
+
+exports.EditorBanner = EditorBanner;

package/dist/organisms/BiographicalEditor/EditorBanner/EditorBanner.stories.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Layout = require("../../../atoms/Layout");
+
+var _EditorBanner = require("./EditorBanner");
+
+var _default = {
+  title: 'Organisms/BiographicalEditor/EditorBanner',
+  component: _EditorBanner.EditorBanner,
+  argTypes: {
+    badgeLabel: {
+      control: 'text'
+    },
+    title: {
+      control: 'text'
+    },
+    onClick: {
+      action: 'clicked'
+    }
+  }
+};
+exports.default = _default;
+
+const Template = args => _react.default.createElement(_Layout.Container, null, _react.default.createElement(_Layout.Row, {
+  justifyContent: "center",
+  alignItems: "center"
+}, _react.default.createElement(_Layout.Col, {
+  width: [1, 1, 1 / 2]
+}, _react.default.createElement(_EditorBanner.EditorBanner, args))));
+
+const Default = Template.bind({});
+exports.Default = Default;
+Default.args = {
+  badgeLabel: 'Pruébalo',
+  title: 'Editor Biográfico'
+};
+Default.storyName = 'EditorBanner (default)';

package/dist/organisms/BiographicalEditor/EditorBanner/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "EditorBanner", {
+  enumerable: true,
+  get: function () {
+    return _EditorBanner.EditorBanner;
+  }
+});
+
+var _EditorBanner = require("./EditorBanner");

package/dist/organisms/BiographicalEditor/EditorBlockFooter/EditorBlockFooter.js

@@ -0,0 +1,147 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.EditorBlockFooter = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _Icon = require("../../../atoms/Icon");
+
+var _Icons = require("../../../atoms/Icons");
+
+const Wrap = _styledComponents.default.div.withConfig({
+  displayName: "EditorBlockFooter__Wrap",
+  componentId: "sc-9x2kud-0"
+})(["width:100%;background:#ffffff;border-radius:18px 18px 0 0;box-shadow:0px -8px 18px 0px rgba(60,54,58,0.1);display:flex;flex-direction:column;padding-top:18px;"]);
+
+const ProgressSection = _styledComponents.default.div.withConfig({
+  displayName: "EditorBlockFooter__ProgressSection",
+  componentId: "sc-9x2kud-1"
+})(["padding:0 18px;display:flex;flex-direction:column;gap:6px;"]);
+
+const BarWrap = _styledComponents.default.div.withConfig({
+  displayName: "EditorBlockFooter__BarWrap",
+  componentId: "sc-9x2kud-2"
+})(["position:relative;width:100%;height:6px;border-radius:12px;overflow:hidden;display:flex;background:transparent;"]);
+
+const Segment = _styledComponents.default.div.withConfig({
+  displayName: "EditorBlockFooter__Segment",
+  componentId: "sc-9x2kud-3"
+})(["flex:1 0 0;height:6px;min-width:1px;background-color:", ";"], _ref => {
+  let {
+    filled
+  } = _ref;
+  return filled ? '#2396fb' : '#e5e5e8';
+});
+
+const BarFill = _styledComponents.default.div.withConfig({
+  displayName: "EditorBlockFooter__BarFill",
+  componentId: "sc-9x2kud-4"
+})(["height:100%;width:", "%;background-color:", ";border-radius:12px;transition:width 0.2s ease;"], _ref2 => {
+  let {
+    percent
+  } = _ref2;
+  return percent;
+}, _ref3 => {
+  let {
+    over
+  } = _ref3;
+  return over ? '#e53e3e' : '#5fb3fc';
+});
+
+const InfoRow = _styledComponents.default.div.withConfig({
+  displayName: "EditorBlockFooter__InfoRow",
+  componentId: "sc-9x2kud-5"
+})(["display:flex;justify-content:space-between;align-items:flex-start;padding:0 6px;font-family:Inter,sans-serif;font-size:12px;font-weight:700;line-height:18px;white-space:nowrap;"]);
+
+const StepLabel = _styledComponents.default.span.withConfig({
+  displayName: "EditorBlockFooter__StepLabel",
+  componentId: "sc-9x2kud-6"
+})(["color:#7f7f8a;"]);
+
+const BlockName = _styledComponents.default.span.withConfig({
+  displayName: "EditorBlockFooter__BlockName",
+  componentId: "sc-9x2kud-7"
+})(["color:#2396fb;"]);
+
+const ButtonsRow = _styledComponents.default.div.withConfig({
+  displayName: "EditorBlockFooter__ButtonsRow",
+  componentId: "sc-9x2kud-8"
+})(["display:flex;gap:18px;align-items:center;padding:12px 18px 18px;background:#ffffff;"]);
+
+const BackBtn = _styledComponents.default.button.withConfig({
+  displayName: "EditorBlockFooter__BackBtn",
+  componentId: "sc-9x2kud-9"
+})(["display:flex;align-items:center;justify-content:center;flex-shrink:0;height:48px;padding:0 21px;border:none;border-radius:14px;background-color:#e5e5e8;font-family:Inter,sans-serif;font-size:14px;font-weight:700;line-height:24px;color:#7f7f8a;cursor:pointer;white-space:nowrap;box-sizing:border-box;&:hover{background-color:#d5d5da;}&:active{background-color:#c8c8ce;}"]);
+
+const SaveBtn = _styledComponents.default.button.withConfig({
+  displayName: "EditorBlockFooter__SaveBtn",
+  componentId: "sc-9x2kud-10"
+})(["display:flex;align-items:center;justify-content:center;gap:6px;flex:1 0 0;height:48px;min-height:48px;min-width:1px;border:none;border-radius:14px;background-color:#2396fb;opacity:", ";cursor:", ";pointer-events:", ";padding:0 12px;font-family:Inter,sans-serif;font-size:14px;font-weight:700;line-height:24px;color:#ffffff;box-sizing:border-box;transition:opacity 0.2s ease;&:not(:disabled):hover{background-color:#1d85e0;}&:not(:disabled):active{background-color:#1773c6;}"], _ref4 => {
+  let {
+    disabled
+  } = _ref4;
+  return disabled ? 0.48 : 1;
+}, _ref5 => {
+  let {
+    disabled
+  } = _ref5;
+  return disabled ? 'not-allowed' : 'pointer';
+}, _ref6 => {
+  let {
+    disabled
+  } = _ref6;
+  return disabled ? 'none' : 'auto';
+});
+
+const EditorBlockFooter = _ref7 => {
+  let {
+    currentStep,
+    totalSteps,
+    stepLabel,
+    blockName,
+    barPercent,
+    backLabel,
+    saveLabel,
+    saveDisabled,
+    onBack,
+    onSave
+  } = _ref7;
+  return _react.default.createElement(Wrap, null, _react.default.createElement(ProgressSection, null, _react.default.createElement(BarWrap, null, barPercent != null ? _react.default.createElement(BarFill, {
+    percent: barPercent,
+    over: currentStep > totalSteps
+  }) : Array.from({
+    length: totalSteps
+  }, (_, i) => _react.default.createElement(Segment, {
+    key: i,
+    filled: i < currentStep
+  }))), _react.default.createElement(InfoRow, null, _react.default.createElement(StepLabel, null, stepLabel !== null && stepLabel !== void 0 ? stepLabel : "".concat(currentStep, " / ").concat(totalSteps)), _react.default.createElement(BlockName, null, blockName))), _react.default.createElement(ButtonsRow, null, _react.default.createElement(BackBtn, {
+    type: "button",
+    onClick: onBack
+  }, backLabel), _react.default.createElement(SaveBtn, {
+    type: "button",
+    disabled: saveDisabled,
+    onClick: onSave
+  }, _react.default.createElement(_Icon.Icon, {
+    sizeIcon: "display24",
+    color: "#ffffff"
+  }, _react.default.createElement(_Icons.IconCloud, null)), saveLabel)));
+};
+
+exports.EditorBlockFooter = EditorBlockFooter;
+EditorBlockFooter.defaultProps = {
+  stepLabel: undefined,
+  backLabel: 'Volver',
+  saveLabel: 'Guardar bloque',
+  saveDisabled: false,
+  onBack: undefined,
+  onSave: undefined
+};
+var _default = EditorBlockFooter;
+exports.default = _default;

package/dist/organisms/BiographicalEditor/EditorBlockFooter/EditorBlockFooter.stories.js

@@ -0,0 +1,166 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.RelacionPersonal = exports.Playground = exports.Identidad = exports.FormaDeSerVacio = exports.FamiliaYEntorno = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Layout = require("../../../atoms/Layout");
+
+var _EditorBlockFooter = require("./EditorBlockFooter");
+
+var _default = {
+  title: 'Organisms/BiographicalEditor/EditorBlockFooter',
+  component: _EditorBlockFooter.EditorBlockFooter,
+  argTypes: {
+    currentStep: {
+      control: {
+        type: 'number',
+        min: 0,
+        max: 8,
+        step: 1
+      }
+    },
+    totalSteps: {
+      control: {
+        type: 'number',
+        min: 1,
+        max: 12,
+        step: 1
+      }
+    },
+    blockName: {
+      control: 'text'
+    },
+    backLabel: {
+      control: 'text'
+    },
+    saveLabel: {
+      control: 'text'
+    },
+    saveDisabled: {
+      control: 'boolean'
+    },
+    onBack: {
+      action: 'onBack'
+    },
+    onSave: {
+      action: 'onSave'
+    }
+  },
+  parameters: {
+    layout: 'fullscreen'
+  }
+};
+exports.default = _default;
+
+const MobileFrame = _ref => {
+  let {
+    children
+  } = _ref;
+  return _react.default.createElement(_Layout.Container, null, _react.default.createElement(_Layout.Row, {
+    justifyContent: "center"
+  }, _react.default.createElement(_Layout.Col, {
+    width: [1, 1, '375px']
+  }, _react.default.createElement("div", {
+    style: {
+      position: 'relative',
+      minHeight: '200px',
+      display: 'flex',
+      alignItems: 'flex-end'
+    }
+  }, children))));
+};
+
+const Identidad = args => _react.default.createElement(MobileFrame, null, _react.default.createElement(_EditorBlockFooter.EditorBlockFooter, args));
+
+exports.Identidad = Identidad;
+Identidad.args = {
+  currentStep: 1,
+  totalSteps: 8,
+  blockName: 'Identidad',
+  backLabel: 'Volver',
+  saveLabel: 'Guardar bloque',
+  saveDisabled: false
+};
+Identidad.storyName = 'Paso 1 – Identidad';
+Identidad.parameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/design/2PtpPtWT9wUKUrteJBkvlV?node-id=17941-41955'
+  }
+};
+
+const FormaDeSerVacio = args => _react.default.createElement(MobileFrame, null, _react.default.createElement(_EditorBlockFooter.EditorBlockFooter, args));
+
+exports.FormaDeSerVacio = FormaDeSerVacio;
+FormaDeSerVacio.args = {
+  currentStep: 2,
+  totalSteps: 8,
+  blockName: 'Forma de ser',
+  backLabel: 'Volver',
+  saveLabel: 'Guardar bloque',
+  saveDisabled: true
+};
+FormaDeSerVacio.storyName = 'Paso 2 – Forma de ser (deshabilitado)';
+FormaDeSerVacio.parameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/design/2PtpPtWT9wUKUrteJBkvlV?node-id=17941-41970'
+  }
+};
+
+const RelacionPersonal = args => _react.default.createElement(MobileFrame, null, _react.default.createElement(_EditorBlockFooter.EditorBlockFooter, args));
+
+exports.RelacionPersonal = RelacionPersonal;
+RelacionPersonal.args = {
+  currentStep: 3,
+  totalSteps: 8,
+  blockName: 'Relación personal',
+  backLabel: 'Volver',
+  saveLabel: 'Guardar bloque',
+  saveDisabled: false
+};
+RelacionPersonal.storyName = 'Paso 3 – Relación personal';
+RelacionPersonal.parameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/design/2PtpPtWT9wUKUrteJBkvlV?node-id=17941-41984'
+  }
+};
+
+const FamiliaYEntorno = args => _react.default.createElement(MobileFrame, null, _react.default.createElement(_EditorBlockFooter.EditorBlockFooter, args));
+
+exports.FamiliaYEntorno = FamiliaYEntorno;
+FamiliaYEntorno.args = {
+  currentStep: 4,
+  totalSteps: 8,
+  blockName: 'Familia y entorno',
+  backLabel: 'Volver',
+  saveLabel: 'Guardar bloque',
+  saveDisabled: false
+};
+FamiliaYEntorno.storyName = 'Paso 4 – Familia y entorno';
+FamiliaYEntorno.parameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/design/2PtpPtWT9wUKUrteJBkvlV?node-id=17941-41992'
+  }
+};
+
+const Playground = args => _react.default.createElement(MobileFrame, null, _react.default.createElement(_EditorBlockFooter.EditorBlockFooter, args));
+
+exports.Playground = Playground;
+Playground.args = {
+  currentStep: 2,
+  totalSteps: 8,
+  blockName: 'Forma de ser',
+  backLabel: 'Volver',
+  saveLabel: 'Guardar bloque',
+  saveDisabled: false
+};
+Playground.storyName = 'Playground (interactivo)';

package/dist/organisms/BiographicalEditor/EditorBlockFooter/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "EditorBlockFooter", {
+  enumerable: true,
+  get: function () {
+    return _EditorBlockFooter.default;
+  }
+});
+
+var _EditorBlockFooter = _interopRequireDefault(require("./EditorBlockFooter"));

package/dist/organisms/BiographicalEditor/EditorGeneratingCard/EditorGeneratingCard.js

@@ -0,0 +1,146 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.EditorGeneratingCard = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _Icon = require("../../../atoms/Icon");
+
+var _imgs = require("../../../atoms/imgs");
+
+var _Typography = require("../../../atoms/Typography");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const spin = (0, _styledComponents.keyframes)(["from{transform:rotate(0deg);}to{transform:rotate(360deg);}"]);
+
+const Card = _styledComponents.default.div.withConfig({
+  displayName: "EditorGeneratingCard__Card",
+  componentId: "sc-1hvs2dw-0"
+})(["background:#ffffff;border-radius:18px;box-shadow:0px 8px 18px 0px rgba(60,54,58,0.1);padding:36px 18px;display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;box-sizing:border-box;overflow:hidden;"]);
+
+const RingWrap = _styledComponents.default.div.withConfig({
+  displayName: "EditorGeneratingCard__RingWrap",
+  componentId: "sc-1hvs2dw-1"
+})(["position:relative;width:102px;height:102px;flex-shrink:0;display:flex;align-items:center;justify-content:center;"]);
+
+const SpinningSVG = _styledComponents.default.svg.withConfig({
+  displayName: "EditorGeneratingCard__SpinningSVG",
+  componentId: "sc-1hvs2dw-2"
+})(["position:absolute;inset:0;animation:", " 2s linear infinite;transform-origin:51px 51px;"], spin);
+
+const ARC_R = 48;
+const ARC_CX = 51;
+const ARC_CY = 51;
+const ARC_CIRC = 2 * Math.PI * ARC_R;
+const ARC_LEN = ARC_CIRC * 0.28;
+
+const InnerCircle = _styledComponents.default.div.withConfig({
+  displayName: "EditorGeneratingCard__InnerCircle",
+  componentId: "sc-1hvs2dw-3"
+})(["position:relative;z-index:1;width:72px;height:72px;border-radius:50%;background:#5fb3fc;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:6px;overflow:hidden;"]);
+
+const Block = _styledComponents.default.div.withConfig({
+  displayName: "EditorGeneratingCard__Block",
+  componentId: "sc-1hvs2dw-4"
+})(["display:flex;flex-direction:column;align-items:flex-start;width:100%;"]);
+
+const TitleRow = _styledComponents.default.div.withConfig({
+  displayName: "EditorGeneratingCard__TitleRow",
+  componentId: "sc-1hvs2dw-5"
+})(["display:flex;align-items:center;justify-content:center;width:100%;gap:6px;min-height:48px;"]);
+
+const StatusSection = _styledComponents.default.div.withConfig({
+  displayName: "EditorGeneratingCard__StatusSection",
+  componentId: "sc-1hvs2dw-6"
+})(["display:flex;flex-direction:column;align-items:center;padding:12px 6px 0;width:100%;"]);
+
+const EditorGeneratingCard = _ref => {
+  let {
+    title,
+    subtitle,
+    statusLabel,
+    illustration
+  } = _ref;
+  return _react.default.createElement(Card, null, _react.default.createElement(RingWrap, null, _react.default.createElement(SpinningSVG, {
+    width: 102,
+    height: 102,
+    viewBox: "0 0 102 102",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": true
+  }, _react.default.createElement("circle", {
+    cx: ARC_CX,
+    cy: ARC_CY,
+    r: ARC_R,
+    stroke: "#e5e5e8",
+    strokeWidth: 3
+  }), _react.default.createElement("circle", {
+    cx: ARC_CX,
+    cy: ARC_CY,
+    r: ARC_R,
+    stroke: "#2396fb",
+    strokeWidth: 3,
+    strokeLinecap: "round",
+    strokeDasharray: "".concat(ARC_LEN, " ").concat(ARC_CIRC - ARC_LEN),
+    transform: "rotate(-90 ".concat(ARC_CX, " ").concat(ARC_CY, ")")
+  })), _react.default.createElement(InnerCircle, null, illustration)), _react.default.createElement(Block, null, _react.default.createElement(TitleRow, null, _react.default.createElement(_Icon.Icon, {
+    sizeIcon: "display24",
+    color: "#2396fb"
+  }, _react.default.createElement(_imgs.AI, {
+    color: "#2396fb"
+  })), _react.default.createElement(_Typography.Text, {
+    as: "p",
+    sizeText: "display14",
+    fontWeight: "bold",
+    color: "#2396fb",
+    margin: 0,
+    style: {
+      lineHeight: '24px',
+      textAlign: 'center'
+    }
+  }, title)), subtitle && _react.default.createElement(_Typography.Text, {
+    as: "p",
+    sizeText: "display13",
+    fontWeight: "medium",
+    color: "#7f7f8a",
+    margin: 0,
+    style: {
+      lineHeight: '18px',
+      textAlign: 'center',
+      width: '100%'
+    }
+  }, subtitle)), statusLabel && _react.default.createElement(StatusSection, null, _react.default.createElement(_Typography.Text, {
+    as: "p",
+    sizeText: "display12",
+    fontWeight: "medium",
+    color: "#2396fb",
+    margin: 0,
+    style: {
+      lineHeight: '18px',
+      whiteSpace: 'nowrap'
+    }
+  }, statusLabel)));
+};
+
+exports.EditorGeneratingCard = EditorGeneratingCard;
+EditorGeneratingCard.defaultProps = {
+  title: 'Generando memoria biográfica',
+  subtitle: 'Estamos creando un texto único\nbasado en tus respuestas',
+  statusLabel: 'Razonando...',
+  illustration: _react.default.createElement(_imgs.Cover, {
+    width: 60,
+    height: 60
+  })
+};
+var _default = EditorGeneratingCard;
+exports.default = _default;