@saasquatch/mint-components 1.13.3-9 → 1.13.4

package/dist/cjs/{ShadowViewAddon-3ddee92b.js → ShadowViewAddon-14a02da4.js}

@@ -7,9 +7,8 @@ const index_module = require('./index.module-ee84433d.js');
 const cjs = require('./cjs-1066ec21.js');
 const utils = require('./utils-6847bc06.js');
 const JSS = require('./JSS-8503a151.js');
-const useReferralCodes = require('./useReferralCodes-82e8797b.js');
+const copyTextView = require('./copy-text-view-a5524c20.js');
 const mixins = require('./mixins-f7e0377a.js');
-const copyTextView = require('./copy-text-view-c85acaaa.js');
 const useChildElements = require('./useChildElements-1b35d945.js');
 const luxon = require('./luxon-2926d85f.js');
 const sqmTextSpanView = require('./sqm-text-span-view-0aa82125.js');
@@ -379,10 +378,10 @@ function useShareLink(props) {
   const { programId = index_module.H() } = props;
   const user = index_module.J();
   const engagementMedium = index_module.B();
-  const contextData = index_module.Fn(useReferralCodes.REFERRAL_CODES_NAMESPACE);
+  const contextData = index_module.Fn(copyTextView.REFERRAL_CODES_NAMESPACE);
   const { data } = index_module.wn(MessageLinkQuery, { programId, engagementMedium }, !(user === null || user === void 0 ? void 0 : user.jwt) || !!props.linkOverride || (contextData === null || contextData === void 0 ? void 0 : contextData.shareLink) !== undefined);
   const [sendLoadEvent] = index_module.$e(WIDGET_ENGAGEMENT_EVENT);
-  const [setCopied, copiedRes] = index_module.$e(useReferralCodes.SET_CODE_COPIED);
+  const [setCopied, copiedRes] = index_module.$e(copyTextView.SET_CODE_COPIED);
   const copyString = (_b = ((contextData === null || contextData === void 0 ? void 0 : contextData.shareLink) || ((_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.shareLink))) !== null && _b !== void 0 ? _b : 
   // Shown during loading
   "...";
@@ -475,11 +474,11 @@ function useShareButton(props) {
     programId: programId,
     shareMedium: medium.toUpperCase(),
   };
-  const contextData = index_module.Fn(useReferralCodes.REFERRAL_CODES_NAMESPACE);
+  const contextData = index_module.Fn(copyTextView.REFERRAL_CODES_NAMESPACE);
   const overrideData = contextData === null || contextData === void 0 ? void 0 : contextData[medium];
   // only queries if a programId is available
   const res = index_module.wn(MessageLinkQuery$1, variables, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId || overrideData !== undefined);
-  const [setCopied, copiedRes] = index_module.$e(useReferralCodes.SET_CODE_COPIED);
+  const [setCopied, copiedRes] = index_module.$e(copyTextView.SET_CODE_COPIED);
   const directLink = (overrideData === null || overrideData === void 0 ? void 0 : overrideData.shareLink) || ((_b = (_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.shareLink);
   const environment = index_module.getEnvironmentSDK();
   const hide = (medium.toLocaleUpperCase() === "SMS" &&
@@ -1663,6 +1662,109 @@ function PortalRegisterView(props) {
 }
 
 const style$4 = {
+  ErrorStyle: {
+    "&::part(control)": {
+      background: "var(--sl-color-danger-10)",
+      borderColor: "var(--sl-color-danger-500)",
+      outline: "var(--sl-color-danger-500)",
+    },
+    "&:host": {
+      "--focus-ring": "0 0 0 var(--sl-focus-ring-width) red !important",
+    },
+  },
+  ErrorMessageStyle: {
+    margin: 0,
+    marginTop: "5px",
+    color: "var(--sl-color-danger-500)",
+    fontSize: "var(--sl-input-help-text-font-size-medium)",
+    fontFamily: "var(--sl-font-sans)",
+    fontWeight: "var(--sl-font-weight-normal)",
+  },
+  FieldContainer: {
+    "margin-bottom": "var(--sl-spacing-large)",
+  },
+};
+const vanillaStyle$2 = `
+:host {
+  margin: 0 auto;
+  width: 100%;
+  display: block;
+}
+sl-checkbox::part(label){
+  font-size: var(--sl-input-label-font-size-small);
+  font-weight: var(--sl-font-weight-normal);
+  line-height: 20px;
+}
+sl-checkbox::part(base){
+  align-items: start;
+}
+`;
+JSS.jss.setup(JSS.create());
+const sheet$4 = JSS.jss.createStyleSheet(style$4);
+const styleString$4 = sheet$4.toString();
+function CheckboxFieldView(props) {
+  var _b, _c;
+  const { states, content, callbacks } = props;
+  return (index.h("div", { class: sheet$4.classes.FieldContainer, part: "sqm-base" },
+    index.h("style", { type: "text/css" },
+      vanillaStyle$2,
+      styleString$4),
+    index.h("sl-checkbox", Object.assign({ exportparts: "label: input-label, base: input-base", name: `/${content.checkboxName}`, checked: states.checked, "onSl-change": (e) => {
+        e.target.value = e.target.checked;
+        callbacks.setChecked(e.target.value);
+      } }, (!content.checkboxOptional ? { required: false } : []), { disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled), required: false }), global.intl.formatMessage({
+      id: content.checkboxName + "-message",
+      defaultMessage: content.checkboxLabel,
+    }, {
+      labelLink: (index.h("a", { href: content.checkboxLabelLink, target: "_blank" }, content.checkboxLabelLinkText || content.checkboxLabelLink)),
+    }))));
+}
+
+function ChangeMarktingView(props) {
+  const { states, callbacks } = props;
+  const { text, formState } = states;
+  const { error } = formState;
+  const style = {
+    Container: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "var(--sl-spacing-x-small)",
+      padding: "0 var(--sl-spacing-xxx-large) var(--sl-spacing-xxx-large)",
+    },
+    SubmitButton: { marginBottom: "var(--sl-spacing-medium)" },
+    Error: {
+      "&::part(erroralert-base)": {
+        "margin-bottom": "15px",
+      },
+    },
+    Success: {
+      "&::part(successalert-base)": {
+        "margin-bottom": "15px",
+      },
+    },
+  };
+  const sheet = JSS.createStyleSheet(style);
+  const styleString = sheet.toString();
+  return (index.h("div", { class: sheet.classes.Container, part: "sqm-base" },
+    index.h("style", { type: "text/css" }, styleString),
+    index.h(sqmTextSpanView.TextSpanView, Object.assign({}, { type: "h2" }), text.emailPreferencesHeader),
+    index.h("sl-form", { "onSl-submit": callbacks.onSubmit },
+      index.h(CheckboxFieldView, { states: {
+          checked: states.formState.marketingEmailOptIn,
+        }, content: {
+          checkboxLabel: text.marketingCheckboxLabel,
+          checkboxName: "marketingEmailOptIn",
+        }, callbacks: {
+          setChecked: callbacks.setChecked,
+        } }),
+      index.h("sl-button", { class: sheet.classes.SubmitButton, type: "primary", submit: true, loading: states.loading, disabled: states.submitDisabled }, text.submitChangeButtonText),
+      error && (index.h("sqm-form-message", { class: sheet.classes.Error, type: "error", exportparts: "erroralert-icon" },
+        index.h("div", { part: "erroralert-text" }, error))),
+      states.success && (index.h("sqm-form-message", { class: sheet.classes.Success, type: "success", exportparts: "successalert-icon" },
+        index.h("div", { part: "successalert-text" }, states.text.successMessage))))));
+}
+
+const style$5 = {
   Description: {
     "& input[type=checkbox]": {
       display: "none",
@@ -1701,13 +1803,13 @@ const style$4 = {
     },
   },
 };
-const sheet$4 = JSS.createStyleSheet(style$4);
-const styleString$4 = sheet$4.toString();
+const sheet$5 = JSS.createStyleSheet(style$5);
+const styleString$5 = sheet$5.toString();
 function Details(props) {
   const rid = Math.random().toString(36).slice(2);
   return (index.h("div", { style: { opacity: props.opacity } },
-    index.h("style", { type: "text/css" }, styleString$4),
-    index.h("span", { class: sheet$4.classes.Description },
+    index.h("style", { type: "text/css" }, styleString$5),
+    index.h("span", { class: sheet$5.classes.Description },
       index.h("input", { type: "checkbox", id: "details-" + rid }),
       index.h("label", { class: "details", htmlFor: "details-" + rid },
         index.h("sl-icon", { exportparts: "base: chevron-icon", name: "chevron-down" })),
@@ -1729,7 +1831,7 @@ const GreyGift = () => {
     index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M14 2.70949C14 3.59565 12.6694 4.93746 12 5H9V16H7.00179V5H4.58792C3.21247 4.70182 2 3.64537 2 2.52072C2 1.42474 2.47603 0.556701 3.34184 0.182041C4.16921 -0.175986 5.12452 0.0203328 5.87976 0.544666C6.80676 1.18825 7.32679 2.3963 7.79856 3.49226C7.83996 3.58845 7.88099 3.68378 7.9219 3.77778C7.96173 3.68865 8.00186 3.59793 8.0425 3.50608C8.50995 2.44948 9.04359 1.24325 9.9404 0.59563C10.7332 0.0231438 11.741 -0.193157 12.6121 0.198945C13.5129 0.604397 14 1.53453 14 2.70949ZM10.6123 1.5C11.0928 1.15305 11.668 1.09012 12.1597 1.5C12.5879 1.85694 12.6108 2.02497 12.6658 2.42926L12.6755 2.5C12.6755 3.09851 12.1597 4 11.6439 4C11.2785 4 10.9914 3.99691 10.7224 3.99402C10.2319 3.98875 9.80131 3.98412 9.06496 4C9.20533 3.72786 9.31743 3.46669 9.42434 3.21761C9.71026 2.55143 9.95907 1.97176 10.6123 1.5ZM4.93861 1.5C4.70607 1.33855 4.17281 1.4106 3.95166 1.5063C3.76894 1.58537 3.49602 1.82658 3.49602 2.52072C3.49602 3.19524 4.58792 3.77778 4.58792 3.77778C4.58792 3.77778 5.45441 4 7.00179 4C6.47506 2.69451 5.7289 2.04867 4.93861 1.5Z", fill: "#828282" })));
 };
 
-const style$5 = {
+const style$6 = {
   ProgressBar: {
     "& .progress-bar": {
       height: "0",
@@ -1841,14 +1943,14 @@ const style$5 = {
     },
   },
 };
-const sheet$5 = JSS.createStyleSheet(style$5, { classNamePrefix: "sqm-prog-bar" });
-const styleString$5 = sheet$5.toString();
+const sheet$6 = JSS.createStyleSheet(style$6, { classNamePrefix: "sqm-prog-bar" });
+const styleString$6 = sheet$6.toString();
 function ProgressBarView(props) {
   const { progress = 0, goal = 1, steps = false, progressBarUnit = "", repeatable = false, complete = false, expired = false, finite = 0, opacity = "1", } = props;
   let aggregate = buildProgressBar(repeatable, steps, props);
   const { columns, items } = aggregate;
-  return (index.h("div", { class: sheet$5.classes.ProgressBar, "data-expired": expired, "data-complete": complete, "data-steps": steps, "data-done": goal <= progress, style: { opacity: opacity } },
-    index.h("style", { type: "text/css" }, styleString$5),
+  return (index.h("div", { class: sheet$6.classes.ProgressBar, "data-expired": expired, "data-complete": complete, "data-steps": steps, "data-done": goal <= progress, style: { opacity: opacity } },
+    index.h("style", { type: "text/css" }, styleString$6),
     index.h("div", { class: (!Boolean(finite) && progress >= 2 * goal) ||
         (Boolean(finite) && progress > 2 * goal)
         ? "progress-bar repeatable-steps"
@@ -2139,7 +2241,7 @@ const arrow_left_right = () => {
     index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M10.265 2.789a.346.346 0 000-.489L8.066.101a.346.346 0 10-.489.489l1.61 1.609H2.073a.691.691 0 00-.69.691v1.728a.346.346 0 00.69 0V2.89h7.114L7.577 4.5a.346.346 0 10.49.488l2.198-2.2zM.101 9.21a.346.346 0 000 .489l2.2 2.199a.346.346 0 00.488-.489l-1.61-1.609h7.114c.382 0 .691-.31.691-.691V7.382a.346.346 0 00-.691 0V9.11H1.18L2.789 7.5a.346.346 0 10-.489-.488l-2.199 2.2z", fill: "currentColor" })));
 };
 
-const style$6 = {
+const style$7 = {
   TaskCard: {
     display: "inline-block",
     width: "100%",
@@ -2293,8 +2395,8 @@ const style$6 = {
     },
   },
 };
-const sheet$6 = JSS.createStyleSheet(style$6);
-const styleString$6 = sheet$6.toString();
+const sheet$7 = JSS.createStyleSheet(style$7);
+const styleString$7 = sheet$7.toString();
 function TaskCardView(props) {
   var _a, _b;
   const { callbacks, states, content } = props;
@@ -2330,11 +2432,11 @@ function TaskCardView(props) {
 	}
 
   `;
-  return (index.h("div", { class: sheet$6.classes.TaskCard, part: "sqm-base" },
+  return (index.h("div", { class: sheet$7.classes.TaskCard, part: "sqm-base" },
     index.h("style", { type: "text/css" },
-      styleString$6,
+      styleString$7,
       vanillaStyle),
-    !states.loading && taskNotStarted && (index.h("div", { class: sheet$6.classes.NotStarted },
+    !states.loading && taskNotStarted && (index.h("div", { class: sheet$7.classes.NotStarted },
       index.h("span", { class: "icon" },
         index.h("sl-icon", { name: "info-circle-fill" })),
       global.intl.formatMessage({
@@ -2345,7 +2447,7 @@ function TaskCardView(props) {
           .setLocale(utils.luxonLocale(states.locale))
           .toLocaleString(luxon.luxon.DateTime.DATETIME_MED),
       }))),
-    !states.loading && taskEnded && (index.h("div", { class: sheet$6.classes.Ended },
+    !states.loading && taskEnded && (index.h("div", { class: sheet$7.classes.Ended },
       index.h("span", { class: "icon" },
         index.h("sl-icon", { exportparts: "base: task-card-icon", name: "exclamation-triangle-fill" })),
       global.intl.formatMessage({
@@ -2365,7 +2467,7 @@ function TaskCardView(props) {
           ? "main complete"
           : "main" },
       index.h("div", { class: "container", part: "sqm-card-container", "data-subdue": taskComplete || taskUnavailable },
-        index.h("div", { class: sheet$6.classes.Header, style: { opacity: taskComplete || taskUnavailable ? "0.45" : "1" } }, states.loading ? (index.h("sl-skeleton", { style: { width: "22%", margin: "0" } })) : (index.h("div", null,
+        index.h("div", { class: sheet$7.classes.Header, style: { opacity: taskComplete || taskUnavailable ? "0.45" : "1" } }, states.loading ? (index.h("sl-skeleton", { style: { width: "22%", margin: "0" } })) : (index.h("div", null,
           showComplete && (index.h("span", { class: taskUnavailable ? "icon neutral" : "icon" }, taskComplete ? checkmark_filled$1 : checkmark_circle$1)),
           index.h("span", { part: "sqm-value", class: "value" }, content.rewardAmount),
           index.h("span", { part: "sqm-unit", class: "text" }, content.rewardUnit)))),
@@ -2381,7 +2483,7 @@ function TaskCardView(props) {
           } }, content.cardTitle)),
         states.loading ? (index.h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.description && (index.h(Details, Object.assign({}, props, { opacity: taskComplete || taskUnavailable ? "0.45" : "1" })))),
         content.showProgressBar && states.loading ? (index.h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.showProgressBar && (index.h(ProgressBarView, Object.assign({}, props.content, props.states, { opacity: taskComplete || taskUnavailable ? "0.45" : "1", complete: taskComplete, expired: taskUnavailable })))),
-        index.h("div", { class: sheet$6.classes.Footer, "data-subdue": taskComplete || taskUnavailable }, states.loading ? (index.h("sl-skeleton", { style: { width: "25%", marginLeft: "auto" } })) : (index.h("div", { style: { display: "contents" } },
+        index.h("div", { class: sheet$7.classes.Footer, "data-subdue": taskComplete || taskUnavailable }, states.loading ? (index.h("sl-skeleton", { style: { width: "25%", marginLeft: "auto" } })) : (index.h("div", { style: { display: "contents" } },
           index.h("span", { class: "text" },
             content.repeatable && (index.h("div", null,
               index.h("span", { class: repetitions > 0
@@ -2452,7 +2554,7 @@ function PoweredByImg({ color = "#A6A6A6", width = 120, height = 16, }) {
     index.h("path", { d: "M1661.53 157.54H1589.77C1590.42 169.37 1593.54 178.535 1599.13 185.035C1604.85 191.535 1612.65 194.785 1622.53 194.785C1628.51 194.785 1633.97 193.485 1638.91 190.885C1643.98 188.285 1647.95 184.645 1650.81 179.965L1657.24 186.4C1653.34 192.12 1648.4 196.475 1642.42 199.465C1636.57 202.455 1629.94 203.95 1622.53 203.95C1609.01 203.95 1598.35 199.465 1590.55 190.495C1582.88 181.525 1579.05 169.175 1579.05 153.445C1579.05 137.585 1582.82 125.17 1590.36 116.2C1597.9 107.1 1608.23 102.55 1621.36 102.55C1633.84 102.55 1643.66 106.84 1650.81 115.42C1657.96 124 1661.53 135.895 1661.53 151.105V157.54ZM1651.39 147.4C1651.39 136.48 1648.66 127.77 1643.2 121.27C1637.74 114.77 1630.46 111.52 1621.36 111.52C1611.74 111.52 1604.2 114.77 1598.74 121.27C1593.28 127.77 1590.29 137.065 1589.77 149.155H1651.39V147.4Z", fill: color })));
 }
 
-const vanillaStyle$2 = `
+const vanillaStyle$3 = `
   :host{
     margin: 0 auto;
     width: 100%;
@@ -2508,7 +2610,7 @@ function PortalFooterView(props) {
   const styleString = sheet.toString();
   return (index.h("div", { class: sheet.classes.Container, part: "sqm-base" },
     index.h("style", { type: "text/css" },
-      vanillaStyle$2,
+      vanillaStyle$3,
       styleString),
     index.h("div", { class: sheet.classes.RowContainer },
       props.faqLink && (index.h("a", { target: "_blank", href: props.faqLink }, props.faqText)),
@@ -2680,7 +2782,7 @@ function ReferralIframeView(props) {
     index.h("iframe", { class: sheet.classes.IFrame, src: `${content.iframeSrc}?rsCode=${data.shareCode}` })));
 }
 
-const style$7 = {
+const style$8 = {
   ErrorStyle: mixins.ErrorStyles,
   FieldsContainer: {
     "& sl-input": {
@@ -2688,7 +2790,7 @@ const style$7 = {
     },
   },
 };
-const vanillaStyle$3 = `
+const vanillaStyle$4 = `
 :host {
   margin: 0 auto;
   width: 100%;
@@ -2700,21 +2802,21 @@ sl-input::part(label){
   font-weight: var(--sl-font-weight-semibold);
 }
 `;
-const sheet$7 = JSS.createStyleSheet(style$7);
-const styleString$7 = sheet$7.toString();
+const sheet$8 = JSS.createStyleSheet(style$8);
+const styleString$8 = sheet$8.toString();
 function NameFieldsView(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
   const { states } = props;
   const validationErrors = (_a = states === null || states === void 0 ? void 0 : states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors;
-  return (index.h("div", { class: sheet$7.classes.FieldsContainer },
+  return (index.h("div", { class: sheet$8.classes.FieldsContainer },
     index.h("style", { type: "text/css" },
-      vanillaStyle$3,
-      styleString$7),
+      vanillaStyle$4,
+      styleString$8),
     index.h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", name: "/firstName", type: "text", label: states.content.firstNameLabel, required: true, disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled) }, (((_e = (_d = states.registrationFormState) === null || _d === void 0 ? void 0 : _d.initialData) === null || _e === void 0 ? void 0 : _e.firstName) ? {
       value: (_g = (_f = states.registrationFormState) === null || _f === void 0 ? void 0 : _f.initialData) === null || _g === void 0 ? void 0 : _g.firstName,
     }
       : {}), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.firstName) ? {
-      class: sheet$7.classes.ErrorStyle,
+      class: sheet$8.classes.ErrorStyle,
       helpText: (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.firstName) || "Cannot be empty",
     }
       : []))),
@@ -2722,81 +2824,12 @@ function NameFieldsView(props) {
       value: (_o = (_m = states.registrationFormState) === null || _m === void 0 ? void 0 : _m.initialData) === null || _o === void 0 ? void 0 : _o.lastName,
     }
       : {}), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.lastName) ? {
-      class: sheet$7.classes.ErrorStyle,
+      class: sheet$8.classes.ErrorStyle,
       helpText: (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.lastName) || "Cannot be empty",
     }
       : [])))));
 }
 
-const style$8 = {
-  ErrorStyle: {
-    "&::part(control)": {
-      background: "var(--sl-color-danger-10)",
-      borderColor: "var(--sl-color-danger-500)",
-      outline: "var(--sl-color-danger-500)",
-    },
-    "&:host": {
-      "--focus-ring": "0 0 0 var(--sl-focus-ring-width) red !important",
-    },
-  },
-  ErrorMessageStyle: {
-    margin: 0,
-    marginTop: "5px",
-    color: "var(--sl-color-danger-500)",
-    fontSize: "var(--sl-input-help-text-font-size-medium)",
-    fontFamily: "var(--sl-font-sans)",
-    fontWeight: "var(--sl-font-weight-normal)",
-  },
-  FieldContainer: {
-    "margin-bottom": "var(--sl-spacing-large)",
-  },
-};
-const vanillaStyle$4 = `
-:host {
-  margin: 0 auto;
-  width: 100%;
-  display: block;
-}
-sl-checkbox::part(label){
-  font-size: var(--sl-input-label-font-size-small);
-  font-weight: var(--sl-font-weight-normal);
-  line-height: 20px;
-}
-sl-checkbox::part(base){
-  align-items: start;
-}
-`;
-JSS.jss.setup(JSS.create());
-const sheet$8 = JSS.jss.createStyleSheet(style$8);
-const styleString$8 = sheet$8.toString();
-function CheckboxFieldView(props) {
-  var _a, _b, _c;
-  const { states, content, callbacks } = props;
-  const validationErrors = (_a = states === null || states === void 0 ? void 0 : states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors;
-  return (index.h("div", { class: sheet$8.classes.FieldContainer, part: "sqm-base" },
-    index.h("style", { type: "text/css" },
-      vanillaStyle$4,
-      styleString$8),
-    index.h("sl-checkbox", Object.assign({ exportparts: "label: input-label, base: input-base", name: `/${content.checkboxName}`, checked: states.checked, "onSl-change": (e) => {
-        e.target.value = e.target.checked;
-        callbacks.setChecked(e.target.value);
-      } }, (!content.checkboxOptional ? { required: true } : []), { disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled) }, (!states.checked && (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName])
-      ? {
-        class: sheet$8.classes.ErrorStyle,
-      }
-      : [])),
-      global.intl.formatMessage({
-        id: content.checkboxName + "-message",
-        defaultMessage: content.checkboxLabel,
-      }, {
-        labelLink: (index.h("a", { href: content.checkboxLabelLink, target: "_blank" }, content.checkboxLabelLinkText || content.checkboxLabelLink)),
-      }),
-      !states.checked && (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName]) && (index.h("p", { class: sheet$8.classes.ErrorMessageStyle }, global.intl.formatMessage({
-        id: `errorMessage-${content.checkboxName}`,
-        defaultMessage: content.errorMessage,
-      }))))));
-}
-
 const style$9 = {
   ErrorStyle: {
     "--sl-input-border-color": "var(--sl-color-danger-500)",
@@ -4099,6 +4132,7 @@ const ShadowViewAddon = ({ story }, children) => {
 
 exports.BigStatView = BigStatView;
 exports.CardFeedView = CardFeedView;
+exports.ChangeMarktingView = ChangeMarktingView;
 exports.CheckboxFieldView = CheckboxFieldView;
 exports.CouponCodeView = CouponCodeView;
 exports.DropdownFieldView = DropdownFieldView;

package/dist/cjs/{useReferralCodes-82e8797b.js → copy-text-view-a5524c20.js}

@@ -1,7 +1,10 @@
 'use strict';
 
+const index = require('./index-a29c60ef.js');
 const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
 const index_module = require('./index.module-ee84433d.js');
+const JSS = require('./JSS-8503a151.js');
+const mixins = require('./mixins-f7e0377a.js');
 
 const GET_REFERRAL_CODES = index_module.dist.gql `
   query getCodes(
@@ -132,6 +135,96 @@ function useReferralCodes(props) {
   };
 }
 
+const style = {
+  HostBlock: mixins.HostBlock,
+  inputStyle: {
+    "&::part(input)": { textOverflow: "ellipsis", width: "100%" },
+    "&::part(base)": { cursor: "pointer", overflow: "visible" },
+    width: "100%",
+  },
+  inputErrorStyle: {
+    "&::part(base)": {
+      border: "2px solid red",
+    },
+  },
+  ContainerDiv: {
+    display: "flex",
+    alignItems: "flex-start",
+    flexDirection: "column",
+    justifyContent: "center",
+    gap: "var(--sl-spacing-x-small)",
+    width: "100%",
+  },
+  containerStyle: {
+    display: "flex",
+    alignItems: "center",
+    gap: "var(--sl-spacing-x-small)",
+    width: "100%",
+  },
+  errorTextStyle: {
+    margin: "0",
+    color: "var(--sl-color-danger-500)",
+  },
+  notificationTextStyle: {
+    margin: "0",
+    color: "var(--sl-color-neutral-500)",
+  },
+};
+const vanillaStyle = `
+  :host{
+    display: block;   
+    width: 100%;
+  }
+`;
+const textAlignStyle = {
+  right: `
+sl-input::part(input){
+  text-align: right;
+}`,
+  center: `  
+sl-input::part(input){
+  text-align: center;
+}`,
+  left: ``,
+};
+const disabledStyles = `
+  sl-input::part(input){
+    cursor: default;
+  }
+`;
+const sheet = JSS.createStyleSheet(style);
+const styleString = sheet.toString();
+function CopyTextView(props) {
+  const { buttonStyle = "icon" } = props;
+  const error = !props.loading && props.error;
+  const inputText = error ? props.inputPlaceholderText : props.copyString;
+  const disabled = error || props.loading || props.disabled;
+  const tooltipPlacement = props.buttonStyle === "button-below"
+    ? "bottom"
+    : props.buttonStyle === "button-outside"
+      ? "top"
+      : "top-end";
+  const copyButton = (index.h("sl-tooltip", { trigger: "manual", content: props.tooltiptext, placement: tooltipPlacement, disabled: props.disabled, open: props.open, skidding: props.buttonStyle === "icon" ? -5 : 0, slot: "suffix" }, buttonStyle === "icon" ? (index.h("sl-icon-button", { exportparts: "base: icon-button-base", onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, name: "files", disabled: disabled })) : (index.h("sl-button", { exportparts: "base: copy-button-base", onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, size: "medium", style: { width: `${buttonStyle === "button-below" && "100%"}` }, disabled: disabled, type: "primary" }, props.copyButtonLabel || "Copy"))));
+  return (index.h("div", { class: sheet.classes.ContainerDiv },
+    index.h("style", { type: "text/css" },
+      styleString,
+      vanillaStyle,
+      textAlignStyle[props.textAlign],
+      disabled && disabledStyles),
+    index.h("div", { class: sheet.classes.containerStyle, style: {
+        flexDirection: `${buttonStyle === "button-below" ? "column" : "row"}`,
+      } },
+      index.h("sl-input", { class: `${sheet.classes.inputStyle} ${error ? sheet.classes.inputErrorStyle : ""}`, exportparts: "base: input-base, input: input-label", value: props.loading ? "Loading..." : inputText, readonly: true, disabled: disabled },
+        buttonStyle === "icon" && copyButton,
+        error && (index.h("p", { slot: "help-text", class: sheet.classes.errorTextStyle }, props.errorText))),
+      (buttonStyle === "button-outside" || buttonStyle === "button-below") &&
+        copyButton),
+    props.isCopied &&
+      props.showNotificationText &&
+      props.notificationText && (index.h("p", { part: "sqm-notification-text", class: sheet.classes.notificationTextStyle }, props.notificationText))));
+}
+
+exports.CopyTextView = CopyTextView;
 exports.REFERRAL_CODES_NAMESPACE = REFERRAL_CODES_NAMESPACE;
 exports.REFERRAL_CODES_PAGINATION_CONTEXT = REFERRAL_CODES_PAGINATION_CONTEXT;
 exports.SET_CODE_COPIED = SET_CODE_COPIED;