import { createContext, useContext, useLayoutEffect } from 'react';
import { useLocale, I18nProvider } from '@react-aria/i18n';
import { ModalProvider, useModalProvider } from '@react-aria/overlays';
import { filterDOMProps } from '@react-aria/utils';
import { DefaultLinkComponent, LinkComponentContext } from '@keystar/ui/link';
import { resetClassName, injectGlobal, css, tokenSchema, useMediaQuery, useMatchedBreakpoints, useStyleProps, BreakpointProvider } from '@keystar/ui/style';
import { forwardRefWithAs } from '@keystar/ui/utils/ts';
import { jsx } from 'react/jsx-runtime';

// Context is in a separate file to avoid fast refresh issue where the
// old provider context values are immediately replaced with the null default.
const Context = /*#__PURE__*/createContext(null);
Context.displayName = 'VoussoirProviderContext';

/**
 * Returns the settings and styles applied by the nearest parent
 * Provider. Properties explicitly set by the nearest parent Provider override
 * those provided by preceeding Providers.
 */
function useProvider() {
  let context = useContext(Context);
  if (!context) {
    throw new Error('Attempt to access context outside of VoussoirProvider.');
  }
  return context;
}
function useProviderProps(props) {
  let context = useProvider();
  if (!context) {
    return props;
  }
  return Object.assign({}, {
    // prominence: context.prominence,
    isDisabled: context.isDisabled,
    isRequired: context.isRequired,
    isReadOnly: context.isReadOnly
  }, props);
}

const cssCustomProperties = `
/**
 * Do not edit directly
 * Generated on Tue, 08 Aug 2023 02:28:13 GMT
 */

.ksv-scheme--auto,
.ksv-scheme--light {
  color-scheme: light;

  --ksv-color-scale-slate11: #2c2c2c;
  --ksv-color-scale-slate10: #4b4b4b;
  --ksv-color-scale-slate9: #6e6e6e;
  --ksv-color-scale-slate8: #8e8e8e;
  --ksv-color-scale-slate7: #b3b3b3;
  --ksv-color-scale-slate6: #cacaca;
  --ksv-color-scale-slate5: #e1e1e1;
  --ksv-color-scale-slate4: #eaeaea;
  --ksv-color-scale-slate3: #f5f5f5;
  --ksv-color-scale-slate2: #fafafa;
  --ksv-color-scale-slate1: #ffffff;
  --ksv-color-scale-red11: #cd2b31;
  --ksv-color-scale-red10: #dc3d43;
  --ksv-color-scale-red9: #e5484d;
  --ksv-color-scale-red8: #eb9091;
  --ksv-color-scale-red7: #f3aeaf;
  --ksv-color-scale-red6: #f9c6c6;
  --ksv-color-scale-red5: #fdd8d8;
  --ksv-color-scale-red4: #ffe5e5;
  --ksv-color-scale-red3: #ffefef;
  --ksv-color-scale-red2: #fff8f8;
  --ksv-color-scale-red1: #fffcfc;
  --ksv-color-scale-purple11: #793aaf;
  --ksv-color-scale-purple10: #8445bc;
  --ksv-color-scale-purple9: #8e4ec6;
  --ksv-color-scale-purple8: #be93e4;
  --ksv-color-scale-purple7: #d3b4ed;
  --ksv-color-scale-purple6: #e3ccf4;
  --ksv-color-scale-purple5: #eddbf9;
  --ksv-color-scale-purple4: #f3e7fc;
  --ksv-color-scale-purple3: #f9f1fe;
  --ksv-color-scale-purple2: #fdfaff;
  --ksv-color-scale-purple1: #fefcfe;
  --ksv-color-scale-pink11: #cd1d8d;
  --ksv-color-scale-pink10: #d23197;
  --ksv-color-scale-pink9: #d6409f;
  --ksv-color-scale-pink8: #e38ec3;
  --ksv-color-scale-pink7: #ecadd4;
  --ksv-color-scale-pink6: #f3c6e2;
  --ksv-color-scale-pink5: #f9d8ec;
  --ksv-color-scale-pink4: #fce5f3;
  --ksv-color-scale-pink3: #feeef8;
  --ksv-color-scale-pink2: #fff7fc;
  --ksv-color-scale-pink1: #fffcfe;
  --ksv-color-scale-indigo11: #3451b2;
  --ksv-color-scale-indigo10: #3a5ccc;
  --ksv-color-scale-indigo9: #3e63dd;
  --ksv-color-scale-indigo8: #8da4ef;
  --ksv-color-scale-indigo7: #aec0f5;
  --ksv-color-scale-indigo6: #c6d4f9;
  --ksv-color-scale-indigo5: #d9e2fc;
  --ksv-color-scale-indigo4: #e6edfe;
  --ksv-color-scale-indigo3: #f0f4ff;
  --ksv-color-scale-indigo2: #f8faff;
  --ksv-color-scale-indigo1: #fdfdfe;
  --ksv-color-scale-green11: #18794e;
  --ksv-color-scale-green10: #299764;
  --ksv-color-scale-green9: #30a46c;
  --ksv-color-scale-green8: #5bb98c;
  --ksv-color-scale-green7: #92ceac;
  --ksv-color-scale-green6: #b4dfc4;
  --ksv-color-scale-green5: #ccebd7;
  --ksv-color-scale-green4: #ddf3e4;
  --ksv-color-scale-green3: #e9f9ee;
  --ksv-color-scale-green2: #f2fcf5;
  --ksv-color-scale-green1: #fbfefc;
  --ksv-color-scale-amber11: #ad5700;
  --ksv-color-scale-amber10: #ffa01c;
  --ksv-color-scale-amber9: #ffb224;
  --ksv-color-scale-amber8: #ee9d2b;
  --ksv-color-scale-amber7: #f3ba63;
  --ksv-color-scale-amber6: #ffd386;
  --ksv-color-scale-amber5: #ffe3a2;
  --ksv-color-scale-amber4: #ffecbc;
  --ksv-color-scale-amber3: #fff4d5;
  --ksv-color-scale-amber2: #fff9ed;
  --ksv-color-scale-amber1: #fefdfb;
  --ksv-color-scale-white: #ffffff;
  --ksv-color-scale-black: #000000;
  --ksv-color-alias-foreground-selected: var(--ksv-color-scale-indigo11);
  --ksv-color-alias-foreground-disabled: var(--ksv-color-scale-slate7);
  --ksv-color-alias-foreground-focused: var(--ksv-color-scale-indigo11);
  --ksv-color-alias-foreground-pressed: var(--ksv-color-scale-slate11);
  --ksv-color-alias-foreground-hovered: var(--ksv-color-scale-slate11);
  --ksv-color-alias-foreground-idle: var(--ksv-color-scale-slate10);
  --ksv-color-alias-border-invalid: var(--ksv-color-scale-red9);
  --ksv-color-alias-border-selected: var(--ksv-color-scale-indigo9);
  --ksv-color-alias-border-disabled: var(--ksv-color-scale-slate4);
  --ksv-color-alias-border-focused: var(--ksv-color-scale-indigo9);
  --ksv-color-alias-border-pressed: var(--ksv-color-scale-slate8);
  --ksv-color-alias-border-hovered: var(--ksv-color-scale-slate7);
  --ksv-color-alias-border-idle: var(--ksv-color-scale-slate6);
  --ksv-color-alias-focus-ring: var(--ksv-color-scale-indigo9);
  --ksv-color-alias-background-selected-hovered: color-mix(in srgb, transparent, var(--ksv-color-scale-indigo9) 20%);
  --ksv-color-alias-background-selected: color-mix(in srgb, transparent, var(--ksv-color-scale-indigo9) 10%);
  --ksv-color-alias-background-pressed: color-mix(in srgb, transparent, var(--ksv-color-scale-slate11) 10%);
  --ksv-color-alias-background-focused: color-mix(in srgb, transparent, var(--ksv-color-scale-slate11) 6%);
  --ksv-color-alias-background-hovered: color-mix(in srgb, transparent, var(--ksv-color-scale-slate11) 6%);
  --ksv-color-alias-background-disabled: var(--ksv-color-scale-slate3);
  --ksv-color-alias-background-idle: color-mix(in srgb, transparent, var(--ksv-color-scale-slate11) 3%);
  --ksv-color-alias-blanket: color-mix(in srgb, transparent, var(--ksv-color-scale-black) 60%);
  --ksv-color-shadow-emphasis: color-mix(in srgb, transparent, var(--ksv-color-scale-black) 20%);
  --ksv-color-shadow-regular: color-mix(in srgb, transparent, var(--ksv-color-scale-black) 15%);
  --ksv-color-shadow-muted: color-mix(in srgb, transparent, var(--ksv-color-scale-black) 5%);
  --ksv-color-foreground-highlight: var(--ksv-color-scale-pink11);
  --ksv-color-foreground-pending: var(--ksv-color-scale-purple11);
  --ksv-color-foreground-critical: var(--ksv-color-scale-red11);
  --ksv-color-foreground-caution: var(--ksv-color-scale-amber11);
  --ksv-color-foreground-positive: var(--ksv-color-scale-green11);
  --ksv-color-foreground-accent: var(--ksv-color-scale-indigo11);
  --ksv-color-foreground-inverse-secondary: var(--ksv-color-scale-slate6);
  --ksv-color-foreground-inverse: var(--ksv-color-scale-slate2);
  --ksv-color-foreground-on-emphasis: var(--ksv-color-scale-white);
  --ksv-color-foreground-neutral-tertiary: var(--ksv-color-scale-slate8);
  --ksv-color-foreground-neutral-secondary: var(--ksv-color-scale-slate9);
  --ksv-color-foreground-neutral-emphasis: var(--ksv-color-scale-slate11);
  --ksv-color-foreground-neutral: var(--ksv-color-scale-slate10);
  --ksv-color-border-highlight: var(--ksv-color-scale-pink6);
  --ksv-color-border-pending: var(--ksv-color-scale-purple6);
  --ksv-color-border-critical: var(--ksv-color-scale-red6);
  --ksv-color-border-caution: var(--ksv-color-scale-amber6);
  --ksv-color-border-positive: var(--ksv-color-scale-green6);
  --ksv-color-border-accent: var(--ksv-color-scale-indigo6);
  --ksv-color-border-emphasis: var(--ksv-color-scale-slate6);
  --ksv-color-border-neutral: var(--ksv-color-scale-slate5);
  --ksv-color-border-muted: var(--ksv-color-scale-slate4);
  --ksv-color-background-highlight-emphasis: var(--ksv-color-scale-pink9);
  --ksv-color-background-highlight: var(--ksv-color-scale-pink3);
  --ksv-color-background-pending-emphasis: var(--ksv-color-scale-purple9);
  --ksv-color-background-pending: var(--ksv-color-scale-purple3);
  --ksv-color-background-critical-emphasis: var(--ksv-color-scale-red9);
  --ksv-color-background-critical: var(--ksv-color-scale-red3);
  --ksv-color-background-caution-emphasis: var(--ksv-color-scale-amber9);
  --ksv-color-background-caution: var(--ksv-color-scale-amber3);
  --ksv-color-background-positive-emphasis: var(--ksv-color-scale-green9);
  --ksv-color-background-positive: var(--ksv-color-scale-green3);
  --ksv-color-background-accent-emphasis: var(--ksv-color-scale-indigo9);
  --ksv-color-background-accent: var(--ksv-color-scale-indigo3);
  --ksv-color-background-inverse: var(--ksv-color-scale-slate10);
  --ksv-color-background-surface-tertiary: var(--ksv-color-scale-slate4);
  --ksv-color-background-surface-secondary: var(--ksv-color-scale-slate3);
  --ksv-color-background-surface: var(--ksv-color-scale-slate2);
  --ksv-color-background-canvas: var(--ksv-color-scale-slate1);
}
.ksv-scheme--dark {
  color-scheme: dark;

  --ksv-color-scale-slate11: #e3e3e3;
  --ksv-color-scale-slate10: #b9b9b9;
  --ksv-color-scale-slate9: #909090;
  --ksv-color-scale-slate8: #6e6e6e;
  --ksv-color-scale-slate7: #5a5a5a;
  --ksv-color-scale-slate6: #4a4a4a;
  --ksv-color-scale-slate5: #3e3e3e;
  --ksv-color-scale-slate4: #323232;
  --ksv-color-scale-slate3: #2f2f2f;
  --ksv-color-scale-slate2: #252525;
  --ksv-color-scale-slate1: #1f1f1f;
  --ksv-color-scale-red11: #ff6369;
  --ksv-color-scale-red10: #f2555a;
  --ksv-color-scale-red9: #e5484d;
  --ksv-color-scale-red8: #aa2429;
  --ksv-color-scale-red7: #822025;
  --ksv-color-scale-red6: #671e22;
  --ksv-color-scale-red5: #541b1f;
  --ksv-color-scale-red4: #481a1d;
  --ksv-color-scale-red3: #3c181a;
  --ksv-color-scale-red2: #291415;
  --ksv-color-scale-red1: #1f1315;
  --ksv-color-scale-purple11: #bf7af0;
  --ksv-color-scale-purple10: #9d5bd2;
  --ksv-color-scale-purple9: #8e4ec6;
  --ksv-color-scale-purple8: #7938b2;
  --ksv-color-scale-purple7: #5f2d84;
  --ksv-color-scale-purple6: #4e2667;
  --ksv-color-scale-purple5: #432155;
  --ksv-color-scale-purple4: #3a1e48;
  --ksv-color-scale-purple3: #301a3a;
  --ksv-color-scale-purple2: #221527;
  --ksv-color-scale-purple1: #1b141d;
  --ksv-color-scale-pink11: #f65cb6;
  --ksv-color-scale-pink10: #e34ba9;
  --ksv-color-scale-pink9: #d6409f;
  --ksv-color-scale-pink8: #a71873;
  --ksv-color-scale-pink7: #7a1d5a;
  --ksv-color-scale-pink6: #601d48;
  --ksv-color-scale-pink5: #501b3f;
  --ksv-color-scale-pink4: #451a37;
  --ksv-color-scale-pink3: #3a182f;
  --ksv-color-scale-pink2: #271421;
  --ksv-color-scale-pink1: #1f121b;
  --ksv-color-scale-indigo11: #849dff;
  --ksv-color-scale-indigo10: #5373e7;
  --ksv-color-scale-indigo9: #3e63dd;
  --ksv-color-scale-indigo8: #2f4eb2;
  --ksv-color-scale-indigo7: #273e89;
  --ksv-color-scale-indigo6: #22346e;
  --ksv-color-scale-indigo5: #1f2c5c;
  --ksv-color-scale-indigo4: #1c274f;
  --ksv-color-scale-indigo3: #192140;
  --ksv-color-scale-indigo2: #15192d;
  --ksv-color-scale-indigo1: #131620;
  --ksv-color-scale-green11: #4cc38a;
  --ksv-color-scale-green10: #3cb179;
  --ksv-color-scale-green9: #30a46c;
  --ksv-color-scale-green8: #236e4a;
  --ksv-color-scale-green7: #1b543a;
  --ksv-color-scale-green6: #164430;
  --ksv-color-scale-green5: #133929;
  --ksv-color-scale-green4: #113123;
  --ksv-color-scale-green3: #0f291e;
  --ksv-color-scale-green2: #0c1f17;
  --ksv-color-scale-green1: #0d1912;
  --ksv-color-scale-amber11: #f1a10d;
  --ksv-color-scale-amber10: #ffcb47;
  --ksv-color-scale-amber9: #ffb224;
  --ksv-color-scale-amber8: #824e00;
  --ksv-color-scale-amber7: #693f05;
  --ksv-color-scale-amber6: #573300;
  --ksv-color-scale-amber5: #4a2900;
  --ksv-color-scale-amber4: #3f2200;
  --ksv-color-scale-amber3: #341c00;
  --ksv-color-scale-amber2: #271700;
  --ksv-color-scale-amber1: #1f1300;
  --ksv-color-scale-white: #ffffff;
  --ksv-color-scale-black: #000000;
  --ksv-color-alias-foreground-selected: var(--ksv-color-scale-indigo11);
  --ksv-color-alias-foreground-disabled: var(--ksv-color-scale-slate7);
  --ksv-color-alias-foreground-focused: var(--ksv-color-scale-indigo11);
  --ksv-color-alias-foreground-pressed: var(--ksv-color-scale-slate11);
  --ksv-color-alias-foreground-hovered: var(--ksv-color-scale-slate11);
  --ksv-color-alias-foreground-idle: var(--ksv-color-scale-slate10);
  --ksv-color-alias-border-invalid: var(--ksv-color-scale-red9);
  --ksv-color-alias-border-selected: var(--ksv-color-scale-indigo9);
  --ksv-color-alias-border-disabled: var(--ksv-color-scale-slate4);
  --ksv-color-alias-border-focused: var(--ksv-color-scale-indigo9);
  --ksv-color-alias-border-pressed: var(--ksv-color-scale-slate8);
  --ksv-color-alias-border-hovered: var(--ksv-color-scale-slate7);
  --ksv-color-alias-border-idle: var(--ksv-color-scale-slate6);
  --ksv-color-alias-focus-ring: var(--ksv-color-scale-indigo9);
  --ksv-color-alias-background-selected-hovered: color-mix(in srgb, transparent, var(--ksv-color-scale-indigo9) 20%);
  --ksv-color-alias-background-selected: color-mix(in srgb, transparent, var(--ksv-color-scale-indigo9) 10%);
  --ksv-color-alias-background-pressed: color-mix(in srgb, transparent, var(--ksv-color-scale-slate11) 10%);
  --ksv-color-alias-background-focused: color-mix(in srgb, transparent, var(--ksv-color-scale-slate11) 6%);
  --ksv-color-alias-background-hovered: color-mix(in srgb, transparent, var(--ksv-color-scale-slate11) 6%);
  --ksv-color-alias-background-disabled: var(--ksv-color-scale-slate3);
  --ksv-color-alias-background-idle: color-mix(in srgb, transparent, var(--ksv-color-scale-slate11) 4%);
  --ksv-color-alias-blanket: color-mix(in srgb, transparent, var(--ksv-color-scale-black) 60%);
  --ksv-color-shadow-emphasis: color-mix(in srgb, transparent, var(--ksv-color-scale-black) 60%);
  --ksv-color-shadow-regular: color-mix(in srgb, transparent, var(--ksv-color-scale-black) 40%);
  --ksv-color-shadow-muted: color-mix(in srgb, transparent, var(--ksv-color-scale-black) 20%);
  --ksv-color-foreground-highlight: var(--ksv-color-scale-pink11);
  --ksv-color-foreground-pending: var(--ksv-color-scale-purple11);
  --ksv-color-foreground-critical: var(--ksv-color-scale-red11);
  --ksv-color-foreground-caution: var(--ksv-color-scale-amber11);
  --ksv-color-foreground-positive: var(--ksv-color-scale-green11);
  --ksv-color-foreground-accent: var(--ksv-color-scale-indigo11);
  --ksv-color-foreground-inverse-secondary: var(--ksv-color-scale-slate6);
  --ksv-color-foreground-inverse: var(--ksv-color-scale-slate2);
  --ksv-color-foreground-on-emphasis: var(--ksv-color-scale-white);
  --ksv-color-foreground-neutral-tertiary: var(--ksv-color-scale-slate8);
  --ksv-color-foreground-neutral-secondary: var(--ksv-color-scale-slate9);
  --ksv-color-foreground-neutral-emphasis: var(--ksv-color-scale-slate11);
  --ksv-color-foreground-neutral: var(--ksv-color-scale-slate10);
  --ksv-color-border-highlight: var(--ksv-color-scale-pink6);
  --ksv-color-border-pending: var(--ksv-color-scale-purple6);
  --ksv-color-border-critical: var(--ksv-color-scale-red6);
  --ksv-color-border-caution: var(--ksv-color-scale-amber6);
  --ksv-color-border-positive: var(--ksv-color-scale-green6);
  --ksv-color-border-accent: var(--ksv-color-scale-indigo6);
  --ksv-color-border-emphasis: var(--ksv-color-scale-slate6);
  --ksv-color-border-neutral: var(--ksv-color-scale-slate5);
  --ksv-color-border-muted: var(--ksv-color-scale-slate4);
  --ksv-color-background-highlight-emphasis: var(--ksv-color-scale-pink9);
  --ksv-color-background-highlight: var(--ksv-color-scale-pink3);
  --ksv-color-background-pending-emphasis: var(--ksv-color-scale-purple9);
  --ksv-color-background-pending: var(--ksv-color-scale-purple3);
  --ksv-color-background-critical-emphasis: var(--ksv-color-scale-red9);
  --ksv-color-background-critical: var(--ksv-color-scale-red3);
  --ksv-color-background-caution-emphasis: var(--ksv-color-scale-amber9);
  --ksv-color-background-caution: var(--ksv-color-scale-amber3);
  --ksv-color-background-positive-emphasis: var(--ksv-color-scale-green9);
  --ksv-color-background-positive: var(--ksv-color-scale-green3);
  --ksv-color-background-accent-emphasis: var(--ksv-color-scale-indigo9);
  --ksv-color-background-accent: var(--ksv-color-scale-indigo3);
  --ksv-color-background-inverse: var(--ksv-color-scale-slate10);
  --ksv-color-background-surface-tertiary: var(--ksv-color-scale-slate4);
  --ksv-color-background-surface-secondary: var(--ksv-color-scale-slate3);
  --ksv-color-background-surface: var(--ksv-color-scale-slate2);
  --ksv-color-background-canvas: var(--ksv-color-scale-slate1);
}
@media (prefers-color-scheme: dark) {
  .ksv-scheme--auto {
    color-scheme: dark;

    --ksv-color-scale-slate11: #e3e3e3;
    --ksv-color-scale-slate10: #b9b9b9;
    --ksv-color-scale-slate9: #909090;
    --ksv-color-scale-slate8: #6e6e6e;
    --ksv-color-scale-slate7: #5a5a5a;
    --ksv-color-scale-slate6: #4a4a4a;
    --ksv-color-scale-slate5: #3e3e3e;
    --ksv-color-scale-slate4: #323232;
    --ksv-color-scale-slate3: #2f2f2f;
    --ksv-color-scale-slate2: #252525;
    --ksv-color-scale-slate1: #1f1f1f;
    --ksv-color-scale-red11: #ff6369;
    --ksv-color-scale-red10: #f2555a;
    --ksv-color-scale-red9: #e5484d;
    --ksv-color-scale-red8: #aa2429;
    --ksv-color-scale-red7: #822025;
    --ksv-color-scale-red6: #671e22;
    --ksv-color-scale-red5: #541b1f;
    --ksv-color-scale-red4: #481a1d;
    --ksv-color-scale-red3: #3c181a;
    --ksv-color-scale-red2: #291415;
    --ksv-color-scale-red1: #1f1315;
    --ksv-color-scale-purple11: #bf7af0;
    --ksv-color-scale-purple10: #9d5bd2;
    --ksv-color-scale-purple9: #8e4ec6;
    --ksv-color-scale-purple8: #7938b2;
    --ksv-color-scale-purple7: #5f2d84;
    --ksv-color-scale-purple6: #4e2667;
    --ksv-color-scale-purple5: #432155;
    --ksv-color-scale-purple4: #3a1e48;
    --ksv-color-scale-purple3: #301a3a;
    --ksv-color-scale-purple2: #221527;
    --ksv-color-scale-purple1: #1b141d;
    --ksv-color-scale-pink11: #f65cb6;
    --ksv-color-scale-pink10: #e34ba9;
    --ksv-color-scale-pink9: #d6409f;
    --ksv-color-scale-pink8: #a71873;
    --ksv-color-scale-pink7: #7a1d5a;
    --ksv-color-scale-pink6: #601d48;
    --ksv-color-scale-pink5: #501b3f;
    --ksv-color-scale-pink4: #451a37;
    --ksv-color-scale-pink3: #3a182f;
    --ksv-color-scale-pink2: #271421;
    --ksv-color-scale-pink1: #1f121b;
    --ksv-color-scale-indigo11: #849dff;
    --ksv-color-scale-indigo10: #5373e7;
    --ksv-color-scale-indigo9: #3e63dd;
    --ksv-color-scale-indigo8: #2f4eb2;
    --ksv-color-scale-indigo7: #273e89;
    --ksv-color-scale-indigo6: #22346e;
    --ksv-color-scale-indigo5: #1f2c5c;
    --ksv-color-scale-indigo4: #1c274f;
    --ksv-color-scale-indigo3: #192140;
    --ksv-color-scale-indigo2: #15192d;
    --ksv-color-scale-indigo1: #131620;
    --ksv-color-scale-green11: #4cc38a;
    --ksv-color-scale-green10: #3cb179;
    --ksv-color-scale-green9: #30a46c;
    --ksv-color-scale-green8: #236e4a;
    --ksv-color-scale-green7: #1b543a;
    --ksv-color-scale-green6: #164430;
    --ksv-color-scale-green5: #133929;
    --ksv-color-scale-green4: #113123;
    --ksv-color-scale-green3: #0f291e;
    --ksv-color-scale-green2: #0c1f17;
    --ksv-color-scale-green1: #0d1912;
    --ksv-color-scale-amber11: #f1a10d;
    --ksv-color-scale-amber10: #ffcb47;
    --ksv-color-scale-amber9: #ffb224;
    --ksv-color-scale-amber8: #824e00;
    --ksv-color-scale-amber7: #693f05;
    --ksv-color-scale-amber6: #573300;
    --ksv-color-scale-amber5: #4a2900;
    --ksv-color-scale-amber4: #3f2200;
    --ksv-color-scale-amber3: #341c00;
    --ksv-color-scale-amber2: #271700;
    --ksv-color-scale-amber1: #1f1300;
    --ksv-color-scale-white: #ffffff;
    --ksv-color-scale-black: #000000;
    --ksv-color-alias-foreground-selected: var(--ksv-color-scale-indigo11);
    --ksv-color-alias-foreground-disabled: var(--ksv-color-scale-slate7);
    --ksv-color-alias-foreground-focused: var(--ksv-color-scale-indigo11);
    --ksv-color-alias-foreground-pressed: var(--ksv-color-scale-slate11);
    --ksv-color-alias-foreground-hovered: var(--ksv-color-scale-slate11);
    --ksv-color-alias-foreground-idle: var(--ksv-color-scale-slate10);
    --ksv-color-alias-border-invalid: var(--ksv-color-scale-red9);
    --ksv-color-alias-border-selected: var(--ksv-color-scale-indigo9);
    --ksv-color-alias-border-disabled: var(--ksv-color-scale-slate4);
    --ksv-color-alias-border-focused: var(--ksv-color-scale-indigo9);
    --ksv-color-alias-border-pressed: var(--ksv-color-scale-slate8);
    --ksv-color-alias-border-hovered: var(--ksv-color-scale-slate7);
    --ksv-color-alias-border-idle: var(--ksv-color-scale-slate6);
    --ksv-color-alias-focus-ring: var(--ksv-color-scale-indigo9);
    --ksv-color-alias-background-selected-hovered: color-mix(in srgb, transparent, var(--ksv-color-scale-indigo9) 20%);
    --ksv-color-alias-background-selected: color-mix(in srgb, transparent, var(--ksv-color-scale-indigo9) 10%);
    --ksv-color-alias-background-pressed: color-mix(in srgb, transparent, var(--ksv-color-scale-slate11) 10%);
    --ksv-color-alias-background-focused: color-mix(in srgb, transparent, var(--ksv-color-scale-slate11) 6%);
    --ksv-color-alias-background-hovered: color-mix(in srgb, transparent, var(--ksv-color-scale-slate11) 6%);
    --ksv-color-alias-background-disabled: var(--ksv-color-scale-slate3);
    --ksv-color-alias-background-idle: color-mix(in srgb, transparent, var(--ksv-color-scale-slate11) 4%);
    --ksv-color-alias-blanket: color-mix(in srgb, transparent, var(--ksv-color-scale-black) 60%);
    --ksv-color-shadow-emphasis: color-mix(in srgb, transparent, var(--ksv-color-scale-black) 60%);
    --ksv-color-shadow-regular: color-mix(in srgb, transparent, var(--ksv-color-scale-black) 40%);
    --ksv-color-shadow-muted: color-mix(in srgb, transparent, var(--ksv-color-scale-black) 20%);
    --ksv-color-foreground-highlight: var(--ksv-color-scale-pink11);
    --ksv-color-foreground-pending: var(--ksv-color-scale-purple11);
    --ksv-color-foreground-critical: var(--ksv-color-scale-red11);
    --ksv-color-foreground-caution: var(--ksv-color-scale-amber11);
    --ksv-color-foreground-positive: var(--ksv-color-scale-green11);
    --ksv-color-foreground-accent: var(--ksv-color-scale-indigo11);
    --ksv-color-foreground-inverse-secondary: var(--ksv-color-scale-slate6);
    --ksv-color-foreground-inverse: var(--ksv-color-scale-slate2);
    --ksv-color-foreground-on-emphasis: var(--ksv-color-scale-white);
    --ksv-color-foreground-neutral-tertiary: var(--ksv-color-scale-slate8);
    --ksv-color-foreground-neutral-secondary: var(--ksv-color-scale-slate9);
    --ksv-color-foreground-neutral-emphasis: var(--ksv-color-scale-slate11);
    --ksv-color-foreground-neutral: var(--ksv-color-scale-slate10);
    --ksv-color-border-highlight: var(--ksv-color-scale-pink6);
    --ksv-color-border-pending: var(--ksv-color-scale-purple6);
    --ksv-color-border-critical: var(--ksv-color-scale-red6);
    --ksv-color-border-caution: var(--ksv-color-scale-amber6);
    --ksv-color-border-positive: var(--ksv-color-scale-green6);
    --ksv-color-border-accent: var(--ksv-color-scale-indigo6);
    --ksv-color-border-emphasis: var(--ksv-color-scale-slate6);
    --ksv-color-border-neutral: var(--ksv-color-scale-slate5);
    --ksv-color-border-muted: var(--ksv-color-scale-slate4);
    --ksv-color-background-highlight-emphasis: var(--ksv-color-scale-pink9);
    --ksv-color-background-highlight: var(--ksv-color-scale-pink3);
    --ksv-color-background-pending-emphasis: var(--ksv-color-scale-purple9);
    --ksv-color-background-pending: var(--ksv-color-scale-purple3);
    --ksv-color-background-critical-emphasis: var(--ksv-color-scale-red9);
    --ksv-color-background-critical: var(--ksv-color-scale-red3);
    --ksv-color-background-caution-emphasis: var(--ksv-color-scale-amber9);
    --ksv-color-background-caution: var(--ksv-color-scale-amber3);
    --ksv-color-background-positive-emphasis: var(--ksv-color-scale-green9);
    --ksv-color-background-positive: var(--ksv-color-scale-green3);
    --ksv-color-background-accent-emphasis: var(--ksv-color-scale-indigo9);
    --ksv-color-background-accent: var(--ksv-color-scale-indigo3);
    --ksv-color-background-inverse: var(--ksv-color-scale-slate10);
    --ksv-color-background-surface-tertiary: var(--ksv-color-scale-slate4);
    --ksv-color-background-surface-secondary: var(--ksv-color-scale-slate3);
    --ksv-color-background-surface: var(--ksv-color-scale-slate2);
    --ksv-color-background-canvas: var(--ksv-color-scale-slate1);
  }
}
.ksv-theme {
  --ksv-animation-easing-ease-out: cubic-bezier(0, 0, 0.4, 1);
  --ksv-animation-easing-ease-in: cubic-bezier(0.5, 0, 1, 1);
  --ksv-animation-easing-ease-in-out: cubic-bezier(0.45, 0, 0.4, 1);
  --ksv-animation-duration-xlong: 1920ms;
  --ksv-animation-duration-long: 960ms;
  --ksv-animation-duration-regular: 320ms;
  --ksv-animation-duration-short: 160ms;
}
.ksv-theme {
  --ksv-size-dialog-large: 860px;
  --ksv-size-dialog-medium: 640px;
  --ksv-size-dialog-small: 420px;
  --ksv-size-dialog-xsmall: 320px;
  --ksv-size-container-xlarge: 1400px;
  --ksv-size-container-large: 1280px;
  --ksv-size-container-medium: 940px;
  --ksv-size-container-small: 660px;
  --ksv-size-container-xsmall: 400px;
  --ksv-size-alias-focus-ring-gap: 2px;
  --ksv-size-alias-focus-ring: 2px;
  --ksv-size-icon-large: var(--ksv-size-scale-400);
  --ksv-size-icon-medium: var(--ksv-size-scale-300);
  --ksv-size-icon-regular: var(--ksv-size-scale-200);
  --ksv-size-icon-small: var(--ksv-size-scale-150);
  --ksv-size-element-xlarge: var(--ksv-size-scale-800);
  --ksv-size-element-large: var(--ksv-size-scale-600);
  --ksv-size-element-medium: var(--ksv-size-scale-450);
  --ksv-size-element-regular: var(--ksv-size-scale-400);
  --ksv-size-element-small: var(--ksv-size-scale-300);
  --ksv-size-element-xsmall: var(--ksv-size-scale-200);
  --ksv-size-alias-single-line-width: var(--ksv-size-scale-2400);
  --ksv-size-alias-single-line-height: var(--ksv-size-scale-400);
}
.ksv-theme {
  --ksv-size-radius-xlarge: 16px;
  --ksv-size-radius-large: 12px;
  --ksv-size-radius-medium: 8px;
  --ksv-size-radius-regular: 6px;
  --ksv-size-radius-small: 4px;
  --ksv-size-radius-xsmall: 2px;
  --ksv-size-radius-full: 9999px;
  --ksv-size-border-large: 4px;
  --ksv-size-border-medium: 2px;
  --ksv-size-border-regular: 1px;
  --ksv-size-space-xxlarge: var(--ksv-size-scale-400);
  --ksv-size-space-xlarge: var(--ksv-size-scale-300);
  --ksv-size-space-large: var(--ksv-size-scale-200);
  --ksv-size-space-medium: var(--ksv-size-scale-150);
  --ksv-size-space-regular: var(--ksv-size-scale-100);
  --ksv-size-space-small: var(--ksv-size-scale-50);
  --ksv-size-space-xsmall: var(--ksv-size-scale-25);
  --ksv-size-shadow-large: 0px var(--ksv-size-scale-100) var(--ksv-size-scale-300) 0px;
  --ksv-size-shadow-medium: 0px var(--ksv-size-scale-40) var(--ksv-size-scale-75) 0px;
  --ksv-size-shadow-small: 0px var(--ksv-size-scale-10) var(--ksv-size-scale-25) 0px;
}
.ksv-theme {
  --ksv-size-scale-6000: 480px;
  --ksv-size-scale-5000: 400px;
  --ksv-size-scale-4600: 368px;
  --ksv-size-scale-3600: 288px;
  --ksv-size-scale-3400: 272px;
  --ksv-size-scale-3000: 240px;
  --ksv-size-scale-2400: 192px;
  --ksv-size-scale-2000: 160px;
  --ksv-size-scale-1700: 136px;
  --ksv-size-scale-1600: 128px;
  --ksv-size-scale-1250: 100px;
  --ksv-size-scale-1200: 96px;
  --ksv-size-scale-1000: 80px;
  --ksv-size-scale-900: 72px;
  --ksv-size-scale-800: 64px;
  --ksv-size-scale-700: 56px;
  --ksv-size-scale-675: 54px;
  --ksv-size-scale-600: 48px;
  --ksv-size-scale-550: 44px;
  --ksv-size-scale-500: 40px;
  --ksv-size-scale-450: 36px;
  --ksv-size-scale-400: 32px;
  --ksv-size-scale-350: 28px;
  --ksv-size-scale-325: 26px;
  --ksv-size-scale-300: 24px;
  --ksv-size-scale-275: 22px;
  --ksv-size-scale-250: 20px;
  --ksv-size-scale-225: 18px;
  --ksv-size-scale-200: 16px;
  --ksv-size-scale-175: 14px;
  --ksv-size-scale-160: 13px;
  --ksv-size-scale-150: 12px;
  --ksv-size-scale-130: 11px;
  --ksv-size-scale-125: 10px;
  --ksv-size-scale-115: 9px;
  --ksv-size-scale-100: 8px;
  --ksv-size-scale-85: 7px;
  --ksv-size-scale-75: 6px;
  --ksv-size-scale-65: 5px;
  --ksv-size-scale-50: 4px;
  --ksv-size-scale-40: 3px;
  --ksv-size-scale-25: 2px;
  --ksv-size-scale-10: 1px;
  --ksv-size-scale-0: 0px;
}
.ksv-theme {
  --ksv-typography-heading-large-lineheight: 1.2;
  --ksv-typography-heading-large-size: 32px;
  --ksv-typography-heading-medium-lineheight: 1.2;
  --ksv-typography-heading-medium-size: 24px;
  --ksv-typography-heading-regular-lineheight: 1.2;
  --ksv-typography-heading-regular-size: 20px;
  --ksv-typography-heading-small-lineheight: 1.2;
  --ksv-typography-heading-small-size: 16px;
  --ksv-typography-text-large-lineheight: 1.2;
  --ksv-typography-text-large-size: 18px;
  --ksv-typography-text-medium-lineheight: 1.4;
  --ksv-typography-text-medium-size: 16px;
  --ksv-typography-text-regular-lineheight: 1.4;
  --ksv-typography-text-regular-size: 14px;
  --ksv-typography-text-small-lineheight: 1.4;
  --ksv-typography-text-small-size: 12px;
  --ksv-typography-lineheight-small: 1.2;
  --ksv-typography-lineheight-medium: 1.4;
  --ksv-typography-lineheight-large: 1.6;
  --ksv-typography-font-weight-bold: 700;
  --ksv-typography-font-weight-semibold: 600;
  --ksv-typography-font-weight-medium: 500;
  --ksv-typography-font-weight-regular: 400;
  --ksv-typography-font-family-code: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
  --ksv-typography-font-family-base: var(--font-inter, Inter);
  --ksv-typography-heading-large-capheight: 23.2727px;
  --ksv-typography-heading-large-capheight-trim: -0.2364em;
  --ksv-typography-heading-large-baseline-trim: -0.2364em;
  --ksv-typography-heading-medium-capheight: 17.4545px;
  --ksv-typography-heading-medium-capheight-trim: -0.2364em;
  --ksv-typography-heading-medium-baseline-trim: -0.2364em;
  --ksv-typography-heading-regular-capheight: 14.5455px;
  --ksv-typography-heading-regular-capheight-trim: -0.2364em;
  --ksv-typography-heading-regular-baseline-trim: -0.2364em;
  --ksv-typography-heading-small-capheight: 11.6364px;
  --ksv-typography-heading-small-capheight-trim: -0.2364em;
  --ksv-typography-heading-small-baseline-trim: -0.2364em;
  --ksv-typography-text-large-capheight: 13.0909px;
  --ksv-typography-text-large-capheight-trim: -0.2364em;
  --ksv-typography-text-large-baseline-trim: -0.2364em;
  --ksv-typography-text-medium-capheight: 11.6364px;
  --ksv-typography-text-medium-capheight-trim: -0.3364em;
  --ksv-typography-text-medium-baseline-trim: -0.3364em;
  --ksv-typography-text-regular-capheight: 10.1818px;
  --ksv-typography-text-regular-capheight-trim: -0.3364em;
  --ksv-typography-text-regular-baseline-trim: -0.3364em;
  --ksv-typography-text-small-capheight: 8.7273px;
  --ksv-typography-text-small-capheight-trim: -0.3364em;
  --ksv-typography-text-small-baseline-trim: -0.3364em;
}`;

const documentElementClasses = args => {
  return `${documentReset(args.bodyBackground)} ksv-theme ksv-scheme--${args.colorScheme}`;
};

/**
 * Deactivate auto-enlargement of small text in Safari. Remove the default touch
 * highlight in Safari. Reset the body element to sane defaults.
 */
const documentReset = function () {
  let background = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'canvas';
  return css`
    html& {
      scroll-behavior: smooth;
      text-size-adjust: none;
      -webkit-tap-highlight-color: #0000;
    }
    @media (prefers-reduced-motion: reduce) {
      html& {
        scroll-behavior: auto;
      }
    }

    html& body {
      background-color: ${tokenSchema.color.background[background]};
      margin: 0;
    }
  `;
};
function flatString(str) {
  return str.replace(/\n|\s{2,}/g, '');
}

// Element resets
// ------------------------------

const reset = resetClassName.replace(':', '\\:');
const elementReset = flatString(`
  :where(.${reset}) {
    border: 0;
    box-sizing: border-box;
    font: inherit;
    font-size: 100%;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
  }
  :where(ol.${reset}, ul.${reset}) { list-style: none; }
  :where(canvas.${reset}, img.${reset}, picture.${reset}, svg.${reset}, video.${reset}) { display: block; }
  :where(input.${reset}, button.${reset}, textarea.${reset}, select.${reset}) { appearance: none; background-color: transparent; }
  :where(a.${reset}, abbr.${reset}) { color: inherit; text-decoration: none; }
  :where(table.${reset}) = { border-collapse: collapse; border-spacing: 0; }
`);
injectGlobal(cssCustomProperties);
injectGlobal(elementReset);

function useScale() {
  let matchesFine = useMediaQuery('(any-pointer: fine)');
  return !matchesFine ? 'large' : 'medium';
}

/** Consolidates core functionality and dependencies of the Voussoir component library. */
const VoussoirProvider = forwardRefWithAs(function VoussoirProvider(props, forwardedRef) {
  let prevContext = useContext(Context);
  let prevColorScheme = prevContext && prevContext.colorScheme;
  let autoScale = useScale();
  let {
    locale: prevLocale
  } = useLocale();
  let matchedBreakpoints = useMatchedBreakpoints();

  // importance of color scheme props > parent > auto
  let {
    children,
    colorScheme = prevColorScheme || 'auto',
    isDisabled,
    isRequired,
    isReadOnly,
    locale = prevContext ? prevLocale : undefined,
    linkComponent = DefaultLinkComponent,
    scale = prevContext ? prevContext.scale : autoScale,
    ...otherProps
  } = props;

  // select only the props with values so undefined props don't overwrite prevContext values
  let currentProps = {
    colorScheme,
    isDisabled,
    isRequired,
    isReadOnly,
    scale
  };
  let filteredProps = Object.fromEntries(Object.entries(currentProps).filter(_ref => {
    let [_, value] = _ref;
    return value !== undefined;
  }));

  // Merge options with parent provider
  let context = Object.assign({}, prevContext, filteredProps);

  // Only wrap in DOM node when necessary
  let contents = children;
  let domProps = filterDOMProps(otherProps);
  let styleProps = useStyleProps(otherProps);
  if (!prevContext || props.elementType || props.locale || colorScheme !== prevContext.colorScheme || scale !== prevContext.scale || Object.keys(domProps).length > 0 || otherProps.UNSAFE_className || styleProps.style && Object.keys(styleProps.style).length > 0) {
    var _props$elementType;
    contents = /*#__PURE__*/jsx(ProviderWrapper, {
      ref: forwardedRef,
      ...props,
      style: {
        isolation: !prevContext ? 'isolate' : undefined
      },
      elementType: (_props$elementType = props.elementType) !== null && _props$elementType !== void 0 ? _props$elementType : 'div',
      children: contents
    });
  }
  return /*#__PURE__*/jsx(Context.Provider, {
    value: context,
    children: /*#__PURE__*/jsx(BreakpointProvider, {
      value: matchedBreakpoints,
      children: /*#__PURE__*/jsx(I18nProvider, {
        locale: locale,
        children: /*#__PURE__*/jsx(ModalProvider, {
          children: /*#__PURE__*/jsx(LinkComponentContext.Provider, {
            value: linkComponent,
            children: contents
          })
        })
      })
    })
  });
});
const ProviderWrapper = forwardRefWithAs(function ProviderWrapper(props, forwardedRef) {
  var _props$elementType2;
  let {
    children,
    style
  } = props;
  let {
    locale,
    direction
  } = useLocale();
  let {
    modalProviderProps
  } = useModalProvider();
  let {
    colorScheme
  } = useProvider();
  const ElementType = (_props$elementType2 = props.elementType) !== null && _props$elementType2 !== void 0 ? _props$elementType2 : 'div';
  return /*#__PURE__*/jsx(ElementType, {
    ...modalProviderProps,
    className: `${props.UNSAFE_className ? `${props.UNSAFE_className} ` : ''}${documentElementClasses({
      bodyBackground: props.bodyBackground,
      colorScheme
    })}`,
    lang: locale,
    dir: direction,
    ref: forwardedRef,
    style: {
      ...style,
      ...props.UNSAFE_style
    },
    children: children
  });
});

function ClientSideOnlyDocumentElement(props) {
  const context = useProvider();
  const classes = documentElementClasses({
    bodyBackground: props.bodyBackground,
    colorScheme: context.colorScheme
  });
  useLayoutEffect(() => {
    const split = classes.split(' ');
    const root = document.documentElement;
    root.classList.add(...split);
    return () => {
      root.classList.remove(...split);
    };
  }, [classes]);
  return null;
}

export { ClientSideOnlyDocumentElement, VoussoirProvider as TestProvider, VoussoirProvider, documentElementClasses, useProvider, useProviderProps };
