@saasquatch/mint-components 1.15.0-40 → 1.15.0-42

package/dist/cjs/sqm-stencilbook.cjs.entry.js

@@ -2,42 +2,40 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a29c60ef.js');
-const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-require('./global-a38a094f.js');
-const index_module = require('./index.module-ee84433d.js');
+const index = require('./index-a43a63b4.js');
+const stencilHooks_module = require('./stencil-hooks.module-62264802.js');
+require('./global-b34bf5f2.js');
+const index_module = require('./index.module-39955732.js');
 require('./cjs-1066ec21.js');
 require('./utils-6847bc06.js');
 const JSS = require('./JSS-8503a151.js');
-require('./useReferralCodes-82e8797b.js');
+require('./useReferralCodes-a47dcbc2.js');
 require('./mixins-4761d472.js');
-const copyTextView = require('./copy-text-view-ee147291.js');
-const GenericTableView = require('./GenericTableView-a9d0b798.js');
-require('./useChildElements-1b35d945.js');
-const luxon = require('./luxon-2926d85f.js');
-require('./sqm-text-span-view-ce4c0178.js');
-const sqmAssetCardView = require('./sqm-asset-card-view-21ddf04f.js');
-const sqmCloseButtonView = require('./sqm-close-button-view-b297e933.js');
+const copyTextView = require('./copy-text-view-af017955.js');
+const GenericTableView = require('./GenericTableView-107ade89.js');
+require('./useChildElements-e5fa605c.js');
+const luxon = require('./luxon-3b809948.js');
+require('./sqm-text-span-view-7a61ae4c.js');
+const sqmCloseButtonView = require('./sqm-close-button-view-5e85ac51.js');
 require('./index-8c6255f5.js');
-const emailRegistrationView = require('./email-registration-view-37b44222.js');
-const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-7c6cebe3.js');
-const sqmLogoutCurrentUserView = require('./sqm-logout-current-user-view-11d57c12.js');
-const sqmNavigationSidebarView = require('./sqm-navigation-sidebar-view-38a5227a.js');
-const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-10b62df1.js');
-const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-26c893d3.js');
-const sqmPortalForgotPasswordView = require('./sqm-portal-forgot-password-view-fdd97c18.js');
-const sqmPortalLoginView = require('./sqm-portal-login-view-0fbbda1b.js');
-const sqmBaseRegistrationFormView = require('./sqm-base-registration-form-view-1c5094d3.js');
-const sqmPortalRegistrationFormView = require('./sqm-portal-registration-form-view-399f4eaf.js');
-const sqmPortalProfileView = require('./sqm-portal-profile-view-674a7543.js');
-require('./utilities-78f5e169.js');
-const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-0439a9e5.js');
-const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-05f72dec.js');
-require('./ErrorView-b2fcf954.js');
-const sqmQrCodeView = require('./sqm-qr-code-view-7ee9fa56.js');
-const ShadowViewAddon = require('./ShadowViewAddon-fcd0c52f.js');
-const sqmPortalContainerView = require('./sqm-portal-container-view-4f15143a.js');
-const sqmInvoiceTableView = require('./sqm-invoice-table-view-19ca10fa.js');
+const emailRegistrationView = require('./email-registration-view-996fb438.js');
+const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-6a1e63de.js');
+const sqmLogoutCurrentUserView = require('./sqm-logout-current-user-view-b61c8bdf.js');
+const sqmNavigationSidebarView = require('./sqm-navigation-sidebar-view-50ee8796.js');
+const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-06eb9721.js');
+const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-4100f28c.js');
+const sqmPortalForgotPasswordView = require('./sqm-portal-forgot-password-view-ba34601e.js');
+const sqmBaseRegistrationFormView = require('./sqm-base-registration-form-view-8847804c.js');
+const sqmPortalRegistrationFormView = require('./sqm-portal-registration-form-view-5a96c2f5.js');
+const sqmPortalProfileView = require('./sqm-portal-profile-view-1fc7fb29.js');
+require('./utilities-be3ce1f8.js');
+const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-25eb2099.js');
+const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-1c4e781f.js');
+require('./ErrorView-5504c2b6.js');
+const sqmQrCodeView = require('./sqm-qr-code-view-b18b42a8.js');
+const ShadowViewAddon = require('./ShadowViewAddon-42af4b57.js');
+const sqmPortalContainerView = require('./sqm-portal-container-view-70eaf785.js');
+const sqmInvoiceTableView = require('./sqm-invoice-table-view-deaf0385.js');
 
 /**
  * lodash (Custom Build) <https://lodash.com/>
@@ -7393,16 +7391,20 @@ const loadingProps = {
     pageLabel: "Sign in to your account",
   },
 };
-const Default$3 = () => (index.h("sqm-portal-login", { demoData: { ...defaultProps$2 } }));
-const IsGoogle = () => (index.h(sqmPortalLoginView.PortalLoginView, Object.assign({}, defaultProps$2, { content: {
+const googleProps = {
+  ...defaultProps$2,
+  content: {
     secondaryButton: (index.h("span", null,
       "Don't have an account?",
       " ",
       index.h("sl-button", { style: { width: "50px" }, size: "large", type: "text" }, "Register"))),
     googleButton: index.h("sl-button", null, "Sign in with Google"),
-  } })));
-const LoginWithError = () => index.h(sqmPortalLoginView.PortalLoginView, Object.assign({}, errorProps));
-const LoginLoading = () => index.h(sqmPortalLoginView.PortalLoginView, Object.assign({}, loadingProps));
+  },
+};
+const Default$3 = () => (index.h("sqm-portal-login", { demoData: { ...defaultProps$2 } }));
+const IsGoogle = () => (index.h("sqm-portal-login", { demoData: { ...googleProps } }));
+const LoginWithError = () => (index.h("sqm-portal-login", { demoData: { ...errorProps } }));
+const LoginLoading = () => (index.h("sqm-portal-login", { demoData: { ...loadingProps } }));
 
 const PortalLogin = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -8045,42 +8047,6 @@ const PortalVerifyEmail = /*#__PURE__*/Object.freeze({
   EmailVerificationSuccess: EmailVerificationSuccess$1
 });
 
-const AssetCard_stories = {
-  title: "Components/Asset Card",
-};
-const Default$9 = () => {
-  const props = {
-    text: { titleText: "Marketing Banner" },
-    imgUrl: "https://res.cloudinary.com/saasquatch/image/upload/v1634255445/squatch-assets/Copy_of_saasquatch-logo-tree-large-horizontal.png",
-    callbacks: {},
-  };
-  return index.h(sqmAssetCardView.AssetCardView, Object.assign({}, props));
-};
-const CardWithLongText = () => {
-  const props = {
-    text: { titleText: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, sunt dolores? Dolore temporibus autem officia blanditiis minus in voluptatem molestiae!" },
-    imgUrl: "https://res.cloudinary.com/saasquatch/image/upload/v1634255445/squatch-assets/Copy_of_saasquatch-logo-tree-large-horizontal.png",
-    callbacks: {},
-  };
-  return index.h(sqmAssetCardView.AssetCardView, Object.assign({}, props));
-};
-const CardWithNoImg = () => {
-  const props = {
-    text: { titleText: "Marketing Banner" },
-    imgUrl: "",
-    callbacks: {},
-  };
-  return index.h(sqmAssetCardView.AssetCardView, Object.assign({}, props));
-};
-
-const AssetCard = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': AssetCard_stories,
-  Default: Default$9,
-  CardWithLongText: CardWithLongText,
-  CardWithNoImg: CardWithNoImg
-});
-
 const DividedLayout_stories = {
   title: "Components/Divided Layout",
 };
@@ -8297,7 +8263,7 @@ const successProps$3 = {
     submit: (e) => console.log("Submit", e),
   },
 };
-const Default$a = () => index.h(ShadowViewAddon.PortalChangePasswordView, Object.assign({}, defaultProps$8));
+const Default$9 = () => index.h(ShadowViewAddon.PortalChangePasswordView, Object.assign({}, defaultProps$8));
 const Open = () => index.h(ShadowViewAddon.PortalChangePasswordView, Object.assign({}, openProps));
 const Error$2 = () => index.h(ShadowViewAddon.PortalChangePasswordView, Object.assign({}, errorProps$7));
 const PaswordError = () => (index.h(ShadowViewAddon.PortalChangePasswordView, Object.assign({}, passwordErrorProps)));
@@ -8307,7 +8273,7 @@ const Success = () => index.h(ShadowViewAddon.PortalChangePasswordView, Object.a
 const ChangePassword = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': ChangePassword_stories,
-  Default: Default$a,
+  Default: Default$9,
   Open: Open,
   Error: Error$2,
   PaswordError: PaswordError,
@@ -8345,7 +8311,7 @@ const defaultProps$9 = {
     setChecked: (value) => console.log(value),
   },
 };
-const Default$b = () => {
+const Default$a = () => {
   return index.h("sqm-portal-change-marketing", null);
 };
 const Loading$2 = () => {
@@ -8371,7 +8337,7 @@ const Success$1 = () => {
 const ChangeMarketing = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': ChangeMarketing_stories,
-  Default: Default$b,
+  Default: Default$a,
   Loading: Loading$2,
   Error: Error$3,
   Success: Success$1
@@ -8596,7 +8562,7 @@ const successProps$4 = {
     onChange: (e) => console.log(e),
   },
 };
-const Default$c = () => index.h(sqmPortalProfileView.PortalProfileView, Object.assign({}, defaultProps$a));
+const Default$b = () => index.h(sqmPortalProfileView.PortalProfileView, Object.assign({}, defaultProps$a));
 const DefaultNoCountry = () => index.h(sqmPortalProfileView.PortalProfileView, Object.assign({}, noCountry));
 const Loading$3 = () => index.h(sqmPortalProfileView.PortalProfileView, Object.assign({}, loadingProps$7));
 const Disabled$1 = () => index.h(sqmPortalProfileView.PortalProfileView, Object.assign({}, disabledProps));
@@ -8606,7 +8572,7 @@ const Success$2 = () => index.h(sqmPortalProfileView.PortalProfileView, Object.a
 const PortalProfile = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': PortalProfile_stories,
-  Default: Default$c,
+  Default: Default$b,
   DefaultNoCountry: DefaultNoCountry,
   Loading: Loading$3,
   Disabled: Disabled$1,
@@ -9842,31 +9808,6 @@ const scenarioTaskCard = "@author:derek\n@owner:kutay\nFeature: Task Card\n\n\t@
 
 const scenarioProgressBar = "@author:kutay\n@owner:kutay\nFeature: The progress bar can be shown as a continuous line with progress and end goal. \n\n\t@motivating\n\t@ui\n\tScenario Outline: The progress bar displays a continuous bar with the goal represented by a present\n\t\tGiven a Task Card component\n\t\tAnd the users progress is <progress>\n\t\tAnd the task goal is \"500\"\n\t\tAnd the task is not repeatable\n\t\tThen I have <progressBar>\n\t\tAnd the <progressBar> shows <progress> with <unit> on the right\n\t\tAnd the circle on the progress bar is brand colour\n\t\tAnd the line behind the circle is brand colour\n\t\tAnd the line infront of the circle is grey\n\t\tAnd the gift icon has <color>\n\t\tAnd the gift icon shows \"500\" with <unit> below\n\t\tExamples:\n\t\t\t| progress | progressBar           | unit | color |\n\t\t\t| 0        | ●――――――――――――――――――🎁 | $    | no    |\n\t\t\t| 100      | ―――●―――――――――――――――🎁 | $    | no    |\n\t\t\t| 500      | ―――――――――――――――――――🎁 | $    | yes   |\n\t\t\t| 650      | ―――――――――――――――――――🎁 | $    | yes   |\n\t\t\t| 1200     | ―――――――――――――――――――🎁 | $    | yes   |\n\n\t@motivating\n\t@ui\n\tScenario Outline: The progress bar can be displayed with steps instead of a continuous line\n\t\tGiven a Task Card component\n\t\tAnd the user progress is <progress>\n\t\tAnd the goal is \"5\"\n\t\tAnd steps are enabled\n\t\tThen I have <progressBar>\n\t\tAnd the <progressBar> has incrementing steps up to \"5\" in increments of 1\n\t\tAnd the steps behind the users progress are brand colour\n\t\tAnd the steps infront of the users progress are grey\n\t\tAnd the gift icon has <color>\n\t\tAnd the gift icon shows \"5\" below\n\t\tExamples:\n\t\t\t| progress | progressBar           | color |\n\t\t\t| 0        | ―――○―――○―――○―――○―――🎁 | no    |\n\t\t\t| 1        | ―――●―――○―――○―――○―――🎁 | no    |\n\t\t\t| 5        | ―――●―――●―――●―――●―――🎁 | yes   |\n\t\t\t| 7        | ―――●―――●―――●―――●―――🎁 | yes   |\n\t\t\t| 12       | ―――●―――●―――●―――●―――🎁 | yes   |\n\n\t@motivating\n\t@ui\n\tScenario Outline: The continuous progress bar will continue to progress for repeatable rewards\n\t\tGiven a Task Card component\n\t\tAnd the user progress is <progress>\n\t\tAnd the goal is \"500\"\n\t\tAnd it is repeatable\n\t\tThen I have <progressBar>\n\t\tAnd the <progressBar> shows <progress> with <unit> to the right\n\t\tAnd the first <icon1> is <color1> with <text1> displayed below\n\t\tAnd the second <icon2> is <color2> with <text2> displayed below\n\t\tAnd the third <icon3> is <color3> with <text3> displayed below\n\t\tAnd the circle on the progress bar is brand colour\n\t\tAnd the line behind the circle is brand colour\n\t\tAnd the line infront of the circle is grey\n\t\tExamples:\n\t\t\t| progress | progressBar          | unit | icon1 | color1   | text1 | icon2 | color2    | text 2 | icon3 | color3    | text 3 |\n\t\t\t| 250      | ――――●――――🎁―――――――🎁 | $    | NA    | NA       | NA    | gift  | greyscale | 500    | gift  | greyscale | 1000   |\n\t\t\t| 500      | ―――――――――🎁―――――――🎁 | $    | NA    | NA       | NA    | gift  | colorful  | 500    | gift  | greyscale | 1000   |\n\t\t\t| 750      | ―――――――――🎁―――●―――🎁 | $    | NA    | NA       | NA    | gift  | colorful  | 500    | gift  | greyscale | 1000   |\n\t\t\t| 1000     | 🎁―――――――🎁―――――――🎁 | $    | gift  | colorful | 500   | gift  | colorful  | 1000   | gift  | greyscale | 1500   |\n\t\t\t| 1250     | 🎁―――――――🎁―――●―――🎁 | $    | gift  | colorful | 500   | gift  | colorful  | 1000   | gift  | greyscale | 1500   |\n\n\t@motivating\n\t@ui\n\tScenario Outline: The stepped progress bar will continue to progress for repeatable rewards\n\t\tGiven a Task Card component\n\t\tAnd the user progress is <progress>\n\t\tAnd the goal is \"5\"\n\t\tAnd steps are enabled\n\t\tAnd it is repeatable\n\t\tThen I have <progressBar>\n\t\tAnd the <progressBar> has incrementing steps up to \"5\" in increments of 1\n\t\tAnd the first <icon1> is <color1>\n\t\tAnd the second <icon2> is <color2>\n\t\tAnd the third <icon3> is <color3>\n\t\tAnd the steps behind the users progress are brand colour\n\t\tAnd the steps infront of the users progress are grey\n\t\tExamples:\n\t\t\t| progress | progressBar              | icon1 | color1   | icon2 | color2    | icon3 | color3    |\n\t\t\t| 0        | ―――○―○―○―○―🎁―○―○―○―○―🎁 | NA    | NA       | gift  | greyscale | gift  | greyscale |\n\t\t\t| 1        | ―――●―○―○―○―🎁―○―○―○―○―🎁 | NA    | NA       | gift  | greyscale | gift  | greyscale |\n\t\t\t| 5        | ―――●―●―●―●―🎁―○―○―○―○―🎁 | NA    | NA       | gift  | colorful  | gift  | greyscale |\n\t\t\t| 7        | ―――●―●―●―●―🎁―●―●―○―○―🎁 | NA    | NA       | gift  | colorful  | gift  | greyscale |\n\t\t\t| 12       | 🎁―●―●―●―●―🎁―●―●―○―○―🎁 | gift  | colorful | gift  | colorful  | gift  | greyscale |";
 
-const ResizerStylesheet = `
-
-:root{
-    --checker-color-1: #ffffff00;
-    --checker-color-2: #ffffff00;
-    --checker-size: 7px;
-    --checker-gradient: linear-gradient(45deg, var(--checker-color-1) 25%, transparent 25%, transparent 75%, var(--checker-color-1) 75%);
-}
-.resizer{
-    resize: horizontal;
-    border: 2px dashed gray;
-	margin: -2px;
-    padding: 12px;
-    height: fit-content;
-    overflow: hidden;
-	width: 100%;
-}
-
-.resizer{
-    background-color: var(--checker-color-2);
-    background-image: var(--checker-gradient), var(--checker-gradient);
-    background-position: 0 0, var(--checker-size) var(--checker-size);
-    background-size: calc(var(--checker-size) * 2) calc(var(--checker-size) * 2);
-}
-`;
 const Resizer = (_, children) => (index.h("div", { class: "resizer" }, children));
 
 const scenario$e = scenarioTaskCard + scenarioProgressBar;
@@ -10585,7 +10526,7 @@ const ProgramMenu = /*#__PURE__*/Object.freeze({
 const PoweredByImg_stories = {
   title: "Powered By",
 };
-const Default$d = () => {
+const Default$c = () => {
   return index.h(ShadowViewAddon.PoweredByImg, null);
 };
 const CustomColor = () => {
@@ -10598,7 +10539,7 @@ const CustomWidthAndHeight = () => {
 const PoweredByImg = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': PoweredByImg_stories,
-  Default: Default$d,
+  Default: Default$c,
   CustomColor: CustomColor,
   CustomWidthAndHeight: CustomWidthAndHeight
 });
@@ -10985,7 +10926,7 @@ const defaultRegisterProps = {
     invalidEmailErrorMessage: "Must be a valid email address",
   },
 };
-const Default$e = createHookStory(() => (index.h(ShadowViewAddon.CheckboxFieldView, Object.assign({}, defaultProps$c))));
+const Default$d = createHookStory(() => (index.h(ShadowViewAddon.CheckboxFieldView, Object.assign({}, defaultProps$c))));
 const DefaultChecked = createHookStory(() => (index.h(ShadowViewAddon.CheckboxFieldView, Object.assign({}, defaultProps$c, { states: {
     ...defaultProps$c.states,
     checked: true,
@@ -11040,7 +10981,7 @@ const TermsAndConditionsLongCustomLabel = createHookStory(() => (index.h(ShadowV
 const CheckboxField = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': CheckboxField_stories,
-  Default: Default$e,
+  Default: Default$d,
   DefaultChecked: DefaultChecked,
   CustomLabel: CustomLabel,
   Error: Error$5,
@@ -11058,14 +10999,14 @@ const MarketingEmailsCheckbox_stories = {
     scenario: scenario$k,
   },
 };
-const Default$f = () => {
+const Default$e = () => {
   return index.h("sqm-marketing-emails-checkbox", null);
 };
 
 const MarketingEmailsCheckbox = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': MarketingEmailsCheckbox_stories,
-  Default: Default$f
+  Default: Default$e
 });
 
 const UseCheckboxField_stories = {
@@ -11160,7 +11101,7 @@ const defaultProps$d = {
     ],
   },
 };
-const Default$g = createHookStory(() => (index.h(ShadowViewAddon.DropdownFieldView, Object.assign({}, defaultProps$d))));
+const Default$f = createHookStory(() => (index.h(ShadowViewAddon.DropdownFieldView, Object.assign({}, defaultProps$d))));
 const CustomLabel$1 = createHookStory(() => (index.h(ShadowViewAddon.DropdownFieldView, Object.assign({}, defaultProps$d, { content: {
     ...defaultProps$d.content,
     dropdownLabel: "Pick your favorite",
@@ -11188,7 +11129,7 @@ const CustomError$1 = createHookStory(() => (index.h(ShadowViewAddon.DropdownFie
 const DropdownField = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': DropdownField_stories,
-  Default: Default$g,
+  Default: Default$f,
   CustomLabel: CustomLabel$1,
   Error: Error$6,
   CustomError: CustomError$1
@@ -11298,7 +11239,7 @@ const defaultRegisterProps$1 = {
     invalidEmailErrorMessage: "Must be a valid email address",
   },
 };
-const Default$h = () => index.h(ShadowViewAddon.InputFieldView, Object.assign({}, defaultProps$e));
+const Default$g = () => index.h(ShadowViewAddon.InputFieldView, Object.assign({}, defaultProps$e));
 const CustomLabel$2 = () => (index.h(ShadowViewAddon.InputFieldView, Object.assign({}, defaultProps$e, { content: { ...defaultProps$e.content, fieldLabel: "My Label" } })));
 const Error$7 = () => (index.h(ShadowViewAddon.InputFieldView, Object.assign({}, defaultProps$e, { states: {
     ...defaultProps$e.states,
@@ -11348,7 +11289,7 @@ const RegistrationFieldCustomLabel = () => (index.h(ShadowViewAddon.PortalRegist
 const InputField = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': InputField_stories,
-  Default: Default$h,
+  Default: Default$g,
   CustomLabel: CustomLabel$2,
   Error: Error$7,
   CustomError: CustomError$2,
@@ -14307,7 +14248,7 @@ const defaultProps$f = {
     fraudErrorMessageTitle: "Looks like you tried referring yourself",
   },
 };
-const Default$i = () => index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, defaultProps$f));
+const Default$h = () => index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, defaultProps$f));
 const HasFirstNameLastName = () => (index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, {
   ...defaultProps$f,
   content: {
@@ -14372,7 +14313,7 @@ const EmptyEmailError = () => (index.h(emailRegistrationView.EmailRegistrationVi
 const EmailRegistration = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': EmailRegistration_stories,
-  Default: Default$i,
+  Default: Default$h,
   HasFirstNameLastName: HasFirstNameLastName,
   WithSlots: WithSlots,
   NoBorder: NoBorder$1,
@@ -14502,14 +14443,14 @@ const defaultProps$h = {
   loading: false,
   emailErrorText: "Error fetching email",
 };
-const Default$j = () => {
+const Default$i = () => {
   return index.h(sqmLogoutCurrentUserView.LogoutCurrentUserView, Object.assign({}, defaultProps$h));
 };
 
 const LogoutCurrentUser = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': LogoutCurrentUser_stories,
-  Default: Default$j
+  Default: Default$i
 });
 
 const scenario$E = "@author:noah\n@owner:noah\n\nFeature: Link Button\n\n\t@ui\n\tScenario: Links can be opened in the same tab\n\t\tWhen a user clicks the button\n\t\tThen a link opens in the same tab\n\t\tAnd if the component is in an iFrame then the link is opened in the parent window not the iFrame\n\n\t@ui\n\tScenario: Links can be opened in a new tab\n\t\tWhen a user clicks the button\n\t\tThen a link opens in a new tab\n\t\tAnd if the component is in an iFrame then the link is still opened in a new tab\n\n\n\t@ui\n\tScenario: Props control the link and button text\n\t\tGiven the \"link\" prop is set to \"https://www.example.com\"\n\t\tAnd the \"buttonText\" prop is set to \"Click me!\"\n\t\tThen a button is shown with the text \"Click me!\"\n\t\tAnd when clicked the button opens https://www.example.com\n\n\t@ui\n\tScenario Outline: The button type can be set\n\t\tGiven the button type is set to <value>\n\t\tThen a <buttonType> is shown\n\t\tExamples:\n\t\t\t| value   | buttonType |\n\t\t\t| <null>  | primary    |\n\t\t\t| default | default    |\n\t\t\t| primary | primary    |\n\t\t\t| success | success    |\n\t\t\t| neutral | neutral    |\n\t\t\t| warning | warning    |\n\t\t\t| danger  | danger     |";
@@ -14525,7 +14466,7 @@ const defaultProps$i = {
   openInNewTab: false,
   buttonText: "Button Text",
 };
-const Default$k = () => {
+const Default$j = () => {
   return index.h("sqm-link-button", Object.assign({}, defaultProps$i));
 };
 const OpenInNewTab = () => {
@@ -14535,7 +14476,7 @@ const OpenInNewTab = () => {
 const LinkButton = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': LinkButton_stories,
-  Default: Default$k,
+  Default: Default$j,
   OpenInNewTab: OpenInNewTab
 });
 
@@ -14553,7 +14494,7 @@ const containerStyles = {
   border: "1px solid black",
   padding: "25px",
 };
-const Default$l = () => {
+const Default$k = () => {
   return index.h(sqmCloseButtonView.CloseButtonView, Object.assign({}, defaultProps$j));
 };
 const InAContainer = () => {
@@ -14568,7 +14509,7 @@ const CustomColor$2 = () => {
 const CloseButton = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': CloseButton_stories,
-  Default: Default$l,
+  Default: Default$k,
   InAContainer: InAContainer,
   CustomColor: CustomColor$2
 });
@@ -15480,7 +15421,7 @@ const defaultProps$m = {
   initialLoading: false,
   sendCodeError: false,
 };
-const Default$m = () => (index.h("sqm-email-verification", { demoData: {} }));
+const Default$l = () => (index.h("sqm-email-verification", { demoData: {} }));
 const EmailIsPrefilled = () => (index.h("div", null,
   index.h("sqm-text", null,
     index.h("h4", null, "Verify your email")),
@@ -15531,7 +15472,7 @@ const SendCodeError = () => (index.h("sqm-email-verification", { demoData: {
 const WidgetEmailVerification = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': WidgetEmailVerification_stories,
-  Default: Default$m,
+  Default: Default$l,
   EmailIsPrefilled: EmailIsPrefilled,
   Loading: Loading$8,
   SaveLoading: SaveLoading,
@@ -15550,7 +15491,7 @@ const defaultProps$n = {
   verifyFailed: false,
   emailResent: false,
 };
-const Default$n = () => (index.h("sqm-code-verification", { demoData: { states: defaultProps$n } }));
+const Default$m = () => (index.h("sqm-code-verification", { demoData: { states: defaultProps$n } }));
 const InitialLoading = () => (index.h("sqm-code-verification", { demoData: {
     states: {
       ...defaultProps$n,
@@ -15579,7 +15520,7 @@ const VerificationFailed = () => (index.h("sqm-code-verification", { demoData: {
 const WidgetCodeVerification = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': WidgetCodeVerification_stories,
-  Default: Default$n,
+  Default: Default$m,
   InitialLoading: InitialLoading,
   Loading: Loading$9,
   CodeResent: CodeResent,
@@ -15750,7 +15691,7 @@ const errorProps$a = {
     error: "Something went wrong. Please try again.",
   },
 };
-const Default$o = () => {
+const Default$n = () => {
   return index.h(sqmBaseRegistrationFormView.BaseRegistrationFormView, Object.assign({}, defaultProps$q));
 };
 const EmailError = () => {
@@ -15760,7 +15701,7 @@ const EmailError = () => {
 const BaseRegistrationForm = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': BaseRegistrationForm_stories,
-  Default: Default$o,
+  Default: Default$n,
   EmailError: EmailError
 });
 
@@ -15843,7 +15784,7 @@ const loadingProps$8 = {
     },
   },
 };
-const Default$p = () => (index.h(sqmPortalRegistrationFormView.PortalRegistrationFormView, Object.assign({}, defaultProps$r)));
+const Default$o = () => (index.h(sqmPortalRegistrationFormView.PortalRegistrationFormView, Object.assign({}, defaultProps$r)));
 const RegisterWithError$2 = () => (index.h(sqmPortalRegistrationFormView.PortalRegistrationFormView, Object.assign({}, errorProps$b)));
 const RegisterLoading$2 = () => (index.h(sqmPortalRegistrationFormView.PortalRegistrationFormView, Object.assign({}, loadingProps$8)));
 const TermsAndConditions$4 = () => (index.h(sqmPortalRegistrationFormView.PortalRegistrationFormView, Object.assign({}, defaultProps$r, { content: {
@@ -15857,7 +15798,7 @@ const TermsAndConditions$4 = () => (index.h(sqmPortalRegistrationFormView.Portal
 const PortalGoogleRegistrationFormStories = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': PortalGoogleRegistrationForm_stories,
-  Default: Default$p,
+  Default: Default$o,
   RegisterWithError: RegisterWithError$2,
   RegisterLoading: RegisterLoading$2,
   TermsAndConditions: TermsAndConditions$4
@@ -15884,7 +15825,7 @@ const defaultProps$s = {
   errorHeaderText: "There was an error loading your QR code",
   errorDescriptionText: "Please refresh this page and try again",
 };
-const Default$q = () => {
+const Default$p = () => {
   return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$s));
 };
 const HideTitle = () => {
@@ -15912,7 +15853,7 @@ const DownloadError = () => {
 const QRCode = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': QRCode_stories,
-  Default: Default$q,
+  Default: Default$p,
   HideTitle: HideTitle,
   LeftAlign: LeftAlign$1,
   CenterAlign: CenterAlign,
@@ -15941,60 +15882,6 @@ const Text = /*#__PURE__*/Object.freeze({
   CustomFontSize: CustomFontSize
 });
 
-/**
- *
- * Themes
- *
- * Export only valid CSS. Those will be injected into style tags.
- *
- * Useful links:
- *  - https://brandcolors.net/
- *  - Shoelace color generator: https://codepen.io/claviska/full/QWveRgL
- *
- */
-//
-const Default$r = `
- // No CSS
-`;
-const Orangey = `
-:root{
-    ${ShadowViewAddon.autoColorScaleCss("orange")}
-}
-`;
-const Netflix = `
-:root{
-    ${ShadowViewAddon.autoColorScaleCss("#e50914")}
-}
-`;
-const SaaSquatchCorporate = `
-:root{
-    ${ShadowViewAddon.autoColorScaleCss("#65bd60")}
-    --sl-font-sans: Arial;
-}
-`;
-const NYTimes = `
-:root{
-    ${ShadowViewAddon.autoColorScaleCss("black")}
-    --sl-font-sans: Georgia, 'Times New Roman', serif;
-}
-`;
-const Klip = `
-:root{
-    ${ShadowViewAddon.autoColorScaleCss("#4225C4")};
-}
-
-`;
-
-const Themes = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  Default: Default$r,
-  Orangey: Orangey,
-  Netflix: Netflix,
-  SaaSquatchCorporate: SaaSquatchCorporate,
-  NYTimes: NYTimes,
-  Klip: Klip
-});
-
 function deepFreeze(obj) {
     if (obj instanceof Map) {
         obj.clear = obj.delete = obj.set = function () {
@@ -18613,7 +18500,6 @@ const stories = [
   PortalEmailVerification,
   PortalResetPassword,
   PortalVerifyEmail,
-  AssetCard,
   DividedLayout,
   ChangePassword,
   PortalProfile,
@@ -18695,26 +18581,8 @@ const StencilStorybook = class {
     });
     const [selectedTheme, setSelected] = stencilHooks_module.useState("Default");
     const [checkerboard, setCheckerboard] = stencilHooks_module.useState(true);
-    const themes = Object.keys(Themes);
-    const theme = Themes[selectedTheme];
-    return (index.h(index.Host, { class: Style, onClick: {} }, index.h("div", { style: {
-        position: "absolute",
-        top: "0",
-        right: "0",
-        zIndex: "999999",
-      } }, "Branding:", index.h("select", { onChange: (e) => setSelected(e.target.value) }, themes.map((t) => (index.h("option", { selected: t === selectedTheme }, t)))), index.h("div", null, index.h("div", null)), index.h(ColorScale, null), index.h("br", null), index.h("input", { type: "checkbox", id: "checkerboard", onClick: () => setCheckerboard(!checkerboard), onChange: () => document.documentElement.style.setProperty("--checker-color-1", checkerboard ? "#ebebeb" : "#ffffff00") }), index.h("label", { htmlFor: "checkerboard" }, "Checkerboard?")), index.h("style", null, theme), index.h("style", null, ResizerStylesheet), children));
+    return (index.h(index.Host, { class: Style, onClick: {} }, index.h("sqm-brand-selector", null), children));
   }
 };
-function ColorScale() {
-  return (index.h("span", null, index.h(ColorToken, null), index.h(ColorToken, { type: "success" }), index.h(ColorToken, { type: "warning" }), index.h(ColorToken, { type: "danger" }), index.h(ColorToken, { type: "neutral" })));
-}
-function ColorToken({ type = "primary" }) {
-  return (index.h("span", { style: {
-      background: `var(--sl-color-${type}-500)`,
-      width: "1em",
-      marginRight: "2px",
-      padding: "0 4px",
-    }, title: type }, type.charAt(0)));
-}
 
 exports.sqm_stencilbook = StencilStorybook;

package/dist/cjs/sqm-tab.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a29c60ef.js');
-const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-require('./index.module-ee84433d.js');
-const reRender = require('./re-render-b324deab.js');
+const index = require('./index-a43a63b4.js');
+const stencilHooks_module = require('./stencil-hooks.module-62264802.js');
+require('./index.module-39955732.js');
+const reRender = require('./re-render-28fed959.js');
 
 const TabView = ({}, children) => {
   return index.h(index.Host, null, children);

package/dist/cjs/sqm-tabs.cjs.entry.js

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a29c60ef.js');
-const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-const index_module = require('./index.module-ee84433d.js');
+const index = require('./index-a43a63b4.js');
+const stencilHooks_module = require('./stencil-hooks.module-62264802.js');
+const index_module = require('./index.module-39955732.js');
 const utils = require('./utils-6847bc06.js');
-const reRender = require('./re-render-b324deab.js');
-const useChildElements = require('./useChildElements-1b35d945.js');
+const reRender = require('./re-render-28fed959.js');
+const useChildElements = require('./useChildElements-e5fa605c.js');
 
 const TabsView = ({ content, placement, textColor = "var(--sqm-text)", }) => {
   // Vertical padding for top & bottom placement, horizontal for left & right.

package/dist/cjs/{sqm-text-span-view-ce4c0178.js → sqm-text-span-view-7a61ae4c.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-a29c60ef.js');
+const index = require('./index-a43a63b4.js');
 const JSS = require('./JSS-8503a151.js');
 
 function TextSpanView(props, children) {

package/dist/cjs/sqm-text-span.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a29c60ef.js');
-const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
+const index = require('./index-a43a63b4.js');
+const stencilHooks_module = require('./stencil-hooks.module-62264802.js');
 require('./JSS-8503a151.js');
-const sqmTextSpanView = require('./sqm-text-span-view-ce4c0178.js');
+const sqmTextSpanView = require('./sqm-text-span-view-7a61ae4c.js');
 
 const TextSpan = class {
   constructor(hostRef) {

package/dist/cjs/sqm-widget-verification-controller.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a29c60ef.js');
-const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-const index_module = require('./index.module-ee84433d.js');
+const index = require('./index-a43a63b4.js');
+const stencilHooks_module = require('./stencil-hooks.module-62264802.js');
+const index_module = require('./index.module-39955732.js');
 const keys = require('./keys-cff24974.js');
 
 const debug = stencilHooks_module.browser("sq:widget-verification");

package/dist/cjs/sqm-widget-verification.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a29c60ef.js');
-const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-const index_module = require('./index.module-ee84433d.js');
+const index = require('./index-a43a63b4.js');
+const stencilHooks_module = require('./stencil-hooks.module-62264802.js');
+const index_module = require('./index.module-39955732.js');
 const utils = require('./utils-6847bc06.js');
 const extractProps = require('./extractProps-fd93ba62.js');
 const keys = require('./keys-cff24974.js');