carbon-react 104.34.0 → 104.36.0

package/esm/components/sidebar/sidebar.style.js

@@ -0,0 +1,43 @@
+import styled, { css } from "styled-components";
+import baseTheme from "../../style/themes/base";
+import StyledIconButton from "../icon-button/icon-button.style";
+import { SIDEBAR_SIZES_CSS } from "./sidebar.config";
+const SidebarStyle = styled.div`
+  ${({
+  onCancel,
+  position,
+  size,
+  theme
+}) => css`
+    background: var(--colorsUtilityMajor025);
+    border-radius: 1px;
+    bottom: 0;
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    top: 0;
+    z-index: ${theme.zIndex.fullScreenModal};
+
+    ${size && css`
+      width: ${SIDEBAR_SIZES_CSS[size]};
+    `}
+
+    ${position && css`
+      box-shadow: var(--boxShadow300);
+      ${position}: 0;
+    `}
+
+    ${onCancel && css`
+      > ${StyledIconButton}:first-of-type {
+        position: absolute;
+        z-index: 1;
+        right: 25px;
+        top: 25px;
+      }
+    `}
+  `}
+`;
+SidebarStyle.defaultProps = {
+  theme: baseTheme
+};
+export default SidebarStyle;

package/esm/components/simple-color-picker/color-sample-box/checker-board.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" fill-opacity=".45"><rect x="200" width="200" height="200" /><rect y="200" width="200" height="200" /></svg>

package/esm/components/simple-color-picker/color-sample-box/color-sample-box.component.d.ts

@@ -0,0 +1,13 @@
+export function colorSampleBoxCheck(props: any, propName: any, component: any): Error | null;
+export default ColorSampleBox;
+declare function ColorSampleBox({ color, checked }: {
+    color: any;
+    checked: any;
+}): JSX.Element;
+declare namespace ColorSampleBox {
+    namespace propTypes {
+        export const checked: PropTypes.Requireable<boolean>;
+        export { colorSampleBoxCheck as color };
+    }
+}
+import PropTypes from "prop-types";

package/esm/components/simple-color-picker/color-sample-box/color-sample-box.component.js

@@ -0,0 +1,33 @@
+import React from "react";
+import PropTypes from "prop-types";
+import StyledColorSampleBox from "./color-sample-box.style";
+import StyledTickIcon from "../tick-icon/tick-icon.style";
+
+const ColorSampleBox = ({
+  color,
+  checked
+}) => {
+  return /*#__PURE__*/React.createElement(StyledColorSampleBox, {
+    color: color
+  }, checked && /*#__PURE__*/React.createElement(StyledTickIcon, {
+    color: color,
+    checked: true,
+    type: "tick"
+  }));
+};
+
+export const colorSampleBoxCheck = (props, propName, component) => {
+  const color = props[propName],
+        hexRegex = /\b[0-9A-Fa-f]{6}\b/g;
+
+  if (!color.match(hexRegex) && color !== "transparent") {
+    return new Error(`Provide color in a six-digit hex format or 'transparent' in ${component}.`);
+  }
+
+  return null;
+};
+ColorSampleBox.propTypes = {
+  checked: PropTypes.bool,
+  color: colorSampleBoxCheck
+};
+export default ColorSampleBox;

package/esm/components/simple-color-picker/color-sample-box/color-sample-box.style.d.ts

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

package/esm/components/simple-color-picker/color-sample-box/color-sample-box.style.js

@@ -0,0 +1,31 @@
+import styled, { css } from "styled-components";
+import PropTypes from "prop-types";
+import checkerBoardSvg from "./checker-board.svg";
+const StyledColorSampleBox = styled.div`
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid transparent;
+
+  ${({
+  color
+}) => color !== "transparent" && css`
+      background-color: ${color};
+    `}
+
+  ${({
+  color
+}) => color === "transparent" && css`
+      background-color: #eeeeee;
+      background-image: url(${checkerBoardSvg});
+      background-size: 14px 14px;
+      background-position: -2px -2px;
+    `}
+`;
+StyledColorSampleBox.propTypes = {
+  color: PropTypes.string
+};
+export default StyledColorSampleBox;

package/esm/components/simple-color-picker/color-sample-box/index.d.ts

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

package/esm/components/simple-color-picker/color-sample-box/index.js

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

package/esm/components/simple-color-picker/index.d.ts

@@ -0,0 +1,2 @@
+export { default as SimpleColorPicker } from "./simple-color-picker";
+export { default as SimpleColor } from "./simple-color/simple-color";

package/esm/components/simple-color-picker/index.js

@@ -0,0 +1,2 @@
+export { default as SimpleColorPicker } from "./simple-color-picker.component";
+export { default as SimpleColor } from "./simple-color";

package/esm/components/simple-color-picker/simple-color/index.d.ts

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

package/esm/components/simple-color-picker/simple-color/index.js

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

package/esm/components/simple-color-picker/simple-color/simple-color.component.d.ts

@@ -0,0 +1,3 @@
+export default SimpleColor;
+declare const SimpleColor: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from "react";

package/esm/components/simple-color-picker/simple-color/simple-color.component.js

@@ -0,0 +1,67 @@
+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); }
+
+import PropTypes from "prop-types";
+import React from "react";
+import tagComponent from "../../../__internal__/utils/helpers/tags/tags";
+import StyledSimpleColor from "./simple-color.style";
+import ColorSampleBox from "../color-sample-box";
+import StyledSimpleColorInput from "../simple-color-input/simple-color-input.style";
+const SimpleColor = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    onChange,
+    onBlur,
+    onMouseDown,
+    value,
+    name,
+    checked,
+    className,
+    ...rest
+  } = props;
+  return /*#__PURE__*/React.createElement(StyledSimpleColor, _extends({
+    color: value,
+    checked: checked,
+    className: className
+  }, tagComponent("simple-color", props)), /*#__PURE__*/React.createElement(StyledSimpleColorInput, _extends({
+    onChange: onChange,
+    onBlur: onBlur,
+    onMouseDown: onMouseDown,
+    checked: checked,
+    name: name,
+    type: "radio",
+    role: "radio",
+    value: value,
+    "aria-checked": checked,
+    ref: ref
+  }, rest)), /*#__PURE__*/React.createElement(ColorSampleBox, {
+    color: value,
+    checked: checked
+  }));
+});
+SimpleColor.defaultProps = {
+  checked: false,
+  onChange: null
+};
+SimpleColor.propTypes = {
+  /** the value of the color that is represented by this SimpleColor */
+  value: PropTypes.string,
+
+  /** the input name */
+  name: PropTypes.string,
+
+  /** called when the user selects or deselects this color option */
+  onChange: PropTypes.func,
+
+  /** A callback triggered when a color is selected. */
+  onBlur: PropTypes.func,
+
+  /** A callback triggered when a color is selected. */
+  onMouseDown: PropTypes.func,
+
+  /** determines if this color option is selected or unselected */
+  checked: PropTypes.bool,
+
+  /** [Legacy] Custom classname */
+  className: PropTypes.string
+};
+SimpleColor.displayName = "SimpleColor";
+export default SimpleColor;

package/esm/components/simple-color-picker/simple-color/simple-color.d.ts

@@ -0,0 +1,24 @@
+import * as React from "react";
+
+export interface SimpleColorProps {
+  /** the value of the color that is represented by this SimpleColor */
+  value?: string;
+  /** the input name */
+  name?: string;
+  /** called when the user selects or deselects this color option */
+  onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
+  /** Prop for `onBlur` events */
+  onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
+  /** Prop for `onMouseDown` events */
+  onMouseDown?: (ev: React.MouseEvent<HTMLInputElement>) => void;
+  /** determines if this color option is selected or unselected */
+  checked?: boolean;
+  /** [Legacy] Custom classname */
+  className?: string;
+}
+
+declare function SimpleColor(
+  props: SimpleColorProps & React.RefAttributes<HTMLInputElement>
+): JSX.Element;
+
+export default SimpleColor;

package/esm/components/simple-color-picker/simple-color/simple-color.style.d.ts

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

package/esm/components/simple-color-picker/simple-color/simple-color.style.js

@@ -0,0 +1,12 @@
+import styled from "styled-components";
+const StyledSimpleColor = styled.div`
+  width: var(--sizing700);
+  height: var(--sizing700);
+  margin-right: 2px;
+  margin-bottom: 2px;
+
+  &:hover {
+    cursor: pointer;
+  }
+`;
+export default StyledSimpleColor;

package/esm/components/simple-color-picker/simple-color-input/simple-color-input.style.d.ts

@@ -0,0 +1,2 @@
+export default StyledSimpleColorInput;
+declare const StyledSimpleColorInput: import("styled-components").StyledComponent<any, any, object, string | number | symbol>;

package/esm/components/simple-color-picker/simple-color-input/simple-color-input.style.js

@@ -0,0 +1,25 @@
+import styled from "styled-components";
+import { Input as SimpleColorInput } from "../../../__internal__/input";
+import StyledColorSampleBox from "../color-sample-box/color-sample-box.style";
+const StyledSimpleColorInput = styled(SimpleColorInput)`
+  position: absolute;
+  opacity: 0;
+  height: var(--sizing700);
+  width: var(--sizing700);
+  margin: 0;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &:disabled:hover {
+    cursor: not-allowed;
+  }
+
+  &:focus + ${StyledColorSampleBox} {
+    box-shadow: inset 0px 0px 0px var(--borderWidth200)
+      var(--colorsActionMajorYang100);
+    border: 2px solid var(--colorsSemanticFocus500);
+  }
+`;
+export default StyledSimpleColorInput;

package/esm/components/simple-color-picker/simple-color-picker.component.d.ts

@@ -0,0 +1,22 @@
+export default SimpleColorPicker;
+declare function SimpleColorPicker(props: any): JSX.Element;
+declare namespace SimpleColorPicker {
+    namespace propTypes {
+        function children(props: any, propName: any, componentName: any): undefined;
+        const isBlurBlocked: PropTypes.Requireable<boolean>;
+        const error: PropTypes.Requireable<string | boolean>;
+        const warning: PropTypes.Requireable<string | boolean>;
+        const info: PropTypes.Requireable<string | boolean>;
+        const validationOnLegend: PropTypes.Requireable<boolean>;
+        const legend: PropTypes.Validator<string>;
+        const value: PropTypes.Requireable<string>;
+        const name: PropTypes.Requireable<string>;
+        const onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        const onBlur: PropTypes.Requireable<(...args: any[]) => any>;
+        const onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
+        const maxWidth: PropTypes.Requireable<string>;
+        const childWidth: PropTypes.Requireable<string>;
+        const required: PropTypes.Requireable<boolean>;
+    }
+}
+import PropTypes from "prop-types";

package/esm/components/simple-color-picker/simple-color-picker.component.js

@@ -0,0 +1,265 @@
+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); }
+
+import React, { useCallback, useState, useRef, useMemo, useEffect } from "react";
+import PropTypes from "prop-types";
+import styledSystemPropTypes from "@styled-system/prop-types";
+import Events from "../../__internal__/utils/helpers/events";
+import tagComponent from "../../__internal__/utils/helpers/tags/tags";
+import Fieldset from "../../__internal__/fieldset";
+import SimpleColor from "./simple-color";
+import RadioButtonMapper from "../radio-button/radio-button-mapper.component";
+import { StyledContent, StyledColorOptions } from "./simple-color-picker.style";
+import ValidationIcon from "../../__internal__/validations/validation-icon.component";
+import { InputGroupContext } from "../../__internal__/input-behaviour";
+import { filterStyledSystemMarginProps } from "../../style/utils";
+const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
+
+const SimpleColorPicker = props => {
+  const {
+    children,
+    error,
+    warning,
+    info,
+    name,
+    legend,
+    onChange,
+    onBlur,
+    onKeyDown,
+    value,
+    isBlurBlocked = false,
+    maxWidth = 300,
+    childWidth = 58,
+    validationOnLegend,
+    required,
+    ...rest
+  } = props;
+  const filteredChildren = useMemo(() => React.Children.toArray(children), [children]);
+  const myRef = useRef(null);
+  const [blurBlocked, setIsBlurBlocked] = useState(isBlurBlocked);
+  const [focusedElement, setFocusedElement] = useState(null);
+  const itemsPerRow = Math.floor(maxWidth / childWidth);
+  const rowCount = Math.ceil((filteredChildren === null || filteredChildren === void 0 ? void 0 : filteredChildren.length) / itemsPerRow);
+  let blankSlots = itemsPerRow * rowCount - (filteredChildren === null || filteredChildren === void 0 ? void 0 : filteredChildren.length);
+  let currentRow = 1;
+  let loopCounter = 1;
+  const gridItemRefs = useMemo(() => filteredChildren.map(child => child.ref || /*#__PURE__*/React.createRef()), [filteredChildren]);
+  const navigationGrid = filteredChildren.map((child, index) => {
+    const allowUp = currentRow !== 1;
+    let allowDown = false;
+
+    if (currentRow + 1 === rowCount && blankSlots - itemsPerRow < 0) {
+      allowDown = true;
+      blankSlots += 1;
+    } else if (currentRow + 1 !== rowCount && currentRow !== rowCount && rowCount > 1) {
+      allowDown = true;
+    }
+
+    if (loopCounter === itemsPerRow) {
+      loopCounter = 0;
+      currentRow += 1;
+    }
+
+    let upItem;
+
+    if (allowUp) {
+      upItem = index - itemsPerRow;
+    }
+
+    let downItem;
+
+    if (allowDown) {
+      downItem = itemsPerRow + index;
+    }
+
+    const childProps = {
+      ref: gridItemRefs[index],
+      "data-up": allowUp,
+      "data-down": allowDown,
+      "data-item-up": upItem,
+      "data-item-down": downItem,
+      required
+    };
+    loopCounter += 1;
+    return /*#__PURE__*/React.cloneElement(child, childProps);
+  });
+  const onKeyDownHandler = useCallback(e => {
+    if (onKeyDown) {
+      onKeyDown(e);
+    }
+
+    const arrowKeys = [Events.isLeftKey(e), Events.isUpKey(e), Events.isRightKey(e), Events.isDownKey(e)];
+    if (!arrowKeys.includes(true)) return;
+    e.preventDefault();
+    let itemIndex;
+
+    if (Events.isUpKey(e)) {
+      if (e.target.getAttribute("data-up") !== "true") return;
+      itemIndex = e.target.getAttribute("data-item-up");
+    } else if (Events.isDownKey(e)) {
+      if (e.target.getAttribute("data-down") !== "true") return;
+      itemIndex = e.target.getAttribute("data-item-down");
+    }
+
+    if (Events.isLeftKey(e) || Events.isRightKey(e)) {
+      const position = element => {
+        return e.target.getAttribute("value") === element.props.value;
+      };
+
+      if (Events.isLeftKey(e)) {
+        itemIndex = navigationGrid.findIndex(position) - 1;
+      } else {
+        itemIndex = navigationGrid.findIndex(position) + 1;
+      }
+
+      if (itemIndex < 0) {
+        itemIndex = navigationGrid.length - 1;
+      } else if (itemIndex > navigationGrid.length - 1) {
+        itemIndex = 0;
+      }
+    }
+
+    const item = navigationGrid[itemIndex].ref.current;
+    item.focus();
+    item.click();
+  }, [onKeyDown, navigationGrid]);
+
+  const handleClickOutside = ev => {
+    if (myRef.current && ev.target && !myRef.current.contains(ev.target)) {
+      setIsBlurBlocked(false);
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("keydown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleClickOutside);
+    };
+  });
+
+  const handleOnBlur = ev => {
+    ev.preventDefault();
+
+    if (!blurBlocked && onBlur) {
+      onBlur(ev);
+    }
+  };
+
+  const handleOnMouseDown = ev => {
+    setIsBlurBlocked(true); // If the mousedown event occurred on the currently-focused <SimpleColor>
+
+    if (focusedElement !== null && focusedElement === ev.target) {
+      ev.preventDefault(); // If a different <SimpleColor> is currently focused
+    } else if (focusedElement !== null) {
+      ev.preventDefault();
+      setIsBlurBlocked(false);
+      setFocusedElement(ev.target); // If no <SimpleColor> is currently focused
+    } else {
+      setIsBlurBlocked(true);
+      setFocusedElement(ev.target);
+    }
+  };
+
+  const validationProps = {
+    error,
+    warning,
+    info
+  };
+  return /*#__PURE__*/React.createElement(Fieldset, _extends({
+    role: "radiogroup",
+    legend: legend,
+    isRequired: required
+  }, validationOnLegend && validationProps, tagComponent("simple-color-picker", props), filterStyledSystemMarginProps(rest)), /*#__PURE__*/React.createElement(StyledContent, null, /*#__PURE__*/React.createElement(InputGroupContext.Consumer, null, ({
+    onMouseEnter,
+    onMouseLeave
+  }) => /*#__PURE__*/React.createElement(StyledColorOptions, _extends({
+    maxWidth: maxWidth,
+    childWidth: childWidth,
+    error: error,
+    warning: warning,
+    info: info,
+    ref: myRef,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave
+  }, validationProps), /*#__PURE__*/React.createElement(RadioButtonMapper, {
+    name: name,
+    value: value,
+    onChange: onChange,
+    onMouseDown: handleOnMouseDown,
+    onKeyDown: onKeyDownHandler,
+    onBlur: handleOnBlur
+  }, navigationGrid))), !validationOnLegend && /*#__PURE__*/React.createElement(ValidationIcon, _extends({}, validationProps, {
+    tooltipFlipOverrides: ["top", "bottom"]
+  }))));
+};
+
+SimpleColorPicker.propTypes = {
+  /** Filtered styled system margin props */
+  ...marginPropTypes,
+
+  /** The SimpleColor components to be rendered in the group */
+  children: (props, propName, componentName) => {
+    let error;
+    const prop = props[propName];
+    React.Children.forEach(prop, child => {
+      if (child === null) {
+        return;
+      }
+
+      if (SimpleColor.displayName !== child.type.displayName) {
+        error = new Error(`\`${componentName}\` only accepts children of type \`${SimpleColor.displayName}\`.`);
+      }
+    });
+    return error;
+  },
+
+  /** Should the onBlur callback prop be initially blocked? */
+  isBlurBlocked: PropTypes.bool,
+
+  /** Indicate that error has occurred
+  Pass string to display icon, tooltip and red border
+  Pass true boolean to only display red border */
+  error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+
+  /** Indicate that warning has occurred
+  Pass string to display icon, tooltip and orange border
+  Pass true boolean to only display orange border */
+  warning: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+
+  /** Indicate additional information
+  Pass string to display icon, tooltip and blue border
+  Pass true boolean to only display blue border */
+  info: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+
+  /** When true, validation icon will be placed on legend instead of being placed by the input */
+  validationOnLegend: PropTypes.bool,
+
+  /** The content for the RadioGroup Legend */
+  legend: PropTypes.string.isRequired,
+
+  /** The currently selected color. */
+  value: PropTypes.string,
+
+  /** The name to apply to the input. */
+  name: PropTypes.string,
+
+  /** A callback triggered when a color is selected. */
+  onChange: PropTypes.func,
+
+  /** A callback triggered when a color is selected. */
+  onBlur: PropTypes.func,
+
+  /** A callback triggered on key down. */
+  onKeyDown: PropTypes.func,
+
+  /** prop that sets max-width in css */
+  maxWidth: PropTypes.string,
+
+  /** prop that represents childWidth */
+  childWidth: PropTypes.string,
+
+  /** Flag to configure component as mandatory */
+  required: PropTypes.bool
+};
+export default SimpleColorPicker;

package/esm/components/simple-color-picker/simple-color-picker.d.ts

@@ -0,0 +1,43 @@
+import * as React from "react";
+import { MarginProps } from "styled-system";
+import { ValidationPropTypes } from "../../__internal__/validations";
+import { SimpleColorProps } from "./simple-color/simple-color";
+
+type SimpleColorPickerChild =
+  | React.ReactElement<SimpleColorProps>
+  | boolean
+  | null
+  | undefined;
+
+export interface SimpleColorPickerProps
+  extends ValidationPropTypes,
+    MarginProps {
+  /** The SimpleColor components to be rendered in the group */
+  children?: SimpleColorPickerChild | SimpleColorPickerChild[];
+  /** prop that represents childWidth */
+  childWidth?: string;
+  /** Should the onBlur callback prop be initially blocked? */
+  isBlurBlocked?: boolean;
+  /** The content for the Legend */
+  legend: string;
+  /** prop that sets max-width in css */
+  maxWidth?: string;
+  /** The name to apply to the input. */
+  name?: string;
+  /** Prop for `onChange` events */
+  onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
+  /** Prop for `onKeyDown` events */
+  onKeyDown?: (ev: React.KeyboardEvent<HTMLInputElement>) => void;
+  /** Prop for `onBlur` events */
+  onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
+  /** Flag to configure component as mandatory */
+  required?: boolean;
+  /** When true, validation icon will be placed on legend instead of being placed by the input */
+  validationOnLegend?: boolean;
+  /** The currently selected color. */
+  value?: string;
+}
+
+declare function SimpleColorPicker(props: SimpleColorPickerProps): JSX.Element;
+
+export default SimpleColorPicker;

package/esm/components/simple-color-picker/simple-color-picker.style.d.ts

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

package/esm/components/simple-color-picker/simple-color-picker.style.js

@@ -0,0 +1,44 @@
+import styled, { css } from "styled-components";
+import StyledValidationIcon from "../../__internal__/validations/validation-icon.style";
+const BORDER_WIDTH = 2;
+
+const getRoundedMaxWidth = (maxWidth, childWidth) => Math.floor(maxWidth / childWidth) * childWidth;
+
+const StyledContent = styled.div`
+  display: flex;
+  align-items: center;
+
+  ${StyledValidationIcon} {
+    margin-left: 4px;
+  }
+`;
+const StyledColorOptions = styled.div`
+  max-width: ${({
+  maxWidth,
+  childWidth
+}) => getRoundedMaxWidth(maxWidth, childWidth)}px;
+
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  border-left: ${BORDER_WIDTH}px solid transparent;
+  border-top: ${BORDER_WIDTH}px solid transparent;
+
+  ${({
+  error,
+  info,
+  warning
+}) => {
+  if (error) return css`
+        outline: var(--borderWidth200) solid var(--colorsSemanticNegative500);
+      `;
+  if (warning) return css`
+        outline: var(--borderWidth200) solid var(--colorsSemanticCaution500);
+      `;
+  if (info) return css`
+        outline: var(--borderWidth200) solid var(--colorsSemanticInfo500);
+      `;
+  return "";
+}}
+`;
+export { StyledContent, StyledColorOptions };