@newtonschool/grauity 1.2.3 → 1.3.1

package/dist/index.d.ts

@@ -48,6 +48,8 @@ export const ICON_TAGS: {
     pen: string[];
     "pin-filled": string[];
     pin: string[];
+    "currency-rupee-filled": string[];
+    "currency-rupee": string[];
     "headphone-filled": string[];
     "headphone-mic-filled": string[];
     "headphone-mic": string[];
@@ -238,6 +240,8 @@ export const ICON_TAGS: {
     "double-check": string[];
     "download-filled": string[];
     download: string[];
+    "eda-filled": string[];
+    eda: string[];
     "email-alt-filled": string[];
     "email-alt": string[];
     "email-filled": string[];
@@ -284,6 +288,8 @@ export const ICON_TAGS: {
     load: string[];
     "loudspeaker-filled": string[];
     loudspeaker: string[];
+    "machine-learning-filled": string[];
+    "machine-learning": string[];
     "map-pin-alt1-filled": string[];
     "map-pin-alt1": string[];
     "map-pin-alt2-filled": string[];
@@ -318,8 +324,12 @@ export const ICON_TAGS: {
     "plus-square-filled": string[];
     "plus-square": string[];
     plus: string[];
+    "power-bi-filled": string[];
+    "power-bi": string[];
     "printer-filled": string[];
     printer: string[];
+    "python-filled": string[];
+    python: string[];
     "quiz-filled": string[];
     quiz: string[];
     "refresh-filled": string[];
@@ -328,6 +338,8 @@ export const ICON_TAGS: {
     remove: string[];
     "reply-filled": string[];
     reply: string[];
+    "retail-filled": string[];
+    retail: string[];
     "screenshare-start-filled": string[];
     "screenshare-start": string[];
     "screenshare-stop-filled": string[];
@@ -346,6 +358,8 @@ export const ICON_TAGS: {
     "shield-x-filled": string[];
     "shield-x": string[];
     shield: string[];
+    "shop-filled": string[];
+    shop: string[];
     "sidebar-left-filled": string[];
     "sidebar-left": string[];
     "sidebar-right-filled": string[];
@@ -368,6 +382,8 @@ export const ICON_TAGS: {
     "thumbs-up": string[];
     "thunder-filled": string[];
     thunder: string[];
+    "truck-filled": string[];
+    truck: string[];
     "upload-filled": string[];
     upload: string[];
     "wrench-filled": string[];
@@ -404,6 +420,7 @@ export const TAG_ICONS: {
     Code: string[];
     Device: string[];
     Docs: string[];
+    Finance: string[];
     Media: string[];
     Misc: string[];
     Reward: string[];
@@ -411,7 +428,7 @@ export const TAG_ICONS: {
     Time: string[];
     User: string[];
 };
-type grauityIconName = 'exclamation-circle-filled' | 'exclamation-circle' | 'exclamation-triangle-filled' | 'exclamation-triangle' | 'info-circle-filled' | 'info-circle' | 'question-circle-filled' | 'question-circle' | 'code-alt-filled' | 'code-alt' | 'code-filled' | 'code' | 'project-filled' | 'project' | 'terminal-filled' | 'terminal' | 'desktop-filled' | 'desktop' | 'gamepad-filled' | 'gamepad' | 'lamp-filled' | 'lamp' | 'laptop-filled' | 'laptop' | 'mobile-filled' | 'mobile' | 'archive-filled' | 'archive' | 'bookmark-filled' | 'bookmark' | 'file-alt-filled' | 'file-alt' | 'file-filled' | 'file-lightning-filled' | 'file-lightning' | 'file' | 'folder-filled' | 'folder-open-filled' | 'folder-open' | 'folder' | 'label-filled' | 'label' | 'note-filled' | 'note' | 'pen-filled' | 'pen' | 'pin-filled' | 'pin' | 'headphone-filled' | 'headphone-mic-filled' | 'headphone-mic' | 'headphone' | 'mic-filled' | 'mic' | 'micmute-filled' | 'micmute' | 'pause-circle-filled' | 'pause-circle' | 'pause-filled' | 'pause' | 'play-circle-filled' | 'play-circle' | 'play-filled' | 'play-rectangle-filled' | 'play-rectangle' | 'play' | 'video-filled' | 'video-off-filled' | 'video-off' | 'video' | 'volume-maximum-filled' | 'volume-maximum' | 'volume-minimum-filled' | 'volume-minimum' | 'volume-mute-filled' | 'volume-mute' | 'comment-filled' | 'comment' | 'connector-filled' | 'connector' | 'doubt-alt2-filled' | 'doubt-alt2' | 'doubt-filled' | 'doubt-message-filled' | 'doubt-message' | 'doubt' | 'hearing-filled' | 'hearing' | 'heart-filled' | 'heart' | 'hearthands-filled' | 'hearthands' | 'lock-filled' | 'lock-open-filled' | 'lock-open' | 'lock' | 'message-filled' | 'message-info-filled' | 'message-info' | 'message' | 'milestone-filled' | 'milestone' | 'scholar-hat-filled' | 'scholar-hat' | 'smiley-bad-filled' | 'smiley-bad' | 'smiley-filled' | 'smiley-happy-filled' | 'smiley-happy' | 'smiley-neutral-filled' | 'smiley-neutral' | 'smiley-sad-filled' | 'smiley-sad' | 'smiley-very-bad-filled' | 'smiley-very-bad' | 'smiley-very-happy-filled' | 'smiley-very-happy' | 'smiley' | 'spark-filled' | 'spark' | 'sparkle-filled' | 'sparkle' | 'target-filled' | 'target' | 'check-badge-filled' | 'check-badge' | 'crown-filled' | 'crown' | 'flag-filled' | 'flag' | 'gift-filled' | 'gift' | 'leaderboard-filled' | 'leaderboard' | 'medal-filled' | 'medal' | 'star-filled' | 'star' | 'trophy-filled' | 'trophy' | 'arrow-double-filled' | 'arrow-double' | 'arrow-down-filled' | 'arrow-down-left-filled' | 'arrow-down-left' | 'arrow-down-right-filled' | 'arrow-down-right' | 'arrow-down' | 'arrow-left-filled' | 'arrow-left' | 'arrow-right-filled' | 'arrow-right' | 'arrow-up-filled' | 'arrow-up-left-filled' | 'arrow-up-left' | 'arrow-up-right-filled' | 'arrow-up-right' | 'arrow-up' | 'ban-filled' | 'ban' | 'bin-filled' | 'bin' | 'book-alt-filled' | 'book-alt' | 'book-alt2-filled' | 'book-alt2' | 'book-alt3-filled' | 'book-alt3' | 'book-filled' | 'book' | 'briefcase-alt2-filled' | 'briefcase-alt2' | 'briefcase-filled' | 'briefcase' | 'broadcast-filled' | 'broadcast' | 'bug-filled' | 'bug' | 'bulb-filled' | 'bulb' | 'call-end-filled' | 'call-end' | 'call-start-filled' | 'call-start' | 'camera-filled' | 'camera' | 'caret-double-filled' | 'caret-double' | 'caret-down-filled' | 'caret-down' | 'caret-left-filled' | 'caret-left' | 'caret-right-filled' | 'caret-right' | 'caret-up-filled' | 'caret-up' | 'check-circle-filled' | 'check-circle' | 'check-filled' | 'check-square-filled' | 'check-square' | 'check' | 'chevron-down-double-filled' | 'chevron-down-double' | 'chevron-down-filled' | 'chevron-down' | 'chevron-left-double-filled' | 'chevron-left-double' | 'chevron-left-filled' | 'chevron-left' | 'chevron-right-double-filled' | 'chevron-right-double' | 'chevron-right-filled' | 'chevron-right' | 'chevron-up-double-filled' | 'chevron-up-double' | 'chevron-up-filled' | 'chevron-up' | 'circle-filled' | 'circle' | 'clock-alarm-filled' | 'clock-alarm' | 'close-circle-filled' | 'close-circle' | 'close-filled' | 'close-square-filled' | 'close-square' | 'close' | 'compass-filled' | 'compass' | 'database-filled' | 'database' | 'diamond-filled' | 'diamond' | 'double-check-filled' | 'double-check' | 'download-filled' | 'download' | 'email-alt-filled' | 'email-alt' | 'email-filled' | 'email' | 'filter-filled' | 'filter' | 'floppy-filled' | 'floppy' | 'forward-filled' | 'forward' | 'gear-filled' | 'gear' | 'git-commit-filled' | 'git-commit' | 'globe-filled' | 'globe' | 'grip-hortizontal-filled' | 'grip-hortizontal' | 'grip-vertical-filled' | 'grip-vertical' | 'growth-down-filled' | 'growth-down' | 'growth-up-filled' | 'growth-up' | 'help-filled' | 'help' | 'hold-filled' | 'hold' | 'home-filled' | 'home' | 'hourglass-filled' | 'hourglass' | 'kebab-horizontal-filled' | 'kebab-horizontal' | 'kebab-vertical-filled' | 'kebab-vertical' | 'link-filled' | 'link' | 'list-checked-filled' | 'list-checked' | 'list-filled' | 'list' | 'load-filled' | 'load' | 'loudspeaker-filled' | 'loudspeaker' | 'map-pin-alt1-filled' | 'map-pin-alt1' | 'map-pin-alt2-filled' | 'map-pin-alt2' | 'map-pin-filled' | 'map-pin' | 'maximize-filled' | 'maximize' | 'menu-alt2-filled' | 'menu-alt2' | 'menu-filled' | 'menu-grid-filled' | 'menu-grid' | 'menu' | 'microchip-filled' | 'microchip' | 'minimize-filled' | 'minimize' | 'minus-circle-filled' | 'minus-circle' | 'minus-square-filled' | 'minus-square' | 'moon-filled' | 'moon' | 'new-tab-filled' | 'new-tab' | 'paper-clip-filled' | 'paper-clip' | 'plus-circle-filled' | 'plus-circle' | 'plus-filled' | 'plus-square-filled' | 'plus-square' | 'plus' | 'printer-filled' | 'printer' | 'quiz-filled' | 'quiz' | 'refresh-filled' | 'refresh' | 'remove-filled' | 'remove' | 'reply-filled' | 'reply' | 'screenshare-start-filled' | 'screenshare-start' | 'screenshare-stop-filled' | 'screenshare-stop' | 'search-filled' | 'search' | 'share-filled' | 'share' | 'shield-alert-filled' | 'shield-alert' | 'shield-check-filled' | 'shield-check' | 'shield-filled' | 'shield-lock-filled' | 'shield-lock' | 'shield-x-filled' | 'shield-x' | 'shield' | 'sidebar-left-filled' | 'sidebar-left' | 'sidebar-right-filled' | 'sidebar-right' | 'signin-filled' | 'signin' | 'signout-filled' | 'signout' | 'slider-filled' | 'slider' | 'square-filled' | 'square' | 'sticky-note-filled' | 'sticky-note' | 'sun-filled' | 'sun' | 'thumbs-down-filled' | 'thumbs-down' | 'thumbs-up-filled' | 'thumbs-up' | 'thunder-filled' | 'thunder' | 'upload-filled' | 'upload' | 'wrench-filled' | 'wrench' | 'bell-filled' | 'bell' | 'calender-check-filled' | 'calender-check' | 'calender-filled' | 'calender-plus-filled' | 'calender-plus' | 'calender' | 'clock-filled' | 'clock' | 'rewatch-filled' | 'rewatch' | 'stopwatch-filled' | 'stopwatch' | 'bot-filled' | 'bot' | 'person-check-filled' | 'person-check' | 'person-filled' | 'person-plus-filled' | 'person-plus' | 'person' | 'user-speak-filled' | 'user-speak' | 'users-filled' | 'users';
+type grauityIconName = 'exclamation-circle-filled' | 'exclamation-circle' | 'exclamation-triangle-filled' | 'exclamation-triangle' | 'info-circle-filled' | 'info-circle' | 'question-circle-filled' | 'question-circle' | 'code-alt-filled' | 'code-alt' | 'code-filled' | 'code' | 'project-filled' | 'project' | 'terminal-filled' | 'terminal' | 'desktop-filled' | 'desktop' | 'gamepad-filled' | 'gamepad' | 'lamp-filled' | 'lamp' | 'laptop-filled' | 'laptop' | 'mobile-filled' | 'mobile' | 'archive-filled' | 'archive' | 'bookmark-filled' | 'bookmark' | 'file-alt-filled' | 'file-alt' | 'file-filled' | 'file-lightning-filled' | 'file-lightning' | 'file' | 'folder-filled' | 'folder-open-filled' | 'folder-open' | 'folder' | 'label-filled' | 'label' | 'note-filled' | 'note' | 'pen-filled' | 'pen' | 'pin-filled' | 'pin' | 'currency-rupee-filled' | 'currency-rupee' | 'headphone-filled' | 'headphone-mic-filled' | 'headphone-mic' | 'headphone' | 'mic-filled' | 'mic' | 'micmute-filled' | 'micmute' | 'pause-circle-filled' | 'pause-circle' | 'pause-filled' | 'pause' | 'play-circle-filled' | 'play-circle' | 'play-filled' | 'play-rectangle-filled' | 'play-rectangle' | 'play' | 'video-filled' | 'video-off-filled' | 'video-off' | 'video' | 'volume-maximum-filled' | 'volume-maximum' | 'volume-minimum-filled' | 'volume-minimum' | 'volume-mute-filled' | 'volume-mute' | 'comment-filled' | 'comment' | 'connector-filled' | 'connector' | 'doubt-alt2-filled' | 'doubt-alt2' | 'doubt-filled' | 'doubt-message-filled' | 'doubt-message' | 'doubt' | 'hearing-filled' | 'hearing' | 'heart-filled' | 'heart' | 'hearthands-filled' | 'hearthands' | 'lock-filled' | 'lock-open-filled' | 'lock-open' | 'lock' | 'message-filled' | 'message-info-filled' | 'message-info' | 'message' | 'milestone-filled' | 'milestone' | 'scholar-hat-filled' | 'scholar-hat' | 'smiley-bad-filled' | 'smiley-bad' | 'smiley-filled' | 'smiley-happy-filled' | 'smiley-happy' | 'smiley-neutral-filled' | 'smiley-neutral' | 'smiley-sad-filled' | 'smiley-sad' | 'smiley-very-bad-filled' | 'smiley-very-bad' | 'smiley-very-happy-filled' | 'smiley-very-happy' | 'smiley' | 'spark-filled' | 'spark' | 'sparkle-filled' | 'sparkle' | 'target-filled' | 'target' | 'check-badge-filled' | 'check-badge' | 'crown-filled' | 'crown' | 'flag-filled' | 'flag' | 'gift-filled' | 'gift' | 'leaderboard-filled' | 'leaderboard' | 'medal-filled' | 'medal' | 'star-filled' | 'star' | 'trophy-filled' | 'trophy' | 'arrow-double-filled' | 'arrow-double' | 'arrow-down-filled' | 'arrow-down-left-filled' | 'arrow-down-left' | 'arrow-down-right-filled' | 'arrow-down-right' | 'arrow-down' | 'arrow-left-filled' | 'arrow-left' | 'arrow-right-filled' | 'arrow-right' | 'arrow-up-filled' | 'arrow-up-left-filled' | 'arrow-up-left' | 'arrow-up-right-filled' | 'arrow-up-right' | 'arrow-up' | 'ban-filled' | 'ban' | 'bin-filled' | 'bin' | 'book-alt-filled' | 'book-alt' | 'book-alt2-filled' | 'book-alt2' | 'book-alt3-filled' | 'book-alt3' | 'book-filled' | 'book' | 'briefcase-alt2-filled' | 'briefcase-alt2' | 'briefcase-filled' | 'briefcase' | 'broadcast-filled' | 'broadcast' | 'bug-filled' | 'bug' | 'bulb-filled' | 'bulb' | 'call-end-filled' | 'call-end' | 'call-start-filled' | 'call-start' | 'camera-filled' | 'camera' | 'caret-double-filled' | 'caret-double' | 'caret-down-filled' | 'caret-down' | 'caret-left-filled' | 'caret-left' | 'caret-right-filled' | 'caret-right' | 'caret-up-filled' | 'caret-up' | 'check-circle-filled' | 'check-circle' | 'check-filled' | 'check-square-filled' | 'check-square' | 'check' | 'chevron-down-double-filled' | 'chevron-down-double' | 'chevron-down-filled' | 'chevron-down' | 'chevron-left-double-filled' | 'chevron-left-double' | 'chevron-left-filled' | 'chevron-left' | 'chevron-right-double-filled' | 'chevron-right-double' | 'chevron-right-filled' | 'chevron-right' | 'chevron-up-double-filled' | 'chevron-up-double' | 'chevron-up-filled' | 'chevron-up' | 'circle-filled' | 'circle' | 'clock-alarm-filled' | 'clock-alarm' | 'close-circle-filled' | 'close-circle' | 'close-filled' | 'close-square-filled' | 'close-square' | 'close' | 'compass-filled' | 'compass' | 'database-filled' | 'database' | 'diamond-filled' | 'diamond' | 'double-check-filled' | 'double-check' | 'download-filled' | 'download' | 'eda-filled' | 'eda' | 'email-alt-filled' | 'email-alt' | 'email-filled' | 'email' | 'filter-filled' | 'filter' | 'floppy-filled' | 'floppy' | 'forward-filled' | 'forward' | 'gear-filled' | 'gear' | 'git-commit-filled' | 'git-commit' | 'globe-filled' | 'globe' | 'grip-hortizontal-filled' | 'grip-hortizontal' | 'grip-vertical-filled' | 'grip-vertical' | 'growth-down-filled' | 'growth-down' | 'growth-up-filled' | 'growth-up' | 'help-filled' | 'help' | 'hold-filled' | 'hold' | 'home-filled' | 'home' | 'hourglass-filled' | 'hourglass' | 'kebab-horizontal-filled' | 'kebab-horizontal' | 'kebab-vertical-filled' | 'kebab-vertical' | 'link-filled' | 'link' | 'list-checked-filled' | 'list-checked' | 'list-filled' | 'list' | 'load-filled' | 'load' | 'loudspeaker-filled' | 'loudspeaker' | 'machine-learning-filled' | 'machine-learning' | 'map-pin-alt1-filled' | 'map-pin-alt1' | 'map-pin-alt2-filled' | 'map-pin-alt2' | 'map-pin-filled' | 'map-pin' | 'maximize-filled' | 'maximize' | 'menu-alt2-filled' | 'menu-alt2' | 'menu-filled' | 'menu-grid-filled' | 'menu-grid' | 'menu' | 'microchip-filled' | 'microchip' | 'minimize-filled' | 'minimize' | 'minus-circle-filled' | 'minus-circle' | 'minus-square-filled' | 'minus-square' | 'moon-filled' | 'moon' | 'new-tab-filled' | 'new-tab' | 'paper-clip-filled' | 'paper-clip' | 'plus-circle-filled' | 'plus-circle' | 'plus-filled' | 'plus-square-filled' | 'plus-square' | 'plus' | 'power-bi-filled' | 'power-bi' | 'printer-filled' | 'printer' | 'python-filled' | 'python' | 'quiz-filled' | 'quiz' | 'refresh-filled' | 'refresh' | 'remove-filled' | 'remove' | 'reply-filled' | 'reply' | 'retail-filled' | 'retail' | 'screenshare-start-filled' | 'screenshare-start' | 'screenshare-stop-filled' | 'screenshare-stop' | 'search-filled' | 'search' | 'share-filled' | 'share' | 'shield-alert-filled' | 'shield-alert' | 'shield-check-filled' | 'shield-check' | 'shield-filled' | 'shield-lock-filled' | 'shield-lock' | 'shield-x-filled' | 'shield-x' | 'shield' | 'shop-filled' | 'shop' | 'sidebar-left-filled' | 'sidebar-left' | 'sidebar-right-filled' | 'sidebar-right' | 'signin-filled' | 'signin' | 'signout-filled' | 'signout' | 'slider-filled' | 'slider' | 'square-filled' | 'square' | 'sticky-note-filled' | 'sticky-note' | 'sun-filled' | 'sun' | 'thumbs-down-filled' | 'thumbs-down' | 'thumbs-up-filled' | 'thumbs-up' | 'thunder-filled' | 'thunder' | 'truck-filled' | 'truck' | 'upload-filled' | 'upload' | 'wrench-filled' | 'wrench' | 'bell-filled' | 'bell' | 'calender-check-filled' | 'calender-check' | 'calender-filled' | 'calender-plus-filled' | 'calender-plus' | 'calender' | 'clock-filled' | 'clock' | 'rewatch-filled' | 'rewatch' | 'stopwatch-filled' | 'stopwatch' | 'bot-filled' | 'bot' | 'person-check-filled' | 'person-check' | 'person-filled' | 'person-plus-filled' | 'person-plus' | 'person' | 'user-speak-filled' | 'user-speak' | 'users-filled' | 'users';
 type grauityFlippedChoiceName = 'vertically' | 'horizontally';
 type grauityRotatedChoiceName = 'clockwise' | 'counterclockwise';
 type grauityIconSizeName = '4' | '8' | '12' | '14' | '16' | '20' | '24' | '28' | '32' | '36' | '40';
@@ -826,6 +843,7 @@ export function NSIcon({ ariaHidden, ariaLabel, as, bordered, circular, color, c
  */
 interface StyledDivProps extends React.HTMLAttributes<HTMLDivElement> {
     ref?: React.Ref<HTMLDivElement>;
+    'data-testid'?: string;
 }
 /**
  * Interface representing the properties for a styled button component.
@@ -1504,61 +1522,6 @@ export const NSTable: {
     TableHeadingCell: import("styled-components").StyledComponent<string, any, import("ui/elements/Table/types").TableHeadingCellComponentProps, never>;
     TableRow: import("styled-components").StyledComponent<string, any, import("ui/elements/Table/types").TableRowComponentProps, never>;
 };
-type EventRendererFn<T> = (event: CalendarEvent<T>) => React.ReactNode;
-interface CalendarEvent<T = {}> {
-    title?: string;
-    start: Date;
-    end: Date;
-    allDay?: boolean;
-    render?: EventRendererFn<T>;
-    focused?: boolean;
-}
-export interface WeeklyCalendarProps<T = {}> {
-    /**
-     * An optional array of calendar events.
-     * @default []
-     */
-    events?: CalendarEvent<T>[];
-    /**
-     * A function to render each event.
-     */
-    eventRenderer?: EventRendererFn<T>;
-    /**
-     * A component to render in the header of the calendar.
-     * @default null
-     */
-    header?: React.ReactNode;
-    /**
-     * A boolean indicating whether to show week controls.
-     * @default true
-     */
-    shouldShowWeekControls?: boolean;
-    /**
-     * The offset for the week relative to current week, where 0 represents the current week.
-     * @default 0
-     */
-    weekOffset?: number;
-    /**
-     * A callback function that is called when the week changes.
-     * @param weekOffset - The new week offset.
-     */
-    onWeekChange?: (weekOffset: number) => void;
-    /**
-     * A boolean indicating whether to show the placeholder for loading state.
-     * @default false
-     */
-    loading?: boolean;
-    /**
-     * The time in hours (24 hour format) to show at top initially.
-     * @default 8.5 (8:30 AM)
-     */
-    defaultScrollHour?: number;
-    /**
-     * A boolean indicating whether to scroll to the first event initially.
-     * @default true
-     */
-    shouldScrollToFirstEvent?: boolean;
-}
 export interface OverlayProps {
     /**
      * Content to be displayed inside the Overlay.
@@ -2097,6 +2060,10 @@ type PopOverOffset = {
     bottom?: number;
     right?: number;
 };
+type PopoverPosition = {
+    top: number;
+    left: number;
+};
 export interface PopOverProps {
     /**
      * Whether the PopOver is open or not.
@@ -2154,6 +2121,11 @@ export interface PopOverProps {
      * Height of the PopOver Content.
      */
     height?: string;
+    /**
+     * Custom position of the PopOver.
+     * This will directly open the popover at given position without any adjustments.
+     */
+    position?: PopoverPosition;
 }
 export function NSPopOver(props: PopOverProps): JSX.Element;
 interface DropdownOption {
@@ -2314,6 +2286,26 @@ export interface ChipProps {
      * Content to be displayed inside the chip.
      */
     children?: React.ReactNode;
+    /**
+     * Icon to be displayed in the button.
+     * @default null
+     * */
+    icon?: grauityIconName;
+    /**
+     * Size of the icon
+     * @default '12'
+     * */
+    iconSize?: grauityIconSizeName;
+    /**
+     * Position of the icon
+     * @default 'left'
+     * */
+    iconPosition?: ButtonIconPositions;
+    /**
+     * Additional styles to be used over the element
+     * @default {}
+     * */
+    style?: React.CSSProperties;
 }
 export const NSChip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLDivElement>>;
 export interface AccordionProps {
@@ -2440,6 +2432,127 @@ export interface CalendarEventProps {
     chipBackgroundColor?: string;
 }
 export const NSCalendarEvent: React.ForwardRefExoticComponent<CalendarEventProps & React.RefAttributes<HTMLDivElement>>;
+export interface MonthlyCalendarEventProps extends StyledDivProps {
+    /**
+     * The background color of the calendar event.
+     * @default 'var(--bg-action-brand)'
+     */
+    backgroundColor?: string;
+    /**
+     * The border radius of the calendar event container.
+     * @default '4px'
+     */
+    borderRadius?: string;
+    /**
+     * The width of the calendar event container.
+     * @default '100%'
+     */
+    width?: string;
+    /**
+     * The height of the calendar event container.
+     * @default '100%'
+     */
+    height?: string;
+    /**
+     * The date and time of the calendar event.
+     */
+    eventTime: Date;
+    /**
+     * The title or description of the calendar event.
+     */
+    eventTitle: string;
+    /**
+     * The color of the event time text.
+     * @default 'var(--text-action2)'
+     */
+    eventTimeColor?: string;
+    /**
+     * The color of the event title text.
+     * @default 'var(--text-action2)'
+     */
+    eventTitleColor?: string;
+    /**
+     * Whether the calendar event is active.
+     * @default false
+     */
+    isActive?: boolean;
+}
+export const NSMonthlyCalendarEvent: React.ForwardRefExoticComponent<Omit<MonthlyCalendarEventProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+type EventRendererFn<T> = (event: CalendarEvent<T>) => React.ReactNode;
+interface CalendarEvent<T = {}> {
+    id?: string | number;
+    title?: string;
+    start: Date;
+    end: Date;
+    allDay?: boolean;
+    render?: EventRendererFn<T>;
+    focused?: boolean;
+}
+type CalendarView = 'monthly' | 'weekly';
+export interface WeeklyCalendarProps<T = {}> {
+    /**
+     * An optional array of calendar events.
+     * @default []
+     */
+    events?: CalendarEvent<T>[];
+    /**
+     * A function to render each event.
+     */
+    eventRenderer?: EventRendererFn<T>;
+    /**
+     * A component to render in the header of the calendar.
+     * @default null
+     */
+    header?: React.ReactNode;
+    /**
+     * A boolean indicating whether to show week controls.
+     * @default true
+     */
+    shouldShowWeekControls?: boolean;
+    /**
+     * [DEPRECATED] The offset for the week relative to current week, where 0 represents the current week.
+     *
+     * @default undefined
+     * @deprecated Use `date` prop instead.
+     * @see date
+     */
+    weekOffset?: number;
+    /**
+     * [DEPRECATED] A callback function that is called when the week changes.
+     *
+     * @deprecated Use `onDateChange` instead.
+     * @see onDateChange
+     * @param weekOffset - The new week offset.
+     */
+    onWeekChange?: (weekOffset: number) => void;
+    /**
+     * The date to show in the calendar.
+     *
+     * @default new Date()
+     */
+    date?: Date;
+    /**
+     * A callback function that is called when the date changes.
+     *
+     * @param date - The new date.
+     */
+    onDateChange?: (date: Date) => void;
+    /**
+     * A boolean indicating whether to show the placeholder for loading state.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * The time in hours (24 hour format) to show at top initially.
+     * @default 8.5 (8:30 AM)
+     */
+    defaultScrollHour?: number;
+    /**
+     * A boolean indicating whether to scroll to the first event initially.
+     * @default true
+     */
+    shouldScrollToFirstEvent?: boolean;
+}
 export interface PlaceholderProps {
     /**
      * Width of the placeholder.
@@ -2474,6 +2587,124 @@ export interface PlaceholderProps {
 }
 export const NSPlaceholder: React.ForwardRefExoticComponent<PlaceholderProps & React.RefAttributes<HTMLDivElement>>;
 export function NSWeeklyCalendar<T>(props: WeeklyCalendarProps<T>): JSX.Element;
+export interface CalendarProps<T> {
+    /**
+     * Calendar view to display. Only supports monthly and weekly
+     * @default weekly
+     */
+    view?: CalendarView;
+    /**
+     * Calendar view callback when viewtype changes
+     */
+    onViewChange?: (viewType: CalendarView) => void;
+    /**
+     * Array of events to display in the calendar.
+     */
+    events: CalendarEvent<T>[];
+    /**
+     * Function to render each event in the calendar.
+     * @param item - The event item to render
+     */
+    eventRenderer: (item: CalendarEvent<T>, view: CalendarView) => React.ReactNode;
+    /**
+     * Whether to show navigation controls.
+     * @default true
+     */
+    shouldShowControls?: boolean;
+    /**
+     * Custom header content to display above the calendar.
+     * @default null
+     */
+    header?: React.ReactNode;
+    /**
+     * The date for which the calendar should render events
+     * @default new Date()
+     */
+    date: Date;
+    /**
+     * Callback fired when the date changes.
+     * @param date - The new date value.
+     * @default null
+     */
+    onDateChange?: (date: Date) => void;
+    /**
+     * Whether the calendar is in a loading state.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Weekly calendar properties, only applicable when type is 'weekly'.
+     */
+    weeklyCalendarProps?: {
+        /**
+         * The time in hours (24 hour format) to show at top initially.
+         * @default 8.5 (8:30 AM)
+         */
+        defaultScrollHour?: number;
+        /**
+         * A boolean indicating whether to scroll to the first event initially.
+         * @default true
+         */
+        shouldScrollToFirstEvent?: boolean;
+    };
+    /**
+     * Monthly calendar properties, only applicable when type is 'monthly'.
+     */
+    monthlyCalendarProps?: {
+        /**
+         * Optional alternative render function for events.
+         * @param item - The event item to render
+         * @default null
+         */
+        renderDayItem?: (item: CalendarEvent<T>, view: CalendarView) => React.ReactNode;
+    };
+}
+export interface MonthlyCalendarProps<T = {}> {
+    /**
+     * Array of events to display in the calendar.
+     */
+    events: CalendarEvent<T>[];
+    /**
+     * Function to render each event in the calendar.
+     * @param item - The event item to render
+     */
+    eventRenderer: (item: CalendarEvent<T>) => React.ReactNode;
+    /**
+     * Optional alternative render function for events.
+     * @param item - The event item to render
+     * @default null
+     */
+    renderDayItem?: (item: CalendarEvent<T>) => React.ReactNode;
+    /**
+     * Whether to show month navigation controls.
+     * @default true
+     */
+    shouldShowMonthControls?: boolean;
+    /**
+     * Custom header content to display above the calendar.
+     * @default null
+     */
+    header?: React.ReactNode;
+    /**
+     * The date to show in the calendar.
+     *
+     * @default new Date()
+     */
+    date?: Date;
+    /**
+     * A callback function that is called when the date changes.
+     *
+     * @param date - The new date.
+     */
+    onDateChange?: (date: Date) => void;
+    /**
+     * Whether the calendar is in a loading state.
+     * @default false
+     */
+    loading?: boolean;
+}
+export function NSMonthlyCalendar<T>(props: MonthlyCalendarProps<T>): JSX.Element;
+export function NSCalendar(props: CalendarProps<any>): JSX.Element;
 type RangeInputValue = {
     min: number;
     max: number;