lism-css 0.11.0 → 0.12.0

package/README.ja.md

@@ -19,7 +19,7 @@ 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）を使用した明確な詳細度管理。詳細度の衝突を最小限に抑えます。
+- **CSS レイヤー構造** — `@layer`（lism-reset → lism-base → lism-modules → lism-custom → lism-utility）を使用した明確な詳細度管理。`lism-custom` はユーザー独自プレフィックスのクラス用レイヤーです。詳細度の衝突を最小限に抑えます。
 - **デザイントークン** — カラー、スペーシング、フォントサイズ、シャドウ、ボーダー半径を CSS カスタムプロパティで管理。変数を上書きするだけで簡単にカスタマイズできます。
 - **柔軟なプロップクラス** — `-{prop}:{value}` の命名規則（例: `-p:20`、`-bgc:base-2`、`-fz:l`）で CSS プロパティをユーティリティクラスにマッピングし、素早く読みやすいスタイリングを実現します。
 - **レスポンシブシステム** — ブレークポイント固有のクラスと CSS 変数（例: `-p_sm`、`-p_md`）にデフォルトでコンテナクエリを採用し、親要素ベースのレスポンシブデザインを実現。メディアクエリへの切り替えも可能。
@@ -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

@@ -18,9 +18,9 @@ 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.
+- **CSS Layer Structure** — Uses `@layer` (lism-reset → lism-base → lism-modules → lism-custom → lism-utility) for clear specificity management. `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"`.
 
@@ -148,7 +148,7 @@ Lism CSS uses a structured naming convention for CSS classes:
 |------|---------|----------|
 | 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` |
+| 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

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/states.ts

@@ -1,6 +1,3 @@
-import getSvgUrl from '../helper/getSvgUrl.js';
-// import minifyHtml from '../helper/minifyHtml.js';
-
 export default {
   isContainer: 'is--container',
   isWrapper: {
@@ -15,29 +12,4 @@ export default {
   isSide: 'is--side',
   isSkipFlow: 'is--skipFlow',
   isVertical: 'is--vertical',
-  setGutter: 'set--gutter',
-
-  // set class
-  setShadow: 'set--shadow',
-  setHov: 'set--hov',
-  setTransition: 'set--transition',
-  setMask: {
-    // 'set--mask',
-    className: 'set--mask',
-    setStyles: (propVal: string) => {
-      // minify化
-      // propVal = minifyHtml(propVal);
-      let imgUrl = propVal;
-      if (imgUrl.startsWith('<svg')) {
-        imgUrl = getSvgUrl(propVal, 'base64');
-      }
-      return {
-        '--maskImg': imgUrl,
-      };
-    },
-  },
-  setPlain: 'set--plain',
-  // setRevert: 'set--revert',
-  setInnerRs: 'set--innerRs',
-  setBp: 'set--bp',
 } 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/LinkBox';
+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 n } from "./atomic/Decorator/index.js";
-import { default as C } 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 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 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 o } from "./layout/Box/index.js";
+import { default as t } from "./layout/Center/index.js";
+import { default as l } from "./layout/Cluster/index.js";
+import { default as s } from "./layout/Columns/index.js";
+import { default as u } from "./state/Container/index.js";
+import { default as x } from "./atomic/Decorator/index.js";
+import { default as n } from "./atomic/Divider/index.js";
+import { default as L } from "./Dummy/index.js";
+import { default as F } from "./layout/Flex/index.js";
+import { default as k } from "./layout/Flow/index.js";
+import { default as G } from "./layout/FluidCols/index.js";
+import { default as w } from "./layout/Frame/index.js";
+import { default as B } from "./layout/Grid/index.js";
+import { default as T } from "./Group/index.js";
+import { default as h } from "./Heading/index.js";
+import { default as H } from "./atomic/Icon/index.js";
+import { default as b } from "./Inline/index.js";
+import { default as q } from "./state/Layer/index.js";
+import { default as A } from "./Link/index.js";
+import { default as J } from "./state/LinkBox/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,
-  l as Center,
-  d as Cluster,
-  u as Columns,
-  x as Container,
-  n as Decorator,
-  C as Divider,
-  F as Dummy,
-  k as Flex,
-  I as Flow,
-  w as FluidCols,
-  B as Frame,
-  H as Grid,
-  g as Group,
-  o as HTML,
-  v 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
+  o as Box,
+  t as Center,
+  l as Cluster,
+  s as Columns,
+  u as Container,
+  x as Decorator,
+  n as Divider,
+  L as Dummy,
+  F as Flex,
+  k as Flow,
+  G as FluidCols,
+  w as Frame,
+  B as Grid,
+  T as Group,
+  h as Heading,
+  H as Icon,
+  b as Inline,
+  q as Layer,
+  A as Link,
+  J as LinkBox,
+  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 });
 }

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

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

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

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

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

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

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

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

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

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