npm - @makeswift/runtime - Versions diffs - 0.18.0-canary.7 → 0.18.0-canary.9 - Mend

@makeswift/runtime 0.18.0-canary.7 → 0.18.0-canary.9

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 (92) hide show

package/dist/esm/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 { ResponsiveIconRadioGroupValue } from '../../../prop-controllers/descriptors'\nimport {\n ImageData,\n LinkData,\n NavigationButtonData,\n NavigationLinksData,\n ResponsiveGapData,\n ResponsiveLengthData,\n ResponsiveTextStyleData,\n ResponsiveValue,\n type ResponsiveSelectValue,\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?: string\n links?: NavigationLinksData\n linkTextStyle?: ResponsiveTextStyleData\n showLogo?: boolean\n logoFile?: ImageData\n logoWidth?: ResponsiveLengthData\n logoAltText?: string\n logoLink?: LinkData\n alignment?: ResponsiveIconRadioGroupValue<'flex-start' \| 'center' \| 'flex-end'>\n gutter?: ResponsiveGapData\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 = NavigationButtonData['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","Navigation"]}
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 type ImageData,\n type LinkData,\n type NavigationButtonData,\n type NavigationLinksData,\n type ResponsiveGapData,\n type ResponsiveLengthData,\n type ResponsiveIconRadioGroupValue,\n type ResponsiveTextStyleData,\n type ResponsiveValue,\n type ResponsiveSelectValue,\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?: string\n links?: NavigationLinksData\n linkTextStyle?: ResponsiveTextStyleData\n showLogo?: boolean\n logoFile?: ImageData\n logoWidth?: ResponsiveLengthData\n logoAltText?: string\n logoLink?: LinkData\n alignment?: ResponsiveIconRadioGroupValue<'flex-start' \| 'center' \| 'flex-end'>\n gutter?: ResponsiveGapData\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 = NavigationButtonData['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","Navigation"]}

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

@@ -1,4 +1,3 @@
-import { Props } from "../../../prop-controllers";
 import { findBreakpointOverride, getBaseBreakpoint } from "../../../state/modules/breakpoints";
 import { MakeswiftComponentType } from "../constants";
 import { ComponentIcon } from "../../../state/modules/components-meta";
@@ -17,6 +16,7 @@ import {
   TextStyle,
   NavigationLinks,
   GapX,
+  ResponsiveIconRadioGroup,
   ResponsiveSelect,
   ElementID,
   Image,
@@ -87,7 +87,7 @@ function registerComponent(runtime) {
             checkboxPropControllerDataSchema.optional().catch(void 0).parse(props.showLogo)
           ) === false
         })),
-        alignment: Props.ResponsiveIconRadioGroup({
+        alignment: ResponsiveIconRadioGroup({
           label: "Alignment",
           options: [
             { label: "Left", value: "flex-start", icon: "AlignLeft16" },

package/dist/esm/components/builtin/Navigation/register.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/components/builtin/Navigation/register.ts"],"sourcesContent":["import { ~~Props } from '../../../prop-controllers'\nimport {~~ ReactRuntime } from '../../../runtimes/react'\nimport { findBreakpointOverride, getBaseBreakpoint } from '../../../state/modules/breakpoints'\nimport { MakeswiftComponentType } from '../constants'\nimport { ComponentIcon } from '../../../state/modules/components-meta'\nimport { lazy } from 'react'\nimport {\n ControlDataTypeKey,\n Checkbox,\n Link,\n ResponsiveColor,\n ResponsiveLength,\n ResponsiveLengthPropControllerDataV1Type,\n checkboxPropControllerDataSchema,\n getCheckboxPropControllerDataBoolean,\n Margin,\n Width,\n TextStyle,\n NavigationLinks,\n NavigationLinksData,\n GapX,\n ResponsiveSelect,\n ElementID,\n Image,\n TextInput,\n type PropData,\n} from '@makeswift/prop-controllers'\n\nexport function registerComponent(runtime: ReactRuntime) {\n function isHiddenBasedOnMenuAnimation(props: Record<string, unknown>, deviceId: string): boolean {\n const mobileMenuAnimation = ResponsiveSelect.fromPropData(\n props.mobileMenuAnimation as PropData<typeof ResponsiveSelect> \| undefined,\n )\n\n return !findBreakpointOverride(runtime.getBreakpoints(), mobileMenuAnimation, deviceId)\n }\n\n return runtime.registerComponent(\n lazy(() => import('./Navigation')),\n {\n type: MakeswiftComponentType.Navigation,\n label: 'Navigation',\n icon: ComponentIcon.Navigation,\n props: {\n id: ElementID(),\n links: NavigationLinks(),\n linkTextStyle: TextStyle(props => {\n const links = props.links as NavigationLinksData \| undefined\n\n return {\n label: 'Link text style',\n hidden: links == null \|\| links.length === 0,\n }\n }),\n showLogo: Checkbox({ preset: true, label: 'Show logo' }),\n logoFile: Image(props => ({\n label: 'Logo',\n hidden:\n getCheckboxPropControllerDataBoolean(\n checkboxPropControllerDataSchema.optional().catch(undefined).parse(props.showLogo),\n ) === false,\n })),\n logoWidth: ResponsiveLength(props => ({\n // TODO(miguel): We're manually constructing the data here but should be using a factory\n // function instead. This is because the factory function currently expects a definition\n // but we don't have one to pass here. Perhaps we should make the factory function not\n // require the definition and use the latest version when a definition isn't provided.\n preset: {\n [ControlDataTypeKey]: ResponsiveLengthPropControllerDataV1Type,\n value: [\n {\n deviceId: getBaseBreakpoint(runtime.getBreakpoints()).id,\n value: { value: 100, unit: 'px' },\n },\n ],\n },\n label: 'Logo width',\n min: 0,\n max: 1000,\n // TODO: This is hardcoded value, import it from LengthInputOptions\n options: [{ value: 'px', label: 'Pixels', icon: 'Px16' }],\n hidden:\n getCheckboxPropControllerDataBoolean(\n checkboxPropControllerDataSchema.optional().catch(undefined).parse(props.showLogo),\n ) === false,\n })),\n logoAltText: TextInput(props => ({\n label: 'Logo alt text',\n hidden:\n getCheckboxPropControllerDataBoolean(\n checkboxPropControllerDataSchema.optional().catch(undefined).parse(props.showLogo),\n ) === false,\n })),\n logoLink: Link(props => ({\n label: 'Logo on click',\n hidden:\n getCheckboxPropControllerDataBoolean(\n checkboxPropControllerDataSchema.optional().catch(undefined).parse(props.showLogo),\n ) === false,\n })),\n alignment: ~~Props.~~ResponsiveIconRadioGroup({\n label: 'Alignment',\n options: [\n { label: 'Left', value: 'flex-start', icon: 'AlignLeft16' },\n { label: 'Center', value: 'center', icon: 'AlignCenter16' },\n { label: 'End', value: 'flex-end', icon: 'AlignRight16' },\n ],\n defaultValue: 'flex-end',\n }),\n gutter: GapX({\n preset: [\n {\n deviceId: getBaseBreakpoint(runtime.getBreakpoints()).id,\n value: { value: 10, unit: 'px' },\n },\n ],\n label: 'Link gap',\n min: 0,\n max: 100,\n step: 1,\n defaultValue: { value: 0, unit: 'px' },\n }),\n mobileMenuAnimation: ResponsiveSelect({\n label: 'Mobile menu',\n options: [\n { value: 'coverRight', label: 'Cover from right' },\n { value: 'coverLeft', label: 'Cover from left' },\n ],\n }),\n mobileMenuOpenIconColor: ResponsiveColor((props, device) => {\n return {\n label: 'Open icon color',\n placeholder: 'rgba(161, 168, 194, 0.5)',\n hidden: isHiddenBasedOnMenuAnimation(props, device),\n }\n }),\n mobileMenuCloseIconColor: ResponsiveColor((props, device) => {\n return {\n label: 'Close icon color',\n placeholder: 'rgba(161, 168, 194, 0.5)',\n hidden: isHiddenBasedOnMenuAnimation(props, device),\n }\n }),\n mobileMenuBackgroundColor: ResponsiveColor((props, device) => {\n return {\n label: 'Menu BG color',\n placeholder: 'black',\n hidden: isHiddenBasedOnMenuAnimation(props, device),\n }\n }),\n width: Width({\n format: Width.Format.ClassName,\n defaultValue: { value: 100, unit: '%' },\n }),\n margin: Margin({ format: Margin.Format.ClassName }),\n },\n },\n )\n}\n"],"mappings":"~~AAAA~~,SAAS,~~aAAa;AAEtB,SAAS,~~wBAAwB,yBAAyB;AAC1D,SAAS,8BAA8B;AACvC,SAAS,qBAAqB;AAC9B,SAAS,YAAY;AACrB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAEA,SAAS,kBAAkB,SAAuB;AACvD,WAAS,6BAA6B,OAAgC,UAA2B;AAC/F,UAAM,sBAAsB,iBAAiB;AAAA,MAC3C,MAAM;AAAA,IACR;AAEA,WAAO,CAAC,uBAAuB,QAAQ,eAAe,GAAG,qBAAqB,QAAQ;AAAA,EACxF;AAEA,SAAO,QAAQ;AAAA,IACb,KAAK,MAAM,OAAO,cAAc,CAAC;AAAA,IACjC;AAAA,MACE,MAAM,uBAAuB;AAAA,MAC7B,OAAO;AAAA,MACP,MAAM,cAAc;AAAA,MACpB,OAAO;AAAA,QACL,IAAI,UAAU;AAAA,QACd,OAAO,gBAAgB;AAAA,QACvB,eAAe,UAAU,WAAS;AAChC,gBAAM,QAAQ,MAAM;AAEpB,iBAAO;AAAA,YACL,OAAO;AAAA,YACP,QAAQ,SAAS,QAAQ,MAAM,WAAW;AAAA,UAC5C;AAAA,QACF,CAAC;AAAA,QACD,UAAU,SAAS,EAAE,QAAQ,MAAM,OAAO,YAAY,CAAC;AAAA,QACvD,UAAU,MAAM,YAAU;AAAA,UACxB,OAAO;AAAA,UACP,QACE;AAAA,YACE,iCAAiC,SAAS,EAAE,MAAM,MAAS,EAAE,MAAM,MAAM,QAAQ;AAAA,UACnF,MAAM;AAAA,QACV,EAAE;AAAA,QACF,WAAW,iBAAiB,YAAU;AAAA;AAAA;AAAA;AAAA;AAAA,UAKpC,QAAQ;AAAA,YACN,CAAC,kBAAkB,GAAG;AAAA,YACtB,OAAO;AAAA,cACL;AAAA,gBACE,UAAU,kBAAkB,QAAQ,eAAe,CAAC,EAAE;AAAA,gBACtD,OAAO,EAAE,OAAO,KAAK,MAAM,KAAK;AAAA,cAClC;AAAA,YACF;AAAA,UACF;AAAA,UACA,OAAO;AAAA,UACP,KAAK;AAAA,UACL,KAAK;AAAA;AAAA,UAEL,SAAS,CAAC,EAAE,OAAO,MAAM,OAAO,UAAU,MAAM,OAAO,CAAC;AAAA,UACxD,QACE;AAAA,YACE,iCAAiC,SAAS,EAAE,MAAM,MAAS,EAAE,MAAM,MAAM,QAAQ;AAAA,UACnF,MAAM;AAAA,QACV,EAAE;AAAA,QACF,aAAa,UAAU,YAAU;AAAA,UAC/B,OAAO;AAAA,UACP,QACE;AAAA,YACE,iCAAiC,SAAS,EAAE,MAAM,MAAS,EAAE,MAAM,MAAM,QAAQ;AAAA,UACnF,MAAM;AAAA,QACV,EAAE;AAAA,QACF,UAAU,KAAK,YAAU;AAAA,UACvB,OAAO;AAAA,UACP,QACE;AAAA,YACE,iCAAiC,SAAS,EAAE,MAAM,MAAS,EAAE,MAAM,MAAM,QAAQ;AAAA,UACnF,MAAM;AAAA,QACV,EAAE;AAAA,QACF,WAAW,~~MAAM,~~yBAAyB;AAAA,~~UACxC~~,OAAO;AAAA,UACP,SAAS;AAAA,YACP,EAAE,OAAO,QAAQ,OAAO,cAAc,MAAM,cAAc;AAAA,YAC1D,EAAE,OAAO,UAAU,OAAO,UAAU,MAAM,gBAAgB;AAAA,YAC1D,EAAE,OAAO,OAAO,OAAO,YAAY,MAAM,eAAe;AAAA,UAC1D;AAAA,UACA,cAAc;AAAA,QAChB,CAAC;AAAA,QACD,QAAQ,KAAK;AAAA,UACX,QAAQ;AAAA,YACN;AAAA,cACE,UAAU,kBAAkB,QAAQ,eAAe,CAAC,EAAE;AAAA,cACtD,OAAO,EAAE,OAAO,IAAI,MAAM,KAAK;AAAA,YACjC;AAAA,UACF;AAAA,UACA,OAAO;AAAA,UACP,KAAK;AAAA,UACL,KAAK;AAAA,UACL,MAAM;AAAA,UACN,cAAc,EAAE,OAAO,GAAG,MAAM,KAAK;AAAA,QACvC,CAAC;AAAA,QACD,qBAAqB,iBAAiB;AAAA,UACpC,OAAO;AAAA,UACP,SAAS;AAAA,YACP,EAAE,OAAO,cAAc,OAAO,mBAAmB;AAAA,YACjD,EAAE,OAAO,aAAa,OAAO,kBAAkB;AAAA,UACjD;AAAA,QACF,CAAC;AAAA,QACD,yBAAyB,gBAAgB,CAAC,OAAO,WAAW;AAC1D,iBAAO;AAAA,YACL,OAAO;AAAA,YACP,aAAa;AAAA,YACb,QAAQ,6BAA6B,OAAO,MAAM;AAAA,UACpD;AAAA,QACF,CAAC;AAAA,QACD,0BAA0B,gBAAgB,CAAC,OAAO,WAAW;AAC3D,iBAAO;AAAA,YACL,OAAO;AAAA,YACP,aAAa;AAAA,YACb,QAAQ,6BAA6B,OAAO,MAAM;AAAA,UACpD;AAAA,QACF,CAAC;AAAA,QACD,2BAA2B,gBAAgB,CAAC,OAAO,WAAW;AAC5D,iBAAO;AAAA,YACL,OAAO;AAAA,YACP,aAAa;AAAA,YACb,QAAQ,6BAA6B,OAAO,MAAM;AAAA,UACpD;AAAA,QACF,CAAC;AAAA,QACD,OAAO,MAAM;AAAA,UACX,QAAQ,MAAM,OAAO;AAAA,UACrB,cAAc,EAAE,OAAO,KAAK,MAAM,IAAI;AAAA,QACxC,CAAC;AAAA,QACD,QAAQ,OAAO,EAAE,QAAQ,OAAO,OAAO,UAAU,CAAC;AAAA,MACpD;AAAA,IACF;AAAA,EACF;AACF;","names":[]}
1	+ {"version":3,"sources":["../../../../../src/components/builtin/Navigation/register.ts"],"sourcesContent":["import { ReactRuntime } from '../../../runtimes/react'\nimport { findBreakpointOverride, getBaseBreakpoint } from '../../../state/modules/breakpoints'\nimport { MakeswiftComponentType } from '../constants'\nimport { ComponentIcon } from '../../../state/modules/components-meta'\nimport { lazy } from 'react'\nimport {\n ControlDataTypeKey,\n Checkbox,\n Link,\n ResponsiveColor,\n ResponsiveLength,\n ResponsiveLengthPropControllerDataV1Type,\n checkboxPropControllerDataSchema,\n getCheckboxPropControllerDataBoolean,\n Margin,\n Width,\n TextStyle,\n NavigationLinks,\n NavigationLinksData,\n GapX,\n ResponsiveIconRadioGroup,\n ResponsiveSelect,\n ElementID,\n Image,\n TextInput,\n type PropData,\n} from '@makeswift/prop-controllers'\n\nexport function registerComponent(runtime: ReactRuntime) {\n function isHiddenBasedOnMenuAnimation(props: Record<string, unknown>, deviceId: string): boolean {\n const mobileMenuAnimation = ResponsiveSelect.fromPropData(\n props.mobileMenuAnimation as PropData<typeof ResponsiveSelect> \| undefined,\n )\n\n return !findBreakpointOverride(runtime.getBreakpoints(), mobileMenuAnimation, deviceId)\n }\n\n return runtime.registerComponent(\n lazy(() => import('./Navigation')),\n {\n type: MakeswiftComponentType.Navigation,\n label: 'Navigation',\n icon: ComponentIcon.Navigation,\n props: {\n id: ElementID(),\n links: NavigationLinks(),\n linkTextStyle: TextStyle(props => {\n const links = props.links as NavigationLinksData \| undefined\n\n return {\n label: 'Link text style',\n hidden: links == null \|\| links.length === 0,\n }\n }),\n showLogo: Checkbox({ preset: true, label: 'Show logo' }),\n logoFile: Image(props => ({\n label: 'Logo',\n hidden:\n getCheckboxPropControllerDataBoolean(\n checkboxPropControllerDataSchema.optional().catch(undefined).parse(props.showLogo),\n ) === false,\n })),\n logoWidth: ResponsiveLength(props => ({\n // TODO(miguel): We're manually constructing the data here but should be using a factory\n // function instead. This is because the factory function currently expects a definition\n // but we don't have one to pass here. Perhaps we should make the factory function not\n // require the definition and use the latest version when a definition isn't provided.\n preset: {\n [ControlDataTypeKey]: ResponsiveLengthPropControllerDataV1Type,\n value: [\n {\n deviceId: getBaseBreakpoint(runtime.getBreakpoints()).id,\n value: { value: 100, unit: 'px' },\n },\n ],\n },\n label: 'Logo width',\n min: 0,\n max: 1000,\n // TODO: This is hardcoded value, import it from LengthInputOptions\n options: [{ value: 'px', label: 'Pixels', icon: 'Px16' }],\n hidden:\n getCheckboxPropControllerDataBoolean(\n checkboxPropControllerDataSchema.optional().catch(undefined).parse(props.showLogo),\n ) === false,\n })),\n logoAltText: TextInput(props => ({\n label: 'Logo alt text',\n hidden:\n getCheckboxPropControllerDataBoolean(\n checkboxPropControllerDataSchema.optional().catch(undefined).parse(props.showLogo),\n ) === false,\n })),\n logoLink: Link(props => ({\n label: 'Logo on click',\n hidden:\n getCheckboxPropControllerDataBoolean(\n checkboxPropControllerDataSchema.optional().catch(undefined).parse(props.showLogo),\n ) === false,\n })),\n alignment: ResponsiveIconRadioGroup({\n label: 'Alignment',\n options: [\n { label: 'Left', value: 'flex-start', icon: 'AlignLeft16' },\n { label: 'Center', value: 'center', icon: 'AlignCenter16' },\n { label: 'End', value: 'flex-end', icon: 'AlignRight16' },\n ],\n defaultValue: 'flex-end',\n }),\n gutter: GapX({\n preset: [\n {\n deviceId: getBaseBreakpoint(runtime.getBreakpoints()).id,\n value: { value: 10, unit: 'px' },\n },\n ],\n label: 'Link gap',\n min: 0,\n max: 100,\n step: 1,\n defaultValue: { value: 0, unit: 'px' },\n }),\n mobileMenuAnimation: ResponsiveSelect({\n label: 'Mobile menu',\n options: [\n { value: 'coverRight', label: 'Cover from right' },\n { value: 'coverLeft', label: 'Cover from left' },\n ],\n }),\n mobileMenuOpenIconColor: ResponsiveColor((props, device) => {\n return {\n label: 'Open icon color',\n placeholder: 'rgba(161, 168, 194, 0.5)',\n hidden: isHiddenBasedOnMenuAnimation(props, device),\n }\n }),\n mobileMenuCloseIconColor: ResponsiveColor((props, device) => {\n return {\n label: 'Close icon color',\n placeholder: 'rgba(161, 168, 194, 0.5)',\n hidden: isHiddenBasedOnMenuAnimation(props, device),\n }\n }),\n mobileMenuBackgroundColor: ResponsiveColor((props, device) => {\n return {\n label: 'Menu BG color',\n placeholder: 'black',\n hidden: isHiddenBasedOnMenuAnimation(props, device),\n }\n }),\n width: Width({\n format: Width.Format.ClassName,\n defaultValue: { value: 100, unit: '%' },\n }),\n margin: Margin({ format: Margin.Format.ClassName }),\n },\n },\n )\n}\n"],"mappings":"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","names":[]}

package/dist/esm/components/builtin/SocialLinks/SocialLinks.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/components/builtin/SocialLinks/SocialLinks.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef, Ref } from 'react'\n\nimport { Link } from '../../shared/Link'\nimport { colorToString } from '../../utils/colorToString'\nimport { ColorValue as Color } from '../../utils/types'\nimport { SocialLinksOptions, SocialLinksOptionType } from './options'\nimport GutterContainer from '../../shared/GutterContainer'\nimport SocialLinksPlaceholder from './components/SocialLinksPlaceholder'\nimport { ~~ResponsiveIconRadioGroupValue } from '../../../prop-controllers/descriptors'\nimport {~~ ResponsiveColor } from '../../../runtimes/react/controls'\nimport { cx } from '@emotion/css'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { useResponsiveStyle } from '../../utils/responsive-style'\nimport {\n type ResponsiveGapData,\n type ResponsiveValue,\n type ResponsiveSelectValue,\n} from '@makeswift/prop-controllers'\n\ntype Props = {\n id?: string\n links?: {\n links: { id: string; payload: { type: SocialLinksOptionType; url: string } }[]\n openInNewTab: boolean\n }\n shape?: ResponsiveIconRadioGroupValue<'naked' \| 'circle' \| 'rounded' \| 'square'>\n size?: ResponsiveIconRadioGroupValue<'small' \| 'medium' \| 'large'>\n hoverStyle?: ResponsiveSelectValue<'none' \| 'grow' \| 'shrink' \| 'fade'>\n fill?: ResponsiveColor \| null\n backgroundColor?: ResponsiveColor \| null\n alignment?: ResponsiveIconRadioGroupValue<'flex-start' \| 'center' \| 'flex-end'>\n gutter?: ResponsiveGapData\n width?: string\n margin?: string\n}\n\nconst SocialLinks = forwardRef(function SocialLinks(\n {\n id,\n links: { links, openInNewTab } = { links: [], openInNewTab: false },\n shape,\n size,\n hoverStyle,\n fill,\n backgroundColor,\n alignment,\n gutter,\n width,\n margin,\n }: Props,\n ref: Ref<HTMLDivElement>,\n) {\n return (\n <div\n ref={ref}\n id={id}\n className={cx(\n useStyle({ display: 'flex', flexDirection: 'row', flexWrap: 'wrap' }),\n width,\n margin,\n useStyle(\n useResponsiveStyle([alignment] as const, ([alignment = 'center']) => ({\n justifyContent: alignment,\n })),\n ),\n )}\n >\n {links.length > 0 ? (\n links.map((link, i) => {\n const option = SocialLinksOptions.find(o => o.type === link.payload.type)\n\n if (option == null) return null\n\n return (\n <GutterContainer\n key={link.id}\n gutter={gutter}\n first={i === 0}\n last={i === links.length - 1}\n >\n <StyledLink\n backgroundColor={backgroundColor}\n brandColor={option.brandColor}\n fill={fill}\n hoverStyle={hoverStyle}\n link={{ type: 'OPEN_URL', payload: { url: link.payload.url, openInNewTab } }}\n shape={shape}\n size={size}\n >\n {option.icon}\n </StyledLink>\n </GutterContainer>\n )\n })\n ) : (\n <SocialLinksPlaceholder gutter={gutter} />\n )}\n </div>\n )\n})\n\nexport default SocialLinks\n\ntype StyledLinkProps = ComponentPropsWithoutRef<typeof Link> & {\n brandColor: string\n shape: Props['shape']\n size: Props['size']\n hoverStyle: Props['hoverStyle']\n fill: ResponsiveValue<Color> \| null \| undefined\n backgroundColor: ResponsiveValue<Color> \| null \| undefined\n}\n\nfunction StyledLink({\n className,\n brandColor,\n shape,\n size,\n hoverStyle,\n fill,\n backgroundColor,\n ...restOfProps\n}: StyledLinkProps) {\n return (\n <Link\n {...restOfProps}\n className={cx(\n useStyle({\n display: 'block',\n color: brandColor,\n transition: 'transform, opacity 0.18s',\n svg: { display: 'block' },\n }),\n useStyle(\n useResponsiveStyle(\n [shape, size, hoverStyle, fill, backgroundColor] as const,\n ([shape = 'naked', size = 'medium', hoverStyle = 'none', fill, backgroundColor]) => ({\n padding: shape === 'naked' ? 0 : { small: 10, medium: 12, large: 14 }[size],\n borderRadius: { circle: '50%', rounded: '8px', naked: 0, square: 0 }[shape],\n background:\n shape === 'naked'\n ? 'transparent'\n : backgroundColor == null\n ? 'currentColor'\n : colorToString(backgroundColor),\n\n ':hover': {\n none: {},\n grow: { transform: 'scale(1.1)' },\n shrink: { transform: 'scale(0.9)' },\n fade: { opacity: 0.65 },\n }[hoverStyle],\n\n svg: {\n fill:\n fill == null\n ? shape === 'naked' \|\| backgroundColor != null\n ? 'currentColor'\n : 'white'\n : colorToString(fill),\n width: { small: 16, medium: 20, large: 24 }[size],\n height: { small: 16, medium: 20, large: 24 }[size],\n },\n }),\n ),\n ),\n className,\n )}\n />\n )\n}\n"],"mappings":"AAgFc;AAhFd,SAAmC,kBAAuB;AAE1D,SAAS,YAAY;AACrB,SAAS,qBAAqB;AAE9B,SAAS,0BAAiD;AAC1D,OAAO,qBAAqB;AAC5B,OAAO,4BAA4B;~~AAGnC~~,SAAS,UAAU;AACnB,SAAS,gBAAgB;AACzB,SAAS,0BAA0B;~~AAwBnC~~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","names":["SocialLinks","alignment","shape","size","hoverStyle","fill","backgroundColor"]}
1	+ {"version":3,"sources":["../../../../../src/components/builtin/SocialLinks/SocialLinks.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef, Ref } from 'react'\n\nimport { Link } from '../../shared/Link'\nimport { colorToString } from '../../utils/colorToString'\nimport { ColorValue as Color } from '../../utils/types'\nimport { SocialLinksOptions, SocialLinksOptionType } from './options'\nimport GutterContainer from '../../shared/GutterContainer'\nimport SocialLinksPlaceholder from './components/SocialLinksPlaceholder'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\nimport { cx } from '@emotion/css'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { useResponsiveStyle } from '../../utils/responsive-style'\nimport {\n type ResponsiveGapData,\n type ResponsiveValue,\n type ResponsiveSelectValue,\n type ResponsiveIconRadioGroupValue,\n} from '@makeswift/prop-controllers'\n\ntype Props = {\n id?: string\n links?: {\n links: { id: string; payload: { type: SocialLinksOptionType; url: string } }[]\n openInNewTab: boolean\n }\n shape?: ResponsiveIconRadioGroupValue<'naked' \| 'circle' \| 'rounded' \| 'square'>\n size?: ResponsiveIconRadioGroupValue<'small' \| 'medium' \| 'large'>\n hoverStyle?: ResponsiveSelectValue<'none' \| 'grow' \| 'shrink' \| 'fade'>\n fill?: ResponsiveColor \| null\n backgroundColor?: ResponsiveColor \| null\n alignment?: ResponsiveIconRadioGroupValue<'flex-start' \| 'center' \| 'flex-end'>\n gutter?: ResponsiveGapData\n width?: string\n margin?: string\n}\n\nconst SocialLinks = forwardRef(function SocialLinks(\n {\n id,\n links: { links, openInNewTab } = { links: [], openInNewTab: false },\n shape,\n size,\n hoverStyle,\n fill,\n backgroundColor,\n alignment,\n gutter,\n width,\n margin,\n }: Props,\n ref: Ref<HTMLDivElement>,\n) {\n return (\n <div\n ref={ref}\n id={id}\n className={cx(\n useStyle({ display: 'flex', flexDirection: 'row', flexWrap: 'wrap' }),\n width,\n margin,\n useStyle(\n useResponsiveStyle([alignment] as const, ([alignment = 'center']) => ({\n justifyContent: alignment,\n })),\n ),\n )}\n >\n {links.length > 0 ? (\n links.map((link, i) => {\n const option = SocialLinksOptions.find(o => o.type === link.payload.type)\n\n if (option == null) return null\n\n return (\n <GutterContainer\n key={link.id}\n gutter={gutter}\n first={i === 0}\n last={i === links.length - 1}\n >\n <StyledLink\n backgroundColor={backgroundColor}\n brandColor={option.brandColor}\n fill={fill}\n hoverStyle={hoverStyle}\n link={{ type: 'OPEN_URL', payload: { url: link.payload.url, openInNewTab } }}\n shape={shape}\n size={size}\n >\n {option.icon}\n </StyledLink>\n </GutterContainer>\n )\n })\n ) : (\n <SocialLinksPlaceholder gutter={gutter} />\n )}\n </div>\n )\n})\n\nexport default SocialLinks\n\ntype StyledLinkProps = ComponentPropsWithoutRef<typeof Link> & {\n brandColor: string\n shape: Props['shape']\n size: Props['size']\n hoverStyle: Props['hoverStyle']\n fill: ResponsiveValue<Color> \| null \| undefined\n backgroundColor: ResponsiveValue<Color> \| null \| undefined\n}\n\nfunction StyledLink({\n className,\n brandColor,\n shape,\n size,\n hoverStyle,\n fill,\n backgroundColor,\n ...restOfProps\n}: StyledLinkProps) {\n return (\n <Link\n {...restOfProps}\n className={cx(\n useStyle({\n display: 'block',\n color: brandColor,\n transition: 'transform, opacity 0.18s',\n svg: { display: 'block' },\n }),\n useStyle(\n useResponsiveStyle(\n [shape, size, hoverStyle, fill, backgroundColor] as const,\n ([shape = 'naked', size = 'medium', hoverStyle = 'none', fill, backgroundColor]) => ({\n padding: shape === 'naked' ? 0 : { small: 10, medium: 12, large: 14 }[size],\n borderRadius: { circle: '50%', rounded: '8px', naked: 0, square: 0 }[shape],\n background:\n shape === 'naked'\n ? 'transparent'\n : backgroundColor == null\n ? 'currentColor'\n : colorToString(backgroundColor),\n\n ':hover': {\n none: {},\n grow: { transform: 'scale(1.1)' },\n shrink: { transform: 'scale(0.9)' },\n fade: { opacity: 0.65 },\n }[hoverStyle],\n\n svg: {\n fill:\n fill == null\n ? shape === 'naked' \|\| backgroundColor != null\n ? 'currentColor'\n : 'white'\n : colorToString(fill),\n width: { small: 16, medium: 20, large: 24 }[size],\n height: { small: 16, medium: 20, large: 24 }[size],\n },\n }),\n ),\n ),\n className,\n )}\n />\n )\n}\n"],"mappings":"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","names":["SocialLinks","alignment","shape","size","hoverStyle","fill","backgroundColor"]}

package/dist/esm/components/builtin/SocialLinks/register.js CHANGED Viewed

@@ -1,4 +1,3 @@
-import { Props } from "../../../prop-controllers";
 import { getBaseBreakpoint } from "../../../state/modules/breakpoints";
 import { MakeswiftComponentType } from "../constants";
 import { ComponentIcon } from "../../../state/modules/components-meta";
@@ -9,6 +8,7 @@ import {
   Margin,
   ResponsiveColor,
   ResponsiveSelect,
+  ResponsiveIconRadioGroup,
   SocialLinks,
   Width,
   getSocialLinksPropControllerDataSocialLinksData
@@ -41,7 +41,7 @@ function registerComponent(runtime) {
             openInNewTab: false
           }
         }),
-        shape: Props.ResponsiveIconRadioGroup((props) => {
+        shape: ResponsiveIconRadioGroup((props) => {
           const links = getSocialLinksPropControllerDataSocialLinksData(
             props.links
           );
@@ -57,7 +57,7 @@ function registerComponent(runtime) {
             hidden: links == null || links.links.length === 0
           };
         }),
-        size: Props.ResponsiveIconRadioGroup((props) => {
+        size: ResponsiveIconRadioGroup((props) => {
           const links = getSocialLinksPropControllerDataSocialLinksData(
             props.links
           );
@@ -110,7 +110,7 @@ function registerComponent(runtime) {
             hidden
           };
         }),
-        alignment: Props.ResponsiveIconRadioGroup({
+        alignment: ResponsiveIconRadioGroup({
           label: "Alignment",
           options: [
             { label: "flex-start", value: "flex-start", icon: "AlignLeft16" },

package/dist/esm/components/builtin/SocialLinks/register.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/components/builtin/SocialLinks/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 {\n ElementID,\n GapX,\n Margin,\n ResponsiveColor,\n ResponsiveSelect,\n SocialLinks,\n SocialLinksPropControllerData,\n Width,\n getSocialLinksPropControllerDataSocialLinksData,\n} from '@makeswift/prop-controllers'\n\nexport function registerComponent(runtime: ReactRuntime) {\n return runtime.registerComponent(\n lazy(() => import('./SocialLinks')),\n {\n type: MakeswiftComponentType.SocialLinks,\n label: 'Social Links',\n icon: ComponentIcon.SocialLinks,\n props: {\n id: ElementID(),\n links: SocialLinks({\n preset: {\n links: [\n {\n id: 'facebook',\n payload: { type: 'facebook', url: 'https://www.facebook.com' },\n },\n {\n id: 'instagram',\n payload: { type: 'instagram', url: 'https://www.instagram.com' },\n },\n {\n id: 'twitter',\n payload: { type: 'twitter', url: 'https://www.twitter.com' },\n },\n ],\n openInNewTab: false,\n },\n }),\n shape: ~~Props.~~ResponsiveIconRadioGroup(props => {\n const links = getSocialLinksPropControllerDataSocialLinksData(\n props.links as SocialLinksPropControllerData \| undefined,\n )\n\n return {\n label: 'Shape',\n options: [\n { label: 'Naked', value: 'naked', icon: 'Star16' },\n { label: 'Circle', value: 'circle', icon: 'StarCircle16' },\n { label: 'Rounded', value: 'rounded', icon: 'StarRoundedSquare16' },\n { label: 'Square', value: 'square', icon: 'StarSquare16' },\n ],\n defaultValue: 'naked',\n hidden: links == null \|\| links.links.length === 0,\n }\n }),\n size: ~~Props.~~ResponsiveIconRadioGroup(props => {\n const links = getSocialLinksPropControllerDataSocialLinksData(\n props.links as SocialLinksPropControllerData \| undefined,\n )\n\n return {\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 hidden: links == null \|\| links.links.length === 0,\n }\n }),\n hoverStyle: ResponsiveSelect(props => {\n const links = getSocialLinksPropControllerDataSocialLinksData(\n props.links as SocialLinksPropControllerData \| undefined,\n )\n const hidden = links == null \|\| links.links.length === 0\n\n return {\n label: 'On hover',\n options: [\n { value: 'none', label: 'None' },\n { value: 'grow', label: 'Grow' },\n { value: 'shrink', label: 'Shrink' },\n { value: 'fade', label: 'Fade' },\n ],\n defaultValue: 'none',\n labelOrientation: 'horizontal',\n hidden,\n }\n }),\n fill: ResponsiveColor(props => {\n const links = getSocialLinksPropControllerDataSocialLinksData(\n props.links as SocialLinksPropControllerData \| undefined,\n )\n const hidden = links == null \|\| links.links.length === 0\n\n return {\n label: 'Icon color',\n hidden,\n }\n }),\n backgroundColor: ResponsiveColor(props => {\n const links = getSocialLinksPropControllerDataSocialLinksData(\n props.links as SocialLinksPropControllerData \| undefined,\n )\n const hidden = links == null \|\| links.links.length === 0\n\n return {\n label: 'Shape color',\n hidden,\n }\n }),\n alignment: ~~Props.~~ResponsiveIconRadioGroup({\n label: 'Alignment',\n options: [\n { label: 'flex-start', value: 'flex-start', icon: 'AlignLeft16' },\n { label: 'center', value: 'center', icon: 'AlignCenter16' },\n { label: 'flex-end', value: 'flex-end', icon: 'AlignRight16' },\n ],\n defaultValue: 'center',\n }),\n gutter: GapX({\n preset: [\n {\n deviceId: getBaseBreakpoint(runtime.getBreakpoints()).id,\n value: { value: 10, unit: 'px' },\n },\n ],\n label: 'Link gap',\n min: 0,\n max: 100,\n step: 1,\n defaultValue: { value: 0, unit: 'px' },\n }),\n width: Width({\n format: Width.Format.ClassName,\n defaultValue: { value: 100, unit: '%' },\n }),\n margin: Margin({\n format: Margin.Format.ClassName,\n preset: [\n {\n deviceId: getBaseBreakpoint(runtime.getBreakpoints()).id,\n value: {\n marginTop: { value: 10, unit: 'px' },\n marginRight: 'auto',\n marginBottom: { value: 10, unit: 'px' },\n marginLeft: 'auto',\n },\n },\n ],\n }),\n },\n },\n )\n}\n"],"mappings":"~~AAAA~~,SAAS,~~aAAa;AAEtB,SAAS,~~yBAAyB;AAClC,SAAS,8BAA8B;AACvC,SAAS,qBAAqB;AAC9B,SAAS,YAAY;AACrB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AAEA,SAAS,kBAAkB,SAAuB;AACvD,SAAO,QAAQ;AAAA,IACb,KAAK,MAAM,OAAO,eAAe,CAAC;AAAA,IAClC;AAAA,MACE,MAAM,uBAAuB;AAAA,MAC7B,OAAO;AAAA,MACP,MAAM,cAAc;AAAA,MACpB,OAAO;AAAA,QACL,IAAI,UAAU;AAAA,QACd,OAAO,YAAY;AAAA,UACjB,QAAQ;AAAA,YACN,OAAO;AAAA,cACL;AAAA,gBACE,IAAI;AAAA,gBACJ,SAAS,EAAE,MAAM,YAAY,KAAK,2BAA2B;AAAA,cAC/D;AAAA,cACA;AAAA,gBACE,IAAI;AAAA,gBACJ,SAAS,EAAE,MAAM,aAAa,KAAK,4BAA4B;AAAA,cACjE;AAAA,cACA;AAAA,gBACE,IAAI;AAAA,gBACJ,SAAS,EAAE,MAAM,WAAW,KAAK,0BAA0B;AAAA,cAC7D;AAAA,YACF;AAAA,YACA,cAAc;AAAA,UAChB;AAAA,QACF,CAAC;AAAA,QACD,OAAO,~~MAAM,~~yBAAyB,WAAS;~~AAC7C~~,gBAAM,QAAQ;AAAA,YACZ,MAAM;AAAA,UACR;AAEA,iBAAO;AAAA,YACL,OAAO;AAAA,YACP,SAAS;AAAA,cACP,EAAE,OAAO,SAAS,OAAO,SAAS,MAAM,SAAS;AAAA,cACjD,EAAE,OAAO,UAAU,OAAO,UAAU,MAAM,eAAe;AAAA,cACzD,EAAE,OAAO,WAAW,OAAO,WAAW,MAAM,sBAAsB;AAAA,cAClE,EAAE,OAAO,UAAU,OAAO,UAAU,MAAM,eAAe;AAAA,YAC3D;AAAA,YACA,cAAc;AAAA,YACd,QAAQ,SAAS,QAAQ,MAAM,MAAM,WAAW;AAAA,UAClD;AAAA,QACF,CAAC;AAAA,QACD,MAAM,~~MAAM,~~yBAAyB,WAAS;~~AAC5C~~,gBAAM,QAAQ;AAAA,YACZ,MAAM;AAAA,UACR;AAEA,iBAAO;AAAA,YACL,OAAO;AAAA,YACP,SAAS;AAAA,cACP,EAAE,OAAO,SAAS,OAAO,SAAS,MAAM,cAAc;AAAA,cACtD,EAAE,OAAO,UAAU,OAAO,UAAU,MAAM,eAAe;AAAA,cACzD,EAAE,OAAO,SAAS,OAAO,SAAS,MAAM,cAAc;AAAA,YACxD;AAAA,YACA,cAAc;AAAA,YACd,QAAQ,SAAS,QAAQ,MAAM,MAAM,WAAW;AAAA,UAClD;AAAA,QACF,CAAC;AAAA,QACD,YAAY,iBAAiB,WAAS;AACpC,gBAAM,QAAQ;AAAA,YACZ,MAAM;AAAA,UACR;AACA,gBAAM,SAAS,SAAS,QAAQ,MAAM,MAAM,WAAW;AAEvD,iBAAO;AAAA,YACL,OAAO;AAAA,YACP,SAAS;AAAA,cACP,EAAE,OAAO,QAAQ,OAAO,OAAO;AAAA,cAC/B,EAAE,OAAO,QAAQ,OAAO,OAAO;AAAA,cAC/B,EAAE,OAAO,UAAU,OAAO,SAAS;AAAA,cACnC,EAAE,OAAO,QAAQ,OAAO,OAAO;AAAA,YACjC;AAAA,YACA,cAAc;AAAA,YACd,kBAAkB;AAAA,YAClB;AAAA,UACF;AAAA,QACF,CAAC;AAAA,QACD,MAAM,gBAAgB,WAAS;AAC7B,gBAAM,QAAQ;AAAA,YACZ,MAAM;AAAA,UACR;AACA,gBAAM,SAAS,SAAS,QAAQ,MAAM,MAAM,WAAW;AAEvD,iBAAO;AAAA,YACL,OAAO;AAAA,YACP;AAAA,UACF;AAAA,QACF,CAAC;AAAA,QACD,iBAAiB,gBAAgB,WAAS;AACxC,gBAAM,QAAQ;AAAA,YACZ,MAAM;AAAA,UACR;AACA,gBAAM,SAAS,SAAS,QAAQ,MAAM,MAAM,WAAW;AAEvD,iBAAO;AAAA,YACL,OAAO;AAAA,YACP;AAAA,UACF;AAAA,QACF,CAAC;AAAA,QACD,WAAW,~~MAAM,~~yBAAyB;AAAA,~~UACxC~~,OAAO;AAAA,UACP,SAAS;AAAA,YACP,EAAE,OAAO,cAAc,OAAO,cAAc,MAAM,cAAc;AAAA,YAChE,EAAE,OAAO,UAAU,OAAO,UAAU,MAAM,gBAAgB;AAAA,YAC1D,EAAE,OAAO,YAAY,OAAO,YAAY,MAAM,eAAe;AAAA,UAC/D;AAAA,UACA,cAAc;AAAA,QAChB,CAAC;AAAA,QACD,QAAQ,KAAK;AAAA,UACX,QAAQ;AAAA,YACN;AAAA,cACE,UAAU,kBAAkB,QAAQ,eAAe,CAAC,EAAE;AAAA,cACtD,OAAO,EAAE,OAAO,IAAI,MAAM,KAAK;AAAA,YACjC;AAAA,UACF;AAAA,UACA,OAAO;AAAA,UACP,KAAK;AAAA,UACL,KAAK;AAAA,UACL,MAAM;AAAA,UACN,cAAc,EAAE,OAAO,GAAG,MAAM,KAAK;AAAA,QACvC,CAAC;AAAA,QACD,OAAO,MAAM;AAAA,UACX,QAAQ,MAAM,OAAO;AAAA,UACrB,cAAc,EAAE,OAAO,KAAK,MAAM,IAAI;AAAA,QACxC,CAAC;AAAA,QACD,QAAQ,OAAO;AAAA,UACb,QAAQ,OAAO,OAAO;AAAA,UACtB,QAAQ;AAAA,YACN;AAAA,cACE,UAAU,kBAAkB,QAAQ,eAAe,CAAC,EAAE;AAAA,cACtD,OAAO;AAAA,gBACL,WAAW,EAAE,OAAO,IAAI,MAAM,KAAK;AAAA,gBACnC,aAAa;AAAA,gBACb,cAAc,EAAE,OAAO,IAAI,MAAM,KAAK;AAAA,gBACtC,YAAY;AAAA,cACd;AAAA,YACF;AAAA,UACF;AAAA,QACF,CAAC;AAAA,MACH;AAAA,IACF;AAAA,EACF;AACF;","names":[]}
1	+ {"version":3,"sources":["../../../../../src/components/builtin/SocialLinks/register.ts"],"sourcesContent":["import { ReactRuntime } from '../../../runtimes/react'\nimport { getBaseBreakpoint } from '../../../state/modules/breakpoints'\nimport { MakeswiftComponentType } from '../constants'\nimport { ComponentIcon } from '../../../state/modules/components-meta'\nimport { lazy } from 'react'\nimport {\n ElementID,\n GapX,\n Margin,\n ResponsiveColor,\n ResponsiveSelect,\n ResponsiveIconRadioGroup,\n SocialLinks,\n SocialLinksPropControllerData,\n Width,\n getSocialLinksPropControllerDataSocialLinksData,\n} from '@makeswift/prop-controllers'\n\nexport function registerComponent(runtime: ReactRuntime) {\n return runtime.registerComponent(\n lazy(() => import('./SocialLinks')),\n {\n type: MakeswiftComponentType.SocialLinks,\n label: 'Social Links',\n icon: ComponentIcon.SocialLinks,\n props: {\n id: ElementID(),\n links: SocialLinks({\n preset: {\n links: [\n {\n id: 'facebook',\n payload: { type: 'facebook', url: 'https://www.facebook.com' },\n },\n {\n id: 'instagram',\n payload: { type: 'instagram', url: 'https://www.instagram.com' },\n },\n {\n id: 'twitter',\n payload: { type: 'twitter', url: 'https://www.twitter.com' },\n },\n ],\n openInNewTab: false,\n },\n }),\n shape: ResponsiveIconRadioGroup(props => {\n const links = getSocialLinksPropControllerDataSocialLinksData(\n props.links as SocialLinksPropControllerData \| undefined,\n )\n\n return {\n label: 'Shape',\n options: [\n { label: 'Naked', value: 'naked', icon: 'Star16' },\n { label: 'Circle', value: 'circle', icon: 'StarCircle16' },\n { label: 'Rounded', value: 'rounded', icon: 'StarRoundedSquare16' },\n { label: 'Square', value: 'square', icon: 'StarSquare16' },\n ],\n defaultValue: 'naked',\n hidden: links == null \|\| links.links.length === 0,\n }\n }),\n size: ResponsiveIconRadioGroup(props => {\n const links = getSocialLinksPropControllerDataSocialLinksData(\n props.links as SocialLinksPropControllerData \| undefined,\n )\n\n return {\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 hidden: links == null \|\| links.links.length === 0,\n }\n }),\n hoverStyle: ResponsiveSelect(props => {\n const links = getSocialLinksPropControllerDataSocialLinksData(\n props.links as SocialLinksPropControllerData \| undefined,\n )\n const hidden = links == null \|\| links.links.length === 0\n\n return {\n label: 'On hover',\n options: [\n { value: 'none', label: 'None' },\n { value: 'grow', label: 'Grow' },\n { value: 'shrink', label: 'Shrink' },\n { value: 'fade', label: 'Fade' },\n ],\n defaultValue: 'none',\n labelOrientation: 'horizontal',\n hidden,\n }\n }),\n fill: ResponsiveColor(props => {\n const links = getSocialLinksPropControllerDataSocialLinksData(\n props.links as SocialLinksPropControllerData \| undefined,\n )\n const hidden = links == null \|\| links.links.length === 0\n\n return {\n label: 'Icon color',\n hidden,\n }\n }),\n backgroundColor: ResponsiveColor(props => {\n const links = getSocialLinksPropControllerDataSocialLinksData(\n props.links as SocialLinksPropControllerData \| undefined,\n )\n const hidden = links == null \|\| links.links.length === 0\n\n return {\n label: 'Shape color',\n hidden,\n }\n }),\n alignment: ResponsiveIconRadioGroup({\n label: 'Alignment',\n options: [\n { label: 'flex-start', value: 'flex-start', icon: 'AlignLeft16' },\n { label: 'center', value: 'center', icon: 'AlignCenter16' },\n { label: 'flex-end', value: 'flex-end', icon: 'AlignRight16' },\n ],\n defaultValue: 'center',\n }),\n gutter: GapX({\n preset: [\n {\n deviceId: getBaseBreakpoint(runtime.getBreakpoints()).id,\n value: { value: 10, unit: 'px' },\n },\n ],\n label: 'Link gap',\n min: 0,\n max: 100,\n step: 1,\n defaultValue: { value: 0, unit: 'px' },\n }),\n width: Width({\n format: Width.Format.ClassName,\n defaultValue: { value: 100, unit: '%' },\n }),\n margin: Margin({\n format: Margin.Format.ClassName,\n preset: [\n {\n deviceId: getBaseBreakpoint(runtime.getBreakpoints()).id,\n value: {\n marginTop: { value: 10, unit: 'px' },\n marginRight: 'auto',\n marginBottom: { value: 10, unit: 'px' },\n marginLeft: 'auto',\n },\n },\n ],\n }),\n },\n },\n )\n}\n"],"mappings":"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","names":[]}

package/dist/esm/next/api-handler/handlers/manifest.js CHANGED Viewed

@@ -13,7 +13,7 @@ async function handler(...args) {
   const supportsPreviewMode = match(args).with(routeHandlerPattern, () => false).with(apiRoutePattern, () => true).exhaustive();
   const supportsDraftMode = match(args).with(routeHandlerPattern, () => true).with(apiRoutePattern, () => false).exhaustive();
   const body = {
-    version: "0.18.0-canary.7",
+    version: "0.18.0-canary.9",
     previewMode: supportsPreviewMode,
     draftMode: supportsDraftMode,
     interactionMode: true,

package/dist/esm/prop-controllers/descriptors.js CHANGED Viewed

@@ -1,13 +1,8 @@
 import { StyleControlType } from "../controls/style";
 const Types = {
-  ResponsiveIconRadioGroup: "ResponsiveIconRadioGroup",
   Style: StyleControlType
 };
-function ResponsiveIconRadioGroup(options) {
-  return { type: Types.ResponsiveIconRadioGroup, options };
-}
 export {
-  ResponsiveIconRadioGroup,
   Types
 };
 //# sourceMappingURL=descriptors.js.map

package/dist/esm/prop-controllers/descriptors.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/prop-controllers/descriptors.ts"],"sourcesContent":["import {\n CheckboxControlDefinition,\n IconRadioGroupControlDefinition,\n NumberControlDefinition,\n TextInputControlDefinition,\n TextAreaControlDefinition,\n} from '@makeswift/controls'\nimport { ResponsiveColor } from '../runtimes/react/controls'\nimport { StyleControlFormattedValue } from '../runtimes/react/controls/style'\nimport type { Data } from '../state/react-page'\nimport { NumberControlValue } from '../runtimes/react/controls/number'\nimport { StyleControlType } from '../controls/style'\nimport {\n ColorControlDefinition,\n ComboboxControlDefinition,\n ImageControlDefinition,\n LinkControlDefinition,\n ListControlDefinition,\n SelectControlDefinition,\n ShapeControlDefinition,\n SlotControlDefinition,\n StyleControlDefinition,\n RichTextV2ControlDefinition,\n StyleV2ControlDefinition,\n TypographyControlDefinition,\n} from '../controls'\nimport { TextInputControlValue } from '../runtimes/react/controls/text-input'\nimport { TextAreaControlValue } from '../runtimes/react/controls/text-area'\nimport { ColorControlValue } from '../runtimes/react/controls/color'\nimport { SelectControlValue } from '../runtimes/react/controls/select'\nimport { CheckboxControlValue } from '../runtimes/react/controls/checkbox'\nimport { ResolveImageControlValue } from '../runtimes/react/controls/image'\nimport { ShapeControlValue } from '../runtimes/react/controls/shape'\nimport { ListControlValue } from '../runtimes/react/controls/list'\nimport { ComboboxControlValue } from '../runtimes/react/controls/combobox'\nimport { LinkControlValue } from '../runtimes/react/controls/link'\nimport { SlotControlValue } from '../runtimes/react/controls/slot'\nimport { RichTextControlDefinition } from '../controls/rich-text'\nimport { RichTextControlValue } from '../runtimes/react/controls/rich-text/rich-text'\nimport { RichTextV2ControlValue } from '../runtimes/react/controls/rich-text-v2'\nimport { StyleV2ControlFormattedValue } from '../runtimes/react/controls/style-v2'\nimport { IconRadioGroupControlValue } from '../runtimes/react/controls/icon-radio-group'\nimport { TypographyControlValue } from '../runtimes/react/controls/typography'\nimport {\n BorderDescriptor,\n CheckboxDescriptor,\n LinkDescriptor,\n ResolveLinkPropControllerValue,\n Types as PropControllerTypes,\n ResponsiveValueType,\n ShadowsDescriptor,\n ResolveShadowsPropControllerValue,\n ResponsiveValue,\n Options,\n ResponsiveLengthDescriptor,\n ResolveResponsiveLengthPropControllerValue,\n NumberDescriptor,\n ResolveNumberPropControllerValue,\n ResponsiveColorDescriptor,\n ResolveCheckboxPropControllerValue,\n BorderRadiusDescriptor,\n ResolveBorderPropControllerValue,\n ResolveBorderRadiusPropControllerValue,\n DateDescriptor,\n ResolveDatePropControllerValue,\n FontDescriptor,\n ResolveFontPropControllerValue,\n VideoDescriptor,\n ResolveVideoPropControllerValue,\n TableDescriptor,\n ResolveTablePropControllerValue,\n MarginDescriptor,\n ResolveMarginPropControllerValue,\n PaddingDescriptor,\n ResolvePaddingPropControllerValue,\n WidthDescriptor,\n ResolveWidthPropControllerValue,\n TextStyleDescriptor,\n ResolveTextStylePropControllerValue,\n NavigationLinksDescriptor,\n ResolveNavigationLinksPropControllerValue,\n TextAreaDescriptor,\n ResolveTextAreaPropControllerValue,\n GapX,\n ResponsiveNumber,\n ResponsiveSelect,\n ResolveGapYPropControllerValue,\n GapYDescriptor,\n ElementIDDescriptor,\n ResolveElementIDPropControllerValue,\n TableFormFieldsDescriptor,\n ResolveTableFormFieldsPropControllerValue,\n GridDescriptor,\n ResolveGridPropControllerValue,\n ImageDescriptor,\n ResolveImagePropControllerValue,\n ImagesDescriptor,\n ResolveImagesPropControllerValue,\n BackgroundsDescriptor,\n ResolveBackgroundsPropControllerValue,\n type Descriptor as PropDescriptor,\n type Value as PropValue,\n ResponsiveOpacity,\n ResolveSocialLinksPropControllerValue,\n SocialLinksDescriptor,\n TextInputDescriptor,\n ResolveTextInputPropControllerValue,\n} from '@makeswift/prop-controllers'\nimport { DeletedPropControllerDescriptor } from './deleted'\n\nexport type { Data }\n\ntype IconName =\n \| 'HeightAuto16'\n \| 'HeightMatch16'\n \| 'VerticalAlignStart16'\n \| 'VerticalAlignMiddle16'\n \| 'VerticalAlignEnd16'\n \| 'VerticalAlignSpaceBetween16'\n \| 'ButtonPill16'\n \| 'ButtonRounded16'\n \| 'ButtonSquare16'\n \| 'SizeSmall16'\n \| 'SizeMedium16'\n \| 'SizeLarge16'\n \| 'ArrowInside16'\n \| 'ArrowCenter16'\n \| 'ArrowOutside16'\n \| 'CountdownSolid16'\n \| 'CountdownSolidSplit16'\n \| 'CountdownOutline16'\n \| 'CountdownOutlineSplit16'\n \| 'CountdownNaked16'\n \| 'Sun16'\n \| 'Moon16'\n \| 'AlignLeft16'\n \| 'AlignCenter16'\n \| 'AlignRight16'\n \| 'Star16'\n \| 'StarCircle16'\n \| 'StarRoundedSquare16'\n \| 'StarSquare16'\n\nexport type Gap = { value: number; unit: 'px' }\n\nexport const Types = {\n ResponsiveIconRadioGroup: 'ResponsiveIconRadioGroup',\n Style: StyleControlType,\n} as const\n\nexport type IconRadioGroupOption<T extends string> = { value: T; label: string; icon: IconName }\n\nexport type ResponsiveIconRadioGroupValue<T extends string = string> = ResponsiveValue<T>\n\nexport type ResponsiveIconRadioGroupOptions<T extends string = string, U extends T = T> = Options<{\n label?: string\n options: IconRadioGroupOption<T>[]\n defaultValue?: U\n hidden?: boolean\n}>\n\nexport type ResponsiveIconRadioGroupDescriptor<\n T extends ResponsiveIconRadioGroupValue<string> = ResponsiveIconRadioGroupValue<string>,\n> = {\n type: typeof Types.ResponsiveIconRadioGroup\n options: ResponsiveIconRadioGroupOptions<ResponsiveValueType<T>>\n}\n\n// HACK(miguel): We have to use a layer of indirection with `_T` and `T` because otherwise the\n// values provided would undergo type widening. For some reason, the extra layer of indirection\n// reuslts in TypeScript not widening types. Note, this only happens when the returned value of this\n// function is passed to another as an argument, which is common with the `registerComponent` API.\n/*\n @deprecated Imports from `@makeswift/runtime/prop-controllers` are deprecated. Use\n * `@makeswift/runtime/controls` instead.\n */\nexport function ResponsiveIconRadioGroup<_T extends string, T extends _T, U extends T>(\n options: ResponsiveIconRadioGroupOptions<T, U>,\n): ResponsiveIconRadioGroupDescriptor<ResponsiveIconRadioGroupValue<T>> {\n return { type: Types.ResponsiveIconRadioGroup, options }\n}\n\nexport type Descriptor<T extends Data = Data> =\n \| DeletedPropControllerDescriptor<T>\n \| BackgroundsDescriptor<T>\n \| BorderDescriptor<T>\n \| BorderRadiusDescriptor<T>\n \| CheckboxDescriptor<T>\n \| DateDescriptor<T>\n \| ElementIDDescriptor<T>\n \| FontDescriptor<T>\n \| PropDescriptor<typeof GapX>\n \| GapYDescriptor<T>\n \| GridDescriptor<T>\n \| ImageDescriptor<T>\n \| ImagesDescriptor<T>\n \| LinkDescriptor<T>\n \| MarginDescriptor<T>\n \| NavigationLinksDescriptor<T>\n \| NumberDescriptor<T>\n \| PaddingDescriptor<T>\n \| ResponsiveColorDescriptor<T>\n \| ResponsiveIconRadioGroupDescriptor<\n T extends ResponsiveIconRadioGroupValue<string> ? T : ResponsiveIconRadioGroupValue<string>\n >\n \| ResponsiveLengthDescriptor<T>\n \| PropDescriptor<typeof ResponsiveNumber>\n \| PropDescriptor<typeof ResponsiveOpacity>\n \| PropDescriptor<typeof ResponsiveSelect>\n \| ShadowsDescriptor<T>\n \| SocialLinksDescriptor<T>\n \| TableDescriptor<T>\n \| TableFormFieldsDescriptor<T>\n \| TextAreaDescriptor<T>\n \| TextInputDescriptor<T>\n \| TextStyleDescriptor<T>\n \| VideoDescriptor<T>\n \| WidthDescriptor<T>\n \| StyleControlDefinition\n \| StyleV2ControlDefinition\n \| NumberControlDefinition\n \| CheckboxControlDefinition\n \| TextInputControlDefinition\n \| TextAreaControlDefinition\n \| SelectControlDefinition\n \| ColorControlDefinition\n \| IconRadioGroupControlDefinition\n \| ImageControlDefinition\n \| ComboboxControlDefinition\n \| ShapeControlDefinition\n \| ListControlDefinition\n \| LinkControlDefinition\n \| SlotControlDefinition\n \| RichTextControlDefinition\n \| RichTextV2ControlDefinition\n \| TypographyControlDefinition\n\nexport type PanelDescriptorType =\n \| typeof PropControllerTypes.Backgrounds\n \| typeof Types.ResponsiveIconRadioGroup\n \| typeof PropControllerTypes.Margin\n \| typeof PropControllerTypes.Padding\n \| typeof PropControllerTypes.Shadows\n \| typeof PropControllerTypes.Border\n \| typeof PropControllerTypes.GapY\n \| typeof PropControllerTypes.GapX\n \| typeof PropControllerTypes.BorderRadius\n \| typeof PropControllerTypes.Checkbox\n \| typeof PropControllerTypes.TextInput\n \| typeof PropControllerTypes.Link\n \| typeof PropControllerTypes.ResponsiveSelect\n \| typeof PropControllerTypes.ResponsiveColor\n \| typeof PropControllerTypes.TextStyle\n \| typeof PropControllerTypes.Images\n \| typeof PropControllerTypes.ResponsiveNumber\n \| typeof PropControllerTypes.Number\n \| typeof PropControllerTypes.Date\n \| typeof PropControllerTypes.Font\n \| typeof PropControllerTypes.TextArea\n \| typeof PropControllerTypes.Table\n \| typeof PropControllerTypes.Image\n \| typeof PropControllerTypes.ResponsiveOpacity\n \| typeof PropControllerTypes.SocialLinks\n \| typeof PropControllerTypes.Video\n \| typeof PropControllerTypes.NavigationLinks\n\nexport type PanelDescriptor<T extends Data = Data> = Extract<\n Descriptor<T>,\n { type: PanelDescriptorType }\n>\n\nexport type DescriptorValueType<T extends Descriptor> = T extends NumberControlDefinition\n ? NumberControlValue<T>\n : T extends CheckboxControlDefinition\n ? CheckboxControlValue<T>\n : T extends TextInputControlDefinition\n ? TextInputControlValue<T>\n : T extends TextAreaControlDefinition\n ? TextAreaControlValue<T>\n : T extends SelectControlDefinition\n ? SelectControlValue<T>\n : T extends ColorControlDefinition\n ? ColorControlValue<T>\n : T extends StyleControlDefinition\n ? StyleControlFormattedValue\n : T extends StyleV2ControlDefinition\n ? StyleV2ControlFormattedValue\n : T extends IconRadioGroupControlDefinition\n ? IconRadioGroupControlValue<T>\n : T extends ImageControlDefinition\n ? ResolveImageControlValue<T>\n : T extends ComboboxControlDefinition\n ? ComboboxControlValue<T>\n : T extends ShapeControlDefinition\n ? ShapeControlValue<T>\n : T extends ListControlDefinition\n ? ListControlValue<T>\n : T extends LinkControlDefinition\n ? LinkControlValue<T>\n : T extends SlotControlDefinition\n ? SlotControlValue\n : T extends RichTextControlDefinition\n ? RichTextControlValue\n : T extends RichTextV2ControlDefinition\n ? RichTextV2ControlValue\n : T extends StyleV2ControlDefinition\n ? StyleV2ControlFormattedValue\n : T extends TypographyControlDefinition\n ? TypographyControlValue\n : T['type'] extends typeof PropControllerTypes.ResponsiveColor\n ? // TODO(miguel): We're not importing a resolver type from `@makeswift/prop-controllers` because\n // the resolved type is tightly coupled with the runtime (i.e., it's the result of an API call).\n // This means that we probably want to rethink how types are resolved and where that lives.\n ResponsiveColor \| null \| undefined\n : T['type'] extends typeof PropControllerTypes.Backgrounds\n ? ResolveBackgroundsPropControllerValue<\n Extract<T, { type: typeof PropControllerTypes.Backgrounds }>\n >\n : T['type'] extends typeof PropControllerTypes.Checkbox\n ? ResolveCheckboxPropControllerValue<Extract<T, { type: typeof PropControllerTypes.Checkbox }>>\n : T['type'] extends typeof PropControllerTypes.Date\n ? ResolveDatePropControllerValue<Extract<T, { type: typeof PropControllerTypes.Date }>>\n : T['type'] extends typeof PropControllerTypes.ElementID\n ? ResolveElementIDPropControllerValue<Extract<T, { type: typeof PropControllerTypes.ElementID }>>\n : T['type'] extends typeof PropControllerTypes.Font\n ? ResolveFontPropControllerValue<Extract<T, { type: typeof PropControllerTypes.Font }>>\n : T['type'] extends typeof PropControllerTypes.GapX\n ? PropValue<T> \| undefined\n : T['type'] extends typeof PropControllerTypes.GapY\n ? ResolveGapYPropControllerValue<Extract<T, { type: typeof PropControllerTypes.GapY }>>\n : T['type'] extends typeof PropControllerTypes.Grid\n ? ResolveGridPropControllerValue<Extract<T, { type: typeof PropControllerTypes.Grid }>>\n : T['type'] extends typeof PropControllerTypes.Image\n ? ResolveImagePropControllerValue<Extract<T, { type: typeof PropControllerTypes.Image }>>\n : T['type'] extends typeof PropControllerTypes.Images\n ? ResolveImagesPropControllerValue<Extract<T, { type: typeof PropControllerTypes.Images }>>\n : T['type'] extends typeof PropControllerTypes.ResponsiveNumber\n ? PropValue<T> \| undefined\n : T['type'] extends typeof PropControllerTypes.ResponsiveOpacity\n ? PropValue<T> \| undefined\n : T['type'] extends typeof PropControllerTypes.ResponsiveSelect\n ? PropValue<T> \| undefined\n : T['type'] extends typeof PropControllerTypes.Link\n ? ResolveLinkPropControllerValue<Extract<T, { type: typeof PropControllerTypes.Link }>>\n : T['type'] extends typeof PropControllerTypes.Width\n ? ResolveWidthPropControllerValue<Extract<T, { type: typeof PropControllerTypes.Width }>>\n : T['type'] extends typeof PropControllerTypes.Padding\n ? ResolvePaddingPropControllerValue<Extract<T, { type: typeof PropControllerTypes.Padding }>>\n : T['type'] extends typeof PropControllerTypes.Margin\n ? ResolveMarginPropControllerValue<Extract<T, { type: typeof PropControllerTypes.Margin }>>\n : T['type'] extends typeof PropControllerTypes.NavigationLinks\n ? ResolveNavigationLinksPropControllerValue<\n Extract<T, { type: typeof PropControllerTypes.NavigationLinks }>\n >\n : T['type'] extends typeof PropControllerTypes.BorderRadius\n ? ResolveBorderRadiusPropControllerValue<\n Extract<T, { type: typeof PropControllerTypes.BorderRadius }>\n >\n : T['type'] extends typeof PropControllerTypes.Shadows\n ? ResolveShadowsPropControllerValue<Extract<T, { type: typeof PropControllerTypes.Shadows }>>\n : T['type'] extends typeof PropControllerTypes.SocialLinks\n ? ResolveSocialLinksPropControllerValue<\n Extract<T, { type: typeof PropControllerTypes.SocialLinks }>\n >\n : T['type'] extends typeof PropControllerTypes.ResponsiveLength\n ? ResolveResponsiveLengthPropControllerValue<\n Extract<T, { type: typeof PropControllerTypes.ResponsiveLength }>\n >\n : T['type'] extends typeof PropControllerTypes.Border\n ? ResolveBorderPropControllerValue<Extract<T, { type: typeof PropControllerTypes.Border }>>\n : T['type'] extends typeof PropControllerTypes.Number\n ? ResolveNumberPropControllerValue<Extract<T, { type: typeof PropControllerTypes.Number }>>\n : T['type'] extends typeof PropControllerTypes.Table\n ? ResolveTablePropControllerValue<Extract<T, { type: typeof PropControllerTypes.Table }>>\n : T['type'] extends typeof PropControllerTypes.TableFormFields\n ? ResolveTableFormFieldsPropControllerValue<\n Extract<T, { type: typeof PropControllerTypes.TableFormFields }>\n >\n : T['type'] extends typeof PropControllerTypes.TextStyle\n ? ResolveTextStylePropControllerValue<Extract<T, { type: typeof PropControllerTypes.TextStyle }>>\n : T['type'] extends typeof PropControllerTypes.TextArea\n ? ResolveTextAreaPropControllerValue<Extract<T, { type: typeof PropControllerTypes.TextArea }>>\n : T['type'] extends typeof PropControllerTypes.TextInput\n ? ResolveTextInputPropControllerValue<Extract<T, { type: typeof PropControllerTypes.TextInput }>>\n : T['type'] extends typeof PropControllerTypes.Video\n ? ResolveVideoPropControllerValue<Extract<T, { type: typeof PropControllerTypes.Video }>>\n : T extends Descriptor<infer U>\n ? U \| undefined\n : never\n\nexport type PanelDescriptorValueType<T extends PanelDescriptor> = T extends PanelDescriptor<infer U>\n ? U\n : never\n"],"mappings":"AAWA,SAAS,wBAAwB;AAsI1B,MAAM,QAAQ;AAAA,EACnB,0BAA0B;AAAA,EAC1B,OAAO;AACT;AA4BO,SAAS,yBACd,SACsE;AACtE,SAAO,EAAE,MAAM,MAAM,0BAA0B,QAAQ;AACzD;","names":[]}
1	+ {"version":3,"sources":["../../../src/prop-controllers/descriptors.ts"],"sourcesContent":["import {\n CheckboxControlDefinition,\n IconRadioGroupControlDefinition,\n NumberControlDefinition,\n TextInputControlDefinition,\n TextAreaControlDefinition,\n} from '@makeswift/controls'\nimport { ResponsiveColor } from '../runtimes/react/controls'\nimport { StyleControlFormattedValue } from '../runtimes/react/controls/style'\nimport type { Data } from '../state/react-page'\nimport { NumberControlValue } from '../runtimes/react/controls/number'\nimport { StyleControlType } from '../controls/style'\nimport {\n ColorControlDefinition,\n ComboboxControlDefinition,\n ImageControlDefinition,\n LinkControlDefinition,\n ListControlDefinition,\n SelectControlDefinition,\n ShapeControlDefinition,\n SlotControlDefinition,\n StyleControlDefinition,\n RichTextV2ControlDefinition,\n StyleV2ControlDefinition,\n TypographyControlDefinition,\n} from '../controls'\nimport { TextInputControlValue } from '../runtimes/react/controls/text-input'\nimport { TextAreaControlValue } from '../runtimes/react/controls/text-area'\nimport { ColorControlValue } from '../runtimes/react/controls/color'\nimport { SelectControlValue } from '../runtimes/react/controls/select'\nimport { CheckboxControlValue } from '../runtimes/react/controls/checkbox'\nimport { ResolveImageControlValue } from '../runtimes/react/controls/image'\nimport { ShapeControlValue } from '../runtimes/react/controls/shape'\nimport { ListControlValue } from '../runtimes/react/controls/list'\nimport { ComboboxControlValue } from '../runtimes/react/controls/combobox'\nimport { LinkControlValue } from '../runtimes/react/controls/link'\nimport { SlotControlValue } from '../runtimes/react/controls/slot'\nimport { RichTextControlDefinition } from '../controls/rich-text'\nimport { RichTextControlValue } from '../runtimes/react/controls/rich-text/rich-text'\nimport { RichTextV2ControlValue } from '../runtimes/react/controls/rich-text-v2'\nimport { StyleV2ControlFormattedValue } from '../runtimes/react/controls/style-v2'\nimport { IconRadioGroupControlValue } from '../runtimes/react/controls/icon-radio-group'\nimport { TypographyControlValue } from '../runtimes/react/controls/typography'\nimport {\n BorderDescriptor,\n CheckboxDescriptor,\n LinkDescriptor,\n ResolveLinkPropControllerValue,\n Types as PropControllerTypes,\n ShadowsDescriptor,\n ResolveShadowsPropControllerValue,\n ResponsiveLengthDescriptor,\n ResolveResponsiveLengthPropControllerValue,\n NumberDescriptor,\n ResolveNumberPropControllerValue,\n ResponsiveColorDescriptor,\n ResolveCheckboxPropControllerValue,\n BorderRadiusDescriptor,\n ResolveBorderPropControllerValue,\n ResolveBorderRadiusPropControllerValue,\n DateDescriptor,\n ResolveDatePropControllerValue,\n FontDescriptor,\n ResolveFontPropControllerValue,\n VideoDescriptor,\n ResolveVideoPropControllerValue,\n TableDescriptor,\n ResolveTablePropControllerValue,\n MarginDescriptor,\n ResolveMarginPropControllerValue,\n PaddingDescriptor,\n ResolvePaddingPropControllerValue,\n WidthDescriptor,\n ResolveWidthPropControllerValue,\n TextStyleDescriptor,\n ResolveTextStylePropControllerValue,\n NavigationLinksDescriptor,\n ResolveNavigationLinksPropControllerValue,\n TextAreaDescriptor,\n ResolveTextAreaPropControllerValue,\n GapX,\n ResponsiveNumber,\n ResponsiveSelect,\n ResolveGapYPropControllerValue,\n GapYDescriptor,\n ElementIDDescriptor,\n ResolveElementIDPropControllerValue,\n TableFormFieldsDescriptor,\n ResolveTableFormFieldsPropControllerValue,\n GridDescriptor,\n ResolveGridPropControllerValue,\n ImageDescriptor,\n ResolveImagePropControllerValue,\n ImagesDescriptor,\n ResolveImagesPropControllerValue,\n BackgroundsDescriptor,\n ResolveBackgroundsPropControllerValue,\n ResponsiveOpacity,\n ResponsiveIconRadioGroup,\n ResolveSocialLinksPropControllerValue,\n SocialLinksDescriptor,\n TextInputDescriptor,\n ResolveTextInputPropControllerValue,\n type Descriptor as PropDescriptor,\n type Value as PropValue,\n} from '@makeswift/prop-controllers'\nimport { DeletedPropControllerDescriptor } from './deleted'\n\nexport type { Data }\n\nexport type Gap = { value: number; unit: 'px' }\n\nexport const Types = {\n Style: StyleControlType,\n} as const\n\nexport type Descriptor<T extends Data = Data> =\n \| DeletedPropControllerDescriptor<T>\n \| BackgroundsDescriptor<T>\n \| BorderDescriptor<T>\n \| BorderRadiusDescriptor<T>\n \| CheckboxDescriptor<T>\n \| DateDescriptor<T>\n \| ElementIDDescriptor<T>\n \| FontDescriptor<T>\n \| PropDescriptor<typeof GapX>\n \| GapYDescriptor<T>\n \| GridDescriptor<T>\n \| ImageDescriptor<T>\n \| ImagesDescriptor<T>\n \| LinkDescriptor<T>\n \| MarginDescriptor<T>\n \| NavigationLinksDescriptor<T>\n \| NumberDescriptor<T>\n \| PaddingDescriptor<T>\n \| ResponsiveColorDescriptor<T>\n \| ResponsiveLengthDescriptor<T>\n \| PropDescriptor<typeof ResponsiveIconRadioGroup>\n \| PropDescriptor<typeof ResponsiveNumber>\n \| PropDescriptor<typeof ResponsiveOpacity>\n \| PropDescriptor<typeof ResponsiveSelect>\n \| ShadowsDescriptor<T>\n \| SocialLinksDescriptor<T>\n \| TableDescriptor<T>\n \| TableFormFieldsDescriptor<T>\n \| TextAreaDescriptor<T>\n \| TextInputDescriptor<T>\n \| TextStyleDescriptor<T>\n \| VideoDescriptor<T>\n \| WidthDescriptor<T>\n \| StyleControlDefinition\n \| StyleV2ControlDefinition\n \| NumberControlDefinition\n \| CheckboxControlDefinition\n \| TextInputControlDefinition\n \| TextAreaControlDefinition\n \| SelectControlDefinition\n \| ColorControlDefinition\n \| IconRadioGroupControlDefinition\n \| ImageControlDefinition\n \| ComboboxControlDefinition\n \| ShapeControlDefinition\n \| ListControlDefinition\n \| LinkControlDefinition\n \| SlotControlDefinition\n \| RichTextControlDefinition\n \| RichTextV2ControlDefinition\n \| TypographyControlDefinition\n\nexport type PanelDescriptorType =\n \| typeof PropControllerTypes.Backgrounds\n \| typeof PropControllerTypes.ResponsiveIconRadioGroup\n \| typeof PropControllerTypes.Margin\n \| typeof PropControllerTypes.Padding\n \| typeof PropControllerTypes.Shadows\n \| typeof PropControllerTypes.Border\n \| typeof PropControllerTypes.GapY\n \| typeof PropControllerTypes.GapX\n \| typeof PropControllerTypes.BorderRadius\n \| typeof PropControllerTypes.Checkbox\n \| typeof PropControllerTypes.TextInput\n \| typeof PropControllerTypes.Link\n \| typeof PropControllerTypes.ResponsiveSelect\n \| typeof PropControllerTypes.ResponsiveColor\n \| typeof PropControllerTypes.TextStyle\n \| typeof PropControllerTypes.Images\n \| typeof PropControllerTypes.ResponsiveNumber\n \| typeof PropControllerTypes.Number\n \| typeof PropControllerTypes.Date\n \| typeof PropControllerTypes.Font\n \| typeof PropControllerTypes.TextArea\n \| typeof PropControllerTypes.Table\n \| typeof PropControllerTypes.Image\n \| typeof PropControllerTypes.ResponsiveOpacity\n \| typeof PropControllerTypes.SocialLinks\n \| typeof PropControllerTypes.Video\n \| typeof PropControllerTypes.NavigationLinks\n\nexport type PanelDescriptor<T extends Data = Data> = Extract<\n Descriptor<T>,\n { type: PanelDescriptorType }\n>\n\nexport type DescriptorValueType<T extends Descriptor> = T extends NumberControlDefinition\n ? NumberControlValue<T>\n : T extends CheckboxControlDefinition\n ? CheckboxControlValue<T>\n : T extends TextInputControlDefinition\n ? TextInputControlValue<T>\n : T extends TextAreaControlDefinition\n ? TextAreaControlValue<T>\n : T extends SelectControlDefinition\n ? SelectControlValue<T>\n : T extends ColorControlDefinition\n ? ColorControlValue<T>\n : T extends StyleControlDefinition\n ? StyleControlFormattedValue\n : T extends StyleV2ControlDefinition\n ? StyleV2ControlFormattedValue\n : T extends IconRadioGroupControlDefinition\n ? IconRadioGroupControlValue<T>\n : T extends ImageControlDefinition\n ? ResolveImageControlValue<T>\n : T extends ComboboxControlDefinition\n ? ComboboxControlValue<T>\n : T extends ShapeControlDefinition\n ? ShapeControlValue<T>\n : T extends ListControlDefinition\n ? ListControlValue<T>\n : T extends LinkControlDefinition\n ? LinkControlValue<T>\n : T extends SlotControlDefinition\n ? SlotControlValue\n : T extends RichTextControlDefinition\n ? RichTextControlValue\n : T extends RichTextV2ControlDefinition\n ? RichTextV2ControlValue\n : T extends StyleV2ControlDefinition\n ? StyleV2ControlFormattedValue\n : T extends TypographyControlDefinition\n ? TypographyControlValue\n : T['type'] extends typeof PropControllerTypes.ResponsiveColor\n ? // TODO(miguel): We're not importing a resolver type from `@makeswift/prop-controllers` because\n // the resolved type is tightly coupled with the runtime (i.e., it's the result of an API call).\n // This means that we probably want to rethink how types are resolved and where that lives.\n ResponsiveColor \| null \| undefined\n : T['type'] extends typeof PropControllerTypes.Backgrounds\n ? ResolveBackgroundsPropControllerValue<\n Extract<T, { type: typeof PropControllerTypes.Backgrounds }>\n >\n : T['type'] extends typeof PropControllerTypes.Checkbox\n ? ResolveCheckboxPropControllerValue<Extract<T, { type: typeof PropControllerTypes.Checkbox }>>\n : T['type'] extends typeof PropControllerTypes.Date\n ? ResolveDatePropControllerValue<Extract<T, { type: typeof PropControllerTypes.Date }>>\n : T['type'] extends typeof PropControllerTypes.ElementID\n ? ResolveElementIDPropControllerValue<Extract<T, { type: typeof PropControllerTypes.ElementID }>>\n : T['type'] extends typeof PropControllerTypes.Font\n ? ResolveFontPropControllerValue<Extract<T, { type: typeof PropControllerTypes.Font }>>\n : T['type'] extends typeof PropControllerTypes.GapX\n ? PropValue<T> \| undefined\n : T['type'] extends typeof PropControllerTypes.GapY\n ? ResolveGapYPropControllerValue<Extract<T, { type: typeof PropControllerTypes.GapY }>>\n : T['type'] extends typeof PropControllerTypes.Grid\n ? ResolveGridPropControllerValue<Extract<T, { type: typeof PropControllerTypes.Grid }>>\n : T['type'] extends typeof PropControllerTypes.Image\n ? ResolveImagePropControllerValue<Extract<T, { type: typeof PropControllerTypes.Image }>>\n : T['type'] extends typeof PropControllerTypes.Images\n ? ResolveImagesPropControllerValue<Extract<T, { type: typeof PropControllerTypes.Images }>>\n : T['type'] extends typeof PropControllerTypes.ResponsiveIconRadioGroup\n ? PropValue<T> \| undefined\n : T['type'] extends typeof PropControllerTypes.ResponsiveNumber\n ? PropValue<T> \| undefined\n : T['type'] extends typeof PropControllerTypes.ResponsiveOpacity\n ? PropValue<T> \| undefined\n : T['type'] extends typeof PropControllerTypes.ResponsiveSelect\n ? PropValue<T> \| undefined\n : T['type'] extends typeof PropControllerTypes.Link\n ? ResolveLinkPropControllerValue<Extract<T, { type: typeof PropControllerTypes.Link }>>\n : T['type'] extends typeof PropControllerTypes.Width\n ? ResolveWidthPropControllerValue<Extract<T, { type: typeof PropControllerTypes.Width }>>\n : T['type'] extends typeof PropControllerTypes.Padding\n ? ResolvePaddingPropControllerValue<Extract<T, { type: typeof PropControllerTypes.Padding }>>\n : T['type'] extends typeof PropControllerTypes.Margin\n ? ResolveMarginPropControllerValue<Extract<T, { type: typeof PropControllerTypes.Margin }>>\n : T['type'] extends typeof PropControllerTypes.NavigationLinks\n ? ResolveNavigationLinksPropControllerValue<\n Extract<T, { type: typeof PropControllerTypes.NavigationLinks }>\n >\n : T['type'] extends typeof PropControllerTypes.BorderRadius\n ? ResolveBorderRadiusPropControllerValue<\n Extract<T, { type: typeof PropControllerTypes.BorderRadius }>\n >\n : T['type'] extends typeof PropControllerTypes.Shadows\n ? ResolveShadowsPropControllerValue<Extract<T, { type: typeof PropControllerTypes.Shadows }>>\n : T['type'] extends typeof PropControllerTypes.SocialLinks\n ? ResolveSocialLinksPropControllerValue<\n Extract<T, { type: typeof PropControllerTypes.SocialLinks }>\n >\n : T['type'] extends typeof PropControllerTypes.ResponsiveLength\n ? ResolveResponsiveLengthPropControllerValue<\n Extract<T, { type: typeof PropControllerTypes.ResponsiveLength }>\n >\n : T['type'] extends typeof PropControllerTypes.Border\n ? ResolveBorderPropControllerValue<Extract<T, { type: typeof PropControllerTypes.Border }>>\n : T['type'] extends typeof PropControllerTypes.Number\n ? ResolveNumberPropControllerValue<Extract<T, { type: typeof PropControllerTypes.Number }>>\n : T['type'] extends typeof PropControllerTypes.Table\n ? ResolveTablePropControllerValue<Extract<T, { type: typeof PropControllerTypes.Table }>>\n : T['type'] extends typeof PropControllerTypes.TableFormFields\n ? ResolveTableFormFieldsPropControllerValue<\n Extract<T, { type: typeof PropControllerTypes.TableFormFields }>\n >\n : T['type'] extends typeof PropControllerTypes.TextStyle\n ? ResolveTextStylePropControllerValue<Extract<T, { type: typeof PropControllerTypes.TextStyle }>>\n : T['type'] extends typeof PropControllerTypes.TextArea\n ? ResolveTextAreaPropControllerValue<Extract<T, { type: typeof PropControllerTypes.TextArea }>>\n : T['type'] extends typeof PropControllerTypes.TextInput\n ? ResolveTextInputPropControllerValue<Extract<T, { type: typeof PropControllerTypes.TextInput }>>\n : T['type'] extends typeof PropControllerTypes.Video\n ? ResolveVideoPropControllerValue<Extract<T, { type: typeof PropControllerTypes.Video }>>\n : T extends Descriptor<infer U>\n ? U \| undefined\n : never\n\nexport type PanelDescriptorValueType<T extends PanelDescriptor> = T extends PanelDescriptor<infer U>\n ? U\n : never\n"],"mappings":"AAWA,SAAS,wBAAwB;AAqG1B,MAAM,QAAQ;AAAA,EACnB,OAAO;AACT;","names":[]}

package/dist/esm/prop-controllers/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/prop-controllers/index.ts"],"sourcesContent":["export type {\n Data,\n Descriptor as PropControllerDescriptor,\n DescriptorValueType as PropControllerDescriptorValueType,\n ~~ResponsiveIconRadioGroupDescriptor,\n ResponsiveIconRadioGroupValue,\n~~ PanelDescriptor,\n PanelDescriptorType,\n PanelDescriptorValueType,\n} from './descriptors'\nexport type {\n ResponsiveValueType,\n Device,\n DeviceOverride,\n ResponsiveValue,\n} from '@makeswift/prop-controllers'\nexport * as Props from './descriptors'\nexport type {\n PropControllerMessage,\n RichTextPropControllerMessage,\n TableFormFieldsMessage,\n} from './instances'\nexport { RichTextPropControllerMessageType, TableFormFieldsMessageType } from './instances'\nexport * as Introspection from './introspection'\nexport { DELETED_PROP_CONTROLLER_TYPES } from './deleted'\n"],"mappings":"~~AAgBA~~,YAAY,WAAW;AAMvB,SAAS,mCAAmC,kCAAkC;AAC9E,YAAY,mBAAmB;AAC/B,SAAS,qCAAqC;","names":[]}
1	+ {"version":3,"sources":["../../../src/prop-controllers/index.ts"],"sourcesContent":["export type {\n Data,\n Descriptor as PropControllerDescriptor,\n DescriptorValueType as PropControllerDescriptorValueType,\n PanelDescriptor,\n PanelDescriptorType,\n PanelDescriptorValueType,\n} from './descriptors'\nexport type {\n ResponsiveValueType,\n Device,\n DeviceOverride,\n ResponsiveValue,\n} from '@makeswift/prop-controllers'\nexport * as Props from './descriptors'\nexport type {\n PropControllerMessage,\n RichTextPropControllerMessage,\n TableFormFieldsMessage,\n} from './instances'\nexport { RichTextPropControllerMessageType, TableFormFieldsMessageType } from './instances'\nexport * as Introspection from './introspection'\nexport { DELETED_PROP_CONTROLLER_TYPES } from './deleted'\n"],"mappings":"AAcA,YAAY,WAAW;AAMvB,SAAS,mCAAmC,kCAAkC;AAC9E,YAAY,mBAAmB;AAC/B,SAAS,qCAAqC;","names":[]}

package/dist/esm/runtimes/react/components/ElementReference.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { useGlobalElement, useLocalizedGlobalElement } from "../hooks/makeswift-
 import { useDocument } from "../hooks/use-document";
 import { DocumentCyclesContext, useDocumentCycles } from "../hooks/use-document-cycles";
 import { FallbackComponent } from "../../../components/shared/FallbackComponent";
-import { ElementData } from "./ElementData";
+import { Element } from "./Element";
 import { Document } from "./Document";
 import { DisableRegisterElement } from "../hooks/use-disable-register-element";
 const ElementReference = memo(
@@ -37,7 +37,7 @@ const ElementReference = memo(
         }
       );
     }
-    return /* @__PURE__ */ jsx(DocumentCyclesContext.Provider, { value: providedDocumentKeys, children: elementReferenceDocument != null ? /* @__PURE__ */ jsx(Document, { document: elementReferenceDocument, ref }) : /* @__PURE__ */ jsx(DisableRegisterElement.Provider, { value: true, children: /* @__PURE__ */ jsx(ElementData, { elementData: globalElementData, ref }) }) });
+    return /* @__PURE__ */ jsx(DocumentCyclesContext.Provider, { value: providedDocumentKeys, children: elementReferenceDocument != null ? /* @__PURE__ */ jsx(Document, { document: elementReferenceDocument, ref }) : /* @__PURE__ */ jsx(DisableRegisterElement.Provider, { value: true, children: /* @__PURE__ */ jsx(Element, { element: globalElementData, ref }) }) });
   })
 );
 export {

package/dist/esm/runtimes/react/components/ElementReference.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/runtimes/react/components/ElementReference.tsx"],"sourcesContent":["import { Ref, forwardRef, memo, useMemo } from 'react'\nimport { ElementImperativeHandle } from '../element-imperative-handle'\nimport { useGlobalElement, useLocalizedGlobalElement } from '../hooks/makeswift-api'\nimport { useDocument } from '../hooks/use-document'\nimport { DocumentCyclesContext, useDocumentCycles } from '../hooks/use-document-cycles'\nimport {\n ElementData as ReactPageElementData,\n ElementReference as ReactPageElementReference,\n} from '../../../state/react-page'\nimport { FallbackComponent } from '../../../components/shared/FallbackComponent'\nimport { ~~ElementData~~ } from './~~ElementData~~'\nimport { Document } from './Document'\nimport { DisableRegisterElement } from '../hooks/use-disable-register-element'\n\ntype ElementRefereceProps = {\n elementReference: ReactPageElementReference\n}\n\nexport const ElementReference = memo(\n forwardRef(function ElementReference(\n { elementReference }: ElementRefereceProps,\n ref: Ref<ElementImperativeHandle>,\n ): JSX.Element {\n const globalElement = useGlobalElement(elementReference.value)\n // Update the logic here when we can merge element trees\n const localizedGlobalElement = useLocalizedGlobalElement(elementReference.value)\n const globalElementData = (localizedGlobalElement?.data ?? globalElement?.data) as\n \| ReactPageElementData\n \| undefined\n const elementReferenceDocument = useDocument(elementReference.key)\n const documentKey = elementReference.key\n const documentKeys = useDocumentCycles()\n const providedDocumentKeys = useMemo(\n () => [...documentKeys, documentKey],\n [documentKeys, documentKey],\n )\n\n if (globalElementData == null) {\n return (\n <FallbackComponent\n ref={ref as Ref<HTMLDivElement>}\n text=\"This global component doesn't exist\"\n />\n )\n }\n\n if (documentKeys.includes(documentKey)) {\n return (\n <FallbackComponent\n ref={ref as Ref<HTMLDivElement>}\n text=\"This global component contains itself!\"\n />\n )\n }\n\n return (\n <DocumentCyclesContext.Provider value={providedDocumentKeys}>\n {elementReferenceDocument != null ? (\n <Document document={elementReferenceDocument} ref={ref} />\n ) : (\n <DisableRegisterElement.Provider value={true}>\n <ElementData ~~elementData~~={globalElementData} ref={ref} />\n </DisableRegisterElement.Provider>\n )}\n </DocumentCyclesContext.Provider>\n )\n }),\n)\n"],"mappings":"AAuCQ;AAvCR,SAAc,YAAY,MAAM,eAAe;AAE/C,SAAS,kBAAkB,iCAAiC;AAC5D,SAAS,mBAAmB;AAC5B,SAAS,uBAAuB,yBAAyB;AAKzD,SAAS,yBAAyB;AAClC,SAAS,~~mBAAmB~~;~~AAC5B~~,SAAS,gBAAgB;AACzB,SAAS,8BAA8B;AAMhC,MAAM,mBAAmB;AAAA,EAC9B,WAAW,SAASA,kBAClB,EAAE,iBAAiB,GACnB,KACa;AACb,UAAM,gBAAgB,iBAAiB,iBAAiB,KAAK;AAE7D,UAAM,yBAAyB,0BAA0B,iBAAiB,KAAK;AAC/E,UAAM,oBAAqB,wBAAwB,QAAQ,eAAe;AAG1E,UAAM,2BAA2B,YAAY,iBAAiB,GAAG;AACjE,UAAM,cAAc,iBAAiB;AACrC,UAAM,eAAe,kBAAkB;AACvC,UAAM,uBAAuB;AAAA,MAC3B,MAAM,CAAC,GAAG,cAAc,WAAW;AAAA,MACnC,CAAC,cAAc,WAAW;AAAA,IAC5B;AAEA,QAAI,qBAAqB,MAAM;AAC7B,aACE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,MAAK;AAAA;AAAA,MACP;AAAA,IAEJ;AAEA,QAAI,aAAa,SAAS,WAAW,GAAG;AACtC,aACE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,MAAK;AAAA;AAAA,MACP;AAAA,IAEJ;AAEA,WACE,oBAAC,sBAAsB,UAAtB,EAA+B,OAAO,sBACpC,sCAA4B,OAC3B,oBAAC,YAAS,UAAU,0BAA0B,KAAU,IAExD,oBAAC,uBAAuB,UAAvB,EAAgC,OAAO,~~MACtC~~,8BAAC,~~eAAY~~,~~aAAa~~,mBAAmB,KAAU,~~GACzD~~,GAEJ;AAAA,EAEJ,CAAC;AACH;","names":["ElementReference"]}
1	+ {"version":3,"sources":["../../../../../src/runtimes/react/components/ElementReference.tsx"],"sourcesContent":["import { Ref, forwardRef, memo, useMemo } from 'react'\nimport { ElementImperativeHandle } from '../element-imperative-handle'\nimport { useGlobalElement, useLocalizedGlobalElement } from '../hooks/makeswift-api'\nimport { useDocument } from '../hooks/use-document'\nimport { DocumentCyclesContext, useDocumentCycles } from '../hooks/use-document-cycles'\nimport {\n ElementData as ReactPageElementData,\n ElementReference as ReactPageElementReference,\n} from '../../../state/react-page'\nimport { FallbackComponent } from '../../../components/shared/FallbackComponent'\nimport { Element } from './Element'\nimport { Document } from './Document'\nimport { DisableRegisterElement } from '../hooks/use-disable-register-element'\n\ntype ElementRefereceProps = {\n elementReference: ReactPageElementReference\n}\n\nexport const ElementReference = memo(\n forwardRef(function ElementReference(\n { elementReference }: ElementRefereceProps,\n ref: Ref<ElementImperativeHandle>,\n ): JSX.Element {\n const globalElement = useGlobalElement(elementReference.value)\n // Update the logic here when we can merge element trees\n const localizedGlobalElement = useLocalizedGlobalElement(elementReference.value)\n const globalElementData = (localizedGlobalElement?.data ?? globalElement?.data) as\n \| ReactPageElementData\n \| undefined\n const elementReferenceDocument = useDocument(elementReference.key)\n const documentKey = elementReference.key\n const documentKeys = useDocumentCycles()\n const providedDocumentKeys = useMemo(\n () => [...documentKeys, documentKey],\n [documentKeys, documentKey],\n )\n\n if (globalElementData == null) {\n return (\n <FallbackComponent\n ref={ref as Ref<HTMLDivElement>}\n text=\"This global component doesn't exist\"\n />\n )\n }\n\n if (documentKeys.includes(documentKey)) {\n return (\n <FallbackComponent\n ref={ref as Ref<HTMLDivElement>}\n text=\"This global component contains itself!\"\n />\n )\n }\n\n return (\n <DocumentCyclesContext.Provider value={providedDocumentKeys}>\n {elementReferenceDocument != null ? (\n <Document document={elementReferenceDocument} ref={ref} />\n ) : (\n <DisableRegisterElement.Provider value={true}>\n {/* We render Element instead of ElementData because we rely on the FindDomNode */}\n <Element element={globalElementData} ref={ref} />\n </DisableRegisterElement.Provider>\n )}\n </DocumentCyclesContext.Provider>\n )\n }),\n)\n"],"mappings":"AAuCQ;AAvCR,SAAc,YAAY,MAAM,eAAe;AAE/C,SAAS,kBAAkB,iCAAiC;AAC5D,SAAS,mBAAmB;AAC5B,SAAS,uBAAuB,yBAAyB;AAKzD,SAAS,yBAAyB;AAClC,SAAS,eAAe;AACxB,SAAS,gBAAgB;AACzB,SAAS,8BAA8B;AAMhC,MAAM,mBAAmB;AAAA,EAC9B,WAAW,SAASA,kBAClB,EAAE,iBAAiB,GACnB,KACa;AACb,UAAM,gBAAgB,iBAAiB,iBAAiB,KAAK;AAE7D,UAAM,yBAAyB,0BAA0B,iBAAiB,KAAK;AAC/E,UAAM,oBAAqB,wBAAwB,QAAQ,eAAe;AAG1E,UAAM,2BAA2B,YAAY,iBAAiB,GAAG;AACjE,UAAM,cAAc,iBAAiB;AACrC,UAAM,eAAe,kBAAkB;AACvC,UAAM,uBAAuB;AAAA,MAC3B,MAAM,CAAC,GAAG,cAAc,WAAW;AAAA,MACnC,CAAC,cAAc,WAAW;AAAA,IAC5B;AAEA,QAAI,qBAAqB,MAAM;AAC7B,aACE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,MAAK;AAAA;AAAA,MACP;AAAA,IAEJ;AAEA,QAAI,aAAa,SAAS,WAAW,GAAG;AACtC,aACE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,MAAK;AAAA;AAAA,MACP;AAAA,IAEJ;AAEA,WACE,oBAAC,sBAAsB,UAAtB,EAA+B,OAAO,sBACpC,sCAA4B,OAC3B,oBAAC,YAAS,UAAU,0BAA0B,KAAU,IAExD,oBAAC,uBAAuB,UAAvB,EAAgC,OAAO,MAEtC,8BAAC,WAAQ,SAAS,mBAAmB,KAAU,GACjD,GAEJ;AAAA,EAEJ,CAAC;AACH;","names":["ElementReference"]}

package/dist/esm/runtimes/react/controls.js CHANGED Viewed

@@ -67,6 +67,7 @@ import {
   WidthPropControllerFormat,
   GapX,
   ResponsiveNumber,
+  ResponsiveIconRadioGroup,
   ResponsiveSelect,
   ResponsiveOpacity,
   getSocialLinksPropControllerDataSocialLinksData
@@ -324,6 +325,16 @@ function PropsValue({ element, children }) {
             },
             descriptor.type
           );
+        case PropControllerTypes.ResponsiveIconRadioGroup:
+          return /* @__PURE__ */ jsx(
+            RenderHook,
+            {
+              hook: (data) => usePropValue(ResponsiveIconRadioGroup, data),
+              parameters: [props[propName]],
+              children: (value) => renderFn({ ...propsValue, [propName]: value })
+            },
+            descriptor.type
+          );
         case PropControllerTypes.ResponsiveSelect:
           return /* @__PURE__ */ jsx(
             RenderHook,