@lizzelabs/react-harmony 1.0.1 → 1.1.0

package/dist/components/piece/piece.types.d.ts

@@ -1,6 +1,9 @@
 import { ElementEvents, HtmlTag, NoEventsAndAria, PropWithTheme, WithStyle } from '../../types';
 import { AriaAttributes, ComponentPropsWithoutRef, CSSProperties, ReactNode, RefObject } from 'react';
 export type PieceAlignmentAndStyleProperties<Theme extends object | undefined> = {
+    containerType?: CSSProperties['containerType'];
+    containerName?: CSSProperties['containerName'];
+    cursor?: CSSProperties['cursor'];
     margin?: PropWithTheme<string, Theme>;
     padding?: PropWithTheme<string, Theme>;
     textColor?: PropWithTheme<string, Theme>;

package/dist/components.es.js

@@ -1,10 +1,10 @@
 import { A as r, u as a } from "./animations-B09mMqCx.js";
-import { P as u, u as t } from "./piece-Mpz6AD6r.js";
+import { P as u, u as t } from "./piece-CqJl-F6G.js";
 import { P as x, u as m } from "./piece-provider-DTglah_F.js";
-import { S as n, u as P } from "./scrollable-hsA1xMFz.js";
-import { S as l, u as p } from "./screen-gL0zeQqb.js";
-import { I as d, T, u as A } from "./text-BEFRS4fh.js";
-import { M as b, u as v } from "./media-BrSPl6_U.js";
+import { S as n, u as P } from "./scrollable-Dg_gmKLH.js";
+import { S as l, u as p } from "./screen-C0RCelCe.js";
+import { I as d, T, u as A } from "./text-E5g5oMHP.js";
+import { M as b, u as v } from "./media-C5LK6pq4.js";
 export {
   r as Animations,
   d as InternalText,

package/dist/index.es.js

@@ -1,10 +1,10 @@
 import { A as r, u as a } from "./animations-B09mMqCx.js";
-import { P as t, u as i } from "./piece-Mpz6AD6r.js";
+import { P as t, u as i } from "./piece-CqJl-F6G.js";
 import { P as u, u as m } from "./piece-provider-DTglah_F.js";
-import { S as f, u as l } from "./scrollable-hsA1xMFz.js";
-import { S as n, u as P } from "./screen-gL0zeQqb.js";
-import { I as d, T as A, u as M, w as T } from "./text-BEFRS4fh.js";
-import { M as h, u as v } from "./media-BrSPl6_U.js";
+import { S as f, u as l } from "./scrollable-Dg_gmKLH.js";
+import { S as n, u as P } from "./screen-C0RCelCe.js";
+import { I as d, T as A, u as M, w as T } from "./text-E5g5oMHP.js";
+import { M as h, u as v } from "./media-C5LK6pq4.js";
 import { HARMONY_SYSTEM as y, mergeSystems as C } from "./systems.es.js";
 import { S as O, e as Y } from "./styles-DofTX6nZ.js";
 import { a as j, f as D } from "./fillObjectWithDefaults-AoLKqRgC.js";

package/dist/{media-BrSPl6_U.js → media-C5LK6pq4.js}

@@ -1,6 +1,6 @@
 import { u as f, i as l, j as p } from "./piece-provider-DTglah_F.js";
 import { useMemo as r, memo as u } from "react";
-import { P as M } from "./piece-Mpz6AD6r.js";
+import { P as M } from "./piece-CqJl-F6G.js";
 const v = ({
   keyframes: e,
   withStyle: o,

package/dist/media.es.js

@@ -1,4 +1,4 @@
-import { M as s, u as M } from "./media-BrSPl6_U.js";
+import { M as s, u as M } from "./media-C5LK6pq4.js";
 export {
   s as Media,
   M as useMedia

package/dist/{piece-Mpz6AD6r.js → piece-CqJl-F6G.js}

@@ -1,8 +1,8 @@
-import { useMemo as i, useId as b, useInsertionEffect as y, memo as k } from "react";
-import { u as w, j as r, i as P } from "./piece-provider-DTglah_F.js";
+import { useMemo as i, useId as b, useInsertionEffect as y, memo as r } from "react";
+import { u as k, j as w, i as P } from "./piece-provider-DTglah_F.js";
 import { a as x, f as S } from "./fillObjectWithDefaults-AoLKqRgC.js";
-import { S as R } from "./styles-DofTX6nZ.js";
-const I = [
+import { S as N } from "./styles-DofTX6nZ.js";
+const R = [
   "as",
   "kind",
   "aria",
@@ -24,11 +24,14 @@ const I = [
   "backgroundColor",
   "background",
   "margin",
-  "padding"
-], s = {
+  "padding",
+  "containerType",
+  "containerName",
+  "cursor"
+], v = {
   pickComponentProps: (e) => {
     const n = { ...e };
-    for (const t of I)
+    for (const t of R)
       delete n[t];
     return {
       ...n,
@@ -37,7 +40,7 @@ const I = [
   },
   pickComponentStyle: (e, n) => {
     if (n)
-      return typeof n == "function" ? s.pickComponentStyle(e, n(e)) : Array.isArray(n) ? n.reduce(
+      return typeof n == "function" ? v.pickComponentStyle(e, n(e)) : Array.isArray(n) ? n.reduce(
         (t, a) => ({
           ...t,
           ...typeof a == "function" ? a(e) : a
@@ -146,6 +149,21 @@ const I = [
         enabled: e.padding !== void 0,
         name: "padding",
         value: typeof e.padding == "function" ? e.padding(t) : e.padding
+      },
+      {
+        enabled: e.cursor !== void 0,
+        name: "cursor",
+        value: e.cursor
+      },
+      {
+        enabled: e.containerType !== void 0,
+        name: "containerType",
+        value: e.containerType
+      },
+      {
+        enabled: e.containerName !== void 0,
+        name: "containerName",
+        value: e.containerName
       }
     ], m = a.some((l) => l.enabled), u = a.reduce(
       (l, d) => ({
@@ -161,8 +179,8 @@ const I = [
       ...u
     };
   }
-}, j = (e) => {
-  const { getContext: n, theme: t } = w(), a = i(() => new R(), []), m = b(), u = i(() => e.kind || "piece", [e.kind]), l = i(() => e.id || m, [e.id, m]), d = i(() => `${u}-${l}`, [u, l]), c = i(
+}, I = (e) => {
+  const { getContext: n, theme: t } = k(), a = i(() => new N(), []), m = b(), u = i(() => e.kind || "piece", [e.kind]), l = i(() => e.id || m, [e.id, m]), d = i(() => `${u}-${l}`, [u, l]), c = i(
     () => ({
       ...e,
       kind: u,
@@ -174,13 +192,13 @@ const I = [
     () => n(c),
     [n, c]
   ), f = i(
-    () => s.loadPositionProps(
+    () => v.loadPositionProps(
       c,
-      s.pickComponentStyle(t, c.withStyle),
+      v.pickComponentStyle(t, c.withStyle),
       t
     ),
     [c, t]
-  ), v = i(
+  ), s = i(
     () => S(
       {
         className: `${c.className} ${o.className}`
@@ -190,9 +208,9 @@ const I = [
     ),
     [o.defaults, o.className, c]
   ), g = i(
-    () => s.pickComponentProps(v),
-    [v]
-  ), C = v.as || "div";
+    () => v.pickComponentProps(s),
+    [s]
+  ), C = s.as || "div";
   return y(
     function() {
       return o.style && a.apply(o.style, o.className), f && a.apply(f, d), () => {
@@ -208,14 +226,14 @@ const I = [
       f
     ]
   ), {
-    element: /* @__PURE__ */ r.jsx(C, { ...g })
+    element: /* @__PURE__ */ w.jsx(C, { ...g })
   };
 };
-function N(e) {
-  return j(e).element;
+function j(e) {
+  return I(e).element;
 }
-const A = k(N, P);
+const E = r(j, P);
 export {
-  A as P,
-  j as u
+  E as P,
+  I as u
 };

package/dist/piece.es.js

@@ -1,4 +1,4 @@
-import { P, u as a } from "./piece-Mpz6AD6r.js";
+import { P, u as a } from "./piece-CqJl-F6G.js";
 export {
   P as Piece,
   a as usePiece

package/dist/{screen-gL0zeQqb.js → screen-C0RCelCe.js}

@@ -1,7 +1,7 @@
 import { u as d, i as f, j as m } from "./piece-provider-DTglah_F.js";
 import { useMemo as u, useId as y, useInsertionEffect as S, memo as h } from "react";
 import { S as b } from "./styles-DofTX6nZ.js";
-import { P as g } from "./piece-Mpz6AD6r.js";
+import { P as g } from "./piece-CqJl-F6G.js";
 const x = (e) => {
   const { theme: t } = d(), { id: r, fontSize: i, fontFamily: a, containerId: l } = e, n = u(() => new b(), []), s = y();
   return S(() => (n.apply({

package/dist/screen.es.js

@@ -1,4 +1,4 @@
-import { S as s, u as S } from "./screen-gL0zeQqb.js";
+import { S as s, u as S } from "./screen-C0RCelCe.js";
 export {
   s as Screen,
   S as useScreen

package/dist/{scrollable-hsA1xMFz.js → scrollable-Dg_gmKLH.js}

@@ -1,7 +1,7 @@
 import { useRef as w, useMemo as m, memo as S } from "react";
 import { f as k } from "./fillObjectWithDefaults-AoLKqRgC.js";
 import { u as v, i as $ } from "./piece-provider-DTglah_F.js";
-import { u as C } from "./piece-Mpz6AD6r.js";
+import { u as C } from "./piece-CqJl-F6G.js";
 const p = (o, e, n, a, s, i, t) => ({
   scrollBehavior: e,
   overflowX: s ? "auto" : "hidden",

package/dist/scrollable.es.js

@@ -1,4 +1,4 @@
-import { S as e, u as o } from "./scrollable-hsA1xMFz.js";
+import { S as e, u as o } from "./scrollable-Dg_gmKLH.js";
 export {
   e as Scrollable,
   o as useScrollable

package/dist/{text-BEFRS4fh.js → text-E5g5oMHP.js}

@@ -1,14 +1,14 @@
-import { memo as u } from "react";
-import { u as l, P as d } from "./piece-Mpz6AD6r.js";
-import { j as c, i as f } from "./piece-provider-DTglah_F.js";
+import { memo as l } from "react";
+import { u, P as d } from "./piece-CqJl-F6G.js";
+import { j as a, i as f } from "./piece-provider-DTglah_F.js";
 import "./animations-B09mMqCx.js";
 import { splitProps as x } from "./utils.es.js";
-import "./scrollable-hsA1xMFz.js";
-import "./screen-gL0zeQqb.js";
-import "./media-BrSPl6_U.js";
+import "./scrollable-Dg_gmKLH.js";
+import "./screen-C0RCelCe.js";
+import "./media-C5LK6pq4.js";
 const h = (t) => {
   const { as: n, children: o, kind: e, ...i } = t;
-  return l({
+  return u({
     ...i,
     kind: e || "text",
     as: n,
@@ -34,23 +34,23 @@ function w(t, n = {}) {
       "width",
       "margin",
       "padding"
-    ], { known: a, unknown: r } = x(
+    ], { known: c, unknown: r } = x(
       e,
       i
-    ), { injectContainerProps: m, ...s } = n, p = {
+    ), { injectContainerProps: p, ...s } = n, m = {
       ...s,
-      ...a
+      ...c
     };
-    return /* @__PURE__ */ c.jsx(
+    return /* @__PURE__ */ a.jsx(
       d,
       {
         kind: "alignment-container",
-        ...p,
-        children: /* @__PURE__ */ c.jsx(
+        ...m,
+        children: /* @__PURE__ */ a.jsx(
           t,
           {
             ...r,
-            ...m ? s : {},
+            ...p ? s : {},
             children: r?.children
           }
         )
@@ -58,8 +58,10 @@ function w(t, n = {}) {
     );
   };
 }
-const P = (t) => h(t).element, E = u(
-  w(P),
+const P = (t) => h(t).element, E = l(
+  w(P, {
+    withStyle: { display: "flex", flex: "1 1 auto" }
+  }),
   f
 );
 export {

package/dist/text.es.js

@@ -1,4 +1,4 @@
-import { I as a, T as s, u as x } from "./text-BEFRS4fh.js";
+import { I as a, T as s, u as x } from "./text-E5g5oMHP.js";
 export {
   a as InternalText,
   s as Text,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lizzelabs/react-harmony",
   "private": false,
-  "version": "1.0.1",
+  "version": "1.1.0",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "type": "module",