import { s as styleInject } from './index-bbdfb97a.js';
import 'react';
import classnames from 'classnames';
import { useTranslation } from '@crystaldesign/diva-core';
import { g as getKey } from './index-105eab2c.js';
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
import '@babel/runtime/helpers/defineProperty';
import 'react-dynamic-multi-render';
import 'mobx-react-lite';
import '@babel/runtime/helpers/asyncToGenerator';
import '@babel/runtime/helpers/slicedToArray';
import '@babel/runtime/helpers/objectWithoutProperties';
import '@babel/runtime/regenerator';
import '@babel/runtime/helpers/classCallCheck';
import '@babel/runtime/helpers/createClass';
import '@babel/runtime/helpers/toConsumableArray';
import '@crystaldesign/diva-utils';
import 'mobx';
import '@crystaldesign/web-planner-logic';
import 'qrcode.react';
import '@babel/runtime/helpers/typeof';
import 'flat';
import 'react-switch';
import 'react-countup';
import 'sift';
import './index-0d3bfd91.js';
import './index-2b5bdfe1.js';
import './index-caff71dc.js';
import './index-5cb692e9.js';
import './index.module-d6f043d2.js';
import './index-04a7a9b4.js';
import './index-755074ae.js';
import '@mui/icons-material/Block';
import '@mui/icons-material/Warning';
import './index-db439036.js';
import 'react-dropdown';
import './index-7f2e9c31.js';
import '@babel/runtime/helpers/objectDestructuringEmpty';
import './index-4b3e6bbf.js';
import './index-69271b96.js';
import './index-9a965a68.js';
import '@crystaldesign/content-box';
import './index-e9a81262.js';
import './index-2f37b9f2.js';
import './index-bea5c228.js';
import './index-014a5003.js';
import 'swiper/react';
import 'swiper/modules';
import './UnlockCard-575022e0.js';
import './index-ce21cd4d.js';
import './index-6a697eea.js';
import './index-ea5e3e90.js';
import './index-69fd5e9e.js';
import './index-079ef135.js';
import './index-4b48794b.js';
import 'react-laag';
import './index.module-25687dd9.js';
import './index-3f40a92d.js';
import './index-66fd1759.js';
import './index-8a330776.js';
import './index-4fda4c71.js';
import './index-d896efe9.js';
import './index.module-fe49e10f.js';
import './index-6051ac01.js';
import './index-ec31a7cb.js';
import './index-79fbb400.js';
import './index-2e39dac3.js';
import './index-1641324b.js';
import './index-7635bafb.js';
import './index-0e0e6ac6.js';
import './index-a1cef81d.js';
import './index-4c03ac5c.js';
import './index-10d8be2f.js';
import './index-b7364bb1.js';
import './index-a253bbbf.js';
import './index-4ca1affe.js';
import 'rc-slider';
import './index-c44088dc.js';
import './index-e4d1ba18.js';
import './index-d5bb9bda.js';
import './index-dd2aabd2.js';
import './index-eb98a8c6.js';
import 'react-confetti-explosion';
import './index-d0331808.js';
import './index-7167c5bc.js';
import './index-5a146745.js';
import 'react-qr-code';
import './index-c648d661.js';
import './useCustomDimensions-8be02680.js';
import './index-c0a41b5b.js';
import './ussIsSticky-2f6bc37b.js';
import './index-290c519e.js';
import './index-be7a52a8.js';
import './index-9c4f9dc2.js';
import './index.module-613d19d3.js';
import './index-23081351.js';
import './index-b14a4a7c.js';
import './index-fdf81349.js';
import './index-688fe1aa.js';

var container = "container-UuJhj";
var title = "title-f6urG";
var css_248z = ".container-UuJhj {\n  display: flex !important;\n  flex-wrap: wrap !important;\n  flex-direction: column !important;\n  margin-bottom: 3px !important;\n  background: rgba(242, 242, 242, 0.6) !important;\n  padding-top: 5px !important;\n}\n\n.title-f6urG {\n  padding-top: 3px;\n  text-align: center;\n  white-space: nowrap;\n  overflow: visible;\n  font-size: 12px;\n  color: #4b4b4b;\n  width: 100%;\n  overflow: visible;\n  height: 14px;\n  line-height: 14px;\n  font-weight: 600;\n  z-index: 100;\n}\n";
styleInject(css_248z);

var Group = function Group(_ref) {
  var group = _ref.group,
    PaletteComponent = _ref.PaletteComponent,
    paletteId = _ref.paletteId,
    rowCount = _ref.rowCount,
    paletteType = _ref.paletteType,
    contentInnerClassName = _ref.contentInnerClassName;
  var _useTranslation = useTranslation(),
    t = _useTranslation.t;
  var items = group.items;
  var name = group.name !== 'none' ? group.name : t('configurator.other');
  return /*#__PURE__*/jsx(Fragment, {
    children: items.map(function (item, i) {
      return /*#__PURE__*/jsxs("div", {
        className: classnames(container, contentInnerClassName),
        style: {
          width: 'calc(' + 100 / rowCount + '%' + (i === 0 ? ' - 3px' : '') + ' - 5px)',
          borderRadius: i === items.length - 1 && i === 0 ? '8px' : i === 0 ? '8px 0px 0px 8px' : i === items.length - 1 ? '0px 8px 8px 0px' : undefined,
          marginLeft: i === 0 ? 3 : undefined,
          paddingRight: '5px'
        },
        children: [/*#__PURE__*/jsx(PaletteComponent, {
          paletteId: paletteId,
          item: item,
          paletteType: paletteType,
          style: {
            '--galleryItemRowCount': '1',
            '--galleryItemRowCountSmall': '1',
            paddingTop: 'unset'
          }
        }, getKey(item)), /*#__PURE__*/jsx("span", {
          className: title,
          children: i === 0 ? name : ''
        })]
      });
    })
  });
};

export { Group as default };
