@salutejs/plasma-new-hope 0.324.0-dev.0 → 0.325.0-canary.1954.15207973918.0

package/es/index.js

@@ -225,6 +225,9 @@ export { noteConfig, noteRoot } from './components/Note/Note.js';
 export { classes as noteClasses, tokens as noteTokens } from './components/Note/Note.tokens.js';
 export { tableConfig, tableRoot } from './components/Table/Table.js';
 export { tableTokens } from './components/Table/Table.tokens.js';
+export { listConfig, listRoot } from './components/List/List.js';
+export { ListItem } from './components/List/ui/ListItem.js';
+export { classes as listClasses, tokens as listTokens } from './components/List/List.tokens.js';
 export { linkButtonConfig, linkButtonRoot } from './components/LinkButton/LinkButton.js';
 export { tokens as linkButtonTokens } from './components/LinkButton/LinkButton.tokens.js';
 export { composeNumberFormat } from './components/NumberFormat/NumberFormat.js';

package/es/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salutejs/plasma-new-hope",
-  "version": "0.324.0-dev.0",
+  "version": "0.325.0-canary.1954.15207973918.0",
   "description": "Salute Design System blueprint",
   "main": "cjs/index.js",
   "module": "es/index.js",
@@ -137,5 +137,5 @@
   "sideEffects": [
     "*.css"
   ],
-  "gitHead": "8cb722bf86d974c8d8968001a1fe593041b96afd"
+  "gitHead": "12a3520de31101f419aa641fb579485067d43df4"
 }

package/styled-components/cjs/components/List/List.js

@@ -0,0 +1,59 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.listRoot = exports.listConfig = void 0;
+var _react = /*#__PURE__*/_interopRequireWildcard(/*#__PURE__*/require("react"));
+var _utils = /*#__PURE__*/require("../../utils");
+var _List = /*#__PURE__*/require("./List.styles");
+var _List2 = /*#__PURE__*/require("./List.tokens");
+var _base = /*#__PURE__*/require("./variations/_variant/base");
+var _base2 = /*#__PURE__*/require("./variations/_view/base");
+var _base3 = /*#__PURE__*/require("./variations/_size/base");
+var _base4 = /*#__PURE__*/require("./variations/_disabled/base");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var listRoot = exports.listRoot = function listRoot(Root) {
+  return /*#__PURE__*/(0, _react.forwardRef)(function (_ref, outerRootRef) {
+    var size = _ref.size,
+      view = _ref.view,
+      variant = _ref.variant,
+      disabled = _ref.disabled,
+      className = _ref.className,
+      children = _ref.children;
+    return /*#__PURE__*/_react["default"].createElement(Root, {
+      ref: outerRootRef,
+      size: size,
+      view: view,
+      variant: variant,
+      disabled: disabled,
+      className: (0, _utils.cx)(_List2.classes.listRoot, className)
+    }, children);
+  });
+};
+var listConfig = exports.listConfig = {
+  name: 'List',
+  tag: 'ul',
+  layout: listRoot,
+  base: _List.base,
+  variations: {
+    view: {
+      css: _base2.base
+    },
+    size: {
+      css: _base3.base
+    },
+    variant: {
+      css: _base.base
+    },
+    disabled: {
+      css: _base4.base
+    }
+  },
+  defaults: {
+    view: 'default',
+    size: 'm'
+  }
+};

package/styled-components/cjs/components/List/List.styles.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.base = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _List = /*#__PURE__*/require("./List.tokens");
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["display:flex;flex-direction:column;gap:var(", ");align-items:stretch;height:auto;width:100%;list-style-type:none;padding:0;margin:0;"], _List.tokens.listGap);

package/styled-components/cjs/components/List/List.tokens.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tokens = exports.classes = void 0;
+var classes = exports.classes = {
+  listRoot: 'list-root',
+  listItem: 'list-item',
+  filledStretching: 'list-stretching-filled',
+  fixedStretching: 'list-stretching-fixed'
+};
+var tokens = exports.tokens = {
+  listGap: '--plasma-list-gap',
+  listWidth: '--plasma-list-width',
+  listItemBackground: '--plasma-list-item-background',
+  listItemBackgroundHover: '--plasma-list-item-background-hover',
+  listItemBorderRadius: '--plasma-list-item-border-radius',
+  listItemPaddingLeft: '--plasma-list-item-padding-left',
+  listItemPaddingRight: '--plasma-list-item-padding-right',
+  listItemPaddingTop: '--plasma-list-item-padding-top',
+  listItemPaddingBottom: '--plasma-list-item-padding-bottom',
+  listItemBorderColor: '--plasma-list-item-border-color',
+  listItemBorderColorHover: '--plasma-list-item-border-color-hover',
+  listItemBorderWidth: '--plasma-list-item-border-width',
+  listItemIconLeftColor: '--plasma-list-item-color-icon-left',
+  listItemIconRightColor: '--plasma-list-item-color-icon-right',
+  listItemGap: '--plasma-list-item-gap',
+  listItemVariantDifference: '--plasma-list-item-variant-difference',
+  listItemColor: '--plasma-list-item-color',
+  listItemColorHover: '--plasma-list-item-color-hover',
+  listItemFontFamily: '--plasma-list-item-font-family',
+  listItemFontSize: '--plasma-list-item-font-size',
+  listItemFontStyle: '--plasma-list-item-font-style',
+  listItemFontWeight: '--plasma-list-item-font-weight',
+  listItemLetterSpacing: '--plasma-list-item-letter-spacing',
+  listItemLineHeight: '--plasma-list-item-line-height',
+  listDisabledOpacity: '--plasma-list-disabled-opacity'
+};

package/styled-components/cjs/components/List/List.types.js

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

package/styled-components/cjs/components/List/index.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ListItem", {
+  enumerable: true,
+  get: function get() {
+    return _ListItem.ListItem;
+  }
+});
+Object.defineProperty(exports, "listClasses", {
+  enumerable: true,
+  get: function get() {
+    return _List2.classes;
+  }
+});
+Object.defineProperty(exports, "listConfig", {
+  enumerable: true,
+  get: function get() {
+    return _List.listConfig;
+  }
+});
+Object.defineProperty(exports, "listRoot", {
+  enumerable: true,
+  get: function get() {
+    return _List.listRoot;
+  }
+});
+Object.defineProperty(exports, "listTokens", {
+  enumerable: true,
+  get: function get() {
+    return _List2.tokens;
+  }
+});
+var _List = /*#__PURE__*/require("./List");
+var _ListItem = /*#__PURE__*/require("./ui/ListItem");
+var _List2 = /*#__PURE__*/require("./List.tokens");

package/styled-components/cjs/components/List/ui/ListItem.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListItem = void 0;
+var _react = /*#__PURE__*/_interopRequireDefault(/*#__PURE__*/require("react"));
+var _ListItem = /*#__PURE__*/require("./ListItem.styles");
+var _excluded = ["children", "contentRight", "disabled"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+var ListItem = exports.ListItem = function ListItem(_ref) {
+  var children = _ref.children,
+    contentRight = _ref.contentRight,
+    disabled = _ref.disabled,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_react["default"].createElement(_ListItem.StyledListItem, _extends({
+    disabled: disabled
+  }, rest), /*#__PURE__*/_react["default"].createElement(_ListItem.CellItem, {
+    contentRight: contentRight
+  }, children));
+};

package/styled-components/cjs/components/List/ui/ListItem.styles.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledListItem = exports.CellItem = void 0;
+var _styledComponents = /*#__PURE__*/_interopRequireDefault(/*#__PURE__*/require("styled-components"));
+var _List = /*#__PURE__*/require("../List.tokens");
+var _Cell = /*#__PURE__*/require("../../Cell");
+var _engines = /*#__PURE__*/require("../../../engines");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var mergedCellConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Cell.cellConfig);
+var Cell = /*#__PURE__*/(0, _engines.component)(mergedCellConfig);
+var CellItem = exports.CellItem = /*#__PURE__*/(0, _styledComponents["default"])(Cell).withConfig({
+  componentId: "plasma-new-hope__sc-1roh0z4-0"
+})(["", ":100%;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":var(", ");", ":var(", ");", ":transparent;"], _Cell.cellTokens.cellWidth, _Cell.cellTokens.cellPadding, _Cell.cellTokens.cellPaddingLeftContent, _Cell.cellTokens.cellPaddingContent, _Cell.cellTokens.cellPaddingRightContent, _Cell.cellTokens.cellTextboxGap, _Cell.cellTokens.cellGap, _List.tokens.listItemGap, _Cell.cellTokens.cellColor, _List.tokens.listItemColor, _Cell.cellTokens.cellBackgroundColor);
+var StyledListItem = exports.StyledListItem = /*#__PURE__*/_styledComponents["default"].li.withConfig({
+  componentId: "plasma-new-hope__sc-1roh0z4-1"
+})(["padding:calc(var(", ") - var(", ")) var(", ") calc(var(", ") - var(", ")) var(", ");border-radius:var(", ");background:var(", ");border:var(", ") solid var(", ");box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;color:var(", ");font-size:var(", ");font-weight:var(", ");font-family:var(", ");font-style:var(", ");line-height:var(", ");letter-spacing:var(", ");&:hover{background:var(", ");border-color:var(", ");color:var(", ");}&[disabled]{cursor:not-allowed;opacity:var(", ");}"], _List.tokens.listItemPaddingTop, _List.tokens.listItemVariantDifference, _List.tokens.listItemPaddingRight, _List.tokens.listItemPaddingBottom, _List.tokens.listItemVariantDifference, _List.tokens.listItemPaddingLeft, _List.tokens.listItemBorderRadius, _List.tokens.listItemBackground, _List.tokens.listItemBorderWidth, _List.tokens.listItemBorderColor, _List.tokens.listItemColor, _List.tokens.listItemFontSize, _List.tokens.listItemFontWeight, _List.tokens.listItemFontFamily, _List.tokens.listItemFontStyle, _List.tokens.listItemLineHeight, _List.tokens.listItemLetterSpacing, _List.tokens.listItemBackgroundHover, _List.tokens.listItemBorderColorHover, _List.tokens.listItemColorHover, _List.tokens.listDisabledOpacity);

package/styled-components/cjs/components/List/ui/ListItem.types.js

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

package/styled-components/cjs/components/List/variations/_disabled/base.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.base = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)([""]);

package/styled-components/cjs/components/List/variations/_disabled/tokens.json

@@ -0,0 +1 @@
+[]

package/styled-components/cjs/components/List/variations/_size/base.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.base = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)([""]);

package/styled-components/cjs/components/List/variations/_size/tokens.json

@@ -0,0 +1 @@
+[]

package/styled-components/cjs/components/List/variations/_variant/base.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.base = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)([""]);

package/styled-components/cjs/components/List/variations/_variant/tokens.json

@@ -0,0 +1 @@
+[]

package/styled-components/cjs/components/List/variations/_view/base.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.base = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)([""]);

package/styled-components/cjs/components/List/variations/_view/tokens.json

@@ -0,0 +1 @@
+[]

package/styled-components/cjs/examples/plasma_b2c/components/List/List.config.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.config = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _List = /*#__PURE__*/require("../../../../components/List");
+var config = exports.config = {
+  defaults: {
+    view: 'default',
+    size: 's',
+    variant: 'normal'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-primary);", ":transparent;", ":var(--surface-transparent-secondary);", ":transparent;", ":transparent;"], _List.listTokens.listItemColor, _List.listTokens.listItemColorHover, _List.listTokens.listItemBackground, _List.listTokens.listItemBackgroundHover, _List.listTokens.listItemBorderColor, _List.listTokens.listItemBorderColorHover)
+    },
+    size: {
+      xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":0.5rem;", ":0.5rem;", ":0.5rem;", ":0.5rem;", ":0rem;", ":0.375rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], _List.listTokens.listItemPaddingTop, _List.listTokens.listItemPaddingLeft, _List.listTokens.listItemPaddingRight, _List.listTokens.listItemPaddingBottom, _List.listTokens.listItemBorderRadius, _List.listTokens.listItemBorderWidth, _List.listTokens.listItemGap, _List.listTokens.listItemFontFamily, _List.listTokens.listItemFontSize, _List.listTokens.listItemFontStyle, _List.listTokens.listItemFontWeight, _List.listTokens.listItemLetterSpacing, _List.listTokens.listItemLineHeight),
+      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.689rem;", ":0.75rem;", ":0.75rem;", ":0.689rem;", ":0.625rem;", ":0rem;", ":0.375rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], _List.listTokens.listItemPaddingTop, _List.listTokens.listItemPaddingLeft, _List.listTokens.listItemPaddingRight, _List.listTokens.listItemPaddingBottom, _List.listTokens.listItemBorderRadius, _List.listTokens.listItemBorderWidth, _List.listTokens.listItemGap, _List.listTokens.listItemFontFamily, _List.listTokens.listItemFontSize, _List.listTokens.listItemFontStyle, _List.listTokens.listItemFontWeight, _List.listTokens.listItemLetterSpacing, _List.listTokens.listItemLineHeight),
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":0.875rem;", ":0.875rem;", ":0.75rem;", ":0.75rem;", ":0rem;", ":0.5rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], _List.listTokens.listItemPaddingTop, _List.listTokens.listItemPaddingLeft, _List.listTokens.listItemPaddingRight, _List.listTokens.listItemPaddingBottom, _List.listTokens.listItemBorderRadius, _List.listTokens.listItemBorderWidth, _List.listTokens.listItemGap, _List.listTokens.listItemFontFamily, _List.listTokens.listItemFontSize, _List.listTokens.listItemFontStyle, _List.listTokens.listItemFontWeight, _List.listTokens.listItemLetterSpacing, _List.listTokens.listItemLineHeight),
+      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":1rem;", ":1rem;", ":1rem;", ":1rem;", ":0.875rem;", ":0rem;", ":0.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], _List.listTokens.listItemPaddingTop, _List.listTokens.listItemPaddingLeft, _List.listTokens.listItemPaddingRight, _List.listTokens.listItemPaddingBottom, _List.listTokens.listItemBorderRadius, _List.listTokens.listItemBorderWidth, _List.listTokens.listItemGap, _List.listTokens.listItemFontFamily, _List.listTokens.listItemFontSize, _List.listTokens.listItemFontStyle, _List.listTokens.listItemFontWeight, _List.listTokens.listItemLetterSpacing, _List.listTokens.listItemLineHeight),
+      xl: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.3125rem;", ":1.125rem;", ":1.125rem;", ":1.3125rem;", ":1rem;", ":0rem;", ":0.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], _List.listTokens.listItemPaddingTop, _List.listTokens.listItemPaddingLeft, _List.listTokens.listItemPaddingRight, _List.listTokens.listItemPaddingBottom, _List.listTokens.listItemBorderRadius, _List.listTokens.listItemBorderWidth, _List.listTokens.listItemGap, _List.listTokens.listItemFontFamily, _List.listTokens.listItemFontSize, _List.listTokens.listItemFontStyle, _List.listTokens.listItemFontWeight, _List.listTokens.listItemLetterSpacing, _List.listTokens.listItemLineHeight)
+    },
+    variant: {
+      normal: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;", ":0rem;"], _List.listTokens.listDisabledOpacity, _List.listTokens.listItemVariantDifference),
+      tight: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.25rem;", ":0.4;"], _List.listTokens.listItemVariantDifference, _List.listTokens.listDisabledOpacity)
+    },
+    disabled: {
+      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":red;"], _List.listTokens.listItemBackground)
+    }
+  }
+};

package/styled-components/cjs/examples/plasma_b2c/components/List/List.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListItem = exports.List = void 0;
+var _List = /*#__PURE__*/require("../../../../components/List");
+var _engines = /*#__PURE__*/require("../../../../engines");
+var _List2 = /*#__PURE__*/require("./List.config");
+var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_List.listConfig, _List2.config);
+var List = exports.List = /*#__PURE__*/(0, _engines.component)(mergedConfig);
+var ListItem = exports.ListItem = _List.ListItem;

package/styled-components/cjs/examples/plasma_b2c/components/List/List.stories.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import type { Meta } from '@storybook/react';
+import styled from 'styled-components';
+
+import { IconChevronLeft } from '../../../../components/_Icon';
+import { WithTheme } from '../../../_helpers';
+
+import { List, ListItem } from './List';
+
+const ChevronRight = styled(IconChevronLeft)`
+    transform: rotate(180deg);
+`;
+
+const meta: Meta<typeof List> = {
+    title: 'b2c/Data Display/List',
+    component: List,
+    decorators: [WithTheme],
+    argTypes: {
+        size: {
+            options: ['xl', 'l', 'm', 's', 'xs'],
+            control: {
+                type: 'select',
+            },
+        },
+        view: {
+            options: ['default'],
+            control: {
+                type: 'select',
+            },
+        },
+        variant: {
+            options: ['normal', 'tight'],
+            control: {
+                type: 'select',
+            },
+        },
+    },
+};
+
+export default meta;
+
+export const Default: Story = {
+    args: {
+        view: 'default',
+        size: 'm',
+        variant: 'normal',
+    },
+    render: ({ view, size, ...rest }: StoryProps) => {
+        return (
+            <List view={view} size={size} {...rest}>
+                <ListItem contentRight={<ChevronRight color="inherit" size="xs" />}>Test Item 1</ListItem>
+                <ListItem contentRight={<ChevronRight color="inherit" size="xs" />}>Test Item 2</ListItem>
+                <ListItem contentRight={<ChevronRight color="inherit" size="xs" />} disabled>
+                    Test Item 3
+                </ListItem>
+                <ListItem contentRight={<ChevronRight color="inherit" size="xs" />}>Test Item 4</ListItem>
+            </List>
+        );
+    },
+};

package/styled-components/cjs/examples/plasma_web/components/List/List.config.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.config = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _List = /*#__PURE__*/require("../../../../components/List");
+var config = exports.config = {
+  defaults: {
+    view: 'default',
+    size: 's',
+    variant: 'normal'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-primary);", ":transparent;", ":var(--surface-transparent-secondary);", ":transparent;", ":transparent;"], _List.listTokens.listItemColor, _List.listTokens.listItemColorHover, _List.listTokens.listItemBackground, _List.listTokens.listItemBackgroundHover, _List.listTokens.listItemBorderColor, _List.listTokens.listItemBorderColorHover)
+    },
+    size: {
+      xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":0.5rem;", ":0.5rem;", ":0.5rem;", ":0.5rem;", ":0rem;", ":0.375rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], _List.listTokens.listItemPaddingTop, _List.listTokens.listItemPaddingLeft, _List.listTokens.listItemPaddingRight, _List.listTokens.listItemPaddingBottom, _List.listTokens.listItemBorderRadius, _List.listTokens.listItemBorderWidth, _List.listTokens.listItemGap, _List.listTokens.listItemFontFamily, _List.listTokens.listItemFontSize, _List.listTokens.listItemFontStyle, _List.listTokens.listItemFontWeight, _List.listTokens.listItemLetterSpacing, _List.listTokens.listItemLineHeight),
+      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.689rem;", ":0.75rem;", ":0.75rem;", ":0.689rem;", ":0.625rem;", ":0rem;", ":0.375rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], _List.listTokens.listItemPaddingTop, _List.listTokens.listItemPaddingLeft, _List.listTokens.listItemPaddingRight, _List.listTokens.listItemPaddingBottom, _List.listTokens.listItemBorderRadius, _List.listTokens.listItemBorderWidth, _List.listTokens.listItemGap, _List.listTokens.listItemFontFamily, _List.listTokens.listItemFontSize, _List.listTokens.listItemFontStyle, _List.listTokens.listItemFontWeight, _List.listTokens.listItemLetterSpacing, _List.listTokens.listItemLineHeight),
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":0.875rem;", ":0.875rem;", ":0.75rem;", ":0.75rem;", ":0rem;", ":0.5rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], _List.listTokens.listItemPaddingTop, _List.listTokens.listItemPaddingLeft, _List.listTokens.listItemPaddingRight, _List.listTokens.listItemPaddingBottom, _List.listTokens.listItemBorderRadius, _List.listTokens.listItemBorderWidth, _List.listTokens.listItemGap, _List.listTokens.listItemFontFamily, _List.listTokens.listItemFontSize, _List.listTokens.listItemFontStyle, _List.listTokens.listItemFontWeight, _List.listTokens.listItemLetterSpacing, _List.listTokens.listItemLineHeight),
+      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":1rem;", ":1rem;", ":1rem;", ":1rem;", ":0.875rem;", ":0rem;", ":0.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], _List.listTokens.listItemPaddingTop, _List.listTokens.listItemPaddingLeft, _List.listTokens.listItemPaddingRight, _List.listTokens.listItemPaddingBottom, _List.listTokens.listItemBorderRadius, _List.listTokens.listItemBorderWidth, _List.listTokens.listItemGap, _List.listTokens.listItemFontFamily, _List.listTokens.listItemFontSize, _List.listTokens.listItemFontStyle, _List.listTokens.listItemFontWeight, _List.listTokens.listItemLetterSpacing, _List.listTokens.listItemLineHeight),
+      xl: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.3125rem;", ":1.125rem;", ":1.125rem;", ":1.3125rem;", ":1rem;", ":0rem;", ":0.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], _List.listTokens.listItemPaddingTop, _List.listTokens.listItemPaddingLeft, _List.listTokens.listItemPaddingRight, _List.listTokens.listItemPaddingBottom, _List.listTokens.listItemBorderRadius, _List.listTokens.listItemBorderWidth, _List.listTokens.listItemGap, _List.listTokens.listItemFontFamily, _List.listTokens.listItemFontSize, _List.listTokens.listItemFontStyle, _List.listTokens.listItemFontWeight, _List.listTokens.listItemLetterSpacing, _List.listTokens.listItemLineHeight)
+    },
+    variant: {
+      normal: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;", ":0rem;"], _List.listTokens.listDisabledOpacity, _List.listTokens.listItemVariantDifference),
+      tight: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.25rem;", ":0.4;"], _List.listTokens.listItemVariantDifference, _List.listTokens.listDisabledOpacity)
+    },
+    disabled: {
+      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":red;"], _List.listTokens.listItemBackground)
+    }
+  }
+};

package/styled-components/cjs/examples/plasma_web/components/List/List.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListItem = exports.List = void 0;
+var _List = /*#__PURE__*/require("../../../../components/List");
+var _engines = /*#__PURE__*/require("../../../../engines");
+var _List2 = /*#__PURE__*/require("./List.config");
+var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_List.listConfig, _List2.config);
+var List = exports.List = /*#__PURE__*/(0, _engines.component)(mergedConfig);
+var ListItem = exports.ListItem = _List.ListItem;

package/styled-components/cjs/examples/plasma_web/components/List/List.stories.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import type { Meta } from '@storybook/react';
+import styled from 'styled-components';
+
+import { IconChevronLeft } from '../../../../components/_Icon';
+import { WithTheme } from '../../../_helpers';
+
+import { List, ListItem } from './List';
+
+const ChevronRight = styled(IconChevronLeft)`
+    transform: rotate(180deg);
+`;
+
+const meta: Meta<typeof List> = {
+    title: 'web/Data Display/List',
+    component: List,
+    decorators: [WithTheme],
+    argTypes: {
+        size: {
+            options: ['xl', 'l', 'm', 's', 'xs'],
+            control: {
+                type: 'select',
+            },
+        },
+        view: {
+            options: ['default'],
+            control: {
+                type: 'select',
+            },
+        },
+        variant: {
+            options: ['normal', 'tight'],
+            control: {
+                type: 'select',
+            },
+        },
+    },
+};
+
+export default meta;
+
+export const Default: Story = {
+    args: {
+        view: 'default',
+        size: 'm',
+        variant: 'normal',
+    },
+    render: ({ view, size, ...rest }: StoryProps) => {
+        return (
+            <List view={view} size={size} {...rest}>
+                <ListItem contentRight={<ChevronRight color="inherit" size="xs" />}>Test Item 1</ListItem>
+                <ListItem contentRight={<ChevronRight color="inherit" size="xs" />}>Test Item 2</ListItem>
+                <ListItem contentRight={<ChevronRight color="inherit" size="xs" />} disabled>
+                    Test Item 3
+                </ListItem>
+                <ListItem contentRight={<ChevronRight color="inherit" size="xs" />}>Test Item 4</ListItem>
+            </List>
+        );
+    },
+};

package/styled-components/cjs/index.js

@@ -784,6 +784,17 @@ Object.keys(_Table).forEach(function (key) {
     }
   });
 });
+var _List = /*#__PURE__*/require("./components/List");
+Object.keys(_List).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _List[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _List[key];
+    }
+  });
+});
 var _LinkButton = /*#__PURE__*/require("./components/LinkButton");
 Object.keys(_LinkButton).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/styled-components/es/components/List/List.js

@@ -0,0 +1,50 @@
+import React, { forwardRef } from 'react';
+import { cx } from "../../utils";
+import { base } from "./List.styles";
+import { classes } from "./List.tokens";
+import { base as variantCSS } from "./variations/_variant/base";
+import { base as viewCSS } from "./variations/_view/base";
+import { base as sizeCSS } from "./variations/_size/base";
+import { base as disabledCSS } from "./variations/_disabled/base";
+export var listRoot = function listRoot(Root) {
+  return /*#__PURE__*/forwardRef(function (_ref, outerRootRef) {
+    var size = _ref.size,
+      view = _ref.view,
+      variant = _ref.variant,
+      disabled = _ref.disabled,
+      className = _ref.className,
+      children = _ref.children;
+    return /*#__PURE__*/React.createElement(Root, {
+      ref: outerRootRef,
+      size: size,
+      view: view,
+      variant: variant,
+      disabled: disabled,
+      className: cx(classes.listRoot, className)
+    }, children);
+  });
+};
+export var listConfig = {
+  name: 'List',
+  tag: 'ul',
+  layout: listRoot,
+  base: base,
+  variations: {
+    view: {
+      css: viewCSS
+    },
+    size: {
+      css: sizeCSS
+    },
+    variant: {
+      css: variantCSS
+    },
+    disabled: {
+      css: disabledCSS
+    }
+  },
+  defaults: {
+    view: 'default',
+    size: 'm'
+  }
+};

package/styled-components/es/components/List/List.styles.js

@@ -0,0 +1,3 @@
+import { css } from 'styled-components';
+import { tokens } from "./List.tokens";
+export var base = /*#__PURE__*/css(["display:flex;flex-direction:column;gap:var(", ");align-items:stretch;height:auto;width:100%;list-style-type:none;padding:0;margin:0;"], tokens.listGap);

package/styled-components/es/components/List/List.tokens.js

@@ -0,0 +1,33 @@
+export var classes = {
+  listRoot: 'list-root',
+  listItem: 'list-item',
+  filledStretching: 'list-stretching-filled',
+  fixedStretching: 'list-stretching-fixed'
+};
+export var tokens = {
+  listGap: '--plasma-list-gap',
+  listWidth: '--plasma-list-width',
+  listItemBackground: '--plasma-list-item-background',
+  listItemBackgroundHover: '--plasma-list-item-background-hover',
+  listItemBorderRadius: '--plasma-list-item-border-radius',
+  listItemPaddingLeft: '--plasma-list-item-padding-left',
+  listItemPaddingRight: '--plasma-list-item-padding-right',
+  listItemPaddingTop: '--plasma-list-item-padding-top',
+  listItemPaddingBottom: '--plasma-list-item-padding-bottom',
+  listItemBorderColor: '--plasma-list-item-border-color',
+  listItemBorderColorHover: '--plasma-list-item-border-color-hover',
+  listItemBorderWidth: '--plasma-list-item-border-width',
+  listItemIconLeftColor: '--plasma-list-item-color-icon-left',
+  listItemIconRightColor: '--plasma-list-item-color-icon-right',
+  listItemGap: '--plasma-list-item-gap',
+  listItemVariantDifference: '--plasma-list-item-variant-difference',
+  listItemColor: '--plasma-list-item-color',
+  listItemColorHover: '--plasma-list-item-color-hover',
+  listItemFontFamily: '--plasma-list-item-font-family',
+  listItemFontSize: '--plasma-list-item-font-size',
+  listItemFontStyle: '--plasma-list-item-font-style',
+  listItemFontWeight: '--plasma-list-item-font-weight',
+  listItemLetterSpacing: '--plasma-list-item-letter-spacing',
+  listItemLineHeight: '--plasma-list-item-line-height',
+  listDisabledOpacity: '--plasma-list-disabled-opacity'
+};