@makeswift/runtime 0.9.0 → 0.9.2

package/dist/Box.cjs.js

@@ -35,26 +35,26 @@ var React = require("react");
 var css = require("@emotion/css");
 var uuid = require("uuid");
 var next = require("./index.cjs.js");
+var reactPage = require("./react-page.cjs.js");
 var jsxRuntime = require("react/jsx-runtime");
 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("redux");
-require("redux-thunk");
 require("./actions.cjs.js");
-require("./state/breakpoints.cjs.js");
-require("slate");
-require("is-hotkey");
-require("slate-react");
-require("@emotion/serialize");
-require("@emotion/utils");
 require("./text-input.cjs.js");
 require("./combobox.cjs.js");
+require("./select.cjs.js");
+require("slate");
 require("use-sync-external-store/shim");
+require("redux");
+require("redux-thunk");
 require("./types.cjs.js");
+require("./deepEqual.cjs.js");
+require("./state/breakpoints.cjs.js");
 require("color");
+require("@emotion/serialize");
+require("@emotion/utils");
 require("scroll-into-view-if-needed");
 require("react-dom");
 require("html-react-parser");
@@ -87,7 +87,7 @@ var Placeholder = React.forwardRef(function Placeholder2(_a, ref) {
     style: {
       visibility: hide ? "hidden" : "initial"
     },
-    className: next.useStyle({
+    className: reactPage.useStyle({
       width: "100%",
       background: "rgba(161, 168, 194, 0.18)",
       height: 80,
@@ -184,7 +184,7 @@ const Box = React.forwardRef(function Box2({
       }) : null;
     }
   }), []);
-  const gridItemClassName = next.useStyle(next.useResponsiveStyle([verticalAlign], ([alignItems = "flex-start"]) => ({
+  const gridItemClassName = reactPage.useStyle(next.useResponsiveStyle([verticalAlign], ([alignItems = "flex-start"]) => ({
     alignItems
   })));
   const [key, setKey] = React.useState(() => uuid.v4());
@@ -208,19 +208,19 @@ const Box = React.forwardRef(function Box2({
   return /* @__PURE__ */ jsxRuntime.jsx(index.BackgroundsContainer, {
     ref: boxElementCallbackRef,
     id,
-    className: css.cx(width, margin, borderRadius, next.useStyle({
+    className: css.cx(width, margin, borderRadius, reactPage.useStyle({
       display: "flex"
-    }), next.useStyle(next.useResponsiveStyle([height], ([alignSelf = "auto"]) => ({
+    }), reactPage.useStyle(next.useResponsiveStyle([height], ([alignSelf = "auto"]) => ({
       alignSelf
     }))), animationClassName),
     backgrounds,
     children: /* @__PURE__ */ jsxRuntime.jsx("div", {
       ref: innerRef,
-      className: css.cx(padding, boxShadow, border, next.useStyle({
+      className: css.cx(padding, boxShadow, border, reactPage.useStyle({
         display: "flex",
         flexWrap: "wrap",
         width: "100%"
-      }), next.useStyle(next.useResponsiveStyle([verticalAlign], ([alignContent = "flex-start"]) => ({
+      }), reactPage.useStyle(next.useResponsiveStyle([verticalAlign], ([alignContent = "flex-start"]) => ({
         alignContent
       })))),
       children: children && children.elements.length > 0 ? children.elements.map((child, index$1) => /* @__PURE__ */ jsxRuntime.jsx(index.GridItem, {

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 {\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 { useResponsiveStyle } 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      getDomNode() {\n        return boxElementObjectRef.current\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    useResponsiveStyle([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(useResponsiveStyle([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            useResponsiveStyle([verticalAlign], ([alignContent = 'flex-start']) => ({\n              alignContent,\n            })),\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","getDomNode","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","useResponsiveStyle","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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"}
+{"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 { useResponsiveStyle } 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      getDomNode() {\n        return boxElementObjectRef.current\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    useResponsiveStyle([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(useResponsiveStyle([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            useResponsiveStyle([verticalAlign], ([alignContent = 'flex-start']) => ({\n              alignContent,\n            })),\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","getDomNode","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","useResponsiveStyle","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

@@ -32,27 +32,27 @@ var __objRest = (source, exclude) => {
 import { forwardRef, useRef, useCallback, useImperativeHandle, useState, useEffect } from "react";
 import { cx } from "@emotion/css";
 import { v4 } from "uuid";
-import { n as useStyle, o as useResponsiveStyle, E as Element } from "./index.es.js";
+import { n as useResponsiveStyle, E as Element } from "./index.es.js";
+import { Z as useStyle } from "./react-page.es.js";
 import { jsx } from "react/jsx-runtime";
 import { a as useBoxAnimation, b as areBoxAnimationPropsEqual, B as BackgroundsContainer, G as GridItem } from "./index.es2.js";
 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 "redux";
-import "redux-thunk";
 import "./actions.es.js";
-import "./state/breakpoints.es.js";
-import "slate";
-import "is-hotkey";
-import "slate-react";
-import "@emotion/serialize";
-import "@emotion/utils";
 import "./text-input.es.js";
 import "./combobox.es.js";
+import "./select.es.js";
+import "slate";
 import "use-sync-external-store/shim";
+import "redux";
+import "redux-thunk";
 import "./types.es.js";
+import "./deepEqual.es.js";
+import "./state/breakpoints.es.js";
 import "color";
+import "@emotion/serialize";
+import "@emotion/utils";
 import "scroll-into-view-if-needed";
 import "react-dom";
 import "html-react-parser";

package/dist/Button.cjs.js

@@ -35,26 +35,26 @@ var React = require("react");
 var ColorHelper = require("color");
 var next = require("./index.cjs.js");
 var index = require("./index.cjs3.js");
+var reactPage = require("./react-page.cjs.js");
 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("redux");
-require("redux-thunk");
 require("./actions.cjs.js");
-require("./state/breakpoints.cjs.js");
-require("slate");
-require("is-hotkey");
-require("slate-react");
-require("@emotion/serialize");
-require("@emotion/utils");
 require("./text-input.cjs.js");
 require("./combobox.cjs.js");
+require("./select.cjs.js");
+require("slate");
 require("use-sync-external-store/shim");
+require("redux");
+require("redux-thunk");
 require("./types.cjs.js");
+require("./deepEqual.cjs.js");
+require("./state/breakpoints.cjs.js");
 require("./box-models.cjs.js");
 require("css-box-model");
+require("@emotion/serialize");
+require("@emotion/utils");
 require("scroll-into-view-if-needed");
 require("react-dom");
 require("html-react-parser");
@@ -109,7 +109,7 @@ const Button = React.forwardRef(function Button2(_a, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(Component, __spreadProps(__spreadValues({}, restOfProps), {
     ref,
     id,
-    className: css.cx(next.useStyle({
+    className: css.cx(reactPage.useStyle({
       display: "table",
       border: 0,
       outline: 0,
@@ -118,7 +118,7 @@ const Button = React.forwardRef(function Button2(_a, ref) {
       fontFamily: "inherit",
       textDecoration: "none",
       textAlign: "center"
-    }), next.useStyle(next.useResponsiveWidth(width, "auto")), margin, next.useStyle(next.useResponsiveStyle([variant, shape, size, textColor, color], ([variant2 = "flat", shape2 = "rounded", size2 = "medium", textColor2 = {
+    }), reactPage.useStyle(next.useResponsiveWidth(width, "auto")), margin, reactPage.useStyle(next.useResponsiveStyle([variant, shape, size, textColor, color], ([variant2 = "flat", shape2 = "rounded", size2 = "medium", textColor2 = {
       swatch: {
         hue: 0,
         saturation: 0,
@@ -278,7 +278,7 @@ const Button = React.forwardRef(function Button2(_a, ref) {
           }
         }
       }[variant2]);
-    })), next.useStyle(next.useResponsiveTextStyle(textStyle)), className),
+    })), reactPage.useStyle(next.useResponsiveTextStyle(textStyle)), className),
     link,
     children: children == null ? "Button Text" : children
   }));

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 {\n  useResponsiveStyle,\n  useResponsiveTextStyle,\n  useResponsiveWidth,\n} 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(useResponsiveWidth(width, 'auto')),\n        margin,\n        useStyle(\n          useResponsiveStyle(\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(useResponsiveTextStyle(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","useResponsiveWidth","useResponsiveStyle","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","useResponsiveTextStyle"],"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 {\n  useResponsiveStyle,\n  useResponsiveTextStyle,\n  useResponsiveWidth,\n} 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(useResponsiveWidth(width, 'auto')),\n        margin,\n        useStyle(\n          useResponsiveStyle(\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(useResponsiveTextStyle(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","useResponsiveWidth","useResponsiveStyle","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","useResponsiveTextStyle"],"mappings":"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"}

package/dist/Button.es.js

@@ -31,28 +31,28 @@ var __objRest = (source, exclude) => {
 };
 import { forwardRef } from "react";
 import ColorHelper from "color";
-import { n as useStyle, p as useResponsiveWidth, o as useResponsiveStyle, q as useResponsiveTextStyle, r as colorToString } from "./index.es.js";
+import { o as useResponsiveWidth, n as useResponsiveStyle, p as useResponsiveTextStyle, q as colorToString } from "./index.es.js";
 import { L as Link } from "./index.es3.js";
+import { Z as useStyle } from "./react-page.es.js";
 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 "redux";
-import "redux-thunk";
 import "./actions.es.js";
-import "./state/breakpoints.es.js";
-import "slate";
-import "is-hotkey";
-import "slate-react";
-import "@emotion/serialize";
-import "@emotion/utils";
 import "./text-input.es.js";
 import "./combobox.es.js";
+import "./select.es.js";
+import "slate";
 import "use-sync-external-store/shim";
+import "redux";
+import "redux-thunk";
 import "./types.es.js";
+import "./deepEqual.es.js";
+import "./state/breakpoints.es.js";
 import "./box-models.es.js";
 import "css-box-model";
+import "@emotion/serialize";
+import "@emotion/utils";
 import "scroll-into-view-if-needed";
 import "react-dom";
 import "html-react-parser";

package/dist/Carousel.cjs.js

@@ -37,28 +37,28 @@ var react = require("@use-gesture/react");
 var popcorn = require("@popmotion/popcorn");
 var next = require("./index.cjs.js");
 require("use-sync-external-store/shim");
-require("./react-page.cjs.js");
+var reactPage = require("./react-page.cjs.js");
 require("slate");
-var state_breakpoints = require("./state/breakpoints.cjs.js");
-require("is-hotkey");
-require("slate-react");
 var useMediaQuery = require("./useMediaQuery.cjs.js");
 var Image = require("./Image.cjs.js");
 var css = require("@emotion/css");
+var state_breakpoints = require("./state/breakpoints.cjs.js");
 var jsxRuntime = require("react/jsx-runtime");
 require("use-sync-external-store/shim/with-selector");
 require("next/dynamic");
 require("./actions.cjs.js");
-require("@emotion/serialize");
-require("@emotion/utils");
 require("./text-input.cjs.js");
 require("./combobox.cjs.js");
+require("./select.cjs.js");
 require("redux");
 require("redux-thunk");
 require("./types.cjs.js");
+require("./deepEqual.cjs.js");
 require("./box-models.cjs.js");
 require("css-box-model");
 require("color");
+require("@emotion/serialize");
+require("@emotion/utils");
 require("scroll-into-view-if-needed");
 require("react-dom");
 require("html-react-parser");
@@ -194,27 +194,27 @@ const Carousel = React.forwardRef(function Carousel2({
     const intervalId = setInterval(() => isLastPage ? setIndex(0) : paginate(1), delay * 1e3);
     return () => clearInterval(intervalId);
   }, [autoplay, delay, paginate, isLastPage]);
-  const clipMaskClassName = next.useStyle({
+  const clipMaskClassName = reactPage.useStyle({
     overflow: "hidden"
   });
-  const pageClassName = next.useStyle({
+  const pageClassName = reactPage.useStyle({
     position: "relative",
     width: "100%"
   });
-  const slideClassName = css.cx(next.useStyle({
+  const slideClassName = css.cx(reactPage.useStyle({
     display: "flex"
-  }), next.useStyle(next.useResponsiveStyle([responsivePageSize], ([pageSize2 = 1]) => ({
+  }), reactPage.useStyle(next.useResponsiveStyle([responsivePageSize], ([pageSize2 = 1]) => ({
     flexBasis: `${100 / pageSize2}%`,
     maxWidth: `${100 / pageSize2}%`,
     minWidth: `${100 / pageSize2}%`
-  }))), next.useStyle(next.useResponsiveStyle([slideAlignment], ([alignItems = "center"]) => ({
+  }))), reactPage.useStyle(next.useResponsiveStyle([slideAlignment], ([alignItems = "center"]) => ({
     alignItems
   }))));
-  const reelClassName = css.cx(next.useStyle({
+  const reelClassName = css.cx(reactPage.useStyle({
     display: "flex",
     position: "relative",
     flexWrap: "nowrap"
-  }), next.useStyle(next.useResponsiveStyle([gap], ([gap2 = {
+  }), reactPage.useStyle(next.useResponsiveStyle([gap], ([gap2 = {
     value: 0,
     unit: "px"
   }]) => ({
@@ -223,7 +223,7 @@ const Carousel = React.forwardRef(function Carousel2({
       padding: `0 ${`${gap2.value / 2}${gap2.unit}`}`
     }
   }))));
-  const arrowClassName = css.cx(next.useStyle({
+  const arrowClassName = css.cx(reactPage.useStyle({
     padding: 10,
     borderRadius: "50%",
     outline: 0,
@@ -235,7 +235,7 @@ const Carousel = React.forwardRef(function Carousel2({
     justifyContent: "center",
     cursor: "pointer",
     userSelect: "none"
-  }), next.useStyle(next.useResponsiveStyle([arrowBackground], ([background = {
+  }), reactPage.useStyle(next.useResponsiveStyle([arrowBackground], ([background = {
     swatch: {
       hue: 0,
       saturation: 0,
@@ -244,13 +244,13 @@ const Carousel = React.forwardRef(function Carousel2({
     alpha: 1
   }]) => ({
     background: next.colorToString(background)
-  }))), next.useStyle({
+  }))), reactPage.useStyle({
     svg: {
       transition: "transform 0.15s",
       stroke: "currentcolor"
     }
   }));
-  const slopClassName = css.cx(next.useStyle({
+  const slopClassName = css.cx(reactPage.useStyle({
     position: "absolute",
     top: 0,
     bottom: 0,
@@ -261,7 +261,7 @@ const Carousel = React.forwardRef(function Carousel2({
     alignItems: "center",
     cursor: "pointer",
     zIndex: 2
-  }), next.useStyle(next.useResponsiveStyle([arrowColor], ([color = {
+  }), reactPage.useStyle(next.useResponsiveStyle([arrowColor], ([color = {
     swatch: {
       hue: 0,
       saturation: 0,
@@ -271,7 +271,7 @@ const Carousel = React.forwardRef(function Carousel2({
   }]) => ({
     color: next.colorToString(color)
   }))));
-  const leftSlopClassName = css.cx(slopClassName, next.useStyle(next.useResponsiveStyle([arrowPosition], ([position = "inside"]) => {
+  const leftSlopClassName = css.cx(slopClassName, reactPage.useStyle(next.useResponsiveStyle([arrowPosition], ([position = "inside"]) => {
     switch (position) {
       case "inside":
         return {
@@ -286,7 +286,7 @@ const Carousel = React.forwardRef(function Carousel2({
           transform: "translateX(calc(-50%))"
         };
     }
-  })), next.useStyle({
+  })), reactPage.useStyle({
     left: 0,
     [`&:hover > .${arrowClassName}`]: {
       "& > svg": {
@@ -294,7 +294,7 @@ const Carousel = React.forwardRef(function Carousel2({
       }
     }
   }));
-  const rightSlopClassName = css.cx(slopClassName, next.useStyle(next.useResponsiveStyle([arrowPosition], ([position = "inside"]) => {
+  const rightSlopClassName = css.cx(slopClassName, reactPage.useStyle(next.useResponsiveStyle([arrowPosition], ([position = "inside"]) => {
     switch (position) {
       case "inside":
         return {
@@ -309,7 +309,7 @@ const Carousel = React.forwardRef(function Carousel2({
           transform: "translateX(calc(50%))"
         };
     }
-  })), next.useStyle({
+  })), reactPage.useStyle({
     right: 0,
     [`&:hover > .${arrowClassName}`]: {
       "& > svg": {
@@ -317,11 +317,11 @@ const Carousel = React.forwardRef(function Carousel2({
       }
     }
   }));
-  const dotsClassName = css.cx(next.useStyle({
+  const dotsClassName = css.cx(reactPage.useStyle({
     display: showDots ? "flex" : "none",
     justifyContent: "center",
     marginTop: 20
-  }), next.useStyle(next.useResponsiveStyle([dotColor], ([color = {
+  }), reactPage.useStyle(next.useResponsiveStyle([dotColor], ([color = {
     swatch: {
       hue: 0,
       saturation: 0,
@@ -333,11 +333,11 @@ const Carousel = React.forwardRef(function Carousel2({
   }))));
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     ref,
-    className: css.cx(next.useStyle({
+    className: css.cx(reactPage.useStyle({
       position: "relative",
       display: "flex",
       flexDirection: "column"
-    }), width, margin, next.useStyle({
+    }), width, margin, reactPage.useStyle({
       "&:focus": {
         outline: 0
       }
@@ -354,7 +354,7 @@ const Carousel = React.forwardRef(function Carousel2({
       }
     },
     children: [/* @__PURE__ */ jsxRuntime.jsxs("div", {
-      className: next.useStyle({
+      className: reactPage.useStyle({
         position: "relative",
         height: "100%"
       }),
@@ -440,7 +440,7 @@ function Dot(_a) {
     "active"
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
-    className: css.cx(next.useStyle({
+    className: css.cx(reactPage.useStyle({
       position: "relative",
       margin: "0 6px",
       borderRadius: "50%",