@bikdotai/bik-component-library 0.0.861-beta.0 → 0.0.861

package/dist/cjs/components/tag/model.js.map

@@ -1 +1 @@
-{"version":3,"file":"model.js","sources":["../../../../src/components/tag/model.ts"],"sourcesContent":["import React from 'react';\nimport { MouseEventHandler } from 'react';\nimport { TooltipProps } from '../tooltips/Tooltip';\n\nexport type TagTheme = 'light' | 'dark';\n\nexport type TagVariant = 'regular' | 'circle' | 'compressed';\n\nexport type TagType =\n\t| 'negative'\n\t| 'warning'\n\t| 'positive'\n\t| 'neutral'\n\t| 'white'\n\t| 'purple'\n\t| 'blue'\n\t| 'grey'\n\t| 'ai';\n\nexport const ValidTagTypeMap = {\n\tregular: {\n\t\tnegative: true,\n\t\twarning: true,\n\t\tpositive: true,\n\t\tneutral: true,\n\t\twhite: true,\n\t\tpurple: true,\n\t\tblue: true,\n\t\tai: true,\n\t},\n\tcircle: {\n\t\tnegative: true,\n\t\twarning: true,\n\t\tpositive: true,\n\t\tneutral: true,\n\t\tblue: true,\n\t\tgrey: true,\n\t\tai: true,\n\t},\n\tcompressed: {\n\t\tnegative: true,\n\t\twarning: true,\n\t\tpositive: true,\n\t\tneutral: true,\n\t\twhite: true,\n\t\tpurple: true,\n\t\tblue: true,\n\t\tai: true,\n\t},\n};\n\nexport interface TagProps extends React.BaseHTMLAttributes<HTMLDivElement> {\n\t/**\n\t * Set the theme of the Tag\n\t * @default default light\n\t */\n\ttheme?: TagTheme;\n\n\t/**\n\t * Set the color of the Tag\n\t * @default default neutral\n\t */\n\ttype?: TagType;\n\n\t/**\n\t * Set the color of the Tag\n\t * @default default regular\n\t */\n\tvariant?: TagVariant;\n\n\t/**\n\t * The icon component that is the right of the text\n\t * Referred to https://ozzie.sh/passing-icons-as-props-in-a-consistent-way-using-react\n\t * @default undefined\n\t */\n\tTrailingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\t/**\n\t * The right icon id,\n\t * @default trailing-icon\n\t */\n\ttrailingIconId?: string;\n\t/**\n\t * The right icon on click event, defaults to () => {}\n\t */\n\tonTrailingIconClicked?: MouseEventHandler<HTMLButtonElement>;\n\t/**\n\t * Tooltip props for the trailing icon\n\t * @default undefined\n\t */\n\ttrailingIconTooltip?: Omit<TooltipProps, 'children'>;\n\n\t/**\n\t * The icon component that is to the left of the text\n\t * Referred to https://ozzie.sh/passing-icons-as-props-in-a-consistent-way-using-react\n\t * @default undefined\n\t */\n\tLeadingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\t/**\n\t * The right icon on click event, defaults to () => {}\n\t */\n\tonLeadingIconClicked?: MouseEventHandler<HTMLButtonElement>;\n\t/**\n\t * The left icon id,\n\t * @default leading-icon\n\t */\n\tleadingIconId?: string;\n\t/**\n\t * Tooltip props for the leading icon\n\t * @default undefined\n\t */\n\tleadingIconTooltip?: Omit<TooltipProps, 'children'>;\n\n\ttagText: string | number;\n\tversion?: '1.0' | '2.0' | '3.0';\n\t/** Custom CSS padding string, e.g. '4px 8px' */\n\tpadding?: string;\n\t/** Custom height in px */\n\theight?: number;\n\tcursor?: string;\n\talignIcon?: string;\n\tnoBorder?: boolean;\n\ttagHtmlText?: JSX.Element;\n\tcontentPadding?: number;\n\ttagColor?: string;\n\tnumberOfLines?: number;\n\t/**\n\t * Override the computed background color of the tag container.\n\t * @default undefined (uses theme/type color)\n\t */\n\tbackgroundColor?: string;\n\t/**\n\t * Override the border-radius of the tag container.\n\t * @default undefined (uses variant-based radius: 4px for regular, 12px otherwise)\n\t */\n\tborderRadius?: string | number;\n\t/**\n\t * Controls the size of the tag. 'small' sets height to 16px and uses tiny font.\n\t * @default 'regular'\n\t */\n\tsize?: 'regular' | 'small';\n\t/**\n\t * Background color on hover.\n\t * @default undefined (no hover effect)\n\t */\n\thoverBackgroundColor?: string;\n}\n"],"names":["ValidTagTypeMap"],"mappings":"gFAmBO,MAAMA,EAAkB,CAC9B,QAAS,CACR,SAAU,GACV,QAAS,GACT,SAAU,GACV,QAAS,GACT,MAAO,GACP,OAAQ,GACR,KAAM,GACN,GAAI,EAAA,EAEL,OAAQ,CACP,SAAU,GACV,QAAS,GACT,SAAU,GACV,QAAS,GACT,KAAM,GACN,KAAM,GACN,GAAI,EAAA,EAEL,WAAY,CACX,SAAU,GACV,QAAS,GACT,SAAU,GACV,QAAS,GACT,MAAO,GACP,OAAQ,GACR,KAAM,GACN,GAAI,EAAA,CAEN"}
+{"version":3,"file":"model.js","sources":["../../../../src/components/tag/model.ts"],"sourcesContent":["import React from 'react';\nimport { MouseEventHandler } from 'react';\nimport { TooltipProps } from '../tooltips/Tooltip';\n\nexport type TagTheme = 'light' | 'dark';\n\nexport type TagVariant = 'regular' | 'circle' | 'compressed';\n\nexport type TagType =\n\t| 'negative'\n\t| 'warning'\n\t| 'positive'\n\t| 'neutral'\n\t| 'white'\n\t| 'purple'\n\t| 'blue'\n\t| 'grey'\n\t| 'ai';\n\nexport const ValidTagTypeMap = {\n\tregular: {\n\t\tnegative: true,\n\t\twarning: true,\n\t\tpositive: true,\n\t\tneutral: true,\n\t\twhite: true,\n\t\tpurple: true,\n\t\tblue: true,\n\t\tai: true,\n\t},\n\tcircle: {\n\t\tnegative: true,\n\t\twarning: true,\n\t\tpositive: true,\n\t\tneutral: true,\n\t\tblue: true,\n\t\tgrey: true,\n\t\tai: true,\n\t},\n\tcompressed: {\n\t\tnegative: true,\n\t\twarning: true,\n\t\tpositive: true,\n\t\tneutral: true,\n\t\twhite: true,\n\t\tpurple: true,\n\t\tblue: true,\n\t\tai: true,\n\t},\n};\n\nexport interface TagProps extends React.BaseHTMLAttributes<HTMLDivElement> {\n\t/**\n\t * Set the theme of the Tag\n\t * @default default light\n\t */\n\ttheme?: TagTheme;\n\n\t/**\n\t * Set the color of the Tag\n\t * @default default neutral\n\t */\n\ttype?: TagType;\n\n\t/**\n\t * Set the color of the Tag\n\t * @default default regular\n\t */\n\tvariant?: TagVariant;\n\n\t/**\n\t * The icon component that is the right of the text\n\t * Referred to https://ozzie.sh/passing-icons-as-props-in-a-consistent-way-using-react\n\t * @default undefined\n\t */\n\tTrailingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\t/**\n\t * The right icon id,\n\t * @default trailing-icon\n\t */\n\ttrailingIconId?: string;\n\t/**\n\t * The right icon on click event, defaults to () => {}\n\t */\n\tonTrailingIconClicked?: MouseEventHandler<HTMLButtonElement>;\n\t/**\n\t * Tooltip props for the trailing icon\n\t * @default undefined\n\t */\n\ttrailingIconTooltip?: Omit<TooltipProps, 'children'>;\n\n\t/**\n\t * The icon component that is to the left of the text\n\t * Referred to https://ozzie.sh/passing-icons-as-props-in-a-consistent-way-using-react\n\t * @default undefined\n\t */\n\tLeadingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\t/**\n\t * The right icon on click event, defaults to () => {}\n\t */\n\tonLeadingIconClicked?: MouseEventHandler<HTMLButtonElement>;\n\t/**\n\t * The left icon id,\n\t * @default leading-icon\n\t */\n\tleadingIconId?: string;\n\t/**\n\t * Tooltip props for the leading icon\n\t * @default undefined\n\t */\n\tleadingIconTooltip?: Omit<TooltipProps, 'children'>;\n\n\ttagText: string | number;\n\tversion?: '1.0' | '2.0' | '3.0';\n\t/** Custom CSS padding string, e.g. '4px 8px' */\n\tpadding?: string;\n\t/** Custom height in px */\n\theight?: number;\n\tcursor?: string;\n\talignIcon?: string;\n\tnoBorder?: boolean;\n\ttagHtmlText?: JSX.Element;\n\tcontentPadding?: number;\n\ttagColor?: string;\n\tnumberOfLines?: number;\n\t/**\n\t * Override the computed background color of the tag container.\n\t * @default undefined (uses theme/type color)\n\t */\n\tbackgroundColor?: string;\n\t/**\n\t * Override the border-radius of the tag container.\n\t * @default undefined (uses variant-based radius: 4px for regular, 12px otherwise)\n\t */\n\tborderRadius?: string | number;\n\t/**\n\t * Controls the size of the tag. 'small' sets height to 16px and uses tiny font.\n\t * @default 'regular'\n\t */\n\tsize?: 'regular' | 'small';\n}\n"],"names":["ValidTagTypeMap"],"mappings":"gFAmBO,MAAMA,EAAkB,CAC9B,QAAS,CACR,SAAU,GACV,QAAS,GACT,SAAU,GACV,QAAS,GACT,MAAO,GACP,OAAQ,GACR,KAAM,GACN,GAAI,EAAA,EAEL,OAAQ,CACP,SAAU,GACV,QAAS,GACT,SAAU,GACV,QAAS,GACT,KAAM,GACN,KAAM,GACN,GAAI,EAAA,EAEL,WAAY,CACX,SAAU,GACV,QAAS,GACT,SAAU,GACV,QAAS,GACT,MAAO,GACP,OAAQ,GACR,KAAM,GACN,GAAI,EAAA,CAEN"}

package/dist/esm/components/bik-layout/CommonStyles.js

@@ -87,12 +87,14 @@ const f = t.div`
 	z-index: 10;
 `, m = t.div`
 	background-color: ${o.colorsV2.surface.standard};
-	border-bottom: 1px solid ${o.colorsV2.stroke.primary};
+	border-bottom: 1px solid #e0e0e0;
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
 	align-items: center;
 	height: 56px;
+	border-bottom-width: 0.5px;
+	border-color: ${o.colorsV2.background.inactive};
 	padding: 16px;
 	.cursor {
 		cursor: pointer;

package/dist/esm/components/bik-layout/CommonStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommonStyles.js","sources":["../../../../src/components/bik-layout/CommonStyles.tsx"],"sourcesContent":["import { Dropdown, Tooltip } from 'react-bootstrap';\nimport styled from 'styled-components';\nimport { COLORS, DEFAULT_THEME } from '@src/constants/Theme';\nimport { ComponentZindex } from '@src/constants/zindex';\nimport { BodyCaption, TitleSmall } from '../TypographyStyle';\n\nexport const GlobalContainer = styled.div`\n\t.global-container {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tjustify-content: flex-start;\n\t\twidth: 100%;\n\t}\n\t.component-container {\n\t\tflex: 1 1 0%;\n\t}\n`;\n\n//page spinner\nexport const LoaderWrapper = styled.div`\n\twidth: 100%;\n\theight: 100vh;\n\tmargin: 0;\n\tbackground-color: rgba(0, 0, 0, 0.6);\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\talign-content: center;\n\t.inner {\n\t\twidth: 100%;\n\t\theight: 100vh;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tpadding: 40px;\n\t\tbackground-color: ${DEFAULT_THEME.colorsV2.surface.standard};\n\t\tbox-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);\n\t\tborder-radius: 4px;\n\t\tflex-direction: column;\n\t}\n\n\t.loader {\n\t\twidth: 48px;\n\t\theight: 48px;\n\t\tborder: 5px solid ${DEFAULT_THEME.colorsV2.stroke.brand};\n\t\tborder-bottom-color: transparent;\n\t\tborder-radius: 50%;\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\t\tanimation: rotation 1s linear infinite;\n\t}\n\n\t@keyframes rotation {\n\t\t0% {\n\t\t\ttransform: rotate(0deg);\n\t\t}\n\t\t100% {\n\t\t\ttransform: rotate(360deg);\n\t\t}\n\t}\n`;\nexport const LoadingMessageWrapper = styled.div`\n\tmargin-top: 16px;\n`;\n\n//bik-layout\nexport const BikLayoutContainer = styled.div<{\n\ttype?: 'overflow-within' | 'overflow-body';\n\tbackgroundColor?: string;\n}>`\n\tdisplay: flex;\n\tflex-direction: row;\n\t${(props) => {\n\t\tif (props.type === 'overflow-within') {\n\t\t\treturn `\n      flex-grow: 0 !important;\n      flex-shrink: 0 !important;\n      flex-basis: calc(100vh - 56px) !important;\n      overflow: scroll;\n    `;\n\t\t} else {\n\t\t\treturn 'flex: 1;';\n\t\t}\n\t}}\n\tbackground-color: ${(props) =>\n\t\tprops.backgroundColor ?? DEFAULT_THEME.colorsV2.surface.hovered};\n\t.pd-24 {\n\t\tpadding: 24px;\n\t}\n\t.inner-wrapper {\n\t\twidth: 100%;\n\t}\n\t.disabled--wrapper {\n\t\tposition: fixed;\n\t\topacity: 0.5;\n\t\tz-index: 4;\n\t\theight: 500vh;\n\t\twidth: 100%;\n\t\tbackground-color: ${DEFAULT_THEME.colorsV2.surface.hovered};\n\t}\n`;\n\n//bik-\n\nexport const BikHeaderWrapper = styled.div`\n\tposition: sticky;\n\ttop: 0;\n\tz-index: 10;\n`;\n\nexport const BikHeaderContainer = styled.div`\n\tbackground-color: ${DEFAULT_THEME.colorsV2.surface.standard};\n\tborder-bottom: 1px solid ${DEFAULT_THEME.colorsV2.stroke.primary};\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: space-between;\n\talign-items: center;\n\theight: 56px;\n\tpadding: 16px;\n\t.cursor {\n\t\tcursor: pointer;\n\t}\n\t.brand {\n\t\tcolor: ${DEFAULT_THEME.colorsV2.stroke.brand};\n\t}\n\t.row--flex {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tgap: 8px;\n\t}\n`;\n\n//profile\n\nexport const MenuInnerContainer = styled.div`\n\tz-index: 1;\n\tpadding-top: 16px;\n\tpadding: 8px;\n\tdisplay: flex;\n\tflex-direction: column;\n\twidth: 291px;\n\t.divider {\n\t\tborder: 1px solid ${DEFAULT_THEME.colorsV2.background.inactive};\n\t\tmargin: 0px 4px;\n\t}\n\t.logout--container {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tpadding: 8px;\n\t\tgap: 8px;\n\t\tborder-radius: 8px;\n\t\tcursor: pointer;\n\t\tmargin-top: 10px;\n\t\t&:hover {\n\t\t\tbackground-color: ${DEFAULT_THEME.colorsV2.background.negative.light};\n\t\t}\n\t}\n`;\n\nexport const ProfileDropdownToggleContainer = styled(Dropdown.Toggle)`\n\tborder-radius: 4px;\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tjustify-content: space-between;\n\tpadding: 6px 8px;\n\tfont-weight: 400;\n\tfont-size: 14px;\n\tline-height: 20px;\n   .inner\n`;\n\nexport const ProfileDropdownInnerContainer = styled.div<{\n\tisDropdownOpen: boolean;\n}>`\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: 0px 8px;\n\tjustify-content: center;\n\talign-items: center;\n\tborder-radius: 50%;\n\tpadding: 6px;\n\tbackground-color: ${(props) =>\n\t\tprops.isDropdownOpen && DEFAULT_THEME.colorsV2.background.brandLight};\n\t&:hover {\n\t\tbackground-color: ${(props) =>\n\t\t\tprops.isDropdownOpen\n\t\t\t\t? DEFAULT_THEME.colorsV2.background.brandLight\n\t\t\t\t: DEFAULT_THEME.colorsV2.surface.hovered};\n\t}\n`;\n\nexport const UserNameTitleSmall = styled(TitleSmall)`\n\twhite-space: nowrap;\n\tmax-width: 161px;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n`;\n\nexport const UserAvatarContainer = styled.div`\n\twidth: 32px;\n\theight: 32px;\n\tborder-radius: 50%;\n\t.avatar--container {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tbackground-color: ${DEFAULT_THEME.colorsV2.background.inverse};\n\t\tborder-radius: 50%;\n\t\twidth: 32px;\n\t\theight: 32px;\n\t}\n\timg {\n\t\tobject-fit: contain;\n\t\theight: 100%;\n\t\twidth: 100%;\n\t}\n`;\n\nexport const StyledTooltip = styled(Tooltip)`\n\t.tooltip-inner {\n\t\tbackground-color: ${DEFAULT_THEME.colorsV2.surface.standard};\n\t\tbox-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);\n\t}\n\t.tooltip-arrow::before {\n\t\tdisplay: none;\n\t}\n`;\n\nexport const UserInfoContainer = styled.div`\n\tbackground-color: ${DEFAULT_THEME.colorsV2.surface.standard};\n\tmin-width: 188px;\n\tdisplay: flex;\n\tflex-direction: row;\n\tborder-top-right-radius: 4px;\n\tborder-top-left-radius: 4px;\n\tmargin-bottom: 8px;\n\tpadding: 8px;\n\tborder-radius: 8px;\n\tcursor: pointer;\n\t&:hover {\n\t\tbackground: ${DEFAULT_THEME.colorsV2.surface.hovered};\n\t}\n`;\nexport const StatusContainer = styled.div<{ isAvailable: boolean }>`\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tmargin-top: 4px;\n\t.availability--container {\n\t\tborder-width: 1px;\n\t\tmargin-right: 4px;\n\t\theight: 6px;\n\t\twidth: 6px;\n\t\tborder-style: solid;\n\t\tborder-color: ${(props) =>\n\t\t\tprops.isAvailable\n\t\t\t\t? DEFAULT_THEME.colorsV2.background.positive.vibrant\n\t\t\t\t: DEFAULT_THEME.colorsV2.content.secondary};\n\t\tbackground-color: ${(props) =>\n\t\t\tprops.isAvailable\n\t\t\t\t? DEFAULT_THEME.colorsV2.background.positive.vibrant\n\t\t\t\t: DEFAULT_THEME.colorsV2.surface.standard};\n\t\tborder-radius: 4px;\n\t}\n`;\n\nexport const UserStatusContainer = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tmargin-left: 16px;\n\tjustify-content: space-between;\n\tjustify-content: flex-start;\n`;\n\nexport const StyledBodyCaption = styled(BodyCaption)<{\n\tisAvailable: boolean;\n}>`\n\tcolor: ${(props) =>\n\t\tprops.isAvailable\n\t\t\t? DEFAULT_THEME.colorsV2.background.positive.vibrant\n\t\t\t: DEFAULT_THEME.colorsV2.content.secondary};\n`;\n\n//feature modal\n\nexport const FeatureModalContainer = styled.div<{\n\tzIndex?: number;\n\tresetHeight?: boolean;\n\trelativePostion?: boolean;\n}>`\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-end;\n\talign-items: flex-end;\n\tposition: fixed;\n\tbottom: 0;\n\twidth: fill-available;\n\theight: ${(props) => (props.resetHeight ? 'fit-content' : '650px')};\n\tpadding: 24px;\n\tz-index: ${(props) =>\n\t\tprops.zIndex ? props.zIndex : ComponentZindex.FEATURE_MODAL};\n\tbackground: linear-gradient(\n\t\t180deg,\n\t\trgba(255, 255, 255, 0) 0%,\n\t\t#ffffff 71.35%\n\t);\n\tfilter: drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.12));\n\t.cross-button {\n\t\twidth: 40px;\n\t\theight: 40px;\n\t\tbackground-color: ${COLORS.scrim.standard};\n\t\tborder-radius: 50%;\n\t\tposition: fixed;\n\t\tmargin: auto;\n\t\tbottom: 164px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tborder: 1px solid ${COLORS.stroke.primary};\n\t\tcursor: pointer;\n\t\tz-index: ${(props) => (props.zIndex ? props.zIndex : 5)};\n\t}\n`;\n\nexport const InnerModalContainer = styled.div`\n\twidth: 100%;\n\theight: 132px;\n\tbackground: ${COLORS.background.inverse};\n\tbox-shadow: 0px 4px 12px rgba(0, 0, 0, 0.12);\n\tborder-radius: 8px;\n\n\t.mt-8 {\n\t\tmargin-top: 9px;\n\t}\n\t.content-layout {\n\t\tpadding: 24px;\n\t\tgap: 8px;\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t}\n\n\t.cta-buttons {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 16px;\n\t}\n\t.title-color {\n\t\tcolor: ${COLORS.surface.subdued};\n\t}\n\t.subtitle-color {\n\t\tcolor: ${COLORS.content.secondaryInverse};\n\t}\n`;\nexport const RelativeModalContainer = styled.div`\n\twidth: fit-content;\n\tborder-radius: 8px;\n\tbox-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);\n\tposition: relative;\n\n\t.cross-container {\n\t\tposition: absolute;\n\t\tdisplay: flex;\n\t\twidth: 100%;\n\t\tjustify-content: flex-end;\n\t\tpadding: 12px;\n\t\tcursor: pointer;\n\t}\n\t.demo-container {\n\t\tpadding: 18px 24px;\n\t\tborder: 1px solid var(--stroke-color-stroke-negative-light-alt, #ffced4);\n\t\tbackground: var(--surface-color-background-negative-light, #ffebef);\n\t\tgap: 8px;\n\t\theight: 132px;\n\t\tmax-width: 494px;\n\t\tborder-radius: 8px;\n\t}\n\t.content-layout {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: flex-start;\n\t\tjustify-content: flex-start;\n\t\theight: 220px;\n\t}\n\t.left-content {\n\t\twidth: 261px;\n\t\timg {\n\t\t\theight: 100%;\n\t\t\twidth: 100%;\n\t\t\tobject-fit: contain;\n\t\t}\n\t}\n\t.right-content {\n\t\tpadding: 36px 24px;\n\t\theight: 100%;\n\t\tbackground-color: white;\n\t\t> * {\n\t\t\tmargin-top: 8px;\n\t\t}\n\t}\n\t.cta-button-container {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tjustify-content: flex-start;\n\t\talign-items: center;\n\t\tgap: 16px;\n\t\tmargin-top: 16px;\n\t}\n`;\n\nexport const FeatureModalV2Container = styled.div`\n\t.top-feature-content {\n\t\tmax-height: 285px;\n\t\timg {\n\t\t\theight: 100%;\n\t\t\twidth: 100%;\n\t\t\tobject-fit: contain;\n\t\t}\n\t}\n\t.mt-8 {\n\t\tmargin-top: 8px;\n\t}\n\t.bottom-feature-content {\n\t\tpadding: 36px 20px;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tgap: 16px;\n\t}\n\t.cta-buttons {\n\t\twidth: 100%;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 16px;\n\t\tjustify-content: center;\n\t\tmargin-top: 8px;\n\t}\n\t.title-class {\n\t\tmax-width: 500px;\n\t}\n\t.text-align-center {\n\t\ttext-align: center;\n\t}\n`;\n"],"names":["styled","LoaderWrapper","DEFAULT_THEME","LoadingMessageWrapper","BikLayoutContainer","props","BikHeaderWrapper","BikHeaderContainer","MenuInnerContainer","ProfileDropdownToggleContainer","Dropdown","ProfileDropdownInnerContainer","UserNameTitleSmall","TitleSmall","UserAvatarContainer","StyledTooltip","Tooltip","UserInfoContainer","StatusContainer","UserStatusContainer","StyledBodyCaption","BodyCaption","FeatureModalContainer","ComponentZindex","COLORS","InnerModalContainer","RelativeModalContainer","FeatureModalV2Container"],"mappings":"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"}
+{"version":3,"file":"CommonStyles.js","sources":["../../../../src/components/bik-layout/CommonStyles.tsx"],"sourcesContent":["import { Dropdown, Tooltip } from 'react-bootstrap';\nimport styled from 'styled-components';\nimport { COLORS, DEFAULT_THEME } from '@src/constants/Theme';\nimport { ComponentZindex } from '@src/constants/zindex';\nimport { BodyCaption, TitleSmall } from '../TypographyStyle';\n\nexport const GlobalContainer = styled.div`\n\t.global-container {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tjustify-content: flex-start;\n\t\twidth: 100%;\n\t}\n\t.component-container {\n\t\tflex: 1 1 0%;\n\t}\n`;\n\n//page spinner\nexport const LoaderWrapper = styled.div`\n\twidth: 100%;\n\theight: 100vh;\n\tmargin: 0;\n\tbackground-color: rgba(0, 0, 0, 0.6);\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\talign-content: center;\n\t.inner {\n\t\twidth: 100%;\n\t\theight: 100vh;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tpadding: 40px;\n\t\tbackground-color: ${DEFAULT_THEME.colorsV2.surface.standard};\n\t\tbox-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);\n\t\tborder-radius: 4px;\n\t\tflex-direction: column;\n\t}\n\n\t.loader {\n\t\twidth: 48px;\n\t\theight: 48px;\n\t\tborder: 5px solid ${DEFAULT_THEME.colorsV2.stroke.brand};\n\t\tborder-bottom-color: transparent;\n\t\tborder-radius: 50%;\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\t\tanimation: rotation 1s linear infinite;\n\t}\n\n\t@keyframes rotation {\n\t\t0% {\n\t\t\ttransform: rotate(0deg);\n\t\t}\n\t\t100% {\n\t\t\ttransform: rotate(360deg);\n\t\t}\n\t}\n`;\nexport const LoadingMessageWrapper = styled.div`\n\tmargin-top: 16px;\n`;\n\n//bik-layout\nexport const BikLayoutContainer = styled.div<{\n\ttype?: 'overflow-within' | 'overflow-body';\n\tbackgroundColor?: string;\n}>`\n\tdisplay: flex;\n\tflex-direction: row;\n\t${(props) => {\n\t\tif (props.type === 'overflow-within') {\n\t\t\treturn `\n      flex-grow: 0 !important;\n      flex-shrink: 0 !important;\n      flex-basis: calc(100vh - 56px) !important;\n      overflow: scroll;\n    `;\n\t\t} else {\n\t\t\treturn 'flex: 1;';\n\t\t}\n\t}}\n\tbackground-color: ${(props) =>\n\t\tprops.backgroundColor ?? DEFAULT_THEME.colorsV2.surface.hovered};\n\t.pd-24 {\n\t\tpadding: 24px;\n\t}\n\t.inner-wrapper {\n\t\twidth: 100%;\n\t}\n\t.disabled--wrapper {\n\t\tposition: fixed;\n\t\topacity: 0.5;\n\t\tz-index: 4;\n\t\theight: 500vh;\n\t\twidth: 100%;\n\t\tbackground-color: ${DEFAULT_THEME.colorsV2.surface.hovered};\n\t}\n`;\n\n//bik-\n\nexport const BikHeaderWrapper = styled.div`\n\tposition: sticky;\n\ttop: 0;\n\tz-index: 10;\n`;\n\nexport const BikHeaderContainer = styled.div`\n\tbackground-color: ${DEFAULT_THEME.colorsV2.surface.standard};\n\tborder-bottom: 1px solid #e0e0e0;\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: space-between;\n\talign-items: center;\n\theight: 56px;\n\tborder-bottom-width: 0.5px;\n\tborder-color: ${DEFAULT_THEME.colorsV2.background.inactive};\n\tpadding: 16px;\n\t.cursor {\n\t\tcursor: pointer;\n\t}\n\t.brand {\n\t\tcolor: ${DEFAULT_THEME.colorsV2.stroke.brand};\n\t}\n\t.row--flex {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tgap: 8px;\n\t}\n`;\n\n//profile\n\nexport const MenuInnerContainer = styled.div`\n\tz-index: 1;\n\tpadding-top: 16px;\n\tpadding: 8px;\n\tdisplay: flex;\n\tflex-direction: column;\n\twidth: 291px;\n\t.divider {\n\t\tborder: 1px solid ${DEFAULT_THEME.colorsV2.background.inactive};\n\t\tmargin: 0px 4px;\n\t}\n\t.logout--container {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tpadding: 8px;\n\t\tgap: 8px;\n\t\tborder-radius: 8px;\n\t\tcursor: pointer;\n\t\tmargin-top: 10px;\n\t\t&:hover {\n\t\t\tbackground-color: ${DEFAULT_THEME.colorsV2.background.negative.light};\n\t\t}\n\t}\n`;\n\nexport const ProfileDropdownToggleContainer = styled(Dropdown.Toggle)`\n\tborder-radius: 4px;\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tjustify-content: space-between;\n\tpadding: 6px 8px;\n\tfont-weight: 400;\n\tfont-size: 14px;\n\tline-height: 20px;\n   .inner\n`;\n\nexport const ProfileDropdownInnerContainer = styled.div<{\n\tisDropdownOpen: boolean;\n}>`\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: 0px 8px;\n\tjustify-content: center;\n\talign-items: center;\n\tborder-radius: 50%;\n\tpadding: 6px;\n\tbackground-color: ${(props) =>\n\t\tprops.isDropdownOpen && DEFAULT_THEME.colorsV2.background.brandLight};\n\t&:hover {\n\t\tbackground-color: ${(props) =>\n\t\t\tprops.isDropdownOpen\n\t\t\t\t? DEFAULT_THEME.colorsV2.background.brandLight\n\t\t\t\t: DEFAULT_THEME.colorsV2.surface.hovered};\n\t}\n`;\n\nexport const UserNameTitleSmall = styled(TitleSmall)`\n\twhite-space: nowrap;\n\tmax-width: 161px;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n`;\n\nexport const UserAvatarContainer = styled.div`\n\twidth: 32px;\n\theight: 32px;\n\tborder-radius: 50%;\n\t.avatar--container {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tbackground-color: ${DEFAULT_THEME.colorsV2.background.inverse};\n\t\tborder-radius: 50%;\n\t\twidth: 32px;\n\t\theight: 32px;\n\t}\n\timg {\n\t\tobject-fit: contain;\n\t\theight: 100%;\n\t\twidth: 100%;\n\t}\n`;\n\nexport const StyledTooltip = styled(Tooltip)`\n\t.tooltip-inner {\n\t\tbackground-color: ${DEFAULT_THEME.colorsV2.surface.standard};\n\t\tbox-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);\n\t}\n\t.tooltip-arrow::before {\n\t\tdisplay: none;\n\t}\n`;\n\nexport const UserInfoContainer = styled.div`\n\tbackground-color: ${DEFAULT_THEME.colorsV2.surface.standard};\n\tmin-width: 188px;\n\tdisplay: flex;\n\tflex-direction: row;\n\tborder-top-right-radius: 4px;\n\tborder-top-left-radius: 4px;\n\tmargin-bottom: 8px;\n\tpadding: 8px;\n\tborder-radius: 8px;\n\tcursor: pointer;\n\t&:hover {\n\t\tbackground: ${DEFAULT_THEME.colorsV2.surface.hovered};\n\t}\n`;\nexport const StatusContainer = styled.div<{ isAvailable: boolean }>`\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tmargin-top: 4px;\n\t.availability--container {\n\t\tborder-width: 1px;\n\t\tmargin-right: 4px;\n\t\theight: 6px;\n\t\twidth: 6px;\n\t\tborder-style: solid;\n\t\tborder-color: ${(props) =>\n\t\t\tprops.isAvailable\n\t\t\t\t? DEFAULT_THEME.colorsV2.background.positive.vibrant\n\t\t\t\t: DEFAULT_THEME.colorsV2.content.secondary};\n\t\tbackground-color: ${(props) =>\n\t\t\tprops.isAvailable\n\t\t\t\t? DEFAULT_THEME.colorsV2.background.positive.vibrant\n\t\t\t\t: DEFAULT_THEME.colorsV2.surface.standard};\n\t\tborder-radius: 4px;\n\t}\n`;\n\nexport const UserStatusContainer = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tmargin-left: 16px;\n\tjustify-content: space-between;\n\tjustify-content: flex-start;\n`;\n\nexport const StyledBodyCaption = styled(BodyCaption)<{\n\tisAvailable: boolean;\n}>`\n\tcolor: ${(props) =>\n\t\tprops.isAvailable\n\t\t\t? DEFAULT_THEME.colorsV2.background.positive.vibrant\n\t\t\t: DEFAULT_THEME.colorsV2.content.secondary};\n`;\n\n//feature modal\n\nexport const FeatureModalContainer = styled.div<{\n\tzIndex?: number;\n\tresetHeight?: boolean;\n\trelativePostion?: boolean;\n}>`\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-end;\n\talign-items: flex-end;\n\tposition: fixed;\n\tbottom: 0;\n\twidth: fill-available;\n\theight: ${(props) => (props.resetHeight ? 'fit-content' : '650px')};\n\tpadding: 24px;\n\tz-index: ${(props) =>\n\t\tprops.zIndex ? props.zIndex : ComponentZindex.FEATURE_MODAL};\n\tbackground: linear-gradient(\n\t\t180deg,\n\t\trgba(255, 255, 255, 0) 0%,\n\t\t#ffffff 71.35%\n\t);\n\tfilter: drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.12));\n\t.cross-button {\n\t\twidth: 40px;\n\t\theight: 40px;\n\t\tbackground-color: ${COLORS.scrim.standard};\n\t\tborder-radius: 50%;\n\t\tposition: fixed;\n\t\tmargin: auto;\n\t\tbottom: 164px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tborder: 1px solid ${COLORS.stroke.primary};\n\t\tcursor: pointer;\n\t\tz-index: ${(props) => (props.zIndex ? props.zIndex : 5)};\n\t}\n`;\n\nexport const InnerModalContainer = styled.div`\n\twidth: 100%;\n\theight: 132px;\n\tbackground: ${COLORS.background.inverse};\n\tbox-shadow: 0px 4px 12px rgba(0, 0, 0, 0.12);\n\tborder-radius: 8px;\n\n\t.mt-8 {\n\t\tmargin-top: 9px;\n\t}\n\t.content-layout {\n\t\tpadding: 24px;\n\t\tgap: 8px;\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t}\n\n\t.cta-buttons {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 16px;\n\t}\n\t.title-color {\n\t\tcolor: ${COLORS.surface.subdued};\n\t}\n\t.subtitle-color {\n\t\tcolor: ${COLORS.content.secondaryInverse};\n\t}\n`;\nexport const RelativeModalContainer = styled.div`\n\twidth: fit-content;\n\tborder-radius: 8px;\n\tbox-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);\n\tposition: relative;\n\n\t.cross-container {\n\t\tposition: absolute;\n\t\tdisplay: flex;\n\t\twidth: 100%;\n\t\tjustify-content: flex-end;\n\t\tpadding: 12px;\n\t\tcursor: pointer;\n\t}\n\t.demo-container {\n\t\tpadding: 18px 24px;\n\t\tborder: 1px solid var(--stroke-color-stroke-negative-light-alt, #ffced4);\n\t\tbackground: var(--surface-color-background-negative-light, #ffebef);\n\t\tgap: 8px;\n\t\theight: 132px;\n\t\tmax-width: 494px;\n\t\tborder-radius: 8px;\n\t}\n\t.content-layout {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: flex-start;\n\t\tjustify-content: flex-start;\n\t\theight: 220px;\n\t}\n\t.left-content {\n\t\twidth: 261px;\n\t\timg {\n\t\t\theight: 100%;\n\t\t\twidth: 100%;\n\t\t\tobject-fit: contain;\n\t\t}\n\t}\n\t.right-content {\n\t\tpadding: 36px 24px;\n\t\theight: 100%;\n\t\tbackground-color: white;\n\t\t> * {\n\t\t\tmargin-top: 8px;\n\t\t}\n\t}\n\t.cta-button-container {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tjustify-content: flex-start;\n\t\talign-items: center;\n\t\tgap: 16px;\n\t\tmargin-top: 16px;\n\t}\n`;\n\nexport const FeatureModalV2Container = styled.div`\n\t.top-feature-content {\n\t\tmax-height: 285px;\n\t\timg {\n\t\t\theight: 100%;\n\t\t\twidth: 100%;\n\t\t\tobject-fit: contain;\n\t\t}\n\t}\n\t.mt-8 {\n\t\tmargin-top: 8px;\n\t}\n\t.bottom-feature-content {\n\t\tpadding: 36px 20px;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tgap: 16px;\n\t}\n\t.cta-buttons {\n\t\twidth: 100%;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 16px;\n\t\tjustify-content: center;\n\t\tmargin-top: 8px;\n\t}\n\t.title-class {\n\t\tmax-width: 500px;\n\t}\n\t.text-align-center {\n\t\ttext-align: center;\n\t}\n`;\n"],"names":["styled","LoaderWrapper","DEFAULT_THEME","LoadingMessageWrapper","BikLayoutContainer","props","BikHeaderWrapper","BikHeaderContainer","MenuInnerContainer","ProfileDropdownToggleContainer","Dropdown","ProfileDropdownInnerContainer","UserNameTitleSmall","TitleSmall","UserAvatarContainer","StyledTooltip","Tooltip","UserInfoContainer","StatusContainer","UserStatusContainer","StyledBodyCaption","BodyCaption","FeatureModalContainer","ComponentZindex","COLORS","InnerModalContainer","RelativeModalContainer","FeatureModalV2Container"],"mappings":"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"}

package/dist/esm/components/button/themes.js

@@ -156,7 +156,7 @@ const y = (t, n, e, a, i) => {
       n,
       r.stroke.brandLightAlt
     )}`;
-  if (t === "secondaryGray" || t === "tertiaryGray")
+  if (t === "secondaryGray")
     return `background-color: ${r.surface.hovered}; ${o(
       n,
       r.stroke.primary

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

@@ -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 strokeStyle = (size: Size, color: string, width = 1): string =>\n\tsize === 'xs'\n\t\t? `box-shadow: inset 0 0 0 ${width}px ${color}; border: none;`\n\t\t: `border: ${width}px solid ${color};`;\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 strokeStyle(size, COLORS.stroke.brandLightAlt);\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn strokeStyle(size, 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 strokeStyle(\n\t\t\t\tsize,\n\t\t\t\tgetBorderColor(type, inverse, error),\n\t\t\t\tversion === '2.0' ? 0.5 : 1,\n\t\t\t);\n\t\t}\n\t\treturn 'border: none;';\n\t}\n\n\tif (type === 'secondary') {\n\t\treturn strokeStyle(\n\t\t\tsize,\n\t\t\tgetBorderColor(type, false, error),\n\t\t\tversion === '2.0' ? 0.5 : 1,\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}; ${strokeStyle(\n\t\t\tsize,\n\t\t\tCOLORS.stroke.primary,\n\t\t)}`;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn strokeStyle(size, 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? strokeStyle(size, 'rgba(255, 255, 255, 0.5)')\n\t\t\t: strokeStyle(size, 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}; ${strokeStyle(\n\t\t\tsize,\n\t\t\tCOLORS.stroke.brandLightAlt,\n\t\t)}`;\n\t}\n\tif (type === 'secondaryGray' || type === 'tertiaryGray') {\n\t\treturn `background-color: ${COLORS.surface.hovered}; ${strokeStyle(\n\t\t\tsize,\n\t\t\tCOLORS.stroke.primary,\n\t\t)}`;\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 strokeStyle(size, COLORS.stroke.brandLightAlt);\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn strokeStyle(size, 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? strokeStyle(size, COLORS.content.secondary)\n\t\t\t: strokeStyle(size, 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","strokeStyle","color","width","getBorder","version","getLinearGradientValue","getHoverButtonBackgroundCustom","percent","num","amt","R","G","B","getLoadingButtonBackgroundCustom","getHoverButtonBackground","getHoverButtonTextDecorationStyle","generateInverseHoverBackground","generateDisabledStyling","getDashedBorderStyling","borderColor","getClickEffect","getLoadingBackground","getLoadingBorder","SpinnerColorMap","getButtonIconColor","isLoading"],"mappings":"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"}
+{"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 strokeStyle = (size: Size, color: string, width = 1): string =>\n\tsize === 'xs'\n\t\t? `box-shadow: inset 0 0 0 ${width}px ${color}; border: none;`\n\t\t: `border: ${width}px solid ${color};`;\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 strokeStyle(size, COLORS.stroke.brandLightAlt);\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn strokeStyle(size, 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 strokeStyle(\n\t\t\t\tsize,\n\t\t\t\tgetBorderColor(type, inverse, error),\n\t\t\t\tversion === '2.0' ? 0.5 : 1,\n\t\t\t);\n\t\t}\n\t\treturn 'border: none;';\n\t}\n\n\tif (type === 'secondary') {\n\t\treturn strokeStyle(\n\t\t\tsize,\n\t\t\tgetBorderColor(type, false, error),\n\t\t\tversion === '2.0' ? 0.5 : 1,\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}; ${strokeStyle(\n\t\t\tsize,\n\t\t\tCOLORS.stroke.primary,\n\t\t)}`;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn strokeStyle(size, 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? strokeStyle(size, 'rgba(255, 255, 255, 0.5)')\n\t\t\t: strokeStyle(size, 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}; ${strokeStyle(\n\t\t\tsize,\n\t\t\tCOLORS.stroke.brandLightAlt,\n\t\t)}`;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn `background-color: ${COLORS.surface.hovered}; ${strokeStyle(\n\t\t\tsize,\n\t\t\tCOLORS.stroke.primary,\n\t\t)}`;\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 strokeStyle(size, COLORS.stroke.brandLightAlt);\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn strokeStyle(size, 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? strokeStyle(size, COLORS.content.secondary)\n\t\t\t: strokeStyle(size, 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","strokeStyle","color","width","getBorder","version","getLinearGradientValue","getHoverButtonBackgroundCustom","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

@@ -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

@@ -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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"}
+{"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":"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"}

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

@@ -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

@@ -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

@@ -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":"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"}
+{"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

@@ -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;