@stokr/components-library 2.3.65-beta.10 → 2.3.65-beta.12

package/dist/components/icons/Facebook.stories.js

@@ -1,21 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.facebook = exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Facebook = require("./Facebook");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-//import { withKnobs, select, boolean, array } from '@storybook/addon-knobs'
-var _default = exports.default = {
-  title: 'Components Library/Icons/Facebook',
-  component: _Facebook.Facebook,
-  parameters: {
-    backgrounds: {
-      default: 'grey'
-    }
-  }
-}; //making default background grey in story as the element is white
-const facebook = () => /*#__PURE__*/_react.default.createElement(_Facebook.Facebook, null);
-exports.facebook = facebook;

package/dist/components/icons/Info.stories.js

@@ -1,16 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.info = exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Info = require("./Info");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-//import { withKnobs, select, boolean, array } from '@storybook/addon-knobs'
-var _default = exports.default = {
-  title: 'Components Library/Icons/Info',
-  component: _Info.Info
-};
-const info = () => /*#__PURE__*/_react.default.createElement(_Info.Info, null);
-exports.info = info;

package/dist/components/icons/Instagram.stories.js

@@ -1,21 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.instagram = exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Instagram = require("./Instagram");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-//import { withKnobs, select, boolean, array } from '@storybook/addon-knobs'
-var _default = exports.default = {
-  title: 'Components Library/Icons/Instagram',
-  component: _Instagram.Instagram,
-  parameters: {
-    backgrounds: {
-      default: 'grey'
-    }
-  }
-}; //making default background grey in story as the element is white
-const instagram = () => /*#__PURE__*/_react.default.createElement(_Instagram.Instagram, null);
-exports.instagram = instagram;

package/dist/components/icons/LinkIcon.stories.js

@@ -1,21 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.linkicon = exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _LinkIcon = require("./LinkIcon");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-//import { withKnobs, select, boolean, array } from '@storybook/addon-knobs'
-var _default = exports.default = {
-  title: 'Components Library/Icons/LinkIcon',
-  component: _LinkIcon.LinkIcon,
-  parameters: {
-    backgrounds: {
-      default: 'grey'
-    }
-  }
-}; //making default background grey in story as the element is white
-const linkicon = () => /*#__PURE__*/_react.default.createElement(_LinkIcon.LinkIcon, null);
-exports.linkicon = linkicon;

package/dist/components/icons/LinkedIn.stories.js

@@ -1,16 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.linkedin = exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _LinkedIn = require("./LinkedIn");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-//import { withKnobs, select, boolean, array } from '@storybook/addon-knobs'
-var _default = exports.default = {
-  title: 'Components Library/Icons/LinkedIn',
-  component: _LinkedIn.LinkedIn
-};
-const linkedin = () => /*#__PURE__*/_react.default.createElement(_LinkedIn.LinkedIn, null);
-exports.linkedin = linkedin;

package/dist/components/icons/Medium.stories.js

@@ -1,16 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.medium = exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Medium = require("./Medium");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-//import { withKnobs, select, boolean, array } from '@storybook/addon-knobs'
-var _default = exports.default = {
-  title: 'Components Library/Icons/Medium',
-  component: _Medium.Medium
-};
-const medium = () => /*#__PURE__*/_react.default.createElement(_Medium.Medium, null);
-exports.medium = medium;

package/dist/components/icons/Reddit.stories.js

@@ -1,21 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.reddit = exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Reddit = require("./Reddit");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-//import { withKnobs, select, boolean, array } from '@storybook/addon-knobs'
-var _default = exports.default = {
-  title: 'Components Library/Icons/Reddit',
-  component: _Reddit.Reddit,
-  parameters: {
-    backgrounds: {
-      default: 'grey'
-    }
-  }
-}; //making default background grey in story as the element is white
-const reddit = () => /*#__PURE__*/_react.default.createElement(_Reddit.Reddit, null);
-exports.reddit = reddit;

package/dist/components/icons/Share.stories.js

@@ -1,16 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.share = exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Share = require("./Share");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-//import { withKnobs, select, boolean, array } from '@storybook/addon-knobs'
-var _default = exports.default = {
-  title: 'Components Library/Icons/Share',
-  component: _Share.Share
-};
-const share = () => /*#__PURE__*/_react.default.createElement(_Share.Share, null);
-exports.share = share;

package/dist/components/icons/Telegram.stories.js

@@ -1,16 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.telegram = exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Telegram = require("./Telegram");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-//import { withKnobs, select, boolean, array } from '@storybook/addon-knobs'
-var _default = exports.default = {
-  title: 'Components Library/Icons/Telegram',
-  component: _Telegram.Telegram
-};
-const telegram = () => /*#__PURE__*/_react.default.createElement(_Telegram.Telegram, null);
-exports.telegram = telegram;

package/dist/components/icons/Twitter.stories.js

@@ -1,21 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.twitter = exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Twitter = require("./Twitter");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-//import { withKnobs, select, boolean, array } from '@storybook/addon-knobs'
-var _default = exports.default = {
-  title: 'Components Library/Icons/Twitter',
-  component: _Twitter.Twitter,
-  parameters: {
-    backgrounds: {
-      default: 'grey'
-    }
-  }
-}; //making default background grey in story as the element is white
-const twitter = () => /*#__PURE__*/_react.default.createElement(_Twitter.Twitter, null);
-exports.twitter = twitter;

package/dist/components/icons/X.stories.js

@@ -1,16 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.x = exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _X = require("./X");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-//import { withKnobs, select, boolean, array } from '@storybook/addon-knobs'
-var _default = exports.default = {
-  title: 'Components Library/Icons/X',
-  component: _X.X
-};
-const x = () => /*#__PURE__*/_react.default.createElement(_X.X, null);
-exports.x = x;

package/dist/components/icons/Youtube.stories.js

@@ -1,21 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.youtube = exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Youtube = require("./Youtube");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-//import { withKnobs, select, boolean, array } from '@storybook/addon-knobs'
-var _default = exports.default = {
-  title: 'Components Library/Icons/Youtube',
-  component: _Youtube.Youtube,
-  parameters: {
-    backgrounds: {
-      default: 'grey'
-    }
-  }
-}; //making default background grey in story as the element is white
-const youtube = () => /*#__PURE__*/_react.default.createElement(_Youtube.Youtube, null);
-exports.youtube = youtube;

package/dist/components/logo/Logo.stories.js

@@ -1,260 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.SvgFile = exports.Small = exports.OnDifferentBackgrounds = exports.Medium = exports.LogoSvgComponent = exports.Large = exports.Default = exports.AllVersions = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Logo = require("./Logo");
-var _LogoSvg = _interopRequireDefault(require("../SvgIcons/LogoSvg"));
-var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
-var _global = _interopRequireDefault(require("../../styles/global"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _logo = _interopRequireDefault(require("../../static/images/logo.svg"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-// Import the SVG file as an image
-
-const ComparisonContainer = _styledComponents.default.div.withConfig({
-  displayName: "Logostories__ComparisonContainer",
-  componentId: "sc-e8wyjz-0"
-})(["display:flex;flex-direction:column;gap:32px;padding:24px;"]);
-const LogoSection = _styledComponents.default.div.withConfig({
-  displayName: "Logostories__LogoSection",
-  componentId: "sc-e8wyjz-1"
-})(["display:flex;flex-direction:column;gap:16px;padding:20px;border:1px solid #e1e1e1;border-radius:8px;background-color:#f8f8f8;"]);
-const LogoTitle = _styledComponents.default.h3.withConfig({
-  displayName: "Logostories__LogoTitle",
-  componentId: "sc-e8wyjz-2"
-})(["font-size:18px;font-weight:600;margin:0 0 8px 0;color:#202020;"]);
-const LogoDescription = _styledComponents.default.p.withConfig({
-  displayName: "Logostories__LogoDescription",
-  componentId: "sc-e8wyjz-3"
-})(["font-size:14px;color:#666;margin:0 0 16px 0;"]);
-const LogoDisplay = _styledComponents.default.div.withConfig({
-  displayName: "Logostories__LogoDisplay",
-  componentId: "sc-e8wyjz-4"
-})(["display:flex;align-items:center;gap:24px;padding:16px;background-color:white;border-radius:4px;min-height:60px;"]);
-const SizeLabel = _styledComponents.default.span.withConfig({
-  displayName: "Logostories__SizeLabel",
-  componentId: "sc-e8wyjz-5"
-})(["font-size:12px;color:#999;min-width:100px;"]);
-var _default = exports.default = {
-  title: 'Components Library/Logo',
-  component: _Logo.Logo,
-  argTypes: {
-    width: {
-      control: 'number',
-      description: 'Width of the logo in pixels'
-    },
-    height: {
-      control: 'number',
-      description: 'Height of the logo in pixels'
-    }
-  },
-  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)))]
-}; // Logo.jsx component template
-const LogoTemplate = args => /*#__PURE__*/_react.default.createElement(_Logo.Logo, args);
-
-// Comparison view showing all versions
-const AllVersions = () => /*#__PURE__*/_react.default.createElement(ComparisonContainer, null, /*#__PURE__*/_react.default.createElement(LogoSection, null, /*#__PURE__*/_react.default.createElement(LogoTitle, null, "Logo.jsx (Class Component)"), /*#__PURE__*/_react.default.createElement(LogoDescription, null, "Class component with customizable width and height props. Default: 70x17"), /*#__PURE__*/_react.default.createElement(LogoDisplay, null, /*#__PURE__*/_react.default.createElement(SizeLabel, null, "Default (70x17):"), /*#__PURE__*/_react.default.createElement(_Logo.Logo, null)), /*#__PURE__*/_react.default.createElement(LogoDisplay, null, /*#__PURE__*/_react.default.createElement(SizeLabel, null, "Custom (100x24):"), /*#__PURE__*/_react.default.createElement(_Logo.Logo, {
-  width: 100,
-  height: 24
-})), /*#__PURE__*/_react.default.createElement(LogoDisplay, null, /*#__PURE__*/_react.default.createElement(SizeLabel, null, "Small (50x12):"), /*#__PURE__*/_react.default.createElement(_Logo.Logo, {
-  width: 50,
-  height: 12
-})), /*#__PURE__*/_react.default.createElement(LogoDisplay, null, /*#__PURE__*/_react.default.createElement(SizeLabel, null, "Large (140x34):"), /*#__PURE__*/_react.default.createElement(_Logo.Logo, {
-  width: 140,
-  height: 34
-}))), /*#__PURE__*/_react.default.createElement(LogoSection, null, /*#__PURE__*/_react.default.createElement(LogoTitle, null, "LogoSvg.js (Functional Component)"), /*#__PURE__*/_react.default.createElement(LogoDescription, null, "Functional component with fixed size: 66px x 16px"), /*#__PURE__*/_react.default.createElement(LogoDisplay, null, /*#__PURE__*/_react.default.createElement(SizeLabel, null, "Fixed Size:"), /*#__PURE__*/_react.default.createElement(_LogoSvg.default, null))), /*#__PURE__*/_react.default.createElement(LogoSection, null, /*#__PURE__*/_react.default.createElement(LogoTitle, null, "logo.svg (Image File)"), /*#__PURE__*/_react.default.createElement(LogoDescription, null, "SVG file imported as an image. Can be used with img tag or as background"), /*#__PURE__*/_react.default.createElement(LogoDisplay, null, /*#__PURE__*/_react.default.createElement(SizeLabel, null, "As img tag:"), /*#__PURE__*/_react.default.createElement("img", {
-  src: _logo.default,
-  alt: "STOKR Logo",
-  style: {
-    height: '17px'
-  }
-})), /*#__PURE__*/_react.default.createElement(LogoDisplay, null, /*#__PURE__*/_react.default.createElement(SizeLabel, null, "Larger size:"), /*#__PURE__*/_react.default.createElement("img", {
-  src: _logo.default,
-  alt: "STOKR Logo",
-  style: {
-    height: '34px'
-  }
-})), /*#__PURE__*/_react.default.createElement(LogoDisplay, null, /*#__PURE__*/_react.default.createElement(SizeLabel, null, "As background:"), /*#__PURE__*/_react.default.createElement("div", {
-  style: {
-    width: '70px',
-    height: '17px',
-    backgroundImage: "url(".concat(_logo.default, ")"),
-    backgroundSize: 'contain',
-    backgroundRepeat: 'no-repeat',
-    backgroundPosition: 'center'
-  }
-}))), /*#__PURE__*/_react.default.createElement(LogoSection, null, /*#__PURE__*/_react.default.createElement(LogoTitle, null, "Side by Side Comparison"), /*#__PURE__*/_react.default.createElement(LogoDescription, null, "All three versions at similar sizes for direct comparison"), /*#__PURE__*/_react.default.createElement(LogoDisplay, null, /*#__PURE__*/_react.default.createElement("div", {
-  style: {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: '16px'
-  }
-}, /*#__PURE__*/_react.default.createElement("div", {
-  style: {
-    display: 'flex',
-    alignItems: 'center',
-    gap: '16px'
-  }
-}, /*#__PURE__*/_react.default.createElement(SizeLabel, null, "Logo.jsx:"), /*#__PURE__*/_react.default.createElement(_Logo.Logo, {
-  width: 70,
-  height: 17
-})), /*#__PURE__*/_react.default.createElement("div", {
-  style: {
-    display: 'flex',
-    alignItems: 'center',
-    gap: '16px'
-  }
-}, /*#__PURE__*/_react.default.createElement(SizeLabel, null, "LogoSvg.js:"), /*#__PURE__*/_react.default.createElement(_LogoSvg.default, null)), /*#__PURE__*/_react.default.createElement("div", {
-  style: {
-    display: 'flex',
-    alignItems: 'center',
-    gap: '16px'
-  }
-}, /*#__PURE__*/_react.default.createElement(SizeLabel, null, "logo.svg:"), /*#__PURE__*/_react.default.createElement("img", {
-  src: _logo.default,
-  alt: "STOKR Logo",
-  style: {
-    height: '17px'
-  }
-}))))));
-
-// Default Logo.jsx
-exports.AllVersions = AllVersions;
-const Default = exports.Default = LogoTemplate.bind({});
-Default.args = {
-  width: 70,
-  height: 17
-};
-
-// Small size
-const Small = exports.Small = LogoTemplate.bind({});
-Small.args = {
-  width: 50,
-  height: 12
-};
-
-// Medium size
-const Medium = exports.Medium = LogoTemplate.bind({});
-Medium.args = {
-  width: 100,
-  height: 24
-};
-
-// Large size
-const Large = exports.Large = LogoTemplate.bind({});
-Large.args = {
-  width: 140,
-  height: 34
-};
-
-// LogoSvg component
-const LogoSvgComponent = () => /*#__PURE__*/_react.default.createElement("div", {
-  style: {
-    padding: '20px'
-  }
-}, /*#__PURE__*/_react.default.createElement(_LogoSvg.default, null));
-
-// SVG file as image
-exports.LogoSvgComponent = LogoSvgComponent;
-const SvgFile = () => /*#__PURE__*/_react.default.createElement("div", {
-  style: {
-    padding: '20px',
-    display: 'flex',
-    flexDirection: 'column',
-    gap: '16px'
-  }
-}, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", {
-  style: {
-    marginBottom: '8px',
-    fontSize: '14px',
-    color: '#666'
-  }
-}, "Default size:"), /*#__PURE__*/_react.default.createElement("img", {
-  src: _logo.default,
-  alt: "STOKR Logo"
-})), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", {
-  style: {
-    marginBottom: '8px',
-    fontSize: '14px',
-    color: '#666'
-  }
-}, "Custom height (34px):"), /*#__PURE__*/_react.default.createElement("img", {
-  src: _logo.default,
-  alt: "STOKR Logo",
-  style: {
-    height: '34px'
-  }
-})), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", {
-  style: {
-    marginBottom: '8px',
-    fontSize: '14px',
-    color: '#666'
-  }
-}, "Custom height (50px):"), /*#__PURE__*/_react.default.createElement("img", {
-  src: _logo.default,
-  alt: "STOKR Logo",
-  style: {
-    height: '50px'
-  }
-})));
-
-// Different backgrounds for testing visibility
-exports.SvgFile = SvgFile;
-const OnDifferentBackgrounds = () => /*#__PURE__*/_react.default.createElement("div", {
-  style: {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: '24px',
-    padding: '20px'
-  }
-}, /*#__PURE__*/_react.default.createElement("div", {
-  style: {
-    padding: '20px',
-    backgroundColor: '#ffffff',
-    borderRadius: '8px'
-  }
-}, /*#__PURE__*/_react.default.createElement("p", {
-  style: {
-    marginBottom: '12px',
-    fontSize: '14px',
-    fontWeight: '600'
-  }
-}, "White Background:"), /*#__PURE__*/_react.default.createElement(_Logo.Logo, {
-  width: 70,
-  height: 17
-})), /*#__PURE__*/_react.default.createElement("div", {
-  style: {
-    padding: '20px',
-    backgroundColor: '#f8f8f8',
-    borderRadius: '8px'
-  }
-}, /*#__PURE__*/_react.default.createElement("p", {
-  style: {
-    marginBottom: '12px',
-    fontSize: '14px',
-    fontWeight: '600'
-  }
-}, "Light Grey Background:"), /*#__PURE__*/_react.default.createElement(_Logo.Logo, {
-  width: 70,
-  height: 17
-})), /*#__PURE__*/_react.default.createElement("div", {
-  style: {
-    padding: '20px',
-    backgroundColor: '#202020',
-    borderRadius: '8px'
-  }
-}, /*#__PURE__*/_react.default.createElement("p", {
-  style: {
-    marginBottom: '12px',
-    fontSize: '14px',
-    fontWeight: '600',
-    color: 'white'
-  }
-}, "Dark Background (Logo should be visible):"), /*#__PURE__*/_react.default.createElement(_Logo.Logo, {
-  width: 70,
-  height: 17
-})));
-exports.OnDifferentBackgrounds = OnDifferentBackgrounds;

package/dist/components/taxId/TaxId.stories.js

@@ -1,50 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.TaxIdModalFlow = exports.TaxIdFlowWithBackButton = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _flow = _interopRequireDefault(require("./flow"));
-var _global = _interopRequireDefault(require("../../styles/global"));
-var _reactRouterDom = require("react-router-dom");
-var _AuthContext = require("../../context/AuthContext");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = {
-  title: 'Components Library/Tax Id',
-  component: _flow.default,
-  argTypes: {
-    showFlow: {
-      type: 'boolean',
-      defaultValue: true
-    },
-    setShowFlow: {},
-    showBackButton: {
-      type: 'boolean',
-      defaultValue: false
-    },
-    showSkipButton: {
-      type: 'boolean',
-      defaultValue: false
-    },
-    redirectUrl: {
-      type: 'string',
-      defaultValue: ''
-    }
-  }
-};
-const Template = args => /*#__PURE__*/_react.default.createElement("div", {
-  style: {
-    background: 'lightblue',
-    height: 600
-  }
-}, /*#__PURE__*/_react.default.createElement(_reactRouterDom.BrowserRouter, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_AuthContext.AuthProvider, null, /*#__PURE__*/_react.default.createElement(_flow.default, args))));
-const TaxIdModalFlow = exports.TaxIdModalFlow = Template.bind({});
-TaxIdModalFlow.args = {
-  setShowFlow: () => {}
-};
-const TaxIdFlowWithBackButton = exports.TaxIdFlowWithBackButton = Template.bind({});
-TaxIdFlowWithBackButton.args = {
-  showBackButton: true,
-  showSkipButton: true
-};

package/dist/components/video/Video.stories.js

@@ -1,52 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.VideoMP4 = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Video = _interopRequireDefault(require("./Video"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = {
-  title: 'Components Library/Video',
-  component: _Video.default,
-  argTypes: {
-    src: {
-      type: 'string',
-      defaultValue: '',
-      required: true
-    },
-    autoplay: {
-      type: 'boolean',
-      defaultValue: true
-    },
-    poster: {
-      type: 'any'
-    },
-    onOpen: {
-      type: 'function',
-      action: 'onOpen'
-    },
-    onClose: {
-      type: 'function',
-      action: 'onClose'
-    },
-    isPlaying: {
-      type: 'boolean',
-      defaultValue: false
-    }
-  }
-};
-const Template = args => /*#__PURE__*/_react.default.createElement(_Video.default, args);
-
-// export const VideoDefault = Template.bind({})
-// VideoDefault.args = {}
-
-const VideoMP4 = exports.VideoMP4 = Template.bind({});
-VideoMP4.args = {
-  src: 'https://res.cloudinary.com/stokr/video/upload/f_auto,q_auto:best/v1745923531/Static/Hero_section_video_kuatj1.mp4'
-};
-
-// doublecheck:
-//src should be mp4
-// constant styles(<found and copied folder to CL)   and breakpoint from utils breaking storybook