{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "theme",
  "title": "Polaris Theme",
  "description": "Shopify Polaris design tokens, typography and base styles for polaris-shadcn components. Install with `init` before adding components.",
  "dependencies": [
    "clsx",
    "tailwind-merge"
  ],
  "devDependencies": [
    "@shopify/polaris-types"
  ],
  "files": [
    {
      "path": "registry/templates/styles/polaris-shadcn.css",
      "content": "@theme {\n  --font-sans: \"Inter\", -apple-system, BlinkMacSystemFont, \"San Francisco\", \"Segoe UI\",\n    Roboto, \"Helvetica Neue\", sans-serif;\n  --font-serif: \"Inter\", -apple-system, BlinkMacSystemFont, \"San Francisco\", \"Segoe UI\",\n    Roboto, \"Helvetica Neue\", sans-serif;\n\n  /*\n   * Typography\n   * - Default to Tailwind's `text-sm` size (Polaris-like density)\n   * - Alias `text-base` to `text-sm` so \"default\" and \"sm\" match\n   * - Do NOT flatten the entire scale: allow intentional breakouts via `text-lg`, `text-xl`, etc.\n   */\n  --text-sm: 0.8125rem;\n  --text-sm--line-height: 1.25rem;\n  --text-base: var(--text-sm);\n  --text-base--line-height: var(--text-sm--line-height);\n\n  --color-background: #f1f1f1;\n  --color-foreground: oklch(0.2 0.02 250);\n  --color-card: oklch(1 0 0);\n  --color-card-foreground: oklch(0.2 0.02 250);\n  /* bg-muted should match Polaris subdued surfaces. */\n  --color-surface-subdued: #f7f7f7;\n  --color-muted: var(--color-surface-subdued);\n  --color-muted-foreground: oklch(0.48 0.02 250);\n  --color-border: oklch(0.88 0.01 250);\n  --color-input: oklch(0.94 0.01 250);\n  --color-primary: oklch(0.58 0.12 250);\n  --color-primary-foreground: oklch(1 0 0);\n  --color-secondary: oklch(0.93 0.01 250);\n  --color-secondary-foreground: oklch(0.22 0.02 250);\n  --color-accent: oklch(0.92 0.03 160);\n  --color-accent-foreground: oklch(0.22 0.05 160);\n  --color-sidebar: var(--color-card);\n  --color-sidebar-foreground: var(--p-color-text);\n  --color-sidebar-primary: var(--p-color-bg-fill-brand);\n  --color-sidebar-primary-foreground: var(--p-color-text-brand-on-bg-fill);\n  --color-sidebar-accent: var(--color-muted);\n  --color-sidebar-accent-foreground: var(--color-foreground);\n  --color-destructive: oklch(0.6 0.19 25);\n  --color-destructive-foreground: oklch(1 0 0);\n  --color-ring: oklch(0.6 0.1 250);\n  --chart-1: 12 76% 61%;\n  --chart-2: 173 58% 39%;\n  --chart-3: 197 37% 24%;\n  --chart-4: 43 74% 66%;\n  --chart-5: 27 87% 67%;\n  /* shadcn defaults expect these tokens. */\n  --background: var(--color-background);\n  --foreground: var(--color-foreground);\n\n  /* Polaris token subset used by polaris-shadcn components. */\n  --p-border-radius-0: 0px;\n  --p-border-radius-300: 12px;\n  --p-shadow-100: 0px 1px 0px 0px rgba(26, 26, 26, 0.07);\n  --p-shadow-bevel-100: 1px 0px 0px 0px rgba(0, 0, 0, 0.13) inset,\n    -1px 0px 0px 0px rgba(0, 0, 0, 0.13) inset,\n    0px -1px 0px 0px rgba(0, 0, 0, 0.17) inset,\n    0px 1px 0px 0px rgba(204, 204, 204, 0.5) inset;\n\n  --radius: 12px;\n}\n\n@layer base {\n  * {\n    border-color: var(--color-border);\n  }\n\n  html {\n    font-family: var(--font-sans);\n  }\n\n  body {\n    margin: var(--p-space-200);\n    font-size: var(--text-sm);\n    line-height: var(--text-sm--line-height);\n  }\n\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    font-size: inherit;\n    line-height: inherit;\n  }\n\n  :root {\n    --p-border-radius-0: 0rem;\n    --p-border-radius-200: 0.5rem;\n    --p-border-radius-300: 0.75rem;\n    --p-border-width-050: 0.125rem;\n    --p-color-bg-fill: rgba(255, 255, 255, 1);\n    --p-color-bg-fill-active: rgba(247, 247, 247, 1);\n    --p-color-bg-fill-brand: rgba(48, 48, 48, 1);\n    --p-color-bg-fill-brand-active: rgba(26, 26, 26, 1);\n    --p-color-bg-fill-brand-disabled: rgba(0, 0, 0, 0.17);\n    --p-color-bg-fill-brand-hover: rgba(26, 26, 26, 1);\n    --p-color-bg-fill-critical: rgba(199, 10, 36, 1);\n    --p-color-bg-fill-critical-active: rgba(142, 11, 33, 1);\n    --p-color-bg-fill-critical-hover: rgba(163, 10, 36, 1);\n    --p-color-bg-fill-critical-selected: rgba(142, 11, 33, 1);\n    --p-color-bg-fill-disabled: rgba(0, 0, 0, 0.05);\n    --p-color-bg-fill-hover: rgba(250, 250, 250, 1);\n    --p-color-bg-fill-selected: rgba(204, 204, 204, 1);\n    --p-color-bg-fill-success: rgba(4, 123, 93, 1);\n    --p-color-bg-fill-success-active: rgba(1, 75, 64, 1);\n    --p-color-bg-fill-success-hover: rgba(3, 94, 76, 1);\n    --p-color-bg-fill-transparent-active: rgba(0, 0, 0, 0.08);\n    --p-color-bg-fill-transparent-hover: rgba(0, 0, 0, 0.05);\n    --p-color-border-focus: rgba(0, 91, 211, 1);\n    --p-color-button-gradient-bg-fill: linear-gradient(\n      180deg,\n      rgba(48, 48, 48, 0) 63.53%,\n      rgba(255, 255, 255, 0.15) 100%\n    );\n    --p-color-icon: rgba(74, 74, 74, 1);\n    --p-color-icon-disabled: rgba(204, 204, 204, 1);\n    --p-color-icon-secondary: rgba(138, 138, 138, 1);\n    --p-color-icon-secondary-active: rgba(74, 74, 74, 1);\n    --p-color-icon-secondary-hover: rgba(97, 97, 97, 1);\n    --p-color-text: rgba(48, 48, 48, 1);\n    --p-color-text-brand-on-bg-fill: rgba(255, 255, 255, 1);\n    --p-color-text-brand-on-bg-fill-disabled: rgba(255, 255, 255, 1);\n    --p-color-text-critical: rgba(142, 11, 33, 1);\n    --p-color-text-critical-active: rgba(47, 4, 11, 1);\n    --p-color-text-critical-hover: rgba(95, 7, 22, 1);\n    --p-color-text-disabled: rgba(181, 181, 181, 1);\n    --p-color-text-link: rgba(0, 91, 211, 1);\n    --p-color-text-link-active: rgba(0, 46, 106, 1);\n    --p-color-text-link-hover: rgba(0, 66, 153, 1);\n    --p-color-text-success: rgba(1, 75, 64, 1);\n    --p-color-text-success-active: rgba(2, 38, 34, 1);\n    --p-color-text-success-hover: rgba(7, 54, 48, 1);\n    --p-font-family-sans: \"Inter\", -apple-system, BlinkMacSystemFont, \"San Francisco\",\n      \"Segoe UI\", Roboto, \"Helvetica Neue\", sans-serif;\n    --p-font-size-325: 0.75rem;\n    --p-font-line-height-500: 1.25rem;\n    --p-font-weight-medium: 550;\n    --p-height-500: 1.25rem;\n    --p-height-600: 1.5rem;\n    --p-height-700: 1.75rem;\n    --p-height-800: 2rem;\n    --p-height-900: 2.25rem;\n    --p-shadow-button: 0rem -0.0625rem 0rem 0rem #b5b5b5 inset,\n      0rem 0rem 0rem 0.0625rem rgba(0, 0, 0, 0.1) inset,\n      0rem 0.03125rem 0rem 0.09375rem #fff inset;\n    --p-shadow-button-inset: -0.0625rem 0rem 0.0625rem 0rem rgba(26, 26, 26, 0.122) inset,\n      0.0625rem 0rem 0.0625rem 0rem rgba(26, 26, 26, 0.122) inset,\n      0rem 0.125rem 0.0625rem 0rem rgba(26, 26, 26, 0.2) inset;\n    --p-shadow-button-primary: 0rem -0.0625rem 0rem 0.0625rem rgba(0, 0, 0, 0.8) inset,\n      0rem 0rem 0rem 0.0625rem rgba(48, 48, 48, 1) inset,\n      0rem 0.03125rem 0rem 0.09375rem rgba(255, 255, 255, 0.25) inset;\n    --p-shadow-button-primary-critical: 0rem -0.0625rem 0rem 0.0625rem rgba(142, 31, 11, 0.8)\n        inset,\n      0rem 0rem 0rem 0.0625rem rgba(181, 38, 11, 0.8) inset,\n      0rem 0.03125rem 0rem 0.09375rem rgba(255, 255, 255, 0.349) inset;\n    --p-shadow-button-primary-critical-inset: -0.0625rem 0rem 0.0625rem 0rem\n        rgba(0, 0, 0, 0.2) inset,\n      0.0625rem 0rem 0.0625rem 0rem rgba(0, 0, 0, 0.2) inset,\n      0rem 0.125rem 0rem 0rem rgba(0, 0, 0, 0.6) inset;\n    --p-shadow-button-primary-inset: 0rem 0.1875rem 0rem 0rem rgb(0, 0, 0) inset;\n    --p-shadow-button-primary-success: 0rem -0.0625rem 0rem 0.0625rem rgba(12, 81, 50, 0.8)\n        inset,\n      0rem 0rem 0rem 0.0625rem rgba(19, 111, 69, 0.8) inset,\n      0rem 0.03125rem 0rem 0.09375rem rgba(255, 255, 255, 0.251) inset;\n    --p-shadow-button-primary-success-inset: -0.0625rem 0rem 0.0625rem 0rem\n        rgba(0, 0, 0, 0.2) inset,\n      0.0625rem 0rem 0.0625rem 0rem rgba(0, 0, 0, 0.2) inset,\n      0rem 0.125rem 0rem 0rem rgba(0, 0, 0, 0.6) inset;\n    --p-space-025: 0.0625rem;\n    --p-space-050: 0.125rem;\n    --p-space-100: 0.25rem;\n    --p-space-150: 0.375rem;\n    --p-space-200: 0.5rem;\n    --p-space-300: 0.75rem;\n    --p-space-500: 1.25rem;\n    --p-width-500: 1.25rem;\n    --p-width-600: 1.5rem;\n    --p-width-700: 1.75rem;\n    --p-width-800: 2rem;\n  }\n}\n\n@layer components {\n  .polaris-shadcn-card {\n    --polaris-shadcn-card-radius: var(--p-border-radius-0);\n    position: relative;\n    overflow: clip;\n    z-index: 0;\n    box-shadow: var(--p-shadow-100);\n    border-radius: var(--polaris-shadcn-card-radius);\n  }\n\n  .polaris-shadcn-card::before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    z-index: 32;\n    box-shadow: var(--p-shadow-bevel-100);\n    border-radius: var(--polaris-shadcn-card-radius);\n    pointer-events: none;\n    mix-blend-mode: luminosity;\n  }\n\n  @media (min-width: 490px) {\n    .polaris-shadcn-card {\n      --polaris-shadcn-card-radius: var(--p-border-radius-300);\n    }\n  }\n\n  .polaris-shadcn-skeleton {\n    background-color: var(--color-border);\n    background-image: linear-gradient(\n      90deg,\n      rgba(0, 0, 0, 0),\n      rgba(0, 0, 0, 0.12),\n      rgba(0, 0, 0, 0)\n    );\n    background-size: 200% 100%;\n    opacity: 0.25;\n    animation: polaris-shadcn-shimmer 1.6s ease-in-out infinite;\n  }\n\n  .polaris-shadcn-accordion-icon {\n    display: inline-flex;\n  }\n\n  .polaris-shadcn-accordion-trigger .polaris-shadcn-accordion-icon--open {\n    display: none;\n  }\n\n  .polaris-shadcn-accordion-trigger[data-state=\"open\"]\n    .polaris-shadcn-accordion-icon--open {\n    display: inline-flex;\n  }\n\n  .polaris-shadcn-accordion-trigger[data-state=\"open\"]\n    .polaris-shadcn-accordion-icon--closed {\n    display: none;\n  }\n\n  .Polaris-Button {\n    --pc-button-gap: var(--p-space-050);\n    --pc-button-bg: transparent;\n    --pc-button-bg_hover: var(--pc-button-bg);\n    --pc-button-bg_active: var(--pc-button-bg);\n    --pc-button-bg_pressed: var(--pc-button-bg_active);\n    --pc-button-bg_disabled: var(--p-color-bg-fill-disabled);\n    --pc-button-color: inherit;\n    --pc-button-color_hover: var(--pc-button-color);\n    --pc-button-color_active: var(--pc-button-color);\n    --pc-button-color_pressed: var(--pc-button-color_active);\n    --pc-button-color_disabled: var(--p-color-text-disabled);\n    --pc-button-box-shadow: transparent;\n    --pc-button-box-shadow_hover: var(--pc-button-box-shadow);\n    --pc-button-box-shadow_active: var(--pc-button-box-shadow);\n    --pc-button-box-shadow_pressed: var(--pc-button-box-shadow_active);\n    --pc-button-box-shadow_disabled: var(--pc-button-box-shadow);\n    --pc-button-icon-fill: currentColor;\n    --pc-button-icon-fill_hover: var(--pc-button-icon-fill);\n    --pc-button-icon-fill_active: var(--pc-button-icon-fill);\n    --pc-button-icon-fill_pressed: var(--pc-button-icon-fill_active);\n    --pc-button-icon-fill_disabled: var(--p-color-icon-disabled);\n    all: unset;\n    position: relative;\n    box-sizing: border-box;\n    display: inline-flex;\n    align-items: center;\n    gap: var(--pc-button-gap);\n    padding: var(--pc-button-padding-block) var(--pc-button-padding-inline);\n    background: var(--pc-button-bg);\n    border: none;\n    border-radius: var(--p-border-radius-200);\n    box-shadow: var(--pc-button-box-shadow);\n    color: var(--pc-button-color);\n    cursor: pointer;\n    -webkit-user-select: none;\n    user-select: none;\n    touch-action: manipulation;\n    -webkit-tap-highlight-color: transparent;\n    font-family: var(--p-font-family-sans);\n    font-size: var(--p-font-size-325);\n    font-weight: var(--p-font-weight-medium);\n    line-height: var(--p-font-line-height-500);\n  }\n\n  .Polaris-Button.Polaris-Button svg {\n    fill: var(--pc-button-icon-fill);\n  }\n\n  .Polaris-Button.Polaris-Button:hover svg {\n    fill: var(--pc-button-icon-fill_hover);\n  }\n\n  .Polaris-Button.Polaris-Button:active,\n  .Polaris-Button.Polaris-Button[data-state='open'] svg {\n    fill: var(--pc-button-icon-fill_active);\n  }\n\n  .Polaris-Button.Polaris-Button:disabled,\n  .Polaris-Button.Polaris-Button[disabled],\n  .Polaris-Button--disabled.Polaris-Button--disabled svg {\n    fill: var(--pc-button-icon-fill_disabled);\n  }\n\n  .Polaris-Button--pressed.Polaris-Button--pressed,\n  .Polaris-Button--pressed.Polaris-Button--pressed:hover,\n  .Polaris-Button--pressed.Polaris-Button--pressed:active,\n  .Polaris-Button--pressed.Polaris-Button--pressed:focus-visible svg {\n    fill: var(--pc-button-icon-fill_pressed);\n  }\n\n  .Polaris-Button:hover {\n    background: var(--pc-button-bg_hover);\n    color: var(--pc-button-color_hover);\n    box-shadow: var(--pc-button-box-shadow_hover);\n  }\n\n  .Polaris-Button:active,\n  .Polaris-Button[data-state='open'] {\n    background: var(--pc-button-bg_active);\n    color: var(--pc-button-color_active);\n    box-shadow: var(--pc-button-box-shadow_active);\n  }\n\n  .Polaris-Button:focus-visible {\n    background: var(--pc-button-bg_hover);\n    color: var(--pc-button-color_hover);\n    outline: var(--p-border-width-050) solid var(--p-color-border-focus);\n    outline-offset: var(--p-space-025);\n  }\n\n  .Polaris-Button:focus-visible::after {\n    content: none;\n  }\n\n  .Polaris-Button:disabled,\n  .Polaris-Button[disabled],\n  .Polaris-Button--disabled {\n    background: var(--pc-button-bg_disabled);\n    color: var(--pc-button-color_disabled);\n    box-shadow: none;\n    -webkit-user-select: none;\n    user-select: none;\n    pointer-events: none;\n  }\n\n  .Polaris-Button--pressed,\n  .Polaris-Button--pressed:hover,\n  .Polaris-Button--pressed:active,\n  .Polaris-Button--pressed:focus-visible {\n    background: var(--pc-button-bg_pressed);\n    color: var(--pc-button-color_pressed);\n    box-shadow: var(--pc-button-box-shadow_pressed);\n  }\n\n  .Polaris-Button--variantPrimary {\n    --pc-button-bg-gradient: var(--p-color-button-gradient-bg-fill);\n    --pc-button-box-shadow: var(--p-shadow-button-primary);\n    --pc-button-box-shadow_active: var(--p-shadow-button-primary-inset);\n    --pc-button-bg: var(--pc-button-bg-gradient), var(--p-color-bg-fill-brand);\n    --pc-button-bg_hover: var(--pc-button-bg-gradient), var(--p-color-bg-fill-brand-hover);\n    --pc-button-bg_active: var(--pc-button-bg-gradient), var(--p-color-bg-fill-brand-active);\n    --pc-button-bg_disabled: var(--p-color-bg-fill-brand-disabled);\n    --pc-button-color: var(--p-color-text-brand-on-bg-fill);\n    --pc-button-color_disabled: var(--p-color-text-brand-on-bg-fill-disabled);\n    --pc-button-icon-fill: var(--p-color-text-brand-on-bg-fill);\n    --pc-button-icon-fill_disabled: var(--p-color-text-brand-on-bg-fill-disabled);\n  }\n\n  .Polaris-Button--variantSecondary {\n    --pc-button-box-shadow: var(--p-shadow-button);\n    --pc-button-box-shadow_active: var(--p-shadow-button-inset);\n    --pc-button-bg: var(--p-color-bg-fill);\n    --pc-button-bg_hover: var(--p-color-bg-fill-hover);\n    --pc-button-bg_active: var(--p-color-bg-fill-active);\n    --pc-button-bg_pressed: var(--p-color-bg-fill-selected);\n    --pc-button-color: var(--p-color-text);\n    --pc-button-icon-fill: var(--p-color-icon);\n  }\n\n  .Polaris-Button--variantTertiary {\n    --pc-button-bg_hover: var(--p-color-bg-fill-transparent-hover);\n    --pc-button-bg_active: var(--p-color-bg-fill-transparent-active);\n    --pc-button-bg_pressed: var(--p-color-bg-fill-selected);\n    --pc-button-bg_disabled: transparent;\n    --pc-button-color: var(--p-color-text);\n    --pc-button-icon-fill: var(--p-color-icon);\n  }\n\n  .Polaris-Button--variantPlain {\n    --pc-button-color: var(--p-color-text-link);\n    --pc-button-color_hover: var(--p-color-text-link-hover);\n    --pc-button-color_active: var(--p-color-text-link-active);\n  }\n\n  .Polaris-Button--variantPlain:is(:hover, :active, :focus-visible):not(\n      .Polaris-Button--removeUnderline\n    ) {\n    text-decoration: underline;\n  }\n\n  .Polaris-Button--variantMonochromePlain {\n    --pc-button-icon-fill: currentColor;\n  }\n\n  .Polaris-Button--variantPlain,\n  .Polaris-Button--variantMonochromePlain {\n    --pc-button-bg_disabled: transparent;\n    margin: calc(var(--pc-button-padding-block) * -1)\n      calc(var(--pc-button-padding-inline) * -1);\n  }\n\n  .Polaris-Button--variantPlain:focus-visible,\n  .Polaris-Button--variantMonochromePlain:focus-visible {\n    border-radius: var(--p-border-radius-300);\n    outline-offset: calc(var(--pc-button-padding-block) * -1);\n  }\n\n  .Polaris-Button--toneSuccess:is(\n      .Polaris-Button--variantSecondary,\n      .Polaris-Button--variantTertiary,\n      .Polaris-Button--variantPlain\n    ) {\n    --pc-button-color: var(--p-color-text-success);\n    --pc-button-color_hover: var(--p-color-text-success-hover);\n    --pc-button-color_active: var(--p-color-text-success-active);\n    --pc-button-icon-fill: currentColor;\n  }\n\n  .Polaris-Button--toneCritical:is(\n      .Polaris-Button--variantSecondary,\n      .Polaris-Button--variantTertiary,\n      .Polaris-Button--variantPlain\n    ) {\n    --pc-button-color: var(--p-color-text-critical);\n    --pc-button-color_hover: var(--p-color-text-critical-hover);\n    --pc-button-color_active: var(--p-color-text-critical-active);\n    --pc-button-icon-fill: currentColor;\n  }\n\n  .Polaris-Button--toneSuccess:is(.Polaris-Button--variantPrimary) {\n    --pc-button-box-shadow: var(--p-shadow-button-primary-success);\n    --pc-button-box-shadow_active: var(--p-shadow-button-primary-success-inset);\n    --pc-button-bg: var(--p-color-bg-fill-success);\n    --pc-button-bg_hover: var(--p-color-bg-fill-success-hover);\n    --pc-button-bg_active: var(--p-color-bg-fill-success-active);\n    --pc-button-bg_pressed: var(--p-color-bg-fill-success-selected);\n  }\n\n  .Polaris-Button--toneCritical:is(.Polaris-Button--variantPrimary) {\n    --pc-button-box-shadow: var(--p-shadow-button-primary-critical);\n    --pc-button-box-shadow_active: var(--p-shadow-button-primary-critical-inset);\n    --pc-button-bg: var(--p-color-bg-fill-critical);\n    --pc-button-bg_hover: var(--p-color-bg-fill-critical-hover);\n    --pc-button-bg_active: var(--p-color-bg-fill-critical-active);\n    --pc-button-bg_pressed: var(--p-color-bg-fill-critical-selected);\n  }\n\n  .Polaris-Button--sizeMicro {\n    --pc-button-padding-block: var(--p-space-100);\n    --pc-button-padding-inline: var(--p-space-200);\n    min-height: var(--p-height-700);\n    min-width: var(--p-width-700);\n  }\n\n  @media (min-width: 48em) {\n    .Polaris-Button--sizeMicro {\n      min-height: var(--p-height-600);\n      min-width: var(--p-width-600);\n    }\n  }\n\n  .Polaris-Button--sizeSlim,\n  .Polaris-Button--sizeMedium {\n    --pc-button-padding-block: var(--p-space-150);\n    --pc-button-padding-inline: var(--p-space-300);\n    min-height: var(--p-height-800);\n    min-width: var(--p-width-800);\n  }\n\n  @media (min-width: 48em) {\n    .Polaris-Button--sizeSlim,\n    .Polaris-Button--sizeMedium {\n      min-height: var(--p-height-700);\n      min-width: var(--p-width-700);\n    }\n  }\n\n  .Polaris-Button--sizeLarge {\n    --pc-button-padding-block: var(--p-space-150);\n    --pc-button-padding-inline: var(--p-space-300);\n    min-height: var(--p-height-900);\n    min-width: var(--p-height-900);\n  }\n\n  @media (min-width: 48em) {\n    .Polaris-Button--sizeLarge {\n      min-height: var(--p-height-800);\n      min-width: var(--p-width-800);\n    }\n  }\n\n  .Polaris-Button--textAlignCenter {\n    justify-content: center;\n    text-align: center;\n  }\n\n  .Polaris-Button--textAlignStart,\n  .Polaris-Button--textAlignLeft {\n    justify-content: start;\n    text-align: start;\n  }\n\n  .Polaris-Button--textAlignEnd,\n  .Polaris-Button--textAlignRight {\n    justify-content: end;\n    text-align: end;\n  }\n\n  .Polaris-Button--fullWidth {\n    width: 100%;\n  }\n\n  .Polaris-Button--iconOnly {\n    --pc-button-padding-block: var(--p-space-100);\n    --pc-button-padding-inline: var(--p-space-100);\n  }\n\n  .Polaris-Button--iconOnly:is(.Polaris-Button--sizeLarge) {\n    --pc-button-padding-block: var(--p-space-150);\n    --pc-button-padding-inline: var(--p-space-150);\n  }\n\n  .Polaris-Button--iconOnly:is(.Polaris-Button--sizeMicro) {\n    --pc-button-padding-block: var(--p-space-050);\n    --pc-button-padding-inline: var(--p-space-050);\n  }\n\n  .Polaris-Button--iconOnly:is(.Polaris-Button--variantTertiary) {\n    margin: calc(var(--pc-button-padding-block) * -1)\n      calc(var(--pc-button-padding-inline) * -1);\n  }\n\n  .Polaris-Button--iconOnly:is(\n      .Polaris-Button--variantTertiary,\n      .Polaris-Button--variantPlain\n    ):not(.Polaris-Button--toneCritical) {\n    --pc-button-icon-fill: var(--p-color-icon-secondary);\n    --pc-button-icon-fill_hover: var(--p-color-icon-secondary-hover);\n    --pc-button-icon-fill_active: var(--p-color-icon-secondary-active);\n    --pc-button-icon-fill_disabled: var(--p-color-icon-disabled);\n  }\n\n  .Polaris-Button--iconOnly:is(.Polaris-Button--variantMonochromePlain) {\n    --pc-button-icon-fill: currentColor;\n    --pc-button-icon-fill_hover: var(--p-color-icon-secondary-hover);\n    --pc-button-icon-fill_active: var(--p-color-icon-secondary-active);\n    --pc-button-icon-fill_disabled: var(--p-color-icon-disabled);\n  }\n\n  .Polaris-Button--iconOnly:is(\n      .Polaris-Button--variantPlain,\n      .Polaris-Button--variantMonochromePlain\n    ) {\n    --pc-button-padding-block: 0;\n    --pc-button-padding-inline: 0;\n    margin: 0;\n    min-height: var(--p-height-500);\n    min-width: var(--p-width-500);\n  }\n\n  .Polaris-Button--iconWithText:not(\n      .Polaris-Button--variantPlain,\n      .Polaris-Button--variantMonochromePlain\n    ) {\n    padding-left: calc(var(--pc-button-padding-inline) * 0.5);\n  }\n\n  .Polaris-Button--disclosure:not(\n      .Polaris-Button--variantPlain,\n      .Polaris-Button--variantMonochromePlain\n    ) {\n    padding-right: calc(var(--pc-button-padding-inline) * 0.5);\n  }\n\n  .Polaris-Button--disclosure:is(\n      .Polaris-Button--textAlignStart,\n      .Polaris-Button--textAlignLeft\n    ) {\n    justify-content: space-between;\n  }\n\n  .Polaris-Button--loading {\n    color: transparent;\n  }\n\n  .Polaris-Button--pressable:active:not(\n      .Polaris-Button--variantTertiary,\n      .Polaris-Button--variantPlain,\n      .Polaris-Button--variantMonochromePlain\n    )\n    > * {\n    transform: translate3d(0, 0.0625rem, 0);\n  }\n\n  .Polaris-Button--hidden {\n    visibility: hidden;\n  }\n\n  .Polaris-Button__Icon {\n    margin: calc(var(--p-space-050) * -1) 0;\n  }\n\n  .Polaris-Button__Spinner {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n  }\n\n  .Polaris-Button__Spinner svg {\n    fill: var(--pc-button-icon-fill_disabled);\n    vertical-align: middle;\n  }\n\n  [data-buttongroup-variant='segmented']\n    > *:not(:first-child)\n    .Polaris-Button:is(.Polaris-Button--variantPrimary) {\n    margin-left: calc(var(--p-space-025) * -1);\n  }\n\n  [data-buttongroup-variant='segmented'] > *:not(:first-child) .Polaris-Button {\n    border-top-left-radius: var(--p-border-radius-0);\n    border-bottom-left-radius: var(--p-border-radius-0);\n  }\n\n  [data-buttongroup-variant='segmented'] > *:not(:last-child) .Polaris-Button {\n    border-top-right-radius: var(--p-border-radius-0);\n    border-bottom-right-radius: var(--p-border-radius-0);\n  }\n\n  [data-buttongroup-full-width='true'] .Polaris-Button {\n    width: 100%;\n  }\n\n  @media (min-width: 48em) {\n    [data-buttongroup-full-width='true'] .Polaris-Button {\n      white-space: nowrap;\n    }\n  }\n\n  [data-buttongroup-connected-top='true'] > *:first-child .Polaris-Button {\n    border-top-left-radius: var(--p-border-radius-0);\n  }\n\n  [data-buttongroup-connected-top='true'] > *:last-child .Polaris-Button {\n    border-top-right-radius: var(--p-border-radius-0);\n  }\n\n  .Polaris-ButtonGroup {\n    --pc-button-group-item: 10;\n    --pc-button-group-focused: 20;\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    margin-top: calc(var(--p-space-200) * -1);\n    margin-left: calc(var(--p-space-200) * -1);\n  }\n\n  .Polaris-ButtonGroup__Item {\n    margin-top: var(--p-space-200);\n    margin-left: var(--p-space-200);\n  }\n\n  .Polaris-ButtonGroup__Item--plain:not(:first-child) {\n    margin-left: var(--p-space-200);\n  }\n\n  .Polaris-ButtonGroup__Item--plain:not(:last-child) {\n    margin-right: var(--p-space-200);\n  }\n\n  .Polaris-ButtonGroup--variantSegmented {\n    display: flex;\n    flex-wrap: nowrap;\n    margin-top: 0;\n    margin-left: 0;\n  }\n\n  .Polaris-ButtonGroup--variantSegmented .Polaris-ButtonGroup__Item {\n    position: relative;\n    margin-top: 0;\n    margin-left: 0;\n    line-height: 1;\n  }\n\n  .Polaris-ButtonGroup--variantSegmented .Polaris-ButtonGroup__Item:not(:first-child) {\n    margin-left: calc(var(--p-space-025) * -1);\n  }\n\n  .Polaris-ButtonGroup--variantSegmented [aria-pressed='true'] {\n    z-index: var(--pc-button-group-item);\n  }\n\n  .Polaris-ButtonGroup--variantSegmented .Polaris-ButtonGroup__Item--focused {\n    z-index: var(--pc-button-group-focused);\n  }\n\n  .Polaris-ButtonGroup--fullWidth .Polaris-ButtonGroup__Item {\n    flex: 1 1 auto;\n  }\n\n  .Polaris-ButtonGroup--extraTight {\n    margin-top: calc(var(--p-space-100) * -1);\n    margin-left: calc(var(--p-space-100) * -1);\n  }\n\n  .Polaris-ButtonGroup--extraTight .Polaris-ButtonGroup__Item {\n    margin-top: var(--p-space-100);\n    margin-left: var(--p-space-100);\n  }\n\n  .Polaris-ButtonGroup--tight {\n    margin-top: calc(var(--p-space-200) * -1);\n    margin-left: calc(var(--p-space-200) * -1);\n  }\n\n  .Polaris-ButtonGroup--tight .Polaris-ButtonGroup__Item {\n    margin-top: var(--p-space-200);\n    margin-left: var(--p-space-200);\n  }\n\n  .Polaris-ButtonGroup--loose {\n    margin-top: calc(var(--p-space-500) * -1);\n    margin-left: calc(var(--p-space-500) * -1);\n  }\n\n  .Polaris-ButtonGroup--loose .Polaris-ButtonGroup__Item {\n    margin-top: var(--p-space-500);\n    margin-left: var(--p-space-500);\n  }\n\n  .Polaris-ButtonGroup--noWrap {\n    display: flex;\n    flex-wrap: nowrap;\n  }\n\n  [data-sidebar=\"sidebar\"] {\n    min-width: 0;\n  }\n\n  [data-sidebar=\"sidebar\"][data-collapsible=\"icon\"][data-state=\"collapsed\"]\n    [data-sidebar=\"collapse-hide\"] {\n    opacity: 0;\n    width: 0;\n    height: 0;\n    overflow: hidden;\n    pointer-events: none;\n  }\n\n  [data-sidebar=\"sidebar\"][data-variant=\"rail\"] [data-sidebar=\"collapse-hide\"] {\n    opacity: 0;\n    width: 0;\n    height: 0;\n    overflow: hidden;\n    pointer-events: none;\n  }\n}\n\n@keyframes polaris-shadcn-shimmer {\n  0% {\n    background-position: 200% 0;\n  }\n\n  100% {\n    background-position: -200% 0;\n  }\n}\n\n@layer utilities {\n  [data-sidebar=\"sidebar\"][data-collapsible=\"icon\"][data-state=\"collapsed\"]\n    [data-sidebar=\"menu-button\"] {\n    width: 2rem !important;\n    height: 2rem !important;\n    padding: 0 !important;\n    justify-content: center !important;\n    gap: 0 !important;\n  }\n\n  [data-sidebar=\"sidebar\"][data-variant=\"rail\"] [data-sidebar=\"menu-button\"] {\n    width: 2rem !important;\n    height: 2rem !important;\n    padding: 0 !important;\n    justify-content: center !important;\n    gap: 0 !important;\n  }\n}\n",
      "type": "registry:file",
      "target": "~/polaris-shadcn.css"
    },
    {
      "path": "registry/templates/lib/utils.ts",
      "content": "import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n",
      "type": "registry:lib"
    }
  ],
  "css": {
    "@import \"../polaris-shadcn.css\"": {}
  },
  "docs": "If your app does not already load Polaris web components, add <script src=\"https://cdn.shopify.com/shopifycloud/polaris.js\"></script> to your HTML before the app entry module. Shopify's React Router template already loads it via AppProvider (@shopify/shopify-app-react-router) — skip this step there.",
  "type": "registry:style"
}