lism-css 0.11.0 → 0.13.0

package/README.ja.md

@@ -18,8 +18,8 @@ React / Astro 向けのコンポーネントも提供しており、propsを通
 
 - **軽量** - CSS バンドル全体で約 30 KB（gzip 圧縮時 約 8 KB）と、軽量です。
 - **ゼロビルドフレームワーク** — CSS ファイルを読み込むだけで、プレーン HTML でも動作します。ビルドツール、プリプロセッサ、設定は不要。CDN または npm で利用可能。
-- **レイアウト優先のモジュールアーキテクチャ** — レイアウトモジュール（`l--flex`、`l--stack`、`l--grid`、`l--columns`、`l--center`、`l--sideMain` など）で、カスタム CSS を書かずに一般的なレイアウトパターンを組み立てられます。
-- **CSS レイヤー構造** — `@layer`（lism-reset → lism-base → lism-modules → lism-utility）を使用した明確な詳細度管理。詳細度の衝突を最小限に抑えます。
+- **レイアウト優先のプリミティブアーキテクチャ** — レイアウトプリミティブ（`l--flex`、`l--stack`、`l--grid`、`l--columns`、`l--center`、`l--sideMain` など）で、カスタム CSS を書かずに一般的なレイアウトパターンを組み立てられます。
+- **CSS レイヤー構造** — `@layer`（lism-base → lism-primitive → lism-component → lism-custom → lism-utility）を使用した明確な詳細度管理。`lism-primitive` の内部は `trait` / `layout` / `atomic` のサブレイヤーに分かれています。`lism-component` は BEM 構造の `c--` コンポーネント用レイヤー、`lism-custom` はユーザー独自プレフィックスのクラス用レイヤーです。詳細度の衝突を最小限に抑えます。
 - **デザイントークン** — カラー、スペーシング、フォントサイズ、シャドウ、ボーダー半径を CSS カスタムプロパティで管理。変数を上書きするだけで簡単にカスタマイズできます。
 - **柔軟なプロップクラス** — `-{prop}:{value}` の命名規則（例: `-p:20`、`-bgc:base-2`、`-fz:l`）で CSS プロパティをユーティリティクラスにマッピングし、素早く読みやすいスタイリングを実現します。
 - **レスポンシブシステム** — ブレークポイント固有のクラスと CSS 変数（例: `-p_sm`、`-p_md`）にデフォルトでコンテナクエリを採用し、親要素ベースのレスポンシブデザインを実現。メディアクエリへの切り替えも可能。
@@ -131,7 +131,7 @@ Lism CSS は以下の React / Astro コンポーネントを提供します:
 Lism, Box, Flow, Flex, Cluster, Stack, Grid, FluidCols, SwitchCols, SideMain, Center, Columns, Frame
 
 **構造コンポーネント:**
-Container, Wrapper, Layer, LinkBox
+Container, Wrapper, Layer, BoxLink
 
 **コンテンツコンポーネント:**
 Text, Heading, Inline, Link, Group, List
@@ -147,8 +147,8 @@ Lism CSS は構造化された命名規則を CSS クラスに使用していま
 
 | タイプ | パターン | 例 |
 |--------|---------|-----|
-| レイアウトモジュール | `l--{name}` | `l--flex`, `l--grid`, `l--stack`, `l--center`, `l--columns`, `l--sideMain` |
-| ステートモジュール | `is--{name}` | `is--wrapper`, `is--container`, `is--layer` |
+| レイアウトプリミティブ | `l--{name}` | `l--flex`, `l--grid`, `l--stack`, `l--center`, `l--columns`, `l--sideMain` |
+| トレイトプリミティブ | `is--{name}` | `is--wrapper`, `is--container`, `is--layer` |
 | プロップクラス | `-{prop}:{value}` | `-p:20`, `-m:auto`, `-bgc:base-2`, `-fz:l`, `-ta:center` |
 | ブレークポイント | `-{prop}_{bp}` | `-p_sm`, `-g_md`, `-fz_lg` |
 | ユーティリティクラス | `u--{name}` | `u--cbox` |
@@ -180,10 +180,10 @@ Lism CSS は構造化された命名規則を CSS クラスに使用していま
 Lism CSS は一貫したデザインのための CSS カスタムプロパティを提供します:
 
 - **カラー:** `--base`、`--base-2`、`--text`、`--text-2`、`--link`、`--divider`、`--brand`、`--accent`、パレットカラー（`--red`、`--blue`、`--green` など）
-- **スペーシング:** `--s10` 〜 `--s50`（rem 値にマッピング）
-- **フォントサイズ:** `--fz--xs` 〜 `--fz--2xl`
-- **ボーダー半径:** `--bdrs--5`（2px）〜 `--bdrs--99`（99rem）
-- **シャドウ:** `--shsz--5` 〜 `--shsz--50`（シャドウカラー設定可能）
+- **スペーシング:** `--s5`, `--s10`, `--s15`, `--s20`, `--s30`, `--s40` … `--s80`（rem 値にマッピング）
+- **フォントサイズ:** `--fz--2xs` 〜 `--fz--5xl`
+- **ボーダー半径:** `--bdrs--10`（0.25rem）〜 `--bdrs--99`（99rem）
+- **シャドウ:** `--bxsh--10` 〜 `--bxsh--40`（シャドウカラー設定可能）
 - **コンテナサイズ:** `--sz--xs`（32rem）〜 `--sz--xl`（1600px）
 
 ## UI コンポーネント

package/README.md

@@ -17,10 +17,10 @@ No build step or configuration is required. Simply load the CSS file via CDN or
 
 - **Lightweight** — The entire CSS bundle is approximately 30 KB (~8 KB gzipped).
 - **Zero-Build Framework** — Works with plain HTML by simply loading a CSS file. No build tool, preprocessor, or configuration needed. Available via CDN or npm.
-- **Layout-First Module Architecture** — Pre-built layout modules (`l--flex`, `l--stack`, `l--grid`, `l--columns`, `l--center`, `l--sideMain`, etc.) let you compose common layout patterns without writing custom CSS.
-- **CSS Layer Structure** — Uses `@layer` (lism-reset → lism-base → lism-modules → lism-utility) for clear specificity management. Minimizes specificity conflicts.
+- **Layout-First Primitive Architecture** — Pre-built layout primitives (`l--flex`, `l--stack`, `l--grid`, `l--columns`, `l--center`, `l--sideMain`, etc.) let you compose common layout patterns without writing custom CSS.
+- **CSS Layer Structure** — Uses `@layer` (lism-base → lism-primitive → lism-component → lism-custom → lism-utility) for clear specificity management. `lism-primitive` contains `trait` / `layout` / `atomic` sub-layers. `lism-component` is the layer for BEM-structured `c--` components. `lism-custom` is the layer for user-defined classes with custom prefixes. Minimizes specificity conflicts.
 - **Design Tokens** — Colors, spacing, font sizes, shadows, and border radii are managed as CSS custom properties. Easy to customize by overriding variables.
-- **Flexible Prop Classes** — A `-{prop}:{value}` naming convention (e.g., `-p:20`, `-bgc:base-2`, `-fz:l`) maps CSS properties to utility classes for quick, readable styling.
+- **Flexible Property Classes** — A `-{prop}:{value}` naming convention (e.g., `-p:20`, `-bgc:base-2`, `-fz:l`) maps CSS properties to utility classes for quick, readable styling.
 - **Responsive System** — Breakpoint-specific classes and CSS variables (e.g., `-p_sm`, `-p_md`) use container queries by default for parent-based responsive design. Switchable to media queries.
 - **React & Astro Components** — Dedicated components for both React and Astro translate props into Lism CSS classes and variables automatically. Write `<Stack g="20">` instead of `class="l--stack -g:20"`.
 
@@ -130,7 +130,7 @@ Lism CSS provides the following React and Astro components:
 Lism, Box, Flow, Flex, Cluster, Stack, Grid, FluidCols, SwitchCols, SideMain, Center, Columns, Frame
 
 **Structure Components:**
-Container, Wrapper, Layer, LinkBox
+Container, Wrapper, Layer, BoxLink
 
 **Content Components:**
 Text, Heading, Inline, Link, Group, List
@@ -146,9 +146,9 @@ Lism CSS uses a structured naming convention for CSS classes:
 
 | Type | Pattern | Examples |
 |------|---------|----------|
-| Layout Module | `l--{name}` | `l--flex`, `l--grid`, `l--stack`, `l--center`, `l--columns`, `l--sideMain` |
-| State Module | `is--{name}` | `is--wrapper`, `is--container`, `is--layer` |
-| Prop Class | `-{prop}:{value}` | `-p:20`, `-m:auto`, `-bgc:base-2`, `-fz:l`, `-ta:center` |
+| Layout Primitive | `l--{name}` | `l--flex`, `l--grid`, `l--stack`, `l--center`, `l--columns`, `l--sideMain` |
+| Trait Primitive | `is--{name}` | `is--wrapper`, `is--container`, `is--layer` |
+| Property Class | `-{prop}:{value}` | `-p:20`, `-m:auto`, `-bgc:base-2`, `-fz:l`, `-ta:center` |
 | Breakpoint | `-{prop}_{bp}` | `-p_sm`, `-g_md`, `-fz_lg` |
 | Utility Class | `u--{name}` | `u--cbox` |
 
@@ -179,10 +179,10 @@ Default breakpoints: `sm` = 480px, `md` = 800px, `lg` = 1120px (container querie
 Lism CSS provides CSS custom properties for consistent design:
 
 - **Colors:** `--base`, `--base-2`, `--text`, `--text-2`, `--link`, `--divider`, `--brand`, `--accent`, plus palette colors (`--red`, `--blue`, `--green`, etc.)
-- **Spacing:** `--s10` through `--s50` (mapped to rem values)
-- **Font Sizes:** `--fz--xs` through `--fz--2xl`
-- **Border Radius:** `--bdrs--5` (2px) through `--bdrs--99` (99rem)
-- **Shadows:** `--shsz--5` through `--shsz--50` with configurable shadow colors
+- **Spacing:** `--s5`, `--s10`, `--s15`, `--s20`, `--s30`, `--s40` … `--s80` (mapped to rem values)
+- **Font Sizes:** `--fz--2xs` through `--fz--5xl`
+- **Border Radius:** `--bdrs--10` (0.25rem) through `--bdrs--99` (99rem)
+- **Shadows:** `--bxsh--10` through `--bxsh--40` with configurable shadow colors
 - **Container Sizes:** `--sz--xs` (32rem) through `--sz--xl` (1600px)
 
 ## UI Components
@@ -244,7 +244,7 @@ claude mcp add lism-css -- npx -y @lism-css/mcp
 
 ## Documentation
 
-For full documentation, visit [lism-css.com](https://lism-css.com).
+For full documentation, visit [lism-css.com/en](https://lism-css.com/en/).
 
 ## Community
 

package/config/default-config.ts

@@ -1,9 +1,9 @@
 import TOKENS from './defaults/tokens';
 import PROPS from './defaults/props';
-import STATES from './defaults/states';
+import TRAITS from './defaults/traits';
 
 export default {
   tokens: TOKENS,
   props: PROPS,
-  states: STATES,
+  traits: TRAITS,
 } as const;

package/config/defaults/props.ts

@@ -16,8 +16,8 @@
  */
 
 const PLACE_PRESETS = ['start', 'center', 'end'] as const;
-const PLACE_UTILS = { 'flex-s': 'flex-start', 'flex-e': 'flex-end' } as const;
-const PLACE_SHORTHANDS = { s: 'start', e: 'end', c: 'center', fs: 'flex-s', fe: 'flex-e' } as const;
+const PLACE_FX_PRESETS = ['flex-start', 'flex-end'] as const;
+const PLACE_SHORTHANDS = { s: 'start', e: 'end', c: 'center', fs: 'flex-start', fe: 'flex-end' } as const;
 
 export default {
   f: { prop: 'font', presets: ['inherit'] },
@@ -52,8 +52,7 @@ export default {
 
   d: {
     prop: 'display',
-    presets: ['none', 'block'],
-    utils: { 'in-flex': 'inline-flex' },
+    presets: ['none', 'block', 'flex', 'inline-flex', 'grid', 'inline-grid', 'inline', 'inline-block'],
     bp: 1,
   },
   o: { prop: 'opacity', presets: ['0'], token: 'o', tokenClass: 1 },
@@ -132,7 +131,7 @@ export default {
   bdc: {
     isVar: 1,
     presets: ['brand', 'accent', 'divider', 'inherit', 'transparent'],
-    utils: { cc: 'currentColor' },
+    utils: { current: 'currentColor' },
     token: 'color',
   },
   bdw: { isVar: 1, bp: 1 }, // --bdw のみ
@@ -170,8 +169,7 @@ export default {
   // position
   pos: {
     prop: 'position',
-    presets: ['static', 'fixed', 'sticky'],
-    utils: { rel: 'relative', abs: 'absolute' },
+    presets: ['static', 'fixed', 'sticky', 'relative', 'absolute'],
   },
   z: { prop: 'zIndex', presets: ['-1', '0', '1', '99'] },
   t: { prop: 'top', utils: { 0: '0%' }, presets: ['50%', '100%'], token: 'space' },
@@ -236,15 +234,15 @@ export default {
     overwriteBaseVar: 1,
     bp: 1,
   },
-  'g-x': { prop: 'columnGap', token: 'space', bp: 1 },
-  'g-y': { prop: 'rowGap', token: 'space', bp: 1 },
+  cg: { prop: 'columnGap', token: 'space', bp: 1 },
+  rg: { prop: 'rowGap', token: 'space', bp: 1 },
   cols: { isVar: 1, bp: 1 },
   rows: { isVar: 1, bp: 1 },
 
   // flex
   fxf: { prop: 'flexFlow' },
   fxw: { prop: 'flexWrap', presets: ['wrap'], bp: 1 },
-  fxd: { prop: 'flexDirection', utils: { col: 'column', 'col-r': 'column-reverse', 'row-r': 'row-reverse' }, bp: 1 },
+  fxd: { prop: 'flexDirection', presets: ['column', 'column-reverse', 'row-reverse'], bp: 1 },
   fx: { prop: 'flex', presets: ['1'], bp: 1 },
   fxg: { prop: 'flexGrow', presets: ['1'] },
   fxsh: { prop: 'flexShrink', presets: ['0'] },
@@ -254,12 +252,6 @@ export default {
   // gd: { prop: 'grid' },
   gt: {
     prop: 'gridTemplate',
-    presets: ['repeat'],
-    exUtility: {
-      repeat: {
-        'grid-template': 'repeat(var(--rows,1), 1fr) / repeat(var(--cols,1), 1fr)',
-      },
-    },
     bp: 1,
   },
   gta: { prop: 'gridTemplateAreas', bp: 1 },
@@ -274,7 +266,7 @@ export default {
     // exUtility: { repeat: { '--rows': '1', '--gtr': 'repeat(var(--rows), 1fr)' } },
     bp: 1,
   },
-  gaf: { prop: 'gridAutoFlow', utils: { row: 'row', col: 'column' }, bp: 1 }, //dense
+  gaf: { prop: 'gridAutoFlow', presets: ['row', 'column'], bp: 1 }, //dense
   gac: { prop: 'gridAutoColumns' },
   gar: { prop: 'gridAutoRows' },
 
@@ -291,29 +283,27 @@ export default {
   // -(ai|ac|ji|jc|aslf|jslf):   /    -$1:
   ai: {
     prop: 'alignItems',
-    presets: [...PLACE_PRESETS, 'stretch'],
-    utils: PLACE_UTILS,
+    presets: [...PLACE_PRESETS, 'stretch', ...PLACE_FX_PRESETS],
     shorthands: PLACE_SHORTHANDS,
     bp: 1,
   },
   ac: {
     prop: 'alignContent',
-    presets: PLACE_PRESETS,
-    utils: { ...PLACE_UTILS, between: 'space-between' },
+    presets: [...PLACE_PRESETS, ...PLACE_FX_PRESETS],
+    utils: { between: 'space-between' },
     shorthands: PLACE_SHORTHANDS,
     bp: 1,
   },
   ji: {
     prop: 'justifyItems',
-    presets: [...PLACE_PRESETS, 'stretch'],
-    utils: PLACE_UTILS,
+    presets: [...PLACE_PRESETS, 'stretch', ...PLACE_FX_PRESETS],
     shorthands: PLACE_SHORTHANDS,
     bp: 1,
   },
   jc: {
     prop: 'justifyContent',
-    presets: PLACE_PRESETS,
-    utils: { ...PLACE_UTILS, between: 'space-between' },
+    presets: [...PLACE_PRESETS, ...PLACE_FX_PRESETS],
+    utils: { between: 'space-between' },
     shorthands: PLACE_SHORTHANDS,
     bp: 1,
   },
@@ -363,7 +353,7 @@ export default {
   // },
 
   // others
-  ovwrap: { prop: 'overflowWrap', utils: { any: 'anywhere' } },
+  ovwrap: { prop: 'overflowWrap', presets: ['anywhere'] },
   whspace: { prop: 'whiteSpace', presets: ['nowrap'] },
   // wordbreak: { prop: 'wordBreak', utils: { keep: 'keep-all', all: 'break-all' } },
   float: { prop: 'float', presets: ['left', 'right'] },

package/config/defaults/traits.ts

@@ -0,0 +1,16 @@
+export default {
+  isContainer: 'is--container',
+  isWrapper: {
+    className: 'is--wrapper',
+    preset: ['s', 'l'],
+    presetClass: '-contentSize',
+    customVar: '--contentSize',
+    tokenKey: 'sz',
+  },
+  isLayer: 'is--layer',
+  isBoxLink: 'is--boxLink',
+  isCoverLink: 'is--coverLink',
+  isSide: 'is--side',
+  isSkipFlow: 'is--skipFlow',
+  isVertical: 'is--vertical',
+} as const;

package/config/index.ts

@@ -17,7 +17,7 @@ if (typeof window !== 'undefined' && window._LISM_CSS_CONFIG_) {
 
 export const CONFIG = mergedConfig;
 
-const { tokens, props, states } = CONFIG;
+const { tokens, props, traits } = CONFIG;
 
 const tokensWithColor = {
   color: [...tokens.c.values, ...tokens.palette.values],
@@ -28,8 +28,8 @@ const tokensWithColor = {
 export const TOKENS = arrayConvertToSet(structuredClone(tokensWithColor));
 export const PROPS = arrayConvertToSet(structuredClone(props));
 
-// STATES は objDeepMerge の型推論により literal types が保持される
-export const STATES = states;
+// TRAITS は objDeepMerge の型推論により literal types が保持される
+export const TRAITS = traits;
 
 // ブレイクポイント
 export const BREAK_POINTS = ['sm', 'md', 'lg', 'xl'] as const;

package/dist/components/{atomic/Media → Media}/Media.d.ts

@@ -1,4 +1,4 @@
 import { ElementType } from 'react';
-import { LismComponentProps } from '../../Lism';
-import { MediaAllowedTag } from '../../../lib/types/allowedTags';
+import { LismComponentProps } from '../Lism';
+import { MediaAllowedTag } from '../../lib/types/allowedTags';
 export default function Media<T extends MediaAllowedTag | Exclude<ElementType, string> = 'img'>({ as, ...props }: LismComponentProps<T>): import("react").JSX.Element;

package/dist/components/{atomic/Media → Media}/index.js

@@ -1,5 +1,5 @@
 import { jsx as m } from "react/jsx-runtime";
-import o from "../../Lism/index.js";
+import o from "../Lism/index.js";
 function e({ as: r, ...i }) {
   return /* @__PURE__ */ m(o, { as: r ?? "img", ...i });
 }

package/dist/components/atomic/Icon/getProps.d.ts

@@ -2,7 +2,7 @@ import { default as presets } from './presets';
 import { LismProps } from '../../../lib/getLismProps';
 import { ElementType } from 'react';
 export type PresetIconName = keyof typeof presets;
-interface IconObject {
+export interface IconObject {
     as: ElementType;
     [key: string]: unknown;
 }

package/dist/components/atomic/Icon/index.d.ts

@@ -1,2 +1,2 @@
 export { default as Icon } from './Icon';
-export type { PresetIconName } from './getProps';
+export type { PresetIconName, IconProps, IconObject } from './getProps';

package/dist/components/index.d.ts

@@ -1,5 +1,4 @@
 export * from './Lism';
-export { default as HTML } from './HTML';
 /** @deprecated DummyText / DummyImage (@lism-css/ui) を使用してください */
 export * from './Dummy';
 export * from './Text';
@@ -8,24 +7,25 @@ export * from './Group';
 export * from './Heading';
 export * from './Link';
 export * from './List';
-export * from './Container';
-export * from './Wrapper';
-export * from './Layer';
-export * from './LinkBox';
-export * from './Box';
-export * from './Flow';
-export * from './Flex';
-export * from './Cluster';
-export * from './Stack';
-export * from './Grid';
-export * from './FluidCols';
-export * from './SwitchCols';
-export * from './SideMain';
-export * from './Center';
-export * from './Columns';
-export * from './Frame';
+export * from './Media';
+export * from './layout/Box';
+export * from './layout/Center';
+export * from './layout/Cluster';
+export * from './layout/Columns';
+export * from './layout/Flex';
+export * from './layout/Flow';
+export * from './layout/FluidCols';
+export * from './layout/Frame';
+export * from './layout/Grid';
+export * from './layout/SideMain';
+export * from './layout/Stack';
+export * from './layout/SwitchCols';
+export * from './layout/TileGrid';
+export * from './state/Container';
+export * from './state/Layer';
+export * from './state/BoxLink';
+export * from './state/Wrapper';
 export * from './atomic/Decorator';
 export * from './atomic/Divider';
 export * from './atomic/Icon';
-export * from './atomic/Media';
 export * from './atomic/Spacer';

package/dist/components/index.js

@@ -1,64 +1,64 @@
-import { default as o } from "./HTML/index.js";
-import { default as t } from "./Box/index.js";
-import { default as l } from "./Center/index.js";
-import { default as d } from "./Cluster/index.js";
-import { default as u } from "./Columns/index.js";
-import { default as x } from "./Container/index.js";
+import { default as o } from "./layout/Box/index.js";
+import { default as t } from "./state/BoxLink/index.js";
+import { default as l } from "./layout/Center/index.js";
+import { default as s } from "./layout/Cluster/index.js";
+import { default as u } from "./layout/Columns/index.js";
+import { default as x } from "./state/Container/index.js";
 import { default as n } from "./atomic/Decorator/index.js";
-import { default as C } from "./atomic/Divider/index.js";
+import { default as L } from "./atomic/Divider/index.js";
 import { default as F } from "./Dummy/index.js";
-import { default as k } from "./Flex/index.js";
-import { default as I } from "./Flow/index.js";
-import { default as w } from "./FluidCols/index.js";
-import { default as B } from "./Frame/index.js";
-import { default as H } from "./Grid/index.js";
-import { default as g } from "./Group/index.js";
-import { default as v } from "./Heading/index.js";
+import { default as k } from "./layout/Flex/index.js";
+import { default as G } from "./layout/Flow/index.js";
+import { default as w } from "./layout/FluidCols/index.js";
+import { default as B } from "./layout/Frame/index.js";
+import { default as T } from "./layout/Grid/index.js";
+import { default as h } from "./Group/index.js";
+import { default as H } from "./Heading/index.js";
 import { default as b } from "./atomic/Icon/index.js";
 import { default as q } from "./Inline/index.js";
-import { default as A } from "./Layer/index.js";
+import { default as A } from "./state/Layer/index.js";
 import { default as J } from "./Link/index.js";
-import { default as N } from "./LinkBox/index.js";
-import { default as P } from "./Lism/index.js";
-import { default as R } from "./List/index.js";
-import { default as V } from "./List/ListItem.js";
-import { default as Y } from "./atomic/Media/index.js";
-import { default as _ } from "./SideMain/index.js";
-import { default as ee } from "./atomic/Spacer/index.js";
-import { default as oe } from "./Stack/index.js";
-import { default as te } from "./SwitchCols/index.js";
-import { default as le } from "./Text/index.js";
-import { default as de } from "./Wrapper/index.js";
+import { default as N } from "./Lism/index.js";
+import { default as P } from "./List/index.js";
+import { default as R } from "./List/ListItem.js";
+import { default as V } from "./Media/index.js";
+import { default as Y } from "./layout/SideMain/index.js";
+import { default as _ } from "./atomic/Spacer/index.js";
+import { default as ee } from "./layout/Stack/index.js";
+import { default as oe } from "./layout/SwitchCols/index.js";
+import { default as te } from "./Text/index.js";
+import { default as le } from "./layout/TileGrid/index.js";
+import { default as se } from "./state/Wrapper/index.js";
 export {
-  t as Box,
+  o as Box,
+  t as BoxLink,
   l as Center,
-  d as Cluster,
+  s as Cluster,
   u as Columns,
   x as Container,
   n as Decorator,
-  C as Divider,
+  L as Divider,
   F as Dummy,
   k as Flex,
-  I as Flow,
+  G as Flow,
   w as FluidCols,
   B as Frame,
-  H as Grid,
-  g as Group,
-  o as HTML,
-  v as Heading,
+  T as Grid,
+  h as Group,
+  H as Heading,
   b as Icon,
   q as Inline,
   A as Layer,
   J as Link,
-  N as LinkBox,
-  P as Lism,
-  R as List,
-  V as ListItem,
-  Y as Media,
-  _ as SideMain,
-  ee as Spacer,
-  oe as Stack,
-  te as SwitchCols,
-  le as Text,
-  de as Wrapper
+  N as Lism,
+  P as List,
+  R as ListItem,
+  V as Media,
+  Y as SideMain,
+  _ as Spacer,
+  ee as Stack,
+  oe as SwitchCols,
+  te as Text,
+  le as TileGrid,
+  se as Wrapper
 };

package/dist/components/{Box → layout/Box}/Box.d.ts

@@ -1,4 +1,4 @@
 import { ElementType } from 'react';
-import { LayoutComponentProps } from '../Lism';
-import { BoxProps } from '../../lib/types/LayoutProps';
+import { LayoutComponentProps } from '../../Lism';
+import { BoxProps } from '../../../lib/types/LayoutProps';
 export default function Box<T extends ElementType = 'div'>(props: LayoutComponentProps<T, BoxProps>): import("react").JSX.Element;

package/dist/components/{Box → layout/Box}/index.js

@@ -1,5 +1,5 @@
 import { jsx as r } from "react/jsx-runtime";
-import t from "../Lism/index.js";
+import t from "../../Lism/index.js";
 function i(o) {
   return /* @__PURE__ */ r(t, { layout: "box", ...o });
 }

package/dist/components/{Center → layout/Center}/Center.d.ts

@@ -1,4 +1,4 @@
 import { ElementType } from 'react';
-import { LayoutComponentProps } from '../Lism';
-import { CenterProps } from '../../lib/types/LayoutProps';
+import { LayoutComponentProps } from '../../Lism';
+import { CenterProps } from '../../../lib/types/LayoutProps';
 export default function Center<T extends ElementType = 'div'>(props: LayoutComponentProps<T, CenterProps>): import("react").JSX.Element;

package/dist/components/{Center → layout/Center}/index.js

@@ -1,5 +1,5 @@
 import { jsx as t } from "react/jsx-runtime";
-import e from "../Lism/index.js";
+import e from "../../Lism/index.js";
 function n(r) {
   return /* @__PURE__ */ t(e, { layout: "center", ...r });
 }

package/dist/components/{Cluster → layout/Cluster}/Cluster.d.ts

@@ -1,4 +1,4 @@
 import { ElementType } from 'react';
-import { LayoutComponentProps } from '../Lism';
-import { ClusterProps } from '../../lib/types/LayoutProps';
+import { LayoutComponentProps } from '../../Lism';
+import { ClusterProps } from '../../../lib/types/LayoutProps';
 export default function Cluster<T extends ElementType = 'div'>(props: LayoutComponentProps<T, ClusterProps>): import("react").JSX.Element;

package/dist/components/{Cluster → layout/Cluster}/index.js

@@ -1,5 +1,5 @@
 import { jsx as t } from "react/jsx-runtime";
-import o from "../Lism/index.js";
+import o from "../../Lism/index.js";
 function m(r) {
   return /* @__PURE__ */ t(o, { layout: "cluster", ...r });
 }

package/dist/components/{Columns → layout/Columns}/Columns.d.ts

@@ -1,4 +1,4 @@
 import { ElementType } from 'react';
-import { LayoutComponentProps } from '../Lism';
-import { ColumnsProps } from '../../lib/types/LayoutProps';
+import { LayoutComponentProps } from '../../Lism';
+import { ColumnsProps } from '../../../lib/types/LayoutProps';
 export default function Columns<T extends ElementType = 'div'>(props: LayoutComponentProps<T, ColumnsProps>): import("react").JSX.Element;

package/dist/components/{Columns → layout/Columns}/index.js

@@ -1,5 +1,5 @@
 import { jsx as m } from "react/jsx-runtime";
-import r from "../Lism/index.js";
+import r from "../../Lism/index.js";
 function n(o) {
   return /* @__PURE__ */ m(r, { layout: "columns", ...o });
 }

package/dist/components/{Flex → layout/Flex}/Flex.d.ts

@@ -1,4 +1,4 @@
 import { ElementType } from 'react';
-import { LayoutComponentProps } from '../Lism';
-import { FlexProps } from '../../lib/types/LayoutProps';
+import { LayoutComponentProps } from '../../Lism';
+import { FlexProps } from '../../../lib/types/LayoutProps';
 export default function Flex<T extends ElementType = 'div'>(props: LayoutComponentProps<T, FlexProps>): import("react").JSX.Element;

package/dist/components/{Flex → layout/Flex}/index.js

@@ -1,5 +1,5 @@
 import { jsx as r } from "react/jsx-runtime";
-import t from "../Lism/index.js";
+import t from "../../Lism/index.js";
 function m(o) {
   return /* @__PURE__ */ r(t, { layout: "flex", ...o });
 }

package/dist/components/{Flow → layout/Flow}/Flow.d.ts

@@ -1,4 +1,4 @@
 import { ElementType } from 'react';
-import { LayoutComponentProps } from '../Lism';
-import { FlowLayoutProps } from '../../lib/types/LayoutProps';
+import { LayoutComponentProps } from '../../Lism';
+import { FlowLayoutProps } from '../../../lib/types/LayoutProps';
 export default function Flow<T extends ElementType = 'div'>(props: LayoutComponentProps<T, FlowLayoutProps>): import("react").JSX.Element;

package/dist/components/{Flow → layout/Flow}/index.js

@@ -1,5 +1,5 @@
 import { jsx as r } from "react/jsx-runtime";
-import t from "../Lism/index.js";
+import t from "../../Lism/index.js";
 function i(o) {
   return /* @__PURE__ */ r(t, { layout: "flow", ...o });
 }

package/dist/components/{FluidCols → layout/FluidCols}/FluidCols.d.ts

@@ -1,4 +1,4 @@
 import { ElementType } from 'react';
-import { LayoutComponentProps } from '../Lism';
-import { FluidColsProps } from '../../lib/types/LayoutProps';
+import { LayoutComponentProps } from '../../Lism';
+import { FluidColsProps } from '../../../lib/types/LayoutProps';
 export default function FluidCols<T extends ElementType = 'div'>(props: LayoutComponentProps<T, FluidColsProps>): import("react").JSX.Element;

package/dist/components/{FluidCols → layout/FluidCols}/index.js

@@ -1,5 +1,5 @@
 import { jsx as r } from "react/jsx-runtime";
-import t from "../Lism/index.js";
+import t from "../../Lism/index.js";
 function u(o) {
   return /* @__PURE__ */ r(t, { layout: "fluidCols", ...o });
 }

package/dist/components/{Frame → layout/Frame}/Frame.d.ts

@@ -1,4 +1,4 @@
 import { ElementType } from 'react';
-import { LayoutComponentProps } from '../Lism';
-import { FrameProps } from '../../lib/types/LayoutProps';
+import { LayoutComponentProps } from '../../Lism';
+import { FrameProps } from '../../../lib/types/LayoutProps';
 export default function Frame<T extends ElementType = 'div'>(props: LayoutComponentProps<T, FrameProps>): import("react").JSX.Element;

package/dist/components/{Frame → layout/Frame}/index.js

@@ -1,5 +1,5 @@
 import { jsx as m } from "react/jsx-runtime";
-import o from "../Lism/index.js";
+import o from "../../Lism/index.js";
 function e(r) {
   return /* @__PURE__ */ m(o, { layout: "frame", ...r });
 }

package/dist/components/{Grid → layout/Grid}/Grid.d.ts

@@ -1,4 +1,4 @@
 import { ElementType } from 'react';
-import { LayoutComponentProps } from '../Lism';
-import { GridLayoutProps } from '../../lib/types/LayoutProps';
+import { LayoutComponentProps } from '../../Lism';
+import { GridLayoutProps } from '../../../lib/types/LayoutProps';
 export default function Grid<T extends ElementType = 'div'>(props: LayoutComponentProps<T, GridLayoutProps>): import("react").JSX.Element;

package/dist/components/{Grid → layout/Grid}/index.js

@@ -1,5 +1,5 @@
 import { jsx as o } from "react/jsx-runtime";
-import t from "../Lism/index.js";
+import t from "../../Lism/index.js";
 function f(r) {
   return /* @__PURE__ */ o(t, { layout: "grid", ...r });
 }