@hybridcore/ui 1.6.0 → 1.6.1

package/dist/{IconButton-CHwRQF-g.js → IconButton-_opV1iNK.js}

@@ -1,40 +1,38 @@
-import { a as s, _ as h } from "./objectWithoutPropertiesLoose-DJteAcBH.js";
+import { a as t, _ as h } from "./objectWithoutPropertiesLoose-DJteAcBH.js";
 import * as d from "react";
 import { P as r } from "./index-C__OZmYy.js";
-import { g as z, u as R, c as C, b as B, a as I } from "./useThemeProps-BzzHcQyd.js";
+import { g as z, b as R, s as C, u as B, c as I, a as O } from "./styled-Bsjp3kFh.js";
 import { alpha as g } from "@mui/system";
-import { s as O } from "./styled-eZwjUruw.js";
-import { g as T } from "./createTheme-DYxDnE9u.js";
-import { jsx as x } from "react/jsx-runtime";
-import { B as $ } from "./ButtonBase-2bPw77UP.js";
-import { c as i } from "./capitalize-ciszXJ7R.js";
+import { jsx as T } from "react/jsx-runtime";
+import { B as x, c as $ } from "./ButtonBase-sObABYY2.js";
+import { c as n } from "./capitalize-quqpGCFu.js";
 function k(o) {
-  return T("MuiIconButton", o);
+  return R("MuiIconButton", o);
 }
 const P = z("MuiIconButton", ["root", "disabled", "colorInherit", "colorPrimary", "colorSecondary", "colorError", "colorInfo", "colorSuccess", "colorWarning", "edgeStart", "edgeEnd", "sizeSmall", "sizeMedium", "sizeLarge"]), j = ["edge", "children", "className", "color", "disabled", "disableFocusRipple", "size"], E = (o) => {
   const {
     classes: e,
     disabled: a,
-    color: t,
-    edge: n,
+    color: s,
+    edge: i,
     size: l
   } = o, c = {
-    root: ["root", a && "disabled", t !== "default" && `color${i(t)}`, n && `edge${i(n)}`, `size${i(l)}`]
+    root: ["root", a && "disabled", s !== "default" && `color${n(s)}`, i && `edge${n(i)}`, `size${n(l)}`]
   };
-  return I(c, k, e);
-}, M = O($, {
+  return O(c, k, e);
+}, M = C(x, {
   name: "MuiIconButton",
   slot: "Root",
   overridesResolver: (o, e) => {
     const {
       ownerState: a
     } = o;
-    return [e.root, a.color !== "default" && e[`color${i(a.color)}`], a.edge && e[`edge${i(a.edge)}`], e[`size${i(a.size)}`]];
+    return [e.root, a.color !== "default" && e[`color${n(a.color)}`], a.edge && e[`edge${n(a.edge)}`], e[`size${n(a.size)}`]];
   }
 })(({
   theme: o,
   ownerState: e
-}) => s({
+}) => t({
   textAlign: "center",
   flex: "0 0 auto",
   fontSize: o.typography.pxToRem(24),
@@ -63,14 +61,14 @@ const P = z("MuiIconButton", ["root", "disabled", "colorInherit", "colorPrimary"
   ownerState: e
 }) => {
   var a;
-  const t = (a = (o.vars || o).palette) == null ? void 0 : a[e.color];
-  return s({}, e.color === "inherit" && {
+  const s = (a = (o.vars || o).palette) == null ? void 0 : a[e.color];
+  return t({}, e.color === "inherit" && {
     color: "inherit"
-  }, e.color !== "inherit" && e.color !== "default" && s({
-    color: t == null ? void 0 : t.main
+  }, e.color !== "inherit" && e.color !== "default" && t({
+    color: s == null ? void 0 : s.main
   }, !e.disableRipple && {
-    "&:hover": s({}, t && {
-      backgroundColor: o.vars ? `rgba(${t.mainChannel} / ${o.vars.palette.action.hoverOpacity})` : g(t.main, o.palette.action.hoverOpacity)
+    "&:hover": t({}, s && {
+      backgroundColor: o.vars ? `rgba(${s.mainChannel} / ${o.vars.palette.action.hoverOpacity})` : g(s.main, o.palette.action.hoverOpacity)
     }, {
       // Reset on touch devices, it doesn't add specificity
       "@media (hover: none)": {
@@ -90,26 +88,26 @@ const P = z("MuiIconButton", ["root", "disabled", "colorInherit", "colorPrimary"
     }
   });
 }), N = /* @__PURE__ */ d.forwardRef(function(e, a) {
-  const t = R({
+  const s = B({
     props: e,
     name: "MuiIconButton"
   }), {
-    edge: n = !1,
+    edge: i = !1,
     children: l,
     className: c,
     color: b = "default",
     disabled: p = !1,
     disableFocusRipple: u = !1,
     size: m = "medium"
-  } = t, v = h(t, j), f = s({}, t, {
-    edge: n,
+  } = s, v = h(s, j), f = t({}, s, {
+    edge: i,
     color: b,
     disabled: p,
     disableFocusRipple: u,
     size: m
   }), y = E(f);
-  return /* @__PURE__ */ x(M, s({
-    className: C(y.root, c),
+  return /* @__PURE__ */ T(M, t({
+    className: I(y.root, c),
     centerRipple: !0,
     focusRipple: !u,
     disabled: p,
@@ -127,7 +125,7 @@ process.env.NODE_ENV !== "production" && (N.propTypes = {
   /**
    * The icon to display.
    */
-  children: B(r.node, (o) => d.Children.toArray(o.children).some((a) => /* @__PURE__ */ d.isValidElement(a) && a.props.onClick) ? new Error(["MUI: You are providing an onClick event listener to a child of a button element.", "Prefer applying it to the IconButton directly.", "This guarantees that the whole <button> will be responsive to click events."].join(`
+  children: $(r.node, (o) => d.Children.toArray(o.children).some((a) => /* @__PURE__ */ d.isValidElement(a) && a.props.onClick) ? new Error(["MUI: You are providing an onClick event listener to a child of a button element.", "Prefer applying it to the IconButton directly.", "This guarantees that the whole <button> will be responsive to click events."].join(`
 `)) : null),
   /**
    * Override or extend the styles applied to the component.

package/dist/{InputAdornment-DLxWUE6H.js → InputAdornment-C7PEvvYr.js}

@@ -1,24 +1,22 @@
 import { a as u, _ as I } from "./objectWithoutPropertiesLoose-DJteAcBH.js";
 import * as b from "react";
 import { P as e } from "./index-C__OZmYy.js";
-import { g as x, u as A, c as C, a as N } from "./useThemeProps-BzzHcQyd.js";
-import { u as L, F as O } from "./useFormControl-CatNKXAi.js";
-import { s as R } from "./styled-eZwjUruw.js";
-import { g as _ } from "./createTheme-DYxDnE9u.js";
+import { g as x, b as A, s as C, u as N, c as L, a as O } from "./styled-Bsjp3kFh.js";
+import { u as R, a as _ } from "./InputLabel-rEwwnD4_.js";
 import { jsx as l, jsxs as j } from "react/jsx-runtime";
-import { T as z } from "./Typography-CxbneZy_.js";
-import { c as v } from "./capitalize-ciszXJ7R.js";
-function F(t) {
-  return _("MuiInputAdornment", t);
+import { T as z } from "./Typography-B-Z5Y0Xq.js";
+import { c as v } from "./capitalize-quqpGCFu.js";
+function M(t) {
+  return A("MuiInputAdornment", t);
 }
 const y = x("MuiInputAdornment", ["root", "filled", "standard", "outlined", "positionStart", "positionEnd", "disablePointerEvents", "hiddenLabel", "sizeSmall"]);
 var g;
-const M = ["children", "className", "component", "disablePointerEvents", "disableTypography", "position", "variant"], U = (t, o) => {
+const U = ["children", "className", "component", "disablePointerEvents", "disableTypography", "position", "variant"], $ = (t, o) => {
   const {
     ownerState: n
   } = t;
   return [o.root, o[`position${v(n.position)}`], n.disablePointerEvents === !0 && o.disablePointerEvents, o[n.variant]];
-}, $ = (t) => {
+}, F = (t) => {
   const {
     classes: o,
     disablePointerEvents: n,
@@ -29,11 +27,11 @@ const M = ["children", "className", "component", "disablePointerEvents", "disabl
   } = t, d = {
     root: ["root", n && "disablePointerEvents", s && `position${v(s)}`, p, r && "hiddenLabel", a && `size${v(a)}`]
   };
-  return N(d, F, o);
-}, S = R("div", {
+  return O(d, M, o);
+}, S = C("div", {
   name: "MuiInputAdornment",
   slot: "Root",
-  overridesResolver: U
+  overridesResolver: $
 })(({
   theme: t,
   ownerState: o
@@ -60,7 +58,7 @@ const M = ["children", "className", "component", "disablePointerEvents", "disabl
   // Styles applied to the root element if `disablePointerEvents={true}`.
   pointerEvents: "none"
 })), w = /* @__PURE__ */ b.forwardRef(function(o, n) {
-  const r = A({
+  const r = N({
     props: o,
     name: "MuiInputAdornment"
   }), {
@@ -71,7 +69,7 @@ const M = ["children", "className", "component", "disablePointerEvents", "disabl
     disableTypography: E = !1,
     position: f,
     variant: c
-  } = r, P = I(r, M), i = L() || {};
+  } = r, P = I(r, U), i = R() || {};
   let m = c;
   c && i.variant && process.env.NODE_ENV !== "production" && c === i.variant && console.error("MUI: The `InputAdornment` variant infers the variant prop you do not have to provide one."), i && !m && (m = i.variant);
   const h = u({}, r, {
@@ -80,13 +78,13 @@ const M = ["children", "className", "component", "disablePointerEvents", "disabl
     disablePointerEvents: d,
     position: f,
     variant: m
-  }), T = $(h);
-  return /* @__PURE__ */ l(O.Provider, {
+  }), T = F(h);
+  return /* @__PURE__ */ l(_.Provider, {
     value: null,
     children: /* @__PURE__ */ l(S, u({
       as: p,
       ownerState: h,
-      className: C(T.root, a),
+      className: L(T.root, a),
       ref: n
     }, P, {
       children: typeof s == "string" && !E ? /* @__PURE__ */ l(z, {

package/dist/InputLabel-rEwwnD4_.js

@@ -0,0 +1,354 @@
+import { a as l, _ as y } from "./objectWithoutPropertiesLoose-DJteAcBH.js";
+import * as b from "react";
+import { P as o } from "./index-C__OZmYy.js";
+import { g as k, b as C, s as x, u as g, c as O, a as L, r as T } from "./styled-Bsjp3kFh.js";
+import { jsxs as h, jsx as I } from "react/jsx-runtime";
+import { c as E } from "./capitalize-quqpGCFu.js";
+const z = /* @__PURE__ */ b.createContext(void 0);
+process.env.NODE_ENV !== "production" && (z.displayName = "FormControlContext");
+function F() {
+  return b.useContext(z);
+}
+function N({
+  props: r,
+  states: e,
+  muiFormControl: a
+}) {
+  return e.reduce((s, t) => (s[t] = r[t], a && typeof r[t] > "u" && (s[t] = a[t]), s), {});
+}
+function R(r) {
+  return C("MuiFormLabel", r);
+}
+const m = k("MuiFormLabel", ["root", "colorSecondary", "focused", "disabled", "error", "filled", "required", "asterisk"]), j = ["children", "className", "color", "component", "disabled", "error", "filled", "focused", "required"], M = (r) => {
+  const {
+    classes: e,
+    color: a,
+    focused: s,
+    disabled: t,
+    error: c,
+    filled: d,
+    required: f
+  } = r, i = {
+    root: ["root", `color${E(a)}`, t && "disabled", c && "error", d && "filled", s && "focused", f && "required"],
+    asterisk: ["asterisk", c && "error"]
+  };
+  return L(i, R, e);
+}, A = x("label", {
+  name: "MuiFormLabel",
+  slot: "Root",
+  overridesResolver: ({
+    ownerState: r
+  }, e) => l({}, e.root, r.color === "secondary" && e.colorSecondary, r.filled && e.filled)
+})(({
+  theme: r,
+  ownerState: e
+}) => l({
+  color: (r.vars || r).palette.text.secondary
+}, r.typography.body1, {
+  lineHeight: "1.4375em",
+  padding: 0,
+  position: "relative",
+  [`&.${m.focused}`]: {
+    color: (r.vars || r).palette[e.color].main
+  },
+  [`&.${m.disabled}`]: {
+    color: (r.vars || r).palette.text.disabled
+  },
+  [`&.${m.error}`]: {
+    color: (r.vars || r).palette.error.main
+  }
+})), _ = x("span", {
+  name: "MuiFormLabel",
+  slot: "Asterisk",
+  overridesResolver: (r, e) => e.asterisk
+})(({
+  theme: r
+}) => ({
+  [`&.${m.error}`]: {
+    color: (r.vars || r).palette.error.main
+  }
+})), q = /* @__PURE__ */ b.forwardRef(function(e, a) {
+  const s = g({
+    props: e,
+    name: "MuiFormLabel"
+  }), {
+    children: t,
+    className: c,
+    component: d = "label"
+  } = s, f = y(s, j), i = F(), n = N({
+    props: s,
+    muiFormControl: i,
+    states: ["color", "required", "focused", "disabled", "error", "filled"]
+  }), p = l({}, s, {
+    color: n.color || "primary",
+    component: d,
+    disabled: n.disabled,
+    error: n.error,
+    filled: n.filled,
+    focused: n.focused,
+    required: n.required
+  }), u = M(p);
+  return /* @__PURE__ */ h(A, l({
+    as: d,
+    ownerState: p,
+    className: O(u.root, c),
+    ref: a
+  }, f, {
+    children: [t, n.required && /* @__PURE__ */ h(_, {
+      ownerState: p,
+      "aria-hidden": !0,
+      className: u.asterisk,
+      children: [" ", "*"]
+    })]
+  }));
+});
+process.env.NODE_ENV !== "production" && (q.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+  /**
+   * The content of the component.
+   */
+  children: o.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: o.object,
+  /**
+   * @ignore
+   */
+  className: o.string,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+   */
+  color: o.oneOfType([o.oneOf(["error", "info", "primary", "secondary", "success", "warning"]), o.string]),
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: o.elementType,
+  /**
+   * If `true`, the label should be displayed in a disabled state.
+   */
+  disabled: o.bool,
+  /**
+   * If `true`, the label is displayed in an error state.
+   */
+  error: o.bool,
+  /**
+   * If `true`, the label should use filled classes key.
+   */
+  filled: o.bool,
+  /**
+   * If `true`, the input of this label is focused (used by `FormGroup` components).
+   */
+  focused: o.bool,
+  /**
+   * If `true`, the label will indicate that the `input` is required.
+   */
+  required: o.bool,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object])
+});
+function $(r) {
+  return C("MuiInputLabel", r);
+}
+k("MuiInputLabel", ["root", "focused", "disabled", "error", "required", "asterisk", "formControl", "sizeSmall", "shrink", "animated", "standard", "filled", "outlined"]);
+const P = ["disableAnimation", "margin", "shrink", "variant", "className"], W = (r) => {
+  const {
+    classes: e,
+    formControl: a,
+    size: s,
+    shrink: t,
+    disableAnimation: c,
+    variant: d,
+    required: f
+  } = r, n = L({
+    root: ["root", a && "formControl", !c && "animated", t && "shrink", s === "small" && "sizeSmall", d],
+    asterisk: [f && "asterisk"]
+  }, $, e);
+  return l({}, e, n);
+}, w = x(q, {
+  shouldForwardProp: (r) => T(r) || r === "classes",
+  name: "MuiInputLabel",
+  slot: "Root",
+  overridesResolver: (r, e) => {
+    const {
+      ownerState: a
+    } = r;
+    return [{
+      [`& .${m.asterisk}`]: e.asterisk
+    }, e.root, a.formControl && e.formControl, a.size === "small" && e.sizeSmall, a.shrink && e.shrink, !a.disableAnimation && e.animated, e[a.variant]];
+  }
+})(({
+  theme: r,
+  ownerState: e
+}) => l({
+  display: "block",
+  transformOrigin: "top left",
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  maxWidth: "100%"
+}, e.formControl && {
+  position: "absolute",
+  left: 0,
+  top: 0,
+  // slight alteration to spec spacing to match visual spec result
+  transform: "translate(0, 20px) scale(1)"
+}, e.size === "small" && {
+  // Compensation for the `Input.inputSizeSmall` style.
+  transform: "translate(0, 17px) scale(1)"
+}, e.shrink && {
+  transform: "translate(0, -1.5px) scale(0.75)",
+  transformOrigin: "top left",
+  maxWidth: "133%"
+}, !e.disableAnimation && {
+  transition: r.transitions.create(["color", "transform", "max-width"], {
+    duration: r.transitions.duration.shorter,
+    easing: r.transitions.easing.easeOut
+  })
+}, e.variant === "filled" && l({
+  // Chrome's autofill feature gives the input field a yellow background.
+  // Since the input field is behind the label in the HTML tree,
+  // the input field is drawn last and hides the label with an opaque background color.
+  // zIndex: 1 will raise the label above opaque background-colors of input.
+  zIndex: 1,
+  pointerEvents: "none",
+  transform: "translate(12px, 16px) scale(1)",
+  maxWidth: "calc(100% - 24px)"
+}, e.size === "small" && {
+  transform: "translate(12px, 13px) scale(1)"
+}, e.shrink && l({
+  userSelect: "none",
+  pointerEvents: "auto",
+  transform: "translate(12px, 7px) scale(0.75)",
+  maxWidth: "calc(133% - 24px)"
+}, e.size === "small" && {
+  transform: "translate(12px, 4px) scale(0.75)"
+})), e.variant === "outlined" && l({
+  // see comment above on filled.zIndex
+  zIndex: 1,
+  pointerEvents: "none",
+  transform: "translate(14px, 16px) scale(1)",
+  maxWidth: "calc(100% - 24px)"
+}, e.size === "small" && {
+  transform: "translate(14px, 9px) scale(1)"
+}, e.shrink && {
+  userSelect: "none",
+  pointerEvents: "auto",
+  // Theoretically, we should have (8+5)*2/0.75 = 34px
+  // but it feels a better when it bleeds a bit on the left, so 32px.
+  maxWidth: "calc(133% - 32px)",
+  transform: "translate(14px, -9px) scale(0.75)"
+}))), S = /* @__PURE__ */ b.forwardRef(function(e, a) {
+  const s = g({
+    name: "MuiInputLabel",
+    props: e
+  }), {
+    disableAnimation: t = !1,
+    shrink: c,
+    className: d
+  } = s, f = y(s, P), i = F();
+  let n = c;
+  typeof n > "u" && i && (n = i.filled || i.focused || i.adornedStart);
+  const p = N({
+    props: s,
+    muiFormControl: i,
+    states: ["size", "variant", "required"]
+  }), u = l({}, s, {
+    disableAnimation: t,
+    formControl: i,
+    shrink: n,
+    size: p.size,
+    variant: p.variant,
+    required: p.required
+  }), v = W(u);
+  return /* @__PURE__ */ I(w, l({
+    "data-shrink": n,
+    ownerState: u,
+    ref: a,
+    className: O(v.root, d)
+  }, f, {
+    classes: v
+  }));
+});
+process.env.NODE_ENV !== "production" && (S.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+  /**
+   * The content of the component.
+   */
+  children: o.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: o.object,
+  /**
+   * @ignore
+   */
+  className: o.string,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+   */
+  color: o.oneOfType([o.oneOf(["error", "info", "primary", "secondary", "success", "warning"]), o.string]),
+  /**
+   * If `true`, the transition animation is disabled.
+   * @default false
+   */
+  disableAnimation: o.bool,
+  /**
+   * If `true`, the component is disabled.
+   */
+  disabled: o.bool,
+  /**
+   * If `true`, the label is displayed in an error state.
+   */
+  error: o.bool,
+  /**
+   * If `true`, the `input` of this label is focused.
+   */
+  focused: o.bool,
+  /**
+   * If `dense`, will adjust vertical spacing. This is normally obtained via context from
+   * FormControl.
+   */
+  margin: o.oneOf(["dense"]),
+  /**
+   * if `true`, the label will indicate that the `input` is required.
+   */
+  required: o.bool,
+  /**
+   * If `true`, the label is shrunk.
+   */
+  shrink: o.bool,
+  /**
+   * The size of the component.
+   * @default 'normal'
+   */
+  size: o.oneOfType([o.oneOf(["normal", "small"]), o.string]),
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object]),
+  /**
+   * The variant to use.
+   */
+  variant: o.oneOf(["filled", "outlined", "standard"])
+});
+export {
+  q as F,
+  S as I,
+  z as a,
+  N as f,
+  F as u
+};