@makeswift/runtime 0.11.9 → 0.11.11

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Makeswift, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/Box.cjs.js

@@ -51,7 +51,7 @@ require("escape-html");
 require("slate-hyperscript");
 require("parse5");
 require("is-hotkey");
-require("./state/breakpoints.cjs.js");
+require("./breakpoints.cjs.js");
 require("use-sync-external-store/shim");
 require("redux");
 require("redux-thunk");

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

@@ -49,7 +49,7 @@ import "escape-html";
 import "slate-hyperscript";
 import "parse5";
 import "is-hotkey";
-import "./state/breakpoints.es.js";
+import "./breakpoints.es.js";
 import "use-sync-external-store/shim";
 import "redux";
 import "redux-thunk";

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 {\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","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 { 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","cx","display","alignSelf","flexWrap","alignContent","elements","length","map","child","index","columns"],"mappings":"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"}

package/dist/Button.cjs.js

@@ -51,7 +51,7 @@ require("escape-html");
 require("slate-hyperscript");
 require("parse5");
 require("is-hotkey");
-require("./state/breakpoints.cjs.js");
+require("./breakpoints.cjs.js");
 require("use-sync-external-store/shim");
 require("redux");
 require("redux-thunk");

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

@@ -49,7 +49,7 @@ import "escape-html";
 import "slate-hyperscript";
 import "parse5";
 import "is-hotkey";
-import "./state/breakpoints.es.js";
+import "./breakpoints.es.js";
 import "use-sync-external-store/shim";
 import "redux";
 import "redux-thunk";

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 {\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.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 {\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/Carousel.cjs.js

@@ -47,7 +47,7 @@ require("slate-hyperscript");
 require("parse5");
 require("is-hotkey");
 var jsxRuntime = require("react/jsx-runtime");
-var state_breakpoints = require("./state/breakpoints.cjs.js");
+var state_breakpoints = require("./breakpoints.cjs.js");
 var useMediaQuery = require("./useMediaQuery.cjs.js");
 var Image = require("./Image.cjs.js");
 var css = require("@emotion/css");

package/dist/Carousel.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.cjs.js","sources":["../src/components/builtin/Carousel/Carousel.tsx"],"sourcesContent":["import {\n  useState,\n  useRef,\n  useEffect,\n  useCallback,\n  forwardRef,\n  Ref,\n  ComponentPropsWithoutRef,\n} from 'react'\nimport { motion, useAnimation } from 'framer-motion'\nimport { useGesture } from '@use-gesture/react'\nimport { wrap } from '@popmotion/popcorn'\n\nimport { colorToString } from '../../utils/colorToString'\nimport { useMediaQuery } from '../../hooks'\n\nimport Image from '../Image'\nimport {\n  ElementIDValue,\n  ImagesValue,\n  ResponsiveNumberValue,\n  ResponsiveIconRadioGroupValue,\n  GapXValue,\n  CheckboxValue,\n  NumberValue,\n} from '../../../prop-controllers/descriptors'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { cx } from '@emotion/css'\nimport { useResponsiveStyle } from '../../utils/responsive-style'\nimport { getBaseBreakpoint } from '../../../state/modules/breakpoints'\nimport { useBreakpoints } from '../../../runtimes/react'\n\nconst LeftChevron = () => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"14\" viewBox=\"0 0 10 14\">\n    <path\n      d=\"M7,13,1,7,7,1\"\n      fill=\"none\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth=\"2\"\n    />\n  </svg>\n)\n\nconst RightChevron = () => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"14\" viewBox=\"0 0 10 14\">\n    <path\n      d=\"M3,1,9,7,3,13\"\n      fill=\"none\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth=\"2\"\n    />\n  </svg>\n)\n\ntype Props = {\n  id?: ElementIDValue\n  images?: ImagesValue\n  width?: string\n  margin?: string\n  pageSize?: ResponsiveNumberValue\n  step?: ResponsiveNumberValue\n  slideAlignment?: ResponsiveIconRadioGroupValue<'flex-start' | 'center' | 'flex-end'>\n  gap?: GapXValue\n  autoplay?: CheckboxValue\n  delay?: NumberValue\n  showArrows?: CheckboxValue\n  arrowPosition?: ResponsiveIconRadioGroupValue<'inside' | 'center' | 'outside'>\n  arrowColor?: ResponsiveColor | null\n  arrowBackground?: ResponsiveColor | null\n  showDots?: CheckboxValue\n  dotColor?: ResponsiveColor | null\n  slideBorder?: string\n  slideBorderRadius?: string\n}\n\nconst SWIPE_THRESHOLD = 20\nconst swipePower = (dx: number, velocity: number) => dx * (1 + velocity)\n\nconst Carousel = forwardRef(function Carousel(\n  {\n    images = [],\n    width,\n    margin,\n    pageSize: responsivePageSize,\n    step: responsiveStep,\n    gap,\n    slideAlignment,\n    showDots,\n    showArrows,\n    arrowPosition,\n    arrowColor,\n    arrowBackground,\n    dotColor,\n    autoplay = false,\n    delay = 5,\n    slideBorder,\n    slideBorderRadius,\n  }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  const breakpoints = useBreakpoints()\n  const [index, setIndex] = useState(0)\n  const swipe = useRef(0)\n  const startIndex = wrap(0, images.length, index)\n  const pageSize = useMediaQuery(responsivePageSize) || 1\n  const step = useMediaQuery(responsiveStep) || 1\n  const endIndex = startIndex + pageSize\n  const pageCount = Math.ceil((images.length - pageSize) / step + 1)\n  const pageIndex = Math.ceil(startIndex / step)\n  const isFirstPage = pageIndex === 0\n  const isLastPage = pageIndex === pageCount - 1\n  const paginate = useCallback(\n    (pageDistance: number) => {\n      if (pageDistance === 0) return\n\n      const direction = pageDistance / Math.abs(pageDistance)\n      const remaining = direction > 0 ? images.slice(endIndex) : images.slice(0, startIndex)\n      const distance = direction * Math.min(remaining.length, step * Math.abs(pageDistance))\n\n      setIndex(index + distance)\n    },\n    [images, index, startIndex, endIndex, step],\n  )\n  // @ts-expect-error: `useAnimation` types expect no arguments.\n  const animation = useAnimation({ x: 0, transition: { type: 'spring', stiffness: 100 } })\n  const bindPage = useGesture(\n    {\n      onDrag: ({ movement: [mx], delta: [dx], velocity: [vx] }) => {\n        animation.start({ x: mx })\n        swipe.current = swipePower(dx, vx)\n      },\n      onDragEnd: () => {\n        animation.start({ x: 0 })\n\n        if (swipe.current > SWIPE_THRESHOLD) paginate(1)\n        else if (swipe.current < -SWIPE_THRESHOLD) paginate(-1)\n      },\n    },\n    {\n      drag: {\n        axis: 'x',\n        bounds: { left: 0, right: 0 },\n        rubberband: true,\n      },\n    },\n  )\n\n  useEffect(() => {\n    if (!autoplay || pageSize !== 0) setIndex(0)\n  }, [autoplay, pageSize])\n\n  useEffect(() => {\n    if (!autoplay) return () => {}\n\n    const intervalId = setInterval(() => (isLastPage ? setIndex(0) : paginate(1)), delay * 1000)\n\n    return () => clearInterval(intervalId)\n  }, [autoplay, delay, paginate, isLastPage])\n\n  const clipMaskClassName = useStyle({ overflow: 'hidden' })\n  const pageClassName = useStyle({ position: 'relative', width: '100%' })\n  const slideClassName = cx(\n    useStyle({ display: 'flex' }),\n    useStyle(\n      useResponsiveStyle([responsivePageSize] as const, ([pageSize = 1]) => ({\n        flexBasis: `${100 / pageSize}%`,\n        maxWidth: `${100 / pageSize}%`,\n        minWidth: `${100 / pageSize}%`,\n      })),\n    ),\n    useStyle(\n      useResponsiveStyle([slideAlignment] as const, ([alignItems = 'center']) => ({ alignItems })),\n    ),\n  )\n  const reelClassName = cx(\n    useStyle({ display: 'flex', position: 'relative', flexWrap: 'nowrap' }),\n    useStyle(\n      useResponsiveStyle([gap] as const, ([gap = { value: 0, unit: 'px' }]) => ({\n        margin: `0 ${`${-gap.value / 2}${gap.unit}`}`,\n        [`& > .${slideClassName}`]: {\n          padding: `0 ${`${gap.value / 2}${gap.unit}`}`,\n        },\n      })),\n    ),\n  )\n  const arrowClassName = cx(\n    useStyle({\n      padding: 10,\n      borderRadius: '50%',\n      outline: 0,\n      border: 0,\n      width: 40,\n      height: 40,\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      cursor: 'pointer',\n      userSelect: 'none',\n    }),\n    useStyle(\n      useResponsiveStyle(\n        [arrowBackground] as const,\n        ([background = { swatch: { hue: 0, saturation: 0, lightness: 100 }, alpha: 1 }]) => ({\n          background: colorToString(background),\n        }),\n      ),\n    ),\n    useStyle({ svg: { transition: 'transform 0.15s', stroke: 'currentcolor' } }),\n  )\n  const slopClassName = cx(\n    useStyle({\n      position: 'absolute',\n      top: 0,\n      bottom: 0,\n\n      display: 'flex',\n      '&[hidden]': {\n        display: 'none',\n      },\n\n      alignItems: 'center',\n      cursor: 'pointer',\n      zIndex: 2,\n    }),\n    useStyle(\n      useResponsiveStyle(\n        [arrowColor] as const,\n        ([color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => ({\n          color: colorToString(color),\n        }),\n      ),\n    ),\n  )\n  const leftSlopClassName = cx(\n    slopClassName,\n    useStyle(\n      useResponsiveStyle([arrowPosition] as const, ([position = 'inside']) => {\n        switch (position) {\n          case 'inside':\n            return { transform: 'translateX(8px)' }\n\n          case 'outside':\n            return { transform: 'translateX(calc(-100% - 8px))' }\n\n          default:\n            return { transform: 'translateX(calc(-50%))' }\n        }\n      }),\n    ),\n    useStyle({\n      left: 0,\n\n      [`&:hover > .${arrowClassName}`]: {\n        '& > svg': {\n          transform: 'translateX(-2px)',\n        },\n      },\n    }),\n  )\n  const rightSlopClassName = cx(\n    slopClassName,\n    useStyle(\n      useResponsiveStyle([arrowPosition] as const, ([position = 'inside']) => {\n        switch (position) {\n          case 'inside':\n            return { transform: 'translateX(-8px)' }\n\n          case 'outside':\n            return { transform: 'translateX(calc(100% + 8px))' }\n\n          default:\n            return { transform: 'translateX(calc(50%))' }\n        }\n      }),\n    ),\n    useStyle({\n      right: 0,\n\n      [`&:hover > .${arrowClassName}`]: {\n        '& > svg': {\n          transform: 'translateX(2px)',\n        },\n      },\n    }),\n  )\n  const dotsClassName = cx(\n    useStyle({ display: showDots ? 'flex' : 'none', justifyContent: 'center', marginTop: 20 }),\n    useStyle(\n      useResponsiveStyle(\n        [dotColor] as const,\n        ([color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => ({\n          color: colorToString(color),\n        }),\n      ),\n    ),\n  )\n\n  return (\n    <div\n      ref={ref}\n      className={cx(\n        useStyle({ position: 'relative', display: 'flex', flexDirection: 'column' }),\n        width,\n        margin,\n        useStyle({ '&:focus': { outline: 0 } }),\n      )}\n      tabIndex={-1}\n      onKeyDown={e => {\n        switch (e.key) {\n          case 'ArrowRight':\n            paginate(1)\n            break\n          case 'ArrowLeft':\n            paginate(-1)\n            break\n          default:\n        }\n      }}\n    >\n      {/* NOTE: We set height to 100% here to fix an issue on IE11 where the child height of a flex column extends too far */}\n      <div className={useStyle({ position: 'relative', height: '100%' })}>\n        <div className={clipMaskClassName}>\n          {/* https://github.com/framer/motion/issues/1723 */}\n          {/* @ts-expect-error: React HTMLElement typings conflict with motion components */}\n          <motion.div {...bindPage()} className={pageClassName} animate={animation}>\n            <motion.div\n              className={reelClassName}\n              animate={{ x: `${-(100 / pageSize) * startIndex}%` }}\n              transition={{\n                x: {\n                  type: 'tween',\n                  ease: [0.165, 0.84, 0.44, 1],\n                  duration: 0.5,\n                },\n              }}\n            >\n              {images.map(({ props: imageProps, key }) => (\n                <motion.div\n                  id={key}\n                  key={key}\n                  className={slideClassName}\n                  onMouseDown={e => e.preventDefault()}\n                  onClick={e => {\n                    if (swipe.current !== 0) e.preventDefault()\n                  }}\n                >\n                  <Image\n                    width={[\n                      {\n                        deviceId: getBaseBreakpoint(breakpoints).id,\n                        value: { value: 100, unit: '%' },\n                      },\n                    ]}\n                    file={imageProps.file}\n                    altText={imageProps.altText}\n                    link={imageProps.link}\n                    border={slideBorder}\n                    borderRadius={slideBorderRadius}\n                  />\n                </motion.div>\n              ))}\n            </motion.div>\n          </motion.div>\n        </div>\n        <div\n          onClick={() => paginate(-1)}\n          className={leftSlopClassName}\n          hidden={!showArrows || isFirstPage}\n        >\n          <div className={arrowClassName}>\n            <LeftChevron />\n          </div>\n        </div>\n        <div\n          onClick={() => paginate(1)}\n          className={rightSlopClassName}\n          hidden={!showArrows || isLastPage}\n        >\n          <div className={arrowClassName}>\n            <RightChevron />\n          </div>\n        </div>\n      </div>\n      <div className={dotsClassName}>\n        {Array.from({ length: pageCount }).map((_, i) => (\n          <Dot key={i} active={i === pageIndex} onClick={() => paginate(i - pageIndex)} />\n        ))}\n      </div>\n    </div>\n  )\n})\n\nexport default Carousel\n\ntype DotBaseProps = {\n  className?: string\n  active: boolean\n}\n\ntype DotProps = DotBaseProps & Omit<ComponentPropsWithoutRef<'div'>, keyof DotBaseProps>\n\nfunction Dot({ className, active, ...restOfProps }: DotProps) {\n  return (\n    <div\n      {...restOfProps}\n      className={cx(\n        useStyle({\n          position: 'relative',\n          margin: '0 6px',\n          borderRadius: '50%',\n          cursor: 'pointer',\n          width: 16,\n          height: 16,\n\n          '&::before, &::after': {\n            content: '\"\"',\n            position: 'absolute',\n            top: '50%',\n            left: '50%',\n            display: 'block',\n            borderRadius: '50%',\n            transition: 'all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275)',\n          },\n\n          '&::before': {\n            boxShadow: '0 0 0 2px currentColor',\n            transform: 'translate3d(-50%, -50%, 0)',\n            width: active ? 16 : 10,\n            height: active ? 16 : 10,\n          },\n\n          '&::after': {\n            background: 'currentColor',\n            transform: `translate3d(-50%, -50%, 0) scale(${active ? 1 : 0})`,\n            width: 10,\n            height: 10,\n          },\n\n          '&:hover::after': {\n            transform: `translate3d(-50%, -50%, 0) scale(${active ? 1 : 0})`,\n          },\n        }),\n        className,\n      )}\n    />\n  )\n}\n"],"names":["LeftChevron","_jsx","RightChevron","SWIPE_THRESHOLD","swipePower","dx","velocity","Carousel","forwardRef","images","width","margin","pageSize","responsivePageSize","step","responsiveStep","gap","slideAlignment","showDots","showArrows","arrowPosition","arrowColor","arrowBackground","dotColor","autoplay","delay","slideBorder","slideBorderRadius","ref","breakpoints","useBreakpoints","index","setIndex","useState","swipe","useRef","startIndex","wrap","length","useMediaQuery","endIndex","pageCount","Math","ceil","pageIndex","isFirstPage","isLastPage","paginate","useCallback","pageDistance","direction","abs","remaining","slice","distance","min","animation","useAnimation","x","transition","type","stiffness","bindPage","useGesture","onDrag","movement","mx","delta","vx","start","current","onDragEnd","drag","axis","bounds","left","right","rubberband","useEffect","intervalId","setInterval","clearInterval","clipMaskClassName","useStyle","overflow","pageClassName","position","slideClassName","cx","display","useResponsiveStyle","flexBasis","maxWidth","minWidth","alignItems","reelClassName","flexWrap","value","unit","padding","arrowClassName","borderRadius","outline","border","height","justifyContent","cursor","userSelect","background","swatch","hue","saturation","lightness","alpha","colorToString","svg","stroke","slopClassName","top","bottom","zIndex","color","leftSlopClassName","transform","rightSlopClassName","dotsClassName","marginTop","flexDirection","e","key","_jsxs","motion","ease","duration","map","props","imageProps","preventDefault","Image","deviceId","getBaseBreakpoint","id","file","altText","link","Array","from","_","i","className","active","restOfProps","content","boxShadow"],"mappings":"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"}
+{"version":3,"file":"Carousel.cjs.js","sources":["../src/components/builtin/Carousel/Carousel.tsx"],"sourcesContent":["import {\n  useState,\n  useRef,\n  useEffect,\n  useCallback,\n  forwardRef,\n  Ref,\n  ComponentPropsWithoutRef,\n} from 'react'\nimport { motion, useAnimation } from 'framer-motion'\nimport { useGesture } from '@use-gesture/react'\nimport { wrap } from '@popmotion/popcorn'\n\nimport { colorToString } from '../../utils/colorToString'\nimport { useMediaQuery } from '../../hooks'\n\nimport Image from '../Image'\nimport {\n  ElementIDValue,\n  ImagesValue,\n  ResponsiveNumberValue,\n  ResponsiveIconRadioGroupValue,\n  GapXValue,\n  CheckboxValue,\n  NumberValue,\n} from '../../../prop-controllers/descriptors'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { cx } from '@emotion/css'\nimport { useResponsiveStyle } from '../../utils/responsive-style'\nimport { getBaseBreakpoint } from '../../../state/modules/breakpoints'\nimport { useBreakpoints } from '../../../runtimes/react'\n\nconst LeftChevron = () => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"14\" viewBox=\"0 0 10 14\">\n    <path\n      d=\"M7,13,1,7,7,1\"\n      fill=\"none\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth=\"2\"\n    />\n  </svg>\n)\n\nconst RightChevron = () => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"14\" viewBox=\"0 0 10 14\">\n    <path\n      d=\"M3,1,9,7,3,13\"\n      fill=\"none\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth=\"2\"\n    />\n  </svg>\n)\n\ntype Props = {\n  id?: ElementIDValue\n  images?: ImagesValue\n  width?: string\n  margin?: string\n  pageSize?: ResponsiveNumberValue\n  step?: ResponsiveNumberValue\n  slideAlignment?: ResponsiveIconRadioGroupValue<'flex-start' | 'center' | 'flex-end'>\n  gap?: GapXValue\n  autoplay?: CheckboxValue\n  delay?: NumberValue\n  showArrows?: CheckboxValue\n  arrowPosition?: ResponsiveIconRadioGroupValue<'inside' | 'center' | 'outside'>\n  arrowColor?: ResponsiveColor | null\n  arrowBackground?: ResponsiveColor | null\n  showDots?: CheckboxValue\n  dotColor?: ResponsiveColor | null\n  slideBorder?: string\n  slideBorderRadius?: string\n}\n\nconst SWIPE_THRESHOLD = 20\nconst swipePower = (dx: number, velocity: number) => dx * (1 + velocity)\n\nconst Carousel = forwardRef(function Carousel(\n  {\n    images = [],\n    width,\n    margin,\n    pageSize: responsivePageSize,\n    step: responsiveStep,\n    gap,\n    slideAlignment,\n    showDots,\n    showArrows,\n    arrowPosition,\n    arrowColor,\n    arrowBackground,\n    dotColor,\n    autoplay = false,\n    delay = 5,\n    slideBorder,\n    slideBorderRadius,\n  }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  const breakpoints = useBreakpoints()\n  const [index, setIndex] = useState(0)\n  const swipe = useRef(0)\n  const startIndex = wrap(0, images.length, index)\n  const pageSize = useMediaQuery(responsivePageSize) || 1\n  const step = useMediaQuery(responsiveStep) || 1\n  const endIndex = startIndex + pageSize\n  const pageCount = Math.ceil((images.length - pageSize) / step + 1)\n  const pageIndex = Math.ceil(startIndex / step)\n  const isFirstPage = pageIndex === 0\n  const isLastPage = pageIndex === pageCount - 1\n  const paginate = useCallback(\n    (pageDistance: number) => {\n      if (pageDistance === 0) return\n\n      const direction = pageDistance / Math.abs(pageDistance)\n      const remaining = direction > 0 ? images.slice(endIndex) : images.slice(0, startIndex)\n      const distance = direction * Math.min(remaining.length, step * Math.abs(pageDistance))\n\n      setIndex(index + distance)\n    },\n    [images, index, startIndex, endIndex, step],\n  )\n  // @ts-expect-error: `useAnimation` types expect no arguments.\n  const animation = useAnimation({ x: 0, transition: { type: 'spring', stiffness: 100 } })\n  const bindPage = useGesture(\n    {\n      onDrag: ({ movement: [mx], delta: [dx], velocity: [vx] }) => {\n        animation.start({ x: mx })\n        swipe.current = swipePower(dx, vx)\n      },\n      onDragEnd: () => {\n        animation.start({ x: 0 })\n\n        if (swipe.current > SWIPE_THRESHOLD) paginate(1)\n        else if (swipe.current < -SWIPE_THRESHOLD) paginate(-1)\n      },\n    },\n    {\n      drag: {\n        axis: 'x',\n        bounds: { left: 0, right: 0 },\n        rubberband: true,\n      },\n    },\n  )\n\n  useEffect(() => {\n    if (!autoplay || pageSize !== 0) setIndex(0)\n  }, [autoplay, pageSize])\n\n  useEffect(() => {\n    if (!autoplay) return () => {}\n\n    const intervalId = setInterval(() => (isLastPage ? setIndex(0) : paginate(1)), delay * 1000)\n\n    return () => clearInterval(intervalId)\n  }, [autoplay, delay, paginate, isLastPage])\n\n  const clipMaskClassName = useStyle({ overflow: 'hidden' })\n  const pageClassName = useStyle({ position: 'relative', width: '100%' })\n  const slideClassName = cx(\n    useStyle({ display: 'flex' }),\n    useStyle(\n      useResponsiveStyle([responsivePageSize] as const, ([pageSize = 1]) => ({\n        flexBasis: `${100 / pageSize}%`,\n        maxWidth: `${100 / pageSize}%`,\n        minWidth: `${100 / pageSize}%`,\n      })),\n    ),\n    useStyle(\n      useResponsiveStyle([slideAlignment] as const, ([alignItems = 'center']) => ({ alignItems })),\n    ),\n  )\n  const reelClassName = cx(\n    useStyle({ display: 'flex', position: 'relative', flexWrap: 'nowrap' }),\n    useStyle(\n      useResponsiveStyle([gap] as const, ([gap = { value: 0, unit: 'px' }]) => ({\n        margin: `0 ${`${-gap.value / 2}${gap.unit}`}`,\n        [`& > .${slideClassName}`]: {\n          padding: `0 ${`${gap.value / 2}${gap.unit}`}`,\n        },\n      })),\n    ),\n  )\n  const arrowClassName = cx(\n    useStyle({\n      padding: 10,\n      borderRadius: '50%',\n      outline: 0,\n      border: 0,\n      width: 40,\n      height: 40,\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      cursor: 'pointer',\n      userSelect: 'none',\n    }),\n    useStyle(\n      useResponsiveStyle(\n        [arrowBackground] as const,\n        ([background = { swatch: { hue: 0, saturation: 0, lightness: 100 }, alpha: 1 }]) => ({\n          background: colorToString(background),\n        }),\n      ),\n    ),\n    useStyle({ svg: { transition: 'transform 0.15s', stroke: 'currentcolor' } }),\n  )\n  const slopClassName = cx(\n    useStyle({\n      position: 'absolute',\n      top: 0,\n      bottom: 0,\n\n      display: 'flex',\n      '&[hidden]': {\n        display: 'none',\n      },\n\n      alignItems: 'center',\n      cursor: 'pointer',\n      zIndex: 2,\n    }),\n    useStyle(\n      useResponsiveStyle(\n        [arrowColor] as const,\n        ([color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => ({\n          color: colorToString(color),\n        }),\n      ),\n    ),\n  )\n  const leftSlopClassName = cx(\n    slopClassName,\n    useStyle(\n      useResponsiveStyle([arrowPosition] as const, ([position = 'inside']) => {\n        switch (position) {\n          case 'inside':\n            return { transform: 'translateX(8px)' }\n\n          case 'outside':\n            return { transform: 'translateX(calc(-100% - 8px))' }\n\n          default:\n            return { transform: 'translateX(calc(-50%))' }\n        }\n      }),\n    ),\n    useStyle({\n      left: 0,\n\n      [`&:hover > .${arrowClassName}`]: {\n        '& > svg': {\n          transform: 'translateX(-2px)',\n        },\n      },\n    }),\n  )\n  const rightSlopClassName = cx(\n    slopClassName,\n    useStyle(\n      useResponsiveStyle([arrowPosition] as const, ([position = 'inside']) => {\n        switch (position) {\n          case 'inside':\n            return { transform: 'translateX(-8px)' }\n\n          case 'outside':\n            return { transform: 'translateX(calc(100% + 8px))' }\n\n          default:\n            return { transform: 'translateX(calc(50%))' }\n        }\n      }),\n    ),\n    useStyle({\n      right: 0,\n\n      [`&:hover > .${arrowClassName}`]: {\n        '& > svg': {\n          transform: 'translateX(2px)',\n        },\n      },\n    }),\n  )\n  const dotsClassName = cx(\n    useStyle({ display: showDots ? 'flex' : 'none', justifyContent: 'center', marginTop: 20 }),\n    useStyle(\n      useResponsiveStyle(\n        [dotColor] as const,\n        ([color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => ({\n          color: colorToString(color),\n        }),\n      ),\n    ),\n  )\n\n  return (\n    <div\n      ref={ref}\n      className={cx(\n        useStyle({ position: 'relative', display: 'flex', flexDirection: 'column' }),\n        width,\n        margin,\n        useStyle({ '&:focus': { outline: 0 } }),\n      )}\n      tabIndex={-1}\n      onKeyDown={e => {\n        switch (e.key) {\n          case 'ArrowRight':\n            paginate(1)\n            break\n          case 'ArrowLeft':\n            paginate(-1)\n            break\n          default:\n        }\n      }}\n    >\n      {/* NOTE: We set height to 100% here to fix an issue on IE11 where the child height of a flex column extends too far */}\n      <div className={useStyle({ position: 'relative', height: '100%' })}>\n        <div className={clipMaskClassName}>\n          {/* https://github.com/framer/motion/issues/1723 */}\n          {/* @ts-expect-error: React HTMLElement typings conflict with motion components */}\n          <motion.div {...bindPage()} className={pageClassName} animate={animation}>\n            <motion.div\n              className={reelClassName}\n              animate={{ x: `${-(100 / pageSize) * startIndex}%` }}\n              transition={{\n                x: {\n                  type: 'tween',\n                  ease: [0.165, 0.84, 0.44, 1],\n                  duration: 0.5,\n                },\n              }}\n            >\n              {images.map(({ props: imageProps, key }) => (\n                <motion.div\n                  id={key}\n                  key={key}\n                  className={slideClassName}\n                  onMouseDown={e => e.preventDefault()}\n                  onClick={e => {\n                    if (swipe.current !== 0) e.preventDefault()\n                  }}\n                >\n                  <Image\n                    width={[\n                      {\n                        deviceId: getBaseBreakpoint(breakpoints).id,\n                        value: { value: 100, unit: '%' },\n                      },\n                    ]}\n                    file={imageProps.file}\n                    altText={imageProps.altText}\n                    link={imageProps.link}\n                    border={slideBorder}\n                    borderRadius={slideBorderRadius}\n                  />\n                </motion.div>\n              ))}\n            </motion.div>\n          </motion.div>\n        </div>\n        <div\n          onClick={() => paginate(-1)}\n          className={leftSlopClassName}\n          hidden={!showArrows || isFirstPage}\n        >\n          <div className={arrowClassName}>\n            <LeftChevron />\n          </div>\n        </div>\n        <div\n          onClick={() => paginate(1)}\n          className={rightSlopClassName}\n          hidden={!showArrows || isLastPage}\n        >\n          <div className={arrowClassName}>\n            <RightChevron />\n          </div>\n        </div>\n      </div>\n      <div className={dotsClassName}>\n        {Array.from({ length: pageCount }).map((_, i) => (\n          <Dot key={i} active={i === pageIndex} onClick={() => paginate(i - pageIndex)} />\n        ))}\n      </div>\n    </div>\n  )\n})\n\nexport default Carousel\n\ntype DotBaseProps = {\n  className?: string\n  active: boolean\n}\n\ntype DotProps = DotBaseProps & Omit<ComponentPropsWithoutRef<'div'>, keyof DotBaseProps>\n\nfunction Dot({ className, active, ...restOfProps }: DotProps) {\n  return (\n    <div\n      {...restOfProps}\n      className={cx(\n        useStyle({\n          position: 'relative',\n          margin: '0 6px',\n          borderRadius: '50%',\n          cursor: 'pointer',\n          width: 16,\n          height: 16,\n\n          '&::before, &::after': {\n            content: '\"\"',\n            position: 'absolute',\n            top: '50%',\n            left: '50%',\n            display: 'block',\n            borderRadius: '50%',\n            transition: 'all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275)',\n          },\n\n          '&::before': {\n            boxShadow: '0 0 0 2px currentColor',\n            transform: 'translate3d(-50%, -50%, 0)',\n            width: active ? 16 : 10,\n            height: active ? 16 : 10,\n          },\n\n          '&::after': {\n            background: 'currentColor',\n            transform: `translate3d(-50%, -50%, 0) scale(${active ? 1 : 0})`,\n            width: 10,\n            height: 10,\n          },\n\n          '&:hover::after': {\n            transform: `translate3d(-50%, -50%, 0) scale(${active ? 1 : 0})`,\n          },\n        }),\n        className,\n      )}\n    />\n  )\n}\n"],"names":["LeftChevron","_jsx","RightChevron","SWIPE_THRESHOLD","swipePower","dx","velocity","Carousel","forwardRef","images","width","margin","pageSize","responsivePageSize","step","responsiveStep","gap","slideAlignment","showDots","showArrows","arrowPosition","arrowColor","arrowBackground","dotColor","autoplay","delay","slideBorder","slideBorderRadius","ref","breakpoints","useBreakpoints","index","setIndex","useState","swipe","useRef","startIndex","wrap","length","useMediaQuery","endIndex","pageCount","Math","ceil","pageIndex","isFirstPage","isLastPage","paginate","useCallback","pageDistance","direction","abs","remaining","slice","distance","min","animation","useAnimation","x","transition","type","stiffness","bindPage","useGesture","onDrag","movement","mx","delta","vx","start","current","onDragEnd","drag","axis","bounds","left","right","rubberband","useEffect","intervalId","setInterval","clearInterval","clipMaskClassName","useStyle","overflow","pageClassName","position","slideClassName","cx","display","useResponsiveStyle","flexBasis","maxWidth","minWidth","alignItems","reelClassName","flexWrap","value","unit","padding","arrowClassName","borderRadius","outline","border","height","justifyContent","cursor","userSelect","background","swatch","hue","saturation","lightness","alpha","colorToString","svg","stroke","slopClassName","top","bottom","zIndex","color","leftSlopClassName","transform","rightSlopClassName","dotsClassName","marginTop","flexDirection","e","key","_jsxs","motion","ease","duration","map","props","imageProps","preventDefault","Image","deviceId","getBaseBreakpoint","id","file","altText","link","Array","from","_","i","className","active","restOfProps","content","boxShadow"],"mappings":"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"}

package/dist/Carousel.es.js

@@ -45,7 +45,7 @@ import "slate-hyperscript";
 import "parse5";
 import "is-hotkey";
 import { jsxs, jsx } from "react/jsx-runtime";
-import { getBaseBreakpoint } from "./state/breakpoints.es.js";
+import { a as getBaseBreakpoint } from "./breakpoints.es.js";
 import { u as useMediaQuery } from "./useMediaQuery.es.js";
 import ImageComponent from "./Image.es.js";
 import { cx } from "@emotion/css";