@ssa-ui-kit/core 3.0.0 → 3.1.0

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Interpolation, Theme } from '@emotion/react';
 import { DropdownOptionProps } from '../DropdownOptions';
 import { CommonProps } from '../../types/emotion';
 import { IconProps } from '../Icon/types';
@@ -78,7 +79,29 @@ export interface DropdownProps<P extends DropdownOptionProps> extends CommonProp
         /** Props for the wrapper div element */
         base?: React.HTMLAttributes<HTMLDivElement>;
         /** Props for the toggle button element (excluding controlled props) */
-        toggleButton?: Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, ControlledButtonProps>;
+        toggleButton?: Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, ControlledButtonProps> & {
+            /**
+             * Emotion css prop for custom styles on the toggle button.
+             * Merged on top of the component's built-in styles, so any rule here
+             * overrides the default appearance.
+             *
+             * @example
+             * ```tsx
+             * import { css } from '@emotion/react';
+             *
+             * <Dropdown
+             *   dropdownProps={{
+             *     toggleButton: {
+             *       css: css`background: hotpink; border: none;`,
+             *     },
+             *   }}
+             * >
+             *   ...
+             * </Dropdown>
+             * ```
+             */
+            css?: Interpolation<Theme>;
+        };
         /** Props for the arrow icon SVG element */
         toggleButtonArrow?: Omit<IconProps, 'name' | 'size'>;
     };

package/dist/components/DropdownOption/DropdownOption.d.ts

@@ -10,6 +10,8 @@ interface DropdownItemProps extends CommonProps {
     value?: string | number | boolean;
     label?: string | number;
     children?: React.ReactNode;
+    /** Avatar or icon to display before the option content (e.g. <Avatar size={20} image={url} />) */
+    avatar?: React.ReactNode;
 }
 declare const DropdownOption: import("@emotion/styled").StyledComponent<{
     theme?: Theme;

package/dist/components/DropdownToggle/DropdownToggle.d.ts

@@ -1,6 +1,7 @@
+import { Theme } from '@emotion/react';
 import { DropdownToggleProps } from './types';
 export declare const DropdownToggleBase: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
+    theme?: Theme;
     as?: React.ElementType;
 } & Pick<DropdownToggleProps, "colors" | "disabled" | "isOpen" | "isMultiple" | "selectedCount">, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
 declare const DropdownToggle: ({ onClick, onFocus, isOpen, isMultiple, selectedCount, disabled, children, ariaLabelledby, ariaControls, colors, className, ...restProps }: DropdownToggleProps) => import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -1,10 +1,12 @@
 import React from 'react';
-import { Theme } from '@emotion/react';
+import { Interpolation, Theme } from '@emotion/react';
 import { CommonProps } from '../../types/emotion';
 import { ControlledButtonProps } from '../Dropdown/types';
 export interface DropdownToggleProps extends CommonProps, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, ControlledButtonProps> {
+    /** Emotion css prop forwarded to the underlying styled button */
+    css?: Interpolation<Theme>;
     onClick: (e: React.MouseEvent<HTMLElement>) => void;
-    onFocus: (e: React.FocusEvent<HTMLButtonElement, Element>) => void;
+    onFocus?: (e: React.FocusEvent<HTMLButtonElement, Element>) => void;
     isOpen: boolean;
     isMultiple?: boolean;
     disabled?: boolean;
@@ -17,5 +19,5 @@ export interface DropdownToggleProps extends CommonProps, Omit<React.ButtonHTMLA
 }
 export interface MultipleStylesProps {
     theme: Theme;
-    selectedCount?: number;
+    isOpen?: boolean;
 }

package/dist/components/Icon/icons/Assessment.d.ts

@@ -1,3 +1,3 @@
 import { SVGProps } from '../types';
 export declare const Assessment: ({ fill, size, tooltip, ...props }: SVGProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export declare const ICON_NAME = "assessment";
+export declare const ICON_NAME = "clipboard-assessment";

package/dist/components/Icon/icons/Award.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from '../types';
+export declare const Award: ({ fill, size, tooltip, ...props }: SVGProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ICON_NAME = "award";

package/dist/components/Icon/icons/Bench.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from '../types';
+export declare const Bench: ({ fill, size, tooltip, ...props }: SVGProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ICON_NAME = "bench";

package/dist/components/Icon/icons/Briefcase.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from '../types';
+export declare const Briefcase: ({ fill, size, tooltip, ...props }: SVGProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ICON_NAME = "briefcase";

package/dist/components/Icon/icons/Building.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from '../types';
+export declare const Building: ({ fill, size, tooltip, ...props }: SVGProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ICON_NAME = "building";

package/dist/components/Icon/icons/CalendarSchedule.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from '../types';
+export declare const CalendarSchedule: ({ fill, size, tooltip, ...props }: SVGProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ICON_NAME = "calendar-schedule";

package/dist/components/Icon/icons/Camera.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from '../types';
+export declare const Camera: ({ fill, size, tooltip, ...props }: SVGProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ICON_NAME = "camera";

package/dist/components/Icon/icons/CardText.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from '../types';
+export declare const CardText: ({ fill, size, tooltip, ...props }: SVGProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ICON_NAME = "card-text";

package/dist/components/Icon/icons/Case.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from '../types';
+export declare const Case: ({ fill, size, tooltip, ...props }: SVGProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ICON_NAME = "case";

package/dist/components/Icon/icons/Comments.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from '../types';
+export declare const Comments: ({ fill, size, tooltip, ...props }: SVGProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ICON_NAME = "comments";

package/dist/components/Icon/icons/Compensation.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from '../types';
+export declare const Compensation: ({ fill, size, tooltip, ...props }: SVGProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ICON_NAME = "compensation";

package/dist/components/Icon/icons/Contacts.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from '../types';
+export declare const Contacts: ({ fill, size, tooltip, ...props }: SVGProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ICON_NAME = "contacts";

package/dist/components/Icon/icons/CopyLink.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from '../types';
+export declare const CopyLink: ({ fill, size, tooltip, ...props }: SVGProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ICON_NAME = "copy-link";

package/dist/components/Icon/icons/Delete.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from '../types';
+export declare const Delete: ({ fill, size, tooltip, ...props }: SVGProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ICON_NAME = "delete";

package/dist/components/Icon/icons/DiamondRing.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from '../types';
+export declare const DiamondRing: ({ fill, size, tooltip, ...props }: SVGProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ICON_NAME = "diamond-ring";

package/dist/components/Icon/icons/Document.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from '../types';
+export declare const Document: ({ fill, size, tooltip, ...props }: SVGProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ICON_NAME = "document";

package/dist/components/Icon/icons/Documents.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from '../types';
+export declare const Documents: ({ fill, size, tooltip, ...props }: SVGProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ICON_NAME = "documents";

package/dist/components/Icon/icons/Education.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from '../types';
+export declare const Education: ({ fill, size, tooltip, ...props }: SVGProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ICON_NAME = "education";

package/dist/components/Icon/icons/EmployeeProfile.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from '../types';
+export declare const EmployeeProfile: ({ fill, size, tooltip, ...props }: SVGProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ICON_NAME = "employee-profile";

package/dist/components/Icon/icons/Export.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from '../types';
+export declare const Export: ({ fill, size, tooltip, ...props }: SVGProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ICON_NAME = "export";

package/dist/components/Icon/icons/FollowLink.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from '../types';
+export declare const FollowLink: ({ fill, size, tooltip, ...props }: SVGProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ICON_NAME = "follow-link";

package/dist/components/Icon/icons/Form.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from '../types';
+export declare const Form: ({ fill, size, tooltip, ...props }: SVGProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ICON_NAME = "clipboard-form";

package/dist/components/Icon/icons/Gender.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from '../types';
+export declare const Gender: ({ fill, size, tooltip, ...props }: SVGProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ICON_NAME = "gender";

package/dist/components/Icon/icons/Gift.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from '../types';
+export declare const Gift: ({ fill, size, tooltip, ...props }: SVGProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ICON_NAME = "gift";

package/dist/components/Icon/icons/Inventory.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from '../types';
+export declare const Inventory: ({ fill, size, tooltip, ...props }: SVGProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ICON_NAME = "inventory";

package/dist/components/Icon/icons/Link.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from '../types';
+export declare const Link: ({ fill, size, tooltip, ...props }: SVGProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ICON_NAME = "link";

package/dist/components/Icon/icons/OfficeChair.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from '../types';
+export declare const OfficeChair: ({ fill, size, tooltip, ...props }: SVGProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ICON_NAME = "office-chair";

package/dist/components/Icon/icons/OpenBook.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from '../types';
+export declare const OpenBook: ({ fill, size, tooltip, ...props }: SVGProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ICON_NAME = "open-book";

package/dist/components/Icon/icons/Report.d.ts

@@ -1,3 +1,3 @@
 import { SVGProps } from '../types';
 export declare const Report: ({ fill, size, tooltip, ...props }: SVGProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export declare const ICON_NAME = "report";
+export declare const ICON_NAME = "clipboard-report";

package/dist/components/Icon/icons/Results.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from '../types';
+export declare const Results: ({ fill, size, tooltip, ...props }: SVGProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ICON_NAME = "clipboard-result";

package/dist/components/Icon/icons/Signature.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from '../types';
+export declare const Signature: ({ fill, size, tooltip, ...props }: SVGProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ICON_NAME = "signature";

package/dist/components/Icon/icons/Summery.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from '../types';
+export declare const Summery: ({ fill, size, tooltip, ...props }: SVGProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ICON_NAME = "clipboard-summary";

package/dist/components/Icon/icons/Team.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from '../types';
+export declare const Team: ({ fill, size, tooltip, ...props }: SVGProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ICON_NAME = "team";

package/dist/components/Icon/icons/TechnicalReview.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from '../types';
+export declare const TechnicalReview: ({ fill, size, tooltip, ...props }: SVGProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ICON_NAME = "clipboard-star";

package/dist/components/Icon/icons/TennisBall.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from '../types';
+export declare const TennisBall: ({ fill, size, tooltip, ...props }: SVGProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ICON_NAME = "tennis-ball";

package/dist/components/Icon/icons/Timeline.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from '../types';
+export declare const Timeline: ({ fill, size, tooltip, ...props }: SVGProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ICON_NAME = "timeline";

package/dist/components/Icon/icons/UnionCircle.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from '../types';
+export declare const UnionCircle: ({ fill, size, tooltip, ...props }: SVGProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ICON_NAME = "union-circle";

package/dist/components/Icon/icons/Url.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from '../types';
+export declare const Url: ({ fill, size, tooltip, ...props }: SVGProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ICON_NAME = "url";

package/dist/components/Icon/icons/all.d.ts

@@ -3,15 +3,21 @@ export * as ArrowDown from './ArrowDown';
 export * as ArrowUp from './ArrowUp';
 export * as Assessment from './Assessment';
 export * as Attention from './Attention';
+export * as Award from './Award';
 export * as BanUser from './BanUser';
+export * as Bench from './Bench';
 export * as Bin from './Bin';
 export * as Calendar from './Calendar';
+export * as CalendarSchedule from './CalendarSchedule';
 export * as CarrotDown from './CarrotDown';
 export * as CarrotLeft from './CarrotLeft';
 export * as CarrotRight from './CarrotRight';
 export * as CarrotUp from './CarrotUp';
+export * as CardText from './CardText';
+export * as Case from './Case';
 export * as Certification from './Certification';
 export * as CertificationExpiring from './CertificationExpiring';
+export * as Camera from './Camera';
 export * as Change from './Change';
 export * as Chart from './Chart';
 export * as Check from './Check';
@@ -22,25 +28,43 @@ export * as Circle from './Circle';
 export * as Circular from './Circular';
 export * as Clock from './Clock';
 export * as Cogwheel from './Cogwheel';
-export * as Company from './Company';
+export * as Comments from './Comments';
+export * as Briefcase from './Briefcase';
+export * as Building from './Building';
+export * as Compensation from './Compensation';
 export * as ConfirmEmail from './ConfirmEmail';
+export * as Contacts from './Contacts';
 export * as Copy from './Copy';
+export * as CopyLink from './CopyLink';
 export * as Cross from './Cross';
+export * as Delete from './Delete';
+export * as Document from './Document';
+export * as DiamondRing from './DiamondRing';
 export * as Diet from './Diet';
+export * as Documents from './Documents';
 export * as Edit from './Edit';
+export * as Education from './Education';
 export * as Email from './Email';
 export * as Employee from './Employee';
+export * as EmployeeProfile from './EmployeeProfile';
 export * as EmployeeTerminated from './EmployeeTerminated';
 export * as ExcelDownload from './ExcelDownload';
+export * as Export from './Export';
 export * as Filter from './Filter';
 export * as FilterFunnel from './FilterFunnel';
+export * as FollowLink from './FollowLink';
 export * as FTE from './FTE';
+export * as Form from './Form';
 export * as Geography from './Geography';
+export * as Gender from './Gender';
+export * as Gift from './Gift';
 export * as Home from './Home';
 export * as Import from './Import';
 export * as Information from './Information';
+export * as Inventory from './Inventory';
 export * as Invisible from './Invisible';
 export * as Language from './Language';
+export * as Link from './Link';
 export * as Lock from './Lock';
 export * as LogIn from './LogIn';
 export * as LogOut from './LogOut';
@@ -53,6 +77,8 @@ export * as MinusCircleInverted from './MinusCircleInverted';
 export * as More from './More';
 export * as MoreVertical from './MoreVertical';
 export * as Notification from './Notification';
+export * as OfficeChair from './OfficeChair';
+export * as OpenBook from './OpenBook';
 export * as Pages from './Pages';
 export * as Party from './Party';
 export * as Plus from './Plus';
@@ -62,20 +88,29 @@ export * as ProbationPeriod from './ProbationPeriod';
 export * as ProfilesChanges from './ProfilesChanges';
 export * as RadioOn from './RadioOn';
 export * as Report from './Report';
+export * as Results from './Results';
 export * as Robot from './Robot';
 export * as Roles from './Roles';
 export * as Search from './Search';
 export * as Seniority from './Seniority';
 export * as Settings from './Settings';
+export * as Signature from './Signature';
 export * as Sleep from './Sleep';
 export * as StaffGrowthCoefficient from './StaffGrowthCoefficient';
 export * as StaffTurnoverCoefficient from './StaffTurnoverCoefficient';
 export * as Stats from './Stats';
+export * as Summery from './Summery';
+export * as Team from './Team';
+export * as TechnicalReview from './TechnicalReview';
 export * as TimeTracking from './TimeTracking';
+export * as Timeline from './Timeline';
+export * as TennisBall from './TennisBall';
 export * as Trainings from './Trainings';
 export * as UnArchive from './UnArchive';
 export * as Union from './Union';
+export * as UnionCircle from './UnionCircle';
 export * as Unlock from './Unlock';
+export * as Url from './Url';
 export * as User from './User';
 export * as Visible from './Visible';
 export * as Warning from './Warning';

package/dist/components/Icon/icons/iconsList.d.ts

@@ -1 +1 @@
-export declare const iconsList: ("visible" | "warning" | "archive" | "search" | "arrow-down" | "arrow-up" | "assessment" | "attention" | "ban-user" | "bin" | "calendar" | "carrot-down" | "carrot-left" | "carrot-right" | "carrot-up" | "certification" | "certification-expiring" | "change" | "chart" | "check" | "check-circle" | "check-circle-inverted" | "children" | "circle" | "circular" | "clock" | "cogwheel" | "company" | "confirm-email" | "copy" | "cross" | "diet" | "edit" | "email" | "employee" | "employee-terminated" | "excel-download" | "filter" | "filter-funnel" | "fte" | "geography" | "home" | "import" | "information" | "invisible" | "language" | "lock" | "log-in" | "log-out" | "maximize" | "measurements" | "message" | "minus" | "minus-circle" | "minus-circle-inverted" | "more" | "more-vertical" | "notification" | "pages" | "party" | "plus" | "plus-circle" | "plus-circle-inverted" | "probation-period" | "profiles-changes" | "radio-on" | "report" | "robot" | "roles" | "seniority" | "settings" | "sleep" | "staff-growth-coefficient" | "staff-turnover-coefficient" | "stats" | "time-tracking" | "trainings" | "unarchive" | "union" | "unlock" | "user")[];
+export declare const iconsList: ("visible" | "warning" | "archive" | "document" | "link" | "search" | "arrow-down" | "arrow-up" | "clipboard-assessment" | "attention" | "award" | "ban-user" | "bench" | "bin" | "calendar" | "calendar-schedule" | "carrot-down" | "carrot-left" | "carrot-right" | "carrot-up" | "card-text" | "case" | "certification" | "certification-expiring" | "camera" | "change" | "chart" | "check" | "check-circle" | "check-circle-inverted" | "children" | "circle" | "circular" | "clock" | "cogwheel" | "comments" | "briefcase" | "building" | "compensation" | "confirm-email" | "contacts" | "copy" | "copy-link" | "cross" | "delete" | "diamond-ring" | "diet" | "documents" | "edit" | "education" | "email" | "employee" | "employee-profile" | "employee-terminated" | "excel-download" | "export" | "filter" | "filter-funnel" | "follow-link" | "fte" | "clipboard-form" | "geography" | "gender" | "gift" | "home" | "import" | "information" | "inventory" | "invisible" | "language" | "lock" | "log-in" | "log-out" | "maximize" | "measurements" | "message" | "minus" | "minus-circle" | "minus-circle-inverted" | "more" | "more-vertical" | "notification" | "office-chair" | "open-book" | "pages" | "party" | "plus" | "plus-circle" | "plus-circle-inverted" | "probation-period" | "profiles-changes" | "radio-on" | "clipboard-report" | "clipboard-result" | "robot" | "roles" | "seniority" | "settings" | "signature" | "sleep" | "staff-growth-coefficient" | "staff-turnover-coefficient" | "stats" | "clipboard-summary" | "team" | "clipboard-star" | "time-tracking" | "timeline" | "tennis-ball" | "trainings" | "unarchive" | "union" | "union-circle" | "unlock" | "url" | "user")[];

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

@@ -1 +1,2 @@
 export { default } from './MultipleDropdown';
+export type { DropdownProps, DropdownContextType } from './types';

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

@@ -1,18 +1,92 @@
 import { DropdownOptionProps } from '../DropdownOptions/types';
+/**
+ * Props for the MultipleDropdown component
+ *
+ * A dropdown that supports selecting one or more options from a list.
+ * In multi-select mode (`isMultiple=true`) options toggle independently and
+ * a `+N` badge is shown for overflow. In single-select mode the menu closes
+ * after a pick. Forwards its ref to the root container div.
+ *
+ * @example
+ * ```tsx
+ * <MultipleDropdown
+ *   label="Fruits"
+ *   selectedItems={[{ value: 'apple' }]}
+ *   onChange={(value, isSelected) => handleChange(value, isSelected)}
+ * >
+ *   <DropdownOption value="apple">Apple</DropdownOption>
+ *   <DropdownOption value="banana">Banana</DropdownOption>
+ * </MultipleDropdown>
+ * ```
+ */
 export type DropdownProps<P extends DropdownOptionProps> = {
+    /**
+     * List of currently selected items
+     * Each entry must match one of the DropdownOption values
+     * @default []
+     */
     selectedItems?: P[];
+    /**
+     * Enables multi-select mode — each option toggles independently.
+     * When `false` the dropdown behaves like a single-select and closes on pick.
+     * @default true
+     */
     isMultiple?: boolean;
+    /**
+     * Disables the dropdown, preventing any user interaction
+     * @default false
+     */
     isDisabled?: boolean;
+    /**
+     * Placeholder shown in the toggle button when no item is selected
+     * @default 'Select something'
+     */
     placeholder?: string;
+    /**
+     * When `true` the placeholder value is included in the displayed list.
+     * Set to `false` to hide it and show only the badge count.
+     * @default true
+     */
     showPlaceholder?: boolean;
+    /**
+     * DropdownOption components to render as selectable items
+     */
     children?: React.ReactNode;
+    /**
+     * Custom CSS class name forwarded to the toggle button.
+     * Useful for styling via `styled(MultipleDropdown)`.
+     */
     className?: string;
+    /**
+     * Controlled open state — when provided, overrides internal open/close logic
+     */
     isOpen?: boolean;
+    /**
+     * Label prefix shown in the toggle button before the selected value(s)
+     * e.g. `label="Strategy"` renders "Strategy: Value"
+     */
     label?: string;
+    /**
+     * Callback fired when an option is toggled
+     * @param selectedItem - The value of the toggled option
+     * @param isSelected   - `true` if the option was just selected, `false` if deselected
+     */
     onChange?: (selectedItem: string | number, isSelected: boolean) => void;
 };
+/**
+ * Context value shared with child DropdownOption components via MultipleDropdownContext
+ */
 export interface DropdownContextType<T extends DropdownOptionProps> {
+    /**
+     * Function called when an option is clicked
+     */
     onChange: (item: T) => void;
+    /**
+     * Whether multi-select mode is active
+     */
     isMultiple?: boolean;
+    /**
+     * Map of all option values to their current state (including `isSelected`)
+     */
     allItems: Record<string | number, T>;
 }

package/dist/components/Textarea/TextareaBase.d.ts

@@ -1,4 +1,9 @@
+import type { Theme } from '@emotion/react';
+type TextareaStatus = 'basic' | 'error' | 'success' | 'custom';
 export declare const TextareaBase: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
+    theme?: Theme;
     as?: React.ElementType;
+} & {
+    status?: TextareaStatus;
 }, import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, {}>;
+export {};

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

@@ -84,6 +84,15 @@ export interface TextareaProps extends Partial<Pick<UseFormReturn, 'register'>>
      * Use with setCountChar callback to track character count
      */
     maxLength?: number;
+    /**
+     * Visual validation status (aligns with Input/TextField palette behavior).
+     * - `basic`: default border/outline (theme.colors grey)
+     * - `error`: error state (theme.palette.error)
+     * - `success`: success state (theme.palette.success)
+     * - `custom`: same as basic (no palette styling)
+     * @default 'basic'
+     */
+    status?: 'basic' | 'error' | 'success' | 'custom';
     /**
      * Custom element type to render as (for composition)
      */
@@ -97,6 +106,11 @@ export interface TextareaProps extends Partial<Pick<UseFormReturn, 'register'>>
      * Provides tooltip text on hover
      */
     title?: string;
+    /**
+     * HTML id attribute for the textarea (e.g. for label htmlFor).
+     * Defaults to `formElement-${name}` when not provided.
+     */
+    id?: string;
     /**
      * Paste event handler
      * Fired when content is pasted into the textarea

package/dist/components/Typeahead/styles.d.ts

@@ -10,7 +10,7 @@ export declare const TypeaheadOption: import("@emotion/styled").StyledComponent<
     as?: React.ElementType;
 } & TypeaheadItemProps, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
 export declare const TypeaheadInput: (theme: Theme) => string;
-export declare const TypeaheadInputPlaceholder: string;
+export declare const TypeaheadInputPlaceholder: (theme: Theme) => string;
 export declare const TypeaheadInputWrapper: string;
 export declare const TypeaheadItem: import("@emotion/styled").StyledComponent<{
     theme?: Theme;