@coinbase/cds-mobile 8.60.0 → 8.62.0

package/esm/system/__stories__/componentConfigStickerSheet/customComponentConfig.js

@@ -0,0 +1,116 @@
+const _excluded = ["label", "labelNode"];
+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; }
+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); }
+import { Text } from '../../../typography/Text';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const customComponentConfig = {
+  Banner: {
+    borderRadius: 0
+  },
+  Button: props => ({
+    borderRadius: 200,
+    height: props.compact ? 24 : 32,
+    font: props.compact ? 'label1' : 'headline',
+    progressCircleSize: props.compact ? 12 : 16,
+    paddingY: 0
+  }),
+  IconButton: props => {
+    var _props$compact;
+    const isCompact = (_props$compact = props.compact) != null ? _props$compact : true;
+    return _extends({
+      borderRadius: 200,
+      height: isCompact ? 24 : 32,
+      width: isCompact ? 24 : 32
+    }, props.variant === 'tertiary' ? {
+      background: 'bgAlternate',
+      color: 'fg',
+      borderColor: 'bgAlternate'
+    } : {});
+  },
+  TextInput: _ref => {
+    let {
+        label,
+        labelNode
+      } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    return {
+      labelNode: (labelNode != null ? labelNode : label) ? /*#__PURE__*/_jsx(Text, {
+        color: "fgMuted",
+        font: "label2",
+        children: label
+      }) : undefined,
+      bordered: false,
+      inputBackground: 'bgAlternate',
+      font: props.compact ? 'label2' : 'body',
+      variant: 'foregroundMuted',
+      focusedBorderWidth: 100
+    };
+  },
+  Switch: props => ({
+    background: props.checked ? 'bgPrimary' : undefined,
+    controlColor: props.checked ? 'bgAlternate' : 'fg'
+  }),
+  Tooltip: {
+    invertColorScheme: false
+  },
+  Radio: props => ({
+    background: 'bg',
+    borderWidth: props.checked ? 200 : 100,
+    borderColor: props.checked ? 'bgPrimary' : 'bgLinePrimarySubtle',
+    controlColor: 'bgPrimary',
+    dotSize: 20 / 3
+  }),
+  /**
+   * Advanced parity gap: we use 4px border radius instead of 2px border radius, could be fixed by adding borderRadius of 50
+   */
+  Checkbox: props => ({
+    borderWidth: 200,
+    controlColor: 'fg',
+    background: props.checked ? 'bgSecondary' : undefined,
+    borderColor: props.checked ? 'bgSecondary' : 'bgLinePrimarySubtle'
+  }),
+  ModalHeader: {
+    paddingX: 4,
+    paddingY: 3
+  },
+  ModalFooter: {
+    paddingX: 4,
+    paddingY: 4
+  },
+  ModalBody: {
+    paddingX: 4
+  },
+  SegmentedTabs: {
+    activeBackground: 'bgSecondary',
+    background: 'bgAlternate',
+    borderRadius: 300
+  },
+  SegmentedTab: {
+    activeColor: 'fg',
+    borderRadius: 200,
+    font: 'headline'
+  },
+  Chip: {
+    borderRadius: 200
+  },
+  Link: {
+    underline: true
+  },
+  ControlGroup: {
+    gap: 1
+  },
+  SearchInput: props => ({
+    borderRadius: 200,
+    height: props.compact ? 24 : 32
+  }),
+  Select: props => ({
+    bordered: false,
+    variant: 'foregroundMuted',
+    inputBackground: 'bgAlternate',
+    focusedBorderWidth: 100,
+    height: props.compact ? 24 : props.labelVariant === 'inside' ? 40 : 32,
+    font: props.compact ? 'label2' : 'body',
+    labelColor: 'fgMuted',
+    labelFont: props.compact ? props.align === 'end' ? 'label1' : 'label2' : 'body'
+  })
+};

package/esm/system/__stories__/componentConfigStickerSheet/customTheme.js

@@ -0,0 +1,520 @@
+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); }
+import { defaultTheme } from '@coinbase/cds-mobile/themes/defaultTheme';
+export const customThemeId = 'custom-theme';
+const lightSpectrum = {
+  blue0: '245,248,255',
+  blue5: '211,225,255',
+  blue10: '176,202,255',
+  blue15: '146,182,255',
+  blue20: '115,162,255',
+  blue30: '70,132,255',
+  blue40: '38,110,255',
+  blue50: '16,94,255',
+  blue60: '0,82,255',
+  blue70: '0,75,235',
+  blue80: '0,62,193',
+  blue90: '0,41,130',
+  blue100: '0,24,77',
+  green0: '245,255,251',
+  green5: '203,245,227',
+  green10: '171,230,206',
+  green15: '131,224,186',
+  green20: '101,214,167',
+  green30: '60,194,138',
+  green40: '34,173,115',
+  green50: '18,153,97',
+  green60: '9,133,81',
+  green70: '4,112,67',
+  green80: '2,83,50',
+  green90: '0,57,35',
+  green100: '0,31,18',
+  orange0: '255,250,245',
+  orange5: '254,232,210',
+  orange10: '253,213,176',
+  orange15: '251,194,147',
+  orange20: '249,174,118',
+  orange30: '244,140,76',
+  orange40: '237,112,47',
+  orange50: '225,89,27',
+  orange60: '207,71,14',
+  orange70: '181,54,6',
+  orange80: '145,39,2',
+  orange90: '100,26,0',
+  orange100: '51,13,0',
+  gray0: '255,255,255',
+  gray5: '247,248,249',
+  gray10: '238,240,243',
+  gray15: '222,225,231',
+  gray20: '206,210,219',
+  gray30: '177,183,195',
+  gray40: '137,144,158',
+  gray50: '113,120,134',
+  gray60: '91,97,110',
+  gray70: '70,75,85',
+  gray80: '50,53,61',
+  gray90: '30,32,37',
+  gray100: '10,11,13',
+  indigo0: '246,247,255',
+  indigo5: '230,232,255',
+  indigo10: '214,218,254',
+  indigo15: '198,204,253',
+  indigo20: '181,189,253',
+  indigo30: '148,161,251',
+  indigo40: '116,135,247',
+  indigo50: '89,111,242',
+  indigo60: '66,91,233',
+  indigo70: '47,74,215',
+  indigo80: '31,54,173',
+  indigo90: '17,32,107',
+  indigo100: '8,15,51',
+  pink0: '255,245,255',
+  pink5: '253,228,253',
+  pink10: '251,212,250',
+  pink15: '248,195,245',
+  pink20: '244,178,240',
+  pink30: '235,143,227',
+  pink40: '221,110,209',
+  pink50: '203,81,187',
+  pink60: '179,58,162',
+  pink70: '149,39,133',
+  pink80: '116,26,102',
+  pink90: '83,17,72',
+  pink100: '51,10,44',
+  purple0: '251,247,255',
+  purple5: '244,232,255',
+  purple10: '237,217,255',
+  purple15: '230,201,255',
+  purple20: '222,184,255',
+  purple30: '205,153,253',
+  purple40: '188,123,251',
+  purple50: '157,107,242',
+  purple60: '138,85,233',
+  purple70: '119,67,215',
+  purple80: '90,48,173',
+  purple90: '54,27,107',
+  purple100: '25,13,51',
+  red0: '255,245,246',
+  red5: '254,225,228',
+  red10: '253,206,210',
+  red15: '251,186,191',
+  red20: '249,166,173',
+  red30: '244,127,136',
+  red40: '237,89,102',
+  red50: '225,57,71',
+  red60: '207,32,47',
+  red70: '181,15,29',
+  red80: '145,5,16',
+  red90: '100,1,9',
+  red100: '51,0,4',
+  teal0: '240,254,255',
+  teal5: '188,246,253',
+  teal10: '136,237,251',
+  teal15: '93,226,248',
+  teal20: '51,213,244',
+  teal30: '0,188,235',
+  teal40: '0,169,221',
+  teal50: '0,147,203',
+  teal60: '0,123,179',
+  teal70: '0,97,149',
+  teal80: '0,71,116',
+  teal90: '0,47,83',
+  teal100: '0,27,51',
+  yellow0: '255,252,241',
+  yellow5: '255,244,192',
+  yellow10: '255,240,145',
+  yellow15: '255,234,100',
+  yellow20: '255,228,54',
+  yellow30: '247,210,26',
+  yellow40: '235,186,0',
+  yellow50: '207,151,0',
+  yellow60: '174,113,0',
+  yellow70: '136,76,0',
+  yellow80: '96,48,0',
+  yellow90: '58,20,0',
+  yellow100: '27,6,0',
+  chartreuse0: '245,255,250',
+  chartreuse5: '221,251,232',
+  chartreuse10: '198,247,209',
+  chartreuse15: '176,242,182',
+  chartreuse20: '159,238,155',
+  chartreuse30: '137,223,117',
+  chartreuse40: '127,208,87',
+  chartreuse50: '86,179,64',
+  chartreuse60: '53,151,48',
+  chartreuse70: '35,122,43',
+  chartreuse80: '25,93,41',
+  chartreuse90: '17,64,35',
+  chartreuse100: '7,26,17'
+};
+const darkSpectrum = {
+  blue0: '0,16,51',
+  blue5: '1,29,91',
+  blue10: '1,42,130',
+  blue15: '3,51,154',
+  blue20: '5,59,177',
+  blue30: '10,72,206',
+  blue40: '19,84,225',
+  blue50: '33,98,238',
+  blue60: '55,115,245',
+  blue70: '87,139,250',
+  blue80: '132,170,253',
+  blue90: '185,207,255',
+  blue100: '245,248,255',
+  green0: '0,31,18',
+  green5: '0,56,36',
+  green10: '1,70,42',
+  green15: '2,82,48',
+  green20: '2,92,55',
+  green30: '6,112,68',
+  green40: '11,133,82',
+  green50: '21,153,98',
+  green60: '39,173,117',
+  green70: '68,194,141',
+  green80: '111,214,171',
+  green90: '171,235,208',
+  green100: '245,255,251',
+  orange0: '51,13,0',
+  orange5: '79,20,0',
+  orange10: '107,28,1',
+  orange15: '131,36,2',
+  orange20: '155,44,4',
+  orange30: '189,59,9',
+  orange40: '213,76,18',
+  orange50: '230,96,32',
+  orange60: '240,120,54',
+  orange70: '248,150,86',
+  orange80: '252,185,131',
+  orange90: '254,219,185',
+  orange100: '255,250,245',
+  gray0: '10,11,13',
+  gray5: '20,21,25',
+  gray10: '30,32,37',
+  gray15: '40,43,49',
+  gray20: '50,53,61',
+  gray30: '70,75,85',
+  gray40: '91,97,110',
+  gray50: '114,120,134',
+  gray60: '138,145,158',
+  gray70: '165,170,182',
+  gray80: '193,198,207',
+  gray90: '224,226,231',
+  gray100: '255,255,255',
+  indigo0: '8,15,51',
+  indigo5: '14,27,91',
+  indigo10: '21,39,130',
+  indigo15: '27,47,154',
+  indigo20: '33,56,177',
+  indigo30: '48,73,206',
+  indigo40: '68,92,225',
+  indigo50: '92,113,238',
+  indigo60: '121,138,245',
+  indigo70: '153,165,250',
+  indigo80: '187,194,253',
+  indigo90: '219,223,255',
+  indigo100: '246,247,255',
+  pink0: '51,10,44',
+  pink5: '70,14,61',
+  pink10: '89,19,78',
+  pink15: '108,24,94',
+  pink20: '126,30,111',
+  pink30: '159,44,142',
+  pink40: '187,64,170',
+  pink50: '208,88,193',
+  pink60: '225,117,214',
+  pink70: '237,149,230',
+  pink80: '246,184,243',
+  pink90: '252,217,251',
+  pink100: '255,245,255',
+  purple0: '25,13,51',
+  purple5: '43,22,89',
+  purple10: '73,30,137',
+  purple15: '97,37,175',
+  purple20: '123,45,211',
+  purple30: '142,51,234',
+  purple40: '164,84,244',
+  purple50: '188,123,251',
+  purple60: '205,153,253',
+  purple70: '217,176,254',
+  purple80: '230,201,255',
+  purple90: '237,217,255',
+  purple100: '251,247,255',
+  red0: '51,0,4',
+  red5: '80,17,22',
+  red10: '107,1,10',
+  red15: '131,4,14',
+  red20: '155,7,19',
+  red30: '189,19,33',
+  red40: '213,38,52',
+  red50: '230,64,78',
+  red60: '240,97,109',
+  red70: '248,134,144',
+  red80: '252,174,181',
+  red90: '254,213,216',
+  red100: '255,245,246',
+  teal0: '0,20,38',
+  teal5: '0,32,59',
+  teal10: '0,45,79',
+  teal15: '0,58,99',
+  teal20: '0,72,118',
+  teal30: '0,99,153',
+  teal40: '0,125,182',
+  teal50: '0,149,205',
+  teal60: '0,170,223',
+  teal70: '6,190,236',
+  teal80: '69,217,245',
+  teal90: '149,239,251',
+  teal100: '240,254,255',
+  yellow0: '27,6,0',
+  yellow5: '49,17,0',
+  yellow10: '81,40,0',
+  yellow15: '96,48,0',
+  yellow20: '115,64,0',
+  yellow30: '147,96,0',
+  yellow40: '175,128,0',
+  yellow50: '199,158,0',
+  yellow60: '222,189,23',
+  yellow70: '229,205,48',
+  yellow80: '242,222,94',
+  yellow90: '255,240,145',
+  yellow100: '255,252,241',
+  chartreuse0: '5,22,14',
+  chartreuse5: '14,54,29',
+  chartreuse10: '21,79,34',
+  chartreuse15: '29,103,36',
+  chartreuse20: '45,128,40',
+  chartreuse30: '73,152,54',
+  chartreuse40: '107,176,73',
+  chartreuse50: '123,200,105',
+  chartreuse60: '140,209,136',
+  chartreuse70: '158,217,163',
+  chartreuse80: '178,222,188',
+  chartreuse90: '209,238,220',
+  chartreuse100: '245,255,250'
+};
+export const customTheme = _extends({}, defaultTheme, {
+  id: customThemeId,
+  lightSpectrum,
+  darkSpectrum,
+  lightColor: {
+    // Foreground
+    fg: "rgb(" + lightSpectrum.gray100 + ")",
+    fgMuted: "rgb(" + lightSpectrum.gray60 + ")",
+    fgInverse: "rgb(" + lightSpectrum.gray0 + ")",
+    fgPrimary: "rgb(" + lightSpectrum.gray100 + ")",
+    fgWarning: "rgb(" + lightSpectrum.orange60 + ")",
+    fgPositive: "rgb(" + lightSpectrum.green60 + ")",
+    fgNegative: "rgb(" + lightSpectrum.red60 + ")",
+    // Background
+    bg: "rgb(" + lightSpectrum.gray0 + ")",
+    bgAlternate: "rgb(" + lightSpectrum.gray5 + ")",
+    bgInverse: "rgb(" + lightSpectrum.gray100 + ")",
+    bgOverlay: "rgba(" + lightSpectrum.gray80 + ",0.33)",
+    bgPrimary: "rgb(" + lightSpectrum.gray100 + ")",
+    bgPrimaryWash: "rgb(" + lightSpectrum.gray5 + ")",
+    bgSecondary: "rgb(" + lightSpectrum.gray10 + ")",
+    bgTertiary: "rgb(" + lightSpectrum.gray20 + ")",
+    bgSecondaryWash: "rgb(" + lightSpectrum.gray15 + ")",
+    bgNegative: "rgb(" + lightSpectrum.red60 + ")",
+    bgNegativeWash: "rgb(" + lightSpectrum.red5 + ")",
+    bgPositive: "rgb(" + lightSpectrum.green60 + ")",
+    bgPositiveWash: "rgb(" + lightSpectrum.green10 + ")",
+    bgWarning: "rgb(" + lightSpectrum.orange40 + ")",
+    bgWarningWash: "rgb(" + lightSpectrum.orange0 + ")",
+    currentColor: 'currentColor',
+    // Line
+    bgLine: "rgba(" + lightSpectrum.gray60 + ",0.2)",
+    bgLineHeavy: "rgba(" + lightSpectrum.gray60 + ",0.66)",
+    bgLineInverse: "rgb(" + lightSpectrum.gray0 + ")",
+    bgLinePrimary: "rgb(" + lightSpectrum.gray100 + ")",
+    bgLinePrimarySubtle: "rgb(" + lightSpectrum.gray20 + ")",
+    // Elevation
+    bgElevation1: "rgb(" + lightSpectrum.gray0 + ")",
+    bgElevation2: "rgb(" + lightSpectrum.gray0 + ")",
+    // Accent
+    accentSubtleGreen: "rgb(" + lightSpectrum.green0 + ")",
+    accentBoldGreen: "rgb(" + lightSpectrum.green60 + ")",
+    accentSubtleBlue: "rgb(" + lightSpectrum.blue0 + ")",
+    accentBoldBlue: "rgb(" + lightSpectrum.blue60 + ")",
+    accentSubtlePurple: "rgb(" + lightSpectrum.purple0 + ")",
+    accentBoldPurple: "rgb(" + lightSpectrum.purple80 + ")",
+    accentSubtleYellow: "rgb(" + lightSpectrum.yellow0 + ")",
+    accentBoldYellow: "rgb(" + lightSpectrum.yellow30 + ")",
+    accentSubtleRed: "rgb(" + lightSpectrum.red0 + ")",
+    accentBoldRed: "rgb(" + lightSpectrum.red60 + ")",
+    accentSubtleGray: "rgb(" + lightSpectrum.gray10 + ")",
+    accentBoldGray: "rgb(" + lightSpectrum.gray80 + ")",
+    // Transparent
+    transparent: "rgba(" + lightSpectrum.gray100 + ",0)"
+  },
+  darkColor: {
+    // Foreground
+    fg: "rgb(" + darkSpectrum.gray100 + ")",
+    fgInverse: "rgb(" + darkSpectrum.gray0 + ")",
+    fgMuted: "rgb(" + darkSpectrum.gray60 + ")",
+    fgPrimary: "rgb(" + darkSpectrum.gray100 + ")",
+    fgPositive: "rgb(" + darkSpectrum.green60 + ")",
+    fgNegative: "rgb(" + darkSpectrum.red60 + ")",
+    fgWarning: "rgb(" + darkSpectrum.orange60 + ")",
+    // Background
+    bg: "rgb(" + darkSpectrum.gray0 + ")",
+    bgAlternate: "rgb(" + darkSpectrum.gray5 + ")",
+    bgInverse: "rgb(" + darkSpectrum.gray100 + ")",
+    bgOverlay: "rgba(" + darkSpectrum.gray0 + ",0.66)",
+    bgPrimary: "rgb(" + darkSpectrum.gray100 + ")",
+    bgPrimaryWash: "rgb(" + darkSpectrum.gray10 + ")",
+    bgSecondary: "rgb(" + darkSpectrum.gray15 + ")",
+    bgTertiary: "rgb(" + darkSpectrum.gray30 + ")",
+    bgSecondaryWash: "rgb(" + darkSpectrum.gray20 + ")",
+    bgNegative: "rgb(" + darkSpectrum.red60 + ")",
+    bgNegativeWash: "rgb(" + darkSpectrum.red5 + ")",
+    bgPositive: "rgb(" + darkSpectrum.green60 + ")",
+    bgPositiveWash: "rgb(" + darkSpectrum.green5 + ")",
+    bgWarning: "rgb(" + darkSpectrum.orange40 + ")",
+    bgWarningWash: "rgb(" + darkSpectrum.orange0 + ")",
+    currentColor: 'currentColor',
+    // Line
+    bgLine: "rgba(" + darkSpectrum.gray60 + ",0.2)",
+    bgLineInverse: "rgb(" + darkSpectrum.gray0 + ")",
+    bgLineHeavy: "rgba(" + darkSpectrum.gray60 + ",0.66)",
+    bgLinePrimary: "rgb(" + darkSpectrum.gray100 + ")",
+    bgLinePrimarySubtle: "rgb(" + darkSpectrum.gray20 + ")",
+    // Elevation
+    bgElevation1: "rgb(" + darkSpectrum.gray0 + ")",
+    bgElevation2: "rgb(" + darkSpectrum.gray0 + ")",
+    // Accent
+    accentSubtleGreen: "rgb(" + darkSpectrum.green0 + ")",
+    accentBoldGreen: "rgb(" + darkSpectrum.green60 + ")",
+    accentSubtleBlue: "rgb(" + darkSpectrum.blue0 + ")",
+    accentBoldBlue: "rgb(" + darkSpectrum.blue60 + ")",
+    accentSubtlePurple: "rgb(" + darkSpectrum.purple0 + ")",
+    accentBoldPurple: "rgb(" + darkSpectrum.purple80 + ")",
+    accentSubtleYellow: "rgb(" + darkSpectrum.yellow0 + ")",
+    accentBoldYellow: "rgb(" + darkSpectrum.yellow30 + ")",
+    accentSubtleRed: "rgb(" + darkSpectrum.red0 + ")",
+    accentBoldRed: "rgb(" + darkSpectrum.red60 + ")",
+    accentSubtleGray: "rgb(" + darkSpectrum.gray10 + ")",
+    accentBoldGray: "rgb(" + darkSpectrum.gray80 + ")",
+    // Transparent
+    transparent: "rgba(" + darkSpectrum.gray100 + ",0)"
+  },
+  space: {
+    '0': 0,
+    '0.25': 1,
+    '0.5': 2,
+    '0.75': 3,
+    '1': 4,
+    '1.5': 6,
+    '2': 8,
+    '3': 12,
+    '4': 16,
+    '5': 20,
+    '6': 24,
+    '7': 28,
+    '8': 32,
+    '9': 36,
+    '10': 40
+  },
+  iconSize: {
+    xs: 8,
+    s: 12,
+    m: 16,
+    l: 20
+  },
+  avatarSize: {
+    s: 12,
+    m: 16,
+    l: 20,
+    xl: 32,
+    xxl: 36,
+    xxxl: 48
+  },
+  controlSize: {
+    checkboxSize: 16,
+    radioSize: 16,
+    switchWidth: 42,
+    switchHeight: 24,
+    switchThumbSize: 22,
+    tileSize: 64
+  },
+  borderRadius: {
+    '0': 0,
+    '100': 4,
+    '200': 6,
+    '300': 8,
+    '400': 12,
+    '500': 16,
+    '600': 24,
+    '700': 32,
+    '800': 40,
+    '900': 48,
+    '1000': 100000
+  },
+  borderWidth: {
+    '0': 0,
+    '100': 1,
+    '200': 2,
+    '300': 4,
+    '400': 6,
+    '500': 8
+  },
+  fontFamily: {
+    display1: 'var(--defaultFont-sans)',
+    display2: 'var(--defaultFont-sans)',
+    display3: 'var(--defaultFont-sans)',
+    title1: 'var(--defaultFont-sans)',
+    title2: 'var(--defaultFont-sans)',
+    title3: 'var(--defaultFont-sans)',
+    title4: 'var(--defaultFont-sans)',
+    headline: 'var(--defaultFont-sans)',
+    body: 'var(--defaultFont-sans)',
+    label1: 'var(--defaultFont-sans)',
+    label2: 'var(--defaultFont-sans)',
+    caption: 'var(--defaultFont-sans)',
+    legal: 'var(--defaultFont-sans)'
+  },
+  fontSize: {
+    display1: 49,
+    display2: 35,
+    display3: 31,
+    title1: 20,
+    title2: 20,
+    title3: 14,
+    title4: 14,
+    headline: 12,
+    body: 12,
+    label1: 10,
+    label2: 10,
+    caption: 9,
+    legal: 9
+  },
+  fontWeight: {
+    display1: '400',
+    display2: '400',
+    display3: '400',
+    title1: '600',
+    title2: '400',
+    title3: '600',
+    title4: '400',
+    headline: '600',
+    body: '400',
+    label1: '600',
+    label2: '400',
+    caption: '600',
+    legal: '400'
+  },
+  lineHeight: {
+    display1: 56,
+    display2: 40,
+    display3: 36,
+    title1: 24,
+    title2: 24,
+    title3: 20,
+    title4: 20,
+    headline: 16,
+    body: 16,
+    label1: 12,
+    label2: 16,
+    caption: 12,
+    legal: 12
+  }
+});

package/esm/system/__stories__/componentConfigStickerSheet/examples/Accordion.js

@@ -0,0 +1,67 @@
+import React, { memo } from 'react';
+import { Accordion } from '../../../../accordion/Accordion';
+import { AccordionItem } from '../../../../accordion/AccordionItem';
+import { Icon } from '../../../../icons/Icon';
+import { VStack } from '../../../../layout/VStack';
+import { Text } from '../../../../typography/Text';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const AccordionExample = /*#__PURE__*/memo(() => {
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 1,
+    children: [/*#__PURE__*/_jsxs(Accordion, {
+      defaultActiveKey: "1",
+      onChange: () => undefined,
+      children: [/*#__PURE__*/_jsx(AccordionItem, {
+        itemKey: "1",
+        media: /*#__PURE__*/_jsx(Icon, {
+          name: "wallet",
+          size: "m"
+        }),
+        subtitle: "Subtitle 1",
+        title: "Accordion #1",
+        children: /*#__PURE__*/_jsx(Text, {
+          font: "body",
+          children: "Accordion content one."
+        })
+      }), /*#__PURE__*/_jsx(AccordionItem, {
+        itemKey: "2",
+        media: /*#__PURE__*/_jsx(Icon, {
+          name: "wallet",
+          size: "m"
+        }),
+        subtitle: "Subtitle 2",
+        title: "Accordion #2",
+        children: /*#__PURE__*/_jsx(Text, {
+          font: "body",
+          children: "Accordion content two."
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(Accordion, {
+      onChange: () => undefined,
+      children: [/*#__PURE__*/_jsx(AccordionItem, {
+        itemKey: "3",
+        media: /*#__PURE__*/_jsx(Icon, {
+          name: "info",
+          size: "m"
+        }),
+        subtitle: "Alternative",
+        title: "Accordion #3",
+        children: /*#__PURE__*/_jsx(Text, {
+          font: "body",
+          children: "Second example with icon media."
+        })
+      }), /*#__PURE__*/_jsx(AccordionItem, {
+        itemKey: "4",
+        media: /*#__PURE__*/_jsx(Icon, {
+          name: "info",
+          size: "m"
+        }),
+        title: "Accordion #4",
+        children: /*#__PURE__*/_jsx(Text, {
+          font: "body",
+          children: "Title only second row."
+        })
+      })]
+    })]
+  });
+});