@semiont/react-ui 0.5.7 → 0.5.9

package/dist/integrations/styled-components-theme.js

@@ -0,0 +1,353 @@
+'use client';
+import {
+  tokens
+} from "../chunk-QT7LYM72.js";
+import "../chunk-YBGN4ACY.js";
+
+// src/integrations/styled-components-theme.ts
+import { css } from "styled-components";
+var semiontTheme = {
+  colors: {
+    ...tokens.colors,
+    // Flatten semantic colors for easier access
+    error: tokens.colors.semantic.error,
+    errorLight: tokens.colors.semantic.errorLight,
+    errorDark: tokens.colors.semantic.errorDark,
+    warning: tokens.colors.semantic.warning,
+    warningLight: tokens.colors.semantic.warningLight,
+    warningDark: tokens.colors.semantic.warningDark,
+    success: tokens.colors.semantic.success,
+    successLight: tokens.colors.semantic.successLight,
+    successDark: tokens.colors.semantic.successDark,
+    info: tokens.colors.semantic.info,
+    infoLight: tokens.colors.semantic.infoLight,
+    infoDark: tokens.colors.semantic.infoDark
+  },
+  spacing: tokens.spacing,
+  typography: tokens.typography,
+  borderRadius: tokens.borderRadius,
+  shadows: tokens.shadows,
+  transitions: tokens.transitions,
+  breakpoints: tokens.breakpoints
+};
+var semiontMixins = {
+  /**
+   * Button base styles
+   */
+  buttonBase: css`
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-family: ${(props) => props.theme.typography.fontFamily.sans};
+    font-weight: ${(props) => props.theme.typography.fontWeight.medium};
+    line-height: ${(props) => props.theme.typography.lineHeight.snug};
+    border: none;
+    outline: none;
+    cursor: pointer;
+    transition: all ${(props) => props.theme.transitions.duration.base} ${(props) => props.theme.transitions.timing.ease};
+    user-select: none;
+    white-space: nowrap;
+    text-decoration: none;
+
+    &:focus-visible {
+      outline: 2px solid ${(props) => props.theme.colors.primary[500]};
+      outline-offset: 2px;
+    }
+
+    &:disabled,
+    &[data-disabled="true"] {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+  `,
+  /**
+   * Button variant styles
+   */
+  buttonVariant: (variant) => css`
+    ${variant === "primary" && css`
+      background-color: ${(props) => props.theme.colors.primary[500]};
+      color: ${(props) => props.theme.colors.neutral[0]};
+
+      &:hover:not(:disabled):not([data-disabled="true"]) {
+        background-color: ${(props) => props.theme.colors.primary[600]};
+      }
+
+      &:active:not(:disabled):not([data-disabled="true"]),
+      &[data-active="true"]:not(:disabled):not([data-disabled="true"]) {
+        background-color: ${(props) => props.theme.colors.primary[700]};
+      }
+    `}
+
+    ${variant === "secondary" && css`
+      background-color: ${(props) => props.theme.colors.neutral[100]};
+      color: ${(props) => props.theme.colors.neutral[900]};
+
+      &:hover:not(:disabled):not([data-disabled="true"]) {
+        background-color: ${(props) => props.theme.colors.neutral[200]};
+      }
+
+      &:active:not(:disabled):not([data-disabled="true"]),
+      &[data-active="true"]:not(:disabled):not([data-disabled="true"]) {
+        background-color: ${(props) => props.theme.colors.neutral[300]};
+      }
+    `}
+
+    ${variant === "tertiary" && css`
+      background-color: transparent;
+      color: ${(props) => props.theme.colors.primary[600]};
+      box-shadow: inset 0 0 0 1px ${(props) => props.theme.colors.primary[200]};
+
+      &:hover:not(:disabled):not([data-disabled="true"]) {
+        background-color: ${(props) => props.theme.colors.primary[50]};
+        box-shadow: inset 0 0 0 1px ${(props) => props.theme.colors.primary[300]};
+      }
+
+      &:active:not(:disabled):not([data-disabled="true"]),
+      &[data-active="true"]:not(:disabled):not([data-disabled="true"]) {
+        background-color: ${(props) => props.theme.colors.primary[100]};
+        box-shadow: inset 0 0 0 1px ${(props) => props.theme.colors.primary[400]};
+      }
+    `}
+
+    ${variant === "danger" && css`
+      background-color: ${(props) => props.theme.colors.error};
+      color: ${(props) => props.theme.colors.neutral[0]};
+
+      &:hover:not(:disabled):not([data-disabled="true"]) {
+        background-color: ${(props) => props.theme.colors.errorDark};
+      }
+
+      &:active:not(:disabled):not([data-disabled="true"]),
+      &[data-active="true"]:not(:disabled):not([data-disabled="true"]) {
+        background-color: ${(props) => props.theme.colors.errorDark};
+        filter: brightness(0.9);
+      }
+    `}
+
+    ${variant === "warning" && css`
+      background-color: ${(props) => props.theme.colors.warning};
+      color: ${(props) => props.theme.colors.neutral[900]};
+
+      &:hover:not(:disabled):not([data-disabled="true"]) {
+        background-color: ${(props) => props.theme.colors.warningDark};
+      }
+
+      &:active:not(:disabled):not([data-disabled="true"]),
+      &[data-active="true"]:not(:disabled):not([data-disabled="true"]) {
+        background-color: ${(props) => props.theme.colors.warningDark};
+        filter: brightness(0.9);
+      }
+    `}
+
+    ${variant === "ghost" && css`
+      background-color: transparent;
+      color: ${(props) => props.theme.colors.text.primary};
+
+      &:hover:not(:disabled):not([data-disabled="true"]) {
+        background-color: ${(props) => props.theme.colors.neutral[100]};
+      }
+
+      &:active:not(:disabled):not([data-disabled="true"]),
+      &[data-active="true"]:not(:disabled):not([data-disabled="true"]) {
+        background-color: ${(props) => props.theme.colors.neutral[200]};
+      }
+    `}
+  `,
+  /**
+   * Button size styles
+   */
+  buttonSize: (size) => css`
+    ${size === "xs" && css`
+      padding: ${(props) => props.theme.spacing.xs} ${(props) => props.theme.spacing.sm};
+      font-size: ${(props) => props.theme.typography.fontSize.xs};
+      border-radius: ${(props) => props.theme.borderRadius.sm};
+      min-height: 1.75rem;
+    `}
+
+    ${size === "sm" && css`
+      padding: ${(props) => props.theme.spacing.xs} ${(props) => props.theme.spacing.md};
+      font-size: ${(props) => props.theme.typography.fontSize.sm};
+      border-radius: ${(props) => props.theme.borderRadius.base};
+      min-height: 2rem;
+    `}
+
+    ${size === "md" && css`
+      padding: ${(props) => props.theme.spacing.sm} ${(props) => props.theme.spacing.lg};
+      font-size: ${(props) => props.theme.typography.fontSize.base};
+      border-radius: ${(props) => props.theme.borderRadius.md};
+      min-height: 2.5rem;
+    `}
+
+    ${size === "lg" && css`
+      padding: ${(props) => props.theme.spacing.sm} ${(props) => props.theme.spacing.xl};
+      font-size: ${(props) => props.theme.typography.fontSize.lg};
+      border-radius: ${(props) => props.theme.borderRadius.md};
+      min-height: 3rem;
+    `}
+
+    ${size === "xl" && css`
+      padding: ${(props) => props.theme.spacing.md} ${(props) => props.theme.spacing["2xl"]};
+      font-size: ${(props) => props.theme.typography.fontSize.xl};
+      border-radius: ${(props) => props.theme.borderRadius.lg};
+      min-height: 3.5rem;
+    `}
+  `,
+  /**
+   * Focus ring styles
+   */
+  focusRing: (color) => css`
+    &:focus-visible {
+      outline: 2px solid ${(props) => color || props.theme.colors.primary[500]};
+      outline-offset: 2px;
+    }
+  `,
+  /**
+   * Truncate text with ellipsis
+   */
+  truncate: css`
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  `,
+  /**
+   * Screen reader only
+   */
+  srOnly: css`
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  `,
+  /**
+   * Responsive media query helpers
+   */
+  media: {
+    sm: (styles) => css`
+      @media (min-width: ${(props) => props.theme.breakpoints.sm}) {
+        ${styles}
+      }
+    `,
+    md: (styles) => css`
+      @media (min-width: ${(props) => props.theme.breakpoints.md}) {
+        ${styles}
+      }
+    `,
+    lg: (styles) => css`
+      @media (min-width: ${(props) => props.theme.breakpoints.lg}) {
+        ${styles}
+      }
+    `,
+    xl: (styles) => css`
+      @media (min-width: ${(props) => props.theme.breakpoints.xl}) {
+        ${styles}
+      }
+    `,
+    "2xl": (styles) => css`
+      @media (min-width: ${(props) => props.theme.breakpoints["2xl"]}) {
+        ${styles}
+      }
+    `
+  }
+};
+var SemiontGlobalStyles = css`
+  /* Import CSS variables */
+  :root {
+    /* Primary colors */
+    ${Object.entries(tokens.colors.primary).map(
+  ([key, value]) => `--semiont-color-primary-${key}: ${value};`
+).join("\n")}
+
+    /* Secondary colors */
+    ${Object.entries(tokens.colors.secondary).map(
+  ([key, value]) => `--semiont-color-secondary-${key}: ${value};`
+).join("\n")}
+
+    /* Neutral colors */
+    ${Object.entries(tokens.colors.neutral).map(
+  ([key, value]) => `--semiont-color-neutral-${key}: ${value};`
+).join("\n")}
+
+    /* Semantic colors */
+    ${Object.entries(tokens.colors.semantic).map(([key, value]) => {
+  const kebabKey = key.replace(/([A-Z])/g, "-$1").toLowerCase();
+  return `--semiont-color-${kebabKey}: ${value};`;
+}).join("\n")}
+
+    /* Spacing */
+    ${Object.entries(tokens.spacing).map(
+  ([key, value]) => `--semiont-spacing-${key}: ${value};`
+).join("\n")}
+
+    /* Typography */
+    --semiont-font-sans: ${tokens.typography.fontFamily.sans};
+    --semiont-font-mono: ${tokens.typography.fontFamily.mono};
+
+    /* Font sizes */
+    ${Object.entries(tokens.typography.fontSize).map(
+  ([key, value]) => `--semiont-text-${key}: ${value};`
+).join("\n")}
+
+    /* Font weights */
+    ${Object.entries(tokens.typography.fontWeight).map(
+  ([key, value]) => `--semiont-font-${key}: ${value};`
+).join("\n")}
+
+    /* Border radius */
+    ${Object.entries(tokens.borderRadius).map(
+  ([key, value]) => `--semiont-radius-${key}: ${value};`
+).join("\n")}
+
+    /* Shadows */
+    ${Object.entries(tokens.shadows).map(
+  ([key, value]) => `--semiont-shadow-${key}: ${value};`
+).join("\n")}
+
+    /* Transitions */
+    ${Object.entries(tokens.transitions.duration).map(
+  ([key, value]) => `--semiont-duration-${key}: ${value};`
+).join("\n")}
+  }
+`;
+function createStyledSemiontButton(styled) {
+  return styled.button.attrs((props) => ({
+    "data-variant": props.variant,
+    "data-size": props.size,
+    "data-loading": props.loading ? "true" : void 0,
+    "data-full-width": props.fullWidth ? "true" : void 0,
+    "data-icon-only": props.iconOnly ? "true" : void 0,
+    "data-active": props.active ? "true" : void 0,
+    "data-disabled": props.disabled ? "true" : void 0,
+    className: `semiont-button ${props.className || ""}`.trim()
+  }))`
+    ${semiontMixins.buttonBase}
+    ${(props) => semiontMixins.buttonVariant(props.variant || "primary")}
+    ${(props) => semiontMixins.buttonSize(props.size || "md")}
+
+    ${(props) => props.fullWidth && css`
+      width: 100%;
+    `}
+
+    ${(props) => props.loading && css`
+      pointer-events: none;
+      opacity: 0.75;
+    `}
+
+    ${(props) => props.iconOnly && css`
+      padding: ${props.theme.spacing.sm};
+      aspect-ratio: 1;
+    `}
+  `;
+}
+export {
+  SemiontGlobalStyles,
+  createStyledSemiontButton,
+  semiontMixins,
+  semiontTheme
+};
+//# sourceMappingURL=styled-components-theme.js.map

package/dist/integrations/styled-components-theme.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/integrations/styled-components-theme.ts"],"sourcesContent":["/**\n * Styled Components Theme for Semiont Components\n *\n * This provides a complete theme object and utilities for using\n * Semiont components with styled-components or emotion.\n */\n\nimport { tokens } from '../design-tokens';\nimport { css, DefaultTheme } from 'styled-components';\n\n/**\n * Semiont theme object for styled-components\n */\nexport const semiontTheme: DefaultTheme = {\n  colors: {\n    ...tokens.colors,\n    // Flatten semantic colors for easier access\n    error: tokens.colors.semantic.error,\n    errorLight: tokens.colors.semantic.errorLight,\n    errorDark: tokens.colors.semantic.errorDark,\n    warning: tokens.colors.semantic.warning,\n    warningLight: tokens.colors.semantic.warningLight,\n    warningDark: tokens.colors.semantic.warningDark,\n    success: tokens.colors.semantic.success,\n    successLight: tokens.colors.semantic.successLight,\n    successDark: tokens.colors.semantic.successDark,\n    info: tokens.colors.semantic.info,\n    infoLight: tokens.colors.semantic.infoLight,\n    infoDark: tokens.colors.semantic.infoDark,\n  },\n  spacing: tokens.spacing,\n  typography: tokens.typography,\n  borderRadius: tokens.borderRadius,\n  shadows: tokens.shadows,\n  transitions: tokens.transitions,\n  breakpoints: tokens.breakpoints,\n};\n\n/**\n * Type augmentation for styled-components DefaultTheme\n */\ndeclare module 'styled-components' {\n  export interface DefaultTheme {\n    colors: typeof tokens.colors & {\n      error: string;\n      errorLight: string;\n      errorDark: string;\n      warning: string;\n      warningLight: string;\n      warningDark: string;\n      success: string;\n      successLight: string;\n      successDark: string;\n      info: string;\n      infoLight: string;\n      infoDark: string;\n    };\n    spacing: typeof tokens.spacing;\n    typography: typeof tokens.typography;\n    borderRadius: typeof tokens.borderRadius;\n    shadows: typeof tokens.shadows;\n    transitions: typeof tokens.transitions;\n    breakpoints: typeof tokens.breakpoints;\n  }\n}\n\n/**\n * CSS mixins for common component patterns\n */\nexport const semiontMixins = {\n  /**\n   * Button base styles\n   */\n  buttonBase: css`\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-family: ${props => props.theme.typography.fontFamily.sans};\n    font-weight: ${props => props.theme.typography.fontWeight.medium};\n    line-height: ${props => props.theme.typography.lineHeight.snug};\n    border: none;\n    outline: none;\n    cursor: pointer;\n    transition: all ${props => props.theme.transitions.duration.base} ${props => props.theme.transitions.timing.ease};\n    user-select: none;\n    white-space: nowrap;\n    text-decoration: none;\n\n    &:focus-visible {\n      outline: 2px solid ${props => props.theme.colors.primary[500]};\n      outline-offset: 2px;\n    }\n\n    &:disabled,\n    &[data-disabled=\"true\"] {\n      cursor: not-allowed;\n      opacity: 0.5;\n    }\n  `,\n\n  /**\n   * Button variant styles\n   */\n  buttonVariant: (variant: string) => css`\n    ${variant === 'primary' && css`\n      background-color: ${props => props.theme.colors.primary[500]};\n      color: ${props => props.theme.colors.neutral[0]};\n\n      &:hover:not(:disabled):not([data-disabled=\"true\"]) {\n        background-color: ${props => props.theme.colors.primary[600]};\n      }\n\n      &:active:not(:disabled):not([data-disabled=\"true\"]),\n      &[data-active=\"true\"]:not(:disabled):not([data-disabled=\"true\"]) {\n        background-color: ${props => props.theme.colors.primary[700]};\n      }\n    `}\n\n    ${variant === 'secondary' && css`\n      background-color: ${props => props.theme.colors.neutral[100]};\n      color: ${props => props.theme.colors.neutral[900]};\n\n      &:hover:not(:disabled):not([data-disabled=\"true\"]) {\n        background-color: ${props => props.theme.colors.neutral[200]};\n      }\n\n      &:active:not(:disabled):not([data-disabled=\"true\"]),\n      &[data-active=\"true\"]:not(:disabled):not([data-disabled=\"true\"]) {\n        background-color: ${props => props.theme.colors.neutral[300]};\n      }\n    `}\n\n    ${variant === 'tertiary' && css`\n      background-color: transparent;\n      color: ${props => props.theme.colors.primary[600]};\n      box-shadow: inset 0 0 0 1px ${props => props.theme.colors.primary[200]};\n\n      &:hover:not(:disabled):not([data-disabled=\"true\"]) {\n        background-color: ${props => props.theme.colors.primary[50]};\n        box-shadow: inset 0 0 0 1px ${props => props.theme.colors.primary[300]};\n      }\n\n      &:active:not(:disabled):not([data-disabled=\"true\"]),\n      &[data-active=\"true\"]:not(:disabled):not([data-disabled=\"true\"]) {\n        background-color: ${props => props.theme.colors.primary[100]};\n        box-shadow: inset 0 0 0 1px ${props => props.theme.colors.primary[400]};\n      }\n    `}\n\n    ${variant === 'danger' && css`\n      background-color: ${props => props.theme.colors.error};\n      color: ${props => props.theme.colors.neutral[0]};\n\n      &:hover:not(:disabled):not([data-disabled=\"true\"]) {\n        background-color: ${props => props.theme.colors.errorDark};\n      }\n\n      &:active:not(:disabled):not([data-disabled=\"true\"]),\n      &[data-active=\"true\"]:not(:disabled):not([data-disabled=\"true\"]) {\n        background-color: ${props => props.theme.colors.errorDark};\n        filter: brightness(0.9);\n      }\n    `}\n\n    ${variant === 'warning' && css`\n      background-color: ${props => props.theme.colors.warning};\n      color: ${props => props.theme.colors.neutral[900]};\n\n      &:hover:not(:disabled):not([data-disabled=\"true\"]) {\n        background-color: ${props => props.theme.colors.warningDark};\n      }\n\n      &:active:not(:disabled):not([data-disabled=\"true\"]),\n      &[data-active=\"true\"]:not(:disabled):not([data-disabled=\"true\"]) {\n        background-color: ${props => props.theme.colors.warningDark};\n        filter: brightness(0.9);\n      }\n    `}\n\n    ${variant === 'ghost' && css`\n      background-color: transparent;\n      color: ${props => props.theme.colors.text.primary};\n\n      &:hover:not(:disabled):not([data-disabled=\"true\"]) {\n        background-color: ${props => props.theme.colors.neutral[100]};\n      }\n\n      &:active:not(:disabled):not([data-disabled=\"true\"]),\n      &[data-active=\"true\"]:not(:disabled):not([data-disabled=\"true\"]) {\n        background-color: ${props => props.theme.colors.neutral[200]};\n      }\n    `}\n  `,\n\n  /**\n   * Button size styles\n   */\n  buttonSize: (size: string) => css`\n    ${size === 'xs' && css`\n      padding: ${props => props.theme.spacing.xs} ${props => props.theme.spacing.sm};\n      font-size: ${props => props.theme.typography.fontSize.xs};\n      border-radius: ${props => props.theme.borderRadius.sm};\n      min-height: 1.75rem;\n    `}\n\n    ${size === 'sm' && css`\n      padding: ${props => props.theme.spacing.xs} ${props => props.theme.spacing.md};\n      font-size: ${props => props.theme.typography.fontSize.sm};\n      border-radius: ${props => props.theme.borderRadius.base};\n      min-height: 2rem;\n    `}\n\n    ${size === 'md' && css`\n      padding: ${props => props.theme.spacing.sm} ${props => props.theme.spacing.lg};\n      font-size: ${props => props.theme.typography.fontSize.base};\n      border-radius: ${props => props.theme.borderRadius.md};\n      min-height: 2.5rem;\n    `}\n\n    ${size === 'lg' && css`\n      padding: ${props => props.theme.spacing.sm} ${props => props.theme.spacing.xl};\n      font-size: ${props => props.theme.typography.fontSize.lg};\n      border-radius: ${props => props.theme.borderRadius.md};\n      min-height: 3rem;\n    `}\n\n    ${size === 'xl' && css`\n      padding: ${props => props.theme.spacing.md} ${props => props.theme.spacing['2xl']};\n      font-size: ${props => props.theme.typography.fontSize.xl};\n      border-radius: ${props => props.theme.borderRadius.lg};\n      min-height: 3.5rem;\n    `}\n  `,\n\n  /**\n   * Focus ring styles\n   */\n  focusRing: (color?: string) => css`\n    &:focus-visible {\n      outline: 2px solid ${props => color || props.theme.colors.primary[500]};\n      outline-offset: 2px;\n    }\n  `,\n\n  /**\n   * Truncate text with ellipsis\n   */\n  truncate: css`\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n\n  /**\n   * Screen reader only\n   */\n  srOnly: css`\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0;\n  `,\n\n  /**\n   * Responsive media query helpers\n   */\n  media: {\n    sm: (styles: any) => css`\n      @media (min-width: ${props => props.theme.breakpoints.sm}) {\n        ${styles}\n      }\n    `,\n    md: (styles: any) => css`\n      @media (min-width: ${props => props.theme.breakpoints.md}) {\n        ${styles}\n      }\n    `,\n    lg: (styles: any) => css`\n      @media (min-width: ${props => props.theme.breakpoints.lg}) {\n        ${styles}\n      }\n    `,\n    xl: (styles: any) => css`\n      @media (min-width: ${props => props.theme.breakpoints.xl}) {\n        ${styles}\n      }\n    `,\n    '2xl': (styles: any) => css`\n      @media (min-width: ${props => props.theme.breakpoints['2xl']}) {\n        ${styles}\n      }\n    `,\n  },\n};\n\n/**\n * Global styles for Semiont components\n */\nexport const SemiontGlobalStyles = css`\n  /* Import CSS variables */\n  :root {\n    /* Primary colors */\n    ${Object.entries(tokens.colors.primary).map(([key, value]) =>\n      `--semiont-color-primary-${key}: ${value};`\n    ).join('\\n')}\n\n    /* Secondary colors */\n    ${Object.entries(tokens.colors.secondary).map(([key, value]) =>\n      `--semiont-color-secondary-${key}: ${value};`\n    ).join('\\n')}\n\n    /* Neutral colors */\n    ${Object.entries(tokens.colors.neutral).map(([key, value]) =>\n      `--semiont-color-neutral-${key}: ${value};`\n    ).join('\\n')}\n\n    /* Semantic colors */\n    ${Object.entries(tokens.colors.semantic).map(([key, value]) => {\n      const kebabKey = key.replace(/([A-Z])/g, '-$1').toLowerCase();\n      return `--semiont-color-${kebabKey}: ${value};`;\n    }).join('\\n')}\n\n    /* Spacing */\n    ${Object.entries(tokens.spacing).map(([key, value]) =>\n      `--semiont-spacing-${key}: ${value};`\n    ).join('\\n')}\n\n    /* Typography */\n    --semiont-font-sans: ${tokens.typography.fontFamily.sans};\n    --semiont-font-mono: ${tokens.typography.fontFamily.mono};\n\n    /* Font sizes */\n    ${Object.entries(tokens.typography.fontSize).map(([key, value]) =>\n      `--semiont-text-${key}: ${value};`\n    ).join('\\n')}\n\n    /* Font weights */\n    ${Object.entries(tokens.typography.fontWeight).map(([key, value]) =>\n      `--semiont-font-${key}: ${value};`\n    ).join('\\n')}\n\n    /* Border radius */\n    ${Object.entries(tokens.borderRadius).map(([key, value]) =>\n      `--semiont-radius-${key}: ${value};`\n    ).join('\\n')}\n\n    /* Shadows */\n    ${Object.entries(tokens.shadows).map(([key, value]) =>\n      `--semiont-shadow-${key}: ${value};`\n    ).join('\\n')}\n\n    /* Transitions */\n    ${Object.entries(tokens.transitions.duration).map(([key, value]) =>\n      `--semiont-duration-${key}: ${value};`\n    ).join('\\n')}\n  }\n`;\n\n/**\n * Helper function to create styled Semiont components\n *\n * Usage:\n * ```tsx\n * import styled from 'styled-components';\n * import { createStyledSemiontButton } from '@semiont/react-ui/integrations';\n *\n * const StyledButton = createStyledSemiontButton(styled);\n * ```\n */\nexport function createStyledSemiontButton(styled: any) {\n  return styled.button.attrs((props: any) => ({\n    'data-variant': props.variant,\n    'data-size': props.size,\n    'data-loading': props.loading ? 'true' : undefined,\n    'data-full-width': props.fullWidth ? 'true' : undefined,\n    'data-icon-only': props.iconOnly ? 'true' : undefined,\n    'data-active': props.active ? 'true' : undefined,\n    'data-disabled': props.disabled ? 'true' : undefined,\n    className: `semiont-button ${props.className || ''}`.trim(),\n  }))`\n    ${semiontMixins.buttonBase}\n    ${(props: any) => semiontMixins.buttonVariant(props.variant || 'primary')}\n    ${(props: any) => semiontMixins.buttonSize(props.size || 'md')}\n\n    ${(props: any) => props.fullWidth && css`\n      width: 100%;\n    `}\n\n    ${(props: any) => props.loading && css`\n      pointer-events: none;\n      opacity: 0.75;\n    `}\n\n    ${(props: any) => props.iconOnly && css`\n      padding: ${props.theme.spacing.sm};\n      aspect-ratio: 1;\n    `}\n  `;\n}"],"mappings":";;;;;;;AAQA,SAAS,WAAyB;AAK3B,IAAM,eAA6B;AAAA,EACxC,QAAQ;AAAA,IACN,GAAG,OAAO;AAAA;AAAA,IAEV,OAAO,OAAO,OAAO,SAAS;AAAA,IAC9B,YAAY,OAAO,OAAO,SAAS;AAAA,IACnC,WAAW,OAAO,OAAO,SAAS;AAAA,IAClC,SAAS,OAAO,OAAO,SAAS;AAAA,IAChC,cAAc,OAAO,OAAO,SAAS;AAAA,IACrC,aAAa,OAAO,OAAO,SAAS;AAAA,IACpC,SAAS,OAAO,OAAO,SAAS;AAAA,IAChC,cAAc,OAAO,OAAO,SAAS;AAAA,IACrC,aAAa,OAAO,OAAO,SAAS;AAAA,IACpC,MAAM,OAAO,OAAO,SAAS;AAAA,IAC7B,WAAW,OAAO,OAAO,SAAS;AAAA,IAClC,UAAU,OAAO,OAAO,SAAS;AAAA,EACnC;AAAA,EACA,SAAS,OAAO;AAAA,EAChB,YAAY,OAAO;AAAA,EACnB,cAAc,OAAO;AAAA,EACrB,SAAS,OAAO;AAAA,EAChB,aAAa,OAAO;AAAA,EACpB,aAAa,OAAO;AACtB;AAiCO,IAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA,EAI3B,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,mBAKK,WAAS,MAAM,MAAM,WAAW,WAAW,IAAI;AAAA,mBAC/C,WAAS,MAAM,MAAM,WAAW,WAAW,MAAM;AAAA,mBACjD,WAAS,MAAM,MAAM,WAAW,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA,sBAI5C,WAAS,MAAM,MAAM,YAAY,SAAS,IAAI,IAAI,WAAS,MAAM,MAAM,YAAY,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAMzF,WAAS,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAcjE,eAAe,CAAC,YAAoB;AAAA,MAChC,YAAY,aAAa;AAAA,0BACL,WAAS,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,eACnD,WAAS,MAAM,MAAM,OAAO,QAAQ,CAAC,CAAC;AAAA;AAAA;AAAA,4BAGzB,WAAS,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,4BAKxC,WAAS,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,KAE/D;AAAA;AAAA,MAEC,YAAY,eAAe;AAAA,0BACP,WAAS,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,eACnD,WAAS,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA,4BAG3B,WAAS,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,4BAKxC,WAAS,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,KAE/D;AAAA;AAAA,MAEC,YAAY,cAAc;AAAA;AAAA,eAEjB,WAAS,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,oCACnB,WAAS,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA,4BAGhD,WAAS,MAAM,MAAM,OAAO,QAAQ,EAAE,CAAC;AAAA,sCAC7B,WAAS,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,4BAKlD,WAAS,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,sCAC9B,WAAS,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,KAEzE;AAAA;AAAA,MAEC,YAAY,YAAY;AAAA,0BACJ,WAAS,MAAM,MAAM,OAAO,KAAK;AAAA,eAC5C,WAAS,MAAM,MAAM,OAAO,QAAQ,CAAC,CAAC;AAAA;AAAA;AAAA,4BAGzB,WAAS,MAAM,MAAM,OAAO,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,4BAKrC,WAAS,MAAM,MAAM,OAAO,SAAS;AAAA;AAAA;AAAA,KAG5D;AAAA;AAAA,MAEC,YAAY,aAAa;AAAA,0BACL,WAAS,MAAM,MAAM,OAAO,OAAO;AAAA,eAC9C,WAAS,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA,4BAG3B,WAAS,MAAM,MAAM,OAAO,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,4BAKvC,WAAS,MAAM,MAAM,OAAO,WAAW;AAAA;AAAA;AAAA,KAG9D;AAAA;AAAA,MAEC,YAAY,WAAW;AAAA;AAAA,eAEd,WAAS,MAAM,MAAM,OAAO,KAAK,OAAO;AAAA;AAAA;AAAA,4BAG3B,WAAS,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,4BAKxC,WAAS,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,KAE/D;AAAA;AAAA;AAAA;AAAA;AAAA,EAMH,YAAY,CAAC,SAAiB;AAAA,MAC1B,SAAS,QAAQ;AAAA,iBACN,WAAS,MAAM,MAAM,QAAQ,EAAE,IAAI,WAAS,MAAM,MAAM,QAAQ,EAAE;AAAA,mBAChE,WAAS,MAAM,MAAM,WAAW,SAAS,EAAE;AAAA,uBACvC,WAAS,MAAM,MAAM,aAAa,EAAE;AAAA;AAAA,KAEtD;AAAA;AAAA,MAEC,SAAS,QAAQ;AAAA,iBACN,WAAS,MAAM,MAAM,QAAQ,EAAE,IAAI,WAAS,MAAM,MAAM,QAAQ,EAAE;AAAA,mBAChE,WAAS,MAAM,MAAM,WAAW,SAAS,EAAE;AAAA,uBACvC,WAAS,MAAM,MAAM,aAAa,IAAI;AAAA;AAAA,KAExD;AAAA;AAAA,MAEC,SAAS,QAAQ;AAAA,iBACN,WAAS,MAAM,MAAM,QAAQ,EAAE,IAAI,WAAS,MAAM,MAAM,QAAQ,EAAE;AAAA,mBAChE,WAAS,MAAM,MAAM,WAAW,SAAS,IAAI;AAAA,uBACzC,WAAS,MAAM,MAAM,aAAa,EAAE;AAAA;AAAA,KAEtD;AAAA;AAAA,MAEC,SAAS,QAAQ;AAAA,iBACN,WAAS,MAAM,MAAM,QAAQ,EAAE,IAAI,WAAS,MAAM,MAAM,QAAQ,EAAE;AAAA,mBAChE,WAAS,MAAM,MAAM,WAAW,SAAS,EAAE;AAAA,uBACvC,WAAS,MAAM,MAAM,aAAa,EAAE;AAAA;AAAA,KAEtD;AAAA;AAAA,MAEC,SAAS,QAAQ;AAAA,iBACN,WAAS,MAAM,MAAM,QAAQ,EAAE,IAAI,WAAS,MAAM,MAAM,QAAQ,KAAK,CAAC;AAAA,mBACpE,WAAS,MAAM,MAAM,WAAW,SAAS,EAAE;AAAA,uBACvC,WAAS,MAAM,MAAM,aAAa,EAAE;AAAA;AAAA,KAEtD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMH,WAAW,CAAC,UAAmB;AAAA;AAAA,2BAEN,WAAS,SAAS,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQ1E,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASV,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAeR,OAAO;AAAA,IACL,IAAI,CAAC,WAAgB;AAAA,2BACE,WAAS,MAAM,MAAM,YAAY,EAAE;AAAA,UACpD,MAAM;AAAA;AAAA;AAAA,IAGZ,IAAI,CAAC,WAAgB;AAAA,2BACE,WAAS,MAAM,MAAM,YAAY,EAAE;AAAA,UACpD,MAAM;AAAA;AAAA;AAAA,IAGZ,IAAI,CAAC,WAAgB;AAAA,2BACE,WAAS,MAAM,MAAM,YAAY,EAAE;AAAA,UACpD,MAAM;AAAA;AAAA;AAAA,IAGZ,IAAI,CAAC,WAAgB;AAAA,2BACE,WAAS,MAAM,MAAM,YAAY,EAAE;AAAA,UACpD,MAAM;AAAA;AAAA;AAAA,IAGZ,OAAO,CAAC,WAAgB;AAAA,2BACD,WAAS,MAAM,MAAM,YAAY,KAAK,CAAC;AAAA,UACxD,MAAM;AAAA;AAAA;AAAA,EAGd;AACF;AAKO,IAAM,sBAAsB;AAAA;AAAA;AAAA;AAAA,MAI7B,OAAO,QAAQ,OAAO,OAAO,OAAO,EAAE;AAAA,EAAI,CAAC,CAAC,KAAK,KAAK,MACtD,2BAA2B,GAAG,KAAK,KAAK;AAC1C,EAAE,KAAK,IAAI,CAAC;AAAA;AAAA;AAAA,MAGV,OAAO,QAAQ,OAAO,OAAO,SAAS,EAAE;AAAA,EAAI,CAAC,CAAC,KAAK,KAAK,MACxD,6BAA6B,GAAG,KAAK,KAAK;AAC5C,EAAE,KAAK,IAAI,CAAC;AAAA;AAAA;AAAA,MAGV,OAAO,QAAQ,OAAO,OAAO,OAAO,EAAE;AAAA,EAAI,CAAC,CAAC,KAAK,KAAK,MACtD,2BAA2B,GAAG,KAAK,KAAK;AAC1C,EAAE,KAAK,IAAI,CAAC;AAAA;AAAA;AAAA,MAGV,OAAO,QAAQ,OAAO,OAAO,QAAQ,EAAE,IAAI,CAAC,CAAC,KAAK,KAAK,MAAM;AAC7D,QAAM,WAAW,IAAI,QAAQ,YAAY,KAAK,EAAE,YAAY;AAC5D,SAAO,mBAAmB,QAAQ,KAAK,KAAK;AAC9C,CAAC,EAAE,KAAK,IAAI,CAAC;AAAA;AAAA;AAAA,MAGX,OAAO,QAAQ,OAAO,OAAO,EAAE;AAAA,EAAI,CAAC,CAAC,KAAK,KAAK,MAC/C,qBAAqB,GAAG,KAAK,KAAK;AACpC,EAAE,KAAK,IAAI,CAAC;AAAA;AAAA;AAAA,2BAGW,OAAO,WAAW,WAAW,IAAI;AAAA,2BACjC,OAAO,WAAW,WAAW,IAAI;AAAA;AAAA;AAAA,MAGtD,OAAO,QAAQ,OAAO,WAAW,QAAQ,EAAE;AAAA,EAAI,CAAC,CAAC,KAAK,KAAK,MAC3D,kBAAkB,GAAG,KAAK,KAAK;AACjC,EAAE,KAAK,IAAI,CAAC;AAAA;AAAA;AAAA,MAGV,OAAO,QAAQ,OAAO,WAAW,UAAU,EAAE;AAAA,EAAI,CAAC,CAAC,KAAK,KAAK,MAC7D,kBAAkB,GAAG,KAAK,KAAK;AACjC,EAAE,KAAK,IAAI,CAAC;AAAA;AAAA;AAAA,MAGV,OAAO,QAAQ,OAAO,YAAY,EAAE;AAAA,EAAI,CAAC,CAAC,KAAK,KAAK,MACpD,oBAAoB,GAAG,KAAK,KAAK;AACnC,EAAE,KAAK,IAAI,CAAC;AAAA;AAAA;AAAA,MAGV,OAAO,QAAQ,OAAO,OAAO,EAAE;AAAA,EAAI,CAAC,CAAC,KAAK,KAAK,MAC/C,oBAAoB,GAAG,KAAK,KAAK;AACnC,EAAE,KAAK,IAAI,CAAC;AAAA;AAAA;AAAA,MAGV,OAAO,QAAQ,OAAO,YAAY,QAAQ,EAAE;AAAA,EAAI,CAAC,CAAC,KAAK,KAAK,MAC5D,sBAAsB,GAAG,KAAK,KAAK;AACrC,EAAE,KAAK,IAAI,CAAC;AAAA;AAAA;AAeT,SAAS,0BAA0B,QAAa;AACrD,SAAO,OAAO,OAAO,MAAM,CAAC,WAAgB;AAAA,IAC1C,gBAAgB,MAAM;AAAA,IACtB,aAAa,MAAM;AAAA,IACnB,gBAAgB,MAAM,UAAU,SAAS;AAAA,IACzC,mBAAmB,MAAM,YAAY,SAAS;AAAA,IAC9C,kBAAkB,MAAM,WAAW,SAAS;AAAA,IAC5C,eAAe,MAAM,SAAS,SAAS;AAAA,IACvC,iBAAiB,MAAM,WAAW,SAAS;AAAA,IAC3C,WAAW,kBAAkB,MAAM,aAAa,EAAE,GAAG,KAAK;AAAA,EAC5D,EAAE;AAAA,MACE,cAAc,UAAU;AAAA,MACxB,CAAC,UAAe,cAAc,cAAc,MAAM,WAAW,SAAS,CAAC;AAAA,MACvE,CAAC,UAAe,cAAc,WAAW,MAAM,QAAQ,IAAI,CAAC;AAAA;AAAA,MAE5D,CAAC,UAAe,MAAM,aAAa;AAAA;AAAA,KAEpC;AAAA;AAAA,MAEC,CAAC,UAAe,MAAM,WAAW;AAAA;AAAA;AAAA,KAGlC;AAAA;AAAA,MAEC,CAAC,UAAe,MAAM,YAAY;AAAA,iBACvB,MAAM,MAAM,QAAQ,EAAE;AAAA;AAAA,KAElC;AAAA;AAEL;","names":[]}

package/dist/{it-XKHHCBAF.js → it-AS5GM232.js}

@@ -1,5 +1,5 @@
 'use client';
-import "./chunk-K6BJDL2I.js";
+import "./chunk-YBGN4ACY.js";
 
 // translations/it.json
 var Toolbar = {
@@ -402,4 +402,4 @@ export {
   UnifiedAnnotationsPanel,
   it_default as default
 };
-//# sourceMappingURL=it-XKHHCBAF.js.map
+//# sourceMappingURL=it-AS5GM232.js.map

package/dist/{ja-TX7VM4XD.js → ja-GZ4HLUOF.js}

@@ -1,5 +1,5 @@
 'use client';
-import "./chunk-K6BJDL2I.js";
+import "./chunk-YBGN4ACY.js";
 
 // translations/ja.json
 var Toolbar = {
@@ -402,4 +402,4 @@ export {
   UnifiedAnnotationsPanel,
   ja_default as default
 };
-//# sourceMappingURL=ja-TX7VM4XD.js.map
+//# sourceMappingURL=ja-GZ4HLUOF.js.map

package/dist/{ko-DNC7EQ7J.js → ko-A4XUXFGJ.js}

@@ -1,5 +1,5 @@
 'use client';
-import "./chunk-K6BJDL2I.js";
+import "./chunk-YBGN4ACY.js";
 
 // translations/ko.json
 var Toolbar = {
@@ -402,4 +402,4 @@ export {
   UnifiedAnnotationsPanel,
   ko_default as default
 };
-//# sourceMappingURL=ko-DNC7EQ7J.js.map
+//# sourceMappingURL=ko-A4XUXFGJ.js.map

package/dist/{ms-POZGBKPH.js → ms-YBAO3S6K.js}

@@ -1,5 +1,5 @@
 'use client';
-import "./chunk-K6BJDL2I.js";
+import "./chunk-YBGN4ACY.js";
 
 // translations/ms.json
 var Toolbar = {
@@ -402,4 +402,4 @@ export {
   UnifiedAnnotationsPanel,
   ms_default as default
 };
-//# sourceMappingURL=ms-POZGBKPH.js.map
+//# sourceMappingURL=ms-YBAO3S6K.js.map

package/dist/{nl-IRMTKI7Z.js → nl-3TJGIIIU.js}

@@ -1,5 +1,5 @@
 'use client';
-import "./chunk-K6BJDL2I.js";
+import "./chunk-YBGN4ACY.js";
 
 // translations/nl.json
 var Toolbar = {
@@ -402,4 +402,4 @@ export {
   UnifiedAnnotationsPanel,
   nl_default as default
 };
-//# sourceMappingURL=nl-IRMTKI7Z.js.map
+//# sourceMappingURL=nl-3TJGIIIU.js.map

package/dist/{no-ZUDJA4S6.js → no-4AXIQPRQ.js}

@@ -1,5 +1,5 @@
 'use client';
-import "./chunk-K6BJDL2I.js";
+import "./chunk-YBGN4ACY.js";
 
 // translations/no.json
 var Toolbar = {
@@ -402,4 +402,4 @@ export {
   UnifiedAnnotationsPanel,
   no_default as default
 };
-//# sourceMappingURL=no-ZUDJA4S6.js.map
+//# sourceMappingURL=no-4AXIQPRQ.js.map

package/dist/{pl-2NGAXL5U.js → pl-5GP6GKXO.js}

@@ -1,5 +1,5 @@
 'use client';
-import "./chunk-K6BJDL2I.js";
+import "./chunk-YBGN4ACY.js";
 
 // translations/pl.json
 var Toolbar = {
@@ -402,4 +402,4 @@ export {
   UnifiedAnnotationsPanel,
   pl_default as default
 };
-//# sourceMappingURL=pl-2NGAXL5U.js.map
+//# sourceMappingURL=pl-5GP6GKXO.js.map

package/dist/{pt-ABMCXZUM.js → pt-26Y6JFG5.js}

@@ -1,5 +1,5 @@
 'use client';
-import "./chunk-K6BJDL2I.js";
+import "./chunk-YBGN4ACY.js";
 
 // translations/pt.json
 var Toolbar = {
@@ -402,4 +402,4 @@ export {
   UnifiedAnnotationsPanel,
   pt_default as default
 };
-//# sourceMappingURL=pt-ABMCXZUM.js.map
+//# sourceMappingURL=pt-26Y6JFG5.js.map

package/dist/{ro-VOJP6O5X.js → ro-C7UXFRWJ.js}

@@ -1,5 +1,5 @@
 'use client';
-import "./chunk-K6BJDL2I.js";
+import "./chunk-YBGN4ACY.js";
 
 // translations/ro.json
 var Toolbar = {
@@ -402,4 +402,4 @@ export {
   UnifiedAnnotationsPanel,
   ro_default as default
 };
-//# sourceMappingURL=ro-VOJP6O5X.js.map
+//# sourceMappingURL=ro-C7UXFRWJ.js.map

package/dist/{sv-4HVFIIE5.js → sv-44DVD76T.js}

@@ -1,5 +1,5 @@
 'use client';
-import "./chunk-K6BJDL2I.js";
+import "./chunk-YBGN4ACY.js";
 
 // translations/sv.json
 var Toolbar = {
@@ -402,4 +402,4 @@ export {
   UnifiedAnnotationsPanel,
   sv_default as default
 };
-//# sourceMappingURL=sv-4HVFIIE5.js.map
+//# sourceMappingURL=sv-44DVD76T.js.map

package/dist/test-utils.js

@@ -4,12 +4,12 @@ import {
   ToastProvider,
   TranslationProvider,
   require_cjs
-} from "./chunk-Y2EEAOMZ.js";
+} from "./chunk-WHUGODTB.js";
 import "./chunk-GERSK2DY.js";
 import {
   __commonJS,
   __toESM
-} from "./chunk-K6BJDL2I.js";
+} from "./chunk-YBGN4ACY.js";
 
 // ../../node_modules/pretty-format/node_modules/ansi-styles/index.js
 var require_ansi_styles = __commonJS({
@@ -340,9 +340,9 @@ var require_AsymmetricMatcher = __commonJS({
   }
 });
 
-// ../../node_modules/ansi-regex/index.js
+// ../../node_modules/pretty-format/node_modules/ansi-regex/index.js
 var require_ansi_regex = __commonJS({
-  "../../node_modules/ansi-regex/index.js"(exports, module2) {
+  "../../node_modules/pretty-format/node_modules/ansi-regex/index.js"(exports, module2) {
     "use strict";
     module2.exports = ({ onlyFirst = false } = {}) => {
       const pattern = [