carbon-react 162.12.0-beta.1 → 162.13.0

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

@@ -0,0 +1,110 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+import { IconType } from "../icon";
+import { CommonInputProps } from "../../__internal__/legacy-input";
+import { ValidationProps } from "../../__internal__/validations";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+export declare const SIZE_DEFAULT = "medium";
+export declare const LABEL_WIDTH_DEFAULT = 30;
+export declare const LABEL_VALIDATION_DEFAULT = false;
+export interface CommonTextboxProps extends Pick<ValidationProps, "error" | "warning">, MarginProps, Omit<CommonInputProps, "size" | "inputBorderRadius">, TagProps {
+    /** Prop to specify the aria-labelledby property of the component */
+    "aria-labelledby"?: string;
+    /** @deprecated `adaptiveLabelBreakpoint` has been deprecated, the functionality will no longer work. */
+    adaptiveLabelBreakpoint?: number;
+    /** Integer to determine a timeout for the deferred callback */
+    deferTimeout?: number;
+    /** A hint string rendered before the input but after the label. Intended to describe the purpose or content of the input. */
+    inputHint?: string;
+    /**
+     * @deprecated `fieldHelp` has been deprecated, `inputHint` should be used instead.
+     *  [Legacy] Help content to be displayed under an input. */
+    fieldHelp?: React.ReactNode;
+    /**
+     * An optional alternative for props.value, this is useful if the
+     * real value is an ID but you want to show a human-readable version.
+     */
+    formattedValue?: string;
+    /**
+     * Unique identifier for the input.
+     * Label id will be based on it, using following pattern: [id]-label.
+     * Will use a randomly generated GUID if none is provided.
+     */
+    id?: string;
+    /** Type of the icon that will be rendered next to the input */
+    inputIcon?: IconType | React.ReactNode;
+    /** Optional handler for click event on Textbox icon */
+    iconOnClick?: (ev: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
+    /** Optional handler for mouse down event on Textbox icon */
+    iconOnMouseDown?: (ev: React.MouseEvent<HTMLElement>) => void;
+    /** Overrides the default tabindex of the component */
+    iconTabIndex?: number;
+    /** The width of the input as a percentage */
+    inputWidth?: number;
+    /**
+     * Prop for specifying the max width of the input.
+     * Leaving the `maxWidth` prop with no value will default the width to '100%'
+     */
+    maxWidth?: string;
+    /** Additional child elements to display before the input */
+    leftChildren?: React.ReactNode;
+    /** Label content */
+    label?: string;
+    /** @deprecated `labelAlign` has been deprecated, the functionality will no longer work. */
+    labelAlign?: "left" | "right";
+    /**
+     * @deprecated `labelHelp` has been deprecated, `inputHint` should be used instead.
+     * [Legacy] Text applied to label help tooltip. When opted into new design validations
+     * string values will render as a hint above the input, unless an `inputHint`
+     * prop is also passed.
+     */
+    labelHelp?: React.ReactNode;
+    /** When true label is inline. */
+    labelInline?: boolean;
+    /** @deprecated `labelSpacing` has been deprecated, the functionality will no longer work.*/
+    labelSpacing?: 1 | 2;
+    /** @deprecated `labelWidth` has been deprecated, the functionality will no longer work. */
+    labelWidth?: number;
+    /** Specify a callback triggered on change */
+    onChange: (ev: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Deferred callback to be called after the onChange event */
+    onChangeDeferred?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Specify a callback triggered on click */
+    onClick?: (ev: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
+    /** Event handler for the focus event */
+    onFocus?: (ev: React.FocusEvent<HTMLInputElement>) => void;
+    /** Event handler for the blur event */
+    onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
+    /** Event handler for the mouse down event */
+    onMouseDown?: (ev: React.MouseEvent<HTMLElement>) => void;
+    /** Emphasized part of the displayed text */
+    prefix?: string;
+    /** @deprecated `reverse` has been deprecated, the functionality will no longer work. */
+    reverse?: boolean;
+    /** Size of an input */
+    size?: "small" | "medium" | "large";
+    /** @deprecated `validationOnLabel` has been deprecated, the functionality will no longer work. */
+    validationOnLabel?: boolean;
+    /** @deprecated `tooltipPosition` has been deprecated, the functionality will no longer work. */
+    tooltipPosition?: "top" | "bottom" | "left" | "right";
+    /** @deprecated `helpAriaLabel` has been deprecated, the functionality will no longer work. */
+    helpAriaLabel?: string;
+    /** @deprecated `tooltipId` has been deprecated, the functionality will no longer work. */
+    tooltipId?: string;
+    /** @private @internal @ignore */
+    "data-component"?: string;
+    /** Render the ValidationMessage above the Textbox input when validationRedesignOptIn flag is set */
+    validationMessagePositionTop?: boolean;
+    /** @deprecated `info` has been deprecated, the functionality will no longer work. */
+    info?: string | boolean;
+}
+export interface TextboxProps extends Omit<CommonTextboxProps, "defaultValue"> {
+    /** Content to be rendered next to the input */
+    children?: React.ReactNode;
+    /** Container for DatePicker or SelectList components */
+    positionedChildren?: React.ReactNode;
+    /** Character limit of the textarea */
+    characterLimit?: number;
+}
+export declare const Textbox: React.ForwardRefExoticComponent<TextboxProps & React.RefAttributes<HTMLInputElement>>;
+export default Textbox;

package/esm/components/textbox/textbox.component.js

@@ -0,0 +1 @@
+import{jsxs as e,Fragment as n,jsx as r}from"react/jsx-runtime";import t,{useRef as i,useCallback as o,useState as l}from"react";import{TextInput as a}from"./__internal__/__next__/text-input.component.js";import c from"../../__internal__/input-icon-toggle/input-icon-toggle.component.js";import d from"../../hooks/useCharacterCount/useCharacterCount.js";import u from"../../hooks/__internal__/useUniqueId/index.js";import p from"../../__internal__/utils/helpers/combine-refs/index.js";function s(e,n,r){return n in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function f(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{},t=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(t=t.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),t.forEach((function(n){s(e,n,r[n])}))}return e}const b="medium",m=30,h=!1,y=new Set(["adaptiveLabelBreakpoint","info","helpAriaLabel","labelAlign","labelWidth","labelSpacing","labelId","reverse","tooltipPosition","tooltipId","validationOnLabel"]),O=t.forwardRef(((t,s)=>{var{"aria-describedby":m,"aria-labelledby":h,characterLimit:O,children:g,"data-component":j,"data-element":w,"data-role":v,deferTimeout:C,disabled:_,error:x,formattedValue:P,fieldHelp:k,iconOnClick:I,iconOnMouseDown:D,iconTabIndex:S,id:T,inputHint:M,inputIcon:H,inputWidth:W,label:B,labelHelp:L,labelInline:q,leftChildren:z,maxWidth:E,name:F,onBlur:A,onFocus:V,onChange:$,onChangeDeferred:R,onClick:U,onMouseDown:G,placeholder:J,positionedChildren:K,prefix:N,readOnly:Q,required:X,size:Y=b,warning:Z,validationMessagePositionTop:ee=!0,value:ne}=t,re=function(e,n){if(null==e)return{};var r,t,i=function(e,n){if(null==e)return{};var r,t,i={},o=Object.keys(e);for(t=0;t<o.length;t++)r=o[t],n.indexOf(r)>=0||(i[r]=e[r]);return i}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(t=0;t<o.length;t++)r=o[t],n.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}(t,["aria-describedby","aria-labelledby","characterLimit","children","data-component","data-element","data-role","deferTimeout","disabled","error","formattedValue","fieldHelp","iconOnClick","iconOnMouseDown","iconTabIndex","id","inputHint","inputIcon","inputWidth","label","labelHelp","labelInline","leftChildren","maxWidth","name","onBlur","onFocus","onChange","onChangeDeferred","onClick","onMouseDown","placeholder","positionedChildren","prefix","readOnly","required","size","warning","validationMessagePositionTop","value"]);const[te,ie]=u(T,F),oe=i(null),le=i(null),ae=p(s,le),ce=o((e=>{if(_||Q)return;const n=null!=I?I:U;null==n||n(e)}),[I,U,_,Q]),de=o((e=>{if(_||Q)return;const n=null!=D?D:G;null==n||n(e)}),[D,G,_,Q]),ue="string"==typeof H?r(c,{inputIcon:H,disabled:_,error:x,iconTabIndex:S,onClick:ce,onMouseDown:de,readOnly:Q,size:Y,warning:Z,blockFocusStyling:!0}):null,pe=o((e=>{R&&(oe.current&&clearTimeout(oe.current),oe.current=setTimeout((()=>{R(e)}),C||750))}),[R,C]),se=o((e=>{$(e),pe(e)}),[$,pe]),fe="string"==typeof ne?ne:"",[be,me]=l("off"),[he,ye]=d(fe,O,be),Oe=[m,ye,k?`${te}-field-help`:void 0].filter(Boolean).join(" "),ge="string"==typeof L?L:void 0;return e(n,{children:[r(a,(je=f({},(ve=re,Object.fromEntries(Object.entries(ve).filter((([e])=>!y.has(e)))))),we={id:te,label:B||"",labelInline:q,disabled:_,readOnly:Q,size:Y,prefix:N,inputHint:M||ge,inputIcon:ue,placeholder:J,value:"string"==typeof P?P:null!=ne?ne:"",inputWidth:W,error:x,warning:Z,"aria-describedby":Oe,"aria-labelledby":h,required:X,name:ie,onChange:se,onBlur:e=>{O&&me("off"),null==A||A(e)},onFocus:e=>{O&&me("polite"),null==V||V(e)},onClick:U,onMouseDown:G,ref:ae,maxWidth:E,"data-component":j,"data-element":w,"data-role":v,validationMessagePositionTop:ee,leftChildren:z||K,children:g},we=null!=we?we:{},Object.getOwnPropertyDescriptors?Object.defineProperties(je,Object.getOwnPropertyDescriptors(we)):function(e){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n.push.apply(n,r)}return n}(Object(we)).forEach((function(e){Object.defineProperty(je,e,Object.getOwnPropertyDescriptor(we,e))})),je)),he,k&&r("span",{"data-element":"help",style:{display:"block",marginTop:"calc(8px - var(--fieldSpacing, 0px))",whiteSpace:"pre-wrap",width:W?W-1+"%":"100%",float:"right"},id:`${te}-field-help`,"aria-disabled":_||void 0,children:k})]});var je,we,ve}));export{h as LABEL_VALIDATION_DEFAULT,m as LABEL_WIDTH_DEFAULT,b as SIZE_DEFAULT,O as Textbox,O as default};

package/esm/components/textbox/utils.d.ts

@@ -0,0 +1,83 @@
+export interface CommonTextboxArgs {
+    prefix: string;
+    fieldHelp: string;
+    label: string;
+    labelHelp: string;
+    placeholder: string;
+}
+export declare const getCommonTextboxArgs: (isNewValidation?: boolean, autoFocusDefault?: boolean, disabledDefault?: boolean) => {
+    size: string;
+    inputIcon: undefined;
+    required: boolean;
+    characterLimit: undefined;
+    error: string;
+    warning: string;
+    fieldHelp?: string | undefined;
+    labelInline?: boolean | undefined;
+    labelWidth?: number | undefined;
+    inputWidth?: number | undefined;
+    labelAlign?: undefined;
+    tooltipId?: string | undefined;
+    disabled: boolean;
+    readOnly: boolean;
+    autoFocus: boolean;
+    prefix: string;
+    label: string;
+    labelHelp: string;
+    placeholder: string;
+    adaptiveLabelBreakpoint: undefined;
+};
+export declare const getCommonTextboxArgsWithSpecialCharacters: (args: CommonTextboxArgs) => {
+    prefix: string;
+    fieldHelp: string;
+    label: string;
+    labelHelp: string;
+    helpAriaLabel: string;
+    placeholder: string;
+};
+export declare const commonTextboxArgTypes: (isNewValidation?: boolean) => {
+    adaptiveLabelBreakpoint: {
+        control: {
+            type: string;
+        };
+    };
+    labelWidth?: {
+        control: {
+            type: string;
+            min: number;
+            max: number;
+            step: number;
+        };
+    } | undefined;
+    inputWidth?: {
+        control: {
+            type: string;
+            min: number;
+            max: number;
+            step: number;
+        };
+    } | undefined;
+    tooltipId?: {
+        control: {
+            type: string;
+        };
+    } | undefined;
+    size: {
+        options: string[];
+        control: {
+            type: string;
+        };
+    };
+    inputIcon: {
+        options: string[];
+        control: {
+            type: string;
+        };
+    };
+    labelAlign: {
+        options: string[];
+        control: {
+            type: string;
+        };
+    };
+};

package/esm/components/textbox/utils.js

@@ -0,0 +1 @@
+import{ICONS as e}from"../icon/icon-config.js";function t(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function r(e){for(var r=1;r<arguments.length;r++){var l=null!=arguments[r]?arguments[r]:{},o=Object.keys(l);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(l).filter((function(e){return Object.getOwnPropertyDescriptor(l,e).enumerable})))),o.forEach((function(r){t(e,r,l[r])}))}return e}function l(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}const o=(e=!1,t=!1,o=!1)=>l(r({disabled:o,readOnly:o,autoFocus:t,prefix:"",label:e?"Label - new validation":"Label",labelHelp:"",placeholder:"",adaptiveLabelBreakpoint:void 0},!e&&{fieldHelp:"",labelInline:!1,labelWidth:30,inputWidth:70,labelAlign:void 0,tooltipId:""}),{size:"medium",inputIcon:void 0,required:!1,characterLimit:void 0,error:"",warning:""}),n=e=>{const{prefix:t,fieldHelp:o,label:n,labelHelp:i,placeholder:p}=e;return l(r({},e),{prefix:t,fieldHelp:o,label:n,labelHelp:i,helpAriaLabel:i,placeholder:p})},i=t=>l(r({size:{options:["small","medium","large"],control:{type:"select"}},inputIcon:{options:["",...e],control:{type:"select"}},labelAlign:{options:["left","right"],control:{type:"select"}}},!t&&{labelWidth:{control:{type:"range",min:0,max:100,step:1}},inputWidth:{control:{type:"range",min:0,max:100,step:1}},tooltipId:{control:{type:"text"}}}),{adaptiveLabelBreakpoint:{control:{type:"number"}}});export{i as commonTextboxArgTypes,o as getCommonTextboxArgs,n as getCommonTextboxArgsWithSpecialCharacters};

package/esm/components/tile/__internal__/compute-content-padding.d.ts

@@ -0,0 +1,6 @@
+import { PaddingProps } from "styled-system";
+declare const _default: (paddingProps: PaddingProps) => {
+    pr: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+    pl: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+};
+export default _default;

package/esm/components/tile/__internal__/compute-content-padding.js

@@ -0,0 +1 @@
+import{paddingRightPropertyNames as t,paddingXPropertyNames as r,paddingNames as s,paddingLeftPropertyNames as e}from"../../../style/utils/filter-styled-system-padding-props.js";const n=[...e,...r,...s],o=[...t,...r,...s];var p=t=>{const r=r=>{const s=r.find((r=>t[r]));return s?t[s]:s};return{pr:r(n),pl:r(o)}};export{p as default};

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

@@ -0,0 +1,8 @@
+interface TileContextType {
+    hasFooter?: boolean;
+    setHasFooter: (hasFooter: boolean) => void;
+    footerVariant?: "selected" | "active";
+    setFooterVariant: (footerVariant: "selected" | "active" | undefined) => void;
+}
+declare const TileProvider: import("react").Provider<TileContextType | null>, useTileContext: () => TileContextType;
+export { TileProvider, useTileContext };

package/esm/components/tile/__internal__/tile.context.js

@@ -0,0 +1 @@
+import e from"../../../__internal__/utils/createStrictContext/createStrictContext.js";const[t,o]=e({name:"TileContext",errorMessage:"Carbon Tile: Context not found. Have you wrapped your Carbon subcomponents properly? See stack trace for more details.",defaultValue:{hasFooter:!1,setHasFooter:()=>{},footerVariant:void 0,setFooterVariant:()=>{}}});export{t as TileProvider,o as useTileContext};

package/esm/components/tile/flex-tile-cell/flex-tile-cell.component.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { BoxProps } from "../../box";
+import { TagProps } from "../../../__internal__/utils/helpers/tags";
+export interface FlexTileCellProps extends TagProps, BoxProps {
+    /** The content to render within the responsive cell. */
+    children: React.ReactNode;
+}
+export declare const FlexTileCell: ({ children, flexGrow, flexBasis, flexShrink, ...rest }: FlexTileCellProps) => JSX.Element;
+export default FlexTileCell;

package/esm/components/tile/flex-tile-cell/flex-tile-cell.component.js

@@ -0,0 +1 @@
+import{jsx as e,Fragment as r}from"react/jsx-runtime";import"react";import{Box as t}from"../../box/box.component.js";import n from"../../../__internal__/utils/helpers/tags/tags.js";function o(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}const l=l=>{var i,c,{children:f,flexGrow:p=1,flexBasis:s="160px",flexShrink:a=0}=l,b=function(e,r){if(null==e)return{};var t,n,o=function(e,r){if(null==e)return{};var t,n,o={},l=Object.keys(e);for(n=0;n<l.length;n++)t=l[n],r.indexOf(t)>=0||(o[t]=e[t]);return o}(e,r);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(n=0;n<l.length;n++)t=l[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}(l,["children","flexGrow","flexBasis","flexShrink"]);return f?e(t,(i=function(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),n.forEach((function(r){o(e,r,t[r])}))}return e}({display:"flex",position:"relative",flexGrow:p,flexBasis:s,flexShrink:a},b,n("flex-tile-cell",b)),c=null!=(c={children:f})?c:{},Object.getOwnPropertyDescriptors?Object.defineProperties(i,Object.getOwnPropertyDescriptors(c)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(c)).forEach((function(e){Object.defineProperty(i,e,Object.getOwnPropertyDescriptor(c,e))})),i)):e(r,{})};export{l as FlexTileCell,l as default};

package/esm/components/tile/flex-tile-cell/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./flex-tile-cell.component";
+export type { FlexTileCellProps } from "./flex-tile-cell.component";

package/esm/components/tile/flex-tile-cell/index.js

@@ -0,0 +1 @@
+export{FlexTileCell as default}from"./flex-tile-cell.component.js";

package/esm/components/tile/flex-tile-container/flex-tile-container.component.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { BoxProps } from "../../box";
+export interface FlexTileContainerProps extends Pick<BoxProps, "columnGap" | "overflow"> {
+    /** The child elements of FlexTileContainer need to be FlexTileCell components. */
+    children: React.ReactNode;
+}
+export declare const FlexTileContainer: ({ children, columnGap, overflow, }: FlexTileContainerProps) => JSX.Element;
+export default FlexTileContainer;

package/esm/components/tile/flex-tile-container/flex-tile-container.component.js

@@ -0,0 +1 @@
+import{jsx as t,Fragment as e}from"react/jsx-runtime";import"react";import{Box as o}from"../../box/box.component.js";const r=({children:r,columnGap:n=2,overflow:i="hidden"})=>r?t(o,{alignContent:"stretch",alignItems:"stretch",display:"flex",flexDirection:"row",flexWrap:"wrap",columnGap:n,justifyContent:"flex-start",overflow:i,width:"100%","data-component":"flex-tile-container",children:r}):t(e,{});export{r as FlexTileContainer,r as default};

package/esm/components/tile/flex-tile-container/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./flex-tile-container.component";
+export type { FlexTileContainerProps } from "./flex-tile-container.component";

package/esm/components/tile/flex-tile-container/index.js

@@ -0,0 +1 @@
+export{FlexTileContainer as default}from"./flex-tile-container.component.js";

package/esm/components/tile/flex-tile-divider/flex-tile-divider.component.d.ts

@@ -0,0 +1,2 @@
+export declare const FlexTileDivider: () => JSX.Element;
+export default FlexTileDivider;

package/esm/components/tile/flex-tile-divider/flex-tile-divider.component.js

@@ -0,0 +1 @@
+import{jsx as o}from"react/jsx-runtime";import"react";import{Box as t}from"../../box/box.component.js";import{Divider as r}from"../../divider/divider.component.js";const i=()=>o(t,{position:"absolute",bottom:"0px",left:"0px",height:"1px",width:"100vw",m:"0px 0px -1px 0px",children:o(r,{type:"horizontal","aria-hidden":!0,"data-role":"hr",m:0})});export{i as FlexTileDivider,i as default};

package/esm/components/tile/flex-tile-divider/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./flex-tile-divider.component";

package/esm/components/tile/flex-tile-divider/index.js

@@ -0,0 +1 @@
+export{FlexTileDivider as default}from"./flex-tile-divider.component.js";

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

@@ -0,0 +1,13 @@
+export { default as Tile } from "./tile.component";
+export type { TileProps } from "./tile.component";
+export { default as TileContent } from "./tile-content";
+export type { TileContentProps } from "./tile-content";
+export { default as TileFooter } from "./tile-footer";
+export type { TileFooterProps } from "./tile-footer";
+export { default as TileHeader } from "./tile-header";
+export type { TileHeaderProps } from "./tile-header";
+export { default as FlexTileContainer } from "./flex-tile-container";
+export type { FlexTileContainerProps } from "./flex-tile-container";
+export { default as FlexTileCell } from "./flex-tile-cell";
+export type { FlexTileCellProps } from "./flex-tile-cell";
+export { default as FlexTileDivider } from "./flex-tile-divider";

package/esm/components/tile/index.js

@@ -0,0 +1 @@
+export{default as Tile}from"./tile.component.js";export{default as TileContent}from"./tile-content/tile-content.component.js";export{TileFooter}from"./tile-footer/tile-footer.component.js";export{TileHeader}from"./tile-header/tile-header.component.js";export{FlexTileContainer}from"./flex-tile-container/flex-tile-container.component.js";export{FlexTileCell}from"./flex-tile-cell/flex-tile-cell.component.js";export{FlexTileDivider}from"./flex-tile-divider/flex-tile-divider.component.js";

package/esm/components/tile/tile-content/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./tile-content.component";
+export type { TileContentProps } from "./tile-content.component";

package/esm/components/tile/tile-content/index.js

@@ -0,0 +1 @@
+export{default}from"./tile-content.component.js";

package/esm/components/tile/tile-content/tile-content.component.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { SpaceProps } from "styled-system";
+import { TagProps } from "../../../__internal__/utils/helpers/tags";
+export interface TileContentProps extends SpaceProps, TagProps {
+    children?: React.ReactNode;
+    width?: string | number;
+    height?: string | number;
+}
+/** @deprecated The `TileContent` component is deprecated and will be removed in a future version. Please use the `Box` component instead. */
+declare const TileContent: ({ children, width, height, ...rest }: TileContentProps) => React.JSX.Element | null;
+export default TileContent;

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

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import"react";import t from"../../../__internal__/utils/helpers/tags/tags.js";import r from"../../../style/utils/filter-styled-system-padding-props.js";import n from"../../../style/utils/filter-styled-system-margin-props.js";import{Box as o}from"../../box/box.component.js";function i(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function l(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){i(e,t,r[t])}))}return e}const c=i=>{var{children:c,width:s,height:p}=i,f=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(i,["children","width","height"]);if(!c)return null;const u=l({},r(f),n(f));return e(o,(b=l({"data-role":"tile-content",width:s,height:p,flexGrow:s||p?0:1,position:"relative",boxSizing:"border-box",display:"inline"},u,t("tile-content",f)),a=null!=(a={children:c})?a:{},Object.getOwnPropertyDescriptors?Object.defineProperties(b,Object.getOwnPropertyDescriptors(a)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(a)).forEach((function(e){Object.defineProperty(b,e,Object.getOwnPropertyDescriptor(a,e))})),b));var b,a};export{c as default};

package/esm/components/tile/tile-footer/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./tile-footer.component";
+export type { TileFooterProps } from "./tile-footer.component";

package/esm/components/tile/tile-footer/index.js

@@ -0,0 +1 @@
+export{TileFooter as default}from"./tile-footer.component.js";

package/esm/components/tile/tile-footer/tile-footer.component.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { PaddingProps } from "styled-system";
+import { TagProps } from "../../../__internal__/utils/helpers/tags";
+type DeprecatedFooterVariant = "default" | "black" | "transparent" | "grey";
+type FooterVariant = "selected" | "active";
+export interface TileFooterProps extends PaddingProps, TagProps {
+    children?: React.ReactNode;
+    /** set which background color variant should be used */
+    variant?: DeprecatedFooterVariant | FooterVariant;
+}
+export declare const TileFooter: ({ variant, children, ...rest }: TileFooterProps) => React.JSX.Element;
+export default TileFooter;

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

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import{useEffect as t}from"react";import r from"./tile-footer.style.js";import n from"../../../__internal__/utils/helpers/tags/tags.js";import o from"../../../style/utils/filter-styled-system-padding-props.js";import{useTileContext as i}from"../__internal__/tile.context.js";function c(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}const l=l=>{var{variant:s,children:a}=l,f=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(l,["variant","children"]);const{setHasFooter:p,setFooterVariant:u}=i(),b="black"===s?"selected":"selected"===s||"active"===s?s:void 0;return t((()=>(p(!0),u(b),()=>{p(!1),u(void 0)})),[b,u,p]),e(r,(O=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){c(e,t,r[t])}))}return e}({variant:b},o(f),n("tile-footer",f)),y=null!=(y={children:a})?y:{},Object.getOwnPropertyDescriptors?Object.defineProperties(O,Object.getOwnPropertyDescriptors(y)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(y)).forEach((function(e){Object.defineProperty(O,e,Object.getOwnPropertyDescriptor(y,e))})),O));var O,y};export{l as TileFooter,l as default};

package/esm/components/tile/tile-footer/tile-footer.style.d.ts

@@ -0,0 +1,7 @@
+import { TileFooterProps } from "./tile-footer.component";
+declare const StyledTileFooter: import("styled-components").StyledComponent<"div", any, {
+    theme: object;
+} & {
+    variant: TileFooterProps["variant"];
+}, "theme">;
+export default StyledTileFooter;

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

@@ -0,0 +1 @@
+import t,{css as e}from"styled-components";import{padding as a}from"styled-system";import r from"../../../style/themes/apply-base-theme.js";const o=t.div.attrs(r).withConfig({displayName:"tile-footer.style__StyledTileFooter",componentId:"carbon_v162_12_0__sc-9929f508-0"})(["display:flex;flex-direction:row;align-items:center;justify-content:center;padding:0 var(--global-space-comp-xl);height:var(--global-size-l);"," ",""],a,(({variant:t})=>e(["border-bottom-left-radius:calc( var(--tileBorderRadius) - "," );border-bottom-right-radius:calc( var(--tileBorderRadius) - "," );background:",";border-top:1px solid ",";",";",";"],t?"3px":"0px",t?"3px":"0px",(t=>{switch(t){case"selected":return"var(--container-action-bg-footer-active)";case"active":return"var(--container-action-bg-footer-activated)";default:return"transparent"}})(t),"selected"===t||"active"===t?"transparent":"var(--container-standard-border-default)",t&&"font: var(--global-font-static-comp-medium-l)",t&&`color: var(--container-action-label-footer-${"selected"===t?"activated":"active"})`)));export{o as default};

package/esm/components/tile/tile-header/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./tile-header.component";
+export type { TileHeaderProps } from "./tile-header.component";

package/esm/components/tile/tile-header/index.js

@@ -0,0 +1 @@
+export{TileHeader as default}from"./tile-header.component.js";

package/esm/components/tile/tile-header/tile-header.component.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { PaddingProps } from "styled-system";
+import { TagProps } from "../../../__internal__/utils/helpers/tags";
+export interface TileHeaderProps extends PaddingProps, TagProps {
+    children?: React.ReactNode;
+    /** set which background color variant should be used */
+    variant?: "default" | "black" | "transparent" | "grey";
+}
+/** @deprecated The `TileHeader` component is deprecated and will be removed in a future version. Please use the `Box` component instead. */
+export declare const TileHeader: ({ variant, children, ...rest }: TileHeaderProps) => React.JSX.Element;
+export default TileHeader;

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

@@ -0,0 +1 @@
+import{jsx as r}from"react/jsx-runtime";import"react";import{Box as e}from"../../box/box.component.js";import t from"../../../__internal__/utils/helpers/tags/tags.js";import n from"../../../style/utils/filter-styled-system-padding-props.js";function o(r,e,t){return e in r?Object.defineProperty(r,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):r[e]=t,r}const i={transparent:"transparent",black:"var(--colorsUtilityYin100)",grey:"var(--colorsUtilityMajor025)",default:"var(--colorsUtilityMajor100)"},c=c=>{var l,a,{variant:p,children:s}=c,u=function(r,e){if(null==r)return{};var t,n,o=function(r,e){if(null==r)return{};var t,n,o={},i=Object.keys(r);for(n=0;n<i.length;n++)t=i[n],e.indexOf(t)>=0||(o[t]=r[t]);return o}(r,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(r);for(n=0;n<i.length;n++)t=i[n],e.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(r,t)&&(o[t]=r[t])}return o}(c,["variant","children"]);return r(e,(l=function(r){for(var e=1;e<arguments.length;e++){var t=null!=arguments[e]?arguments[e]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter((function(r){return Object.getOwnPropertyDescriptor(t,r).enumerable})))),n.forEach((function(e){o(r,e,t[e])}))}return r}({"data-component":"tile-header",backgroundColor:i[p||"default"]},n(u),t("tile-header",u)),a=null!=(a={children:s})?a:{},Object.getOwnPropertyDescriptors?Object.defineProperties(l,Object.getOwnPropertyDescriptors(a)):function(r){var e=Object.keys(r);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(r);e.push.apply(e,t)}return e}(Object(a)).forEach((function(r){Object.defineProperty(l,r,Object.getOwnPropertyDescriptor(a,r))})),l))};export{c as TileHeader,c as default};

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

@@ -0,0 +1,61 @@
+import React from "react";
+import * as DesignTokens from "@sage/design-tokens/js/base/common";
+import { SpaceProps, WidthProps } from "styled-system";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+import { TILE_HIGHLIGHT_VARIANTS, STATUS_KEYLINE_VARIANTS } from "./tile.config";
+export type Roundness = "curved" | "moderate";
+export type LegacyRoundness = "default" | "large" | "small";
+type DesignTokensType = keyof typeof DesignTokens;
+type HighlightVariantType = (typeof TILE_HIGHLIGHT_VARIANTS)[number];
+export type DeprecatedTileVariants = "tile" | "transparent" | "active" | "grey";
+export type TileVariants = "standard" | "alt" | "positive" | "negative" | "unavailable";
+export interface TileProps extends SpaceProps, WidthProps, TagProps {
+    /** Sets the theme of the tile */
+    variant?: TileVariants | DeprecatedTileVariants;
+    /**
+     * 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
+     * percentage-based width prop, dictating the percentage of the tile width it will take up.
+     *
+     * Width will have no effect on a child component if the tile orientation is set to 'vertical'.
+     */
+    children?: React.ReactNode;
+    /** The orientation of the tile - set to either horizontal or vertical
+     * @deprecated The `orientation` prop has been deprecated and will be removed in a future version.
+     */
+    orientation?: "horizontal" | "vertical";
+    /**
+     * Set a percentage-based width for the whole Tile component, relative to its parent.
+     * If unset or zero, this will default to 100%.
+     */
+    width?: string | number;
+    /** Sets the border width by using these design tokens
+     * @deprecated The `borderWidth` prop is depreacted and will be removed in a future version.
+     */
+    borderWidth?: Extract<DesignTokensType, `borderWidth${string}`>;
+    /** Sets the border variant that should be used
+     * @deprecated The `borderVariant` prop has been deprecated and will be removed in a future version. Use the `outline` prop instead.
+     */
+    borderVariant?: "default" | "selected" | "positive" | "negative" | "caution" | "info";
+    /**
+     * Sets the level of roundness of the corners. Values can be `"curved"` or `"moderate"`.
+     *
+     * **Deprecated**: legacy values `"default"`, `"large"`, and `"small"` are deprecated and should not be used. */
+    roundness?: Roundness | LegacyRoundness;
+    /**
+     * Set a percentage-based height for the whole Tile component, relative to its parent.
+     */
+    height?: string | number;
+    /** Sets the highlight variant
+     * @deprecated The `highlightVariant` prop has been deprecated and will be removed in a future version. Use the `statusKeyline` prop instead.
+     */
+    highlightVariant?: HighlightVariantType;
+    /** Adds an outline to the tile to increase its visual prominence */
+    hasOutline?: boolean;
+    /** Inverts the tile colors for use on dark backgrounds for the 'standard' and 'alt' variants */
+    inverse?: boolean;
+    /** Sets the status keyline to indicate the status of the content within the tile */
+    statusKeyline?: (typeof STATUS_KEYLINE_VARIANTS)[number];
+}
+declare const Tile: ({ variant, p, children, width, roundness, height, highlightVariant, hasOutline, inverse, statusKeyline, ...rest }: TileProps) => React.JSX.Element;
+export default Tile;

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

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import r from"react";import{StyledTileWrapper as n,StyledTileKeyline as i,StyledTile as o}from"./tile.style.js";import{TileProvider as s}from"./__internal__/tile.context.js";import l from"../../style/utils/filter-styled-system-padding-props.js";import a from"../../style/utils/filter-styled-system-margin-props.js";import c from"../../__internal__/utils/helpers/tags/tags.js";import{TILE_ROUNDNESS_VALUE_MAP as u,HIGHLIGHT_VARIANT_TO_STATUS_KEYLINE_MAP as p,TILE_VARIANT_DEPRECATION_MAP as f}from"./tile.config.js";import d from"../../__internal__/utils/logger/index.js";function y(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function h(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){y(e,t,r[t])}))}return e}let m=!1;const O=y=>{var{variant:O="standard",p:g,children:b,width:j="100%",roundness:v="curved",height:w,highlightVariant:P,hasOutline:_=!0,inverse:S,statusKeyline:x}=y,V=function(e,t){if(null==e)return{};var r,n,i=function(e,t){if(null==e)return{};var r,n,i={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(i[r]=e[r]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}(y,["variant","p","children","width","roundness","height","highlightVariant","hasOutline","inverse","statusKeyline"]);!m&&["default","large","small"].includes(v)&&(m=!0,d.deprecate(`The legacy roundness value: '${v}' in Tile is deprecated. Please use 'curved' or 'moderate' instead.`));const k=u[v],D=l(h({p:g},V)),F=a(V),K=x||(P?p[P]:void 0);let E;E=O in f?f[O]:O;const[$,T]=r.useState(!1),[H,I]=r.useState(void 0);return e(n,{"data-role":"tile-wrapper",roundness:k,width:j,height:w,children:t(s,{value:{hasFooter:$,setHasFooter:T,footerVariant:H,setFooterVariant:I},children:[e(i,{"data-role":"tile-keyline",statusKeyline:K,inverse:S}),e(o,(q=h({variant:E,p:g,roundness:k},D,F,c("tile",V)),z={hasOutline:_,inverse:S,statusKeyline:K,$hasFooter:$,$footerVariant:H,children:b},z=null!=z?z:{},Object.getOwnPropertyDescriptors?Object.defineProperties(q,Object.getOwnPropertyDescriptors(z)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(z)).forEach((function(e){Object.defineProperty(q,e,Object.getOwnPropertyDescriptor(z,e))})),q))]})});var q,z};export{O as default};

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

@@ -0,0 +1,9 @@
+import type { Roundness, LegacyRoundness, DeprecatedTileVariants, TileVariants } from "./tile.component";
+export declare const TILE_ORIENTATIONS: string[];
+export declare const TILE_THEMES: string[];
+export declare const TILE_BORDER_VARIANTS: string[];
+export declare const TILE_HIGHLIGHT_VARIANTS: string[];
+export declare const STATUS_KEYLINE_VARIANTS: string[];
+export declare const HIGHLIGHT_VARIANT_TO_STATUS_KEYLINE_MAP: Record<(typeof TILE_HIGHLIGHT_VARIANTS)[number], (typeof STATUS_KEYLINE_VARIANTS)[number]>;
+export declare const TILE_ROUNDNESS_VALUE_MAP: Record<LegacyRoundness | Roundness, Roundness>;
+export declare const TILE_VARIANT_DEPRECATION_MAP: Record<DeprecatedTileVariants, TileVariants>;

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

@@ -0,0 +1 @@
+const e=["horizontal","vertical"],t=["tile","transparent","active","grey"],a=["default","info","selected","negative","positive","caution"],r=["gradient","success","neutral","error","warning","info","important"],i=["ai","informational","positive","warning","negative","neutral","important"],n={success:"positive",neutral:"neutral",error:"negative",warning:"warning",info:"informational",important:"important",gradient:"ai"},o={default:"curved",curved:"curved",moderate:"moderate",small:"moderate",large:"moderate"},l={tile:"standard",transparent:"standard",active:"positive",grey:"alt"};export{n as HIGHLIGHT_VARIANT_TO_STATUS_KEYLINE_MAP,i as STATUS_KEYLINE_VARIANTS,a as TILE_BORDER_VARIANTS,r as TILE_HIGHLIGHT_VARIANTS,e as TILE_ORIENTATIONS,o as TILE_ROUNDNESS_VALUE_MAP,t as TILE_THEMES,l as TILE_VARIANT_DEPRECATION_MAP};

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

@@ -0,0 +1,19 @@
+import { SpaceProps } from "styled-system";
+import { TileProps } from "./tile.component";
+import { STATUS_KEYLINE_VARIANTS } from "./tile.config";
+declare const StyledTile: import("styled-components").StyledComponent<"div", any, {
+    theme: object;
+} & Pick<TileProps, "width" | "height" | "variant" | "inverse" | "borderVariant" | "roundness" | "hasOutline" | "statusKeyline"> & SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & {
+    $hasFooter?: boolean;
+    $footerVariant?: "selected" | "active";
+}, "theme">;
+declare const StyledTileWrapper: import("styled-components").StyledComponent<"div", any, {
+    roundness?: TileProps["roundness"];
+    width?: TileProps["width"];
+    height?: TileProps["height"];
+}, never>;
+declare const StyledTileKeyline: import("styled-components").StyledComponent<"div", any, {
+    statusKeyline?: (typeof STATUS_KEYLINE_VARIANTS)[number];
+    inverse?: boolean;
+}, never>;
+export { StyledTile, StyledTileWrapper, StyledTileKeyline };

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

@@ -0,0 +1 @@
+import r,{css as a}from"styled-components";import{space as e}from"styled-system";import t from"../../style/themes/apply-base-theme.js";import i from"../../style/utils/element-sizing.js";const o=({variant:r,inverse:a})=>{switch(r){case"alt":return{color:`var(--container-standard-${a?"inverse-":""}txt-default)`,border:`var(--container-standard-${a?"inverse-":""}border-default)`,bg:`var(--container-standard-${a?"inverse-":""}bg-alt)`};case"positive":return{color:"var(--container-standard-txt-default)",border:"var(--message-contextual-success-border-default)",bg:"var(--message-contextual-success-bg-alt)"};case"negative":return{color:"var(--container-standard-txt-default)",border:"var(--message-contextual-error-border-default)",bg:"var(--message-contextual-error-bg-alt)"};case"unavailable":return{color:"var(--container-standard-txt-default)",border:"var(--container-action-border-inactive)",bg:"var(--container-action-bg-disabled)"};default:return{color:`var(--container-standard-${a?"inverse-":""}txt-default)`,border:`var(--container-standard-${a?"inverse-":""}border-default)`,bg:`var(--container-standard-${a?"inverse-":""}bg-default)`}}},n=r=>"moderate"===r?"var(--global-radius-container-l)":"var(--global-radius-container-xl)",s=r.div.attrs(t).withConfig({displayName:"tile.style__StyledTile",componentId:"carbon_v162_12_0__sc-86252930-0"})(["",""],(({hasOutline:r,variant:t,inverse:i,roundness:s,$hasFooter:d,$footerVariant:l})=>a(["padding:var(--global-space-comp-xl);"," box-sizing:border-box;border:",";border-radius:",";--tileBorderRadius:",";background-color:",";color:",';> *:first-child:not([data-role="tile-content"]){border-top-left-radius:calc('," - 1px);border-bottom-left-radius:calc(",' - 1px);}> *:last-child:not([data-role="tile-content"]){border-top-right-radius:calc('," - 1px);border-bottom-right-radius:calc(",' - 1px);}display:flex;flex-direction:row;position:relative;height:100%;> [data-role="tile-content"]:not(:last-of-type){margin-right:var(--global-space-comp-s);border-right:solid 1px var(--container-standard-border-default);}[data-component="tile-header"]{border-radius:'," "," 0 0;}"],e,(({$hasFooter:r,$footerVariant:a,hasOutline:e,variant:t,inverse:i})=>!r||"selected"!==a&&"active"!==a?`var(--global-borderwidth-xs) solid ${e?o({variant:t,inverse:i}).border:"transparent"}`:"var(--global-borderwidth-s) solid "+("selected"===a?"var(--container-action-border-active)":"var(--container-action-bg-footer-activated)"))({$hasFooter:d,$footerVariant:l,hasOutline:r,variant:t,inverse:i}),n(s),n(s),o({variant:t,inverse:i}).bg,o({variant:t,inverse:i}).color,n(s),n(s),n(s),n(s),n(s),n(s)))),d=r.div.withConfig({displayName:"tile.style__StyledTileWrapper",componentId:"carbon_v162_12_0__sc-86252930-1"})(["position:relative;overflow:hidden;border-radius:",";",""],(({roundness:r})=>n(r)),(({width:r,height:e})=>a(["",""],i({width:r||void 0,height:e||void 0})))),l=r.div.withConfig({displayName:"tile.style__StyledTileKeyline",componentId:"carbon_v162_12_0__sc-86252930-2"})(["",""],(({statusKeyline:r,inverse:e})=>r&&a(["position:absolute;top:0;left:0;height:100%;width:var(--global-size-4-xs);background:",";z-index:1;"],(({variant:r,inverse:a})=>{switch(r){case"informational":return a?"var(--container-standard-priority-inverse-bg-info)":"var(--container-standard-priority-bg-info)";case"positive":return a?"var(--container-standard-priority-inverse-bg-positive)":"var(--container-standard-priority-bg-positive)";case"warning":return a?"var(--container-standard-priority-inverse-bg-caution)":"var(--container-standard-priority-bg-caution)";case"negative":return a?"var(--container-standard-priority-inverse-bg-negative)":"var(--container-standard-priority-bg-negative)";case"neutral":return a?"var(--container-standard-priority-inverse-bg-neutral)":"var(--container-standard-priority-bg-neutral)";case"important":return a?"var(--container-standard-priority-inverse-bg-prio)":"var(--container-standard-priority-bg-prio)";default:return"linear-gradient(to bottom, var(--mode-color-ai-alt-stop-1) 0%, var(--mode-color-ai-alt-stop-2) 40%, var(--mode-color-ai-alt-stop-3) 90%)"}})({variant:r,inverse:e}))));export{s as StyledTile,l as StyledTileKeyline,d as StyledTileWrapper};

package/esm/components/tile-select/__internal__/accordion/accordion.component.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { SpaceProps } from "styled-system";
+export interface AccordionProps extends SpaceProps {
+    children: React.ReactNode;
+    expanded?: boolean;
+    contentId?: string;
+    controlId?: string;
+}
+declare const Accordion: ({ children, expanded, contentId, controlId, }: AccordionProps) => React.JSX.Element;
+export default Accordion;

package/esm/components/tile-select/__internal__/accordion/accordion.component.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import{useState as r,useRef as o}from"react";import{StyledContentContainer as t,StyledContent as n}from"./accordion.style.js";import c from"../../../../hooks/__internal__/useResizeObserver/useResizeObserver.js";import i from"../../../../hooks/useMediaQuery/useMediaQuery.js";const l=({children:l,expanded:a,contentId:s,controlId:d})=>{const[m,u]=r(0),p=o(null),f=i("screen and (prefers-reduced-motion: no-preference)");return c(p,(()=>{p.current&&u(p.current.scrollHeight)})),e(t,{$isExpanded:a,$height:m,$allowMotion:f,"data-role":"tile-select-accordion-content-container",children:e(n,{role:"region","data-element":"tile-select-accordion-content","data-role":"tile-select-accordion-content",ref:p,id:s,"aria-labelledby":d,children:l})})};export{l as default};

package/esm/components/tile-select/__internal__/accordion/accordion.style.d.ts

@@ -0,0 +1,3 @@
+declare const StyledContentContainer: import("styled-components").StyledComponent<"div", any, import("../../../accordion/accordion.style").StyledAccordionProps, never>;
+declare const StyledContent: import("styled-components").StyledComponent<"div", any, import("../../../accordion/accordion.style").StyledAccordionProps, never>;
+export { StyledContentContainer, StyledContent };

package/esm/components/tile-select/__internal__/accordion/accordion.style.js

@@ -0,0 +1 @@
+import o from"styled-components";import{StyledAccordionContentContainer as n,StyledAccordionContent as t}from"../../../accordion/accordion.style.js";const c=o(n).withConfig({displayName:"accordion.style__StyledContentContainer",componentId:"carbon_v162_12_0__sc-80dffb5e-0"})(["background-color:var(--colorsActionMinor050);opacity:1;"]),i=o(t).withConfig({displayName:"accordion.style__StyledContent",componentId:"carbon_v162_12_0__sc-80dffb5e-1"})(["padding:24px;position:relative;z-index:200;"]);export{i as StyledContent,c as StyledContentContainer};

package/esm/components/tile-select/__internal__/accordion/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./accordion.component";

package/esm/components/tile-select/__internal__/accordion/index.js

@@ -0,0 +1 @@
+export{default}from"./accordion.component.js";

package/esm/components/tile-select/index.d.ts

@@ -0,0 +1,4 @@
+export { default as TileSelect } from "./tile-select.component";
+export type { TileSelectProps, TileSelectDeselectEvent, } from "./tile-select.component";
+export { default as TileSelectGroup } from "./tile-select-group/tile-select-group.component";
+export type { TileSelectGroupProps } from "./tile-select-group/tile-select-group.component";

package/esm/components/tile-select/index.js

@@ -0,0 +1 @@
+export{default as TileSelect}from"./tile-select.component.js";export{TileSelectGroup}from"./tile-select-group/tile-select-group.component.js";