@clubmed/trident-ui 1.6.0 → 1.6.1-beta.2

package/molecules/Forms/Range.js

@@ -1,233 +1,5 @@
-import { jsxs as D, jsx as E } from "react/jsx-runtime";
-import { R as M } from "../../chunks/ResizeObserver.js";
-import { c as q } from "../../chunks/clsx.js";
-import { useState as B, useRef as T, useEffect as w, useMemo as A, useId as F } from "react";
-import { g as H } from "../../chunks/_commonjsHelpers.js";
-var L, W;
-function V() {
-  if (W) return L;
-  W = 1;
-  function r(t, n, d) {
-    var o, s, u, m, e;
-    n == null && (n = 100);
-    function i() {
-      var a = Date.now() - m;
-      a < n && a >= 0 ? o = setTimeout(i, n - a) : (o = null, d || (e = t.apply(u, s), u = s = null));
-    }
-    var c = function() {
-      u = this, s = arguments, m = Date.now();
-      var a = d && !o;
-      return o || (o = setTimeout(i, n)), a && (e = t.apply(u, s), u = s = null), e;
-    };
-    return c.clear = function() {
-      o && (clearTimeout(o), o = null);
-    }, c.flush = function() {
-      o && (e = t.apply(u, s), u = s = null, clearTimeout(o), o = null);
-    }, c;
-  }
-  return r.debounce = r, L = r, L;
-}
-var k = V();
-const S = /* @__PURE__ */ H(k);
-function X(r) {
-  let {
-    debounce: t,
-    scroll: n,
-    polyfill: d,
-    offsetSize: o
-  } = r === void 0 ? {
-    debounce: 0,
-    scroll: !1,
-    offsetSize: !1
-  } : r;
-  const s = d || (typeof window > "u" ? class {
-  } : window.ResizeObserver);
-  if (!s)
-    throw new Error("This browser does not support ResizeObserver out of the box. See: https://github.com/react-spring/react-use-measure/#resize-observer-polyfills");
-  const [u, m] = B({
-    left: 0,
-    top: 0,
-    width: 0,
-    height: 0,
-    bottom: 0,
-    right: 0,
-    x: 0,
-    y: 0
-  }), e = T({
-    element: null,
-    scrollContainers: null,
-    resizeObserver: null,
-    lastBounds: u
-  }), i = t ? typeof t == "number" ? t : t.scroll : null, c = t ? typeof t == "number" ? t : t.resize : null, a = T(!1);
-  w(() => (a.current = !0, () => void (a.current = !1)));
-  const [y, b, p] = A(() => {
-    const l = () => {
-      if (!e.current.element) return;
-      const {
-        left: O,
-        top: R,
-        width: C,
-        height: v,
-        bottom: x,
-        right: N,
-        x: $,
-        y: j
-      } = e.current.element.getBoundingClientRect(), g = {
-        left: O,
-        top: R,
-        width: C,
-        height: v,
-        bottom: x,
-        right: N,
-        x: $,
-        y: j
-      };
-      e.current.element instanceof HTMLElement && o && (g.height = e.current.element.offsetHeight, g.width = e.current.element.offsetWidth), Object.freeze(g), a.current && !K(e.current.lastBounds, g) && m(e.current.lastBounds = g);
-    };
-    return [l, c ? S(l, c) : l, i ? S(l, i) : l];
-  }, [m, o, i, c]);
-  function f() {
-    e.current.scrollContainers && (e.current.scrollContainers.forEach((l) => l.removeEventListener("scroll", p, !0)), e.current.scrollContainers = null), e.current.resizeObserver && (e.current.resizeObserver.disconnect(), e.current.resizeObserver = null);
-  }
-  function z() {
-    e.current.element && (e.current.resizeObserver = new s(p), e.current.resizeObserver.observe(e.current.element), n && e.current.scrollContainers && e.current.scrollContainers.forEach((l) => l.addEventListener("scroll", p, {
-      capture: !0,
-      passive: !0
-    })));
-  }
-  const h = (l) => {
-    !l || l === e.current.element || (f(), e.current.element = l, e.current.scrollContainers = I(l), z());
-  };
-  return G(p, !!n), Y(b), w(() => {
-    f(), z();
-  }, [n, p, b]), w(() => f, []), [h, u, y];
-}
-function Y(r) {
-  w(() => {
-    const t = r;
-    return window.addEventListener("resize", t), () => void window.removeEventListener("resize", t);
-  }, [r]);
-}
-function G(r, t) {
-  w(() => {
-    if (t) {
-      const n = r;
-      return window.addEventListener("scroll", n, {
-        capture: !0,
-        passive: !0
-      }), () => void window.removeEventListener("scroll", n, !0);
-    }
-  }, [r, t]);
-}
-function I(r) {
-  const t = [];
-  if (!r || r === document.body) return t;
-  const {
-    overflow: n,
-    overflowX: d,
-    overflowY: o
-  } = window.getComputedStyle(r);
-  return [n, d, o].some((s) => s === "auto" || s === "scroll") && t.push(r), [...t, ...I(r.parentElement)];
-}
-const J = ["x", "y", "top", "bottom", "left", "right", "width", "height"], K = (r, t) => J.every((n) => r[n] === t[n]), te = (r) => {
-  const t = F(), {
-    ariaLabel: n,
-    className: d,
-    dataTestId: o = "range",
-    id: s = t,
-    name: u = s,
-    singleCursorMode: m = !1,
-    min: e = 0,
-    options: i = [],
-    step: c = 1,
-    readOnly: a,
-    disabled: y,
-    onChange: b,
-    ...p
-  } = r, [f, z] = B(i.length - 1), [h, l] = B(e), [O, { width: R }] = X({ polyfill: M }), C = (v) => {
-    if (!a) {
-      v.persist();
-      const x = Number(v.target.value);
-      v.target.id[v.target.id.length - 1] === "a" ? z(x) : l(x), b && b(u, [f, h]);
-    }
-  };
-  return /* @__PURE__ */ D(
-    "div",
-    {
-      style: {
-        "--min": e,
-        "--max": i.length - 1,
-        "--inputWidth": `${R}px`,
-        "--inputHeight": "4px",
-        "--thumbWidth": "32px",
-        "--usefulWidth": "calc(var(--inputWidth) - var(--thumbWidth))",
-        "--valueA": f,
-        "--valueB": h
-      },
-      className: q("relative w-full", d),
-      "data-testid": o,
-      "data-name": "Range",
-      ref: O,
-      children: [
-        /* @__PURE__ */ D("div", { className: "input-range-container", children: [
-          /* @__PURE__ */ E(
-            "input",
-            {
-              ...p,
-              "aria-label": n,
-              className: "input-range",
-              id: `${s}-a`,
-              max: i.length - 1,
-              min: e,
-              name: u,
-              onChange: C,
-              disabled: y,
-              step: c,
-              type: "range",
-              value: f
-            }
-          ),
-          !m && /* @__PURE__ */ E(
-            "input",
-            {
-              ...p,
-              "aria-label": n,
-              className: "input-range",
-              disabled: y,
-              id: `${s}-b`,
-              max: i.length - 1,
-              min: e,
-              name: u,
-              onChange: C,
-              step: c,
-              type: "range",
-              value: h
-            }
-          )
-        ] }),
-        /* @__PURE__ */ E(
-          "output",
-          {
-            htmlFor: `${s}-a`,
-            style: { "--value": f },
-            className: "input-range-output",
-            children: i[f].label
-          }
-        ),
-        !m && /* @__PURE__ */ E(
-          "output",
-          {
-            htmlFor: `${s}-b`,
-            style: { "--value": h },
-            className: "input-range-output",
-            children: i[h].label
-          }
-        )
-      ]
-    }
-  );
-};
+import { Range as r } from "../../ui/forms/Range.js";
 export {
-  te as Range
+  r as Range
 };
 //# sourceMappingURL=Range.js.map

package/molecules/Forms/Range.js.map

@@ -1 +1 @@
-{"version":3,"file":"Range.js","sources":["../../../node_modules/debounce/index.js","../../../node_modules/react-use-measure/dist/web.js","../../../lib/molecules/Forms/Range.tsx"],"sourcesContent":["/**\n * Returns a function, that, as long as it continues to be invoked, will not\n * be triggered. The function will be called after it stops being called for\n * N milliseconds. If `immediate` is passed, trigger the function on the\n * leading edge, instead of the trailing. The function also has a property 'clear' \n * that is a function which will clear the timer to prevent previously scheduled executions. \n *\n * @source underscore.js\n * @see http://unscriptable.com/2009/03/20/debouncing-javascript-methods/\n * @param {Function} function to wrap\n * @param {Number} timeout in ms (`100`)\n * @param {Boolean} whether to execute at the beginning (`false`)\n * @api public\n */\nfunction debounce(func, wait, immediate){\n  var timeout, args, context, timestamp, result;\n  if (null == wait) wait = 100;\n\n  function later() {\n    var last = Date.now() - timestamp;\n\n    if (last < wait && last >= 0) {\n      timeout = setTimeout(later, wait - last);\n    } else {\n      timeout = null;\n      if (!immediate) {\n        result = func.apply(context, args);\n        context = args = null;\n      }\n    }\n  };\n\n  var debounced = function(){\n    context = this;\n    args = arguments;\n    timestamp = Date.now();\n    var callNow = immediate && !timeout;\n    if (!timeout) timeout = setTimeout(later, wait);\n    if (callNow) {\n      result = func.apply(context, args);\n      context = args = null;\n    }\n\n    return result;\n  };\n\n  debounced.clear = function() {\n    if (timeout) {\n      clearTimeout(timeout);\n      timeout = null;\n    }\n  };\n  \n  debounced.flush = function() {\n    if (timeout) {\n      result = func.apply(context, args);\n      context = args = null;\n      \n      clearTimeout(timeout);\n      timeout = null;\n    }\n  };\n\n  return debounced;\n};\n\n// Adds compatibility for ES modules\ndebounce.debounce = debounce;\n\nmodule.exports = debounce;\n","import { useState, useRef, useEffect, useMemo } from 'react';\nimport createDebounce from 'debounce';\n\nfunction useMeasure(_temp) {\n  let {\n    debounce,\n    scroll,\n    polyfill,\n    offsetSize\n  } = _temp === void 0 ? {\n    debounce: 0,\n    scroll: false,\n    offsetSize: false\n  } : _temp;\n  const ResizeObserver = polyfill || (typeof window === 'undefined' ? class ResizeObserver {} : window.ResizeObserver);\n\n  if (!ResizeObserver) {\n    throw new Error('This browser does not support ResizeObserver out of the box. See: https://github.com/react-spring/react-use-measure/#resize-observer-polyfills');\n  }\n\n  const [bounds, set] = useState({\n    left: 0,\n    top: 0,\n    width: 0,\n    height: 0,\n    bottom: 0,\n    right: 0,\n    x: 0,\n    y: 0\n  }); // keep all state in a ref\n\n  const state = useRef({\n    element: null,\n    scrollContainers: null,\n    resizeObserver: null,\n    lastBounds: bounds\n  }); // set actual debounce values early, so effects know if they should react accordingly\n\n  const scrollDebounce = debounce ? typeof debounce === 'number' ? debounce : debounce.scroll : null;\n  const resizeDebounce = debounce ? typeof debounce === 'number' ? debounce : debounce.resize : null; // make sure to update state only as long as the component is truly mounted\n\n  const mounted = useRef(false);\n  useEffect(() => {\n    mounted.current = true;\n    return () => void (mounted.current = false);\n  }); // memoize handlers, so event-listeners know when they should update\n\n  const [forceRefresh, resizeChange, scrollChange] = useMemo(() => {\n    const callback = () => {\n      if (!state.current.element) return;\n      const {\n        left,\n        top,\n        width,\n        height,\n        bottom,\n        right,\n        x,\n        y\n      } = state.current.element.getBoundingClientRect();\n      const size = {\n        left,\n        top,\n        width,\n        height,\n        bottom,\n        right,\n        x,\n        y\n      };\n\n      if (state.current.element instanceof HTMLElement && offsetSize) {\n        size.height = state.current.element.offsetHeight;\n        size.width = state.current.element.offsetWidth;\n      }\n\n      Object.freeze(size);\n      if (mounted.current && !areBoundsEqual(state.current.lastBounds, size)) set(state.current.lastBounds = size);\n    };\n\n    return [callback, resizeDebounce ? createDebounce(callback, resizeDebounce) : callback, scrollDebounce ? createDebounce(callback, scrollDebounce) : callback];\n  }, [set, offsetSize, scrollDebounce, resizeDebounce]); // cleanup current scroll-listeners / observers\n\n  function removeListeners() {\n    if (state.current.scrollContainers) {\n      state.current.scrollContainers.forEach(element => element.removeEventListener('scroll', scrollChange, true));\n      state.current.scrollContainers = null;\n    }\n\n    if (state.current.resizeObserver) {\n      state.current.resizeObserver.disconnect();\n      state.current.resizeObserver = null;\n    }\n  } // add scroll-listeners / observers\n\n\n  function addListeners() {\n    if (!state.current.element) return;\n    state.current.resizeObserver = new ResizeObserver(scrollChange);\n    state.current.resizeObserver.observe(state.current.element);\n\n    if (scroll && state.current.scrollContainers) {\n      state.current.scrollContainers.forEach(scrollContainer => scrollContainer.addEventListener('scroll', scrollChange, {\n        capture: true,\n        passive: true\n      }));\n    }\n  } // the ref we expose to the user\n\n\n  const ref = node => {\n    if (!node || node === state.current.element) return;\n    removeListeners();\n    state.current.element = node;\n    state.current.scrollContainers = findScrollContainers(node);\n    addListeners();\n  }; // add general event listeners\n\n\n  useOnWindowScroll(scrollChange, Boolean(scroll));\n  useOnWindowResize(resizeChange); // respond to changes that are relevant for the listeners\n\n  useEffect(() => {\n    removeListeners();\n    addListeners();\n  }, [scroll, scrollChange, resizeChange]); // remove all listeners when the components unmounts\n\n  useEffect(() => removeListeners, []);\n  return [ref, bounds, forceRefresh];\n} // Adds native resize listener to window\n\n\nfunction useOnWindowResize(onWindowResize) {\n  useEffect(() => {\n    const cb = onWindowResize;\n    window.addEventListener('resize', cb);\n    return () => void window.removeEventListener('resize', cb);\n  }, [onWindowResize]);\n}\n\nfunction useOnWindowScroll(onScroll, enabled) {\n  useEffect(() => {\n    if (enabled) {\n      const cb = onScroll;\n      window.addEventListener('scroll', cb, {\n        capture: true,\n        passive: true\n      });\n      return () => void window.removeEventListener('scroll', cb, true);\n    }\n  }, [onScroll, enabled]);\n} // Returns a list of scroll offsets\n\n\nfunction findScrollContainers(element) {\n  const result = [];\n  if (!element || element === document.body) return result;\n  const {\n    overflow,\n    overflowX,\n    overflowY\n  } = window.getComputedStyle(element);\n  if ([overflow, overflowX, overflowY].some(prop => prop === 'auto' || prop === 'scroll')) result.push(element);\n  return [...result, ...findScrollContainers(element.parentElement)];\n} // Checks if element boundaries are equal\n\n\nconst keys = ['x', 'y', 'top', 'bottom', 'left', 'right', 'width', 'height'];\n\nconst areBoundsEqual = (a, b) => keys.every(key => a[key] === b[key]);\n\nexport { useMeasure as default };\n","import { ResizeObserver } from '@juggle/resize-observer';\nimport clsx from 'clsx';\nimport {\n  type ChangeEvent,\n  type CSSProperties,\n  type InputHTMLAttributes,\n  useId,\n  useState,\n} from 'react';\n\nimport useMeasure from 'react-use-measure';\nimport './range.css';\n\ninterface RangeProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {\n  /**\n   * Aria label\n   * @default 'Range'\n   * */\n  ariaLabel?: string;\n  /**\n   * Additional class names\n   * */\n  className?: string;\n  /**\n   * Data test id\n   * */\n  dataTestId?: string;\n  /**\n   * Single cursor mode\n   * @default false\n   * */\n  singleCursorMode?: boolean;\n  /**\n   * Min value\n   * @default 0\n   * */\n  min?: number;\n  /**\n   * On change\n   * */\n  onChange?: (name: string, value: number[]) => void;\n  /**\n   * Options\n   * @default []\n   * */\n  options: { value: number; label: string }[];\n}\n\nexport const Range = (props: RangeProps) => {\n  const internalId = useId();\n\n  const {\n    ariaLabel,\n    className,\n    dataTestId = 'range',\n    id = internalId,\n    name = id,\n    singleCursorMode = false,\n    min = 0,\n    options = [],\n    step = 1,\n    readOnly,\n    disabled,\n    onChange,\n    ...rest\n  } = props;\n\n  const [valueA, setValueA] = useState(options.length - 1);\n  const [valueB, setValueB] = useState(min);\n  const [containerRef, { width }] = useMeasure({ polyfill: ResizeObserver });\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    if (!readOnly) {\n      e.persist();\n      const inputValue = Number(e.target.value);\n      const inputId = e.target.id[e.target.id.length - 1];\n\n      if (inputId === 'a') {\n        setValueA(inputValue);\n      } else {\n        setValueB(inputValue);\n      }\n\n      if (onChange) {\n        onChange(name, [valueA, valueB]);\n      }\n    }\n  };\n\n  return (\n    <div\n      style={\n        {\n          '--min': min,\n          '--max': options.length - 1,\n          '--inputWidth': `${width}px`,\n          '--inputHeight': '4px',\n          '--thumbWidth': '32px',\n          '--usefulWidth': 'calc(var(--inputWidth) - var(--thumbWidth))',\n          '--valueA': valueA,\n          '--valueB': valueB,\n        } as CSSProperties\n      }\n      className={clsx('relative w-full', className)}\n      data-testid={dataTestId}\n      data-name=\"Range\"\n      ref={containerRef}\n    >\n      <div className=\"input-range-container\">\n        <input\n          {...rest}\n          aria-label={ariaLabel}\n          className=\"input-range\"\n          id={`${id}-a`}\n          max={options.length - 1}\n          min={min}\n          name={name}\n          onChange={handleChange}\n          disabled={disabled}\n          step={step}\n          type=\"range\"\n          value={valueA}\n        />\n        {!singleCursorMode && (\n          <input\n            {...rest}\n            aria-label={ariaLabel}\n            className=\"input-range\"\n            disabled={disabled}\n            id={`${id}-b`}\n            max={options.length - 1}\n            min={min}\n            name={name}\n            onChange={handleChange}\n            step={step}\n            type=\"range\"\n            value={valueB}\n          />\n        )}\n      </div>\n      <output\n        htmlFor={`${id}-a`}\n        style={{ '--value': valueA } as CSSProperties}\n        className=\"input-range-output\"\n      >\n        {options[valueA].label}\n      </output>\n      {!singleCursorMode && (\n        <output\n          htmlFor={`${id}-b`}\n          style={{ '--value': valueB } as CSSProperties}\n          className=\"input-range-output\"\n        >\n          {options[valueB].label}\n        </output>\n      )}\n    </div>\n  );\n};\n"],"names":["debounce","func","wait","immediate","timeout","args","context","timestamp","result","later","last","debounced","callNow","debounce_1","useMeasure","_temp","scroll","polyfill","offsetSize","ResizeObserver","bounds","set","useState","state","useRef","scrollDebounce","resizeDebounce","mounted","useEffect","forceRefresh","resizeChange","scrollChange","useMemo","callback","left","top","width","height","bottom","right","x","y","size","areBoundsEqual","createDebounce","removeListeners","element","addListeners","scrollContainer","ref","node","findScrollContainers","useOnWindowScroll","useOnWindowResize","onWindowResize","cb","onScroll","enabled","overflow","overflowX","overflowY","prop","keys","a","b","key","Range","props","internalId","useId","ariaLabel","className","dataTestId","id","name","singleCursorMode","min","options","step","readOnly","disabled","onChange","rest","valueA","setValueA","valueB","setValueB","containerRef","handleChange","e","inputValue","jsxs","clsx","jsx"],"mappings":"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","x_google_ignoreList":[0,1]}
+{"version":3,"file":"Range.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/molecules/Forms/Select.d.ts

@@ -1,10 +1 @@
-import { FormControlProps } from './FormControl.js';
-import { IconicTypes } from '@clubmed/trident-icons';
-import { SelectHTMLAttributes } from 'react';
-export interface SelectProps<Value> extends FormControlProps<Value, SelectHTMLAttributes<HTMLSelectElement>> {
-    description?: string;
-    iconType?: IconicTypes;
-    errorMessage?: string;
-    dataTestId?: string;
-}
-export declare const Select: <Value = string>(props: SelectProps<Value>) => import("react/jsx-runtime").JSX.Element;
+export * from '../../ui/forms/Select';

package/molecules/Forms/Select.js

@@ -1,104 +1,5 @@
-import { jsx as r, jsxs as c } from "react/jsx-runtime";
-import { c as l } from "../../chunks/clsx.js";
-import { useValue as I } from "../../hooks/useValue.js";
-import { useInternalStatus as S } from "../../hooks/useInternalStatus.js";
-import { FormControl as j } from "./FormControl.js";
-import { Icon as n } from "@clubmed/trident-icons";
-import { useId as T } from "react";
-const R = (p) => {
-  const u = T(), {
-    id: t = u,
-    name: a = t,
-    label: m,
-    value: b,
-    description: x,
-    validationStatus: o = "default",
-    iconType: i,
-    errorMessage: f,
-    disabled: s = !1,
-    required: d = !1,
-    hideRequiredStar: h,
-    className: g,
-    dataTestId: v = t,
-    onChange: y,
-    children: w,
-    ...N
-  } = p, { value: k, setValue: C } = I({ name: a, initialValue: b, onChange: y }), e = S({
-    isDisabled: s,
-    validationStatus: o
-  });
-  return /* @__PURE__ */ r(
-    j,
-    {
-      id: t,
-      className: g,
-      label: m,
-      description: x,
-      dataName: "TextField",
-      dataTestId: v,
-      disabled: s,
-      required: d,
-      hideRequiredStar: h,
-      validationStatus: o,
-      errorMessage: f,
-      children: /* @__PURE__ */ c(
-        "div",
-        {
-          className: l("relative rounded-pill z-0", {
-            "bg-white": e !== "disabled",
-            "bg-pearl": e === "disabled"
-          }),
-          children: [
-            /* @__PURE__ */ r(
-              "select",
-              {
-                ...N,
-                id: t,
-                name: a,
-                disabled: s,
-                required: d,
-                value: k,
-                onChange: (D) => C(D.target.value),
-                className: l(
-                  "text-b3 rounded-pill w-full border px-20 py-12 font-normal outline-none appearance-none bg-transparent",
-                  {
-                    "border-lightGrey focus:border-black active:border-black pe-[52px]": e === "default",
-                    "pe-[84px]": e === "error" || e === "success",
-                    "text-black": e !== "disabled",
-                    "text-grey": e === "disabled",
-                    "border-red": e === "error",
-                    "border-green": e === "success"
-                  }
-                ),
-                "aria-label": a,
-                children: w
-              }
-            ),
-            /* @__PURE__ */ r(
-              "div",
-              {
-                className: l(
-                  "pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12 -z-1",
-                  {
-                    "text-grey": e === "disabled",
-                    "text-red": e === "error",
-                    "text-green": e === "success"
-                  }
-                ),
-                children: /* @__PURE__ */ c("span", { className: "ms-auto flex gap-x-8", children: [
-                  e === "error" && /* @__PURE__ */ r(n, { name: "CrossDefault", width: "24px", type: i }),
-                  e === "success" && /* @__PURE__ */ r(n, { name: "CheckDefault", width: "24px", type: i }),
-                  /* @__PURE__ */ r("button", { className: "pointer-events-auto inline-flex", children: /* @__PURE__ */ r(n, { name: "ArrowDefaultDown", type: "svg", width: "24px", color: "black" }) })
-                ] })
-              }
-            )
-          ]
-        }
-      )
-    }
-  );
-};
+import { Select as r } from "../../ui/forms/Select.js";
 export {
-  R as Select
+  r as Select
 };
 //# sourceMappingURL=Select.js.map

package/molecules/Forms/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../lib/molecules/Forms/Select.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useValue } from '@/hooks/useValue';\nimport { useInternalStatus } from '@/hooks/useInternalStatus';\nimport { FormControl, type FormControlProps } from './FormControl.js';\nimport { Icon, type IconicTypes } from '@clubmed/trident-icons';\nimport { type SelectHTMLAttributes, useId } from 'react';\n\nexport interface SelectProps<Value>\n  extends FormControlProps<Value, SelectHTMLAttributes<HTMLSelectElement>> {\n  description?: string;\n  iconType?: IconicTypes;\n  errorMessage?: string;\n  dataTestId?: string;\n}\n\nexport const Select = <Value = string,>(props: SelectProps<Value>) => {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    label,\n    value: initialValue,\n    description,\n    validationStatus = 'default',\n    iconType,\n    errorMessage,\n    disabled = false,\n    required = false,\n    hideRequiredStar,\n    className,\n    dataTestId = id,\n    onChange,\n    children,\n    ...rest\n  } = props;\n\n  const { value, setValue } = useValue<Value>({ name, initialValue, onChange });\n  const internalStatus = useInternalStatus({\n    isDisabled: disabled,\n    validationStatus,\n  });\n\n  return (\n    <FormControl\n      id={id}\n      className={className}\n      label={label}\n      description={description}\n      dataName=\"TextField\"\n      dataTestId={dataTestId}\n      disabled={disabled}\n      required={required}\n      hideRequiredStar={hideRequiredStar}\n      validationStatus={validationStatus}\n      errorMessage={errorMessage}\n    >\n      <div\n        className={clsx('relative rounded-pill z-0', {\n          'bg-white': internalStatus !== 'disabled',\n          'bg-pearl': internalStatus === 'disabled',\n        })}\n      >\n        <select\n          {...rest}\n          id={id}\n          name={name}\n          disabled={disabled}\n          required={required}\n          value={value as any}\n          onChange={(e) => setValue(e.target.value as Value)}\n          className={clsx(\n            'text-b3 rounded-pill w-full border px-20 py-12 font-normal outline-none appearance-none bg-transparent',\n            {\n              'border-lightGrey focus:border-black active:border-black pe-[52px]':\n                internalStatus === 'default',\n              'pe-[84px]': internalStatus === 'error' || internalStatus === 'success',\n              'text-black': internalStatus !== 'disabled',\n              'text-grey': internalStatus === 'disabled',\n              'border-red': internalStatus === 'error',\n              'border-green': internalStatus === 'success',\n            },\n          )}\n          aria-label={name}\n        >\n          {children}\n        </select>\n\n        <div\n          className={clsx(\n            'pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12 -z-1',\n            {\n              'text-grey': internalStatus === 'disabled',\n              'text-red': internalStatus === 'error',\n              'text-green': internalStatus === 'success',\n            },\n          )}\n        >\n          <span className=\"ms-auto flex gap-x-8\">\n            {internalStatus === 'error' && (\n              <Icon name=\"CrossDefault\" width=\"24px\" type={iconType} />\n            )}\n\n            {internalStatus === 'success' && (\n              <Icon name=\"CheckDefault\" width=\"24px\" type={iconType} />\n            )}\n\n            <button className=\"pointer-events-auto inline-flex\">\n              <Icon name=\"ArrowDefaultDown\" type=\"svg\" width=\"24px\" color=\"black\" />\n            </button>\n          </span>\n        </div>\n      </div>\n    </FormControl>\n  );\n};\n"],"names":["Select","props","internalId","useId","id","name","label","initialValue","description","validationStatus","iconType","errorMessage","disabled","required","hideRequiredStar","className","dataTestId","onChange","children","rest","value","setValue","useValue","internalStatus","useInternalStatus","jsx","FormControl","jsxs","clsx","e","Icon"],"mappings":";;;;;;;AAeO,MAAMA,IAAS,CAAkBC,MAA8B;AACpE,QAAMC,IAAaC,EAAA,GAEb;AAAA,IACJ,IAAAC,IAAKF;AAAA,IACL,MAAAG,IAAOD;AAAA,IACP,OAAAE;AAAA,IACA,OAAOC;AAAA,IACP,aAAAC;AAAA,IACA,kBAAAC,IAAmB;AAAA,IACnB,UAAAC;AAAA,IACA,cAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,UAAAC,IAAW;AAAA,IACX,kBAAAC;AAAA,IACA,WAAAC;AAAA,IACA,YAAAC,IAAaZ;AAAA,IACb,UAAAa;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDlB,GAEE,EAAE,OAAAmB,GAAO,UAAAC,MAAaC,EAAgB,EAAE,MAAAjB,GAAM,cAAAE,GAAc,UAAAU,GAAU,GACtEM,IAAiBC,EAAkB;AAAA,IACvC,YAAYZ;AAAA,IACZ,kBAAAH;AAAA,EAAA,CACD;AAED,SACE,gBAAAgB;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,IAAAtB;AAAA,MACA,WAAAW;AAAA,MACA,OAAAT;AAAA,MACA,aAAAE;AAAA,MACA,UAAS;AAAA,MACT,YAAAQ;AAAA,MACA,UAAAJ;AAAA,MACA,UAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,kBAAAL;AAAA,MACA,cAAAE;AAAA,MAEA,UAAA,gBAAAgB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWC,EAAK,6BAA6B;AAAA,YAC3C,YAAYL,MAAmB;AAAA,YAC/B,YAAYA,MAAmB;AAAA,UAAA,CAChC;AAAA,UAED,UAAA;AAAA,YAAA,gBAAAE;AAAA,cAAC;AAAA,cAAA;AAAA,gBACE,GAAGN;AAAA,gBACJ,IAAAf;AAAA,gBACA,MAAAC;AAAA,gBACA,UAAAO;AAAA,gBACA,UAAAC;AAAA,gBACA,OAAAO;AAAA,gBACA,UAAU,CAACS,MAAMR,EAASQ,EAAE,OAAO,KAAc;AAAA,gBACjD,WAAWD;AAAA,kBACT;AAAA,kBACA;AAAA,oBACE,qEACEL,MAAmB;AAAA,oBACrB,aAAaA,MAAmB,WAAWA,MAAmB;AAAA,oBAC9D,cAAcA,MAAmB;AAAA,oBACjC,aAAaA,MAAmB;AAAA,oBAChC,cAAcA,MAAmB;AAAA,oBACjC,gBAAgBA,MAAmB;AAAA,kBAAA;AAAA,gBACrC;AAAA,gBAEF,cAAYlB;AAAA,gBAEX,UAAAa;AAAA,cAAA;AAAA,YAAA;AAAA,YAGH,gBAAAO;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAWG;AAAA,kBACT;AAAA,kBACA;AAAA,oBACE,aAAaL,MAAmB;AAAA,oBAChC,YAAYA,MAAmB;AAAA,oBAC/B,cAAcA,MAAmB;AAAA,kBAAA;AAAA,gBACnC;AAAA,gBAGF,UAAA,gBAAAI,EAAC,QAAA,EAAK,WAAU,wBACb,UAAA;AAAA,kBAAAJ,MAAmB,6BACjBO,GAAA,EAAK,MAAK,gBAAe,OAAM,QAAO,MAAMpB,EAAA,CAAU;AAAA,kBAGxDa,MAAmB,aAClB,gBAAAE,EAACK,GAAA,EAAK,MAAK,gBAAe,OAAM,QAAO,MAAMpB,EAAA,CAAU;AAAA,kBAGzD,gBAAAe,EAAC,UAAA,EAAO,WAAU,mCAChB,4BAACK,GAAA,EAAK,MAAK,oBAAmB,MAAK,OAAM,OAAM,QAAO,OAAM,SAAQ,EAAA,CACtE;AAAA,gBAAA,EAAA,CACF;AAAA,cAAA;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"Select.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/molecules/Forms/Switch.d.ts

@@ -1,5 +1 @@
-import { FormControlProps } from './FormControl.js';
-export interface SwitchProps extends FormControlProps<boolean> {
-    width?: number;
-}
-export declare function Switch(props: SwitchProps): import("react/jsx-runtime").JSX.Element;
+export * from '../../ui/forms/Switch';

package/molecules/Forms/Switch.js

@@ -1,63 +1,5 @@
-import { jsxs as c, jsx as e } from "react/jsx-runtime";
-import { c as x } from "../../chunks/clsx.js";
-import { useValue as f } from "../../hooks/useValue.js";
-/* empty css                    */
-import { useId as w } from "react";
-function C(n) {
-  const s = w(), {
-    id: o = s,
-    name: r = o,
-    className: i,
-    checked: h,
-    disabled: t,
-    width: l = 56,
-    onChange: d,
-    tabIndex: m = 0,
-    children: p
-  } = n, { value: a, setValue: u } = f({
-    initialValue: h,
-    name: r,
-    onChange: d
-  });
-  return /* @__PURE__ */ c(
-    "label",
-    {
-      className: x(i, "relative flex items-center gap-[10px]", {
-        "text-b2": !i?.includes("text-"),
-        "font-semibold": !i?.includes("font-"),
-        "text-grey": t,
-        "cursor-pointer": !t
-      }),
-      "data-testid": "SwitchContainer",
-      children: [
-        /* @__PURE__ */ c("span", { className: "relative", children: [
-          /* @__PURE__ */ e(
-            "input",
-            {
-              type: "checkbox",
-              name: r,
-              tabIndex: m,
-              checked: a,
-              disabled: t,
-              role: "switch",
-              className: "absolute w-full h-full opacity-0 cursor-pointer",
-              onChange: () => {
-                t || u(!a);
-              },
-              "data-name": "Switch"
-            }
-          ),
-          /* @__PURE__ */ e("span", { style: { height: l * 4 / 7, width: l }, children: /* @__PURE__ */ e("svg", { viewBox: "0 0 24 24", width: l * 3 / 7, children: /* @__PURE__ */ c("g", { children: [
-            /* @__PURE__ */ e("circle", { cx: 12, cy: 12, r: 12, fill: "hsl(var(--color-white))" }),
-            /* @__PURE__ */ e("circle", { cx: 12, cy: 12, r: 4, fill: "hsl(var(--color-grey))" })
-          ] }) }) })
-        ] }),
-        /* @__PURE__ */ e("span", { children: p })
-      ]
-    }
-  );
-}
+import { Switch as t } from "../../ui/forms/Switch.js";
 export {
-  C as Switch
+  t as Switch
 };
 //# sourceMappingURL=Switch.js.map

package/molecules/Forms/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sources":["../../../lib/molecules/Forms/Switch.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useValue } from '@/hooks/useValue.js';\nimport './controls.css';\nimport type { FormControlProps } from './FormControl.js';\nimport { useId } from 'react';\n\nexport interface SwitchProps extends FormControlProps<boolean> {\n  width?: number;\n}\n\nexport function Switch(props: SwitchProps) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    className,\n    checked: initialChecked,\n    disabled,\n    width = 56,\n    onChange,\n    tabIndex = 0,\n    children,\n  } = props;\n\n  const { value: checked, setValue } = useValue<boolean>({\n    initialValue: initialChecked,\n    name,\n    onChange,\n  });\n\n  return (\n    <label\n      className={clsx(className, 'relative flex items-center gap-[10px]', {\n        'text-b2': !className?.includes('text-'),\n        'font-semibold': !className?.includes('font-'),\n        'text-grey': disabled,\n        'cursor-pointer': !disabled,\n      })}\n      data-testid=\"SwitchContainer\"\n    >\n      <span className=\"relative\">\n        <input\n          type=\"checkbox\"\n          name={name}\n          tabIndex={tabIndex}\n          checked={checked}\n          disabled={disabled}\n          role=\"switch\"\n          className=\"absolute w-full h-full opacity-0 cursor-pointer\"\n          onChange={() => {\n            if (!disabled) {\n              setValue(!checked);\n            }\n          }}\n          data-name=\"Switch\"\n        />\n\n        <span style={{ height: (width * 4) / 7, width }}>\n          <svg viewBox=\"0 0 24 24\" width={(width * 3) / 7}>\n            <g>\n              <circle cx={12} cy={12} r={12} fill=\"hsl(var(--color-white))\" />\n              <circle cx={12} cy={12} r={4} fill=\"hsl(var(--color-grey))\" />\n            </g>\n          </svg>\n        </span>\n      </span>\n\n      <span>{children}</span>\n    </label>\n  );\n}\n"],"names":["Switch","props","internalId","useId","id","name","className","initialChecked","disabled","width","onChange","tabIndex","children","checked","setValue","useValue","jsxs","clsx","jsx"],"mappings":";;;;;AAUO,SAASA,EAAOC,GAAoB;AACzC,QAAMC,IAAaC,EAAA,GAEb;AAAA,IACJ,IAAAC,IAAKF;AAAA,IACL,MAAAG,IAAOD;AAAA,IACP,WAAAE;AAAA,IACA,SAASC;AAAA,IACT,UAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,UAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,UAAAC;AAAA,EAAA,IACEX,GAEE,EAAE,OAAOY,GAAS,UAAAC,EAAA,IAAaC,EAAkB;AAAA,IACrD,cAAcR;AAAA,IACd,MAAAF;AAAA,IACA,UAAAK;AAAA,EAAA,CACD;AAED,SACE,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKX,GAAW,yCAAyC;AAAA,QAClE,WAAW,CAACA,GAAW,SAAS,OAAO;AAAA,QACvC,iBAAiB,CAACA,GAAW,SAAS,OAAO;AAAA,QAC7C,aAAaE;AAAA,QACb,kBAAkB,CAACA;AAAA,MAAA,CACpB;AAAA,MACD,eAAY;AAAA,MAEZ,UAAA;AAAA,QAAA,gBAAAQ,EAAC,QAAA,EAAK,WAAU,YACd,UAAA;AAAA,UAAA,gBAAAE;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,MAAAb;AAAA,cACA,UAAAM;AAAA,cACA,SAAAE;AAAA,cACA,UAAAL;AAAA,cACA,MAAK;AAAA,cACL,WAAU;AAAA,cACV,UAAU,MAAM;AACd,gBAAKA,KACHM,EAAS,CAACD,CAAO;AAAA,cAErB;AAAA,cACA,aAAU;AAAA,YAAA;AAAA,UAAA;AAAA,4BAGX,QAAA,EAAK,OAAO,EAAE,QAASJ,IAAQ,IAAK,GAAG,OAAAA,EAAA,GACtC,UAAA,gBAAAS,EAAC,OAAA,EAAI,SAAQ,aAAY,OAAQT,IAAQ,IAAK,GAC5C,4BAAC,KAAA,EACC,UAAA;AAAA,YAAA,gBAAAS,EAAC,UAAA,EAAO,IAAI,IAAI,IAAI,IAAI,GAAG,IAAI,MAAK,0BAAA,CAA0B;AAAA,YAC9D,gBAAAA,EAAC,YAAO,IAAI,IAAI,IAAI,IAAI,GAAG,GAAG,MAAK,yBAAA,CAAyB;AAAA,UAAA,EAAA,CAC9D,GACF,EAAA,CACF;AAAA,QAAA,GACF;AAAA,QAEA,gBAAAA,EAAC,UAAM,UAAAN,EAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGtB;"}
+{"version":3,"file":"Switch.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/molecules/Forms/TextField.d.ts

@@ -1,12 +1 @@
-import { UseValueProps } from '../../hooks/useValue';
-import { FormControlProps } from './FormControl.js';
-import { IconicNames, IconicTypes } from '@clubmed/trident-icons';
-export interface TextFieldProps<Value> extends FormControlProps<Value> {
-    description?: string;
-    icon?: IconicNames;
-    iconType?: IconicTypes;
-    errorMessage?: string;
-    dataTestId?: string;
-    formatter?: UseValueProps<Value>['formatter'];
-}
-export declare const TextField: <Value = string>(props: TextFieldProps<Value>) => import("react/jsx-runtime").JSX.Element;
+export * from '../../ui/forms/TextField';

package/molecules/Forms/TextField.js

@@ -1,98 +1,5 @@
-import { jsx as r, jsxs as o } from "react/jsx-runtime";
-import { c as u } from "../../chunks/clsx.js";
-import { useValue as F } from "../../hooks/useValue.js";
-import { useInternalStatus as S } from "../../hooks/useInternalStatus.js";
-import { FormControl as j } from "./FormControl.js";
-import { Icon as i } from "@clubmed/trident-icons";
-import { useId as D } from "react";
-const B = (m) => {
-  const p = D(), {
-    id: t = p,
-    name: a = t,
-    label: x,
-    value: b,
-    description: f,
-    validationStatus: n = "default",
-    icon: s,
-    iconType: d,
-    errorMessage: h,
-    disabled: l = !1,
-    required: c = !1,
-    hideRequiredStar: g,
-    className: v,
-    dataTestId: y = "TextField",
-    onChange: w,
-    formatter: N,
-    ...C
-  } = m, { value: I, setValue: T } = F({ name: a, initialValue: b, onChange: w, formatter: N }), e = S({
-    isDisabled: l,
-    validationStatus: n
-  });
-  return /* @__PURE__ */ r(
-    j,
-    {
-      id: t,
-      label: x,
-      className: v,
-      description: f,
-      dataName: "TextField",
-      dataTestId: y,
-      disabled: l,
-      required: c,
-      hideRequiredStar: g,
-      validationStatus: n,
-      errorMessage: h,
-      children: /* @__PURE__ */ o("div", { className: "relative", children: [
-        /* @__PURE__ */ r(
-          "input",
-          {
-            ...C,
-            id: t,
-            name: a,
-            disabled: l,
-            required: c,
-            value: I,
-            onChange: (k) => T(k.target.value),
-            className: u(
-              "text-b3 rounded-pill w-full border px-20 py-12 font-normal outline-none",
-              {
-                "border-lightGrey focus:border-black active:border-black": e === "default",
-                "ps-[52px]": s,
-                "pe-[52px]": e === "error" || e === "success",
-                "bg-white text-black": e !== "disabled",
-                "bg-pearl text-grey": e === "disabled",
-                "border-red": e === "error",
-                "border-green": e === "success"
-              }
-            ),
-            "aria-label": a
-          }
-        ),
-        /* @__PURE__ */ o(
-          "div",
-          {
-            className: u(
-              "pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12",
-              {
-                "text-grey": e === "disabled",
-                "text-red": e === "error",
-                "text-green": e === "success"
-              }
-            ),
-            children: [
-              s && /* @__PURE__ */ r(i, { name: s, width: "24px" }),
-              /* @__PURE__ */ o("span", { className: "ms-auto flex gap-x-8", children: [
-                e === "error" && /* @__PURE__ */ r(i, { name: "CrossDefault", width: "24px", type: d }),
-                e === "success" && /* @__PURE__ */ r(i, { name: "CheckDefault", width: "24px", type: d })
-              ] })
-            ]
-          }
-        )
-      ] })
-    }
-  );
-};
+import { TextField as r } from "../../ui/forms/TextField.js";
 export {
-  B as TextField
+  r as TextField
 };
 //# sourceMappingURL=TextField.js.map

package/molecules/Forms/TextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","sources":["../../../lib/molecules/Forms/TextField.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useValue, type UseValueProps } from '@/hooks/useValue';\nimport { useInternalStatus } from '@/hooks/useInternalStatus';\nimport { FormControl, type FormControlProps } from './FormControl.js';\nimport { Icon, type IconicNames, type IconicTypes } from '@clubmed/trident-icons';\nimport { useId } from 'react';\n\nexport interface TextFieldProps<Value> extends FormControlProps<Value> {\n  description?: string;\n  icon?: IconicNames;\n  iconType?: IconicTypes;\n  errorMessage?: string;\n  dataTestId?: string;\n  formatter?: UseValueProps<Value>['formatter'];\n}\n\nexport const TextField = <Value = string,>(props: TextFieldProps<Value>) => {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    label,\n    value: initialValue,\n    description,\n    validationStatus = 'default',\n    icon,\n    iconType,\n    errorMessage,\n    disabled = false,\n    required = false,\n    hideRequiredStar,\n    className,\n    dataTestId = 'TextField',\n    onChange,\n    formatter,\n    ...rest\n  } = props;\n\n  const { value, setValue } = useValue<Value>({ name, initialValue, onChange, formatter });\n  const internalStatus = useInternalStatus({\n    isDisabled: disabled,\n    validationStatus,\n  });\n\n  return (\n    <FormControl\n      id={id}\n      label={label}\n      className={className}\n      description={description}\n      dataName=\"TextField\"\n      dataTestId={dataTestId}\n      disabled={disabled}\n      required={required}\n      hideRequiredStar={hideRequiredStar}\n      validationStatus={validationStatus}\n      errorMessage={errorMessage}\n    >\n      <div className=\"relative\">\n        <input\n          {...rest}\n          id={id}\n          name={name}\n          disabled={disabled}\n          required={required}\n          value={value as any}\n          onChange={(e) => setValue(e.target.value as Value)}\n          className={clsx(\n            'text-b3 rounded-pill w-full border px-20 py-12 font-normal outline-none',\n            {\n              'border-lightGrey focus:border-black active:border-black':\n                internalStatus === 'default',\n              'ps-[52px]': icon,\n              'pe-[52px]': internalStatus === 'error' || internalStatus === 'success',\n              'bg-white text-black': internalStatus !== 'disabled',\n              'bg-pearl text-grey': internalStatus === 'disabled',\n              'border-red': internalStatus === 'error',\n              'border-green': internalStatus === 'success',\n            },\n          )}\n          aria-label={name}\n        />\n\n        <div\n          className={clsx(\n            'pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12',\n            {\n              'text-grey': internalStatus === 'disabled',\n              'text-red': internalStatus === 'error',\n              'text-green': internalStatus === 'success',\n            },\n          )}\n        >\n          {icon && <Icon name={icon} width=\"24px\" />}\n\n          <span className=\"ms-auto flex gap-x-8\">\n            {internalStatus === 'error' && (\n              <Icon name=\"CrossDefault\" width=\"24px\" type={iconType} />\n            )}\n\n            {internalStatus === 'success' && (\n              <Icon name=\"CheckDefault\" width=\"24px\" type={iconType} />\n            )}\n          </span>\n        </div>\n      </div>\n    </FormControl>\n  );\n};\n"],"names":["TextField","props","internalId","useId","id","name","label","initialValue","description","validationStatus","icon","iconType","errorMessage","disabled","required","hideRequiredStar","className","dataTestId","onChange","formatter","rest","value","setValue","useValue","internalStatus","useInternalStatus","jsx","FormControl","jsxs","e","clsx","Icon"],"mappings":";;;;;;;AAgBO,MAAMA,IAAY,CAAkBC,MAAiC;AAC1E,QAAMC,IAAaC,EAAA,GAEb;AAAA,IACJ,IAAAC,IAAKF;AAAA,IACL,MAAAG,IAAOD;AAAA,IACP,OAAAE;AAAA,IACA,OAAOC;AAAA,IACP,aAAAC;AAAA,IACA,kBAAAC,IAAmB;AAAA,IACnB,MAAAC;AAAA,IACA,UAAAC;AAAA,IACA,cAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,UAAAC,IAAW;AAAA,IACX,kBAAAC;AAAA,IACA,WAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDnB,GAEE,EAAE,OAAAoB,GAAO,UAAAC,EAAA,IAAaC,EAAgB,EAAE,MAAAlB,GAAM,cAAAE,GAAc,UAAAW,GAAU,WAAAC,GAAW,GACjFK,IAAiBC,EAAkB;AAAA,IACvC,YAAYZ;AAAA,IACZ,kBAAAJ;AAAA,EAAA,CACD;AAED,SACE,gBAAAiB;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,IAAAvB;AAAA,MACA,OAAAE;AAAA,MACA,WAAAU;AAAA,MACA,aAAAR;AAAA,MACA,UAAS;AAAA,MACT,YAAAS;AAAA,MACA,UAAAJ;AAAA,MACA,UAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,kBAAAN;AAAA,MACA,cAAAG;AAAA,MAEA,UAAA,gBAAAgB,EAAC,OAAA,EAAI,WAAU,YACb,UAAA;AAAA,QAAA,gBAAAF;AAAA,UAAC;AAAA,UAAA;AAAA,YACE,GAAGN;AAAA,YACJ,IAAAhB;AAAA,YACA,MAAAC;AAAA,YACA,UAAAQ;AAAA,YACA,UAAAC;AAAA,YACA,OAAAO;AAAA,YACA,UAAU,CAACQ,MAAMP,EAASO,EAAE,OAAO,KAAc;AAAA,YACjD,WAAWC;AAAA,cACT;AAAA,cACA;AAAA,gBACE,2DACEN,MAAmB;AAAA,gBACrB,aAAad;AAAA,gBACb,aAAac,MAAmB,WAAWA,MAAmB;AAAA,gBAC9D,uBAAuBA,MAAmB;AAAA,gBAC1C,sBAAsBA,MAAmB;AAAA,gBACzC,cAAcA,MAAmB;AAAA,gBACjC,gBAAgBA,MAAmB;AAAA,cAAA;AAAA,YACrC;AAAA,YAEF,cAAYnB;AAAA,UAAA;AAAA,QAAA;AAAA,QAGd,gBAAAuB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWE;AAAA,cACT;AAAA,cACA;AAAA,gBACE,aAAaN,MAAmB;AAAA,gBAChC,YAAYA,MAAmB;AAAA,gBAC/B,cAAcA,MAAmB;AAAA,cAAA;AAAA,YACnC;AAAA,YAGD,UAAA;AAAA,cAAAd,KAAQ,gBAAAgB,EAACK,GAAA,EAAK,MAAMrB,GAAM,OAAM,QAAO;AAAA,cAExC,gBAAAkB,EAAC,QAAA,EAAK,WAAU,wBACb,UAAA;AAAA,gBAAAJ,MAAmB,6BACjBO,GAAA,EAAK,MAAK,gBAAe,OAAM,QAAO,MAAMpB,EAAA,CAAU;AAAA,gBAGxDa,MAAmB,aAClB,gBAAAE,EAACK,GAAA,EAAK,MAAK,gBAAe,OAAM,QAAO,MAAMpB,EAAA,CAAU;AAAA,cAAA,EAAA,CAE3D;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"TextField.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/molecules/HamburgerIcon.d.ts

@@ -1,6 +1 @@
-import { ComponentPropsWithoutRef, FunctionComponent } from 'react';
-interface Props extends ComponentPropsWithoutRef<'span'> {
-    isActive?: boolean;
-}
-export declare const HamburgerIcon: FunctionComponent<Props>;
-export {};
+export * from '../ui/HamburgerIcon';