carbon-react 131.1.0 → 132.1.0

package/esm/__spec_helper__/test-utils.d.ts

@@ -23,7 +23,6 @@ declare const assertHoverTraversal: ({ num, nonSelectables, }: {
     num: number;
     nonSelectables?: number[] | undefined;
 }) => (wrapper: ReactWrapper) => void;
-declare const carbonThemesJestTable: (string | Partial<import("../style/themes").ThemeObject> | undefined)[][];
 declare const marginProps: readonly [readonly ["m", "margin"], readonly ["ml", "marginLeft"], readonly ["mr", "marginRight"], readonly ["mt", "marginTop"], readonly ["mb", "marginBottom"], readonly ["mx", "marginLeft"], readonly ["mx", "marginRight"], readonly ["my", "marginTop"], readonly ["my", "marginBottom"]];
 declare type MarginProps = {
     [K in typeof marginProps[number][0]]?: string | number;
@@ -49,4 +48,4 @@ declare const testStyledSystemGrid: (component: (gridProperties?: GridProps) =>
 declare const testStyledSystemBackground: (component: (backgroundProperties?: BackgroundProps) => JSX.Element, styleContainer?: ((wrapper: ReactWrapper) => ReactWrapper) | undefined) => void;
 declare const testStyledSystemPosition: (component: (positionProperties?: PositionProps) => JSX.Element, styleContainer?: ((wrapper: ReactWrapper) => ReactWrapper) | undefined) => void;
 declare const expectConsoleOutput: (message: string, type?: "warn" | "error") => () => void;
-export { assertStyleMatch, toCSSCase, hoverList, selectedItemOf, childrenFrom, makeArrayKeys, keyboard, assertKeyboardTraversal, assertHoverTraversal, listFrom, click, simulate, carbonThemesJestTable, mockMatchMedia, testStyledSystemSpacing, testStyledSystemMargin, testStyledSystemPadding, testStyledSystemColor, testStyledSystemWidth, testStyledSystemHeight, testStyledSystemLayout, testStyledSystemFlexBox, testStyledSystemGrid, testStyledSystemBackground, testStyledSystemPosition, expectConsoleOutput, };
+export { assertStyleMatch, toCSSCase, hoverList, selectedItemOf, childrenFrom, makeArrayKeys, keyboard, assertKeyboardTraversal, assertHoverTraversal, listFrom, click, simulate, mockMatchMedia, testStyledSystemSpacing, testStyledSystemMargin, testStyledSystemPadding, testStyledSystemColor, testStyledSystemWidth, testStyledSystemHeight, testStyledSystemLayout, testStyledSystemFlexBox, testStyledSystemGrid, testStyledSystemBackground, testStyledSystemPosition, expectConsoleOutput, };

package/esm/__spec_helper__/test-utils.js

@@ -4,7 +4,6 @@
 import { mount } from "enzyme";
 import { sprintf } from "sprintf-js";
 import { space } from "../style/themes/base/base-theme.config";
-import { carbonThemeList } from "../style/themes";
 import { mockMatchMedia } from "./mock-match-media";
 const isUpper = char => char.toUpperCase() === char;
 const humpToDash = (acc, char) => `${acc}${isUpper(char) ? `-${char.toLowerCase()}` : char}`;
@@ -80,7 +79,6 @@ const assertCorrectTraversal = method => expect => ({
 };
 const assertKeyboardTraversal = assertCorrectTraversal(() => keyboard.pressArrowDown)(expect);
 const assertHoverTraversal = assertCorrectTraversal(wrapper => hoverList(wrapper))(expect);
-const carbonThemesJestTable = carbonThemeList.map(theme => [theme.name, theme]);
 const marginProps = [["m", "margin"], ["ml", "marginLeft"], ["mr", "marginRight"], ["mt", "marginTop"], ["mb", "marginBottom"], ["mx", "marginLeft"], ["mx", "marginRight"], ["my", "marginTop"], ["my", "marginBottom"]];
 const paddingProps = [["p", "padding"], ["pl", "paddingLeft"], ["pr", "paddingRight"], ["pt", "paddingTop"], ["pb", "paddingBottom"], ["px", "paddingLeft"], ["px", "paddingRight"], ["py", "paddingTop"], ["py", "paddingBottom"]];
 const colorProps = [["color", "color", "#CCCCCC"], ["bg", "background-color", "#FFFFFF"], ["opacity", "opacity", "0.5"]];
@@ -357,4 +355,4 @@ const expectConsoleOutput = (message, type = "error") => {
     global.console[type] = consoleType;
   };
 };
-export { assertStyleMatch, toCSSCase, hoverList, selectedItemOf, childrenFrom, makeArrayKeys, keyboard, assertKeyboardTraversal, assertHoverTraversal, listFrom, click, simulate, carbonThemesJestTable, mockMatchMedia, testStyledSystemSpacing, testStyledSystemMargin, testStyledSystemPadding, testStyledSystemColor, testStyledSystemWidth, testStyledSystemHeight, testStyledSystemLayout, testStyledSystemFlexBox, testStyledSystemGrid, testStyledSystemBackground, testStyledSystemPosition, expectConsoleOutput };
+export { assertStyleMatch, toCSSCase, hoverList, selectedItemOf, childrenFrom, makeArrayKeys, keyboard, assertKeyboardTraversal, assertHoverTraversal, listFrom, click, simulate, mockMatchMedia, testStyledSystemSpacing, testStyledSystemMargin, testStyledSystemPadding, testStyledSystemColor, testStyledSystemWidth, testStyledSystemHeight, testStyledSystemLayout, testStyledSystemFlexBox, testStyledSystemGrid, testStyledSystemBackground, testStyledSystemPosition, expectConsoleOutput };

package/esm/components/carbon-provider/carbon-provider.component.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import type { ThemeObject } from "../../style/themes";
 export interface CarbonProviderProps {
     children: React.ReactNode;
-    /** Theme which specifies styles to apply to all child components. Set to `mintTheme` by default for legacy support. */
+    /** Theme which specifies styles to apply to all child components. Set to `sageTheme` by default. */
     theme?: Partial<ThemeObject>;
     /** Feature flag for opting in to the latest validation designs for components that support it.
      *

package/esm/components/carbon-provider/carbon-provider.component.js

@@ -2,12 +2,12 @@ import React, { createContext, useContext } from "react";
 import PropTypes from "prop-types";
 import { ThemeProvider } from "styled-components";
 import CarbonScopedTokensProvider from "../../style/design-tokens/carbon-scoped-tokens-provider";
-import { mintTheme } from "../../style/themes";
+import { sageTheme } from "../../style/themes";
 import { TopModalContextProvider } from "./top-modal-context";
 export const NewValidationContext = /*#__PURE__*/createContext({});
 export const CarbonProvider = ({
   children,
-  theme = mintTheme,
+  theme = sageTheme,
   validationRedesignOptIn = false,
   roundedCornersOptOut = false,
   focusRedesignOptOut = false

package/esm/components/file-input/__internal__/file-upload-status/file-upload-status.component.js

@@ -24,10 +24,7 @@ export const FileUploadStatus = ({
   switch (status) {
     case "uploading":
       buttonText = locale.fileInput.actions.cancel();
-      progressBar = statusProps.progress === undefined ? /*#__PURE__*/React.createElement(LoaderBar, {
-        size: "small"
-      }) : /*#__PURE__*/React.createElement(ProgressTracker, {
-        size: "small",
+      progressBar = statusProps.progress === undefined ? /*#__PURE__*/React.createElement(LoaderBar, null) : /*#__PURE__*/React.createElement(ProgressTracker, {
         progress: statusProps.progress,
         length: "100%"
       });

package/esm/components/file-input/__internal__/file-upload-status/file-upload-status.style.js

@@ -76,7 +76,6 @@ export const StyledFileUploadStatus = styled.div`
     `;
 }}
   border-radius: var(--borderRadius050);
-  width: 100%;
 
   ${StyledProgressBar}, ${ProgressTrackerInnerBar} {
     border-radius: var(--borderRadius050);
@@ -93,5 +92,6 @@ export const StyledFileUploadStatus = styled.div`
 
   ${LoaderBarInnerBar} {
     background-color: var(--colorsSemanticNeutral500);
+    border-radius: var(--borderRadius050);
   }
 `;

package/esm/components/file-input/file-input.component.d.ts

@@ -19,13 +19,13 @@ export interface FileInputProps extends Pick<ValidationProps, "error">, Pick<Inp
     isVertical?: boolean;
     /** Label content */
     label?: string;
-    /** A valid CSS string for the max-height CSS property. Defaults to the same as the minHeight. */
+    /** A valid CSS string for the max-height CSS property. */
     maxHeight?: string;
     /** A valid CSS string for the max-width CSS property. Defaults to the same as the minWidth. */
     maxWidth?: string;
-    /** A valid CSS string for the min-height CSS property. Defaults to 40px. */
+    /** A valid CSS string for the min-height CSS property. */
     minHeight?: string;
-    /** A valid CSS string for the min-width CSS property. Defaults to 256px. */
+    /** A valid CSS string for the min-width CSS property. */
     minWidth?: string;
     /** onChange event handler. Accepts a list of all files currently entered to the input. */
     onChange: (files: FileList) => void;

package/esm/components/file-input/file-input.component.js

@@ -27,8 +27,8 @@ const FileInput = /*#__PURE__*/React.forwardRef(({
   isVertical,
   maxHeight,
   maxWidth,
-  minHeight = "40px",
-  minWidth = "256px",
+  minHeight,
+  minWidth = "280px",
   name,
   onChange,
   required,
@@ -40,7 +40,7 @@ const FileInput = /*#__PURE__*/React.forwardRef(({
   const textOnButton = buttonText || locale.fileInput.selectFile();
   const mainText = dragAndDropText || locale.fileInput.dragAndDrop();
   const sizeProps = {
-    maxHeight: maxHeight || (isVertical ? undefined : minHeight),
+    maxHeight: maxHeight || undefined,
     maxWidth: maxWidth || minWidth,
     minHeight,
     minWidth
@@ -137,7 +137,8 @@ const FileInput = /*#__PURE__*/React.forwardRef(({
     error: error,
     onDragLeave: onDragLeave,
     onDragOver: onDragOver,
-    onDrop: onDrop
+    onDrop: onDrop,
+    isVertical: isVertical
   }, sizeProps), /*#__PURE__*/React.createElement(ButtonMinor, {
     buttonType: "primary",
     onClick: onSelectFileClick

package/esm/components/file-input/file-input.style.d.ts

@@ -9,6 +9,7 @@ interface StyledFileInputPresentationProps extends Pick<ValidationProps, "error"
     maxWidth?: string;
     minHeight?: string;
     minWidth?: string;
+    isVertical?: boolean;
 }
 export declare const StyledFileInputPresentation: import("styled-components").StyledComponent<"div", any, StyledFileInputPresentationProps, never>;
 export {};

package/esm/components/file-input/file-input.style.js

@@ -15,8 +15,9 @@ export const StyledFileInputPresentation = styled.div`
     min-height: ${minHeight};
     max-width: ${maxWidth};
     ${!hasUploadStatus && css`
-      padding: var(--spacing150);
+      padding: 11px; /* not 12px to account for 1px border */
       max-height: ${maxHeight};
+      box-sizing: border-box;
     `}
   `}
 
@@ -24,7 +25,8 @@ export const StyledFileInputPresentation = styled.div`
   hasUploadStatus,
   isDraggedOver,
   isDraggingFile,
-  error
+  error,
+  isVertical
 }) => {
   const borderWidthToken = error || isDraggingFile ? "borderWidth200" : "borderWidth100";
   let borderColorToken = "colorsUtilityMajor300";
@@ -40,13 +42,13 @@ export const StyledFileInputPresentation = styled.div`
   }
   return !hasUploadStatus && css`
         display: flex;
-        flex-direction: column;
+        ${isVertical && "flex-direction: column;"}
         flex-wrap: wrap;
         justify-content: center;
         align-content: center;
         align-items: center;
         text-align: center;
-        gap: var(--spacing150);
+        gap: var(--spacing100);
         border-radius: var(--borderRadius050);
         border: var(--${borderWidthToken}) dashed var(--${borderColorToken});
         background: var(--${backgroundColorToken});

package/esm/style/design-tokens/debug-theme.util.js

@@ -1,5 +1,5 @@
 import tokens from "@sage/design-tokens/js/base/common";
-import mint from "../themes/mint";
+import sage from "../themes/sage";
 /**
  *
  * Generates debug theme by mapping theme properties, so that components or
@@ -29,7 +29,7 @@ const debugTheme = themeProperties => Object.fromEntries(Object.entries(themePro
   return [key, ""];
 }));
 export default {
-  ...debugTheme(mint),
+  ...debugTheme(sage),
   compatibility: {
     ...tokens
   },

package/esm/style/themes/index.d.ts

@@ -1,8 +1,5 @@
 import sageTheme from "./sage";
-import mintTheme from "./mint";
-import aegeanTheme from "./aegean";
-export { sageTheme, mintTheme, aegeanTheme };
+export { sageTheme };
 export { default as baseTheme } from "./base";
 export { default as noTheme } from "./none";
 export type { ThemeObject } from "./base";
-export declare const carbonThemeList: Partial<import("./base").ThemeObject>[];

package/esm/style/themes/index.js

@@ -1,7 +1,4 @@
 import sageTheme from "./sage";
-import mintTheme from "./mint";
-import aegeanTheme from "./aegean";
-export { sageTheme, mintTheme, aegeanTheme };
+export { sageTheme };
 export { default as baseTheme } from "./base";
-export { default as noTheme } from "./none";
-export const carbonThemeList = [mintTheme, aegeanTheme, sageTheme];
+export { default as noTheme } from "./none";

package/esm/style/themes/sage/index.d.ts

@@ -1,3 +1,4 @@
+import { BasePalette } from "../base/base-theme.config";
 declare const _default: {
     compatibility: {
         metaName: string;
@@ -510,7 +511,7 @@ declare const _default: {
         opacity800: string;
     };
     name: string;
-    palette?: import("../base/base-theme.config").BasePalette | undefined;
+    palette?: BasePalette | undefined;
     spacing?: number | undefined;
     space?: string[] | undefined;
     colors?: Partial<import("../base/base-theme.config").Colors> | undefined;

package/esm/style/themes/sage/index.js

@@ -1,7 +1,14 @@
 import tokens from "@sage/design-tokens/js/base/common";
-import mint from "../mint/index";
+import { mergeWithBase } from "../base";
 export default {
-  ...mint,
+  ...mergeWithBase(palette => ({
+    colors: {
+      primary: palette.productGreenShade(23.5),
+      secondary: palette.productGreenShade(41),
+      tertiary: palette.productGreenShade(61),
+      loadingBarBackground: palette.productGreenTint(70)
+    }
+  })),
   compatibility: {
     ...tokens
   },

package/esm/style/utils/color.js

@@ -13,7 +13,7 @@ import tokens from "@sage/design-tokens/js/base/common";
  * We could use a proxy to make those calls directly on the theme however styled-components expects the theme to be a
  * plain object and does not allow us to merge a theme from a ThemeProvider with a theme defined as a defaultProp if
  * both of those have a Proxy.
- * e.g. when the mint theme in the ThemeProvider is merged with the base theme in the defaultProps
+ * e.g. when the none theme in the ThemeProvider is merged with the base theme in the defaultProps
  *
  * The purpose of this function is to intercept any palette colors, we only want styled-system to deal with CSS strings
  * and theme.colors.

package/lib/__spec_helper__/test-utils.d.ts

@@ -23,7 +23,6 @@ declare const assertHoverTraversal: ({ num, nonSelectables, }: {
     num: number;
     nonSelectables?: number[] | undefined;
 }) => (wrapper: ReactWrapper) => void;
-declare const carbonThemesJestTable: (string | Partial<import("../style/themes").ThemeObject> | undefined)[][];
 declare const marginProps: readonly [readonly ["m", "margin"], readonly ["ml", "marginLeft"], readonly ["mr", "marginRight"], readonly ["mt", "marginTop"], readonly ["mb", "marginBottom"], readonly ["mx", "marginLeft"], readonly ["mx", "marginRight"], readonly ["my", "marginTop"], readonly ["my", "marginBottom"]];
 declare type MarginProps = {
     [K in typeof marginProps[number][0]]?: string | number;
@@ -49,4 +48,4 @@ declare const testStyledSystemGrid: (component: (gridProperties?: GridProps) =>
 declare const testStyledSystemBackground: (component: (backgroundProperties?: BackgroundProps) => JSX.Element, styleContainer?: ((wrapper: ReactWrapper) => ReactWrapper) | undefined) => void;
 declare const testStyledSystemPosition: (component: (positionProperties?: PositionProps) => JSX.Element, styleContainer?: ((wrapper: ReactWrapper) => ReactWrapper) | undefined) => void;
 declare const expectConsoleOutput: (message: string, type?: "warn" | "error") => () => void;
-export { assertStyleMatch, toCSSCase, hoverList, selectedItemOf, childrenFrom, makeArrayKeys, keyboard, assertKeyboardTraversal, assertHoverTraversal, listFrom, click, simulate, carbonThemesJestTable, mockMatchMedia, testStyledSystemSpacing, testStyledSystemMargin, testStyledSystemPadding, testStyledSystemColor, testStyledSystemWidth, testStyledSystemHeight, testStyledSystemLayout, testStyledSystemFlexBox, testStyledSystemGrid, testStyledSystemBackground, testStyledSystemPosition, expectConsoleOutput, };
+export { assertStyleMatch, toCSSCase, hoverList, selectedItemOf, childrenFrom, makeArrayKeys, keyboard, assertKeyboardTraversal, assertHoverTraversal, listFrom, click, simulate, mockMatchMedia, testStyledSystemSpacing, testStyledSystemMargin, testStyledSystemPadding, testStyledSystemColor, testStyledSystemWidth, testStyledSystemHeight, testStyledSystemLayout, testStyledSystemFlexBox, testStyledSystemGrid, testStyledSystemBackground, testStyledSystemPosition, expectConsoleOutput, };

package/lib/__spec_helper__/test-utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.makeArrayKeys = exports.listFrom = exports.keyboard = exports.hoverList = exports.getDefaultValue = exports.expectConsoleOutput = exports.click = exports.childrenFrom = exports.carbonThemesJestTable = exports.assertStyleMatch = exports.assertKeyboardTraversal = exports.assertHoverTraversal = void 0;
+exports.makeArrayKeys = exports.listFrom = exports.keyboard = exports.hoverList = exports.getDefaultValue = exports.expectConsoleOutput = exports.click = exports.childrenFrom = exports.assertStyleMatch = exports.assertKeyboardTraversal = exports.assertHoverTraversal = void 0;
 Object.defineProperty(exports, "mockMatchMedia", {
   enumerable: true,
   get: function () {
@@ -14,7 +14,6 @@ exports.toCSSCase = exports.testStyledSystemWidth = exports.testStyledSystemSpac
 var _enzyme = require("enzyme");
 var _sprintfJs = require("sprintf-js");
 var _baseTheme = require("../style/themes/base/base-theme.config");
-var _themes = require("../style/themes");
 var _mockMatchMedia = require("./mock-match-media");
 /* eslint-disable jest/no-conditional-expect */
 /* eslint-disable jest/no-identical-title */
@@ -101,7 +100,6 @@ const assertCorrectTraversal = method => expect => ({
 };
 const assertKeyboardTraversal = exports.assertKeyboardTraversal = assertCorrectTraversal(() => keyboard.pressArrowDown)(expect);
 const assertHoverTraversal = exports.assertHoverTraversal = assertCorrectTraversal(wrapper => hoverList(wrapper))(expect);
-const carbonThemesJestTable = exports.carbonThemesJestTable = _themes.carbonThemeList.map(theme => [theme.name, theme]);
 const marginProps = [["m", "margin"], ["ml", "marginLeft"], ["mr", "marginRight"], ["mt", "marginTop"], ["mb", "marginBottom"], ["mx", "marginLeft"], ["mx", "marginRight"], ["my", "marginTop"], ["my", "marginBottom"]];
 const paddingProps = [["p", "padding"], ["pl", "paddingLeft"], ["pr", "paddingRight"], ["pt", "paddingTop"], ["pb", "paddingBottom"], ["px", "paddingLeft"], ["px", "paddingRight"], ["py", "paddingTop"], ["py", "paddingBottom"]];
 const colorProps = [["color", "color", "#CCCCCC"], ["bg", "background-color", "#FFFFFF"], ["opacity", "opacity", "0.5"]];

package/lib/components/carbon-provider/carbon-provider.component.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import type { ThemeObject } from "../../style/themes";
 export interface CarbonProviderProps {
     children: React.ReactNode;
-    /** Theme which specifies styles to apply to all child components. Set to `mintTheme` by default for legacy support. */
+    /** Theme which specifies styles to apply to all child components. Set to `sageTheme` by default. */
     theme?: Partial<ThemeObject>;
     /** Feature flag for opting in to the latest validation designs for components that support it.
      *

package/lib/components/carbon-provider/carbon-provider.component.js

@@ -16,7 +16,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const NewValidationContext = exports.NewValidationContext = /*#__PURE__*/(0, _react.createContext)({});
 const CarbonProvider = ({
   children,
-  theme = _themes.mintTheme,
+  theme = _themes.sageTheme,
   validationRedesignOptIn = false,
   roundedCornersOptOut = false,
   focusRedesignOptOut = false

package/lib/components/file-input/__internal__/file-upload-status/file-upload-status.component.js

@@ -31,10 +31,7 @@ const FileUploadStatus = ({
   switch (status) {
     case "uploading":
       buttonText = locale.fileInput.actions.cancel();
-      progressBar = statusProps.progress === undefined ? /*#__PURE__*/_react.default.createElement(_loaderBar.default, {
-        size: "small"
-      }) : /*#__PURE__*/_react.default.createElement(_progressTracker.default, {
-        size: "small",
+      progressBar = statusProps.progress === undefined ? /*#__PURE__*/_react.default.createElement(_loaderBar.default, null) : /*#__PURE__*/_react.default.createElement(_progressTracker.default, {
         progress: statusProps.progress,
         length: "100%"
       });

package/lib/components/file-input/__internal__/file-upload-status/file-upload-status.style.js

@@ -85,7 +85,6 @@ const StyledFileUploadStatus = exports.StyledFileUploadStatus = _styledComponent
     `;
 }}
   border-radius: var(--borderRadius050);
-  width: 100%;
 
   ${_progressTracker.StyledProgressBar}, ${_progressTracker.InnerBar} {
     border-radius: var(--borderRadius050);
@@ -102,5 +101,6 @@ const StyledFileUploadStatus = exports.StyledFileUploadStatus = _styledComponent
 
   ${_loaderBar.InnerBar} {
     background-color: var(--colorsSemanticNeutral500);
+    border-radius: var(--borderRadius050);
   }
 `;

package/lib/components/file-input/file-input.component.d.ts

@@ -19,13 +19,13 @@ export interface FileInputProps extends Pick<ValidationProps, "error">, Pick<Inp
     isVertical?: boolean;
     /** Label content */
     label?: string;
-    /** A valid CSS string for the max-height CSS property. Defaults to the same as the minHeight. */
+    /** A valid CSS string for the max-height CSS property. */
     maxHeight?: string;
     /** A valid CSS string for the max-width CSS property. Defaults to the same as the minWidth. */
     maxWidth?: string;
-    /** A valid CSS string for the min-height CSS property. Defaults to 40px. */
+    /** A valid CSS string for the min-height CSS property. */
     minHeight?: string;
-    /** A valid CSS string for the min-width CSS property. Defaults to 256px. */
+    /** A valid CSS string for the min-width CSS property. */
     minWidth?: string;
     /** onChange event handler. Accepts a list of all files currently entered to the input. */
     onChange: (files: FileList) => void;

package/lib/components/file-input/file-input.component.js

@@ -36,8 +36,8 @@ const FileInput = exports.FileInput = /*#__PURE__*/_react.default.forwardRef(({
   isVertical,
   maxHeight,
   maxWidth,
-  minHeight = "40px",
-  minWidth = "256px",
+  minHeight,
+  minWidth = "280px",
   name,
   onChange,
   required,
@@ -49,7 +49,7 @@ const FileInput = exports.FileInput = /*#__PURE__*/_react.default.forwardRef(({
   const textOnButton = buttonText || locale.fileInput.selectFile();
   const mainText = dragAndDropText || locale.fileInput.dragAndDrop();
   const sizeProps = {
-    maxHeight: maxHeight || (isVertical ? undefined : minHeight),
+    maxHeight: maxHeight || undefined,
     maxWidth: maxWidth || minWidth,
     minHeight,
     minWidth
@@ -146,7 +146,8 @@ const FileInput = exports.FileInput = /*#__PURE__*/_react.default.forwardRef(({
     error: error,
     onDragLeave: onDragLeave,
     onDragOver: onDragOver,
-    onDrop: onDrop
+    onDrop: onDrop,
+    isVertical: isVertical
   }, sizeProps), /*#__PURE__*/_react.default.createElement(_buttonMinor.default, {
     buttonType: "primary",
     onClick: onSelectFileClick

package/lib/components/file-input/file-input.style.d.ts

@@ -9,6 +9,7 @@ interface StyledFileInputPresentationProps extends Pick<ValidationProps, "error"
     maxWidth?: string;
     minHeight?: string;
     minWidth?: string;
+    isVertical?: boolean;
 }
 export declare const StyledFileInputPresentation: import("styled-components").StyledComponent<"div", any, StyledFileInputPresentationProps, never>;
 export {};

package/lib/components/file-input/file-input.style.js

@@ -24,8 +24,9 @@ const StyledFileInputPresentation = exports.StyledFileInputPresentation = _style
     min-height: ${minHeight};
     max-width: ${maxWidth};
     ${!hasUploadStatus && (0, _styledComponents.css)`
-      padding: var(--spacing150);
+      padding: 11px; /* not 12px to account for 1px border */
       max-height: ${maxHeight};
+      box-sizing: border-box;
     `}
   `}
 
@@ -33,7 +34,8 @@ const StyledFileInputPresentation = exports.StyledFileInputPresentation = _style
   hasUploadStatus,
   isDraggedOver,
   isDraggingFile,
-  error
+  error,
+  isVertical
 }) => {
   const borderWidthToken = error || isDraggingFile ? "borderWidth200" : "borderWidth100";
   let borderColorToken = "colorsUtilityMajor300";
@@ -49,13 +51,13 @@ const StyledFileInputPresentation = exports.StyledFileInputPresentation = _style
   }
   return !hasUploadStatus && (0, _styledComponents.css)`
         display: flex;
-        flex-direction: column;
+        ${isVertical && "flex-direction: column;"}
         flex-wrap: wrap;
         justify-content: center;
         align-content: center;
         align-items: center;
         text-align: center;
-        gap: var(--spacing150);
+        gap: var(--spacing100);
         border-radius: var(--borderRadius050);
         border: var(--${borderWidthToken}) dashed var(--${borderColorToken});
         background: var(--${backgroundColorToken});

package/lib/style/design-tokens/debug-theme.util.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _common = _interopRequireDefault(require("@sage/design-tokens/js/base/common"));
-var _mint = _interopRequireDefault(require("../themes/mint"));
+var _sage = _interopRequireDefault(require("../themes/sage"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
  *
@@ -36,7 +36,7 @@ const debugTheme = themeProperties => Object.fromEntries(Object.entries(themePro
   return [key, ""];
 }));
 var _default = exports.default = {
-  ...debugTheme(_mint.default),
+  ...debugTheme(_sage.default),
   compatibility: {
     ..._common.default
   },

package/lib/style/themes/index.d.ts

@@ -1,8 +1,5 @@
 import sageTheme from "./sage";
-import mintTheme from "./mint";
-import aegeanTheme from "./aegean";
-export { sageTheme, mintTheme, aegeanTheme };
+export { sageTheme };
 export { default as baseTheme } from "./base";
 export { default as noTheme } from "./none";
 export type { ThemeObject } from "./base";
-export declare const carbonThemeList: Partial<import("./base").ThemeObject>[];

package/lib/style/themes/index.js

@@ -3,25 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "aegeanTheme", {
-  enumerable: true,
-  get: function () {
-    return _aegean.default;
-  }
-});
 Object.defineProperty(exports, "baseTheme", {
   enumerable: true,
   get: function () {
     return _base.default;
   }
 });
-exports.carbonThemeList = void 0;
-Object.defineProperty(exports, "mintTheme", {
-  enumerable: true,
-  get: function () {
-    return _mint.default;
-  }
-});
 Object.defineProperty(exports, "noTheme", {
   enumerable: true,
   get: function () {
@@ -35,9 +22,6 @@ Object.defineProperty(exports, "sageTheme", {
   }
 });
 var _sage = _interopRequireDefault(require("./sage"));
-var _mint = _interopRequireDefault(require("./mint"));
-var _aegean = _interopRequireDefault(require("./aegean"));
 var _base = _interopRequireDefault(require("./base"));
 var _none = _interopRequireDefault(require("./none"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const carbonThemeList = exports.carbonThemeList = [_mint.default, _aegean.default, _sage.default];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/style/themes/sage/index.d.ts

@@ -1,3 +1,4 @@
+import { BasePalette } from "../base/base-theme.config";
 declare const _default: {
     compatibility: {
         metaName: string;
@@ -510,7 +511,7 @@ declare const _default: {
         opacity800: string;
     };
     name: string;
-    palette?: import("../base/base-theme.config").BasePalette | undefined;
+    palette?: BasePalette | undefined;
     spacing?: number | undefined;
     space?: string[] | undefined;
     colors?: Partial<import("../base/base-theme.config").Colors> | undefined;

package/lib/style/themes/sage/index.js

@@ -5,10 +5,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _common = _interopRequireDefault(require("@sage/design-tokens/js/base/common"));
-var _index = _interopRequireDefault(require("../mint/index"));
+var _base = require("../base");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var _default = exports.default = {
-  ..._index.default,
+  ...(0, _base.mergeWithBase)(palette => ({
+    colors: {
+      primary: palette.productGreenShade(23.5),
+      secondary: palette.productGreenShade(41),
+      tertiary: palette.productGreenShade(61),
+      loadingBarBackground: palette.productGreenTint(70)
+    }
+  })),
   compatibility: {
     ..._common.default
   },

package/lib/style/utils/color.js

@@ -21,7 +21,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * We could use a proxy to make those calls directly on the theme however styled-components expects the theme to be a
  * plain object and does not allow us to merge a theme from a ThemeProvider with a theme defined as a defaultProp if
  * both of those have a Proxy.
- * e.g. when the mint theme in the ThemeProvider is merged with the base theme in the defaultProps
+ * e.g. when the none theme in the ThemeProvider is merged with the base theme in the defaultProps
  *
  * The purpose of this function is to intercept any palette colors, we only want styled-system to deal with CSS strings
  * and theme.colors.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "131.1.0",
+  "version": "132.1.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",

package/esm/style/themes/aegean/aegean-theme.config.d.ts

@@ -1,4 +0,0 @@
-import { ThemeObject } from "../base";
-import { BasePalette } from "../base/base-theme.config";
-declare const _default: (palette: BasePalette) => Partial<ThemeObject>;
-export default _default;

package/esm/style/themes/aegean/aegean-theme.config.js

@@ -1,29 +0,0 @@
-export default (palette => {
-  return {
-    name: "aegean",
-    colors: {
-      primary: palette.productBlueShade(3),
-      secondary: palette.productBlueShade(23),
-      tertiary: palette.productBlueShade(43),
-      loadingBarBackground: palette.productBlueTint(70)
-    },
-    get compatibility() {
-      return {
-        colorsActionMajor150: this?.colors?.loadingBarBackground,
-        colorsActionMajor500: this?.colors?.primary,
-        colorsActionMajor600: this?.colors?.secondary,
-        colorsActionMajor700: this?.colors?.tertiary,
-        colorsComponentsMenuAutumnStandard600: this?.colors?.primary,
-        colorsComponentsMenuSpringChild600: this?.colors?.primary,
-        colorsComponentsMenuAutumnChild600: this?.colors?.primary,
-        colorsComponentsMenuSummerChild600: this?.colors?.primary,
-        colorsComponentsMenuWinterChild600: this?.colors?.primary,
-        colorsComponentsMenuSpringChildAlt600: this?.colors?.primary,
-        colorsComponentsMenuAutumnChildAlt600: this?.colors?.primary,
-        colorsComponentsMenuWinterChildAlt600: this?.colors?.primary,
-        colorsComponentsMenuSummerChildAlt600: this?.colors?.primary,
-        colorsBaseTheme: this?.colors?.primary
-      };
-    }
-  };
-});

package/esm/style/themes/aegean/index.d.ts

@@ -1,2 +0,0 @@
-declare const _default: Partial<import("../base").ThemeObject>;
-export default _default;

package/esm/style/themes/aegean/index.js

@@ -1,3 +0,0 @@
-import configureTheme from "./aegean-theme.config";
-import { mergeWithBase } from "../base";
-export default mergeWithBase(configureTheme);

package/esm/style/themes/medium/index.d.ts

@@ -1,2 +0,0 @@
-declare const _default: Partial<import("..").ThemeObject>;
-export default _default;

package/esm/style/themes/medium/index.js

@@ -1,8 +0,0 @@
-/* eslint-disable no-console */
-import { aegeanTheme } from "..";
-export default (() => {
-  console.warn(`"Medium Theme" has been renamed to "Aegean".
-All references to that theme should be updated to:
-import { aegeanTheme } from "carbon-react/lib/style/themes"`);
-  return aegeanTheme;
-})();

package/esm/style/themes/mint/index.d.ts

@@ -1,2 +0,0 @@
-declare const _default: Partial<import("../base").ThemeObject>;
-export default _default;

package/esm/style/themes/mint/index.js

@@ -1,3 +0,0 @@
-import configureTheme from "./mint-theme.config";
-import { mergeWithBase } from "../base";
-export default mergeWithBase(configureTheme);

package/esm/style/themes/mint/mint-theme.config.d.ts

@@ -1,4 +0,0 @@
-import { ThemeObject } from "../base";
-import { BasePalette } from "../base/base-theme.config";
-declare const _default: (palette: BasePalette) => Partial<ThemeObject>;
-export default _default;

package/esm/style/themes/mint/mint-theme.config.js

@@ -1,29 +0,0 @@
-export default (palette => {
-  return {
-    name: "mint",
-    colors: {
-      primary: palette.productGreenShade(23.5),
-      secondary: palette.productGreenShade(41),
-      tertiary: palette.productGreenShade(61),
-      loadingBarBackground: palette.productGreenTint(70)
-    },
-    get compatibility() {
-      return {
-        colorsActionMajor150: this?.colors?.loadingBarBackground,
-        colorsActionMajor500: this?.colors?.primary,
-        colorsActionMajor600: this?.colors?.secondary,
-        colorsActionMajor700: this?.colors?.tertiary,
-        colorsComponentsMenuAutumnStandard600: this?.colors?.primary,
-        colorsComponentsMenuSpringChild600: this?.colors?.primary,
-        colorsComponentsMenuAutumnChild600: this?.colors?.primary,
-        colorsComponentsMenuSummerChild600: this?.colors?.primary,
-        colorsComponentsMenuWinterChild600: this?.colors?.primary,
-        colorsComponentsMenuSpringChildAlt600: this?.colors?.primary,
-        colorsComponentsMenuAutumnChildAlt600: this?.colors?.primary,
-        colorsComponentsMenuWinterChildAlt600: this?.colors?.primary,
-        colorsComponentsMenuSummerChildAlt600: this?.colors?.primary,
-        colorsBaseTheme: this?.colors?.primary
-      };
-    }
-  };
-});

package/esm/style/themes/small/index.d.ts

@@ -1,2 +0,0 @@
-declare const _default: Partial<import("..").ThemeObject>;
-export default _default;

package/esm/style/themes/small/index.js

@@ -1,8 +0,0 @@
-/* eslint-disable no-console */
-import { mintTheme } from "..";
-export default (() => {
-  console.warn(`"Small Theme" has been renamed to "Mint".
-All references to that theme should be updated to:
-import { mintTheme } from 'carbon-react/lib/style/themes'`);
-  return mintTheme;
-})();

package/lib/style/themes/aegean/aegean-theme.config.d.ts

@@ -1,4 +0,0 @@
-import { ThemeObject } from "../base";
-import { BasePalette } from "../base/base-theme.config";
-declare const _default: (palette: BasePalette) => Partial<ThemeObject>;
-export default _default;

package/lib/style/themes/aegean/aegean-theme.config.js

@@ -1,36 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _default = palette => {
-  return {
-    name: "aegean",
-    colors: {
-      primary: palette.productBlueShade(3),
-      secondary: palette.productBlueShade(23),
-      tertiary: palette.productBlueShade(43),
-      loadingBarBackground: palette.productBlueTint(70)
-    },
-    get compatibility() {
-      return {
-        colorsActionMajor150: this?.colors?.loadingBarBackground,
-        colorsActionMajor500: this?.colors?.primary,
-        colorsActionMajor600: this?.colors?.secondary,
-        colorsActionMajor700: this?.colors?.tertiary,
-        colorsComponentsMenuAutumnStandard600: this?.colors?.primary,
-        colorsComponentsMenuSpringChild600: this?.colors?.primary,
-        colorsComponentsMenuAutumnChild600: this?.colors?.primary,
-        colorsComponentsMenuSummerChild600: this?.colors?.primary,
-        colorsComponentsMenuWinterChild600: this?.colors?.primary,
-        colorsComponentsMenuSpringChildAlt600: this?.colors?.primary,
-        colorsComponentsMenuAutumnChildAlt600: this?.colors?.primary,
-        colorsComponentsMenuWinterChildAlt600: this?.colors?.primary,
-        colorsComponentsMenuSummerChildAlt600: this?.colors?.primary,
-        colorsBaseTheme: this?.colors?.primary
-      };
-    }
-  };
-};
-exports.default = _default;

package/lib/style/themes/aegean/index.d.ts

@@ -1,2 +0,0 @@
-declare const _default: Partial<import("../base").ThemeObject>;
-export default _default;

package/lib/style/themes/aegean/index.js

@@ -1,10 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _aegeanTheme = _interopRequireDefault(require("./aegean-theme.config"));
-var _base = require("../base");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var _default = exports.default = (0, _base.mergeWithBase)(_aegeanTheme.default);

package/lib/style/themes/aegean/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "module": "../../../../esm/style/themes/aegean/index.js",
-  "main": "./index.js",
-  "types": "./index.d.ts"
-}

package/lib/style/themes/medium/index.d.ts

@@ -1,2 +0,0 @@
-declare const _default: Partial<import("..").ThemeObject>;
-export default _default;

package/lib/style/themes/medium/index.js

@@ -1,14 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _ = require("..");
-/* eslint-disable no-console */
-var _default = exports.default = (() => {
-  console.warn(`"Medium Theme" has been renamed to "Aegean".
-All references to that theme should be updated to:
-import { aegeanTheme } from "carbon-react/lib/style/themes"`);
-  return _.aegeanTheme;
-})();

package/lib/style/themes/medium/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "module": "../../../../esm/style/themes/medium/index.js",
-  "main": "./index.js",
-  "types": "./index.d.ts"
-}

package/lib/style/themes/mint/index.d.ts

@@ -1,2 +0,0 @@
-declare const _default: Partial<import("../base").ThemeObject>;
-export default _default;

package/lib/style/themes/mint/index.js

@@ -1,10 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _mintTheme = _interopRequireDefault(require("./mint-theme.config"));
-var _base = require("../base");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var _default = exports.default = (0, _base.mergeWithBase)(_mintTheme.default);

package/lib/style/themes/mint/mint-theme.config.d.ts

@@ -1,4 +0,0 @@
-import { ThemeObject } from "../base";
-import { BasePalette } from "../base/base-theme.config";
-declare const _default: (palette: BasePalette) => Partial<ThemeObject>;
-export default _default;

package/lib/style/themes/mint/mint-theme.config.js

@@ -1,36 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _default = palette => {
-  return {
-    name: "mint",
-    colors: {
-      primary: palette.productGreenShade(23.5),
-      secondary: palette.productGreenShade(41),
-      tertiary: palette.productGreenShade(61),
-      loadingBarBackground: palette.productGreenTint(70)
-    },
-    get compatibility() {
-      return {
-        colorsActionMajor150: this?.colors?.loadingBarBackground,
-        colorsActionMajor500: this?.colors?.primary,
-        colorsActionMajor600: this?.colors?.secondary,
-        colorsActionMajor700: this?.colors?.tertiary,
-        colorsComponentsMenuAutumnStandard600: this?.colors?.primary,
-        colorsComponentsMenuSpringChild600: this?.colors?.primary,
-        colorsComponentsMenuAutumnChild600: this?.colors?.primary,
-        colorsComponentsMenuSummerChild600: this?.colors?.primary,
-        colorsComponentsMenuWinterChild600: this?.colors?.primary,
-        colorsComponentsMenuSpringChildAlt600: this?.colors?.primary,
-        colorsComponentsMenuAutumnChildAlt600: this?.colors?.primary,
-        colorsComponentsMenuWinterChildAlt600: this?.colors?.primary,
-        colorsComponentsMenuSummerChildAlt600: this?.colors?.primary,
-        colorsBaseTheme: this?.colors?.primary
-      };
-    }
-  };
-};
-exports.default = _default;

package/lib/style/themes/mint/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "module": "../../../../esm/style/themes/mint/index.js",
-  "main": "./index.js",
-  "types": "./index.d.ts"
-}

package/lib/style/themes/small/index.d.ts

@@ -1,2 +0,0 @@
-declare const _default: Partial<import("..").ThemeObject>;
-export default _default;

package/lib/style/themes/small/index.js

@@ -1,14 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _ = require("..");
-/* eslint-disable no-console */
-var _default = exports.default = (() => {
-  console.warn(`"Small Theme" has been renamed to "Mint".
-All references to that theme should be updated to:
-import { mintTheme } from 'carbon-react/lib/style/themes'`);
-  return _.mintTheme;
-})();

package/lib/style/themes/small/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "module": "../../../../esm/style/themes/small/index.js",
-  "main": "./index.js",
-  "types": "./index.d.ts"
-}