@saasquatch/mint-components 1.15.0-46 → 1.15.0-48

package/dist/collection/components/sqm-stencilbook/Themes.js

@@ -9,241 +9,259 @@
  *  - Shoelace color generator: https://codepen.io/claviska/full/QWveRgL
  *
  */
-//
+// @ts-nocheck
 export const Default = null;
 export const Netflix = {
-  font: {
-    font: "Netflix Sans, Arial, sans-serif",
-    textColor: "white",
-    secondaryTextColor: "#B3B3B3",
+  main: {
+    brandFont: "Netflix Sans, Arial, sans-serif",
+    brandColor: "#E50914",
   },
   border: {
-    color: "#333333",
-    radius: "4px",
-    thickness: "1px",
+    borderColor: "#333333",
+    borderRadius: 4,
+    borderThickness: 1,
   },
   color: {
-    primaryColor: "#E50914",
-    background: "#101010",
+    textColorShades: {
+      mainText: "white",
+      subduedText: "#B3B3B3",
+    },
+    backgroundColor: "#101010",
     accentColorShades: {
       text: "#E50914",
       icon: "#E50914",
       border: "#E50914",
       background: "#300609",
-      iconAndBadge: "#E50914",
     },
     success: {
       text: "#66BB6A",
-      icon: "#4CAF50",
       border: "#4CAF50",
       background: "#1B5E20",
       iconAndBadge: "#4CAF50",
     },
     warning: {
       text: "#FFCA28",
-      icon: "#FFA726",
       border: "#FFA726",
       background: "#F57C00",
       iconAndBadge: "#FFA726",
     },
     critical: {
       text: "#EF9A9A",
-      icon: "#E50914",
       border: "#E50914",
       background: "#B71C1C",
       iconAndBadge: "#E50914",
     },
     informative: {
       text: "#64B5F6",
-      icon: "#42A5F5",
       border: "#42A5F5",
       background: "#1976D2",
       iconAndBadge: "#42A5F5",
     },
     neutral: {
       text: "white",
-      icon: "#B3B3B3",
+      iconAndBadge: "#B3B3B3",
       border: "#333333",
       background: "#222222",
-      iconAndBadge: "#B3B3B3",
     },
   },
   primaryButton: {
-    buttonColor: "#E50914",
-    buttonTextColor: "#FFFFFF",
-    borderRadius: "4px",
-    buttonBorderColor: "transparent",
-    hoverColor: "#CC0000",
-    hoverTextColor: "#FFFFFF",
+    buttonColor: {
+      background: "#E50914",
+      border: "transparent",
+      label: "#FFFFFF",
+    },
+    buttonHoverColor: {
+      background: "#CC0000",
+      border: "transparent",
+      label: "#FFFFFF",
+    },
+    borderRadius: 4,
   },
   secondaryButton: {
-    buttonColor: "transparent",
-    buttonTextColor: "#FFFFFF",
-    buttonBorderColor: "#B3B3B3",
-    borderRadius: "4px",
-    hoverColor: "#333333",
-    hoverTextColor: "#FFFFFF",
-  },
-  tertiaryButton: {
-    buttonColor: "transparent",
-    buttonTextColor: "#FFFFFF",
-    borderRadius: "4px",
+    buttonColor: {
+      background: "transparent",
+      border: "#B3B3B3",
+      label: "#FFFFFF",
+    },
+    buttonHoverColor: {
+      background: "#333333",
+      border: "#B3B3B3",
+      label: "#FFFFFF",
+    },
+    borderRadius: 4,
   },
-  inputs: {
-    background: "#222222",
-    borderColor: "#B3B3B3",
-    borderRadius: "4px",
-    textColor: "white",
-    labelColor: "#B3B3B3",
-    borderThickness: "1px",
-    disabledBackground: "#333333",
-    disabledTextColor: "#777777",
-    labelFontSize: "14px",
-    focusBorderColor: "#E50914",
-    hoverBorderColor: "#777777",
+  formFields: {
+    formFieldColor: {
+      background: "#222222",
+      border: "#B3B3B3",
+      inputText: "#B3B3B3",
+    },
+    hoverStateColor: "#777777",
+    selectedStateColor: "#E50914",
   },
 };
 export const Amazon = {
-  font: {
-    font: "Amazon Ember, Arial, sans-serif",
-    textColor: "#2f2f2f",
-    secondaryTextColor: "#565959",
+  main: {
+    brandFont: "Amazon Ember, Arial, sans-serif",
+    brandColor: "#FF9900",
   },
   border: {
-    color: "#d5d9d9",
-    radius: "4px",
-    thickness: "1px",
+    borderColor: "#D5D9D9",
+    borderRadius: 4,
+    borderThickness: 1,
   },
   color: {
-    primaryColor: "#FF9900",
-    background: "#ffffff",
+    backgroundColor: "#ffffff",
+    textColorShades: {
+      mainText: "#2f2f2f",
+      subduedText: "#565959",
+    },
     accentColorShades: {
       text: "#FF9900",
       icon: "#FF9900",
       border: "#FFBF66",
       background: "#FFF4DD",
-      iconAndBadge: "#FF9900",
     },
     success: {
       text: "#198754",
-      icon: "#28A745",
       border: "#BCE8B2",
       background: "#D4EDDA",
       iconAndBadge: "#28A745",
     },
     warning: {
       text: "#856404",
-      icon: "#FFC107",
       border: "#FFEBA2",
       background: "#FFF3CD",
       iconAndBadge: "#FFC107",
     },
     critical: {
       text: "#721C24",
-      icon: "#DC3545",
       border: "#F5C6CB",
       background: "#F8D7DA",
       iconAndBadge: "#DC3545",
     },
     informative: {
       text: "#004085",
-      icon: "#007BFF",
       border: "#B8DAFF",
       background: "#CCE5FF",
       iconAndBadge: "#007BFF",
     },
     neutral: {
       text: "#232F3E",
-      icon: "#565959",
+      iconAndBadge: "#565959",
       border: "#D5D9D9",
       background: "#F0F2F2",
-      iconAndBadge: "#565959",
     },
   },
   primaryButton: {
-    buttonColor: "#FF9900",
-    buttonTextColor: "#FFFFFF",
-    borderRadius: "7px",
-    buttonBorderColor: "transparent",
-    hoverColor: "#EB9100",
-    hoverTextColor: "#FFFFFF",
+    buttonColor: {
+      background: "#FF9900",
+      border: "transparent",
+      label: "#FFFFFF",
+    },
+    buttonHoverColor: {
+      background: "#EB9100",
+      border: "transparent",
+      label: "#FFFFFF",
+    },
+    borderRadius: 4,
   },
   secondaryButton: {
-    buttonColor: "#FFFFFF",
-    buttonTextColor: "#232F3E",
-    buttonBorderColor: "#888C8C",
-    borderRadius: "7px",
-    hoverColor: "#F0F2F2",
-    hoverTextColor: "#232F3E",
-  },
-  tertiaryButton: {
-    buttonColor: "transparent",
-    buttonTextColor: "#007185",
-    borderRadius: "7px",
+    buttonColor: {
+      background: "#FFFFFF",
+      border: "#888C8C",
+      label: "#232F3E",
+    },
+    buttonHoverColor: {
+      background: "#F0F2F2",
+      border: "#888C8C",
+      label: "#232F3E",
+    },
+    borderRadius: 4,
   },
-  inputs: {
-    background: "#FFFFFF",
-    borderColor: "#D5D9D9",
-    borderRadius: "3px",
-    textColor: "#2f2f2f",
-    labelColor: "#565959",
-    borderThickness: "1px",
-    disabledBackground: "#EAEDED",
-    disabledTextColor: "#888C8C",
-    labelFontSize: "14px",
-    focusBorderColor: "#007185",
-    hoverBorderColor: "#A2A2A2",
+  formFields: {
+    formFieldColor: {
+      background: "#FFFFFF",
+      border: "#D5D9D9",
+      inputText: "#2f2f2f",
+    },
+    hoverStateColor: "#A2A2A2",
+    selectedStateColor: "#007185",
   },
 };
 export const Spotify = {
-  font: {
-    textColor: "white",
+  main: {
+    brandColor: "#1ed760",
+  },
+  border: {
+    borderColor: "#f4f4f4",
+    borderRadius: 18,
+    borderThickness: 1,
   },
   color: {
-    background: "#121212",
+    textColorShades: {
+      mainText: "white",
+      subduedText: "white",
+    },
+    backgroundColor: "#121212",
     accentColorShades: {
-      iconAndBadge: "#1ed760",
+      icon: "#1ed760",
     },
   },
   primaryButton: {
-    buttonColor: "#1ed760",
-    buttonTextColor: "#121212",
-    borderRadius: "30px",
-    buttonBorderColor: "transparent",
-    hoverColor: "#1DB954",
-    hoverTextColor: "#121212",
+    buttonColor: {
+      background: "#1ed760",
+      border: "transparent",
+      label: "#121212",
+    },
+    buttonHoverColor: {
+      background: "#1DB954",
+      border: "transparent",
+      label: "#121212",
+    },
+    borderRadius: 30,
   },
   secondaryButton: {
-    buttonColor: "#191414",
-    buttonTextColor: "#FFFFFF",
-    buttonBorderColor: "#FFFFFF",
-    borderRadius: "30px",
-    hoverColor: "#282828",
-    hoverTextColor: "#121212",
+    buttonColor: {
+      background: "#191414",
+      border: "#FFFFFF",
+      label: "#FFFFFF",
+    },
+    buttonHoverColor: {
+      background: "#282828",
+      border: "#FFFFFF",
+      label: "#121212",
+    },
+    borderRadius: 30,
   },
-  inputs: {
-    background: "#121212",
-    borderColor: "#7c7c7c",
-    borderThickness: "1px",
-    borderRadius: "30px",
-    textColor: "#fff",
-    focusBorderColor: "white",
-    labelColor: "white",
-    hoverBorderColor: "white",
-    labelFontSize: "18px",
-    disabledTextColor: "white",
-    disabledBackground: "#303030",
+  formFields: {
+    formFieldColor: {
+      background: "#121212",
+      border: "#7c7c7c",
+      inputText: "#fff",
+    },
+    hoverStateColor: "white",
+    selectedStateColor: "white",
   },
 };
 export const Google = {
+  main: { brandColor: "#4285F4", brandFont: "Roboto, Arial, sans-serif" },
+  border: {
+    borderColor: "#DADCE0",
+    borderRadius: 4,
+    borderThickness: 1,
+  },
   color: {
-    primaryColor: "#4285F4",
-    background: "#FFFFFF",
+    textColorShades: {
+      mainText: "#212124",
+      subduedText: "#5F6368",
+    },
+    backgroundColor: "#FFFFFF",
     accentColorShades: {
       text: "#1A73E8",
       border: "#8AB4F8",
       background: "#E8F0FE",
-      iconAndBadge: "#4285F4",
+      icon: "#4285F4",
     },
     success: {
       text: "#044e1d",
@@ -276,48 +294,39 @@ export const Google = {
       iconAndBadge: "#5F6368",
     },
   },
-  border: {
-    color: "#DADCE0",
-    radius: "8px",
-    thickness: "1px",
-  },
-  font: {
-    font: "Roboto, Arial, sans-serif",
-    textColor: "#212124",
-    secondaryTextColor: "#5F6368",
-  },
   primaryButton: {
-    buttonColor: "#4285F4",
-    buttonTextColor: "#FFFFFF",
-    borderRadius: "4px",
-    buttonBorderColor: "transparent",
-    hoverColor: "#3C7CD1",
-    hoverTextColor: "#FFFFFF",
+    buttonColor: {
+      background: "#4285F4",
+      border: "transparent",
+      label: "#FFFFFF",
+    },
+    buttonHoverColor: {
+      background: "#3C7CD1",
+      border: "transparent",
+      label: "#FFFFFF",
+    },
+    borderRadius: 4,
   },
   secondaryButton: {
-    buttonColor: "#FFFFFF",
-    buttonTextColor: "#4285F4",
-    buttonBorderColor: "#DADCE0",
-    borderRadius: "4px",
-    hoverColor: "#E8F0FE",
-    hoverTextColor: "#4285F4",
-  },
-  tertiaryButton: {
-    buttonColor: "transparent",
-    buttonTextColor: "#4285F4",
-    borderRadius: "4px",
+    buttonColor: {
+      background: "#FFFFFF",
+      border: "#DADCE0",
+      label: "#4285F4",
+    },
+    buttonHoverColor: {
+      background: "#E8F0FE",
+      border: "#DADCE0",
+      label: "#4285F4",
+    },
+    borderRadius: 4,
   },
-  inputs: {
-    background: "#FFFFFF",
-    borderColor: "#DADCE0",
-    borderThickness: "1px",
-    borderRadius: "8px",
-    textColor: "#202124",
-    focusBorderColor: "#4285F4",
-    labelColor: "#5F6368",
-    hoverBorderColor: "#9AA0A6",
-    labelFontSize: "12px",
-    disabledTextColor: "#9AA0A6",
-    disabledBackground: "#F1F3F4",
+  formFields: {
+    formFieldColor: {
+      background: "#FFFFFF",
+      border: "#DADCE0",
+      inputText: "#202124",
+    },
+    hoverStateColor: "#9AA0A6",
+    selectedStateColor: "#4285F4",
   },
 };

package/dist/collection/components/sqm-stencilbook/sqm-stencilbook.js

@@ -1,105 +1,105 @@
-import { h, Component, Host, State } from "@stencil/core";
-import { useStencilbook } from "@saasquatch/stencilbook";
 import { useState, withHooks } from "@saasquatch/stencil-hooks";
-import * as ShareButton from "../sqm-share-button/ShareButton.stories";
-import * as EmptyState from "../sqm-empty/EmptyState.stories";
-import * as Pagination from "../sqm-pagination/Pagination.stories";
-import * as ShareLink from "../sqm-share-link/ShareLink.stories";
+import { useStencilbook } from "@saasquatch/stencilbook";
+import { Component, h, Host, State } from "@stencil/core";
+import * as NewPortal from "../../stories/NewPortal.stories";
+import * as PortalTemplates from "../../stories/PortalTemplates.stories";
+import * as PoweredByImg from "../../stories/PoweredByImg.stories";
+import * as Widget from "../../stories/Widget.stories";
+import * as BaseRegistrationForm from "../sqm-base-registration/BaseRegistrationForm.stories";
 import * as BigStat from "../sqm-big-stat/BigStat.stories";
-import * as Leaderboard from "../sqm-leaderboard/Leaderboard.stories";
-import * as Router from "../sqm-router/Router.stories";
-import * as LeaderboardRank from "../sqm-leaderboard-rank/LeaderboardRank.stories";
-import * as PortalFrame from "../sqm-portal-frame/PortalFrame.stories";
-import * as EditProfile from "../sqm-edit-profile/EditProfileForm.stories";
-import * as UseShareLink from "../sqm-share-link/UseShareLink.stories";
-import * as UseShareButton from "../sqm-share-button/UseShareButton.stories";
 import * as UseBigStat from "../sqm-big-stat/UseBigStat.stories";
+import * as BrandStories from "../sqm-brand/SqmBrand.stories";
+import * as CardFeed from "../sqm-card-feed/CardFeed.stories";
+import * as CheckboxField from "../sqm-checkbox-field/CheckboxField.stories";
+import * as UseCheckboxField from "../sqm-checkbox-field/UseCheckboxField.stories";
+import * as CloseButton from "../sqm-close-button/CloseButton.stories";
+import * as CouponCode from "../sqm-coupon-code/CouponCode.stories";
+import * as DividedLayout from "../sqm-divided-layout/DividedLayout.stories";
+import * as DropdownField from "../sqm-dropdown-field/DropdownField.stories";
+import * as UseDropdownField from "../sqm-dropdown-field/UseDropdownField.stories";
+import * as EditProfile from "../sqm-edit-profile/EditProfileForm.stories";
 import * as UseEditProfile from "../sqm-edit-profile/UseEditProfile.stories";
-import * as UseLeaderboard from "../sqm-leaderboard/UseLeaderboard.stories";
+import * as EmptyState from "../sqm-empty/EmptyState.stories";
 import * as FormMessage from "../sqm-form-message/FormMessage.stories";
-import * as UseRewardExchangeList from "../sqm-reward-exchange-list/UseRewardExchangeList.stories";
-import * as UseRewardsTable from "../sqm-rewards-table/UseRewardsTable.stories";
-import * as UseTaskCard from "../sqm-task-card/UseTaskCard.stories";
-import * as NewPortal from "../../stories/NewPortal.stories";
-import * as Widget from "../../stories/Widget.stories";
+import * as HeroImage from "../sqm-hero-image/HeroImage.stories";
+import * as Hero from "../sqm-hero/Hero.stories";
+import * as Image from "../sqm-image/Image.stories";
+import * as InputField from "../sqm-input-field/InputField.stories";
+import * as UseInputField from "../sqm-input-field/UseInputField.stories";
+import * as InvoiceTable from "../sqm-invoice-table/InvoiceTable.stories";
+import * as InvoiceTableCells from "../sqm-invoice-table/InvoiceTableCell.stories";
+import * as UseInvoiceTableCells from "../sqm-invoice-table/UseInvoiceTable.stories";
+import * as LeaderboardRank from "../sqm-leaderboard-rank/LeaderboardRank.stories";
+import * as Leaderboard from "../sqm-leaderboard/Leaderboard.stories";
+import * as UseLeaderboard from "../sqm-leaderboard/UseLeaderboard.stories";
+import * as LinkButton from "../sqm-link-button/LinkButton.stories";
+import * as LogoutCurrentUser from "../sqm-logout-current-user/LogoutCurrentUser.stories";
+import * as MarketingEmailsCheckbox from "../sqm-marketing-emails-checkbox/MarketingEmailsCheckbox.stories";
+import * as NameFields from "../sqm-name-fields/NameFields.stories";
 import * as SidebarItem from "../sqm-navigation-sidebar-item/SidebarItem.stories";
 import * as NavigationSidebar from "../sqm-navigation-sidebar/NavigationSidebar.stories";
+import * as Pagination from "../sqm-pagination/Pagination.stories";
+import * as PasswordField from "../sqm-password-field/PasswordField.stories";
+import * as PayoutButtonScroll from "../sqm-payout-button-scroll/PayoutButtonScroll.stories";
+import * as ChangeMarketing from "../sqm-portal-change-marketing/ChangeMarketing.stories";
+import * as ChangePassword from "../sqm-portal-change-password/ChangePassword.stories";
+import * as PortalContainer from "../sqm-portal-container/PortalContainer.stories";
+import * as PortalEmailVerification from "../sqm-portal-email-verification/PortalEmailVerification.stories";
+import * as PortalFooter from "../sqm-portal-footer/PortalFooter.stories";
+import * as PortalForgotPassword from "../sqm-portal-forgot-password/PortalForgotPassword.stories";
+import * as PortalFrame from "../sqm-portal-frame/PortalFrame.stories";
+import * as PortalGoogleRegistrationFormStories from "../sqm-portal-google-registration-form/PortalGoogleRegistrationForm.stories";
 import * as PortalLogin from "../sqm-portal-login/PortalLogin.stories";
+import * as PortalProfile from "../sqm-portal-profile/PortalProfile.stories";
 import * as PortalRegister from "../sqm-portal-register/PortalRegister.stories";
 import * as NewPortalRegistrationForm from "../sqm-portal-registration-form/PortalRegistrationForm.stories";
-import * as PortalForgotPassword from "../sqm-portal-forgot-password/PortalForgotPassword.stories";
-import * as PortalEmailVerification from "../sqm-portal-email-verification/PortalEmailVerification.stories";
 import * as PortalResetPassword from "../sqm-portal-reset-password/PortalResetPassword.stories";
 import * as PortalVerifyEmail from "../sqm-portal-verify-email/PortalVerifyEmail.stories";
-import * as DividedLayout from "../sqm-divided-layout/DividedLayout.stories";
-import * as ChangePassword from "../sqm-portal-change-password/ChangePassword.stories";
-import * as ChangeMarketing from "../sqm-portal-change-marketing/ChangeMarketing.stories";
-import * as PortalProfile from "../sqm-portal-profile/PortalProfile.stories";
+import * as ProgramExplainerStep from "../sqm-program-explainer-step/ProgramExplainerStep.stories";
+import * as ProgramExplainer from "../sqm-program-explainer/ProgramExplainer.stories";
+import * as ProgramMenu from "../sqm-program-menu/ProgramMenu.stories";
+import * as QRCode from "../sqm-qr-code/QRCode.stories";
+import * as RadioCard from "../sqm-radio-card/RadioCard.stories";
+import * as ReferralCard from "../sqm-referral-card/ReferralCard.stories";
+import * as ReferralCode from "../sqm-referral-code/ReferralCode.stories";
+import * as ReferralCodes from "../sqm-referral-codes/ReferralCodes.stories";
+import * as ReferralIframe from "../sqm-referral-iframe/ReferralIframe.stories";
 import * as ReferralTable from "../sqm-referral-table/ReferralTable.stories";
 import * as ReferralTableCell from "../sqm-referral-table/ReferralTableCell.stories";
 import * as ReferralTableRewardsCell from "../sqm-referral-table/ReferralTableRewardsCell.stories";
-import * as UserName from "../sqm-user-name/UserName.stories";
-import * as PasswordField from "../sqm-password-field/PasswordField.stories";
-import * as TaskCard from "../sqm-task-card/TaskCard.stories";
-import * as PortalTemplates from "../../stories/PortalTemplates.stories";
-import * as ProgramMenu from "../sqm-program-menu/ProgramMenu.stories";
-import * as PoweredByImg from "../../stories/PoweredByImg.stories";
-import * as PortalFooter from "../sqm-portal-footer/PortalFooter.stories";
-import * as Hero from "../sqm-hero/Hero.stories";
-import * as ReferralIframe from "../sqm-referral-iframe/ReferralIframe.stories";
-import * as NameFields from "../sqm-name-fields/NameFields.stories";
-import * as CheckboxField from "../sqm-checkbox-field/CheckboxField.stories";
-import * as MarketingEmailsCheckbox from "../sqm-marketing-emails-checkbox/MarketingEmailsCheckbox.stories";
-import * as UseCheckboxField from "../sqm-checkbox-field/UseCheckboxField.stories";
-import * as DropdownField from "../sqm-dropdown-field/DropdownField.stories";
-import * as UseDropdownField from "../sqm-dropdown-field/UseDropdownField.stories";
-import * as InputField from "../sqm-input-field/InputField.stories";
-import * as UseInputField from "../sqm-input-field/UseInputField.stories";
+import * as UseReferralTable from "../sqm-referral-table/UseReferralTable.stories";
 import * as RewardExchangeList from "../sqm-reward-exchange-list/RewardExchangeList.stories";
-import * as ProgramExplainer from "../sqm-program-explainer/ProgramExplainer.stories";
-import * as ProgramExplainerStep from "../sqm-program-explainer-step/ProgramExplainerStep.stories";
-import * as BrandStories from "../sqm-brand/SqmBrand.stories";
-import * as CardFeed from "../sqm-card-feed/CardFeed.stories";
-import * as PortalContainer from "../sqm-portal-container/PortalContainer.stories";
-import * as RewardsTableCell from "../sqm-rewards-table/RewardsTableCell.stories";
+import * as UseRewardExchangeList from "../sqm-reward-exchange-list/UseRewardExchangeList.stories";
 import * as RewardsTable from "../sqm-rewards-table/RewardsTable.stories";
-import * as UseReferralTable from "../sqm-referral-table/UseReferralTable.stories";
-import * as HeroImage from "../sqm-hero-image/HeroImage.stories";
-import * as ReferralCard from "../sqm-referral-card/ReferralCard.stories";
-import * as Timeline from "../sqm-timeline/Timeline.stories";
-import * as Image from "../sqm-image/Image.stories";
-import * as TitledSection from "../sqm-titled-section/TitledSection.stories";
+import * as RewardsTableCell from "../sqm-rewards-table/RewardsTableCell.stories";
+import * as UseRewardsTable from "../sqm-rewards-table/UseRewardsTable.stories";
+import * as Router from "../sqm-router/Router.stories";
 import * as Scroll from "../sqm-scroll/Scroll.stories";
-import * as Tabs from "../sqm-tabs/Tabs.stories";
+import * as ShareButton from "../sqm-share-button/ShareButton.stories";
+import * as UseShareButton from "../sqm-share-button/UseShareButton.stories";
 import * as ShareCode from "../sqm-share-code/ShareCode.stories";
-import * as ReferralCode from "../sqm-referral-code/ReferralCode.stories";
-import * as EmailRegistration from "../views/EmailRegistration.stories";
-import * as CouponCode from "../sqm-coupon-code/CouponCode.stories";
-import * as LogoutCurrentUser from "../sqm-logout-current-user/LogoutCurrentUser.stories";
-import * as LinkButton from "../sqm-link-button/LinkButton.stories";
-import * as CloseButton from "../sqm-close-button/CloseButton.stories";
-import * as TaxForm from "../tax-and-cash/TaxForm.stories";
-import * as TaxFormSlots from "../tax-and-cash/sqm-user-info-form/small-views/SlotViews.stories";
-import * as RadioCard from "../sqm-radio-card/RadioCard.stories";
+import * as ShareLink from "../sqm-share-link/ShareLink.stories";
+import * as UseShareLink from "../sqm-share-link/UseShareLink.stories";
+import * as Tabs from "../sqm-tabs/Tabs.stories";
+import * as TaskCard from "../sqm-task-card/TaskCard.stories";
+import * as UseTaskCard from "../sqm-task-card/UseTaskCard.stories";
 import * as ProgressBar from "../sqm-task-card/progress-bar/ProgressBar.stories";
-import * as PayoutDetailsCard from "../tax-and-cash/sqm-payout-details-card/PayoutDetailsCard.stories";
-import * as BankingInfoForm from "../tax-and-cash/BankingForm.stories";
-import * as InvoiceTable from "../sqm-invoice-table/InvoiceTable.stories";
-import * as InvoiceTableCells from "../sqm-invoice-table/InvoiceTableCell.stories";
-import * as UseInvoiceTableCells from "../sqm-invoice-table/UseInvoiceTable.stories";
-import * as WidgetEmailVerification from "../sqm-widget-verification/sqm-email-verification/WidgetEmailVerification.stories";
+import * as Text from "../sqm-text/Text.stories";
+import * as Timeline from "../sqm-timeline/Timeline.stories";
+import * as TitledSection from "../sqm-titled-section/TitledSection.stories";
+import * as UserName from "../sqm-user-name/UserName.stories";
 import * as WidgetCodeVerification from "../sqm-widget-verification/sqm-code-verification/WidgetCodeVerification.stories";
-import * as PayoutButtonScroll from "../sqm-payout-button-scroll/PayoutButtonScroll.stories";
+import * as WidgetEmailVerification from "../sqm-widget-verification/sqm-email-verification/WidgetEmailVerification.stories";
+import * as BankingInfoForm from "../tax-and-cash/BankingForm.stories";
+import * as TaxForm from "../tax-and-cash/TaxForm.stories";
+import * as PayoutDetailsCard from "../tax-and-cash/sqm-payout-details-card/PayoutDetailsCard.stories";
 import * as PayoutStatusAlert from "../tax-and-cash/sqm-payout-status-alert/PayoutStatusAlert.stories";
-import * as ReferralCodes from "../sqm-referral-codes/ReferralCodes.stories";
-import * as BaseRegistrationForm from "../sqm-base-registration/BaseRegistrationForm.stories";
-import * as PortalGoogleRegistrationFormStories from "../sqm-portal-google-registration-form/PortalGoogleRegistrationForm.stories";
-import * as QRCode from "../sqm-qr-code/QRCode.stories";
-import * as Text from "../sqm-text/Text.stories";
-import * as Themes from "./Themes";
+import * as TaxFormSlots from "../tax-and-cash/sqm-user-info-form/small-views/SlotViews.stories";
+import * as EmailRegistration from "../views/EmailRegistration.stories";
+import { ShadowViewAddon } from "../../ShadowViewAddon";
 import { CucumberAddon } from "./CucumberAddon";
 import { HookStoryAddon } from "./HookStoryAddon";
-import { ShadowViewAddon } from "../../ShadowViewAddon";
+import * as Themes from "./Themes";
 const stories = [
   InvoiceTable,
   InvoiceTableCells,