npm - @saasquatch/mint-components - Versions diffs - 1.15.0-99 → 1.15.0 - Mend

@saasquatch/mint-components 1.15.0-99 → 1.15.0

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 (1016) hide show

package/dist/collection/global/styles.js CHANGED Viewed

@@ -70,10 +70,7 @@
   --teal-6: #0b6270;
   --teal-7: #004551;
 } */
-export const parseBrandingConfig = (config) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45, _46, _47, _48, _49, _50, _51, _52, _53, _54, _55, _56, _57, _58, _59, _60, _61, _62, _63, _64, _65, _66;
-  return ({
-    styles: `
+const style = `
 /* vietnamese */
 @font-face {
   font-family: 'Nunito Sans';
@@ -511,15 +508,25 @@ html {
   --sl-focus-ring-color-success: var(--sl-color-success-100);
   --sl-focus-ring-color-info: var(--sl-color-info-100);
   --sl-focus-ring-color-warning: var(--sl-color-warning-100);
-  --sl-focus-ring-color-danger: #var(--sl-color-danger-100);
-  --sl-focus-ring-width: 0px;
+  --sl-focus-ring-color-danger: #var(--sl-color-danger-100);;
+  --sl-focus-ring-width: 3px;
   --sl-button-font-size-small: var(--sl-font-size-x-small);
   --sl-button-font-size-medium: var(--sl-font-size-small);
   --sl-button-font-size-large: var(--sl-font-size-medium);
   --sl-input-height-small: 1.875rem;
   --sl-input-height-medium: 2.5rem;
   --sl-input-height-large: 3.125rem;
+  --sl-input-background-color: var(--sl-color-white);
+  --sl-input-background-color-hover: var(--sl-color-white);
+  --sl-input-background-color-focus: var(--sl-color-white);
+  --sl-input-background-color-disabled: var(--sl-color-gray-100);
+  --sl-input-border-color: var(--sl-color-gray-300);
+  --sl-input-border-color-hover: var(--sl-color-gray-400);
+  --sl-input-border-color-focus: var(--sl-color-primary-500);
+  --sl-input-border-color-disabled: var(--sl-color-gray-300);
+  --sl-input-border-width: 1px;
   --sl-input-border-radius-small: var(--sl-border-radius-medium);
+  --sl-input-border-radius-medium: var(--sl-border-radius-medium);
   --sl-input-border-radius-large: var(--sl-border-radius-medium);
   --sl-input-font-family: var(--sl-font-sans);
   --sl-input-font-weight: var(--sl-font-weight-normal);
@@ -527,11 +534,15 @@ html {
   --sl-input-font-size-medium: var(--sl-font-size-medium);
   --sl-input-font-size-large: var(--sl-font-size-large);
   --sl-input-letter-spacing: var(--sl-letter-spacing-normal);
+  --sl-input-color: var(--sl-color-gray-700);
+  --sl-input-color-hover: var(--sl-color-gray-700);
+  --sl-input-color-focus: var(--sl-color-gray-700);
   --sl-input-color-disabled: var(--sl-color-gray-900);
   --sl-input-icon-color: var(--sl-color-gray-400);
   --sl-input-icon-color-hover: var(--sl-color-gray-600);
   --sl-input-icon-color-focus: var(--sl-color-gray-600);
   --sl-input-placeholder-color: var(--sl-color-gray-400);
+  --sl-input-placeholder-color-disabled: var(--sl-color-gray-600);
   --sl-input-spacing-small: var(--sl-spacing-small);
   --sl-input-spacing-medium: var(--sl-spacing-medium);
   --sl-input-spacing-large: var(--sl-spacing-large);
@@ -545,7 +556,7 @@ html {
   --sl-input-help-text-color: var(--sl-color-gray-400);
   --sl-toggle-size: 1rem;
   --sl-overlay-background-color: #37415180;
-  --sl-panel-background-color: var(--sqm-portal-background);
+  --sl-panel-background-color: var(--sl-color-white);
   --sl-panel-border-color: var(--sl-color-gray-200);
   --sl-tooltip-border-radius: var(--sl-border-radius-medium);
   --sl-tooltip-background-color: var(--sl-color-gray-900);
@@ -563,230 +574,75 @@ html {
   --sl-z-index-toast: 950;
   --sl-z-index-tooltip: 1000;
 }
 :root {
   --sqm-header-background: var(--sl-color-white);
   --sqm-footer-background: var(--sl-color-white);
   --sqm-color-text-error: #e63717;
   --sqm-content-max-width: 700px;
   --sqm-content-background: var(--sl-color-white);
-  --sqm-portal-background: ${((_a = config === null || config === void 0 ? void 0 : config.color) === null || _a === void 0 ? void 0 : _a.backgroundColor) || "#fff"};
-  --sqm-primary-font: ${((_b = config === null || config === void 0 ? void 0 : config.main) === null || _b === void 0 ? void 0 : _b.brandFont) || "var(--sl-font-sans)"};
+  --sqm-portal-background: transparent;
   --widget-background-color: var(--sl-color-white);
   --sqm-portal-main-width: 900px;
   --sqm-max-width: 100%;
-  --sqm-skeleton-background: #eee;
-  --sqm-text: ${((_d = (_c = config === null || config === void 0 ? void 0 : config.color) === null || _c === void 0 ? void 0 : _c.textColorShades) === null || _d === void 0 ? void 0 : _d.mainText) || "#27272A"};
-  --sqm-text-subdued: ${((_f = (_e = config === null || config === void 0 ? void 0 : config.color) === null || _e === void 0 ? void 0 : _e.textColorShades) === null || _f === void 0 ? void 0 : _f.subduedText) || "#717179"};
-  --sqm-primary-color: ${((_g = config === null || config === void 0 ? void 0 : config.main) === null || _g === void 0 ? void 0 : _g.brandColor) || "#236AEB"};
-  --sqm-primary-button-background:${((_j = (_h = config === null || config === void 0 ? void 0 : config.primaryButton) === null || _h === void 0 ? void 0 : _h.buttonColor) === null || _j === void 0 ? void 0 : _j.background) || "#236AEB"};
-  --sqm-primary-button-background-hover: ${((_l = (_k = config === null || config === void 0 ? void 0 : config.primaryButton) === null || _k === void 0 ? void 0 : _k.buttonHoverColor) === null || _l === void 0 ? void 0 : _l.background) || "#3698df"};
-  --sqm-primary-button-color-hover: ${((_o = (_m = config === null || config === void 0 ? void 0 : config.primaryButton) === null || _m === void 0 ? void 0 : _m.buttonHoverColor) === null || _o === void 0 ? void 0 : _o.label) || "#FFFFFF"};
-  --sqm-primary-button-border-color-hover: ${((_q = (_p = config === null || config === void 0 ? void 0 : config.primaryButton) === null || _p === void 0 ? void 0 : _p.buttonHoverColor) === null || _q === void 0 ? void 0 : _q.border) || "transparent"};
-  --sqm-primary-button-color: ${((_s = (_r = config === null || config === void 0 ? void 0 : config.primaryButton) === null || _r === void 0 ? void 0 : _r.buttonColor) === null || _s === void 0 ? void 0 : _s.label) || "#FFFFFF"};
-  --sqm-primary-button-color-border: ${((_u = (_t = config === null || config === void 0 ? void 0 : config.primaryButton) === null || _t === void 0 ? void 0 : _t.buttonColor) === null || _u === void 0 ? void 0 : _u.border) || "transparent"};
-  --sqm-primary-button-radius: ${((_v = config === null || config === void 0 ? void 0 : config.primaryButton) === null || _v === void 0 ? void 0 : _v.borderRadius) ? ((_w = config === null || config === void 0 ? void 0 : config.primaryButton) === null || _w === void 0 ? void 0 : _w.borderRadius) + "px"
-      : "4px"};
-  --sqm-secondary-button-background: ${((_x = config === null || config === void 0 ? void 0 : config.secondaryButton) === null || _x === void 0 ? void 0 : _x.buttonColor) || "transparent"};
-  --sqm-secondary-button-background-hover: ${((_z = (_y = config === null || config === void 0 ? void 0 : config.secondaryButton) === null || _y === void 0 ? void 0 : _y.buttonHoverColor) === null || _z === void 0 ? void 0 : _z.background) || "#DEF0FC"};
-  --sqm-secondary-button-color-hover: ${((_1 = (_0 = config === null || config === void 0 ? void 0 : config.secondaryButton) === null || _0 === void 0 ? void 0 : _0.buttonHoverColor) === null || _1 === void 0 ? void 0 : _1.label) || "#3878DB"};
-  --sqm-secondary-button-border-color-hover: ${((_3 = (_2 = config === null || config === void 0 ? void 0 : config.secondaryButton) === null || _2 === void 0 ? void 0 : _2.buttonHoverColor) === null || _3 === void 0 ? void 0 : _3.border) || "#3798DF"};
-  --sqm-secondary-button-color: ${((_5 = (_4 = config === null || config === void 0 ? void 0 : config.secondaryButton) === null || _4 === void 0 ? void 0 : _4.buttonColor) === null || _5 === void 0 ? void 0 : _5.label) || "#27272A"};
-  --sqm-secondary-button-color-border: ${((_7 = (_6 = config === null || config === void 0 ? void 0 : config.secondaryButton) === null || _6 === void 0 ? void 0 : _6.buttonColor) === null || _7 === void 0 ? void 0 : _7.border) || "#E4E4E7"};
-  --sqm-secondary-button-radius: ${((_8 = config === null || config === void 0 ? void 0 : config.secondaryButton) === null || _8 === void 0 ? void 0 : _8.borderRadius) ? ((_9 = config === null || config === void 0 ? void 0 : config.secondaryButton) === null || _9 === void 0 ? void 0 : _9.borderRadius) + "px"
-      : "4px"};
-  --sqm-border-radius-normal: ${((_10 = config === null || config === void 0 ? void 0 : config.border) === null || _10 === void 0 ? void 0 : _10.borderRadius) ? ((_11 = config === null || config === void 0 ? void 0 : config.border) === null || _11 === void 0 ? void 0 : _11.borderRadius) + "px" : "4px"};
-  --sqm-border-color: ${((_12 = config === null || config === void 0 ? void 0 : config.border) === null || _12 === void 0 ? void 0 : _12.borderColor) || "#E4E4E7"};
-  --sqm-border-thickness: ${((_13 = config === null || config === void 0 ? void 0 : config.border) === null || _13 === void 0 ? void 0 : _13.borderThickness) ? ((_14 = config === null || config === void 0 ? void 0 : config.border) === null || _14 === void 0 ? void 0 : _14.borderThickness) + "px"
-      : "1px"};
-  --sqm-accent-color-icon: ${((_16 = (_15 = config === null || config === void 0 ? void 0 : config.color) === null || _15 === void 0 ? void 0 : _15.accentColorShades) === null || _16 === void 0 ? void 0 : _16.icon) || "#7ECCF7"};
-  --sqm-accent-color-text: ${((_18 = (_17 = config === null || config === void 0 ? void 0 : config.color) === null || _17 === void 0 ? void 0 : _17.accentColorShades) === null || _18 === void 0 ? void 0 : _18.text) || "#3798DF"};
-  --sqm-accent-color-border: ${((_20 = (_19 = config === null || config === void 0 ? void 0 : config.color) === null || _19 === void 0 ? void 0 : _19.accentColorShades) === null || _20 === void 0 ? void 0 : _20.border) || "#3798DF"};
-  --sqm-accent-color-background: ${((_22 = (_21 = config === null || config === void 0 ? void 0 : config.color) === null || _21 === void 0 ? void 0 : _21.accentColorShades) === null || _22 === void 0 ? void 0 : _22.background) || "#EFF8FE"};
-  --sqm-success-color-icon: ${((_24 = (_23 = config === null || config === void 0 ? void 0 : config.color) === null || _23 === void 0 ? void 0 : _23.success) === null || _24 === void 0 ? void 0 : _24.iconAndBadge) || "var(--sl-color-success-600)"};
-  --sqm-success-color-text: ${((_26 = (_25 = config === null || config === void 0 ? void 0 : config.color) === null || _25 === void 0 ? void 0 : _25.success) === null || _26 === void 0 ? void 0 : _26.text) || "#fff"};
-  --sqm-success-color-border: ${((_28 = (_27 = config === null || config === void 0 ? void 0 : config.color) === null || _27 === void 0 ? void 0 : _27.success) === null || _28 === void 0 ? void 0 : _28.border) || "var(--sl-color-success-400)"};
-  --sqm-success-color-background: ${((_30 = (_29 = config === null || config === void 0 ? void 0 : config.color) === null || _29 === void 0 ? void 0 : _29.success) === null || _30 === void 0 ? void 0 : _30.background) || "var(--sl-color-success-300)"};
-  --sqm-warning-color-icon: ${((_32 = (_31 = config === null || config === void 0 ? void 0 : config.color) === null || _31 === void 0 ? void 0 : _31.warning) === null || _32 === void 0 ? void 0 : _32.iconAndBadge) || "var(--sl-color-warning-600)"};
-  --sqm-warning-color-text: ${((_34 = (_33 = config === null || config === void 0 ? void 0 : config.color) === null || _33 === void 0 ? void 0 : _33.warning) === null || _34 === void 0 ? void 0 : _34.text) || "#fff"};
-  --sqm-warning-color-border: ${((_36 = (_35 = config === null || config === void 0 ? void 0 : config.color) === null || _35 === void 0 ? void 0 : _35.warning) === null || _36 === void 0 ? void 0 : _36.border) || "var(--sl-color-warning-400)"};
-  --sqm-warning-color-background: ${((_38 = (_37 = config === null || config === void 0 ? void 0 : config.color) === null || _37 === void 0 ? void 0 : _37.warning) === null || _38 === void 0 ? void 0 : _38.background) || "var(--sl-color-warning-300)"};
-  --sqm-danger-color-icon: ${((_40 = (_39 = config === null || config === void 0 ? void 0 : config.color) === null || _39 === void 0 ? void 0 : _39.critical) === null || _40 === void 0 ? void 0 : _40.iconAndBadge) || "var(--sl-color-danger-600)"};
-  --sqm-danger-color-text: ${((_42 = (_41 = config === null || config === void 0 ? void 0 : config.color) === null || _41 === void 0 ? void 0 : _41.critical) === null || _42 === void 0 ? void 0 : _42.text) || "#fff"};
-  --sqm-danger-color-border: ${((_44 = (_43 = config === null || config === void 0 ? void 0 : config.color) === null || _43 === void 0 ? void 0 : _43.critical) === null || _44 === void 0 ? void 0 : _44.border) || "var(--sl-color-danger-400)"};
-  --sqm-danger-color-background: ${((_46 = (_45 = config === null || config === void 0 ? void 0 : config.color) === null || _45 === void 0 ? void 0 : _45.critical) === null || _46 === void 0 ? void 0 : _46.background) || "var(--sl-color-danger-300)"};
-  --sqm-informative-color-icon: ${((_48 = (_47 = config === null || config === void 0 ? void 0 : config.color) === null || _47 === void 0 ? void 0 : _47.informative) === null || _48 === void 0 ? void 0 : _48.iconAndBadge) || "var(--sl-color-sky-600)"};
-  --sqm-informative-color-text: ${((_50 = (_49 = config === null || config === void 0 ? void 0 : config.color) === null || _49 === void 0 ? void 0 : _49.informative) === null || _50 === void 0 ? void 0 : _50.text) || "#fff"};
-  --sqm-informative-color-border: ${((_52 = (_51 = config === null || config === void 0 ? void 0 : config.color) === null || _51 === void 0 ? void 0 : _51.informative) === null || _52 === void 0 ? void 0 : _52.border) || "var(--sl-color-sky-400)"};
-  --sqm-informative-color-background: ${((_54 = (_53 = config === null || config === void 0 ? void 0 : config.color) === null || _53 === void 0 ? void 0 : _53.informative) === null || _54 === void 0 ? void 0 : _54.background) || "var(--sl-color-sky-300)"};
-  --sqm-input-background: ${((_56 = (_55 = config === null || config === void 0 ? void 0 : config.formFields) === null || _55 === void 0 ? void 0 : _55.formFieldColor) === null || _56 === void 0 ? void 0 : _56.background) || "#fff"};
-  --sqm-input-border-color: ${((_58 = (_57 = config === null || config === void 0 ? void 0 : config.formFields) === null || _57 === void 0 ? void 0 : _57.formFieldColor) === null || _58 === void 0 ? void 0 : _58.border) || "#E4E4E7"};
-  --sqm-input-border-radius: ${((_59 = config === null || config === void 0 ? void 0 : config.formFields) === null || _59 === void 0 ? void 0 : _59.borderRadius) ? ((_60 = config === null || config === void 0 ? void 0 : config.formFields) === null || _60 === void 0 ? void 0 : _60.borderRadius) + "px"
-      : "4px"};
-  --sqm-input-color: ${((_62 = (_61 = config === null || config === void 0 ? void 0 : config.formFields) === null || _61 === void 0 ? void 0 : _61.formFieldColor) === null || _62 === void 0 ? void 0 : _62.inputText) || "#27272A"};
-  --sqm-input-label-color: var(--sqm-input-color);
-  --sqm-input-border-color-focus: ${((_63 = config === null || config === void 0 ? void 0 : config.formFields) === null || _63 === void 0 ? void 0 : _63.selectedStateColor) || "#E4E4E7"};
-  --sqm-input-border-color-hover: ${((_64 = config === null || config === void 0 ? void 0 : config.formFields) === null || _64 === void 0 ? void 0 : _64.hoverStateColor) || "#E4E4E7"};
-  --sqm-input-label-font-size: inherit;
-  --sqm-input-disabled-color: var(--sqm-text-subdued);
-  --sqm-input-disabled-background: ${((_65 = config === null || config === void 0 ? void 0 : config.formFields) === null || _65 === void 0 ? void 0 : _65.disabledBackgroundColor) || "#F4F4F5"};
-  --sl-color-primary-100: var(--sqm-primary-color);
-  --sl-color-primary-200: var(--sqm-primary-color);
-  --sl-color-primary-300: var(--sqm-primary-color);
-  --sl-color-primary-400: var(--sqm-primary-color);
-  --sl-color-primary-500: var(--sqm-primary-color);
-  --sl-input-border-radius-medium: var(--sqm-input-border-radius, var(--sqm-border-radius-normal));
-  --sl-input-color-hover: var(--sqm-input-color-hover);
-  --sl-input-color-focus: var(--sqm-input-color-focus);
-  --sl-input-color-disabled: var(--sqm-input-disabled-color);
-  --sl-input-border-color-disabled: #7c7c7c;
-  --sl-input-border-color-focus: var(--sqm-input-border-color-focus, #999999);
-  --sl-input-border-color: var(--sqm-input-border-color, #7c7c7c);
-  --sl-input-border-color-hover: var(--sqm-input-border-color-hover, #999999);
-  --sl-input-background-color-focus: var(--sqm-input-background, #ffffff);
-  --sl-input-border-radius: var(--sqm-input-border-radius, var(--sqm-border-radius-normal));
-  --sl-input-background-color: var(--sqm-input-background, #ffffff);
-  --sl-input-color: var(--sqm-input-color, var(--sqm-text), #333);
-  --sl-input-placeholder-color: var(--sqm-text-subdued, var(--sl-color-neutral-500));
-  --sl-input-background-color-hover: var(--sqm-input-background, #ffffff);
-  --sl-input-border-width: var(--sqm-border-thickness, 1px);
-  --sl-input-border-style: solid;
-/* --- Disabled State --- */
---sl-input-background-color-disabled: var(--sqm-input-disabled-background, var(--sl-color-neutral-100));
---sl-input-color-disabled: var(--sqm-input-disabled-color, var(--sl-color-neutral-500)); /* Your current: var(--sqm-input-disabled-color) */
---sl-input-placeholder-color-disabled: var(--sl-color-neutral-400);
-/* --- Invalid/Error State --- */
---sl-input-background-color-invalid: var(--sl-color-danger-50);
---sl-input-border-color-invalid: var(--sl-color-danger-500);
---sl-input-color-invalid: var(--sl-color-danger-700);
-/* --- Internal Elements (Prefix, Suffix, Clear Icon) --- */
---sl-input-icon-color: var(--sl-color-neutral-500);
---sl-input-icon-size: var(--sl-font-size-medium);
---sl-input-clear-icon-color: var(--sl-color-neutral-500);
---sl-input-clear-icon-color-hover: var(--sl-color-neutral-700);
-/* --- Box Shadow --- */
---sl-input-box-shadow: none; /* Typically no box shadow by default */
---sl-input-box-shadow-focus: 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color);
 }
 body {
-  font-family: var(--sqm-primary-font);
+  font-family: var(--sl-font-sans);
   font-size: var(--sl-font-size-medium);
   font-weight: var(--sl-font-weight-normal);
   letter-spacing: var(--sl-letter-spacing-small);
-  color: var(--sqm-text);
+  color: var(--sl-color-gray-800);
   line-height: var(--sl-line-height-normal);
   margin: 0;
-  background-color: var(--sqm-portal-background) !important;
-}
-.story-div {
-  background: var(--sqm-portal-background) !important;
-  color: var(--sqm-text) !important;
-}
-sl-spinner {
-  --sl-color-primary-500: var(--sqm-accent-color-icon)
-  --sl-spinner-stroke-width: 4px;
-}
-sl-select::part(menu) {
-  background: var(--sqm-input-background, inherit);
-  color: var(--sqm-input-color, inherit);
-  border:none;
-}
-sl-select::part(panel) {
-  border-radius: var(--sqm-border-radius-normal);
-}
-/** AL: Shading variables **/
-sl-alert[type="success"]::part(icon) {
-  color: var(--sqm-success-icon-color, var(--sl-color-success-500));
-}
-sl-alert[type="success"]::part(base) {
-  background-color: var(--sqm-success-icon-color, var(--sl-color-success-100));
-}
-sl-alert[type="warning"]::part(icon) {
-  color: var(--sqm-warning-icon-color, var(--sl-color-warning-500));
-}
-sl-alert[type="warning"]::part(base) {
-  background-color: var(--sqm-warning-icon-color, var(--sl-color-warning-100));
-}
-sl-alert[type="danger"]::part(icon) {
-  color: var(--sqm-danger-icon-color, var(--sl-color-danger-500));
+  background-color: var(--sqm-portal-background);
 }
-sl-alert[type="danger"]::part(base) {
-  background-color: var(--sqm-danger-icon-color, var(--sl-color-danger-100));
-}
-sl-alert[type="info"]::part(icon) {
-  color: var(--sqm-info-icon-color, var(--sl-color-info-500));
-}
+// .terms-link,
+// .terms-link:visited {
+//   color: var(--sl-color-gray-500);
+//   text-decoration: none;
+// }
+// .terms-link:hover {
+//   color: var(--sl-color-gray-600);
+// }
-sl-alert[type="info"]::part(base) {
-  background-color: var(--sqm-info-icon-color, var(--sl-color-info-100));
+h1, h2, h3, h4{
+  line-height: var(--sl-line-height-dense);
 }
-sl-alert[type="neutral"]::part(icon) {
-  color: var(--sqm-neutral-icon-color, var(--sl-color-neutral-500));
-}
-sl-alert[type="neutral"]::part(base) {
-  background-color: var(--sqm-neutral-icon-color, var(--sl-color-neutral-100));
+h2, .Title {
+  font-size: var(--sl-font-size-large);
+  font-weight: var(--sl-font-weight-semibold);
+  margin: 0;
 }
-sl-badge[type="success"]::part(base) {
-  background-color: var(--sqm-success-badge-background, var(--sl-color-success-100));
-  color: var(--sqm-success-badge-text-color, var(--sl-color-success-700));
+.H4 {
+  font-size: var(--sl-font-size-medium);
+  font-weight: var(--sl-font-weight-semibold);
+  margin: 0;
 }
-sl-badge[type="warning"]::part(base) {
-  background-color: var(--sqm-warning-badge-background, var(--sl-color-warning-100));
-  color: var(--sqm-warning-badge-text-color, var(--sl-color-warning-700));
+.P {
+  font-size: var(--sl-font-size-small);
+  color: var(--sl-color-gray-800);
+  margin-top: 0px;
 }
-sl-badge[type="danger"]::part(base) {
-  background-color: var(--sqm-danger-badge-background, var(--sl-color-danger-100));
-  color: var(--sqm-danger-badge-text-color, var(--sl-color-danger-700));
+.Title {
+  text-align: center;
 }
-sl-badge[type="info"]::part(base) {
-  background-color: var(--sqm-info-badge-background, var(--sl-color-info-100));
-  color: var(--sqm-info-badge-text-color, var(--sl-color-info-700));
+.Subtitle {
+  text-align: center;
+  margin-bottom: 0px;
+  color: var(--sl-color-gray-500);
 }
-sl-badge[type="neutral"]::part(base) {
-  background-color: var(--sqm-neutral-badge-background, var(--sl-color-neutral-100));
-  color: var(--sqm-neutral-badge-text-color, var(--sl-color-neutral-700));
+.SupportText{
+  margin-top: var(--sl-spacing-small);
+  text-align: center;
 }
-h1, h2, h3, h4{
-  line-height: var(--sl-line-height-dense);
+sl-button::part(base){
+  width: 100%;
 }
 sqm-share-button{
@@ -799,166 +655,79 @@ sqm-hero img {
 }
 sl-details::part(base){
-  background-color: inherit;
-  border-color: var(--sqm-border-color);
+  background-color: var(--sl-color-white);
+  border-color: var(--sl-color-gray-300)
 }
 sl-details::part(summary) {
   font-size: var(--sl-font-size-medium);
   font-weight: var(--sl-font-weight-semibold);
   margin: 0px;
 }
-*::part(primarybutton-base),
-sl-button[type="primary"]::part(base) {
-  font-family: var(--sqm-primary-font);
-  width: 100%;
-  background-color: var(--sqm-primary-button-background);
-  color: var(--sqm-primary-button-color);
-  border-color: var(--sqm-primary-button-color-border);
-  border-radius: var(--sqm-primary-button-radius);
+*::part(defaultbutton-base){
+  background-color: rgba(0,0,0,0);
+  color: var(--sl-color-gray-800);
+  border-color: var(--sl-color-gray-800);
 }
-*::part(primarybutton-base):hover,
-sl-button[type="primary"]::part(base):hover{
-  background-color: var(--sqm-primary-button-background-hover);
-  border-color: var(--sqm-primary-button-border-color-hover);
-  color: var(--sqm-primary-button-color-hover);
-}
-*::part(primarybutton-base):focus,
-sl-button[type="primary"]::part(base):focus {
-  box-shadow: none;
-}
-*::part(secondarybutton-base),
-sl-button[type="secondary"]::part(base) {
-font-family: var(--sqm-primary-font);
-  background-color: var(--sqm-secondary-button-background);
-  color: var(--sqm-secondary-button-color);
-  border-color: var(--sqm-secondary-button-color-border);
-  border-radius: var(--sqm-secondary-button-radius);
-}
-*::part(secondarybutton-base):hover,
-sl-button[type="secondary"]::part(base):hover {
-  background-color: var(--sqm-secondary-button-background-hover);
-  color: var(--sqm-secondary-button-color-hover);
-  border-color: var(--sqm-secondary-button-border-color-hover);
-}
-*::part(input-label), *::part(select-label), *::part(textarea-label){
-  font-family: var(--sqm-primary-font);
-  font-size: var(--sqm-input-label-font-size, var(--sl-input-font-size-small));
-  font-weight: var(--sl-font-weight-semibold);
-  color: var(--sqm-input-label-color, var(--sqm-text), black);
-}
-*::part(input-base), *::part(select-base), *::part(textarea-base){
-  font-family: var(--sqm-primary-font);
-  background-color: var(--sqm-input-background, #fff);
-  border-radius: var(--sqm-input-border-radius, var(--sl-input-border-radius-large), 0.25rem);
-  color: var(--sqm-input-color, white);
-  border-width: var(--sqm-border-thickness, 1px);
+*::part(defaultbutton-base):hover{
+  background-color: rgba(20,20,20,.08);
 }
-*::part(input-base):hover, *::part(select-base):hover, *::part(textarea-base):hover{
-  border-color: var(--sqm-border-color-hover);
-}
-*::part(input-base):focus, *::part(select-base):focus, *::part(textarea-base):focus{
-  border-color: var(--sqm-border-color-focus);
-}
-sqm-name-fields::part(input-base) {
-  font-family: var(--sqm-primary-font);
-  background-color: var(--sqm-input-background, #fff);
-  border-radius: var(--sqm-input-border-radius, var(--sl-input-border-radius-large), 0.25rem);
-  color: var(--sqm-input-color, white);
-  border-width: var(--sqm-border-thickness, 1px);
+*::part(defaultbutton-base):active{
+  background-color: rgba(20,20,20,.16);
 }
-sl-input::part(base):focus,
-sl-select::part(form-control-wrapper):focus,
-sl-textarea::part(textarea-label):focus {
-  border-color: var(--sqm-border-color-focus);
-}
-*::part(input-label):disabled, *::part(select-label):disabled, *::part(textarea-label):disabled{
-  background: var(--sqm-input-disabled-background, #f5f5f5);
-  color: var(--sqm-input-disabled-color, var(--sl-color-gray-600));
-}
-*::part(input):-webkit-autofill {
-  box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important;
-  -webkit-text-fill-color: var(--sqm-input-color, white) !important;
+*::part(defaultbutton-base):focus{
+  box-shadow: none;
 }
-*::part(input):-webkit-autofill:hover {
-  box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important;
-  -webkit-text-fill-color: var(--sqm-input-color, white) !important;
+*::part(primarybutton-base){
+  background-color: var(--sl-color-primary-400);
+  color: var(--sl-color-white);
+  border-color: var(--sl-color-primary-400);
 }
-*::part(input):-webkit-autofill:focus {
-  box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important;
-  -webkit-text-fill-color: var(--sqm-input-color, white) !important;
+*::part(primarybutton-base):hover{
+  background-color: var(--sl-color-primary-300);
+  border-color: var(--sl-color-primary-300);
 }
-*::part(input)::placeholder,
-*::part(select)::placeholder,
-*::part(textarea)::placeholder {
-  font-family: var(--sqm-primary-font);
-  color: var(--sqm-text-subdued);
+*::part(primarybutton-base):active{
+  background-color: var(--sl-color-primary-500);
+  border-color: var(--sl-color-primary-500);
 }
-*::part(input)::-webkit-input-placeholder,
-*::part(select)::-webkit-input-placeholder,
-*::part(textarea)::-webkit-input-placeholder {
-  font-family: var(--sqm-primary-font);
-  color: var(--sqm-text-subdued);
-}
-*::part(input)::-moz-placeholder,
-*::part(select)::-moz-placeholder,
-*::part(textarea)::-moz-placeholder {
-  font-family: var(--sqm-primary-font);
-  opacity: 1; /* Firefox adds an opacity to placeholders by default */
-  color: var(--sqm-text-subdued);
+*::part(primarybutton-base):focus{
+  box-shadow: none;
 }
-*::part(input)::-ms-input-placeholder,
-*::part(select)::-ms-input-placeholder,
-*::part(textarea)::-ms-input-placeholder {
-  font-family: var(--sqm-primary-font);
-  color: var(--sqm-text-subdued);
+*::part(input-label), *::part(select-label), *::part(textarea-label){
+  font-size: var(--sl-input-font-size-small);
+  font-weight: var(--sl-font-weight-semibold);
 }
-a {
-  font-family: var(--sqm-primary-font);
-  color: inherit;
-  text-decoration: underline;
-  cursor: pointer;
+sl-input::part(label){
+  font-size: var(--sl-input-label-font-size-small);
+  font-weight: var(--sl-font-weight-semibold);
 }
 *::part(menuitem-base):hover{
   background-color: var(--sl-color-gray-200);
   color: var(--sl-color-gray-700);
 }
-sl-icon::part(base) {
-  color: var(--sqm-text);
+.poweredBy {
+  color: var(--sl-color-gray-400);
+  font-size: var(--sl-font-size-xx-small);
 }
-sl-icon::part(base):hover {
-  color: var(--sqm-accent-color-icon);
+.poweredBy:hover {
+  color: var(--sl-color-gray-900);
 }
+.FooterEmail{
+  text-decoration: none;
+  font-size: var(--sl-font-size-medium);
+  color: var(--sl-color-gray-800);
+  margin: 0px;
+  cursor:pointer;
+}
-`,
-    font: (_66 = config === null || config === void 0 ? void 0 : config.main) === null || _66 === void 0 ? void 0 : _66.brandFont,
-  });
-};
+`;
+export default style;