thread-ui 0.8.1 → 0.10.0

package/dist/components/layouts/footer/footer.js

@@ -1,42 +1,27 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Divider, Subtitle } from '../../../components';
+import { Container, Divider, Subtitle } from '../../../components';
 import { FacebookLogoIcon, GithubLogoIcon, InstagramLogoIcon, LinkedinLogoIcon, TwitterLogoIcon, } from '@phosphor-icons/react';
-import { css, cx } from '../../../styled-system/css';
-import { container } from '../../../styled-system/patterns';
+import { css } from '../../../styled-system/css';
 const styles = {
-    footer: cx(container(), css({ marginX: 'auto' })),
     footerContents: css({
         display: 'flex',
         flexDirection: 'column',
         justifyContent: 'center',
         alignItems: 'center',
-        paddingY: '40px',
+        paddingY: '10',
         marginX: 'auto',
         overflow: 'hidden',
         maxWidth: '1280px',
     }),
-    textBlock: css({
-        marginTop: '8px',
-    }),
     logoBlock: css({
         display: 'flex',
         flexDirection: 'row',
-        gap: '12px',
+        gap: '3',
         width: '100%',
         justifyContent: 'center',
         alignItems: 'center',
-        paddingY: '16px',
-    }),
-    circleStyle: css({
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        marginTop: '36px',
-        backgroundColor: 'black',
-        borderRadius: '50%',
-        width: '48px',
-        height: '48px',
+        paddingY: '4',
     }),
     links: css({
         color: 'text.standard',
@@ -54,9 +39,9 @@ const styles = {
  *   linkedInLink="https://linkedin.com/company/acme"
  * />
  */
-export const Footer = ({ logo, caption, facebookLink, instagramLink, twitterLink, githubLink, linkedInLink, }) => {
+export const Footer = ({ logo, caption, bg = 'canvas', facebookLink, instagramLink, twitterLink, githubLink, linkedInLink, }) => {
     const weight = 'bold';
     const size = 24;
-    return (_jsxs("footer", { className: styles.footer, children: [_jsx(Divider, {}), _jsxs("div", { className: styles.footerContents, children: [logo && logo, caption && _jsx(Subtitle, { children: caption }), _jsxs("div", { className: styles.logoBlock, children: [facebookLink && (_jsx("a", { className: styles.links, href: facebookLink, children: _jsx(FacebookLogoIcon, { size: size, weight: weight }) })), instagramLink && (_jsx("a", { className: styles.links, href: instagramLink, children: _jsx(InstagramLogoIcon, { size: size, weight: weight }) })), twitterLink && (_jsx("a", { className: styles.links, href: twitterLink, children: _jsx(TwitterLogoIcon, { size: size, weight: weight }) })), githubLink && (_jsx("a", { className: styles.links, href: githubLink, children: _jsx(GithubLogoIcon, { size: size, weight: weight }) })), linkedInLink && (_jsx("a", { className: styles.links, href: linkedInLink, children: _jsx(LinkedinLogoIcon, { size: size, weight: weight }) }))] })] })] }));
+    return (_jsxs(Container, { as: "footer", bg: bg, children: [_jsx(Divider, {}), _jsxs("div", { className: styles.footerContents, children: [logo && logo, caption && _jsx(Subtitle, { children: caption }), _jsxs("div", { className: styles.logoBlock, children: [facebookLink && (_jsx("a", { className: styles.links, href: facebookLink, children: _jsx(FacebookLogoIcon, { size: size, weight: weight }) })), instagramLink && (_jsx("a", { className: styles.links, href: instagramLink, children: _jsx(InstagramLogoIcon, { size: size, weight: weight }) })), twitterLink && (_jsx("a", { className: styles.links, href: twitterLink, children: _jsx(TwitterLogoIcon, { size: size, weight: weight }) })), githubLink && (_jsx("a", { className: styles.links, href: githubLink, children: _jsx(GithubLogoIcon, { size: size, weight: weight }) })), linkedInLink && (_jsx("a", { className: styles.links, href: linkedInLink, children: _jsx(LinkedinLogoIcon, { size: size, weight: weight }) }))] })] })] }));
 };
 //# sourceMappingURL=footer.js.map

package/dist/components/layouts/footer/footer.js.map

@@ -1 +1 @@
-{"version":3,"file":"footer.js","sourceRoot":"","sources":["../../../../src/components/layouts/footer/footer.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"footer.js","sourceRoot":"","sources":["../../../../src/components/layouts/footer/footer.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAC5D,OAAO,EACN,gBAAgB,EAChB,cAAc,EACd,iBAAiB,EACjB,gBAAgB,EAChB,eAAe,GACf,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAE1C,MAAM,MAAM,GAAG;IACd,cAAc,EAAE,GAAG,CAAC;QACnB,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,QAAQ;QACpB,QAAQ,EAAE,IAAI;QACd,OAAO,EAAE,MAAM;QACf,QAAQ,EAAE,QAAQ;QAClB,QAAQ,EAAE,QAAQ;KAClB,CAAC;IACF,SAAS,EAAE,GAAG,CAAC;QACd,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,KAAK;QACpB,GAAG,EAAE,GAAG;QACR,KAAK,EAAE,MAAM;QACb,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,QAAQ;QACpB,QAAQ,EAAE,GAAG;KACb,CAAC;IACF,KAAK,EAAE,GAAG,CAAC;QACV,KAAK,EAAE,eAAe;KACtB,CAAC;CACF,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EACtB,IAAI,EACJ,OAAO,EACP,EAAE,GAAG,QAAQ,EACb,YAAY,EACZ,aAAa,EACb,WAAW,EACX,UAAU,EACV,YAAY,GACC,EAAE,EAAE;IACjB,MAAM,MAAM,GAAG,MAAM,CAAC;IACtB,MAAM,IAAI,GAAG,EAAE,CAAC;IAEhB,OAAO,CACN,MAAC,SAAS,IAAC,EAAE,EAAC,QAAQ,EAAC,EAAE,EAAE,EAAE,aAC5B,KAAC,OAAO,KAAG,EACX,eAAK,SAAS,EAAE,MAAM,CAAC,cAAc,aACnC,IAAI,IAAI,IAAI,EACZ,OAAO,IAAI,KAAC,QAAQ,cAAE,OAAO,GAAY,EAC1C,eAAK,SAAS,EAAE,MAAM,CAAC,SAAS,aAC9B,YAAY,IAAI,CAChB,YAAG,SAAS,EAAE,MAAM,CAAC,KAAK,EAAE,IAAI,EAAE,YAAY,YAC7C,KAAC,gBAAgB,IAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,GAAI,GAC7C,CACJ,EACA,aAAa,IAAI,CACjB,YAAG,SAAS,EAAE,MAAM,CAAC,KAAK,EAAE,IAAI,EAAE,aAAa,YAC9C,KAAC,iBAAiB,IAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,GAAI,GAC9C,CACJ,EACA,WAAW,IAAI,CACf,YAAG,SAAS,EAAE,MAAM,CAAC,KAAK,EAAE,IAAI,EAAE,WAAW,YAC5C,KAAC,eAAe,IAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,GAAI,GAC5C,CACJ,EACA,UAAU,IAAI,CACd,YAAG,SAAS,EAAE,MAAM,CAAC,KAAK,EAAE,IAAI,EAAE,UAAU,YAC3C,KAAC,cAAc,IAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,GAAI,GAC3C,CACJ,EACA,YAAY,IAAI,CAChB,YAAG,SAAS,EAAE,MAAM,CAAC,KAAK,EAAE,IAAI,EAAE,YAAY,YAC7C,KAAC,gBAAgB,IAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,GAAI,GAC7C,CACJ,IACI,IACD,IACK,CACZ,CAAC;AACH,CAAC,CAAC"}

package/dist/components/layouts/footer/footer.types.d.ts

@@ -1,9 +1,12 @@
+import { BgColorOptions } from '../../../types';
 import { ReactNode } from 'react';
 export type FooterProps = {
     /** Logo or branding element rendered at the top of the footer */
     logo?: ReactNode;
     /** Tagline or description rendered below the logo */
     caption?: string | ReactNode;
+    /** Background color token @default `'none'` */
+    bg?: BgColorOptions;
     /** URL for the Facebook social link */
     facebookLink?: string;
     /** URL for the Instagram social link */

package/dist/components/media/image-panel/image-panel.js

@@ -90,6 +90,6 @@ export const ImagePanel = ({ title, subtitle, contents, image, smImage, contentB
             width: { base: '100%', lg: '41.666667%' },
         }),
     };
-    return (_jsxs("div", { className: panelStyles({ contentBelow, contentLeft }), children: [_jsx("div", { className: styles.imageBlock, children: _jsx("div", { className: styles.images, children: renderPanelImage(image, smImage) }) }), _jsx("div", { className: styles.textBlock, children: _jsxs("div", { children: [_jsxs(Title, { color: titleColor, children: [title, subtitle && _jsx(Subtitle, { children: subtitle })] }), contents?.map((txt, _) => (_jsx(Text, { children: txt }, _)))] }) })] }));
+    return (_jsxs("div", { className: panelStyles({ contentBelow, contentLeft }), children: [_jsx("div", { className: styles.imageBlock, children: _jsx("div", { className: styles.images, children: renderPanelImage(image, smImage) }) }), _jsx("div", { className: styles.textBlock, children: _jsxs("div", { children: [_jsxs(Title, { color: titleColor, children: [title, subtitle && _jsx(Subtitle, { fontFamily: "heading", children: subtitle })] }), contents?.map((txt, _) => (_jsx(Text, { children: txt }, _)))] }) })] }));
 };
 //# sourceMappingURL=image-panel.js.map

package/dist/components/media/image-panel/image-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"image-panel.js","sourceRoot":"","sources":["../../../../src/components/media/image-panel/image-panel.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"image-panel.js","sourceRoot":"","sources":["../../../../src/components/media/image-panel/image-panel.tsx"],"names":[],"mappings":"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"}

package/dist/components/media/info-card/info-card.d.ts

@@ -1,13 +1,8 @@
 import { InfoCardProps } from './info-card.types';
 /**
- * Linked card displaying a cover image, title, and icon. Supports named icons, emojis, and external SVGs.
+ * Linked card displaying a cover image, title, and icon. Always interactive with hover and active states.
  *
  * @example
- * // Named icon
  * <InfoCard title="Getting Started" url="/docs" icon="BookOpen" image={{ src: '/cover.jpg' }} />
- *
- * @example
- * // Emoji
- * <InfoCard title="Recipes" url="/recipes" icon={{ type: 'emoji', emoji: '🍋' }} image={{ src: '/cover.jpg' }} />
  */
-export declare const InfoCard: ({ title, url, icon, image }: InfoCardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InfoCard: ({ title, url, icon, image, layer }: InfoCardProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/media/info-card/info-card.js

@@ -1,35 +1,78 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { css, cx } from '../../../styled-system/css';
+import { css } from '../../../styled-system/css';
+import { cva } from '../../../styled-system/css';
 import { Text } from '../../../components/typography';
 import { DynamicIcon, renderImage } from '../../../internal-components';
+import { SurfaceLayerMap } from '../../../theme';
 const styles = {
-    card: css({
-        margin: 'auto',
-        border: 'solid',
-        borderRadius: 'md',
-        borderWidth: 'md',
-        borderColor: 'structure',
-        borderStyle: 'solid',
-        maxHeight: '15rem',
-        overflow: 'hidden',
-        maxWidth: '391px',
-        aspectRatio: '8 / 5',
-        width: '100%',
-        backgroundColor: { base: 'background', _hover: 'surface' },
-    }),
-    cardContent: css({
-        display: 'flex',
-        flexDirection: 'column',
-    }),
-    link: css({
-        cursor: 'pointer',
+    card: cva({
+        base: {
+            margin: 'auto',
+            borderStyle: 'solid',
+            borderRadius: 'md',
+            maxHeight: '60',
+            overflow: 'hidden',
+            maxWidth: '391px',
+            aspectRatio: '8 / 5',
+            width: '100%',
+            cursor: 'pointer',
+            display: 'flex',
+            flexDirection: 'column',
+            transition: 'background-color 0.15s ease, box-shadow 0.15s ease',
+            _hover: {
+                backgroundColor: 'hover',
+                '& .info-card-image-wrapper::after': {
+                    opacity: 0.1,
+                },
+            },
+            _active: {
+                backgroundColor: 'active',
+            },
+        },
+        variants: {
+            bg: {
+                none: {},
+                canvas: { backgroundColor: 'canvas' },
+                inset: { backgroundColor: 'inset' },
+                surface: { backgroundColor: 'surface' },
+                elevated: { backgroundColor: 'elevated' },
+                overlay: { backgroundColor: 'overlay' },
+            },
+            shadow: {
+                none: { boxShadow: 'none' },
+                sm: { boxShadow: 'sm' },
+                md: { boxShadow: 'md' },
+                lg: { boxShadow: 'lg' },
+            },
+            structure: {
+                none: { borderWidth: '0' },
+                subtle: { borderWidth: 'md', borderColor: 'structure.subtle' },
+                default: { borderWidth: 'md', borderColor: 'structure.default' },
+                strong: { borderWidth: 'md', borderColor: 'structure.strong' },
+            },
+        },
+        defaultVariants: {
+            bg: 'surface',
+            shadow: 'sm',
+            structure: 'subtle',
+        },
     }),
     imageWrapper: css({
         overflow: 'hidden',
         width: '100%',
         flex: '1',
         minHeight: '0',
+        position: 'relative',
+        _after: {
+            content: '""',
+            position: 'absolute',
+            inset: '0',
+            backgroundColor: 'text.standard',
+            opacity: 0,
+            transition: 'opacity 0.15s ease',
+            pointerEvents: 'none',
+        },
     }),
     image: css({
         height: '100%',
@@ -48,17 +91,17 @@ const styles = {
     }),
 };
 /**
- * Linked card displaying a cover image, title, and icon. Supports named icons, emojis, and external SVGs.
+ * Linked card displaying a cover image, title, and icon. Always interactive with hover and active states.
  *
  * @example
- * // Named icon
  * <InfoCard title="Getting Started" url="/docs" icon="BookOpen" image={{ src: '/cover.jpg' }} />
- *
- * @example
- * // Emoji
- * <InfoCard title="Recipes" url="/recipes" icon={{ type: 'emoji', emoji: '🍋' }} image={{ src: '/cover.jpg' }} />
  */
-export const InfoCard = ({ title, url, icon, image }) => {
-    return (_jsxs("a", { href: url, className: cx(styles.cardContent, styles.link, styles.card), children: [_jsx("div", { className: styles.imageWrapper, children: renderImage(image, undefined, styles.image) }), _jsxs("div", { className: styles.caption, children: [_jsx(DynamicIcon, { icon: icon, size: 24 }), _jsx(Text, { size: "sm", truncate: true, inline: true, children: title })] })] }));
+export const InfoCard = ({ title, url, icon, image, layer = 'surface' }) => {
+    const config = SurfaceLayerMap[layer];
+    return (_jsxs("a", { href: url, className: styles.card({
+            bg: config.bg,
+            shadow: config.shadow,
+            structure: config.structure,
+        }), children: [_jsx("div", { className: `${styles.imageWrapper} info-card-image-wrapper`, children: renderImage(image, undefined, styles.image) }), _jsxs("div", { className: styles.caption, children: [_jsx(DynamicIcon, { icon: icon, size: 24 }), _jsx(Text, { size: "sm", truncate: true, inline: true, children: title })] })] }));
 };
 //# sourceMappingURL=info-card.js.map

package/dist/components/media/info-card/info-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"info-card.js","sourceRoot":"","sources":["../../../../src/components/media/info-card/info-card.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAIjE,MAAM,MAAM,GAAG;IACd,IAAI,EAAE,GAAG,CAAC;QACT,MAAM,EAAE,MAAM;QACd,MAAM,EAAE,OAAO;QACf,YAAY,EAAE,IAAI;QAClB,WAAW,EAAE,IAAI;QACjB,WAAW,EAAE,WAAW;QACxB,WAAW,EAAE,OAAO;QACpB,SAAS,EAAE,OAAO;QAClB,QAAQ,EAAE,QAAQ;QAClB,QAAQ,EAAE,OAAO;QACjB,WAAW,EAAE,OAAO;QACpB,KAAK,EAAE,MAAM;QACb,eAAe,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,EAAE,SAAS,EAAE;KAC1D,CAAC;IACF,WAAW,EAAE,GAAG,CAAC;QAChB,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;KACvB,CAAC;IACF,IAAI,EAAE,GAAG,CAAC;QACT,MAAM,EAAE,SAAS;KACjB,CAAC;IACF,YAAY,EAAE,GAAG,CAAC;QACjB,QAAQ,EAAE,QAAQ;QAClB,KAAK,EAAE,MAAM;QACb,IAAI,EAAE,GAAG;QACT,SAAS,EAAE,GAAG;KACd,CAAC;IACF,KAAK,EAAE,GAAG,CAAC;QACV,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,MAAM;QACb,SAAS,EAAE,OAAO;KAClB,CAAC;IACF,OAAO,EAAE,GAAG,CAAC;QACZ,OAAO,EAAE,KAAK;QACd,MAAM,EAAE,IAAI;QACZ,OAAO,EAAE,MAAM;QACf,GAAG,EAAE,GAAG;QACR,cAAc,EAAE,YAAY;QAC5B,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,QAAQ;QACpB,UAAU,EAAE,CAAC;KACb,CAAC;CACF,CAAC;AAEF;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,EAAiB,EAAE,EAAE;IACtE,OAAO,CACN,aAAG,IAAI,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,IAAI,CAAC,aACxE,cAAK,SAAS,EAAE,MAAM,CAAC,YAAY,YAAG,WAAW,CAAC,KAAK,EAAE,SAAS,EAAE,MAAM,CAAC,KAAK,CAAC,GAAO,EACxF,eAAK,SAAS,EAAE,MAAM,CAAC,OAAO,aAC7B,KAAC,WAAW,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,GAAI,EACrC,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,QAAC,MAAM,kBAC7B,KAAK,GACA,IACF,IACH,CACJ,CAAC;AACH,CAAC,CAAC"}
+{"version":3,"file":"info-card.js","sourceRoot":"","sources":["../../../../src/components/media/info-card/info-card.tsx"],"names":[],"mappings":"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"}

package/dist/components/media/info-card/info-card.types.d.ts

@@ -1,5 +1,5 @@
 import { DynamicIconProps } from '../../../internal-components';
-import { ImageProps } from '../../../types';
+import { ImageProps, SurfaceLayerOptions } from '../../../types';
 export type InfoCardProps = {
     /** Card title displayed in the caption bar */
     title: string;
@@ -15,4 +15,6 @@ export type InfoCardProps = {
     icon?: DynamicIconProps['icon'];
     /** Cover image displayed in the card */
     image: ImageProps;
+    /** Surface layer @default `'surface'` */
+    layer?: SurfaceLayerOptions;
 };

package/dist/components/media/media-card/media-card.d.ts

@@ -12,4 +12,4 @@ import { MediaCardProps } from './media-card.types';
  *   details={[{ title: 'Role', details: 'Engineer' }]}
  * />
  */
-export declare const MediaCard: ({ description, details, detailsPosition, image, imagePosition, links, size, title, }: MediaCardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MediaCard: ({ description, details, detailsPosition, image, imagePosition, layer, links, size, title, }: MediaCardProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/media/media-card/media-card.js

@@ -3,14 +3,14 @@ import { css, cva } from '../../../styled-system/css';
 import { H1, Text } from '../../../components/typography';
 import { Divider, Icon } from '../../../components/ui';
 import { LinkWrapper, renderImage } from '../../../internal-components';
+import { SurfaceLayerMap } from '../../../theme';
 import { cloneElement, isValidElement } from 'react';
 const styles = {
     container: cva({
         base: {
             alignItems: 'center',
             borderRadius: 'md',
-            borderWidth: 'md',
-            borderColor: 'structure',
+            borderStyle: 'solid',
             display: 'flex',
             flexDirection: 'column',
             justifyContent: 'center',
@@ -28,9 +28,32 @@ const styles = {
                 md: { maxWidth: '672px' },
                 lg: { maxWidth: '896px' },
             },
+            bg: {
+                none: {},
+                canvas: { backgroundColor: 'canvas' },
+                inset: { backgroundColor: 'inset' },
+                surface: { backgroundColor: 'surface' },
+                elevated: { backgroundColor: 'elevated' },
+                overlay: { backgroundColor: 'overlay' },
+            },
+            shadow: {
+                none: { boxShadow: 'none' },
+                sm: { boxShadow: 'sm' },
+                md: { boxShadow: 'md' },
+                lg: { boxShadow: 'lg' },
+            },
+            structure: {
+                none: { borderWidth: '0' },
+                subtle: { borderWidth: 'md', borderColor: 'structure.subtle' },
+                default: { borderWidth: 'md', borderColor: 'structure.default' },
+                strong: { borderWidth: 'md', borderColor: 'structure.strong' },
+            },
         },
         defaultVariants: {
             size: 'md',
+            bg: 'surface',
+            shadow: 'sm',
+            structure: 'subtle',
         },
     }),
     title: css({
@@ -44,7 +67,7 @@ const styles = {
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
-            gap: '0.5rem',
+            gap: '2',
         },
         variants: {
             imagePosition: {
@@ -73,8 +96,8 @@ const styles = {
         alignItems: 'center',
         justifyContent: 'center',
         gap: {
-            base: '0.5rem',
-            lg: '0.75rem',
+            base: '2',
+            lg: '3',
         },
         flexDirection: 'column',
     }),
@@ -82,10 +105,10 @@ const styles = {
         borderRadius: 'md',
         borderWidth: 'sm',
         width: '100%',
-        maxWidth: '16rem',
+        maxWidth: '64',
         marginX: 'auto',
         marginTop: {
-            lg: '0.75rem',
+            lg: '3',
         },
     }),
     links: css({
@@ -93,14 +116,14 @@ const styles = {
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'center',
-        gap: '0.5rem',
+        gap: '2',
         color: 'text.standard',
     }),
     dividerWrapper: css({
         display: {
             lg: 'none',
         },
-        marginY: '0.5rem',
+        marginY: '2',
         width: '9/12',
     }),
     description: css({
@@ -111,7 +134,7 @@ const styles = {
         marginX: 'auto',
         alignItems: 'center',
         justifyContent: 'center',
-        gap: '0.75rem',
+        gap: '3',
         display: 'flex',
         flexDirection: {
             base: 'column',
@@ -120,14 +143,31 @@ const styles = {
     }),
     descriptionWrapper: css({
         maxHeight: {
-            base: '300px',
+            base: '[300px]',
             md: 'none',
-            lg: '500px',
+            lg: '[500px]',
         },
         overflowY: {
             base: 'auto',
             md: 'visible',
-            lg: 'scroll',
+            lg: 'auto',
+        },
+        // Firefox
+        scrollbarWidth: 'thin',
+        scrollbarColor: 'token(colors.structure.default) transparent',
+        // WebKit (Chrome, Safari, Edge)
+        '&::-webkit-scrollbar': {
+            width: '2px',
+        },
+        '&::-webkit-scrollbar-track': {
+            background: 'transparent',
+        },
+        '&::-webkit-scrollbar-thumb': {
+            backgroundColor: 'structure.subtle',
+            borderRadius: 'md',
+        },
+        '&::-webkit-scrollbar-thumb:hover': {
+            backgroundColor: 'structure.subtle',
         },
     }),
     details: css({
@@ -149,9 +189,16 @@ const styles = {
  *   details={[{ title: 'Role', details: 'Engineer' }]}
  * />
  */
-export const MediaCard = ({ description, details, detailsPosition = 'text', image, imagePosition = 'left', links, size = 'md', title, }) => {
+export const MediaCard = ({ description, details, detailsPosition = 'text', image, imagePosition = 'left', layer = 'surface', links, size = 'md', title, }) => {
+    // Resolve from layer, allow individual overrides
+    const layerConfig = SurfaceLayerMap[layer];
     const linksSection = links.map((link, index) => isValidElement(link) ? (cloneElement(link, { key: index })) : (_jsx(LinkWrapper, { link: link.url, children: _jsx(Icon, { name: link.iconName, size: 24 }) }, index)));
-    const mediaDetails = details && (_jsx("div", { className: styles.details, children: details.map((detail, index) => (_jsxs("span", { children: [_jsx(Text, { align: "center", size: "xs", children: detail.title }), _jsx(Text, { align: "center", size: "xs", bold: true, children: detail.details })] }, index))) }));
-    return (_jsxs("div", { className: styles.container({ size }), children: [_jsx("div", { className: styles.title, children: _jsx(H1, { align: "center", inline: true, children: title }) }), _jsx(Divider, { marginY: "8px" }), _jsxs("div", { className: styles.contents({ imagePosition }), children: [_jsxs("div", { className: styles.imageBlock, children: [renderImage(image, undefined, styles.image), _jsx("div", { className: styles.links, children: linksSection }), detailsPosition === 'image' && mediaDetails] }), _jsx("div", { className: styles.dividerWrapper, children: _jsx(Divider, {}) }), _jsxs("div", { className: styles.description, children: [detailsPosition === 'text' && mediaDetails, _jsx("div", { className: styles.descriptionWrapper, children: description.map((item, index) => (_jsx(Text, { align: "center", size: "sm", children: item }, index))) })] })] })] }));
+    const mediaDetails = details && (_jsx("div", { className: styles.details, children: details.map((detail, index) => (_jsxs("span", { children: [_jsx(Text, { align: "center", size: "xs", children: detail.title }), _jsx(Text, { align: "center", size: "xs", weight: "semibold", children: detail.details })] }, index))) }));
+    return (_jsxs("div", { className: styles.container({
+            size,
+            bg: layerConfig.bg,
+            shadow: layerConfig.shadow,
+            structure: layerConfig.structure,
+        }), children: [_jsx("div", { className: styles.title, children: _jsx(H1, { align: "center", inline: true, children: title }) }), _jsx(Divider, { marginY: "8px" }), _jsxs("div", { className: styles.contents({ imagePosition }), children: [_jsxs("div", { className: styles.imageBlock, children: [renderImage(image, undefined, styles.image), _jsx("div", { className: styles.links, children: linksSection }), detailsPosition === 'image' && mediaDetails] }), _jsx("div", { className: styles.dividerWrapper, children: _jsx(Divider, {}) }), _jsxs("div", { className: styles.description, children: [detailsPosition === 'text' && mediaDetails, _jsx("div", { className: styles.descriptionWrapper, children: description.map((item, index) => (_jsx(Text, { indent: true, align: "left", size: "sm", children: item }, index))) })] })] })] }));
 };
 //# sourceMappingURL=media-card.js.map

package/dist/components/media/media-card/media-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"media-card.js","sourceRoot":"","sources":["../../../../src/components/media/media-card/media-card.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"media-card.js","sourceRoot":"","sources":["../../../../src/components/media/media-card/media-card.tsx"],"names":[],"mappings":"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"}

package/dist/components/media/media-card/media-card.types.d.ts

@@ -1,6 +1,6 @@
 import { ReactElement } from 'react';
 import { IconNames } from '../../../components/ui';
-import { ImageProps, UtilitySizeOptions } from '../../../types';
+import { ImageProps, UtilitySizeOptions, SurfaceLayerOptions } from '../../../types';
 /** An icon link or a custom React element rendered in the links row */
 type MediaLink = {
     /** Named icon to display */
@@ -24,6 +24,8 @@ export type MediaCardProps = {
     image: ImageProps;
     /** Side the image appears on at large viewports @default `'left'` */
     imagePosition?: 'left' | 'right';
+    /** Layer shorthand — resolves bg, shadow, and structure from SurfaceLayerMap @default `'surface'` */
+    layer?: SurfaceLayerOptions;
     /** Links rendered below the image as icons or custom elements */
     links: MediaLink[];
     /** Controls the max width of the card @default `'md'` */

package/dist/components/navigation/nav-menu/{items → components}/index.d.ts

@@ -1,4 +1,4 @@
-export * from './base-item';
+export * from './nav-link';
 export * from './nav-drop-down-item';
 export * from './nav-icon-item';
 export * from './nav-item';

package/dist/components/navigation/nav-menu/{items → components}/index.js

@@ -1,4 +1,4 @@
-export * from './base-item';
+export * from './nav-link';
 export * from './nav-drop-down-item';
 export * from './nav-icon-item';
 export * from './nav-item';

package/dist/components/navigation/nav-menu/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/navigation/nav-menu/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,sBAAsB,CAAC;AACrC,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC"}

package/dist/components/navigation/nav-menu/components/nav-drop-down-item/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/components/navigation/nav-menu/components/nav-drop-down-item/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/components/navigation/nav-menu/{items → components}/nav-drop-down-item/nav-drop-down-item.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { BaseItem } from '../base-item';
+import { NavLink } from '../nav-link';
 import { css, cx } from '../../../../../styled-system/css';
 const styles = {
     parentBlock: css({
@@ -10,7 +10,7 @@ const styles = {
     textBlock: css({
         display: 'flex',
         flexDirection: 'row',
-        gap: '4px',
+        gap: '1',
         justifyContent: 'center',
         alignItems: 'center',
     }),
@@ -24,20 +24,16 @@ const styles = {
     }),
     dropdownContent: css({
         display: 'none',
-        borderWidth: '1px',
         position: { base: 'static', lg: 'absolute' },
         width: 'fit-content',
         borderRadius: 'md',
         padding: '16px',
-        zIndex: 10,
+        zIndex: 'overlay',
         top: { lg: 'calc(100% + 30px)' },
         left: { lg: '50%' },
         transform: { lg: 'translateX(-50%)' },
-        background: 'background',
-        borderColor: 'structure',
-        _dark: {
-            backgroundColor: 'surface',
-        },
+        backgroundColor: 'overlay',
+        boxShadow: 'lg',
     }),
     dropdownContentShow: css({
         display: { base: 'none', lg: 'block' },
@@ -46,13 +42,12 @@ const styles = {
         justifyContent: 'center',
         columnGap: '24px',
         alignItems: 'center',
-        backgroundColor: 'background',
         width: '100vw',
         position: 'relative',
         left: '50%',
         transform: 'translateX(-50%)',
         borderRadius: 'md',
-        zIndex: 10,
+        zIndex: 'overlay',
     }),
     dropdownContentNoShow: css({
         display: 'none',
@@ -70,6 +65,6 @@ export const NavDropdownItem = ({ title, items }) => {
         transition: 'all 200ms',
         transform: isHovered ? 'rotate(180deg)' : 'rotate(0deg)',
     };
-    return (_jsxs("div", { className: styles.parentBlock, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onClick: () => setIsHovered(false), children: [_jsx(BaseItem, { href: "#", children: _jsxs("div", { className: styles.textBlock, children: [_jsx("span", { children: title }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: arrow, children: _jsx("path", { d: "m6 9 6 6 6-6" }) })] }) }), isHovered && _jsx("div", { className: styles.targetArea }), _jsx("div", { className: cx(styles.collapsedDropdownContent, isHovered ? styles.collapsedDropdownContentShow : styles.dropdownContentNoShow), children: items.map((item) => (_jsx(BaseItem, { href: item.href, isDropdownItem: true, children: item.title }, item.title))) }), _jsx("div", { id: "target-123", className: cx(styles.dropdownContent, isHovered ? styles.dropdownContentShow : styles.dropdownContentNoShow), children: items.map((item) => (_jsx(BaseItem, { href: item.href, isDropdownItem: true, children: item.title }, item.title))) })] }));
+    return (_jsxs("div", { className: styles.parentBlock, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onClick: () => setIsHovered(false), children: [_jsx(NavLink, { href: "#", children: _jsxs("div", { className: styles.textBlock, children: [_jsx("span", { children: title }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: arrow, children: _jsx("path", { d: "m6 9 6 6 6-6" }) })] }) }), isHovered && _jsx("div", { className: styles.targetArea }), _jsx("div", { className: cx(styles.collapsedDropdownContent, isHovered ? styles.collapsedDropdownContentShow : styles.dropdownContentNoShow), children: items.map((item) => (_jsx(NavLink, { href: item.href, isDropdownItem: true, children: item.title }, item.title))) }), _jsx("div", { className: cx(styles.dropdownContent, isHovered ? styles.dropdownContentShow : styles.dropdownContentNoShow), children: items.map((item) => (_jsx(NavLink, { href: item.href, isDropdownItem: true, children: item.title }, item.title))) })] }));
 };
 //# sourceMappingURL=nav-drop-down-item.js.map

package/dist/components/navigation/nav-menu/components/nav-drop-down-item/nav-drop-down-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-drop-down-item.js","sourceRoot":"","sources":["../../../../../../src/components/navigation/nav-menu/components/nav-drop-down-item/nav-drop-down-item.tsx"],"names":[],"mappings":"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"}

package/dist/components/navigation/nav-menu/{items → components}/nav-drop-down-item/nav-drop-down-item.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"nav-drop-down-item.types.js","sourceRoot":"","sources":["../../../../../../src/components/navigation/nav-menu/items/nav-drop-down-item/nav-drop-down-item.types.ts"],"names":[],"mappings":""}
+{"version":3,"file":"nav-drop-down-item.types.js","sourceRoot":"","sources":["../../../../../../src/components/navigation/nav-menu/components/nav-drop-down-item/nav-drop-down-item.types.ts"],"names":[],"mappings":""}

package/dist/components/navigation/nav-menu/components/nav-icon-item/index.d.ts

@@ -0,0 +1,2 @@
+export type { NavigationLogoProps } from './navigation-logo.types';
+export { NavigationLogo } from './navigation-logo';

package/dist/components/navigation/nav-menu/components/nav-icon-item/index.js

@@ -0,0 +1,2 @@
+export { NavigationLogo } from './navigation-logo';
+//# sourceMappingURL=index.js.map