@websolutespa/bom-mixer-ui 1.2.0 → 1.2.2

package/dist/esm/theme/styles/reset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"reset.js","sources":["../../../../src/theme/styles/reset.ts"],"sourcesContent":["import { css } from 'styled-components';\nexport const CssReset = css `\r\n/*\r\n*,\r\n*::before,\r\n*::after {\r\n  margin: 0;\r\n  padding: 0;\r\n  box-sizing: border-box;\r\n}\r\n\r\n:where([hidden]:not([hidden='until-found'])) {\r\n  display: none !important;\r\n}\r\n\r\n:where(html) {\r\n  -webkit-text-size-adjust: none;\r\n  color-scheme: dark light;\r\n}\r\n\r\n@supports not (min-block-size: 100dvb) {\r\n  :where(html) {\r\n    block-size: 100%;\r\n  }\r\n}\r\n\r\n@media (prefers-reduced-motion: no-preference) {\r\n  :where(html:focus-within) {\r\n    scroll-behavior: smooth;\r\n  }\r\n}\r\n\r\n:where(body) {\r\n  block-size: 100%;\r\n  block-size: 100dvb;\r\n  line-height: 1.5;\r\n  font-family: system-ui, sans-serif;\r\n  -webkit-font-smoothing: antialiased;\r\n}\r\n\r\n:where(input, button, textarea, select) {\r\n  font: inherit;\r\n  color: inherit;\r\n}\r\n\r\n:where(textarea) {\r\n  resize: vertical;\r\n  resize: block;\r\n}\r\n\r\n:where(button, label, select, summary, [role='button'], [role='option']) {\r\n  cursor: pointer;\r\n}\r\n\r\n:where(:disabled) {\r\n  cursor: not-allowed;\r\n}\r\n\r\n:where(\r\n  label:has(> input:disabled),\r\n  label:has(+ input:disabled)) {\r\n  cursor: not-allowed;\r\n}\r\n\r\n:where(button) {\r\n  border-style: solid;\r\n}\r\n\r\n:where(a) {\r\n  text-underline-offset: 0.2ex;\r\n}\r\n\r\n:where(ul, ol) {\r\n  list-style: none;\r\n}\r\n\r\n:where(img, svg, video, canvas, audio, iframe, embed, object) {\r\n  display: block;\r\n}\r\n\r\n:where(img, picture, svg) {\r\n  max-inline-size: 100%;\r\n  block-size: auto;\r\n}\r\n\r\n:where(p, h1, h2, h3, h4, h5, h6) {\r\n  overflow-wrap: break-word;\r\n}\r\n\r\n:where(h1, h2, h3) {\r\n  line-height: calc(1em + 0.5rem);\r\n}\r\n\r\n:where(hr) {\r\n  border: none;\r\n  border-block-start: 1px solid;\r\n  color: inherit;\r\n  block-size: 0;\r\n  overflow: visible;\r\n}\r\n\r\n:where(:focus-visible) {\r\n  outline: 2px solid var(--focus-color, Highlight);\r\n  outline-offset: 2px;\r\n}\r\n\r\n:where(.visually-hidden:not(:focus, :active, :focus-within, .not-visually-hidden)) {\r\n  clip-path: inset(50%) !important;\r\n  height: 1px !important;\r\n  width: 1px !important;\r\n  overflow: hidden !important;\r\n  position: absolute !important;\r\n  white-space: nowrap !important;\r\n  border: 0 !important;\r\n}\r\n*/\r\n\r\nhtml,\r\nbody,\r\np,\r\nol,\r\nul,\r\nli,\r\ndl,\r\ndt,\r\ndd,\r\nblockquote,\r\nfigure,\r\nfieldset,\r\nlegend,\r\ntextarea,\r\npre,\r\niframe,\r\nhr,\r\nh1,\r\nh2,\r\nh3,\r\nh4,\r\nh5,\r\nh6 {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\nh1,\r\nh2,\r\nh3,\r\nh4,\r\nh5,\r\nh6 {\r\n  font-size: 100%;\r\n  font-weight: normal;\r\n}\r\n\r\nul {\r\n  list-style: none;\r\n}\r\n\r\nbutton,\r\ninput,\r\nselect {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\nbutton {\r\n  border: none;\r\n  text-decoration: none;\r\n  background: none;\r\n  appearance: none;\r\n  font-family: inherit;\r\n  font-style: inherit;\r\n  font-variant-ligatures: inherit;\r\n  font-variant-caps: inherit;\r\n  font-variant-numeric: inherit;\r\n  font-variant-east-asian: inherit;\r\n  font-weight: inherit;\r\n  font-stretch: inherit;\r\n  text-rendering: inherit;\r\n  letter-spacing: inherit;\r\n  word-spacing: inherit;\r\n  line-height: inherit;\r\n  text-transform: none;\r\n  text-indent: inherit;\r\n  text-shadow: none;\r\n  text-align: inherit;\r\n}\r\n\r\nhtml {\r\n  box-sizing: border-box;\r\n  -webkit-text-size-adjust: none;\r\n  color-scheme: dark light;\r\n}\r\n\r\n*, *::before, *::after {\r\n  box-sizing: inherit;\r\n}\r\n\r\nimg,\r\nvideo {\r\n  height: auto;\r\n  max-width: 100%;\r\n}\r\n\r\niframe {\r\n  border: 0;\r\n}\r\n\r\ntable {\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\ntd,\r\nth {\r\n  padding: 0;\r\n}\r\n\r\n//\r\n\r\nhtml,\r\nbody {\r\n  margin: 0;\r\n  padding: 0;\r\n  block-size: 100%;\r\n  block-size: 100dvb;\r\n  font-size: 20px;\r\n  line-height: 1.5;\r\n  font-family: system-ui, sans-serif;\r\n  -webkit-font-smoothing: antialiased;\r\n}\r\n\r\na {\r\n  color: inherit;\r\n  text-decoration: none;\r\n}\r\n`;\n//# sourceMappingURL=reset.js.map"],"names":["CssReset","css"],"mappings":";;AACO,MAAMA,QAAQ,GAAGC,GAAK,CAAA;AAC7B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;"}

package/dist/esm/theme/styles/{mixins/_scrollbar.js → scrollbar.js}

@@ -54,4 +54,4 @@ const CssScrollbar = css`
 `;
 
 export { CssScrollbar };
-//# sourceMappingURL=_scrollbar.js.map
+//# sourceMappingURL=scrollbar.js.map

package/dist/esm/theme/styles/scrollbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrollbar.js","sources":["../../../../src/theme/styles/scrollbar.ts"],"sourcesContent":["import { css } from 'styled-components';\nexport const CssScrollbar = css `\r\n  &::-webkit-scrollbar {\r\n    width: 8px;\r\n    height: 8px;\r\n    border-radius: 0;\r\n  }\r\n\r\n  &::-webkit-scrollbar-button {\r\n    display: none;\r\n  }\r\n\r\n  &::-webkit-scrollbar-button:hover {\r\n    display: none;\r\n  }\r\n\r\n  &::-webkit-scrollbar-thumb {\r\n    background-color: var(--color-neutral-400);\r\n    box-shadow: none;\r\n    border-radius: 4px;\r\n\r\n    &:hover {\r\n      background-color: var(--color-neutral-600);\r\n    }\r\n  }\r\n\r\n  &::-webkit-scrollbar-track {\r\n    background-color: var(--color-neutral-100);\r\n    border-radius: 0;\r\n\r\n    &:hover {\r\n      background-color: var(--color-neutral-100);\r\n    }\r\n  }\r\n\r\n  .negative * {\r\n    &::-webkit-scrollbar-thumb {\r\n      background-color: var(--color-neutral-600);\r\n\r\n      &:hover {\r\n        background-color: var(--color-neutral-400);\r\n      }\r\n    }\r\n\r\n    &::-webkit-scrollbar-track {\r\n      background-color: var(--color-neutral-800);\r\n\r\n      &:hover {\r\n        background-color: var(--color-neutral-800);\r\n      }\r\n    }\r\n  }\r\n`;\n//# sourceMappingURL=scrollbar.js.map"],"names":["CssScrollbar","css"],"mappings":";;AACO,MAAMA,YAAY,GAAGC,GAAK,CAAA;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;"}

package/dist/esm/theme/styles/swiper.js

@@ -0,0 +1,23 @@
+import { css } from 'styled-components';
+import swiperCss from '!!raw-loader!swiper/css';
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+// import swiperNavigation from '!!raw-loader!swiper/css/navigation';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+// import swiperPagination from '!!raw-loader!swiper/css/pagination';
+const CssSwiper = css`
+  ${swiperCss}
+  /*
+  // !!! todo hide image before initialization
+  .swiper:not(.swiper-initialized) {
+    .swiper-slide > * {
+      display: none;
+    }
+  }
+  */
+`;
+
+export { CssSwiper };
+//# sourceMappingURL=swiper.js.map

package/dist/esm/theme/styles/swiper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"swiper.js","sources":["../../../../src/theme/styles/swiper.ts"],"sourcesContent":["import { css } from 'styled-components';\n// Import Swiper styles\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nimport swiperCss from '!!raw-loader!swiper/css';\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\n// import swiperNavigation from '!!raw-loader!swiper/css/navigation';\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\n// import swiperPagination from '!!raw-loader!swiper/css/pagination';\nexport const CssSwiper = css `\r\n  ${swiperCss}\r\n  /*\r\n  // !!! todo hide image before initialization\r\n  .swiper:not(.swiper-initialized) {\r\n    .swiper-slide > * {\r\n      display: none;\r\n    }\r\n  }\r\n  */\r\n`;\n//# sourceMappingURL=swiper.js.map"],"names":["CssSwiper","css","swiperCss"],"mappings":";;;AAKA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,SAAS,GAAGC,GAAK,CAAA;AAC9B,EAAA,EAAIC,SAAU,CAAA;AACd;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;"}

package/dist/esm/theme/styles/{_typography.js → typography.js}

@@ -27,4 +27,4 @@ body {
 `;
 
 export { CssTypography };
-//# sourceMappingURL=_typography.js.map
+//# sourceMappingURL=typography.js.map

package/dist/esm/theme/styles/typography.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.js","sources":["../../../../src/theme/styles/typography.ts"],"sourcesContent":["import { css } from 'styled-components';\nimport { eachMedia } from '../../components/utils';\nexport const CssTypography = css `\r\nhtml,\r\nbody {\r\n  font-family: var(--font-base-family, sans-serif);\r\n  line-height: var(--font-base-line-height, 1.5);\r\n  font-weight: var(--font-base-weight, normal);\r\n  font-size: var(--font-base-size, 16px);\r\n  ${props => typeof props.theme.fontBase.size === 'object' && eachMedia(props, (key) => `font-size: var(--font-base-size-${key});`)}\r\n}\r\n\r\nbody {\r\n  background: var(--color-neutral-100);\r\n  color: var(--color-neutral-700);\r\n}\r\n\r\n/*\r\n* {\r\n  outline-offset: 0.2rem;\r\n  &:focus-visible {\r\n    outline: 2px solid var(--color-primary-200);\r\n  }\r\n}\r\n*/\r\n`;\n//# sourceMappingURL=typography.js.map"],"names":["CssTypography","css","props","theme","fontBase","size","eachMedia","key"],"mappings":";;;AAEO,MAAMA,aAAa,GAAGC,GAAK,CAAA;AAClC;AACA;AACA;AACA;AACA;AACA;AACA,EAAIC,EAAAA,KAAK,IAAI,OAAOA,KAAK,CAACC,KAAK,CAACC,QAAQ,CAACC,IAAI,KAAK,QAAQ,IAAIC,SAAS,CAACJ,KAAK,EAAGK,GAAG,IAAM,CAAA,gCAAA,EAAkCA,GAAI,CAAA,EAAA,CAAG,CAAE,CAAA;AACpI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;"}

package/dist/types/components/index.d.ts

@@ -15,6 +15,7 @@ export * from './code/code';
 export * from './container/container';
 export * from './divider/divider';
 export * from './drawer/drawer';
+export * from './drawer/helper';
 export * from './dropdown/dropdown';
 export * from './ellipsis/ellipsis';
 export * from './expand/expand';

package/dist/types/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,yBAAyB,CAAC;AACxC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,yBAAyB,CAAC;AACxC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iBAAiB,CAAC;AAChC,cAAc,0BAA0B,CAAC;AACzC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mCAAmC,CAAC;AAClD,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,WAAW,CAAC;AAC1B,cAAc,qBAAqB,CAAC;AACpC,cAAc,aAAa,CAAC;AAC5B,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,yBAAyB,CAAC;AACxC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,yBAAyB,CAAC;AACxC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iBAAiB,CAAC;AAChC,cAAc,0BAA0B,CAAC;AACzC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mCAAmC,CAAC;AAClD,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,WAAW,CAAC;AAC1B,cAAc,qBAAqB,CAAC;AACpC,cAAc,aAAa,CAAC;AAC5B,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}

package/dist/types/components/media/media-image.d.ts

@@ -1,4 +1,9 @@
 import { UIStyledComponentProps } from '../../components/types';
+export declare enum ImageStrategy {
+    None = "none",
+    Next = "next",
+    Custom = "custom"
+}
 export type Props = {
     src: string;
     alt?: string;

package/dist/types/components/media/media-image.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"media-image.d.ts","sourceRoot":"","sources":["../../../../src/components/media/media-image.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAEhE,MAAM,MAAM,KAAK,GAAG;IAClB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,sBAAsB,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;AAQnE,eAAO,MAAM,UAAU,uCAA6C,eAAe,4CAIlF,CAAC"}
+{"version":3,"file":"media-image.d.ts","sourceRoot":"","sources":["../../../../src/components/media/media-image.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAEhE,oBAAY,aAAa;IACvB,IAAI,SAAS;IACb,IAAI,SAAS;IACb,MAAM,WAAW;CAClB;AAcD,MAAM,MAAM,KAAK,GAAG;IAClB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,sBAAsB,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;AAQnE,eAAO,MAAM,UAAU,uCAA6C,eAAe,4CAIlF,CAAC"}

package/dist/types/components/utils.d.ts

@@ -18,6 +18,4 @@ export declare function isChildElement(parent: Element | null | undefined, child
 export declare function mapChildsByType(children: ReactNode | undefined, type: React.ElementType, mapMethod: (child: ReactNode) => ReactNode): ReactNode;
 export declare function getChildsByType(children: ReactNode | undefined, type: React.ElementType): [ReactNode | undefined, ReactNode | undefined];
 export declare function hasChildOfType(children: ReactNode | undefined, type: React.ElementType): boolean;
-export declare function hypenize(text: string): string;
-export declare function camelize(text: string): string;
 //# sourceMappingURL=utils.d.ts.map

package/dist/types/components/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/utils.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,OAAO,EAAO,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAU,kBAAkB,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,eAAO,MAAM,UAAU,yCAA2D,CAAC;AAEnF,wBAAgB,SAAS,CAAC,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,UAWpF;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,OAAO,KAAK,CAAC,KAAK,CAAC,UAAU,GAAG,aAAa,CAAC,OAAO,CAAC,GAAG,SAAS,CAExH;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,OAAO,KAAK,CAAC,KAAK,CAAC,UAAU,GAAG,aAAa,CAAC,OAAO,CAAC,GAAG,SAAS,CAKxH;AAED,wBAAgB,OAAO,CAAC,KAAK,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,OAAO,KAAK,CAAC,KAAK,CAAC,UAAU,EAAE,IAAI,EAAE,OAAO,CAAC,MAAM,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,CAK3H;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,OAAO,KAAK,CAAC,KAAK,CAAC,UAAU,EAAE,IAAI,EAAE,OAAO,CAAC,MAAM,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,CAK7H;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,OAAO,KAAK,CAAC,KAAK,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,OAAO,KAAK,CAAC,KAAK,CAAC,UAAU,EAAE,IAAI,EAAE,OAAO,CAAC,MAAM,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,CAgBhL;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,OAAO,KAAK,CAAC,KAAK,CAAC,UAAU,EAAE,IAAI,EAAE,OAAO,CAAC,MAAM,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,CAE7H;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,kBAAkB,GAAG,UAAU,EAAE,YAAY,GAAE,kBAAuB,UA2B7G;AAED,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAI/C;AAED,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAGvD;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,kBAAkB,GAAG,UAAU,EAAE,YAAY,GAAE,kBAAuB,UA4BhH;AAED,wBAAgB,cAAc,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,EAAE,KAAK,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,GAAG,OAAO,CAY7G;AAED,wBAAgB,eAAe,CAC7B,QAAQ,EAAE,SAAS,GAAG,SAAS,EAC/B,IAAI,EAAE,KAAK,CAAC,WAAW,EACvB,SAAS,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,SAAS,GACzC,SAAS,CAeX;AAED,wBAAgB,eAAe,CAAC,QAAQ,EAAE,SAAS,GAAG,SAAS,EAAE,IAAI,EAAE,KAAK,CAAC,WAAW,GAAG,CAAC,SAAS,GAAG,SAAS,EAAE,SAAS,GAAG,SAAS,CAAC,CAexI;AAED,wBAAgB,cAAc,CAAC,QAAQ,EAAE,SAAS,GAAG,SAAS,EAAE,IAAI,EAAE,KAAK,CAAC,WAAW,GAAG,OAAO,CAIhG"}

package/dist/types/index.d.ts

@@ -2,6 +2,7 @@ export * from './components';
 export * from './fields';
 export * from './forms';
 export * from './hoc';
+export * from './layouts';
 export * from './lazy';
 export * from './sections';
 export * from './theme';

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC"}

package/dist/types/layouts/index.d.ts

@@ -0,0 +1,2 @@
+export * from './layout-default/layout-default';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/layouts/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/layouts/index.ts"],"names":[],"mappings":"AAAA,cAAc,iCAAiC,CAAC"}

package/dist/types/layouts/layout-default/layout-default.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export type LayoutDefaultProps = {
+    children?: React.ReactNode;
+};
+export declare function LayoutDefault({ children }: LayoutDefaultProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=layout-default.d.ts.map

package/dist/types/layouts/layout-default/layout-default.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout-default.d.ts","sourceRoot":"","sources":["../../../../src/layouts/layout-default/layout-default.tsx"],"names":[],"mappings":";AAGA,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE,kBAAkB,2CAW7D"}

package/dist/types/theme/global.style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"global.style.d.ts","sourceRoot":"","sources":["../../../src/theme/global.style.ts"],"names":[],"mappings":"AAiBA,eAAO,MAAM,WAAW,gGAgBvB,CAAC"}
+{"version":3,"file":"global.style.d.ts","sourceRoot":"","sources":["../../../src/theme/global.style.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,WAAW,gGASvB,CAAC"}

package/dist/types/theme/index.d.ts

@@ -2,12 +2,13 @@ import { ITheme } from './types';
 declare const customTheme: ITheme;
 export * from './global.style';
 export * from './global.vars';
-export { CssScrollbar } from './styles/mixins/_scrollbar';
-export { CssBase } from './styles/_base';
-export { CssDebug } from './styles/_debug';
-export { CssPrint } from './styles/_print';
-export { CssReset } from './styles/_reset';
-export { CssTypography } from './styles/_typography';
+export { CssBase } from './styles/base';
+export { CssDebug } from './styles/debug';
+export { CssPrint } from './styles/print';
+export { CssReset } from './styles/reset';
+export { CssScrollbar } from './styles/scrollbar';
+export { CssSwiper } from './styles/swiper';
+export { CssTypography } from './styles/typography';
 export * from './types';
 export { customTheme as theme };
 export declare const sizes: string[];

package/dist/types/theme/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/theme/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACjC,QAAA,MAAM,WAAW,EAAE,MAAc,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,WAAW,IAAI,KAAK,EAAE,CAAC;AAChC,eAAO,MAAM,KAAK,UAAiC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/theme/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACjC,QAAA,MAAM,WAAW,EAAE,MAAc,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,WAAW,IAAI,KAAK,EAAE,CAAC;AAChC,eAAO,MAAM,KAAK,UAAiC,CAAC"}

package/dist/types/theme/styles/{_base.d.ts → base.d.ts}

@@ -1,2 +1,2 @@
 export declare const CssBase: import("styled-components").FlattenSimpleInterpolation;
-//# sourceMappingURL=_base.d.ts.map
+//# sourceMappingURL=base.d.ts.map

package/dist/types/theme/styles/base.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../../../src/theme/styles/base.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,OAAO,wDAgBnB,CAAC"}

package/dist/types/theme/styles/{_debug.d.ts → debug.d.ts}

@@ -1,2 +1,2 @@
 export declare const CssDebug: import("styled-components").FlattenSimpleInterpolation;
-//# sourceMappingURL=_debug.d.ts.map
+//# sourceMappingURL=debug.d.ts.map

package/dist/types/theme/styles/debug.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"debug.d.ts","sourceRoot":"","sources":["../../../../src/theme/styles/debug.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ,wDAIpB,CAAC"}

package/dist/types/theme/styles/{_print.d.ts → print.d.ts}

@@ -1,2 +1,2 @@
 export declare const CssPrint: import("styled-components").FlattenSimpleInterpolation;
-//# sourceMappingURL=_print.d.ts.map
+//# sourceMappingURL=print.d.ts.map

package/dist/types/theme/styles/print.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"print.d.ts","sourceRoot":"","sources":["../../../../src/theme/styles/print.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,QAAQ,wDAWpB,CAAC"}

package/dist/types/theme/styles/{_reset.d.ts → reset.d.ts}

@@ -1,2 +1,2 @@
 export declare const CssReset: import("styled-components").FlattenSimpleInterpolation;
-//# sourceMappingURL=_reset.d.ts.map
+//# sourceMappingURL=reset.d.ts.map

package/dist/types/theme/styles/reset.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"reset.d.ts","sourceRoot":"","sources":["../../../../src/theme/styles/reset.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ,wDA2OpB,CAAC"}

package/dist/types/theme/styles/{mixins/_scrollbar.d.ts → scrollbar.d.ts}

@@ -1,2 +1,2 @@
 export declare const CssScrollbar: import("styled-components").FlattenSimpleInterpolation;
-//# sourceMappingURL=_scrollbar.d.ts.map
+//# sourceMappingURL=scrollbar.d.ts.map

package/dist/types/theme/styles/scrollbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrollbar.d.ts","sourceRoot":"","sources":["../../../../src/theme/styles/scrollbar.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,wDAmDxB,CAAC"}

package/dist/types/theme/styles/swiper.d.ts

@@ -0,0 +1,2 @@
+export declare const CssSwiper: import("styled-components").FlattenSimpleInterpolation;
+//# sourceMappingURL=swiper.d.ts.map

package/dist/types/theme/styles/swiper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"swiper.d.ts","sourceRoot":"","sources":["../../../../src/theme/styles/swiper.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,SAAS,wDAUrB,CAAC"}

package/dist/types/theme/styles/{_typography.d.ts → typography.d.ts}

@@ -1,2 +1,2 @@
 export declare const CssTypography: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
-//# sourceMappingURL=_typography.d.ts.map
+//# sourceMappingURL=typography.d.ts.map

package/dist/types/theme/styles/typography.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../../../src/theme/styles/typography.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,aAAa,oIAuBzB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@websolutespa/bom-mixer-ui",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "description": "Mixer UI module of the BOM Repository",
   "keywords": [
     "bom",
@@ -44,7 +44,7 @@
     "next": ">= 13.4.19",
     "react-dom": ">= 18.2.0",
     "react": ">= 18.2.0",
-    "styled-components": ">= 5.3.11",
+    "styled-components": ">= 5.3.11 <6.x.x",
     "swiper": ">= 8.3.2",
     "zustand": ">= 4.4.0"
   },

package/src/components/index.ts

@@ -15,6 +15,7 @@ export * from './code/code';
 export * from './container/container';
 export * from './divider/divider';
 export * from './drawer/drawer';
+export * from './drawer/helper';
 export * from './dropdown/dropdown';
 export * from './ellipsis/ellipsis';
 export * from './expand/expand';

package/src/components/media/media-image.tsx

@@ -2,6 +2,24 @@ import { getClassNames } from '@websolutespa/bom-core';
 import styled from 'styled-components';
 import { UIStyledComponentProps } from '../../components/types';
 
+export enum ImageStrategy {
+  None = 'none',
+  Next = 'next',
+  Custom = 'custom',
+}
+
+const IMAGE_QUALITY = process.env.IMAGE_QUALITY ?
+  parseInt(process.env.IMAGE_QUALITY) :
+  80;
+
+const IMAGE_SIZES = process.env.IMAGE_SIZES ?
+  process.env.IMAGE_SIZES.split(',').map(x => parseInt(x)) :
+  [640, 828, 1080, 1200, 1920];
+
+const IMAGE_STRATEGY = process.env.IMAGE_STRATEGY ?
+  process.env.IMAGE_STRATEGY as ImageStrategy :
+  ImageStrategy.Next;
+
 export type Props = {
   src: string;
   alt?: string;
@@ -23,8 +41,11 @@ export const MediaImage = ({ alt = '', className, type, ...props }: MediaImagePr
 };
 
 function getImageProps({ src, ...props }: MediaImageProps & Omit<MediaImageProps, 'type'>) {
+  if (IMAGE_STRATEGY === ImageStrategy.None || isSVG(src)) {
+    return { src };
+  }
   const ratio = props.width && props.height ? (parseInt(props.width.toString()) / parseInt(props.height.toString())) : 0;
-  const sizes = [640, 828, 1080, 1200, 1920];
+  const sizes = IMAGE_SIZES;
   return {
     src: getImageSrc(src, ratio, sizes[0]),
     srcSet: getImageSrcset(src, ratio, sizes),
@@ -33,7 +54,7 @@ function getImageProps({ src, ...props }: MediaImageProps & Omit<MediaImageProps
   };
 }
 
-function getImageSrc(src: string, ratio: number, width: number, quality: number = 75): string {
+function getImageSrc(src: string, ratio: number, width: number, quality: number = IMAGE_QUALITY): string {
   if (isSVG(src)) {
     return src;
   }
@@ -42,7 +63,7 @@ function getImageSrc(src: string, ratio: number, width: number, quality: number
     `/_next/image?url=${encodeURIComponent(src)}&w=${width}&q=${quality}`;
 }
 
-function getImageSrcset(src: string, ratio: number, widths: number[], quality: number = 75): string | undefined {
+function getImageSrcset(src: string, ratio: number, widths: number[], quality: number = IMAGE_QUALITY): string | undefined {
   if (isSVG(src)) {
     return undefined;
   }

package/src/components/text/text.tsx

@@ -26,7 +26,7 @@ const CssA = css`
 
 const CssP = css`
   p:not(:last-child) {
-    margin-bottom: 1rem;
+    margin-bottom: 1.25em;
   }
 `;
 

package/src/components/utils.ts

@@ -192,12 +192,3 @@ export function hasChildOfType(children: ReactNode | undefined, type: React.Elem
   const hasChildOfType = foundChildren !== undefined;
   return hasChildOfType;
 }
-
-export function hypenize(text: string): string {
-  return text.replace(/(?<![A-Z])[A-Z]/g, (m) => '-' + m.toLowerCase());
-  // return text.replace(/(?<![A-Z])[A-Z]|(?<![0-9]|^)[0-9]/g, (m) => '-' + m.toLowerCase());
-}
-
-export function camelize(text: string): string {
-  return text.replace(/(^[a-z])|-([a-z0-9])/gi, ($0, $1, $2) => ($2 ? $2.toUpperCase() : $1.toUpperCase()));
-}

package/src/forms/form/form.tsx

@@ -1,9 +1,9 @@
-import { getClassNames } from '@websolutespa/bom-core';
+import { getClassNames, toKebabCase } from '@websolutespa/bom-core';
 import { FormState } from '@websolutespa/bom-mixer-forms';
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 import { ThemeProps, UIComponentWithRef, UIStyledComponentProps } from '../../components/types';
-import { getCssResponsive, hypenize } from '../../components/utils';
+import { getCssResponsive } from '../../components/utils';
 import { IThemeFormVariant } from '../../theme';
 
 type Props = {
@@ -39,7 +39,7 @@ export function getForm(props: FormProps & ThemeProps) {
   const form = props.theme.form[variant];
   if (form) {
     return Object.keys(form).map((k) => {
-      const key: string = hypenize(k);
+      const key: string = toKebabCase(k);
       const rule = `--form-${key}: var(--form-${variant}-${key}, --form-${key});`;
       return rule;
     }).join('\n');

package/src/index.ts

@@ -2,11 +2,10 @@ export * from './components';
 export * from './fields';
 export * from './forms';
 export * from './hoc';
+export * from './layouts';
 export * from './lazy';
 export * from './sections';
 export * from './theme';
 export * from './utils';
 export * from './variants';
 
-// bundling
-// https://github.com/egoist/tsup/issues/728

package/src/layouts/index.ts

@@ -0,0 +1,2 @@
+export * from './layout-default/layout-default';
+

package/src/layouts/layout-default/layout-default.tsx

@@ -0,0 +1,19 @@
+import { Layout, Meta, Page } from '../../components';
+import { Footer, Header } from '../../sections';
+
+export type LayoutDefaultProps = {
+  children?: React.ReactNode;
+};
+
+export function LayoutDefault({ children }: LayoutDefaultProps) {
+  return (
+    <Layout>
+      <Meta />
+      <Page>
+        <Header fixed />
+        {children}
+        <Footer />
+      </Page>
+    </Layout>
+  );
+}

package/src/theme/global.style.ts

@@ -1,24 +1,14 @@
 import { createGlobalStyle } from 'styled-components';
 import { CssVars } from './global.vars';
-import { CssScrollbar } from './styles/mixins/_scrollbar';
-import { CssBase } from './styles/_base';
-import { CssDebug } from './styles/_debug';
-import { CssPrint } from './styles/_print';
-import { CssReset } from './styles/_reset';
-import { CssTypography } from './styles/_typography';
-
-// Import Swiper styles
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-// import swiperCss from '!!raw-loader!swiper/css';
-const swiperCss = '';
-// import 'swiper/css/navigation';
-// import 'swiper/css/pagination';
+import { CssBase } from './styles/base';
+import { CssDebug } from './styles/debug';
+import { CssPrint } from './styles/print';
+import { CssReset } from './styles/reset';
+import { CssScrollbar } from './styles/scrollbar';
+import { CssSwiper } from './styles/swiper';
+import { CssTypography } from './styles/typography';
 
 export const GlobalStyle = createGlobalStyle`
-
-  ${swiperCss}
-
   ${CssReset}
   ${CssVars}
   ${CssBase}
@@ -26,9 +16,5 @@ export const GlobalStyle = createGlobalStyle`
   ${CssScrollbar}
   ${CssPrint}
   ${CssDebug}
-
-  a {
-    color: inherit;
-    text-decoration: none;
-  }
+  ${CssSwiper}
 `;

package/src/theme/index.ts

@@ -3,12 +3,13 @@ import { ITheme } from './types';
 const customTheme: ITheme = theme;
 export * from './global.style';
 export * from './global.vars';
-export { CssScrollbar } from './styles/mixins/_scrollbar';
-export { CssBase } from './styles/_base';
-export { CssDebug } from './styles/_debug';
-export { CssPrint } from './styles/_print';
-export { CssReset } from './styles/_reset';
-export { CssTypography } from './styles/_typography';
+export { CssBase } from './styles/base';
+export { CssDebug } from './styles/debug';
+export { CssPrint } from './styles/print';
+export { CssReset } from './styles/reset';
+export { CssScrollbar } from './styles/scrollbar';
+export { CssSwiper } from './styles/swiper';
+export { CssTypography } from './styles/typography';
 export * from './types';
 export { customTheme as theme };
 export const sizes = ['xs', 'sm', 'md', 'lg', 'xl'];

package/src/theme/styles/{_reset.ts → reset.ts}

@@ -231,4 +231,9 @@ body {
   font-family: system-ui, sans-serif;
   -webkit-font-smoothing: antialiased;
 }
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
 `;

package/src/theme/styles/swiper.ts

@@ -0,0 +1,24 @@
+import { css } from 'styled-components';
+
+// Import Swiper styles
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import swiperCss from '!!raw-loader!swiper/css';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+// import swiperNavigation from '!!raw-loader!swiper/css/navigation';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+// import swiperPagination from '!!raw-loader!swiper/css/pagination';
+
+export const CssSwiper = css`
+  ${swiperCss}
+  /*
+  // !!! todo hide image before initialization
+  .swiper:not(.swiper-initialized) {
+    .swiper-slide > * {
+      display: none;
+    }
+  }
+  */
+`;

package/dist/esm/theme/styles/_base.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"_base.js","sources":["../../../../src/theme/styles/_base.ts"],"sourcesContent":["import { css } from 'styled-components';\nexport const CssBase = css `\r\nhtml,\r\nbody {\r\n  background: var(--color-neutral-100);\r\n  // color: var(--color-neutral-500);\r\n  scroll-behavior: smooth;\r\n}\r\n\r\nbody {\r\n  height: auto;\r\n}\r\n\r\n.negative {\r\n  background: var(--color-neutral-900);\r\n  color: var(--color-neutral-100);\r\n}\r\n`;\n//# sourceMappingURL=_base.js.map"],"names":["CssBase","css"],"mappings":";;AACO,MAAMA,OAAO,GAAGC,GAAK,CAAA;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;"}

package/dist/esm/theme/styles/_debug.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"_debug.js","sources":["../../../../src/theme/styles/_debug.ts"],"sourcesContent":["import { css } from 'styled-components';\nexport const CssDebug = css `\r\n  .debug {\r\n    outline: 1px solid var(--color-danger-100);\r\n  }\r\n`;\n//# sourceMappingURL=_debug.js.map"],"names":["CssDebug","css"],"mappings":";;AACO,MAAMA,QAAQ,GAAGC,GAAK,CAAA;AAC7B;AACA;AACA;AACA;;;;"}

package/dist/esm/theme/styles/_print.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"_print.js","sources":["../../../../src/theme/styles/_print.ts"],"sourcesContent":["import { css } from 'styled-components';\nexport const CssPrint = css `\r\n.print-none {\r\n  @media print {\r\n    display: none;\r\n  }\r\n}\r\n.screen-none {\r\n  @media screen {\r\n    display: none;\r\n  }\r\n}\r\n`;\n//# sourceMappingURL=_print.js.map"],"names":["CssPrint","css"],"mappings":";;AACO,MAAMA,QAAQ,GAAGC,GAAK,CAAA;AAC7B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;"}

package/dist/esm/theme/styles/_reset.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"_reset.js","sources":["../../../../src/theme/styles/_reset.ts"],"sourcesContent":["import { css } from 'styled-components';\nexport const CssReset = css `\r\n/*\r\n*,\r\n*::before,\r\n*::after {\r\n  margin: 0;\r\n  padding: 0;\r\n  box-sizing: border-box;\r\n}\r\n\r\n:where([hidden]:not([hidden='until-found'])) {\r\n  display: none !important;\r\n}\r\n\r\n:where(html) {\r\n  -webkit-text-size-adjust: none;\r\n  color-scheme: dark light;\r\n}\r\n\r\n@supports not (min-block-size: 100dvb) {\r\n  :where(html) {\r\n    block-size: 100%;\r\n  }\r\n}\r\n\r\n@media (prefers-reduced-motion: no-preference) {\r\n  :where(html:focus-within) {\r\n    scroll-behavior: smooth;\r\n  }\r\n}\r\n\r\n:where(body) {\r\n  block-size: 100%;\r\n  block-size: 100dvb;\r\n  line-height: 1.5;\r\n  font-family: system-ui, sans-serif;\r\n  -webkit-font-smoothing: antialiased;\r\n}\r\n\r\n:where(input, button, textarea, select) {\r\n  font: inherit;\r\n  color: inherit;\r\n}\r\n\r\n:where(textarea) {\r\n  resize: vertical;\r\n  resize: block;\r\n}\r\n\r\n:where(button, label, select, summary, [role='button'], [role='option']) {\r\n  cursor: pointer;\r\n}\r\n\r\n:where(:disabled) {\r\n  cursor: not-allowed;\r\n}\r\n\r\n:where(\r\n  label:has(> input:disabled),\r\n  label:has(+ input:disabled)) {\r\n  cursor: not-allowed;\r\n}\r\n\r\n:where(button) {\r\n  border-style: solid;\r\n}\r\n\r\n:where(a) {\r\n  text-underline-offset: 0.2ex;\r\n}\r\n\r\n:where(ul, ol) {\r\n  list-style: none;\r\n}\r\n\r\n:where(img, svg, video, canvas, audio, iframe, embed, object) {\r\n  display: block;\r\n}\r\n\r\n:where(img, picture, svg) {\r\n  max-inline-size: 100%;\r\n  block-size: auto;\r\n}\r\n\r\n:where(p, h1, h2, h3, h4, h5, h6) {\r\n  overflow-wrap: break-word;\r\n}\r\n\r\n:where(h1, h2, h3) {\r\n  line-height: calc(1em + 0.5rem);\r\n}\r\n\r\n:where(hr) {\r\n  border: none;\r\n  border-block-start: 1px solid;\r\n  color: inherit;\r\n  block-size: 0;\r\n  overflow: visible;\r\n}\r\n\r\n:where(:focus-visible) {\r\n  outline: 2px solid var(--focus-color, Highlight);\r\n  outline-offset: 2px;\r\n}\r\n\r\n:where(.visually-hidden:not(:focus, :active, :focus-within, .not-visually-hidden)) {\r\n  clip-path: inset(50%) !important;\r\n  height: 1px !important;\r\n  width: 1px !important;\r\n  overflow: hidden !important;\r\n  position: absolute !important;\r\n  white-space: nowrap !important;\r\n  border: 0 !important;\r\n}\r\n*/\r\n\r\nhtml,\r\nbody,\r\np,\r\nol,\r\nul,\r\nli,\r\ndl,\r\ndt,\r\ndd,\r\nblockquote,\r\nfigure,\r\nfieldset,\r\nlegend,\r\ntextarea,\r\npre,\r\niframe,\r\nhr,\r\nh1,\r\nh2,\r\nh3,\r\nh4,\r\nh5,\r\nh6 {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\nh1,\r\nh2,\r\nh3,\r\nh4,\r\nh5,\r\nh6 {\r\n  font-size: 100%;\r\n  font-weight: normal;\r\n}\r\n\r\nul {\r\n  list-style: none;\r\n}\r\n\r\nbutton,\r\ninput,\r\nselect {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\nbutton {\r\n  border: none;\r\n  text-decoration: none;\r\n  background: none;\r\n  appearance: none;\r\n  font-family: inherit;\r\n  font-style: inherit;\r\n  font-variant-ligatures: inherit;\r\n  font-variant-caps: inherit;\r\n  font-variant-numeric: inherit;\r\n  font-variant-east-asian: inherit;\r\n  font-weight: inherit;\r\n  font-stretch: inherit;\r\n  text-rendering: inherit;\r\n  letter-spacing: inherit;\r\n  word-spacing: inherit;\r\n  line-height: inherit;\r\n  text-transform: none;\r\n  text-indent: inherit;\r\n  text-shadow: none;\r\n  text-align: inherit;\r\n}\r\n\r\nhtml {\r\n  box-sizing: border-box;\r\n  -webkit-text-size-adjust: none;\r\n  color-scheme: dark light;\r\n}\r\n\r\n*, *::before, *::after {\r\n  box-sizing: inherit;\r\n}\r\n\r\nimg,\r\nvideo {\r\n  height: auto;\r\n  max-width: 100%;\r\n}\r\n\r\niframe {\r\n  border: 0;\r\n}\r\n\r\ntable {\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\ntd,\r\nth {\r\n  padding: 0;\r\n}\r\n\r\n//\r\n\r\nhtml,\r\nbody {\r\n  margin: 0;\r\n  padding: 0;\r\n  block-size: 100%;\r\n  block-size: 100dvb;\r\n  font-size: 20px;\r\n  line-height: 1.5;\r\n  font-family: system-ui, sans-serif;\r\n  -webkit-font-smoothing: antialiased;\r\n}\r\n`;\n//# sourceMappingURL=_reset.js.map"],"names":["CssReset","css"],"mappings":";;AACO,MAAMA,QAAQ,GAAGC,GAAK,CAAA;AAC7B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;"}

package/dist/esm/theme/styles/_typography.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"_typography.js","sources":["../../../../src/theme/styles/_typography.ts"],"sourcesContent":["import { css } from 'styled-components';\nimport { eachMedia } from '../../components/utils';\nexport const CssTypography = css `\r\nhtml,\r\nbody {\r\n  font-family: var(--font-base-family, sans-serif);\r\n  line-height: var(--font-base-line-height, 1.5);\r\n  font-weight: var(--font-base-weight, normal);\r\n  font-size: var(--font-base-size, 16px);\r\n  ${props => typeof props.theme.fontBase.size === 'object' && eachMedia(props, (key) => `font-size: var(--font-base-size-${key});`)}\r\n}\r\n\r\nbody {\r\n  background: var(--color-neutral-100);\r\n  color: var(--color-neutral-700);\r\n}\r\n\r\n/*\r\n* {\r\n  outline-offset: 0.2rem;\r\n  &:focus-visible {\r\n    outline: 2px solid var(--color-primary-200);\r\n  }\r\n}\r\n*/\r\n`;\n//# sourceMappingURL=_typography.js.map"],"names":["CssTypography","css","props","theme","fontBase","size","eachMedia","key"],"mappings":";;;AAEO,MAAMA,aAAa,GAAGC,GAAK,CAAA;AAClC;AACA;AACA;AACA;AACA;AACA;AACA,EAAIC,EAAAA,KAAK,IAAI,OAAOA,KAAK,CAACC,KAAK,CAACC,QAAQ,CAACC,IAAI,KAAK,QAAQ,IAAIC,SAAS,CAACJ,KAAK,EAAGK,GAAG,IAAM,CAAA,gCAAA,EAAkCA,GAAI,CAAA,EAAA,CAAG,CAAE,CAAA;AACpI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;"}

package/dist/esm/theme/styles/mixins/_scrollbar.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"_scrollbar.js","sources":["../../../../../src/theme/styles/mixins/_scrollbar.ts"],"sourcesContent":["import { css } from 'styled-components';\nexport const CssScrollbar = css `\r\n  &::-webkit-scrollbar {\r\n    width: 8px;\r\n    height: 8px;\r\n    border-radius: 0;\r\n  }\r\n\r\n  &::-webkit-scrollbar-button {\r\n    display: none;\r\n  }\r\n\r\n  &::-webkit-scrollbar-button:hover {\r\n    display: none;\r\n  }\r\n\r\n  &::-webkit-scrollbar-thumb {\r\n    background-color: var(--color-neutral-400);\r\n    box-shadow: none;\r\n    border-radius: 4px;\r\n\r\n    &:hover {\r\n      background-color: var(--color-neutral-600);\r\n    }\r\n  }\r\n\r\n  &::-webkit-scrollbar-track {\r\n    background-color: var(--color-neutral-100);\r\n    border-radius: 0;\r\n\r\n    &:hover {\r\n      background-color: var(--color-neutral-100);\r\n    }\r\n  }\r\n\r\n  .negative * {\r\n    &::-webkit-scrollbar-thumb {\r\n      background-color: var(--color-neutral-600);\r\n\r\n      &:hover {\r\n        background-color: var(--color-neutral-400);\r\n      }\r\n    }\r\n\r\n    &::-webkit-scrollbar-track {\r\n      background-color: var(--color-neutral-800);\r\n\r\n      &:hover {\r\n        background-color: var(--color-neutral-800);\r\n      }\r\n    }\r\n  }\r\n`;\n//# sourceMappingURL=_scrollbar.js.map"],"names":["CssScrollbar","css"],"mappings":";;AACO,MAAMA,YAAY,GAAGC,GAAK,CAAA;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;"}

package/dist/types/theme/styles/_base.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"_base.d.ts","sourceRoot":"","sources":["../../../../src/theme/styles/_base.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,OAAO,wDAgBnB,CAAC"}

package/dist/types/theme/styles/_debug.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"_debug.d.ts","sourceRoot":"","sources":["../../../../src/theme/styles/_debug.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ,wDAIpB,CAAC"}

package/dist/types/theme/styles/_print.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"_print.d.ts","sourceRoot":"","sources":["../../../../src/theme/styles/_print.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,QAAQ,wDAWpB,CAAC"}

package/dist/types/theme/styles/_reset.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"_reset.d.ts","sourceRoot":"","sources":["../../../../src/theme/styles/_reset.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ,wDAsOpB,CAAC"}

package/dist/types/theme/styles/_typography.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"_typography.d.ts","sourceRoot":"","sources":["../../../../src/theme/styles/_typography.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,aAAa,oIAuBzB,CAAC"}

package/dist/types/theme/styles/mixins/_scrollbar.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"_scrollbar.d.ts","sourceRoot":"","sources":["../../../../../src/theme/styles/mixins/_scrollbar.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,wDAmDxB,CAAC"}