@websolutespa/bom-mixer-ui 0.0.1

package/dist/chunk-PFPUP4FL.mjs

@@ -0,0 +1,807 @@
+import {
+  eachMedia,
+  getCssResponsive,
+  getGrid
+} from "./chunk-B5WDQW62.mjs";
+
+// src/styles/mixins/_scrollbar.tsx
+import { css } from "styled-components";
+var CssScrollbar = css`
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+    border-radius: 0;
+  }
+
+  &::-webkit-scrollbar-button {
+    display: none;
+  }
+
+  &::-webkit-scrollbar-button:hover {
+    display: none;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--color-neutral-400);
+    box-shadow: none;
+    border-radius: 4px;
+
+    &:hover {
+      background-color: var(--color-neutral-600);
+    }
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: var(--color-neutral-100);
+    border-radius: 0;
+
+    &:hover {
+      background-color: var(--color-neutral-100);
+    }
+  }
+`;
+
+// src/styles/_base.tsx
+import { css as css2 } from "styled-components";
+var CssBase = css2`
+html,
+body {
+  background: var(--color-neutral-100);
+  // color: var(--color-neutral-500);
+  scroll-behavior: smooth;
+}
+`;
+
+// src/styles/_debug.tsx
+import { css as css3 } from "styled-components";
+var CssDebug = css3`
+  .debug {
+    outline: 1px solid var(--color-danger-100);
+  }
+`;
+
+// src/styles/_print.tsx
+import { css as css4 } from "styled-components";
+var CssPrint = css4`
+.print-none {
+  @media print {
+    display: none;
+  }
+}
+.screen-none {
+  @media screen {
+    display: none;
+  }
+}
+`;
+
+// src/styles/_reset.tsx
+import { css as css5 } from "styled-components";
+var CssReset = css5`
+/*
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:where([hidden]:not([hidden='until-found'])) {
+  display: none !important;
+}
+
+:where(html) {
+  -webkit-text-size-adjust: none;
+  color-scheme: dark light;
+}
+
+@supports not (min-block-size: 100dvb) {
+  :where(html) {
+    block-size: 100%;
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  :where(html:focus-within) {
+    scroll-behavior: smooth;
+  }
+}
+
+:where(body) {
+  block-size: 100%;
+  block-size: 100dvb;
+  line-height: 1.5;
+  font-family: system-ui, sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+
+:where(input, button, textarea, select) {
+  font: inherit;
+  color: inherit;
+}
+
+:where(textarea) {
+  resize: vertical;
+  resize: block;
+}
+
+:where(button, label, select, summary, [role='button'], [role='option']) {
+  cursor: pointer;
+}
+
+:where(:disabled) {
+  cursor: not-allowed;
+}
+
+:where(
+  label:has(> input:disabled),
+  label:has(+ input:disabled)) {
+  cursor: not-allowed;
+}
+
+:where(button) {
+  border-style: solid;
+}
+
+:where(a) {
+  text-underline-offset: 0.2ex;
+}
+
+:where(ul, ol) {
+  list-style: none;
+}
+
+:where(img, svg, video, canvas, audio, iframe, embed, object) {
+  display: block;
+}
+
+:where(img, picture, svg) {
+  max-inline-size: 100%;
+  block-size: auto;
+}
+
+:where(p, h1, h2, h3, h4, h5, h6) {
+  overflow-wrap: break-word;
+}
+
+:where(h1, h2, h3) {
+  line-height: calc(1em + 0.5rem);
+}
+
+:where(hr) {
+  border: none;
+  border-block-start: 1px solid;
+  color: inherit;
+  block-size: 0;
+  overflow: visible;
+}
+
+:where(:focus-visible) {
+  outline: 2px solid var(--focus-color, Highlight);
+  outline-offset: 2px;
+}
+
+:where(.visually-hidden:not(:focus, :active, :focus-within, .not-visually-hidden)) {
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  overflow: hidden !important;
+  position: absolute !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+*/
+
+html,
+body,
+p,
+ol,
+ul,
+li,
+dl,
+dt,
+dd,
+blockquote,
+figure,
+fieldset,
+legend,
+textarea,
+pre,
+iframe,
+hr,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  padding: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: 100%;
+  font-weight: normal;
+}
+
+ul {
+  list-style: none;
+}
+
+button,
+input,
+select {
+  margin: 0;
+  padding: 0;
+}
+
+button {
+  border: none;
+  text-decoration: none;
+  background: none;
+  appearance: none;
+  font-family: inherit;
+  font-style: inherit;
+  font-variant-ligatures: inherit;
+  font-variant-caps: inherit;
+  font-variant-numeric: inherit;
+  font-variant-east-asian: inherit;
+  font-weight: inherit;
+  font-stretch: inherit;
+  text-rendering: inherit;
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  line-height: inherit;
+  text-transform: none;
+  text-indent: inherit;
+  text-shadow: none;
+  text-align: inherit;
+}
+
+html {
+  box-sizing: border-box;
+  -webkit-text-size-adjust: none;
+  color-scheme: dark light;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+img,
+video {
+  height: auto;
+  max-width: 100%;
+}
+
+iframe {
+  border: 0;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+td,
+th {
+  padding: 0;
+}
+
+//
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  block-size: 100%;
+  block-size: 100dvb;
+  font-size: 20px;
+  line-height: 1.5;
+  font-family: system-ui, sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+`;
+
+// src/styles/_typography.tsx
+import { css as css6 } from "styled-components";
+var CssTypography = css6`
+html,
+body {
+  font-family: var(--font-primary-family);
+  line-height: 1.5;
+  ${(props) => eachMedia(props, (key) => `font-size: var(--base-font-size-${key});`)}
+}
+
+body {
+  background: var(--color-neutral-100);
+  color: var(--color-neutral-700);
+}
+
+/*
+* {
+  outline-offset: 0.2rem;
+  &:focus-visible {
+    outline: 2px solid var(--color-primary-200);
+  }
+}
+*/
+`;
+
+// src/styles/_vars.tsx
+import { css as css7 } from "styled-components";
+var CssVars = css7`
+:root {
+  --base-font-size-xs: 14px;
+  --base-font-size-sm: 15px;
+  --base-font-size-md: 15px;
+  --base-font-size-lg: 16px;
+  --base-font-size-xl: 16px;
+  --font-primary-family: Inter, -apple-system, 'Helvetica Neue', 'Segoe UI', Roboto, Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-primary-size-0: Min(6.25rem, 16vw);
+  --font-primary-size-1: Min(4.5rem, 11.5vw);
+  --font-primary-size-2: Min(2.75rem, 7vw);
+  --font-primary-size-3: Min(2.5rem, 6.4vw);
+  --font-primary-size-4: 2.25rem;
+  --font-primary-size-5: 1.875rem;
+  --font-primary-size-6: 1.5rem;
+  --font-primary-size-7: 1.125rem;
+  --font-primary-size-8: 1rem;
+  --font-primary-size-9: 0.9rem;
+  --font-primary-size-10: 0.8rem;
+  --font-primary-size-11: 0.7rem;
+  --font-primary-line-height-0: 0.9;
+  --font-primary-line-height-1: 1.0;
+  --font-primary-line-height-2: 1.1;
+  --font-primary-line-height-3: 1.2;
+  --font-primary-line-height-4: 1.3;
+  --font-primary-line-height-5: 1.4;
+  --font-primary-line-height-6: 1.5;
+  --font-primary-line-height-7: 1.625;
+  --font-primary-line-height-8: 1.5;
+  --font-primary-line-height-9: 1.6;
+  --font-primary-line-height-10: 1.7;
+  --font-primary-line-height-11: 1.8;
+  --font-secondary-family: Petrona, serif;
+  --font-secondary-size-0: 7.5rem;
+  --font-secondary-size-1: 5.4rem;
+  --font-secondary-size-2: 3.3rem;
+  --font-secondary-size-3: 3rem;
+  --font-secondary-size-4: 2.7rem;
+  --font-secondary-size-5: 2.25rem;
+  --font-secondary-size-6: 1.8rem;
+  --font-secondary-size-7: 1.35rem;
+  --font-secondary-size-8: 1.2rem;
+  --font-secondary-size-9: 1.08rem;
+  --font-secondary-size-10: 0.96rem;
+  --font-secondary-size-11: 0.84rem;
+  --font-secondary-line-height-0: 0.9;
+  --font-secondary-line-height-1: 1.0;
+  --font-secondary-line-height-2: 1.1;
+  --font-secondary-line-height-3: 1.2;
+  --font-secondary-line-height-4: 1.3;
+  --font-secondary-line-height-5: 1.4;
+  --font-secondary-line-height-6: 1.5;
+  --font-secondary-line-height-7: 1.625;
+  --font-secondary-line-height-8: 1.5;
+  --font-secondary-line-height-9: 1.6;
+  --font-secondary-line-height-10: 1.7;
+  --font-secondary-line-height-11: 1.8;
+  --grid-columns: 12;
+  --grid-size: 1fr;
+  --grid-column-gap: Max(4vw, Min(96px, calc(100% / 24)));
+  --grid-row-gap: 0;
+  --media-query-xs: 0;
+  --media-query-sm: 768;
+  --media-query-md: 1024;
+  --media-query-lg: 1440;
+  --media-query-xl: 1600;
+  --container-max-width-xs: calc(100% - var(--grid-column-gap) * 2);
+  --container-max-width-sm: calc(100% - var(--grid-column-gap) * 2);
+  --container-max-width-md: calc(1024px - var(--grid-column-gap) * 2);
+  --container-max-width-lg: calc(1440px - var(--grid-column-gap) * 2);
+  --container-max-width-xl: calc(1600px - var(--grid-column-gap) * 2);
+  --max-width-xs: calc(100% - var(--grid-column-gap) * 2);
+  --max-width-sm: calc(100% - var(--grid-column-gap) * 2);
+  --max-width-md: Min(928px, calc(100% - var(--grid-column-gap) * 2));
+  --max-width-lg: Min(1344px, calc(100% - var(--grid-column-gap) * 4));
+  --max-width-xl: Min(1204px, calc(100% - var(--grid-column-gap) * 6));
+  --button-size-xs: 0.7rem;
+  --button-size-sm: 0.8rem;
+  --button-size-md: 1rem;
+  --button-size-lg: 1.25rem;
+  --button-size-xl: 1.45rem;
+  --button-border-radius: 0.2em;
+  --form-font-size: 1.125rem;
+  --form-line-height: 1.6;
+  --form-padding: 0.8em;
+  --card-shadow: 0 20px 20px -10px rgba(0,0,0,0.2);
+  --backdrop-opacity: 0.5;
+  --border-radius: 0.5em;
+  --shadow-xs: 0 0.1rem 0.4rem -0.1rem rgba(0, 0, 0, 0.2);
+  --shadow-sm: 0 0.3rem 0.8rem -0.2rem rgba(0, 0, 0, 0.3);
+  --shadow-md: 0 0.6rem 1.6rem -0.3rem rgba(0, 0, 0, 0.4);
+  --shadow-lg: 0 0.9rem 3.2rem -0.4rem rgba(0, 0, 0, 0.5);
+  --shadow-xl: 0 1.2rem 6.4rem -0.5rem rgba(0, 0, 0, 0.6);
+  --color-neutral-100: #FFFFFF;
+  --color-neutral-200: #EFEFF2;
+  --color-neutral-300: #DBDBD7;
+  --color-neutral-400: #B1B1B1;
+  --color-neutral-500: #7E7E8B;
+  --color-neutral-600: #61616B;
+  --color-neutral-700: #44444B;
+  --color-neutral-800: #27272B;
+  --color-neutral-900: #09090A;
+  --color-primary-100: #F4F5FB;
+  --color-primary-200: #C4D2F9;
+  --color-primary-300: #9EAEF5;
+  --color-primary-400: #727CEF;
+  --color-primary-500: #4F46E5;
+  --color-primary-600: #3A33C4;
+  --color-primary-700: #2923A4;
+  --color-primary-800: #1A1684;
+  --color-primary-900: #100D6D;
+  --color-secondary-100: #FFCDD8;
+  --color-secondary-200: #FF9BBC;
+  --color-secondary-300: #FF69AA;
+  --color-secondary-400: #FF43A7;
+  --color-secondary-500: #ff05a3;
+  --color-secondary-600: #DB03A1;
+  --color-secondary-700: #B70298;
+  --color-secondary-800: #930189;
+  --color-secondary-900: #76007A;
+  --color-success-100: #CFFDD5;
+  --color-success-200: #A1FCB5;
+  --color-success-300: #70F69B;
+  --color-success-400: #4CED90;
+  --color-success-500: #16e280;
+  --color-success-600: #10C27E;
+  --color-success-700: #0BA278;
+  --color-success-800: #07836C;
+  --color-success-900: #046C64;
+  --color-warning-100: #FEF9CB;
+  --color-warning-200: #FEF198;
+  --color-warning-300: #FEE765;
+  --color-warning-400: #FDDE3F;
+  --color-warning-500: #fdce00;
+  --color-warning-600: #D9AC00;
+  --color-warning-700: #B68D00;
+  --color-warning-800: #926E00;
+  --color-warning-900: #795900;
+  --color-danger-100: #FEE9CD;
+  --color-danger-200: #FECC9C;
+  --color-danger-300: #FCA86A;
+  --color-danger-400: #FA8645;
+  --color-danger-500: #f74e09;
+  --color-danger-600: #D43406;
+  --color-danger-700: #B11F04;
+  --color-danger-800: #8F0F02;
+  --color-danger-900: #760301;
+}
+`;
+
+// src/styles/style.tsx
+import { createGlobalStyle } from "styled-components";
+var swiperCss = "";
+var GlobalStyle = createGlobalStyle`
+
+  ${swiperCss}
+
+  ${CssReset}
+  ${CssVars}
+  ${CssBase}
+  ${CssTypography}
+  ${CssScrollbar}
+  ${CssPrint}
+  ${CssDebug}
+
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+`;
+var style_default = GlobalStyle;
+
+// src/styles/theme.json
+var theme_default = {
+  base: {
+    fontSize: {
+      xs: "14px",
+      sm: "15px",
+      md: "15px",
+      lg: "16px",
+      xl: "16px"
+    }
+  },
+  font: {
+    primary: {
+      family: "Inter, -apple-system, 'Helvetica Neue', 'Segoe UI', Roboto, Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
+      size: [
+        "Min(6.25rem, 16vw)",
+        "Min(4.5rem, 11.5vw)",
+        "Min(2.75rem, 7vw)",
+        "Min(2.5rem, 6.4vw)",
+        "2.25rem",
+        "1.875rem",
+        "1.5rem",
+        "1.125rem",
+        "1rem",
+        "0.9rem",
+        "0.8rem",
+        "0.7rem"
+      ],
+      lineHeight: [
+        "0.9",
+        "1.0",
+        "1.1",
+        "1.2",
+        "1.3",
+        "1.4",
+        "1.5",
+        "1.625",
+        "1.5",
+        "1.6",
+        "1.7",
+        "1.8"
+      ]
+    },
+    secondary: {
+      family: "Petrona, serif",
+      size: [
+        "7.5rem",
+        "5.4rem",
+        "3.3rem",
+        "3rem",
+        "2.7rem",
+        "2.25rem",
+        "1.8rem",
+        "1.35rem",
+        "1.2rem",
+        "1.08rem",
+        "0.96rem",
+        "0.84rem"
+      ],
+      lineHeight: [
+        "0.9",
+        "1.0",
+        "1.1",
+        "1.2",
+        "1.3",
+        "1.4",
+        "1.5",
+        "1.625",
+        "1.5",
+        "1.6",
+        "1.7",
+        "1.8"
+      ]
+    }
+  },
+  grid: {
+    columns: 12,
+    size: "1fr",
+    columnGap: "Max(4vw, Min(96px, calc(100% / 24)))",
+    rowGap: "0"
+  },
+  mediaQuery: {
+    xs: 0,
+    sm: 768,
+    md: 1024,
+    lg: 1440,
+    xl: 1600
+  },
+  container: {
+    maxWidth: {
+      xs: "calc(100% - var(--grid-column-gap) * 2)",
+      sm: "calc(100% - var(--grid-column-gap) * 2)",
+      md: "calc(1024px - var(--grid-column-gap) * 2)",
+      lg: "calc(1440px - var(--grid-column-gap) * 2)",
+      xl: "calc(1600px - var(--grid-column-gap) * 2)"
+    }
+  },
+  maxWidth: {
+    xs: "calc(100% - var(--grid-column-gap) * 2)",
+    sm: "calc(100% - var(--grid-column-gap) * 2)",
+    md: "Min(928px, calc(100% - var(--grid-column-gap) * 2))",
+    lg: "Min(1344px, calc(100% - var(--grid-column-gap) * 4))",
+    xl: "Min(1204px, calc(100% - var(--grid-column-gap) * 6))"
+  },
+  button: {
+    size: {
+      xs: "0.7rem",
+      sm: "0.8rem",
+      md: "1rem",
+      lg: "1.25rem",
+      xl: "1.45rem"
+    },
+    borderRadius: "0.2em"
+  },
+  form: {
+    fontSize: "1.125rem",
+    lineHeight: "1.6",
+    padding: "0.8em"
+  },
+  card: {
+    shadow: "0 20px 20px -10px rgba(0,0,0,0.2)"
+  },
+  backdrop: {
+    opacity: 0.5
+  },
+  border: {
+    radius: "0.5em"
+  },
+  shadow: {
+    xs: "0 0.1rem 0.4rem -0.1rem rgba(0, 0, 0, 0.2)",
+    sm: "0 0.3rem 0.8rem -0.2rem rgba(0, 0, 0, 0.3)",
+    md: "0 0.6rem 1.6rem -0.3rem rgba(0, 0, 0, 0.4)",
+    lg: "0 0.9rem 3.2rem -0.4rem rgba(0, 0, 0, 0.5)",
+    xl: "0 1.2rem 6.4rem -0.5rem rgba(0, 0, 0, 0.6)"
+  },
+  color: {
+    neutral: {
+      "100": "#FFFFFF",
+      "200": "#EFEFF2",
+      "300": "#DBDBD7",
+      "400": "#B1B1B1",
+      "500": "#7E7E8B",
+      "600": "#61616B",
+      "700": "#44444B",
+      "800": "#27272B",
+      "900": "#09090A"
+    },
+    primary: {
+      "100": "#F4F5FB",
+      "200": "#C4D2F9",
+      "300": "#9EAEF5",
+      "400": "#727CEF",
+      "500": "#4F46E5",
+      "600": "#3A33C4",
+      "700": "#2923A4",
+      "800": "#1A1684",
+      "900": "#100D6D"
+    },
+    secondary: {
+      "100": "#FFCDD8",
+      "200": "#FF9BBC",
+      "300": "#FF69AA",
+      "400": "#FF43A7",
+      "500": "#ff05a3",
+      "600": "#DB03A1",
+      "700": "#B70298",
+      "800": "#930189",
+      "900": "#76007A"
+    },
+    success: {
+      "100": "#CFFDD5",
+      "200": "#A1FCB5",
+      "300": "#70F69B",
+      "400": "#4CED90",
+      "500": "#16e280",
+      "600": "#10C27E",
+      "700": "#0BA278",
+      "800": "#07836C",
+      "900": "#046C64"
+    },
+    warning: {
+      "100": "#FEF9CB",
+      "200": "#FEF198",
+      "300": "#FEE765",
+      "400": "#FDDE3F",
+      "500": "#fdce00",
+      "600": "#D9AC00",
+      "700": "#B68D00",
+      "800": "#926E00",
+      "900": "#795900"
+    },
+    danger: {
+      "100": "#FEE9CD",
+      "200": "#FECC9C",
+      "300": "#FCA86A",
+      "400": "#FA8645",
+      "500": "#f74e09",
+      "600": "#D43406",
+      "700": "#B11F04",
+      "800": "#8F0F02",
+      "900": "#760301"
+    }
+  }
+};
+
+// src/styles/theme.ts
+var customTheme = theme_default;
+
+// src/styles/utils.ts
+function merge(target, source) {
+  if (source === null) {
+    return source;
+  }
+  if (!target) {
+    if (source && typeof source === "object") {
+      return Object.assign({}, source);
+    } else {
+      return source;
+    }
+  }
+  if (source && typeof source === "object") {
+    Object.keys(source).forEach((key) => {
+      const value = source[key];
+      if (typeof value === "object" && !Array.isArray(value)) {
+        target[key] = merge(target[key], value);
+      } else {
+        target[key] = value;
+      }
+    });
+  }
+  return target;
+}
+
+// src/styles/index.ts
+var sizes = ["xs", "sm", "md", "lg", "xl"];
+
+// src/components/grid/grid-row.tsx
+import styled from "styled-components";
+var GridRow = styled.div`
+  ${(props) => getCssResponsive(props)}
+  ${(props) => getGrid(props)}
+`;
+
+// src/components/grid/grid.tsx
+import { withSchema } from "@websolutespa/bom-mixer-core";
+import styled2, { css as css8 } from "styled-components";
+var GridBase = styled2.div`
+  // default grid column
+  grid-column: span var(--grid-columns);
+
+  ${(props) => props.justifyContent || props.alignItems ? css8`
+    display: flex;
+    flex-direction: column;
+  ` : ""}
+
+  // get media query column
+  ${(props) => getMediaQueryColumn(props)}
+  ${(props) => getCssResponsive(props)}
+`;
+var Grid = withSchema(GridBase, {
+  Row: GridRow,
+  displayName: "Grid"
+});
+function getMediaQueryColumn(props) {
+  const theme = props.theme;
+  return sizes.map((size) => {
+    const key = size;
+    const columns = props[key];
+    if (typeof columns === "number" && theme.mediaQuery) {
+      const width = theme.mediaQuery[key];
+      return key === "xs" ? `grid-column: span ${columns};
+        ` : `
+        @media(min-width: ${width}px) {
+          grid-column: span ${columns};
+        }
+      `;
+    } else {
+      return "";
+    }
+  }).join("\n");
+}
+
+export {
+  CssScrollbar,
+  CssBase,
+  CssDebug,
+  CssPrint,
+  CssReset,
+  CssTypography,
+  CssVars,
+  style_default,
+  customTheme,
+  merge,
+  sizes,
+  GridRow,
+  Grid
+};