lism-css 0.7.3 → 0.8.0-rc.1

package/README.md

@@ -36,7 +36,7 @@ For HTML sites, you can also load CSS via CDN.
 import { Box, HTML, ... } from 'lism-css/react';
 
 // ...
-<Box p='20' bgc="base-2">
+<Box p='15' bgc="base-2">
 	<HTML.p fz="l">Lorem ipsum text...</HTML.p>
 </Box>
 // ...

package/bin/build-config.js

@@ -18,7 +18,7 @@ function generateUtilities(propConfig, TOKENS) {
 	const utilities = {};
 
 	// tokenをクラス化するのであれば presetsへ追加
-	if (token && tokenClass) {
+	if (token && tokenClass === 1) {
 		const tokenValues = TOKENS[token];
 		if (tokenValues && Array.isArray(tokenValues)) {
 			presets.push(...tokenValues);

package/config/defaults/props.js

@@ -6,6 +6,7 @@
  *
  * ↓コンポーネント処理で使用される
  * tokenClass: 1 → 対応するトークン値がそのまま全てユーティリティクラス化されるもの。
+ *             2 → ユーティリティクラスされ、内容は別途ファイルで記述するもの。
  * shorthands: → コンポーネント側で短く書くための設定
  *
  * ↓SCSS出力で使用される
@@ -24,11 +25,23 @@ export default {
 	fw: { prop: 'fontWeight', token: 'fw', tokenClass: 1 },
 	ff: { prop: 'fontFamily', token: 'ff', tokenClass: 1 },
 	fs: { prop: 'fontStyle', presets: ['italic'], shorthands: { i: 'italic' } },
-	lh: { prop: 'lineHeight', presets: ['1'], token: 'lh', tokenClass: 1, bp: 1, alwaysVar: 1 },
+	lh: {
+		prop: 'lineHeight',
+		presets: ['1'],
+		token: 'hl',
+		tokenClass: 2,
+		exUtility: { 1: '' },
+	},
+	hl: {
+		isVar: 1,
+		token: 'hl',
+		tokenClass: 0,
+		bp: 1,
+	},
 	lts: { prop: 'letterSpacing', token: 'lts', tokenClass: 1 },
 	ta: { prop: 'textAlign', presets: ['center', 'left', 'right'] },
-	td: { prop: 'textDecoration', utils: { under: 'underline', none: 'none' } },
-	// tt: { prop: 'textTransform', utils: { upper: 'uppercase', lower: 'lowercase' } },
+	td: { prop: 'textDecoration', utils: { none: 'none' } },
+	tt: { prop: 'textTransform', utils: { upper: 'uppercase', lower: 'lowercase' } },
 	// te: { prop: 'textEmphasis', presets: ['filled'] },
 	// tsh: { prop: 'textShadow' },
 
@@ -54,7 +67,7 @@ export default {
 
 	// size
 	w: { prop: 'width', utils: { fit: 'fit-content' }, presets: ['100%'], token: 'sz', bp: 1 },
-	h: { prop: 'height', presets: ['100%'], token: 'sz', bp: 1 },
+	h: { prop: 'height', utils: { fit: 'fit-content' }, presets: ['100%'], token: 'sz', bp: 1 },
 	'min-w': { prop: 'minWidth', presets: ['100%'], token: 'sz', bp: 1 },
 	'max-w': { prop: 'maxWidth', presets: ['100%'], token: 'sz', bp: 1 },
 	'min-h': { prop: 'minHeight', presets: ['100%'], token: 'sz', bp: 1 },
@@ -69,7 +82,7 @@ export default {
 		exUtility: {
 			min: '',
 			full: '',
-			outer: '',
+			container: '',
 		},
 	},
 	ysz: { prop: 'blockSize', token: 'sz' },
@@ -78,21 +91,20 @@ export default {
 
 	// bg
 	bg: { prop: 'background', bp: 1 },
-	bgi: { prop: 'backgroundImage' },
-	bgr: { prop: 'backgroundRepeat', utils: { no: 'no-repeat' } },
-	bgp: { prop: 'backgroundPosition', presets: ['center'] },
-	bgsz: { prop: 'backgroundSize', presets: ['cover', 'contain'] },
-	bga: { prop: 'backgroundAttachment' }, // fixed
-	bgo: { prop: 'backgroundOrigin' }, // border, padding, content
-	bgblend: { prop: 'backgroundBlendMode' },
-	bgclip: {
-		prop: 'backgroundClip',
-		presets: ['text'],
-	},
+	// bgi: { prop: 'backgroundImage' },
+	// bgr: { prop: 'backgroundRepeat', utils: { no: 'no-repeat' } },
+	// bgp: { prop: 'backgroundPosition', presets: ['center'] },
+	// bgsz: { prop: 'backgroundSize', presets: ['cover', 'contain'] },
+	// bga: { prop: 'backgroundAttachment' }, // fixed
+	// bgo: { prop: 'backgroundOrigin' }, // border, padding, content
+	// bgblend: { prop: 'backgroundBlendMode' },
+	// bgclip: {
+	// 	prop: 'backgroundClip',
+	// 	presets: ['text'],
+	// },
 	bgc: {
 		prop: 'backgroundColor',
-		presets: ['base', 'base-2', 'text', 'inherit', 'main', 'accent'],
-		utils: { trsp: 'transparent' },
+		presets: ['base', 'base-2', 'text', 'brand', 'accent', 'inherit', 'transparent'],
 		token: 'color',
 		exUtility: { inherit: { 'background-color': 'inherit' } },
 		alwaysVar: 1,
@@ -101,9 +113,7 @@ export default {
 	c: {
 		// Note: bg系（bgclip）より後にくるように。
 		prop: 'color',
-		presets: ['base', 'text', 'text-2', 'main', 'accent', 'inherit'],
-		utils: { trsp: 'transparent' },
-		// tt
+		presets: ['base', 'text', 'text-2', 'brand', 'accent', 'inherit'],
 		token: 'color',
 		exUtility: {
 			inherit: { color: 'inherit' }, // --c ではなく color で出力したい
@@ -116,8 +126,8 @@ export default {
 	bds: { isVar: 1, presets: ['dashed', 'dotted', 'double'] },
 	bdc: {
 		isVar: 1,
-		presets: ['main', 'accent', 'line', 'inherit'],
-		utils: { trsp: 'transparent' },
+		presets: ['brand', 'accent', 'divider', 'inherit', 'transparent'],
+		utils: { cc: 'currentColor' },
 		token: 'color',
 	},
 	bdw: { isVar: 1, bp: 1 }, // --bdw のみ
@@ -250,11 +260,7 @@ export default {
 	gta: { prop: 'gridTemplateAreas', bp: 1 },
 	gtc: {
 		prop: 'gridTemplateColumns',
-		presets: ['subgrid', 'liquid'],
-		exUtility: {
-			// repeat: { '--cols': '1', '--gtc': 'repeat(var(--cols), 1fr)' },
-			liquid: { '--cols': 'var(--sz--min)', '--gtc': 'repeat(auto-fit, minmax(min(var(--cols), 100%), 1fr))' },
-		},
+		presets: ['subgrid'],
 		bp: 1,
 	},
 	gtr: {
@@ -306,6 +312,8 @@ export default {
 		shorthands: PLACE_SHORTHANDS,
 		bp: 1,
 	},
+	pi: { prop: 'placeItems', presets: PLACE_PRESETS },
+	pc: { prop: 'placeContent', presets: PLACE_PRESETS },
 	aslf: {
 		prop: 'alignSelf',
 		presets: [...PLACE_PRESETS, 'stretch'],
@@ -316,53 +324,44 @@ export default {
 		presets: [...PLACE_PRESETS, 'stretch'],
 		shorthands: PLACE_SHORTHANDS,
 	},
-	pi: { prop: 'placeItems' },
-	pc: { prop: 'placeContent' },
-	pslf: { prop: 'placeSelf' },
+	pslf: { prop: 'placeSelf', presets: PLACE_PRESETS },
 	order: { prop: 'order', presets: ['0', '-1', '1'] },
 
 	// transform
-	translate: {
-		prop: 'translate',
-		utils: {
-			'-50X': '-50% 0',
-			'-50Y': '0 -50%',
-			'-50XY': '-50% -50%',
-		},
-	},
-	//rtt
-	rotate: {
-		prop: 'rotate',
-		utils: {
-			[`45`]: '45deg',
-			'-45': '-45deg',
-			[`90`]: '90deg',
-			'-90': '-90deg',
-			// '180': '180deg',
-		},
-	},
-	//scl
-	scale: {
-		prop: 'scale',
-		utils: {
-			'-X': '-1 1',
-			'-Y': '1 -1',
-			'-XY': '-1 -1',
-		},
-	},
+	// translate: {
+	// 	prop: 'translate',
+	// 	utils: {
+	// 		'-50X': '-50% 0',
+	// 		'-50Y': '0 -50%',
+	// 		'-50XY': '-50% -50%',
+	// 	},
+	// },
+
+	// rotate: {
+	// 	prop: 'rotate',
+	// 	utils: {
+	// 		[`45`]: '45deg',
+	// 		'-45': '-45deg',
+	// 		[`90`]: '90deg',
+	// 		'-90': '-90deg',
+	// 		// '180': '180deg',
+	// 	},
+	// },
+
+	// scale: {
+	// 	prop: 'scale',
+	// 	utils: {
+	// 		'-X': '-1 1',
+	// 		'-Y': '1 -1',
+	// 		'-XY': '-1 -1',
+	// 	},
+	// },
 
 	// others
-	// msk: { prop: 'mask', bp: 1 },
-	ovw: { prop: 'overflowWrap', utils: { any: 'anywhere' } },
-	whitespace: { prop: 'whiteSpace', presets: ['nowrap'] },
+	ovwrap: { prop: 'overflowWrap', utils: { any: 'anywhere' } },
+	whspace: { prop: 'whiteSpace', presets: ['nowrap'] },
 	// wordbreak: { prop: 'wordBreak', utils: { keep: 'keep-all', all: 'break-all' } },
-	writing: { prop: 'writingMode', token: 'writing', tokenClass: 1, bp: 1 },
 	float: { prop: 'float', presets: ['left', 'right'] },
 	clear: { prop: 'clear', presets: ['both'] },
 	isolation: { prop: 'isolation', presets: ['isolate'] },
-
-	// transition
-	duration: { isVar: 1 },
-	delay: { isVar: 1 },
-	ease: { isVar: 1 },
 };

package/config/defaults/states.js

@@ -2,21 +2,22 @@ import getSvgUrl from '../helper/getSvgUrl.js';
 // import minifyHtml from '../helper/minifyHtml.js';
 
 export default {
-	isContainer: {
-		className: 'is--container',
-		preset: ['s', 'm', 'l'],
-		presetClass: '-container',
-		customVar: '--contentSz',
+	isContainer: 'is--container',
+	isWrapper: {
+		className: 'is--wrapper',
+		preset: ['s', 'l'],
+		presetClass: '-content',
+		customVar: '--contentSize',
 		tokenKey: 'sz',
 	},
 	isLayer: 'is--layer',
 	isLinkBox: 'is--linkBox',
 	isSide: 'is--side',
 	isSkipFlow: 'is--skipFlow',
+	isVertical: 'is--vertical',
 	hasGutter: 'has--gutter',
 
 	// set class
-
 	setShadow: 'set-shadow',
 	setHov: 'set-hov',
 	setTransition: 'set-transition',
@@ -37,6 +38,6 @@ export default {
 		},
 	},
 	setPlain: 'set-plain',
-	setRevert: 'set-revert',
+	// setRevert: 'set-revert',
 	setInnerRs: 'set-innerRs',
 };

package/config/defaults/tokens.js

@@ -1,21 +1,22 @@
 export default {
 	fz: ['root', 'base', '5xl', '4xl', '3xl', '2xl', 'xl', 'l', 'm', 's', 'xs', '2xs'],
-	lh: ['base', 'xs', 's', 'l', 'xl'],
+	lh: ['base', 'xs', 's', 'l'],
+	hl: ['base', 'xs', 's', 'l'],
 	lts: ['base', 's', 'l'],
 	ff: ['base', 'accent', 'mono'],
 	fw: ['thin', 'light', 'normal', 'medium', 'bold', 'black'],
 	o: ['-10', '-20', '-30'],
 	bdrs: ['5', '10', '20', '30', '40', '50', '99', 'inner'],
 	bxsh: ['5', '10', '20', '30', '40', '50'],
-	sz: ['xs', 's', 'm', 'l', 'xl', 'min', 'full', 'outer'],
+	sz: ['xs', 's', 'm', 'l', 'xl', 'min', 'full', 'container'],
 	ar: ['og'],
 	space: {
 		pre: '--s',
-		values: ['5', '10', '20', '30', '40', '50', '60', '70', '80'],
+		values: ['5', '10', '15', '20', '30', '40', '50', '60', '70', '80'],
 	},
 	c: {
-		pre: '--c--',
-		values: ['base', 'base-2', 'text', 'text-2', 'line', 'link', 'main', 'accent'],
+		pre: '--',
+		values: ['base', 'base-2', 'text', 'text-2', 'border', 'link', 'brand', 'accent'],
 	},
 	palette: {
 		pre: '--',

package/dist/components/Accordion/setAccordion.js

@@ -1,37 +1,37 @@
-const r = (t) => Promise.all(t.getAnimations().map((e) => e.finished)), d = async (t, e = !1) => {
+const s = (t) => Promise.all(t.getAnimations().map((e) => e.finished)), d = async (t, e = !1) => {
   if (t.dataset.animating && !e) return;
   t.dataset.animating = "1";
   const n = t.querySelector(".d--accordion_body");
-  t.open ? t.open && (t.classList.remove("js-opened"), await r(n), delete t.dataset.animating, t.open = !1) : (t.open = !0, setTimeout(async () => {
-    t.classList.add("js-opened"), await r(n), delete t.dataset.animating;
+  t.open ? t.open && (t.removeAttribute("data-opened"), await s(n), delete t.dataset.animating, t.open = !1) : (t.open = !0, setTimeout(async () => {
+    t.setAttribute("data-opened", ""), await s(n), delete t.dataset.animating;
   }, 5));
-}, p = (t, e) => {
-  const n = e.open, o = e.classList.contains("js-opened");
-  n && !o && e.classList.add("js-opened"), !n && o && e.classList.remove("js-opened");
-}, u = (t) => {
+}, u = (t, e) => {
+  const n = e.open, o = e.hasAttribute("data-opened");
+  n && !o && e.setAttribute("data-opened", ""), !n && o && e.removeAttribute("data-opened");
+}, p = (t) => {
   const e = t, n = e.querySelector('[data-role="trigger"]') || e.querySelector("summary");
   if (!n) return;
   let o = !1;
-  const a = e.parentNode;
-  a != null && (o = a.dataset.accordionMultiple !== "disallow");
-  const c = (s) => {
-    if (s.preventDefault(), !o && !e.open) {
-      const i = a.querySelector(".js-opened");
-      i != null && d(i, !0);
+  const r = e.parentNode;
+  r != null && (o = r.dataset.accordionMultiple !== "disallow");
+  const c = (a) => {
+    if (a.preventDefault(), !o && !e.open) {
+      const l = r.querySelector("[data-opened]");
+      l != null && d(l, !0);
     }
     d(e);
-  }, l = (s) => {
-    p(s, e);
+  }, i = (a) => {
+    u(a, e);
   };
-  return n.addEventListener("click", c), e.addEventListener("toggle", l), () => {
-    n.removeEventListener("click", c), e.removeEventListener("toggle", l);
+  return n.addEventListener("click", c), e.addEventListener("toggle", i), () => {
+    n.removeEventListener("click", c), e.removeEventListener("toggle", i);
   };
 }, m = () => {
   document.querySelectorAll(".d--accordion").forEach((e) => {
-    u(e);
+    p(e);
   });
 };
 export {
   m as default,
-  u as setEvent
+  p as setEvent
 };

package/dist/components/Container/index.js

@@ -1,8 +1,8 @@
-import { jsx as o } from "react/jsx-runtime";
-import i from "../Lism/index.js";
-function m({ size: r, ...t }) {
-  return /* @__PURE__ */ o(i, { isContainer: r || !0, ...t });
+import { jsx as i } from "react/jsx-runtime";
+import o from "../Lism/index.js";
+function a({ size: r, ...t }) {
+  return /* @__PURE__ */ i(o, { isContainer: !0, isWrapper: r, ...t });
 }
 export {
-  m as default
+  a as default
 };

package/dist/components/Dummy/texts.js

@@ -1,24 +1,39 @@
 const e = {
+  ja: [
+    "ロレム・イプサムの座り雨。",
+    "目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。",
+    "Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。",
+    "作業が進むにつれて、工夫や考えとともに関心が折り重なりながらも、必要以上に主張せず彼らの作品は私たちに一定の示唆を与えてくれます。",
+    "内容の違いを比べるためのドラーとして、静かにそこにあります。選ばれた事実や、意味を限定しない言葉の並びは、全体の雰囲気を整える役割を果たします。時間の流れの中で、そうした文章は自然に形を変え、使う人の意図に委ねられていきます。"
+  ],
+  en: [
+    "Lorem ipsum dolor sit amet.",
+    "Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.",
+    "Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.",
+    "Aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint.",
+    "Occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis undeomnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam."
+  ]
+}, i = {
   ja: {
-    xs: "ロレム・イプサムの座り雨。",
-    s: "ロレム・イプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。",
-    m: "ロレム・イプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。",
-    l: "ロレム・イプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。長年にわたり、私は学区と長寿であれば、そのような Liberroy, Foo の取り組み、我らのうち、Mulla Sunt の利点を提案したのなら。",
-    xl: "ロレム・イプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。長年にわたり、私は学区と長寿であれば、そのような Liberroy, Foo の取り組み、我らのうち、Mulla Sunt の利点を提案したのなら。つまり、彼らはあなたの悩みに一般的な魂を癒しています。困難な必要性に少ないもの、それがコンテンツの比較です。あなたが選択的な彼女の事実、無意味な含有、便利な阻止と甘さ、誰かがもっと腐敗した残り物。提供する時間の生活、それで発明者が賢明です。",
-    codes: "<b>ロレム・イプサム</b>の座り雨、<a href='###'>トマ好き学習だったエリット</a>、しかし<i>時と活力</i>はそのような木々と楽しみ。長年にわたり、私は学区と長寿であれば、そのような<code>Liberroy</code>の取り組み。"
+    xs: e.ja[0],
+    s: e.ja[0] + e.ja[1],
+    m: e.ja[0] + e.ja[1] + e.ja[2],
+    l: e.ja[0] + e.ja[1] + e.ja[2] + e.ja[3],
+    xl: e.ja[0] + e.ja[1] + e.ja[2] + e.ja[3] + e.ja[4],
+    codes: "ロレム・イプサムの<i>座り雨</i>、それは<a href='###'>静かに歩く仮の言葉</a>です。長いあいだ積み重ねられてきた<code>Liberroy</code>と<code>Foog</code>の取り組み」は、私たちに<b>一定の示唆</b>を与えてくれます。"
   },
   en: {
-    xs: "Lorem ipsum dolor sit amet.",
-    s: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.",
-    m: "Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.",
-    l: "Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident libero, eum nulla sunt, porro sed dicta. Impedit ullam eveniet obcaecati minima.",
-    xl: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. Amet ab commodi rerum voluptas iusto dolores numquam cum ratione, dignissimos quia recusandae assumenda magnam, molestiae necessitatibus quas minus, quod consectetur pariatur. Possimus eligendi ipsam rerum, nihil incidunt, commodi impedit eum blanditiis, quisquam maiores corrupti rem. Provident tempora vitae, quo at inventore est sapiente.",
-    codes: "<b>Lorem ipsum</b> dolor sit amet. <a href='###'>consectetur adipisicing</a> elit, <i>sed do eiusmod</i> tempor. Non facere <code>Laudantium</code> ex eos doloribus aut dolore nisi provident."
+    xs: e.en[0],
+    s: e.en[0] + e.en[1],
+    m: e.en[0] + e.en[1] + e.en[2],
+    l: e.en[0] + e.en[1] + e.en[2] + e.en[3],
+    xl: e.en[0] + e.en[1] + e.en[2] + e.en[3] + e.en[4],
+    codes: "Lorem ipsum dolor <i>sit amet</i>. consectetur <a href='###'>adipisicing elit</a>, sed do eiusmod tempor. Non facere <code>Laudantium</code> ex eos <b>doloribus aut dolore</b> nisi provident."
   },
   ar: {
     s: "هذا نص وهمي أنا أكتب جمل ليس لها معنى معين.هذا نص وهمي أنا أكتب جمل ليس لها معنى معين.هذا نص وهمي أنا أكتب جمل ليس لها معنى معين."
   }
 };
 export {
-  e as default
+  i as default
 };

package/dist/components/HTML/index2.js

@@ -3,42 +3,42 @@ import r from "../Lism/index.js";
 function a(t) {
   return /* @__PURE__ */ n(r, { tag: "div", ...t });
 }
-function e(t) {
+function f(t) {
   return /* @__PURE__ */ n(r, { tag: "p", ...t });
 }
-function f(t) {
+function g(t) {
   return /* @__PURE__ */ n(r, { tag: "span", ...t });
 }
-function g(t) {
+function e(t) {
   return /* @__PURE__ */ n(r, { tag: "a", ...t });
 }
 function c({ lv: t = "1", ...u }) {
   return /* @__PURE__ */ n(r, { tag: `h${t}`, ...u });
 }
-function l(t) {
+function m(t) {
   return /* @__PURE__ */ n(r, { tag: "img", ...t });
 }
-function m(t) {
+function p(t) {
   return /* @__PURE__ */ n(r, { tag: "ul", ...t });
 }
-function p(t) {
+function l(t) {
   return /* @__PURE__ */ n(r, { tag: "ol", ...t });
 }
 function s(t) {
   return /* @__PURE__ */ n(r, { tag: "li", ...t });
 }
 function b(t) {
-  return /* @__PURE__ */ n(r, { tag: "button", setPlain: !0, ...t });
+  return /* @__PURE__ */ n(r, { tag: "button", ...t });
 }
 export {
-  g as a,
+  e as a,
   b as button,
   a as div,
   c as h,
-  l as img,
+  m as img,
   s as li,
-  p as ol,
-  e as p,
-  f as span,
-  m as ul
+  l as ol,
+  f as p,
+  g as span,
+  p as ul
 };

package/dist/components/LiquidGrid/index.js

@@ -0,0 +1,8 @@
+import { jsx as r } from "react/jsx-runtime";
+import o from "../Lism/index.js";
+function d(i) {
+  return /* @__PURE__ */ r(o, { layout: "liquidGrid", ...i });
+}
+export {
+  d as default
+};

package/dist/components/Modal/getProps.js

@@ -6,8 +6,8 @@ function i({ lismClass: n = "", duration: t, style: o = {}, ...s }) {
   };
   return t && (o["--duration"] = t), { tag: "dialog", ...r, style: o, ...s };
 }
-function l({ lismClass: n = "", translate: t, style: o = {}, ...s }) {
-  return t && (o["--translate"] = t), {
+function l({ lismClass: n = "", offset: t, style: o = {}, ...s }) {
+  return t && (o["--offset"] = t), {
     lismClass: e(n, "d--modal_inner"),
     style: o,
     ...s

package/dist/components/Wrapper/index.js

@@ -0,0 +1,8 @@
+import { jsx as t } from "react/jsx-runtime";
+import e from "../Lism/index.js";
+function m({ contentSize: r, ...p }) {
+  return /* @__PURE__ */ t(e, { isWrapper: r || !0, ...p });
+}
+export {
+  m as default
+};

package/dist/components/atomic/Decorator/getProps.js

@@ -1,9 +1,10 @@
-import n from "../../../lib/helper/atts.js";
-import d from "../../getFilterProps.js";
-function c({ lismClass: f, size: r, clipPath: i, boxSizing: e, style: a = {}, ...t }) {
-  t = d(t), i && (a.clipPath = i), e && (a.boxSizing = e), r && (t.ar = "1/1", t.w = r), t.style = a;
+import m from "../../../lib/helper/atts.js";
+import n from "../../getFilterProps.js";
+import s from "../../setMaybeTransformStyles.js";
+function c({ lismClass: f, size: a, clipPath: e, boxSizing: i, style: r = {}, ...t }) {
+  t = n(s(t)), e && (r.clipPath = e), i && (r.boxSizing = i), a && (t.ar = "1/1", t.w = a), t.style = r;
   const o = {
-    lismClass: n(f, "a--decorator"),
+    lismClass: m(f, "a--decorator"),
     "aria-hidden": "true"
   };
   return Object.assign(o, t);

package/dist/components/atomic/Icon/getProps.js

@@ -1,59 +1,50 @@
-import y from "./presets.js";
-import m from "../../../lib/helper/atts.js";
-function C(c) {
-  const i = {}, r = c.match(/<svg([^>]*?)>([\s\S]*?)<\/svg>/i);
-  if (r) {
-    const [, g, u] = r, s = /([\w-]+)=["']([^"']*)["']/g;
-    let f;
-    for (; (f = s.exec(g)) !== null; ) {
-      const [, t, n] = f;
-      if (t === "style") {
-        const e = {};
-        n.split(";").forEach((o) => {
-          const [l, a] = o.split(":").map((v) => v.trim());
-          l && a && (e[l] = a);
-        }), i[t] = e;
+import S from "./presets.js";
+import v from "../../../lib/helper/atts.js";
+import _ from "../../setMaybeTransformStyles.js";
+function C(u) {
+  const i = {}, g = u.match(/<svg([^>]*?)>([\s\S]*?)<\/svg>/i);
+  if (g) {
+    const [, e, m] = g, t = /([\w-]+)=["']([^"']*)["']/g;
+    let c;
+    for (; (c = t.exec(e)) !== null; ) {
+      const [, s, n] = c;
+      if (s === "style") {
+        const r = {};
+        n.split(";").forEach((f) => {
+          const [l, a] = f.split(":").map((o) => o.trim());
+          l && a && (r[l] = a);
+        }), i[s] = r;
       } else
-        i[t] = n;
+        i[s] = n;
     }
-    return { svgProps: i, svgContent: u };
+    return { svgProps: i, svgContent: m };
   }
   return {};
 }
-function d({
-  lismClass: c,
-  className: i = "",
-  style: r = {},
-  as: g,
-  tag: u,
-  icon: s,
-  label: f,
-  exProps: t = {},
-  ...n
-}) {
-  let e = u || "span", o = "";
-  if (n.viewBox)
-    e = "svg";
-  else if (n.src)
-    e = "img";
-  else if (s)
-    if (typeof s == "string")
-      if (s.startsWith("<svg")) {
-        e = "_SVG_";
-        const { svgProps: l = {}, svgContent: a = "" } = C(s), { class: v, style: h, ...S } = l;
-        i = m(i, v), r = { ...r, ...h }, t = { ...t, ...S, fill: "currentColor" }, o = a;
+function V({ lismClass: u, as: i, tag: g, icon: e, label: m, exProps: t = {}, ...c }) {
+  let s = g || "span", n = "", { style: r = {}, className: f = "", ...l } = _(c);
+  if (l.viewBox)
+    s = "svg", l.width || (t.width = "1em"), l.height || (t.height = "1em");
+  else if (l.src)
+    s = "img";
+  else if (e)
+    if (typeof e == "string")
+      if (e.startsWith("<svg")) {
+        s = "_SVG_";
+        const { svgProps: a = {}, svgContent: o = "" } = C(e), { class: h, style: y, ...p } = a;
+        f = v(f, h), r = { ...r, ...y }, t = { ...t, ...p, fill: "currentColor" }, n = o;
       } else {
-        const l = y[s] || null;
-        l != null && (e = "_SVG_", t = { ...t, ...l });
+        const a = S[e] || null;
+        a != null && (s = "_SVG_", t = { ...t, ...a });
       }
-    else if (typeof s == "object" && s.as) {
-      const { as: l, ...a } = s;
-      e = l, t = { ...t, ...a };
+    else if (typeof e == "object" && e.as) {
+      const { as: a, ...o } = e;
+      s = a, t = { ...t, ...o };
     } else
-      e = s;
-  else g && (e = g);
-  return f ? (t["aria-label"] = f, t.role = "img") : t["aria-hidden"] = "true", n.lismClass = m(c, "a--icon", i), n.style = { ...r }, { Component: e, lismProps: n, exProps: t, content: o };
+      s = e;
+  else i && (s = i);
+  return m ? (t["aria-label"] = m, t.role = "img") : t["aria-hidden"] = "true", l.lismClass = v(u, "a--icon", f), l.style = { ...r }, { Component: s, lismProps: l, exProps: t, content: n };
 }
 export {
-  d as default
+  V as default
 };