@veritone-ce/design-system 2.2.5 → 2.3.0

package/dist/cjs/Dialog/components.js

@@ -48,32 +48,58 @@ const Dialog = React__namespace.forwardRef(function Dialog2({
   overlayStyle,
   overlayClassName,
   lockScroll = true,
+  disableAutoFocus = false,
   "data-testid": dataTestId,
   ...options
 }, propRef) {
   const dialog = state.useDialog(options);
+  const { isMounted: overlayIsMounted, styles: overlayTransitionStyles } = react.useTransitionStyles(dialog.context, {
+    duration: 225,
+    initial: {
+      opacity: 0
+    }
+  });
+  const { isMounted: innerIsMounted, styles: innerTransitionStyles } = react.useTransitionStyles(dialog.context, {
+    duration: 225,
+    initial: {
+      transform: `scale(95%)`
+    }
+  });
   const ref = react.useMergeRefs([dialog.context.refs.setFloating, propRef]);
   let content = null;
-  if (dialog.context.open) {
+  if (overlayIsMounted || innerIsMounted) {
     content = /* @__PURE__ */ jsxRuntime.jsx(react.FloatingPortal, { root: portalEl, children: /* @__PURE__ */ jsxRuntime.jsx(
       react.FloatingOverlay,
       {
-        style: overlayStyle,
+        style: {
+          ...overlayTransitionStyles,
+          ...overlayStyle
+        },
         className: cx.cx(styles_module.default["dialog-overlay"], overlayClassName),
         lockScroll,
-        children: /* @__PURE__ */ jsxRuntime.jsx(react.FloatingFocusManager, { context: dialog.context, children: /* @__PURE__ */ jsxRuntime.jsx(portal.PortalThemeRelay, { children: /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          react.FloatingFocusManager,
           {
-            ref,
-            "aria-labelledby": dialog.labelId,
-            "aria-describedby": dialog.descriptionId,
-            ...dialog.getFloatingProps(),
-            "data-testid": dataTestId,
-            style,
-            className: cx.cx(styles_module.default["dialog"], className),
-            children
+            context: dialog.context,
+            disabled: disableAutoFocus,
+            children: /* @__PURE__ */ jsxRuntime.jsx(portal.PortalThemeRelay, { children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                ref,
+                "aria-labelledby": dialog.labelId,
+                "aria-describedby": dialog.descriptionId,
+                ...dialog.getFloatingProps(),
+                "data-testid": dataTestId,
+                style: {
+                  ...innerTransitionStyles,
+                  ...style
+                },
+                className: cx.cx(styles_module.default["dialog"], className),
+                children
+              }
+            ) })
           }
-        ) }) })
+        )
       }
     ) });
   }

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

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var modules_efc4e723 = {"dialog-overlay":"vt_ce_Dialog_dialogOverlay__19d426a2","dialog":"vt_ce_Dialog_dialog__19d426a2","dialog-start":"vt_ce_Dialog_dialogStart__19d426a2","dialog-end":"vt_ce_Dialog_dialogEnd__19d426a2","dialog-content":"vt_ce_Dialog_dialogContent__19d426a2","dialog-title":"vt_ce_Dialog_dialogTitle__19d426a2","dialog-typography":"vt_ce_Dialog_dialogTypography__19d426a2","dialog-actions":"vt_ce_Dialog_dialogActions__19d426a2"};
+var modules_efc4e723 = {"dialog-overlay":"vt_ce_Dialog_dialogOverlay__36db6625","dialog":"vt_ce_Dialog_dialog__36db6625","dialog-start":"vt_ce_Dialog_dialogStart__36db6625","dialog-end":"vt_ce_Dialog_dialogEnd__36db6625","dialog-content":"vt_ce_Dialog_dialogContent__36db6625","dialog-title":"vt_ce_Dialog_dialogTitle__36db6625","dialog-typography":"vt_ce_Dialog_dialogTypography__36db6625","dialog-actions":"vt_ce_Dialog_dialogActions__36db6625"};
 
 exports.default = modules_efc4e723;

package/dist/cjs/Drawer/components.js

@@ -41,6 +41,7 @@ function _interopNamespaceDefault(e) {
 var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
 const Drawer = React__namespace.forwardRef(function Drawer2({
+  placement = "end",
   children,
   portalEl,
   style,
@@ -50,6 +51,7 @@ const Drawer = React__namespace.forwardRef(function Drawer2({
   overlayStyle,
   overlayClassName,
   lockScroll = true,
+  disableAutoFocus = false,
   "data-testid": dataTestId,
   ...options
 }, propRef) {
@@ -57,37 +59,68 @@ const Drawer = React__namespace.forwardRef(function Drawer2({
     ...options,
     dismissEnabled: overlay
   });
+  const { isMounted: overlayIsMounted, styles: overlayTransitionStyles } = react.useTransitionStyles(drawer.context, {
+    duration: 225,
+    initial: {
+      opacity: 0
+    }
+  });
+  const { isMounted: innerIsMounted, styles: innerTransitionStyles } = react.useTransitionStyles(drawer.context, {
+    duration: 225,
+    initial: {
+      transform: `translateX(${placement === "start" ? "-66px" : "66px"})`
+    }
+  });
   const ref = react.useMergeRefs([drawer.context.refs.setFloating, propRef]);
   const strategyCn = styles_module.default[`drawer-overlay-strategy-${strategy}`];
+  const placementCn = styles_module.default[`drawer-overlay-placement-${placement}`];
   let content = null;
-  if (drawer.context.open) {
-    content = /* @__PURE__ */ jsxRuntime.jsx(react.FloatingPortal, { root: portalEl, children: /* @__PURE__ */ jsxRuntime.jsx(
+  if (overlayIsMounted || innerIsMounted) {
+    content = /* @__PURE__ */ jsxRuntime.jsx(react.FloatingPortal, { root: portalEl, children: /* @__PURE__ */ jsxRuntime.jsx(reactRemoveScroll.RemoveScroll, { enabled: overlay && lockScroll, children: /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        style: overlayStyle,
+        style: {
+          ...overlayTransitionStyles,
+          ...overlayStyle
+        },
         className: cx.cx(
           styles_module.default["drawer-overlay"],
           strategyCn,
+          placementCn,
           overlay && styles_module.default["drawer-overlay-enabled"],
           overlayClassName
         ),
-        children: /* @__PURE__ */ jsxRuntime.jsx(react.FloatingFocusManager, { context: drawer.context, children: /* @__PURE__ */ jsxRuntime.jsx(
-          reactRemoveScroll.RemoveScroll,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
           {
-            as: "div",
-            enabled: overlay && lockScroll,
             ref,
+            ...drawer.getFloatingProps(),
             "aria-labelledby": drawer.labelId,
             "aria-describedby": drawer.descriptionId,
-            ...drawer.getFloatingProps(),
             "data-testid": dataTestId,
-            style,
-            className: cx.cx(styles_module.default["drawer"], className),
-            children
+            className: styles_module.default["drawer-wrapper"],
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              react.FloatingFocusManager,
+              {
+                context: drawer.context,
+                disabled: disableAutoFocus,
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: cx.cx(styles_module.default["drawer"], className),
+                    style: {
+                      ...innerTransitionStyles,
+                      ...style
+                    },
+                    children
+                  }
+                )
+              }
+            )
           }
-        ) })
+        )
       }
-    ) });
+    ) }) });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(state.DrawerContext.Provider, { value: drawer, children: content });
 });

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

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var modules_efc4e723 = {"drawer-overlay":"vt_ce_Drawer_drawerOverlay__15fba194","drawer-overlay-enabled":"vt_ce_Drawer_drawerOverlayEnabled__15fba194","drawer-overlay-strategy-fixed":"vt_ce_Drawer_drawerOverlayStrategyFixed__15fba194","drawer-overlay-strategy-absolute":"vt_ce_Drawer_drawerOverlayStrategyAbsolute__15fba194","drawer":"vt_ce_Drawer_drawer__15fba194","drawer-start":"vt_ce_Drawer_drawerStart__15fba194","drawer-end":"vt_ce_Drawer_drawerEnd__15fba194","drawer-content":"vt_ce_Drawer_drawerContent__15fba194","drawer-title-container":"vt_ce_Drawer_drawerTitleContainer__15fba194","drawer-title":"vt_ce_Drawer_drawerTitle__15fba194","drawer-title-actions":"vt_ce_Drawer_drawerTitleActions__15fba194","drawer-typography":"vt_ce_Drawer_drawerTypography__15fba194","drawer-actions":"vt_ce_Drawer_drawerActions__15fba194"};
+var modules_efc4e723 = {"drawer-overlay":"vt_ce_Drawer_drawerOverlay__923c77c9","drawer-overlay-enabled":"vt_ce_Drawer_drawerOverlayEnabled__923c77c9","drawer-overlay-strategy-fixed":"vt_ce_Drawer_drawerOverlayStrategyFixed__923c77c9","drawer-overlay-strategy-absolute":"vt_ce_Drawer_drawerOverlayStrategyAbsolute__923c77c9","drawer-overlay-placement-start":"vt_ce_Drawer_drawerOverlayPlacementStart__923c77c9","drawer":"vt_ce_Drawer_drawer__923c77c9","drawer-overlay-placement-end":"vt_ce_Drawer_drawerOverlayPlacementEnd__923c77c9","drawer-wrapper":"vt_ce_Drawer_drawerWrapper__923c77c9","drawer-start":"vt_ce_Drawer_drawerStart__923c77c9","drawer-end":"vt_ce_Drawer_drawerEnd__923c77c9","drawer-content":"vt_ce_Drawer_drawerContent__923c77c9","drawer-title-container":"vt_ce_Drawer_drawerTitleContainer__923c77c9","drawer-title":"vt_ce_Drawer_drawerTitle__923c77c9","drawer-title-actions":"vt_ce_Drawer_drawerTitleActions__923c77c9","drawer-typography":"vt_ce_Drawer_drawerTypography__923c77c9","drawer-actions":"vt_ce_Drawer_drawerActions__923c77c9"};
 
 exports.default = modules_efc4e723;

package/dist/cjs/FormControl/context.js

@@ -0,0 +1,16 @@
+'use strict';
+'use client';
+'use strict';
+
+var React = require('react');
+
+const FormControlContext = React.createContext({
+  error: false,
+  disabled: false
+});
+function useFormControlContext() {
+  return React.useContext(FormControlContext);
+}
+
+exports.FormControlContext = FormControlContext;
+exports.useFormControlContext = useFormControlContext;

package/dist/cjs/FormControl/index.js

@@ -0,0 +1,63 @@
+'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('../Box/index.js');
+require('../styles/styled.js');
+var context = require('./context.js');
+
+const FormControl = React.forwardRef(
+  ({ placement = "block-start", ...props }, ref) => {
+    const context$1 = {
+      error: Boolean(props.error),
+      disabled: Boolean(props.disabled)
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        ref,
+        "data-testid": props["data-testid"],
+        "data-error": context$1.error,
+        "data-disabled": context$1.disabled,
+        className: cx.cx(
+          styles_module.default["form-control"],
+          styles_module.default[`placement-${placement}`],
+          props.className
+        ),
+        style: props.style,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { className: styles_module.default["label"], children: props.label }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["inner-control"], children: /* @__PURE__ */ jsxRuntime.jsx(context.FormControlContext.Provider, { value: context$1, children: props.children }) }),
+          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 === true ? "An error has occurred." : 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 = FormControl;

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

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var modules_efc4e723 = {"form-control":"vt_ce_FormControl_formControl__8c1edd74","placement-block-start":"vt_ce_FormControl_placementBlockStart__8c1edd74","label":"vt_ce_FormControl_label__8c1edd74","placement-inline-start":"vt_ce_FormControl_placementInlineStart__8c1edd74","placement-inline-end":"vt_ce_FormControl_placementInlineEnd__8c1edd74","inner-control":"vt_ce_FormControl_innerControl__8c1edd74","help-label":"vt_ce_FormControl_helpLabel__8c1edd74","error-label":"vt_ce_FormControl_errorLabel__8c1edd74"};
+
+exports.default = modules_efc4e723;

package/dist/cjs/Input/index.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var styles_module = require('./styles.module.scss.js');
+var context = require('../FormControl/context.js');
 require('color2k');
 require('../styles/css-vars.js');
 var cx = require('../styles/cx.js');
@@ -15,58 +16,47 @@ require('@mui/system');
 require('../Box/index.js');
 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" })
+const Input = React.forwardRef(
+  ({
+    placeholder,
+    value,
+    error: propsError,
+    disabled: propsDisabled,
+    startIcon,
+    endIcon,
+    "data-testid": dataTestId,
+    style,
+    className,
+    ...props
+  }, ref) => {
+    const ctx = context.useFormControlContext();
+    const error = propsError ?? ctx.error;
+    const disabled = propsDisabled ?? ctx.disabled;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        "data-disabled": disabled,
+        "data-error": error,
+        "data-testid": dataTestId,
+        style,
+        className: cx.cx(styles_module.default["input"], className),
+        children: [
+          startIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["input-icon"], children: startIcon }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              ref,
+              ...props,
+              placeholder,
+              value,
+              disabled,
+              className: styles_module.default["inner-input"]
+            }
+          ),
+          endIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["input-icon"], children: endIcon })
+        ]
+      }
+    );
   }
 );
 

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

@@ -2,6 +2,6 @@
 
 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"};
+var modules_efc4e723 = {"input":"vt_ce_Input_input__a83b3209","inner-input":"vt_ce_Input_innerInput__a83b3209","input-icon":"vt_ce_Input_inputIcon__a83b3209"};
 
 exports.default = modules_efc4e723;

package/dist/cjs/Menu/controlled.js

@@ -27,6 +27,7 @@ function Menu({
   matchAnchorWidth = false,
   options,
   dismissEnabled = true,
+  disableAutoFocus = false,
   className,
   ...props
 }) {
@@ -93,6 +94,7 @@ function Menu({
     {
       context,
       modal: false,
+      disabled: disableAutoFocus,
       order: ["reference", "content"],
       children: /* @__PURE__ */ jsxRuntime.jsx(portal.PortalThemeRelay, { children: /* @__PURE__ */ jsxRuntime.jsx(
         "div",

package/dist/cjs/Select/controlled.js

@@ -18,6 +18,7 @@ var iconsMaterial = require('@mui/icons-material');
 var controlled = require('../Menu/controlled.js');
 var wrappers = require('../Icon/wrappers.js');
 require('../Icon/factory.js');
+var context = require('../FormControl/context.js');
 
 const DefaultEndIcon = wrappers.adaptMuiSvgIcon(iconsMaterial.ArrowDropDown);
 const DefaultUnsetIcon = wrappers.adaptMuiSvgIcon(iconsMaterial.Close);
@@ -28,6 +29,9 @@ function ControlledSelect({
   clearable = true,
   ...props
 }) {
+  const ctx = context.useFormControlContext();
+  const error = props.error ?? ctx.error;
+  const disabled = props.disabled ?? ctx.disabled;
   const anchorId = React.useId();
   const anchorRef = React.useRef(null);
   const [open, setOpen] = React.useState(false);
@@ -48,58 +52,44 @@ function ControlledSelect({
       {
         id: anchorId,
         ref: anchorRef,
-        className: cx.cx(styles_module.default["select"], props.className),
+        "data-focused": open,
+        "data-disabled": disabled,
+        "data-error": error,
+        onClick: () => setOpen(true),
         "data-testid": props["data-testid"],
         style: props.style,
-        onClick: () => setOpen(true),
+        className: cx.cx(styles_module.default["select"], props.className),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("label", { className: styles_module.default["label"], children: props.label }),
-          /* @__PURE__ */ jsxRuntime.jsxs(
+          props.startIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["select-icon"], children: props.startIcon }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              ref,
+              type: "text",
+              size: props.size,
+              "data-selected": Boolean(selectedOption),
+              placeholder: selectedOption?.label ?? placeholder,
+              value: props.inputValue,
+              disabled: props.disabled,
+              onChange: (e) => {
+                setOpen(true);
+                props.onInputChange(e, e.target.value);
+              },
+              className: styles_module.default["inner-input"]
+            }
+          ),
+          selectedOption && clearable && /* @__PURE__ */ jsxRuntime.jsx(
             "span",
             {
-              "data-focused": open,
-              "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["select-icon"], children: props.startIcon }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "input",
-                  {
-                    ref,
-                    type: "text",
-                    size: props.size,
-                    "data-selected": Boolean(selectedOption),
-                    placeholder: selectedOption?.label ?? placeholder,
-                    value: props.inputValue,
-                    disabled: props.disabled,
-                    onChange: (e) => {
-                      setOpen(true);
-                      props.onInputChange(e, e.target.value);
-                    },
-                    className: styles_module.default["inner-input"]
-                  }
-                ),
-                selectedOption && clearable && /* @__PURE__ */ jsxRuntime.jsx(
-                  "span",
-                  {
-                    className: styles_module.default["select-icon"],
-                    onClick: (e) => {
-                      props.onChange?.(e, null);
-                      props.onInputChange(e, "");
-                    },
-                    children: unsetIcon
-                  }
-                ),
-                endIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["select-icon"], children: endIcon })
-              ]
+              className: styles_module.default["select-icon"],
+              onClick: (e) => {
+                props.onChange?.(e, null);
+                props.onInputChange(e, "");
+              },
+              children: unsetIcon
             }
           ),
-          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 })
-          ] })
+          endIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["select-icon"], children: endIcon })
         ]
       }
     ),
@@ -130,16 +120,5 @@ function ControlledSelect({
     )
   ] });
 }
-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 = ControlledSelect;

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

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var modules_efc4e723 = {"select":"vt_ce_Select_select__cb05e024","label":"vt_ce_Select_label__cb05e024","inner-input-container":"vt_ce_Select_innerInputContainer__cb05e024","inner-input":"vt_ce_Select_innerInput__cb05e024","select-icon":"vt_ce_Select_selectIcon__cb05e024","help-label":"vt_ce_Select_helpLabel__cb05e024","error-label":"vt_ce_Select_errorLabel__cb05e024"};
+var modules_efc4e723 = {"select":"vt_ce_Select_select__a4ea9d62","inner-input":"vt_ce_Select_innerInput__a4ea9d62","select-icon":"vt_ce_Select_selectIcon__a4ea9d62"};
 
 exports.default = modules_efc4e723;

package/dist/cjs/TablePagination/index.js

@@ -6,11 +6,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var styles_module = require('./styles.module.scss.js');
-var index = require('../IconButton/index.js');
+var index$1 = require('../IconButton/index.js');
 var internal = require('../Icon/internal.js');
 require('../Select/controlled.js');
 var uncontrolled = require('../Select/uncontrolled.js');
 require('react');
+var index = require('../FormControl/index.js');
 
 function TablePagination({
   page,
@@ -23,23 +24,20 @@ function TablePagination({
   const showPrev = page !== 1;
   const showNext = page < count / rowsPerPage;
   return /* @__PURE__ */ jsxRuntime.jsxs("nav", { className: styles_module.default["container"], children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles_module.default["rows-per-page"], children: [
-      /* @__PURE__ */ jsxRuntime.jsx("label", { className: styles_module.default["rows-per-page-label"], children: rowsPerPageLabel }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        uncontrolled.default,
-        {
-          defaultValue: rowsPerPage,
-          clearable: false,
-          size: rowsPerPageOptions.length > 0 ? getDigits(Math.max(...rowsPerPageOptions)) : 3,
-          options: rowsPerPageOptions.map((option) => ({
-            label: option.toLocaleString(),
-            value: option
-          })),
-          onChange: (_, newRowsPerPage) => props.onRowsPerPageChange?.(newRowsPerPage),
-          className: styles_module.default["rows-per-page-select"]
-        }
-      )
-    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(index.default, { label: rowsPerPageLabel, placement: "inline-start", children: /* @__PURE__ */ jsxRuntime.jsx(
+      uncontrolled.default,
+      {
+        defaultValue: rowsPerPage,
+        clearable: false,
+        size: rowsPerPageOptions.length > 0 ? getDigits(Math.max(...rowsPerPageOptions)) + 1 : 3,
+        options: rowsPerPageOptions.map((option) => ({
+          label: option.toLocaleString(),
+          value: option
+        })),
+        onChange: (_, newRowsPerPage) => props.onRowsPerPageChange?.(newRowsPerPage),
+        className: styles_module.default["rows-per-page-select"]
+      }
+    ) }),
     /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles_module.default["page-counts"], children: [
       (page - 1) * rowsPerPage + 1,
       "-",
@@ -50,7 +48,7 @@ function TablePagination({
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: styles_module.default["btn-list"], children: [
       /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
-        index.default,
+        index$1.default,
         {
           type: "button",
           disabled: !showPrev,
@@ -59,7 +57,7 @@ function TablePagination({
         }
       ) }),
       /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
-        index.default,
+        index$1.default,
         {
           type: "button",
           disabled: !showNext,

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

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var modules_efc4e723 = {"container":"vt_ce_TablePagination_container__8da45ccd","rows-per-page":"vt_ce_TablePagination_rowsPerPage__8da45ccd","rows-per-page-label":"vt_ce_TablePagination_rowsPerPageLabel__8da45ccd","rows-per-page-select":"vt_ce_TablePagination_rowsPerPageSelect__8da45ccd","page-counts":"vt_ce_TablePagination_pageCounts__8da45ccd","btn-list":"vt_ce_TablePagination_btnList__8da45ccd","ellipsis":"vt_ce_TablePagination_ellipsis__8da45ccd"};
+var modules_efc4e723 = {"container":"vt_ce_TablePagination_container__b08ac6ea","rows-per-page-select":"vt_ce_TablePagination_rowsPerPageSelect__b08ac6ea","page-counts":"vt_ce_TablePagination_pageCounts__b08ac6ea","btn-list":"vt_ce_TablePagination_btnList__b08ac6ea","ellipsis":"vt_ce_TablePagination_ellipsis__b08ac6ea"};
 
 exports.default = modules_efc4e723;