@makeswift/runtime 0.0.22 → 0.1.1

package/dist/Countdown.cjs.js

@@ -0,0 +1,340 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+var React = require("react");
+var styled = require("styled-components");
+var css = require("@emotion/css");
+var next = require("./index.cjs.js");
+var cssMediaRules = require("./cssMediaRules.cjs.js");
+var jsxRuntime = require("react/jsx-runtime");
+require("use-sync-external-store/shim/with-selector");
+require("./react-page.cjs.js");
+require("redux");
+require("redux-thunk");
+require("./actions.cjs.js");
+require("./descriptors.cjs.js");
+require("./style.cjs.js");
+require("./color.cjs.js");
+require("./image.cjs.js");
+require("next/dynamic");
+require("next/document");
+require("slate");
+require("@emotion/server/create-instance");
+require("@apollo/client");
+require("@apollo/client/link/batch-http");
+require("./graphql.cjs.js");
+require("./text-input.cjs.js");
+require("./shape.cjs.js");
+require("color");
+require("react-dom");
+require("html-react-parser");
+require("next/head");
+require("uuid/v4");
+require("corporate-ipsum");
+function _interopDefaultLegacy(e) {
+  return e && typeof e === "object" && "default" in e ? e : { "default": e };
+}
+var styled__default = /* @__PURE__ */ _interopDefaultLegacy(styled);
+const Block = styled__default["default"].div`
+  display: block;
+  padding: 0.5em;
+  font-size: 1em;
+`;
+const Label = styled__default["default"].div`
+  margin-top: 0.25em;
+`;
+const Segment = styled__default["default"].div`
+  flex: 1;
+  text-align: center;
+`;
+const Container = styled__default["default"].div.withConfig({
+  shouldForwardProp: (prop) => !["margin", "variant", "size", "shape", "gap", "labelColor", "numberFont", "numberColor", "blockColor", "labelFont"].includes(prop)
+})`
+  display: flex;
+  ${cssMediaRules.cssMargin()}
+  ${(p) => cssMediaRules.cssMediaRules([p.size], ([size = "medium"]) => {
+  switch (size) {
+    case "small":
+      return styled.css`
+            font-size: 18px;
+
+            ${Label} {
+              font-size: 14px;
+            }
+          `;
+    case "large":
+      return styled.css`
+            font-size: 32px;
+
+            ${Label} {
+              font-size: 18px;
+            }
+          `;
+    default:
+      return styled.css`
+            font-size: 24px;
+
+            ${Label} {
+              font-size: 16px;
+            }
+          `;
+  }
+})}
+
+  ${Segment} {
+    ${(p) => cssMediaRules.cssMediaRules([p.gap], ([gap]) => styled.css`
+          margin: 0 ${gap == null ? 0 : `${gap.value / 2}${gap.unit}`};
+
+          &:first-child {
+            margin-left: 0;
+          }
+
+          &:last-child {
+            margin-right: 0;
+          }
+        `)}
+  }
+
+  ${Block} {
+    ${(p) => cssMediaRules.cssMediaRules([p.shape], ([shape = "rounded"]) => {
+  switch (shape) {
+    case "pill":
+      return styled.css`
+              border-radius: 500px;
+            `;
+    case "rounded":
+      return styled.css`
+              border-radius: 6px;
+            `;
+    default:
+      return styled.css`
+              border-radius: 0;
+            `;
+  }
+})}
+    ${(p) => cssMediaRules.cssMediaRules([p.variant, p.blockColor, p.numberColor, p.numberFont], ([variant = "filled", blockColor = {
+  swatch: {
+    hue: 0,
+    saturation: 0,
+    lightness: 0
+  },
+  alpha: 1
+}, numberColor = {
+  swatch: {
+    hue: 0,
+    saturation: 0,
+    lightness: 100
+  },
+  alpha: 1
+}, numberFont = "sans-serif"]) => {
+  switch (variant) {
+    case "filled":
+      return styled.css`
+                font-family: '${numberFont}';
+                color: ${next.colorToString(numberColor)};
+                background: ${next.colorToString(blockColor)};
+              `;
+    case "filled-split":
+      return styled.css`
+                position: relative;
+                color: ${next.colorToString(numberColor)};
+                font-family: '${numberFont}';
+
+                > span {
+                  position: relative;
+                  z-index: 1;
+                }
+
+                ::before {
+                  content: '';
+                  position: absolute;
+                  top: 0;
+                  left: 0;
+                  right: 0;
+                  bottom: calc(50% + 1px);
+                  border-top-left-radius: inherit;
+                  border-top-right-radius: inherit;
+                  background: ${next.colorToString(blockColor)};
+                }
+
+                ::after {
+                  content: '';
+                  position: absolute;
+                  left: 0;
+                  right: 0;
+                  top: calc(50% + 1px);
+                  bottom: 0;
+                  border-bottom-left-radius: inherit;
+                  border-bottom-right-radius: inherit;
+                  background: ${next.colorToString(blockColor)};
+                }
+              `;
+    case "outline":
+      return styled.css`
+                font-family: '${numberFont}';
+                color: ${next.colorToString(numberColor)};
+                background: transparent;
+                border: 2px solid ${next.colorToString(blockColor)};
+              `;
+    case "outline-split":
+      return styled.css`
+                position: relative;
+                font-family: '${numberFont}';
+                color: ${next.colorToString(numberColor)};
+                border: 2px solid ${next.colorToString(blockColor)};
+
+                > span {
+                  position: relative;
+                  z-index: 1;
+                }
+
+                ::before {
+                  content: '';
+                  position: absolute;
+                  top: 50%;
+                  left: 0;
+                  right: 0;
+                  height: 2px;
+                  margin-top: -1px;
+                  background: ${next.colorToString(blockColor)};
+                }
+              `;
+    default:
+      return styled.css`
+                font-family: '${numberFont}';
+                background: transparent;
+                color: ${next.colorToString(numberColor)};
+                padding-top: 0;
+                padding-bottom: 0;
+              `;
+  }
+})}
+  }
+
+  ${Label} {
+    ${(p) => cssMediaRules.cssMediaRules([p.labelColor, p.labelFont], ([labelColor = {
+  swatch: {
+    hue: 0,
+    saturation: 0,
+    lightness: 0
+  },
+  alpha: 1
+}, labelFont = "sans-serif"]) => styled.css`
+          font-family: '${labelFont}';
+          color: ${next.colorToString(labelColor)};
+        `)}
+  }
+`;
+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,
+    hours,
+    minutes,
+    seconds
+  };
+};
+const Countdown = 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] = React.useState(getRemaining(date));
+  React.useEffect(() => {
+    setRemaining(getRemaining(date));
+    const intervalId = setInterval(() => {
+      setRemaining(getRemaining(date));
+    }, 1e3);
+    return () => clearInterval(intervalId);
+  }, [date]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(Container, {
+    ref,
+    id,
+    className: css.cx(width),
+    margin,
+    variant,
+    size,
+    shape,
+    labelColor,
+    labelFont,
+    numberColor,
+    numberFont,
+    blockColor,
+    gap,
+    children: [/* @__PURE__ */ jsxRuntime.jsxs(Segment, {
+      children: [/* @__PURE__ */ jsxRuntime.jsx(Block, {
+        children: /* @__PURE__ */ jsxRuntime.jsx("span", {
+          children: days
+        })
+      }), /* @__PURE__ */ jsxRuntime.jsx(Label, {
+        children: daysLabel == null ? "Days" : daysLabel
+      })]
+    }), /* @__PURE__ */ jsxRuntime.jsxs(Segment, {
+      children: [/* @__PURE__ */ jsxRuntime.jsx(Block, {
+        children: /* @__PURE__ */ jsxRuntime.jsx("span", {
+          children: hours
+        })
+      }), /* @__PURE__ */ jsxRuntime.jsx(Label, {
+        children: hoursLabel == null ? "Hours" : hoursLabel
+      })]
+    }), /* @__PURE__ */ jsxRuntime.jsxs(Segment, {
+      children: [/* @__PURE__ */ jsxRuntime.jsx(Block, {
+        children: /* @__PURE__ */ jsxRuntime.jsx("span", {
+          children: minutes
+        })
+      }), /* @__PURE__ */ jsxRuntime.jsx(Label, {
+        children: minutesLabel == null ? "Minutes" : minutesLabel
+      })]
+    }), /* @__PURE__ */ jsxRuntime.jsxs(Segment, {
+      children: [/* @__PURE__ */ jsxRuntime.jsx(Block, {
+        children: /* @__PURE__ */ jsxRuntime.jsx("span", {
+          children: seconds
+        })
+      }), /* @__PURE__ */ jsxRuntime.jsx(Label, {
+        children: secondsLabel == null ? "Seconds" : secondsLabel
+      })]
+    })]
+  });
+});
+exports["default"] = Countdown;
+//# sourceMappingURL=Countdown.cjs.js.map

package/dist/Countdown.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Countdown.cjs.js","sources":["../src/components/builtin/Countdown/Countdown.tsx"],"sourcesContent":["import { useState, useEffect, Ref, forwardRef } from 'react'\nimport styled, { css } from 'styled-components'\nimport { cx } from '@emotion/css'\n\nimport { colorToString } from '../../utils/colorToString'\nimport { ColorValue as Color } from '../../utils/types'\nimport { cssMediaRules, cssMargin } from '../../utils/cssMediaRules'\nimport {\n  ResponsiveValue,\n  DateValue,\n  ElementIDValue,\n  FontValue,\n  GapXValue,\n  MarginValue,\n  ResponsiveIconRadioGroupValue,\n  TextInputValue,\n} from '../../../prop-controllers/descriptors'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\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?: MarginValue\n  daysLabel?: TextInputValue\n  hoursLabel?: TextInputValue\n  minutesLabel?: TextInputValue\n  secondsLabel?: TextInputValue\n}\n\nconst Block = styled.div`\n  display: block;\n  padding: 0.5em;\n  font-size: 1em;\n`\n\nconst Label = styled.div`\n  margin-top: 0.25em;\n`\n\nconst Segment = styled.div`\n  flex: 1;\n  text-align: center;\n`\n\nconst Container = styled.div.withConfig({\n  shouldForwardProp: prop =>\n    ![\n      'margin',\n      'variant',\n      'size',\n      'shape',\n      'gap',\n      'labelColor',\n      'numberFont',\n      'numberColor',\n      'blockColor',\n      'labelFont',\n    ].includes(prop),\n})<{\n  margin: Props['margin']\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  display: flex;\n  ${cssMargin()}\n  ${p =>\n    cssMediaRules([p.size] as const, ([size = 'medium']) => {\n      switch (size) {\n        case 'small':\n          return css`\n            font-size: 18px;\n\n            ${Label} {\n              font-size: 14px;\n            }\n          `\n        case 'large':\n          return css`\n            font-size: 32px;\n\n            ${Label} {\n              font-size: 18px;\n            }\n          `\n        default:\n          return css`\n            font-size: 24px;\n\n            ${Label} {\n              font-size: 16px;\n            }\n          `\n      }\n    })}\n\n  ${Segment} {\n    ${p =>\n      cssMediaRules(\n        [p.gap] as const,\n        ([gap]) => css`\n          margin: 0 ${gap == null ? 0 : `${gap.value / 2}${gap.unit}`};\n\n          &:first-child {\n            margin-left: 0;\n          }\n\n          &:last-child {\n            margin-right: 0;\n          }\n        `,\n      )}\n  }\n\n  ${Block} {\n    ${p =>\n      cssMediaRules([p.shape] as const, ([shape = 'rounded']) => {\n        switch (shape) {\n          case 'pill':\n            return css`\n              border-radius: 500px;\n            `\n          case 'rounded':\n            return css`\n              border-radius: 6px;\n            `\n          default:\n            return css`\n              border-radius: 0;\n            `\n        }\n      })}\n    ${p =>\n      cssMediaRules(\n        [p.variant, p.blockColor, p.numberColor, p.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 css`\n                font-family: '${numberFont}';\n                color: ${colorToString(numberColor)};\n                background: ${colorToString(blockColor)};\n              `\n            case 'filled-split':\n              return css`\n                position: relative;\n                color: ${colorToString(numberColor)};\n                font-family: '${numberFont}';\n\n                > span {\n                  position: relative;\n                  z-index: 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                  border-top-left-radius: inherit;\n                  border-top-right-radius: 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                  border-bottom-left-radius: inherit;\n                  border-bottom-right-radius: inherit;\n                  background: ${colorToString(blockColor)};\n                }\n              `\n            case 'outline':\n              return css`\n                font-family: '${numberFont}';\n                color: ${colorToString(numberColor)};\n                background: transparent;\n                border: 2px solid ${colorToString(blockColor)};\n              `\n            case 'outline-split':\n              return css`\n                position: relative;\n                font-family: '${numberFont}';\n                color: ${colorToString(numberColor)};\n                border: 2px solid ${colorToString(blockColor)};\n\n                > span {\n                  position: relative;\n                  z-index: 1;\n                }\n\n                ::before {\n                  content: '';\n                  position: absolute;\n                  top: 50%;\n                  left: 0;\n                  right: 0;\n                  height: 2px;\n                  margin-top: -1px;\n                  background: ${colorToString(blockColor)};\n                }\n              `\n            default:\n              return css`\n                font-family: '${numberFont}';\n                background: transparent;\n                color: ${colorToString(numberColor)};\n                padding-top: 0;\n                padding-bottom: 0;\n              `\n          }\n        },\n      )}\n  }\n\n  ${Label} {\n    ${p =>\n      cssMediaRules(\n        [p.labelColor, p.labelFont] as const,\n        ([\n          labelColor = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n          labelFont = 'sans-serif',\n        ]) => css`\n          font-family: '${labelFont}';\n          color: ${colorToString(labelColor)};\n        `,\n      )}\n  }\n`\n\nconst getRemaining = (date: Props['date'] | 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 { days, hours, minutes, seconds }\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(date))\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      className={cx(width)}\n      margin={margin}\n      variant={variant}\n      size={size}\n      shape={shape}\n      labelColor={labelColor}\n      labelFont={labelFont}\n      numberColor={numberColor}\n      numberFont={numberFont}\n      blockColor={blockColor}\n      gap={gap}\n    >\n      <Segment>\n        <Block>\n          <span>{days}</span>\n        </Block>\n        <Label>{daysLabel == null ? 'Days' : daysLabel}</Label>\n      </Segment>\n      <Segment>\n        <Block>\n          <span>{hours}</span>\n        </Block>\n        <Label>{hoursLabel == null ? 'Hours' : hoursLabel}</Label>\n      </Segment>\n      <Segment>\n        <Block>\n          <span>{minutes}</span>\n        </Block>\n        <Label>{minutesLabel == null ? 'Minutes' : minutesLabel}</Label>\n      </Segment>\n      <Segment>\n        <Block>\n          <span>{seconds}</span>\n        </Block>\n        <Label>{secondsLabel == null ? 'Seconds' : secondsLabel}</Label>\n      </Segment>\n    </Container>\n  )\n})\n\nexport default Countdown\n"],"names":["Block","styled","div","Label","Segment","Container","withConfig","shouldForwardProp","prop","includes","cssMargin","p","cssMediaRules","size","css","gap","value","unit","shape","variant","blockColor","numberColor","numberFont","swatch","hue","saturation","lightness","alpha","colorToString","labelColor","labelFont","getRemaining","date","days","hours","minutes","seconds","timeDiff","Date","getTime","now","delta","Math","abs","floor","parseInt","String","Countdown","forwardRef","id","margin","width","daysLabel","hoursLabel","minutesLabel","secondsLabel","ref","setRemaining","useState","useEffect","intervalId","setInterval","clearInterval","cx","_jsxs","_jsx"],"mappings":"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"}

package/dist/Countdown.es.js

@@ -0,0 +1,334 @@
+import { forwardRef, useState, useEffect } from "react";
+import styled, { css } from "styled-components";
+import { cx } from "@emotion/css";
+import { o as colorToString } from "./index.es.js";
+import { b as cssMargin, c as cssMediaRules } from "./cssMediaRules.es.js";
+import { jsxs, jsx } from "react/jsx-runtime";
+import "use-sync-external-store/shim/with-selector";
+import "./react-page.es.js";
+import "redux";
+import "redux-thunk";
+import "./actions.es.js";
+import "./descriptors.es.js";
+import "./style.es.js";
+import "./color.es.js";
+import "./image.es.js";
+import "next/dynamic";
+import "next/document";
+import "slate";
+import "@emotion/server/create-instance";
+import "@apollo/client";
+import "@apollo/client/link/batch-http";
+import "./graphql.es.js";
+import "./text-input.es.js";
+import "./shape.es.js";
+import "color";
+import "react-dom";
+import "html-react-parser";
+import "next/head";
+import "uuid/v4";
+import "corporate-ipsum";
+const Block = styled.div`
+  display: block;
+  padding: 0.5em;
+  font-size: 1em;
+`;
+const Label = styled.div`
+  margin-top: 0.25em;
+`;
+const Segment = styled.div`
+  flex: 1;
+  text-align: center;
+`;
+const Container = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["margin", "variant", "size", "shape", "gap", "labelColor", "numberFont", "numberColor", "blockColor", "labelFont"].includes(prop)
+})`
+  display: flex;
+  ${cssMargin()}
+  ${(p) => cssMediaRules([p.size], ([size = "medium"]) => {
+  switch (size) {
+    case "small":
+      return css`
+            font-size: 18px;
+
+            ${Label} {
+              font-size: 14px;
+            }
+          `;
+    case "large":
+      return css`
+            font-size: 32px;
+
+            ${Label} {
+              font-size: 18px;
+            }
+          `;
+    default:
+      return css`
+            font-size: 24px;
+
+            ${Label} {
+              font-size: 16px;
+            }
+          `;
+  }
+})}
+
+  ${Segment} {
+    ${(p) => cssMediaRules([p.gap], ([gap]) => css`
+          margin: 0 ${gap == null ? 0 : `${gap.value / 2}${gap.unit}`};
+
+          &:first-child {
+            margin-left: 0;
+          }
+
+          &:last-child {
+            margin-right: 0;
+          }
+        `)}
+  }
+
+  ${Block} {
+    ${(p) => cssMediaRules([p.shape], ([shape = "rounded"]) => {
+  switch (shape) {
+    case "pill":
+      return css`
+              border-radius: 500px;
+            `;
+    case "rounded":
+      return css`
+              border-radius: 6px;
+            `;
+    default:
+      return css`
+              border-radius: 0;
+            `;
+  }
+})}
+    ${(p) => cssMediaRules([p.variant, p.blockColor, p.numberColor, p.numberFont], ([variant = "filled", blockColor = {
+  swatch: {
+    hue: 0,
+    saturation: 0,
+    lightness: 0
+  },
+  alpha: 1
+}, numberColor = {
+  swatch: {
+    hue: 0,
+    saturation: 0,
+    lightness: 100
+  },
+  alpha: 1
+}, numberFont = "sans-serif"]) => {
+  switch (variant) {
+    case "filled":
+      return css`
+                font-family: '${numberFont}';
+                color: ${colorToString(numberColor)};
+                background: ${colorToString(blockColor)};
+              `;
+    case "filled-split":
+      return css`
+                position: relative;
+                color: ${colorToString(numberColor)};
+                font-family: '${numberFont}';
+
+                > span {
+                  position: relative;
+                  z-index: 1;
+                }
+
+                ::before {
+                  content: '';
+                  position: absolute;
+                  top: 0;
+                  left: 0;
+                  right: 0;
+                  bottom: calc(50% + 1px);
+                  border-top-left-radius: inherit;
+                  border-top-right-radius: inherit;
+                  background: ${colorToString(blockColor)};
+                }
+
+                ::after {
+                  content: '';
+                  position: absolute;
+                  left: 0;
+                  right: 0;
+                  top: calc(50% + 1px);
+                  bottom: 0;
+                  border-bottom-left-radius: inherit;
+                  border-bottom-right-radius: inherit;
+                  background: ${colorToString(blockColor)};
+                }
+              `;
+    case "outline":
+      return css`
+                font-family: '${numberFont}';
+                color: ${colorToString(numberColor)};
+                background: transparent;
+                border: 2px solid ${colorToString(blockColor)};
+              `;
+    case "outline-split":
+      return css`
+                position: relative;
+                font-family: '${numberFont}';
+                color: ${colorToString(numberColor)};
+                border: 2px solid ${colorToString(blockColor)};
+
+                > span {
+                  position: relative;
+                  z-index: 1;
+                }
+
+                ::before {
+                  content: '';
+                  position: absolute;
+                  top: 50%;
+                  left: 0;
+                  right: 0;
+                  height: 2px;
+                  margin-top: -1px;
+                  background: ${colorToString(blockColor)};
+                }
+              `;
+    default:
+      return css`
+                font-family: '${numberFont}';
+                background: transparent;
+                color: ${colorToString(numberColor)};
+                padding-top: 0;
+                padding-bottom: 0;
+              `;
+  }
+})}
+  }
+
+  ${Label} {
+    ${(p) => cssMediaRules([p.labelColor, p.labelFont], ([labelColor = {
+  swatch: {
+    hue: 0,
+    saturation: 0,
+    lightness: 0
+  },
+  alpha: 1
+}, labelFont = "sans-serif"]) => css`
+          font-family: '${labelFont}';
+          color: ${colorToString(labelColor)};
+        `)}
+  }
+`;
+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,
+    hours,
+    minutes,
+    seconds
+  };
+};
+const Countdown = 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] = useState(getRemaining(date));
+  useEffect(() => {
+    setRemaining(getRemaining(date));
+    const intervalId = setInterval(() => {
+      setRemaining(getRemaining(date));
+    }, 1e3);
+    return () => clearInterval(intervalId);
+  }, [date]);
+  return /* @__PURE__ */ jsxs(Container, {
+    ref,
+    id,
+    className: cx(width),
+    margin,
+    variant,
+    size,
+    shape,
+    labelColor,
+    labelFont,
+    numberColor,
+    numberFont,
+    blockColor,
+    gap,
+    children: [/* @__PURE__ */ jsxs(Segment, {
+      children: [/* @__PURE__ */ jsx(Block, {
+        children: /* @__PURE__ */ jsx("span", {
+          children: days
+        })
+      }), /* @__PURE__ */ jsx(Label, {
+        children: daysLabel == null ? "Days" : daysLabel
+      })]
+    }), /* @__PURE__ */ jsxs(Segment, {
+      children: [/* @__PURE__ */ jsx(Block, {
+        children: /* @__PURE__ */ jsx("span", {
+          children: hours
+        })
+      }), /* @__PURE__ */ jsx(Label, {
+        children: hoursLabel == null ? "Hours" : hoursLabel
+      })]
+    }), /* @__PURE__ */ jsxs(Segment, {
+      children: [/* @__PURE__ */ jsx(Block, {
+        children: /* @__PURE__ */ jsx("span", {
+          children: minutes
+        })
+      }), /* @__PURE__ */ jsx(Label, {
+        children: minutesLabel == null ? "Minutes" : minutesLabel
+      })]
+    }), /* @__PURE__ */ jsxs(Segment, {
+      children: [/* @__PURE__ */ jsx(Block, {
+        children: /* @__PURE__ */ jsx("span", {
+          children: seconds
+        })
+      }), /* @__PURE__ */ jsx(Label, {
+        children: secondsLabel == null ? "Seconds" : secondsLabel
+      })]
+    })]
+  });
+});
+export { Countdown as default };
+//# sourceMappingURL=Countdown.es.js.map