@zenpatient-org/healthspan-marketing-ui 0.1.171 → 0.2.0

package/dist/components/TextInput/textInput.module.css

@@ -0,0 +1,163 @@
+.root {
+    position: relative;
+    width: 100%;
+}
+
+.container {
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    gap: var(--spacing-8);
+    align-self: stretch;
+    padding: 10px 10px 10px var(--spacing-18);
+    border-radius: var(--border-radius-xs);
+    border: var(--border-width-sm) solid var(--border-alpha-black-10);
+    background: var(--color-bg-fill-alpha-black-40);
+    box-sizing: border-box;
+    transition:
+        border-color 0.2s,
+        box-shadow 0.2s;
+    width: 100%;
+}
+
+.container.primary {
+    background: var(--color-bg-base-light);
+    border: var(--border-width-sm) solid var(--border-color-light);
+}
+
+.container.primary input {
+    color: var(--color-text-primary);
+}
+
+.container.primary input::placeholder {
+    color: var(--color-text-primary);
+    opacity: 0.8;
+}
+
+.container.primary-invert {
+    background: var(--color-bg-fill-alpha-black-40);
+    border: var(--border-width-sm) solid var(--border-color-alpha-black-10);
+}
+
+.container.primary-invert input {
+    color: var(--color-text-primary-inverted);
+}
+
+.container.primary-invert input::placeholder {
+    color: var(--color-text-primary-inverted);
+    opacity: 0.8;
+}
+
+.errorTextContainer {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-4);
+    margin-top: 4px;
+}
+
+.errorIcon {
+    width: 14px;
+    height: 14px;
+    color: var(--color-text-danger-light);
+}
+
+.container.focused {
+    border-color: var(--border-alpha-black-10);
+    box-shadow: 0 0 0 1px var(--color-powder-blue-500);
+}
+
+.container.active {
+    border-color: var(--border-color-indigo);
+    box-shadow: none;
+}
+
+.container.active input {
+    outline: none;
+    opacity: 1;
+}
+
+.container.primary.active input {
+    color: var(--color-text-primary);
+}
+
+.container.primary-invert.active input {
+    color: var(--color-text-primary-inverted);
+}
+
+.container.error {
+    border: 1px solid var(--color-text-danger-light);
+    box-shadow: 1px;
+}
+
+.container.disabled {
+    background: var(--color-bg-fill-brand-disabled);
+    border-color: var(--color-bg-fill-brand-disabled);
+    opacity: 0.7;
+    pointer-events: none;
+}
+
+.input_container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+}
+
+.input {
+    font-family: var(--font-default);
+    height: 40px;
+    line-height: var(--line-height-sm);
+    letter-spacing: var(--letter-spacing-negative-sm);
+    opacity: 0.8;
+    padding-top: 0;
+    padding-bottom: 0;
+}
+
+.input:disabled {
+    color: var(--color-text-secondary-disabled);
+    background: transparent;
+    cursor: not-allowed;
+}
+
+.container input {
+    outline: none;
+    width: 100%;
+    background-color: transparent;
+    border: none;
+    font-size: var(--font-size-md);
+    line-height: var(--line-height-sm);
+}
+
+.container.focused input {
+    outline: none;
+    opacity: 1;
+}
+
+.errorText {
+    color: var(--color-text-danger-light);
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-4);
+}
+
+.label {
+    color: var(--color-text-primary-inverted);
+    font-family: var(--font-default);
+    font-size: var(--font-size-lg);
+    font-weight: var(--font-weight-regular);
+    line-height: var(--line-height-xs);
+    opacity: 0.8;
+    margin-bottom: var(--spacing-8);
+    margin-left: 2px;
+    transition: opacity 0.2s;
+}
+
+.label.hidden {
+    opacity: 0;
+    height: 0;
+    margin: 0;
+    pointer-events: none;
+    overflow: hidden;
+}

package/dist/components/TypeBadge/TypeBadge.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),r=require("../../assets/svg/badge-icon.svg.cjs.js"),s=require("./typeBadge.module.css.cjs.js");var n=(e=>(e.SENESCENCE="senescence",e.SUPPLEMENTS="supplements",e.OUTLINE="outline",e.ENERGY="energy",e.METABOLISM="metabolism",e.LABS="labs",e))(n||{});const a=({type:e="senescence"})=>t.jsx("div",{className:s.default.typeBadge,"data-type":e,children:t.jsx(r.default,{className:s.default.badgeIcon})});exports.ETypeBadge=n;exports.TypeBadge=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),c=require("../../assets/svg/badge-icon.svg.cjs.js"),t=require("../../src/components/TypeBadge/typeBadge.module.css");var n=(e=>(e.SENESCENCE="senescence",e.SUPPLEMENTS="supplements",e.OUTLINE="outline",e.ENERGY="energy",e.METABOLISM="metabolism",e.LABS="labs",e))(n||{});const r=({type:e="senescence"})=>s.jsx("div",{className:t.typeBadge,"data-type":e,children:s.jsx(c.default,{className:t.badgeIcon})});exports.ETypeBadge=n;exports.TypeBadge=r;

package/dist/components/TypeBadge/TypeBadge.es.js

@@ -1,6 +1,6 @@
 import { jsx as s } from "react/jsx-runtime";
 import n from "../../assets/svg/badge-icon.svg.es.js";
-import t from "./typeBadge.module.css.es.js";
+import t from "../../components/TypeBadge/typeBadge.module.css";
 var o = /* @__PURE__ */ ((e) => (e.SENESCENCE = "senescence", e.SUPPLEMENTS = "supplements", e.OUTLINE = "outline", e.ENERGY = "energy", e.METABOLISM = "metabolism", e.LABS = "labs", e))(o || {});
 const a = ({
   type: e = "senescence"

package/dist/components/TypeBadge/typeBadge.module.css

@@ -0,0 +1,44 @@
+.typeBadge {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex: 0 0 auto;
+    width: var(--spacing-20);
+    height: var(--spacing-20);
+    border-radius: 50%;
+    background-color: var(--color-bg-fill-brand-indigo);
+}
+
+
+.typeBadge[data-type='senescence'] {
+    background-color: var(--color-bg-fill-brand-indigo);
+}
+
+.typeBadge[data-type='supplements'] {
+    background-color: var(--color-bg-base-dark);
+}
+
+.typeBadge[data-type='outline'] {
+    background-color: transparent;
+    border: 1px solid var(--color-bg-base-dark);
+}
+
+.typeBadge[data-type='energy'] {
+    background-color: var(--color-solar-300);
+}
+
+.typeBadge[data-type='metabolism'] {
+    background-color: var(--color-orchre-300);
+}
+
+.typeBadge[data-type='labs'] {
+    background-color: var(--color-sage-200);
+}
+
+.badgeIcon {
+    fill: var(--color-bg-base-dark);
+}
+
+.typeBadge[data-type='supplements'] .badgeIcon {
+    fill: var(--color-bg-fill-brand-solar);
+}

package/dist/components/Typography/Typography.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("react/jsx-runtime"),e=require("../../styles/typography.module.css.cjs.js"),C=require("../../utils/cn/cn.cjs.js"),_=require("./Typography.service.cjs.js"),$=({defaultVariant:l,children:i,className:c="",weight:a,emphasis:o=!1,as:n="span",mobileVariant:r,color:u,id:p,align:t})=>{const y=e.default[l]||"";let s=a;o&&!a&&(s="medium");const d=s?e.default[`weight${s.charAt(0).toUpperCase()}${s.slice(1)}`]:"",g=l.startsWith("label")&&o?e.default.labelEmphasis:"",h=r?e.default[`mobile__${r}`]:"",f=t?e.default[`${t}Align`]:"";return m.jsx(n,{style:_.getMemoizedColorStyles(u),className:C.cn(y,d,g,h,f,c),id:p,"data-align":t,children:i})};exports.Typography=$;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("react/jsx-runtime"),_=require("../../utils/cn/cn.cjs.js"),d=require("./Typography.service.cjs.js"),s=require("../../src/components/Typography/typography.module.css"),q=({defaultVariant:l,children:i,className:c="",weight:o,emphasis:a=!1,as:n="span",mobileVariant:r,color:p,id:y,align:t})=>{const u=s[l]||"";let e=o;a&&!o&&(e="medium");const g=e?s[`weight${e.charAt(0).toUpperCase()}${e.slice(1)}`]:"",h=l.startsWith("label")&&a?s.labelEmphasis:"",m=r?s[`mobile__${r}`]:"",C=t?s[`${t}Align`]:"";return b.jsx(n,{style:d.getMemoizedColorStyles(p),className:_.cn(u,g,h,m,C,c),id:y,"data-align":t,children:i})};exports.Typography=q;

package/dist/components/Typography/Typography.es.js

@@ -1,28 +1,28 @@
 import { jsx as $ } from "react/jsx-runtime";
-import s from "../../styles/typography.module.css.es.js";
 import { cn as b } from "../../utils/cn/cn.es.js";
 import { getMemoizedColorStyles as d } from "./Typography.service.es.js";
+import s from "../../components/Typography/typography.module.css";
 const j = ({
-  defaultVariant: a,
+  defaultVariant: e,
   children: i,
   className: m = "",
-  weight: e,
-  emphasis: l = !1,
+  weight: l,
+  emphasis: a = !1,
   as: p = "span",
   mobileVariant: r,
   color: c,
   id: n,
   align: o
 }) => {
-  const h = s[a] || "";
-  let t = e;
-  l && !e && (t = "medium");
-  const C = t ? s[`weight${t.charAt(0).toUpperCase()}${t.slice(1)}`] : "", f = a.startsWith("label") && l ? s.labelEmphasis : "", g = r ? s[`mobile__${r}`] : "", y = o ? s[`${o}Align`] : "";
+  const C = s[e] || "";
+  let t = l;
+  a && !l && (t = "medium");
+  const f = t ? s[`weight${t.charAt(0).toUpperCase()}${t.slice(1)}`] : "", h = e.startsWith("label") && a ? s.labelEmphasis : "", g = r ? s[`mobile__${r}`] : "", y = o ? s[`${o}Align`] : "";
   return /* @__PURE__ */ $(
     p,
     {
       style: d(c),
-      className: b(h, C, f, g, y, m),
+      className: b(C, f, h, g, y, m),
       id: n,
       "data-align": o,
       children: i