@react-pakistan/util-functions 1.25.90 → 2.0.2

package/storybook/react-icon-story-script.js

@@ -1,27 +1,5 @@
-"use strict";
-/**
- * A util function to print React Story for Icons
- *
- * @param fs any
- * @returns an auto generated icon story file
- * @author Taimoor Khan
- * @remarks React Icon Collection
- */
-/** End file docs */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.generateReactIconScript = void 0;
-var generateReactIconScript = function (fs) {
-    var svgDir = './assets/';
-    var saveDir = './scripts/';
-    var scriptOutput = "# Generated by scripts/generate-script.js\n# DO NO EDIT\n\n";
-    // Read root Svg emoji directory
-    fs.readdirSync(svgDir).forEach(function (folderName) {
-        if (folderName === '.DS_Store')
-            return;
-        var flowArray = folderName.split('-');
-        var flow = flowArray[flowArray.length - 1];
-        scriptOutput += "svgr --template scripts/svgr-template.js --config-file scripts/.svgrrc-".concat(flow, ".js -d src/").concat(folderName, " --ext tsx assets/").concat(folderName, "\n");
-    });
-    fs.writeFileSync("".concat(saveDir, "all-scripts.sh"), scriptOutput);
-};
-exports.generateReactIconScript = generateReactIconScript;
+var i=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var o=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var l=(t,s)=>{for(var c in s)i(t,c,{get:s[c],enumerable:!0})},v=(t,s,c,e)=>{if(s&&typeof s=="object"||typeof s=="function")for(let r of o(s))!g.call(t,r)&&r!==c&&i(t,r,{get:()=>s[r],enumerable:!(e=a(s,r))||e.enumerable});return t};var y=t=>v(i({},"__esModule",{value:!0}),t);var S={};l(S,{generateReactIconScript:()=>D});module.exports=y(S);const D=t=>{const s="./assets/",c="./scripts/";let e=`# Generated by scripts/generate-script.js
+# DO NO EDIT
+
+`;t.readdirSync(s).forEach(r=>{if(r===".DS_Store")return;const n=r.split("-"),p=n[n.length-1];e+=`svgr --template scripts/svgr-template.js --config-file scripts/.svgrrc-${p}.js -d src/${r} --ext tsx assets/${r}
+`}),t.writeFileSync(`${c}all-scripts.sh`,e)};0&&(module.exports={generateReactIconScript});

package/storybook/react-icon-story-template.d.ts

@@ -8,4 +8,6 @@
  * @remarks React Icon Collection
  */
 /** End file docs */
-export declare const reactIconStoryTemplate: (category: string, iconListDirName: string) => string;
+declare const reactIconStoryTemplate: (category: string, iconListDirName: string) => string;
+
+export { reactIconStoryTemplate };

package/storybook/react-icon-story-template.js

@@ -1,15 +1,46 @@
-"use strict";
-/**
- * A util function to print React Story for Icons
- *
- * @param category string
- * @param iconListDirName string
- * @returns an auto generated icon story file
- * @author Taimoor Khan
- * @remarks React Icon Collection
+var o=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var a=Object.prototype.hasOwnProperty;var i=(e,t)=>{for(var n in t)o(e,n,{get:t[n],enumerable:!0})},I=(e,t,n,c)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of p(t))!a.call(e,r)&&r!==n&&o(e,r,{get:()=>t[r],enumerable:!(c=m(t,r))||c.enumerable});return e};var s=e=>I(o({},"__esModule",{value:!0}),e);var S={};i(S,{reactIconStoryTemplate:()=>l});module.exports=s(S);const l=(e,t)=>`/*
+ * Generated by scripts/generate-icons.js
+ * DO NOT EDIT!
  */
-/** End file docs */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.reactIconStoryTemplate = void 0;
-var reactIconStoryTemplate = function (category, iconListDirName) { return "/*\n * Generated by scripts/generate-icons.js\n * DO NOT EDIT!\n */\n\nimport React, { ReactElement } from 'react';\nimport { IconWrapper, IconTextWrapper, IconItem } from '../styled';\nimport { StyledStory } from '../styled-app';\nimport { ICON_LIST } from './".concat(iconListDirName, "';\n\nconst iconStyle = { width: '7rem', height: '7rem' };\n\nconst renderItem = (\n  item: { icon: React.FC<React.SVGProps<SVGSVGElement>>, name: string }\n): ReactElement => {\n  const Icon = item.icon;\n  return (\n    <IconItem\n      key={item.name}\n    >\n      <Icon style={iconStyle} />\n      <IconTextWrapper>\n        {item.name}\n      </IconTextWrapper>\n    </IconItem>\n  );\n};\n\nconst icons = ICON_LIST.map(renderItem);\n\nexport const ").concat(category, " = (): ReactElement => (\n  <StyledStory>\n    <IconWrapper>\n      {icons}\n    </IconWrapper>\n  </StyledStory>\n);\n\nexport default {\n  title: 'Icon/").concat(category, "',\n\n  parameters: {\n    component: ").concat(category, ",\n  },\n};\n"); };
-exports.reactIconStoryTemplate = reactIconStoryTemplate;
+
+import React, { ReactElement } from 'react';
+import { IconWrapper, IconTextWrapper, IconItem } from '../styled';
+import { StyledStory } from '../styled-app';
+import { ICON_LIST } from './${t}';
+
+const iconStyle = { width: '7rem', height: '7rem' };
+
+const renderItem = (
+  item: { icon: React.FC<React.SVGProps<SVGSVGElement>>, name: string }
+): ReactElement => {
+  const Icon = item.icon;
+  return (
+    <IconItem
+      key={item.name}
+    >
+      <Icon style={iconStyle} />
+      <IconTextWrapper>
+        {item.name}
+      </IconTextWrapper>
+    </IconItem>
+  );
+};
+
+const icons = ICON_LIST.map(renderItem);
+
+export const ${e} = (): ReactElement => (
+  <StyledStory>
+    <IconWrapper>
+      {icons}
+    </IconWrapper>
+  </StyledStory>
+);
+
+export default {
+  title: 'Icon/${e}',
+
+  parameters: {
+    component: ${e},
+  },
+};
+`;0&&(module.exports={reactIconStoryTemplate});

package/storybook/react-logo-collection.d.ts

@@ -8,4 +8,6 @@
  * @remarks React Logo Collection
  */
 /** End file docs */
-export declare const generateReactLogos: (fs: any) => void;
+declare const generateReactLogos: (fs: any) => void;
+
+export { generateReactLogos };

package/storybook/react-logo-collection.js

@@ -1,43 +1,11 @@
-"use strict";
-/**
- * A util function to read svg logo directory and its content
- * and constructs logo stories for all of it's subdirectories
- *
- * @param fs any
- * @returns an auto generated icon story file
- * @author Taimoor Khan
- * @remarks React Logo Collection
+var c=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var $=Object.prototype.hasOwnProperty;var d=(t,o)=>{for(var s in o)c(t,s,{get:o[s],enumerable:!0})},D=(t,o,s,e)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of l(o))!$.call(t,r)&&r!==s&&c(t,r,{get:()=>o[r],enumerable:!(e=S(o,r))||e.enumerable});return t};var L=t=>D(c({},"__esModule",{value:!0}),t);var v={};d(v,{generateReactLogos:()=>_});module.exports=L(v);var g=require("./react-logo-story-template");const _=t=>{const o="./assets/",s="./src/__stories__/";let e="",r="";t.readdirSync(o).forEach(n=>{if(n===".DS_Store")return;const a=`${o}${n}`;e=`/**
+ * Generated by scripts/generate-logos.js
+ * DO NOT EDIT!
  */
-/** End file docs */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.generateReactLogos = void 0;
-var react_logo_story_template_1 = require("./react-logo-story-template");
-var generateReactLogos = function (fs) {
-    var logoDir = './assets/';
-    var saveDir = './src/__stories__/';
-    var logoListOutput = '';
-    var level1FileName = '';
-    // Read root Logo directory
-    fs.readdirSync(logoDir).forEach(function (fileName) {
-        if (fileName === '.DS_Store')
-            return;
-        var level1Dir = "".concat(logoDir).concat(fileName);
-        logoListOutput = "/**\n * Generated by scripts/generate-logos.js\n * DO NOT EDIT!\n */\n\nimport * as Logos from '../".concat(fileName, "';\n\nexport const LOGO_LIST = [\n");
-        // Read level1-directory
-        fs.readdirSync(level1Dir).forEach(function (_level1FileName) {
-            if (_level1FileName === '.DS_Store')
-                return;
-            level1FileName = _level1FileName;
-            logoListOutput += "  { logo: Logos.".concat(level1FileName.split('.')[0], ", name: '").concat(level1FileName.split('.')[0], "' },\n");
-        });
-        logoListOutput += "];\n";
-        var categoryName = fileName
-            .split('-')
-            .map(function (str) { return str[0].toUpperCase() + str.slice(1); })
-            .join('');
-        var story = (0, react_logo_story_template_1.reactLogoStoryTemplate)(categoryName, fileName);
-        fs.writeFileSync("".concat(saveDir, "/").concat(fileName, ".ts"), logoListOutput);
-        fs.writeFileSync("".concat(saveDir, "/").concat(fileName, ".story.tsx"), story);
-    });
-};
-exports.generateReactLogos = generateReactLogos;
+
+import * as Logos from '../${n}';
+
+export const LOGO_LIST = [
+`,t.readdirSync(a).forEach(i=>{i!==".DS_Store"&&(r=i,e+=`  { logo: Logos.${r.split(".")[0]}, name: '${r.split(".")[0]}' },
+`)}),e+=`];
+`;const p=n.split("-").map(i=>i[0].toUpperCase()+i.slice(1)).join(""),y=(0,g.reactLogoStoryTemplate)(p,n);t.writeFileSync(`${s}/${n}.ts`,e),t.writeFileSync(`${s}/${n}.story.tsx`,y)})};0&&(module.exports={generateReactLogos});

package/storybook/react-logo-story-script.d.ts

@@ -7,4 +7,6 @@
  * @remarks React Logo Collection
  */
 /** End file docs */
-export declare const generateReactLogoScript: (fs: any) => void;
+declare const generateReactLogoScript: (fs: any) => void;
+
+export { generateReactLogoScript };

package/storybook/react-logo-story-script.js

@@ -1,27 +1,5 @@
-"use strict";
-/**
- * A util function to print React Story for Logos
- *
- * @param fs any
- * @returns an auto generated logo story file
- * @author Taimoor Khan
- * @remarks React Logo Collection
- */
-/** End file docs */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.generateReactLogoScript = void 0;
-var generateReactLogoScript = function (fs) {
-    var svgDir = './assets/';
-    var saveDir = './scripts/';
-    var scriptOutput = "# Generated by scripts/generate-script.js\n# DO NO EDIT\n\n";
-    // Read root Svg logo directory
-    fs.readdirSync(svgDir).forEach(function (folderName) {
-        if (folderName === '.DS_Store')
-            return;
-        var flowArray = folderName.split('-');
-        var flow = flowArray[flowArray.length - 1];
-        scriptOutput += "svgr --template scripts/svgr-template.js --config-file scripts/.svgrrc-".concat(flow, ".js -d src/").concat(folderName, " --ext tsx assets/").concat(folderName, "\n");
-    });
-    fs.writeFileSync("".concat(saveDir, "all-scripts.sh"), scriptOutput);
-};
-exports.generateReactLogoScript = generateReactLogoScript;
+var i=Object.defineProperty;var o=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var l=(t,s)=>{for(var e in s)i(t,e,{get:s[e],enumerable:!0})},v=(t,s,e,c)=>{if(s&&typeof s=="object"||typeof s=="function")for(let r of a(s))!g.call(t,r)&&r!==e&&i(t,r,{get:()=>s[r],enumerable:!(c=o(s,r))||c.enumerable});return t};var y=t=>v(i({},"__esModule",{value:!0}),t);var S={};l(S,{generateReactLogoScript:()=>D});module.exports=y(S);const D=t=>{const s="./assets/",e="./scripts/";let c=`# Generated by scripts/generate-script.js
+# DO NO EDIT
+
+`;t.readdirSync(s).forEach(r=>{if(r===".DS_Store")return;const n=r.split("-"),p=n[n.length-1];c+=`svgr --template scripts/svgr-template.js --config-file scripts/.svgrrc-${p}.js -d src/${r} --ext tsx assets/${r}
+`}),t.writeFileSync(`${e}all-scripts.sh`,c)};0&&(module.exports={generateReactLogoScript});

package/storybook/react-logo-story-template.d.ts

@@ -8,4 +8,6 @@
  * @remarks React Logo Collection
  */
 /** End file docs */
-export declare const reactLogoStoryTemplate: (category: string, logoListDirName: string) => string;
+declare const reactLogoStoryTemplate: (category: string, logoListDirName: string) => string;
+
+export { reactLogoStoryTemplate };

package/storybook/react-logo-story-template.js

@@ -1,15 +1,46 @@
-"use strict";
-/**
- * A util function to print React Story for Logos
- *
- * @param category string
- * @param logoListDirName string
- * @returns an auto generated icon story file
- * @author Taimoor Khan
- * @remarks React Logo Collection
+var m=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var n=Object.getOwnPropertyNames;var s=Object.prototype.hasOwnProperty;var a=(o,e)=>{for(var r in e)m(o,r,{get:e[r],enumerable:!0})},l=(o,e,r,p)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of n(e))!s.call(o,t)&&t!==r&&m(o,t,{get:()=>e[t],enumerable:!(p=g(e,t))||p.enumerable});return o};var L=o=>l(m({},"__esModule",{value:!0}),o);var c={};a(c,{reactLogoStoryTemplate:()=>i});module.exports=L(c);const i=(o,e)=>`/*
+ * Generated by scripts/generate-logos.js
+ * DO NOT EDIT!
  */
-/** End file docs */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.reactLogoStoryTemplate = void 0;
-var reactLogoStoryTemplate = function (category, logoListDirName) { return "/*\n * Generated by scripts/generate-logos.js\n * DO NOT EDIT!\n */\n\nimport React, { FC, ReactElement } from 'react';\nimport { LogoWrapper, LogoTextWrapper, LogoItem, ILogoProps } from '../styled';\nimport { StyledStory } from '../styled-app';\nimport { LOGO_LIST } from './".concat(logoListDirName, "';\n\nconst logoStyle = { width: '7rem', height: '7rem' };\n\nconst renderItem = (\n  item: { logo: FC<ILogoProps>, name: string }\n): ReactElement => {\n  const Logo = item.logo;\n  return (\n    <LogoItem\n      key={item.name}\n    >\n      <Logo style={logoStyle} />\n      <LogoTextWrapper>\n        {item.name}\n      </LogoTextWrapper>\n    </LogoItem>\n  );\n};\n\nconst logos = LOGO_LIST.map(renderItem);\n\nexport const ").concat(category, " = (): ReactElement => (\n  <StyledStory>\n    <LogoWrapper>\n      {logos}\n    </LogoWrapper>\n  </StyledStory>\n);\n\nexport default {\n  title: 'Logo/").concat(category, "',\n\n  parameters: {\n    component: ").concat(category, ",\n  },\n};\n"); };
-exports.reactLogoStoryTemplate = reactLogoStoryTemplate;
+
+import React, { FC, ReactElement } from 'react';
+import { LogoWrapper, LogoTextWrapper, LogoItem, ILogoProps } from '../styled';
+import { StyledStory } from '../styled-app';
+import { LOGO_LIST } from './${e}';
+
+const logoStyle = { width: '7rem', height: '7rem' };
+
+const renderItem = (
+  item: { logo: FC<ILogoProps>, name: string }
+): ReactElement => {
+  const Logo = item.logo;
+  return (
+    <LogoItem
+      key={item.name}
+    >
+      <Logo style={logoStyle} />
+      <LogoTextWrapper>
+        {item.name}
+      </LogoTextWrapper>
+    </LogoItem>
+  );
+};
+
+const logos = LOGO_LIST.map(renderItem);
+
+export const ${o} = (): ReactElement => (
+  <StyledStory>
+    <LogoWrapper>
+      {logos}
+    </LogoWrapper>
+  </StyledStory>
+);
+
+export default {
+  title: 'Logo/${o}',
+
+  parameters: {
+    component: ${o},
+  },
+};
+`;0&&(module.exports={reactLogoStoryTemplate});

package/storybook/react-pakistan-theme.d.ts

@@ -1,4 +1,4 @@
-export declare const reactPakistanTheme: {
+declare const reactPakistanTheme: {
     base: string;
     colorPrimary: string;
     colorSecondary: string;
@@ -21,3 +21,5 @@ export declare const reactPakistanTheme: {
     brandUrl: string;
     brandImage: string;
 };
+
+export { reactPakistanTheme };

package/storybook/react-pakistan-theme.js

@@ -1,31 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.reactPakistanTheme = void 0;
-exports.reactPakistanTheme = {
-    base: 'light',
-    colorPrimary: 'hotpink',
-    colorSecondary: 'deepskyblue',
-    // UI
-    appBg: 'white',
-    appContentBg: 'silver',
-    appBorderColor: 'grey',
-    appBorderRadius: 4,
-    // Typography
-    fontBase: '"Open Sans", sans-serif',
-    fontCode: 'monospace',
-    // Text colors
-    textColor: 'black',
-    textInverseColor: 'rgba(255,255,255,0.9)',
-    // Toolbar default and active colors
-    barTextColor: 'silver',
-    barSelectedColor: 'black',
-    barBg: 'hotpink',
-    // Form colors
-    inputBg: 'white',
-    inputBorder: 'silver',
-    inputTextColor: 'black',
-    inputBorderRadius: 4,
-    brandTitle: 'React Commons Collection',
-    brandUrl: 'https://github.com/Taimoormk/react-commons-collection',
-    brandImage: 'https://res.cloudinary.com/dq6hflqwx/image/upload/v1565548545/GitHub/React_Pakistan_Storybook_Logo.jpg',
-};
+var a=Object.defineProperty;var i=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var s=(e,o)=>{for(var t in o)a(e,t,{get:o[t],enumerable:!0})},c=(e,o,t,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of l(o))!p.call(e,r)&&r!==t&&a(e,r,{get:()=>o[r],enumerable:!(n=i(o,r))||n.enumerable});return e};var d=e=>c(a({},"__esModule",{value:!0}),e);var m={};s(m,{reactPakistanTheme:()=>b});module.exports=d(m);const b={base:"light",colorPrimary:"hotpink",colorSecondary:"deepskyblue",appBg:"white",appContentBg:"silver",appBorderColor:"grey",appBorderRadius:4,fontBase:'"Open Sans", sans-serif',fontCode:"monospace",textColor:"black",textInverseColor:"rgba(255,255,255,0.9)",barTextColor:"silver",barSelectedColor:"black",barBg:"hotpink",inputBg:"white",inputBorder:"silver",inputTextColor:"black",inputBorderRadius:4,brandTitle:"React Commons Collection",brandUrl:"https://github.com/Taimoormk/react-commons-collection",brandImage:"https://res.cloudinary.com/dq6hflqwx/image/upload/v1565548545/GitHub/React_Pakistan_Storybook_Logo.jpg"};0&&(module.exports={reactPakistanTheme});

package/storybook/responsive-args.d.ts

@@ -1,15 +1,15 @@
-export declare const responsiveArgs: IResponsiveArgs;
-export declare const mobileS = "";
-export declare const mobileM = "";
-export declare const mobileL = "";
-export declare const tablet = "";
-export declare const laptop = "";
-export declare const laptopL = "";
-export declare const desktop = "";
+declare const responsiveArgs: IResponsiveArgs;
+declare const mobileS = "";
+declare const mobileM = "";
+declare const mobileL = "";
+declare const tablet = "";
+declare const laptop = "";
+declare const laptopL = "";
+declare const desktop = "";
 interface IControlText {
     control: string;
 }
-export interface IResponsiveArgs {
+interface IResponsiveArgs {
     desktop: IControlText;
     laptop: IControlText;
     laptopL: IControlText;
@@ -18,4 +18,5 @@ export interface IResponsiveArgs {
     mobileS: IControlText;
     tablet: IControlText;
 }
-export {};
+
+export { type IResponsiveArgs, desktop, laptop, laptopL, mobileL, mobileM, mobileS, responsiveArgs, tablet };

package/storybook/responsive-args.js

@@ -1,19 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.desktop = exports.laptopL = exports.laptop = exports.tablet = exports.mobileL = exports.mobileM = exports.mobileS = exports.responsiveArgs = void 0;
-exports.responsiveArgs = {
-    desktop: { control: 'text' },
-    laptop: { control: 'text' },
-    laptopL: { control: 'text' },
-    mobileL: { control: 'text' },
-    mobileM: { control: 'text' },
-    mobileS: { control: 'text' },
-    tablet: { control: 'text' },
-};
-exports.mobileS = '';
-exports.mobileM = '';
-exports.mobileL = '';
-exports.tablet = '';
-exports.laptop = '';
-exports.laptopL = '';
-exports.desktop = '';
+var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var s=Object.prototype.hasOwnProperty;var c=(o,t)=>{for(var l in t)r(o,l,{get:t[l],enumerable:!0})},i=(o,t,l,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of x(t))!s.call(o,e)&&e!==l&&r(o,e,{get:()=>t[e],enumerable:!(n=p(t,e))||n.enumerable});return o};var b=o=>i(r({},"__esModule",{value:!0}),o);var k={};c(k,{desktop:()=>d,laptop:()=>L,laptopL:()=>g,mobileL:()=>C,mobileM:()=>m,mobileS:()=>I,responsiveArgs:()=>a,tablet:()=>T});module.exports=b(k);const a={desktop:{control:"text"},laptop:{control:"text"},laptopL:{control:"text"},mobileL:{control:"text"},mobileM:{control:"text"},mobileS:{control:"text"},tablet:{control:"text"}},I="",m="",C="",T="",L="",g="",d="";0&&(module.exports={desktop,laptop,laptopL,mobileL,mobileM,mobileS,responsiveArgs,tablet});

package/storybook/responsive-component.d.ts

@@ -1,4 +1,4 @@
-export interface IResponsiveProps {
+interface IResponsiveProps {
     /**
      * Specifies the CSS block on desktop devices
      */
@@ -28,4 +28,6 @@ export interface IResponsiveProps {
      */
     $tablet?: string;
 }
-export declare const responsiveComponent: ({ $desktop, $laptop, $laptopL, $mobileL, $mobileM, $mobileS, $tablet, }: IResponsiveProps) => string;
+declare const responsiveComponent: ({ $desktop, $laptop, $laptopL, $mobileL, $mobileM, $mobileS, $tablet, }: IResponsiveProps) => string;
+
+export { type IResponsiveProps, responsiveComponent };

package/storybook/responsive-component.js

@@ -1,23 +1,37 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.responsiveComponent = void 0;
-var theme_1 = require("./theme");
-var responsiveComponent = function (_a) {
-    var $desktop = _a.$desktop, $laptop = _a.$laptop, $laptopL = _a.$laptopL, $mobileL = _a.$mobileL, $mobileM = _a.$mobileM, $mobileS = _a.$mobileS, $tablet = _a.$tablet;
-    var mobileSToReturn = $mobileS &&
-        "\n    @media ".concat(theme_1.theme.breakpoints.mobileS, " {\n      ").concat($mobileS, "\n    }\n  ");
-    var mobileMToReturn = $mobileM &&
-        "\n    @media ".concat(theme_1.theme.breakpoints.mobileM, " {\n      ").concat($mobileM, "\n    }\n  ");
-    var mobileLToReturn = $mobileL &&
-        "\n    @media ".concat(theme_1.theme.breakpoints.mobileL, " {\n      ").concat($mobileL, "\n    }\n  ");
-    var tabletToReturn = $tablet &&
-        "\n    @media ".concat(theme_1.theme.breakpoints.tablet, " {\n      ").concat($tablet, "\n    }\n  ");
-    var laptopToReturn = $laptop &&
-        "\n    @media ".concat(theme_1.theme.breakpoints.laptop, " {\n      ").concat($laptop, "\n    }\n  ");
-    var laptopLToReturn = $laptopL &&
-        "\n    @media ".concat(theme_1.theme.breakpoints.laptopL, " {\n      ").concat($laptopL, "\n    }\n  ");
-    var desktopToReturn = $desktop &&
-        "\n    @media ".concat(theme_1.theme.breakpoints.desktop, " {\n      ").concat($desktop, "\n    }\n  ");
-    return "\n    ".concat(mobileSToReturn, "\n    ").concat(mobileMToReturn, "\n    ").concat(mobileLToReturn, "\n    ").concat(tabletToReturn, "\n    ").concat(laptopToReturn, "\n    ").concat(laptopLToReturn, "\n    ").concat(desktopToReturn, "\n  ");
-};
-exports.responsiveComponent = responsiveComponent;
+var r=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var T=(e,t)=>{for(var i in t)r(e,i,{get:t[i],enumerable:!0})},L=(e,t,i,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of g(t))!u.call(e,o)&&o!==i&&r(e,o,{get:()=>t[o],enumerable:!(s=R(t,o))||s.enumerable});return e};var v=e=>L(r({},"__esModule",{value:!0}),e);var x={};T(x,{responsiveComponent:()=>f});module.exports=v(x);var n=require("./theme");const f=({$desktop:e,$laptop:t,$laptopL:i,$mobileL:s,$mobileM:o,$mobileS:p,$tablet:a})=>{const $=p&&`
+    @media ${n.theme.breakpoints.mobileS} {
+      ${p}
+    }
+  `,m=o&&`
+    @media ${n.theme.breakpoints.mobileM} {
+      ${o}
+    }
+  `,b=s&&`
+    @media ${n.theme.breakpoints.mobileL} {
+      ${s}
+    }
+  `,l=a&&`
+    @media ${n.theme.breakpoints.tablet} {
+      ${a}
+    }
+  `,c=t&&`
+    @media ${n.theme.breakpoints.laptop} {
+      ${t}
+    }
+  `,d=i&&`
+    @media ${n.theme.breakpoints.laptopL} {
+      ${i}
+    }
+  `,k=e&&`
+    @media ${n.theme.breakpoints.desktop} {
+      ${e}
+    }
+  `;return`
+    ${$}
+    ${m}
+    ${b}
+    ${l}
+    ${c}
+    ${d}
+    ${k}
+  `};0&&(module.exports={responsiveComponent});

package/storybook/responsive-screens.d.ts

@@ -1,4 +1,4 @@
-export declare const responsiveScreens: {
+declare const responsiveScreens: {
     mobileSMin: {
         name: string;
         styles: {
@@ -104,3 +104,5 @@ export declare const responsiveScreens: {
         type: string;
     };
 };
+
+export { responsiveScreens };

package/storybook/responsive-screens.js

@@ -1,109 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.responsiveScreens = void 0;
-exports.responsiveScreens = {
-    mobileSMin: {
-        name: 'MobileSMin',
-        styles: {
-            height: '1024px',
-            width: '320px',
-        },
-        type: 'mobile',
-    },
-    mobileSMax: {
-        name: 'MobileSMax',
-        styles: {
-            height: '1024px',
-            width: '374px',
-        },
-        type: 'mobile',
-    },
-    mobileMMin: {
-        name: 'MobileMMin',
-        styles: {
-            height: '1024px',
-            width: '375px',
-        },
-        type: 'mobile',
-    },
-    mobileMMax: {
-        name: 'MobileMMax',
-        styles: {
-            height: '1024px',
-            width: '424px',
-        },
-        type: 'mobile',
-    },
-    mobileLMin: {
-        name: 'MobileLMin',
-        styles: {
-            height: '1024px',
-            width: '425px',
-        },
-        type: 'mobile',
-    },
-    mobileLMax: {
-        name: 'MobileLMax',
-        styles: {
-            height: '1024px',
-            width: '767px',
-        },
-        type: 'mobile',
-    },
-    tabletMin: {
-        name: 'TabletMin',
-        styles: {
-            height: '100%',
-            width: '768px',
-        },
-        type: 'mobile',
-    },
-    tabletMax: {
-        name: 'TabletMax',
-        styles: {
-            height: '100%',
-            width: '1023px',
-        },
-        type: 'mobile',
-    },
-    laptopMin: {
-        name: 'LaptopMin',
-        styles: {
-            height: '100%',
-            width: '1024',
-        },
-        type: 'mobile',
-    },
-    laptopMax: {
-        name: 'LaptopMax',
-        styles: {
-            height: '100%',
-            width: '1439px',
-        },
-        type: 'mobile',
-    },
-    laptopLMin: {
-        name: 'LaptopLMin',
-        styles: {
-            height: '100%',
-            width: '1440px',
-        },
-        type: 'mobile',
-    },
-    laptopLMax: {
-        name: 'LaptopLMax',
-        styles: {
-            height: '100%',
-            width: '2559px',
-        },
-        type: 'mobile',
-    },
-    desktop: {
-        name: 'Desktop',
-        styles: {
-            height: '100%',
-            width: '2560px',
-        },
-        type: 'mobile',
-    },
-};
+var l=Object.defineProperty;var o=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var M=Object.prototype.hasOwnProperty;var m=(t,e)=>{for(var p in e)l(t,p,{get:e[p],enumerable:!0})},s=(t,e,p,h)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of a(e))!M.call(t,i)&&i!==p&&l(t,i,{get:()=>e[i],enumerable:!(h=o(e,i))||h.enumerable});return t};var x=t=>s(l({},"__esModule",{value:!0}),t);var n={};m(n,{responsiveScreens:()=>b});module.exports=x(n);const b={mobileSMin:{name:"MobileSMin",styles:{height:"1024px",width:"320px"},type:"mobile"},mobileSMax:{name:"MobileSMax",styles:{height:"1024px",width:"374px"},type:"mobile"},mobileMMin:{name:"MobileMMin",styles:{height:"1024px",width:"375px"},type:"mobile"},mobileMMax:{name:"MobileMMax",styles:{height:"1024px",width:"424px"},type:"mobile"},mobileLMin:{name:"MobileLMin",styles:{height:"1024px",width:"425px"},type:"mobile"},mobileLMax:{name:"MobileLMax",styles:{height:"1024px",width:"767px"},type:"mobile"},tabletMin:{name:"TabletMin",styles:{height:"100%",width:"768px"},type:"mobile"},tabletMax:{name:"TabletMax",styles:{height:"100%",width:"1023px"},type:"mobile"},laptopMin:{name:"LaptopMin",styles:{height:"100%",width:"1024"},type:"mobile"},laptopMax:{name:"LaptopMax",styles:{height:"100%",width:"1439px"},type:"mobile"},laptopLMin:{name:"LaptopLMin",styles:{height:"100%",width:"1440px"},type:"mobile"},laptopLMax:{name:"LaptopLMax",styles:{height:"100%",width:"2559px"},type:"mobile"},desktop:{name:"Desktop",styles:{height:"100%",width:"2560px"},type:"mobile"}};0&&(module.exports={responsiveScreens});