@proyecto-viviana/ui 0.4.0 → 0.4.1

package/dist/EventCard.jsx

@@ -1,22 +1,20 @@
 /* empty css                                                                        */
-/* empty css                                                                        */
-/* empty css                                                                        */
 import { Avatar } from "@proyecto-viviana/solid-spectrum";
 import { For, Show } from "solid-js";
 import { Button } from "@proyecto-viviana/solidaria-components";
 //#region src/custom/event-card/index.tsx
-const card = " _Pc13 sd13 _ta13 _Nc13 Pc13 oe13 ne13 ke13 je13 gDE5VE13 _nLeasBb13";
-const decoration = " _Pa13 WJ13 _zI13 ZC13 Fx13 _Ha13";
-const preview = " Za13 fu4qurc13 _Hb13";
-const body = " sd13 _ta13 Ug13 qg13 Tf13 Qf13 Sf13 Rf13";
-const title = " uk13 ucJ9TBTb13 ud3Euai13 uea13 ugb13 uhd13 uje13 u2NhKxcl13 uic13 -_6BNtrc-g13 vx13 xe13 _xa13 xX0cczbd13 _xX0cczba13 xfe13 _xfa13 xfX0cczbd13 _xfX0cczba13 _Fd13 _FnuYUweb13 pj1j4Pd13";
-const meta = " sd13 eb13 Ul13 ql13 uk13 ucJ9TBTb13 ud3Euai13 uea13 ugb13 uhd13 uje13 u2NhKxcl13 uic13 -_6BNtrc-b13 vx13 xb13 _xa13 _Fd13 _FnuYUweb13 pxeCuqc13";
-const metaItem = " sd13 eb13 Ub13 qb13";
-const metaIcon = " pj1j4Pd13";
-const attendeesRow = " sd13 eb13 Ue13 qe13";
-const avatars = " sd13 eb13 Ub13 qb13";
-const more = " uk13 ucJ9TBTb13 ud3Euai13 uea13 ugb13 uhd13 uje13 u2NhKxcl13 uic13 -_6BNtrc-b13 vx13 xb13 _xa13 _Fd13 _FnuYUweb13 pxeCuqc13";
-const actionRow = " sd13 Ue13 qe13";
+const card = " _Pc151 sd151 _ta151 _Nc151 Pc151 oe151 ne151 ke151 je151 gDE5VE151 _nLeasBb151";
+const decoration = " _Pa151 WJ151 _zI151 ZC151 Fx151 _Ha151";
+const preview = " Za151 fu4qurc151 _Hb151";
+const body = " sd151 _ta151 Ug151 qg151 Tf151 Qf151 Sf151 Rf151";
+const title = " uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-g151 vx151 xe151 _xa151 xX0cczbd151 _xX0cczba151 xfe151 _xfa151 xfX0cczbd151 _xfX0cczba151 _Fd151 _FnuYUweb151 pH0v9Fe151";
+const meta = " sd151 eb151 Ul151 ql151 uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-b151 vx151 xb151 _xa151 _Fd151 _FnuYUweb151 pO550xe151";
+const metaItem = " sd151 eb151 Ub151 qb151";
+const metaIcon = " pO550xe151";
+const attendeesRow = " sd151 eb151 Ue151 qe151";
+const avatars = " sd151 eb151 Ub151 qb151";
+const more = " uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-b151 vx151 xb151 _xa151 _Fd151 _FnuYUweb151 pO550xe151";
+const actionRow = " sd151 Ue151 qe151";
 function EventCard(props) {
 	const displayedAttendees = () => props.attendees?.slice(0, 3) ?? [];
 	const remainingCount = () => {
@@ -72,11 +70,11 @@ function EventCard(props) {
       </div>
     </div>;
 }
-const listItem = " sd13 eb13 Ug13 qg13 Za13 Tt13 Qt13 St13 Rt13 oc13 nc13 kc13 jc13 _Wd13 ry13 g913 _je13";
-const thumb = " ZF13 Fz13 _va13 ob13 nb13 kb13 jb13 _Hb13";
-const listBody = " sd13 _ta13 _ub13 Na13";
-const listTitle = " uk13 ucJ9TBTb13 ud3Euai13 uea13 ugb13 uhd13 uje13 u2NhKxcl13 uic13 -_6BNtrc-c13 vx13 xc13 _xa13 _Fd13 _FnuYUweb13 pXDQpyb13 _Nc13 Pc13 _Yb13 _7c13";
-const listSubtitle = " uk13 ucJ9TBTb13 ud3Euai13 uea13 ugb13 uhd13 uje13 u2NhKxcl13 uic13 -_6BNtrc-b13 vx13 xb13 _xa13 _Fd13 _FnuYUweb13 pxeCuqc13 _Nc13 Pc13 _Yb13 _7c13";
+const listItem = " sd151 eb151 Ug151 qg151 Za151 Tt151 Qt151 St151 Rt151 oc151 nc151 kc151 jc151 _Wd151 ry151 g9151 _je151";
+const thumb = " ZF151 Fz151 _va151 ob151 nb151 kb151 jb151 _Hb151";
+const listBody = " sd151 _ta151 _ub151 Na151";
+const listTitle = " uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-c151 vx151 xc151 _xa151 _Fd151 _FnuYUweb151 pXDQpyb151 _Nc151 Pc151 _Yb151 _7c151";
+const listSubtitle = " uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-b151 vx151 xb151 _xa151 _Fd151 _FnuYUweb151 pxeCuqc151 _Nc151 Pc151 _Yb151 _7c151";
 function EventListItem(props) {
 	return <Button class={`${listItem} ${props.class ?? ""}`} onPress={() => props.onClick?.()}>
       <Show when={props.image}>

package/dist/EventCard.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"EventCard.jsx","names":[],"sources":["../src/custom/event-card/index.tsx"],"sourcesContent":["import type { JSX } from \"solid-js\";\nimport { Show, For } from \"solid-js\";\nimport { Avatar } from \"@proyecto-viviana/solid-spectrum\";\nimport { Button as HeadlessButton } from \"@proyecto-viviana/solidaria-components\";\n// Styled via the S2 style() macro through viviana's own seam (../../style →\n// src/style.ts). An event summary card (S2 Card shape: preview + content +\n// footer) plus a compact list-item variant, on the S2 ramps in Silapse colors.\nimport { style } from \"../../style\" with { type: \"macro\" };\n\nexport interface EventCardProps {\n  title: string;\n  image?: string;\n  date?: string;\n  author?: string;\n  authorAvatar?: string;\n  attendees?: { avatar?: string; name: string }[];\n  attendeeCount?: number;\n  decorationImage?: string;\n  /**\n   * Actions to display below the event.\n   * Use a function returning JSX for SSR compatibility: `actions={() => <Button>...</Button>}`\n   */\n  actions?: JSX.Element | (() => JSX.Element);\n  class?: string;\n}\n\nconst card = style({\n  position: \"relative\",\n  display: \"flex\",\n  flexDirection: \"column\",\n  overflow: \"hidden\",\n  borderRadius: \"xl\",\n  backgroundColor: \"[var(--color-bg-200)]\",\n  boxShadow: \"elevated\",\n});\n\nconst decoration = style({\n  position: \"absolute\",\n  top: 8,\n  insetEnd: 8,\n  width: 32,\n  height: 32,\n  objectFit: \"contain\",\n});\n\nconst preview = style({\n  width: \"full\",\n  aspectRatio: \"16/9\",\n  objectFit: \"cover\",\n});\n\nconst body = style({\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap: 12,\n  padding: 16,\n});\n\nconst title = style({\n  font: \"heading\",\n  color: \"[var(--color-accent)]\",\n});\n\nconst meta = style({\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: 16,\n  font: \"ui-sm\",\n  color: \"[var(--color-text-secondary)]\",\n});\n\nconst metaItem = style({\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: 4,\n});\n\nconst metaIcon = style({\n  color: \"[var(--color-accent)]\",\n});\n\nconst attendeesRow = style({\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: 8,\n});\n\nconst avatars = style({\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: 4,\n});\n\nconst more = style({\n  font: \"ui-sm\",\n  color: \"[var(--color-text-secondary)]\",\n});\n\nconst actionRow = style({\n  display: \"flex\",\n  gap: 8,\n});\n\nexport function EventCard(props: EventCardProps) {\n  const displayedAttendees = () => props.attendees?.slice(0, 3) ?? [];\n  const remainingCount = () => {\n    const total = props.attendeeCount ?? props.attendees?.length ?? 0;\n    const displayed = displayedAttendees().length;\n    return total - displayed;\n  };\n\n  return (\n    <div class={`${card} ${props.class ?? \"\"}`}>\n      <Show when={props.decorationImage}>\n        <img class={decoration} src={props.decorationImage} alt=\"\" />\n      </Show>\n\n      <Show when={props.image}>\n        <img class={preview} src={props.image} alt={props.title} />\n      </Show>\n\n      <div class={body}>\n        <h3 class={title}>{props.title}</h3>\n\n        <Show when={props.date || props.author}>\n          <div class={meta}>\n            <Show when={props.author}>\n              <div class={metaItem}>\n                <span class={metaIcon}>@</span>\n                <span>{props.author}</span>\n              </div>\n            </Show>\n            <Show when={props.date}>\n              <div class={metaItem}>\n                <span class={metaIcon}>⏱</span>\n                <span>{props.date}</span>\n              </div>\n            </Show>\n          </div>\n        </Show>\n\n        <Show when={displayedAttendees().length > 0}>\n          <div class={attendeesRow}>\n            <div class={avatars}>\n              <For each={displayedAttendees()}>\n                {(attendee) => <Avatar src={attendee.avatar} alt={attendee.name} size=\"sm\" />}\n              </For>\n            </div>\n            <Show when={remainingCount() > 0}>\n              <span class={more}>+{remainingCount()} más</span>\n            </Show>\n          </div>\n        </Show>\n\n        <Show when={props.actions}>\n          <div class={actionRow}>\n            {typeof props.actions === \"function\" ? props.actions() : props.actions}\n          </div>\n        </Show>\n      </div>\n    </div>\n  );\n}\n\nexport interface EventListItemProps {\n  title: string;\n  image?: string;\n  subtitle?: string;\n  onClick?: () => void;\n  class?: string;\n}\n\nconst listItem = style({\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: 12,\n  width: \"full\",\n  padding: 8,\n  borderRadius: \"lg\",\n  textAlign: \"start\",\n  cursor: \"pointer\",\n  backgroundColor: \"transparent\",\n  borderStyle: \"none\",\n});\n\nconst thumb = style({\n  width: 48,\n  height: 48,\n  flexShrink: 0,\n  borderRadius: \"default\",\n  objectFit: \"cover\",\n});\n\nconst listBody = style({\n  display: \"flex\",\n  flexDirection: \"column\",\n  flexGrow: 1,\n  minWidth: 0,\n});\n\nconst listTitle = style({\n  font: \"ui\",\n  fontWeight: \"medium\",\n  color: \"[var(--color-primary-100)]\",\n  overflow: \"hidden\",\n  textOverflow: \"ellipsis\",\n  whiteSpace: \"nowrap\",\n});\n\nconst listSubtitle = style({\n  font: \"ui-sm\",\n  color: \"[var(--color-text-secondary)]\",\n  overflow: \"hidden\",\n  textOverflow: \"ellipsis\",\n  whiteSpace: \"nowrap\",\n});\n\nexport function EventListItem(props: EventListItemProps) {\n  return (\n    <HeadlessButton class={`${listItem} ${props.class ?? \"\"}`} onPress={() => props.onClick?.()}>\n      <Show when={props.image}>\n        <img class={thumb} src={props.image} alt={props.title} />\n      </Show>\n      <div class={listBody}>\n        <h4 class={listTitle}>{props.title}</h4>\n        <Show when={props.subtitle}>\n          <p class={listSubtitle}>{props.subtitle}</p>\n        </Show>\n      </div>\n    </HeadlessButton>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"EventCard.jsx","names":[],"sources":["../src/custom/event-card/index.tsx"],"sourcesContent":["import type { JSX } from \"solid-js\";\nimport { Show, For } from \"solid-js\";\nimport { Avatar } from \"@proyecto-viviana/solid-spectrum\";\nimport { Button as HeadlessButton } from \"@proyecto-viviana/solidaria-components\";\n// Styled via the S2 style() macro through viviana's own seam (../../style →\n// src/style.ts). An event summary card (S2 Card shape: preview + content +\n// footer) plus a compact list-item variant, on the S2 ramps in Silapse colors.\nimport { style } from \"../../style\" with { type: \"macro\" };\n\nexport interface EventCardProps {\n  title: string;\n  image?: string;\n  date?: string;\n  author?: string;\n  authorAvatar?: string;\n  attendees?: { avatar?: string; name: string }[];\n  attendeeCount?: number;\n  decorationImage?: string;\n  /**\n   * Actions to display below the event.\n   * Use a function returning JSX for SSR compatibility: `actions={() => <Button>...</Button>}`\n   */\n  actions?: JSX.Element | (() => JSX.Element);\n  class?: string;\n}\n\nconst card = style({\n  position: \"relative\",\n  display: \"flex\",\n  flexDirection: \"column\",\n  overflow: \"hidden\",\n  borderRadius: \"xl\",\n  backgroundColor: \"[var(--color-bg-200)]\",\n  boxShadow: \"elevated\",\n});\n\nconst decoration = style({\n  position: \"absolute\",\n  top: 8,\n  insetEnd: 8,\n  width: 32,\n  height: 32,\n  objectFit: \"contain\",\n});\n\nconst preview = style({\n  width: \"full\",\n  aspectRatio: \"16/9\",\n  objectFit: \"cover\",\n});\n\nconst body = style({\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap: 12,\n  padding: 16,\n});\n\nconst title = style({\n  font: \"heading\",\n  // WCAG AA fix: the title sits on the `--color-bg-200` card. `--color-accent`\n  // (#df5c9a) is a fixed pink in BOTH themes, so it does not flip against a card\n  // that is dark-grey in dark mode and light-blue in light mode — it read 4.48:1\n  // dark / 1.89:1 light. `font: heading` renders 22px / weight 800, which is WCAG\n  // large text via the BOLD path (≥18.66px && ≥700), NOT because it is ≥24px — so\n  // the 3:1 large-text floor applies. `--color-accent-500` is the smallest ramp\n  // step that flips with the theme (bright pink dark / deep magenta light) AND\n  // clears 3:1 both ways (3.87:1 dark / 4.91:1 light), keeping the brand accent.\n  color: \"[var(--color-accent-500)]\",\n});\n\nconst meta = style({\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: 16,\n  font: \"ui-sm\",\n  // WCAG AA fix: the meta text is small (`ui-sm`), so the 4.5:1 normal-text\n  // floor applies. `--color-text-secondary` read only 3.84:1 on the light\n  // `--color-bg-200` card; `--color-text` flips and clears 4.5:1 both ways\n  // (15.33:1 dark / 7.53:1 light). Secondary de-emphasis rides on the smaller\n  // `ui-sm` size rather than a sub-AA color.\n  color: \"[var(--color-text)]\",\n});\n\nconst metaItem = style({\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: 4,\n});\n\nconst metaIcon = style({\n  // WCAG AA fix: the meta glyphs (@ / ⏱) are small (inherit `ui-sm`), so the\n  // 4.5:1 floor applies. `--color-accent` fails on the card (4.48:1 dark /\n  // 1.89:1 light) and no pink ramp step clears 4.5:1 on both the dark-grey and\n  // light-blue card, so the glyphs take the flipping `--color-text` like the\n  // meta text they prefix.\n  color: \"[var(--color-text)]\",\n});\n\nconst attendeesRow = style({\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: 8,\n});\n\nconst avatars = style({\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: 4,\n});\n\nconst more = style({\n  font: \"ui-sm\",\n  // WCAG AA fix: the \"+N más\" overflow count is small text on the same\n  // `--color-bg-200` card as the meta, so it shares the same 3.84:1-light\n  // failure and the same `--color-text` fix.\n  color: \"[var(--color-text)]\",\n});\n\nconst actionRow = style({\n  display: \"flex\",\n  gap: 8,\n});\n\nexport function EventCard(props: EventCardProps) {\n  const displayedAttendees = () => props.attendees?.slice(0, 3) ?? [];\n  const remainingCount = () => {\n    const total = props.attendeeCount ?? props.attendees?.length ?? 0;\n    const displayed = displayedAttendees().length;\n    return total - displayed;\n  };\n\n  return (\n    <div class={`${card} ${props.class ?? \"\"}`}>\n      <Show when={props.decorationImage}>\n        <img class={decoration} src={props.decorationImage} alt=\"\" />\n      </Show>\n\n      <Show when={props.image}>\n        <img class={preview} src={props.image} alt={props.title} />\n      </Show>\n\n      <div class={body}>\n        <h3 class={title}>{props.title}</h3>\n\n        <Show when={props.date || props.author}>\n          <div class={meta}>\n            <Show when={props.author}>\n              <div class={metaItem}>\n                <span class={metaIcon}>@</span>\n                <span>{props.author}</span>\n              </div>\n            </Show>\n            <Show when={props.date}>\n              <div class={metaItem}>\n                <span class={metaIcon}>⏱</span>\n                <span>{props.date}</span>\n              </div>\n            </Show>\n          </div>\n        </Show>\n\n        <Show when={displayedAttendees().length > 0}>\n          <div class={attendeesRow}>\n            <div class={avatars}>\n              <For each={displayedAttendees()}>\n                {(attendee) => <Avatar src={attendee.avatar} alt={attendee.name} size=\"sm\" />}\n              </For>\n            </div>\n            <Show when={remainingCount() > 0}>\n              <span class={more}>+{remainingCount()} más</span>\n            </Show>\n          </div>\n        </Show>\n\n        <Show when={props.actions}>\n          <div class={actionRow}>\n            {typeof props.actions === \"function\" ? props.actions() : props.actions}\n          </div>\n        </Show>\n      </div>\n    </div>\n  );\n}\n\nexport interface EventListItemProps {\n  title: string;\n  image?: string;\n  subtitle?: string;\n  onClick?: () => void;\n  class?: string;\n}\n\nconst listItem = style({\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: 12,\n  width: \"full\",\n  padding: 8,\n  borderRadius: \"lg\",\n  textAlign: \"start\",\n  cursor: \"pointer\",\n  backgroundColor: \"transparent\",\n  borderStyle: \"none\",\n});\n\nconst thumb = style({\n  width: 48,\n  height: 48,\n  flexShrink: 0,\n  borderRadius: \"default\",\n  objectFit: \"cover\",\n});\n\nconst listBody = style({\n  display: \"flex\",\n  flexDirection: \"column\",\n  flexGrow: 1,\n  minWidth: 0,\n});\n\nconst listTitle = style({\n  font: \"ui\",\n  fontWeight: \"medium\",\n  color: \"[var(--color-primary-100)]\",\n  overflow: \"hidden\",\n  textOverflow: \"ellipsis\",\n  whiteSpace: \"nowrap\",\n});\n\nconst listSubtitle = style({\n  font: \"ui-sm\",\n  color: \"[var(--color-text-secondary)]\",\n  overflow: \"hidden\",\n  textOverflow: \"ellipsis\",\n  whiteSpace: \"nowrap\",\n});\n\nexport function EventListItem(props: EventListItemProps) {\n  return (\n    <HeadlessButton class={`${listItem} ${props.class ?? \"\"}`} onPress={() => props.onClick?.()}>\n      <Show when={props.image}>\n        <img class={thumb} src={props.image} alt={props.title} />\n      </Show>\n      <div class={listBody}>\n        <h4 class={listTitle}>{props.title}</h4>\n        <Show when={props.subtitle}>\n          <p class={listSubtitle}>{props.subtitle}</p>\n        </Show>\n      </div>\n    </HeadlessButton>\n  );\n}\n"],"mappings":"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"}

package/dist/Logo.js

@@ -3,89 +3,89 @@ import { className, effect, getNextElement, insert, template } from "solid-js/we
 var _tmpl$ = /*#__PURE__*/ template(`<span><span></span><span>`);
 const wordmark = function anonymous(props) {
 	let rules = " ";
-	rules += " sh13";
-	rules += " ea13";
-	rules += " qe13";
-	rules += " _7c13";
+	rules += " sh151";
+	rules += " ea151";
+	rules += " qe151";
+	rules += " _7c151";
 	if (props.size === "xl") {
-		rules += " uk13";
-		rules += " ucJ9TBTb13";
-		rules += " ud3Euai13";
-		rules += " uea13";
-		rules += " ugb13";
-		rules += " uhd13";
-		rules += " uje13";
-		rules += " u2NhKxcl13";
-		rules += " uic13";
+		rules += " uk151";
+		rules += " ucJ9TBTb151";
+		rules += " ud3Euai151";
+		rules += " uea151";
+		rules += " ugb151";
+		rules += " uhd151";
+		rules += " uje151";
+		rules += " u2NhKxcl151";
+		rules += " uic151";
 	} else if (props.size === "lg") {
-		rules += " uk13";
-		rules += " ucJ9TBTb13";
-		rules += " ud3Euai13";
-		rules += " uea13";
-		rules += " ugb13";
-		rules += " uhd13";
-		rules += " uje13";
-		rules += " u2NhKxcl13";
-		rules += " uic13";
+		rules += " uk151";
+		rules += " ucJ9TBTb151";
+		rules += " ud3Euai151";
+		rules += " uea151";
+		rules += " ugb151";
+		rules += " uhd151";
+		rules += " uje151";
+		rules += " u2NhKxcl151";
+		rules += " uic151";
 	} else if (props.size === "md") {
-		rules += " uk13";
-		rules += " ucJ9TBTb13";
-		rules += " ud3Euai13";
-		rules += " uea13";
-		rules += " ugb13";
-		rules += " uhd13";
-		rules += " uje13";
-		rules += " u2NhKxcl13";
-		rules += " uic13";
+		rules += " uk151";
+		rules += " ucJ9TBTb151";
+		rules += " ud3Euai151";
+		rules += " uea151";
+		rules += " ugb151";
+		rules += " uhd151";
+		rules += " uje151";
+		rules += " u2NhKxcl151";
+		rules += " uic151";
 	} else if (props.size === "sm") {
-		rules += " uk13";
-		rules += " ucJ9TBTb13";
-		rules += " ud3Euai13";
-		rules += " uea13";
-		rules += " ugb13";
-		rules += " uhd13";
-		rules += " uje13";
-		rules += " u2NhKxcl13";
-		rules += " uic13";
+		rules += " uk151";
+		rules += " ucJ9TBTb151";
+		rules += " ud3Euai151";
+		rules += " uea151";
+		rules += " ugb151";
+		rules += " uhd151";
+		rules += " uje151";
+		rules += " u2NhKxcl151";
+		rules += " uic151";
 	}
 	if (props.size === "xl") {
-		rules += " -_6BNtrc-KaY1Ce13";
-		rules += " vx13";
+		rules += " -_6BNtrc-KaY1Ce151";
+		rules += " vx151";
 	} else if (props.size === "lg") {
-		rules += " -_6BNtrc-f13";
-		rules += " vx13";
+		rules += " -_6BNtrc-f151";
+		rules += " vx151";
 	} else if (props.size === "md") {
-		rules += " -_6BNtrc-d13";
-		rules += " vx13";
+		rules += " -_6BNtrc-d151";
+		rules += " vx151";
 	} else if (props.size === "sm") {
-		rules += " -_6BNtrc-c13";
-		rules += " vx13";
+		rules += " -_6BNtrc-c151";
+		rules += " vx151";
 	}
-	rules += " xf13";
-	rules += " _xa13";
+	rules += " xf151";
+	rules += " _xa151";
 	if (props.size === "xl") {
-		rules += " _Fd13";
-		rules += " _FnuYUweb13";
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
 	} else if (props.size === "lg") {
-		rules += " _Fd13";
-		rules += " _FnuYUweb13";
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
 	} else if (props.size === "md") {
-		rules += " _Fd13";
-		rules += " _FnuYUweb13";
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
 	} else if (props.size === "sm") {
-		rules += " _Fd13";
-		rules += " _FnuYUweb13";
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
 	}
-	if (props.size === "xl") rules += " po13";
-	else if (props.size === "lg") rules += " po13";
-	else if (props.size === "md") rules += " po13";
-	else if (props.size === "sm") rules += " po13";
+	if (props.size === "xl") rules += " po151";
+	else if (props.size === "lg") rules += " po151";
+	else if (props.size === "md") rules += " po151";
+	else if (props.size === "sm") rules += " po151";
 	return rules;
 };
 const word = function anonymous(props) {
 	let rules = " ";
-	if (props.tone === "accent") rules += " pj1j4Pd13";
-	else if (props.tone === "primary") rules += " pXDQpyb13";
+	if (props.tone === "accent") rules += " pH0v9Fe151";
+	else if (props.tone === "primary") rules += " pXDQpyb151";
 	return rules;
 };
 function Logo(props) {

package/dist/Logo.js.map

@@ -1 +1 @@
-{"version":3,"file":"Logo.js","names":[],"sources":["../src/custom/logo/index.tsx"],"sourcesContent":["import type { JSX } from \"solid-js\";\n// Styled via the S2 style() macro through viviana's own seam (../../style →\n// src/style.ts). A clean two-word wordmark: the S2 title ramp sizes it; Silapse\n// colors paint it (primary + accent). `inverted` swaps which word takes accent.\nimport { style } from \"../../style\" with { type: \"macro\" };\n\nexport type LogoSize = \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nexport interface LogoProps {\n  firstWord?: string;\n  secondWord?: string;\n  size?: LogoSize;\n  inverted?: boolean;\n  class?: string;\n}\n\nconst wordmark = style<{ size: LogoSize }>({\n  display: \"inline-flex\",\n  alignItems: \"baseline\",\n  columnGap: 8,\n  whiteSpace: \"nowrap\",\n  font: {\n    size: {\n      sm: \"title-sm\",\n      md: \"title\",\n      lg: \"title-xl\",\n      xl: \"title-3xl\",\n    },\n  },\n  fontWeight: \"black\",\n});\n\nconst word = style<{ tone: \"primary\" | \"accent\" }>({\n  color: {\n    tone: {\n      primary: \"[var(--color-primary-100)]\",\n      accent: \"[var(--color-accent)]\",\n    },\n  },\n});\n\nexport function Logo(props: LogoProps): JSX.Element {\n  const firstWord = () => props.firstWord ?? \"Proyecto\";\n  const secondWord = () => props.secondWord ?? \"Viviana\";\n  const inverted = () => props.inverted ?? false;\n\n  return (\n    <span class={`${wordmark({ size: props.size ?? \"md\" })} ${props.class ?? \"\"}`}>\n      <span class={word({ tone: inverted() ? \"accent\" : \"primary\" })}>{firstWord()}</span>\n      <span class={word({ tone: inverted() ? \"primary\" : \"accent\" })}>{secondWord()}</span>\n    </span>\n  );\n}\n"],"mappings":";;;AAgBA,MAAM,WAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBN,MAAM,OAAA,SAAA,UAAA,OAAA;;;;;;AASN,SAAgB,KAAK,OAAuB;CAC1C,MAAM,kBAAkB,MAAM,aAAa;CAC3C,MAAM,mBAAmB,MAAM,cAAc;CAC7C,MAAM,iBAAiB,MAAM,YAAY;CAEzC,cAAA;EAAA,IAAA,OAAA,eAAA,MAAA,GAAA,QAAA,KAAA,YAAA,QAAA,MAAA;EAAA,OAAA,OAEqE,SAAA;EAAA,OAAA,OACA,UAAA;EAAA,QAAA,QAAA;GAAA,IAAA,MAFtD,GAAG,SAAS,EAAE,MAAM,MAAM,QAAQ,KAAK,CAAA,EAAA,GAAM,MAAM,SAAS,MAAI,OAC9D,KAAK,EAAE,MAAM,SAAA,IAAa,WAAW,UAAU,CAAA,GAAA,OAC/C,KAAK,EAAE,MAAM,SAAA,IAAa,YAAY,SAAS,CAAA;GAAA,QAAA,IAAA,KAAA,UAAA,MAAA,IAAA,IAAA,GAAA;GAAA,SAAA,IAAA,KAAA,UAAA,OAAA,IAAA,IAAA,IAAA;GAAA,SAAA,IAAA,KAAA,UAAA,OAAA,IAAA,IAAA,IAAA;GAAA,OAAA;EAAA,GAAA;GAAA,GAAA,KAAA;GAAA,GAAA,KAAA;GAAA,GAAA,KAAA;EAAA,CAAA;EAAA,OAAA;CAAA,GAAA;AAGlE"}
+{"version":3,"file":"Logo.js","names":[],"sources":["../src/custom/logo/index.tsx"],"sourcesContent":["import type { JSX } from \"solid-js\";\n// Styled via the S2 style() macro through viviana's own seam (../../style →\n// src/style.ts). A clean two-word wordmark: the S2 title ramp sizes it; Silapse\n// colors paint it (primary + accent). `inverted` swaps which word takes accent.\nimport { style } from \"../../style\" with { type: \"macro\" };\n\nexport type LogoSize = \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nexport interface LogoProps {\n  firstWord?: string;\n  secondWord?: string;\n  size?: LogoSize;\n  inverted?: boolean;\n  class?: string;\n}\n\nconst wordmark = style<{ size: LogoSize }>({\n  display: \"inline-flex\",\n  alignItems: \"baseline\",\n  columnGap: 8,\n  whiteSpace: \"nowrap\",\n  font: {\n    size: {\n      sm: \"title-sm\",\n      md: \"title\",\n      lg: \"title-xl\",\n      xl: \"title-3xl\",\n    },\n  },\n  fontWeight: \"black\",\n});\n\nconst word = style<{ tone: \"primary\" | \"accent\" }>({\n  color: {\n    tone: {\n      primary: \"[var(--color-primary-100)]\",\n      // `--color-accent` (#df5c9a) is the SAME non-flipping pink in both themes;\n      // on the light `--color-bg-200` panel the wordmark reads only 1.89:1 (fails\n      // even the 3:1 large-text floor the `black`-weight `title-xl` earns). No\n      // single non-flipping shade clears a near-white AND a near-black panel, so\n      // the accent word takes the *flipping* `--color-accent-500` (dark #d84a8f /\n      // light #8a1e4a) → 3.86:1 dark / 4.91:1 light — clearing the large-text\n      // floor in both themes while keeping the two-tone wordmark identity.\n      accent: \"[var(--color-accent-500)]\",\n    },\n  },\n});\n\nexport function Logo(props: LogoProps): JSX.Element {\n  const firstWord = () => props.firstWord ?? \"Proyecto\";\n  const secondWord = () => props.secondWord ?? \"Viviana\";\n  const inverted = () => props.inverted ?? false;\n\n  return (\n    <span class={`${wordmark({ size: props.size ?? \"md\" })} ${props.class ?? \"\"}`}>\n      <span class={word({ tone: inverted() ? \"accent\" : \"primary\" })}>{firstWord()}</span>\n      <span class={word({ tone: inverted() ? \"primary\" : \"accent\" })}>{secondWord()}</span>\n    </span>\n  );\n}\n"],"mappings":";;;AAgBA,MAAM,WAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBN,MAAM,OAAA,SAAA,UAAA,OAAA;;;;;;AAgBN,SAAgB,KAAK,OAAuB;CAC1C,MAAM,kBAAkB,MAAM,aAAa;CAC3C,MAAM,mBAAmB,MAAM,cAAc;CAC7C,MAAM,iBAAiB,MAAM,YAAY;CAEzC,cAAA;EAAA,IAAA,OAAA,eAAA,MAAA,GAAA,QAAA,KAAA,YAAA,QAAA,MAAA;EAAA,OAAA,OAEqE,SAAA;EAAA,OAAA,OACA,UAAA;EAAA,QAAA,QAAA;GAAA,IAAA,MAFtD,GAAG,SAAS,EAAE,MAAM,MAAM,QAAQ,KAAK,CAAA,EAAA,GAAM,MAAM,SAAS,MAAI,OAC9D,KAAK,EAAE,MAAM,SAAA,IAAa,WAAW,UAAU,CAAA,GAAA,OAC/C,KAAK,EAAE,MAAM,SAAA,IAAa,YAAY,SAAS,CAAA;GAAA,QAAA,IAAA,KAAA,UAAA,MAAA,IAAA,IAAA,GAAA;GAAA,SAAA,IAAA,KAAA,UAAA,OAAA,IAAA,IAAA,IAAA;GAAA,SAAA,IAAA,KAAA,UAAA,OAAA,IAAA,IAAA,IAAA;GAAA,OAAA;EAAA,GAAA;GAAA,GAAA,KAAA;GAAA,GAAA,KAAA;GAAA,GAAA,KAAA;EAAA,CAAA;EAAA,OAAA;CAAA,GAAA;AAGlE"}

package/dist/Logo.jsx

@@ -1,89 +1,89 @@
 //#region src/custom/logo/index.tsx
 const wordmark = function anonymous(props) {
 	let rules = " ";
-	rules += " sh13";
-	rules += " ea13";
-	rules += " qe13";
-	rules += " _7c13";
+	rules += " sh151";
+	rules += " ea151";
+	rules += " qe151";
+	rules += " _7c151";
 	if (props.size === "xl") {
-		rules += " uk13";
-		rules += " ucJ9TBTb13";
-		rules += " ud3Euai13";
-		rules += " uea13";
-		rules += " ugb13";
-		rules += " uhd13";
-		rules += " uje13";
-		rules += " u2NhKxcl13";
-		rules += " uic13";
+		rules += " uk151";
+		rules += " ucJ9TBTb151";
+		rules += " ud3Euai151";
+		rules += " uea151";
+		rules += " ugb151";
+		rules += " uhd151";
+		rules += " uje151";
+		rules += " u2NhKxcl151";
+		rules += " uic151";
 	} else if (props.size === "lg") {
-		rules += " uk13";
-		rules += " ucJ9TBTb13";
-		rules += " ud3Euai13";
-		rules += " uea13";
-		rules += " ugb13";
-		rules += " uhd13";
-		rules += " uje13";
-		rules += " u2NhKxcl13";
-		rules += " uic13";
+		rules += " uk151";
+		rules += " ucJ9TBTb151";
+		rules += " ud3Euai151";
+		rules += " uea151";
+		rules += " ugb151";
+		rules += " uhd151";
+		rules += " uje151";
+		rules += " u2NhKxcl151";
+		rules += " uic151";
 	} else if (props.size === "md") {
-		rules += " uk13";
-		rules += " ucJ9TBTb13";
-		rules += " ud3Euai13";
-		rules += " uea13";
-		rules += " ugb13";
-		rules += " uhd13";
-		rules += " uje13";
-		rules += " u2NhKxcl13";
-		rules += " uic13";
+		rules += " uk151";
+		rules += " ucJ9TBTb151";
+		rules += " ud3Euai151";
+		rules += " uea151";
+		rules += " ugb151";
+		rules += " uhd151";
+		rules += " uje151";
+		rules += " u2NhKxcl151";
+		rules += " uic151";
 	} else if (props.size === "sm") {
-		rules += " uk13";
-		rules += " ucJ9TBTb13";
-		rules += " ud3Euai13";
-		rules += " uea13";
-		rules += " ugb13";
-		rules += " uhd13";
-		rules += " uje13";
-		rules += " u2NhKxcl13";
-		rules += " uic13";
+		rules += " uk151";
+		rules += " ucJ9TBTb151";
+		rules += " ud3Euai151";
+		rules += " uea151";
+		rules += " ugb151";
+		rules += " uhd151";
+		rules += " uje151";
+		rules += " u2NhKxcl151";
+		rules += " uic151";
 	}
 	if (props.size === "xl") {
-		rules += " -_6BNtrc-KaY1Ce13";
-		rules += " vx13";
+		rules += " -_6BNtrc-KaY1Ce151";
+		rules += " vx151";
 	} else if (props.size === "lg") {
-		rules += " -_6BNtrc-f13";
-		rules += " vx13";
+		rules += " -_6BNtrc-f151";
+		rules += " vx151";
 	} else if (props.size === "md") {
-		rules += " -_6BNtrc-d13";
-		rules += " vx13";
+		rules += " -_6BNtrc-d151";
+		rules += " vx151";
 	} else if (props.size === "sm") {
-		rules += " -_6BNtrc-c13";
-		rules += " vx13";
+		rules += " -_6BNtrc-c151";
+		rules += " vx151";
 	}
-	rules += " xf13";
-	rules += " _xa13";
+	rules += " xf151";
+	rules += " _xa151";
 	if (props.size === "xl") {
-		rules += " _Fd13";
-		rules += " _FnuYUweb13";
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
 	} else if (props.size === "lg") {
-		rules += " _Fd13";
-		rules += " _FnuYUweb13";
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
 	} else if (props.size === "md") {
-		rules += " _Fd13";
-		rules += " _FnuYUweb13";
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
 	} else if (props.size === "sm") {
-		rules += " _Fd13";
-		rules += " _FnuYUweb13";
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
 	}
-	if (props.size === "xl") rules += " po13";
-	else if (props.size === "lg") rules += " po13";
-	else if (props.size === "md") rules += " po13";
-	else if (props.size === "sm") rules += " po13";
+	if (props.size === "xl") rules += " po151";
+	else if (props.size === "lg") rules += " po151";
+	else if (props.size === "md") rules += " po151";
+	else if (props.size === "sm") rules += " po151";
 	return rules;
 };
 const word = function anonymous(props) {
 	let rules = " ";
-	if (props.tone === "accent") rules += " pj1j4Pd13";
-	else if (props.tone === "primary") rules += " pXDQpyb13";
+	if (props.tone === "accent") rules += " pH0v9Fe151";
+	else if (props.tone === "primary") rules += " pXDQpyb151";
 	return rules;
 };
 function Logo(props) {

package/dist/Logo.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Logo.jsx","names":[],"sources":["../src/custom/logo/index.tsx"],"sourcesContent":["import type { JSX } from \"solid-js\";\n// Styled via the S2 style() macro through viviana's own seam (../../style →\n// src/style.ts). A clean two-word wordmark: the S2 title ramp sizes it; Silapse\n// colors paint it (primary + accent). `inverted` swaps which word takes accent.\nimport { style } from \"../../style\" with { type: \"macro\" };\n\nexport type LogoSize = \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nexport interface LogoProps {\n  firstWord?: string;\n  secondWord?: string;\n  size?: LogoSize;\n  inverted?: boolean;\n  class?: string;\n}\n\nconst wordmark = style<{ size: LogoSize }>({\n  display: \"inline-flex\",\n  alignItems: \"baseline\",\n  columnGap: 8,\n  whiteSpace: \"nowrap\",\n  font: {\n    size: {\n      sm: \"title-sm\",\n      md: \"title\",\n      lg: \"title-xl\",\n      xl: \"title-3xl\",\n    },\n  },\n  fontWeight: \"black\",\n});\n\nconst word = style<{ tone: \"primary\" | \"accent\" }>({\n  color: {\n    tone: {\n      primary: \"[var(--color-primary-100)]\",\n      accent: \"[var(--color-accent)]\",\n    },\n  },\n});\n\nexport function Logo(props: LogoProps): JSX.Element {\n  const firstWord = () => props.firstWord ?? \"Proyecto\";\n  const secondWord = () => props.secondWord ?? \"Viviana\";\n  const inverted = () => props.inverted ?? false;\n\n  return (\n    <span class={`${wordmark({ size: props.size ?? \"md\" })} ${props.class ?? \"\"}`}>\n      <span class={word({ tone: inverted() ? \"accent\" : \"primary\" })}>{firstWord()}</span>\n      <span class={word({ tone: inverted() ? \"primary\" : \"accent\" })}>{secondWord()}</span>\n    </span>\n  );\n}\n"],"mappings":";AAgBA,MAAM,WAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBN,MAAM,OAAA,SAAA,UAAA,OAAA;;;;;;AASN,SAAgB,KAAK,OAAuB;CAC1C,MAAM,kBAAkB,MAAM,aAAa;CAC3C,MAAM,mBAAmB,MAAM,cAAc;CAC7C,MAAM,iBAAiB,MAAM,YAAY;CAEzC,OAAO,CACJ,KAAK,OAAO,GAAG,SAAS,EAAE,MAAM,MAAM,QAAQ,KAAK,CAAA,EAAG,GAAG,MAAM,SAAS,MAAM;MAC7E,CAAC,KAAK,OAAO,KAAK,EAAE,MAAM,SAAA,IAAa,WAAW,UAAU,CAAA,IAAK,UAAA,EAAA,EAAc,KAAK;MACpF,CAAC,KAAK,OAAO,KAAK,EAAE,MAAM,SAAA,IAAa,YAAY,SAAS,CAAA,IAAK,WAAA,EAAA,EAAe,KAAK;IACvF,EAAE;AAEN"}
+{"version":3,"file":"Logo.jsx","names":[],"sources":["../src/custom/logo/index.tsx"],"sourcesContent":["import type { JSX } from \"solid-js\";\n// Styled via the S2 style() macro through viviana's own seam (../../style →\n// src/style.ts). A clean two-word wordmark: the S2 title ramp sizes it; Silapse\n// colors paint it (primary + accent). `inverted` swaps which word takes accent.\nimport { style } from \"../../style\" with { type: \"macro\" };\n\nexport type LogoSize = \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nexport interface LogoProps {\n  firstWord?: string;\n  secondWord?: string;\n  size?: LogoSize;\n  inverted?: boolean;\n  class?: string;\n}\n\nconst wordmark = style<{ size: LogoSize }>({\n  display: \"inline-flex\",\n  alignItems: \"baseline\",\n  columnGap: 8,\n  whiteSpace: \"nowrap\",\n  font: {\n    size: {\n      sm: \"title-sm\",\n      md: \"title\",\n      lg: \"title-xl\",\n      xl: \"title-3xl\",\n    },\n  },\n  fontWeight: \"black\",\n});\n\nconst word = style<{ tone: \"primary\" | \"accent\" }>({\n  color: {\n    tone: {\n      primary: \"[var(--color-primary-100)]\",\n      // `--color-accent` (#df5c9a) is the SAME non-flipping pink in both themes;\n      // on the light `--color-bg-200` panel the wordmark reads only 1.89:1 (fails\n      // even the 3:1 large-text floor the `black`-weight `title-xl` earns). No\n      // single non-flipping shade clears a near-white AND a near-black panel, so\n      // the accent word takes the *flipping* `--color-accent-500` (dark #d84a8f /\n      // light #8a1e4a) → 3.86:1 dark / 4.91:1 light — clearing the large-text\n      // floor in both themes while keeping the two-tone wordmark identity.\n      accent: \"[var(--color-accent-500)]\",\n    },\n  },\n});\n\nexport function Logo(props: LogoProps): JSX.Element {\n  const firstWord = () => props.firstWord ?? \"Proyecto\";\n  const secondWord = () => props.secondWord ?? \"Viviana\";\n  const inverted = () => props.inverted ?? false;\n\n  return (\n    <span class={`${wordmark({ size: props.size ?? \"md\" })} ${props.class ?? \"\"}`}>\n      <span class={word({ tone: inverted() ? \"accent\" : \"primary\" })}>{firstWord()}</span>\n      <span class={word({ tone: inverted() ? \"primary\" : \"accent\" })}>{secondWord()}</span>\n    </span>\n  );\n}\n"],"mappings":";AAgBA,MAAM,WAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBN,MAAM,OAAA,SAAA,UAAA,OAAA;;;;;;AAgBN,SAAgB,KAAK,OAAuB;CAC1C,MAAM,kBAAkB,MAAM,aAAa;CAC3C,MAAM,mBAAmB,MAAM,cAAc;CAC7C,MAAM,iBAAiB,MAAM,YAAY;CAEzC,OAAO,CACJ,KAAK,OAAO,GAAG,SAAS,EAAE,MAAM,MAAM,QAAQ,KAAK,CAAA,EAAG,GAAG,MAAM,SAAS,MAAM;MAC7E,CAAC,KAAK,OAAO,KAAK,EAAE,MAAM,SAAA,IAAa,WAAW,UAAU,CAAA,IAAK,UAAA,EAAA,EAAc,KAAK;MACpF,CAAC,KAAK,OAAO,KAAK,EAAE,MAAM,SAAA,IAAa,YAAY,SAAS,CAAA,IAAK,WAAA,EAAA,EAAe,KAAK;IACvF,EAAE;AAEN"}

package/dist/PageLayout.js

@@ -4,13 +4,13 @@ import { splitProps } from "solid-js";
 var _tmpl$ = /*#__PURE__*/ template(`<div>`);
 const page = function anonymous(props) {
 	let rules = " ";
-	rules += " sd13";
-	rules += " _ta13";
-	rules += " Mc13";
-	rules += " Za13";
-	rules += " g318zje13";
-	rules += " pO550xe13";
-	if (props.isWithHeader) rules += " Tr13";
+	rules += " sd151";
+	rules += " _ta151";
+	rules += " Mc151";
+	rules += " Za151";
+	rules += " g318zje151";
+	rules += " pO550xe151";
+	if (props.isWithHeader) rules += " Tr151";
 	return rules;
 };
 function PageLayout(props) {

package/dist/PageLayout.jsx

@@ -2,13 +2,13 @@ import { splitProps } from "solid-js";
 //#region src/custom/page-layout/index.tsx
 const page = function anonymous(props) {
 	let rules = " ";
-	rules += " sd13";
-	rules += " _ta13";
-	rules += " Mc13";
-	rules += " Za13";
-	rules += " g318zje13";
-	rules += " pO550xe13";
-	if (props.isWithHeader) rules += " Tr13";
+	rules += " sd151";
+	rules += " _ta151";
+	rules += " Mc151";
+	rules += " Za151";
+	rules += " g318zje151";
+	rules += " pO550xe151";
+	if (props.isWithHeader) rules += " Tr151";
 	return rules;
 };
 function PageLayout(props) {

package/dist/PageLayout.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"PageLayout.jsx","names":[],"sources":["../src/custom/page-layout/index.tsx"],"sourcesContent":["import { type JSX, splitProps } from \"solid-js\";\n// Styled via the S2 style() macro through viviana's own seam (../../style →\n// src/style.ts). A full-height page shell painted in Silapse surface/text\n// colors; `withHeader` reserves top space so a fixed header doesn't overlap.\nimport { style } from \"../../style\" with { type: \"macro\" };\n\nexport interface PageLayoutProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  children: JSX.Element;\n  withHeader?: boolean;\n}\n\nconst page = style<{ isWithHeader: boolean }>({\n  display: \"flex\",\n  flexDirection: \"column\",\n  minHeight: \"screen\",\n  width: \"full\",\n  backgroundColor: \"[var(--color-background)]\",\n  color: \"[var(--color-text)]\",\n  paddingTop: { isWithHeader: 64 },\n});\n\nexport function PageLayout(props: PageLayoutProps) {\n  const [local, rest] = splitProps(props, [\"class\", \"withHeader\"]);\n\n  return (\n    <div\n      class={`${page({ isWithHeader: local.withHeader ?? false })} ${local.class ?? \"\"}`}\n      {...rest}\n    >\n      {props.children}\n    </div>\n  );\n}\n"],"mappings":";;AAWA,MAAM,OAAA,SAAA,UAAA,OAAA;;;;;;;;;;;AAUN,SAAgB,WAAW,OAAsB;CAC/C,MAAM,CAAC,OAAO,QAAQ,WAAW,OAAO,CAAC,SAAS,YAAA,CAAa;CAE/D,OAAO,CACJ,IACC,OAAO,GAAG,KAAK,EAAE,cAAc,MAAM,cAAc,MAAM,CAAA,EAAG,GAAG,MAAM,SAAS,UAC1E,MACL;OACE,MAAM,SAAS;IAClB,EAAE;AAEN"}
+{"version":3,"file":"PageLayout.jsx","names":[],"sources":["../src/custom/page-layout/index.tsx"],"sourcesContent":["import { type JSX, splitProps } from \"solid-js\";\n// Styled via the S2 style() macro through viviana's own seam (../../style →\n// src/style.ts). A full-height page shell painted in Silapse surface/text\n// colors; `withHeader` reserves top space so a fixed header doesn't overlap.\nimport { style } from \"../../style\" with { type: \"macro\" };\n\nexport interface PageLayoutProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  children: JSX.Element;\n  withHeader?: boolean;\n}\n\nconst page = style<{ isWithHeader: boolean }>({\n  display: \"flex\",\n  flexDirection: \"column\",\n  minHeight: \"screen\",\n  width: \"full\",\n  backgroundColor: \"[var(--color-background)]\",\n  color: \"[var(--color-text)]\",\n  paddingTop: { isWithHeader: 64 },\n});\n\nexport function PageLayout(props: PageLayoutProps) {\n  const [local, rest] = splitProps(props, [\"class\", \"withHeader\"]);\n\n  return (\n    <div\n      class={`${page({ isWithHeader: local.withHeader ?? false })} ${local.class ?? \"\"}`}\n      {...rest}\n    >\n      {props.children}\n    </div>\n  );\n}\n"],"mappings":";;;CAWA,IAAA,QAAM;;;;;;;;;;;CAUN,MAAA,CAAA,OAAgB,QAAW,WAAsB,OAAA,CAAA,SAAA,YAAA,CAAA;CAC/C,OAAO,CAAA,IAAA,OAAO,GAAQ,KAAA,EAAA,cAAmB,MAAA,cAAsB,MAAA,CAAA,EAAA,GAAA,MAAA,SAAA,UAAA,MAAA;OAE/D,MAEI,SAAO"}

package/dist/ProfileCard.js

@@ -1,12 +1,11 @@
 /* empty css                                                                       */
 /* empty css                                                                       */
-/* empty css                                                                       */
 import { Avatar } from "@proyecto-viviana/solid-spectrum";
 import { className, createComponent, effect, getNextElement, getNextMarker, insert, memo, template } from "solid-js/web";
 import { Show } from "solid-js";
 //#region src/custom/profile-card/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<p class=" uk13 ucJ9TBTb13 ud3Euai13 uea13 ugb13 uhd13 uje13 u2NhKxcl13 uic13 -_6BNtrc-b13 vx13 xb13 _xa13 _Fd13 _FnuYUweb13 pxeCuqc13">`), _tmpl$2 = /*#__PURE__*/ template(`<span><span class=" xd13 _xa13 xX0cczbc13 _xX0cczba13 pXDQpyb13"></span> seguidores`), _tmpl$3 = /*#__PURE__*/ template(`<span><span class=" xd13 _xa13 xX0cczbc13 _xX0cczba13 pXDQpyb13"></span> siguiendo`), _tmpl$4 = /*#__PURE__*/ template(`<div class=" sd13 Ue13 qe13">`), _tmpl$5 = /*#__PURE__*/ template(`<div><div class=" sd13 ed13 Ul13 ql13"><!$><!/><div class=" sd13 _ta13 Ub13 qb13 _ub13 Na13"><h3 class=" uk13 ucJ9TBTb13 ud3Euai13 uea13 ugb13 uhd13 uje13 u2NhKxcl13 uic13 -_6BNtrc-f13 vx13 xe13 _xa13 xX0cczbd13 _xX0cczba13 xfe13 _xfa13 xfX0cczbd13 _xfX0cczba13 _Fd13 _FnuYUweb13 pXDQpyb13 _Nc13 Pc13 _Yb13 _7c13"></h3><!$><!/><div class=" sd13 Ul13 ql13 uk13 ucJ9TBTb13 ud3Euai13 uea13 ugb13 uhd13 uje13 u2NhKxcl13 uic13 -_6BNtrc-b13 vx13 xb13 _xa13 _Fd13 _FnuYUweb13 pxeCuqc13"><!$><!/><!$><!/></div></div></div><!$><!/>`);
-const card = " sd13 _ta13 Ul13 ql13 Tf13 Qf13 Sf13 Rf13 oc13 nc13 kc13 jc13 gDE5VE13 _nLeasBb13";
+var _tmpl$ = /*#__PURE__*/ template(`<p class=" uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-b151 vx151 xb151 _xa151 _Fd151 _FnuYUweb151 pO550xe151">`), _tmpl$2 = /*#__PURE__*/ template(`<span><span class=" xd151 _xa151 xX0cczbc151 _xX0cczba151 pXDQpyb151"></span> seguidores`), _tmpl$3 = /*#__PURE__*/ template(`<span><span class=" xd151 _xa151 xX0cczbc151 _xX0cczba151 pXDQpyb151"></span> siguiendo`), _tmpl$4 = /*#__PURE__*/ template(`<div class=" sd151 Ue151 qe151">`), _tmpl$5 = /*#__PURE__*/ template(`<div><div class=" sd151 ed151 Ul151 ql151"><!$><!/><div class=" sd151 _ta151 Ub151 qb151 _ub151 Na151"><h3 class=" uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-f151 vx151 xe151 _xa151 xX0cczbd151 _xX0cczba151 xfe151 _xfa151 xfX0cczbd151 _xfX0cczba151 _Fd151 _FnuYUweb151 pXDQpyb151 _Nc151 Pc151 _Yb151 _7c151"></h3><!$><!/><div class=" sd151 Ul151 ql151 uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-b151 vx151 xb151 _xa151 _Fd151 _FnuYUweb151 pO550xe151"><!$><!/><!$><!/></div></div></div><!$><!/>`);
+const card = " sd151 _ta151 Ul151 ql151 Tf151 Qf151 Sf151 Rf151 oc151 nc151 kc151 jc151 gDE5VE151 _nLeasBb151";
 function ProfileCard(props) {
 	const formatNumber = (num) => {
 		if (num >= 1e6) return `${(num / 1e6).toFixed(1)}M`;

package/dist/ProfileCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProfileCard.js","names":[],"sources":["../src/custom/profile-card/index.tsx"],"sourcesContent":["import type { JSX } from \"solid-js\";\nimport { Show } from \"solid-js\";\nimport { Avatar } from \"@proyecto-viviana/solid-spectrum\";\n// Styled via the S2 style() macro through viviana's own seam (../../style →\n// src/style.ts). Mirrors S2's UserCard shape (avatar + title/description +\n// footer actions) on the S2 spacing/radius/elevation ramps, in Silapse colors.\nimport { style } from \"../../style\" with { type: \"macro\" };\n\nexport interface ProfileCardProps {\n  username: string;\n  avatar?: string;\n  bio?: string;\n  followers?: number;\n  following?: number;\n  /**\n   * Actions to display below the profile.\n   * Use a function returning JSX for SSR compatibility: `actions={() => <Button>...</Button>}`\n   */\n  actions?: JSX.Element | (() => JSX.Element);\n  class?: string;\n}\n\nconst card = style({\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap: 16,\n  padding: 16,\n  borderRadius: \"lg\",\n  backgroundColor: \"[var(--color-bg-200)]\",\n  boxShadow: \"elevated\",\n});\n\nconst head = style({\n  display: \"flex\",\n  alignItems: \"start\",\n  gap: 16,\n});\n\nconst info = style({\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap: 4,\n  flexGrow: 1,\n  minWidth: 0,\n});\n\nconst name = style({\n  font: \"heading-sm\",\n  color: \"[var(--color-primary-100)]\",\n  overflow: \"hidden\",\n  textOverflow: \"ellipsis\",\n  whiteSpace: \"nowrap\",\n});\n\nconst bio = style({\n  font: \"ui-sm\",\n  color: \"[var(--color-text-secondary)]\",\n});\n\nconst stats = style({\n  display: \"flex\",\n  gap: 16,\n  font: \"ui-sm\",\n  color: \"[var(--color-text-secondary)]\",\n});\n\nconst statValue = style({\n  fontWeight: \"bold\",\n  color: \"[var(--color-primary-100)]\",\n});\n\nconst actionRow = style({\n  display: \"flex\",\n  gap: 8,\n});\n\nexport function ProfileCard(props: ProfileCardProps) {\n  const formatNumber = (num: number) => {\n    if (num >= 1000000) return `${(num / 1000000).toFixed(1)}M`;\n    if (num >= 1000) return `${(num / 1000).toFixed(1)}K`;\n    return num.toString();\n  };\n\n  return (\n    <div class={`${card} ${props.class ?? \"\"}`}>\n      <div class={head}>\n        <Avatar src={props.avatar} alt={props.username} size=\"lg\" />\n        <div class={info}>\n          <h3 class={name}>{props.username}</h3>\n          <Show when={props.bio}>\n            <p class={bio}>{props.bio}</p>\n          </Show>\n          <div class={stats}>\n            <Show when={props.followers !== undefined}>\n              <span>\n                <span class={statValue}>{formatNumber(props.followers!)}</span> seguidores\n              </span>\n            </Show>\n            <Show when={props.following !== undefined}>\n              <span>\n                <span class={statValue}>{formatNumber(props.following!)}</span> siguiendo\n              </span>\n            </Show>\n          </div>\n        </div>\n      </div>\n      <Show when={props.actions}>\n        <div class={actionRow}>\n          {typeof props.actions === \"function\" ? props.actions() : props.actions}\n        </div>\n      </Show>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;AAsBA,MAAM,OAAA;AAsDN,SAAgB,YAAY,OAAuB;CACjD,MAAM,gBAAgB,QAAW;EAC/B,IAAI,OAAO,KAAS,OAAO,IAAI,MAAM,KAAS,QAAQ,CAAA,EAAA;EACtD,IAAI,OAAO,KAAM,OAAO,IAAI,MAAM,KAAM,QAAQ,CAAA,EAAA;EAChD,OAAO,IAAI,SAAQ;CACrB;CAEA,cAAA;EAAA,IAAA,OAAA,eAAA,OAAA,GAAA,QAAA,KAAA,YAAA,SAAA,MAAA,YAAA,CAAA,QAAA,SAAA,cAAA,OAAA,WAAA,GAAA,QAAA,OAAA,aAAA,QAAA,MAAA,YAAA,SAAA,MAAA,aAAA,CAAA,QAAA,SAAA,cAAA,OAAA,WAAA,GAAA,QAAA,OAAA,aAAA,QAAA,MAAA,YAAA,CAAA,QAAA,QAAA,cAAA,MAAA,WAAA,GAAA,SAAA,OAAA,aAAA,CAAA,QAAA,SAAA,cAAA,OAAA,WAAA,GAAA,SAAA,MAAA,aAAA,CAAA,QAAA,SAAA,cAAA,OAAA,WAAA;EAAA,OAAA,OAAA,gBAGO,QAAA;GAAA,IAAO,MAAA;IAAA,OAAK,MAAM;GAAM;GAAA,IAAE,MAAA;IAAA,OAAK,MAAM;GAAQ;GAAE,MAAA;EAAA,CAAA,GAAA,QAAA,KAAA;EAAA,OAAA,aAE5B,MAAM,QAAQ;EAAA,OAAA,OAAA,gBAC/B,MAAA;GAAA,IAAK,OAAA;IAAA,OAAM,MAAM;GAAG;GAAA,IAAA,WAAA;IAAA,IAAA,QAAA,eAAA,MAAA;IAAA,OAAA,aACH,MAAM,GAAG;IAAA,OAAA;GAAA;EAAA,CAAA,GAAA,QAAA,KAAA;EAAA,OAAA,OAAA,gBAGxB,MAAA;GAAA,IAAK,OAAA;IAAA,OAAM,MAAM,cAAc,KAAA;GAAA;GAAA,IAAA,WAAA;IAAA,IAAA,QAAA,eAAA,OAAA,GAAA,QAAA,MAAA;IAAA,OAAA,aAEH,aAAa,MAAM,SAAS,CAAA;IAAA,OAAA;GAAA;EAAA,CAAA,GAAA,QAAA,IAAA;EAAA,OAAA,OAAA,gBAGxD,MAAA;GAAA,IAAK,OAAA;IAAA,OAAM,MAAM,cAAc,KAAA;GAAA;GAAA,IAAA,WAAA;IAAA,IAAA,QAAA,eAAA,OAAA,GAAA,QAAA,MAAA;IAAA,OAAA,aAEH,aAAa,MAAM,SAAS,CAAA;IAAA,OAAA;GAAA;EAAA,CAAA,GAAA,QAAA,KAAA;EAAA,OAAA,MAAA,gBAM9D,MAAA;GAAA,IAAK,OAAA;IAAA,OAAM,MAAM;GAAO;GAAA,IAAA,WAAA;IAAA,IAAA,SAAA,eAAA,OAAA;IAAA,OAAA,eAAA;KAAA,IAAA,MAAA,WAEpB,OAAO,MAAM,YAAY,UAAA;KAAA,aAAzB,IAAA,IAAsC,MAAM,QAAO,IAAK,MAAM;IAAO,GAAA,CAAA;IAAA,OAAA;GAAA;EAAA,CAAA,GAAA,QAAA,KAAA;EAAA,aAAA,UAAA,MAxBhE,GAAG,KAAA,GAAQ,MAAM,SAAS,IAAI,CAAA;EAAA,OAAA;CAAA,GAAA;AA6B9C"}
+{"version":3,"file":"ProfileCard.js","names":[],"sources":["../src/custom/profile-card/index.tsx"],"sourcesContent":["import type { JSX } from \"solid-js\";\nimport { Show } from \"solid-js\";\nimport { Avatar } from \"@proyecto-viviana/solid-spectrum\";\n// Styled via the S2 style() macro through viviana's own seam (../../style →\n// src/style.ts). Mirrors S2's UserCard shape (avatar + title/description +\n// footer actions) on the S2 spacing/radius/elevation ramps, in Silapse colors.\nimport { style } from \"../../style\" with { type: \"macro\" };\n\nexport interface ProfileCardProps {\n  username: string;\n  avatar?: string;\n  bio?: string;\n  followers?: number;\n  following?: number;\n  /**\n   * Actions to display below the profile.\n   * Use a function returning JSX for SSR compatibility: `actions={() => <Button>...</Button>}`\n   */\n  actions?: JSX.Element | (() => JSX.Element);\n  class?: string;\n}\n\nconst card = style({\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap: 16,\n  padding: 16,\n  borderRadius: \"lg\",\n  backgroundColor: \"[var(--color-bg-200)]\",\n  boxShadow: \"elevated\",\n});\n\nconst head = style({\n  display: \"flex\",\n  alignItems: \"start\",\n  gap: 16,\n});\n\nconst info = style({\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap: 4,\n  flexGrow: 1,\n  minWidth: 0,\n});\n\nconst name = style({\n  font: \"heading-sm\",\n  color: \"[var(--color-primary-100)]\",\n  overflow: \"hidden\",\n  textOverflow: \"ellipsis\",\n  whiteSpace: \"nowrap\",\n});\n\nconst bio = style({\n  font: \"ui-sm\",\n  // WCAG AA fix: the bio is small text (`ui-sm`) on the `--color-bg-200` card, so\n  // the 4.5:1 floor applies. `--color-text-secondary` read only 3.84:1 on the\n  // light-blue card (5.86:1 dark); `--color-text` flips and clears 4.5:1 both\n  // ways (15.33:1 dark / 7.53:1 light). The bio stays visually secondary to the\n  // `heading-sm` name through its smaller size, not a sub-AA color.\n  color: \"[var(--color-text)]\",\n});\n\nconst stats = style({\n  display: \"flex\",\n  gap: 16,\n  font: \"ui-sm\",\n  // WCAG AA fix: the stat connector words (\"seguidores\" / \"siguiendo\") share the\n  // bio's 3.84:1-light failure on the `--color-bg-200` card and take the same\n  // flipping `--color-text`. (The stat VALUES are `--color-primary-100`, which\n  // already clears AA — 13.47:1 dark / 10.37:1 light.)\n  color: \"[var(--color-text)]\",\n});\n\nconst statValue = style({\n  fontWeight: \"bold\",\n  color: \"[var(--color-primary-100)]\",\n});\n\nconst actionRow = style({\n  display: \"flex\",\n  gap: 8,\n});\n\nexport function ProfileCard(props: ProfileCardProps) {\n  const formatNumber = (num: number) => {\n    if (num >= 1000000) return `${(num / 1000000).toFixed(1)}M`;\n    if (num >= 1000) return `${(num / 1000).toFixed(1)}K`;\n    return num.toString();\n  };\n\n  return (\n    <div class={`${card} ${props.class ?? \"\"}`}>\n      <div class={head}>\n        <Avatar src={props.avatar} alt={props.username} size=\"lg\" />\n        <div class={info}>\n          <h3 class={name}>{props.username}</h3>\n          <Show when={props.bio}>\n            <p class={bio}>{props.bio}</p>\n          </Show>\n          <div class={stats}>\n            <Show when={props.followers !== undefined}>\n              <span>\n                <span class={statValue}>{formatNumber(props.followers!)}</span> seguidores\n              </span>\n            </Show>\n            <Show when={props.following !== undefined}>\n              <span>\n                <span class={statValue}>{formatNumber(props.following!)}</span> siguiendo\n              </span>\n            </Show>\n          </div>\n        </div>\n      </div>\n      <Show when={props.actions}>\n        <div class={actionRow}>\n          {typeof props.actions === \"function\" ? props.actions() : props.actions}\n        </div>\n      </Show>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAsBA,MAAM,OAAA;AA+DN,SAAgB,YAAY,OAAuB;CACjD,MAAM,gBAAgB,QAAW;EAC/B,IAAI,OAAO,KAAS,OAAO,IAAI,MAAM,KAAS,QAAQ,CAAA,EAAA;EACtD,IAAI,OAAO,KAAM,OAAO,IAAI,MAAM,KAAM,QAAQ,CAAA,EAAA;EAChD,OAAO,IAAI,SAAQ;CACrB;CAEA,cAAA;EAAA,IAAA,OAAA,eAAA,OAAA,GAAA,QAAA,KAAA,YAAA,SAAA,MAAA,YAAA,CAAA,QAAA,SAAA,cAAA,OAAA,WAAA,GAAA,QAAA,OAAA,aAAA,QAAA,MAAA,YAAA,SAAA,MAAA,aAAA,CAAA,QAAA,SAAA,cAAA,OAAA,WAAA,GAAA,QAAA,OAAA,aAAA,QAAA,MAAA,YAAA,CAAA,QAAA,QAAA,cAAA,MAAA,WAAA,GAAA,SAAA,OAAA,aAAA,CAAA,QAAA,SAAA,cAAA,OAAA,WAAA,GAAA,SAAA,MAAA,aAAA,CAAA,QAAA,SAAA,cAAA,OAAA,WAAA;EAAA,OAAA,OAAA,gBAGO,QAAA;GAAA,IAAO,MAAA;IAAA,OAAK,MAAM;GAAM;GAAA,IAAE,MAAA;IAAA,OAAK,MAAM;GAAQ;GAAE,MAAA;EAAA,CAAA,GAAA,QAAA,KAAA;EAAA,OAAA,aAE5B,MAAM,QAAQ;EAAA,OAAA,OAAA,gBAC/B,MAAA;GAAA,IAAK,OAAA;IAAA,OAAM,MAAM;GAAG;GAAA,IAAA,WAAA;IAAA,IAAA,QAAA,eAAA,MAAA;IAAA,OAAA,aACH,MAAM,GAAG;IAAA,OAAA;GAAA;EAAA,CAAA,GAAA,QAAA,KAAA;EAAA,OAAA,OAAA,gBAGxB,MAAA;GAAA,IAAK,OAAA;IAAA,OAAM,MAAM,cAAc,KAAA;GAAA;GAAA,IAAA,WAAA;IAAA,IAAA,QAAA,eAAA,OAAA,GAAA,QAAA,MAAA;IAAA,OAAA,aAEH,aAAa,MAAM,SAAS,CAAA;IAAA,OAAA;GAAA;EAAA,CAAA,GAAA,QAAA,IAAA;EAAA,OAAA,OAAA,gBAGxD,MAAA;GAAA,IAAK,OAAA;IAAA,OAAM,MAAM,cAAc,KAAA;GAAA;GAAA,IAAA,WAAA;IAAA,IAAA,QAAA,eAAA,OAAA,GAAA,QAAA,MAAA;IAAA,OAAA,aAEH,aAAa,MAAM,SAAS,CAAA;IAAA,OAAA;GAAA;EAAA,CAAA,GAAA,QAAA,KAAA;EAAA,OAAA,MAAA,gBAM9D,MAAA;GAAA,IAAK,OAAA;IAAA,OAAM,MAAM;GAAO;GAAA,IAAA,WAAA;IAAA,IAAA,SAAA,eAAA,OAAA;IAAA,OAAA,eAAA;KAAA,IAAA,MAAA,WAEpB,OAAO,MAAM,YAAY,UAAA;KAAA,aAAzB,IAAA,IAAsC,MAAM,QAAO,IAAK,MAAM;IAAO,GAAA,CAAA;IAAA,OAAA;GAAA;EAAA,CAAA,GAAA,QAAA,KAAA;EAAA,aAAA,UAAA,MAxBhE,GAAG,KAAA,GAAQ,MAAM,SAAS,IAAI,CAAA;EAAA,OAAA;CAAA,GAAA;AA6B9C"}

package/dist/ProfileCard.jsx

@@ -1,17 +1,16 @@
 /* empty css                                                                        */
 /* empty css                                                                        */
-/* empty css                                                                        */
 import { Avatar } from "@proyecto-viviana/solid-spectrum";
 import { Show } from "solid-js";
 //#region src/custom/profile-card/index.tsx
-const card = " sd13 _ta13 Ul13 ql13 Tf13 Qf13 Sf13 Rf13 oc13 nc13 kc13 jc13 gDE5VE13 _nLeasBb13";
-const head = " sd13 ed13 Ul13 ql13";
-const info = " sd13 _ta13 Ub13 qb13 _ub13 Na13";
-const name = " uk13 ucJ9TBTb13 ud3Euai13 uea13 ugb13 uhd13 uje13 u2NhKxcl13 uic13 -_6BNtrc-f13 vx13 xe13 _xa13 xX0cczbd13 _xX0cczba13 xfe13 _xfa13 xfX0cczbd13 _xfX0cczba13 _Fd13 _FnuYUweb13 pXDQpyb13 _Nc13 Pc13 _Yb13 _7c13";
-const bio = " uk13 ucJ9TBTb13 ud3Euai13 uea13 ugb13 uhd13 uje13 u2NhKxcl13 uic13 -_6BNtrc-b13 vx13 xb13 _xa13 _Fd13 _FnuYUweb13 pxeCuqc13";
-const stats = " sd13 Ul13 ql13 uk13 ucJ9TBTb13 ud3Euai13 uea13 ugb13 uhd13 uje13 u2NhKxcl13 uic13 -_6BNtrc-b13 vx13 xb13 _xa13 _Fd13 _FnuYUweb13 pxeCuqc13";
-const statValue = " xd13 _xa13 xX0cczbc13 _xX0cczba13 pXDQpyb13";
-const actionRow = " sd13 Ue13 qe13";
+const card = " sd151 _ta151 Ul151 ql151 Tf151 Qf151 Sf151 Rf151 oc151 nc151 kc151 jc151 gDE5VE151 _nLeasBb151";
+const head = " sd151 ed151 Ul151 ql151";
+const info = " sd151 _ta151 Ub151 qb151 _ub151 Na151";
+const name = " uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-f151 vx151 xe151 _xa151 xX0cczbd151 _xX0cczba151 xfe151 _xfa151 xfX0cczbd151 _xfX0cczba151 _Fd151 _FnuYUweb151 pXDQpyb151 _Nc151 Pc151 _Yb151 _7c151";
+const bio = " uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-b151 vx151 xb151 _xa151 _Fd151 _FnuYUweb151 pO550xe151";
+const stats = " sd151 Ul151 ql151 uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-b151 vx151 xb151 _xa151 _Fd151 _FnuYUweb151 pO550xe151";
+const statValue = " xd151 _xa151 xX0cczbc151 _xX0cczba151 pXDQpyb151";
+const actionRow = " sd151 Ue151 qe151";
 function ProfileCard(props) {
 	const formatNumber = (num) => {
 		if (num >= 1e6) return `${(num / 1e6).toFixed(1)}M`;