@mezo-org/mezo-clay 0.1.0-dev.8 → 0.2.0-dev.1

package/dist/components/content-stepper/skeletons.js

@@ -0,0 +1,38 @@
+import { jsx as n } from "react/jsx-runtime";
+import { Block as r } from "baseui/block";
+import { useStyletron as i } from "baseui";
+import o from "../skeleton/skeleton.js";
+function l() {
+  const [t, e] = i();
+  return /* @__PURE__ */ n(r, { className: t({ marginBottom: e.sizing.scale600 }), children: /* @__PURE__ */ n(o, { animation: !0, height: e.sizing.scale900, width: "40%" }) });
+}
+function h() {
+  const [, t] = i();
+  return /* @__PURE__ */ n(o, { animation: !0, height: t.sizing.scale800, width: "100%" });
+}
+function p() {
+  const [t, e] = i();
+  return /* @__PURE__ */ n(
+    r,
+    {
+      className: t({
+        display: "flex",
+        justifyContent: "end",
+        marginTop: e.sizing.scale600
+      }),
+      children: /* @__PURE__ */ n(
+        o,
+        {
+          animation: !0,
+          width: e.sizing.scale2400,
+          height: e.sizing.scale1200
+        }
+      )
+    }
+  );
+}
+export {
+  h as ContentStepperBodySkeleton,
+  p as ContentStepperFooterSkeleton,
+  l as ContentStepperHeaderSkeleton
+};

package/dist/components/content-stepper/styled-components.d.ts

@@ -0,0 +1,21 @@
+import { ButtonProps } from '../button';
+import { ButtonIconProps } from '../button-icon';
+export declare const StyledContentStepperRoot: import('styletron-react').StyletronComponent<"div", {}>;
+export declare const StyledContentStepperHeader: import('styletron-react').StyletronComponent<"div", {}>;
+export declare const StyledContentStepperBody: import('styletron-react').StyletronComponent<"div", {}>;
+export declare const StyledContentStepperFooter: import('styletron-react').StyletronComponent<"div", {
+    $withStepCount: boolean;
+}>;
+export declare const StyledContentStepperStepCount: import('styletron-react').StyletronComponent<"div", {}>;
+export declare function ContentStepperCloseButton({ overrides, children, ...props }: ButtonIconProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ContentStepperCloseButton {
+    var displayName: string;
+}
+export declare function ContentStepperPrevButton({ children, ...restProps }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ContentStepperPrevButton {
+    var displayName: string;
+}
+export declare function ContentStepperNextButton({ children, overrides, ...restProps }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ContentStepperNextButton {
+    var displayName: string;
+}

package/dist/components/content-stepper/styled-components.js

@@ -0,0 +1,117 @@
+import { jsx as r } from "react/jsx-runtime";
+import { styled as n, useStyletron as l, mergeOverrides as d } from "baseui";
+import p from "../../themes/typography.js";
+import s from "../button/button.js";
+import c from "../button-icon/button-icon.js";
+const g = n("div", () => ({
+  minWidth: "300px"
+}));
+g.displayName = "StyledContentStepperRoot";
+const S = n("div", ({ $theme: t }) => ({
+  position: "relative",
+  paddingTop: t.sizing.scale600,
+  paddingLeft: t.sizing.scale600,
+  paddingRight: "72px",
+  ...p.HeadingXSmall
+}));
+S.displayName = "StyledContentStepperHeader";
+const y = n("div", ({ $theme: t }) => ({
+  paddingLeft: t.sizing.scale600,
+  paddingRight: t.sizing.scale600,
+  paddingTop: t.sizing.scale300,
+  paddingBottom: t.sizing.scale600,
+  ...p.ParagraphMedium
+}));
+y.displayName = "StyledContentStepperBody";
+const m = n("div", ({ $withStepCount: t, $theme: e }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: t ? "space-between" : "end",
+  paddingLeft: e.sizing.scale600,
+  paddingRight: e.sizing.scale600,
+  paddingBottom: e.sizing.scale600
+}));
+m.displayName = "StyledContentStepperFooter";
+const u = n("div", ({ $theme: t }) => ({
+  ...p.ParagraphSmall,
+  margin: 0,
+  color: t.colors.contentSecondary
+}));
+u.displayName = "StyledContentStepperStepCount";
+function C({
+  overrides: t = {},
+  children: e,
+  ...i
+}) {
+  const [, o] = l(), a = {
+    backgroundColor: "transparent",
+    color: o.colors.contentPrimary,
+    boxShadow: "none"
+  };
+  return /* @__PURE__ */ r(
+    c,
+    {
+      kind: "tertiary",
+      ...i,
+      overrides: d(
+        {
+          BaseButton: {
+            style: () => ({
+              position: "absolute",
+              top: "7px",
+              // Vertically centers to the title
+              right: o.sizing.scale300,
+              ":hover": a,
+              ":active": a
+            })
+          }
+        },
+        t
+      ),
+      children: e
+    }
+  );
+}
+C.displayName = "ContentStepperCloseButton";
+function B({
+  children: t,
+  ...e
+}) {
+  return /* @__PURE__ */ r(s, { kind: "tertiary", size: "small", ...e, children: t });
+}
+B.displayName = "ContentStepperPrevButton";
+function v({
+  children: t,
+  overrides: e,
+  ...i
+}) {
+  return /* @__PURE__ */ r(
+    s,
+    {
+      size: "small",
+      overrides: d(
+        {
+          BaseButton: {
+            style: ({ $theme: o }) => ({
+              marginLeft: o.sizing.scale600
+            })
+          }
+        },
+        e
+      ),
+      ...i,
+      children: t
+    }
+  );
+}
+v.displayName = "ContentStepperNextButton";
+export {
+  C as ContentStepperCloseButton,
+  v as ContentStepperNextButton,
+  B as ContentStepperPrevButton,
+  y as StyledContentStepperBody,
+  m as StyledContentStepperFooter,
+  S as StyledContentStepperHeader,
+  g as StyledContentStepperRoot,
+  u as StyledContentStepperStepCount
+};

package/dist/components/divider/index.js

@@ -0,0 +1,30 @@
+import { jsx as i } from "react/jsx-runtime";
+import { SIZE as n } from "baseui/divider";
+import { useStyletron as d } from "baseui";
+const t = n;
+function s(r, o) {
+  return o === t.module ? r.sizing.scale300 : o === t.section ? r.sizing.scale0 : "1px";
+}
+function m({ $size: r }) {
+  const [o, e] = d();
+  return /* @__PURE__ */ i(
+    "hr",
+    {
+      className: o({
+        borderTopWidth: s(e, r),
+        borderTopColor: e.colors.borderOpaque,
+        borderTopStyle: "solid",
+        borderRightWidth: 0,
+        borderBottomWidth: 0,
+        borderLeftWidth: 0,
+        borderRightStyle: "none",
+        borderBottomStyle: "none",
+        borderLeftStyle: "none"
+      })
+    }
+  );
+}
+export {
+  t as DIVIDER_SIZE,
+  m as Divider
+};

package/dist/components/flex-grid/index.js

@@ -0,0 +1,5 @@
+import { FlexGrid as x, FlexGridItem as d } from "baseui/flex-grid";
+export {
+  x as FlexGrid,
+  d as FlexGridItem
+};

package/dist/components/form-control/constants.d.ts

@@ -1 +1 @@
-export { SIZE } from '../input/constants';
+export { SIZE_EXTENDED as SIZE } from '../input/constants';

package/dist/components/form-control/form-control-character-count.js

@@ -0,0 +1,39 @@
+import { jsx as o, jsxs as c } from "react/jsx-runtime";
+import { useStyletron as u } from "baseui";
+import a from "../icons/solid/alert-circle/index.js";
+import { CheckCircle as m } from "../icons/solid/check-circle/index.js";
+function x({
+  value: l,
+  maxLength: e,
+  minLength: i = 0
+}) {
+  const [p, t] = u(), r = l.length, n = r > e, s = i && r >= i && r <= e;
+  function f() {
+    return n ? t.colors.negative : s ? t.colors.positive : t.colors.contentTertiary;
+  }
+  return /* @__PURE__ */ o(
+    "span",
+    {
+      className: p({
+        display: "flex",
+        alignItems: "center",
+        color: f(),
+        svg: {
+          position: "relative",
+          top: "1px",
+          marginRight: "4px"
+        }
+      }),
+      children: n ? /* @__PURE__ */ c("span", { children: [
+        /* @__PURE__ */ o(a, { size: "14px" }),
+        `${-(e - r)} over`
+      ] }) : s ? /* @__PURE__ */ c("span", { children: [
+        /* @__PURE__ */ o(m, { size: "14px" }),
+        `${e - r} left`
+      ] }) : `${r}/${e}`
+    }
+  );
+}
+export {
+  x as default
+};

package/dist/components/form-control/form-control.d.ts

@@ -1,2 +1,2 @@
 import { FormControlProps } from './types';
-export default function FormControl({ size, label, caption, disabled, error, positive, htmlFor, children, counter, overrides, minLength, maxLength, value, }: FormControlProps): import("react/jsx-runtime").JSX.Element;
+export default function FormControl({ size, label, caption, disabled, error, positive, htmlFor, children, counter, overrides, minLength, maxLength, value, hasInputGroup, }: FormControlProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/form-control/form-control.js

@@ -0,0 +1,103 @@
+import { jsx as a, jsxs as h } from "react/jsx-runtime";
+import { Children as y, Fragment as F } from "react";
+import { FormControl as x } from "baseui/form-control";
+import { useStyletron as b } from "baseui";
+import { LabelMedium as p, LabelSmall as w, LabelLarge as f } from "baseui/typography";
+import S from "./form-control-character-count.js";
+import { getOverrides as j } from "./overrides.js";
+function B({
+  label: r,
+  size: n,
+  maxLength: e,
+  minLength: t,
+  value: o
+}) {
+  if (!r)
+    return null;
+  if (typeof r == "string") {
+    const m = {
+      small: w,
+      medium: p,
+      large: f,
+      xxlarge: f
+    }[n] || p;
+    return /* @__PURE__ */ h(
+      m,
+      {
+        color: "inherit",
+        display: "flex",
+        justifyContent: "space-between",
+        children: [
+          r,
+          e && o && /* @__PURE__ */ a(
+            S,
+            {
+              value: o,
+              maxLength: e,
+              minLength: t
+            }
+          )
+        ]
+      }
+    );
+  }
+  return r;
+}
+function O({
+  size: r = "medium",
+  label: n = null,
+  caption: e,
+  disabled: t,
+  error: o,
+  positive: l,
+  htmlFor: m,
+  children: s,
+  counter: u,
+  overrides: c,
+  minLength: d,
+  maxLength: C,
+  value: L,
+  hasInputGroup: i = !1
+}) {
+  const [g] = b();
+  if (y.count(s) > 1)
+    throw new Error(
+      "FormControl only supports a single child. If you have multiple related inputs, please wrap them in the InputGroup component."
+    );
+  return /* @__PURE__ */ a(
+    i ? "fieldset" : F,
+    {
+      ...i && {
+        className: g({
+          // Reset any fieldset styles set by browser
+          border: 0,
+          paddingBlock: 0,
+          paddingInline: 0
+        })
+      },
+      children: /* @__PURE__ */ a(
+        x,
+        {
+          overrides: j({
+            overrides: c,
+            error: o,
+            positive: l,
+            disabled: t,
+            hasInputGroup: i
+          }),
+          label: B({ label: n, size: r, maxLength: C, minLength: d, value: L }),
+          caption: e,
+          disabled: t,
+          error: o,
+          positive: l,
+          htmlFor: m,
+          counter: u,
+          children: s
+        }
+      )
+    }
+  );
+}
+export {
+  O as default
+};

package/dist/components/form-control/index.js

@@ -0,0 +1,8 @@
+import { default as t } from "./form-control.js";
+import { default as e } from "./form-control-character-count.js";
+import { SIZE_EXTENDED as m } from "../input/constants.js";
+export {
+  m as FORM_CONTROL_SIZE,
+  t as FormControl,
+  e as FormControlCharacterCount
+};

package/dist/components/form-control/overrides.d.ts

@@ -1,6 +1,7 @@
-export declare function getOverrides({ overrides, error, positive, disabled }: {
+export declare function getOverrides({ overrides, error, positive, disabled, hasInputGroup, }: {
     overrides: any;
     error: any;
     positive: any;
     disabled: any;
+    hasInputGroup: any;
 }): import('baseui/helpers/overrides').Overrides<any>;

package/dist/components/form-control/overrides.js

@@ -0,0 +1,65 @@
+import { jsx as c } from "react/jsx-runtime";
+import { mergeOverrides as a } from "baseui";
+import s from "../../themes/typography.js";
+import g from "../icons/solid/alert-circle/index.js";
+import { CheckCircle as m } from "../icons/solid/check-circle/index.js";
+function f({ error: r, positive: t }) {
+  const e = {
+    size: "14px",
+    overrides: {
+      Svg: {
+        style: () => ({
+          marginRight: "4px"
+        })
+      }
+    }
+  };
+  return r ? function() {
+    return /* @__PURE__ */ c(g, { ...e });
+  } : t ? function() {
+    return /* @__PURE__ */ c(m, { ...e });
+  } : null;
+}
+function l(r, t) {
+  return t ? { color: r.colors.contentStateDisabled } : {};
+}
+function d({
+  overrides: r,
+  error: t,
+  positive: e,
+  disabled: o,
+  hasInputGroup: i
+}) {
+  const p = {
+    LabelContainer: {
+      props: {
+        $as: i ? "legend" : "span"
+      }
+    },
+    Label: {
+      props: {
+        $as: i ? "div" : "label"
+      },
+      style: ({ $theme: n }) => ({
+        ...l(n, o)
+      })
+    },
+    Caption: {
+      style: ({ $theme: n }) => ({
+        alignItems: "center",
+        ...s.ParagraphSmall,
+        ...l(n, o)
+      })
+    },
+    CaptionIcon: {
+      component: f({ error: t, positive: e }),
+      style: () => ({
+        marginRight: "3px"
+      })
+    }
+  };
+  return a(p, r);
+}
+export {
+  d as getOverrides
+};

package/dist/components/form-control/types.d.ts

@@ -5,4 +5,5 @@ export interface FormControlProps extends BaseFormControlProps {
     minLength?: number;
     maxLength?: number;
     value?: string;
+    hasInputGroup?: boolean;
 }

package/dist/components/icon/index.d.ts

@@ -0,0 +1,2 @@
+export { Icon } from 'baseui/icon';
+export type { IconProps } from 'baseui/icon';

package/dist/components/icon/index.js

@@ -0,0 +1,4 @@
+import { Icon as c } from "baseui/icon";
+export {
+  c as Icon
+};

package/dist/components/icons/_docs/icon-gallery.d.ts

@@ -0,0 +1,9 @@
+import { ComponentType } from 'react';
+import { Theme } from 'baseui';
+import { IconProps } from 'baseui/icon';
+type IconPropsFn = (name: string, theme: Theme) => IconProps;
+declare function IconGallery({ icons, iconProps, }: {
+    icons: [string, ComponentType<IconProps>][];
+    iconProps?: IconPropsFn;
+}): import("react/jsx-runtime").JSX.Element;
+export default IconGallery;

package/dist/components/icons/index.d.ts

@@ -1,56 +1,2 @@
-export { default as AlertCircle } from './alert-circle';
-export { AlertTriangle, AlertTriangleBadge } from './alert-triangle';
-export { default as Apple } from './apple';
-export { default as ArrowNarrowLeft } from './arrow-narrow-left';
-export { default as ArrowNarrowRight } from './arrow-narrow-right';
-export { Building02 } from './building';
-export { CheckCircle, CheckCircleBadge } from './check-circle';
-export { default as ChevronDown } from './chevron-down';
-export { default as ChevronLeft } from './chevron-left';
-export { default as ChevronRight } from './chevron-right';
-export { default as ChevronSelectorHorizontal } from './chevron-selector-horizontal';
-export { default as ChevronSelectorVertical } from './chevron-selector-vertical';
-export { default as ChevronUp } from './chevron-up';
-export { default as CircleCut } from './circle-cut';
-export { default as Close } from './close';
-export { default as CoinsHand } from './coins-hand';
-export { CoinsSwap02 } from './coins-swap';
-export { Copy03 } from './copy';
-export { Cryptocurrency04 } from './cryptocurrency';
-export { Cube01 } from './cube';
-export { default as Discord } from './discord';
-export { Email01 } from './email';
-export { default as Eye } from './eye';
-export { default as EyeOff } from './eye-off';
-export { default as GasFee } from './gas-fee';
-export { default as Google } from './google';
-export { default as Handshake } from './handshake';
-export { default as Heart } from './heart';
-export { HomeSmile } from './home-smile';
-export { InfoCircle, InfoCircleBadge } from './info-circle';
-export { Lightning01 } from './lightning';
-export { LinkExternal02 } from './link-external';
-export { default as Loading } from './loading';
-export { Lock03 } from './lock';
-export { LogIn01 } from './log-in';
-export { default as Mats } from './mats';
-export { MatsCircle, MatsCircleBlack } from './mats-circle';
-export { default as Menu } from './menu';
-export { default as MessageQuestionCircle } from './message-question-circle';
-export { default as MinusCircle } from './minus-circle';
-export { default as MinusSquare } from './minus-square';
-export { default as Plus } from './plus';
-export { default as PlusCircle } from './plus-circle';
-export { ReceiptCheck } from './receipt';
-export { SearchSmall, SearchMedium, SearchLarge } from './search';
-export { Settings01, Settings03 } from './settings';
-export { ShieldZap } from './shield';
-export { default as Square } from './square';
-export { Star01, Star01Outline, Star05, Star05Outline } from './star';
-export { Tag02 } from './tag';
-export { Trophy02 } from './trophy';
-export { Upload04 } from './upload';
-export { default as User03 } from './user';
-export { Wallet03, Wallet04 } from './wallet';
-export { default as XCircle } from './x-circle';
-export { default as XTwitter } from './x-twitter';
+export * from './line';
+export * from './solid';