@makeswift/runtime 0.13.1 → 0.14.0

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

@@ -0,0 +1,314 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Countdown_exports = {};
+__export(Countdown_exports, {
+  default: () => Countdown_default
+});
+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");
+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 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 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 Container = (0, import_react.forwardRef)(function Container2({
+  className,
+  width,
+  margin,
+  variant,
+  size,
+  shape,
+  gap,
+  labelColor,
+  numberFont,
+  numberColor,
+  blockColor,
+  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 getRemaining = (date) => {
+  if (date == null)
+    return { days: "0", hours: "0", minutes: "0", seconds: "0" };
+  const timeDiff = new Date(date).getTime() - Date.now();
+  if (timeDiff <= 0)
+    return { days: 0, hours: 0, minutes: 0, seconds: 0 };
+  let delta = Math.abs(timeDiff) / 1e3;
+  const days = Math.floor(delta / 86400);
+  delta -= days * 86400;
+  const hours = Math.floor(delta / 3600) % 24;
+  delta -= hours * 3600;
+  const minutes = Math.floor(delta / 60) % 60;
+  delta -= minutes * 60;
+  const seconds = parseInt(String(delta % 60), 10);
+  return {
+    days: days.toString(),
+    hours: hours.toString(),
+    minutes: minutes.toString(),
+    seconds: seconds.toString()
+  };
+};
+const Countdown = (0, import_react.forwardRef)(function Countdown2({
+  id,
+  margin,
+  width,
+  date,
+  variant,
+  size,
+  shape,
+  gap,
+  labelColor,
+  labelFont,
+  numberColor,
+  numberFont,
+  blockColor,
+  daysLabel,
+  hoursLabel,
+  minutesLabel,
+  secondsLabel
+}, ref) {
+  const [{ days, hours, minutes, seconds }, setRemaining] = (0, import_react.useState)(getRemaining(null));
+  (0, import_react.useEffect)(() => {
+    setRemaining(getRemaining(date));
+    const intervalId = setInterval(() => {
+      setRemaining(getRemaining(date));
+    }, 1e3);
+    return () => clearInterval(intervalId);
+  }, [date]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    Container,
+    {
+      ref,
+      id,
+      width,
+      margin,
+      variant,
+      size,
+      shape,
+      labelColor,
+      labelFont,
+      numberColor,
+      numberFont,
+      blockColor,
+      gap,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Segment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Block, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: days }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, { children: daysLabel == null ? "Days" : daysLabel })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Segment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Block, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: hours }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, { children: hoursLabel == null ? "Hours" : hoursLabel })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Segment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Block, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: minutes }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, { children: minutesLabel == null ? "Minutes" : minutesLabel })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Segment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Block, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: seconds }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, { children: secondsLabel == null ? "Seconds" : secondsLabel })
+        ] })
+      ]
+    }
+  );
+});
+var Countdown_default = Countdown;
+//# sourceMappingURL=Countdown.js.map

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

@@ -0,0 +1 @@
+{"version":3,"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 { useResponsiveStyle } 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          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"]}

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

@@ -0,0 +1,35 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Countdown_exports = {};
+__export(Countdown_exports, {
+  default: () => import_Countdown.default
+});
+module.exports = __toCommonJS(Countdown_exports);
+var import_Countdown = __toESM(require("./Countdown"));
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/builtin/Countdown/index.tsx"],"sourcesContent":["export { default } from './Countdown'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAwB;","names":[]}

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

@@ -0,0 +1,139 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var register_exports = {};
+__export(register_exports, {
+  registerComponent: () => registerComponent
+});
+module.exports = __toCommonJS(register_exports);
+var import_dynamic = __toESM(require("next/dynamic"));
+var import_dynamic2 = require("../../../next/dynamic");
+var import_prop_controllers = require("../../../prop-controllers");
+var import_breakpoints = require("../../../state/modules/breakpoints");
+var import_constants = require("../constants");
+var import_components_meta = require("../../../state/modules/components-meta");
+function registerComponent(runtime) {
+  return runtime.registerComponent(
+    (0, import_dynamic2.forwardNextDynamicRef)((patch) => (0, import_dynamic.default)(() => patch(import("./Countdown")))),
+    {
+      type: import_constants.MakeswiftComponentType.Countdown,
+      label: "Countdown",
+      icon: import_components_meta.ComponentIcon.Countdown,
+      props: {
+        id: import_prop_controllers.Props.ElementID(),
+        date: import_prop_controllers.Props.Date(() => ({
+          preset: new Date(Date.now() + 1e3 * 60 * 60 * 24 * 2).toISOString()
+        })),
+        variant: import_prop_controllers.Props.ResponsiveIconRadioGroup({
+          label: "Style",
+          options: [
+            { label: "Filled", value: "filled", icon: "CountdownSolid16" },
+            {
+              label: "Filled split",
+              value: "filled-split",
+              icon: "CountdownSolidSplit16"
+            },
+            { label: "Outline", value: "outline", icon: "CountdownOutline16" },
+            {
+              label: "Outline split",
+              value: "outline-split",
+              icon: "CountdownOutlineSplit16"
+            },
+            { label: "Clear", value: "clear", icon: "CountdownNaked16" }
+          ],
+          defaultValue: "filled"
+        }),
+        shape: import_prop_controllers.Props.ResponsiveIconRadioGroup({
+          label: "Shape",
+          options: [
+            { label: "Pill", value: "pill", icon: "ButtonPill16" },
+            { label: "Rounded", value: "rounded", icon: "ButtonRounded16" },
+            { label: "Square", value: "square", icon: "ButtonSquare16" }
+          ],
+          defaultValue: "rounded"
+        }),
+        size: import_prop_controllers.Props.ResponsiveIconRadioGroup({
+          label: "Size",
+          options: [
+            { label: "Small", value: "small", icon: "SizeSmall16" },
+            { label: "Medium", value: "medium", icon: "SizeMedium16" },
+            { label: "Large", value: "large", icon: "SizeLarge16" }
+          ],
+          defaultValue: "medium"
+        }),
+        gap: import_prop_controllers.Props.GapX({
+          preset: [
+            {
+              deviceId: (0, import_breakpoints.getBaseBreakpoint)(runtime.getBreakpoints()).id,
+              value: { value: 10, unit: "px" }
+            }
+          ],
+          label: "Gap",
+          step: 1,
+          min: 0,
+          max: 100,
+          defaultValue: { value: 0, unit: "px" }
+        }),
+        numberFont: import_prop_controllers.Props.Font({ label: "Number font" }),
+        numberColor: import_prop_controllers.Props.ResponsiveColor({
+          label: "Number color",
+          placeholder: "white"
+        }),
+        blockColor: import_prop_controllers.Props.ResponsiveColor({
+          label: "Block color",
+          placeholder: "black"
+        }),
+        labelFont: import_prop_controllers.Props.Font({ label: "Label font" }),
+        labelColor: import_prop_controllers.Props.ResponsiveColor({
+          label: "Label color",
+          placeholder: "black"
+        }),
+        width: import_prop_controllers.Props.Width({
+          format: import_prop_controllers.Props.Width.Format.ClassName,
+          defaultValue: { value: 560, unit: "px" }
+        }),
+        margin: import_prop_controllers.Props.Margin({ format: import_prop_controllers.Props.Margin.Format.ClassName }),
+        daysLabel: import_prop_controllers.Props.TextInput({ label: "Days label", placeholder: "Days" }),
+        hoursLabel: import_prop_controllers.Props.TextInput({ label: "Hours label", placeholder: "Hours" }),
+        minutesLabel: import_prop_controllers.Props.TextInput({
+          label: "Minutes label",
+          placeholder: "Minutes"
+        }),
+        secondsLabel: import_prop_controllers.Props.TextInput({
+          label: "Seconds label",
+          placeholder: "Seconds"
+        })
+      }
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  registerComponent
+});
+//# sourceMappingURL=register.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/builtin/Countdown/register.ts"],"sourcesContent":["import dynamic from 'next/dynamic'\nimport { forwardNextDynamicRef } from '../../../next/dynamic'\nimport { Props } from '../../../prop-controllers'\nimport { ReactRuntime } from '../../../runtimes/react'\nimport { getBaseBreakpoint } from '../../../state/modules/breakpoints'\nimport { MakeswiftComponentType } from '../constants'\nimport { ComponentIcon } from '../../../state/modules/components-meta'\n\nexport function registerComponent(runtime: ReactRuntime) {\n  return runtime.registerComponent(\n    forwardNextDynamicRef(patch => dynamic(() => patch(import('./Countdown')))),\n    {\n      type: MakeswiftComponentType.Countdown,\n      label: 'Countdown',\n      icon: ComponentIcon.Countdown,\n      props: {\n        id: Props.ElementID(),\n        date: Props.Date(() => ({\n          preset: new Date(Date.now() + 1000 * 60 * 60 * 24 * 2).toISOString(),\n        })),\n        variant: Props.ResponsiveIconRadioGroup({\n          label: 'Style',\n          options: [\n            { label: 'Filled', value: 'filled', icon: 'CountdownSolid16' },\n            {\n              label: 'Filled split',\n              value: 'filled-split',\n              icon: 'CountdownSolidSplit16',\n            },\n            { label: 'Outline', value: 'outline', icon: 'CountdownOutline16' },\n            {\n              label: 'Outline split',\n              value: 'outline-split',\n              icon: 'CountdownOutlineSplit16',\n            },\n            { label: 'Clear', value: 'clear', icon: 'CountdownNaked16' },\n          ],\n          defaultValue: 'filled',\n        }),\n        shape: Props.ResponsiveIconRadioGroup({\n          label: 'Shape',\n          options: [\n            { label: 'Pill', value: 'pill', icon: 'ButtonPill16' },\n            { label: 'Rounded', value: 'rounded', icon: 'ButtonRounded16' },\n            { label: 'Square', value: 'square', icon: 'ButtonSquare16' },\n          ],\n          defaultValue: 'rounded',\n        }),\n        size: Props.ResponsiveIconRadioGroup({\n          label: 'Size',\n          options: [\n            { label: 'Small', value: 'small', icon: 'SizeSmall16' },\n            { label: 'Medium', value: 'medium', icon: 'SizeMedium16' },\n            { label: 'Large', value: 'large', icon: 'SizeLarge16' },\n          ],\n          defaultValue: 'medium',\n        }),\n        gap: Props.GapX({\n          preset: [\n            {\n              deviceId: getBaseBreakpoint(runtime.getBreakpoints()).id,\n              value: { value: 10, unit: 'px' },\n            },\n          ],\n          label: 'Gap',\n          step: 1,\n          min: 0,\n          max: 100,\n          defaultValue: { value: 0, unit: 'px' },\n        }),\n        numberFont: Props.Font({ label: 'Number font' }),\n        numberColor: Props.ResponsiveColor({\n          label: 'Number color',\n          placeholder: 'white',\n        }),\n        blockColor: Props.ResponsiveColor({\n          label: 'Block color',\n          placeholder: 'black',\n        }),\n        labelFont: Props.Font({ label: 'Label font' }),\n        labelColor: Props.ResponsiveColor({\n          label: 'Label color',\n          placeholder: 'black',\n        }),\n        width: Props.Width({\n          format: Props.Width.Format.ClassName,\n          defaultValue: { value: 560, unit: 'px' },\n        }),\n        margin: Props.Margin({ format: Props.Margin.Format.ClassName }),\n        daysLabel: Props.TextInput({ label: 'Days label', placeholder: 'Days' }),\n        hoursLabel: Props.TextInput({ label: 'Hours label', placeholder: 'Hours' }),\n        minutesLabel: Props.TextInput({\n          label: 'Minutes label',\n          placeholder: 'Minutes',\n        }),\n        secondsLabel: Props.TextInput({\n          label: 'Seconds label',\n          placeholder: 'Seconds',\n        }),\n      },\n    },\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAoB;AACpB,IAAAA,kBAAsC;AACtC,8BAAsB;AAEtB,yBAAkC;AAClC,uBAAuC;AACvC,6BAA8B;AAEvB,SAAS,kBAAkB,SAAuB;AACvD,SAAO,QAAQ;AAAA,QACb,uCAAsB,eAAS,eAAAC,SAAQ,MAAM,MAAM,OAAO,aAAa,CAAC,CAAC,CAAC;AAAA,IAC1E;AAAA,MACE,MAAM,wCAAuB;AAAA,MAC7B,OAAO;AAAA,MACP,MAAM,qCAAc;AAAA,MACpB,OAAO;AAAA,QACL,IAAI,8BAAM,UAAU;AAAA,QACpB,MAAM,8BAAM,KAAK,OAAO;AAAA,UACtB,QAAQ,IAAI,KAAK,KAAK,IAAI,IAAI,MAAO,KAAK,KAAK,KAAK,CAAC,EAAE,YAAY;AAAA,QACrE,EAAE;AAAA,QACF,SAAS,8BAAM,yBAAyB;AAAA,UACtC,OAAO;AAAA,UACP,SAAS;AAAA,YACP,EAAE,OAAO,UAAU,OAAO,UAAU,MAAM,mBAAmB;AAAA,YAC7D;AAAA,cACE,OAAO;AAAA,cACP,OAAO;AAAA,cACP,MAAM;AAAA,YACR;AAAA,YACA,EAAE,OAAO,WAAW,OAAO,WAAW,MAAM,qBAAqB;AAAA,YACjE;AAAA,cACE,OAAO;AAAA,cACP,OAAO;AAAA,cACP,MAAM;AAAA,YACR;AAAA,YACA,EAAE,OAAO,SAAS,OAAO,SAAS,MAAM,mBAAmB;AAAA,UAC7D;AAAA,UACA,cAAc;AAAA,QAChB,CAAC;AAAA,QACD,OAAO,8BAAM,yBAAyB;AAAA,UACpC,OAAO;AAAA,UACP,SAAS;AAAA,YACP,EAAE,OAAO,QAAQ,OAAO,QAAQ,MAAM,eAAe;AAAA,YACrD,EAAE,OAAO,WAAW,OAAO,WAAW,MAAM,kBAAkB;AAAA,YAC9D,EAAE,OAAO,UAAU,OAAO,UAAU,MAAM,iBAAiB;AAAA,UAC7D;AAAA,UACA,cAAc;AAAA,QAChB,CAAC;AAAA,QACD,MAAM,8BAAM,yBAAyB;AAAA,UACnC,OAAO;AAAA,UACP,SAAS;AAAA,YACP,EAAE,OAAO,SAAS,OAAO,SAAS,MAAM,cAAc;AAAA,YACtD,EAAE,OAAO,UAAU,OAAO,UAAU,MAAM,eAAe;AAAA,YACzD,EAAE,OAAO,SAAS,OAAO,SAAS,MAAM,cAAc;AAAA,UACxD;AAAA,UACA,cAAc;AAAA,QAChB,CAAC;AAAA,QACD,KAAK,8BAAM,KAAK;AAAA,UACd,QAAQ;AAAA,YACN;AAAA,cACE,cAAU,sCAAkB,QAAQ,eAAe,CAAC,EAAE;AAAA,cACtD,OAAO,EAAE,OAAO,IAAI,MAAM,KAAK;AAAA,YACjC;AAAA,UACF;AAAA,UACA,OAAO;AAAA,UACP,MAAM;AAAA,UACN,KAAK;AAAA,UACL,KAAK;AAAA,UACL,cAAc,EAAE,OAAO,GAAG,MAAM,KAAK;AAAA,QACvC,CAAC;AAAA,QACD,YAAY,8BAAM,KAAK,EAAE,OAAO,cAAc,CAAC;AAAA,QAC/C,aAAa,8BAAM,gBAAgB;AAAA,UACjC,OAAO;AAAA,UACP,aAAa;AAAA,QACf,CAAC;AAAA,QACD,YAAY,8BAAM,gBAAgB;AAAA,UAChC,OAAO;AAAA,UACP,aAAa;AAAA,QACf,CAAC;AAAA,QACD,WAAW,8BAAM,KAAK,EAAE,OAAO,aAAa,CAAC;AAAA,QAC7C,YAAY,8BAAM,gBAAgB;AAAA,UAChC,OAAO;AAAA,UACP,aAAa;AAAA,QACf,CAAC;AAAA,QACD,OAAO,8BAAM,MAAM;AAAA,UACjB,QAAQ,8BAAM,MAAM,OAAO;AAAA,UAC3B,cAAc,EAAE,OAAO,KAAK,MAAM,KAAK;AAAA,QACzC,CAAC;AAAA,QACD,QAAQ,8BAAM,OAAO,EAAE,QAAQ,8BAAM,OAAO,OAAO,UAAU,CAAC;AAAA,QAC9D,WAAW,8BAAM,UAAU,EAAE,OAAO,cAAc,aAAa,OAAO,CAAC;AAAA,QACvE,YAAY,8BAAM,UAAU,EAAE,OAAO,eAAe,aAAa,QAAQ,CAAC;AAAA,QAC1E,cAAc,8BAAM,UAAU;AAAA,UAC5B,OAAO;AAAA,UACP,aAAa;AAAA,QACf,CAAC;AAAA,QACD,cAAc,8BAAM,UAAU;AAAA,UAC5B,OAAO;AAAA,UACP,aAAa;AAAA,QACf,CAAC;AAAA,MACH;AAAA,IACF;AAAA,EACF;AACF;","names":["import_dynamic","dynamic"]}

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

@@ -0,0 +1,97 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Divider_exports = {};
+__export(Divider_exports, {
+  default: () => Divider_default
+});
+module.exports = __toCommonJS(Divider_exports);
+var import_jsx_runtime = 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");
+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}.`);
+                      }
+                    }
+                  )
+                )
+              }
+            )
+          }
+        )
+      }
+    )
+  );
+});
+var Divider_default = Divider;
+//# sourceMappingURL=Divider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/builtin/Divider/Divider.tsx"],"sourcesContent":["import { forwardRef, Ref } from 'react'\n\nimport {\n  ElementIDValue,\n  ResponsiveLengthValue,\n  ResponsiveSelectValue,\n} from '../../../prop-controllers/descriptors'\nimport { colorToString } from '../../utils/colorToString'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { cx } from '@emotion/css'\nimport { useResponsiveStyle } from '../../utils/responsive-style'\n\ntype DividerVariant = 'solid' | 'dashed' | 'dotted' | 'blended'\n\ntype Props = {\n  id?: ElementIDValue\n  variant?: ResponsiveSelectValue<DividerVariant>\n  thickness?: ResponsiveLengthValue\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;AA8CQ;AA9CR,mBAAgC;AAOhC,2BAA8B;AAE9B,uBAAyB;AACzB,iBAAmB;AACnB,8BAAmC;AAanC,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"]}