@veritone-ce/design-system 2.0.8 → 2.1.1

package/dist/cjs/Drawer/components.js

@@ -0,0 +1,219 @@
+'use strict';
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var react = require('@floating-ui/react');
+var styles_module = require('./styles.module.scss.js');
+var state = require('./state.js');
+require('color2k');
+require('../styles/css-vars.js');
+var cx = require('../styles/cx.js');
+require('../styles/defaultTheme.js');
+require('@mui/system');
+require('../styles/styled.js');
+var index$1 = require('../Button/index.js');
+var index = require('../Typography/index.js');
+var index$2 = require('../IconButton/index.js');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const Drawer = React__namespace.forwardRef(function Drawer2({
+  children,
+  portalEl,
+  style,
+  className,
+  overlayStyle,
+  overlayClassName,
+  lockScroll = true,
+  "data-testid": dataTestId,
+  ...options
+}, propRef) {
+  const drawer = state.useDrawer(options);
+  const ref = react.useMergeRefs([drawer.context.refs.setFloating, propRef]);
+  let content = null;
+  if (drawer.context.open) {
+    content = /* @__PURE__ */ jsxRuntime.jsx(react.FloatingPortal, { root: portalEl, children: /* @__PURE__ */ jsxRuntime.jsx(
+      react.FloatingOverlay,
+      {
+        style: overlayStyle,
+        className: cx.cx(styles_module.default["drawer-overlay"], overlayClassName),
+        lockScroll,
+        children: /* @__PURE__ */ jsxRuntime.jsx(react.FloatingFocusManager, { context: drawer.context, children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref,
+            "aria-labelledby": drawer.labelId,
+            "aria-describedby": drawer.descriptionId,
+            ...drawer.getFloatingProps(),
+            "data-testid": dataTestId,
+            style,
+            className: cx.cx(styles_module.default["drawer"], className),
+            children
+          }
+        ) })
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(state.DrawerContext.Provider, { value: drawer, children: content });
+});
+const DrawerStart = React__namespace.forwardRef(
+  function DrawerStart2({ children, ...props }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        ...props,
+        className: cx.cx(styles_module.default["drawer-start"], props.className),
+        children
+      }
+    );
+  }
+);
+const DrawerContent = React__namespace.forwardRef(function DrawerContent2({ children, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...props,
+      ref,
+      className: cx.cx(styles_module.default["drawer-content"], props.className),
+      children
+    }
+  );
+});
+const DrawerEnd = React__namespace.forwardRef(
+  function DrawerEnd2({ children, ...props }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        ...props,
+        className: cx.cx(styles_module.default["drawer-end"], props.className),
+        children
+      }
+    );
+  }
+);
+const DrawerTitle = React__namespace.forwardRef(function DrawerTitle2({ children, ...props }, ref) {
+  const { setLabelId } = state.useDrawerContext();
+  const id = React__namespace.useId();
+  React__namespace.useLayoutEffect(() => {
+    setLabelId(id);
+    return () => setLabelId(void 0);
+  }, [id, setLabelId]);
+  return /* @__PURE__ */ jsxRuntime.jsx(DrawerStart, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    index.default,
+    {
+      variant: "title",
+      ref,
+      id,
+      color: "primary",
+      ...props,
+      className: cx.cx(styles_module.default["drawer-title"], props.className),
+      children
+    }
+  ) });
+});
+const DrawerTypography = React__namespace.forwardRef(function DrawerTypography2({ children, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    index.default,
+    {
+      variant: "paragraph2",
+      color: "primary",
+      ...props,
+      ref,
+      className: cx.cx(styles_module.default["drawer-typography"], props.className),
+      children
+    }
+  );
+});
+const DrawerDescription = React__namespace.forwardRef(function DrawerDescription2({ children, ...props }, ref) {
+  const { setDescriptionId } = state.useDrawerContext();
+  const id = React__namespace.useId();
+  React__namespace.useLayoutEffect(() => {
+    setDescriptionId(id);
+    return () => setDescriptionId(void 0);
+  }, [id, setDescriptionId]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DrawerTypography,
+    {
+      variant: "paragraph2",
+      color: "primary",
+      ...props,
+      ref,
+      id,
+      children
+    }
+  );
+});
+const DrawerActions = React__namespace.forwardRef(function DrawerActions2({ children, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DrawerEnd, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...props,
+      ref,
+      className: cx.cx(styles_module.default["drawer-actions"], props.className),
+      children
+    }
+  ) });
+});
+const DrawerCloseButton = React__namespace.forwardRef(function DrawerCloseButton2(props, ref) {
+  const { dismiss } = state.useDrawerContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    index$1.default,
+    {
+      variant: "tertiary",
+      ...props,
+      ref,
+      onClick: (e) => {
+        dismiss();
+        props.onClick?.(e);
+      }
+    }
+  );
+});
+const DrawerCloseIconButton = React__namespace.forwardRef(function DrawerCloseIconButton2(props, ref) {
+  const { dismiss } = state.useDrawerContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    index$2.default,
+    {
+      ...props,
+      ref,
+      onClick: (e) => {
+        dismiss();
+        props.onClick?.(e);
+      }
+    }
+  );
+});
+
+exports.DrawerActions = DrawerActions;
+exports.DrawerCloseButton = DrawerCloseButton;
+exports.DrawerCloseIconButton = DrawerCloseIconButton;
+exports.DrawerContent = DrawerContent;
+exports.DrawerDescription = DrawerDescription;
+exports.DrawerEnd = DrawerEnd;
+exports.DrawerStart = DrawerStart;
+exports.DrawerTitle = DrawerTitle;
+exports.DrawerTypography = DrawerTypography;
+exports.default = Drawer;

package/dist/cjs/Drawer/factory.js

@@ -0,0 +1,16 @@
+'use strict';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var components = require('./components.js');
+
+function createDrawerComponent({ portalEl }) {
+  return React.forwardRef(
+    function ScopedDrawer(props, ref) {
+      return /* @__PURE__ */ jsxRuntime.jsx(components.default, { portalEl, ref, ...props });
+    }
+  );
+}
+
+exports.createDrawerComponent = createDrawerComponent;

package/dist/cjs/Drawer/state.js

@@ -0,0 +1,63 @@
+'use strict';
+'use client';
+'use strict';
+
+var React = require('react');
+var react = require('@floating-ui/react');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+function useDrawer({ open, onDismiss: dismissDrawer }) {
+  const [labelId, setLabelId] = React__namespace.useState();
+  const [descriptionId, setDescriptionId] = React__namespace.useState();
+  const data = react.useFloating({
+    open,
+    onOpenChange: (newOpen) => !newOpen && dismissDrawer()
+  });
+  const context = data.context;
+  const dismiss = react.useDismiss(context, { outsidePressEvent: "mousedown" });
+  const role = react.useRole(context);
+  const interactions = react.useInteractions([dismiss, role]);
+  return React__namespace.useMemo(
+    () => ({
+      open,
+      dismiss: dismissDrawer,
+      ...interactions,
+      ...data,
+      labelId,
+      descriptionId,
+      setLabelId,
+      setDescriptionId
+    }),
+    [open, dismissDrawer, interactions, data, labelId, descriptionId]
+  );
+}
+const DrawerContext = React__namespace.createContext(null);
+const useDrawerContext = () => {
+  const context = React__namespace.useContext(DrawerContext);
+  if (context == null) {
+    throw new Error("Drawer components must be wrapped in <Drawer />");
+  }
+  return context;
+};
+
+exports.DrawerContext = DrawerContext;
+exports.useDrawer = useDrawer;
+exports.useDrawerContext = useDrawerContext;

package/dist/cjs/Drawer/styles.module.scss.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var modules_efc4e723 = {"drawer-overlay":"vt_ce_Drawer_drawerOverlay__6d49b031","drawer":"vt_ce_Drawer_drawer__6d49b031","drawer-start":"vt_ce_Drawer_drawerStart__6d49b031","drawer-end":"vt_ce_Drawer_drawerEnd__6d49b031","drawer-content":"vt_ce_Drawer_drawerContent__6d49b031","drawer-title":"vt_ce_Drawer_drawerTitle__6d49b031","drawer-typography":"vt_ce_Drawer_drawerTypography__6d49b031","drawer-actions":"vt_ce_Drawer_drawerActions__6d49b031"};
+
+exports.default = modules_efc4e723;

package/dist/cjs/GlobalStyles/index.js

@@ -0,0 +1,23 @@
+'use strict';
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var system = require('@mui/system');
+var defaultTheme = require('../styles/defaultTheme.js');
+var identifier = require('../styles/identifier.js');
+
+function GlobalStyles(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    system.GlobalStyles,
+    {
+      ...props,
+      defaultTheme: defaultTheme.default,
+      themeId: identifier.default
+    }
+  );
+}
+
+exports.default = GlobalStyles;

package/dist/cjs/Icon/factory.js

@@ -0,0 +1,24 @@
+'use strict';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var iconsMaterial = require('@mui/icons-material');
+var wrappers = require('./wrappers.js');
+
+const DefaultIconFallback = wrappers.adaptMuiSvgIcon(iconsMaterial.BrokenImageOutlined);
+function createIconComponent({
+  iconMap = {},
+  fallback = DefaultIconFallback
+}) {
+  return React.forwardRef(function Icon({ name, ...genericProps }, ref) {
+    const ResolvedIcon = React.useMemo(
+      () => iconMap[name] ?? fallback,
+      [name]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(ResolvedIcon, { ref, name, ...genericProps });
+  });
+}
+
+exports.DefaultIconFallback = DefaultIconFallback;
+exports.createIconComponent = createIconComponent;

package/dist/cjs/Icon/internal.js

@@ -0,0 +1,59 @@
+'use strict';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var factory = require('./factory.js');
+var iconsMaterial = require('@mui/icons-material');
+var wrappers = require('./wrappers.js');
+
+const DSIcon = factory.createIconComponent({
+  iconMap: {
+    navigateNext: wrappers.adaptMuiSvgIcon(iconsMaterial.NavigateNext),
+    navigateBefore: wrappers.adaptMuiSvgIcon(iconsMaterial.NavigateBefore),
+    close: wrappers.adaptMuiSvgIcon(iconsMaterial.Close),
+    success: wrappers.adaptSvgIcon(
+      /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM7 12.2656L10.5714 16.4642L17 8.90665L15.9929 7.71423L10.5714 14.0878L8.00714 11.0816L7 12.2656Z",
+          fill: "currentColor"
+        }
+      ) })
+    ),
+    info: wrappers.adaptSvgIcon(
+      /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM13.86 17.0623L14.0162 16.4231C13.9358 16.461 13.8055 16.5048 13.6256 16.5545C13.4457 16.6042 13.2847 16.6291 13.1427 16.6291C12.8396 16.6291 12.6266 16.5794 12.5035 16.4799C12.3804 16.3805 12.3188 16.1935 12.3188 15.9189C12.3188 15.81 12.3377 15.649 12.3756 15.4359C12.4135 15.2228 12.4561 15.0334 12.5035 14.8677L13.0859 12.801C13.1427 12.6116 13.1817 12.4032 13.203 12.176C13.2243 11.9487 13.235 11.7901 13.235 11.7001C13.235 11.2645 13.0823 10.9106 12.7769 10.6383C12.4715 10.3661 12.0371 10.2299 11.4736 10.2299C11.1611 10.2299 10.8297 10.2856 10.4793 10.3969C10.1289 10.5081 9.762 10.6419 9.37847 10.7981L9.22222 11.4373C9.33586 11.3947 9.47198 11.3497 9.6306 11.3024C9.78922 11.255 9.94428 11.2314 10.0958 11.2314C10.4036 11.2314 10.6119 11.2834 10.7208 11.3876C10.8297 11.4918 10.8842 11.6764 10.8842 11.9416C10.8842 12.0884 10.8664 12.2505 10.8309 12.4281C10.7954 12.6057 10.7516 12.7939 10.6995 12.9927L10.1171 15.0666C10.065 15.2844 10.0271 15.4797 10.0035 15.6525C9.9798 15.8253 9.96796 15.9946 9.96796 16.1603C9.96796 16.5865 10.1254 16.938 10.4403 17.215C10.7551 17.492 11.1966 17.6305 11.7648 17.6305C12.1341 17.6305 12.4585 17.582 12.7378 17.4849C13.0172 17.3878 13.3912 17.247 13.86 17.0623ZM13.757 8.671C14.0293 8.41769 14.1654 8.11111 14.1654 7.75126C14.1654 7.39141 14.0293 7.08365 13.757 6.82797C13.4848 6.57228 13.1569 6.44444 12.7734 6.44444C12.3898 6.44444 12.0608 6.57228 11.7861 6.82797C11.5115 7.08365 11.3742 7.39141 11.3742 7.75126C11.3742 8.11111 11.5115 8.41769 11.7861 8.671C12.0608 8.92432 12.3898 9.05097 12.7734 9.05097C13.1569 9.05097 13.4848 8.92432 13.757 8.671Z",
+          fill: "currentColor"
+        }
+      ) })
+    ),
+    warning: wrappers.adaptSvgIcon(
+      /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M19.075 19.075C20.8848 17.2651 22 14.7605 22 12C22 9.23949 20.8848 6.73492 19.075 4.92505C17.2651 3.11517 14.7605 2 12 2C9.23949 2 6.73492 3.11517 4.92505 4.92505C3.11517 6.73492 2 9.23949 2 12C2 14.7605 3.11517 17.2651 4.92505 19.075C6.73492 20.8848 9.23949 22 12 22C14.7605 22 17.2651 20.8848 19.075 19.075ZM13.3528 15.8574C13.3528 15.1079 12.7495 14.5046 12 14.5046C11.2505 14.5046 10.6289 15.1079 10.6289 15.8574C10.6289 16.6069 11.2505 17.2285 12 17.2285C12.7495 17.2285 13.3528 16.6069 13.3528 15.8574ZM12 13.1335C11.5064 13.1335 11.1408 12.7313 11.0859 12.2194L10.6289 8.1426C10.5558 7.42962 11.3053 6.77148 12 6.77148C12.6947 6.77148 13.4442 7.42962 13.3528 8.1426L12.9141 12.2194C12.8592 12.7313 12.4936 13.1335 12 13.1335Z",
+          fill: "currentColor"
+        }
+      ) })
+    ),
+    error: wrappers.adaptSvgIcon(
+      /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M19.0711 4.92898C15.1678 1.02575 8.83216 1.02575 4.92893 4.92898C1.0257 8.83221 1.0257 15.1679 4.92893 19.0711C8.83216 22.9743 15.1678 22.9743 19.0711 19.0711C22.9743 15.1679 22.9743 8.83221 19.0711 4.92898ZM14.8284 16.2427L12 13.4143L9.17157 16.2427L7.75736 14.8285L10.5858 12L7.75736 9.17162L9.17157 7.7574L12 10.5858L14.8284 7.7574L16.2426 9.17162L13.4142 12L16.2426 14.8285L14.8284 16.2427Z",
+          fill: "currentColor"
+        }
+      ) })
+    )
+  }
+});
+
+exports.DSIcon = DSIcon;

package/dist/cjs/Icon/styles.module.scss.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var modules_efc4e723 = {"icon":"vt_ce_Icon_icon__5881e2e1"};
+
+exports.default = modules_efc4e723;

package/dist/cjs/Icon/wrappers.js

@@ -0,0 +1,50 @@
+'use strict';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var styles_module = require('./styles.module.scss.js');
+require('color2k');
+require('../styles/css-vars.js');
+var cx = require('../styles/cx.js');
+require('../styles/defaultTheme.js');
+require('@mui/system');
+require('../styles/styled.js');
+
+function adaptMuiSvgIcon(MuiIcon) {
+  return React.forwardRef(
+    function MuiIconWrapper({ size, ...props }, ref) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          ref,
+          "data-size": size,
+          "data-testid": props["data-testid"],
+          style: props.style,
+          className: cx.cx(styles_module.default["icon"], props.className),
+          children: /* @__PURE__ */ jsxRuntime.jsx(MuiIcon, { color: "inherit" })
+        }
+      );
+    }
+  );
+}
+function adaptSvgIcon(svg) {
+  return React.forwardRef(
+    function SVGIconWrapper({ size, ...props }, ref) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          ref,
+          "data-size": size,
+          "data-testid": props["data-testid"],
+          style: props.style,
+          className: cx.cx(styles_module.default["icon"], props.className),
+          children: svg
+        }
+      );
+    }
+  );
+}
+
+exports.adaptMuiSvgIcon = adaptMuiSvgIcon;
+exports.adaptSvgIcon = adaptSvgIcon;

package/dist/cjs/IconButton/index.js

@@ -0,0 +1,41 @@
+'use strict';
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var index = require('../CircularProgress/index.js');
+var styles_module = require('./styles.module.scss.js');
+require('color2k');
+require('../styles/css-vars.js');
+var cx = require('../styles/cx.js');
+require('../styles/defaultTheme.js');
+require('@mui/system');
+require('../styles/styled.js');
+
+const IconButton = React.forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        ref,
+        type: props.type,
+        "data-loading": props.loading ?? false,
+        disabled: props.loading || props.disabled,
+        "data-destructive": props.destructive ?? false,
+        onClick: props.onClick,
+        "data-testid": props["data-testid"],
+        style: props.style,
+        className: cx.cx(styles_module.default["button"], props.className),
+        children: [
+          props.loading && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["loading-container"], children: /* @__PURE__ */ jsxRuntime.jsx(index.default, { color: "inherit", fillParentHeight: true }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["inner-icon"], children: props.children })
+        ]
+      }
+    );
+  }
+);
+
+exports.default = IconButton;

package/dist/cjs/IconButton/styles.module.scss.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var modules_efc4e723 = {"button":"vt_ce_IconButton_button__b5583457","inner-icon":"vt_ce_IconButton_innerIcon__b5583457","loading-container":"vt_ce_IconButton_loadingContainer__b5583457"};
+
+exports.default = modules_efc4e723;

package/dist/cjs/Input/index.js

@@ -0,0 +1,72 @@
+'use strict';
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var styles_module = require('./styles.module.scss.js');
+require('color2k');
+require('../styles/css-vars.js');
+var cx = require('../styles/cx.js');
+require('../styles/defaultTheme.js');
+require('@mui/system');
+require('../styles/styled.js');
+
+const Input = React.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      "data-testid": props["data-testid"],
+      className: cx.cx(styles_module.default["input"], props.className),
+      style: props.style,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: styles_module.default["label"], children: props.label }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "span",
+          {
+            "data-disabled": props.disabled ?? false,
+            "data-error": props.error !== void 0,
+            className: styles_module.default["inner-input-container"],
+            children: [
+              props.startIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["input-icon"], children: props.startIcon }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  ref,
+                  type: props.type,
+                  name: props.name,
+                  placeholder: props.placeholder,
+                  value: props.value,
+                  disabled: props.disabled,
+                  onChange: props.onChange,
+                  className: styles_module.default["inner-input"]
+                }
+              ),
+              props.endIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["input-icon"], children: props.endIcon })
+            ]
+          }
+        ),
+        props.helpLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["help-label"], children: props.helpLabel }),
+        props.error && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles_module.default["error-label"], children: [
+          /* @__PURE__ */ jsxRuntime.jsx(IndicatorCircle, {}),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: props.error })
+        ] })
+      ]
+    }
+  );
+});
+const IndicatorCircle = () => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    width: "12",
+    height: "12",
+    viewBox: "0 0 12 12",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "6", cy: "6", r: "6", fill: "currentColor" })
+  }
+);
+
+exports.default = Input;

package/dist/cjs/Input/styles.module.scss.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var modules_efc4e723 = {"input":"vt_ce_Input_input__f7983a21","label":"vt_ce_Input_label__f7983a21","inner-input-container":"vt_ce_Input_innerInputContainer__f7983a21","inner-input":"vt_ce_Input_innerInput__f7983a21","input-icon":"vt_ce_Input_inputIcon__f7983a21","help-label":"vt_ce_Input_helpLabel__f7983a21","error-label":"vt_ce_Input_errorLabel__f7983a21"};
+
+exports.default = modules_efc4e723;