@makeswift/runtime 0.16.0-canary.0 → 0.16.0-canary.2

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/components/builtin/Navigation/components/DropDownButton/index.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, ForwardedRef, forwardRef, useRef, useState } from 'react'\n\nimport { CaretDown8 } from '../../../../icons/CaretDown8'\nimport { Plus8 } from '../../../../icons/Plus8'\nimport { ArrowDown8 } from '../../../../icons/ArrowDown8'\nimport { ChevronDown8 } from '../../../../icons/ChevronDown8'\nimport { ResponsiveColorValue, TextStyleValue } from '../../../../../prop-controllers/descriptors'\nimport { colorToString } from '../../../../utils/colorToString'\nimport { useResponsiveColor } from '../../../../hooks'\n\nimport { Link } from '../../../../shared/Link'\nimport Button from '../../../Button'\nimport { useIsomorphicLayoutEffect } from '../../../../hooks/useIsomorphicLayoutEffect'\nimport { cx, keyframes } from '@emotion/css'\nimport { useStyle } from '../../../../../runtimes/react/use-style'\nimport { useResponsiveStyle, useResponsiveTextStyle } from '../../../../utils/responsive-style'\nimport { LinkData } from '@makeswift/prop-controllers'\n\nconst DROP_DOWN_MENU_WIDTH = 200\n\ntype Position = 'left' | 'right'\n\nconst DROP_DOWN_MENU_CLASS_NAME = 'drop-down-menu'\n\ntype DropDownMenuBaseProps = {\n  position: Position\n}\n\ntype DropDownMenuProps = DropDownMenuBaseProps &\n  Omit<ComponentPropsWithoutRef<'div'>, keyof DropDownMenuBaseProps>\n\nfunction DropDownMenu({ className, position, ...restOfProps }: DropDownMenuProps) {\n  return (\n    <div\n      {...restOfProps}\n      className={cx(\n        DROP_DOWN_MENU_CLASS_NAME,\n        useStyle({\n          position: 'absolute',\n          top: '100%',\n          left: position === 'left' ? 0 : 'auto',\n          right: position === 'right' ? 0 : 'auto',\n          background: '#fff',\n          margin: 0,\n          padding: '8px 0',\n          borderRadius: 4,\n          boxShadow: '0 3px 10px rgba(0, 0, 0, 0.15)',\n          width: DROP_DOWN_MENU_WIDTH,\n          zIndex: 99,\n          listStyle: 'none',\n          overflow: 'hidden',\n          transformOrigin: '50% 0',\n          willChange: 'transform, opacity',\n          transformStyle: 'preserve-3d',\n          display: 'none',\n        }),\n        className,\n      )}\n    />\n  )\n}\n\nconst dropIn = keyframes`\n  0% {\n      opacity: 0;\n      transform: rotateX(-20deg);\n  }\n  100% {\n      opacity: 1;\n      transform: none;\n  }\n`\n\ntype DropDownContainerProps = ComponentPropsWithoutRef<'div'>\n\nconst DropDownContainer = forwardRef(function DropDownContainer(\n  { className, ...restOfProps }: DropDownContainerProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <div\n      {...restOfProps}\n      ref={ref}\n      className={cx(\n        useStyle({\n          position: 'relative',\n          [`&:hover .${DROP_DOWN_MENU_CLASS_NAME}`]: {\n            display: 'block',\n            animation: `${dropIn} 0.25s`,\n          },\n        }),\n        className,\n      )}\n    />\n  )\n})\n\ntype BaseDropDownItemProps = {\n  className?: string\n  color?: ResponsiveColorValue\n  textStyle?: TextStyleValue\n}\n\ntype DropDownItemProps = BaseDropDownItemProps &\n  Omit<ComponentPropsWithoutRef<typeof Link>, keyof BaseDropDownItemProps>\n\nfunction DropDownItem({ className, color, textStyle, ...restOfProps }: DropDownItemProps) {\n  const colorData = useResponsiveColor(color)\n\n  return (\n    <Link\n      {...restOfProps}\n      className={cx(\n        useStyle({\n          display: 'block',\n          textDecoration: 'none',\n          lineHeight: 1.4,\n          padding: '8px 16px',\n          color: 'black',\n          backgroundColor: 'transparent',\n          transition: 'background-color 0.2s',\n        }),\n        useStyle(useResponsiveTextStyle(textStyle)),\n        useStyle(\n          useResponsiveStyle([colorData, textStyle] as const, ([color, textStyle = {}]) => {\n            const fontSize = textStyle.fontSize || { value: 14, unit: 'px' }\n            const fontWeight = textStyle.fontWeight == null ? 'normal' : textStyle.fontWeight\n            const fontStyle = textStyle.fontStyle || []\n            const letterSpacing = textStyle.letterSpacing == null ? null : textStyle.letterSpacing\n            const textTransform = textStyle.textTransform || []\n\n            return {\n              color: color == null ? 'black' : colorToString(color),\n              fontSize: `${fontSize.value}${fontSize.unit}`,\n              fontWeight,\n              fontStyle: fontStyle.includes('italic') ? 'italic' : 'normal',\n              letterSpacing: letterSpacing == null ? 'normal' : `${letterSpacing}px`,\n              textTransform: textTransform.includes('uppercase') ? 'uppercase' : 'none',\n            }\n          }),\n        ),\n        useStyle({\n          '&:hover': {\n            backgroundColor: 'rgba(0, 0, 0, 0.04)',\n          },\n        }),\n        className,\n      )}\n    />\n  )\n}\n\ntype Props = Omit<ComponentPropsWithoutRef<typeof Button>, 'textColor' | 'color'> & {\n  label: string\n  caret?: 'caret' | 'plus' | 'arrow-down' | 'chevron-down'\n  links?: Array<{\n    id: string\n    payload: ComponentPropsWithoutRef<typeof DropDownItem> & {\n      link?: LinkData\n      label: string\n    }\n  }>\n  textColor?: ResponsiveColorValue\n  color?: ResponsiveColorValue\n}\n\nexport default function DropDownButton({\n  label,\n  caret = 'caret',\n  links = [],\n  textColor,\n  color,\n  ...restOfProps\n}: Props): JSX.Element {\n  const container = useRef<HTMLDivElement>(null)\n  const [position, setPosition] = useState<Position>('left')\n\n  useIsomorphicLayoutEffect(() => {\n    if (\n      container.current &&\n      container.current.ownerDocument.defaultView!.innerWidth <\n        container.current.offsetLeft + DROP_DOWN_MENU_WIDTH\n    ) {\n      setPosition('right')\n    } else {\n      setPosition('left')\n    }\n  }, [setPosition])\n\n  return (\n    <DropDownContainer ref={container}>\n      <Button\n        {...restOfProps}\n        textColor={useResponsiveColor(textColor)}\n        color={useResponsiveColor(color)}\n      >\n        <div style={{ display: 'flex', alignItems: 'center' }}>\n          <span style={{ marginRight: 6 }}>{label}</span>\n          <span style={{ display: 'inline-flex', fill: 'currentColor' }}>\n            {caret === 'caret' && <CaretDown8 />}\n            {caret === 'plus' && <Plus8 />}\n            {caret === 'arrow-down' && <ArrowDown8 />}\n            {caret === 'chevron-down' && <ChevronDown8 />}\n          </span>\n        </div>\n      </Button>\n      <DropDownMenu position={position}>\n        {links.map(({ id, payload }) => (\n          <DropDownItem {...payload} key={id}>\n            {payload.label}\n          </DropDownItem>\n        ))}\n      </DropDownMenu>\n    </DropDownContainer>\n  )\n}\n"],"mappings":"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","names":["import_react","DropDownContainer","color","textStyle","Button"]}
+{"version":3,"sources":["../../../../../../../src/components/builtin/Navigation/components/DropDownButton/index.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, ForwardedRef, forwardRef, useRef, useState } from 'react'\n\nimport { CaretDown8 } from '../../../../icons/CaretDown8'\nimport { Plus8 } from '../../../../icons/Plus8'\nimport { ArrowDown8 } from '../../../../icons/ArrowDown8'\nimport { ChevronDown8 } from '../../../../icons/ChevronDown8'\nimport { TextStyleValue } from '../../../../../prop-controllers/descriptors'\nimport { colorToString } from '../../../../utils/colorToString'\nimport { useResponsiveColor } from '../../../../hooks'\n\nimport { Link } from '../../../../shared/Link'\nimport Button from '../../../Button'\nimport { useIsomorphicLayoutEffect } from '../../../../hooks/useIsomorphicLayoutEffect'\nimport { cx, keyframes } from '@emotion/css'\nimport { useStyle } from '../../../../../runtimes/react/use-style'\nimport { useResponsiveStyle, useResponsiveTextStyle } from '../../../../utils/responsive-style'\nimport { LinkData, ResponsiveColorData } from '@makeswift/prop-controllers'\n\nconst DROP_DOWN_MENU_WIDTH = 200\n\ntype Position = 'left' | 'right'\n\nconst DROP_DOWN_MENU_CLASS_NAME = 'drop-down-menu'\n\ntype DropDownMenuBaseProps = {\n  position: Position\n}\n\ntype DropDownMenuProps = DropDownMenuBaseProps &\n  Omit<ComponentPropsWithoutRef<'div'>, keyof DropDownMenuBaseProps>\n\nfunction DropDownMenu({ className, position, ...restOfProps }: DropDownMenuProps) {\n  return (\n    <div\n      {...restOfProps}\n      className={cx(\n        DROP_DOWN_MENU_CLASS_NAME,\n        useStyle({\n          position: 'absolute',\n          top: '100%',\n          left: position === 'left' ? 0 : 'auto',\n          right: position === 'right' ? 0 : 'auto',\n          background: '#fff',\n          margin: 0,\n          padding: '8px 0',\n          borderRadius: 4,\n          boxShadow: '0 3px 10px rgba(0, 0, 0, 0.15)',\n          width: DROP_DOWN_MENU_WIDTH,\n          zIndex: 99,\n          listStyle: 'none',\n          overflow: 'hidden',\n          transformOrigin: '50% 0',\n          willChange: 'transform, opacity',\n          transformStyle: 'preserve-3d',\n          display: 'none',\n        }),\n        className,\n      )}\n    />\n  )\n}\n\nconst dropIn = keyframes`\n  0% {\n      opacity: 0;\n      transform: rotateX(-20deg);\n  }\n  100% {\n      opacity: 1;\n      transform: none;\n  }\n`\n\ntype DropDownContainerProps = ComponentPropsWithoutRef<'div'>\n\nconst DropDownContainer = forwardRef(function DropDownContainer(\n  { className, ...restOfProps }: DropDownContainerProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <div\n      {...restOfProps}\n      ref={ref}\n      className={cx(\n        useStyle({\n          position: 'relative',\n          [`&:hover .${DROP_DOWN_MENU_CLASS_NAME}`]: {\n            display: 'block',\n            animation: `${dropIn} 0.25s`,\n          },\n        }),\n        className,\n      )}\n    />\n  )\n})\n\ntype BaseDropDownItemProps = {\n  className?: string\n  color?: ResponsiveColorData\n  textStyle?: TextStyleValue\n}\n\ntype DropDownItemProps = BaseDropDownItemProps &\n  Omit<ComponentPropsWithoutRef<typeof Link>, keyof BaseDropDownItemProps>\n\nfunction DropDownItem({ className, color, textStyle, ...restOfProps }: DropDownItemProps) {\n  const colorData = useResponsiveColor(color)\n\n  return (\n    <Link\n      {...restOfProps}\n      className={cx(\n        useStyle({\n          display: 'block',\n          textDecoration: 'none',\n          lineHeight: 1.4,\n          padding: '8px 16px',\n          color: 'black',\n          backgroundColor: 'transparent',\n          transition: 'background-color 0.2s',\n        }),\n        useStyle(useResponsiveTextStyle(textStyle)),\n        useStyle(\n          useResponsiveStyle([colorData, textStyle] as const, ([color, textStyle = {}]) => {\n            const fontSize = textStyle.fontSize || { value: 14, unit: 'px' }\n            const fontWeight = textStyle.fontWeight == null ? 'normal' : textStyle.fontWeight\n            const fontStyle = textStyle.fontStyle || []\n            const letterSpacing = textStyle.letterSpacing == null ? null : textStyle.letterSpacing\n            const textTransform = textStyle.textTransform || []\n\n            return {\n              color: color == null ? 'black' : colorToString(color),\n              fontSize: `${fontSize.value}${fontSize.unit}`,\n              fontWeight,\n              fontStyle: fontStyle.includes('italic') ? 'italic' : 'normal',\n              letterSpacing: letterSpacing == null ? 'normal' : `${letterSpacing}px`,\n              textTransform: textTransform.includes('uppercase') ? 'uppercase' : 'none',\n            }\n          }),\n        ),\n        useStyle({\n          '&:hover': {\n            backgroundColor: 'rgba(0, 0, 0, 0.04)',\n          },\n        }),\n        className,\n      )}\n    />\n  )\n}\n\ntype Props = Omit<ComponentPropsWithoutRef<typeof Button>, 'textColor' | 'color'> & {\n  label: string\n  caret?: 'caret' | 'plus' | 'arrow-down' | 'chevron-down'\n  links?: Array<{\n    id: string\n    payload: ComponentPropsWithoutRef<typeof DropDownItem> & {\n      link?: LinkData\n      label: string\n    }\n  }>\n  textColor?: ResponsiveColorData\n  color?: ResponsiveColorData\n}\n\nexport default function DropDownButton({\n  label,\n  caret = 'caret',\n  links = [],\n  textColor,\n  color,\n  ...restOfProps\n}: Props): JSX.Element {\n  const container = useRef<HTMLDivElement>(null)\n  const [position, setPosition] = useState<Position>('left')\n\n  useIsomorphicLayoutEffect(() => {\n    if (\n      container.current &&\n      container.current.ownerDocument.defaultView!.innerWidth <\n        container.current.offsetLeft + DROP_DOWN_MENU_WIDTH\n    ) {\n      setPosition('right')\n    } else {\n      setPosition('left')\n    }\n  }, [setPosition])\n\n  return (\n    <DropDownContainer ref={container}>\n      <Button\n        {...restOfProps}\n        textColor={useResponsiveColor(textColor)}\n        color={useResponsiveColor(color)}\n      >\n        <div style={{ display: 'flex', alignItems: 'center' }}>\n          <span style={{ marginRight: 6 }}>{label}</span>\n          <span style={{ display: 'inline-flex', fill: 'currentColor' }}>\n            {caret === 'caret' && <CaretDown8 />}\n            {caret === 'plus' && <Plus8 />}\n            {caret === 'arrow-down' && <ArrowDown8 />}\n            {caret === 'chevron-down' && <ChevronDown8 />}\n          </span>\n        </div>\n      </Button>\n      <DropDownMenu position={position}>\n        {links.map(({ id, payload }) => (\n          <DropDownItem {...payload} key={id}>\n            {payload.label}\n          </DropDownItem>\n        ))}\n      </DropDownMenu>\n    </DropDownContainer>\n  )\n}\n"],"mappings":"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","names":["import_react","DropDownContainer","color","textStyle","Button"]}

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

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

package/dist/cjs/components/builtin/Navigation/components/MobileMenu/components/MobileDropDownButton/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../src/components/builtin/Navigation/components/MobileMenu/components/MobileDropDownButton/index.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, useState } from 'react'\n\nimport {\n  ResponsiveColorValue,\n  TextStyleValue,\n} from '../../../../../../../prop-controllers/descriptors'\nimport { LinkData } from '@makeswift/prop-controllers'\n\nimport { colorToString } from '../../../../../../utils/colorToString'\nimport { useResponsiveColor } from '../../../../../../hooks'\n\nimport { CaretDown8 } from '../../../../../../icons/CaretDown8'\nimport { Plus8 } from '../../../../../../icons/Plus8'\nimport { ArrowDown8 } from '../../../../../../icons/ArrowDown8'\nimport { ChevronDown8 } from '../../../../../../icons/ChevronDown8'\n\nimport { Link } from '../../../../../../shared/Link'\nimport Button from '../../../../../Button'\nimport { cx } from '@emotion/css'\nimport { useStyle } from '../../../../../../../runtimes/react/use-style'\nimport {\n  useResponsiveStyle,\n  useResponsiveTextStyle,\n} from '../../../../../../utils/responsive-style'\n\ntype DropDownMenuBaseProps = {\n  className?: string\n  open: boolean\n}\n\ntype DropDownMenuProps = DropDownMenuBaseProps &\n  Omit<ComponentPropsWithoutRef<'div'>, keyof DropDownMenuBaseProps>\n\nfunction DropDownMenu({ className, open, ...restOfProps }: DropDownMenuProps) {\n  return (\n    <div\n      {...restOfProps}\n      className={cx(\n        useStyle({ display: open ? 'flex' : 'none', flexDirection: 'column', padding: 8 }),\n        className,\n      )}\n    />\n  )\n}\n\ntype ButtonLinkBaseProps = {\n  className?: string\n}\n\ntype ButtonLinkProps = ButtonLinkBaseProps &\n  Omit<ComponentPropsWithoutRef<typeof Button>, keyof ButtonLinkBaseProps>\n\nfunction ButtonLink({ className, ...restOfProps }: ButtonLinkProps) {\n  return <Button {...restOfProps} className={cx(useStyle({ margin: '8px 0' }), className)} />\n}\n\ntype BaseDropDownItemProps = {\n  className?: string\n  color?: ResponsiveColorValue\n  textStyle?: TextStyleValue\n}\n\ntype DropDownItemProps = BaseDropDownItemProps &\n  Omit<ComponentPropsWithoutRef<typeof Link>, keyof BaseDropDownItemProps>\n\nfunction DropDownItem({ color, className, textStyle, ...restOfProps }: DropDownItemProps) {\n  const colorData = useResponsiveColor(color)\n\n  return (\n    <Link\n      {...restOfProps}\n      className={cx(\n        useStyle({\n          textDecoration: 'none',\n          lineHeight: 1.4,\n          padding: '8px 16px',\n          color: 'black',\n        }),\n        useStyle(useResponsiveTextStyle(textStyle)),\n        useStyle(\n          useResponsiveStyle([colorData] as const, ([color]) => ({\n            color: color == null ? 'black' : colorToString(color),\n          })),\n        ),\n        className,\n      )}\n    />\n  )\n}\n\ntype Props = Omit<ComponentPropsWithoutRef<typeof Button>, 'textColor' | 'color'> & {\n  label: string\n  links?: Array<{\n    id: string\n    payload: ComponentPropsWithoutRef<typeof DropDownItem> & {\n      link?: LinkData\n      label: string\n    }\n  }>\n  onClose?: () => unknown\n  caret?: string\n  textColor?: ResponsiveColorValue\n  color?: ResponsiveColorValue\n}\n\nexport default function MobileDropDownButton({\n  label,\n  caret,\n  links = [],\n  onClose = () => {},\n  color,\n  textColor,\n  ...restOfProps\n}: Props): JSX.Element {\n  const [isOpen, setIsOpen] = useState(false)\n  return (\n    <>\n      <ButtonLink\n        {...restOfProps}\n        textColor={useResponsiveColor(textColor)}\n        color={useResponsiveColor(color)}\n        onPointerDown={() => setIsOpen(prev => !prev)}\n      >\n        <div style={{ display: 'flex', alignItems: 'center' }}>\n          <span style={{ marginRight: 6 }}>{label}</span>\n          <span style={{ display: 'inline-flex', fill: 'currentColor' }}>\n            <>\n              {caret === 'caret' && <CaretDown8 />}\n              {caret === 'plus' && <Plus8 />}\n              {caret === 'arrow-down' && <ArrowDown8 />}\n              {caret === 'chevron-down' && <ChevronDown8 />}\n            </>\n          </span>\n        </div>\n      </ButtonLink>\n      <DropDownMenu open={isOpen}>\n        {links.map(({ id, payload }) => (\n          <DropDownItem {...payload} key={id} onClick={onClose}>\n            {payload.label}\n          </DropDownItem>\n        ))}\n      </DropDownMenu>\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAmCI;AAsGM;AAzIV,IAAAA,gBAAmD;AAQnD,2BAA8B;AAC9B,mBAAmC;AAEnC,wBAA2B;AAC3B,mBAAsB;AACtB,wBAA2B;AAC3B,0BAA6B;AAE7B,kBAAqB;AACrB,oBAAmB;AACnB,iBAAmB;AACnB,uBAAyB;AACzB,8BAGO;AAUP,SAAS,aAAa,EAAE,WAAW,MAAM,GAAG,YAAY,GAAsB;AAC5E,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAW;AAAA,YACT,2BAAS,EAAE,SAAS,OAAO,SAAS,QAAQ,eAAe,UAAU,SAAS,EAAE,CAAC;AAAA,QACjF;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AASA,SAAS,WAAW,EAAE,WAAW,GAAG,YAAY,GAAoB;AAClE,SAAO,4CAAC,cAAAC,SAAA,EAAQ,GAAG,aAAa,eAAW,mBAAG,2BAAS,EAAE,QAAQ,QAAQ,CAAC,GAAG,SAAS,GAAG;AAC3F;AAWA,SAAS,aAAa,EAAE,OAAO,WAAW,WAAW,GAAG,YAAY,GAAsB;AACxF,QAAM,gBAAY,iCAAmB,KAAK;AAE1C,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAW;AAAA,YACT,2BAAS;AAAA,UACP,gBAAgB;AAAA,UAChB,YAAY;AAAA,UACZ,SAAS;AAAA,UACT,OAAO;AAAA,QACT,CAAC;AAAA,YACD,+BAAS,gDAAuB,SAAS,CAAC;AAAA,YAC1C;AAAA,cACE,4CAAmB,CAAC,SAAS,GAAY,CAAC,CAACC,MAAK,OAAO;AAAA,YACrD,OAAOA,UAAS,OAAO,cAAU,oCAAcA,MAAK;AAAA,UACtD,EAAE;AAAA,QACJ;AAAA,QACA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAiBe,SAAR,qBAAsC;AAAA,EAC3C;AAAA,EACA;AAAA,EACA,QAAQ,CAAC;AAAA,EACT,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAuB;AACrB,QAAM,CAAC,QAAQ,SAAS,QAAI,wBAAS,KAAK;AAC1C,SACE,4EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,eAAW,iCAAmB,SAAS;AAAA,QACvC,WAAO,iCAAmB,KAAK;AAAA,QAC/B,eAAe,MAAM,UAAU,UAAQ,CAAC,IAAI;AAAA,QAE5C,uDAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,SAAS,GAClD;AAAA,sDAAC,UAAK,OAAO,EAAE,aAAa,EAAE,GAAI,iBAAM;AAAA,UACxC,4CAAC,UAAK,OAAO,EAAE,SAAS,eAAe,MAAM,eAAe,GAC1D,sFACG;AAAA,sBAAU,WAAW,4CAAC,gCAAW;AAAA,YACjC,UAAU,UAAU,4CAAC,sBAAM;AAAA,YAC3B,UAAU,gBAAgB,4CAAC,gCAAW;AAAA,YACtC,UAAU,kBAAkB,4CAAC,oCAAa;AAAA,aAC7C,GACF;AAAA,WACF;AAAA;AAAA,IACF;AAAA,IACA,4CAAC,gBAAa,MAAM,QACjB,gBAAM,IAAI,CAAC,EAAE,IAAI,QAAQ,MACxB,gDAAC,gBAAc,GAAG,SAAS,KAAK,IAAI,SAAS,WAC1C,QAAQ,KACX,CACD,GACH;AAAA,KACF;AAEJ;","names":["import_react","Button","color"]}
+{"version":3,"sources":["../../../../../../../../../src/components/builtin/Navigation/components/MobileMenu/components/MobileDropDownButton/index.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, useState } from 'react'\n\nimport { TextStyleValue } from '../../../../../../../prop-controllers/descriptors'\nimport { LinkData, ResponsiveColorData } from '@makeswift/prop-controllers'\n\nimport { colorToString } from '../../../../../../utils/colorToString'\nimport { useResponsiveColor } from '../../../../../../hooks'\n\nimport { CaretDown8 } from '../../../../../../icons/CaretDown8'\nimport { Plus8 } from '../../../../../../icons/Plus8'\nimport { ArrowDown8 } from '../../../../../../icons/ArrowDown8'\nimport { ChevronDown8 } from '../../../../../../icons/ChevronDown8'\n\nimport { Link } from '../../../../../../shared/Link'\nimport Button from '../../../../../Button'\nimport { cx } from '@emotion/css'\nimport { useStyle } from '../../../../../../../runtimes/react/use-style'\nimport {\n  useResponsiveStyle,\n  useResponsiveTextStyle,\n} from '../../../../../../utils/responsive-style'\n\ntype DropDownMenuBaseProps = {\n  className?: string\n  open: boolean\n}\n\ntype DropDownMenuProps = DropDownMenuBaseProps &\n  Omit<ComponentPropsWithoutRef<'div'>, keyof DropDownMenuBaseProps>\n\nfunction DropDownMenu({ className, open, ...restOfProps }: DropDownMenuProps) {\n  return (\n    <div\n      {...restOfProps}\n      className={cx(\n        useStyle({ display: open ? 'flex' : 'none', flexDirection: 'column', padding: 8 }),\n        className,\n      )}\n    />\n  )\n}\n\ntype ButtonLinkBaseProps = {\n  className?: string\n}\n\ntype ButtonLinkProps = ButtonLinkBaseProps &\n  Omit<ComponentPropsWithoutRef<typeof Button>, keyof ButtonLinkBaseProps>\n\nfunction ButtonLink({ className, ...restOfProps }: ButtonLinkProps) {\n  return <Button {...restOfProps} className={cx(useStyle({ margin: '8px 0' }), className)} />\n}\n\ntype BaseDropDownItemProps = {\n  className?: string\n  color?: ResponsiveColorData\n  textStyle?: TextStyleValue\n}\n\ntype DropDownItemProps = BaseDropDownItemProps &\n  Omit<ComponentPropsWithoutRef<typeof Link>, keyof BaseDropDownItemProps>\n\nfunction DropDownItem({ color, className, textStyle, ...restOfProps }: DropDownItemProps) {\n  const colorData = useResponsiveColor(color)\n\n  return (\n    <Link\n      {...restOfProps}\n      className={cx(\n        useStyle({\n          textDecoration: 'none',\n          lineHeight: 1.4,\n          padding: '8px 16px',\n          color: 'black',\n        }),\n        useStyle(useResponsiveTextStyle(textStyle)),\n        useStyle(\n          useResponsiveStyle([colorData] as const, ([color]) => ({\n            color: color == null ? 'black' : colorToString(color),\n          })),\n        ),\n        className,\n      )}\n    />\n  )\n}\n\ntype Props = Omit<ComponentPropsWithoutRef<typeof Button>, 'textColor' | 'color'> & {\n  label: string\n  links?: Array<{\n    id: string\n    payload: ComponentPropsWithoutRef<typeof DropDownItem> & {\n      link?: LinkData\n      label: string\n    }\n  }>\n  onClose?: () => unknown\n  caret?: string\n  textColor?: ResponsiveColorData\n  color?: ResponsiveColorData\n}\n\nexport default function MobileDropDownButton({\n  label,\n  caret,\n  links = [],\n  onClose = () => {},\n  color,\n  textColor,\n  ...restOfProps\n}: Props): JSX.Element {\n  const [isOpen, setIsOpen] = useState(false)\n  return (\n    <>\n      <ButtonLink\n        {...restOfProps}\n        textColor={useResponsiveColor(textColor)}\n        color={useResponsiveColor(color)}\n        onPointerDown={() => setIsOpen(prev => !prev)}\n      >\n        <div style={{ display: 'flex', alignItems: 'center' }}>\n          <span style={{ marginRight: 6 }}>{label}</span>\n          <span style={{ display: 'inline-flex', fill: 'currentColor' }}>\n            <>\n              {caret === 'caret' && <CaretDown8 />}\n              {caret === 'plus' && <Plus8 />}\n              {caret === 'arrow-down' && <ArrowDown8 />}\n              {caret === 'chevron-down' && <ChevronDown8 />}\n            </>\n          </span>\n        </div>\n      </ButtonLink>\n      <DropDownMenu open={isOpen}>\n        {links.map(({ id, payload }) => (\n          <DropDownItem {...payload} key={id} onClick={onClose}>\n            {payload.label}\n          </DropDownItem>\n        ))}\n      </DropDownMenu>\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAgCI;AAsGM;AAtIV,IAAAA,gBAAmD;AAKnD,2BAA8B;AAC9B,mBAAmC;AAEnC,wBAA2B;AAC3B,mBAAsB;AACtB,wBAA2B;AAC3B,0BAA6B;AAE7B,kBAAqB;AACrB,oBAAmB;AACnB,iBAAmB;AACnB,uBAAyB;AACzB,8BAGO;AAUP,SAAS,aAAa,EAAE,WAAW,MAAM,GAAG,YAAY,GAAsB;AAC5E,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAW;AAAA,YACT,2BAAS,EAAE,SAAS,OAAO,SAAS,QAAQ,eAAe,UAAU,SAAS,EAAE,CAAC;AAAA,QACjF;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AASA,SAAS,WAAW,EAAE,WAAW,GAAG,YAAY,GAAoB;AAClE,SAAO,4CAAC,cAAAC,SAAA,EAAQ,GAAG,aAAa,eAAW,mBAAG,2BAAS,EAAE,QAAQ,QAAQ,CAAC,GAAG,SAAS,GAAG;AAC3F;AAWA,SAAS,aAAa,EAAE,OAAO,WAAW,WAAW,GAAG,YAAY,GAAsB;AACxF,QAAM,gBAAY,iCAAmB,KAAK;AAE1C,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAW;AAAA,YACT,2BAAS;AAAA,UACP,gBAAgB;AAAA,UAChB,YAAY;AAAA,UACZ,SAAS;AAAA,UACT,OAAO;AAAA,QACT,CAAC;AAAA,YACD,+BAAS,gDAAuB,SAAS,CAAC;AAAA,YAC1C;AAAA,cACE,4CAAmB,CAAC,SAAS,GAAY,CAAC,CAACC,MAAK,OAAO;AAAA,YACrD,OAAOA,UAAS,OAAO,cAAU,oCAAcA,MAAK;AAAA,UACtD,EAAE;AAAA,QACJ;AAAA,QACA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAiBe,SAAR,qBAAsC;AAAA,EAC3C;AAAA,EACA;AAAA,EACA,QAAQ,CAAC;AAAA,EACT,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAuB;AACrB,QAAM,CAAC,QAAQ,SAAS,QAAI,wBAAS,KAAK;AAC1C,SACE,4EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,eAAW,iCAAmB,SAAS;AAAA,QACvC,WAAO,iCAAmB,KAAK;AAAA,QAC/B,eAAe,MAAM,UAAU,UAAQ,CAAC,IAAI;AAAA,QAE5C,uDAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,SAAS,GAClD;AAAA,sDAAC,UAAK,OAAO,EAAE,aAAa,EAAE,GAAI,iBAAM;AAAA,UACxC,4CAAC,UAAK,OAAO,EAAE,SAAS,eAAe,MAAM,eAAe,GAC1D,sFACG;AAAA,sBAAU,WAAW,4CAAC,gCAAW;AAAA,YACjC,UAAU,UAAU,4CAAC,sBAAM;AAAA,YAC3B,UAAU,gBAAgB,4CAAC,gCAAW;AAAA,YACtC,UAAU,kBAAkB,4CAAC,oCAAa;AAAA,aAC7C,GACF;AAAA,WACF;AAAA;AAAA,IACF;AAAA,IACA,4CAAC,gBAAa,MAAM,QACjB,gBAAM,IAAI,CAAC,EAAE,IAAI,QAAQ,MACxB,gDAAC,gBAAc,GAAG,SAAS,KAAK,IAAI,SAAS,WAC1C,QAAQ,KACX,CACD,GACH;AAAA,KACF;AAEJ;","names":["import_react","Button","color"]}

package/dist/cjs/components/builtin/Navigation/components/MobileMenu/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/components/builtin/Navigation/components/MobileMenu/index.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, Fragment } from 'react'\n\nimport {\n  ResponsiveValue,\n  NavigationLinksValue,\n  NavigationButton as NavigationButtonValue,\n} from '../../../../../prop-controllers/descriptors'\nimport { ColorValue as Color } from '../../../../utils/types'\nimport { colorToString } from '../../../../utils/colorToString'\nimport { Times16 } from '../../../../icons/Times16'\n\nimport Button from '../../../Button'\nimport DropDownButton from './components/MobileDropDownButton'\nimport { ResponsiveColor } from '../../../../../runtimes/react/controls'\nimport { useResponsiveColor } from '../../../../hooks'\nimport { cx } from '@emotion/css'\nimport { useStyle } from '../../../../../runtimes/react/use-style'\nimport { useResponsiveStyle } from '../../../../utils/responsive-style'\n\ntype NavigationButtonProps = NavigationButtonValue['payload'] &\n  Omit<ComponentPropsWithoutRef<typeof Button>, 'color' | 'textColor'>\n\nfunction ButtonLink({\n  className,\n  textColor,\n  color,\n  ...restOfProps\n}: NavigationButtonProps): JSX.Element {\n  return (\n    <Button\n      {...restOfProps}\n      className={cx(useStyle({ margin: '8px 0' }), className)}\n      textColor={useResponsiveColor(textColor)}\n      color={useResponsiveColor(color)}\n    />\n  )\n}\n\ntype ContainerBaseProps = {\n  className?: string\n  animation?: ResponsiveValue<'coverRight' | 'coverLeft'>\n  backgroundColor?: ResponsiveValue<Color> | null\n  open: boolean\n}\n\ntype ContainerProps = ContainerBaseProps &\n  Omit<ComponentPropsWithoutRef<'div'>, keyof ContainerBaseProps>\n\nfunction Container({\n  className,\n  animation,\n  backgroundColor,\n  open,\n  ...restOfProps\n}: ContainerProps) {\n  return (\n    <div\n      {...restOfProps}\n      className={cx(\n        useStyle({\n          position: 'fixed',\n          flexDirection: 'column',\n          width: '100%',\n          padding: '40px 15px',\n          transition: 'transform 300ms ease-in-out',\n          overflowY: 'auto',\n          zIndex: 9999,\n          maxWidth: 575,\n        }),\n        useStyle(\n          useResponsiveStyle(\n            [animation, backgroundColor] as const,\n            ([animation, backgroundColor]) => {\n              if (animation == null) return { display: 'none' }\n\n              return {\n                display: 'flex',\n                backgroundColor: backgroundColor == null ? 'black' : colorToString(backgroundColor),\n                transform: open\n                  ? `translate3d(0,0,0)`\n                  : `translate3d(${{ coverRight: '', coverLeft: '-' }[animation]}100%, 0, 0)`,\n                ...{\n                  coverRight: { top: 0, bottom: 0, right: 0 },\n                  coverLeft: { top: 0, bottom: 0, left: 0 },\n                }[animation],\n              }\n            },\n          ),\n        ),\n        className,\n      )}\n    />\n  )\n}\n\ntype CloseIconContainerBaseProps = {\n  className?: string\n  color?: ResponsiveColor | null\n}\n\ntype CloseIconContainerProps = CloseIconContainerBaseProps &\n  Omit<ComponentPropsWithoutRef<'button'>, keyof CloseIconContainerBaseProps>\n\nfunction CloseIconContainer({ className, color, ...restOfProps }: CloseIconContainerProps) {\n  return (\n    <button\n      {...restOfProps}\n      className={cx(\n        useStyle({\n          position: 'absolute',\n          top: 15,\n          right: 15,\n          padding: 0,\n          border: 0,\n          outline: 0,\n          background: 'none',\n          fill: 'currentcolor',\n        }),\n        useStyle(\n          useResponsiveStyle([color] as const, ([color]) => ({\n            color: color == null ? 'rgba(161, 168, 194, 0.5)' : colorToString(color),\n          })),\n        ),\n        className,\n      )}\n    />\n  )\n}\n\ntype Props = {\n  animation?: ResponsiveValue<'coverRight' | 'coverLeft'>\n  backgroundColor?: ResponsiveColor | null\n  closeIconColor?: ResponsiveColor | null\n  links?: NavigationLinksValue\n  onClose?: () => unknown\n  open?: boolean\n}\n\nexport default function MobileMenu({\n  animation,\n  backgroundColor,\n  open = false,\n  closeIconColor,\n  links = [],\n  onClose = () => {},\n}: Props): JSX.Element {\n  return (\n    <Container animation={animation} backgroundColor={backgroundColor} open={open}>\n      <CloseIconContainer color={closeIconColor} onClick={onClose}>\n        <Times16 />\n      </CloseIconContainer>\n      <div\n        style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', flexShrink: 0 }}\n      >\n        {links.map(link => (\n          <Fragment key={link.id}>\n            {link.type === 'button' && (\n              <ButtonLink {...link.payload} onClick={onClose}>\n                {link.payload.label}\n              </ButtonLink>\n            )}\n            {link.type === 'dropdown' && <DropDownButton {...link.payload} onClose={onClose} />}\n          </Fragment>\n        ))}\n      </div>\n    </Container>\n  )\n}\n"],"mappings":"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","names":["Button","animation","backgroundColor","color","DropDownButton"]}
+{"version":3,"sources":["../../../../../../../src/components/builtin/Navigation/components/MobileMenu/index.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, Fragment } from 'react'\n\nimport {\n  NavigationLinksValue,\n  NavigationButton as NavigationButtonValue,\n} from '../../../../../prop-controllers/descriptors'\nimport { ColorValue as Color } from '../../../../utils/types'\nimport { colorToString } from '../../../../utils/colorToString'\nimport { Times16 } from '../../../../icons/Times16'\n\nimport Button from '../../../Button'\nimport DropDownButton from './components/MobileDropDownButton'\nimport { ResponsiveColor } from '../../../../../runtimes/react/controls'\nimport { useResponsiveColor } from '../../../../hooks'\nimport { cx } from '@emotion/css'\nimport { useStyle } from '../../../../../runtimes/react/use-style'\nimport { useResponsiveStyle } from '../../../../utils/responsive-style'\nimport { ResponsiveValue } from '@makeswift/prop-controllers'\n\ntype NavigationButtonProps = NavigationButtonValue['payload'] &\n  Omit<ComponentPropsWithoutRef<typeof Button>, 'color' | 'textColor'>\n\nfunction ButtonLink({\n  className,\n  textColor,\n  color,\n  ...restOfProps\n}: NavigationButtonProps): JSX.Element {\n  return (\n    <Button\n      {...restOfProps}\n      className={cx(useStyle({ margin: '8px 0' }), className)}\n      textColor={useResponsiveColor(textColor)}\n      color={useResponsiveColor(color)}\n    />\n  )\n}\n\ntype ContainerBaseProps = {\n  className?: string\n  animation?: ResponsiveValue<'coverRight' | 'coverLeft'>\n  backgroundColor?: ResponsiveValue<Color> | null\n  open: boolean\n}\n\ntype ContainerProps = ContainerBaseProps &\n  Omit<ComponentPropsWithoutRef<'div'>, keyof ContainerBaseProps>\n\nfunction Container({\n  className,\n  animation,\n  backgroundColor,\n  open,\n  ...restOfProps\n}: ContainerProps) {\n  return (\n    <div\n      {...restOfProps}\n      className={cx(\n        useStyle({\n          position: 'fixed',\n          flexDirection: 'column',\n          width: '100%',\n          padding: '40px 15px',\n          transition: 'transform 300ms ease-in-out',\n          overflowY: 'auto',\n          zIndex: 9999,\n          maxWidth: 575,\n        }),\n        useStyle(\n          useResponsiveStyle(\n            [animation, backgroundColor] as const,\n            ([animation, backgroundColor]) => {\n              if (animation == null) return { display: 'none' }\n\n              return {\n                display: 'flex',\n                backgroundColor: backgroundColor == null ? 'black' : colorToString(backgroundColor),\n                transform: open\n                  ? `translate3d(0,0,0)`\n                  : `translate3d(${{ coverRight: '', coverLeft: '-' }[animation]}100%, 0, 0)`,\n                ...{\n                  coverRight: { top: 0, bottom: 0, right: 0 },\n                  coverLeft: { top: 0, bottom: 0, left: 0 },\n                }[animation],\n              }\n            },\n          ),\n        ),\n        className,\n      )}\n    />\n  )\n}\n\ntype CloseIconContainerBaseProps = {\n  className?: string\n  color?: ResponsiveColor | null\n}\n\ntype CloseIconContainerProps = CloseIconContainerBaseProps &\n  Omit<ComponentPropsWithoutRef<'button'>, keyof CloseIconContainerBaseProps>\n\nfunction CloseIconContainer({ className, color, ...restOfProps }: CloseIconContainerProps) {\n  return (\n    <button\n      {...restOfProps}\n      className={cx(\n        useStyle({\n          position: 'absolute',\n          top: 15,\n          right: 15,\n          padding: 0,\n          border: 0,\n          outline: 0,\n          background: 'none',\n          fill: 'currentcolor',\n        }),\n        useStyle(\n          useResponsiveStyle([color] as const, ([color]) => ({\n            color: color == null ? 'rgba(161, 168, 194, 0.5)' : colorToString(color),\n          })),\n        ),\n        className,\n      )}\n    />\n  )\n}\n\ntype Props = {\n  animation?: ResponsiveValue<'coverRight' | 'coverLeft'>\n  backgroundColor?: ResponsiveColor | null\n  closeIconColor?: ResponsiveColor | null\n  links?: NavigationLinksValue\n  onClose?: () => unknown\n  open?: boolean\n}\n\nexport default function MobileMenu({\n  animation,\n  backgroundColor,\n  open = false,\n  closeIconColor,\n  links = [],\n  onClose = () => {},\n}: Props): JSX.Element {\n  return (\n    <Container animation={animation} backgroundColor={backgroundColor} open={open}>\n      <CloseIconContainer color={closeIconColor} onClick={onClose}>\n        <Times16 />\n      </CloseIconContainer>\n      <div\n        style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', flexShrink: 0 }}\n      >\n        {links.map(link => (\n          <Fragment key={link.id}>\n            {link.type === 'button' && (\n              <ButtonLink {...link.payload} onClick={onClose}>\n                {link.payload.label}\n              </ButtonLink>\n            )}\n            {link.type === 'dropdown' && <DropDownButton {...link.payload} onClose={onClose} />}\n          </Fragment>\n        ))}\n      </div>\n    </Container>\n  )\n}\n"],"mappings":"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","names":["Button","animation","backgroundColor","color","DropDownButton"]}

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

@@ -54,32 +54,47 @@ function registerComponent(runtime) {
             hidden: links == null || links.length === 0
           };
         }),
-        showLogo: import_prop_controllers.Props.Checkbox({ preset: true, label: "Show logo" }),
+        showLogo: (0, import_prop_controllers2.Checkbox)({ preset: true, label: "Show logo" }),
         logoFile: import_prop_controllers.Props.Image((props) => ({
           label: "Logo",
-          hidden: props.showLogo === false
+          hidden: (0, import_prop_controllers2.getCheckboxPropControllerDataBoolean)(
+            import_prop_controllers2.checkboxPropControllerDataSchema.optional().catch(void 0).parse(props.showLogo)
+          ) === false
         })),
-        logoWidth: import_prop_controllers.Props.ResponsiveLength((props) => ({
-          preset: [
-            {
-              deviceId: (0, import_breakpoints.getBaseBreakpoint)(runtime.getBreakpoints()).id,
-              value: { value: 100, unit: "px" }
-            }
-          ],
+        logoWidth: (0, import_prop_controllers2.ResponsiveLength)((props) => ({
+          // TODO(miguel): We're manually constructing the data here but should be using a factory
+          // function instead. This is because the factory function currently expects a definition
+          // but we don't have one to pass here. Perhaps we should make the factory function not
+          // require the definition and use the latest version when a definition isn't provided.
+          preset: {
+            [import_prop_controllers2.ControlDataTypeKey]: import_prop_controllers2.ResponsiveLengthPropControllerDataV1Type,
+            value: [
+              {
+                deviceId: (0, import_breakpoints.getBaseBreakpoint)(runtime.getBreakpoints()).id,
+                value: { value: 100, unit: "px" }
+              }
+            ]
+          },
           label: "Logo width",
           min: 0,
           max: 1e3,
           // TODO: This is hardcoded value, import it from LengthInputOptions
           options: [{ value: "px", label: "Pixels", icon: "Px16" }],
-          hidden: props.showLogo === false
+          hidden: (0, import_prop_controllers2.getCheckboxPropControllerDataBoolean)(
+            import_prop_controllers2.checkboxPropControllerDataSchema.optional().catch(void 0).parse(props.showLogo)
+          ) === false
         })),
         logoAltText: import_prop_controllers.Props.TextInput((props) => ({
           label: "Logo alt text",
-          hidden: props.showLogo === false
+          hidden: (0, import_prop_controllers2.getCheckboxPropControllerDataBoolean)(
+            import_prop_controllers2.checkboxPropControllerDataSchema.optional().catch(void 0).parse(props.showLogo)
+          ) === false
         })),
         logoLink: (0, import_prop_controllers2.Link)((props) => ({
           label: "Logo on click",
-          hidden: props.showLogo === false
+          hidden: (0, import_prop_controllers2.getCheckboxPropControllerDataBoolean)(
+            import_prop_controllers2.checkboxPropControllerDataSchema.optional().catch(void 0).parse(props.showLogo)
+          ) === false
         })),
         alignment: import_prop_controllers.Props.ResponsiveIconRadioGroup({
           label: "Alignment",
@@ -110,7 +125,7 @@ function registerComponent(runtime) {
             { value: "coverLeft", label: "Cover from left" }
           ]
         }),
-        mobileMenuOpenIconColor: import_prop_controllers.Props.ResponsiveColor((props, device) => {
+        mobileMenuOpenIconColor: (0, import_prop_controllers2.ResponsiveColor)((props, device) => {
           const mobileMenuAnimation = props.mobileMenuAnimation;
           const hidden = !(0, import_breakpoints.findBreakpointOverride)(
             runtime.getBreakpoints(),
@@ -123,7 +138,7 @@ function registerComponent(runtime) {
             hidden
           };
         }),
-        mobileMenuCloseIconColor: import_prop_controllers.Props.ResponsiveColor((props, device) => {
+        mobileMenuCloseIconColor: (0, import_prop_controllers2.ResponsiveColor)((props, device) => {
           const mobileMenuAnimation = props.mobileMenuAnimation;
           const hidden = !(0, import_breakpoints.findBreakpointOverride)(
             runtime.getBreakpoints(),
@@ -136,7 +151,7 @@ function registerComponent(runtime) {
             hidden
           };
         }),
-        mobileMenuBackgroundColor: import_prop_controllers.Props.ResponsiveColor((props, device) => {
+        mobileMenuBackgroundColor: (0, import_prop_controllers2.ResponsiveColor)((props, device) => {
           const mobileMenuAnimation = props.mobileMenuAnimation;
           const hidden = !(0, import_breakpoints.findBreakpointOverride)(
             runtime.getBreakpoints(),
@@ -149,11 +164,11 @@ function registerComponent(runtime) {
             hidden
           };
         }),
-        width: import_prop_controllers.Props.Width({
-          format: import_prop_controllers.Props.Width.Format.ClassName,
+        width: (0, import_prop_controllers2.Width)({
+          format: import_prop_controllers2.Width.Format.ClassName,
           defaultValue: { value: 100, unit: "%" }
         }),
-        margin: import_prop_controllers.Props.Margin({ format: import_prop_controllers.Props.Margin.Format.ClassName })
+        margin: (0, import_prop_controllers2.Margin)({ format: import_prop_controllers2.Margin.Format.ClassName })
       }
     }
   );

package/dist/cjs/components/builtin/Navigation/register.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/builtin/Navigation/register.ts"],"sourcesContent":["import { Props } from '../../../prop-controllers'\nimport { NavigationLinksValue, ResponsiveValue } from '../../../prop-controllers/descriptors'\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 { Link } from '@makeswift/prop-controllers'\n\nexport function registerComponent(runtime: ReactRuntime) {\n  return runtime.registerComponent(\n    lazy(() => import('./Navigation')),\n    {\n      type: MakeswiftComponentType.Navigation,\n      label: 'Navigation',\n      icon: ComponentIcon.Navigation,\n      props: {\n        id: Props.ElementID(),\n        links: Props.NavigationLinks(),\n        linkTextStyle: Props.TextStyle(props => {\n          const links = props.links as NavigationLinksValue\n\n          return {\n            label: 'Link text style',\n            hidden: links == null || links.length === 0,\n          }\n        }),\n        showLogo: Props.Checkbox({ preset: true, label: 'Show logo' }),\n        logoFile: Props.Image(props => ({\n          label: 'Logo',\n          hidden: props.showLogo === false,\n        })),\n        logoWidth: Props.ResponsiveLength(props => ({\n          preset: [\n            {\n              deviceId: getBaseBreakpoint(runtime.getBreakpoints()).id,\n              value: { value: 100, unit: 'px' },\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: props.showLogo === false,\n        })),\n        logoAltText: Props.TextInput(props => ({\n          label: 'Logo alt text',\n          hidden: props.showLogo === false,\n        })),\n        logoLink: Link(props => ({\n          label: 'Logo on click',\n          hidden: props.showLogo === 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: Props.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: Props.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: Props.ResponsiveColor((props, device) => {\n          const mobileMenuAnimation = props.mobileMenuAnimation as ResponsiveValue<string>\n          const hidden = !findBreakpointOverride(\n            runtime.getBreakpoints(),\n            mobileMenuAnimation,\n            device,\n          )\n\n          return {\n            label: 'Open icon color',\n            placeholder: 'rgba(161, 168, 194, 0.5)',\n            hidden,\n          }\n        }),\n        mobileMenuCloseIconColor: Props.ResponsiveColor((props, device) => {\n          const mobileMenuAnimation = props.mobileMenuAnimation as ResponsiveValue<string>\n          const hidden = !findBreakpointOverride(\n            runtime.getBreakpoints(),\n            mobileMenuAnimation,\n            device,\n          )\n\n          return {\n            label: 'Close icon color',\n            placeholder: 'rgba(161, 168, 194, 0.5)',\n            hidden,\n          }\n        }),\n        mobileMenuBackgroundColor: Props.ResponsiveColor((props, device) => {\n          const mobileMenuAnimation = props.mobileMenuAnimation as ResponsiveValue<string>\n          const hidden = !findBreakpointOverride(\n            runtime.getBreakpoints(),\n            mobileMenuAnimation,\n            device,\n          )\n\n          return {\n            label: 'Menu BG color',\n            placeholder: 'black',\n            hidden,\n          }\n        }),\n        width: Props.Width({\n          format: Props.Width.Format.ClassName,\n          defaultValue: { value: 100, unit: '%' },\n        }),\n        margin: Props.Margin({ format: Props.Margin.Format.ClassName }),\n      },\n    },\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAAsB;AAGtB,yBAA0D;AAC1D,uBAAuC;AACvC,6BAA8B;AAC9B,IAAAA,gBAAqB;AACrB,IAAAC,2BAAqB;AAEd,SAAS,kBAAkB,SAAuB;AACvD,SAAO,QAAQ;AAAA,QACb,oBAAK,MAAM,6CAAO,cAAc,GAAC;AAAA,IACjC;AAAA,MACE,MAAM,wCAAuB;AAAA,MAC7B,OAAO;AAAA,MACP,MAAM,qCAAc;AAAA,MACpB,OAAO;AAAA,QACL,IAAI,8BAAM,UAAU;AAAA,QACpB,OAAO,8BAAM,gBAAgB;AAAA,QAC7B,eAAe,8BAAM,UAAU,WAAS;AACtC,gBAAM,QAAQ,MAAM;AAEpB,iBAAO;AAAA,YACL,OAAO;AAAA,YACP,QAAQ,SAAS,QAAQ,MAAM,WAAW;AAAA,UAC5C;AAAA,QACF,CAAC;AAAA,QACD,UAAU,8BAAM,SAAS,EAAE,QAAQ,MAAM,OAAO,YAAY,CAAC;AAAA,QAC7D,UAAU,8BAAM,MAAM,YAAU;AAAA,UAC9B,OAAO;AAAA,UACP,QAAQ,MAAM,aAAa;AAAA,QAC7B,EAAE;AAAA,QACF,WAAW,8BAAM,iBAAiB,YAAU;AAAA,UAC1C,QAAQ;AAAA,YACN;AAAA,cACE,cAAU,sCAAkB,QAAQ,eAAe,CAAC,EAAE;AAAA,cACtD,OAAO,EAAE,OAAO,KAAK,MAAM,KAAK;AAAA,YAClC;AAAA,UACF;AAAA,UACA,OAAO;AAAA,UACP,KAAK;AAAA,UACL,KAAK;AAAA;AAAA,UAEL,SAAS,CAAC,EAAE,OAAO,MAAM,OAAO,UAAU,MAAM,OAAO,CAAC;AAAA,UACxD,QAAQ,MAAM,aAAa;AAAA,QAC7B,EAAE;AAAA,QACF,aAAa,8BAAM,UAAU,YAAU;AAAA,UACrC,OAAO;AAAA,UACP,QAAQ,MAAM,aAAa;AAAA,QAC7B,EAAE;AAAA,QACF,cAAU,+BAAK,YAAU;AAAA,UACvB,OAAO;AAAA,UACP,QAAQ,MAAM,aAAa;AAAA,QAC7B,EAAE;AAAA,QACF,WAAW,8BAAM,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,8BAAM,KAAK;AAAA,UACjB,QAAQ;AAAA,YACN;AAAA,cACE,cAAU,sCAAkB,QAAQ,eAAe,CAAC,EAAE;AAAA,cACtD,OAAO,EAAE,OAAO,IAAI,MAAM,KAAK;AAAA,YACjC;AAAA,UACF;AAAA,UACA,OAAO;AAAA,UACP,KAAK;AAAA,UACL,KAAK;AAAA,UACL,MAAM;AAAA,UACN,cAAc,EAAE,OAAO,GAAG,MAAM,KAAK;AAAA,QACvC,CAAC;AAAA,QACD,qBAAqB,8BAAM,iBAAiB;AAAA,UAC1C,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,8BAAM,gBAAgB,CAAC,OAAO,WAAW;AAChE,gBAAM,sBAAsB,MAAM;AAClC,gBAAM,SAAS,KAAC;AAAA,YACd,QAAQ,eAAe;AAAA,YACvB;AAAA,YACA;AAAA,UACF;AAEA,iBAAO;AAAA,YACL,OAAO;AAAA,YACP,aAAa;AAAA,YACb;AAAA,UACF;AAAA,QACF,CAAC;AAAA,QACD,0BAA0B,8BAAM,gBAAgB,CAAC,OAAO,WAAW;AACjE,gBAAM,sBAAsB,MAAM;AAClC,gBAAM,SAAS,KAAC;AAAA,YACd,QAAQ,eAAe;AAAA,YACvB;AAAA,YACA;AAAA,UACF;AAEA,iBAAO;AAAA,YACL,OAAO;AAAA,YACP,aAAa;AAAA,YACb;AAAA,UACF;AAAA,QACF,CAAC;AAAA,QACD,2BAA2B,8BAAM,gBAAgB,CAAC,OAAO,WAAW;AAClE,gBAAM,sBAAsB,MAAM;AAClC,gBAAM,SAAS,KAAC;AAAA,YACd,QAAQ,eAAe;AAAA,YACvB;AAAA,YACA;AAAA,UACF;AAEA,iBAAO;AAAA,YACL,OAAO;AAAA,YACP,aAAa;AAAA,YACb;AAAA,UACF;AAAA,QACF,CAAC;AAAA,QACD,OAAO,8BAAM,MAAM;AAAA,UACjB,QAAQ,8BAAM,MAAM,OAAO;AAAA,UAC3B,cAAc,EAAE,OAAO,KAAK,MAAM,IAAI;AAAA,QACxC,CAAC;AAAA,QACD,QAAQ,8BAAM,OAAO,EAAE,QAAQ,8BAAM,OAAO,OAAO,UAAU,CAAC;AAAA,MAChE;AAAA,IACF;AAAA,EACF;AACF;","names":["import_react","import_prop_controllers"]}
+{"version":3,"sources":["../../../../../src/components/builtin/Navigation/register.ts"],"sourcesContent":["import { Props } from '../../../prop-controllers'\nimport { NavigationLinksValue, ResponsiveSelectValue } from '../../../prop-controllers/descriptors'\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} from '@makeswift/prop-controllers'\n\nexport function registerComponent(runtime: ReactRuntime) {\n  return runtime.registerComponent(\n    lazy(() => import('./Navigation')),\n    {\n      type: MakeswiftComponentType.Navigation,\n      label: 'Navigation',\n      icon: ComponentIcon.Navigation,\n      props: {\n        id: Props.ElementID(),\n        links: Props.NavigationLinks(),\n        linkTextStyle: Props.TextStyle(props => {\n          const links = props.links as NavigationLinksValue | 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: Props.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: Props.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: Props.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: Props.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          const mobileMenuAnimation = props.mobileMenuAnimation as\n            | ResponsiveSelectValue<string>\n            | undefined\n          const hidden = !findBreakpointOverride(\n            runtime.getBreakpoints(),\n            mobileMenuAnimation,\n            device,\n          )\n\n          return {\n            label: 'Open icon color',\n            placeholder: 'rgba(161, 168, 194, 0.5)',\n            hidden,\n          }\n        }),\n        mobileMenuCloseIconColor: ResponsiveColor((props, device) => {\n          const mobileMenuAnimation = props.mobileMenuAnimation as\n            | ResponsiveSelectValue<string>\n            | undefined\n          const hidden = !findBreakpointOverride(\n            runtime.getBreakpoints(),\n            mobileMenuAnimation,\n            device,\n          )\n\n          return {\n            label: 'Close icon color',\n            placeholder: 'rgba(161, 168, 194, 0.5)',\n            hidden,\n          }\n        }),\n        mobileMenuBackgroundColor: ResponsiveColor((props, device) => {\n          const mobileMenuAnimation = props.mobileMenuAnimation as\n            | ResponsiveSelectValue<string>\n            | undefined\n          const hidden = !findBreakpointOverride(\n            runtime.getBreakpoints(),\n            mobileMenuAnimation,\n            device,\n          )\n\n          return {\n            label: 'Menu BG color',\n            placeholder: 'black',\n            hidden,\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":["import_react","import_prop_controllers"]}

package/dist/cjs/components/builtin/SocialLinks/SocialLinks.js.map

@@ -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 {\n  ResponsiveValue,\n  ElementIDValue,\n  ResponsiveIconRadioGroupValue,\n  ResponsiveSelectValue,\n  GapXValue,\n} 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'\n\ntype Props = {\n  id?: ElementIDValue\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?: GapXValue\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","GutterContainer","SocialLinksPlaceholder","shape","size","hoverStyle","fill","backgroundColor"]}
+{"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 {\n  ElementIDValue,\n  ResponsiveIconRadioGroupValue,\n  ResponsiveSelectValue,\n  GapXValue,\n} 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 { ResponsiveValue } from '@makeswift/prop-controllers'\n\ntype Props = {\n  id?: ElementIDValue\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?: GapXValue\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","GutterContainer","SocialLinksPlaceholder","shape","size","hoverStyle","fill","backgroundColor"]}

package/dist/cjs/components/builtin/SocialLinks/components/SocialLinksPlaceholder/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/components/builtin/SocialLinks/components/SocialLinksPlaceholder/index.tsx"],"sourcesContent":["import { ResponsiveValue, Length } from '../../../../../prop-controllers/descriptors'\nimport { useStyle } from '../../../../../runtimes/react/use-style'\n\nimport GutterContainer from '../../../../shared/GutterContainer'\n\nconst links = [{ id: '1' }, { id: '2' }, { id: '3' }]\n\ntype Props = { gutter?: ResponsiveValue<Length> }\n\nexport default function SocialLinksPlaceholder({ gutter }: Props): JSX.Element {\n  return (\n    <>\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          <PlaceholderLink />\n        </GutterContainer>\n      ))}\n    </>\n  )\n}\n\nfunction PlaceholderLink() {\n  return (\n    <div\n      className={useStyle({\n        width: 44,\n        height: 44,\n        borderRadius: '50%',\n        backgroundColor: 'rgba(161, 168, 194, 0.4)',\n      })}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAWI;AAVJ,uBAAyB;AAEzB,6BAA4B;AAE5B,MAAM,QAAQ,CAAC,EAAE,IAAI,IAAI,GAAG,EAAE,IAAI,IAAI,GAAG,EAAE,IAAI,IAAI,CAAC;AAIrC,SAAR,uBAAwC,EAAE,OAAO,GAAuB;AAC7E,SACE,2EACG,gBAAM,IAAI,CAAC,MAAM,MAChB;AAAA,IAAC,uBAAAA;AAAA,IAAA;AAAA,MAEC;AAAA,MACA,OAAO,MAAM;AAAA,MACb,MAAM,MAAM,MAAM,SAAS;AAAA,MAE3B,sDAAC,mBAAgB;AAAA;AAAA,IALZ,KAAK;AAAA,EAMZ,CACD,GACH;AAEJ;AAEA,SAAS,kBAAkB;AACzB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW,2BAAS;AAAA,QAClB,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,cAAc;AAAA,QACd,iBAAiB;AAAA,MACnB,CAAC;AAAA;AAAA,EACH;AAEJ;","names":["GutterContainer"]}
+{"version":3,"sources":["../../../../../../../src/components/builtin/SocialLinks/components/SocialLinksPlaceholder/index.tsx"],"sourcesContent":["import { LengthData, ResponsiveValue } from '@makeswift/prop-controllers'\nimport { useStyle } from '../../../../../runtimes/react/use-style'\n\nimport GutterContainer from '../../../../shared/GutterContainer'\n\nconst links = [{ id: '1' }, { id: '2' }, { id: '3' }]\n\ntype Props = { gutter?: ResponsiveValue<LengthData> }\n\nexport default function SocialLinksPlaceholder({ gutter }: Props): JSX.Element {\n  return (\n    <>\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          <PlaceholderLink />\n        </GutterContainer>\n      ))}\n    </>\n  )\n}\n\nfunction PlaceholderLink() {\n  return (\n    <div\n      className={useStyle({\n        width: 44,\n        height: 44,\n        borderRadius: '50%',\n        backgroundColor: 'rgba(161, 168, 194, 0.4)',\n      })}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAWI;AAVJ,uBAAyB;AAEzB,6BAA4B;AAE5B,MAAM,QAAQ,CAAC,EAAE,IAAI,IAAI,GAAG,EAAE,IAAI,IAAI,GAAG,EAAE,IAAI,IAAI,CAAC;AAIrC,SAAR,uBAAwC,EAAE,OAAO,GAAuB;AAC7E,SACE,2EACG,gBAAM,IAAI,CAAC,MAAM,MAChB;AAAA,IAAC,uBAAAA;AAAA,IAAA;AAAA,MAEC;AAAA,MACA,OAAO,MAAM;AAAA,MACb,MAAM,MAAM,MAAM,SAAS;AAAA,MAE3B,sDAAC,mBAAgB;AAAA;AAAA,IALZ,KAAK;AAAA,EAMZ,CACD,GACH;AAEJ;AAEA,SAAS,kBAAkB;AACzB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW,2BAAS;AAAA,QAClB,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,cAAc;AAAA,QACd,iBAAiB;AAAA,MACnB,CAAC;AAAA;AAAA,EACH;AAEJ;","names":["GutterContainer"]}

package/dist/cjs/components/builtin/SocialLinks/register.js

@@ -36,6 +36,7 @@ var import_breakpoints = require("../../../state/modules/breakpoints");
 var import_constants = require("../constants");
 var import_components_meta = require("../../../state/modules/components-meta");
 var import_react2 = require("react");
+var import_prop_controllers2 = require("@makeswift/prop-controllers");
 function registerComponent(runtime) {
   return runtime.registerComponent(
     (0, import_react2.lazy)(() => Promise.resolve().then(() => __toESM(require("./SocialLinks")))),
@@ -107,7 +108,7 @@ function registerComponent(runtime) {
             hidden
           };
         }),
-        fill: import_prop_controllers.Props.ResponsiveColor((props) => {
+        fill: (0, import_prop_controllers2.ResponsiveColor)((props) => {
           const links = props.links;
           const hidden = links == null || links.links.length === 0;
           return {
@@ -115,7 +116,7 @@ function registerComponent(runtime) {
             hidden
           };
         }),
-        backgroundColor: import_prop_controllers.Props.ResponsiveColor((props) => {
+        backgroundColor: (0, import_prop_controllers2.ResponsiveColor)((props) => {
           const links = props.links;
           const hidden = links == null || links.links.length === 0;
           return {
@@ -145,12 +146,12 @@ function registerComponent(runtime) {
           step: 1,
           defaultValue: { value: 0, unit: "px" }
         }),
-        width: import_prop_controllers.Props.Width({
-          format: import_prop_controllers.Props.Width.Format.ClassName,
+        width: (0, import_prop_controllers2.Width)({
+          format: import_prop_controllers2.Width.Format.ClassName,
           defaultValue: { value: 100, unit: "%" }
         }),
-        margin: import_prop_controllers.Props.Margin({
-          format: import_prop_controllers.Props.Margin.Format.ClassName,
+        margin: (0, import_prop_controllers2.Margin)({
+          format: import_prop_controllers2.Margin.Format.ClassName,
           preset: [
             {
               deviceId: (0, import_breakpoints.getBaseBreakpoint)(runtime.getBreakpoints()).id,

package/dist/cjs/components/builtin/SocialLinks/register.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/builtin/SocialLinks/register.ts"],"sourcesContent":["import { Props } from '../../../prop-controllers'\nimport { SocialLinksValue } from '../../../prop-controllers/descriptors'\nimport { ReactRuntime } from '../../../runtimes/react'\nimport { getBaseBreakpoint } from '../../../state/modules/breakpoints'\nimport { MakeswiftComponentType } from '../constants'\nimport { ComponentIcon } from '../../../state/modules/components-meta'\nimport { lazy } from 'react'\n\nexport function registerComponent(runtime: ReactRuntime) {\n  return runtime.registerComponent(\n    lazy(() => import('./SocialLinks')),\n    {\n      type: MakeswiftComponentType.SocialLinks,\n      label: 'Social Links',\n      icon: ComponentIcon.SocialLinks,\n      props: {\n        id: Props.ElementID(),\n        links: Props.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 = props.links as SocialLinksValue\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 = props.links as SocialLinksValue\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: Props.ResponsiveSelect(props => {\n          const links = props.links as SocialLinksValue\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: Props.ResponsiveColor(props => {\n          const links = props.links as SocialLinksValue\n          const hidden = links == null || links.links.length === 0\n\n          return {\n            label: 'Icon color',\n            hidden,\n          }\n        }),\n        backgroundColor: Props.ResponsiveColor(props => {\n          const links = props.links as SocialLinksValue\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: Props.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: Props.Width({\n          format: Props.Width.Format.ClassName,\n          defaultValue: { value: 100, unit: '%' },\n        }),\n        margin: Props.Margin({\n          format: Props.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":["import_react"]}
+{"version":3,"sources":["../../../../../src/components/builtin/SocialLinks/register.ts"],"sourcesContent":["import { Props } from '../../../prop-controllers'\nimport { SocialLinksValue } from '../../../prop-controllers/descriptors'\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 { Margin, ResponsiveColor, Width } 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: Props.ElementID(),\n        links: Props.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 = props.links as SocialLinksValue | undefined\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 = props.links as SocialLinksValue | undefined\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: Props.ResponsiveSelect(props => {\n          const links = props.links as SocialLinksValue | undefined\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 = props.links as SocialLinksValue | undefined\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 = props.links as SocialLinksValue | undefined\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: Props.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":["import_react","import_prop_controllers"]}

package/dist/cjs/components/builtin/Text/register.js

@@ -36,6 +36,7 @@ var import_constants = require("../constants");
 var import_breakpoints = require("../../../state/modules/breakpoints");
 var import_rich_text_v2 = require("../../../controls/rich-text-v2/rich-text-v2");
 var import_react2 = require("react");
+var import_prop_controllers2 = require("@makeswift/prop-controllers");
 function registerComponent(runtime) {
   return runtime.registerComponent(
     (0, import_react2.lazy)(() => Promise.resolve().then(() => __toESM(require("./Text")))),
@@ -45,8 +46,8 @@ function registerComponent(runtime) {
       props: {
         id: import_prop_controllers.Props.ElementID(),
         text: (0, import_rich_text_v2.RichText)(),
-        width: import_prop_controllers.Props.Width({
-          format: import_prop_controllers.Props.Width.Format.ClassName,
+        width: (0, import_prop_controllers2.Width)({
+          format: import_prop_controllers2.Width.Format.ClassName,
           preset: [
             {
               deviceId: (0, import_breakpoints.getBaseBreakpoint)(runtime.getBreakpoints()).id,
@@ -55,8 +56,8 @@ function registerComponent(runtime) {
           ],
           defaultValue: { value: 100, unit: "%" }
         }),
-        margin: import_prop_controllers.Props.Margin({
-          format: import_prop_controllers.Props.Margin.Format.ClassName,
+        margin: (0, import_prop_controllers2.Margin)({
+          format: import_prop_controllers2.Margin.Format.ClassName,
           preset: [
             {
               deviceId: (0, import_breakpoints.getBaseBreakpoint)(runtime.getBreakpoints()).id,

package/dist/cjs/components/builtin/Text/register.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/builtin/Text/register.ts"],"sourcesContent":["import { Props } from '../../../prop-controllers'\nimport { ReactRuntime } from '../../../runtimes/react'\nimport { MakeswiftComponentType } from '../constants'\nimport { getBaseBreakpoint } from '../../../state/modules/breakpoints'\nimport { RichText } from '../../../controls/rich-text-v2/rich-text-v2'\nimport { lazy } from 'react'\n\nexport function registerComponent(runtime: ReactRuntime) {\n  return runtime.registerComponent(\n    lazy(() => import('./Text')),\n    {\n      type: MakeswiftComponentType.Text,\n      label: 'Text',\n      props: {\n        id: Props.ElementID(),\n        text: RichText(),\n        width: Props.Width({\n          format: Props.Width.Format.ClassName,\n          preset: [\n            {\n              deviceId: getBaseBreakpoint(runtime.getBreakpoints()).id,\n              value: { value: 700, unit: 'px' },\n            },\n          ],\n          defaultValue: { value: 100, unit: '%' },\n        }),\n        margin: Props.Margin({\n          format: Props.Margin.Format.ClassName,\n          preset: [\n            {\n              deviceId: getBaseBreakpoint(runtime.getBreakpoints()).id,\n              value: {\n                marginTop: null,\n                marginRight: 'auto',\n                marginBottom: { value: 20, unit: 'px' },\n                marginLeft: 'auto',\n              },\n            },\n          ],\n        }),\n      },\n    },\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAAsB;AAEtB,uBAAuC;AACvC,yBAAkC;AAClC,0BAAyB;AACzB,IAAAA,gBAAqB;AAEd,SAAS,kBAAkB,SAAuB;AACvD,SAAO,QAAQ;AAAA,QACb,oBAAK,MAAM,6CAAO,QAAQ,GAAC;AAAA,IAC3B;AAAA,MACE,MAAM,wCAAuB;AAAA,MAC7B,OAAO;AAAA,MACP,OAAO;AAAA,QACL,IAAI,8BAAM,UAAU;AAAA,QACpB,UAAM,8BAAS;AAAA,QACf,OAAO,8BAAM,MAAM;AAAA,UACjB,QAAQ,8BAAM,MAAM,OAAO;AAAA,UAC3B,QAAQ;AAAA,YACN;AAAA,cACE,cAAU,sCAAkB,QAAQ,eAAe,CAAC,EAAE;AAAA,cACtD,OAAO,EAAE,OAAO,KAAK,MAAM,KAAK;AAAA,YAClC;AAAA,UACF;AAAA,UACA,cAAc,EAAE,OAAO,KAAK,MAAM,IAAI;AAAA,QACxC,CAAC;AAAA,QACD,QAAQ,8BAAM,OAAO;AAAA,UACnB,QAAQ,8BAAM,OAAO,OAAO;AAAA,UAC5B,QAAQ;AAAA,YACN;AAAA,cACE,cAAU,sCAAkB,QAAQ,eAAe,CAAC,EAAE;AAAA,cACtD,OAAO;AAAA,gBACL,WAAW;AAAA,gBACX,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":["import_react"]}
+{"version":3,"sources":["../../../../../src/components/builtin/Text/register.ts"],"sourcesContent":["import { Props } from '../../../prop-controllers'\nimport { ReactRuntime } from '../../../runtimes/react'\nimport { MakeswiftComponentType } from '../constants'\nimport { getBaseBreakpoint } from '../../../state/modules/breakpoints'\nimport { RichText } from '../../../controls/rich-text-v2/rich-text-v2'\nimport { lazy } from 'react'\nimport { Margin, Width } from '@makeswift/prop-controllers'\n\nexport function registerComponent(runtime: ReactRuntime) {\n  return runtime.registerComponent(\n    lazy(() => import('./Text')),\n    {\n      type: MakeswiftComponentType.Text,\n      label: 'Text',\n      props: {\n        id: Props.ElementID(),\n        text: RichText(),\n        width: Width({\n          format: Width.Format.ClassName,\n          preset: [\n            {\n              deviceId: getBaseBreakpoint(runtime.getBreakpoints()).id,\n              value: { value: 700, unit: 'px' },\n            },\n          ],\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: null,\n                marginRight: 'auto',\n                marginBottom: { value: 20, unit: 'px' },\n                marginLeft: 'auto',\n              },\n            },\n          ],\n        }),\n      },\n    },\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAAsB;AAEtB,uBAAuC;AACvC,yBAAkC;AAClC,0BAAyB;AACzB,IAAAA,gBAAqB;AACrB,IAAAC,2BAA8B;AAEvB,SAAS,kBAAkB,SAAuB;AACvD,SAAO,QAAQ;AAAA,QACb,oBAAK,MAAM,6CAAO,QAAQ,GAAC;AAAA,IAC3B;AAAA,MACE,MAAM,wCAAuB;AAAA,MAC7B,OAAO;AAAA,MACP,OAAO;AAAA,QACL,IAAI,8BAAM,UAAU;AAAA,QACpB,UAAM,8BAAS;AAAA,QACf,WAAO,gCAAM;AAAA,UACX,QAAQ,+BAAM,OAAO;AAAA,UACrB,QAAQ;AAAA,YACN;AAAA,cACE,cAAU,sCAAkB,QAAQ,eAAe,CAAC,EAAE;AAAA,cACtD,OAAO,EAAE,OAAO,KAAK,MAAM,KAAK;AAAA,YAClC;AAAA,UACF;AAAA,UACA,cAAc,EAAE,OAAO,KAAK,MAAM,IAAI;AAAA,QACxC,CAAC;AAAA,QACD,YAAQ,iCAAO;AAAA,UACb,QAAQ,gCAAO,OAAO;AAAA,UACtB,QAAQ;AAAA,YACN;AAAA,cACE,cAAU,sCAAkB,QAAQ,eAAe,CAAC,EAAE;AAAA,cACtD,OAAO;AAAA,gBACL,WAAW;AAAA,gBACX,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":["import_react","import_prop_controllers"]}

package/dist/cjs/components/builtin/Video/Video.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/builtin/Video/Video.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@emotion/css'\nimport { forwardRef, Ref, useEffect, useState } from 'react'\nimport ReactPlayer from 'react-player'\n\nimport { ElementIDValue, VideoValue } from '../../../prop-controllers/descriptors'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { placeholders } from '../../utils/placeholders'\n\ntype Props = {\n  id?: ElementIDValue\n  video?: VideoValue\n  width?: string\n  margin?: string\n  borderRadius?: string\n}\n\nconst ASPECT_RATIO = 16 / 9\n\nconst Video = forwardRef(function Video(\n  { id, video, width, margin, borderRadius }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  const canPlayUrl = video && video.url != null && ReactPlayer.canPlay(video.url)\n  /**\n   * @see https://github.com/cookpete/react-player/issues/1428\n   */\n  const [shouldRenderReactPlayer, setShouldRenderReactPlayer] = useState(false)\n\n  useEffect(() => {\n    setShouldRenderReactPlayer(true)\n  }, [])\n\n  return (\n    <div\n      ref={ref}\n      id={id}\n      className={cx(\n        useStyle({ display: 'flex', flexDirection: 'column', overflow: 'hidden' }),\n        width,\n        margin,\n        borderRadius,\n      )}\n    >\n      <div style={{ position: 'relative', paddingTop: `${100 / ASPECT_RATIO}%` }}>\n        <div style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}>\n          {shouldRenderReactPlayer && canPlayUrl === true ? (\n            <ReactPlayer\n              {...video}\n              width=\"100%\"\n              height=\"100%\"\n              config={{\n                vimeo: { playerOptions: { background: video != null && !video.controls } },\n                wistia: {\n                  options: {\n                    endVideoBehavior: video != null && video.loop === true ? 'loop' : 'default',\n                  },\n                },\n              }}\n            />\n          ) : (\n            <img width=\"100%\" src={placeholders.video.src} alt=\"Video Placeholder\" />\n          )}\n        </div>\n      </div>\n    </div>\n  )\n})\n\nexport default Video\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAgDY;AA9CZ,iBAAmB;AACnB,mBAAqD;AACrD,0BAAwB;AAGxB,uBAAyB;AACzB,0BAA6B;AAU7B,MAAM,eAAe,KAAK;AAE1B,MAAM,YAAQ,yBAAW,SAASA,OAChC,EAAE,IAAI,OAAO,OAAO,QAAQ,aAAa,GACzC,KACA;AACA,QAAM,aAAa,SAAS,MAAM,OAAO,QAAQ,oBAAAC,QAAY,QAAQ,MAAM,GAAG;AAI9E,QAAM,CAAC,yBAAyB,0BAA0B,QAAI,uBAAS,KAAK;AAE5E,8BAAU,MAAM;AACd,+BAA2B,IAAI;AAAA,EACjC,GAAG,CAAC,CAAC;AAEL,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,eAAW;AAAA,YACT,2BAAS,EAAE,SAAS,QAAQ,eAAe,UAAU,UAAU,SAAS,CAAC;AAAA,QACzE;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAEA,sDAAC,SAAI,OAAO,EAAE,UAAU,YAAY,YAAY,GAAG,MAAM,YAAY,IAAI,GACvE,sDAAC,SAAI,OAAO,EAAE,UAAU,YAAY,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,EAAE,GACtE,qCAA2B,eAAe,OACzC;AAAA,QAAC,oBAAAA;AAAA,QAAA;AAAA,UACE,GAAG;AAAA,UACJ,OAAM;AAAA,UACN,QAAO;AAAA,UACP,QAAQ;AAAA,YACN,OAAO,EAAE,eAAe,EAAE,YAAY,SAAS,QAAQ,CAAC,MAAM,SAAS,EAAE;AAAA,YACzE,QAAQ;AAAA,cACN,SAAS;AAAA,gBACP,kBAAkB,SAAS,QAAQ,MAAM,SAAS,OAAO,SAAS;AAAA,cACpE;AAAA,YACF;AAAA,UACF;AAAA;AAAA,MACF,IAEA,4CAAC,SAAI,OAAM,QAAO,KAAK,iCAAa,MAAM,KAAK,KAAI,qBAAoB,GAE3E,GACF;AAAA;AAAA,EACF;AAEJ,CAAC;AAED,IAAO,gBAAQ;","names":["Video","ReactPlayer"]}
+{"version":3,"sources":["../../../../../src/components/builtin/Video/Video.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@emotion/css'\nimport { forwardRef, Ref, useEffect, useState } from 'react'\nimport ReactPlayer from 'react-player'\n\nimport { ElementIDValue } from '../../../prop-controllers/descriptors'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { placeholders } from '../../utils/placeholders'\nimport { VideoData } from '@makeswift/prop-controllers'\n\ntype Props = {\n  id?: ElementIDValue\n  video?: VideoData\n  width?: string\n  margin?: string\n  borderRadius?: string\n}\n\nconst ASPECT_RATIO = 16 / 9\n\nconst Video = forwardRef(function Video(\n  { id, video, width, margin, borderRadius }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  const canPlayUrl = video && video.url != null && ReactPlayer.canPlay(video.url)\n  /**\n   * @see https://github.com/cookpete/react-player/issues/1428\n   */\n  const [shouldRenderReactPlayer, setShouldRenderReactPlayer] = useState(false)\n\n  useEffect(() => {\n    setShouldRenderReactPlayer(true)\n  }, [])\n\n  return (\n    <div\n      ref={ref}\n      id={id}\n      className={cx(\n        useStyle({ display: 'flex', flexDirection: 'column', overflow: 'hidden' }),\n        width,\n        margin,\n        borderRadius,\n      )}\n    >\n      <div style={{ position: 'relative', paddingTop: `${100 / ASPECT_RATIO}%` }}>\n        <div style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}>\n          {shouldRenderReactPlayer && canPlayUrl === true ? (\n            <ReactPlayer\n              {...video}\n              width=\"100%\"\n              height=\"100%\"\n              config={{\n                vimeo: { playerOptions: { background: video != null && !video.controls } },\n                wistia: {\n                  options: {\n                    endVideoBehavior: video != null && video.loop === true ? 'loop' : 'default',\n                  },\n                },\n              }}\n            />\n          ) : (\n            <img width=\"100%\" src={placeholders.video.src} alt=\"Video Placeholder\" />\n          )}\n        </div>\n      </div>\n    </div>\n  )\n})\n\nexport default Video\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAiDY;AA/CZ,iBAAmB;AACnB,mBAAqD;AACrD,0BAAwB;AAGxB,uBAAyB;AACzB,0BAA6B;AAW7B,MAAM,eAAe,KAAK;AAE1B,MAAM,YAAQ,yBAAW,SAASA,OAChC,EAAE,IAAI,OAAO,OAAO,QAAQ,aAAa,GACzC,KACA;AACA,QAAM,aAAa,SAAS,MAAM,OAAO,QAAQ,oBAAAC,QAAY,QAAQ,MAAM,GAAG;AAI9E,QAAM,CAAC,yBAAyB,0BAA0B,QAAI,uBAAS,KAAK;AAE5E,8BAAU,MAAM;AACd,+BAA2B,IAAI;AAAA,EACjC,GAAG,CAAC,CAAC;AAEL,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,eAAW;AAAA,YACT,2BAAS,EAAE,SAAS,QAAQ,eAAe,UAAU,UAAU,SAAS,CAAC;AAAA,QACzE;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAEA,sDAAC,SAAI,OAAO,EAAE,UAAU,YAAY,YAAY,GAAG,MAAM,YAAY,IAAI,GACvE,sDAAC,SAAI,OAAO,EAAE,UAAU,YAAY,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,EAAE,GACtE,qCAA2B,eAAe,OACzC;AAAA,QAAC,oBAAAA;AAAA,QAAA;AAAA,UACE,GAAG;AAAA,UACJ,OAAM;AAAA,UACN,QAAO;AAAA,UACP,QAAQ;AAAA,YACN,OAAO,EAAE,eAAe,EAAE,YAAY,SAAS,QAAQ,CAAC,MAAM,SAAS,EAAE;AAAA,YACzE,QAAQ;AAAA,cACN,SAAS;AAAA,gBACP,kBAAkB,SAAS,QAAQ,MAAM,SAAS,OAAO,SAAS;AAAA,cACpE;AAAA,YACF;AAAA,UACF;AAAA;AAAA,MACF,IAEA,4CAAC,SAAI,OAAM,QAAO,KAAK,iCAAa,MAAM,KAAK,KAAI,qBAAoB,GAE3E,GACF;AAAA;AAAA,EACF;AAEJ,CAAC;AAED,IAAO,gBAAQ;","names":["Video","ReactPlayer"]}

package/dist/cjs/components/builtin/Video/register.js

@@ -35,6 +35,7 @@ var import_prop_controllers = require("../../../prop-controllers");
 var import_constants = require("../constants");
 var import_components_meta = require("../../../state/modules/components-meta");
 var import_react2 = require("react");
+var import_prop_controllers2 = require("@makeswift/prop-controllers");
 function registerComponent(runtime) {
   return runtime.registerComponent(
     (0, import_react2.lazy)(() => Promise.resolve().then(() => __toESM(require("./Video")))),
@@ -44,13 +45,13 @@ function registerComponent(runtime) {
       icon: import_components_meta.ComponentIcon.Video,
       props: {
         id: import_prop_controllers.Props.ElementID(),
-        video: import_prop_controllers.Props.Video({ preset: { controls: true } }),
-        width: import_prop_controllers.Props.Width({
-          format: import_prop_controllers.Props.Width.Format.ClassName,
+        video: (0, import_prop_controllers2.Video)({ preset: { controls: true } }),
+        width: (0, import_prop_controllers2.Width)({
+          format: import_prop_controllers2.Width.Format.ClassName,
           defaultValue: { value: 560, unit: "px" }
         }),
-        margin: import_prop_controllers.Props.Margin({ format: import_prop_controllers.Props.Margin.Format.ClassName }),
-        borderRadius: import_prop_controllers.Props.BorderRadius({ format: import_prop_controllers.Props.BorderRadius.Format.ClassName })
+        margin: (0, import_prop_controllers2.Margin)({ format: import_prop_controllers2.Margin.Format.ClassName }),
+        borderRadius: (0, import_prop_controllers2.BorderRadius)({ format: import_prop_controllers2.BorderRadius.Format.ClassName })
       }
     }
   );

package/dist/cjs/components/builtin/Video/register.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/builtin/Video/register.ts"],"sourcesContent":["import { Props } from '../../../prop-controllers'\nimport { ReactRuntime } from '../../../runtimes/react'\nimport { MakeswiftComponentType } from '../constants'\nimport { ComponentIcon } from '../../../state/modules/components-meta'\nimport { lazy } from 'react'\n\nexport function registerComponent(runtime: ReactRuntime) {\n  return runtime.registerComponent(\n    lazy(() => import('./Video')),\n    {\n      type: MakeswiftComponentType.Video,\n      label: 'Video',\n      icon: ComponentIcon.Video,\n      props: {\n        id: Props.ElementID(),\n        video: Props.Video({ preset: { controls: true } }),\n        width: Props.Width({\n          format: Props.Width.Format.ClassName,\n          defaultValue: { value: 560, unit: 'px' },\n        }),\n        margin: Props.Margin({ format: Props.Margin.Format.ClassName }),\n        borderRadius: Props.BorderRadius({ format: Props.BorderRadius.Format.ClassName }),\n      },\n    },\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAAsB;AAEtB,uBAAuC;AACvC,6BAA8B;AAC9B,IAAAA,gBAAqB;AAEd,SAAS,kBAAkB,SAAuB;AACvD,SAAO,QAAQ;AAAA,QACb,oBAAK,MAAM,6CAAO,SAAS,GAAC;AAAA,IAC5B;AAAA,MACE,MAAM,wCAAuB;AAAA,MAC7B,OAAO;AAAA,MACP,MAAM,qCAAc;AAAA,MACpB,OAAO;AAAA,QACL,IAAI,8BAAM,UAAU;AAAA,QACpB,OAAO,8BAAM,MAAM,EAAE,QAAQ,EAAE,UAAU,KAAK,EAAE,CAAC;AAAA,QACjD,OAAO,8BAAM,MAAM;AAAA,UACjB,QAAQ,8BAAM,MAAM,OAAO;AAAA,UAC3B,cAAc,EAAE,OAAO,KAAK,MAAM,KAAK;AAAA,QACzC,CAAC;AAAA,QACD,QAAQ,8BAAM,OAAO,EAAE,QAAQ,8BAAM,OAAO,OAAO,UAAU,CAAC;AAAA,QAC9D,cAAc,8BAAM,aAAa,EAAE,QAAQ,8BAAM,aAAa,OAAO,UAAU,CAAC;AAAA,MAClF;AAAA,IACF;AAAA,EACF;AACF;","names":["import_react"]}
+{"version":3,"sources":["../../../../../src/components/builtin/Video/register.ts"],"sourcesContent":["import { Props } from '../../../prop-controllers'\nimport { ReactRuntime } from '../../../runtimes/react'\nimport { MakeswiftComponentType } from '../constants'\nimport { ComponentIcon } from '../../../state/modules/components-meta'\nimport { lazy } from 'react'\nimport { BorderRadius, Margin, Video, Width } from '@makeswift/prop-controllers'\n\nexport function registerComponent(runtime: ReactRuntime) {\n  return runtime.registerComponent(\n    lazy(() => import('./Video')),\n    {\n      type: MakeswiftComponentType.Video,\n      label: 'Video',\n      icon: ComponentIcon.Video,\n      props: {\n        id: Props.ElementID(),\n        video: Video({ preset: { controls: true } }),\n        width: Width({\n          format: Width.Format.ClassName,\n          defaultValue: { value: 560, unit: 'px' },\n        }),\n        margin: Margin({ format: Margin.Format.ClassName }),\n        borderRadius: BorderRadius({ format: BorderRadius.Format.ClassName }),\n      },\n    },\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAAsB;AAEtB,uBAAuC;AACvC,6BAA8B;AAC9B,IAAAA,gBAAqB;AACrB,IAAAC,2BAAmD;AAE5C,SAAS,kBAAkB,SAAuB;AACvD,SAAO,QAAQ;AAAA,QACb,oBAAK,MAAM,6CAAO,SAAS,GAAC;AAAA,IAC5B;AAAA,MACE,MAAM,wCAAuB;AAAA,MAC7B,OAAO;AAAA,MACP,MAAM,qCAAc;AAAA,MACpB,OAAO;AAAA,QACL,IAAI,8BAAM,UAAU;AAAA,QACpB,WAAO,gCAAM,EAAE,QAAQ,EAAE,UAAU,KAAK,EAAE,CAAC;AAAA,QAC3C,WAAO,gCAAM;AAAA,UACX,QAAQ,+BAAM,OAAO;AAAA,UACrB,cAAc,EAAE,OAAO,KAAK,MAAM,KAAK;AAAA,QACzC,CAAC;AAAA,QACD,YAAQ,iCAAO,EAAE,QAAQ,gCAAO,OAAO,UAAU,CAAC;AAAA,QAClD,kBAAc,uCAAa,EAAE,QAAQ,sCAAa,OAAO,UAAU,CAAC;AAAA,MACtE;AAAA,IACF;AAAA,EACF;AACF;","names":["import_react","import_prop_controllers"]}

package/dist/cjs/components/hooks/index.js

@@ -20,7 +20,12 @@ __reExport(hooks_exports, require("./useBorder"), module.exports);
 __reExport(hooks_exports, require("./useBoxShadow"), module.exports);
 __reExport(hooks_exports, require("./useResponsiveColor"), module.exports);
 __reExport(hooks_exports, require("./useMediaQuery"), module.exports);
-__reExport(hooks_exports, require("./usePropControllerLinkData"), module.exports);
+__reExport(hooks_exports, require("./useLinkPropControllerData"), module.exports);
+__reExport(hooks_exports, require("./useCheckboxPropControllerData"), module.exports);
+__reExport(hooks_exports, require("./useDatePropControllerData"), module.exports);
+__reExport(hooks_exports, require("./useFontPropControllerData"), module.exports);
+__reExport(hooks_exports, require("./useVideoPropControllerData"), module.exports);
+__reExport(hooks_exports, require("./useTablePropControllerData"), module.exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ...require("./useBackgrounds"),
@@ -28,6 +33,11 @@ __reExport(hooks_exports, require("./usePropControllerLinkData"), module.exports
   ...require("./useBoxShadow"),
   ...require("./useResponsiveColor"),
   ...require("./useMediaQuery"),
-  ...require("./usePropControllerLinkData")
+  ...require("./useLinkPropControllerData"),
+  ...require("./useCheckboxPropControllerData"),
+  ...require("./useDatePropControllerData"),
+  ...require("./useFontPropControllerData"),
+  ...require("./useVideoPropControllerData"),
+  ...require("./useTablePropControllerData")
 });
 //# sourceMappingURL=index.js.map

package/dist/cjs/components/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/hooks/index.ts"],"sourcesContent":["export * from './useBackgrounds'\nexport * from './useBorder'\nexport * from './useBoxShadow'\nexport * from './useResponsiveColor'\nexport * from './useMediaQuery'\nexport * from './usePropControllerLinkData'\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,0BAAc,6BAAd;AACA,0BAAc,wBADd;AAEA,0BAAc,2BAFd;AAGA,0BAAc,iCAHd;AAIA,0BAAc,4BAJd;AAKA,0BAAc,wCALd;","names":[]}
+{"version":3,"sources":["../../../../src/components/hooks/index.ts"],"sourcesContent":["export * from './useBackgrounds'\nexport * from './useBorder'\nexport * from './useBoxShadow'\nexport * from './useResponsiveColor'\nexport * from './useMediaQuery'\nexport * from './useLinkPropControllerData'\nexport * from './useCheckboxPropControllerData'\nexport * from './useDatePropControllerData'\nexport * from './useFontPropControllerData'\nexport * from './useVideoPropControllerData'\nexport * from './useTablePropControllerData'\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,0BAAc,6BAAd;AACA,0BAAc,wBADd;AAEA,0BAAc,2BAFd;AAGA,0BAAc,iCAHd;AAIA,0BAAc,4BAJd;AAKA,0BAAc,wCALd;AAMA,0BAAc,4CANd;AAOA,0BAAc,wCAPd;AAQA,0BAAc,wCARd;AASA,0BAAc,yCATd;AAUA,0BAAc,yCAVd;","names":[]}