@sikka/hawa 0.0.59 → 0.0.61

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.59",
+  "version": "0.0.61",
   "description": "UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",
@@ -69,7 +69,6 @@
     "react-color": "^2.19.3",
     "react-dnd": "^15.1.2",
     "react-dom": "^17.0.1",
-    "react-dropzone": "^12.0.4",
     "react-hook-form": "^7.28.0",
     "react-phone-input-2": "^2.15.1",
     "react-select": "^5.3.2",
@@ -85,6 +84,7 @@
   },
   "dependencies": {
     "flowbite": "^1.5.3",
+    "react-dropzone": "^12.0.4",
     "react-icons": "^4.6.0"
   }
 }

package/src/blocks/Pricing/ComparingPlans.js

@@ -0,0 +1,151 @@
+import React, { useState } from "react";
+import { HawaPricingCard, HawaPanelTabs, HawaTabs } from "../../elements";
+import PropTypes from "prop-types";
+
+const CheckMark = () => (
+  <svg
+    class="w-5 h-5 text-green-500"
+    aria-hidden="true"
+    fill="currentColor"
+    viewBox="0 0 20 20"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+      clip-rule="evenodd"
+    ></path>
+  </svg>
+);
+
+const UncheckMark = () => (
+  <svg
+    class="w-5 h-5 text-red-500"
+    aria-hidden="true"
+    fill="currentColor"
+    viewBox="0 0 20 20"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+      clip-rule="evenodd"
+    ></path>
+  </svg>
+);
+
+export const ComparingPlans = (props) => {
+  const [currentCurrency, setCurrentCurrency] = useState("sar");
+  const [currentCycle, setCurrentCycle] = useState("monthly");
+  let cycleOptions = [
+    { label: `Monthly`, value: `monthly` },
+    { label: `3 Months`, value: `3-months` },
+    { label: `6 Months`, value: `6-months` },
+    { label: `Annually`, value: `annually` }
+  ];
+  let currencyOptions = [
+    { label: `USD`, value: `usd` },
+    { label: `SAR`, value: `sar` }
+  ];
+  let activeTabStyle =
+    "inline-block py-3 px-4 text-white bg-blue-600 rounded-lg active";
+  let inactiveTabStyle =
+    "inline-block py-3 px-4 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white";
+  return (
+    <div id="detailed-pricing" class="overflow-x-auto w-full">
+      <div class="overflow-hidden min-w-max">
+        <div class="grid grid-cols-4 gap-x-16 p-4 text-sm font-medium text-gray-900 bg-gray-100 border-t border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700 dark:text-white">
+          <div class="flex items-center"></div>
+          {props.plans.map((plan) => (
+            <div>{plan.title}</div>
+          ))}
+        </div>
+        {props.plans.map((plan) => {
+          return (
+            <div class="grid grid-cols-4 gap-x-16 py-5 px-4 text-sm text-gray-700 border-b border-gray-200 dark:border-gray-700">
+              <div class="text-gray-500 dark:text-gray-400">
+                Basic components (
+                <a href="#" class="text-blue-600 hover:underline">
+                  view all
+                </a>
+                )
+              </div>
+              <CheckMark />
+              <CheckMark />
+              <CheckMark />
+            </div>
+          );
+        })}
+        <div class="grid grid-cols-4 gap-x-16 py-5 px-4 text-sm text-gray-700 border-b border-gray-200 dark:border-gray-700">
+          <div class="text-gray-500 dark:text-gray-400">
+            Application UI (
+            <a href="#" class="text-blue-600 hover:underline">
+              view demo
+            </a>
+            )
+          </div>
+          <UncheckMark />
+          <CheckMark />
+          <UncheckMark />
+        </div>
+        <div class="grid grid-cols-4 gap-x-16 py-5 px-4 text-sm text-gray-700 border-b border-gray-200 dark:border-gray-700">
+          <div class="text-gray-500 dark:text-gray-400">
+            Marketing UI pre-order
+          </div>
+          <UncheckMark />
+          <CheckMark />
+          <UncheckMark />
+        </div>
+        <div class="grid grid-cols-4 gap-x-16 py-5 px-4 text-sm text-gray-700 border-b border-gray-200 dark:border-gray-700">
+          <div class="text-gray-500 dark:text-gray-400"></div>
+          <div>
+            <a
+              href="#"
+              class="text-white block w-full bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-200 font-medium rounded-lg text-sm px-4 py-2.5 text-center dark:focus:ring-blue-900"
+            >
+              Buy now
+            </a>
+          </div>
+          <div>
+            <a
+              href="#"
+              class="text-white block w-full bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-200 font-medium rounded-lg text-sm px-4 py-2.5 text-center dark:focus:ring-blue-900"
+            >
+              Buy now
+            </a>
+          </div>
+          <div>
+            <a
+              href="#"
+              class="text-white block w-full bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-200 font-medium rounded-lg text-sm px-4 py-2.5 text-center dark:focus:ring-blue-900"
+            >
+              Buy now
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+ComparingPlans.propTypes = {
+  /**
+   * An array of the pricing plans
+   */
+  plans: PropTypes.arrayOf(
+    PropTypes.shape({
+      title: PropTypes.string,
+      title_ar: PropTypes.string,
+      subtitle: PropTypes.string,
+      subtitle_ar: PropTypes.string,
+      price: PropTypes.number,
+      currency: PropTypes.string,
+      cycleText: PropTypes.string,
+      buttonText: PropTypes.string,
+      features: PropTypes.array,
+      features_ar: PropTypes.array,
+      selectedPlan: PropTypes.bool
+    })
+  ),
+  lang: PropTypes.string
+};

package/src/blocks/Pricing/PricingPlans.js

@@ -1,10 +1,24 @@
 import React, { useState } from "react";
-import { HawaPricingCard, HawaPanelTabs } from "../../elements";
+import { HawaPricingCard, HawaPanelTabs, HawaTabs } from "../../elements";
 import PropTypes from "prop-types";
 
 export const PricingPlans = (props) => {
   const [currentCurrency, setCurrentCurrency] = useState("sar");
   const [currentCycle, setCurrentCycle] = useState("monthly");
+  let cycleOptions = [
+    { label: `Monthly`, value: `monthly` },
+    { label: `3 Months`, value: `3-months` },
+    { label: `6 Months`, value: `6-months` },
+    { label: `Annually`, value: `annually` }
+  ];
+  let currencyOptions = [
+    { label: `USD`, value: `usd` },
+    { label: `SAR`, value: `sar` }
+  ];
+  let activeTabStyle =
+    "inline-block py-3 px-4 text-white bg-blue-600 rounded-lg active";
+  let inactiveTabStyle =
+    "inline-block py-3 px-4 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white";
   return (
     <div>
       <div
@@ -15,28 +29,23 @@ export const PricingPlans = (props) => {
           marginBottom: 10
         }}
       >
-        <HawaPanelTabs
-          location="inPricing"
-          handleChange={(e) => setCurrentCycle(e)}
-          defaultValue="monthly"
+        <HawaTabs
+          defaultValue={currentCycle}
           options={[
             { label: `Monthly`, value: `monthly` },
             { label: `3 Months`, value: `3-months` },
             { label: `6 Months`, value: `6-months` },
             { label: `Annually`, value: `annually` }
           ]}
+          onChangeTab={(e) => setCurrentCycle(e)}
         />
-
-        <HawaPanelTabs
-          location="inPricing"
-          handleChange={(e) => {
-            setCurrentCurrency(e);
-          }}
-          defaultValue="sar"
+        <HawaTabs
+          defaultValue={currentCurrency}
           options={[
             { label: `USD`, value: `usd` },
             { label: `SAR`, value: `sar` }
           ]}
+          onChangeTab={(e) => setCurrentCurrency(e)}
         />
       </div>
 

package/src/blocks/Pricing/index.js

@@ -1 +1,2 @@
 export * from "./PricingPlans";
+export * from "./ComparingPlans";

package/src/elements/HawaCheckbox.js

@@ -1,21 +1,18 @@
 import React from "react";
 
 export const HawaCheckbox = (props) => {
-  console.log("props : ", props);
   return (
-    <div class="flex items-center mb-4">
+    <div className="flex items-center h-full p-2">
       <input
-        id="default-checkbox"
         type="checkbox"
         value=""
-        class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+        className="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
       />
-      <label
-        for="default-checkbox"
-        class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300"
-      >
-        Default checkbox
-      </label>
+      {props.label && (
+        <label className="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">
+          {props.label}
+        </label>
+      )}
     </div>
 
     // <React.Fragment>

package/src/elements/HawaModal.js

@@ -0,0 +1,73 @@
+import React from "react";
+import "flowbite";
+
+export const HawaModal = (props) => {
+  return (
+    <div
+      id={props.modalID}
+      tabindex="-1"
+      aria-hidden="true"
+      class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 w-full md:inset-0 h-modal md:h-full justify-center items-center"
+    >
+      <div class="relative p-4 w-full max-w-2xl h-full md:h-auto">
+        <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
+          <div class="flex justify-between items-start p-4 rounded-t border-b dark:border-gray-600">
+            <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
+              Terms of Service
+            </h3>
+            <button
+              type="button"
+              class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
+              data-modal-toggle="defaultModal"
+            >
+              <svg
+                aria-hidden="true"
+                class="w-5 h-5"
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  fill-rule="evenodd"
+                  d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                  clip-rule="evenodd"
+                ></path>
+              </svg>
+              <span class="sr-only">Close modal</span>
+            </button>
+          </div>
+          <div class="p-6 space-y-6">
+            <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
+              With less than a month to go before the European Union enacts new
+              consumer privacy laws for its citizens, companies around the world
+              are updating their terms of service agreements to comply.
+            </p>
+            <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
+              The European Union’s General Data Protection Regulation (G.D.P.R.)
+              goes into effect on May 25 and is meant to ensure a common set of
+              data rights in the European Union. It requires organizations to
+              notify users as soon as possible of high-risk data breaches that
+              could personally affect them.
+            </p>
+          </div>
+          <div class="flex items-center p-6 space-x-2 rounded-b border-t border-gray-200 dark:border-gray-600">
+            <button
+              data-modal-toggle="defaultModal"
+              type="button"
+              class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+            >
+              I accept
+            </button>
+            <button
+              data-modal-toggle="defaultModal"
+              type="button"
+              class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600"
+            >
+              Decline
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/elements/HawaPricingCard.js

@@ -22,52 +22,51 @@ export const HawaPricingCard = (props) => {
   let featuresMapping = isArabic ? props.features_ar : props.features;
   let chipSpacing = isArabic ? { left: 10 } : { right: 10 };
   return (
-    <div>
-      <div class="p-4 w-full max-w-sm bg-white rounded-lg border shadow-md sm:p-8 dark:bg-gray-800 dark:border-gray-700">
-        <h5 class="mb-4 text-xl font-medium text-gray-500 dark:text-gray-400">
-          {isArabic ? props.title_ar : props.title}
-        </h5>
-        <div class="flex items-baseline text-gray-900 dark:text-white">
-          <span class="text-3xl font-semibold">
-            {" "}
-            {currencyMapping[props.currency?.toLowerCase()]}
-          </span>
-          <span class="text-5xl font-extrabold tracking-tight">
-            {props.price}
-          </span>
-          <span class="ml-1 text-xl font-normal text-gray-500 dark:text-gray-400">
-            /{" "}
-            {isArabic
-              ? cycleTextsArabic[props.cycleText]
-              : cycleTextsEnglish[props.cycleText]}
-          </span>
-        </div>
-        <ul role="list" class="my-7 space-y-5">
-          {featuresMapping?.map((feature) => {
-            return (
-              <li class="flex space-x-3">
-                <svg
-                  aria-hidden="true"
-                  class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
-                  fill="currentColor"
-                  viewBox="0 0 20 20"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <title>Check icon</title>
-                  <path
-                    fill-rule="evenodd"
-                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
-                    clip-rule="evenodd"
-                  ></path>
-                </svg>
-                <span class="text-base font-normal leading-tight text-gray-500 dark:text-gray-400">
-                  {feature}
-                </span>
-              </li>
-            );
-          })}
+    <div class="mx-1 p-4 w-full max-w-sm bg-white rounded-lg border shadow-md sm:p-8 dark:bg-gray-800 dark:border-gray-700">
+      <h5 class="mb-4 text-xl font-medium text-gray-500 dark:text-gray-400">
+        {isArabic ? props.title_ar : props.title}
+      </h5>
+      <div class="flex items-baseline text-gray-900 dark:text-white">
+        <span class="font-semibold text-sm">
+          {" "}
+          {currencyMapping[props.currency?.toLowerCase()]}
+        </span>
+        <span class="text-5xl font-extrabold tracking-tight">
+          {props.price}
+        </span>
+        <span class="ml-1 text-xl font-normal text-gray-500 dark:text-gray-400">
+          /{" "}
+          {isArabic
+            ? cycleTextsArabic[props.cycleText]
+            : cycleTextsEnglish[props.cycleText]}
+        </span>
+      </div>
+      <ul role="list" class="my-7 space-y-5">
+        {featuresMapping?.map((feature) => {
+          return (
+            <li class="flex space-x-3">
+              <svg
+                aria-hidden="true"
+                class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <title>Check icon</title>
+                <path
+                  fill-rule="evenodd"
+                  d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+                  clip-rule="evenodd"
+                ></path>
+              </svg>
+              <span class="text-base font-normal leading-tight text-gray-500 dark:text-gray-400">
+                {feature}
+              </span>
+            </li>
+          );
+        })}
 
-          {/* <li class="flex space-x-3 line-through decoration-gray-500">
+        {/* <li class="flex space-x-3 line-through decoration-gray-500">
             <svg
               aria-hidden="true"
               class="flex-shrink-0 w-5 h-5 text-gray-400 dark:text-gray-500"
@@ -86,14 +85,13 @@ export const HawaPricingCard = (props) => {
               Sketch Files
             </span>
           </li> */}
-        </ul>
-        <button
-          type="button"
-          class="text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-200 dark:focus:ring-blue-900 font-medium rounded-lg text-sm px-5 py-2.5 inline-flex justify-center w-full text-center"
-        >
-          {props.buttonText}
-        </button>
-      </div>
+      </ul>
+      <button
+        type="button"
+        class="text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-200 dark:focus:ring-blue-900 font-medium rounded-lg text-sm px-5 py-2.5 inline-flex justify-center w-full text-center"
+      >
+        {props.buttonText}
+      </button>
     </div>
 
     // <Container

package/src/elements/HawaRange.js

@@ -3,23 +3,15 @@ import PropTypes from "prop-types";
 
 export const HawaRange = (props) => {
   return (
-    // <Stack spacing={2} direction="row" alignItems="center" style={props.style}>
-    //   {props.startElement}
-    //   <Slider
-    //     size="small"
-    //     aria-label="Volume"
-    //     value={props.value}
-    //     onChange={props.handleChange}
-    //   />
-    //   {props.endElement}
-    // </Stack>
     <div>
-      <label
-        for="default-range"
-        class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
-      >
-        Default range
-      </label>
+      {props.label && (
+        <label
+          for="default-range"
+          class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+        >
+          {props.label}
+        </label>
+      )}
       <div className="flex flex-row justify-center items-center w-fit">
         <div className="mr-2">{props.startElement}</div>{" "}
         <input

package/src/elements/HawaSettingsRow.js

@@ -6,7 +6,7 @@ import { HawaSwitch } from "./HawaSwitch";
 import { HawaColorPicker } from "./HawaColorPicker";
 import { HawaRange } from "./HawaRange";
 import { HawaCheckbox } from "./HawaCheckbox";
-import { HawaRadio } from "./HawaRadio";
+import { HawaTabs } from "./HawaTabs";
 
 export const HawaSettingsRow = (props) => {
   return (
@@ -17,7 +17,7 @@ export const HawaSettingsRow = (props) => {
       {props.settingsType === "boolean" && <HawaSwitch {...props} />}
       {props.settingsType === "range" && <HawaRange {...props} />}
       {props.settingsType === "color" && <HawaColorPicker {...props} />}
-      {props.settingsType === "radio" && <HawaRadio {...props} />}
+      {props.settingsType === "radio" && <HawaTabs {...props} />}
     </div>
   );
 };

package/src/elements/HawaTable.js

@@ -52,13 +52,9 @@ export const HawaTable = (props) => {
                       >
                         {props.actions.map((act) => (
                           <HawaButton
-                            style={{ margin: 2 }}
-                            variant="outlined"
-                            size="small"
                             onClick={() => props.handleActionClick(singleRow)}
-                          >
-                            {act}
-                          </HawaButton>
+                            text={act}
+                          />
                         ))}
                       </td>
                     )}

package/src/elements/HawaTabs.js

@@ -0,0 +1,32 @@
+import React, { useState } from "react";
+
+export const HawaTabs = (props) => {
+  const [selectedOption, setSelectedOption] = useState(props.defaultValue);
+  let activeTabStyle =
+    "inline-block py-2 px-4 text-white bg-blue-600 rounded-lg active";
+  let inactiveTabStyle =
+    "inline-block py-2 px-4 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white";
+
+  return (
+    <div>
+      <ul className="bg-gray-100 w-fit rounded-lg flex flex-wrap text-sm font-medium text-center text-gray-500 dark:text-gray-400">
+        {props.options.map((opt) => (
+          <li className="mr-2">
+            <button
+              aria-current="page"
+              onClick={() => {
+                setSelectedOption(opt.value);
+                props.onChangeTab(opt.value);
+              }}
+              className={
+                selectedOption === opt.value ? activeTabStyle : inactiveTabStyle
+              }
+            >
+              {opt.label}
+            </button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};

package/src/elements/index.js

@@ -23,3 +23,5 @@ export * from "./HawaPhoneInput";
 export * from "./HawaPhoneInput2";
 export * from "./HawaDrawerItem";
 export * from "./HawaTooltip";
+export * from "./HawaTabs";
+export * from "./HawaModal";

package/src/layout/index.js

@@ -1,8 +1,6 @@
 export * from "./Box";
-// export * from "./HawaAppLayout";
 export * from "./HawaDialog";
 export * from "./HawaPageControls";
 export * from "./HawaBottomAppBar";
-export * from "./HawaDrawer";
 export * from "./HawaLayout";
 export * from "./HawaContainer";

package/storybook-static/iframe.html

@@ -361,4 +361,4 @@
           
       
           
-            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="runtime~main.6b765954.iframe.bundle.js"></script><script src="vendors~main.305b437b.iframe.bundle.js"></script><script src="main.e6b8be7f.iframe.bundle.js"></script></body></html>
+            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="runtime~main.6b765954.iframe.bundle.js"></script><script src="vendors~main.7059fde5.iframe.bundle.js"></script><script src="main.dd9f34e9.iframe.bundle.js"></script></body></html>