@makeswift/runtime 0.28.10-canary.9 → 0.29.0-canary.20

package/dist/cjs/components/builtin/Countdown/Countdown.js

@@ -23,44 +23,41 @@ __export(Countdown_exports, {
 });
 module.exports = __toCommonJS(Countdown_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_css = require("@emotion/css");
 var import_react = require("react");
-var import_use_style = require("../../../runtimes/react/use-style");
 var import_colorToString = require("../../utils/colorToString");
 var import_responsive_style = require("../../utils/responsive-style");
+var import_use_style = require("../../../runtimes/react/css-runtime/hooks/use-style");
 const BLOCK_CLASS_NAME = "block";
 function Block({ className, ...restOfProps }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "div",
-    {
-      ...restOfProps,
-      className: (0, import_css.cx)(
-        BLOCK_CLASS_NAME,
-        (0, import_use_style.useStyle)({ display: "block", padding: "0.5em", fontSize: "1em" }),
-        className
-      )
-    }
+  const styles = (0, import_use_style.composeStyles)(
+    BLOCK_CLASS_NAME,
+    (0, import_use_style.useStyle)({ display: "block", padding: "0.5em", fontSize: "1em" }),
+    className
   );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    styles.styleElements,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ...restOfProps, className: styles.className })
+  ] });
 }
 const LABEL_CLASS_NAME = "label";
 function Label({ className, ...restOfProps }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "div",
-    {
-      ...restOfProps,
-      className: (0, import_css.cx)(LABEL_CLASS_NAME, (0, import_use_style.useStyle)({ marginTop: "0.25em" }), className)
-    }
-  );
+  const styles = (0, import_use_style.composeStyles)(LABEL_CLASS_NAME, (0, import_use_style.useStyle)({ marginTop: "0.25em" }), className);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    styles.styleElements,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ...restOfProps, className: styles.className })
+  ] });
 }
 const SEGMENT_CLASS_NAME = "segment";
 function Segment({ className, ...restOfProps }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "div",
-    {
-      ...restOfProps,
-      className: (0, import_css.cx)(SEGMENT_CLASS_NAME, (0, import_use_style.useStyle)({ flex: 1, textAlign: "center" }), className)
-    }
+  const styles = (0, import_use_style.composeStyles)(
+    SEGMENT_CLASS_NAME,
+    (0, import_use_style.useStyle)({ flex: 1, textAlign: "center" }),
+    className
   );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    styles.styleElements,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ...restOfProps, className: styles.className })
+  ] });
 }
 const Container = (0, import_react.forwardRef)(function Container2({
   className,
@@ -77,154 +74,151 @@ const Container = (0, import_react.forwardRef)(function Container2({
   labelFont,
   ...restOfProps
 }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "div",
-    {
-      ...restOfProps,
-      ref,
-      className: (0, import_css.cx)(
-        (0, import_use_style.useStyle)({ display: "flex" }),
-        width,
-        margin,
-        (0, import_use_style.useStyle)(
-          (0, import_responsive_style.useResponsiveStyle)([size], ([size2 = "medium"]) => {
-            switch (size2) {
-              case "small":
-                return { fontSize: 18, [`.${LABEL_CLASS_NAME}`]: { fontSize: 14 } };
-              case "large":
-                return { fontSize: 32, [`.${LABEL_CLASS_NAME}`]: { fontSize: 18 } };
-              default:
-                return { fontSize: 24, [`.${LABEL_CLASS_NAME}`]: { fontSize: 16 } };
-            }
-          })
-        ),
-        (0, import_use_style.useStyle)({
-          [`.${SEGMENT_CLASS_NAME}`]: (0, import_responsive_style.useResponsiveStyle)([gap], ([gap2]) => ({
-            margin: `0 ${gap2 == null ? 0 : `${gap2.value / 2}${gap2.unit}`}`,
-            "&:first-child": {
-              marginLeft: 0
-            },
-            "&:last-child": {
-              marginRight: 0
-            }
-          }))
-        }),
-        (0, import_use_style.useStyle)({
-          [`.${BLOCK_CLASS_NAME}`]: (0, import_responsive_style.useResponsiveStyle)([shape], ([shape2 = "rounded"]) => {
-            switch (shape2) {
-              case "pill":
-                return { borderRadius: 500 };
-              case "rounded":
-                return { borderRadius: 6 };
-              default:
-                return { borderRadius: 0 };
-            }
-          })
-        }),
-        (0, import_use_style.useStyle)({
-          [`.${BLOCK_CLASS_NAME}`]: (0, import_responsive_style.useResponsiveStyle)(
-            [variant, blockColor, numberColor, numberFont],
-            ([
-              variant2 = "filled",
-              blockColor2 = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },
-              numberColor2 = { swatch: { hue: 0, saturation: 0, lightness: 100 }, alpha: 1 },
-              numberFont2 = "sans-serif"
-            ]) => {
-              switch (variant2) {
-                case "filled":
-                  return {
-                    fontFamily: `"${numberFont2}"`,
-                    color: (0, import_colorToString.colorToString)(numberColor2),
-                    background: (0, import_colorToString.colorToString)(blockColor2)
-                  };
-                case "filled-split":
-                  return {
-                    position: "relative",
-                    color: (0, import_colorToString.colorToString)(numberColor2),
-                    fontFamily: `"${numberFont2}"`,
-                    "> span": {
-                      position: "relative",
-                      zIndex: 1
-                    },
-                    "::before": {
-                      content: '""',
-                      position: "absolute",
-                      top: 0,
-                      left: 0,
-                      right: 0,
-                      bottom: "calc(50% + 1px)",
-                      borderTopLeftRadius: "inherit",
-                      borderTopRightRadius: "inherit",
-                      background: (0, import_colorToString.colorToString)(blockColor2)
-                    },
-                    "::after": {
-                      content: '""',
-                      position: "absolute",
-                      left: 0,
-                      right: 0,
-                      top: "calc(50% + 1px)",
-                      bottom: 0,
-                      borderBottomLeftRadius: "inherit",
-                      borderBottomRightRadius: "inherit",
-                      background: (0, import_colorToString.colorToString)(blockColor2)
-                    }
-                  };
-                case "outline":
-                  return {
-                    fontFamily: `"${numberFont2}"`,
-                    color: (0, import_colorToString.colorToString)(numberColor2),
-                    background: "transparent",
-                    border: `2px solid ${(0, import_colorToString.colorToString)(blockColor2)}`
-                  };
-                case "outline-split":
-                  return {
-                    position: "relative",
-                    fontFamily: `"${numberFont2}"`,
-                    color: (0, import_colorToString.colorToString)(numberColor2),
-                    border: `2px solid ${(0, import_colorToString.colorToString)(blockColor2)}`,
-                    "> span": {
-                      position: "relative",
-                      zIndex: 1
-                    },
-                    "::before": {
-                      content: '""',
-                      position: "absolute",
-                      top: "50%",
-                      left: 0,
-                      right: 0,
-                      height: 2,
-                      marginTop: -1,
-                      background: (0, import_colorToString.colorToString)(blockColor2)
-                    }
-                  };
-                default:
-                  return {
-                    fontFamily: `"${numberFont2}"`,
-                    background: "transparent",
-                    color: (0, import_colorToString.colorToString)(numberColor2),
-                    paddingTop: 0,
-                    paddingBottom: 0
-                  };
-              }
-            }
-          )
-        }),
-        (0, import_use_style.useStyle)({
-          [`.${LABEL_CLASS_NAME}`]: (0, import_responsive_style.useResponsiveStyle)(
-            [labelColor, labelFont],
-            ([
-              labelColor2 = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },
-              labelFont2 = "sans-serif"
-            ]) => ({
-              fontFamily: `"${labelFont2}"`,
-              color: (0, import_colorToString.colorToString)(labelColor2)
-            })
-          )
-        }),
-        className
+  const styles = (0, import_use_style.composeStyles)(
+    (0, import_use_style.useStyle)({ display: "flex" }),
+    width,
+    margin,
+    (0, import_use_style.useStyle)(
+      (0, import_responsive_style.useResponsiveStyle)([size], ([size2 = "medium"]) => {
+        switch (size2) {
+          case "small":
+            return { fontSize: 18, [`.${LABEL_CLASS_NAME}`]: { fontSize: 14 } };
+          case "large":
+            return { fontSize: 32, [`.${LABEL_CLASS_NAME}`]: { fontSize: 18 } };
+          default:
+            return { fontSize: 24, [`.${LABEL_CLASS_NAME}`]: { fontSize: 16 } };
+        }
+      })
+    ),
+    (0, import_use_style.useStyle)({
+      [`.${SEGMENT_CLASS_NAME}`]: (0, import_responsive_style.useResponsiveStyle)([gap], ([gap2]) => ({
+        margin: `0 ${gap2 == null ? 0 : `${gap2.value / 2}${gap2.unit}`}`,
+        "&:first-child": {
+          marginLeft: 0
+        },
+        "&:last-child": {
+          marginRight: 0
+        }
+      }))
+    }),
+    (0, import_use_style.useStyle)({
+      [`.${BLOCK_CLASS_NAME}`]: (0, import_responsive_style.useResponsiveStyle)([shape], ([shape2 = "rounded"]) => {
+        switch (shape2) {
+          case "pill":
+            return { borderRadius: 500 };
+          case "rounded":
+            return { borderRadius: 6 };
+          default:
+            return { borderRadius: 0 };
+        }
+      })
+    }),
+    (0, import_use_style.useStyle)({
+      [`.${BLOCK_CLASS_NAME}`]: (0, import_responsive_style.useResponsiveStyle)(
+        [variant, blockColor, numberColor, numberFont],
+        ([
+          variant2 = "filled",
+          blockColor2 = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },
+          numberColor2 = { swatch: { hue: 0, saturation: 0, lightness: 100 }, alpha: 1 },
+          numberFont2 = "sans-serif"
+        ]) => {
+          switch (variant2) {
+            case "filled":
+              return {
+                fontFamily: `"${numberFont2}"`,
+                color: (0, import_colorToString.colorToString)(numberColor2),
+                background: (0, import_colorToString.colorToString)(blockColor2)
+              };
+            case "filled-split":
+              return {
+                position: "relative",
+                color: (0, import_colorToString.colorToString)(numberColor2),
+                fontFamily: `"${numberFont2}"`,
+                "> span": {
+                  position: "relative",
+                  zIndex: 1
+                },
+                "&::before": {
+                  content: '""',
+                  position: "absolute",
+                  top: 0,
+                  left: 0,
+                  right: 0,
+                  bottom: "calc(50% + 1px)",
+                  borderTopLeftRadius: "inherit",
+                  borderTopRightRadius: "inherit",
+                  background: (0, import_colorToString.colorToString)(blockColor2)
+                },
+                "&::after": {
+                  content: '""',
+                  position: "absolute",
+                  left: 0,
+                  right: 0,
+                  top: "calc(50% + 1px)",
+                  bottom: 0,
+                  borderBottomLeftRadius: "inherit",
+                  borderBottomRightRadius: "inherit",
+                  background: (0, import_colorToString.colorToString)(blockColor2)
+                }
+              };
+            case "outline":
+              return {
+                fontFamily: `"${numberFont2}"`,
+                color: (0, import_colorToString.colorToString)(numberColor2),
+                background: "transparent",
+                border: `2px solid ${(0, import_colorToString.colorToString)(blockColor2)}`
+              };
+            case "outline-split":
+              return {
+                position: "relative",
+                fontFamily: `"${numberFont2}"`,
+                color: (0, import_colorToString.colorToString)(numberColor2),
+                border: `2px solid ${(0, import_colorToString.colorToString)(blockColor2)}`,
+                "> span": {
+                  position: "relative",
+                  zIndex: 1
+                },
+                "&::before": {
+                  content: '""',
+                  position: "absolute",
+                  top: "50%",
+                  left: 0,
+                  right: 0,
+                  height: 2,
+                  marginTop: -1,
+                  background: (0, import_colorToString.colorToString)(blockColor2)
+                }
+              };
+            default:
+              return {
+                fontFamily: `"${numberFont2}"`,
+                background: "transparent",
+                color: (0, import_colorToString.colorToString)(numberColor2),
+                paddingTop: 0,
+                paddingBottom: 0
+              };
+          }
+        }
       )
-    }
+    }),
+    (0, import_use_style.useStyle)({
+      [`.${LABEL_CLASS_NAME}`]: (0, import_responsive_style.useResponsiveStyle)(
+        [labelColor, labelFont],
+        ([
+          labelColor2 = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },
+          labelFont2 = "sans-serif"
+        ]) => ({
+          fontFamily: `"${labelFont2}"`,
+          color: (0, import_colorToString.colorToString)(labelColor2)
+        })
+      )
+    }),
+    className
   );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    styles.styleElements,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ...restOfProps, ref, className: styles.className })
+  ] });
 });
 const getRemaining = (date) => {
   if (date == null)

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/builtin/Countdown/Countdown.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@emotion/css'\nimport { ComponentPropsWithoutRef, ForwardedRef, forwardRef, Ref, useEffect, useState } from 'react'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { colorToString } from '../../utils/colorToString'\nimport { useResponsiveStyle } from '../../utils/responsive-style'\nimport { type ColorValue as Color, type ResponsiveColor } from '../../utils/types'\nimport {\n  type ResponsiveFontData,\n  type ResponsiveGapData,\n  type ResponsiveIconRadioGroupValue,\n  type ResponsiveValue,\n} from '@makeswift/prop-controllers'\n\ntype Props = {\n  id?: string\n  date?: string\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?: ResponsiveGapData\n  numberFont?: ResponsiveFontData\n  numberColor?: ResponsiveColor | null\n  blockColor?: ResponsiveColor | null\n  labelFont?: ResponsiveFontData\n  labelColor?: ResponsiveColor | null\n  width?: string\n  margin?: string\n  daysLabel?: string\n  hoursLabel?: string\n  minutesLabel?: string\n  secondsLabel?: string\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          useResponsiveStyle([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}`]: useResponsiveStyle([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}`]: useResponsiveStyle([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}`]: useResponsiveStyle(\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}`]: useResponsiveStyle(\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"],"mappings":"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","names":["Container","size","gap","shape","variant","blockColor","numberColor","numberFont","labelColor","labelFont","Countdown"]}
+{"version":3,"sources":["../../../../../src/components/builtin/Countdown/Countdown.tsx"],"sourcesContent":["'use client'\n\nimport { ComponentPropsWithoutRef, ForwardedRef, forwardRef, Ref, useEffect, useState } from 'react'\nimport { colorToString } from '../../utils/colorToString'\nimport { useResponsiveStyle } from '../../utils/responsive-style'\nimport { type ColorValue as Color, type ResponsiveColor } from '../../utils/types'\nimport {\n  type ResponsiveFontData,\n  type ResponsiveGapData,\n  type ResponsiveIconRadioGroupValue,\n  type ResponsiveValue,\n} from '@makeswift/prop-controllers'\nimport { composeStyles, useStyle } from '../../../runtimes/react/css-runtime/hooks/use-style'\n\ntype Props = {\n  id?: string\n  date?: string\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?: ResponsiveGapData\n  numberFont?: ResponsiveFontData\n  numberColor?: ResponsiveColor | null\n  blockColor?: ResponsiveColor | null\n  labelFont?: ResponsiveFontData\n  labelColor?: ResponsiveColor | null\n  width?: string\n  margin?: string\n  daysLabel?: string\n  hoursLabel?: string\n  minutesLabel?: string\n  secondsLabel?: string\n}\n\nconst BLOCK_CLASS_NAME = 'block'\n\ntype BlockProps = ComponentPropsWithoutRef<'div'>\n\nfunction Block({ className, ...restOfProps }: BlockProps) {\n  const styles = composeStyles(\n    BLOCK_CLASS_NAME,\n    useStyle({ display: 'block', padding: '0.5em', fontSize: '1em' }),\n    className,\n  )\n  return (\n    <>\n      {styles.styleElements}\n      <div {...restOfProps} className={styles.className} />\n    </>\n  )\n}\n\nconst LABEL_CLASS_NAME = 'label'\n\ntype LabelProps = ComponentPropsWithoutRef<'div'>\n\nfunction Label({ className, ...restOfProps }: LabelProps) {\n  const styles = composeStyles(LABEL_CLASS_NAME, useStyle({ marginTop: '0.25em' }), className)\n  return (\n    <>\n      {styles.styleElements}\n      <div {...restOfProps} className={styles.className} />\n    </>\n  )\n}\n\nconst SEGMENT_CLASS_NAME = 'segment'\n\ntype SegmentProps = ComponentPropsWithoutRef<'div'>\n\nfunction Segment({ className, ...restOfProps }: SegmentProps) {\n  const styles = composeStyles(\n    SEGMENT_CLASS_NAME,\n    useStyle({ flex: 1, textAlign: 'center' }),\n    className,\n  )\n  return (\n    <>\n      {styles.styleElements}\n      <div {...restOfProps} className={styles.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  const styles = composeStyles(\n    useStyle({ display: 'flex' }),\n    width,\n    margin,\n    useStyle(\n      useResponsiveStyle([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}`]: useResponsiveStyle([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}`]: useResponsiveStyle([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}`]: useResponsiveStyle(\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}`]: useResponsiveStyle(\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  return (\n    <>\n      {styles.styleElements}\n      <div {...restOfProps} ref={ref} className={styles.className} />\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"],"mappings":"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","names":["Container","size","gap","shape","variant","blockColor","numberColor","numberFont","labelColor","labelFont","Countdown"]}

package/dist/cjs/components/builtin/Divider/Divider.js

@@ -21,77 +21,69 @@ __export(Divider_exports, {
   default: () => Divider_default
 });
 module.exports = __toCommonJS(Divider_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_jsx_runtime = (
+  // IE11 has a bug with Flexbox vertical centering with min height if height is not set.
+  // Wrapping it in another flex container fixes it for some reason, read more here:
+  // https://stackoverflow.com/questions/19371626/flexbox-not-centering-vertically-in-ie
+  require("react/jsx-runtime")
+);
 var import_react = require("react");
 var import_colorToString = require("../../utils/colorToString");
-var import_use_style = require("../../../runtimes/react/use-style");
-var import_css = require("@emotion/css");
 var import_responsive_style = require("../../utils/responsive-style");
+var import_use_style = require("../../../runtimes/react/css-runtime/hooks/use-style");
 const Divider = (0, import_react.forwardRef)(function Divider2({ id, variant, thickness, color, width, margin }, ref) {
-  return (
-    // IE11 has a bug with Flexbox vertical centering with min height if height is not set.
-    // Wrapping it in another flex container fixes it for some reason, read more here:
-    // https://stackoverflow.com/questions/19371626/flexbox-not-centering-vertically-in-ie
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "div",
-      {
-        ref,
-        id,
-        className: (0, import_css.cx)((0, import_use_style.useStyle)({ display: "flex", width: "100%" }), width, margin),
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "div",
-          {
-            className: (0, import_use_style.useStyle)({
-              display: "flex",
-              flexDirection: "column",
-              justifyContent: "center",
-              minHeight: 40,
-              width: "100%"
-            }),
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "div",
-              {
-                className: (0, import_use_style.useStyle)(
-                  (0, import_responsive_style.useResponsiveStyle)(
-                    [variant, thickness, color],
-                    ([
-                      variant2 = "solid",
-                      thickness2 = { value: 1, unit: "px" },
-                      color2 = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }
-                    ]) => {
-                      switch (variant2) {
-                        case "solid":
-                        case "dashed":
-                        case "dotted":
-                          return {
-                            borderBottomWidth: thickness2 == null ? 1 : `${thickness2.value}${thickness2.unit}`,
-                            borderBottomStyle: variant2,
-                            borderBottomColor: (0, import_colorToString.colorToString)(color2)
-                          };
-                        case "blended":
-                          return {
-                            height: `${thickness2.value}${thickness2.unit}`,
-                            background: `linear-gradient(${[
-                              "90deg",
-                              (0, import_colorToString.colorToString)({ swatch: color2.swatch, alpha: 0 }),
-                              (0, import_colorToString.colorToString)(color2),
-                              (0, import_colorToString.colorToString)({ swatch: color2.swatch, alpha: 0 })
-                            ].join(", ")})`
-                          };
-                        default:
-                          variant2;
-                          throw new Error(`Invalid variant ${variant2}.`);
-                      }
-                    }
-                  )
-                )
-              }
-            )
-          }
-        )
+  const outerDivStyles = (0, import_use_style.composeStyles)((0, import_use_style.useStyle)({ display: "flex", width: "100%" }), width, margin);
+  const flexColumnDivStyle = (0, import_use_style.useStyle)({
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    minHeight: 40,
+    width: "100%"
+  });
+  const responsiveBorderStyle = (0, import_use_style.useStyle)(
+    (0, import_responsive_style.useResponsiveStyle)(
+      [variant, thickness, color],
+      ([
+        variant2 = "solid",
+        thickness2 = { value: 1, unit: "px" },
+        color2 = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }
+      ]) => {
+        switch (variant2) {
+          case "solid":
+          case "dashed":
+          case "dotted":
+            return {
+              borderBottomWidth: thickness2 == null ? 1 : `${thickness2.value}${thickness2.unit}`,
+              borderBottomStyle: variant2,
+              borderBottomColor: (0, import_colorToString.colorToString)(color2)
+            };
+          case "blended":
+            return {
+              height: `${thickness2.value}${thickness2.unit}`,
+              background: `linear-gradient(${[
+                "90deg",
+                (0, import_colorToString.colorToString)({ swatch: color2.swatch, alpha: 0 }),
+                (0, import_colorToString.colorToString)(color2),
+                (0, import_colorToString.colorToString)({ swatch: color2.swatch, alpha: 0 })
+              ].join(", ")})`
+            };
+          default:
+            variant2;
+            throw new Error(`Invalid variant ${variant2}.`);
+        }
       }
     )
   );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    outerDivStyles.styleElements,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref, id, className: outerDivStyles.className, children: [
+      flexColumnDivStyle.styleElement,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: flexColumnDivStyle.className, children: [
+        responsiveBorderStyle.styleElement,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: responsiveBorderStyle.className })
+      ] })
+    ] })
+  ] });
 });
 var Divider_default = Divider;
 //# sourceMappingURL=Divider.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/builtin/Divider/Divider.tsx"],"sourcesContent":["import { forwardRef, Ref } from 'react'\n\nimport { colorToString } from '../../utils/colorToString'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { cx } from '@emotion/css'\nimport { useResponsiveStyle } from '../../utils/responsive-style'\nimport { type ResponsiveColor } from '../../utils/types'\nimport { type ResponsiveLengthData, type ResponsiveSelectValue } from '@makeswift/prop-controllers'\n\ntype DividerVariant = 'solid' | 'dashed' | 'dotted' | 'blended'\n\ntype Props = {\n  id?: string\n  variant?: ResponsiveSelectValue<DividerVariant>\n  thickness?: ResponsiveLengthData\n  color?: ResponsiveColor | null\n  width?: string\n  margin?: string\n}\n\nconst Divider = forwardRef(function Divider(\n  { id, variant, thickness, color, width, margin }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  return (\n    // IE11 has a bug with Flexbox vertical centering with min height if height is not set.\n    // Wrapping it in another flex container fixes it for some reason, read more here:\n    // https://stackoverflow.com/questions/19371626/flexbox-not-centering-vertically-in-ie\n    <div\n      ref={ref}\n      id={id}\n      className={cx(useStyle({ display: 'flex', width: '100%' }), width, margin)}\n    >\n      <div\n        className={useStyle({\n          display: 'flex',\n          flexDirection: 'column',\n          justifyContent: 'center',\n          minHeight: 40,\n          width: '100%',\n        })}\n      >\n        <div\n          className={useStyle(\n            useResponsiveStyle(\n              [variant, thickness, color] as const,\n              ([\n                variant = 'solid',\n                thickness = { value: 1, unit: 'px' },\n                color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n              ]) => {\n                switch (variant) {\n                  case 'solid':\n                  case 'dashed':\n                  case 'dotted':\n                    return {\n                      borderBottomWidth:\n                        thickness == null ? 1 : `${thickness.value}${thickness.unit}`,\n                      borderBottomStyle: variant,\n                      borderBottomColor: colorToString(color),\n                    }\n\n                  case 'blended':\n                    return {\n                      height: `${thickness.value}${thickness.unit}`,\n                      background: `linear-gradient(${[\n                        '90deg',\n                        colorToString({ swatch: color.swatch, alpha: 0 }),\n                        colorToString(color),\n                        colorToString({ swatch: color.swatch, alpha: 0 }),\n                      ].join(', ')})`,\n                    }\n\n                  default:\n                    variant as never\n                    throw new Error(`Invalid variant ${variant}.`)\n                }\n              },\n            ),\n          )}\n        />\n      </div>\n    </div>\n  )\n})\n\nexport default Divider\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA0CQ;AA1CR,mBAAgC;AAEhC,2BAA8B;AAC9B,uBAAyB;AACzB,iBAAmB;AACnB,8BAAmC;AAenC,MAAM,cAAU,yBAAW,SAASA,SAClC,EAAE,IAAI,SAAS,WAAW,OAAO,OAAO,OAAO,GAC/C,KACA;AACA;AAAA;AAAA;AAAA;AAAA,IAIE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,eAAW,mBAAG,2BAAS,EAAE,SAAS,QAAQ,OAAO,OAAO,CAAC,GAAG,OAAO,MAAM;AAAA,QAEzE;AAAA,UAAC;AAAA;AAAA,YACC,eAAW,2BAAS;AAAA,cAClB,SAAS;AAAA,cACT,eAAe;AAAA,cACf,gBAAgB;AAAA,cAChB,WAAW;AAAA,cACX,OAAO;AAAA,YACT,CAAC;AAAA,YAED;AAAA,cAAC;AAAA;AAAA,gBACC,eAAW;AAAA,sBACT;AAAA,oBACE,CAAC,SAAS,WAAW,KAAK;AAAA,oBAC1B,CAAC;AAAA,sBACCC,WAAU;AAAA,sBACVC,aAAY,EAAE,OAAO,GAAG,MAAM,KAAK;AAAA,sBACnCC,SAAQ,EAAE,QAAQ,EAAE,KAAK,GAAG,YAAY,GAAG,WAAW,EAAE,GAAG,OAAO,EAAE;AAAA,oBACtE,MAAM;AACJ,8BAAQF,UAAS;AAAA,wBACf,KAAK;AAAA,wBACL,KAAK;AAAA,wBACL,KAAK;AACH,iCAAO;AAAA,4BACL,mBACEC,cAAa,OAAO,IAAI,GAAGA,WAAU,KAAK,GAAGA,WAAU,IAAI;AAAA,4BAC7D,mBAAmBD;AAAA,4BACnB,uBAAmB,oCAAcE,MAAK;AAAA,0BACxC;AAAA,wBAEF,KAAK;AACH,iCAAO;AAAA,4BACL,QAAQ,GAAGD,WAAU,KAAK,GAAGA,WAAU,IAAI;AAAA,4BAC3C,YAAY,mBAAmB;AAAA,8BAC7B;AAAA,kCACA,oCAAc,EAAE,QAAQC,OAAM,QAAQ,OAAO,EAAE,CAAC;AAAA,kCAChD,oCAAcA,MAAK;AAAA,kCACnB,oCAAc,EAAE,QAAQA,OAAM,QAAQ,OAAO,EAAE,CAAC;AAAA,4BAClD,EAAE,KAAK,IAAI,CAAC;AAAA,0BACd;AAAA,wBAEF;AACE,0BAAAF;AACA,gCAAM,IAAI,MAAM,mBAAmBA,QAAO,GAAG;AAAA,sBACjD;AAAA,oBACF;AAAA,kBACF;AAAA,gBACF;AAAA;AAAA,YACF;AAAA;AAAA,QACF;AAAA;AAAA,IACF;AAAA;AAEJ,CAAC;AAED,IAAO,kBAAQ;","names":["Divider","variant","thickness","color"]}
+{"version":3,"sources":["../../../../../src/components/builtin/Divider/Divider.tsx"],"sourcesContent":["import { forwardRef, Ref } from 'react'\n\nimport { colorToString } from '../../utils/colorToString'\nimport { useResponsiveStyle } from '../../utils/responsive-style'\nimport { type ResponsiveColor } from '../../utils/types'\nimport { type ResponsiveLengthData, type ResponsiveSelectValue } from '@makeswift/prop-controllers'\nimport { composeStyles, useStyle } from '../../../runtimes/react/css-runtime/hooks/use-style'\n\ntype DividerVariant = 'solid' | 'dashed' | 'dotted' | 'blended'\n\ntype Props = {\n  id?: string\n  variant?: ResponsiveSelectValue<DividerVariant>\n  thickness?: ResponsiveLengthData\n  color?: ResponsiveColor | null\n  width?: string\n  margin?: string\n}\n\nconst Divider = forwardRef(function Divider(\n  { id, variant, thickness, color, width, margin }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  const outerDivStyles = composeStyles(useStyle({ display: 'flex', width: '100%' }), width, margin)\n  const flexColumnDivStyle = useStyle({\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: 'center',\n    minHeight: 40,\n    width: '100%',\n  })\n  const responsiveBorderStyle = useStyle(\n    useResponsiveStyle(\n      [variant, thickness, color] as const,\n      ([\n        variant = 'solid',\n        thickness = { value: 1, unit: 'px' },\n        color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n      ]) => {\n        switch (variant) {\n          case 'solid':\n          case 'dashed':\n          case 'dotted':\n            return {\n              borderBottomWidth: thickness == null ? 1 : `${thickness.value}${thickness.unit}`,\n              borderBottomStyle: variant,\n              borderBottomColor: colorToString(color),\n            }\n\n          case 'blended':\n            return {\n              height: `${thickness.value}${thickness.unit}`,\n              background: `linear-gradient(${[\n                '90deg',\n                colorToString({ swatch: color.swatch, alpha: 0 }),\n                colorToString(color),\n                colorToString({ swatch: color.swatch, alpha: 0 }),\n              ].join(', ')})`,\n            }\n\n          default:\n            variant as never\n            throw new Error(`Invalid variant ${variant}.`)\n        }\n      },\n    ),\n  )\n  return (\n    // IE11 has a bug with Flexbox vertical centering with min height if height is not set.\n    // Wrapping it in another flex container fixes it for some reason, read more here:\n    // https://stackoverflow.com/questions/19371626/flexbox-not-centering-vertically-in-ie\n    <>\n      {outerDivStyles.styleElements}\n      <div ref={ref} id={id} className={outerDivStyles.className}>\n        {flexColumnDivStyle.styleElement}\n        <div className={flexColumnDivStyle.className}>\n          {responsiveBorderStyle.styleElement}\n          <div className={responsiveBorderStyle.className} />\n        </div>\n      </div>\n    </>\n  )\n})\n\nexport default Divider\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAuEI;AAAA;AAAA;AAAA;AAAA;AAAA;AAvEJ,mBAAgC;AAEhC,2BAA8B;AAC9B,8BAAmC;AAGnC,uBAAwC;AAaxC,MAAM,cAAU,yBAAW,SAASA,SAClC,EAAE,IAAI,SAAS,WAAW,OAAO,OAAO,OAAO,GAC/C,KACA;AACA,QAAM,qBAAiB,oCAAc,2BAAS,EAAE,SAAS,QAAQ,OAAO,OAAO,CAAC,GAAG,OAAO,MAAM;AAChG,QAAM,yBAAqB,2BAAS;AAAA,IAClC,SAAS;AAAA,IACT,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,WAAW;AAAA,IACX,OAAO;AAAA,EACT,CAAC;AACD,QAAM,4BAAwB;AAAA,QAC5B;AAAA,MACE,CAAC,SAAS,WAAW,KAAK;AAAA,MAC1B,CAAC;AAAA,QACCC,WAAU;AAAA,QACVC,aAAY,EAAE,OAAO,GAAG,MAAM,KAAK;AAAA,QACnCC,SAAQ,EAAE,QAAQ,EAAE,KAAK,GAAG,YAAY,GAAG,WAAW,EAAE,GAAG,OAAO,EAAE;AAAA,MACtE,MAAM;AACJ,gBAAQF,UAAS;AAAA,UACf,KAAK;AAAA,UACL,KAAK;AAAA,UACL,KAAK;AACH,mBAAO;AAAA,cACL,mBAAmBC,cAAa,OAAO,IAAI,GAAGA,WAAU,KAAK,GAAGA,WAAU,IAAI;AAAA,cAC9E,mBAAmBD;AAAA,cACnB,uBAAmB,oCAAcE,MAAK;AAAA,YACxC;AAAA,UAEF,KAAK;AACH,mBAAO;AAAA,cACL,QAAQ,GAAGD,WAAU,KAAK,GAAGA,WAAU,IAAI;AAAA,cAC3C,YAAY,mBAAmB;AAAA,gBAC7B;AAAA,oBACA,oCAAc,EAAE,QAAQC,OAAM,QAAQ,OAAO,EAAE,CAAC;AAAA,oBAChD,oCAAcA,MAAK;AAAA,oBACnB,oCAAc,EAAE,QAAQA,OAAM,QAAQ,OAAO,EAAE,CAAC;AAAA,cAClD,EAAE,KAAK,IAAI,CAAC;AAAA,YACd;AAAA,UAEF;AACE,YAAAF;AACA,kBAAM,IAAI,MAAM,mBAAmBA,QAAO,GAAG;AAAA,QACjD;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACA,SAIE,4EACG;AAAA,mBAAe;AAAA,IAChB,6CAAC,SAAI,KAAU,IAAQ,WAAW,eAAe,WAC9C;AAAA,yBAAmB;AAAA,MACpB,6CAAC,SAAI,WAAW,mBAAmB,WAChC;AAAA,8BAAsB;AAAA,QACvB,4CAAC,SAAI,WAAW,sBAAsB,WAAW;AAAA,SACnD;AAAA,OACF;AAAA,KACF;AAEJ,CAAC;AAED,IAAO,kBAAQ;","names":["Divider","variant","thickness","color"]}