@starasia/text 1.0.0

package/dist/text.es.js

@@ -0,0 +1,2116 @@
+import z from "react";
+var x = { exports: {} }, m = {};
+/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var k = z, W = Symbol.for("react.element"), H = Symbol.for("react.fragment"), O = Object.prototype.hasOwnProperty, T = k.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, R = { key: !0, ref: !0, __self: !0, __source: !0 };
+function d(n, a, o) {
+  var i, s = {}, t = null, e = null;
+  o !== void 0 && (t = "" + o), a.key !== void 0 && (t = "" + a.key), a.ref !== void 0 && (e = a.ref);
+  for (i in a) O.call(a, i) && !R.hasOwnProperty(i) && (s[i] = a[i]);
+  if (n && n.defaultProps) for (i in a = n.defaultProps, a) s[i] === void 0 && (s[i] = a[i]);
+  return { $$typeof: W, type: n, key: t, ref: e, props: s, _owner: T.current };
+}
+m.Fragment = H;
+m.jsx = d;
+m.jsxs = d;
+x.exports = m;
+var C = x.exports;
+const E = `@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
+
+* {
+  margin: 0;
+  padding: 0;
+  /* font-family: "Montserrat", sans-serif; */
+  /* font-weight: 500; */
+  box-sizing: border-box;
+}
+
+:root {
+  font-size: 16px;
+  /* font-family: "Montserrat", sans-serif; */
+
+  /* gray */
+  --starasia-ui-color-gray-50: #fffeff;
+  --starasia-ui-color-gray-100: #eff3f8;
+  --starasia-ui-color-gray-200: #c9cecc;
+  --starasia-ui-color-gray-300: #aeb6b2;
+  --starasia-ui-color-gray-400: #939e99;
+  --starasia-ui-color-gray-500: #78867f;
+  --starasia-ui-color-gray-600: #606b66;
+  --starasia-ui-color-gray-700: #48504c;
+  --starasia-ui-color-gray-800: #303533;
+  --starasia-ui-color-gray-900: #181a19;
+  --starasia-ui-color-gray-950: #030712;
+
+  /* red */
+  --starasia-ui-color-red-50: #fff0f3;
+  --starasia-ui-color-red-100: #ffccd5;
+  --starasia-ui-color-red-200: #ffb3c1;
+  --starasia-ui-color-red-300: #ff8fa3;
+  --starasia-ui-color-red-400: #ff758f;
+  --starasia-ui-color-red-500: #ff4d6d;
+  --starasia-ui-color-red-600: #c9184a;
+  --starasia-ui-color-red-700: #a4133c;
+  --starasia-ui-color-red-800: #800f2f;
+  --starasia-ui-color-red-900: #590d22;
+  --starasia-ui-color-red-950: #450a0a;
+
+  /* orange */
+  --starasia-ui-color-orange-50: #fdf2e3;
+  --starasia-ui-color-orange-100: #f8d9ac;
+  --starasia-ui-color-orange-200: #f4c583;
+  --starasia-ui-color-orange-300: #f1b259;
+  --starasia-ui-color-orange-400: #ed9f30;
+  --starasia-ui-color-orange-500: #d18d2c;
+  --starasia-ui-color-orange-600: #8e5f1d;
+  --starasia-ui-color-orange-700: #5f4013;
+  --starasia-ui-color-orange-800: #2f200a;
+  --starasia-ui-color-orange-900: #231807;
+  --starasia-ui-color-orange-950: #431407;
+
+  /* yellow */
+  --starasia-ui-color-yellow-50: #fffde6;
+  --starasia-ui-color-yellow-100: #fffcd9;
+  --starasia-ui-color-yellow-200: #fff9b0;
+  --starasia-ui-color-yellow-300: #ffeb00;
+  --starasia-ui-color-yellow-400: #e6d400;
+  --starasia-ui-color-yellow-500: #ccbc00;
+  --starasia-ui-color-yellow-600: #bfb000;
+  --starasia-ui-color-yellow-700: #998d00;
+  --starasia-ui-color-yellow-800: #736a00;
+  --starasia-ui-color-yellow-900: #595200;
+  --starasia-ui-color-yellow-950: #422006;
+
+  /* green */
+  --starasia-ui-color-green-50: #dcf6ea;
+  --starasia-ui-color-green-100: #baeed6;
+  --starasia-ui-color-green-200: #97e6c1;
+  --starasia-ui-color-green-300: #75dead;
+  --starasia-ui-color-green-400: #52d698;
+  --starasia-ui-color-green-500: #30ce84;
+  --starasia-ui-color-green-600: #28ac6e;
+  --starasia-ui-color-green-700: #208958;
+  --starasia-ui-color-green-800: #186742;
+  --starasia-ui-color-green-900: #10442c;
+  --starasia-ui-color-green-950: #052e16;
+
+  /* blue */
+  --starasia-ui-color-blue-50: #e3f2fd;
+  --starasia-ui-color-blue-100: #bbdefb;
+  --starasia-ui-color-blue-200: #90caf9;
+  --starasia-ui-color-blue-300: #64b5f6;
+  --starasia-ui-color-blue-400: #42a5f5;
+  --starasia-ui-color-blue-500: #2196f3;
+  --starasia-ui-color-blue-600: #1e88e5;
+  --starasia-ui-color-blue-700: #1976d2;
+  --starasia-ui-color-blue-800: #1565c0;
+  --starasia-ui-color-blue-900: #0d47a1;
+  --starasia-ui-color-blue-950: #172554;
+
+  /* purple */
+  --starasia-ui-color-purple-50: #e9def5;
+  --starasia-ui-color-purple-100: #d4bdeb;
+  --starasia-ui-color-purple-200: #be9ce2;
+  --starasia-ui-color-purple-300: #a97bd8;
+  --starasia-ui-color-purple-400: #935acf;
+  --starasia-ui-color-purple-500: #7e39c5;
+  --starasia-ui-color-purple-600: #692fa4;
+  --starasia-ui-color-purple-700: #542683;
+  --starasia-ui-color-purple-800: #3f1c62;
+  --starasia-ui-color-purple-900: #2a1341;
+  --starasia-ui-color-purple-950: #3b0764;
+
+  /* aloha */
+  --starasia-ui-color-aloha-50: #dbf7f2;
+  --starasia-ui-color-aloha-100: #b8f0e6;
+  --starasia-ui-color-aloha-200: #95e8da;
+  --starasia-ui-color-aloha-300: #72e1ce;
+  --starasia-ui-color-aloha-400: #4fdac2;
+  --starasia-ui-color-aloha-500: #2cd2b6;
+  --starasia-ui-color-aloha-600: #24af98;
+  --starasia-ui-color-aloha-700: #1d8c79;
+  --starasia-ui-color-aloha-800: #16695b;
+  --starasia-ui-color-aloha-900: #0e463c;
+
+  /* pink  */
+  --starasia-ui-color-pink-50: #fbdbf1;
+  --starasia-ui-color-pink-100: #f8b7e4;
+  --starasia-ui-color-pink-200: #f593d7;
+  --starasia-ui-color-pink-300: #f16fca;
+  --starasia-ui-color-pink-400: #ee4bbd;
+  --starasia-ui-color-pink-500: #eb27b0;
+  --starasia-ui-color-pink-600: #d7139d;
+  --starasia-ui-color-pink-700: #b31083;
+  --starasia-ui-color-pink-800: #8f0d68;
+  --starasia-ui-color-pink-900: #6b094e;
+
+  /* COLOR BRAND */
+
+  /* primary */
+  --starasia-ui-brand-primary-default: var(--starasia-ui-color-blue-700);
+  --starasia-ui-brand-primary-secondary: var(--starasia-ui-color-blue-300);
+  --starasia-ui-brand-primary-tertiary: var(--starasia-ui-color-blue-50);
+
+  /* secondary */
+  --starasia-ui-brand-secondary-default: var(--starasia-ui-color-pink-700);
+  --starasia-ui-brand-secondary-secondary: var(--starasia-ui-color-pink-300);
+  --starasia-ui-brand-secondary-tertiary: var(--starasia-ui-color-pink-50);
+
+  /* TEXT COLOR */
+  --starasia-ui-text-default: var(--starasia-ui-color-gray-900);
+  --starasia-ui-text-secondary: var(--starasia-ui-color-gray-700);
+  --starasia-ui-text-tertiary: var(--starasia-ui-color-gray-500);
+  --starasia-ui-text-disable: var(--starasia-ui-color-gray-200);
+  --starasia-ui-text-white: var(--starasia-ui-color-gray-50);
+  --starasia-ui-text-success: var(--starasia-ui-utility-success-default);
+  --starasia-ui-text-successSecondary: var(
+    --starasia-ui-utility-success-tertiary
+  );
+  --starasia-ui-text-successDisable: var(--starasia-ui-color-green-500);
+  --starasia-ui-text-danger: var(--starasia-ui-utility-danger-default);
+  --starasia-ui-text-dangerSecondary: var(
+    --starasia-ui-utility-danger-tertiary
+  );
+  --starasia-ui-text-dangerDisable: var(--starasia-ui-color-red-500);
+  --starasia-ui-text-brand: var(--starasia-ui-brand-primary-default);
+  --starasia-ui-text-brandSecondary: var(--starasia-ui-brand-primary-tertiary);
+  --starasia-ui-text-info: var(--starasia-ui-utility-information-default);
+  --starasia-ui-text-infoSecondary: var(
+    --starasia-ui-utility-information-tertiary
+  );
+  --starasia-ui-text-warning: var(--starasia-ui-utility-warning-default);
+  --starasia-ui-text-warningDisable: var(--starasia-ui-color-orange-500);
+
+  /* ACCENTS COLOR  */
+
+  /* success */
+  --starasia-ui-utility-success-default: var(--starasia-ui-color-green-600);
+  --starasia-ui-utility-success-secondary: var(--starasia-ui-color-green-200);
+  --starasia-ui-utility-success-tertiary: var(--starasia-ui-color-green-50);
+
+  /* danger */
+  --starasia-ui-utility-danger-default: var(--starasia-ui-color-red-600);
+  --starasia-ui-utility-danger-secondary: var(--starasia-ui-color-red-200);
+  --starasia-ui-utility-danger-tertiary: var(--starasia-ui-color-red-50);
+
+  /* warning */
+  --starasia-ui-utility-warning-default: var(--starasia-ui-color-orange-400);
+  --starasia-ui-utility-warning-secondary: var(--starasia-ui-color-orange-200);
+  --starasia-ui-utility-warning-tertiary: var(--starasia-ui-color-orange-50);
+
+  /* information */
+  --starasia-ui-utility-information-default: var(--starasia-ui-color-blue-600);
+  --starasia-ui-utility-information-secondary: var(
+    --starasia-ui-color-blue-200
+  );
+  --starasia-ui-utility-information-tertiary: var(--starasia-ui-color-blue-50);
+
+  /* dark */
+  --starasia-ui-utility-dark-default: var(--starasia-ui-color-gray-600);
+  --starasia-ui-utility-dark-secondary: var(--starasia-ui-color-gray-200);
+  --starasia-ui-utility-dark-tertiary: var(--starasia-ui-color-gray-50);
+
+  /* fill */
+  --starasia-ui-utility-fill-default: rgba(120, 134, 127, 0.2);
+  --starasia-ui-utility-fill-secondary: rgba(120, 134, 127, 0.16);
+  --starasia-ui-utility-fill-tertiary: rgba(120, 134, 127, 0.1);
+
+  /* color brand */
+  --starasia-ui-color-text: var(--starasia-ui-text-default);
+  --starasia-ui-color-text-light: #fffeff;
+  --starasia-ui-color-text-dark: #181a19;
+  --starasia-ui-color-text-muted: var(--starasia-ui-color-gray-500);
+
+  --starasia-ui-color-success: var(--starasia-ui-color-green-500);
+  /* --starasia-ui-color-error: var(--starasia-ui-color-red-500); */
+  --starasia-ui-color-error: #c9184a;
+  --starasia-ui-color-warning: var(--starasia-ui-color-yellow-500);
+  --starasia-ui-color-info: var(--starasia-ui-color-blue-500);
+
+  --starasia-ui-color-shadow: var(--starasia-ui-color-gray-900);
+
+  /* spacing */
+  /* spacing */
+  --starasia-ui-spacing-0: 0rem;
+  --starasia-ui-spacing-1: 0.063rem;
+  --starasia-ui-spacing-2: 0.125rem;
+  --starasia-ui-spacing-4: 0.25rem;
+  --starasia-ui-spacing-6: 0.375rem;
+  --starasia-ui-spacing-8: 0.5rem;
+  --starasia-ui-spacing-10: 0.625rem;
+  --starasia-ui-spacing-12: 0.75rem;
+  --starasia-ui-spacing-14: 0.875rem;
+  --starasia-ui-spacing-16: 1rem;
+  --starasia-ui-spacing-18: 1.125rem;
+  --starasia-ui-spacing-20: 1.25rem;
+  --starasia-ui-spacing-24: 1.5rem;
+  --starasia-ui-spacing-28: 1.75rem;
+  --starasia-ui-spacing-32: 2rem;
+  --starasia-ui-spacing-36: 2.25rem;
+  --starasia-ui-spacing-40: 2.5rem;
+  --starasia-ui-spacing-48: 3rem;
+  --starasia-ui-spacing-64: 4rem;
+  --starasia-ui-spacing-80: 5rem;
+  --starasia-ui-spacing-96: 6rem;
+  --starasia-ui-spacing-128: 8rem;
+  --starasia-ui-spacing-160: 10rem;
+  --starasia-ui-spacing-192: 12rem;
+  --starasia-ui-spacing-224: 14rem;
+  --starasia-ui-spacing-256: 16rem;
+
+  /* spacing by type */
+  --starasia-ui-spacing-xs: 0.25rem;
+  --starasia-ui-spacing-sm: 0.5rem;
+  --starasia-ui-spacing-md: 0.75rem;
+  --starasia-ui-spacing-lg: 1rem;
+  --starasia-ui-spacing-xl: 1.5rem;
+  --starasia-ui-spacing-2xl: 2rem;
+  --starasia-ui-spacing-3xl: 4rem;
+
+  /* font-size */
+  --starasia-ui-fontSizes-xs: 0.625rem;
+  /* 10px */
+  --starasia-ui-fontSizes-sm: 0.75rem;
+  /* 12px */
+  --starasia-ui-fontSizes-md: 0.875rem;
+  /* 14px */
+  --starasia-ui-fontSizes-lg: 1rem;
+  /* 16px */
+  --starasia-ui-fontSizes-xl: 1.125rem;
+  /* 18px */
+  --starasia-ui-fontSizes-2xl: 1.25rem;
+  /* 20px */
+  --starasia-ui-fontSizes-3xl: 1.5rem;
+  /* 24px */
+  --starasia-ui-fontSizes-4xl: 1.875rem;
+  /* 30px */
+  --starasia-ui-fontSizes-5xl: 2.25rem;
+  /* 36px */
+  --starasia-ui-fontSizes-6xl: 3rem;
+  /* 48px */
+
+  /* font-weight */
+  --starasia-ui-fontWeights-hairline: 50;
+  --starasia-ui-fontWeights-thin: 100;
+  --starasia-ui-fontWeights-light: 200;
+  --starasia-ui-fontWeights-normal: 300;
+  --starasia-ui-fontWeights-medium: 400;
+  --starasia-ui-fontWeights-semibold: 500;
+  --starasia-ui-fontWeights-bold: 600;
+  --starasia-ui-fontWeights-extrabold: 700;
+  --starasia-ui-fontWeights-black: 800;
+
+  /* line-height */
+  --starasia-ui-lineHeight-3: 0.75rem;
+  --starasia-ui-lineHeight-4: 1rem;
+  --starasia-ui-lineHeight-5: 1.25rem;
+  --starasia-ui-lineHeight-6: 1.5rem;
+  --starasia-ui-lineHeight-7: 1.75rem;
+  /* --starasia-ui-lineHeight-8: 2rem; */
+  --starasia-ui-lineHeight-8: 1.875rem;
+  --starasia-ui-lineHeight-9: 2.25rem;
+  --starasia-ui-lineHeight-10: 2.5rem;
+  --starasia-ui-lineHeight-none: 1;
+  --starasia-ui-lineHeight-tight: 1.25;
+  --starasia-ui-lineHeight-snug: 1.375;
+  --starasia-ui-lineHeight-normal: 1.5;
+  --starasia-ui-lineHeight-relaxed: 1.625;
+  --starasia-ui-lineHeight-loose: 2;
+
+  /* BORDER */
+  --starasia-ui-border: 1px;
+}
+
+/* FONTSIZES */
+/* FONT SIZE */
+.starasia-fontSizes-xs {
+  font-size: var(--starasia-ui-fontSizes-xs);
+}
+
+.starasia-fontSizes-sm {
+  font-size: var(--starasia-ui-fontSizes-sm);
+}
+
+.starasia-fontSizes-md {
+  font-size: var(--starasia-ui-fontSizes-md);
+}
+
+.starasia-fontSizes-lg {
+  font-size: var(--starasia-ui-fontSizes-lg);
+}
+
+.starasia-fontSizes-xl {
+  font-size: var(--starasia-ui-fontSizes-xl);
+}
+
+.starasia-fontSizes-2xl {
+  font-size: var(--starasia-ui-fontSizes-2xl);
+}
+
+.starasia-fontSizes-3xl {
+  font-size: var(--starasia-ui-fontSizes-3xl);
+}
+
+.starasia-fontSizes-4xl {
+  font-size: var(--starasia-ui-fontSizes-4xl);
+}
+
+.starasia-fontSizes-5xl {
+  font-size: var(--starasia-ui-fontSizes-5xl);
+}
+
+.starasia-fontSizes-6xl {
+  font-size: var(--starasia-ui-fontSizes-6xl);
+}
+
+/* FONT SIZE */
+.starasia-fontWeights-hairline {
+  font-weight: var(--starasia-ui-fontWeights-hairline);
+}
+
+.starasia-fontWeights-thin {
+  font-weight: var(--starasia-ui-fontWeights-thin);
+}
+
+.starasia-fontWeights-light {
+  font-weight: var(--starasia-ui-fontWeights-light);
+}
+
+.starasia-fontWeights-normal {
+  font-weight: var(--starasia-ui-fontWeights-normal);
+}
+
+.starasia-fontWeights-medium {
+  font-weight: var(--starasia-ui-fontWeights-medium);
+}
+
+.starasia-fontWeights-semibold {
+  font-weight: var(--starasia-ui-fontWeights-semibold);
+}
+
+.starasia-fontWeights-bold {
+  font-weight: var(--starasia-ui-fontWeights-bold);
+}
+
+.starasia-fontWeights-extrabold {
+  font-weight: var(--starasia-ui-fontWeights-extrabold);
+}
+
+.starasia-fontWeights-black {
+  font-weight: var(--starasia-ui-fontWeights-black);
+}
+
+/* TEXT ALIGN */
+.starasia-text-align-left {
+  text-align: left;
+}
+
+.starasia-text-align-center {
+  text-align: center;
+  width: 100%;
+}
+
+.starasia-text-align-right {
+  text-align: right;
+}
+
+/* TEXT COLORS */
+/* BRAND COLORS */
+.starasia-text-color-primary {
+  color: var(--starasia-ui-text-brand);
+}
+
+/* .starasia-text-color-secondary { */
+/*   color: var(--starasia-ui-color-secondary); */
+/* } */
+/**/
+/* .starasia-text-color-tertiary { */
+/*   color: var(--starasia-ui-color-tertiary); */
+/* } */
+
+.starasia-text-color-error {
+  color: var(--starasia-ui-color-error);
+}
+
+/* STATE COLORS */
+.starasia-text-color-default {
+  color: var(--starasia-ui-text-default);
+}
+
+.starasia-text-color-secondary {
+  color: var(--starasia-ui-text-secondary);
+}
+
+.starasia-text-color-tertiary {
+  color: var(--starasia-ui-text-tertiary);
+}
+
+.starasia-text-color-disable {
+  color: var(--starasia-ui-text-disable);
+}
+
+.starasia-text-color-white {
+  color: var(--starasia-ui-text-white);
+}
+
+.starasia-text-color-success {
+  color: var(--starasia-ui-text-success);
+}
+
+.starasia-text-color-success-secondary {
+  color: var(--starasia-ui-text-successSecondary);
+}
+
+.starasia-text-color-success-secondary {
+  color: var(--starasia-ui-text-successSecondary);
+}
+
+.starasia-text-color-success-disable {
+  color: var(--starasia-ui-text-successDisable);
+}
+
+.starasia-text-color-danger {
+  color: var(--starasia-ui-text-danger);
+}
+
+.starasia-text-color-danger-secondary {
+  color: var(--starasia-ui-text-dangerSecondary);
+}
+
+.starasia-text-color-danger-disable {
+  color: var(--starasia-ui-text-dangerDisable);
+}
+
+.starasia-text-color-brand {
+  color: var(--starasia-ui-text-brand);
+}
+
+.starasia-text-color-brand-secondary {
+  color: var(--starasia-ui-text-brandSecondary);
+}
+
+.starasia-text-color-info {
+  color: var(--starasia-ui-text-info);
+}
+
+.starasia-text-color-info-secondary {
+  color: var(--starasia-ui-text-infoSecondary);
+}
+
+.starasia-text-color-warning {
+  color: var(--starasia-ui-text-warning);
+}
+
+.starasia-text-color-warning-disable {
+  color: var(--starasia-ui-text-warningDisable);
+}
+
+/* TEXT COLORS */
+.starasia-text-color-text {
+  color: var(--starasia-ui-color-text);
+}
+
+.starasia-text-color-text-light {
+  color: var(--starasia-ui-color-text-light);
+}
+
+.starasia-text-color-text-muted {
+  color: var(--starasia-ui-color-text-muted);
+}
+
+/* gray color */
+
+.starasia-text-color-gray-50 {
+  color: var(--starasia-ui-color-gray-50);
+}
+
+.starasia-text-color-gray-100 {
+  color: var(--starasia-ui-color-gray-100);
+}
+
+.starasia-text-color-gray-200 {
+  color: var(--starasia-ui-color-gray-200);
+}
+
+.starasia-text-color-gray-300 {
+  color: var(--starasia-ui-color-gray-300);
+}
+
+.starasia-text-color-gray-400 {
+  color: var(--starasia-ui-color-gray-400);
+}
+
+.starasia-text-color-gray-500 {
+  color: var(--starasia-ui-color-gray-500);
+}
+
+.starasia-text-color-gray-600 {
+  color: var(--starasia-ui-color-gray-600);
+}
+
+.starasia-text-color-gray-700 {
+  color: var(--starasia-ui-color-gray-700);
+}
+
+.starasia-text-color-gray-800 {
+  color: var(--starasia-ui-color-gray-800);
+}
+
+.starasia-text-color-gray-900 {
+  color: var(--starasia-ui-color-gray-900);
+}
+
+.starasia-text-color-gray-950 {
+  color: var(--starasia-ui-color-gray-950);
+}
+
+/* aloha color */
+
+.starasia-text-color-aloha-50 {
+  color: var(--starasia-ui-color-aloha-50);
+}
+
+.starasia-text-color-aloha-100 {
+  color: var(--starasia-ui-color-aloha-100);
+}
+
+.starasia-text-color-aloha-200 {
+  color: var(--starasia-ui-color-aloha-200);
+}
+
+.starasia-text-color-aloha-300 {
+  color: var(--starasia-ui-color-aloha-300);
+}
+
+.starasia-text-color-aloha-400 {
+  color: var(--starasia-ui-color-aloha-400);
+}
+
+.starasia-text-color-aloha-500 {
+  color: var(--starasia-ui-color-aloha-500);
+}
+
+.starasia-text-color-aloha-600 {
+  color: var(--starasia-ui-color-aloha-600);
+}
+
+.starasia-text-color-aloha-700 {
+  color: var(--starasia-ui-color-aloha-700);
+}
+
+.starasia-text-color-aloha-800 {
+  color: var(--starasia-ui-color-aloha-800);
+}
+
+.starasia-text-color-aloha-900 {
+  color: var(--starasia-ui-color-aloha-900);
+}
+
+/* pink color */
+
+.starasia-text-color-pink-50 {
+  color: var(--starasia-ui-color-pink-50);
+}
+
+.starasia-text-color-pink-100 {
+  color: var(--starasia-ui-color-pink-100);
+}
+
+.starasia-text-color-pink-200 {
+  color: var(--starasia-ui-color-pink-200);
+}
+
+.starasia-text-color-pink-300 {
+  color: var(--starasia-ui-color-pink-300);
+}
+
+.starasia-text-color-pink-400 {
+  color: var(--starasia-ui-color-pink-400);
+}
+
+.starasia-text-color-pink-500 {
+  color: var(--starasia-ui-color-pink-500);
+}
+
+.starasia-text-color-pink-600 {
+  color: var(--starasia-ui-color-pink-600);
+}
+
+.starasia-text-color-pink-700 {
+  color: var(--starasia-ui-color-pink-700);
+}
+
+.starasia-text-color-pink-800 {
+  color: var(--starasia-ui-color-pink-800);
+}
+
+.starasia-text-color-pink-900 {
+  color: var(--starasia-ui-color-pink-900);
+}
+
+/* red color */
+
+.starasia-text-color-red-50 {
+  color: var(--starasia-ui-color-red-50);
+}
+
+.starasia-text-color-red-100 {
+  color: var(--starasia-ui-color-red-100);
+}
+
+.starasia-text-color-red-200 {
+  color: var(--starasia-ui-color-red-200);
+}
+
+.starasia-text-color-red-300 {
+  color: var(--starasia-ui-color-red-300);
+}
+
+.starasia-text-color-red-400 {
+  color: var(--starasia-ui-color-red-400);
+}
+
+.starasia-text-color-red-500 {
+  color: var(--starasia-ui-color-red-500);
+}
+
+.starasia-text-color-red-600 {
+  color: var(--starasia-ui-color-red-600);
+}
+
+.starasia-text-color-red-700 {
+  color: var(--starasia-ui-color-red-700);
+}
+
+.starasia-text-color-red-800 {
+  color: var(--starasia-ui-color-red-800);
+}
+
+.starasia-text-color-red-900 {
+  color: var(--starasia-ui-color-red-900);
+}
+
+.starasia-text-color-red-950 {
+  color: var(--starasia-ui-color-red-950);
+}
+
+/* orange color */
+
+.starasia-text-color-orange-50 {
+  color: var(--starasia-ui-color-orange-50);
+}
+
+.starasia-text-color-orange-100 {
+  color: var(--starasia-ui-color-orange-100);
+}
+
+.starasia-text-color-orange-200 {
+  color: var(--starasia-ui-color-orange-200);
+}
+
+.starasia-text-color-orange-300 {
+  color: var(--starasia-ui-color-orange-300);
+}
+
+.starasia-text-color-orange-400 {
+  color: var(--starasia-ui-color-orange-400);
+}
+
+.starasia-text-color-orange-500 {
+  color: var(--starasia-ui-color-orange-500);
+}
+
+.starasia-text-color-orange-600 {
+  color: var(--starasia-ui-color-orange-600);
+}
+
+.starasia-text-color-orange-700 {
+  color: var(--starasia-ui-color-orange-700);
+}
+
+.starasia-text-color-orange-800 {
+  color: var(--starasia-ui-color-orange-800);
+}
+
+.starasia-text-color-orange-900 {
+  color: var(--starasia-ui-color-orange-900);
+}
+
+.starasia-text-color-orange-950 {
+  color: var(--starasia-ui-color-orange-950);
+}
+
+/* yellow color */
+
+.starasia-text-color-yellow-50 {
+  color: var(--starasia-ui-color-yellow-50);
+}
+
+.starasia-text-color-yellow-100 {
+  color: var(--starasia-ui-color-yellow-100);
+}
+
+.starasia-text-color-yellow-200 {
+  color: var(--starasia-ui-color-yellow-200);
+}
+
+.starasia-text-color-yellow-300 {
+  color: var(--starasia-ui-color-yellow-300);
+}
+
+.starasia-text-color-yellow-400 {
+  color: var(--starasia-ui-color-yellow-400);
+}
+
+.starasia-text-color-yellow-500 {
+  color: var(--starasia-ui-color-yellow-500);
+}
+
+.starasia-text-color-yellow-600 {
+  color: var(--starasia-ui-color-yellow-600);
+}
+
+.starasia-text-color-yellow-700 {
+  color: var(--starasia-ui-color-yellow-700);
+}
+
+.starasia-text-color-yellow-800 {
+  color: var(--starasia-ui-color-yellow-800);
+}
+
+.starasia-text-color-yellow-900 {
+  color: var(--starasia-ui-color-yellow-900);
+}
+
+.starasia-text-color-yellow-950 {
+  color: var(--starasia-ui-color-yellow-950);
+}
+
+/* green color */
+
+.starasia-text-color-green-50 {
+  color: var(--starasia-ui-color-green-50);
+}
+
+.starasia-text-color-green-100 {
+  color: var(--starasia-ui-color-green-100);
+}
+
+.starasia-text-color-green-200 {
+  color: var(--starasia-ui-color-green-200);
+}
+
+.starasia-text-color-green-300 {
+  color: var(--starasia-ui-color-green-300);
+}
+
+.starasia-text-color-green-400 {
+  color: var(--starasia-ui-color-green-400);
+}
+
+.starasia-text-color-green-500 {
+  color: var(--starasia-ui-color-green-500);
+}
+
+.starasia-text-color-green-600 {
+  color: var(--starasia-ui-color-green-600);
+}
+
+.starasia-text-color-green-700 {
+  color: var(--starasia-ui-color-green-700);
+}
+
+.starasia-text-color-green-800 {
+  color: var(--starasia-ui-color-green-800);
+}
+
+.starasia-text-color-green-900 {
+  color: var(--starasia-ui-color-green-900);
+}
+
+.starasia-text-color-green-950 {
+  color: var(--starasia-ui-color-green-950);
+}
+
+/* blue color */
+
+.starasia-text-color-blue-50 {
+  color: var(--starasia-ui-color-blue-50);
+}
+
+.starasia-text-color-blue-100 {
+  color: var(--starasia-ui-color-blue-100);
+}
+
+.starasia-text-color-blue-200 {
+  color: var(--starasia-ui-color-blue-200);
+}
+
+.starasia-text-color-blue-300 {
+  color: var(--starasia-ui-color-blue-300);
+}
+
+.starasia-text-color-blue-400 {
+  color: var(--starasia-ui-color-blue-400);
+}
+
+.starasia-text-color-blue-500 {
+  color: var(--starasia-ui-color-blue-500);
+}
+
+.starasia-text-color-blue-600 {
+  color: var(--starasia-ui-color-blue-600);
+}
+
+.starasia-text-color-blue-700 {
+  color: var(--starasia-ui-color-blue-700);
+}
+
+.starasia-text-color-blue-800 {
+  color: var(--starasia-ui-color-blue-800);
+}
+
+.starasia-text-color-blue-900 {
+  color: var(--starasia-ui-color-blue-900);
+}
+
+.starasia-text-color-blue-950 {
+  color: var(--starasia-ui-color-blue-950);
+}
+
+/* purple color */
+
+.starasia-text-color-purple-50 {
+  color: var(--starasia-ui-color-purple-50);
+}
+
+.starasia-text-color-purple-100 {
+  color: var(--starasia-ui-color-purple-100);
+}
+
+.starasia-text-color-purple-200 {
+  color: var(--starasia-ui-color-purple-200);
+}
+
+.starasia-text-color-purple-300 {
+  color: var(--starasia-ui-color-purple-300);
+}
+
+.starasia-text-color-purple-400 {
+  color: var(--starasia-ui-color-purple-400);
+}
+
+.starasia-text-color-purple-500 {
+  color: var(--starasia-ui-color-purple-500);
+}
+
+.starasia-text-color-purple-600 {
+  color: var(--starasia-ui-color-purple-600);
+}
+
+.starasia-text-color-purple-700 {
+  color: var(--starasia-ui-color-purple-700);
+}
+
+.starasia-text-color-purple-800 {
+  color: var(--starasia-ui-color-purple-800);
+}
+
+.starasia-text-color-purple-900 {
+  color: var(--starasia-ui-color-purple-900);
+}
+
+.starasia-text-color-purple-950 {
+  color: var(--starasia-ui-color-purple-950);
+}
+
+.starasia-margin-xs {
+  margin: var(--starasia-ui-spacing-xs);
+}
+
+.starasia-margin-auto {
+  margin: auto;
+}
+
+.starasia-margin-sm {
+  margin: var(--starasia-ui-spacing-sm);
+}
+
+.starasia-margin-md {
+  margin: var(--starasia-ui-spacing-md);
+}
+
+.starasia-margin-lg {
+  margin: var(--starasia-ui-spacing-lg);
+}
+
+.starasia-margin-xl {
+  margin: var(--starasia-ui-spacing-xl);
+}
+
+.starasia-margin-2xl {
+  margin: var(--starasia-ui-spacing-2xl);
+}
+
+.starasia-margin-3xl {
+  margin: var(--starasia-ui-spacing-3xl);
+}
+
+.starasia-margin-spacing-0 {
+  margin: 0;
+}
+
+.starasia-margin-spacing-1 {
+  margin: var(--starasia-ui-spacing-1);
+}
+
+.starasia-margin-spacing-2 {
+  margin: var(--starasia-ui-spacing-2);
+}
+
+.starasia-margin-spacing-3 {
+  margin: var(--starasia-ui-spacing-3);
+}
+
+.starasia-margin-spacing-4 {
+  margin: var(--starasia-ui-spacing-4);
+}
+
+.starasia-margin-spacing-5 {
+  margin: var(--starasia-ui-spacing-5);
+}
+
+.starasia-margin-spacing-6 {
+  margin: var(--starasia-ui-spacing-6);
+}
+
+.starasia-margin-spacing-8 {
+  margin: var(--starasia-ui-spacing-8);
+}
+
+.starasia-margin-spacing-10 {
+  margin: var(--starasia-ui-spacing-10);
+}
+
+.starasia-margin-spacing-12 {
+  margin: var(--starasia-ui-spacing-12);
+}
+
+.starasia-margin-spacing-14 {
+  margin: var(--starasia-ui-spacing-14);
+}
+
+.starasia-margin-spacing-16 {
+  margin: var(--starasia-ui-spacing-16);
+}
+
+.starasia-margin-spacing-18 {
+  margin: var(--starasia-ui-spacing-18);
+}
+
+.starasia-margin-spacing-20 {
+  margin: var(--starasia-ui-spacing-20);
+}
+
+.starasia-margin-spacing-24 {
+  margin: var(--starasia-ui-spacing-24);
+}
+
+.starasia-margin-spacing-28 {
+  margin: var(--starasia-ui-spacing-28);
+}
+
+.starasia-margin-spacing-32 {
+  margin: var(--starasia-ui-spacing-32);
+}
+
+.starasia-margin-spacing-36 {
+  margin: var(--starasia-ui-spacing-36);
+}
+
+.starasia-margin-spacing-40 {
+  margin: var(--starasia-ui-spacing-40);
+}
+
+.starasia-margin-spacing-48 {
+  margin: var(--starasia-ui-spacing-48);
+}
+
+.starasia-margin-spacing-56 {
+  margin: var(--starasia-ui-spacing-56);
+}
+
+.starasia-margin-spacing-64 {
+  margin: var(--starasia-ui-spacing-64);
+}
+
+.starasia-margin-spacing-80 {
+  margin: var(--starasia-ui-spacing-80);
+}
+
+.starasia-margin-spacing-96 {
+  margin: var(--starasia-ui-spacing-96);
+}
+
+.starasia-margin-spacing-128 {
+  margin: var(--starasia-ui-spacing-128);
+}
+
+.starasia-margin-spacing-160 {
+  margin: var(--starasia-ui-spacing-160);
+}
+
+.starasia-margin-spacing-192 {
+  margin: var(--starasia-ui-spacing-192);
+}
+
+.starasia-margin-spacing-224 {
+  margin: var(--starasia-ui-spacing-224);
+}
+
+.starasia-margin-spacing-256 {
+  margin: var(--starasia-ui-spacing-256);
+}
+
+/* MARGIN TOP */
+.starasia-margin-top-xs {
+  margin-top: var(--starasia-ui-spacing-xs);
+}
+
+.starasia-margin-top-sm {
+  margin-top: var(--starasia-ui-spacing-sm);
+}
+
+.starasia-margin-top-md {
+  margin-top: var(--starasia-ui-spacing-md);
+}
+
+.starasia-margin-top-lg {
+  margin-top: var(--starasia-ui-spacing-lg);
+}
+
+.starasia-margin-top-xl {
+  margin-top: var(--starasia-ui-spacing-xl);
+}
+
+.starasia-margin-top-2xl {
+  margin-top: var(--starasia-ui-spacing-2xl);
+}
+
+.starasia-margin-top-3xl {
+  margin-top: var(--starasia-ui-spacing-3xl);
+}
+
+.starasia-margin-top-spacing-0 {
+  margin-top: 0;
+}
+
+.starasia-margin-top-spacing-1 {
+  margin-top: var(--starasia-ui-spacing-1);
+}
+
+.starasia-margin-top-spacing-2 {
+  margin-top: var(--starasia-ui-spacing-2);
+}
+
+.starasia-margin-top-spacing-3 {
+  margin-top: var(--starasia-ui-spacing-3);
+}
+
+.starasia-margin-top-spacing-4 {
+  margin-top: var(--starasia-ui-spacing-4);
+}
+
+.starasia-margin-top-spacing-5 {
+  margin-top: var(--starasia-ui-spacing-5);
+}
+
+.starasia-margin-top-spacing-6 {
+  margin-top: var(--starasia-ui-spacing-6);
+}
+
+.starasia-margin-top-spacing-8 {
+  margin-top: var(--starasia-ui-spacing-8);
+}
+
+.starasia-margin-top-spacing-10 {
+  margin-top: var(--starasia-ui-spacing-10);
+}
+
+.starasia-margin-top-spacing-12 {
+  margin-top: var(--starasia-ui-spacing-12);
+}
+
+.starasia-margin-top-spacing-14 {
+  margin-top: var(--starasia-ui-spacing-14);
+}
+
+.starasia-margin-top-spacing-16 {
+  margin-top: var(--starasia-ui-spacing-16);
+}
+
+.starasia-margin-top-spacing-18 {
+  margin-top: var(--starasia-ui-spacing-18);
+}
+
+.starasia-margin-top-spacing-20 {
+  margin-top: var(--starasia-ui-spacing-20);
+}
+
+.starasia-margin-top-spacing-24 {
+  margin-top: var(--starasia-ui-spacing-24);
+}
+
+.starasia-margin-top-spacing-28 {
+  margin-top: var(--starasia-ui-spacing-28);
+}
+
+.starasia-margin-top-spacing-32 {
+  margin-top: var(--starasia-ui-spacing-32);
+}
+
+.starasia-margin-top-spacing-36 {
+  margin-top: var(--starasia-ui-spacing-36);
+}
+
+.starasia-margin-top-spacing-40 {
+  margin-top: var(--starasia-ui-spacing-40);
+}
+
+.starasia-margin-top-spacing-48 {
+  margin-top: var(--starasia-ui-spacing-48);
+}
+
+.starasia-margin-top-spacing-56 {
+  margin-top: var(--starasia-ui-spacing-56);
+}
+
+.starasia-margin-top-spacing-64 {
+  margin-top: var(--starasia-ui-spacing-64);
+}
+
+.starasia-margin-top-spacing-80 {
+  margin-top: var(--starasia-ui-spacing-80);
+}
+
+.starasia-margin-top-spacing-96 {
+  margin-top: var(--starasia-ui-spacing-96);
+}
+
+.starasia-margin-top-spacing-128 {
+  margin-top: var(--starasia-ui-spacing-128);
+}
+
+.starasia-margin-top-spacing-160 {
+  margin-top: var(--starasia-ui-spacing-160);
+}
+
+.starasia-margin-top-spacing-192 {
+  margin-top: var(--starasia-ui-spacing-192);
+}
+
+.starasia-margin-top-spacing-224 {
+  margin-top: var(--starasia-ui-spacing-224);
+}
+
+.starasia-margin-top-spacing-256 {
+  margin-top: var(--starasia-ui-spacing-256);
+}
+
+/* MARGIN RIGHT */
+.starasia-margin-right-xs {
+  margin-right: var(--starasia-ui-spacing-xs);
+}
+
+.starasia-margin-right-sm {
+  margin-right: var(--starasia-ui-spacing-sm);
+}
+
+.starasia-margin-right-md {
+  margin-right: var(--starasia-ui-spacing-md);
+}
+
+.starasia-margin-right-lg {
+  margin-right: var(--starasia-ui-spacing-lg);
+}
+
+.starasia-margin-right-xl {
+  margin-right: var(--starasia-ui-spacing-xl);
+}
+
+.starasia-margin-right-2xl {
+  margin-right: var(--starasia-ui-spacing-2xl);
+}
+
+.starasia-margin-right-3xl {
+  margin-right: var(--starasia-ui-spacing-3xl);
+}
+
+.starasia-margin-right-spacing-0 {
+  margin-right: 0;
+}
+
+.starasia-margin-right-spacing-1 {
+  margin-right: var(--starasia-ui-spacing-1);
+}
+
+.starasia-margin-right-spacing-2 {
+  margin-right: var(--starasia-ui-spacing-2);
+}
+
+.starasia-margin-right-spacing-3 {
+  margin-right: var(--starasia-ui-spacing-3);
+}
+
+.starasia-margin-right-spacing-4 {
+  margin-right: var(--starasia-ui-spacing-4);
+}
+
+.starasia-margin-right-spacing-5 {
+  margin-right: var(--starasia-ui-spacing-5);
+}
+
+.starasia-margin-right-spacing-6 {
+  margin-right: var(--starasia-ui-spacing-6);
+}
+
+.starasia-margin-right-spacing-8 {
+  margin-right: var(--starasia-ui-spacing-8);
+}
+
+.starasia-margin-right-spacing-10 {
+  margin-right: var(--starasia-ui-spacing-10);
+}
+
+.starasia-margin-right-spacing-12 {
+  margin-right: var(--starasia-ui-spacing-12);
+}
+
+.starasia-margin-right-spacing-14 {
+  margin-right: var(--starasia-ui-spacing-14);
+}
+
+.starasia-margin-right-spacing-16 {
+  margin-right: var(--starasia-ui-spacing-16);
+}
+
+.starasia-margin-right-spacing-18 {
+  margin-right: var(--starasia-ui-spacing-18);
+}
+
+.starasia-margin-right-spacing-20 {
+  margin-right: var(--starasia-ui-spacing-20);
+}
+
+.starasia-margin-right-spacing-24 {
+  margin-right: var(--starasia-ui-spacing-24);
+}
+
+.starasia-margin-right-spacing-28 {
+  margin-right: var(--starasia-ui-spacing-28);
+}
+
+.starasia-margin-right-spacing-32 {
+  margin-right: var(--starasia-ui-spacing-32);
+}
+
+.starasia-margin-right-spacing-36 {
+  margin-right: var(--starasia-ui-spacing-36);
+}
+
+.starasia-margin-right-spacing-40 {
+  margin-right: var(--starasia-ui-spacing-40);
+}
+
+.starasia-margin-right-spacing-48 {
+  margin-right: var(--starasia-ui-spacing-48);
+}
+
+.starasia-margin-right-spacing-56 {
+  margin-right: var(--starasia-ui-spacing-56);
+}
+
+.starasia-margin-right-spacing-64 {
+  margin-right: var(--starasia-ui-spacing-64);
+}
+
+.starasia-margin-right-spacing-80 {
+  margin-right: var(--starasia-ui-spacing-80);
+}
+
+.starasia-margin-right-spacing-96 {
+  margin-right: var(--starasia-ui-spacing-96);
+}
+
+.starasia-margin-right-spacing-128 {
+  margin-right: var(--starasia-ui-spacing-128);
+}
+
+.starasia-margin-right-spacing-160 {
+  margin-right: var(--starasia-ui-spacing-160);
+}
+
+.starasia-margin-right-spacing-192 {
+  margin-right: var(--starasia-ui-spacing-192);
+}
+
+.starasia-margin-right-spacing-224 {
+  margin-right: var(--starasia-ui-spacing-224);
+}
+
+.starasia-margin-right-spacing-256 {
+  margin-right: var(--starasia-ui-spacing-256);
+}
+
+/* MARGIN BOTTOM */
+.starasia-margin-bottom-xs {
+  margin-bottom: var(--starasia-ui-spacing-xs);
+}
+
+.starasia-margin-bottom-sm {
+  margin-bottom: var(--starasia-ui-spacing-sm);
+}
+
+.starasia-margin-bottom-md {
+  margin-bottom: var(--starasia-ui-spacing-md);
+}
+
+.starasia-margin-bottom-lg {
+  margin-bottom: var(--starasia-ui-spacing-lg);
+}
+
+.starasia-margin-bottom-xl {
+  margin-bottom: var(--starasia-ui-spacing-xl);
+}
+
+.starasia-margin-bottom-2xl {
+  margin-bottom: var(--starasia-ui-spacing-2xl);
+}
+
+.starasia-margin-bottom-3xl {
+  margin-bottom: var(--starasia-ui-spacing-3xl);
+}
+
+.starasia-margin-bottom-spacing-0 {
+  margin-bottom: 0;
+}
+
+.starasia-margin-bottom-spacing-1 {
+  margin-bottom: var(--starasia-ui-spacing-1);
+}
+
+.starasia-margin-bottom-spacing-2 {
+  margin-bottom: var(--starasia-ui-spacing-2);
+}
+
+.starasia-margin-bottom-spacing-3 {
+  margin-bottom: var(--starasia-ui-spacing-3);
+}
+
+.starasia-margin-bottom-spacing-4 {
+  margin-bottom: var(--starasia-ui-spacing-4);
+}
+
+.starasia-margin-bottom-spacing-5 {
+  margin-bottom: var(--starasia-ui-spacing-5);
+}
+
+.starasia-margin-bottom-spacing-6 {
+  margin-bottom: var(--starasia-ui-spacing-6);
+}
+
+.starasia-margin-bottom-spacing-8 {
+  margin-bottom: var(--starasia-ui-spacing-8);
+}
+
+.starasia-margin-bottom-spacing-10 {
+  margin-bottom: var(--starasia-ui-spacing-10);
+}
+
+.starasia-margin-bottom-spacing-12 {
+  margin-bottom: var(--starasia-ui-spacing-12);
+}
+
+.starasia-margin-bottom-spacing-14 {
+  margin-bottom: var(--starasia-ui-spacing-14);
+}
+
+.starasia-margin-bottom-spacing-16 {
+  margin-bottom: var(--starasia-ui-spacing-16);
+}
+
+.starasia-margin-bottom-spacing-18 {
+  margin-bottom: var(--starasia-ui-spacing-18);
+}
+
+.starasia-margin-bottom-spacing-20 {
+  margin-bottom: var(--starasia-ui-spacing-20);
+}
+
+.starasia-margin-bottom-spacing-24 {
+  margin-bottom: var(--starasia-ui-spacing-24);
+}
+
+.starasia-margin-bottom-spacing-28 {
+  margin-bottom: var(--starasia-ui-spacing-28);
+}
+
+.starasia-margin-bottom-spacing-32 {
+  margin-bottom: var(--starasia-ui-spacing-32);
+}
+
+.starasia-margin-bottom-spacing-36 {
+  margin-bottom: var(--starasia-ui-spacing-36);
+}
+
+.starasia-margin-bottom-spacing-40 {
+  margin-bottom: var(--starasia-ui-spacing-40);
+}
+
+.starasia-margin-bottom-spacing-48 {
+  margin-bottom: var(--starasia-ui-spacing-48);
+}
+
+.starasia-margin-bottom-spacing-56 {
+  margin-bottom: var(--starasia-ui-spacing-56);
+}
+
+.starasia-margin-bottom-spacing-64 {
+  margin-bottom: var(--starasia-ui-spacing-64);
+}
+
+.starasia-margin-bottom-spacing-80 {
+  margin-bottom: var(--starasia-ui-spacing-80);
+}
+
+.starasia-margin-bottom-spacing-96 {
+  margin-bottom: var(--starasia-ui-spacing-96);
+}
+
+.starasia-margin-bottom-spacing-128 {
+  margin-bottom: var(--starasia-ui-spacing-128);
+}
+
+.starasia-margin-bottom-spacing-160 {
+  margin-bottom: var(--starasia-ui-spacing-160);
+}
+
+.starasia-margin-bottom-spacing-192 {
+  margin-bottom: var(--starasia-ui-spacing-192);
+}
+
+.starasia-margin-bottom-spacing-224 {
+  margin-bottom: var(--starasia-ui-spacing-224);
+}
+
+.starasia-margin-bottom-spacing-256 {
+  margin-bottom: var(--starasia-ui-spacing-256);
+}
+
+/* MARGIN LEFT */
+.starasia-margin-left-xs {
+  margin-left: var(--starasia-ui-spacing-xs);
+  /* 0.25rem */
+}
+
+.starasia-margin-left-sm {
+  margin-left: var(--starasia-ui-spacing-sm);
+  /* 0.5rem */
+}
+
+.starasia-margin-left-md {
+  margin-left: var(--starasia-ui-spacing-md);
+  /* 0.75rem */
+}
+
+.starasia-margin-left-lg {
+  margin-left: var(--starasia-ui-spacing-lg);
+  /* 1rem */
+}
+
+.starasia-margin-left-xl {
+  margin-left: var(--starasia-ui-spacing-xl);
+  /* 1.5rem */
+}
+
+.starasia-margin-left-2xl {
+  margin-left: var(--starasia-ui-spacing-2xl);
+  /* 2rem */
+}
+
+.starasia-margin-left-3xl {
+  margin-left: var(--starasia-ui-spacing-3xl);
+  /* 4rem */
+}
+
+.starasia-margin-left-spacing-0 {
+  margin-left: 0;
+}
+
+.starasia-margin-left-spacing-1 {
+  margin-left: var(--starasia-ui-spacing-1);
+  /* 0.063rem */
+}
+
+.starasia-margin-left-spacing-2 {
+  margin-left: var(--starasia-ui-spacing-2);
+  /* 0.125rem */
+}
+
+.starasia-margin-left-spacing-4 {
+  margin-left: var(--starasia-ui-spacing-4);
+  /* 0.25rem */
+}
+
+.starasia-margin-left-spacing-6 {
+  margin-left: var(--starasia-ui-spacing-6);
+  /* 0.375rem */
+}
+
+.starasia-margin-left-spacing-8 {
+  margin-left: var(--starasia-ui-spacing-8);
+  /* 0.5rem */
+}
+
+.starasia-margin-left-spacing-10 {
+  margin-left: var(--starasia-ui-spacing-10);
+  /* 0.625rem */
+}
+
+.starasia-margin-left-spacing-12 {
+  margin-left: var(--starasia-ui-spacing-12);
+  /* 0.75rem */
+}
+
+.starasia-margin-left-spacing-14 {
+  margin-left: var(--starasia-ui-spacing-14);
+  /* 0.875rem */
+}
+
+.starasia-margin-left-spacing-16 {
+  margin-left: var(--starasia-ui-spacing-16);
+  /* 1rem */
+}
+
+.starasia-margin-left-spacing-18 {
+  margin-left: var(--starasia-ui-spacing-18);
+  /* 1.125rem */
+}
+
+.starasia-margin-left-spacing-20 {
+  margin-left: var(--starasia-ui-spacing-20);
+  /* 1.25rem */
+}
+
+.starasia-margin-left-spacing-24 {
+  margin-left: var(--starasia-ui-spacing-24);
+  /* 1.5rem */
+}
+
+.starasia-margin-left-spacing-28 {
+  margin-left: var(--starasia-ui-spacing-28);
+  /* 1.75rem */
+}
+
+.starasia-margin-left-spacing-32 {
+  margin-left: var(--starasia-ui-spacing-32);
+  /* 2rem */
+}
+
+.starasia-margin-left-spacing-36 {
+  margin-left: var(--starasia-ui-spacing-36);
+  /* 2.25rem */
+}
+
+.starasia-margin-left-spacing-40 {
+  margin-left: var(--starasia-ui-spacing-40);
+  /* 2.5rem */
+}
+
+.starasia-margin-left-spacing-48 {
+  margin-left: var(--starasia-ui-spacing-48);
+  /* 3rem */
+}
+
+.starasia-margin-left-spacing-64 {
+  margin-left: var(--starasia-ui-spacing-64);
+  /* 4rem */
+}
+
+.starasia-margin-left-spacing-80 {
+  margin-left: var(--starasia-ui-spacing-80);
+  /* 5rem */
+}
+
+.starasia-margin-left-spacing-96 {
+  margin-left: var(--starasia-ui-spacing-96);
+  /* 6rem */
+}
+
+.starasia-margin-left-spacing-128 {
+  margin-left: var(--starasia-ui-spacing-128);
+  /* 8rem */
+}
+
+.starasia-margin-left-spacing-160 {
+  margin-left: var(--starasia-ui-spacing-160);
+  /* 10rem */
+}
+
+.starasia-margin-left-spacing-192 {
+  margin-left: var(--starasia-ui-spacing-192);
+  /* 12rem */
+}
+
+.starasia-margin-left-spacing-224 {
+  margin-left: var(--starasia-ui-spacing-224);
+  /* 14rem */
+}
+
+.starasia-margin-left-spacing-256 {
+  margin-left: var(--starasia-ui-spacing-256);
+  /* 16rem */
+}
+
+.starasia-leading-3 {
+  line-height: var(--starasia-ui-lineHeight-3);
+}
+
+.starasia-leading-4 {
+  line-height: var(--starasia-ui-lineHeight-4);
+}
+
+.starasia-leading-5 {
+  line-height: var(--starasia-ui-lineHeight-5);
+}
+
+.starasia-leading-6 {
+  line-height: var(--starasia-ui-lineHeight-6);
+}
+
+.starasia-leading-7 {
+  line-height: var(--starasia-ui-lineHeight-7);
+}
+
+.starasia-leading-8 {
+  line-height: var(--starasia-ui-lineHeight-8);
+}
+
+.starasia-leading-9 {
+  line-height: var(--starasia-ui-lineHeight-9);
+}
+
+.starasia-leading-10 {
+  line-height: var(--starasia-ui-lineHeight-10);
+}
+
+.starasia-leading-none {
+  line-height: var(--starasia-ui-lineHeight-none);
+}
+
+.starasia-leading-tight {
+  line-height: var(--starasia-ui-lineHeight-tight);
+}
+
+.starasia-leading-snug {
+  line-height: var(--starasia-ui-lineHeight-snug);
+}
+
+.starasia-leading-normal {
+  line-height: var(--starasia-ui-lineHeight-normal);
+}
+
+.starasia-leading-relaxed {
+  line-height: var(--starasia-ui-lineHeight-relaxed);
+}
+
+.starasia-leading-loose {
+  line-height: var(--starasia-ui-lineHeight-loose);
+}
+
+/* type */
+.starasia-text-h1 {
+  /* font-size: var(--starasia-ui-fontSizes-2xl); */
+  font-size: 32px;
+  font-weight: var(--starasia-ui-fontWeights-semibold);
+}
+
+.starasia-text-h2 {
+  font-size: var(--starasia-ui-fontSizes-3xl);
+  font-weight: var(--starasia-ui-fontWeights-semibold);
+}
+
+.starasia-text-h3 {
+  font-size: var(--starasia-ui-fontSizes-2xl);
+  font-weight: var(--starasia-ui-fontWeights-semibold);
+}
+
+.starasia-text-h4 {
+  font-size: var(--starasia-ui-fontSizes-lg);
+  font-weight: var(--starasia-ui-fontWeights-semibold);
+}
+
+.starasia-text-h5 {
+  font-size: var(--starasia-ui-fontSizes-md);
+  font-weight: var(--starasia-ui-fontWeights-semibold);
+}
+
+.starasia-text-h6 {
+  font-size: var(--starasia-ui-fontSizes-sm);
+  font-weight: var(--starasia-ui-fontWeights-semibold);
+}
+
+.starasia-text-sub-h1 {
+  font-size: var(--starasia-ui-fontSizes-xl);
+  font-weight: var(--starasia-ui-fontWeights-medium);
+}
+
+.starasia-text-sub-h2 {
+  font-size: var(--starasia-ui-fontSizes-lg);
+  font-weight: var(--starasia-ui-fontWeights-medium);
+}
+
+.starasia-text-sub-h3 {
+  font-size: var(--starasia-ui-fontSizes-md);
+  font-weight: var(--starasia-ui-fontWeights-medium);
+}
+
+.starasia-text-body-1 {
+  font-size: var(--starasia-ui-fontSizes-md);
+  font-weight: var(--starasia-ui-fontWeights-normal);
+}
+
+.starasia-text-body-2 {
+  font-size: var(--starasia-ui-fontSizes-sm);
+  font-weight: var(--starasia-ui-fontWeights-medium);
+}
+
+.starasia-text-body-3 {
+  font-size: var(--starasia-ui-fontSizes-sm);
+  font-weight: var(--starasia-ui-fontWeights-normal);
+}
+
+.starasia-text-truncate {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+`, N = (n) => !Number(n) && Number(n) !== 0 ? n : new Intl.NumberFormat("id-ID", {
+  style: "currency",
+  currency: "IDR",
+  minimumFractionDigits: 0
+}).format(n), _ = (n, a, o, i, s, t, e, g, l, c, u, p) => {
+  const r = [];
+  return n && r.push(`starasia-fontSizes-${n}`), a && r.push(`starasia-fontWeights-${a}`), o && r.push(`starasia-text-align-${o}`), i && r.push(`starasia-text-color-${i}`), s && r.push(`starasia-margin-${s}`), t && r.push(`starasia-margin-top-${t}`), e && r.push(`starasia-margin-right-${e}`), g && r.push(`starasia-margin-bottom-${g}`), l && r.push(`starasia-margin-left-${l}`), c && r.push(`starasia-${c}`), u && r.push(`starasia-text-${u}`), p && r.push("starasia-text-truncate"), r.push(""), r.join(" ");
+}, f = "starasia-text-styles", $ = (n) => {
+  if (!document.getElementById(f)) {
+    const a = document.createElement("style");
+    a.id = f, a.textContent = n, document.head.appendChild(a);
+  }
+};
+$(E);
+const L = (n) => {
+  const {
+    children: a,
+    fontSize: o = "md",
+    fontWeight: i = "normal",
+    align: s = "left",
+    color: t = "text",
+    margin: e = "spacing-0",
+    marginTop: g,
+    marginBottom: l,
+    marginRight: c,
+    marginLeft: u,
+    lineHeight: p,
+    textAlign: r = "left",
+    fontFamily: h = "Poppins",
+    letterSpacing: b,
+    currency: y,
+    variant: w,
+    truncate: S,
+    ...v
+  } = n;
+  return /* @__PURE__ */ C.jsx(
+    "p",
+    {
+      ...v,
+      className: `${_(
+        o,
+        i,
+        r,
+        t,
+        e,
+        g,
+        c,
+        l,
+        u,
+        p,
+        w,
+        S
+      )} ${v.className}`,
+      style: {
+        fontFamily: `${h}, sans-serif`,
+        letterSpacing: b,
+        ...v.style
+      },
+      children: y ? N(a) : a
+    }
+  );
+}, F = [
+  "leading-3",
+  "leading-4",
+  "leading-5",
+  "leading-6",
+  "leading-7",
+  "leading-8",
+  "leading-9",
+  "leading-10",
+  "leading-none",
+  "leading-tight",
+  "leading-snug",
+  "leading-normal",
+  "leading-relaxed",
+  "leading-loose"
+], A = [
+  "xs",
+  "sm",
+  "md",
+  "lg",
+  "auto",
+  "spacing-0",
+  "spacing-1",
+  "spacing-2",
+  "spacing-3",
+  "spacing-4",
+  "spacing-5",
+  "spacing-6",
+  "spacing-8",
+  "spacing-10",
+  "spacing-12",
+  "spacing-16",
+  "spacing-20",
+  "spacing-24",
+  "spacing-32",
+  "spacing-40",
+  "spacing-48",
+  "spacing-56",
+  "spacing-64"
+], j = ["left", "center", "right"], M = [
+  "hairline",
+  "thin",
+  "light",
+  "normal",
+  "medium",
+  "semibold",
+  "bold",
+  "extrabold",
+  "black"
+], I = [
+  {
+    name: "brand",
+    colors: [
+      "primary"
+      // "secondary", "tertiary"
+    ]
+  },
+  {
+    name: "state",
+    colors: [
+      "default",
+      "secondary",
+      "tertiary",
+      "disable",
+      "white",
+      "success",
+      "success-secondary",
+      "success-disable",
+      "danger",
+      "danger-secondary",
+      "danger-disable",
+      "brand",
+      "brand-secondary",
+      "info",
+      "info-secondary",
+      "warning",
+      "warning-disable",
+      "error"
+    ]
+  },
+  {
+    name: "text",
+    colors: ["text", "text-light", "text-muted"]
+  },
+  {
+    name: "gray",
+    colors: [
+      "gray-50",
+      "gray-100",
+      "gray-200",
+      "gray-300",
+      "gray-400",
+      "gray-500",
+      "gray-600",
+      "gray-700",
+      "gray-800",
+      "gray-900",
+      "gray-950"
+    ]
+  },
+  {
+    name: "red",
+    colors: [
+      "red-50",
+      "red-100",
+      "red-200",
+      "red-300",
+      "red-400",
+      "red-500",
+      "red-600",
+      "red-700",
+      "red-800",
+      "red-900",
+      "red-950"
+    ]
+  },
+  {
+    name: "orange",
+    colors: [
+      "orange-50",
+      "orange-100",
+      "orange-200",
+      "orange-300",
+      "orange-400",
+      "orange-500",
+      "orange-600",
+      "orange-700",
+      "orange-800",
+      "orange-900",
+      "orange-950"
+    ]
+  },
+  {
+    name: "yellow",
+    colors: [
+      "yellow-50",
+      "yellow-100",
+      "yellow-200",
+      "yellow-300",
+      "yellow-400",
+      "yellow-500",
+      "yellow-600",
+      "yellow-700",
+      "yellow-800",
+      "yellow-900",
+      "yellow-950"
+    ]
+  },
+  {
+    name: "green",
+    colors: [
+      "green-50",
+      "green-100",
+      "green-200",
+      "green-300",
+      "green-400",
+      "green-500",
+      "green-600",
+      "green-700",
+      "green-800",
+      "green-900",
+      "green-950"
+    ]
+  },
+  {
+    name: "blue",
+    colors: [
+      "blue-50",
+      "blue-100",
+      "blue-200",
+      "blue-300",
+      "blue-400",
+      "blue-500",
+      "blue-600",
+      "blue-700",
+      "blue-800",
+      "blue-900",
+      "blue-950"
+    ]
+  },
+  {
+    name: "purple",
+    colors: [
+      "purple-50",
+      "purple-100",
+      "purple-200",
+      "purple-300",
+      "purple-400",
+      "purple-500",
+      "purple-600",
+      "purple-700",
+      "purple-800",
+      "purple-900",
+      "purple-950"
+    ]
+  },
+  {
+    name: "pink",
+    colors: [
+      "pink-50",
+      "pink-100",
+      "pink-200",
+      "pink-300",
+      "pink-400",
+      "pink-500",
+      "pink-600",
+      "pink-700",
+      "pink-800",
+      "pink-900"
+    ]
+  },
+  {
+    name: "aloha",
+    colors: [
+      "aloha-50",
+      "aloha-100",
+      "aloha-200",
+      "aloha-300",
+      "aloha-400",
+      "aloha-500",
+      "aloha-600",
+      "aloha-700",
+      "aloha-800",
+      "aloha-900"
+    ]
+  }
+], G = I.map(
+  (n) => n.colors
+).flat(), P = [
+  "xs",
+  "sm",
+  "md",
+  "lg",
+  "xl",
+  "2xl",
+  "3xl",
+  "4xl",
+  "5xl",
+  "6xl"
+];
+export {
+  P as FontSizeConst,
+  M as FontWeightConst,
+  F as LineHeightConst,
+  L as Text,
+  j as TextAlignConst,
+  G as TextColorConst,
+  I as TextColorSchemeGenerator,
+  A as TextSpacingConst
+};