@kvdbil/components 3.3.5-0 → 3.3.5-5

package/cjs/components/DayPicker/index.js

@@ -0,0 +1,64 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react-day-picker/lib/style.css');
+var ReactDayPicker = require('react-day-picker');
+var styled = require('styled-components');
+var theme = require('../../theme.js');
+var components_DayPicker_DayPickerNavBar = require('./DayPickerNavBar.js');
+var components_DayPicker_localeUtils = require('./localeUtils.js');
+require('../Icons/Arrow.js');
+require('../../typography/BodyText/index.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var ReactDayPicker__default = /*#__PURE__*/_interopDefaultLegacy(ReactDayPicker);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const DayPickerWrapper = styled__default['default'].div `
+  font-family: ${({ theme }) => theme.typography.fontAlternativeFamily};
+  .DayPicker-wrapper {
+    &:focus {
+      outline: none;
+    }
+  }
+  .DayPicker-Weekday {
+    color: ${({ theme }) => theme.colors.gray.light1};
+  }
+  .DayPicker-Day {
+    font-size: 12px;
+    padding: 14px;
+    font-weight: ${({ theme }) => theme.typography.fontAlternativeBoldWeight};
+    color: ${({ theme }) => theme.colors.text.dark};
+    &:focus {
+      outline: none;
+      box-shadow: 0 0 4px ${theme['default'].colors.gray.dark3};
+    }
+    &:not(.DayPicker--interactionDisabled):not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside) {
+      &:focus {
+        box-shadow: 0 0 4px ${theme['default'].colors.gray.dark3};
+      }
+      &:hover {
+        background-color: rgba(253, 171, 74, 0.25);
+      }
+    }
+    &.DayPicker-Day--disabled {
+      color: ${theme['default'].colors.gray.dark3};
+    }
+  }
+`;
+const modifiersStyles = {
+    selected: {
+        color: theme['default'].colors.text.light,
+        background: theme['default'].colors.primary.main,
+        fontWeight: 700,
+    },
+};
+const DayPicker = ({ locale = 'sv', ...props }) => {
+    return (jsxRuntime.jsx(DayPickerWrapper, { children: jsxRuntime.jsx(ReactDayPicker__default['default'], Object.assign({}, props, { locale: locale, months: components_DayPicker_localeUtils.MONTHS[locale], weekdaysLong: components_DayPicker_localeUtils.WEEKDAYS_LONG[locale], weekdaysShort: components_DayPicker_localeUtils.WEEKDAYS_SHORT[locale], firstDayOfWeek: components_DayPicker_localeUtils.FIRST_DAY_OF_THE_WEEK[locale], navbarElement: navProps => (jsxRuntime.jsx(components_DayPicker_DayPickerNavBar['default'], Object.assign({}, navProps, { locale: locale }), void 0)), captionElement: jsxRuntime.jsx("div", {}, void 0), modifiersStyles: modifiersStyles }), void 0) }, void 0));
+};
+
+exports.DayPicker = DayPicker;
+exports['default'] = DayPicker;

package/cjs/components/DayPicker/localeUtils.js

@@ -0,0 +1,60 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const MONTHS = {
+    sv: [
+        'Januari',
+        'Februari',
+        'Mars',
+        'April',
+        'Maj',
+        'Juni',
+        'Juli',
+        'Augusti',
+        'September',
+        'Oktober',
+        'November',
+        'December',
+    ],
+    en: [
+        'January',
+        'February',
+        'March',
+        'April',
+        'May',
+        'June',
+        'July',
+        'August',
+        'September',
+        'October',
+        'November',
+        'December',
+    ],
+};
+const WEEKDAYS_LONG = {
+    sv: ['Söndag', 'Måndag', 'Tisdag', 'Onsdag', 'Torsdag', 'Fredag', 'Lördag'],
+    en: [
+        'Sunday',
+        'Monday',
+        'Tuesday',
+        'Wednesday',
+        'Thursday',
+        'Friday',
+        'Saturday',
+    ],
+};
+const WEEKDAYS_SHORT = {
+    sv: ['Sö', 'Må', 'Ti', 'On', 'To', 'Fr', 'Lö'],
+    en: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+};
+const FIRST_DAY_OF_THE_WEEK = { sv: 1, en: 1 };
+const formatMonthTitle = (d, locale = 'sv') => {
+    return `${MONTHS[locale][d.getMonth()]} ${d.getFullYear()}`;
+};
+
+exports.FIRST_DAY_OF_THE_WEEK = FIRST_DAY_OF_THE_WEEK;
+exports.MONTHS = MONTHS;
+exports.WEEKDAYS_LONG = WEEKDAYS_LONG;
+exports.WEEKDAYS_SHORT = WEEKDAYS_SHORT;
+exports.formatMonthTitle = formatMonthTitle;

package/cjs/components/Dialog/index.js

@@ -0,0 +1,60 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var styled = require('styled-components');
+var shared_mediaQueries = require('../../shared/media-queries.js');
+var components_Button_index = require('../Button/index.js');
+var components_Modal_index = require('../Modal/index.js');
+var typography_Heading_index = require('../../typography/Heading/index.js');
+require('../../theme.js');
+require('../Spinner/index.js');
+require('../../typography/ButtonText/index.js');
+require('react');
+require('react-dom');
+require('react-transition-group');
+require('../Icons/Close.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const Content = styled__default['default'].div `
+  padding-top: 1rem;
+`;
+const Header = styled__default['default'].div `
+  top: 20px;
+  left: 32px;
+  position: absolute;
+`;
+const Title = styled__default['default'](typography_Heading_index.TinyTitle) `
+  font-weight: ${({ theme }) => theme.typography.fontAlternativeRegularWeight};
+  margin: 0;
+`;
+const ButtonWrapper = styled__default['default'].div `
+  display: flex;
+  justify-content: space-between;
+  ${shared_mediaQueries.mq('tablet')} {
+    justify-content: flex-start;
+  }
+  overflow-x: hidden;
+`;
+const SecondaryActionButton = styled__default['default'](components_Button_index.Button) `
+  overflow-x: hidden;
+  margin-right: 2rem;
+  justify-content: center;
+  width: 100%;
+  max-width: 110px;
+`;
+const PrimaryActionButton = styled__default['default'](components_Button_index.Button) `
+  justify-content: center;
+  width: 100%;
+  max-width: 245px;
+`;
+const Dialog = ({ isOpen, title, children, modalStyles, titleStyles, primaryButtonText, primaryButtonStyles, secondaryButtonStyles, secondaryButtonText, primaryButtonAction, secondaryButtonAction, onClose, }) => {
+    return (jsxRuntime.jsxs(components_Modal_index.Modal, Object.assign({ contentStyles: modalStyles, isOpen: isOpen, onClose: onClose }, { children: [title && (jsxRuntime.jsx(Header, { children: jsxRuntime.jsx(Title, Object.assign({ style: titleStyles }, { children: title }), void 0) }, void 0)), jsxRuntime.jsx(Content, { children: children }, void 0), jsxRuntime.jsxs(ButtonWrapper, { children: [secondaryButtonAction && (jsxRuntime.jsx(SecondaryActionButton, Object.assign({ style: secondaryButtonStyles, onClick: secondaryButtonAction, variant: "outline", color: "neutral" }, { children: secondaryButtonText }), void 0)), primaryButtonAction && (jsxRuntime.jsx(PrimaryActionButton, Object.assign({ style: primaryButtonStyles, onClick: primaryButtonAction, variant: "solid", color: "success" }, { children: primaryButtonText }), void 0))] }, void 0)] }), void 0));
+};
+
+exports.Dialog = Dialog;
+exports['default'] = Dialog;

package/cjs/components/ErrorMessage/index.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const ErrorContainer = styled__default['default'].div `
+  font-family: ${({ theme }) => theme.typography.fontAlternativeFamily};
+  font-weight: ${({ theme }) => theme.typography.fontAlternativeRegularWeight};
+  background: ${({ theme }) => theme.colors.error.main};
+  color: white;
+  border-radius: 0.25rem;
+  font-size: 13px;
+  padding: 10px;
+  ${({ centered }) => centered && `text-align: center;`}
+`;
+const ErrorMessage = ({ children, centered, ...props }) => (jsxRuntime.jsx(ErrorContainer, Object.assign({ centered: centered }, props, { children: children }), void 0));
+
+exports.ErrorMessage = ErrorMessage;
+exports['default'] = ErrorMessage;

package/cjs/components/FieldLabel.js

@@ -0,0 +1,61 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const activePadding = '0.5rem';
+const activeStyles = (translateY) => styled.css `
+  background-color: ${props => props.theme.colors.background.light};
+  transform: scale(0.75) translateY(${translateY});
+  transform-origin: 0 0;
+  padding: 0 ${activePadding};
+  left: ${activePadding};
+`;
+const focusStyles = styled.css `
+  color: ${props => props.theme.colors.text.dark};
+`;
+const disabledStyles = styled.css `
+  color: ${props => props.theme.colors.gray.light1};
+  background-color: ${props => props.theme.colors.background.light};
+`;
+const errorStyles = styled.css `
+  color: ${props => props.theme.colors.error.main};
+`;
+const centerStyles = styled.css `
+  text-align: center;
+  width: 100%;
+  left: 0;
+`;
+// eslint-disable-next-line prettier/prettier
+const Label = styled__default['default'].div `
+  font-family: ${({ theme }) => theme.typography.fontBaseFamily};
+  pointer-events: none;
+  position: absolute;
+  z-index: 1;
+  top: ${props => (props.height ? `${props.height}rem` : '0.9rem')};
+
+  /* Left padding on input + one character size */
+  left: calc(0.75rem + 2px);
+  transition: 150ms;
+
+  /* Text styles */
+  height: 16px;
+  line-height: 16px;
+  font-size: 16px;
+
+  color: ${props => props.theme.colors.gray.dark1};
+
+  ${props => props.centered && centerStyles}
+  ${props => (props.hasValue || props.isFocused) &&
+    activeStyles(props.height ? `-${(props.height + 0.25) * 1.35}rem` : '-1.75rem')}
+  ${props => props.isFocused && focusStyles}
+  ${props => props.disabled && disabledStyles}
+  ${props => props.hasError && errorStyles}
+`;
+
+exports.Label = Label;

package/cjs/components/Header/Hamburger.js

@@ -0,0 +1,46 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var styled = require('styled-components');
+var shared_mediaQueries = require('../../shared/media-queries.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const IconWrapper = styled__default['default'].button `
+  appearance: none;
+  cursor: pointer;
+  background-color: transparent;
+  border: 0;
+  outline: none;
+  display: flex;
+  align-items: center;
+  margin-right: 1.5rem;
+  margin-left: auto;
+  ${shared_mediaQueries.mq('laptop')} {
+    display: none;
+  }
+
+  svg {
+    width: 1.5rem;
+    height: 1.5rem;
+    fill: ${({ theme }) => theme.colors.text.dark};
+  }
+  span {
+    display: none;
+    font-family: ${({ theme }) => theme.typography.fontBaseFamily};
+    font-weight: ${({ theme }) => theme.typography.fontBaseBoldWeight};
+    font-size: 1rem;
+    margin-right: 0.75rem;
+
+    ${shared_mediaQueries.mq('tablet')} {
+      display: inline;
+    }
+  }
+`;
+const Hamburger = ({ onClick = () => { }, text }) => (jsxRuntime.jsxs(IconWrapper, Object.assign({ onClick: onClick }, { children: [jsxRuntime.jsx("span", { children: text }, void 0), jsxRuntime.jsxs("svg", { children: [jsxRuntime.jsx("symbol", Object.assign({ id: "icon-hamburger", viewBox: "0 0 16 12" }, { children: jsxRuntime.jsx("path", { d: "M0 0h16v2H0zm0 5h16v2H0zm0 5h16v2H0z" }, void 0) }), void 0), jsxRuntime.jsx("use", { xlinkHref: "#icon-hamburger" }, void 0)] }, void 0)] }), void 0));
+
+exports['default'] = Hamburger;

package/cjs/components/Header/Link.js

@@ -0,0 +1,51 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var styled = require('styled-components');
+var shared_mediaQueries = require('../../shared/media-queries.js');
+var theme = require('../../theme.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const LinkItem = styled__default['default'].li `
+  font-family: ${({ theme }) => theme.typography.fontAlternativeFamily};
+  font-weight: ${({ theme }) => theme.typography.fontAlternativeRegularWeight};
+  font-size: 1rem;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  border-radius: 0.25rem;
+
+  &:last-child {
+    margin-right: 0;
+  }
+  &:nth-child(n + 4) {
+    display: none;
+  }
+
+  ${shared_mediaQueries.mq('laptop')} {
+    &:nth-child(n + 4) {
+      display: inherit;
+    }
+  }
+`;
+const CommonLink = styled__default['default'].a `
+  border-radius: 0.25rem;
+  padding: 0.75rem 1.5rem;
+  transition: 200ms;
+  color: ${theme['default'].colors.text.dark};
+  text-decoration: none;
+
+  &:hover,
+  &:active {
+    color: ${theme['default'].colors.primary.main};
+    background: ${theme['default'].colors.gray.light4};
+  }
+`;
+const Link = ({ to, component, text, ...rest }) => (jsxRuntime.jsx(LinkItem, { children: component || (jsxRuntime.jsx(CommonLink, Object.assign({ href: to }, rest, { children: text }), void 0)) }, void 0));
+
+exports['default'] = Link;

package/cjs/components/Header/index.js

@@ -0,0 +1,92 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var styled = require('styled-components');
+var shared_mediaQueries = require('../../shared/media-queries.js');
+var theme = require('../../theme.js');
+var components_Logo_index = require('../Logo/index.js');
+var components_Header_Hamburger = require('./Hamburger.js');
+var components_Header_Link = require('./Link.js');
+require('../Logo/LogoSv.js');
+require('../Logo/LogoEn.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const LogoWrapper = styled__default['default'].a `
+  cursor: pointer;
+  padding: 0 0.625rem;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: ${theme['default'].colors.background.light};
+
+  ${shared_mediaQueries.mq('tablet')} {
+    display: block;
+    width: auto;
+    padding: 0 1.5rem 0 0;
+  }
+`;
+const HeaderContainer = styled__default['default'].nav `
+  width: 100%;
+  z-index: 17;
+  position: fixed;
+  top: 0;
+  left: 0;
+  color: ${theme['default'].colors.text.dark};
+  background-color: ${theme['default'].colors.background.light};
+  transition: 300ms;
+`;
+const HeaderContent = styled__default['default'].div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  background-color: ${theme['default'].colors.background.gray};
+
+  ${shared_mediaQueries.mq('tablet')} {
+    background-color: ${theme['default'].colors.background.light};
+    flex-direction: row;
+    padding: 0em 1.5em;
+  }
+`;
+const MainContent = styled__default['default'].div `
+  display: flex;
+  width: 100%;
+`;
+const PrimaryLinks = styled__default['default'].ul `
+  display: flex;
+  justify-content: space-around;
+  width: 100%;
+  position: relative;
+  margin: 0;
+  padding: 0;
+  flex-grow: 1;
+
+  ${shared_mediaQueries.mq('tablet')} {
+    justify-content: flex-start;
+    padding: 0.5em 0;
+    display: flex;
+    padding: 0;
+    flex: 1;
+  }
+`;
+const SecondaryLinks = styled__default['default'].ul `
+  display: none;
+
+  ${shared_mediaQueries.mq('laptop')} {
+    padding: 0.5em 0;
+    display: flex;
+    padding: 0;
+  }
+`;
+const Header = ({ locale, primaryLinks, secondaryLinks, menuIconText, onMenuClick, onHeaderClick, forwardRef, css = '', ...props }) => {
+    return (jsxRuntime.jsx(HeaderContainer, Object.assign({ css: css }, props, { ref: forwardRef }, { children: jsxRuntime.jsxs(HeaderContent, { children: [jsxRuntime.jsx(LogoWrapper, Object.assign({ onClick: onHeaderClick }, { children: jsxRuntime.jsx(components_Logo_index.Logo, { locale: locale }, void 0) }), void 0), jsxRuntime.jsxs(MainContent, { children: [jsxRuntime.jsx(PrimaryLinks, { children: primaryLinks.map((link, index) => (jsxRuntime.jsx(components_Header_Link['default'], Object.assign({}, link), link.text || index))) }, void 0), jsxRuntime.jsx(components_Header_Hamburger['default'], { text: menuIconText, onClick: onMenuClick }, void 0)] }, void 0), jsxRuntime.jsx(SecondaryLinks, { children: secondaryLinks.map((link, index) => (jsxRuntime.jsx(components_Header_Link['default'], Object.assign({}, link), link.text || index))) }, void 0)] }, void 0) }), void 0));
+};
+
+exports.Header = Header;
+exports['default'] = Header;

package/cjs/components/Hero/index.js

@@ -0,0 +1,51 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var styled = require('styled-components');
+var theme = require('../../theme.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const Root = styled__default['default'].div `
+  position: relative;
+  height: 60vh;
+  max-height: 600px;
+  background-color: ${theme['default'].colors.primary.main};
+  background-size: cover;
+`;
+const Content = styled__default['default'].div `
+  position: relative;
+  display: flex;
+  padding: 50px;
+  z-index: 1;
+`;
+const Video = styled__default['default'].iframe `
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+`;
+const Image = styled__default['default'].img `
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+  background-color: ${theme['default'].colors.primary.main};
+`;
+function Hero(props) {
+    const { imageProps, containerStyle, videoProps, children } = props;
+    const imageStyle = {
+        objectPosition: `${(imageProps === null || imageProps === void 0 ? void 0 : imageProps.x) ? imageProps.x : '50%'} ${(imageProps === null || imageProps === void 0 ? void 0 : imageProps.y) ? imageProps.y : '50%'}`,
+    };
+    return (jsxRuntime.jsx(Root, Object.assign({ style: containerStyle }, { children: videoProps ? (jsxRuntime.jsx(Video, { "data-testid": "hero-video", title: "video-frame", src: videoProps.src, width: "100%", height: "100%", frameBorder: "0", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true }, void 0)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Image, { src: imageProps === null || imageProps === void 0 ? void 0 : imageProps.src, alt: "Hero background", style: imageStyle }, void 0), jsxRuntime.jsx(Content, { children: children }, void 0)] }, void 0)) }), void 0));
+}
+
+exports.Hero = Hero;
+exports['default'] = Hero;

package/cjs/components/Icon/index.js

@@ -0,0 +1,97 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var styled = require('styled-components');
+var typography_BodyText_index = require('../../typography/BodyText/index.js');
+var typography_Heading_index = require('../../typography/Heading/index.js');
+var theme = require('../../theme.js');
+var components_Snackbar_index = require('../Snackbar/index.js');
+require('../../shared/media-queries.js');
+require('../Icons/CheckCircle.js');
+require('../Icons/Close.js');
+require('../Icons/ErrorCircle.js');
+require('../Icons/InfoCircle.js');
+require('react-transition-group');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const Wrapper = styled__default['default'].div `
+  margin: 0 auto;
+  max-width: 700px;
+`;
+const Title = styled__default['default'](typography_Heading_index.Title) `
+  margin: 0.5rem;
+`;
+const IconsList = styled__default['default'].ul `
+  display: flex;
+  list-style: none;
+  flex-wrap: wrap;
+  padding: 0;
+`;
+const ListItem = styled__default['default'].li `
+  background: ${({ background }) => background};
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  width: calc(25% - 2px - 1.5rem);
+  padding: 0 0.25rem;
+  border: 1px solid ${theme['default'].colors.gray.dark5};
+  border-radius: 3px;
+  margin: 0.5rem;
+  cursor: pointer;
+`;
+const Name = styled__default['default'](typography_BodyText_index.Caption) `
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-word;
+  hyphens: auto;
+  text-align: center;
+`;
+const IconContainer = styled__default['default'].span `
+  font-size: ${({ size }) => size};
+  color: ${({ color }) => color};
+`;
+const Icons = ({ background = theme['default'].colors.background.light, color = theme['default'].colors.text.dark, icons, size = '2rem', }) => {
+    const [state, setState] = react.useState({
+        isOpen: false,
+        message: '',
+        type: 'info',
+        color: 'neutral',
+    });
+    const copyImport = async (name) => {
+        const importPath = `import { ${name} } from 'kvdbil-components';`;
+        if (!navigator.clipboard) {
+            return;
+        }
+        try {
+            await navigator.clipboard.writeText(importPath);
+            setState(s => ({
+                ...s,
+                isOpen: true,
+                message: `copied import for ${name}`,
+                type: 'success',
+                color: 'success',
+            }));
+        }
+        catch (error) {
+            setState(s => ({
+                ...s,
+                isOpen: true,
+                message: `Could not copy text: ${error}`,
+                type: 'error',
+                color: 'error',
+            }));
+        }
+    };
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Wrapper, { children: [jsxRuntime.jsx(Title, Object.assign({ as: "h2" }, { children: "Click to copy import declaration for icon" }), void 0), jsxRuntime.jsx(IconsList, { children: icons.map(([name, Icon], index) => (jsxRuntime.jsxs(ListItem, Object.assign({ background: background, onClick: () => {
+                                copyImport(name);
+                            } }, { children: [jsxRuntime.jsx(Name, { children: name }, void 0), jsxRuntime.jsx(IconContainer, Object.assign({ size: size, color: color }, { children: jsxRuntime.jsx(Icon, {}, void 0) }), void 0)] }), index))) }, void 0)] }, void 0), jsxRuntime.jsx(components_Snackbar_index.Snackbar, { message: state.message, isOpen: state.isOpen, type: state.type, color: state.color, onClose: () => setState(s => ({ ...s, isOpen: false })) }, void 0)] }, void 0));
+};
+
+exports['default'] = Icons;