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

@makeswift/runtime 0.16.0-canary.1 → 0.16.0-canary.3

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

Files changed (231) hide show

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../../../src/components/builtin/Navigation/components/DropDownButton/index.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, ForwardedRef, forwardRef, useRef, useState } from 'react'\n\nimport { CaretDown8 } from '../../../../icons/CaretDown8'\nimport { Plus8 } from '../../../../icons/Plus8'\nimport { ArrowDown8 } from '../../../../icons/ArrowDown8'\nimport { ChevronDown8 } from '../../../../icons/ChevronDown8'\nimport { 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"]}
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 { 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, ResponsiveTextStyleData } 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?: ResponsiveTextStyleData\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/MobileMenu/components/MobileDropDownButton/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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"]}
1	+ {"version":3,"sources":["../../../../../../../../../src/components/builtin/Navigation/components/MobileMenu/components/MobileDropDownButton/index.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, useState } from 'react'\n\nimport { LinkData, ResponsiveColorData, ResponsiveTextStyleData } 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?: ResponsiveTextStyleData\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;AA+BI;AAsGM;AArIV,IAAAA,gBAAmD;AAInD,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/register.js CHANGED Viewed

@@ -47,7 +47,7 @@ function registerComponent(runtime) {
       props: {
         id: import_prop_controllers.Props.ElementID(),
         links: import_prop_controllers.Props.NavigationLinks(),
-        linkTextStyle: import_prop_controllers.Props.TextStyle((props) => {
+        linkTextStyle: (0, import_prop_controllers2.TextStyle)((props) => {
           const links = props.links;
           return {
             label: "Link text style",
@@ -164,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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/components/builtin/Navigation/register.ts"],"sourcesContent":["import { Props } from '../../../prop-controllers'\nimport { NavigationLinksValue } 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 ~~ResponsiveValue~~,\n ~~checkboxPropControllerDataSchema~~,\n ~~getCheckboxPropControllerDataBoolean~~,\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\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 ~~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: 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: 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,~~2BAUO~~;AAEA,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,cAAU,mCAAS,EAAE,QAAQ,MAAM,OAAO,YAAY,CAAC;AAAA,QACvD,UAAU,8BAAM,MAAM,YAAU;AAAA,UAC9B,OAAO;AAAA,UACP,YACE;AAAA,YACE,0DAAiC,SAAS,EAAE,MAAM,MAAS,EAAE,MAAM,MAAM,QAAQ;AAAA,UACnF,MAAM;AAAA,QACV,EAAE;AAAA,QACF,eAAW,2CAAiB,YAAU;AAAA;AAAA;AAAA;AAAA;AAAA,UAKpC,QAAQ;AAAA,YACN,CAAC,2CAAkB,GAAG;AAAA,YACtB,OAAO;AAAA,cACL;AAAA,gBACE,cAAU,sCAAkB,QAAQ,eAAe,CAAC,EAAE;AAAA,gBACtD,OAAO,EAAE,OAAO,KAAK,MAAM,KAAK;AAAA,cAClC;AAAA,YACF;AAAA,UACF;AAAA,UACA,OAAO;AAAA,UACP,KAAK;AAAA,UACL,KAAK;AAAA;AAAA,UAEL,SAAS,CAAC,EAAE,OAAO,MAAM,OAAO,UAAU,MAAM,OAAO,CAAC;AAAA,UACxD,YACE;AAAA,YACE,0DAAiC,SAAS,EAAE,MAAM,MAAS,EAAE,MAAM,MAAM,QAAQ;AAAA,UACnF,MAAM;AAAA,QACV,EAAE;AAAA,QACF,aAAa,8BAAM,UAAU,YAAU;AAAA,UACrC,OAAO;AAAA,UACP,YACE;AAAA,YACE,0DAAiC,SAAS,EAAE,MAAM,MAAS,EAAE,MAAM,MAAM,QAAQ;AAAA,UACnF,MAAM;AAAA,QACV,EAAE;AAAA,QACF,cAAU,+BAAK,YAAU;AAAA,UACvB,OAAO;AAAA,UACP,YACE;AAAA,YACE,0DAAiC,SAAS,EAAE,MAAM,MAAS,EAAE,MAAM,MAAM,QAAQ;AAAA,UACnF,MAAM;AAAA,QACV,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,6BAAyB,0CAAgB,CAAC,OAAO,WAAW;AAC1D,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,8BAA0B,0CAAgB,CAAC,OAAO,WAAW;AAC3D,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,+BAA2B,0CAAgB,CAAC,OAAO,WAAW;AAC5D,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"]}
1	+ {"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 TextStyle,\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: 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/register.js CHANGED Viewed

@@ -146,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 CHANGED Viewed

	@@ -1 +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'\nimport { ResponsiveColor } 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\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: 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: 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAAsB;AAGtB,yBAAkC;AAClC,uBAAuC;AACvC,6BAA8B;AAC9B,IAAAA,gBAAqB;AACrB,IAAAC,~~2BAAgC~~;~~AAEzB~~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~~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~~;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,EAAE,OAAO,IAAI,MAAM,KAAK;AAAA,gBACnC,aAAa;AAAA,gBACb,cAAc,EAAE,OAAO,IAAI,MAAM,KAAK;AAAA,gBACtC,YAAY;AAAA,cACd;AAAA,YACF;AAAA,UACF;AAAA,QACF,CAAC;AAAA,MACH;AAAA,IACF;AAAA,EACF;AACF;","names":["import_react","import_prop_controllers"]}
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'\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/Text.js CHANGED Viewed

@@ -23,8 +23,9 @@ __export(Text_exports, {
 module.exports = __toCommonJS(Text_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_css = require("@emotion/css");
-function Text({ id, text, width, margin }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id, className: (0, import_css.cx)(width, margin), children: text });
-}
+var import_react = require("react");
+const Text = (0, import_react.forwardRef)(({ id, text, width, margin }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id, ref, className: (0, import_css.cx)(width, margin), children: text });
+});
 var Text_default = Text;
 //# sourceMappingURL=Text.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/components/builtin/Text/Text.tsx"],"sourcesContent":["import { cx } from '@emotion/css'\nimport { ElementIDValue } from '../../../prop-controllers/descriptors'\nimport { RichTextV2ControlValue } from '../../../runtimes/react/controls/rich-text-v2'\n\ntype Props = {\n id?: ElementIDValue\n text?: RichTextV2ControlValue\n width?: string\n margin?: string\n}\n\~~nfunction~~ Text({ id, text, width, margin }: ~~Props~~) {\n return (\n <div id={id} className={cx(width, margin)}>\n {text}\n </div>\n )\n}\n\nexport default Text\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;~~AAaI~~;~~AAbJ~~,iBAAmB;~~AAWnB~~,~~SAAS~~,~~KAAK~~,EAAE,IAAI,MAAM,OAAO,OAAO,~~GAAU~~;~~AAChD~~,SACE,4CAAC,SAAI,IAAQ,eAAW,eAAG,OAAO,MAAM,~~GACrC~~,gBACH;AAEJ;~~AAEA~~,IAAO,eAAQ;","names":[]}
1	+ {"version":3,"sources":["../../../../../src/components/builtin/Text/Text.tsx"],"sourcesContent":["import { cx } from '@emotion/css'\nimport { forwardRef } from 'react'\nimport { ElementIDValue } from '../../../prop-controllers/descriptors'\nimport { RichTextV2ControlValue } from '../../../runtimes/react/controls/rich-text-v2'\n\ntype Props = {\n id?: ElementIDValue\n text?: RichTextV2ControlValue\n width?: string\n margin?: string\n}\n\nconst Text = forwardRef<HTMLDivElement, Props>(({ id, text, width, margin }, ref) => {\n return (\n <div id={id} ref={ref} className={cx(width, margin)}>\n {text}\n </div>\n )\n})\n\nexport default Text\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAcI;AAdJ,iBAAmB;AACnB,mBAA2B;AAW3B,MAAM,WAAO,yBAAkC,CAAC,EAAE,IAAI,MAAM,OAAO,OAAO,GAAG,QAAQ;AACnF,SACE,4CAAC,SAAI,IAAQ,KAAU,eAAW,eAAG,OAAO,MAAM,GAC/C,gBACH;AAEJ,CAAC;AAED,IAAO,eAAQ;","names":[]}

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

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
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'\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 CHANGED Viewed

	@@ -1 +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"]}
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 } 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 CHANGED Viewed

@@ -45,12 +45,12 @@ 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 }),
+        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 CHANGED Viewed

	@@ -1 +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'\nimport { BorderRadius } 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: ~~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: 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,~~2BAA6B~~;~~AAEtB~~,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~~,kBAAc,uCAAa,EAAE,QAAQ,sCAAa,OAAO,UAAU,CAAC;AAAA,MACtE;AAAA,IACF;AAAA,EACF;AACF;","names":["import_react","import_prop_controllers"]}
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'\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 CHANGED Viewed

@@ -22,6 +22,10 @@ __reExport(hooks_exports, require("./useResponsiveColor"), module.exports);
 __reExport(hooks_exports, require("./useMediaQuery"), 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"),
@@ -30,6 +34,10 @@ __reExport(hooks_exports, require("./useCheckboxPropControllerData"), module.exp
   ...require("./useResponsiveColor"),
   ...require("./useMediaQuery"),
   ...require("./useLinkPropControllerData"),
-  ...require("./useCheckboxPropControllerData")
+  ...require("./useCheckboxPropControllerData"),
+  ...require("./useDatePropControllerData"),
+  ...require("./useFontPropControllerData"),
+  ...require("./useVideoPropControllerData"),
+  ...require("./useTablePropControllerData")
 });
 //# sourceMappingURL=index.js.map

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

	@@ -1 +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 './useLinkPropControllerData'\nexport * from './useCheckboxPropControllerData'\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;","names":[]}
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 './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":[]}

package/dist/cjs/{prop-controllers/copy/table.js → components/hooks/useDatePropControllerData.js} RENAMED Viewed

@@ -16,18 +16,19 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var table_exports = {};
-__export(table_exports, {
-  copy: () => copy
+var useDatePropControllerData_exports = {};
+__export(useDatePropControllerData_exports, {
+  useDatePropControllerData: () => useDatePropControllerData
 });
-module.exports = __toCommonJS(table_exports);
-function copy(value, context) {
-  if (value == null)
-    return value;
-  return context.replacementContext.tableIds.get(value) ?? value;
+module.exports = __toCommonJS(useDatePropControllerData_exports);
+var import_prop_controllers = require("@makeswift/prop-controllers");
+function useDatePropControllerData(data) {
+  if (data == null)
+    return data;
+  return (0, import_prop_controllers.getDatePropControllerDataString)(data);
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  copy
+  useDatePropControllerData
 });
-//# sourceMappingURL=table.js.map
+//# sourceMappingURL=useDatePropControllerData.js.map

package/dist/cjs/components/hooks/useDatePropControllerData.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../../../src/components/hooks/useDatePropControllerData.ts"],"sourcesContent":["import {\n DatePropControllerData,\n getDatePropControllerDataString,\n} from '@makeswift/prop-controllers'\n\nexport function useDatePropControllerData(\n data: DatePropControllerData | undefined,\n): string | undefined {\n if (data == null) return data\n\n return getDatePropControllerDataString(data)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAGO;AAEA,SAAS,0BACd,MACoB;AACpB,MAAI,QAAQ;AAAM,WAAO;AAEzB,aAAO,yDAAgC,IAAI;AAC7C;","names":[]}

package/dist/cjs/components/hooks/useFontPropControllerData.js ADDED Viewed

@@ -0,0 +1,34 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useFontPropControllerData_exports = {};
+__export(useFontPropControllerData_exports, {
+  useFontPropControllerData: () => useFontPropControllerData
+});
+module.exports = __toCommonJS(useFontPropControllerData_exports);
+var import_prop_controllers = require("@makeswift/prop-controllers");
+function useFontPropControllerData(data) {
+  if (data == null)
+    return data;
+  return (0, import_prop_controllers.getFontPropControllerDataResponsiveFontData)(data);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useFontPropControllerData
+});
+//# sourceMappingURL=useFontPropControllerData.js.map

package/dist/cjs/components/hooks/useFontPropControllerData.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../../../src/components/hooks/useFontPropControllerData.ts"],"sourcesContent":["import {\n FontPropControllerData,\n ResponsiveFontData,\n getFontPropControllerDataResponsiveFontData,\n} from '@makeswift/prop-controllers'\n\nexport function useFontPropControllerData(\n data: FontPropControllerData | undefined,\n): ResponsiveFontData | undefined {\n if (data == null) return data\n\n return getFontPropControllerDataResponsiveFontData(data)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAIO;AAEA,SAAS,0BACd,MACgC;AAChC,MAAI,QAAQ;AAAM,WAAO;AAEzB,aAAO,qEAA4C,IAAI;AACzD;","names":[]}

package/dist/cjs/components/hooks/useTablePropControllerData.js ADDED Viewed

@@ -0,0 +1,34 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useTablePropControllerData_exports = {};
+__export(useTablePropControllerData_exports, {
+  useTablePropControllerData: () => useTablePropControllerData
+});
+module.exports = __toCommonJS(useTablePropControllerData_exports);
+var import_prop_controllers = require("@makeswift/prop-controllers");
+function useTablePropControllerData(data) {
+  if (data == null)
+    return data;
+  return (0, import_prop_controllers.getTablePropControllerDataTableId)(data);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useTablePropControllerData
+});
+//# sourceMappingURL=useTablePropControllerData.js.map

package/dist/cjs/components/hooks/useTablePropControllerData.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../../../src/components/hooks/useTablePropControllerData.ts"],"sourcesContent":["import {\n TablePropControllerData,\n getTablePropControllerDataTableId,\n} from '@makeswift/prop-controllers'\n\nexport function useTablePropControllerData(\n data: TablePropControllerData | undefined,\n): string | undefined {\n if (data == null) return data\n\n return getTablePropControllerDataTableId(data)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAGO;AAEA,SAAS,2BACd,MACoB;AACpB,MAAI,QAAQ;AAAM,WAAO;AAEzB,aAAO,2DAAkC,IAAI;AAC/C;","names":[]}