@galaxy-io/dls 1.0.3

package/dist/containers/FlexWrapper.js

@@ -0,0 +1,122 @@
+import { getCssSizeValue } from "../utils/linaria.js";
+/* empty css                      */
+import { styled } from "@linaria/react";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/containers/FlexWrapper.tsx
+var FlexDirection = /* @__PURE__ */ function(FlexDirection) {
+	FlexDirection["ROW"] = "row";
+	FlexDirection["COLUMN"] = "column";
+	FlexDirection["ROW_REVERSE"] = "row-reverse";
+	FlexDirection["COLUMN_REVERSE"] = "column-reverse";
+	return FlexDirection;
+}({});
+var AlignItems = /* @__PURE__ */ function(AlignItems) {
+	AlignItems["START"] = "start";
+	AlignItems["CENTER"] = "center";
+	AlignItems["END"] = "end";
+	AlignItems["BASELINE"] = "baseline";
+	AlignItems["STRETCH"] = "stretch";
+	return AlignItems;
+}({});
+var JustifyContent = /* @__PURE__ */ function(JustifyContent) {
+	JustifyContent["START"] = "start";
+	JustifyContent["CENTER"] = "center";
+	JustifyContent["END"] = "end";
+	JustifyContent["SPACE_BETWEEN"] = "space-between";
+	JustifyContent["SPACE_AROUND"] = "space-around";
+	JustifyContent["SPACE_EVENLY"] = "space-evenly";
+	return JustifyContent;
+}({});
+var FlexWrap = /* @__PURE__ */ function(FlexWrap) {
+	FlexWrap["NOWRAP"] = "nowrap";
+	FlexWrap["WRAP"] = "wrap";
+	FlexWrap["WRAP_REVERSE"] = "wrap-reverse";
+	return FlexWrap;
+}({});
+var FlexGap = /* @__PURE__ */ function(FlexGap) {
+	FlexGap["NONE"] = "0";
+	FlexGap["XXSMALL"] = "2px";
+	FlexGap["XSMALL"] = "4px";
+	FlexGap["SMALL"] = "8px";
+	FlexGap["MEDIUM"] = "12px";
+	FlexGap["LARGE"] = "16px";
+	FlexGap["XLARGE"] = "24px";
+	FlexGap["XXLARGE"] = "32px";
+	return FlexGap;
+}({});
+var _exp = () => ({ direction = "row" }) => direction;
+var _exp2 = () => ({ alignItems = "start" }) => alignItems;
+var _exp3 = () => ({ justifyContent = "start" }) => justifyContent;
+var _exp4 = () => ({ gap }) => getCssSizeValue(gap);
+var _exp5 = () => ({ wrap = "nowrap" }) => wrap;
+var _exp6 = () => ({ width, fillWidth }) => {
+	if (fillWidth) return "100%";
+	if (width) return getCssSizeValue(width, "0");
+	return "auto";
+};
+var _exp7 = () => ({ height, fillHeight }) => {
+	if (fillHeight) return "100%";
+	if (height) return getCssSizeValue(height);
+	return "auto";
+};
+var _exp8 = () => ({ minWidth }) => minWidth ? getCssSizeValue(minWidth) : "auto";
+var _exp9 = () => ({ maxWidth }) => maxWidth ? getCssSizeValue(maxWidth) : "none";
+var _exp0 = () => ({ minHeight }) => minHeight ? getCssSizeValue(minHeight) : "auto";
+var _exp1 = () => ({ maxHeight }) => maxHeight ? getCssSizeValue(maxHeight) : "none";
+var _exp10 = () => ({ overflow = "visible" }) => overflow;
+var _exp11 = () => ({ padding = "0" }) => padding;
+var _exp12 = () => ({ margin = "0" }) => margin;
+var _exp13 = () => ({ onClick }) => onClick ? "pointer" : "inherit";
+var StyledFlexWrapper = /*#__PURE__*/ styled("div")({
+	name: "StyledFlexWrapper",
+	class: "s12krdms",
+	propsAsIs: false,
+	vars: {
+		"s12krdms-0": [_exp()],
+		"s12krdms-1": [_exp2()],
+		"s12krdms-2": [_exp3()],
+		"s12krdms-3": [_exp4()],
+		"s12krdms-4": [_exp5()],
+		"s12krdms-5": [_exp6()],
+		"s12krdms-6": [_exp7()],
+		"s12krdms-7": [_exp8()],
+		"s12krdms-8": [_exp9()],
+		"s12krdms-9": [_exp0()],
+		"s12krdms-10": [_exp1()],
+		"s12krdms-11": [_exp10()],
+		"s12krdms-12": [_exp11()],
+		"s12krdms-13": [_exp12()],
+		"s12krdms-14": [_exp13()]
+	}
+});
+var FlexWrapper = forwardRef(({ children, direction, alignItems, justifyContent, wrap, gap, width, height, minWidth, maxWidth, minHeight, maxHeight, fillWidth = false, fillHeight = false, overflow, padding, margin, onClick, onMouseDown, onMouseEnter, onMouseLeave, onScroll }, ref) => {
+	return /* @__PURE__ */ jsx(StyledFlexWrapper, {
+		ref,
+		direction,
+		alignItems,
+		justifyContent,
+		wrap,
+		gap,
+		width,
+		height,
+		minWidth,
+		maxWidth,
+		minHeight,
+		maxHeight,
+		fillWidth,
+		fillHeight,
+		overflow,
+		padding,
+		margin,
+		onClick,
+		onMouseDown,
+		onMouseEnter,
+		onMouseLeave,
+		onScroll,
+		children
+	});
+});
+FlexWrapper.displayName = "FlexWrapper";
+//#endregion
+export { AlignItems, FlexDirection, FlexGap, FlexWrap, JustifyContent, FlexWrapper as default };

package/dist/containers/GridWrapper.d.ts

@@ -0,0 +1,120 @@
+import type { PropsWithChildren } from "react";
+export declare enum GridAlignItems {
+    START = "START",
+    CENTER = "CENTER",
+    END = "END",
+    STRETCH = "STRETCH"
+}
+export declare enum GridJustifyItems {
+    START = "START",
+    CENTER = "CENTER",
+    END = "END",
+    STRETCH = "STRETCH"
+}
+export declare enum GridJustifyContent {
+    START = "START",
+    CENTER = "CENTER",
+    END = "END",
+    SPACE_BETWEEN = "SPACE_BETWEEN",
+    SPACE_AROUND = "SPACE_AROUND",
+    SPACE_EVENLY = "SPACE_EVENLY",
+    STRETCH = "STRETCH"
+}
+export declare enum GridAlignContent {
+    START = "START",
+    CENTER = "CENTER",
+    END = "END",
+    SPACE_BETWEEN = "SPACE_BETWEEN",
+    SPACE_AROUND = "SPACE_AROUND",
+    SPACE_EVENLY = "SPACE_EVENLY",
+    STRETCH = "STRETCH"
+}
+interface GridWrapperProps {
+    /**
+     * Number of columns in the grid, or a custom grid-template-columns value
+     * - number: Creates that many equal-width columns using repeat(n, 1fr)
+     * - string: Used directly as grid-template-columns value (e.g., "200px 1fr 1fr")
+     */
+    columns?: number | string;
+    /**
+     * Number of rows in the grid, or a custom grid-template-rows value
+     * - number: Creates that many equal-height rows using repeat(n, 1fr)
+     * - string: Used directly as grid-template-rows value
+     */
+    rows?: number | string;
+    /**
+     * Gap between grid items (both row and column gap)
+     * Can be a number (pixels) or string (e.g., "1rem")
+     */
+    gap?: number | string;
+    /**
+     * Gap between rows only
+     */
+    rowGap?: number | string;
+    /**
+     * Gap between columns only
+     */
+    columnGap?: number | string;
+    /**
+     * Aligns grid items along the block (column) axis within their grid area
+     */
+    alignItems?: GridAlignItems;
+    /**
+     * Aligns grid items along the inline (row) axis within their grid area
+     */
+    justifyItems?: GridJustifyItems;
+    /**
+     * Aligns the grid along the block (column) axis when grid is smaller than container
+     */
+    alignContent?: GridAlignContent;
+    /**
+     * Aligns the grid along the inline (row) axis when grid is smaller than container
+     */
+    justifyContent?: GridJustifyContent;
+    /**
+     * Sets the width of the grid container
+     */
+    width?: number | string;
+    /**
+     * Sets the height of the grid container
+     */
+    height?: number | string;
+    /**
+     * Sets the minimum width of the grid container
+     */
+    minWidth?: number | string;
+    /**
+     * Sets the maximum width of the grid container
+     */
+    maxWidth?: number | string;
+    /**
+     * Sets the minimum height of the grid container
+     */
+    minHeight?: number | string;
+    /**
+     * Sets the maximum height of the grid container
+     */
+    maxHeight?: number | string;
+    /**
+     * When true, the container will fill its parent's width (width: 100%)
+     */
+    fillWidth?: boolean;
+    /**
+     * When true, the container will fill its parent's height (height: 100%)
+     */
+    fillHeight?: boolean;
+    /**
+     * Sets the padding inside the container
+     */
+    padding?: number | string;
+    /**
+     * Sets the margin outside the container
+     */
+    margin?: number | string;
+    /**
+     * Controls overflow behavior
+     */
+    overflow?: React.CSSProperties["overflow"];
+}
+declare const GridWrapper: ({ children, columns, rows, gap, rowGap, columnGap, alignItems, justifyItems, alignContent, justifyContent, width, height, minWidth, maxWidth, minHeight, maxHeight, fillWidth, fillHeight, padding, margin, overflow, }: PropsWithChildren<GridWrapperProps>) => import("react").JSX.Element;
+export default GridWrapper;

package/dist/containers/GridWrapper.js

@@ -0,0 +1,117 @@
+import { getCssSizeValue } from "../utils/linaria.js";
+/* empty css                      */
+import { styled } from "@linaria/react";
+import { jsx } from "react/jsx-runtime";
+//#region src/containers/GridWrapper.tsx
+var GridAlignItems = /* @__PURE__ */ function(GridAlignItems) {
+	GridAlignItems["START"] = "START";
+	GridAlignItems["CENTER"] = "CENTER";
+	GridAlignItems["END"] = "END";
+	GridAlignItems["STRETCH"] = "STRETCH";
+	return GridAlignItems;
+}({});
+var GridJustifyItems = /* @__PURE__ */ function(GridJustifyItems) {
+	GridJustifyItems["START"] = "START";
+	GridJustifyItems["CENTER"] = "CENTER";
+	GridJustifyItems["END"] = "END";
+	GridJustifyItems["STRETCH"] = "STRETCH";
+	return GridJustifyItems;
+}({});
+var GridJustifyContent = /* @__PURE__ */ function(GridJustifyContent) {
+	GridJustifyContent["START"] = "START";
+	GridJustifyContent["CENTER"] = "CENTER";
+	GridJustifyContent["END"] = "END";
+	GridJustifyContent["SPACE_BETWEEN"] = "SPACE_BETWEEN";
+	GridJustifyContent["SPACE_AROUND"] = "SPACE_AROUND";
+	GridJustifyContent["SPACE_EVENLY"] = "SPACE_EVENLY";
+	GridJustifyContent["STRETCH"] = "STRETCH";
+	return GridJustifyContent;
+}({});
+var GridAlignContent = /* @__PURE__ */ function(GridAlignContent) {
+	GridAlignContent["START"] = "START";
+	GridAlignContent["CENTER"] = "CENTER";
+	GridAlignContent["END"] = "END";
+	GridAlignContent["SPACE_BETWEEN"] = "SPACE_BETWEEN";
+	GridAlignContent["SPACE_AROUND"] = "SPACE_AROUND";
+	GridAlignContent["SPACE_EVENLY"] = "SPACE_EVENLY";
+	GridAlignContent["STRETCH"] = "STRETCH";
+	return GridAlignContent;
+}({});
+var _exp = () => ({ columns = 1 }) => typeof columns === "number" ? `repeat(${columns}, 1fr)` : columns;
+var _exp2 = () => ({ rows }) => rows ? typeof rows === "number" ? `repeat(${rows}, 1fr)` : rows : "auto";
+var _exp3 = () => ({ gap }) => getCssSizeValue(gap);
+var _exp4 = () => ({ rowGap, gap }) => getCssSizeValue(rowGap ?? gap);
+var _exp5 = () => ({ columnGap, gap }) => getCssSizeValue(columnGap ?? gap);
+var _exp6 = () => ({ alignItems = "STRETCH" }) => alignItems;
+var _exp7 = () => ({ justifyItems = "STRETCH" }) => justifyItems;
+var _exp8 = () => ({ alignContent = "START" }) => alignContent;
+var _exp9 = () => ({ justifyContent = "START" }) => justifyContent;
+var _exp0 = () => ({ width, fillWidth }) => {
+	if (fillWidth) return "100%";
+	if (width) return getCssSizeValue(width);
+	return "auto";
+};
+var _exp1 = () => ({ height, fillHeight }) => {
+	if (fillHeight) return "100%";
+	if (height) return getCssSizeValue(height);
+	return "auto";
+};
+var _exp10 = () => ({ minWidth }) => minWidth ? getCssSizeValue(minWidth) : "auto";
+var _exp11 = () => ({ maxWidth }) => maxWidth ? getCssSizeValue(maxWidth) : "none";
+var _exp12 = () => ({ minHeight }) => minHeight ? getCssSizeValue(minHeight) : "auto";
+var _exp13 = () => ({ maxHeight }) => maxHeight ? getCssSizeValue(maxHeight) : "none";
+var _exp14 = () => ({ overflow = "visible" }) => overflow;
+var _exp15 = () => ({ padding }) => padding ? getCssSizeValue(padding) : "0";
+var _exp16 = () => ({ margin }) => margin ? getCssSizeValue(margin) : "0";
+var StyledGridWrapper = /*#__PURE__*/ styled("div")({
+	name: "StyledGridWrapper",
+	class: "s40bxfr",
+	propsAsIs: false,
+	vars: {
+		"s40bxfr-0": [_exp()],
+		"s40bxfr-1": [_exp2()],
+		"s40bxfr-2": [_exp3()],
+		"s40bxfr-3": [_exp4()],
+		"s40bxfr-4": [_exp5()],
+		"s40bxfr-5": [_exp6()],
+		"s40bxfr-6": [_exp7()],
+		"s40bxfr-7": [_exp8()],
+		"s40bxfr-8": [_exp9()],
+		"s40bxfr-9": [_exp0()],
+		"s40bxfr-10": [_exp1()],
+		"s40bxfr-11": [_exp10()],
+		"s40bxfr-12": [_exp11()],
+		"s40bxfr-13": [_exp12()],
+		"s40bxfr-14": [_exp13()],
+		"s40bxfr-15": [_exp14()],
+		"s40bxfr-16": [_exp15()],
+		"s40bxfr-17": [_exp16()]
+	}
+});
+var GridWrapper = ({ children, columns, rows, gap, rowGap, columnGap, alignItems, justifyItems, alignContent, justifyContent, width, height, minWidth, maxWidth, minHeight, maxHeight, fillWidth = false, fillHeight = false, padding, margin, overflow }) => {
+	return /* @__PURE__ */ jsx(StyledGridWrapper, {
+		columns,
+		rows,
+		gap,
+		rowGap,
+		columnGap,
+		alignItems,
+		justifyItems,
+		alignContent,
+		justifyContent,
+		width,
+		height,
+		minWidth,
+		maxWidth,
+		minHeight,
+		maxHeight,
+		fillWidth,
+		fillHeight,
+		padding,
+		margin,
+		overflow,
+		children
+	});
+};
+//#endregion
+export { GridAlignContent, GridAlignItems, GridJustifyContent, GridJustifyItems, GridWrapper as default };

package/dist/containers/Spacing.d.ts

@@ -0,0 +1,13 @@
+import type { PropsWithChildren } from "react";
+export type SpacingSize = string | number;
+export interface SpacingProps {
+    margin?: SpacingSize | SpacingSize[];
+    top?: SpacingSize;
+    right?: SpacingSize;
+    bottom?: SpacingSize;
+    left?: SpacingSize;
+    fillWidth?: boolean;
+    fillHeight?: boolean;
+}
+declare const Spacing: ({ children, margin, top, right, bottom, left, fillWidth, fillHeight, }: PropsWithChildren<SpacingProps>) => import("react").JSX.Element;
+export default Spacing;

package/dist/containers/Spacing.js

@@ -0,0 +1,52 @@
+/* empty css                  */
+import { styled } from "@linaria/react";
+import { jsx } from "react/jsx-runtime";
+//#region src/containers/Spacing.tsx
+function getSpacingSizeValue(value) {
+	if (typeof value === "number") return `${value}px`;
+	return value;
+}
+function getSpacingSizeValueFromShorthand(margin) {
+	if (Array.isArray(margin)) return margin.map((val) => getSpacingSizeValue(val)).join(" ");
+	return getSpacingSizeValue(margin);
+}
+var _exp = () => ({ $margin }) => $margin || "unset";
+var _exp2 = () => ({ $marginTop }) => $marginTop || "unset";
+var _exp3 = () => ({ $marginRight }) => $marginRight || "unset";
+var _exp4 = () => ({ $marginBottom }) => $marginBottom || "unset";
+var _exp5 = () => ({ $marginLeft }) => $marginLeft || "unset";
+var _exp6 = () => ({ $fillWidth }) => $fillWidth ? "100%" : "auto";
+var _exp7 = () => ({ $fillHeight }) => $fillHeight ? "100%" : "auto";
+var StyledSpacing = /*#__PURE__*/ styled("div")({
+	name: "StyledSpacing",
+	class: "s2h3guw",
+	propsAsIs: false,
+	vars: {
+		"s2h3guw-0": [_exp()],
+		"s2h3guw-1": [_exp2()],
+		"s2h3guw-2": [_exp3()],
+		"s2h3guw-3": [_exp4()],
+		"s2h3guw-4": [_exp5()],
+		"s2h3guw-5": [_exp6()],
+		"s2h3guw-6": [_exp7()]
+	}
+});
+var Spacing = ({ children, margin, top, right, bottom, left, fillWidth, fillHeight }) => {
+	if (margin !== void 0) return /* @__PURE__ */ jsx(StyledSpacing, {
+		$margin: getSpacingSizeValueFromShorthand(margin),
+		$fillWidth: fillWidth,
+		$fillHeight: fillHeight,
+		children
+	});
+	return /* @__PURE__ */ jsx(StyledSpacing, {
+		$marginTop: getSpacingSizeValue(top),
+		$marginRight: getSpacingSizeValue(right),
+		$marginBottom: getSpacingSizeValue(bottom),
+		$marginLeft: getSpacingSizeValue(left),
+		$fillWidth: fillWidth,
+		$fillHeight: fillHeight,
+		children
+	});
+};
+//#endregion
+export { Spacing as default };

package/dist/containers/Wrapper.d.ts

@@ -0,0 +1,16 @@
+import type { PropsWithChildren } from "react";
+interface WrapperProps {
+    position?: React.CSSProperties["position"];
+    minWidth?: number | string;
+    maxWidth?: number | string;
+    fillWidth?: boolean;
+    fillHeight?: boolean;
+    overflow?: React.CSSProperties["overflow"];
+    padding?: React.CSSProperties["padding"];
+    top?: React.CSSProperties["top"];
+    right?: React.CSSProperties["right"];
+    bottom?: React.CSSProperties["bottom"];
+    left?: React.CSSProperties["left"];
+}
+declare const Wrapper: ({ children, position, minWidth, maxWidth, fillWidth, fillHeight, overflow, padding, top, right, bottom, left, }: PropsWithChildren<WrapperProps>) => import("react").JSX.Element;
+export default Wrapper;

package/dist/containers/Wrapper.js

@@ -0,0 +1,50 @@
+import { getCssSizeValue } from "../utils/linaria.js";
+/* empty css                  */
+import { styled } from "@linaria/react";
+import { jsx } from "react/jsx-runtime";
+//#region src/containers/Wrapper.tsx
+var _exp = () => ({ $position }) => $position ?? "static";
+var _exp2 = () => ({ $minWidth }) => $minWidth ? getCssSizeValue($minWidth) : "auto";
+var _exp3 = () => ({ $fillWidth, $maxWidth }) => $fillWidth ? "100%" : $maxWidth ? getCssSizeValue($maxWidth) : "auto";
+var _exp4 = () => ({ $fillHeight }) => $fillHeight ? "100%" : "auto";
+var _exp5 = () => ({ $overflow }) => $overflow ?? "visible";
+var _exp6 = () => ({ $padding }) => $padding ?? "0";
+var _exp7 = () => ({ $top }) => $top ?? "auto";
+var _exp8 = () => ({ $right }) => $right ?? "auto";
+var _exp9 = () => ({ $bottom }) => $bottom ?? "auto";
+var _exp0 = () => ({ $left }) => $left ?? "auto";
+var StyledWrapper = /*#__PURE__*/ styled("div")({
+	name: "StyledWrapper",
+	class: "sck44b4",
+	propsAsIs: false,
+	vars: {
+		"sck44b4-0": [_exp()],
+		"sck44b4-1": [_exp2()],
+		"sck44b4-2": [_exp3()],
+		"sck44b4-3": [_exp4()],
+		"sck44b4-4": [_exp5()],
+		"sck44b4-5": [_exp6()],
+		"sck44b4-6": [_exp7()],
+		"sck44b4-7": [_exp8()],
+		"sck44b4-8": [_exp9()],
+		"sck44b4-9": [_exp0()]
+	}
+});
+var Wrapper = ({ children, position, minWidth, maxWidth, fillWidth, fillHeight, overflow, padding, top, right, bottom, left }) => {
+	return /* @__PURE__ */ jsx(StyledWrapper, {
+		$position: position,
+		$minWidth: minWidth,
+		$maxWidth: maxWidth,
+		$fillWidth: fillWidth,
+		$fillHeight: fillHeight,
+		$overflow: overflow,
+		$padding: padding,
+		$top: top,
+		$right: right,
+		$bottom: bottom,
+		$left: left,
+		children
+	});
+};
+//#endregion
+export { Wrapper as default };

package/dist/dividers/HorizontalDivider.d.ts

@@ -0,0 +1,2 @@
+declare const HorizontalDivider: () => import("react").JSX.Element;
+export default HorizontalDivider;

package/dist/dividers/HorizontalDivider.js

@@ -0,0 +1,17 @@
+import { withTheme } from "../theme/GalaxyTheme.js";
+/* empty css                            */
+import { styled } from "@linaria/react";
+import { jsx } from "react/jsx-runtime";
+//#region src/dividers/HorizontalDivider.tsx
+var _exp = () => ({ theme }) => theme.color.border.primary;
+var HorizontalDividerWrapper = withTheme(/*#__PURE__*/ styled("div")({
+	name: "HorizontalDividerWrapper",
+	class: "h1sww5hz",
+	propsAsIs: false,
+	vars: { "h1sww5hz-0": [_exp()] }
+}));
+var HorizontalDivider = () => {
+	return /* @__PURE__ */ jsx(HorizontalDividerWrapper, {});
+};
+//#endregion
+export { HorizontalDivider as default };

package/dist/dividers/VerticalDivider.d.ts

@@ -0,0 +1,2 @@
+declare const VerticalDivider: () => import("react").JSX.Element;
+export default VerticalDivider;

package/dist/dividers/VerticalDivider.js

@@ -0,0 +1,17 @@
+import { withTheme } from "../theme/GalaxyTheme.js";
+/* empty css                          */
+import { styled } from "@linaria/react";
+import { jsx } from "react/jsx-runtime";
+//#region src/dividers/VerticalDivider.tsx
+var _exp = () => ({ theme }) => theme.color.border.primary;
+var VerticalDividerWrapper = withTheme(/*#__PURE__*/ styled("div")({
+	name: "VerticalDividerWrapper",
+	class: "v1f76t13",
+	propsAsIs: false,
+	vars: { "v1f76t13-0": [_exp()] }
+}));
+var VerticalDivider = () => {
+	return /* @__PURE__ */ jsx(VerticalDividerWrapper, {});
+};
+//#endregion
+export { VerticalDivider as default };

package/dist/drawer/Drawer.d.ts

@@ -0,0 +1,13 @@
+import { type PropsWithChildren } from "react";
+export interface DrawerProps {
+    open: boolean;
+    onClose: () => void;
+    width?: number | string;
+    /**
+     * Whether clicking outside the drawer should close it
+     * @default false
+     */
+    closeOnClickOutside?: boolean;
+}
+declare const Drawer: ({ open, onClose, width, closeOnClickOutside, children, }: PropsWithChildren<DrawerProps>) => import("react").ReactPortal;
+export default Drawer;

package/dist/drawer/Drawer.js

@@ -0,0 +1,70 @@
+import { withTheme } from "../theme/GalaxyTheme.js";
+import { getCssSizeValue } from "../utils/linaria.js";
+import { OverlayLayer } from "../overlay/constants.js";
+import useOverlay from "../overlay/useOverlay.js";
+import { useDismiss } from "../hooks/useDismiss.js";
+/* empty css                 */
+import { styled } from "@linaria/react";
+import { useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+//#region src/drawer/Drawer.tsx
+var _exp = () => ({ isOpen }) => isOpen ? 1 : 0;
+var _exp2 = () => ({ isOpen }) => isOpen ? "visible" : "hidden";
+var StyledDrawerWrapper = /*#__PURE__*/ styled("div")({
+	name: "StyledDrawerWrapper",
+	class: "smaltnf",
+	propsAsIs: false,
+	vars: {
+		"smaltnf-0": [_exp()],
+		"smaltnf-1": [_exp2()]
+	}
+});
+var DrawerWrapperContent = /*#__PURE__*/ styled("div")({
+	name: "DrawerWrapperContent",
+	class: "d4wvefv",
+	propsAsIs: false
+});
+var DrawerContentWrapper = /*#__PURE__*/ styled("div")({
+	name: "DrawerContentWrapper",
+	class: "d19reibl",
+	propsAsIs: false
+});
+var _exp3 = () => ({ $width }) => getCssSizeValue($width, "60%");
+var _exp4 = () => ({ theme }) => theme.color.background.base;
+var _exp5 = () => ({ theme }) => theme.color.border.primary;
+var DrawerWrapperContentBody = withTheme(/*#__PURE__*/ styled("div")({
+	name: "DrawerWrapperContentBody",
+	class: "d410s14",
+	propsAsIs: false,
+	vars: {
+		"d410s14-0": [_exp3()],
+		"d410s14-1": [_exp4()],
+		"d410s14-2": [_exp5()]
+	}
+}));
+var Drawer = ({ open, onClose, width, closeOnClickOutside = false, children }) => {
+	const { zIndex, isTopmost } = useOverlay(onClose, open, { layer: OverlayLayer.DRAWER });
+	const handleContentClick = useCallback((e) => {
+		e.stopPropagation();
+	}, []);
+	const dismissRef = useDismiss({
+		onDismiss: onClose,
+		enabled: open && isTopmost,
+		enableClickOutside: closeOnClickOutside && isTopmost
+	});
+	return createPortal(open && /* @__PURE__ */ jsx(StyledDrawerWrapper, {
+		isOpen: open,
+		role: "dialog",
+		"aria-modal": "true",
+		style: { zIndex },
+		children: /* @__PURE__ */ jsx(DrawerWrapperContent, { children: /* @__PURE__ */ jsx(DrawerContentWrapper, { children: /* @__PURE__ */ jsx(DrawerWrapperContentBody, {
+			ref: dismissRef,
+			$width: width,
+			onClick: handleContentClick,
+			children
+		}) }) })
+	}), document.body);
+};
+//#endregion
+export { Drawer as default };

package/dist/dropdown/Dropdown.d.ts

@@ -0,0 +1,51 @@
+import { type PropsWithChildren, type ReactNode } from "react";
+export declare enum DropdownVariant {
+    TRANSPARENT = "TRANSPARENT",
+    BASE = "BASE",
+    PRIMARY = "PRIMARY",
+    SECONDARY = "SECONDARY",
+    TERTIARY = "TERTIARY"
+}
+export declare enum DropdownPosition {
+    TOP = "top",
+    BOTTOM = "bottom",
+    LEFT = "left",
+    RIGHT = "right",
+    TOP_START = "top-start",
+    TOP_END = "top-end",
+    BOTTOM_START = "bottom-start",
+    BOTTOM_END = "bottom-end",
+    RIGHT_START = "right-start",
+    RIGHT_END = "right-end",
+    LEFT_START = "left-start",
+    LEFT_END = "left-end",
+    AUTO = "auto",
+    AUTO_START = "auto-start",
+    AUTO_END = "auto-end"
+}
+export declare enum DropdownTrigger {
+    CLICK = "click",
+    HOVER = "hover",
+    FOCUS = "focus",
+    MANUAL = "manual"
+}
+export interface DropdownProps {
+    variant?: DropdownVariant;
+    header?: ReactNode;
+    body: ReactNode;
+    footer?: ReactNode;
+    position?: DropdownPosition;
+    offset?: [number, number];
+    trigger?: DropdownTrigger;
+    width?: number | string;
+    isOpen?: boolean;
+    onClose?: () => void;
+    minWidth?: number | string;
+    maxWidth?: number | string;
+    fillWidth?: boolean;
+    noPadding?: boolean;
+    noBorder?: boolean;
+    isDisabled?: boolean;
+}
+declare const Dropdown: ({ children, variant, header, body, footer, position, offset, minWidth, maxWidth, isOpen: controlledIsOpen, onClose, noPadding, noBorder, fillWidth, isDisabled, }: PropsWithChildren<DropdownProps>) => import("react").JSX.Element;
+export default Dropdown;