@oscarrf2/goo-ds 0.1.0 → 0.1.2

package/CHANGELOG.md

@@ -0,0 +1,96 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [0.1.2] - 2026-01-18
+
+### Fixed
+
+- **CSS Distribution**: Removed bare `@import "tailwindcss"` from distributed `styles.css` that caused module resolution errors
+- **Dependency Configuration**: Moved React to `peerDependencies` (was incorrectly in `dependencies`)
+
+### Changed
+
+- **CSS Build Process**: `styles.css` is now generated without Tailwind bare imports (components use pure CSS only)
+- **Package Size**: 31.0 kB (properly excludes Tailwind dependency)
+
+### Notes
+
+- This version fixes the "Can't resolve 'tailwindcss'" error when consuming the package
+- Components use token-driven CSS only, no runtime Tailwind dependency required
+- **Recommended**: Update from 0.1.1 immediately if experiencing CSS import errors
+
+## [0.1.1] - 2026-01-18
+
+### Deprecated
+
+⚠️ **This version has a critical CSS import bug.** Please upgrade to 0.1.2 or higher.
+
+### Fixed
+
+- **Build Configuration**: Package now exports compiled JavaScript instead of TypeScript source files
+- **TypeScript Definitions**: All `.d.ts` files are now properly generated and included
+- **CSS Assets**: All token CSS files and component styles are now correctly bundled
+- **InputImage Component**: Fixed CoreText prop usage (changed from `variant/size/weight` to `style`)
+
+### Changed
+
+- **Package Exports**: Now exports compiled `dist/` folder instead of `src/` files
+- **Build Process**: Split into three steps (types, JS compilation, CSS copying)
+- **Package Size**: 30.1 kB (was 21.4 kB due to proper source maps inclusion)
+
+### Notes
+
+- This version fixes the "Missing module type" error when consuming the package in Next.js/Vite projects
+- Consumers can now properly import and use all components without TypeScript compilation errors
+
+## [0.1.0] - 2026-01-18
+
+### Deprecated
+
+⚠️ **This version has critical issues and should not be used.** Please upgrade to 0.1.1 or higher.
+
+### Added
+
+**Components:**
+- Button - Versatile button component with variants (primary, secondary, tertiary, ghost) and sizes (small, medium, large)
+- CoreText - Typography component with text styles from design tokens
+- Spacer - Layout spacing component with token-driven sizes
+- Divider - Horizontal/vertical divider component
+- Sidebar - Navigation sidebar component
+- SidebarItem - Individual sidebar navigation items
+- Skeleton - Loading skeleton component with animation
+- Table - Table container component
+- TableRow - Table row component
+- Cell - Table cell component with alignment and width options
+- Tabs - Tab navigation component
+- TabItem - Individual tab items
+- Codeblock - Code display component with syntax highlighting
+- InputImage - Image input component with drag-and-drop, multiple states, and comparison slider
+
+**Token System:**
+- Complete token architecture (global, semantic, number, typography, component, style tokens)
+- Token-first design approach (no hardcoded visual values)
+- Theme-ready component tokens for future light/dark mode support
+- CSS variable-based styling
+
+**Documentation:**
+- Full documentation site with interactive examples
+- Component API documentation
+- Usage examples and best practices
+
+### Notes
+
+- **Pre-1.0 Release**: This is an early release. APIs may change in future versions.
+- **Token-First Architecture**: All visual styling comes from design tokens exported from Figma.
+- **React 19+ Required**: This package requires React 19 or higher.
+- **TypeScript Support**: Full TypeScript definitions included.
+
+### Known Limitations
+
+- Test coverage is in progress (components are functional, tests are being refined)
+- Some components may have incomplete interaction callbacks
+- Documentation for advanced use cases is being expanded

package/dist/assets/index.css

@@ -0,0 +1 @@
+@keyframes skeleton-pulse{0%,to{opacity:1}50%{opacity:.5}}.skeleton-pulse{animation:skeleton-pulse 2s cubic-bezier(.4,0,.6,1) infinite}@media(prefers-reduced-motion:reduce){.skeleton-pulse{animation:none}}.gds-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--btn-gap);padding:var(--btn-padding-v) var(--btn-padding-h);min-height:var(--btn-min-height);border-radius:var(--btn-radius);border:var(--btn-stroke-width) solid var(--btn-stroke);background-color:var(--btn-background);color:var(--btn-text);font-family:var(--coreText-family-primary);font-size:var(--btn-font-size);font-weight:var(--font-weight-medium);line-height:var(--btn-line-height);cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;text-decoration:none}.gds-button-icon-only{min-width:var(--btn-min-width)}.gds-button:hover:not(:disabled){background-color:var(--btn-background-hover);border-color:var(--btn-stroke-hover)}.gds-button:active:not(:disabled){background-color:var(--btn-background-pressed)}.gds-button:disabled{background-color:var(--btn-background-disabled);border-color:var(--btn-stroke-disabled);color:var(--btn-text-disabled);cursor:not-allowed;opacity:.6}.gds-button:disabled .gds-button-icon{color:var(--btn-icon-disabled)}.gds-button:focus-visible{outline:2px solid var(--color-stroke-focus);outline-offset:2px}.gds-button-text{white-space:nowrap}.gds-button-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--btn-icon)}.gds-button-link{background-color:transparent;border-color:transparent;padding-left:0;padding-right:0;text-decoration:underline}.gds-button-link:hover:not(:disabled){background-color:transparent;border-color:transparent;text-decoration:none}.gds-button-ghost{background-color:transparent;border-color:transparent}.gds-button-ghost:hover:not(:disabled){border-color:transparent}.gds-button-ghost:active:not(:disabled){border-color:transparent}.gds-button-ghost:disabled{border-color:transparent}@media(prefers-reduced-motion:reduce){.gds-button{transition:none}}.gds-cell{box-sizing:border-box;padding:var(--table-cell-paddingVertical) var(--table-cell-paddingHorizontal);vertical-align:top;font-family:var(--coreText-family-primary);font-size:var(--font-size-sm);font-weight:var(--font-weight-regular);line-height:var(--font-lineHeight-sm)}.gds-cell-header{color:var(--coreText-text-secondary-default)}.gds-cell-body{color:var(--coreText-text-primary-default)}.gds-cell-align-left{text-align:left}.gds-cell-align-center{text-align:center}.gds-cell-align-right{text-align:right}.gds-cell-width-xs{width:var(--table-cell-width-xs)}.gds-cell-width-sm{width:var(--table-cell-width-sm)}.gds-cell-width-md{width:var(--table-cell-width-md)}.gds-cell-width-lg{width:var(--table-cell-width-lg)}.gds-cell-width-xl{width:var(--table-cell-width-xl)}.gds-cell-width-fill{width:auto}.gds-table-row{box-sizing:border-box;transition:background-color .2s ease}.gds-table-row-divider td,.gds-table-row-divider th{border-bottom:var(--table-row-medium-strokeWidth) solid var(--table-row-stroke-divider)}.gds-table-row-interactive{cursor:pointer;-webkit-user-select:none;user-select:none}.gds-table-row-interactive:hover:not(.gds-table-row-disabled):not(.gds-table-row-selected){background-color:var(--table-row-background-hover)}.gds-table-row-interactive:active:not(.gds-table-row-disabled):not(.gds-table-row-selected){background-color:var(--table-row-background-pressed)}.gds-table-row-interactive:focus-visible{outline:2px solid var(--color-stroke-focus);outline-offset:-2px}.gds-table-row-selected{background-color:var(--table-row-background-active)}.gds-table-row-disabled{background-color:var(--table-row-background-disabled);cursor:not-allowed;opacity:.6}@media(prefers-reduced-motion:reduce){.gds-table-row{transition:none}}.gds-table{width:100%;background-color:var(--table-background-default);border:var(--table-medium-strokeWidth) solid var(--table-stroke-default);border-radius:var(--radius-200);overflow:hidden;box-sizing:border-box;border-collapse:separate;border-spacing:0;table-layout:auto}.gds-sidebar-item{display:flex;align-items:center;gap:var(--size-8);padding:var(--sidebar-item-medium-paddingVertical) var(--sidebar-item-medium-paddingHorizontal);border-radius:var(--sidebar-item-medium-radius);font-family:var(--coreText-family-primary);font-size:var(--font-size-sm);font-weight:var(--font-weight-regular);line-height:var(--font-lineHeight-sm);color:var(--sidebar-item-text-default);transition:all .2s ease;box-sizing:border-box;position:relative;width:100%}.gds-sidebar-item-interactive{cursor:pointer;-webkit-user-select:none;user-select:none}.gds-sidebar-item-interactive:hover:not(.gds-sidebar-item-active){background-color:var(--sidebar-item-background-hover)}.gds-sidebar-item-interactive:active:not(.gds-sidebar-item-active){background-color:var(--sidebar-item-background-pressed)}.gds-sidebar-item-interactive:focus-visible{outline:2px solid var(--color-stroke-focus);outline-offset:2px}.gds-sidebar-item-active{background-color:var(--sidebar-item-background-active);color:var(--sidebar-item-text-active);font-weight:var(--font-weight-medium)}.gds-sidebar-item-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.gds-sidebar-item-text{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media(prefers-reduced-motion:reduce){.gds-sidebar-item{transition:none}}.gds-sidebar{display:flex;align-items:stretch;position:relative;background-color:var(--sidebar-background-default);box-sizing:border-box}.gds-sidebar-content{display:flex;flex-direction:column;align-items:flex-start;min-width:var(--sidebar-medium-minWidth);width:var(--sidebar-medium-minWidth);padding-top:var(--sidebar-medium-paddingTop);padding-bottom:var(--sidebar-medium-paddingBottom);padding-left:var(--sidebar-medium-paddingHorizontal);padding-right:var(--sidebar-medium-paddingHorizontal);flex-shrink:0;box-sizing:border-box}.gds-sidebar-divider{width:1px;align-self:stretch;flex-shrink:0;background-color:var(--divider-background-default)}.gds-divider{display:flex;position:relative;box-sizing:border-box}.gds-divider-horizontal{flex-direction:column;align-items:flex-start;width:100%}.gds-divider-horizontal .gds-divider-line{width:100%;height:1px;background-color:var(--divider-background-default);flex-shrink:0}.gds-divider-vertical{align-items:center;align-self:stretch;height:100%}.gds-divider-vertical .gds-divider-line{width:1px;height:100%;background-color:var(--divider-background-default);flex-shrink:0}.gds-codeblock{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:var(--codeblock-medium-gap);padding:var(--codeblock-medium-paddingVertical) var(--codeblock-medium-paddingHorizontal);background-color:var(--codeblock-background-default);border:var(--codeblock-medium-strokeWidth) solid var(--codeblock-stroke-default);border-radius:var(--codeblock-medium-radius);overflow:clip;box-sizing:border-box;width:100%}.gds-codeblock-content{margin:0;padding:0;width:100%;overflow-x:auto;font-family:var(--coreText-family-primary);font-size:var(--font-size-sm);font-weight:var(--font-weight-regular);line-height:var(--font-lineHeight-sm);color:var(--codeblock-text-default);white-space:pre;flex-shrink:0}.gds-codeblock-content code{font-family:inherit;font-size:inherit;background:none;padding:0;border:none}.gds-codeblock-copy-button{position:absolute;top:7px;right:7px;display:flex;align-items:center;justify-content:center;gap:var(--button-extraSmall-cta-gap);min-height:24px;padding:var(--button-extraSmall-cta-paddingVertical) var(--button-extraSmall-cta-paddingHorizontal);border-radius:var(--button-extraSmall-cta-radius);border:none;background-color:transparent;color:var(--button-ghost-text-default);cursor:pointer;transition:background-color .2s ease;box-sizing:border-box;font-family:var(--coreText-family-primary);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);line-height:var(--font-lineHeight-xs)}.gds-codeblock-copy-button:hover{background-color:var(--button-ghost-background-hover)}.gds-codeblock-copy-button:active{background-color:var(--button-ghost-background-pressed)}.gds-codeblock-copy-button:focus-visible{outline:2px solid var(--color-stroke-focus);outline-offset:2px}.gds-codeblock-copy-text{flex-shrink:0}@media(prefers-reduced-motion:reduce){.gds-codeblock-copy-button{transition:none}}.gds-input-image{position:relative;width:284px;max-height:var(--image-medium-maxHeight-default);border-radius:var(--image-medium-radius);border-style:solid;border-width:1px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box}.gds-input-image-default{background:var(--input-background-default);border-color:var(--input-stroke-default);border-style:dashed;gap:var(--image-medium-gap);padding:var(--image-medium-paddingVertical-default) var(--image-medium-paddingHorizontal-default);height:var(--image-medium-maxHeight-default)}.gds-input-image-default .gds-input-image-label{color:var(--input-text-default)}.gds-input-image-default .gds-input-image-separator{color:var(--input-text-active);font-size:12px;line-height:var(--font-lineHeight-xs);text-overflow:ellipsis;overflow:hidden}.gds-input-image-hover{background:var(--input-background-hover);border-color:var(--input-stroke-default);border-style:dashed;gap:var(--image-medium-gap);padding:var(--image-medium-paddingVertical-default) var(--image-medium-paddingHorizontal-default);height:var(--image-medium-maxHeight-default)}.gds-input-image-hover .gds-input-image-label{color:var(--input-text-default)}.gds-input-image-hover .gds-input-image-separator{color:var(--input-text-active);font-size:12px;line-height:var(--font-lineHeight-xs);text-overflow:ellipsis;overflow:hidden}.gds-input-image-filled{background:transparent;border-color:var(--input-stroke-default);border-style:solid;gap:0;padding:0;height:var(--image-medium-maxHeight-default)}.gds-input-image-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:var(--image-medium-radius);pointer-events:none;max-width:none}.gds-input-image-remove-button{position:absolute;top:var(--image-medium-paddingVertical-filled);right:var(--image-medium-paddingHorizontal-filled);z-index:1}.gds-input-image-loading{background:var(--image-background-loading);border-color:var(--input-stroke-default);border-style:dashed;height:var(--image-medium-maxHeight-default)}.gds-input-image-generating{background:transparent;border-color:var(--input-stroke-default);border-style:solid;gap:0;height:var(--image-medium-maxHeight-generated);max-height:var(--image-medium-maxHeight-generated);overflow:hidden}.gds-input-image-blur-container{flex:1 0 0;width:100%;min-height:1px;min-width:1px;position:relative;filter:blur(20px)}.gds-input-image-blur-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;max-width:none}.gds-input-image-generated{background:transparent;border-color:var(--input-stroke-default);border-style:solid;height:var(--image-medium-maxHeight-generated);max-height:var(--image-medium-maxHeight-generated);align-items:center;overflow:hidden}.gds-input-image-result{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:var(--image-medium-radius);pointer-events:none;max-width:none}.gds-input-image-comparison-slider{position:absolute;display:flex;width:32px;height:100%;top:0;left:50%;transform:translate(-50%);align-items:center;justify-content:center;cursor:ew-resize;z-index:2}.gds-input-image-slider-line{position:absolute;width:1px;height:100%;background:var(--color-background-neutral-default);box-shadow:0 1px 2px #0000004d,0 1px 3px 1px #00000026;pointer-events:none}.gds-input-image-slider-button{position:relative;z-index:1;pointer-events:auto}.gds-input-image-disabled{background:var(--input-background-disabled);border-color:var(--input-stroke-default);border-style:solid;gap:var(--image-medium-gap);padding:var(--image-medium-paddingVertical-default) var(--image-medium-paddingHorizontal-default);height:var(--image-medium-maxHeight-default)}.gds-input-image-disabled .gds-input-image-label{color:var(--input-text-disabled)}.gds-input-image-disabled .gds-input-image-separator{color:var(--input-text-active);font-size:12px;line-height:var(--font-lineHeight-xs);text-overflow:ellipsis;overflow:hidden}.gds-input-image-button{flex-shrink:0}.gds-tab-item{display:flex;align-items:center;justify-content:center;padding-top:var(--tab-item-medium-paddingTop);padding-bottom:var(--tab-item-medium-paddingBottom);padding-left:var(--tab-item-medium-paddingHorizontal);padding-right:var(--tab-item-medium-paddingHorizontal);border:none;border-bottom:var(--tab-item-medium-strokeWidth) solid;background:none;cursor:pointer;transition:all .2s ease;box-sizing:border-box;position:relative;font-family:var(--coreText-family-primary);font-size:var(--font-size-sm);line-height:var(--font-lineHeight-sm)}.gds-tab-item-unselected{border-bottom-color:var(--tab-item-stroke-unselected);color:var(--tab-item-text-unselected);font-weight:var(--font-weight-regular)}.gds-tab-item-unselected:hover:not(.gds-tab-item-disabled){color:var(--tab-item-text-selected)}.gds-tab-item-selected{border-bottom-color:var(--tab-item-stroke-selected);color:var(--tab-item-text-selected);font-weight:var(--font-weight-medium)}.gds-tab-item-disabled{opacity:.5;cursor:not-allowed}.gds-tab-item:focus-visible{outline:2px solid var(--color-stroke-focus);outline-offset:2px}.gds-tab-item-text{flex-shrink:0;white-space:nowrap}@media(prefers-reduced-motion:reduce){.gds-tab-item{transition:none}}.gds-tabs{display:flex;align-items:flex-start;position:relative;box-sizing:border-box}

package/dist/components/Button/Button.js

@@ -0,0 +1,60 @@
+import { jsxs as i, jsx as s } from "react/jsx-runtime";
+/* empty css           */
+function h({
+  variant: t = "primary",
+  size: n = "medium",
+  iconLeft: d,
+  iconRight: u,
+  disabled: r = !1,
+  children: a,
+  className: l = "",
+  type: $ = "button",
+  ...c
+}) {
+  const e = (d || u) && !a, g = {
+    "--btn-background": `var(--button-${t}-background-default)`,
+    "--btn-background-hover": `var(--button-${t}-background-hover, var(--button-${t}-background-default))`,
+    "--btn-background-pressed": `var(--button-${t}-background-pressed, var(--button-${t}-background-default))`,
+    "--btn-background-disabled": `var(--button-${t}-background-disabled, var(--button-${t}-background-default))`,
+    "--btn-text": `var(--button-${t}-text-default)`,
+    "--btn-text-disabled": `var(--button-${t}-text-disabled, var(--button-${t}-text-default))`,
+    "--btn-icon": `var(--button-${t}-icon-default)`,
+    "--btn-icon-disabled": `var(--button-${t}-icon-disabled, var(--button-${t}-icon-default))`,
+    "--btn-stroke": `var(--button-${t}-stroke-default, transparent)`,
+    "--btn-stroke-hover": `var(--button-${t}-stroke-hover, var(--button-${t}-stroke-default, transparent))`,
+    "--btn-stroke-disabled": `var(--button-${t}-stroke-disabled, var(--button-${t}-stroke-default, transparent))`
+  }, o = e ? "icon" : "cta", b = n === "extraSmall" ? "extraSmall" : n, m = {
+    "--btn-gap": `var(--button-${b}-${o}-gap)`,
+    "--btn-padding-v": `var(--button-${b}-${o}-paddingVertical)`,
+    "--btn-padding-h": `var(--button-${b}-${o}-paddingHorizontal)`,
+    "--btn-min-height": `var(--button-${b}-${o}-minHeight)`,
+    "--btn-radius": `var(--button-${b}-${o}-radius)`,
+    "--btn-stroke-width": `var(--button-${b}-${o}-strokeWidth)`,
+    "--btn-min-width": e ? `var(--button-${b}-${o}-minWidth)` : "auto",
+    "--btn-font-size": `var(--font-size-${n === "large" ? "md" : n === "medium" ? "sm" : "xs"})`,
+    "--btn-line-height": `var(--font-lineHeight-${n === "large" ? "md" : n === "medium" ? "sm" : "xs"})`
+  };
+  return /* @__PURE__ */ i(
+    "button",
+    {
+      type: $,
+      disabled: r,
+      className: `gds-button gds-button-${t} gds-button-${n} ${e ? "gds-button-icon-only" : ""} ${l}`.trim(),
+      style: { ...g, ...m },
+      "data-component": "Button",
+      "data-variant": t,
+      "data-size": n,
+      ...c,
+      children: [
+        d && /* @__PURE__ */ s("span", { className: "gds-button-icon gds-button-icon-left", children: d }),
+        a && /* @__PURE__ */ s("span", { className: "gds-button-text", children: a }),
+        u && /* @__PURE__ */ s("span", { className: "gds-button-icon gds-button-icon-right", children: u })
+      ]
+    }
+  );
+}
+export {
+  h as Button,
+  h as default
+};
+//# sourceMappingURL=Button.js.map

package/dist/components/Button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import type { ButtonProps } from \"./Button.types\";\r\nimport \"./Button.css\";\r\n\r\n/**\r\n * Button - Interactive button component for the goo-ds design system\r\n *\r\n * Provides consistent button styles with multiple variants, sizes, and states.\r\n * Supports icons, disabled state, and all standard button interactions.\r\n * Token-first per Constitution (no hardcoded values).\r\n *\r\n * @example\r\n * ```tsx\r\n * <Button>Click me</Button>\r\n * <Button variant=\"secondary\" size=\"small\">Small button</Button>\r\n * <Button variant=\"destructive\" disabled>Disabled</Button>\r\n * <Button iconLeft={<PlusIcon />}>With icon</Button>\r\n * ```\r\n */\r\nexport function Button({\r\n  variant = \"primary\",\r\n  size = \"medium\",\r\n  iconLeft,\r\n  iconRight,\r\n  disabled = false,\r\n  children,\r\n  className = \"\",\r\n  type = \"button\",\r\n  ...props\r\n}: ButtonProps) {\r\n  const hasIcons = iconLeft || iconRight;\r\n  const isIconOnly = hasIcons && !children;\r\n\r\n  // Build CSS custom properties for the button variant\r\n  const buttonVars = {\r\n    \"--btn-background\": `var(--button-${variant}-background-default)`,\r\n    \"--btn-background-hover\": `var(--button-${variant}-background-hover, var(--button-${variant}-background-default))`,\r\n    \"--btn-background-pressed\": `var(--button-${variant}-background-pressed, var(--button-${variant}-background-default))`,\r\n    \"--btn-background-disabled\": `var(--button-${variant}-background-disabled, var(--button-${variant}-background-default))`,\r\n    \"--btn-text\": `var(--button-${variant}-text-default)`,\r\n    \"--btn-text-disabled\": `var(--button-${variant}-text-disabled, var(--button-${variant}-text-default))`,\r\n    \"--btn-icon\": `var(--button-${variant}-icon-default)`,\r\n    \"--btn-icon-disabled\": `var(--button-${variant}-icon-disabled, var(--button-${variant}-icon-default))`,\r\n    \"--btn-stroke\": `var(--button-${variant}-stroke-default, transparent)`,\r\n    \"--btn-stroke-hover\": `var(--button-${variant}-stroke-hover, var(--button-${variant}-stroke-default, transparent))`,\r\n    \"--btn-stroke-disabled\": `var(--button-${variant}-stroke-disabled, var(--button-${variant}-stroke-default, transparent))`,\r\n  } as React.CSSProperties;\r\n\r\n  // Size-dependent layout tokens\r\n  const buttonType = isIconOnly ? \"icon\" : \"cta\";\r\n  const sizeKey = size === \"extraSmall\" ? \"extraSmall\" : size;\r\n\r\n  const layoutVars = {\r\n    \"--btn-gap\": `var(--button-${sizeKey}-${buttonType}-gap)`,\r\n    \"--btn-padding-v\": `var(--button-${sizeKey}-${buttonType}-paddingVertical)`,\r\n    \"--btn-padding-h\": `var(--button-${sizeKey}-${buttonType}-paddingHorizontal)`,\r\n    \"--btn-min-height\": `var(--button-${sizeKey}-${buttonType}-minHeight)`,\r\n    \"--btn-radius\": `var(--button-${sizeKey}-${buttonType}-radius)`,\r\n    \"--btn-stroke-width\": `var(--button-${sizeKey}-${buttonType}-strokeWidth)`,\r\n    \"--btn-min-width\": isIconOnly ? `var(--button-${sizeKey}-${buttonType}-minWidth)` : \"auto\",\r\n    \"--btn-font-size\": `var(--font-size-${size === \"large\" ? \"md\" : size === \"medium\" ? \"sm\" : \"xs\"})`,\r\n    \"--btn-line-height\": `var(--font-lineHeight-${size === \"large\" ? \"md\" : size === \"medium\" ? \"sm\" : \"xs\"})`,\r\n  } as React.CSSProperties;\r\n\r\n  return (\r\n    <button\r\n      type={type}\r\n      disabled={disabled}\r\n      className={`gds-button gds-button-${variant} gds-button-${size} ${isIconOnly ? \"gds-button-icon-only\" : \"\"} ${className}`.trim()}\r\n      style={{ ...buttonVars, ...layoutVars }}\r\n      data-component=\"Button\"\r\n      data-variant={variant}\r\n      data-size={size}\r\n      {...props}\r\n    >\r\n      {iconLeft && <span className=\"gds-button-icon gds-button-icon-left\">{iconLeft}</span>}\r\n      {children && <span className=\"gds-button-text\">{children}</span>}\r\n      {iconRight && <span className=\"gds-button-icon gds-button-icon-right\">{iconRight}</span>}\r\n    </button>\r\n  );\r\n}\r\n\r\nexport default Button;\r\n"],"names":["Button","variant","size","iconLeft","iconRight","disabled","children","className","type","props","isIconOnly","buttonVars","buttonType","sizeKey","layoutVars","jsxs","jsx"],"mappings":";;AAkBO,SAASA,EAAO;AAAA,EACrB,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,GAAGC;AACL,GAAgB;AAEd,QAAMC,KADWP,KAAYC,MACE,CAACE,GAG1BK,IAAa;AAAA,IACjB,oBAAoB,gBAAgBV,CAAO;AAAA,IAC3C,0BAA0B,gBAAgBA,CAAO,mCAAmCA,CAAO;AAAA,IAC3F,4BAA4B,gBAAgBA,CAAO,qCAAqCA,CAAO;AAAA,IAC/F,6BAA6B,gBAAgBA,CAAO,sCAAsCA,CAAO;AAAA,IACjG,cAAc,gBAAgBA,CAAO;AAAA,IACrC,uBAAuB,gBAAgBA,CAAO,gCAAgCA,CAAO;AAAA,IACrF,cAAc,gBAAgBA,CAAO;AAAA,IACrC,uBAAuB,gBAAgBA,CAAO,gCAAgCA,CAAO;AAAA,IACrF,gBAAgB,gBAAgBA,CAAO;AAAA,IACvC,sBAAsB,gBAAgBA,CAAO,+BAA+BA,CAAO;AAAA,IACnF,yBAAyB,gBAAgBA,CAAO,kCAAkCA,CAAO;AAAA,EAAA,GAIrFW,IAAaF,IAAa,SAAS,OACnCG,IAAUX,MAAS,eAAe,eAAeA,GAEjDY,IAAa;AAAA,IACjB,aAAa,gBAAgBD,CAAO,IAAID,CAAU;AAAA,IAClD,mBAAmB,gBAAgBC,CAAO,IAAID,CAAU;AAAA,IACxD,mBAAmB,gBAAgBC,CAAO,IAAID,CAAU;AAAA,IACxD,oBAAoB,gBAAgBC,CAAO,IAAID,CAAU;AAAA,IACzD,gBAAgB,gBAAgBC,CAAO,IAAID,CAAU;AAAA,IACrD,sBAAsB,gBAAgBC,CAAO,IAAID,CAAU;AAAA,IAC3D,mBAAmBF,IAAa,gBAAgBG,CAAO,IAAID,CAAU,eAAe;AAAA,IACpF,mBAAmB,mBAAmBV,MAAS,UAAU,OAAOA,MAAS,WAAW,OAAO,IAAI;AAAA,IAC/F,qBAAqB,yBAAyBA,MAAS,UAAU,OAAOA,MAAS,WAAW,OAAO,IAAI;AAAA,EAAA;AAGzG,SACE,gBAAAa;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAAP;AAAA,MACA,UAAAH;AAAA,MACA,WAAW,yBAAyBJ,CAAO,eAAeC,CAAI,IAAIQ,IAAa,yBAAyB,EAAE,IAAIH,CAAS,GAAG,KAAA;AAAA,MAC1H,OAAO,EAAE,GAAGI,GAAY,GAAGG,EAAA;AAAA,MAC3B,kBAAe;AAAA,MACf,gBAAcb;AAAA,MACd,aAAWC;AAAA,MACV,GAAGO;AAAA,MAEH,UAAA;AAAA,QAAAN,KAAY,gBAAAa,EAAC,QAAA,EAAK,WAAU,wCAAwC,UAAAb,GAAS;AAAA,QAC7EG,KAAY,gBAAAU,EAAC,QAAA,EAAK,WAAU,mBAAmB,UAAAV,GAAS;AAAA,QACxDF,KAAa,gBAAAY,EAAC,QAAA,EAAK,WAAU,yCAAyC,UAAAZ,EAAA,CAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGvF;"}

package/dist/components/Cell/Cell.js

@@ -0,0 +1,28 @@
+import { jsx as s } from "react/jsx-runtime";
+/* empty css         */
+function m({
+  type: a = "body",
+  alignment: l = "left",
+  width: t = "md",
+  children: d,
+  className: e = "",
+  ...o
+}) {
+  return /* @__PURE__ */ s(
+    a === "header" ? "th" : "td",
+    {
+      className: `gds-cell gds-cell-${a} gds-cell-align-${l} gds-cell-width-${t} ${e}`.trim(),
+      "data-component": "Cell",
+      "data-type": a,
+      "data-alignment": l,
+      "data-width": t,
+      ...o,
+      children: d
+    }
+  );
+}
+export {
+  m as Cell,
+  m as default
+};
+//# sourceMappingURL=Cell.js.map

package/dist/components/Cell/Cell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Cell.js","sources":["../../../src/components/Cell/Cell.tsx"],"sourcesContent":["import type { CellProps } from \"./Cell.types\";\r\nimport \"./Cell.css\";\r\n\r\n/**\r\n * Cell - Table cell component for the goo-ds design system\r\n *\r\n * Provides consistent table cell layout with alignment and width presets.\r\n * Designed to be used within table structures.\r\n * Token-first per Constitution (no hardcoded values).\r\n *\r\n * @example\r\n * ```tsx\r\n * <Cell type=\"header\">Name</Cell>\r\n * <Cell>John Doe</Cell>\r\n * <Cell alignment=\"right\" width=\"sm\">$100</Cell>\r\n * ```\r\n */\r\nexport function Cell({\r\n  type = \"body\",\r\n  alignment = \"left\",\r\n  width = \"md\",\r\n  children,\r\n  className = \"\",\r\n  ...props\r\n}: CellProps) {\r\n  const Tag = type === \"header\" ? \"th\" : \"td\";\r\n  \r\n  return (\r\n    <Tag\r\n      className={`gds-cell gds-cell-${type} gds-cell-align-${alignment} gds-cell-width-${width} ${className}`.trim()}\r\n      data-component=\"Cell\"\r\n      data-type={type}\r\n      data-alignment={alignment}\r\n      data-width={width}\r\n      {...props}\r\n    >\r\n      {children}\r\n    </Tag>\r\n  );\r\n}\r\n\r\nexport default Cell;\r\n"],"names":["Cell","type","alignment","width","children","className","props","jsx"],"mappings":";;AAiBO,SAASA,EAAK;AAAA,EACnB,MAAAC,IAAO;AAAA,EACP,WAAAC,IAAY;AAAA,EACZ,OAAAC,IAAQ;AAAA,EACR,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAAc;AAGZ,SACE,gBAAAC;AAAA,IAHUN,MAAS,WAAW,OAAO;AAAA,IAGpC;AAAA,MACC,WAAW,qBAAqBA,CAAI,mBAAmBC,CAAS,mBAAmBC,CAAK,IAAIE,CAAS,GAAG,KAAA;AAAA,MACxG,kBAAe;AAAA,MACf,aAAWJ;AAAA,MACX,kBAAgBC;AAAA,MAChB,cAAYC;AAAA,MACX,GAAGG;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/components/Codeblock/Codeblock.js

@@ -0,0 +1,51 @@
+import { jsxs as f, jsx as e } from "react/jsx-runtime";
+import { useState as b, useRef as k } from "react";
+/* empty css              */
+function C({
+  children: l,
+  showCopy: o = !0,
+  copyLabel: c = "Copy",
+  copiedLabel: r = "Copied!",
+  onCodeCopy: n,
+  className: i = "",
+  ...u
+}) {
+  const [s, a] = b(!1), t = k(null), p = async () => {
+    if (!t.current) return;
+    const d = t.current.textContent || "";
+    try {
+      await navigator.clipboard.writeText(d), a(!0), n && n(d), setTimeout(() => {
+        a(!1);
+      }, 2e3);
+    } catch (m) {
+      console.error("Failed to copy code:", m);
+    }
+  };
+  return /* @__PURE__ */ f(
+    "div",
+    {
+      className: `gds-codeblock ${i}`.trim(),
+      "data-component": "Codeblock",
+      "data-show-copy": o,
+      ...u,
+      children: [
+        /* @__PURE__ */ e("pre", { ref: t, className: "gds-codeblock-content", children: /* @__PURE__ */ e("code", { children: l }) }),
+        o && /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            className: "gds-codeblock-copy-button",
+            onClick: p,
+            "aria-label": s ? r : c,
+            children: /* @__PURE__ */ e("span", { className: "gds-codeblock-copy-text", children: s ? r : c })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  C as Codeblock,
+  C as default
+};
+//# sourceMappingURL=Codeblock.js.map

package/dist/components/Codeblock/Codeblock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Codeblock.js","sources":["../../../src/components/Codeblock/Codeblock.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { useState, useRef } from \"react\";\r\nimport type { CodeblockProps } from \"./Codeblock.types\";\r\nimport \"./Codeblock.css\";\r\n\r\n/**\r\n * Codeblock - Code display component for the goo-ds design system\r\n *\r\n * Provides consistent code block display with copy functionality.\r\n * Token-first per Constitution (no hardcoded values).\r\n *\r\n * @example\r\n * ```tsx\r\n * <Codeblock>\r\n *   const greeting = \"Hello, world!\";\r\n *   console.log(greeting);\r\n * </Codeblock>\r\n * \r\n * <Codeblock showCopy={false}>\r\n *   function example() {\r\n *     return true;\r\n *   }\r\n * </Codeblock>\r\n * ```\r\n */\r\nexport function Codeblock({\r\n  children,\r\n  showCopy = true,\r\n  copyLabel = \"Copy\",\r\n  copiedLabel = \"Copied!\",\r\n  onCodeCopy,\r\n  className = \"\",\r\n  ...props\r\n}: CodeblockProps) {\r\n  const [copied, setCopied] = useState(false);\r\n  const codeRef = useRef<HTMLPreElement>(null);\r\n\r\n  const handleCopy = async () => {\r\n    if (!codeRef.current) return;\r\n\r\n    const textContent = codeRef.current.textContent || \"\";\r\n\r\n    try {\r\n      await navigator.clipboard.writeText(textContent);\r\n      setCopied(true);\r\n      \r\n      if (onCodeCopy) {\r\n        onCodeCopy(textContent);\r\n      }\r\n\r\n      // Reset copied state after 2 seconds\r\n      setTimeout(() => {\r\n        setCopied(false);\r\n      }, 2000);\r\n    } catch (err) {\r\n      console.error(\"Failed to copy code:\", err);\r\n    }\r\n  };\r\n\r\n  return (\r\n    <div\r\n      className={`gds-codeblock ${className}`.trim()}\r\n      data-component=\"Codeblock\"\r\n      data-show-copy={showCopy}\r\n      {...props}\r\n    >\r\n      <pre ref={codeRef} className=\"gds-codeblock-content\">\r\n        <code>{children}</code>\r\n      </pre>\r\n      \r\n      {showCopy && (\r\n        <button\r\n          type=\"button\"\r\n          className=\"gds-codeblock-copy-button\"\r\n          onClick={handleCopy}\r\n          aria-label={copied ? copiedLabel : copyLabel}\r\n        >\r\n          <span className=\"gds-codeblock-copy-text\">\r\n            {copied ? copiedLabel : copyLabel}\r\n          </span>\r\n        </button>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n\r\nexport default Codeblock;\r\n"],"names":["Codeblock","children","showCopy","copyLabel","copiedLabel","onCodeCopy","className","props","copied","setCopied","useState","codeRef","useRef","handleCopy","textContent","err","jsxs","jsx"],"mappings":";;;AA0BO,SAASA,EAAU;AAAA,EACxB,UAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,aAAAC,IAAc;AAAA,EACd,YAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAAmB;AACjB,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK,GACpCC,IAAUC,EAAuB,IAAI,GAErCC,IAAa,YAAY;AAC7B,QAAI,CAACF,EAAQ,QAAS;AAEtB,UAAMG,IAAcH,EAAQ,QAAQ,eAAe;AAEnD,QAAI;AACF,YAAM,UAAU,UAAU,UAAUG,CAAW,GAC/CL,EAAU,EAAI,GAEVJ,KACFA,EAAWS,CAAW,GAIxB,WAAW,MAAM;AACf,QAAAL,EAAU,EAAK;AAAA,MACjB,GAAG,GAAI;AAAA,IACT,SAASM,GAAK;AACZ,cAAQ,MAAM,wBAAwBA,CAAG;AAAA,IAC3C;AAAA,EACF;AAEA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,iBAAiBV,CAAS,GAAG,KAAA;AAAA,MACxC,kBAAe;AAAA,MACf,kBAAgBJ;AAAA,MACf,GAAGK;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAU,EAAC,OAAA,EAAI,KAAKN,GAAS,WAAU,yBAC3B,UAAA,gBAAAM,EAAC,QAAA,EAAM,UAAAhB,GAAS,EAAA,CAClB;AAAA,QAECC,KACC,gBAAAe;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAU;AAAA,YACV,SAASJ;AAAA,YACT,cAAYL,IAASJ,IAAcD;AAAA,YAEnC,4BAAC,QAAA,EAAK,WAAU,2BACb,UAAAK,IAASJ,IAAcD,EAAA,CAC1B;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/components/CoreText/CoreText.js

@@ -0,0 +1,26 @@
+import { jsx as n } from "react/jsx-runtime";
+function m({
+  children: e,
+  style: r = "body-md-regular",
+  align: t = "left",
+  className: a = "",
+  as: o = "p"
+}) {
+  const l = [r, t === "center" ? "text-center" : t === "right" ? "text-right" : "text-left", a].filter(Boolean).join(" ");
+  return /* @__PURE__ */ n(
+    o,
+    {
+      className: l,
+      style: {
+        color: "var(--coreText-text-primary-default)",
+        margin: 0
+      },
+      children: e
+    }
+  );
+}
+export {
+  m as CoreText,
+  m as default
+};
+//# sourceMappingURL=CoreText.js.map

package/dist/components/CoreText/CoreText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CoreText.js","sources":["../../../src/components/CoreText/CoreText.tsx"],"sourcesContent":["import type { CoreTextProps } from \"./CoreText.types\";\r\n\r\n/**\r\n * CoreText - Foundation typography component for the goo-ds design system\r\n *\r\n * Renders text with consistent typography styles defined in Figma.\r\n * Styles are applied via CSS classes from style-tokens.css (token-first per Constitution).\r\n *\r\n * @example\r\n * ```tsx\r\n * <CoreText style=\"headline-lg-bold\">Page Title</CoreText>\r\n * <CoreText style=\"body-md-regular\" align=\"center\">Body text</CoreText>\r\n * <CoreText style=\"link-md-medium\" as=\"a\" href=\"/page\">Link text</CoreText>\r\n * ```\r\n */\r\nexport function CoreText({\r\n  children,\r\n  style = \"body-md-regular\",\r\n  align = \"left\",\r\n  className = \"\",\r\n  as: Component = \"p\",\r\n}: CoreTextProps) {\r\n  // Alignment classes (structural utility per Constitution IV)\r\n  const alignmentClass =\r\n    align === \"center\" ? \"text-center\" : align === \"right\" ? \"text-right\" : \"text-left\";\r\n\r\n  // Combine style class from style-tokens.css with alignment and custom classes\r\n  const combinedClassName = [style, alignmentClass, className].filter(Boolean).join(\" \");\r\n\r\n  return (\r\n    <Component\r\n      className={combinedClassName}\r\n      style={{\r\n        color: \"var(--coreText-text-primary-default)\",\r\n        margin: 0,\r\n      }}\r\n    >\r\n      {children}\r\n    </Component>\r\n  );\r\n}\r\n\r\nexport default CoreText;\r\n"],"names":["CoreText","children","style","align","className","Component","combinedClassName","jsx"],"mappings":";AAeO,SAASA,EAAS;AAAA,EACvB,UAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,OAAAC,IAAQ;AAAA,EACR,WAAAC,IAAY;AAAA,EACZ,IAAIC,IAAY;AAClB,GAAkB;AAMhB,QAAMC,IAAoB,CAACJ,GAHzBC,MAAU,WAAW,gBAAgBA,MAAU,UAAU,eAAe,aAGxBC,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAErF,SACE,gBAAAG;AAAA,IAACF;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,MACX,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,MAAA;AAAA,MAGT,UAAAL;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/components/Divider/Divider.js

@@ -0,0 +1,25 @@
+import { jsx as r } from "react/jsx-runtime";
+/* empty css            */
+function o({
+  orientation: i = "horizontal",
+  className: d = "",
+  ...a
+}) {
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: `gds-divider gds-divider-${i} ${d}`.trim(),
+      role: "separator",
+      "aria-orientation": i,
+      "data-component": "Divider",
+      "data-orientation": i,
+      ...a,
+      children: /* @__PURE__ */ r("div", { className: "gds-divider-line" })
+    }
+  );
+}
+export {
+  o as Divider,
+  o as default
+};
+//# sourceMappingURL=Divider.js.map

package/dist/components/Divider/Divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.js","sources":["../../../src/components/Divider/Divider.tsx"],"sourcesContent":["import type { DividerProps } from \"./Divider.types\";\r\nimport \"./Divider.css\";\r\n\r\n/**\r\n * Divider - Divider component for the goo-ds design system\r\n *\r\n * Provides consistent visual separator in horizontal or vertical orientation.\r\n * Token-first per Constitution (no hardcoded values).\r\n *\r\n * @example\r\n * ```tsx\r\n * <Divider />\r\n * <Divider orientation=\"vertical\" />\r\n * ```\r\n */\r\nexport function Divider({\r\n  orientation = \"horizontal\",\r\n  className = \"\",\r\n  ...props\r\n}: DividerProps) {\r\n  return (\r\n    <div\r\n      className={`gds-divider gds-divider-${orientation} ${className}`.trim()}\r\n      role=\"separator\"\r\n      aria-orientation={orientation}\r\n      data-component=\"Divider\"\r\n      data-orientation={orientation}\r\n      {...props}\r\n    >\r\n      <div className=\"gds-divider-line\" />\r\n    </div>\r\n  );\r\n}\r\n\r\nexport default Divider;\r\n"],"names":["Divider","orientation","className","props","jsx"],"mappings":";;AAeO,SAASA,EAAQ;AAAA,EACtB,aAAAC,IAAc;AAAA,EACd,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAAiB;AACf,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,2BAA2BH,CAAW,IAAIC,CAAS,GAAG,KAAA;AAAA,MACjE,MAAK;AAAA,MACL,oBAAkBD;AAAA,MAClB,kBAAe;AAAA,MACf,oBAAkBA;AAAA,MACjB,GAAGE;AAAA,MAEJ,UAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,mBAAA,CAAmB;AAAA,IAAA;AAAA,EAAA;AAGxC;"}

package/dist/components/InputImage/InputImage.js

@@ -0,0 +1,284 @@
+import { jsx as e, jsxs as t, Fragment as m } from "react/jsx-runtime";
+import { Button as d } from "../Button/Button.js";
+import { CoreText as r } from "../CoreText/CoreText.js";
+/* empty css               */
+function k({
+  state: i = "Default",
+  comparisonSlider: c = !0,
+  imageSrc: n,
+  imageAlt: l = "",
+  onUploadClick: g,
+  onRemoveClick: h,
+  onDragEnter: o,
+  onDragLeave: u,
+  onDrop: p,
+  className: a = "",
+  children: s,
+  sliderPosition: v = 50
+  // onSliderDrag not yet implemented
+}) {
+  return i === "Default" ? /* @__PURE__ */ e(
+    "div",
+    {
+      className: `gds-input-image gds-input-image-default ${a}`.trim(),
+      onDragEnter: o,
+      onDragLeave: u,
+      onDrop: p,
+      "data-component": "InputImage",
+      "data-state": i,
+      children: s || /* @__PURE__ */ t(m, { children: [
+        /* @__PURE__ */ e(
+          r,
+          {
+            style: "label-lg-medium",
+            className: "gds-input-image-label",
+            children: "Drag and drop"
+          }
+        ),
+        /* @__PURE__ */ e(
+          r,
+          {
+            style: "body-sm-regular",
+            className: "gds-input-image-separator",
+            children: "or"
+          }
+        ),
+        /* @__PURE__ */ e(
+          d,
+          {
+            variant: "primary",
+            size: "small",
+            onClick: g,
+            className: "gds-input-image-button",
+            children: "Click to upload"
+          }
+        )
+      ] })
+    }
+  ) : i === "Hover" ? /* @__PURE__ */ e(
+    "div",
+    {
+      className: `gds-input-image gds-input-image-hover ${a}`.trim(),
+      onDragEnter: o,
+      onDragLeave: u,
+      onDrop: p,
+      "data-component": "InputImage",
+      "data-state": i,
+      children: s || /* @__PURE__ */ t(m, { children: [
+        /* @__PURE__ */ e(
+          r,
+          {
+            style: "label-lg-medium",
+            className: "gds-input-image-label",
+            children: "Drag and drop"
+          }
+        ),
+        /* @__PURE__ */ e(
+          r,
+          {
+            style: "body-sm-regular",
+            className: "gds-input-image-separator",
+            children: "or"
+          }
+        ),
+        /* @__PURE__ */ e(
+          d,
+          {
+            variant: "primary",
+            size: "small",
+            onClick: g,
+            className: "gds-input-image-button",
+            children: "Click to upload"
+          }
+        )
+      ] })
+    }
+  ) : i === "Filled" ? /* @__PURE__ */ t(
+    "div",
+    {
+      className: `gds-input-image gds-input-image-filled ${a}`.trim(),
+      "data-component": "InputImage",
+      "data-state": i,
+      children: [
+        n && /* @__PURE__ */ e(
+          "img",
+          {
+            src: n,
+            alt: l,
+            className: "gds-input-image-preview"
+          }
+        ),
+        /* @__PURE__ */ e(
+          d,
+          {
+            variant: "primary",
+            size: "small",
+            onClick: h,
+            className: "gds-input-image-remove-button",
+            iconLeft: /* @__PURE__ */ e(
+              "svg",
+              {
+                width: "16",
+                height: "16",
+                viewBox: "0 0 16 16",
+                fill: "none",
+                xmlns: "http://www.w3.org/2000/svg",
+                "aria-hidden": "true",
+                children: /* @__PURE__ */ e(
+                  "path",
+                  {
+                    d: "M12 4L4 12M4 4L12 12",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round"
+                  }
+                )
+              }
+            )
+          }
+        )
+      ]
+    }
+  ) : i === "Loading" ? /* @__PURE__ */ e(
+    "div",
+    {
+      className: `gds-input-image gds-input-image-loading ${a}`.trim(),
+      "data-component": "InputImage",
+      "data-state": i
+    }
+  ) : i === "Generating" ? /* @__PURE__ */ e(
+    "div",
+    {
+      className: `gds-input-image gds-input-image-generating ${a}`.trim(),
+      "data-component": "InputImage",
+      "data-state": i,
+      children: /* @__PURE__ */ e("div", { className: "gds-input-image-blur-container", children: n && /* @__PURE__ */ e(
+        "img",
+        {
+          src: n,
+          alt: l,
+          className: "gds-input-image-blur-preview"
+        }
+      ) })
+    }
+  ) : i === "Generated" ? /* @__PURE__ */ t(
+    "div",
+    {
+      className: `gds-input-image gds-input-image-generated ${a}`.trim(),
+      "data-component": "InputImage",
+      "data-state": i,
+      children: [
+        n && /* @__PURE__ */ e(
+          "img",
+          {
+            src: n,
+            alt: l,
+            className: "gds-input-image-result"
+          }
+        ),
+        c && /* @__PURE__ */ t(
+          "div",
+          {
+            className: "gds-input-image-comparison-slider",
+            style: {
+              left: `${v}%`
+            },
+            children: [
+              /* @__PURE__ */ e("div", { className: "gds-input-image-slider-line" }),
+              /* @__PURE__ */ e(
+                d,
+                {
+                  variant: "secondary",
+                  size: "small",
+                  className: "gds-input-image-slider-button",
+                  iconLeft: /* @__PURE__ */ t(
+                    "svg",
+                    {
+                      width: "16",
+                      height: "16",
+                      viewBox: "0 0 16 16",
+                      fill: "none",
+                      xmlns: "http://www.w3.org/2000/svg",
+                      "aria-hidden": "true",
+                      children: [
+                        /* @__PURE__ */ e(
+                          "path",
+                          {
+                            d: "M6 12L2 8L6 4",
+                            stroke: "currentColor",
+                            strokeWidth: "2",
+                            strokeLinecap: "round",
+                            strokeLinejoin: "round"
+                          }
+                        ),
+                        /* @__PURE__ */ e(
+                          "path",
+                          {
+                            d: "M10 4L14 8L10 12",
+                            stroke: "currentColor",
+                            strokeWidth: "2",
+                            strokeLinecap: "round",
+                            strokeLinejoin: "round"
+                          }
+                        )
+                      ]
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  ) : i === "Disabled" ? /* @__PURE__ */ e(
+    "div",
+    {
+      className: `gds-input-image gds-input-image-disabled ${a}`.trim(),
+      "data-component": "InputImage",
+      "data-state": i,
+      children: s || /* @__PURE__ */ t(m, { children: [
+        /* @__PURE__ */ e(
+          r,
+          {
+            style: "label-lg-medium",
+            className: "gds-input-image-label",
+            children: "Drag and drop"
+          }
+        ),
+        /* @__PURE__ */ e(
+          r,
+          {
+            style: "body-sm-regular",
+            className: "gds-input-image-separator",
+            children: "or"
+          }
+        ),
+        /* @__PURE__ */ e(
+          d,
+          {
+            variant: "primary",
+            size: "small",
+            disabled: !0,
+            className: "gds-input-image-button",
+            children: "Click to upload"
+          }
+        )
+      ] })
+    }
+  ) : /* @__PURE__ */ e(
+    "div",
+    {
+      className: `gds-input-image gds-input-image-default ${a}`.trim(),
+      "data-component": "InputImage",
+      "data-state": "Default",
+      children: s
+    }
+  );
+}
+export {
+  k as InputImage,
+  k as default
+};
+//# sourceMappingURL=InputImage.js.map