@soul-refiner/design-system 2.14.151 → 2.14.152

package/dist/components/feedback/emojiPicker/emoji-reactions.js

@@ -1,4 +1,4 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("react"),o=require("styled-components"),r=require("./sparkle-reaction.js"),s=require("../../../assets/custom_emoji_data.json.js"),a=require("./utils.js");require("../../atoms/box/box.js"),require("../../atoms/highlighter/highlighter.js"),require("../../atoms/typography/display.js"),require("../../atoms/typography/heading.js");var i=require("../../atoms/typography/paragraph.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("../../atoms/typography/typography.js"),require("../../atoms/countdown/countdown.js");var u=n(t);const c=n(o).default.button`
+"use strict";var e=require("react/jsx-runtime"),t=require("react"),o=require("styled-components"),r=require("./sparkle-reaction.js"),s=require("../../../assets/custom_emoji_data.json.js"),a=require("./utils.js");require("../../atoms/box/box.js"),require("../../atoms/image/image.js"),require("../../atoms/layout/container.js"),require("../../atoms/layout/grid.js"),require("../../atoms/layout/inline.js"),require("../../atoms/layout/section.js"),require("../../atoms/highlighter/highlighter.js"),require("../../atoms/typography/display.js"),require("../../atoms/typography/heading.js");var i=require("../../atoms/typography/paragraph.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("../../atoms/typography/typography.js"),require("../../atoms/countdown/countdown.js");var n=u(t);const c=u(o).default.button`
   display: flex;
   align-items: center;
   gap: ${({$showCount:e})=>e?"4px":"0"};
@@ -14,4 +14,4 @@
   &:hover {
     background: ${({$active:e,$showCount:t})=>e&&t?"":t?"var(--color-grey-9)":"transparent"};
   }
-`;exports.EmojiReaction=({emoji:t,isActive:o,count:n,size:l,onReact:p,showCount:d=!0,showSparkle:h=!1})=>{const[m,j]=u.default.useState(h),f=u.default.useMemo(()=>a.buildNativeEmojiMap(s.default.emojis||{}),[]);u.default.useEffect(()=>{if(h){j(!0);const e=setTimeout(()=>j(!1),2e3);return()=>clearTimeout(e)}},[h]),u.default.useEffect(()=>{if(m){const e=setTimeout(()=>j(!1),600);return()=>clearTimeout(e)}},[]);const g=f[t];return g?e.jsxs(c,{$active:o,$showCount:d,onClick:()=>{p(),j(!0),setTimeout(()=>j(!1),600)},children:[e.jsx(r.ReactionEmoji,{emojiId:g.id,coordinates:g.coordinates,size:l,sparkleOnMount:m}),d&&e.jsx(i.P,{$fontSize:12,$color:"grey-5",children:n})]}):null};
+`;exports.EmojiReaction=({emoji:t,isActive:o,count:u,size:l,onReact:d,showCount:m=!0,showSparkle:p=!1})=>{const[j,h]=n.default.useState(p),g=n.default.useMemo(()=>a.buildNativeEmojiMap(s.default.emojis||{}),[]);n.default.useEffect(()=>{if(p){h(!0);const e=setTimeout(()=>h(!1),2e3);return()=>clearTimeout(e)}},[p]),n.default.useEffect(()=>{if(j){const e=setTimeout(()=>h(!1),600);return()=>clearTimeout(e)}},[]);const y=g[t];return y?e.jsxs(c,{$active:o,$showCount:m,onClick:()=>{d(),h(!0),setTimeout(()=>h(!1),600)},children:[e.jsx(r.ReactionEmoji,{emojiId:y.id,coordinates:y.coordinates,size:l,sparkleOnMount:j}),m&&e.jsx(i.P,{$fontSize:12,$color:"grey-5",children:u})]}):null};

package/dist/components/surfaces/post/post.js

@@ -1,5 +1,5 @@
 "use client";
-"use strict";var e=require("react/jsx-runtime"),t=require("react"),i=require("next/image"),r=require("next/link"),n=require("styled-components"),o=require("react-show-more-text"),s=require("../../../common/regex.js"),l=require("../../atoms/box/box.js"),a=require("../../atoms/highlighter/highlighter.js"),d=require("../../atoms/typography/heading.js"),c=require("../../atoms/typography/paragraph.js"),h=require("../modal/modal.js");require("../../atoms/typography/display.js"),require("../../atoms/typography/typography.js");var u=require("../../atoms/time_ago/time_ago.js");require("../../atoms/countdown/countdown.js");var p=require("../../iconography/avatar/avatar.js"),x=require("../../../icons/security/lock.js"),g=require("../../../icons/arrow/chevron_left.js"),f=require("../../../icons/arrow/chevron_right.js"),m=require("../../media/video/video.js");require("../../iconography/icon/icon.js");var y=require("../../../icons/audio_video/play.js");function j(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("../../../icons/basic/subtask.js"),require("../../../icons/security/verified_filled.js"),require("../../../common/colors.js");var v=j(t),b=j(i),w=j(r),$=j(o);const k=n.styled.div`
+"use strict";var e=require("react/jsx-runtime"),t=require("react"),i=require("next/image"),r=require("next/link"),o=require("styled-components"),n=require("react-show-more-text"),s=require("../../../common/regex.js"),l=require("../../atoms/box/box.js"),a=require("../../atoms/highlighter/highlighter.js"),d=require("../../atoms/typography/heading.js"),c=require("../../atoms/typography/paragraph.js"),h=require("../modal/modal.js");require("../../atoms/image/image.js"),require("../../atoms/layout/container.js"),require("../../atoms/layout/grid.js"),require("../../atoms/layout/inline.js"),require("../../atoms/layout/section.js"),require("../../atoms/typography/display.js"),require("../../atoms/typography/typography.js");var u=require("../../atoms/time_ago/time_ago.js");require("../../atoms/countdown/countdown.js");var p=require("../../iconography/avatar/avatar.js"),x=require("../../../icons/security/lock.js"),g=require("../../../icons/arrow/chevron_left.js"),m=require("../../../icons/arrow/chevron_right.js"),f=require("../../media/video/video.js");require("../../iconography/icon/icon.js");var y=require("../../../icons/audio_video/play.js");function j(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("../../../icons/basic/subtask.js"),require("../../../icons/security/verified_filled.js"),require("../../../common/colors.js");var v=j(t),b=j(i),w=j(r),$=j(n);const k=o.styled.div`
   position: relative;
   max-width: 700px;
   width: 100%;
@@ -16,18 +16,18 @@
     text-decoration: underline;
     cursor: pointer;
   }
-`;n.styled.button`
+`;o.styled.button`
   background: none;
   border: none;
   cursor: pointer;
   color: var(--color-grey-5);
-`;const q=n.styled.div`
+`;const q=o.styled.div`
   padding: 16px 24px;
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   border-bottom: 1px solid var(--color-grey-9);
-`,C=n.styled.div`
+`,C=o.styled.div`
   position: absolute;
   width: 100%;
   height: 100%;
@@ -41,7 +41,7 @@
   background: var(--color-grey-0);
   border-radius: inherit;
   overflow: hidden;
-`,z=n.styled.div`
+`,z=o.styled.div`
   position: absolute;
   width: 64px;
   height: 64px;
@@ -56,7 +56,7 @@
   z-index: 3;
   pointer-events: none;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-`,H=n.styled.div`
+`,H=o.styled.div`
   position: relative;
   display: flex;
   gap: 8px;
@@ -75,7 +75,7 @@
   }
 
   ${({$numImages:e})=>e>1?"\n    div {\n      min-width: calc(50% - 4px);\n      max-width: calc(50% - 4px);\n\n      flex:1;\n      img {\n        object-fit: cover;\n        width: 100%;\n        height: 100%;\n      }\n    }":"\n    div > img {\n      object-fit: contain;\n      width: 100%;\n      height: 100%;\n    }\n    "}
-`,P=n.styled.div`
+`,P=o.styled.div`
   position: relative;
   aspect-ratio: 700 / 427;
   flex: 1;
@@ -90,11 +90,11 @@
     height: 100%;
     pointer-events: none;
   }
-`,S=n.styled.div`
+`,S=o.styled.div`
   position: relative;
   width: 100%;
   height: 480px;
-`,R=n.styled.div`
+`,R=o.styled.div`
   position: relative;
   display: flex;
   flex-direction: column;
@@ -104,17 +104,17 @@
   justify-content: center;
   gap: 16px;
   overflow: hidden;
-`,E=n.styled.div`
+`,E=o.styled.div`
   display: flex;
   justify-content: space-around;
   align-items: center;
   padding: 24px;
-`,L=n.styled.div`
+`,L=o.styled.div`
   padding: 24px;
   display: flex;
   flex-flow: column nowrap;
   gap: 24px;
-`,_=n.styled.button`
+`,_=o.styled.button`
   width: 48px;
   height: 150px;
   display: flex;
@@ -130,7 +130,7 @@
   &:hover {
     background-color: rgba(0, 0, 0, 0.2);
   }
-`,U=n.styled.div`
+`,U=o.styled.div`
   margin-top: 24px;
   border-radius: 32px;
   border: 1px solid var(--color-grey-8);
@@ -138,4 +138,4 @@
   padding: 6px 16px;
   width: fit-content;
   cursor: pointer;
-`;exports.Post=({actions:t,author:i,authorActive:r,authorHref:n,authorImage:o,avatarTooltipContent:j,avatarTooltipSx:A,children:B,content:I,createdDate:M,dropdown:T,hasComments:F,id:W,images:D,isPaidUser:J,isPaywalled:V=!1,link:X,video:G,onJoin:N,monthlyMembershipPrice:O,onImageClick:Y})=>{const K=v.default.useId(),Q=v.default.useRef(null),[Z,ee]=v.default.useState(!1),[te,ie]=v.default.useState(-1),[re,ne]=v.default.useState(!1);v.default.useRef(null);const[oe,se]=v.default.useState(-1),[le,ae]=v.default.useState({x:"30vw",y:"30vh"}),de=!!G?.url&&!!G?.thumbnail,ce=G?.displayHtmlVideo,[he,ue]=v.default.useState(!1),pe=v.default.useRef(null);v.default.useEffect(()=>{if(Q.current&&I?.length>0){const e=24,t=Math.ceil(Q.current.offsetHeight/e);if(ie(t),!Z)try{const t=Q.current.style.webkitLineClamp;Q.current.style.webkitLineClamp="none";const i=Q.current.offsetHeight,r=Math.ceil(i/e);Q.current.style.webkitLineClamp=t,ne(r>3)}catch(e){ne(t>=3)}}else ie(-1),ne(!1)},[I,Z]),v.default.useEffect(()=>{const e=e=>{"ArrowLeft"===e.key?me():"ArrowRight"===e.key?fe():"Escape"!==e.key&&"Enter"!==e.key||se(-1)};return"undefined"!=typeof document&&D?.length&&oe>-1&&document.addEventListener("keydown",e),()=>{D?.length&&document.removeEventListener("keydown",e)}},[]);const xe=v.default.Children.toArray(t),ge=v.default.Children.toArray(B),fe=()=>{se(e=>D?.length&&e!==D.length-1?e+1:e)},me=()=>{se(e=>D?.length&&0!==e?e-1:e)};return e.jsxs(k,{id:W,children:[oe>-1&&!!D?.[oe]&&e.jsx(h.Modal,{alwaysRender:!1,controlledOpen:!0,onChange:e=>!e&&se(-1),children:e.jsxs(h.Modal.Content,{sx:`\n            position: relative; \n            height: ${le.y}; \n            width: ${le.x};\n            margin: 0 auto;\n            `,children:[e.jsx(_,{$side:"left",$visible:0!==oe,onClick:me,children:e.jsx(g.ChevronLeft,{color:"white",size:48})}),e.jsx(b.default,{alt:"",fill:!0,quality:100,onLoad:e=>{const{naturalHeight:t,naturalWidth:i}=e.target;let r=`${i}px`,n=`${t}px`;window?.innerHeight<t&&window?.innerWidth<i?(r=`${Math.floor(.95*window.innerHeight*i/t)}px`,n=`${Math.round(.95*window.innerWidth*t/i)}px`):window?.innerHeight<t?(r=`${Math.floor(.95*window.innerHeight*i/t)}px`,n="95vh"):window?.innerWidth<i&&(r="95vw",n=`${Math.round(.95*window.innerWidth*t/i)}px`),ae({x:r,y:n})},draggable:!1,priority:!0,sizes:"100vw",src:D[oe],style:{objectFit:"cover"}}),e.jsx(_,{$side:"right",$visible:oe!==D.length-1,onClick:fe,children:e.jsx(f.ChevronRight,{color:"white",size:48})})]})}),e.jsxs(q,{children:[o&&"/images/default_avatar.png"!==o?e.jsx(p.Avatar,{isPaidUser:J,as:n?w.default:"button",href:n,image:o,size:64,status:r?"online":void 0,subtitle:e.jsx(c.P,{as:"span",sx:"vertical-align: top;",$fontSize:14,$lineHeight:20,children:e.jsx(u.TimeAgo,{date:new Date(M)})}),title:e.jsx(d.H,{as:n?w.default:"span",href:n,sx:"text-decoration:none;",$bold:!0,$fontSize:18,$lineHeight:26,children:i}),textPosition:"right",tooltipContent:j,tooltipSx:A,sx:n?"img { cursor: pointer; }":void 0}):e.jsxs(l.Box,{$align:"center",$gap:12,children:[e.jsx(p.Avatar.Initials,{name:i||"U",size:64}),e.jsxs(l.Box,{$dir:"column",children:[e.jsx(d.H,{as:n?w.default:"span",href:n,sx:"text-decoration:none;",$bold:!0,$fontSize:18,$lineHeight:26,children:i}),e.jsx(c.P,{as:"span",sx:"vertical-align: top;",$fontSize:14,$lineHeight:20,children:e.jsx(u.TimeAgo,{date:new Date(M)})})]})]}),T]}),!!I?.length&&e.jsxs("div",{style:{padding:"16px 24px"},children:[V&&te>1?e.jsx($.default,{lines:2,more:"Continue Reading",onClick:N,anchorClass:"see-more",expanded:!1,truncatedEndingComponent:"... ",children:e.jsx(c.P,{$sx:"white-space: pre-line; word-break: break-word;",$textClampLines:2,children:e.jsx(a.Highlighter,{highlightRender:t=>e.jsx(c.P,{as:"span",$color:"primary-blue-2",children:e.jsx(w.default,{href:t,target:"_blank",children:t})}),seperator:s.URL_REGEX,text:I})})}):e.jsxs(e.Fragment,{children:[e.jsx(c.P,{$sx:"white-space: pre-line; word-break: break-word;",innerRef:Q,$textClampLines:Z?void 0:5,children:e.jsx(a.Highlighter,{highlightRender:t=>e.jsx(c.P,{as:"span",$color:"primary-blue-2",children:e.jsx(w.default,{href:t,target:"_blank",children:t})}),seperator:s.URL_REGEX,text:V&&1===te?"This is a premium post. Join to the membership to unlock the full access.":I})}),re&&!V?e.jsx(c.P,{$color:"grey-5",sx:"cursor:pointer;",$mediumBold:!0,$fontSize:14,onClick:()=>ee(e=>!e),children:Z?"See less":"See more"}):null]}),V&&!D?.length&&e.jsx(U,{onClick:N,children:e.jsxs(c.P,{$fontSize:14,$mediumBold:!0,children:["Join now for $",O," per month"]})})]}),V&&!!D?.length&&!de&&e.jsxs(R,{children:[e.jsx(b.default,{alt:"",width:650,height:427,priority:!0,quality:100,src:D[0],style:{objectFit:"fill",height:"100%",width:"100%",filter:"blur(60px)",position:"absolute",top:0,left:"50%",transform:"translateX(-50%)"}}),e.jsx(x.Lock,{size:40,color:"white",sx:"z-index: 1"}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",zIndex:1},children:[e.jsx(c.P,{$color:"white",$fontSize:14,$bold:!0,$lineHeight:20,children:"Become a member"}),e.jsx(c.P,{$color:"white",$fontSize:14,$bold:!0,$lineHeight:20,children:"to unlock this post"})]}),e.jsx(U,{onClick:N,style:{zIndex:1,marginTop:0},children:e.jsxs(c.P,{$fontSize:14,$mediumBold:!0,children:["Join now for $",O," per month"]})})]}),!!D?.length&&!de&&!V&&e.jsxs(H,{$numImages:D.length,children:[D.slice(0,4).map((t,i)=>e.jsx(P,{children:e.jsx(b.default,{alt:"",fill:!0,onClick:()=>{Y?.(i),se(i)},quality:100,src:t,draggable:!1,style:{cursor:"pointer",objectFit:"cover"}})},`${K}${t.slice(0,15)}${i}`)),D.length>4&&e.jsxs(d.H,{as:"p",className:"more-than",sx:"pointer-events: none;",$color:"grey-10",$fontSize:28,$lineHeight:36,$semiBold:!0,children:["+",D.length-4]})]}),!D?.length&&!de&&X&&!V&&e.jsxs(w.default,{href:X.url,target:"_blank",children:[e.jsx(P,{children:e.jsx(b.default,{alt:"",fill:!0,quality:100,src:X.imageUrl,draggable:!1,style:{cursor:"pointer",objectFit:"cover"}})}),e.jsxs(l.Box,{$dir:"column",$gap:8,sx:"padding: 8px 16px;",children:[e.jsx(c.P,{$color:"grey-2",$semiBold:!0,children:X.title}),e.jsx(c.P,{$color:"grey-5",children:X.description})]})]}),de&&e.jsx(S,{children:ce?he?e.jsxs("video",{ref:pe,style:{width:"100%",height:"100%"},controls:!0,playsInline:!0,poster:G.thumbnail,children:[G.videoUrls.webm&&e.jsx("source",{src:G.videoUrls.webm,type:"video/webm; codecs=vp9"}),G.videoUrls.mp4&&e.jsx("source",{src:G.videoUrls.mp4,type:"video/mp4; codecs=avc1.42E01E"}),"Your browser does not support the video tag."]}):e.jsxs(C,{onClick:()=>{ue(!0),setTimeout(()=>{pe.current?.play()},100)},children:[e.jsx(b.default,{src:G.thumbnail,alt:"Video thumbnail",fill:!0,style:{objectFit:"cover",borderRadius:"inherit"},priority:!0,draggable:!1}),e.jsx(z,{children:e.jsx(y.Play,{size:32,color:"white"})})]}):e.jsx(m.Video,{src:G.url,thumbnail:G.thumbnail,subtitles:[],title:G?.title})}),!!xe.length&&e.jsx(E,{children:!V&&xe}),F&&!!ge.length&&e.jsx(L,{children:ge})]})};
+`;exports.Post=({actions:t,author:i,authorActive:r,authorHref:o,authorImage:n,avatarTooltipContent:j,avatarTooltipSx:A,children:B,content:I,createdDate:M,dropdown:T,hasComments:F,id:W,images:D,isPaidUser:J,isPaywalled:V=!1,link:X,video:G,onJoin:N,monthlyMembershipPrice:O,onImageClick:Y})=>{const K=v.default.useId(),Q=v.default.useRef(null),[Z,ee]=v.default.useState(!1),[te,ie]=v.default.useState(-1),[re,oe]=v.default.useState(!1);v.default.useRef(null);const[ne,se]=v.default.useState(-1),[le,ae]=v.default.useState({x:"30vw",y:"30vh"}),de=!!G?.url&&!!G?.thumbnail,ce=G?.displayHtmlVideo,[he,ue]=v.default.useState(!1),pe=v.default.useRef(null);v.default.useEffect(()=>{if(Q.current&&I?.length>0){const e=24,t=Math.ceil(Q.current.offsetHeight/e);if(ie(t),!Z)try{const t=Q.current.style.webkitLineClamp;Q.current.style.webkitLineClamp="none";const i=Q.current.offsetHeight,r=Math.ceil(i/e);Q.current.style.webkitLineClamp=t,oe(r>3)}catch(e){oe(t>=3)}}else ie(-1),oe(!1)},[I,Z]),v.default.useEffect(()=>{const e=e=>{"ArrowLeft"===e.key?fe():"ArrowRight"===e.key?me():"Escape"!==e.key&&"Enter"!==e.key||se(-1)};return"undefined"!=typeof document&&D?.length&&ne>-1&&document.addEventListener("keydown",e),()=>{D?.length&&document.removeEventListener("keydown",e)}},[]);const xe=v.default.Children.toArray(t),ge=v.default.Children.toArray(B),me=()=>{se(e=>D?.length&&e!==D.length-1?e+1:e)},fe=()=>{se(e=>D?.length&&0!==e?e-1:e)};return e.jsxs(k,{id:W,children:[ne>-1&&!!D?.[ne]&&e.jsx(h.Modal,{alwaysRender:!1,controlledOpen:!0,onChange:e=>!e&&se(-1),children:e.jsxs(h.Modal.Content,{sx:`\n            position: relative; \n            height: ${le.y}; \n            width: ${le.x};\n            margin: 0 auto;\n            `,children:[e.jsx(_,{$side:"left",$visible:0!==ne,onClick:fe,children:e.jsx(g.ChevronLeft,{color:"white",size:48})}),e.jsx(b.default,{alt:"",fill:!0,quality:100,onLoad:e=>{const{naturalHeight:t,naturalWidth:i}=e.target;let r=`${i}px`,o=`${t}px`;window?.innerHeight<t&&window?.innerWidth<i?(r=`${Math.floor(.95*window.innerHeight*i/t)}px`,o=`${Math.round(.95*window.innerWidth*t/i)}px`):window?.innerHeight<t?(r=`${Math.floor(.95*window.innerHeight*i/t)}px`,o="95vh"):window?.innerWidth<i&&(r="95vw",o=`${Math.round(.95*window.innerWidth*t/i)}px`),ae({x:r,y:o})},draggable:!1,priority:!0,sizes:"100vw",src:D[ne],style:{objectFit:"cover"}}),e.jsx(_,{$side:"right",$visible:ne!==D.length-1,onClick:me,children:e.jsx(m.ChevronRight,{color:"white",size:48})})]})}),e.jsxs(q,{children:[n&&"/images/default_avatar.png"!==n?e.jsx(p.Avatar,{isPaidUser:J,as:o?w.default:"button",href:o,image:n,size:64,status:r?"online":void 0,subtitle:e.jsx(c.P,{as:"span",sx:"vertical-align: top;",$fontSize:14,$lineHeight:20,children:e.jsx(u.TimeAgo,{date:new Date(M)})}),title:e.jsx(d.H,{as:o?w.default:"span",href:o,sx:"text-decoration:none;",$bold:!0,$fontSize:18,$lineHeight:26,children:i}),textPosition:"right",tooltipContent:j,tooltipSx:A,sx:o?"img { cursor: pointer; }":void 0}):e.jsxs(l.Box,{$align:"center",$gap:12,children:[e.jsx(p.Avatar.Initials,{name:i||"U",size:64}),e.jsxs(l.Box,{$dir:"column",children:[e.jsx(d.H,{as:o?w.default:"span",href:o,sx:"text-decoration:none;",$bold:!0,$fontSize:18,$lineHeight:26,children:i}),e.jsx(c.P,{as:"span",sx:"vertical-align: top;",$fontSize:14,$lineHeight:20,children:e.jsx(u.TimeAgo,{date:new Date(M)})})]})]}),T]}),!!I?.length&&e.jsxs("div",{style:{padding:"16px 24px"},children:[V&&te>1?e.jsx($.default,{lines:2,more:"Continue Reading",onClick:N,anchorClass:"see-more",expanded:!1,truncatedEndingComponent:"... ",children:e.jsx(c.P,{$sx:"white-space: pre-line; word-break: break-word;",$textClampLines:2,children:e.jsx(a.Highlighter,{highlightRender:t=>e.jsx(c.P,{as:"span",$color:"primary-blue-2",children:e.jsx(w.default,{href:t,target:"_blank",children:t})}),seperator:s.URL_REGEX,text:I})})}):e.jsxs(e.Fragment,{children:[e.jsx(c.P,{$sx:"white-space: pre-line; word-break: break-word;",innerRef:Q,$textClampLines:Z?void 0:5,children:e.jsx(a.Highlighter,{highlightRender:t=>e.jsx(c.P,{as:"span",$color:"primary-blue-2",children:e.jsx(w.default,{href:t,target:"_blank",children:t})}),seperator:s.URL_REGEX,text:V&&1===te?"This is a premium post. Join to the membership to unlock the full access.":I})}),re&&!V?e.jsx(c.P,{$color:"grey-5",sx:"cursor:pointer;",$mediumBold:!0,$fontSize:14,onClick:()=>ee(e=>!e),children:Z?"See less":"See more"}):null]}),V&&!D?.length&&e.jsx(U,{onClick:N,children:e.jsxs(c.P,{$fontSize:14,$mediumBold:!0,children:["Join now for $",O," per month"]})})]}),V&&!!D?.length&&!de&&e.jsxs(R,{children:[e.jsx(b.default,{alt:"",width:650,height:427,priority:!0,quality:100,src:D[0],style:{objectFit:"fill",height:"100%",width:"100%",filter:"blur(60px)",position:"absolute",top:0,left:"50%",transform:"translateX(-50%)"}}),e.jsx(x.Lock,{size:40,color:"white",sx:"z-index: 1"}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",zIndex:1},children:[e.jsx(c.P,{$color:"white",$fontSize:14,$bold:!0,$lineHeight:20,children:"Become a member"}),e.jsx(c.P,{$color:"white",$fontSize:14,$bold:!0,$lineHeight:20,children:"to unlock this post"})]}),e.jsx(U,{onClick:N,style:{zIndex:1,marginTop:0},children:e.jsxs(c.P,{$fontSize:14,$mediumBold:!0,children:["Join now for $",O," per month"]})})]}),!!D?.length&&!de&&!V&&e.jsxs(H,{$numImages:D.length,children:[D.slice(0,4).map((t,i)=>e.jsx(P,{children:e.jsx(b.default,{alt:"",fill:!0,onClick:()=>{Y?.(i),se(i)},quality:100,src:t,draggable:!1,style:{cursor:"pointer",objectFit:"cover"}})},`${K}${t.slice(0,15)}${i}`)),D.length>4&&e.jsxs(d.H,{as:"p",className:"more-than",sx:"pointer-events: none;",$color:"grey-10",$fontSize:28,$lineHeight:36,$semiBold:!0,children:["+",D.length-4]})]}),!D?.length&&!de&&X&&!V&&e.jsxs(w.default,{href:X.url,target:"_blank",children:[e.jsx(P,{children:e.jsx(b.default,{alt:"",fill:!0,quality:100,src:X.imageUrl,draggable:!1,style:{cursor:"pointer",objectFit:"cover"}})}),e.jsxs(l.Box,{$dir:"column",$gap:8,sx:"padding: 8px 16px;",children:[e.jsx(c.P,{$color:"grey-2",$semiBold:!0,children:X.title}),e.jsx(c.P,{$color:"grey-5",children:X.description})]})]}),de&&e.jsx(S,{children:ce?he?e.jsxs("video",{ref:pe,style:{width:"100%",height:"100%"},controls:!0,playsInline:!0,poster:G.thumbnail,children:[G.videoUrls.webm&&e.jsx("source",{src:G.videoUrls.webm,type:"video/webm; codecs=vp9"}),G.videoUrls.mp4&&e.jsx("source",{src:G.videoUrls.mp4,type:"video/mp4; codecs=avc1.42E01E"}),"Your browser does not support the video tag."]}):e.jsxs(C,{onClick:()=>{ue(!0),setTimeout(()=>{pe.current?.play()},100)},children:[e.jsx(b.default,{src:G.thumbnail,alt:"Video thumbnail",fill:!0,style:{objectFit:"cover",borderRadius:"inherit"},priority:!0,draggable:!1}),e.jsx(z,{children:e.jsx(y.Play,{size:32,color:"white"})})]}):e.jsx(f.Video,{src:G.url,thumbnail:G.thumbnail,subtitles:[],title:G?.title})}),!!xe.length&&e.jsx(E,{children:!V&&xe}),F&&!!ge.length&&e.jsx(L,{children:ge})]})};

package/dist/components/surfaces/success_modal/success-modal.js

@@ -1,4 +1,4 @@
-"use strict";var e=require("react/jsx-runtime");require("../../atoms/box/box.js"),require("../../atoms/highlighter/highlighter.js"),require("../../atoms/typography/display.js"),require("../../atoms/typography/heading.js");var t=require("../../atoms/typography/paragraph.js");require("../../atoms/typography/typography.js"),require("../../atoms/countdown/countdown.js"),require("../../iconography/icon/icon.js");var r=require("../../../icons/basic/close.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("../../../icons/basic/subtask.js"),require("../../../icons/security/verified_filled.js"),require("../../../common/colors.js");var o=i(require("styled-components"));const n=o.default.div`
+"use strict";var e=require("react/jsx-runtime");require("../../atoms/box/box.js"),require("../../atoms/image/image.js"),require("../../atoms/layout/container.js"),require("../../atoms/layout/grid.js"),require("../../atoms/layout/inline.js"),require("../../atoms/layout/section.js"),require("../../atoms/highlighter/highlighter.js"),require("../../atoms/typography/display.js"),require("../../atoms/typography/heading.js");var t=require("../../atoms/typography/paragraph.js");require("../../atoms/typography/typography.js"),require("../../atoms/countdown/countdown.js"),require("../../iconography/icon/icon.js");var r=require("../../../icons/basic/close.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("../../../icons/basic/subtask.js"),require("../../../icons/security/verified_filled.js"),require("../../../common/colors.js");var o=i(require("styled-components"));const n=o.default.div`
   position: fixed;
   top: 0;
   left: 0;
@@ -123,7 +123,7 @@
   letter-spacing: -0.084px;
   font-family: var(--font-inter);
   text-align: center;
-`,h=o.default.div`
+`,u=o.default.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -132,4 +132,4 @@
   justify-content: center;
   /* mx auto */
   margin: 0 auto;
-`;exports.SuccessModal=({onClose:t,title:i,message:o,actionText:u,onAction:f,openAppText:m="Open in the app",openAppAction:y=()=>{}})=>e.jsx(n,{children:e.jsxs(a,{children:[e.jsx(l,{onClick:t,children:e.jsx(r.Close,{})}),e.jsx(s,{children:i}),e.jsx(p,{children:e.jsx(c,{viewBox:"0 0 24 24",children:e.jsx("path",{d:"M9 16.17L4.83 12l-1.42 1.41L9 19l12-12-1.41-1.41z"})})}),e.jsx(g,{children:o}),e.jsxs(h,{children:[e.jsx(d,{onClick:f,children:u}),e.jsx(x,{onClick:y,children:m})]})]})});
+`;exports.SuccessModal=({onClose:t,title:i,message:o,actionText:h,onAction:m,openAppText:f="Open in the app",openAppAction:y=()=>{}})=>e.jsx(n,{children:e.jsxs(a,{children:[e.jsx(l,{onClick:t,children:e.jsx(r.Close,{})}),e.jsx(s,{children:i}),e.jsx(p,{children:e.jsx(c,{viewBox:"0 0 24 24",children:e.jsx("path",{d:"M9 16.17L4.83 12l-1.42 1.41L9 19l12-12-1.41-1.41z"})})}),e.jsx(g,{children:o}),e.jsxs(u,{children:[e.jsx(d,{onClick:m,children:h}),e.jsx(x,{onClick:y,children:f})]})]})});

package/dist/index.js

@@ -1 +1 @@
-"use strict";var e=require("./components/actions/button/button.js"),o=require("./components/actions/dropdown/dropdown.js"),r=require("./components/actions/rate/rate.js"),s=require("./components/actions/switch/switch.js"),t=require("./components/actions/toggle/toggle.js"),n=require("./components/actions/upload/upload.js"),i=require("./components/actions/AccountSelector/selector.js"),a=require("./components/actions/stepIndicator/stepIndicator.js"),p=require("./components/atoms/box/box.js"),c=require("./components/atoms/hide/hide.js"),u=require("./components/atoms/highlighter/highlighter.js"),d=require("./components/atoms/seconds_to_duration/seconds_to_duration.js"),m=require("./components/atoms/typography/display.js"),l=require("./components/atoms/typography/heading.js"),x=require("./components/atoms/typography/paragraph.js"),j=require("./components/atoms/typography/typography.js"),q=require("./components/atoms/time_ago/time_ago.js"),g=require("./components/atoms/countdown/countdown.js"),b=require("./components/card/card.js"),h=require("./components/card/simple-course/horizontal-course-card.js"),y=require("./components/editor/editor.js"),C=require("./components/editor/simple_editor/simple_editor.js"),f=require("./components/editor/minimal_editor/minimal_editor.js"),w=require("./components/feedback/badge/badge.js"),T=require("./components/feedback/banner/banner.js"),_=require("./components/feedback/loader/loader.js"),P=require("./components/feedback/notification/notification.js"),S=require("./components/feedback/progress/progress.js"),k=require("./components/feedback/toast/toast.js"),v=require("./components/feedback/tooltip/tooltip.js"),A=require("./components/feedback/animated_toast/animated_toast.js"),D=require("./components/feedback/emojiPicker/emoji-picker.js"),I=require("./components/feedback/emojiPicker/emoji-reactions.js"),B=require("./components/feedback/videoLoader/videoLoader.js"),M=require("./components/iconography/avatar/avatar.js"),E=require("./components/iconography/icon/icon.js"),H=require("./components/input/checkbox/checkbox.js"),R=require("./components/input/counter/counter.js"),L=require("./components/input/date/date.js"),N=require("./components/input/filter/filter.js"),V=require("./components/input/radio/radio.js"),U=require("./components/input/search/search.js"),z=require("./components/input/select/select.js"),F=require("./components/input/text_area/text_area.js"),G=require("./components/input/text_input/text_input.js"),J=require("./components/input/calendar/calendar.js"),K=require("./components/input/time/time.js"),O=require("./components/input/time_input/time_input.js"),Q=require("./components/input/dropdown-select/dropdown-select.js"),W=require("./components/media/audio-player/audio-player.js"),X=require("./components/media/audio-playlist/audio-playlist.js"),Y=require("./components/media/audio-preview/audio-preview.js"),Z=require("./components/media/video/video.js"),$=require("./components/media/video-player/video.js"),ee=require("./components/media/audio-playlist/playing_indicator.js"),oe=require("./components/navigation/breadcrumb/breadcrumb.js"),re=require("./components/navigation/inner/inner.js"),se=require("./components/navigation/tabs/tabs.js"),te=require("./components/navigation/tabs/custom-tabs.js"),ne=require("./components/surfaces/accordion/accordion.js"),ie=require("./components/surfaces/carousel/card/card.js"),ae=require("./components/surfaces/comment/comment.js"),pe=require("./components/surfaces/discuss_post/discuss_post.js"),ce=require("./components/surfaces/drawer/drawer.js"),ue=require("./components/surfaces/drawer/bottom-drawer.js"),de=require("./components/surfaces/message/message.js"),me=require("./components/surfaces/modal/modal.js"),le=require("./components/surfaces/portal/portal.js"),xe=require("./components/surfaces/post/post.js"),je=require("./components/surfaces/calendar_date/calendar_date.js"),qe=require("./components/surfaces/success_modal/success-modal.js"),ge=require("./components/surfaces/trailer-modal/trailer-modal.js"),be=require("./components/table/table/table.js"),he=require("./components/custom/users_selection/users_selection.js"),ye=require("./components/custom/courses_selection/courses_selection.js"),Ce=require("./components/animation/carousel/Carousel.js"),fe=require("./components/animation/marquee/Marquee.js"),we=require("./icons/index.js"),Te=require("./emoji/emojis.json.js");exports.Button=e.Button,exports.Dropdown=o.Dropdown,exports.Rate=r.Rate,exports.Switch=s.Switch,exports.Toggle=t.Toggle,exports.Upload=n.Upload,exports.AccountSelector=i.AccountSelector,exports.StepIndicator=a.StepIndicator,exports.Box=p.Box,exports.HideButRender=c.HideButRender,exports.Highlighter=u.Highlighter,exports.SecToDuration=d.SecToDuration,exports.Display=m.Display,exports.H=l.H,exports.P=x.P,exports.Typography=j.Typography,exports.TimeAgo=q.TimeAgo,exports.Countdown=g.Countdown,exports.Card=b.Card,exports.HorizontalCourseCard=h.HorizontalCourseCard,exports.Editor=y.Editor,exports.SimpleEditor=C.SimpleEditor,exports.MinimalEditor=f.MinimalEditor,exports.Badge=w.Badge,exports.Banner=T.Banner,exports.Loader=_.Loader,exports.Notification=P.Notification,exports.Progress=S.Progress,exports.Toast=k.Toast,exports.Tooltip=v.Tooltip,exports.AnimatedToast=A.AnimatedToast,exports.CustomEmojiPicker=D.CustomEmojiPicker,exports.EmojiReaction=I.EmojiReaction,exports.VideoLoader=B.VideoLoader,exports.Avatar=M.Avatar,exports.Icon=E.Icon,exports.Checkbox=H.Checkbox,exports.Counter=R.Counter,exports.DatePicker=L.DatePicker,exports.Filter=N.Filter,exports.Radio=V.Radio,exports.Search=U.Search,exports.Select=z.Select,exports.TextArea=F.TextArea,exports.TextInput=G.TextInput,exports.CalendarInput=J.CalendarInput,exports.Time=K.Time,exports.TimeInput=O.TimeInput,exports.DropdownSelect=Q.DropdownSelect,exports.AudioPlayer=W.AudioPlayer,exports.AudioPlaylist=X.AudioPlaylist,exports.AudioPreview=Y.AudioPreview,exports.Video=Z.Video,exports.VideoPlayer=$.VideoPlayer,exports.NowPlaying=ee.NowPlaying,exports.Breadcrumb=oe.Breadcrumb,exports.InnerNav=re.InnerNav,exports.Tabs=se.Tabs,exports.CustomTabs=te.CustomTabs,exports.Accordion=ne.Accordion,exports.CardCarousel=ie.CardCarousel,exports.Comment=ae.Comment,exports.DiscussPost=pe.DiscussPost,exports.Drawer=ce.Drawer,exports.BottomDrawer=ue.BottomDrawer,exports.Message=de.Message,exports.Modal=me.Modal,exports.Portal=le.Portal,exports.Post=xe.Post,exports.CalendarDate=je.CalendarDate,exports.SuccessModal=qe.SuccessModal,exports.TrailerModal=ge.TrailerModal,exports.Table=be.Table,exports.UsersSelection=he.UsersSelection,exports.CoursesSelection=ye.CoursesSelection,exports.Carousel=Ce.Carousel,exports.Marquee=fe.Marquee,exports.Icons=we,exports.emoji=Te;
+"use strict";var e=require("./components/actions/button/button.js"),o=require("./components/actions/dropdown/dropdown.js"),r=require("./components/actions/rate/rate.js"),t=require("./components/actions/switch/switch.js"),s=require("./components/actions/toggle/toggle.js"),n=require("./components/actions/upload/upload.js"),i=require("./components/actions/AccountSelector/selector.js"),a=require("./components/actions/stepIndicator/stepIndicator.js"),p=require("./components/atoms/box/box.js"),c=require("./components/atoms/image/image.js"),u=require("./components/atoms/layout/container.js"),m=require("./components/atoms/layout/grid.js"),d=require("./components/atoms/layout/inline.js"),l=require("./components/atoms/layout/section.js"),x=require("./components/atoms/layout/stack.js"),j=require("./components/atoms/hide/hide.js"),q=require("./components/atoms/highlighter/highlighter.js"),g=require("./components/atoms/seconds_to_duration/seconds_to_duration.js"),b=require("./components/atoms/typography/display.js"),y=require("./components/atoms/typography/heading.js"),h=require("./components/atoms/typography/paragraph.js"),C=require("./components/atoms/typography/typography.js"),f=require("./components/atoms/time_ago/time_ago.js"),w=require("./components/atoms/countdown/countdown.js"),T=require("./components/card/card.js"),_=require("./components/card/simple-course/horizontal-course-card.js"),S=require("./components/editor/editor.js"),P=require("./components/editor/simple_editor/simple_editor.js"),k=require("./components/editor/minimal_editor/minimal_editor.js"),v=require("./components/feedback/badge/badge.js"),A=require("./components/feedback/banner/banner.js"),I=require("./components/feedback/loader/loader.js"),D=require("./components/feedback/notification/notification.js"),B=require("./components/feedback/progress/progress.js"),M=require("./components/feedback/toast/toast.js"),E=require("./components/feedback/tooltip/tooltip.js"),H=require("./components/feedback/animated_toast/animated_toast.js"),R=require("./components/feedback/emojiPicker/emoji-picker.js"),L=require("./components/feedback/emojiPicker/emoji-reactions.js"),N=require("./components/feedback/videoLoader/videoLoader.js"),V=require("./components/iconography/avatar/avatar.js"),U=require("./components/iconography/icon/icon.js"),z=require("./components/input/checkbox/checkbox.js"),F=require("./components/input/counter/counter.js"),G=require("./components/input/date/date.js"),J=require("./components/input/filter/filter.js"),K=require("./components/input/radio/radio.js"),O=require("./components/input/search/search.js"),Q=require("./components/input/select/select.js"),W=require("./components/input/text_area/text_area.js"),X=require("./components/input/text_input/text_input.js"),Y=require("./components/input/calendar/calendar.js"),Z=require("./components/input/time/time.js"),$=require("./components/input/time_input/time_input.js"),ee=require("./components/input/dropdown-select/dropdown-select.js"),oe=require("./components/media/audio-player/audio-player.js"),re=require("./components/media/audio-playlist/audio-playlist.js"),te=require("./components/media/audio-preview/audio-preview.js"),se=require("./components/media/video/video.js"),ne=require("./components/media/video-player/video.js"),ie=require("./components/media/audio-playlist/playing_indicator.js"),ae=require("./components/navigation/breadcrumb/breadcrumb.js"),pe=require("./components/navigation/inner/inner.js"),ce=require("./components/navigation/tabs/tabs.js"),ue=require("./components/navigation/tabs/custom-tabs.js"),me=require("./components/surfaces/accordion/accordion.js"),de=require("./components/surfaces/carousel/card/card.js"),le=require("./components/surfaces/comment/comment.js"),xe=require("./components/surfaces/discuss_post/discuss_post.js"),je=require("./components/surfaces/drawer/drawer.js"),qe=require("./components/surfaces/drawer/bottom-drawer.js"),ge=require("./components/surfaces/message/message.js"),be=require("./components/surfaces/modal/modal.js"),ye=require("./components/surfaces/portal/portal.js"),he=require("./components/surfaces/post/post.js"),Ce=require("./components/surfaces/calendar_date/calendar_date.js"),fe=require("./components/surfaces/success_modal/success-modal.js"),we=require("./components/surfaces/trailer-modal/trailer-modal.js"),Te=require("./components/table/table/table.js"),_e=require("./components/custom/users_selection/users_selection.js"),Se=require("./components/custom/courses_selection/courses_selection.js"),Pe=require("./components/animation/carousel/Carousel.js"),ke=require("./components/animation/marquee/Marquee.js"),ve=require("./icons/index.js"),Ae=require("./emoji/emojis.json.js");exports.Button=e.Button,exports.Dropdown=o.Dropdown,exports.Rate=r.Rate,exports.Switch=t.Switch,exports.Toggle=s.Toggle,exports.Upload=n.Upload,exports.AccountSelector=i.AccountSelector,exports.StepIndicator=a.StepIndicator,exports.Box=p.Box,exports.Image=c.Image,exports.Container=u.Container,exports.Grid=m.Grid,exports.Inline=d.Inline,exports.Section=l.Section,exports.Stack=x.Stack,exports.HideButRender=j.HideButRender,exports.Highlighter=q.Highlighter,exports.SecToDuration=g.SecToDuration,exports.Display=b.Display,exports.H=y.H,exports.P=h.P,exports.Typography=C.Typography,exports.TimeAgo=f.TimeAgo,exports.Countdown=w.Countdown,exports.Card=T.Card,exports.HorizontalCourseCard=_.HorizontalCourseCard,exports.Editor=S.Editor,exports.SimpleEditor=P.SimpleEditor,exports.MinimalEditor=k.MinimalEditor,exports.Badge=v.Badge,exports.Banner=A.Banner,exports.Loader=I.Loader,exports.Notification=D.Notification,exports.Progress=B.Progress,exports.Toast=M.Toast,exports.Tooltip=E.Tooltip,exports.AnimatedToast=H.AnimatedToast,exports.CustomEmojiPicker=R.CustomEmojiPicker,exports.EmojiReaction=L.EmojiReaction,exports.VideoLoader=N.VideoLoader,exports.Avatar=V.Avatar,exports.Icon=U.Icon,exports.Checkbox=z.Checkbox,exports.Counter=F.Counter,exports.DatePicker=G.DatePicker,exports.Filter=J.Filter,exports.Radio=K.Radio,exports.Search=O.Search,exports.Select=Q.Select,exports.TextArea=W.TextArea,exports.TextInput=X.TextInput,exports.CalendarInput=Y.CalendarInput,exports.Time=Z.Time,exports.TimeInput=$.TimeInput,exports.DropdownSelect=ee.DropdownSelect,exports.AudioPlayer=oe.AudioPlayer,exports.AudioPlaylist=re.AudioPlaylist,exports.AudioPreview=te.AudioPreview,exports.Video=se.Video,exports.VideoPlayer=ne.VideoPlayer,exports.NowPlaying=ie.NowPlaying,exports.Breadcrumb=ae.Breadcrumb,exports.InnerNav=pe.InnerNav,exports.Tabs=ce.Tabs,exports.CustomTabs=ue.CustomTabs,exports.Accordion=me.Accordion,exports.CardCarousel=de.CardCarousel,exports.Comment=le.Comment,exports.DiscussPost=xe.DiscussPost,exports.Drawer=je.Drawer,exports.BottomDrawer=qe.BottomDrawer,exports.Message=ge.Message,exports.Modal=be.Modal,exports.Portal=ye.Portal,exports.Post=he.Post,exports.CalendarDate=Ce.CalendarDate,exports.SuccessModal=fe.SuccessModal,exports.TrailerModal=we.TrailerModal,exports.Table=Te.Table,exports.UsersSelection=_e.UsersSelection,exports.CoursesSelection=Se.CoursesSelection,exports.Carousel=Pe.Carousel,exports.Marquee=ke.Marquee,exports.Icons=ve,exports.emoji=Ae;

package/dist/src/common/fluid-typography.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Shared fluid font-size values used by Display, Heading, and Paragraph components.
+ *
+ * Each entry maps a pixel-based font size to a CSS `clamp()` expression that
+ * scales smoothly with viewport width. The clamp format is:
+ *   clamp(min-rem, preferred-vw, max-rem)
+ *
+ * Components opt in via the `$fluid` prop.
+ */
+export declare const fluidFontSize: Partial<Record<number, string>>;
+//# sourceMappingURL=fluid-typography.d.ts.map

package/dist/src/common/fluid-typography.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fluid-typography.d.ts","sourceRoot":"","sources":["../../../src/common/fluid-typography.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAqBzD,CAAC"}

package/dist/src/common/media.d.ts

@@ -0,0 +1,24 @@
+/** Semantic breakpoint names — used by structural components (e.g. Container.$breakpoint). */
+export declare const breakpoints: {
+    readonly mobile: 480;
+    readonly 'mobile-lg': 768;
+    readonly tablet: 1024;
+    readonly desktop: 1280;
+    readonly 'desktop-hd': 1366;
+    readonly 'desktop-lg': 1440;
+    readonly wide: 1920;
+};
+export type Breakpoint = keyof typeof breakpoints;
+/** Short aliases — used in responsive value objects (sx, $dir, $cols). Same pixel values as `breakpoints`. */
+export declare const breakpointAliases: {
+    readonly xs: 480;
+    readonly sm: 768;
+    readonly md: 1024;
+    readonly lg: 1280;
+    readonly hd: 1366;
+    readonly xl: 1440;
+    readonly xxl: 1920;
+};
+export type BreakpointAlias = keyof typeof breakpointAliases;
+export declare const breakpointAliasOrder: BreakpointAlias[];
+//# sourceMappingURL=media.d.ts.map

package/dist/src/common/media.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media.d.ts","sourceRoot":"","sources":["../../../src/common/media.ts"],"names":[],"mappings":"AAAA,8FAA8F;AAC9F,eAAO,MAAM,WAAW;;;;;;;;CAQd,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,WAAW,CAAC;AAElD,8GAA8G;AAC9G,eAAO,MAAM,iBAAiB;;;;;;;;CAQpB,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,iBAAiB,CAAC;AAE7D,eAAO,MAAM,oBAAoB,EAAE,eAAe,EAQjD,CAAC"}

package/dist/src/common/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/common/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAGvD,yBAAiB,MAAM,CAAC;IACf,MAAM,eAAe,sDAG3B,CAAC;IAEK,MAAM,YAAY,mDAGxB,CAAC;IAEK,MAAM,KAAK,4CAGjB,CAAC;IAEK,MAAM,SAAS,gDAGrB,CAAC;IAEK,MAAM,IAAI,2CAYhB,CAAC;IAEK,MAAM,MAAM,6CAOlB,CAAC;IAEK,MAAM,OAAO,8CASnB,CAAC;IAEK,MAAM,SAAS,gDAErB,CAAC;IAEK,MAAM,SAAS,gDAOrB,CAAC;IAEK,MAAM,UAAU,sDAItB,CAAC;IAEK,MAAM,MAAM,uDAGlB,CAAC;CACH"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/common/styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAC5C,OAAO,EAAW,SAAS,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAyBvD,yBAAiB,MAAM,CAAC;IACf,MAAM,eAAe,sDAG3B,CAAC;IAEK,MAAM,YAAY,mDAGxB,CAAC;IAEK,MAAM,KAAK,4CAGjB,CAAC;IAEK,MAAM,SAAS,gDAGrB,CAAC;IAEK,MAAM,IAAI,2CAYhB,CAAC;IAEK,MAAM,MAAM,6CAOlB,CAAC;IAEK,MAAM,OAAO,8CASnB,CAAC;IAEK,MAAM,SAAS,gDAErB,CAAC;IAEK,MAAM,SAAS,gDAOrB,CAAC;IAEK,MAAM,UAAU,sDAItB,CAAC;IAEK,MAAM,MAAM,uDAGlB,CAAC;CACH"}

package/dist/src/common/sx.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { BreakpointAlias } from './media';
+type CSSValue = string | number;
+type ResponsiveValue = CSSValue | Partial<Record<BreakpointAlias, CSSValue>>;
+export type SxObject = {
+    [K in keyof React.CSSProperties]?: ResponsiveValue;
+};
+/**
+ * processSx
+ *
+ * Converts an `sx` prop into a CSS string for use inside a styled-component template.
+ *
+ * Desktop-first approach: component-level props (e.g. `$fontSize`) define the default
+ * for large screens. The `sx` responsive object layers max-width overrides on top,
+ * descending to smaller screens.
+ *
+ * Each property in the SxObject can be:
+ *   - A plain value:  `fontSize: '24px'`  → applied at all breakpoints
+ *   - A responsive object: `fontSize: { lg: 32, md: 24 }`
+ *     → Each key wraps in a max-width media query. The component prop value applies
+ *        above the highest defined breakpoint.
+ *
+ * Example:
+ *   <H.One $fontSize={48} sx={{ fontSize: { lg: 40, md: 32 } }} />
+ *   → above lg: 48px ($fontSize default)
+ *   → lg and below (≤1280px): 40px
+ *   → md and below (≤1024px): 32px
+ *
+ * Media queries are emitted largest-to-smallest so each smaller breakpoint
+ * correctly overrides the larger one in the cascade.
+ */
+export declare const processSx: (sx: SxObject | string | undefined) => string;
+export {};
+//# sourceMappingURL=sx.d.ts.map

package/dist/src/common/sx.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sx.d.ts","sourceRoot":"","sources":["../../../src/common/sx.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,eAAe,EAEhB,MAAM,SAAS,CAAC;AAEjB,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;AAChC,KAAK,eAAe,GAAG,QAAQ,GAAG,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAC,CAAC;AAE7E,MAAM,MAAM,QAAQ,GAAG;KACpB,CAAC,IAAI,MAAM,KAAK,CAAC,aAAa,CAAC,CAAC,EAAE,eAAe;CACnD,CAAC;AAkCF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,SAAS,OAAQ,QAAQ,GAAG,MAAM,GAAG,SAAS,KAAG,MAuC7D,CAAC"}

package/dist/src/components/actions/button/button.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { SxObject } from '../../../common/sx';
 import { IconProps } from '../../../components/iconography/icon/icon';
 type NativeProps = Pick<React.HTMLAttributes<HTMLButtonElement>, 'dangerouslySetInnerHTML' | 'onClick' | 'onMouseDown' | 'onMouseDownCapture' | 'onMouseEnter' | 'onMouseLeave' | 'onMouseOut' | 'onMouseOver' | 'onSubmit' | 'onKeyDown'> & {
     value?: string;
@@ -16,12 +17,18 @@ export interface ButtonProps extends NativeProps, React.PropsWithChildren {
     isDropdownOpen?: boolean;
     roundness?: ButtonShape;
     size?: ButtonSize;
-    sx?: string;
+    sx?: SxObject | string;
     type?: ButtonTypes;
     className?: string;
     showChevron?: boolean;
     customDropdownIcon?: React.ComponentType<IconProps>;
+    /** Override the default font size derived from `size`. */
+    $fontSize?: number;
+    /** Override the default padding derived from `size`. */
+    $padding?: string;
+    /** Override the default border-radius derived from `roundness` (in px). */
+    $borderRadius?: number;
 }
-export declare const Button: ({ as, children, disabled, fluid, href, icon, isDropdownOpen, roundness, size, sx, type, showChevron, customDropdownIcon, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Button: ({ as, children, disabled, fluid, href, icon, isDropdownOpen, roundness, size, sx, type, showChevron, customDropdownIcon, $fontSize: fontSizeOverride, $padding: paddingOverride, $borderRadius: borderRadiusOverride, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=button.d.ts.map

package/dist/src/components/actions/button/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../../src/components/actions/button/button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,SAAS,EAAE,MAAM,2CAA2C,CAAC;AAiBtE,KAAK,WAAW,GAAG,IAAI,CACrB,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,EACrC,yBAAyB,GACzB,SAAS,GACT,aAAa,GACb,oBAAoB,GACpB,cAAc,GACd,cAAc,GACd,YAAY,GACZ,aAAa,GACb,UAAU,GACV,WAAW,CACd,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEvB,KAAK,WAAW,GACZ,SAAS,GACT,WAAW,GACX,UAAU,GACV,QAAQ,GACR,MAAM,GACN,QAAQ,GACR,SAAS,GACT,UAAU,CAAC;AACf,KAAK,UAAU,GAAG,OAAO,GAAG,OAAO,CAAC;AACpC,KAAK,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,cAAc,GAAG,OAAO,CAAC;AAE/D,MAAM,WAAW,WAAY,SAAQ,WAAW,EAAE,KAAK,CAAC,iBAAiB;IACvE,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,SAAS,CAAC;IACtC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;CACrD;AAED,eAAO,MAAM,MAAM,wIAehB,WAAW,4CAwFb,CAAC"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../../src/components/actions/button/button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAa,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,2CAA2C,CAAC;AAiBtE,KAAK,WAAW,GAAG,IAAI,CACrB,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,EACrC,yBAAyB,GACzB,SAAS,GACT,aAAa,GACb,oBAAoB,GACpB,cAAc,GACd,cAAc,GACd,YAAY,GACZ,aAAa,GACb,UAAU,GACV,WAAW,CACd,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEvB,KAAK,WAAW,GACZ,SAAS,GACT,WAAW,GACX,UAAU,GACV,QAAQ,GACR,MAAM,GACN,QAAQ,GACR,SAAS,GACT,UAAU,CAAC;AACf,KAAK,UAAU,GAAG,OAAO,GAAG,OAAO,CAAC;AACpC,KAAK,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,cAAc,GAAG,OAAO,CAAC;AAE/D,MAAM,WAAW,WAAY,SAAQ,WAAW,EAAE,KAAK,CAAC,iBAAiB;IACvE,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,SAAS,CAAC;IACtC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,EAAE,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;IACpD,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2EAA2E;IAC3E,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,MAAM,qOAkBhB,WAAW,4CA2Fb,CAAC"}

package/dist/src/components/atoms/box/box.d.ts

@@ -13,11 +13,8 @@ type NativeProps = Pick<React.HTMLAttributes<HTMLDivElement>, 'children' | 'clas
 };
 export interface BoxProps extends BackgroundColor, BorderRadius, Elevation, Flex, Margin, Padding, Polymorphic, Styleable, NativeProps {
     $display?: 'block' | 'flex';
-    sx?: string;
 }
-export declare const Box: ({ $display, sx, ...args }: BoxProps) => import("react/jsx-runtime").JSX.Element;
-export declare const Component: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, BoxProps & {
-    $sx?: string;
-}>>;
+export declare const Box: (props: BoxProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Component: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, BoxProps>>;
 export {};
 //# sourceMappingURL=box.d.ts.map

package/dist/src/components/atoms/box/box.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"box.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/box/box.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACnD,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEtD,KAAK,WAAW,GAAG,IAAI,CACrB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAClC,UAAU,GACV,WAAW,GACX,yBAAyB,GACzB,QAAQ,GACR,eAAe,GACf,SAAS,GACT,UAAU,GACV,QAAQ,GACR,OAAO,GACP,WAAW,GACX,kBAAkB,GAClB,SAAS,GACT,gBAAgB,GAChB,aAAa,GACb,oBAAoB,GACpB,cAAc,GACd,cAAc,GACd,YAAY,GACZ,aAAa,GACb,OAAO,CACV,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEtC,MAAM,WAAW,QACf,SAAQ,eAAe,EACrB,YAAY,EACZ,SAAS,EACT,IAAI,EACJ,MAAM,EACN,OAAO,EACP,WAAW,EACX,SAAS,EACT,WAAW;IACb,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC5B,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,eAAO,MAAM,GAAG,8BAAwC,QAAQ,4CAE/D,CAAC;AAEF,eAAO,MAAM,SAAS;UAAiC,MAAM;GAU5D,CAAC"}
+{"version":3,"file":"box.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/box/box.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACnD,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEtD,KAAK,WAAW,GAAG,IAAI,CACrB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAClC,UAAU,GACV,WAAW,GACX,yBAAyB,GACzB,QAAQ,GACR,eAAe,GACf,SAAS,GACT,UAAU,GACV,QAAQ,GACR,OAAO,GACP,WAAW,GACX,kBAAkB,GAClB,SAAS,GACT,gBAAgB,GAChB,aAAa,GACb,oBAAoB,GACpB,cAAc,GACd,cAAc,GACd,YAAY,GACZ,aAAa,GACb,OAAO,CACV,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEtC,MAAM,WAAW,QACf,SAAQ,eAAe,EACrB,YAAY,EACZ,SAAS,EACT,IAAI,EACJ,MAAM,EACN,OAAO,EACP,WAAW,EACX,SAAS,EACT,WAAW;IACb,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC7B;AAED,eAAO,MAAM,GAAG,UAAW,QAAQ,4CAA6B,CAAC;AAEjE,eAAO,MAAM,SAAS,iMAYrB,CAAC"}

package/dist/src/components/atoms/image/image.d.ts

@@ -0,0 +1,33 @@
+import { Polymorphic, Styleable } from '../../../types/attributes';
+export interface ImageProps extends Polymorphic, Styleable {
+    src: string;
+    alt: string;
+    /** Controls how the image fills its container. Default: 'cover' */
+    $fit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
+    /** Aspect ratio — e.g. '16/9', '4/3', '1/1'. When set, container holds the ratio. */
+    $ratio?: string;
+    /** When true, the image fills its parent width and height completely. */
+    $fill?: boolean;
+    width?: number | string;
+    height?: number | string;
+    loading?: 'lazy' | 'eager';
+}
+/**
+ * Image
+ *
+ * A styled `<img>` element for use inside the design system.
+ * Supports aspect-ratio, object-fit, fill mode, and responsive styling via `sx`.
+ *
+ * Use this component for:
+ * - Images that don't need Next.js optimization (e.g. icons, decorative, SVG)
+ * - Externally-hosted images where you control the CDN
+ * - Design system stories and documentation
+ *
+ * Use `next/image` in your application when you need:
+ * - Automatic lazy loading and priority hints
+ * - Responsive srcSet and size negotiation
+ * - Automatic format conversion (WebP/AVIF)
+ * - Image CDN resizing via the Next.js image loader
+ */
+export declare const Image: ({ alt, ...props }: ImageProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=image.d.ts.map

package/dist/src/components/atoms/image/image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/image/image.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAGnE,MAAM,WAAW,UAAW,SAAQ,WAAW,EAAE,SAAS;IACxD,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,mEAAmE;IACnE,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,YAAY,CAAC;IAC5D,qFAAqF;IACrF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yEAAyE;IACzE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC5B;AAeD;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,KAAK,sBAAuB,UAAU,4CAElD,CAAC"}

package/dist/src/components/atoms/index.d.ts

@@ -1,5 +1,8 @@
 export { Box } from './box';
 export type { BoxProps } from './box';
+export { Image } from './image/image';
+export type { ImageProps } from './image/image';
+export * from './layout';
 export { HideButRender } from './hide';
 export { Highlighter } from './highlighter';
 export { SecToDuration } from './seconds_to_duration';

package/dist/src/components/atoms/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,YAAY,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,YAAY,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AACpE,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AACzD,YAAY,EACV,YAAY,EACZ,YAAY,EACZ,cAAc,EACd,eAAe,GAChB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,YAAY,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,YAAY,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,YAAY,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAChD,cAAc,UAAU,CAAC;AACzB,OAAO,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,YAAY,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AACpE,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AACzD,YAAY,EACV,YAAY,EACZ,YAAY,EACZ,cAAc,EACd,eAAe,GAChB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,YAAY,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC"}

package/dist/src/components/atoms/layout/container.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Polymorphic, Sizes, Styleable } from '../../../types/attributes';
+import { Breakpoint } from '../../../common/media';
+export type ContainerWidth = Breakpoint;
+/**
+ * Container
+ *
+ * Centers content and caps its width at a named breakpoint.
+ *
+ * Uses a `min-width` media query (mobile-first expanding): below the breakpoint
+ * the container is full-width; above it, `max-width` kicks in and content is centered.
+ *
+ * This differs from `sx`, `$dir`, and `$cols` which use `max-width` media queries
+ * (desktop-first overriding). Both patterns are intentional:
+ * - Container answers "when should I stop being full-width?" → expand at breakpoint
+ * - sx / $dir / $cols answer "when should I override the default?" → shrink from default
+ */
+export interface ContainerProps extends Polymorphic, Styleable {
+    $breakpoint?: ContainerWidth;
+    $paddingX?: Sizes | number;
+    children?: React.ReactNode;
+}
+export declare const Container: (props: ContainerProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=container.d.ts.map

package/dist/src/components/atoms/layout/container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/layout/container.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAC1E,OAAO,EAAe,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEhE,MAAM,MAAM,cAAc,GAAG,UAAU,CAAC;AAExC;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,cAAe,SAAQ,WAAW,EAAE,SAAS;IAC5D,WAAW,CAAC,EAAE,cAAc,CAAC;IAC7B,SAAS,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AA4BD,eAAO,MAAM,SAAS,UAAW,cAAc,4CAE9C,CAAC"}

package/dist/src/components/atoms/layout/grid.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Polymorphic, Sizes, Styleable } from '../../../types/attributes';
+import { BreakpointAlias } from '../../../common/media';
+export type ColCount = 1 | 2 | 3 | 4 | 5 | 6;
+export type ColsProp = ColCount | Partial<Record<BreakpointAlias, ColCount>> | 'auto';
+export interface GridProps extends Polymorphic, Styleable {
+    $cols?: ColsProp;
+    $minColWidth?: number;
+    $gap?: Sizes | number;
+    $rowGap?: Sizes | number;
+    $colGap?: Sizes | number;
+    children?: React.ReactNode;
+}
+export declare const Grid: (props: GridProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=grid.d.ts.map

package/dist/src/components/atoms/layout/grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/layout/grid.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAC1E,OAAO,EAEL,eAAe,EAEhB,MAAM,uBAAuB,CAAC;AAE/B,MAAM,MAAM,QAAQ,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAE7C,MAAM,MAAM,QAAQ,GAChB,QAAQ,GACR,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAC,GAC1C,MAAM,CAAC;AAEX,MAAM,WAAW,SAAU,SAAQ,WAAW,EAAE,SAAS;IACvD,KAAK,CAAC,EAAE,QAAQ,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAsED,eAAO,MAAM,IAAI,UAAW,SAAS,4CAA8B,CAAC"}

package/dist/src/components/atoms/layout/index.d.ts

@@ -0,0 +1,11 @@
+export { Container } from './container';
+export type { ContainerProps, ContainerWidth } from './container';
+export { Grid } from './grid';
+export type { GridProps, ColsProp, ColCount } from './grid';
+export { Inline } from './inline';
+export type { InlineProps } from './inline';
+export { Section } from './section';
+export type { SectionProps } from './section';
+export { Stack } from './stack';
+export type { StackProps } from './stack';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/atoms/layout/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClE,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC"}

package/dist/src/components/atoms/layout/inline.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Align, Justify, Polymorphic, Sizes, Styleable } from '../../../types/attributes';
+export interface InlineProps extends Polymorphic, Styleable {
+    $gap?: Sizes | number;
+    $align?: Align;
+    $justify?: Justify;
+    children?: React.ReactNode;
+}
+export declare const Inline: (props: InlineProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=inline.d.ts.map

package/dist/src/components/atoms/layout/inline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inline.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/layout/inline.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EACL,KAAK,EACL,OAAO,EACP,WAAW,EACX,KAAK,EACL,SAAS,EACV,MAAM,2BAA2B,CAAC;AAEnC,MAAM,WAAW,WAAY,SAAQ,WAAW,EAAE,SAAS;IACzD,IAAI,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAgBD,eAAO,MAAM,MAAM,UAAW,WAAW,4CAAgC,CAAC"}

package/dist/src/components/atoms/layout/section.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Polymorphic, Styleable } from '../../../types/attributes';
+export interface SectionProps extends Polymorphic, Styleable {
+    $spacing?: 'sm' | 'md' | 'lg' | 'xl';
+    children?: React.ReactNode;
+}
+export declare const Section: (props: SectionProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=section.d.ts.map

package/dist/src/components/atoms/layout/section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"section.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/layout/section.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AASnE,MAAM,WAAW,YAAa,SAAQ,WAAW,EAAE,SAAS;IAC1D,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAYD,eAAO,MAAM,OAAO,UAAW,YAAY,4CAAiC,CAAC"}

package/dist/src/components/atoms/layout/stack.d.ts

@@ -0,0 +1,5 @@
+import { BoxProps } from '../box/box';
+export interface StackProps extends BoxProps {
+}
+export declare const Stack: ({ $dir, $gap, ...props }: StackProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=stack.d.ts.map

package/dist/src/components/atoms/layout/stack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stack.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/layout/stack.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAO,QAAQ,EAAE,MAAM,YAAY,CAAC;AAE3C,MAAM,WAAW,UAAW,SAAQ,QAAQ;CAAG;AAE/C,eAAO,MAAM,KAAK,6BAIf,UAAU,4CAA+C,CAAC"}

package/dist/src/components/atoms/typography/display.d.ts

@@ -3,6 +3,7 @@ import { TypographyProps } from '../../../components/atoms/typography/typography
 export interface CommonProps extends TypographyProps {
     as?: React.ElementType;
     $textAlign?: 'center' | 'inherit' | 'justify' | 'left' | 'right';
+    $fluid?: boolean;
 }
 export interface DisplayProps extends CommonProps {
     $fontSize?: 56 | 64;

package/dist/src/components/atoms/typography/display.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"display.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/typography/display.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,eAAe,EAAE,MAAM,iDAAiD,CAAC;AAElF,MAAM,WAAW,WAAY,SAAQ,eAAe;IAClD,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACvB,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;CAClE;AAED,MAAM,WAAW,YAAa,SAAQ,WAAW;IAC/C,SAAS,CAAC,EAAE,EAAE,GAAG,EAAE,CAAC;IACpB,WAAW,CAAC,EAAE,EAAE,GAAG,EAAE,CAAC;CACvB;AAED,eAAO,MAAM,OAAO,wDAMjB,YAAY,4CAQd,CAAC"}
+{"version":3,"file":"display.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/typography/display.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,eAAe,EAAE,MAAM,iDAAiD,CAAC;AAIlF,MAAM,WAAW,WAAY,SAAQ,eAAe;IAClD,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACvB,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;IACjE,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,YAAa,SAAQ,WAAW;IAC/C,SAAS,CAAC,EAAE,EAAE,GAAG,EAAE,CAAC;IACpB,WAAW,CAAC,EAAE,EAAE,GAAG,EAAE,CAAC;CACvB;AAID,eAAO,MAAM,OAAO,wDAMjB,YAAY,4CAQd,CAAC"}