@utrecht/web-component-library-stencil 1.0.0-alpha.243 → 1.0.0-alpha.246

package/dist/collection/node_modules/@storybook/components/dist/modern/blocks/ArgsTable/ArgsTable.stories.js

@@ -0,0 +1,151 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { styled } from '@storybook/theming';
+import { ArgsTable, ArgsTableError } from './ArgsTable';
+import { NoControlsWarning } from './NoControlsWarning';
+import * as ArgRow from './ArgRow.stories';
+export default {
+  component: ArgsTable,
+  title: 'Docs/ArgsTable',
+  args: {
+    updateArgs: action('updateArgs'),
+    resetArgs: action('resetArgs')
+  }
+};
+const propsSection = {
+  category: 'props '
+};
+const eventsSection = {
+  category: 'events '
+};
+const componentSubsection = {
+  subcategory: 'MyComponent '
+};
+const htmlElementSubsection = {
+  subcategory: 'HTMLElement'
+};
+const stringType = ArgRow.String.args.row;
+const numberType = ArgRow.Number.args.row;
+const longEnumType = ArgRow.LongEnum.args.row;
+
+const Template = args => /*#__PURE__*/React.createElement(ArgsTable, args);
+
+Template.displayName = "Template";
+export const Loading = Template.bind({});
+Loading.args = {
+  isLoading: true
+};
+export const Normal = Template.bind({});
+Normal.args = {
+  rows: {
+    stringType,
+    numberType
+  }
+};
+export const Compact = Template.bind({});
+Compact.args = Object.assign({}, Normal.args, {
+  compact: true
+});
+const AddonPanelLayout = styled.div(({
+  theme
+}) => ({
+  fontSize: theme.typography.size.s2 - 1,
+  background: theme.background.content
+}));
+export const InAddonPanel = Template.bind({});
+InAddonPanel.args = Object.assign({}, Normal.args, {
+  inAddonPanel: true
+});
+InAddonPanel.decorators = [storyFn => /*#__PURE__*/React.createElement(AddonPanelLayout, null, storyFn())];
+export const InAddonPanelWithWarning = args => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(NoControlsWarning, null), /*#__PURE__*/React.createElement(ArgsTable, args));
+InAddonPanelWithWarning.args = Object.assign({}, InAddonPanel.args, {
+  updateArgs: null
+});
+InAddonPanelWithWarning.decorators = InAddonPanel.decorators;
+export const Sections = Template.bind({});
+Sections.args = {
+  rows: {
+    a: Object.assign({}, stringType, {
+      table: Object.assign({}, stringType.table, propsSection)
+    }),
+    b: Object.assign({}, numberType, {
+      table: Object.assign({}, stringType.table, propsSection)
+    }),
+    c: Object.assign({}, stringType, {
+      table: Object.assign({}, stringType.table, eventsSection)
+    })
+  }
+};
+export const SectionsCompact = Template.bind({});
+SectionsCompact.args = Object.assign({}, Sections.args, {
+  compact: true
+});
+export const SectionsAndSubsections = Template.bind({});
+SectionsAndSubsections.args = {
+  rows: {
+    a: Object.assign({}, stringType, {
+      table: Object.assign({}, stringType.table, propsSection, componentSubsection)
+    }),
+    b: Object.assign({}, numberType, {
+      table: Object.assign({}, stringType.table, propsSection, componentSubsection)
+    }),
+    c: Object.assign({}, stringType, {
+      table: Object.assign({}, stringType.table, eventsSection, componentSubsection)
+    }),
+    d: Object.assign({}, stringType, {
+      table: Object.assign({}, stringType.table, eventsSection, htmlElementSubsection)
+    })
+  }
+};
+export const SubsectionsOnly = Template.bind({});
+SubsectionsOnly.args = {
+  rows: {
+    a: Object.assign({}, stringType, {
+      table: Object.assign({}, stringType.table, componentSubsection)
+    }),
+    b: Object.assign({}, numberType, {
+      table: Object.assign({}, stringType.table, componentSubsection)
+    }),
+    c: Object.assign({}, stringType, {
+      table: Object.assign({}, stringType.table, componentSubsection)
+    }),
+    d: Object.assign({}, stringType, {
+      table: Object.assign({}, stringType.table, htmlElementSubsection)
+    })
+  }
+};
+export const AllControls = Template.bind({});
+AllControls.args = {
+  rows: {
+    array: ArgRow.ArrayOf.args.row,
+    boolean: ArgRow.Boolean.args.row,
+    color: ArgRow.Color.args.row,
+    date: ArgRow.Date.args.row,
+    string: ArgRow.String.args.row,
+    number: ArgRow.Number.args.row,
+    range: ArgRow.Number.args.row,
+    radio: ArgRow.Radio.args.row,
+    inlineRadio: ArgRow.InlineRadio.args.row,
+    check: ArgRow.Check.args.row,
+    inlineCheck: ArgRow.InlineCheck.args.row,
+    select: ArgRow.Select.args.row,
+    multiSelect: ArgRow.MultiSelect.args.row,
+    object: ArgRow.ObjectOf.args.row,
+    func: ArgRow.Func.args.row
+  }
+};
+export const Error = Template.bind({});
+Error.args = {
+  error: ArgsTableError.NO_COMPONENT
+};
+export const Empty = Template.bind({});
+Empty.args = {
+  rows: {}
+};
+export const WithDefaultExpandedArgs = Template.bind({});
+WithDefaultExpandedArgs.args = {
+  rows: {
+    longEnumType
+  },
+  initialExpandedArgs: true
+};

package/dist/collection/node_modules/@storybook/components/dist/modern/blocks/ArgsTable/NoControlsWarning.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { styled } from '@storybook/theming';
+import { Link } from '../../typography/link/link';
+const NoControlsWrapper = styled.div(({
+  theme
+}) => ({
+  background: theme.background.warning,
+  color: theme.color.darkest,
+  padding: '10px 15px',
+  lineHeight: '20px',
+  boxShadow: `${theme.appBorderColor} 0 -1px 0 0 inset`
+}));
+export const NoControlsWarning = () => /*#__PURE__*/React.createElement(NoControlsWrapper, null, "This story is not configured to handle controls.", ' ', /*#__PURE__*/React.createElement(Link, {
+  href: "https://storybook.js.org/docs/react/essentials/controls",
+  target: "_blank",
+  cancel: false,
+  withArrow: true
+}, "Learn how to add controls"));
+NoControlsWarning.displayName = "NoControlsWarning";

package/dist/collection/node_modules/@storybook/components/dist/modern/blocks/ArgsTable/SectionRow.js

@@ -0,0 +1,110 @@
+import React, { useState } from 'react';
+import { transparentize } from 'polished';
+import { styled } from '@storybook/theming';
+import { Icons } from '../../icon/icon';
+const ExpanderIcon = styled(Icons)(({
+  theme
+}) => ({
+  marginRight: 8,
+  marginLeft: -10,
+  marginTop: -2,
+  // optical alignment
+  height: 12,
+  width: 12,
+  color: theme.base === 'light' ? transparentize(0.25, theme.color.defaultText) : transparentize(0.3, theme.color.defaultText),
+  border: 'none',
+  display: 'inline-block'
+}));
+const FlexWrapper = styled.span(({
+  theme
+}) => ({
+  display: 'flex',
+  lineHeight: '20px',
+  alignItems: 'center'
+}));
+const Section = styled.td(({
+  theme
+}) => ({
+  position: 'relative',
+  letterSpacing: '0.35em',
+  textTransform: 'uppercase',
+  fontWeight: theme.typography.weight.black,
+  fontSize: theme.typography.size.s1 - 1,
+  color: theme.base === 'light' ? transparentize(0.4, theme.color.defaultText) : transparentize(0.6, theme.color.defaultText),
+  background: `${theme.background.app} !important`,
+  '& ~ td': {
+    background: `${theme.background.app} !important`
+  }
+}));
+const Subsection = styled.td(({
+  theme
+}) => ({
+  position: 'relative',
+  fontWeight: theme.typography.weight.bold,
+  fontSize: theme.typography.size.s2 - 1,
+  background: theme.background.content
+}));
+const StyledTd = styled.td(({
+  theme
+}) => ({
+  position: 'relative'
+}));
+const StyledTr = styled.tr(({
+  theme
+}) => ({
+  '&:hover > td': {
+    backgroundColor: `${theme.background.hoverable} !important`,
+    boxShadow: `${theme.color.mediumlight} 0 - 1px 0 0 inset`,
+    cursor: 'row-resize'
+  }
+}));
+const ClickIntercept = styled.button(() => ({
+  // reset button style
+  background: 'none',
+  border: 'none',
+  padding: '0',
+  font: 'inherit',
+  // add custom style
+  position: 'absolute',
+  top: 0,
+  bottom: 0,
+  left: 0,
+  right: 0,
+  height: '100%',
+  width: '100%',
+  color: 'transparent',
+  cursor: 'row-resize !important'
+}));
+export const SectionRow = ({
+  level = 'section',
+  label,
+  children,
+  initialExpanded = true,
+  colSpan = 3
+}) => {
+  const [expanded, setExpanded] = useState(initialExpanded);
+  const Level = level === 'subsection' ? Subsection : Section; // @ts-ignore
+
+  const itemCount = (children === null || children === void 0 ? void 0 : children.length) || 0;
+  const caption = level === 'subsection' ? `${itemCount} item${itemCount !== 1 ? 's' : ''}` : '';
+  const icon = expanded ? 'arrowdown' : 'arrowright';
+  const helperText = `${expanded ? 'Hide' : 'Show'} ${level === 'subsection' ? itemCount : label} item${itemCount !== 1 ? 's' : ''}`;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledTr, {
+    title: helperText
+  }, /*#__PURE__*/React.createElement(Level, {
+    colSpan: 1
+  }, /*#__PURE__*/React.createElement(ClickIntercept, {
+    onClick: e => setExpanded(!expanded),
+    tabIndex: 0
+  }, helperText), /*#__PURE__*/React.createElement(FlexWrapper, null, /*#__PURE__*/React.createElement(ExpanderIcon, {
+    icon: icon
+  }), label)), /*#__PURE__*/React.createElement(StyledTd, {
+    colSpan: colSpan - 1
+  }, /*#__PURE__*/React.createElement(ClickIntercept, {
+    onClick: e => setExpanded(!expanded),
+    tabIndex: -1,
+    style: {
+      outline: 'none'
+    }
+  }, helperText), expanded ? null : caption)), expanded ? children : null);
+};

package/dist/collection/node_modules/@storybook/components/dist/modern/blocks/ArgsTable/SectionRow.stories.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { SectionRow } from './SectionRow';
+import { TableWrapper } from './ArgsTable';
+import { ResetWrapper } from '../../typography/DocumentFormatting';
+export default {
+  component: SectionRow,
+  title: 'Docs/SectionRow',
+  decorators: [getStory => /*#__PURE__*/React.createElement(ResetWrapper, null, /*#__PURE__*/React.createElement(TableWrapper, null, /*#__PURE__*/React.createElement("tbody", null, getStory())))]
+};
+
+const Template = args => /*#__PURE__*/React.createElement(SectionRow, args);
+
+Template.displayName = "Template";
+export const Section = Template.bind({});
+Section.args = {
+  level: 'section',
+  label: 'Props'
+};
+export const Subsection = Template.bind({});
+Subsection.args = {
+  level: 'subsection',
+  label: 'HTMLElement'
+};
+export const Collapsed = Template.bind({});
+Collapsed.args = Object.assign({}, Section.args, {
+  initialExpanded: false
+});
+export const Nested = () => /*#__PURE__*/React.createElement(SectionRow, Section.args, /*#__PURE__*/React.createElement(SectionRow, Subsection.args, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
+  colSpan: 2
+}, "Some content"))));
+Nested.displayName = "Nested";

package/dist/collection/node_modules/@storybook/components/dist/modern/blocks/ArgsTable/TabbedArgsTable.js

@@ -0,0 +1,34 @@
+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); }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import React from 'react';
+import { ArgsTable } from './ArgsTable';
+import { TabsState } from '../../tabs/tabs';
+export const TabbedArgsTable = (_ref) => {
+  let {
+    tabs
+  } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, ["tabs"]);
+
+  const entries = Object.entries(tabs);
+
+  if (entries.length === 1) {
+    return /*#__PURE__*/React.createElement(ArgsTable, _extends({}, entries[0][1], props));
+  }
+
+  return /*#__PURE__*/React.createElement(TabsState, null, entries.map(entry => {
+    const [label, table] = entry;
+    const id = `prop_table_div_${label}`;
+    return /*#__PURE__*/React.createElement("div", {
+      key: id,
+      id: id,
+      title: label
+    }, ({
+      active
+    }) => active ? /*#__PURE__*/React.createElement(ArgsTable, _extends({
+      key: `prop_table_${label}`
+    }, table, props)) : null);
+  }));
+};
+TabbedArgsTable.displayName = "TabbedArgsTable";

package/dist/collection/node_modules/@storybook/components/dist/modern/blocks/ArgsTable/TabbedArgsTable.stories.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { TabbedArgsTable } from './TabbedArgsTable';
+import { Normal, Compact, Sections } from './ArgsTable.stories';
+export default {
+  component: TabbedArgsTable,
+  title: 'Docs/TabbedArgsTable'
+};
+
+const Template = args => /*#__PURE__*/React.createElement(TabbedArgsTable, args);
+
+Template.displayName = "Template";
+export const Tabs = Template.bind({});
+Tabs.args = {
+  tabs: {
+    Normal: Normal.args,
+    Compact: Compact.args,
+    Sections: Sections.args
+  }
+};
+export const TabsInAddonPanel = Template.bind({});
+TabsInAddonPanel.args = {
+  tabs: {
+    Normal: Normal.args,
+    Compact: Compact.args,
+    Sections: Sections.args
+  },
+  inAddonPanel: true
+};
+export const Empty = Template.bind({});
+Empty.args = {
+  tabs: {}
+};

package/dist/collection/node_modules/@storybook/components/dist/modern/blocks/ArgsTable/index.js

@@ -0,0 +1,4 @@
+export * from './types';
+export * from './ArgsTable';
+export * from './TabbedArgsTable';
+export * from './NoControlsWarning';

package/dist/collection/node_modules/@storybook/components/dist/modern/blocks/BlockBackgroundStyles.js

@@ -0,0 +1,6 @@
+export const getBlockBackgroundStyle = theme => ({
+  borderRadius: theme.appBorderRadius,
+  background: theme.background.content,
+  boxShadow: theme.base === 'light' ? 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' : 'rgba(0, 0, 0, 0.20) 0 2px 5px 0',
+  border: `1px solid ${theme.appBorderColor}`
+});

package/dist/collection/node_modules/@storybook/components/dist/modern/blocks/ColorPalette.js

@@ -0,0 +1,175 @@
+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); }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import React from 'react';
+import { styled } from '@storybook/theming';
+import { transparentize } from 'polished';
+import { getBlockBackgroundStyle } from './BlockBackgroundStyles';
+import { ResetWrapper } from '../typography/DocumentFormatting';
+const ItemTitle = styled.div(({
+  theme
+}) => ({
+  fontWeight: theme.typography.weight.bold,
+  color: theme.color.defaultText
+}));
+const ItemSubtitle = styled.div(({
+  theme
+}) => ({
+  color: theme.base === 'light' ? transparentize(0.2, theme.color.defaultText) : transparentize(0.6, theme.color.defaultText)
+}));
+const ItemDescription = styled.div({
+  flex: '0 0 30%',
+  lineHeight: '20px',
+  marginTop: 5
+});
+const SwatchLabel = styled.div(({
+  theme
+}) => ({
+  flex: 1,
+  textAlign: 'center',
+  fontFamily: theme.typography.fonts.mono,
+  fontSize: theme.typography.size.s1,
+  lineHeight: 1,
+  overflow: 'hidden',
+  color: theme.base === 'light' ? transparentize(0.4, theme.color.defaultText) : transparentize(0.6, theme.color.defaultText),
+  '> div': {
+    display: 'inline-block',
+    overflow: 'hidden',
+    maxWidth: '100%',
+    textOverflow: 'ellipsis'
+  },
+  span: {
+    display: 'block',
+    marginTop: 2
+  }
+}));
+const SwatchLabels = styled.div({
+  display: 'flex',
+  flexDirection: 'row'
+});
+const Swatch = styled.div(({
+  background
+}) => ({
+  position: 'relative',
+  flex: 1,
+  '&::before': {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    background,
+    content: '""'
+  }
+}));
+const SwatchColors = styled.div(({
+  theme
+}) => Object.assign({}, getBlockBackgroundStyle(theme), {
+  display: 'flex',
+  flexDirection: 'row',
+  height: 50,
+  marginBottom: 5,
+  overflow: 'hidden',
+  backgroundColor: 'white',
+  backgroundImage: `repeating-linear-gradient(-45deg, #ccc, #ccc 1px, #fff 1px, #fff 16px)`,
+  backgroundClip: 'padding-box'
+}));
+const SwatchSpecimen = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+  flex: 1,
+  position: 'relative',
+  marginBottom: 30
+});
+const Swatches = styled.div({
+  flex: 1,
+  display: 'flex',
+  flexDirection: 'row'
+});
+const Item = styled.div({
+  display: 'flex',
+  alignItems: 'flex-start'
+});
+const ListName = styled.div({
+  flex: '0 0 30%'
+});
+const ListSwatches = styled.div({
+  flex: 1
+});
+const ListHeading = styled.div(({
+  theme
+}) => ({
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  paddingBottom: 20,
+  fontWeight: theme.typography.weight.bold,
+  color: theme.base === 'light' ? transparentize(0.4, theme.color.defaultText) : transparentize(0.6, theme.color.defaultText)
+}));
+const List = styled.div(({
+  theme
+}) => ({
+  fontSize: theme.typography.size.s2,
+  lineHeight: `20px`,
+  display: 'flex',
+  flexDirection: 'column'
+}));
+
+function renderSwatch(color, index) {
+  return /*#__PURE__*/React.createElement(Swatch, {
+    key: `${color}-${index}`,
+    title: color,
+    background: color
+  });
+}
+
+renderSwatch.displayName = "renderSwatch";
+
+function renderSwatchLabel(color, index, colorDescription) {
+  return /*#__PURE__*/React.createElement(SwatchLabel, {
+    key: `${color}-${index}`,
+    title: color
+  }, /*#__PURE__*/React.createElement("div", null, color, colorDescription && /*#__PURE__*/React.createElement("span", null, colorDescription)));
+}
+
+renderSwatchLabel.displayName = "renderSwatchLabel";
+
+function renderSwatchSpecimen(colors) {
+  if (Array.isArray(colors)) {
+    return /*#__PURE__*/React.createElement(SwatchSpecimen, null, /*#__PURE__*/React.createElement(SwatchColors, null, colors.map((color, index) => renderSwatch(color, index))), /*#__PURE__*/React.createElement(SwatchLabels, null, colors.map((color, index) => renderSwatchLabel(color, index))));
+  }
+
+  return /*#__PURE__*/React.createElement(SwatchSpecimen, null, /*#__PURE__*/React.createElement(SwatchColors, null, Object.values(colors).map((color, index) => renderSwatch(color, index))), /*#__PURE__*/React.createElement(SwatchLabels, null, Object.keys(colors).map((color, index) => renderSwatchLabel(color, index, colors[color]))));
+}
+
+renderSwatchSpecimen.displayName = "renderSwatchSpecimen";
+
+/**
+ * A single color row your styleguide showing title, subtitle and one or more colors, used
+ * as a child of `ColorPalette`.
+ */
+export const ColorItem = ({
+  title,
+  subtitle,
+  colors
+}) => {
+  return /*#__PURE__*/React.createElement(Item, null, /*#__PURE__*/React.createElement(ItemDescription, null, /*#__PURE__*/React.createElement(ItemTitle, null, title), /*#__PURE__*/React.createElement(ItemSubtitle, null, subtitle)), /*#__PURE__*/React.createElement(Swatches, null, renderSwatchSpecimen(colors)));
+};
+ColorItem.displayName = "ColorItem";
+
+/**
+ * Styleguide documentation for colors, including names, captions, and color swatches,
+ * all specified as `ColorItem` children of this wrapper component.
+ */
+export const ColorPalette = (_ref) => {
+  let {
+    children
+  } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, ["children"]);
+
+  return /*#__PURE__*/React.createElement(ResetWrapper, null, /*#__PURE__*/React.createElement(List, _extends({}, props, {
+    className: "docblock-colorpalette"
+  }), /*#__PURE__*/React.createElement(ListHeading, null, /*#__PURE__*/React.createElement(ListName, null, "Name"), /*#__PURE__*/React.createElement(ListSwatches, null, "Swatches")), children));
+};
+ColorPalette.displayName = "ColorPalette";

package/dist/collection/node_modules/@storybook/components/dist/modern/blocks/ColorPalette.stories.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import { ColorItem, ColorPalette } from './ColorPalette';
+export default {
+  title: 'Docs/ColorPalette',
+  component: ColorPalette
+};
+export const DefaultStyle = () => /*#__PURE__*/React.createElement(ColorPalette, null, /*#__PURE__*/React.createElement(ColorItem, {
+  title: "theme.color.greyscale",
+  subtitle: "Some of the greys",
+  colors: ['#FFFFFF', '#F8F8F8', '#F3F3F3']
+}), /*#__PURE__*/React.createElement(ColorItem, {
+  title: "theme.color.primary",
+  subtitle: "Coral",
+  colors: ['#FF4785']
+}), /*#__PURE__*/React.createElement(ColorItem, {
+  title: "theme.color.secondary",
+  subtitle: "Ocean",
+  colors: ['#1EA7FD']
+}), /*#__PURE__*/React.createElement(ColorItem, {
+  title: "theme.color.positive",
+  subtitle: "Green",
+  colors: ['rgba(102,191,60,1)', 'rgba(102,191,60,.8)', 'rgba(102,191,60,.6)', 'rgba(102,191,60,.3)']
+}), /*#__PURE__*/React.createElement(ColorItem, {
+  title: "gradient",
+  subtitle: "Grayscale",
+  colors: ['linear-gradient(to right,white,black)']
+}));
+DefaultStyle.displayName = "DefaultStyle";
+export const NamedColors = () => /*#__PURE__*/React.createElement(ColorPalette, null, /*#__PURE__*/React.createElement(ColorItem, {
+  title: "theme.color.greyscale",
+  subtitle: "Some of the greys",
+  colors: {
+    White: '#FFFFFF',
+    Alabaster: '#F8F8F8',
+    Concrete: '#F3F3F3'
+  }
+}), /*#__PURE__*/React.createElement(ColorItem, {
+  title: "theme.color.primary",
+  subtitle: "Coral",
+  colors: {
+    WildWatermelon: '#FF4785'
+  }
+}), /*#__PURE__*/React.createElement(ColorItem, {
+  title: "theme.color.secondary",
+  subtitle: "Ocean",
+  colors: {
+    DodgerBlue: '#1EA7FD'
+  }
+}), /*#__PURE__*/React.createElement(ColorItem, {
+  title: "theme.color.positive",
+  subtitle: "Green",
+  colors: {
+    Apple: 'rgba(102,191,60,1)',
+    Apple80: 'rgba(102,191,60,.8)',
+    Apple60: 'rgba(102,191,60,.6)',
+    Apple30: 'rgba(102,191,60,.3)'
+  }
+}), /*#__PURE__*/React.createElement(ColorItem, {
+  title: "gradient",
+  subtitle: "Grayscale",
+  colors: {
+    Gradient: 'linear-gradient(to right,white,black)'
+  }
+}));
+NamedColors.displayName = "NamedColors";

package/dist/collection/node_modules/@storybook/components/dist/modern/blocks/Description.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import Markdown from 'markdown-to-jsx';
+import { ResetWrapper } from '../typography/DocumentFormatting';
+import { components } from '..';
+
+/**
+ * A markdown description for a component, typically used to show the
+ * components docgen docs.
+ */
+export const Description = ({
+  markdown
+}) => /*#__PURE__*/React.createElement(ResetWrapper, null, /*#__PURE__*/React.createElement(Markdown, {
+  options: {
+    forceBlock: true,
+    overrides: components
+  }
+}, markdown));
+Description.displayName = "Description";