@serendie/ui 0.1.12 → 0.1.13

package/dist/ui/styled-system/helpers.js

@@ -0,0 +1,209 @@
+function m(t) {
+  return typeof t == "object" && t != null && !Array.isArray(t);
+}
+function v(t) {
+  return Object.fromEntries(Object.entries(t ?? {}).filter(([n, r]) => r !== void 0));
+}
+var V = (t) => t === "base";
+function E(t) {
+  return t.slice().filter((n) => !V(n));
+}
+function b(t) {
+  return String.fromCharCode(t + (t > 25 ? 39 : 97));
+}
+function z(t) {
+  let n = "", r;
+  for (r = Math.abs(t); r > 52; r = r / 52 | 0)
+    n = b(r % 52) + n;
+  return b(r % 52) + n;
+}
+function N(t, n) {
+  let r = n.length;
+  for (; r; )
+    t = t * 33 ^ n.charCodeAt(--r);
+  return t;
+}
+function R(t) {
+  return z(N(5381, t) >>> 0);
+}
+var j = /\s*!(important)?/i;
+function q(t) {
+  return typeof t == "string" ? j.test(t) : !1;
+}
+function $(t) {
+  return typeof t == "string" ? t.replace(j, "").trim() : t;
+}
+function tt(t) {
+  return typeof t == "string" ? t.replaceAll(" ", "_") : t;
+}
+var d = (t) => {
+  const n = /* @__PURE__ */ new Map();
+  return (...o) => {
+    const e = JSON.stringify(o);
+    if (n.has(e))
+      return n.get(e);
+    const i = t(...o);
+    return n.set(e, i), i;
+  };
+};
+function O(...t) {
+  return t.filter(Boolean).reduce((r, o) => (Object.keys(o).forEach((e) => {
+    const i = r[e], s = o[e];
+    m(i) && m(s) ? r[e] = O(i, s) : r[e] = s;
+  }), r), {});
+}
+var k = (t) => t != null;
+function y(t, n, r = {}) {
+  const { stop: o, getKey: e } = r;
+  function i(s, a = []) {
+    if (m(s) || Array.isArray(s)) {
+      const f = {};
+      for (const [c, l] of Object.entries(s)) {
+        const u = (e == null ? void 0 : e(c, l)) ?? c, h = [...a, u];
+        if (o != null && o(s, h))
+          return n(s, a);
+        const p = i(l, h);
+        k(p) && (f[u] = p);
+      }
+      return f;
+    }
+    return n(s, a);
+  }
+  return i(t);
+}
+function B(t, n) {
+  return Array.isArray(t) ? t.map((r) => n(r)) : m(t) ? y(t, (r) => n(r)) : n(t);
+}
+function H(t, n) {
+  return t.reduce(
+    (r, o, e) => {
+      const i = n[e];
+      return o != null && (r[i] = o), r;
+    },
+    {}
+  );
+}
+function A(t, n, r = !0) {
+  const { utility: o, conditions: e } = n, { hasShorthand: i, resolveShorthand: s } = o;
+  return y(
+    t,
+    (a) => Array.isArray(a) ? H(a, e.breakpoints.keys) : a,
+    {
+      stop: (a) => Array.isArray(a),
+      getKey: r ? (a) => i ? s(a) : a : void 0
+    }
+  );
+}
+var M = {
+  shift: (t) => t,
+  finalize: (t) => t,
+  breakpoints: { keys: [] }
+}, _ = (t) => typeof t == "string" ? t.replaceAll(/[\n\s]+/g, " ") : t;
+function nt(t) {
+  const { utility: n, hash: r, conditions: o = M } = t, e = (s) => [n.prefix, s].filter(Boolean).join("-"), i = (s, a) => {
+    let f;
+    if (r) {
+      const c = [...o.finalize(s), a];
+      f = e(n.toHash(c, R));
+    } else
+      f = [...o.finalize(s), e(a)].join(":");
+    return f;
+  };
+  return d(({ base: s, ...a } = {}) => {
+    const f = Object.assign(a, s), c = A(f, t), l = /* @__PURE__ */ new Set();
+    return y(c, (u, h) => {
+      const p = q(u);
+      if (u == null)
+        return;
+      const [w, ...S] = o.shift(h), x = E(S), P = n.transform(w, $(_(u)));
+      let g = i(x, P.className);
+      p && (g = `${g}!`), l.add(g);
+    }), Array.from(l).join(" ");
+  });
+}
+function F(...t) {
+  return t.flat().filter((n) => m(n) && Object.keys(v(n)).length > 0);
+}
+function rt(t) {
+  function n(e) {
+    const i = F(...e);
+    return i.length === 1 ? i : i.map((s) => A(s, t));
+  }
+  function r(...e) {
+    return O(...n(e));
+  }
+  function o(...e) {
+    return Object.assign({}, ...n(e));
+  }
+  return { mergeCss: d(r), assignCss: o };
+}
+var L = /([A-Z])/g, U = /^ms-/, et = d((t) => t.startsWith("--") ? t : t.replace(L, "-$1").replace(U, "-ms-").toLowerCase()), I = ["min", "max", "clamp", "calc"], T = new RegExp(`^(${I.join("|")})\\(.*\\)`), W = (t) => typeof t == "string" && T.test(t), D = "cm,mm,Q,in,pc,pt,px,em,ex,ch,rem,lh,rlh,vw,vh,vmin,vmax,vb,vi,svw,svh,lvw,lvh,dvw,dvh,cqw,cqh,cqi,cqb,cqmin,cqmax,%", J = `(?:${D.split(",").join("|")})`, K = new RegExp(`^[+-]?[0-9]*.?[0-9]+(?:[eE][+-]?[0-9]+)?${J}$`), Q = (t) => typeof t == "string" && K.test(t), Z = (t) => typeof t == "string" && /^var\(--.+\)$/.test(t), st = {
+  map: B,
+  isCssFunction: W,
+  isCssVar: Z,
+  isCssUnit: Q
+}, ot = (t, n) => {
+  if (!(t != null && t.defaultValues))
+    return n;
+  const r = typeof t.defaultValues == "function" ? t.defaultValues(n) : t.defaultValues;
+  return Object.assign({}, r, v(n));
+}, it = (t = {}) => {
+  const n = (e) => {
+    var i;
+    return {
+      className: [t.className, e].filter(Boolean).join("__"),
+      base: ((i = t.base) == null ? void 0 : i[e]) ?? {},
+      variants: {},
+      defaultVariants: t.defaultVariants ?? {},
+      compoundVariants: t.compoundVariants ? G(t.compoundVariants, e) : []
+    };
+  }, o = (t.slots ?? []).map((e) => [e, n(e)]);
+  for (const [e, i] of Object.entries(t.variants ?? {}))
+    for (const [s, a] of Object.entries(i))
+      o.forEach(([f, c]) => {
+        var l;
+        (l = c.variants)[e] ?? (l[e] = {}), c.variants[e][s] = a[f] ?? {};
+      });
+  return Object.fromEntries(o);
+}, G = (t, n) => t.filter((r) => r.css[n]).map((r) => ({ ...r, css: r.css[n] }));
+function at(t, ...n) {
+  const r = Object.getOwnPropertyDescriptors(t), o = Object.keys(r), e = (s) => {
+    const a = {};
+    for (let f = 0; f < s.length; f++) {
+      const c = s[f];
+      r[c] && (Object.defineProperty(a, c, r[c]), delete r[c]);
+    }
+    return a;
+  }, i = (s) => e(Array.isArray(s) ? s : o.filter(s));
+  return n.map(i).concat(e(o));
+}
+var ct = (...t) => t.filter(Boolean).reduce((n, r) => Array.from(/* @__PURE__ */ new Set([...n, ...r])), []), C = ["htmlSize", "htmlTranslate", "htmlWidth", "htmlHeight"];
+function X(t) {
+  return C.includes(t) ? t.replace("html", "").toLowerCase() : t;
+}
+function Y(t) {
+  return Object.fromEntries(Object.entries(t).map(([n, r]) => [X(n), r]));
+}
+Y.keys = C;
+export {
+  v as compact,
+  nt as createCss,
+  rt as createMergeCss,
+  E as filterBaseConditions,
+  ot as getPatternStyles,
+  G as getSlotCompoundVariant,
+  it as getSlotRecipes,
+  et as hypenateProperty,
+  V as isBaseCondition,
+  m as isObject,
+  B as mapObject,
+  d as memo,
+  O as mergeProps,
+  Y as normalizeHTMLProps,
+  st as patternFns,
+  at as splitProps,
+  R as toHash,
+  ct as uniq,
+  y as walkObject,
+  tt as withoutSpace
+};

package/dist/ui/styled-system/jsx/box.js

@@ -0,0 +1,11 @@
+import { forwardRef as m, createElement as n } from "react";
+import { splitProps as f } from "../helpers.js";
+import { getBoxStyle as i } from "../patterns/box.js";
+import { styled as c } from "./factory.js";
+const y = /* @__PURE__ */ m(function(o, r) {
+  const [t, e] = f(o, []), s = i(t), p = { ref: r, ...s, ...e };
+  return n(c.div, p);
+});
+export {
+  y as Box
+};

package/dist/ui/styled-system/jsx/factory-helper.js

@@ -0,0 +1,15 @@
+import { isCssProperty as i } from "./is-valid-prop.js";
+const u = (r, e) => !e.includes(r) && !i(r), c = (r, e) => r.__shouldForwardProps__ && e ? (_) => r.__shouldForwardProps__(_) && e(_) : e, d = (r, e) => {
+  var s;
+  if (r && !e) return r;
+  if (!r && e) return e;
+  if (r.__cva__ && e.__cva__ || r.__recipe__ && e.__recipe__) return r.merge(e);
+  const _ = new TypeError("Cannot merge cva with recipe. Please use either cva or recipe.");
+  throw (s = TypeError.captureStackTrace) == null || s.call(TypeError, _), _;
+}, f = (r) => typeof r == "string" ? r : (r == null ? void 0 : r.displayName) || (r == null ? void 0 : r.name) || "Component";
+export {
+  d as composeCvaFn,
+  c as composeShouldForwardProps,
+  u as defaultShouldForwardProp,
+  f as getDisplayName
+};

package/dist/ui/styled-system/jsx/factory.js

@@ -0,0 +1,48 @@
+import { forwardRef as J, useMemo as w, createElement as L } from "react";
+import { css as h } from "../css/css.js";
+import { cx as F } from "../css/cx.js";
+import { cva as R } from "../css/cva.js";
+import { splitProps as T, normalizeHTMLProps as S } from "../helpers.js";
+import { defaultShouldForwardProp as $, composeCvaFn as g, composeShouldForwardProps as q, getDisplayName as B } from "./factory-helper.js";
+import { isCssProperty as G } from "./is-valid-prop.js";
+function m(o, s = {}, r = {}) {
+  const n = s.__cva__ || s.__recipe__ ? s : R(s), b = r.shouldForwardProp || $, u = (i) => b(i, n.variantKeys), N = Object.assign(
+    r.dataAttr && s.__name__ ? { "data-recipe": s.__name__ } : {},
+    r.defaultProps
+  ), t = g(o.__cva__, n), v = q(o, u), _ = o.__base__ || o, e = /* @__PURE__ */ J(function(M, j) {
+    const { as: C = _, children: E, ...P } = M, a = w(() => Object.assign({}, N, P), [P]), [K, V, c, y, k] = w(() => T(a, S.keys, v, t.variantKeys, G), [a]);
+    function z() {
+      var f;
+      const { css: p, ...l } = y, d = (f = t.__getCompoundVariantCss__) == null ? void 0 : f.call(t, c);
+      return F(t(c, !1), h(d, l, p), a.className);
+    }
+    function A() {
+      const { css: p, ...l } = y, d = t.raw(c);
+      return F(h(d, l, p), a.className);
+    }
+    const H = s.__recipe__ ? z : A;
+    return L(C, {
+      ref: j,
+      ...V,
+      ...k,
+      ...S(K),
+      className: H()
+    }, a.children ?? E);
+  }), x = B(_);
+  return e.displayName = `styled.${x}`, e.__cva__ = t, e.__base__ = _, e.__shouldForwardProps__ = u, e;
+}
+function I() {
+  const o = /* @__PURE__ */ new Map();
+  return new Proxy(m, {
+    apply(s, r, n) {
+      return m(...n);
+    },
+    get(s, r) {
+      return o.has(r) || o.set(r, m(r)), o.get(r);
+    }
+  });
+}
+const O = /* @__PURE__ */ I();
+export {
+  O as styled
+};

package/dist/ui/styled-system/jsx/is-valid-prop.js

@@ -0,0 +1,6 @@
+import { memo as e } from "../helpers.js";
+var r = "css,pos,insetX,insetY,insetEnd,end,insetStart,start,flexDir,p,pl,pr,pt,pb,py,paddingY,paddingX,px,pe,paddingEnd,ps,paddingStart,ml,mr,mt,mb,m,my,marginY,mx,marginX,me,marginEnd,ms,marginStart,ringWidth,ringColor,ring,ringOffset,w,minW,maxW,h,minH,maxH,textShadowColor,bgPosition,bgPositionX,bgPositionY,bgAttachment,bgClip,bg,bgColor,bgOrigin,bgImage,bgRepeat,bgBlendMode,bgSize,bgGradient,rounded,roundedTopLeft,roundedTopRight,roundedBottomRight,roundedBottomLeft,roundedTop,roundedRight,roundedBottom,roundedLeft,roundedStartStart,roundedStartEnd,roundedStart,roundedEndStart,roundedEndEnd,roundedEnd,borderX,borderXWidth,borderXColor,borderY,borderYWidth,borderYColor,borderStart,borderStartWidth,borderStartColor,borderEnd,borderEndWidth,borderEndColor,shadow,shadowColor,x,y,z,scrollMarginY,scrollMarginX,scrollPaddingY,scrollPaddingX,aspectRatio,boxDecorationBreak,zIndex,boxSizing,objectPosition,objectFit,overscrollBehavior,overscrollBehaviorX,overscrollBehaviorY,position,top,left,inset,insetInline,insetBlock,insetBlockEnd,insetBlockStart,insetInlineEnd,insetInlineStart,right,bottom,float,visibility,display,hideFrom,hideBelow,flexBasis,flex,flexDirection,flexGrow,flexShrink,gridTemplateColumns,gridTemplateRows,gridColumn,gridRow,gridColumnStart,gridColumnEnd,gridAutoFlow,gridAutoColumns,gridAutoRows,gap,gridGap,gridRowGap,gridColumnGap,rowGap,columnGap,justifyContent,alignContent,alignItems,alignSelf,padding,paddingLeft,paddingRight,paddingTop,paddingBottom,paddingBlock,paddingBlockEnd,paddingBlockStart,paddingInline,paddingInlineEnd,paddingInlineStart,marginLeft,marginRight,marginTop,marginBottom,margin,marginBlock,marginBlockEnd,marginBlockStart,marginInline,marginInlineEnd,marginInlineStart,spaceX,spaceY,outlineWidth,outlineColor,outline,outlineOffset,divideX,divideY,divideColor,divideStyle,width,inlineSize,minWidth,minInlineSize,maxWidth,maxInlineSize,height,blockSize,minHeight,minBlockSize,maxHeight,maxBlockSize,color,fontFamily,fontSize,fontSizeAdjust,fontPalette,fontKerning,fontFeatureSettings,fontWeight,fontSmoothing,fontVariant,fontVariantAlternates,fontVariantCaps,fontVariationSettings,fontVariantNumeric,letterSpacing,lineHeight,textAlign,textDecoration,textDecorationColor,textEmphasisColor,textDecorationStyle,textDecorationThickness,textUnderlineOffset,textTransform,textIndent,textShadow,textOverflow,verticalAlign,wordBreak,textWrap,truncate,lineClamp,listStyleType,listStylePosition,listStyleImage,listStyle,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundAttachment,backgroundClip,background,backgroundColor,backgroundOrigin,backgroundImage,backgroundRepeat,backgroundBlendMode,backgroundSize,backgroundGradient,textGradient,gradientFromPosition,gradientToPosition,gradientFrom,gradientTo,gradientVia,gradientViaPosition,borderRadius,borderTopLeftRadius,borderTopRightRadius,borderBottomRightRadius,borderBottomLeftRadius,borderTopRadius,borderRightRadius,borderBottomRadius,borderLeftRadius,borderStartStartRadius,borderStartEndRadius,borderStartRadius,borderEndStartRadius,borderEndEndRadius,borderEndRadius,border,borderWidth,borderTopWidth,borderLeftWidth,borderRightWidth,borderBottomWidth,borderColor,borderInline,borderInlineWidth,borderInlineColor,borderBlock,borderBlockWidth,borderBlockColor,borderLeft,borderLeftColor,borderInlineStart,borderInlineStartWidth,borderInlineStartColor,borderRight,borderRightColor,borderInlineEnd,borderInlineEndWidth,borderInlineEndColor,borderTop,borderTopColor,borderBottom,borderBottomColor,borderBlockEnd,borderBlockEndColor,borderBlockStart,borderBlockStartColor,opacity,boxShadow,boxShadowColor,mixBlendMode,filter,brightness,contrast,grayscale,hueRotate,invert,saturate,sepia,dropShadow,blur,backdropFilter,backdropBlur,backdropBrightness,backdropContrast,backdropGrayscale,backdropHueRotate,backdropInvert,backdropOpacity,backdropSaturate,backdropSepia,borderCollapse,borderSpacing,borderSpacingX,borderSpacingY,tableLayout,transitionTimingFunction,transitionDelay,transitionDuration,transitionProperty,transition,animation,animationName,animationTimingFunction,animationDuration,animationDelay,animationPlayState,animationComposition,animationFillMode,animationDirection,animationIterationCount,animationRange,animationState,animationRangeStart,animationRangeEnd,animationTimeline,transformOrigin,transformBox,transformStyle,transform,rotate,rotateX,rotateY,rotateZ,scale,scaleX,scaleY,translate,translateX,translateY,translateZ,accentColor,caretColor,scrollBehavior,scrollbar,scrollbarColor,scrollbarGutter,scrollbarWidth,scrollMargin,scrollMarginLeft,scrollMarginRight,scrollMarginTop,scrollMarginBottom,scrollMarginBlock,scrollMarginBlockEnd,scrollMarginBlockStart,scrollMarginInline,scrollMarginInlineEnd,scrollMarginInlineStart,scrollPadding,scrollPaddingBlock,scrollPaddingBlockStart,scrollPaddingBlockEnd,scrollPaddingInline,scrollPaddingInlineEnd,scrollPaddingInlineStart,scrollPaddingLeft,scrollPaddingRight,scrollPaddingTop,scrollPaddingBottom,scrollSnapAlign,scrollSnapStop,scrollSnapType,scrollSnapStrictness,scrollSnapMargin,scrollSnapMarginTop,scrollSnapMarginBottom,scrollSnapMarginLeft,scrollSnapMarginRight,scrollSnapCoordinate,scrollSnapDestination,scrollSnapPointsX,scrollSnapPointsY,scrollSnapTypeX,scrollSnapTypeY,scrollTimeline,scrollTimelineAxis,scrollTimelineName,touchAction,userSelect,overflow,overflowWrap,overflowX,overflowY,overflowAnchor,overflowBlock,overflowInline,overflowClipBox,overflowClipMargin,overscrollBehaviorBlock,overscrollBehaviorInline,fill,stroke,strokeWidth,strokeDasharray,strokeDashoffset,strokeLinecap,strokeLinejoin,strokeMiterlimit,strokeOpacity,srOnly,debug,appearance,backfaceVisibility,clipPath,hyphens,mask,maskImage,maskSize,textSizeAdjust,container,containerName,containerType,colorPalette,_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_default,_optional,_open,_closed,_fullscreen,_loading,_currentPage,_currentStep,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_starting,expanded,expandedOnly,expandedDown,_themeAsagi,_themeKurikawa,_themeSumire,_themeTsutsuji,textStyle", t = r.split(","), i = "WebkitAppearance,WebkitBorderBefore,WebkitBorderBeforeColor,WebkitBorderBeforeStyle,WebkitBorderBeforeWidth,WebkitBoxReflect,WebkitLineClamp,WebkitMask,WebkitMaskAttachment,WebkitMaskClip,WebkitMaskComposite,WebkitMaskImage,WebkitMaskOrigin,WebkitMaskPosition,WebkitMaskPositionX,WebkitMaskPositionY,WebkitMaskRepeat,WebkitMaskRepeatX,WebkitMaskRepeatY,WebkitMaskSize,WebkitOverflowScrolling,WebkitTapHighlightColor,WebkitTextFillColor,WebkitTextStroke,WebkitTextStrokeColor,WebkitTextStrokeWidth,WebkitTouchCallout,WebkitUserModify,accentColor,alignContent,alignItems,alignSelf,alignTracks,all,animation,animationComposition,animationDelay,animationDirection,animationDuration,animationFillMode,animationIterationCount,animationName,animationPlayState,animationRange,animationRangeEnd,animationRangeStart,animationTimingFunction,animationTimeline,appearance,aspectRatio,azimuth,backdropFilter,backfaceVisibility,background,backgroundAttachment,backgroundBlendMode,backgroundClip,backgroundColor,backgroundImage,backgroundOrigin,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundRepeat,backgroundSize,blockSize,border,borderBlock,borderBlockColor,borderBlockStyle,borderBlockWidth,borderBlockEnd,borderBlockEndColor,borderBlockEndStyle,borderBlockEndWidth,borderBlockStart,borderBlockStartColor,borderBlockStartStyle,borderBlockStartWidth,borderBottom,borderBottomColor,borderBottomLeftRadius,borderBottomRightRadius,borderBottomStyle,borderBottomWidth,borderCollapse,borderColor,borderEndEndRadius,borderEndStartRadius,borderImage,borderImageOutset,borderImageRepeat,borderImageSlice,borderImageSource,borderImageWidth,borderInline,borderInlineEnd,borderInlineColor,borderInlineStyle,borderInlineWidth,borderInlineEndColor,borderInlineEndStyle,borderInlineEndWidth,borderInlineStart,borderInlineStartColor,borderInlineStartStyle,borderInlineStartWidth,borderLeft,borderLeftColor,borderLeftStyle,borderLeftWidth,borderRadius,borderRight,borderRightColor,borderRightStyle,borderRightWidth,borderSpacing,borderStartEndRadius,borderStartStartRadius,borderStyle,borderTop,borderTopColor,borderTopLeftRadius,borderTopRightRadius,borderTopStyle,borderTopWidth,borderWidth,bottom,boxAlign,boxDecorationBreak,boxDirection,boxFlex,boxFlexGroup,boxLines,boxOrdinalGroup,boxOrient,boxPack,boxShadow,boxSizing,breakAfter,breakBefore,breakInside,captionSide,caret,caretColor,caretShape,clear,clip,clipPath,color,colorScheme,columnCount,columnFill,columnGap,columnRule,columnRuleColor,columnRuleStyle,columnRuleWidth,columnSpan,columnWidth,columns,contain,containIntrinsicSize,containIntrinsicBlockSize,containIntrinsicHeight,containIntrinsicInlineSize,containIntrinsicWidth,container,containerName,containerType,content,contentVisibility,counterIncrement,counterReset,counterSet,cursor,direction,display,emptyCells,filter,flex,flexBasis,flexDirection,flexFlow,flexGrow,flexShrink,flexWrap,float,font,fontFamily,fontFeatureSettings,fontKerning,fontLanguageOverride,fontOpticalSizing,fontPalette,fontVariationSettings,fontSize,fontSizeAdjust,fontSmooth,fontStretch,fontStyle,fontSynthesis,fontSynthesisPosition,fontSynthesisSmallCaps,fontSynthesisStyle,fontSynthesisWeight,fontVariant,fontVariantAlternates,fontVariantCaps,fontVariantEastAsian,fontVariantEmoji,fontVariantLigatures,fontVariantNumeric,fontVariantPosition,fontWeight,forcedColorAdjust,gap,grid,gridArea,gridAutoColumns,gridAutoFlow,gridAutoRows,gridColumn,gridColumnEnd,gridColumnGap,gridColumnStart,gridGap,gridRow,gridRowEnd,gridRowGap,gridRowStart,gridTemplate,gridTemplateAreas,gridTemplateColumns,gridTemplateRows,hangingPunctuation,height,hyphenateCharacter,hyphenateLimitChars,hyphens,imageOrientation,imageRendering,imageResolution,imeMode,initialLetter,initialLetterAlign,inlineSize,inputSecurity,inset,insetBlock,insetBlockEnd,insetBlockStart,insetInline,insetInlineEnd,insetInlineStart,isolation,justifyContent,justifyItems,justifySelf,justifyTracks,left,letterSpacing,lineBreak,lineClamp,lineHeight,lineHeightStep,listStyle,listStyleImage,listStylePosition,listStyleType,margin,marginBlock,marginBlockEnd,marginBlockStart,marginBottom,marginInline,marginInlineEnd,marginInlineStart,marginLeft,marginRight,marginTop,marginTrim,mask,maskBorder,maskBorderMode,maskBorderOutset,maskBorderRepeat,maskBorderSlice,maskBorderSource,maskBorderWidth,maskClip,maskComposite,maskImage,maskMode,maskOrigin,maskPosition,maskRepeat,maskSize,maskType,masonryAutoFlow,mathDepth,mathShift,mathStyle,maxBlockSize,maxHeight,maxInlineSize,maxLines,maxWidth,minBlockSize,minHeight,minInlineSize,minWidth,mixBlendMode,objectFit,objectPosition,offset,offsetAnchor,offsetDistance,offsetPath,offsetPosition,offsetRotate,opacity,order,orphans,outline,outlineColor,outlineOffset,outlineStyle,outlineWidth,overflow,overflowAnchor,overflowBlock,overflowClipBox,overflowClipMargin,overflowInline,overflowWrap,overflowX,overflowY,overlay,overscrollBehavior,overscrollBehaviorBlock,overscrollBehaviorInline,overscrollBehaviorX,overscrollBehaviorY,padding,paddingBlock,paddingBlockEnd,paddingBlockStart,paddingBottom,paddingInline,paddingInlineEnd,paddingInlineStart,paddingLeft,paddingRight,paddingTop,page,pageBreakAfter,pageBreakBefore,pageBreakInside,paintOrder,perspective,perspectiveOrigin,placeContent,placeItems,placeSelf,pointerEvents,position,printColorAdjust,quotes,resize,right,rotate,rowGap,rubyAlign,rubyMerge,rubyPosition,scale,scrollbarColor,scrollbarGutter,scrollbarWidth,scrollBehavior,scrollMargin,scrollMarginBlock,scrollMarginBlockStart,scrollMarginBlockEnd,scrollMarginBottom,scrollMarginInline,scrollMarginInlineStart,scrollMarginInlineEnd,scrollMarginLeft,scrollMarginRight,scrollMarginTop,scrollPadding,scrollPaddingBlock,scrollPaddingBlockStart,scrollPaddingBlockEnd,scrollPaddingBottom,scrollPaddingInline,scrollPaddingInlineStart,scrollPaddingInlineEnd,scrollPaddingLeft,scrollPaddingRight,scrollPaddingTop,scrollSnapAlign,scrollSnapCoordinate,scrollSnapDestination,scrollSnapPointsX,scrollSnapPointsY,scrollSnapStop,scrollSnapType,scrollSnapTypeX,scrollSnapTypeY,scrollTimeline,scrollTimelineAxis,scrollTimelineName,shapeImageThreshold,shapeMargin,shapeOutside,tabSize,tableLayout,textAlign,textAlignLast,textCombineUpright,textDecoration,textDecorationColor,textDecorationLine,textDecorationSkip,textDecorationSkipInk,textDecorationStyle,textDecorationThickness,textEmphasis,textEmphasisColor,textEmphasisPosition,textEmphasisStyle,textIndent,textJustify,textOrientation,textOverflow,textRendering,textShadow,textSizeAdjust,textTransform,textUnderlineOffset,textUnderlinePosition,textWrap,timelineScope,top,touchAction,transform,transformBox,transformOrigin,transformStyle,transition,transitionBehavior,transitionDelay,transitionDuration,transitionProperty,transitionTimingFunction,translate,unicodeBidi,userSelect,verticalAlign,viewTimeline,viewTimelineAxis,viewTimelineInset,viewTimelineName,viewTransitionName,visibility,whiteSpace,whiteSpaceCollapse,widows,width,willChange,wordBreak,wordSpacing,wordWrap,writingMode,zIndex,zoom,alignmentBaseline,baselineShift,clipRule,colorInterpolation,colorRendering,dominantBaseline,fill,fillOpacity,fillRule,floodColor,floodOpacity,glyphOrientationVertical,lightingColor,marker,markerEnd,markerMid,markerStart,shapeRendering,stopColor,stopOpacity,stroke,strokeDasharray,strokeDashoffset,strokeLinecap,strokeLinejoin,strokeMiterlimit,strokeOpacity,strokeWidth,textAnchor,vectorEffect", n = i.split(",").concat(t), a = new Map(n.map((o) => [o, !0])), l = /&|@/, s = /* @__PURE__ */ e((o) => a.has(o) || o.startsWith("--") || l.test(o));
+export {
+  n as allCssProperties,
+  s as isCssProperty
+};

package/dist/ui/styled-system/patterns/box.js

@@ -0,0 +1,13 @@
+import { getPatternStyles as n, patternFns as e } from "../helpers.js";
+import "../css/css.js";
+const r = {
+  transform(t) {
+    return t;
+  }
+}, a = (t = {}) => {
+  const o = n(r, t);
+  return r.transform(o, e);
+};
+export {
+  a as getBoxStyle
+};

package/package.json

@@ -2,7 +2,7 @@
   "name": "@serendie/ui",
   "description": "Adaptive UI component library as part of Serendie Design System by Mitsubishi Electric",
   "license": "MIT",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "type": "module",
   "types": "./dist/index.d.ts",
   "scripts": {
@@ -24,19 +24,16 @@
   },
   "peerDependencies": {
     "@ark-ui/react": "^3.5.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": ">=18.3.1",
+    "react-dom": ">=18.3.1"
   },
   "dependencies": {
     "@ark-ui/react": "^3.5.0",
     "@pandacss/dev": "^0.42.0",
     "@serendie/symbols": "^0.1.0",
-    "merge-refs": "^1.3.0",
-    "styled-components": "^5.3.3",
-    "styled-system": "^5.1.5"
+    "merge-refs": "^1.3.0"
   },
   "devDependencies": {
-    "chromatic": "^11.20.2",
     "@chromatic-com/storybook": "^1.6.1",
     "@figma/code-connect": "^1.2.1",
     "@material-design-icons/svg": "^0.14.13",
@@ -55,17 +52,21 @@
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",
+    "chromatic": "^11.20.2",
+    "deepmerge": "^4.3.1",
     "storybook": "^8.2.4",
     "typescript": "^5.5.3",
     "vite": "^5.3.3",
     "vite-plugin-dts": "^4.2.1",
     "vite-plugin-svgr": "^4.2.0"
   },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
       "require": "./dist/index.cjs",
-      "import": "./dist/index.js"
+      "types": "./dist/index.d.ts"
     },
     "./css": {
       "types": "./styled-system/css/index.d.ts",

package/styled-system/tokens/index.js

@@ -695,6 +695,22 @@ const tokens = {
     "value": "80px",
     "variable": "var(--spacing-sd-system-dimension-spacing-six-extra-large)"
   },
+  "sizes.sd.reference.dimension.breakpoint.small": {
+    "value": "640px",
+    "variable": "var(--sizes-sd-reference-dimension-breakpoint-small)"
+  },
+  "sizes.sd.reference.dimension.breakpoint.medium": {
+    "value": "768px",
+    "variable": "var(--sizes-sd-reference-dimension-breakpoint-medium)"
+  },
+  "sizes.sd.reference.dimension.breakpoint.large": {
+    "value": "1024px",
+    "variable": "var(--sizes-sd-reference-dimension-breakpoint-large)"
+  },
+  "sizes.sd.reference.dimension.breakpoint.extraLarge": {
+    "value": "1280px",
+    "variable": "var(--sizes-sd-reference-dimension-breakpoint-extra-large)"
+  },
   "sizes.sd.reference.dimension.scale.0": {
     "value": "0px",
     "variable": "var(--sizes-sd-reference-dimension-scale-0)"
@@ -771,6 +787,14 @@ const tokens = {
     "value": "96px",
     "variable": "var(--sizes-sd-reference-dimension-scale-18)"
   },
+  "sizes.sd.system.dimension.breakpoint.compact": {
+    "value": "0px",
+    "variable": "var(--sizes-sd-system-dimension-breakpoint-compact)"
+  },
+  "sizes.sd.system.dimension.breakpoint.expanded": {
+    "value": "768px",
+    "variable": "var(--sizes-sd-system-dimension-breakpoint-expanded)"
+  },
   "sizes.sd.system.dimension.spacing.none": {
     "value": "0px",
     "variable": "var(--sizes-sd-system-dimension-spacing-none)"