npm - @saasquatch/mint-components - Versions diffs - 1.13.3-0 → 1.13.3 - Mend

@saasquatch/mint-components 1.13.3-0 → 1.13.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (356) hide show

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

@@ -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} RENAMED Viewed

@@ -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;