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

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

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

Files changed (227) hide show

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

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

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

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

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

@@ -99,7 +99,7 @@ function registerComponent(runtime) {
           hidden: props.tableId == null
         })),
         labelTextStyle: import_prop_controllers.Props.TextStyle({ label: "Label text style" }),
-        labelTextColor: import_prop_controllers.Props.ResponsiveColor((props, device) => {
+        labelTextColor: (0, import_prop_controllers2.ResponsiveColor)((props, device) => {
           const hidden = props.tableId == null;
           const responsiveContrast = props.contrast;
           const contrast = (0, import_breakpoints.findBreakpointOverride)(
@@ -114,13 +114,13 @@ function registerComponent(runtime) {
           };
         }),
         submitTextStyle: import_prop_controllers.Props.TextStyle({ label: "Button text style" }),
-        brandColor: import_prop_controllers.Props.ResponsiveColor((props) => ({
+        brandColor: (0, import_prop_controllers2.ResponsiveColor)((props) => ({
           label: "Button color",
           placeholder: "black",
           hidden: props.tableId == null
           // TODO: Add hideAlphaSlider
         })),
-        submitTextColor: import_prop_controllers.Props.ResponsiveColor((props) => ({
+        submitTextColor: (0, import_prop_controllers2.ResponsiveColor)((props) => ({
           label: "Button text color",
           placeholder: "white",
           hidden: props.tableId == null
@@ -144,7 +144,7 @@ function registerComponent(runtime) {
           defaultValue: "flat",
           hidden: props.tableId == null
         })),
-        submitWidth: import_prop_controllers.Props.ResponsiveLength((props) => ({
+        submitWidth: (0, import_prop_controllers2.ResponsiveLength)((props) => ({
           label: "Button width",
           hidden: props.tableId == null
           // TODO: Add placeholder: { value: 'auto' }

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/components/builtin/Form/register.ts"],"sourcesContent":["import { Props, ResponsiveValue } from '../../../prop-controllers'\nimport { ReactRuntime } from '../../../runtimes/react'\nimport { findBreakpointOverride, getBaseBreakpoint } from '../../../state/modules/breakpoints'\nimport { MakeswiftComponentType } from '../constants'\nimport { Alignments, Contrast, Contrasts, Shapes, Sizes } from './context/FormContext'\nimport { ComponentIcon } from '../../../state/modules/components-meta'\nimport { lazy } from 'react'\nimport { Link } from '@makeswift/prop-controllers'\n\nexport function registerComponent(runtime: ReactRuntime) {\n return runtime.registerComponent(\n lazy(() => import('./Form')),\n {\n type: MakeswiftComponentType.Form,\n label: 'Form',\n icon: ComponentIcon.Form,\n props: {\n id: Props.ElementID(),\n tableId: Props.Table(),\n fields: Props.TableFormFields(),\n submitLink: Link(props => ({\n label: 'Redirect to',\n // TODO: This option is hardcoded. We should import it from LinkPanelOptions\n options: [\n { value: 'OPEN_PAGE', label: 'Open page' },\n { value: 'OPEN_URL', label: 'Open URL' },\n ],\n hidden: props.tableId == null,\n })),\n gap: Props.GapY(props => ({\n preset: [\n {\n deviceId: getBaseBreakpoint(runtime.getBreakpoints()).id,\n value: { value: 10, unit: 'px' },\n },\n ],\n label: 'Gap',\n defaultValue: { value: 0, unit: 'px' },\n hidden: props.tableId == null,\n })),\n shape: Props.ResponsiveIconRadioGroup(props => ({\n label: 'Shape',\n options: [\n { label: 'Pill', value: Shapes.PILL, icon: 'ButtonPill16' },\n { label: 'Rounded', value: Shapes.ROUNDED, icon: 'ButtonRounded16' },\n { label: 'Square', value: Shapes.SQUARE, icon: 'ButtonSquare16' },\n ],\n defaultValue: Shapes.ROUNDED,\n hidden: props.tableId == null,\n })),\n size: Props.ResponsiveIconRadioGroup(props => ({\n label: 'Size',\n options: [\n { label: 'Small', value: Sizes.SMALL, icon: 'SizeSmall16' },\n { label: 'Medium', value: Sizes.MEDIUM, icon: 'SizeMedium16' },\n { label: 'Large', value: Sizes.LARGE, icon: 'SizeLarge16' },\n ],\n defaultValue: Sizes.MEDIUM,\n hidden: props?.tableId == null,\n })),\n contrast: Props.ResponsiveIconRadioGroup(props => ({\n label: 'Color',\n options: [\n { label: 'Light mode', value: Contrasts.LIGHT, icon: 'Sun16' },\n { label: 'Dark mode', value: Contrasts.DARK, icon: 'Moon16' },\n ],\n defaultValue: Contrasts.LIGHT,\n hidden: props.tableId == null,\n })),\n labelTextStyle: Props.TextStyle({ label: 'Label text style' }),\n labelTextColor: ~~Props.~~ResponsiveColor((props, device) => {\n const hidden = props.tableId == null\n const responsiveContrast = props.contrast as ResponsiveValue<Contrast>\n const contrast = findBreakpointOverride<Contrast>(\n runtime.getBreakpoints(),\n responsiveContrast,\n device,\n )\n\n return {\n hidden,\n label: 'Label text color',\n placeholder:\n contrast?.value === Contrasts.DARK ? 'rgba(255,255,255,0.95)' : 'rgba(0,0,0,0.8)',\n }\n }),\n submitTextStyle: Props.TextStyle({ label: 'Button text style' }),\n brandColor: ~~Props.~~ResponsiveColor(props => ({\n label: 'Button color',\n placeholder: 'black',\n hidden: props.tableId == null,\n // TODO: Add hideAlphaSlider\n })),\n submitTextColor: ~~Props.~~ResponsiveColor(props => ({\n label: 'Button text color',\n placeholder: 'white',\n hidden: props.tableId == null,\n })),\n submitLabel: Props.TextInput(props => ({\n label: 'Button label',\n placeholder: 'Submit',\n hidden: props.tableId == null,\n })),\n submitVariant: Props.ResponsiveSelect(props => ({\n label: 'Button style',\n options: [\n { value: 'flat', label: 'Flat' },\n { value: 'outline', label: 'Outline' },\n { value: 'shadow', label: 'Floating' },\n { value: 'clear', label: 'Clear' },\n { value: 'blocky', label: 'Blocky' },\n { value: 'bubbly', label: 'Bubbly' },\n { value: 'skewed', label: 'Skewed' },\n ],\n defaultValue: 'flat',\n hidden: props.tableId == null,\n })),\n submitWidth: ~~Props.~~ResponsiveLength(props => ({\n label: 'Button width',\n hidden: props.tableId == null,\n // TODO: Add placeholder: { value: 'auto' }\n })),\n submitAlignment: Props.ResponsiveIconRadioGroup(props => ({\n label: 'Button alignment',\n options: [\n { label: 'Left', value: Alignments.LEFT, icon: 'AlignLeft16' },\n { label: 'Center', value: Alignments.CENTER, icon: 'AlignCenter16' },\n { label: 'Right', value: Alignments.RIGHT, icon: 'AlignRight16' },\n ],\n defaultValue: Alignments.CENTER,\n hidden: props.tableId == null,\n })),\n width: Props.Width({\n preset: [\n {\n deviceId: getBaseBreakpoint(runtime.getBreakpoints()).id,\n value: { value: 550, unit: 'px' },\n },\n ],\n defaultValue: { value: 100, unit: '%' },\n format: Props.Width.Format.ClassName,\n }),\n margin: Props.Margin({ format: Props.Margin.Format.ClassName }),\n },\n },\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAAuC;AAEvC,yBAA0D;AAC1D,uBAAuC;AACvC,yBAA+D;AAC/D,6BAA8B;AAC9B,IAAAA,gBAAqB;AACrB,IAAAC,~~2BAAqB~~;~~AAEd~~,SAAS,kBAAkB,SAAuB;AACvD,SAAO,QAAQ;AAAA,QACb,oBAAK,MAAM,6CAAO,QAAQ,GAAC;AAAA,IAC3B;AAAA,MACE,MAAM,wCAAuB;AAAA,MAC7B,OAAO;AAAA,MACP,MAAM,qCAAc;AAAA,MACpB,OAAO;AAAA,QACL,IAAI,8BAAM,UAAU;AAAA,QACpB,SAAS,8BAAM,MAAM;AAAA,QACrB,QAAQ,8BAAM,gBAAgB;AAAA,QAC9B,gBAAY,+BAAK,YAAU;AAAA,UACzB,OAAO;AAAA;AAAA,UAEP,SAAS;AAAA,YACP,EAAE,OAAO,aAAa,OAAO,YAAY;AAAA,YACzC,EAAE,OAAO,YAAY,OAAO,WAAW;AAAA,UACzC;AAAA,UACA,QAAQ,MAAM,WAAW;AAAA,QAC3B,EAAE;AAAA,QACF,KAAK,8BAAM,KAAK,YAAU;AAAA,UACxB,QAAQ;AAAA,YACN;AAAA,cACE,cAAU,sCAAkB,QAAQ,eAAe,CAAC,EAAE;AAAA,cACtD,OAAO,EAAE,OAAO,IAAI,MAAM,KAAK;AAAA,YACjC;AAAA,UACF;AAAA,UACA,OAAO;AAAA,UACP,cAAc,EAAE,OAAO,GAAG,MAAM,KAAK;AAAA,UACrC,QAAQ,MAAM,WAAW;AAAA,QAC3B,EAAE;AAAA,QACF,OAAO,8BAAM,yBAAyB,YAAU;AAAA,UAC9C,OAAO;AAAA,UACP,SAAS;AAAA,YACP,EAAE,OAAO,QAAQ,OAAO,0BAAO,MAAM,MAAM,eAAe;AAAA,YAC1D,EAAE,OAAO,WAAW,OAAO,0BAAO,SAAS,MAAM,kBAAkB;AAAA,YACnE,EAAE,OAAO,UAAU,OAAO,0BAAO,QAAQ,MAAM,iBAAiB;AAAA,UAClE;AAAA,UACA,cAAc,0BAAO;AAAA,UACrB,QAAQ,MAAM,WAAW;AAAA,QAC3B,EAAE;AAAA,QACF,MAAM,8BAAM,yBAAyB,YAAU;AAAA,UAC7C,OAAO;AAAA,UACP,SAAS;AAAA,YACP,EAAE,OAAO,SAAS,OAAO,yBAAM,OAAO,MAAM,cAAc;AAAA,YAC1D,EAAE,OAAO,UAAU,OAAO,yBAAM,QAAQ,MAAM,eAAe;AAAA,YAC7D,EAAE,OAAO,SAAS,OAAO,yBAAM,OAAO,MAAM,cAAc;AAAA,UAC5D;AAAA,UACA,cAAc,yBAAM;AAAA,UACpB,QAAQ,OAAO,WAAW;AAAA,QAC5B,EAAE;AAAA,QACF,UAAU,8BAAM,yBAAyB,YAAU;AAAA,UACjD,OAAO;AAAA,UACP,SAAS;AAAA,YACP,EAAE,OAAO,cAAc,OAAO,6BAAU,OAAO,MAAM,QAAQ;AAAA,YAC7D,EAAE,OAAO,aAAa,OAAO,6BAAU,MAAM,MAAM,SAAS;AAAA,UAC9D;AAAA,UACA,cAAc,6BAAU;AAAA,UACxB,QAAQ,MAAM,WAAW;AAAA,QAC3B,EAAE;AAAA,QACF,gBAAgB,8BAAM,UAAU,EAAE,OAAO,mBAAmB,CAAC;AAAA,QAC7D,~~gBAAgB~~,~~8BAAM~~,~~gBAAgB,~~CAAC,OAAO,WAAW;~~AACvD~~,gBAAM,SAAS,MAAM,WAAW;AAChC,gBAAM,qBAAqB,MAAM;AACjC,gBAAM,eAAW;AAAA,YACf,QAAQ,eAAe;AAAA,YACvB;AAAA,YACA;AAAA,UACF;AAEA,iBAAO;AAAA,YACL;AAAA,YACA,OAAO;AAAA,YACP,aACE,UAAU,UAAU,6BAAU,OAAO,2BAA2B;AAAA,UACpE;AAAA,QACF,CAAC;AAAA,QACD,iBAAiB,8BAAM,UAAU,EAAE,OAAO,oBAAoB,CAAC;AAAA,QAC/D,~~YAAY~~,~~8BAAM~~,~~gBAAgB,~~YAAU;AAAA,~~UAC1C~~,OAAO;AAAA,UACP,aAAa;AAAA,UACb,QAAQ,MAAM,WAAW;AAAA;AAAA,QAE3B,EAAE;AAAA,QACF,~~iBAAiB~~,~~8BAAM~~,~~gBAAgB,~~YAAU;AAAA,~~UAC/C~~,OAAO;AAAA,UACP,aAAa;AAAA,UACb,QAAQ,MAAM,WAAW;AAAA,QAC3B,EAAE;AAAA,QACF,aAAa,8BAAM,UAAU,YAAU;AAAA,UACrC,OAAO;AAAA,UACP,aAAa;AAAA,UACb,QAAQ,MAAM,WAAW;AAAA,QAC3B,EAAE;AAAA,QACF,eAAe,8BAAM,iBAAiB,YAAU;AAAA,UAC9C,OAAO;AAAA,UACP,SAAS;AAAA,YACP,EAAE,OAAO,QAAQ,OAAO,OAAO;AAAA,YAC/B,EAAE,OAAO,WAAW,OAAO,UAAU;AAAA,YACrC,EAAE,OAAO,UAAU,OAAO,WAAW;AAAA,YACrC,EAAE,OAAO,SAAS,OAAO,QAAQ;AAAA,YACjC,EAAE,OAAO,UAAU,OAAO,SAAS;AAAA,YACnC,EAAE,OAAO,UAAU,OAAO,SAAS;AAAA,YACnC,EAAE,OAAO,UAAU,OAAO,SAAS;AAAA,UACrC;AAAA,UACA,cAAc;AAAA,UACd,QAAQ,MAAM,WAAW;AAAA,QAC3B,EAAE;AAAA,QACF,~~aAAa~~,~~8BAAM~~,~~iBAAiB,~~YAAU;AAAA,~~UAC5C~~,OAAO;AAAA,UACP,QAAQ,MAAM,WAAW;AAAA;AAAA,QAE3B,EAAE;AAAA,QACF,iBAAiB,8BAAM,yBAAyB,YAAU;AAAA,UACxD,OAAO;AAAA,UACP,SAAS;AAAA,YACP,EAAE,OAAO,QAAQ,OAAO,8BAAW,MAAM,MAAM,cAAc;AAAA,YAC7D,EAAE,OAAO,UAAU,OAAO,8BAAW,QAAQ,MAAM,gBAAgB;AAAA,YACnE,EAAE,OAAO,SAAS,OAAO,8BAAW,OAAO,MAAM,eAAe;AAAA,UAClE;AAAA,UACA,cAAc,8BAAW;AAAA,UACzB,QAAQ,MAAM,WAAW;AAAA,QAC3B,EAAE;AAAA,QACF,OAAO,8BAAM,MAAM;AAAA,UACjB,QAAQ;AAAA,YACN;AAAA,cACE,cAAU,sCAAkB,QAAQ,eAAe,CAAC,EAAE;AAAA,cACtD,OAAO,EAAE,OAAO,KAAK,MAAM,KAAK;AAAA,YAClC;AAAA,UACF;AAAA,UACA,cAAc,EAAE,OAAO,KAAK,MAAM,IAAI;AAAA,UACtC,QAAQ,8BAAM,MAAM,OAAO;AAAA,QAC7B,CAAC;AAAA,QACD,QAAQ,8BAAM,OAAO,EAAE,QAAQ,8BAAM,OAAO,OAAO,UAAU,CAAC;AAAA,MAChE;AAAA,IACF;AAAA,EACF;AACF;","names":["import_react","import_prop_controllers"]}
1	+ {"version":3,"sources":["../../../../../src/components/builtin/Form/register.ts"],"sourcesContent":["import { Props, ResponsiveValue } from '../../../prop-controllers'\nimport { ReactRuntime } from '../../../runtimes/react'\nimport { findBreakpointOverride, getBaseBreakpoint } from '../../../state/modules/breakpoints'\nimport { MakeswiftComponentType } from '../constants'\nimport { Alignments, Contrast, Contrasts, Shapes, Sizes } from './context/FormContext'\nimport { ComponentIcon } from '../../../state/modules/components-meta'\nimport { lazy } from 'react'\nimport { Link, ResponsiveColor, ResponsiveLength } from '@makeswift/prop-controllers'\n\nexport function registerComponent(runtime: ReactRuntime) {\n return runtime.registerComponent(\n lazy(() => import('./Form')),\n {\n type: MakeswiftComponentType.Form,\n label: 'Form',\n icon: ComponentIcon.Form,\n props: {\n id: Props.ElementID(),\n tableId: Props.Table(),\n fields: Props.TableFormFields(),\n submitLink: Link(props => ({\n label: 'Redirect to',\n // TODO: This option is hardcoded. We should import it from LinkPanelOptions\n options: [\n { value: 'OPEN_PAGE', label: 'Open page' },\n { value: 'OPEN_URL', label: 'Open URL' },\n ],\n hidden: props.tableId == null,\n })),\n gap: Props.GapY(props => ({\n preset: [\n {\n deviceId: getBaseBreakpoint(runtime.getBreakpoints()).id,\n value: { value: 10, unit: 'px' },\n },\n ],\n label: 'Gap',\n defaultValue: { value: 0, unit: 'px' },\n hidden: props.tableId == null,\n })),\n shape: Props.ResponsiveIconRadioGroup(props => ({\n label: 'Shape',\n options: [\n { label: 'Pill', value: Shapes.PILL, icon: 'ButtonPill16' },\n { label: 'Rounded', value: Shapes.ROUNDED, icon: 'ButtonRounded16' },\n { label: 'Square', value: Shapes.SQUARE, icon: 'ButtonSquare16' },\n ],\n defaultValue: Shapes.ROUNDED,\n hidden: props.tableId == null,\n })),\n size: Props.ResponsiveIconRadioGroup(props => ({\n label: 'Size',\n options: [\n { label: 'Small', value: Sizes.SMALL, icon: 'SizeSmall16' },\n { label: 'Medium', value: Sizes.MEDIUM, icon: 'SizeMedium16' },\n { label: 'Large', value: Sizes.LARGE, icon: 'SizeLarge16' },\n ],\n defaultValue: Sizes.MEDIUM,\n hidden: props?.tableId == null,\n })),\n contrast: Props.ResponsiveIconRadioGroup(props => ({\n label: 'Color',\n options: [\n { label: 'Light mode', value: Contrasts.LIGHT, icon: 'Sun16' },\n { label: 'Dark mode', value: Contrasts.DARK, icon: 'Moon16' },\n ],\n defaultValue: Contrasts.LIGHT,\n hidden: props.tableId == null,\n })),\n labelTextStyle: Props.TextStyle({ label: 'Label text style' }),\n labelTextColor: ResponsiveColor((props, device) => {\n const hidden = props.tableId == null\n const responsiveContrast = props.contrast as ResponsiveValue<Contrast>\n const contrast = findBreakpointOverride<Contrast>(\n runtime.getBreakpoints(),\n responsiveContrast,\n device,\n )\n\n return {\n hidden,\n label: 'Label text color',\n placeholder:\n contrast?.value === Contrasts.DARK ? 'rgba(255,255,255,0.95)' : 'rgba(0,0,0,0.8)',\n }\n }),\n submitTextStyle: Props.TextStyle({ label: 'Button text style' }),\n brandColor: ResponsiveColor(props => ({\n label: 'Button color',\n placeholder: 'black',\n hidden: props.tableId == null,\n // TODO: Add hideAlphaSlider\n })),\n submitTextColor: ResponsiveColor(props => ({\n label: 'Button text color',\n placeholder: 'white',\n hidden: props.tableId == null,\n })),\n submitLabel: Props.TextInput(props => ({\n label: 'Button label',\n placeholder: 'Submit',\n hidden: props.tableId == null,\n })),\n submitVariant: Props.ResponsiveSelect(props => ({\n label: 'Button style',\n options: [\n { value: 'flat', label: 'Flat' },\n { value: 'outline', label: 'Outline' },\n { value: 'shadow', label: 'Floating' },\n { value: 'clear', label: 'Clear' },\n { value: 'blocky', label: 'Blocky' },\n { value: 'bubbly', label: 'Bubbly' },\n { value: 'skewed', label: 'Skewed' },\n ],\n defaultValue: 'flat',\n hidden: props.tableId == null,\n })),\n submitWidth: ResponsiveLength(props => ({\n label: 'Button width',\n hidden: props.tableId == null,\n // TODO: Add placeholder: { value: 'auto' }\n })),\n submitAlignment: Props.ResponsiveIconRadioGroup(props => ({\n label: 'Button alignment',\n options: [\n { label: 'Left', value: Alignments.LEFT, icon: 'AlignLeft16' },\n { label: 'Center', value: Alignments.CENTER, icon: 'AlignCenter16' },\n { label: 'Right', value: Alignments.RIGHT, icon: 'AlignRight16' },\n ],\n defaultValue: Alignments.CENTER,\n hidden: props.tableId == null,\n })),\n width: Props.Width({\n preset: [\n {\n deviceId: getBaseBreakpoint(runtime.getBreakpoints()).id,\n value: { value: 550, unit: 'px' },\n },\n ],\n defaultValue: { value: 100, unit: '%' },\n format: Props.Width.Format.ClassName,\n }),\n margin: Props.Margin({ format: Props.Margin.Format.ClassName }),\n },\n },\n )\n}\n"],"mappings":"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","names":["import_react","import_prop_controllers"]}

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

@@ -49,11 +49,11 @@ function registerComponent(runtime) {
         width: import_prop_controllers.Props.Width(),
         margin: import_prop_controllers.Props.Margin({ format: import_prop_controllers.Props.Margin.Format.ClassName }),
         padding: import_prop_controllers.Props.Padding({ format: import_prop_controllers.Props.Padding.Format.ClassName }),
-        border: import_prop_controllers.Props.Border({ format: import_prop_controllers.Props.Border.Format.ClassName }),
-        borderRadius: import_prop_controllers.Props.BorderRadius({ format: import_prop_controllers.Props.BorderRadius.Format.ClassName }),
-        boxShadow: import_prop_controllers.Props.Shadows({ format: import_prop_controllers.Props.Shadows.Format.ClassName }),
+        border: (0, import_prop_controllers2.Border)({ format: import_prop_controllers2.Border.Format.ClassName }),
+        borderRadius: (0, import_prop_controllers2.BorderRadius)({ format: import_prop_controllers2.BorderRadius.Format.ClassName }),
+        boxShadow: (0, import_prop_controllers2.Shadows)({ format: import_prop_controllers2.Shadows.Format.ClassName }),
         opacity: import_prop_controllers.Props.ResponsiveOpacity(),
-        priority: import_prop_controllers.Props.Checkbox({ label: "Priority" })
+        priority: (0, import_prop_controllers2.Checkbox)({ label: "Priority" })
       }
     }
   );

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

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

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

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

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

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

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

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

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

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

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

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

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