onecart-ui 1.0.2 → 1.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,WAAW,EAAe,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,WAAW,EAAe,MAAM,oBAAoB,CAAC;AAK9D,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAqPxC,CAAC"}
|
package/dist/index.esm.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as e,jsxs as t}from"react/jsx-runtime";import o,{useState as n,createContext as a,useContext as i}from"react";const r=[{name:"arrow-up",path:"M8 3.33325L8 12.6666 M3.33331 7.99992L8 3.33325L12.6666 7.99992",viewBox:"0 0 16 16"},{name:"arrow-down",path:"M8 12.6666L8 3.33325 M12.6667 8.00008L8 12.6667L3.33335 8.00008",viewBox:"0 0 16 16"},{name:"arrow-left",path:"M12.6666 8.00008L3.33331 8.00008 M7.99998 3.33341L3.33331 8.00008L7.99998 12.6667",viewBox:"0 0 16 16"},{name:"arrow-right",path:"M3.33331 8.00008L12.6666 8.00008 M7.99998 12.6667L12.6666 8.00008L7.99998 3.33341",viewBox:"0 0 16 16"},{name:"check",path:"M13.3333 4.66675L6.66667 11.3334L3.33333 8.00008",viewBox:"0 0 16 16"},{name:"cross",path:"M12 4L4 12 M4 4L12 12",viewBox:"0 0 16 16"},{name:"plus",path:"M8 3.33325V12.6666 M3.33331 7.99992H12.6666",viewBox:"0 0 16 16"},{name:"minus",path:"M3.33331 7.99992H12.6666",viewBox:"0 0 16 16"},{name:"search",path:"M7.33333 12.6667C10.2789 12.6667 12.6667 10.2789 12.6667 7.33333C12.6667 4.38781 10.2789 2 7.33333 2C4.38781 2 2 4.38781 2 7.33333C2 10.2789 4.38781 12.6667 7.33333 12.6667Z M12.6667 12.6667L14 14",viewBox:"0 0 16 16"},{name:"home",path:"M2 6L8 2L14 6V14H10V10H6V14H2V6Z",viewBox:"0 0 16 16",fill:"currentColor"},{name:"settings",path:"M6.4 14H9.6C9.6 14 9.8 13.1 10.4 12.8C11 12.5 11.9 12.8 12.4 12.3C12.8 11.9 12.6 10.9 12.8 10.4C13.1 9.8 14 9.6 14 9.6V6.4C14 6.4 13.1 6.2 12.8 5.6C12.5 5 12.8 4.1 12.3 3.6C11.9 3.2 10.9 3.4 10.4 3.2C9.8 2.9 9.6 2 9.6 2H6.4C6.4 2 6.2 2.9 5.6 3.2C5 3.5 4.1 3.2 3.6 3.7C3.2 4.1 3.4 5.1 3.2 5.6C2.9 6.2 2 6.4 2 6.4V9.6C2 9.6 2.9 9.8 3.2 10.4C3.5 11 3.2 11.9 3.7 12.4C4.1 12.8 5.1 12.6 5.6 12.8C6.2 13.1 6.4 14 6.4 14Z M10 8C10 9.1 9.1 10 8 10C6.9 10 6 9.1 6 8C6 6.9 6.9 6 8 6C9.1 6 10 6.9 10 8Z",viewBox:"0 0 16 16"},{name:"user",path:"M11 4C11 5.65685 9.65685 7 8 7C6.34315 7 5 5.65685 5 4C5 2.34315 6.34315 1 8 1C9.65685 1 11 2.34315 11 4Z M1 14C1 14 1 12 3 11C5 10 11 10 13 11C15 12 15 14 15 14",viewBox:"0 0 16 16"},{name:"cart",path:"M5.5 14C5.77614 14 6 13.7761 6 13.5C6 13.2239 5.77614 13 5.5 13C5.22386 13 5 13.2239 5 13.5C5 13.7761 5.22386 14 5.5 14Z M12.5 14C12.7761 14 13 13.7761 13 13.5C13 13.2239 12.7761 13 12.5 13C12.2239 13 12 13.2239 12 13.5C12 13.7761 12.2239 14 12.5 14Z M1 1H3L4.6 9.6C4.63333 9.74056 4.7247 9.86412 4.85172 9.94984C4.97873 10.0356 5.13221 10.0769 5.28571 10.0714H12.1429C12.2964 10.0769 12.4499 10.0356 12.5769 9.94984C12.7039 9.86412 12.7952 9.74056 12.8286 9.6L14 4H4",viewBox:"0 0 16 16"},{name:"heart",path:"M13.6319 3.36825C13.2475 2.98368 12.7898 2.67897 12.2843 2.47298C11.7788 2.267 11.2371 2.16341 10.69 2.16797C10.1429 2.16341 9.60127 2.267 9.09575 2.47298C8.59023 2.67897 8.13254 2.98368 7.74805 3.36825L7.00005 4.11625L6.25205 3.36825C5.4676 2.58281 4.40687 2.16036 3.31005 2.16797C2.21322 2.16036 1.1525 2.58281 0.368046 3.36825C-0.41646 4.15369 -0.838915 5.21442 -0.83131 6.31125C-0.838915 7.40807 -0.41646 8.4688 0.368046 9.25425L7.00005 15.8862L13.6319 9.25425C14.0165 8.86975 14.3212 8.41207 14.5272 7.90655C14.7332 7.40102 14.8368 6.85936 14.8322 6.31225C14.8368 5.76513 14.7332 5.22347 14.5272 4.71795C14.3212 4.21242 14.0165 3.75474 13.6319 3.37025V3.36825Z",viewBox:"0 0 16 16"},{name:"star",path:"M7.99998 1.33325L10.06 5.5066L14.6666 6.17994L11.3333 9.42661L12.12 14.0133L7.99998 11.8466L3.87998 14.0133L4.66665 9.42661L1.33331 6.17994L5.93998 5.5066L7.99998 1.33325Z",viewBox:"0 0 16 16",fill:"currentColor"}],l=new Map;r.forEach((e=>{l.set(e.name,e)}));const s=({name:t,size:o=24,color:n="currentColor",className:a="",style:i={},onClick:r,ariaLabel:s})=>{const c=l.get(t);if(!c)return console.warn(`Icon "${t}" not found`),null;const p=c.path.split(" M ").map(((e,t)=>0===t?e:`M ${e}`)),d={display:"inline-block",verticalAlign:"middle",...i};return e("svg",{width:o,height:o,viewBox:c.viewBox,fill:"none",xmlns:"http://www.w3.org/2000/svg",className:a,style:d,onClick:r,"aria-label":s||`${t} icon`,role:"img",children:p.map(((t,o)=>e("path",{d:t,stroke:c.fill?"none":n,fill:c.fill?n:"none",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"},o)))})},c=({searchQuery:o="",iconSize:n=24,iconColor:a="currentColor",onIconClick:i})=>{const l=o?r.filter((e=>e.name.toLowerCase().includes(o.toLowerCase()))):r;return e("div",{children:0===l.length?t("div",{style:{padding:"20px",textAlign:"center"},children:['No icons found matching "',o,'"']}):e("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fill, minmax(100px, 1fr))",gap:"20px"},children:l.map((o=>t("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",padding:"12px",border:"1px solid #eee",borderRadius:"8px",cursor:i?"pointer":"default",transition:"all 0.2s ease-in-out"},onClick:()=>{return e=o.name,void(i&&i(e));var e},onMouseOver:e=>{e.currentTarget.style.backgroundColor="#f9f9f9",e.currentTarget.style.transform="translateY(-2px)",e.currentTarget.style.boxShadow="0 2px 8px rgba(0,0,0,0.05)"},onMouseOut:e=>{e.currentTarget.style.backgroundColor="transparent",e.currentTarget.style.transform="translateY(0)",e.currentTarget.style.boxShadow="none"},children:[e("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",height:"50px",marginBottom:"8px"},children:e(s,{name:o.name,size:n,color:a})}),e("div",{style:{fontSize:"12px",textAlign:"center",wordBreak:"break-word"},children:o.name})]},o.name)))})})},p=({label:o,type:a="primary",size:i="large",disabled:r=!1,leftIcon:l,rightIcon:c,icon:p,fullWidth:d=!1,style:h,accessibilityLabel:g,testID:m,onClick:x,className:u,onMouseEnter:f,onMouseLeave:y,onMouseDown:b,onMouseUp:C})=>{const v=!!p,w=l?e(s,{name:l,size:"large"===i?20:16}):null,k=c?e(s,{name:c,size:"large"===i?20:16}):null,S=p?e(s,{name:p,size:"large"===i?20:16}):null,[L,F]=n(r?"disabled":"default"),B=l&&c;return t("button",{style:(()=>{const e={display:v?"inline-flex":"flex",width:v?"auto":d?"100%":"9.375rem",height:"large"===i?"2.75rem":"2rem",padding:"ghost"===a?"var(--spacing-0, 0rem)":"var(--component-card-sm, 0.75rem)",justifyContent:"center",alignItems:"center",gap:B?"var(--layout-spacing-inline-md, 1rem)":"var(--layout-spacing-inline-xs, 0.5rem)",flexShrink:0,borderRadius:"var(--button-full, 62.4375rem)",cursor:r?"not-allowed":"pointer",opacity:r?.6:1,transition:"all 0.2s ease-in-out",border:"none"};switch(a){case"primary":switch(L){case"default":e.background="var(--action-primary-default, #00DF88)";break;case"hover":e.background="var(--action-primary-hover, #4CE9AC)";break;case"active":e.background="var(--action-primary-active, #98F2CF)";break;case"disabled":e.background="var(--action-primary-disabled, #00DF88)",e.opacity=.6}break;case"outline":switch(e.background="transparent",L){case"default":e.border="var(--button-default, 1px) solid var(--action-tertiary-default, #3B3B3B)";break;case"hover":e.border="var(--button-hover, 2px) solid var(--action-tertiary-hover, #111)";break;case"active":e.border="var(--button-pressed, 2px) solid var(--action-tertiary-active, #ABABAB)";break;case"disabled":e.border="var(--button-default, 1px) solid var(--action-tertiary-disabled, #3B3B3B)",e.opacity=.6}break;case"ghost":e.background="transparent";break;case"destructive":switch(e.background="transparent",L){case"default":e.color="var(--action-destructive-hover, #FF3B30)";break;case"hover":e.color="var(--action-destructive-default, #D60000)";break;case"active":e.color="var(--action-destructive-active, #FF6259)";break;case"disabled":e.color="var(--action-destructive-disabled, #D60000)",e.opacity=.6}}return{...e,...h}})(),onClick:x,disabled:r,"aria-label":g||o,"data-testid":m,className:u,onMouseEnter:e=>{r||(F("hover"),f&&f(e))},onMouseLeave:e=>{r||(F("default"),y&&y(e))},onMouseDown:e=>{r||(F("active"),b&&b(e))},onMouseUp:e=>{r||(F("hover"),C&&C(e))},children:[!v&&l&&e("span",{style:{display:"flex",alignItems:"center",justifyContent:"center",color:"currentColor"},className:"button-left-icon",children:w}),!v&&e("span",{style:(()=>{const e={fontFamily:'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',fontWeight:500,fontSize:"large"===i?"1rem":"0.875rem",transition:"all 0.2s ease-in-out"};switch(a){case"primary":e.color="var(--neutral-80, #3B3B3B)";break;case"outline":case"ghost":switch(L){case"default":e.color="var(--action-tertiary-default, #3B3B3B)";break;case"hover":e.color="var(--action-tertiary-hover, #111)";break;case"active":e.color="var(--action-tertiary-active, #ABABAB)";break;case"disabled":e.color="var(--action-tertiary-disabled, #3B3B3B)"}}return e})(),children:o}),v&&e("span",{style:{display:"flex",alignItems:"center",justifyContent:"center",color:"currentColor"},children:S}),!v&&c&&e("span",{style:{display:"flex",alignItems:"center",justifyContent:"center",color:"currentColor"},className:"button-right-icon",children:k})]})},d="#525252",h="#3b3b3b",g="#111",m="Campton",x="book",u="16px",f="12px",y="none",b="none",C=e=>e&&"string"==typeof e?parseFloat(e.replace("px","")):0,v=e=>"number"==typeof e?e.toString():"book"===e?"400":e,w={display2xl:{fontFamily:"Campton",fontSize:C("52px"),fontWeight:v(500),lineHeight:C("56px"),color:g,letterSpacing:"0%",textDecoration:"none",textCase:"none"},displayXl:{fontFamily:"Campton",fontSize:C("44px"),fontWeight:v(500),lineHeight:C("48px"),color:g,letterSpacing:"0%",textDecoration:"none",textCase:"none"},headingXl:{fontFamily:"Campton",fontSize:C("40px"),fontWeight:v(600),lineHeight:C("44px"),color:g,letterSpacing:"0%",textDecoration:"none",textCase:"none"},headingLg:{fontFamily:"Campton",fontSize:C("36px"),fontWeight:v(600),lineHeight:C("40px"),color:g,letterSpacing:"0%",textDecoration:"none",textCase:"none"},headingMd:{fontFamily:"Campton",fontSize:C("32px"),fontWeight:v(600),lineHeight:C("36px"),color:g,letterSpacing:"0%",textDecoration:"none",textCase:"none"},headingSm:{fontFamily:"Campton",fontSize:C("28px"),fontWeight:v(600),lineHeight:C("32px"),color:g,letterSpacing:"0%",textDecoration:"none",textCase:"none"},headingXs:{fontFamily:"Campton",fontSize:C("20px"),fontWeight:v(600),lineHeight:C("28px"),color:g,letterSpacing:"0%",textDecoration:"none",textCase:"none"},bodyXl:{fontFamily:"Campton",fontSize:C("18px"),fontWeight:v("book"),lineHeight:C("28px"),color:h,letterSpacing:"0%",textDecoration:"none",textCase:"none",paragraphIndent:"0px"},bodyLg:{fontFamily:"Campton",fontSize:C("16px"),fontWeight:v("book"),lineHeight:C("24px"),color:h,letterSpacing:"0%",textDecoration:"none",textCase:"none",paragraphIndent:"0px"},bodyMd:{fontFamily:"Campton",fontSize:C("14px"),fontWeight:v("book"),lineHeight:C("20px"),color:h,letterSpacing:"0%",textDecoration:"none",textCase:"none",paragraphIndent:"0px"},bodySm:{fontFamily:"Campton",fontSize:C("12px"),fontWeight:v("book"),lineHeight:C("20px"),color:h,letterSpacing:"0%",textDecoration:"none",textCase:"none",paragraphIndent:"0px"},bodyXs:{fontFamily:m,fontSize:C(f),fontWeight:v(x),lineHeight:C(u),color:h,letterSpacing:"0%",textDecoration:b,textCase:y,paragraphIndent:"0px"},labelLg:{fontFamily:"Campton",fontSize:C("16px"),fontWeight:v(500),lineHeight:C("16px"),color:d,letterSpacing:"0%",textDecoration:"none",textCase:"none"},labelMd:{fontFamily:"Campton",fontSize:C("14px"),fontWeight:v(500),lineHeight:C("20px"),color:d,letterSpacing:"0%",textDecoration:"none",textCase:"none"},labelSm:{fontFamily:m,fontSize:C(f),fontWeight:v(x),lineHeight:C(u),color:d,letterSpacing:"0%",textDecoration:b,textCase:y},weights:{normal:"400",medium:v(500),semibold:v(600),bold:"700"}},k=({size:t="2xl",element:o="h1",align:n="left",weight:a,color:i,truncate:r=!1,lineClamp:l,children:s,className:c="",style:p={},onClick:d,testID:h,...g})=>{const m={...(()=>{const e="2xl"===t?w.display2xl:w.displayXl;let o=parseInt(e.fontWeight);a&&("normal"===a?o=400:"medium"===a?o=500:"semibold"===a?o=600:"bold"===a&&(o=700));const s={fontFamily:e.fontFamily,fontSize:`${e.fontSize}px`,lineHeight:`${e.lineHeight}px`,fontWeight:o,color:i||e.color,textAlign:n,letterSpacing:e.letterSpacing,textDecoration:e.textDecoration||"none"};return r&&(s.whiteSpace="nowrap",s.overflow="hidden",s.textOverflow="ellipsis",s.display="block"),l&&l>0&&(s.display="-webkit-box",s.WebkitLineClamp=l,s.WebkitBoxOrient="vertical",s.overflow="hidden",s.textOverflow="ellipsis"),s})(),...p};return e(o,{style:m,className:c,"data-testid":h,onClick:d,...g,children:s})},S=({size:t="xl",element:o="h2",align:n="left",weight:a,color:i,truncate:r=!1,lineClamp:l,children:s,className:c="",style:p={},onClick:d,testID:h,...g})=>{const m={...(()=>{const e=w[{xl:"headingXl",lg:"headingLg",md:"headingMd",sm:"headingSm",xs:"headingXs"}[t]],o=a?parseInt(w.weights[a]):parseInt(e.fontWeight);return{...{fontFamily:e.fontFamily,fontSize:`${e.fontSize}px`,lineHeight:`${e.lineHeight}px`,fontWeight:o,color:i||e.color,textAlign:n,letterSpacing:e.letterSpacing,textDecoration:e.textDecoration||"none"},...r?{whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",display:"block"}:{},...l&&l>0?{display:"-webkit-box",WebkitLineClamp:l,WebkitBoxOrient:"vertical",overflow:"hidden",textOverflow:"ellipsis"}:{}}})(),...p};return e("h2"===o?{xl:"h1",lg:"h2",md:"h3",sm:"h4",xs:"h5"}[t]:o,{style:m,className:c,"data-testid":h,onClick:d,..."a"===o?g:{},children:s})},L=({size:t="lg",element:o="p",align:n="left",weight:a,color:i,truncate:r=!1,lineClamp:l,children:s,className:c="",style:p={},onClick:d,testID:h,...g})=>{const m={...(()=>{let e;switch(t){case"xl":e=w.bodyXl;break;case"lg":e=w.bodyLg;break;case"md":e=w.bodyMd;break;case"sm":e=w.bodySm}let o=parseInt(e.fontWeight);a&&("normal"===a?o=400:"medium"===a?o=500:"semibold"===a?o=600:"bold"===a&&(o=700));const s={fontFamily:e.fontFamily,fontSize:`${e.fontSize}px`,lineHeight:`${e.lineHeight}px`,fontWeight:o,color:i||e.color,textAlign:n,letterSpacing:e.letterSpacing,textDecoration:e.textDecoration||"none"};return r&&(s.whiteSpace="nowrap",s.overflow="hidden",s.textOverflow="ellipsis",s.display="block"),l&&l>0&&(s.display="-webkit-box",s.WebkitLineClamp=l,s.WebkitBoxOrient="vertical",s.overflow="hidden",s.textOverflow="ellipsis"),s})(),...p};return e(o,{style:m,className:c,"data-testid":h,onClick:d,..."a"===o?g:{},children:s})},F=({variant:t="button",element:o,align:n="left",weight:a,color:i,truncate:r=!1,lineClamp:l,children:s,className:c="",style:p={},onClick:d,testID:h,...g})=>{const m=o||(()=>{switch(t){case"button":case"caption":default:return"span";case"link":return"a"}})(),x={...(()=>{let e;switch(t){case"button":e=w.labelLg;break;case"link":e=w.labelMd;break;case"caption":e=w.labelSm}let o=parseInt(e.fontWeight);a&&("normal"===a?o=400:"medium"===a?o=500:"semibold"===a?o=600:"bold"===a&&(o=700));const s={fontFamily:e.fontFamily,fontSize:`${e.fontSize}px`,lineHeight:`${e.lineHeight}px`,fontWeight:o,color:i||e.color,textAlign:n,letterSpacing:e.letterSpacing,textDecoration:"link"===t?"underline":e.textDecoration||"none"};return r&&(s.whiteSpace="nowrap",s.overflow="hidden",s.textOverflow="ellipsis",s.display="block"),l&&l>0&&(s.display="-webkit-box",s.WebkitLineClamp=l,s.WebkitBoxOrient="vertical",s.overflow="hidden",s.textOverflow="ellipsis"),s})(),...p};return e(m,{style:x,className:c,"data-testid":h,onClick:d,..."a"===m?g:{},children:s})},B={colors:{primary:"#007AFF",secondary:"#5856D6",background:"#FFFFFF",surface:"#F2F2F7",text:"#000000",textSecondary:"#8E8E93",border:"#E5E5EA",error:"#FF3B30",warning:"#FF9500",success:"#34C759"},spacing:{xs:4,sm:8,md:16,lg:24,xl:32},borderRadius:{none:0,sm:4,md:8,lg:12,full:9999},typography:{fontSize:{xs:12,sm:14,md:16,lg:18,xl:20,xxl:24},fontWeight:{normal:"400",medium:"500",semibold:"600",bold:"700"},lineHeight:{tight:1.2,normal:1.5,relaxed:1.8}}},M=a(void 0),z=({children:t,theme:n})=>{const a=o.useMemo((()=>{var e,t,o;return{...B,...n,colors:{...B.colors,...null==n?void 0:n.colors},spacing:{...B.spacing,...null==n?void 0:n.spacing},borderRadius:{...B.borderRadius,...null==n?void 0:n.borderRadius},typography:{...B.typography,...null==n?void 0:n.typography,fontSize:{...B.typography.fontSize,...null===(e=null==n?void 0:n.typography)||void 0===e?void 0:e.fontSize},fontWeight:{...B.typography.fontWeight,...null===(t=null==n?void 0:n.typography)||void 0===t?void 0:t.fontWeight},lineHeight:{...B.typography.lineHeight,...null===(o=null==n?void 0:n.typography)||void 0===o?void 0:o.lineHeight}}}}),[n]),i=o.useCallback((e=>{console.log("Theme update requested, but we are using static theme for now.",e)}),[]);return e(M.Provider,{value:{theme:a,updateTheme:i},children:t})},W=()=>{const e=i(M);if(!e)throw new Error("useTheme must be used within a ThemeProvider");return e};export{L as Body,p as Button,k as Display,S as Heading,s as Icon,c as IconList,z as ThemeProvider,F as Utility,B as defaultTheme,r as icons,W as useTheme};
|
|
1
|
+
import e,{useState as t,createContext as n,useContext as o}from"react";const a=[{name:"arrow-up",path:"M8 3.33325L8 12.6666 M3.33331 7.99992L8 3.33325L12.6666 7.99992",viewBox:"0 0 16 16"},{name:"arrow-down",path:"M8 12.6666L8 3.33325 M12.6667 8.00008L8 12.6667L3.33335 8.00008",viewBox:"0 0 16 16"},{name:"arrow-left",path:"M12.6666 8.00008L3.33331 8.00008 M7.99998 3.33341L3.33331 8.00008L7.99998 12.6667",viewBox:"0 0 16 16"},{name:"arrow-right",path:"M3.33331 8.00008L12.6666 8.00008 M7.99998 12.6667L12.6666 8.00008L7.99998 3.33341",viewBox:"0 0 16 16"},{name:"check",path:"M13.3333 4.66675L6.66667 11.3334L3.33333 8.00008",viewBox:"0 0 16 16"},{name:"cross",path:"M12 4L4 12 M4 4L12 12",viewBox:"0 0 16 16"},{name:"plus",path:"M8 3.33325V12.6666 M3.33331 7.99992H12.6666",viewBox:"0 0 16 16"},{name:"minus",path:"M3.33331 7.99992H12.6666",viewBox:"0 0 16 16"},{name:"search",path:"M7.33333 12.6667C10.2789 12.6667 12.6667 10.2789 12.6667 7.33333C12.6667 4.38781 10.2789 2 7.33333 2C4.38781 2 2 4.38781 2 7.33333C2 10.2789 4.38781 12.6667 7.33333 12.6667Z M12.6667 12.6667L14 14",viewBox:"0 0 16 16"},{name:"home",path:"M2 6L8 2L14 6V14H10V10H6V14H2V6Z",viewBox:"0 0 16 16",fill:"currentColor"},{name:"settings",path:"M6.4 14H9.6C9.6 14 9.8 13.1 10.4 12.8C11 12.5 11.9 12.8 12.4 12.3C12.8 11.9 12.6 10.9 12.8 10.4C13.1 9.8 14 9.6 14 9.6V6.4C14 6.4 13.1 6.2 12.8 5.6C12.5 5 12.8 4.1 12.3 3.6C11.9 3.2 10.9 3.4 10.4 3.2C9.8 2.9 9.6 2 9.6 2H6.4C6.4 2 6.2 2.9 5.6 3.2C5 3.5 4.1 3.2 3.6 3.7C3.2 4.1 3.4 5.1 3.2 5.6C2.9 6.2 2 6.4 2 6.4V9.6C2 9.6 2.9 9.8 3.2 10.4C3.5 11 3.2 11.9 3.7 12.4C4.1 12.8 5.1 12.6 5.6 12.8C6.2 13.1 6.4 14 6.4 14Z M10 8C10 9.1 9.1 10 8 10C6.9 10 6 9.1 6 8C6 6.9 6.9 6 8 6C9.1 6 10 6.9 10 8Z",viewBox:"0 0 16 16"},{name:"user",path:"M11 4C11 5.65685 9.65685 7 8 7C6.34315 7 5 5.65685 5 4C5 2.34315 6.34315 1 8 1C9.65685 1 11 2.34315 11 4Z M1 14C1 14 1 12 3 11C5 10 11 10 13 11C15 12 15 14 15 14",viewBox:"0 0 16 16"},{name:"cart",path:"M5.5 14C5.77614 14 6 13.7761 6 13.5C6 13.2239 5.77614 13 5.5 13C5.22386 13 5 13.2239 5 13.5C5 13.7761 5.22386 14 5.5 14Z M12.5 14C12.7761 14 13 13.7761 13 13.5C13 13.2239 12.7761 13 12.5 13C12.2239 13 12 13.2239 12 13.5C12 13.7761 12.2239 14 12.5 14Z M1 1H3L4.6 9.6C4.63333 9.74056 4.7247 9.86412 4.85172 9.94984C4.97873 10.0356 5.13221 10.0769 5.28571 10.0714H12.1429C12.2964 10.0769 12.4499 10.0356 12.5769 9.94984C12.7039 9.86412 12.7952 9.74056 12.8286 9.6L14 4H4",viewBox:"0 0 16 16"},{name:"heart",path:"M13.6319 3.36825C13.2475 2.98368 12.7898 2.67897 12.2843 2.47298C11.7788 2.267 11.2371 2.16341 10.69 2.16797C10.1429 2.16341 9.60127 2.267 9.09575 2.47298C8.59023 2.67897 8.13254 2.98368 7.74805 3.36825L7.00005 4.11625L6.25205 3.36825C5.4676 2.58281 4.40687 2.16036 3.31005 2.16797C2.21322 2.16036 1.1525 2.58281 0.368046 3.36825C-0.41646 4.15369 -0.838915 5.21442 -0.83131 6.31125C-0.838915 7.40807 -0.41646 8.4688 0.368046 9.25425L7.00005 15.8862L13.6319 9.25425C14.0165 8.86975 14.3212 8.41207 14.5272 7.90655C14.7332 7.40102 14.8368 6.85936 14.8322 6.31225C14.8368 5.76513 14.7332 5.22347 14.5272 4.71795C14.3212 4.21242 14.0165 3.75474 13.6319 3.37025V3.36825Z",viewBox:"0 0 16 16"},{name:"star",path:"M7.99998 1.33325L10.06 5.5066L14.6666 6.17994L11.3333 9.42661L12.12 14.0133L7.99998 11.8466L3.87998 14.0133L4.66665 9.42661L1.33331 6.17994L5.93998 5.5066L7.99998 1.33325Z",viewBox:"0 0 16 16",fill:"currentColor"}],i=new Map;a.forEach((e=>{i.set(e.name,e)}));const l=({name:t,size:n=24,color:o="currentColor",className:a="",style:l={},onClick:r,ariaLabel:s})=>{const c=i.get(t);if(!c)return console.warn(`Icon "${t}" not found`),null;const p=c.path.split(" M ").map(((e,t)=>0===t?e:`M ${e}`)),d={display:"inline-block",verticalAlign:"middle",...l};return e.createElement("svg",{width:n,height:n,viewBox:c.viewBox,fill:"none",xmlns:"http://www.w3.org/2000/svg",className:a,style:d,onClick:r,"aria-label":s||`${t} icon`,role:"img"},p.map(((t,n)=>e.createElement("path",{key:n,d:t,stroke:c.fill?"none":o,fill:c.fill?o:"none",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}))))},r=({searchQuery:t="",iconSize:n=24,iconColor:o="currentColor",onIconClick:i})=>{const r=t?a.filter((e=>e.name.toLowerCase().includes(t.toLowerCase()))):a;return e.createElement("div",null,0===r.length?e.createElement("div",{style:{padding:"20px",textAlign:"center"}},'No icons found matching "',t,'"'):e.createElement("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fill, minmax(100px, 1fr))",gap:"20px"}},r.map((t=>e.createElement("div",{key:t.name,style:{display:"flex",flexDirection:"column",alignItems:"center",padding:"12px",border:"1px solid #eee",borderRadius:"8px",cursor:i?"pointer":"default",transition:"all 0.2s ease-in-out"},onClick:()=>{return e=t.name,void(i&&i(e));var e},onMouseOver:e=>{e.currentTarget.style.backgroundColor="#f9f9f9",e.currentTarget.style.transform="translateY(-2px)",e.currentTarget.style.boxShadow="0 2px 8px rgba(0,0,0,0.05)"},onMouseOut:e=>{e.currentTarget.style.backgroundColor="transparent",e.currentTarget.style.transform="translateY(0)",e.currentTarget.style.boxShadow="none"}},e.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",height:"50px",marginBottom:"8px"}},e.createElement(l,{name:t.name,size:n,color:o})),e.createElement("div",{style:{fontSize:"12px",textAlign:"center",wordBreak:"break-word"}},t.name))))))},s="0.0625rem",c="#525252",p="#3b3b3b",d="#111",m="#3b3b3b",g="#111",h="#ababab",x="#f1f1f1",f="Campton",u="book",b="16px",C="12px",y="none",w="none",k=e=>e&&"string"==typeof e?parseFloat(e.replace("px","")):0,v=e=>"number"==typeof e?e.toString():"book"===e?"400":e,S={display2xl:{fontFamily:"Campton",fontSize:k("52px"),fontWeight:v(500),lineHeight:k("56px"),color:d,letterSpacing:"0%",textDecoration:"none",textCase:"none"},displayXl:{fontFamily:"Campton",fontSize:k("44px"),fontWeight:v(500),lineHeight:k("48px"),color:d,letterSpacing:"0%",textDecoration:"none",textCase:"none"},headingXl:{fontFamily:"Campton",fontSize:k("40px"),fontWeight:v(600),lineHeight:k("44px"),color:d,letterSpacing:"0%",textDecoration:"none",textCase:"none"},headingLg:{fontFamily:"Campton",fontSize:k("36px"),fontWeight:v(600),lineHeight:k("40px"),color:d,letterSpacing:"0%",textDecoration:"none",textCase:"none"},headingMd:{fontFamily:"Campton",fontSize:k("32px"),fontWeight:v(600),lineHeight:k("36px"),color:d,letterSpacing:"0%",textDecoration:"none",textCase:"none"},headingSm:{fontFamily:"Campton",fontSize:k("28px"),fontWeight:v(600),lineHeight:k("32px"),color:d,letterSpacing:"0%",textDecoration:"none",textCase:"none"},headingXs:{fontFamily:"Campton",fontSize:k("20px"),fontWeight:v(600),lineHeight:k("28px"),color:d,letterSpacing:"0%",textDecoration:"none",textCase:"none"},bodyXl:{fontFamily:"Campton",fontSize:k("18px"),fontWeight:v("book"),lineHeight:k("28px"),color:p,letterSpacing:"0%",textDecoration:"none",textCase:"none",paragraphIndent:"0px"},bodyLg:{fontFamily:"Campton",fontSize:k("16px"),fontWeight:v("book"),lineHeight:k("24px"),color:p,letterSpacing:"0%",textDecoration:"none",textCase:"none",paragraphIndent:"0px"},bodyMd:{fontFamily:"Campton",fontSize:k("14px"),fontWeight:v("book"),lineHeight:k("20px"),color:p,letterSpacing:"0%",textDecoration:"none",textCase:"none",paragraphIndent:"0px"},bodySm:{fontFamily:"Campton",fontSize:k("12px"),fontWeight:v("book"),lineHeight:k("20px"),color:p,letterSpacing:"0%",textDecoration:"none",textCase:"none",paragraphIndent:"0px"},bodyXs:{fontFamily:f,fontSize:k(C),fontWeight:v(u),lineHeight:k(b),color:p,letterSpacing:"0%",textDecoration:w,textCase:y,paragraphIndent:"0px"},labelLg:{fontFamily:"Campton",fontSize:k("16px"),fontWeight:v(500),lineHeight:k("16px"),color:c,letterSpacing:"0%",textDecoration:"none",textCase:"none"},labelMd:{fontFamily:"Campton",fontSize:k("14px"),fontWeight:v(500),lineHeight:k("20px"),color:c,letterSpacing:"0%",textDecoration:"none",textCase:"none"},labelSm:{fontFamily:f,fontSize:k(C),fontWeight:v(u),lineHeight:k(b),color:c,letterSpacing:"0%",textDecoration:w,textCase:y},weights:{normal:"400",medium:v(500),semibold:v(600),bold:"700"}},L=({label:n,type:o="primary",size:a="large",disabled:i=!1,leftIcon:r,rightIcon:c,icon:p,fullWidth:d=!1,style:f,accessibilityLabel:u,testID:b,onClick:C,className:y,onMouseEnter:w,onMouseLeave:k,onMouseDown:v,onMouseUp:L})=>{const M=!!p,F=r?e.createElement(l,{name:r,size:"large"===a?20:16}):null,z=c?e.createElement(l,{name:c,size:"large"===a?20:16}):null,H=p?e.createElement(l,{name:p,size:"large"===a?20:16}):null,[W,D]=t(i?"disabled":"default"),E=r&&c;return e.createElement("button",{style:(()=>{const e={display:M?"inline-flex":"flex",width:M?"auto":d?"100%":"9.375rem",height:"large"===a?"2.75rem":"2rem",padding:"ghost"===o?0:"0.75rem",justifyContent:"center",alignItems:"center",gap:E?"1rem":"0.5rem",flexShrink:0,borderRadius:"62.4rem",cursor:i?"not-allowed":"pointer",opacity:i?.6:1,transition:"all 0.2s ease-in-out",border:"none"};switch(o){case"primary":switch(W){case"default":e.background="#00df88";break;case"hover":e.background="#4ce9ac";break;case"active":e.background="#98f2cf";break;case"disabled":e.background="#E5FCF3",e.opacity=.6}break;case"outline":switch(e.background="transparent",W){case"default":e.border=`${s} solid ${m}`;break;case"hover":e.border=`0.125rem solid ${g}`;break;case"active":e.border=`0.125rem solid ${h}`;break;case"disabled":e.border=`${s} solid ${x}`,e.opacity=.6}break;case"ghost":e.background="transparent";break;case"destructive":switch(e.background="transparent",W){case"default":e.color="#a90000";break;case"hover":e.color="#d60000";break;case"active":e.color="#fed8d8";break;case"disabled":e.color="#feecec",e.opacity=.6}}return{...e,...f}})(),onClick:C,disabled:i,"aria-label":u||n,"data-testid":b,className:y,onMouseEnter:e=>{i||(D("hover"),w&&w(e))},onMouseLeave:e=>{i||(D("default"),k&&k(e))},onMouseDown:e=>{i||(D("active"),v&&v(e))},onMouseUp:e=>{i||(D("hover"),L&&L(e))}},!M&&r&&e.createElement("span",{style:{display:"flex",alignItems:"center",justifyContent:"center",color:"currentColor"},className:"button-left-icon"},F),!M&&e.createElement("span",{style:(()=>{const e="large"===a?S.labelLg:S.labelMd,t={fontFamily:e.fontFamily,fontWeight:parseInt(e.fontWeight),fontSize:`${e.fontSize}px`,lineHeight:`${e.lineHeight}px`,transition:"all 0.2s ease-in-out"};switch(o){case"primary":t.color="#3b3b3b";break;case"outline":case"ghost":switch(W){case"default":t.color=m;break;case"hover":t.color=g;break;case"active":t.color=h;break;case"disabled":t.color=x}}return t})()},n),M&&e.createElement("span",{style:{display:"flex",alignItems:"center",justifyContent:"center",color:"currentColor"}},H),!M&&c&&e.createElement("span",{style:{display:"flex",alignItems:"center",justifyContent:"center",color:"currentColor"},className:"button-right-icon"},z))},M=({size:t="2xl",element:n="h1",align:o="left",weight:a,color:i,truncate:l=!1,lineClamp:r,children:s,className:c="",style:p={},onClick:d,testID:m,...g})=>{const h={...(()=>{const e="2xl"===t?S.display2xl:S.displayXl;let n=parseInt(e.fontWeight);a&&("normal"===a?n=400:"medium"===a?n=500:"semibold"===a?n=600:"bold"===a&&(n=700));const s={fontFamily:e.fontFamily,fontSize:`${e.fontSize}px`,lineHeight:`${e.lineHeight}px`,fontWeight:n,color:i||e.color,textAlign:o,letterSpacing:e.letterSpacing,textDecoration:e.textDecoration||"none"};return l&&(s.whiteSpace="nowrap",s.overflow="hidden",s.textOverflow="ellipsis",s.display="block"),r&&r>0&&(s.display="-webkit-box",s.WebkitLineClamp=r,s.WebkitBoxOrient="vertical",s.overflow="hidden",s.textOverflow="ellipsis"),s})(),...p},x=n;return e.createElement(x,{style:h,className:c,"data-testid":m,onClick:d,...g},s)},F=({size:t="xl",element:n="h2",align:o="left",weight:a,color:i,truncate:l=!1,lineClamp:r,children:s,className:c="",style:p={},onClick:d,testID:m,...g})=>{const h={...(()=>{const e=S[{xl:"headingXl",lg:"headingLg",md:"headingMd",sm:"headingSm",xs:"headingXs"}[t]],n=a?parseInt(S.weights[a]):parseInt(e.fontWeight);return{...{fontFamily:e.fontFamily,fontSize:`${e.fontSize}px`,lineHeight:`${e.lineHeight}px`,fontWeight:n,color:i||e.color,textAlign:o,letterSpacing:e.letterSpacing,textDecoration:e.textDecoration||"none"},...l?{whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",display:"block"}:{},...r&&r>0?{display:"-webkit-box",WebkitLineClamp:r,WebkitBoxOrient:"vertical",overflow:"hidden",textOverflow:"ellipsis"}:{}}})(),...p},x="a"===n?g:{},f="h2"===n?{xl:"h1",lg:"h2",md:"h3",sm:"h4",xs:"h5"}[t]:n;return e.createElement(f,{style:h,className:c,"data-testid":m,onClick:d,...x},s)},z=({size:t="lg",element:n="p",align:o="left",weight:a,color:i,truncate:l=!1,lineClamp:r,children:s,className:c="",style:p={},onClick:d,testID:m,...g})=>{const h={...(()=>{let e;switch(t){case"xl":e=S.bodyXl;break;case"lg":e=S.bodyLg;break;case"md":e=S.bodyMd;break;case"sm":e=S.bodySm}let n=parseInt(e.fontWeight);a&&("normal"===a?n=400:"medium"===a?n=500:"semibold"===a?n=600:"bold"===a&&(n=700));const s={fontFamily:e.fontFamily,fontSize:`${e.fontSize}px`,lineHeight:`${e.lineHeight}px`,fontWeight:n,color:i||e.color,textAlign:o,letterSpacing:e.letterSpacing,textDecoration:e.textDecoration||"none"};return l&&(s.whiteSpace="nowrap",s.overflow="hidden",s.textOverflow="ellipsis",s.display="block"),r&&r>0&&(s.display="-webkit-box",s.WebkitLineClamp=r,s.WebkitBoxOrient="vertical",s.overflow="hidden",s.textOverflow="ellipsis"),s})(),...p},x="a"===n?g:{},f=n;return e.createElement(f,{style:h,className:c,"data-testid":m,onClick:d,...x},s)},H=({variant:t="button",element:n,align:o="left",weight:a,color:i,truncate:l=!1,lineClamp:r,children:s,className:c="",style:p={},onClick:d,testID:m,...g})=>{const h=n||(()=>{switch(t){case"button":case"caption":default:return"span";case"link":return"a"}})(),x={...(()=>{let e;switch(t){case"button":e=S.labelLg;break;case"link":e=S.labelMd;break;case"caption":e=S.labelSm}let n=parseInt(e.fontWeight);a&&("normal"===a?n=400:"medium"===a?n=500:"semibold"===a?n=600:"bold"===a&&(n=700));const s={fontFamily:e.fontFamily,fontSize:`${e.fontSize}px`,lineHeight:`${e.lineHeight}px`,fontWeight:n,color:i||e.color,textAlign:o,letterSpacing:e.letterSpacing,textDecoration:"link"===t?"underline":e.textDecoration||"none"};return l&&(s.whiteSpace="nowrap",s.overflow="hidden",s.textOverflow="ellipsis",s.display="block"),r&&r>0&&(s.display="-webkit-box",s.WebkitLineClamp=r,s.WebkitBoxOrient="vertical",s.overflow="hidden",s.textOverflow="ellipsis"),s})(),...p},f="a"===h?g:{},u=h;return e.createElement(u,{style:x,className:c,"data-testid":m,onClick:d,...f},s)},W={colors:{primary:"#007AFF",secondary:"#5856D6",background:"#FFFFFF",surface:"#F2F2F7",text:"#000000",textSecondary:"#8E8E93",border:"#E5E5EA",error:"#FF3B30",warning:"#FF9500",success:"#34C759"},spacing:{xs:4,sm:8,md:16,lg:24,xl:32},borderRadius:{none:0,sm:4,md:8,lg:12,full:9999},typography:{fontSize:{xs:12,sm:14,md:16,lg:18,xl:20,xxl:24},fontWeight:{normal:"400",medium:"500",semibold:"600",bold:"700"},lineHeight:{tight:1.2,normal:1.5,relaxed:1.8}}},D=n(void 0),E=({children:t,theme:n})=>{const o=e.useMemo((()=>{var e,t,o;return{...W,...n,colors:{...W.colors,...null==n?void 0:n.colors},spacing:{...W.spacing,...null==n?void 0:n.spacing},borderRadius:{...W.borderRadius,...null==n?void 0:n.borderRadius},typography:{...W.typography,...null==n?void 0:n.typography,fontSize:{...W.typography.fontSize,...null===(e=null==n?void 0:n.typography)||void 0===e?void 0:e.fontSize},fontWeight:{...W.typography.fontWeight,...null===(t=null==n?void 0:n.typography)||void 0===t?void 0:t.fontWeight},lineHeight:{...W.typography.lineHeight,...null===(o=null==n?void 0:n.typography)||void 0===o?void 0:o.lineHeight}}}}),[n]),a=e.useCallback((e=>{console.log("Theme update requested, but we are using static theme for now.",e)}),[]);return e.createElement(D.Provider,{value:{theme:o,updateTheme:a}},t)},I=()=>{const e=o(D);if(!e)throw new Error("useTheme must be used within a ThemeProvider");return e};export{z as Body,L as Button,M as Display,F as Heading,l as Icon,r as IconList,E as ThemeProvider,H as Utility,W as defaultTheme,a as icons,I as useTheme};
|
|
2
2
|
//# sourceMappingURL=index.esm.js.map
|
package/dist/index.esm.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.esm.js","sources":["../src/components/Icon/Icon.tsx","../src/components/Icon/IconList.tsx","../src/components/Button/Button.tsx","../src/styles/tokens/tokens.ts","../src/styles/tokens/utils/utils.ts","../src/styles/tokens/utils/fontUtils.ts","../src/styles/tokens/typography.ts","../src/components/Typography/Display.tsx","../src/components/Typography/Heading.tsx","../src/components/Typography/Body.tsx","../src/components/Typography/Utility.tsx","../src/theme/index.ts","../src/theme/ThemeProvider.tsx"],"sourcesContent":["import React from 'react';\nimport iconData from './icons.json';\n\nexport interface IconProps {\n /**\n * Name of the icon to display\n */\n name: string;\n\n /**\n * Size of the icon in pixels\n */\n size?: number;\n\n /**\n * Color of the icon\n */\n color?: string;\n\n /**\n * Optional CSS class name\n */\n className?: string;\n\n /**\n * Optional style overrides\n */\n style?: React.CSSProperties;\n\n /**\n * Optional click handler\n */\n onClick?: React.MouseEventHandler<SVGSVGElement>;\n\n /**\n * Aria label for accessibility\n */\n ariaLabel?: string;\n}\n\nexport interface IconData {\n name: string;\n path: string;\n viewBox: string;\n fill?: string;\n}\n\n// Export icon data for use in other components\nexport const icons: IconData[] = iconData.icons;\n\n// Create a map of icon names to icon data for quick lookup\nconst iconMap = new Map<string, IconData>();\nicons.forEach((icon) => {\n iconMap.set(icon.name, icon);\n});\n\nexport const Icon: React.FC<IconProps> = ({\n name,\n size = 24,\n color = 'currentColor',\n className = '',\n style = {},\n onClick,\n ariaLabel,\n}) => {\n // Find the icon data for the given name\n const iconInfo = iconMap.get(name);\n\n // If the icon doesn't exist, return null or a fallback\n if (!iconInfo) {\n console.warn(`Icon \"${name}\" not found`);\n return null;\n }\n\n // Split the path string into multiple paths if it contains multiple commands\n const paths = iconInfo.path.split(' M ').map((path, index) => \n index === 0 ? path : `M ${path}`\n );\n\n // Combine the style props\n const combinedStyle: React.CSSProperties = {\n display: 'inline-block',\n verticalAlign: 'middle',\n ...style,\n };\n\n return (\n <svg\n width={size}\n height={size}\n viewBox={iconInfo.viewBox}\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className={className}\n style={combinedStyle}\n onClick={onClick}\n aria-label={ariaLabel || `${name} icon`}\n role=\"img\"\n >\n {paths.map((path, index) => (\n <path\n key={index}\n d={path}\n stroke={iconInfo.fill ? 'none' : color}\n fill={iconInfo.fill ? color : 'none'}\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n ))}\n </svg>\n );\n};\n","import React from 'react';\nimport { Icon, icons, IconData } from './Icon';\n\nexport interface IconListProps {\n /**\n * Search query to filter icons\n */\n searchQuery?: string;\n\n /**\n * Size of each icon\n */\n iconSize?: number;\n\n /**\n * Color of each icon\n */\n iconColor?: string;\n\n /**\n * Function to handle when an icon is clicked\n */\n onIconClick?: (iconName: string) => void;\n}\n\nexport const IconList: React.FC<IconListProps> = ({\n searchQuery = '',\n iconSize = 24,\n iconColor = 'currentColor',\n onIconClick,\n}) => {\n // Filter icons based on the search query\n const filteredIcons = searchQuery\n ? icons.filter(icon => \n icon.name.toLowerCase().includes(searchQuery.toLowerCase())\n )\n : icons;\n\n const handleIconClick = (iconName: string) => {\n if (onIconClick) {\n onIconClick(iconName);\n }\n };\n\n return (\n <div>\n {filteredIcons.length === 0 ? (\n <div style={{ padding: '20px', textAlign: 'center' }}>\n No icons found matching \"{searchQuery}\"\n </div>\n ) : (\n <div\n style={{\n display: 'grid',\n gridTemplateColumns: 'repeat(auto-fill, minmax(100px, 1fr))',\n gap: '20px',\n }}\n >\n {filteredIcons.map((icon: IconData) => (\n <div\n key={icon.name}\n style={{\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n padding: '12px',\n border: '1px solid #eee',\n borderRadius: '8px',\n cursor: onIconClick ? 'pointer' : 'default',\n transition: 'all 0.2s ease-in-out',\n }}\n onClick={() => handleIconClick(icon.name)}\n onMouseOver={(e) => {\n e.currentTarget.style.backgroundColor = '#f9f9f9';\n e.currentTarget.style.transform = 'translateY(-2px)';\n e.currentTarget.style.boxShadow = '0 2px 8px rgba(0,0,0,0.05)';\n }}\n onMouseOut={(e) => {\n e.currentTarget.style.backgroundColor = 'transparent';\n e.currentTarget.style.transform = 'translateY(0)';\n e.currentTarget.style.boxShadow = 'none';\n }}\n >\n <div\n style={{\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n height: '50px',\n marginBottom: '8px',\n }}\n >\n <Icon name={icon.name} size={iconSize} color={iconColor} />\n </div>\n <div\n style={{\n fontSize: '12px',\n textAlign: 'center',\n wordBreak: 'break-word',\n }}\n >\n {icon.name}\n </div>\n </div>\n ))}\n </div>\n )}\n </div>\n );\n};\n","import React, { useState } from \"react\";\nimport { ButtonProps, ButtonState } from \"../../types/Button\";\nimport { Icon } from \"../Icon\";\n\nexport const Button: React.FC<ButtonProps> = ({\n label,\n type = \"primary\",\n size = \"large\",\n disabled = false,\n leftIcon,\n rightIcon,\n icon,\n fullWidth = false,\n style,\n accessibilityLabel,\n testID,\n onClick,\n className,\n onMouseEnter,\n onMouseLeave,\n onMouseDown,\n onMouseUp,\n}) => {\n const isIconOnly = !!icon;\n\n // Create icon components from icon names\n const leftIconComponent = leftIcon ? (\n <Icon name={leftIcon} size={size === \"large\" ? 20 : 16} />\n ) : null;\n const rightIconComponent = rightIcon ? (\n <Icon name={rightIcon} size={size === \"large\" ? 20 : 16} />\n ) : null;\n const iconButton = icon ? (\n <Icon name={icon} size={size === \"large\" ? 20 : 16} />\n ) : null;\n\n const [buttonState, setButtonState] = useState<ButtonState>(\n disabled ? \"disabled\" : \"default\"\n );\n\n const hasBothIcons = leftIcon && rightIcon;\n\n // Base button styles\n const getBaseStyles = (): React.CSSProperties => {\n const baseStyle: React.CSSProperties = {\n display: isIconOnly ? \"inline-flex\" : \"flex\",\n width: isIconOnly ? \"auto\" : fullWidth ? \"100%\" : \"9.375rem\",\n height: size === \"large\" ? \"2.75rem\" : \"2rem\",\n padding:\n type === \"ghost\"\n ? \"var(--spacing-0, 0rem)\"\n : \"var(--component-card-sm, 0.75rem)\",\n justifyContent: \"center\",\n alignItems: \"center\",\n gap: hasBothIcons\n ? \"var(--layout-spacing-inline-md, 1rem)\"\n : \"var(--layout-spacing-inline-xs, 0.5rem)\",\n flexShrink: 0,\n borderRadius: \"var(--button-full, 62.4375rem)\",\n cursor: disabled ? \"not-allowed\" : \"pointer\",\n opacity: disabled ? 0.6 : 1,\n transition: \"all 0.2s ease-in-out\",\n border: \"none\",\n };\n\n // Apply styles based on type and state\n switch (type) {\n case \"primary\":\n switch (buttonState) {\n case \"default\":\n baseStyle.background = \"var(--action-primary-default, #00DF88)\";\n break;\n case \"hover\":\n baseStyle.background = \"var(--action-primary-hover, #4CE9AC)\";\n break;\n case \"active\":\n baseStyle.background = \"var(--action-primary-active, #98F2CF)\";\n break;\n case \"disabled\":\n baseStyle.background = \"var(--action-primary-disabled, #00DF88)\";\n baseStyle.opacity = 0.6;\n break;\n }\n break;\n case \"outline\":\n baseStyle.background = \"transparent\";\n switch (buttonState) {\n case \"default\":\n baseStyle.border =\n \"var(--button-default, 1px) solid var(--action-tertiary-default, #3B3B3B)\";\n break;\n case \"hover\":\n baseStyle.border =\n \"var(--button-hover, 2px) solid var(--action-tertiary-hover, #111)\";\n break;\n case \"active\":\n baseStyle.border =\n \"var(--button-pressed, 2px) solid var(--action-tertiary-active, #ABABAB)\";\n break;\n case \"disabled\":\n baseStyle.border =\n \"var(--button-default, 1px) solid var(--action-tertiary-disabled, #3B3B3B)\";\n baseStyle.opacity = 0.6;\n break;\n }\n break;\n case \"ghost\":\n baseStyle.background = \"transparent\";\n break;\n case \"destructive\":\n baseStyle.background = \"transparent\";\n switch (buttonState) {\n case \"default\":\n baseStyle.color = \"var(--action-destructive-hover, #FF3B30)\";\n break;\n case \"hover\":\n baseStyle.color = \"var(--action-destructive-default, #D60000)\";\n break;\n case \"active\":\n baseStyle.color = \"var(--action-destructive-active, #FF6259)\";\n break;\n case \"disabled\":\n baseStyle.color = \"var(--action-destructive-disabled, #D60000)\";\n baseStyle.opacity = 0.6;\n break;\n }\n break;\n }\n\n return { ...baseStyle, ...style };\n };\n\n const getTextStyles = (): React.CSSProperties => {\n const textStyle: React.CSSProperties = {\n fontFamily:\n 'system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif',\n fontWeight: 500,\n fontSize: size === \"large\" ? \"1rem\" : \"0.875rem\",\n transition: \"all 0.2s ease-in-out\",\n };\n\n switch (type) {\n case \"primary\":\n textStyle.color = \"var(--neutral-80, #3B3B3B)\";\n break;\n case \"outline\":\n switch (buttonState) {\n case \"default\":\n textStyle.color = \"var(--action-tertiary-default, #3B3B3B)\";\n break;\n case \"hover\":\n textStyle.color = \"var(--action-tertiary-hover, #111)\";\n break;\n case \"active\":\n textStyle.color = \"var(--action-tertiary-active, #ABABAB)\";\n break;\n case \"disabled\":\n textStyle.color = \"var(--action-tertiary-disabled, #3B3B3B)\";\n break;\n }\n break;\n case \"ghost\":\n switch (buttonState) {\n case \"default\":\n textStyle.color = \"var(--action-tertiary-default, #3B3B3B)\";\n break;\n case \"hover\":\n textStyle.color = \"var(--action-tertiary-hover, #111)\";\n break;\n case \"active\":\n textStyle.color = \"var(--action-tertiary-active, #ABABAB)\";\n break;\n case \"disabled\":\n textStyle.color = \"var(--action-tertiary-disabled, #3B3B3B)\";\n break;\n }\n break;\n case \"destructive\":\n break;\n }\n\n return textStyle;\n };\n\n // Icon styles\n const getIconStyles = (): React.CSSProperties => {\n return {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n color: \"currentColor\",\n };\n };\n\n // Event handlers for state changes\n const handleMouseEnter = (e: React.MouseEvent<HTMLButtonElement>) => {\n if (!disabled) {\n setButtonState(\"hover\");\n onMouseEnter && onMouseEnter(e);\n }\n };\n\n const handleMouseLeave = (e: React.MouseEvent<HTMLButtonElement>) => {\n if (!disabled) {\n setButtonState(\"default\");\n onMouseLeave && onMouseLeave(e);\n }\n };\n\n const handleMouseDown = (e: React.MouseEvent<HTMLButtonElement>) => {\n if (!disabled) {\n setButtonState(\"active\");\n onMouseDown && onMouseDown(e);\n }\n };\n\n const handleMouseUp = (e: React.MouseEvent<HTMLButtonElement>) => {\n if (!disabled) {\n setButtonState(\"hover\");\n onMouseUp && onMouseUp(e);\n }\n };\n\n return (\n <button\n style={getBaseStyles()}\n onClick={onClick}\n disabled={disabled}\n aria-label={accessibilityLabel || label}\n data-testid={testID}\n className={className}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n onMouseDown={handleMouseDown}\n onMouseUp={handleMouseUp}\n >\n {!isIconOnly && leftIcon && (\n <span style={getIconStyles()} className=\"button-left-icon\">\n {leftIconComponent}\n </span>\n )}\n\n {!isIconOnly && <span style={getTextStyles()}>{label}</span>}\n\n {isIconOnly && <span style={getIconStyles()}>{iconButton}</span>}\n\n {!isIconOnly && rightIcon && (\n <span style={getIconStyles()} className=\"button-right-icon\">\n {rightIconComponent}\n </span>\n )}\n </button>\n );\n};\n","/**\n * File generated by the Figma Token Engine\n * Do not edit directly\n */\n\nexport const BORDER_RADIUS_TOOLTIP_DEFAULT = \"0.25rem\";\nexport const BORDER_RADIUS_POPOVER_DEFAULT = \"0.5rem\";\nexport const BORDER_RADIUS_TAG_SM = \"0.25rem\";\nexport const BORDER_RADIUS_TAG_XL = \"62.4rem\";\nexport const BORDER_RADIUS_BUTTON_SM = \"0.25rem\";\nexport const BORDER_RADIUS_BUTTON_FULL = \"62.4rem\";\nexport const BORDER_RADIUS_INPUT_SM = \"0.25rem\";\nexport const BORDER_RADIUS_INPUT_LG = \"0.5rem\";\nexport const BORDER_RADIUS_CARD_SM = \"0.25rem\";\nexport const BORDER_RADIUS_CARD_MD = \"0.5rem\";\nexport const BORDER_RADIUS_CARD_LG = \"0.75rem\";\nexport const BORDER_RADIUS_MODAL_LG = \"0.75rem\";\nexport const BORDER_RADIUS_MODAL_XL = \"1rem\";\nexport const BORDER_RADIUS_NONE = 0;\nexport const BORDER_RADIUS_XS = \"0.25rem\";\nexport const BORDER_RADIUS_SM = \"0.5rem\";\nexport const BORDER_RADIUS_MD = \"0.75rem\";\nexport const BORDER_RADIUS_LG = \"1rem\";\nexport const BORDER_RADIUS_XL = \"1.25rem\";\nexport const BORDER_RADIUS_2XL = \"1.5rem\";\nexport const BORDER_RADIUS_3XL = \"1.75rem\";\nexport const BORDER_RADIUS_FULL = \"62.4rem\";\nexport const BORDER_WIDTH_BUTTON_DEFAULT = \"0.0625rem\";\nexport const BORDER_WIDTH_BUTTON_HOVER = \"0.125rem\";\nexport const BORDER_WIDTH_BUTTON_PRESSED = \"0.125rem\";\nexport const BORDER_WIDTH_INPUT_DEFAULT = \"0.0625rem\";\nexport const BORDER_WIDTH_INPUT_FOCUS = \"0.125rem\";\nexport const BORDER_WIDTH_INPUT_ERROR = \"0.125rem\";\nexport const BORDER_WIDTH_CARD_DEFAULT = \"0.0625rem\";\nexport const BORDER_WIDTH_CARD_HOVER = \"0.125rem\";\nexport const BORDER_WIDTH_NONE = 0;\nexport const BORDER_WIDTH_XS = \"0.0625rem\";\nexport const BORDER_WIDTH_SM = \"0.125rem\";\nexport const BORDER_WIDTH_MD = \"0.25rem\";\nexport const BORDER_GREEN = \"#00df88\";\nexport const BORDER_BLUE = \"#0053e2\";\nexport const BORDER_YELLOW = \"#f4b400\";\nexport const BORDER_RED = \"#a90000\";\nexport const BORDER_DARK = \"#111\";\nexport const BORDER_LIGHT = \"#e2e2e2\";\nexport const BORDER_LIGHTER = \"#f1f1f1\";\nexport const LAYOUT_SPACING_INLINE_NONE = 0;\nexport const LAYOUT_SPACING_INLINE_3XS = \"0.125rem\";\nexport const LAYOUT_SPACING_INLINE_2XS = \"0.25rem\";\nexport const LAYOUT_SPACING_INLINE_XS = \"0.5rem\";\nexport const LAYOUT_SPACING_INLINE_SM = \"0.75rem\";\nexport const LAYOUT_SPACING_INLINE_MD = \"1rem\";\nexport const LAYOUT_SPACING_INLINE_LG = \"2rem\";\nexport const LAYOUT_SPACING_INLINE_XL = \"2.5rem\";\nexport const LAYOUT_SPACING_INLINE_2XL = \"5rem\";\nexport const LAYOUT_SPACING_STACK_NONE = 0;\nexport const LAYOUT_SPACING_STACK_3XS = \"0.125rem\";\nexport const LAYOUT_SPACING_STACK_2XS = \"0.25rem\";\nexport const LAYOUT_SPACING_STACK_XS = \"0.5rem\";\nexport const LAYOUT_SPACING_STACK_SM = \"0.75rem\";\nexport const LAYOUT_SPACING_STACK_MD = \"1rem\";\nexport const LAYOUT_SPACING_STACK_LG = \"2rem\";\nexport const LAYOUT_SPACING_STACK_XL = \"2.5rem\";\nexport const LAYOUT_SPACING_STACK_2XL = \"5rem\";\nexport const SECTION_SPACING_SM = \"1.5rem\";\nexport const SECTION_SPACING_MD = \"1.75rem\";\nexport const SECTION_SPACING_LG = \"2rem\";\nexport const SECTION_SPACING_XL = \"2.5rem\";\nexport const SECTION_SPACING_2XL = \"3.5rem\";\nexport const SECTION_SPACING_3XL = \"5rem\";\nexport const COMPONENT_CARD_SM = \"0.75rem\";\nexport const COMPONENT_CARD_MD = \"1.25rem\";\nexport const COMPONENT_CARD_LG = \"1.5rem\";\nexport const COMPONENT_CARD_XL = \"2rem\";\nexport const COMPONENT_CARD_2XL = \"2.5rem\";\nexport const COMPONENT_MODAL_SM = \"1.25rem\";\nexport const COMPONENT_MODAL_MD = \"1.5rem\";\nexport const COMPONENT_MODAL_LG = \"1.75rem\";\nexport const SPACE_0 = 0;\nexport const SPACE_3XS = \"0.125rem\";\nexport const SPACE_2XS = \"0.25rem\";\nexport const SPACE_XS = \"0.5rem\";\nexport const SPACE_SM = \"0.75rem\";\nexport const SPACE_MD = \"1rem\";\nexport const SPACE_LG = \"1.25rem\";\nexport const SPACE_XL = \"1.5rem\";\nexport const SPACE_2XL = \"1.75rem\";\nexport const SPACE_3XL = \"2rem\";\nexport const SPACE_4XL = \"2.5rem\";\nexport const SPACE_5XL = \"3rem\";\nexport const SPACE_6XL = \"3.5rem\";\nexport const SPACE_7XL = \"4rem\";\nexport const SPACE_8XL = \"5rem\";\nexport const XS = \"0.75rem\";\nexport const S = \"1rem\";\nexport const MD = \"1.25rem\";\nexport const LG = \"1.5rem\";\nexport const XL = \"1.75rem\";\nexport const XXL = \"2rem\";\nexport const BACKGROUND_YELLOW_LIGHT = \"#fff5d9\";\nexport const BACKGROUND_YELLOW_MEDIUM = \"#ffe7a5\";\nexport const BACKGROUND_BLUE_LIGHT = \"#e3ebff\";\nexport const BACKGROUND_BLUE_MEDIUM = \"#c3deff\";\nexport const BACKGROUND_GREEN_LIGHT = \"#E5FCF3\";\nexport const BACKGROUND_GREEN_MEDIUM = \"#ccf9e7\";\nexport const BACKGROUND_GREEN_DARK = \"#00df88\";\nexport const BACKGROUND_RED_LIGHT = \"#feecec\";\nexport const BACKGROUND_RED_MEDIUM = \"#fed8d8\";\nexport const BACKGROUND_WHITE_LIGHT = \"#ffffff\";\nexport const BACKGROUND_NEUTRAL_DARK = \"#111\";\nexport const BACKGROUND_NEUTRAL_GREY = \"#e2e2e2\";\nexport const BACKGROUND_NEUTRAL_LIGHT = \"#f1f1f1\";\nexport const TEXT_INVERSE = \"#ffffff\";\nexport const TEXT_DISABLED = \"#ababab\";\nexport const TEXT_PLACEHOLDER = \"#919191\";\nexport const TEXT_TERTIARY = \"#525252\";\nexport const TEXT_BODY = \"#3b3b3b\";\nexport const TEXT_HEADER = \"#111\";\nexport const TEXT_GREEN = \"#00df88\";\nexport const TEXT_BLUE = \"#0053e2\";\nexport const TEXT_ERROR = \"#a90000\";\nexport const TEXT_YELLOW = \"#f4b400\";\nexport const FEEDBACK_ALERT_SUCCESS = \"#00df88\";\nexport const FEEDBACK_ALERT_ERROR = \"#a90000\";\nexport const FEEDBACK_ALERT_WARNING = \"#fff5d9\";\nexport const FEEDBACK_ALERT_NEUTRAL = \"#111\";\nexport const ACTION_PRIMARY_DEFAULT = \"#00df88\";\nexport const ACTION_PRIMARY_HOVER = \"#4ce9ac\";\nexport const ACTION_PRIMARY_ACTIVE = \"#98f2cf\";\nexport const ACTION_PRIMARY_DISABLED = \"#E5FCF3\";\nexport const ACTION_SECONDARY_DEFAULT = \"#0053e2\";\nexport const ACTION_SECONDARY_HOVER = \"#254cac\";\nexport const ACTION_SECONDARY_ACTIVE = \"#9ec1ff\";\nexport const ACTION_SECONDARY_DISABLED = \"#e3ebff\";\nexport const ACTION_DESTRUCTIVE_DEFAULT = \"#d60000\";\nexport const ACTION_DESTRUCTIVE_HOVER = \"#a90000\";\nexport const ACTION_DESTRUCTIVE_ACTIVE = \"#fed8d8\";\nexport const ACTION_DESTRUCTIVE_DISABLE = \"#feecec\";\nexport const ACTION_TERTIARY_DEFAULT = \"#3b3b3b\";\nexport const ACTION_TERTIARY_HOVER = \"#111\";\nexport const ACTION_TERTIARY_ACTIVE = \"#ababab\";\nexport const ACTION_TERTIARY_DISABLE = \"#f1f1f1\";\nexport const ICON_YELLOW = \"#f4b400\";\nexport const ICON_BLUE = \"#0053e2\";\nexport const ICON_GREEN = \"#00df88\";\nexport const ICON_RED = \"#a90000\";\nexport const ICON_NEUTRAL = \"#111\";\nexport const ICON_LIGHT = \"#e2e2e2\";\nexport const ICON_LIGHTER = \"#f1f1f1\";\nexport const GREEN_10 = \"#E5FCF3\";\nexport const GREEN_20 = \"#ccf9e7\";\nexport const GREEN_30 = \"#B2F5DB\";\nexport const GREEN_40 = \"#98f2cf\";\nexport const GREEN_50 = \"#81efc3\";\nexport const GREEN_60 = \"#66ecb8\";\nexport const GREEN_70 = \"#4ce9ac\";\nexport const GREEN_80 = \"#31e5a0\";\nexport const GREEN_90 = \"#1ae294\";\nexport const GREEN_100 = \"#00df88\";\nexport const NEUTRAL_10 = \"#f1f1f1\";\nexport const NEUTRAL_20 = \"#e2e2e2\";\nexport const NEUTRAL_30 = \"#c6c6c6\";\nexport const NEUTRAL_40 = \"#ababab\";\nexport const NEUTRAL_50 = \"#919191\";\nexport const NEUTRAL_60 = \"#6a6a6a\";\nexport const NEUTRAL_70 = \"#525252\";\nexport const NEUTRAL_80 = \"#3b3b3b\";\nexport const NEUTRAL_90 = \"#262626\";\nexport const NEUTRAL_100 = \"#111\";\nexport const BLUE_10 = \"#e3ebff\";\nexport const BLUE_20 = \"#c3deff\";\nexport const BLUE_30 = \"#9ec1ff\";\nexport const BLUE_40 = \"#5c83fd\";\nexport const BLUE_50 = \"#446ef5\";\nexport const BLUE_60 = \"#0053e2\";\nexport const BLUE_70 = \"#254cac\";\nexport const BLUE_80 = \"#14328d\";\nexport const BLUE_90 = \"#0c285f\";\nexport const BLUE_100 = \"#071e3c\";\nexport const RED_10 = \"#feecec\";\nexport const RED_20 = \"#fed8d8\";\nexport const RED_30 = \"#feb3b3\";\nexport const RED_40 = \"#fe8888\";\nexport const RED_50 = \"#fb5959\";\nexport const RED_60 = \"#d60000\";\nexport const RED_70 = \"#a90000\";\nexport const RED_80 = \"#820000\";\nexport const RED_90 = \"#550000\";\nexport const RED_100 = \"#3a0000\";\nexport const YELLOW_10 = \"#fff5d9\";\nexport const YELLOW_20 = \"#ffe7a5\";\nexport const YELLOW_30 = \"#ffd86b\";\nexport const YELLOW_40 = \"#ffce46\";\nexport const YELLOW_50 = \"#ffc420\";\nexport const YELLOW_60 = \"#f4b400\";\nexport const YELLOW_70 = \"#dba200\";\nexport const YELLOW_80 = \"#c69200\";\nexport const YELLOW_90 = \"#b38400\";\nexport const YELLOW_100 = \"#9a7100\";\nexport const WHITE_10 = \"#ffffff\";\nexport const DISPLAY_2XL_FONT_FAMILY = \"Campton\";\nexport const DISPLAY_2XL_FONT_WEIGHT = 500;\nexport const DISPLAY_2XL_LINE_HEIGHT = \"56px\";\nexport const DISPLAY_2XL_FONT_SIZE = \"52px\";\nexport const DISPLAY_2XL_LETTER_SPACING = \"0%\";\nexport const DISPLAY_2XL_PARAGRAPH_INDENT = \"0px\";\nexport const DISPLAY_2XL_TEXT_CASE = \"none\";\nexport const DISPLAY_2XL_TEXT_DECORATION = \"none\";\nexport const DISPLAY_XL_FONT_FAMILY = \"Campton\";\nexport const DISPLAY_XL_FONT_WEIGHT = 500;\nexport const DISPLAY_XL_LINE_HEIGHT = \"48px\";\nexport const DISPLAY_XL_FONT_SIZE = \"44px\";\nexport const DISPLAY_XL_LETTER_SPACING = \"0%\";\nexport const DISPLAY_XL_PARAGRAPH_INDENT = \"0px\";\nexport const DISPLAY_XL_TEXT_CASE = \"none\";\nexport const DISPLAY_XL_TEXT_DECORATION = \"none\";\nexport const HEADING_XL_FONT_FAMILY = \"Campton\";\nexport const HEADING_XL_FONT_WEIGHT = 600;\nexport const HEADING_XL_LINE_HEIGHT = \"48px\";\nexport const HEADING_XL_FONT_SIZE = \"40px\";\nexport const HEADING_XL_LETTER_SPACING = \"0%\";\nexport const HEADING_XL_PARAGRAPH_INDENT = \"0px\";\nexport const HEADING_XL_TEXT_CASE = \"none\";\nexport const HEADING_XL_TEXT_DECORATION = \"none\";\nexport const HEADING_LG_FONT_FAMILY = \"Campton\";\nexport const HEADING_LG_FONT_WEIGHT = 600;\nexport const HEADING_LG_LINE_HEIGHT = \"44px\";\nexport const HEADING_LG_FONT_SIZE = \"36px\";\nexport const HEADING_LG_LETTER_SPACING = \"0%\";\nexport const HEADING_LG_PARAGRAPH_INDENT = \"0px\";\nexport const HEADING_LG_TEXT_CASE = \"none\";\nexport const HEADING_LG_TEXT_DECORATION = \"none\";\nexport const HEADING_MD_FONT_FAMILY = \"Campton\";\nexport const HEADING_MD_FONT_WEIGHT = 600;\nexport const HEADING_MD_LINE_HEIGHT = \"40px\";\nexport const HEADING_MD_FONT_SIZE = \"32px\";\nexport const HEADING_MD_LETTER_SPACING = \"0%\";\nexport const HEADING_MD_PARAGRAPH_INDENT = \"0px\";\nexport const HEADING_MD_TEXT_CASE = \"none\";\nexport const HEADING_MD_TEXT_DECORATION = \"none\";\nexport const HEADING_SM_FONT_FAMILY = \"Campton\";\nexport const HEADING_SM_FONT_WEIGHT = 600;\nexport const HEADING_SM_LINE_HEIGHT = \"36px\";\nexport const HEADING_SM_FONT_SIZE = \"28px\";\nexport const HEADING_SM_LETTER_SPACING = \"0%\";\nexport const HEADING_SM_PARAGRAPH_INDENT = \"0px\";\nexport const HEADING_SM_TEXT_CASE = \"none\";\nexport const HEADING_SM_TEXT_DECORATION = \"none\";\nexport const HEADING_XS_FONT_FAMILY = \"Campton\";\nexport const HEADING_XS_FONT_WEIGHT = 600;\nexport const HEADING_XS_LINE_HEIGHT = \"28px\";\nexport const HEADING_XS_FONT_SIZE = \"20px\";\nexport const HEADING_XS_LETTER_SPACING = \"0%\";\nexport const HEADING_XS_PARAGRAPH_INDENT = \"0px\";\nexport const HEADING_XS_TEXT_CASE = \"none\";\nexport const HEADING_XS_TEXT_DECORATION = \"none\";\nexport const HEADING_2XS_FONT_FAMILY = \"Campton\";\nexport const HEADING_2XS_FONT_WEIGHT = 600;\nexport const HEADING_2XS_LINE_HEIGHT = \"24px\";\nexport const HEADING_2XS_FONT_SIZE = \"18px\";\nexport const HEADING_2XS_LETTER_SPACING = \"0%\";\nexport const HEADING_2XS_PARAGRAPH_INDENT = \"0px\";\nexport const HEADING_2XS_TEXT_CASE = \"none\";\nexport const HEADING_2XS_TEXT_DECORATION = \"none\";\nexport const BODY_XL_FONT_FAMILY = \"Campton\";\nexport const BODY_XL_FONT_WEIGHT = \"book\";\nexport const BODY_XL_LINE_HEIGHT = \"28px\";\nexport const BODY_XL_FONT_SIZE = \"18px\";\nexport const BODY_XL_LETTER_SPACING = \"0%\";\nexport const BODY_XL_PARAGRAPH_INDENT = \"0px\";\nexport const BODY_XL_TEXT_CASE = \"none\";\nexport const BODY_XL_TEXT_DECORATION = \"none\";\nexport const BODY_LG_FONT_FAMILY = \"Campton\";\nexport const BODY_LG_FONT_WEIGHT = \"book\";\nexport const BODY_LG_LINE_HEIGHT = \"24px\";\nexport const BODY_LG_FONT_SIZE = \"16px\";\nexport const BODY_LG_LETTER_SPACING = \"0%\";\nexport const BODY_LG_PARAGRAPH_INDENT = \"0px\";\nexport const BODY_LG_TEXT_CASE = \"none\";\nexport const BODY_LG_TEXT_DECORATION = \"none\";\nexport const BODY_MD_FONT_FAMILY = \"Campton\";\nexport const BODY_MD_FONT_WEIGHT = \"book\";\nexport const BODY_MD_LINE_HEIGHT = \"20px\";\nexport const BODY_MD_FONT_SIZE = \"14px\";\nexport const BODY_MD_LETTER_SPACING = \"0%\";\nexport const BODY_MD_PARAGRAPH_INDENT = \"0px\";\nexport const BODY_MD_TEXT_CASE = \"none\";\nexport const BODY_MD_TEXT_DECORATION = \"none\";\nexport const BODY_SM_FONT_FAMILY = \"Campton\";\nexport const BODY_SM_FONT_WEIGHT = \"book\";\nexport const BODY_SM_LINE_HEIGHT = \"20px\";\nexport const BODY_SM_FONT_SIZE = \"12px\";\nexport const BODY_SM_LETTER_SPACING = \"0%\";\nexport const BODY_SM_PARAGRAPH_INDENT = \"0px\";\nexport const BODY_SM_TEXT_CASE = \"none\";\nexport const BODY_SM_TEXT_DECORATION = \"none\";\nexport const UTILITY_BUTTON_FONT_FAMILY = \"Campton\";\nexport const UTILITY_BUTTON_FONT_WEIGHT = 500;\nexport const UTILITY_BUTTON_LINE_HEIGHT = \"16px\";\nexport const UTILITY_BUTTON_FONT_SIZE = \"16px\";\nexport const UTILITY_BUTTON_LETTER_SPACING = \"0%\";\nexport const UTILITY_BUTTON_PARAGRAPH_INDENT = \"0px\";\nexport const UTILITY_BUTTON_TEXT_CASE = \"none\";\nexport const UTILITY_BUTTON_TEXT_DECORATION = \"none\";\nexport const UTILITY_LINK_FONT_FAMILY = \"Campton\";\nexport const UTILITY_LINK_FONT_WEIGHT = 500;\nexport const UTILITY_LINK_LINE_HEIGHT = \"20px\";\nexport const UTILITY_LINK_FONT_SIZE = \"14px\";\nexport const UTILITY_LINK_LETTER_SPACING = \"0%\";\nexport const UTILITY_LINK_PARAGRAPH_INDENT = \"0px\";\nexport const UTILITY_LINK_TEXT_CASE = \"none\";\nexport const UTILITY_LINK_TEXT_DECORATION = \"underline\";\nexport const UTILITY_CAPTION_FONT_FAMILY = \"Campton\";\nexport const UTILITY_CAPTION_FONT_WEIGHT = \"book\";\nexport const UTILITY_CAPTION_LINE_HEIGHT = \"16px\";\nexport const UTILITY_CAPTION_FONT_SIZE = \"12px\";\nexport const UTILITY_CAPTION_LETTER_SPACING = \"0%\";\nexport const UTILITY_CAPTION_PARAGRAPH_INDENT = \"0px\";\nexport const UTILITY_CAPTION_TEXT_CASE = \"none\";\nexport const UTILITY_CAPTION_TEXT_DECORATION = \"none\";\nexport const FONT_FAMILIES_CAMPTON = \"Campton\";\nexport const LINE_HEIGHT_6XL = \"56px\";\nexport const LINE_HEIGHT_5XL = \"48px\";\nexport const LINE_HEIGHT_4XL = \"44px\";\nexport const LINE_HEIGHT_3XL = \"40px\";\nexport const LINE_HEIGHT_2XL = \"36px\";\nexport const LINE_HEIGHT_XL = \"32px\";\nexport const LINE_HEIGHT_LG = \"28px\";\nexport const LINE_HEIGHT_MD = \"24px\";\nexport const LINE_HEIGHT_S = \"20px\";\nexport const LINE_HEIGHT_XS = \"16px\";\nexport const MEDIUM = 500;\nexport const SEMI_BOLD = 600;\nexport const BOOK = \"book\";\nexport const FONT_SIZE_2XS = \"14px\";\nexport const FONT_SIZE_3XS = \"12px\";\nexport const FONT_SIZE_XS = \"16px\";\nexport const FONT_SIZE_MD = \"18px\";\nexport const FONT_SIZE_LG = \"20px\";\nexport const FONT_SIZE_XL = \"28px\";\nexport const FONT_SIZE_2XL = \"32px\";\nexport const FONT_SIZE_3XL = \"36px\";\nexport const FONT_SIZE_4XL = \"40px\";\nexport const FONT_SIZE_5XL = \"44px\";\nexport const FONT_SIZE_6XL = \"52px\";\nexport const LETTER_SPACING_0 = \"0%\";\nexport const TEXT_CASE_NONE = \"none\";\nexport const TEXT_DECORATION_NONE = \"none\";\nexport const TEXT_DECORATION_UNDERLINE = \"underline\";\nexport const PARAGRAPH_INDENT_0 = \"0px\";\n","/**\n * Convert rem values to numbers\n * @param remValue The rem value to convert (e.g. \"1.5rem\")\n * @returns The converted number value\n */\nexport const remToNumber = (remValue: string): number => {\n if (!remValue || typeof remValue !== 'string') return 0;\n return parseFloat(remValue.replace('rem', '')) * 16; // Assuming 1rem = 16px\n};\n\n/**\n * Convert px values to numbers\n * @param pxValue The px value to convert (e.g. \"24px\")\n * @returns The converted number value\n */\nexport const pxToNumber = (pxValue: string): number => {\n if (!pxValue || typeof pxValue !== 'string') return 0;\n return parseFloat(pxValue.replace('px', ''));\n};\n","import { pxToNumber } from \"./utils\";\n\n/**\n * Normalizes font weight to a string representation\n * Converts numeric values to string, handles special cases like \"book\"\n * @param weight The font weight value, can be a string or number\n * @returns Normalized font weight as a string\n */\nexport const normalizeFontWeight = (weight: string | number): string => {\n if (typeof weight === \"number\") {\n return weight.toString();\n }\n\n if (weight === \"book\") {\n return \"400\";\n }\n\n return weight;\n};\n\n/**\n * Calculates an appropriate line height based on font size\n * Uses a standard typographic ratio or falls back to a default multiplier\n *\n * @param fontSize The font size in pixels\n * @param ratio Optional ratio to calculate line height (default: 1.5)\n * @returns The calculated line height as a number\n */\nexport const calculateLineHeight = (\n fontSize: string | number,\n ratio: number = 1.5\n): number => {\n const size = typeof fontSize === \"string\" ? pxToNumber(fontSize) : fontSize;\n return Math.round(size * ratio);\n};\n\n/**\n * Converts letter spacing percentage to a pixel value\n * Figma often uses percentage values for letter spacing\n *\n * @param letterSpacing The letter spacing value (e.g. \"0%\", \"2%\")\n * @param fontSize The font size to calculate relative to\n * @returns The letter spacing in pixels as a number\n */\nexport const letterSpacingToPixels = (\n letterSpacing: string,\n fontSize: string | number\n): number => {\n // If letterSpacing is already a pixel value, convert and return\n if (letterSpacing.endsWith(\"px\")) {\n return pxToNumber(letterSpacing);\n }\n\n // Handle percentage values\n if (letterSpacing.endsWith(\"%\")) {\n const percentage = parseFloat(letterSpacing) / 100;\n const size = typeof fontSize === \"string\" ? pxToNumber(fontSize) : fontSize;\n return size * percentage;\n }\n\n // Default to 0 if format is not recognized\n return 0;\n};\n","// This file maps the generated tokens to a structured format for Typography component\nimport * as tokens from \"./tokens\";\nimport { normalizeFontWeight } from \"./utils/fontUtils\";\nimport { pxToNumber } from \"./utils/utils\";\n\nexport const typographyTokens = {\n // Display variants\n display2xl: {\n fontFamily: tokens.DISPLAY_2XL_FONT_FAMILY,\n fontSize: pxToNumber(tokens.DISPLAY_2XL_FONT_SIZE),\n fontWeight: normalizeFontWeight(tokens.DISPLAY_2XL_FONT_WEIGHT),\n lineHeight: pxToNumber(tokens.LINE_HEIGHT_6XL),\n color: tokens.TEXT_HEADER,\n letterSpacing: tokens.DISPLAY_2XL_LETTER_SPACING,\n textDecoration: tokens.DISPLAY_2XL_TEXT_DECORATION,\n textCase: tokens.DISPLAY_2XL_TEXT_CASE,\n },\n displayXl: {\n fontFamily: tokens.DISPLAY_XL_FONT_FAMILY,\n fontSize: pxToNumber(tokens.DISPLAY_XL_FONT_SIZE),\n fontWeight: normalizeFontWeight(tokens.DISPLAY_XL_FONT_WEIGHT),\n lineHeight: pxToNumber(tokens.LINE_HEIGHT_5XL),\n color: tokens.TEXT_HEADER,\n letterSpacing: tokens.DISPLAY_XL_LETTER_SPACING,\n textDecoration: tokens.DISPLAY_XL_TEXT_DECORATION,\n textCase: tokens.DISPLAY_XL_TEXT_CASE,\n },\n\n // Heading variants\n headingXl: {\n fontFamily: tokens.HEADING_XL_FONT_FAMILY,\n fontSize: pxToNumber(tokens.HEADING_XL_FONT_SIZE),\n fontWeight: normalizeFontWeight(tokens.HEADING_XL_FONT_WEIGHT),\n lineHeight: pxToNumber(tokens.LINE_HEIGHT_4XL),\n color: tokens.TEXT_HEADER,\n letterSpacing: tokens.HEADING_XL_LETTER_SPACING,\n textDecoration: tokens.HEADING_XL_TEXT_DECORATION,\n textCase: tokens.HEADING_XL_TEXT_CASE,\n },\n headingLg: {\n fontFamily: tokens.HEADING_LG_FONT_FAMILY,\n fontSize: pxToNumber(tokens.HEADING_LG_FONT_SIZE),\n fontWeight: normalizeFontWeight(tokens.HEADING_LG_FONT_WEIGHT),\n lineHeight: pxToNumber(tokens.LINE_HEIGHT_3XL),\n color: tokens.TEXT_HEADER,\n letterSpacing: tokens.HEADING_LG_LETTER_SPACING,\n textDecoration: tokens.HEADING_LG_TEXT_DECORATION,\n textCase: tokens.HEADING_LG_TEXT_CASE,\n },\n headingMd: {\n fontFamily: tokens.HEADING_MD_FONT_FAMILY,\n fontSize: pxToNumber(tokens.HEADING_MD_FONT_SIZE),\n fontWeight: normalizeFontWeight(tokens.HEADING_MD_FONT_WEIGHT),\n lineHeight: pxToNumber(tokens.LINE_HEIGHT_2XL),\n color: tokens.TEXT_HEADER,\n letterSpacing: tokens.HEADING_MD_LETTER_SPACING,\n textDecoration: tokens.HEADING_MD_TEXT_DECORATION,\n textCase: tokens.HEADING_MD_TEXT_CASE,\n },\n headingSm: {\n fontFamily: tokens.HEADING_SM_FONT_FAMILY,\n fontSize: pxToNumber(tokens.HEADING_SM_FONT_SIZE),\n fontWeight: normalizeFontWeight(tokens.HEADING_SM_FONT_WEIGHT),\n lineHeight: pxToNumber(tokens.LINE_HEIGHT_XL),\n color: tokens.TEXT_HEADER,\n letterSpacing: tokens.HEADING_SM_LETTER_SPACING,\n textDecoration: tokens.HEADING_SM_TEXT_DECORATION,\n textCase: tokens.HEADING_SM_TEXT_CASE,\n },\n headingXs: {\n fontFamily: tokens.HEADING_XS_FONT_FAMILY,\n fontSize: pxToNumber(tokens.HEADING_XS_FONT_SIZE),\n fontWeight: normalizeFontWeight(tokens.HEADING_XS_FONT_WEIGHT),\n lineHeight: pxToNumber(tokens.LINE_HEIGHT_LG),\n color: tokens.TEXT_HEADER,\n letterSpacing: tokens.HEADING_XS_LETTER_SPACING,\n textDecoration: tokens.HEADING_XS_TEXT_DECORATION,\n textCase: tokens.HEADING_XS_TEXT_CASE,\n },\n\n // Body text variants\n bodyXl: {\n fontFamily: tokens.BODY_XL_FONT_FAMILY,\n fontSize: pxToNumber(tokens.BODY_XL_FONT_SIZE),\n fontWeight: normalizeFontWeight(tokens.BODY_XL_FONT_WEIGHT),\n lineHeight: pxToNumber(tokens.BODY_XL_LINE_HEIGHT),\n color: tokens.TEXT_BODY,\n letterSpacing: tokens.BODY_XL_LETTER_SPACING,\n textDecoration: tokens.BODY_XL_TEXT_DECORATION,\n textCase: tokens.BODY_XL_TEXT_CASE,\n paragraphIndent: tokens.BODY_XL_PARAGRAPH_INDENT,\n },\n bodyLg: {\n fontFamily: tokens.BODY_LG_FONT_FAMILY,\n fontSize: pxToNumber(tokens.BODY_LG_FONT_SIZE),\n fontWeight: normalizeFontWeight(tokens.BODY_LG_FONT_WEIGHT),\n lineHeight: pxToNumber(tokens.BODY_LG_LINE_HEIGHT),\n color: tokens.TEXT_BODY,\n letterSpacing: tokens.BODY_LG_LETTER_SPACING,\n textDecoration: tokens.BODY_LG_TEXT_DECORATION,\n textCase: tokens.BODY_LG_TEXT_CASE,\n paragraphIndent: tokens.BODY_LG_PARAGRAPH_INDENT,\n },\n bodyMd: {\n fontFamily: tokens.BODY_MD_FONT_FAMILY,\n fontSize: pxToNumber(tokens.BODY_MD_FONT_SIZE),\n fontWeight: normalizeFontWeight(tokens.BODY_MD_FONT_WEIGHT),\n lineHeight: pxToNumber(tokens.BODY_MD_LINE_HEIGHT),\n color: tokens.TEXT_BODY,\n letterSpacing: tokens.BODY_MD_LETTER_SPACING,\n textDecoration: tokens.BODY_MD_TEXT_DECORATION,\n textCase: tokens.BODY_MD_TEXT_CASE,\n paragraphIndent: tokens.BODY_MD_PARAGRAPH_INDENT,\n },\n bodySm: {\n fontFamily: tokens.BODY_SM_FONT_FAMILY,\n fontSize: pxToNumber(tokens.BODY_SM_FONT_SIZE),\n fontWeight: normalizeFontWeight(tokens.BODY_SM_FONT_WEIGHT),\n lineHeight: pxToNumber(tokens.BODY_SM_LINE_HEIGHT),\n color: tokens.TEXT_BODY,\n letterSpacing: tokens.BODY_SM_LETTER_SPACING,\n textDecoration: tokens.BODY_SM_TEXT_DECORATION,\n textCase: tokens.BODY_SM_TEXT_CASE,\n paragraphIndent: tokens.BODY_SM_PARAGRAPH_INDENT,\n },\n bodyXs: {\n // Map to utility-caption which is our smallest text style in Figma tokens\n fontFamily: tokens.UTILITY_CAPTION_FONT_FAMILY,\n fontSize: pxToNumber(tokens.UTILITY_CAPTION_FONT_SIZE),\n fontWeight: normalizeFontWeight(tokens.UTILITY_CAPTION_FONT_WEIGHT),\n lineHeight: pxToNumber(tokens.UTILITY_CAPTION_LINE_HEIGHT),\n color: tokens.TEXT_BODY,\n letterSpacing: tokens.UTILITY_CAPTION_LETTER_SPACING,\n textDecoration: tokens.UTILITY_CAPTION_TEXT_DECORATION,\n textCase: tokens.UTILITY_CAPTION_TEXT_CASE,\n paragraphIndent: tokens.UTILITY_CAPTION_PARAGRAPH_INDENT,\n },\n\n // Label variants - map to Utility tokens from Figma\n labelLg: {\n // Maps to utility-button\n fontFamily: tokens.UTILITY_BUTTON_FONT_FAMILY,\n fontSize: pxToNumber(tokens.UTILITY_BUTTON_FONT_SIZE),\n fontWeight: normalizeFontWeight(tokens.UTILITY_BUTTON_FONT_WEIGHT),\n lineHeight: pxToNumber(tokens.UTILITY_BUTTON_LINE_HEIGHT),\n color: tokens.TEXT_TERTIARY,\n letterSpacing: tokens.UTILITY_BUTTON_LETTER_SPACING,\n textDecoration: tokens.UTILITY_BUTTON_TEXT_DECORATION,\n textCase: tokens.UTILITY_BUTTON_TEXT_CASE,\n },\n labelMd: {\n // Maps to utility-link\n fontFamily: tokens.UTILITY_LINK_FONT_FAMILY,\n fontSize: pxToNumber(tokens.UTILITY_LINK_FONT_SIZE),\n fontWeight: normalizeFontWeight(tokens.UTILITY_LINK_FONT_WEIGHT),\n lineHeight: pxToNumber(tokens.UTILITY_LINK_LINE_HEIGHT),\n color: tokens.TEXT_TERTIARY,\n letterSpacing: tokens.UTILITY_LINK_LETTER_SPACING,\n textDecoration: tokens.TEXT_DECORATION_NONE, // Override the default underline from utility-link\n textCase: tokens.UTILITY_LINK_TEXT_CASE,\n },\n labelSm: {\n // Maps to utility-caption\n fontFamily: tokens.UTILITY_CAPTION_FONT_FAMILY,\n fontSize: pxToNumber(tokens.UTILITY_CAPTION_FONT_SIZE),\n fontWeight: normalizeFontWeight(tokens.UTILITY_CAPTION_FONT_WEIGHT),\n lineHeight: pxToNumber(tokens.UTILITY_CAPTION_LINE_HEIGHT),\n color: tokens.TEXT_TERTIARY,\n letterSpacing: tokens.UTILITY_CAPTION_LETTER_SPACING,\n textDecoration: tokens.UTILITY_CAPTION_TEXT_DECORATION,\n textCase: tokens.UTILITY_CAPTION_TEXT_CASE,\n },\n\n // Weights mapping for custom weight overrides\n weights: {\n normal: \"400\", // Regular weight\n medium: normalizeFontWeight(tokens.MEDIUM),\n semibold: normalizeFontWeight(tokens.SEMI_BOLD),\n bold: \"700\", // Bold weight (not directly defined in tokens)\n },\n};\n\nexport default typographyTokens;\n","import React from \"react\";\nimport typographyTokens from \"../../styles/tokens/typography\";\nimport { DisplayProps } from \"../../types/Typography\";\n\nexport const Display: React.FC<DisplayProps> = ({\n size = \"2xl\",\n element = \"h1\",\n align = \"left\",\n weight,\n color,\n truncate = false,\n lineClamp,\n children,\n className = \"\",\n style = {},\n onClick,\n testID,\n ...rest\n}) => {\n const getStyles = (): React.CSSProperties => {\n const tokenSet =\n size === \"2xl\" ? typographyTokens.display2xl : typographyTokens.displayXl;\n\n let fontWeightValue = parseInt(tokenSet.fontWeight);\n if (weight) {\n if (weight === \"normal\") fontWeightValue = 400;\n else if (weight === \"medium\") fontWeightValue = 500;\n else if (weight === \"semibold\") fontWeightValue = 600;\n else if (weight === \"bold\") fontWeightValue = 700;\n }\n\n const baseStyles: React.CSSProperties = {\n fontFamily: tokenSet.fontFamily,\n fontSize: `${tokenSet.fontSize}px`,\n lineHeight: `${tokenSet.lineHeight}px`,\n fontWeight: fontWeightValue,\n color: color || tokenSet.color,\n textAlign: align,\n letterSpacing: tokenSet.letterSpacing,\n textDecoration: tokenSet.textDecoration || \"none\",\n };\n\n if (truncate) {\n baseStyles.whiteSpace = \"nowrap\";\n baseStyles.overflow = \"hidden\";\n baseStyles.textOverflow = \"ellipsis\";\n baseStyles.display = \"block\";\n }\n\n if (lineClamp && lineClamp > 0) {\n baseStyles.display = \"-webkit-box\";\n baseStyles.WebkitLineClamp = lineClamp;\n baseStyles.WebkitBoxOrient = \"vertical\";\n baseStyles.overflow = \"hidden\";\n baseStyles.textOverflow = \"ellipsis\";\n }\n\n return baseStyles;\n };\n\n const combinedStyles = {\n ...getStyles(),\n ...style,\n };\n\n const Component = element as React.ElementType;\n\n return (\n <Component\n style={combinedStyles}\n className={className}\n data-testid={testID}\n onClick={onClick}\n {...rest}\n >\n {children}\n </Component>\n );\n};\n","import React from \"react\";\nimport typographyTokens from \"../../styles/tokens/typography\";\nimport { HeadingProps, TypographyWeight } from \"../../types/Typography\";\n\ntype HeadingTokenKey =\n | \"headingXl\"\n | \"headingLg\"\n | \"headingMd\"\n | \"headingSm\"\n | \"headingXs\";\n\nexport const Heading: React.FC<HeadingProps> = ({\n size = \"xl\",\n element = \"h2\",\n align = \"left\",\n weight,\n color,\n truncate = false,\n lineClamp,\n children,\n className = \"\",\n style = {},\n onClick,\n testID,\n ...rest\n}) => {\n const getStyles = (): React.CSSProperties => {\n const tokenKeyMap: Record<string, HeadingTokenKey> = {\n xl: \"headingXl\",\n lg: \"headingLg\",\n md: \"headingMd\",\n sm: \"headingSm\",\n xs: \"headingXs\",\n };\n\n const tokenSet = typographyTokens[tokenKeyMap[size]];\n\n const fontWeightValue = weight\n ? parseInt(typographyTokens.weights[weight])\n : parseInt(tokenSet.fontWeight);\n\n const baseStyles: React.CSSProperties = {\n fontFamily: tokenSet.fontFamily,\n fontSize: `${tokenSet.fontSize}px`,\n lineHeight: `${tokenSet.lineHeight}px`,\n fontWeight: fontWeightValue,\n color: color || tokenSet.color,\n textAlign: align,\n letterSpacing: tokenSet.letterSpacing,\n textDecoration: tokenSet.textDecoration || \"none\",\n };\n\n const truncationStyles: React.CSSProperties = truncate\n ? {\n whiteSpace: \"nowrap\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n display: \"block\",\n }\n : {};\n\n const lineClampStyles: React.CSSProperties =\n lineClamp && lineClamp > 0\n ? {\n display: \"-webkit-box\",\n WebkitLineClamp: lineClamp,\n WebkitBoxOrient: \"vertical\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n }\n : {};\n\n return {\n ...baseStyles,\n ...truncationStyles,\n ...lineClampStyles,\n };\n };\n\n const combinedStyles = {\n ...getStyles(),\n ...style,\n };\n\n const linkProps = element === \"a\" ? rest : {};\n\n const headingElementMap: Record<string, React.ElementType> = {\n xl: \"h1\",\n lg: \"h2\",\n md: \"h3\",\n sm: \"h4\",\n xs: \"h5\",\n };\n\n const defaultElement = element === \"h2\" ? headingElementMap[size] : element;\n\n const Component = defaultElement as React.ElementType;\n\n return (\n <Component\n style={combinedStyles}\n className={className}\n data-testid={testID}\n onClick={onClick}\n {...linkProps}\n >\n {children}\n </Component>\n );\n};\n","import React from \"react\";\nimport typographyTokens from \"../../styles/tokens/typography\";\nimport { BodyProps } from \"../../types/Typography\";\n\nexport const Body: React.FC<BodyProps> = ({\n size = \"lg\",\n element = \"p\",\n align = \"left\",\n weight,\n color,\n truncate = false,\n lineClamp,\n children,\n className = \"\",\n style = {},\n onClick,\n testID,\n ...rest\n}) => {\n const getStyles = (): React.CSSProperties => {\n let tokenSet;\n switch (size) {\n case \"xl\":\n tokenSet = typographyTokens.bodyXl;\n break;\n case \"lg\":\n tokenSet = typographyTokens.bodyLg;\n break;\n case \"md\":\n tokenSet = typographyTokens.bodyMd;\n break;\n case \"sm\":\n tokenSet = typographyTokens.bodySm;\n break;\n }\n\n let fontWeightValue = parseInt(tokenSet.fontWeight);\n if (weight) {\n if (weight === \"normal\") fontWeightValue = 400;\n else if (weight === \"medium\") fontWeightValue = 500;\n else if (weight === \"semibold\") fontWeightValue = 600;\n else if (weight === \"bold\") fontWeightValue = 700;\n }\n\n const baseStyles: React.CSSProperties = {\n fontFamily: tokenSet.fontFamily,\n fontSize: `${tokenSet.fontSize}px`,\n lineHeight: `${tokenSet.lineHeight}px`,\n fontWeight: fontWeightValue,\n color: color || tokenSet.color,\n textAlign: align,\n letterSpacing: tokenSet.letterSpacing,\n textDecoration: tokenSet.textDecoration || \"none\",\n };\n\n if (truncate) {\n baseStyles.whiteSpace = \"nowrap\";\n baseStyles.overflow = \"hidden\";\n baseStyles.textOverflow = \"ellipsis\";\n baseStyles.display = \"block\";\n }\n\n if (lineClamp && lineClamp > 0) {\n baseStyles.display = \"-webkit-box\";\n baseStyles.WebkitLineClamp = lineClamp;\n baseStyles.WebkitBoxOrient = \"vertical\";\n baseStyles.overflow = \"hidden\";\n baseStyles.textOverflow = \"ellipsis\";\n }\n\n return baseStyles;\n };\n\n const combinedStyles = {\n ...getStyles(),\n ...style,\n };\n\n const linkProps = element === \"a\" ? rest : {};\n\n const Component = element as React.ElementType;\n\n return (\n <Component\n style={combinedStyles}\n className={className}\n data-testid={testID}\n onClick={onClick}\n {...linkProps}\n >\n {children}\n </Component>\n );\n};\n","import React from \"react\";\nimport typographyTokens from \"../../styles/tokens/typography\";\nimport { UtilityProps } from \"../../types/Typography\";\n\nexport const Utility: React.FC<UtilityProps> = ({\n variant = \"button\",\n element,\n align = \"left\",\n weight,\n color,\n truncate = false,\n lineClamp,\n children,\n className = \"\",\n style = {},\n onClick,\n testID,\n ...rest\n}) => {\n const getDefaultElement = () => {\n switch (variant) {\n case \"button\":\n return \"span\";\n case \"link\":\n return \"a\";\n case \"caption\":\n return \"span\";\n default:\n return \"span\";\n }\n };\n\n const elementToUse = element || getDefaultElement();\n\n const getStyles = (): React.CSSProperties => {\n let tokenSet;\n switch (variant) {\n case \"button\":\n tokenSet = typographyTokens.labelLg;\n break;\n case \"link\":\n tokenSet = typographyTokens.labelMd;\n break;\n case \"caption\":\n tokenSet = typographyTokens.labelSm;\n break;\n }\n\n let fontWeightValue = parseInt(tokenSet.fontWeight);\n if (weight) {\n if (weight === \"normal\") fontWeightValue = 400;\n else if (weight === \"medium\") fontWeightValue = 500;\n else if (weight === \"semibold\") fontWeightValue = 600;\n else if (weight === \"bold\") fontWeightValue = 700;\n }\n\n const baseStyles: React.CSSProperties = {\n fontFamily: tokenSet.fontFamily,\n fontSize: `${tokenSet.fontSize}px`,\n lineHeight: `${tokenSet.lineHeight}px`,\n fontWeight: fontWeightValue,\n color: color || tokenSet.color,\n textAlign: align,\n letterSpacing: tokenSet.letterSpacing,\n textDecoration:\n variant === \"link\" ? \"underline\" : tokenSet.textDecoration || \"none\",\n };\n\n if (truncate) {\n baseStyles.whiteSpace = \"nowrap\";\n baseStyles.overflow = \"hidden\";\n baseStyles.textOverflow = \"ellipsis\";\n baseStyles.display = \"block\";\n }\n\n if (lineClamp && lineClamp > 0) {\n baseStyles.display = \"-webkit-box\";\n baseStyles.WebkitLineClamp = lineClamp;\n baseStyles.WebkitBoxOrient = \"vertical\";\n baseStyles.overflow = \"hidden\";\n baseStyles.textOverflow = \"ellipsis\";\n }\n\n return baseStyles;\n };\n\n const combinedStyles = {\n ...getStyles(),\n ...style,\n };\n\n const linkProps = elementToUse === \"a\" ? rest : {};\n\n const Component = elementToUse as React.ElementType;\n\n return (\n <Component\n style={combinedStyles}\n className={className}\n data-testid={testID}\n onClick={onClick}\n {...linkProps}\n >\n {children}\n </Component>\n );\n};\n","export interface ThemeColors {\n primary: string;\n secondary: string;\n background: string;\n surface: string;\n text: string;\n textSecondary: string;\n border: string;\n error: string;\n warning: string;\n success: string;\n}\n\nexport interface ThemeSpacing {\n xs: number;\n sm: number;\n md: number;\n lg: number;\n xl: number;\n}\n\nexport interface ThemeBorderRadius {\n none: number;\n sm: number;\n md: number;\n lg: number;\n full: number;\n}\n\nexport interface ThemeTypography {\n fontSize: {\n xs: number;\n sm: number;\n md: number;\n lg: number;\n xl: number;\n xxl: number;\n };\n fontWeight: {\n normal: '400' | 'normal';\n medium: '500' | 'medium';\n semibold: '600' | 'semibold';\n bold: '700' | 'bold';\n };\n lineHeight: {\n tight: number;\n normal: number;\n relaxed: number;\n };\n}\n\nexport interface Theme {\n colors: ThemeColors;\n spacing: ThemeSpacing;\n borderRadius: ThemeBorderRadius;\n typography: ThemeTypography;\n}\n\nexport const defaultTheme: Theme = {\n colors: {\n primary: '#007AFF',\n secondary: '#5856D6',\n background: '#FFFFFF',\n surface: '#F2F2F7',\n text: '#000000',\n textSecondary: '#8E8E93',\n border: '#E5E5EA',\n error: '#FF3B30',\n warning: '#FF9500',\n success: '#34C759',\n },\n spacing: {\n xs: 4,\n sm: 8,\n md: 16,\n lg: 24,\n xl: 32,\n },\n borderRadius: {\n none: 0,\n sm: 4,\n md: 8,\n lg: 12,\n full: 9999,\n },\n typography: {\n fontSize: {\n xs: 12,\n sm: 14,\n md: 16,\n lg: 18,\n xl: 20,\n xxl: 24,\n },\n fontWeight: {\n normal: '400',\n medium: '500',\n semibold: '600',\n bold: '700',\n },\n lineHeight: {\n tight: 1.2,\n normal: 1.5,\n relaxed: 1.8,\n },\n },\n};\n","import React, { createContext, useContext, ReactNode } from \"react\";\nimport { Theme, defaultTheme } from \"./index\";\n\ninterface ThemeContextValue {\n theme: Theme;\n updateTheme: (newTheme: Partial<Theme>) => void;\n}\n\nconst ThemeContext = createContext<ThemeContextValue | undefined>(undefined);\n\ninterface ThemeProviderProps {\n children: ReactNode;\n theme?: Partial<Theme>;\n}\n\nexport const ThemeProvider: React.FC<ThemeProviderProps> = ({\n children,\n theme: customTheme,\n}) => {\n // Using useMemo instead of useState to prevent unnecessary re-renders\n const theme = React.useMemo<Theme>(\n () => ({\n ...defaultTheme,\n ...customTheme,\n colors: { ...defaultTheme.colors, ...customTheme?.colors },\n spacing: { ...defaultTheme.spacing, ...customTheme?.spacing },\n borderRadius: {\n ...defaultTheme.borderRadius,\n ...customTheme?.borderRadius,\n },\n typography: {\n ...defaultTheme.typography,\n ...customTheme?.typography,\n fontSize: {\n ...defaultTheme.typography.fontSize,\n ...customTheme?.typography?.fontSize,\n },\n fontWeight: {\n ...defaultTheme.typography.fontWeight,\n ...customTheme?.typography?.fontWeight,\n },\n lineHeight: {\n ...defaultTheme.typography.lineHeight,\n ...customTheme?.typography?.lineHeight,\n },\n },\n }),\n [customTheme]\n );\n\n const updateTheme = React.useCallback((newTheme: Partial<Theme>) => {\n console.log(\n \"Theme update requested, but we are using static theme for now.\",\n newTheme\n );\n }, []);\n\n return (\n <ThemeContext.Provider value={{ theme, updateTheme }}>\n {children}\n </ThemeContext.Provider>\n );\n};\n\nexport const useTheme = (): ThemeContextValue => {\n const context = useContext(ThemeContext);\n if (!context) {\n throw new Error(\"useTheme must be used within a ThemeProvider\");\n }\n return context;\n};\n"],"names":["icons","iconMap","Map","forEach","icon","set","name","Icon","size","color","className","style","onClick","ariaLabel","iconInfo","get","console","warn","paths","path","split","map","index","combinedStyle","display","verticalAlign","_jsx","width","height","viewBox","fill","xmlns","role","children","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin","IconList","searchQuery","iconSize","iconColor","onIconClick","filteredIcons","filter","toLowerCase","includes","length","_jsxs","padding","textAlign","gridTemplateColumns","gap","flexDirection","alignItems","border","borderRadius","cursor","transition","handleIconClick","iconName","onMouseOver","e","currentTarget","backgroundColor","transform","boxShadow","onMouseOut","justifyContent","marginBottom","fontSize","wordBreak","Button","label","type","disabled","leftIcon","rightIcon","fullWidth","accessibilityLabel","testID","onMouseEnter","onMouseLeave","onMouseDown","onMouseUp","isIconOnly","leftIconComponent","rightIconComponent","iconButton","buttonState","setButtonState","useState","hasBothIcons","baseStyle","flexShrink","opacity","background","getBaseStyles","textStyle","fontFamily","fontWeight","getTextStyles","TEXT_TERTIARY","TEXT_BODY","TEXT_HEADER","UTILITY_CAPTION_FONT_FAMILY","UTILITY_CAPTION_FONT_WEIGHT","UTILITY_CAPTION_LINE_HEIGHT","UTILITY_CAPTION_FONT_SIZE","UTILITY_CAPTION_TEXT_CASE","UTILITY_CAPTION_TEXT_DECORATION","pxToNumber","pxValue","parseFloat","replace","normalizeFontWeight","weight","toString","typographyTokens","display2xl","lineHeight","tokens.TEXT_HEADER","letterSpacing","textDecoration","textCase","displayXl","headingXl","headingLg","headingMd","headingSm","headingXs","bodyXl","tokens.TEXT_BODY","paragraphIndent","bodyLg","bodyMd","bodySm","bodyXs","tokens.UTILITY_CAPTION_FONT_FAMILY","tokens.UTILITY_CAPTION_FONT_SIZE","tokens.UTILITY_CAPTION_FONT_WEIGHT","tokens.UTILITY_CAPTION_LINE_HEIGHT","tokens.UTILITY_CAPTION_TEXT_DECORATION","tokens.UTILITY_CAPTION_TEXT_CASE","labelLg","tokens.TEXT_TERTIARY","labelMd","labelSm","weights","normal","medium","semibold","bold","Display","element","align","truncate","lineClamp","rest","combinedStyles","tokenSet","fontWeightValue","parseInt","baseStyles","whiteSpace","overflow","textOverflow","WebkitLineClamp","WebkitBoxOrient","getStyles","Heading","xl","lg","md","sm","xs","Body","Utility","variant","elementToUse","getDefaultElement","defaultTheme","colors","primary","secondary","surface","text","textSecondary","error","warning","success","spacing","none","full","typography","xxl","tight","relaxed","ThemeContext","createContext","undefined","ThemeProvider","theme","customTheme","React","useMemo","_a","_b","_c","updateTheme","useCallback","newTheme","log","Provider","value","useTheme","context","useContext","Error"],"mappings":"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lC7B,SAAUyC,EH4LsB,QG3LhCX,WAAYe,EHyLsB,KGxLlCK,WAAYT,EHkSe,QGjS3BvG,MAAOiH,EACPC,cHyLqC,KGxLrCC,eH2LsC,OG1LtCC,SHyLgC,QGvLlCG,UAAW,CACT5B,WHwLkC,UGvLlC7B,SAAUyC,EH0LsB,QGzLhCX,WAAYe,EHuLsB,KGtLlCK,WAAYT,EHyRe,QGxR3BvG,MAAOiH,EACPC,cHuLqC,KGtLrCC,eHyLsC,OGxLtCC,SHuLgC,QGrLlCI,UAAW,CACT7B,WHsLkC,UGrLlC7B,SAAUyC,EHwLsB,QGvLhCX,WAAYe,EHqLsB,KGpLlCK,WAAYT,EHgRe,QG/Q3BvG,MAAOiH,EACPC,cHqLqC,KGpLrCC,eHuLsC,OGtLtCC,SHqLgC,QGnLlCK,UAAW,CACT9B,WHoLkC,UGnLlC7B,SAAUyC,EHsLsB,QGrLhCX,WAAYe,EHmLsB,KGlLlCK,WAAYT,EHuQc,QGtQ1BvG,MAAOiH,EACPC,cHmLqC,KGlLrCC,eHqLsC,OGpLtCC,SHmLgC,QGjLlCM,UAAW,CACT/B,WHkLkC,UGjLlC7B,SAAUyC,EHoLsB,QGnLhCX,WAAYe,EHiLsB,KGhLlCK,WAAYT,EH8Pc,QG7P1BvG,MAAOiH,EACPC,cHiLqC,KGhLrCC,eHmLsC,OGlLtCC,SHiLgC,QG7KlCO,OAAQ,CACNhC,WHsL+B,UGrL/B7B,SAAUyC,EHwLmB,QGvL7BX,WAAYe,EHqLmB,QGpL/BK,WAAYT,EHqLmB,QGpL/BvG,MAAO4H,EACPV,cHqLkC,KGpLlCC,eHuLmC,OGtLnCC,SHqL6B,OGpL7BS,gBHmLoC,OGjLtCC,OAAQ,CACNnC,WHmL+B,UGlL/B7B,SAAUyC,EHqLmB,QGpL7BX,WAAYe,EHkLmB,QGjL/BK,WAAYT,EHkLmB,QGjL/BvG,MAAO4H,EACPV,cHkLkC,KGjLlCC,eHoLmC,OGnLnCC,SHkL6B,OGjL7BS,gBHgLoC,OG9KtCE,OAAQ,CACNpC,WHgL+B,UG/K/B7B,SAAUyC,EHkLmB,QGjL7BX,WAAYe,EH+KmB,QG9K/BK,WAAYT,EH+KmB,QG9K/BvG,MAAO4H,EACPV,cH+KkC,KG9KlCC,eHiLmC,OGhLnCC,SH+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"}
|
|
1
|
+
{"version":3,"file":"index.esm.js","sources":["../src/components/Icon/Icon.tsx","../src/components/Icon/IconList.tsx","../src/styles/tokens/tokens.ts","../src/styles/tokens/utils/utils.ts","../src/styles/tokens/utils/fontUtils.ts","../src/styles/tokens/typography.ts","../src/components/Button/Button.tsx","../src/components/Typography/Display.tsx","../src/components/Typography/Heading.tsx","../src/components/Typography/Body.tsx","../src/components/Typography/Utility.tsx","../src/theme/index.ts","../src/theme/ThemeProvider.tsx"],"sourcesContent":["import React from 'react';\nimport iconData from './icons.json';\n\nexport interface IconProps {\n /**\n * Name of the icon to display\n */\n name: string;\n\n /**\n * Size of the icon in pixels\n */\n size?: number;\n\n /**\n * Color of the icon\n */\n color?: string;\n\n /**\n * Optional CSS class name\n */\n className?: string;\n\n /**\n * Optional style overrides\n */\n style?: React.CSSProperties;\n\n /**\n * Optional click handler\n */\n onClick?: React.MouseEventHandler<SVGSVGElement>;\n\n /**\n * Aria label for accessibility\n */\n ariaLabel?: string;\n}\n\nexport interface IconData {\n name: string;\n path: string;\n viewBox: string;\n fill?: string;\n}\n\n// Export icon data for use in other components\nexport const icons: IconData[] = iconData.icons;\n\n// Create a map of icon names to icon data for quick lookup\nconst iconMap = new Map<string, IconData>();\nicons.forEach((icon) => {\n iconMap.set(icon.name, icon);\n});\n\nexport const Icon: React.FC<IconProps> = ({\n name,\n size = 24,\n color = 'currentColor',\n className = '',\n style = {},\n onClick,\n ariaLabel,\n}) => {\n // Find the icon data for the given name\n const iconInfo = iconMap.get(name);\n\n // If the icon doesn't exist, return null or a fallback\n if (!iconInfo) {\n console.warn(`Icon \"${name}\" not found`);\n return null;\n }\n\n // Split the path string into multiple paths if it contains multiple commands\n const paths = iconInfo.path.split(' M ').map((path, index) => \n index === 0 ? path : `M ${path}`\n );\n\n // Combine the style props\n const combinedStyle: React.CSSProperties = {\n display: 'inline-block',\n verticalAlign: 'middle',\n ...style,\n };\n\n return (\n <svg\n width={size}\n height={size}\n viewBox={iconInfo.viewBox}\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className={className}\n style={combinedStyle}\n onClick={onClick}\n aria-label={ariaLabel || `${name} icon`}\n role=\"img\"\n >\n {paths.map((path, index) => (\n <path\n key={index}\n d={path}\n stroke={iconInfo.fill ? 'none' : color}\n fill={iconInfo.fill ? color : 'none'}\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n ))}\n </svg>\n );\n};\n","import React from 'react';\nimport { Icon, icons, IconData } from './Icon';\n\nexport interface IconListProps {\n /**\n * Search query to filter icons\n */\n searchQuery?: string;\n\n /**\n * Size of each icon\n */\n iconSize?: number;\n\n /**\n * Color of each icon\n */\n iconColor?: string;\n\n /**\n * Function to handle when an icon is clicked\n */\n onIconClick?: (iconName: string) => void;\n}\n\nexport const IconList: React.FC<IconListProps> = ({\n searchQuery = '',\n iconSize = 24,\n iconColor = 'currentColor',\n onIconClick,\n}) => {\n // Filter icons based on the search query\n const filteredIcons = searchQuery\n ? icons.filter(icon => \n icon.name.toLowerCase().includes(searchQuery.toLowerCase())\n )\n : icons;\n\n const handleIconClick = (iconName: string) => {\n if (onIconClick) {\n onIconClick(iconName);\n }\n };\n\n return (\n <div>\n {filteredIcons.length === 0 ? (\n <div style={{ padding: '20px', textAlign: 'center' }}>\n No icons found matching \"{searchQuery}\"\n </div>\n ) : (\n <div\n style={{\n display: 'grid',\n gridTemplateColumns: 'repeat(auto-fill, minmax(100px, 1fr))',\n gap: '20px',\n }}\n >\n {filteredIcons.map((icon: IconData) => (\n <div\n key={icon.name}\n style={{\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n padding: '12px',\n border: '1px solid #eee',\n borderRadius: '8px',\n cursor: onIconClick ? 'pointer' : 'default',\n transition: 'all 0.2s ease-in-out',\n }}\n onClick={() => handleIconClick(icon.name)}\n onMouseOver={(e) => {\n e.currentTarget.style.backgroundColor = '#f9f9f9';\n e.currentTarget.style.transform = 'translateY(-2px)';\n e.currentTarget.style.boxShadow = '0 2px 8px rgba(0,0,0,0.05)';\n }}\n onMouseOut={(e) => {\n e.currentTarget.style.backgroundColor = 'transparent';\n e.currentTarget.style.transform = 'translateY(0)';\n e.currentTarget.style.boxShadow = 'none';\n }}\n >\n <div\n style={{\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n height: '50px',\n marginBottom: '8px',\n }}\n >\n <Icon name={icon.name} size={iconSize} color={iconColor} />\n </div>\n <div\n style={{\n fontSize: '12px',\n textAlign: 'center',\n wordBreak: 'break-word',\n }}\n >\n {icon.name}\n </div>\n </div>\n ))}\n </div>\n )}\n </div>\n );\n};\n","/**\n * File generated by the Figma Token Engine\n * Do not edit directly\n */\n\nexport const BORDER_RADIUS_TOOLTIP_DEFAULT = \"0.25rem\";\nexport const BORDER_RADIUS_POPOVER_DEFAULT = \"0.5rem\";\nexport const BORDER_RADIUS_TAG_SM = \"0.25rem\";\nexport const BORDER_RADIUS_TAG_XL = \"62.4rem\";\nexport const BORDER_RADIUS_BUTTON_SM = \"0.25rem\";\nexport const BORDER_RADIUS_BUTTON_FULL = \"62.4rem\";\nexport const BORDER_RADIUS_INPUT_SM = \"0.25rem\";\nexport const BORDER_RADIUS_INPUT_LG = \"0.5rem\";\nexport const BORDER_RADIUS_CARD_SM = \"0.25rem\";\nexport const BORDER_RADIUS_CARD_MD = \"0.5rem\";\nexport const BORDER_RADIUS_CARD_LG = \"0.75rem\";\nexport const BORDER_RADIUS_MODAL_LG = \"0.75rem\";\nexport const BORDER_RADIUS_MODAL_XL = \"1rem\";\nexport const BORDER_RADIUS_NONE = 0;\nexport const BORDER_RADIUS_XS = \"0.25rem\";\nexport const BORDER_RADIUS_SM = \"0.5rem\";\nexport const BORDER_RADIUS_MD = \"0.75rem\";\nexport const BORDER_RADIUS_LG = \"1rem\";\nexport const BORDER_RADIUS_XL = \"1.25rem\";\nexport const BORDER_RADIUS_2XL = \"1.5rem\";\nexport const BORDER_RADIUS_3XL = \"1.75rem\";\nexport const BORDER_RADIUS_FULL = \"62.4rem\";\nexport const BORDER_WIDTH_BUTTON_DEFAULT = \"0.0625rem\";\nexport const BORDER_WIDTH_BUTTON_HOVER = \"0.125rem\";\nexport const BORDER_WIDTH_BUTTON_PRESSED = \"0.125rem\";\nexport const BORDER_WIDTH_INPUT_DEFAULT = \"0.0625rem\";\nexport const BORDER_WIDTH_INPUT_FOCUS = \"0.125rem\";\nexport const BORDER_WIDTH_INPUT_ERROR = \"0.125rem\";\nexport const BORDER_WIDTH_CARD_DEFAULT = \"0.0625rem\";\nexport const BORDER_WIDTH_CARD_HOVER = \"0.125rem\";\nexport const BORDER_WIDTH_NONE = 0;\nexport const BORDER_WIDTH_XS = \"0.0625rem\";\nexport const BORDER_WIDTH_SM = \"0.125rem\";\nexport const BORDER_WIDTH_MD = \"0.25rem\";\nexport const BORDER_GREEN = \"#00df88\";\nexport const BORDER_BLUE = \"#0053e2\";\nexport const BORDER_YELLOW = \"#f4b400\";\nexport const BORDER_RED = \"#a90000\";\nexport const BORDER_DARK = \"#111\";\nexport const BORDER_LIGHT = \"#e2e2e2\";\nexport const BORDER_LIGHTER = \"#f1f1f1\";\nexport const LAYOUT_SPACING_INLINE_NONE = 0;\nexport const LAYOUT_SPACING_INLINE_3XS = \"0.125rem\";\nexport const LAYOUT_SPACING_INLINE_2XS = \"0.25rem\";\nexport const LAYOUT_SPACING_INLINE_XS = \"0.5rem\";\nexport const LAYOUT_SPACING_INLINE_SM = \"0.75rem\";\nexport const LAYOUT_SPACING_INLINE_MD = \"1rem\";\nexport const LAYOUT_SPACING_INLINE_LG = \"2rem\";\nexport const LAYOUT_SPACING_INLINE_XL = \"2.5rem\";\nexport const LAYOUT_SPACING_INLINE_2XL = \"5rem\";\nexport const LAYOUT_SPACING_STACK_NONE = 0;\nexport const LAYOUT_SPACING_STACK_3XS = \"0.125rem\";\nexport const LAYOUT_SPACING_STACK_2XS = \"0.25rem\";\nexport const LAYOUT_SPACING_STACK_XS = \"0.5rem\";\nexport const LAYOUT_SPACING_STACK_SM = \"0.75rem\";\nexport const LAYOUT_SPACING_STACK_MD = \"1rem\";\nexport const LAYOUT_SPACING_STACK_LG = \"2rem\";\nexport const LAYOUT_SPACING_STACK_XL = \"2.5rem\";\nexport const LAYOUT_SPACING_STACK_2XL = \"5rem\";\nexport const SECTION_SPACING_SM = \"1.5rem\";\nexport const SECTION_SPACING_MD = \"1.75rem\";\nexport const SECTION_SPACING_LG = \"2rem\";\nexport const SECTION_SPACING_XL = \"2.5rem\";\nexport const SECTION_SPACING_2XL = \"3.5rem\";\nexport const SECTION_SPACING_3XL = \"5rem\";\nexport const COMPONENT_CARD_SM = \"0.75rem\";\nexport const COMPONENT_CARD_MD = \"1.25rem\";\nexport const COMPONENT_CARD_LG = \"1.5rem\";\nexport const COMPONENT_CARD_XL = \"2rem\";\nexport const COMPONENT_CARD_2XL = \"2.5rem\";\nexport const COMPONENT_MODAL_SM = \"1.25rem\";\nexport const COMPONENT_MODAL_MD = \"1.5rem\";\nexport const COMPONENT_MODAL_LG = \"1.75rem\";\nexport const SPACE_0 = 0;\nexport const SPACE_3XS = \"0.125rem\";\nexport const SPACE_2XS = \"0.25rem\";\nexport const SPACE_XS = \"0.5rem\";\nexport const SPACE_SM = \"0.75rem\";\nexport const SPACE_MD = \"1rem\";\nexport const SPACE_LG = \"1.25rem\";\nexport const SPACE_XL = \"1.5rem\";\nexport const SPACE_2XL = \"1.75rem\";\nexport const SPACE_3XL = \"2rem\";\nexport const SPACE_4XL = \"2.5rem\";\nexport const SPACE_5XL = \"3rem\";\nexport const SPACE_6XL = \"3.5rem\";\nexport const SPACE_7XL = \"4rem\";\nexport const SPACE_8XL = \"5rem\";\nexport const XS = \"0.75rem\";\nexport const S = \"1rem\";\nexport const MD = \"1.25rem\";\nexport const LG = \"1.5rem\";\nexport const XL = \"1.75rem\";\nexport const XXL = \"2rem\";\nexport const BACKGROUND_YELLOW_LIGHT = \"#fff5d9\";\nexport const BACKGROUND_YELLOW_MEDIUM = \"#ffe7a5\";\nexport const BACKGROUND_BLUE_LIGHT = \"#e3ebff\";\nexport const BACKGROUND_BLUE_MEDIUM = \"#c3deff\";\nexport const BACKGROUND_GREEN_LIGHT = \"#E5FCF3\";\nexport const BACKGROUND_GREEN_MEDIUM = \"#ccf9e7\";\nexport const BACKGROUND_GREEN_DARK = \"#00df88\";\nexport const BACKGROUND_RED_LIGHT = \"#feecec\";\nexport const BACKGROUND_RED_MEDIUM = \"#fed8d8\";\nexport const BACKGROUND_WHITE_LIGHT = \"#ffffff\";\nexport const BACKGROUND_NEUTRAL_DARK = \"#111\";\nexport const BACKGROUND_NEUTRAL_GREY = \"#e2e2e2\";\nexport const BACKGROUND_NEUTRAL_LIGHT = \"#f1f1f1\";\nexport const TEXT_INVERSE = \"#ffffff\";\nexport const TEXT_DISABLED = \"#ababab\";\nexport const TEXT_PLACEHOLDER = \"#919191\";\nexport const TEXT_TERTIARY = \"#525252\";\nexport const TEXT_BODY = \"#3b3b3b\";\nexport const TEXT_HEADER = \"#111\";\nexport const TEXT_GREEN = \"#00df88\";\nexport const TEXT_BLUE = \"#0053e2\";\nexport const TEXT_ERROR = \"#a90000\";\nexport const TEXT_YELLOW = \"#f4b400\";\nexport const FEEDBACK_ALERT_SUCCESS = \"#00df88\";\nexport const FEEDBACK_ALERT_ERROR = \"#a90000\";\nexport const FEEDBACK_ALERT_WARNING = \"#fff5d9\";\nexport const FEEDBACK_ALERT_NEUTRAL = \"#111\";\nexport const ACTION_PRIMARY_DEFAULT = \"#00df88\";\nexport const ACTION_PRIMARY_HOVER = \"#4ce9ac\";\nexport const ACTION_PRIMARY_ACTIVE = \"#98f2cf\";\nexport const ACTION_PRIMARY_DISABLED = \"#E5FCF3\";\nexport const ACTION_SECONDARY_DEFAULT = \"#0053e2\";\nexport const ACTION_SECONDARY_HOVER = \"#254cac\";\nexport const ACTION_SECONDARY_ACTIVE = \"#9ec1ff\";\nexport const ACTION_SECONDARY_DISABLED = \"#e3ebff\";\nexport const ACTION_DESTRUCTIVE_DEFAULT = \"#d60000\";\nexport const ACTION_DESTRUCTIVE_HOVER = \"#a90000\";\nexport const ACTION_DESTRUCTIVE_ACTIVE = \"#fed8d8\";\nexport const ACTION_DESTRUCTIVE_DISABLE = \"#feecec\";\nexport const ACTION_TERTIARY_DEFAULT = \"#3b3b3b\";\nexport const ACTION_TERTIARY_HOVER = \"#111\";\nexport const ACTION_TERTIARY_ACTIVE = \"#ababab\";\nexport const ACTION_TERTIARY_DISABLE = \"#f1f1f1\";\nexport const ICON_YELLOW = \"#f4b400\";\nexport const ICON_BLUE = \"#0053e2\";\nexport const ICON_GREEN = \"#00df88\";\nexport const ICON_RED = \"#a90000\";\nexport const ICON_NEUTRAL = \"#111\";\nexport const ICON_LIGHT = \"#e2e2e2\";\nexport const ICON_LIGHTER = \"#f1f1f1\";\nexport const GREEN_10 = \"#E5FCF3\";\nexport const GREEN_20 = \"#ccf9e7\";\nexport const GREEN_30 = \"#B2F5DB\";\nexport const GREEN_40 = \"#98f2cf\";\nexport const GREEN_50 = \"#81efc3\";\nexport const GREEN_60 = \"#66ecb8\";\nexport const GREEN_70 = \"#4ce9ac\";\nexport const GREEN_80 = \"#31e5a0\";\nexport const GREEN_90 = \"#1ae294\";\nexport const GREEN_100 = \"#00df88\";\nexport const NEUTRAL_10 = \"#f1f1f1\";\nexport const NEUTRAL_20 = \"#e2e2e2\";\nexport const NEUTRAL_30 = \"#c6c6c6\";\nexport const NEUTRAL_40 = \"#ababab\";\nexport const NEUTRAL_50 = \"#919191\";\nexport const NEUTRAL_60 = \"#6a6a6a\";\nexport const NEUTRAL_70 = \"#525252\";\nexport const NEUTRAL_80 = \"#3b3b3b\";\nexport const NEUTRAL_90 = \"#262626\";\nexport const NEUTRAL_100 = \"#111\";\nexport const BLUE_10 = \"#e3ebff\";\nexport const BLUE_20 = \"#c3deff\";\nexport const BLUE_30 = \"#9ec1ff\";\nexport const BLUE_40 = \"#5c83fd\";\nexport const BLUE_50 = \"#446ef5\";\nexport const BLUE_60 = \"#0053e2\";\nexport const BLUE_70 = \"#254cac\";\nexport const BLUE_80 = \"#14328d\";\nexport const BLUE_90 = \"#0c285f\";\nexport const BLUE_100 = \"#071e3c\";\nexport const RED_10 = \"#feecec\";\nexport const RED_20 = \"#fed8d8\";\nexport const RED_30 = \"#feb3b3\";\nexport const RED_40 = \"#fe8888\";\nexport const RED_50 = \"#fb5959\";\nexport const RED_60 = \"#d60000\";\nexport const RED_70 = \"#a90000\";\nexport const RED_80 = \"#820000\";\nexport const RED_90 = \"#550000\";\nexport const RED_100 = \"#3a0000\";\nexport const YELLOW_10 = \"#fff5d9\";\nexport const YELLOW_20 = \"#ffe7a5\";\nexport const YELLOW_30 = \"#ffd86b\";\nexport const YELLOW_40 = \"#ffce46\";\nexport const YELLOW_50 = \"#ffc420\";\nexport const YELLOW_60 = \"#f4b400\";\nexport const YELLOW_70 = \"#dba200\";\nexport const YELLOW_80 = \"#c69200\";\nexport const YELLOW_90 = \"#b38400\";\nexport const YELLOW_100 = \"#9a7100\";\nexport const WHITE_10 = \"#ffffff\";\nexport const DISPLAY_2XL_FONT_FAMILY = \"Campton\";\nexport const DISPLAY_2XL_FONT_WEIGHT = 500;\nexport const DISPLAY_2XL_LINE_HEIGHT = \"56px\";\nexport const DISPLAY_2XL_FONT_SIZE = \"52px\";\nexport const DISPLAY_2XL_LETTER_SPACING = \"0%\";\nexport const DISPLAY_2XL_PARAGRAPH_INDENT = \"0px\";\nexport const DISPLAY_2XL_TEXT_CASE = \"none\";\nexport const DISPLAY_2XL_TEXT_DECORATION = \"none\";\nexport const DISPLAY_XL_FONT_FAMILY = \"Campton\";\nexport const DISPLAY_XL_FONT_WEIGHT = 500;\nexport const DISPLAY_XL_LINE_HEIGHT = \"48px\";\nexport const DISPLAY_XL_FONT_SIZE = \"44px\";\nexport const DISPLAY_XL_LETTER_SPACING = \"0%\";\nexport const DISPLAY_XL_PARAGRAPH_INDENT = \"0px\";\nexport const DISPLAY_XL_TEXT_CASE = \"none\";\nexport const DISPLAY_XL_TEXT_DECORATION = \"none\";\nexport const HEADING_XL_FONT_FAMILY = \"Campton\";\nexport const HEADING_XL_FONT_WEIGHT = 600;\nexport const HEADING_XL_LINE_HEIGHT = \"48px\";\nexport const HEADING_XL_FONT_SIZE = \"40px\";\nexport const HEADING_XL_LETTER_SPACING = \"0%\";\nexport const HEADING_XL_PARAGRAPH_INDENT = \"0px\";\nexport const HEADING_XL_TEXT_CASE = \"none\";\nexport const HEADING_XL_TEXT_DECORATION = \"none\";\nexport const HEADING_LG_FONT_FAMILY = \"Campton\";\nexport const HEADING_LG_FONT_WEIGHT = 600;\nexport const HEADING_LG_LINE_HEIGHT = \"44px\";\nexport const HEADING_LG_FONT_SIZE = \"36px\";\nexport const HEADING_LG_LETTER_SPACING = \"0%\";\nexport const HEADING_LG_PARAGRAPH_INDENT = \"0px\";\nexport const HEADING_LG_TEXT_CASE = \"none\";\nexport const HEADING_LG_TEXT_DECORATION = \"none\";\nexport const HEADING_MD_FONT_FAMILY = \"Campton\";\nexport const HEADING_MD_FONT_WEIGHT = 600;\nexport const HEADING_MD_LINE_HEIGHT = \"40px\";\nexport const HEADING_MD_FONT_SIZE = \"32px\";\nexport const HEADING_MD_LETTER_SPACING = \"0%\";\nexport const HEADING_MD_PARAGRAPH_INDENT = \"0px\";\nexport const HEADING_MD_TEXT_CASE = \"none\";\nexport const HEADING_MD_TEXT_DECORATION = \"none\";\nexport const HEADING_SM_FONT_FAMILY = \"Campton\";\nexport const HEADING_SM_FONT_WEIGHT = 600;\nexport const HEADING_SM_LINE_HEIGHT = \"36px\";\nexport const HEADING_SM_FONT_SIZE = \"28px\";\nexport const HEADING_SM_LETTER_SPACING = \"0%\";\nexport const HEADING_SM_PARAGRAPH_INDENT = \"0px\";\nexport const HEADING_SM_TEXT_CASE = \"none\";\nexport const HEADING_SM_TEXT_DECORATION = \"none\";\nexport const HEADING_XS_FONT_FAMILY = \"Campton\";\nexport const HEADING_XS_FONT_WEIGHT = 600;\nexport const HEADING_XS_LINE_HEIGHT = \"28px\";\nexport const HEADING_XS_FONT_SIZE = \"20px\";\nexport const HEADING_XS_LETTER_SPACING = \"0%\";\nexport const HEADING_XS_PARAGRAPH_INDENT = \"0px\";\nexport const HEADING_XS_TEXT_CASE = \"none\";\nexport const HEADING_XS_TEXT_DECORATION = \"none\";\nexport const HEADING_2XS_FONT_FAMILY = \"Campton\";\nexport const HEADING_2XS_FONT_WEIGHT = 600;\nexport const HEADING_2XS_LINE_HEIGHT = \"24px\";\nexport const HEADING_2XS_FONT_SIZE = \"18px\";\nexport const HEADING_2XS_LETTER_SPACING = \"0%\";\nexport const HEADING_2XS_PARAGRAPH_INDENT = \"0px\";\nexport const HEADING_2XS_TEXT_CASE = \"none\";\nexport const HEADING_2XS_TEXT_DECORATION = \"none\";\nexport const BODY_XL_FONT_FAMILY = \"Campton\";\nexport const BODY_XL_FONT_WEIGHT = \"book\";\nexport const BODY_XL_LINE_HEIGHT = \"28px\";\nexport const BODY_XL_FONT_SIZE = \"18px\";\nexport const BODY_XL_LETTER_SPACING = \"0%\";\nexport const BODY_XL_PARAGRAPH_INDENT = \"0px\";\nexport const BODY_XL_TEXT_CASE = \"none\";\nexport const BODY_XL_TEXT_DECORATION = \"none\";\nexport const BODY_LG_FONT_FAMILY = \"Campton\";\nexport const BODY_LG_FONT_WEIGHT = \"book\";\nexport const BODY_LG_LINE_HEIGHT = \"24px\";\nexport const BODY_LG_FONT_SIZE = \"16px\";\nexport const BODY_LG_LETTER_SPACING = \"0%\";\nexport const BODY_LG_PARAGRAPH_INDENT = \"0px\";\nexport const BODY_LG_TEXT_CASE = \"none\";\nexport const BODY_LG_TEXT_DECORATION = \"none\";\nexport const BODY_MD_FONT_FAMILY = \"Campton\";\nexport const BODY_MD_FONT_WEIGHT = \"book\";\nexport const BODY_MD_LINE_HEIGHT = \"20px\";\nexport const BODY_MD_FONT_SIZE = \"14px\";\nexport const BODY_MD_LETTER_SPACING = \"0%\";\nexport const BODY_MD_PARAGRAPH_INDENT = \"0px\";\nexport const BODY_MD_TEXT_CASE = \"none\";\nexport const BODY_MD_TEXT_DECORATION = \"none\";\nexport const BODY_SM_FONT_FAMILY = \"Campton\";\nexport const BODY_SM_FONT_WEIGHT = \"book\";\nexport const BODY_SM_LINE_HEIGHT = \"20px\";\nexport const BODY_SM_FONT_SIZE = \"12px\";\nexport const BODY_SM_LETTER_SPACING = \"0%\";\nexport const BODY_SM_PARAGRAPH_INDENT = \"0px\";\nexport const BODY_SM_TEXT_CASE = \"none\";\nexport const BODY_SM_TEXT_DECORATION = \"none\";\nexport const UTILITY_BUTTON_FONT_FAMILY = \"Campton\";\nexport const UTILITY_BUTTON_FONT_WEIGHT = 500;\nexport const UTILITY_BUTTON_LINE_HEIGHT = \"16px\";\nexport const UTILITY_BUTTON_FONT_SIZE = \"16px\";\nexport const UTILITY_BUTTON_LETTER_SPACING = \"0%\";\nexport const UTILITY_BUTTON_PARAGRAPH_INDENT = \"0px\";\nexport const UTILITY_BUTTON_TEXT_CASE = \"none\";\nexport const UTILITY_BUTTON_TEXT_DECORATION = \"none\";\nexport const UTILITY_LINK_FONT_FAMILY = \"Campton\";\nexport const UTILITY_LINK_FONT_WEIGHT = 500;\nexport const UTILITY_LINK_LINE_HEIGHT = \"20px\";\nexport const UTILITY_LINK_FONT_SIZE = \"14px\";\nexport const UTILITY_LINK_LETTER_SPACING = \"0%\";\nexport const UTILITY_LINK_PARAGRAPH_INDENT = \"0px\";\nexport const UTILITY_LINK_TEXT_CASE = \"none\";\nexport const UTILITY_LINK_TEXT_DECORATION = \"underline\";\nexport const UTILITY_CAPTION_FONT_FAMILY = \"Campton\";\nexport const UTILITY_CAPTION_FONT_WEIGHT = \"book\";\nexport const UTILITY_CAPTION_LINE_HEIGHT = \"16px\";\nexport const UTILITY_CAPTION_FONT_SIZE = \"12px\";\nexport const UTILITY_CAPTION_LETTER_SPACING = \"0%\";\nexport const UTILITY_CAPTION_PARAGRAPH_INDENT = \"0px\";\nexport const UTILITY_CAPTION_TEXT_CASE = \"none\";\nexport const UTILITY_CAPTION_TEXT_DECORATION = \"none\";\nexport const FONT_FAMILIES_CAMPTON = \"Campton\";\nexport const LINE_HEIGHT_6XL = \"56px\";\nexport const LINE_HEIGHT_5XL = \"48px\";\nexport const LINE_HEIGHT_4XL = \"44px\";\nexport const LINE_HEIGHT_3XL = \"40px\";\nexport const LINE_HEIGHT_2XL = \"36px\";\nexport const LINE_HEIGHT_XL = \"32px\";\nexport const LINE_HEIGHT_LG = \"28px\";\nexport const LINE_HEIGHT_MD = \"24px\";\nexport const LINE_HEIGHT_S = \"20px\";\nexport const LINE_HEIGHT_XS = \"16px\";\nexport const MEDIUM = 500;\nexport const SEMI_BOLD = 600;\nexport const BOOK = \"book\";\nexport const FONT_SIZE_2XS = \"14px\";\nexport const FONT_SIZE_3XS = \"12px\";\nexport const FONT_SIZE_XS = \"16px\";\nexport const FONT_SIZE_MD = \"18px\";\nexport const FONT_SIZE_LG = \"20px\";\nexport const FONT_SIZE_XL = \"28px\";\nexport const FONT_SIZE_2XL = \"32px\";\nexport const FONT_SIZE_3XL = \"36px\";\nexport const FONT_SIZE_4XL = \"40px\";\nexport const FONT_SIZE_5XL = \"44px\";\nexport const FONT_SIZE_6XL = \"52px\";\nexport const LETTER_SPACING_0 = \"0%\";\nexport const TEXT_CASE_NONE = \"none\";\nexport const TEXT_DECORATION_NONE = \"none\";\nexport const TEXT_DECORATION_UNDERLINE = \"underline\";\nexport const PARAGRAPH_INDENT_0 = \"0px\";\n","/**\n * Convert rem values to numbers\n * @param remValue The rem value to convert (e.g. \"1.5rem\")\n * @returns The converted number value\n */\nexport const remToNumber = (remValue: string): number => {\n if (!remValue || typeof remValue !== 'string') return 0;\n return parseFloat(remValue.replace('rem', '')) * 16; // Assuming 1rem = 16px\n};\n\n/**\n * Convert px values to numbers\n * @param pxValue The px value to convert (e.g. \"24px\")\n * @returns The converted number value\n */\nexport const pxToNumber = (pxValue: string): number => {\n if (!pxValue || typeof pxValue !== 'string') return 0;\n return parseFloat(pxValue.replace('px', ''));\n};\n","import { pxToNumber } from \"./utils\";\n\n/**\n * Normalizes font weight to a string representation\n * Converts numeric values to string, handles special cases like \"book\"\n * @param weight The font weight value, can be a string or number\n * @returns Normalized font weight as a string\n */\nexport const normalizeFontWeight = (weight: string | number): string => {\n if (typeof weight === \"number\") {\n return weight.toString();\n }\n\n if (weight === \"book\") {\n return \"400\";\n }\n\n return weight;\n};\n\n/**\n * Calculates an appropriate line height based on font size\n * Uses a standard typographic ratio or falls back to a default multiplier\n *\n * @param fontSize The font size in pixels\n * @param ratio Optional ratio to calculate line height (default: 1.5)\n * @returns The calculated line height as a number\n */\nexport const calculateLineHeight = (\n fontSize: string | number,\n ratio: number = 1.5\n): number => {\n const size = typeof fontSize === \"string\" ? pxToNumber(fontSize) : fontSize;\n return Math.round(size * ratio);\n};\n\n/**\n * Converts letter spacing percentage to a pixel value\n * Figma often uses percentage values for letter spacing\n *\n * @param letterSpacing The letter spacing value (e.g. \"0%\", \"2%\")\n * @param fontSize The font size to calculate relative to\n * @returns The letter spacing in pixels as a number\n */\nexport const letterSpacingToPixels = (\n letterSpacing: string,\n fontSize: string | number\n): number => {\n // If letterSpacing is already a pixel value, convert and return\n if (letterSpacing.endsWith(\"px\")) {\n return pxToNumber(letterSpacing);\n }\n\n // Handle percentage values\n if (letterSpacing.endsWith(\"%\")) {\n const percentage = parseFloat(letterSpacing) / 100;\n const size = typeof fontSize === \"string\" ? pxToNumber(fontSize) : fontSize;\n return size * percentage;\n }\n\n // Default to 0 if format is not recognized\n return 0;\n};\n","// This file maps the generated tokens to a structured format for Typography component\nimport * as tokens from \"./tokens\";\nimport { normalizeFontWeight } from \"./utils/fontUtils\";\nimport { pxToNumber } from \"./utils/utils\";\n\nexport const typographyTokens = {\n // Display variants\n display2xl: {\n fontFamily: tokens.DISPLAY_2XL_FONT_FAMILY,\n fontSize: pxToNumber(tokens.DISPLAY_2XL_FONT_SIZE),\n fontWeight: normalizeFontWeight(tokens.DISPLAY_2XL_FONT_WEIGHT),\n lineHeight: pxToNumber(tokens.LINE_HEIGHT_6XL),\n color: tokens.TEXT_HEADER,\n letterSpacing: tokens.DISPLAY_2XL_LETTER_SPACING,\n textDecoration: tokens.DISPLAY_2XL_TEXT_DECORATION,\n textCase: tokens.DISPLAY_2XL_TEXT_CASE,\n },\n displayXl: {\n fontFamily: tokens.DISPLAY_XL_FONT_FAMILY,\n fontSize: pxToNumber(tokens.DISPLAY_XL_FONT_SIZE),\n fontWeight: normalizeFontWeight(tokens.DISPLAY_XL_FONT_WEIGHT),\n lineHeight: pxToNumber(tokens.LINE_HEIGHT_5XL),\n color: tokens.TEXT_HEADER,\n letterSpacing: tokens.DISPLAY_XL_LETTER_SPACING,\n textDecoration: tokens.DISPLAY_XL_TEXT_DECORATION,\n textCase: tokens.DISPLAY_XL_TEXT_CASE,\n },\n\n // Heading variants\n headingXl: {\n fontFamily: tokens.HEADING_XL_FONT_FAMILY,\n fontSize: pxToNumber(tokens.HEADING_XL_FONT_SIZE),\n fontWeight: normalizeFontWeight(tokens.HEADING_XL_FONT_WEIGHT),\n lineHeight: pxToNumber(tokens.LINE_HEIGHT_4XL),\n color: tokens.TEXT_HEADER,\n letterSpacing: tokens.HEADING_XL_LETTER_SPACING,\n textDecoration: tokens.HEADING_XL_TEXT_DECORATION,\n textCase: tokens.HEADING_XL_TEXT_CASE,\n },\n headingLg: {\n fontFamily: tokens.HEADING_LG_FONT_FAMILY,\n fontSize: pxToNumber(tokens.HEADING_LG_FONT_SIZE),\n fontWeight: normalizeFontWeight(tokens.HEADING_LG_FONT_WEIGHT),\n lineHeight: pxToNumber(tokens.LINE_HEIGHT_3XL),\n color: tokens.TEXT_HEADER,\n letterSpacing: tokens.HEADING_LG_LETTER_SPACING,\n textDecoration: tokens.HEADING_LG_TEXT_DECORATION,\n textCase: tokens.HEADING_LG_TEXT_CASE,\n },\n headingMd: {\n fontFamily: tokens.HEADING_MD_FONT_FAMILY,\n fontSize: pxToNumber(tokens.HEADING_MD_FONT_SIZE),\n fontWeight: normalizeFontWeight(tokens.HEADING_MD_FONT_WEIGHT),\n lineHeight: pxToNumber(tokens.LINE_HEIGHT_2XL),\n color: tokens.TEXT_HEADER,\n letterSpacing: tokens.HEADING_MD_LETTER_SPACING,\n textDecoration: tokens.HEADING_MD_TEXT_DECORATION,\n textCase: tokens.HEADING_MD_TEXT_CASE,\n },\n headingSm: {\n fontFamily: tokens.HEADING_SM_FONT_FAMILY,\n fontSize: pxToNumber(tokens.HEADING_SM_FONT_SIZE),\n fontWeight: normalizeFontWeight(tokens.HEADING_SM_FONT_WEIGHT),\n lineHeight: pxToNumber(tokens.LINE_HEIGHT_XL),\n color: tokens.TEXT_HEADER,\n letterSpacing: tokens.HEADING_SM_LETTER_SPACING,\n textDecoration: tokens.HEADING_SM_TEXT_DECORATION,\n textCase: tokens.HEADING_SM_TEXT_CASE,\n },\n headingXs: {\n fontFamily: tokens.HEADING_XS_FONT_FAMILY,\n fontSize: pxToNumber(tokens.HEADING_XS_FONT_SIZE),\n fontWeight: normalizeFontWeight(tokens.HEADING_XS_FONT_WEIGHT),\n lineHeight: pxToNumber(tokens.LINE_HEIGHT_LG),\n color: tokens.TEXT_HEADER,\n letterSpacing: tokens.HEADING_XS_LETTER_SPACING,\n textDecoration: tokens.HEADING_XS_TEXT_DECORATION,\n textCase: tokens.HEADING_XS_TEXT_CASE,\n },\n\n // Body text variants\n bodyXl: {\n fontFamily: tokens.BODY_XL_FONT_FAMILY,\n fontSize: pxToNumber(tokens.BODY_XL_FONT_SIZE),\n fontWeight: normalizeFontWeight(tokens.BODY_XL_FONT_WEIGHT),\n lineHeight: pxToNumber(tokens.BODY_XL_LINE_HEIGHT),\n color: tokens.TEXT_BODY,\n letterSpacing: tokens.BODY_XL_LETTER_SPACING,\n textDecoration: tokens.BODY_XL_TEXT_DECORATION,\n textCase: tokens.BODY_XL_TEXT_CASE,\n paragraphIndent: tokens.BODY_XL_PARAGRAPH_INDENT,\n },\n bodyLg: {\n fontFamily: tokens.BODY_LG_FONT_FAMILY,\n fontSize: pxToNumber(tokens.BODY_LG_FONT_SIZE),\n fontWeight: normalizeFontWeight(tokens.BODY_LG_FONT_WEIGHT),\n lineHeight: pxToNumber(tokens.BODY_LG_LINE_HEIGHT),\n color: tokens.TEXT_BODY,\n letterSpacing: tokens.BODY_LG_LETTER_SPACING,\n textDecoration: tokens.BODY_LG_TEXT_DECORATION,\n textCase: tokens.BODY_LG_TEXT_CASE,\n paragraphIndent: tokens.BODY_LG_PARAGRAPH_INDENT,\n },\n bodyMd: {\n fontFamily: tokens.BODY_MD_FONT_FAMILY,\n fontSize: pxToNumber(tokens.BODY_MD_FONT_SIZE),\n fontWeight: normalizeFontWeight(tokens.BODY_MD_FONT_WEIGHT),\n lineHeight: pxToNumber(tokens.BODY_MD_LINE_HEIGHT),\n color: tokens.TEXT_BODY,\n letterSpacing: tokens.BODY_MD_LETTER_SPACING,\n textDecoration: tokens.BODY_MD_TEXT_DECORATION,\n textCase: tokens.BODY_MD_TEXT_CASE,\n paragraphIndent: tokens.BODY_MD_PARAGRAPH_INDENT,\n },\n bodySm: {\n fontFamily: tokens.BODY_SM_FONT_FAMILY,\n fontSize: pxToNumber(tokens.BODY_SM_FONT_SIZE),\n fontWeight: normalizeFontWeight(tokens.BODY_SM_FONT_WEIGHT),\n lineHeight: pxToNumber(tokens.BODY_SM_LINE_HEIGHT),\n color: tokens.TEXT_BODY,\n letterSpacing: tokens.BODY_SM_LETTER_SPACING,\n textDecoration: tokens.BODY_SM_TEXT_DECORATION,\n textCase: tokens.BODY_SM_TEXT_CASE,\n paragraphIndent: tokens.BODY_SM_PARAGRAPH_INDENT,\n },\n bodyXs: {\n // Map to utility-caption which is our smallest text style in Figma tokens\n fontFamily: tokens.UTILITY_CAPTION_FONT_FAMILY,\n fontSize: pxToNumber(tokens.UTILITY_CAPTION_FONT_SIZE),\n fontWeight: normalizeFontWeight(tokens.UTILITY_CAPTION_FONT_WEIGHT),\n lineHeight: pxToNumber(tokens.UTILITY_CAPTION_LINE_HEIGHT),\n color: tokens.TEXT_BODY,\n letterSpacing: tokens.UTILITY_CAPTION_LETTER_SPACING,\n textDecoration: tokens.UTILITY_CAPTION_TEXT_DECORATION,\n textCase: tokens.UTILITY_CAPTION_TEXT_CASE,\n paragraphIndent: tokens.UTILITY_CAPTION_PARAGRAPH_INDENT,\n },\n\n // Label variants - map to Utility tokens from Figma\n labelLg: {\n // Maps to utility-button\n fontFamily: tokens.UTILITY_BUTTON_FONT_FAMILY,\n fontSize: pxToNumber(tokens.UTILITY_BUTTON_FONT_SIZE),\n fontWeight: normalizeFontWeight(tokens.UTILITY_BUTTON_FONT_WEIGHT),\n lineHeight: pxToNumber(tokens.UTILITY_BUTTON_LINE_HEIGHT),\n color: tokens.TEXT_TERTIARY,\n letterSpacing: tokens.UTILITY_BUTTON_LETTER_SPACING,\n textDecoration: tokens.UTILITY_BUTTON_TEXT_DECORATION,\n textCase: tokens.UTILITY_BUTTON_TEXT_CASE,\n },\n labelMd: {\n // Maps to utility-link\n fontFamily: tokens.UTILITY_LINK_FONT_FAMILY,\n fontSize: pxToNumber(tokens.UTILITY_LINK_FONT_SIZE),\n fontWeight: normalizeFontWeight(tokens.UTILITY_LINK_FONT_WEIGHT),\n lineHeight: pxToNumber(tokens.UTILITY_LINK_LINE_HEIGHT),\n color: tokens.TEXT_TERTIARY,\n letterSpacing: tokens.UTILITY_LINK_LETTER_SPACING,\n textDecoration: tokens.TEXT_DECORATION_NONE, // Override the default underline from utility-link\n textCase: tokens.UTILITY_LINK_TEXT_CASE,\n },\n labelSm: {\n // Maps to utility-caption\n fontFamily: tokens.UTILITY_CAPTION_FONT_FAMILY,\n fontSize: pxToNumber(tokens.UTILITY_CAPTION_FONT_SIZE),\n fontWeight: normalizeFontWeight(tokens.UTILITY_CAPTION_FONT_WEIGHT),\n lineHeight: pxToNumber(tokens.UTILITY_CAPTION_LINE_HEIGHT),\n color: tokens.TEXT_TERTIARY,\n letterSpacing: tokens.UTILITY_CAPTION_LETTER_SPACING,\n textDecoration: tokens.UTILITY_CAPTION_TEXT_DECORATION,\n textCase: tokens.UTILITY_CAPTION_TEXT_CASE,\n },\n\n // Weights mapping for custom weight overrides\n weights: {\n normal: \"400\", // Regular weight\n medium: normalizeFontWeight(tokens.MEDIUM),\n semibold: normalizeFontWeight(tokens.SEMI_BOLD),\n bold: \"700\", // Bold weight (not directly defined in tokens)\n },\n};\n\nexport default typographyTokens;\n","import React, { useState } from \"react\";\nimport { ButtonProps, ButtonState } from \"../../types/Button\";\nimport { Icon } from \"../Icon\";\nimport typographyTokens from \"../../styles/tokens/typography\";\nimport * as tokens from \"../../styles/tokens/tokens\";\n\nexport const Button: React.FC<ButtonProps> = ({\n label,\n type = \"primary\",\n size = \"large\",\n disabled = false,\n leftIcon,\n rightIcon,\n icon,\n fullWidth = false,\n style,\n accessibilityLabel,\n testID,\n onClick,\n className,\n onMouseEnter,\n onMouseLeave,\n onMouseDown,\n onMouseUp,\n}) => {\n const isIconOnly = !!icon;\n\n // Create icon components from icon names\n const leftIconComponent = leftIcon ? (\n <Icon name={leftIcon} size={size === \"large\" ? 20 : 16} />\n ) : null;\n const rightIconComponent = rightIcon ? (\n <Icon name={rightIcon} size={size === \"large\" ? 20 : 16} />\n ) : null;\n const iconButton = icon ? (\n <Icon name={icon} size={size === \"large\" ? 20 : 16} />\n ) : null;\n\n const [buttonState, setButtonState] = useState<ButtonState>(\n disabled ? \"disabled\" : \"default\"\n );\n\n const hasBothIcons = leftIcon && rightIcon;\n\n // Base button styles\n const getBaseStyles = (): React.CSSProperties => {\n const baseStyle: React.CSSProperties = {\n display: isIconOnly ? \"inline-flex\" : \"flex\",\n width: isIconOnly ? \"auto\" : fullWidth ? \"100%\" : \"9.375rem\",\n height: size === \"large\" ? \"2.75rem\" : \"2rem\",\n padding: type === \"ghost\" ? tokens.SPACE_0 : tokens.COMPONENT_CARD_SM,\n justifyContent: \"center\",\n alignItems: \"center\",\n gap: hasBothIcons\n ? tokens.LAYOUT_SPACING_INLINE_MD\n : tokens.LAYOUT_SPACING_INLINE_XS,\n flexShrink: 0,\n borderRadius: tokens.BORDER_RADIUS_BUTTON_FULL,\n cursor: disabled ? \"not-allowed\" : \"pointer\",\n opacity: disabled ? 0.6 : 1,\n transition: \"all 0.2s ease-in-out\",\n border: \"none\",\n };\n\n // Apply styles based on type and state\n switch (type) {\n case \"primary\":\n switch (buttonState) {\n case \"default\":\n baseStyle.background = tokens.ACTION_PRIMARY_DEFAULT;\n break;\n case \"hover\":\n baseStyle.background = tokens.ACTION_PRIMARY_HOVER;\n break;\n case \"active\":\n baseStyle.background = tokens.ACTION_PRIMARY_ACTIVE;\n break;\n case \"disabled\":\n baseStyle.background = tokens.ACTION_PRIMARY_DISABLED;\n baseStyle.opacity = 0.6;\n break;\n }\n break;\n case \"outline\":\n baseStyle.background = \"transparent\";\n switch (buttonState) {\n case \"default\":\n baseStyle.border = `${tokens.BORDER_WIDTH_BUTTON_DEFAULT} solid ${tokens.ACTION_TERTIARY_DEFAULT}`;\n break;\n case \"hover\":\n baseStyle.border = `${tokens.BORDER_WIDTH_BUTTON_HOVER} solid ${tokens.ACTION_TERTIARY_HOVER}`;\n break;\n case \"active\":\n baseStyle.border = `${tokens.BORDER_WIDTH_BUTTON_PRESSED} solid ${tokens.ACTION_TERTIARY_ACTIVE}`;\n break;\n case \"disabled\":\n baseStyle.border = `${tokens.BORDER_WIDTH_BUTTON_DEFAULT} solid ${tokens.ACTION_TERTIARY_DISABLE}`;\n baseStyle.opacity = 0.6;\n break;\n }\n break;\n case \"ghost\":\n baseStyle.background = \"transparent\";\n break;\n case \"destructive\":\n baseStyle.background = \"transparent\";\n switch (buttonState) {\n case \"default\":\n baseStyle.color = tokens.ACTION_DESTRUCTIVE_HOVER;\n break;\n case \"hover\":\n baseStyle.color = tokens.ACTION_DESTRUCTIVE_DEFAULT;\n break;\n case \"active\":\n baseStyle.color = tokens.ACTION_DESTRUCTIVE_ACTIVE;\n break;\n case \"disabled\":\n baseStyle.color = tokens.ACTION_DESTRUCTIVE_DISABLE;\n baseStyle.opacity = 0.6;\n break;\n }\n break;\n }\n\n return { ...baseStyle, ...style };\n };\n\n const getTextStyles = (): React.CSSProperties => {\n const buttonTokens =\n size === \"large\" ? typographyTokens.labelLg : typographyTokens.labelMd;\n\n const textStyle: React.CSSProperties = {\n fontFamily: buttonTokens.fontFamily,\n fontWeight: parseInt(buttonTokens.fontWeight),\n fontSize: `${buttonTokens.fontSize}px`,\n lineHeight: `${buttonTokens.lineHeight}px`,\n transition: \"all 0.2s ease-in-out\",\n };\n\n switch (type) {\n case \"primary\":\n textStyle.color = tokens.NEUTRAL_80;\n break;\n case \"outline\":\n switch (buttonState) {\n case \"default\":\n textStyle.color = tokens.ACTION_TERTIARY_DEFAULT;\n break;\n case \"hover\":\n textStyle.color = tokens.ACTION_TERTIARY_HOVER;\n break;\n case \"active\":\n textStyle.color = tokens.ACTION_TERTIARY_ACTIVE;\n break;\n case \"disabled\":\n textStyle.color = tokens.ACTION_TERTIARY_DISABLE;\n break;\n }\n break;\n case \"ghost\":\n switch (buttonState) {\n case \"default\":\n textStyle.color = tokens.ACTION_TERTIARY_DEFAULT;\n break;\n case \"hover\":\n textStyle.color = tokens.ACTION_TERTIARY_HOVER;\n break;\n case \"active\":\n textStyle.color = tokens.ACTION_TERTIARY_ACTIVE;\n break;\n case \"disabled\":\n textStyle.color = tokens.ACTION_TERTIARY_DISABLE;\n break;\n }\n break;\n case \"destructive\":\n break;\n }\n\n return textStyle;\n };\n\n // Icon styles\n const getIconStyles = (): React.CSSProperties => {\n return {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n color: \"currentColor\",\n };\n };\n\n // Event handlers for state changes\n const handleMouseEnter = (e: React.MouseEvent<HTMLButtonElement>) => {\n if (!disabled) {\n setButtonState(\"hover\");\n onMouseEnter && onMouseEnter(e);\n }\n };\n\n const handleMouseLeave = (e: React.MouseEvent<HTMLButtonElement>) => {\n if (!disabled) {\n setButtonState(\"default\");\n onMouseLeave && onMouseLeave(e);\n }\n };\n\n const handleMouseDown = (e: React.MouseEvent<HTMLButtonElement>) => {\n if (!disabled) {\n setButtonState(\"active\");\n onMouseDown && onMouseDown(e);\n }\n };\n\n const handleMouseUp = (e: React.MouseEvent<HTMLButtonElement>) => {\n if (!disabled) {\n setButtonState(\"hover\");\n onMouseUp && onMouseUp(e);\n }\n };\n\n return (\n <button\n style={getBaseStyles()}\n onClick={onClick}\n disabled={disabled}\n aria-label={accessibilityLabel || label}\n data-testid={testID}\n className={className}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n onMouseDown={handleMouseDown}\n onMouseUp={handleMouseUp}\n >\n {!isIconOnly && leftIcon && (\n <span style={getIconStyles()} className=\"button-left-icon\">\n {leftIconComponent}\n </span>\n )}\n\n {!isIconOnly && <span style={getTextStyles()}>{label}</span>}\n\n {isIconOnly && <span style={getIconStyles()}>{iconButton}</span>}\n\n {!isIconOnly && rightIcon && (\n <span style={getIconStyles()} className=\"button-right-icon\">\n {rightIconComponent}\n </span>\n )}\n </button>\n );\n};\n","import React from \"react\";\nimport typographyTokens from \"../../styles/tokens/typography\";\nimport { DisplayProps } from \"../../types/Typography\";\n\nexport const Display: React.FC<DisplayProps> = ({\n size = \"2xl\",\n element = \"h1\",\n align = \"left\",\n weight,\n color,\n truncate = false,\n lineClamp,\n children,\n className = \"\",\n style = {},\n onClick,\n testID,\n ...rest\n}) => {\n const getStyles = (): React.CSSProperties => {\n const tokenSet =\n size === \"2xl\" ? typographyTokens.display2xl : typographyTokens.displayXl;\n\n let fontWeightValue = parseInt(tokenSet.fontWeight);\n if (weight) {\n if (weight === \"normal\") fontWeightValue = 400;\n else if (weight === \"medium\") fontWeightValue = 500;\n else if (weight === \"semibold\") fontWeightValue = 600;\n else if (weight === \"bold\") fontWeightValue = 700;\n }\n\n const baseStyles: React.CSSProperties = {\n fontFamily: tokenSet.fontFamily,\n fontSize: `${tokenSet.fontSize}px`,\n lineHeight: `${tokenSet.lineHeight}px`,\n fontWeight: fontWeightValue,\n color: color || tokenSet.color,\n textAlign: align,\n letterSpacing: tokenSet.letterSpacing,\n textDecoration: tokenSet.textDecoration || \"none\",\n };\n\n if (truncate) {\n baseStyles.whiteSpace = \"nowrap\";\n baseStyles.overflow = \"hidden\";\n baseStyles.textOverflow = \"ellipsis\";\n baseStyles.display = \"block\";\n }\n\n if (lineClamp && lineClamp > 0) {\n baseStyles.display = \"-webkit-box\";\n baseStyles.WebkitLineClamp = lineClamp;\n baseStyles.WebkitBoxOrient = \"vertical\";\n baseStyles.overflow = \"hidden\";\n baseStyles.textOverflow = \"ellipsis\";\n }\n\n return baseStyles;\n };\n\n const combinedStyles = {\n ...getStyles(),\n ...style,\n };\n\n const Component = element as React.ElementType;\n\n return (\n <Component\n style={combinedStyles}\n className={className}\n data-testid={testID}\n onClick={onClick}\n {...rest}\n >\n {children}\n </Component>\n );\n};\n","import React from \"react\";\nimport typographyTokens from \"../../styles/tokens/typography\";\nimport { HeadingProps, TypographyWeight } from \"../../types/Typography\";\n\ntype HeadingTokenKey =\n | \"headingXl\"\n | \"headingLg\"\n | \"headingMd\"\n | \"headingSm\"\n | \"headingXs\";\n\nexport const Heading: React.FC<HeadingProps> = ({\n size = \"xl\",\n element = \"h2\",\n align = \"left\",\n weight,\n color,\n truncate = false,\n lineClamp,\n children,\n className = \"\",\n style = {},\n onClick,\n testID,\n ...rest\n}) => {\n const getStyles = (): React.CSSProperties => {\n const tokenKeyMap: Record<string, HeadingTokenKey> = {\n xl: \"headingXl\",\n lg: \"headingLg\",\n md: \"headingMd\",\n sm: \"headingSm\",\n xs: \"headingXs\",\n };\n\n const tokenSet = typographyTokens[tokenKeyMap[size]];\n\n const fontWeightValue = weight\n ? parseInt(typographyTokens.weights[weight])\n : parseInt(tokenSet.fontWeight);\n\n const baseStyles: React.CSSProperties = {\n fontFamily: tokenSet.fontFamily,\n fontSize: `${tokenSet.fontSize}px`,\n lineHeight: `${tokenSet.lineHeight}px`,\n fontWeight: fontWeightValue,\n color: color || tokenSet.color,\n textAlign: align,\n letterSpacing: tokenSet.letterSpacing,\n textDecoration: tokenSet.textDecoration || \"none\",\n };\n\n const truncationStyles: React.CSSProperties = truncate\n ? {\n whiteSpace: \"nowrap\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n display: \"block\",\n }\n : {};\n\n const lineClampStyles: React.CSSProperties =\n lineClamp && lineClamp > 0\n ? {\n display: \"-webkit-box\",\n WebkitLineClamp: lineClamp,\n WebkitBoxOrient: \"vertical\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n }\n : {};\n\n return {\n ...baseStyles,\n ...truncationStyles,\n ...lineClampStyles,\n };\n };\n\n const combinedStyles = {\n ...getStyles(),\n ...style,\n };\n\n const linkProps = element === \"a\" ? rest : {};\n\n const headingElementMap: Record<string, React.ElementType> = {\n xl: \"h1\",\n lg: \"h2\",\n md: \"h3\",\n sm: \"h4\",\n xs: \"h5\",\n };\n\n const defaultElement = element === \"h2\" ? headingElementMap[size] : element;\n\n const Component = defaultElement as React.ElementType;\n\n return (\n <Component\n style={combinedStyles}\n className={className}\n data-testid={testID}\n onClick={onClick}\n {...linkProps}\n >\n {children}\n </Component>\n );\n};\n","import React from \"react\";\nimport typographyTokens from \"../../styles/tokens/typography\";\nimport { BodyProps } from \"../../types/Typography\";\n\nexport const Body: React.FC<BodyProps> = ({\n size = \"lg\",\n element = \"p\",\n align = \"left\",\n weight,\n color,\n truncate = false,\n lineClamp,\n children,\n className = \"\",\n style = {},\n onClick,\n testID,\n ...rest\n}) => {\n const getStyles = (): React.CSSProperties => {\n let tokenSet;\n switch (size) {\n case \"xl\":\n tokenSet = typographyTokens.bodyXl;\n break;\n case \"lg\":\n tokenSet = typographyTokens.bodyLg;\n break;\n case \"md\":\n tokenSet = typographyTokens.bodyMd;\n break;\n case \"sm\":\n tokenSet = typographyTokens.bodySm;\n break;\n }\n\n let fontWeightValue = parseInt(tokenSet.fontWeight);\n if (weight) {\n if (weight === \"normal\") fontWeightValue = 400;\n else if (weight === \"medium\") fontWeightValue = 500;\n else if (weight === \"semibold\") fontWeightValue = 600;\n else if (weight === \"bold\") fontWeightValue = 700;\n }\n\n const baseStyles: React.CSSProperties = {\n fontFamily: tokenSet.fontFamily,\n fontSize: `${tokenSet.fontSize}px`,\n lineHeight: `${tokenSet.lineHeight}px`,\n fontWeight: fontWeightValue,\n color: color || tokenSet.color,\n textAlign: align,\n letterSpacing: tokenSet.letterSpacing,\n textDecoration: tokenSet.textDecoration || \"none\",\n };\n\n if (truncate) {\n baseStyles.whiteSpace = \"nowrap\";\n baseStyles.overflow = \"hidden\";\n baseStyles.textOverflow = \"ellipsis\";\n baseStyles.display = \"block\";\n }\n\n if (lineClamp && lineClamp > 0) {\n baseStyles.display = \"-webkit-box\";\n baseStyles.WebkitLineClamp = lineClamp;\n baseStyles.WebkitBoxOrient = \"vertical\";\n baseStyles.overflow = \"hidden\";\n baseStyles.textOverflow = \"ellipsis\";\n }\n\n return baseStyles;\n };\n\n const combinedStyles = {\n ...getStyles(),\n ...style,\n };\n\n const linkProps = element === \"a\" ? rest : {};\n\n const Component = element as React.ElementType;\n\n return (\n <Component\n style={combinedStyles}\n className={className}\n data-testid={testID}\n onClick={onClick}\n {...linkProps}\n >\n {children}\n </Component>\n );\n};\n","import React from \"react\";\nimport typographyTokens from \"../../styles/tokens/typography\";\nimport { UtilityProps } from \"../../types/Typography\";\n\nexport const Utility: React.FC<UtilityProps> = ({\n variant = \"button\",\n element,\n align = \"left\",\n weight,\n color,\n truncate = false,\n lineClamp,\n children,\n className = \"\",\n style = {},\n onClick,\n testID,\n ...rest\n}) => {\n const getDefaultElement = () => {\n switch (variant) {\n case \"button\":\n return \"span\";\n case \"link\":\n return \"a\";\n case \"caption\":\n return \"span\";\n default:\n return \"span\";\n }\n };\n\n const elementToUse = element || getDefaultElement();\n\n const getStyles = (): React.CSSProperties => {\n let tokenSet;\n switch (variant) {\n case \"button\":\n tokenSet = typographyTokens.labelLg;\n break;\n case \"link\":\n tokenSet = typographyTokens.labelMd;\n break;\n case \"caption\":\n tokenSet = typographyTokens.labelSm;\n break;\n }\n\n let fontWeightValue = parseInt(tokenSet.fontWeight);\n if (weight) {\n if (weight === \"normal\") fontWeightValue = 400;\n else if (weight === \"medium\") fontWeightValue = 500;\n else if (weight === \"semibold\") fontWeightValue = 600;\n else if (weight === \"bold\") fontWeightValue = 700;\n }\n\n const baseStyles: React.CSSProperties = {\n fontFamily: tokenSet.fontFamily,\n fontSize: `${tokenSet.fontSize}px`,\n lineHeight: `${tokenSet.lineHeight}px`,\n fontWeight: fontWeightValue,\n color: color || tokenSet.color,\n textAlign: align,\n letterSpacing: tokenSet.letterSpacing,\n textDecoration:\n variant === \"link\" ? \"underline\" : tokenSet.textDecoration || \"none\",\n };\n\n if (truncate) {\n baseStyles.whiteSpace = \"nowrap\";\n baseStyles.overflow = \"hidden\";\n baseStyles.textOverflow = \"ellipsis\";\n baseStyles.display = \"block\";\n }\n\n if (lineClamp && lineClamp > 0) {\n baseStyles.display = \"-webkit-box\";\n baseStyles.WebkitLineClamp = lineClamp;\n baseStyles.WebkitBoxOrient = \"vertical\";\n baseStyles.overflow = \"hidden\";\n baseStyles.textOverflow = \"ellipsis\";\n }\n\n return baseStyles;\n };\n\n const combinedStyles = {\n ...getStyles(),\n ...style,\n };\n\n const linkProps = elementToUse === \"a\" ? rest : {};\n\n const Component = elementToUse as React.ElementType;\n\n return (\n <Component\n style={combinedStyles}\n className={className}\n data-testid={testID}\n onClick={onClick}\n {...linkProps}\n >\n {children}\n </Component>\n );\n};\n","export interface ThemeColors {\n primary: string;\n secondary: string;\n background: string;\n surface: string;\n text: string;\n textSecondary: string;\n border: string;\n error: string;\n warning: string;\n success: string;\n}\n\nexport interface ThemeSpacing {\n xs: number;\n sm: number;\n md: number;\n lg: number;\n xl: number;\n}\n\nexport interface ThemeBorderRadius {\n none: number;\n sm: number;\n md: number;\n lg: number;\n full: number;\n}\n\nexport interface ThemeTypography {\n fontSize: {\n xs: number;\n sm: number;\n md: number;\n lg: number;\n xl: number;\n xxl: number;\n };\n fontWeight: {\n normal: '400' | 'normal';\n medium: '500' | 'medium';\n semibold: '600' | 'semibold';\n bold: '700' | 'bold';\n };\n lineHeight: {\n tight: number;\n normal: number;\n relaxed: number;\n };\n}\n\nexport interface Theme {\n colors: ThemeColors;\n spacing: ThemeSpacing;\n borderRadius: ThemeBorderRadius;\n typography: ThemeTypography;\n}\n\nexport const defaultTheme: Theme = {\n colors: {\n primary: '#007AFF',\n secondary: '#5856D6',\n background: '#FFFFFF',\n surface: '#F2F2F7',\n text: '#000000',\n textSecondary: '#8E8E93',\n border: '#E5E5EA',\n error: '#FF3B30',\n warning: '#FF9500',\n success: '#34C759',\n },\n spacing: {\n xs: 4,\n sm: 8,\n md: 16,\n lg: 24,\n xl: 32,\n },\n borderRadius: {\n none: 0,\n sm: 4,\n md: 8,\n lg: 12,\n full: 9999,\n },\n typography: {\n fontSize: {\n xs: 12,\n sm: 14,\n md: 16,\n lg: 18,\n xl: 20,\n xxl: 24,\n },\n fontWeight: {\n normal: '400',\n medium: '500',\n semibold: '600',\n bold: '700',\n },\n lineHeight: {\n tight: 1.2,\n normal: 1.5,\n relaxed: 1.8,\n },\n },\n};\n","import React, { createContext, useContext, ReactNode } from \"react\";\nimport { Theme, defaultTheme } from \"./index\";\n\ninterface ThemeContextValue {\n theme: Theme;\n updateTheme: (newTheme: Partial<Theme>) => void;\n}\n\nconst ThemeContext = createContext<ThemeContextValue | undefined>(undefined);\n\ninterface ThemeProviderProps {\n children: ReactNode;\n theme?: Partial<Theme>;\n}\n\nexport const ThemeProvider: React.FC<ThemeProviderProps> = ({\n children,\n theme: customTheme,\n}) => {\n // Using useMemo instead of useState to prevent unnecessary re-renders\n const theme = React.useMemo<Theme>(\n () => ({\n ...defaultTheme,\n ...customTheme,\n colors: { ...defaultTheme.colors, ...customTheme?.colors },\n spacing: { ...defaultTheme.spacing, ...customTheme?.spacing },\n borderRadius: {\n ...defaultTheme.borderRadius,\n ...customTheme?.borderRadius,\n },\n typography: {\n ...defaultTheme.typography,\n ...customTheme?.typography,\n fontSize: {\n ...defaultTheme.typography.fontSize,\n ...customTheme?.typography?.fontSize,\n },\n fontWeight: {\n ...defaultTheme.typography.fontWeight,\n ...customTheme?.typography?.fontWeight,\n },\n lineHeight: {\n ...defaultTheme.typography.lineHeight,\n ...customTheme?.typography?.lineHeight,\n },\n },\n }),\n [customTheme]\n );\n\n const updateTheme = React.useCallback((newTheme: Partial<Theme>) => {\n console.log(\n \"Theme update requested, but we are using static theme for now.\",\n newTheme\n );\n }, []);\n\n return (\n <ThemeContext.Provider value={{ theme, updateTheme }}>\n {children}\n </ThemeContext.Provider>\n );\n};\n\nexport const useTheme = (): ThemeContextValue => {\n const context = useContext(ThemeContext);\n if (!context) {\n throw new Error(\"useTheme must be used within a ThemeProvider\");\n }\n return context;\n};\n"],"names":["icons","iconMap","Map","forEach","icon","set","name","Icon","size","color","className","style","onClick","ariaLabel","iconInfo","get","console","warn","paths","path","split","map","index","combinedStyle","display","verticalAlign","React","createElement","width","height","viewBox","fill","xmlns","role","key","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin","IconList","searchQuery","iconSize","iconColor","onIconClick","filteredIcons","filter","toLowerCase","includes","length","padding","textAlign","gridTemplateColumns","gap","flexDirection","alignItems","border","borderRadius","cursor","transition","handleIconClick","iconName","onMouseOver","e","currentTarget","backgroundColor","transform","boxShadow","onMouseOut","justifyContent","marginBottom","fontSize","wordBreak","BORDER_WIDTH_BUTTON_DEFAULT","TEXT_TERTIARY","TEXT_BODY","TEXT_HEADER","ACTION_TERTIARY_DEFAULT","ACTION_TERTIARY_HOVER","ACTION_TERTIARY_ACTIVE","ACTION_TERTIARY_DISABLE","UTILITY_CAPTION_FONT_FAMILY","UTILITY_CAPTION_FONT_WEIGHT","UTILITY_CAPTION_LINE_HEIGHT","UTILITY_CAPTION_FONT_SIZE","UTILITY_CAPTION_TEXT_CASE","UTILITY_CAPTION_TEXT_DECORATION","pxToNumber","pxValue","parseFloat","replace","normalizeFontWeight","weight","toString","typographyTokens","display2xl","fontFamily","fontWeight","lineHeight","tokens.TEXT_HEADER","letterSpacing","textDecoration","textCase","displayXl","headingXl","headingLg","headingMd","headingSm","headingXs","bodyXl","tokens.TEXT_BODY","paragraphIndent","bodyLg","bodyMd","bodySm","bodyXs","tokens.UTILITY_CAPTION_FONT_FAMILY","tokens.UTILITY_CAPTION_FONT_SIZE","tokens.UTILITY_CAPTION_FONT_WEIGHT","tokens.UTILITY_CAPTION_LINE_HEIGHT","tokens.UTILITY_CAPTION_TEXT_DECORATION","tokens.UTILITY_CAPTION_TEXT_CASE","labelLg","tokens.TEXT_TERTIARY","labelMd","labelSm","weights","normal","medium","semibold","bold","Button","label","type","disabled","leftIcon","rightIcon","fullWidth","accessibilityLabel","testID","onMouseEnter","onMouseLeave","onMouseDown","onMouseUp","isIconOnly","leftIconComponent","rightIconComponent","iconButton","buttonState","setButtonState","useState","hasBothIcons","baseStyle","flexShrink","opacity","background","tokens.BORDER_WIDTH_BUTTON_DEFAULT","tokens.ACTION_TERTIARY_DEFAULT","tokens.ACTION_TERTIARY_HOVER","tokens.ACTION_TERTIARY_ACTIVE","tokens.ACTION_TERTIARY_DISABLE","getBaseStyles","buttonTokens","textStyle","parseInt","getTextStyles","Display","element","align","truncate","lineClamp","children","rest","combinedStyles","tokenSet","fontWeightValue","baseStyles","whiteSpace","overflow","textOverflow","WebkitLineClamp","WebkitBoxOrient","getStyles","Component","Heading","xl","lg","md","sm","xs","linkProps","Body","Utility","variant","elementToUse","getDefaultElement","defaultTheme","colors","primary","secondary","surface","text","textSecondary","error","warning","success","spacing","none","full","typography","xxl","tight","relaxed","ThemeContext","createContext","undefined","ThemeProvider","theme","customTheme","useMemo","_a","_b","_c","updateTheme","useCallback","newTheme","log","Provider","value","useTheme","context","useContext","Error"],"mappings":"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,SAAUgB,EH4LsB,QG3LhCU,WAAYN,EHyLsB,KGxLlCO,WAAYX,EHkSe,QGjS3B9E,MAAO0F,EACPC,cHyLqC,KGxLrCC,eH2LsC,OG1LtCC,SHyLgC,QGvLlCG,UAAW,CACTT,WHwLkC,UGvLlCzB,SAAUgB,EH0LsB,QGzLhCU,WAAYN,EHuLsB,KGtLlCO,WAAYX,EHyRe,QGxR3B9E,MAAO0F,EACPC,cHuLqC,KGtLrCC,eHyLsC,OGxLtCC,SHuLgC,QGrLlCI,UAAW,CACTV,WHsLkC,UGrLlCzB,SAAUgB,EHwLsB,QGvLhCU,WAAYN,EHqLsB,KGpLlCO,WAAYX,EHgRe,QG/Q3B9E,MAAO0F,EACPC,cHqLqC,KGpLrCC,eHuLsC,OGtLtCC,SHqLgC,QGnLlCK,UAAW,CACTX,WHoLkC,UGnLlCzB,SAAUgB,EHsLsB,QGrLhCU,WAAYN,EHmLsB,KGlLlCO,WAAYX,EHuQc,QGtQ1B9E,MAAO0F,EACPC,cHmLqC,KGlLrCC,eHqLsC,OGpLtCC,SHmLgC,QGjLlCM,UAAW,CACTZ,WHkLkC,UGjLlCzB,SAAUgB,EHoLsB,QGnLhCU,WAAYN,EHiLsB,KGhLlCO,WAAYX,EH8Pc,QG7P1B9E,MAAO0F,EACPC,cHiLqC,KGhLrCC,eHmLsC,OGlLtCC,SHiLgC,QG7KlCO,OAAQ,CACNb,WHsL+B,UGrL/BzB,SAAUgB,EHwLmB,QGvL7BU,WAAYN,EHqLmB,QGpL/BO,WAAYX,EHqLmB,QGpL/B9E,MAAOqG,EACPV,cHqLkC,KGpLlCC,eHuLmC,OGtLnCC,SHqL6B,OGpL7BS,gBHmLoC,OGjLtCC,OAAQ,CACNhB,WHmL+B,UGlL/BzB,SAAUgB,EHqLmB,QGpL7BU,WAAYN,EHkLmB,QGjL/BO,WAAYX,EHkLmB,QGjL/B9E,MAAOqG,EACPV,cHkLkC,KGjLlCC,eHoLmC,OGnLnCC,SHkL6B,OGjL7BS,gBHgLoC,OG9KtCE,OAAQ,CACNjB,WHgL+B,UG/K/BzB,SAAUgB,EHkLmB,QGjL7BU,WAAYN,EH+KmB,QG9K/BO,WAAYX,EH+KmB,QG9K/B9E,MAAOqG,EACPV,cH+KkC,KG9KlCC,eHiLmC,OGhLnCC,SH+K6B,OG9K7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"}
|
package/dist/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=o(t);const a=[{name:"arrow-up",path:"M8 3.33325L8 12.6666 M3.33331 7.99992L8 3.33325L12.6666 7.99992",viewBox:"0 0 16 16"},{name:"arrow-down",path:"M8 12.6666L8 3.33325 M12.6667 8.00008L8 12.6667L3.33335 8.00008",viewBox:"0 0 16 16"},{name:"arrow-left",path:"M12.6666 8.00008L3.33331 8.00008 M7.99998 3.33341L3.33331 8.00008L7.99998 12.6667",viewBox:"0 0 16 16"},{name:"arrow-right",path:"M3.33331 8.00008L12.6666 8.00008 M7.99998 12.6667L12.6666 8.00008L7.99998 3.33341",viewBox:"0 0 16 16"},{name:"check",path:"M13.3333 4.66675L6.66667 11.3334L3.33333 8.00008",viewBox:"0 0 16 16"},{name:"cross",path:"M12 4L4 12 M4 4L12 12",viewBox:"0 0 16 16"},{name:"plus",path:"M8 3.33325V12.6666 M3.33331 7.99992H12.6666",viewBox:"0 0 16 16"},{name:"minus",path:"M3.33331 7.99992H12.6666",viewBox:"0 0 16 16"},{name:"search",path:"M7.33333 12.6667C10.2789 12.6667 12.6667 10.2789 12.6667 7.33333C12.6667 4.38781 10.2789 2 7.33333 2C4.38781 2 2 4.38781 2 7.33333C2 10.2789 4.38781 12.6667 7.33333 12.6667Z M12.6667 12.6667L14 14",viewBox:"0 0 16 16"},{name:"home",path:"M2 6L8 2L14 6V14H10V10H6V14H2V6Z",viewBox:"0 0 16 16",fill:"currentColor"},{name:"settings",path:"M6.4 14H9.6C9.6 14 9.8 13.1 10.4 12.8C11 12.5 11.9 12.8 12.4 12.3C12.8 11.9 12.6 10.9 12.8 10.4C13.1 9.8 14 9.6 14 9.6V6.4C14 6.4 13.1 6.2 12.8 5.6C12.5 5 12.8 4.1 12.3 3.6C11.9 3.2 10.9 3.4 10.4 3.2C9.8 2.9 9.6 2 9.6 2H6.4C6.4 2 6.2 2.9 5.6 3.2C5 3.5 4.1 3.2 3.6 3.7C3.2 4.1 3.4 5.1 3.2 5.6C2.9 6.2 2 6.4 2 6.4V9.6C2 9.6 2.9 9.8 3.2 10.4C3.5 11 3.2 11.9 3.7 12.4C4.1 12.8 5.1 12.6 5.6 12.8C6.2 13.1 6.4 14 6.4 14Z M10 8C10 9.1 9.1 10 8 10C6.9 10 6 9.1 6 8C6 6.9 6.9 6 8 6C9.1 6 10 6.9 10 8Z",viewBox:"0 0 16 16"},{name:"user",path:"M11 4C11 5.65685 9.65685 7 8 7C6.34315 7 5 5.65685 5 4C5 2.34315 6.34315 1 8 1C9.65685 1 11 2.34315 11 4Z M1 14C1 14 1 12 3 11C5 10 11 10 13 11C15 12 15 14 15 14",viewBox:"0 0 16 16"},{name:"cart",path:"M5.5 14C5.77614 14 6 13.7761 6 13.5C6 13.2239 5.77614 13 5.5 13C5.22386 13 5 13.2239 5 13.5C5 13.7761 5.22386 14 5.5 14Z M12.5 14C12.7761 14 13 13.7761 13 13.5C13 13.2239 12.7761 13 12.5 13C12.2239 13 12 13.2239 12 13.5C12 13.7761 12.2239 14 12.5 14Z M1 1H3L4.6 9.6C4.63333 9.74056 4.7247 9.86412 4.85172 9.94984C4.97873 10.0356 5.13221 10.0769 5.28571 10.0714H12.1429C12.2964 10.0769 12.4499 10.0356 12.5769 9.94984C12.7039 9.86412 12.7952 9.74056 12.8286 9.6L14 4H4",viewBox:"0 0 16 16"},{name:"heart",path:"M13.6319 3.36825C13.2475 2.98368 12.7898 2.67897 12.2843 2.47298C11.7788 2.267 11.2371 2.16341 10.69 2.16797C10.1429 2.16341 9.60127 2.267 9.09575 2.47298C8.59023 2.67897 8.13254 2.98368 7.74805 3.36825L7.00005 4.11625L6.25205 3.36825C5.4676 2.58281 4.40687 2.16036 3.31005 2.16797C2.21322 2.16036 1.1525 2.58281 0.368046 3.36825C-0.41646 4.15369 -0.838915 5.21442 -0.83131 6.31125C-0.838915 7.40807 -0.41646 8.4688 0.368046 9.25425L7.00005 15.8862L13.6319 9.25425C14.0165 8.86975 14.3212 8.41207 14.5272 7.90655C14.7332 7.40102 14.8368 6.85936 14.8322 6.31225C14.8368 5.76513 14.7332 5.22347 14.5272 4.71795C14.3212 4.21242 14.0165 3.75474 13.6319 3.37025V3.36825Z",viewBox:"0 0 16 16"},{name:"star",path:"M7.99998 1.33325L10.06 5.5066L14.6666 6.17994L11.3333 9.42661L12.12 14.0133L7.99998 11.8466L3.87998 14.0133L4.66665 9.42661L1.33331 6.17994L5.93998 5.5066L7.99998 1.33325Z",viewBox:"0 0 16 16",fill:"currentColor"}],i=new Map;a.forEach((e=>{i.set(e.name,e)}));const r=({name:t,size:o=24,color:n="currentColor",className:a="",style:r={},onClick:l,ariaLabel:s})=>{const c=i.get(t);if(!c)return console.warn(`Icon "${t}" not found`),null;const p=c.path.split(" M ").map(((e,t)=>0===t?e:`M ${e}`)),d={display:"inline-block",verticalAlign:"middle",...r};return e.jsx("svg",{width:o,height:o,viewBox:c.viewBox,fill:"none",xmlns:"http://www.w3.org/2000/svg",className:a,style:d,onClick:l,"aria-label":s||`${t} icon`,role:"img",children:p.map(((t,o)=>e.jsx("path",{d:t,stroke:c.fill?"none":n,fill:c.fill?n:"none",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"},o)))})},l="#525252",s="#3b3b3b",c="#111",p="Campton",d="book",h="16px",x="12px",g="none",m="none",u=e=>e&&"string"==typeof e?parseFloat(e.replace("px","")):0,f=e=>"number"==typeof e?e.toString():"book"===e?"400":e,y={display2xl:{fontFamily:"Campton",fontSize:u("52px"),fontWeight:f(500),lineHeight:u("56px"),color:c,letterSpacing:"0%",textDecoration:"none",textCase:"none"},displayXl:{fontFamily:"Campton",fontSize:u("44px"),fontWeight:f(500),lineHeight:u("48px"),color:c,letterSpacing:"0%",textDecoration:"none",textCase:"none"},headingXl:{fontFamily:"Campton",fontSize:u("40px"),fontWeight:f(600),lineHeight:u("44px"),color:c,letterSpacing:"0%",textDecoration:"none",textCase:"none"},headingLg:{fontFamily:"Campton",fontSize:u("36px"),fontWeight:f(600),lineHeight:u("40px"),color:c,letterSpacing:"0%",textDecoration:"none",textCase:"none"},headingMd:{fontFamily:"Campton",fontSize:u("32px"),fontWeight:f(600),lineHeight:u("36px"),color:c,letterSpacing:"0%",textDecoration:"none",textCase:"none"},headingSm:{fontFamily:"Campton",fontSize:u("28px"),fontWeight:f(600),lineHeight:u("32px"),color:c,letterSpacing:"0%",textDecoration:"none",textCase:"none"},headingXs:{fontFamily:"Campton",fontSize:u("20px"),fontWeight:f(600),lineHeight:u("28px"),color:c,letterSpacing:"0%",textDecoration:"none",textCase:"none"},bodyXl:{fontFamily:"Campton",fontSize:u("18px"),fontWeight:f("book"),lineHeight:u("28px"),color:s,letterSpacing:"0%",textDecoration:"none",textCase:"none",paragraphIndent:"0px"},bodyLg:{fontFamily:"Campton",fontSize:u("16px"),fontWeight:f("book"),lineHeight:u("24px"),color:s,letterSpacing:"0%",textDecoration:"none",textCase:"none",paragraphIndent:"0px"},bodyMd:{fontFamily:"Campton",fontSize:u("14px"),fontWeight:f("book"),lineHeight:u("20px"),color:s,letterSpacing:"0%",textDecoration:"none",textCase:"none",paragraphIndent:"0px"},bodySm:{fontFamily:"Campton",fontSize:u("12px"),fontWeight:f("book"),lineHeight:u("20px"),color:s,letterSpacing:"0%",textDecoration:"none",textCase:"none",paragraphIndent:"0px"},bodyXs:{fontFamily:p,fontSize:u(x),fontWeight:f(d),lineHeight:u(h),color:s,letterSpacing:"0%",textDecoration:m,textCase:g,paragraphIndent:"0px"},labelLg:{fontFamily:"Campton",fontSize:u("16px"),fontWeight:f(500),lineHeight:u("16px"),color:l,letterSpacing:"0%",textDecoration:"none",textCase:"none"},labelMd:{fontFamily:"Campton",fontSize:u("14px"),fontWeight:f(500),lineHeight:u("20px"),color:l,letterSpacing:"0%",textDecoration:"none",textCase:"none"},labelSm:{fontFamily:p,fontSize:u(x),fontWeight:f(d),lineHeight:u(h),color:l,letterSpacing:"0%",textDecoration:m,textCase:g},weights:{normal:"400",medium:f(500),semibold:f(600),bold:"700"}},b={colors:{primary:"#007AFF",secondary:"#5856D6",background:"#FFFFFF",surface:"#F2F2F7",text:"#000000",textSecondary:"#8E8E93",border:"#E5E5EA",error:"#FF3B30",warning:"#FF9500",success:"#34C759"},spacing:{xs:4,sm:8,md:16,lg:24,xl:32},borderRadius:{none:0,sm:4,md:8,lg:12,full:9999},typography:{fontSize:{xs:12,sm:14,md:16,lg:18,xl:20,xxl:24},fontWeight:{normal:"400",medium:"500",semibold:"600",bold:"700"},lineHeight:{tight:1.2,normal:1.5,relaxed:1.8}}},C=t.createContext(void 0);exports.Body=({size:t="lg",element:o="p",align:n="left",weight:a,color:i,truncate:r=!1,lineClamp:l,children:s,className:c="",style:p={},onClick:d,testID:h,...x})=>{const g={...(()=>{let e;switch(t){case"xl":e=y.bodyXl;break;case"lg":e=y.bodyLg;break;case"md":e=y.bodyMd;break;case"sm":e=y.bodySm}let o=parseInt(e.fontWeight);a&&("normal"===a?o=400:"medium"===a?o=500:"semibold"===a?o=600:"bold"===a&&(o=700));const s={fontFamily:e.fontFamily,fontSize:`${e.fontSize}px`,lineHeight:`${e.lineHeight}px`,fontWeight:o,color:i||e.color,textAlign:n,letterSpacing:e.letterSpacing,textDecoration:e.textDecoration||"none"};return r&&(s.whiteSpace="nowrap",s.overflow="hidden",s.textOverflow="ellipsis",s.display="block"),l&&l>0&&(s.display="-webkit-box",s.WebkitLineClamp=l,s.WebkitBoxOrient="vertical",s.overflow="hidden",s.textOverflow="ellipsis"),s})(),...p},m="a"===o?x:{},u=o;return e.jsx(u,{style:g,className:c,"data-testid":h,onClick:d,...m,children:s})},exports.Button=({label:o,type:n="primary",size:a="large",disabled:i=!1,leftIcon:l,rightIcon:s,icon:c,fullWidth:p=!1,style:d,accessibilityLabel:h,testID:x,onClick:g,className:m,onMouseEnter:u,onMouseLeave:f,onMouseDown:y,onMouseUp:b})=>{const C=!!c,v=l?e.jsx(r,{name:l,size:"large"===a?20:16}):null,w=s?e.jsx(r,{name:s,size:"large"===a?20:16}):null,k=c?e.jsx(r,{name:c,size:"large"===a?20:16}):null,[S,L]=t.useState(i?"disabled":"default"),B=l&&s;return e.jsxs("button",{style:(()=>{const e={display:C?"inline-flex":"flex",width:C?"auto":p?"100%":"9.375rem",height:"large"===a?"2.75rem":"2rem",padding:"ghost"===n?"var(--spacing-0, 0rem)":"var(--component-card-sm, 0.75rem)",justifyContent:"center",alignItems:"center",gap:B?"var(--layout-spacing-inline-md, 1rem)":"var(--layout-spacing-inline-xs, 0.5rem)",flexShrink:0,borderRadius:"var(--button-full, 62.4375rem)",cursor:i?"not-allowed":"pointer",opacity:i?.6:1,transition:"all 0.2s ease-in-out",border:"none"};switch(n){case"primary":switch(S){case"default":e.background="var(--action-primary-default, #00DF88)";break;case"hover":e.background="var(--action-primary-hover, #4CE9AC)";break;case"active":e.background="var(--action-primary-active, #98F2CF)";break;case"disabled":e.background="var(--action-primary-disabled, #00DF88)",e.opacity=.6}break;case"outline":switch(e.background="transparent",S){case"default":e.border="var(--button-default, 1px) solid var(--action-tertiary-default, #3B3B3B)";break;case"hover":e.border="var(--button-hover, 2px) solid var(--action-tertiary-hover, #111)";break;case"active":e.border="var(--button-pressed, 2px) solid var(--action-tertiary-active, #ABABAB)";break;case"disabled":e.border="var(--button-default, 1px) solid var(--action-tertiary-disabled, #3B3B3B)",e.opacity=.6}break;case"ghost":e.background="transparent";break;case"destructive":switch(e.background="transparent",S){case"default":e.color="var(--action-destructive-hover, #FF3B30)";break;case"hover":e.color="var(--action-destructive-default, #D60000)";break;case"active":e.color="var(--action-destructive-active, #FF6259)";break;case"disabled":e.color="var(--action-destructive-disabled, #D60000)",e.opacity=.6}}return{...e,...d}})(),onClick:g,disabled:i,"aria-label":h||o,"data-testid":x,className:m,onMouseEnter:e=>{i||(L("hover"),u&&u(e))},onMouseLeave:e=>{i||(L("default"),f&&f(e))},onMouseDown:e=>{i||(L("active"),y&&y(e))},onMouseUp:e=>{i||(L("hover"),b&&b(e))},children:[!C&&l&&e.jsx("span",{style:{display:"flex",alignItems:"center",justifyContent:"center",color:"currentColor"},className:"button-left-icon",children:v}),!C&&e.jsx("span",{style:(()=>{const e={fontFamily:'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',fontWeight:500,fontSize:"large"===a?"1rem":"0.875rem",transition:"all 0.2s ease-in-out"};switch(n){case"primary":e.color="var(--neutral-80, #3B3B3B)";break;case"outline":case"ghost":switch(S){case"default":e.color="var(--action-tertiary-default, #3B3B3B)";break;case"hover":e.color="var(--action-tertiary-hover, #111)";break;case"active":e.color="var(--action-tertiary-active, #ABABAB)";break;case"disabled":e.color="var(--action-tertiary-disabled, #3B3B3B)"}}return e})(),children:o}),C&&e.jsx("span",{style:{display:"flex",alignItems:"center",justifyContent:"center",color:"currentColor"},children:k}),!C&&s&&e.jsx("span",{style:{display:"flex",alignItems:"center",justifyContent:"center",color:"currentColor"},className:"button-right-icon",children:w})]})},exports.Display=({size:t="2xl",element:o="h1",align:n="left",weight:a,color:i,truncate:r=!1,lineClamp:l,children:s,className:c="",style:p={},onClick:d,testID:h,...x})=>{const g={...(()=>{const e="2xl"===t?y.display2xl:y.displayXl;let o=parseInt(e.fontWeight);a&&("normal"===a?o=400:"medium"===a?o=500:"semibold"===a?o=600:"bold"===a&&(o=700));const s={fontFamily:e.fontFamily,fontSize:`${e.fontSize}px`,lineHeight:`${e.lineHeight}px`,fontWeight:o,color:i||e.color,textAlign:n,letterSpacing:e.letterSpacing,textDecoration:e.textDecoration||"none"};return r&&(s.whiteSpace="nowrap",s.overflow="hidden",s.textOverflow="ellipsis",s.display="block"),l&&l>0&&(s.display="-webkit-box",s.WebkitLineClamp=l,s.WebkitBoxOrient="vertical",s.overflow="hidden",s.textOverflow="ellipsis"),s})(),...p},m=o;return e.jsx(m,{style:g,className:c,"data-testid":h,onClick:d,...x,children:s})},exports.Heading=({size:t="xl",element:o="h2",align:n="left",weight:a,color:i,truncate:r=!1,lineClamp:l,children:s,className:c="",style:p={},onClick:d,testID:h,...x})=>{const g={...(()=>{const e=y[{xl:"headingXl",lg:"headingLg",md:"headingMd",sm:"headingSm",xs:"headingXs"}[t]],o=a?parseInt(y.weights[a]):parseInt(e.fontWeight);return{...{fontFamily:e.fontFamily,fontSize:`${e.fontSize}px`,lineHeight:`${e.lineHeight}px`,fontWeight:o,color:i||e.color,textAlign:n,letterSpacing:e.letterSpacing,textDecoration:e.textDecoration||"none"},...r?{whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",display:"block"}:{},...l&&l>0?{display:"-webkit-box",WebkitLineClamp:l,WebkitBoxOrient:"vertical",overflow:"hidden",textOverflow:"ellipsis"}:{}}})(),...p},m="a"===o?x:{},u="h2"===o?{xl:"h1",lg:"h2",md:"h3",sm:"h4",xs:"h5"}[t]:o;return e.jsx(u,{style:g,className:c,"data-testid":h,onClick:d,...m,children:s})},exports.Icon=r,exports.IconList=({searchQuery:t="",iconSize:o=24,iconColor:n="currentColor",onIconClick:i})=>{const l=t?a.filter((e=>e.name.toLowerCase().includes(t.toLowerCase()))):a;return e.jsx("div",{children:0===l.length?e.jsxs("div",{style:{padding:"20px",textAlign:"center"},children:['No icons found matching "',t,'"']}):e.jsx("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fill, minmax(100px, 1fr))",gap:"20px"},children:l.map((t=>e.jsxs("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",padding:"12px",border:"1px solid #eee",borderRadius:"8px",cursor:i?"pointer":"default",transition:"all 0.2s ease-in-out"},onClick:()=>{return e=t.name,void(i&&i(e));var e},onMouseOver:e=>{e.currentTarget.style.backgroundColor="#f9f9f9",e.currentTarget.style.transform="translateY(-2px)",e.currentTarget.style.boxShadow="0 2px 8px rgba(0,0,0,0.05)"},onMouseOut:e=>{e.currentTarget.style.backgroundColor="transparent",e.currentTarget.style.transform="translateY(0)",e.currentTarget.style.boxShadow="none"},children:[e.jsx("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",height:"50px",marginBottom:"8px"},children:e.jsx(r,{name:t.name,size:o,color:n})}),e.jsx("div",{style:{fontSize:"12px",textAlign:"center",wordBreak:"break-word"},children:t.name})]},t.name)))})})},exports.ThemeProvider=({children:t,theme:o})=>{const a=n.default.useMemo((()=>{var e,t,n;return{...b,...o,colors:{...b.colors,...null==o?void 0:o.colors},spacing:{...b.spacing,...null==o?void 0:o.spacing},borderRadius:{...b.borderRadius,...null==o?void 0:o.borderRadius},typography:{...b.typography,...null==o?void 0:o.typography,fontSize:{...b.typography.fontSize,...null===(e=null==o?void 0:o.typography)||void 0===e?void 0:e.fontSize},fontWeight:{...b.typography.fontWeight,...null===(t=null==o?void 0:o.typography)||void 0===t?void 0:t.fontWeight},lineHeight:{...b.typography.lineHeight,...null===(n=null==o?void 0:o.typography)||void 0===n?void 0:n.lineHeight}}}}),[o]),i=n.default.useCallback((e=>{console.log("Theme update requested, but we are using static theme for now.",e)}),[]);return e.jsx(C.Provider,{value:{theme:a,updateTheme:i},children:t})},exports.Utility=({variant:t="button",element:o,align:n="left",weight:a,color:i,truncate:r=!1,lineClamp:l,children:s,className:c="",style:p={},onClick:d,testID:h,...x})=>{const g=o||(()=>{switch(t){case"button":case"caption":default:return"span";case"link":return"a"}})(),m={...(()=>{let e;switch(t){case"button":e=y.labelLg;break;case"link":e=y.labelMd;break;case"caption":e=y.labelSm}let o=parseInt(e.fontWeight);a&&("normal"===a?o=400:"medium"===a?o=500:"semibold"===a?o=600:"bold"===a&&(o=700));const s={fontFamily:e.fontFamily,fontSize:`${e.fontSize}px`,lineHeight:`${e.lineHeight}px`,fontWeight:o,color:i||e.color,textAlign:n,letterSpacing:e.letterSpacing,textDecoration:"link"===t?"underline":e.textDecoration||"none"};return r&&(s.whiteSpace="nowrap",s.overflow="hidden",s.textOverflow="ellipsis",s.display="block"),l&&l>0&&(s.display="-webkit-box",s.WebkitLineClamp=l,s.WebkitBoxOrient="vertical",s.overflow="hidden",s.textOverflow="ellipsis"),s})(),...p},u="a"===g?x:{},f=g;return e.jsx(f,{style:m,className:c,"data-testid":h,onClick:d,...u,children:s})},exports.defaultTheme=b,exports.icons=a,exports.useTheme=()=>{const e=t.useContext(C);if(!e)throw new Error("useTheme must be used within a ThemeProvider");return e};
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=t(e);const n=[{name:"arrow-up",path:"M8 3.33325L8 12.6666 M3.33331 7.99992L8 3.33325L12.6666 7.99992",viewBox:"0 0 16 16"},{name:"arrow-down",path:"M8 12.6666L8 3.33325 M12.6667 8.00008L8 12.6667L3.33335 8.00008",viewBox:"0 0 16 16"},{name:"arrow-left",path:"M12.6666 8.00008L3.33331 8.00008 M7.99998 3.33341L3.33331 8.00008L7.99998 12.6667",viewBox:"0 0 16 16"},{name:"arrow-right",path:"M3.33331 8.00008L12.6666 8.00008 M7.99998 12.6667L12.6666 8.00008L7.99998 3.33341",viewBox:"0 0 16 16"},{name:"check",path:"M13.3333 4.66675L6.66667 11.3334L3.33333 8.00008",viewBox:"0 0 16 16"},{name:"cross",path:"M12 4L4 12 M4 4L12 12",viewBox:"0 0 16 16"},{name:"plus",path:"M8 3.33325V12.6666 M3.33331 7.99992H12.6666",viewBox:"0 0 16 16"},{name:"minus",path:"M3.33331 7.99992H12.6666",viewBox:"0 0 16 16"},{name:"search",path:"M7.33333 12.6667C10.2789 12.6667 12.6667 10.2789 12.6667 7.33333C12.6667 4.38781 10.2789 2 7.33333 2C4.38781 2 2 4.38781 2 7.33333C2 10.2789 4.38781 12.6667 7.33333 12.6667Z M12.6667 12.6667L14 14",viewBox:"0 0 16 16"},{name:"home",path:"M2 6L8 2L14 6V14H10V10H6V14H2V6Z",viewBox:"0 0 16 16",fill:"currentColor"},{name:"settings",path:"M6.4 14H9.6C9.6 14 9.8 13.1 10.4 12.8C11 12.5 11.9 12.8 12.4 12.3C12.8 11.9 12.6 10.9 12.8 10.4C13.1 9.8 14 9.6 14 9.6V6.4C14 6.4 13.1 6.2 12.8 5.6C12.5 5 12.8 4.1 12.3 3.6C11.9 3.2 10.9 3.4 10.4 3.2C9.8 2.9 9.6 2 9.6 2H6.4C6.4 2 6.2 2.9 5.6 3.2C5 3.5 4.1 3.2 3.6 3.7C3.2 4.1 3.4 5.1 3.2 5.6C2.9 6.2 2 6.4 2 6.4V9.6C2 9.6 2.9 9.8 3.2 10.4C3.5 11 3.2 11.9 3.7 12.4C4.1 12.8 5.1 12.6 5.6 12.8C6.2 13.1 6.4 14 6.4 14Z M10 8C10 9.1 9.1 10 8 10C6.9 10 6 9.1 6 8C6 6.9 6.9 6 8 6C9.1 6 10 6.9 10 8Z",viewBox:"0 0 16 16"},{name:"user",path:"M11 4C11 5.65685 9.65685 7 8 7C6.34315 7 5 5.65685 5 4C5 2.34315 6.34315 1 8 1C9.65685 1 11 2.34315 11 4Z M1 14C1 14 1 12 3 11C5 10 11 10 13 11C15 12 15 14 15 14",viewBox:"0 0 16 16"},{name:"cart",path:"M5.5 14C5.77614 14 6 13.7761 6 13.5C6 13.2239 5.77614 13 5.5 13C5.22386 13 5 13.2239 5 13.5C5 13.7761 5.22386 14 5.5 14Z M12.5 14C12.7761 14 13 13.7761 13 13.5C13 13.2239 12.7761 13 12.5 13C12.2239 13 12 13.2239 12 13.5C12 13.7761 12.2239 14 12.5 14Z M1 1H3L4.6 9.6C4.63333 9.74056 4.7247 9.86412 4.85172 9.94984C4.97873 10.0356 5.13221 10.0769 5.28571 10.0714H12.1429C12.2964 10.0769 12.4499 10.0356 12.5769 9.94984C12.7039 9.86412 12.7952 9.74056 12.8286 9.6L14 4H4",viewBox:"0 0 16 16"},{name:"heart",path:"M13.6319 3.36825C13.2475 2.98368 12.7898 2.67897 12.2843 2.47298C11.7788 2.267 11.2371 2.16341 10.69 2.16797C10.1429 2.16341 9.60127 2.267 9.09575 2.47298C8.59023 2.67897 8.13254 2.98368 7.74805 3.36825L7.00005 4.11625L6.25205 3.36825C5.4676 2.58281 4.40687 2.16036 3.31005 2.16797C2.21322 2.16036 1.1525 2.58281 0.368046 3.36825C-0.41646 4.15369 -0.838915 5.21442 -0.83131 6.31125C-0.838915 7.40807 -0.41646 8.4688 0.368046 9.25425L7.00005 15.8862L13.6319 9.25425C14.0165 8.86975 14.3212 8.41207 14.5272 7.90655C14.7332 7.40102 14.8368 6.85936 14.8322 6.31225C14.8368 5.76513 14.7332 5.22347 14.5272 4.71795C14.3212 4.21242 14.0165 3.75474 13.6319 3.37025V3.36825Z",viewBox:"0 0 16 16"},{name:"star",path:"M7.99998 1.33325L10.06 5.5066L14.6666 6.17994L11.3333 9.42661L12.12 14.0133L7.99998 11.8466L3.87998 14.0133L4.66665 9.42661L1.33331 6.17994L5.93998 5.5066L7.99998 1.33325Z",viewBox:"0 0 16 16",fill:"currentColor"}],a=new Map;n.forEach((e=>{a.set(e.name,e)}));const l=({name:e,size:t=24,color:n="currentColor",className:l="",style:i={},onClick:r,ariaLabel:s})=>{const c=a.get(e);if(!c)return console.warn(`Icon "${e}" not found`),null;const p=c.path.split(" M ").map(((e,t)=>0===t?e:`M ${e}`)),d={display:"inline-block",verticalAlign:"middle",...i};return o.default.createElement("svg",{width:t,height:t,viewBox:c.viewBox,fill:"none",xmlns:"http://www.w3.org/2000/svg",className:l,style:d,onClick:r,"aria-label":s||`${e} icon`,role:"img"},p.map(((e,t)=>o.default.createElement("path",{key:t,d:e,stroke:c.fill?"none":n,fill:c.fill?n:"none",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}))))},i="0.0625rem",r="#525252",s="#3b3b3b",c="#111",p="#3b3b3b",d="#111",m="#ababab",g="#f1f1f1",f="Campton",h="book",u="16px",x="12px",b="none",C="none",y=e=>e&&"string"==typeof e?parseFloat(e.replace("px","")):0,w=e=>"number"==typeof e?e.toString():"book"===e?"400":e,v={display2xl:{fontFamily:"Campton",fontSize:y("52px"),fontWeight:w(500),lineHeight:y("56px"),color:c,letterSpacing:"0%",textDecoration:"none",textCase:"none"},displayXl:{fontFamily:"Campton",fontSize:y("44px"),fontWeight:w(500),lineHeight:y("48px"),color:c,letterSpacing:"0%",textDecoration:"none",textCase:"none"},headingXl:{fontFamily:"Campton",fontSize:y("40px"),fontWeight:w(600),lineHeight:y("44px"),color:c,letterSpacing:"0%",textDecoration:"none",textCase:"none"},headingLg:{fontFamily:"Campton",fontSize:y("36px"),fontWeight:w(600),lineHeight:y("40px"),color:c,letterSpacing:"0%",textDecoration:"none",textCase:"none"},headingMd:{fontFamily:"Campton",fontSize:y("32px"),fontWeight:w(600),lineHeight:y("36px"),color:c,letterSpacing:"0%",textDecoration:"none",textCase:"none"},headingSm:{fontFamily:"Campton",fontSize:y("28px"),fontWeight:w(600),lineHeight:y("32px"),color:c,letterSpacing:"0%",textDecoration:"none",textCase:"none"},headingXs:{fontFamily:"Campton",fontSize:y("20px"),fontWeight:w(600),lineHeight:y("28px"),color:c,letterSpacing:"0%",textDecoration:"none",textCase:"none"},bodyXl:{fontFamily:"Campton",fontSize:y("18px"),fontWeight:w("book"),lineHeight:y("28px"),color:s,letterSpacing:"0%",textDecoration:"none",textCase:"none",paragraphIndent:"0px"},bodyLg:{fontFamily:"Campton",fontSize:y("16px"),fontWeight:w("book"),lineHeight:y("24px"),color:s,letterSpacing:"0%",textDecoration:"none",textCase:"none",paragraphIndent:"0px"},bodyMd:{fontFamily:"Campton",fontSize:y("14px"),fontWeight:w("book"),lineHeight:y("20px"),color:s,letterSpacing:"0%",textDecoration:"none",textCase:"none",paragraphIndent:"0px"},bodySm:{fontFamily:"Campton",fontSize:y("12px"),fontWeight:w("book"),lineHeight:y("20px"),color:s,letterSpacing:"0%",textDecoration:"none",textCase:"none",paragraphIndent:"0px"},bodyXs:{fontFamily:f,fontSize:y(x),fontWeight:w(h),lineHeight:y(u),color:s,letterSpacing:"0%",textDecoration:C,textCase:b,paragraphIndent:"0px"},labelLg:{fontFamily:"Campton",fontSize:y("16px"),fontWeight:w(500),lineHeight:y("16px"),color:r,letterSpacing:"0%",textDecoration:"none",textCase:"none"},labelMd:{fontFamily:"Campton",fontSize:y("14px"),fontWeight:w(500),lineHeight:y("20px"),color:r,letterSpacing:"0%",textDecoration:"none",textCase:"none"},labelSm:{fontFamily:f,fontSize:y(x),fontWeight:w(h),lineHeight:y(u),color:r,letterSpacing:"0%",textDecoration:C,textCase:b},weights:{normal:"400",medium:w(500),semibold:w(600),bold:"700"}},k={colors:{primary:"#007AFF",secondary:"#5856D6",background:"#FFFFFF",surface:"#F2F2F7",text:"#000000",textSecondary:"#8E8E93",border:"#E5E5EA",error:"#FF3B30",warning:"#FF9500",success:"#34C759"},spacing:{xs:4,sm:8,md:16,lg:24,xl:32},borderRadius:{none:0,sm:4,md:8,lg:12,full:9999},typography:{fontSize:{xs:12,sm:14,md:16,lg:18,xl:20,xxl:24},fontWeight:{normal:"400",medium:"500",semibold:"600",bold:"700"},lineHeight:{tight:1.2,normal:1.5,relaxed:1.8}}},S=e.createContext(void 0);exports.Body=({size:e="lg",element:t="p",align:n="left",weight:a,color:l,truncate:i=!1,lineClamp:r,children:s,className:c="",style:p={},onClick:d,testID:m,...g})=>{const f={...(()=>{let t;switch(e){case"xl":t=v.bodyXl;break;case"lg":t=v.bodyLg;break;case"md":t=v.bodyMd;break;case"sm":t=v.bodySm}let o=parseInt(t.fontWeight);a&&("normal"===a?o=400:"medium"===a?o=500:"semibold"===a?o=600:"bold"===a&&(o=700));const s={fontFamily:t.fontFamily,fontSize:`${t.fontSize}px`,lineHeight:`${t.lineHeight}px`,fontWeight:o,color:l||t.color,textAlign:n,letterSpacing:t.letterSpacing,textDecoration:t.textDecoration||"none"};return i&&(s.whiteSpace="nowrap",s.overflow="hidden",s.textOverflow="ellipsis",s.display="block"),r&&r>0&&(s.display="-webkit-box",s.WebkitLineClamp=r,s.WebkitBoxOrient="vertical",s.overflow="hidden",s.textOverflow="ellipsis"),s})(),...p},h="a"===t?g:{},u=t;return o.default.createElement(u,{style:f,className:c,"data-testid":m,onClick:d,...h},s)},exports.Button=({label:t,type:n="primary",size:a="large",disabled:r=!1,leftIcon:s,rightIcon:c,icon:f,fullWidth:h=!1,style:u,accessibilityLabel:x,testID:b,onClick:C,className:y,onMouseEnter:w,onMouseLeave:k,onMouseDown:S,onMouseUp:L})=>{const M=!!f,F=s?o.default.createElement(l,{name:s,size:"large"===a?20:16}):null,z=c?o.default.createElement(l,{name:c,size:"large"===a?20:16}):null,H=f?o.default.createElement(l,{name:f,size:"large"===a?20:16}):null,[W,D]=e.useState(r?"disabled":"default"),E=s&&c;return o.default.createElement("button",{style:(()=>{const e={display:M?"inline-flex":"flex",width:M?"auto":h?"100%":"9.375rem",height:"large"===a?"2.75rem":"2rem",padding:"ghost"===n?0:"0.75rem",justifyContent:"center",alignItems:"center",gap:E?"1rem":"0.5rem",flexShrink:0,borderRadius:"62.4rem",cursor:r?"not-allowed":"pointer",opacity:r?.6:1,transition:"all 0.2s ease-in-out",border:"none"};switch(n){case"primary":switch(W){case"default":e.background="#00df88";break;case"hover":e.background="#4ce9ac";break;case"active":e.background="#98f2cf";break;case"disabled":e.background="#E5FCF3",e.opacity=.6}break;case"outline":switch(e.background="transparent",W){case"default":e.border=`${i} solid ${p}`;break;case"hover":e.border=`0.125rem solid ${d}`;break;case"active":e.border=`0.125rem solid ${m}`;break;case"disabled":e.border=`${i} solid ${g}`,e.opacity=.6}break;case"ghost":e.background="transparent";break;case"destructive":switch(e.background="transparent",W){case"default":e.color="#a90000";break;case"hover":e.color="#d60000";break;case"active":e.color="#fed8d8";break;case"disabled":e.color="#feecec",e.opacity=.6}}return{...e,...u}})(),onClick:C,disabled:r,"aria-label":x||t,"data-testid":b,className:y,onMouseEnter:e=>{r||(D("hover"),w&&w(e))},onMouseLeave:e=>{r||(D("default"),k&&k(e))},onMouseDown:e=>{r||(D("active"),S&&S(e))},onMouseUp:e=>{r||(D("hover"),L&&L(e))}},!M&&s&&o.default.createElement("span",{style:{display:"flex",alignItems:"center",justifyContent:"center",color:"currentColor"},className:"button-left-icon"},F),!M&&o.default.createElement("span",{style:(()=>{const e="large"===a?v.labelLg:v.labelMd,t={fontFamily:e.fontFamily,fontWeight:parseInt(e.fontWeight),fontSize:`${e.fontSize}px`,lineHeight:`${e.lineHeight}px`,transition:"all 0.2s ease-in-out"};switch(n){case"primary":t.color="#3b3b3b";break;case"outline":case"ghost":switch(W){case"default":t.color=p;break;case"hover":t.color=d;break;case"active":t.color=m;break;case"disabled":t.color=g}}return t})()},t),M&&o.default.createElement("span",{style:{display:"flex",alignItems:"center",justifyContent:"center",color:"currentColor"}},H),!M&&c&&o.default.createElement("span",{style:{display:"flex",alignItems:"center",justifyContent:"center",color:"currentColor"},className:"button-right-icon"},z))},exports.Display=({size:e="2xl",element:t="h1",align:n="left",weight:a,color:l,truncate:i=!1,lineClamp:r,children:s,className:c="",style:p={},onClick:d,testID:m,...g})=>{const f={...(()=>{const t="2xl"===e?v.display2xl:v.displayXl;let o=parseInt(t.fontWeight);a&&("normal"===a?o=400:"medium"===a?o=500:"semibold"===a?o=600:"bold"===a&&(o=700));const s={fontFamily:t.fontFamily,fontSize:`${t.fontSize}px`,lineHeight:`${t.lineHeight}px`,fontWeight:o,color:l||t.color,textAlign:n,letterSpacing:t.letterSpacing,textDecoration:t.textDecoration||"none"};return i&&(s.whiteSpace="nowrap",s.overflow="hidden",s.textOverflow="ellipsis",s.display="block"),r&&r>0&&(s.display="-webkit-box",s.WebkitLineClamp=r,s.WebkitBoxOrient="vertical",s.overflow="hidden",s.textOverflow="ellipsis"),s})(),...p},h=t;return o.default.createElement(h,{style:f,className:c,"data-testid":m,onClick:d,...g},s)},exports.Heading=({size:e="xl",element:t="h2",align:n="left",weight:a,color:l,truncate:i=!1,lineClamp:r,children:s,className:c="",style:p={},onClick:d,testID:m,...g})=>{const f={...(()=>{const t=v[{xl:"headingXl",lg:"headingLg",md:"headingMd",sm:"headingSm",xs:"headingXs"}[e]],o=a?parseInt(v.weights[a]):parseInt(t.fontWeight);return{...{fontFamily:t.fontFamily,fontSize:`${t.fontSize}px`,lineHeight:`${t.lineHeight}px`,fontWeight:o,color:l||t.color,textAlign:n,letterSpacing:t.letterSpacing,textDecoration:t.textDecoration||"none"},...i?{whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",display:"block"}:{},...r&&r>0?{display:"-webkit-box",WebkitLineClamp:r,WebkitBoxOrient:"vertical",overflow:"hidden",textOverflow:"ellipsis"}:{}}})(),...p},h="a"===t?g:{},u="h2"===t?{xl:"h1",lg:"h2",md:"h3",sm:"h4",xs:"h5"}[e]:t;return o.default.createElement(u,{style:f,className:c,"data-testid":m,onClick:d,...h},s)},exports.Icon=l,exports.IconList=({searchQuery:e="",iconSize:t=24,iconColor:a="currentColor",onIconClick:i})=>{const r=e?n.filter((t=>t.name.toLowerCase().includes(e.toLowerCase()))):n;return o.default.createElement("div",null,0===r.length?o.default.createElement("div",{style:{padding:"20px",textAlign:"center"}},'No icons found matching "',e,'"'):o.default.createElement("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fill, minmax(100px, 1fr))",gap:"20px"}},r.map((e=>o.default.createElement("div",{key:e.name,style:{display:"flex",flexDirection:"column",alignItems:"center",padding:"12px",border:"1px solid #eee",borderRadius:"8px",cursor:i?"pointer":"default",transition:"all 0.2s ease-in-out"},onClick:()=>{return t=e.name,void(i&&i(t));var t},onMouseOver:e=>{e.currentTarget.style.backgroundColor="#f9f9f9",e.currentTarget.style.transform="translateY(-2px)",e.currentTarget.style.boxShadow="0 2px 8px rgba(0,0,0,0.05)"},onMouseOut:e=>{e.currentTarget.style.backgroundColor="transparent",e.currentTarget.style.transform="translateY(0)",e.currentTarget.style.boxShadow="none"}},o.default.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",height:"50px",marginBottom:"8px"}},o.default.createElement(l,{name:e.name,size:t,color:a})),o.default.createElement("div",{style:{fontSize:"12px",textAlign:"center",wordBreak:"break-word"}},e.name))))))},exports.ThemeProvider=({children:e,theme:t})=>{const n=o.default.useMemo((()=>{var e,o,n;return{...k,...t,colors:{...k.colors,...null==t?void 0:t.colors},spacing:{...k.spacing,...null==t?void 0:t.spacing},borderRadius:{...k.borderRadius,...null==t?void 0:t.borderRadius},typography:{...k.typography,...null==t?void 0:t.typography,fontSize:{...k.typography.fontSize,...null===(e=null==t?void 0:t.typography)||void 0===e?void 0:e.fontSize},fontWeight:{...k.typography.fontWeight,...null===(o=null==t?void 0:t.typography)||void 0===o?void 0:o.fontWeight},lineHeight:{...k.typography.lineHeight,...null===(n=null==t?void 0:t.typography)||void 0===n?void 0:n.lineHeight}}}}),[t]),a=o.default.useCallback((e=>{console.log("Theme update requested, but we are using static theme for now.",e)}),[]);return o.default.createElement(S.Provider,{value:{theme:n,updateTheme:a}},e)},exports.Utility=({variant:e="button",element:t,align:n="left",weight:a,color:l,truncate:i=!1,lineClamp:r,children:s,className:c="",style:p={},onClick:d,testID:m,...g})=>{const f=t||(()=>{switch(e){case"button":case"caption":default:return"span";case"link":return"a"}})(),h={...(()=>{let t;switch(e){case"button":t=v.labelLg;break;case"link":t=v.labelMd;break;case"caption":t=v.labelSm}let o=parseInt(t.fontWeight);a&&("normal"===a?o=400:"medium"===a?o=500:"semibold"===a?o=600:"bold"===a&&(o=700));const s={fontFamily:t.fontFamily,fontSize:`${t.fontSize}px`,lineHeight:`${t.lineHeight}px`,fontWeight:o,color:l||t.color,textAlign:n,letterSpacing:t.letterSpacing,textDecoration:"link"===e?"underline":t.textDecoration||"none"};return i&&(s.whiteSpace="nowrap",s.overflow="hidden",s.textOverflow="ellipsis",s.display="block"),r&&r>0&&(s.display="-webkit-box",s.WebkitLineClamp=r,s.WebkitBoxOrient="vertical",s.overflow="hidden",s.textOverflow="ellipsis"),s})(),...p},u="a"===f?g:{},x=f;return o.default.createElement(x,{style:h,className:c,"data-testid":m,onClick:d,...u},s)},exports.defaultTheme=k,exports.icons=n,exports.useTheme=()=>{const t=e.useContext(S);if(!t)throw new Error("useTheme must be used within a ThemeProvider");return t};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../src/components/Icon/Icon.tsx","../src/styles/tokens/tokens.ts","../src/styles/tokens/utils/utils.ts","../src/styles/tokens/utils/fontUtils.ts","../src/styles/tokens/typography.ts","../src/theme/index.ts","../src/theme/ThemeProvider.tsx","../src/components/Typography/Body.tsx","../src/components/Button/Button.tsx","../src/components/Typography/Display.tsx","../src/components/Typography/Heading.tsx","../src/components/Icon/IconList.tsx","../src/components/Typography/Utility.tsx"],"sourcesContent":["import React from 'react';\nimport iconData from './icons.json';\n\nexport interface IconProps {\n /**\n * Name of the icon to display\n */\n name: string;\n\n /**\n * Size of the icon in pixels\n */\n size?: number;\n\n /**\n * Color of the icon\n */\n color?: string;\n\n /**\n * Optional CSS class name\n */\n className?: string;\n\n /**\n * Optional style overrides\n */\n style?: React.CSSProperties;\n\n /**\n * Optional click handler\n */\n onClick?: React.MouseEventHandler<SVGSVGElement>;\n\n /**\n * Aria label for accessibility\n */\n ariaLabel?: string;\n}\n\nexport interface IconData {\n name: string;\n path: string;\n viewBox: string;\n fill?: string;\n}\n\n// Export icon data for use in other components\nexport const icons: IconData[] = iconData.icons;\n\n// Create a map of icon names to icon data for quick lookup\nconst iconMap = new Map<string, IconData>();\nicons.forEach((icon) => {\n iconMap.set(icon.name, icon);\n});\n\nexport const Icon: React.FC<IconProps> = ({\n name,\n size = 24,\n color = 'currentColor',\n className = '',\n style = {},\n onClick,\n ariaLabel,\n}) => {\n // Find the icon data for the given name\n const iconInfo = iconMap.get(name);\n\n // If the icon doesn't exist, return null or a fallback\n if (!iconInfo) {\n console.warn(`Icon \"${name}\" not found`);\n return null;\n }\n\n // Split the path string into multiple paths if it contains multiple commands\n const paths = iconInfo.path.split(' M ').map((path, index) => \n index === 0 ? path : `M ${path}`\n );\n\n // Combine the style props\n const combinedStyle: React.CSSProperties = {\n display: 'inline-block',\n verticalAlign: 'middle',\n ...style,\n };\n\n return (\n <svg\n width={size}\n height={size}\n viewBox={iconInfo.viewBox}\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className={className}\n style={combinedStyle}\n onClick={onClick}\n aria-label={ariaLabel || `${name} icon`}\n role=\"img\"\n >\n {paths.map((path, index) => (\n <path\n key={index}\n d={path}\n stroke={iconInfo.fill ? 'none' : color}\n fill={iconInfo.fill ? color : 'none'}\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n ))}\n </svg>\n );\n};\n","/**\n * File generated by the Figma Token Engine\n * Do not edit directly\n */\n\nexport const BORDER_RADIUS_TOOLTIP_DEFAULT = \"0.25rem\";\nexport const BORDER_RADIUS_POPOVER_DEFAULT = \"0.5rem\";\nexport const BORDER_RADIUS_TAG_SM = \"0.25rem\";\nexport const BORDER_RADIUS_TAG_XL = \"62.4rem\";\nexport const BORDER_RADIUS_BUTTON_SM = \"0.25rem\";\nexport const BORDER_RADIUS_BUTTON_FULL = \"62.4rem\";\nexport const BORDER_RADIUS_INPUT_SM = \"0.25rem\";\nexport const BORDER_RADIUS_INPUT_LG = \"0.5rem\";\nexport const BORDER_RADIUS_CARD_SM = \"0.25rem\";\nexport const BORDER_RADIUS_CARD_MD = \"0.5rem\";\nexport const BORDER_RADIUS_CARD_LG = \"0.75rem\";\nexport const BORDER_RADIUS_MODAL_LG = \"0.75rem\";\nexport const BORDER_RADIUS_MODAL_XL = \"1rem\";\nexport const BORDER_RADIUS_NONE = 0;\nexport const BORDER_RADIUS_XS = \"0.25rem\";\nexport const BORDER_RADIUS_SM = \"0.5rem\";\nexport const BORDER_RADIUS_MD = \"0.75rem\";\nexport const BORDER_RADIUS_LG = \"1rem\";\nexport const BORDER_RADIUS_XL = \"1.25rem\";\nexport const BORDER_RADIUS_2XL = \"1.5rem\";\nexport const BORDER_RADIUS_3XL = \"1.75rem\";\nexport const BORDER_RADIUS_FULL = \"62.4rem\";\nexport const BORDER_WIDTH_BUTTON_DEFAULT = \"0.0625rem\";\nexport const BORDER_WIDTH_BUTTON_HOVER = \"0.125rem\";\nexport const BORDER_WIDTH_BUTTON_PRESSED = \"0.125rem\";\nexport const BORDER_WIDTH_INPUT_DEFAULT = \"0.0625rem\";\nexport const BORDER_WIDTH_INPUT_FOCUS = \"0.125rem\";\nexport const BORDER_WIDTH_INPUT_ERROR = \"0.125rem\";\nexport const BORDER_WIDTH_CARD_DEFAULT = \"0.0625rem\";\nexport const BORDER_WIDTH_CARD_HOVER = \"0.125rem\";\nexport const BORDER_WIDTH_NONE = 0;\nexport const BORDER_WIDTH_XS = \"0.0625rem\";\nexport const BORDER_WIDTH_SM = \"0.125rem\";\nexport const BORDER_WIDTH_MD = \"0.25rem\";\nexport const BORDER_GREEN = \"#00df88\";\nexport const BORDER_BLUE = \"#0053e2\";\nexport const BORDER_YELLOW = \"#f4b400\";\nexport const BORDER_RED = \"#a90000\";\nexport const BORDER_DARK = \"#111\";\nexport const BORDER_LIGHT = \"#e2e2e2\";\nexport const BORDER_LIGHTER = \"#f1f1f1\";\nexport const LAYOUT_SPACING_INLINE_NONE = 0;\nexport const LAYOUT_SPACING_INLINE_3XS = \"0.125rem\";\nexport const LAYOUT_SPACING_INLINE_2XS = \"0.25rem\";\nexport const LAYOUT_SPACING_INLINE_XS = \"0.5rem\";\nexport const LAYOUT_SPACING_INLINE_SM = \"0.75rem\";\nexport const LAYOUT_SPACING_INLINE_MD = \"1rem\";\nexport const LAYOUT_SPACING_INLINE_LG = \"2rem\";\nexport const LAYOUT_SPACING_INLINE_XL = \"2.5rem\";\nexport const LAYOUT_SPACING_INLINE_2XL = \"5rem\";\nexport const LAYOUT_SPACING_STACK_NONE = 0;\nexport const LAYOUT_SPACING_STACK_3XS = \"0.125rem\";\nexport const LAYOUT_SPACING_STACK_2XS = \"0.25rem\";\nexport const LAYOUT_SPACING_STACK_XS = \"0.5rem\";\nexport const LAYOUT_SPACING_STACK_SM = \"0.75rem\";\nexport const LAYOUT_SPACING_STACK_MD = \"1rem\";\nexport const LAYOUT_SPACING_STACK_LG = \"2rem\";\nexport const LAYOUT_SPACING_STACK_XL = \"2.5rem\";\nexport const LAYOUT_SPACING_STACK_2XL = \"5rem\";\nexport const SECTION_SPACING_SM = \"1.5rem\";\nexport const SECTION_SPACING_MD = \"1.75rem\";\nexport const SECTION_SPACING_LG = \"2rem\";\nexport const SECTION_SPACING_XL = \"2.5rem\";\nexport const SECTION_SPACING_2XL = \"3.5rem\";\nexport const SECTION_SPACING_3XL = \"5rem\";\nexport const COMPONENT_CARD_SM = \"0.75rem\";\nexport const COMPONENT_CARD_MD = \"1.25rem\";\nexport const COMPONENT_CARD_LG = \"1.5rem\";\nexport const COMPONENT_CARD_XL = \"2rem\";\nexport const COMPONENT_CARD_2XL = \"2.5rem\";\nexport const COMPONENT_MODAL_SM = \"1.25rem\";\nexport const COMPONENT_MODAL_MD = \"1.5rem\";\nexport const COMPONENT_MODAL_LG = \"1.75rem\";\nexport const SPACE_0 = 0;\nexport const SPACE_3XS = \"0.125rem\";\nexport const SPACE_2XS = \"0.25rem\";\nexport const SPACE_XS = \"0.5rem\";\nexport const SPACE_SM = \"0.75rem\";\nexport const SPACE_MD = \"1rem\";\nexport const SPACE_LG = \"1.25rem\";\nexport const SPACE_XL = \"1.5rem\";\nexport const SPACE_2XL = \"1.75rem\";\nexport const SPACE_3XL = \"2rem\";\nexport const SPACE_4XL = \"2.5rem\";\nexport const SPACE_5XL = \"3rem\";\nexport const SPACE_6XL = \"3.5rem\";\nexport const SPACE_7XL = \"4rem\";\nexport const SPACE_8XL = \"5rem\";\nexport const XS = \"0.75rem\";\nexport const S = \"1rem\";\nexport const MD = \"1.25rem\";\nexport const LG = \"1.5rem\";\nexport const XL = \"1.75rem\";\nexport const XXL = \"2rem\";\nexport const BACKGROUND_YELLOW_LIGHT = \"#fff5d9\";\nexport const BACKGROUND_YELLOW_MEDIUM = \"#ffe7a5\";\nexport const BACKGROUND_BLUE_LIGHT = \"#e3ebff\";\nexport const BACKGROUND_BLUE_MEDIUM = \"#c3deff\";\nexport const BACKGROUND_GREEN_LIGHT = \"#E5FCF3\";\nexport const BACKGROUND_GREEN_MEDIUM = \"#ccf9e7\";\nexport const BACKGROUND_GREEN_DARK = \"#00df88\";\nexport const BACKGROUND_RED_LIGHT = \"#feecec\";\nexport const BACKGROUND_RED_MEDIUM = \"#fed8d8\";\nexport const BACKGROUND_WHITE_LIGHT = \"#ffffff\";\nexport const BACKGROUND_NEUTRAL_DARK = \"#111\";\nexport const BACKGROUND_NEUTRAL_GREY = \"#e2e2e2\";\nexport const BACKGROUND_NEUTRAL_LIGHT = \"#f1f1f1\";\nexport const TEXT_INVERSE = \"#ffffff\";\nexport const TEXT_DISABLED = \"#ababab\";\nexport const TEXT_PLACEHOLDER = \"#919191\";\nexport const TEXT_TERTIARY = \"#525252\";\nexport const TEXT_BODY = \"#3b3b3b\";\nexport const TEXT_HEADER = \"#111\";\nexport const TEXT_GREEN = \"#00df88\";\nexport const TEXT_BLUE = \"#0053e2\";\nexport const TEXT_ERROR = \"#a90000\";\nexport const TEXT_YELLOW = \"#f4b400\";\nexport const FEEDBACK_ALERT_SUCCESS = \"#00df88\";\nexport const FEEDBACK_ALERT_ERROR = \"#a90000\";\nexport const FEEDBACK_ALERT_WARNING = \"#fff5d9\";\nexport const FEEDBACK_ALERT_NEUTRAL = \"#111\";\nexport const ACTION_PRIMARY_DEFAULT = \"#00df88\";\nexport const ACTION_PRIMARY_HOVER = \"#4ce9ac\";\nexport const ACTION_PRIMARY_ACTIVE = \"#98f2cf\";\nexport const ACTION_PRIMARY_DISABLED = \"#E5FCF3\";\nexport const ACTION_SECONDARY_DEFAULT = \"#0053e2\";\nexport const ACTION_SECONDARY_HOVER = \"#254cac\";\nexport const ACTION_SECONDARY_ACTIVE = \"#9ec1ff\";\nexport const ACTION_SECONDARY_DISABLED = \"#e3ebff\";\nexport const ACTION_DESTRUCTIVE_DEFAULT = \"#d60000\";\nexport const ACTION_DESTRUCTIVE_HOVER = \"#a90000\";\nexport const ACTION_DESTRUCTIVE_ACTIVE = \"#fed8d8\";\nexport const ACTION_DESTRUCTIVE_DISABLE = \"#feecec\";\nexport const ACTION_TERTIARY_DEFAULT = \"#3b3b3b\";\nexport const ACTION_TERTIARY_HOVER = \"#111\";\nexport const ACTION_TERTIARY_ACTIVE = \"#ababab\";\nexport const ACTION_TERTIARY_DISABLE = \"#f1f1f1\";\nexport const ICON_YELLOW = \"#f4b400\";\nexport const ICON_BLUE = \"#0053e2\";\nexport const ICON_GREEN = \"#00df88\";\nexport const ICON_RED = \"#a90000\";\nexport const ICON_NEUTRAL = \"#111\";\nexport const ICON_LIGHT = \"#e2e2e2\";\nexport const ICON_LIGHTER = \"#f1f1f1\";\nexport const GREEN_10 = \"#E5FCF3\";\nexport const GREEN_20 = \"#ccf9e7\";\nexport const GREEN_30 = \"#B2F5DB\";\nexport const GREEN_40 = \"#98f2cf\";\nexport const GREEN_50 = \"#81efc3\";\nexport const GREEN_60 = \"#66ecb8\";\nexport const GREEN_70 = \"#4ce9ac\";\nexport const GREEN_80 = \"#31e5a0\";\nexport const GREEN_90 = \"#1ae294\";\nexport const GREEN_100 = \"#00df88\";\nexport const NEUTRAL_10 = \"#f1f1f1\";\nexport const NEUTRAL_20 = \"#e2e2e2\";\nexport const NEUTRAL_30 = \"#c6c6c6\";\nexport const NEUTRAL_40 = \"#ababab\";\nexport const NEUTRAL_50 = \"#919191\";\nexport const NEUTRAL_60 = \"#6a6a6a\";\nexport const NEUTRAL_70 = \"#525252\";\nexport const NEUTRAL_80 = \"#3b3b3b\";\nexport const NEUTRAL_90 = \"#262626\";\nexport const NEUTRAL_100 = \"#111\";\nexport const BLUE_10 = \"#e3ebff\";\nexport const BLUE_20 = \"#c3deff\";\nexport const BLUE_30 = \"#9ec1ff\";\nexport const BLUE_40 = \"#5c83fd\";\nexport const BLUE_50 = \"#446ef5\";\nexport const BLUE_60 = \"#0053e2\";\nexport const BLUE_70 = \"#254cac\";\nexport const BLUE_80 = \"#14328d\";\nexport const BLUE_90 = \"#0c285f\";\nexport const BLUE_100 = \"#071e3c\";\nexport const RED_10 = \"#feecec\";\nexport const RED_20 = \"#fed8d8\";\nexport const RED_30 = \"#feb3b3\";\nexport const RED_40 = \"#fe8888\";\nexport const RED_50 = \"#fb5959\";\nexport const RED_60 = \"#d60000\";\nexport const RED_70 = \"#a90000\";\nexport const RED_80 = \"#820000\";\nexport const RED_90 = \"#550000\";\nexport const RED_100 = \"#3a0000\";\nexport const YELLOW_10 = \"#fff5d9\";\nexport const YELLOW_20 = \"#ffe7a5\";\nexport const YELLOW_30 = \"#ffd86b\";\nexport const YELLOW_40 = \"#ffce46\";\nexport const YELLOW_50 = \"#ffc420\";\nexport const YELLOW_60 = \"#f4b400\";\nexport const YELLOW_70 = \"#dba200\";\nexport const YELLOW_80 = \"#c69200\";\nexport const YELLOW_90 = \"#b38400\";\nexport const YELLOW_100 = \"#9a7100\";\nexport const WHITE_10 = \"#ffffff\";\nexport const DISPLAY_2XL_FONT_FAMILY = \"Campton\";\nexport const DISPLAY_2XL_FONT_WEIGHT = 500;\nexport const DISPLAY_2XL_LINE_HEIGHT = \"56px\";\nexport const DISPLAY_2XL_FONT_SIZE = \"52px\";\nexport const DISPLAY_2XL_LETTER_SPACING = \"0%\";\nexport const DISPLAY_2XL_PARAGRAPH_INDENT = \"0px\";\nexport const DISPLAY_2XL_TEXT_CASE = \"none\";\nexport const DISPLAY_2XL_TEXT_DECORATION = \"none\";\nexport const DISPLAY_XL_FONT_FAMILY = \"Campton\";\nexport const DISPLAY_XL_FONT_WEIGHT = 500;\nexport const DISPLAY_XL_LINE_HEIGHT = \"48px\";\nexport const DISPLAY_XL_FONT_SIZE = \"44px\";\nexport const DISPLAY_XL_LETTER_SPACING = \"0%\";\nexport const DISPLAY_XL_PARAGRAPH_INDENT = \"0px\";\nexport const DISPLAY_XL_TEXT_CASE = \"none\";\nexport const DISPLAY_XL_TEXT_DECORATION = \"none\";\nexport const HEADING_XL_FONT_FAMILY = \"Campton\";\nexport const HEADING_XL_FONT_WEIGHT = 600;\nexport const HEADING_XL_LINE_HEIGHT = \"48px\";\nexport const HEADING_XL_FONT_SIZE = \"40px\";\nexport const HEADING_XL_LETTER_SPACING = \"0%\";\nexport const HEADING_XL_PARAGRAPH_INDENT = \"0px\";\nexport const HEADING_XL_TEXT_CASE = \"none\";\nexport const HEADING_XL_TEXT_DECORATION = \"none\";\nexport const HEADING_LG_FONT_FAMILY = \"Campton\";\nexport const HEADING_LG_FONT_WEIGHT = 600;\nexport const HEADING_LG_LINE_HEIGHT = \"44px\";\nexport const HEADING_LG_FONT_SIZE = \"36px\";\nexport const HEADING_LG_LETTER_SPACING = \"0%\";\nexport const HEADING_LG_PARAGRAPH_INDENT = \"0px\";\nexport const HEADING_LG_TEXT_CASE = \"none\";\nexport const HEADING_LG_TEXT_DECORATION = \"none\";\nexport const HEADING_MD_FONT_FAMILY = \"Campton\";\nexport const HEADING_MD_FONT_WEIGHT = 600;\nexport const HEADING_MD_LINE_HEIGHT = \"40px\";\nexport const HEADING_MD_FONT_SIZE = \"32px\";\nexport const HEADING_MD_LETTER_SPACING = \"0%\";\nexport const HEADING_MD_PARAGRAPH_INDENT = \"0px\";\nexport const HEADING_MD_TEXT_CASE = \"none\";\nexport const HEADING_MD_TEXT_DECORATION = \"none\";\nexport const HEADING_SM_FONT_FAMILY = \"Campton\";\nexport const HEADING_SM_FONT_WEIGHT = 600;\nexport const HEADING_SM_LINE_HEIGHT = \"36px\";\nexport const HEADING_SM_FONT_SIZE = \"28px\";\nexport const HEADING_SM_LETTER_SPACING = \"0%\";\nexport const HEADING_SM_PARAGRAPH_INDENT = \"0px\";\nexport const HEADING_SM_TEXT_CASE = \"none\";\nexport const HEADING_SM_TEXT_DECORATION = \"none\";\nexport const HEADING_XS_FONT_FAMILY = \"Campton\";\nexport const HEADING_XS_FONT_WEIGHT = 600;\nexport const HEADING_XS_LINE_HEIGHT = \"28px\";\nexport const HEADING_XS_FONT_SIZE = \"20px\";\nexport const HEADING_XS_LETTER_SPACING = \"0%\";\nexport const HEADING_XS_PARAGRAPH_INDENT = \"0px\";\nexport const HEADING_XS_TEXT_CASE = \"none\";\nexport const HEADING_XS_TEXT_DECORATION = \"none\";\nexport const HEADING_2XS_FONT_FAMILY = \"Campton\";\nexport const HEADING_2XS_FONT_WEIGHT = 600;\nexport const HEADING_2XS_LINE_HEIGHT = \"24px\";\nexport const HEADING_2XS_FONT_SIZE = \"18px\";\nexport const HEADING_2XS_LETTER_SPACING = \"0%\";\nexport const HEADING_2XS_PARAGRAPH_INDENT = \"0px\";\nexport const HEADING_2XS_TEXT_CASE = \"none\";\nexport const HEADING_2XS_TEXT_DECORATION = \"none\";\nexport const BODY_XL_FONT_FAMILY = \"Campton\";\nexport const BODY_XL_FONT_WEIGHT = \"book\";\nexport const BODY_XL_LINE_HEIGHT = \"28px\";\nexport const BODY_XL_FONT_SIZE = \"18px\";\nexport const BODY_XL_LETTER_SPACING = \"0%\";\nexport const BODY_XL_PARAGRAPH_INDENT = \"0px\";\nexport const BODY_XL_TEXT_CASE = \"none\";\nexport const BODY_XL_TEXT_DECORATION = \"none\";\nexport const BODY_LG_FONT_FAMILY = \"Campton\";\nexport const BODY_LG_FONT_WEIGHT = \"book\";\nexport const BODY_LG_LINE_HEIGHT = \"24px\";\nexport const BODY_LG_FONT_SIZE = \"16px\";\nexport const BODY_LG_LETTER_SPACING = \"0%\";\nexport const BODY_LG_PARAGRAPH_INDENT = \"0px\";\nexport const BODY_LG_TEXT_CASE = \"none\";\nexport const BODY_LG_TEXT_DECORATION = \"none\";\nexport const BODY_MD_FONT_FAMILY = \"Campton\";\nexport const BODY_MD_FONT_WEIGHT = \"book\";\nexport const BODY_MD_LINE_HEIGHT = \"20px\";\nexport const BODY_MD_FONT_SIZE = \"14px\";\nexport const BODY_MD_LETTER_SPACING = \"0%\";\nexport const BODY_MD_PARAGRAPH_INDENT = \"0px\";\nexport const BODY_MD_TEXT_CASE = \"none\";\nexport const BODY_MD_TEXT_DECORATION = \"none\";\nexport const BODY_SM_FONT_FAMILY = \"Campton\";\nexport const BODY_SM_FONT_WEIGHT = \"book\";\nexport const BODY_SM_LINE_HEIGHT = \"20px\";\nexport const BODY_SM_FONT_SIZE = \"12px\";\nexport const BODY_SM_LETTER_SPACING = \"0%\";\nexport const BODY_SM_PARAGRAPH_INDENT = \"0px\";\nexport const BODY_SM_TEXT_CASE = \"none\";\nexport const BODY_SM_TEXT_DECORATION = \"none\";\nexport const UTILITY_BUTTON_FONT_FAMILY = \"Campton\";\nexport const UTILITY_BUTTON_FONT_WEIGHT = 500;\nexport const UTILITY_BUTTON_LINE_HEIGHT = \"16px\";\nexport const UTILITY_BUTTON_FONT_SIZE = \"16px\";\nexport const UTILITY_BUTTON_LETTER_SPACING = \"0%\";\nexport const UTILITY_BUTTON_PARAGRAPH_INDENT = \"0px\";\nexport const UTILITY_BUTTON_TEXT_CASE = \"none\";\nexport const UTILITY_BUTTON_TEXT_DECORATION = \"none\";\nexport const UTILITY_LINK_FONT_FAMILY = \"Campton\";\nexport const UTILITY_LINK_FONT_WEIGHT = 500;\nexport const UTILITY_LINK_LINE_HEIGHT = \"20px\";\nexport const UTILITY_LINK_FONT_SIZE = \"14px\";\nexport const UTILITY_LINK_LETTER_SPACING = \"0%\";\nexport const UTILITY_LINK_PARAGRAPH_INDENT = \"0px\";\nexport const UTILITY_LINK_TEXT_CASE = \"none\";\nexport const UTILITY_LINK_TEXT_DECORATION = \"underline\";\nexport const UTILITY_CAPTION_FONT_FAMILY = \"Campton\";\nexport const UTILITY_CAPTION_FONT_WEIGHT = \"book\";\nexport const UTILITY_CAPTION_LINE_HEIGHT = \"16px\";\nexport const UTILITY_CAPTION_FONT_SIZE = \"12px\";\nexport const UTILITY_CAPTION_LETTER_SPACING = \"0%\";\nexport const UTILITY_CAPTION_PARAGRAPH_INDENT = \"0px\";\nexport const UTILITY_CAPTION_TEXT_CASE = \"none\";\nexport const UTILITY_CAPTION_TEXT_DECORATION = \"none\";\nexport const FONT_FAMILIES_CAMPTON = \"Campton\";\nexport const LINE_HEIGHT_6XL = \"56px\";\nexport const LINE_HEIGHT_5XL = \"48px\";\nexport const LINE_HEIGHT_4XL = \"44px\";\nexport const LINE_HEIGHT_3XL = \"40px\";\nexport const LINE_HEIGHT_2XL = \"36px\";\nexport const LINE_HEIGHT_XL = \"32px\";\nexport const LINE_HEIGHT_LG = \"28px\";\nexport const LINE_HEIGHT_MD = \"24px\";\nexport const LINE_HEIGHT_S = \"20px\";\nexport const LINE_HEIGHT_XS = \"16px\";\nexport const MEDIUM = 500;\nexport const SEMI_BOLD = 600;\nexport const BOOK = \"book\";\nexport const FONT_SIZE_2XS = \"14px\";\nexport const FONT_SIZE_3XS = \"12px\";\nexport const FONT_SIZE_XS = \"16px\";\nexport const FONT_SIZE_MD = \"18px\";\nexport const FONT_SIZE_LG = \"20px\";\nexport const FONT_SIZE_XL = \"28px\";\nexport const FONT_SIZE_2XL = \"32px\";\nexport const FONT_SIZE_3XL = \"36px\";\nexport const FONT_SIZE_4XL = \"40px\";\nexport const FONT_SIZE_5XL = \"44px\";\nexport const FONT_SIZE_6XL = \"52px\";\nexport const LETTER_SPACING_0 = \"0%\";\nexport const TEXT_CASE_NONE = \"none\";\nexport const TEXT_DECORATION_NONE = \"none\";\nexport const TEXT_DECORATION_UNDERLINE = \"underline\";\nexport const PARAGRAPH_INDENT_0 = \"0px\";\n","/**\n * Convert rem values to numbers\n * @param remValue The rem value to convert (e.g. \"1.5rem\")\n * @returns The converted number value\n */\nexport const remToNumber = (remValue: string): number => {\n if (!remValue || typeof remValue !== 'string') return 0;\n return parseFloat(remValue.replace('rem', '')) * 16; // Assuming 1rem = 16px\n};\n\n/**\n * Convert px values to numbers\n * @param pxValue The px value to convert (e.g. \"24px\")\n * @returns The converted number value\n */\nexport const pxToNumber = (pxValue: string): number => {\n if (!pxValue || typeof pxValue !== 'string') return 0;\n return parseFloat(pxValue.replace('px', ''));\n};\n","import { pxToNumber } from \"./utils\";\n\n/**\n * Normalizes font weight to a string representation\n * Converts numeric values to string, handles special cases like \"book\"\n * @param weight The font weight value, can be a string or number\n * @returns Normalized font weight as a string\n */\nexport const normalizeFontWeight = (weight: string | number): string => {\n if (typeof weight === \"number\") {\n return weight.toString();\n }\n\n if (weight === \"book\") {\n return \"400\";\n }\n\n return weight;\n};\n\n/**\n * Calculates an appropriate line height based on font size\n * Uses a standard typographic ratio or falls back to a default multiplier\n *\n * @param fontSize The font size in pixels\n * @param ratio Optional ratio to calculate line height (default: 1.5)\n * @returns The calculated line height as a number\n */\nexport const calculateLineHeight = (\n fontSize: string | number,\n ratio: number = 1.5\n): number => {\n const size = typeof fontSize === \"string\" ? pxToNumber(fontSize) : fontSize;\n return Math.round(size * ratio);\n};\n\n/**\n * Converts letter spacing percentage to a pixel value\n * Figma often uses percentage values for letter spacing\n *\n * @param letterSpacing The letter spacing value (e.g. \"0%\", \"2%\")\n * @param fontSize The font size to calculate relative to\n * @returns The letter spacing in pixels as a number\n */\nexport const letterSpacingToPixels = (\n letterSpacing: string,\n fontSize: string | number\n): number => {\n // If letterSpacing is already a pixel value, convert and return\n if (letterSpacing.endsWith(\"px\")) {\n return pxToNumber(letterSpacing);\n }\n\n // Handle percentage values\n if (letterSpacing.endsWith(\"%\")) {\n const percentage = parseFloat(letterSpacing) / 100;\n const size = typeof fontSize === \"string\" ? pxToNumber(fontSize) : fontSize;\n return size * percentage;\n }\n\n // Default to 0 if format is not recognized\n return 0;\n};\n","// This file maps the generated tokens to a structured format for Typography component\nimport * as tokens from \"./tokens\";\nimport { normalizeFontWeight } from \"./utils/fontUtils\";\nimport { pxToNumber } from \"./utils/utils\";\n\nexport const typographyTokens = {\n // Display variants\n display2xl: {\n fontFamily: tokens.DISPLAY_2XL_FONT_FAMILY,\n fontSize: pxToNumber(tokens.DISPLAY_2XL_FONT_SIZE),\n fontWeight: normalizeFontWeight(tokens.DISPLAY_2XL_FONT_WEIGHT),\n lineHeight: pxToNumber(tokens.LINE_HEIGHT_6XL),\n color: tokens.TEXT_HEADER,\n letterSpacing: tokens.DISPLAY_2XL_LETTER_SPACING,\n textDecoration: tokens.DISPLAY_2XL_TEXT_DECORATION,\n textCase: tokens.DISPLAY_2XL_TEXT_CASE,\n },\n displayXl: {\n fontFamily: tokens.DISPLAY_XL_FONT_FAMILY,\n fontSize: pxToNumber(tokens.DISPLAY_XL_FONT_SIZE),\n fontWeight: normalizeFontWeight(tokens.DISPLAY_XL_FONT_WEIGHT),\n lineHeight: pxToNumber(tokens.LINE_HEIGHT_5XL),\n color: tokens.TEXT_HEADER,\n letterSpacing: tokens.DISPLAY_XL_LETTER_SPACING,\n textDecoration: tokens.DISPLAY_XL_TEXT_DECORATION,\n textCase: tokens.DISPLAY_XL_TEXT_CASE,\n },\n\n // Heading variants\n headingXl: {\n fontFamily: tokens.HEADING_XL_FONT_FAMILY,\n fontSize: pxToNumber(tokens.HEADING_XL_FONT_SIZE),\n fontWeight: normalizeFontWeight(tokens.HEADING_XL_FONT_WEIGHT),\n lineHeight: pxToNumber(tokens.LINE_HEIGHT_4XL),\n color: tokens.TEXT_HEADER,\n letterSpacing: tokens.HEADING_XL_LETTER_SPACING,\n textDecoration: tokens.HEADING_XL_TEXT_DECORATION,\n textCase: tokens.HEADING_XL_TEXT_CASE,\n },\n headingLg: {\n fontFamily: tokens.HEADING_LG_FONT_FAMILY,\n fontSize: pxToNumber(tokens.HEADING_LG_FONT_SIZE),\n fontWeight: normalizeFontWeight(tokens.HEADING_LG_FONT_WEIGHT),\n lineHeight: pxToNumber(tokens.LINE_HEIGHT_3XL),\n color: tokens.TEXT_HEADER,\n letterSpacing: tokens.HEADING_LG_LETTER_SPACING,\n textDecoration: tokens.HEADING_LG_TEXT_DECORATION,\n textCase: tokens.HEADING_LG_TEXT_CASE,\n },\n headingMd: {\n fontFamily: tokens.HEADING_MD_FONT_FAMILY,\n fontSize: pxToNumber(tokens.HEADING_MD_FONT_SIZE),\n fontWeight: normalizeFontWeight(tokens.HEADING_MD_FONT_WEIGHT),\n lineHeight: pxToNumber(tokens.LINE_HEIGHT_2XL),\n color: tokens.TEXT_HEADER,\n letterSpacing: tokens.HEADING_MD_LETTER_SPACING,\n textDecoration: tokens.HEADING_MD_TEXT_DECORATION,\n textCase: tokens.HEADING_MD_TEXT_CASE,\n },\n headingSm: {\n fontFamily: tokens.HEADING_SM_FONT_FAMILY,\n fontSize: pxToNumber(tokens.HEADING_SM_FONT_SIZE),\n fontWeight: normalizeFontWeight(tokens.HEADING_SM_FONT_WEIGHT),\n lineHeight: pxToNumber(tokens.LINE_HEIGHT_XL),\n color: tokens.TEXT_HEADER,\n letterSpacing: tokens.HEADING_SM_LETTER_SPACING,\n textDecoration: tokens.HEADING_SM_TEXT_DECORATION,\n textCase: tokens.HEADING_SM_TEXT_CASE,\n },\n headingXs: {\n fontFamily: tokens.HEADING_XS_FONT_FAMILY,\n fontSize: pxToNumber(tokens.HEADING_XS_FONT_SIZE),\n fontWeight: normalizeFontWeight(tokens.HEADING_XS_FONT_WEIGHT),\n lineHeight: pxToNumber(tokens.LINE_HEIGHT_LG),\n color: tokens.TEXT_HEADER,\n letterSpacing: tokens.HEADING_XS_LETTER_SPACING,\n textDecoration: tokens.HEADING_XS_TEXT_DECORATION,\n textCase: tokens.HEADING_XS_TEXT_CASE,\n },\n\n // Body text variants\n bodyXl: {\n fontFamily: tokens.BODY_XL_FONT_FAMILY,\n fontSize: pxToNumber(tokens.BODY_XL_FONT_SIZE),\n fontWeight: normalizeFontWeight(tokens.BODY_XL_FONT_WEIGHT),\n lineHeight: pxToNumber(tokens.BODY_XL_LINE_HEIGHT),\n color: tokens.TEXT_BODY,\n letterSpacing: tokens.BODY_XL_LETTER_SPACING,\n textDecoration: tokens.BODY_XL_TEXT_DECORATION,\n textCase: tokens.BODY_XL_TEXT_CASE,\n paragraphIndent: tokens.BODY_XL_PARAGRAPH_INDENT,\n },\n bodyLg: {\n fontFamily: tokens.BODY_LG_FONT_FAMILY,\n fontSize: pxToNumber(tokens.BODY_LG_FONT_SIZE),\n fontWeight: normalizeFontWeight(tokens.BODY_LG_FONT_WEIGHT),\n lineHeight: pxToNumber(tokens.BODY_LG_LINE_HEIGHT),\n color: tokens.TEXT_BODY,\n letterSpacing: tokens.BODY_LG_LETTER_SPACING,\n textDecoration: tokens.BODY_LG_TEXT_DECORATION,\n textCase: tokens.BODY_LG_TEXT_CASE,\n paragraphIndent: tokens.BODY_LG_PARAGRAPH_INDENT,\n },\n bodyMd: {\n fontFamily: tokens.BODY_MD_FONT_FAMILY,\n fontSize: pxToNumber(tokens.BODY_MD_FONT_SIZE),\n fontWeight: normalizeFontWeight(tokens.BODY_MD_FONT_WEIGHT),\n lineHeight: pxToNumber(tokens.BODY_MD_LINE_HEIGHT),\n color: tokens.TEXT_BODY,\n letterSpacing: tokens.BODY_MD_LETTER_SPACING,\n textDecoration: tokens.BODY_MD_TEXT_DECORATION,\n textCase: tokens.BODY_MD_TEXT_CASE,\n paragraphIndent: tokens.BODY_MD_PARAGRAPH_INDENT,\n },\n bodySm: {\n fontFamily: tokens.BODY_SM_FONT_FAMILY,\n fontSize: pxToNumber(tokens.BODY_SM_FONT_SIZE),\n fontWeight: normalizeFontWeight(tokens.BODY_SM_FONT_WEIGHT),\n lineHeight: pxToNumber(tokens.BODY_SM_LINE_HEIGHT),\n color: tokens.TEXT_BODY,\n letterSpacing: tokens.BODY_SM_LETTER_SPACING,\n textDecoration: tokens.BODY_SM_TEXT_DECORATION,\n textCase: tokens.BODY_SM_TEXT_CASE,\n paragraphIndent: tokens.BODY_SM_PARAGRAPH_INDENT,\n },\n bodyXs: {\n // Map to utility-caption which is our smallest text style in Figma tokens\n fontFamily: tokens.UTILITY_CAPTION_FONT_FAMILY,\n fontSize: pxToNumber(tokens.UTILITY_CAPTION_FONT_SIZE),\n fontWeight: normalizeFontWeight(tokens.UTILITY_CAPTION_FONT_WEIGHT),\n lineHeight: pxToNumber(tokens.UTILITY_CAPTION_LINE_HEIGHT),\n color: tokens.TEXT_BODY,\n letterSpacing: tokens.UTILITY_CAPTION_LETTER_SPACING,\n textDecoration: tokens.UTILITY_CAPTION_TEXT_DECORATION,\n textCase: tokens.UTILITY_CAPTION_TEXT_CASE,\n paragraphIndent: tokens.UTILITY_CAPTION_PARAGRAPH_INDENT,\n },\n\n // Label variants - map to Utility tokens from Figma\n labelLg: {\n // Maps to utility-button\n fontFamily: tokens.UTILITY_BUTTON_FONT_FAMILY,\n fontSize: pxToNumber(tokens.UTILITY_BUTTON_FONT_SIZE),\n fontWeight: normalizeFontWeight(tokens.UTILITY_BUTTON_FONT_WEIGHT),\n lineHeight: pxToNumber(tokens.UTILITY_BUTTON_LINE_HEIGHT),\n color: tokens.TEXT_TERTIARY,\n letterSpacing: tokens.UTILITY_BUTTON_LETTER_SPACING,\n textDecoration: tokens.UTILITY_BUTTON_TEXT_DECORATION,\n textCase: tokens.UTILITY_BUTTON_TEXT_CASE,\n },\n labelMd: {\n // Maps to utility-link\n fontFamily: tokens.UTILITY_LINK_FONT_FAMILY,\n fontSize: pxToNumber(tokens.UTILITY_LINK_FONT_SIZE),\n fontWeight: normalizeFontWeight(tokens.UTILITY_LINK_FONT_WEIGHT),\n lineHeight: pxToNumber(tokens.UTILITY_LINK_LINE_HEIGHT),\n color: tokens.TEXT_TERTIARY,\n letterSpacing: tokens.UTILITY_LINK_LETTER_SPACING,\n textDecoration: tokens.TEXT_DECORATION_NONE, // Override the default underline from utility-link\n textCase: tokens.UTILITY_LINK_TEXT_CASE,\n },\n labelSm: {\n // Maps to utility-caption\n fontFamily: tokens.UTILITY_CAPTION_FONT_FAMILY,\n fontSize: pxToNumber(tokens.UTILITY_CAPTION_FONT_SIZE),\n fontWeight: normalizeFontWeight(tokens.UTILITY_CAPTION_FONT_WEIGHT),\n lineHeight: pxToNumber(tokens.UTILITY_CAPTION_LINE_HEIGHT),\n color: tokens.TEXT_TERTIARY,\n letterSpacing: tokens.UTILITY_CAPTION_LETTER_SPACING,\n textDecoration: tokens.UTILITY_CAPTION_TEXT_DECORATION,\n textCase: tokens.UTILITY_CAPTION_TEXT_CASE,\n },\n\n // Weights mapping for custom weight overrides\n weights: {\n normal: \"400\", // Regular weight\n medium: normalizeFontWeight(tokens.MEDIUM),\n semibold: normalizeFontWeight(tokens.SEMI_BOLD),\n bold: \"700\", // Bold weight (not directly defined in tokens)\n },\n};\n\nexport default typographyTokens;\n","export interface ThemeColors {\n primary: string;\n secondary: string;\n background: string;\n surface: string;\n text: string;\n textSecondary: string;\n border: string;\n error: string;\n warning: string;\n success: string;\n}\n\nexport interface ThemeSpacing {\n xs: number;\n sm: number;\n md: number;\n lg: number;\n xl: number;\n}\n\nexport interface ThemeBorderRadius {\n none: number;\n sm: number;\n md: number;\n lg: number;\n full: number;\n}\n\nexport interface ThemeTypography {\n fontSize: {\n xs: number;\n sm: number;\n md: number;\n lg: number;\n xl: number;\n xxl: number;\n };\n fontWeight: {\n normal: '400' | 'normal';\n medium: '500' | 'medium';\n semibold: '600' | 'semibold';\n bold: '700' | 'bold';\n };\n lineHeight: {\n tight: number;\n normal: number;\n relaxed: number;\n };\n}\n\nexport interface Theme {\n colors: ThemeColors;\n spacing: ThemeSpacing;\n borderRadius: ThemeBorderRadius;\n typography: ThemeTypography;\n}\n\nexport const defaultTheme: Theme = {\n colors: {\n primary: '#007AFF',\n secondary: '#5856D6',\n background: '#FFFFFF',\n surface: '#F2F2F7',\n text: '#000000',\n textSecondary: '#8E8E93',\n border: '#E5E5EA',\n error: '#FF3B30',\n warning: '#FF9500',\n success: '#34C759',\n },\n spacing: {\n xs: 4,\n sm: 8,\n md: 16,\n lg: 24,\n xl: 32,\n },\n borderRadius: {\n none: 0,\n sm: 4,\n md: 8,\n lg: 12,\n full: 9999,\n },\n typography: {\n fontSize: {\n xs: 12,\n sm: 14,\n md: 16,\n lg: 18,\n xl: 20,\n xxl: 24,\n },\n fontWeight: {\n normal: '400',\n medium: '500',\n semibold: '600',\n bold: '700',\n },\n lineHeight: {\n tight: 1.2,\n normal: 1.5,\n relaxed: 1.8,\n },\n },\n};\n","import React, { createContext, useContext, ReactNode } from \"react\";\nimport { Theme, defaultTheme } from \"./index\";\n\ninterface ThemeContextValue {\n theme: Theme;\n updateTheme: (newTheme: Partial<Theme>) => void;\n}\n\nconst ThemeContext = createContext<ThemeContextValue | undefined>(undefined);\n\ninterface ThemeProviderProps {\n children: ReactNode;\n theme?: Partial<Theme>;\n}\n\nexport const ThemeProvider: React.FC<ThemeProviderProps> = ({\n children,\n theme: customTheme,\n}) => {\n // Using useMemo instead of useState to prevent unnecessary re-renders\n const theme = React.useMemo<Theme>(\n () => ({\n ...defaultTheme,\n ...customTheme,\n colors: { ...defaultTheme.colors, ...customTheme?.colors },\n spacing: { ...defaultTheme.spacing, ...customTheme?.spacing },\n borderRadius: {\n ...defaultTheme.borderRadius,\n ...customTheme?.borderRadius,\n },\n typography: {\n ...defaultTheme.typography,\n ...customTheme?.typography,\n fontSize: {\n ...defaultTheme.typography.fontSize,\n ...customTheme?.typography?.fontSize,\n },\n fontWeight: {\n ...defaultTheme.typography.fontWeight,\n ...customTheme?.typography?.fontWeight,\n },\n lineHeight: {\n ...defaultTheme.typography.lineHeight,\n ...customTheme?.typography?.lineHeight,\n },\n },\n }),\n [customTheme]\n );\n\n const updateTheme = React.useCallback((newTheme: Partial<Theme>) => {\n console.log(\n \"Theme update requested, but we are using static theme for now.\",\n newTheme\n );\n }, []);\n\n return (\n <ThemeContext.Provider value={{ theme, updateTheme }}>\n {children}\n </ThemeContext.Provider>\n );\n};\n\nexport const useTheme = (): ThemeContextValue => {\n const context = useContext(ThemeContext);\n if (!context) {\n throw new Error(\"useTheme must be used within a ThemeProvider\");\n }\n return context;\n};\n","import React from \"react\";\nimport typographyTokens from \"../../styles/tokens/typography\";\nimport { BodyProps } from \"../../types/Typography\";\n\nexport const Body: React.FC<BodyProps> = ({\n size = \"lg\",\n element = \"p\",\n align = \"left\",\n weight,\n color,\n truncate = false,\n lineClamp,\n children,\n className = \"\",\n style = {},\n onClick,\n testID,\n ...rest\n}) => {\n const getStyles = (): React.CSSProperties => {\n let tokenSet;\n switch (size) {\n case \"xl\":\n tokenSet = typographyTokens.bodyXl;\n break;\n case \"lg\":\n tokenSet = typographyTokens.bodyLg;\n break;\n case \"md\":\n tokenSet = typographyTokens.bodyMd;\n break;\n case \"sm\":\n tokenSet = typographyTokens.bodySm;\n break;\n }\n\n let fontWeightValue = parseInt(tokenSet.fontWeight);\n if (weight) {\n if (weight === \"normal\") fontWeightValue = 400;\n else if (weight === \"medium\") fontWeightValue = 500;\n else if (weight === \"semibold\") fontWeightValue = 600;\n else if (weight === \"bold\") fontWeightValue = 700;\n }\n\n const baseStyles: React.CSSProperties = {\n fontFamily: tokenSet.fontFamily,\n fontSize: `${tokenSet.fontSize}px`,\n lineHeight: `${tokenSet.lineHeight}px`,\n fontWeight: fontWeightValue,\n color: color || tokenSet.color,\n textAlign: align,\n letterSpacing: tokenSet.letterSpacing,\n textDecoration: tokenSet.textDecoration || \"none\",\n };\n\n if (truncate) {\n baseStyles.whiteSpace = \"nowrap\";\n baseStyles.overflow = \"hidden\";\n baseStyles.textOverflow = \"ellipsis\";\n baseStyles.display = \"block\";\n }\n\n if (lineClamp && lineClamp > 0) {\n baseStyles.display = \"-webkit-box\";\n baseStyles.WebkitLineClamp = lineClamp;\n baseStyles.WebkitBoxOrient = \"vertical\";\n baseStyles.overflow = \"hidden\";\n baseStyles.textOverflow = \"ellipsis\";\n }\n\n return baseStyles;\n };\n\n const combinedStyles = {\n ...getStyles(),\n ...style,\n };\n\n const linkProps = element === \"a\" ? rest : {};\n\n const Component = element as React.ElementType;\n\n return (\n <Component\n style={combinedStyles}\n className={className}\n data-testid={testID}\n onClick={onClick}\n {...linkProps}\n >\n {children}\n </Component>\n );\n};\n","import React, { useState } from \"react\";\nimport { ButtonProps, ButtonState } from \"../../types/Button\";\nimport { Icon } from \"../Icon\";\n\nexport const Button: React.FC<ButtonProps> = ({\n label,\n type = \"primary\",\n size = \"large\",\n disabled = false,\n leftIcon,\n rightIcon,\n icon,\n fullWidth = false,\n style,\n accessibilityLabel,\n testID,\n onClick,\n className,\n onMouseEnter,\n onMouseLeave,\n onMouseDown,\n onMouseUp,\n}) => {\n const isIconOnly = !!icon;\n\n // Create icon components from icon names\n const leftIconComponent = leftIcon ? (\n <Icon name={leftIcon} size={size === \"large\" ? 20 : 16} />\n ) : null;\n const rightIconComponent = rightIcon ? (\n <Icon name={rightIcon} size={size === \"large\" ? 20 : 16} />\n ) : null;\n const iconButton = icon ? (\n <Icon name={icon} size={size === \"large\" ? 20 : 16} />\n ) : null;\n\n const [buttonState, setButtonState] = useState<ButtonState>(\n disabled ? \"disabled\" : \"default\"\n );\n\n const hasBothIcons = leftIcon && rightIcon;\n\n // Base button styles\n const getBaseStyles = (): React.CSSProperties => {\n const baseStyle: React.CSSProperties = {\n display: isIconOnly ? \"inline-flex\" : \"flex\",\n width: isIconOnly ? \"auto\" : fullWidth ? \"100%\" : \"9.375rem\",\n height: size === \"large\" ? \"2.75rem\" : \"2rem\",\n padding:\n type === \"ghost\"\n ? \"var(--spacing-0, 0rem)\"\n : \"var(--component-card-sm, 0.75rem)\",\n justifyContent: \"center\",\n alignItems: \"center\",\n gap: hasBothIcons\n ? \"var(--layout-spacing-inline-md, 1rem)\"\n : \"var(--layout-spacing-inline-xs, 0.5rem)\",\n flexShrink: 0,\n borderRadius: \"var(--button-full, 62.4375rem)\",\n cursor: disabled ? \"not-allowed\" : \"pointer\",\n opacity: disabled ? 0.6 : 1,\n transition: \"all 0.2s ease-in-out\",\n border: \"none\",\n };\n\n // Apply styles based on type and state\n switch (type) {\n case \"primary\":\n switch (buttonState) {\n case \"default\":\n baseStyle.background = \"var(--action-primary-default, #00DF88)\";\n break;\n case \"hover\":\n baseStyle.background = \"var(--action-primary-hover, #4CE9AC)\";\n break;\n case \"active\":\n baseStyle.background = \"var(--action-primary-active, #98F2CF)\";\n break;\n case \"disabled\":\n baseStyle.background = \"var(--action-primary-disabled, #00DF88)\";\n baseStyle.opacity = 0.6;\n break;\n }\n break;\n case \"outline\":\n baseStyle.background = \"transparent\";\n switch (buttonState) {\n case \"default\":\n baseStyle.border =\n \"var(--button-default, 1px) solid var(--action-tertiary-default, #3B3B3B)\";\n break;\n case \"hover\":\n baseStyle.border =\n \"var(--button-hover, 2px) solid var(--action-tertiary-hover, #111)\";\n break;\n case \"active\":\n baseStyle.border =\n \"var(--button-pressed, 2px) solid var(--action-tertiary-active, #ABABAB)\";\n break;\n case \"disabled\":\n baseStyle.border =\n \"var(--button-default, 1px) solid var(--action-tertiary-disabled, #3B3B3B)\";\n baseStyle.opacity = 0.6;\n break;\n }\n break;\n case \"ghost\":\n baseStyle.background = \"transparent\";\n break;\n case \"destructive\":\n baseStyle.background = \"transparent\";\n switch (buttonState) {\n case \"default\":\n baseStyle.color = \"var(--action-destructive-hover, #FF3B30)\";\n break;\n case \"hover\":\n baseStyle.color = \"var(--action-destructive-default, #D60000)\";\n break;\n case \"active\":\n baseStyle.color = \"var(--action-destructive-active, #FF6259)\";\n break;\n case \"disabled\":\n baseStyle.color = \"var(--action-destructive-disabled, #D60000)\";\n baseStyle.opacity = 0.6;\n break;\n }\n break;\n }\n\n return { ...baseStyle, ...style };\n };\n\n const getTextStyles = (): React.CSSProperties => {\n const textStyle: React.CSSProperties = {\n fontFamily:\n 'system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif',\n fontWeight: 500,\n fontSize: size === \"large\" ? \"1rem\" : \"0.875rem\",\n transition: \"all 0.2s ease-in-out\",\n };\n\n switch (type) {\n case \"primary\":\n textStyle.color = \"var(--neutral-80, #3B3B3B)\";\n break;\n case \"outline\":\n switch (buttonState) {\n case \"default\":\n textStyle.color = \"var(--action-tertiary-default, #3B3B3B)\";\n break;\n case \"hover\":\n textStyle.color = \"var(--action-tertiary-hover, #111)\";\n break;\n case \"active\":\n textStyle.color = \"var(--action-tertiary-active, #ABABAB)\";\n break;\n case \"disabled\":\n textStyle.color = \"var(--action-tertiary-disabled, #3B3B3B)\";\n break;\n }\n break;\n case \"ghost\":\n switch (buttonState) {\n case \"default\":\n textStyle.color = \"var(--action-tertiary-default, #3B3B3B)\";\n break;\n case \"hover\":\n textStyle.color = \"var(--action-tertiary-hover, #111)\";\n break;\n case \"active\":\n textStyle.color = \"var(--action-tertiary-active, #ABABAB)\";\n break;\n case \"disabled\":\n textStyle.color = \"var(--action-tertiary-disabled, #3B3B3B)\";\n break;\n }\n break;\n case \"destructive\":\n break;\n }\n\n return textStyle;\n };\n\n // Icon styles\n const getIconStyles = (): React.CSSProperties => {\n return {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n color: \"currentColor\",\n };\n };\n\n // Event handlers for state changes\n const handleMouseEnter = (e: React.MouseEvent<HTMLButtonElement>) => {\n if (!disabled) {\n setButtonState(\"hover\");\n onMouseEnter && onMouseEnter(e);\n }\n };\n\n const handleMouseLeave = (e: React.MouseEvent<HTMLButtonElement>) => {\n if (!disabled) {\n setButtonState(\"default\");\n onMouseLeave && onMouseLeave(e);\n }\n };\n\n const handleMouseDown = (e: React.MouseEvent<HTMLButtonElement>) => {\n if (!disabled) {\n setButtonState(\"active\");\n onMouseDown && onMouseDown(e);\n }\n };\n\n const handleMouseUp = (e: React.MouseEvent<HTMLButtonElement>) => {\n if (!disabled) {\n setButtonState(\"hover\");\n onMouseUp && onMouseUp(e);\n }\n };\n\n return (\n <button\n style={getBaseStyles()}\n onClick={onClick}\n disabled={disabled}\n aria-label={accessibilityLabel || label}\n data-testid={testID}\n className={className}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n onMouseDown={handleMouseDown}\n onMouseUp={handleMouseUp}\n >\n {!isIconOnly && leftIcon && (\n <span style={getIconStyles()} className=\"button-left-icon\">\n {leftIconComponent}\n </span>\n )}\n\n {!isIconOnly && <span style={getTextStyles()}>{label}</span>}\n\n {isIconOnly && <span style={getIconStyles()}>{iconButton}</span>}\n\n {!isIconOnly && rightIcon && (\n <span style={getIconStyles()} className=\"button-right-icon\">\n {rightIconComponent}\n </span>\n )}\n </button>\n );\n};\n","import React from \"react\";\nimport typographyTokens from \"../../styles/tokens/typography\";\nimport { DisplayProps } from \"../../types/Typography\";\n\nexport const Display: React.FC<DisplayProps> = ({\n size = \"2xl\",\n element = \"h1\",\n align = \"left\",\n weight,\n color,\n truncate = false,\n lineClamp,\n children,\n className = \"\",\n style = {},\n onClick,\n testID,\n ...rest\n}) => {\n const getStyles = (): React.CSSProperties => {\n const tokenSet =\n size === \"2xl\" ? typographyTokens.display2xl : typographyTokens.displayXl;\n\n let fontWeightValue = parseInt(tokenSet.fontWeight);\n if (weight) {\n if (weight === \"normal\") fontWeightValue = 400;\n else if (weight === \"medium\") fontWeightValue = 500;\n else if (weight === \"semibold\") fontWeightValue = 600;\n else if (weight === \"bold\") fontWeightValue = 700;\n }\n\n const baseStyles: React.CSSProperties = {\n fontFamily: tokenSet.fontFamily,\n fontSize: `${tokenSet.fontSize}px`,\n lineHeight: `${tokenSet.lineHeight}px`,\n fontWeight: fontWeightValue,\n color: color || tokenSet.color,\n textAlign: align,\n letterSpacing: tokenSet.letterSpacing,\n textDecoration: tokenSet.textDecoration || \"none\",\n };\n\n if (truncate) {\n baseStyles.whiteSpace = \"nowrap\";\n baseStyles.overflow = \"hidden\";\n baseStyles.textOverflow = \"ellipsis\";\n baseStyles.display = \"block\";\n }\n\n if (lineClamp && lineClamp > 0) {\n baseStyles.display = \"-webkit-box\";\n baseStyles.WebkitLineClamp = lineClamp;\n baseStyles.WebkitBoxOrient = \"vertical\";\n baseStyles.overflow = \"hidden\";\n baseStyles.textOverflow = \"ellipsis\";\n }\n\n return baseStyles;\n };\n\n const combinedStyles = {\n ...getStyles(),\n ...style,\n };\n\n const Component = element as React.ElementType;\n\n return (\n <Component\n style={combinedStyles}\n className={className}\n data-testid={testID}\n onClick={onClick}\n {...rest}\n >\n {children}\n </Component>\n );\n};\n","import React from \"react\";\nimport typographyTokens from \"../../styles/tokens/typography\";\nimport { HeadingProps, TypographyWeight } from \"../../types/Typography\";\n\ntype HeadingTokenKey =\n | \"headingXl\"\n | \"headingLg\"\n | \"headingMd\"\n | \"headingSm\"\n | \"headingXs\";\n\nexport const Heading: React.FC<HeadingProps> = ({\n size = \"xl\",\n element = \"h2\",\n align = \"left\",\n weight,\n color,\n truncate = false,\n lineClamp,\n children,\n className = \"\",\n style = {},\n onClick,\n testID,\n ...rest\n}) => {\n const getStyles = (): React.CSSProperties => {\n const tokenKeyMap: Record<string, HeadingTokenKey> = {\n xl: \"headingXl\",\n lg: \"headingLg\",\n md: \"headingMd\",\n sm: \"headingSm\",\n xs: \"headingXs\",\n };\n\n const tokenSet = typographyTokens[tokenKeyMap[size]];\n\n const fontWeightValue = weight\n ? parseInt(typographyTokens.weights[weight])\n : parseInt(tokenSet.fontWeight);\n\n const baseStyles: React.CSSProperties = {\n fontFamily: tokenSet.fontFamily,\n fontSize: `${tokenSet.fontSize}px`,\n lineHeight: `${tokenSet.lineHeight}px`,\n fontWeight: fontWeightValue,\n color: color || tokenSet.color,\n textAlign: align,\n letterSpacing: tokenSet.letterSpacing,\n textDecoration: tokenSet.textDecoration || \"none\",\n };\n\n const truncationStyles: React.CSSProperties = truncate\n ? {\n whiteSpace: \"nowrap\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n display: \"block\",\n }\n : {};\n\n const lineClampStyles: React.CSSProperties =\n lineClamp && lineClamp > 0\n ? {\n display: \"-webkit-box\",\n WebkitLineClamp: lineClamp,\n WebkitBoxOrient: \"vertical\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n }\n : {};\n\n return {\n ...baseStyles,\n ...truncationStyles,\n ...lineClampStyles,\n };\n };\n\n const combinedStyles = {\n ...getStyles(),\n ...style,\n };\n\n const linkProps = element === \"a\" ? rest : {};\n\n const headingElementMap: Record<string, React.ElementType> = {\n xl: \"h1\",\n lg: \"h2\",\n md: \"h3\",\n sm: \"h4\",\n xs: \"h5\",\n };\n\n const defaultElement = element === \"h2\" ? headingElementMap[size] : element;\n\n const Component = defaultElement as React.ElementType;\n\n return (\n <Component\n style={combinedStyles}\n className={className}\n data-testid={testID}\n onClick={onClick}\n {...linkProps}\n >\n {children}\n </Component>\n );\n};\n","import React from 'react';\nimport { Icon, icons, IconData } from './Icon';\n\nexport interface IconListProps {\n /**\n * Search query to filter icons\n */\n searchQuery?: string;\n\n /**\n * Size of each icon\n */\n iconSize?: number;\n\n /**\n * Color of each icon\n */\n iconColor?: string;\n\n /**\n * Function to handle when an icon is clicked\n */\n onIconClick?: (iconName: string) => void;\n}\n\nexport const IconList: React.FC<IconListProps> = ({\n searchQuery = '',\n iconSize = 24,\n iconColor = 'currentColor',\n onIconClick,\n}) => {\n // Filter icons based on the search query\n const filteredIcons = searchQuery\n ? icons.filter(icon => \n icon.name.toLowerCase().includes(searchQuery.toLowerCase())\n )\n : icons;\n\n const handleIconClick = (iconName: string) => {\n if (onIconClick) {\n onIconClick(iconName);\n }\n };\n\n return (\n <div>\n {filteredIcons.length === 0 ? (\n <div style={{ padding: '20px', textAlign: 'center' }}>\n No icons found matching \"{searchQuery}\"\n </div>\n ) : (\n <div\n style={{\n display: 'grid',\n gridTemplateColumns: 'repeat(auto-fill, minmax(100px, 1fr))',\n gap: '20px',\n }}\n >\n {filteredIcons.map((icon: IconData) => (\n <div\n key={icon.name}\n style={{\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n padding: '12px',\n border: '1px solid #eee',\n borderRadius: '8px',\n cursor: onIconClick ? 'pointer' : 'default',\n transition: 'all 0.2s ease-in-out',\n }}\n onClick={() => handleIconClick(icon.name)}\n onMouseOver={(e) => {\n e.currentTarget.style.backgroundColor = '#f9f9f9';\n e.currentTarget.style.transform = 'translateY(-2px)';\n e.currentTarget.style.boxShadow = '0 2px 8px rgba(0,0,0,0.05)';\n }}\n onMouseOut={(e) => {\n e.currentTarget.style.backgroundColor = 'transparent';\n e.currentTarget.style.transform = 'translateY(0)';\n e.currentTarget.style.boxShadow = 'none';\n }}\n >\n <div\n style={{\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n height: '50px',\n marginBottom: '8px',\n }}\n >\n <Icon name={icon.name} size={iconSize} color={iconColor} />\n </div>\n <div\n style={{\n fontSize: '12px',\n textAlign: 'center',\n wordBreak: 'break-word',\n }}\n >\n {icon.name}\n </div>\n </div>\n ))}\n </div>\n )}\n </div>\n );\n};\n","import React from \"react\";\nimport typographyTokens from \"../../styles/tokens/typography\";\nimport { UtilityProps } from \"../../types/Typography\";\n\nexport const Utility: React.FC<UtilityProps> = ({\n variant = \"button\",\n element,\n align = \"left\",\n weight,\n color,\n truncate = false,\n lineClamp,\n children,\n className = \"\",\n style = {},\n onClick,\n testID,\n ...rest\n}) => {\n const getDefaultElement = () => {\n switch (variant) {\n case \"button\":\n return \"span\";\n case \"link\":\n return \"a\";\n case \"caption\":\n return \"span\";\n default:\n return \"span\";\n }\n };\n\n const elementToUse = element || getDefaultElement();\n\n const getStyles = (): React.CSSProperties => {\n let tokenSet;\n switch (variant) {\n case \"button\":\n tokenSet = typographyTokens.labelLg;\n break;\n case \"link\":\n tokenSet = typographyTokens.labelMd;\n break;\n case \"caption\":\n tokenSet = typographyTokens.labelSm;\n break;\n }\n\n let fontWeightValue = parseInt(tokenSet.fontWeight);\n if (weight) {\n if (weight === \"normal\") fontWeightValue = 400;\n else if (weight === \"medium\") fontWeightValue = 500;\n else if (weight === \"semibold\") fontWeightValue = 600;\n else if (weight === \"bold\") fontWeightValue = 700;\n }\n\n const baseStyles: React.CSSProperties = {\n fontFamily: tokenSet.fontFamily,\n fontSize: `${tokenSet.fontSize}px`,\n lineHeight: `${tokenSet.lineHeight}px`,\n fontWeight: fontWeightValue,\n color: color || tokenSet.color,\n textAlign: align,\n letterSpacing: tokenSet.letterSpacing,\n textDecoration:\n variant === \"link\" ? \"underline\" : tokenSet.textDecoration || \"none\",\n };\n\n if (truncate) {\n baseStyles.whiteSpace = \"nowrap\";\n baseStyles.overflow = \"hidden\";\n baseStyles.textOverflow = \"ellipsis\";\n baseStyles.display = \"block\";\n }\n\n if (lineClamp && lineClamp > 0) {\n baseStyles.display = \"-webkit-box\";\n baseStyles.WebkitLineClamp = lineClamp;\n baseStyles.WebkitBoxOrient = \"vertical\";\n baseStyles.overflow = \"hidden\";\n baseStyles.textOverflow = \"ellipsis\";\n }\n\n return baseStyles;\n };\n\n const combinedStyles = {\n ...getStyles(),\n ...style,\n };\n\n const linkProps = elementToUse === \"a\" ? rest : {};\n\n const Component = elementToUse as React.ElementType;\n\n return (\n <Component\n style={combinedStyles}\n className={className}\n data-testid={testID}\n onClick={onClick}\n {...linkProps}\n >\n {children}\n </Component>\n );\n};\n"],"names":["icons","iconMap","Map","forEach","icon","set","name","Icon","size","color","className","style","onClick","ariaLabel","iconInfo","get","console","warn","paths","path","split","map","index","combinedStyle","display","verticalAlign","_jsx","jsx","width","height","viewBox","fill","xmlns","role","children","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin","TEXT_TERTIARY","TEXT_BODY","TEXT_HEADER","UTILITY_CAPTION_FONT_FAMILY","UTILITY_CAPTION_FONT_WEIGHT","UTILITY_CAPTION_LINE_HEIGHT","UTILITY_CAPTION_FONT_SIZE","UTILITY_CAPTION_TEXT_CASE","UTILITY_CAPTION_TEXT_DECORATION","pxToNumber","pxValue","parseFloat","replace","normalizeFontWeight","weight","toString","typographyTokens","display2xl","fontFamily","fontSize","fontWeight","lineHeight","tokens.TEXT_HEADER","letterSpacing","textDecoration","textCase","displayXl","headingXl","headingLg","headingMd","headingSm","headingXs","bodyXl","tokens.TEXT_BODY","paragraphIndent","bodyLg","bodyMd","bodySm","bodyXs","tokens.UTILITY_CAPTION_FONT_FAMILY","tokens.UTILITY_CAPTION_FONT_SIZE","tokens.UTILITY_CAPTION_FONT_WEIGHT","tokens.UTILITY_CAPTION_LINE_HEIGHT","tokens.UTILITY_CAPTION_TEXT_DECORATION","tokens.UTILITY_CAPTION_TEXT_CASE","labelLg","tokens.TEXT_TERTIARY","labelMd","labelSm","weights","normal","medium","semibold","bold","defaultTheme","colors","primary","secondary","background","surface","text","textSecondary","border","error","warning","success","spacing","xs","sm","md","lg","xl","borderRadius","none","full","typography","xxl","tight","relaxed","ThemeContext","createContext","undefined","element","align","truncate","lineClamp","testID","rest","combinedStyles","tokenSet","fontWeightValue","parseInt","baseStyles","textAlign","whiteSpace","overflow","textOverflow","WebkitLineClamp","WebkitBoxOrient","getStyles","linkProps","Component","label","type","disabled","leftIcon","rightIcon","fullWidth","accessibilityLabel","onMouseEnter","onMouseLeave","onMouseDown","onMouseUp","isIconOnly","leftIconComponent","rightIconComponent","iconButton","buttonState","setButtonState","useState","hasBothIcons","_jsxs","baseStyle","padding","justifyContent","alignItems","gap","flexShrink","cursor","opacity","transition","getBaseStyles","e","textStyle","getTextStyles","searchQuery","iconSize","iconColor","onIconClick","filteredIcons","filter","toLowerCase","includes","length","gridTemplateColumns","flexDirection","handleIconClick","iconName","onMouseOver","currentTarget","backgroundColor","transform","boxShadow","onMouseOut","marginBottom","wordBreak","theme","customTheme","React","useMemo","_a","_b","_c","updateTheme","useCallback","newTheme","log","Provider","value","variant","elementToUse","getDefaultElement","context","useContext","Error"],"mappings":"6MAgDa,MAAAA,kvGAGPC,EAAU,IAAIC,IACpBF,EAAMG,SAASC,IACbH,EAAQI,IAAID,EAAKE,KAAMF,MAGlB,MAAMG,EAA4B,EACvCD,OACAE,OAAO,GACPC,QAAQ,eACRC,YAAY,GACZC,QAAQ,CAAE,EACVC,UACAC,gBAGA,MAAMC,EAAWb,EAAQc,IAAIT,GAG7B,IAAKQ,EAEH,OADAE,QAAQC,KAAK,SAASX,gBACf,KAIT,MAAMY,EAAQJ,EAASK,KAAKC,MAAM,OAAOC,KAAI,CAACF,EAAMG,IACxC,IAAVA,EAAcH,EAAO,KAAKA,MAItBI,EAAqC,CACzCC,QAAS,eACTC,cAAe,YACZd,GAGL,OACEe,EACEC,IAAA,MAAA,CAAAC,MAAOpB,EACPqB,OAAQrB,EACRsB,QAAShB,EAASgB,QAClBC,KAAK,OACLC,MAAM,6BACNtB,UAAWA,EACXC,MAAOY,EACPX,QAASA,EAAO,aACJC,GAAa,GAAGP,SAC5B2B,KAAK,MAEJC,SAAAhB,EAAMG,KAAI,CAACF,EAAMG,IAChBI,EAAAA,IAAA,OAAA,CAEES,EAAGhB,EACHiB,OAAQtB,EAASiB,KAAO,OAAStB,EACjCsB,KAAMjB,EAASiB,KAAOtB,EAAQ,OAC9B4B,YAAY,MACZC,cAAc,QACdC,eAAe,SANVjB,QCcFkB,EAAgB,UAChBC,EAAY,UACZC,EAAc,OAmMdC,EAA8B,UAC9BC,EAA8B,OAC9BC,EAA8B,OAC9BC,EAA4B,OAG5BC,EAA4B,OAC5BC,EAAkC,OChTlCC,EAAcC,GACpBA,GAA8B,iBAAZA,EAChBC,WAAWD,EAAQE,QAAQ,KAAM,KADY,ECRzCC,EAAuBC,GACZ,iBAAXA,EACFA,EAAOC,WAGD,SAAXD,EACK,MAGFA,ECZIE,EAAmB,CAE9BC,WAAY,CACVC,WHgMmC,UG/LnCC,SAAUV,EHkMuB,QGjMjCW,WAAYP,EH+LuB,KG9LnCQ,WAAYZ,EHsTe,QGrT3BxC,MAAOqD,EACPC,cH+LsC,KG9LtCC,eHiMuC,OGhMvCC,SH+LiC,QG7LnCC,UAAW,CACTR,WH8LkC,UG7LlCC,SAAUV,EHgMsB,QG/LhCW,WAAYP,EH6LsB,KG5LlCQ,WAAYZ,EH6Se,QG5S3BxC,MAAOqD,EACPC,cH6LqC,KG5LrCC,eH+LsC,OG9LtCC,SH6LgC,QGzLlCE,UAAW,CACTT,WH0LkC,UGzLlCC,SAAUV,EH4LsB,QG3LhCW,WAAYP,EHyLsB,KGxLlCQ,WAAYZ,EHkSe,QGjS3BxC,MAAOqD,EACPC,cHyLqC,KGxLrCC,eH2LsC,OG1LtCC,SHyLgC,QGvLlCG,UAAW,CACTV,WHwLkC,UGvLlCC,SAAUV,EH0LsB,QGzLhCW,WAAYP,EHuLsB,KGtLlCQ,WAAYZ,EHyRe,QGxR3BxC,MAAOqD,EACPC,cHuLqC,KGtLrCC,eHyLsC,OGxLtCC,SHuLgC,QGrLlCI,UAAW,CACTX,WHsLkC,UGrLlCC,SAAUV,EHwLsB,QGvLhCW,WAAYP,EHqLsB,KGpLlCQ,WAAYZ,EHgRe,QG/Q3BxC,MAAOqD,EACPC,cHqLqC,KGpLrCC,eHuLsC,OGtLtCC,SHqLgC,QGnLlCK,UAAW,CACTZ,WHoLkC,UGnLlCC,SAAUV,EHsLsB,QGrLhCW,WAAYP,EHmLsB,KGlLlCQ,WAAYZ,EHuQc,QGtQ1BxC,MAAOqD,EACPC,cHmLqC,KGlLrCC,eHqLsC,OGpLtCC,SHmLgC,QGjLlCM,UAAW,CACTb,WHkLkC,UGjLlCC,SAAUV,EHoLsB,QGnLhCW,WAAYP,EHiLsB,KGhLlCQ,WAAYZ,EH8Pc,QG7P1BxC,MAAOqD,EACPC,cHiLqC,KGhLrCC,eHmLsC,OGlLtCC,SHiLgC,QG7KlCO,OAAQ,CACNd,WHsL+B,UGrL/BC,SAAUV,EHwLmB,QGvL7BW,WAAYP,EHqLmB,QGpL/BQ,WAAYZ,EHqLmB,QGpL/BxC,MAAOgE,EACPV,cHqLkC,KGpLlCC,eHuLmC,OGtLnCC,SHqL6B,OGpL7BS,gBHmLoC,OGjLtCC,OAAQ,CACNjB,WHmL+B,UGlL/BC,SAAUV,EHqLmB,QGpL7BW,WAAYP,EHkLmB,QGjL/BQ,WAAYZ,EHkLmB,QGjL/BxC,MAAOgE,EACPV,cHkLkC,KGjLlCC,eHoLmC,OGnLnCC,SHkL6B,OGjL7BS,gBHgLoC,OG9KtCE,OAAQ,CACNlB,WHgL+B,UG/K/BC,SAAUV,EHkLmB,QGjL7BW,WAAYP,EH+K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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/components/Icon/Icon.tsx","../src/styles/tokens/tokens.ts","../src/styles/tokens/utils/utils.ts","../src/styles/tokens/utils/fontUtils.ts","../src/styles/tokens/typography.ts","../src/theme/index.ts","../src/theme/ThemeProvider.tsx","../src/components/Typography/Body.tsx","../src/components/Button/Button.tsx","../src/components/Typography/Display.tsx","../src/components/Typography/Heading.tsx","../src/components/Icon/IconList.tsx","../src/components/Typography/Utility.tsx"],"sourcesContent":["import React from 'react';\nimport iconData from './icons.json';\n\nexport interface IconProps {\n /**\n * Name of the icon to display\n */\n name: string;\n\n /**\n * Size of the icon in pixels\n */\n size?: number;\n\n /**\n * Color of the icon\n */\n color?: string;\n\n /**\n * Optional CSS class name\n */\n className?: string;\n\n /**\n * Optional style overrides\n */\n style?: React.CSSProperties;\n\n /**\n * Optional click handler\n */\n onClick?: React.MouseEventHandler<SVGSVGElement>;\n\n /**\n * Aria label for accessibility\n */\n ariaLabel?: string;\n}\n\nexport interface IconData {\n name: string;\n path: string;\n viewBox: string;\n fill?: string;\n}\n\n// Export icon data for use in other components\nexport const icons: IconData[] = iconData.icons;\n\n// Create a map of icon names to icon data for quick lookup\nconst iconMap = new Map<string, IconData>();\nicons.forEach((icon) => {\n iconMap.set(icon.name, icon);\n});\n\nexport const Icon: React.FC<IconProps> = ({\n name,\n size = 24,\n color = 'currentColor',\n className = '',\n style = {},\n onClick,\n ariaLabel,\n}) => {\n // Find the icon data for the given name\n const iconInfo = iconMap.get(name);\n\n // If the icon doesn't exist, return null or a fallback\n if (!iconInfo) {\n console.warn(`Icon \"${name}\" not found`);\n return null;\n }\n\n // Split the path string into multiple paths if it contains multiple commands\n const paths = iconInfo.path.split(' M ').map((path, index) => \n index === 0 ? path : `M ${path}`\n );\n\n // Combine the style props\n const combinedStyle: React.CSSProperties = {\n display: 'inline-block',\n verticalAlign: 'middle',\n ...style,\n };\n\n return (\n <svg\n width={size}\n height={size}\n viewBox={iconInfo.viewBox}\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className={className}\n style={combinedStyle}\n onClick={onClick}\n aria-label={ariaLabel || `${name} icon`}\n role=\"img\"\n >\n {paths.map((path, index) => (\n <path\n key={index}\n d={path}\n stroke={iconInfo.fill ? 'none' : color}\n fill={iconInfo.fill ? color : 'none'}\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n ))}\n </svg>\n );\n};\n","/**\n * File generated by the Figma Token Engine\n * Do not edit directly\n */\n\nexport const BORDER_RADIUS_TOOLTIP_DEFAULT = \"0.25rem\";\nexport const BORDER_RADIUS_POPOVER_DEFAULT = \"0.5rem\";\nexport const BORDER_RADIUS_TAG_SM = \"0.25rem\";\nexport const BORDER_RADIUS_TAG_XL = \"62.4rem\";\nexport const BORDER_RADIUS_BUTTON_SM = \"0.25rem\";\nexport const BORDER_RADIUS_BUTTON_FULL = \"62.4rem\";\nexport const BORDER_RADIUS_INPUT_SM = \"0.25rem\";\nexport const BORDER_RADIUS_INPUT_LG = \"0.5rem\";\nexport const BORDER_RADIUS_CARD_SM = \"0.25rem\";\nexport const BORDER_RADIUS_CARD_MD = \"0.5rem\";\nexport const BORDER_RADIUS_CARD_LG = \"0.75rem\";\nexport const BORDER_RADIUS_MODAL_LG = \"0.75rem\";\nexport const BORDER_RADIUS_MODAL_XL = \"1rem\";\nexport const BORDER_RADIUS_NONE = 0;\nexport const BORDER_RADIUS_XS = \"0.25rem\";\nexport const BORDER_RADIUS_SM = \"0.5rem\";\nexport const BORDER_RADIUS_MD = \"0.75rem\";\nexport const BORDER_RADIUS_LG = \"1rem\";\nexport const BORDER_RADIUS_XL = \"1.25rem\";\nexport const BORDER_RADIUS_2XL = \"1.5rem\";\nexport const BORDER_RADIUS_3XL = \"1.75rem\";\nexport const BORDER_RADIUS_FULL = \"62.4rem\";\nexport const BORDER_WIDTH_BUTTON_DEFAULT = \"0.0625rem\";\nexport const BORDER_WIDTH_BUTTON_HOVER = \"0.125rem\";\nexport const BORDER_WIDTH_BUTTON_PRESSED = \"0.125rem\";\nexport const BORDER_WIDTH_INPUT_DEFAULT = \"0.0625rem\";\nexport const BORDER_WIDTH_INPUT_FOCUS = \"0.125rem\";\nexport const BORDER_WIDTH_INPUT_ERROR = \"0.125rem\";\nexport const BORDER_WIDTH_CARD_DEFAULT = \"0.0625rem\";\nexport const BORDER_WIDTH_CARD_HOVER = \"0.125rem\";\nexport const BORDER_WIDTH_NONE = 0;\nexport const BORDER_WIDTH_XS = \"0.0625rem\";\nexport const BORDER_WIDTH_SM = \"0.125rem\";\nexport const BORDER_WIDTH_MD = \"0.25rem\";\nexport const BORDER_GREEN = \"#00df88\";\nexport const BORDER_BLUE = \"#0053e2\";\nexport const BORDER_YELLOW = \"#f4b400\";\nexport const BORDER_RED = \"#a90000\";\nexport const BORDER_DARK = \"#111\";\nexport const BORDER_LIGHT = \"#e2e2e2\";\nexport const BORDER_LIGHTER = \"#f1f1f1\";\nexport const LAYOUT_SPACING_INLINE_NONE = 0;\nexport const LAYOUT_SPACING_INLINE_3XS = \"0.125rem\";\nexport const LAYOUT_SPACING_INLINE_2XS = \"0.25rem\";\nexport const LAYOUT_SPACING_INLINE_XS = \"0.5rem\";\nexport const LAYOUT_SPACING_INLINE_SM = \"0.75rem\";\nexport const LAYOUT_SPACING_INLINE_MD = \"1rem\";\nexport const LAYOUT_SPACING_INLINE_LG = \"2rem\";\nexport const LAYOUT_SPACING_INLINE_XL = \"2.5rem\";\nexport const LAYOUT_SPACING_INLINE_2XL = \"5rem\";\nexport const LAYOUT_SPACING_STACK_NONE = 0;\nexport const LAYOUT_SPACING_STACK_3XS = \"0.125rem\";\nexport const LAYOUT_SPACING_STACK_2XS = \"0.25rem\";\nexport const LAYOUT_SPACING_STACK_XS = \"0.5rem\";\nexport const LAYOUT_SPACING_STACK_SM = \"0.75rem\";\nexport const LAYOUT_SPACING_STACK_MD = \"1rem\";\nexport const LAYOUT_SPACING_STACK_LG = \"2rem\";\nexport const LAYOUT_SPACING_STACK_XL = \"2.5rem\";\nexport const LAYOUT_SPACING_STACK_2XL = \"5rem\";\nexport const SECTION_SPACING_SM = \"1.5rem\";\nexport const SECTION_SPACING_MD = \"1.75rem\";\nexport const SECTION_SPACING_LG = \"2rem\";\nexport const SECTION_SPACING_XL = \"2.5rem\";\nexport const SECTION_SPACING_2XL = \"3.5rem\";\nexport const SECTION_SPACING_3XL = \"5rem\";\nexport const COMPONENT_CARD_SM = \"0.75rem\";\nexport const COMPONENT_CARD_MD = \"1.25rem\";\nexport const COMPONENT_CARD_LG = \"1.5rem\";\nexport const COMPONENT_CARD_XL = \"2rem\";\nexport const COMPONENT_CARD_2XL = \"2.5rem\";\nexport const COMPONENT_MODAL_SM = \"1.25rem\";\nexport const COMPONENT_MODAL_MD = \"1.5rem\";\nexport const COMPONENT_MODAL_LG = \"1.75rem\";\nexport const SPACE_0 = 0;\nexport const SPACE_3XS = \"0.125rem\";\nexport const SPACE_2XS = \"0.25rem\";\nexport const SPACE_XS = \"0.5rem\";\nexport const SPACE_SM = \"0.75rem\";\nexport const SPACE_MD = \"1rem\";\nexport const SPACE_LG = \"1.25rem\";\nexport const SPACE_XL = \"1.5rem\";\nexport const SPACE_2XL = \"1.75rem\";\nexport const SPACE_3XL = \"2rem\";\nexport const SPACE_4XL = \"2.5rem\";\nexport const SPACE_5XL = \"3rem\";\nexport const SPACE_6XL = \"3.5rem\";\nexport const SPACE_7XL = \"4rem\";\nexport const SPACE_8XL = \"5rem\";\nexport const XS = \"0.75rem\";\nexport const S = \"1rem\";\nexport const MD = \"1.25rem\";\nexport const LG = \"1.5rem\";\nexport const XL = \"1.75rem\";\nexport const XXL = \"2rem\";\nexport const BACKGROUND_YELLOW_LIGHT = \"#fff5d9\";\nexport const BACKGROUND_YELLOW_MEDIUM = \"#ffe7a5\";\nexport const BACKGROUND_BLUE_LIGHT = \"#e3ebff\";\nexport const BACKGROUND_BLUE_MEDIUM = \"#c3deff\";\nexport const BACKGROUND_GREEN_LIGHT = \"#E5FCF3\";\nexport const BACKGROUND_GREEN_MEDIUM = \"#ccf9e7\";\nexport const BACKGROUND_GREEN_DARK = \"#00df88\";\nexport const BACKGROUND_RED_LIGHT = \"#feecec\";\nexport const BACKGROUND_RED_MEDIUM = \"#fed8d8\";\nexport const BACKGROUND_WHITE_LIGHT = \"#ffffff\";\nexport const BACKGROUND_NEUTRAL_DARK = \"#111\";\nexport const BACKGROUND_NEUTRAL_GREY = \"#e2e2e2\";\nexport const BACKGROUND_NEUTRAL_LIGHT = \"#f1f1f1\";\nexport const TEXT_INVERSE = \"#ffffff\";\nexport const TEXT_DISABLED = \"#ababab\";\nexport const TEXT_PLACEHOLDER = \"#919191\";\nexport const TEXT_TERTIARY = \"#525252\";\nexport const TEXT_BODY = \"#3b3b3b\";\nexport const TEXT_HEADER = \"#111\";\nexport const TEXT_GREEN = \"#00df88\";\nexport const TEXT_BLUE = \"#0053e2\";\nexport const TEXT_ERROR = \"#a90000\";\nexport const TEXT_YELLOW = \"#f4b400\";\nexport const FEEDBACK_ALERT_SUCCESS = \"#00df88\";\nexport const FEEDBACK_ALERT_ERROR = \"#a90000\";\nexport const FEEDBACK_ALERT_WARNING = \"#fff5d9\";\nexport const FEEDBACK_ALERT_NEUTRAL = \"#111\";\nexport const ACTION_PRIMARY_DEFAULT = \"#00df88\";\nexport const ACTION_PRIMARY_HOVER = \"#4ce9ac\";\nexport const ACTION_PRIMARY_ACTIVE = \"#98f2cf\";\nexport const ACTION_PRIMARY_DISABLED = \"#E5FCF3\";\nexport const ACTION_SECONDARY_DEFAULT = \"#0053e2\";\nexport const ACTION_SECONDARY_HOVER = \"#254cac\";\nexport const ACTION_SECONDARY_ACTIVE = \"#9ec1ff\";\nexport const ACTION_SECONDARY_DISABLED = \"#e3ebff\";\nexport const ACTION_DESTRUCTIVE_DEFAULT = \"#d60000\";\nexport const ACTION_DESTRUCTIVE_HOVER = \"#a90000\";\nexport const ACTION_DESTRUCTIVE_ACTIVE = \"#fed8d8\";\nexport const ACTION_DESTRUCTIVE_DISABLE = \"#feecec\";\nexport const ACTION_TERTIARY_DEFAULT = \"#3b3b3b\";\nexport const ACTION_TERTIARY_HOVER = \"#111\";\nexport const ACTION_TERTIARY_ACTIVE = \"#ababab\";\nexport const ACTION_TERTIARY_DISABLE = \"#f1f1f1\";\nexport const ICON_YELLOW = \"#f4b400\";\nexport const ICON_BLUE = \"#0053e2\";\nexport const ICON_GREEN = \"#00df88\";\nexport const ICON_RED = \"#a90000\";\nexport const ICON_NEUTRAL = \"#111\";\nexport const ICON_LIGHT = \"#e2e2e2\";\nexport const ICON_LIGHTER = \"#f1f1f1\";\nexport const GREEN_10 = \"#E5FCF3\";\nexport const GREEN_20 = \"#ccf9e7\";\nexport const GREEN_30 = \"#B2F5DB\";\nexport const GREEN_40 = \"#98f2cf\";\nexport const GREEN_50 = \"#81efc3\";\nexport const GREEN_60 = \"#66ecb8\";\nexport const GREEN_70 = \"#4ce9ac\";\nexport const GREEN_80 = \"#31e5a0\";\nexport const GREEN_90 = \"#1ae294\";\nexport const GREEN_100 = \"#00df88\";\nexport const NEUTRAL_10 = \"#f1f1f1\";\nexport const NEUTRAL_20 = \"#e2e2e2\";\nexport const NEUTRAL_30 = \"#c6c6c6\";\nexport const NEUTRAL_40 = \"#ababab\";\nexport const NEUTRAL_50 = \"#919191\";\nexport const NEUTRAL_60 = \"#6a6a6a\";\nexport const NEUTRAL_70 = \"#525252\";\nexport const NEUTRAL_80 = \"#3b3b3b\";\nexport const NEUTRAL_90 = \"#262626\";\nexport const NEUTRAL_100 = \"#111\";\nexport const BLUE_10 = \"#e3ebff\";\nexport const BLUE_20 = \"#c3deff\";\nexport const BLUE_30 = \"#9ec1ff\";\nexport const BLUE_40 = \"#5c83fd\";\nexport const BLUE_50 = \"#446ef5\";\nexport const BLUE_60 = \"#0053e2\";\nexport const BLUE_70 = \"#254cac\";\nexport const BLUE_80 = \"#14328d\";\nexport const BLUE_90 = \"#0c285f\";\nexport const BLUE_100 = \"#071e3c\";\nexport const RED_10 = \"#feecec\";\nexport const RED_20 = \"#fed8d8\";\nexport const RED_30 = \"#feb3b3\";\nexport const RED_40 = \"#fe8888\";\nexport const RED_50 = \"#fb5959\";\nexport const RED_60 = \"#d60000\";\nexport const RED_70 = \"#a90000\";\nexport const RED_80 = \"#820000\";\nexport const RED_90 = \"#550000\";\nexport const RED_100 = \"#3a0000\";\nexport const YELLOW_10 = \"#fff5d9\";\nexport const YELLOW_20 = \"#ffe7a5\";\nexport const YELLOW_30 = \"#ffd86b\";\nexport const YELLOW_40 = \"#ffce46\";\nexport const YELLOW_50 = \"#ffc420\";\nexport const YELLOW_60 = \"#f4b400\";\nexport const YELLOW_70 = \"#dba200\";\nexport const YELLOW_80 = \"#c69200\";\nexport const YELLOW_90 = \"#b38400\";\nexport const YELLOW_100 = \"#9a7100\";\nexport const WHITE_10 = \"#ffffff\";\nexport const DISPLAY_2XL_FONT_FAMILY = \"Campton\";\nexport const DISPLAY_2XL_FONT_WEIGHT = 500;\nexport const DISPLAY_2XL_LINE_HEIGHT = \"56px\";\nexport const DISPLAY_2XL_FONT_SIZE = \"52px\";\nexport const DISPLAY_2XL_LETTER_SPACING = \"0%\";\nexport const DISPLAY_2XL_PARAGRAPH_INDENT = \"0px\";\nexport const DISPLAY_2XL_TEXT_CASE = \"none\";\nexport const DISPLAY_2XL_TEXT_DECORATION = \"none\";\nexport const DISPLAY_XL_FONT_FAMILY = \"Campton\";\nexport const DISPLAY_XL_FONT_WEIGHT = 500;\nexport const DISPLAY_XL_LINE_HEIGHT = \"48px\";\nexport const DISPLAY_XL_FONT_SIZE = \"44px\";\nexport const DISPLAY_XL_LETTER_SPACING = \"0%\";\nexport const DISPLAY_XL_PARAGRAPH_INDENT = \"0px\";\nexport const DISPLAY_XL_TEXT_CASE = \"none\";\nexport const DISPLAY_XL_TEXT_DECORATION = \"none\";\nexport const HEADING_XL_FONT_FAMILY = \"Campton\";\nexport const HEADING_XL_FONT_WEIGHT = 600;\nexport const HEADING_XL_LINE_HEIGHT = \"48px\";\nexport const HEADING_XL_FONT_SIZE = \"40px\";\nexport const HEADING_XL_LETTER_SPACING = \"0%\";\nexport const HEADING_XL_PARAGRAPH_INDENT = \"0px\";\nexport const HEADING_XL_TEXT_CASE = \"none\";\nexport const HEADING_XL_TEXT_DECORATION = \"none\";\nexport const HEADING_LG_FONT_FAMILY = \"Campton\";\nexport const HEADING_LG_FONT_WEIGHT = 600;\nexport const HEADING_LG_LINE_HEIGHT = \"44px\";\nexport const HEADING_LG_FONT_SIZE = \"36px\";\nexport const HEADING_LG_LETTER_SPACING = \"0%\";\nexport const HEADING_LG_PARAGRAPH_INDENT = \"0px\";\nexport const HEADING_LG_TEXT_CASE = \"none\";\nexport const HEADING_LG_TEXT_DECORATION = \"none\";\nexport const HEADING_MD_FONT_FAMILY = \"Campton\";\nexport const HEADING_MD_FONT_WEIGHT = 600;\nexport const HEADING_MD_LINE_HEIGHT = \"40px\";\nexport const HEADING_MD_FONT_SIZE = \"32px\";\nexport const HEADING_MD_LETTER_SPACING = \"0%\";\nexport const HEADING_MD_PARAGRAPH_INDENT = \"0px\";\nexport const HEADING_MD_TEXT_CASE = \"none\";\nexport const HEADING_MD_TEXT_DECORATION = \"none\";\nexport const HEADING_SM_FONT_FAMILY = \"Campton\";\nexport const HEADING_SM_FONT_WEIGHT = 600;\nexport const HEADING_SM_LINE_HEIGHT = \"36px\";\nexport const HEADING_SM_FONT_SIZE = \"28px\";\nexport const HEADING_SM_LETTER_SPACING = \"0%\";\nexport const HEADING_SM_PARAGRAPH_INDENT = \"0px\";\nexport const HEADING_SM_TEXT_CASE = \"none\";\nexport const HEADING_SM_TEXT_DECORATION = \"none\";\nexport const HEADING_XS_FONT_FAMILY = \"Campton\";\nexport const HEADING_XS_FONT_WEIGHT = 600;\nexport const HEADING_XS_LINE_HEIGHT = \"28px\";\nexport const HEADING_XS_FONT_SIZE = \"20px\";\nexport const HEADING_XS_LETTER_SPACING = \"0%\";\nexport const HEADING_XS_PARAGRAPH_INDENT = \"0px\";\nexport const HEADING_XS_TEXT_CASE = \"none\";\nexport const HEADING_XS_TEXT_DECORATION = \"none\";\nexport const HEADING_2XS_FONT_FAMILY = \"Campton\";\nexport const HEADING_2XS_FONT_WEIGHT = 600;\nexport const HEADING_2XS_LINE_HEIGHT = \"24px\";\nexport const HEADING_2XS_FONT_SIZE = \"18px\";\nexport const HEADING_2XS_LETTER_SPACING = \"0%\";\nexport const HEADING_2XS_PARAGRAPH_INDENT = \"0px\";\nexport const HEADING_2XS_TEXT_CASE = \"none\";\nexport const HEADING_2XS_TEXT_DECORATION = \"none\";\nexport const BODY_XL_FONT_FAMILY = \"Campton\";\nexport const BODY_XL_FONT_WEIGHT = \"book\";\nexport const BODY_XL_LINE_HEIGHT = \"28px\";\nexport const BODY_XL_FONT_SIZE = \"18px\";\nexport const BODY_XL_LETTER_SPACING = \"0%\";\nexport const BODY_XL_PARAGRAPH_INDENT = \"0px\";\nexport const BODY_XL_TEXT_CASE = \"none\";\nexport const BODY_XL_TEXT_DECORATION = \"none\";\nexport const BODY_LG_FONT_FAMILY = \"Campton\";\nexport const BODY_LG_FONT_WEIGHT = \"book\";\nexport const BODY_LG_LINE_HEIGHT = \"24px\";\nexport const BODY_LG_FONT_SIZE = \"16px\";\nexport const BODY_LG_LETTER_SPACING = \"0%\";\nexport const BODY_LG_PARAGRAPH_INDENT = \"0px\";\nexport const BODY_LG_TEXT_CASE = \"none\";\nexport const BODY_LG_TEXT_DECORATION = \"none\";\nexport const BODY_MD_FONT_FAMILY = \"Campton\";\nexport const BODY_MD_FONT_WEIGHT = \"book\";\nexport const BODY_MD_LINE_HEIGHT = \"20px\";\nexport const BODY_MD_FONT_SIZE = \"14px\";\nexport const BODY_MD_LETTER_SPACING = \"0%\";\nexport const BODY_MD_PARAGRAPH_INDENT = \"0px\";\nexport const BODY_MD_TEXT_CASE = \"none\";\nexport const BODY_MD_TEXT_DECORATION = \"none\";\nexport const BODY_SM_FONT_FAMILY = \"Campton\";\nexport const BODY_SM_FONT_WEIGHT = \"book\";\nexport const BODY_SM_LINE_HEIGHT = \"20px\";\nexport const BODY_SM_FONT_SIZE = \"12px\";\nexport const BODY_SM_LETTER_SPACING = \"0%\";\nexport const BODY_SM_PARAGRAPH_INDENT = \"0px\";\nexport const BODY_SM_TEXT_CASE = \"none\";\nexport const BODY_SM_TEXT_DECORATION = \"none\";\nexport const UTILITY_BUTTON_FONT_FAMILY = \"Campton\";\nexport const UTILITY_BUTTON_FONT_WEIGHT = 500;\nexport const UTILITY_BUTTON_LINE_HEIGHT = \"16px\";\nexport const UTILITY_BUTTON_FONT_SIZE = \"16px\";\nexport const UTILITY_BUTTON_LETTER_SPACING = \"0%\";\nexport const UTILITY_BUTTON_PARAGRAPH_INDENT = \"0px\";\nexport const UTILITY_BUTTON_TEXT_CASE = \"none\";\nexport const UTILITY_BUTTON_TEXT_DECORATION = \"none\";\nexport const UTILITY_LINK_FONT_FAMILY = \"Campton\";\nexport const UTILITY_LINK_FONT_WEIGHT = 500;\nexport const UTILITY_LINK_LINE_HEIGHT = \"20px\";\nexport const UTILITY_LINK_FONT_SIZE = \"14px\";\nexport const UTILITY_LINK_LETTER_SPACING = \"0%\";\nexport const UTILITY_LINK_PARAGRAPH_INDENT = \"0px\";\nexport const UTILITY_LINK_TEXT_CASE = \"none\";\nexport const UTILITY_LINK_TEXT_DECORATION = \"underline\";\nexport const UTILITY_CAPTION_FONT_FAMILY = \"Campton\";\nexport const UTILITY_CAPTION_FONT_WEIGHT = \"book\";\nexport const UTILITY_CAPTION_LINE_HEIGHT = \"16px\";\nexport const UTILITY_CAPTION_FONT_SIZE = \"12px\";\nexport const UTILITY_CAPTION_LETTER_SPACING = \"0%\";\nexport const UTILITY_CAPTION_PARAGRAPH_INDENT = \"0px\";\nexport const UTILITY_CAPTION_TEXT_CASE = \"none\";\nexport const UTILITY_CAPTION_TEXT_DECORATION = \"none\";\nexport const FONT_FAMILIES_CAMPTON = \"Campton\";\nexport const LINE_HEIGHT_6XL = \"56px\";\nexport const LINE_HEIGHT_5XL = \"48px\";\nexport const LINE_HEIGHT_4XL = \"44px\";\nexport const LINE_HEIGHT_3XL = \"40px\";\nexport const LINE_HEIGHT_2XL = \"36px\";\nexport const LINE_HEIGHT_XL = \"32px\";\nexport const LINE_HEIGHT_LG = \"28px\";\nexport const LINE_HEIGHT_MD = \"24px\";\nexport const LINE_HEIGHT_S = \"20px\";\nexport const LINE_HEIGHT_XS = \"16px\";\nexport const MEDIUM = 500;\nexport const SEMI_BOLD = 600;\nexport const BOOK = \"book\";\nexport const FONT_SIZE_2XS = \"14px\";\nexport const FONT_SIZE_3XS = \"12px\";\nexport const FONT_SIZE_XS = \"16px\";\nexport const FONT_SIZE_MD = \"18px\";\nexport const FONT_SIZE_LG = \"20px\";\nexport const FONT_SIZE_XL = \"28px\";\nexport const FONT_SIZE_2XL = \"32px\";\nexport const FONT_SIZE_3XL = \"36px\";\nexport const FONT_SIZE_4XL = \"40px\";\nexport const FONT_SIZE_5XL = \"44px\";\nexport const FONT_SIZE_6XL = \"52px\";\nexport const LETTER_SPACING_0 = \"0%\";\nexport const TEXT_CASE_NONE = \"none\";\nexport const TEXT_DECORATION_NONE = \"none\";\nexport const TEXT_DECORATION_UNDERLINE = \"underline\";\nexport const PARAGRAPH_INDENT_0 = \"0px\";\n","/**\n * Convert rem values to numbers\n * @param remValue The rem value to convert (e.g. \"1.5rem\")\n * @returns The converted number value\n */\nexport const remToNumber = (remValue: string): number => {\n if (!remValue || typeof remValue !== 'string') return 0;\n return parseFloat(remValue.replace('rem', '')) * 16; // Assuming 1rem = 16px\n};\n\n/**\n * Convert px values to numbers\n * @param pxValue The px value to convert (e.g. \"24px\")\n * @returns The converted number value\n */\nexport const pxToNumber = (pxValue: string): number => {\n if (!pxValue || typeof pxValue !== 'string') return 0;\n return parseFloat(pxValue.replace('px', ''));\n};\n","import { pxToNumber } from \"./utils\";\n\n/**\n * Normalizes font weight to a string representation\n * Converts numeric values to string, handles special cases like \"book\"\n * @param weight The font weight value, can be a string or number\n * @returns Normalized font weight as a string\n */\nexport const normalizeFontWeight = (weight: string | number): string => {\n if (typeof weight === \"number\") {\n return weight.toString();\n }\n\n if (weight === \"book\") {\n return \"400\";\n }\n\n return weight;\n};\n\n/**\n * Calculates an appropriate line height based on font size\n * Uses a standard typographic ratio or falls back to a default multiplier\n *\n * @param fontSize The font size in pixels\n * @param ratio Optional ratio to calculate line height (default: 1.5)\n * @returns The calculated line height as a number\n */\nexport const calculateLineHeight = (\n fontSize: string | number,\n ratio: number = 1.5\n): number => {\n const size = typeof fontSize === \"string\" ? pxToNumber(fontSize) : fontSize;\n return Math.round(size * ratio);\n};\n\n/**\n * Converts letter spacing percentage to a pixel value\n * Figma often uses percentage values for letter spacing\n *\n * @param letterSpacing The letter spacing value (e.g. \"0%\", \"2%\")\n * @param fontSize The font size to calculate relative to\n * @returns The letter spacing in pixels as a number\n */\nexport const letterSpacingToPixels = (\n letterSpacing: string,\n fontSize: string | number\n): number => {\n // If letterSpacing is already a pixel value, convert and return\n if (letterSpacing.endsWith(\"px\")) {\n return pxToNumber(letterSpacing);\n }\n\n // Handle percentage values\n if (letterSpacing.endsWith(\"%\")) {\n const percentage = parseFloat(letterSpacing) / 100;\n const size = typeof fontSize === \"string\" ? pxToNumber(fontSize) : fontSize;\n return size * percentage;\n }\n\n // Default to 0 if format is not recognized\n return 0;\n};\n","// This file maps the generated tokens to a structured format for Typography component\nimport * as tokens from \"./tokens\";\nimport { normalizeFontWeight } from \"./utils/fontUtils\";\nimport { pxToNumber } from \"./utils/utils\";\n\nexport const typographyTokens = {\n // Display variants\n display2xl: {\n fontFamily: tokens.DISPLAY_2XL_FONT_FAMILY,\n fontSize: pxToNumber(tokens.DISPLAY_2XL_FONT_SIZE),\n fontWeight: normalizeFontWeight(tokens.DISPLAY_2XL_FONT_WEIGHT),\n lineHeight: pxToNumber(tokens.LINE_HEIGHT_6XL),\n color: tokens.TEXT_HEADER,\n letterSpacing: tokens.DISPLAY_2XL_LETTER_SPACING,\n textDecoration: tokens.DISPLAY_2XL_TEXT_DECORATION,\n textCase: tokens.DISPLAY_2XL_TEXT_CASE,\n },\n displayXl: {\n fontFamily: tokens.DISPLAY_XL_FONT_FAMILY,\n fontSize: pxToNumber(tokens.DISPLAY_XL_FONT_SIZE),\n fontWeight: normalizeFontWeight(tokens.DISPLAY_XL_FONT_WEIGHT),\n lineHeight: pxToNumber(tokens.LINE_HEIGHT_5XL),\n color: tokens.TEXT_HEADER,\n letterSpacing: tokens.DISPLAY_XL_LETTER_SPACING,\n textDecoration: tokens.DISPLAY_XL_TEXT_DECORATION,\n textCase: tokens.DISPLAY_XL_TEXT_CASE,\n },\n\n // Heading variants\n headingXl: {\n fontFamily: tokens.HEADING_XL_FONT_FAMILY,\n fontSize: pxToNumber(tokens.HEADING_XL_FONT_SIZE),\n fontWeight: normalizeFontWeight(tokens.HEADING_XL_FONT_WEIGHT),\n lineHeight: pxToNumber(tokens.LINE_HEIGHT_4XL),\n color: tokens.TEXT_HEADER,\n letterSpacing: tokens.HEADING_XL_LETTER_SPACING,\n textDecoration: tokens.HEADING_XL_TEXT_DECORATION,\n textCase: tokens.HEADING_XL_TEXT_CASE,\n },\n headingLg: {\n fontFamily: tokens.HEADING_LG_FONT_FAMILY,\n fontSize: pxToNumber(tokens.HEADING_LG_FONT_SIZE),\n fontWeight: normalizeFontWeight(tokens.HEADING_LG_FONT_WEIGHT),\n lineHeight: pxToNumber(tokens.LINE_HEIGHT_3XL),\n color: tokens.TEXT_HEADER,\n letterSpacing: tokens.HEADING_LG_LETTER_SPACING,\n textDecoration: tokens.HEADING_LG_TEXT_DECORATION,\n textCase: tokens.HEADING_LG_TEXT_CASE,\n },\n headingMd: {\n fontFamily: tokens.HEADING_MD_FONT_FAMILY,\n fontSize: pxToNumber(tokens.HEADING_MD_FONT_SIZE),\n fontWeight: normalizeFontWeight(tokens.HEADING_MD_FONT_WEIGHT),\n lineHeight: pxToNumber(tokens.LINE_HEIGHT_2XL),\n color: tokens.TEXT_HEADER,\n letterSpacing: tokens.HEADING_MD_LETTER_SPACING,\n textDecoration: tokens.HEADING_MD_TEXT_DECORATION,\n textCase: tokens.HEADING_MD_TEXT_CASE,\n },\n headingSm: {\n fontFamily: tokens.HEADING_SM_FONT_FAMILY,\n fontSize: pxToNumber(tokens.HEADING_SM_FONT_SIZE),\n fontWeight: normalizeFontWeight(tokens.HEADING_SM_FONT_WEIGHT),\n lineHeight: pxToNumber(tokens.LINE_HEIGHT_XL),\n color: tokens.TEXT_HEADER,\n letterSpacing: tokens.HEADING_SM_LETTER_SPACING,\n textDecoration: tokens.HEADING_SM_TEXT_DECORATION,\n textCase: tokens.HEADING_SM_TEXT_CASE,\n },\n headingXs: {\n fontFamily: tokens.HEADING_XS_FONT_FAMILY,\n fontSize: pxToNumber(tokens.HEADING_XS_FONT_SIZE),\n fontWeight: normalizeFontWeight(tokens.HEADING_XS_FONT_WEIGHT),\n lineHeight: pxToNumber(tokens.LINE_HEIGHT_LG),\n color: tokens.TEXT_HEADER,\n letterSpacing: tokens.HEADING_XS_LETTER_SPACING,\n textDecoration: tokens.HEADING_XS_TEXT_DECORATION,\n textCase: tokens.HEADING_XS_TEXT_CASE,\n },\n\n // Body text variants\n bodyXl: {\n fontFamily: tokens.BODY_XL_FONT_FAMILY,\n fontSize: pxToNumber(tokens.BODY_XL_FONT_SIZE),\n fontWeight: normalizeFontWeight(tokens.BODY_XL_FONT_WEIGHT),\n lineHeight: pxToNumber(tokens.BODY_XL_LINE_HEIGHT),\n color: tokens.TEXT_BODY,\n letterSpacing: tokens.BODY_XL_LETTER_SPACING,\n textDecoration: tokens.BODY_XL_TEXT_DECORATION,\n textCase: tokens.BODY_XL_TEXT_CASE,\n paragraphIndent: tokens.BODY_XL_PARAGRAPH_INDENT,\n },\n bodyLg: {\n fontFamily: tokens.BODY_LG_FONT_FAMILY,\n fontSize: pxToNumber(tokens.BODY_LG_FONT_SIZE),\n fontWeight: normalizeFontWeight(tokens.BODY_LG_FONT_WEIGHT),\n lineHeight: pxToNumber(tokens.BODY_LG_LINE_HEIGHT),\n color: tokens.TEXT_BODY,\n letterSpacing: tokens.BODY_LG_LETTER_SPACING,\n textDecoration: tokens.BODY_LG_TEXT_DECORATION,\n textCase: tokens.BODY_LG_TEXT_CASE,\n paragraphIndent: tokens.BODY_LG_PARAGRAPH_INDENT,\n },\n bodyMd: {\n fontFamily: tokens.BODY_MD_FONT_FAMILY,\n fontSize: pxToNumber(tokens.BODY_MD_FONT_SIZE),\n fontWeight: normalizeFontWeight(tokens.BODY_MD_FONT_WEIGHT),\n lineHeight: pxToNumber(tokens.BODY_MD_LINE_HEIGHT),\n color: tokens.TEXT_BODY,\n letterSpacing: tokens.BODY_MD_LETTER_SPACING,\n textDecoration: tokens.BODY_MD_TEXT_DECORATION,\n textCase: tokens.BODY_MD_TEXT_CASE,\n paragraphIndent: tokens.BODY_MD_PARAGRAPH_INDENT,\n },\n bodySm: {\n fontFamily: tokens.BODY_SM_FONT_FAMILY,\n fontSize: pxToNumber(tokens.BODY_SM_FONT_SIZE),\n fontWeight: normalizeFontWeight(tokens.BODY_SM_FONT_WEIGHT),\n lineHeight: pxToNumber(tokens.BODY_SM_LINE_HEIGHT),\n color: tokens.TEXT_BODY,\n letterSpacing: tokens.BODY_SM_LETTER_SPACING,\n textDecoration: tokens.BODY_SM_TEXT_DECORATION,\n textCase: tokens.BODY_SM_TEXT_CASE,\n paragraphIndent: tokens.BODY_SM_PARAGRAPH_INDENT,\n },\n bodyXs: {\n // Map to utility-caption which is our smallest text style in Figma tokens\n fontFamily: tokens.UTILITY_CAPTION_FONT_FAMILY,\n fontSize: pxToNumber(tokens.UTILITY_CAPTION_FONT_SIZE),\n fontWeight: normalizeFontWeight(tokens.UTILITY_CAPTION_FONT_WEIGHT),\n lineHeight: pxToNumber(tokens.UTILITY_CAPTION_LINE_HEIGHT),\n color: tokens.TEXT_BODY,\n letterSpacing: tokens.UTILITY_CAPTION_LETTER_SPACING,\n textDecoration: tokens.UTILITY_CAPTION_TEXT_DECORATION,\n textCase: tokens.UTILITY_CAPTION_TEXT_CASE,\n paragraphIndent: tokens.UTILITY_CAPTION_PARAGRAPH_INDENT,\n },\n\n // Label variants - map to Utility tokens from Figma\n labelLg: {\n // Maps to utility-button\n fontFamily: tokens.UTILITY_BUTTON_FONT_FAMILY,\n fontSize: pxToNumber(tokens.UTILITY_BUTTON_FONT_SIZE),\n fontWeight: normalizeFontWeight(tokens.UTILITY_BUTTON_FONT_WEIGHT),\n lineHeight: pxToNumber(tokens.UTILITY_BUTTON_LINE_HEIGHT),\n color: tokens.TEXT_TERTIARY,\n letterSpacing: tokens.UTILITY_BUTTON_LETTER_SPACING,\n textDecoration: tokens.UTILITY_BUTTON_TEXT_DECORATION,\n textCase: tokens.UTILITY_BUTTON_TEXT_CASE,\n },\n labelMd: {\n // Maps to utility-link\n fontFamily: tokens.UTILITY_LINK_FONT_FAMILY,\n fontSize: pxToNumber(tokens.UTILITY_LINK_FONT_SIZE),\n fontWeight: normalizeFontWeight(tokens.UTILITY_LINK_FONT_WEIGHT),\n lineHeight: pxToNumber(tokens.UTILITY_LINK_LINE_HEIGHT),\n color: tokens.TEXT_TERTIARY,\n letterSpacing: tokens.UTILITY_LINK_LETTER_SPACING,\n textDecoration: tokens.TEXT_DECORATION_NONE, // Override the default underline from utility-link\n textCase: tokens.UTILITY_LINK_TEXT_CASE,\n },\n labelSm: {\n // Maps to utility-caption\n fontFamily: tokens.UTILITY_CAPTION_FONT_FAMILY,\n fontSize: pxToNumber(tokens.UTILITY_CAPTION_FONT_SIZE),\n fontWeight: normalizeFontWeight(tokens.UTILITY_CAPTION_FONT_WEIGHT),\n lineHeight: pxToNumber(tokens.UTILITY_CAPTION_LINE_HEIGHT),\n color: tokens.TEXT_TERTIARY,\n letterSpacing: tokens.UTILITY_CAPTION_LETTER_SPACING,\n textDecoration: tokens.UTILITY_CAPTION_TEXT_DECORATION,\n textCase: tokens.UTILITY_CAPTION_TEXT_CASE,\n },\n\n // Weights mapping for custom weight overrides\n weights: {\n normal: \"400\", // Regular weight\n medium: normalizeFontWeight(tokens.MEDIUM),\n semibold: normalizeFontWeight(tokens.SEMI_BOLD),\n bold: \"700\", // Bold weight (not directly defined in tokens)\n },\n};\n\nexport default typographyTokens;\n","export interface ThemeColors {\n primary: string;\n secondary: string;\n background: string;\n surface: string;\n text: string;\n textSecondary: string;\n border: string;\n error: string;\n warning: string;\n success: string;\n}\n\nexport interface ThemeSpacing {\n xs: number;\n sm: number;\n md: number;\n lg: number;\n xl: number;\n}\n\nexport interface ThemeBorderRadius {\n none: number;\n sm: number;\n md: number;\n lg: number;\n full: number;\n}\n\nexport interface ThemeTypography {\n fontSize: {\n xs: number;\n sm: number;\n md: number;\n lg: number;\n xl: number;\n xxl: number;\n };\n fontWeight: {\n normal: '400' | 'normal';\n medium: '500' | 'medium';\n semibold: '600' | 'semibold';\n bold: '700' | 'bold';\n };\n lineHeight: {\n tight: number;\n normal: number;\n relaxed: number;\n };\n}\n\nexport interface Theme {\n colors: ThemeColors;\n spacing: ThemeSpacing;\n borderRadius: ThemeBorderRadius;\n typography: ThemeTypography;\n}\n\nexport const defaultTheme: Theme = {\n colors: {\n primary: '#007AFF',\n secondary: '#5856D6',\n background: '#FFFFFF',\n surface: '#F2F2F7',\n text: '#000000',\n textSecondary: '#8E8E93',\n border: '#E5E5EA',\n error: '#FF3B30',\n warning: '#FF9500',\n success: '#34C759',\n },\n spacing: {\n xs: 4,\n sm: 8,\n md: 16,\n lg: 24,\n xl: 32,\n },\n borderRadius: {\n none: 0,\n sm: 4,\n md: 8,\n lg: 12,\n full: 9999,\n },\n typography: {\n fontSize: {\n xs: 12,\n sm: 14,\n md: 16,\n lg: 18,\n xl: 20,\n xxl: 24,\n },\n fontWeight: {\n normal: '400',\n medium: '500',\n semibold: '600',\n bold: '700',\n },\n lineHeight: {\n tight: 1.2,\n normal: 1.5,\n relaxed: 1.8,\n },\n },\n};\n","import React, { createContext, useContext, ReactNode } from \"react\";\nimport { Theme, defaultTheme } from \"./index\";\n\ninterface ThemeContextValue {\n theme: Theme;\n updateTheme: (newTheme: Partial<Theme>) => void;\n}\n\nconst ThemeContext = createContext<ThemeContextValue | undefined>(undefined);\n\ninterface ThemeProviderProps {\n children: ReactNode;\n theme?: Partial<Theme>;\n}\n\nexport const ThemeProvider: React.FC<ThemeProviderProps> = ({\n children,\n theme: customTheme,\n}) => {\n // Using useMemo instead of useState to prevent unnecessary re-renders\n const theme = React.useMemo<Theme>(\n () => ({\n ...defaultTheme,\n ...customTheme,\n colors: { ...defaultTheme.colors, ...customTheme?.colors },\n spacing: { ...defaultTheme.spacing, ...customTheme?.spacing },\n borderRadius: {\n ...defaultTheme.borderRadius,\n ...customTheme?.borderRadius,\n },\n typography: {\n ...defaultTheme.typography,\n ...customTheme?.typography,\n fontSize: {\n ...defaultTheme.typography.fontSize,\n ...customTheme?.typography?.fontSize,\n },\n fontWeight: {\n ...defaultTheme.typography.fontWeight,\n ...customTheme?.typography?.fontWeight,\n },\n lineHeight: {\n ...defaultTheme.typography.lineHeight,\n ...customTheme?.typography?.lineHeight,\n },\n },\n }),\n [customTheme]\n );\n\n const updateTheme = React.useCallback((newTheme: Partial<Theme>) => {\n console.log(\n \"Theme update requested, but we are using static theme for now.\",\n newTheme\n );\n }, []);\n\n return (\n <ThemeContext.Provider value={{ theme, updateTheme }}>\n {children}\n </ThemeContext.Provider>\n );\n};\n\nexport const useTheme = (): ThemeContextValue => {\n const context = useContext(ThemeContext);\n if (!context) {\n throw new Error(\"useTheme must be used within a ThemeProvider\");\n }\n return context;\n};\n","import React from \"react\";\nimport typographyTokens from \"../../styles/tokens/typography\";\nimport { BodyProps } from \"../../types/Typography\";\n\nexport const Body: React.FC<BodyProps> = ({\n size = \"lg\",\n element = \"p\",\n align = \"left\",\n weight,\n color,\n truncate = false,\n lineClamp,\n children,\n className = \"\",\n style = {},\n onClick,\n testID,\n ...rest\n}) => {\n const getStyles = (): React.CSSProperties => {\n let tokenSet;\n switch (size) {\n case \"xl\":\n tokenSet = typographyTokens.bodyXl;\n break;\n case \"lg\":\n tokenSet = typographyTokens.bodyLg;\n break;\n case \"md\":\n tokenSet = typographyTokens.bodyMd;\n break;\n case \"sm\":\n tokenSet = typographyTokens.bodySm;\n break;\n }\n\n let fontWeightValue = parseInt(tokenSet.fontWeight);\n if (weight) {\n if (weight === \"normal\") fontWeightValue = 400;\n else if (weight === \"medium\") fontWeightValue = 500;\n else if (weight === \"semibold\") fontWeightValue = 600;\n else if (weight === \"bold\") fontWeightValue = 700;\n }\n\n const baseStyles: React.CSSProperties = {\n fontFamily: tokenSet.fontFamily,\n fontSize: `${tokenSet.fontSize}px`,\n lineHeight: `${tokenSet.lineHeight}px`,\n fontWeight: fontWeightValue,\n color: color || tokenSet.color,\n textAlign: align,\n letterSpacing: tokenSet.letterSpacing,\n textDecoration: tokenSet.textDecoration || \"none\",\n };\n\n if (truncate) {\n baseStyles.whiteSpace = \"nowrap\";\n baseStyles.overflow = \"hidden\";\n baseStyles.textOverflow = \"ellipsis\";\n baseStyles.display = \"block\";\n }\n\n if (lineClamp && lineClamp > 0) {\n baseStyles.display = \"-webkit-box\";\n baseStyles.WebkitLineClamp = lineClamp;\n baseStyles.WebkitBoxOrient = \"vertical\";\n baseStyles.overflow = \"hidden\";\n baseStyles.textOverflow = \"ellipsis\";\n }\n\n return baseStyles;\n };\n\n const combinedStyles = {\n ...getStyles(),\n ...style,\n };\n\n const linkProps = element === \"a\" ? rest : {};\n\n const Component = element as React.ElementType;\n\n return (\n <Component\n style={combinedStyles}\n className={className}\n data-testid={testID}\n onClick={onClick}\n {...linkProps}\n >\n {children}\n </Component>\n );\n};\n","import React, { useState } from \"react\";\nimport { ButtonProps, ButtonState } from \"../../types/Button\";\nimport { Icon } from \"../Icon\";\nimport typographyTokens from \"../../styles/tokens/typography\";\nimport * as tokens from \"../../styles/tokens/tokens\";\n\nexport const Button: React.FC<ButtonProps> = ({\n label,\n type = \"primary\",\n size = \"large\",\n disabled = false,\n leftIcon,\n rightIcon,\n icon,\n fullWidth = false,\n style,\n accessibilityLabel,\n testID,\n onClick,\n className,\n onMouseEnter,\n onMouseLeave,\n onMouseDown,\n onMouseUp,\n}) => {\n const isIconOnly = !!icon;\n\n // Create icon components from icon names\n const leftIconComponent = leftIcon ? (\n <Icon name={leftIcon} size={size === \"large\" ? 20 : 16} />\n ) : null;\n const rightIconComponent = rightIcon ? (\n <Icon name={rightIcon} size={size === \"large\" ? 20 : 16} />\n ) : null;\n const iconButton = icon ? (\n <Icon name={icon} size={size === \"large\" ? 20 : 16} />\n ) : null;\n\n const [buttonState, setButtonState] = useState<ButtonState>(\n disabled ? \"disabled\" : \"default\"\n );\n\n const hasBothIcons = leftIcon && rightIcon;\n\n // Base button styles\n const getBaseStyles = (): React.CSSProperties => {\n const baseStyle: React.CSSProperties = {\n display: isIconOnly ? \"inline-flex\" : \"flex\",\n width: isIconOnly ? \"auto\" : fullWidth ? \"100%\" : \"9.375rem\",\n height: size === \"large\" ? \"2.75rem\" : \"2rem\",\n padding: type === \"ghost\" ? tokens.SPACE_0 : tokens.COMPONENT_CARD_SM,\n justifyContent: \"center\",\n alignItems: \"center\",\n gap: hasBothIcons\n ? tokens.LAYOUT_SPACING_INLINE_MD\n : tokens.LAYOUT_SPACING_INLINE_XS,\n flexShrink: 0,\n borderRadius: tokens.BORDER_RADIUS_BUTTON_FULL,\n cursor: disabled ? \"not-allowed\" : \"pointer\",\n opacity: disabled ? 0.6 : 1,\n transition: \"all 0.2s ease-in-out\",\n border: \"none\",\n };\n\n // Apply styles based on type and state\n switch (type) {\n case \"primary\":\n switch (buttonState) {\n case \"default\":\n baseStyle.background = tokens.ACTION_PRIMARY_DEFAULT;\n break;\n case \"hover\":\n baseStyle.background = tokens.ACTION_PRIMARY_HOVER;\n break;\n case \"active\":\n baseStyle.background = tokens.ACTION_PRIMARY_ACTIVE;\n break;\n case \"disabled\":\n baseStyle.background = tokens.ACTION_PRIMARY_DISABLED;\n baseStyle.opacity = 0.6;\n break;\n }\n break;\n case \"outline\":\n baseStyle.background = \"transparent\";\n switch (buttonState) {\n case \"default\":\n baseStyle.border = `${tokens.BORDER_WIDTH_BUTTON_DEFAULT} solid ${tokens.ACTION_TERTIARY_DEFAULT}`;\n break;\n case \"hover\":\n baseStyle.border = `${tokens.BORDER_WIDTH_BUTTON_HOVER} solid ${tokens.ACTION_TERTIARY_HOVER}`;\n break;\n case \"active\":\n baseStyle.border = `${tokens.BORDER_WIDTH_BUTTON_PRESSED} solid ${tokens.ACTION_TERTIARY_ACTIVE}`;\n break;\n case \"disabled\":\n baseStyle.border = `${tokens.BORDER_WIDTH_BUTTON_DEFAULT} solid ${tokens.ACTION_TERTIARY_DISABLE}`;\n baseStyle.opacity = 0.6;\n break;\n }\n break;\n case \"ghost\":\n baseStyle.background = \"transparent\";\n break;\n case \"destructive\":\n baseStyle.background = \"transparent\";\n switch (buttonState) {\n case \"default\":\n baseStyle.color = tokens.ACTION_DESTRUCTIVE_HOVER;\n break;\n case \"hover\":\n baseStyle.color = tokens.ACTION_DESTRUCTIVE_DEFAULT;\n break;\n case \"active\":\n baseStyle.color = tokens.ACTION_DESTRUCTIVE_ACTIVE;\n break;\n case \"disabled\":\n baseStyle.color = tokens.ACTION_DESTRUCTIVE_DISABLE;\n baseStyle.opacity = 0.6;\n break;\n }\n break;\n }\n\n return { ...baseStyle, ...style };\n };\n\n const getTextStyles = (): React.CSSProperties => {\n const buttonTokens =\n size === \"large\" ? typographyTokens.labelLg : typographyTokens.labelMd;\n\n const textStyle: React.CSSProperties = {\n fontFamily: buttonTokens.fontFamily,\n fontWeight: parseInt(buttonTokens.fontWeight),\n fontSize: `${buttonTokens.fontSize}px`,\n lineHeight: `${buttonTokens.lineHeight}px`,\n transition: \"all 0.2s ease-in-out\",\n };\n\n switch (type) {\n case \"primary\":\n textStyle.color = tokens.NEUTRAL_80;\n break;\n case \"outline\":\n switch (buttonState) {\n case \"default\":\n textStyle.color = tokens.ACTION_TERTIARY_DEFAULT;\n break;\n case \"hover\":\n textStyle.color = tokens.ACTION_TERTIARY_HOVER;\n break;\n case \"active\":\n textStyle.color = tokens.ACTION_TERTIARY_ACTIVE;\n break;\n case \"disabled\":\n textStyle.color = tokens.ACTION_TERTIARY_DISABLE;\n break;\n }\n break;\n case \"ghost\":\n switch (buttonState) {\n case \"default\":\n textStyle.color = tokens.ACTION_TERTIARY_DEFAULT;\n break;\n case \"hover\":\n textStyle.color = tokens.ACTION_TERTIARY_HOVER;\n break;\n case \"active\":\n textStyle.color = tokens.ACTION_TERTIARY_ACTIVE;\n break;\n case \"disabled\":\n textStyle.color = tokens.ACTION_TERTIARY_DISABLE;\n break;\n }\n break;\n case \"destructive\":\n break;\n }\n\n return textStyle;\n };\n\n // Icon styles\n const getIconStyles = (): React.CSSProperties => {\n return {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n color: \"currentColor\",\n };\n };\n\n // Event handlers for state changes\n const handleMouseEnter = (e: React.MouseEvent<HTMLButtonElement>) => {\n if (!disabled) {\n setButtonState(\"hover\");\n onMouseEnter && onMouseEnter(e);\n }\n };\n\n const handleMouseLeave = (e: React.MouseEvent<HTMLButtonElement>) => {\n if (!disabled) {\n setButtonState(\"default\");\n onMouseLeave && onMouseLeave(e);\n }\n };\n\n const handleMouseDown = (e: React.MouseEvent<HTMLButtonElement>) => {\n if (!disabled) {\n setButtonState(\"active\");\n onMouseDown && onMouseDown(e);\n }\n };\n\n const handleMouseUp = (e: React.MouseEvent<HTMLButtonElement>) => {\n if (!disabled) {\n setButtonState(\"hover\");\n onMouseUp && onMouseUp(e);\n }\n };\n\n return (\n <button\n style={getBaseStyles()}\n onClick={onClick}\n disabled={disabled}\n aria-label={accessibilityLabel || label}\n data-testid={testID}\n className={className}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n onMouseDown={handleMouseDown}\n onMouseUp={handleMouseUp}\n >\n {!isIconOnly && leftIcon && (\n <span style={getIconStyles()} className=\"button-left-icon\">\n {leftIconComponent}\n </span>\n )}\n\n {!isIconOnly && <span style={getTextStyles()}>{label}</span>}\n\n {isIconOnly && <span style={getIconStyles()}>{iconButton}</span>}\n\n {!isIconOnly && rightIcon && (\n <span style={getIconStyles()} className=\"button-right-icon\">\n {rightIconComponent}\n </span>\n )}\n </button>\n );\n};\n","import React from \"react\";\nimport typographyTokens from \"../../styles/tokens/typography\";\nimport { DisplayProps } from \"../../types/Typography\";\n\nexport const Display: React.FC<DisplayProps> = ({\n size = \"2xl\",\n element = \"h1\",\n align = \"left\",\n weight,\n color,\n truncate = false,\n lineClamp,\n children,\n className = \"\",\n style = {},\n onClick,\n testID,\n ...rest\n}) => {\n const getStyles = (): React.CSSProperties => {\n const tokenSet =\n size === \"2xl\" ? typographyTokens.display2xl : typographyTokens.displayXl;\n\n let fontWeightValue = parseInt(tokenSet.fontWeight);\n if (weight) {\n if (weight === \"normal\") fontWeightValue = 400;\n else if (weight === \"medium\") fontWeightValue = 500;\n else if (weight === \"semibold\") fontWeightValue = 600;\n else if (weight === \"bold\") fontWeightValue = 700;\n }\n\n const baseStyles: React.CSSProperties = {\n fontFamily: tokenSet.fontFamily,\n fontSize: `${tokenSet.fontSize}px`,\n lineHeight: `${tokenSet.lineHeight}px`,\n fontWeight: fontWeightValue,\n color: color || tokenSet.color,\n textAlign: align,\n letterSpacing: tokenSet.letterSpacing,\n textDecoration: tokenSet.textDecoration || \"none\",\n };\n\n if (truncate) {\n baseStyles.whiteSpace = \"nowrap\";\n baseStyles.overflow = \"hidden\";\n baseStyles.textOverflow = \"ellipsis\";\n baseStyles.display = \"block\";\n }\n\n if (lineClamp && lineClamp > 0) {\n baseStyles.display = \"-webkit-box\";\n baseStyles.WebkitLineClamp = lineClamp;\n baseStyles.WebkitBoxOrient = \"vertical\";\n baseStyles.overflow = \"hidden\";\n baseStyles.textOverflow = \"ellipsis\";\n }\n\n return baseStyles;\n };\n\n const combinedStyles = {\n ...getStyles(),\n ...style,\n };\n\n const Component = element as React.ElementType;\n\n return (\n <Component\n style={combinedStyles}\n className={className}\n data-testid={testID}\n onClick={onClick}\n {...rest}\n >\n {children}\n </Component>\n );\n};\n","import React from \"react\";\nimport typographyTokens from \"../../styles/tokens/typography\";\nimport { HeadingProps, TypographyWeight } from \"../../types/Typography\";\n\ntype HeadingTokenKey =\n | \"headingXl\"\n | \"headingLg\"\n | \"headingMd\"\n | \"headingSm\"\n | \"headingXs\";\n\nexport const Heading: React.FC<HeadingProps> = ({\n size = \"xl\",\n element = \"h2\",\n align = \"left\",\n weight,\n color,\n truncate = false,\n lineClamp,\n children,\n className = \"\",\n style = {},\n onClick,\n testID,\n ...rest\n}) => {\n const getStyles = (): React.CSSProperties => {\n const tokenKeyMap: Record<string, HeadingTokenKey> = {\n xl: \"headingXl\",\n lg: \"headingLg\",\n md: \"headingMd\",\n sm: \"headingSm\",\n xs: \"headingXs\",\n };\n\n const tokenSet = typographyTokens[tokenKeyMap[size]];\n\n const fontWeightValue = weight\n ? parseInt(typographyTokens.weights[weight])\n : parseInt(tokenSet.fontWeight);\n\n const baseStyles: React.CSSProperties = {\n fontFamily: tokenSet.fontFamily,\n fontSize: `${tokenSet.fontSize}px`,\n lineHeight: `${tokenSet.lineHeight}px`,\n fontWeight: fontWeightValue,\n color: color || tokenSet.color,\n textAlign: align,\n letterSpacing: tokenSet.letterSpacing,\n textDecoration: tokenSet.textDecoration || \"none\",\n };\n\n const truncationStyles: React.CSSProperties = truncate\n ? {\n whiteSpace: \"nowrap\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n display: \"block\",\n }\n : {};\n\n const lineClampStyles: React.CSSProperties =\n lineClamp && lineClamp > 0\n ? {\n display: \"-webkit-box\",\n WebkitLineClamp: lineClamp,\n WebkitBoxOrient: \"vertical\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n }\n : {};\n\n return {\n ...baseStyles,\n ...truncationStyles,\n ...lineClampStyles,\n };\n };\n\n const combinedStyles = {\n ...getStyles(),\n ...style,\n };\n\n const linkProps = element === \"a\" ? rest : {};\n\n const headingElementMap: Record<string, React.ElementType> = {\n xl: \"h1\",\n lg: \"h2\",\n md: \"h3\",\n sm: \"h4\",\n xs: \"h5\",\n };\n\n const defaultElement = element === \"h2\" ? headingElementMap[size] : element;\n\n const Component = defaultElement as React.ElementType;\n\n return (\n <Component\n style={combinedStyles}\n className={className}\n data-testid={testID}\n onClick={onClick}\n {...linkProps}\n >\n {children}\n </Component>\n );\n};\n","import React from 'react';\nimport { Icon, icons, IconData } from './Icon';\n\nexport interface IconListProps {\n /**\n * Search query to filter icons\n */\n searchQuery?: string;\n\n /**\n * Size of each icon\n */\n iconSize?: number;\n\n /**\n * Color of each icon\n */\n iconColor?: string;\n\n /**\n * Function to handle when an icon is clicked\n */\n onIconClick?: (iconName: string) => void;\n}\n\nexport const IconList: React.FC<IconListProps> = ({\n searchQuery = '',\n iconSize = 24,\n iconColor = 'currentColor',\n onIconClick,\n}) => {\n // Filter icons based on the search query\n const filteredIcons = searchQuery\n ? icons.filter(icon => \n icon.name.toLowerCase().includes(searchQuery.toLowerCase())\n )\n : icons;\n\n const handleIconClick = (iconName: string) => {\n if (onIconClick) {\n onIconClick(iconName);\n }\n };\n\n return (\n <div>\n {filteredIcons.length === 0 ? (\n <div style={{ padding: '20px', textAlign: 'center' }}>\n No icons found matching \"{searchQuery}\"\n </div>\n ) : (\n <div\n style={{\n display: 'grid',\n gridTemplateColumns: 'repeat(auto-fill, minmax(100px, 1fr))',\n gap: '20px',\n }}\n >\n {filteredIcons.map((icon: IconData) => (\n <div\n key={icon.name}\n style={{\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n padding: '12px',\n border: '1px solid #eee',\n borderRadius: '8px',\n cursor: onIconClick ? 'pointer' : 'default',\n transition: 'all 0.2s ease-in-out',\n }}\n onClick={() => handleIconClick(icon.name)}\n onMouseOver={(e) => {\n e.currentTarget.style.backgroundColor = '#f9f9f9';\n e.currentTarget.style.transform = 'translateY(-2px)';\n e.currentTarget.style.boxShadow = '0 2px 8px rgba(0,0,0,0.05)';\n }}\n onMouseOut={(e) => {\n e.currentTarget.style.backgroundColor = 'transparent';\n e.currentTarget.style.transform = 'translateY(0)';\n e.currentTarget.style.boxShadow = 'none';\n }}\n >\n <div\n style={{\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n height: '50px',\n marginBottom: '8px',\n }}\n >\n <Icon name={icon.name} size={iconSize} color={iconColor} />\n </div>\n <div\n style={{\n fontSize: '12px',\n textAlign: 'center',\n wordBreak: 'break-word',\n }}\n >\n {icon.name}\n </div>\n </div>\n ))}\n </div>\n )}\n </div>\n );\n};\n","import React from \"react\";\nimport typographyTokens from \"../../styles/tokens/typography\";\nimport { UtilityProps } from \"../../types/Typography\";\n\nexport const Utility: React.FC<UtilityProps> = ({\n variant = \"button\",\n element,\n align = \"left\",\n weight,\n color,\n truncate = false,\n lineClamp,\n children,\n className = \"\",\n style = {},\n onClick,\n testID,\n ...rest\n}) => {\n const getDefaultElement = () => {\n switch (variant) {\n case \"button\":\n return \"span\";\n case \"link\":\n return \"a\";\n case \"caption\":\n return \"span\";\n default:\n return \"span\";\n }\n };\n\n const elementToUse = element || getDefaultElement();\n\n const getStyles = (): React.CSSProperties => {\n let tokenSet;\n switch (variant) {\n case \"button\":\n tokenSet = typographyTokens.labelLg;\n break;\n case \"link\":\n tokenSet = typographyTokens.labelMd;\n break;\n case \"caption\":\n tokenSet = typographyTokens.labelSm;\n break;\n }\n\n let fontWeightValue = parseInt(tokenSet.fontWeight);\n if (weight) {\n if (weight === \"normal\") fontWeightValue = 400;\n else if (weight === \"medium\") fontWeightValue = 500;\n else if (weight === \"semibold\") fontWeightValue = 600;\n else if (weight === \"bold\") fontWeightValue = 700;\n }\n\n const baseStyles: React.CSSProperties = {\n fontFamily: tokenSet.fontFamily,\n fontSize: `${tokenSet.fontSize}px`,\n lineHeight: `${tokenSet.lineHeight}px`,\n fontWeight: fontWeightValue,\n color: color || tokenSet.color,\n textAlign: align,\n letterSpacing: tokenSet.letterSpacing,\n textDecoration:\n variant === \"link\" ? \"underline\" : tokenSet.textDecoration || \"none\",\n };\n\n if (truncate) {\n baseStyles.whiteSpace = \"nowrap\";\n baseStyles.overflow = \"hidden\";\n baseStyles.textOverflow = \"ellipsis\";\n baseStyles.display = \"block\";\n }\n\n if (lineClamp && lineClamp > 0) {\n baseStyles.display = \"-webkit-box\";\n baseStyles.WebkitLineClamp = lineClamp;\n baseStyles.WebkitBoxOrient = \"vertical\";\n baseStyles.overflow = \"hidden\";\n baseStyles.textOverflow = \"ellipsis\";\n }\n\n return baseStyles;\n };\n\n const combinedStyles = {\n ...getStyles(),\n ...style,\n };\n\n const linkProps = elementToUse === \"a\" ? rest : {};\n\n const Component = elementToUse as React.ElementType;\n\n return (\n <Component\n style={combinedStyles}\n className={className}\n data-testid={testID}\n onClick={onClick}\n {...linkProps}\n >\n {children}\n </Component>\n );\n};\n"],"names":["icons","iconMap","Map","forEach","icon","set","name","Icon","size","color","className","style","onClick","ariaLabel","iconInfo","get","console","warn","paths","path","split","map","index","combinedStyle","display","verticalAlign","React","createElement","width","height","viewBox","fill","xmlns","role","key","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin","BORDER_WIDTH_BUTTON_DEFAULT","TEXT_TERTIARY","TEXT_BODY","TEXT_HEADER","ACTION_TERTIARY_DEFAULT","ACTION_TERTIARY_HOVER","ACTION_TERTIARY_ACTIVE","ACTION_TERTIARY_DISABLE","UTILITY_CAPTION_FONT_FAMILY","UTILITY_CAPTION_FONT_WEIGHT","UTILITY_CAPTION_LINE_HEIGHT","UTILITY_CAPTION_FONT_SIZE","UTILITY_CAPTION_TEXT_CASE","UTILITY_CAPTION_TEXT_DECORATION","pxToNumber","pxValue","parseFloat","replace","normalizeFontWeight","weight","toString","typographyTokens","display2xl","fontFamily","fontSize","fontWeight","lineHeight","tokens.TEXT_HEADER","letterSpacing","textDecoration","textCase","displayXl","headingXl","headingLg","headingMd","headingSm","headingXs","bodyXl","tokens.TEXT_BODY","paragraphIndent","bodyLg","bodyMd","bodySm","bodyXs","tokens.UTILITY_CAPTION_FONT_FAMILY","tokens.UTILITY_CAPTION_FONT_SIZE","tokens.UTILITY_CAPTION_FONT_WEIGHT","tokens.UTILITY_CAPTION_LINE_HEIGHT","tokens.UTILITY_CAPTION_TEXT_DECORATION","tokens.UTILITY_CAPTION_TEXT_CASE","labelLg","tokens.TEXT_TERTIARY","labelMd","labelSm","weights","normal","medium","semibold","bold","defaultTheme","colors","primary","secondary","background","surface","text","textSecondary","border","error","warning","success","spacing","xs","sm","md","lg","xl","borderRadius","none","full","typography","xxl","tight","relaxed","ThemeContext","createContext","undefined","element","align","truncate","lineClamp","children","testID","rest","combinedStyles","tokenSet","fontWeightValue","parseInt","baseStyles","textAlign","whiteSpace","overflow","textOverflow","WebkitLineClamp","WebkitBoxOrient","getStyles","linkProps","Component","label","type","disabled","leftIcon","rightIcon","fullWidth","accessibilityLabel","onMouseEnter","onMouseLeave","onMouseDown","onMouseUp","isIconOnly","leftIconComponent","rightIconComponent","iconButton","buttonState","setButtonState","useState","hasBothIcons","baseStyle","padding","justifyContent","alignItems","gap","flexShrink","cursor","opacity","transition","tokens.BORDER_WIDTH_BUTTON_DEFAULT","tokens.ACTION_TERTIARY_DEFAULT","tokens.ACTION_TERTIARY_HOVER","tokens.ACTION_TERTIARY_ACTIVE","tokens.ACTION_TERTIARY_DISABLE","getBaseStyles","e","buttonTokens","textStyle","getTextStyles","searchQuery","iconSize","iconColor","onIconClick","filteredIcons","filter","toLowerCase","includes","length","gridTemplateColumns","flexDirection","handleIconClick","iconName","onMouseOver","currentTarget","backgroundColor","transform","boxShadow","onMouseOut","marginBottom","wordBreak","theme","customTheme","useMemo","_a","_b","_c","updateTheme","useCallback","newTheme","log","Provider","value","variant","elementToUse","getDefaultElement","context","useContext","Error"],"mappings":"8KAgDa,MAAAA,kvGAGPC,EAAU,IAAIC,IACpBF,EAAMG,SAASC,IACbH,EAAQI,IAAID,EAAKE,KAAMF,MAGlB,MAAMG,EAA4B,EACvCD,OACAE,OAAO,GACPC,QAAQ,eACRC,YAAY,GACZC,QAAQ,CAAE,EACVC,UACAC,gBAGA,MAAMC,EAAWb,EAAQc,IAAIT,GAG7B,IAAKQ,EAEH,OADAE,QAAQC,KAAK,SAASX,gBACf,KAIT,MAAMY,EAAQJ,EAASK,KAAKC,MAAM,OAAOC,KAAI,CAACF,EAAMG,IACxC,IAAVA,EAAcH,EAAO,KAAKA,MAItBI,EAAqC,CACzCC,QAAS,eACTC,cAAe,YACZd,GAGL,OACEe,EACE,QAAAC,cAAA,MAAA,CAAAC,MAAOpB,EACPqB,OAAQrB,EACRsB,QAAShB,EAASgB,QAClBC,KAAK,OACLC,MAAM,6BACNtB,UAAWA,EACXC,MAAOY,EACPX,QAASA,EAAO,aACJC,GAAa,GAAGP,SAC5B2B,KAAK,OAEJf,EAAMG,KAAI,CAACF,EAAMG,IAChBI,EAAAA,QACEC,cAAA,OAAA,CAAAO,IAAKZ,EACLa,EAAGhB,EACHiB,OAAQtB,EAASiB,KAAO,OAAStB,EACjCsB,KAAMjB,EAASiB,KAAOtB,EAAQ,OAC9B4B,YAAY,MACZC,cAAc,QACdC,eAAe,cChFZC,EAA8B,YAwF9BC,EAAgB,UAChBC,EAAY,UACZC,EAAc,OAqBdC,EAA0B,UAC1BC,EAAwB,OACxBC,EAAyB,UACzBC,EAA0B,UA2K1BC,EAA8B,UAC9BC,EAA8B,OAC9BC,EAA8B,OAC9BC,EAA4B,OAG5BC,EAA4B,OAC5BC,EAAkC,OChTlCC,EAAcC,GACpBA,GAA8B,iBAAZA,EAChBC,WAAWD,EAAQE,QAAQ,KAAM,KADY,ECRzCC,EAAuBC,GACZ,iBAAXA,EACFA,EAAOC,WAGD,SAAXD,EACK,MAGFA,ECZIE,EAAmB,CAE9BC,WAAY,CACVC,WHgMmC,UG/LnCC,SAAUV,EHkMuB,QGjMjCW,WAAYP,EH+LuB,KG9LnCQ,WAAYZ,EHsTe,QGrT3B7C,MAAO0D,EACPC,cH+LsC,KG9LtCC,eHiMuC,OGhMvCC,SH+LiC,QG7LnCC,UAAW,CACTR,WH8LkC,UG7LlCC,SAAUV,EHgMsB,QG/LhCW,WAAYP,EH6LsB,KG5LlCQ,WAAYZ,EH6Se,QG5S3B7C,MAAO0D,EACPC,cH6LqC,KG5LrCC,eH+LsC,OG9LtCC,SH6LgC,QGzLlCE,UAAW,CACTT,WH0LkC,UGzLlCC,SAAUV,EH4LsB,QG3LhCW,WAAYP,EHyLsB,KGxLlCQ,WAAYZ,EHkSe,QGjS3B7C,MAAO0D,EACPC,cHyLqC,KGxLrCC,eH2LsC,OG1LtCC,SHyLgC,QGvLlCG,UAAW,CACTV,WHwLkC,UGvLlCC,SAAUV,EH0LsB,QGzLhCW,WAAYP,EHuLsB,KGtLlCQ,WAAYZ,EHyRe,QGxR3B7C,MAAO0D,EACPC,cHuLqC,KGtLrCC,eHyLsC,OGxLtCC,SHuLgC,QGrLlCI,UAAW,CACTX,WHsLkC,UGrLlCC,SAAUV,EHwLsB,QGvLhCW,WAAYP,EHqLsB,KGpLlCQ,WAAYZ,EHgRe,QG/Q3B7C,MAAO0D,EACPC,cHqLqC,KGpLrCC,eHuLsC,OGtLtCC,SHqLgC,QGnLlCK,UAAW,CACTZ,WHoLkC,UGnLlCC,SAAUV,EHsLsB,QGrLhCW,WAAYP,EHmLsB,KGlLlCQ,WAAYZ,EHuQc,QGtQ1B7C,MAAO0D,EACPC,cHmLqC,KGlLrCC,eHqLsC,OGpLtCC,SHmLgC,QGjLlCM,UAAW,CACTb,WHkLkC,UGjLlCC,SAAUV,EHoLsB,QGnLhCW,WAAYP,EHiLsB,KGhLlCQ,WAAYZ,EH8Pc,QG7P1B7C,MAAO0D,EACPC,cHiLqC,KGhLrCC,eHmLsC,OGlLtCC,SHiLgC,QG7KlCO,OAAQ,CACNd,WHsL+B,UGrL/BC,SAAUV,EHwLmB,QGvL7BW,WAAYP,EHqLmB,QGpL/BQ,WAAYZ,EHqLmB,QGpL/B7C,MAAOqE,EACPV,cHqLkC,KGpLlCC,eHuLmC,OGtLnCC,SHqL6B,OGpL7BS,gBHmLoC,OGjLtCC,OAAQ,CACNjB,WHmL+B,UGlL/BC,SAAUV,EHqLmB,QGpL7BW,WAAYP,EHkLmB,QGjL/BQ,WAAYZ,EHkLmB,QGjL/B7C,MAAOqE,EACPV,cHkLkC,KGjLlCC,eHoLmC,OGnLnCC,SHkL6B,OGjL7B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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "onecart-ui",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.4",
|
|
4
4
|
"description": "Cross-platform React and React Native component library with white-label support",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.esm.js",
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"author": "",
|
|
36
36
|
"license": "MIT",
|
|
37
37
|
"peerDependencies": {
|
|
38
|
-
"react": "
|
|
38
|
+
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
|
39
39
|
"react-native": ">=0.60.0"
|
|
40
40
|
},
|
|
41
41
|
"devDependencies": {
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import React, { useState } from "react";
|
|
2
2
|
import { ButtonProps, ButtonState } from "../../types/Button";
|
|
3
3
|
import { Icon } from "../Icon";
|
|
4
|
+
import typographyTokens from "../../styles/tokens/typography";
|
|
5
|
+
import * as tokens from "../../styles/tokens/tokens";
|
|
4
6
|
|
|
5
7
|
export const Button: React.FC<ButtonProps> = ({
|
|
6
8
|
label,
|
|
@@ -46,17 +48,14 @@ export const Button: React.FC<ButtonProps> = ({
|
|
|
46
48
|
display: isIconOnly ? "inline-flex" : "flex",
|
|
47
49
|
width: isIconOnly ? "auto" : fullWidth ? "100%" : "9.375rem",
|
|
48
50
|
height: size === "large" ? "2.75rem" : "2rem",
|
|
49
|
-
padding:
|
|
50
|
-
type === "ghost"
|
|
51
|
-
? "var(--spacing-0, 0rem)"
|
|
52
|
-
: "var(--component-card-sm, 0.75rem)",
|
|
51
|
+
padding: type === "ghost" ? tokens.SPACE_0 : tokens.COMPONENT_CARD_SM,
|
|
53
52
|
justifyContent: "center",
|
|
54
53
|
alignItems: "center",
|
|
55
54
|
gap: hasBothIcons
|
|
56
|
-
?
|
|
57
|
-
:
|
|
55
|
+
? tokens.LAYOUT_SPACING_INLINE_MD
|
|
56
|
+
: tokens.LAYOUT_SPACING_INLINE_XS,
|
|
58
57
|
flexShrink: 0,
|
|
59
|
-
borderRadius:
|
|
58
|
+
borderRadius: tokens.BORDER_RADIUS_BUTTON_FULL,
|
|
60
59
|
cursor: disabled ? "not-allowed" : "pointer",
|
|
61
60
|
opacity: disabled ? 0.6 : 1,
|
|
62
61
|
transition: "all 0.2s ease-in-out",
|
|
@@ -68,16 +67,16 @@ export const Button: React.FC<ButtonProps> = ({
|
|
|
68
67
|
case "primary":
|
|
69
68
|
switch (buttonState) {
|
|
70
69
|
case "default":
|
|
71
|
-
baseStyle.background =
|
|
70
|
+
baseStyle.background = tokens.ACTION_PRIMARY_DEFAULT;
|
|
72
71
|
break;
|
|
73
72
|
case "hover":
|
|
74
|
-
baseStyle.background =
|
|
73
|
+
baseStyle.background = tokens.ACTION_PRIMARY_HOVER;
|
|
75
74
|
break;
|
|
76
75
|
case "active":
|
|
77
|
-
baseStyle.background =
|
|
76
|
+
baseStyle.background = tokens.ACTION_PRIMARY_ACTIVE;
|
|
78
77
|
break;
|
|
79
78
|
case "disabled":
|
|
80
|
-
baseStyle.background =
|
|
79
|
+
baseStyle.background = tokens.ACTION_PRIMARY_DISABLED;
|
|
81
80
|
baseStyle.opacity = 0.6;
|
|
82
81
|
break;
|
|
83
82
|
}
|
|
@@ -86,20 +85,16 @@ export const Button: React.FC<ButtonProps> = ({
|
|
|
86
85
|
baseStyle.background = "transparent";
|
|
87
86
|
switch (buttonState) {
|
|
88
87
|
case "default":
|
|
89
|
-
baseStyle.border =
|
|
90
|
-
"var(--button-default, 1px) solid var(--action-tertiary-default, #3B3B3B)";
|
|
88
|
+
baseStyle.border = `${tokens.BORDER_WIDTH_BUTTON_DEFAULT} solid ${tokens.ACTION_TERTIARY_DEFAULT}`;
|
|
91
89
|
break;
|
|
92
90
|
case "hover":
|
|
93
|
-
baseStyle.border =
|
|
94
|
-
"var(--button-hover, 2px) solid var(--action-tertiary-hover, #111)";
|
|
91
|
+
baseStyle.border = `${tokens.BORDER_WIDTH_BUTTON_HOVER} solid ${tokens.ACTION_TERTIARY_HOVER}`;
|
|
95
92
|
break;
|
|
96
93
|
case "active":
|
|
97
|
-
baseStyle.border =
|
|
98
|
-
"var(--button-pressed, 2px) solid var(--action-tertiary-active, #ABABAB)";
|
|
94
|
+
baseStyle.border = `${tokens.BORDER_WIDTH_BUTTON_PRESSED} solid ${tokens.ACTION_TERTIARY_ACTIVE}`;
|
|
99
95
|
break;
|
|
100
96
|
case "disabled":
|
|
101
|
-
baseStyle.border =
|
|
102
|
-
"var(--button-default, 1px) solid var(--action-tertiary-disabled, #3B3B3B)";
|
|
97
|
+
baseStyle.border = `${tokens.BORDER_WIDTH_BUTTON_DEFAULT} solid ${tokens.ACTION_TERTIARY_DISABLE}`;
|
|
103
98
|
baseStyle.opacity = 0.6;
|
|
104
99
|
break;
|
|
105
100
|
}
|
|
@@ -111,16 +106,16 @@ export const Button: React.FC<ButtonProps> = ({
|
|
|
111
106
|
baseStyle.background = "transparent";
|
|
112
107
|
switch (buttonState) {
|
|
113
108
|
case "default":
|
|
114
|
-
baseStyle.color =
|
|
109
|
+
baseStyle.color = tokens.ACTION_DESTRUCTIVE_HOVER;
|
|
115
110
|
break;
|
|
116
111
|
case "hover":
|
|
117
|
-
baseStyle.color =
|
|
112
|
+
baseStyle.color = tokens.ACTION_DESTRUCTIVE_DEFAULT;
|
|
118
113
|
break;
|
|
119
114
|
case "active":
|
|
120
|
-
baseStyle.color =
|
|
115
|
+
baseStyle.color = tokens.ACTION_DESTRUCTIVE_ACTIVE;
|
|
121
116
|
break;
|
|
122
117
|
case "disabled":
|
|
123
|
-
baseStyle.color =
|
|
118
|
+
baseStyle.color = tokens.ACTION_DESTRUCTIVE_DISABLE;
|
|
124
119
|
baseStyle.opacity = 0.6;
|
|
125
120
|
break;
|
|
126
121
|
}
|
|
@@ -131,47 +126,50 @@ export const Button: React.FC<ButtonProps> = ({
|
|
|
131
126
|
};
|
|
132
127
|
|
|
133
128
|
const getTextStyles = (): React.CSSProperties => {
|
|
129
|
+
const buttonTokens =
|
|
130
|
+
size === "large" ? typographyTokens.labelLg : typographyTokens.labelMd;
|
|
131
|
+
|
|
134
132
|
const textStyle: React.CSSProperties = {
|
|
135
|
-
fontFamily:
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
133
|
+
fontFamily: buttonTokens.fontFamily,
|
|
134
|
+
fontWeight: parseInt(buttonTokens.fontWeight),
|
|
135
|
+
fontSize: `${buttonTokens.fontSize}px`,
|
|
136
|
+
lineHeight: `${buttonTokens.lineHeight}px`,
|
|
139
137
|
transition: "all 0.2s ease-in-out",
|
|
140
138
|
};
|
|
141
139
|
|
|
142
140
|
switch (type) {
|
|
143
141
|
case "primary":
|
|
144
|
-
textStyle.color =
|
|
142
|
+
textStyle.color = tokens.NEUTRAL_80;
|
|
145
143
|
break;
|
|
146
144
|
case "outline":
|
|
147
145
|
switch (buttonState) {
|
|
148
146
|
case "default":
|
|
149
|
-
textStyle.color =
|
|
147
|
+
textStyle.color = tokens.ACTION_TERTIARY_DEFAULT;
|
|
150
148
|
break;
|
|
151
149
|
case "hover":
|
|
152
|
-
textStyle.color =
|
|
150
|
+
textStyle.color = tokens.ACTION_TERTIARY_HOVER;
|
|
153
151
|
break;
|
|
154
152
|
case "active":
|
|
155
|
-
textStyle.color =
|
|
153
|
+
textStyle.color = tokens.ACTION_TERTIARY_ACTIVE;
|
|
156
154
|
break;
|
|
157
155
|
case "disabled":
|
|
158
|
-
textStyle.color =
|
|
156
|
+
textStyle.color = tokens.ACTION_TERTIARY_DISABLE;
|
|
159
157
|
break;
|
|
160
158
|
}
|
|
161
159
|
break;
|
|
162
160
|
case "ghost":
|
|
163
161
|
switch (buttonState) {
|
|
164
162
|
case "default":
|
|
165
|
-
textStyle.color =
|
|
163
|
+
textStyle.color = tokens.ACTION_TERTIARY_DEFAULT;
|
|
166
164
|
break;
|
|
167
165
|
case "hover":
|
|
168
|
-
textStyle.color =
|
|
166
|
+
textStyle.color = tokens.ACTION_TERTIARY_HOVER;
|
|
169
167
|
break;
|
|
170
168
|
case "active":
|
|
171
|
-
textStyle.color =
|
|
169
|
+
textStyle.color = tokens.ACTION_TERTIARY_ACTIVE;
|
|
172
170
|
break;
|
|
173
171
|
case "disabled":
|
|
174
|
-
textStyle.color =
|
|
172
|
+
textStyle.color = tokens.ACTION_TERTIARY_DISABLE;
|
|
175
173
|
break;
|
|
176
174
|
}
|
|
177
175
|
break;
|