npm - @makeswift/runtime - Versions diffs - 0.25.0-canary.10 → 0.25.0-canary.12 - Mend

@makeswift/runtime 0.25.0-canary.10 → 0.25.0-canary.12

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

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

@@ -28,7 +28,7 @@ async function manifestHandler(req, { apiKey, manifest }) {
     return import_request_response.ApiResponse.json({ message: "Unauthorized" }, { status: 401 });
   }
   return import_request_response.ApiResponse.json({
-    version: "0.25.0-canary.10",
+    version: "0.25.0-canary.12",
     previewMode: false,
     draftMode: false,
     interactionMode: true,

package/dist/cjs/components/builtin/Box/animations.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/components/builtin/Box/animations.tsx"],"sourcesContent":["'use client'\n\nimport { CSSObject } from '@emotion/css'\nimport { useState, useEffect, useCallback, useRef } from 'react'\nimport { ResponsiveValue } from '../../../prop-controllers'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { useMediaQuery } from '../../hooks'\nimport { gridItemIdentifierClassName } from '../../shared/grid-item'\nimport {\n BoxAnimateIn,\n DEFAULT_BOX_ANIMATE_DELAY,\n DEFAULT_BOX_ANIMATE_DURATION,\n DEFAULT_BOX_ANIMATE_TYPE,\n DEFAULT_ITEM_ANIMATE_TYPE,\n DEFAULT_ITEM_STAGGER_DURATION,\n} from './constants'\nimport { type ResponsiveNumberValue, type ResponsiveSelectValue } from '@makeswift/prop-controllers'\n\nfunction useElementOnScreen(\n options: IntersectionObserverInit,\n): [boolean, (element: HTMLElement \| null) => void] {\n const [isVisible, setIsVisible] = useState(false)\n const intersectionObserverRef = useRef<IntersectionObserver \| null>(null)\n\n const setElement = useCallback((element: HTMLElement \| null) => {\n if (element != null) {\n const observer = new IntersectionObserver(([entry]) => {\n if (entry?.isIntersecting) setIsVisible(true)\n }, options)\n\n observer.observe(element)\n\n intersectionObserverRef.current = observer\n } else {\n intersectionObserverRef.current?.disconnect()\n\n intersectionObserverRef.current = null\n }\n }, [])\n\n return [isVisible, setElement]\n}\n\nexport type BoxAnimationProps = {\n boxAnimateType?: ResponsiveSelectValue<BoxAnimateIn>\n boxAnimateDuration?: ResponsiveNumberValue\n boxAnimateDelay?: ResponsiveNumberValue\n itemAnimateType?: ResponsiveSelectValue<BoxAnimateIn>\n itemAnimateDuration?: ResponsiveNumberValue\n itemAnimateDelay?: ResponsiveNumberValue\n itemStaggerDuration?: ResponsiveNumberValue\n}\n\nfunction compareResponsiveValues<T>(a?: ResponsiveValue<T>, b?: ResponsiveValue<T>) {\n if (a == null && b == null) {\n return true\n }\n if (a != null && b != null) {\n let isEqual = true\n a.forEach((currentA, index) => {\n const currentB = b.at(index)\n if (currentB == null) {\n isEqual = false\n return\n }\n\n if (currentA.deviceId != currentB?.deviceId \|\| currentA.value != currentB.value) {\n isEqual = false\n }\n })\n return isEqual\n }\n\n return false\n}\n\nexport function areBoxAnimationPropsEqual(prevProps: BoxAnimationProps, props: BoxAnimationProps) {\n return (\n compareResponsiveValues(prevProps.boxAnimateType, props.boxAnimateType) &&\n compareResponsiveValues(prevProps.boxAnimateDuration, props.boxAnimateDuration) &&\n compareResponsiveValues(prevProps.boxAnimateDelay, props.boxAnimateDelay) &&\n compareResponsiveValues(prevProps.itemAnimateType, props.itemAnimateType) &&\n compareResponsiveValues(prevProps.itemAnimateDuration, props.itemAnimateDuration) &&\n compareResponsiveValues(prevProps.itemAnimateDelay, props.itemAnimateDelay) &&\n compareResponsiveValues(prevProps.itemStaggerDuration, props.itemStaggerDuration)\n )\n}\n\nconst exitedBoxAnimationProperties: { [key in BoxAnimateIn]: CSSObject } = {\n none: { opacity: 1 },\n fadeIn: { opacity: 0 },\n fadeLeft: { transform: 'translate3d(60px,0,0)', opacity: 0 },\n fadeRight: { transform: 'translate3d(-60px,0,0)', opacity: 0 },\n fadeDown: { transform: 'translate3d(0,-80px,0)', opacity: 0 },\n fadeUp: { transform: 'translate3d(0,80px,0)', opacity: 0 },\n blurIn: { filter: 'blur(20px)', opacity: 0 },\n scaleDown: {\n transform: 'scale(1.2)',\n opacity: 0,\n },\n scaleUp: {\n transform: 'scale(.75)',\n opacity: 0,\n },\n}\n\nconst enteredBoxAnimationProperties: { [key in BoxAnimateIn]: CSSObject } = {\n none: { opacity: 1 },\n fadeIn: { opacity: 1 },\n fadeLeft: { transform: 'translate3d(0px,0,0)', opacity: 1 },\n fadeRight: { transform: 'translate3d(0px,0,0)', opacity: 1 },\n fadeDown: { transform: 'translate3d(0,0px,0)', opacity: 1 },\n fadeUp: { transform: 'translate3d(0,0px,0)', opacity: 1 },\n blurIn: { filter: 'blur(0px)', opacity: 1 },\n scaleDown: {\n transform: 'scale(1)',\n opacity: 1,\n },\n scaleUp: {\n transform: 'scale(1)',\n opacity: 1,\n },\n}\n\nexport function useBoxAnimation(\n responsiveAnimationType: ResponsiveValue<BoxAnimateIn> \| undefined,\n responsiveDuration: ResponsiveValue<number> \| undefined,\n responisveDelay: ResponsiveValue<number> \| undefined,\n itemResponsiveAnimationType: ResponsiveValue<BoxAnimateIn> \| undefined,\n): [string, () => void, (element: HTMLElement \| null) => void] {\n const [isVisible, setElement] = useElementOnScreen({\n root: null,\n rootMargin: `0px 0px -10% 0px`,\n threshold: 0.2,\n })\n const animationType = useMediaQuery(responsiveAnimationType) \|\| DEFAULT_BOX_ANIMATE_TYPE\n const itemAnimationType = useMediaQuery(itemResponsiveAnimationType) \|\| DEFAULT_ITEM_ANIMATE_TYPE\n const duration = useMediaQuery(responsiveDuration) \|\| DEFAULT_BOX_ANIMATE_DURATION\n const delay = useMediaQuery(responisveDelay) \|\| DEFAULT_BOX_ANIMATE_DELAY\n const actualDelay = delay * 1000\n const actualDuration = duration * 1000\n\n const entered = {\n ...enteredBoxAnimationProperties[animationType],\n transition: `transform ${actualDuration}ms cubic-bezier(0.16, 0.84, 0.44, 1) ${actualDelay}ms,filter ${actualDuration}ms cubic-bezier(0.16, 0.84, 0.44, 1) ${actualDelay}ms, opacity ${actualDuration}ms ease ${actualDelay}ms`,\n [`& > div > .${gridItemIdentifierClassName}`]: {\n ...enteredBoxAnimationProperties[itemAnimationType],\n },\n }\n\n const exited = {\n ...exitedBoxAnimationProperties[animationType],\n transition: `all 0ms`,\n [`& > div > .${gridItemIdentifierClassName}`]: {\n ...exitedBoxAnimationProperties[itemAnimationType],\n },\n }\n\n const [isEntered, setEntered] = useState(false)\n\n useEffect(() => {\n if (isVisible && !isEntered) setEntered(true)\n }, [isVisible, entered])\n\n const replayAnimation = useCallback(() => {\n setEntered(false)\n }, [])\n\n return [\n useStyle({\n '@media (prefers-reduced-motion: no-preference)': isEntered ? entered : exited,\n }),\n replayAnimation,\n setElement,\n ]\n}\n\nexport function useItemAnimation(\n responsiveDuration: ResponsiveValue<number> \| undefined,\n responisveDelay: ResponsiveValue<number> \| undefined,\n responsiveStagger: ResponsiveValue<number> \| undefined,\n index: number,\n) {\n const duration = useMediaQuery(responsiveDuration) \|\| DEFAULT_BOX_ANIMATE_DURATION\n const delay = useMediaQuery(responisveDelay) \|\| DEFAULT_BOX_ANIMATE_DELAY\n const stagger = useMediaQuery(responsiveStagger) \|\| DEFAULT_ITEM_STAGGER_DURATION\n const delayFromStagger = responsiveStagger == null \|\| index == null ? 0 : stagger * index\n const actualDelay = (delay + delayFromStagger) * 1000\n const actualDuration = duration * 1000\n\n return useStyle({\n '@media (prefers-reduced-motion: no-preference)': {\n transition: `transform ${actualDuration}ms cubic-bezier(0.16, 0.84, 0.44, 1) ${actualDelay}ms,filter ${actualDuration}ms cubic-bezier(0.16, 0.84, 0.44, 1) ${actualDelay}ms, opacity ${actualDuration}ms ease ${actualDelay}ms`,\n },\n })\n}\n"],"mappings":"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","names":[]}
1	+ {"version":3,"sources":["../../../../../src/components/builtin/Box/animations.tsx"],"sourcesContent":["'use client'\n\nimport { type CSSObject } from '@emotion/serialize'\nimport { useState, useEffect, useCallback, useRef } from 'react'\nimport { ResponsiveValue } from '../../../prop-controllers'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { useMediaQuery } from '../../hooks'\nimport { gridItemIdentifierClassName } from '../../shared/grid-item'\nimport {\n BoxAnimateIn,\n DEFAULT_BOX_ANIMATE_DELAY,\n DEFAULT_BOX_ANIMATE_DURATION,\n DEFAULT_BOX_ANIMATE_TYPE,\n DEFAULT_ITEM_ANIMATE_TYPE,\n DEFAULT_ITEM_STAGGER_DURATION,\n} from './constants'\nimport { type ResponsiveNumberValue, type ResponsiveSelectValue } from '@makeswift/prop-controllers'\n\nfunction useElementOnScreen(\n options: IntersectionObserverInit,\n): [boolean, (element: HTMLElement \| null) => void] {\n const [isVisible, setIsVisible] = useState(false)\n const intersectionObserverRef = useRef<IntersectionObserver \| null>(null)\n\n const setElement = useCallback((element: HTMLElement \| null) => {\n if (element != null) {\n const observer = new IntersectionObserver(([entry]) => {\n if (entry?.isIntersecting) setIsVisible(true)\n }, options)\n\n observer.observe(element)\n\n intersectionObserverRef.current = observer\n } else {\n intersectionObserverRef.current?.disconnect()\n\n intersectionObserverRef.current = null\n }\n }, [])\n\n return [isVisible, setElement]\n}\n\nexport type BoxAnimationProps = {\n boxAnimateType?: ResponsiveSelectValue<BoxAnimateIn>\n boxAnimateDuration?: ResponsiveNumberValue\n boxAnimateDelay?: ResponsiveNumberValue\n itemAnimateType?: ResponsiveSelectValue<BoxAnimateIn>\n itemAnimateDuration?: ResponsiveNumberValue\n itemAnimateDelay?: ResponsiveNumberValue\n itemStaggerDuration?: ResponsiveNumberValue\n}\n\nfunction compareResponsiveValues<T>(a?: ResponsiveValue<T>, b?: ResponsiveValue<T>) {\n if (a == null && b == null) {\n return true\n }\n if (a != null && b != null) {\n let isEqual = true\n a.forEach((currentA, index) => {\n const currentB = b.at(index)\n if (currentB == null) {\n isEqual = false\n return\n }\n\n if (currentA.deviceId != currentB?.deviceId \|\| currentA.value != currentB.value) {\n isEqual = false\n }\n })\n return isEqual\n }\n\n return false\n}\n\nexport function areBoxAnimationPropsEqual(prevProps: BoxAnimationProps, props: BoxAnimationProps) {\n return (\n compareResponsiveValues(prevProps.boxAnimateType, props.boxAnimateType) &&\n compareResponsiveValues(prevProps.boxAnimateDuration, props.boxAnimateDuration) &&\n compareResponsiveValues(prevProps.boxAnimateDelay, props.boxAnimateDelay) &&\n compareResponsiveValues(prevProps.itemAnimateType, props.itemAnimateType) &&\n compareResponsiveValues(prevProps.itemAnimateDuration, props.itemAnimateDuration) &&\n compareResponsiveValues(prevProps.itemAnimateDelay, props.itemAnimateDelay) &&\n compareResponsiveValues(prevProps.itemStaggerDuration, props.itemStaggerDuration)\n )\n}\n\nconst exitedBoxAnimationProperties: { [key in BoxAnimateIn]: CSSObject } = {\n none: { opacity: 1 },\n fadeIn: { opacity: 0 },\n fadeLeft: { transform: 'translate3d(60px,0,0)', opacity: 0 },\n fadeRight: { transform: 'translate3d(-60px,0,0)', opacity: 0 },\n fadeDown: { transform: 'translate3d(0,-80px,0)', opacity: 0 },\n fadeUp: { transform: 'translate3d(0,80px,0)', opacity: 0 },\n blurIn: { filter: 'blur(20px)', opacity: 0 },\n scaleDown: {\n transform: 'scale(1.2)',\n opacity: 0,\n },\n scaleUp: {\n transform: 'scale(.75)',\n opacity: 0,\n },\n}\n\nconst enteredBoxAnimationProperties: { [key in BoxAnimateIn]: CSSObject } = {\n none: { opacity: 1 },\n fadeIn: { opacity: 1 },\n fadeLeft: { transform: 'translate3d(0px,0,0)', opacity: 1 },\n fadeRight: { transform: 'translate3d(0px,0,0)', opacity: 1 },\n fadeDown: { transform: 'translate3d(0,0px,0)', opacity: 1 },\n fadeUp: { transform: 'translate3d(0,0px,0)', opacity: 1 },\n blurIn: { filter: 'blur(0px)', opacity: 1 },\n scaleDown: {\n transform: 'scale(1)',\n opacity: 1,\n },\n scaleUp: {\n transform: 'scale(1)',\n opacity: 1,\n },\n}\n\nexport function useBoxAnimation(\n responsiveAnimationType: ResponsiveValue<BoxAnimateIn> \| undefined,\n responsiveDuration: ResponsiveValue<number> \| undefined,\n responisveDelay: ResponsiveValue<number> \| undefined,\n itemResponsiveAnimationType: ResponsiveValue<BoxAnimateIn> \| undefined,\n): [string, () => void, (element: HTMLElement \| null) => void] {\n const [isVisible, setElement] = useElementOnScreen({\n root: null,\n rootMargin: `0px 0px -10% 0px`,\n threshold: 0.2,\n })\n const animationType = useMediaQuery(responsiveAnimationType) \|\| DEFAULT_BOX_ANIMATE_TYPE\n const itemAnimationType = useMediaQuery(itemResponsiveAnimationType) \|\| DEFAULT_ITEM_ANIMATE_TYPE\n const duration = useMediaQuery(responsiveDuration) \|\| DEFAULT_BOX_ANIMATE_DURATION\n const delay = useMediaQuery(responisveDelay) \|\| DEFAULT_BOX_ANIMATE_DELAY\n const actualDelay = delay * 1000\n const actualDuration = duration * 1000\n\n const entered = {\n ...enteredBoxAnimationProperties[animationType],\n transition: `transform ${actualDuration}ms cubic-bezier(0.16, 0.84, 0.44, 1) ${actualDelay}ms,filter ${actualDuration}ms cubic-bezier(0.16, 0.84, 0.44, 1) ${actualDelay}ms, opacity ${actualDuration}ms ease ${actualDelay}ms`,\n [`& > div > .${gridItemIdentifierClassName}`]: {\n ...enteredBoxAnimationProperties[itemAnimationType],\n },\n }\n\n const exited = {\n ...exitedBoxAnimationProperties[animationType],\n transition: `all 0ms`,\n [`& > div > .${gridItemIdentifierClassName}`]: {\n ...exitedBoxAnimationProperties[itemAnimationType],\n },\n }\n\n const [isEntered, setEntered] = useState(false)\n\n useEffect(() => {\n if (isVisible && !isEntered) setEntered(true)\n }, [isVisible, entered])\n\n const replayAnimation = useCallback(() => {\n setEntered(false)\n }, [])\n\n return [\n useStyle({\n '@media (prefers-reduced-motion: no-preference)': isEntered ? entered : exited,\n }),\n replayAnimation,\n setElement,\n ]\n}\n\nexport function useItemAnimation(\n responsiveDuration: ResponsiveValue<number> \| undefined,\n responisveDelay: ResponsiveValue<number> \| undefined,\n responsiveStagger: ResponsiveValue<number> \| undefined,\n index: number,\n) {\n const duration = useMediaQuery(responsiveDuration) \|\| DEFAULT_BOX_ANIMATE_DURATION\n const delay = useMediaQuery(responisveDelay) \|\| DEFAULT_BOX_ANIMATE_DELAY\n const stagger = useMediaQuery(responsiveStagger) \|\| DEFAULT_ITEM_STAGGER_DURATION\n const delayFromStagger = responsiveStagger == null \|\| index == null ? 0 : stagger * index\n const actualDelay = (delay + delayFromStagger) * 1000\n const actualDuration = duration * 1000\n\n return useStyle({\n '@media (prefers-reduced-motion: no-preference)': {\n transition: `transform ${actualDuration}ms cubic-bezier(0.16, 0.84, 0.44, 1) ${actualDelay}ms,filter ${actualDuration}ms cubic-bezier(0.16, 0.84, 0.44, 1) ${actualDelay}ms, opacity ${actualDuration}ms ease ${actualDelay}ms`,\n },\n })\n}\n"],"mappings":"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","names":[]}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../../../../src/components/builtin/Form/components/Field/services/responsiveField.ts"],"sourcesContent":["import { colorToString } from '../../../../../utils/colorToString'\n\nimport {\n Size,\n Shape,\n Contrast,\n Shapes,\n Sizes,\n Contrasts,\n Value,\n} from '../../../context/FormContext'\nimport { useResponsiveStyle } from '../../../../../utils/responsive-style'\nimport { CSSObject } from '@emotion/~~css~~'\n\nexport function getSizeHeight(size: Size): number {\n switch (size) {\n case Sizes.SMALL:\n return 30\n\n case Sizes.MEDIUM:\n return 38\n\n case Sizes.LARGE:\n return 48\n\n default:\n throw new Error(`Invalid form size \"${size}\"`)\n }\n}\n\nexport function getSizeHorizontalPadding(size: Size): number {\n switch (size) {\n case Sizes.SMALL:\n return 8\n\n case Sizes.MEDIUM:\n return 12\n\n case Sizes.LARGE:\n return 16\n\n default:\n throw new Error(`Invalid form size \"${size}\"`)\n }\n}\n\nfunction getSizeVerticalPadding(size: Size): number {\n switch (size) {\n case Sizes.SMALL:\n return 3\n\n case Sizes.MEDIUM:\n return 7\n\n case Sizes.LARGE:\n return 11\n\n default:\n throw new Error(`Invalid form size \"${size}\"`)\n }\n}\n\nexport function getShapeBorderRadius(shape: Shape): number {\n switch (shape) {\n case Shapes.SQUARE:\n return 0\n\n case Shapes.ROUNDED:\n return 4\n\n case Shapes.PILL:\n return 500\n\n default:\n throw new Error(`Invalid form shape \"${shape}\"`)\n }\n}\n\nexport function getContrastBorderColor(contrast: Contrast, error?: boolean): string {\n switch (contrast) {\n case Contrasts.LIGHT:\n return error ? 'rgba(255, 0, 0, 0.7)' : 'rgba(0, 0, 0, 0.25)'\n\n case Contrasts.DARK:\n return error ? 'rgba(255, 0, 0, 0.7)' : 'rgba(255, 255, 255, 0.6)'\n\n default:\n throw new Error(`Invalid form contrast \"${contrast}\"`)\n }\n}\n\nexport function getContrastBackgroundColor(contrast: Contrast): string {\n switch (contrast) {\n case Contrasts.LIGHT:\n return 'white'\n\n case Contrasts.DARK:\n return 'rgba(0, 0, 0, 0.7)'\n\n default:\n throw new Error(`Invalid form contrast \"${contrast}\"`)\n }\n}\n\nexport function getContrastColor(contrast: Contrast): string {\n switch (contrast) {\n case Contrasts.LIGHT:\n return 'rgba(0, 0, 0, 0.95)'\n\n case Contrasts.DARK:\n return 'white'\n\n default:\n throw new Error(`Invalid form contrast \"${contrast}\"`)\n }\n}\n\nfunction getContrastPlaceholderColor(contrast: Contrast) {\n switch (contrast) {\n case Contrasts.LIGHT:\n return 'rgba(0, 0, 0, 0.3)'\n\n case Contrasts.DARK:\n return 'rgba(255,255,255,0.3)'\n\n default:\n throw new Error(`Invalid form contrast \"${contrast}\"`)\n }\n}\n\nexport default function responsiveField(\n props: Pick<Value, 'shape' \| 'size' \| 'contrast' \| 'brandColor'> & { error?: boolean },\n): CSSObject {\n return {\n display: 'block',\n width: '100%',\n outline: 'none',\n borderWidth: 1,\n borderStyle: 'solid',\n transition: 'border-color 200ms',\n ...useResponsiveStyle(\n [props.shape, props.size, props.contrast, props.brandColor] as const,\n ([\n shape = Shapes.ROUNDED,\n size = Sizes.MEDIUM,\n contrast = Contrasts.LIGHT,\n brandColor = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n ]) => ({\n padding: `${getSizeVerticalPadding(size)}px ${getSizeHorizontalPadding(size)}px`,\n borderRadius: getShapeBorderRadius(shape),\n borderColor: getContrastBorderColor(contrast, props.error),\n color: getContrastColor(contrast),\n backgroundColor: getContrastBackgroundColor(contrast),\n\n ':focus, :focus-within': {\n borderColor: colorToString(brandColor),\n },\n\n '::placeholder': {\n color: getContrastPlaceholderColor(contrast),\n },\n }),\n ),\n }\n}\n"],"mappings":"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","names":[]}
1	+ {"version":3,"sources":["../../../../../../../../src/components/builtin/Form/components/Field/services/responsiveField.ts"],"sourcesContent":["import { colorToString } from '../../../../../utils/colorToString'\n\nimport {\n Size,\n Shape,\n Contrast,\n Shapes,\n Sizes,\n Contrasts,\n Value,\n} from '../../../context/FormContext'\nimport { useResponsiveStyle } from '../../../../../utils/responsive-style'\nimport { type CSSObject } from '@emotion/serialize'\n\nexport function getSizeHeight(size: Size): number {\n switch (size) {\n case Sizes.SMALL:\n return 30\n\n case Sizes.MEDIUM:\n return 38\n\n case Sizes.LARGE:\n return 48\n\n default:\n throw new Error(`Invalid form size \"${size}\"`)\n }\n}\n\nexport function getSizeHorizontalPadding(size: Size): number {\n switch (size) {\n case Sizes.SMALL:\n return 8\n\n case Sizes.MEDIUM:\n return 12\n\n case Sizes.LARGE:\n return 16\n\n default:\n throw new Error(`Invalid form size \"${size}\"`)\n }\n}\n\nfunction getSizeVerticalPadding(size: Size): number {\n switch (size) {\n case Sizes.SMALL:\n return 3\n\n case Sizes.MEDIUM:\n return 7\n\n case Sizes.LARGE:\n return 11\n\n default:\n throw new Error(`Invalid form size \"${size}\"`)\n }\n}\n\nexport function getShapeBorderRadius(shape: Shape): number {\n switch (shape) {\n case Shapes.SQUARE:\n return 0\n\n case Shapes.ROUNDED:\n return 4\n\n case Shapes.PILL:\n return 500\n\n default:\n throw new Error(`Invalid form shape \"${shape}\"`)\n }\n}\n\nexport function getContrastBorderColor(contrast: Contrast, error?: boolean): string {\n switch (contrast) {\n case Contrasts.LIGHT:\n return error ? 'rgba(255, 0, 0, 0.7)' : 'rgba(0, 0, 0, 0.25)'\n\n case Contrasts.DARK:\n return error ? 'rgba(255, 0, 0, 0.7)' : 'rgba(255, 255, 255, 0.6)'\n\n default:\n throw new Error(`Invalid form contrast \"${contrast}\"`)\n }\n}\n\nexport function getContrastBackgroundColor(contrast: Contrast): string {\n switch (contrast) {\n case Contrasts.LIGHT:\n return 'white'\n\n case Contrasts.DARK:\n return 'rgba(0, 0, 0, 0.7)'\n\n default:\n throw new Error(`Invalid form contrast \"${contrast}\"`)\n }\n}\n\nexport function getContrastColor(contrast: Contrast): string {\n switch (contrast) {\n case Contrasts.LIGHT:\n return 'rgba(0, 0, 0, 0.95)'\n\n case Contrasts.DARK:\n return 'white'\n\n default:\n throw new Error(`Invalid form contrast \"${contrast}\"`)\n }\n}\n\nfunction getContrastPlaceholderColor(contrast: Contrast) {\n switch (contrast) {\n case Contrasts.LIGHT:\n return 'rgba(0, 0, 0, 0.3)'\n\n case Contrasts.DARK:\n return 'rgba(255,255,255,0.3)'\n\n default:\n throw new Error(`Invalid form contrast \"${contrast}\"`)\n }\n}\n\nexport default function responsiveField(\n props: Pick<Value, 'shape' \| 'size' \| 'contrast' \| 'brandColor'> & { error?: boolean },\n): CSSObject {\n return {\n display: 'block',\n width: '100%',\n outline: 'none',\n borderWidth: 1,\n borderStyle: 'solid',\n transition: 'border-color 200ms',\n ...useResponsiveStyle(\n [props.shape, props.size, props.contrast, props.brandColor] as const,\n ([\n shape = Shapes.ROUNDED,\n size = Sizes.MEDIUM,\n contrast = Contrasts.LIGHT,\n brandColor = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n ]) => ({\n padding: `${getSizeVerticalPadding(size)}px ${getSizeHorizontalPadding(size)}px`,\n borderRadius: getShapeBorderRadius(shape),\n borderColor: getContrastBorderColor(contrast, props.error),\n color: getContrastColor(contrast),\n backgroundColor: getContrastBackgroundColor(contrast),\n\n ':focus, :focus-within': {\n borderColor: colorToString(brandColor),\n },\n\n '::placeholder': {\n color: getContrastPlaceholderColor(contrast),\n },\n }),\n ),\n }\n}\n"],"mappings":"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","names":[]}

package/dist/cjs/components/shared/BackgroundsContainer/components/Backgrounds/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../../../src/components/shared/BackgroundsContainer/components/Backgrounds/index.tsx"],"sourcesContent":["import { BackgroundsPropControllerValue, BackgroundsData } from '../../../../hooks'\nimport { ResponsiveValue } from '../../../../../prop-controllers'\nimport { ColorValue as Color } from '../../../../utils/types'\nimport { colorToString } from '../../../../utils/colorToString'\nimport Parallax from '../Parallax'\nimport BackgroundVideo from '../BackgroundVideo'\nimport { CSSObject } from '@emotion/css'\nimport { useStyle } from '../../../../../runtimes/react/use-style'\nimport { useResponsiveStyle } from '../../../../utils/responsive-style'\nimport { useFrameworkContext } from '../../../../../runtimes/react/components/hooks/use-framework-context'\n\nfunction getColor(color: Color \| null \| undefined) {\n if (color == null) return 'black'\n\n if (color.swatch == null) {\n return colorToString({ ...color, swatch: { hue: 0, saturation: 0, lightness: 0 } })\n }\n\n return colorToString(color)\n}\n\ntype GradientStop = { color: Color \| null \| undefined; location: number }\n\nconst getStopsStyle = (stops: GradientStop[]) =>\n stops.map(({ color, location }) => `${getColor(color)} ${location}%`).join(',')\n\nconst absoluteFillStyle: CSSObject = {\n position: 'absolute',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n}\n\nconst containerStyle: CSSObject = {\n ...absoluteFillStyle,\n borderRadius: 'inherit',\n}\n\ntype Props = { backgrounds: BackgroundsPropControllerValue \| null \| undefined }\n\nexport default function Backgrounds({ backgrounds }: Props): JSX.Element {\n if (backgrounds == null) return <></>\n\n return (\n <>\n {backgrounds.map(({ value, deviceId }) => {\n const visibility = backgrounds.map(v => ({\n deviceId: v.deviceId,\n value: v.deviceId === deviceId,\n }))\n\n return <BackgroundDeviceLayer key={deviceId} layer={value} visibility={visibility} />\n })}\n </>\n )\n}\n\ntype BackgroundLayerProps = {\n layer: BackgroundsData\n visibility: ResponsiveValue<boolean>\n}\n\nfunction BackgroundDeviceLayer({ layer, visibility }: BackgroundLayerProps) {\n const visibilityStyle = useResponsiveStyle([visibility], ([v]) => ({\n display: v === true ? 'block' : 'none',\n }))\n\n return (\n <div className={useStyle({ ...containerStyle, ...visibilityStyle, overflow: 'hidden' })}>\n {[...layer].reverse().map(bg => {\n if (bg.type === 'color') {\n return <ColorBackground key={bg.id} color={getColor(bg.payload)} />\n }\n\n if (bg.type === 'image' && bg.payload) {\n return <ImageBackground {...bg.payload} key={bg.id} />\n }\n\n if (bg.type === 'gradient' && bg.payload) {\n return (\n <GradientBackground\n {...bg.payload}\n key={bg.id}\n gradient={getStopsStyle(bg.payload.stops)}\n />\n )\n }\n\n if (bg.type === 'video' && bg.payload) {\n return (\n <VideoBackground\n {...bg.payload}\n key={bg.id}\n maskColor={getColor(bg.payload.maskColor)}\n />\n )\n }\n\n return null\n })}\n </div>\n )\n}\n\ntype ColorBackgroundProps = { color: string }\n\nfunction ColorBackground({ color }: ColorBackgroundProps) {\n return <div className={useStyle({ ...containerStyle, backgroundColor: color })} />\n}\n\nconst ImageBackgroundRepeat = {\n NoRepeat: 'no-repeat',\n RepeatX: 'repeat-x',\n RepeatY: 'repeat-y',\n Repeat: 'repeat',\n} as const\n\ntype ImageBackgroundRepeat = (typeof ImageBackgroundRepeat)[keyof typeof ImageBackgroundRepeat]\n\nconst ImageBackgroundSize = {\n Cover: 'cover',\n Contain: 'contain',\n Auto: 'auto',\n} as const\n\ntype ImageBackgroundSize = (typeof ImageBackgroundSize)[keyof typeof ImageBackgroundSize]\n\ntype ImageBackgroundProps = {\n publicUrl?: string\n position: { x: number; y: number }\n repeat?: ImageBackgroundRepeat\n size?: ImageBackgroundSize\n opacity?: number\n parallax?: number\n priority?: boolean\n}\n\nfunction ImageBackground({\n publicUrl,\n position,\n repeat = ImageBackgroundRepeat.NoRepeat,\n size = ImageBackgroundSize.Cover,\n opacity,\n parallax,\n priority,\n}: ImageBackgroundProps) {\n const backgroundPosition = `${position.x}% ${position.y}%`\n const containerClassName = useStyle(containerStyle)\n const { Image } = useFrameworkContext()\n\n if (repeat === 'no-repeat' && size !== 'auto' && publicUrl != null) {\n return (\n <Parallax strength={parallax}>\n {getParallaxProps => (\n <div {...getParallaxProps({ style: { opacity, overflow: 'hidden' } })}>\n <Image\n src={publicUrl}\n alt={''}\n fill\n sizes=\"100vw\"\n style={{\n objectPosition: backgroundPosition,\n objectFit: size,\n }}\n priority={priority}\n />\n </div>\n )}\n </Parallax>\n )\n }\n\n return (\n <Parallax strength={parallax}>\n {getParallaxProps => (\n <div\n className={containerClassName}\n {...getParallaxProps({\n style: {\n backgroundImage: publicUrl != null ? `url('${publicUrl}')` : undefined,\n backgroundPosition,\n backgroundRepeat: repeat,\n backgroundSize: size,\n opacity,\n },\n })}\n />\n )}\n </Parallax>\n )\n}\n\ntype GradientBackgroundProps = {\n gradient: string\n angle?: number\n isRadial?: boolean\n}\n\nfunction GradientBackground({\n gradient,\n isRadial = false,\n angle = Math.PI,\n}: GradientBackgroundProps) {\n return (\n <div\n className={useStyle({\n ...containerStyle,\n background: isRadial\n ? `radial-gradient(${gradient})`\n : `linear-gradient(${angle}rad, ${gradient})`,\n })}\n />\n )\n}\n\nconst BackgroundVideoAspectRatio = {\n Wide: 'wide',\n Standard: 'standard',\n} as const\n\ntype BackgroundVideoAspectRatio =\n (typeof BackgroundVideoAspectRatio)[keyof typeof BackgroundVideoAspectRatio]\n\nfunction getAspectRatio(aspectRatio: BackgroundVideoAspectRatio \| null \| undefined): number {\n switch (aspectRatio) {\n case 'wide':\n return 16 / 9\n\n case 'standard':\n return 4 / 3\n\n default:\n return 16 / 9\n }\n}\n\ntype VideoBackgroundProps = {\n url?: string\n aspectRatio?: BackgroundVideoAspectRatio\n maskColor: string\n zoom?: number\n opacity?: number\n parallax?: number\n}\n\nfunction VideoBackground({\n url,\n aspectRatio,\n maskColor,\n zoom,\n opacity,\n parallax,\n}: VideoBackgroundProps) {\n return (\n <Parallax strength={parallax}>\n {getParallaxProps => (\n <div {...getParallaxProps({ className: useStyle(containerStyle) })}>\n <BackgroundVideo\n url={url}\n zoom={zoom}\n opacity={opacity}\n aspectRatio={getAspectRatio(aspectRatio)}\n maskColor={maskColor}\n />\n </div>\n )}\n </Parallax>\n )\n}\n"],"mappings":"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","names":["Parallax","BackgroundVideo"]}
1	+ {"version":3,"sources":["../../../../../../../src/components/shared/BackgroundsContainer/components/Backgrounds/index.tsx"],"sourcesContent":["import { BackgroundsPropControllerValue, BackgroundsData } from '../../../../hooks'\nimport { ResponsiveValue } from '../../../../../prop-controllers'\nimport { ColorValue as Color } from '../../../../utils/types'\nimport { colorToString } from '../../../../utils/colorToString'\nimport Parallax from '../Parallax'\nimport BackgroundVideo from '../BackgroundVideo'\nimport { type CSSObject } from '@emotion/serialize'\nimport { useStyle } from '../../../../../runtimes/react/use-style'\nimport { useResponsiveStyle } from '../../../../utils/responsive-style'\nimport { useFrameworkContext } from '../../../../../runtimes/react/components/hooks/use-framework-context'\n\nfunction getColor(color: Color \| null \| undefined) {\n if (color == null) return 'black'\n\n if (color.swatch == null) {\n return colorToString({ ...color, swatch: { hue: 0, saturation: 0, lightness: 0 } })\n }\n\n return colorToString(color)\n}\n\ntype GradientStop = { color: Color \| null \| undefined; location: number }\n\nconst getStopsStyle = (stops: GradientStop[]) =>\n stops.map(({ color, location }) => `${getColor(color)} ${location}%`).join(',')\n\nconst absoluteFillStyle: CSSObject = {\n position: 'absolute',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n}\n\nconst containerStyle: CSSObject = {\n ...absoluteFillStyle,\n borderRadius: 'inherit',\n}\n\ntype Props = { backgrounds: BackgroundsPropControllerValue \| null \| undefined }\n\nexport default function Backgrounds({ backgrounds }: Props): JSX.Element {\n if (backgrounds == null) return <></>\n\n return (\n <>\n {backgrounds.map(({ value, deviceId }) => {\n const visibility = backgrounds.map(v => ({\n deviceId: v.deviceId,\n value: v.deviceId === deviceId,\n }))\n\n return <BackgroundDeviceLayer key={deviceId} layer={value} visibility={visibility} />\n })}\n </>\n )\n}\n\ntype BackgroundLayerProps = {\n layer: BackgroundsData\n visibility: ResponsiveValue<boolean>\n}\n\nfunction BackgroundDeviceLayer({ layer, visibility }: BackgroundLayerProps) {\n const visibilityStyle = useResponsiveStyle([visibility], ([v]) => ({\n display: v === true ? 'block' : 'none',\n }))\n\n return (\n <div className={useStyle({ ...containerStyle, ...visibilityStyle, overflow: 'hidden' })}>\n {[...layer].reverse().map(bg => {\n if (bg.type === 'color') {\n return <ColorBackground key={bg.id} color={getColor(bg.payload)} />\n }\n\n if (bg.type === 'image' && bg.payload) {\n return <ImageBackground {...bg.payload} key={bg.id} />\n }\n\n if (bg.type === 'gradient' && bg.payload) {\n return (\n <GradientBackground\n {...bg.payload}\n key={bg.id}\n gradient={getStopsStyle(bg.payload.stops)}\n />\n )\n }\n\n if (bg.type === 'video' && bg.payload) {\n return (\n <VideoBackground\n {...bg.payload}\n key={bg.id}\n maskColor={getColor(bg.payload.maskColor)}\n />\n )\n }\n\n return null\n })}\n </div>\n )\n}\n\ntype ColorBackgroundProps = { color: string }\n\nfunction ColorBackground({ color }: ColorBackgroundProps) {\n return <div className={useStyle({ ...containerStyle, backgroundColor: color })} />\n}\n\nconst ImageBackgroundRepeat = {\n NoRepeat: 'no-repeat',\n RepeatX: 'repeat-x',\n RepeatY: 'repeat-y',\n Repeat: 'repeat',\n} as const\n\ntype ImageBackgroundRepeat = (typeof ImageBackgroundRepeat)[keyof typeof ImageBackgroundRepeat]\n\nconst ImageBackgroundSize = {\n Cover: 'cover',\n Contain: 'contain',\n Auto: 'auto',\n} as const\n\ntype ImageBackgroundSize = (typeof ImageBackgroundSize)[keyof typeof ImageBackgroundSize]\n\ntype ImageBackgroundProps = {\n publicUrl?: string\n position: { x: number; y: number }\n repeat?: ImageBackgroundRepeat\n size?: ImageBackgroundSize\n opacity?: number\n parallax?: number\n priority?: boolean\n}\n\nfunction ImageBackground({\n publicUrl,\n position,\n repeat = ImageBackgroundRepeat.NoRepeat,\n size = ImageBackgroundSize.Cover,\n opacity,\n parallax,\n priority,\n}: ImageBackgroundProps) {\n const backgroundPosition = `${position.x}% ${position.y}%`\n const containerClassName = useStyle(containerStyle)\n const { Image } = useFrameworkContext()\n\n if (repeat === 'no-repeat' && size !== 'auto' && publicUrl != null) {\n return (\n <Parallax strength={parallax}>\n {getParallaxProps => (\n <div {...getParallaxProps({ style: { opacity, overflow: 'hidden' } })}>\n <Image\n src={publicUrl}\n alt={''}\n fill\n sizes=\"100vw\"\n style={{\n objectPosition: backgroundPosition,\n objectFit: size,\n }}\n priority={priority}\n />\n </div>\n )}\n </Parallax>\n )\n }\n\n return (\n <Parallax strength={parallax}>\n {getParallaxProps => (\n <div\n className={containerClassName}\n {...getParallaxProps({\n style: {\n backgroundImage: publicUrl != null ? `url('${publicUrl}')` : undefined,\n backgroundPosition,\n backgroundRepeat: repeat,\n backgroundSize: size,\n opacity,\n },\n })}\n />\n )}\n </Parallax>\n )\n}\n\ntype GradientBackgroundProps = {\n gradient: string\n angle?: number\n isRadial?: boolean\n}\n\nfunction GradientBackground({\n gradient,\n isRadial = false,\n angle = Math.PI,\n}: GradientBackgroundProps) {\n return (\n <div\n className={useStyle({\n ...containerStyle,\n background: isRadial\n ? `radial-gradient(${gradient})`\n : `linear-gradient(${angle}rad, ${gradient})`,\n })}\n />\n )\n}\n\nconst BackgroundVideoAspectRatio = {\n Wide: 'wide',\n Standard: 'standard',\n} as const\n\ntype BackgroundVideoAspectRatio =\n (typeof BackgroundVideoAspectRatio)[keyof typeof BackgroundVideoAspectRatio]\n\nfunction getAspectRatio(aspectRatio: BackgroundVideoAspectRatio \| null \| undefined): number {\n switch (aspectRatio) {\n case 'wide':\n return 16 / 9\n\n case 'standard':\n return 4 / 3\n\n default:\n return 16 / 9\n }\n}\n\ntype VideoBackgroundProps = {\n url?: string\n aspectRatio?: BackgroundVideoAspectRatio\n maskColor: string\n zoom?: number\n opacity?: number\n parallax?: number\n}\n\nfunction VideoBackground({\n url,\n aspectRatio,\n maskColor,\n zoom,\n opacity,\n parallax,\n}: VideoBackgroundProps) {\n return (\n <Parallax strength={parallax}>\n {getParallaxProps => (\n <div {...getParallaxProps({ className: useStyle(containerStyle) })}>\n <BackgroundVideo\n url={url}\n zoom={zoom}\n opacity={opacity}\n aspectRatio={getAspectRatio(aspectRatio)}\n maskColor={maskColor}\n />\n </div>\n )}\n </Parallax>\n )\n}\n"],"mappings":"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","names":["Parallax","BackgroundVideo"]}

package/dist/cjs/components/utils/responsive-style.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/utils/responsive-style.ts"],"sourcesContent":["import { WidthProperty } from 'csstype'\nimport { CSSObject } from '@emotion/css'\n\nimport type { ResponsiveValueType as ExtractResponsiveValue } from '@makeswift/controls'\n\nimport type {\n LengthData,\n ResponsiveBorderRadiusData,\n ResponsiveMarginData,\n ResponsivePaddingData,\n ResponsiveValue,\n ResponsiveLengthData,\n ResponsiveTextStyleData,\n} from '@makeswift/prop-controllers'\n\nimport {\n type Breakpoints,\n type FallbackStrategy,\n join as joinResponsiveValues,\n getBreakpoint,\n getBreakpointMediaQuery,\n} from '@makeswift/controls'\n\nimport { useBreakpoints } from '../../runtimes/react/hooks/use-breakpoints'\n\nimport { getIndexes } from './columns'\nimport { PaddingPropertyData, paddingPropertyDataToStyle } from '../../css/padding'\nimport { MarginPropertyData, marginPropertyDataToStyle } from '../../css/margin'\nimport { BorderRadiusPropertyData, borderRadiusPropertyDataToStyle } from '../../css/border-radius'\nimport { BorderPropertyData, borderPropertyDataToStyle } from '../../css/border'\nimport { BorderPropControllerData } from '../hooks/useBorder'\nimport { colorToString } from './colorToString'\nimport { BoxShadow, ResponsiveBoxShadow } from '../hooks'\nimport { DropFirst } from './drop-first'\n\nexport function responsiveStyle<V, A extends ReadonlyArray<ResponsiveValue<V> \| null \| undefined>>(\n breakpoints: Breakpoints,\n responsiveValues: A,\n join: (values: { [K in keyof A]: ExtractResponsiveValue<A[K]> \| undefined }) => CSSObject,\n strategy?: FallbackStrategy<V>,\n): CSSObject {\n return joinResponsiveValues(breakpoints, responsiveValues, join, strategy).reduce(\n (acc, { deviceId, value }) => {\n const breakpoint = getBreakpoint(breakpoints, deviceId)\n const mediaQuery = getBreakpointMediaQuery(breakpoint)\n\n return {\n ...acc,\n [mediaQuery]: {\n ...(acc[mediaQuery] as CSSObject),\n ...value,\n },\n }\n },\n {} as CSSObject,\n )\n}\n\nexport function useResponsiveStyle<\n V,\n A extends ReadonlyArray<ResponsiveValue<V> \| null \| undefined>,\n>(\n responsiveValues: A,\n join: (values: { [K in keyof A]: ExtractResponsiveValue<A[K]> \| undefined }) => CSSObject,\n strategy?: FallbackStrategy<V>,\n): CSSObject {\n return responsiveStyle(useBreakpoints(), responsiveValues, join, strategy)\n}\n\nexport function responsiveWidth(\n breakpoints: Breakpoints,\n widthData: ResponsiveLengthData \| undefined,\n defaultValue: LengthData \| WidthProperty<string \| number> = '100%',\n): CSSObject {\n return {\n maxWidth: '100%',\n ...responsiveStyle(breakpoints, [widthData], ([width = defaultValue]) => ({\n width: typeof width === 'object' ? `${width.value}${width.unit}` : width,\n })),\n }\n}\n\nexport function useResponsiveWidth(\n ...args: DropFirst<Parameters<typeof responsiveWidth>>\n): CSSObject {\n return responsiveWidth(useBreakpoints(), ...args)\n}\n\nexport function responsivePadding(\n breakpoints: Breakpoints,\n paddingData: ResponsivePaddingData \| undefined,\n defaultValue: PaddingPropertyData = {} as PaddingPropertyData,\n): CSSObject {\n return responsiveStyle(breakpoints, [paddingData], ([padding = {} as PaddingPropertyData]) =>\n paddingPropertyDataToStyle(\n padding,\n Object.assign(\n { paddingTop: 0, paddingRight: 0, paddingBottom: 0, paddingLeft: 0 },\n defaultValue,\n ),\n ),\n )\n}\n\nexport function useResponsivePadding(\n ...args: DropFirst<Parameters<typeof responsivePadding>>\n): CSSObject {\n return responsivePadding(useBreakpoints(), ...args)\n}\n\nexport function responsiveMargin(\n breakpoints: Breakpoints,\n marginData: ResponsiveMarginData \| undefined,\n defaultValue: MarginPropertyData = {} as MarginPropertyData,\n): CSSObject {\n return responsiveStyle(breakpoints, [marginData], ([margin = {} as MarginPropertyData]) =>\n marginPropertyDataToStyle(\n margin,\n Object.assign(\n { marginTop: 0, marginRight: 'auto', marginBottom: 0, marginLeft: 'auto' },\n defaultValue,\n ),\n ),\n )\n}\n\nexport function useResponsiveMargin(\n ...args: DropFirst<Parameters<typeof responsiveMargin>>\n): CSSObject {\n return responsiveMargin(useBreakpoints(), ...args)\n}\n\nexport function responsiveBorderRadius(\n breakpoints: Breakpoints,\n borderRadiusData: ResponsiveBorderRadiusData \| undefined,\n defaultValue: BorderRadiusPropertyData = {} as BorderRadiusPropertyData,\n): CSSObject {\n return responsiveStyle(breakpoints, [borderRadiusData], ([borderRadius = {}]) =>\n borderRadiusPropertyDataToStyle(\n borderRadius,\n Object.assign(\n {\n borderTopLeftRadius: 0,\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0,\n borderBottomLeftRadius: 0,\n },\n defaultValue,\n ),\n ),\n )\n}\n\nexport function useResponsiveBorderRadius(\n ...args: DropFirst<Parameters<typeof responsiveBorderRadius>>\n): CSSObject {\n return responsiveBorderRadius(useBreakpoints(), ...args)\n}\n\nexport function useResponsiveBorder(\n borderData: BorderPropControllerData \| undefined,\n defaultValue: BorderPropertyData = {},\n): CSSObject {\n return useResponsiveStyle([borderData], ([border = {}]) =>\n borderPropertyDataToStyle(\n border,\n Object.assign(\n {\n borderTop: '0px solid black',\n borderRight: '0px solid black',\n borderBottom: '0px solid black',\n borderLeft: '0px solid black',\n },\n defaultValue,\n ),\n ),\n )\n}\n\nconst floor =\n (d: number) =>\n (v: number): number =>\n Math.floor(10 ** d * v) / 10 ** d\n\nexport function responsiveGridItem(\n breakpoints: Breakpoints,\n props: {\n grid: ResponsiveValue<{ spans: number[][]; count: number }>\n index: number\n columnGap?: ResponsiveValue<LengthData>\n rowGap?: ResponsiveValue<LengthData>\n },\n): CSSObject {\n return {\n display: 'flex',\n ...responsiveStyle(\n breakpoints,\n [props.grid, props.columnGap, props.rowGap] as const,\n ([\n { spans, count } = { spans: [[12]], count: 12 },\n columnGap = { value: 0, unit: 'px' },\n rowGap = { value: 0, unit: 'px' },\n ]) => {\n const [rowIndex, columnIndex] = getIndexes(spans, props.index)\n const firstCol = columnIndex === 0\n const lastCol = columnIndex === spans[rowIndex].length - 1\n const span = spans[rowIndex][columnIndex]\n const fraction = floor(5)(span / count)\n const width = `${fraction} * (100% + ${columnGap.value}${columnGap.unit})`\n const excessWidth = `${Number(firstCol) + Number(lastCol)} * ${columnGap.value}${\n columnGap.unit\n } / 2`\n const iePrecisionError = '0.01px'\n const flexBasis = `calc(${width} - ${excessWidth} - ${iePrecisionError})`\n const firstRow = rowIndex === 0\n const lastRow = rowIndex === spans.length - 1\n\n return span === 0\n ? { display: 'none' }\n : {\n flexBasis,\n minWidth: flexBasis,\n // NOTE: IE11 width breaks without max width\n // https://github.com/philipwalton/flexbugs/issues/3\n maxWidth: flexBasis,\n paddingLeft: firstCol ? 0 : `${columnGap.value / 2}${columnGap.unit}`,\n paddingRight: lastCol ? 0 : `${columnGap.value / 2}${columnGap.unit}`,\n paddingTop: firstRow ? 0 : `${rowGap.value / 2}${rowGap.unit}`,\n paddingBottom: lastRow ? 0 : `${rowGap.value / 2}${rowGap.unit}`,\n }\n },\n ),\n }\n}\n\nexport function useResponsiveGridItem(\n ...args: DropFirst<Parameters<typeof responsiveGridItem>>\n): CSSObject {\n return responsiveGridItem(useBreakpoints(), ...args)\n}\n\nconst getBoxShadow = (shadows: BoxShadow) =>\n shadows\n .map(\n ({ payload: { inset, offsetX, offsetY, blurRadius, spreadRadius, color } }) =>\n `${inset ? 'inset ' : ''}${offsetX.toFixed(1)}px ${offsetY.toFixed(\n 1,\n )}px ${blurRadius}px ${spreadRadius}px ${\n color != null ? colorToString(color) : 'rgba(0,0,0,0.2)'\n }`,\n )\n .filter(Boolean)\n .join()\n\nexport function responsiveShadow(\n breakpoints: Breakpoints,\n value: ResponsiveBoxShadow \| undefined,\n): CSSObject {\n return responsiveStyle(breakpoints, [value], ([shadow = []]) => ({\n boxShadow: getBoxShadow(shadow),\n }))\n}\n\nexport function useResponsiveShadow(\n ...args: DropFirst<Parameters<typeof responsiveShadow>>\n): CSSObject {\n return responsiveShadow(useBreakpoints(), ...args)\n}\n\nexport function responsiveTextStyle(\n breakpoints: Breakpoints,\n value: ResponsiveTextStyleData \| undefined,\n): CSSObject {\n return responsiveStyle(\n breakpoints,\n [value],\n ([\n textStyle = {\n fontFamily: null,\n letterSpacing: null,\n fontSize: null,\n fontWeight: null,\n textTransform: [],\n fontStyle: [],\n },\n ]) => {\n const {\n fontSize,\n fontWeight,\n fontStyle = [],\n textTransform = [],\n letterSpacing,\n fontFamily,\n } = textStyle\n\n return {\n ...(fontFamily == null ? {} : { fontFamily: `\"${fontFamily}\"` }),\n ...(fontWeight == null ? {} : { fontWeight }),\n ...(letterSpacing == null ? {} : { letterSpacing }),\n ...(fontSize == null ? {} : { fontSize: `${fontSize.value}${fontSize.unit}` }),\n ...(textTransform.includes('uppercase') ? { textTransform: 'uppercase' } : {}),\n ...(fontStyle.includes('italic') ? { fontStyle: 'italic' } : {}),\n }\n },\n )\n}\n\nexport function useResponsiveTextStyle(\n ...args: DropFirst<Parameters<typeof responsiveTextStyle>>\n): CSSObject {\n return responsiveTextStyle(useBreakpoints(), ...args)\n}\n"],"mappings":"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","names":["joinResponsiveValues"]}
1	+ {"version":3,"sources":["../../../../src/components/utils/responsive-style.ts"],"sourcesContent":["import { WidthProperty } from 'csstype'\nimport { type CSSObject } from '@emotion/serialize'\n\nimport type { ResponsiveValueType as ExtractResponsiveValue } from '@makeswift/controls'\n\nimport type {\n LengthData,\n ResponsiveBorderRadiusData,\n ResponsiveMarginData,\n ResponsivePaddingData,\n ResponsiveValue,\n ResponsiveLengthData,\n ResponsiveTextStyleData,\n} from '@makeswift/prop-controllers'\n\nimport {\n type Breakpoints,\n type FallbackStrategy,\n join as joinResponsiveValues,\n getBreakpoint,\n getBreakpointMediaQuery,\n} from '@makeswift/controls'\n\nimport { useBreakpoints } from '../../runtimes/react/hooks/use-breakpoints'\n\nimport { getIndexes } from './columns'\nimport { PaddingPropertyData, paddingPropertyDataToStyle } from '../../css/padding'\nimport { MarginPropertyData, marginPropertyDataToStyle } from '../../css/margin'\nimport { BorderRadiusPropertyData, borderRadiusPropertyDataToStyle } from '../../css/border-radius'\nimport { BorderPropertyData, borderPropertyDataToStyle } from '../../css/border'\nimport { BorderPropControllerData } from '../hooks/useBorder'\nimport { colorToString } from './colorToString'\nimport { BoxShadow, ResponsiveBoxShadow } from '../hooks'\nimport { DropFirst } from './drop-first'\n\nexport function responsiveStyle<V, A extends ReadonlyArray<ResponsiveValue<V> \| null \| undefined>>(\n breakpoints: Breakpoints,\n responsiveValues: A,\n join: (values: { [K in keyof A]: ExtractResponsiveValue<A[K]> \| undefined }) => CSSObject,\n strategy?: FallbackStrategy<V>,\n): CSSObject {\n return joinResponsiveValues(breakpoints, responsiveValues, join, strategy).reduce(\n (acc, { deviceId, value }) => {\n const breakpoint = getBreakpoint(breakpoints, deviceId)\n const mediaQuery = getBreakpointMediaQuery(breakpoint)\n\n return {\n ...acc,\n [mediaQuery]: {\n ...(acc[mediaQuery] as CSSObject),\n ...value,\n },\n }\n },\n {} as CSSObject,\n )\n}\n\nexport function useResponsiveStyle<\n V,\n A extends ReadonlyArray<ResponsiveValue<V> \| null \| undefined>,\n>(\n responsiveValues: A,\n join: (values: { [K in keyof A]: ExtractResponsiveValue<A[K]> \| undefined }) => CSSObject,\n strategy?: FallbackStrategy<V>,\n): CSSObject {\n return responsiveStyle(useBreakpoints(), responsiveValues, join, strategy)\n}\n\nexport function responsiveWidth(\n breakpoints: Breakpoints,\n widthData: ResponsiveLengthData \| undefined,\n defaultValue: LengthData \| WidthProperty<string \| number> = '100%',\n): CSSObject {\n return {\n maxWidth: '100%',\n ...responsiveStyle(breakpoints, [widthData], ([width = defaultValue]) => ({\n width: typeof width === 'object' ? `${width.value}${width.unit}` : width,\n })),\n }\n}\n\nexport function useResponsiveWidth(\n ...args: DropFirst<Parameters<typeof responsiveWidth>>\n): CSSObject {\n return responsiveWidth(useBreakpoints(), ...args)\n}\n\nexport function responsivePadding(\n breakpoints: Breakpoints,\n paddingData: ResponsivePaddingData \| undefined,\n defaultValue: PaddingPropertyData = {} as PaddingPropertyData,\n): CSSObject {\n return responsiveStyle(breakpoints, [paddingData], ([padding = {} as PaddingPropertyData]) =>\n paddingPropertyDataToStyle(\n padding,\n Object.assign(\n { paddingTop: 0, paddingRight: 0, paddingBottom: 0, paddingLeft: 0 },\n defaultValue,\n ),\n ),\n )\n}\n\nexport function useResponsivePadding(\n ...args: DropFirst<Parameters<typeof responsivePadding>>\n): CSSObject {\n return responsivePadding(useBreakpoints(), ...args)\n}\n\nexport function responsiveMargin(\n breakpoints: Breakpoints,\n marginData: ResponsiveMarginData \| undefined,\n defaultValue: MarginPropertyData = {} as MarginPropertyData,\n): CSSObject {\n return responsiveStyle(breakpoints, [marginData], ([margin = {} as MarginPropertyData]) =>\n marginPropertyDataToStyle(\n margin,\n Object.assign(\n { marginTop: 0, marginRight: 'auto', marginBottom: 0, marginLeft: 'auto' },\n defaultValue,\n ),\n ),\n )\n}\n\nexport function useResponsiveMargin(\n ...args: DropFirst<Parameters<typeof responsiveMargin>>\n): CSSObject {\n return responsiveMargin(useBreakpoints(), ...args)\n}\n\nexport function responsiveBorderRadius(\n breakpoints: Breakpoints,\n borderRadiusData: ResponsiveBorderRadiusData \| undefined,\n defaultValue: BorderRadiusPropertyData = {} as BorderRadiusPropertyData,\n): CSSObject {\n return responsiveStyle(breakpoints, [borderRadiusData], ([borderRadius = {}]) =>\n borderRadiusPropertyDataToStyle(\n borderRadius,\n Object.assign(\n {\n borderTopLeftRadius: 0,\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0,\n borderBottomLeftRadius: 0,\n },\n defaultValue,\n ),\n ),\n )\n}\n\nexport function useResponsiveBorderRadius(\n ...args: DropFirst<Parameters<typeof responsiveBorderRadius>>\n): CSSObject {\n return responsiveBorderRadius(useBreakpoints(), ...args)\n}\n\nexport function useResponsiveBorder(\n borderData: BorderPropControllerData \| undefined,\n defaultValue: BorderPropertyData = {},\n): CSSObject {\n return useResponsiveStyle([borderData], ([border = {}]) =>\n borderPropertyDataToStyle(\n border,\n Object.assign(\n {\n borderTop: '0px solid black',\n borderRight: '0px solid black',\n borderBottom: '0px solid black',\n borderLeft: '0px solid black',\n },\n defaultValue,\n ),\n ),\n )\n}\n\nconst floor =\n (d: number) =>\n (v: number): number =>\n Math.floor(10 ** d * v) / 10 ** d\n\nexport function responsiveGridItem(\n breakpoints: Breakpoints,\n props: {\n grid: ResponsiveValue<{ spans: number[][]; count: number }>\n index: number\n columnGap?: ResponsiveValue<LengthData>\n rowGap?: ResponsiveValue<LengthData>\n },\n): CSSObject {\n return {\n display: 'flex',\n ...responsiveStyle(\n breakpoints,\n [props.grid, props.columnGap, props.rowGap] as const,\n ([\n { spans, count } = { spans: [[12]], count: 12 },\n columnGap = { value: 0, unit: 'px' },\n rowGap = { value: 0, unit: 'px' },\n ]) => {\n const [rowIndex, columnIndex] = getIndexes(spans, props.index)\n const firstCol = columnIndex === 0\n const lastCol = columnIndex === spans[rowIndex].length - 1\n const span = spans[rowIndex][columnIndex]\n const fraction = floor(5)(span / count)\n const width = `${fraction} * (100% + ${columnGap.value}${columnGap.unit})`\n const excessWidth = `${Number(firstCol) + Number(lastCol)} * ${columnGap.value}${\n columnGap.unit\n } / 2`\n const iePrecisionError = '0.01px'\n const flexBasis = `calc(${width} - ${excessWidth} - ${iePrecisionError})`\n const firstRow = rowIndex === 0\n const lastRow = rowIndex === spans.length - 1\n\n return span === 0\n ? { display: 'none' }\n : {\n flexBasis,\n minWidth: flexBasis,\n // NOTE: IE11 width breaks without max width\n // https://github.com/philipwalton/flexbugs/issues/3\n maxWidth: flexBasis,\n paddingLeft: firstCol ? 0 : `${columnGap.value / 2}${columnGap.unit}`,\n paddingRight: lastCol ? 0 : `${columnGap.value / 2}${columnGap.unit}`,\n paddingTop: firstRow ? 0 : `${rowGap.value / 2}${rowGap.unit}`,\n paddingBottom: lastRow ? 0 : `${rowGap.value / 2}${rowGap.unit}`,\n }\n },\n ),\n }\n}\n\nexport function useResponsiveGridItem(\n ...args: DropFirst<Parameters<typeof responsiveGridItem>>\n): CSSObject {\n return responsiveGridItem(useBreakpoints(), ...args)\n}\n\nconst getBoxShadow = (shadows: BoxShadow) =>\n shadows\n .map(\n ({ payload: { inset, offsetX, offsetY, blurRadius, spreadRadius, color } }) =>\n `${inset ? 'inset ' : ''}${offsetX.toFixed(1)}px ${offsetY.toFixed(\n 1,\n )}px ${blurRadius}px ${spreadRadius}px ${\n color != null ? colorToString(color) : 'rgba(0,0,0,0.2)'\n }`,\n )\n .filter(Boolean)\n .join()\n\nexport function responsiveShadow(\n breakpoints: Breakpoints,\n value: ResponsiveBoxShadow \| undefined,\n): CSSObject {\n return responsiveStyle(breakpoints, [value], ([shadow = []]) => ({\n boxShadow: getBoxShadow(shadow),\n }))\n}\n\nexport function useResponsiveShadow(\n ...args: DropFirst<Parameters<typeof responsiveShadow>>\n): CSSObject {\n return responsiveShadow(useBreakpoints(), ...args)\n}\n\nexport function responsiveTextStyle(\n breakpoints: Breakpoints,\n value: ResponsiveTextStyleData \| undefined,\n): CSSObject {\n return responsiveStyle(\n breakpoints,\n [value],\n ([\n textStyle = {\n fontFamily: null,\n letterSpacing: null,\n fontSize: null,\n fontWeight: null,\n textTransform: [],\n fontStyle: [],\n },\n ]) => {\n const {\n fontSize,\n fontWeight,\n fontStyle = [],\n textTransform = [],\n letterSpacing,\n fontFamily,\n } = textStyle\n\n return {\n ...(fontFamily == null ? {} : { fontFamily: `\"${fontFamily}\"` }),\n ...(fontWeight == null ? {} : { fontWeight }),\n ...(letterSpacing == null ? {} : { letterSpacing }),\n ...(fontSize == null ? {} : { fontSize: `${fontSize.value}${fontSize.unit}` }),\n ...(textTransform.includes('uppercase') ? { textTransform: 'uppercase' } : {}),\n ...(fontStyle.includes('italic') ? { fontStyle: 'italic' } : {}),\n }\n },\n )\n}\n\nexport function useResponsiveTextStyle(\n ...args: DropFirst<Parameters<typeof responsiveTextStyle>>\n): CSSObject {\n return responsiveTextStyle(useBreakpoints(), ...args)\n}\n"],"mappings":"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","names":["joinResponsiveValues"]}

package/dist/cjs/css/border-radius.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/css/border-radius.ts"],"sourcesContent":["import { CSSObject } from '@emotion/~~css~~'\nimport {\n BorderTopLeftRadiusProperty,\n BorderTopRightRadiusProperty,\n BorderBottomRightRadiusProperty,\n BorderBottomLeftRadiusProperty,\n} from 'csstype'\nimport { LengthPercentageData, lengthPercentageDataToString } from './length-percentage'\n\n/** @see https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius#constituent_properties /\nexport type BorderRadiusLonghandPropertyData = LengthPercentageData\n\n/\n @see https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius\n \n @todos\n * - Remove `null` from possible values of longhand properties\n * - Remove `undefined` from possible values and make fields optional\n */\nexport type BorderRadiusPropertyData = {\n borderTopLeftRadius?:\n \| LengthPercentageData\n \| BorderTopLeftRadiusProperty<string \| number>\n \| null\n \| undefined\n borderTopRightRadius?:\n \| LengthPercentageData\n \| BorderTopRightRadiusProperty<string \| number>\n \| null\n \| undefined\n borderBottomRightRadius?:\n \| LengthPercentageData\n \| BorderBottomRightRadiusProperty<string \| number>\n \| null\n \| undefined\n borderBottomLeftRadius?:\n \| LengthPercentageData\n \| BorderBottomLeftRadiusProperty<string \| number>\n \| null\n \| undefined\n}\n\nexport function borderRadiusPropertyDataToStyle(\n data: BorderRadiusPropertyData,\n defaultValue: BorderRadiusPropertyData = {},\n): CSSObject {\n const borderTopLeftRadius = data.borderTopLeftRadius ?? defaultValue.borderTopLeftRadius\n const borderTopRightRadius = data.borderTopRightRadius ?? defaultValue.borderTopRightRadius\n const borderBottomRightRadius =\n data.borderBottomRightRadius ?? defaultValue.borderBottomRightRadius\n const borderBottomLeftRadius = data.borderBottomLeftRadius ?? defaultValue.borderBottomLeftRadius\n const style: CSSObject = {}\n\n if (borderTopLeftRadius != null) {\n style.borderTopLeftRadius = lengthPercentageDataToString(borderTopLeftRadius)\n }\n\n if (borderTopRightRadius != null) {\n style.borderTopRightRadius = lengthPercentageDataToString(borderTopRightRadius)\n }\n\n if (borderBottomRightRadius != null) {\n style.borderBottomRightRadius = lengthPercentageDataToString(borderBottomRightRadius)\n }\n\n if (borderBottomLeftRadius != null) {\n style.borderBottomLeftRadius = lengthPercentageDataToString(borderBottomLeftRadius)\n }\n\n return style\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA,+BAAmE;AAmC5D,SAAS,gCACd,MACA,eAAyC,CAAC,GAC/B;AACX,QAAM,sBAAsB,KAAK,uBAAuB,aAAa;AACrE,QAAM,uBAAuB,KAAK,wBAAwB,aAAa;AACvE,QAAM,0BACJ,KAAK,2BAA2B,aAAa;AAC/C,QAAM,yBAAyB,KAAK,0BAA0B,aAAa;AAC3E,QAAM,QAAmB,CAAC;AAE1B,MAAI,uBAAuB,MAAM;AAC/B,UAAM,0BAAsB,uDAA6B,mBAAmB;AAAA,EAC9E;AAEA,MAAI,wBAAwB,MAAM;AAChC,UAAM,2BAAuB,uDAA6B,oBAAoB;AAAA,EAChF;AAEA,MAAI,2BAA2B,MAAM;AACnC,UAAM,8BAA0B,uDAA6B,uBAAuB;AAAA,EACtF;AAEA,MAAI,0BAA0B,MAAM;AAClC,UAAM,6BAAyB,uDAA6B,sBAAsB;AAAA,EACpF;AAEA,SAAO;AACT;","names":[]}
1	+ {"version":3,"sources":["../../../src/css/border-radius.ts"],"sourcesContent":["import { type CSSObject } from '@emotion/serialize'\nimport {\n BorderTopLeftRadiusProperty,\n BorderTopRightRadiusProperty,\n BorderBottomRightRadiusProperty,\n BorderBottomLeftRadiusProperty,\n} from 'csstype'\nimport { LengthPercentageData, lengthPercentageDataToString } from './length-percentage'\n\n/** @see https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius#constituent_properties /\nexport type BorderRadiusLonghandPropertyData = LengthPercentageData\n\n/\n @see https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius\n \n @todos\n * - Remove `null` from possible values of longhand properties\n * - Remove `undefined` from possible values and make fields optional\n */\nexport type BorderRadiusPropertyData = {\n borderTopLeftRadius?:\n \| LengthPercentageData\n \| BorderTopLeftRadiusProperty<string \| number>\n \| null\n \| undefined\n borderTopRightRadius?:\n \| LengthPercentageData\n \| BorderTopRightRadiusProperty<string \| number>\n \| null\n \| undefined\n borderBottomRightRadius?:\n \| LengthPercentageData\n \| BorderBottomRightRadiusProperty<string \| number>\n \| null\n \| undefined\n borderBottomLeftRadius?:\n \| LengthPercentageData\n \| BorderBottomLeftRadiusProperty<string \| number>\n \| null\n \| undefined\n}\n\nexport function borderRadiusPropertyDataToStyle(\n data: BorderRadiusPropertyData,\n defaultValue: BorderRadiusPropertyData = {},\n): CSSObject {\n const borderTopLeftRadius = data.borderTopLeftRadius ?? defaultValue.borderTopLeftRadius\n const borderTopRightRadius = data.borderTopRightRadius ?? defaultValue.borderTopRightRadius\n const borderBottomRightRadius =\n data.borderBottomRightRadius ?? defaultValue.borderBottomRightRadius\n const borderBottomLeftRadius = data.borderBottomLeftRadius ?? defaultValue.borderBottomLeftRadius\n const style: CSSObject = {}\n\n if (borderTopLeftRadius != null) {\n style.borderTopLeftRadius = lengthPercentageDataToString(borderTopLeftRadius)\n }\n\n if (borderTopRightRadius != null) {\n style.borderTopRightRadius = lengthPercentageDataToString(borderTopRightRadius)\n }\n\n if (borderBottomRightRadius != null) {\n style.borderBottomRightRadius = lengthPercentageDataToString(borderBottomRightRadius)\n }\n\n if (borderBottomLeftRadius != null) {\n style.borderBottomLeftRadius = lengthPercentageDataToString(borderBottomLeftRadius)\n }\n\n return style\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA,+BAAmE;AAmC5D,SAAS,gCACd,MACA,eAAyC,CAAC,GAC/B;AACX,QAAM,sBAAsB,KAAK,uBAAuB,aAAa;AACrE,QAAM,uBAAuB,KAAK,wBAAwB,aAAa;AACvE,QAAM,0BACJ,KAAK,2BAA2B,aAAa;AAC/C,QAAM,yBAAyB,KAAK,0BAA0B,aAAa;AAC3E,QAAM,QAAmB,CAAC;AAE1B,MAAI,uBAAuB,MAAM;AAC/B,UAAM,0BAAsB,uDAA6B,mBAAmB;AAAA,EAC9E;AAEA,MAAI,wBAAwB,MAAM;AAChC,UAAM,2BAAuB,uDAA6B,oBAAoB;AAAA,EAChF;AAEA,MAAI,2BAA2B,MAAM;AACnC,UAAM,8BAA0B,uDAA6B,uBAAuB;AAAA,EACtF;AAEA,MAAI,0BAA0B,MAAM;AAClC,UAAM,6BAAyB,uDAA6B,sBAAsB;AAAA,EACpF;AAEA,SAAO;AACT;","names":[]}

package/dist/cjs/css/border.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/css/border.ts"],"sourcesContent":["import { CSSObject } from '@emotion/~~css~~'\nimport {\n BorderBottomProperty,\n BorderLeftProperty,\n BorderProperty,\n BorderRightProperty,\n BorderStyleProperty,\n BorderTopProperty,\n} from 'csstype'\nimport { colorToString } from '../components/utils/colorToString'\nimport { ColorValue } from '../components/utils/types'\n\n/*\n @see https://developer.mozilla.org/en-US/docs/Web/CSS/border-top#constituent_properties\n \n @todos\n * - Change `width` to be a `Length`\n * - Remove `null` from possible values\n * - Remove `undefined` from possible values and make fields optional\n /\nexport type BorderSideShorthandPropertyData = {\n width?: number \| null \| undefined\n style: BorderStyleProperty\n color?: ColorValue \| null\n}\n\n/\n @see https://developer.mozilla.org/en-US/docs/Web/CSS/border\n \n @todos\n * - Remove `null` from possible values\n * - Remove `undefined` from possible values and make fields optional\n */\nexport type BorderPropertyData = {\n borderTop?:\n \| BorderSideShorthandPropertyData\n \| BorderTopProperty<string \| number>\n \| null\n \| undefined\n borderRight?:\n \| BorderSideShorthandPropertyData\n \| BorderRightProperty<string \| number>\n \| null\n \| undefined\n borderBottom?:\n \| BorderSideShorthandPropertyData\n \| BorderBottomProperty<string \| number>\n \| null\n \| undefined\n borderLeft?:\n \| BorderSideShorthandPropertyData\n \| BorderLeftProperty<string \| number>\n \| null\n \| undefined\n}\n\nexport function borderPropertyDataToStyle(\n data: BorderPropertyData,\n defaultValue: BorderPropertyData = {},\n): CSSObject {\n const borderTop = data.borderTop ?? defaultValue.borderTop\n const borderRight = data.borderRight ?? defaultValue.borderRight\n const borderBottom = data.borderBottom ?? defaultValue.borderBottom\n const borderLeft = data.borderLeft ?? defaultValue.borderLeft\n const style: CSSObject = {}\n\n if (borderTop != null) style.borderTop = borderSideToString(borderTop)\n if (borderRight != null) style.borderRight = borderSideToString(borderRight)\n if (borderBottom != null) style.borderBottom = borderSideToString(borderBottom)\n if (borderLeft != null) style.borderLeft = borderSideToString(borderLeft)\n\n return style\n}\n\nfunction borderSideToString(\n borderSide: BorderSideShorthandPropertyData \| BorderProperty<string \| number>,\n): string {\n if (typeof borderSide === 'string') return borderSide\n\n if (typeof borderSide === 'number') return `${borderSide}px`\n\n const { width, color, style } = borderSide\n\n return `${width != null ? width : 0}px ${style} ${color != null ? colorToString(color) : 'black'}`\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AASA,2BAA8B;AA+CvB,SAAS,0BACd,MACA,eAAmC,CAAC,GACzB;AACX,QAAM,YAAY,KAAK,aAAa,aAAa;AACjD,QAAM,cAAc,KAAK,eAAe,aAAa;AACrD,QAAM,eAAe,KAAK,gBAAgB,aAAa;AACvD,QAAM,aAAa,KAAK,cAAc,aAAa;AACnD,QAAM,QAAmB,CAAC;AAE1B,MAAI,aAAa;AAAM,UAAM,YAAY,mBAAmB,SAAS;AACrE,MAAI,eAAe;AAAM,UAAM,cAAc,mBAAmB,WAAW;AAC3E,MAAI,gBAAgB;AAAM,UAAM,eAAe,mBAAmB,YAAY;AAC9E,MAAI,cAAc;AAAM,UAAM,aAAa,mBAAmB,UAAU;AAExE,SAAO;AACT;AAEA,SAAS,mBACP,YACQ;AACR,MAAI,OAAO,eAAe;AAAU,WAAO;AAE3C,MAAI,OAAO,eAAe;AAAU,WAAO,GAAG,UAAU;AAExD,QAAM,EAAE,OAAO,OAAO,MAAM,IAAI;AAEhC,SAAO,GAAG,SAAS,OAAO,QAAQ,CAAC,MAAM,KAAK,IAAI,SAAS,WAAO,oCAAc,KAAK,IAAI,OAAO;AAClG;","names":[]}
1	+ {"version":3,"sources":["../../../src/css/border.ts"],"sourcesContent":["import { type CSSObject } from '@emotion/serialize'\nimport {\n BorderBottomProperty,\n BorderLeftProperty,\n BorderProperty,\n BorderRightProperty,\n BorderStyleProperty,\n BorderTopProperty,\n} from 'csstype'\nimport { colorToString } from '../components/utils/colorToString'\nimport { ColorValue } from '../components/utils/types'\n\n/*\n @see https://developer.mozilla.org/en-US/docs/Web/CSS/border-top#constituent_properties\n \n @todos\n * - Change `width` to be a `Length`\n * - Remove `null` from possible values\n * - Remove `undefined` from possible values and make fields optional\n /\nexport type BorderSideShorthandPropertyData = {\n width?: number \| null \| undefined\n style: BorderStyleProperty\n color?: ColorValue \| null\n}\n\n/\n @see https://developer.mozilla.org/en-US/docs/Web/CSS/border\n \n @todos\n * - Remove `null` from possible values\n * - Remove `undefined` from possible values and make fields optional\n */\nexport type BorderPropertyData = {\n borderTop?:\n \| BorderSideShorthandPropertyData\n \| BorderTopProperty<string \| number>\n \| null\n \| undefined\n borderRight?:\n \| BorderSideShorthandPropertyData\n \| BorderRightProperty<string \| number>\n \| null\n \| undefined\n borderBottom?:\n \| BorderSideShorthandPropertyData\n \| BorderBottomProperty<string \| number>\n \| null\n \| undefined\n borderLeft?:\n \| BorderSideShorthandPropertyData\n \| BorderLeftProperty<string \| number>\n \| null\n \| undefined\n}\n\nexport function borderPropertyDataToStyle(\n data: BorderPropertyData,\n defaultValue: BorderPropertyData = {},\n): CSSObject {\n const borderTop = data.borderTop ?? defaultValue.borderTop\n const borderRight = data.borderRight ?? defaultValue.borderRight\n const borderBottom = data.borderBottom ?? defaultValue.borderBottom\n const borderLeft = data.borderLeft ?? defaultValue.borderLeft\n const style: CSSObject = {}\n\n if (borderTop != null) style.borderTop = borderSideToString(borderTop)\n if (borderRight != null) style.borderRight = borderSideToString(borderRight)\n if (borderBottom != null) style.borderBottom = borderSideToString(borderBottom)\n if (borderLeft != null) style.borderLeft = borderSideToString(borderLeft)\n\n return style\n}\n\nfunction borderSideToString(\n borderSide: BorderSideShorthandPropertyData \| BorderProperty<string \| number>,\n): string {\n if (typeof borderSide === 'string') return borderSide\n\n if (typeof borderSide === 'number') return `${borderSide}px`\n\n const { width, color, style } = borderSide\n\n return `${width != null ? width : 0}px ${style} ${color != null ? colorToString(color) : 'black'}`\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AASA,2BAA8B;AA+CvB,SAAS,0BACd,MACA,eAAmC,CAAC,GACzB;AACX,QAAM,YAAY,KAAK,aAAa,aAAa;AACjD,QAAM,cAAc,KAAK,eAAe,aAAa;AACrD,QAAM,eAAe,KAAK,gBAAgB,aAAa;AACvD,QAAM,aAAa,KAAK,cAAc,aAAa;AACnD,QAAM,QAAmB,CAAC;AAE1B,MAAI,aAAa;AAAM,UAAM,YAAY,mBAAmB,SAAS;AACrE,MAAI,eAAe;AAAM,UAAM,cAAc,mBAAmB,WAAW;AAC3E,MAAI,gBAAgB;AAAM,UAAM,eAAe,mBAAmB,YAAY;AAC9E,MAAI,cAAc;AAAM,UAAM,aAAa,mBAAmB,UAAU;AAExE,SAAO;AACT;AAEA,SAAS,mBACP,YACQ;AACR,MAAI,OAAO,eAAe;AAAU,WAAO;AAE3C,MAAI,OAAO,eAAe;AAAU,WAAO,GAAG,UAAU;AAExD,QAAM,EAAE,OAAO,OAAO,MAAM,IAAI;AAEhC,SAAO,GAAG,SAAS,OAAO,QAAQ,CAAC,MAAM,KAAK,IAAI,SAAS,WAAO,oCAAc,KAAK,IAAI,OAAO;AAClG;","names":[]}

package/dist/cjs/css/margin.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/css/margin.ts"],"sourcesContent":["import { CSSObject } from '@emotion/~~css~~'\nimport {\n MarginBottomProperty,\n MarginLeftProperty,\n MarginRightProperty,\n MarginTopProperty,\n} from 'csstype'\nimport { LengthData, lengthDataToString } from './length'\n\n/** @see https://developer.mozilla.org/en-US/docs/Web/CSS/margin#constituent_properties /\nexport type MarginLonghandPropertyData = LengthData \| 'auto'\n\n/\n @see https://developer.mozilla.org/en-US/docs/Web/CSS/margin\n \n @todos\n * - Remove `null` from possible values\n * - Remove `undefined` from possible values and make fields optional\n */\nexport type MarginPropertyData = {\n marginTop: MarginLonghandPropertyData \| MarginTopProperty<string \| number> \| null \| undefined\n marginRight: MarginLonghandPropertyData \| MarginRightProperty<string \| number> \| null \| undefined\n marginBottom:\n \| MarginLonghandPropertyData\n \| MarginBottomProperty<string \| number>\n \| null\n \| undefined\n marginLeft: MarginLonghandPropertyData \| MarginLeftProperty<string \| number> \| null \| undefined\n}\n\nexport function marginPropertyDataToStyle(\n data: MarginPropertyData,\n defaultValue: MarginPropertyData = {} as MarginPropertyData,\n): CSSObject {\n const marginTop = data.marginTop ?? defaultValue.marginTop\n const marginRight = data.marginRight ?? defaultValue.marginRight\n const marginBottom = data.marginBottom ?? defaultValue.marginBottom\n const marginLeft = data.marginLeft ?? defaultValue.marginLeft\n const style: CSSObject = {}\n\n if (marginTop != null) style.marginTop = lengthDataToString(marginTop)\n if (marginRight != null) style.marginRight = lengthDataToString(marginRight)\n if (marginBottom != null) style.marginBottom = lengthDataToString(marginBottom)\n if (marginLeft != null) style.marginLeft = lengthDataToString(marginLeft)\n\n return style\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA,oBAA+C;AAuBxC,SAAS,0BACd,MACA,eAAmC,CAAC,GACzB;AACX,QAAM,YAAY,KAAK,aAAa,aAAa;AACjD,QAAM,cAAc,KAAK,eAAe,aAAa;AACrD,QAAM,eAAe,KAAK,gBAAgB,aAAa;AACvD,QAAM,aAAa,KAAK,cAAc,aAAa;AACnD,QAAM,QAAmB,CAAC;AAE1B,MAAI,aAAa;AAAM,UAAM,gBAAY,kCAAmB,SAAS;AACrE,MAAI,eAAe;AAAM,UAAM,kBAAc,kCAAmB,WAAW;AAC3E,MAAI,gBAAgB;AAAM,UAAM,mBAAe,kCAAmB,YAAY;AAC9E,MAAI,cAAc;AAAM,UAAM,iBAAa,kCAAmB,UAAU;AAExE,SAAO;AACT;","names":[]}
1	+ {"version":3,"sources":["../../../src/css/margin.ts"],"sourcesContent":["import { type CSSObject } from '@emotion/serialize'\nimport {\n MarginBottomProperty,\n MarginLeftProperty,\n MarginRightProperty,\n MarginTopProperty,\n} from 'csstype'\nimport { LengthData, lengthDataToString } from './length'\n\n/** @see https://developer.mozilla.org/en-US/docs/Web/CSS/margin#constituent_properties /\nexport type MarginLonghandPropertyData = LengthData \| 'auto'\n\n/\n @see https://developer.mozilla.org/en-US/docs/Web/CSS/margin\n \n @todos\n * - Remove `null` from possible values\n * - Remove `undefined` from possible values and make fields optional\n */\nexport type MarginPropertyData = {\n marginTop: MarginLonghandPropertyData \| MarginTopProperty<string \| number> \| null \| undefined\n marginRight: MarginLonghandPropertyData \| MarginRightProperty<string \| number> \| null \| undefined\n marginBottom:\n \| MarginLonghandPropertyData\n \| MarginBottomProperty<string \| number>\n \| null\n \| undefined\n marginLeft: MarginLonghandPropertyData \| MarginLeftProperty<string \| number> \| null \| undefined\n}\n\nexport function marginPropertyDataToStyle(\n data: MarginPropertyData,\n defaultValue: MarginPropertyData = {} as MarginPropertyData,\n): CSSObject {\n const marginTop = data.marginTop ?? defaultValue.marginTop\n const marginRight = data.marginRight ?? defaultValue.marginRight\n const marginBottom = data.marginBottom ?? defaultValue.marginBottom\n const marginLeft = data.marginLeft ?? defaultValue.marginLeft\n const style: CSSObject = {}\n\n if (marginTop != null) style.marginTop = lengthDataToString(marginTop)\n if (marginRight != null) style.marginRight = lengthDataToString(marginRight)\n if (marginBottom != null) style.marginBottom = lengthDataToString(marginBottom)\n if (marginLeft != null) style.marginLeft = lengthDataToString(marginLeft)\n\n return style\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA,oBAA+C;AAuBxC,SAAS,0BACd,MACA,eAAmC,CAAC,GACzB;AACX,QAAM,YAAY,KAAK,aAAa,aAAa;AACjD,QAAM,cAAc,KAAK,eAAe,aAAa;AACrD,QAAM,eAAe,KAAK,gBAAgB,aAAa;AACvD,QAAM,aAAa,KAAK,cAAc,aAAa;AACnD,QAAM,QAAmB,CAAC;AAE1B,MAAI,aAAa;AAAM,UAAM,gBAAY,kCAAmB,SAAS;AACrE,MAAI,eAAe;AAAM,UAAM,kBAAc,kCAAmB,WAAW;AAC3E,MAAI,gBAAgB;AAAM,UAAM,mBAAe,kCAAmB,YAAY;AAC9E,MAAI,cAAc;AAAM,UAAM,iBAAa,kCAAmB,UAAU;AAExE,SAAO;AACT;","names":[]}

package/dist/cjs/css/padding.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/css/padding.ts"],"sourcesContent":["import { CSSObject } from '@emotion/~~css~~'\nimport { LengthData, lengthDataToString } from './length'\nimport {\n PaddingTopProperty,\n PaddingRightProperty,\n PaddingBottomProperty,\n PaddingLeftProperty,\n} from 'csstype'\n\n/** @see https://developer.mozilla.org/en-US/docs/Web/CSS/padding#constituent_properties /\nexport type PaddingLonghandPropertyData = LengthData\n\n/\n @see https://developer.mozilla.org/en-US/docs/Web/CSS/padding\n \n @todos\n * - Remove `null` from possible values\n * - Remove `undefined` from possible values and make fields optional\n */\nexport type PaddingPropertyData = {\n paddingTop: PaddingLonghandPropertyData \| PaddingTopProperty<number \| string> \| null \| undefined\n paddingRight:\n \| PaddingLonghandPropertyData\n \| PaddingRightProperty<number \| string>\n \| null\n \| undefined\n paddingBottom:\n \| PaddingLonghandPropertyData\n \| PaddingBottomProperty<number \| string>\n \| null\n \| undefined\n paddingLeft: PaddingLonghandPropertyData \| PaddingLeftProperty<number \| string> \| null \| undefined\n}\n\nexport function paddingPropertyDataToStyle(\n data: PaddingPropertyData,\n defaultValue: PaddingPropertyData = {} as PaddingPropertyData,\n): CSSObject {\n const paddingTop = data.paddingTop ?? defaultValue.paddingTop\n const paddingRight = data.paddingRight ?? defaultValue.paddingRight\n const paddingBottom = data.paddingBottom ?? defaultValue.paddingBottom\n const paddingLeft = data.paddingLeft ?? defaultValue.paddingLeft\n const style: CSSObject = {}\n\n if (paddingTop != null) style.paddingTop = lengthDataToString(paddingTop)\n if (paddingRight != null) style.paddingRight = lengthDataToString(paddingRight)\n if (paddingBottom != null) style.paddingBottom = lengthDataToString(paddingBottom)\n if (paddingLeft != null) style.paddingLeft = lengthDataToString(paddingLeft)\n\n return style\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,oBAA+C;AAiCxC,SAAS,2BACd,MACA,eAAoC,CAAC,GAC1B;AACX,QAAM,aAAa,KAAK,cAAc,aAAa;AACnD,QAAM,eAAe,KAAK,gBAAgB,aAAa;AACvD,QAAM,gBAAgB,KAAK,iBAAiB,aAAa;AACzD,QAAM,cAAc,KAAK,eAAe,aAAa;AACrD,QAAM,QAAmB,CAAC;AAE1B,MAAI,cAAc;AAAM,UAAM,iBAAa,kCAAmB,UAAU;AACxE,MAAI,gBAAgB;AAAM,UAAM,mBAAe,kCAAmB,YAAY;AAC9E,MAAI,iBAAiB;AAAM,UAAM,oBAAgB,kCAAmB,aAAa;AACjF,MAAI,eAAe;AAAM,UAAM,kBAAc,kCAAmB,WAAW;AAE3E,SAAO;AACT;","names":[]}
1	+ {"version":3,"sources":["../../../src/css/padding.ts"],"sourcesContent":["import { type CSSObject } from '@emotion/serialize'\nimport { LengthData, lengthDataToString } from './length'\nimport {\n PaddingTopProperty,\n PaddingRightProperty,\n PaddingBottomProperty,\n PaddingLeftProperty,\n} from 'csstype'\n\n/** @see https://developer.mozilla.org/en-US/docs/Web/CSS/padding#constituent_properties /\nexport type PaddingLonghandPropertyData = LengthData\n\n/\n @see https://developer.mozilla.org/en-US/docs/Web/CSS/padding\n \n @todos\n * - Remove `null` from possible values\n * - Remove `undefined` from possible values and make fields optional\n */\nexport type PaddingPropertyData = {\n paddingTop: PaddingLonghandPropertyData \| PaddingTopProperty<number \| string> \| null \| undefined\n paddingRight:\n \| PaddingLonghandPropertyData\n \| PaddingRightProperty<number \| string>\n \| null\n \| undefined\n paddingBottom:\n \| PaddingLonghandPropertyData\n \| PaddingBottomProperty<number \| string>\n \| null\n \| undefined\n paddingLeft: PaddingLonghandPropertyData \| PaddingLeftProperty<number \| string> \| null \| undefined\n}\n\nexport function paddingPropertyDataToStyle(\n data: PaddingPropertyData,\n defaultValue: PaddingPropertyData = {} as PaddingPropertyData,\n): CSSObject {\n const paddingTop = data.paddingTop ?? defaultValue.paddingTop\n const paddingRight = data.paddingRight ?? defaultValue.paddingRight\n const paddingBottom = data.paddingBottom ?? defaultValue.paddingBottom\n const paddingLeft = data.paddingLeft ?? defaultValue.paddingLeft\n const style: CSSObject = {}\n\n if (paddingTop != null) style.paddingTop = lengthDataToString(paddingTop)\n if (paddingRight != null) style.paddingRight = lengthDataToString(paddingRight)\n if (paddingBottom != null) style.paddingBottom = lengthDataToString(paddingBottom)\n if (paddingLeft != null) style.paddingLeft = lengthDataToString(paddingLeft)\n\n return style\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,oBAA+C;AAiCxC,SAAS,2BACd,MACA,eAAoC,CAAC,GAC1B;AACX,QAAM,aAAa,KAAK,cAAc,aAAa;AACnD,QAAM,eAAe,KAAK,gBAAgB,aAAa;AACvD,QAAM,gBAAgB,KAAK,iBAAiB,aAAa;AACzD,QAAM,cAAc,KAAK,eAAe,aAAa;AACrD,QAAM,QAAmB,CAAC;AAE1B,MAAI,cAAc;AAAM,UAAM,iBAAa,kCAAmB,UAAU;AACxE,MAAI,gBAAgB;AAAM,UAAM,mBAAe,kCAAmB,YAAY;AAC9E,MAAI,iBAAiB;AAAM,UAAM,oBAAgB,kCAAmB,aAAa;AACjF,MAAI,eAAe;AAAM,UAAM,kBAAc,kCAAmB,WAAW;AAE3E,SAAO;AACT;","names":[]}

package/dist/cjs/runtimes/react/controls/style.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/runtimes/react/controls/style.ts"],"sourcesContent":["import { CSSObject } from '@emotion/~~css~~'\nimport {\n Style,\n type StyleProperty,\n type ResolvedBorderSideData,\n type FontSizePropertyData,\n type WidthPropertyData,\n type ResolvedStyleData,\n} from '@makeswift/controls'\n\nimport { colorToString } from '../../../components/utils/colorToString'\nimport { responsiveStyle } from '../../../components/utils/responsive-style'\n\nimport { BorderRadiusLonghandPropertyData } from '../../../css/border-radius'\nimport { lengthPercentageDataToString } from '../../../css/length-percentage'\nimport { marginPropertyDataToStyle } from '../../../css/margin'\nimport { paddingPropertyDataToStyle } from '../../../css/padding'\nimport { Breakpoints } from '../../../state/modules/breakpoints'\n\nconst defaultMargin = {\n marginTop: 0,\n marginRight: 'auto',\n marginBottom: 0,\n marginLeft: 'auto',\n}\n\nconst defaultPadding = {\n paddingTop: 0,\n paddingRight: 0,\n paddingBottom: 0,\n paddingLeft: 0,\n}\n\nexport function styleV1Css(\n breakpoints: Breakpoints,\n style: ResolvedStyleData \| undefined,\n properties: StyleProperty[],\n): CSSObject {\n return {\n ...(properties.includes(Style.Width) && {\n maxWidth: '100%',\n }),\n ...responsiveStyle(\n breakpoints,\n [\n style?.width,\n style?.margin,\n style?.padding,\n style?.border,\n style?.borderRadius,\n style?.textStyle,\n ] as const,\n ([width, margin, padding, border, borderRadius, textStyle]) => ({\n ...(properties.includes(Style.Width) && {\n width: widthToString(width) ?? '100%',\n }),\n ...(properties.includes(Style.Margin) &&\n marginPropertyDataToStyle(margin ?? defaultMargin, defaultMargin)),\n ...(properties.includes(Style.Padding) &&\n paddingPropertyDataToStyle(padding ?? defaultPadding, defaultPadding)),\n ...(properties.includes(Style.Border) && {\n borderTop: borderSideToString(border?.borderTop) ?? '0 solid black',\n borderRight: borderSideToString(border?.borderRight) ?? '0 solid black',\n borderBottom: borderSideToString(border?.borderBottom) ?? '0 solid black',\n borderLeft: borderSideToString(border?.borderLeft) ?? '0 solid black',\n }),\n ...(properties.includes(Style.BorderRadius) && {\n borderTopLeftRadius: borderRadiusToString(borderRadius?.borderTopLeftRadius) ?? 0,\n borderTopRightRadius: borderRadiusToString(borderRadius?.borderTopRightRadius) ?? 0,\n borderBottomRightRadius: borderRadiusToString(borderRadius?.borderBottomRightRadius) ?? 0,\n borderBottomLeftRadius: borderRadiusToString(borderRadius?.borderBottomLeftRadius) ?? 0,\n }),\n ...(properties.includes(Style.TextStyle) && {\n ...(textStyle?.fontFamily && { fontFamily: `\"${textStyle.fontFamily}\"` }),\n ...(textStyle?.letterSpacing && { letterSpacing: textStyle.letterSpacing }),\n ...(textStyle?.fontSize && { fontSize: fontSizeToString(textStyle.fontSize) }),\n ...(textStyle?.fontWeight && { fontWeight: textStyle.fontWeight }),\n textTransform: textStyle?.textTransform ?? [],\n fontStyle: textStyle?.fontStyle ?? [],\n }),\n }),\n ),\n }\n\n function widthToString(widthProperty: WidthPropertyData \| undefined): string \| null {\n if (widthProperty == null) return null\n\n return lengthPercentageDataToString(widthProperty)\n }\n\n function borderSideToString(\n borderSide: ResolvedBorderSideData \| null \| undefined,\n ): string \| null {\n if (borderSide == null) return null\n\n const { width, color, style } = borderSide\n return `${width != null ? width : 0}px ${style} ${\n color != null ? colorToString(color) : 'black'\n }`\n }\n\n function borderRadiusToString(\n borderRadius: BorderRadiusLonghandPropertyData \| null \| undefined,\n ): string \| null {\n if (borderRadius == null) return null\n\n return lengthPercentageDataToString(borderRadius)\n }\n\n function fontSizeToString(fontSize: NonNullable<FontSizePropertyData>) {\n return `${fontSize.value}${fontSize.unit}`\n }\n}\n"],"mappings":"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","names":["style"]}
1	+ {"version":3,"sources":["../../../../../src/runtimes/react/controls/style.ts"],"sourcesContent":["import { type CSSObject } from '@emotion/serialize'\nimport {\n Style,\n type StyleProperty,\n type ResolvedBorderSideData,\n type FontSizePropertyData,\n type WidthPropertyData,\n type ResolvedStyleData,\n} from '@makeswift/controls'\n\nimport { colorToString } from '../../../components/utils/colorToString'\nimport { responsiveStyle } from '../../../components/utils/responsive-style'\n\nimport { BorderRadiusLonghandPropertyData } from '../../../css/border-radius'\nimport { lengthPercentageDataToString } from '../../../css/length-percentage'\nimport { marginPropertyDataToStyle } from '../../../css/margin'\nimport { paddingPropertyDataToStyle } from '../../../css/padding'\nimport { Breakpoints } from '../../../state/modules/breakpoints'\n\nconst defaultMargin = {\n marginTop: 0,\n marginRight: 'auto',\n marginBottom: 0,\n marginLeft: 'auto',\n}\n\nconst defaultPadding = {\n paddingTop: 0,\n paddingRight: 0,\n paddingBottom: 0,\n paddingLeft: 0,\n}\n\nexport function styleV1Css(\n breakpoints: Breakpoints,\n style: ResolvedStyleData \| undefined,\n properties: StyleProperty[],\n): CSSObject {\n return {\n ...(properties.includes(Style.Width) && {\n maxWidth: '100%',\n }),\n ...responsiveStyle(\n breakpoints,\n [\n style?.width,\n style?.margin,\n style?.padding,\n style?.border,\n style?.borderRadius,\n style?.textStyle,\n ] as const,\n ([width, margin, padding, border, borderRadius, textStyle]) => ({\n ...(properties.includes(Style.Width) && {\n width: widthToString(width) ?? '100%',\n }),\n ...(properties.includes(Style.Margin) &&\n marginPropertyDataToStyle(margin ?? defaultMargin, defaultMargin)),\n ...(properties.includes(Style.Padding) &&\n paddingPropertyDataToStyle(padding ?? defaultPadding, defaultPadding)),\n ...(properties.includes(Style.Border) && {\n borderTop: borderSideToString(border?.borderTop) ?? '0 solid black',\n borderRight: borderSideToString(border?.borderRight) ?? '0 solid black',\n borderBottom: borderSideToString(border?.borderBottom) ?? '0 solid black',\n borderLeft: borderSideToString(border?.borderLeft) ?? '0 solid black',\n }),\n ...(properties.includes(Style.BorderRadius) && {\n borderTopLeftRadius: borderRadiusToString(borderRadius?.borderTopLeftRadius) ?? 0,\n borderTopRightRadius: borderRadiusToString(borderRadius?.borderTopRightRadius) ?? 0,\n borderBottomRightRadius: borderRadiusToString(borderRadius?.borderBottomRightRadius) ?? 0,\n borderBottomLeftRadius: borderRadiusToString(borderRadius?.borderBottomLeftRadius) ?? 0,\n }),\n ...(properties.includes(Style.TextStyle) && {\n ...(textStyle?.fontFamily && { fontFamily: `\"${textStyle.fontFamily}\"` }),\n ...(textStyle?.letterSpacing && { letterSpacing: textStyle.letterSpacing }),\n ...(textStyle?.fontSize && { fontSize: fontSizeToString(textStyle.fontSize) }),\n ...(textStyle?.fontWeight && { fontWeight: textStyle.fontWeight }),\n textTransform: textStyle?.textTransform ?? [],\n fontStyle: textStyle?.fontStyle ?? [],\n }),\n }),\n ),\n }\n\n function widthToString(widthProperty: WidthPropertyData \| undefined): string \| null {\n if (widthProperty == null) return null\n\n return lengthPercentageDataToString(widthProperty)\n }\n\n function borderSideToString(\n borderSide: ResolvedBorderSideData \| null \| undefined,\n ): string \| null {\n if (borderSide == null) return null\n\n const { width, color, style } = borderSide\n return `${width != null ? width : 0}px ${style} ${\n color != null ? colorToString(color) : 'black'\n }`\n }\n\n function borderRadiusToString(\n borderRadius: BorderRadiusLonghandPropertyData \| null \| undefined,\n ): string \| null {\n if (borderRadius == null) return null\n\n return lengthPercentageDataToString(borderRadius)\n }\n\n function fontSizeToString(fontSize: NonNullable<FontSizePropertyData>) {\n return `${fontSize.value}${fontSize.unit}`\n }\n}\n"],"mappings":"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","names":["style"]}

package/dist/cjs/runtimes/react/hooks/use-stylesheet-factory.js CHANGED Viewed

@@ -24,7 +24,7 @@ module.exports = __toCommonJS(use_stylesheet_factory_exports);
 var import_react = require("react");
 var import_serialize = require("@emotion/serialize");
 var import_controls = require("@makeswift/controls");
-var import_root_style_registry = require("../../../next/root-style-registry");
+var import_root_style_registry = require("../root-style-registry");
 var import_style = require("../controls/style");
 var import_typography = require("../controls/typography");
 var import_use_breakpoints = require("./use-breakpoints");

package/dist/cjs/runtimes/react/hooks/use-stylesheet-factory.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/runtimes/react/hooks/use-stylesheet-factory.ts"],"sourcesContent":["import { useMemo, useEffect, useRef } from 'react'\nimport { type CSSObject, serializeStyles } from '@emotion/serialize'\nimport { type EmotionCache } from '@emotion/cache'\nimport { type SerializedStyles } from '@emotion/utils'\n\nimport {\n type Breakpoints,\n type BoxModel,\n type Stylesheet,\n type ResolvedStyle,\n type ResolvedStyleV2,\n type ResolvedTypographyStyle,\n isNotNil,\n getBaseBreakpoint,\n getBreakpointMediaQuery,\n} from '@makeswift/controls'\n\nimport { useCache } from '~~../../../next/~~root-style-registry'\n\nimport { styleV1Css } from '../controls/style'\nimport { typographyCss } from '../controls/typography'\n\nimport { useBreakpoints } from './use-breakpoints'\nimport { useCssId } from './use-css-id'\nimport { useStyles, serializedStyleClassName } from '../use-style'\nimport { pollBoxModel } from '../poll-box-model'\n\nexport type StylesheetFactory = {\n get(propName: string): Stylesheet\n useDefinedStyles(): void\n}\n\nexport function useStylesheetFactory(): StylesheetFactory {\n const breakpoints = useBreakpoints()\n const cache = useCache()\n const componentUid = useCssId()\n\n const computedStyles = useRef<Record<string, SerializedStyles>>({}).current\n const boxModelCallbacks = useRef<Record<string, (boxModel: BoxModel \| null) => void>>({}).current\n\n return useMemo(() => {\n const getStylesheet = (styleSheetId: string): Stylesheet => ({\n breakpoints(): Breakpoints {\n return breakpoints\n },\n\n defineStyle(\n style: ResolvedStyle,\n onBoxModelChange?: (boxModel: BoxModel \| null) => void,\n ): string {\n const serialized = serializeStyle(breakpoints, style, cache)\n const uid = `u-${componentUid}-${styleSheetId}`\n computedStyles[uid] = serialized\n\n const className = serializedStyleClassName(cache, serialized)\n if (!onBoxModelChange) return className\n\n boxModelCallbacks[uid] = onBoxModelChange\n return `${className} ${uid}`\n },\n\n child(id: string): Stylesheet {\n return getStylesheet(`${styleSheetId}-${id}`)\n },\n })\n\n return {\n get(propName: string): Stylesheet {\n return getStylesheet(propName)\n },\n\n useDefinedStyles() {\n useStyles(cache, Object.values(computedStyles))\n\n useEffect(() => {\n const unsubscribes = Object.entries(boxModelCallbacks)\n .map(([uid, callback]) =>\n callback != null\n ? pollBoxModel({\n element: document.querySelector(`.${uid}`),\n onBoxModelChange: callback,\n })\n : undefined,\n )\n .filter(isNotNil)\n\n return () => unsubscribes.forEach(fn => fn())\n }, [Object.keys(boxModelCallbacks).join(' ')])\n },\n }\n }, [breakpoints, cache, componentUid])\n}\n\nfunction isTypographyStyle(style: ResolvedStyle): style is ResolvedTypographyStyle {\n return Array.isArray(style)\n}\n\nfunction isStyleV2(style: ResolvedStyle): style is ResolvedStyleV2 {\n return typeof style === 'object' && 'getStyle' in style && typeof style.getStyle === 'function'\n}\n\nfunction styleV2Css(breakpoints: Breakpoints, style: ResolvedStyleV2<CSSObject>): CSSObject {\n return {\n ...style.getStyle(getBaseBreakpoint(breakpoints)),\n ...breakpoints.reduce(\n (styles, breakpoint) => ({\n ...styles,\n [getBreakpointMediaQuery(breakpoint)]: style.getStyle(breakpoint),\n }),\n {},\n ),\n }\n}\n\nfunction resolvedStyleToCss(breakpoints: Breakpoints, style: ResolvedStyle) {\n if (isTypographyStyle(style)) {\n return typographyCss(breakpoints, style)\n }\n\n if (isStyleV2(style)) {\n return styleV2Css(breakpoints, style as ResolvedStyleV2<CSSObject>)\n }\n\n const { properties, styleData } = style\n return styleV1Css(breakpoints, styleData, properties)\n}\n\nfunction serializeStyle(\n breakpoints: Breakpoints,\n style: ResolvedStyle,\n cache: EmotionCache,\n): SerializedStyles {\n const css = resolvedStyleToCss(breakpoints, style)\n return serializeStyles([css], cache.registered)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA2C;AAC3C,uBAAgD;AAIhD,sBAUO;AAEP,iCAAyB;~~AAEzB~~,mBAA2B;AAC3B,wBAA8B;AAE9B,6BAA+B;AAC/B,wBAAyB;AACzB,uBAAoD;AACpD,4BAA6B;AAOtB,SAAS,uBAA0C;AACxD,QAAM,kBAAc,uCAAe;AACnC,QAAM,YAAQ,qCAAS;AACvB,QAAM,mBAAe,4BAAS;AAE9B,QAAM,qBAAiB,qBAAyC,CAAC,CAAC,EAAE;AACpE,QAAM,wBAAoB,qBAA4D,CAAC,CAAC,EAAE;AAE1F,aAAO,sBAAQ,MAAM;AACnB,UAAM,gBAAgB,CAAC,kBAAsC;AAAA,MAC3D,cAA2B;AACzB,eAAO;AAAA,MACT;AAAA,MAEA,YACE,OACA,kBACQ;AACR,cAAM,aAAa,eAAe,aAAa,OAAO,KAAK;AAC3D,cAAM,MAAM,KAAK,YAAY,IAAI,YAAY;AAC7C,uBAAe,GAAG,IAAI;AAEtB,cAAM,gBAAY,2CAAyB,OAAO,UAAU;AAC5D,YAAI,CAAC;AAAkB,iBAAO;AAE9B,0BAAkB,GAAG,IAAI;AACzB,eAAO,GAAG,SAAS,IAAI,GAAG;AAAA,MAC5B;AAAA,MAEA,MAAM,IAAwB;AAC5B,eAAO,cAAc,GAAG,YAAY,IAAI,EAAE,EAAE;AAAA,MAC9C;AAAA,IACF;AAEA,WAAO;AAAA,MACL,IAAI,UAA8B;AAChC,eAAO,cAAc,QAAQ;AAAA,MAC/B;AAAA,MAEA,mBAAmB;AACjB,wCAAU,OAAO,OAAO,OAAO,cAAc,CAAC;AAE9C,oCAAU,MAAM;AACd,gBAAM,eAAe,OAAO,QAAQ,iBAAiB,EAClD;AAAA,YAAI,CAAC,CAAC,KAAK,QAAQ,MAClB,YAAY,WACR,oCAAa;AAAA,cACX,SAAS,SAAS,cAAc,IAAI,GAAG,EAAE;AAAA,cACzC,kBAAkB;AAAA,YACpB,CAAC,IACD;AAAA,UACN,EACC,OAAO,wBAAQ;AAElB,iBAAO,MAAM,aAAa,QAAQ,QAAM,GAAG,CAAC;AAAA,QAC9C,GAAG,CAAC,OAAO,KAAK,iBAAiB,EAAE,KAAK,GAAG,CAAC,CAAC;AAAA,MAC/C;AAAA,IACF;AAAA,EACF,GAAG,CAAC,aAAa,OAAO,YAAY,CAAC;AACvC;AAEA,SAAS,kBAAkB,OAAwD;AACjF,SAAO,MAAM,QAAQ,KAAK;AAC5B;AAEA,SAAS,UAAU,OAAgD;AACjE,SAAO,OAAO,UAAU,YAAY,cAAc,SAAS,OAAO,MAAM,aAAa;AACvF;AAEA,SAAS,WAAW,aAA0B,OAA8C;AAC1F,SAAO;AAAA,IACL,GAAG,MAAM,aAAS,mCAAkB,WAAW,CAAC;AAAA,IAChD,GAAG,YAAY;AAAA,MACb,CAAC,QAAQ,gBAAgB;AAAA,QACvB,GAAG;AAAA,QACH,KAAC,yCAAwB,UAAU,CAAC,GAAG,MAAM,SAAS,UAAU;AAAA,MAClE;AAAA,MACA,CAAC;AAAA,IACH;AAAA,EACF;AACF;AAEA,SAAS,mBAAmB,aAA0B,OAAsB;AAC1E,MAAI,kBAAkB,KAAK,GAAG;AAC5B,eAAO,iCAAc,aAAa,KAAK;AAAA,EACzC;AAEA,MAAI,UAAU,KAAK,GAAG;AACpB,WAAO,WAAW,aAAa,KAAmC;AAAA,EACpE;AAEA,QAAM,EAAE,YAAY,UAAU,IAAI;AAClC,aAAO,yBAAW,aAAa,WAAW,UAAU;AACtD;AAEA,SAAS,eACP,aACA,OACA,OACkB;AAClB,QAAM,MAAM,mBAAmB,aAAa,KAAK;AACjD,aAAO,kCAAgB,CAAC,GAAG,GAAG,MAAM,UAAU;AAChD;","names":[]}
1	+ {"version":3,"sources":["../../../../../src/runtimes/react/hooks/use-stylesheet-factory.ts"],"sourcesContent":["import { useMemo, useEffect, useRef } from 'react'\nimport { type CSSObject, serializeStyles } from '@emotion/serialize'\nimport { type EmotionCache } from '@emotion/cache'\nimport { type SerializedStyles } from '@emotion/utils'\n\nimport {\n type Breakpoints,\n type BoxModel,\n type Stylesheet,\n type ResolvedStyle,\n type ResolvedStyleV2,\n type ResolvedTypographyStyle,\n isNotNil,\n getBaseBreakpoint,\n getBreakpointMediaQuery,\n} from '@makeswift/controls'\n\nimport { useCache } from '../root-style-registry'\nimport { styleV1Css } from '../controls/style'\nimport { typographyCss } from '../controls/typography'\n\nimport { useBreakpoints } from './use-breakpoints'\nimport { useCssId } from './use-css-id'\nimport { useStyles, serializedStyleClassName } from '../use-style'\nimport { pollBoxModel } from '../poll-box-model'\n\nexport type StylesheetFactory = {\n get(propName: string): Stylesheet\n useDefinedStyles(): void\n}\n\nexport function useStylesheetFactory(): StylesheetFactory {\n const breakpoints = useBreakpoints()\n const cache = useCache()\n const componentUid = useCssId()\n\n const computedStyles = useRef<Record<string, SerializedStyles>>({}).current\n const boxModelCallbacks = useRef<Record<string, (boxModel: BoxModel \| null) => void>>({}).current\n\n return useMemo(() => {\n const getStylesheet = (styleSheetId: string): Stylesheet => ({\n breakpoints(): Breakpoints {\n return breakpoints\n },\n\n defineStyle(\n style: ResolvedStyle,\n onBoxModelChange?: (boxModel: BoxModel \| null) => void,\n ): string {\n const serialized = serializeStyle(breakpoints, style, cache)\n const uid = `u-${componentUid}-${styleSheetId}`\n computedStyles[uid] = serialized\n\n const className = serializedStyleClassName(cache, serialized)\n if (!onBoxModelChange) return className\n\n boxModelCallbacks[uid] = onBoxModelChange\n return `${className} ${uid}`\n },\n\n child(id: string): Stylesheet {\n return getStylesheet(`${styleSheetId}-${id}`)\n },\n })\n\n return {\n get(propName: string): Stylesheet {\n return getStylesheet(propName)\n },\n\n useDefinedStyles() {\n useStyles(cache, Object.values(computedStyles))\n\n useEffect(() => {\n const unsubscribes = Object.entries(boxModelCallbacks)\n .map(([uid, callback]) =>\n callback != null\n ? pollBoxModel({\n element: document.querySelector(`.${uid}`),\n onBoxModelChange: callback,\n })\n : undefined,\n )\n .filter(isNotNil)\n\n return () => unsubscribes.forEach(fn => fn())\n }, [Object.keys(boxModelCallbacks).join(' ')])\n },\n }\n }, [breakpoints, cache, componentUid])\n}\n\nfunction isTypographyStyle(style: ResolvedStyle): style is ResolvedTypographyStyle {\n return Array.isArray(style)\n}\n\nfunction isStyleV2(style: ResolvedStyle): style is ResolvedStyleV2 {\n return typeof style === 'object' && 'getStyle' in style && typeof style.getStyle === 'function'\n}\n\nfunction styleV2Css(breakpoints: Breakpoints, style: ResolvedStyleV2<CSSObject>): CSSObject {\n return {\n ...style.getStyle(getBaseBreakpoint(breakpoints)),\n ...breakpoints.reduce(\n (styles, breakpoint) => ({\n ...styles,\n [getBreakpointMediaQuery(breakpoint)]: style.getStyle(breakpoint),\n }),\n {},\n ),\n }\n}\n\nfunction resolvedStyleToCss(breakpoints: Breakpoints, style: ResolvedStyle) {\n if (isTypographyStyle(style)) {\n return typographyCss(breakpoints, style)\n }\n\n if (isStyleV2(style)) {\n return styleV2Css(breakpoints, style as ResolvedStyleV2<CSSObject>)\n }\n\n const { properties, styleData } = style\n return styleV1Css(breakpoints, styleData, properties)\n}\n\nfunction serializeStyle(\n breakpoints: Breakpoints,\n style: ResolvedStyle,\n cache: EmotionCache,\n): SerializedStyles {\n const css = resolvedStyleToCss(breakpoints, style)\n return serializeStyles([css], cache.registered)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA2C;AAC3C,uBAAgD;AAIhD,sBAUO;AAEP,iCAAyB;AACzB,mBAA2B;AAC3B,wBAA8B;AAE9B,6BAA+B;AAC/B,wBAAyB;AACzB,uBAAoD;AACpD,4BAA6B;AAOtB,SAAS,uBAA0C;AACxD,QAAM,kBAAc,uCAAe;AACnC,QAAM,YAAQ,qCAAS;AACvB,QAAM,mBAAe,4BAAS;AAE9B,QAAM,qBAAiB,qBAAyC,CAAC,CAAC,EAAE;AACpE,QAAM,wBAAoB,qBAA4D,CAAC,CAAC,EAAE;AAE1F,aAAO,sBAAQ,MAAM;AACnB,UAAM,gBAAgB,CAAC,kBAAsC;AAAA,MAC3D,cAA2B;AACzB,eAAO;AAAA,MACT;AAAA,MAEA,YACE,OACA,kBACQ;AACR,cAAM,aAAa,eAAe,aAAa,OAAO,KAAK;AAC3D,cAAM,MAAM,KAAK,YAAY,IAAI,YAAY;AAC7C,uBAAe,GAAG,IAAI;AAEtB,cAAM,gBAAY,2CAAyB,OAAO,UAAU;AAC5D,YAAI,CAAC;AAAkB,iBAAO;AAE9B,0BAAkB,GAAG,IAAI;AACzB,eAAO,GAAG,SAAS,IAAI,GAAG;AAAA,MAC5B;AAAA,MAEA,MAAM,IAAwB;AAC5B,eAAO,cAAc,GAAG,YAAY,IAAI,EAAE,EAAE;AAAA,MAC9C;AAAA,IACF;AAEA,WAAO;AAAA,MACL,IAAI,UAA8B;AAChC,eAAO,cAAc,QAAQ;AAAA,MAC/B;AAAA,MAEA,mBAAmB;AACjB,wCAAU,OAAO,OAAO,OAAO,cAAc,CAAC;AAE9C,oCAAU,MAAM;AACd,gBAAM,eAAe,OAAO,QAAQ,iBAAiB,EAClD;AAAA,YAAI,CAAC,CAAC,KAAK,QAAQ,MAClB,YAAY,WACR,oCAAa;AAAA,cACX,SAAS,SAAS,cAAc,IAAI,GAAG,EAAE;AAAA,cACzC,kBAAkB;AAAA,YACpB,CAAC,IACD;AAAA,UACN,EACC,OAAO,wBAAQ;AAElB,iBAAO,MAAM,aAAa,QAAQ,QAAM,GAAG,CAAC;AAAA,QAC9C,GAAG,CAAC,OAAO,KAAK,iBAAiB,EAAE,KAAK,GAAG,CAAC,CAAC;AAAA,MAC/C;AAAA,IACF;AAAA,EACF,GAAG,CAAC,aAAa,OAAO,YAAY,CAAC;AACvC;AAEA,SAAS,kBAAkB,OAAwD;AACjF,SAAO,MAAM,QAAQ,KAAK;AAC5B;AAEA,SAAS,UAAU,OAAgD;AACjE,SAAO,OAAO,UAAU,YAAY,cAAc,SAAS,OAAO,MAAM,aAAa;AACvF;AAEA,SAAS,WAAW,aAA0B,OAA8C;AAC1F,SAAO;AAAA,IACL,GAAG,MAAM,aAAS,mCAAkB,WAAW,CAAC;AAAA,IAChD,GAAG,YAAY;AAAA,MACb,CAAC,QAAQ,gBAAgB;AAAA,QACvB,GAAG;AAAA,QACH,KAAC,yCAAwB,UAAU,CAAC,GAAG,MAAM,SAAS,UAAU;AAAA,MAClE;AAAA,MACA,CAAC;AAAA,IACH;AAAA,EACF;AACF;AAEA,SAAS,mBAAmB,aAA0B,OAAsB;AAC1E,MAAI,kBAAkB,KAAK,GAAG;AAC5B,eAAO,iCAAc,aAAa,KAAK;AAAA,EACzC;AAEA,MAAI,UAAU,KAAK,GAAG;AACpB,WAAO,WAAW,aAAa,KAAmC;AAAA,EACpE;AAEA,QAAM,EAAE,YAAY,UAAU,IAAI;AAClC,aAAO,yBAAW,aAAa,WAAW,UAAU;AACtD;AAEA,SAAS,eACP,aACA,OACA,OACkB;AAClB,QAAM,MAAM,mBAAmB,aAAa,KAAK;AACjD,aAAO,kCAAgB,CAAC,GAAG,GAAG,MAAM,UAAU;AAChD;","names":[]}

package/dist/cjs/runtimes/react/hooks/use-universal-dispatch.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/runtimes/react/hooks/use-universal-dispatch.ts"],"sourcesContent":["import { useEffect } from 'react'\nimport type { ThunkAction } from '~~redux-thunk~~'\n\nimport { type Dispatch } from '../../../state/react-page'\nimport { type Action } from '../../../state/actions'\n\nimport { isServer } from '../../../utils/is-server'\n\n// overloaded signatures\nexport function useUniversalDispatch<Args extends any[], A extends Action>(\n dispatch: Dispatch,\n action: (...args: Args) => A,\n args: Args,\n): void\nexport function useUniversalDispatch<Args extends any[], A extends Action>(\n dispatch: Dispatch,\n action: (...args: Args) => ThunkAction<() => void, any, any, A>,\n args: Args,\n): void\n// implementation\nexport function useUniversalDispatch<Args extends any[], A extends Action>(\n dispatch: Dispatch,\n action: (...args: Args) => ThunkAction<() => void, any, any, A>,\n args: Args,\n) {\n if (isServer()) {\n dispatch(action(...args))\n }\n\n useEffect(() => {\n dispatch(action(...args))\n }, [dispatch, action, ...args])\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA0B;AAM1B,uBAAyB;AAclB,SAAS,qBACd,UACA,QACA,MACA;AACA,UAAI,2BAAS,GAAG;AACd,aAAS,OAAO,GAAG,IAAI,CAAC;AAAA,EAC1B;AAEA,8BAAU,MAAM;AACd,aAAS,OAAO,GAAG,IAAI,CAAC;AAAA,EAC1B,GAAG,CAAC,UAAU,QAAQ,GAAG,IAAI,CAAC;AAChC;","names":[]}
1	+ {"version":3,"sources":["../../../../../src/runtimes/react/hooks/use-universal-dispatch.ts"],"sourcesContent":["import { useEffect } from 'react'\nimport type { ThunkAction } from '@reduxjs/toolkit'\n\nimport { type Dispatch } from '../../../state/react-page'\nimport { type Action } from '../../../state/actions'\n\nimport { isServer } from '../../../utils/is-server'\n\n// overloaded signatures\nexport function useUniversalDispatch<Args extends any[], A extends Action>(\n dispatch: Dispatch,\n action: (...args: Args) => A,\n args: Args,\n): void\nexport function useUniversalDispatch<Args extends any[], A extends Action>(\n dispatch: Dispatch,\n action: (...args: Args) => ThunkAction<() => void, any, any, A>,\n args: Args,\n): void\n// implementation\nexport function useUniversalDispatch<Args extends any[], A extends Action>(\n dispatch: Dispatch,\n action: (...args: Args) => ThunkAction<() => void, any, any, A>,\n args: Args,\n) {\n if (isServer()) {\n dispatch(action(...args))\n }\n\n useEffect(() => {\n dispatch(action(...args))\n }, [dispatch, action, ...args])\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA0B;AAM1B,uBAAyB;AAclB,SAAS,qBACd,UACA,QACA,MACA;AACA,UAAI,2BAAS,GAAG;AACd,aAAS,OAAO,GAAG,IAAI,CAAC;AAAA,EAC1B;AAEA,8BAAU,MAAM;AACd,aAAS,OAAO,GAAG,IAAI,CAAC;AAAA,EAC1B,GAAG,CAAC,UAAU,QAAQ,GAAG,IAAI,CAAC;AAChC;","names":[]}

package/dist/cjs/runtimes/react/root-style-registry.js CHANGED Viewed

@@ -1,4 +1,5 @@
 "use strict";
+"use client";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/dist/cjs/runtimes/react/root-style-registry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/runtimes/react/root-style-registry.tsx"],"sourcesContent":["~~import~~ createCache, { EmotionCache } from '@emotion/cache'\nimport { cache } from '@emotion/css'\nimport { ReactNode, createContext, useContext } from 'react'\n\nconst CacheContext = createContext(cache)\n\nconst DEFAULT_CSS_RESET_ENABLED = true\nconst CSSResetEnabledContext = createContext(DEFAULT_CSS_RESET_ENABLED)\n\nexport const createRootStyleCache = ({ key }: { key?: string } = {}) => {\n const cache = createCache({ key: key ?? 'mswft' })\n cache.compat = true\n\n const prevInsert = cache.insert\n let inserted: string[] = []\n\n cache.insert = (...args) => {\n const serialized = args[1]\n if (cache.inserted[serialized.name] === undefined) {\n inserted.push(serialized.name)\n }\n return prevInsert(...args)\n }\n\n const flush = () => {\n const prevInserted = inserted\n inserted = []\n return prevInserted\n }\n\n return { cache, flush }\n}\n\ntype Props = {\n children: ReactNode\n cache: EmotionCache\n /*\n Toggle the built-in CSS reset.\n * Set to `false` when using `@layer`-based CSS frameworks like Tailwind.\n */\n enableCssReset?: boolean\n}\n\nexport function RootStyleRegistry({ children, cache, enableCssReset }: Props) {\n return (\n <CacheContext.Provider value={cache}>\n <CSSResetEnabledContext.Provider value={enableCssReset ?? DEFAULT_CSS_RESET_ENABLED}>\n {children}\n </CSSResetEnabledContext.Provider>\n </CacheContext.Provider>\n )\n}\n\nexport function useCache(): EmotionCache {\n return useContext(CacheContext)\n}\n\nexport function useCSSResetEnabled(): boolean {\n return useContext(CSSResetEnabledContext)\n}\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;~~AA8CM~~;AA9CN,mBAA0C;AAC1C,iBAAsB;AACtB,mBAAqD;AAErD,MAAM,mBAAe,4BAAc,gBAAK;AAExC,MAAM,4BAA4B;AAClC,MAAM,6BAAyB,4BAAc,yBAAyB;AAE/D,MAAM,uBAAuB,CAAC,EAAE,IAAI,IAAsB,CAAC,MAAM;AACtE,QAAMA,aAAQ,aAAAC,SAAY,EAAE,KAAK,OAAO,QAAQ,CAAC;AACjD,EAAAD,OAAM,SAAS;AAEf,QAAM,aAAaA,OAAM;AACzB,MAAI,WAAqB,CAAC;AAE1B,EAAAA,OAAM,SAAS,IAAI,SAAS;AAC1B,UAAM,aAAa,KAAK,CAAC;AACzB,QAAIA,OAAM,SAAS,WAAW,IAAI,MAAM,QAAW;AACjD,eAAS,KAAK,WAAW,IAAI;AAAA,IAC/B;AACA,WAAO,WAAW,GAAG,IAAI;AAAA,EAC3B;AAEA,QAAM,QAAQ,MAAM;AAClB,UAAM,eAAe;AACrB,eAAW,CAAC;AACZ,WAAO;AAAA,EACT;AAEA,SAAO,EAAE,OAAAA,QAAO,MAAM;AACxB;AAYO,SAAS,kBAAkB,EAAE,UAAU,OAAAA,QAAO,eAAe,GAAU;AAC5E,SACE,4CAAC,aAAa,UAAb,EAAsB,OAAOA,QAC5B,sDAAC,uBAAuB,UAAvB,EAAgC,OAAO,kBAAkB,2BACvD,UACH,GACF;AAEJ;AAEO,SAAS,WAAyB;AACvC,aAAO,yBAAW,YAAY;AAChC;AAEO,SAAS,qBAA8B;AAC5C,aAAO,yBAAW,sBAAsB;AAC1C;","names":["cache","createCache"]}
1	+ {"version":3,"sources":["../../../../src/runtimes/react/root-style-registry.tsx"],"sourcesContent":["'use client'\n\nimport createCache, { EmotionCache } from '@emotion/cache'\nimport { cache } from '@emotion/css'\nimport { ReactNode, createContext, useContext } from 'react'\n\nconst CacheContext = createContext(cache)\n\nconst DEFAULT_CSS_RESET_ENABLED = true\nconst CSSResetEnabledContext = createContext(DEFAULT_CSS_RESET_ENABLED)\n\nexport const createRootStyleCache = ({ key }: { key?: string } = {}) => {\n const cache = createCache({ key: key ?? 'mswft' })\n cache.compat = true\n\n const prevInsert = cache.insert\n let inserted: string[] = []\n\n cache.insert = (...args) => {\n const serialized = args[1]\n if (cache.inserted[serialized.name] === undefined) {\n inserted.push(serialized.name)\n }\n return prevInsert(...args)\n }\n\n const flush = () => {\n const prevInserted = inserted\n inserted = []\n return prevInserted\n }\n\n return { cache, flush }\n}\n\ntype Props = {\n children: ReactNode\n cache: EmotionCache\n /*\n Toggle the built-in CSS reset.\n * Set to `false` when using `@layer`-based CSS frameworks like Tailwind.\n */\n enableCssReset?: boolean\n}\n\nexport function RootStyleRegistry({ children, cache, enableCssReset }: Props) {\n return (\n <CacheContext.Provider value={cache}>\n <CSSResetEnabledContext.Provider value={enableCssReset ?? DEFAULT_CSS_RESET_ENABLED}>\n {children}\n </CSSResetEnabledContext.Provider>\n </CacheContext.Provider>\n )\n}\n\nexport function useCache(): EmotionCache {\n return useContext(CacheContext)\n}\n\nexport function useCSSResetEnabled(): boolean {\n return useContext(CSSResetEnabledContext)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgDM;AA9CN,mBAA0C;AAC1C,iBAAsB;AACtB,mBAAqD;AAErD,MAAM,mBAAe,4BAAc,gBAAK;AAExC,MAAM,4BAA4B;AAClC,MAAM,6BAAyB,4BAAc,yBAAyB;AAE/D,MAAM,uBAAuB,CAAC,EAAE,IAAI,IAAsB,CAAC,MAAM;AACtE,QAAMA,aAAQ,aAAAC,SAAY,EAAE,KAAK,OAAO,QAAQ,CAAC;AACjD,EAAAD,OAAM,SAAS;AAEf,QAAM,aAAaA,OAAM;AACzB,MAAI,WAAqB,CAAC;AAE1B,EAAAA,OAAM,SAAS,IAAI,SAAS;AAC1B,UAAM,aAAa,KAAK,CAAC;AACzB,QAAIA,OAAM,SAAS,WAAW,IAAI,MAAM,QAAW;AACjD,eAAS,KAAK,WAAW,IAAI;AAAA,IAC/B;AACA,WAAO,WAAW,GAAG,IAAI;AAAA,EAC3B;AAEA,QAAM,QAAQ,MAAM;AAClB,UAAM,eAAe;AACrB,eAAW,CAAC;AACZ,WAAO;AAAA,EACT;AAEA,SAAO,EAAE,OAAAA,QAAO,MAAM;AACxB;AAYO,SAAS,kBAAkB,EAAE,UAAU,OAAAA,QAAO,eAAe,GAAU;AAC5E,SACE,4CAAC,aAAa,UAAb,EAAsB,OAAOA,QAC5B,sDAAC,uBAAuB,UAAvB,EAAgC,OAAO,kBAAkB,2BACvD,UACH,GACF;AAEJ;AAEO,SAAS,WAAyB;AACvC,aAAO,yBAAW,YAAY;AAChC;AAEO,SAAS,qBAA8B;AAC5C,aAAO,yBAAW,sBAAsB;AAC1C;","names":["cache","createCache"]}

package/dist/cjs/runtimes/react/use-global-style.js CHANGED Viewed

@@ -36,7 +36,7 @@ var React = __toESM(require("react"));
 var import_react = require("react");
 var import_serialize = require("@emotion/serialize");
 var import_utils = require("@emotion/utils");
-var import_root_style_registry = require("../../next/root-style-registry");
+var import_root_style_registry = require("./root-style-registry");
 const isServer = typeof window === "undefined";
 const useInsertionEffectSpecifier = "useInsertionEffect";
 const useInsertionEffect = React[useInsertionEffectSpecifier] ?? React.useLayoutEffect;

package/dist/cjs/runtimes/react/use-global-style.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/runtimes/react/use-global-style.ts"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { useRef } from 'react'\nimport { CSSInterpolation, serializeStyles } from '@emotion/serialize'\nimport { StyleSheet } from '@emotion/sheet'\nimport { insertStyles } from '@emotion/utils'\nimport { useCache } from '~~../../next/~~root-style-registry'\n\nconst isServer = typeof window === 'undefined'\nconst useInsertionEffectSpecifier = 'useInsertionEffect'\nconst useInsertionEffect = React[useInsertionEffectSpecifier] ?? React.useLayoutEffect\n\nexport function useGlobalStyle(...args: CSSInterpolation[]): void {\n const cache = useCache()\n const serialized = serializeStyles(args, cache.registered)\n\n if (isServer) {\n if (cache.inserted[serialized.name] === undefined) {\n cache.insert('', serialized, cache.sheet, true)\n }\n }\n\n const sheetRef = useRef<[StyleSheet, boolean]>()\n\n // Hydration\n useInsertionEffect(() => {\n const key = `${cache.key}-global`\n\n const cacheSheet = cache.sheet as StyleSheet\n const sheet = new (cacheSheet.constructor as typeof StyleSheet)({\n key,\n nonce: cacheSheet.nonce,\n container: cacheSheet.container,\n speedy: cacheSheet.isSpeedy,\n })\n\n const node = document.querySelector<HTMLStyleElement>(\n `style[data-emotion=\"${key} ${serialized.name}\"]`,\n )\n\n if (cache.sheet.tags.length > 0) {\n sheet.before = cache.sheet.tags[0]\n }\n\n let rehydrating = false\n\n if (node != null) {\n rehydrating = true\n node.setAttribute('data-emotion', key)\n sheet.hydrate([node])\n }\n\n sheetRef.current = [sheet, rehydrating]\n\n return () => {\n sheet.flush()\n }\n })\n\n // Insertion\n useInsertionEffect(() => {\n const [sheet, rehydrating] = sheetRef.current ?? []\n\n if (sheet == null \|\| rehydrating == null) return\n\n if (rehydrating) {\n sheetRef.current = [sheet, false]\n\n return\n }\n\n if (serialized.next != null) {\n insertStyles(cache, serialized.next, true)\n }\n\n if (sheet.tags.length > 0) {\n const element = sheet.tags[sheet.tags.length - 1].nextElementSibling\n\n sheet.before = element\n\n sheet.flush()\n }\n\n cache.insert('', serialized, sheet, false)\n })\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,YAAuB;AACvB,mBAAuB;AACvB,uBAAkD;AAElD,mBAA6B;~~AAC7B~~,iCAAyB;AAEzB,MAAM,WAAW,OAAO,WAAW;AACnC,MAAM,8BAA8B;AACpC,MAAM,qBAAqB,MAAM,2BAA2B,KAAK,MAAM;AAEhE,SAAS,kBAAkB,MAAgC;AAChE,QAAM,YAAQ,qCAAS;AACvB,QAAM,iBAAa,kCAAgB,MAAM,MAAM,UAAU;AAEzD,MAAI,UAAU;AACZ,QAAI,MAAM,SAAS,WAAW,IAAI,MAAM,QAAW;AACjD,YAAM,OAAO,IAAI,YAAY,MAAM,OAAO,IAAI;AAAA,IAChD;AAAA,EACF;AAEA,QAAM,eAAW,qBAA8B;AAG/C,qBAAmB,MAAM;AACvB,UAAM,MAAM,GAAG,MAAM,GAAG;AAExB,UAAM,aAAa,MAAM;AACzB,UAAM,QAAQ,IAAK,WAAW,YAAkC;AAAA,MAC9D;AAAA,MACA,OAAO,WAAW;AAAA,MAClB,WAAW,WAAW;AAAA,MACtB,QAAQ,WAAW;AAAA,IACrB,CAAC;AAED,UAAM,OAAO,SAAS;AAAA,MACpB,uBAAuB,GAAG,IAAI,WAAW,IAAI;AAAA,IAC/C;AAEA,QAAI,MAAM,MAAM,KAAK,SAAS,GAAG;AAC/B,YAAM,SAAS,MAAM,MAAM,KAAK,CAAC;AAAA,IACnC;AAEA,QAAI,cAAc;AAElB,QAAI,QAAQ,MAAM;AAChB,oBAAc;AACd,WAAK,aAAa,gBAAgB,GAAG;AACrC,YAAM,QAAQ,CAAC,IAAI,CAAC;AAAA,IACtB;AAEA,aAAS,UAAU,CAAC,OAAO,WAAW;AAEtC,WAAO,MAAM;AACX,YAAM,MAAM;AAAA,IACd;AAAA,EACF,CAAC;AAGD,qBAAmB,MAAM;AACvB,UAAM,CAAC,OAAO,WAAW,IAAI,SAAS,WAAW,CAAC;AAElD,QAAI,SAAS,QAAQ,eAAe;AAAM;AAE1C,QAAI,aAAa;AACf,eAAS,UAAU,CAAC,OAAO,KAAK;AAEhC;AAAA,IACF;AAEA,QAAI,WAAW,QAAQ,MAAM;AAC3B,qCAAa,OAAO,WAAW,MAAM,IAAI;AAAA,IAC3C;AAEA,QAAI,MAAM,KAAK,SAAS,GAAG;AACzB,YAAM,UAAU,MAAM,KAAK,MAAM,KAAK,SAAS,CAAC,EAAE;AAElD,YAAM,SAAS;AAEf,YAAM,MAAM;AAAA,IACd;AAEA,UAAM,OAAO,IAAI,YAAY,OAAO,KAAK;AAAA,EAC3C,CAAC;AACH;","names":[]}
1	+ {"version":3,"sources":["../../../../src/runtimes/react/use-global-style.ts"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { useRef } from 'react'\nimport { CSSInterpolation, serializeStyles } from '@emotion/serialize'\nimport { StyleSheet } from '@emotion/sheet'\nimport { insertStyles } from '@emotion/utils'\n\nimport { useCache } from './root-style-registry'\n\nconst isServer = typeof window === 'undefined'\nconst useInsertionEffectSpecifier = 'useInsertionEffect'\nconst useInsertionEffect = React[useInsertionEffectSpecifier] ?? React.useLayoutEffect\n\nexport function useGlobalStyle(...args: CSSInterpolation[]): void {\n const cache = useCache()\n const serialized = serializeStyles(args, cache.registered)\n\n if (isServer) {\n if (cache.inserted[serialized.name] === undefined) {\n cache.insert('', serialized, cache.sheet, true)\n }\n }\n\n const sheetRef = useRef<[StyleSheet, boolean]>()\n\n // Hydration\n useInsertionEffect(() => {\n const key = `${cache.key}-global`\n\n const cacheSheet = cache.sheet as StyleSheet\n const sheet = new (cacheSheet.constructor as typeof StyleSheet)({\n key,\n nonce: cacheSheet.nonce,\n container: cacheSheet.container,\n speedy: cacheSheet.isSpeedy,\n })\n\n const node = document.querySelector<HTMLStyleElement>(\n `style[data-emotion=\"${key} ${serialized.name}\"]`,\n )\n\n if (cache.sheet.tags.length > 0) {\n sheet.before = cache.sheet.tags[0]\n }\n\n let rehydrating = false\n\n if (node != null) {\n rehydrating = true\n node.setAttribute('data-emotion', key)\n sheet.hydrate([node])\n }\n\n sheetRef.current = [sheet, rehydrating]\n\n return () => {\n sheet.flush()\n }\n })\n\n // Insertion\n useInsertionEffect(() => {\n const [sheet, rehydrating] = sheetRef.current ?? []\n\n if (sheet == null \|\| rehydrating == null) return\n\n if (rehydrating) {\n sheetRef.current = [sheet, false]\n\n return\n }\n\n if (serialized.next != null) {\n insertStyles(cache, serialized.next, true)\n }\n\n if (sheet.tags.length > 0) {\n const element = sheet.tags[sheet.tags.length - 1].nextElementSibling\n\n sheet.before = element\n\n sheet.flush()\n }\n\n cache.insert('', serialized, sheet, false)\n })\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,YAAuB;AACvB,mBAAuB;AACvB,uBAAkD;AAElD,mBAA6B;AAE7B,iCAAyB;AAEzB,MAAM,WAAW,OAAO,WAAW;AACnC,MAAM,8BAA8B;AACpC,MAAM,qBAAqB,MAAM,2BAA2B,KAAK,MAAM;AAEhE,SAAS,kBAAkB,MAAgC;AAChE,QAAM,YAAQ,qCAAS;AACvB,QAAM,iBAAa,kCAAgB,MAAM,MAAM,UAAU;AAEzD,MAAI,UAAU;AACZ,QAAI,MAAM,SAAS,WAAW,IAAI,MAAM,QAAW;AACjD,YAAM,OAAO,IAAI,YAAY,MAAM,OAAO,IAAI;AAAA,IAChD;AAAA,EACF;AAEA,QAAM,eAAW,qBAA8B;AAG/C,qBAAmB,MAAM;AACvB,UAAM,MAAM,GAAG,MAAM,GAAG;AAExB,UAAM,aAAa,MAAM;AACzB,UAAM,QAAQ,IAAK,WAAW,YAAkC;AAAA,MAC9D;AAAA,MACA,OAAO,WAAW;AAAA,MAClB,WAAW,WAAW;AAAA,MACtB,QAAQ,WAAW;AAAA,IACrB,CAAC;AAED,UAAM,OAAO,SAAS;AAAA,MACpB,uBAAuB,GAAG,IAAI,WAAW,IAAI;AAAA,IAC/C;AAEA,QAAI,MAAM,MAAM,KAAK,SAAS,GAAG;AAC/B,YAAM,SAAS,MAAM,MAAM,KAAK,CAAC;AAAA,IACnC;AAEA,QAAI,cAAc;AAElB,QAAI,QAAQ,MAAM;AAChB,oBAAc;AACd,WAAK,aAAa,gBAAgB,GAAG;AACrC,YAAM,QAAQ,CAAC,IAAI,CAAC;AAAA,IACtB;AAEA,aAAS,UAAU,CAAC,OAAO,WAAW;AAEtC,WAAO,MAAM;AACX,YAAM,MAAM;AAAA,IACd;AAAA,EACF,CAAC;AAGD,qBAAmB,MAAM;AACvB,UAAM,CAAC,OAAO,WAAW,IAAI,SAAS,WAAW,CAAC;AAElD,QAAI,SAAS,QAAQ,eAAe;AAAM;AAE1C,QAAI,aAAa;AACf,eAAS,UAAU,CAAC,OAAO,KAAK;AAEhC;AAAA,IACF;AAEA,QAAI,WAAW,QAAQ,MAAM;AAC3B,qCAAa,OAAO,WAAW,MAAM,IAAI;AAAA,IAC3C;AAEA,QAAI,MAAM,KAAK,SAAS,GAAG;AACzB,YAAM,UAAU,MAAM,KAAK,MAAM,KAAK,SAAS,CAAC,EAAE;AAElD,YAAM,SAAS;AAEf,YAAM,MAAM;AAAA,IACd;AAEA,UAAM,OAAO,IAAI,YAAY,OAAO,KAAK;AAAA,EAC3C,CAAC;AACH;","names":[]}

package/dist/cjs/runtimes/react/use-style.js CHANGED Viewed

@@ -34,15 +34,15 @@ __export(use_style_exports, {
 });
 module.exports = __toCommonJS(use_style_exports);
 var import_react = __toESM(require("react"));
-var import_serialize = require("@emotion/serialize");
+var import_serialize2 = require("@emotion/serialize");
 var import_utils = require("@emotion/utils");
-var import_root_style_registry = require("../../next/root-style-registry");
 var import_is_server = require("../../utils/is-server");
+var import_root_style_registry = require("./root-style-registry");
 const useInsertionEffectSpecifier = "useInsertionEffect";
 const useInsertionEffect = import_react.default[useInsertionEffectSpecifier] ?? import_react.default.useLayoutEffect;
 function useStyle(style) {
   const cache = (0, import_root_style_registry.useCache)();
-  const serialized = (0, import_serialize.serializeStyles)([style], cache.registered);
+  const serialized = (0, import_serialize2.serializeStyles)([style], cache.registered);
   (0, import_utils.registerStyles)(cache, serialized, false);
   useUniversalInsertionEffect(() => {
     (0, import_utils.insertStyles)(cache, serialized, false);

package/dist/cjs/runtimes/react/use-style.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/runtimes/react/use-style.ts"],"sourcesContent":["import React from 'react'\nimport { CSSObject } from '@emotion/~~css~~'\nimport { EmotionCache } from '@emotion/cache'\nimport { serializeStyles } from '@emotion/serialize'\nimport { registerStyles, insertStyles, type SerializedStyles } from '@emotion/utils'\n\nimport { ~~useCache~~ } from '../../~~next~~/~~root~~-~~style-registry~~'\nimport { ~~isServer~~ } from '~~../../utils/is~~-~~server~~'\n\nconst useInsertionEffectSpecifier = 'useInsertionEffect'\nconst useInsertionEffect = React[useInsertionEffectSpecifier] ?? React.useLayoutEffect\n\nexport function useStyle(style: CSSObject): string {\n const cache = useCache()\n const serialized = serializeStyles([style], cache.registered)\n\n registerStyles(cache, serialized, false)\n\n useUniversalInsertionEffect(() => {\n insertStyles(cache, serialized, false)\n })\n\n return serializedStyleClassName(cache, serialized)\n}\n\nexport function useStyles(cache: EmotionCache, styles: SerializedStyles[]) {\n styles.forEach(s => registerStyles(cache, s, false))\n\n useUniversalInsertionEffect(() => {\n styles.forEach(s => insertStyles(cache, s, false))\n })\n}\n\nfunction useUniversalInsertionEffect(effect: () => void) {\n useInsertionEffect(effect)\n if (isServer()) effect()\n}\n\nexport function serializedStyleClassName(\n cache: EmotionCache,\n serialized: SerializedStyles,\n): string {\n // see https://github.com/emotion-js/emotion/blob/main/packages/utils/src/index.ts#L26\n return `${cache.key}-${serialized.name}`\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAGlB,~~uBAAgC~~;AAChC,mBAAoE;AAEpE,~~iCAAyB~~;~~AACzB~~,~~uBAAyB~~;AAEzB,MAAM,8BAA8B;AACpC,MAAM,qBAAqB,~~aAAAA~~,QAAM,2BAA2B,KAAK,aAAAA,QAAM;AAEhE,SAAS,SAAS,OAA0B;AACjD,QAAM,YAAQ,qCAAS;AACvB,QAAM,iBAAa,~~kCAAgB~~,CAAC,KAAK,GAAG,MAAM,UAAU;AAE5D,mCAAe,OAAO,YAAY,KAAK;AAEvC,8BAA4B,MAAM;AAChC,mCAAa,OAAO,YAAY,KAAK;AAAA,EACvC,CAAC;AAED,SAAO,yBAAyB,OAAO,UAAU;AACnD;AAEO,SAAS,UAAU,OAAqB,QAA4B;AACzE,SAAO,QAAQ,WAAK,6BAAe,OAAO,GAAG,KAAK,CAAC;AAEnD,8BAA4B,MAAM;AAChC,WAAO,QAAQ,WAAK,2BAAa,OAAO,GAAG,KAAK,CAAC;AAAA,EACnD,CAAC;AACH;AAEA,SAAS,4BAA4B,QAAoB;AACvD,qBAAmB,MAAM;AACzB,UAAI,2BAAS;AAAG,WAAO;AACzB;AAEO,SAAS,yBACd,OACA,YACQ;AAER,SAAO,GAAG,MAAM,GAAG,IAAI,WAAW,IAAI;AACxC;","names":["React"]}
1	+ {"version":3,"sources":["../../../../src/runtimes/react/use-style.ts"],"sourcesContent":["import React from 'react'\nimport { type CSSObject } from '@emotion/serialize'\nimport { EmotionCache } from '@emotion/cache'\nimport { serializeStyles } from '@emotion/serialize'\nimport { registerStyles, insertStyles, type SerializedStyles } from '@emotion/utils'\n\nimport { isServer } from '../../utils/is-server'\n\nimport { useCache } from './root-style-registry'\n\nconst useInsertionEffectSpecifier = 'useInsertionEffect'\nconst useInsertionEffect = React[useInsertionEffectSpecifier] ?? React.useLayoutEffect\n\nexport function useStyle(style: CSSObject): string {\n const cache = useCache()\n const serialized = serializeStyles([style], cache.registered)\n\n registerStyles(cache, serialized, false)\n\n useUniversalInsertionEffect(() => {\n insertStyles(cache, serialized, false)\n })\n\n return serializedStyleClassName(cache, serialized)\n}\n\nexport function useStyles(cache: EmotionCache, styles: SerializedStyles[]) {\n styles.forEach(s => registerStyles(cache, s, false))\n\n useUniversalInsertionEffect(() => {\n styles.forEach(s => insertStyles(cache, s, false))\n })\n}\n\nfunction useUniversalInsertionEffect(effect: () => void) {\n useInsertionEffect(effect)\n if (isServer()) effect()\n}\n\nexport function serializedStyleClassName(\n cache: EmotionCache,\n serialized: SerializedStyles,\n): string {\n // see https://github.com/emotion-js/emotion/blob/main/packages/utils/src/index.ts#L26\n return `${cache.key}-${serialized.name}`\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAGlB,IAAAA,oBAAgC;AAChC,mBAAoE;AAEpE,uBAAyB;AAEzB,iCAAyB;AAEzB,MAAM,8BAA8B;AACpC,MAAM,qBAAqB,aAAAC,QAAM,2BAA2B,KAAK,aAAAA,QAAM;AAEhE,SAAS,SAAS,OAA0B;AACjD,QAAM,YAAQ,qCAAS;AACvB,QAAM,iBAAa,mCAAgB,CAAC,KAAK,GAAG,MAAM,UAAU;AAE5D,mCAAe,OAAO,YAAY,KAAK;AAEvC,8BAA4B,MAAM;AAChC,mCAAa,OAAO,YAAY,KAAK;AAAA,EACvC,CAAC;AAED,SAAO,yBAAyB,OAAO,UAAU;AACnD;AAEO,SAAS,UAAU,OAAqB,QAA4B;AACzE,SAAO,QAAQ,WAAK,6BAAe,OAAO,GAAG,KAAK,CAAC;AAEnD,8BAA4B,MAAM;AAChC,WAAO,QAAQ,WAAK,2BAAa,OAAO,GAAG,KAAK,CAAC;AAAA,EACnD,CAAC;AACH;AAEA,SAAS,4BAA4B,QAAoB;AACvD,qBAAmB,MAAM;AACzB,UAAI,2BAAS;AAAG,WAAO;AACzB;AAEO,SAAS,yBACd,OACA,YACQ;AAER,SAAO,GAAG,MAAM,GAAG,IAAI,WAAW,IAAI;AACxC;","names":["import_serialize","React"]}

package/dist/cjs/state/actions.js CHANGED Viewed

@@ -35,6 +35,7 @@ __export(actions_exports, {
   handlePointerMove: () => handlePointerMove,
   handleWheel: () => handleWheel,
   init: () => init,
+  isKnownAction: () => isKnownAction,
   messageBuilderPropController: () => messageBuilderPropController,
   messageHostPropController: () => messageHostPropController,
   mountComponent: () => mountComponent,
@@ -70,6 +71,7 @@ __export(actions_exports, {
   updateAPIClientCache: () => updateAPIClientCache
 });
 module.exports = __toCommonJS(actions_exports);
+var import_toolkit = require("@reduxjs/toolkit");
 var import_locale = require("../locale");
 const ActionTypes = {
   INIT: "INIT",
@@ -361,6 +363,9 @@ function setLocalizedResourceId({
 function updateAPIClientCache(payload) {
   return { type: ActionTypes.UPDATE_API_CLIENT_CACHE, payload };
 }
+function isKnownAction(action) {
+  return (0, import_toolkit.isAction)(action) && Object.hasOwn(ActionTypes, action.type);
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ActionTypes,
@@ -380,6 +385,7 @@ function updateAPIClientCache(payload) {
   handlePointerMove,
   handleWheel,
   init,
+  isKnownAction,
   messageBuilderPropController,
   messageHostPropController,
   mountComponent,