@makeswift/runtime 0.0.0-20230113202105 → 0.0.0-20230126162956

package/dist/Box.cjs.js

@@ -40,16 +40,17 @@ var index = require("./index.cjs2.js");
 var boxModels = require("./box-models.cjs.js");
 require("use-sync-external-store/shim/with-selector");
 require("next/dynamic");
-require("./react-page.cjs.js");
+require("./constants.cjs.js");
 require("redux");
 require("redux-thunk");
 require("./actions.cjs.js");
 require("./slot.cjs.js");
 require("./control.cjs.js");
+require("@emotion/serialize");
+require("@emotion/utils");
 require("./text-input.cjs.js");
 require("./combobox.cjs.js");
 require("use-sync-external-store/shim");
-require("slate");
 require("./types.cjs.js");
 require("color");
 require("scroll-into-view-if-needed");
@@ -133,13 +134,18 @@ const Box = React.forwardRef(function Box2({
   itemStaggerDuration
 }, ref) {
   const innerRef = React.useRef(null);
-  const [boxElement, setBoxElement] = React.useState(null);
+  const boxElementObjectRef = React.useRef(null);
+  const [animationClassName, replayAnimation, setElement] = index.useBoxAnimation(boxAnimateType, boxAnimateDuration, boxAnimateDelay, itemAnimateType);
+  const boxElementCallbackRef = React.useCallback((current) => {
+    boxElementObjectRef.current = current;
+    setElement(current);
+  }, []);
   React.useImperativeHandle(ref, () => ({
     getBoxModel() {
       var _a, _b, _c, _d;
       const paddingBoxElement = innerRef.current;
       const borderBoxElement = innerRef.current;
-      const marginBoxElement = boxElement;
+      const marginBoxElement = boxElementObjectRef.current;
       const borderBox = (_a = innerRef.current) == null ? void 0 : _a.getBoundingClientRect();
       const paddingBoxComputedStyle = (_b = paddingBoxElement == null ? void 0 : paddingBoxElement.ownerDocument.defaultView) == null ? void 0 : _b.getComputedStyle(paddingBoxElement);
       const borderBoxComputedStyle = (_c = borderBoxElement == null ? void 0 : borderBoxElement.ownerDocument.defaultView) == null ? void 0 : _c.getComputedStyle(borderBoxElement);
@@ -169,11 +175,10 @@ const Box = React.forwardRef(function Box2({
         margin: margin2
       }) : null;
     }
-  }), [boxElement]);
+  }), []);
   const gridItemClassName = next.useStyle(next.responsiveStyle([verticalAlign], ([alignItems = "flex-start"]) => ({
     alignItems
   })));
-  const [animationClassName, replayAnimation] = index.useBoxAnimation(boxElement, boxAnimateType, boxAnimateDuration, boxAnimateDelay, itemAnimateType);
   const [key, setKey] = React.useState(() => uuid.v4());
   const animationProps = {
     boxAnimateType,
@@ -193,7 +198,7 @@ const Box = React.forwardRef(function Box2({
     }
   }, [replayAnimation, animationProps]);
   return /* @__PURE__ */ jsxRuntime.jsx(index.BackgroundsContainer, {
-    ref: setBoxElement,
+    ref: boxElementCallbackRef,
     id,
     className: css.cx(width, margin, borderRadius, next.useStyle({
       display: "flex"

package/dist/Box.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Box.cjs.js","sources":["../src/components/builtin/Box/components/Placeholder/index.tsx","../src/components/builtin/Box/Box.tsx"],"sourcesContent":["import { forwardRef, Ref } from 'react'\nimport { useStyle } from '../../../../../runtimes/react/use-style'\n\ntype Props = { hide?: boolean }\n\nexport default forwardRef(function Placeholder(\n  { hide = false, ...restOfProps }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  return (\n    <div\n      {...restOfProps}\n      ref={ref}\n      style={{ visibility: hide ? 'hidden' : 'initial' }}\n      className={useStyle({\n        width: '100%',\n        background: 'rgba(161, 168, 194, 0.18)',\n        height: 80,\n        padding: 8,\n      })}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"100%\"\n        height=\"100%\"\n        style={{ overflow: 'visible' }}\n      >\n        <rect\n          x={0}\n          y={0}\n          width=\"100%\"\n          height=\"100%\"\n          strokeWidth={2}\n          strokeDasharray=\"4 2\"\n          fill=\"none\"\n          stroke=\"rgba(161, 168, 194, 0.40)\"\n          rx=\"4\"\n          ry=\"4\"\n        />\n      </svg>\n    </div>\n  )\n})\n","import { forwardRef, Ref, useEffect, useImperativeHandle, useRef, useState } from 'react'\nimport { cx } from '@emotion/css'\nimport { v4 as uuid } from 'uuid'\n\nimport { Element } from '../../../runtimes/react'\nimport Placeholder from './components/Placeholder'\nimport { areBoxAnimationPropsEqual, BoxAnimationProps, useBoxAnimation } from './animations'\nimport {\n  ElementIDValue,\n  ResponsiveIconRadioGroupValue,\n  GridValue,\n  GapYValue,\n  GapXValue,\n  CheckboxValue,\n  BackgroundsValue,\n} from '../../../prop-controllers/descriptors'\nimport { BoxModelHandle, parse, createBox } from '../../../box-model'\nimport BackgroundsContainer from '../../shared/BackgroundsContainer'\nimport { responsiveStyle } from '../../utils/responsive-style'\nimport { GridItem } from '../../shared/grid-item'\nimport { useStyle } from '../../../runtimes/react/use-style'\n\ntype Props = {\n  id?: ElementIDValue\n  backgrounds?: BackgroundsValue\n  width?: string\n  height?: ResponsiveIconRadioGroupValue<'auto' | 'stretch'>\n  verticalAlign?: ResponsiveIconRadioGroupValue<\n    'flex-start' | 'center' | 'flex-end' | 'space-between'\n  >\n  margin?: string\n  padding?: string\n  border?: string\n  borderRadius?: string\n  boxShadow?: string\n  rowGap?: GapYValue\n  columnGap?: GapXValue\n  hidePlaceholder?: CheckboxValue\n  children?: GridValue\n} & BoxAnimationProps\n\nconst Box = forwardRef(function Box(\n  {\n    id,\n    backgrounds,\n    width,\n    height,\n    margin,\n    padding,\n    border,\n    children,\n    borderRadius,\n    boxShadow,\n    rowGap,\n    columnGap,\n    hidePlaceholder,\n    verticalAlign,\n    boxAnimateType,\n    boxAnimateDuration,\n    boxAnimateDelay,\n    itemAnimateDelay,\n    itemAnimateType,\n    itemAnimateDuration,\n    itemStaggerDuration,\n  }: Props,\n  ref: Ref<BoxModelHandle>,\n) {\n  const innerRef = useRef<HTMLDivElement | null>(null)\n  const [boxElement, setBoxElement] = useState<HTMLElement | null>(null)\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      getBoxModel() {\n        const paddingBoxElement = innerRef.current\n        const borderBoxElement = innerRef.current\n        const marginBoxElement = boxElement\n        const borderBox = innerRef.current?.getBoundingClientRect()\n        const paddingBoxComputedStyle =\n          paddingBoxElement?.ownerDocument.defaultView?.getComputedStyle(paddingBoxElement)\n        const borderBoxComputedStyle =\n          borderBoxElement?.ownerDocument.defaultView?.getComputedStyle(borderBoxElement)\n        const marginBoxComputedStyle =\n          marginBoxElement?.ownerDocument.defaultView?.getComputedStyle(marginBoxElement)\n        const padding = paddingBoxComputedStyle && {\n          top: parse(paddingBoxComputedStyle.paddingTop),\n          right: parse(paddingBoxComputedStyle.paddingRight),\n          bottom: parse(paddingBoxComputedStyle.paddingBottom),\n          left: parse(paddingBoxComputedStyle.paddingLeft),\n        }\n        const border = borderBoxComputedStyle && {\n          top: parse(borderBoxComputedStyle.borderTopWidth),\n          right: parse(borderBoxComputedStyle.borderRightWidth),\n          bottom: parse(borderBoxComputedStyle.borderBottomWidth),\n          left: parse(borderBoxComputedStyle.borderLeftWidth),\n        }\n        const margin = marginBoxComputedStyle && {\n          top: parse(marginBoxComputedStyle.marginTop),\n          right: parse(marginBoxComputedStyle.marginRight),\n          bottom: parse(marginBoxComputedStyle.marginBottom),\n          left: parse(marginBoxComputedStyle.marginLeft),\n        }\n\n        return borderBox ? createBox({ borderBox, padding, border, margin }) : null\n      },\n    }),\n    [boxElement],\n  )\n\n  const gridItemClassName = useStyle(\n    responsiveStyle([verticalAlign], ([alignItems = 'flex-start']) => ({ alignItems })),\n  )\n\n  const [animationClassName, replayAnimation] = useBoxAnimation(\n    boxElement,\n    boxAnimateType,\n    boxAnimateDuration,\n    boxAnimateDelay,\n    itemAnimateType,\n  )\n\n  const [key, setKey] = useState(() => uuid())\n\n  const animationProps = {\n    boxAnimateType,\n    boxAnimateDuration,\n    boxAnimateDelay,\n    itemAnimateType,\n    itemAnimateDuration,\n    itemAnimateDelay,\n    itemStaggerDuration,\n  }\n\n  const prevAnimationProps = useRef(animationProps)\n  useEffect(() => {\n    if (!areBoxAnimationPropsEqual(prevAnimationProps.current, animationProps)) {\n      replayAnimation()\n      setKey(uuid())\n      prevAnimationProps.current = animationProps\n    }\n  }, [replayAnimation, animationProps])\n\n  return (\n    <BackgroundsContainer\n      ref={setBoxElement}\n      id={id}\n      className={cx(\n        width,\n        margin,\n        borderRadius,\n        useStyle({ display: 'flex' }),\n        useStyle(responsiveStyle([height], ([alignSelf = 'auto']) => ({ alignSelf }))),\n        animationClassName,\n      )}\n      backgrounds={backgrounds}\n    >\n      <div\n        ref={innerRef}\n        key={key}\n        className={cx(\n          padding,\n          boxShadow,\n          border,\n          useStyle({ display: 'flex', flexWrap: 'wrap', width: '100%' }),\n          useStyle(\n            responsiveStyle([verticalAlign], ([alignContent = 'flex-start']) => ({ alignContent })),\n          ),\n        )}\n      >\n        {children && children.elements.length > 0 ? (\n          children.elements.map((child, index) => (\n            <GridItem\n              key={child.key}\n              className={gridItemClassName}\n              grid={children.columns}\n              index={index}\n              itemAnimateDuration={itemAnimateDuration}\n              itemAnimateDelay={itemAnimateDelay}\n              itemStaggerDuration={itemStaggerDuration}\n              columnGap={columnGap}\n              rowGap={rowGap}\n            >\n              <Element element={child} />\n            </GridItem>\n          ))\n        ) : (\n          <Placeholder hide={hidePlaceholder} />\n        )}\n      </div>\n    </BackgroundsContainer>\n  )\n})\n\nexport default Box\n"],"names":["forwardRef","ref","hide","restOfProps","visibility","useStyle","width","background","height","padding","overflow","Box","id","backgrounds","margin","border","children","borderRadius","boxShadow","rowGap","columnGap","hidePlaceholder","verticalAlign","boxAnimateType","boxAnimateDuration","boxAnimateDelay","itemAnimateDelay","itemAnimateType","itemAnimateDuration","itemStaggerDuration","innerRef","useRef","boxElement","setBoxElement","useState","useImperativeHandle","getBoxModel","paddingBoxElement","current","borderBoxElement","marginBoxElement","borderBox","getBoundingClientRect","paddingBoxComputedStyle","ownerDocument","defaultView","getComputedStyle","borderBoxComputedStyle","marginBoxComputedStyle","top","parse","paddingTop","right","paddingRight","bottom","paddingBottom","left","paddingLeft","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","marginTop","marginRight","marginBottom","marginLeft","createBox","gridItemClassName","responsiveStyle","alignItems","animationClassName","replayAnimation","useBoxAnimation","key","setKey","uuid","animationProps","prevAnimationProps","useEffect","areBoxAnimationPropsEqual","BackgroundsContainer","cx","display","alignSelf","flexWrap","alignContent","elements","length","map","child","index","GridItem","columns","Element"],"mappings":"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"}
+{"version":3,"file":"Box.cjs.js","sources":["../src/components/builtin/Box/components/Placeholder/index.tsx","../src/components/builtin/Box/Box.tsx"],"sourcesContent":["import { forwardRef, Ref } from 'react'\nimport { useStyle } from '../../../../../runtimes/react/use-style'\n\ntype Props = { hide?: boolean }\n\nexport default forwardRef(function Placeholder(\n  { hide = false, ...restOfProps }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  return (\n    <div\n      {...restOfProps}\n      ref={ref}\n      style={{ visibility: hide ? 'hidden' : 'initial' }}\n      className={useStyle({\n        width: '100%',\n        background: 'rgba(161, 168, 194, 0.18)',\n        height: 80,\n        padding: 8,\n      })}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"100%\"\n        height=\"100%\"\n        style={{ overflow: 'visible' }}\n      >\n        <rect\n          x={0}\n          y={0}\n          width=\"100%\"\n          height=\"100%\"\n          strokeWidth={2}\n          strokeDasharray=\"4 2\"\n          fill=\"none\"\n          stroke=\"rgba(161, 168, 194, 0.40)\"\n          rx=\"4\"\n          ry=\"4\"\n        />\n      </svg>\n    </div>\n  )\n})\n","import {\n  forwardRef,\n  Ref,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from 'react'\nimport { cx } from '@emotion/css'\nimport { v4 as uuid } from 'uuid'\n\nimport { Element } from '../../../runtimes/react'\nimport Placeholder from './components/Placeholder'\nimport { areBoxAnimationPropsEqual, BoxAnimationProps, useBoxAnimation } from './animations'\nimport {\n  ElementIDValue,\n  ResponsiveIconRadioGroupValue,\n  GridValue,\n  GapYValue,\n  GapXValue,\n  CheckboxValue,\n  BackgroundsValue,\n} from '../../../prop-controllers/descriptors'\nimport { BoxModelHandle, parse, createBox } from '../../../box-model'\nimport BackgroundsContainer from '../../shared/BackgroundsContainer'\nimport { responsiveStyle } from '../../utils/responsive-style'\nimport { GridItem } from '../../shared/grid-item'\nimport { useStyle } from '../../../runtimes/react/use-style'\n\ntype Props = {\n  id?: ElementIDValue\n  backgrounds?: BackgroundsValue\n  width?: string\n  height?: ResponsiveIconRadioGroupValue<'auto' | 'stretch'>\n  verticalAlign?: ResponsiveIconRadioGroupValue<\n    'flex-start' | 'center' | 'flex-end' | 'space-between'\n  >\n  margin?: string\n  padding?: string\n  border?: string\n  borderRadius?: string\n  boxShadow?: string\n  rowGap?: GapYValue\n  columnGap?: GapXValue\n  hidePlaceholder?: CheckboxValue\n  children?: GridValue\n} & BoxAnimationProps\n\nconst Box = forwardRef(function Box(\n  {\n    id,\n    backgrounds,\n    width,\n    height,\n    margin,\n    padding,\n    border,\n    children,\n    borderRadius,\n    boxShadow,\n    rowGap,\n    columnGap,\n    hidePlaceholder,\n    verticalAlign,\n    boxAnimateType,\n    boxAnimateDuration,\n    boxAnimateDelay,\n    itemAnimateDelay,\n    itemAnimateType,\n    itemAnimateDuration,\n    itemStaggerDuration,\n  }: Props,\n  ref: Ref<BoxModelHandle>,\n) {\n  const innerRef = useRef<HTMLDivElement | null>(null)\n  const boxElementObjectRef = useRef<HTMLElement | null>(null)\n  const [animationClassName, replayAnimation, setElement] = useBoxAnimation(\n    boxAnimateType,\n    boxAnimateDuration,\n    boxAnimateDelay,\n    itemAnimateType,\n  )\n  const boxElementCallbackRef = useCallback((current: HTMLElement | null) => {\n    boxElementObjectRef.current = current\n\n    setElement(current)\n  }, [])\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      getBoxModel() {\n        const paddingBoxElement = innerRef.current\n        const borderBoxElement = innerRef.current\n        const marginBoxElement = boxElementObjectRef.current\n        const borderBox = innerRef.current?.getBoundingClientRect()\n        const paddingBoxComputedStyle =\n          paddingBoxElement?.ownerDocument.defaultView?.getComputedStyle(paddingBoxElement)\n        const borderBoxComputedStyle =\n          borderBoxElement?.ownerDocument.defaultView?.getComputedStyle(borderBoxElement)\n        const marginBoxComputedStyle =\n          marginBoxElement?.ownerDocument.defaultView?.getComputedStyle(marginBoxElement)\n        const padding = paddingBoxComputedStyle && {\n          top: parse(paddingBoxComputedStyle.paddingTop),\n          right: parse(paddingBoxComputedStyle.paddingRight),\n          bottom: parse(paddingBoxComputedStyle.paddingBottom),\n          left: parse(paddingBoxComputedStyle.paddingLeft),\n        }\n        const border = borderBoxComputedStyle && {\n          top: parse(borderBoxComputedStyle.borderTopWidth),\n          right: parse(borderBoxComputedStyle.borderRightWidth),\n          bottom: parse(borderBoxComputedStyle.borderBottomWidth),\n          left: parse(borderBoxComputedStyle.borderLeftWidth),\n        }\n        const margin = marginBoxComputedStyle && {\n          top: parse(marginBoxComputedStyle.marginTop),\n          right: parse(marginBoxComputedStyle.marginRight),\n          bottom: parse(marginBoxComputedStyle.marginBottom),\n          left: parse(marginBoxComputedStyle.marginLeft),\n        }\n\n        return borderBox ? createBox({ borderBox, padding, border, margin }) : null\n      },\n    }),\n    [],\n  )\n\n  const gridItemClassName = useStyle(\n    responsiveStyle([verticalAlign], ([alignItems = 'flex-start']) => ({ alignItems })),\n  )\n\n  const [key, setKey] = useState(() => uuid())\n\n  const animationProps = {\n    boxAnimateType,\n    boxAnimateDuration,\n    boxAnimateDelay,\n    itemAnimateType,\n    itemAnimateDuration,\n    itemAnimateDelay,\n    itemStaggerDuration,\n  }\n\n  const prevAnimationProps = useRef(animationProps)\n  useEffect(() => {\n    if (!areBoxAnimationPropsEqual(prevAnimationProps.current, animationProps)) {\n      replayAnimation()\n      setKey(uuid())\n      prevAnimationProps.current = animationProps\n    }\n  }, [replayAnimation, animationProps])\n\n  return (\n    <BackgroundsContainer\n      ref={boxElementCallbackRef}\n      id={id}\n      className={cx(\n        width,\n        margin,\n        borderRadius,\n        useStyle({ display: 'flex' }),\n        useStyle(responsiveStyle([height], ([alignSelf = 'auto']) => ({ alignSelf }))),\n        animationClassName,\n      )}\n      backgrounds={backgrounds}\n    >\n      <div\n        ref={innerRef}\n        key={key}\n        className={cx(\n          padding,\n          boxShadow,\n          border,\n          useStyle({ display: 'flex', flexWrap: 'wrap', width: '100%' }),\n          useStyle(\n            responsiveStyle([verticalAlign], ([alignContent = 'flex-start']) => ({ alignContent })),\n          ),\n        )}\n      >\n        {children && children.elements.length > 0 ? (\n          children.elements.map((child, index) => (\n            <GridItem\n              key={child.key}\n              className={gridItemClassName}\n              grid={children.columns}\n              index={index}\n              itemAnimateDuration={itemAnimateDuration}\n              itemAnimateDelay={itemAnimateDelay}\n              itemStaggerDuration={itemStaggerDuration}\n              columnGap={columnGap}\n              rowGap={rowGap}\n            >\n              <Element element={child} />\n            </GridItem>\n          ))\n        ) : (\n          <Placeholder hide={hidePlaceholder} />\n        )}\n      </div>\n    </BackgroundsContainer>\n  )\n})\n\nexport default Box\n"],"names":["forwardRef","ref","hide","restOfProps","visibility","useStyle","width","background","height","padding","overflow","Box","id","backgrounds","margin","border","children","borderRadius","boxShadow","rowGap","columnGap","hidePlaceholder","verticalAlign","boxAnimateType","boxAnimateDuration","boxAnimateDelay","itemAnimateDelay","itemAnimateType","itemAnimateDuration","itemStaggerDuration","innerRef","useRef","boxElementObjectRef","animationClassName","replayAnimation","setElement","useBoxAnimation","boxElementCallbackRef","useCallback","current","useImperativeHandle","getBoxModel","paddingBoxElement","borderBoxElement","marginBoxElement","borderBox","getBoundingClientRect","paddingBoxComputedStyle","ownerDocument","defaultView","getComputedStyle","borderBoxComputedStyle","marginBoxComputedStyle","top","parse","paddingTop","right","paddingRight","bottom","paddingBottom","left","paddingLeft","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","marginTop","marginRight","marginBottom","marginLeft","createBox","gridItemClassName","responsiveStyle","alignItems","key","setKey","useState","uuid","animationProps","prevAnimationProps","useEffect","areBoxAnimationPropsEqual","BackgroundsContainer","cx","display","alignSelf","flexWrap","alignContent","elements","length","map","child","index","GridItem","columns","Element"],"mappings":"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"}

package/dist/Box.es.js

@@ -29,7 +29,7 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import { forwardRef, useRef, useState, useImperativeHandle, useEffect } from "react";
+import { forwardRef, useRef, useCallback, useImperativeHandle, useState, useEffect } from "react";
 import { cx } from "@emotion/css";
 import { v4 } from "uuid";
 import { o as useStyle, r as responsiveStyle, E as Element } from "./index.es.js";
@@ -38,16 +38,17 @@ import { a as useBoxAnimation, b as areBoxAnimationPropsEqual, B as BackgroundsC
 import { p as parse, c as createBox } from "./box-models.es.js";
 import "use-sync-external-store/shim/with-selector";
 import "next/dynamic";
-import "./react-page.es.js";
+import "./constants.es.js";
 import "redux";
 import "redux-thunk";
 import "./actions.es.js";
 import "./slot.es.js";
 import "./control.es.js";
+import "@emotion/serialize";
+import "@emotion/utils";
 import "./text-input.es.js";
 import "./combobox.es.js";
 import "use-sync-external-store/shim";
-import "slate";
 import "./types.es.js";
 import "color";
 import "scroll-into-view-if-needed";
@@ -131,13 +132,18 @@ const Box = forwardRef(function Box2({
   itemStaggerDuration
 }, ref) {
   const innerRef = useRef(null);
-  const [boxElement, setBoxElement] = useState(null);
+  const boxElementObjectRef = useRef(null);
+  const [animationClassName, replayAnimation, setElement] = useBoxAnimation(boxAnimateType, boxAnimateDuration, boxAnimateDelay, itemAnimateType);
+  const boxElementCallbackRef = useCallback((current) => {
+    boxElementObjectRef.current = current;
+    setElement(current);
+  }, []);
   useImperativeHandle(ref, () => ({
     getBoxModel() {
       var _a, _b, _c, _d;
       const paddingBoxElement = innerRef.current;
       const borderBoxElement = innerRef.current;
-      const marginBoxElement = boxElement;
+      const marginBoxElement = boxElementObjectRef.current;
       const borderBox = (_a = innerRef.current) == null ? void 0 : _a.getBoundingClientRect();
       const paddingBoxComputedStyle = (_b = paddingBoxElement == null ? void 0 : paddingBoxElement.ownerDocument.defaultView) == null ? void 0 : _b.getComputedStyle(paddingBoxElement);
       const borderBoxComputedStyle = (_c = borderBoxElement == null ? void 0 : borderBoxElement.ownerDocument.defaultView) == null ? void 0 : _c.getComputedStyle(borderBoxElement);
@@ -167,11 +173,10 @@ const Box = forwardRef(function Box2({
         margin: margin2
       }) : null;
     }
-  }), [boxElement]);
+  }), []);
   const gridItemClassName = useStyle(responsiveStyle([verticalAlign], ([alignItems = "flex-start"]) => ({
     alignItems
   })));
-  const [animationClassName, replayAnimation] = useBoxAnimation(boxElement, boxAnimateType, boxAnimateDuration, boxAnimateDelay, itemAnimateType);
   const [key, setKey] = useState(() => v4());
   const animationProps = {
     boxAnimateType,
@@ -191,7 +196,7 @@ const Box = forwardRef(function Box2({
     }
   }, [replayAnimation, animationProps]);
   return /* @__PURE__ */ jsx(BackgroundsContainer, {
-    ref: setBoxElement,
+    ref: boxElementCallbackRef,
     id,
     className: cx(width, margin, borderRadius, useStyle({
       display: "flex"

package/dist/Box.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Box.es.js","sources":["../src/components/builtin/Box/components/Placeholder/index.tsx","../src/components/builtin/Box/Box.tsx"],"sourcesContent":["import { forwardRef, Ref } from 'react'\nimport { useStyle } from '../../../../../runtimes/react/use-style'\n\ntype Props = { hide?: boolean }\n\nexport default forwardRef(function Placeholder(\n  { hide = false, ...restOfProps }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  return (\n    <div\n      {...restOfProps}\n      ref={ref}\n      style={{ visibility: hide ? 'hidden' : 'initial' }}\n      className={useStyle({\n        width: '100%',\n        background: 'rgba(161, 168, 194, 0.18)',\n        height: 80,\n        padding: 8,\n      })}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"100%\"\n        height=\"100%\"\n        style={{ overflow: 'visible' }}\n      >\n        <rect\n          x={0}\n          y={0}\n          width=\"100%\"\n          height=\"100%\"\n          strokeWidth={2}\n          strokeDasharray=\"4 2\"\n          fill=\"none\"\n          stroke=\"rgba(161, 168, 194, 0.40)\"\n          rx=\"4\"\n          ry=\"4\"\n        />\n      </svg>\n    </div>\n  )\n})\n","import { forwardRef, Ref, useEffect, useImperativeHandle, useRef, useState } from 'react'\nimport { cx } from '@emotion/css'\nimport { v4 as uuid } from 'uuid'\n\nimport { Element } from '../../../runtimes/react'\nimport Placeholder from './components/Placeholder'\nimport { areBoxAnimationPropsEqual, BoxAnimationProps, useBoxAnimation } from './animations'\nimport {\n  ElementIDValue,\n  ResponsiveIconRadioGroupValue,\n  GridValue,\n  GapYValue,\n  GapXValue,\n  CheckboxValue,\n  BackgroundsValue,\n} from '../../../prop-controllers/descriptors'\nimport { BoxModelHandle, parse, createBox } from '../../../box-model'\nimport BackgroundsContainer from '../../shared/BackgroundsContainer'\nimport { responsiveStyle } from '../../utils/responsive-style'\nimport { GridItem } from '../../shared/grid-item'\nimport { useStyle } from '../../../runtimes/react/use-style'\n\ntype Props = {\n  id?: ElementIDValue\n  backgrounds?: BackgroundsValue\n  width?: string\n  height?: ResponsiveIconRadioGroupValue<'auto' | 'stretch'>\n  verticalAlign?: ResponsiveIconRadioGroupValue<\n    'flex-start' | 'center' | 'flex-end' | 'space-between'\n  >\n  margin?: string\n  padding?: string\n  border?: string\n  borderRadius?: string\n  boxShadow?: string\n  rowGap?: GapYValue\n  columnGap?: GapXValue\n  hidePlaceholder?: CheckboxValue\n  children?: GridValue\n} & BoxAnimationProps\n\nconst Box = forwardRef(function Box(\n  {\n    id,\n    backgrounds,\n    width,\n    height,\n    margin,\n    padding,\n    border,\n    children,\n    borderRadius,\n    boxShadow,\n    rowGap,\n    columnGap,\n    hidePlaceholder,\n    verticalAlign,\n    boxAnimateType,\n    boxAnimateDuration,\n    boxAnimateDelay,\n    itemAnimateDelay,\n    itemAnimateType,\n    itemAnimateDuration,\n    itemStaggerDuration,\n  }: Props,\n  ref: Ref<BoxModelHandle>,\n) {\n  const innerRef = useRef<HTMLDivElement | null>(null)\n  const [boxElement, setBoxElement] = useState<HTMLElement | null>(null)\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      getBoxModel() {\n        const paddingBoxElement = innerRef.current\n        const borderBoxElement = innerRef.current\n        const marginBoxElement = boxElement\n        const borderBox = innerRef.current?.getBoundingClientRect()\n        const paddingBoxComputedStyle =\n          paddingBoxElement?.ownerDocument.defaultView?.getComputedStyle(paddingBoxElement)\n        const borderBoxComputedStyle =\n          borderBoxElement?.ownerDocument.defaultView?.getComputedStyle(borderBoxElement)\n        const marginBoxComputedStyle =\n          marginBoxElement?.ownerDocument.defaultView?.getComputedStyle(marginBoxElement)\n        const padding = paddingBoxComputedStyle && {\n          top: parse(paddingBoxComputedStyle.paddingTop),\n          right: parse(paddingBoxComputedStyle.paddingRight),\n          bottom: parse(paddingBoxComputedStyle.paddingBottom),\n          left: parse(paddingBoxComputedStyle.paddingLeft),\n        }\n        const border = borderBoxComputedStyle && {\n          top: parse(borderBoxComputedStyle.borderTopWidth),\n          right: parse(borderBoxComputedStyle.borderRightWidth),\n          bottom: parse(borderBoxComputedStyle.borderBottomWidth),\n          left: parse(borderBoxComputedStyle.borderLeftWidth),\n        }\n        const margin = marginBoxComputedStyle && {\n          top: parse(marginBoxComputedStyle.marginTop),\n          right: parse(marginBoxComputedStyle.marginRight),\n          bottom: parse(marginBoxComputedStyle.marginBottom),\n          left: parse(marginBoxComputedStyle.marginLeft),\n        }\n\n        return borderBox ? createBox({ borderBox, padding, border, margin }) : null\n      },\n    }),\n    [boxElement],\n  )\n\n  const gridItemClassName = useStyle(\n    responsiveStyle([verticalAlign], ([alignItems = 'flex-start']) => ({ alignItems })),\n  )\n\n  const [animationClassName, replayAnimation] = useBoxAnimation(\n    boxElement,\n    boxAnimateType,\n    boxAnimateDuration,\n    boxAnimateDelay,\n    itemAnimateType,\n  )\n\n  const [key, setKey] = useState(() => uuid())\n\n  const animationProps = {\n    boxAnimateType,\n    boxAnimateDuration,\n    boxAnimateDelay,\n    itemAnimateType,\n    itemAnimateDuration,\n    itemAnimateDelay,\n    itemStaggerDuration,\n  }\n\n  const prevAnimationProps = useRef(animationProps)\n  useEffect(() => {\n    if (!areBoxAnimationPropsEqual(prevAnimationProps.current, animationProps)) {\n      replayAnimation()\n      setKey(uuid())\n      prevAnimationProps.current = animationProps\n    }\n  }, [replayAnimation, animationProps])\n\n  return (\n    <BackgroundsContainer\n      ref={setBoxElement}\n      id={id}\n      className={cx(\n        width,\n        margin,\n        borderRadius,\n        useStyle({ display: 'flex' }),\n        useStyle(responsiveStyle([height], ([alignSelf = 'auto']) => ({ alignSelf }))),\n        animationClassName,\n      )}\n      backgrounds={backgrounds}\n    >\n      <div\n        ref={innerRef}\n        key={key}\n        className={cx(\n          padding,\n          boxShadow,\n          border,\n          useStyle({ display: 'flex', flexWrap: 'wrap', width: '100%' }),\n          useStyle(\n            responsiveStyle([verticalAlign], ([alignContent = 'flex-start']) => ({ alignContent })),\n          ),\n        )}\n      >\n        {children && children.elements.length > 0 ? (\n          children.elements.map((child, index) => (\n            <GridItem\n              key={child.key}\n              className={gridItemClassName}\n              grid={children.columns}\n              index={index}\n              itemAnimateDuration={itemAnimateDuration}\n              itemAnimateDelay={itemAnimateDelay}\n              itemStaggerDuration={itemStaggerDuration}\n              columnGap={columnGap}\n              rowGap={rowGap}\n            >\n              <Element element={child} />\n            </GridItem>\n          ))\n        ) : (\n          <Placeholder hide={hidePlaceholder} />\n        )}\n      </div>\n    </BackgroundsContainer>\n  )\n})\n\nexport default Box\n"],"names":["forwardRef","ref","hide","restOfProps","visibility","useStyle","width","background","height","padding","overflow","Box","id","backgrounds","margin","border","children","borderRadius","boxShadow","rowGap","columnGap","hidePlaceholder","verticalAlign","boxAnimateType","boxAnimateDuration","boxAnimateDelay","itemAnimateDelay","itemAnimateType","itemAnimateDuration","itemStaggerDuration","innerRef","useRef","boxElement","setBoxElement","useState","useImperativeHandle","getBoxModel","paddingBoxElement","current","borderBoxElement","marginBoxElement","borderBox","getBoundingClientRect","paddingBoxComputedStyle","ownerDocument","defaultView","getComputedStyle","borderBoxComputedStyle","marginBoxComputedStyle","top","parse","paddingTop","right","paddingRight","bottom","paddingBottom","left","paddingLeft","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","marginTop","marginRight","marginBottom","marginLeft","createBox","gridItemClassName","responsiveStyle","alignItems","animationClassName","replayAnimation","useBoxAnimation","key","setKey","uuid","animationProps","prevAnimationProps","useEffect","areBoxAnimationPropsEqual","cx","display","alignSelf","flexWrap","alignContent","elements","length","map","child","index","columns"],"mappings":"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"}
+{"version":3,"file":"Box.es.js","sources":["../src/components/builtin/Box/components/Placeholder/index.tsx","../src/components/builtin/Box/Box.tsx"],"sourcesContent":["import { forwardRef, Ref } from 'react'\nimport { useStyle } from '../../../../../runtimes/react/use-style'\n\ntype Props = { hide?: boolean }\n\nexport default forwardRef(function Placeholder(\n  { hide = false, ...restOfProps }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  return (\n    <div\n      {...restOfProps}\n      ref={ref}\n      style={{ visibility: hide ? 'hidden' : 'initial' }}\n      className={useStyle({\n        width: '100%',\n        background: 'rgba(161, 168, 194, 0.18)',\n        height: 80,\n        padding: 8,\n      })}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"100%\"\n        height=\"100%\"\n        style={{ overflow: 'visible' }}\n      >\n        <rect\n          x={0}\n          y={0}\n          width=\"100%\"\n          height=\"100%\"\n          strokeWidth={2}\n          strokeDasharray=\"4 2\"\n          fill=\"none\"\n          stroke=\"rgba(161, 168, 194, 0.40)\"\n          rx=\"4\"\n          ry=\"4\"\n        />\n      </svg>\n    </div>\n  )\n})\n","import {\n  forwardRef,\n  Ref,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from 'react'\nimport { cx } from '@emotion/css'\nimport { v4 as uuid } from 'uuid'\n\nimport { Element } from '../../../runtimes/react'\nimport Placeholder from './components/Placeholder'\nimport { areBoxAnimationPropsEqual, BoxAnimationProps, useBoxAnimation } from './animations'\nimport {\n  ElementIDValue,\n  ResponsiveIconRadioGroupValue,\n  GridValue,\n  GapYValue,\n  GapXValue,\n  CheckboxValue,\n  BackgroundsValue,\n} from '../../../prop-controllers/descriptors'\nimport { BoxModelHandle, parse, createBox } from '../../../box-model'\nimport BackgroundsContainer from '../../shared/BackgroundsContainer'\nimport { responsiveStyle } from '../../utils/responsive-style'\nimport { GridItem } from '../../shared/grid-item'\nimport { useStyle } from '../../../runtimes/react/use-style'\n\ntype Props = {\n  id?: ElementIDValue\n  backgrounds?: BackgroundsValue\n  width?: string\n  height?: ResponsiveIconRadioGroupValue<'auto' | 'stretch'>\n  verticalAlign?: ResponsiveIconRadioGroupValue<\n    'flex-start' | 'center' | 'flex-end' | 'space-between'\n  >\n  margin?: string\n  padding?: string\n  border?: string\n  borderRadius?: string\n  boxShadow?: string\n  rowGap?: GapYValue\n  columnGap?: GapXValue\n  hidePlaceholder?: CheckboxValue\n  children?: GridValue\n} & BoxAnimationProps\n\nconst Box = forwardRef(function Box(\n  {\n    id,\n    backgrounds,\n    width,\n    height,\n    margin,\n    padding,\n    border,\n    children,\n    borderRadius,\n    boxShadow,\n    rowGap,\n    columnGap,\n    hidePlaceholder,\n    verticalAlign,\n    boxAnimateType,\n    boxAnimateDuration,\n    boxAnimateDelay,\n    itemAnimateDelay,\n    itemAnimateType,\n    itemAnimateDuration,\n    itemStaggerDuration,\n  }: Props,\n  ref: Ref<BoxModelHandle>,\n) {\n  const innerRef = useRef<HTMLDivElement | null>(null)\n  const boxElementObjectRef = useRef<HTMLElement | null>(null)\n  const [animationClassName, replayAnimation, setElement] = useBoxAnimation(\n    boxAnimateType,\n    boxAnimateDuration,\n    boxAnimateDelay,\n    itemAnimateType,\n  )\n  const boxElementCallbackRef = useCallback((current: HTMLElement | null) => {\n    boxElementObjectRef.current = current\n\n    setElement(current)\n  }, [])\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      getBoxModel() {\n        const paddingBoxElement = innerRef.current\n        const borderBoxElement = innerRef.current\n        const marginBoxElement = boxElementObjectRef.current\n        const borderBox = innerRef.current?.getBoundingClientRect()\n        const paddingBoxComputedStyle =\n          paddingBoxElement?.ownerDocument.defaultView?.getComputedStyle(paddingBoxElement)\n        const borderBoxComputedStyle =\n          borderBoxElement?.ownerDocument.defaultView?.getComputedStyle(borderBoxElement)\n        const marginBoxComputedStyle =\n          marginBoxElement?.ownerDocument.defaultView?.getComputedStyle(marginBoxElement)\n        const padding = paddingBoxComputedStyle && {\n          top: parse(paddingBoxComputedStyle.paddingTop),\n          right: parse(paddingBoxComputedStyle.paddingRight),\n          bottom: parse(paddingBoxComputedStyle.paddingBottom),\n          left: parse(paddingBoxComputedStyle.paddingLeft),\n        }\n        const border = borderBoxComputedStyle && {\n          top: parse(borderBoxComputedStyle.borderTopWidth),\n          right: parse(borderBoxComputedStyle.borderRightWidth),\n          bottom: parse(borderBoxComputedStyle.borderBottomWidth),\n          left: parse(borderBoxComputedStyle.borderLeftWidth),\n        }\n        const margin = marginBoxComputedStyle && {\n          top: parse(marginBoxComputedStyle.marginTop),\n          right: parse(marginBoxComputedStyle.marginRight),\n          bottom: parse(marginBoxComputedStyle.marginBottom),\n          left: parse(marginBoxComputedStyle.marginLeft),\n        }\n\n        return borderBox ? createBox({ borderBox, padding, border, margin }) : null\n      },\n    }),\n    [],\n  )\n\n  const gridItemClassName = useStyle(\n    responsiveStyle([verticalAlign], ([alignItems = 'flex-start']) => ({ alignItems })),\n  )\n\n  const [key, setKey] = useState(() => uuid())\n\n  const animationProps = {\n    boxAnimateType,\n    boxAnimateDuration,\n    boxAnimateDelay,\n    itemAnimateType,\n    itemAnimateDuration,\n    itemAnimateDelay,\n    itemStaggerDuration,\n  }\n\n  const prevAnimationProps = useRef(animationProps)\n  useEffect(() => {\n    if (!areBoxAnimationPropsEqual(prevAnimationProps.current, animationProps)) {\n      replayAnimation()\n      setKey(uuid())\n      prevAnimationProps.current = animationProps\n    }\n  }, [replayAnimation, animationProps])\n\n  return (\n    <BackgroundsContainer\n      ref={boxElementCallbackRef}\n      id={id}\n      className={cx(\n        width,\n        margin,\n        borderRadius,\n        useStyle({ display: 'flex' }),\n        useStyle(responsiveStyle([height], ([alignSelf = 'auto']) => ({ alignSelf }))),\n        animationClassName,\n      )}\n      backgrounds={backgrounds}\n    >\n      <div\n        ref={innerRef}\n        key={key}\n        className={cx(\n          padding,\n          boxShadow,\n          border,\n          useStyle({ display: 'flex', flexWrap: 'wrap', width: '100%' }),\n          useStyle(\n            responsiveStyle([verticalAlign], ([alignContent = 'flex-start']) => ({ alignContent })),\n          ),\n        )}\n      >\n        {children && children.elements.length > 0 ? (\n          children.elements.map((child, index) => (\n            <GridItem\n              key={child.key}\n              className={gridItemClassName}\n              grid={children.columns}\n              index={index}\n              itemAnimateDuration={itemAnimateDuration}\n              itemAnimateDelay={itemAnimateDelay}\n              itemStaggerDuration={itemStaggerDuration}\n              columnGap={columnGap}\n              rowGap={rowGap}\n            >\n              <Element element={child} />\n            </GridItem>\n          ))\n        ) : (\n          <Placeholder hide={hidePlaceholder} />\n        )}\n      </div>\n    </BackgroundsContainer>\n  )\n})\n\nexport default Box\n"],"names":["forwardRef","ref","hide","restOfProps","visibility","useStyle","width","background","height","padding","overflow","Box","id","backgrounds","margin","border","children","borderRadius","boxShadow","rowGap","columnGap","hidePlaceholder","verticalAlign","boxAnimateType","boxAnimateDuration","boxAnimateDelay","itemAnimateDelay","itemAnimateType","itemAnimateDuration","itemStaggerDuration","innerRef","useRef","boxElementObjectRef","animationClassName","replayAnimation","setElement","useBoxAnimation","boxElementCallbackRef","useCallback","current","useImperativeHandle","getBoxModel","paddingBoxElement","borderBoxElement","marginBoxElement","borderBox","getBoundingClientRect","paddingBoxComputedStyle","ownerDocument","defaultView","getComputedStyle","borderBoxComputedStyle","marginBoxComputedStyle","top","parse","paddingTop","right","paddingRight","bottom","paddingBottom","left","paddingLeft","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","marginTop","marginRight","marginBottom","marginLeft","createBox","gridItemClassName","responsiveStyle","alignItems","key","setKey","useState","uuid","animationProps","prevAnimationProps","useEffect","areBoxAnimationPropsEqual","cx","display","alignSelf","flexWrap","alignContent","elements","length","map","child","index","columns"],"mappings":"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"}

package/dist/Button.cjs.js

@@ -39,16 +39,17 @@ var css = require("@emotion/css");
 var jsxRuntime = require("react/jsx-runtime");
 require("use-sync-external-store/shim/with-selector");
 require("next/dynamic");
-require("./react-page.cjs.js");
+require("./constants.cjs.js");
 require("redux");
 require("redux-thunk");
 require("./actions.cjs.js");
 require("./slot.cjs.js");
 require("./control.cjs.js");
+require("@emotion/serialize");
+require("@emotion/utils");
 require("./text-input.cjs.js");
 require("./combobox.cjs.js");
 require("use-sync-external-store/shim");
-require("slate");
 require("./types.cjs.js");
 require("scroll-into-view-if-needed");
 require("./box-models.cjs.js");

package/dist/Button.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.cjs.js","sources":["../src/components/builtin/Button/Button.tsx"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  ElementRef,\n  ElementType,\n  ForwardedRef,\n  forwardRef,\n  ReactNode,\n} from 'react'\nimport ColorHelper from 'color'\n\nimport {\n  ElementIDValue,\n  ResponsiveSelectValue,\n  ResponsiveIconRadioGroupValue,\n  TextStyleValue,\n  LinkValue,\n  WidthValue,\n} from '../../../prop-controllers/descriptors'\nimport { colorToString } from '../../utils/colorToString'\nimport { Link } from '../../shared/Link'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\nimport { ButtonVariant } from './contants'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { responsiveStyle, responsiveTextStyle, responsiveWidth } from '../../utils/responsive-style'\nimport { cx } from '@emotion/css'\n\ntype BaseProps<T extends ElementType> = {\n  as?: T\n  id?: ElementIDValue\n  children?: ReactNode\n  link?: LinkValue\n  variant?: ResponsiveSelectValue<ButtonVariant>\n  shape?: ResponsiveIconRadioGroupValue<'pill' | 'rounded' | 'square'>\n  size?: ResponsiveIconRadioGroupValue<'small' | 'medium' | 'large'>\n  color?: ResponsiveColor | null\n  textColor?: ResponsiveColor | null\n  textStyle?: TextStyleValue\n  width?: WidthValue\n  margin?: string\n}\n\ntype Props<T extends ElementType> = BaseProps<T> &\n  Omit<ComponentPropsWithoutRef<typeof Link>, keyof BaseProps<T>>\n\nconst Button = forwardRef(function Button<T extends ElementType = 'button'>(\n  {\n    as,\n    id,\n    children,\n    link,\n    variant,\n    shape,\n    size,\n    textColor,\n    color,\n    textStyle,\n    width,\n    margin,\n    className,\n    ...restOfProps\n  }: Props<T>,\n  ref: ForwardedRef<ElementRef<T>>,\n) {\n  const Component = as ?? Link\n\n  return (\n    // @ts-ignore: `ref` prop doesn't match between `Link` and `T`.\n    <Component\n      {...restOfProps}\n      ref={ref}\n      id={id}\n      className={cx(\n        useStyle({\n          display: 'table',\n          border: 0,\n          outline: 0,\n          userSelect: 'none',\n          cursor: 'pointer',\n          fontFamily: 'inherit',\n          textDecoration: 'none',\n          textAlign: 'center',\n        }),\n        useStyle(responsiveWidth(width, 'auto')),\n        margin,\n        useStyle(\n          responsiveStyle(\n            [variant, shape, size, textColor, color] as const,\n            ([\n              variant = 'flat',\n              shape = 'rounded',\n              size = 'medium',\n              textColor = { swatch: { hue: 0, saturation: 0, lightness: 100 }, alpha: 1 },\n              color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n            ]) => {\n              const fontSize = {\n                value: { small: 12, medium: 14, large: 18 }[size],\n                unit: 'px',\n              }\n\n              return {\n                color: colorToString(textColor),\n                borderRadius: `${{ square: 0, rounded: 4, pill: 500 }[shape]}px`,\n                padding: `${{ small: '8px 12px', medium: '12px 16px', large: '16px 20px' }[size]}`,\n                fontSize: `${fontSize.value}${fontSize.unit}`,\n                ...{\n                  flat: {\n                    background: colorToString(color),\n                    border: 'none',\n                    transition: ['color', 'background', 'border', 'box-shadow']\n                      .map(property => `${property} 0.15s ease-in-out`)\n                      .join(', '),\n\n                    ':hover': {\n                      background: ColorHelper(colorToString(color)).darken(0.1).hex(),\n                    },\n\n                    ':active': {\n                      background: ColorHelper(colorToString(color)).darken(0.15).hex(),\n                    },\n                  },\n                  outline: {\n                    background: 'transparent',\n                    boxShadow: `inset 0 0 0 2px ${colorToString(color)}`,\n                    transition: ['color', 'background', 'box-shadow']\n                      .map(property => `${property} 0.15s ease-in-out`)\n                      .join(', '),\n\n                    ':hover': {\n                      boxShadow: `inset 0 0 0 2px ${ColorHelper(colorToString(color))\n                        .darken(0.1)\n                        .hex()}`,\n                      color: ColorHelper(colorToString(color)).darken(0.1).hex(),\n                    },\n\n                    ':active': {\n                      boxShadow: `inset 0 0 0 2px ${ColorHelper(colorToString(color))\n                        .darken(0.15)\n                        .hex()}`,\n                      color: ColorHelper(colorToString(color)).darken(0.15).hex(),\n                    },\n                  },\n                  shadow: {\n                    background: colorToString(color),\n                    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.2)',\n                    transition: ['transform', 'box-shadow']\n                      .map(property => `${property} 0.18s`)\n                      .join(', '),\n\n                    ':hover': {\n                      boxShadow:\n                        '0 10px 25px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.3)',\n                      transform: 'translateY(-1px)',\n                    },\n\n                    ':active': {\n                      boxShadow:\n                        '0 4px 12px rgba(0, 0, 0, 0.15), 0 4px 6px -3px rgba(0, 0, 0, 0.3)',\n                      transform: 'translateY(0px)',\n                    },\n                  },\n                  clear: {\n                    background: 'transparent',\n                    border: 'none',\n\n                    ':hover': {\n                      color: ColorHelper(colorToString(textColor)).alpha(0.5).toString(),\n                    },\n\n                    ':active': {\n                      color: ColorHelper(colorToString(textColor)).alpha(0.6).toString(),\n                    },\n                  },\n                  blocky: {\n                    background: colorToString(color),\n                    borderWidth: 1,\n                    borderStyle: 'solid',\n                    borderColor: ColorHelper(colorToString(color)).darken(0.25).hex(),\n                    boxShadow: `0 4px ${ColorHelper(colorToString(color)).darken(0.25).hex()}`,\n                    transition: ['transform', 'box-shadow']\n                      .map(property => `${property} 0.1s`)\n                      .join(', '),\n\n                    ':hover': {\n                      transform: 'translateY(2px)',\n                      boxShadow: `0 2px ${ColorHelper(colorToString(color)).darken(0.25).hex()}`,\n                    },\n\n                    ':active': {\n                      transform: 'translateY(4px)',\n                      boxShadow: `0 0 ${ColorHelper(colorToString(color)).darken(0.25).hex()}`,\n                    },\n                  },\n                  bubbly: {\n                    background: `linear-gradient(\n                      180deg,\n                      ${ColorHelper(colorToString(color)).lighten(0.05).hex()},\n                      ${ColorHelper(colorToString(color)).darken(0.3).saturate(0.05).hex()}\n                    )`,\n                    position: 'relative',\n                    zIndex: '0',\n\n                    ':before': {\n                      position: 'absolute',\n                      content: '\"\"',\n                      top: 0,\n                      right: 0,\n                      bottom: 0,\n                      left: 0,\n                      zIndex: '-1',\n                      borderRadius: 'inherit',\n                      background: `linear-gradient(\n                        180deg,\n                        ${ColorHelper(colorToString(color)).lighten(0.2).hex()},\n                        ${ColorHelper(colorToString(color)).darken(0.2).saturate(0.05).hex()}\n                      )`,\n                      opacity: '0',\n                      transition: 'opacity 0.15s',\n                    },\n\n                    ':hover': {\n                      ':before': {\n                        opacity: '1',\n                      },\n                    },\n\n                    ':active': {\n                      ':before': {\n                        opacity: '0.25',\n                      },\n                    },\n                  } as const,\n                  skewed: {\n                    position: 'relative',\n                    zIndex: '0',\n\n                    ':before': {\n                      position: 'absolute',\n                      content: '\"\"',\n                      top: 0,\n                      right: 0,\n                      bottom: 0,\n                      left: 0,\n                      zIndex: '-1',\n                      background: colorToString(color),\n                      transform: 'skewX(-12deg)',\n                      borderRadius: 'inherit',\n                      transition: 'transform 0.2s cubic-bezier(0.25, 0, 0.25, 1.75)',\n                    },\n\n                    ':hover:before': {\n                      transform: 'skew(0deg)',\n                    },\n\n                    ':active:before': {\n                      transform: 'skew(-8deg)',\n                    },\n                  } as const,\n                }[variant],\n              }\n            },\n          ),\n        ),\n        useStyle(responsiveTextStyle(textStyle)),\n        className,\n      )}\n      link={link}\n    >\n      {children == null ? 'Button Text' : children}\n    </Component>\n  )\n})\n\nexport default Button\n"],"names":["Button","forwardRef","ref","as","id","children","link","variant","shape","size","textColor","color","textStyle","width","margin","className","restOfProps","Component","Link","cx","useStyle","display","border","outline","userSelect","cursor","fontFamily","textDecoration","textAlign","responsiveWidth","responsiveStyle","swatch","hue","saturation","lightness","alpha","fontSize","value","small","medium","large","unit","colorToString","borderRadius","square","rounded","pill","padding","flat","background","transition","map","property","join","ColorHelper","darken","hex","boxShadow","shadow","transform","clear","toString","blocky","borderWidth","borderStyle","borderColor","bubbly","lighten","saturate","position","zIndex","content","top","right","bottom","left","opacity","skewed","responsiveTextStyle"],"mappings":"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"}
+{"version":3,"file":"Button.cjs.js","sources":["../src/components/builtin/Button/Button.tsx"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  ElementRef,\n  ElementType,\n  ForwardedRef,\n  forwardRef,\n  ReactNode,\n} from 'react'\nimport ColorHelper from 'color'\n\nimport {\n  ElementIDValue,\n  ResponsiveSelectValue,\n  ResponsiveIconRadioGroupValue,\n  TextStyleValue,\n  LinkValue,\n  WidthValue,\n} from '../../../prop-controllers/descriptors'\nimport { colorToString } from '../../utils/colorToString'\nimport { Link } from '../../shared/Link'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\nimport { ButtonVariant } from './contants'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { responsiveStyle, responsiveTextStyle, responsiveWidth } from '../../utils/responsive-style'\nimport { cx } from '@emotion/css'\n\ntype BaseProps<T extends ElementType> = {\n  as?: T\n  id?: ElementIDValue\n  children?: ReactNode\n  link?: LinkValue\n  variant?: ResponsiveSelectValue<ButtonVariant>\n  shape?: ResponsiveIconRadioGroupValue<'pill' | 'rounded' | 'square'>\n  size?: ResponsiveIconRadioGroupValue<'small' | 'medium' | 'large'>\n  color?: ResponsiveColor | null\n  textColor?: ResponsiveColor | null\n  textStyle?: TextStyleValue\n  width?: WidthValue\n  margin?: string\n}\n\ntype Props<T extends ElementType> = BaseProps<T> &\n  Omit<ComponentPropsWithoutRef<typeof Link>, keyof BaseProps<T>>\n\nconst Button = forwardRef(function Button<T extends ElementType = 'button'>(\n  {\n    as,\n    id,\n    children,\n    link,\n    variant,\n    shape,\n    size,\n    textColor,\n    color,\n    textStyle,\n    width,\n    margin,\n    className,\n    ...restOfProps\n  }: Props<T>,\n  ref: ForwardedRef<ElementRef<T>>,\n) {\n  const Component = as ?? Link\n\n  return (\n    // @ts-ignore: `ref` prop doesn't match between `Link` and `T`.\n    <Component\n      {...restOfProps}\n      ref={ref}\n      id={id}\n      className={cx(\n        useStyle({\n          display: 'table',\n          border: 0,\n          outline: 0,\n          userSelect: 'none',\n          cursor: 'pointer',\n          fontFamily: 'inherit',\n          textDecoration: 'none',\n          textAlign: 'center',\n        }),\n        useStyle(responsiveWidth(width, 'auto')),\n        margin,\n        useStyle(\n          responsiveStyle(\n            [variant, shape, size, textColor, color] as const,\n            ([\n              variant = 'flat',\n              shape = 'rounded',\n              size = 'medium',\n              textColor = { swatch: { hue: 0, saturation: 0, lightness: 100 }, alpha: 1 },\n              color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n            ]) => {\n              const fontSize = {\n                value: { small: 12, medium: 14, large: 18 }[size],\n                unit: 'px',\n              }\n\n              return {\n                color: colorToString(textColor),\n                borderRadius: `${{ square: 0, rounded: 4, pill: 500 }[shape]}px`,\n                padding: `${{ small: '8px 12px', medium: '12px 16px', large: '16px 20px' }[size]}`,\n                fontSize: `${fontSize.value}${fontSize.unit}`,\n                ...{\n                  flat: {\n                    background: colorToString(color),\n                    border: 'none',\n                    transition: ['color', 'background', 'border', 'box-shadow']\n                      .map(property => `${property} 0.15s ease-in-out`)\n                      .join(', '),\n\n                    ':hover': {\n                      background: ColorHelper(colorToString(color)).darken(0.1).hex(),\n                    },\n\n                    ':active': {\n                      background: ColorHelper(colorToString(color)).darken(0.15).hex(),\n                    },\n                  },\n                  outline: {\n                    background: 'transparent',\n                    boxShadow: `inset 0 0 0 2px ${colorToString(color)}`,\n                    transition: ['color', 'background', 'box-shadow']\n                      .map(property => `${property} 0.15s ease-in-out`)\n                      .join(', '),\n\n                    ':hover': {\n                      boxShadow: `inset 0 0 0 2px ${ColorHelper(colorToString(color))\n                        .darken(0.1)\n                        .hex()}`,\n                      color: ColorHelper(colorToString(color)).darken(0.1).hex(),\n                    },\n\n                    ':active': {\n                      boxShadow: `inset 0 0 0 2px ${ColorHelper(colorToString(color))\n                        .darken(0.15)\n                        .hex()}`,\n                      color: ColorHelper(colorToString(color)).darken(0.15).hex(),\n                    },\n                  },\n                  shadow: {\n                    background: colorToString(color),\n                    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.2)',\n                    transition: ['transform', 'box-shadow']\n                      .map(property => `${property} 0.18s`)\n                      .join(', '),\n\n                    ':hover': {\n                      boxShadow:\n                        '0 10px 25px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.3)',\n                      transform: 'translateY(-1px)',\n                    },\n\n                    ':active': {\n                      boxShadow:\n                        '0 4px 12px rgba(0, 0, 0, 0.15), 0 4px 6px -3px rgba(0, 0, 0, 0.3)',\n                      transform: 'translateY(0px)',\n                    },\n                  },\n                  clear: {\n                    background: 'transparent',\n                    border: 'none',\n\n                    ':hover': {\n                      color: ColorHelper(colorToString(textColor)).alpha(0.5).toString(),\n                    },\n\n                    ':active': {\n                      color: ColorHelper(colorToString(textColor)).alpha(0.6).toString(),\n                    },\n                  },\n                  blocky: {\n                    background: colorToString(color),\n                    borderWidth: 1,\n                    borderStyle: 'solid',\n                    borderColor: ColorHelper(colorToString(color)).darken(0.25).hex(),\n                    boxShadow: `0 4px ${ColorHelper(colorToString(color)).darken(0.25).hex()}`,\n                    transition: ['transform', 'box-shadow']\n                      .map(property => `${property} 0.1s`)\n                      .join(', '),\n\n                    ':hover': {\n                      transform: 'translateY(2px)',\n                      boxShadow: `0 2px ${ColorHelper(colorToString(color)).darken(0.25).hex()}`,\n                    },\n\n                    ':active': {\n                      transform: 'translateY(4px)',\n                      boxShadow: `0 0 ${ColorHelper(colorToString(color)).darken(0.25).hex()}`,\n                    },\n                  },\n                  bubbly: {\n                    background: `linear-gradient(\n                      180deg,\n                      ${ColorHelper(colorToString(color)).lighten(0.05).hex()},\n                      ${ColorHelper(colorToString(color)).darken(0.3).saturate(0.05).hex()}\n                    )`,\n                    position: 'relative',\n                    zIndex: '0',\n\n                    ':before': {\n                      position: 'absolute',\n                      content: '\"\"',\n                      top: 0,\n                      right: 0,\n                      bottom: 0,\n                      left: 0,\n                      zIndex: '-1',\n                      borderRadius: 'inherit',\n                      background: `linear-gradient(\n                        180deg,\n                        ${ColorHelper(colorToString(color)).lighten(0.2).hex()},\n                        ${ColorHelper(colorToString(color)).darken(0.2).saturate(0.05).hex()}\n                      )`,\n                      opacity: '0',\n                      transition: 'opacity 0.15s',\n                    },\n\n                    ':hover': {\n                      ':before': {\n                        opacity: '1',\n                      },\n                    },\n\n                    ':active': {\n                      ':before': {\n                        opacity: '0.25',\n                      },\n                    },\n                  } as const,\n                  skewed: {\n                    position: 'relative',\n                    zIndex: '0',\n\n                    ':before': {\n                      position: 'absolute',\n                      content: '\"\"',\n                      top: 0,\n                      right: 0,\n                      bottom: 0,\n                      left: 0,\n                      zIndex: '-1',\n                      background: colorToString(color),\n                      transform: 'skewX(-12deg)',\n                      borderRadius: 'inherit',\n                      transition: 'transform 0.2s cubic-bezier(0.25, 0, 0.25, 1.75)',\n                    },\n\n                    ':hover:before': {\n                      transform: 'skew(0deg)',\n                    },\n\n                    ':active:before': {\n                      transform: 'skew(-8deg)',\n                    },\n                  } as const,\n                }[variant],\n              }\n            },\n          ),\n        ),\n        useStyle(responsiveTextStyle(textStyle)),\n        className,\n      )}\n      link={link}\n    >\n      {children == null ? 'Button Text' : children}\n    </Component>\n  )\n})\n\nexport default Button\n"],"names":["Button","forwardRef","ref","as","id","children","link","variant","shape","size","textColor","color","textStyle","width","margin","className","restOfProps","Component","Link","cx","useStyle","display","border","outline","userSelect","cursor","fontFamily","textDecoration","textAlign","responsiveWidth","responsiveStyle","swatch","hue","saturation","lightness","alpha","fontSize","value","small","medium","large","unit","colorToString","borderRadius","square","rounded","pill","padding","flat","background","transition","map","property","join","ColorHelper","darken","hex","boxShadow","shadow","transform","clear","toString","blocky","borderWidth","borderStyle","borderColor","bubbly","lighten","saturate","position","zIndex","content","top","right","bottom","left","opacity","skewed","responsiveTextStyle"],"mappings":"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"}

package/dist/Button.es.js

@@ -37,16 +37,17 @@ import { cx } from "@emotion/css";
 import { jsx } from "react/jsx-runtime";
 import "use-sync-external-store/shim/with-selector";
 import "next/dynamic";
-import "./react-page.es.js";
+import "./constants.es.js";
 import "redux";
 import "redux-thunk";
 import "./actions.es.js";
 import "./slot.es.js";
 import "./control.es.js";
+import "@emotion/serialize";
+import "@emotion/utils";
 import "./text-input.es.js";
 import "./combobox.es.js";
 import "use-sync-external-store/shim";
-import "slate";
 import "./types.es.js";
 import "scroll-into-view-if-needed";
 import "./box-models.es.js";

package/dist/Button.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.es.js","sources":["../src/components/builtin/Button/Button.tsx"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  ElementRef,\n  ElementType,\n  ForwardedRef,\n  forwardRef,\n  ReactNode,\n} from 'react'\nimport ColorHelper from 'color'\n\nimport {\n  ElementIDValue,\n  ResponsiveSelectValue,\n  ResponsiveIconRadioGroupValue,\n  TextStyleValue,\n  LinkValue,\n  WidthValue,\n} from '../../../prop-controllers/descriptors'\nimport { colorToString } from '../../utils/colorToString'\nimport { Link } from '../../shared/Link'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\nimport { ButtonVariant } from './contants'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { responsiveStyle, responsiveTextStyle, responsiveWidth } from '../../utils/responsive-style'\nimport { cx } from '@emotion/css'\n\ntype BaseProps<T extends ElementType> = {\n  as?: T\n  id?: ElementIDValue\n  children?: ReactNode\n  link?: LinkValue\n  variant?: ResponsiveSelectValue<ButtonVariant>\n  shape?: ResponsiveIconRadioGroupValue<'pill' | 'rounded' | 'square'>\n  size?: ResponsiveIconRadioGroupValue<'small' | 'medium' | 'large'>\n  color?: ResponsiveColor | null\n  textColor?: ResponsiveColor | null\n  textStyle?: TextStyleValue\n  width?: WidthValue\n  margin?: string\n}\n\ntype Props<T extends ElementType> = BaseProps<T> &\n  Omit<ComponentPropsWithoutRef<typeof Link>, keyof BaseProps<T>>\n\nconst Button = forwardRef(function Button<T extends ElementType = 'button'>(\n  {\n    as,\n    id,\n    children,\n    link,\n    variant,\n    shape,\n    size,\n    textColor,\n    color,\n    textStyle,\n    width,\n    margin,\n    className,\n    ...restOfProps\n  }: Props<T>,\n  ref: ForwardedRef<ElementRef<T>>,\n) {\n  const Component = as ?? Link\n\n  return (\n    // @ts-ignore: `ref` prop doesn't match between `Link` and `T`.\n    <Component\n      {...restOfProps}\n      ref={ref}\n      id={id}\n      className={cx(\n        useStyle({\n          display: 'table',\n          border: 0,\n          outline: 0,\n          userSelect: 'none',\n          cursor: 'pointer',\n          fontFamily: 'inherit',\n          textDecoration: 'none',\n          textAlign: 'center',\n        }),\n        useStyle(responsiveWidth(width, 'auto')),\n        margin,\n        useStyle(\n          responsiveStyle(\n            [variant, shape, size, textColor, color] as const,\n            ([\n              variant = 'flat',\n              shape = 'rounded',\n              size = 'medium',\n              textColor = { swatch: { hue: 0, saturation: 0, lightness: 100 }, alpha: 1 },\n              color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n            ]) => {\n              const fontSize = {\n                value: { small: 12, medium: 14, large: 18 }[size],\n                unit: 'px',\n              }\n\n              return {\n                color: colorToString(textColor),\n                borderRadius: `${{ square: 0, rounded: 4, pill: 500 }[shape]}px`,\n                padding: `${{ small: '8px 12px', medium: '12px 16px', large: '16px 20px' }[size]}`,\n                fontSize: `${fontSize.value}${fontSize.unit}`,\n                ...{\n                  flat: {\n                    background: colorToString(color),\n                    border: 'none',\n                    transition: ['color', 'background', 'border', 'box-shadow']\n                      .map(property => `${property} 0.15s ease-in-out`)\n                      .join(', '),\n\n                    ':hover': {\n                      background: ColorHelper(colorToString(color)).darken(0.1).hex(),\n                    },\n\n                    ':active': {\n                      background: ColorHelper(colorToString(color)).darken(0.15).hex(),\n                    },\n                  },\n                  outline: {\n                    background: 'transparent',\n                    boxShadow: `inset 0 0 0 2px ${colorToString(color)}`,\n                    transition: ['color', 'background', 'box-shadow']\n                      .map(property => `${property} 0.15s ease-in-out`)\n                      .join(', '),\n\n                    ':hover': {\n                      boxShadow: `inset 0 0 0 2px ${ColorHelper(colorToString(color))\n                        .darken(0.1)\n                        .hex()}`,\n                      color: ColorHelper(colorToString(color)).darken(0.1).hex(),\n                    },\n\n                    ':active': {\n                      boxShadow: `inset 0 0 0 2px ${ColorHelper(colorToString(color))\n                        .darken(0.15)\n                        .hex()}`,\n                      color: ColorHelper(colorToString(color)).darken(0.15).hex(),\n                    },\n                  },\n                  shadow: {\n                    background: colorToString(color),\n                    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.2)',\n                    transition: ['transform', 'box-shadow']\n                      .map(property => `${property} 0.18s`)\n                      .join(', '),\n\n                    ':hover': {\n                      boxShadow:\n                        '0 10px 25px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.3)',\n                      transform: 'translateY(-1px)',\n                    },\n\n                    ':active': {\n                      boxShadow:\n                        '0 4px 12px rgba(0, 0, 0, 0.15), 0 4px 6px -3px rgba(0, 0, 0, 0.3)',\n                      transform: 'translateY(0px)',\n                    },\n                  },\n                  clear: {\n                    background: 'transparent',\n                    border: 'none',\n\n                    ':hover': {\n                      color: ColorHelper(colorToString(textColor)).alpha(0.5).toString(),\n                    },\n\n                    ':active': {\n                      color: ColorHelper(colorToString(textColor)).alpha(0.6).toString(),\n                    },\n                  },\n                  blocky: {\n                    background: colorToString(color),\n                    borderWidth: 1,\n                    borderStyle: 'solid',\n                    borderColor: ColorHelper(colorToString(color)).darken(0.25).hex(),\n                    boxShadow: `0 4px ${ColorHelper(colorToString(color)).darken(0.25).hex()}`,\n                    transition: ['transform', 'box-shadow']\n                      .map(property => `${property} 0.1s`)\n                      .join(', '),\n\n                    ':hover': {\n                      transform: 'translateY(2px)',\n                      boxShadow: `0 2px ${ColorHelper(colorToString(color)).darken(0.25).hex()}`,\n                    },\n\n                    ':active': {\n                      transform: 'translateY(4px)',\n                      boxShadow: `0 0 ${ColorHelper(colorToString(color)).darken(0.25).hex()}`,\n                    },\n                  },\n                  bubbly: {\n                    background: `linear-gradient(\n                      180deg,\n                      ${ColorHelper(colorToString(color)).lighten(0.05).hex()},\n                      ${ColorHelper(colorToString(color)).darken(0.3).saturate(0.05).hex()}\n                    )`,\n                    position: 'relative',\n                    zIndex: '0',\n\n                    ':before': {\n                      position: 'absolute',\n                      content: '\"\"',\n                      top: 0,\n                      right: 0,\n                      bottom: 0,\n                      left: 0,\n                      zIndex: '-1',\n                      borderRadius: 'inherit',\n                      background: `linear-gradient(\n                        180deg,\n                        ${ColorHelper(colorToString(color)).lighten(0.2).hex()},\n                        ${ColorHelper(colorToString(color)).darken(0.2).saturate(0.05).hex()}\n                      )`,\n                      opacity: '0',\n                      transition: 'opacity 0.15s',\n                    },\n\n                    ':hover': {\n                      ':before': {\n                        opacity: '1',\n                      },\n                    },\n\n                    ':active': {\n                      ':before': {\n                        opacity: '0.25',\n                      },\n                    },\n                  } as const,\n                  skewed: {\n                    position: 'relative',\n                    zIndex: '0',\n\n                    ':before': {\n                      position: 'absolute',\n                      content: '\"\"',\n                      top: 0,\n                      right: 0,\n                      bottom: 0,\n                      left: 0,\n                      zIndex: '-1',\n                      background: colorToString(color),\n                      transform: 'skewX(-12deg)',\n                      borderRadius: 'inherit',\n                      transition: 'transform 0.2s cubic-bezier(0.25, 0, 0.25, 1.75)',\n                    },\n\n                    ':hover:before': {\n                      transform: 'skew(0deg)',\n                    },\n\n                    ':active:before': {\n                      transform: 'skew(-8deg)',\n                    },\n                  } as const,\n                }[variant],\n              }\n            },\n          ),\n        ),\n        useStyle(responsiveTextStyle(textStyle)),\n        className,\n      )}\n      link={link}\n    >\n      {children == null ? 'Button Text' : children}\n    </Component>\n  )\n})\n\nexport default Button\n"],"names":["Button","forwardRef","ref","as","id","children","link","variant","shape","size","textColor","color","textStyle","width","margin","className","restOfProps","Component","Link","cx","useStyle","display","border","outline","userSelect","cursor","fontFamily","textDecoration","textAlign","responsiveWidth","responsiveStyle","swatch","hue","saturation","lightness","alpha","fontSize","value","small","medium","large","unit","colorToString","borderRadius","square","rounded","pill","padding","flat","background","transition","map","property","join","ColorHelper","darken","hex","boxShadow","shadow","transform","clear","toString","blocky","borderWidth","borderStyle","borderColor","bubbly","lighten","saturate","position","zIndex","content","top","right","bottom","left","opacity","skewed","responsiveTextStyle"],"mappings":"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"}
+{"version":3,"file":"Button.es.js","sources":["../src/components/builtin/Button/Button.tsx"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  ElementRef,\n  ElementType,\n  ForwardedRef,\n  forwardRef,\n  ReactNode,\n} from 'react'\nimport ColorHelper from 'color'\n\nimport {\n  ElementIDValue,\n  ResponsiveSelectValue,\n  ResponsiveIconRadioGroupValue,\n  TextStyleValue,\n  LinkValue,\n  WidthValue,\n} from '../../../prop-controllers/descriptors'\nimport { colorToString } from '../../utils/colorToString'\nimport { Link } from '../../shared/Link'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\nimport { ButtonVariant } from './contants'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { responsiveStyle, responsiveTextStyle, responsiveWidth } from '../../utils/responsive-style'\nimport { cx } from '@emotion/css'\n\ntype BaseProps<T extends ElementType> = {\n  as?: T\n  id?: ElementIDValue\n  children?: ReactNode\n  link?: LinkValue\n  variant?: ResponsiveSelectValue<ButtonVariant>\n  shape?: ResponsiveIconRadioGroupValue<'pill' | 'rounded' | 'square'>\n  size?: ResponsiveIconRadioGroupValue<'small' | 'medium' | 'large'>\n  color?: ResponsiveColor | null\n  textColor?: ResponsiveColor | null\n  textStyle?: TextStyleValue\n  width?: WidthValue\n  margin?: string\n}\n\ntype Props<T extends ElementType> = BaseProps<T> &\n  Omit<ComponentPropsWithoutRef<typeof Link>, keyof BaseProps<T>>\n\nconst Button = forwardRef(function Button<T extends ElementType = 'button'>(\n  {\n    as,\n    id,\n    children,\n    link,\n    variant,\n    shape,\n    size,\n    textColor,\n    color,\n    textStyle,\n    width,\n    margin,\n    className,\n    ...restOfProps\n  }: Props<T>,\n  ref: ForwardedRef<ElementRef<T>>,\n) {\n  const Component = as ?? Link\n\n  return (\n    // @ts-ignore: `ref` prop doesn't match between `Link` and `T`.\n    <Component\n      {...restOfProps}\n      ref={ref}\n      id={id}\n      className={cx(\n        useStyle({\n          display: 'table',\n          border: 0,\n          outline: 0,\n          userSelect: 'none',\n          cursor: 'pointer',\n          fontFamily: 'inherit',\n          textDecoration: 'none',\n          textAlign: 'center',\n        }),\n        useStyle(responsiveWidth(width, 'auto')),\n        margin,\n        useStyle(\n          responsiveStyle(\n            [variant, shape, size, textColor, color] as const,\n            ([\n              variant = 'flat',\n              shape = 'rounded',\n              size = 'medium',\n              textColor = { swatch: { hue: 0, saturation: 0, lightness: 100 }, alpha: 1 },\n              color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n            ]) => {\n              const fontSize = {\n                value: { small: 12, medium: 14, large: 18 }[size],\n                unit: 'px',\n              }\n\n              return {\n                color: colorToString(textColor),\n                borderRadius: `${{ square: 0, rounded: 4, pill: 500 }[shape]}px`,\n                padding: `${{ small: '8px 12px', medium: '12px 16px', large: '16px 20px' }[size]}`,\n                fontSize: `${fontSize.value}${fontSize.unit}`,\n                ...{\n                  flat: {\n                    background: colorToString(color),\n                    border: 'none',\n                    transition: ['color', 'background', 'border', 'box-shadow']\n                      .map(property => `${property} 0.15s ease-in-out`)\n                      .join(', '),\n\n                    ':hover': {\n                      background: ColorHelper(colorToString(color)).darken(0.1).hex(),\n                    },\n\n                    ':active': {\n                      background: ColorHelper(colorToString(color)).darken(0.15).hex(),\n                    },\n                  },\n                  outline: {\n                    background: 'transparent',\n                    boxShadow: `inset 0 0 0 2px ${colorToString(color)}`,\n                    transition: ['color', 'background', 'box-shadow']\n                      .map(property => `${property} 0.15s ease-in-out`)\n                      .join(', '),\n\n                    ':hover': {\n                      boxShadow: `inset 0 0 0 2px ${ColorHelper(colorToString(color))\n                        .darken(0.1)\n                        .hex()}`,\n                      color: ColorHelper(colorToString(color)).darken(0.1).hex(),\n                    },\n\n                    ':active': {\n                      boxShadow: `inset 0 0 0 2px ${ColorHelper(colorToString(color))\n                        .darken(0.15)\n                        .hex()}`,\n                      color: ColorHelper(colorToString(color)).darken(0.15).hex(),\n                    },\n                  },\n                  shadow: {\n                    background: colorToString(color),\n                    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.2)',\n                    transition: ['transform', 'box-shadow']\n                      .map(property => `${property} 0.18s`)\n                      .join(', '),\n\n                    ':hover': {\n                      boxShadow:\n                        '0 10px 25px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.3)',\n                      transform: 'translateY(-1px)',\n                    },\n\n                    ':active': {\n                      boxShadow:\n                        '0 4px 12px rgba(0, 0, 0, 0.15), 0 4px 6px -3px rgba(0, 0, 0, 0.3)',\n                      transform: 'translateY(0px)',\n                    },\n                  },\n                  clear: {\n                    background: 'transparent',\n                    border: 'none',\n\n                    ':hover': {\n                      color: ColorHelper(colorToString(textColor)).alpha(0.5).toString(),\n                    },\n\n                    ':active': {\n                      color: ColorHelper(colorToString(textColor)).alpha(0.6).toString(),\n                    },\n                  },\n                  blocky: {\n                    background: colorToString(color),\n                    borderWidth: 1,\n                    borderStyle: 'solid',\n                    borderColor: ColorHelper(colorToString(color)).darken(0.25).hex(),\n                    boxShadow: `0 4px ${ColorHelper(colorToString(color)).darken(0.25).hex()}`,\n                    transition: ['transform', 'box-shadow']\n                      .map(property => `${property} 0.1s`)\n                      .join(', '),\n\n                    ':hover': {\n                      transform: 'translateY(2px)',\n                      boxShadow: `0 2px ${ColorHelper(colorToString(color)).darken(0.25).hex()}`,\n                    },\n\n                    ':active': {\n                      transform: 'translateY(4px)',\n                      boxShadow: `0 0 ${ColorHelper(colorToString(color)).darken(0.25).hex()}`,\n                    },\n                  },\n                  bubbly: {\n                    background: `linear-gradient(\n                      180deg,\n                      ${ColorHelper(colorToString(color)).lighten(0.05).hex()},\n                      ${ColorHelper(colorToString(color)).darken(0.3).saturate(0.05).hex()}\n                    )`,\n                    position: 'relative',\n                    zIndex: '0',\n\n                    ':before': {\n                      position: 'absolute',\n                      content: '\"\"',\n                      top: 0,\n                      right: 0,\n                      bottom: 0,\n                      left: 0,\n                      zIndex: '-1',\n                      borderRadius: 'inherit',\n                      background: `linear-gradient(\n                        180deg,\n                        ${ColorHelper(colorToString(color)).lighten(0.2).hex()},\n                        ${ColorHelper(colorToString(color)).darken(0.2).saturate(0.05).hex()}\n                      )`,\n                      opacity: '0',\n                      transition: 'opacity 0.15s',\n                    },\n\n                    ':hover': {\n                      ':before': {\n                        opacity: '1',\n                      },\n                    },\n\n                    ':active': {\n                      ':before': {\n                        opacity: '0.25',\n                      },\n                    },\n                  } as const,\n                  skewed: {\n                    position: 'relative',\n                    zIndex: '0',\n\n                    ':before': {\n                      position: 'absolute',\n                      content: '\"\"',\n                      top: 0,\n                      right: 0,\n                      bottom: 0,\n                      left: 0,\n                      zIndex: '-1',\n                      background: colorToString(color),\n                      transform: 'skewX(-12deg)',\n                      borderRadius: 'inherit',\n                      transition: 'transform 0.2s cubic-bezier(0.25, 0, 0.25, 1.75)',\n                    },\n\n                    ':hover:before': {\n                      transform: 'skew(0deg)',\n                    },\n\n                    ':active:before': {\n                      transform: 'skew(-8deg)',\n                    },\n                  } as const,\n                }[variant],\n              }\n            },\n          ),\n        ),\n        useStyle(responsiveTextStyle(textStyle)),\n        className,\n      )}\n      link={link}\n    >\n      {children == null ? 'Button Text' : children}\n    </Component>\n  )\n})\n\nexport default Button\n"],"names":["Button","forwardRef","ref","as","id","children","link","variant","shape","size","textColor","color","textStyle","width","margin","className","restOfProps","Component","Link","cx","useStyle","display","border","outline","userSelect","cursor","fontFamily","textDecoration","textAlign","responsiveWidth","responsiveStyle","swatch","hue","saturation","lightness","alpha","fontSize","value","small","medium","large","unit","colorToString","borderRadius","square","rounded","pill","padding","flat","background","transition","map","property","join","ColorHelper","darken","hex","boxShadow","shadow","transform","clear","toString","blocky","borderWidth","borderStyle","borderColor","bubbly","lighten","saturate","position","zIndex","content","top","right","bottom","left","opacity","skewed","responsiveTextStyle"],"mappings":"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"}

package/dist/Carousel.cjs.js

@@ -43,14 +43,15 @@ var css = require("@emotion/css");
 var jsxRuntime = require("react/jsx-runtime");
 require("use-sync-external-store/shim/with-selector");
 require("next/dynamic");
-require("./react-page.cjs.js");
+require("./constants.cjs.js");
 require("redux");
 require("redux-thunk");
 require("./actions.cjs.js");
 require("./control.cjs.js");
+require("@emotion/serialize");
+require("@emotion/utils");
 require("./text-input.cjs.js");
 require("./combobox.cjs.js");
-require("slate");
 require("./types.cjs.js");
 require("color");
 require("scroll-into-view-if-needed");