UNPKG

@greensight/gds

Version:
148 lines (143 loc) 15.5 kB
var useTheme = require('./useTheme-DeOpgGLJ.js'); var typography = require('./typography-BBxN4_mk.js'); var React = require('react'); var copyToClipboard = require('./copyToClipboard-DwvgGl08.js'); var styleInject_es = require('./style-inject.es-XZHJH68X.js'); require('react-dom'); function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } var _ref2 = process.env.NODE_ENV === "production" ? { name: "zjik7", styles: "display:flex" } : { name: "1kbax2b-Icon", styles: "display:flex;label:Icon;", map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkljb24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdEc0IiLCJmaWxlIjoiSWNvbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgdXNlUmVmIH0gZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBUb29sdGlwIH0gZnJvbSAnLi4vLi4vLi4vaGVscGVycy9jb21tb24vVG9vbHRpcCc7XG5pbXBvcnQgeyBjb3B5VG9DbGlwYm9hcmQgfSBmcm9tICcuLi8uLi8uLi9oZWxwZXJzL2NvbW1vbi9jb3B5VG9DbGlwYm9hcmQnO1xuaW1wb3J0IHsgdHlwb2dyYXBoeSB9IGZyb20gJy4uLy4uLy4uL2hlbHBlcnMvZW1vdGlvbi90eXBvZ3JhcGh5JztcbmltcG9ydCB7IFNWR1JJY29uIH0gZnJvbSAnLi4vLi4vLi4vdHlwZXMvVXRpbHMnO1xuaW1wb3J0IHsgc2NhbGUgfSBmcm9tICcuLi8uLi8uLi91dGlscy9jb21tb24vc2NhbGUnO1xuaW1wb3J0IHsgdXNlQXV0b2tpdHNUaGVtZSB9IGZyb20gJy4uLy4uLy4uL2F1dG9raXRzJztcbmltcG9ydCB7IENTU09iamVjdCB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuZXhwb3J0IGludGVyZmFjZSBJY29uUHJvcHMge1xuICAgIC8qKiBJY29uIHZhcmlhYmxlIG5hbWUuICovXG4gICAgbmFtZTogc3RyaW5nO1xuICAgIC8qKiBJY29uIGNvbXBvbmVudC4gKi9cbiAgICBDb21wb25lbnQ6IFNWR1JJY29uO1xuICAgIC8qKiBQYXRoIHRvIGljb24gZnJvbSBpY29ucyBkaXJlY3RvcnkuICovXG4gICAgcGF0aDogc3RyaW5nO1xuICAgIC8qKiBJY29uIGNzcyAqL1xuICAgIGljb25DU1M/OiBDU1NPYmplY3Q7XG59XG5cbmV4cG9ydCBjb25zdCBJY29uID0gKHsgbmFtZSwgQ29tcG9uZW50LCBwYXRoLCBpY29uQ1NTID0ge30gfTogSWNvblByb3BzKSA9PiB7XG4gICAgY29uc3QgeyBjb2xvcnMgfSA9IHVzZUF1dG9raXRzVGhlbWUoKTtcbiAgICBjb25zdCBidXR0b25SZWYgPSB1c2VSZWY8SFRNTEJ1dHRvbkVsZW1lbnQ+KG51bGwpO1xuXG4gICAgcmV0dXJuIChcbiAgICAgICAgPFRvb2x0aXAgY29udGVudD1cIlBhdGggdG8gaWNvbiBpcyBjb3BpZWQgdG8gdGhlIGNsaXBib2FyZFwiPlxuICAgICAgICAgICAgPGJ1dHRvblxuICAgICAgICAgICAgICAgIHJlZj17YnV0dG9uUmVmfVxuICAgICAgICAgICAgICAgIHR5cGU9XCJidXR0b25cIlxuICAgICAgICAgICAgICAgIGNzcz17e1xuICAgICAgICAgICAgICAgICAgICB3aWR0aDogJzEwMCUnLFxuICAgICAgICAgICAgICAgICAgICBoZWlnaHQ6ICcxMDAlJyxcbiAgICAgICAgICAgICAgICAgICAgcGFkZGluZzogc2NhbGUoMiksXG4gICAgICAgICAgICAgICAgICAgIGJvcmRlcjogYDJweCBzb2xpZCAke2NvbG9ycz8uZ3JleTcwfWAsXG4gICAgICAgICAgICAgICAgICAgIGJvcmRlclJhZGl1czogNCxcbiAgICAgICAgICAgICAgICAgICAgLi4udHlwb2dyYXBoeSgnYm9keUJvbGQnKSxcbiAgICAgICAgICAgICAgICAgICAgdGV4dEFsaWduOiAnY2VudGVyJyxcbiAgICAgICAgICAgICAgICAgICAgY29sb3I6IGNvbG9ycz8uYmxhY2ssXG4gICAgICAgICAgICAgICAgICAgIHRyYW5zaXRpb246ICdib3JkZXItY29sb3IgZWFzZSAzMDBtcycsXG4gICAgICAgICAgICAgICAgICAgICc6aG92ZXIsIDpmb2N1cy12aXNpYmxlJzoge1xuICAgICAgICAgICAgICAgICAgICAgICAgYm9yZGVyQ29sb3I6IGNvbG9ycz8uZ3JleTAsXG4gICAgICAgICAgICAgICAgICAgICAgICBvdXRsaW5lOiAnbm9uZScsXG4gICAgICAgICAgICAgICAgICAgIH0sXG4gICAgICAgICAgICAgICAgfX1cbiAgICAgICAgICAgICAgICBvbkNsaWNrPXsoKSA9PiBjb3B5VG9DbGlwYm9hcmQocGF0aCl9XG4gICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgPENvbXBvbmVudCBjc3M9e3sgLi4uaWNvbkNTUywgbWFyZ2luQm90dG9tOiBzY2FsZSgxKSB9fSAvPlxuICAgICAgICAgICAgICAgIDxzcGFuIGNzcz17eyBkaXNwbGF5OiAnZmxleCcgfX0+e25hbWV9PC9zcGFuPlxuICAgICAgICAgICAgPC9idXR0b24+XG4gICAgICAgIDwvVG9vbHRpcD5cbiAgICApO1xufTtcbiJdfQ== */", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }; var Icon = function Icon(_ref) { var name = _ref.name, Component = _ref.Component, path = _ref.path, _ref$iconCSS = _ref.iconCSS, iconCSS = _ref$iconCSS === void 0 ? {} : _ref$iconCSS; var _useAutokitsTheme = useTheme.useAutokitsTheme(), colors = _useAutokitsTheme.colors; var buttonRef = React.useRef(null); return useTheme.jsx(copyToClipboard.Tooltip, { content: "Path to icon is copied to the clipboard" }, useTheme.jsx("button", { ref: buttonRef, type: "button", css: /*#__PURE__*/useTheme.css(useTheme._objectSpread2(useTheme._objectSpread2({ width: '100%', height: '100%', padding: typography.scale(2), border: "2px solid ".concat(colors === null || colors === void 0 ? void 0 : colors.grey70), borderRadius: 4 }, typography.typography('bodyBold')), {}, { textAlign: 'center', color: colors === null || colors === void 0 ? void 0 : colors.black, transition: 'border-color ease 300ms', ':hover, :focus-visible': { borderColor: colors === null || colors === void 0 ? void 0 : colors.grey0, outline: 'none' } }), process.env.NODE_ENV === "production" ? "" : ";label:Icon;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkljb24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQThCZ0IiLCJmaWxlIjoiSWNvbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgdXNlUmVmIH0gZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBUb29sdGlwIH0gZnJvbSAnLi4vLi4vLi4vaGVscGVycy9jb21tb24vVG9vbHRpcCc7XG5pbXBvcnQgeyBjb3B5VG9DbGlwYm9hcmQgfSBmcm9tICcuLi8uLi8uLi9oZWxwZXJzL2NvbW1vbi9jb3B5VG9DbGlwYm9hcmQnO1xuaW1wb3J0IHsgdHlwb2dyYXBoeSB9IGZyb20gJy4uLy4uLy4uL2hlbHBlcnMvZW1vdGlvbi90eXBvZ3JhcGh5JztcbmltcG9ydCB7IFNWR1JJY29uIH0gZnJvbSAnLi4vLi4vLi4vdHlwZXMvVXRpbHMnO1xuaW1wb3J0IHsgc2NhbGUgfSBmcm9tICcuLi8uLi8uLi91dGlscy9jb21tb24vc2NhbGUnO1xuaW1wb3J0IHsgdXNlQXV0b2tpdHNUaGVtZSB9IGZyb20gJy4uLy4uLy4uL2F1dG9raXRzJztcbmltcG9ydCB7IENTU09iamVjdCB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuZXhwb3J0IGludGVyZmFjZSBJY29uUHJvcHMge1xuICAgIC8qKiBJY29uIHZhcmlhYmxlIG5hbWUuICovXG4gICAgbmFtZTogc3RyaW5nO1xuICAgIC8qKiBJY29uIGNvbXBvbmVudC4gKi9cbiAgICBDb21wb25lbnQ6IFNWR1JJY29uO1xuICAgIC8qKiBQYXRoIHRvIGljb24gZnJvbSBpY29ucyBkaXJlY3RvcnkuICovXG4gICAgcGF0aDogc3RyaW5nO1xuICAgIC8qKiBJY29uIGNzcyAqL1xuICAgIGljb25DU1M/OiBDU1NPYmplY3Q7XG59XG5cbmV4cG9ydCBjb25zdCBJY29uID0gKHsgbmFtZSwgQ29tcG9uZW50LCBwYXRoLCBpY29uQ1NTID0ge30gfTogSWNvblByb3BzKSA9PiB7XG4gICAgY29uc3QgeyBjb2xvcnMgfSA9IHVzZUF1dG9raXRzVGhlbWUoKTtcbiAgICBjb25zdCBidXR0b25SZWYgPSB1c2VSZWY8SFRNTEJ1dHRvbkVsZW1lbnQ+KG51bGwpO1xuXG4gICAgcmV0dXJuIChcbiAgICAgICAgPFRvb2x0aXAgY29udGVudD1cIlBhdGggdG8gaWNvbiBpcyBjb3BpZWQgdG8gdGhlIGNsaXBib2FyZFwiPlxuICAgICAgICAgICAgPGJ1dHRvblxuICAgICAgICAgICAgICAgIHJlZj17YnV0dG9uUmVmfVxuICAgICAgICAgICAgICAgIHR5cGU9XCJidXR0b25cIlxuICAgICAgICAgICAgICAgIGNzcz17e1xuICAgICAgICAgICAgICAgICAgICB3aWR0aDogJzEwMCUnLFxuICAgICAgICAgICAgICAgICAgICBoZWlnaHQ6ICcxMDAlJyxcbiAgICAgICAgICAgICAgICAgICAgcGFkZGluZzogc2NhbGUoMiksXG4gICAgICAgICAgICAgICAgICAgIGJvcmRlcjogYDJweCBzb2xpZCAke2NvbG9ycz8uZ3JleTcwfWAsXG4gICAgICAgICAgICAgICAgICAgIGJvcmRlclJhZGl1czogNCxcbiAgICAgICAgICAgICAgICAgICAgLi4udHlwb2dyYXBoeSgnYm9keUJvbGQnKSxcbiAgICAgICAgICAgICAgICAgICAgdGV4dEFsaWduOiAnY2VudGVyJyxcbiAgICAgICAgICAgICAgICAgICAgY29sb3I6IGNvbG9ycz8uYmxhY2ssXG4gICAgICAgICAgICAgICAgICAgIHRyYW5zaXRpb246ICdib3JkZXItY29sb3IgZWFzZSAzMDBtcycsXG4gICAgICAgICAgICAgICAgICAgICc6aG92ZXIsIDpmb2N1cy12aXNpYmxlJzoge1xuICAgICAgICAgICAgICAgICAgICAgICAgYm9yZGVyQ29sb3I6IGNvbG9ycz8uZ3JleTAsXG4gICAgICAgICAgICAgICAgICAgICAgICBvdXRsaW5lOiAnbm9uZScsXG4gICAgICAgICAgICAgICAgICAgIH0sXG4gICAgICAgICAgICAgICAgfX1cbiAgICAgICAgICAgICAgICBvbkNsaWNrPXsoKSA9PiBjb3B5VG9DbGlwYm9hcmQocGF0aCl9XG4gICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgPENvbXBvbmVudCBjc3M9e3sgLi4uaWNvbkNTUywgbWFyZ2luQm90dG9tOiBzY2FsZSgxKSB9fSAvPlxuICAgICAgICAgICAgICAgIDxzcGFuIGNzcz17eyBkaXNwbGF5OiAnZmxleCcgfX0+e25hbWV9PC9zcGFuPlxuICAgICAgICAgICAgPC9idXR0b24+XG4gICAgICAgIDwvVG9vbHRpcD5cbiAgICApO1xufTtcbiJdfQ== */"), onClick: function onClick() { return copyToClipboard.copyToClipboard(path); } }, useTheme.jsx(Component, { css: /*#__PURE__*/useTheme.css(useTheme._objectSpread2(useTheme._objectSpread2({}, iconCSS), {}, { marginBottom: typography.scale(1) }), process.env.NODE_ENV === "production" ? "" : ";label:Icon;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkljb24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQStDMkIiLCJmaWxlIjoiSWNvbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgdXNlUmVmIH0gZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBUb29sdGlwIH0gZnJvbSAnLi4vLi4vLi4vaGVscGVycy9jb21tb24vVG9vbHRpcCc7XG5pbXBvcnQgeyBjb3B5VG9DbGlwYm9hcmQgfSBmcm9tICcuLi8uLi8uLi9oZWxwZXJzL2NvbW1vbi9jb3B5VG9DbGlwYm9hcmQnO1xuaW1wb3J0IHsgdHlwb2dyYXBoeSB9IGZyb20gJy4uLy4uLy4uL2hlbHBlcnMvZW1vdGlvbi90eXBvZ3JhcGh5JztcbmltcG9ydCB7IFNWR1JJY29uIH0gZnJvbSAnLi4vLi4vLi4vdHlwZXMvVXRpbHMnO1xuaW1wb3J0IHsgc2NhbGUgfSBmcm9tICcuLi8uLi8uLi91dGlscy9jb21tb24vc2NhbGUnO1xuaW1wb3J0IHsgdXNlQXV0b2tpdHNUaGVtZSB9IGZyb20gJy4uLy4uLy4uL2F1dG9raXRzJztcbmltcG9ydCB7IENTU09iamVjdCB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuZXhwb3J0IGludGVyZmFjZSBJY29uUHJvcHMge1xuICAgIC8qKiBJY29uIHZhcmlhYmxlIG5hbWUuICovXG4gICAgbmFtZTogc3RyaW5nO1xuICAgIC8qKiBJY29uIGNvbXBvbmVudC4gKi9cbiAgICBDb21wb25lbnQ6IFNWR1JJY29uO1xuICAgIC8qKiBQYXRoIHRvIGljb24gZnJvbSBpY29ucyBkaXJlY3RvcnkuICovXG4gICAgcGF0aDogc3RyaW5nO1xuICAgIC8qKiBJY29uIGNzcyAqL1xuICAgIGljb25DU1M/OiBDU1NPYmplY3Q7XG59XG5cbmV4cG9ydCBjb25zdCBJY29uID0gKHsgbmFtZSwgQ29tcG9uZW50LCBwYXRoLCBpY29uQ1NTID0ge30gfTogSWNvblByb3BzKSA9PiB7XG4gICAgY29uc3QgeyBjb2xvcnMgfSA9IHVzZUF1dG9raXRzVGhlbWUoKTtcbiAgICBjb25zdCBidXR0b25SZWYgPSB1c2VSZWY8SFRNTEJ1dHRvbkVsZW1lbnQ+KG51bGwpO1xuXG4gICAgcmV0dXJuIChcbiAgICAgICAgPFRvb2x0aXAgY29udGVudD1cIlBhdGggdG8gaWNvbiBpcyBjb3BpZWQgdG8gdGhlIGNsaXBib2FyZFwiPlxuICAgICAgICAgICAgPGJ1dHRvblxuICAgICAgICAgICAgICAgIHJlZj17YnV0dG9uUmVmfVxuICAgICAgICAgICAgICAgIHR5cGU9XCJidXR0b25cIlxuICAgICAgICAgICAgICAgIGNzcz17e1xuICAgICAgICAgICAgICAgICAgICB3aWR0aDogJzEwMCUnLFxuICAgICAgICAgICAgICAgICAgICBoZWlnaHQ6ICcxMDAlJyxcbiAgICAgICAgICAgICAgICAgICAgcGFkZGluZzogc2NhbGUoMiksXG4gICAgICAgICAgICAgICAgICAgIGJvcmRlcjogYDJweCBzb2xpZCAke2NvbG9ycz8uZ3JleTcwfWAsXG4gICAgICAgICAgICAgICAgICAgIGJvcmRlclJhZGl1czogNCxcbiAgICAgICAgICAgICAgICAgICAgLi4udHlwb2dyYXBoeSgnYm9keUJvbGQnKSxcbiAgICAgICAgICAgICAgICAgICAgdGV4dEFsaWduOiAnY2VudGVyJyxcbiAgICAgICAgICAgICAgICAgICAgY29sb3I6IGNvbG9ycz8uYmxhY2ssXG4gICAgICAgICAgICAgICAgICAgIHRyYW5zaXRpb246ICdib3JkZXItY29sb3IgZWFzZSAzMDBtcycsXG4gICAgICAgICAgICAgICAgICAgICc6aG92ZXIsIDpmb2N1cy12aXNpYmxlJzoge1xuICAgICAgICAgICAgICAgICAgICAgICAgYm9yZGVyQ29sb3I6IGNvbG9ycz8uZ3JleTAsXG4gICAgICAgICAgICAgICAgICAgICAgICBvdXRsaW5lOiAnbm9uZScsXG4gICAgICAgICAgICAgICAgICAgIH0sXG4gICAgICAgICAgICAgICAgfX1cbiAgICAgICAgICAgICAgICBvbkNsaWNrPXsoKSA9PiBjb3B5VG9DbGlwYm9hcmQocGF0aCl9XG4gICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgPENvbXBvbmVudCBjc3M9e3sgLi4uaWNvbkNTUywgbWFyZ2luQm90dG9tOiBzY2FsZSgxKSB9fSAvPlxuICAgICAgICAgICAgICAgIDxzcGFuIGNzcz17eyBkaXNwbGF5OiAnZmxleCcgfX0+e25hbWV9PC9zcGFuPlxuICAgICAgICAgICAgPC9idXR0b24+XG4gICAgICAgIDwvVG9vbHRpcD5cbiAgICApO1xufTtcbiJdfQ== */") }), useTheme.jsx("span", { css: _ref2 }, name))); }; var css_248z = ".styles-module_iconsAutokit__s2ZsN {\n padding-top: 16px;\n font-family: \"PT Root UI\", sans-serif;\n font-weight: 400;\n font-size: 1rem;\n line-height: 1.4;\n}\n@media (max-width: 1440px) {\n .styles-module_iconsAutokit__s2ZsN {\n font-size: calc(0.875rem + (100vw - 48rem) / 42 * 0.125);\n }\n}\n@media (max-width: 768px) {\n .styles-module_iconsAutokit__s2ZsN {\n font-size: 0.875rem;\n }\n}\n.styles-module_iconsAutokit_layout__CV0I5 {\n display: flex;\n flex-wrap: wrap;\n gap: 16px;\n margin-bottom: 16px;\n}\n.styles-module_iconsAutokit_title__3zxnL {\n margin-bottom: 16px;\n}"; var styles = {"iconsAutokit":"styles-module_iconsAutokit__s2ZsN","iconsAutokit_layout":"styles-module_iconsAutokit_layout__CV0I5","iconsAutokit_title":"styles-module_iconsAutokit_title__3zxnL"}; styleInject_es.styleInject(css_248z); var _excluded = ["visible"]; /** * Autokit for icons assets from `@icons` directory. */ var IconsAutokit = function IconsAutokit(_ref) { var useBuilderMethods = _ref.useBuilderMethods, _ref$exceptionByPaths = _ref.exceptionByPaths, exceptionByPaths = _ref$exceptionByPaths === void 0 ? [] : _ref$exceptionByPaths, _ref$iconProperties = _ref.iconProperties, iconProperties = _ref$iconProperties === void 0 ? [] : _ref$iconProperties, propertiesForAllIcons = _ref.propertiesForAllIcons, _ref$headingLevel = _ref.headingLevel, headingLevel = _ref$headingLevel === void 0 ? 2 : _ref$headingLevel; var _useBuilderMethods = useBuilderMethods(), getIconsReq = _useBuilderMethods.getIconsReq, getIconsReqKeys = _useBuilderMethods.getIconsReqKeys, getIconComponent = _useBuilderMethods.getIconComponent; var iconsReq = getIconsReq(); var iconKeys = getIconsReqKeys(iconsReq); var icons = iconKeys.reduce(function (acc, name) { var matchRes = name.match(/\.\/(.+)\.svg$/); var fullPath = matchRes ? "".concat(matchRes === null || matchRes === void 0 ? void 0 : matchRes[0].slice(1)) : name.replace('/src', ''); var _ref2 = iconProperties.find(function (p) { return p.path === fullPath.slice(0, p.path.length); }) || { visible: true }, _ref2$visible = _ref2.visible, visible = _ref2$visible === void 0 ? true : _ref2$visible, iconProperty = useTheme._objectWithoutProperties(_ref2, _excluded); if (!visible) return acc; if (exceptionByPaths.findIndex(function (p) { return fullPath.slice(0, p.length) === p; }) !== -1) return acc; var nameParts = fullPath === null || fullPath === void 0 ? void 0 : fullPath.slice(1).split('/'); var properties = (Object.keys(iconProperty).length ? iconProperty : propertiesForAllIcons) || {}; var obj = nameParts === null || nameParts === void 0 ? void 0 : nameParts.reduceRight(function (acc, part, index) { var value = index === (nameParts === null || nameParts === void 0 ? void 0 : nameParts.length) - 1 ? useTheme._objectSpread2({ Component: getIconComponent(iconsReq, name), path: fullPath }, properties) : acc; return useTheme._defineProperty({}, part, value); }, {}); return typography.deepmerge(acc, obj || {}); }, {}); function mapIcons(icons, level) { var simpleItems = Object.entries(icons).filter(function (_ref4) { var _ref5 = useTheme._slicedToArray(_ref4, 2), value = _ref5[1]; return value.Component; }); var complexItems = Object.entries(icons).filter(function (_ref6) { var _ref7 = useTheme._slicedToArray(_ref6, 2), value = _ref7[1]; return !value.Component; }); var Heading = "h".concat(level); return useTheme.jsx(React.Fragment, null, !!simpleItems.length && useTheme.jsx("div", { className: styles.iconsAutokit_layout }, simpleItems.map(function (_ref8) { var _ref9 = useTheme._slicedToArray(_ref8, 2), name = _ref9[0], value = _ref9[1]; return useTheme.jsx("div", { key: name }, useTheme.jsx(Icon, useTheme._extends({ name: name }, value))); })), !!complexItems.length && complexItems.map(function (_ref10) { var _ref11 = useTheme._slicedToArray(_ref10, 2), name = _ref11[0], value = _ref11[1]; return useTheme.jsx(React.Fragment, { key: name }, useTheme.jsx(Heading, { className: styles.iconsAutokit_title }, name), mapIcons(value, level + 1)); })); } return useTheme.jsx("div", { className: styles.iconsAutokit }, mapIcons(icons, headingLevel)); }; exports.IconsAutokit = IconsAutokit;