@ingamigo/ui 1.2.2 → 1.2.3

package/dist/index.js

@@ -1,9 +1,912 @@
-"use client";
-export { ThemeProvider } from "./theme";
-export { theme } from "./theme";
-export { default as Button } from "./components/button/button";
-export { default as Input } from "./components/input/input";
-export { default as Typography } from "./components/typography/typography";
-export { default as SegmentedControl } from "./components/segmented-control/segmented-control";
-export { default as Logo } from "./components/logo/logo";
+"use client";import { ThemeProvider as ThemeProvider$1 } from '@emotion/react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import styled5 from '@emotion/styled';
+import { useRef, useState, useEffect } from 'react';
+
+// src/theme/theme.ts
+var primitives = {
+  colors: {
+    white: "#ffffff",
+    black: "#000000",
+    neutral: {
+      50: "#f5f5f5",
+      100: "#e9e9ea",
+      200: "#d5d5d7",
+      300: "#b9b9bd",
+      400: "#97979d",
+      500: "#7b7b82",
+      600: "#5f6066",
+      700: "#45464b",
+      800: "#2e3035",
+      900: "#1d1e20",
+      950: "#141414"
+    },
+    brand: {
+      400: "#63c69d",
+      500: "#4db288",
+      600: "#3d9873"
+    },
+    success: "#4db288",
+    warning: "#e7b94c",
+    danger: "#cc5c6f"
+  },
+  spacing: {
+    1: "4px",
+    2: "8px",
+    3: "12px",
+    4: "16px",
+    5: "20px",
+    6: "24px",
+    7: "28px",
+    8: "32px",
+    10: "40px",
+    12: "48px",
+    16: "64px",
+    20: "80px"
+  },
+  radius: {
+    none: "0px",
+    xs: "8px",
+    sm: "12px",
+    md: "16px",
+    lg: "20px",
+    xl: "24px",
+    "2xl": "28px",
+    full: "9999px"
+  },
+  typography: {
+    fontFamily: `
+      Inter,
+      system-ui,
+      -apple-system,
+      BlinkMacSystemFont,
+      "Segoe UI",
+      Roboto,
+      Helvetica,
+      Arial,
+      sans-serif
+    `,
+    fontSize: {
+      xs: "12px",
+      sm: "14px",
+      md: "16px",
+      lg: "18px",
+      xl: "20px",
+      "2xl": "24px",
+      "3xl": "32px",
+      "4xl": "36px",
+      "5xl": "40px"
+    },
+    fontWeight: {
+      regular: 400,
+      medium: 500,
+      semibold: 600,
+      bold: 700
+    },
+    lineHeight: {
+      tight: 1.15,
+      normal: 1.4,
+      relaxed: 1.6
+    }
+  },
+  shadows: {
+    sm: "0 2px 8px rgb(0 0 0 / 18%)",
+    md: "0 6px 16px rgb(0 0 0 / 24%)",
+    lg: "0 12px 32px rgb(0 0 0 / 30%)",
+    xl: "0 20px 48px rgb(0 0 0 / 36%)"
+  },
+  motion: {
+    duration: {
+      fast: "150ms",
+      normal: "200ms",
+      slow: "300ms"
+    },
+    ease: {
+      standard: "ease"
+    }
+  }
+};
+var lightSemantic = {
+  background: {
+    primary: primitives.colors.neutral[50],
+    secondary: primitives.colors.white
+  },
+  surface: {
+    primary: primitives.colors.white,
+    secondary: primitives.colors.neutral[50],
+    tertiary: primitives.colors.neutral[100]
+  },
+  text: {
+    primary: primitives.colors.neutral[950],
+    secondary: primitives.colors.neutral[600],
+    tertiary: primitives.colors.neutral[500],
+    disabled: primitives.colors.neutral[400],
+    inverse: primitives.colors.white
+  },
+  border: {
+    default: primitives.colors.neutral[200],
+    strong: primitives.colors.neutral[300],
+    focus: primitives.colors.brand[500]
+  },
+  action: {
+    primary: primitives.colors.brand[500],
+    primaryHover: primitives.colors.brand[600]
+  },
+  status: {
+    success: primitives.colors.success,
+    warning: primitives.colors.warning,
+    danger: primitives.colors.danger
+  },
+  semanticTypography: {
+    fontSize: {
+      body: primitives.typography.fontSize.md,
+      bodySm: primitives.typography.fontSize.sm,
+      bodyLg: primitives.typography.fontSize.lg,
+      label: primitives.typography.fontSize.sm,
+      heading1: primitives.typography.fontSize["4xl"],
+      heading2: primitives.typography.fontSize["3xl"],
+      heading3: primitives.typography.fontSize["2xl"]
+    },
+    fontWeight: {
+      heading: primitives.typography.fontWeight.bold,
+      body: primitives.typography.fontWeight.regular,
+      label: primitives.typography.fontWeight.medium
+    }
+  },
+  radiusSemantic: {
+    control: primitives.radius.md,
+    card: primitives.radius.xl,
+    container: primitives.radius.xl
+  },
+  elevation: {
+    surface: primitives.shadows.sm,
+    floating: primitives.shadows.md,
+    overlay: primitives.shadows.lg
+  },
+  motionSemantic: {
+    interaction: primitives.motion.duration.normal,
+    transition: primitives.motion.ease.standard
+  }
+};
+({
+  background: {
+    primary: primitives.colors.neutral[950],
+    secondary: primitives.colors.neutral[900]
+  },
+  surface: {
+    primary: primitives.colors.neutral[900],
+    secondary: primitives.colors.neutral[800],
+    tertiary: primitives.colors.neutral[700]
+  },
+  text: {
+    primary: primitives.colors.white,
+    secondary: primitives.colors.neutral[300],
+    tertiary: primitives.colors.neutral[400],
+    disabled: primitives.colors.neutral[500],
+    inverse: primitives.colors.neutral[950]
+  },
+  border: {
+    default: primitives.colors.neutral[800],
+    strong: primitives.colors.neutral[700],
+    focus: primitives.colors.brand[400]
+  },
+  action: {
+    primary: primitives.colors.brand[500],
+    primaryHover: primitives.colors.brand[600]
+  },
+  status: {
+    success: primitives.colors.success,
+    warning: primitives.colors.warning,
+    danger: primitives.colors.danger
+  }});
+var lightTheme = {
+  ...primitives,
+  ...lightSemantic
+};
+var theme = lightTheme;
+function ThemeProvider({
+  children
+}) {
+  return /* @__PURE__ */ jsx(ThemeProvider$1, { theme, children });
+}
+var StyledButton = styled5.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${({ theme: theme2 }) => theme2.spacing[2]};
+
+  border: 1px solid transparent;
+  border-radius: ${({ theme: theme2 }) => theme2.radiusSemantic.control};
+
+  font-family: ${({ theme: theme2 }) => theme2.typography.fontFamily};
+  font-weight: ${({ theme: theme2 }) => theme2.semanticTypography.fontWeight.label};
+
+  line-height: 1;
+  white-space: nowrap;
+
+  cursor: pointer;
+  user-select: none;
+
+  transition:
+    background-color ${({ theme: theme2 }) => theme2.motionSemantic.interaction}
+      ${({ theme: theme2 }) => theme2.motionSemantic.transition},
+    color ${({ theme: theme2 }) => theme2.motionSemantic.interaction}
+      ${({ theme: theme2 }) => theme2.motionSemantic.transition},
+    border-color ${({ theme: theme2 }) => theme2.motionSemantic.interaction}
+      ${({ theme: theme2 }) => theme2.motionSemantic.transition},
+    box-shadow ${({ theme: theme2 }) => theme2.motionSemantic.interaction}
+      ${({ theme: theme2 }) => theme2.motionSemantic.transition};
+
+  ${({ theme: theme2, size }) => {
+  switch (size) {
+    case "small":
+      return `
+          min-height: 32px;
+          padding: 0 ${theme2.spacing[3]};
+          font-size: ${theme2.semanticTypography.fontSize.bodySm};
+        `;
+    case "large":
+      return `
+          min-height: 44px;
+          padding: 0 ${theme2.spacing[5]};
+          font-size: ${theme2.semanticTypography.fontSize.bodyLg};
+        `;
+    case "icon":
+      return `
+            min-width: 36px;
+            min-height: 36px;
+            padding: ${theme2.spacing[2]};
+            aspect-ratio: 1 / 1;
+          `;
+    case "medium":
+    default:
+      return `
+          min-height: 36px;
+          padding: 0 ${theme2.spacing[4]};
+          font-size: ${theme2.semanticTypography.fontSize.body};
+        `;
+  }
+}}
+
+  ${({ theme: theme2, variant }) => {
+  switch (variant) {
+    case "primary":
+      return `
+          background: ${theme2.action.primary};
+          color: ${theme2.text.inverse};
+          border-color: ${theme2.action.primary};
+
+          &:hover:not(:disabled) {
+            background: ${theme2.action.primaryHover};
+            border-color: ${theme2.action.primaryHover};
+          }
+        `;
+    case "secondary":
+      return `
+          background: ${theme2.surface.secondary};
+          color: ${theme2.text.primary};
+          border-color: ${theme2.border.default};
+
+          &:hover:not(:disabled) {
+            background: ${theme2.surface.tertiary};
+            border-color: ${theme2.border.strong};
+          }
+        `;
+    case "ghost":
+      return `
+          background: transparent;
+          color: ${theme2.text.secondary};
+          border-color: transparent;
+
+          &:hover:not(:disabled) {
+            background: ${theme2.surface.tertiary};
+            color: ${theme2.text.primary};
+          }
+
+          &:active:not(:disabled) {
+            background: ${theme2.surface.tertiary};
+          }
+        `;
+  }
+}}
+
+  &:focus-visible {
+    outline: 2px solid ${({ theme: theme2 }) => theme2.border.focus};
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  &[aria-busy="true"] {
+    cursor: wait;
+  }
+`;
+var Button = ({
+  variant = "primary",
+  size = "medium",
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    StyledButton,
+    {
+      variant,
+      size,
+      ...props,
+      children
+    }
+  );
+};
+var button_default = Button;
+var StyledInput = styled5.input`
+  display: block;
+  width: 100%;
+
+  border: 1px solid ${({ theme: theme2 }) => theme2.border.default};
+  border-radius: ${({ theme: theme2 }) => theme2.radius.md};
+
+  background: ${({ theme: theme2 }) => theme2.surface.primary};
+  color: ${({ theme: theme2 }) => theme2.text.primary};
+
+  font-family:
+    Inter,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    Helvetica,
+    Arial,
+    sans-serif;
+  font-weight: ${({ theme: theme2 }) => theme2.typography.fontWeight.regular};
+  line-height: 1;
+
+  outline: none;
+
+  transition:
+    background-color ${({ theme: theme2 }) => theme2.motion.duration.normal}
+      ${({ theme: theme2 }) => theme2.motion.ease.standard},
+    border-color ${({ theme: theme2 }) => theme2.motion.duration.normal}
+      ${({ theme: theme2 }) => theme2.motion.ease.standard},
+    box-shadow ${({ theme: theme2 }) => theme2.motion.duration.normal}
+      ${({ theme: theme2 }) => theme2.motion.ease.standard},
+    color ${({ theme: theme2 }) => theme2.motion.duration.normal}
+      ${({ theme: theme2 }) => theme2.motion.ease.standard};
+
+  &::placeholder {
+    color: ${({ theme: theme2 }) => theme2.text.tertiary};
+  }
+
+  &:hover:not(:disabled) {
+    border-color: ${({ theme: theme2 }) => theme2.border.strong};
+  }
+
+  &:focus {
+    border-color: ${({ theme: theme2 }) => theme2.border.focus};
+
+    box-shadow: 0 0 0 3px
+      color-mix(
+        in srgb,
+        ${({ theme: theme2 }) => theme2.border.focus} 18%,
+        transparent
+      );
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+    background: ${({ theme: theme2 }) => theme2.surface.secondary};
+  }
+
+  ${({ theme: theme2, inputSize }) => inputSize === "small" && `
+      min-height: 32px;
+      padding: 0 ${theme2.spacing[3]};
+      font-size: ${theme2.typography.fontSize.sm};
+    `}
+
+  ${({ theme: theme2, inputSize }) => inputSize === "medium" && `
+      min-height: 40px;
+      padding: 0 ${theme2.spacing[4]};
+      font-size: ${theme2.typography.fontSize.md};
+    `}
+
+  ${({ theme: theme2, inputSize }) => inputSize === "large" && `
+      min-height: 48px;
+      padding: 0 ${theme2.spacing[4]};
+      font-size: ${theme2.typography.fontSize.lg};
+    `}
+`;
+var Input = ({
+  inputSize = "medium",
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    StyledInput,
+    {
+      inputSize,
+      ...props
+    }
+  );
+};
+var input_default = Input;
+var StyledTypography = styled5.span`
+  margin: 0;
+
+  font-family:
+    Inter,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    Helvetica,
+    Arial,
+    sans-serif;
+
+  color: ${({ theme: theme2 }) => theme2.text.primary};
+
+  &[data-variant="heading-1"] {
+    font-size: ${({ theme: theme2 }) => theme2.typography.fontSize["4xl"]};
+    font-weight: ${({ theme: theme2 }) => theme2.typography.fontWeight.bold};
+    line-height: 1.15;
+    letter-spacing: -0.02em;
+  }
+
+  &[data-variant="heading-2"] {
+    font-size: ${({ theme: theme2 }) => theme2.typography.fontSize["3xl"]};
+    font-weight: ${({ theme: theme2 }) => theme2.typography.fontWeight.bold};
+    line-height: 1.15;
+    letter-spacing: -0.02em;
+  }
+
+  &[data-variant="heading-3"] {
+    font-size: ${({ theme: theme2 }) => theme2.typography.fontSize["2xl"]};
+    font-weight: ${({ theme: theme2 }) => theme2.typography.fontWeight.bold};
+    line-height: 1.15;
+    letter-spacing: -0.015em;
+  }
+
+  &[data-variant="body-lg"] {
+    font-size: ${({ theme: theme2 }) => theme2.typography.fontSize.lg};
+    font-weight: ${({ theme: theme2 }) => theme2.typography.fontWeight.regular};
+    line-height: 1.4;
+  }
+
+  &[data-variant="body"] {
+    font-size: ${({ theme: theme2 }) => theme2.typography.fontSize.md};
+    font-weight: ${({ theme: theme2 }) => theme2.typography.fontWeight.regular};
+    line-height: 1.4;
+  }
+
+  &[data-variant="body-sm"] {
+    font-size: ${({ theme: theme2 }) => theme2.typography.fontSize.sm};
+    font-weight: ${({ theme: theme2 }) => theme2.typography.fontWeight.regular};
+    line-height: 1.4;
+  }
+
+  &[data-variant="label"] {
+    font-size: ${({ theme: theme2 }) => theme2.typography.fontSize.sm};
+    font-weight: ${({ theme: theme2 }) => theme2.typography.fontWeight.medium};
+    line-height: 1.4;
+  }
+`;
+var variantElements = {
+  "heading-1": "h1",
+  "heading-2": "h2",
+  "heading-3": "h3",
+  "body-lg": "p",
+  body: "p",
+  "body-sm": "p",
+  label: "span"
+};
+var Typography = ({
+  variant = "body",
+  children,
+  ...props
+}) => {
+  const Component = variantElements[variant];
+  return /* @__PURE__ */ jsx(
+    StyledTypography,
+    {
+      as: Component,
+      "data-variant": variant,
+      ...props,
+      children
+    }
+  );
+};
+var typography_default = Typography;
+var StyledSegmentedControl = styled5.div`
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+
+  padding: ${({ theme: theme2 }) => theme2.spacing[1]};
+
+  background: ${({ theme: theme2 }) => theme2.surface.secondary};
+  border: 1px solid ${({ theme: theme2 }) => theme2.border.default};
+  border-radius: ${({ theme: theme2 }) => theme2.radius.full};
+`;
+var StyledSegment = styled5.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  border: 0;
+  border-radius: ${({ theme: theme2 }) => theme2.radius.full};
+
+  background: transparent;
+  color: ${({ theme: theme2 }) => theme2.text.secondary};
+
+  font-family: ${({ theme: theme2 }) => theme2.typography.fontFamily};
+  font-weight: ${({ theme: theme2 }) => theme2.semanticTypography.fontWeight.label};
+  line-height: 1;
+
+  cursor: pointer;
+  user-select: none;
+
+  transition:
+    background-color ${({ theme: theme2 }) => theme2.motionSemantic.interaction}
+      ${({ theme: theme2 }) => theme2.motionSemantic.transition},
+    color ${({ theme: theme2 }) => theme2.motionSemantic.interaction}
+      ${({ theme: theme2 }) => theme2.motionSemantic.transition},
+    box-shadow ${({ theme: theme2 }) => theme2.motionSemantic.interaction}
+      ${({ theme: theme2 }) => theme2.motionSemantic.transition};
+
+  ${({ theme: theme2, size }) => {
+  switch (size) {
+    case "small":
+      return `
+          min-height: 32px;
+          padding: 0 ${theme2.spacing[3]};
+          font-size: ${theme2.semanticTypography.fontSize.bodySm};
+        `;
+    case "large":
+      return `
+          min-height: 44px;
+          padding: 0 ${theme2.spacing[5]};
+          font-size: ${theme2.semanticTypography.fontSize.bodyLg};
+        `;
+    case "medium":
+    default:
+      return `
+          min-height: 36px;
+          padding: 0 ${theme2.spacing[4]};
+          font-size: ${theme2.semanticTypography.fontSize.body};
+        `;
+  }
+}}
+
+  &:hover:not(:disabled) {
+    color: ${({ theme: theme2 }) => theme2.text.primary};
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${({ theme: theme2 }) => theme2.border.focus};
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  &[aria-checked="true"] {
+    background: ${({ theme: theme2 }) => theme2.surface.primary};
+    color: ${({ theme: theme2 }) => theme2.text.primary};
+    box-shadow: ${({ theme: theme2 }) => theme2.elevation.surface};
+  }
+`;
+var SegmentedControl = ({
+  options,
+  value,
+  onChange,
+  size = "medium",
+  disabled = false
+}) => {
+  const refs = useRef([]);
+  const enabledOptions = options.filter(
+    (option) => !option.disabled
+  );
+  const handleKeyDown = (event, currentIndex) => {
+    if (disabled || currentIndex === -1) {
+      return;
+    }
+    let nextIndex;
+    switch (event.key) {
+      case "ArrowRight":
+      case "ArrowDown":
+        nextIndex = (currentIndex + 1) % enabledOptions.length;
+        break;
+      case "ArrowLeft":
+      case "ArrowUp":
+        nextIndex = (currentIndex - 1 + enabledOptions.length) % enabledOptions.length;
+        break;
+      case "Home":
+        nextIndex = 0;
+        break;
+      case "End":
+        nextIndex = enabledOptions.length - 1;
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+    const nextOption = enabledOptions[nextIndex];
+    const originalIndex = options.findIndex(
+      (option) => option.value === nextOption.value
+    );
+    refs.current[originalIndex]?.focus();
+    onChange(nextOption.value);
+  };
+  return /* @__PURE__ */ jsx(
+    StyledSegmentedControl,
+    {
+      role: "radiogroup",
+      "aria-disabled": disabled,
+      children: options.map((option, index) => {
+        const checked = option.value === value;
+        const optionDisabled = disabled || option.disabled;
+        const enabledIndex = enabledOptions.findIndex(
+          (item) => item.value === option.value
+        );
+        return /* @__PURE__ */ jsx(
+          StyledSegment,
+          {
+            ref: (element) => {
+              refs.current[index] = element;
+            },
+            size,
+            type: "button",
+            role: "radio",
+            "aria-checked": checked,
+            tabIndex: checked && !optionDisabled ? 0 : -1,
+            disabled: optionDisabled,
+            onClick: () => onChange(option.value),
+            onKeyDown: (event) => {
+              handleKeyDown(event, enabledIndex);
+            },
+            children: option.label
+          },
+          option.value
+        );
+      })
+    }
+  );
+};
+var segmented_control_default = SegmentedControl;
+var sizeHeight = (size) => {
+  switch (size) {
+    case "small":
+      return 24;
+    case "large":
+      return 48;
+    case "medium":
+    default:
+      return 32;
+  }
+};
+var StyledLogoContainer = styled5("div", {
+  shouldForwardProp: (prop) => prop !== "size"
+})`
+  display: inline-flex;
+  align-items: center;
+  font-family: ${({ theme: theme2 }) => theme2.typography.fontFamily};
+  user-select: none;
+`;
+var StyledSvgIcon = styled5.svg`
+  flex-shrink: 0;
+
+  margin-right: ${({ theme: theme2 }) => theme2.spacing[3]};
+
+  .green-part {
+    fill: #00ff22;
+  }
+  .blue-part {
+    fill: #006fff;
+  }
+
+  ${({ size }) => {
+  switch (size) {
+    case "small":
+      return { width: "24px", height: "24px" };
+    case "large":
+      return { width: "56px", height: "56px" };
+    case "medium":
+    default:
+      return { width: "40px", height: "40px" };
+  }
+}}
+`;
+var StyledBrandText = styled5.span`
+  color: ${({ theme: theme2 }) => theme2.text.primary};
+  font-weight: ${({ theme: theme2 }) => theme2.semanticTypography.fontWeight.label};
+  letter-spacing: -0.5px;
+  line-height: 1;
+
+  ${({ theme: theme2, size }) => {
+  switch (size) {
+    case "small":
+      return { fontSize: theme2.semanticTypography.fontSize.bodyLg };
+    case "large":
+      return { fontSize: theme2.semanticTypography.fontSize.heading1 };
+    case "medium":
+    default:
+      return { fontSize: theme2.semanticTypography.fontSize.heading3 };
+  }
+}}
+`;
+var StyledBrandAccent = styled5.span`
+  font-weight: 700;
+`;
+var StyledPrefixWrapper = styled5.div`
+  display: flex;
+  align-items: center;
+`;
+var StyledDivider = styled5.span`
+  font-weight: 300;
+  line-height: 2;
+  margin: 0 ${({ theme: theme2 }) => theme2.spacing[3]};
+
+  ${({ theme: theme2, size }) => {
+  switch (size) {
+    case "small":
+      return { fontSize: theme2.semanticTypography.fontSize.bodyLg };
+    case "large":
+      return { fontSize: theme2.semanticTypography.fontSize.heading1 };
+    case "medium":
+    default:
+      return { fontSize: theme2.semanticTypography.fontSize.heading3 };
+  }
+}}
+`;
+var StyledDrumContainer = styled5.div`
+  overflow: hidden;
+  position: relative;
+  display: flex;
+  height: ${({ size }) => sizeHeight(size)}px;
+`;
+var StyledDrumTrack = styled5("div", {
+  shouldForwardProp: (prop) => prop !== "size" && prop !== "offset" && prop !== "isScrolling" && prop !== "duration"
+})`
+  display: flex;
+  flex-direction: column;
+  will-change: transform;
+  transform: translateY(${({ size, offset }) => -offset * sizeHeight(size)}px);
+  transition: ${({ isScrolling, duration }) => isScrolling ? `transform ${duration}ms cubic-bezier(0.16, 1, 0.3, 1)` : "none"};
+`;
+var StyledPrefixText = styled5.span`
+  display: block;
+  white-space: nowrap;
+  color: ${({ theme: theme2 }) => theme2.text.primary};
+  font-weight: 200;
+  height: ${({ size }) => sizeHeight(size)}px;
+  line-height: ${({ size }) => sizeHeight(size)}px;
+
+  ${({ theme: theme2, size }) => {
+  switch (size) {
+    case "small":
+      return { fontSize: theme2.semanticTypography.fontSize.bodyLg };
+    case "large":
+      return { fontSize: theme2.semanticTypography.fontSize.heading1 };
+    case "medium":
+    default:
+      return { fontSize: theme2.semanticTypography.fontSize.heading1 };
+  }
+}}
+`;
+var ALL_SERVICES = ["\u0423\u0441\u043B\u0443\u0433\u0438", "\u041E\u0431\u043B\u0430\u043A\u043E", "VPN", "\u0418\u043D\u0444\u0440\u0430\u0441\u0442\u0440\u0443\u043A\u0442\u0443\u0440\u0430", "\u0410\u043D\u0430\u043B\u0438\u0442\u0438\u043A\u0430"];
+var DRUM_ROUNDS = 2;
+var DRUM_DURATION = 1800;
+var shuffle = (source) => {
+  const copy = [...source];
+  for (let i = copy.length - 1; i > 0; i -= 1) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [copy[i], copy[j]] = [copy[j], copy[i]];
+  }
+  return copy;
+};
+var buildDrumList = (target) => {
+  const pool = ALL_SERVICES.filter((item) => item !== target);
+  if (pool.length === 0) return [target];
+  const list = [];
+  let previous = null;
+  for (let round = 0; round < DRUM_ROUNDS; round += 1) {
+    const batch = shuffle(pool);
+    if (previous !== null && batch[0] === previous) {
+      [batch[0], batch[batch.length - 1]] = [batch[batch.length - 1], batch[0]];
+    }
+    list.push(...batch);
+    previous = batch[batch.length - 1];
+  }
+  list.push(target);
+  return list;
+};
+var Logo = ({
+  service = "",
+  animate = false,
+  size = "medium",
+  ...props
+}) => {
+  const [prevService, setPrevService] = useState(service);
+  const [prevAnimate, setPrevAnimate] = useState(animate);
+  const [items, setItems] = useState(() => service ? [service] : []);
+  const [offset, setOffset] = useState(0);
+  const [isScrolling, setIsScrolling] = useState(false);
+  const [triggerAnimation, setTriggerAnimation] = useState(false);
+  if (service !== prevService || animate !== prevAnimate) {
+    setPrevService(service);
+    setPrevAnimate(animate);
+    if (!animate || !service) {
+      setItems(service ? [service] : []);
+      setOffset(0);
+      setIsScrolling(false);
+      setTriggerAnimation(false);
+    } else {
+      const list = buildDrumList(service);
+      setItems(list);
+      setOffset(0);
+      setIsScrolling(false);
+      setTriggerAnimation(true);
+    }
+  }
+  useEffect(() => {
+    if (!triggerAnimation) {
+      return;
+    }
+    let raf1 = 0;
+    let raf2 = 0;
+    raf1 = requestAnimationFrame(() => {
+      raf2 = requestAnimationFrame(() => {
+        setIsScrolling(true);
+        setOffset(items.length - 1);
+        setTriggerAnimation(false);
+      });
+    });
+    return () => {
+      cancelAnimationFrame(raf1);
+      cancelAnimationFrame(raf2);
+    };
+  }, [triggerAnimation, items.length]);
+  return /* @__PURE__ */ jsxs(StyledLogoContainer, { size, ...props, children: [
+    /* @__PURE__ */ jsxs(
+      StyledSvgIcon,
+      {
+        size,
+        viewBox: "0 0 480 481",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: [
+          /* @__PURE__ */ jsx("path", { className: "green-part", d: "M10.5688 180.779C10.5688 148.829 36.4688 122.929 68.418 122.929V122.929C84.3926 122.929 97.3426 135.879 97.3426 151.854V480.593H60.5689C32.9546 480.593 10.5688 458.207 10.5688 430.593V180.779Z" }),
+          /* @__PURE__ */ jsx("path", { className: "green-part", d: "M55.1756 211.45C34.6709 186.556 38.229 149.753 63.1229 129.248V129.248C71.0889 122.687 82.8658 123.825 89.4273 131.791L287.986 372.853L267.082 390.072C245.767 407.629 214.256 404.582 196.699 383.267L55.1756 211.45Z" }),
+          /* @__PURE__ */ jsx("circle", { className: "green-part", cx: "53.9553", cy: "53.9553", r: "53.9553" }),
+          /* @__PURE__ */ jsx("path", { className: "blue-part", d: "M469.323 180.779C469.323 148.829 443.423 122.929 411.474 122.929V122.929C395.499 122.929 382.549 135.879 382.549 151.854V480.593H419.323C446.937 480.593 469.323 458.207 469.323 430.593V180.779Z" }),
+          /* @__PURE__ */ jsx("path", { className: "blue-part", d: "M429.17 206.041C447.214 184.134 444.083 151.748 422.177 133.703V133.703C411.223 124.681 395.03 126.247 386.008 137.2L209.097 351.981C195.564 368.411 197.912 392.701 214.342 406.234V406.234C230.772 419.767 255.062 417.418 268.595 400.988L429.17 206.041Z" }),
+          /* @__PURE__ */ jsx("circle", { className: "blue-part", cx: "53.9553", cy: "53.9553", r: "53.9553", transform: "matrix(-1 0 0 1 479.891 0)" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(StyledBrandText, { size, children: /* @__PURE__ */ jsx(StyledBrandAccent, { children: "ingAmigo" }) }),
+    items.length > 0 && /* @__PURE__ */ jsxs(StyledPrefixWrapper, { children: [
+      /* @__PURE__ */ jsx(StyledDivider, { size, children: "|" }),
+      /* @__PURE__ */ jsx(StyledDrumContainer, { size, children: /* @__PURE__ */ jsx(
+        StyledDrumTrack,
+        {
+          size,
+          offset,
+          isScrolling,
+          duration: DRUM_DURATION,
+          children: items.map((item, index) => /* @__PURE__ */ jsx(StyledPrefixText, { size, children: item }, `${item}-${index}`))
+        }
+      ) })
+    ] })
+  ] });
+};
+var logo_default = Logo;
+
+export { button_default as Button, input_default as Input, logo_default as Logo, segmented_control_default as SegmentedControl, ThemeProvider, typography_default as Typography, theme };
+//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map