npm - @makeswift/runtime - Versions diffs - 0.7.3 → 0.7.4 - Mend

@makeswift/runtime 0.7.3 → 0.7.4

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

package/dist/Countdown.cjs.js CHANGED Viewed

@@ -208,7 +208,7 @@ const Container = React.forwardRef(function Container2(_g, ref) {
         switch (variant2) {
           case "filled":
             return {
-              fontFamily: numberFont2,
+              fontFamily: `"${numberFont2}"`,
               color: next.colorToString(numberColor2),
               background: next.colorToString(blockColor2)
             };
@@ -216,7 +216,7 @@ const Container = React.forwardRef(function Container2(_g, ref) {
             return {
               position: "relative",
               color: next.colorToString(numberColor2),
-              fontFamily: numberFont2,
+              fontFamily: `"${numberFont2}"`,
               "> span": {
                 position: "relative",
                 zIndex: 1
@@ -246,7 +246,7 @@ const Container = React.forwardRef(function Container2(_g, ref) {
             };
           case "outline":
             return {
-              fontFamily: numberFont2,
+              fontFamily: `"${numberFont2}"`,
               color: next.colorToString(numberColor2),
               background: "transparent",
               border: `2px solid ${next.colorToString(blockColor2)}`
@@ -254,7 +254,7 @@ const Container = React.forwardRef(function Container2(_g, ref) {
           case "outline-split":
             return {
               position: "relative",
-              fontFamily: numberFont2,
+              fontFamily: `"${numberFont2}"`,
               color: next.colorToString(numberColor2),
               border: `2px solid ${next.colorToString(blockColor2)}`,
               "> span": {
@@ -274,7 +274,7 @@ const Container = React.forwardRef(function Container2(_g, ref) {
             };
           default:
             return {
-              fontFamily: numberFont2,
+              fontFamily: `"${numberFont2}"`,
               background: "transparent",
               color: next.colorToString(numberColor2),
               paddingTop: 0,
@@ -291,7 +291,7 @@ const Container = React.forwardRef(function Container2(_g, ref) {
         },
         alpha: 1
       }, labelFont2 = "sans-serif"]) => ({
-        fontFamily: labelFont2,
+        fontFamily: `"${labelFont2}"`,
         color: next.colorToString(labelColor2)
       }))
     }), className)

package/dist/Countdown.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Countdown.cjs.js","sources":["../src/components/builtin/Countdown/Countdown.tsx"],"sourcesContent":["import { cx } from '@emotion/css'\nimport { ComponentPropsWithoutRef, ForwardedRef, forwardRef, Ref, useEffect, useState } from 'react'\nimport {\n DateValue,\n ElementIDValue,\n FontValue,\n GapXValue,\n ResponsiveIconRadioGroupValue,\n ResponsiveValue,\n TextInputValue,\n} from '../../../prop-controllers/descriptors'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { colorToString } from '../../utils/colorToString'\nimport { responsiveStyle } from '../../utils/responsive-style'\nimport { ColorValue as Color } from '../../utils/types'\n\ntype Props = {\n id?: ElementIDValue\n date?: DateValue\n variant?: ResponsiveIconRadioGroupValue<\n 'filled' \| 'filled-split' \| 'outline' \| 'outline-split' \| 'clear'\n >\n shape?: ResponsiveIconRadioGroupValue<'pill' \| 'rounded' \| 'square'>\n size?: ResponsiveIconRadioGroupValue<'small' \| 'medium' \| 'large'>\n gap?: GapXValue\n numberFont?: FontValue\n numberColor?: ResponsiveColor \| null\n blockColor?: ResponsiveColor \| null\n labelFont?: FontValue\n labelColor?: ResponsiveColor \| null\n width?: string\n margin?: string\n daysLabel?: TextInputValue\n hoursLabel?: TextInputValue\n minutesLabel?: TextInputValue\n secondsLabel?: TextInputValue\n}\n\nconst BLOCK_CLASS_NAME = 'block'\n\ntype BlockProps = ComponentPropsWithoutRef<'div'>\n\nfunction Block({ className, ...restOfProps }: BlockProps) {\n return (\n <div\n {...restOfProps}\n className={cx(\n BLOCK_CLASS_NAME,\n useStyle({ display: 'block', padding: '0.5em', fontSize: '1em' }),\n className,\n )}\n />\n )\n}\n\nconst LABEL_CLASS_NAME = 'label'\n\ntype LabelProps = ComponentPropsWithoutRef<'div'>\n\nfunction Label({ className, ...restOfProps }: LabelProps) {\n return (\n <div\n {...restOfProps}\n className={cx(LABEL_CLASS_NAME, useStyle({ marginTop: '0.25em' }), className)}\n />\n )\n}\n\nconst SEGMENT_CLASS_NAME = 'segment'\n\ntype SegmentProps = ComponentPropsWithoutRef<'div'>\n\nfunction Segment({ className, ...restOfProps }: SegmentProps) {\n return (\n <div\n {...restOfProps}\n className={cx(SEGMENT_CLASS_NAME, useStyle({ flex: 1, textAlign: 'center' }), className)}\n />\n )\n}\n\ntype ContainerBaseProps = {\n width?: string\n margin?: string\n variant: Props['variant']\n size: Props['size']\n shape: Props['shape']\n gap: Props['gap']\n labelColor?: ResponsiveValue<Color> \| null\n numberFont?: ResponsiveValue<string>\n numberColor?: ResponsiveValue<Color> \| null\n blockColor?: ResponsiveValue<Color> \| null\n labelFont?: ResponsiveValue<string>\n}\n\ntype ContainerProps = ContainerBaseProps &\n Omit<ComponentPropsWithoutRef<'div'>, keyof ContainerBaseProps>\n\nconst Container = forwardRef(function Container(\n {\n className,\n width,\n margin,\n variant,\n size,\n shape,\n gap,\n labelColor,\n numberFont,\n numberColor,\n blockColor,\n labelFont,\n ...restOfProps\n }: ContainerProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n return (\n <div\n {...restOfProps}\n ref={ref}\n className={cx(\n useStyle({ display: 'flex' }),\n width,\n margin,\n useStyle(\n responsiveStyle([size] as const, ([size = 'medium']) => {\n switch (size) {\n case 'small':\n return { fontSize: 18, [`.${LABEL_CLASS_NAME}`]: { fontSize: 14 } }\n\n case 'large':\n return { fontSize: 32, [`.${LABEL_CLASS_NAME}`]: { fontSize: 18 } }\n\n default:\n return { fontSize: 24, [`.${LABEL_CLASS_NAME}`]: { fontSize: 16 } }\n }\n }),\n ),\n useStyle({\n [`.${SEGMENT_CLASS_NAME}`]: responsiveStyle([gap] as const, ([gap]) => ({\n margin: `0 ${gap == null ? 0 : `${gap.value / 2}${gap.unit}`}`,\n\n '&:first-child': {\n marginLeft: 0,\n },\n\n '&:last-child': {\n marginRight: 0,\n },\n })),\n }),\n useStyle({\n [`.${BLOCK_CLASS_NAME}`]: responsiveStyle([shape] as const, ([shape = 'rounded']) => {\n switch (shape) {\n case 'pill':\n return { borderRadius: 500 }\n\n case 'rounded':\n return { borderRadius: 6 }\n\n default:\n return { borderRadius: 0 }\n }\n }),\n }),\n useStyle({\n [`.${BLOCK_CLASS_NAME}`]: responsiveStyle(\n [variant, blockColor, numberColor, numberFont] as const,\n ([\n variant = 'filled',\n blockColor = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n numberColor = { swatch: { hue: 0, saturation: 0, lightness: 100 }, alpha: 1 },\n numberFont = 'sans-serif',\n ]) => {\n switch (variant) {\n case 'filled':\n return {\n fontFamily: numberFont,\n color: colorToString(numberColor),\n background: colorToString(blockColor),\n }\n\n case 'filled-split':\n return {\n position: 'relative',\n color: colorToString(numberColor),\n fontFamily: numberFont,\n\n '> span': {\n position: 'relative',\n zIndex: 1,\n },\n\n '::before': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n bottom: 'calc(50% + 1px)',\n borderTopLeftRadius: 'inherit',\n borderTopRightRadius: 'inherit',\n background: colorToString(blockColor),\n },\n\n '::after': {\n content: '\"\"',\n position: 'absolute',\n left: 0,\n right: 0,\n top: 'calc(50% + 1px)',\n bottom: 0,\n borderBottomLeftRadius: 'inherit',\n borderBottomRightRadius: 'inherit',\n background: colorToString(blockColor),\n },\n }\n\n case 'outline':\n return {\n fontFamily: numberFont,\n color: colorToString(numberColor),\n background: 'transparent',\n border: `2px solid ${colorToString(blockColor)}`,\n }\n\n case 'outline-split':\n return {\n position: 'relative',\n fontFamily: numberFont,\n color: colorToString(numberColor),\n border: `2px solid ${colorToString(blockColor)}`,\n\n '> span': {\n position: 'relative',\n zIndex: 1,\n },\n\n '::before': {\n content: '\"\"',\n position: 'absolute',\n top: '50%',\n left: 0,\n right: 0,\n height: 2,\n marginTop: -1,\n background: colorToString(blockColor),\n },\n }\n\n default:\n return {\n fontFamily: numberFont,\n background: 'transparent',\n color: colorToString(numberColor),\n paddingTop: 0,\n paddingBottom: 0,\n }\n }\n },\n ),\n }),\n useStyle({\n [`.${LABEL_CLASS_NAME}`]: responsiveStyle(\n [labelColor, labelFont] as const,\n ([\n labelColor = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n labelFont = 'sans-serif',\n ]) => ({\n fontFamily: labelFont,\n color: colorToString(labelColor),\n }),\n ),\n }),\n className,\n )}\n />\n )\n})\n\nconst getRemaining = (date: Props['date'] \| null \| undefined) => {\n if (date == null) return { days: '0', hours: '0', minutes: '0', seconds: '0' }\n\n const timeDiff = new Date(date).getTime() - Date.now()\n\n if (timeDiff <= 0) return { days: 0, hours: 0, minutes: 0, seconds: 0 }\n\n let delta = Math.abs(timeDiff) / 1000\n\n const days = Math.floor(delta / 86400)\n delta -= days * 86400\n\n const hours = Math.floor(delta / 3600) % 24\n delta -= hours * 3600\n\n const minutes = Math.floor(delta / 60) % 60\n delta -= minutes * 60\n\n const seconds = parseInt(String(delta % 60), 10)\n\n return {\n days: days.toString(),\n hours: hours.toString(),\n minutes: minutes.toString(),\n seconds: seconds.toString(),\n }\n}\n\nconst Countdown = forwardRef(function Countdown(\n {\n id,\n margin,\n width,\n date,\n variant,\n size,\n shape,\n gap,\n labelColor,\n labelFont,\n numberColor,\n numberFont,\n blockColor,\n daysLabel,\n hoursLabel,\n minutesLabel,\n secondsLabel,\n }: Props,\n ref: Ref<HTMLDivElement>,\n) {\n const [{ days, hours, minutes, seconds }, setRemaining] = useState(getRemaining(null))\n\n useEffect(() => {\n setRemaining(getRemaining(date))\n\n const intervalId = setInterval(() => {\n setRemaining(getRemaining(date))\n }, 1000)\n\n return () => clearInterval(intervalId)\n }, [date])\n\n return (\n <Container\n ref={ref}\n id={id}\n width={width}\n margin={margin}\n variant={variant}\n size={size}\n shape={shape}\n labelColor={labelColor}\n labelFont={labelFont}\n numberColor={numberColor}\n numberFont={numberFont}\n blockColor={blockColor}\n gap={gap}\n >\n <Segment>\n <Block>\n <span>{days}</span>\n </Block>\n <Label>{daysLabel == null ? 'Days' : daysLabel}</Label>\n </Segment>\n <Segment>\n <Block>\n <span>{hours}</span>\n </Block>\n <Label>{hoursLabel == null ? 'Hours' : hoursLabel}</Label>\n </Segment>\n <Segment>\n <Block>\n <span>{minutes}</span>\n </Block>\n <Label>{minutesLabel == null ? 'Minutes' : minutesLabel}</Label>\n </Segment>\n <Segment>\n <Block>\n <span>{seconds}</span>\n </Block>\n <Label>{secondsLabel == null ? 'Seconds' : secondsLabel}</Label>\n </Segment>\n </Container>\n )\n})\n\nexport default Countdown\n"],"names":["BLOCK_CLASS_NAME","className","restOfProps","cx","useStyle","display","padding","fontSize","LABEL_CLASS_NAME","marginTop","SEGMENT_CLASS_NAME","flex","textAlign","Container","forwardRef","ref","width","margin","variant","size","shape","gap","labelColor","numberFont","numberColor","blockColor","labelFont","responsiveStyle","value","unit","marginLeft","marginRight","borderRadius","swatch","hue","saturation","lightness","alpha","fontFamily","color","colorToString","background","position","zIndex","content","top","left","right","bottom","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius","border","height","paddingTop","paddingBottom","getRemaining","date","days","hours","minutes","seconds","timeDiff","Date","getTime","now","delta","Math","abs","floor","parseInt","String","toString","Countdown","id","daysLabel","hoursLabel","minutesLabel","secondsLabel","setRemaining","useState","useEffect","intervalId","setInterval","clearInterval","_jsxs","_jsx"],"mappings":"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"}
1	+ {"version":3,"file":"Countdown.cjs.js","sources":["../src/components/builtin/Countdown/Countdown.tsx"],"sourcesContent":["import { cx } from '@emotion/css'\nimport { ComponentPropsWithoutRef, ForwardedRef, forwardRef, Ref, useEffect, useState } from 'react'\nimport {\n DateValue,\n ElementIDValue,\n FontValue,\n GapXValue,\n ResponsiveIconRadioGroupValue,\n ResponsiveValue,\n TextInputValue,\n} from '../../../prop-controllers/descriptors'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { colorToString } from '../../utils/colorToString'\nimport { responsiveStyle } from '../../utils/responsive-style'\nimport { ColorValue as Color } from '../../utils/types'\n\ntype Props = {\n id?: ElementIDValue\n date?: DateValue\n variant?: ResponsiveIconRadioGroupValue<\n 'filled' \| 'filled-split' \| 'outline' \| 'outline-split' \| 'clear'\n >\n shape?: ResponsiveIconRadioGroupValue<'pill' \| 'rounded' \| 'square'>\n size?: ResponsiveIconRadioGroupValue<'small' \| 'medium' \| 'large'>\n gap?: GapXValue\n numberFont?: FontValue\n numberColor?: ResponsiveColor \| null\n blockColor?: ResponsiveColor \| null\n labelFont?: FontValue\n labelColor?: ResponsiveColor \| null\n width?: string\n margin?: string\n daysLabel?: TextInputValue\n hoursLabel?: TextInputValue\n minutesLabel?: TextInputValue\n secondsLabel?: TextInputValue\n}\n\nconst BLOCK_CLASS_NAME = 'block'\n\ntype BlockProps = ComponentPropsWithoutRef<'div'>\n\nfunction Block({ className, ...restOfProps }: BlockProps) {\n return (\n <div\n {...restOfProps}\n className={cx(\n BLOCK_CLASS_NAME,\n useStyle({ display: 'block', padding: '0.5em', fontSize: '1em' }),\n className,\n )}\n />\n )\n}\n\nconst LABEL_CLASS_NAME = 'label'\n\ntype LabelProps = ComponentPropsWithoutRef<'div'>\n\nfunction Label({ className, ...restOfProps }: LabelProps) {\n return (\n <div\n {...restOfProps}\n className={cx(LABEL_CLASS_NAME, useStyle({ marginTop: '0.25em' }), className)}\n />\n )\n}\n\nconst SEGMENT_CLASS_NAME = 'segment'\n\ntype SegmentProps = ComponentPropsWithoutRef<'div'>\n\nfunction Segment({ className, ...restOfProps }: SegmentProps) {\n return (\n <div\n {...restOfProps}\n className={cx(SEGMENT_CLASS_NAME, useStyle({ flex: 1, textAlign: 'center' }), className)}\n />\n )\n}\n\ntype ContainerBaseProps = {\n width?: string\n margin?: string\n variant: Props['variant']\n size: Props['size']\n shape: Props['shape']\n gap: Props['gap']\n labelColor?: ResponsiveValue<Color> \| null\n numberFont?: ResponsiveValue<string>\n numberColor?: ResponsiveValue<Color> \| null\n blockColor?: ResponsiveValue<Color> \| null\n labelFont?: ResponsiveValue<string>\n}\n\ntype ContainerProps = ContainerBaseProps &\n Omit<ComponentPropsWithoutRef<'div'>, keyof ContainerBaseProps>\n\nconst Container = forwardRef(function Container(\n {\n className,\n width,\n margin,\n variant,\n size,\n shape,\n gap,\n labelColor,\n numberFont,\n numberColor,\n blockColor,\n labelFont,\n ...restOfProps\n }: ContainerProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n return (\n <div\n {...restOfProps}\n ref={ref}\n className={cx(\n useStyle({ display: 'flex' }),\n width,\n margin,\n useStyle(\n responsiveStyle([size] as const, ([size = 'medium']) => {\n switch (size) {\n case 'small':\n return { fontSize: 18, [`.${LABEL_CLASS_NAME}`]: { fontSize: 14 } }\n\n case 'large':\n return { fontSize: 32, [`.${LABEL_CLASS_NAME}`]: { fontSize: 18 } }\n\n default:\n return { fontSize: 24, [`.${LABEL_CLASS_NAME}`]: { fontSize: 16 } }\n }\n }),\n ),\n useStyle({\n [`.${SEGMENT_CLASS_NAME}`]: responsiveStyle([gap] as const, ([gap]) => ({\n margin: `0 ${gap == null ? 0 : `${gap.value / 2}${gap.unit}`}`,\n\n '&:first-child': {\n marginLeft: 0,\n },\n\n '&:last-child': {\n marginRight: 0,\n },\n })),\n }),\n useStyle({\n [`.${BLOCK_CLASS_NAME}`]: responsiveStyle([shape] as const, ([shape = 'rounded']) => {\n switch (shape) {\n case 'pill':\n return { borderRadius: 500 }\n\n case 'rounded':\n return { borderRadius: 6 }\n\n default:\n return { borderRadius: 0 }\n }\n }),\n }),\n useStyle({\n [`.${BLOCK_CLASS_NAME}`]: responsiveStyle(\n [variant, blockColor, numberColor, numberFont] as const,\n ([\n variant = 'filled',\n blockColor = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n numberColor = { swatch: { hue: 0, saturation: 0, lightness: 100 }, alpha: 1 },\n numberFont = 'sans-serif',\n ]) => {\n switch (variant) {\n case 'filled':\n return {\n fontFamily: `\"${numberFont}\"`,\n color: colorToString(numberColor),\n background: colorToString(blockColor),\n }\n\n case 'filled-split':\n return {\n position: 'relative',\n color: colorToString(numberColor),\n fontFamily: `\"${numberFont}\"`,\n\n '> span': {\n position: 'relative',\n zIndex: 1,\n },\n\n '::before': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n bottom: 'calc(50% + 1px)',\n borderTopLeftRadius: 'inherit',\n borderTopRightRadius: 'inherit',\n background: colorToString(blockColor),\n },\n\n '::after': {\n content: '\"\"',\n position: 'absolute',\n left: 0,\n right: 0,\n top: 'calc(50% + 1px)',\n bottom: 0,\n borderBottomLeftRadius: 'inherit',\n borderBottomRightRadius: 'inherit',\n background: colorToString(blockColor),\n },\n }\n\n case 'outline':\n return {\n fontFamily: `\"${numberFont}\"`,\n color: colorToString(numberColor),\n background: 'transparent',\n border: `2px solid ${colorToString(blockColor)}`,\n }\n\n case 'outline-split':\n return {\n position: 'relative',\n fontFamily: `\"${numberFont}\"`,\n color: colorToString(numberColor),\n border: `2px solid ${colorToString(blockColor)}`,\n\n '> span': {\n position: 'relative',\n zIndex: 1,\n },\n\n '::before': {\n content: '\"\"',\n position: 'absolute',\n top: '50%',\n left: 0,\n right: 0,\n height: 2,\n marginTop: -1,\n background: colorToString(blockColor),\n },\n }\n\n default:\n return {\n fontFamily: `\"${numberFont}\"`,\n background: 'transparent',\n color: colorToString(numberColor),\n paddingTop: 0,\n paddingBottom: 0,\n }\n }\n },\n ),\n }),\n useStyle({\n [`.${LABEL_CLASS_NAME}`]: responsiveStyle(\n [labelColor, labelFont] as const,\n ([\n labelColor = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n labelFont = 'sans-serif',\n ]) => ({\n fontFamily: `\"${labelFont}\"`,\n color: colorToString(labelColor),\n }),\n ),\n }),\n className,\n )}\n />\n )\n})\n\nconst getRemaining = (date: Props['date'] \| null \| undefined) => {\n if (date == null) return { days: '0', hours: '0', minutes: '0', seconds: '0' }\n\n const timeDiff = new Date(date).getTime() - Date.now()\n\n if (timeDiff <= 0) return { days: 0, hours: 0, minutes: 0, seconds: 0 }\n\n let delta = Math.abs(timeDiff) / 1000\n\n const days = Math.floor(delta / 86400)\n delta -= days * 86400\n\n const hours = Math.floor(delta / 3600) % 24\n delta -= hours * 3600\n\n const minutes = Math.floor(delta / 60) % 60\n delta -= minutes * 60\n\n const seconds = parseInt(String(delta % 60), 10)\n\n return {\n days: days.toString(),\n hours: hours.toString(),\n minutes: minutes.toString(),\n seconds: seconds.toString(),\n }\n}\n\nconst Countdown = forwardRef(function Countdown(\n {\n id,\n margin,\n width,\n date,\n variant,\n size,\n shape,\n gap,\n labelColor,\n labelFont,\n numberColor,\n numberFont,\n blockColor,\n daysLabel,\n hoursLabel,\n minutesLabel,\n secondsLabel,\n }: Props,\n ref: Ref<HTMLDivElement>,\n) {\n const [{ days, hours, minutes, seconds }, setRemaining] = useState(getRemaining(null))\n\n useEffect(() => {\n setRemaining(getRemaining(date))\n\n const intervalId = setInterval(() => {\n setRemaining(getRemaining(date))\n }, 1000)\n\n return () => clearInterval(intervalId)\n }, [date])\n\n return (\n <Container\n ref={ref}\n id={id}\n width={width}\n margin={margin}\n variant={variant}\n size={size}\n shape={shape}\n labelColor={labelColor}\n labelFont={labelFont}\n numberColor={numberColor}\n numberFont={numberFont}\n blockColor={blockColor}\n gap={gap}\n >\n <Segment>\n <Block>\n <span>{days}</span>\n </Block>\n <Label>{daysLabel == null ? 'Days' : daysLabel}</Label>\n </Segment>\n <Segment>\n <Block>\n <span>{hours}</span>\n </Block>\n <Label>{hoursLabel == null ? 'Hours' : hoursLabel}</Label>\n </Segment>\n <Segment>\n <Block>\n <span>{minutes}</span>\n </Block>\n <Label>{minutesLabel == null ? 'Minutes' : minutesLabel}</Label>\n </Segment>\n <Segment>\n <Block>\n <span>{seconds}</span>\n </Block>\n <Label>{secondsLabel == null ? 'Seconds' : secondsLabel}</Label>\n </Segment>\n </Container>\n )\n})\n\nexport default Countdown\n"],"names":["BLOCK_CLASS_NAME","className","restOfProps","cx","useStyle","display","padding","fontSize","LABEL_CLASS_NAME","marginTop","SEGMENT_CLASS_NAME","flex","textAlign","Container","forwardRef","ref","width","margin","variant","size","shape","gap","labelColor","numberFont","numberColor","blockColor","labelFont","responsiveStyle","value","unit","marginLeft","marginRight","borderRadius","swatch","hue","saturation","lightness","alpha","fontFamily","color","colorToString","background","position","zIndex","content","top","left","right","bottom","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius","border","height","paddingTop","paddingBottom","getRemaining","date","days","hours","minutes","seconds","timeDiff","Date","getTime","now","delta","Math","abs","floor","parseInt","String","toString","Countdown","id","daysLabel","hoursLabel","minutesLabel","secondsLabel","setRemaining","useState","useEffect","intervalId","setInterval","clearInterval","_jsxs","_jsx"],"mappings":"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"}

package/dist/Countdown.es.js CHANGED Viewed

@@ -206,7 +206,7 @@ const Container = forwardRef(function Container2(_g, ref) {
         switch (variant2) {
           case "filled":
             return {
-              fontFamily: numberFont2,
+              fontFamily: `"${numberFont2}"`,
               color: colorToString(numberColor2),
               background: colorToString(blockColor2)
             };
@@ -214,7 +214,7 @@ const Container = forwardRef(function Container2(_g, ref) {
             return {
               position: "relative",
               color: colorToString(numberColor2),
-              fontFamily: numberFont2,
+              fontFamily: `"${numberFont2}"`,
               "> span": {
                 position: "relative",
                 zIndex: 1
@@ -244,7 +244,7 @@ const Container = forwardRef(function Container2(_g, ref) {
             };
           case "outline":
             return {
-              fontFamily: numberFont2,
+              fontFamily: `"${numberFont2}"`,
               color: colorToString(numberColor2),
               background: "transparent",
               border: `2px solid ${colorToString(blockColor2)}`
@@ -252,7 +252,7 @@ const Container = forwardRef(function Container2(_g, ref) {
           case "outline-split":
             return {
               position: "relative",
-              fontFamily: numberFont2,
+              fontFamily: `"${numberFont2}"`,
               color: colorToString(numberColor2),
               border: `2px solid ${colorToString(blockColor2)}`,
               "> span": {
@@ -272,7 +272,7 @@ const Container = forwardRef(function Container2(_g, ref) {
             };
           default:
             return {
-              fontFamily: numberFont2,
+              fontFamily: `"${numberFont2}"`,
               background: "transparent",
               color: colorToString(numberColor2),
               paddingTop: 0,
@@ -289,7 +289,7 @@ const Container = forwardRef(function Container2(_g, ref) {
         },
         alpha: 1
       }, labelFont2 = "sans-serif"]) => ({
-        fontFamily: labelFont2,
+        fontFamily: `"${labelFont2}"`,
         color: colorToString(labelColor2)
       }))
     }), className)

package/dist/Countdown.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Countdown.es.js","sources":["../src/components/builtin/Countdown/Countdown.tsx"],"sourcesContent":["import { cx } from '@emotion/css'\nimport { ComponentPropsWithoutRef, ForwardedRef, forwardRef, Ref, useEffect, useState } from 'react'\nimport {\n DateValue,\n ElementIDValue,\n FontValue,\n GapXValue,\n ResponsiveIconRadioGroupValue,\n ResponsiveValue,\n TextInputValue,\n} from '../../../prop-controllers/descriptors'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { colorToString } from '../../utils/colorToString'\nimport { responsiveStyle } from '../../utils/responsive-style'\nimport { ColorValue as Color } from '../../utils/types'\n\ntype Props = {\n id?: ElementIDValue\n date?: DateValue\n variant?: ResponsiveIconRadioGroupValue<\n 'filled' \| 'filled-split' \| 'outline' \| 'outline-split' \| 'clear'\n >\n shape?: ResponsiveIconRadioGroupValue<'pill' \| 'rounded' \| 'square'>\n size?: ResponsiveIconRadioGroupValue<'small' \| 'medium' \| 'large'>\n gap?: GapXValue\n numberFont?: FontValue\n numberColor?: ResponsiveColor \| null\n blockColor?: ResponsiveColor \| null\n labelFont?: FontValue\n labelColor?: ResponsiveColor \| null\n width?: string\n margin?: string\n daysLabel?: TextInputValue\n hoursLabel?: TextInputValue\n minutesLabel?: TextInputValue\n secondsLabel?: TextInputValue\n}\n\nconst BLOCK_CLASS_NAME = 'block'\n\ntype BlockProps = ComponentPropsWithoutRef<'div'>\n\nfunction Block({ className, ...restOfProps }: BlockProps) {\n return (\n <div\n {...restOfProps}\n className={cx(\n BLOCK_CLASS_NAME,\n useStyle({ display: 'block', padding: '0.5em', fontSize: '1em' }),\n className,\n )}\n />\n )\n}\n\nconst LABEL_CLASS_NAME = 'label'\n\ntype LabelProps = ComponentPropsWithoutRef<'div'>\n\nfunction Label({ className, ...restOfProps }: LabelProps) {\n return (\n <div\n {...restOfProps}\n className={cx(LABEL_CLASS_NAME, useStyle({ marginTop: '0.25em' }), className)}\n />\n )\n}\n\nconst SEGMENT_CLASS_NAME = 'segment'\n\ntype SegmentProps = ComponentPropsWithoutRef<'div'>\n\nfunction Segment({ className, ...restOfProps }: SegmentProps) {\n return (\n <div\n {...restOfProps}\n className={cx(SEGMENT_CLASS_NAME, useStyle({ flex: 1, textAlign: 'center' }), className)}\n />\n )\n}\n\ntype ContainerBaseProps = {\n width?: string\n margin?: string\n variant: Props['variant']\n size: Props['size']\n shape: Props['shape']\n gap: Props['gap']\n labelColor?: ResponsiveValue<Color> \| null\n numberFont?: ResponsiveValue<string>\n numberColor?: ResponsiveValue<Color> \| null\n blockColor?: ResponsiveValue<Color> \| null\n labelFont?: ResponsiveValue<string>\n}\n\ntype ContainerProps = ContainerBaseProps &\n Omit<ComponentPropsWithoutRef<'div'>, keyof ContainerBaseProps>\n\nconst Container = forwardRef(function Container(\n {\n className,\n width,\n margin,\n variant,\n size,\n shape,\n gap,\n labelColor,\n numberFont,\n numberColor,\n blockColor,\n labelFont,\n ...restOfProps\n }: ContainerProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n return (\n <div\n {...restOfProps}\n ref={ref}\n className={cx(\n useStyle({ display: 'flex' }),\n width,\n margin,\n useStyle(\n responsiveStyle([size] as const, ([size = 'medium']) => {\n switch (size) {\n case 'small':\n return { fontSize: 18, [`.${LABEL_CLASS_NAME}`]: { fontSize: 14 } }\n\n case 'large':\n return { fontSize: 32, [`.${LABEL_CLASS_NAME}`]: { fontSize: 18 } }\n\n default:\n return { fontSize: 24, [`.${LABEL_CLASS_NAME}`]: { fontSize: 16 } }\n }\n }),\n ),\n useStyle({\n [`.${SEGMENT_CLASS_NAME}`]: responsiveStyle([gap] as const, ([gap]) => ({\n margin: `0 ${gap == null ? 0 : `${gap.value / 2}${gap.unit}`}`,\n\n '&:first-child': {\n marginLeft: 0,\n },\n\n '&:last-child': {\n marginRight: 0,\n },\n })),\n }),\n useStyle({\n [`.${BLOCK_CLASS_NAME}`]: responsiveStyle([shape] as const, ([shape = 'rounded']) => {\n switch (shape) {\n case 'pill':\n return { borderRadius: 500 }\n\n case 'rounded':\n return { borderRadius: 6 }\n\n default:\n return { borderRadius: 0 }\n }\n }),\n }),\n useStyle({\n [`.${BLOCK_CLASS_NAME}`]: responsiveStyle(\n [variant, blockColor, numberColor, numberFont] as const,\n ([\n variant = 'filled',\n blockColor = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n numberColor = { swatch: { hue: 0, saturation: 0, lightness: 100 }, alpha: 1 },\n numberFont = 'sans-serif',\n ]) => {\n switch (variant) {\n case 'filled':\n return {\n fontFamily: numberFont,\n color: colorToString(numberColor),\n background: colorToString(blockColor),\n }\n\n case 'filled-split':\n return {\n position: 'relative',\n color: colorToString(numberColor),\n fontFamily: numberFont,\n\n '> span': {\n position: 'relative',\n zIndex: 1,\n },\n\n '::before': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n bottom: 'calc(50% + 1px)',\n borderTopLeftRadius: 'inherit',\n borderTopRightRadius: 'inherit',\n background: colorToString(blockColor),\n },\n\n '::after': {\n content: '\"\"',\n position: 'absolute',\n left: 0,\n right: 0,\n top: 'calc(50% + 1px)',\n bottom: 0,\n borderBottomLeftRadius: 'inherit',\n borderBottomRightRadius: 'inherit',\n background: colorToString(blockColor),\n },\n }\n\n case 'outline':\n return {\n fontFamily: numberFont,\n color: colorToString(numberColor),\n background: 'transparent',\n border: `2px solid ${colorToString(blockColor)}`,\n }\n\n case 'outline-split':\n return {\n position: 'relative',\n fontFamily: numberFont,\n color: colorToString(numberColor),\n border: `2px solid ${colorToString(blockColor)}`,\n\n '> span': {\n position: 'relative',\n zIndex: 1,\n },\n\n '::before': {\n content: '\"\"',\n position: 'absolute',\n top: '50%',\n left: 0,\n right: 0,\n height: 2,\n marginTop: -1,\n background: colorToString(blockColor),\n },\n }\n\n default:\n return {\n fontFamily: numberFont,\n background: 'transparent',\n color: colorToString(numberColor),\n paddingTop: 0,\n paddingBottom: 0,\n }\n }\n },\n ),\n }),\n useStyle({\n [`.${LABEL_CLASS_NAME}`]: responsiveStyle(\n [labelColor, labelFont] as const,\n ([\n labelColor = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n labelFont = 'sans-serif',\n ]) => ({\n fontFamily: labelFont,\n color: colorToString(labelColor),\n }),\n ),\n }),\n className,\n )}\n />\n )\n})\n\nconst getRemaining = (date: Props['date'] \| null \| undefined) => {\n if (date == null) return { days: '0', hours: '0', minutes: '0', seconds: '0' }\n\n const timeDiff = new Date(date).getTime() - Date.now()\n\n if (timeDiff <= 0) return { days: 0, hours: 0, minutes: 0, seconds: 0 }\n\n let delta = Math.abs(timeDiff) / 1000\n\n const days = Math.floor(delta / 86400)\n delta -= days * 86400\n\n const hours = Math.floor(delta / 3600) % 24\n delta -= hours * 3600\n\n const minutes = Math.floor(delta / 60) % 60\n delta -= minutes * 60\n\n const seconds = parseInt(String(delta % 60), 10)\n\n return {\n days: days.toString(),\n hours: hours.toString(),\n minutes: minutes.toString(),\n seconds: seconds.toString(),\n }\n}\n\nconst Countdown = forwardRef(function Countdown(\n {\n id,\n margin,\n width,\n date,\n variant,\n size,\n shape,\n gap,\n labelColor,\n labelFont,\n numberColor,\n numberFont,\n blockColor,\n daysLabel,\n hoursLabel,\n minutesLabel,\n secondsLabel,\n }: Props,\n ref: Ref<HTMLDivElement>,\n) {\n const [{ days, hours, minutes, seconds }, setRemaining] = useState(getRemaining(null))\n\n useEffect(() => {\n setRemaining(getRemaining(date))\n\n const intervalId = setInterval(() => {\n setRemaining(getRemaining(date))\n }, 1000)\n\n return () => clearInterval(intervalId)\n }, [date])\n\n return (\n <Container\n ref={ref}\n id={id}\n width={width}\n margin={margin}\n variant={variant}\n size={size}\n shape={shape}\n labelColor={labelColor}\n labelFont={labelFont}\n numberColor={numberColor}\n numberFont={numberFont}\n blockColor={blockColor}\n gap={gap}\n >\n <Segment>\n <Block>\n <span>{days}</span>\n </Block>\n <Label>{daysLabel == null ? 'Days' : daysLabel}</Label>\n </Segment>\n <Segment>\n <Block>\n <span>{hours}</span>\n </Block>\n <Label>{hoursLabel == null ? 'Hours' : hoursLabel}</Label>\n </Segment>\n <Segment>\n <Block>\n <span>{minutes}</span>\n </Block>\n <Label>{minutesLabel == null ? 'Minutes' : minutesLabel}</Label>\n </Segment>\n <Segment>\n <Block>\n <span>{seconds}</span>\n </Block>\n <Label>{secondsLabel == null ? 'Seconds' : secondsLabel}</Label>\n </Segment>\n </Container>\n )\n})\n\nexport default Countdown\n"],"names":["BLOCK_CLASS_NAME","className","restOfProps","cx","useStyle","display","padding","fontSize","LABEL_CLASS_NAME","marginTop","SEGMENT_CLASS_NAME","flex","textAlign","Container","forwardRef","ref","width","margin","variant","size","shape","gap","labelColor","numberFont","numberColor","blockColor","labelFont","responsiveStyle","value","unit","marginLeft","marginRight","borderRadius","swatch","hue","saturation","lightness","alpha","fontFamily","color","colorToString","background","position","zIndex","content","top","left","right","bottom","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius","border","height","paddingTop","paddingBottom","getRemaining","date","days","hours","minutes","seconds","timeDiff","Date","getTime","now","delta","Math","abs","floor","parseInt","String","toString","Countdown","id","daysLabel","hoursLabel","minutesLabel","secondsLabel","setRemaining","useState","useEffect","intervalId","setInterval","clearInterval","_jsxs","_jsx"],"mappings":"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"}
1	+ {"version":3,"file":"Countdown.es.js","sources":["../src/components/builtin/Countdown/Countdown.tsx"],"sourcesContent":["import { cx } from '@emotion/css'\nimport { ComponentPropsWithoutRef, ForwardedRef, forwardRef, Ref, useEffect, useState } from 'react'\nimport {\n DateValue,\n ElementIDValue,\n FontValue,\n GapXValue,\n ResponsiveIconRadioGroupValue,\n ResponsiveValue,\n TextInputValue,\n} from '../../../prop-controllers/descriptors'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { colorToString } from '../../utils/colorToString'\nimport { responsiveStyle } from '../../utils/responsive-style'\nimport { ColorValue as Color } from '../../utils/types'\n\ntype Props = {\n id?: ElementIDValue\n date?: DateValue\n variant?: ResponsiveIconRadioGroupValue<\n 'filled' \| 'filled-split' \| 'outline' \| 'outline-split' \| 'clear'\n >\n shape?: ResponsiveIconRadioGroupValue<'pill' \| 'rounded' \| 'square'>\n size?: ResponsiveIconRadioGroupValue<'small' \| 'medium' \| 'large'>\n gap?: GapXValue\n numberFont?: FontValue\n numberColor?: ResponsiveColor \| null\n blockColor?: ResponsiveColor \| null\n labelFont?: FontValue\n labelColor?: ResponsiveColor \| null\n width?: string\n margin?: string\n daysLabel?: TextInputValue\n hoursLabel?: TextInputValue\n minutesLabel?: TextInputValue\n secondsLabel?: TextInputValue\n}\n\nconst BLOCK_CLASS_NAME = 'block'\n\ntype BlockProps = ComponentPropsWithoutRef<'div'>\n\nfunction Block({ className, ...restOfProps }: BlockProps) {\n return (\n <div\n {...restOfProps}\n className={cx(\n BLOCK_CLASS_NAME,\n useStyle({ display: 'block', padding: '0.5em', fontSize: '1em' }),\n className,\n )}\n />\n )\n}\n\nconst LABEL_CLASS_NAME = 'label'\n\ntype LabelProps = ComponentPropsWithoutRef<'div'>\n\nfunction Label({ className, ...restOfProps }: LabelProps) {\n return (\n <div\n {...restOfProps}\n className={cx(LABEL_CLASS_NAME, useStyle({ marginTop: '0.25em' }), className)}\n />\n )\n}\n\nconst SEGMENT_CLASS_NAME = 'segment'\n\ntype SegmentProps = ComponentPropsWithoutRef<'div'>\n\nfunction Segment({ className, ...restOfProps }: SegmentProps) {\n return (\n <div\n {...restOfProps}\n className={cx(SEGMENT_CLASS_NAME, useStyle({ flex: 1, textAlign: 'center' }), className)}\n />\n )\n}\n\ntype ContainerBaseProps = {\n width?: string\n margin?: string\n variant: Props['variant']\n size: Props['size']\n shape: Props['shape']\n gap: Props['gap']\n labelColor?: ResponsiveValue<Color> \| null\n numberFont?: ResponsiveValue<string>\n numberColor?: ResponsiveValue<Color> \| null\n blockColor?: ResponsiveValue<Color> \| null\n labelFont?: ResponsiveValue<string>\n}\n\ntype ContainerProps = ContainerBaseProps &\n Omit<ComponentPropsWithoutRef<'div'>, keyof ContainerBaseProps>\n\nconst Container = forwardRef(function Container(\n {\n className,\n width,\n margin,\n variant,\n size,\n shape,\n gap,\n labelColor,\n numberFont,\n numberColor,\n blockColor,\n labelFont,\n ...restOfProps\n }: ContainerProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n return (\n <div\n {...restOfProps}\n ref={ref}\n className={cx(\n useStyle({ display: 'flex' }),\n width,\n margin,\n useStyle(\n responsiveStyle([size] as const, ([size = 'medium']) => {\n switch (size) {\n case 'small':\n return { fontSize: 18, [`.${LABEL_CLASS_NAME}`]: { fontSize: 14 } }\n\n case 'large':\n return { fontSize: 32, [`.${LABEL_CLASS_NAME}`]: { fontSize: 18 } }\n\n default:\n return { fontSize: 24, [`.${LABEL_CLASS_NAME}`]: { fontSize: 16 } }\n }\n }),\n ),\n useStyle({\n [`.${SEGMENT_CLASS_NAME}`]: responsiveStyle([gap] as const, ([gap]) => ({\n margin: `0 ${gap == null ? 0 : `${gap.value / 2}${gap.unit}`}`,\n\n '&:first-child': {\n marginLeft: 0,\n },\n\n '&:last-child': {\n marginRight: 0,\n },\n })),\n }),\n useStyle({\n [`.${BLOCK_CLASS_NAME}`]: responsiveStyle([shape] as const, ([shape = 'rounded']) => {\n switch (shape) {\n case 'pill':\n return { borderRadius: 500 }\n\n case 'rounded':\n return { borderRadius: 6 }\n\n default:\n return { borderRadius: 0 }\n }\n }),\n }),\n useStyle({\n [`.${BLOCK_CLASS_NAME}`]: responsiveStyle(\n [variant, blockColor, numberColor, numberFont] as const,\n ([\n variant = 'filled',\n blockColor = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n numberColor = { swatch: { hue: 0, saturation: 0, lightness: 100 }, alpha: 1 },\n numberFont = 'sans-serif',\n ]) => {\n switch (variant) {\n case 'filled':\n return {\n fontFamily: `\"${numberFont}\"`,\n color: colorToString(numberColor),\n background: colorToString(blockColor),\n }\n\n case 'filled-split':\n return {\n position: 'relative',\n color: colorToString(numberColor),\n fontFamily: `\"${numberFont}\"`,\n\n '> span': {\n position: 'relative',\n zIndex: 1,\n },\n\n '::before': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n bottom: 'calc(50% + 1px)',\n borderTopLeftRadius: 'inherit',\n borderTopRightRadius: 'inherit',\n background: colorToString(blockColor),\n },\n\n '::after': {\n content: '\"\"',\n position: 'absolute',\n left: 0,\n right: 0,\n top: 'calc(50% + 1px)',\n bottom: 0,\n borderBottomLeftRadius: 'inherit',\n borderBottomRightRadius: 'inherit',\n background: colorToString(blockColor),\n },\n }\n\n case 'outline':\n return {\n fontFamily: `\"${numberFont}\"`,\n color: colorToString(numberColor),\n background: 'transparent',\n border: `2px solid ${colorToString(blockColor)}`,\n }\n\n case 'outline-split':\n return {\n position: 'relative',\n fontFamily: `\"${numberFont}\"`,\n color: colorToString(numberColor),\n border: `2px solid ${colorToString(blockColor)}`,\n\n '> span': {\n position: 'relative',\n zIndex: 1,\n },\n\n '::before': {\n content: '\"\"',\n position: 'absolute',\n top: '50%',\n left: 0,\n right: 0,\n height: 2,\n marginTop: -1,\n background: colorToString(blockColor),\n },\n }\n\n default:\n return {\n fontFamily: `\"${numberFont}\"`,\n background: 'transparent',\n color: colorToString(numberColor),\n paddingTop: 0,\n paddingBottom: 0,\n }\n }\n },\n ),\n }),\n useStyle({\n [`.${LABEL_CLASS_NAME}`]: responsiveStyle(\n [labelColor, labelFont] as const,\n ([\n labelColor = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n labelFont = 'sans-serif',\n ]) => ({\n fontFamily: `\"${labelFont}\"`,\n color: colorToString(labelColor),\n }),\n ),\n }),\n className,\n )}\n />\n )\n})\n\nconst getRemaining = (date: Props['date'] \| null \| undefined) => {\n if (date == null) return { days: '0', hours: '0', minutes: '0', seconds: '0' }\n\n const timeDiff = new Date(date).getTime() - Date.now()\n\n if (timeDiff <= 0) return { days: 0, hours: 0, minutes: 0, seconds: 0 }\n\n let delta = Math.abs(timeDiff) / 1000\n\n const days = Math.floor(delta / 86400)\n delta -= days * 86400\n\n const hours = Math.floor(delta / 3600) % 24\n delta -= hours * 3600\n\n const minutes = Math.floor(delta / 60) % 60\n delta -= minutes * 60\n\n const seconds = parseInt(String(delta % 60), 10)\n\n return {\n days: days.toString(),\n hours: hours.toString(),\n minutes: minutes.toString(),\n seconds: seconds.toString(),\n }\n}\n\nconst Countdown = forwardRef(function Countdown(\n {\n id,\n margin,\n width,\n date,\n variant,\n size,\n shape,\n gap,\n labelColor,\n labelFont,\n numberColor,\n numberFont,\n blockColor,\n daysLabel,\n hoursLabel,\n minutesLabel,\n secondsLabel,\n }: Props,\n ref: Ref<HTMLDivElement>,\n) {\n const [{ days, hours, minutes, seconds }, setRemaining] = useState(getRemaining(null))\n\n useEffect(() => {\n setRemaining(getRemaining(date))\n\n const intervalId = setInterval(() => {\n setRemaining(getRemaining(date))\n }, 1000)\n\n return () => clearInterval(intervalId)\n }, [date])\n\n return (\n <Container\n ref={ref}\n id={id}\n width={width}\n margin={margin}\n variant={variant}\n size={size}\n shape={shape}\n labelColor={labelColor}\n labelFont={labelFont}\n numberColor={numberColor}\n numberFont={numberFont}\n blockColor={blockColor}\n gap={gap}\n >\n <Segment>\n <Block>\n <span>{days}</span>\n </Block>\n <Label>{daysLabel == null ? 'Days' : daysLabel}</Label>\n </Segment>\n <Segment>\n <Block>\n <span>{hours}</span>\n </Block>\n <Label>{hoursLabel == null ? 'Hours' : hoursLabel}</Label>\n </Segment>\n <Segment>\n <Block>\n <span>{minutes}</span>\n </Block>\n <Label>{minutesLabel == null ? 'Minutes' : minutesLabel}</Label>\n </Segment>\n <Segment>\n <Block>\n <span>{seconds}</span>\n </Block>\n <Label>{secondsLabel == null ? 'Seconds' : secondsLabel}</Label>\n </Segment>\n </Container>\n )\n})\n\nexport default Countdown\n"],"names":["BLOCK_CLASS_NAME","className","restOfProps","cx","useStyle","display","padding","fontSize","LABEL_CLASS_NAME","marginTop","SEGMENT_CLASS_NAME","flex","textAlign","Container","forwardRef","ref","width","margin","variant","size","shape","gap","labelColor","numberFont","numberColor","blockColor","labelFont","responsiveStyle","value","unit","marginLeft","marginRight","borderRadius","swatch","hue","saturation","lightness","alpha","fontFamily","color","colorToString","background","position","zIndex","content","top","left","right","bottom","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius","border","height","paddingTop","paddingBottom","getRemaining","date","days","hours","minutes","seconds","timeDiff","Date","getTime","now","delta","Math","abs","floor","parseInt","String","toString","Countdown","id","daysLabel","hoursLabel","minutesLabel","secondsLabel","setRemaining","useState","useEffect","intervalId","setInterval","clearInterval","_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCA,MAAMA,mBAAmB;AAIzB,eAAe,IAA2C;AAA3C,eAAEC;AAAAA;AAAAA,MAAF,IAAgBC,wBAAhB,IAAgBA;AAAAA,IAAdD;AAAAA;AACf,qEAEQC;IACJ,WAAWC,GACTH,kBACAI,SAAS;AAAA,MAAEC,SAAS;AAAA,MAASC,SAAS;AAAA,MAASC,UAAU;AAAA,IAAjD,CAAA,GACRN,SAHW;AAAA,EAAA,EAHjB;AAUD;AAED,MAAMO,mBAAmB;AAIzB,eAAe,IAA2C;AAA3C,eAAEP;AAAAA;AAAAA,MAAF,IAAgBC,wBAAhB,IAAgBA;AAAAA,IAAdD;AAAAA;AACf,qEAEQC;IACJ,WAAWC,GAAGK,kBAAkBJ,SAAS;AAAA,MAAEK,WAAW;AAAA,IAAd,CAAA,GAA2BR,SAAtD;AAAA,EAAA,EAHjB;AAMD;AAED,MAAMS,qBAAqB;AAI3B,iBAAiB,IAA6C;AAA7C,eAAET;AAAAA;AAAAA,MAAF,IAAgBC,wBAAhB,IAAgBA;AAAAA,IAAdD;AAAAA;AACjB,qEAEQC;IACJ,WAAWC,GAAGO,oBAAoBN,SAAS;AAAA,MAAEO,MAAM;AAAA,MAAGC,WAAW;AAAA,IAAvB,CAAA,GAAoCX,SAAjE;AAAA,EAAA,EAHjB;AAMD;AAmBD,MAAMY,YAAYC,WAAW,oBAC3B,IAeAC,KACA;AAhBA,eACEd;AAAAA;AAAAA,IACAe;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,MAZF,IAaKxB,wBAbL,IAaKA;AAAAA,IAZHD;AAAAA,IACAe;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA;AAKF,qEAEQxB;IACJ;AAAA,IACA,WAAWC,GACTC,SAAS;AAAA,MAAEC,SAAS;AAAA,IAAZ,CAAA,GACRW,OACAC,QACAb,SACEuB,gBAAgB,CAACR,IAAD,GAAiB,CAAC,CAACA,QAAO,cAAc;AAC9CA,cAAAA;AAAAA,aACD;AACI,iBAAA;AAAA,YAAEZ,UAAU;AAAA,aAAM,IAAGC,qBAAqB;AAAA,cAAED,UAAU;AAAA,YAAZ;AAAA,UAAA;AAAA,aAE9C;AACI,iBAAA;AAAA,YAAEA,UAAU;AAAA,aAAM,IAAGC,qBAAqB;AAAA,cAAED,UAAU;AAAA,YAAZ;AAAA,UAAA;AAAA;AAG1C,iBAAA;AAAA,YAAEA,UAAU;AAAA,aAAM,IAAGC,qBAAqB;AAAA,cAAED,UAAU;AAAA,YAAZ;AAAA,UAAA;AAAA;AAAA,IAAjD,CATS,CADT,GAcRH,SAAS;AAAA,OACL,IAAGM,uBAAuBiB,gBAAgB,CAACN,GAAD,GAAgB,CAAC,CAACA,UAAU;AAAA,QACtEJ,QAAS,KAAII,QAAO,OAAO,IAAK,GAAEA,KAAIO,QAAQ,IAAIP,KAAIQ;AAAAA,QAErC,iBAAA;AAAA,UACfC,YAAY;AAAA,QAJwD;AAAA,QAOtD,gBAAA;AAAA,UACdC,aAAa;AAAA,QADC;AAAA,MAAA,EAPyB;AAAA,IADrC,CAAA,GAaR3B,SAAS;AAAA,OACL,IAAGJ,qBAAqB2B,gBAAgB,CAACP,KAAD,GAAkB,CAAC,CAACA,SAAQ,eAAe;AAC3EA,gBAAAA;AAAAA,eACD;AACI,mBAAA;AAAA,cAAEY,cAAc;AAAA,YAAA;AAAA,eAEpB;AACI,mBAAA;AAAA,cAAEA,cAAc;AAAA,YAAA;AAAA;AAGhB,mBAAA;AAAA,cAAEA,cAAc;AAAA,YAAA;AAAA;AAAA,MAAvB,CATmC;AAAA,IADnC,CAAA,GAcR5B,SAAS;AAAA,OACL,IAAGJ,qBAAqB2B,gBACxB,CAACT,SAASO,YAAYD,aAAaD,UAAnC,GACA,CAAC,CACCL,WAAU,UACVO,cAAa;AAAA,QAAEQ,QAAQ;AAAA,UAAEC,KAAK;AAAA,UAAGC,YAAY;AAAA,UAAGC,WAAW;AAAA,QAA9C;AAAA,QAAmDC,OAAO;AAAA,SACvEb,eAAc;AAAA,QAAES,QAAQ;AAAA,UAAEC,KAAK;AAAA,UAAGC,YAAY;AAAA,UAAGC,WAAW;AAAA,QAA9C;AAAA,QAAqDC,OAAO;AAAA,MAAA,GAC1Ed,cAAa,kBACT;AACIL,gBAAAA;AAAAA,eACD;AACI,mBAAA;AAAA,cACLoB,YAAa,IAAGf;AAAAA,cAChBgB,OAAOC,cAAchB,YAAD;AAAA,cACpBiB,YAAYD,cAAcf,WAAD;AAAA,YAAA;AAAA,eAGxB;AACI,mBAAA;AAAA,cACLiB,UAAU;AAAA,cACVH,OAAOC,cAAchB,YAAD;AAAA,cACpBc,YAAa,IAAGf;AAAAA,cAEN,UAAA;AAAA,gBACRmB,UAAU;AAAA,gBACVC,QAAQ;AAAA,cAPL;AAAA,cAUO,YAAA;AAAA,gBACVC,SAAS;AAAA,gBACTF,UAAU;AAAA,gBACVG,KAAK;AAAA,gBACLC,MAAM;AAAA,gBACNC,OAAO;AAAA,gBACPC,QAAQ;AAAA,gBACRC,qBAAqB;AAAA,gBACrBC,sBAAsB;AAAA,gBACtBT,YAAYD,cAAcf,WAAD;AAAA,cAnBtB;AAAA,cAsBM,WAAA;AAAA,gBACTmB,SAAS;AAAA,gBACTF,UAAU;AAAA,gBACVI,MAAM;AAAA,gBACNC,OAAO;AAAA,gBACPF,KAAK;AAAA,gBACLG,QAAQ;AAAA,gBACRG,wBAAwB;AAAA,gBACxBC,yBAAyB;AAAA,gBACzBX,YAAYD,cAAcf,WAAD;AAAA,cAThB;AAAA,YAAA;AAAA,eAaV;AACI,mBAAA;AAAA,cACLa,YAAa,IAAGf;AAAAA,cAChBgB,OAAOC,cAAchB,YAAD;AAAA,cACpBiB,YAAY;AAAA,cACZY,QAAS,aAAYb,cAAcf,WAAD;AAAA,YAAA;AAAA,eAGjC;AACI,mBAAA;AAAA,cACLiB,UAAU;AAAA,cACVJ,YAAa,IAAGf;AAAAA,cAChBgB,OAAOC,cAAchB,YAAD;AAAA,cACpB6B,QAAS,aAAYb,cAAcf,WAAD;AAAA,cAExB,UAAA;AAAA,gBACRiB,UAAU;AAAA,gBACVC,QAAQ;AAAA,cARL;AAAA,cAWO,YAAA;AAAA,gBACVC,SAAS;AAAA,gBACTF,UAAU;AAAA,gBACVG,KAAK;AAAA,gBACLC,MAAM;AAAA,gBACNC,OAAO;AAAA,gBACPO,QAAQ;AAAA,gBACR7C,WAAW;AAAA,gBACXgC,YAAYD,cAAcf,WAAD;AAAA,cARf;AAAA,YAAA;AAAA;AAaP,mBAAA;AAAA,cACLa,YAAa,IAAGf;AAAAA,cAChBkB,YAAY;AAAA,cACZF,OAAOC,cAAchB,YAAD;AAAA,cACpB+B,YAAY;AAAA,cACZC,eAAe;AAAA,YAAA;AAAA;AAAA,MALjB,CArFiC;AAAA,IADnC,CAAA,GAiGRpD,SAAS;AAAA,OACL,IAAGI,qBAAqBmB,gBACxB,CAACL,YAAYI,SAAb,GACA,CAAC,CACCJ,cAAa;AAAA,QAAEW,QAAQ;AAAA,UAAEC,KAAK;AAAA,UAAGC,YAAY;AAAA,UAAGC,WAAW;AAAA,QAA9C;AAAA,QAAmDC,OAAO;AAAA,MAAA,GACvEX,aAAY,kBACP;AAAA,QACLY,YAAa,IAAGZ;AAAAA,QAChBa,OAAOC,cAAclB,WAAD;AAAA,MAAA,EAPiB;AAAA,IADnC,CAAA,GAYRrB,SA1JW;AAAA,EAAA,EAJjB;AAkKD,CApL2B;AAsL5B,MAAMwD,eAAe,CAACC,SAA2C;AAC/D,MAAIA,QAAQ;AAAa,WAAA;AAAA,MAAEC,MAAM;AAAA,MAAKC,OAAO;AAAA,MAAKC,SAAS;AAAA,MAAKC,SAAS;AAAA,IAAA;AAEnEC,QAAAA,WAAW,IAAIC,KAAKN,IAAT,EAAeO,YAAYD,KAAKE;AAEjD,MAAIH,YAAY;AAAU,WAAA;AAAA,MAAEJ,MAAM;AAAA,MAAGC,OAAO;AAAA,MAAGC,SAAS;AAAA,MAAGC,SAAS;AAAA,IAAA;AAEhEK,MAAAA,QAAQC,KAAKC,IAAIN,QAAT,IAAqB;AAE3BJ,QAAAA,OAAOS,KAAKE,MAAMH,QAAQ,KAAnB;AACbA,WAASR,OAAO;AAEVC,QAAAA,QAAQQ,KAAKE,MAAMH,QAAQ,IAAnB,IAA2B;AACzCA,WAASP,QAAQ;AAEXC,QAAAA,UAAUO,KAAKE,MAAMH,QAAQ,EAAnB,IAAyB;AACzCA,WAASN,UAAU;AAEnB,QAAMC,UAAUS,SAASC,OAAOL,QAAQ,EAAT,GAAc,EAArB;AAEjB,SAAA;AAAA,IACLR,MAAMA,KAAKc,SADN;AAAA,IAELb,OAAOA,MAAMa,SAFR;AAAA,IAGLZ,SAASA,QAAQY,SAHZ;AAAA,IAILX,SAASA,QAAQW,SAAR;AAAA,EAAA;AAEZ;AAEKC,MAAAA,YAAY5D,WAAW,oBAC3B;AAAA,EACE6D;AAAAA,EACA1D;AAAAA,EACAD;AAAAA,EACA0C;AAAAA,EACAxC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAI;AAAAA,EACAF;AAAAA,EACAD;AAAAA,EACAE;AAAAA,EACAmD;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,GAEFhE,KACA;AACA,QAAM,CAAC;AAAA,IAAE4C;AAAAA,IAAMC;AAAAA,IAAOC;AAAAA,IAASC;AAAAA,KAAWkB,gBAAgBC,SAASxB,aAAa,IAAD,CAAb;AAElEyB,YAAU,MAAM;AACDzB,iBAAAA,aAAaC,IAAD,CAAb;AAENyB,UAAAA,aAAaC,YAAY,MAAM;AACtB3B,mBAAAA,aAAaC,IAAD,CAAb;AAAA,OACX,GAF2B;AAIvB,WAAA,MAAM2B,cAAcF,UAAD;AAAA,EAAA,GACzB,CAACzB,IAAD,CARM;AAUT,8BACG,WAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IAbF,UAAA,CAeE4B,qBAAC,SAAD;AAAA,MAAA,UAAA,CACEC,oBAAC,OAAD;AAAA,QACE,8BAAA,QAAA;AAAA,UAAO5B,UAAAA;AAAAA,QAAAA,CAAP;AAAA,MAAA,CAFJ,GAIE4B,oBAAC,OAAD;AAAA,QAAA,UAAQX,aAAa,OAAO,SAASA;AAAAA,MAAAA,CAJvC,CAAA;AAAA,IAAA,CAfF,GAqBEU,qBAAC,SAAD;AAAA,MAAA,UAAA,CACEC,oBAAC,OAAD;AAAA,QACE,8BAAA,QAAA;AAAA,UAAO3B,UAAAA;AAAAA,QAAAA,CAAP;AAAA,MAAA,CAFJ,GAIE2B,oBAAC,OAAD;AAAA,QAAA,UAAQV,cAAc,OAAO,UAAUA;AAAAA,MAAAA,CAJzC,CAAA;AAAA,IAAA,CArBF,GA2BES,qBAAC,SAAD;AAAA,MAAA,UAAA,CACEC,oBAAC,OAAD;AAAA,QACE,8BAAA,QAAA;AAAA,UAAO1B,UAAAA;AAAAA,QAAAA,CAAP;AAAA,MAAA,CAFJ,GAIE0B,oBAAC,OAAD;AAAA,QAAA,UAAQT,gBAAgB,OAAO,YAAYA;AAAAA,MAAAA,CAJ7C,CAAA;AAAA,IAAA,CA3BF,GAiCEQ,qBAAC,SAAD;AAAA,MAAA,UAAA,CACEC,oBAAC,OAAD;AAAA,QACE,8BAAA,QAAA;AAAA,UAAOzB,UAAAA;AAAAA,QAAAA,CAAP;AAAA,MAAA,CAFJ,GAIEyB,oBAAC,OAAD;AAAA,QAAA,UAAQR,gBAAgB,OAAO,YAAYA;AAAAA,MAAAA,CAJ7C,CAAA;AAAA,IAAA,CAjCF,CAAA;AAAA,EAAA,CADF;AA0CD,CA5E2B;;"}

package/dist/index.cjs.js CHANGED Viewed

@@ -1001,7 +1001,7 @@ function useCachedSite(siteId) {
   const site = shim.useSyncExternalStore(client.subscribe, getSnapshot, getSnapshot);
   return site;
 }
-const version = "0.7.3";
+const version = "0.7.4";
 class Makeswift {
   constructor(apiKey, { apiOrigin = "https://api.makeswift.com" } = {}) {
     __publicField(this, "apiKey");
@@ -3231,7 +3231,7 @@ function responsiveTextStyle(value) {
       letterSpacing,
       fontFamily
     } = textStyle;
-    return __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, fontFamily == null ? {} : { fontFamily }), fontWeight == null ? {} : { fontWeight }), letterSpacing == null ? {} : { letterSpacing }), fontSize == null ? {} : { fontSize: `${fontSize.value}${fontSize.unit}` }), textTransform.includes("uppercase") ? { textTransform: "uppercase" } : {}), fontStyle.includes("italic") ? { fontStyle: "italic" } : {});
+    return __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, fontFamily == null ? {} : { fontFamily: `"${fontFamily}"` }), fontWeight == null ? {} : { fontWeight }), letterSpacing == null ? {} : { letterSpacing }), fontSize == null ? {} : { fontSize: `${fontSize.value}${fontSize.unit}` }), textTransform.includes("uppercase") ? { textTransform: "uppercase" } : {}), fontStyle.includes("italic") ? { fontStyle: "italic" } : {});
   });
 }
 const defaultMargin = {
@@ -3271,7 +3271,7 @@ function useStyleControlCssObject(style, controlDefinition) {
       borderTopRightRadius: (_g = borderRadiusToString(borderRadius == null ? void 0 : borderRadius.borderTopRightRadius)) != null ? _g : 0,
       borderBottomRightRadius: (_h = borderRadiusToString(borderRadius == null ? void 0 : borderRadius.borderBottomRightRadius)) != null ? _h : 0,
       borderBottomLeftRadius: (_i = borderRadiusToString(borderRadius == null ? void 0 : borderRadius.borderBottomLeftRadius)) != null ? _i : 0
-    }), properties.includes(richText.StyleControlProperty.TextStyle) && __spreadProps(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, (textStyle == null ? void 0 : textStyle.fontFamily) && { fontFamily: textStyle.fontFamily }), (textStyle == null ? void 0 : textStyle.letterSpacing) && { letterSpacing: textStyle.letterSpacing }), (textStyle == null ? void 0 : textStyle.fontSize) && { fontSize: fontSizeToString(textStyle.fontSize) }), (textStyle == null ? void 0 : textStyle.fontWeight) && { fontWeight: textStyle.fontWeight }), {
+    }), properties.includes(richText.StyleControlProperty.TextStyle) && __spreadProps(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, (textStyle == null ? void 0 : textStyle.fontFamily) && { fontFamily: `"${textStyle.fontFamily}"` }), (textStyle == null ? void 0 : textStyle.letterSpacing) && { letterSpacing: textStyle.letterSpacing }), (textStyle == null ? void 0 : textStyle.fontSize) && { fontSize: fontSizeToString(textStyle.fontSize) }), (textStyle == null ? void 0 : textStyle.fontWeight) && { fontWeight: textStyle.fontWeight }), {
       textTransform: (_j = textStyle == null ? void 0 : textStyle.textTransform) != null ? _j : [],
       fontStyle: (_k = textStyle == null ? void 0 : textStyle.fontStyle) != null ? _k : []
     }));