carbon-react 125.8.0 → 125.9.0

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

@@ -9,7 +9,7 @@ export declare type BoxSizing = "content-box" | "border-box";
 declare type DesignTokensType = keyof typeof DesignTokens;
 declare type BoxShadowsType = Extract<DesignTokensType, `boxShadow${string}`>;
 declare type BorderRadiusType = Extract<DesignTokensType, `borderRadius${string}`>;
-export interface BoxProps extends SpaceProps, LayoutProps, FlexboxProps, Omit<GridProps, "gridGap" | "gridRowGap" | "gridColumnGap">, TagProps, Omit<PositionProps, "zIndex"> {
+export interface BoxProps extends FlexboxProps, Omit<GridProps, "gridGap" | "gridRowGap" | "gridColumnGap">, LayoutProps, Omit<PositionProps, "zIndex">, SpaceProps, TagProps {
     as?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
     /** Set the ID attribute of the Box component */
     id?: string;

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { StyledImageProps } from "./image.style";
 export declare const Image: {
-    ({ alt, decorative, src, children, ...rest }: StyledImageProps): React.JSX.Element;
+    ({ alt, decorative, src, children, position, top, right, bottom, left, ...rest }: StyledImageProps): React.JSX.Element;
     displayName: string;
 };
 export default Image;

package/esm/components/image/image.component.js

@@ -8,6 +8,11 @@ export const Image = ({
   decorative = false,
   src,
   children,
+  position,
+  top,
+  right,
+  bottom,
+  left,
   ...rest
 }) => {
   !(!src || !children) ? process.env.NODE_ENV !== "production" ? invariant(false, "The 'Image' component renders as an 'img' element when the 'src' prop is used and therefore does not accept children.") : invariant(false) : void 0;
@@ -15,7 +20,12 @@ export const Image = ({
   return /*#__PURE__*/React.createElement(StyledImage, _extends({
     alt: alt,
     decorative: decorative,
-    src: src
+    src: src,
+    position: position,
+    top: top,
+    right: right,
+    bottom: bottom,
+    left: left
   }, rest), children);
 };
 Image.displayName = "Image";

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

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { MarginProps, BackgroundProps, LayoutProps } from "styled-system";
-export interface StyledImageProps extends MarginProps, BackgroundProps, LayoutProps {
+export declare type PositionProps = "absolute" | "fixed" | "relative" | "static" | "sticky";
+export interface StyledImageProps extends BackgroundProps, LayoutProps, MarginProps {
     /** HTML alt property to display when an img fails to load */
     alt?: string;
     /** Prop to specify if the image is decorative  */
@@ -11,11 +12,26 @@ export interface StyledImageProps extends MarginProps, BackgroundProps, LayoutPr
     hidden?: boolean;
     /** Children elements, will only render if component is a div element */
     children?: React.ReactNode;
+    /** Any valid CSS string for position */
+    position?: PositionProps;
+    /** Any valid CSS string for top */
+    top?: string;
+    /** Any valid CSS string for right */
+    right?: string;
+    /** Any valid CSS string for bottom */
+    bottom?: string;
+    /** Any valid CSS string for left */
+    left?: string;
 }
 declare const StyledImage: import("styled-components").StyledComponent<"div", any, {
     children: import("react").ReactNode;
     src: string | undefined;
     hidden: boolean;
+    position: PositionProps | undefined;
+    top: string | undefined;
+    right: string | undefined;
+    bottom: string | undefined;
+    left: string | undefined;
     as?: string | undefined;
-} & StyledImageProps, "hidden" | "children" | "as" | "src">;
+} & StyledImageProps, "hidden" | "children" | "as" | "left" | "right" | "bottom" | "top" | "src" | "position">;
 export { StyledImage };

package/esm/components/image/image.style.js

@@ -4,18 +4,42 @@ import { baseTheme } from "../../style/themes";
 const StyledImage = styled.div.attrs(({
   src,
   children,
-  hidden = false
+  hidden = false,
+  position,
+  top,
+  right,
+  bottom,
+  left
 }) => ({
   ...(src && {
     as: "img"
   }),
   children: src ? undefined : children,
   src,
-  hidden
+  hidden,
+  position,
+  top,
+  right,
+  bottom,
+  left
 }))`
   ${margin}
   ${layout}
 
+  ${({
+  position,
+  top,
+  right,
+  bottom,
+  left
+}) => css`
+    position: ${position};
+    top: ${top};
+    right: ${right};
+    bottom: ${bottom};
+    left: ${left};
+  `}
+
   ${({
   as
 }) => as !== "img" && css`

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

@@ -9,7 +9,7 @@ export declare type BoxSizing = "content-box" | "border-box";
 declare type DesignTokensType = keyof typeof DesignTokens;
 declare type BoxShadowsType = Extract<DesignTokensType, `boxShadow${string}`>;
 declare type BorderRadiusType = Extract<DesignTokensType, `borderRadius${string}`>;
-export interface BoxProps extends SpaceProps, LayoutProps, FlexboxProps, Omit<GridProps, "gridGap" | "gridRowGap" | "gridColumnGap">, TagProps, Omit<PositionProps, "zIndex"> {
+export interface BoxProps extends FlexboxProps, Omit<GridProps, "gridGap" | "gridRowGap" | "gridColumnGap">, LayoutProps, Omit<PositionProps, "zIndex">, SpaceProps, TagProps {
     as?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
     /** Set the ID attribute of the Box component */
     id?: string;

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { StyledImageProps } from "./image.style";
 export declare const Image: {
-    ({ alt, decorative, src, children, ...rest }: StyledImageProps): React.JSX.Element;
+    ({ alt, decorative, src, children, position, top, right, bottom, left, ...rest }: StyledImageProps): React.JSX.Element;
     displayName: string;
 };
 export default Image;

package/lib/components/image/image.component.js

@@ -15,6 +15,11 @@ const Image = ({
   decorative = false,
   src,
   children,
+  position,
+  top,
+  right,
+  bottom,
+  left,
   ...rest
 }) => {
   !(!src || !children) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "The 'Image' component renders as an 'img' element when the 'src' prop is used and therefore does not accept children.") : (0, _invariant.default)(false) : void 0;
@@ -22,7 +27,12 @@ const Image = ({
   return /*#__PURE__*/_react.default.createElement(_image.StyledImage, _extends({
     alt: alt,
     decorative: decorative,
-    src: src
+    src: src,
+    position: position,
+    top: top,
+    right: right,
+    bottom: bottom,
+    left: left
   }, rest), children);
 };
 exports.Image = Image;

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

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { MarginProps, BackgroundProps, LayoutProps } from "styled-system";
-export interface StyledImageProps extends MarginProps, BackgroundProps, LayoutProps {
+export declare type PositionProps = "absolute" | "fixed" | "relative" | "static" | "sticky";
+export interface StyledImageProps extends BackgroundProps, LayoutProps, MarginProps {
     /** HTML alt property to display when an img fails to load */
     alt?: string;
     /** Prop to specify if the image is decorative  */
@@ -11,11 +12,26 @@ export interface StyledImageProps extends MarginProps, BackgroundProps, LayoutPr
     hidden?: boolean;
     /** Children elements, will only render if component is a div element */
     children?: React.ReactNode;
+    /** Any valid CSS string for position */
+    position?: PositionProps;
+    /** Any valid CSS string for top */
+    top?: string;
+    /** Any valid CSS string for right */
+    right?: string;
+    /** Any valid CSS string for bottom */
+    bottom?: string;
+    /** Any valid CSS string for left */
+    left?: string;
 }
 declare const StyledImage: import("styled-components").StyledComponent<"div", any, {
     children: import("react").ReactNode;
     src: string | undefined;
     hidden: boolean;
+    position: PositionProps | undefined;
+    top: string | undefined;
+    right: string | undefined;
+    bottom: string | undefined;
+    left: string | undefined;
     as?: string | undefined;
-} & StyledImageProps, "hidden" | "children" | "as" | "src">;
+} & StyledImageProps, "hidden" | "children" | "as" | "left" | "right" | "bottom" | "top" | "src" | "position">;
 export { StyledImage };

package/lib/components/image/image.style.js

@@ -12,18 +12,42 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const StyledImage = exports.StyledImage = _styledComponents.default.div.attrs(({
   src,
   children,
-  hidden = false
+  hidden = false,
+  position,
+  top,
+  right,
+  bottom,
+  left
 }) => ({
   ...(src && {
     as: "img"
   }),
   children: src ? undefined : children,
   src,
-  hidden
+  hidden,
+  position,
+  top,
+  right,
+  bottom,
+  left
 }))`
   ${_styledSystem.margin}
   ${_styledSystem.layout}
 
+  ${({
+  position,
+  top,
+  right,
+  bottom,
+  left
+}) => (0, _styledComponents.css)`
+    position: ${position};
+    top: ${top};
+    right: ${right};
+    bottom: ${bottom};
+    left: ${left};
+  `}
+
   ${({
   as
 }) => as !== "img" && (0, _styledComponents.css)`

package/package.json

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