meticulous-ui 3.7.11 → 3.7.13

package/components/Image/Image.js

@@ -1,45 +1,30 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useState } from "react";
-import Shimmer from "../Shimmer/Shimmer.js";
-import styled from "styled-components";
-const ImageWrapper = /*@__PURE__*/styled.span`
+import { jsxs as x, jsx as r } from "react/jsx-runtime";
+import { useState as d } from "react";
+import v from "../Shimmer/Shimmer.js";
+import s from "styled-components";
+const j = s.span`
   position: relative;
   display: inline-block;
-  width: ${({
-  $width
-}) => $width};
-  height: ${({
-  $height
-}) => $height};
-  border-radius: ${({
-  $borderRadius
-}) => $borderRadius};
+  width: ${({ $width: e }) => e};
+  height: ${({ $height: e }) => e};
+  border-radius: ${({ $borderRadius: e }) => e};
   overflow: hidden;
-`;
-const StyledImage = /*@__PURE__*/styled.img`
+`, I = s.img`
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
-  border-radius: ${({
-  $borderRadius
-}) => $borderRadius};
-  opacity: ${({
-  $loaded
-}) => $loaded ? 1 : 0};
+  border-radius: ${({ $borderRadius: e }) => e};
+  opacity: ${({ $loaded: e }) => e ? 1 : 0};
   transition: opacity 0.5s ease-in-out;
-`;
-const ShimmerOverlay = /*@__PURE__*/styled.div`
+`, k = s.div`
   position: absolute;
   inset: 0;
   z-index: 2;
-  opacity: ${({
-  $loaded
-}) => $loaded ? 0 : 1};
+  opacity: ${({ $loaded: e }) => e ? 0 : 1};
   transition: opacity 0.35s ease-out;
   pointer-events: none;
-`;
-const LowResImage = /*@__PURE__*/styled.img`
+`, S = s.img`
   position: absolute;
   inset: 0;
   z-index: 1;
@@ -48,44 +33,54 @@ const LowResImage = /*@__PURE__*/styled.img`
   height: 100%;
   object-fit: cover;
   transform: scale(1.05);
-  filter: ${({
-  $loaded
-}) => $loaded ? "blur(0px)" : "blur(12px)"};
-  opacity: ${({
-  $lowLoaded,
-  $loaded
-}) => $lowLoaded && !$loaded ? 1 : 0};
+  filter: ${({ $loaded: e }) => e ? "blur(0px)" : "blur(12px)"};
+  opacity: ${({ $lowLoaded: e, $loaded: t }) => e && !t ? 1 : 0};
   transition:
     opacity 0.5s ease-in-out,
     filter 0.5s ease-in-out;
-`;
-const toRem = (val) => {
-  if (val === void 0 || val === null) return void 0;
-  return typeof val === "number" ? `${val}rem` : val;
-};
-const Image = ({
-  src,
-  alt = "",
-  width = "100%",
-  height = "100%",
-  borderRadius = "0.4rem",
-  loadLow = false,
-  lowSrc,
-  ...rest
+`, o = (e) => {
+  if (e != null)
+    return typeof e == "number" ? `${e}rem` : e;
+}, O = ({
+  src: e,
+  alt: t = "",
+  width: p = "100%",
+  height: u = "100%",
+  borderRadius: i = "0.4rem",
+  loadLow: c = !1,
+  lowSrc: l,
+  ...h
 }) => {
-  const [lowLoaded, setLowLoaded] = useState(false);
-  const [loaded, setLoaded] = useState(false);
-  const [error, setError] = useState(false);
-  const onLowLoad = () => setLowLoaded(true);
-  const onLoad = () => setLoaded(true);
-  const onError = () => setError(true);
-  const shimmerDone = loadLow ? lowLoaded : loaded;
-  return /* @__PURE__ */ jsxs(ImageWrapper, { $width: toRem(width), $height: toRem(height), $borderRadius: toRem(borderRadius), children: [
-    !error && /* @__PURE__ */ jsx(ShimmerOverlay, { $loaded: shimmerDone, children: /* @__PURE__ */ jsx(Shimmer, { borderRadius }) }),
-    loadLow && lowSrc && !error && /* @__PURE__ */ jsx(LowResImage, { src: lowSrc, alt: "", "aria-hidden": "true", $lowLoaded: lowLoaded, $loaded: loaded, $borderRadius: toRem(borderRadius), onLoad: onLowLoad }),
-    !error && /* @__PURE__ */ jsx(StyledImage, { src, alt, "aria-hidden": alt === "" ? "true" : void 0, $loaded: loaded, $borderRadius: toRem(borderRadius), onLoad, onError, ...rest })
+  const [m, $] = d(!1), [n, f] = d(!1), [a, y] = d(!1), b = () => $(!0), g = () => f(!0), L = () => y(!0), w = c ? m : n;
+  return /* @__PURE__ */ x(j, { $width: o(p), $height: o(u), $borderRadius: o(i), children: [
+    !a && /* @__PURE__ */ r(k, { $loaded: w, children: /* @__PURE__ */ r(v, { borderRadius: i }) }),
+    c && l && !a && /* @__PURE__ */ r(
+      S,
+      {
+        src: l,
+        alt: "",
+        "aria-hidden": "true",
+        $lowLoaded: m,
+        $loaded: n,
+        $borderRadius: o(i),
+        onLoad: b
+      }
+    ),
+    !a && /* @__PURE__ */ r(
+      I,
+      {
+        src: e,
+        alt: t,
+        "aria-hidden": t === "" ? "true" : void 0,
+        $loaded: n,
+        $borderRadius: o(i),
+        onLoad: g,
+        onError: L,
+        ...h
+      }
+    )
   ] });
 };
 export {
-  Image as default
+  O as default
 };

package/components/Image/index.js

@@ -1,4 +1,4 @@
-import Image from "./Image.js";
+import e from "./Image.js";
 export {
-  Image as default
+  e as default
 };

package/components/Input/Checkbox/Checkbox.js

@@ -1,39 +1,37 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useState, useRef } from "react";
-import PropTypes from "prop-types";
-import grey from "../../../colors/grey.js";
-import P from "../../Typography/P/P.js";
-import white from "../../../colors/white.js";
-import { blue } from "../../../colors/blue.js";
-import green from "../../../colors/green.js";
-import red from "../../../colors/red.js";
-import yellow from "../../../colors/yellow.js";
-import orange from "../../../colors/orange.js";
-import { black } from "../../../colors/black.js";
-import violet from "../../../colors/violet.js";
-import teal from "../../../colors/teal.js";
-import purple from "../../../colors/purple.js";
-import pink from "../../../colors/pink.js";
-import styled, { css } from "styled-components";
-import Check from "../../Icons/Check.js";
-const COLOR_SHADE_MAP = {
-  blue,
-  green,
-  red,
-  yellow,
-  orange,
-  black,
-  grey,
-  violet,
-  teal,
-  purple,
-  pink
-};
-const getColor = (clr) => {
-  var _a;
-  return (_a = COLOR_SHADE_MAP[clr]) != null ? _a : blue.m500;
-};
-const Wrapper = /*@__PURE__*/styled.div`
+import { jsxs as E, jsx as p } from "react/jsx-runtime";
+import { useState as R, useRef as j } from "react";
+import e from "prop-types";
+import l from "../../../colors/grey.js";
+import A from "../../Typography/P/P.js";
+import B from "../../../colors/white.js";
+import { blue as s } from "../../../colors/blue.js";
+import F from "../../../colors/green.js";
+import I from "../../../colors/red.js";
+import K from "../../../colors/yellow.js";
+import S from "../../../colors/orange.js";
+import { black as T } from "../../../colors/black.js";
+import _ from "../../../colors/violet.js";
+import L from "../../../colors/teal.js";
+import M from "../../../colors/purple.js";
+import W from "../../../colors/pink.js";
+import f, { css as q } from "styled-components";
+import G from "../../Icons/Check.js";
+const J = {
+  blue: s,
+  green: F,
+  red: I,
+  yellow: K,
+  orange: S,
+  black: T,
+  grey: l,
+  violet: _,
+  teal: L,
+  purple: M,
+  pink: W
+}, N = (o) => {
+  var r;
+  return (r = J[o]) != null ? r : s.m500;
+}, Q = f.div`
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -41,46 +39,31 @@ const Wrapper = /*@__PURE__*/styled.div`
   width: max-content;
   position: relative;
 
-  ${({
-  $disabled
-}) => $disabled && css`
+  ${({ $disabled: o }) => o && q`
       pointer-events: none;
       opacity: 0.4;
     `}
-`;
-const Box = /*@__PURE__*/styled(Check)`
+`, U = f(G)`
   width: 1.92rem;
   height: 1.92rem;
-  border: 1px solid ${({
-  $value,
-  $outerShade
-}) => $value ? $outerShade : grey.m800};
+  border: 1px solid ${({ $value: o, $outerShade: r }) => o ? r : l.m800};
   border-radius: 0.32rem;
-  background-color: ${({
-  $value,
-  $innerShade
-}) => $value ? $innerShade : "transparent"};
+  background-color: ${({ $value: o, $innerShade: r }) => o ? r : "transparent"};
   transition:
     background-color 0.5s ease,
     border-color 0.5s ease,
     box-shadow 0.5s ease;
   flex-shrink: 0;
-  box-shadow: 0 0 0 1px ${({
-  $focused,
-  $outerShade
-}) => $focused ? $outerShade : "transparent"};
+  box-shadow: 0 0 0 1px ${({ $focused: o, $outerShade: r }) => o ? r : "transparent"};
 
   path {
     stroke-width: 3;
     transform-box: fill-box;
     transform-origin: center;
-    transform: scale(${({
-  $value
-}) => $value ? 1 : 0});
+    transform: scale(${({ $value: o }) => o ? 1 : 0});
     transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
   }
-`;
-const CbInput = /*@__PURE__*/styled.input`
+`, V = f.input`
   position: absolute;
   opacity: 0;
   width: 1px;
@@ -89,72 +72,83 @@ const CbInput = /*@__PURE__*/styled.input`
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   whitespace: nowrap;
-`;
-const Checkbox = ({
-  label,
-  value,
-  color = "blue",
-  textColor = grey.m700,
-  disabled,
-  onChange,
-  tabIndex,
-  innerShade: innerShadeOverride,
-  outerShade: outerShadeOverride,
-  ...rest
+`, X = ({
+  label: o,
+  value: r,
+  color: k = "blue",
+  textColor: y = l.m700,
+  disabled: u,
+  onChange: i,
+  tabIndex: w,
+  innerShade: a,
+  outerShade: c,
+  ...$
 }) => {
-  var _a, _b;
-  const [focused, setFocused] = useState(false);
-  const shade = getColor(color);
-  const innerShade = (_a = innerShadeOverride != null ? innerShadeOverride : shade == null ? void 0 : shade.m500) != null ? _a : blue.m500;
-  const outerShade = (_b = outerShadeOverride != null ? outerShadeOverride : shade == null ? void 0 : shade.m600) != null ? _b : blue.m600;
-  const lastKeyPressRef = useRef(0);
-  const changeHandler = (e) => onChange(e.target.checked);
-  const keyDownHandler = (e) => {
-    if (e.key === "Enter" || e.key === " ") {
-      const now = Date.now();
-      if (now - lastKeyPressRef.current < 500) {
-        e.preventDefault();
-        e.stopPropagation();
+  var h, g;
+  const [C, m] = R(!1), n = N(k), D = (h = a != null ? a : n == null ? void 0 : n.m500) != null ? h : s.m500, P = (g = c != null ? c : n == null ? void 0 : n.m600) != null ? g : s.m600, b = j(0), H = (t) => i(t.target.checked), z = (t) => {
+    if (t.key === "Enter" || t.key === " ") {
+      const x = Date.now();
+      if (x - b.current < 500) {
+        t.preventDefault(), t.stopPropagation();
         return;
       }
-      lastKeyPressRef.current = now;
-      if (e.key === " ") {
-        e.preventDefault();
-        onChange(!value);
+      if (b.current = x, t.key === " ") {
+        t.preventDefault(), i(!r);
         return;
       }
-      onChange(!value);
-      setFocused(false);
+      i(!r), m(!1);
     }
-    if (e.key === "Escape") setFocused(false);
-  };
-  const focusHandler = (val) => () => setFocused(val);
-  return /* @__PURE__ */ jsxs(Wrapper, { as: "label", $disabled: disabled, ...rest, children: [
-    /* @__PURE__ */ jsx(CbInput, { type: "checkbox", checked: value, onChange: changeHandler, onKeyDown: keyDownHandler, onFocus: focusHandler(true), onBlur: focusHandler(false), disabled, tabIndex }),
-    /* @__PURE__ */ jsx(Box, { $value: value, $focused: focused, size: 6, color: white, $innerShade: innerShade, $outerShade: outerShade, "aria-hidden": "true" }),
-    /* @__PURE__ */ jsx(P, { color: textColor, size: "1.92rem", children: label })
+    t.key === "Escape" && m(!1);
+  }, d = (t) => () => m(t);
+  return /* @__PURE__ */ E(Q, { as: "label", $disabled: u, ...$, children: [
+    /* @__PURE__ */ p(
+      V,
+      {
+        type: "checkbox",
+        checked: r,
+        onChange: H,
+        onKeyDown: z,
+        onFocus: d(!0),
+        onBlur: d(!1),
+        disabled: u,
+        tabIndex: w
+      }
+    ),
+    /* @__PURE__ */ p(
+      U,
+      {
+        $value: r,
+        $focused: C,
+        size: 6,
+        color: B,
+        $innerShade: D,
+        $outerShade: P,
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ p(A, { color: y, size: "1.92rem", children: o })
   ] });
 };
-Checkbox.propTypes = {
+X.propTypes = {
   /** Text label rendered next to the checkbox */
-  label: PropTypes.string,
+  label: e.string,
   /** Controlled checked state */
-  value: PropTypes.bool,
+  value: e.bool,
   /** Color theme key for the checkbox accent. Defaults to 'blue' */
-  color: PropTypes.string,
+  color: e.string,
   /** Color of the label text */
-  textColor: PropTypes.string,
+  textColor: e.string,
   /** Disables the checkbox */
-  disabled: PropTypes.bool,
+  disabled: e.bool,
   /** Called with the new boolean value on change */
-  onChange: PropTypes.func,
+  onChange: e.func,
   /** Tab order index for the checkbox input */
-  tabIndex: PropTypes.number,
+  tabIndex: e.number,
   /** Override the inner fill color (checked state) */
-  innerShade: PropTypes.string,
+  innerShade: e.string,
   /** Override the outer border/ring color (checked state) */
-  outerShade: PropTypes.string
+  outerShade: e.string
 };
 export {
-  Checkbox as default
+  X as default
 };

package/components/Input/Checkbox/index.js

@@ -1,4 +1,4 @@
-import Checkbox from "./Checkbox.js";
+import e from "./Checkbox.js";
 export {
-  Checkbox as default
+  e as default
 };