@decisiv/ui-components 2.0.1-alpha.21 → 2.0.1-alpha.210

package/lib/components/Link/styles.js

@@ -0,0 +1,131 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.linkColorStyles = linkColorStyles;
+exports.linkStyles = exports.sharedLinkStyles = exports.IconContainer = exports.fontSize = void 0;
+
+var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
+
+var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _styledTheming = _interopRequireDefault(require("styled-theming"));
+
+var _designTokens = _interopRequireDefault(require("@decisiv/design-tokens"));
+
+var _ConfigProvider = require("../../providers/ConfigProvider");
+
+var _focusRingWithColor = _interopRequireDefault(require("../../utils/focusRingWithColor"));
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { keys.push.apply(keys, Object.getOwnPropertySymbols(object)); } if (enumerableOnly) keys = keys.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var _designTokens$color = _designTokens.default.color,
+    base = _designTokens$color.base,
+    interaction = _designTokens$color.interaction,
+    opacity = _designTokens$color.opacity,
+    fontSizes = _designTokens.default.typography.size.alias;
+/*
+  Notes about changing SVG fill color inside visited links:
+
+  1: Changing the color of a node that contains SVG with nodes set to have
+     fill="currentColor" does not work on Safari for :visited links (it does
+     work on Chrome and Firefox). To work around that, we instead change the
+     fill color of those SVG nodes to be the same color as the visited link.
+*/
+
+function linkColorStyles(normalColor, visitedColor, hoverColor, focusColors) {
+  var focusStyles = focusColors ? (0, _styledComponents.css)(["&:focus{border-color:", ";", "}"], (0, _toColorString.default)(focusColors.border), (0, _focusRingWithColor.default)((0, _toColorString.default)(focusColors.shadow))) : (0, _styledComponents.css)(["&:focus{border-color:transparent;box-shadow:none;}"]);
+  var normalColorString = (0, _toColorString.default)(normalColor);
+  var visitedColorString = (0, _toColorString.default)(visitedColor);
+  var hoverColorString = (0, _toColorString.default)(hoverColor);
+  return (0, _styledComponents.css)(["&:link{color:", ";}", " &:visited,&:visited svg [fill='currentColor']{color:", ";fill:", ";}&:hover,&:hover svg [fill='currentColor']{color:", ";fill:", ";}"], normalColorString, focusStyles, visitedColorString, visitedColorString, hoverColorString, hoverColorString);
+}
+
+var modeStateColors = {
+  light: {
+    normal: interaction.pacificOcean,
+    visited: interaction.redWine,
+    hover: interaction.indianOcean,
+    focus: {
+      border: interaction.pacificOcean,
+      shadow: interaction.pacificOcean40
+    }
+  },
+  dark: {
+    normal: interaction.arcticOcean,
+    visited: interaction.roseWine,
+    hover: interaction.atlanticOcean,
+    focus: {
+      border: interaction.arcticOcean,
+      shadow: interaction.arcticOcean40
+    }
+  }
+};
+
+var modeColorStyles = function modeColorStyles(mode) {
+  var modeColors = modeStateColors[mode];
+  return linkColorStyles(modeColors.normal, modeColors.visited, modeColors.hover, modeColors.focus);
+};
+
+var invertedColorStyles = function invertedColorStyles() {
+  return linkColorStyles(base.snowWhite, _objectSpread({}, base.charcoal, {
+    alpha: 0.6
+  }), _objectSpread({}, base.snowWhite, {
+    alpha: 0.7
+  }), {
+    border: base.blackSheep,
+    shadow: opacity.charcoal40
+  });
+};
+
+var color = _styledTheming.default.variants(_ConfigProvider.themeKeys.mode, 'variant', {
+  normal: {
+    light: modeColorStyles('light'),
+    dark: modeColorStyles('dark')
+  },
+  inverted: {
+    light: invertedColorStyles(),
+    dark: invertedColorStyles()
+  }
+});
+
+var fontSize = function fontSize(p) {
+  var size = (0, _rem.default)(fontSizes[p.size === 'small' ? 'paragraph2' : 'default']);
+  return (0, _styledComponents.css)(["font-size:", ";"], size);
+};
+
+exports.fontSize = fontSize;
+var iconMarginProp = {
+  left: 'margin-right',
+  right: 'margin-left'
+};
+
+var iconMargin = function iconMargin(props) {
+  if (props.withText) {
+    return "".concat(iconMarginProp[props.position], ": ").concat((0, _rem.default)(5));
+  }
+
+  return '';
+};
+
+var IconContainer = _styledComponents.default.span.withConfig({
+  displayName: "styles__IconContainer",
+  componentId: "sc-7854xa-0"
+})(["line-height:0;", ";"], iconMargin);
+
+exports.IconContainer = IconContainer;
+var sharedLinkStyles = (0, _styledComponents.css)(["background-color:transparent;align-items:baseline;border:1px solid transparent;border-radius:2px;display:inline-flex;text-decoration:underline;transition:none;&:hover{text-decoration:underline;}", ";", "{align-self:center;}"], fontSize, IconContainer);
+exports.sharedLinkStyles = sharedLinkStyles;
+var linkStyles = (0, _styledComponents.css)(["cursor:pointer;", ";", ";"], color, sharedLinkStyles);
+exports.linkStyles = linkStyles;

package/lib/components/Link/types.d.ts

@@ -0,0 +1,28 @@
+import { ComponentPropsWithRef, ReactNode, Ref } from 'react';
+import { StyledComponent } from 'styled-components';
+import { RgbaColor, RgbColor } from 'polished/lib/types/color';
+import { IconProps } from '@decisiv/iconix';
+import { LinkRenderer, LinkRendererRef } from '../../providers/ConfigProvider';
+export declare type LinkRef = LinkRendererRef;
+export declare type LinkSize = 'medium' | 'small';
+export declare type IconPosition = 'left' | 'right';
+export declare type LinkVariant = 'normal' | 'inverted';
+export declare type Color = RgbColor | RgbaColor;
+export declare type IconComponent = (props: IconProps) => JSX.Element;
+export interface LinkProps extends ComponentPropsWithRef<'a'> {
+    disabled?: boolean;
+    icon?: IconComponent;
+    iconPosition?: IconPosition;
+    size?: LinkSize;
+    text?: string | ReactNode;
+    to: string;
+    variant?: LinkVariant;
+}
+interface RendererProps {
+    children: ReactNode;
+    ref?: Ref<LinkRef>;
+    size?: LinkSize;
+}
+export declare type StyledLinkRenderer = StyledComponent<LinkRenderer, {}, RendererProps>;
+export {};
+//# sourceMappingURL=types.d.ts.map

package/lib/components/Link/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Link/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAE/D,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AAE/E,oBAAY,OAAO,GAAG,eAAe,CAAC;AACtC,oBAAY,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAC1C,oBAAY,YAAY,GAAG,MAAM,GAAG,OAAO,CAAC;AAC5C,oBAAY,WAAW,GAAG,QAAQ,GAAG,UAAU,CAAC;AAEhD,oBAAY,KAAK,GAAG,QAAQ,GAAG,SAAS,CAAC;AACzC,oBAAY,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAE9D,MAAM,WAAW,SAAU,SAAQ,qBAAqB,CAAC,GAAG,CAAC;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AAED,UAAU,aAAa;IACrB,QAAQ,EAAE,SAAS,CAAC;IACpB,GAAG,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB;AAED,oBAAY,kBAAkB,GAAG,eAAe,CAC9C,YAAY,EACZ,EAAE,EACF,aAAa,CACd,CAAC"}

package/lib/components/Link/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/components/List/BaseCell/index.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export interface BaseCellProps {
+    children: ReactNode;
+}
+export default function BaseCell({ children }: BaseCellProps): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/lib/components/List/BaseCell/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/List/BaseCell/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIzC,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAAE,aAAa,eAE3D"}

package/lib/components/List/BaseCell/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = BaseCell;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styles = require("./styles");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function BaseCell(_ref) {
+  var children = _ref.children;
+  return _react.default.createElement(_styles.Container, null, children);
+}

package/lib/components/List/BaseCell/index.test.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _ = _interopRequireDefault(require("."));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+describe('BaseCell', function () {
+  it('renders component children', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+    var _render, getByText;
+
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _render = (0, _react2.render)(_react.default.createElement(_.default, null, _react.default.createElement("div", null, "Test"))), getByText = _render.getByText;
+            expect(getByText('Test')).toBeInTheDocument();
+
+          case 2:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+});

package/lib/components/List/BaseCell/styles.d.ts

@@ -0,0 +1,198 @@
+/// <reference types="react" />
+export declare const Container: import("styled-components").StyledComponent<"div", any, Partial<{
+    readonly alignContent?: string | import("../../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly alignItems?: string | import("../../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly alignSelf?: string | import("../../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly flex?: string | number | import("../../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("react").ReactText, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly flexBasis?: string | import("../../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly flexDirection?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "row" | "column" | "column-reverse" | "row-reverse" | import("../../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").FlexDirectionProperty, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly flexGrow?: number | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | import("../../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").GlobalsNumber, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly flexShrink?: number | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | import("../../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").GlobalsNumber, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly flexWrap?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "nowrap" | "wrap" | "wrap-reverse" | import("../../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").FlexWrapProperty, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly justifyContent?: string | import("../../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly justifyItems?: string | import("../../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly justifySelf?: string | import("../../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly order?: number | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | import("../../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").GlobalsNumber, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly size?: "XS" | "SM" | "MD" | "LG" | "XL" | undefined;
+}> & Partial<{
+    readonly margin: import("../../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly marginBottom: import("../../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly marginLeft: import("../../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly marginRight: import("../../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly marginTop: import("../../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly marginX: import("../../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly marginY: import("../../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly padding: import("../../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly paddingBottom: import("../../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly paddingLeft: import("../../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly paddingRight: import("../../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly paddingTop: import("../../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly paddingX: import("../../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly paddingY: import("../../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+}> & {
+    paddingX: number;
+    paddingY: number;
+}, "paddingX" | "paddingY">;
+//# sourceMappingURL=styles.d.ts.map

package/lib/components/List/BaseCell/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/List/BaseCell/styles.ts"],"names":[],"mappings":";AAQA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAcrB,CAAC"}

package/lib/components/List/BaseCell/styles.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
+
+var _designTokens = require("@decisiv/design-tokens");
+
+var _Flex = _interopRequireDefault(require("../../Flex"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// eslint-disable-next-line import/prefer-default-export
+var Container = (0, _styledComponents.default)(_Flex.default).attrs({
+  paddingX: 1,
+  paddingY: 0.6
+}).withConfig({
+  displayName: "styles__Container",
+  componentId: "rrcmey-0"
+})(["background-color:inherit;border:inherit;&:first-child{padding-right:", ";}&:last-child{padding-left:", ";}"], (0, _rem.default)(_designTokens.spacing.base * 0.5), (0, _rem.default)(_designTokens.spacing.base * 0.5));
+exports.Container = Container;

package/lib/components/List/ContentContainer/index.d.ts

@@ -0,0 +1,19 @@
+import { ComponentType } from 'react';
+import { ListViewState } from '../types';
+export declare type ValueType = string | number | boolean | Record<string, unknown>;
+interface ExternalComponentProps<T extends ValueType = string> extends Record<string, unknown> {
+    value?: T;
+}
+export interface ContentContainerProps<T extends ValueType> {
+    defaultViewState?: ListViewState;
+    Component?: ComponentType<ExternalComponentProps<T>>;
+    value?: T;
+}
+export default function ContentContainer<T extends ValueType = string>({ defaultViewState, Component, value, }: ContentContainerProps<T>): JSX.Element;
+export declare function useListItemContent(): {
+    viewState: "form" | "view";
+    toggle: () => void;
+    size: "small" | "medium";
+};
+export {};
+//# sourceMappingURL=index.d.ts.map

package/lib/components/List/ContentContainer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/List/ContentContainer/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAKZ,aAAa,EAEd,MAAM,OAAO,CAAC;AAOf,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAIzC,oBAAY,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAE5E,UAAU,sBAAsB,CAAC,CAAC,SAAS,SAAS,GAAG,MAAM,CAC3D,SAAQ,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC/B,KAAK,CAAC,EAAE,CAAC,CAAC;CACX;AAED,MAAM,WAAW,qBAAqB,CAAC,CAAC,SAAS,SAAS;IACxD,gBAAgB,CAAC,EAAE,aAAa,CAAC;IACjC,SAAS,CAAC,EAAE,aAAa,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC;IACrD,KAAK,CAAC,EAAE,CAAC,CAAC;CACX;AAYD,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,CAAC,SAAS,SAAS,GAAG,MAAM,EAAE,EACrE,gBAAgB,EAChB,SAAmE,EACnE,KAAK,GACN,EAAE,qBAAqB,CAAC,CAAC,CAAC,eA4B1B;AAED,wBAAgB,kBAAkB;;;;EAKjC"}

package/lib/components/List/ContentContainer/index.js

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ContentContainer;
+exports.useListItemContent = useListItemContent;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _BaseCell = _interopRequireDefault(require("../BaseCell"));
+
+var _DefaultCell = _interopRequireDefault(require("../DefaultCell"));
+
+var _constants = require("../constants");
+
+var _ = require("..");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { keys.push.apply(keys, Object.getOwnPropertySymbols(object)); } if (enumerableOnly) keys = keys.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
+
+function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var ContentCellProvider = (0, _react.createContext)({
+  toggle: function toggle() {
+    return undefined;
+  },
+  viewState: _constants.VIEW_STATES.VIEW
+});
+
+function ContentContainer(_ref) {
+  var defaultViewState = _ref.defaultViewState,
+      _ref$Component = _ref.Component,
+      Component = _ref$Component === void 0 ? _DefaultCell.default : _ref$Component,
+      value = _ref.value;
+
+  var _useState = (0, _react.useState)(defaultViewState || 'view'),
+      _useState2 = _slicedToArray(_useState, 2),
+      viewState = _useState2[0],
+      setViewState = _useState2[1];
+
+  var toggle = (0, _react.useCallback)(function () {
+    setViewState(function (oldState) {
+      if (oldState === _constants.VIEW_STATES.VIEW) return _constants.VIEW_STATES.FORM;
+      return _constants.VIEW_STATES.VIEW;
+    });
+  }, []);
+  var values = (0, _react.useMemo)(function () {
+    return {
+      viewState: viewState,
+      toggle: toggle
+    };
+  }, [viewState, toggle]);
+  return _react.default.createElement(ContentCellProvider.Provider, {
+    value: values
+  }, _react.default.createElement(_BaseCell.default, null, _react.default.createElement(Component, {
+    value: value
+  })));
+}
+
+function useListItemContent() {
+  var listContextValue = (0, _react.useContext)(_.ListContext);
+  var contentCellContextValue = (0, _react.useContext)(ContentCellProvider);
+  return _objectSpread({}, listContextValue, {}, contentCellContextValue);
+}