npm - @bikdotai/bik-component-library - Versions diffs - 0.0.838-beta.0 → 0.0.838-beta.2 - Mend

@bikdotai/bik-component-library 0.0.838-beta.0 → 0.0.838-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (95) hide show

package/dist/esm/components/button/themes.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"themes.js","sources":["../../../../src/components/button/themes.tsx"],"sourcesContent":["import { COLORS } from '@src/constants/Theme';\nimport {\n\tBodyCaption,\n\tBodySecondary,\n\tButtonLarge,\n\tButtonLargeAI,\n\tButtonRegular,\n\tButtonRegularAI,\n} from '../TypographyStyle';\nimport { Size, Type } from './model';\n\nexport const getBackgroundColor = (\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n\tdarkMode?: boolean,\n\tbuttonColor?: string,\n): string => {\n\tif (type === 'special') return COLORS.background.brandVeryLight;\n\tif (type === 'secondaryGray') return 'transparent';\n\n\tif (size === 'chip') {\n\t\tif (type === 'text') {\n\t\t\treturn 'transparent';\n\t\t}\n\t\treturn darkMode ? COLORS.surface.hovered : COLORS.surface.subdued;\n\t}\n\tswitch (type) {\n\t\tcase 'primary':\n\t\t\treturn buttonColor\n\t\t\t\t? buttonColor\n\t\t\t\t: inverse\n\t\t\t\t? COLORS.background.warning.vibrant\n\t\t\t\t: COLORS.background.inverseLight;\n\t\tcase 'destructive':\n\t\t\treturn COLORS.background.negative.vibrant;\n\t\tcase 'tertiary':\n\t\t\treturn 'transparent';\n\t\tdefault:\n\t\t\treturn 'transparent';\n\t}\n};\n\nexport const getColor = (\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n\tdarkMode?: boolean,\n): string => {\n\tif (type === 'special') return COLORS.background.inverseLight;\n\tif (type === 'secondaryGray') return COLORS.content.secondary;\n\n\tif (size === 'chip') {\n\t\tif (type === 'text') {\n\t\t\treturn inverse ? COLORS.content.inactive : COLORS.content.brand;\n\t\t}\n\t\treturn darkMode ? COLORS.content.primary : COLORS.content.secondary;\n\t}\n\tswitch (type) {\n\t\tcase 'primary':\n\t\t\treturn inverse ? COLORS.content.primary : COLORS.content.primaryInverse;\n\t\tcase 'tertiaryGray':\n\t\t\treturn COLORS.content.secondary;\n\t\tcase 'destructive':\n\t\t\treturn COLORS.content.primaryInverse;\n\t\tcase 'dashBold':\n\t\t\treturn COLORS.content.secondary;\n\t\tcase 'dashRegular':\n\t\t\treturn COLORS.content.secondary;\n\t\tcase 'ai':\n\t\t\treturn COLORS.content.ai;\n\t\tdefault:\n\t\t\treturn inverse ? COLORS.content.primaryInverse : COLORS.stroke.brand;\n\t}\n};\n\nexport const getDisabledTextColor = (inverse?: boolean) => {\n\tif (inverse) {\n\t\treturn 'rgba(255, 255, 255, 0.5)';\n\t}\n\treturn COLORS.content.inactive;\n};\n\nexport const getPadding = (type: Type, size: Size) => {\n\tif (type === 'text') {\n\t\treturn '0px';\n\t} else if (size === 'xs') {\n\t\treturn '4px 6px';\n\t} else if (size === 'chip') {\n\t\treturn '4px 8px';\n\t} else if (size === 'small') {\n\t\tswitch (type) {\n\t\t\tcase 'tertiary':\n\t\t\t\treturn '6px 4px';\n\t\t\tcase 'tertiaryGray':\n\t\t\t\treturn '6px 4px';\n\t\t\tdefault:\n\t\t\t\treturn '6px 12px';\n\t\t}\n\t} else if (size === 'medium') {\n\t\tswitch (type) {\n\t\t\tcase 'tertiary':\n\t\t\t\treturn '10px 4px';\n\t\t\tcase 'tertiaryGray':\n\t\t\t\treturn '10px 4px';\n\t\t\tdefault:\n\t\t\t\treturn '10px 12px';\n\t\t}\n\t} else if (size === 'large') {\n\t\tswitch (type) {\n\t\t\tcase 'tertiary':\n\t\t\t\treturn '14px 4px';\n\t\t\tcase 'tertiaryGray':\n\t\t\t\treturn '14px 4px';\n\t\t\tdefault:\n\t\t\t\treturn '14px 12px';\n\t\t}\n\t}\n};\nexport const GetButtonTextComponent = (\n\tsize: Size,\n\ttype: Type,\n\tdisabled?: boolean,\n) => {\n\tif (!disabled && type === 'ai') {\n\t\tif (size === 'small') {\n\t\t\treturn ButtonRegularAI;\n\t\t} else {\n\t\t\treturn ButtonLargeAI;\n\t\t}\n\t}\n\n\tif (type === 'dashRegular') {\n\t\treturn BodySecondary;\n\t}\n\tif (size === 'chip' \|\| size === 'xs') {\n\t\treturn BodyCaption;\n\t} else if (size === 'small') {\n\t\treturn ButtonRegular;\n\t}\n\treturn ButtonLarge;\n};\n\nexport const getBorderColor = (\n\ttype: Type,\n\tinverse?: boolean,\n\terror?: boolean,\n): string => {\n\tif (error) {\n\t\treturn COLORS.stroke.negative.vibrant;\n\t}\n\n\tif (inverse) {\n\t\treturn COLORS.surface.standard;\n\t}\n\tif (type == 'secondary') {\n\t\treturn COLORS.stroke.brand;\n\t}\n\treturn COLORS.content.placeholder;\n};\n\nexport const getBorder = (\n\tversion: '1.0' \| '2.0' \| '3.0',\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n\terror?: boolean,\n): string => {\n\tif (type == 'text') {\n\t\treturn 'border: none;';\n\t}\n\tif (type === 'special') {\n\t\treturn `border: 1px solid ${COLORS.stroke.brandLightAlt};`;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn `border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\tif (size === 'chip') {\n\t\treturn `border: ${version === '2.0' ? 0.5 : 1}px solid ${\n\t\t\tCOLORS.stroke.primary\n\t\t};`;\n\t}\n\tif (inverse) {\n\t\tif (type === 'secondary') {\n\t\t\treturn `border: ${version === '2.0' ? 0.5 : 1}px solid ${getBorderColor(\n\t\t\t\ttype,\n\t\t\t\tinverse,\n\t\t\t\terror,\n\t\t\t)};`;\n\t\t}\n\t\treturn 'border: none;';\n\t}\n\n\tif (type === 'secondary') {\n\t\treturn `border: ${version === '2.0' ? 0.5 : 1}px solid ${getBorderColor(\n\t\t\ttype,\n\t\t\tfalse,\n\t\t\terror,\n\t\t)};`;\n\t}\n\treturn 'border: none;';\n};\n\nexport const getLinearGradientValue = (size: Size): string => {\n\tif (size === 'medium') {\n\t\treturn `5px,\n\t\ttransparent 5px,\n\t\ttransparent 10px`;\n\t}\n\treturn `6px,\n\t\ttransparent 6px,\n\t\ttransparent 12px`;\n};\n\n/*\n Adjusts the brightness of a given hex color by a specified percentage.\n * Below function is used to generate a hover effect for button backgrounds.\n \n @param {string} color - The hex color code to be adjusted (e.g., \"#ff0000\").\n * @param {number} percent - The percentage by which to darken the color. Positive values darken the color.\n * @returns {string} - The adjusted hex color code.\n \n @example\n * // Darken the color #ff0000 (red) by 10%\n * const darkerRed = getHoverButtonBackgroundCustom(\"#ff0000\", 10);\n * console.log(darkerRed); // Output might be \"#e60000\"\n /\n\nexport const getHoverButtonBackgroundCustom = (\n\tcolor: string,\n\tpercent: number,\n) => {\n\tconst num = parseInt(color.replace('#', ''), 16),\n\t\tamt = Math.round(2.55 percent),\n\t\tR = (num >> 16) - amt,\n\t\tG = ((num >> 8) & 0x00ff) - amt,\n\t\tB = (num & 0x0000ff) - amt;\n\n\treturn `#${(\n\t\t0x1000000 +\n\t\t(Math.max(R, 0) << 16) +\n\t\t(Math.max(G, 0) << 8) +\n\t\tMath.max(B, 0)\n\t)\n\t\t.toString(16)\n\t\t.slice(1)}`;\n};\n\n/*\n Generates a new color by adjusting the brightness of the given color by a specified percentage.\n \n @param color - The original color in hexadecimal format (e.g., \"#RRGGBB\").\n * @param percent - The percentage to adjust the brightness. Positive values will lighten the color, while negative values will darken it.\n * @returns The new color in hexadecimal format after adjusting the brightness.\n \n @example\n * // Lighten the color by 20%\n * const newColor = getLoadingButtonBackgroundCustom(\"#ff0000\", 20); // \"#ff3333\"\n \n @example\n * // Darken the color by 10%\n * const newColor = getLoadingButtonBackgroundCustom(\"#00ff00\", -10); // \"#00e600\"\n /\nexport const getLoadingButtonBackgroundCustom = (\n\tcolor: string,\n\tpercent: number,\n) => {\n\tconst num = parseInt(color.replace('#', ''), 16),\n\t\tamt = Math.round(2.55 percent),\n\t\tR = (num >> 16) + amt,\n\t\tG = ((num >> 8) & 0x00ff) + amt,\n\t\tB = (num & 0x0000ff) + amt;\n\n\treturn `#${(\n\t\t0x1000000 +\n\t\t(Math.min(R, 255) << 16) +\n\t\t(Math.min(G, 255) << 8) +\n\t\tMath.min(B, 255)\n\t)\n\t\t.toString(16)\n\t\t.slice(1)}`;\n};\n\nexport const getHoverButtonBackground = (type: Type, inverse?: boolean) => {\n\tif (type === 'ai') {\n\t\treturn `background: ${COLORS.surface.aiLight};`;\n\t}\n\n\tif (type === 'text') {\n\t\treturn `background-color:transparent;`;\n\t}\n\tif (type === 'special' \|\| type === 'secondaryGray') {\n\t\treturn '';\n\t}\n\tif (!inverse && type !== 'primary') {\n\t\treturn `background-color: #000000;\n\t\t\t\topacity: 0.03;`;\n\t}\n\n\treturn ``;\n};\n\nexport const getHoverButtonTextDecorationStyle = (\n\ttype: Type,\n\tdisabled?: boolean,\n) => {\n\tif (disabled) {\n\t\treturn '';\n\t}\n\treturn `text-decoration-line: underline;\n\t\t\ttext-decoration-color: ${COLORS.content.brand};`;\n};\n\nexport const generateInverseHoverBackground = (\n\ttype: Type,\n\tdisabled?: boolean,\n) => {\n\tif (disabled) {\n\t\treturn '';\n\t}\n\tif (type === 'primary') {\n\t\treturn `background-color: ${COLORS.stroke.warning.lightAlt};`;\n\t}\n\treturn `background-color: rgba(255, 255, 255, 0.1)`;\n};\n\nexport const generateDisabledStyling = (\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n) => {\n\tif (type === 'special') {\n\t\treturn `background-color: ${COLORS.background.base}; border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn `border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\tif (size === 'chip') {\n\t\treturn `background-color: transparent;`;\n\t}\n\tif (type === 'primary' \|\| type === 'destructive') {\n\t\treturn inverse\n\t\t\t? 'background-color: rgba(255,255,255,0.3);'\n\t\t\t: `background-color: ${COLORS.background.inactive};`;\n\t} else if (type === 'secondary') {\n\t\treturn inverse\n\t\t\t? `border: 1px solid rgba(255, 255, 255, 0.5);`\n\t\t\t: `border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\treturn '';\n};\n\nexport const getDashedBorderStyling = (\n\ttype: Type,\n\tsize: Size,\n\tborderColor: string = getBorderColor(type, false),\n) => {\n\treturn `\n\t.line-top {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\theight: 1px;\n\t\twidth: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto right,\n\t\t\t${borderColor},\n\t\t\t${borderColor}\n\t\t\t\t${getLinearGradientValue(size)}\n\t\t);\n\t}\n\t.line-right {\n\t\tposition: absolute;\n\t\tright: 0;\n\t\ttop: 0;\n\t\twidth: 1px;\n\t\theight: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto bottom,\n\t\t\t${borderColor},\n\t\t\t${borderColor}\n\t\t\t\t${getLinearGradientValue(size)}\n\t\t);\n\t}\n\t.line-bottom {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tbottom: 0;\n\t\theight: 1px;\n\t\twidth: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto right,\n\t\t\t${borderColor},\n\t\t\t${borderColor}\n\t\t\t\t${getLinearGradientValue(size)}\n\t\t);\n\t}\n\t.line-left {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\twidth: 1px;\n\t\theight: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto bottom,\n\t\t\t${borderColor},\n\t\t\t${borderColor}\n\t\t\t\t${getLinearGradientValue(size)}\n\t\t);\n\t}\n\t`;\n};\n\nexport const getClickEffect = (type: Type, size: Size, inverse?: boolean) => {\n\tif (type === 'text') {\n\t\treturn `background-color: ${COLORS.background.brandLight};\n\t\t\ttext-decoration-line: underline;\n\t\t\ttext-decoration-color: ${COLORS.content.brand};`;\n\t}\n\tif (type === 'special') {\n\t\treturn `background-color: ${COLORS.background.brandLight}; border: 1px solid ${COLORS.stroke.brandLightAlt};`;\n\t}\n\tif (type === 'secondaryGray' \|\| type === 'tertiaryGray') {\n\t\treturn `background-color: ${COLORS.surface.hovered}; border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\tif (size === 'chip') {\n\t\treturn `border: 1px solid ${COLORS.stroke.brandLightAlt};\n\t\tbackground-color: ${COLORS.background.brandLight};`;\n\t}\n\tif (type === 'primary' \|\| type === 'destructive') {\n\t\tif (inverse) {\n\t\t\treturn `background-color: ${COLORS.background.warning.vibrant} !important;\n\t\t\tbox-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);\n\t\t\t`;\n\t\t}\n\t\treturn 'box-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);';\n\t} else if (\n\t\ttype === 'secondary' \|\|\n\t\ttype === 'tertiary' \|\|\n\t\ttype === 'tertiaryGray' \|\|\n\t\ttype.startsWith('dash')\n\t) {\n\t\treturn inverse\n\t\t\t? `background-color: ${COLORS.background.inverseLight} !important;`\n\t\t\t: `background-color: ${COLORS.background.brandLight};`;\n\t}\n};\nexport const getLoadingBackground = (\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n\tbuttonColor?: string,\n) => {\n\tif (type === 'special') {\n\t\treturn `background-color: ${COLORS.background.brandVeryLight};`;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn `background-color: ${COLORS.surface.subdued};`;\n\t}\n\tif (size === 'chip') {\n\t\treturn `background-color: ${COLORS.background.base};`;\n\t}\n\tif (type === 'primary') {\n\t\tif (buttonColor) {\n\t\t\treturn `background-color: ${getLoadingButtonBackgroundCustom(\n\t\t\t\tbuttonColor,\n\t\t\t\t50,\n\t\t\t)};`;\n\t\t}\n\t\treturn `background-color: ${\n\t\t\tinverse ? COLORS.background.warning.vibrant : COLORS.background.brandLight\n\t\t};`;\n\t}\n\tif (type === 'destructive') {\n\t\treturn `background-color: ${COLORS.background.negative.light};`;\n\t}\n\treturn 'background-color: transparent;';\n};\n\nexport const getLoadingBorder = (type: Type, size: Size, inverse?: boolean) => {\n\tif (type === 'special') {\n\t\treturn `border: 1px solid ${COLORS.stroke.brandLightAlt};`;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn `border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\tif (size === 'chip') {\n\t\treturn `border: none;`;\n\t}\n\tif (type === 'secondary') {\n\t\treturn inverse\n\t\t\t? `border: 1px solid ${COLORS.content.secondary};`\n\t\t\t: `border: 1px solid ${COLORS.stroke.brandLightAlt};`;\n\t}\n\treturn '';\n};\n\nexport const SpinnerColorMap = (type: Type, inverse?: boolean) => {\n\tif (type === 'secondaryGray') return COLORS.content.secondary;\n\tif (inverse) {\n\t\tif (type === 'primary') {\n\t\t\treturn COLORS.content.primary;\n\t\t}\n\t\treturn COLORS.content.primaryInverse;\n\t}\n\tif (type === 'destructive') {\n\t\treturn COLORS.content.negative;\n\t}\n\treturn COLORS.content.brand;\n};\n\nexport const getButtonIconColor = (\n\tsize: Size,\n\ttype: Type,\n\tinverse?: boolean,\n\tdisabled?: boolean,\n\tisLoading?: boolean,\n\tdarkMode?: boolean,\n) => {\n\tif (size === 'chip') {\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t} else if (darkMode) {\n\t\t\treturn COLORS.content.primary;\n\t\t}\n\t\treturn COLORS.content.secondary;\n\t}\n\tif (isLoading) {\n\t\treturn 'transparent';\n\t}\n\tif (type === 'special') {\n\t\treturn disabled ? COLORS.content.inactive : COLORS.background.inverseLight;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn disabled ? COLORS.content.inactive : COLORS.content.secondary;\n\t}\n\tif (type === 'primary' \|\| type === 'destructive') {\n\t\tif (inverse) {\n\t\t\tif (disabled) {\n\t\t\t\treturn 'rgba(255, 255, 255, 0.5)';\n\t\t\t}\n\t\t\treturn COLORS.content.primary;\n\t\t}\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t}\n\t\treturn COLORS.content.primaryInverse;\n\t} else if (type === 'secondary') {\n\t\tif (inverse) {\n\t\t\tif (disabled) {\n\t\t\t\treturn 'rgba(255, 255, 255, 0.5)';\n\t\t\t}\n\t\t\treturn COLORS.content.primaryInverse;\n\t\t}\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t}\n\t\treturn COLORS.content.brand;\n\t} else if (type === 'tertiary') {\n\t\tif (inverse) {\n\t\t\tif (disabled) {\n\t\t\t\treturn 'rgba(255, 255, 255, 0.5)';\n\t\t\t}\n\t\t\treturn COLORS.content.primaryInverse;\n\t\t}\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t}\n\t\treturn COLORS.content.brand;\n\t} else if (type === 'tertiaryGray' \|\| type.startsWith('dash')) {\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t}\n\t\treturn COLORS.content.secondary;\n\t}\n};\n"],"names":["getBackgroundColor","type","size","inverse","darkMode","buttonColor","COLORS","getColor","getDisabledTextColor","getPadding","GetButtonTextComponent","disabled","ButtonRegularAI","ButtonLargeAI","BodySecondary","BodyCaption","ButtonRegular","ButtonLarge","getBorderColor","error","getBorder","version","getLinearGradientValue","getHoverButtonBackgroundCustom","color","percent","num","amt","R","G","B","getLoadingButtonBackgroundCustom","getHoverButtonBackground","getHoverButtonTextDecorationStyle","generateInverseHoverBackground","generateDisabledStyling","getDashedBorderStyling","borderColor","getClickEffect","getLoadingBackground","getLoadingBorder","SpinnerColorMap","getButtonIconColor","isLoading"],"mappings":"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"}
1	+ {"version":3,"file":"themes.js","sources":["../../../../src/components/button/themes.tsx"],"sourcesContent":["import { COLORS } from '@src/constants/Theme';\nimport {\n\tBodyCaption,\n\tBodySecondary,\n\tButtonLarge,\n\tButtonLargeAI,\n\tButtonRegular,\n\tButtonRegularAI,\n} from '../TypographyStyle';\nimport { Size, Type } from './model';\n\nexport const getBackgroundColor = (\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n\tdarkMode?: boolean,\n\tbuttonColor?: string,\n): string => {\n\tif (type === 'special') return COLORS.background.brandVeryLight;\n\tif (type === 'secondaryGray') return 'transparent';\n\n\tif (size === 'chip') {\n\t\tif (type === 'text') {\n\t\t\treturn 'transparent';\n\t\t}\n\t\treturn darkMode ? COLORS.surface.hovered : COLORS.surface.subdued;\n\t}\n\tswitch (type) {\n\t\tcase 'primary':\n\t\t\treturn buttonColor\n\t\t\t\t? buttonColor\n\t\t\t\t: inverse\n\t\t\t\t? COLORS.background.warning.vibrant\n\t\t\t\t: COLORS.background.inverseLight;\n\t\tcase 'destructive':\n\t\t\treturn COLORS.background.negative.vibrant;\n\t\tcase 'tertiary':\n\t\t\treturn 'transparent';\n\t\tdefault:\n\t\t\treturn 'transparent';\n\t}\n};\n\nexport const getColor = (\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n\tdarkMode?: boolean,\n): string => {\n\tif (type === 'special') return COLORS.background.inverseLight;\n\tif (type === 'secondaryGray') return COLORS.content.secondary;\n\n\tif (size === 'chip') {\n\t\tif (type === 'text') {\n\t\t\treturn inverse ? COLORS.content.inactive : COLORS.content.brand;\n\t\t}\n\t\treturn darkMode ? COLORS.content.primary : COLORS.content.secondary;\n\t}\n\tswitch (type) {\n\t\tcase 'primary':\n\t\t\treturn inverse ? COLORS.content.primary : COLORS.content.primaryInverse;\n\t\tcase 'tertiaryGray':\n\t\t\treturn COLORS.content.secondary;\n\t\tcase 'destructive':\n\t\t\treturn COLORS.content.primaryInverse;\n\t\tcase 'dashBold':\n\t\t\treturn COLORS.content.secondary;\n\t\tcase 'dashRegular':\n\t\t\treturn COLORS.content.secondary;\n\t\tcase 'ai':\n\t\t\treturn COLORS.content.ai;\n\t\tdefault:\n\t\t\treturn inverse ? COLORS.content.primaryInverse : COLORS.stroke.brand;\n\t}\n};\n\nexport const getDisabledTextColor = (inverse?: boolean) => {\n\tif (inverse) {\n\t\treturn 'rgba(255, 255, 255, 0.5)';\n\t}\n\treturn COLORS.content.inactive;\n};\n\nexport const getPadding = (type: Type, size: Size) => {\n\tif (type === 'text') {\n\t\treturn '0px';\n\t} else if (size === 'xs') {\n\t\treturn '4px 6px';\n\t} else if (size === 'chip') {\n\t\treturn '4px 8px';\n\t} else if (size === 'small') {\n\t\tswitch (type) {\n\t\t\tcase 'tertiary':\n\t\t\t\treturn '6px 4px';\n\t\t\tcase 'tertiaryGray':\n\t\t\t\treturn '6px 4px';\n\t\t\tdefault:\n\t\t\t\treturn '6px 12px';\n\t\t}\n\t} else if (size === 'medium') {\n\t\tswitch (type) {\n\t\t\tcase 'tertiary':\n\t\t\t\treturn '10px 4px';\n\t\t\tcase 'tertiaryGray':\n\t\t\t\treturn '10px 4px';\n\t\t\tdefault:\n\t\t\t\treturn '10px 12px';\n\t\t}\n\t} else if (size === 'large') {\n\t\tswitch (type) {\n\t\t\tcase 'tertiary':\n\t\t\t\treturn '14px 4px';\n\t\t\tcase 'tertiaryGray':\n\t\t\t\treturn '14px 4px';\n\t\t\tdefault:\n\t\t\t\treturn '14px 12px';\n\t\t}\n\t}\n};\nexport const GetButtonTextComponent = (\n\tsize: Size,\n\ttype: Type,\n\tdisabled?: boolean,\n) => {\n\tif (!disabled && type === 'ai') {\n\t\tif (size === 'small') {\n\t\t\treturn ButtonRegularAI;\n\t\t} else {\n\t\t\treturn ButtonLargeAI;\n\t\t}\n\t}\n\n\tif (type === 'dashRegular') {\n\t\treturn BodySecondary;\n\t}\n\tif (size === 'chip' \|\| size === 'xs') {\n\t\treturn BodyCaption;\n\t} else if (size === 'small') {\n\t\treturn ButtonRegular;\n\t}\n\treturn ButtonLarge;\n};\n\nexport const getBorderColor = (\n\ttype: Type,\n\tinverse?: boolean,\n\terror?: boolean,\n): string => {\n\tif (error) {\n\t\treturn COLORS.stroke.negative.vibrant;\n\t}\n\n\tif (inverse) {\n\t\treturn COLORS.surface.standard;\n\t}\n\tif (type == 'secondary') {\n\t\treturn COLORS.stroke.brand;\n\t}\n\treturn COLORS.content.placeholder;\n};\n\nexport const getBorder = (\n\tversion: '1.0' \| '2.0' \| '3.0',\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n\terror?: boolean,\n): string => {\n\tif (type == 'text') {\n\t\treturn 'border: none;';\n\t}\n\tif (type === 'special') {\n\t\treturn `border: 1px solid ${COLORS.stroke.brandLightAlt};`;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn `border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\tif (size === 'chip') {\n\t\treturn `border: ${version === '2.0' ? 0.5 : 1}px solid ${\n\t\t\tCOLORS.stroke.primary\n\t\t};`;\n\t}\n\tif (inverse) {\n\t\tif (type === 'secondary') {\n\t\t\treturn `border: ${version === '2.0' ? 0.5 : 1}px solid ${getBorderColor(\n\t\t\t\ttype,\n\t\t\t\tinverse,\n\t\t\t\terror,\n\t\t\t)};`;\n\t\t}\n\t\treturn 'border: none;';\n\t}\n\n\tif (type === 'secondary') {\n\t\treturn `border: ${version === '2.0' ? 0.5 : 1}px solid ${getBorderColor(\n\t\t\ttype,\n\t\t\tfalse,\n\t\t\terror,\n\t\t)};`;\n\t}\n\treturn 'border: none;';\n};\n\nexport const getLinearGradientValue = (size: Size): string => {\n\tif (size === 'medium') {\n\t\treturn `5px,\n\t\ttransparent 5px,\n\t\ttransparent 10px`;\n\t}\n\treturn `6px,\n\t\ttransparent 6px,\n\t\ttransparent 12px`;\n};\n\n/*\n Adjusts the brightness of a given hex color by a specified percentage.\n * Below function is used to generate a hover effect for button backgrounds.\n \n @param {string} color - The hex color code to be adjusted (e.g., \"#ff0000\").\n * @param {number} percent - The percentage by which to darken the color. Positive values darken the color.\n * @returns {string} - The adjusted hex color code.\n \n @example\n * // Darken the color #ff0000 (red) by 10%\n * const darkerRed = getHoverButtonBackgroundCustom(\"#ff0000\", 10);\n * console.log(darkerRed); // Output might be \"#e60000\"\n /\n\nexport const getHoverButtonBackgroundCustom = (\n\tcolor: string,\n\tpercent: number,\n) => {\n\tconst num = parseInt(color.replace('#', ''), 16),\n\t\tamt = Math.round(2.55 percent),\n\t\tR = (num >> 16) - amt,\n\t\tG = ((num >> 8) & 0x00ff) - amt,\n\t\tB = (num & 0x0000ff) - amt;\n\n\treturn `#${(\n\t\t0x1000000 +\n\t\t(Math.max(R, 0) << 16) +\n\t\t(Math.max(G, 0) << 8) +\n\t\tMath.max(B, 0)\n\t)\n\t\t.toString(16)\n\t\t.slice(1)}`;\n};\n\n/*\n Generates a new color by adjusting the brightness of the given color by a specified percentage.\n \n @param color - The original color in hexadecimal format (e.g., \"#RRGGBB\").\n * @param percent - The percentage to adjust the brightness. Positive values will lighten the color, while negative values will darken it.\n * @returns The new color in hexadecimal format after adjusting the brightness.\n \n @example\n * // Lighten the color by 20%\n * const newColor = getLoadingButtonBackgroundCustom(\"#ff0000\", 20); // \"#ff3333\"\n \n @example\n * // Darken the color by 10%\n * const newColor = getLoadingButtonBackgroundCustom(\"#00ff00\", -10); // \"#00e600\"\n /\nexport const getLoadingButtonBackgroundCustom = (\n\tcolor: string,\n\tpercent: number,\n) => {\n\tconst num = parseInt(color.replace('#', ''), 16),\n\t\tamt = Math.round(2.55 percent),\n\t\tR = (num >> 16) + amt,\n\t\tG = ((num >> 8) & 0x00ff) + amt,\n\t\tB = (num & 0x0000ff) + amt;\n\n\treturn `#${(\n\t\t0x1000000 +\n\t\t(Math.min(R, 255) << 16) +\n\t\t(Math.min(G, 255) << 8) +\n\t\tMath.min(B, 255)\n\t)\n\t\t.toString(16)\n\t\t.slice(1)}`;\n};\n\nexport const getHoverButtonBackground = (type: Type, inverse?: boolean) => {\n\tif (type === 'ai') {\n\t\treturn `background: ${COLORS.surface.aiLight};`;\n\t}\n\n\tif (type === 'text') {\n\t\treturn `background-color:transparent;`;\n\t}\n\tif (type === 'special' \|\| type === 'secondaryGray') {\n\t\treturn '';\n\t}\n\tif (!inverse && type !== 'primary') {\n\t\treturn `background-color: #000000;\n\t\t\t\topacity: 0.03;`;\n\t}\n\n\treturn ``;\n};\n\nexport const getHoverButtonTextDecorationStyle = (\n\ttype: Type,\n\tdisabled?: boolean,\n) => {\n\tif (disabled) {\n\t\treturn '';\n\t}\n\treturn `text-decoration-line: underline;\n\t\t\ttext-decoration-color: ${COLORS.content.brand};`;\n};\n\nexport const generateInverseHoverBackground = (\n\ttype: Type,\n\tdisabled?: boolean,\n) => {\n\tif (disabled) {\n\t\treturn '';\n\t}\n\tif (type === 'primary') {\n\t\treturn `background-color: ${COLORS.stroke.warning.lightAlt};`;\n\t}\n\treturn `background-color: rgba(255, 255, 255, 0.1)`;\n};\n\nexport const generateDisabledStyling = (\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n) => {\n\tif (type === 'special') {\n\t\treturn `background-color: ${COLORS.background.base}; border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn `border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\tif (size === 'chip') {\n\t\treturn `background-color: transparent;`;\n\t}\n\tif (type === 'primary' \|\| type === 'destructive') {\n\t\treturn inverse\n\t\t\t? 'background-color: rgba(255,255,255,0.3);'\n\t\t\t: `background-color: ${COLORS.background.inactive};`;\n\t} else if (type === 'secondary') {\n\t\treturn inverse\n\t\t\t? `border: 1px solid rgba(255, 255, 255, 0.5);`\n\t\t\t: `border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\treturn '';\n};\n\nexport const getDashedBorderStyling = (\n\ttype: Type,\n\tsize: Size,\n\tborderColor: string = getBorderColor(type, false),\n) => {\n\treturn `\n\t.line-top {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\theight: 1px;\n\t\twidth: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto right,\n\t\t\t${borderColor},\n\t\t\t${borderColor}\n\t\t\t\t${getLinearGradientValue(size)}\n\t\t);\n\t}\n\t.line-right {\n\t\tposition: absolute;\n\t\tright: 0;\n\t\ttop: 0;\n\t\twidth: 1px;\n\t\theight: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto bottom,\n\t\t\t${borderColor},\n\t\t\t${borderColor}\n\t\t\t\t${getLinearGradientValue(size)}\n\t\t);\n\t}\n\t.line-bottom {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tbottom: 0;\n\t\theight: 1px;\n\t\twidth: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto right,\n\t\t\t${borderColor},\n\t\t\t${borderColor}\n\t\t\t\t${getLinearGradientValue(size)}\n\t\t);\n\t}\n\t.line-left {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\twidth: 1px;\n\t\theight: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto bottom,\n\t\t\t${borderColor},\n\t\t\t${borderColor}\n\t\t\t\t${getLinearGradientValue(size)}\n\t\t);\n\t}\n\t`;\n};\n\nexport const getClickEffect = (type: Type, size: Size, inverse?: boolean) => {\n\tif (type === 'text') {\n\t\treturn `background-color: ${COLORS.background.brandLight};\n\t\t\ttext-decoration-line: underline;\n\t\t\ttext-decoration-color: ${COLORS.content.brand};`;\n\t}\n\tif (type === 'special') {\n\t\treturn `background-color: ${COLORS.background.brandLight}; border: 1px solid ${COLORS.stroke.brandLightAlt};`;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn `background-color: ${COLORS.surface.hovered}; border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\tif (size === 'chip') {\n\t\treturn `border: 1px solid ${COLORS.stroke.brandLightAlt};\n\t\tbackground-color: ${COLORS.background.brandLight};`;\n\t}\n\tif (type === 'primary' \|\| type === 'destructive') {\n\t\tif (inverse) {\n\t\t\treturn `background-color: ${COLORS.background.warning.vibrant} !important;\n\t\t\tbox-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);\n\t\t\t`;\n\t\t}\n\t\treturn 'box-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);';\n\t} else if (\n\t\ttype === 'secondary' \|\|\n\t\ttype === 'tertiary' \|\|\n\t\ttype === 'tertiaryGray' \|\|\n\t\ttype.startsWith('dash')\n\t) {\n\t\treturn inverse\n\t\t\t? `background-color: ${COLORS.background.inverseLight} !important;`\n\t\t\t: `background-color: ${COLORS.background.brandLight};`;\n\t}\n};\nexport const getLoadingBackground = (\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n\tbuttonColor?: string,\n) => {\n\tif (type === 'special') {\n\t\treturn `background-color: ${COLORS.background.brandVeryLight};`;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn `background-color: ${COLORS.surface.subdued};`;\n\t}\n\tif (size === 'chip') {\n\t\treturn `background-color: ${COLORS.background.base};`;\n\t}\n\tif (type === 'primary') {\n\t\tif (buttonColor) {\n\t\t\treturn `background-color: ${getLoadingButtonBackgroundCustom(\n\t\t\t\tbuttonColor,\n\t\t\t\t50,\n\t\t\t)};`;\n\t\t}\n\t\treturn `background-color: ${\n\t\t\tinverse ? COLORS.background.warning.vibrant : COLORS.background.brandLight\n\t\t};`;\n\t}\n\tif (type === 'destructive') {\n\t\treturn `background-color: ${COLORS.background.negative.light};`;\n\t}\n\treturn 'background-color: transparent;';\n};\n\nexport const getLoadingBorder = (type: Type, size: Size, inverse?: boolean) => {\n\tif (type === 'special') {\n\t\treturn `border: 1px solid ${COLORS.stroke.brandLightAlt};`;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn `border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\tif (size === 'chip') {\n\t\treturn `border: none;`;\n\t}\n\tif (type === 'secondary') {\n\t\treturn inverse\n\t\t\t? `border: 1px solid ${COLORS.content.secondary};`\n\t\t\t: `border: 1px solid ${COLORS.stroke.brandLightAlt};`;\n\t}\n\treturn '';\n};\n\nexport const SpinnerColorMap = (type: Type, inverse?: boolean) => {\n\tif (type === 'secondaryGray') return COLORS.content.secondary;\n\tif (inverse) {\n\t\tif (type === 'primary') {\n\t\t\treturn COLORS.content.primary;\n\t\t}\n\t\treturn COLORS.content.primaryInverse;\n\t}\n\tif (type === 'destructive') {\n\t\treturn COLORS.content.negative;\n\t}\n\treturn COLORS.content.brand;\n};\n\nexport const getButtonIconColor = (\n\tsize: Size,\n\ttype: Type,\n\tinverse?: boolean,\n\tdisabled?: boolean,\n\tisLoading?: boolean,\n\tdarkMode?: boolean,\n) => {\n\tif (size === 'chip') {\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t} else if (darkMode) {\n\t\t\treturn COLORS.content.primary;\n\t\t}\n\t\treturn COLORS.content.secondary;\n\t}\n\tif (isLoading) {\n\t\treturn 'transparent';\n\t}\n\tif (type === 'special') {\n\t\treturn disabled ? COLORS.content.inactive : COLORS.background.inverseLight;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn disabled ? COLORS.content.inactive : COLORS.content.secondary;\n\t}\n\tif (type === 'primary' \|\| type === 'destructive') {\n\t\tif (inverse) {\n\t\t\tif (disabled) {\n\t\t\t\treturn 'rgba(255, 255, 255, 0.5)';\n\t\t\t}\n\t\t\treturn COLORS.content.primary;\n\t\t}\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t}\n\t\treturn COLORS.content.primaryInverse;\n\t} else if (type === 'secondary') {\n\t\tif (inverse) {\n\t\t\tif (disabled) {\n\t\t\t\treturn 'rgba(255, 255, 255, 0.5)';\n\t\t\t}\n\t\t\treturn COLORS.content.primaryInverse;\n\t\t}\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t}\n\t\treturn COLORS.content.brand;\n\t} else if (type === 'tertiary') {\n\t\tif (inverse) {\n\t\t\tif (disabled) {\n\t\t\t\treturn 'rgba(255, 255, 255, 0.5)';\n\t\t\t}\n\t\t\treturn COLORS.content.primaryInverse;\n\t\t}\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t}\n\t\treturn COLORS.content.brand;\n\t} else if (type === 'tertiaryGray' \|\| type.startsWith('dash')) {\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t}\n\t\treturn COLORS.content.secondary;\n\t}\n};\n"],"names":["getBackgroundColor","type","size","inverse","darkMode","buttonColor","COLORS","getColor","getDisabledTextColor","getPadding","GetButtonTextComponent","disabled","ButtonRegularAI","ButtonLargeAI","BodySecondary","BodyCaption","ButtonRegular","ButtonLarge","getBorderColor","error","getBorder","version","getLinearGradientValue","getHoverButtonBackgroundCustom","color","percent","num","amt","R","G","B","getLoadingButtonBackgroundCustom","getHoverButtonBackground","getHoverButtonTextDecorationStyle","generateInverseHoverBackground","generateDisabledStyling","getDashedBorderStyling","borderColor","getClickEffect","getLoadingBackground","getLoadingBorder","SpinnerColorMap","getButtonIconColor","isLoading"],"mappings":"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"}

package/dist/esm/components/datePicker/DatePicker.js CHANGED Viewed

@@ -1,11 +1,11 @@
-import { jsxs as S, jsx as m, Fragment as v } from "react/jsx-runtime";
+import { jsxs as S, jsx as r, Fragment as v } from "react/jsx-runtime";
 import { useState as o, useEffect as w } from "react";
 import A from "react-calendar";
-import { PickerContainer as H, DatePickerTippyOverride as N } from "./DatePicker.styled.js";
-import { TimePicker as L } from "./TimePicker.js";
-import { Button as $ } from "../button/Button.js";
-const E = (e) => {
-  const [i, l] = o(), [s, u] = o("00:00"), [r, f] = o("23:59");
+import { PickerContainer as H } from "./DatePicker.styled.js";
+import { TimePicker as N } from "./TimePicker.js";
+import { Button as L } from "../button/Button.js";
+const B = (e) => {
+  const [i, l] = o(), [s, u] = o("00:00"), [m, f] = o("23:59");
   w(() => {
     if (e.selectedDates) {
       if (l(e.selectedDates), e.showTimePicker) {
@@ -31,8 +31,8 @@ const E = (e) => {
       const [n, a] = s.split(":").map(Number);
       t[0].setHours(n, a, 0, 0);
     }
-    if (e.showTimePicker && r) {
-      const [n, a] = r.split(":").map(Number);
+    if (e.showTimePicker && m) {
+      const [n, a] = m.split(":").map(Number);
       t[1].setHours(n, a, 0, 0);
     }
     e.showTimePicker || e.onSelectRange?.(t[0], t[1]), l([t[0], t[1]]);
@@ -51,19 +51,19 @@ const E = (e) => {
     }
   }
   function R(t) {
-    u(t), d(t, r);
+    u(t), d(t, m);
   }
   function y(t) {
     f(t), d(s, t);
   }
-  function P(t) {
+  function x(t) {
     if (e.showTimePicker && s) {
       const [n, a] = s.split(":").map(Number);
       t.setHours(n, a, 0, 0);
     }
     e.showTimePicker || e.onSelectDate?.(t), T(t);
   }
-  const x = ({ date: t, view: n }) => {
+  const P = ({ date: t, view: n }) => {
     if (!Array.isArray(i)) return !1;
     const [a, c] = i;
     if (a && !c && h !== null) {
@@ -86,14 +86,13 @@ const E = (e) => {
     e.selectRange && Array.isArray(i) && i[0] && i[1] ? e.onSelectRange?.(i[0], i[1]) : !e.selectRange && g && e.onSelectDate?.(g);
   }
   return /* @__PURE__ */ S(H, { selectRange: e.selectRange, children: [
-    /* @__PURE__ */ m(N, {}),
-    /* @__PURE__ */ m(
+    /* @__PURE__ */ r(
       A,
       {
         onChange: (t) => {
-          e.selectRange && e.onSelectRange ? k(t) : e.onSelectDate && P(t);
+          e.selectRange && e.onSelectRange ? k(t) : e.onSelectDate && x(t);
         },
-        tileDisabled: x,
+        tileDisabled: P,
         onClickDay: C,
         value: e.selectRange ? i : g,
         selectRange: e.selectRange,
@@ -103,17 +102,17 @@ const E = (e) => {
       "bik-calendar"
     ),
     e.showTimePicker && e.selectRange && /* @__PURE__ */ S(v, { children: [
-      /* @__PURE__ */ m(
-        L,
+      /* @__PURE__ */ r(
+        N,
         {
           fromTime: s,
-          toTime: r,
+          toTime: m,
           onFromTimeChange: R,
           onToTimeChange: y,
           timeInterval: e.timeInterval
         }
       ),
-      /* @__PURE__ */ m(
+      /* @__PURE__ */ r(
         "div",
         {
           className: "date-picker-save-button-container",
@@ -122,8 +121,8 @@ const E = (e) => {
             justifyContent: "flex-end",
             padding: "16px"
           },
-          children: /* @__PURE__ */ m(
-            $,
+          children: /* @__PURE__ */ r(
+            L,
             {
               buttonType: "primary",
               size: "small",
@@ -137,6 +136,6 @@ const E = (e) => {
   ] });
 };
 export {
-  E as DatePicker
+  B as DatePicker
 };
 //# sourceMappingURL=DatePicker.js.map

package/dist/esm/components/datePicker/DatePicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DatePicker.js","sources":["../../../../src/components/datePicker/DatePicker.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport Calendar from 'react-calendar';\nimport { Button } from '@src/components/button';\nimport {\n\tDatePickerTippyOverride,\n\tPickerContainer,\n} from '@src/components/datePicker/DatePicker.styled';\nimport { TimePicker } from '@src/components/datePicker/TimePicker';\n\nexport type DatePickerProps = {\n\tselectRange: boolean;\n\tselectedDates?: Date[]; // for range selection\n\tselectedDate?: Date; // for single date selection\n\tonSelectRange?: (startDate: Date, endDate: Date) => void; // for range selection\n\tonSelectDate?: (date: Date) => void; // for single date selection\n\tminDate?: Date;\n\tmaxDate?: Date;\n\tmaxRangeLimit?: number \| null;\n\tshowTimePicker?: boolean;\n\ttimeInterval?: number; // in minutes, default 30\n};\n\nexport const DatePicker: React.FC<DatePickerProps> = (props) => {\n\tconst [selectedDates, setSelectedDates] = useState<\n\t\tArray<Date \| null> \| undefined\n\t>();\n\tconst [fromTime, setFromTime] = useState('00:00');\n\tconst [toTime, setToTime] = useState('23:59');\n\n\tuseEffect(() => {\n\t\tif (props.selectedDates) {\n\t\t\tsetSelectedDates(props.selectedDates);\n\t\t\t// Extract time from selectedDates if showTimePicker is enabled\n\t\t\tif (props.showTimePicker) {\n\t\t\t\tif (props.selectedDates[0]) {\n\t\t\t\t\tconst hours = props.selectedDates[0].getHours();\n\t\t\t\t\tconst minutes = props.selectedDates[0].getMinutes();\n\t\t\t\t\tsetFromTime(\n\t\t\t\t\t\t`${hours.toString().padStart(2, '0')}:${minutes\n\t\t\t\t\t\t\t.toString()\n\t\t\t\t\t\t\t.padStart(2, '0')}`,\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t\tif (props.selectedDates[1]) {\n\t\t\t\t\tconst hours = props.selectedDates[1].getHours();\n\t\t\t\t\tconst minutes = props.selectedDates[1].getMinutes();\n\t\t\t\t\tsetToTime(\n\t\t\t\t\t\t`${hours.toString().padStart(2, '0')}:${minutes\n\t\t\t\t\t\t\t.toString()\n\t\t\t\t\t\t\t.padStart(2, '0')}`,\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\t\t} else {\n\t\t\tsetSelectedDates([null, null]);\n\t\t\t// Reset time pickers to default when no dates are selected\n\t\t\tif (props.showTimePicker) {\n\t\t\t\tsetFromTime('00:00');\n\t\t\t\tsetToTime('23:59');\n\t\t\t}\n\t\t}\n\t}, [props.selectedDates, props.showTimePicker]);\n\n\tconst [selectedDate, setSelectedDate] = useState(props.selectedDate);\n\tconst maxRangeLimit =\n\t\tprops.maxRangeLimit === null\n\t\t\t? null\n\t\t\t: props.maxRangeLimit === undefined\n\t\t\t? 180\n\t\t\t: props.maxRangeLimit;\n\n\tfunction handleRangeSelection(date: Date[]) {\n\t\t// Apply time to dates if time picker is enabled\n\t\tif (props.showTimePicker && fromTime) {\n\t\t\tconst [hours, minutes] = fromTime.split(':').map(Number);\n\t\t\tdate[0].setHours(hours, minutes, 0, 0);\n\t\t}\n\n\t\tif (props.showTimePicker && toTime) {\n\t\t\tconst [hours, minutes] = toTime.split(':').map(Number);\n\t\t\tdate[1].setHours(hours, minutes, 0, 0);\n\t\t}\n\n\t\t// Only trigger callback if time picker is not shown\n\t\tif (!props.showTimePicker) {\n\t\t\tprops.onSelectRange?.(date[0], date[1]);\n\t\t}\n\t\tsetSelectedDates([date[0], date[1]]);\n\t}\n\n\tfunction handleTimeChange(newFromTime?: string, newToTime?: string) {\n\t\tif (Array.isArray(selectedDates) && selectedDates[0] && selectedDates[1]) {\n\t\t\t// Apply time to existing date objects\n\t\t\tif (newFromTime) {\n\t\t\t\tconst [hours, minutes] = newFromTime.split(':').map(Number);\n\t\t\t\tselectedDates[0].setHours(hours, minutes, 0, 0);\n\t\t\t}\n\n\t\t\tif (newToTime) {\n\t\t\t\tconst [hours, minutes] = newToTime.split(':').map(Number);\n\t\t\t\tselectedDates[1].setHours(hours, minutes, 0, 0);\n\t\t\t}\n\n\t\t\t// Only trigger callback if time picker is not shown (shouldn't happen, but for safety)\n\t\t\tif (!props.showTimePicker) {\n\t\t\t\tprops.onSelectRange?.(selectedDates[0], selectedDates[1]);\n\t\t\t}\n\t\t}\n\t}\n\n\tfunction handleFromTimeChange(time: string) {\n\t\tsetFromTime(time);\n\t\thandleTimeChange(time, toTime);\n\t}\n\n\tfunction handleToTimeChange(time: string) {\n\t\tsetToTime(time);\n\t\thandleTimeChange(fromTime, time);\n\t}\n\n\tfunction handleSingleDateSelection(date: Date) {\n\t\t// Apply time if time picker is enabled\n\t\tif (props.showTimePicker && fromTime) {\n\t\t\tconst [hours, minutes] = fromTime.split(':').map(Number);\n\t\t\tdate.setHours(hours, minutes, 0, 0);\n\t\t}\n\n\t\t// Only trigger callback if time picker is not shown\n\t\tif (!props.showTimePicker) {\n\t\t\tprops.onSelectDate?.(date);\n\t\t}\n\t\tsetSelectedDate(date);\n\t}\n\n\tconst tileDisabled = ({ date, view }) => {\n\t\tif (!Array.isArray(selectedDates)) return false;\n\n\t\tconst [start, end] = selectedDates;\n\n\t\tif (start && !end && maxRangeLimit !== null) {\n\t\t\tconst diffInDays = Math.round(\n\t\t\t\t(date - (start as unknown as number)) / (1000 * 60 * 60 * 24),\n\t\t\t);\n\n\t\t\treturn (\n\t\t\t\tview === 'month' &&\n\t\t\t\t(diffInDays < -maxRangeLimit \|\| diffInDays > maxRangeLimit)\n\t\t\t);\n\t\t}\n\n\t\treturn false;\n\t};\n\n\tfunction onClickDay(date: Date) {\n\t\tif (!Array.isArray(selectedDates)) {\n\t\t\tsetSelectedDates([date, null]);\n\t\t\treturn;\n\t\t}\n\n\t\tconst [start, end] = selectedDates;\n\t\t// Check if the start date is not selected yet\n\t\tif (!start) {\n\t\t\tsetSelectedDates([date, null]);\n\t\t}\n\n\t\t// Check if only the start date is selected\n\t\telse if (start && !end) {\n\t\t\tsetSelectedDates([start, date]);\n\t\t} // Reset the range if both start and end dates are already selected\n\t\telse {\n\t\t\tsetSelectedDates([date, null]);\n\t\t}\n\t}\n\n\tfunction handleSaveClick() {\n\t\tif (\n\t\t\tprops.selectRange &&\n\t\t\tArray.isArray(selectedDates) &&\n\t\t\tselectedDates[0] &&\n\t\t\tselectedDates[1]\n\t\t) {\n\t\t\tprops.onSelectRange?.(selectedDates[0], selectedDates[1]);\n\t\t} else if (!props.selectRange && selectedDate) {\n\t\t\tprops.onSelectDate?.(selectedDate);\n\t\t}\n\t}\n\n\treturn (\n\t\t<PickerContainer selectRange={props.selectRange}>\n\t\t\t<DatePickerTippyOverride />\n\t\t\t<Calendar\n\t\t\t\tonChange={(date) => {\n\t\t\t\t\tif (props.selectRange && props.onSelectRange) {\n\t\t\t\t\t\thandleRangeSelection(date);\n\t\t\t\t\t} else if (props.onSelectDate) {\n\t\t\t\t\t\thandleSingleDateSelection(date);\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t\ttileDisabled={tileDisabled}\n\t\t\t\tonClickDay={onClickDay}\n\t\t\t\tvalue={(props.selectRange ? selectedDates : selectedDate) as Date}\n\t\t\t\tselectRange={props.selectRange}\n\t\t\t\tminDate={props.minDate}\n\t\t\t\tmaxDate={props.maxDate}\n\t\t\t\tkey={'bik-calendar'}\n\t\t\t/>\n\t\t\t{props.showTimePicker && props.selectRange && (\n\t\t\t\t<>\n\t\t\t\t\t<TimePicker\n\t\t\t\t\t\tfromTime={fromTime}\n\t\t\t\t\t\ttoTime={toTime}\n\t\t\t\t\t\tonFromTimeChange={handleFromTimeChange}\n\t\t\t\t\t\tonToTimeChange={handleToTimeChange}\n\t\t\t\t\t\ttimeInterval={props.timeInterval}\n\t\t\t\t\t/>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName=\"date-picker-save-button-container\"\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\tjustifyContent: 'flex-end',\n\t\t\t\t\t\t\tpadding: '16px',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tbuttonType=\"primary\"\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\tbuttonText=\"Save\"\n\t\t\t\t\t\t\tonClick={handleSaveClick}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</PickerContainer>\n\t);\n};\n"],"names":["DatePicker","props","selectedDates","setSelectedDates","useState","fromTime","setFromTime","toTime","setToTime","useEffect","hours","minutes","selectedDate","setSelectedDate","maxRangeLimit","handleRangeSelection","date","handleTimeChange","newFromTime","newToTime","handleFromTimeChange","time","handleToTimeChange","handleSingleDateSelection","tileDisabled","view","start","end","diffInDays","onClickDay","handleSaveClick","jsxs","PickerContainer","jsx","DatePickerTippyOverride","Calendar","Fragment","TimePicker","Button"],"mappings":"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"}
1	+ {"version":3,"file":"DatePicker.js","sources":["../../../../src/components/datePicker/DatePicker.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport Calendar from 'react-calendar';\nimport { Button } from '@src/components/button';\nimport { PickerContainer } from '@src/components/datePicker/DatePicker.styled';\nimport { TimePicker } from '@src/components/datePicker/TimePicker';\n\nexport type DatePickerProps = {\n\tselectRange: boolean;\n\tselectedDates?: Date[]; // for range selection\n\tselectedDate?: Date; // for single date selection\n\tonSelectRange?: (startDate: Date, endDate: Date) => void; // for range selection\n\tonSelectDate?: (date: Date) => void; // for single date selection\n\tminDate?: Date;\n\tmaxDate?: Date;\n\tmaxRangeLimit?: number \| null;\n\tshowTimePicker?: boolean;\n\ttimeInterval?: number; // in minutes, default 30\n};\n\nexport const DatePicker: React.FC<DatePickerProps> = (props) => {\n\tconst [selectedDates, setSelectedDates] = useState<\n\t\tArray<Date \| null> \| undefined\n\t>();\n\tconst [fromTime, setFromTime] = useState('00:00');\n\tconst [toTime, setToTime] = useState('23:59');\n\n\tuseEffect(() => {\n\t\tif (props.selectedDates) {\n\t\t\tsetSelectedDates(props.selectedDates);\n\t\t\t// Extract time from selectedDates if showTimePicker is enabled\n\t\t\tif (props.showTimePicker) {\n\t\t\t\tif (props.selectedDates[0]) {\n\t\t\t\t\tconst hours = props.selectedDates[0].getHours();\n\t\t\t\t\tconst minutes = props.selectedDates[0].getMinutes();\n\t\t\t\t\tsetFromTime(\n\t\t\t\t\t\t`${hours.toString().padStart(2, '0')}:${minutes\n\t\t\t\t\t\t\t.toString()\n\t\t\t\t\t\t\t.padStart(2, '0')}`,\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t\tif (props.selectedDates[1]) {\n\t\t\t\t\tconst hours = props.selectedDates[1].getHours();\n\t\t\t\t\tconst minutes = props.selectedDates[1].getMinutes();\n\t\t\t\t\tsetToTime(\n\t\t\t\t\t\t`${hours.toString().padStart(2, '0')}:${minutes\n\t\t\t\t\t\t\t.toString()\n\t\t\t\t\t\t\t.padStart(2, '0')}`,\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\t\t} else {\n\t\t\tsetSelectedDates([null, null]);\n\t\t\t// Reset time pickers to default when no dates are selected\n\t\t\tif (props.showTimePicker) {\n\t\t\t\tsetFromTime('00:00');\n\t\t\t\tsetToTime('23:59');\n\t\t\t}\n\t\t}\n\t}, [props.selectedDates, props.showTimePicker]);\n\n\tconst [selectedDate, setSelectedDate] = useState(props.selectedDate);\n\tconst maxRangeLimit =\n\t\tprops.maxRangeLimit === null\n\t\t\t? null\n\t\t\t: props.maxRangeLimit === undefined\n\t\t\t? 180\n\t\t\t: props.maxRangeLimit;\n\n\tfunction handleRangeSelection(date: Date[]) {\n\t\t// Apply time to dates if time picker is enabled\n\t\tif (props.showTimePicker && fromTime) {\n\t\t\tconst [hours, minutes] = fromTime.split(':').map(Number);\n\t\t\tdate[0].setHours(hours, minutes, 0, 0);\n\t\t}\n\n\t\tif (props.showTimePicker && toTime) {\n\t\t\tconst [hours, minutes] = toTime.split(':').map(Number);\n\t\t\tdate[1].setHours(hours, minutes, 0, 0);\n\t\t}\n\n\t\t// Only trigger callback if time picker is not shown\n\t\tif (!props.showTimePicker) {\n\t\t\tprops.onSelectRange?.(date[0], date[1]);\n\t\t}\n\t\tsetSelectedDates([date[0], date[1]]);\n\t}\n\n\tfunction handleTimeChange(newFromTime?: string, newToTime?: string) {\n\t\tif (Array.isArray(selectedDates) && selectedDates[0] && selectedDates[1]) {\n\t\t\t// Apply time to existing date objects\n\t\t\tif (newFromTime) {\n\t\t\t\tconst [hours, minutes] = newFromTime.split(':').map(Number);\n\t\t\t\tselectedDates[0].setHours(hours, minutes, 0, 0);\n\t\t\t}\n\n\t\t\tif (newToTime) {\n\t\t\t\tconst [hours, minutes] = newToTime.split(':').map(Number);\n\t\t\t\tselectedDates[1].setHours(hours, minutes, 0, 0);\n\t\t\t}\n\n\t\t\t// Only trigger callback if time picker is not shown (shouldn't happen, but for safety)\n\t\t\tif (!props.showTimePicker) {\n\t\t\t\tprops.onSelectRange?.(selectedDates[0], selectedDates[1]);\n\t\t\t}\n\t\t}\n\t}\n\n\tfunction handleFromTimeChange(time: string) {\n\t\tsetFromTime(time);\n\t\thandleTimeChange(time, toTime);\n\t}\n\n\tfunction handleToTimeChange(time: string) {\n\t\tsetToTime(time);\n\t\thandleTimeChange(fromTime, time);\n\t}\n\n\tfunction handleSingleDateSelection(date: Date) {\n\t\t// Apply time if time picker is enabled\n\t\tif (props.showTimePicker && fromTime) {\n\t\t\tconst [hours, minutes] = fromTime.split(':').map(Number);\n\t\t\tdate.setHours(hours, minutes, 0, 0);\n\t\t}\n\n\t\t// Only trigger callback if time picker is not shown\n\t\tif (!props.showTimePicker) {\n\t\t\tprops.onSelectDate?.(date);\n\t\t}\n\t\tsetSelectedDate(date);\n\t}\n\n\tconst tileDisabled = ({ date, view }) => {\n\t\tif (!Array.isArray(selectedDates)) return false;\n\n\t\tconst [start, end] = selectedDates;\n\n\t\tif (start && !end && maxRangeLimit !== null) {\n\t\t\tconst diffInDays = Math.round(\n\t\t\t\t(date - (start as unknown as number)) / (1000 * 60 * 60 * 24),\n\t\t\t);\n\n\t\t\treturn (\n\t\t\t\tview === 'month' &&\n\t\t\t\t(diffInDays < -maxRangeLimit \|\| diffInDays > maxRangeLimit)\n\t\t\t);\n\t\t}\n\n\t\treturn false;\n\t};\n\n\tfunction onClickDay(date: Date) {\n\t\tif (!Array.isArray(selectedDates)) {\n\t\t\tsetSelectedDates([date, null]);\n\t\t\treturn;\n\t\t}\n\n\t\tconst [start, end] = selectedDates;\n\t\t// Check if the start date is not selected yet\n\t\tif (!start) {\n\t\t\tsetSelectedDates([date, null]);\n\t\t}\n\n\t\t// Check if only the start date is selected\n\t\telse if (start && !end) {\n\t\t\tsetSelectedDates([start, date]);\n\t\t} // Reset the range if both start and end dates are already selected\n\t\telse {\n\t\t\tsetSelectedDates([date, null]);\n\t\t}\n\t}\n\n\tfunction handleSaveClick() {\n\t\tif (\n\t\t\tprops.selectRange &&\n\t\t\tArray.isArray(selectedDates) &&\n\t\t\tselectedDates[0] &&\n\t\t\tselectedDates[1]\n\t\t) {\n\t\t\tprops.onSelectRange?.(selectedDates[0], selectedDates[1]);\n\t\t} else if (!props.selectRange && selectedDate) {\n\t\t\tprops.onSelectDate?.(selectedDate);\n\t\t}\n\t}\n\n\treturn (\n\t\t<PickerContainer selectRange={props.selectRange}>\n\t\t\t<Calendar\n\t\t\t\tonChange={(date) => {\n\t\t\t\t\tif (props.selectRange && props.onSelectRange) {\n\t\t\t\t\t\thandleRangeSelection(date);\n\t\t\t\t\t} else if (props.onSelectDate) {\n\t\t\t\t\t\thandleSingleDateSelection(date);\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t\ttileDisabled={tileDisabled}\n\t\t\t\tonClickDay={onClickDay}\n\t\t\t\tvalue={(props.selectRange ? selectedDates : selectedDate) as Date}\n\t\t\t\tselectRange={props.selectRange}\n\t\t\t\tminDate={props.minDate}\n\t\t\t\tmaxDate={props.maxDate}\n\t\t\t\tkey={'bik-calendar'}\n\t\t\t/>\n\t\t\t{props.showTimePicker && props.selectRange && (\n\t\t\t\t<>\n\t\t\t\t\t<TimePicker\n\t\t\t\t\t\tfromTime={fromTime}\n\t\t\t\t\t\ttoTime={toTime}\n\t\t\t\t\t\tonFromTimeChange={handleFromTimeChange}\n\t\t\t\t\t\tonToTimeChange={handleToTimeChange}\n\t\t\t\t\t\ttimeInterval={props.timeInterval}\n\t\t\t\t\t/>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName=\"date-picker-save-button-container\"\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\tjustifyContent: 'flex-end',\n\t\t\t\t\t\t\tpadding: '16px',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tbuttonType=\"primary\"\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\tbuttonText=\"Save\"\n\t\t\t\t\t\t\tonClick={handleSaveClick}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</PickerContainer>\n\t);\n};\n"],"names":["DatePicker","props","selectedDates","setSelectedDates","useState","fromTime","setFromTime","toTime","setToTime","useEffect","hours","minutes","selectedDate","setSelectedDate","maxRangeLimit","handleRangeSelection","date","handleTimeChange","newFromTime","newToTime","handleFromTimeChange","time","handleToTimeChange","handleSingleDateSelection","tileDisabled","view","start","end","diffInDays","onClickDay","handleSaveClick","jsxs","PickerContainer","jsx","Calendar","Fragment","TimePicker","Button"],"mappings":";;;;;;AAmBO,MAAMA,IAAwC,CAACC,MAAU;AAC/D,QAAM,CAACC,GAAeC,CAAgB,IAAIC,EAAA,GAGpC,CAACC,GAAUC,CAAW,IAAIF,EAAS,OAAO,GAC1C,CAACG,GAAQC,CAAS,IAAIJ,EAAS,OAAO;AAE5C,EAAAK,EAAU,MAAM;AACf,QAAIR,EAAM;AAGT,UAFAE,EAAiBF,EAAM,aAAa,GAEhCA,EAAM,gBAAgB;AACzB,YAAIA,EAAM,cAAc,CAAC,GAAG;AAC3B,gBAAMS,IAAQT,EAAM,cAAc,CAAC,EAAE,SAAA,GAC/BU,IAAUV,EAAM,cAAc,CAAC,EAAE,WAAA;AACvC,UAAAK;AAAA,YACC,GAAGI,EAAM,SAAA,EAAW,SAAS,GAAG,GAAG,CAAC,IAAIC,EACtC,SAAA,EACA,SAAS,GAAG,GAAG,CAAC;AAAA,UAAA;AAAA,QAEpB;AACA,YAAIV,EAAM,cAAc,CAAC,GAAG;AAC3B,gBAAMS,IAAQT,EAAM,cAAc,CAAC,EAAE,SAAA,GAC/BU,IAAUV,EAAM,cAAc,CAAC,EAAE,WAAA;AACvC,UAAAO;AAAA,YACC,GAAGE,EAAM,SAAA,EAAW,SAAS,GAAG,GAAG,CAAC,IAAIC,EACtC,SAAA,EACA,SAAS,GAAG,GAAG,CAAC;AAAA,UAAA;AAAA,QAEpB;AAAA,MACD;AAAA;AAEA,MAAAR,EAAiB,CAAC,MAAM,IAAI,CAAC,GAEzBF,EAAM,mBACTK,EAAY,OAAO,GACnBE,EAAU,OAAO;AAAA,EAGpB,GAAG,CAACP,EAAM,eAAeA,EAAM,cAAc,CAAC;AAE9C,QAAM,CAACW,GAAcC,CAAe,IAAIT,EAASH,EAAM,YAAY,GAC7Da,IACLb,EAAM,kBAAkB,OACrB,OACAA,EAAM,kBAAkB,SACxB,MACAA,EAAM;AAEV,WAASc,EAAqBC,GAAc;AAE3C,QAAIf,EAAM,kBAAkBI,GAAU;AACrC,YAAM,CAACK,GAAOC,CAAO,IAAIN,EAAS,MAAM,GAAG,EAAE,IAAI,MAAM;AACvD,MAAAW,EAAK,CAAC,EAAE,SAASN,GAAOC,GAAS,GAAG,CAAC;AAAA,IACtC;AAEA,QAAIV,EAAM,kBAAkBM,GAAQ;AACnC,YAAM,CAACG,GAAOC,CAAO,IAAIJ,EAAO,MAAM,GAAG,EAAE,IAAI,MAAM;AACrD,MAAAS,EAAK,CAAC,EAAE,SAASN,GAAOC,GAAS,GAAG,CAAC;AAAA,IACtC;AAGA,IAAKV,EAAM,kBACVA,EAAM,gBAAgBe,EAAK,CAAC,GAAGA,EAAK,CAAC,CAAC,GAEvCb,EAAiB,CAACa,EAAK,CAAC,GAAGA,EAAK,CAAC,CAAC,CAAC;AAAA,EACpC;AAEA,WAASC,EAAiBC,GAAsBC,GAAoB;AACnE,QAAI,MAAM,QAAQjB,CAAa,KAAKA,EAAc,CAAC,KAAKA,EAAc,CAAC,GAAG;AAEzE,UAAIgB,GAAa;AAChB,cAAM,CAACR,GAAOC,CAAO,IAAIO,EAAY,MAAM,GAAG,EAAE,IAAI,MAAM;AAC1D,QAAAhB,EAAc,CAAC,EAAE,SAASQ,GAAOC,GAAS,GAAG,CAAC;AAAA,MAC/C;AAEA,UAAIQ,GAAW;AACd,cAAM,CAACT,GAAOC,CAAO,IAAIQ,EAAU,MAAM,GAAG,EAAE,IAAI,MAAM;AACxD,QAAAjB,EAAc,CAAC,EAAE,SAASQ,GAAOC,GAAS,GAAG,CAAC;AAAA,MAC/C;AAGA,MAAKV,EAAM,kBACVA,EAAM,gBAAgBC,EAAc,CAAC,GAAGA,EAAc,CAAC,CAAC;AAAA,IAE1D;AAAA,EACD;AAEA,WAASkB,EAAqBC,GAAc;AAC3C,IAAAf,EAAYe,CAAI,GAChBJ,EAAiBI,GAAMd,CAAM;AAAA,EAC9B;AAEA,WAASe,EAAmBD,GAAc;AACzC,IAAAb,EAAUa,CAAI,GACdJ,EAAiBZ,GAAUgB,CAAI;AAAA,EAChC;AAEA,WAASE,EAA0BP,GAAY;AAE9C,QAAIf,EAAM,kBAAkBI,GAAU;AACrC,YAAM,CAACK,GAAOC,CAAO,IAAIN,EAAS,MAAM,GAAG,EAAE,IAAI,MAAM;AACvD,MAAAW,EAAK,SAASN,GAAOC,GAAS,GAAG,CAAC;AAAA,IACnC;AAGA,IAAKV,EAAM,kBACVA,EAAM,eAAee,CAAI,GAE1BH,EAAgBG,CAAI;AAAA,EACrB;AAEA,QAAMQ,IAAe,CAAC,EAAE,MAAAR,GAAM,MAAAS,QAAW;AACxC,QAAI,CAAC,MAAM,QAAQvB,CAAa,EAAG,QAAO;AAE1C,UAAM,CAACwB,GAAOC,CAAG,IAAIzB;AAErB,QAAIwB,KAAS,CAACC,KAAOb,MAAkB,MAAM;AAC5C,YAAMc,IAAa,KAAK;AAAA,SACtBZ,IAAQU,KAAgC;AAAA,MAAiB;AAG3D,aACCD,MAAS,YACRG,IAAa,CAACd,KAAiBc,IAAad;AAAA,IAE/C;AAEA,WAAO;AAAA,EACR;AAEA,WAASe,EAAWb,GAAY;AAC/B,QAAI,CAAC,MAAM,QAAQd,CAAa,GAAG;AAClC,MAAAC,EAAiB,CAACa,GAAM,IAAI,CAAC;AAC7B;AAAA,IACD;AAEA,UAAM,CAACU,GAAOC,CAAG,IAAIzB;AAErB,IAMCC,EANIuB,IAKIA,KAAS,CAACC,IACD,CAACD,GAAOV,CAAI,IAGZ,CAACA,GAAM,IAAI,IARX,CAACA,GAAM,IAAI,CAKE;AAAA,EAKhC;AAEA,WAASc,IAAkB;AAC1B,IACC7B,EAAM,eACN,MAAM,QAAQC,CAAa,KAC3BA,EAAc,CAAC,KACfA,EAAc,CAAC,IAEfD,EAAM,gBAAgBC,EAAc,CAAC,GAAGA,EAAc,CAAC,CAAC,IAC9C,CAACD,EAAM,eAAeW,KAChCX,EAAM,eAAeW,CAAY;AAAA,EAEnC;AAEA,SACC,gBAAAmB,EAACC,GAAA,EAAgB,aAAa/B,EAAM,aACnC,UAAA;AAAA,IAAA,gBAAAgC;AAAA,MAACC;AAAA,MAAA;AAAA,QACA,UAAU,CAAClB,MAAS;AACnB,UAAIf,EAAM,eAAeA,EAAM,gBAC9Bc,EAAqBC,CAAI,IACff,EAAM,gBAChBsB,EAA0BP,CAAI;AAAA,QAEhC;AAAA,QACA,cAAAQ;AAAA,QACA,YAAAK;AAAA,QACA,OAAQ5B,EAAM,cAAcC,IAAgBU;AAAA,QAC5C,aAAaX,EAAM;AAAA,QACnB,SAASA,EAAM;AAAA,QACf,SAASA,EAAM;AAAA,MAAA;AAAA,MACV;AAAA,IAAA;AAAA,IAELA,EAAM,kBAAkBA,EAAM,eAC9B,gBAAA8B,EAAAI,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAF;AAAA,QAACG;AAAA,QAAA;AAAA,UACA,UAAA/B;AAAA,UACA,QAAAE;AAAA,UACA,kBAAkBa;AAAA,UAClB,gBAAgBE;AAAA,UAChB,cAAcrB,EAAM;AAAA,QAAA;AAAA,MAAA;AAAA,MAErB,gBAAAgC;AAAA,QAAC;AAAA,QAAA;AAAA,UACA,WAAU;AAAA,UACV,OAAO;AAAA,YACN,SAAS;AAAA,YACT,gBAAgB;AAAA,YAChB,SAAS;AAAA,UAAA;AAAA,UAGV,UAAA,gBAAAA;AAAA,YAACI;AAAA,YAAA;AAAA,cACA,YAAW;AAAA,cACX,MAAK;AAAA,cACL,YAAW;AAAA,cACX,SAASP;AAAA,YAAA;AAAA,UAAA;AAAA,QACV;AAAA,MAAA;AAAA,IACD,EAAA,CACD;AAAA,EAAA,GAEF;AAEF;"}

package/dist/esm/components/datePicker/DatePicker.styled.d.ts CHANGED Viewed

@@ -4,13 +4,3 @@ export declare const PickerContainer: import('styled-components').StyledComponen
 export declare const TimePickerContainer: import('styled-components').StyledComponent<"div", any, {}, never>;
 export declare const TimeInputWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
 export declare const TimeLabel: import('styled-components').StyledComponent<"div", any, {}, never>;
-export declare const DatePickerTippyOverride: import('styled-components').GlobalStyleComponent<{
-    [x: string]: any;
-    [x: number]: any;
-    [x: symbol]: any;
-} & {
-    theme?: any;
-} & {
-    as?: string | import('react').ComponentType<any> | undefined;
-    forwardedAs?: string | import('react').ComponentType<any> | undefined;
-}, import('styled-components').DefaultTheme>;

package/dist/esm/components/datePicker/DatePicker.styled.js CHANGED Viewed

@@ -1,35 +1,34 @@
-import t, { createGlobalStyle as e } from "styled-components";
+import t from "styled-components";
 import { COLORS as r } from "../../constants/Theme.js";
-const a = (o) => o.selectRange ? `
+const e = (o) => o.selectRange ? `
       border-top-right-radius: 0 !important;
       border-bottom-right-radius: 0 !important;
     ` : `
       border-top-right-radius: 4px;
       border-bottom-right-radius: 4px;
-    `, n = t.div`
+    `, d = t.div`
 	position: relative;
 	z-index: 99999;
 	width: fit-content;
 	background: ${r.text.white};
-	border: none !important;
-	border-radius: 8px !important;
+	border: 1px solid ${r.stroke.primary};
+	border-radius: 4px;
 	box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);
-	overflow: hidden;
 	/* Clip content to respect border-radius */
 	> :first-of-type {
-		border-top-left-radius: 8px;
-		border-top-right-radius: 8px;
+		border-top-left-radius: 4px;
+		border-top-right-radius: 4px;
 	}
 	> :last-child {
-		border-bottom-left-radius: 8px;
-		border-bottom-right-radius: 8px;
+		border-bottom-left-radius: 4px;
+		border-bottom-right-radius: 4px;
 	}
 	.react-calendar {
 		background: ${r.text.white};
-		border: none !important;
+		border: none;
 		box-shadow: none;
 		border-radius: 0;
 		color: ${r.text.primary};
@@ -113,7 +112,7 @@ const a = (o) => o.selectRange ? `
 							border-bottom-right-radius: 0 !important;
 						}
 						&.react-calendar__tile--rangeEnd {
-							${(o) => a(o)}
+							${(o) => e(o)}
 							border-top-left-radius: 4px !important;
 							border-bottom-left-radius: 4px !important;
 							&:enabled:hover {
@@ -212,7 +211,7 @@ const a = (o) => o.selectRange ? `
 			background-color: #f0f0f0 !important;
 		}
 	}
-`, p = t.div`
+`, i = t.div`
 	display: flex;
 	gap: 10px;
 	padding: 16px;
@@ -227,23 +226,17 @@ const a = (o) => o.selectRange ? `
 	flex: 1;
 	min-width: 0;
 	max-width: 154px;
-`, c = t.div`
+`, p = t.div`
 	font-style: normal;
 	font-weight: 400;
 	font-size: 14px;
 	line-height: 20px;
 	color: ${r.content.secondary};
-`, l = e`
-	.tippy-box:has(> .tippy-content > ${n}) {
-		background: transparent !important;
-		border-radius: 8px !important;
-	}
 `;
 export {
-  l as DatePickerTippyOverride,
-  n as PickerContainer,
+  d as PickerContainer,
   b as TimeInputWrapper,
-  c as TimeLabel,
-  p as TimePickerContainer
+  p as TimeLabel,
+  i as TimePickerContainer
 };
 //# sourceMappingURL=DatePicker.styled.js.map

package/dist/esm/components/datePicker/DatePicker.styled.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DatePicker.styled.js","sources":["../../../../src/components/datePicker/DatePicker.styled.ts"],"sourcesContent":["import styled, { createGlobalStyle } from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nconst generateBorderRadius = (props) => {\n\tif (props.selectRange) {\n\t\treturn `\n border-top-right-radius: 0 !important;\n border-bottom-right-radius: 0 !important;\n `;\n\t} else {\n\t\treturn `\n border-top-right-radius: 4px;\n border-bottom-right-radius: 4px;\n `;\n\t}\n};\n\nexport const PickerContainer = styled.div<{\n\tselectRange: boolean;\n}>`\n\tposition: relative;\n\tz-index: 99999;\n\twidth: fit-content;\n\tbackground: ${COLORS.text.white};\n\tborder: none !important;\n\tborder-radius: 8px !important;\n\tbox-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);\n\toverflow: hidden;\n\n\t/* Clip content to respect border-radius /\n\t> :first-of-type {\n\t\tborder-top-left-radius: 8px;\n\t\tborder-top-right-radius: 8px;\n\t}\n\n\t> :last-child {\n\t\tborder-bottom-left-radius: 8px;\n\t\tborder-bottom-right-radius: 8px;\n\t}\n\n\t.react-calendar {\n\t\tbackground: ${COLORS.text.white};\n\t\tborder: none !important;\n\t\tbox-shadow: none;\n\t\tborder-radius: 0;\n\t\tcolor: ${COLORS.text.primary};\n\t\t&--selectRange {\n\t\t\t.react-calendar {\n\t\t\t\t&__year-view {\n\t\t\t\t\t.react-calendar__tile--hover {\n\t\t\t\t\t\tbackground-color: unset;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t&__month-view {\n\t\t\t\t\t.react-calendar__tile--hover {\n\t\t\t\t\t\tbackground-color: ${COLORS.background.brandLight};\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\t.react-calendar {\n\t\t\t&__tile {\n\t\t\t\ttransition: all 0.25s;\n\t\t\t\t&:enabled:hover {\n\t\t\t\t\tbackground-color: ${COLORS.surface.hovered} !important;\n\t\t\t\t\tborder-radius: 4px !important;\n\t\t\t\t}\n\t\t\t\t/ While picking the end date, the tile under the cursor (the\n\t\t\t\t prospective endpoint) should match the selected start date —\n\t\t\t\t brand background + white text — instead of falling through to\n\t\t\t\t the generic grey :hover above. The in-between preview stays\n\t\t\t\t brandLight (--hover). Scoped to the hover endpoints so normal\n\t\t\t\t single-date hover is unaffected. */\n\t\t\t\t&--hoverEnd,\n\t\t\t\t&--hoverEnd:enabled:hover {\n\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\tcolor: ${COLORS.text.white} !important;\n\t\t\t\t\tborder-color: ${COLORS.background.brand} !important;\n\t\t\t\t\tborder-top-left-radius: 0 !important;\n\t\t\t\t\tborder-bottom-left-radius: 0 !important;\n\t\t\t\t\tborder-top-right-radius: 4px !important;\n\t\t\t\t\tborder-bottom-right-radius: 4px !important;\n\t\t\t\t}\n\t\t\t\t&--hoverStart,\n\t\t\t\t&--hoverStart:enabled:hover {\n\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\tcolor: ${COLORS.text.white} !important;\n\t\t\t\t\tborder-color: ${COLORS.background.brand} !important;\n\t\t\t\t\tborder-top-right-radius: 0 !important;\n\t\t\t\t\tborder-bottom-right-radius: 0 !important;\n\t\t\t\t\tborder-top-left-radius: 4px !important;\n\t\t\t\t\tborder-bottom-left-radius: 4px !important;\n\t\t\t\t}\n\t\t\t\t&--hoverBothEnds,\n\t\t\t\t&--hoverBothEnds:enabled:hover {\n\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\tcolor: ${COLORS.text.white} !important;\n\t\t\t\t\tborder-color: ${COLORS.background.brand} !important;\n\t\t\t\t\tborder-radius: 4px !important;\n\t\t\t\t}\n\t\t\t\t&--hasActive:enabled:hover,\n\t\t\t\t&--hasActive:enabled:focus {\n\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\tcolor: ${COLORS.text.white} !important;\n\t\t\t\t}\n\t\t\t\t&.react-calendar__tile {\n\t\t\t\t\t&--range {\n\t\t\t\t\t\t&:enabled:hover {\n\t\t\t\t\t\t\tborder-radius: 0 !important;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\t&--rangeStart {\n\t\t\t\t\t\tborder-top-right-radius: 0 !important;\n\t\t\t\t\t\tborder-bottom-right-radius: 0 !important;\n\t\t\t\t\t\tborder-top-left-radius: 4px !important;\n\t\t\t\t\t\tborder-bottom-left-radius: 4px !important;\n\t\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\t\tcolor: ${COLORS.text.white} !important;\n\n\t\t\t\t\t\t&:enabled:hover {\n\t\t\t\t\t\t\tborder-top-right-radius: 0 !important;\n\t\t\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\t\t\tborder-color: ${COLORS.background.brand} !important;\n\t\t\t\t\t\t\tborder-bottom-right-radius: 0 !important;\n\t\t\t\t\t\t}\n\t\t\t\t\t\t&.react-calendar__tile--rangeEnd {\n\t\t\t\t\t\t\t${(props) => generateBorderRadius(props)}\n\t\t\t\t\t\t\tborder-top-left-radius: 4px !important;\n\t\t\t\t\t\t\tborder-bottom-left-radius: 4px !important;\n\t\t\t\t\t\t\t&:enabled:hover {\n\t\t\t\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\t\t\t\tborder-color: ${COLORS.background.brand} !important;\n\t\t\t\t\t\t\t\tborder-top-right-radius: 0 !important;\n\t\t\t\t\t\t\t\tborder-bottom-right-radius: 0 !important;\n\t\t\t\t\t\t\t\tborder-top-left-radius: 4px !important;\n\t\t\t\t\t\t\t\tborder-bottom-left-radius: 4px !important;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\t&--rangeEnd {\n\t\t\t\t\t\tborder-top-left-radius: 0 !important;\n\t\t\t\t\t\tborder-bottom-left-radius: 0 !important;\n\t\t\t\t\t\tborder-top-right-radius: 4px !important;\n\t\t\t\t\t\tborder-bottom-right-radius: 4px !important;\n\t\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\t\tcolor: ${COLORS.text.white} !important;\n\n\t\t\t\t\t\t&:enabled:hover {\n\t\t\t\t\t\t\tborder-top-left-radius: 0 !important;\n\t\t\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\t\t\tborder-color: ${COLORS.background.brand} !important;\n\t\t\t\t\t\t\tborder-bottom-left-radius: 0 !important;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t.react-calendar__tile--active {\n\t\t\tbackground: ${COLORS.background.brandLight} !important;\n\t\t\tcolor: ${COLORS.text.primary} !important;\n\t\t}\n\n\t\t.react-calendar__tile--now {\n\t\t\tbackground: ${COLORS.text.white} !important;\n\t\t\tborder-radius: 4px !important;\n\t\t\tborder-color: ${COLORS.background.brand} !important;\n\t\t\tborder-style: solid !important;\n\t\t\tborder-width: 1px !important;\n\t\t}\n\n\t\t.react-calendar__month-view__weekdays__weekday {\n\t\t\tfont-style: normal;\n\t\t\toverflow: hidden;\n\t\t\tfont-weight: 600;\n\t\t\tfont-size: 14px;\n\t\t\tline-height: 20px;\n\t\t\tcolor: ${COLORS.text.primary};\n\n\t\t\tabbr[title] {\n\t\t\t\ttext-decoration: none !important;\n\t\t\t}\n\t\t}\n\n\t\t.react-calendar__navigation button:enabled:hover,\n\t\t.react-calendar__navigation button:enabled:focus {\n\t\t\tbackground-color: ${COLORS.background.brandLight} !important;\n\t\t\tborder-radius: 4px !important;\n\t\t}\n\n\t\t.react-calendar__month-view__weekends {\n\t\t\tcolor: ${COLORS.text.primary};\n\t\t}\n\n\t\t.react-calendar__month-view__days__day--weekend {\n\t\t\tcolor: ${COLORS.text.primary};\n\t\t}\n\n\t\t.react-calendar__month-view__weekdays {\n\t\t\tbackground: ${COLORS.surface.subdued};\n\t\t}\n\n\t\t.react-calendar__navigation {\n\t\t\tdisplay: flex;\n\t\t\tpadding: 12px 20px;\n\n\t\t\tbutton {\n\t\t\t\tborder: 0 !important;\n\t\t\t\tbackground: transparent !important;\n\t\t\t}\n\n\t\t\t.react-calendar__navigation__arrow\n\t\t\t\treact-calendar__navigation__prev2-button {\n\t\t\t\tfont-size: 20px;\n\t\t\t}\n\n\t\t\t.react-calendar__navigation__arrow\n\t\t\t\treact-calendar__navigation__prev-button {\n\t\t\t\tfont-size: 20px;\n\t\t\t}\n\t\t}\n\t\t.react-calendar__tile:disabled {\n\t\t\tbackground-color: #f0f0f0 !important;\n\t\t}\n\t}\n`;\n\nexport const TimePickerContainer = styled.div`\n\tdisplay: flex;\n\tgap: 10px;\n\tpadding: 16px;\n\tbackground: ${COLORS.text.white};\n\tbox-sizing: border-box;\n\twidth: 100%;\n\tmax-width: 350px;\n`;\n\nexport const TimeInputWrapper = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n\tflex: 1;\n\tmin-width: 0;\n\tmax-width: 154px;\n`;\n\nexport const TimeLabel = styled.div`\n\tfont-style: normal;\n\tfont-weight: 400;\n\tfont-size: 14px;\n\tline-height: 20px;\n\tcolor: ${COLORS.content.secondary};\n`;\n\nexport const DatePickerTippyOverride = createGlobalStyle`\n\t.tippy-box:has(> .tippy-content > ${PickerContainer}) {\n\t\tbackground: transparent !important;\n\t\tborder-radius: 8px !important;\n\t}\n`;\n"],"names":["generateBorderRadius","props","PickerContainer","styled","COLORS","TimePickerContainer","TimeInputWrapper","TimeLabel","DatePickerTippyOverride","createGlobalStyle"],"mappings":";;AAGA,MAAMA,IAAuB,CAACC,MACzBA,EAAM,cACF;AAAA;AAAA;AAAA,QAKA;AAAA;AAAA;AAAA,OAOIC,IAAkBC,EAAO;AAAA;AAAA;AAAA;AAAA,eAMvBC,EAAO,KAAK,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAkBhBA,EAAO,KAAK,KAAK;AAAA;AAAA;AAAA;AAAA,WAItBA,EAAO,KAAK,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAUJA,EAAO,WAAW,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAS7BA,EAAO,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAW5BA,EAAO,WAAW,KAAK;AAAA,cAC5BA,EAAO,KAAK,KAAK;AAAA,qBACVA,EAAO,WAAW,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAQzBA,EAAO,WAAW,KAAK;AAAA,cAC5BA,EAAO,KAAK,KAAK;AAAA,qBACVA,EAAO,WAAW,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAQzBA,EAAO,WAAW,KAAK;AAAA,cAC5BA,EAAO,KAAK,KAAK;AAAA,qBACVA,EAAO,WAAW,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,mBAKzBA,EAAO,WAAW,KAAK;AAAA,cAC5BA,EAAO,KAAK,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAaXA,EAAO,WAAW,KAAK;AAAA,eAC5BA,EAAO,KAAK,KAAK;AAAA;AAAA;AAAA;AAAA,qBAIXA,EAAO,WAAW,KAAK;AAAA,uBACrBA,EAAO,WAAW,KAAK;AAAA;AAAA;AAAA;AAAA,SAIrC,CAACH,MAAUD,EAAqBC,CAAK,CAAC;AAAA;AAAA;AAAA;AAAA,sBAIzBG,EAAO,WAAW,KAAK;AAAA,wBACrBA,EAAO,WAAW,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAa3BA,EAAO,WAAW,KAAK;AAAA,eAC5BA,EAAO,KAAK,KAAK;AAAA;AAAA;AAAA;AAAA,qBAIXA,EAAO,WAAW,KAAK;AAAA,uBACrBA,EAAO,WAAW,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAS7BA,EAAO,WAAW,UAAU;AAAA,YACjCA,EAAO,KAAK,OAAO;AAAA;AAAA;AAAA;AAAA,iBAIdA,EAAO,KAAK,KAAK;AAAA;AAAA,mBAEfA,EAAO,WAAW,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAW9BA,EAAO,KAAK,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBASRA,EAAO,WAAW,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,YAKvCA,EAAO,KAAK,OAAO;AAAA;AAAA;AAAA;AAAA,YAInBA,EAAO,KAAK,OAAO;AAAA;AAAA;AAAA;AAAA,iBAIdA,EAAO,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA4B1BC,IAAsBF,EAAO;AAAA;AAAA;AAAA;AAAA,eAI3BC,EAAO,KAAK,KAAK;AAAA;AAAA;AAAA;AAAA,GAMnBE,IAAmBH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAS1BI,IAAYJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,UAKtBC,EAAO,QAAQ,SAAS;AAAA,GAGrBI,IAA0BC;AAAA,qCACFP,CAAe;AAAA;AAAA;AAAA;AAAA;"}
1	+ {"version":3,"file":"DatePicker.styled.js","sources":["../../../../src/components/datePicker/DatePicker.styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nconst generateBorderRadius = (props) => {\n\tif (props.selectRange) {\n\t\treturn `\n border-top-right-radius: 0 !important;\n border-bottom-right-radius: 0 !important;\n `;\n\t} else {\n\t\treturn `\n border-top-right-radius: 4px;\n border-bottom-right-radius: 4px;\n `;\n\t}\n};\n\nexport const PickerContainer = styled.div<{\n\tselectRange: boolean;\n}>`\n\tposition: relative;\n\tz-index: 99999;\n\twidth: fit-content;\n\tbackground: ${COLORS.text.white};\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\tbox-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);\n\n\t/* Clip content to respect border-radius /\n\t> :first-of-type {\n\t\tborder-top-left-radius: 4px;\n\t\tborder-top-right-radius: 4px;\n\t}\n\n\t> :last-child {\n\t\tborder-bottom-left-radius: 4px;\n\t\tborder-bottom-right-radius: 4px;\n\t}\n\n\t.react-calendar {\n\t\tbackground: ${COLORS.text.white};\n\t\tborder: none;\n\t\tbox-shadow: none;\n\t\tborder-radius: 0;\n\t\tcolor: ${COLORS.text.primary};\n\t\t&--selectRange {\n\t\t\t.react-calendar {\n\t\t\t\t&__year-view {\n\t\t\t\t\t.react-calendar__tile--hover {\n\t\t\t\t\t\tbackground-color: unset;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t&__month-view {\n\t\t\t\t\t.react-calendar__tile--hover {\n\t\t\t\t\t\tbackground-color: ${COLORS.background.brandLight};\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\t.react-calendar {\n\t\t\t&__tile {\n\t\t\t\ttransition: all 0.25s;\n\t\t\t\t&:enabled:hover {\n\t\t\t\t\tbackground-color: ${COLORS.surface.hovered} !important;\n\t\t\t\t\tborder-radius: 4px !important;\n\t\t\t\t}\n\t\t\t\t/ While picking the end date, the tile under the cursor (the\n\t\t\t\t prospective endpoint) should match the selected start date —\n\t\t\t\t brand background + white text — instead of falling through to\n\t\t\t\t the generic grey :hover above. The in-between preview stays\n\t\t\t\t brandLight (--hover). Scoped to the hover endpoints so normal\n\t\t\t\t single-date hover is unaffected. */\n\t\t\t\t&--hoverEnd,\n\t\t\t\t&--hoverEnd:enabled:hover {\n\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\tcolor: ${COLORS.text.white} !important;\n\t\t\t\t\tborder-color: ${COLORS.background.brand} !important;\n\t\t\t\t\tborder-top-left-radius: 0 !important;\n\t\t\t\t\tborder-bottom-left-radius: 0 !important;\n\t\t\t\t\tborder-top-right-radius: 4px !important;\n\t\t\t\t\tborder-bottom-right-radius: 4px !important;\n\t\t\t\t}\n\t\t\t\t&--hoverStart,\n\t\t\t\t&--hoverStart:enabled:hover {\n\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\tcolor: ${COLORS.text.white} !important;\n\t\t\t\t\tborder-color: ${COLORS.background.brand} !important;\n\t\t\t\t\tborder-top-right-radius: 0 !important;\n\t\t\t\t\tborder-bottom-right-radius: 0 !important;\n\t\t\t\t\tborder-top-left-radius: 4px !important;\n\t\t\t\t\tborder-bottom-left-radius: 4px !important;\n\t\t\t\t}\n\t\t\t\t&--hoverBothEnds,\n\t\t\t\t&--hoverBothEnds:enabled:hover {\n\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\tcolor: ${COLORS.text.white} !important;\n\t\t\t\t\tborder-color: ${COLORS.background.brand} !important;\n\t\t\t\t\tborder-radius: 4px !important;\n\t\t\t\t}\n\t\t\t\t&--hasActive:enabled:hover,\n\t\t\t\t&--hasActive:enabled:focus {\n\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\tcolor: ${COLORS.text.white} !important;\n\t\t\t\t}\n\t\t\t\t&.react-calendar__tile {\n\t\t\t\t\t&--range {\n\t\t\t\t\t\t&:enabled:hover {\n\t\t\t\t\t\t\tborder-radius: 0 !important;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\t&--rangeStart {\n\t\t\t\t\t\tborder-top-right-radius: 0 !important;\n\t\t\t\t\t\tborder-bottom-right-radius: 0 !important;\n\t\t\t\t\t\tborder-top-left-radius: 4px !important;\n\t\t\t\t\t\tborder-bottom-left-radius: 4px !important;\n\t\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\t\tcolor: ${COLORS.text.white} !important;\n\n\t\t\t\t\t\t&:enabled:hover {\n\t\t\t\t\t\t\tborder-top-right-radius: 0 !important;\n\t\t\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\t\t\tborder-color: ${COLORS.background.brand} !important;\n\t\t\t\t\t\t\tborder-bottom-right-radius: 0 !important;\n\t\t\t\t\t\t}\n\t\t\t\t\t\t&.react-calendar__tile--rangeEnd {\n\t\t\t\t\t\t\t${(props) => generateBorderRadius(props)}\n\t\t\t\t\t\t\tborder-top-left-radius: 4px !important;\n\t\t\t\t\t\t\tborder-bottom-left-radius: 4px !important;\n\t\t\t\t\t\t\t&:enabled:hover {\n\t\t\t\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\t\t\t\tborder-color: ${COLORS.background.brand} !important;\n\t\t\t\t\t\t\t\tborder-top-right-radius: 0 !important;\n\t\t\t\t\t\t\t\tborder-bottom-right-radius: 0 !important;\n\t\t\t\t\t\t\t\tborder-top-left-radius: 4px !important;\n\t\t\t\t\t\t\t\tborder-bottom-left-radius: 4px !important;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\t&--rangeEnd {\n\t\t\t\t\t\tborder-top-left-radius: 0 !important;\n\t\t\t\t\t\tborder-bottom-left-radius: 0 !important;\n\t\t\t\t\t\tborder-top-right-radius: 4px !important;\n\t\t\t\t\t\tborder-bottom-right-radius: 4px !important;\n\t\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\t\tcolor: ${COLORS.text.white} !important;\n\n\t\t\t\t\t\t&:enabled:hover {\n\t\t\t\t\t\t\tborder-top-left-radius: 0 !important;\n\t\t\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\t\t\tborder-color: ${COLORS.background.brand} !important;\n\t\t\t\t\t\t\tborder-bottom-left-radius: 0 !important;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t.react-calendar__tile--active {\n\t\t\tbackground: ${COLORS.background.brandLight} !important;\n\t\t\tcolor: ${COLORS.text.primary} !important;\n\t\t}\n\n\t\t.react-calendar__tile--now {\n\t\t\tbackground: ${COLORS.text.white} !important;\n\t\t\tborder-radius: 4px !important;\n\t\t\tborder-color: ${COLORS.background.brand} !important;\n\t\t\tborder-style: solid !important;\n\t\t\tborder-width: 1px !important;\n\t\t}\n\n\t\t.react-calendar__month-view__weekdays__weekday {\n\t\t\tfont-style: normal;\n\t\t\toverflow: hidden;\n\t\t\tfont-weight: 600;\n\t\t\tfont-size: 14px;\n\t\t\tline-height: 20px;\n\t\t\tcolor: ${COLORS.text.primary};\n\n\t\t\tabbr[title] {\n\t\t\t\ttext-decoration: none !important;\n\t\t\t}\n\t\t}\n\n\t\t.react-calendar__navigation button:enabled:hover,\n\t\t.react-calendar__navigation button:enabled:focus {\n\t\t\tbackground-color: ${COLORS.background.brandLight} !important;\n\t\t\tborder-radius: 4px !important;\n\t\t}\n\n\t\t.react-calendar__month-view__weekends {\n\t\t\tcolor: ${COLORS.text.primary};\n\t\t}\n\n\t\t.react-calendar__month-view__days__day--weekend {\n\t\t\tcolor: ${COLORS.text.primary};\n\t\t}\n\n\t\t.react-calendar__month-view__weekdays {\n\t\t\tbackground: ${COLORS.surface.subdued};\n\t\t}\n\n\t\t.react-calendar__navigation {\n\t\t\tdisplay: flex;\n\t\t\tpadding: 12px 20px;\n\n\t\t\tbutton {\n\t\t\t\tborder: 0 !important;\n\t\t\t\tbackground: transparent !important;\n\t\t\t}\n\n\t\t\t.react-calendar__navigation__arrow\n\t\t\t\treact-calendar__navigation__prev2-button {\n\t\t\t\tfont-size: 20px;\n\t\t\t}\n\n\t\t\t.react-calendar__navigation__arrow\n\t\t\t\treact-calendar__navigation__prev-button {\n\t\t\t\tfont-size: 20px;\n\t\t\t}\n\t\t}\n\t\t.react-calendar__tile:disabled {\n\t\t\tbackground-color: #f0f0f0 !important;\n\t\t}\n\t}\n`;\n\nexport const TimePickerContainer = styled.div`\n\tdisplay: flex;\n\tgap: 10px;\n\tpadding: 16px;\n\tbackground: ${COLORS.text.white};\n\tbox-sizing: border-box;\n\twidth: 100%;\n\tmax-width: 350px;\n`;\n\nexport const TimeInputWrapper = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n\tflex: 1;\n\tmin-width: 0;\n\tmax-width: 154px;\n`;\n\nexport const TimeLabel = styled.div`\n\tfont-style: normal;\n\tfont-weight: 400;\n\tfont-size: 14px;\n\tline-height: 20px;\n\tcolor: ${COLORS.content.secondary};\n`;\n"],"names":["generateBorderRadius","props","PickerContainer","styled","COLORS","TimePickerContainer","TimeInputWrapper","TimeLabel"],"mappings":"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"}

package/dist/esm/components/dropdown/ChipInput.d.ts CHANGED Viewed

@@ -9,7 +9,6 @@ interface ChipInputProps {
     sizeToUse?: 'default' | 'small' | 'x-small';
     errorMessage?: string;
     showLabelsOnMoreHover?: boolean;
-    placeholderColor?: string;
 }
 declare const ChipInput: React.FC<ChipInputProps>;
 export default ChipInput;

package/dist/esm/components/dropdown/ChipInput.js CHANGED Viewed

@@ -1,52 +1,58 @@
-import { jsxs as m, Fragment as L, jsx as e } from "react/jsx-runtime";
+import { jsxs as m, Fragment as S, jsx as e } from "react/jsx-runtime";
 import { useState as s, useEffect as w } from "react";
-import R from "../../utils/StringUtils.js";
+import L from "../../utils/StringUtils.js";
 import { COLORS as d } from "../../constants/Theme.js";
-import E from "../../assets/icons/chevronDown.svg.js";
-import T from "../../assets/icons/cross.svg.js";
+import R from "../../assets/icons/chevronDown.svg.js";
+import E from "../../assets/icons/cross.svg.js";
 import j from "../../assets/icons/errorInfo.svg.js";
 import { InputFooter as A } from "../input/Input.styled.js";
-import { BodyCaption as g } from "../TypographyStyle.js";
+import { BodyCaption as h } from "../TypographyStyle.js";
 import { ChipInputWrapper as F } from "./Common.styled.js";
-import { Tag as k } from "../tag/Tag.js";
-import { Tooltip as B } from "../tooltips/Tooltip.js";
-const D = (t) => t.length === 1 ? 100 : t.length === 2 ? 40 : 34, Y = ({
+import { Tag as T } from "../tag/Tag.js";
+import { Tooltip as k } from "../tooltips/Tooltip.js";
+const B = (t) => t.length === 1 ? 100 : t.length === 2 ? 40 : 34, V = ({
   chips: t,
-  onDeleteChip: h,
+  onDeleteChip: g,
   containerStyle: f = {},
   sizeToUse: i = "default",
   isDropdownOpened: u,
   placeholder: C = "Select..",
   errorMessage: a = "",
-  showLabelsOnMoreHover: v = !1,
-  placeholderColor: b
+  showLabelsOnMoreHover: v = !1
 }) => {
-  const [x, y] = s(), [p, I] = s(0), [c, O] = s([]);
+  const [b, x] = s(), [p, y] = s(0), [c, I] = s([]);
   return w(() => {
     if (!t) return;
     let n = 0;
-    const o = D(t);
-    let r = t.filter((l) => (n += l.label.length, n <= o));
-    r.length === 0 && t.length > 0 && (r = [t[0]]), y(r);
-    const S = t.filter((l) => !r.includes(l)).map((l) => l.label);
-    O(S), I(t.length - r.length);
-  }, [t]), /* @__PURE__ */ m(L, { children: [
+    const r = B(t);
+    let o = t.filter((l) => (n += l.label.length, n <= r));
+    o.length === 0 && t.length > 0 && (o = [t[0]]), x(o);
+    const O = t.filter((l) => !o.includes(l)).map((l) => l.label);
+    I(O), y(t.length - o.length);
+  }, [t]), /* @__PURE__ */ m(S, { children: [
     /* @__PURE__ */ m(F, { style: { ...f }, error: !!a, children: [
       /* @__PURE__ */ m("div", { className: "chips-container", children: [
-        x?.map((n, o) => /* @__PURE__ */ e("div", { style: { zIndex: 2 }, children: /* @__PURE__ */ e(
-          k,
+        b?.map((n, r) => /* @__PURE__ */ e("div", { style: { zIndex: 2 }, children: /* @__PURE__ */ e(
+          T,
           {
-            tagText: R.truncateText(
+            tagText: L.truncateText(
               n.selectedLabel || n.label,
               40
             ),
-            TrailingIcon: T,
-            onTrailingIconClicked: () => {
-              h(n);
-            },
+            TrailingIcon: () => /* @__PURE__ */ e(
+              E,
+              {
+                width: 12,
+                height: 12,
+                style: { cursor: "pointer" },
+                onClick: () => {
+                  g(n);
+                }
+              }
+            ),
             children: n.selectedLabel || n.label
           }
-        ) }, o)),
+        ) }, r)),
         !!p && /* @__PURE__ */ e(
           "div",
           {
@@ -56,33 +62,27 @@ const D = (t) => t.length === 1 ? 100 : t.length === 2 ? 40 : 34, Y = ({
               pointerEvents: "auto"
             },
             children: /* @__PURE__ */ e(
-              B,
+              k,
               {
                 body: "",
                 placement: "bottom",
-                tooltipContent: v && c.length > 0 ? /* @__PURE__ */ e("div", { style: { padding: "4px" }, children: c.map((n, o) => /* @__PURE__ */ e(
-                  g,
+                tooltipContent: v && c.length > 0 ? /* @__PURE__ */ e("div", { style: { padding: "4px" }, children: c.map((n, r) => /* @__PURE__ */ e(
+                  h,
                   {
                     style: { color: d.text.white },
                     children: n
                   },
-                  o
+                  r
                 )) }) : void 0,
-                children: /* @__PURE__ */ e(g, { color: d.content.placeholder, children: `+${p} more` })
+                children: /* @__PURE__ */ e(h, { color: d.content.placeholder, children: `+${p} more` })
               }
             )
           }
         ),
-        t.length === 0 && /* @__PURE__ */ e(
-          "div",
-          {
-            style: { color: b ?? d.content.placeholder },
-            children: C
-          }
-        )
+        t.length === 0 && /* @__PURE__ */ e("div", { style: { color: d.content.placeholder }, children: C })
       ] }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
-        E,
+        R,
         {
           style: {
             transform: u ? "rotate(180deg)" : "rotate(0deg)"
@@ -100,6 +100,6 @@ const D = (t) => t.length === 1 ? 100 : t.length === 2 ? 40 : 34, Y = ({
   ] });
 };
 export {
-  Y as default
+  V as default
 };
 //# sourceMappingURL=ChipInput.js.map