@sanity/ui 4.0.0-next.4 → 4.0.0-next.5

package/dist/helpers-bwfx1e-Y.js

@@ -0,0 +1,67 @@
+import { t as getTheme_v2 } from "./getTheme_v2-y09KqtEb.js";
+/**
+* @internal
+*/
+const EMPTY_ARRAY = [], EMPTY_RECORD = {}, POPOVER_MOTION_DURATION = .2, POPOVER_MOTION_PROPS = {
+	card: {
+		initial: {
+			scale: .97,
+			willChange: "transform"
+		},
+		hidden: { opacity: 0 },
+		visible: {
+			opacity: 1,
+			transition: {
+				when: "beforeChildren",
+				duration: POPOVER_MOTION_DURATION / 2
+			}
+		},
+		scaleIn: { scale: 1 },
+		scaleOut: { scale: .97 }
+	},
+	children: {
+		hidden: { opacity: 0 },
+		visible: { opacity: 1 }
+	},
+	transition: {
+		type: "spring",
+		visualDuration: POPOVER_MOTION_DURATION,
+		bounce: .25
+	}
+};
+/**
+* @internal
+*/
+function _fillCSSObject(keys, value) {
+	return keys.reduce((style, key) => (style[key] = value, style), {});
+}
+/**
+* @public
+*/
+function rem(pixelValue) {
+	return pixelValue === 0 ? 0 : `${pixelValue / 16}rem`;
+}
+/**
+* @internal
+*/
+function _responsive(media, values, callback) {
+	return (values?.map(callback) || []).map((statement, mediaIndex) => mediaIndex === 0 ? statement : { [`@media screen and (min-width: ${media[mediaIndex - 1]}px)`]: statement });
+}
+/**
+* @internal
+*/
+function _getArrayProp(val, defaultVal) {
+	return val === void 0 ? defaultVal || EMPTY_ARRAY : Array.isArray(val) ? val : [val];
+}
+/**
+* @internal
+*/
+function _getResponsiveSpace(theme, props, spaceIndexes = EMPTY_ARRAY) {
+	if (!Array.isArray(spaceIndexes)) throw Error("the property must be array of numbers");
+	if (spaceIndexes.length === 0) return null;
+	let { media, space } = getTheme_v2(theme);
+	return _responsive(media, spaceIndexes, (spaceIndex) => _fillCSSObject(props, rem(space[spaceIndex])));
+}
+export { rem as a, POPOVER_MOTION_PROPS as c, _responsive as i, _getArrayProp as n, EMPTY_ARRAY as o, _getResponsiveSpace as r, EMPTY_RECORD as s, _fillCSSObject as t };
+
+//# sourceMappingURL=helpers-bwfx1e-Y.js.map

package/dist/helpers-bwfx1e-Y.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers-bwfx1e-Y.js","names":["Transition","Variant","EMPTY_ARRAY","EMPTY_RECORD","Record","POPOVER_MOTION_DURATION","POPOVER_MOTION_PROPS","card","initial","hidden","visible","scaleIn","scaleOut","children","transition","scale","willChange","opacity","when","duration","type","visualDuration","bounce","CSSObject","Theme","getTheme_v2","EMPTY_ARRAY","_fillCSSObject","keys","value","reduce","style","key","rem","pixelValue","_responsive","media","values","T","callback","index","array","statements","map","statement","mediaIndex","_getArrayProp","val","defaultVal","undefined","Array","isArray","_getResponsiveSpace","theme","props","spaceIndexes","Error","length","space","spaceIndex"],"sources":["../src/core/constants.ts","../src/core/styles/helpers.ts"],"sourcesContent":["import type {Transition, Variant} from 'motion/react'\n\n/**\n * @internal\n */\nexport const EMPTY_ARRAY: never[] = []\n\n/**\n * @internal\n */\nexport const EMPTY_RECORD: Record<string, never> = {}\n\nconst POPOVER_MOTION_DURATION = 0.2\n\n/**\n * Shared `framer-motion` variants used by `Popover` and `Tooltip` components.\n * @internal\n */\nexport const POPOVER_MOTION_PROPS: {\n  card: {\n    initial: Variant\n    hidden: Variant\n    visible: Variant\n    scaleIn: Variant\n    scaleOut: Variant\n  }\n  children: {\n    hidden: Variant\n    visible: Variant\n  }\n  transition: Transition\n} = {\n  card: {\n    initial: {\n      scale: 0.97,\n      willChange: 'transform',\n    },\n    hidden: {\n      opacity: 0,\n    },\n    visible: {\n      opacity: 1,\n      transition: {\n        when: 'beforeChildren',\n        duration: POPOVER_MOTION_DURATION / 2,\n      },\n    },\n    scaleIn: {\n      scale: 1,\n    },\n    scaleOut: {\n      scale: 0.97,\n    },\n  },\n  children: {\n    hidden: {\n      opacity: 0,\n    },\n    visible: {\n      opacity: 1,\n    },\n  },\n  transition: {\n    type: 'spring',\n    visualDuration: POPOVER_MOTION_DURATION,\n    bounce: 0.25,\n  },\n}\n","import {CSSObject} from '../../theme/system/css'\nimport {Theme} from '../../theme/system/theme'\nimport {getTheme_v2} from '../../theme/versioning/getTheme_v2'\nimport {EMPTY_ARRAY} from '../constants'\n\n/**\n * @internal\n */\nexport function _fillCSSObject(keys: string[], value: string | number | CSSObject): CSSObject {\n  return keys.reduce<CSSObject>((style, key) => {\n    style[key] = value\n\n    return style\n  }, {})\n}\n\n/**\n * @public\n */\nexport function rem(pixelValue: number): string | 0 {\n  if (pixelValue === 0) return 0\n\n  return `${pixelValue / 16}rem`\n}\n\n/**\n * @internal\n */\nexport function _responsive<T>(\n  media: number[],\n  values: T[],\n  callback: (value: T, index: number, array: T[]) => CSSObject,\n): CSSObject[] {\n  const statements = values?.map(callback) || []\n\n  return statements.map((statement, mediaIndex) => {\n    if (mediaIndex === 0) return statement\n\n    return {[`@media screen and (min-width: ${media[mediaIndex - 1]}px)`]: statement}\n  })\n}\n\n/**\n * @internal\n */\nexport function _getArrayProp<T = number>(val: T | T[] | undefined, defaultVal?: T[]): T[] {\n  if (val === undefined) return defaultVal || EMPTY_ARRAY\n\n  return Array.isArray(val) ? val : [val]\n}\n\n/**\n * @internal\n */\nexport function _getResponsiveSpace(\n  theme: Theme,\n  props: string[],\n  spaceIndexes: number[] = EMPTY_ARRAY,\n): CSSObject[] | null {\n  if (!Array.isArray(spaceIndexes)) {\n    throw new Error('the property must be array of numbers')\n  }\n\n  if (spaceIndexes.length === 0) {\n    return null\n  }\n\n  const {media, space} = getTheme_v2(theme)\n\n  return _responsive(media, spaceIndexes, (spaceIndex) =>\n    _fillCSSObject(props, rem(space[spaceIndex])),\n  )\n}\n"],"mappings":";;;;AAKA,MAAaE,cAAuB,CAAA,GAKvBC,eAAsC,CAAC,GAE9CE,0BAA0B,IAMnBC,uBAaT;CACFC,MAAM;EACJC,SAAS;GACPO,OAAO;GACPC,YAAY;EACd;EACAP,QAAQ,EACNQ,SAAS,EACX;EACAP,SAAS;GACPO,SAAS;GACTH,YAAY;IACVI,MAAM;IACNC,UAAUd,0BAA0B;GACtC;EACF;EACAM,SAAS,EACPI,OAAO,EACT;EACAH,UAAU,EACRG,OAAO,IACT;CACF;CACAF,UAAU;EACRJ,QAAQ,EACNQ,SAAS,EACX;EACAP,SAAS,EACPO,SAAS,EACX;CACF;CACAH,YAAY;EACVM,MAAM;EACNC,gBAAgBhB;EAChBiB,QAAQ;CACV;AACF;;;;AC3DA,SAAgBK,eAAeC,MAAgBC,OAA+C;CAC5F,OAAOD,KAAKE,QAAmBC,OAAOC,SACpCD,MAAMC,OAAOH,OAENE,QACN,CAAC,CAAC;AACP;;;;AAKA,SAAgBE,IAAIC,YAAgC;CAGlD,OAFIA,eAAe,IAAU,IAEtB,GAAGA,aAAa,GAAE;AAC3B;;;;AAKA,SAAgBC,YACdC,OACAC,QACAE,UACa;CAGb,QAFmBF,QAAQM,IAAIJ,QAAQ,KAAK,CAAA,EAAA,CAE1BI,KAAKC,WAAWC,eAC5BA,eAAe,IAAUD,YAEtB,GAAE,iCAAiCR,MAAMS,aAAa,GAAE,OAAQD,UAAS,CACjF;AACH;;;;AAKA,SAAgBE,cAA0BC,KAA0BC,YAAuB;CAGzF,OAFID,QAAQE,KAAAA,IAAkBD,cAActB,cAErCwB,MAAMC,QAAQJ,GAAG,IAAIA,MAAM,CAACA,GAAG;AACxC;;;;AAKA,SAAgBK,oBACdC,OACAC,OACAC,eAAyB7B,aACL;CACpB,IAAI,CAACwB,MAAMC,QAAQI,YAAY,GAC7B,MAAUC,MAAM,uCAAuC;CAGzD,IAAID,aAAaE,WAAW,GAC1B,OAAO;CAGT,IAAM,EAACrB,OAAOsB,UAASjC,YAAY4B,KAAK;CAExC,OAAOlB,YAAYC,OAAOmB,eAAeI,eACvChC,eAAe2B,OAAOrB,IAAIyB,MAAMC,WAAW,CAAC,CAC9C;AACF"}

package/dist/hotkeys-B08HIKNu.js

@@ -0,0 +1,145 @@
+import { a as rem, i as _responsive, n as _getArrayProp } from "./helpers-bwfx1e-Y.js";
+import { t as getTheme_v2 } from "./getTheme_v2-y09KqtEb.js";
+import { v as responsiveRadiusStyle, y as Box } from "./useLayer-9Pz-GG0r.js";
+import { n as Text } from "./stack-C5WV-BRh.js";
+import { c } from "react/compiler-runtime";
+import { Children, useEffect } from "react";
+import { css, styled } from "styled-components";
+import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
+import { useEffectEvent } from "use-effect-event";
+/**
+* Adds global keydown event listener to the window.
+*
+* @param onKeyDown - The function to call when a keydown event is triggered.
+* @param options - The options to pass to the addEventListener function (example, capture: true)
+* @beta
+*/
+function useGlobalKeyDown(onKeyDown, options) {
+	let $ = c(7), t0;
+	$[0] === onKeyDown ? t0 = $[1] : (t0 = (event) => onKeyDown(event), $[0] = onKeyDown, $[1] = t0);
+	let handleKeyDown = useEffectEvent(t0), t1;
+	$[2] !== handleKeyDown || $[3] !== options ? (t1 = () => {
+		let handler = (event_0) => handleKeyDown(event_0);
+		return window.addEventListener("keydown", handler, options), () => window.removeEventListener("keydown", handler, options);
+	}, $[2] = handleKeyDown, $[3] = options, $[4] = t1) : t1 = $[4];
+	let t2;
+	$[5] === options ? t2 = $[6] : (t2 = [options], $[5] = options, $[6] = t2), useEffect(t1, t2);
+}
+function inlineBaseStyle() {
+	return {
+		lineHeight: "0",
+		"&&:not([hidden])": { display: "block" },
+		"& > div": {
+			display: "inline-block",
+			verticalAlign: "middle"
+		}
+	};
+}
+function inlineSpaceStyle(props) {
+	let { media, space } = getTheme_v2(props.theme);
+	return _responsive(media, props.$space, (spaceIndex) => {
+		let _space = rem(spaceIndex === .5 ? space[1] / 2 : space[spaceIndex]);
+		return {
+			margin: `-${_space} 0 0 -${_space}`,
+			"& > div": { padding: `${_space} 0 0 ${_space}` }
+		};
+	});
+}
+const StyledInline = /* @__PURE__ */ styled(Box).withConfig({
+	displayName: "StyledInline",
+	componentId: "sc-3t6t7g-0"
+})(inlineBaseStyle, inlineSpaceStyle), Inline = function Inline(props) {
+	let $ = c(16), as, childrenProp, gap, ref, restProps;
+	$[0] === props ? (as = $[1], childrenProp = $[2], gap = $[3], ref = $[4], restProps = $[5]) : ({as, children: childrenProp, gap, ref, ...restProps} = props, $[0] = props, $[1] = as, $[2] = childrenProp, $[3] = gap, $[4] = ref, $[5] = restProps);
+	let t0;
+	$[6] === childrenProp ? t0 = $[7] : (t0 = Children.map(childrenProp, _temp), $[6] = childrenProp, $[7] = t0);
+	let children = t0, t1;
+	$[8] === gap ? t1 = $[9] : (t1 = _getArrayProp(gap), $[8] = gap, $[9] = t1);
+	let t2;
+	return $[10] !== as || $[11] !== children || $[12] !== ref || $[13] !== restProps || $[14] !== t1 ? (t2 = /* @__PURE__ */ jsx(StyledInline, {
+		"data-ui": "Inline",
+		...restProps,
+		$space: t1,
+		forwardedAs: as,
+		ref,
+		children
+	}), $[10] = as, $[11] = children, $[12] = ref, $[13] = restProps, $[14] = t1, $[15] = t2) : t2 = $[15], t2;
+};
+function _temp(child) {
+	return child && /* @__PURE__ */ jsx("div", { children: child });
+}
+function kbdStyle() {
+	return css`--card-bg-color:var(--card-kbd-bg-color);--card-border-color:var(--card-kbd-border-color);--card-fg-color:var(--card-kbd-fg-color);box-shadow:inset 0 0 0 1px var(--card-border-color);background:var(--card-bg-color);font:inherit;vertical-align:top;&:not([hidden]){display:inline-block;}`;
+}
+const StyledKBD = /* @__PURE__ */ styled.kbd.withConfig({
+	displayName: "StyledKBD",
+	componentId: "sc-yqxdiu-0"
+})(responsiveRadiusStyle, kbdStyle), KBD = function KBD(props) {
+	let $ = c(20), children, ref, restProps, t0, t1, t2;
+	$[0] === props ? (children = $[1], ref = $[2], restProps = $[3], t0 = $[4], t1 = $[5], t2 = $[6]) : ({children, fontSize: t0, padding: t1, radius: t2, ref, ...restProps} = props, $[0] = props, $[1] = children, $[2] = ref, $[3] = restProps, $[4] = t0, $[5] = t1, $[6] = t2);
+	let fontSize = t0 === void 0 ? 0 : t0, padding = t1 === void 0 ? 1 : t1, radius = t2 === void 0 ? 2 : t2, t3;
+	$[7] === radius ? t3 = $[8] : (t3 = _getArrayProp(radius), $[7] = radius, $[8] = t3);
+	let t4;
+	$[9] !== children || $[10] !== fontSize ? (t4 = /* @__PURE__ */ jsx(Text, {
+		as: "span",
+		size: fontSize,
+		weight: "semibold",
+		children
+	}), $[9] = children, $[10] = fontSize, $[11] = t4) : t4 = $[11];
+	let t5;
+	$[12] !== padding || $[13] !== t4 ? (t5 = /* @__PURE__ */ jsx(Box, {
+		as: "span",
+		padding,
+		children: t4
+	}), $[12] = padding, $[13] = t4, $[14] = t5) : t5 = $[14];
+	let t6;
+	return $[15] !== ref || $[16] !== restProps || $[17] !== t3 || $[18] !== t5 ? (t6 = /* @__PURE__ */ jsx(StyledKBD, {
+		"data-ui": "KBD",
+		...restProps,
+		$radius: t3,
+		ref,
+		children: t5
+	}), $[15] = ref, $[16] = restProps, $[17] = t3, $[18] = t5, $[19] = t6) : t6 = $[19], t6;
+}, StyledHotkeys = styled.kbd.withConfig({
+	displayName: "StyledHotkeys",
+	componentId: "sc-qvwif3-0"
+})`font:inherit;padding:1px;&:not([hidden]){display:block;}`, Key = styled(KBD).withConfig({
+	displayName: "Key",
+	componentId: "sc-qvwif3-1"
+})`&:not([hidden]){display:block;}`, Hotkeys = function Hotkeys(props) {
+	let $ = c(27), fontSize, keys, padding, radius, ref, restProps, t0;
+	$[0] === props ? (fontSize = $[1], keys = $[2], padding = $[3], radius = $[4], ref = $[5], restProps = $[6], t0 = $[7]) : ({fontSize, gap: t0, keys, padding, radius, ref, ...restProps} = props, $[0] = props, $[1] = fontSize, $[2] = keys, $[3] = padding, $[4] = radius, $[5] = ref, $[6] = restProps, $[7] = t0);
+	let gap = t0 === void 0 ? .5 : t0, t1;
+	$[8] === gap ? t1 = $[9] : (t1 = _getArrayProp(gap), $[8] = gap, $[9] = t1);
+	let spacing = t1;
+	if (!keys || keys.length === 0) {
+		let t2;
+		return $[10] === Symbol.for("react.memo_cache_sentinel") ? (t2 = /* @__PURE__ */ jsx(Fragment$1, {}), $[10] = t2) : t2 = $[10], t2;
+	}
+	let t2;
+	if ($[11] !== fontSize || $[12] !== keys || $[13] !== padding || $[14] !== radius) {
+		let t3;
+		$[16] !== fontSize || $[17] !== padding || $[18] !== radius ? (t3 = (key, i) => /* @__PURE__ */ jsx(Key, {
+			fontSize,
+			padding,
+			radius,
+			children: key
+		}, i), $[16] = fontSize, $[17] = padding, $[18] = radius, $[19] = t3) : t3 = $[19], t2 = keys.map(t3), $[11] = fontSize, $[12] = keys, $[13] = padding, $[14] = radius, $[15] = t2;
+	} else t2 = $[15];
+	let t3;
+	$[20] !== spacing || $[21] !== t2 ? (t3 = /* @__PURE__ */ jsx(Inline, {
+		as: "span",
+		gap: spacing,
+		children: t2
+	}), $[20] = spacing, $[21] = t2, $[22] = t3) : t3 = $[22];
+	let t4;
+	return $[23] !== ref || $[24] !== restProps || $[25] !== t3 ? (t4 = /* @__PURE__ */ jsx(StyledHotkeys, {
+		"data-ui": "Hotkeys",
+		...restProps,
+		ref,
+		children: t3
+	}), $[23] = ref, $[24] = restProps, $[25] = t3, $[26] = t4) : t4 = $[26], t4;
+};
+export { useGlobalKeyDown as i, KBD as n, Inline as r, Hotkeys as t };
+
+//# sourceMappingURL=hotkeys-B08HIKNu.js.map

package/dist/hotkeys-B08HIKNu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hotkeys-B08HIKNu.js","names":["useEffect","useEffectEvent","useGlobalKeyDown","onKeyDown","options","$","_c","t0","event","handleKeyDown","t1","handler","event_0","window","addEventListener","removeEventListener","t2","CSSObject","getTheme_v2","_responsive","rem","ThemeProps","ResponsiveInlineSpaceStyleProps","inlineBaseStyle","display","verticalAlign","inlineSpaceStyle","props","media","space","theme","$space","spaceIndex","_space","padding","Children","useMemo","styled","_getArrayProp","ElementType","Props","Box","BoxOwnProps","inlineBaseStyle","inlineSpaceStyle","ResponsiveInlineSpaceStyleProps","InlineOwnProps","Omit","space","gap","InlineProps","E","StyledInline","InlineComponent","Inline","props","$","_c","as","childrenProp","ref","restProps","children","t0","map","_temp","t1","t2","React","JSX","Element","child","css","styled","_getArrayProp","responsiveRadiusStyle","ResponsiveRadiusStyleProps","ElementType","Props","Radius","Box","Text","KBDOwnProps","fontSize","padding","radius","KBDProps","E","kbdStyle","StyledKBD","kbd","KBDComponent","KBD","props","$","_c","children","ref","restProps","t0","t1","t2","undefined","t3","t4","t5","t6","React","JSX","Element","styled","Inline","KBD","_getArrayProp","Radius","HotkeysProps","fontSize","gap","padding","radius","space","keys","StyledHotkeys","kbd","Key","Hotkeys","props","$","_c","ref","restProps","t0","undefined","t1","spacing","length","t2","Symbol","for","t3","key","i","map","t4"],"sources":["../src/core/hooks/useGlobalKeyDown.ts","../src/core/primitives/inline/styles.ts","../src/core/primitives/inline/inline.tsx","../src/core/primitives/kbd/kbd.tsx","../src/core/components/hotkeys/hotkeys.tsx"],"sourcesContent":["import {useEffect} from 'react'\n// TODO: switch to `useEffectEvent` from `react` once\n// https://github.com/facebook/react/issues/34818 is fixed in the lowest React\n// version we support: on React 19.2 the native hook never sees values past\n// the first render when the calling component is wrapped in `forwardRef` or\n// `memo`. This public hook runs in the fiber of whatever component calls it\n// (consumers may call it from `forwardRef` or `memo` components).\nimport {useEffectEvent} from 'use-effect-event'\n\n/**\n * Adds global keydown event listener to the window.\n *\n * @param onKeyDown - The function to call when a keydown event is triggered.\n * @param options - The options to pass to the addEventListener function (example, capture: true)\n * @beta\n */\nexport function useGlobalKeyDown(\n  onKeyDown: (event: KeyboardEvent) => void,\n  options?: AddEventListenerOptions,\n): void {\n  const handleKeyDown = useEffectEvent((event: KeyboardEvent) => onKeyDown(event))\n\n  useEffect(() => {\n    const handler = (event: KeyboardEvent) => handleKeyDown(event)\n\n    window.addEventListener('keydown', handler, options)\n\n    return () => window.removeEventListener('keydown', handler, options)\n  }, [options])\n}\n","import {CSSObject} from '../../../theme/system/css'\nimport {getTheme_v2} from '../../../theme/versioning/getTheme_v2'\nimport {_responsive, rem} from '../../styles/helpers'\nimport {ThemeProps} from '../../styles/types'\nimport {ResponsiveInlineSpaceStyleProps} from './types'\n\nexport function inlineBaseStyle(): CSSObject {\n  return {\n    'lineHeight': '0',\n\n    '&&:not([hidden])': {\n      display: 'block',\n    },\n\n    '& > div': {\n      display: 'inline-block',\n      verticalAlign: 'middle',\n    },\n  }\n}\n\nexport function inlineSpaceStyle(props: ResponsiveInlineSpaceStyleProps & ThemeProps): CSSObject[] {\n  const {media, space} = getTheme_v2(props.theme)\n\n  return _responsive(media, props.$space, (spaceIndex) => {\n    const _space = rem(spaceIndex === 0.5 ? space[1] / 2 : space[spaceIndex])\n\n    return {\n      'margin': `-${_space} 0 0 -${_space}`,\n      '& > div': {padding: `${_space} 0 0 ${_space}`},\n    }\n  })\n}\n","import {Children, useMemo} from 'react'\nimport {styled} from 'styled-components'\n\nimport {_getArrayProp} from '../../styles/helpers'\nimport {ElementType, Props} from '../../types/component'\nimport {Box, BoxOwnProps} from '../box/box'\nimport {inlineBaseStyle, inlineSpaceStyle} from './styles'\nimport {ResponsiveInlineSpaceStyleProps} from './types'\n\n/**\n * @public\n */\nexport interface InlineOwnProps extends Omit<BoxOwnProps, 'display'> {\n  /**\n   * @deprecated Use `gap` instead.\n   */\n  space?: never\n  /** The spacing between children. */\n  gap?: number | number[]\n}\n\n/**\n * @public\n */\nexport type InlineProps<E extends ElementType = 'div'> = Props<InlineOwnProps, E>\n\nconst StyledInline = styled(Box)<ResponsiveInlineSpaceStyleProps>(inlineBaseStyle, inlineSpaceStyle)\n\nconst InlineComponent = function Inline(\n  props: InlineOwnProps & {as?: ElementType} & React.HTMLProps<HTMLDivElement>,\n) {\n  const {as, children: childrenProp, gap, ref, ...restProps} = props\n\n  const children = useMemo(\n    () => Children.map(childrenProp, (child) => child && <div>{child}</div>),\n    [childrenProp],\n  )\n\n  return (\n    <StyledInline\n      data-ui=\"Inline\"\n      {...restProps}\n      $space={_getArrayProp(gap)}\n      forwardedAs={as}\n      ref={ref}\n    >\n      {children}\n    </StyledInline>\n  )\n}\n\n/**\n * The `Inline` component is a layout utility for aligning and spacing items horizontally.\n *\n * @public\n */\n// oxlint-disable-next-line no-unsafe-type-assertion\nexport const Inline = InlineComponent as unknown as <E extends ElementType = 'div'>(\n  props: InlineProps<E>,\n) => React.JSX.Element\n","import {css, styled} from 'styled-components'\n\nimport {_getArrayProp} from '../../styles/helpers'\nimport {responsiveRadiusStyle} from '../../styles/radius/radiusStyle'\nimport {ResponsiveRadiusStyleProps} from '../../styles/radius/types'\nimport {ElementType, Props} from '../../types/component'\nimport {Radius} from '../../types/radius'\nimport {Box} from '../box/box'\nimport {Text} from '../text/text'\n\n/**\n * @public\n */\nexport interface KBDOwnProps {\n  fontSize?: number | number[]\n  padding?: number | number[]\n  radius?: Radius | Radius[]\n}\n\n/**\n * @public\n */\nexport type KBDProps<E extends ElementType = 'kbd'> = Props<KBDOwnProps, E>\n\nfunction kbdStyle() {\n  return css`\n    --card-bg-color: var(--card-kbd-bg-color);\n    --card-border-color: var(--card-kbd-border-color);\n    --card-fg-color: var(--card-kbd-fg-color);\n\n    box-shadow: inset 0 0 0 1px var(--card-border-color);\n    background: var(--card-bg-color);\n    font: inherit;\n\n    vertical-align: top;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  `\n}\n\nconst StyledKBD = styled.kbd<ResponsiveRadiusStyleProps>(responsiveRadiusStyle, kbdStyle)\n\nconst KBDComponent = function KBD(\n  props: KBDOwnProps & {as?: ElementType} & Omit<React.HTMLProps<HTMLElement>, 'as' | 'size'>,\n) {\n  const {children, fontSize = 0, padding = 1, radius = 2, ref, ...restProps} = props\n\n  return (\n    <StyledKBD data-ui=\"KBD\" {...restProps} $radius={_getArrayProp(radius)} ref={ref}>\n      <Box as=\"span\" padding={padding}>\n        <Text as=\"span\" size={fontSize} weight=\"semibold\">\n          {children}\n        </Text>\n      </Box>\n    </StyledKBD>\n  )\n}\n\n/**\n * Used to define some text as keyboard input.\n *\n * @public\n */\n// oxlint-disable-next-line no-unsafe-type-assertion\nexport const KBD = KBDComponent as unknown as <E extends ElementType = 'kbd'>(\n  props: KBDProps<E>,\n) => React.JSX.Element\n","import {styled} from 'styled-components'\n\nimport {Inline} from '../../primitives/inline/inline'\nimport {KBD} from '../../primitives/kbd/kbd'\nimport {_getArrayProp} from '../../styles/helpers'\nimport {Radius} from '../../types/radius'\n\n/**\n * @public\n */\nexport interface HotkeysProps {\n  fontSize?: number | number[]\n  gap?: number | number[]\n  padding?: number | number[]\n  radius?: Radius | Radius[]\n  /**\n   * @deprecated Use `gap` instead.\n   */\n  space?: never\n  keys?: string[]\n}\n\nconst StyledHotkeys = styled.kbd`\n  font: inherit;\n  padding: 1px;\n\n  &:not([hidden]) {\n    display: block;\n  }\n`\n\nconst Key = styled(KBD)`\n  &:not([hidden]) {\n    display: block;\n  }\n`\n\n/**\n * Represent hotkeys (a keyboard combination) with semantic `<kbd>` elements.\n *\n * @public\n */\nexport const Hotkeys = function Hotkeys(\n  props: HotkeysProps & Omit<React.HTMLProps<HTMLElement>, 'as' | 'size'>,\n) {\n  const {fontSize, gap = 0.5, keys, padding, radius, ref, ...restProps} = props\n  const spacing = _getArrayProp(gap)\n\n  if (!keys || keys.length === 0) {\n    return <></>\n  }\n\n  return (\n    <StyledHotkeys data-ui=\"Hotkeys\" {...restProps} ref={ref}>\n      <Inline as=\"span\" gap={spacing}>\n        {keys.map((key, i) => (\n          // oxlint-disable-next-line no-array-index-key\n          <Key fontSize={fontSize} key={i} padding={padding} radius={radius}>\n            {key}\n          </Key>\n        ))}\n      </Inline>\n    </StyledHotkeys>\n  )\n}\n"],"mappings":"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"}