npm - @makeswift/runtime - Versions diffs - 0.15.0 → 0.16.0-canary.1 - Mend

@makeswift/runtime 0.15.0 → 0.16.0-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 (258) hide show

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 { Props } from '../../../prop-controllers'\nimport { 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'\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: Props.ElementID(),\n date: Props.Date(() => ({\n preset: new Date(Date.now() + 1000 * 60 * 60 * 24 * 2).toISOString(),\n })),\n variant: Props.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: Props.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: Props.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: Props.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: Props.Font({ label: 'Number font' }),\n numberColor: ~~Props.~~ResponsiveColor({\n label: 'Number color',\n placeholder: 'white',\n }),\n blockColor: ~~Props.~~ResponsiveColor({\n label: 'Block color',\n placeholder: 'black',\n }),\n labelFont: Props.Font({ label: 'Label font' }),\n labelColor: ~~Props.~~ResponsiveColor({\n label: 'Label color',\n placeholder: 'black',\n }),\n width: Props.Width({\n format: Props.Width.Format.ClassName,\n defaultValue: { value: 560, unit: 'px' },\n }),\n margin: Props.Margin({ format: Props.Margin.Format.ClassName }),\n daysLabel: Props.TextInput({ label: 'Days label', placeholder: 'Days' }),\n hoursLabel: Props.TextInput({ label: 'Hours label', placeholder: 'Hours' }),\n minutesLabel: Props.TextInput({\n label: 'Minutes label',\n placeholder: 'Minutes',\n }),\n secondsLabel: Props.TextInput({\n label: 'Seconds label',\n placeholder: 'Seconds',\n }),\n },\n },\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAAsB;AAEtB,yBAAkC;AAClC,uBAAuC;AACvC,6BAA8B;AAC9B,IAAAA,gBAAqB;~~AAEd~~,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,IAAI,8BAAM,UAAU;AAAA,QACpB,MAAM,8BAAM,KAAK,OAAO;AAAA,UACtB,QAAQ,IAAI,KAAK,KAAK,IAAI,IAAI,MAAO,KAAK,KAAK,KAAK,CAAC,EAAE,YAAY;AAAA,QACrE,EAAE;AAAA,QACF,SAAS,8BAAM,yBAAyB;AAAA,UACtC,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,OAAO,8BAAM,yBAAyB;AAAA,UACpC,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,MAAM,8BAAM,yBAAyB;AAAA,UACnC,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,KAAK,8BAAM,KAAK;AAAA,UACd,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,YAAY,8BAAM,KAAK,EAAE,OAAO,cAAc,CAAC;AAAA,QAC/C,~~aAAa~~,~~8BAAM,gBAAgB~~;AAAA,~~UACjC~~,OAAO;AAAA,UACP,aAAa;AAAA,QACf,CAAC;AAAA,QACD,~~YAAY~~,~~8BAAM,gBAAgB~~;AAAA,~~UAChC~~,OAAO;AAAA,UACP,aAAa;AAAA,QACf,CAAC;AAAA,QACD,WAAW,8BAAM,KAAK,EAAE,OAAO,aAAa,CAAC;AAAA,QAC7C,~~YAAY~~,~~8BAAM,gBAAgB~~;AAAA,~~UAChC~~,OAAO;AAAA,UACP,aAAa;AAAA,QACf,CAAC;AAAA,QACD,OAAO,8BAAM,MAAM;AAAA,UACjB,QAAQ,8BAAM,MAAM,OAAO;AAAA,UAC3B,cAAc,EAAE,OAAO,KAAK,MAAM,KAAK;AAAA,QACzC,CAAC;AAAA,QACD,QAAQ,8BAAM,OAAO,EAAE,QAAQ,8BAAM,OAAO,OAAO,UAAU,CAAC;AAAA,QAC9D,WAAW,8BAAM,UAAU,EAAE,OAAO,cAAc,aAAa,OAAO,CAAC;AAAA,QACvE,YAAY,8BAAM,UAAU,EAAE,OAAO,eAAe,aAAa,QAAQ,CAAC;AAAA,QAC1E,cAAc,8BAAM,UAAU;AAAA,UAC5B,OAAO;AAAA,UACP,aAAa;AAAA,QACf,CAAC;AAAA,QACD,cAAc,8BAAM,UAAU;AAAA,UAC5B,OAAO;AAAA,UACP,aAAa;AAAA,QACf,CAAC;AAAA,MACH;AAAA,IACF;AAAA,EACF;AACF;","names":["import_react"]}
1	+ {"version":3,"sources":["../../../../../src/components/builtin/Countdown/register.ts"],"sourcesContent":["import { Props } from '../../../prop-controllers'\nimport { 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 { ResponsiveColor } 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: Props.ElementID(),\n date: Props.Date(() => ({\n preset: new Date(Date.now() + 1000 * 60 * 60 * 24 * 2).toISOString(),\n })),\n variant: Props.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: Props.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: Props.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: Props.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: Props.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: Props.Font({ label: 'Label font' }),\n labelColor: ResponsiveColor({\n label: 'Label color',\n placeholder: 'black',\n }),\n width: Props.Width({\n format: Props.Width.Format.ClassName,\n defaultValue: { value: 560, unit: 'px' },\n }),\n margin: Props.Margin({ format: Props.Margin.Format.ClassName }),\n daysLabel: Props.TextInput({ label: 'Days label', placeholder: 'Days' }),\n hoursLabel: Props.TextInput({ label: 'Hours label', placeholder: 'Hours' }),\n minutesLabel: Props.TextInput({\n label: 'Minutes label',\n placeholder: 'Minutes',\n }),\n secondsLabel: Props.TextInput({\n label: 'Seconds label',\n placeholder: 'Seconds',\n }),\n },\n },\n )\n}\n"],"mappings":"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","names":["import_react","import_prop_controllers"]}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/components/builtin/Divider/Divider.tsx"],"sourcesContent":["import { forwardRef, Ref } from 'react'\n\nimport {\n ElementIDValue~~,\n ResponsiveLengthValue,\n~~ ResponsiveSelectValue~~,\n~~} from '../../../prop-controllers/descriptors'\nimport { colorToString } from '../../utils/colorToString'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { cx } from '@emotion/css'\nimport { useResponsiveStyle } from '../../utils/responsive-style'\n\ntype DividerVariant = 'solid' \| 'dashed' \| 'dotted' \| 'blended'\n\ntype Props = {\n id?: ElementIDValue\n variant?: ResponsiveSelectValue<DividerVariant>\n thickness?: ~~ResponsiveLengthValue~~\n color?: ResponsiveColor \| null\n width?: string\n margin?: string\n}\n\nconst Divider = forwardRef(function Divider(\n { id, variant, thickness, color, width, margin }: Props,\n ref: Ref<HTMLDivElement>,\n) {\n return (\n // IE11 has a bug with Flexbox vertical centering with min height if height is not set.\n // Wrapping it in another flex container fixes it for some reason, read more here:\n // https://stackoverflow.com/questions/19371626/flexbox-not-centering-vertically-in-ie\n <div\n ref={ref}\n id={id}\n className={cx(useStyle({ display: 'flex', width: '100%' }), width, margin)}\n >\n <div\n className={useStyle({\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'center',\n minHeight: 40,\n width: '100%',\n })}\n >\n <div\n className={useStyle(\n useResponsiveStyle(\n [variant, thickness, color] as const,\n ([\n variant = 'solid',\n thickness = { value: 1, unit: 'px' },\n color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n ]) => {\n switch (variant) {\n case 'solid':\n case 'dashed':\n case 'dotted':\n return {\n borderBottomWidth:\n thickness == null ? 1 : `${thickness.value}${thickness.unit}`,\n borderBottomStyle: variant,\n borderBottomColor: colorToString(color),\n }\n\n case 'blended':\n return {\n height: `${thickness.value}${thickness.unit}`,\n background: `linear-gradient(${[\n '90deg',\n colorToString({ swatch: color.swatch, alpha: 0 }),\n colorToString(color),\n colorToString({ swatch: color.swatch, alpha: 0 }),\n ].join(', ')})`,\n }\n\n default:\n variant as never\n throw new Error(`Invalid variant ${variant}.`)\n }\n },\n ),\n )}\n />\n </div>\n </div>\n )\n})\n\nexport default Divider\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;~~AA8CQ~~;~~AA9CR~~,mBAAgC;~~AAOhC~~,2BAA8B;AAE9B,uBAAyB;AACzB,iBAAmB;AACnB,8BAAmC;~~AAanC~~,MAAM,cAAU,yBAAW,SAASA,SAClC,EAAE,IAAI,SAAS,WAAW,OAAO,OAAO,OAAO,GAC/C,KACA;AACA;AAAA;AAAA;AAAA;AAAA,IAIE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,eAAW,mBAAG,2BAAS,EAAE,SAAS,QAAQ,OAAO,OAAO,CAAC,GAAG,OAAO,MAAM;AAAA,QAEzE;AAAA,UAAC;AAAA;AAAA,YACC,eAAW,2BAAS;AAAA,cAClB,SAAS;AAAA,cACT,eAAe;AAAA,cACf,gBAAgB;AAAA,cAChB,WAAW;AAAA,cACX,OAAO;AAAA,YACT,CAAC;AAAA,YAED;AAAA,cAAC;AAAA;AAAA,gBACC,eAAW;AAAA,sBACT;AAAA,oBACE,CAAC,SAAS,WAAW,KAAK;AAAA,oBAC1B,CAAC;AAAA,sBACCC,WAAU;AAAA,sBACVC,aAAY,EAAE,OAAO,GAAG,MAAM,KAAK;AAAA,sBACnCC,SAAQ,EAAE,QAAQ,EAAE,KAAK,GAAG,YAAY,GAAG,WAAW,EAAE,GAAG,OAAO,EAAE;AAAA,oBACtE,MAAM;AACJ,8BAAQF,UAAS;AAAA,wBACf,KAAK;AAAA,wBACL,KAAK;AAAA,wBACL,KAAK;AACH,iCAAO;AAAA,4BACL,mBACEC,cAAa,OAAO,IAAI,GAAGA,WAAU,KAAK,GAAGA,WAAU,IAAI;AAAA,4BAC7D,mBAAmBD;AAAA,4BACnB,uBAAmB,oCAAcE,MAAK;AAAA,0BACxC;AAAA,wBAEF,KAAK;AACH,iCAAO;AAAA,4BACL,QAAQ,GAAGD,WAAU,KAAK,GAAGA,WAAU,IAAI;AAAA,4BAC3C,YAAY,mBAAmB;AAAA,8BAC7B;AAAA,kCACA,oCAAc,EAAE,QAAQC,OAAM,QAAQ,OAAO,EAAE,CAAC;AAAA,kCAChD,oCAAcA,MAAK;AAAA,kCACnB,oCAAc,EAAE,QAAQA,OAAM,QAAQ,OAAO,EAAE,CAAC;AAAA,4BAClD,EAAE,KAAK,IAAI,CAAC;AAAA,0BACd;AAAA,wBAEF;AACE,0BAAAF;AACA,gCAAM,IAAI,MAAM,mBAAmBA,QAAO,GAAG;AAAA,sBACjD;AAAA,oBACF;AAAA,kBACF;AAAA,gBACF;AAAA;AAAA,YACF;AAAA;AAAA,QACF;AAAA;AAAA,IACF;AAAA;AAEJ,CAAC;AAED,IAAO,kBAAQ;","names":["Divider","variant","thickness","color"]}
1	+ {"version":3,"sources":["../../../../../src/components/builtin/Divider/Divider.tsx"],"sourcesContent":["import { forwardRef, Ref } from 'react'\n\nimport { ElementIDValue, ResponsiveSelectValue } from '../../../prop-controllers/descriptors'\nimport { colorToString } from '../../utils/colorToString'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { cx } from '@emotion/css'\nimport { useResponsiveStyle } from '../../utils/responsive-style'\nimport { ResponsiveLengthData } from '@makeswift/prop-controllers'\n\ntype DividerVariant = 'solid' \| 'dashed' \| 'dotted' \| 'blended'\n\ntype Props = {\n id?: ElementIDValue\n variant?: ResponsiveSelectValue<DividerVariant>\n thickness?: ResponsiveLengthData\n color?: ResponsiveColor \| null\n width?: string\n margin?: string\n}\n\nconst Divider = forwardRef(function Divider(\n { id, variant, thickness, color, width, margin }: Props,\n ref: Ref<HTMLDivElement>,\n) {\n return (\n // IE11 has a bug with Flexbox vertical centering with min height if height is not set.\n // Wrapping it in another flex container fixes it for some reason, read more here:\n // https://stackoverflow.com/questions/19371626/flexbox-not-centering-vertically-in-ie\n <div\n ref={ref}\n id={id}\n className={cx(useStyle({ display: 'flex', width: '100%' }), width, margin)}\n >\n <div\n className={useStyle({\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'center',\n minHeight: 40,\n width: '100%',\n })}\n >\n <div\n className={useStyle(\n useResponsiveStyle(\n [variant, thickness, color] as const,\n ([\n variant = 'solid',\n thickness = { value: 1, unit: 'px' },\n color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n ]) => {\n switch (variant) {\n case 'solid':\n case 'dashed':\n case 'dotted':\n return {\n borderBottomWidth:\n thickness == null ? 1 : `${thickness.value}${thickness.unit}`,\n borderBottomStyle: variant,\n borderBottomColor: colorToString(color),\n }\n\n case 'blended':\n return {\n height: `${thickness.value}${thickness.unit}`,\n background: `linear-gradient(${[\n '90deg',\n colorToString({ swatch: color.swatch, alpha: 0 }),\n colorToString(color),\n colorToString({ swatch: color.swatch, alpha: 0 }),\n ].join(', ')})`,\n }\n\n default:\n variant as never\n throw new Error(`Invalid variant ${variant}.`)\n }\n },\n ),\n )}\n />\n </div>\n </div>\n )\n})\n\nexport default Divider\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA2CQ;AA3CR,mBAAgC;AAGhC,2BAA8B;AAE9B,uBAAyB;AACzB,iBAAmB;AACnB,8BAAmC;AAcnC,MAAM,cAAU,yBAAW,SAASA,SAClC,EAAE,IAAI,SAAS,WAAW,OAAO,OAAO,OAAO,GAC/C,KACA;AACA;AAAA;AAAA;AAAA;AAAA,IAIE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,eAAW,mBAAG,2BAAS,EAAE,SAAS,QAAQ,OAAO,OAAO,CAAC,GAAG,OAAO,MAAM;AAAA,QAEzE;AAAA,UAAC;AAAA;AAAA,YACC,eAAW,2BAAS;AAAA,cAClB,SAAS;AAAA,cACT,eAAe;AAAA,cACf,gBAAgB;AAAA,cAChB,WAAW;AAAA,cACX,OAAO;AAAA,YACT,CAAC;AAAA,YAED;AAAA,cAAC;AAAA;AAAA,gBACC,eAAW;AAAA,sBACT;AAAA,oBACE,CAAC,SAAS,WAAW,KAAK;AAAA,oBAC1B,CAAC;AAAA,sBACCC,WAAU;AAAA,sBACVC,aAAY,EAAE,OAAO,GAAG,MAAM,KAAK;AAAA,sBACnCC,SAAQ,EAAE,QAAQ,EAAE,KAAK,GAAG,YAAY,GAAG,WAAW,EAAE,GAAG,OAAO,EAAE;AAAA,oBACtE,MAAM;AACJ,8BAAQF,UAAS;AAAA,wBACf,KAAK;AAAA,wBACL,KAAK;AAAA,wBACL,KAAK;AACH,iCAAO;AAAA,4BACL,mBACEC,cAAa,OAAO,IAAI,GAAGA,WAAU,KAAK,GAAGA,WAAU,IAAI;AAAA,4BAC7D,mBAAmBD;AAAA,4BACnB,uBAAmB,oCAAcE,MAAK;AAAA,0BACxC;AAAA,wBAEF,KAAK;AACH,iCAAO;AAAA,4BACL,QAAQ,GAAGD,WAAU,KAAK,GAAGA,WAAU,IAAI;AAAA,4BAC3C,YAAY,mBAAmB;AAAA,8BAC7B;AAAA,kCACA,oCAAc,EAAE,QAAQC,OAAM,QAAQ,OAAO,EAAE,CAAC;AAAA,kCAChD,oCAAcA,MAAK;AAAA,kCACnB,oCAAc,EAAE,QAAQA,OAAM,QAAQ,OAAO,EAAE,CAAC;AAAA,4BAClD,EAAE,KAAK,IAAI,CAAC;AAAA,0BACd;AAAA,wBAEF;AACE,0BAAAF;AACA,gCAAM,IAAI,MAAM,mBAAmBA,QAAO,GAAG;AAAA,sBACjD;AAAA,oBACF;AAAA,kBACF;AAAA,gBACF;AAAA;AAAA,YACF;AAAA;AAAA,QACF;AAAA;AAAA,IACF;AAAA;AAEJ,CAAC;AAED,IAAO,kBAAQ;","names":["Divider","variant","thickness","color"]}

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

@@ -35,6 +35,7 @@ var import_prop_controllers = require("../../../prop-controllers");
 var import_constants = require("../constants");
 var import_components_meta = require("../../../state/modules/components-meta");
 var import_react2 = require("react");
+var import_prop_controllers2 = require("@makeswift/prop-controllers");
 function registerComponent(runtime) {
   return runtime.registerComponent(
     (0, import_react2.lazy)(() => Promise.resolve().then(() => __toESM(require("./Divider")))),
@@ -55,12 +56,12 @@ function registerComponent(runtime) {
           ],
           defaultValue: "solid"
         }),
-        thickness: import_prop_controllers.Props.ResponsiveLength({
+        thickness: (0, import_prop_controllers2.ResponsiveLength)({
           label: "Height",
           defaultValue: { value: 1, unit: "px" },
           options: [{ value: "px", label: "Pixels", icon: "Px16" }]
         }),
-        color: import_prop_controllers.Props.ResponsiveColor({ placeholder: "black" }),
+        color: (0, import_prop_controllers2.ResponsiveColor)({ placeholder: "black" }),
         width: import_prop_controllers.Props.Width({
           format: import_prop_controllers.Props.Width.Format.ClassName,
           defaultValue: { value: 100, unit: "%" }

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/components/builtin/Divider/register.ts"],"sourcesContent":["import { Props } from '../../../prop-controllers'\nimport { ReactRuntime } from '../../../runtimes/react'\nimport { MakeswiftComponentType } from '../constants'\nimport { ComponentIcon } from '../../../state/modules/components-meta'\nimport { lazy } from 'react'\n\nexport function registerComponent(runtime: ReactRuntime) {\n return runtime.registerComponent(\n lazy(() => import('./Divider')),\n {\n type: MakeswiftComponentType.Divider,\n label: 'Divider',\n icon: ComponentIcon.Divider,\n props: {\n id: Props.ElementID(),\n variant: Props.ResponsiveSelect({\n label: 'Style',\n labelOrientation: 'horizontal',\n options: [\n { value: 'solid', label: 'Solid' },\n { value: 'dashed', label: 'Dashed' },\n { value: 'dotted', label: 'Dotted' },\n { value: 'blended', label: 'Blended' },\n ],\n defaultValue: 'solid',\n }),\n thickness: ~~Props.~~ResponsiveLength({\n label: 'Height',\n defaultValue: { value: 1, unit: 'px' },\n options: [{ value: 'px', label: 'Pixels', icon: 'Px16' }],\n }),\n color: ~~Props.~~ResponsiveColor({ placeholder: 'black' }),\n width: Props.Width({\n format: Props.Width.Format.ClassName,\n defaultValue: { value: 100, unit: '%' },\n }),\n margin: Props.Margin({ format: Props.Margin.Format.ClassName }),\n },\n },\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAAsB;AAEtB,uBAAuC;AACvC,6BAA8B;AAC9B,IAAAA,gBAAqB;~~AAEd~~,SAAS,kBAAkB,SAAuB;AACvD,SAAO,QAAQ;AAAA,QACb,oBAAK,MAAM,6CAAO,WAAW,GAAC;AAAA,IAC9B;AAAA,MACE,MAAM,wCAAuB;AAAA,MAC7B,OAAO;AAAA,MACP,MAAM,qCAAc;AAAA,MACpB,OAAO;AAAA,QACL,IAAI,8BAAM,UAAU;AAAA,QACpB,SAAS,8BAAM,iBAAiB;AAAA,UAC9B,OAAO;AAAA,UACP,kBAAkB;AAAA,UAClB,SAAS;AAAA,YACP,EAAE,OAAO,SAAS,OAAO,QAAQ;AAAA,YACjC,EAAE,OAAO,UAAU,OAAO,SAAS;AAAA,YACnC,EAAE,OAAO,UAAU,OAAO,SAAS;AAAA,YACnC,EAAE,OAAO,WAAW,OAAO,UAAU;AAAA,UACvC;AAAA,UACA,cAAc;AAAA,QAChB,CAAC;AAAA,QACD,~~WAAW~~,~~8BAAM,iBAAiB~~;AAAA,~~UAChC~~,OAAO;AAAA,UACP,cAAc,EAAE,OAAO,GAAG,MAAM,KAAK;AAAA,UACrC,SAAS,CAAC,EAAE,OAAO,MAAM,OAAO,UAAU,MAAM,OAAO,CAAC;AAAA,QAC1D,CAAC;AAAA,QACD,~~OAAO~~,~~8BAAM~~,~~gBAAgB,~~EAAE,aAAa,QAAQ,CAAC;AAAA,~~QACrD~~,OAAO,8BAAM,MAAM;AAAA,UACjB,QAAQ,8BAAM,MAAM,OAAO;AAAA,UAC3B,cAAc,EAAE,OAAO,KAAK,MAAM,IAAI;AAAA,QACxC,CAAC;AAAA,QACD,QAAQ,8BAAM,OAAO,EAAE,QAAQ,8BAAM,OAAO,OAAO,UAAU,CAAC;AAAA,MAChE;AAAA,IACF;AAAA,EACF;AACF;","names":["import_react"]}
1	+ {"version":3,"sources":["../../../../../src/components/builtin/Divider/register.ts"],"sourcesContent":["import { Props } from '../../../prop-controllers'\nimport { ReactRuntime } from '../../../runtimes/react'\nimport { MakeswiftComponentType } from '../constants'\nimport { ComponentIcon } from '../../../state/modules/components-meta'\nimport { lazy } from 'react'\nimport { ResponsiveColor, ResponsiveLength } from '@makeswift/prop-controllers'\n\nexport function registerComponent(runtime: ReactRuntime) {\n return runtime.registerComponent(\n lazy(() => import('./Divider')),\n {\n type: MakeswiftComponentType.Divider,\n label: 'Divider',\n icon: ComponentIcon.Divider,\n props: {\n id: Props.ElementID(),\n variant: Props.ResponsiveSelect({\n label: 'Style',\n labelOrientation: 'horizontal',\n options: [\n { value: 'solid', label: 'Solid' },\n { value: 'dashed', label: 'Dashed' },\n { value: 'dotted', label: 'Dotted' },\n { value: 'blended', label: 'Blended' },\n ],\n defaultValue: 'solid',\n }),\n thickness: ResponsiveLength({\n label: 'Height',\n defaultValue: { value: 1, unit: 'px' },\n options: [{ value: 'px', label: 'Pixels', icon: 'Px16' }],\n }),\n color: ResponsiveColor({ placeholder: 'black' }),\n width: Props.Width({\n format: Props.Width.Format.ClassName,\n defaultValue: { value: 100, unit: '%' },\n }),\n margin: Props.Margin({ format: Props.Margin.Format.ClassName }),\n },\n },\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAAsB;AAEtB,uBAAuC;AACvC,6BAA8B;AAC9B,IAAAA,gBAAqB;AACrB,IAAAC,2BAAkD;AAE3C,SAAS,kBAAkB,SAAuB;AACvD,SAAO,QAAQ;AAAA,QACb,oBAAK,MAAM,6CAAO,WAAW,GAAC;AAAA,IAC9B;AAAA,MACE,MAAM,wCAAuB;AAAA,MAC7B,OAAO;AAAA,MACP,MAAM,qCAAc;AAAA,MACpB,OAAO;AAAA,QACL,IAAI,8BAAM,UAAU;AAAA,QACpB,SAAS,8BAAM,iBAAiB;AAAA,UAC9B,OAAO;AAAA,UACP,kBAAkB;AAAA,UAClB,SAAS;AAAA,YACP,EAAE,OAAO,SAAS,OAAO,QAAQ;AAAA,YACjC,EAAE,OAAO,UAAU,OAAO,SAAS;AAAA,YACnC,EAAE,OAAO,UAAU,OAAO,SAAS;AAAA,YACnC,EAAE,OAAO,WAAW,OAAO,UAAU;AAAA,UACvC;AAAA,UACA,cAAc;AAAA,QAChB,CAAC;AAAA,QACD,eAAW,2CAAiB;AAAA,UAC1B,OAAO;AAAA,UACP,cAAc,EAAE,OAAO,GAAG,MAAM,KAAK;AAAA,UACrC,SAAS,CAAC,EAAE,OAAO,MAAM,OAAO,UAAU,MAAM,OAAO,CAAC;AAAA,QAC1D,CAAC;AAAA,QACD,WAAO,0CAAgB,EAAE,aAAa,QAAQ,CAAC;AAAA,QAC/C,OAAO,8BAAM,MAAM;AAAA,UACjB,QAAQ,8BAAM,MAAM,OAAO;AAAA,UAC3B,cAAc,EAAE,OAAO,KAAK,MAAM,IAAI;AAAA,QACxC,CAAC;AAAA,QACD,QAAQ,8BAAM,OAAO,EAAE,QAAQ,8BAAM,OAAO,OAAO,UAAU,CAAC;AAAA,MAChE;AAAA,IACF;AAAA,EACF;AACF;","names":["import_react","import_prop_controllers"]}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/components/builtin/Form/Form.tsx"],"sourcesContent":["'use client'\n\nimport {\n useState,\n useEffect,\n useRef,\n useMemo,\n forwardRef,\n ComponentPropsWithoutRef,\n Ref,\n useImperativeHandle,\n ForwardedRef,\n} from 'react'\nimport { Formik, getIn } from 'formik'\n\nimport { Check12 } from '../../icons/Check12'\n\nimport { getSizeHeight as getInputSizeHeight } from './components/Field/components/Input'\n\nimport {\n Size,\n Sizes,\n Provider as FormContextProvider,\n Shape,\n Contrast,\n Alignment,\n Alignments,\n} from './context/FormContext'\nimport Placeholder from './components/Placeholder'\nimport Field from './components/Field'\nimport Spinner from './components/Spinner'\nimport Button from '../Button'\nimport type { TableColumn } from './types'\nimport {\n ElementIDValue,\n GapYValue,\n LinkValue,\n ResponsiveIconRadioGroupValue,\n ResponsiveLengthValue,\n ResponsiveSelectValue,\n ResponsiveValue,\n TableFormFieldsDescriptor,\n TableFormFieldsValue,\n TableValue,\n TextInputValue,\n TextStyleValue,\n} from '../../../prop-controllers/descriptors'\nimport { Link } from '../../shared/Link'\nimport { BoxModelHandle, getBox } from '../../../box-model'\nimport { PropControllersHandle } from '../../../state/modules/prop-controller-handles'\nimport { DescriptorsPropControllers } from '../../../prop-controllers/instances'\nimport { useTableFormFieldRefs } from '../../hooks/useTableFormFieldRefs'\nimport { useMakeswiftHostApiClient } from '../../../next/context/makeswift-host-api-client'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\nimport { cx } from '@emotion/css'\nimport { useResponsiveGridItem, useResponsiveStyle } from '../../utils/responsive-style'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { useTable } from '../../../runtimes/react/hooks/makeswift-api'\n\nconst LOCAL_STORAGE_NAMESPACE = '@@makeswift/components/form'\n\nfunction getSizeFontSize(size: Size): number {\n switch (size) {\n case Sizes.SMALL:\n return 12\n\n case Sizes.MEDIUM:\n return 14\n\n case Sizes.LARGE:\n return 18\n\n default:\n throw new Error(`Invalid form size \"${size}\"`)\n }\n}\n\ntype Props = {\n id?: ElementIDValue\n tableId?: TableValue\n fields?: TableFormFieldsValue\n submitLink?: LinkValue\n gap?: GapYValue\n shape?: ResponsiveIconRadioGroupValue<Shape>\n size?: ResponsiveIconRadioGroupValue<Size>\n contrast?: ResponsiveIconRadioGroupValue<Contrast>\n labelTextStyle?: TextStyleValue\n labelTextColor?: ResponsiveColor \| null\n submitTextStyle?: TextStyleValue\n brandColor?: ResponsiveColor \| null\n submitTextColor?: ResponsiveColor \| null\n submitLabel?: TextInputValue\n submitVariant?: ResponsiveSelectValue<\n 'flat' \| 'outline' \| 'shadow' \| 'clear' \| 'blocky' \| 'bubbly' \| 'skewed'\n >\n submitWidth?: ResponsiveLengthValue\n submitAlignment?: ResponsiveIconRadioGroupValue<Alignment>\n width?: string\n margin?: string\n}\n\ntype GridFormBaseProps = { size?: Props['size'] }\n\ntype GridFormProps = GridFormBaseProps &\n Omit<ComponentPropsWithoutRef<'form'>, keyof GridFormBaseProps>\n\nconst GridForm = forwardRef(function GridFrom(\n { className, size, ...restOfProps }: GridFormProps,\n ref: ForwardedRef<HTMLFormElement>,\n) {\n return (\n <form\n {...restOfProps}\n ref={ref}\n className={cx(\n useStyle({ display: 'flex', flexWrap: 'wrap', width: '100%' }),\n useStyle(\n useResponsiveStyle([size] as const, ([size = Sizes.MEDIUM]) => ({\n fontSize: getSizeFontSize(size),\n })),\n ),\n className,\n )}\n />\n )\n})\n\ntype GridItemBaseProps = {\n grid: ResponsiveValue<{ spans: number[][]; count: number }>\n index: number\n rowGap: Props['gap']\n columnGap: Props['gap']\n}\n\ntype GridItemProps = GridItemBaseProps &\n Omit<ComponentPropsWithoutRef<'div'>, keyof GridItemBaseProps>\n\nconst GridItem = forwardRef(function GridItem(\n { className, grid, index, rowGap, columnGap, ...restOfProps }: GridItemProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n return (\n <div\n {...restOfProps}\n ref={ref}\n className={cx(\n useStyle({ alignSelf: 'flex-end', flexDirection: 'column' }),\n useStyle(useResponsiveGridItem({ grid, index, rowGap, columnGap })),\n className,\n )}\n />\n )\n})\n\nfunction getAlignmentMargin(alignment: Alignment): string {\n switch (alignment) {\n case Alignments.LEFT:\n return '0 auto 0 0'\n case Alignments.RIGHT:\n return '0 0 0 auto'\n default:\n return '0 auto'\n }\n}\n\ntype StyledButtonBaseProps = { size?: Props['size']; alignment?: Props['submitAlignment'] }\n\ntype StyledButtonProps = StyledButtonBaseProps &\n Omit<ComponentPropsWithoutRef<typeof Button>, keyof StyledButtonBaseProps>\n\nfunction StyledButton({ className, size, alignment, ...restOfProps }: StyledButtonProps) {\n return (\n <Button\n {...restOfProps}\n as=\"button\"\n className={cx(\n useStyle({ display: 'flex', alignItems: 'center', justifyContent: 'center' }),\n useStyle(\n useResponsiveStyle(\n [size, alignment] as const,\n ([size = Sizes.MEDIUM, alignment = Alignments.CENTER]) => ({\n minHeight: getInputSizeHeight(size),\n maxHeight: getInputSizeHeight(size),\n margin: getAlignmentMargin(alignment),\n paddingTop: 0,\n paddingBottom: 0,\n }),\n ),\n ),\n className,\n )}\n />\n )\n}\n\nfunction ErrorContainer({ className, ...restOfProps }: ComponentPropsWithoutRef<'div'>) {\n return (\n <div\n {...restOfProps}\n className={cx(\n useStyle({\n padding: '8px 16px',\n backgroundColor: '#f19eb9',\n borderRadius: 4,\n marginTop: 16,\n }),\n className,\n )}\n />\n )\n}\n\nfunction IconContainer({ className, ...restOfProps }: ComponentPropsWithoutRef<'div'>) {\n return <div {...restOfProps} className={cx(useStyle({ fill: 'currentColor' }), className)} />\n}\n\nfunction ErrorMessage({ className, ...restOfProps }: ComponentPropsWithoutRef<'p'>) {\n return (\n <p\n {...restOfProps}\n className={cx(\n useStyle({ fontSize: 12, margin: '8px 0', color: 'rgba(127, 0, 0, 0.95)' }),\n className,\n )}\n />\n )\n}\n\nfunction getTableColumnDefaultValue(tableColumn: TableColumn) {\n switch (tableColumn.__typename) {\n case 'CheckboxTableColumn':\n return false\n\n case 'MultipleSelectTableColumn':\n return []\n\n case 'SingleLineTextTableColumn':\n case 'LongTextTableColumn':\n case 'SingleSelectTableColumn':\n case 'PhoneNumberTableColumn':\n case 'EmailTableColumn':\n case 'URLTableColumn':\n case 'NumberTableColumn':\n default:\n return ''\n }\n}\n\ntype Column = { columnId: string; data: Record<string, any> }\ntype Fields = Record<string, string \| string[] \| boolean>\n\ntype Descriptors = { fields?: TableFormFieldsDescriptor }\n\nconst Form = forwardRef(function Form(\n {\n id,\n tableId,\n fields: fieldsProp,\n submitLabel = 'Submit',\n submitLink,\n shape,\n size,\n contrast,\n brandColor,\n gap,\n width,\n margin,\n submitTextStyle,\n submitVariant,\n submitTextColor,\n submitWidth,\n submitAlignment,\n labelTextStyle,\n labelTextColor,\n }: Props,\n ref: Ref<BoxModelHandle & PropControllersHandle<Descriptors>>,\n) {\n const fields = useMemo(() => fieldsProp?.fields ?? [], [fieldsProp])\n const grid = useMemo(() => fieldsProp?.grid ?? [], [fieldsProp])\n const table = useTable(tableId ?? null)\n const client = useMakeswiftHostApiClient()\n const [refEl, setRefEl] = useState<HTMLElement \| null>(null)\n const [propControllers, setPropControllers] =\n useState<DescriptorsPropControllers<Descriptors> \| null>(null)\n const [initialValues, setInitialValues] = useState<Fields>(() =>\n fields.reduce((acc, formField) => {\n const tableColumn = table && table.columns.find(field => field.id === formField.tableColumnId)\n const defaultValue = formField ? formField.defaultValue : null\n\n if (tableColumn) {\n acc[tableColumn.name] =\n defaultValue == null ? getTableColumnDefaultValue(tableColumn) : defaultValue\n }\n\n return acc\n }, {} as Fields),\n )\n const controller = propControllers?.fields\n const { container, items } = useTableFormFieldRefs(controller, { fieldsCount: fields.length })\n const [isDone, setIsDone] = useState(false)\n const linkRef = useRef<HTMLAnchorElement>(null)\n\n useImperativeHandle(\n ref,\n () => ({\n getDomNode() {\n return refEl instanceof Element ? refEl : null\n },\n getBoxModel() {\n return refEl instanceof Element ? getBox(refEl) : null\n },\n setPropControllers,\n }),\n [refEl, setPropControllers],\n )\n\n useEffect(() => {\n container(refEl)\n }, [container, refEl])\n\n useEffect(() => {\n if (!isDone) return\n\n let timeoutId = setTimeout(() => setIsDone(false), 2500)\n\n return () => clearTimeout(timeoutId)\n }, [isDone])\n\n function getTableColumn({ tableColumnId }: any) {\n return table && table.columns.find(field => tableColumnId === field.id)\n }\n\n async function handleSubmit(values: any, { setSubmitting, resetForm, setStatus }: any) {\n if (table) {\n const columns: Column[] = []\n\n fields.forEach(field => {\n const tableColumn = getTableColumn(field)\n\n if (tableColumn) {\n const data = values[tableColumn.name]\n\n if (data) {\n columns.push({ columnId: field.tableColumnId, data })\n\n if (field.autofill) {\n localStorage.setItem(\n `${LOCAL_STORAGE_NAMESPACE}/${tableColumn.name}`,\n JSON.stringify(data),\n )\n }\n }\n }\n })\n\n try {\n await client.createTableRecord(table.id, columns)\n setIsDone(true)\n setInitialValues(prev =>\n fields.reduce(\n (acc, field) => {\n const tableColumn = getTableColumn(field)\n\n if (tableColumn) {\n const data = values[tableColumn.name]\n\n if (data && field.autofill) return { ...acc, [tableColumn.name]: data }\n }\n\n return acc\n },\n { ...prev },\n ),\n )\n resetForm()\n\n if (linkRef.current != null) linkRef.current.click()\n } catch (error) {\n setStatus({ error: 'An unexpected error has occurred, please try again later' })\n } finally {\n setSubmitting(false)\n }\n }\n }\n\n useEffect(() => {\n setInitialValues(prev =>\n fields.reduce(\n (acc, formField) => {\n const tableColumn =\n table && table.columns.find(field => field.id === formField.tableColumnId)\n\n if (tableColumn && formField.autofill) {\n const storedValue = localStorage.getItem(\n `${LOCAL_STORAGE_NAMESPACE}/${tableColumn.name}`,\n )\n\n if (storedValue) {\n try {\n acc[tableColumn.name] = JSON.parse(storedValue)\n } catch (e) {\n // Ignore\n }\n }\n }\n\n return acc\n },\n { ...prev },\n ),\n )\n }, [fields, table])\n\n return (\n <FormContextProvider\n value={{ shape, size, contrast, brandColor, labelTextStyle, labelTextColor }}\n >\n {tableId == null ? (\n <Placeholder ref={setRefEl} width={width} margin={margin} />\n ) : (\n <>\n <Formik\n onSubmit={handleSubmit}\n initialValues={initialValues}\n initialStatus={{ error: null }}\n enableReinitialize\n >\n {formik => {\n const error = formik.status && formik.status.error\n const errors = fields\n .map(field => {\n const tableColumn = getTableColumn(field)\n\n return (\n tableColumn &&\n getIn(formik.touched, tableColumn.name) &&\n getIn(formik.errors, tableColumn.name)\n )\n })\n .filter(message => typeof message === 'string')\n\n return (\n <>\n <GridForm\n ref={setRefEl}\n id={id}\n className={cx(width, margin)}\n size={size}\n onSubmit={formik.handleSubmit}\n onReset={formik.handleReset}\n noValidate\n >\n {fields.map((field, index) => {\n const tableColumn = getTableColumn(field)\n\n return (\n <GridItem\n key={field.id}\n ref={items[index]}\n grid={grid}\n index={index}\n rowGap={gap}\n columnGap={gap}\n >\n <Field tableColumn={tableColumn} tableFormField={field} />\n </GridItem>\n )\n })}\n <GridItem\n ref={items[fields.length]}\n grid={grid}\n index={fields.length}\n rowGap={gap}\n columnGap={gap}\n >\n <StyledButton\n type=\"submit\"\n // @ts-ignore: `disabled` is in `'button'` but not in `T`.\n disabled={formik.isSubmitting \|\| isDone}\n shape={shape}\n size={size}\n color={brandColor}\n variant={submitVariant}\n textColor={submitTextColor}\n width={submitWidth}\n alignment={submitAlignment}\n textStyle={submitTextStyle}\n >\n {formik.isSubmitting ? (\n <Spinner />\n ) : isDone ? (\n <IconContainer>\n <Check12 />\n </IconContainer>\n ) : (\n submitLabel\n )}\n </StyledButton>\n {(errors.length > 0 \|\| error) && (\n <ErrorContainer>\n {errors.map(message => (\n <ErrorMessage key={message}>{message}</ErrorMessage>\n ))}\n {error != null && <ErrorMessage>{error}</ErrorMessage>}\n </ErrorContainer>\n )}\n </GridItem>\n </GridForm>\n {submitLink != null && <Link ref={linkRef} hidden link={submitLink} />}\n </>\n )\n }}\n </Formik>\n </>\n )}\n </FormContextProvider>\n )\n})\n\nexport default Form\n"],"mappings":"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","names":["size","GridItem","Button","alignment","getInputSizeHeight","Form","FormContextProvider","Placeholder","Field","Spinner"]}
1	+ {"version":3,"sources":["../../../../../src/components/builtin/Form/Form.tsx"],"sourcesContent":["'use client'\n\nimport {\n useState,\n useEffect,\n useRef,\n useMemo,\n forwardRef,\n ComponentPropsWithoutRef,\n Ref,\n useImperativeHandle,\n ForwardedRef,\n} from 'react'\nimport { Formik, getIn } from 'formik'\n\nimport { Check12 } from '../../icons/Check12'\n\nimport { getSizeHeight as getInputSizeHeight } from './components/Field/components/Input'\n\nimport {\n Size,\n Sizes,\n Provider as FormContextProvider,\n Shape,\n Contrast,\n Alignment,\n Alignments,\n} from './context/FormContext'\nimport Placeholder from './components/Placeholder'\nimport Field from './components/Field'\nimport Spinner from './components/Spinner'\nimport Button from '../Button'\nimport type { TableColumn } from './types'\nimport {\n ElementIDValue,\n GapYValue,\n ResponsiveIconRadioGroupValue,\n ResponsiveSelectValue,\n TableFormFieldsDescriptor,\n TableFormFieldsValue,\n TableValue,\n TextInputValue,\n TextStyleValue,\n} from '../../../prop-controllers/descriptors'\nimport { Link } from '../../shared/Link'\nimport { BoxModelHandle, getBox } from '../../../box-model'\nimport { PropControllersHandle } from '../../../state/modules/prop-controller-handles'\nimport { DescriptorsPropControllers } from '../../../prop-controllers/instances'\nimport { useTableFormFieldRefs } from '../../hooks/useTableFormFieldRefs'\nimport { useMakeswiftHostApiClient } from '../../../next/context/makeswift-host-api-client'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\nimport { cx } from '@emotion/css'\nimport { useResponsiveGridItem, useResponsiveStyle } from '../../utils/responsive-style'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { useTable } from '../../../runtimes/react/hooks/makeswift-api'\nimport {\n LinkPropControllerValue,\n ResponsiveLengthData,\n ResponsiveValue,\n} from '@makeswift/prop-controllers'\n\nconst LOCAL_STORAGE_NAMESPACE = '@@makeswift/components/form'\n\nfunction getSizeFontSize(size: Size): number {\n switch (size) {\n case Sizes.SMALL:\n return 12\n\n case Sizes.MEDIUM:\n return 14\n\n case Sizes.LARGE:\n return 18\n\n default:\n throw new Error(`Invalid form size \"${size}\"`)\n }\n}\n\ntype Props = {\n id?: ElementIDValue\n tableId?: TableValue\n fields?: TableFormFieldsValue\n submitLink?: LinkPropControllerValue\n gap?: GapYValue\n shape?: ResponsiveIconRadioGroupValue<Shape>\n size?: ResponsiveIconRadioGroupValue<Size>\n contrast?: ResponsiveIconRadioGroupValue<Contrast>\n labelTextStyle?: TextStyleValue\n labelTextColor?: ResponsiveColor \| null\n submitTextStyle?: TextStyleValue\n brandColor?: ResponsiveColor \| null\n submitTextColor?: ResponsiveColor \| null\n submitLabel?: TextInputValue\n submitVariant?: ResponsiveSelectValue<\n 'flat' \| 'outline' \| 'shadow' \| 'clear' \| 'blocky' \| 'bubbly' \| 'skewed'\n >\n submitWidth?: ResponsiveLengthData\n submitAlignment?: ResponsiveIconRadioGroupValue<Alignment>\n width?: string\n margin?: string\n}\n\ntype GridFormBaseProps = { size?: Props['size'] }\n\ntype GridFormProps = GridFormBaseProps &\n Omit<ComponentPropsWithoutRef<'form'>, keyof GridFormBaseProps>\n\nconst GridForm = forwardRef(function GridFrom(\n { className, size, ...restOfProps }: GridFormProps,\n ref: ForwardedRef<HTMLFormElement>,\n) {\n return (\n <form\n {...restOfProps}\n ref={ref}\n className={cx(\n useStyle({ display: 'flex', flexWrap: 'wrap', width: '100%' }),\n useStyle(\n useResponsiveStyle([size] as const, ([size = Sizes.MEDIUM]) => ({\n fontSize: getSizeFontSize(size),\n })),\n ),\n className,\n )}\n />\n )\n})\n\ntype GridItemBaseProps = {\n grid: ResponsiveValue<{ spans: number[][]; count: number }>\n index: number\n rowGap: Props['gap']\n columnGap: Props['gap']\n}\n\ntype GridItemProps = GridItemBaseProps &\n Omit<ComponentPropsWithoutRef<'div'>, keyof GridItemBaseProps>\n\nconst GridItem = forwardRef(function GridItem(\n { className, grid, index, rowGap, columnGap, ...restOfProps }: GridItemProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n return (\n <div\n {...restOfProps}\n ref={ref}\n className={cx(\n useStyle({ alignSelf: 'flex-end', flexDirection: 'column' }),\n useStyle(useResponsiveGridItem({ grid, index, rowGap, columnGap })),\n className,\n )}\n />\n )\n})\n\nfunction getAlignmentMargin(alignment: Alignment): string {\n switch (alignment) {\n case Alignments.LEFT:\n return '0 auto 0 0'\n case Alignments.RIGHT:\n return '0 0 0 auto'\n default:\n return '0 auto'\n }\n}\n\ntype StyledButtonBaseProps = { size?: Props['size']; alignment?: Props['submitAlignment'] }\n\ntype StyledButtonProps = StyledButtonBaseProps &\n Omit<ComponentPropsWithoutRef<typeof Button>, keyof StyledButtonBaseProps>\n\nfunction StyledButton({ className, size, alignment, ...restOfProps }: StyledButtonProps) {\n return (\n <Button\n {...restOfProps}\n as=\"button\"\n className={cx(\n useStyle({ display: 'flex', alignItems: 'center', justifyContent: 'center' }),\n useStyle(\n useResponsiveStyle(\n [size, alignment] as const,\n ([size = Sizes.MEDIUM, alignment = Alignments.CENTER]) => ({\n minHeight: getInputSizeHeight(size),\n maxHeight: getInputSizeHeight(size),\n margin: getAlignmentMargin(alignment),\n paddingTop: 0,\n paddingBottom: 0,\n }),\n ),\n ),\n className,\n )}\n />\n )\n}\n\nfunction ErrorContainer({ className, ...restOfProps }: ComponentPropsWithoutRef<'div'>) {\n return (\n <div\n {...restOfProps}\n className={cx(\n useStyle({\n padding: '8px 16px',\n backgroundColor: '#f19eb9',\n borderRadius: 4,\n marginTop: 16,\n }),\n className,\n )}\n />\n )\n}\n\nfunction IconContainer({ className, ...restOfProps }: ComponentPropsWithoutRef<'div'>) {\n return <div {...restOfProps} className={cx(useStyle({ fill: 'currentColor' }), className)} />\n}\n\nfunction ErrorMessage({ className, ...restOfProps }: ComponentPropsWithoutRef<'p'>) {\n return (\n <p\n {...restOfProps}\n className={cx(\n useStyle({ fontSize: 12, margin: '8px 0', color: 'rgba(127, 0, 0, 0.95)' }),\n className,\n )}\n />\n )\n}\n\nfunction getTableColumnDefaultValue(tableColumn: TableColumn) {\n switch (tableColumn.__typename) {\n case 'CheckboxTableColumn':\n return false\n\n case 'MultipleSelectTableColumn':\n return []\n\n case 'SingleLineTextTableColumn':\n case 'LongTextTableColumn':\n case 'SingleSelectTableColumn':\n case 'PhoneNumberTableColumn':\n case 'EmailTableColumn':\n case 'URLTableColumn':\n case 'NumberTableColumn':\n default:\n return ''\n }\n}\n\ntype Column = { columnId: string; data: Record<string, any> }\ntype Fields = Record<string, string \| string[] \| boolean>\n\ntype Descriptors = { fields?: TableFormFieldsDescriptor }\n\nconst Form = forwardRef(function Form(\n {\n id,\n tableId,\n fields: fieldsProp,\n submitLabel = 'Submit',\n submitLink,\n shape,\n size,\n contrast,\n brandColor,\n gap,\n width,\n margin,\n submitTextStyle,\n submitVariant,\n submitTextColor,\n submitWidth,\n submitAlignment,\n labelTextStyle,\n labelTextColor,\n }: Props,\n ref: Ref<BoxModelHandle & PropControllersHandle<Descriptors>>,\n) {\n const fields = useMemo(() => fieldsProp?.fields ?? [], [fieldsProp])\n const grid = useMemo(() => fieldsProp?.grid ?? [], [fieldsProp])\n const table = useTable(tableId ?? null)\n const client = useMakeswiftHostApiClient()\n const [refEl, setRefEl] = useState<HTMLElement \| null>(null)\n const [propControllers, setPropControllers] =\n useState<DescriptorsPropControllers<Descriptors> \| null>(null)\n const [initialValues, setInitialValues] = useState<Fields>(() =>\n fields.reduce((acc, formField) => {\n const tableColumn = table && table.columns.find(field => field.id === formField.tableColumnId)\n const defaultValue = formField ? formField.defaultValue : null\n\n if (tableColumn) {\n acc[tableColumn.name] =\n defaultValue == null ? getTableColumnDefaultValue(tableColumn) : defaultValue\n }\n\n return acc\n }, {} as Fields),\n )\n const controller = propControllers?.fields\n const { container, items } = useTableFormFieldRefs(controller, { fieldsCount: fields.length })\n const [isDone, setIsDone] = useState(false)\n const linkRef = useRef<HTMLAnchorElement>(null)\n\n useImperativeHandle(\n ref,\n () => ({\n getDomNode() {\n return refEl instanceof Element ? refEl : null\n },\n getBoxModel() {\n return refEl instanceof Element ? getBox(refEl) : null\n },\n setPropControllers,\n }),\n [refEl, setPropControllers],\n )\n\n useEffect(() => {\n container(refEl)\n }, [container, refEl])\n\n useEffect(() => {\n if (!isDone) return\n\n let timeoutId = setTimeout(() => setIsDone(false), 2500)\n\n return () => clearTimeout(timeoutId)\n }, [isDone])\n\n function getTableColumn({ tableColumnId }: any) {\n return table && table.columns.find(field => tableColumnId === field.id)\n }\n\n async function handleSubmit(values: any, { setSubmitting, resetForm, setStatus }: any) {\n if (table) {\n const columns: Column[] = []\n\n fields.forEach(field => {\n const tableColumn = getTableColumn(field)\n\n if (tableColumn) {\n const data = values[tableColumn.name]\n\n if (data) {\n columns.push({ columnId: field.tableColumnId, data })\n\n if (field.autofill) {\n localStorage.setItem(\n `${LOCAL_STORAGE_NAMESPACE}/${tableColumn.name}`,\n JSON.stringify(data),\n )\n }\n }\n }\n })\n\n try {\n await client.createTableRecord(table.id, columns)\n setIsDone(true)\n setInitialValues(prev =>\n fields.reduce(\n (acc, field) => {\n const tableColumn = getTableColumn(field)\n\n if (tableColumn) {\n const data = values[tableColumn.name]\n\n if (data && field.autofill) return { ...acc, [tableColumn.name]: data }\n }\n\n return acc\n },\n { ...prev },\n ),\n )\n resetForm()\n\n if (linkRef.current != null) linkRef.current.click()\n } catch (error) {\n setStatus({ error: 'An unexpected error has occurred, please try again later' })\n } finally {\n setSubmitting(false)\n }\n }\n }\n\n useEffect(() => {\n setInitialValues(prev =>\n fields.reduce(\n (acc, formField) => {\n const tableColumn =\n table && table.columns.find(field => field.id === formField.tableColumnId)\n\n if (tableColumn && formField.autofill) {\n const storedValue = localStorage.getItem(\n `${LOCAL_STORAGE_NAMESPACE}/${tableColumn.name}`,\n )\n\n if (storedValue) {\n try {\n acc[tableColumn.name] = JSON.parse(storedValue)\n } catch (e) {\n // Ignore\n }\n }\n }\n\n return acc\n },\n { ...prev },\n ),\n )\n }, [fields, table])\n\n return (\n <FormContextProvider\n value={{ shape, size, contrast, brandColor, labelTextStyle, labelTextColor }}\n >\n {tableId == null ? (\n <Placeholder ref={setRefEl} width={width} margin={margin} />\n ) : (\n <>\n <Formik\n onSubmit={handleSubmit}\n initialValues={initialValues}\n initialStatus={{ error: null }}\n enableReinitialize\n >\n {formik => {\n const error = formik.status && formik.status.error\n const errors = fields\n .map(field => {\n const tableColumn = getTableColumn(field)\n\n return (\n tableColumn &&\n getIn(formik.touched, tableColumn.name) &&\n getIn(formik.errors, tableColumn.name)\n )\n })\n .filter(message => typeof message === 'string')\n\n return (\n <>\n <GridForm\n ref={setRefEl}\n id={id}\n className={cx(width, margin)}\n size={size}\n onSubmit={formik.handleSubmit}\n onReset={formik.handleReset}\n noValidate\n >\n {fields.map((field, index) => {\n const tableColumn = getTableColumn(field)\n\n return (\n <GridItem\n key={field.id}\n ref={items[index]}\n grid={grid}\n index={index}\n rowGap={gap}\n columnGap={gap}\n >\n <Field tableColumn={tableColumn} tableFormField={field} />\n </GridItem>\n )\n })}\n <GridItem\n ref={items[fields.length]}\n grid={grid}\n index={fields.length}\n rowGap={gap}\n columnGap={gap}\n >\n <StyledButton\n type=\"submit\"\n // @ts-ignore: `disabled` is in `'button'` but not in `T`.\n disabled={formik.isSubmitting \|\| isDone}\n shape={shape}\n size={size}\n color={brandColor}\n variant={submitVariant}\n textColor={submitTextColor}\n width={submitWidth}\n alignment={submitAlignment}\n textStyle={submitTextStyle}\n >\n {formik.isSubmitting ? (\n <Spinner />\n ) : isDone ? (\n <IconContainer>\n <Check12 />\n </IconContainer>\n ) : (\n submitLabel\n )}\n </StyledButton>\n {(errors.length > 0 \|\| error) && (\n <ErrorContainer>\n {errors.map(message => (\n <ErrorMessage key={message}>{message}</ErrorMessage>\n ))}\n {error != null && <ErrorMessage>{error}</ErrorMessage>}\n </ErrorContainer>\n )}\n </GridItem>\n </GridForm>\n {submitLink != null && <Link ref={linkRef} hidden link={submitLink} />}\n </>\n )\n }}\n </Formik>\n </>\n )}\n </FormContextProvider>\n )\n})\n\nexport default Form\n"],"mappings":"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","names":["size","GridItem","Button","alignment","getInputSizeHeight","Form","FormContextProvider","Placeholder","Field","Spinner"]}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../../src/components/builtin/Form/context/FormContext.ts"],"sourcesContent":["'use client'\n\nimport { createContext, useContext } from 'react'\n\nimport { ~~ResponsiveValue,~~ TextStyleValue } from '../../../../prop-controllers/descriptors'\nimport { ResponsiveColor } from '../../../../runtimes/react/controls'\nimport { ColorValue } from '../../../utils/types'\n\nexport const Alignments = {\n LEFT: 'left',\n CENTER: 'center',\n RIGHT: 'right',\n} as const\n\nexport type Alignment = typeof Alignments[keyof typeof Alignments]\n\nexport const Shapes = Object.freeze({\n SQUARE: 'square',\n ROUNDED: 'rounded',\n PILL: 'pill',\n} as const)\n\nexport type Shape = typeof Shapes[keyof typeof Shapes]\n\nexport const Sizes = Object.freeze({\n SMALL: 'small',\n MEDIUM: 'medium',\n LARGE: 'large',\n} as const)\n\nexport type Size = typeof Sizes[keyof typeof Sizes]\n\nexport const Contrasts = Object.freeze({\n LIGHT: 'light',\n DARK: 'dark',\n} as const)\n\nexport type Contrast = typeof Contrasts[keyof typeof Contrasts]\n\nexport type Value = {\n shape: ResponsiveValue<Shape> \| null \| undefined\n size: ResponsiveValue<Size> \| null \| undefined\n contrast: ResponsiveValue<Contrast> \| null \| undefined\n brandColor: ResponsiveValue<ColorValue> \| null \| undefined\n labelTextStyle?: TextStyleValue\n labelTextColor?: ResponsiveColor \| null\n}\n\nconst Context = createContext<Value>({} as Value)\n\nexport function useFormContext(): Value {\n return useContext(Context)\n}\n\nconst { Provider } = Context\n\nexport { Provider }\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAA0C;~~AAMnC~~,MAAM,aAAa;AAAA,EACxB,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AACT;AAIO,MAAM,SAAS,OAAO,OAAO;AAAA,EAClC,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,MAAM;AACR,CAAU;AAIH,MAAM,QAAQ,OAAO,OAAO;AAAA,EACjC,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT,CAAU;AAIH,MAAM,YAAY,OAAO,OAAO;AAAA,EACrC,OAAO;AAAA,EACP,MAAM;AACR,CAAU;AAaV,MAAM,cAAU,4BAAqB,CAAC,CAAU;AAEzC,SAAS,iBAAwB;AACtC,aAAO,yBAAW,OAAO;AAC3B;AAEA,MAAM,EAAE,SAAS,IAAI;","names":[]}
1	+ {"version":3,"sources":["../../../../../../src/components/builtin/Form/context/FormContext.ts"],"sourcesContent":["'use client'\n\nimport { createContext, useContext } from 'react'\n\nimport { TextStyleValue } from '../../../../prop-controllers/descriptors'\nimport { ResponsiveColor } from '../../../../runtimes/react/controls'\nimport { ColorValue } from '../../../utils/types'\nimport { ResponsiveValue } from '@makeswift/prop-controllers'\n\nexport const Alignments = {\n LEFT: 'left',\n CENTER: 'center',\n RIGHT: 'right',\n} as const\n\nexport type Alignment = typeof Alignments[keyof typeof Alignments]\n\nexport const Shapes = Object.freeze({\n SQUARE: 'square',\n ROUNDED: 'rounded',\n PILL: 'pill',\n} as const)\n\nexport type Shape = typeof Shapes[keyof typeof Shapes]\n\nexport const Sizes = Object.freeze({\n SMALL: 'small',\n MEDIUM: 'medium',\n LARGE: 'large',\n} as const)\n\nexport type Size = typeof Sizes[keyof typeof Sizes]\n\nexport const Contrasts = Object.freeze({\n LIGHT: 'light',\n DARK: 'dark',\n} as const)\n\nexport type Contrast = typeof Contrasts[keyof typeof Contrasts]\n\nexport type Value = {\n shape: ResponsiveValue<Shape> \| null \| undefined\n size: ResponsiveValue<Size> \| null \| undefined\n contrast: ResponsiveValue<Contrast> \| null \| undefined\n brandColor: ResponsiveValue<ColorValue> \| null \| undefined\n labelTextStyle?: TextStyleValue\n labelTextColor?: ResponsiveColor \| null\n}\n\nconst Context = createContext<Value>({} as Value)\n\nexport function useFormContext(): Value {\n return useContext(Context)\n}\n\nconst { Provider } = Context\n\nexport { Provider }\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAA0C;AAOnC,MAAM,aAAa;AAAA,EACxB,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AACT;AAIO,MAAM,SAAS,OAAO,OAAO;AAAA,EAClC,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,MAAM;AACR,CAAU;AAIH,MAAM,QAAQ,OAAO,OAAO;AAAA,EACjC,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT,CAAU;AAIH,MAAM,YAAY,OAAO,OAAO;AAAA,EACrC,OAAO;AAAA,EACP,MAAM;AACR,CAAU;AAaV,MAAM,cAAU,4BAAqB,CAAC,CAAU;AAEzC,SAAS,iBAAwB;AACtC,aAAO,yBAAW,OAAO;AAC3B;AAEA,MAAM,EAAE,SAAS,IAAI;","names":[]}

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

@@ -37,6 +37,7 @@ var import_constants = require("../constants");
 var import_FormContext = require("./context/FormContext");
 var import_components_meta = require("../../../state/modules/components-meta");
 var import_react2 = require("react");
+var import_prop_controllers2 = require("@makeswift/prop-controllers");
 function registerComponent(runtime) {
   return runtime.registerComponent(
     (0, import_react2.lazy)(() => Promise.resolve().then(() => __toESM(require("./Form")))),
@@ -48,7 +49,7 @@ function registerComponent(runtime) {
         id: import_prop_controllers.Props.ElementID(),
         tableId: import_prop_controllers.Props.Table(),
         fields: import_prop_controllers.Props.TableFormFields(),
-        submitLink: import_prop_controllers.Props.Link((props) => ({
+        submitLink: (0, import_prop_controllers2.Link)((props) => ({
           label: "Redirect to",
           // TODO: This option is hardcoded. We should import it from LinkPanelOptions
           options: [
@@ -98,7 +99,7 @@ function registerComponent(runtime) {
           hidden: props.tableId == null
         })),
         labelTextStyle: import_prop_controllers.Props.TextStyle({ label: "Label text style" }),
-        labelTextColor: import_prop_controllers.Props.ResponsiveColor((props, device) => {
+        labelTextColor: (0, import_prop_controllers2.ResponsiveColor)((props, device) => {
           const hidden = props.tableId == null;
           const responsiveContrast = props.contrast;
           const contrast = (0, import_breakpoints.findBreakpointOverride)(
@@ -113,13 +114,13 @@ function registerComponent(runtime) {
           };
         }),
         submitTextStyle: import_prop_controllers.Props.TextStyle({ label: "Button text style" }),
-        brandColor: import_prop_controllers.Props.ResponsiveColor((props) => ({
+        brandColor: (0, import_prop_controllers2.ResponsiveColor)((props) => ({
           label: "Button color",
           placeholder: "black",
           hidden: props.tableId == null
           // TODO: Add hideAlphaSlider
         })),
-        submitTextColor: import_prop_controllers.Props.ResponsiveColor((props) => ({
+        submitTextColor: (0, import_prop_controllers2.ResponsiveColor)((props) => ({
           label: "Button text color",
           placeholder: "white",
           hidden: props.tableId == null
@@ -143,7 +144,7 @@ function registerComponent(runtime) {
           defaultValue: "flat",
           hidden: props.tableId == null
         })),
-        submitWidth: import_prop_controllers.Props.ResponsiveLength((props) => ({
+        submitWidth: (0, import_prop_controllers2.ResponsiveLength)((props) => ({
           label: "Button width",
           hidden: props.tableId == null
           // TODO: Add placeholder: { value: 'auto' }

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 { Props, ResponsiveValue } from '../../../prop-controllers'\nimport { 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'\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: Props.ElementID(),\n tableId: Props.Table(),\n fields: Props.TableFormFields(),\n submitLink: ~~Props.~~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: Props.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: Props.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: Props.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: Props.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: Props.TextStyle({ label: 'Label text style' }),\n labelTextColor: ~~Props.~~ResponsiveColor((props, device) => {\n const hidden = props.tableId == null\n const responsiveContrast = props.contrast as ResponsiveValue<Contrast>\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: Props.TextStyle({ label: 'Button text style' }),\n brandColor: ~~Props.~~ResponsiveColor(props => ({\n label: 'Button color',\n placeholder: 'black',\n hidden: props.tableId == null,\n // TODO: Add hideAlphaSlider\n })),\n submitTextColor: ~~Props.~~ResponsiveColor(props => ({\n label: 'Button text color',\n placeholder: 'white',\n hidden: props.tableId == null,\n })),\n submitLabel: Props.TextInput(props => ({\n label: 'Button label',\n placeholder: 'Submit',\n hidden: props.tableId == null,\n })),\n submitVariant: Props.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: ~~Props.~~ResponsiveLength(props => ({\n label: 'Button width',\n hidden: props.tableId == null,\n // TODO: Add placeholder: { value: 'auto' }\n })),\n submitAlignment: Props.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: Props.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: Props.Width.Format.ClassName,\n }),\n margin: Props.Margin({ format: Props.Margin.Format.ClassName }),\n },\n },\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAAuC;AAEvC,yBAA0D;AAC1D,uBAAuC;AACvC,yBAA+D;AAC/D,6BAA8B;AAC9B,IAAAA,gBAAqB;~~AAEd~~,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,IAAI,8BAAM,UAAU;AAAA,QACpB,SAAS,8BAAM,MAAM;AAAA,QACrB,QAAQ,8BAAM,gBAAgB;AAAA,QAC9B,~~YAAY~~,~~8BAAM,KAAK,~~YAAU;AAAA,~~UAC/B~~,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,KAAK,8BAAM,KAAK,YAAU;AAAA,UACxB,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,cAAc,EAAE,OAAO,GAAG,MAAM,KAAK;AAAA,UACrC,QAAQ,MAAM,WAAW;AAAA,QAC3B,EAAE;AAAA,QACF,OAAO,8BAAM,yBAAyB,YAAU;AAAA,UAC9C,OAAO;AAAA,UACP,SAAS;AAAA,YACP,EAAE,OAAO,QAAQ,OAAO,0BAAO,MAAM,MAAM,eAAe;AAAA,YAC1D,EAAE,OAAO,WAAW,OAAO,0BAAO,SAAS,MAAM,kBAAkB;AAAA,YACnE,EAAE,OAAO,UAAU,OAAO,0BAAO,QAAQ,MAAM,iBAAiB;AAAA,UAClE;AAAA,UACA,cAAc,0BAAO;AAAA,UACrB,QAAQ,MAAM,WAAW;AAAA,QAC3B,EAAE;AAAA,QACF,MAAM,8BAAM,yBAAyB,YAAU;AAAA,UAC7C,OAAO;AAAA,UACP,SAAS;AAAA,YACP,EAAE,OAAO,SAAS,OAAO,yBAAM,OAAO,MAAM,cAAc;AAAA,YAC1D,EAAE,OAAO,UAAU,OAAO,yBAAM,QAAQ,MAAM,eAAe;AAAA,YAC7D,EAAE,OAAO,SAAS,OAAO,yBAAM,OAAO,MAAM,cAAc;AAAA,UAC5D;AAAA,UACA,cAAc,yBAAM;AAAA,UACpB,QAAQ,OAAO,WAAW;AAAA,QAC5B,EAAE;AAAA,QACF,UAAU,8BAAM,yBAAyB,YAAU;AAAA,UACjD,OAAO;AAAA,UACP,SAAS;AAAA,YACP,EAAE,OAAO,cAAc,OAAO,6BAAU,OAAO,MAAM,QAAQ;AAAA,YAC7D,EAAE,OAAO,aAAa,OAAO,6BAAU,MAAM,MAAM,SAAS;AAAA,UAC9D;AAAA,UACA,cAAc,6BAAU;AAAA,UACxB,QAAQ,MAAM,WAAW;AAAA,QAC3B,EAAE;AAAA,QACF,gBAAgB,8BAAM,UAAU,EAAE,OAAO,mBAAmB,CAAC;AAAA,QAC7D,~~gBAAgB~~,~~8BAAM~~,~~gBAAgB,~~CAAC,OAAO,WAAW;~~AACvD~~,gBAAM,SAAS,MAAM,WAAW;AAChC,gBAAM,qBAAqB,MAAM;AACjC,gBAAM,eAAW;AAAA,YACf,QAAQ,eAAe;AAAA,YACvB;AAAA,YACA;AAAA,UACF;AAEA,iBAAO;AAAA,YACL;AAAA,YACA,OAAO;AAAA,YACP,aACE,UAAU,UAAU,6BAAU,OAAO,2BAA2B;AAAA,UACpE;AAAA,QACF,CAAC;AAAA,QACD,iBAAiB,8BAAM,UAAU,EAAE,OAAO,oBAAoB,CAAC;AAAA,QAC/D,~~YAAY~~,~~8BAAM~~,~~gBAAgB,~~YAAU;AAAA,~~UAC1C~~,OAAO;AAAA,UACP,aAAa;AAAA,UACb,QAAQ,MAAM,WAAW;AAAA;AAAA,QAE3B,EAAE;AAAA,QACF,~~iBAAiB~~,~~8BAAM~~,~~gBAAgB,~~YAAU;AAAA,~~UAC/C~~,OAAO;AAAA,UACP,aAAa;AAAA,UACb,QAAQ,MAAM,WAAW;AAAA,QAC3B,EAAE;AAAA,QACF,aAAa,8BAAM,UAAU,YAAU;AAAA,UACrC,OAAO;AAAA,UACP,aAAa;AAAA,UACb,QAAQ,MAAM,WAAW;AAAA,QAC3B,EAAE;AAAA,QACF,eAAe,8BAAM,iBAAiB,YAAU;AAAA,UAC9C,OAAO;AAAA,UACP,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,UACd,QAAQ,MAAM,WAAW;AAAA,QAC3B,EAAE;AAAA,QACF,~~aAAa~~,~~8BAAM~~,~~iBAAiB,~~YAAU;AAAA,~~UAC5C~~,OAAO;AAAA,UACP,QAAQ,MAAM,WAAW;AAAA;AAAA,QAE3B,EAAE;AAAA,QACF,iBAAiB,8BAAM,yBAAyB,YAAU;AAAA,UACxD,OAAO;AAAA,UACP,SAAS;AAAA,YACP,EAAE,OAAO,QAAQ,OAAO,8BAAW,MAAM,MAAM,cAAc;AAAA,YAC7D,EAAE,OAAO,UAAU,OAAO,8BAAW,QAAQ,MAAM,gBAAgB;AAAA,YACnE,EAAE,OAAO,SAAS,OAAO,8BAAW,OAAO,MAAM,eAAe;AAAA,UAClE;AAAA,UACA,cAAc,8BAAW;AAAA,UACzB,QAAQ,MAAM,WAAW;AAAA,QAC3B,EAAE;AAAA,QACF,OAAO,8BAAM,MAAM;AAAA,UACjB,QAAQ;AAAA,YACN;AAAA,cACE,cAAU,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,MAAM,OAAO;AAAA,QAC7B,CAAC;AAAA,QACD,QAAQ,8BAAM,OAAO,EAAE,QAAQ,8BAAM,OAAO,OAAO,UAAU,CAAC;AAAA,MAChE;AAAA,IACF;AAAA,EACF;AACF;","names":["import_react"]}
1	+ {"version":3,"sources":["../../../../../src/components/builtin/Form/register.ts"],"sourcesContent":["import { Props, ResponsiveValue } from '../../../prop-controllers'\nimport { 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 { Link, ResponsiveColor, ResponsiveLength } 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: Props.ElementID(),\n tableId: Props.Table(),\n fields: Props.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: Props.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: Props.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: Props.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: Props.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: Props.TextStyle({ label: 'Label text style' }),\n labelTextColor: ResponsiveColor((props, device) => {\n const hidden = props.tableId == null\n const responsiveContrast = props.contrast as ResponsiveValue<Contrast>\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: Props.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: Props.TextInput(props => ({\n label: 'Button label',\n placeholder: 'Submit',\n hidden: props.tableId == null,\n })),\n submitVariant: Props.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: Props.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: Props.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: Props.Width.Format.ClassName,\n }),\n margin: Props.Margin({ format: Props.Margin.Format.ClassName }),\n },\n },\n )\n}\n"],"mappings":"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","names":["import_react","import_prop_controllers"]}

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 ElementIDValue,\n ImageValue,\n ~~LinkValue,\n~~ ResponsiveOpacityValue,\n TextInputValue,\n WidthValue,\n} from '../../../prop-controllers/descriptors'\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'\nimport { match, P } from 'ts-pattern'\n\nconst NextLegacyImage = NextImage as typeof NextLegacyImageType\n\ntype Props = {\n id?: ElementIDValue\n file?: ImageValue\n altText?: TextInputValue\n link?: ~~LinkValue~~\n width?: WidthValue\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":["import_react","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 ElementIDValue,\n ImageValue,\n ResponsiveOpacityValue,\n TextInputValue,\n WidthValue,\n} from '../../../prop-controllers/descriptors'\nimport { LinkPropControllerValue } 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'\nimport { match, P } from 'ts-pattern'\n\nconst NextLegacyImage = NextImage as typeof NextLegacyImageType\n\ntype Props = {\n id?: ElementIDValue\n file?: ImageValue\n altText?: TextInputValue\n link?: LinkPropControllerValue\n width?: WidthValue\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":["import_react","NextImage","Image","fileData","file","opacity","nextMajorVersion"]}

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

@@ -34,6 +34,7 @@ module.exports = __toCommonJS(register_exports);
 var import_react = require("react");
 var import_prop_controllers = require("../../../prop-controllers");
 var import_constants = require("../constants");
+var import_prop_controllers2 = require("@makeswift/prop-controllers");
 function registerComponent(runtime) {
   return runtime.registerComponent(
     (0, import_react.lazy)(() => Promise.resolve().then(() => __toESM(require("./Image")))),
@@ -44,15 +45,15 @@ function registerComponent(runtime) {
         id: import_prop_controllers.Props.ElementID(),
         file: import_prop_controllers.Props.Image(),
         altText: import_prop_controllers.Props.TextInput({ label: "Alt text" }),
-        link: import_prop_controllers.Props.Link({ label: "On click" }),
+        link: (0, import_prop_controllers2.Link)({ label: "On click" }),
         width: import_prop_controllers.Props.Width(),
         margin: import_prop_controllers.Props.Margin({ format: import_prop_controllers.Props.Margin.Format.ClassName }),
         padding: import_prop_controllers.Props.Padding({ format: import_prop_controllers.Props.Padding.Format.ClassName }),
-        border: import_prop_controllers.Props.Border({ format: import_prop_controllers.Props.Border.Format.ClassName }),
-        borderRadius: import_prop_controllers.Props.BorderRadius({ format: import_prop_controllers.Props.BorderRadius.Format.ClassName }),
-        boxShadow: import_prop_controllers.Props.Shadows({ format: import_prop_controllers.Props.Shadows.Format.ClassName }),
+        border: (0, import_prop_controllers2.Border)({ format: import_prop_controllers2.Border.Format.ClassName }),
+        borderRadius: (0, import_prop_controllers2.BorderRadius)({ format: import_prop_controllers2.BorderRadius.Format.ClassName }),
+        boxShadow: (0, import_prop_controllers2.Shadows)({ format: import_prop_controllers2.Shadows.Format.ClassName }),
         opacity: import_prop_controllers.Props.ResponsiveOpacity(),
-        priority: import_prop_controllers.Props.Checkbox({ label: "Priority" })
+        priority: (0, import_prop_controllers2.Checkbox)({ label: "Priority" })
       }
     }
   );

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/components/builtin/Image/register.ts"],"sourcesContent":["import { lazy } from 'react'\nimport { Props } from '../../../prop-controllers'\nimport { ReactRuntime } from '../../../runtimes/react'\nimport { MakeswiftComponentType } from '../constants'\n\nexport function registerComponent(runtime: ReactRuntime) {\n return runtime.registerComponent(\n lazy(() => import('./Image')),\n {\n type: MakeswiftComponentType.Image,\n label: 'Image',\n props: {\n id: Props.ElementID(),\n file: Props.Image(),\n altText: Props.TextInput({ label: 'Alt text' }),\n link: ~~Props.~~Link({ label: 'On click' }),\n width: Props.Width(),\n margin: Props.Margin({ format: Props.Margin.Format.ClassName }),\n padding: Props.Padding({ format: Props.Padding.Format.ClassName }),\n border: ~~Props.~~Border({ format: ~~Props.~~Border.Format.ClassName }),\n borderRadius: ~~Props.~~BorderRadius({ format: ~~Props.~~BorderRadius.Format.ClassName }),\n boxShadow: ~~Props.~~Shadows({ format: ~~Props.~~Shadows.Format.ClassName }),\n opacity: Props.ResponsiveOpacity(),\n priority: ~~Props.~~Checkbox({ label: 'Priority' }),\n },\n },\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAqB;AACrB,8BAAsB;AAEtB,uBAAuC;~~AAEhC~~,SAAS,kBAAkB,SAAuB;AACvD,SAAO,QAAQ;AAAA,QACb,mBAAK,MAAM,6CAAO,SAAS,GAAC;AAAA,IAC5B;AAAA,MACE,MAAM,wCAAuB;AAAA,MAC7B,OAAO;AAAA,MACP,OAAO;AAAA,QACL,IAAI,8BAAM,UAAU;AAAA,QACpB,MAAM,8BAAM,MAAM;AAAA,QAClB,SAAS,8BAAM,UAAU,EAAE,OAAO,WAAW,CAAC;AAAA,QAC9C,~~MAAM~~,~~8BAAM,KAAK,~~EAAE,OAAO,WAAW,CAAC;AAAA,~~QACtC~~,OAAO,8BAAM,MAAM;AAAA,QACnB,QAAQ,8BAAM,OAAO,EAAE,QAAQ,8BAAM,OAAO,OAAO,UAAU,CAAC;AAAA,QAC9D,SAAS,8BAAM,QAAQ,EAAE,QAAQ,8BAAM,QAAQ,OAAO,UAAU,CAAC;AAAA,QACjE,~~QAAQ~~,~~8BAAM~~,~~OAAO,~~EAAE,QAAQ,~~8BAAM~~,OAAO,~~OAAO,~~UAAU,CAAC;AAAA,~~QAC9D~~,~~cAAc~~,~~8BAAM~~,~~aAAa,~~EAAE,QAAQ,~~8BAAM~~,~~aAAa,~~OAAO,UAAU,CAAC;AAAA,~~QAChF~~,~~WAAW~~,~~8BAAM~~,~~QAAQ,~~EAAE,QAAQ,~~8BAAM~~,~~QAAQ,~~OAAO,UAAU,CAAC;AAAA,~~QACnE~~,SAAS,8BAAM,kBAAkB;AAAA,QACjC,~~UAAU~~,~~8BAAM~~,~~SAAS,~~EAAE,OAAO,WAAW,CAAC;AAAA,~~MAChD~~;AAAA,IACF;AAAA,EACF;AACF;","names":[]}
1	+ {"version":3,"sources":["../../../../../src/components/builtin/Image/register.ts"],"sourcesContent":["import { lazy } from 'react'\nimport { Props } from '../../../prop-controllers'\nimport { ReactRuntime } from '../../../runtimes/react'\nimport { MakeswiftComponentType } from '../constants'\nimport { Border, Link, Shadows, Checkbox, BorderRadius } from '@makeswift/prop-controllers'\n\nexport function registerComponent(runtime: ReactRuntime) {\n return runtime.registerComponent(\n lazy(() => import('./Image')),\n {\n type: MakeswiftComponentType.Image,\n label: 'Image',\n props: {\n id: Props.ElementID(),\n file: Props.Image(),\n altText: Props.TextInput({ label: 'Alt text' }),\n link: Link({ label: 'On click' }),\n width: Props.Width(),\n margin: Props.Margin({ format: Props.Margin.Format.ClassName }),\n padding: Props.Padding({ format: Props.Padding.Format.ClassName }),\n border: Border({ format: Border.Format.ClassName }),\n borderRadius: BorderRadius({ format: BorderRadius.Format.ClassName }),\n boxShadow: Shadows({ format: Shadows.Format.ClassName }),\n opacity: Props.ResponsiveOpacity(),\n priority: Checkbox({ label: 'Priority' }),\n },\n },\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAqB;AACrB,8BAAsB;AAEtB,uBAAuC;AACvC,IAAAA,2BAA8D;AAEvD,SAAS,kBAAkB,SAAuB;AACvD,SAAO,QAAQ;AAAA,QACb,mBAAK,MAAM,6CAAO,SAAS,GAAC;AAAA,IAC5B;AAAA,MACE,MAAM,wCAAuB;AAAA,MAC7B,OAAO;AAAA,MACP,OAAO;AAAA,QACL,IAAI,8BAAM,UAAU;AAAA,QACpB,MAAM,8BAAM,MAAM;AAAA,QAClB,SAAS,8BAAM,UAAU,EAAE,OAAO,WAAW,CAAC;AAAA,QAC9C,UAAM,+BAAK,EAAE,OAAO,WAAW,CAAC;AAAA,QAChC,OAAO,8BAAM,MAAM;AAAA,QACnB,QAAQ,8BAAM,OAAO,EAAE,QAAQ,8BAAM,OAAO,OAAO,UAAU,CAAC;AAAA,QAC9D,SAAS,8BAAM,QAAQ,EAAE,QAAQ,8BAAM,QAAQ,OAAO,UAAU,CAAC;AAAA,QACjE,YAAQ,iCAAO,EAAE,QAAQ,gCAAO,OAAO,UAAU,CAAC;AAAA,QAClD,kBAAc,uCAAa,EAAE,QAAQ,sCAAa,OAAO,UAAU,CAAC;AAAA,QACpE,eAAW,kCAAQ,EAAE,QAAQ,iCAAQ,OAAO,UAAU,CAAC;AAAA,QACvD,SAAS,8BAAM,kBAAkB;AAAA,QACjC,cAAU,mCAAS,EAAE,OAAO,WAAW,CAAC;AAAA,MAC1C;AAAA,IACF;AAAA,EACF;AACF;","names":["import_prop_controllers"]}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/components/builtin/Navigation/Navigation.tsx"],"sourcesContent":["'use client'\n\nimport { ComponentPropsWithoutRef, ForwardedRef, forwardRef, useState } from 'react'\n\nimport { MobileMenu28 } from '../../icons/MobileMenu28'\n\nimport GutterContainer from '../../shared/GutterContainer'\nimport Image from '../Image'\nimport Button from '../Button'\nimport LinksPlaceholder from './components/LinksPlaceholder'\nimport DropDownButton from './components/DropDownButton'\nimport MobileMenu from './components/MobileMenu'\nimport {\n ResponsiveValue,\n CheckboxValue,\n ElementIDValue,\n GapXValue,\n ImageValue,\n LinkValue,\n NavigationLinksValue,\n ResponsiveIconRadioGroupValue,\n ResponsiveLengthValue,\n ResponsiveSelectValue,\n TextInputValue,\n TextStyleValue,\n NavigationButton as NavigationButtonValue,\n} from '../../../prop-controllers/descriptors'\nimport { ColorValue as Color } from '../../utils/types'\nimport { colorToString } from '../../utils/colorToString'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\nimport { useResponsiveColor } from '../../hooks'\nimport { cx } from '@emotion/css'\nimport { useResponsiveStyle, useResponsiveTextStyle } from '../../utils/responsive-style'\nimport { useStyle } from '../../../runtimes/react/use-style'\n\ntype Props = {\n id?: ElementIDValue\n links?: NavigationLinksValue\n linkTextStyle?: TextStyleValue\n showLogo?: CheckboxValue\n logoFile?: ImageValue\n logoWidth?: ResponsiveLengthValue\n logoAltText?: TextInputValue\n logoLink?: LinkValue\n alignment?: ResponsiveIconRadioGroupValue<'flex-start' \| 'center' \| 'flex-end'>\n gutter?: GapXValue\n mobileMenuAnimation?: ResponsiveSelectValue<'coverRight' \| 'coverLeft'>\n mobileMenuOpenIconColor?: ResponsiveColor \| null\n mobileMenuCloseIconColor?: ResponsiveColor \| null\n mobileMenuBackgroundColor?: ResponsiveColor \| null\n width?: string\n margin?: string\n}\n\ntype ContainerBaseProps = {\n width?: string\n margin?: string\n textStyle: Props['linkTextStyle']\n gutter: Props['gutter']\n}\n\ntype ContainerProps = ContainerBaseProps &\n Omit<ComponentPropsWithoutRef<'nav'>, keyof ContainerBaseProps>\n\nconst Container = forwardRef(function Container(\n { className, width, margin, textStyle, gutter, ...restOfProps }: ContainerProps,\n ref: ForwardedRef<HTMLElement>,\n) {\n return (\n <nav\n {...restOfProps}\n ref={ref}\n className={cx(\n useStyle({ display: 'flex', alignItems: 'center' }),\n width,\n margin,\n useStyle(useResponsiveTextStyle(textStyle)),\n useStyle(\n useResponsiveStyle([gutter] as const, ([gutter = { value: 0, unit: 'px' }]) => ({\n gap: `${gutter.value}${gutter.unit}`,\n })),\n ),\n className,\n )}\n />\n )\n})\n\ntype LinksContainerBaseProps = {\n alignment: Props['alignment']\n mobileMenuAnimation: Props['mobileMenuAnimation']\n}\n\ntype LinksContainerProps = LinksContainerBaseProps &\n Omit<ComponentPropsWithoutRef<'div'>, keyof LinksContainerBaseProps>\n\nfunction LinksContainer({\n className,\n alignment,\n mobileMenuAnimation,\n ...restOfProps\n}: LinksContainerProps) {\n return (\n <div\n {...restOfProps}\n className={cx(\n useStyle({\n display: 'flex',\n alignItems: 'center',\n flexGrow: 1,\n }),\n useStyle(\n useResponsiveStyle(\n [alignment, mobileMenuAnimation] as const,\n ([alignment = 'flex-end', mobileMenuAnimation]) => ({\n display: mobileMenuAnimation == null ? 'flex' : 'none',\n justifyContent: alignment,\n }),\n ),\n ),\n className,\n )}\n />\n )\n}\n\ntype OpenIconContainerBaseProps = {\n mobileMenuAnimation: Props['mobileMenuAnimation']\n alignment: Props['alignment']\n color: ResponsiveValue<Color> \| null \| undefined\n}\n\ntype OpenIconContainerProps = OpenIconContainerBaseProps &\n Omit<ComponentPropsWithoutRef<'button'>, keyof OpenIconContainerBaseProps>\n\nfunction OpenIconContainer({\n className,\n mobileMenuAnimation,\n alignment,\n color,\n ...restOfProps\n}: OpenIconContainerProps) {\n return (\n <button\n {...restOfProps}\n className={cx(\n useStyle({\n display: 'none',\n flexGrow: 1,\n alignItems: 'center',\n background: 'none',\n outline: 0,\n border: 0,\n padding: 0,\n fill: 'currentcolor',\n }),\n useStyle(\n useResponsiveStyle(\n [mobileMenuAnimation, alignment, color] as const,\n ([mobileMenuAnimation, alignment = 'flex-end', color]) => ({\n display: mobileMenuAnimation == null ? 'none' : 'flex',\n justifyContent: alignment,\n color: color == null ? 'rgba(161, 168, 194, 0.5)' : colorToString(color),\n }),\n ),\n ),\n className,\n )}\n />\n )\n}\n\ntype NavigationButtonProps = NavigationButtonValue['payload'] &\n Omit<ComponentPropsWithoutRef<typeof Button>, 'color' \| 'textColor'>\n\nfunction NavigationButton(props: NavigationButtonProps): JSX.Element {\n const { textColor, color, ...restOfProps } = props\n\n return (\n <Button\n {...restOfProps}\n textColor={useResponsiveColor(textColor)}\n color={useResponsiveColor(color)}\n />\n )\n}\n\nconst placeholder = {\n src: \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='93.12' height='36' viewBox='0 0 93.12 36'%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpath d='M18,0A18,18,0,1,1,0,18,18,18,0,0,1,18,0ZM49.36,21.94h6.36V24H46.8V10h2.56Zm9.06.72a4.88,4.88,0,0,1-1.64-3.72,5,5,0,0,1,1.64-3.74,5.57,5.57,0,0,1,7.7,0,5.09,5.09,0,0,1,.26,7.18l-.26.26a5.56,5.56,0,0,1-7.7,0Zm1.68-6a3.39,3.39,0,0,0,0,4.52,3,3,0,0,0,4.24.08l.08-.08a3.39,3.39,0,0,0,0-4.52,3,3,0,0,0-4.24-.08Zm10,10.68,1-1.92a5.28,5.28,0,0,0,3.3,1.22,3.6,3.6,0,0,0,2.32-.72,2.73,2.73,0,0,0,.9-2.26V22.5a3.61,3.61,0,0,1-1.45,1.26,4.35,4.35,0,0,1-2,.46,4.57,4.57,0,0,1-3.58-1.54A5.48,5.48,0,0,1,69.2,18.9a5.42,5.42,0,0,1,1.36-3.74,4.64,4.64,0,0,1,3.62-1.5,4,4,0,0,1,3.44,1.72v-1.5h2.46v9a6.13,6.13,0,0,1-1.43,4.46,5.27,5.27,0,0,1-4,1.44,7.09,7.09,0,0,1-4.53-1.42Zm1.54-8.44a3.4,3.4,0,0,0,.82,2.3,2.72,2.72,0,0,0,2.17.94,3.13,3.13,0,0,0,1.21-.22,2.89,2.89,0,0,0,1-.62,3.08,3.08,0,0,0,.63-1,3.62,3.62,0,0,0,.21-1.3,4,4,0,0,0-.23-1.33,3.3,3.3,0,0,0-.63-1.05,2.74,2.74,0,0,0-1-.68,3.35,3.35,0,0,0-1.25-.24,2.92,2.92,0,0,0-1.2.24,2.58,2.58,0,0,0-.93.67,3,3,0,0,0-.59,1,3.89,3.89,0,0,0-.19,1.31ZM83.8,22.66a4.88,4.88,0,0,1-1.64-3.72A5,5,0,0,1,83.8,15.2a5.57,5.57,0,0,1,7.7,0,5.09,5.09,0,0,1,.26,7.18,3.19,3.19,0,0,1-.26.26,5.56,5.56,0,0,1-7.7,0Zm1.68-6a3.39,3.39,0,0,0,0,4.52,3,3,0,0,0,4.24.08l.08-.08a3.39,3.39,0,0,0,0-4.52,3,3,0,0,0-4.24-.08Z' fill='%23a1a8c2' opacity='0.4' style='isolation: isolate'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A\",\n dimensions: { width: 93, height: 36 },\n}\n\nconst Navigation = forwardRef<HTMLDivElement, Props>(function Navigation(\n {\n id,\n links = [],\n linkTextStyle,\n showLogo,\n logoFile,\n logoWidth,\n logoAltText,\n logoLink,\n alignment,\n gutter,\n mobileMenuAnimation,\n mobileMenuOpenIconColor,\n mobileMenuCloseIconColor,\n mobileMenuBackgroundColor,\n width,\n margin,\n },\n ref,\n) {\n const [isOpen, setIsOpen] = useState(false)\n\n return (\n <Container\n ref={ref}\n id={id}\n width={width}\n margin={margin}\n textStyle={linkTextStyle}\n gutter={gutter}\n >\n {showLogo === true && (\n <Image\n altText={logoAltText}\n file={logoFile}\n link={logoLink}\n placeholder={placeholder}\n width={logoWidth}\n />\n )}\n <div style={{ display: 'flex', flexGrow: 1, justifyContent: 'flex-end' }}>\n <LinksContainer alignment={alignment} mobileMenuAnimation={mobileMenuAnimation}>\n {links.length > 0 ? (\n links.map((link, i) => (\n <GutterContainer\n key={link.id}\n gutter={gutter}\n first={i === 0}\n last={i === links.length - 1}\n >\n {link.type === 'button' && (\n <NavigationButton {...link.payload}>{link.payload.label}</NavigationButton>\n )}\n {link.type === 'dropdown' && <DropDownButton {...link.payload} />}\n </GutterContainer>\n ))\n ) : (\n <LinksPlaceholder gutter={gutter} />\n )}\n </LinksContainer>\n <OpenIconContainer\n alignment={alignment}\n color={mobileMenuOpenIconColor}\n mobileMenuAnimation={mobileMenuAnimation}\n onClick={() => setIsOpen(true)}\n >\n <MobileMenu28 />\n </OpenIconContainer>\n <MobileMenu\n animation={mobileMenuAnimation}\n backgroundColor={mobileMenuBackgroundColor}\n closeIconColor={mobileMenuCloseIconColor}\n links={links}\n onClose={() => setIsOpen(false)}\n open={isOpen}\n />\n </div>\n </Container>\n )\n})\n\nexport default Navigation\n"],"mappings":"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","names":["Container","gutter","alignment","mobileMenuAnimation","color","Button","Navigation","Image","GutterContainer","DropDownButton","LinksPlaceholder","MobileMenu"]}
1	+ {"version":3,"sources":["../../../../../src/components/builtin/Navigation/Navigation.tsx"],"sourcesContent":["'use client'\n\nimport { ComponentPropsWithoutRef, ForwardedRef, forwardRef, useState } from 'react'\n\nimport { MobileMenu28 } from '../../icons/MobileMenu28'\n\nimport GutterContainer from '../../shared/GutterContainer'\nimport Image from '../Image'\nimport Button from '../Button'\nimport LinksPlaceholder from './components/LinksPlaceholder'\nimport DropDownButton from './components/DropDownButton'\nimport MobileMenu from './components/MobileMenu'\nimport {\n ElementIDValue,\n GapXValue,\n ImageValue,\n NavigationLinksValue,\n ResponsiveIconRadioGroupValue,\n ResponsiveSelectValue,\n TextInputValue,\n TextStyleValue,\n NavigationButton as NavigationButtonValue,\n} from '../../../prop-controllers/descriptors'\nimport {\n LinkPropControllerValue,\n ResponsiveLengthData,\n ResponsiveValue,\n} from '@makeswift/prop-controllers'\n\nimport { ColorValue as Color } from '../../utils/types'\nimport { colorToString } from '../../utils/colorToString'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\nimport { useResponsiveColor } from '../../hooks'\nimport { cx } from '@emotion/css'\nimport { useResponsiveStyle, useResponsiveTextStyle } from '../../utils/responsive-style'\nimport { useStyle } from '../../../runtimes/react/use-style'\n\ntype Props = {\n id?: ElementIDValue\n links?: NavigationLinksValue\n linkTextStyle?: TextStyleValue\n showLogo?: boolean\n logoFile?: ImageValue\n logoWidth?: ResponsiveLengthData\n logoAltText?: TextInputValue\n logoLink?: LinkPropControllerValue\n alignment?: ResponsiveIconRadioGroupValue<'flex-start' \| 'center' \| 'flex-end'>\n gutter?: GapXValue\n mobileMenuAnimation?: ResponsiveSelectValue<'coverRight' \| 'coverLeft'>\n mobileMenuOpenIconColor?: ResponsiveColor \| null\n mobileMenuCloseIconColor?: ResponsiveColor \| null\n mobileMenuBackgroundColor?: ResponsiveColor \| null\n width?: string\n margin?: string\n}\n\ntype ContainerBaseProps = {\n width?: string\n margin?: string\n textStyle: Props['linkTextStyle']\n gutter: Props['gutter']\n}\n\ntype ContainerProps = ContainerBaseProps &\n Omit<ComponentPropsWithoutRef<'nav'>, keyof ContainerBaseProps>\n\nconst Container = forwardRef(function Container(\n { className, width, margin, textStyle, gutter, ...restOfProps }: ContainerProps,\n ref: ForwardedRef<HTMLElement>,\n) {\n return (\n <nav\n {...restOfProps}\n ref={ref}\n className={cx(\n useStyle({ display: 'flex', alignItems: 'center' }),\n width,\n margin,\n useStyle(useResponsiveTextStyle(textStyle)),\n useStyle(\n useResponsiveStyle([gutter] as const, ([gutter = { value: 0, unit: 'px' }]) => ({\n gap: `${gutter.value}${gutter.unit}`,\n })),\n ),\n className,\n )}\n />\n )\n})\n\ntype LinksContainerBaseProps = {\n alignment: Props['alignment']\n mobileMenuAnimation: Props['mobileMenuAnimation']\n}\n\ntype LinksContainerProps = LinksContainerBaseProps &\n Omit<ComponentPropsWithoutRef<'div'>, keyof LinksContainerBaseProps>\n\nfunction LinksContainer({\n className,\n alignment,\n mobileMenuAnimation,\n ...restOfProps\n}: LinksContainerProps) {\n return (\n <div\n {...restOfProps}\n className={cx(\n useStyle({\n display: 'flex',\n alignItems: 'center',\n flexGrow: 1,\n }),\n useStyle(\n useResponsiveStyle(\n [alignment, mobileMenuAnimation] as const,\n ([alignment = 'flex-end', mobileMenuAnimation]) => ({\n display: mobileMenuAnimation == null ? 'flex' : 'none',\n justifyContent: alignment,\n }),\n ),\n ),\n className,\n )}\n />\n )\n}\n\ntype OpenIconContainerBaseProps = {\n mobileMenuAnimation: Props['mobileMenuAnimation']\n alignment: Props['alignment']\n color: ResponsiveValue<Color> \| null \| undefined\n}\n\ntype OpenIconContainerProps = OpenIconContainerBaseProps &\n Omit<ComponentPropsWithoutRef<'button'>, keyof OpenIconContainerBaseProps>\n\nfunction OpenIconContainer({\n className,\n mobileMenuAnimation,\n alignment,\n color,\n ...restOfProps\n}: OpenIconContainerProps) {\n return (\n <button\n {...restOfProps}\n className={cx(\n useStyle({\n display: 'none',\n flexGrow: 1,\n alignItems: 'center',\n background: 'none',\n outline: 0,\n border: 0,\n padding: 0,\n fill: 'currentcolor',\n }),\n useStyle(\n useResponsiveStyle(\n [mobileMenuAnimation, alignment, color] as const,\n ([mobileMenuAnimation, alignment = 'flex-end', color]) => ({\n display: mobileMenuAnimation == null ? 'none' : 'flex',\n justifyContent: alignment,\n color: color == null ? 'rgba(161, 168, 194, 0.5)' : colorToString(color),\n }),\n ),\n ),\n className,\n )}\n />\n )\n}\n\ntype NavigationButtonProps = NavigationButtonValue['payload'] &\n Omit<ComponentPropsWithoutRef<typeof Button>, 'color' \| 'textColor'>\n\nfunction NavigationButton(props: NavigationButtonProps): JSX.Element {\n const { textColor, color, ...restOfProps } = props\n\n return (\n <Button\n {...restOfProps}\n textColor={useResponsiveColor(textColor)}\n color={useResponsiveColor(color)}\n />\n )\n}\n\nconst placeholder = {\n src: \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='93.12' height='36' viewBox='0 0 93.12 36'%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpath d='M18,0A18,18,0,1,1,0,18,18,18,0,0,1,18,0ZM49.36,21.94h6.36V24H46.8V10h2.56Zm9.06.72a4.88,4.88,0,0,1-1.64-3.72,5,5,0,0,1,1.64-3.74,5.57,5.57,0,0,1,7.7,0,5.09,5.09,0,0,1,.26,7.18l-.26.26a5.56,5.56,0,0,1-7.7,0Zm1.68-6a3.39,3.39,0,0,0,0,4.52,3,3,0,0,0,4.24.08l.08-.08a3.39,3.39,0,0,0,0-4.52,3,3,0,0,0-4.24-.08Zm10,10.68,1-1.92a5.28,5.28,0,0,0,3.3,1.22,3.6,3.6,0,0,0,2.32-.72,2.73,2.73,0,0,0,.9-2.26V22.5a3.61,3.61,0,0,1-1.45,1.26,4.35,4.35,0,0,1-2,.46,4.57,4.57,0,0,1-3.58-1.54A5.48,5.48,0,0,1,69.2,18.9a5.42,5.42,0,0,1,1.36-3.74,4.64,4.64,0,0,1,3.62-1.5,4,4,0,0,1,3.44,1.72v-1.5h2.46v9a6.13,6.13,0,0,1-1.43,4.46,5.27,5.27,0,0,1-4,1.44,7.09,7.09,0,0,1-4.53-1.42Zm1.54-8.44a3.4,3.4,0,0,0,.82,2.3,2.72,2.72,0,0,0,2.17.94,3.13,3.13,0,0,0,1.21-.22,2.89,2.89,0,0,0,1-.62,3.08,3.08,0,0,0,.63-1,3.62,3.62,0,0,0,.21-1.3,4,4,0,0,0-.23-1.33,3.3,3.3,0,0,0-.63-1.05,2.74,2.74,0,0,0-1-.68,3.35,3.35,0,0,0-1.25-.24,2.92,2.92,0,0,0-1.2.24,2.58,2.58,0,0,0-.93.67,3,3,0,0,0-.59,1,3.89,3.89,0,0,0-.19,1.31ZM83.8,22.66a4.88,4.88,0,0,1-1.64-3.72A5,5,0,0,1,83.8,15.2a5.57,5.57,0,0,1,7.7,0,5.09,5.09,0,0,1,.26,7.18,3.19,3.19,0,0,1-.26.26,5.56,5.56,0,0,1-7.7,0Zm1.68-6a3.39,3.39,0,0,0,0,4.52,3,3,0,0,0,4.24.08l.08-.08a3.39,3.39,0,0,0,0-4.52,3,3,0,0,0-4.24-.08Z' fill='%23a1a8c2' opacity='0.4' style='isolation: isolate'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A\",\n dimensions: { width: 93, height: 36 },\n}\n\nconst Navigation = forwardRef<HTMLDivElement, Props>(function Navigation(\n {\n id,\n links = [],\n linkTextStyle,\n showLogo,\n logoFile,\n logoWidth,\n logoAltText,\n logoLink,\n alignment,\n gutter,\n mobileMenuAnimation,\n mobileMenuOpenIconColor,\n mobileMenuCloseIconColor,\n mobileMenuBackgroundColor,\n width,\n margin,\n },\n ref,\n) {\n const [isOpen, setIsOpen] = useState(false)\n\n return (\n <Container\n ref={ref}\n id={id}\n width={width}\n margin={margin}\n textStyle={linkTextStyle}\n gutter={gutter}\n >\n {showLogo === true && (\n <Image\n altText={logoAltText}\n file={logoFile}\n link={logoLink}\n placeholder={placeholder}\n width={logoWidth}\n />\n )}\n <div style={{ display: 'flex', flexGrow: 1, justifyContent: 'flex-end' }}>\n <LinksContainer alignment={alignment} mobileMenuAnimation={mobileMenuAnimation}>\n {links.length > 0 ? (\n links.map((link, i) => (\n <GutterContainer\n key={link.id}\n gutter={gutter}\n first={i === 0}\n last={i === links.length - 1}\n >\n {link.type === 'button' && (\n <NavigationButton {...link.payload}>{link.payload.label}</NavigationButton>\n )}\n {link.type === 'dropdown' && <DropDownButton {...link.payload} />}\n </GutterContainer>\n ))\n ) : (\n <LinksPlaceholder gutter={gutter} />\n )}\n </LinksContainer>\n <OpenIconContainer\n alignment={alignment}\n color={mobileMenuOpenIconColor}\n mobileMenuAnimation={mobileMenuAnimation}\n onClick={() => setIsOpen(true)}\n >\n <MobileMenu28 />\n </OpenIconContainer>\n <MobileMenu\n animation={mobileMenuAnimation}\n backgroundColor={mobileMenuBackgroundColor}\n closeIconColor={mobileMenuCloseIconColor}\n links={links}\n onClose={() => setIsOpen(false)}\n open={isOpen}\n />\n </div>\n </Container>\n )\n})\n\nexport default Navigation\n"],"mappings":"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","names":["Container","gutter","alignment","mobileMenuAnimation","color","Button","Navigation","Image","GutterContainer","DropDownButton","LinksPlaceholder","MobileMenu"]}

package/dist/cjs/components/builtin/Navigation/components/DropDownButton/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../../../src/components/builtin/Navigation/components/DropDownButton/index.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, ForwardedRef, forwardRef, useRef, useState } from 'react'\n\nimport { CaretDown8 } from '../../../../icons/CaretDown8'\nimport { Plus8 } from '../../../../icons/Plus8'\nimport { ArrowDown8 } from '../../../../icons/ArrowDown8'\nimport { ChevronDown8 } from '../../../../icons/ChevronDown8'\nimport {\n ResponsiveColorValue,\n TextStyleValue,\n LinkValue,\n} from '../../../../../prop-controllers/descriptors'\nimport { colorToString } from '../../../../utils/colorToString'\nimport { useResponsiveColor } from '../../../../hooks'\n\nimport { Link } from '../../../../shared/Link'\nimport Button from '../../../Button'\nimport { useIsomorphicLayoutEffect } from '../../../../hooks/useIsomorphicLayoutEffect'\nimport { cx, keyframes } from '@emotion/css'\nimport { useStyle } from '../../../../../runtimes/react/use-style'\nimport { useResponsiveStyle, useResponsiveTextStyle } from '../../../../utils/responsive-style'\n\nconst DROP_DOWN_MENU_WIDTH = 200\n\ntype Position = 'left' \| 'right'\n\nconst DROP_DOWN_MENU_CLASS_NAME = 'drop-down-menu'\n\ntype DropDownMenuBaseProps = {\n position: Position\n}\n\ntype DropDownMenuProps = DropDownMenuBaseProps &\n Omit<ComponentPropsWithoutRef<'div'>, keyof DropDownMenuBaseProps>\n\nfunction DropDownMenu({ className, position, ...restOfProps }: DropDownMenuProps) {\n return (\n <div\n {...restOfProps}\n className={cx(\n DROP_DOWN_MENU_CLASS_NAME,\n useStyle({\n position: 'absolute',\n top: '100%',\n left: position === 'left' ? 0 : 'auto',\n right: position === 'right' ? 0 : 'auto',\n background: '#fff',\n margin: 0,\n padding: '8px 0',\n borderRadius: 4,\n boxShadow: '0 3px 10px rgba(0, 0, 0, 0.15)',\n width: DROP_DOWN_MENU_WIDTH,\n zIndex: 99,\n listStyle: 'none',\n overflow: 'hidden',\n transformOrigin: '50% 0',\n willChange: 'transform, opacity',\n transformStyle: 'preserve-3d',\n display: 'none',\n }),\n className,\n )}\n />\n )\n}\n\nconst dropIn = keyframes`\n 0% {\n opacity: 0;\n transform: rotateX(-20deg);\n }\n 100% {\n opacity: 1;\n transform: none;\n }\n`\n\ntype DropDownContainerProps = ComponentPropsWithoutRef<'div'>\n\nconst DropDownContainer = forwardRef(function DropDownContainer(\n { className, ...restOfProps }: DropDownContainerProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n return (\n <div\n {...restOfProps}\n ref={ref}\n className={cx(\n useStyle({\n position: 'relative',\n [`&:hover .${DROP_DOWN_MENU_CLASS_NAME}`]: {\n display: 'block',\n animation: `${dropIn} 0.25s`,\n },\n }),\n className,\n )}\n />\n )\n})\n\ntype BaseDropDownItemProps = {\n className?: string\n color?: ResponsiveColorValue\n textStyle?: TextStyleValue\n}\n\ntype DropDownItemProps = BaseDropDownItemProps &\n Omit<ComponentPropsWithoutRef<typeof Link>, keyof BaseDropDownItemProps>\n\nfunction DropDownItem({ className, color, textStyle, ...restOfProps }: DropDownItemProps) {\n const colorData = useResponsiveColor(color)\n\n return (\n <Link\n {...restOfProps}\n className={cx(\n useStyle({\n display: 'block',\n textDecoration: 'none',\n lineHeight: 1.4,\n padding: '8px 16px',\n color: 'black',\n backgroundColor: 'transparent',\n transition: 'background-color 0.2s',\n }),\n useStyle(useResponsiveTextStyle(textStyle)),\n useStyle(\n useResponsiveStyle([colorData, textStyle] as const, ([color, textStyle = {}]) => {\n const fontSize = textStyle.fontSize \|\| { value: 14, unit: 'px' }\n const fontWeight = textStyle.fontWeight == null ? 'normal' : textStyle.fontWeight\n const fontStyle = textStyle.fontStyle \|\| []\n const letterSpacing = textStyle.letterSpacing == null ? null : textStyle.letterSpacing\n const textTransform = textStyle.textTransform \|\| []\n\n return {\n color: color == null ? 'black' : colorToString(color),\n fontSize: `${fontSize.value}${fontSize.unit}`,\n fontWeight,\n fontStyle: fontStyle.includes('italic') ? 'italic' : 'normal',\n letterSpacing: letterSpacing == null ? 'normal' : `${letterSpacing}px`,\n textTransform: textTransform.includes('uppercase') ? 'uppercase' : 'none',\n }\n }),\n ),\n useStyle({\n '&:hover': {\n backgroundColor: 'rgba(0, 0, 0, 0.04)',\n },\n }),\n className,\n )}\n />\n )\n}\n\ntype Props = Omit<ComponentPropsWithoutRef<typeof Button>, 'textColor' \| 'color'> & {\n label: string\n caret?: 'caret' \| 'plus' \| 'arrow-down' \| 'chevron-down'\n links?: Array<{\n id: string\n payload: ComponentPropsWithoutRef<typeof DropDownItem> & {\n link?: LinkValue\n label: string\n }\n }>\n textColor?: ResponsiveColorValue\n color?: ResponsiveColorValue\n}\n\nexport default function DropDownButton({\n label,\n caret = 'caret',\n links = [],\n textColor,\n color,\n ...restOfProps\n}: Props): JSX.Element {\n const container = useRef<HTMLDivElement>(null)\n const [position, setPosition] = useState<Position>('left')\n\n useIsomorphicLayoutEffect(() => {\n if (\n container.current &&\n container.current.ownerDocument.defaultView!.innerWidth <\n container.current.offsetLeft + DROP_DOWN_MENU_WIDTH\n ) {\n setPosition('right')\n } else {\n setPosition('left')\n }\n }, [setPosition])\n\n return (\n <DropDownContainer ref={container}>\n <Button\n {...restOfProps}\n textColor={useResponsiveColor(textColor)}\n color={useResponsiveColor(color)}\n >\n <div style={{ display: 'flex', alignItems: 'center' }}>\n <span style={{ marginRight: 6 }}>{label}</span>\n <span style={{ display: 'inline-flex', fill: 'currentColor' }}>\n {caret === 'caret' && <CaretDown8 />}\n {caret === 'plus' && <Plus8 />}\n {caret === 'arrow-down' && <ArrowDown8 />}\n {caret === 'chevron-down' && <ChevronDown8 />}\n </span>\n </div>\n </Button>\n <DropDownMenu position={position}>\n {links.map(({ id, payload }) => (\n <DropDownItem {...payload} key={id}>\n {payload.label}\n </DropDownItem>\n ))}\n </DropDownMenu>\n </DropDownContainer>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAoCI;AA+KM;AAnNV,IAAAA,gBAAqF;AAErF,wBAA2B;AAC3B,mBAAsB;AACtB,wBAA2B;AAC3B,0BAA6B;AAM7B,2BAA8B;AAC9B,mBAAmC;AAEnC,kBAAqB;AACrB,oBAAmB;AACnB,uCAA0C;AAC1C,iBAA8B;AAC9B,uBAAyB;AACzB,8BAA2D;AAE3D,MAAM,uBAAuB;AAI7B,MAAM,4BAA4B;AASlC,SAAS,aAAa,EAAE,WAAW,UAAU,GAAG,YAAY,GAAsB;AAChF,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAW;AAAA,QACT;AAAA,YACA,2BAAS;AAAA,UACP,UAAU;AAAA,UACV,KAAK;AAAA,UACL,MAAM,aAAa,SAAS,IAAI;AAAA,UAChC,OAAO,aAAa,UAAU,IAAI;AAAA,UAClC,YAAY;AAAA,UACZ,QAAQ;AAAA,UACR,SAAS;AAAA,UACT,cAAc;AAAA,UACd,WAAW;AAAA,UACX,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,WAAW;AAAA,UACX,UAAU;AAAA,UACV,iBAAiB;AAAA,UACjB,YAAY;AAAA,UACZ,gBAAgB;AAAA,UAChB,SAAS;AAAA,QACX,CAAC;AAAA,QACD;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAaf,MAAM,wBAAoB,0BAAW,SAASC,mBAC5C,EAAE,WAAW,GAAG,YAAY,GAC5B,KACA;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,eAAW;AAAA,YACT,2BAAS;AAAA,UACP,UAAU;AAAA,UACV,CAAC,YAAY,yBAAyB,EAAE,GAAG;AAAA,YACzC,SAAS;AAAA,YACT,WAAW,GAAG,MAAM;AAAA,UACtB;AAAA,QACF,CAAC;AAAA,QACD;AAAA,MACF;AAAA;AAAA,EACF;AAEJ,CAAC;AAWD,SAAS,aAAa,EAAE,WAAW,OAAO,WAAW,GAAG,YAAY,GAAsB;AACxF,QAAM,gBAAY,iCAAmB,KAAK;AAE1C,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAW;AAAA,YACT,2BAAS;AAAA,UACP,SAAS;AAAA,UACT,gBAAgB;AAAA,UAChB,YAAY;AAAA,UACZ,SAAS;AAAA,UACT,OAAO;AAAA,UACP,iBAAiB;AAAA,UACjB,YAAY;AAAA,QACd,CAAC;AAAA,YACD,+BAAS,gDAAuB,SAAS,CAAC;AAAA,YAC1C;AAAA,cACE,4CAAmB,CAAC,WAAW,SAAS,GAAY,CAAC,CAACC,QAAOC,aAAY,CAAC,CAAC,MAAM;AAC/E,kBAAM,WAAWA,WAAU,YAAY,EAAE,OAAO,IAAI,MAAM,KAAK;AAC/D,kBAAM,aAAaA,WAAU,cAAc,OAAO,WAAWA,WAAU;AACvE,kBAAM,YAAYA,WAAU,aAAa,CAAC;AAC1C,kBAAM,gBAAgBA,WAAU,iBAAiB,OAAO,OAAOA,WAAU;AACzE,kBAAM,gBAAgBA,WAAU,iBAAiB,CAAC;AAElD,mBAAO;AAAA,cACL,OAAOD,UAAS,OAAO,cAAU,oCAAcA,MAAK;AAAA,cACpD,UAAU,GAAG,SAAS,KAAK,GAAG,SAAS,IAAI;AAAA,cAC3C;AAAA,cACA,WAAW,UAAU,SAAS,QAAQ,IAAI,WAAW;AAAA,cACrD,eAAe,iBAAiB,OAAO,WAAW,GAAG,aAAa;AAAA,cAClE,eAAe,cAAc,SAAS,WAAW,IAAI,cAAc;AAAA,YACrE;AAAA,UACF,CAAC;AAAA,QACH;AAAA,YACA,2BAAS;AAAA,UACP,WAAW;AAAA,YACT,iBAAiB;AAAA,UACnB;AAAA,QACF,CAAC;AAAA,QACD;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAgBe,SAAR,eAAgC;AAAA,EACrC;AAAA,EACA,QAAQ;AAAA,EACR,QAAQ,CAAC;AAAA,EACT;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAuB;AACrB,QAAM,gBAAY,sBAAuB,IAAI;AAC7C,QAAM,CAAC,UAAU,WAAW,QAAI,wBAAmB,MAAM;AAEzD,kEAA0B,MAAM;AAC9B,QACE,UAAU,WACV,UAAU,QAAQ,cAAc,YAAa,aAC3C,UAAU,QAAQ,aAAa,sBACjC;AACA,kBAAY,OAAO;AAAA,IACrB,OAAO;AACL,kBAAY,MAAM;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,WAAW,CAAC;AAEhB,SACE,6CAAC,qBAAkB,KAAK,WACtB;AAAA;AAAA,MAAC,cAAAE;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ,eAAW,iCAAmB,SAAS;AAAA,QACvC,WAAO,iCAAmB,KAAK;AAAA,QAE/B,uDAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,SAAS,GAClD;AAAA,sDAAC,UAAK,OAAO,EAAE,aAAa,EAAE,GAAI,iBAAM;AAAA,UACxC,6CAAC,UAAK,OAAO,EAAE,SAAS,eAAe,MAAM,eAAe,GACzD;AAAA,sBAAU,WAAW,4CAAC,gCAAW;AAAA,YACjC,UAAU,UAAU,4CAAC,sBAAM;AAAA,YAC3B,UAAU,gBAAgB,4CAAC,gCAAW;AAAA,YACtC,UAAU,kBAAkB,4CAAC,oCAAa;AAAA,aAC7C;AAAA,WACF;AAAA;AAAA,IACF;AAAA,IACA,4CAAC,gBAAa,UACX,gBAAM,IAAI,CAAC,EAAE,IAAI,QAAQ,MACxB,gDAAC,gBAAc,GAAG,SAAS,KAAK,MAC7B,QAAQ,KACX,CACD,GACH;AAAA,KACF;AAEJ;","names":["import_react","DropDownContainer","color","textStyle","Button"]}
1	+ {"version":3,"sources":["../../../../../../../src/components/builtin/Navigation/components/DropDownButton/index.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, ForwardedRef, forwardRef, useRef, useState } from 'react'\n\nimport { CaretDown8 } from '../../../../icons/CaretDown8'\nimport { Plus8 } from '../../../../icons/Plus8'\nimport { ArrowDown8 } from '../../../../icons/ArrowDown8'\nimport { ChevronDown8 } from '../../../../icons/ChevronDown8'\nimport { TextStyleValue } from '../../../../../prop-controllers/descriptors'\nimport { colorToString } from '../../../../utils/colorToString'\nimport { useResponsiveColor } from '../../../../hooks'\n\nimport { Link } from '../../../../shared/Link'\nimport Button from '../../../Button'\nimport { useIsomorphicLayoutEffect } from '../../../../hooks/useIsomorphicLayoutEffect'\nimport { cx, keyframes } from '@emotion/css'\nimport { useStyle } from '../../../../../runtimes/react/use-style'\nimport { useResponsiveStyle, useResponsiveTextStyle } from '../../../../utils/responsive-style'\nimport { LinkData, ResponsiveColorData } from '@makeswift/prop-controllers'\n\nconst DROP_DOWN_MENU_WIDTH = 200\n\ntype Position = 'left' \| 'right'\n\nconst DROP_DOWN_MENU_CLASS_NAME = 'drop-down-menu'\n\ntype DropDownMenuBaseProps = {\n position: Position\n}\n\ntype DropDownMenuProps = DropDownMenuBaseProps &\n Omit<ComponentPropsWithoutRef<'div'>, keyof DropDownMenuBaseProps>\n\nfunction DropDownMenu({ className, position, ...restOfProps }: DropDownMenuProps) {\n return (\n <div\n {...restOfProps}\n className={cx(\n DROP_DOWN_MENU_CLASS_NAME,\n useStyle({\n position: 'absolute',\n top: '100%',\n left: position === 'left' ? 0 : 'auto',\n right: position === 'right' ? 0 : 'auto',\n background: '#fff',\n margin: 0,\n padding: '8px 0',\n borderRadius: 4,\n boxShadow: '0 3px 10px rgba(0, 0, 0, 0.15)',\n width: DROP_DOWN_MENU_WIDTH,\n zIndex: 99,\n listStyle: 'none',\n overflow: 'hidden',\n transformOrigin: '50% 0',\n willChange: 'transform, opacity',\n transformStyle: 'preserve-3d',\n display: 'none',\n }),\n className,\n )}\n />\n )\n}\n\nconst dropIn = keyframes`\n 0% {\n opacity: 0;\n transform: rotateX(-20deg);\n }\n 100% {\n opacity: 1;\n transform: none;\n }\n`\n\ntype DropDownContainerProps = ComponentPropsWithoutRef<'div'>\n\nconst DropDownContainer = forwardRef(function DropDownContainer(\n { className, ...restOfProps }: DropDownContainerProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n return (\n <div\n {...restOfProps}\n ref={ref}\n className={cx(\n useStyle({\n position: 'relative',\n [`&:hover .${DROP_DOWN_MENU_CLASS_NAME}`]: {\n display: 'block',\n animation: `${dropIn} 0.25s`,\n },\n }),\n className,\n )}\n />\n )\n})\n\ntype BaseDropDownItemProps = {\n className?: string\n color?: ResponsiveColorData\n textStyle?: TextStyleValue\n}\n\ntype DropDownItemProps = BaseDropDownItemProps &\n Omit<ComponentPropsWithoutRef<typeof Link>, keyof BaseDropDownItemProps>\n\nfunction DropDownItem({ className, color, textStyle, ...restOfProps }: DropDownItemProps) {\n const colorData = useResponsiveColor(color)\n\n return (\n <Link\n {...restOfProps}\n className={cx(\n useStyle({\n display: 'block',\n textDecoration: 'none',\n lineHeight: 1.4,\n padding: '8px 16px',\n color: 'black',\n backgroundColor: 'transparent',\n transition: 'background-color 0.2s',\n }),\n useStyle(useResponsiveTextStyle(textStyle)),\n useStyle(\n useResponsiveStyle([colorData, textStyle] as const, ([color, textStyle = {}]) => {\n const fontSize = textStyle.fontSize \|\| { value: 14, unit: 'px' }\n const fontWeight = textStyle.fontWeight == null ? 'normal' : textStyle.fontWeight\n const fontStyle = textStyle.fontStyle \|\| []\n const letterSpacing = textStyle.letterSpacing == null ? null : textStyle.letterSpacing\n const textTransform = textStyle.textTransform \|\| []\n\n return {\n color: color == null ? 'black' : colorToString(color),\n fontSize: `${fontSize.value}${fontSize.unit}`,\n fontWeight,\n fontStyle: fontStyle.includes('italic') ? 'italic' : 'normal',\n letterSpacing: letterSpacing == null ? 'normal' : `${letterSpacing}px`,\n textTransform: textTransform.includes('uppercase') ? 'uppercase' : 'none',\n }\n }),\n ),\n useStyle({\n '&:hover': {\n backgroundColor: 'rgba(0, 0, 0, 0.04)',\n },\n }),\n className,\n )}\n />\n )\n}\n\ntype Props = Omit<ComponentPropsWithoutRef<typeof Button>, 'textColor' \| 'color'> & {\n label: string\n caret?: 'caret' \| 'plus' \| 'arrow-down' \| 'chevron-down'\n links?: Array<{\n id: string\n payload: ComponentPropsWithoutRef<typeof DropDownItem> & {\n link?: LinkData\n label: string\n }\n }>\n textColor?: ResponsiveColorData\n color?: ResponsiveColorData\n}\n\nexport default function DropDownButton({\n label,\n caret = 'caret',\n links = [],\n textColor,\n color,\n ...restOfProps\n}: Props): JSX.Element {\n const container = useRef<HTMLDivElement>(null)\n const [position, setPosition] = useState<Position>('left')\n\n useIsomorphicLayoutEffect(() => {\n if (\n container.current &&\n container.current.ownerDocument.defaultView!.innerWidth <\n container.current.offsetLeft + DROP_DOWN_MENU_WIDTH\n ) {\n setPosition('right')\n } else {\n setPosition('left')\n }\n }, [setPosition])\n\n return (\n <DropDownContainer ref={container}>\n <Button\n {...restOfProps}\n textColor={useResponsiveColor(textColor)}\n color={useResponsiveColor(color)}\n >\n <div style={{ display: 'flex', alignItems: 'center' }}>\n <span style={{ marginRight: 6 }}>{label}</span>\n <span style={{ display: 'inline-flex', fill: 'currentColor' }}>\n {caret === 'caret' && <CaretDown8 />}\n {caret === 'plus' && <Plus8 />}\n {caret === 'arrow-down' && <ArrowDown8 />}\n {caret === 'chevron-down' && <ChevronDown8 />}\n </span>\n </div>\n </Button>\n <DropDownMenu position={position}>\n {links.map(({ id, payload }) => (\n <DropDownItem {...payload} key={id}>\n {payload.label}\n </DropDownItem>\n ))}\n </DropDownMenu>\n </DropDownContainer>\n )\n}\n"],"mappings":"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","names":["import_react","DropDownContainer","color","textStyle","Button"]}

package/dist/cjs/components/builtin/Navigation/components/LinksPlaceholder/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../../../src/components/builtin/Navigation/components/LinksPlaceholder/index.tsx"],"sourcesContent":["import { ~~ResponsiveLengthValue~~ } from '~~../../../../../~~prop-controllers~~/descriptors~~'\nimport { useStyle } from '../../../../../runtimes/react/use-style'\nimport GutterContainer from '../../../../shared/GutterContainer'\n\ntype PlaceholderLinkProps = {\n width: number\n button?: boolean\n}\n\nfunction PlaceholderLink({ width, button }: PlaceholderLinkProps) {\n return (\n <div\n className={useStyle({\n width,\n height: button === true ? 32 : 8,\n backgroundColor: '#a1a8c2',\n borderRadius: button === true ? 6 : 2,\n opacity: 0.4,\n })}\n />\n )\n}\n\ntype Props = { gutter?: ~~ResponsiveLengthValue~~ }\n\nconst links = [{ width: 50 }, { width: 70 }, { width: 60 }, { width: 80, button: true }]\n\nexport default function LinksPlaceholder({ gutter }: Props): JSX.Element {\n return (\n <>\n {links.map((link, i) => (\n <GutterContainer key={i} gutter={gutter} first={i === 0} last={i === links.length - 1}>\n <PlaceholderLink {...link} />\n </GutterContainer>\n ))}\n </>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAWI;AAVJ,uBAAyB;AACzB,6BAA4B;AAO5B,SAAS,gBAAgB,EAAE,OAAO,OAAO,GAAyB;AAChE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW,2BAAS;AAAA,QAClB;AAAA,QACA,QAAQ,WAAW,OAAO,KAAK;AAAA,QAC/B,iBAAiB;AAAA,QACjB,cAAc,WAAW,OAAO,IAAI;AAAA,QACpC,SAAS;AAAA,MACX,CAAC;AAAA;AAAA,EACH;AAEJ;AAIA,MAAM,QAAQ,CAAC,EAAE,OAAO,GAAG,GAAG,EAAE,OAAO,GAAG,GAAG,EAAE,OAAO,GAAG,GAAG,EAAE,OAAO,IAAI,QAAQ,KAAK,CAAC;AAExE,SAAR,iBAAkC,EAAE,OAAO,GAAuB;AACvE,SACE,2EACG,gBAAM,IAAI,CAAC,MAAM,MAChB,4CAAC,uBAAAA,SAAA,EAAwB,QAAgB,OAAO,MAAM,GAAG,MAAM,MAAM,MAAM,SAAS,GAClF,sDAAC,mBAAiB,GAAG,MAAM,KADP,CAEtB,CACD,GACH;AAEJ;","names":["GutterContainer"]}
1	+ {"version":3,"sources":["../../../../../../../src/components/builtin/Navigation/components/LinksPlaceholder/index.tsx"],"sourcesContent":["import { ResponsiveLengthData } from '@makeswift/prop-controllers'\nimport { useStyle } from '../../../../../runtimes/react/use-style'\nimport GutterContainer from '../../../../shared/GutterContainer'\n\ntype PlaceholderLinkProps = {\n width: number\n button?: boolean\n}\n\nfunction PlaceholderLink({ width, button }: PlaceholderLinkProps) {\n return (\n <div\n className={useStyle({\n width,\n height: button === true ? 32 : 8,\n backgroundColor: '#a1a8c2',\n borderRadius: button === true ? 6 : 2,\n opacity: 0.4,\n })}\n />\n )\n}\n\ntype Props = { gutter?: ResponsiveLengthData }\n\nconst links = [{ width: 50 }, { width: 70 }, { width: 60 }, { width: 80, button: true }]\n\nexport default function LinksPlaceholder({ gutter }: Props): JSX.Element {\n return (\n <>\n {links.map((link, i) => (\n <GutterContainer key={i} gutter={gutter} first={i === 0} last={i === links.length - 1}>\n <PlaceholderLink {...link} />\n </GutterContainer>\n ))}\n </>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAWI;AAVJ,uBAAyB;AACzB,6BAA4B;AAO5B,SAAS,gBAAgB,EAAE,OAAO,OAAO,GAAyB;AAChE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW,2BAAS;AAAA,QAClB;AAAA,QACA,QAAQ,WAAW,OAAO,KAAK;AAAA,QAC/B,iBAAiB;AAAA,QACjB,cAAc,WAAW,OAAO,IAAI;AAAA,QACpC,SAAS;AAAA,MACX,CAAC;AAAA;AAAA,EACH;AAEJ;AAIA,MAAM,QAAQ,CAAC,EAAE,OAAO,GAAG,GAAG,EAAE,OAAO,GAAG,GAAG,EAAE,OAAO,GAAG,GAAG,EAAE,OAAO,IAAI,QAAQ,KAAK,CAAC;AAExE,SAAR,iBAAkC,EAAE,OAAO,GAAuB;AACvE,SACE,2EACG,gBAAM,IAAI,CAAC,MAAM,MAChB,4CAAC,uBAAAA,SAAA,EAAwB,QAAgB,OAAO,MAAM,GAAG,MAAM,MAAM,MAAM,SAAS,GAClF,sDAAC,mBAAiB,GAAG,MAAM,KADP,CAEtB,CACD,GACH;AAEJ;","names":["GutterContainer"]}