carbon-react 110.9.0 → 110.10.0

package/esm/components/carousel/carousel.component.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
+export interface CarouselProps extends TagProps {
+    /** Individual tabs */
+    children?: React.ReactNode;
+    /** [legacy] Custom className */
+    className?: string;
+    /** Enables the next button */
+    enableNextButton?: boolean;
+    /** Enables the previous button */
+    enablePreviousButton?: boolean;
+    /** Enables the slide selector */
+    enableSlideSelector?: boolean;
+    /** The selected tab on page load */
+    initialSlideIndex?: number | string;
+    /** Action to be called on slide change */
+    onSlideChange?: (index: number, transitionDirection: string) => void;
+    /** The selected slide */
+    slideIndex?: number | string;
+}
+export declare const Carousel: {
+    ({ children, className, enableSlideSelector, enablePreviousButton, enableNextButton, initialSlideIndex, onSlideChange, slideIndex, ...props }: CarouselProps): JSX.Element;
+    displayName: string;
+};
+export default Carousel;

package/esm/components/carousel/carousel.component.js

@@ -2,16 +2,13 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React, { useCallback, useEffect, useRef, useState, useMemo } from "react";
 import PropTypes from "prop-types";
-import { compact } from "lodash";
-import { withTheme } from "styled-components";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
-import Slide from "./slide/slide.component";
 import { CarouselPreviousButtonWrapperStyle, CarouselNextButtonWrapperStyle, CarouselButtonStyle, CarouselStyledIconRight, CarouselStyledIconLeft, CarouselSelectorWrapperStyle, CarouselSelectorInputWrapperStyle, CarouselSelectorInputStyle, CarouselSelectorLabelStyle, CarouselWrapperStyle, CarouselSliderWrapper } from "./carousel.style";
 import guid from "../../__internal__/utils/helpers/guid";
 const NEXT = "next";
 const PREVIOUS = "previous";
 
-const BaseCarousel = ({
+const Carousel = ({
   children,
   className,
   enableSlideSelector = true,
@@ -24,10 +21,10 @@ const BaseCarousel = ({
 }) => {
   const [selectedSlideIndex, setSelectedSlideIndex] = useState(Number(slideIndex) || Number(initialSlideIndex));
   const transitionDirection = useRef(NEXT);
-  const lastSlideIndexProp = useRef(props.slideIndex);
-  const id = guid();
+  const lastSlideIndexProp = useRef(slideIndex);
+  const id = useMemo(() => guid(), []);
   const numOfSlides = useMemo(() => {
-    return Array.isArray(children) ? compact(children).length : 1;
+    return React.Children.toArray(children).filter(child => /*#__PURE__*/React.isValidElement(child)).length;
   }, [children]);
   const handleSlideChange = useCallback(newIndex => {
     setSelectedSlideIndex(newIndex);
@@ -133,32 +130,19 @@ const BaseCarousel = ({
   }, children), nextButton()), slideSelector());
 };
 
-BaseCarousel.propTypes = {
-  /** [legacy] Custom className */
-  className: PropTypes.string,
-
-  /** The selected tab on page load */
-  initialSlideIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
-  /** The selected slide */
-  slideIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
-  /** Individual tabs */
-  children: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
-
-  /** Enables the slide selector */
-  enableSlideSelector: PropTypes.bool,
-
-  /** Enables the previous button */
-  enablePreviousButton: PropTypes.bool,
-
-  /** Enables the next button */
-  enableNextButton: PropTypes.bool,
-
-  /** Action to be called on slide change */
-  onSlideChange: PropTypes.func
+Carousel.propTypes = {
+  "children": PropTypes.node,
+  "className": PropTypes.string,
+  "data-component": PropTypes.string,
+  "data-element": PropTypes.string,
+  "data-role": PropTypes.string,
+  "enableNextButton": PropTypes.bool,
+  "enablePreviousButton": PropTypes.bool,
+  "enableSlideSelector": PropTypes.bool,
+  "initialSlideIndex": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  "onSlideChange": PropTypes.func,
+  "slideIndex": PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 };
-const Carousel = withTheme(BaseCarousel);
+export { Carousel };
 Carousel.displayName = "Carousel";
-export default BaseCarousel;
-export { Carousel, Slide };
+export default Carousel;

package/esm/components/carousel/carousel.style.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+declare const CarouselNavigationStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const CarouselPreviousButtonWrapperStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const CarouselNextButtonWrapperStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const CarouselStyledIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
+declare const CarouselStyledIconLeft: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
+declare const CarouselStyledIconRight: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
+declare const CarouselButtonStyle: import("styled-components").StyledComponent<"button", any, {
+    type: "button";
+}, "type">;
+declare const CarouselSelectorInputStyle: import("styled-components").StyledComponent<"input", any, {}, never>;
+declare const CarouselSelectorLabelStyle: import("styled-components").StyledComponent<"label", any, {}, never>;
+declare const CarouselSelectorWrapperStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const CarouselSelectorInputWrapperStyle: import("styled-components").StyledComponent<"span", any, {}, never>;
+interface CarouselSliderWrapperProps {
+    elementIndex: number;
+}
+declare const CarouselSliderWrapper: import("styled-components").StyledComponent<"div", any, CarouselSliderWrapperProps, never>;
+declare const CarouselWrapperStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export { CarouselNavigationStyle, CarouselNextButtonWrapperStyle, CarouselPreviousButtonWrapperStyle, CarouselButtonStyle, CarouselStyledIcon, CarouselStyledIconLeft, CarouselStyledIconRight, CarouselSelectorWrapperStyle, CarouselSelectorInputWrapperStyle, CarouselSelectorInputStyle, CarouselSelectorLabelStyle, CarouselWrapperStyle, CarouselSliderWrapper, };

package/esm/components/carousel/index.d.ts

@@ -1 +1,4 @@
-export { Carousel, Slide } from "./carousel";
+export { Carousel } from "./carousel.component";
+export { default as Slide } from "./slide";
+export type { CarouselProps } from "./carousel.component";
+export type { SlideProps } from "./slide";

package/esm/components/carousel/index.js

@@ -1 +1,2 @@
-export { Carousel, Slide } from "./carousel.component";
+export { Carousel } from "./carousel.component";
+export { default as Slide } from "./slide";

package/esm/components/carousel/slide/index.d.ts

@@ -1 +1,2 @@
-export { default } from "./slide";
+export { default } from "./slide.component";
+export type { SlideProps } from "./slide.component";

package/esm/components/carousel/slide/slide.component.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export interface SlideProps {
+    children?: React.ReactNode;
+    onClick?: (ev: React.MouseEvent<HTMLDivElement>) => void;
+}
+declare const Slide: (props: SlideProps) => JSX.Element;
+export default Slide;

package/esm/components/carousel/slide/slide.component.js

@@ -2,13 +2,14 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 /* eslint-disable react/prop-types */
 import React from "react";
+import PropTypes from "prop-types";
 import tagComponent from "../../../__internal__/utils/helpers/tags/tags";
 import { SlideStyle } from "./slide.style";
-import baseTheme from "../../../style/themes/base";
 
 const Slide = props => /*#__PURE__*/React.createElement(SlideStyle, _extends({}, props, tagComponent("slide", props)));
 
-Slide.defaultProps = {
-  theme: baseTheme
+Slide.propTypes = {
+  "children": PropTypes.node,
+  "onClick": PropTypes.func
 };
 export default Slide;

package/esm/components/carousel/slide/slide.style.d.ts

@@ -0,0 +1,2 @@
+declare const SlideStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export { SlideStyle };

package/esm/components/carousel/slide.config.d.ts

@@ -0,0 +1,3 @@
+declare const slideAnimation: import("styled-components").FlattenSimpleInterpolation;
+declare const fadeAnimation: import("styled-components").FlattenSimpleInterpolation;
+export { slideAnimation, fadeAnimation };

package/esm/components/confirm/confirm.d.ts

@@ -1,6 +1,6 @@
 import { IconType } from "components/icon/icon-type";
 import * as React from "react";
-import { DialogProps } from "../dialog/dialog";
+import { DialogProps } from "../dialog";
 
 export interface ConfirmProps extends DialogProps {
   /** Color variants for new business themes: "primary" | "secondary" | "tertiary" | "dashed" | "darkBackground" */

package/esm/components/tile/tile.component.js

@@ -53,8 +53,8 @@ Tile.propTypes = {
   /** Styled system spacing props */
   ...propTypes.space,
 
-  /** Sets the theme of the tile - either 'tile' or 'transparent' */
-  variant: PropTypes.oneOf(["tile", "transparent"]),
+  /** Sets the theme of the tile - either 'tile', 'transparent' or 'active' */
+  variant: PropTypes.oneOf(["tile", "transparent", "active"]),
 
   /**
    * The content to render within the tile. Each child will be wrapped with

package/esm/components/tile/tile.config.js

@@ -1,2 +1,2 @@
 export const TILE_ORIENTATIONS = ["horizontal", "vertical"];
-export const TILE_THEMES = ["tile", "transparent"];
+export const TILE_THEMES = ["tile", "transparent", "active"];

package/esm/components/tile/tile.d.ts

@@ -2,8 +2,8 @@ import * as React from "react";
 import { SpaceProps } from "styled-system";
 
 export interface TileProps extends SpaceProps {
-  /** Sets the theme of the tile - either 'tile' or 'transparent' */
-  variant?: "tile" | "transparent";
+  /** Sets the theme of the tile - either 'tile', 'transparent' or 'active' */
+  variant?: "tile" | "transparent" | "active";
   /**
    * The content to render within the tile. Each child will be wrapped with
    * a TileContent wrapper, which allows any individual child component to take a

package/esm/components/tile/tile.style.js

@@ -64,8 +64,21 @@ const StyledTile = styled.div`
     ${space}
 
     box-sizing: border-box;
-    background-color: ${tileTheme === "tile" ? "var(--colorsUtilityYang100)" : "transparent"};
     border: 1px solid var(--colorsUtilityMajor100);
+
+    ${tileTheme === "tile" && css`
+      background-color: var(--colorsUtilityYang100);
+    `}
+
+    ${tileTheme === "transparent" && css`
+      background-color: transparent;
+    `}
+
+    ${tileTheme === "active" && css`
+      background-color: var(--colorsActionMajor025);
+      border-color: var(--colorsActionMajor500);
+    `}
+
     display: flex;
     flex-direction: ${isHorizontal ? "row" : "column"};
     position: relative;

package/lib/components/carousel/carousel.component.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
+export interface CarouselProps extends TagProps {
+    /** Individual tabs */
+    children?: React.ReactNode;
+    /** [legacy] Custom className */
+    className?: string;
+    /** Enables the next button */
+    enableNextButton?: boolean;
+    /** Enables the previous button */
+    enablePreviousButton?: boolean;
+    /** Enables the slide selector */
+    enableSlideSelector?: boolean;
+    /** The selected tab on page load */
+    initialSlideIndex?: number | string;
+    /** Action to be called on slide change */
+    onSlideChange?: (index: number, transitionDirection: string) => void;
+    /** The selected slide */
+    slideIndex?: number | string;
+}
+export declare const Carousel: {
+    ({ children, className, enableSlideSelector, enablePreviousButton, enableNextButton, initialSlideIndex, onSlideChange, slideIndex, ...props }: CarouselProps): JSX.Element;
+    displayName: string;
+};
+export default Carousel;

package/lib/components/carousel/carousel.component.js

@@ -3,26 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "Slide", {
-  enumerable: true,
-  get: function () {
-    return _slide.default;
-  }
-});
-exports.Carousel = exports.default = void 0;
+exports.default = exports.Carousel = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _lodash = require("lodash");
-
-var _styledComponents = require("styled-components");
-
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
 
-var _slide = _interopRequireDefault(require("./slide/slide.component"));
-
 var _carousel = require("./carousel.style");
 
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
@@ -38,7 +26,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 const NEXT = "next";
 const PREVIOUS = "previous";
 
-const BaseCarousel = ({
+const Carousel = ({
   children,
   className,
   enableSlideSelector = true,
@@ -51,10 +39,10 @@ const BaseCarousel = ({
 }) => {
   const [selectedSlideIndex, setSelectedSlideIndex] = (0, _react.useState)(Number(slideIndex) || Number(initialSlideIndex));
   const transitionDirection = (0, _react.useRef)(NEXT);
-  const lastSlideIndexProp = (0, _react.useRef)(props.slideIndex);
-  const id = (0, _guid.default)();
+  const lastSlideIndexProp = (0, _react.useRef)(slideIndex);
+  const id = (0, _react.useMemo)(() => (0, _guid.default)(), []);
   const numOfSlides = (0, _react.useMemo)(() => {
-    return Array.isArray(children) ? (0, _lodash.compact)(children).length : 1;
+    return _react.default.Children.toArray(children).filter(child => /*#__PURE__*/_react.default.isValidElement(child)).length;
   }, [children]);
   const handleSlideChange = (0, _react.useCallback)(newIndex => {
     setSelectedSlideIndex(newIndex);
@@ -160,33 +148,20 @@ const BaseCarousel = ({
   }, children), nextButton()), slideSelector());
 };
 
-BaseCarousel.propTypes = {
-  /** [legacy] Custom className */
-  className: _propTypes.default.string,
-
-  /** The selected tab on page load */
-  initialSlideIndex: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-
-  /** The selected slide */
-  slideIndex: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-
-  /** Individual tabs */
-  children: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.object]),
-
-  /** Enables the slide selector */
-  enableSlideSelector: _propTypes.default.bool,
-
-  /** Enables the previous button */
-  enablePreviousButton: _propTypes.default.bool,
-
-  /** Enables the next button */
-  enableNextButton: _propTypes.default.bool,
-
-  /** Action to be called on slide change */
-  onSlideChange: _propTypes.default.func
-};
-const Carousel = (0, _styledComponents.withTheme)(BaseCarousel);
 exports.Carousel = Carousel;
+Carousel.propTypes = {
+  "children": _propTypes.default.node,
+  "className": _propTypes.default.string,
+  "data-component": _propTypes.default.string,
+  "data-element": _propTypes.default.string,
+  "data-role": _propTypes.default.string,
+  "enableNextButton": _propTypes.default.bool,
+  "enablePreviousButton": _propTypes.default.bool,
+  "enableSlideSelector": _propTypes.default.bool,
+  "initialSlideIndex": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  "onSlideChange": _propTypes.default.func,
+  "slideIndex": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
+};
 Carousel.displayName = "Carousel";
-var _default = BaseCarousel;
+var _default = Carousel;
 exports.default = _default;

package/lib/components/carousel/carousel.style.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+declare const CarouselNavigationStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const CarouselPreviousButtonWrapperStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const CarouselNextButtonWrapperStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const CarouselStyledIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
+declare const CarouselStyledIconLeft: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
+declare const CarouselStyledIconRight: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
+declare const CarouselButtonStyle: import("styled-components").StyledComponent<"button", any, {
+    type: "button";
+}, "type">;
+declare const CarouselSelectorInputStyle: import("styled-components").StyledComponent<"input", any, {}, never>;
+declare const CarouselSelectorLabelStyle: import("styled-components").StyledComponent<"label", any, {}, never>;
+declare const CarouselSelectorWrapperStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const CarouselSelectorInputWrapperStyle: import("styled-components").StyledComponent<"span", any, {}, never>;
+interface CarouselSliderWrapperProps {
+    elementIndex: number;
+}
+declare const CarouselSliderWrapper: import("styled-components").StyledComponent<"div", any, CarouselSliderWrapperProps, never>;
+declare const CarouselWrapperStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export { CarouselNavigationStyle, CarouselNextButtonWrapperStyle, CarouselPreviousButtonWrapperStyle, CarouselButtonStyle, CarouselStyledIcon, CarouselStyledIconLeft, CarouselStyledIconRight, CarouselSelectorWrapperStyle, CarouselSelectorInputWrapperStyle, CarouselSelectorInputStyle, CarouselSelectorLabelStyle, CarouselWrapperStyle, CarouselSliderWrapper, };

package/lib/components/carousel/index.d.ts

@@ -1 +1,4 @@
-export { Carousel, Slide } from "./carousel";
+export { Carousel } from "./carousel.component";
+export { default as Slide } from "./slide";
+export type { CarouselProps } from "./carousel.component";
+export type { SlideProps } from "./slide";

package/lib/components/carousel/index.js

@@ -12,8 +12,12 @@ Object.defineProperty(exports, "Carousel", {
 Object.defineProperty(exports, "Slide", {
   enumerable: true,
   get: function () {
-    return _carousel.Slide;
+    return _slide.default;
   }
 });
 
-var _carousel = require("./carousel.component");
+var _carousel = require("./carousel.component");
+
+var _slide = _interopRequireDefault(require("./slide"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/components/carousel/slide/index.d.ts

@@ -1 +1,2 @@
-export { default } from "./slide";
+export { default } from "./slide.component";
+export type { SlideProps } from "./slide.component";

package/lib/components/carousel/slide/slide.component.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export interface SlideProps {
+    children?: React.ReactNode;
+    onClick?: (ev: React.MouseEvent<HTMLDivElement>) => void;
+}
+declare const Slide: (props: SlideProps) => JSX.Element;
+export default Slide;

package/lib/components/carousel/slide/slide.component.js

@@ -7,20 +7,21 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _tags = _interopRequireDefault(require("../../../__internal__/utils/helpers/tags/tags"));
 
 var _slide = require("./slide.style");
 
-var _base = _interopRequireDefault(require("../../../style/themes/base"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 const Slide = props => /*#__PURE__*/_react.default.createElement(_slide.SlideStyle, _extends({}, props, (0, _tags.default)("slide", props)));
 
-Slide.defaultProps = {
-  theme: _base.default
+Slide.propTypes = {
+  "children": _propTypes.default.node,
+  "onClick": _propTypes.default.func
 };
 var _default = Slide;
 exports.default = _default;

package/lib/components/carousel/slide/slide.style.d.ts

@@ -0,0 +1,2 @@
+declare const SlideStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export { SlideStyle };

package/lib/components/carousel/slide.config.d.ts

@@ -0,0 +1,3 @@
+declare const slideAnimation: import("styled-components").FlattenSimpleInterpolation;
+declare const fadeAnimation: import("styled-components").FlattenSimpleInterpolation;
+export { slideAnimation, fadeAnimation };

package/lib/components/confirm/confirm.d.ts

@@ -1,6 +1,6 @@
 import { IconType } from "components/icon/icon-type";
 import * as React from "react";
-import { DialogProps } from "../dialog/dialog";
+import { DialogProps } from "../dialog";
 
 export interface ConfirmProps extends DialogProps {
   /** Color variants for new business themes: "primary" | "secondary" | "tertiary" | "dashed" | "darkBackground" */

package/lib/components/tile/tile.component.js

@@ -66,8 +66,8 @@ Tile.propTypes = {
   /** Styled system spacing props */
   ..._propTypes2.default.space,
 
-  /** Sets the theme of the tile - either 'tile' or 'transparent' */
-  variant: _propTypes.default.oneOf(["tile", "transparent"]),
+  /** Sets the theme of the tile - either 'tile', 'transparent' or 'active' */
+  variant: _propTypes.default.oneOf(["tile", "transparent", "active"]),
 
   /**
    * The content to render within the tile. Each child will be wrapped with

package/lib/components/tile/tile.config.js

@@ -6,5 +6,5 @@ Object.defineProperty(exports, "__esModule", {
 exports.TILE_THEMES = exports.TILE_ORIENTATIONS = void 0;
 const TILE_ORIENTATIONS = ["horizontal", "vertical"];
 exports.TILE_ORIENTATIONS = TILE_ORIENTATIONS;
-const TILE_THEMES = ["tile", "transparent"];
+const TILE_THEMES = ["tile", "transparent", "active"];
 exports.TILE_THEMES = TILE_THEMES;

package/lib/components/tile/tile.d.ts

@@ -2,8 +2,8 @@ import * as React from "react";
 import { SpaceProps } from "styled-system";
 
 export interface TileProps extends SpaceProps {
-  /** Sets the theme of the tile - either 'tile' or 'transparent' */
-  variant?: "tile" | "transparent";
+  /** Sets the theme of the tile - either 'tile', 'transparent' or 'active' */
+  variant?: "tile" | "transparent" | "active";
   /**
    * The content to render within the tile. Each child will be wrapped with
    * a TileContent wrapper, which allows any individual child component to take a

package/lib/components/tile/tile.style.js

@@ -83,8 +83,21 @@ const StyledTile = _styledComponents.default.div`
     ${_styledSystem.space}
 
     box-sizing: border-box;
-    background-color: ${tileTheme === "tile" ? "var(--colorsUtilityYang100)" : "transparent"};
     border: 1px solid var(--colorsUtilityMajor100);
+
+    ${tileTheme === "tile" && (0, _styledComponents.css)`
+      background-color: var(--colorsUtilityYang100);
+    `}
+
+    ${tileTheme === "transparent" && (0, _styledComponents.css)`
+      background-color: transparent;
+    `}
+
+    ${tileTheme === "active" && (0, _styledComponents.css)`
+      background-color: var(--colorsActionMajor025);
+      border-color: var(--colorsActionMajor500);
+    `}
+
     display: flex;
     flex-direction: ${isHorizontal ? "row" : "column"};
     position: relative;

package/package.json

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

package/esm/components/carousel/carousel.d.ts

@@ -1,28 +0,0 @@
-import * as React from "react";
-import Slide from "./slide";
-
-export interface CarouselProps {
-  /** Individual tabs */
-  children?: React.ReactNode;
-  /** [legacy] Custom className */
-  className?: string;
-  /** Enables the next button */
-  enableNextButton?: boolean;
-  /** Enables the previous button */
-  enablePreviousButton?: boolean;
-  /** Enables the slide selector */
-  enableSlideSelector?: boolean;
-  /** The selected tab on page load */
-  initialSlideIndex?: number | string;
-  /** Action to be called on slide change */
-  onSlideChange?: (index: number, transitionDirection: string) => void;
-  /** The selected slide */
-  slideIndex?: number | string;
-  /** theme is used only to support legacy code */
-  theme?: Record<string, unknown>;
-}
-
-declare class Carousel extends React.Component<CarouselProps> {}
-
-export default Carousel;
-export { Carousel, Slide };

package/esm/components/carousel/slide/slide.d.ts

@@ -1,9 +0,0 @@
-import * as React from "react";
-
-export interface SlideProps {
-  theme?: Record<string, unknown>;
-}
-
-declare function Slide(props: React.PropsWithChildren<SlideProps>): JSX.Element;
-
-export default Slide;

package/lib/components/carousel/carousel.d.ts

@@ -1,28 +0,0 @@
-import * as React from "react";
-import Slide from "./slide";
-
-export interface CarouselProps {
-  /** Individual tabs */
-  children?: React.ReactNode;
-  /** [legacy] Custom className */
-  className?: string;
-  /** Enables the next button */
-  enableNextButton?: boolean;
-  /** Enables the previous button */
-  enablePreviousButton?: boolean;
-  /** Enables the slide selector */
-  enableSlideSelector?: boolean;
-  /** The selected tab on page load */
-  initialSlideIndex?: number | string;
-  /** Action to be called on slide change */
-  onSlideChange?: (index: number, transitionDirection: string) => void;
-  /** The selected slide */
-  slideIndex?: number | string;
-  /** theme is used only to support legacy code */
-  theme?: Record<string, unknown>;
-}
-
-declare class Carousel extends React.Component<CarouselProps> {}
-
-export default Carousel;
-export { Carousel, Slide };

package/lib/components/carousel/slide/slide.d.ts

@@ -1,9 +0,0 @@
-import * as React from "react";
-
-export interface SlideProps {
-  theme?: Record<string, unknown>;
-}
-
-declare function Slide(props: React.PropsWithChildren<SlideProps>): JSX.Element;
-
-export default Slide;