@stokr/components-library 2.3.65-beta.1 → 2.3.65-beta.11

package/dist/components/ForgotPasswordModal/ForgotPasswordModal.stories.js

@@ -1,69 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.ForgotPasswordModalOverview = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _ForgotPasswordModal = _interopRequireDefault(require("./ForgotPasswordModal"));
-var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
-var _global = _interopRequireDefault(require("../../styles/global"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = {
-  title: 'Components Library/Forgot Password Modal',
-  component: _ForgotPasswordModal.default,
-  argTypes: {
-    isModalOpen: {
-      type: 'boolean',
-      defaultValue: true
-    },
-    onModalClose: {
-      type: 'function',
-      action: 'onModalClose',
-      required: true
-    },
-    onFormSend: {
-      type: 'function',
-      action: 'onFormSend',
-      required: true
-    },
-    onModalSwitch: {
-      type: 'function',
-      action: 'onModalSwitch',
-      required: true
-    },
-    isActionLoading: {
-      control: {
-        type: 'select',
-        options: [false, 'forgot']
-      },
-      description: 'Loading state for the form submission'
-    },
-    background: {
-      control: 'text',
-      description: 'Background style for the modal'
-    },
-    isResettingExpiredToken: {
-      control: 'boolean',
-      description: 'Changes modal content for expired token reset'
-    },
-    popupError: {
-      control: 'object',
-      description: 'Error object to display form errors'
-    },
-    popupSuccess: {
-      control: 'object',
-      description: 'Success object to display success messages'
-    }
-  }
-};
-const Template = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_ForgotPasswordModal.default, args)));
-const ForgotPasswordModalOverview = exports.ForgotPasswordModalOverview = Template.bind({});
-ForgotPasswordModalOverview.args = {
-  isModalOpen: true,
-  popupError: {},
-  popupSuccess: {},
-  isActionLoading: false,
-  background: '',
-  isResettingExpiredToken: false
-};

package/dist/components/Form/Form.stories.js

@@ -1,32 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.FormOverview = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Form = _interopRequireDefault(require("./Form"));
-var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
-var _formik = require("formik");
-var _global = _interopRequireDefault(require("../../styles/global"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-// import { FormField, FormInfo, FormError } from './Form'
-var _default = exports.default = {
-  title: 'Components Library/Form',
-  component: _Form.default,
-  argTypes: {
-    children: {
-      type: 'node',
-      defaultValue: [],
-      required: true
-    }
-  }
-};
-_Form.default.decorators = [_formik.withFormik];
-const Template = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_Form.default, args)));
-const FormOverview = exports.FormOverview = Template.bind({});
-FormOverview.args = {};
-
-//doublecheck:
-//not working - formik..
-//_useFormikContext is undefined

package/dist/components/FullscreenCard/FullscreenCard.styles.js

@@ -1,27 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.FullscreenCardContent = exports.FullscreenCardContainer = exports.FullscreenCard = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _semanticUiReact = require("semantic-ui-react");
-var _theme = _interopRequireDefault(require("../../styles/theme"));
-var _rwd = _interopRequireDefault(require("../../styles/rwd"));
-var _templateObject, _templateObject2, _templateObject3;
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-const FullscreenCardContainer = exports.FullscreenCardContainer = _styledComponents.default.div.withConfig({
-  displayName: "FullscreenCardstyles__FullscreenCardContainer",
-  componentId: "sc-cdmqth-0"
-})(["display:flex;min-height:100vh;padding:0;background:", ";", ""], props => _theme.default.cGrey, _rwd.default.Medium(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    padding: 120px 0;\n  "]))));
-const FullscreenCard = exports.FullscreenCard = (0, _styledComponents.default)(_semanticUiReact.Card).withConfig({
-  displayName: "FullscreenCardstyles__FullscreenCard",
-  componentId: "sc-cdmqth-1"
-})(["&&&{box-shadow:0 2px 20px 0 rgba(0,0,0,0.1);width:100%;", "}"], _rwd.default.Medium(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      width: 480px;\n      padding: 0;\n      margin: auto;\n    "]))));
-const FullscreenCardContent = exports.FullscreenCardContent = (0, _styledComponents.default)(_semanticUiReact.Card.Content).withConfig({
-  displayName: "FullscreenCardstyles__FullscreenCardContent",
-  componentId: "sc-cdmqth-2"
-})(["&&&{padding:48px 32px 55px;", "}"], _rwd.default.Medium(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      padding: 66px 60px 56px;\n    "]))));
-
-// unused component

package/dist/components/Header/Header.stories.js

@@ -1,192 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.HeaderWitouthUser = exports.HeaderWithoutLoginAndSignup = exports.HeaderWithUser = exports.HeaderWithSidebar = exports.HeaderWithProgressSignup = exports.HeaderWithProgress = exports.HeaderWithAdminUser = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Header = _interopRequireDefault(require("./Header"));
-var _reactRouterDom = require("react-router-dom");
-var _global = _interopRequireDefault(require("../../styles/global"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-// import Avatar from '../../static/images/avatar.png'
-var _default = exports.default = {
-  title: 'Components Library/Header',
-  component: _Header.default,
-  argTypes: {
-    user: {
-      name: '',
-      country: '',
-      kyc_status: '',
-      KYCDocuments: '',
-      entity_name: '',
-      investor_eth_addresses: []
-    },
-    progress: {
-      type: 'object',
-      defaultValue: null
-    },
-    signupFlow: {
-      type: 'boolean',
-      defaultValue: false
-    },
-    withSidebar: {
-      type: 'boolean',
-      defaultValue: false
-    },
-    isSidebarExpanded: {
-      type: 'boolean',
-      defaultValue: false
-    },
-    loginHandler: {
-      type: 'function',
-      action: 'loginHandler'
-    },
-    signupHandler: {
-      type: 'function',
-      action: 'signupHandler'
-    },
-    withoutLoginSignupButton: {
-      type: 'boolean',
-      defaultValue: false
-    }
-  }
-};
-const Template = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactRouterDom.BrowserRouter, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_Header.default, args)));
-const userDev = {
-  _id: '61851acd5b9a890013297b12',
-  email: 'user-dev@email.com',
-  user_type: 'investor',
-  name: 'bilal',
-  lastname: 'dev',
-  username: 'user-dev',
-  entity_name: '',
-  active: true,
-  country: 'Germany',
-  kyc_status: 'Accepted',
-  wallets: [{
-    _id: '641dd681b08b7543f433af1e',
-    userId: '61851acd5b9a890013297b12',
-    type: 'liquid',
-    address: 'GA2skwb5v5nKaaAKNd61knuRJC47Jr',
-    name: 'GA2skwb5v5nKaaAKNd61knuRJC47Jr',
-    createdAt: '2021-11-19T16:19:33.390Z',
-    isPrimary: true
-  }, {
-    _id: '641dd681b08b7543f433af1f',
-    userId: '61851acd5b9a890013297b12',
-    type: 'liquid',
-    address: 'GA2skwb5v5nKaaAKNd61knuRJC47Jr',
-    assetIds: ['2812e39a-ad94-4368-9db4-9d98c1c00f38'],
-    liquidAccount: 'infinite-fleet',
-    registered_user: 6020,
-    name: 'GA2skwb5v5nKaaAKNd61knuRJC47Jr',
-    createdAt: '2021-11-19T16:19:33.390Z',
-    isPrimary: true
-  }, {
-    _id: '641dd681b08b7543f433af20',
-    userId: '61851acd5b9a890013297b12',
-    type: 'liquid',
-    address: 'GA2skwb5v5nKaaAKNd61knuRJC47Jr',
-    assetIds: ['35c3c8ed-59a3-4a87-9612-b48236aeab3b'],
-    liquidAccount: 'blockstream',
-    registered_user: 273,
-    name: 'GA2skwb5v5nKaaAKNd61knuRJC47Jr',
-    createdAt: '2021-11-19T16:19:33.390Z',
-    isPrimary: true
-  }],
-  liquid_network: {
-    GAID: 'GA2skwb5v5nKaaAKNd61knuRJC47Jr',
-    dt: '2021-11-19T16:19:33.390Z',
-    '2812e39a-ad94-4368-9db4-9d98c1c00f38': {
-      id: 6020,
-      GAID: 'GA2wpGUWe8uDz9VEdNXJ5v17UwD25f',
-      is_company: false,
-      name: '61851acd5b9a890013297b12',
-      categories: [3],
-      creator: 22,
-      whitelisted_gaids: ['GA2wpGUWe8uDz9VEdNXJ5v17UwD25f']
-    },
-    whitelisted_gaids: ['GA2wpGUWe8uDz9VEdNXJ5v17UwD25f', 'GA2skwb5v5nKaaAKNd61knuRJC47Jr', 'GA2skwb5v5nKaaAKNd61knuRJC47Jr'],
-    '35c3c8ed-59a3-4a87-9612-b48236aeab3b': {
-      id: 273,
-      GAID: 'GA2skwb5v5nKaaAKNd61knuRJC47Jr',
-      is_company: false,
-      name: '61851acd5b9a890013297b12',
-      categories: [24],
-      creator: 62,
-      whitelisted_gaids: ['GA2skwb5v5nKaaAKNd61knuRJC47Jr']
-    }
-  },
-  pass_reset: '',
-  taxId: '4355',
-  countryObj: {
-    _id: '630e0361b8d1fb0007929bc4',
-    name: 'Germany',
-    ISO2: 'DE',
-    ISO3: 'DEU',
-    isAllowed: true,
-    SEPA: true,
-    'infinite-fleet': true,
-    'la-boulangerie': true
-  }
-};
-const HeaderWithUser = exports.HeaderWithUser = Template.bind({});
-HeaderWithUser.args = {
-  user: userDev
-};
-const HeaderWithAdminUser = exports.HeaderWithAdminUser = Template.bind({});
-HeaderWithAdminUser.args = {
-  user: _objectSpread(_objectSpread({}, userDev), {}, {
-    user_type: 'company_sa'
-  })
-};
-const HeaderWitouthUser = exports.HeaderWitouthUser = Template.bind({});
-HeaderWitouthUser.args = {
-  user: {}
-};
-const HeaderWithProgress = exports.HeaderWithProgress = Template.bind({});
-HeaderWithProgress.args = {
-  user: userDev,
-  progress: {
-    items: [{
-      id: 'select-address',
-      handleClick: () => {}
-    }, {
-      id: 'order-tokens',
-      handleClick: () => {}
-    }, {
-      id: 'confirm',
-      handleClick: () => {}
-    }],
-    doneIndex: 1,
-    activeIndex: 2
-  }
-};
-const HeaderWithProgressSignup = exports.HeaderWithProgressSignup = Template.bind({});
-HeaderWithProgressSignup.args = {
-  user: _objectSpread(_objectSpread({}, userDev), {}, {
-    kyc_status: 'Rejected'
-  }),
-  progress: {},
-  signupFlow: true
-};
-const HeaderWithSidebar = exports.HeaderWithSidebar = Template.bind({});
-HeaderWithSidebar.args = {
-  user: _objectSpread(_objectSpread({}, userDev), {}, {
-    user_type: 'company_sa'
-  }),
-  // progress: {},
-  withSidebar: true,
-  isSidebarExpanded: true
-};
-const HeaderWithoutLoginAndSignup = exports.HeaderWithoutLoginAndSignup = Template.bind({});
-HeaderWithoutLoginAndSignup.args = {
-  user: {},
-  withoutLoginSignupButton: true
-};

package/dist/components/InfoIcon/InfoIcon.stories.js

@@ -1,299 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.WithHTML = exports.RedArrow = exports.Positions = exports.NoMargins = exports.MultipleTooltips = exports.LongText = exports.InContext = exports.Disabled = exports.Default = exports.CustomChildren = exports.ArrowColorComparison = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _InfoIcon = require("./InfoIcon");
-var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
-var _global = _interopRequireDefault(require("../../styles/global"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = {
-  title: 'Components Library/Icons/Info Icon',
-  component: _InfoIcon.InfoIcon,
-  argTypes: {
-    title: {
-      type: 'string',
-      description: 'Text content to display in the tooltip',
-      control: 'text'
-    },
-    html: {
-      type: 'string',
-      description: 'HTML content to display in the tooltip (takes precedence over title)',
-      control: 'text'
-    },
-    position: {
-      type: 'select',
-      options: ['top', 'bottom', 'left', 'right'],
-      description: 'Position of the tooltip relative to the icon',
-      control: 'select'
-    },
-    noMargin: {
-      type: 'boolean',
-      description: 'Remove all margins from the container',
-      control: 'boolean'
-    },
-    noMarginLeft: {
-      type: 'boolean',
-      description: 'Remove left margin from the container',
-      control: 'boolean'
-    },
-    noMarginRight: {
-      type: 'boolean',
-      description: 'Remove right margin from the container',
-      control: 'boolean'
-    },
-    noIcon: {
-      type: 'boolean',
-      description: 'Hide the info icon and show children instead',
-      control: 'boolean'
-    },
-    disabled: {
-      type: 'boolean',
-      description: 'Disable the tooltip',
-      control: 'boolean'
-    },
-    fullWidth: {
-      type: 'boolean',
-      description: 'Make the container full width',
-      control: 'boolean'
-    }
-  },
-  decorators: [Story => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(Story, null)))]
-}; // Default example
-const Default = exports.Default = {
-  args: {
-    title: 'This is a helpful tooltip with some information',
-    position: 'bottom'
-  }
-};
-
-// All positions
-const Positions = () => /*#__PURE__*/_react.default.createElement("div", {
-  style: {
-    display: 'flex',
-    gap: '40px',
-    flexWrap: 'wrap',
-    padding: '60px'
-  }
-}, /*#__PURE__*/_react.default.createElement("div", {
-  style: {
-    textAlign: 'center'
-  }
-}, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
-  position: "top",
-  title: "Tooltip on top"
-}), /*#__PURE__*/_react.default.createElement("div", {
-  style: {
-    marginTop: '10px',
-    fontSize: '12px'
-  }
-}, "Top")), /*#__PURE__*/_react.default.createElement("div", {
-  style: {
-    textAlign: 'center'
-  }
-}, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
-  position: "bottom",
-  title: "Tooltip on bottom"
-}), /*#__PURE__*/_react.default.createElement("div", {
-  style: {
-    marginTop: '10px',
-    fontSize: '12px'
-  }
-}, "Bottom")), /*#__PURE__*/_react.default.createElement("div", {
-  style: {
-    textAlign: 'center'
-  }
-}, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
-  position: "left",
-  title: "Tooltip on left"
-}), /*#__PURE__*/_react.default.createElement("div", {
-  style: {
-    marginTop: '10px',
-    fontSize: '12px'
-  }
-}, "Left")), /*#__PURE__*/_react.default.createElement("div", {
-  style: {
-    textAlign: 'center'
-  }
-}, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
-  position: "right",
-  title: "Tooltip on right"
-}), /*#__PURE__*/_react.default.createElement("div", {
-  style: {
-    marginTop: '10px',
-    fontSize: '12px'
-  }
-}, "Right")));
-
-// With HTML content
-exports.Positions = Positions;
-const WithHTML = exports.WithHTML = {
-  args: {
-    html: '<strong>Bold text</strong> and <em>italic text</em><br/>With a line break',
-    position: 'bottom'
-  }
-};
-
-// With long text
-const LongText = exports.LongText = {
-  args: {
-    title: 'This is a very long tooltip text that demonstrates how the tooltip handles longer content. It should wrap nicely and maintain good readability.',
-    position: 'bottom'
-  }
-};
-
-// No margins
-const NoMargins = () => /*#__PURE__*/_react.default.createElement("div", {
-  style: {
-    display: 'flex',
-    gap: '20px',
-    alignItems: 'center'
-  }
-}, /*#__PURE__*/_react.default.createElement("span", null, "Text before"), /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
-  title: "No margin",
-  noMargin: true
-}), /*#__PURE__*/_react.default.createElement("span", null, "Text after"));
-
-// Custom children (no icon)
-exports.NoMargins = NoMargins;
-const CustomChildren = exports.CustomChildren = {
-  args: {
-    title: 'Custom content instead of icon',
-    noIcon: true,
-    children: /*#__PURE__*/_react.default.createElement("span", {
-      style: {
-        textDecoration: 'underline'
-      }
-    }, "Hover me")
-  }
-};
-
-// Disabled
-const Disabled = exports.Disabled = {
-  args: {
-    title: 'This tooltip is disabled',
-    disabled: true
-  }
-};
-
-// In context example
-const InContext = () => /*#__PURE__*/_react.default.createElement("div", {
-  style: {
-    padding: '40px',
-    maxWidth: '500px'
-  }
-}, /*#__PURE__*/_react.default.createElement("h3", {
-  style: {
-    display: 'inline-flex',
-    alignItems: 'center',
-    gap: '8px'
-  }
-}, "Investment Amount", /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
-  title: "Enter the amount you wish to invest in this project. Minimum investment is \u20AC1,000.",
-  position: "top"
-})), /*#__PURE__*/_react.default.createElement("input", {
-  type: "number",
-  placeholder: "Enter amount",
-  style: {
-    marginTop: '10px',
-    padding: '8px',
-    width: '100%',
-    border: '1px solid #ccc',
-    borderRadius: '4px'
-  }
-}), /*#__PURE__*/_react.default.createElement("p", {
-  style: {
-    marginTop: '20px',
-    fontSize: '14px',
-    color: '#666'
-  }
-}, "Need help?", ' ', /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
-  title: "Contact our support team for assistance",
-  noMarginLeft: true,
-  noMarginRight: true
-})));
-
-// Multiple tooltips
-exports.InContext = InContext;
-const MultipleTooltips = () => /*#__PURE__*/_react.default.createElement("div", {
-  style: {
-    padding: '40px'
-  }
-}, /*#__PURE__*/_react.default.createElement("div", {
-  style: {
-    marginBottom: '20px'
-  }
-}, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
-  title: "First tooltip",
-  position: "top"
-}), /*#__PURE__*/_react.default.createElement("span", {
-  style: {
-    marginLeft: '10px'
-  }
-}, "First example")), /*#__PURE__*/_react.default.createElement("div", {
-  style: {
-    marginBottom: '20px'
-  }
-}, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
-  title: "Second tooltip",
-  position: "bottom"
-}), /*#__PURE__*/_react.default.createElement("span", {
-  style: {
-    marginLeft: '10px'
-  }
-}, "Second example")), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
-  html: "<strong>HTML</strong> tooltip with <em>formatting</em>",
-  position: "right"
-}), /*#__PURE__*/_react.default.createElement("span", {
-  style: {
-    marginLeft: '10px'
-  }
-}, "Third example with HTML")));
-
-// Custom arrow color (red)
-exports.MultipleTooltips = MultipleTooltips;
-const RedArrow = exports.RedArrow = {
-  args: {
-    title: 'This tooltip has a red arrow instead of the default blue',
-    position: 'bottom',
-    arrowColor: '#ee220d' // Using red from colors
-  }
-};
-
-// Comparison: Blue vs Red arrow
-const ArrowColorComparison = () => /*#__PURE__*/_react.default.createElement("div", {
-  style: {
-    padding: '40px',
-    display: 'flex',
-    gap: '40px',
-    alignItems: 'center'
-  }
-}, /*#__PURE__*/_react.default.createElement("div", {
-  style: {
-    textAlign: 'center'
-  }
-}, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
-  title: "Default blue arrow",
-  position: "bottom"
-}), /*#__PURE__*/_react.default.createElement("div", {
-  style: {
-    marginTop: '10px',
-    fontSize: '12px'
-  }
-}, "Blue (default)")), /*#__PURE__*/_react.default.createElement("div", {
-  style: {
-    textAlign: 'center'
-  }
-}, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
-  title: "Custom red arrow",
-  position: "bottom",
-  arrowColor: "#ee220d"
-}), /*#__PURE__*/_react.default.createElement("div", {
-  style: {
-    marginTop: '10px',
-    fontSize: '12px'
-  }
-}, "Red (custom)")));
-exports.ArrowColorComparison = ArrowColorComparison;