npm - @makeswift/runtime - Versions diffs - 0.23.5 → 0.23.6-canary.1 - Mend

@makeswift/runtime 0.23.5 → 0.23.6-canary.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (105) hide show

package/dist/cjs/components/builtin/Box/register.js CHANGED Viewed

@@ -32,7 +32,7 @@ __export(register_exports, {
 });
 module.exports = __toCommonJS(register_exports);
 var import_prop_controllers = require("@makeswift/prop-controllers");
-var import_breakpoints = require("../../../state/modules/breakpoints");
+var import_controls = require("@makeswift/controls");
 var import_constants = require("../constants");
 var import_constants2 = require("./constants");
 var import_react2 = require("react");
@@ -41,7 +41,7 @@ function registerComponent(runtime) {
     const animateIn = import_prop_controllers.ResponsiveSelect.fromPropData(
       props[property]
     );
-    return ((0, import_breakpoints.findBreakpointOverride)(runtime.getBreakpoints(), animateIn, deviceId)?.value ?? "none") === "none";
+    return ((0, import_controls.findBreakpointOverride)(runtime.getBreakpoints(), animateIn, deviceId)?.value ?? "none") === "none";
   }
   const isHiddenBasedOnBoxAnimation = (props, deviceId) => isHiddenBasedOnAnimationType(props, deviceId, "boxAnimateType");
   const isHiddenBasedOnItemAnimation = (props, deviceId) => isHiddenBasedOnAnimationType(props, deviceId, "itemAnimateType");
@@ -84,7 +84,7 @@ function registerComponent(runtime) {
           format: import_prop_controllers.Padding.Format.ClassName,
           preset: [
             {
-              deviceId: (0, import_breakpoints.getBaseBreakpoint)(runtime.getBreakpoints()).id,
+              deviceId: (0, import_controls.getBaseBreakpoint)(runtime.getBreakpoints()).id,
               value: {
                 paddingTop: { value: 10, unit: "px" },
                 paddingRight: { value: 10, unit: "px" },

package/dist/cjs/components/builtin/Box/register.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/components/builtin/Box/register.ts"],"sourcesContent":["import {\n Backgrounds,\n Border,\n BorderRadius,\n Checkbox,\n ElementID,\n GapX,\n GapY,\n Grid,\n Margin,\n Padding,\n ResponsiveIconRadioGroup,\n ResponsiveNumber,\n ResponsiveSelect,\n Shadows,\n Width,\n type PropData,\n} from '@makeswift/prop-controllers'\nimport { ReactRuntime } from '../../../runtimes/react'\nimport { findBreakpointOverride, getBaseBreakpoint } from '../../../state/modules/breakpoints'\nimport { MakeswiftComponentType } from '../constants'\nimport {\n BoxAnimateIn,\n DEFAULT_BOX_ANIMATE_DELAY,\n DEFAULT_BOX_ANIMATE_DURATION,\n DEFAULT_ITEM_ANIMATE_DELAY,\n DEFAULT_ITEM_STAGGER_DURATION,\n} from './constants'\nimport { lazy } from 'react'\n\nexport function registerComponent(runtime: ReactRuntime) {\n function isHiddenBasedOnAnimationType(\n props: Record<string, unknown>,\n deviceId: string,\n property: 'boxAnimateType' \| 'itemAnimateType',\n ): boolean {\n const animateIn = ResponsiveSelect.fromPropData<BoxAnimateIn>(\n props[property] as PropData<typeof ResponsiveSelect> \| undefined,\n )\n return (\n (findBreakpointOverride<BoxAnimateIn>(runtime.getBreakpoints(), animateIn, deviceId)?.value ??\n 'none') === 'none'\n )\n }\n const isHiddenBasedOnBoxAnimation = (props: Record<string, unknown>, deviceId: string) =>\n isHiddenBasedOnAnimationType(props, deviceId, 'boxAnimateType')\n const isHiddenBasedOnItemAnimation = (props: Record<string, unknown>, deviceId: string) =>\n isHiddenBasedOnAnimationType(props, deviceId, 'itemAnimateType')\n\n return runtime.registerComponent(\n lazy(() => import('./Box')),\n {\n type: MakeswiftComponentType.Box,\n label: 'Box',\n props: {\n id: ElementID(),\n backgrounds: Backgrounds(),\n width: Width({\n format: Width.Format.ClassName,\n defaultValue: { value: 100, unit: '%' },\n }),\n height: ResponsiveIconRadioGroup({\n label: 'Height',\n options: [\n { value: 'auto', label: 'Auto', icon: 'HeightAuto16' },\n { value: 'stretch', label: 'Stretch', icon: 'HeightMatch16' },\n ],\n defaultValue: 'auto',\n }),\n verticalAlign: ResponsiveIconRadioGroup({\n label: 'Align items',\n options: [\n { value: 'flex-start', label: 'Top', icon: 'VerticalAlignStart16' },\n { value: 'center', label: 'Middle', icon: 'VerticalAlignMiddle16' },\n { value: 'flex-end', label: 'Bottom', icon: 'VerticalAlignEnd16' },\n {\n value: 'space-between',\n label: 'Space between',\n icon: 'VerticalAlignSpaceBetween16',\n },\n ],\n defaultValue: 'flex-start',\n }),\n margin: Margin({ format: Margin.Format.ClassName }),\n padding: Padding({\n format: Padding.Format.ClassName,\n preset: [\n {\n deviceId: getBaseBreakpoint(runtime.getBreakpoints()).id,\n value: {\n paddingTop: { value: 10, unit: 'px' },\n paddingRight: { value: 10, unit: 'px' },\n paddingBottom: { value: 10, unit: 'px' },\n paddingLeft: { value: 10, unit: 'px' },\n },\n },\n ],\n }),\n border: Border({ format: Border.Format.ClassName }),\n borderRadius: BorderRadius({ format: BorderRadius.Format.ClassName }),\n boxShadow: Shadows({ format: Shadows.Format.ClassName }),\n rowGap: GapY(props => ({\n hidden: props.children == null,\n })),\n columnGap: GapX(props => ({\n hidden: props.children == null,\n })),\n boxAnimateType: ResponsiveSelect({\n label: 'Animate box in',\n labelOrientation: 'vertical',\n options: [\n { value: 'none', label: 'None' },\n { value: 'fadeIn', label: 'Fade in' },\n { value: 'fadeRight', label: 'Fade right' },\n { value: 'fadeDown', label: 'Fade down' },\n { value: 'fadeLeft', label: 'Fade left' },\n { value: 'fadeUp', label: 'Fade up' },\n { value: 'blurIn', label: 'Blur in' },\n { value: 'scaleUp', label: 'Scale up' },\n { value: 'scaleDown', label: 'Scale down' },\n ],\n defaultValue: 'none',\n }),\n boxAnimateDuration: ResponsiveNumber((props, device) => ({\n label: 'Box duration',\n defaultValue: DEFAULT_BOX_ANIMATE_DURATION,\n min: 0.1,\n step: 0.05,\n suffix: 's',\n hidden: isHiddenBasedOnBoxAnimation(props, device),\n })),\n boxAnimateDelay: ResponsiveNumber((props, device) => ({\n label: 'Box delay',\n defaultValue: DEFAULT_BOX_ANIMATE_DELAY,\n min: 0,\n step: 0.05,\n suffix: 's',\n hidden: isHiddenBasedOnBoxAnimation(props, device),\n })),\n itemAnimateType: ResponsiveSelect({\n label: 'Animate items in',\n labelOrientation: 'vertical',\n options: [\n { value: 'none', label: 'None' },\n { value: 'fadeIn', label: 'Fade in' },\n { value: 'fadeRight', label: 'Fade right' },\n { value: 'fadeDown', label: 'Fade down' },\n { value: 'fadeLeft', label: 'Fade left' },\n { value: 'fadeUp', label: 'Fade up' },\n { value: 'blurIn', label: 'Blur in' },\n { value: 'scaleUp', label: 'Scale up' },\n { value: 'scaleDown', label: 'Scale down' },\n ],\n defaultValue: 'none',\n }),\n itemAnimateDuration: ResponsiveNumber((props, device) => ({\n label: 'Items duration',\n defaultValue: DEFAULT_BOX_ANIMATE_DURATION,\n min: 0.1,\n step: 0.05,\n suffix: 's',\n hidden: isHiddenBasedOnItemAnimation(props, device),\n })),\n itemAnimateDelay: ResponsiveNumber((props, device) => ({\n label: 'Items delay',\n defaultValue: DEFAULT_ITEM_ANIMATE_DELAY,\n min: 0,\n step: 0.05,\n suffix: 's',\n hidden: isHiddenBasedOnItemAnimation(props, device),\n })),\n itemStaggerDuration: ResponsiveNumber((props, device) => ({\n label: 'Stagger',\n min: 0,\n step: 0.05,\n suffix: 's',\n defaultValue: DEFAULT_ITEM_STAGGER_DURATION,\n hidden: isHiddenBasedOnItemAnimation(props, device),\n })),\n hidePlaceholder: Checkbox(props => ({\n label: 'Hide placeholder',\n hidden: props.children != null,\n })),\n children: Grid(),\n },\n },\n )\n}\n"],"mappings":"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","names":["import_constants","import_react"]}
1	+ {"version":3,"sources":["../../../../../src/components/builtin/Box/register.ts"],"sourcesContent":["import {\n Backgrounds,\n Border,\n BorderRadius,\n Checkbox,\n ElementID,\n GapX,\n GapY,\n Grid,\n Margin,\n Padding,\n ResponsiveIconRadioGroup,\n ResponsiveNumber,\n ResponsiveSelect,\n Shadows,\n Width,\n type PropData,\n} from '@makeswift/prop-controllers'\nimport { findBreakpointOverride, getBaseBreakpoint } from '@makeswift/controls'\n\nimport { ReactRuntime } from '../../../runtimes/react'\nimport { MakeswiftComponentType } from '../constants'\nimport {\n BoxAnimateIn,\n DEFAULT_BOX_ANIMATE_DELAY,\n DEFAULT_BOX_ANIMATE_DURATION,\n DEFAULT_ITEM_ANIMATE_DELAY,\n DEFAULT_ITEM_STAGGER_DURATION,\n} from './constants'\nimport { lazy } from 'react'\n\nexport function registerComponent(runtime: ReactRuntime) {\n function isHiddenBasedOnAnimationType(\n props: Record<string, unknown>,\n deviceId: string,\n property: 'boxAnimateType' \| 'itemAnimateType',\n ): boolean {\n const animateIn = ResponsiveSelect.fromPropData<BoxAnimateIn>(\n props[property] as PropData<typeof ResponsiveSelect> \| undefined,\n )\n return (\n (findBreakpointOverride<BoxAnimateIn>(runtime.getBreakpoints(), animateIn, deviceId)?.value ??\n 'none') === 'none'\n )\n }\n const isHiddenBasedOnBoxAnimation = (props: Record<string, unknown>, deviceId: string) =>\n isHiddenBasedOnAnimationType(props, deviceId, 'boxAnimateType')\n const isHiddenBasedOnItemAnimation = (props: Record<string, unknown>, deviceId: string) =>\n isHiddenBasedOnAnimationType(props, deviceId, 'itemAnimateType')\n\n return runtime.registerComponent(\n lazy(() => import('./Box')),\n {\n type: MakeswiftComponentType.Box,\n label: 'Box',\n props: {\n id: ElementID(),\n backgrounds: Backgrounds(),\n width: Width({\n format: Width.Format.ClassName,\n defaultValue: { value: 100, unit: '%' },\n }),\n height: ResponsiveIconRadioGroup({\n label: 'Height',\n options: [\n { value: 'auto', label: 'Auto', icon: 'HeightAuto16' },\n { value: 'stretch', label: 'Stretch', icon: 'HeightMatch16' },\n ],\n defaultValue: 'auto',\n }),\n verticalAlign: ResponsiveIconRadioGroup({\n label: 'Align items',\n options: [\n { value: 'flex-start', label: 'Top', icon: 'VerticalAlignStart16' },\n { value: 'center', label: 'Middle', icon: 'VerticalAlignMiddle16' },\n { value: 'flex-end', label: 'Bottom', icon: 'VerticalAlignEnd16' },\n {\n value: 'space-between',\n label: 'Space between',\n icon: 'VerticalAlignSpaceBetween16',\n },\n ],\n defaultValue: 'flex-start',\n }),\n margin: Margin({ format: Margin.Format.ClassName }),\n padding: Padding({\n format: Padding.Format.ClassName,\n preset: [\n {\n deviceId: getBaseBreakpoint(runtime.getBreakpoints()).id,\n value: {\n paddingTop: { value: 10, unit: 'px' },\n paddingRight: { value: 10, unit: 'px' },\n paddingBottom: { value: 10, unit: 'px' },\n paddingLeft: { value: 10, unit: 'px' },\n },\n },\n ],\n }),\n border: Border({ format: Border.Format.ClassName }),\n borderRadius: BorderRadius({ format: BorderRadius.Format.ClassName }),\n boxShadow: Shadows({ format: Shadows.Format.ClassName }),\n rowGap: GapY(props => ({\n hidden: props.children == null,\n })),\n columnGap: GapX(props => ({\n hidden: props.children == null,\n })),\n boxAnimateType: ResponsiveSelect({\n label: 'Animate box in',\n labelOrientation: 'vertical',\n options: [\n { value: 'none', label: 'None' },\n { value: 'fadeIn', label: 'Fade in' },\n { value: 'fadeRight', label: 'Fade right' },\n { value: 'fadeDown', label: 'Fade down' },\n { value: 'fadeLeft', label: 'Fade left' },\n { value: 'fadeUp', label: 'Fade up' },\n { value: 'blurIn', label: 'Blur in' },\n { value: 'scaleUp', label: 'Scale up' },\n { value: 'scaleDown', label: 'Scale down' },\n ],\n defaultValue: 'none',\n }),\n boxAnimateDuration: ResponsiveNumber((props, device) => ({\n label: 'Box duration',\n defaultValue: DEFAULT_BOX_ANIMATE_DURATION,\n min: 0.1,\n step: 0.05,\n suffix: 's',\n hidden: isHiddenBasedOnBoxAnimation(props, device),\n })),\n boxAnimateDelay: ResponsiveNumber((props, device) => ({\n label: 'Box delay',\n defaultValue: DEFAULT_BOX_ANIMATE_DELAY,\n min: 0,\n step: 0.05,\n suffix: 's',\n hidden: isHiddenBasedOnBoxAnimation(props, device),\n })),\n itemAnimateType: ResponsiveSelect({\n label: 'Animate items in',\n labelOrientation: 'vertical',\n options: [\n { value: 'none', label: 'None' },\n { value: 'fadeIn', label: 'Fade in' },\n { value: 'fadeRight', label: 'Fade right' },\n { value: 'fadeDown', label: 'Fade down' },\n { value: 'fadeLeft', label: 'Fade left' },\n { value: 'fadeUp', label: 'Fade up' },\n { value: 'blurIn', label: 'Blur in' },\n { value: 'scaleUp', label: 'Scale up' },\n { value: 'scaleDown', label: 'Scale down' },\n ],\n defaultValue: 'none',\n }),\n itemAnimateDuration: ResponsiveNumber((props, device) => ({\n label: 'Items duration',\n defaultValue: DEFAULT_BOX_ANIMATE_DURATION,\n min: 0.1,\n step: 0.05,\n suffix: 's',\n hidden: isHiddenBasedOnItemAnimation(props, device),\n })),\n itemAnimateDelay: ResponsiveNumber((props, device) => ({\n label: 'Items delay',\n defaultValue: DEFAULT_ITEM_ANIMATE_DELAY,\n min: 0,\n step: 0.05,\n suffix: 's',\n hidden: isHiddenBasedOnItemAnimation(props, device),\n })),\n itemStaggerDuration: ResponsiveNumber((props, device) => ({\n label: 'Stagger',\n min: 0,\n step: 0.05,\n suffix: 's',\n defaultValue: DEFAULT_ITEM_STAGGER_DURATION,\n hidden: isHiddenBasedOnItemAnimation(props, device),\n })),\n hidePlaceholder: Checkbox(props => ({\n label: 'Hide placeholder',\n hidden: props.children != null,\n })),\n children: Grid(),\n },\n },\n )\n}\n"],"mappings":"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","names":["import_constants","import_react"]}

package/dist/cjs/components/builtin/Button/register.js CHANGED Viewed

@@ -32,7 +32,7 @@ __export(register_exports, {
 });
 module.exports = __toCommonJS(register_exports);
 var import_prop_controllers = require("@makeswift/prop-controllers");
-var import_breakpoints = require("../../../state/modules/breakpoints");
+var import_controls = require("@makeswift/controls");
 var import_constants = require("../constants");
 var import_react2 = require("react");
 function registerComponent(runtime) {
@@ -89,7 +89,7 @@ function registerComponent(runtime) {
           const variant = import_prop_controllers.ResponsiveSelect.fromPropData(
             props.variant
           );
-          const hidden = (0, import_breakpoints.findBreakpointOverride)(runtime.getBreakpoints(), variant, device)?.value === "clear";
+          const hidden = (0, import_controls.findBreakpointOverride)(runtime.getBreakpoints(), variant, device)?.value === "clear";
           return { placeholder: "black", hidden };
         }),
         textColor: (0, import_prop_controllers.ResponsiveColor)({

package/dist/cjs/components/builtin/Button/register.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/components/builtin/Button/register.ts"],"sourcesContent":["import {\n ElementID,\n Link,\n Margin,\n ResponsiveColor,\n ResponsiveIconRadioGroup,\n ResponsiveSelect,\n TextInput,\n TextStyle,\n Width,\n type PropData,\n} from '@makeswift/prop-controllers'\nimport { ~~ReactRuntime~~ } from '~~../../../runtimes~~/~~react~~'\nimport { ~~findBreakpointOverride~~ } from '../../../~~state~~/~~modules/breakpoints~~'\nimport { MakeswiftComponentType } from '../constants'\nimport { ButtonVariant } from './contants'\nimport { lazy } from 'react'\n\nexport function registerComponent(runtime: ReactRuntime) {\n return runtime.registerComponent(\n lazy(() => import('./Button')),\n {\n type: MakeswiftComponentType.Button,\n label: 'Button',\n props: {\n id: ElementID(),\n children: TextInput({ placeholder: 'Button text' }),\n link: Link({\n defaultValue: {\n type: 'OPEN_PAGE',\n payload: {\n pageId: null,\n openInNewTab: false,\n },\n },\n }),\n variant: ResponsiveSelect({\n label: 'Style',\n labelOrientation: 'horizontal',\n options: [\n { value: 'flat', label: 'Flat' },\n { value: 'outline', label: 'Outline' },\n { value: 'shadow', label: 'Floating' },\n { value: 'clear', label: 'Clear' },\n { value: 'blocky', label: 'Blocky' },\n { value: 'bubbly', label: 'Bubbly' },\n { value: 'skewed', label: 'Skewed' },\n ],\n defaultValue: 'flat',\n }),\n shape: ResponsiveIconRadioGroup({\n label: 'Shape',\n options: [\n { label: 'Pill', value: 'pill', icon: 'ButtonPill16' },\n { label: 'Rounded', value: 'rounded', icon: 'ButtonRounded16' },\n { label: 'Square', value: 'square', icon: 'ButtonSquare16' },\n ],\n defaultValue: 'rounded',\n }),\n size: ResponsiveIconRadioGroup({\n label: 'Size',\n options: [\n { label: 'Small', value: 'small', icon: 'SizeSmall16' },\n { label: 'Medium', value: 'medium', icon: 'SizeMedium16' },\n { label: 'Large', value: 'large', icon: 'SizeLarge16' },\n ],\n defaultValue: 'medium',\n }),\n color: ResponsiveColor((props, device) => {\n const variant = ResponsiveSelect.fromPropData<ButtonVariant>(\n props.variant as PropData<typeof ResponsiveSelect> \| undefined,\n )\n const hidden =\n findBreakpointOverride<ButtonVariant>(runtime.getBreakpoints(), variant, device)\n ?.value === 'clear'\n\n return { placeholder: 'black', hidden }\n }),\n textColor: ResponsiveColor({\n label: 'Text color',\n placeholder: 'white',\n }),\n textStyle: TextStyle(),\n width: Width(),\n margin: Margin({ format: Margin.Format.ClassName }),\n },\n },\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAWO;~~AAEP~~,~~yBAAuC~~;~~AACvC~~,uBAAuC;AAEvC,IAAAA,gBAAqB;AAEd,SAAS,kBAAkB,SAAuB;AACvD,SAAO,QAAQ;AAAA,QACb,oBAAK,MAAM,6CAAO,UAAU,GAAC;AAAA,IAC7B;AAAA,MACE,MAAM,wCAAuB;AAAA,MAC7B,OAAO;AAAA,MACP,OAAO;AAAA,QACL,QAAI,mCAAU;AAAA,QACd,cAAU,mCAAU,EAAE,aAAa,cAAc,CAAC;AAAA,QAClD,UAAM,8BAAK;AAAA,UACT,cAAc;AAAA,YACZ,MAAM;AAAA,YACN,SAAS;AAAA,cACP,QAAQ;AAAA,cACR,cAAc;AAAA,YAChB;AAAA,UACF;AAAA,QACF,CAAC;AAAA,QACD,aAAS,0CAAiB;AAAA,UACxB,OAAO;AAAA,UACP,kBAAkB;AAAA,UAClB,SAAS;AAAA,YACP,EAAE,OAAO,QAAQ,OAAO,OAAO;AAAA,YAC/B,EAAE,OAAO,WAAW,OAAO,UAAU;AAAA,YACrC,EAAE,OAAO,UAAU,OAAO,WAAW;AAAA,YACrC,EAAE,OAAO,SAAS,OAAO,QAAQ;AAAA,YACjC,EAAE,OAAO,UAAU,OAAO,SAAS;AAAA,YACnC,EAAE,OAAO,UAAU,OAAO,SAAS;AAAA,YACnC,EAAE,OAAO,UAAU,OAAO,SAAS;AAAA,UACrC;AAAA,UACA,cAAc;AAAA,QAChB,CAAC;AAAA,QACD,WAAO,kDAAyB;AAAA,UAC9B,OAAO;AAAA,UACP,SAAS;AAAA,YACP,EAAE,OAAO,QAAQ,OAAO,QAAQ,MAAM,eAAe;AAAA,YACrD,EAAE,OAAO,WAAW,OAAO,WAAW,MAAM,kBAAkB;AAAA,YAC9D,EAAE,OAAO,UAAU,OAAO,UAAU,MAAM,iBAAiB;AAAA,UAC7D;AAAA,UACA,cAAc;AAAA,QAChB,CAAC;AAAA,QACD,UAAM,kDAAyB;AAAA,UAC7B,OAAO;AAAA,UACP,SAAS;AAAA,YACP,EAAE,OAAO,SAAS,OAAO,SAAS,MAAM,cAAc;AAAA,YACtD,EAAE,OAAO,UAAU,OAAO,UAAU,MAAM,eAAe;AAAA,YACzD,EAAE,OAAO,SAAS,OAAO,SAAS,MAAM,cAAc;AAAA,UACxD;AAAA,UACA,cAAc;AAAA,QAChB,CAAC;AAAA,QACD,WAAO,yCAAgB,CAAC,OAAO,WAAW;AACxC,gBAAM,UAAU,yCAAiB;AAAA,YAC/B,MAAM;AAAA,UACR;AACA,gBAAM,aACJ,~~2CAAsC~~,QAAQ,eAAe,GAAG,SAAS,MAAM,GAC3E,UAAU;AAEhB,iBAAO,EAAE,aAAa,SAAS,OAAO;AAAA,QACxC,CAAC;AAAA,QACD,eAAW,yCAAgB;AAAA,UACzB,OAAO;AAAA,UACP,aAAa;AAAA,QACf,CAAC;AAAA,QACD,eAAW,mCAAU;AAAA,QACrB,WAAO,+BAAM;AAAA,QACb,YAAQ,gCAAO,EAAE,QAAQ,+BAAO,OAAO,UAAU,CAAC;AAAA,MACpD;AAAA,IACF;AAAA,EACF;AACF;","names":["import_react"]}
1	+ {"version":3,"sources":["../../../../../src/components/builtin/Button/register.ts"],"sourcesContent":["import {\n ElementID,\n Link,\n Margin,\n ResponsiveColor,\n ResponsiveIconRadioGroup,\n ResponsiveSelect,\n TextInput,\n TextStyle,\n Width,\n type PropData,\n} from '@makeswift/prop-controllers'\nimport { findBreakpointOverride } from '@makeswift/controls'\n\nimport { ReactRuntime } from '../../../runtimes/react'\nimport { MakeswiftComponentType } from '../constants'\nimport { ButtonVariant } from './contants'\nimport { lazy } from 'react'\n\nexport function registerComponent(runtime: ReactRuntime) {\n return runtime.registerComponent(\n lazy(() => import('./Button')),\n {\n type: MakeswiftComponentType.Button,\n label: 'Button',\n props: {\n id: ElementID(),\n children: TextInput({ placeholder: 'Button text' }),\n link: Link({\n defaultValue: {\n type: 'OPEN_PAGE',\n payload: {\n pageId: null,\n openInNewTab: false,\n },\n },\n }),\n variant: ResponsiveSelect({\n label: 'Style',\n labelOrientation: 'horizontal',\n options: [\n { value: 'flat', label: 'Flat' },\n { value: 'outline', label: 'Outline' },\n { value: 'shadow', label: 'Floating' },\n { value: 'clear', label: 'Clear' },\n { value: 'blocky', label: 'Blocky' },\n { value: 'bubbly', label: 'Bubbly' },\n { value: 'skewed', label: 'Skewed' },\n ],\n defaultValue: 'flat',\n }),\n shape: ResponsiveIconRadioGroup({\n label: 'Shape',\n options: [\n { label: 'Pill', value: 'pill', icon: 'ButtonPill16' },\n { label: 'Rounded', value: 'rounded', icon: 'ButtonRounded16' },\n { label: 'Square', value: 'square', icon: 'ButtonSquare16' },\n ],\n defaultValue: 'rounded',\n }),\n size: ResponsiveIconRadioGroup({\n label: 'Size',\n options: [\n { label: 'Small', value: 'small', icon: 'SizeSmall16' },\n { label: 'Medium', value: 'medium', icon: 'SizeMedium16' },\n { label: 'Large', value: 'large', icon: 'SizeLarge16' },\n ],\n defaultValue: 'medium',\n }),\n color: ResponsiveColor((props, device) => {\n const variant = ResponsiveSelect.fromPropData<ButtonVariant>(\n props.variant as PropData<typeof ResponsiveSelect> \| undefined,\n )\n const hidden =\n findBreakpointOverride<ButtonVariant>(runtime.getBreakpoints(), variant, device)\n ?.value === 'clear'\n\n return { placeholder: 'black', hidden }\n }),\n textColor: ResponsiveColor({\n label: 'Text color',\n placeholder: 'white',\n }),\n textStyle: TextStyle(),\n width: Width(),\n margin: Margin({ format: Margin.Format.ClassName }),\n },\n },\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAWO;AACP,sBAAuC;AAGvC,uBAAuC;AAEvC,IAAAA,gBAAqB;AAEd,SAAS,kBAAkB,SAAuB;AACvD,SAAO,QAAQ;AAAA,QACb,oBAAK,MAAM,6CAAO,UAAU,GAAC;AAAA,IAC7B;AAAA,MACE,MAAM,wCAAuB;AAAA,MAC7B,OAAO;AAAA,MACP,OAAO;AAAA,QACL,QAAI,mCAAU;AAAA,QACd,cAAU,mCAAU,EAAE,aAAa,cAAc,CAAC;AAAA,QAClD,UAAM,8BAAK;AAAA,UACT,cAAc;AAAA,YACZ,MAAM;AAAA,YACN,SAAS;AAAA,cACP,QAAQ;AAAA,cACR,cAAc;AAAA,YAChB;AAAA,UACF;AAAA,QACF,CAAC;AAAA,QACD,aAAS,0CAAiB;AAAA,UACxB,OAAO;AAAA,UACP,kBAAkB;AAAA,UAClB,SAAS;AAAA,YACP,EAAE,OAAO,QAAQ,OAAO,OAAO;AAAA,YAC/B,EAAE,OAAO,WAAW,OAAO,UAAU;AAAA,YACrC,EAAE,OAAO,UAAU,OAAO,WAAW;AAAA,YACrC,EAAE,OAAO,SAAS,OAAO,QAAQ;AAAA,YACjC,EAAE,OAAO,UAAU,OAAO,SAAS;AAAA,YACnC,EAAE,OAAO,UAAU,OAAO,SAAS;AAAA,YACnC,EAAE,OAAO,UAAU,OAAO,SAAS;AAAA,UACrC;AAAA,UACA,cAAc;AAAA,QAChB,CAAC;AAAA,QACD,WAAO,kDAAyB;AAAA,UAC9B,OAAO;AAAA,UACP,SAAS;AAAA,YACP,EAAE,OAAO,QAAQ,OAAO,QAAQ,MAAM,eAAe;AAAA,YACrD,EAAE,OAAO,WAAW,OAAO,WAAW,MAAM,kBAAkB;AAAA,YAC9D,EAAE,OAAO,UAAU,OAAO,UAAU,MAAM,iBAAiB;AAAA,UAC7D;AAAA,UACA,cAAc;AAAA,QAChB,CAAC;AAAA,QACD,UAAM,kDAAyB;AAAA,UAC7B,OAAO;AAAA,UACP,SAAS;AAAA,YACP,EAAE,OAAO,SAAS,OAAO,SAAS,MAAM,cAAc;AAAA,YACtD,EAAE,OAAO,UAAU,OAAO,UAAU,MAAM,eAAe;AAAA,YACzD,EAAE,OAAO,SAAS,OAAO,SAAS,MAAM,cAAc;AAAA,UACxD;AAAA,UACA,cAAc;AAAA,QAChB,CAAC;AAAA,QACD,WAAO,yCAAgB,CAAC,OAAO,WAAW;AACxC,gBAAM,UAAU,yCAAiB;AAAA,YAC/B,MAAM;AAAA,UACR;AACA,gBAAM,aACJ,wCAAsC,QAAQ,eAAe,GAAG,SAAS,MAAM,GAC3E,UAAU;AAEhB,iBAAO,EAAE,aAAa,SAAS,OAAO;AAAA,QACxC,CAAC;AAAA,QACD,eAAW,yCAAgB;AAAA,UACzB,OAAO;AAAA,UACP,aAAa;AAAA,QACf,CAAC;AAAA,QACD,eAAW,mCAAU;AAAA,QACrB,WAAO,+BAAM;AAAA,QACb,YAAQ,gCAAO,EAAE,QAAQ,+BAAO,OAAO,UAAU,CAAC;AAAA,MACpD;AAAA,IACF;AAAA,EACF;AACF;","names":["import_react"]}

package/dist/cjs/components/builtin/Carousel/Carousel.js CHANGED Viewed

@@ -37,13 +37,13 @@ var import_react = require("react");
 var import_framer_motion = require("framer-motion");
 var import_react2 = require("@use-gesture/react");
 var import_popcorn = require("@popmotion/popcorn");
+var import_controls = require("@makeswift/controls");
 var import_colorToString = require("../../utils/colorToString");
 var import_hooks = require("../../hooks");
 var import_Image = __toESM(require("../Image"));
 var import_use_style = require("../../../runtimes/react/use-style");
 var import_css = require("@emotion/css");
 var import_responsive_style = require("../../utils/responsive-style");
-var import_breakpoints = require("../../../state/modules/breakpoints");
 var import_use_breakpoints = require("../../../runtimes/react/hooks/use-breakpoints");
 const LeftChevron = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "14", viewBox: "0 0 10 14", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
   "path",
@@ -323,7 +323,7 @@ const Carousel = (0, import_react.forwardRef)(function Carousel2({
                     {
                       width: [
                         {
-                          deviceId: (0, import_breakpoints.getBaseBreakpoint)(breakpoints).id,
+                          deviceId: (0, import_controls.getBaseBreakpoint)(breakpoints).id,
                           value: { value: 100, unit: "%" }
                         }
                       ],

package/dist/cjs/components/builtin/Carousel/Carousel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/components/builtin/Carousel/Carousel.tsx"],"sourcesContent":["'use client'\n\nimport {\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 { type ResponsiveColor } from '../../utils/types'\nimport { useMediaQuery } from '../../hooks'\n\nimport Image from '../Image'\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/hooks/use-breakpoints'\nimport {\n type ResponsiveGapData,\n type ResponsiveNumberValue,\n type ResponsiveIconRadioGroupValue,\n type ImagesData,\n} from '@makeswift/prop-controllers'\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?: string\n images?: ImagesData\n width?: string\n margin?: string\n pageSize?: ResponsiveNumberValue\n step?: ResponsiveNumberValue\n slideAlignment?: ResponsiveIconRadioGroupValue<'flex-start' \| 'center' \| 'flex-end'>\n gap?: ResponsiveGapData\n autoplay?: boolean\n delay?: number\n showArrows?: boolean\n arrowPosition?: ResponsiveIconRadioGroupValue<'inside' \| 'center' \| 'outside'>\n arrowColor?: ResponsiveColor \| null\n arrowBackground?: ResponsiveColor \| null\n showDots?: boolean\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\n// constructs a CSS [class selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors),\n// returns a compound class selector if the `classname` string includes multiple class names\nconst classSelector = (classname: string) => `.${classname.split(' ').join('.')}`\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\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 [`& > ${classSelector(slideClassName)}`]: {\n padding: `0 ${`${gap.value / 2}${gap.unit}`}`,\n },\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\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\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 > ${classSelector(arrowClassName)}`]: {\n '& > svg': {\n transform: 'translateX(-2px)',\n },\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 [`&:hover > ${classSelector(arrowClassName)}`]: {\n '& > svg': {\n transform: 'translateX(2px)',\n },\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"],"mappings":"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","names":["import_react","Carousel","pageSize","gap","Image"]}
1	+ {"version":3,"sources":["../../../../../src/components/builtin/Carousel/Carousel.tsx"],"sourcesContent":["'use client'\n\nimport {\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 { getBaseBreakpoint } from '@makeswift/controls'\n\nimport { colorToString } from '../../utils/colorToString'\nimport { type ResponsiveColor } from '../../utils/types'\nimport { useMediaQuery } from '../../hooks'\n\nimport Image from '../Image'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { cx } from '@emotion/css'\nimport { useResponsiveStyle } from '../../utils/responsive-style'\nimport { useBreakpoints } from '../../../runtimes/react/hooks/use-breakpoints'\nimport {\n type ResponsiveGapData,\n type ResponsiveNumberValue,\n type ResponsiveIconRadioGroupValue,\n type ImagesData,\n} from '@makeswift/prop-controllers'\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?: string\n images?: ImagesData\n width?: string\n margin?: string\n pageSize?: ResponsiveNumberValue\n step?: ResponsiveNumberValue\n slideAlignment?: ResponsiveIconRadioGroupValue<'flex-start' \| 'center' \| 'flex-end'>\n gap?: ResponsiveGapData\n autoplay?: boolean\n delay?: number\n showArrows?: boolean\n arrowPosition?: ResponsiveIconRadioGroupValue<'inside' \| 'center' \| 'outside'>\n arrowColor?: ResponsiveColor \| null\n arrowBackground?: ResponsiveColor \| null\n showDots?: boolean\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\n// constructs a CSS [class selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors),\n// returns a compound class selector if the `classname` string includes multiple class names\nconst classSelector = (classname: string) => `.${classname.split(' ').join('.')}`\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\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 [`& > ${classSelector(slideClassName)}`]: {\n padding: `0 ${`${gap.value / 2}${gap.unit}`}`,\n },\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\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\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 > ${classSelector(arrowClassName)}`]: {\n '& > svg': {\n transform: 'translateX(-2px)',\n },\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 [`&:hover > ${classSelector(arrowClassName)}`]: {\n '& > svg': {\n transform: 'translateX(2px)',\n },\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"],"mappings":"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","names":["import_react","Carousel","pageSize","gap","Image"]}

package/dist/cjs/components/builtin/Carousel/register.js CHANGED Viewed

@@ -32,7 +32,7 @@ __export(register_exports, {
 });
 module.exports = __toCommonJS(register_exports);
 var import_uuid = require("uuid");
-var import_breakpoints = require("../../../state/modules/breakpoints");
+var import_controls = require("@makeswift/controls");
 var import_prop_controllers = require("@makeswift/prop-controllers");
 var import_constants = require("../constants");
 var import_components_meta = require("../../../state/modules/components-meta");
@@ -76,7 +76,7 @@ function registerComponent(runtime) {
           const pageSize = import_prop_controllers.ResponsiveNumber.fromPropData(
             props.pageSize
           );
-          const pageSizeValue = (0, import_breakpoints.findBreakpointOverride)(runtime.getBreakpoints(), pageSize, device)?.value ?? 1;
+          const pageSizeValue = (0, import_controls.findBreakpointOverride)(runtime.getBreakpoints(), pageSize, device)?.value ?? 1;
           return {
             label: "Step",
             defaultValue: 1,

package/dist/cjs/components/builtin/Carousel/register.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/components/builtin/Carousel/register.ts"],"sourcesContent":["import { v4 as uuid } from 'uuid'\n\nimport { ReactRuntime } from '../../../runtimes/react'\nimport { findBreakpointOverride } from '~~../../../state~~/~~modules/breakpoints~~'\nimport {\n BorderRadius,\n ElementID,\n GapX,\n Images,\n ImagesPropControllerData,\n Margin,\n Number,\n ResponsiveColor,\n ResponsiveIconRadioGroup,\n ResponsiveNumber,\n Width,\n getImagesPropControllerDataImagesData,\n type PropData,\n} from '@makeswift/prop-controllers'\n\nimport { MakeswiftComponentType } from '../constants'\nimport { ComponentIcon } from '../../../state/modules/components-meta'\nimport { lazy } from 'react'\nimport {\n Border,\n Checkbox,\n checkboxPropControllerDataSchema,\n getCheckboxPropControllerDataBoolean,\n} from '@makeswift/prop-controllers'\n\nexport function registerComponent(runtime: ReactRuntime) {\n return runtime.registerComponent(\n lazy(() => import('./Carousel')),\n {\n type: MakeswiftComponentType.Carousel,\n label: 'Carousel',\n icon: ComponentIcon.Carousel,\n props: {\n id: ElementID(),\n images: Images({\n preset: [\n { key: uuid(), props: {} },\n { key: uuid(), props: {} },\n { key: uuid(), props: {} },\n ],\n }),\n width: Width({\n format: Width.Format.ClassName,\n defaultValue: { value: 400, unit: 'px' },\n }),\n margin: Margin({ format: Margin.Format.ClassName }),\n pageSize: ResponsiveNumber(props => {\n const images = getImagesPropControllerDataImagesData(\n props.images as ImagesPropControllerData \| undefined,\n )\n const imagesLength = images?.length ?? 0\n\n return {\n label: 'Images shown',\n defaultValue: 1,\n min: 1,\n max: imagesLength,\n step: 1,\n }\n }),\n step: ResponsiveNumber((props, device) => {\n const pageSize = ResponsiveNumber.fromPropData(\n props.pageSize as PropData<typeof ResponsiveNumber> \| undefined,\n )\n const pageSizeValue =\n findBreakpointOverride(runtime.getBreakpoints(), pageSize, device)?.value ?? 1\n\n return {\n label: 'Step',\n defaultValue: 1,\n min: 1,\n max: pageSizeValue,\n step: 1,\n }\n }),\n slideAlignment: ResponsiveIconRadioGroup({\n label: 'Alignment',\n options: [\n { label: 'Top', value: 'flex-start', icon: 'VerticalAlignStart16' },\n { label: 'Middle', value: 'center', icon: 'VerticalAlignMiddle16' },\n { label: 'Bottom', value: 'flex-end', icon: 'VerticalAlignEnd16' },\n ],\n defaultValue: 'center',\n }),\n gap: GapX({\n label: 'Gap',\n step: 5,\n defaultValue: { value: 0, unit: 'px' },\n }),\n autoplay: Checkbox({ label: 'Autoplay' }),\n delay: Number(props => ({\n label: 'Delay',\n preset: 5,\n min: 1,\n step: 0.1,\n suffix: 'seconds',\n hidden: !getCheckboxPropControllerDataBoolean(\n checkboxPropControllerDataSchema.optional().catch(undefined).parse(props.autoplay),\n ),\n })),\n showArrows: Checkbox({ preset: true, label: 'Show arrows' }),\n arrowPosition: ResponsiveIconRadioGroup(props => ({\n label: 'Arrow position',\n options: [\n { label: 'Inside', value: 'inside', icon: 'ArrowInside16' },\n { label: 'Center', value: 'center', icon: 'ArrowCenter16' },\n { label: 'Outside', value: 'outside', icon: 'ArrowOutside16' },\n ],\n defaultValue: 'inside',\n hidden:\n getCheckboxPropControllerDataBoolean(\n checkboxPropControllerDataSchema.optional().catch(undefined).parse(props.showArrows),\n ) === false,\n })),\n arrowColor: ResponsiveColor(props => ({\n label: 'Arrow color',\n placeholder: 'black',\n hidden:\n getCheckboxPropControllerDataBoolean(\n checkboxPropControllerDataSchema.optional().catch(undefined).parse(props.showArrows),\n ) === false,\n })),\n arrowBackground: ResponsiveColor(props => ({\n label: 'Arrow background',\n placeholder: 'white',\n hidden:\n getCheckboxPropControllerDataBoolean(\n checkboxPropControllerDataSchema.optional().catch(undefined).parse(props.showArrows),\n ) === false,\n })),\n showDots: Checkbox({ preset: true, label: 'Show dots' }),\n dotColor: ResponsiveColor(props => ({\n label: 'Dot color',\n placeholder: 'black',\n hidden:\n getCheckboxPropControllerDataBoolean(\n checkboxPropControllerDataSchema.optional().catch(undefined).parse(props.showDots),\n ) === false,\n })),\n slideBorder: Border({ format: Border.Format.ClassName }),\n slideBorderRadius: BorderRadius({ format: BorderRadius.Format.ClassName }),\n },\n },\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAA2B;AAG3B,~~yBAAuC~~;AACvC,8BAcO;AAEP,uBAAuC;AACvC,6BAA8B;AAC9B,IAAAA,gBAAqB;AACrB,IAAAC,2BAKO;AAEA,SAAS,kBAAkB,SAAuB;AACvD,SAAO,QAAQ;AAAA,QACb,oBAAK,MAAM,6CAAO,YAAY,GAAC;AAAA,IAC/B;AAAA,MACE,MAAM,wCAAuB;AAAA,MAC7B,OAAO;AAAA,MACP,MAAM,qCAAc;AAAA,MACpB,OAAO;AAAA,QACL,QAAI,mCAAU;AAAA,QACd,YAAQ,gCAAO;AAAA,UACb,QAAQ;AAAA,YACN,EAAE,SAAK,YAAAC,IAAK,GAAG,OAAO,CAAC,EAAE;AAAA,YACzB,EAAE,SAAK,YAAAA,IAAK,GAAG,OAAO,CAAC,EAAE;AAAA,YACzB,EAAE,SAAK,YAAAA,IAAK,GAAG,OAAO,CAAC,EAAE;AAAA,UAC3B;AAAA,QACF,CAAC;AAAA,QACD,WAAO,+BAAM;AAAA,UACX,QAAQ,8BAAM,OAAO;AAAA,UACrB,cAAc,EAAE,OAAO,KAAK,MAAM,KAAK;AAAA,QACzC,CAAC;AAAA,QACD,YAAQ,gCAAO,EAAE,QAAQ,+BAAO,OAAO,UAAU,CAAC;AAAA,QAClD,cAAU,0CAAiB,WAAS;AAClC,gBAAM,aAAS;AAAA,YACb,MAAM;AAAA,UACR;AACA,gBAAM,eAAe,QAAQ,UAAU;AAEvC,iBAAO;AAAA,YACL,OAAO;AAAA,YACP,cAAc;AAAA,YACd,KAAK;AAAA,YACL,KAAK;AAAA,YACL,MAAM;AAAA,UACR;AAAA,QACF,CAAC;AAAA,QACD,UAAM,0CAAiB,CAAC,OAAO,WAAW;AACxC,gBAAM,WAAW,yCAAiB;AAAA,YAChC,MAAM;AAAA,UACR;AACA,gBAAM,oBACJ,~~2CAAuB~~,QAAQ,eAAe,GAAG,UAAU,MAAM,GAAG,SAAS;AAE/E,iBAAO;AAAA,YACL,OAAO;AAAA,YACP,cAAc;AAAA,YACd,KAAK;AAAA,YACL,KAAK;AAAA,YACL,MAAM;AAAA,UACR;AAAA,QACF,CAAC;AAAA,QACD,oBAAgB,kDAAyB;AAAA,UACvC,OAAO;AAAA,UACP,SAAS;AAAA,YACP,EAAE,OAAO,OAAO,OAAO,cAAc,MAAM,uBAAuB;AAAA,YAClE,EAAE,OAAO,UAAU,OAAO,UAAU,MAAM,wBAAwB;AAAA,YAClE,EAAE,OAAO,UAAU,OAAO,YAAY,MAAM,qBAAqB;AAAA,UACnE;AAAA,UACA,cAAc;AAAA,QAChB,CAAC;AAAA,QACD,SAAK,8BAAK;AAAA,UACR,OAAO;AAAA,UACP,MAAM;AAAA,UACN,cAAc,EAAE,OAAO,GAAG,MAAM,KAAK;AAAA,QACvC,CAAC;AAAA,QACD,cAAU,mCAAS,EAAE,OAAO,WAAW,CAAC;AAAA,QACxC,WAAO,gCAAO,YAAU;AAAA,UACtB,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,KAAK;AAAA,UACL,MAAM;AAAA,UACN,QAAQ;AAAA,UACR,QAAQ,KAAC;AAAA,YACP,0DAAiC,SAAS,EAAE,MAAM,MAAS,EAAE,MAAM,MAAM,QAAQ;AAAA,UACnF;AAAA,QACF,EAAE;AAAA,QACF,gBAAY,mCAAS,EAAE,QAAQ,MAAM,OAAO,cAAc,CAAC;AAAA,QAC3D,mBAAe,kDAAyB,YAAU;AAAA,UAChD,OAAO;AAAA,UACP,SAAS;AAAA,YACP,EAAE,OAAO,UAAU,OAAO,UAAU,MAAM,gBAAgB;AAAA,YAC1D,EAAE,OAAO,UAAU,OAAO,UAAU,MAAM,gBAAgB;AAAA,YAC1D,EAAE,OAAO,WAAW,OAAO,WAAW,MAAM,iBAAiB;AAAA,UAC/D;AAAA,UACA,cAAc;AAAA,UACd,YACE;AAAA,YACE,0DAAiC,SAAS,EAAE,MAAM,MAAS,EAAE,MAAM,MAAM,UAAU;AAAA,UACrF,MAAM;AAAA,QACV,EAAE;AAAA,QACF,gBAAY,yCAAgB,YAAU;AAAA,UACpC,OAAO;AAAA,UACP,aAAa;AAAA,UACb,YACE;AAAA,YACE,0DAAiC,SAAS,EAAE,MAAM,MAAS,EAAE,MAAM,MAAM,UAAU;AAAA,UACrF,MAAM;AAAA,QACV,EAAE;AAAA,QACF,qBAAiB,yCAAgB,YAAU;AAAA,UACzC,OAAO;AAAA,UACP,aAAa;AAAA,UACb,YACE;AAAA,YACE,0DAAiC,SAAS,EAAE,MAAM,MAAS,EAAE,MAAM,MAAM,UAAU;AAAA,UACrF,MAAM;AAAA,QACV,EAAE;AAAA,QACF,cAAU,mCAAS,EAAE,QAAQ,MAAM,OAAO,YAAY,CAAC;AAAA,QACvD,cAAU,yCAAgB,YAAU;AAAA,UAClC,OAAO;AAAA,UACP,aAAa;AAAA,UACb,YACE;AAAA,YACE,0DAAiC,SAAS,EAAE,MAAM,MAAS,EAAE,MAAM,MAAM,QAAQ;AAAA,UACnF,MAAM;AAAA,QACV,EAAE;AAAA,QACF,iBAAa,iCAAO,EAAE,QAAQ,gCAAO,OAAO,UAAU,CAAC;AAAA,QACvD,uBAAmB,sCAAa,EAAE,QAAQ,qCAAa,OAAO,UAAU,CAAC;AAAA,MAC3E;AAAA,IACF;AAAA,EACF;AACF;","names":["import_react","import_prop_controllers","uuid"]}
1	+ {"version":3,"sources":["../../../../../src/components/builtin/Carousel/register.ts"],"sourcesContent":["import { v4 as uuid } from 'uuid'\n\nimport { ReactRuntime } from '../../../runtimes/react'\nimport { findBreakpointOverride } from '@makeswift/controls'\nimport {\n BorderRadius,\n ElementID,\n GapX,\n Images,\n ImagesPropControllerData,\n Margin,\n Number,\n ResponsiveColor,\n ResponsiveIconRadioGroup,\n ResponsiveNumber,\n Width,\n getImagesPropControllerDataImagesData,\n type PropData,\n} from '@makeswift/prop-controllers'\n\nimport { MakeswiftComponentType } from '../constants'\nimport { ComponentIcon } from '../../../state/modules/components-meta'\nimport { lazy } from 'react'\nimport {\n Border,\n Checkbox,\n checkboxPropControllerDataSchema,\n getCheckboxPropControllerDataBoolean,\n} from '@makeswift/prop-controllers'\n\nexport function registerComponent(runtime: ReactRuntime) {\n return runtime.registerComponent(\n lazy(() => import('./Carousel')),\n {\n type: MakeswiftComponentType.Carousel,\n label: 'Carousel',\n icon: ComponentIcon.Carousel,\n props: {\n id: ElementID(),\n images: Images({\n preset: [\n { key: uuid(), props: {} },\n { key: uuid(), props: {} },\n { key: uuid(), props: {} },\n ],\n }),\n width: Width({\n format: Width.Format.ClassName,\n defaultValue: { value: 400, unit: 'px' },\n }),\n margin: Margin({ format: Margin.Format.ClassName }),\n pageSize: ResponsiveNumber(props => {\n const images = getImagesPropControllerDataImagesData(\n props.images as ImagesPropControllerData \| undefined,\n )\n const imagesLength = images?.length ?? 0\n\n return {\n label: 'Images shown',\n defaultValue: 1,\n min: 1,\n max: imagesLength,\n step: 1,\n }\n }),\n step: ResponsiveNumber((props, device) => {\n const pageSize = ResponsiveNumber.fromPropData(\n props.pageSize as PropData<typeof ResponsiveNumber> \| undefined,\n )\n const pageSizeValue =\n findBreakpointOverride(runtime.getBreakpoints(), pageSize, device)?.value ?? 1\n\n return {\n label: 'Step',\n defaultValue: 1,\n min: 1,\n max: pageSizeValue,\n step: 1,\n }\n }),\n slideAlignment: ResponsiveIconRadioGroup({\n label: 'Alignment',\n options: [\n { label: 'Top', value: 'flex-start', icon: 'VerticalAlignStart16' },\n { label: 'Middle', value: 'center', icon: 'VerticalAlignMiddle16' },\n { label: 'Bottom', value: 'flex-end', icon: 'VerticalAlignEnd16' },\n ],\n defaultValue: 'center',\n }),\n gap: GapX({\n label: 'Gap',\n step: 5,\n defaultValue: { value: 0, unit: 'px' },\n }),\n autoplay: Checkbox({ label: 'Autoplay' }),\n delay: Number(props => ({\n label: 'Delay',\n preset: 5,\n min: 1,\n step: 0.1,\n suffix: 'seconds',\n hidden: !getCheckboxPropControllerDataBoolean(\n checkboxPropControllerDataSchema.optional().catch(undefined).parse(props.autoplay),\n ),\n })),\n showArrows: Checkbox({ preset: true, label: 'Show arrows' }),\n arrowPosition: ResponsiveIconRadioGroup(props => ({\n label: 'Arrow position',\n options: [\n { label: 'Inside', value: 'inside', icon: 'ArrowInside16' },\n { label: 'Center', value: 'center', icon: 'ArrowCenter16' },\n { label: 'Outside', value: 'outside', icon: 'ArrowOutside16' },\n ],\n defaultValue: 'inside',\n hidden:\n getCheckboxPropControllerDataBoolean(\n checkboxPropControllerDataSchema.optional().catch(undefined).parse(props.showArrows),\n ) === false,\n })),\n arrowColor: ResponsiveColor(props => ({\n label: 'Arrow color',\n placeholder: 'black',\n hidden:\n getCheckboxPropControllerDataBoolean(\n checkboxPropControllerDataSchema.optional().catch(undefined).parse(props.showArrows),\n ) === false,\n })),\n arrowBackground: ResponsiveColor(props => ({\n label: 'Arrow background',\n placeholder: 'white',\n hidden:\n getCheckboxPropControllerDataBoolean(\n checkboxPropControllerDataSchema.optional().catch(undefined).parse(props.showArrows),\n ) === false,\n })),\n showDots: Checkbox({ preset: true, label: 'Show dots' }),\n dotColor: ResponsiveColor(props => ({\n label: 'Dot color',\n placeholder: 'black',\n hidden:\n getCheckboxPropControllerDataBoolean(\n checkboxPropControllerDataSchema.optional().catch(undefined).parse(props.showDots),\n ) === false,\n })),\n slideBorder: Border({ format: Border.Format.ClassName }),\n slideBorderRadius: BorderRadius({ format: BorderRadius.Format.ClassName }),\n },\n },\n )\n}\n"],"mappings":"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","names":["import_react","import_prop_controllers","uuid"]}

package/dist/cjs/components/builtin/Countdown/register.js CHANGED Viewed

@@ -31,7 +31,7 @@ __export(register_exports, {
   registerComponent: () => registerComponent
 });
 module.exports = __toCommonJS(register_exports);
-var import_breakpoints = require("../../../state/modules/breakpoints");
+var import_controls = require("@makeswift/controls");
 var import_constants = require("../constants");
 var import_components_meta = require("../../../state/modules/components-meta");
 var import_react2 = require("react");
@@ -88,7 +88,7 @@ function registerComponent(runtime) {
         gap: (0, import_prop_controllers.GapX)({
           preset: [
             {
-              deviceId: (0, import_breakpoints.getBaseBreakpoint)(runtime.getBreakpoints()).id,
+              deviceId: (0, import_controls.getBaseBreakpoint)(runtime.getBreakpoints()).id,
               value: { value: 10, unit: "px" }
             }
           ],

package/dist/cjs/components/builtin/Countdown/register.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/components/builtin/Countdown/register.ts"],"sourcesContent":["import { ReactRuntime } from '../../../runtimes/react'\nimport { getBaseBreakpoint } from '~~../../../state~~/~~modules/breakpoints~~'\nimport { MakeswiftComponentType } from '../constants'\nimport { ComponentIcon } from '../../../state/modules/components-meta'\nimport { lazy } from 'react'\nimport {\n Date as DatePropController,\n ElementID,\n Font,\n GapX,\n Margin,\n ResponsiveColor,\n ResponsiveIconRadioGroup,\n TextInput,\n Width,\n} from '@makeswift/prop-controllers'\n\nexport function registerComponent(runtime: ReactRuntime) {\n return runtime.registerComponent(\n lazy(() => import('./Countdown')),\n {\n type: MakeswiftComponentType.Countdown,\n label: 'Countdown',\n icon: ComponentIcon.Countdown,\n props: {\n id: ElementID(),\n date: DatePropController(() => ({\n preset: new Date(Date.now() + 1000 * 60 * 60 * 24 * 2).toISOString(),\n })),\n variant: ResponsiveIconRadioGroup({\n label: 'Style',\n options: [\n { label: 'Filled', value: 'filled', icon: 'CountdownSolid16' },\n {\n label: 'Filled split',\n value: 'filled-split',\n icon: 'CountdownSolidSplit16',\n },\n { label: 'Outline', value: 'outline', icon: 'CountdownOutline16' },\n {\n label: 'Outline split',\n value: 'outline-split',\n icon: 'CountdownOutlineSplit16',\n },\n { label: 'Clear', value: 'clear', icon: 'CountdownNaked16' },\n ],\n defaultValue: 'filled',\n }),\n shape: ResponsiveIconRadioGroup({\n label: 'Shape',\n options: [\n { label: 'Pill', value: 'pill', icon: 'ButtonPill16' },\n { label: 'Rounded', value: 'rounded', icon: 'ButtonRounded16' },\n { label: 'Square', value: 'square', icon: 'ButtonSquare16' },\n ],\n defaultValue: 'rounded',\n }),\n size: ResponsiveIconRadioGroup({\n label: 'Size',\n options: [\n { label: 'Small', value: 'small', icon: 'SizeSmall16' },\n { label: 'Medium', value: 'medium', icon: 'SizeMedium16' },\n { label: 'Large', value: 'large', icon: 'SizeLarge16' },\n ],\n defaultValue: 'medium',\n }),\n gap: GapX({\n preset: [\n {\n deviceId: getBaseBreakpoint(runtime.getBreakpoints()).id,\n value: { value: 10, unit: 'px' },\n },\n ],\n label: 'Gap',\n step: 1,\n min: 0,\n max: 100,\n defaultValue: { value: 0, unit: 'px' },\n }),\n numberFont: Font({ label: 'Number font' }),\n numberColor: ResponsiveColor({\n label: 'Number color',\n placeholder: 'white',\n }),\n blockColor: ResponsiveColor({\n label: 'Block color',\n placeholder: 'black',\n }),\n labelFont: Font({ label: 'Label font' }),\n labelColor: ResponsiveColor({\n label: 'Label color',\n placeholder: 'black',\n }),\n width: Width({\n format: Width.Format.ClassName,\n defaultValue: { value: 560, unit: 'px' },\n }),\n margin: Margin({ format: Margin.Format.ClassName }),\n daysLabel: TextInput({ label: 'Days label', placeholder: 'Days' }),\n hoursLabel: TextInput({ label: 'Hours label', placeholder: 'Hours' }),\n minutesLabel: TextInput({\n label: 'Minutes label',\n placeholder: 'Minutes',\n }),\n secondsLabel: TextInput({\n label: 'Seconds label',\n placeholder: 'Seconds',\n }),\n },\n },\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,~~yBAAkC~~;AAClC,uBAAuC;AACvC,6BAA8B;AAC9B,IAAAA,gBAAqB;AACrB,8BAUO;AAEA,SAAS,kBAAkB,SAAuB;AACvD,SAAO,QAAQ;AAAA,QACb,oBAAK,MAAM,6CAAO,aAAa,GAAC;AAAA,IAChC;AAAA,MACE,MAAM,wCAAuB;AAAA,MAC7B,OAAO;AAAA,MACP,MAAM,qCAAc;AAAA,MACpB,OAAO;AAAA,QACL,QAAI,mCAAU;AAAA,QACd,UAAM,wBAAAC,MAAmB,OAAO;AAAA,UAC9B,QAAQ,IAAI,KAAK,KAAK,IAAI,IAAI,MAAO,KAAK,KAAK,KAAK,CAAC,EAAE,YAAY;AAAA,QACrE,EAAE;AAAA,QACF,aAAS,kDAAyB;AAAA,UAChC,OAAO;AAAA,UACP,SAAS;AAAA,YACP,EAAE,OAAO,UAAU,OAAO,UAAU,MAAM,mBAAmB;AAAA,YAC7D;AAAA,cACE,OAAO;AAAA,cACP,OAAO;AAAA,cACP,MAAM;AAAA,YACR;AAAA,YACA,EAAE,OAAO,WAAW,OAAO,WAAW,MAAM,qBAAqB;AAAA,YACjE;AAAA,cACE,OAAO;AAAA,cACP,OAAO;AAAA,cACP,MAAM;AAAA,YACR;AAAA,YACA,EAAE,OAAO,SAAS,OAAO,SAAS,MAAM,mBAAmB;AAAA,UAC7D;AAAA,UACA,cAAc;AAAA,QAChB,CAAC;AAAA,QACD,WAAO,kDAAyB;AAAA,UAC9B,OAAO;AAAA,UACP,SAAS;AAAA,YACP,EAAE,OAAO,QAAQ,OAAO,QAAQ,MAAM,eAAe;AAAA,YACrD,EAAE,OAAO,WAAW,OAAO,WAAW,MAAM,kBAAkB;AAAA,YAC9D,EAAE,OAAO,UAAU,OAAO,UAAU,MAAM,iBAAiB;AAAA,UAC7D;AAAA,UACA,cAAc;AAAA,QAChB,CAAC;AAAA,QACD,UAAM,kDAAyB;AAAA,UAC7B,OAAO;AAAA,UACP,SAAS;AAAA,YACP,EAAE,OAAO,SAAS,OAAO,SAAS,MAAM,cAAc;AAAA,YACtD,EAAE,OAAO,UAAU,OAAO,UAAU,MAAM,eAAe;AAAA,YACzD,EAAE,OAAO,SAAS,OAAO,SAAS,MAAM,cAAc;AAAA,UACxD;AAAA,UACA,cAAc;AAAA,QAChB,CAAC;AAAA,QACD,SAAK,8BAAK;AAAA,UACR,QAAQ;AAAA,YACN;AAAA,cACE,cAAU,~~sCAAkB~~,QAAQ,eAAe,CAAC,EAAE;AAAA,cACtD,OAAO,EAAE,OAAO,IAAI,MAAM,KAAK;AAAA,YACjC;AAAA,UACF;AAAA,UACA,OAAO;AAAA,UACP,MAAM;AAAA,UACN,KAAK;AAAA,UACL,KAAK;AAAA,UACL,cAAc,EAAE,OAAO,GAAG,MAAM,KAAK;AAAA,QACvC,CAAC;AAAA,QACD,gBAAY,8BAAK,EAAE,OAAO,cAAc,CAAC;AAAA,QACzC,iBAAa,yCAAgB;AAAA,UAC3B,OAAO;AAAA,UACP,aAAa;AAAA,QACf,CAAC;AAAA,QACD,gBAAY,yCAAgB;AAAA,UAC1B,OAAO;AAAA,UACP,aAAa;AAAA,QACf,CAAC;AAAA,QACD,eAAW,8BAAK,EAAE,OAAO,aAAa,CAAC;AAAA,QACvC,gBAAY,yCAAgB;AAAA,UAC1B,OAAO;AAAA,UACP,aAAa;AAAA,QACf,CAAC;AAAA,QACD,WAAO,+BAAM;AAAA,UACX,QAAQ,8BAAM,OAAO;AAAA,UACrB,cAAc,EAAE,OAAO,KAAK,MAAM,KAAK;AAAA,QACzC,CAAC;AAAA,QACD,YAAQ,gCAAO,EAAE,QAAQ,+BAAO,OAAO,UAAU,CAAC;AAAA,QAClD,eAAW,mCAAU,EAAE,OAAO,cAAc,aAAa,OAAO,CAAC;AAAA,QACjE,gBAAY,mCAAU,EAAE,OAAO,eAAe,aAAa,QAAQ,CAAC;AAAA,QACpE,kBAAc,mCAAU;AAAA,UACtB,OAAO;AAAA,UACP,aAAa;AAAA,QACf,CAAC;AAAA,QACD,kBAAc,mCAAU;AAAA,UACtB,OAAO;AAAA,UACP,aAAa;AAAA,QACf,CAAC;AAAA,MACH;AAAA,IACF;AAAA,EACF;AACF;","names":["import_react","DatePropController"]}
1	+ {"version":3,"sources":["../../../../../src/components/builtin/Countdown/register.ts"],"sourcesContent":["import { ReactRuntime } from '../../../runtimes/react'\nimport { getBaseBreakpoint } from '@makeswift/controls'\nimport { MakeswiftComponentType } from '../constants'\nimport { ComponentIcon } from '../../../state/modules/components-meta'\nimport { lazy } from 'react'\nimport {\n Date as DatePropController,\n ElementID,\n Font,\n GapX,\n Margin,\n ResponsiveColor,\n ResponsiveIconRadioGroup,\n TextInput,\n Width,\n} from '@makeswift/prop-controllers'\n\nexport function registerComponent(runtime: ReactRuntime) {\n return runtime.registerComponent(\n lazy(() => import('./Countdown')),\n {\n type: MakeswiftComponentType.Countdown,\n label: 'Countdown',\n icon: ComponentIcon.Countdown,\n props: {\n id: ElementID(),\n date: DatePropController(() => ({\n preset: new Date(Date.now() + 1000 * 60 * 60 * 24 * 2).toISOString(),\n })),\n variant: ResponsiveIconRadioGroup({\n label: 'Style',\n options: [\n { label: 'Filled', value: 'filled', icon: 'CountdownSolid16' },\n {\n label: 'Filled split',\n value: 'filled-split',\n icon: 'CountdownSolidSplit16',\n },\n { label: 'Outline', value: 'outline', icon: 'CountdownOutline16' },\n {\n label: 'Outline split',\n value: 'outline-split',\n icon: 'CountdownOutlineSplit16',\n },\n { label: 'Clear', value: 'clear', icon: 'CountdownNaked16' },\n ],\n defaultValue: 'filled',\n }),\n shape: ResponsiveIconRadioGroup({\n label: 'Shape',\n options: [\n { label: 'Pill', value: 'pill', icon: 'ButtonPill16' },\n { label: 'Rounded', value: 'rounded', icon: 'ButtonRounded16' },\n { label: 'Square', value: 'square', icon: 'ButtonSquare16' },\n ],\n defaultValue: 'rounded',\n }),\n size: ResponsiveIconRadioGroup({\n label: 'Size',\n options: [\n { label: 'Small', value: 'small', icon: 'SizeSmall16' },\n { label: 'Medium', value: 'medium', icon: 'SizeMedium16' },\n { label: 'Large', value: 'large', icon: 'SizeLarge16' },\n ],\n defaultValue: 'medium',\n }),\n gap: GapX({\n preset: [\n {\n deviceId: getBaseBreakpoint(runtime.getBreakpoints()).id,\n value: { value: 10, unit: 'px' },\n },\n ],\n label: 'Gap',\n step: 1,\n min: 0,\n max: 100,\n defaultValue: { value: 0, unit: 'px' },\n }),\n numberFont: Font({ label: 'Number font' }),\n numberColor: ResponsiveColor({\n label: 'Number color',\n placeholder: 'white',\n }),\n blockColor: ResponsiveColor({\n label: 'Block color',\n placeholder: 'black',\n }),\n labelFont: Font({ label: 'Label font' }),\n labelColor: ResponsiveColor({\n label: 'Label color',\n placeholder: 'black',\n }),\n width: Width({\n format: Width.Format.ClassName,\n defaultValue: { value: 560, unit: 'px' },\n }),\n margin: Margin({ format: Margin.Format.ClassName }),\n daysLabel: TextInput({ label: 'Days label', placeholder: 'Days' }),\n hoursLabel: TextInput({ label: 'Hours label', placeholder: 'Hours' }),\n minutesLabel: TextInput({\n label: 'Minutes label',\n placeholder: 'Minutes',\n }),\n secondsLabel: TextInput({\n label: 'Seconds label',\n placeholder: 'Seconds',\n }),\n },\n },\n )\n}\n"],"mappings":"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","names":["import_react","DatePropController"]}

package/dist/cjs/components/builtin/Form/register.js CHANGED Viewed

@@ -31,7 +31,7 @@ __export(register_exports, {
   registerComponent: () => registerComponent
 });
 module.exports = __toCommonJS(register_exports);
-var import_breakpoints = require("../../../state/modules/breakpoints");
+var import_controls = require("@makeswift/controls");
 var import_constants = require("../constants");
 var import_FormContext = require("./context/FormContext");
 var import_components_meta = require("../../../state/modules/components-meta");
@@ -60,7 +60,7 @@ function registerComponent(runtime) {
         gap: (0, import_prop_controllers.GapY)((props) => ({
           preset: [
             {
-              deviceId: (0, import_breakpoints.getBaseBreakpoint)(runtime.getBreakpoints()).id,
+              deviceId: (0, import_controls.getBaseBreakpoint)(runtime.getBreakpoints()).id,
               value: { value: 10, unit: "px" }
             }
           ],
@@ -103,7 +103,7 @@ function registerComponent(runtime) {
           const responsiveContrast = import_prop_controllers.ResponsiveSelect.fromPropData(
             props.contrast
           );
-          const contrast = (0, import_breakpoints.findBreakpointOverride)(
+          const contrast = (0, import_controls.findBreakpointOverride)(
             runtime.getBreakpoints(),
             responsiveContrast,
             device
@@ -163,7 +163,7 @@ function registerComponent(runtime) {
         width: (0, import_prop_controllers.Width)({
           preset: [
             {
-              deviceId: (0, import_breakpoints.getBaseBreakpoint)(runtime.getBreakpoints()).id,
+              deviceId: (0, import_controls.getBaseBreakpoint)(runtime.getBreakpoints()).id,
               value: { value: 550, unit: "px" }
             }
           ],

package/dist/cjs/components/builtin/Form/register.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/components/builtin/Form/register.ts"],"sourcesContent":["import { ReactRuntime } from '../../../runtimes/react'\nimport { findBreakpointOverride, getBaseBreakpoint } from '~~../../../state~~/~~modules/breakpoints~~'\nimport { MakeswiftComponentType } from '../constants'\nimport { Alignments, Contrast, Contrasts, Shapes, Sizes } from './context/FormContext'\nimport { ComponentIcon } from '../../../state/modules/components-meta'\nimport { lazy } from 'react'\nimport {\n ElementID,\n GapY,\n Link,\n Margin,\n ResponsiveColor,\n ResponsiveLength,\n ResponsiveSelect,\n ResponsiveIconRadioGroup,\n Table,\n TableFormFields,\n TextInput,\n TextStyle,\n Width,\n type PropData,\n} from '@makeswift/prop-controllers'\n\nexport function registerComponent(runtime: ReactRuntime) {\n return runtime.registerComponent(\n lazy(() => import('./Form')),\n {\n type: MakeswiftComponentType.Form,\n label: 'Form',\n icon: ComponentIcon.Form,\n props: {\n id: ElementID(),\n tableId: Table(),\n fields: TableFormFields(),\n submitLink: Link(props => ({\n label: 'Redirect to',\n // TODO: This option is hardcoded. We should import it from LinkPanelOptions\n options: [\n { value: 'OPEN_PAGE', label: 'Open page' },\n { value: 'OPEN_URL', label: 'Open URL' },\n ],\n hidden: props.tableId == null,\n })),\n gap: GapY(props => ({\n preset: [\n {\n deviceId: getBaseBreakpoint(runtime.getBreakpoints()).id,\n value: { value: 10, unit: 'px' },\n },\n ],\n label: 'Gap',\n defaultValue: { value: 0, unit: 'px' },\n hidden: props.tableId == null,\n })),\n shape: ResponsiveIconRadioGroup(props => ({\n label: 'Shape',\n options: [\n { label: 'Pill', value: Shapes.PILL, icon: 'ButtonPill16' },\n { label: 'Rounded', value: Shapes.ROUNDED, icon: 'ButtonRounded16' },\n { label: 'Square', value: Shapes.SQUARE, icon: 'ButtonSquare16' },\n ],\n defaultValue: Shapes.ROUNDED,\n hidden: props.tableId == null,\n })),\n size: ResponsiveIconRadioGroup(props => ({\n label: 'Size',\n options: [\n { label: 'Small', value: Sizes.SMALL, icon: 'SizeSmall16' },\n { label: 'Medium', value: Sizes.MEDIUM, icon: 'SizeMedium16' },\n { label: 'Large', value: Sizes.LARGE, icon: 'SizeLarge16' },\n ],\n defaultValue: Sizes.MEDIUM,\n hidden: props?.tableId == null,\n })),\n contrast: ResponsiveIconRadioGroup(props => ({\n label: 'Color',\n options: [\n { label: 'Light mode', value: Contrasts.LIGHT, icon: 'Sun16' },\n { label: 'Dark mode', value: Contrasts.DARK, icon: 'Moon16' },\n ],\n defaultValue: Contrasts.LIGHT,\n hidden: props.tableId == null,\n })),\n labelTextStyle: TextStyle({ label: 'Label text style' }),\n labelTextColor: ResponsiveColor((props, device) => {\n const hidden = props.tableId == null\n const responsiveContrast = ResponsiveSelect.fromPropData<Contrast>(\n props.contrast as PropData<typeof ResponsiveSelect> \| undefined,\n )\n const contrast = findBreakpointOverride<Contrast>(\n runtime.getBreakpoints(),\n responsiveContrast,\n device,\n )\n\n return {\n hidden,\n label: 'Label text color',\n placeholder:\n contrast?.value === Contrasts.DARK ? 'rgba(255,255,255,0.95)' : 'rgba(0,0,0,0.8)',\n }\n }),\n submitTextStyle: TextStyle({ label: 'Button text style' }),\n brandColor: ResponsiveColor(props => ({\n label: 'Button color',\n placeholder: 'black',\n hidden: props.tableId == null,\n // TODO: Add hideAlphaSlider\n })),\n submitTextColor: ResponsiveColor(props => ({\n label: 'Button text color',\n placeholder: 'white',\n hidden: props.tableId == null,\n })),\n submitLabel: TextInput(props => ({\n label: 'Button label',\n placeholder: 'Submit',\n hidden: props.tableId == null,\n })),\n submitVariant: ResponsiveSelect(props => ({\n label: 'Button style',\n options: [\n { value: 'flat', label: 'Flat' },\n { value: 'outline', label: 'Outline' },\n { value: 'shadow', label: 'Floating' },\n { value: 'clear', label: 'Clear' },\n { value: 'blocky', label: 'Blocky' },\n { value: 'bubbly', label: 'Bubbly' },\n { value: 'skewed', label: 'Skewed' },\n ],\n defaultValue: 'flat',\n hidden: props.tableId == null,\n })),\n submitWidth: ResponsiveLength(props => ({\n label: 'Button width',\n hidden: props.tableId == null,\n // TODO: Add placeholder: { value: 'auto' }\n })),\n submitAlignment: ResponsiveIconRadioGroup(props => ({\n label: 'Button alignment',\n options: [\n { label: 'Left', value: Alignments.LEFT, icon: 'AlignLeft16' },\n { label: 'Center', value: Alignments.CENTER, icon: 'AlignCenter16' },\n { label: 'Right', value: Alignments.RIGHT, icon: 'AlignRight16' },\n ],\n defaultValue: Alignments.CENTER,\n hidden: props.tableId == null,\n })),\n width: Width({\n preset: [\n {\n deviceId: getBaseBreakpoint(runtime.getBreakpoints()).id,\n value: { value: 550, unit: 'px' },\n },\n ],\n defaultValue: { value: 100, unit: '%' },\n format: Width.Format.ClassName,\n }),\n margin: Margin({ format: Margin.Format.ClassName }),\n },\n },\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,~~yBAA0D~~;AAC1D,uBAAuC;AACvC,yBAA+D;AAC/D,6BAA8B;AAC9B,IAAAA,gBAAqB;AACrB,8BAeO;AAEA,SAAS,kBAAkB,SAAuB;AACvD,SAAO,QAAQ;AAAA,QACb,oBAAK,MAAM,6CAAO,QAAQ,GAAC;AAAA,IAC3B;AAAA,MACE,MAAM,wCAAuB;AAAA,MAC7B,OAAO;AAAA,MACP,MAAM,qCAAc;AAAA,MACpB,OAAO;AAAA,QACL,QAAI,mCAAU;AAAA,QACd,aAAS,+BAAM;AAAA,QACf,YAAQ,yCAAgB;AAAA,QACxB,gBAAY,8BAAK,YAAU;AAAA,UACzB,OAAO;AAAA;AAAA,UAEP,SAAS;AAAA,YACP,EAAE,OAAO,aAAa,OAAO,YAAY;AAAA,YACzC,EAAE,OAAO,YAAY,OAAO,WAAW;AAAA,UACzC;AAAA,UACA,QAAQ,MAAM,WAAW;AAAA,QAC3B,EAAE;AAAA,QACF,SAAK,8BAAK,YAAU;AAAA,UAClB,QAAQ;AAAA,YACN;AAAA,cACE,cAAU,~~sCAAkB~~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~~sCAAkB~~,QAAQ,eAAe,CAAC,EAAE;AAAA,cACtD,OAAO,EAAE,OAAO,KAAK,MAAM,KAAK;AAAA,YAClC;AAAA,UACF;AAAA,UACA,cAAc,EAAE,OAAO,KAAK,MAAM,IAAI;AAAA,UACtC,QAAQ,8BAAM,OAAO;AAAA,QACvB,CAAC;AAAA,QACD,YAAQ,gCAAO,EAAE,QAAQ,+BAAO,OAAO,UAAU,CAAC;AAAA,MACpD;AAAA,IACF;AAAA,EACF;AACF;","names":["import_react"]}
1	+ {"version":3,"sources":["../../../../../src/components/builtin/Form/register.ts"],"sourcesContent":["import { ReactRuntime } from '../../../runtimes/react'\nimport { findBreakpointOverride, getBaseBreakpoint } from '@makeswift/controls'\nimport { MakeswiftComponentType } from '../constants'\nimport { Alignments, Contrast, Contrasts, Shapes, Sizes } from './context/FormContext'\nimport { ComponentIcon } from '../../../state/modules/components-meta'\nimport { lazy } from 'react'\nimport {\n ElementID,\n GapY,\n Link,\n Margin,\n ResponsiveColor,\n ResponsiveLength,\n ResponsiveSelect,\n ResponsiveIconRadioGroup,\n Table,\n TableFormFields,\n TextInput,\n TextStyle,\n Width,\n type PropData,\n} from '@makeswift/prop-controllers'\n\nexport function registerComponent(runtime: ReactRuntime) {\n return runtime.registerComponent(\n lazy(() => import('./Form')),\n {\n type: MakeswiftComponentType.Form,\n label: 'Form',\n icon: ComponentIcon.Form,\n props: {\n id: ElementID(),\n tableId: Table(),\n fields: TableFormFields(),\n submitLink: Link(props => ({\n label: 'Redirect to',\n // TODO: This option is hardcoded. We should import it from LinkPanelOptions\n options: [\n { value: 'OPEN_PAGE', label: 'Open page' },\n { value: 'OPEN_URL', label: 'Open URL' },\n ],\n hidden: props.tableId == null,\n })),\n gap: GapY(props => ({\n preset: [\n {\n deviceId: getBaseBreakpoint(runtime.getBreakpoints()).id,\n value: { value: 10, unit: 'px' },\n },\n ],\n label: 'Gap',\n defaultValue: { value: 0, unit: 'px' },\n hidden: props.tableId == null,\n })),\n shape: ResponsiveIconRadioGroup(props => ({\n label: 'Shape',\n options: [\n { label: 'Pill', value: Shapes.PILL, icon: 'ButtonPill16' },\n { label: 'Rounded', value: Shapes.ROUNDED, icon: 'ButtonRounded16' },\n { label: 'Square', value: Shapes.SQUARE, icon: 'ButtonSquare16' },\n ],\n defaultValue: Shapes.ROUNDED,\n hidden: props.tableId == null,\n })),\n size: ResponsiveIconRadioGroup(props => ({\n label: 'Size',\n options: [\n { label: 'Small', value: Sizes.SMALL, icon: 'SizeSmall16' },\n { label: 'Medium', value: Sizes.MEDIUM, icon: 'SizeMedium16' },\n { label: 'Large', value: Sizes.LARGE, icon: 'SizeLarge16' },\n ],\n defaultValue: Sizes.MEDIUM,\n hidden: props?.tableId == null,\n })),\n contrast: ResponsiveIconRadioGroup(props => ({\n label: 'Color',\n options: [\n { label: 'Light mode', value: Contrasts.LIGHT, icon: 'Sun16' },\n { label: 'Dark mode', value: Contrasts.DARK, icon: 'Moon16' },\n ],\n defaultValue: Contrasts.LIGHT,\n hidden: props.tableId == null,\n })),\n labelTextStyle: TextStyle({ label: 'Label text style' }),\n labelTextColor: ResponsiveColor((props, device) => {\n const hidden = props.tableId == null\n const responsiveContrast = ResponsiveSelect.fromPropData<Contrast>(\n props.contrast as PropData<typeof ResponsiveSelect> \| undefined,\n )\n const contrast = findBreakpointOverride<Contrast>(\n runtime.getBreakpoints(),\n responsiveContrast,\n device,\n )\n\n return {\n hidden,\n label: 'Label text color',\n placeholder:\n contrast?.value === Contrasts.DARK ? 'rgba(255,255,255,0.95)' : 'rgba(0,0,0,0.8)',\n }\n }),\n submitTextStyle: TextStyle({ label: 'Button text style' }),\n brandColor: ResponsiveColor(props => ({\n label: 'Button color',\n placeholder: 'black',\n hidden: props.tableId == null,\n // TODO: Add hideAlphaSlider\n })),\n submitTextColor: ResponsiveColor(props => ({\n label: 'Button text color',\n placeholder: 'white',\n hidden: props.tableId == null,\n })),\n submitLabel: TextInput(props => ({\n label: 'Button label',\n placeholder: 'Submit',\n hidden: props.tableId == null,\n })),\n submitVariant: ResponsiveSelect(props => ({\n label: 'Button style',\n options: [\n { value: 'flat', label: 'Flat' },\n { value: 'outline', label: 'Outline' },\n { value: 'shadow', label: 'Floating' },\n { value: 'clear', label: 'Clear' },\n { value: 'blocky', label: 'Blocky' },\n { value: 'bubbly', label: 'Bubbly' },\n { value: 'skewed', label: 'Skewed' },\n ],\n defaultValue: 'flat',\n hidden: props.tableId == null,\n })),\n submitWidth: ResponsiveLength(props => ({\n label: 'Button width',\n hidden: props.tableId == null,\n // TODO: Add placeholder: { value: 'auto' }\n })),\n submitAlignment: ResponsiveIconRadioGroup(props => ({\n label: 'Button alignment',\n options: [\n { label: 'Left', value: Alignments.LEFT, icon: 'AlignLeft16' },\n { label: 'Center', value: Alignments.CENTER, icon: 'AlignCenter16' },\n { label: 'Right', value: Alignments.RIGHT, icon: 'AlignRight16' },\n ],\n defaultValue: Alignments.CENTER,\n hidden: props.tableId == null,\n })),\n width: Width({\n preset: [\n {\n deviceId: getBaseBreakpoint(runtime.getBreakpoints()).id,\n value: { value: 550, unit: 'px' },\n },\n ],\n defaultValue: { value: 100, unit: '%' },\n format: Width.Format.ClassName,\n }),\n margin: Margin({ format: Margin.Format.ClassName }),\n },\n },\n )\n}\n"],"mappings":"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","names":["import_react"]}

package/dist/cjs/components/builtin/Image/Image.js CHANGED Viewed

@@ -35,7 +35,7 @@ module.exports = __toCommonJS(Image_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_image = __toESM(require("next/image"));
-var import_breakpoints = require("../../../state/modules/breakpoints");
+var import_controls = require("@makeswift/controls");
 var import_placeholders = require("../../utils/placeholders");
 var import_Link = require("../../shared/Link");
 var import_css = require("@emotion/css");
@@ -56,10 +56,10 @@ function loadImage(src) {
 }
 function imageSizes(breakpoints, width) {
   const baseDevice = breakpoints.find((breakpoint) => breakpoint.maxWidth == null);
-  const baseWidth = baseDevice && width && (0, import_breakpoints.findBreakpointOverride)(breakpoints, width, baseDevice.id);
+  const baseWidth = baseDevice && width && (0, import_controls.findBreakpointOverride)(breakpoints, width, baseDevice.id);
   const baseWidthSize = baseWidth == null || baseWidth.value.unit !== "px" ? "100vw" : `${baseWidth.value.value}px`;
   return breakpoints.map((breakpoint) => {
-    const override = (0, import_breakpoints.findBreakpointOverride)(breakpoints, width, breakpoint.id);
+    const override = (0, import_controls.findBreakpointOverride)(breakpoints, width, breakpoint.id);
     if (override == null || breakpoint.maxWidth == null || override.value.unit !== "px") {
       return null;
     }

package/dist/cjs/components/builtin/Image/Image.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/components/builtin/Image/Image.tsx"],"sourcesContent":["'use client'\n\nimport { useState, useEffect, Ref, forwardRef } from 'react'\nimport NextImage from 'next/image'\nimport type NextLegacyImageType from 'next/legacy/image'\n\nimport {\n LinkData,\n ResponsiveLengthData,\n ImageData,\n ResponsiveOpacityValue,\n} from '@makeswift/prop-controllers'\nimport { Breakpoints, findBreakpointOverride } from '~~../../../state~~/~~modules/breakpoints~~'\nimport { placeholders } from '../../utils/placeholders'\nimport { Link } from '../../shared/Link'\nimport { cx } from '@emotion/css'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { useResponsiveStyle, useResponsiveWidth } from '../../utils/responsive-style'\nimport { useFile } from '../../../runtimes/react/hooks/makeswift-api'\nimport { major as nextMajorVersion } from '../../../next/next-version'\nimport { useBreakpoints } from '../../../runtimes/react/hooks/use-breakpoints'\nimport { match, P } from 'ts-pattern'\n\nconst NextLegacyImage = NextImage as typeof NextLegacyImageType\n\ntype Props = {\n id?: string\n file?: ImageData\n altText?: string\n link?: LinkData\n width?: ResponsiveLengthData\n margin?: string\n padding?: string\n border?: string\n borderRadius?: string\n boxShadow?: string\n opacity?: ResponsiveOpacityValue\n placeholder?: { src: string; dimensions: { width: number; height: number } }\n className?: string\n priority?: boolean\n}\n\nfunction loadImage(src: string): Promise<HTMLImageElement> {\n return new Promise<HTMLImageElement>((resolve, reject) => {\n const image = new Image()\n\n image.onload = () => resolve(image)\n image.onerror = reject\n image.src = src\n })\n}\n\nfunction imageSizes(breakpoints: Breakpoints, width?: Props['width']): string {\n const baseDevice = breakpoints.find(breakpoint => breakpoint.maxWidth == null)\n const baseWidth = baseDevice && width && findBreakpointOverride(breakpoints, width, baseDevice.id)\n const baseWidthSize =\n baseWidth == null \|\| baseWidth.value.unit !== 'px' ? '100vw' : `${baseWidth.value.value}px`\n\n return breakpoints\n .map(breakpoint => {\n const override = findBreakpointOverride(breakpoints, width, breakpoint.id)\n\n if (override == null \|\| breakpoint.maxWidth == null \|\| override.value.unit !== 'px') {\n return null\n }\n\n return `(max-width: ${breakpoint.maxWidth}px) ${Math.min(\n breakpoint.maxWidth,\n override.value.value,\n )}px`\n })\n .filter((size): size is NonNullable<typeof size> => size != null)\n .reduce((sourceSizes, sourceSize) => `${sourceSize}, ${sourceSizes}`, baseWidthSize)\n}\n\ntype Dimensions = {\n width: number\n height: number\n}\n\nconst ImageComponent = forwardRef(function Image(\n {\n id,\n width,\n margin,\n padding,\n file,\n border,\n borderRadius,\n altText,\n link,\n opacity,\n boxShadow,\n placeholder = placeholders.image,\n className,\n priority,\n }: Props,\n ref: Ref<HTMLAnchorElement & HTMLDivElement>,\n) {\n const fileId = match(file)\n .with(P.string, v => v)\n .with({ type: 'makeswift-file', version: 1 }, v => v.id)\n .otherwise(() => null)\n const fileData = useFile(fileId)\n const imageSrc = match([file, fileData])\n .with([P.any, P.not(P.nullish)], ([, fileData]) => fileData.publicUrl)\n .with([{ type: 'external-file', version: 1 }, P.any], ([file]) => file.url)\n .otherwise(() => placeholder.src)\n const dataDimensions = match([file, fileData, imageSrc])\n .with(\n [{ type: 'external-file', version: 1, width: P.number, height: P.number }, P.any, P.any],\n ([externalFile]) => ({ width: externalFile.width, height: externalFile.height }),\n )\n .with([P.any, P.not(P.nullish), P.any], ([, data]) => data.dimensions)\n .with([P.any, P.any, placeholder.src], () => placeholder.dimensions)\n .otherwise(() => null)\n const [measuredDimensions, setMeasuredDimensions] = useState<Dimensions \| null>(null)\n const breakpoints = useBreakpoints()\n\n useEffect(() => {\n if (dataDimensions) return\n\n let cleanedUp = false\n\n loadImage(imageSrc)\n .then(image => {\n if (!cleanedUp) {\n setMeasuredDimensions({ width: image.naturalWidth, height: image.naturalHeight })\n }\n })\n .catch(console.error)\n\n return () => {\n cleanedUp = true\n }\n }, [dataDimensions, imageSrc])\n\n const dimensions = dataDimensions ?? measuredDimensions\n const Container = link ? Link : 'div'\n const containerClassName = cx(\n useStyle({ lineHeight: 0, overflow: 'hidden' }),\n useStyle(useResponsiveWidth(width, dimensions?.width)),\n useStyle(useResponsiveStyle([opacity] as const, ([opacity = 1]) => ({ opacity }))),\n margin,\n padding,\n border,\n borderRadius,\n boxShadow,\n className,\n )\n\n if (!dimensions) return null\n\n return (\n <Container link={link} ref={ref} id={id} className={containerClassName}>\n {nextMajorVersion < 13 ? (\n <NextLegacyImage\n layout=\"responsive\"\n src={imageSrc}\n sizes={imageSizes(breakpoints, width)}\n alt={altText}\n width={dimensions.width}\n height={dimensions.height}\n priority={priority}\n />\n ) : (\n <NextImage\n src={imageSrc}\n priority={priority}\n sizes={imageSizes(breakpoints, width)}\n alt={altText ?? ''}\n width={dimensions.width}\n height={dimensions.height}\n style={{\n width: '100%',\n height: 'auto',\n }}\n />\n )}\n </Container>\n )\n})\n\nexport default ImageComponent\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;~~AA4JQ~~;~~AA1JR~~,mBAAqD;AACrD,mBAAsB;AAStB,~~yBAAoD~~;~~AACpD~~,0BAA6B;AAC7B,kBAAqB;AACrB,iBAAmB;AACnB,uBAAyB;AACzB,8BAAuD;AACvD,2BAAwB;AACxB,0BAA0C;AAC1C,6BAA+B;AAC/B,wBAAyB;AAEzB,MAAM,kBAAkB,aAAAA;AAmBxB,SAAS,UAAU,KAAwC;AACzD,SAAO,IAAI,QAA0B,CAAC,SAAS,WAAW;AACxD,UAAM,QAAQ,IAAI,MAAM;AAExB,UAAM,SAAS,MAAM,QAAQ,KAAK;AAClC,UAAM,UAAU;AAChB,UAAM,MAAM;AAAA,EACd,CAAC;AACH;AAEA,SAAS,WAAW,aAA0B,OAAgC;AAC5E,QAAM,aAAa,YAAY,KAAK,gBAAc,WAAW,YAAY,IAAI;AAC7E,QAAM,YAAY,cAAc,aAAS,~~2CAAuB~~,aAAa,OAAO,WAAW,EAAE;AACjG,QAAM,gBACJ,aAAa,QAAQ,UAAU,MAAM,SAAS,OAAO,UAAU,GAAG,UAAU,MAAM,KAAK;AAEzF,SAAO,YACJ,IAAI,gBAAc;AACjB,UAAM,eAAW,~~2CAAuB~~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","names":["NextImage","Image","fileData","file","opacity","nextMajorVersion"]}
1	+ {"version":3,"sources":["../../../../../src/components/builtin/Image/Image.tsx"],"sourcesContent":["'use client'\n\nimport { useState, useEffect, Ref, forwardRef } from 'react'\nimport NextImage from 'next/image'\nimport type NextLegacyImageType from 'next/legacy/image'\n\nimport {\n LinkData,\n ResponsiveLengthData,\n ImageData,\n ResponsiveOpacityValue,\n} from '@makeswift/prop-controllers'\nimport { type Breakpoints, findBreakpointOverride } from '@makeswift/controls'\n\nimport { placeholders } from '../../utils/placeholders'\nimport { Link } from '../../shared/Link'\nimport { cx } from '@emotion/css'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { useResponsiveStyle, useResponsiveWidth } from '../../utils/responsive-style'\nimport { useFile } from '../../../runtimes/react/hooks/makeswift-api'\nimport { major as nextMajorVersion } from '../../../next/next-version'\nimport { useBreakpoints } from '../../../runtimes/react/hooks/use-breakpoints'\nimport { match, P } from 'ts-pattern'\n\nconst NextLegacyImage = NextImage as typeof NextLegacyImageType\n\ntype Props = {\n id?: string\n file?: ImageData\n altText?: string\n link?: LinkData\n width?: ResponsiveLengthData\n margin?: string\n padding?: string\n border?: string\n borderRadius?: string\n boxShadow?: string\n opacity?: ResponsiveOpacityValue\n placeholder?: { src: string; dimensions: { width: number; height: number } }\n className?: string\n priority?: boolean\n}\n\nfunction loadImage(src: string): Promise<HTMLImageElement> {\n return new Promise<HTMLImageElement>((resolve, reject) => {\n const image = new Image()\n\n image.onload = () => resolve(image)\n image.onerror = reject\n image.src = src\n })\n}\n\nfunction imageSizes(breakpoints: Breakpoints, width?: Props['width']): string {\n const baseDevice = breakpoints.find(breakpoint => breakpoint.maxWidth == null)\n const baseWidth = baseDevice && width && findBreakpointOverride(breakpoints, width, baseDevice.id)\n const baseWidthSize =\n baseWidth == null \|\| baseWidth.value.unit !== 'px' ? '100vw' : `${baseWidth.value.value}px`\n\n return breakpoints\n .map(breakpoint => {\n const override = findBreakpointOverride(breakpoints, width, breakpoint.id)\n\n if (override == null \|\| breakpoint.maxWidth == null \|\| override.value.unit !== 'px') {\n return null\n }\n\n return `(max-width: ${breakpoint.maxWidth}px) ${Math.min(\n breakpoint.maxWidth,\n override.value.value,\n )}px`\n })\n .filter((size): size is NonNullable<typeof size> => size != null)\n .reduce((sourceSizes, sourceSize) => `${sourceSize}, ${sourceSizes}`, baseWidthSize)\n}\n\ntype Dimensions = {\n width: number\n height: number\n}\n\nconst ImageComponent = forwardRef(function Image(\n {\n id,\n width,\n margin,\n padding,\n file,\n border,\n borderRadius,\n altText,\n link,\n opacity,\n boxShadow,\n placeholder = placeholders.image,\n className,\n priority,\n }: Props,\n ref: Ref<HTMLAnchorElement & HTMLDivElement>,\n) {\n const fileId = match(file)\n .with(P.string, v => v)\n .with({ type: 'makeswift-file', version: 1 }, v => v.id)\n .otherwise(() => null)\n const fileData = useFile(fileId)\n const imageSrc = match([file, fileData])\n .with([P.any, P.not(P.nullish)], ([, fileData]) => fileData.publicUrl)\n .with([{ type: 'external-file', version: 1 }, P.any], ([file]) => file.url)\n .otherwise(() => placeholder.src)\n const dataDimensions = match([file, fileData, imageSrc])\n .with(\n [{ type: 'external-file', version: 1, width: P.number, height: P.number }, P.any, P.any],\n ([externalFile]) => ({ width: externalFile.width, height: externalFile.height }),\n )\n .with([P.any, P.not(P.nullish), P.any], ([, data]) => data.dimensions)\n .with([P.any, P.any, placeholder.src], () => placeholder.dimensions)\n .otherwise(() => null)\n const [measuredDimensions, setMeasuredDimensions] = useState<Dimensions \| null>(null)\n const breakpoints = useBreakpoints()\n\n useEffect(() => {\n if (dataDimensions) return\n\n let cleanedUp = false\n\n loadImage(imageSrc)\n .then(image => {\n if (!cleanedUp) {\n setMeasuredDimensions({ width: image.naturalWidth, height: image.naturalHeight })\n }\n })\n .catch(console.error)\n\n return () => {\n cleanedUp = true\n }\n }, [dataDimensions, imageSrc])\n\n const dimensions = dataDimensions ?? measuredDimensions\n const Container = link ? Link : 'div'\n const containerClassName = cx(\n useStyle({ lineHeight: 0, overflow: 'hidden' }),\n useStyle(useResponsiveWidth(width, dimensions?.width)),\n useStyle(useResponsiveStyle([opacity] as const, ([opacity = 1]) => ({ opacity }))),\n margin,\n padding,\n border,\n borderRadius,\n boxShadow,\n className,\n )\n\n if (!dimensions) return null\n\n return (\n <Container link={link} ref={ref} id={id} className={containerClassName}>\n {nextMajorVersion < 13 ? (\n <NextLegacyImage\n layout=\"responsive\"\n src={imageSrc}\n sizes={imageSizes(breakpoints, width)}\n alt={altText}\n width={dimensions.width}\n height={dimensions.height}\n priority={priority}\n />\n ) : (\n <NextImage\n src={imageSrc}\n priority={priority}\n sizes={imageSizes(breakpoints, width)}\n alt={altText ?? ''}\n width={dimensions.width}\n height={dimensions.height}\n style={{\n width: '100%',\n height: 'auto',\n }}\n />\n )}\n </Container>\n )\n})\n\nexport default ImageComponent\n"],"mappings":"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","names":["NextImage","Image","fileData","file","opacity","nextMajorVersion"]}

package/dist/cjs/components/builtin/Navigation/register.js CHANGED Viewed

@@ -31,7 +31,7 @@ __export(register_exports, {
   registerComponent: () => registerComponent
 });
 module.exports = __toCommonJS(register_exports);
-var import_breakpoints = require("../../../state/modules/breakpoints");
+var import_controls = require("@makeswift/controls");
 var import_constants = require("../constants");
 var import_components_meta = require("../../../state/modules/components-meta");
 var import_react2 = require("react");
@@ -41,7 +41,7 @@ function registerComponent(runtime) {
     const mobileMenuAnimation = import_prop_controllers.ResponsiveSelect.fromPropData(
       props.mobileMenuAnimation
     );
-    return !(0, import_breakpoints.findBreakpointOverride)(runtime.getBreakpoints(), mobileMenuAnimation, deviceId);
+    return !(0, import_controls.findBreakpointOverride)(runtime.getBreakpoints(), mobileMenuAnimation, deviceId);
   }
   return runtime.registerComponent(
     (0, import_react2.lazy)(() => Promise.resolve().then(() => __toESM(require("./Navigation")))),
@@ -75,7 +75,7 @@ function registerComponent(runtime) {
             [import_prop_controllers.ControlDataTypeKey]: import_prop_controllers.ResponsiveLengthPropControllerDataV1Type,
             value: [
               {
-                deviceId: (0, import_breakpoints.getBaseBreakpoint)(runtime.getBreakpoints()).id,
+                deviceId: (0, import_controls.getBaseBreakpoint)(runtime.getBreakpoints()).id,
                 value: { value: 100, unit: "px" }
               }
             ]
@@ -113,7 +113,7 @@ function registerComponent(runtime) {
         gutter: (0, import_prop_controllers.GapX)({
           preset: [
             {
-              deviceId: (0, import_breakpoints.getBaseBreakpoint)(runtime.getBreakpoints()).id,
+              deviceId: (0, import_controls.getBaseBreakpoint)(runtime.getBreakpoints()).id,
               value: { value: 10, unit: "px" }
             }
           ],