@gnist/design-system 6.0.0-alpha.3 → 6.1.0

package/dist/components/inputs/pickers/calendar.js

@@ -1,211 +1,287 @@
 "use client";
-import { jsxs, jsx } from "react/jsx-runtime";
-import { component } from "@gnist/component-utils";
-import "../../../building-blocks/inputs/internal/TextBelowInput.js";
-import "../../../foundation/iconography/ExtraIconsProvider.js";
-import "../../../foundation/iconography/IconVariantProvider.js";
-import "../../../foundation/iconography/icons.js";
-import "../../../foundation/iconography/Icon.js";
-import "../../../foundation/typography/index.js";
-import { useState, useEffect, useRef } from "react";
-import "classnames";
-import "../../../foundation/logos/Logo.css.js";
-import "@gnist/themes/atoms.css.js";
-import "../../../utilities/layout/Row.js";
-import { tokens } from "@gnist/themes/tokens.css.js";
-import "react-content-loader";
+import { IconButton } from "../../actions/buttons/IconButton.js";
 import { RectangularSkeleton } from "../../../building-blocks/skeletons/RectangularSkeleton.js";
+import "../../../building-blocks/index.js";
+import "../../actions/index.js";
 import { useTranslation } from "../../../translations/index.js";
-import { getStartOfDay, today, maxDayOfMonth, nextMonth, minDayOfMonth, addDays, isSameDate, isNorwegianHoliday } from "../../../utilities/time/date.js";
+import { addDays, getStartOfDay, isNorwegianHoliday, isSameDate, maxDayOfMonth, minDayOfMonth, nextMonth, today } from "../../../utilities/time/date.js";
+import { arrowButton, buttonRow, cellRecipe, cellSkeletonStyle, containerStyle, firstDay, gridStyle, headerCell, rowStyle, selectMonthRow } from "./Calendar.css.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { component } from "@gnist/component-utils";
+import { tokens } from "@gnist/themes/tokens.css.js";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
-import { makeBy, splitAt, chunksOf } from "fp-ts/Array";
 import { pipe } from "fp-ts/function";
-import "../../../utilities/accessibility/ScreenReaderOnly.js";
-import "../../../utilities/accessibility/visuallyHidden.css.js";
-import "../../progress/Spinner.js";
-import "../../actions/buttons/styles.css.js";
-import "../../../styles/states.css.js";
-import { IconButton } from "../../actions/buttons/IconButton.js";
-import "../../actions/selectionControls/checkbox.css.js";
-import "../../actions/selectionControls/shared.css.js";
-import "../../../utilities/layout/Column.js";
-import "../../actions/selectionControls/radiobutton.css.js";
-import "../../actions/selectionControls/RadioGroup.js";
-import "../../actions/selectionControls/switch.css.js";
-import "../../../styles/animations.css.js";
-import "../../actions/chips/styles.css.js";
-import { headerCell, containerStyle, selectMonthRow, buttonRow, arrowButton, gridStyle, rowStyle, cellSkeletonStyle, firstDay, cellRecipe } from "./Calendar.css.js";
-const HeaderCell = component("HeaderCell", headerCell, "div");
+import { chunksOf, makeBy, splitAt } from "fp-ts/Array";
+//#region src/components/inputs/pickers/calendar.tsx
+var HeaderCell = component("HeaderCell", headerCell, "div");
 function weekDayNumberStartingMonday(date) {
-  return (date.getDay() + 6) % 7;
+	return (date.getDay() + 6) % 7;
 }
-const Week = ({ weekDays, current, setCurrent, selected, setSelected, focused, setFocus, focusRef, isDateUnavailable, minDate, maxDate, isLoading }) => {
-  function isDateWithinRange(date) {
-    return date >= (minDate ?? -Infinity) && date <= (maxDate ?? Infinity);
-  }
-  const moveToDate = (date) => {
-    if (!isDateWithinRange(date)) {
-      return;
-    }
-    setCurrent(date);
-    setFocus(date);
-  };
-  if (isLoading) {
-    return jsx("div", { className: rowStyle, role: "row", style: {
-      ...assignInlineVars({
-        [firstDay]: weekDayNumberStartingMonday(weekDays[0]).toString()
-      })
-    }, children: weekDays.map((d) => jsx(RectangularSkeleton, { className: cellSkeletonStyle }, d.getTime())) });
-  }
-  return jsx("div", { className: rowStyle, role: "row", style: {
-    ...assignInlineVars({
-      [firstDay]: weekDayNumberStartingMonday(weekDays[0]).toString()
-    })
-  }, children: weekDays.map((d) => jsx("button", { className: cellRecipe({
-    isToday: isSameDate(d, today()),
-    isSelected: selected ? isSameDate(d, selected) : false,
-    isHoliday: isNorwegianHoliday(d),
-    isDisabled: !isDateWithinRange(d),
-    isUnavailable: isDateUnavailable?.(d) || false
-  }), role: "gridcell", "aria-selected": selected ? isSameDate(d, selected) : false, disabled: !isDateWithinRange(d), "aria-disabled": isDateUnavailable?.(d) ? true : void 0, tabIndex: isSameDate(current, d) ? 0 : -1, ref: isSameDate(focused, d) ? focusRef : void 0, onKeyDown: (event) => {
-    switch (event.key) {
-      case "ArrowUp":
-        event.preventDefault();
-        moveToDate(addDays(current, -7));
-        break;
-      case "ArrowDown":
-        event.preventDefault();
-        moveToDate(addDays(current, 7));
-        break;
-      case "ArrowLeft":
-        event.preventDefault();
-        moveToDate(addDays(current, -1));
-        break;
-      case "ArrowRight":
-        event.preventDefault();
-        moveToDate(addDays(current, 1));
-        break;
-      case "Home":
-        event.preventDefault();
-        if (event.ctrlKey) {
-          if (minDate && minDayOfMonth(d) < minDate) {
-            moveToDate(minDate);
-            break;
-          }
-          moveToDate(minDayOfMonth(d));
-          break;
-        }
-        if (minDate && weekDays[0] < minDate) {
-          moveToDate(minDate);
-          break;
-        }
-        moveToDate(weekDays[0]);
-        break;
-      case "End":
-        event.preventDefault();
-        if (event.ctrlKey) {
-          if (maxDate && maxDayOfMonth(d) > maxDate) {
-            moveToDate(maxDate);
-            break;
-          }
-          moveToDate(maxDayOfMonth(d));
-          break;
-        }
-        if (maxDate && weekDays[weekDays.length - 1] > maxDate) {
-          moveToDate(maxDate);
-          break;
-        }
-        moveToDate(weekDays[weekDays.length - 1]);
-        break;
-      case "PageUp":
-        event.preventDefault();
-        if (minDate && nextMonth(d, -1) < minDate) {
-          moveToDate(minDate);
-          break;
-        }
-        moveToDate(nextMonth(d, -1));
-        break;
-      case "PageDown":
-        event.preventDefault();
-        if (maxDate && nextMonth(d, 1) > maxDate) {
-          moveToDate(maxDate);
-          break;
-        }
-        moveToDate(nextMonth(d, 1));
-        break;
-    }
-  }, onClick: () => {
-    if (isDateUnavailable?.(d)) {
-      return;
-    }
-    moveToDate(d);
-    setSelected(d);
-  }, children: d.getDate() }, d.getTime())) });
+var Week = ({ weekDays, current, setCurrent, selected, setSelected, focused, setFocus, focusRef, isDateUnavailable, minDate, maxDate, isLoading }) => {
+	function isDateWithinRange(date) {
+		return date >= (minDate ?? -Infinity) && date <= (maxDate ?? Infinity);
+	}
+	const moveToDate = (date) => {
+		if (!isDateWithinRange(date)) return;
+		setCurrent(date);
+		setFocus(date);
+	};
+	if (isLoading) return jsx("div", {
+		className: rowStyle,
+		role: "row",
+		style: { ...assignInlineVars({ [firstDay]: weekDayNumberStartingMonday(weekDays[0]).toString() }) },
+		children: weekDays.map((d) => jsx(RectangularSkeleton, { className: cellSkeletonStyle }, d.getTime()))
+	});
+	return jsx("div", {
+		className: rowStyle,
+		role: "row",
+		style: { ...assignInlineVars({ [firstDay]: weekDayNumberStartingMonday(weekDays[0]).toString() }) },
+		children: weekDays.map((d) => jsx("button", {
+			className: cellRecipe({
+				isToday: isSameDate(d, today()),
+				isSelected: selected ? isSameDate(d, selected) : false,
+				isHoliday: isNorwegianHoliday(d),
+				isDisabled: !isDateWithinRange(d),
+				isUnavailable: isDateUnavailable?.(d) || false
+			}),
+			role: "gridcell",
+			"aria-selected": selected ? isSameDate(d, selected) : false,
+			disabled: !isDateWithinRange(d),
+			"aria-disabled": isDateUnavailable?.(d) ? true : void 0,
+			tabIndex: isSameDate(current, d) ? 0 : -1,
+			ref: isSameDate(focused, d) ? focusRef : void 0,
+			onKeyDown: (event) => {
+				switch (event.key) {
+					case "ArrowUp":
+						event.preventDefault();
+						moveToDate(addDays(current, -7));
+						break;
+					case "ArrowDown":
+						event.preventDefault();
+						moveToDate(addDays(current, 7));
+						break;
+					case "ArrowLeft":
+						event.preventDefault();
+						moveToDate(addDays(current, -1));
+						break;
+					case "ArrowRight":
+						event.preventDefault();
+						moveToDate(addDays(current, 1));
+						break;
+					case "Home":
+						event.preventDefault();
+						if (event.ctrlKey) {
+							if (minDate && minDayOfMonth(d) < minDate) {
+								moveToDate(minDate);
+								break;
+							}
+							moveToDate(minDayOfMonth(d));
+							break;
+						}
+						if (minDate && weekDays[0] < minDate) {
+							moveToDate(minDate);
+							break;
+						}
+						moveToDate(weekDays[0]);
+						break;
+					case "End":
+						event.preventDefault();
+						if (event.ctrlKey) {
+							if (maxDate && maxDayOfMonth(d) > maxDate) {
+								moveToDate(maxDate);
+								break;
+							}
+							moveToDate(maxDayOfMonth(d));
+							break;
+						}
+						if (maxDate && weekDays[weekDays.length - 1] > maxDate) {
+							moveToDate(maxDate);
+							break;
+						}
+						moveToDate(weekDays[weekDays.length - 1]);
+						break;
+					case "PageUp":
+						event.preventDefault();
+						if (minDate && nextMonth(d, -1) < minDate) {
+							moveToDate(minDate);
+							break;
+						}
+						moveToDate(nextMonth(d, -1));
+						break;
+					case "PageDown":
+						event.preventDefault();
+						if (maxDate && nextMonth(d, 1) > maxDate) {
+							moveToDate(maxDate);
+							break;
+						}
+						moveToDate(nextMonth(d, 1));
+						break;
+				}
+			},
+			onClick: () => {
+				if (isDateUnavailable?.(d)) return;
+				moveToDate(d);
+				setSelected(d);
+			},
+			children: d.getDate()
+		}, d.getTime()))
+	});
 };
 function getWeeksInMonth(month) {
-  const firstDayOfMonth = minDayOfMonth(month);
-  const lastDayOfMonth = maxDayOfMonth(month);
-  const numberOfDaysInFirstWeek = 7 - weekDayNumberStartingMonday(firstDayOfMonth);
-  const numberOfDaysInMonth = lastDayOfMonth.getDate();
-  const daysInMonth = makeBy(numberOfDaysInMonth, (n) => addDays(firstDayOfMonth, n));
-  return pipe(daysInMonth, splitAt(numberOfDaysInFirstWeek), ([firstWeek, remainingDays]) => [
-    firstWeek,
-    ...chunksOf(7)(remainingDays)
-  ]);
+	const firstDayOfMonth = minDayOfMonth(month);
+	const lastDayOfMonth = maxDayOfMonth(month);
+	const numberOfDaysInFirstWeek = 7 - weekDayNumberStartingMonday(firstDayOfMonth);
+	return pipe(makeBy(lastDayOfMonth.getDate(), (n) => addDays(firstDayOfMonth, n)), splitAt(numberOfDaysInFirstWeek), ([firstWeek, remainingDays]) => [firstWeek, ...chunksOf(7)(remainingDays)]);
 }
-const DateGrid = ({ current, setCurrent, selected, setSelected, focused, setFocus, focusRef, isDateUnavailable, minDate, maxDate, isLoading }) => {
-  const weeks = getWeeksInMonth(current);
-  return jsx("div", { style: { display: "grid", gap: tokens.spacing.base }, role: "rowgroup", children: weeks.map((week) => jsx(Week, { weekDays: week, setCurrent, current, selected, setSelected, focused, setFocus, focusRef, isDateUnavailable, minDate, maxDate, isLoading }, week[0].toString())) });
+var DateGrid = ({ current, setCurrent, selected, setSelected, focused, setFocus, focusRef, isDateUnavailable, minDate, maxDate, isLoading }) => {
+	const weeks = getWeeksInMonth(current);
+	return jsx("div", {
+		style: {
+			display: "grid",
+			gap: tokens.spacing.base
+		},
+		role: "rowgroup",
+		children: weeks.map((week) => jsx(Week, {
+			weekDays: week,
+			setCurrent,
+			current,
+			selected,
+			setSelected,
+			focused,
+			setFocus,
+			focusRef,
+			isDateUnavailable,
+			minDate,
+			maxDate,
+			isLoading
+		}, week[0].toString()))
+	});
 };
 function clampDate(date, minDate, maxDate) {
-  if (minDate && date < minDate) {
-    return minDate;
-  }
-  if (maxDate && date > maxDate) {
-    return maxDate;
-  }
-  return date;
+	if (minDate && date < minDate) return minDate;
+	if (maxDate && date > maxDate) return maxDate;
+	return date;
 }
+/**
+* When a user does not know what date they will select, it can be useful to offer a browsing experience using a calendar component. This allows users to see dates organized into weeks and months, or with additional context such as which dates are unavailable for selection.
+*
+*  Documentation: [Calendar](https://gnist.moller.no/developers/components/latest/?path=/docs/components-inputs-pickers-calendar--docs)
+*/
 function Calendar({ selected, setSelected, isDateUnavailable, minDate: origMinDate, maxDate: origMaxDate, onNavigate, isLoading, ref }) {
-  const minDate = origMinDate ? getStartOfDay(origMinDate) : void 0;
-  const maxDate = origMaxDate ? getStartOfDay(origMaxDate) : void 0;
-  const text = useTranslation((t) => t.components.inputs.pickers.calendar);
-  const days = text.shortDayNames;
-  const getMonthName = (month) => {
-    if (month <= 0 || month > 12) {
-      return "";
-    }
-    return text.monthNames[month];
-  };
-  const [current, internalSetCurrent] = useState(clampDate(today(), minDate, maxDate));
-  useEffect(() => {
-    internalSetCurrent((d) => clampDate(d, minDate, maxDate));
-  }, [maxDate, minDate]);
-  const setCurrent = (date) => {
-    internalSetCurrent(date);
-    onNavigate?.(date);
-  };
-  const [focused, setFocus] = useState(current);
-  const focusRef = useRef(null);
-  useEffect(() => {
-    focusRef.current?.focus();
-  }, [focused]);
-  const handleChangeMonth = (count) => {
-    const tmp = nextMonth(current, count);
-    if (count === -1) {
-      const nextDate = minDate && tmp < minDate ? minDate : tmp;
-      setCurrent(nextDate);
-    } else {
-      const nextDate = maxDate && tmp > maxDate ? maxDate : tmp;
-      setCurrent(nextDate);
-    }
-  };
-  return jsxs("div", { className: containerStyle, role: "group", "aria-label": text.calendar, ref, children: [jsxs("div", { className: selectMonthRow, children: [jsxs("span", { "aria-live": "polite", children: [getMonthName(current.getMonth() + 1), " ", current.getFullYear(), " "] }), jsxs("div", { className: buttonRow, children: [jsx(IconButton, { className: arrowButton, icon: "arrow_backward", onClick: () => {
-    handleChangeMonth(-1);
-  }, label: text.showPreviousMonth, disabled: minDate && maxDayOfMonth(nextMonth(current, -1)) < minDate }), jsx(IconButton, { className: arrowButton, icon: "arrow_forward", onClick: () => {
-    handleChangeMonth(1);
-  }, label: text.showNextMonth, disabled: maxDate && nextMonth(current, 1) > maxDate })] })] }), jsxs("div", { className: gridStyle, role: "grid", children: [jsxs("div", { className: rowStyle, role: "row", style: { height: "unset" }, children: [jsx(HeaderCell, { role: "columnheader", children: days.mon }), jsx(HeaderCell, { role: "columnheader", children: days.tue }), jsx(HeaderCell, { role: "columnheader", children: days.wed }), jsx(HeaderCell, { role: "columnheader", children: days.thu }), jsx(HeaderCell, { role: "columnheader", children: days.fri }), jsx(HeaderCell, { role: "columnheader", children: days.sat }), jsx(HeaderCell, { role: "columnheader", children: days.sun })] }), jsx(DateGrid, { current, setCurrent, selected, setSelected, focused, setFocus, focusRef, isDateUnavailable, minDate, maxDate, isLoading: !!isLoading })] })] });
+	const minDate = origMinDate ? getStartOfDay(origMinDate) : void 0;
+	const maxDate = origMaxDate ? getStartOfDay(origMaxDate) : void 0;
+	const text = useTranslation((t) => t.components.inputs.pickers.calendar);
+	const days = text.shortDayNames;
+	const getMonthName = (month) => {
+		if (month <= 0 || month > 12) return "";
+		return text.monthNames[month];
+	};
+	const [current, internalSetCurrent] = useState(clampDate(today(), minDate, maxDate));
+	useEffect(() => {
+		internalSetCurrent((d) => clampDate(d, minDate, maxDate));
+	}, [maxDate, minDate]);
+	const setCurrent = (date) => {
+		internalSetCurrent(date);
+		onNavigate?.(date);
+	};
+	const [focused, setFocus] = useState(current);
+	const focusRef = useRef(null);
+	useEffect(() => {
+		focusRef.current?.focus();
+	}, [focused]);
+	const handleChangeMonth = (count) => {
+		const tmp = nextMonth(current, count);
+		if (count === -1) setCurrent(minDate && tmp < minDate ? minDate : tmp);
+		else setCurrent(maxDate && tmp > maxDate ? maxDate : tmp);
+	};
+	return jsxs("div", {
+		className: containerStyle,
+		role: "group",
+		"aria-label": text.calendar,
+		ref,
+		children: [jsxs("div", {
+			className: selectMonthRow,
+			children: [jsxs("span", {
+				"aria-live": "polite",
+				children: [
+					getMonthName(current.getMonth() + 1),
+					" ",
+					current.getFullYear(),
+					" "
+				]
+			}), jsxs("div", {
+				className: buttonRow,
+				children: [jsx(IconButton, {
+					className: arrowButton,
+					icon: "arrow_backward",
+					onClick: () => {
+						handleChangeMonth(-1);
+					},
+					label: text.showPreviousMonth,
+					disabled: minDate && maxDayOfMonth(nextMonth(current, -1)) < minDate
+				}), jsx(IconButton, {
+					className: arrowButton,
+					icon: "arrow_forward",
+					onClick: () => {
+						handleChangeMonth(1);
+					},
+					label: text.showNextMonth,
+					disabled: maxDate && nextMonth(current, 1) > maxDate
+				})]
+			})]
+		}), jsxs("div", {
+			className: gridStyle,
+			role: "grid",
+			children: [jsxs("div", {
+				className: rowStyle,
+				role: "row",
+				style: { height: "unset" },
+				children: [
+					jsx(HeaderCell, {
+						role: "columnheader",
+						children: days.mon
+					}),
+					jsx(HeaderCell, {
+						role: "columnheader",
+						children: days.tue
+					}),
+					jsx(HeaderCell, {
+						role: "columnheader",
+						children: days.wed
+					}),
+					jsx(HeaderCell, {
+						role: "columnheader",
+						children: days.thu
+					}),
+					jsx(HeaderCell, {
+						role: "columnheader",
+						children: days.fri
+					}),
+					jsx(HeaderCell, {
+						role: "columnheader",
+						children: days.sat
+					}),
+					jsx(HeaderCell, {
+						role: "columnheader",
+						children: days.sun
+					})
+				]
+			}), jsx(DateGrid, {
+				current,
+				setCurrent,
+				selected,
+				setSelected,
+				focused,
+				setFocus,
+				focusRef,
+				isDateUnavailable,
+				minDate,
+				maxDate,
+				isLoading: !!isLoading
+			})]
+		})]
+	});
 }
-export {
-  Calendar
-};
+//#endregion
+export { Calendar };

package/dist/components/inputs/pickers/index.cjs

@@ -1,5 +1,4 @@
 "use client";
-"use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const calendar = require("./calendar.cjs");
-exports.Calendar = calendar.Calendar;
+const require_calendar = require("./calendar.cjs");
+exports.Calendar = require_calendar.Calendar;

package/dist/components/inputs/pickers/index.js

@@ -1,5 +1,3 @@
 "use client";
 import { Calendar } from "./calendar.js";
-export {
-  Calendar
-};
+export { Calendar };

package/dist/components/inputs/shared-styles/iconButtonOverlay.css.cjs

@@ -1,41 +1,35 @@
 "use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const atoms_css_js = require("@gnist/themes/atoms.css.js");
-const layers_css_js = require("@gnist/themes/layers.css.js");
-const tokens_css_js = require("@gnist/themes/tokens.css.js");
-const iconButtonOverlayRecipe = layers_css_js.gnistRecipe({
-  base: [
-    atoms_css_js.atoms({
-      width: "l",
-      height: "l"
-    }),
-    {
-      position: "absolute",
-      border: "none",
-      zIndex: 20,
-      background: "transparent",
-      cursor: "pointer",
-      top: 0
-    }
-  ],
-  variants: {
-    density: {
-      default: atoms_css_js.atoms({ marginTop: "s" }),
-      compact: atoms_css_js.atoms({ marginTop: "xs" })
-    },
-    placement: {
-      left: {
-        left: tokens_css_js.tokens.spacing.s
-      },
-      right: {
-        right: tokens_css_js.tokens.spacing.s
-      }
-    }
-  },
-  defaultVariants: {
-    density: "default",
-    placement: "left"
-  }
+require("../../../_virtual/_rolldown/runtime.cjs");
+let _gnist_themes_atoms_css_js = require("@gnist/themes/atoms.css.js");
+let _vanilla_extract_recipes = require("@vanilla-extract/recipes");
+let _gnist_themes_tokens_css_js = require("@gnist/themes/tokens.css.js");
+//#region src/components/inputs/shared-styles/iconButtonOverlay.css.ts
+var iconButtonOverlayRecipe = (0, _vanilla_extract_recipes.recipe)({
+	base: [(0, _gnist_themes_atoms_css_js.atoms)({
+		width: "l",
+		height: "l"
+	}), {
+		position: "absolute",
+		border: "none",
+		zIndex: 20,
+		background: "transparent",
+		cursor: "pointer",
+		top: 0
+	}],
+	variants: {
+		density: {
+			default: (0, _gnist_themes_atoms_css_js.atoms)({ marginTop: "s" }),
+			compact: (0, _gnist_themes_atoms_css_js.atoms)({ marginTop: "xs" })
+		},
+		placement: {
+			left: { left: _gnist_themes_tokens_css_js.tokens.spacing.s },
+			right: { right: _gnist_themes_tokens_css_js.tokens.spacing.s }
+		}
+	},
+	defaultVariants: {
+		density: "default",
+		placement: "left"
+	}
 });
+//#endregion
 exports.iconButtonOverlayRecipe = iconButtonOverlayRecipe;

package/dist/components/inputs/shared-styles/iconButtonOverlay.css.js

@@ -1,41 +1,34 @@
 "use client";
 import { atoms } from "@gnist/themes/atoms.css.js";
-import { gnistRecipe } from "@gnist/themes/layers.css.js";
+import { recipe } from "@vanilla-extract/recipes";
 import { tokens } from "@gnist/themes/tokens.css.js";
-const iconButtonOverlayRecipe = gnistRecipe({
-  base: [
-    atoms({
-      width: "l",
-      height: "l"
-    }),
-    {
-      position: "absolute",
-      border: "none",
-      zIndex: 20,
-      background: "transparent",
-      cursor: "pointer",
-      top: 0
-    }
-  ],
-  variants: {
-    density: {
-      default: atoms({ marginTop: "s" }),
-      compact: atoms({ marginTop: "xs" })
-    },
-    placement: {
-      left: {
-        left: tokens.spacing.s
-      },
-      right: {
-        right: tokens.spacing.s
-      }
-    }
-  },
-  defaultVariants: {
-    density: "default",
-    placement: "left"
-  }
+//#region src/components/inputs/shared-styles/iconButtonOverlay.css.ts
+var iconButtonOverlayRecipe = recipe({
+	base: [atoms({
+		width: "l",
+		height: "l"
+	}), {
+		position: "absolute",
+		border: "none",
+		zIndex: 20,
+		background: "transparent",
+		cursor: "pointer",
+		top: 0
+	}],
+	variants: {
+		density: {
+			default: atoms({ marginTop: "s" }),
+			compact: atoms({ marginTop: "xs" })
+		},
+		placement: {
+			left: { left: tokens.spacing.s },
+			right: { right: tokens.spacing.s }
+		}
+	},
+	defaultVariants: {
+		density: "default",
+		placement: "left"
+	}
 });
-export {
-  iconButtonOverlayRecipe
-};
+//#endregion
+export { iconButtonOverlayRecipe };