@apify/ui-library 1.148.0 → 1.148.1-featuremigrateapifyuilibrary-48563e.13

package/dist/components/color_wheel_gradient/color_wheel_gradient.js

@@ -0,0 +1,27 @@
+import e from "styled-components";
+//#region src/components/color_wheel_gradient/color_wheel_gradient.tsx
+var t = e.div`
+    ${({ radius: e, rotation: t = 0, blurSize: n = 40, translateX: r = 0, translateY: i = 0 }) => `
+    z-index: 1;
+    position: absolute;
+    width: ${e ? `${e}px` : "auto"};
+    height: ${e ? `${e}px` : "auto"};
+    transform-origin: center;
+    transform: translate(${r}px, ${i}px) rotate(${t}deg);
+
+    opacity: 0.30;
+    background: conic-gradient(
+        rgba(93, 133, 225, 0.99) 0deg,
+        rgba(106, 20, 222, 0.99) 69deg,
+        rgba(228, 68, 103, 0.99) 150deg,
+        rgba(250, 129, 54, 0.99) 221deg,
+        rgba(240, 178, 27, 0.99) 287deg,
+        rgba(18, 150, 111, 0.99) 360deg
+    );
+
+    border-radius: 50%;
+    filter: blur(${n}px)
+`}
+`;
+//#endregion
+export { t as ColorWheelGradient };

package/dist/components/color_wheel_gradient/index.d.ts

@@ -0,0 +1,2 @@
+export * from './color_wheel_gradient';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/color_wheel_gradient/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/color_wheel_gradient/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC"}

package/dist/components/dropdown/dropdown.context.d.ts

@@ -0,0 +1,6 @@
+export type DropdownContextValue = {
+    handleSelectAndClose: (event?: Event) => void;
+};
+export declare const DropdownContext: import('react').Context<DropdownContextValue | null>;
+export declare const useDropdownContext: () => DropdownContextValue;
+//# sourceMappingURL=dropdown.context.d.ts.map

package/dist/components/dropdown/dropdown.context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.context.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.context.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,oBAAoB,GAAG;IAC/B,oBAAoB,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;CACjD,CAAC;AAEF,eAAO,MAAM,eAAe,sDAAmD,CAAC;AAChF,eAAO,MAAM,kBAAkB,4BAM9B,CAAC"}

package/dist/components/dropdown/dropdown.context.js

@@ -0,0 +1,9 @@
+import { createContext as e, useContext as t } from "react";
+//#region src/components/dropdown/dropdown.context.tsx
+var n = e(null), r = () => {
+	let e = t(n);
+	if (!e) throw Error("Dropdown components must be used within a DropdownRoot provider");
+	return e;
+};
+//#endregion
+export { n as DropdownContext, r as useDropdownContext };

package/dist/components/dropdown/dropdown.d.ts

@@ -0,0 +1,48 @@
+import { default as React } from 'react';
+import { BaseDropdownItemProps } from './dropdown.types';
+import type * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+type DropdownItemProps = React.ComponentPropsWithRef<typeof DropdownMenu.Item> & BaseDropdownItemProps & {
+    trailingIcon?: React.ReactNode;
+    selected?: boolean;
+    onSelect?: (event: Event) => void;
+    tags?: React.ReactNode[];
+};
+type DropdownCheckboxItemProps = React.ComponentPropsWithRef<typeof DropdownMenu.CheckboxItem> & BaseDropdownItemProps & {
+    checked?: boolean;
+    trailingIcon?: React.ReactNode;
+    onCheckedChange?: (checked: boolean) => void;
+    onSelect?: (event: Event) => void;
+};
+type RadioOption = {
+    label: string;
+    description?: string;
+    disabled?: boolean;
+    value: string;
+};
+type DropdownRadioGroupProps = {
+    options: RadioOption[];
+    value: string;
+    setValue: (value: string) => void;
+};
+type DropdownLabelProps = React.ComponentPropsWithRef<typeof DropdownMenu.Label> & {
+    children?: React.ReactNode | React.ReactNode[];
+};
+type DropdownControlProps = React.ComponentPropsWithRef<typeof DropdownMenu.Label> & {
+    children?: React.ReactNode | React.ReactNode[];
+};
+export declare const Dropdown: (({ closeOnSelect, children, isOpen, onIsOpenChange, ...props }: DropdownMenu.DropdownMenuProps & {
+    closeOnSelect?: boolean;
+    children: React.ReactNode;
+    onIsOpenChange?: (isOpen: boolean) => void;
+    isOpen?: boolean;
+    contentProps?: React.ComponentPropsWithRef<typeof DropdownMenu.Content>;
+}) => import("react/jsx-runtime").JSX.Element) & {
+    Item: ({ children, icon, trailingIcon, selected, description, onSelect, className, disabled, tags, ...props }: DropdownItemProps) => import("react/jsx-runtime").JSX.Element;
+    CheckboxItem: ({ checked, children, icon, trailingIcon, onCheckedChange, description, onSelect, disabled, className, ...props }: DropdownCheckboxItemProps) => import("react/jsx-runtime").JSX.Element;
+    Label: (props: DropdownLabelProps) => import("react/jsx-runtime").JSX.Element;
+    RadioGroup: ({ options, value, setValue }: DropdownRadioGroupProps) => import("react/jsx-runtime").JSX.Element;
+    Controls: (props: DropdownControlProps) => import("react/jsx-runtime").JSX.Element;
+    Separator: (props: React.ComponentPropsWithRef<typeof DropdownMenu.Separator>) => import("react/jsx-runtime").JSX.Element;
+};
+export {};
+//# sourceMappingURL=dropdown.d.ts.map

package/dist/components/dropdown/dropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,YAAY,MAAM,+BAA+B,CAAC;AAGnE,OAAO,KAAK,MAAM,OAAO,CAAC;AAyB1B,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAG9D,KAAK,iBAAiB,GAAG,KAAK,CAAC,qBAAqB,CAAC,OAAO,YAAY,CAAC,IAAI,CAAC,GAC1E,qBAAqB,GAAG;IACpB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;CAC5B,CAAC;AAkDN,KAAK,yBAAyB,GAAG,KAAK,CAAC,qBAAqB,CAAC,OAAO,YAAY,CAAC,YAAY,CAAC,GAC1F,qBAAqB,GAAG;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CACrC,CAAC;AAgEN,KAAK,WAAW,GAAG;IACf,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC;AA8BF,KAAK,uBAAuB,GAAG;IAC3B,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC,CAAC;AAsCF,KAAK,kBAAkB,GAAG,KAAK,CAAC,qBAAqB,CAAC,OAAO,YAAY,CAAC,KAAK,CAAC,GAAG;IAC/E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC;CAClD,CAAC;AAIF,KAAK,oBAAoB,GAAG,KAAK,CAAC,qBAAqB,CAAC,OAAO,YAAY,CAAC,KAAK,CAAC,GAAG;IACjF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC;CAClD,CAAC;AASF,eAAO,MAAM,QAAQ;;;;;;;mHAzMlB,iBAAiB;qIAwDjB,yBAAyB;mBAoIE,kBAAkB;+CAxCU,uBAAuB;sBA6ChD,oBAAoB;uBAInB,KAAK,CAAC,qBAAqB,CAAC,OAAO,YAAY,CAAC,SAAS,CAAC;CAW1F,CAAC"}

package/dist/components/dropdown/dropdown.js

@@ -0,0 +1,111 @@
+import { theme as e } from "../../design_system/theme.js";
+import { CheckboxPrimitive as t } from "../checkbox/checkbox.js";
+import { radioButtonStyle as n } from "../radio_button/radio_button.style.js";
+import { useDropdownContext as r } from "./dropdown.context.js";
+import { DROPDOWN_ELEMENT_CLASSES as i, StyledCheckboxIconWrapper as a, StyledCheckboxItem as o, StyledContentWrapper as s, StyledControls as c, StyledDescription as l, StyledIconWrapper as u, StyledItem as d, StyledItemRow as f, StyledItemTitle as p, StyledItemWrapper as m, StyledLabel as h, StyledSeparator as g, StyledTagWrapper as _ } from "./dropdown.styled.js";
+import { DropdownRoot as v } from "./dropdown_root.js";
+import y from "styled-components";
+import "react";
+import { Fragment as b, jsx as x, jsxs as S } from "react/jsx-runtime";
+import { clsx as C } from "clsx";
+import { CheckIcon as w } from "@apify/ui-icons";
+import * as T from "@radix-ui/react-radio-group";
+//#region src/components/dropdown/dropdown.tsx
+var E = ({ children: t, icon: n, trailingIcon: a, selected: o, description: c, onSelect: h, className: g, disabled: v, tags: y = [], ...b }) => {
+	let { handleSelectAndClose: T } = r();
+	return /* @__PURE__ */ x(m, { children: /* @__PURE__ */ x(d, {
+		onSelect: (e) => {
+			h && h(e), T(e);
+		},
+		disabled: v,
+		...b,
+		className: C(i.ITEM, g, o && "dropdown-item-selected"),
+		"data-test": v ? "dropdown-item-disabled" : "dropdown-item",
+		children: /* @__PURE__ */ S(f, { children: [
+			n && /* @__PURE__ */ x(u, { children: n }),
+			/* @__PURE__ */ S(s, { children: [/* @__PURE__ */ x(p, { children: t }), c && /* @__PURE__ */ x(l, { children: c })] }),
+			(a || o) && /* @__PURE__ */ S(u, { children: [a, !a && o && /* @__PURE__ */ x(w, {
+				size: "16",
+				color: e.color.neutral.text
+			})] }),
+			y.length > 0 && /* @__PURE__ */ x(_, {
+				onClick: (e) => e.stopPropagation(),
+				children: y
+			})
+		] })
+	}) });
+}, D = ({ checked: e, children: n, icon: i, trailingIcon: c, onCheckedChange: d, description: h, onSelect: g, disabled: _, className: v, ...y }) => {
+	let { handleSelectAndClose: b } = r();
+	return /* @__PURE__ */ x(m, { children: /* @__PURE__ */ x(o, {
+		checked: e,
+		onSelect: (e) => {
+			_ || (g && g(e), b(e));
+		},
+		disabled: _,
+		...y,
+		onCheckedChange: _ ? void 0 : d,
+		className: C(v),
+		"data-test": _ ? "dropdown-item-disabled" : "dropdown-item",
+		children: /* @__PURE__ */ S(f, { children: [
+			/* @__PURE__ */ x(a, { children: /* @__PURE__ */ x(t, {
+				value: !!e,
+				setValue: _ ? () => void 0 : d || (() => void 0),
+				readOnly: _ || !d
+			}) }),
+			i && /* @__PURE__ */ x(u, { children: i }),
+			/* @__PURE__ */ S(s, { children: [/* @__PURE__ */ x(p, { children: n }), h && /* @__PURE__ */ x(l, { children: h })] }),
+			c && /* @__PURE__ */ x(u, { children: c })
+		] })
+	}) });
+}, O = y(T.Root)`
+    display: flex;
+    flex-direction: column;
+`, k = y(T.Item)`
+    ${n}
+    flex-shrink: 0;
+`, A = ({ label: e, description: t }) => /* @__PURE__ */ S(b, { children: [/* @__PURE__ */ x(p, { children: e }), t && /* @__PURE__ */ x(l, {
+	title: t,
+	children: t
+})] }), j = ({ option: e, isSelected: t, onSelect: n, children: r }) => /* @__PURE__ */ x("div", {
+	className: C(i.RADIO_OPTION, e.disabled && i.RADIO_OPTION_DISABLED, t && i.RADIO_OPTION_SELECTED),
+	onClick: n,
+	"aria-disabled": e.disabled,
+	children: r
+}), M = Object.assign(v, {
+	Item: E,
+	CheckboxItem: D,
+	Label: (e) => /* @__PURE__ */ x(h, { ...e }),
+	RadioGroup: ({ options: e, value: t, setValue: n }) => {
+		let { handleSelectAndClose: a } = r(), o = (e) => {
+			n(e), a();
+		};
+		return /* @__PURE__ */ x(m, { children: /* @__PURE__ */ x(O, {
+			value: t,
+			onValueChange: o,
+			children: e.map((e) => /* @__PURE__ */ S(j, {
+				option: e,
+				isSelected: e.value === t,
+				onSelect: e.disabled ? void 0 : () => o(e.value),
+				children: [/* @__PURE__ */ x("span", {
+					className: i.RADIO_OPTION_ICON,
+					children: /* @__PURE__ */ x(k, {
+						value: e.value,
+						id: e.value,
+						disabled: e.disabled,
+						onClick: (e) => e.stopPropagation()
+					})
+				}), /* @__PURE__ */ x("span", {
+					className: i.RADIO_OPTION_CONTENT,
+					children: /* @__PURE__ */ x(A, {
+						label: e.label,
+						description: e.description
+					})
+				})]
+			}, e.value))
+		}) });
+	},
+	Controls: (e) => /* @__PURE__ */ x(c, { children: e.children }),
+	Separator: (e) => /* @__PURE__ */ x(g, { ...e })
+});
+//#endregion
+export { M as Dropdown };

package/dist/components/dropdown/dropdown.styled.d.ts

@@ -0,0 +1,35 @@
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+export declare const DROPDOWN_ELEMENT_CLASSES: {
+    WRAPPER: string;
+    ITEM: string;
+    TRIGGER_OVERLAY: string;
+    RADIO_OPTION: string;
+    RADIO_OPTION_DISABLED: string;
+    RADIO_OPTION_SELECTED: string;
+    RADIO_OPTION_ICON: string;
+    RADIO_OPTION_CONTENT: string;
+};
+type StyledContentProps = {
+    $width?: string;
+    $height?: string;
+    $zIndex?: number;
+};
+export declare const StyledContent: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('styled-components/dist/types').Substitute<import('styled-components/dist/types').Substitute<DropdownMenu.DropdownMenuContentProps & import('react').RefAttributes<HTMLDivElement>, DropdownMenu.DropdownMenuContentProps & import('react').RefAttributes<HTMLDivElement>>, DropdownMenu.DropdownMenuContentProps & {
+    'data-test'?: string;
+}>, StyledContentProps>> & string & Omit<import('react').ForwardRefExoticComponent<DropdownMenu.DropdownMenuContentProps & import('react').RefAttributes<HTMLDivElement>>, keyof import('react').Component<any, {}, any>>;
+export declare const ScrollableContent: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledItemRow: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledItemWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledItem: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<DropdownMenu.DropdownMenuItemProps & import('react').RefAttributes<HTMLDivElement>, never>> & string & Omit<import('react').ForwardRefExoticComponent<DropdownMenu.DropdownMenuItemProps & import('react').RefAttributes<HTMLDivElement>>, keyof import('react').Component<any, {}, any>>;
+export declare const StyledCheckboxItem: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<DropdownMenu.DropdownMenuCheckboxItemProps & import('react').RefAttributes<HTMLDivElement>, never>> & string & Omit<import('react').ForwardRefExoticComponent<DropdownMenu.DropdownMenuCheckboxItemProps & import('react').RefAttributes<HTMLDivElement>>, keyof import('react').Component<any, {}, any>>;
+export declare const StyledLabel: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<DropdownMenu.DropdownMenuLabelProps & import('react').RefAttributes<HTMLDivElement>, never>> & string & Omit<import('react').ForwardRefExoticComponent<DropdownMenu.DropdownMenuLabelProps & import('react').RefAttributes<HTMLDivElement>>, keyof import('react').Component<any, {}, any>>;
+export declare const StyledDescription: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledItemTitle: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const StyledIconWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const StyledCheckboxIconWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>, never>> & string;
+export declare const StyledContentWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledTagWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledControls: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledSeparator: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<DropdownMenu.DropdownMenuSeparatorProps & import('react').RefAttributes<HTMLDivElement>, never>> & string & Omit<import('react').ForwardRefExoticComponent<DropdownMenu.DropdownMenuSeparatorProps & import('react').RefAttributes<HTMLDivElement>>, keyof import('react').Component<any, {}, any>>;
+export {};
+//# sourceMappingURL=dropdown.styled.d.ts.map

package/dist/components/dropdown/dropdown.styled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.styled.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.styled.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,YAAY,MAAM,+BAA+B,CAAC;AAK9D,eAAO,MAAM,wBAAwB;;;;;;;;;CASpC,CAAC;AAEF,KAAK,kBAAkB,GAAG;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,aAAa;kBACkC,MAAM;yNAiBjE,CAAC;AAEF,eAAO,MAAM,iBAAiB,6NA8D7B,CAAC;AAEF,eAAO,MAAM,aAAa,6NAOzB,CAAC;AAEF,eAAO,MAAM,iBAAiB,6NAE7B,CAAC;AAEF,eAAO,MAAM,UAAU,mYA8BtB,CAAC;AAEF,eAAO,MAAM,kBAAkB,mZAmC9B,CAAC;AAEF,eAAO,MAAM,WAAW,qYAQvB,CAAC;AAEF,eAAO,MAAM,iBAAiB,6NAU7B,CAAC;AAEF,eAAO,MAAM,eAAe,+NAU3B,CAAC;AAEF,eAAO,MAAM,iBAAiB,+NAQ7B,CAAC;AAEF,eAAO,MAAM,yBAAyB,4QAErC,CAAC;AAEF,eAAO,MAAM,oBAAoB,6NAQhC,CAAC;AAEF,eAAO,MAAM,gBAAgB,6NAG5B,CAAC;AAEF,eAAO,MAAM,cAAc,6NAM1B,CAAC;AAEF,eAAO,MAAM,eAAe,6YAK3B,CAAC"}

package/dist/components/dropdown/dropdown.styled.js

@@ -0,0 +1,228 @@
+import { theme as e } from "../../design_system/theme.js";
+import t from "styled-components";
+import * as n from "@radix-ui/react-dropdown-menu";
+//#region src/components/dropdown/dropdown.styled.ts
+var r = {
+	WRAPPER: "dropdown-wrapper",
+	ITEM: "dropdown-item",
+	TRIGGER_OVERLAY: "dropdown-trigger-overlay",
+	RADIO_OPTION: "dropdown-radio-option",
+	RADIO_OPTION_DISABLED: "dropdown-radio-option-disabled",
+	RADIO_OPTION_SELECTED: "dropdown-radio-option-selected",
+	RADIO_OPTION_ICON: "dropdown-radio-option-icon",
+	RADIO_OPTION_CONTENT: "dropdown-radio-option-content"
+}, i = t(n.Content).attrs((e) => ({
+	"data-test": "dropdown-wrapper",
+	className: [r.WRAPPER, e.className].filter(Boolean).join(" ")
+}))`
+    background: ${e.color.neutral.background};
+    border: 1px solid ${e.color.neutral.separatorSubtle};
+    border-radius: ${e.radius.radius12};
+    padding: ${e.space.space6} 0;
+    min-width: 80px;
+    width: ${(e) => e.$width || "auto"};
+    height: ${(e) => e.$height || "auto"};
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    z-index: ${(e) => e.$zIndex ?? 100} !important;
+    position: relative;
+`, a = t.div`
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    gap: ${e.space.space4};
+    display: flex;
+    flex-direction: column;
+    scrollbar-width: thin;
+    scrollbar-color: ${e.color.neutral.separatorSubtle} transparent;
+
+    .${r.TRIGGER_OVERLAY} {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        cursor: pointer;
+        z-index: 1;
+        pointer-events: none;
+    }
+    .${r.RADIO_OPTION} {
+        cursor: pointer;
+        width: 100%;
+        display: flex;
+        align-items: flex-start;
+        padding: ${e.space.space4} ${e.space.space8};
+        border-radius: ${e.radius.radius4};
+        gap: ${e.space.space8};
+        min-height: 28px;
+
+        &:hover {
+            background: ${e.color.neutral.hover};
+        }
+    }
+    .${r.RADIO_OPTION_DISABLED} {
+        cursor: not-allowed;
+        color: ${e.color.neutral.textDisabled};
+
+        * {
+            color: ${e.color.neutral.textDisabled} !important;
+        }
+    }
+    .${r.RADIO_OPTION_SELECTED} {
+        background: none;
+        color: ${e.color.neutral.text};
+    }
+    .${r.RADIO_OPTION_ICON} {
+        display: flex;
+        align-items: flex-start;
+        justify-content: center;
+        padding: ${e.space.space2} 0;
+        min-width: 16px;
+        min-height: 20px;
+        margin-right: ${e.space.space4};
+    }
+    .${r.RADIO_OPTION_CONTENT} {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        min-width: 0;
+        max-width: 100%;
+    }
+`, o = t.div`
+    display: flex;
+    align-items: flex-start;
+    width: 100%;
+    gap: ${e.space.space4};
+    min-height: 28px;
+    padding: ${e.space.space4} 0;
+`, s = t.div`
+    margin: 0 ${e.space.space6};
+`, c = t(n.Item)`
+    min-width: 100%;
+    display: block;
+    padding: 0 ${e.space.space8};
+    color: ${e.color.neutral.text};
+    border-radius: ${e.radius.radius6};
+    cursor: pointer;
+    background: none;
+    border: none;
+    transition: background 0.15s;
+    outline: none;
+    box-shadow: none;
+
+    &[data-highlighted],
+    &.dropdown-item-selected {
+        background: ${e.color.neutral.hover};
+    }
+
+    &[data-disabled] {
+        color: ${e.color.neutral.textDisabled};
+        cursor: not-allowed;
+    }
+    &.no-hover {
+        cursor: default;
+        &[data-highlighted],
+        &.dropdown-item-selected,
+        &:hover {
+            background: none !important;
+        }
+    }
+`, l = t(n.CheckboxItem)`
+    min-width: 100%;
+    display: block;
+    padding: 0 ${e.space.space8};
+    color: ${e.color.neutral.text};
+    border-radius: ${e.radius.radius4};
+    cursor: pointer;
+    background: none;
+    border: none;
+    transition: background 0.15s;
+    outline: none;
+    box-shadow: none;
+
+    &[data-highlighted],
+    &:hover {
+        background: ${e.color.neutral.hover};
+    }
+
+    &[data-disabled] {
+        color: ${e.color.neutral.textDisabled};
+        cursor: not-allowed;
+    }
+
+    &[data-state='checked'] {
+        background: none;
+    }
+
+    &.no-hover {
+        cursor: default;
+
+        &[data-highlighted],
+        &:hover {
+            background: none !important;
+        }
+    }
+`, u = t(n.Label)`
+    padding: ${e.space.space8};
+    padding-bottom: ${e.space.space2};
+    color: ${e.color.neutral.textSubtle};
+    ${e.typography.shared.desktop.bodyS}
+    display: flex;
+    align-items: center;
+    gap: ${e.space.space4};
+`, d = t.div`
+    color: ${e.color.neutral.textSubtle};
+    ${e.typography.shared.desktop.bodyS}
+    display: block;
+    width: 100%;
+    margin-top: ${e.space.space2};
+
+    [data-disabled] & {
+        color: ${e.color.neutral.textDisabled};
+    }
+`, f = t.span`
+    ${e.typography.shared.desktop.bodyM}
+    color: ${e.color.neutral.textMuted};
+    display: block;
+    width: 100%;
+    margin-right: ${e.space.space32};
+
+    [data-disabled] & {
+        color: ${e.color.neutral.textDisabled};
+    }
+`, p = t.span`
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    flex-shrink: 0;
+    width: 20px;
+    padding-top: ${e.space.space2};
+    color: ${e.color.neutral.textMuted};
+`, m = t(p)`
+    margin-right: ${e.space.space4};
+`, h = t.div`
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    min-width: 0;
+    width: max-content;
+    overflow: hidden;
+`, g = t.div`
+    display: flex;
+    gap: ${e.space.space4};
+`, _ = t.div`
+    padding-top: ${e.space.space6};
+    border-top: 1px solid ${e.color.neutral.separatorSubtle};
+    gap: ${e.space.space4};
+    display: flex;
+    flex-direction: column;
+`, v = t(n.Separator)`
+    height: 1px;
+    min-height: 1px;
+    margin: ${e.space.space4} ${e.space.space8};
+    background-color: ${e.color.neutral.separatorSubtle};
+`;
+//#endregion
+export { r as DROPDOWN_ELEMENT_CLASSES, a as ScrollableContent, m as StyledCheckboxIconWrapper, l as StyledCheckboxItem, i as StyledContent, h as StyledContentWrapper, _ as StyledControls, d as StyledDescription, p as StyledIconWrapper, c as StyledItem, o as StyledItemRow, f as StyledItemTitle, s as StyledItemWrapper, u as StyledLabel, v as StyledSeparator, g as StyledTagWrapper };

package/dist/components/dropdown/dropdown.types.d.ts

@@ -0,0 +1,17 @@
+import { PopperContentProps } from '@radix-ui/react-popper';
+import type * as React from 'react';
+export type BaseDropdownItemProps = {
+    children?: React.ReactNode;
+    icon?: React.ReactNode;
+    description?: React.ReactNode;
+    disabled?: boolean;
+    className?: string;
+};
+export type BaseDropdownContentProps = {
+    width?: string;
+    height?: string;
+    closeOnSelect?: boolean;
+    zIndex?: number;
+    contentProps?: PopperContentProps;
+};
+//# sourceMappingURL=dropdown.types.d.ts.map

package/dist/components/dropdown/dropdown.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.types.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AACjE,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,MAAM,MAAM,qBAAqB,GAAG;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,kBAAkB,CAAC;CACrC,CAAC"}

package/dist/components/dropdown/dropdown_button.d.ts

@@ -0,0 +1,10 @@
+import { Button } from '../button/button';
+import { BaseDropdownContentProps } from './dropdown.types';
+type DropdownButtonProps = BaseDropdownContentProps & {
+    buttonProps?: Partial<React.ComponentPropsWithoutRef<typeof Button>>;
+    buttonLabel: React.ReactNode;
+    children: React.ReactNode;
+};
+export declare const DropdownButton: ({ buttonProps, buttonLabel, children, closeOnSelect, contentProps, width, height, zIndex, }: DropdownButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=dropdown_button.d.ts.map

package/dist/components/dropdown/dropdown_button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown_button.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown_button.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,kBAAkB,CAAC;AAGjE,KAAK,mBAAmB,GAAG,wBAAwB,GAAG;IAClD,WAAW,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,MAAM,CAAC,CAAC,CAAC;IACrE,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,6FAS5B,mBAAmB,4CAqBrB,CAAC"}

package/dist/components/dropdown/dropdown_button.js

@@ -0,0 +1,34 @@
+import { Button as e } from "../button/button.js";
+import { ScrollableContent as t, StyledContent as n } from "./dropdown.styled.js";
+import { DropdownRoot as r } from "./dropdown_root.js";
+import { useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import * as s from "@radix-ui/react-dropdown-menu";
+//#region src/components/dropdown/dropdown_button.tsx
+var c = ({ buttonProps: c, buttonLabel: l, children: u, closeOnSelect: d = !0, contentProps: f, width: p, height: m, zIndex: h }) => {
+	let [g, _] = i(!1), v = {
+		onClick: () => void 0,
+		trackingId: "dropdown-button",
+		...c
+	};
+	return /* @__PURE__ */ o(r, {
+		isOpen: g,
+		onIsOpenChange: _,
+		closeOnSelect: d,
+		children: [/* @__PURE__ */ a(s.Trigger, {
+			asChild: !0,
+			children: /* @__PURE__ */ a(e, {
+				...v,
+				children: l
+			})
+		}), /* @__PURE__ */ a(s.Portal, { children: /* @__PURE__ */ a(n, {
+			$width: p,
+			$height: m,
+			$zIndex: h,
+			...f,
+			children: /* @__PURE__ */ a(t, { children: u })
+		}) })]
+	});
+};
+//#endregion
+export { c as DropdownButton };

package/dist/components/dropdown/dropdown_root.d.ts

@@ -0,0 +1,11 @@
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+type DropdownRootProps = React.ComponentPropsWithRef<typeof DropdownMenu.Root> & {
+    closeOnSelect?: boolean;
+    children: React.ReactNode;
+    onIsOpenChange?: (isOpen: boolean) => void;
+    isOpen?: boolean;
+    contentProps?: React.ComponentPropsWithRef<typeof DropdownMenu.Content>;
+};
+export declare const DropdownRoot: ({ closeOnSelect, children, isOpen, onIsOpenChange, ...props }: DropdownRootProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=dropdown_root.d.ts.map

package/dist/components/dropdown/dropdown_root.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown_root.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown_root.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,YAAY,MAAM,+BAA+B,CAAC;AAK9D,KAAK,iBAAiB,GAAG,KAAK,CAAC,qBAAqB,CAAC,OAAO,YAAY,CAAC,IAAI,CAAC,GAAG;IAC7E,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,KAAK,CAAC,qBAAqB,CAAC,OAAO,YAAY,CAAC,OAAO,CAAC,CAAC;CAC3E,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,+DAM1B,iBAAiB,4CAqBnB,CAAC"}

package/dist/components/dropdown/dropdown_root.js

@@ -0,0 +1,22 @@
+import { DropdownContext as e } from "./dropdown.context.js";
+import { useCallback as t, useState as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+import * as i from "@radix-ui/react-dropdown-menu";
+//#region src/components/dropdown/dropdown_root.tsx
+var a = ({ closeOnSelect: a = !0, children: o, isOpen: s, onIsOpenChange: c, ...l }) => {
+	let [u, d] = n(!1), f = s !== void 0 && c !== void 0, p = f ? s : u, m = f ? c : d, h = t(() => m(!1), [m]), g = t((e) => {
+		a && h(), e && e.preventDefault();
+	}, [a, h]);
+	return /* @__PURE__ */ r(e.Provider, {
+		value: { handleSelectAndClose: g },
+		children: /* @__PURE__ */ r(i.Root, {
+			open: p,
+			onOpenChange: m,
+			modal: !1,
+			...l,
+			children: o
+		})
+	});
+};
+//#endregion
+export { a as DropdownRoot };

package/dist/components/dropdown/dropdown_shell.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode, RefObject } from 'react';
+import { BaseDropdownContentProps } from './dropdown.types';
+export type DropdownShellProps = BaseDropdownContentProps & {
+    children: ReactNode;
+    isOpen: boolean;
+    onIsOpenChange: (open: boolean) => void;
+    triggerRef: RefObject<HTMLElement | null>;
+    strategy?: 'absolute' | 'fixed';
+};
+/**
+ * DropdownShell positions the dropdown relative to a custom trigger element via Floating UI.
+ * Use it when you have a custom trigger (not a Button) and need explicit ref-based positioning.
+ */
+export declare const DropdownShell: ({ isOpen, onIsOpenChange, children, closeOnSelect, contentProps, width, height, triggerRef, strategy, zIndex, }: DropdownShellProps) => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=dropdown_shell.d.ts.map

package/dist/components/dropdown/dropdown_shell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown_shell.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown_shell.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAgC,MAAM,OAAO,CAAC;AAKrF,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,kBAAkB,CAAC;AAEjE,MAAM,MAAM,kBAAkB,GAAG,wBAAwB,GAAG;IACxD,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,cAAc,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,UAAU,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC1C,QAAQ,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;CACnC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,aAAa,GAAI,iHAW3B,kBAAkB,mDAkGpB,CAAC"}