@commercetools-uikit/design-system 19.10.0 → 19.12.0

package/dist/commercetools-uikit-design-system.cjs.dev.js

@@ -22,7 +22,6 @@ var isEqual = require('lodash/isEqual');
 var hooks = require('@commercetools-uikit/hooks');
 var _Object$fromEntries = require('@babel/runtime-corejs3/core-js-stable/object/from-entries');
 var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
-var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
 var kebabCase = require('lodash/kebabCase');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 
@@ -44,7 +43,6 @@ var merge__default = /*#__PURE__*/_interopDefault(merge);
 var isEqual__default = /*#__PURE__*/_interopDefault(isEqual);
 var _Object$fromEntries__default = /*#__PURE__*/_interopDefault(_Object$fromEntries);
 var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
-var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
 var kebabCase__default = /*#__PURE__*/_interopDefault(kebabCase);
 
 /*
@@ -523,7 +521,7 @@ function transformTokensToCssVarsValues(tokens) {
     let _ref2 = _slicedToArray(_ref, 2),
       key = _ref2[0],
       value = _ref2[1];
-    return ["--".concat(kebabCase__default["default"](key)), value];
+    return [`--${kebabCase__default["default"](key)}`, value];
   }));
 }
 
@@ -548,11 +546,10 @@ function transformTokensToCssVarsReferences(tokens) {
     },
     includeDefaultValue = _ref3.includeDefaultValue;
   return _Object$fromEntries__default["default"](_mapInstanceProperty__default["default"](_context2 = _Object$entries__default["default"](tokens)).call(_context2, _ref4 => {
-    var _context3;
     let _ref5 = _slicedToArray(_ref4, 2),
       key = _ref5[0],
       value = _ref5[1];
-    return [key, _concatInstanceProperty__default["default"](_context3 = "var(--".concat(kebabCase__default["default"](key))).call(_context3, includeDefaultValue ? ', ' + value : '', ")")];
+    return [key, `var(--${kebabCase__default["default"](key)}${includeDefaultValue ? ', ' + value : ''})`];
   }));
 }
 
@@ -574,7 +571,7 @@ const applyTheme = _ref => {
   if (!target) return;
   const validTheme = _includesInstanceProperty__default["default"](allThemesNames).call(allThemesNames, newTheme || '') ? newTheme : 'default';
   if (newTheme && newTheme !== validTheme) {
-    console.warn("ThemeProvider: the specified theme '".concat(newTheme, "' is not supported."));
+    console.warn(`ThemeProvider: the specified theme '${newTheme}' is not supported.`);
   }
   const vars = transformTokensToCssVarsValues(merge__default["default"]({}, themes.default, themes[validTheme], isObject__default["default"](themeOverrides) ? themeOverrides : {}));
   _forEachInstanceProperty__default["default"](_context = _Object$entries__default["default"](vars)).call(_context, _ref2 => {
@@ -640,11 +637,10 @@ const useTheme = function () {
   // If we use 'useLayoutEffect' here, we would be trying to read the
   // data attribute before it gets set from the effect in the ThemeProvider
   react.useEffect(() => {
-    var _parentSelectorRef$cu;
     // We need to read the current theme after the provider is rendered
     // to have the actual selected theme (calculated client-side) in the
     // hook local state
-    const nextTheme = (_parentSelectorRef$cu = parentSelectorRef.current()) === null || _parentSelectorRef$cu === void 0 ? void 0 : _parentSelectorRef$cu.dataset.theme;
+    const nextTheme = parentSelectorRef.current()?.dataset.theme;
     if (nextTheme) {
       setTheme(nextTheme);
     }
@@ -665,7 +661,7 @@ const withThemeContext = WrappedComponent => {
 };
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "19.10.0";
+var version = "19.11.0";
 
 exports.ThemeProvider = ThemeProvider;
 exports.customProperties = designTokens$1;

package/dist/commercetools-uikit-design-system.cjs.prod.js

@@ -22,7 +22,6 @@ var isEqual = require('lodash/isEqual');
 var hooks = require('@commercetools-uikit/hooks');
 var _Object$fromEntries = require('@babel/runtime-corejs3/core-js-stable/object/from-entries');
 var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
-var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
 var kebabCase = require('lodash/kebabCase');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 
@@ -44,7 +43,6 @@ var merge__default = /*#__PURE__*/_interopDefault(merge);
 var isEqual__default = /*#__PURE__*/_interopDefault(isEqual);
 var _Object$fromEntries__default = /*#__PURE__*/_interopDefault(_Object$fromEntries);
 var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
-var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
 var kebabCase__default = /*#__PURE__*/_interopDefault(kebabCase);
 
 /*
@@ -523,7 +521,7 @@ function transformTokensToCssVarsValues(tokens) {
     let _ref2 = _slicedToArray(_ref, 2),
       key = _ref2[0],
       value = _ref2[1];
-    return ["--".concat(kebabCase__default["default"](key)), value];
+    return [`--${kebabCase__default["default"](key)}`, value];
   }));
 }
 
@@ -548,11 +546,10 @@ function transformTokensToCssVarsReferences(tokens) {
     },
     includeDefaultValue = _ref3.includeDefaultValue;
   return _Object$fromEntries__default["default"](_mapInstanceProperty__default["default"](_context2 = _Object$entries__default["default"](tokens)).call(_context2, _ref4 => {
-    var _context3;
     let _ref5 = _slicedToArray(_ref4, 2),
       key = _ref5[0],
       value = _ref5[1];
-    return [key, _concatInstanceProperty__default["default"](_context3 = "var(--".concat(kebabCase__default["default"](key))).call(_context3, includeDefaultValue ? ', ' + value : '', ")")];
+    return [key, `var(--${kebabCase__default["default"](key)}${includeDefaultValue ? ', ' + value : ''})`];
   }));
 }
 
@@ -574,7 +571,7 @@ const applyTheme = _ref => {
   if (!target) return;
   const validTheme = _includesInstanceProperty__default["default"](allThemesNames).call(allThemesNames, newTheme || '') ? newTheme : 'default';
   if (newTheme && newTheme !== validTheme) {
-    console.warn("ThemeProvider: the specified theme '".concat(newTheme, "' is not supported."));
+    console.warn(`ThemeProvider: the specified theme '${newTheme}' is not supported.`);
   }
   const vars = transformTokensToCssVarsValues(merge__default["default"]({}, themes.default, themes[validTheme], isObject__default["default"](themeOverrides) ? themeOverrides : {}));
   _forEachInstanceProperty__default["default"](_context = _Object$entries__default["default"](vars)).call(_context, _ref2 => {
@@ -640,11 +637,10 @@ const useTheme = function () {
   // If we use 'useLayoutEffect' here, we would be trying to read the
   // data attribute before it gets set from the effect in the ThemeProvider
   react.useEffect(() => {
-    var _parentSelectorRef$cu;
     // We need to read the current theme after the provider is rendered
     // to have the actual selected theme (calculated client-side) in the
     // hook local state
-    const nextTheme = (_parentSelectorRef$cu = parentSelectorRef.current()) === null || _parentSelectorRef$cu === void 0 ? void 0 : _parentSelectorRef$cu.dataset.theme;
+    const nextTheme = parentSelectorRef.current()?.dataset.theme;
     if (nextTheme) {
       setTheme(nextTheme);
     }
@@ -665,7 +661,7 @@ const withThemeContext = WrappedComponent => {
 };
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "19.10.0";
+var version = "19.11.0";
 
 exports.ThemeProvider = ThemeProvider;
 exports.customProperties = designTokens$1;

package/dist/commercetools-uikit-design-system.esm.js

@@ -18,7 +18,6 @@ import isEqual from 'lodash/isEqual';
 import { useMutationObserver } from '@commercetools-uikit/hooks';
 import _Object$fromEntries from '@babel/runtime-corejs3/core-js-stable/object/from-entries';
 import _mapInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/map';
-import _concatInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/concat';
 import kebabCase from 'lodash/kebabCase';
 import { jsx } from '@emotion/react/jsx-runtime';
 
@@ -498,7 +497,7 @@ function transformTokensToCssVarsValues(tokens) {
     let _ref2 = _slicedToArray(_ref, 2),
       key = _ref2[0],
       value = _ref2[1];
-    return ["--".concat(kebabCase(key)), value];
+    return [`--${kebabCase(key)}`, value];
   }));
 }
 
@@ -523,11 +522,10 @@ function transformTokensToCssVarsReferences(tokens) {
     },
     includeDefaultValue = _ref3.includeDefaultValue;
   return _Object$fromEntries(_mapInstanceProperty(_context2 = _Object$entries(tokens)).call(_context2, _ref4 => {
-    var _context3;
     let _ref5 = _slicedToArray(_ref4, 2),
       key = _ref5[0],
       value = _ref5[1];
-    return [key, _concatInstanceProperty(_context3 = "var(--".concat(kebabCase(key))).call(_context3, includeDefaultValue ? ', ' + value : '', ")")];
+    return [key, `var(--${kebabCase(key)}${includeDefaultValue ? ', ' + value : ''})`];
   }));
 }
 
@@ -549,7 +547,7 @@ const applyTheme = _ref => {
   if (!target) return;
   const validTheme = _includesInstanceProperty(allThemesNames).call(allThemesNames, newTheme || '') ? newTheme : 'default';
   if (newTheme && newTheme !== validTheme) {
-    console.warn("ThemeProvider: the specified theme '".concat(newTheme, "' is not supported."));
+    console.warn(`ThemeProvider: the specified theme '${newTheme}' is not supported.`);
   }
   const vars = transformTokensToCssVarsValues(merge({}, themes.default, themes[validTheme], isObject(themeOverrides) ? themeOverrides : {}));
   _forEachInstanceProperty(_context = _Object$entries(vars)).call(_context, _ref2 => {
@@ -615,11 +613,10 @@ const useTheme = function () {
   // If we use 'useLayoutEffect' here, we would be trying to read the
   // data attribute before it gets set from the effect in the ThemeProvider
   useEffect(() => {
-    var _parentSelectorRef$cu;
     // We need to read the current theme after the provider is rendered
     // to have the actual selected theme (calculated client-side) in the
     // hook local state
-    const nextTheme = (_parentSelectorRef$cu = parentSelectorRef.current()) === null || _parentSelectorRef$cu === void 0 ? void 0 : _parentSelectorRef$cu.dataset.theme;
+    const nextTheme = parentSelectorRef.current()?.dataset.theme;
     if (nextTheme) {
       setTheme(nextTheme);
     }
@@ -640,6 +637,6 @@ const withThemeContext = WrappedComponent => {
 };
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "19.10.0";
+var version = "19.11.0";
 
 export { ThemeProvider, designTokens$1 as customProperties, designTokens$1 as designTokens, themes, transformTokensToCssVarsReferences, transformTokensToCssVarsValues, useTheme, version, withThemeContext };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@commercetools-uikit/design-system",
   "description": "Core package of the commercetools design system.",
-  "version": "19.10.0",
+  "version": "19.12.0",
   "bugs": "https://github.com/commercetools/ui-kit/issues",
   "repository": {
     "type": "git",
@@ -25,7 +25,7 @@
   "dependencies": {
     "@babel/runtime": "^7.20.13",
     "@babel/runtime-corejs3": "^7.20.13",
-    "@commercetools-uikit/hooks": "19.10.0",
+    "@commercetools-uikit/hooks": "19.12.0",
     "@emotion/react": "^11.10.5",
     "lodash": "4.17.21",
     "prop-types": "15.8.1",

package/materials/internals/story/samplers.js

@@ -1,82 +0,0 @@
-import styled from '@emotion/styled';
-
-const BasicSample = styled.div``;
-
-const BorderRadiusSample = styled.div`
-  width: calc(${(props) => props.value} + 2 * ${(props) => props.value});
-  min-width: 20px;
-  height: calc(${(props) => props.value} + 2 * ${(props) => props.value});
-  min-height: 20px;
-  background-color: pink;
-  border-radius: ${(props) => props.value};
-  display: inline-block;
-  margin: 0 10px;
-`;
-
-const ColorSample = styled.div`
-  width: 30px;
-  height: 30px;
-  background-color: ${(props) => props.value};
-  box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, 0.1);
-  display: inline-block;
-`;
-
-const FontColorSampleStyle = styled.div`
-  color: ${(props) => props.value};
-  font-size: 24pt;
-  font-weight: bolder;
-  display: inline-block;
-`;
-const FontColorSample = (props) => (
-  <FontColorSampleStyle {...props}>Aa</FontColorSampleStyle>
-);
-
-const FontSizeSampleStyle = styled.div`
-  font-size: ${(props) => props.value};
-  font-weight: bolder;
-  display: inline-block;
-`;
-const FontSizeSample = (props) => (
-  <FontSizeSampleStyle {...props}>Aa</FontSizeSampleStyle>
-);
-
-const FontWeightSampleStyle = styled.div`
-  font-weight: ${(props) => props.value};
-  font-size: 2rem;
-  display: inline-block;
-`;
-const FontWeightSample = (props) => (
-  <FontWeightSampleStyle {...props}>Aa</FontWeightSampleStyle>
-);
-
-const ShadowSample = styled.div`
-  width: 50px;
-  height: 50px;
-  box-shadow: ${(props) => props.value};
-  display: inline-block;
-  margin: 0 10px;
-`;
-
-const SpacingSample = styled.div`
-  width: ${(props) => props.value};
-  height: ${(props) => props.value};
-  background-color: lightblue;
-  display: inline-block;
-  margin: 0 10px;
-`;
-
-const samplersMap = {
-  'background-color': ColorSample,
-  'border-color': ColorSample,
-  'border-radius': BorderRadiusSample,
-  color: ColorSample,
-  'font-color': FontColorSample,
-  'font-size': FontSizeSample,
-  'font-weight': FontWeightSample,
-  'icon-color': ColorSample,
-  shadow: ShadowSample,
-  spacing: SpacingSample,
-};
-
-export const getSampleComponent = (cssRuleName) =>
-  samplersMap[cssRuleName] || BasicSample;

package/materials/internals/story/shared-components.js

@@ -1,270 +0,0 @@
-/* eslint-disable jsx-a11y/anchor-is-valid */
-/* eslint-disable jsx-a11y/anchor-has-content */
-import styled from '@emotion/styled';
-import PropTypes from 'prop-types';
-import upperFirst from 'lodash/upperFirst';
-import deprecatedTokens from '../deprecated-tokens';
-
-const getIsDeprecated = (token) => deprecatedTokens.includes(token);
-
-const filterGroupItemsValues = (groupItems, searchText) =>
-  Object.entries(groupItems).filter(
-    ([key, value]) =>
-      key.toLowerCase().includes(searchText.toLowerCase()) ||
-      value?.toLowerCase?.().includes(searchText.toLowerCase()) ||
-      value?.description?.toLowerCase().includes(searchText.toLowerCase())
-  );
-
-const Table = styled.table`
-  border: 1px solid #ccc;
-  border-collapse: collapse;
-  & tr td {
-    border: 1px solid #ccc;
-    padding: 15px;
-    text-align: left;
-  }
-  & thead td {
-    background-color: gray;
-    color: white;
-    font-weight: bold;
-  }
-`;
-
-const GroupStyle = styled.div`
-  padding: 10px;
-  display: ${(props) => (props.isVisible ? 'block' : 'none')};
-`;
-
-export const Token = styled.p`
-  font-family: monospace;
-`;
-
-const DeprecationBadge = () => <b style={{ color: 'orange' }}>DEPRECATED</b>;
-DeprecationBadge.displayName = 'DeprecationBadge';
-
-export const TokenBodyCell = (props) => (
-  <>
-    <Token>{props.tokenName}</Token>
-    {getIsDeprecated(props.tokenName) && <DeprecationBadge />}
-  </>
-);
-TokenBodyCell.propTypes = {
-  tokenName: PropTypes.string.isRequired,
-};
-
-export const TokenGroupLinks = (props) => {
-  return (
-    <>
-      <a
-        href={`#${props.id}`}
-        onClick={(event) => {
-          event.preventDefault();
-          window.scrollTo({
-            top: document.getElementById(props.id).offsetTop,
-            behavior: 'smooth',
-          });
-        }}
-      >
-        {props.children}
-      </a>
-      {Boolean(props.config) && (
-        <ul>
-          {Object.entries(props.config).map(
-            ([key, configGroup]) =>
-              filterGroupItemsValues(
-                configGroup.choices || configGroup.decisions,
-                props.filterText
-              ).length > 0 && (
-                <li key={key}>
-                  <a
-                    href={`#${props.id}-${configGroup.prefix}`}
-                    onClick={(event) => {
-                      event.preventDefault();
-                      window.scrollTo({
-                        top: document.getElementById(
-                          `${props.id}-${configGroup.prefix}`
-                        ).offsetTop,
-                        behavior: 'smooth',
-                      });
-                    }}
-                  >
-                    {configGroup.label}
-                  </a>
-                </li>
-              )
-          )}
-        </ul>
-      )}
-    </>
-  );
-};
-TokenGroupLinks.propTypes = {
-  id: PropTypes.string.isRequired,
-  config: PropTypes.object,
-  filterText: PropTypes.string,
-  children: PropTypes.node.isRequired,
-};
-
-const TableBody = (props) => {
-  return (
-    <tbody>
-      {props.groupItems.map(([tokenName, tokenData]) => {
-        return (
-          <tr key={`${props.groupItemsPrefix}-${tokenName}-body-row-key`}>
-            {props.columnsConfig.map((columnConfig) => (
-              <td
-                key={`${props.groupItemsPrefix}-${tokenName}-${columnConfig.key}-body-cell-key`}
-              >
-                {props.cellRenderer({
-                  columnKey: columnConfig.key,
-                  groupItemsPrefix: props.groupItemsPrefix,
-                  tokenName,
-                  tokenData,
-                  themeName: props.themeName,
-                })}
-              </td>
-            ))}
-          </tr>
-        );
-      })}
-    </tbody>
-  );
-};
-TableBody.propTypes = {
-  groupItems: PropTypes.array.isRequired,
-  groupItemsPrefix: PropTypes.string,
-  themeName: PropTypes.string.isRequired,
-  columnsConfig: PropTypes.arrayOf(
-    PropTypes.shape({
-      key: PropTypes.string.isRequired,
-      label: PropTypes.string,
-    })
-  ).isRequired,
-  cellRenderer: PropTypes.func.isRequired,
-};
-
-const TokensDetailsTable = (props) => (
-  <Table>
-    <thead>
-      <tr>
-        {props.columnsConfig.map((columnsConfig, index) => (
-          <td
-            key={columnsConfig.key}
-            style={{
-              minWidth: index === 0 ? 400 : 'auto',
-            }}
-          >
-            {columnsConfig.label || upperFirst(columnsConfig.key)}
-          </td>
-        ))}
-      </tr>
-    </thead>
-    <TableBody
-      groupItems={props.tokensGroupData}
-      groupItemsPrefix={props.tokensGroupPrefix}
-      themeName={props.themeName}
-      columnsConfig={props.columnsConfig}
-      cellRenderer={props.cellRenderer}
-    />
-  </Table>
-);
-TokensDetailsTable.propTypes = {
-  columnsConfig: PropTypes.arrayOf(
-    PropTypes.shape({
-      key: PropTypes.string.isRequired,
-      label: PropTypes.string,
-    })
-  ).isRequired,
-  cellRenderer: PropTypes.func.isRequired,
-  themeName: PropTypes.string.isRequired,
-  tokensGroupPrefix: PropTypes.string,
-  tokensGroupData: PropTypes.array.isRequired,
-};
-
-export function SingleTokensGroupDetails(props) {
-  const filteredGroupItems = filterGroupItemsValues(
-    props.groupItems,
-    props.filterText
-  );
-
-  return (
-    <section>
-      <h2 id={props.id}>{props.title || upperFirst(props.id)}</h2>
-      {props.subtitle && <p>{props.subtitle}</p>}
-      <GroupStyle isVisible={filteredGroupItems.length > 0}>
-        <TokensDetailsTable
-          columnsConfig={props.columnsConfig}
-          cellRenderer={props.cellRenderer}
-          themeName={props.themeName}
-          tokensGroupPrefix=""
-          tokensGroupData={filteredGroupItems}
-        />
-      </GroupStyle>
-    </section>
-  );
-}
-SingleTokensGroupDetails.propTypes = {
-  id: PropTypes.string.isRequired,
-  title: PropTypes.string,
-  subtitle: PropTypes.string,
-  filterText: PropTypes.string.isRequired,
-  groupItems: PropTypes.object.isRequired,
-  columnsConfig: PropTypes.arrayOf(
-    PropTypes.shape({
-      key: PropTypes.string.isRequired,
-      label: PropTypes.string,
-    })
-  ).isRequired,
-  cellRenderer: PropTypes.func.isRequired,
-  themeName: PropTypes.string.isRequired,
-};
-
-export const MultiTokensGroupDetails = (props) => (
-  <section>
-    <h2 id={props.id}>{props.title || upperFirst(props.id)}</h2>
-    {props.subtitle && <p>{props.subtitle}</p>}
-    {Object.entries(props.tokensGroupData).map(
-      ([tokenGroupKey, tokenGroupConfig]) => {
-        const filteredTokensGroups = filterGroupItemsValues(
-          tokenGroupConfig[props.id],
-          props.filterText
-        );
-
-        return (
-          <GroupStyle
-            key={`tokens-group_${tokenGroupKey}`}
-            isVisible={filteredTokensGroups.length > 0}
-          >
-            <a id={`${props.id}-${tokenGroupConfig.prefix}`} />
-            <h3>{tokenGroupConfig.label}</h3>
-            {Boolean(tokenGroupConfig.description) && (
-              <p>{tokenGroupConfig.description}</p>
-            )}
-            <TokensDetailsTable
-              columnsConfig={props.columnsConfig}
-              cellRenderer={props.cellRenderer}
-              themeName={props.themeName}
-              tokensGroupPrefix={tokenGroupConfig.prefix}
-              tokensGroupData={filteredTokensGroups}
-            />
-          </GroupStyle>
-        );
-      }
-    )}
-  </section>
-);
-MultiTokensGroupDetails.propTypes = {
-  id: PropTypes.string.isRequired,
-  title: PropTypes.string,
-  subtitle: PropTypes.string,
-  filterText: PropTypes.string.isRequired,
-  tokensGroupData: PropTypes.object.isRequired,
-  columnsConfig: PropTypes.arrayOf(
-    PropTypes.shape({
-      key: PropTypes.string.isRequired,
-      label: PropTypes.string,
-    })
-  ).isRequired,
-  cellRenderer: PropTypes.func.isRequired,
-  themeName: PropTypes.string.isRequired,
-};

package/materials/internals/tokens.story.js

@@ -1,219 +0,0 @@
-/* eslint-disable default-case */
-import { useCallback, useMemo, useState } from 'react';
-import { storiesOf } from '@storybook/react';
-import styled from '@emotion/styled';
-import merge from 'lodash/merge';
-import TextInput from '@commercetools-uikit/text-input';
-import { designTokens, useTheme } from '@commercetools-uikit/design-system';
-import Readme from './TOKENS.md';
-import definition from './definition.yaml';
-import {
-  MultiTokensGroupDetails,
-  Token,
-  TokenBodyCell,
-  TokenGroupLinks,
-  SingleTokensGroupDetails,
-} from './story/shared-components';
-import { getSampleComponent } from './story/samplers';
-
-const findChoiceValue = (theme, choiceName) => {
-  return Object.values(theme)
-    .map((choiceGroup) => choiceGroup.choices)
-    .find((choices) => choices[choiceName])?.[choiceName];
-};
-
-const Background = styled.div`
-  background-color: rgba(0, 0, 0, 0.01);
-  font-family: ${designTokens.fontFamily};
-  color: ${designTokens.colorSolid}
-  margin: 10px;
-  > * + * {
-    margin: 16px 0 0 0;
-  }
-`;
-
-const DetailsGroupsContainer = styled.main`
-  display: flex;
-  flex-direction: column;
-  gap: 40px;
-`;
-
-const BasicCellRenderer = (cellData) => {
-  if (cellData.columnKey !== 'description') {
-    return <TokenBodyCell tokenName={cellData.tokenName} />;
-  } else {
-    return cellData.tokenData.description;
-  }
-};
-
-function Story() {
-  const [filterText, setFilterText] = useState('');
-  const { theme } = useTheme();
-  const currentThemeChoices = useMemo(() => {
-    return merge(
-      {},
-      definition.choiceGroupsByTheme.default,
-      definition.choiceGroupsByTheme[theme]
-    );
-  }, [theme]);
-  const currentThemeDecisions = useMemo(
-    () =>
-      merge(
-        {},
-        definition.decisionGroupsByTheme.default,
-        definition.decisionGroupsByTheme[theme]
-      ),
-    [theme]
-  );
-
-  const searchTextChangeHandler = useCallback((event) => {
-    setFilterText(event.target.value);
-  }, []);
-
-  return (
-    <Background>
-      <header>
-        <TextInput
-          value={filterText}
-          onChange={searchTextChangeHandler}
-          horizontalConstraint={13}
-        />
-        <h2>Table of Contents</h2>
-        <ul>
-          <li>
-            <TokenGroupLinks
-              id="choices"
-              config={currentThemeChoices}
-              filterText={filterText}
-            >
-              Choices
-            </TokenGroupLinks>
-          </li>
-          <li>
-            <TokenGroupLinks id="states">States</TokenGroupLinks>
-          </li>
-          <li>
-            <TokenGroupLinks id="component-groups">
-              Component Groups
-            </TokenGroupLinks>
-          </li>
-          <li>
-            <TokenGroupLinks id="variants">Variants</TokenGroupLinks>
-          </li>
-          <li>
-            <TokenGroupLinks
-              id="decisions"
-              config={currentThemeDecisions}
-              filterText={filterText}
-            >
-              Decisions
-            </TokenGroupLinks>
-          </li>
-        </ul>
-      </header>
-
-      <DetailsGroupsContainer>
-        <MultiTokensGroupDetails
-          id="choices"
-          subtitle="This is the palette of values you may chose from when creating design tokens."
-          themeName={theme}
-          filterText={filterText}
-          columnsConfig={[{ key: 'token' }, { key: 'value' }]}
-          cellRenderer={(data) => {
-            if (data.columnKey === 'token') {
-              return <Token>{data.tokenName}</Token>;
-            } else {
-              const ChoiceSample = getSampleComponent(data.groupItemsPrefix);
-              return (
-                <>
-                  <ChoiceSample value={data.tokenData} />
-                  &nbsp;{data.tokenData}
-                </>
-              );
-            }
-          }}
-          tokensGroupData={currentThemeChoices}
-        />
-
-        <SingleTokensGroupDetails
-          id="states"
-          columnsConfig={[{ key: 'state' }, { key: 'description' }]}
-          cellRenderer={BasicCellRenderer}
-          groupItems={definition.states}
-          themeName={theme}
-          filterText={filterText}
-        />
-
-        <SingleTokensGroupDetails
-          id="component-groups"
-          title="Component Groups"
-          columnsConfig={[
-            { key: 'component-group', label: 'Component Group' },
-            { key: 'description' },
-          ]}
-          cellRenderer={BasicCellRenderer}
-          groupItems={definition.componentGroups}
-          themeName={theme}
-          filterText={filterText}
-        />
-
-        <SingleTokensGroupDetails
-          id="variants"
-          columnsConfig={[{ key: 'variant' }, { key: 'description' }]}
-          cellRenderer={BasicCellRenderer}
-          groupItems={definition.variants}
-          themeName={theme}
-          filterText={filterText}
-        />
-
-        <MultiTokensGroupDetails
-          id="decisions"
-          subtitle="These are specific decisions where a choice gets applied to an element (optionally in a certain state)."
-          themeName={theme}
-          filterText={filterText}
-          columnsConfig={[
-            { key: 'token' },
-            { key: 'choice' },
-            { key: 'value' },
-          ]}
-          cellRenderer={(data) => {
-            switch (data.columnKey) {
-              case 'token':
-                return <Token>{data.tokenName}</Token>;
-              case 'choice':
-                return <Token>{data.tokenData.choice}</Token>;
-              case 'value':
-                const ChoiceSample = getSampleComponent(data.groupItemsPrefix);
-                const choiceValue = findChoiceValue(
-                  currentThemeChoices,
-                  data.tokenData.choice
-                );
-                if (choiceValue) {
-                  return (
-                    <>
-                      <ChoiceSample value={choiceValue} />
-                      &nbsp;{choiceValue}
-                    </>
-                  );
-                } else {
-                  return <Token>---</Token>;
-                }
-              default:
-                return null;
-            }
-          }}
-          tokensGroupData={currentThemeDecisions}
-        />
-      </DetailsGroupsContainer>
-    </Background>
-  );
-}
-
-storiesOf('Basics|Tokens', module)
-  .addParameters({
-    readme: {
-      // Show readme at the addons panel
-      sidebar: Readme,
-    },
-  })
-  .add('All Tokens', () => <Story />);