@vention/machine-ui 5.16.0 → 5.16.1

package/index.esm.js

@@ -1679,6 +1679,204 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
+const getBorderColorFromState = (state, theme) => {
+  switch (state) {
+    case "error":
+      return theme.palette.border.subtleDestructive;
+    case "warning":
+      return theme.palette.border.subtleWarning;
+    case "success":
+      return theme.palette.border.subtleSuccess;
+    case "focused":
+      return theme.palette.border.blueSubtle;
+    case "hover":
+    case "default":
+    case "disabled":
+    default:
+      return theme.palette.border.main;
+  }
+};
+const getBackgroundColorFromState = (state, theme) => {
+  switch (state) {
+    case "error":
+      return theme.palette.background.subtleDestructive;
+    case "warning":
+      return theme.palette.background.subtleWarning;
+    case "success":
+      return theme.palette.background.subtleSuccess;
+    case "disabled":
+      return theme.palette.background.inputDisabled;
+    case "default":
+    case "focused":
+    case "hover":
+    default:
+      return theme.palette.background.inputOutlined;
+  }
+};
+const getLabelColor = (state, theme) => {
+  switch (state) {
+    case "warning":
+      return theme.palette.text.warning;
+    case "success":
+      return theme.palette.text.positive;
+    case "error":
+      return theme.palette.text.negative;
+    default:
+      return undefined;
+  }
+};
+const getFieldSetBackgroundColor = (state, theme, variant) => {
+  if (variant === "shaded" && state !== "disabled") {
+    return `${theme.palette.background.inputShaded}${state === "error" ? " !important" : ""}`;
+  }
+  return getBackgroundColorFromState(state, theme);
+};
+const getBorderWidth$1 = size => {
+  switch (size) {
+    case "x-small":
+      return "1px";
+    case "small":
+      return "1px";
+    case "medium":
+      return "1px";
+    case "large":
+      return "1px";
+    case "x-large":
+      return "1px";
+    case "xx-large":
+      return "2px";
+  }
+};
+const getInputHeight = (size, theme) => {
+  switch (size) {
+    case "x-small":
+      return theme.spacing(4);
+    case "small":
+      return theme.spacing(5);
+    case "medium":
+      return theme.spacing(7);
+    case "large":
+      return theme.spacing(8);
+    case "x-large":
+      return theme.spacing(10);
+    case "xx-large":
+      return theme.spacing(12);
+  }
+};
+const getInputPaddingStyles = (size, theme) => {
+  switch (size) {
+    case "x-small":
+    case "small":
+      return {
+        paddingLeft: theme.spacing(2),
+        paddingRight: theme.spacing(2)
+      };
+    case "medium":
+      return {
+        paddingLeft: theme.spacing(3),
+        paddingRight: theme.spacing(3)
+      };
+    case "large":
+    case "x-large":
+    case "xx-large":
+      return {
+        paddingLeft: theme.spacing(4),
+        paddingRight: theme.spacing(4)
+      };
+  }
+};
+function getBorderRadius$1() {
+  return "4px";
+}
+/**
+ * Get the vertical padding style for multiline input
+ * @param size The size of the input
+ * @param theme Theme used by MUI
+ */
+const getMultilineVerticalPaddingStyles = (size, theme) => {
+  switch (size) {
+    case "x-small":
+      return {
+        paddingTop: 0,
+        paddingBottom: 0
+      };
+    case "small":
+    case "medium":
+      return {
+        paddingTop: theme.spacing(1),
+        paddingBottom: theme.spacing(1)
+      };
+    case "large":
+      return {
+        paddingTop: theme.spacing(2),
+        paddingBottom: theme.spacing(2)
+      };
+    case "x-large":
+      return {
+        paddingTop: theme.spacing(3),
+        paddingBottom: theme.spacing(3)
+      };
+    case "xx-large":
+      return {
+        paddingTop: theme.spacing(4),
+        paddingBottom: theme.spacing(4)
+      };
+  }
+};
+const typographyNameFromSizeMap = {
+  "x-small": {
+    label: "uiText12SemiBold",
+    labelDiminished: "uiText12Regular",
+    text: "uiText12Regular",
+    textDiminished: "uiText12Regular",
+    helperText: "uiText12Regular"
+  },
+  small: {
+    label: "uiText12SemiBold",
+    labelDiminished: "uiText12Regular",
+    text: "uiText12Regular",
+    textDiminished: "uiText12Regular",
+    helperText: "uiText12Regular"
+  },
+  medium: {
+    label: "uiText14SemiBold",
+    labelDiminished: "uiText14Regular",
+    text: "uiText14Regular",
+    textDiminished: "uiText12Regular",
+    helperText: "uiText12Regular"
+  },
+  large: {
+    label: "uiText14SemiBold",
+    labelDiminished: "uiText14Regular",
+    text: "uiText14Regular",
+    textDiminished: "uiText12Regular",
+    helperText: "uiText12Regular"
+  },
+  "x-large": {
+    label: "heading18SemiBold",
+    labelDiminished: "paragraph18Regular",
+    text: "paragraph18Regular",
+    textDiminished: "uiText12Regular",
+    helperText: "uiText12Regular"
+  },
+  "xx-large": {
+    label: "hmiText20SemiBold",
+    labelDiminished: "hmiText20Regular",
+    text: "uiText18Regular",
+    textDiminished: "uiText12Regular",
+    helperText: "paragraph18Regular"
+  }
+};
+const getTypography = (size, theme) => {
+  return {
+    label: theme.typography[typographyNameFromSizeMap[size].label],
+    labelDiminished: theme.typography[typographyNameFromSizeMap[size].labelDiminished],
+    text: theme.typography[typographyNameFromSizeMap[size].text],
+    textDiminished: theme.typography[typographyNameFromSizeMap[size].textDiminished],
+    helperText: theme.typography[typographyNameFromSizeMap[size].helperText]
+  };
+};
+
 function getButtonStylingPropertiesGivenProps(variant, size, theme) {
   const {
     buttonText,
@@ -1768,28 +1966,6 @@ function getButtonStylingPropertiesGivenProps(variant, size, theme) {
       };
   }
 }
-function getButtonHeight(size, theme) {
-  switch (size) {
-    case "small":
-      return theme.spacing(5);
-    // 24px
-    case "medium":
-      return theme.spacing(7);
-    // 32px
-    case "large":
-      return theme.spacing(8);
-    // 40px
-    case "x-large":
-      return theme.spacing(10);
-    // 56px
-    case "xx-large":
-      return theme.spacing(12);
-    // 80px
-  }
-}
-function getBorderRadius$1() {
-  return "4px";
-}
 function getButtonIconSize(size) {
   switch (size) {
     case "small":
@@ -4366,7 +4542,7 @@ const useStyles$G = tss.withParams().create(({
       whiteSpace: "nowrap"
     },
     root: Object.assign(Object.assign({
-      height: getButtonHeight(size, theme),
+      height: getInputHeight(size, theme),
       backgroundColor: stylingProperties.backgroundColor,
       color: stylingProperties.textColor,
       borderRadius: stylingProperties.borderRadius,
@@ -5078,7 +5254,7 @@ const useStyles$B = tss.withParams().create(({
   theme
 }) => {
   const stylingProperties = getButtonStylingPropertiesGivenProps(variant, size, theme);
-  const buttonSize = getButtonHeight(size, theme);
+  const buttonSize = getInputHeight(size, theme);
   return {
     root: {
       padding: 0,
@@ -5205,7 +5381,7 @@ const useStyles$A = tss.withParams().create(({
   return {
     root: {
       gap: BUTTON_GAPS[size],
-      height: getButtonHeight(size, theme),
+      height: getInputHeight(size, theme),
       padding: BUTTON_PADDINGS[size],
       backgroundColor: stylingProperties.backgroundColor,
       borderRadius: stylingProperties.borderRadius,
@@ -7027,201 +7203,6 @@ const useStyles$t = tss.withParams().create(({
   };
 });
 
-const getBorderColorFromState = (state, theme) => {
-  switch (state) {
-    case "error":
-      return theme.palette.border.subtleDestructive;
-    case "warning":
-      return theme.palette.border.subtleWarning;
-    case "success":
-      return theme.palette.border.subtleSuccess;
-    case "focused":
-      return theme.palette.border.blueSubtle;
-    case "hover":
-    case "default":
-    case "disabled":
-    default:
-      return theme.palette.border.main;
-  }
-};
-const getBackgroundColorFromState = (state, theme) => {
-  switch (state) {
-    case "error":
-      return theme.palette.background.subtleDestructive;
-    case "warning":
-      return theme.palette.background.subtleWarning;
-    case "success":
-      return theme.palette.background.subtleSuccess;
-    case "disabled":
-      return theme.palette.background.inputDisabled;
-    case "default":
-    case "focused":
-    case "hover":
-    default:
-      return theme.palette.background.inputOutlined;
-  }
-};
-const getLabelColor = (state, theme) => {
-  switch (state) {
-    case "warning":
-      return theme.palette.text.warning;
-    case "success":
-      return theme.palette.text.positive;
-    case "error":
-      return theme.palette.text.negative;
-    default:
-      return undefined;
-  }
-};
-const getFieldSetBackgroundColor = (state, theme, variant) => {
-  if (variant === "shaded" && state !== "disabled") {
-    return `${theme.palette.background.inputShaded}${state === "error" ? " !important" : ""}`;
-  }
-  return getBackgroundColorFromState(state, theme);
-};
-const getBorderWidth$1 = size => {
-  switch (size) {
-    case "x-small":
-      return "1px";
-    case "small":
-      return "1px";
-    case "medium":
-      return "1px";
-    case "large":
-      return "1px";
-    case "x-large":
-      return "1px";
-    case "xx-large":
-      return "2px";
-  }
-};
-const getInputHeight = (size, theme) => {
-  switch (size) {
-    case "x-small":
-      return theme.spacing(4);
-    case "small":
-      return theme.spacing(5);
-    case "medium":
-      return theme.spacing(7);
-    case "large":
-      return theme.spacing(8);
-    case "x-large":
-      return theme.spacing(9);
-    case "xx-large":
-      return theme.spacing(11);
-  }
-};
-const getInputPaddingStyles = (size, theme) => {
-  switch (size) {
-    case "x-small":
-    case "small":
-      return {
-        paddingLeft: theme.spacing(2),
-        paddingRight: theme.spacing(2)
-      };
-    case "medium":
-      return {
-        paddingLeft: theme.spacing(3),
-        paddingRight: theme.spacing(3)
-      };
-    case "large":
-    case "x-large":
-    case "xx-large":
-      return {
-        paddingLeft: theme.spacing(4),
-        paddingRight: theme.spacing(4)
-      };
-  }
-};
-/**
- * Get the vertical padding style for multiline input
- * @param size The size of the input
- * @param theme Theme used by MUI
- */
-const getMultilineVerticalPaddingStyles = (size, theme) => {
-  switch (size) {
-    case "x-small":
-      return {
-        paddingTop: 0,
-        paddingBottom: 0
-      };
-    case "small":
-    case "medium":
-      return {
-        paddingTop: theme.spacing(1),
-        paddingBottom: theme.spacing(1)
-      };
-    case "large":
-      return {
-        paddingTop: theme.spacing(2),
-        paddingBottom: theme.spacing(2)
-      };
-    case "x-large":
-      return {
-        paddingTop: theme.spacing(3),
-        paddingBottom: theme.spacing(3)
-      };
-    case "xx-large":
-      return {
-        paddingTop: theme.spacing(4),
-        paddingBottom: theme.spacing(4)
-      };
-  }
-};
-const typographyNameFromSizeMap = {
-  "x-small": {
-    label: "uiText12SemiBold",
-    labelDiminished: "uiText12Regular",
-    text: "uiText12Regular",
-    textDiminished: "uiText12Regular",
-    helperText: "uiText12Regular"
-  },
-  small: {
-    label: "uiText12SemiBold",
-    labelDiminished: "uiText12Regular",
-    text: "uiText12Regular",
-    textDiminished: "uiText12Regular",
-    helperText: "uiText12Regular"
-  },
-  medium: {
-    label: "uiText14SemiBold",
-    labelDiminished: "uiText14Regular",
-    text: "uiText14Regular",
-    textDiminished: "uiText12Regular",
-    helperText: "uiText12Regular"
-  },
-  large: {
-    label: "uiText14SemiBold",
-    labelDiminished: "uiText14Regular",
-    text: "uiText14Regular",
-    textDiminished: "uiText12Regular",
-    helperText: "uiText12Regular"
-  },
-  "x-large": {
-    label: "heading18SemiBold",
-    labelDiminished: "paragraph18Regular",
-    text: "paragraph18Regular",
-    textDiminished: "uiText12Regular",
-    helperText: "uiText12Regular"
-  },
-  "xx-large": {
-    label: "hmiText20SemiBold",
-    labelDiminished: "hmiText20Regular",
-    text: "uiText18Regular",
-    textDiminished: "uiText12Regular",
-    helperText: "paragraph18Regular"
-  }
-};
-const getTypography = (size, theme) => {
-  return {
-    label: theme.typography[typographyNameFromSizeMap[size].label],
-    labelDiminished: theme.typography[typographyNameFromSizeMap[size].labelDiminished],
-    text: theme.typography[typographyNameFromSizeMap[size].text],
-    textDiminished: theme.typography[typographyNameFromSizeMap[size].textDiminished],
-    helperText: theme.typography[typographyNameFromSizeMap[size].helperText]
-  };
-};
-
 const VentionTextInput = _a => {
   var {
       state = "default",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vention/machine-ui",
-  "version": "5.16.0",
+  "version": "5.16.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/VentionCo/machine-cloud.git"

package/src/lib/components/shared/styles/input-styles.d.ts

@@ -12,6 +12,7 @@ export declare const getInputPaddingStyles: (size: Sizes, theme: Theme) => {
     paddingLeft: string;
     paddingRight: string;
 };
+export declare function getBorderRadius(): string;
 /**
  * Get the vertical padding style for multiline input
  * @param size The size of the input

package/src/lib/components/vention-button/button-utils.d.ts

@@ -32,6 +32,5 @@ export interface VentionButtonProps extends Omit<ButtonProps, "size" | "variant"
     loading?: boolean;
 }
 export declare function getButtonStylingPropertiesGivenProps(variant: VentionButtonProps["variant"] | "simple", size: VentionButtonProps["size"], theme: Theme): StylingProperties;
-export declare function getButtonHeight(size: VentionButtonProps["size"], theme: Theme): string;
 export declare function getButtonIconSize(size: VentionButtonProps["size"]): number;
 export {};