pixelize-design-library 2.2.198 → 2.3.1-beta.2

package/dist/Assets/defaultLogo.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { useCustomTheme } from "../Theme/useCustomTheme";
+
+const DefaultLogo = () => {
+  const theme = useCustomTheme();
+  return (
+    <svg
+      width="12.09"
+      height="15.95"
+      viewBox="0 0 31 29"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M30.4999 6.26137V7.81058H15.9761H14.8787V22.8508V28.8862H12.5226C9.6824 28.8862 7.32632 26.4656 7.06812 23.3995C7.06812 23.2381 7.06812 23.0444 7.06812 22.8508V18.3323C7.06812 18.2677 7.06812 18.2032 7.06812 18.1063V15.5889V6.2291C7.06812 2.80793 9.84378 -5.72205e-06 13.2972 -5.72205e-06H24.8517C28.0147 0.355021 30.4676 3.00158 30.4676 6.2291L30.4999 6.26137Z"
+        fill={theme.colors.black}
+      />
+      <path
+        d="M7.10053 23.3672H7.03598C5.16402 23.2381 3.48571 22.4635 2.25926 21.3338C0.871428 20.0428 0 18.2677 0 16.3312V15.6211H7.06825V18.1386C7.06825 18.2032 7.06825 18.2677 7.06825 18.3645V22.883C7.06825 23.0767 7.06825 23.2381 7.06825 23.4317L7.10053 23.3672Z"
+        fill={theme.colors.black}
+      />
+      <path
+        d="M30.4678 12.0063V15.6211V17.1703C30.4678 20.6238 26.272 23.3994 21.0757 23.3994H14.8789V22.8508V15.6211H22.6572V7.81056C22.6895 7.81056 30.5001 7.81056 30.5001 7.81056V11.5868C30.5001 11.7159 30.5001 11.8772 30.5001 12.0063H30.4678Z"
+        fill={theme.colors.black}
+      />
+    </svg>
+
+  )
+};
+
+export default DefaultLogo;

package/dist/Components/Button/Button.styles.js

@@ -5,9 +5,10 @@ exports.Button = {
     baseStyle: function (_a) {
         var theme = _a.theme;
         return ({
-            borderRadius: "0.25rem",
+            borderRadius: "0.5rem",
             fontWeight: 500,
             fontSize: "1rem",
+            transition: "all 0.2s",
             _disabled: {
                 opacity: 0.6,
                 cursor: "not-allowed",
@@ -22,12 +23,14 @@ exports.Button = {
                 color: theme.colors.white,
                 _hover: {
                     bg: theme.colors[colorScheme][600],
+                    boxShadow: "sm",
                     _disabled: {
                         bg: theme.colors[colorScheme][600], // keep hover color on loading
                     },
                 },
                 _active: {
                     bg: theme.colors[colorScheme][700],
+                    boxShadow: "none",
                 },
                 _loading: {
                     bg: theme.colors[colorScheme][600], // keep hover color while loading
@@ -69,10 +72,10 @@ exports.Button = {
                 color: theme.colors[colorScheme][500],
                 bg: "transparent",
                 _hover: {
-                    bg: theme.colors.gray[200],
+                    bg: theme.colors[colorScheme][50],
                 },
                 _active: {
-                    bg: theme.colors.gray[200],
+                    bg: theme.colors[colorScheme][50],
                 },
             });
         },
@@ -98,6 +101,39 @@ exports.Button = {
                 bg: "transparent",
             },
         }); },
+        // Theme-based two-tone gradient: each theme defines its own `gradient`
+        // {from,to} pair (see palettes); falls back to the primary scale. Ignores
+        // colorScheme. Hover/active shift brightness so it works for any pair.
+        gradient: function (_a) {
+            var _b;
+            var theme = _a.theme;
+            var g = (_b = theme.colors.gradient) !== null && _b !== void 0 ? _b : {
+                from: theme.colors.primary[400],
+                to: theme.colors.primary[700],
+            };
+            var bg = "linear-gradient(135deg, ".concat(g.from, " 0%, ").concat(g.to, " 100%)");
+            return {
+                bgImage: bg,
+                color: theme.colors.white,
+                border: "none",
+                _hover: {
+                    bgImage: bg,
+                    filter: "brightness(0.92)",
+                    boxShadow: "md",
+                    _disabled: { bgImage: bg, filter: "none" },
+                },
+                _active: {
+                    bgImage: bg,
+                    filter: "brightness(0.85)",
+                    boxShadow: "none",
+                },
+                _loading: {
+                    bgImage: bg,
+                    filter: "brightness(0.92)",
+                    _hover: { bgImage: bg, filter: "brightness(0.92)" },
+                },
+            };
+        },
     },
     sizes: {
         xs: {
@@ -120,6 +156,11 @@ exports.Button = {
             fontSize: "1.125rem",
             px: "1.5rem",
         },
+        xl: {
+            h: "3.5rem",
+            fontSize: "1.25rem",
+            px: "2rem",
+        },
     },
     defaultProps: {
         size: "md",

package/dist/Components/Button/ButtonProps.d.ts

@@ -3,7 +3,7 @@ export type ButtonProps = Pick<ChakraButtonProps, "onClick" | "leftIcon" | "righ
     label?: string;
     width?: string | number;
     size?: "lg" | "md" | "sm" | "xs" | "xl";
-    variant?: "solid" | "outline" | "ghost" | "link" | "unstyled";
+    variant?: "solid" | "outline" | "ghost" | "link" | "unstyled" | "gradient";
     type?: "button" | "submit" | "reset";
     colorScheme?: 'primary' | 'secondary' | 'tertiary' | 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink';
     ref?: React.Ref<HTMLButtonElement>;

package/dist/Components/ButtonGroupIcon/ButtonGoupIconProps.d.ts

@@ -7,8 +7,8 @@ export type ButtonGroupIconProps = {
     buttonText: string;
     onButtonClick?: () => void;
     onButtongroupClick?: () => void;
-    size?: "lg" | "md" | "sm" | "xs";
-    variant?: "solid" | "outline" | "ghost" | "link" | "unstyled";
+    size?: "lg" | "md" | "sm" | "xs" | "xl";
+    variant?: "solid" | "outline" | "ghost" | "link" | "unstyled" | "gradient";
     color?: "primary" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha";
     buttonGroupStyle?: React.CSSProperties;
     buttonGroupLeftIconStyle?: React.CSSProperties;

package/dist/Components/ButtonGroupIcon/ButtonGroupIcon.js

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -38,14 +49,14 @@ var react_1 = __importStar(require("react"));
 var react_2 = require("@chakra-ui/react");
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 function ButtonGroupIcon(_a) {
-    var _b, _c;
+    var _b;
     var leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, onLeftIconClick = _a.onLeftIconClick, onRightIconClick = _a.onRightIconClick, buttonText = _a.buttonText, onButtonClick = _a.onButtonClick, onButtongroupClick = _a.onButtongroupClick, size = _a.size, variant = _a.variant, color = _a.color, buttonGroupStyle = _a.buttonGroupStyle, buttonGroupLeftIconStyle = _a.buttonGroupLeftIconStyle, buttonGroupRightIconStyle = _a.buttonGroupRightIconStyle, buttonStyle = _a.buttonStyle, onBlurLeftIcon = _a.onBlurLeftIcon, onBlurRightIcon = _a.onBlurRightIcon, dropdownOptions = _a.dropdownOptions, // New prop for dropdown options
     onDropdownOptionClick = _a.onDropdownOptionClick, // New prop to handle option clicks
-    rightIconDropdown = _a.rightIconDropdown, menulistStyle = _a.menulistStyle, menuItemStyle = _a.menuItemStyle, isLoading = _a.isLoading, _d = _a.divider, divider = _d === void 0 ? true : _d, leftIconLoading = _a.leftIconLoading, RightIconLoading = _a.RightIconLoading;
+    rightIconDropdown = _a.rightIconDropdown, menulistStyle = _a.menulistStyle, menuItemStyle = _a.menuItemStyle, isLoading = _a.isLoading, _c = _a.divider, divider = _c === void 0 ? true : _c, leftIconLoading = _a.leftIconLoading, RightIconLoading = _a.RightIconLoading;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var _e = (0, react_1.useState)(false), isDropdownOpen = _e[0], setIsDropdownOpen = _e[1];
+    var _d = (0, react_1.useState)(false), isDropdownOpen = _d[0], setIsDropdownOpen = _d[1];
     var textRef = (0, react_1.useRef)(null);
-    var _f = (0, react_1.useState)(false), isTextTruncated = _f[0], setIsTextTruncated = _f[1];
+    var _e = (0, react_1.useState)(false), isTextTruncated = _e[0], setIsTextTruncated = _e[1];
     (0, react_1.useEffect)(function () {
         var checkTruncation = function () {
             if (textRef.current) {
@@ -74,42 +85,43 @@ function ButtonGroupIcon(_a) {
             onDropdownOptionClick(event, option);
         }
     };
-    return (react_1.default.createElement(react_2.ButtonGroup, { size: size, isAttached: true, variant: variant, onClick: onButtongroupClick, colorScheme: color, style: buttonGroupStyle },
-        leftIcon && (react_1.default.createElement(react_2.IconButton, { "aria-label": "Left icon button", icon: leftIcon, isLoading: leftIconLoading, onClick: onLeftIconClick, onBlur: onBlurLeftIcon, style: buttonGroupLeftIconStyle, sx: {
-                backgroundColor: theme.colors.primary[500],
-                "&:hover": {
-                    backgroundColor: theme.colors.primary[400],
-                },
-            } })),
+    // For the gradient variant we paint ONE continuous gradient on the group and
+    // keep the segments transparent (so it doesn't restart per button/icon), with a
+    // translucent-white hover overlay for per-segment feedback.
+    var isGradient = variant === "gradient";
+    var gradientStops = (_b = theme.colors.gradient) !== null && _b !== void 0 ? _b : {
+        from: theme.colors.primary[400],
+        to: theme.colors.primary[700],
+    };
+    var gradientBg = "linear-gradient(135deg, ".concat(gradientStops.from, " 0%, ").concat(gradientStops.to, " 100%)");
+    var gradientItemSx = isGradient
+        ? {
+            color: theme.colors.white,
+            bg: "transparent",
+            bgImage: "none",
+            boxShadow: "none",
+            _hover: { bg: "whiteAlpha.200", boxShadow: "none" },
+            _active: { bg: "whiteAlpha.300" },
+        }
+        : undefined;
+    return (react_1.default.createElement(react_2.ButtonGroup, { size: size, isAttached: true, variant: isGradient ? "solid" : variant, onClick: onButtongroupClick, colorScheme: color, style: buttonGroupStyle, sx: isGradient
+            ? { bgImage: gradientBg, color: theme.colors.white, borderRadius: "0.5rem", overflow: "hidden" }
+            : undefined },
+        leftIcon && (react_1.default.createElement(react_2.IconButton, { "aria-label": "Left icon button", icon: leftIcon, isLoading: leftIconLoading, onClick: onLeftIconClick, onBlur: onBlurLeftIcon, style: buttonGroupLeftIconStyle, sx: gradientItemSx })),
         react_1.default.createElement(react_2.Tooltip, { label: buttonText, isDisabled: !buttonText || !isTextTruncated },
-            react_1.default.createElement(react_2.Button, { onClick: onButtonClick, style: buttonStyle, isLoading: isLoading, sx: {
-                    backgroundColor: theme.colors.primary[500],
-                    "&:hover": {
-                        backgroundColor: theme.colors.primary[400],
-                    },
-                }, borderLeft: "1px solid ".concat((_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray[300]), borderRight: "1px solid ".concat((_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[300]), maxW: "200px" },
+            react_1.default.createElement(react_2.Button, { onClick: onButtonClick, style: buttonStyle, isLoading: isLoading, borderLeft: "1px solid", borderRight: "1px solid", borderColor: "whiteAlpha.400", maxW: "200px", sx: gradientItemSx },
                 react_1.default.createElement(react_2.Box, { ref: textRef, as: "span", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", display: "block", width: "100%" }, buttonText))),
         rightIcon && rightIconDropdown ? (react_1.default.createElement(react_2.Menu, { isOpen: isDropdownOpen, onClose: function () { return setIsDropdownOpen(false); } },
-            react_1.default.createElement(react_2.MenuButton, { as: react_2.IconButton, "aria-label": "Right icon button", icon: rightIcon, isLoading: RightIconLoading, onClick: handleRightIconClick, onBlur: onBlurRightIcon, style: buttonGroupRightIconStyle, sx: {
-                    backgroundColor: theme.colors.primary[500],
-                    "&:hover": {
-                        backgroundColor: theme.colors.primary[400],
-                    },
-                } }),
+            react_1.default.createElement(react_2.MenuButton, { as: react_2.IconButton, "aria-label": "Right icon button", icon: rightIcon, isLoading: RightIconLoading, onClick: handleRightIconClick, onBlur: onBlurRightIcon, style: buttonGroupRightIconStyle, sx: gradientItemSx }),
             react_1.default.createElement(react_2.Box, { sx: { zIndex: 99 } },
-                react_1.default.createElement(react_2.MenuList, { style: menulistStyle }, dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map(function (option, index) {
-                    var _a;
-                    return (react_1.default.createElement(react_2.MenuItem, { key: index, onClick: function (event) { return handleMenuClick(event, option); }, style: menuItemStyle, borderBottom: divider ? "1px solid ".concat((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray[300]) : undefined, sx: {
-                            "&:last-child": {
-                                borderBottom: "none",
-                            },
-                        } }, option === null || option === void 0 ? void 0 :
-                        option.image,
-                        option.label));
-                }))))) : (rightIcon && (react_1.default.createElement(react_2.IconButton, { "aria-label": "Right icon button", icon: rightIcon, isLoading: RightIconLoading, onClick: onRightIconClick, onBlur: onBlurRightIcon, style: buttonGroupRightIconStyle, sx: {
-                backgroundColor: theme.colors.primary[500],
-                "&:hover": {
-                    backgroundColor: theme.colors.primary[400],
-                },
-            } })))));
+                react_1.default.createElement(react_2.MenuList, { style: menulistStyle, bg: theme.colors.backgroundColor.light, border: "1px solid", borderColor: "blackAlpha.100", borderRadius: "0.75rem", boxShadow: "lg", py: "0.375rem", minW: "12rem", overflow: "hidden" }, dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map(function (option, index) { return (react_1.default.createElement(react_2.MenuItem, { key: index, onClick: function (event) { return handleMenuClick(event, option); }, style: menuItemStyle, sx: __assign(__assign({ display: "flex", alignItems: "center", gap: "0.5rem", mx: "0.375rem", px: "0.625rem", py: "0.5rem", borderRadius: "7px", fontSize: "13px", fontWeight: 500, color: theme.colors.gray[700], transition: "background 0.12s", "& svg": { width: "16px", height: "16px" } }, (divider
+                        ? {
+                            mx: 0,
+                            borderRadius: 0,
+                            borderBottom: "1px solid",
+                            borderColor: "blackAlpha.100",
+                        }
+                        : {})), { _hover: { bg: theme.colors.primary[50], color: theme.colors.primary[700] }, _focus: { bg: theme.colors.primary[50], color: theme.colors.primary[700] }, "&:last-child": { borderBottom: "none" } }) }, option === null || option === void 0 ? void 0 :
+                    option.image,
+                    option.label)); }))))) : (rightIcon && (react_1.default.createElement(react_2.IconButton, { "aria-label": "Right icon button", icon: rightIcon, isLoading: RightIconLoading, onClick: onRightIconClick, onBlur: onBlurRightIcon, style: buttonGroupRightIconStyle, sx: gradientItemSx })))));
 }

package/dist/Components/Checkbox/Checkbox.js

@@ -31,8 +31,8 @@ function CheckBox(_a) {
         ? __assign({ display: "-webkit-box", WebkitLineClamp: labelClampLines, WebkitBoxOrient: "vertical", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "normal" }, labelSx)
         : __assign({}, labelSx);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(react_2.Checkbox, { onClick: onClick, spacing: spacing, isInvalid: isInvalid, colorScheme: color, iconColor: iconColor, iconSize: iconSize, isChecked: isChecked, isIndeterminate: isIndeterminate, onChange: onChange, isDisabled: isDisabled, size: size, value: value, defaultChecked: defaultChecked, borderColor: theme.colors.gray[500], display: "flex", alignItems: "inherit", sx: __assign(__assign({}, sx), { ".chakra-checkbox__control": { w: controlSize, h: controlSize }, ".chakra-checkbox__label": { ml: 0 } }) }, label && (showLabelTooltip ? (react_1.default.createElement(react_2.Tooltip, { label: labelTooltip !== null && labelTooltip !== void 0 ? labelTooltip : label, hasArrow: true, placement: "top", bg: theme.colors.gray[600], color: theme.colors.white, fontSize: "0.75rem" },
-            react_1.default.createElement(react_2.Box, { as: "span", sx: clampStyles, fontSize: labelFontSize !== null && labelFontSize !== void 0 ? labelFontSize : "0.875rem", color: theme.colors.gray[600], fontWeight: 400, ml: 0 }, label))) : (react_1.default.createElement(react_2.Box, { as: "span", sx: clampStyles, fontSize: labelFontSize !== null && labelFontSize !== void 0 ? labelFontSize : "0.875rem", color: theme.colors.gray[600], fontWeight: 400, ml: 0 }, label)))),
+        react_1.default.createElement(react_2.Checkbox, { onClick: onClick, spacing: spacing !== null && spacing !== void 0 ? spacing : "0.5rem", isInvalid: isInvalid, colorScheme: color, iconColor: iconColor, iconSize: iconSize, isChecked: isChecked, isIndeterminate: isIndeterminate, onChange: onChange, isDisabled: isDisabled, size: size, value: value, defaultChecked: defaultChecked, borderColor: theme.colors.gray[500], display: "flex", alignItems: "center", sx: __assign(__assign({}, sx), { ".chakra-checkbox__control": { w: controlSize, h: controlSize } }) }, label && (showLabelTooltip ? (react_1.default.createElement(react_2.Tooltip, { label: labelTooltip !== null && labelTooltip !== void 0 ? labelTooltip : label, hasArrow: true, placement: "top", bg: theme.colors.gray[600], color: theme.colors.white, fontSize: "0.75rem" },
+            react_1.default.createElement(react_2.Box, { as: "span", sx: clampStyles, fontSize: labelFontSize !== null && labelFontSize !== void 0 ? labelFontSize : "0.8125rem", color: theme.colors.text[700], fontWeight: 500, ml: 0 }, label))) : (react_1.default.createElement(react_2.Box, { as: "span", sx: clampStyles, fontSize: labelFontSize !== null && labelFontSize !== void 0 ? labelFontSize : "0.8125rem", color: theme.colors.text[700], fontWeight: 500, ml: 0 }, label)))),
         error && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage }),
         helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText })));
 }

package/dist/Components/Checkbox/Checkbox.styles.js

@@ -11,6 +11,8 @@ exports.Checkbox = {
                 width: "1.25rem",
                 height: "1.25rem",
                 borderWidth: "1.6px",
+                borderRadius: "0.25rem",
+                transition: "background 0.15s, border-color 0.15s, box-shadow 0.15s",
                 _disabled: {
                     bg: theme.colors.background[50],
                     borderColor: theme.colors.boxborder[500],

package/dist/Components/Common/FormLabel.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-export declare const TextLabel: ({ label, isRequired, isInformation, informationMessage, fontSize, showTooltip, tooltipLabel, clampLines, }: {
+export declare const TextLabel: ({ label, isRequired, isInformation, informationMessage, fontSize, showTooltip, tooltipLabel, clampLines, inline, }: {
     label: string;
     id?: string;
     isInformation?: boolean;
@@ -9,4 +9,5 @@ export declare const TextLabel: ({ label, isRequired, isInformation, information
     showTooltip?: boolean;
     tooltipLabel?: string;
     clampLines?: number;
+    inline?: boolean;
 }) => React.JSX.Element;

package/dist/Components/Common/FormLabel.js

@@ -9,7 +9,7 @@ var react_2 = require("@chakra-ui/react");
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 var lucide_react_1 = require("lucide-react");
 var TextLabel = function (_a) {
-    var label = _a.label, _b = _a.isRequired, isRequired = _b === void 0 ? false : _b, _c = _a.isInformation, isInformation = _c === void 0 ? false : _c, _d = _a.informationMessage, informationMessage = _d === void 0 ? "" : _d, fontSize = _a.fontSize, showTooltip = _a.showTooltip, tooltipLabel = _a.tooltipLabel, clampLines = _a.clampLines;
+    var label = _a.label, _b = _a.isRequired, isRequired = _b === void 0 ? false : _b, _c = _a.isInformation, isInformation = _c === void 0 ? false : _c, _d = _a.informationMessage, informationMessage = _d === void 0 ? "" : _d, fontSize = _a.fontSize, showTooltip = _a.showTooltip, tooltipLabel = _a.tooltipLabel, clampLines = _a.clampLines, _e = _a.inline, inline = _e === void 0 ? false : _e;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var clampStyles = clampLines ? {
         display: "-webkit-box",
@@ -19,13 +19,12 @@ var TextLabel = function (_a) {
         textOverflow: "ellipsis",
         whiteSpace: "normal",
     } : {};
-    return (react_1.default.createElement(react_2.Box, { as: "span" },
-        react_1.default.createElement(react_2.Box, { as: "span", color: theme.colors.gray[600], fontWeight: 400, fontSize: fontSize !== null && fontSize !== void 0 ? fontSize : "0.875rem" },
-            react_1.default.createElement(react_2.Box, { as: "span", display: "inline-flex", alignItems: "center", gap: "0.35rem" },
-                showTooltip ? (react_1.default.createElement(react_2.Tooltip, { label: tooltipLabel !== null && tooltipLabel !== void 0 ? tooltipLabel : label, hasArrow: true, placement: "top", bg: theme.colors.gray[600], color: theme.colors.white, fontSize: "0.75rem" },
-                    react_1.default.createElement(react_2.Box, { as: "span", sx: clampStyles }, label))) : (react_1.default.createElement(react_2.Box, { as: "span", sx: clampStyles }, label)),
-                isRequired && (react_1.default.createElement("span", { style: { color: theme.colors.semantic.error[500] } }, "*")),
-                isInformation && informationMessage && (react_1.default.createElement(react_2.Tooltip, { label: informationMessage, hasArrow: true, placement: "top", bg: theme.colors.gray[600], color: theme.colors.white, fontSize: "0.75rem" },
-                    react_1.default.createElement(react_2.Icon, { as: lucide_react_1.InfoIcon, color: theme.colors.gray[500], boxSize: 4 })))))));
+    return (react_1.default.createElement(react_2.Box, { as: "span", display: inline ? "inline-flex" : "block", alignItems: inline ? "center" : undefined, mb: inline ? 0 : "0.375rem", color: theme.colors.text[700], fontWeight: 500, fontSize: fontSize !== null && fontSize !== void 0 ? fontSize : "0.8125rem", lineHeight: "1.2" },
+        react_1.default.createElement(react_2.Box, { as: "span", display: "inline-flex", alignItems: "center", gap: "0.35rem" },
+            showTooltip ? (react_1.default.createElement(react_2.Tooltip, { label: tooltipLabel !== null && tooltipLabel !== void 0 ? tooltipLabel : label, hasArrow: true, placement: "top", bg: theme.colors.gray[600], color: theme.colors.white, fontSize: "0.75rem" },
+                react_1.default.createElement(react_2.Box, { as: "span", sx: clampStyles }, label))) : (react_1.default.createElement(react_2.Box, { as: "span", sx: clampStyles }, label)),
+            isRequired && (react_1.default.createElement("span", { style: { color: theme.colors.semantic.error[500], marginLeft: "0.125rem" } }, "*")),
+            isInformation && informationMessage && (react_1.default.createElement(react_2.Tooltip, { label: informationMessage, hasArrow: true, placement: "top", bg: theme.colors.gray[600], color: theme.colors.white, fontSize: "0.75rem" },
+                react_1.default.createElement(react_2.Icon, { as: lucide_react_1.InfoIcon, color: theme.colors.text[700], boxSize: 3.5 }))))));
 };
 exports.TextLabel = TextLabel;

package/dist/Components/Common/fieldStyles.d.ts

@@ -0,0 +1,22 @@
+export declare const FIELD_RADIUS = "0.5rem";
+export declare const FIELD_BORDER_WIDTH = "0.063rem";
+export declare const FIELD_TRANSITION = "border-color 0.2s, box-shadow 0.2s";
+type FieldState = {
+    error?: boolean;
+    focused?: boolean;
+};
+/**
+ * State-based field styles for components that track `focused`/`error` in JS
+ * (e.g. SearchSelect, SingleDatePicker). Returns Chakra style props.
+ */
+export declare const getFieldStateStyles: (theme: any, { error, focused }?: FieldState) => {
+    bg: any;
+    borderRadius: string;
+    border: string;
+    borderColor: any;
+    boxShadow: string;
+    transition: string;
+};
+/** Focus ring value (e.g. for `_focus` / `_focusWithin` pseudo styles). */
+export declare const fieldFocusRing: (theme: any, error?: boolean) => string;
+export {};

package/dist/Components/Common/fieldStyles.js

@@ -0,0 +1,42 @@
+"use strict";
+// Shared field-box visual standard, so the custom-styled form components
+// (SearchSelect, MultiSelect, SelectSearch, date pickers, …) match the theme
+// `Input` config exactly instead of each re-deriving border/focus/bg values.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fieldFocusRing = exports.getFieldStateStyles = exports.FIELD_TRANSITION = exports.FIELD_BORDER_WIDTH = exports.FIELD_RADIUS = void 0;
+exports.FIELD_RADIUS = "0.5rem";
+exports.FIELD_BORDER_WIDTH = "0.063rem";
+exports.FIELD_TRANSITION = "border-color 0.2s, box-shadow 0.2s";
+/**
+ * State-based field styles for components that track `focused`/`error` in JS
+ * (e.g. SearchSelect, SingleDatePicker). Returns Chakra style props.
+ */
+var getFieldStateStyles = function (theme, _a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j;
+    var _k = _a === void 0 ? {} : _a, _l = _k.error, error = _l === void 0 ? false : _l, _m = _k.focused, focused = _m === void 0 ? false : _m;
+    var idleBorder = (_c = (_b = theme.colors.boxborder) === null || _b === void 0 ? void 0 : _b[500]) !== null && _c !== void 0 ? _c : (_d = theme.colors.gray) === null || _d === void 0 ? void 0 : _d[300];
+    var primary = theme.colors.primary[500];
+    var errorColor = (_f = (_e = theme.colors.semantic) === null || _e === void 0 ? void 0 : _e.error) === null || _f === void 0 ? void 0 : _f[500];
+    var ringPrimary = (_g = theme.colors.boxShadow) === null || _g === void 0 ? void 0 : _g.primary;
+    var ringError = (_h = theme.colors.boxShadow) === null || _h === void 0 ? void 0 : _h.error;
+    return {
+        bg: (_j = theme.colors.gray) === null || _j === void 0 ? void 0 : _j[50],
+        borderRadius: exports.FIELD_RADIUS,
+        border: "".concat(exports.FIELD_BORDER_WIDTH, " solid"),
+        borderColor: error ? errorColor : focused ? primary : idleBorder,
+        boxShadow: error
+            ? "0 0 0 0.125rem ".concat(ringError)
+            : focused
+                ? "0 0 0 0.125rem ".concat(ringPrimary)
+                : "none",
+        transition: exports.FIELD_TRANSITION,
+    };
+};
+exports.getFieldStateStyles = getFieldStateStyles;
+/** Focus ring value (e.g. for `_focus` / `_focusWithin` pseudo styles). */
+var fieldFocusRing = function (theme, error) {
+    var _a, _b;
+    if (error === void 0) { error = false; }
+    return "0 0 0 0.125rem ".concat(error ? (_a = theme.colors.boxShadow) === null || _a === void 0 ? void 0 : _a.error : (_b = theme.colors.boxShadow) === null || _b === void 0 ? void 0 : _b.primary);
+};
+exports.fieldFocusRing = fieldFocusRing;

package/dist/Components/DatePicker/CalendarPanel.d.ts

@@ -16,6 +16,8 @@ export type CalendarPanelProps = {
     disableFutureDates?: boolean;
     disableToday?: boolean;
     onDaySelect: (d: Date) => void;
+    hoveredDate?: Date | null;
+    onDayHover?: (d: Date | null) => void;
     renderWeekdays?: React.ReactNode;
 };
 export declare const CalendarPanel: React.FC<CalendarPanelProps>;