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

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

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

Files changed (65) hide show

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

@@ -1,34 +1,35 @@
-import t from "styled-components";
+import t, { createGlobalStyle as e } from "styled-components";
 import { COLORS as r } from "../../constants/Theme.js";
-const e = (o) => o.selectRange ? `
+const a = (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;
-    `, d = t.div`
+    `, n = t.div`
 	position: relative;
 	z-index: 99999;
 	width: fit-content;
 	background: ${r.text.white};
-	border: 1px solid ${r.stroke.primary};
-	border-radius: 4px;
+	border: none !important;
+	border-radius: 8px !important;
 	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: 4px;
-		border-top-right-radius: 4px;
+		border-top-left-radius: 8px;
+		border-top-right-radius: 8px;
 	}
 	> :last-child {
-		border-bottom-left-radius: 4px;
-		border-bottom-right-radius: 4px;
+		border-bottom-left-radius: 8px;
+		border-bottom-right-radius: 8px;
 	}
 	.react-calendar {
 		background: ${r.text.white};
-		border: none;
+		border: none !important;
 		box-shadow: none;
 		border-radius: 0;
 		color: ${r.text.primary};
@@ -112,7 +113,7 @@ const e = (o) => o.selectRange ? `
 							border-bottom-right-radius: 0 !important;
 						}
 						&.react-calendar__tile--rangeEnd {
-							${(o) => e(o)}
+							${(o) => a(o)}
 							border-top-left-radius: 4px !important;
 							border-bottom-left-radius: 4px !important;
 							&:enabled:hover {
@@ -211,7 +212,7 @@ const e = (o) => o.selectRange ? `
 			background-color: #f0f0f0 !important;
 		}
 	}
-`, i = t.div`
+`, p = t.div`
 	display: flex;
 	gap: 10px;
 	padding: 16px;
@@ -226,17 +227,23 @@ const e = (o) => o.selectRange ? `
 	flex: 1;
 	min-width: 0;
 	max-width: 154px;
-`, p = t.div`
+`, c = 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 {
-  d as PickerContainer,
+  l as DatePickerTippyOverride,
+  n as PickerContainer,
   b as TimeInputWrapper,
-  p as TimeLabel,
-  i as TimePickerContainer
+  c as TimeLabel,
+  p as TimePickerContainer
 };
 //# sourceMappingURL=DatePicker.styled.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"DatePicker.styled.js","sources":["../../../../src/components/datePicker/DatePicker.styled.ts"],"sourcesContent":["import styled 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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"}
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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"}

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

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

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ChipInput.js","sources":["../../../../src/components/dropdown/ChipInput.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport StringUtils from '@src/utils/StringUtils';\nimport { COLORS } from '@src/constants/Theme';\nimport DownIcon from '../../assets/icons/chevronDown.svg';\nimport CrossIcon from '../../assets/icons/cross.svg';\nimport ErrorIcon from '../../assets/icons/errorInfo.svg';\nimport { InputFooter } from '../input/Input.styled';\nimport { Tag } from '../tag';\nimport { Tooltip } from '../tooltips';\nimport { BodyCaption } from '../TypographyStyle';\nimport { ChipInputWrapper } from './Common.styled';\nimport { SingleOption } from './type';\n\ninterface ChipInputProps {\n\tplaceholder?: string;\n\tchips: SingleOption[];\n\tonDeleteChip: (chip: SingleOption) => void;\n\tcontainerStyle?: React.CSSProperties;\n\tisDropdownOpened?: boolean;\n\tsizeToUse?: 'default' \| 'small' \| 'x-small';\n\terrorMessage?: string;\n\tshowLabelsOnMoreHover?: boolean;\n}\n\nconst getMaxChipsCharCount = (chips: SingleOption[]) => {\n\tif (chips.length === 1) return 100;\n\tif (chips.length === 2) return 40;\n\treturn 34;\n};\n\nconst ChipInput: React.FC<ChipInputProps> = ({\n\tchips,\n\tonDeleteChip,\n\tcontainerStyle = {},\n\tsizeToUse = 'default',\n\tisDropdownOpened,\n\tplaceholder = 'Select..',\n\terrorMessage = '',\n\tshowLabelsOnMoreHover = false,\n}) => {\n\tconst [options, setOptions] = useState<SingleOption[]>();\n\tconst [remainingOptionsCnt, setRemainingOptionsCnt] = useState(0);\n\tconst [remainingOptionsLabels, setRemainingOptionsLabels] = useState<\n\t\tstring[]\n\t>([]);\n\n\tuseEffect(() => {\n\t\tif (!chips) return;\n\t\tlet combineCharCnt = 0;\n\t\tconst MAX_CHAR = getMaxChipsCharCount(chips);\n\t\tlet options = chips.filter((option) => {\n\t\t\tcombineCharCnt += option.label.length;\n\t\t\treturn combineCharCnt <= MAX_CHAR;\n\t\t});\n\t\tif (options.length === 0 && chips.length > 0) {\n\t\t\toptions = [chips[0]];\n\t\t}\n\t\tsetOptions(options);\n\t\tconst remainingChips = chips.filter((option) => !options.includes(option));\n\t\tconst labels = remainingChips.map((option) => option.label);\n\t\tsetRemainingOptionsLabels(labels);\n\t\tsetRemainingOptionsCnt(chips.length - options.length);\n\t}, [chips]);\n\n\treturn (\n\t\t<>\n\t\t\t<ChipInputWrapper style={{ ...containerStyle }} error={!!errorMessage}>\n\t\t\t\t<div className=\"chips-container\">\n\t\t\t\t\t{options?.map((chip, index) => (\n\t\t\t\t\t\t<div key={index} style={{ zIndex: 2 }}>\n\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\ttagText={StringUtils.truncateText(\n\t\t\t\t\t\t\t\t\tchip.selectedLabel \|\| chip.label,\n\t\t\t\t\t\t\t\t\t40,\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\tTrailingIcon={~~() => (\n\t\t\t\t\t\t\t\t\t<~~CrossIcon~~\n\t\t\t\t\t\t\t\t\t\twidth={12~~}\n\t\t\t\t\t\t\t\~~t\t\theight~~={~~12}\n\t\t\t\t\t\t\t\t\t\tstyle={{ cursor: 'pointer' }}\n\t\t\t\t\t\t\t\t\t\tonClick={~~() => {\n\t\t\t\t\t\t\t\t\~~t\t\~~tonDeleteChip(chip);\n\t\t\t\t\t\t\t\t~~\t\t~~}}\n\t\t\t\t\t\t\t~~\t\t/>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t~~>\n\t\t\t\t\t\t\t\t{chip.selectedLabel \|\| chip.label}\n\t\t\t\t\t\t\t</Tag>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t))}\n\t\t\t\t\t{!!remainingOptionsCnt && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tposition: 'relative',\n\t\t\t\t\t\t\t\tzIndex: 2,\n\t\t\t\t\t\t\t\tpointerEvents: 'auto',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Tooltip\n\t\t\t\t\t\t\t\tbody={''}\n\t\t\t\t\t\t\t\tplacement=\"bottom\"\n\t\t\t\t\t\t\t\ttooltipContent={\n\t\t\t\t\t\t\t\t\tshowLabelsOnMoreHover && remainingOptionsLabels.length > 0 ? (\n\t\t\t\t\t\t\t\t\t\t<div style={{ padding: '4px' }}>\n\t\t\t\t\t\t\t\t\t\t\t{remainingOptionsLabels.map((label, index) => (\n\t\t\t\t\t\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{ color: COLORS.text.white }}\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t) : undefined\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<BodyCaption color={COLORS.content.placeholder}>\n\t\t\t\t\t\t\t\t\t{`+${remainingOptionsCnt} more`}\n\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{chips.length === 0 && (\n\t\t\t\t\t\t<div ~~style~~={{ color: COLORS.content.placeholder }}>\n\t\t\t\t\t\t\t{placeholder}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\n\t\t\t\t<div>\n\t\t\t\t\t<DownIcon\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\ttransform: isDropdownOpened ? 'rotate(180deg)' : 'rotate(0deg)',\n\t\t\t\t\t\t}}\n\t\t\t\t\t\twidth={\n\t\t\t\t\t\t\tsizeToUse === 'x-small' ? 16 : sizeToUse === 'small' ? 20 : 24\n\t\t\t\t\t\t}\n\t\t\t\t\t\theight={\n\t\t\t\t\t\t\tsizeToUse === 'x-small' ? 16 : sizeToUse === 'small' ? 20 : 24\n\t\t\t\t\t\t}\n\t\t\t\t\t\tcolor={COLORS.content.primary}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</ChipInputWrapper>\n\t\t\t{!!errorMessage && (\n\t\t\t\t<InputFooter invalid={true}>\n\t\t\t\t\t{!!errorMessage && <ErrorIcon width={16} height={16} />}\n\t\t\t\t\t{errorMessage}\n\t\t\t\t</InputFooter>\n\t\t\t)}\n\t\t</>\n\t);\n};\n\nexport default ChipInput;\n"],"names":["getMaxChipsCharCount","chips","ChipInput","onDeleteChip","containerStyle","sizeToUse","isDropdownOpened","placeholder","errorMessage","showLabelsOnMoreHover","options","setOptions","useState","remainingOptionsCnt","setRemainingOptionsCnt","remainingOptionsLabels","setRemainingOptionsLabels","useEffect","combineCharCnt","MAX_CHAR","option","labels","jsxs","Fragment","ChipInputWrapper","chip","index","jsx","Tag","StringUtils","CrossIcon","Tooltip","label","BodyCaption","COLORS","DownIcon","InputFooter","ErrorIcon"],"mappings":";;;;;;;;;;;;~~AAwBA~~,MAAMA,IAAuB,CAACC,MACzBA,EAAM,WAAW,IAAU,MAC3BA,EAAM,WAAW,IAAU,KACxB,IAGFC,IAAsC,CAAC;AAAA,EAC5C,OAAAD;AAAA,EACA,cAAAE;AAAA,EACA,gBAAAC,IAAiB,CAAA;AAAA,EACjB,WAAAC,IAAY;AAAA,EACZ,kBAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,cAAAC,IAAe;AAAA,EACf,uBAAAC,IAAwB;~~AACzB~~,MAAM;AACL,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAA,GACxB,CAACC,GAAqBC,CAAsB,IAAIF,EAAS,CAAC,GAC1D,CAACG,GAAwBC,CAAyB,IAAIJ,EAE1D,CAAA,CAAE;AAEJ,SAAAK,EAAU,MAAM;AACf,QAAI,~~CAAChB~~,EAAO;AACZ,~~QAAIiB~~,IAAiB;AACrB,UAAMC,~~IAAWnB~~,EAAqBC,CAAK;AAC3C,~~QAAIS~~,~~IAAUT~~,EAAM,OAAO,~~CAACmB~~,OAC3BF,KAAkBE,EAAO,MAAM,QACxBF,KAAkBC,EACzB;AACD,IAAIT,EAAQ,WAAW,~~KAAKT~~,EAAM,SAAS,~~MAC1CS~~,IAAU,~~CAACT~~,EAAM,CAAC,CAAC,~~IAEpBU~~,EAAWD,CAAO;AAElB,UAAMW,~~IADiBpB~~,EAAM,OAAO,~~CAACmB~~,MAAW,CAACV,EAAQ,SAASU,CAAM,CAAC,EAC3C,IAAI,CAACA,MAAWA,EAAO,KAAK;AAC1D,IAAAJ,EAA0BK,CAAM,GAChCP,~~EAAuBb~~,EAAM,~~SAASS~~,EAAQ,MAAM;AAAA,EACrD,GAAG,~~CAACT~~,CAAK,CAAC,GAGT,~~gBAAAqB~~,EAAAC,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAD,EAACE,GAAA,EAAiB,OAAO,EAAE,~~GAAGpB~~,KAAkB,OAAO,CAAC,CAACI,GACxD,UAAA;AAAA,MAAA,~~gBAAAc~~,EAAC,OAAA,EAAI,WAAU,mBACb,UAAA;AAAA,QAAAZ,GAAS,IAAI,CAACe,GAAMC,MACpB,gBAAAC,EAAC,SAAgB,OAAO,EAAE,QAAQ,EAAA,GACjC,UAAA,gBAAAA;AAAA,UAACC;AAAA,UAAA;AAAA,YACA,SAASC,EAAY;AAAA,cACpBJ,EAAK,iBAAiBA,EAAK;AAAA,cAC3B;AAAA,YAAA;AAAA,YAED,~~cAAc,MACb,gBAAAE~~;~~AAAA,cAACG;~~AAAAA,~~cAAA;AAAA~~,~~gBACA~~,~~OAAO;AAAA,gBACP,QAAQ;AAAA,gBACR,OAAO,EAAE,QAAQ,UAAA;AAAA,gBACjB,SAAS,~~MAAM;~~AACd~~,~~kBAAA3B~~,~~EAAasB~~,CAAI;AAAA,~~gBAClB~~;AAAA,~~cAAA;AAAA~~,~~YAAA;AAAA,YAID,~~UAAAA,EAAK,iBAAiBA,EAAK;AAAA,UAAA;AAAA,QAAA,EAC7B,~~GAlBSC~~,~~CAmBV~~,CACA;AAAA,QACA,CAAC,CAACb,KACF,gBAAAc;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,OAAO;AAAA,cACN,UAAU;AAAA,cACV,QAAQ;AAAA,cACR,eAAe;AAAA,YAAA;AAAA,YAGhB,UAAA,gBAAAA;AAAA,cAACI;AAAA,cAAA;AAAA,gBACA,MAAM;AAAA,gBACN,WAAU;AAAA,gBACV,~~gBACCtB~~,~~KAAyBM~~,EAAuB,SAAS,sBACvD,OAAA,EAAI,OAAO,EAAE,SAAS,SACrB,UAAAA,EAAuB,IAAI,CAACiB,GAAON,MACnC,gBAAAC;AAAA,kBAACM;AAAA,kBAAA;AAAA,oBACA,OAAO,EAAE,OAAOC,EAAO,KAAK,MAAA;AAAA,oBAG3B,UAAAF;AAAA,kBAAA;AAAA,kBAFIN;AAAA,gBAAA,CAIN,GACF,IACG;AAAA,gBAGL,UAAA,gBAAAC,EAACM,KAAY,OAAOC,EAAO,QAAQ,aACjC,UAAA,IAAIrB,CAAmB,QAAA,CACzB;AAAA,cAAA;AAAA,YAAA;AAAA,UACD;AAAA,QAAA;AAAA,~~QAIDZ~~,EAAM,WAAW,KACjB,~~gBAAA0B~~,~~EAAC~~,~~OAAA~~,~~EAAI~~,OAAO,EAAE,~~OAAOO~~,EAAO,QAAQ,YAAA,~~GAClC~~,~~UAAA3B~~,~~EAAA~~,~~CACF~~;AAAA,~~MAAA~~,GAEF;AAAA,wBAEC,OAAA,EACA,UAAA,~~gBAAAoB~~;AAAA,QAACQ;AAAAA,QAAA;AAAA,UACA,OAAO;AAAA,YACN,~~WAAW7B~~,IAAmB,mBAAmB;AAAA,UAAA;AAAA,UAElD,OACCD,MAAc,YAAY,KAAKA,MAAc,UAAU,KAAK;AAAA,UAE7D,QACCA,MAAc,YAAY,KAAKA,MAAc,UAAU,KAAK;AAAA,UAE7D,~~OAAO6B~~,EAAO,QAAQ;AAAA,QAAA;AAAA,MAAA,EACvB,CACD;AAAA,IAAA,GACD;AAAA,IACC,CAAC,~~CAAC1B~~,KACF,~~gBAAAc~~,EAACc,GAAA,EAAY,SAAS,IACpB,UAAA;AAAA,MAAA,CAAC,~~CAAC5B~~,KAAgB,~~gBAAAmB~~,EAACU,KAAU,OAAO,IAAI,QAAQ,IAAI;AAAA,~~MACpD7B~~;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,GAEF;AAEF;"}
1	+ {"version":3,"file":"ChipInput.js","sources":["../../../../src/components/dropdown/ChipInput.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport StringUtils from '@src/utils/StringUtils';\nimport { COLORS } from '@src/constants/Theme';\nimport DownIcon from '../../assets/icons/chevronDown.svg';\nimport CrossIcon from '../../assets/icons/cross.svg';\nimport ErrorIcon from '../../assets/icons/errorInfo.svg';\nimport { InputFooter } from '../input/Input.styled';\nimport { Tag } from '../tag';\nimport { Tooltip } from '../tooltips';\nimport { BodyCaption } from '../TypographyStyle';\nimport { ChipInputWrapper } from './Common.styled';\nimport { SingleOption } from './type';\n\ninterface ChipInputProps {\n\tplaceholder?: string;\n\tchips: SingleOption[];\n\tonDeleteChip: (chip: SingleOption) => void;\n\tcontainerStyle?: React.CSSProperties;\n\tisDropdownOpened?: boolean;\n\tsizeToUse?: 'default' \| 'small' \| 'x-small';\n\terrorMessage?: string;\n\tshowLabelsOnMoreHover?: boolean;\n\tplaceholderColor?: string;\n}\n\nconst getMaxChipsCharCount = (chips: SingleOption[]) => {\n\tif (chips.length === 1) return 100;\n\tif (chips.length === 2) return 40;\n\treturn 34;\n};\n\nconst ChipInput: React.FC<ChipInputProps> = ({\n\tchips,\n\tonDeleteChip,\n\tcontainerStyle = {},\n\tsizeToUse = 'default',\n\tisDropdownOpened,\n\tplaceholder = 'Select..',\n\terrorMessage = '',\n\tshowLabelsOnMoreHover = false,\n\tplaceholderColor,\n}) => {\n\tconst [options, setOptions] = useState<SingleOption[]>();\n\tconst [remainingOptionsCnt, setRemainingOptionsCnt] = useState(0);\n\tconst [remainingOptionsLabels, setRemainingOptionsLabels] = useState<\n\t\tstring[]\n\t>([]);\n\n\tuseEffect(() => {\n\t\tif (!chips) return;\n\t\tlet combineCharCnt = 0;\n\t\tconst MAX_CHAR = getMaxChipsCharCount(chips);\n\t\tlet options = chips.filter((option) => {\n\t\t\tcombineCharCnt += option.label.length;\n\t\t\treturn combineCharCnt <= MAX_CHAR;\n\t\t});\n\t\tif (options.length === 0 && chips.length > 0) {\n\t\t\toptions = [chips[0]];\n\t\t}\n\t\tsetOptions(options);\n\t\tconst remainingChips = chips.filter((option) => !options.includes(option));\n\t\tconst labels = remainingChips.map((option) => option.label);\n\t\tsetRemainingOptionsLabels(labels);\n\t\tsetRemainingOptionsCnt(chips.length - options.length);\n\t}, [chips]);\n\n\treturn (\n\t\t<>\n\t\t\t<ChipInputWrapper style={{ ...containerStyle }} error={!!errorMessage}>\n\t\t\t\t<div className=\"chips-container\">\n\t\t\t\t\t{options?.map((chip, index) => (\n\t\t\t\t\t\t<div key={index} style={{ zIndex: 2 }}>\n\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\ttagText={StringUtils.truncateText(\n\t\t\t\t\t\t\t\t\tchip.selectedLabel \|\| chip.label,\n\t\t\t\t\t\t\t\t\t40,\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\tTrailingIcon={CrossIcon}\n\t\t\t\t\t\t\t\tonTrailingIconClicked={() => {\n\t\t\t\t\t\t\t\t\tonDeleteChip(chip);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{chip.selectedLabel \|\| chip.label}\n\t\t\t\t\t\t\t</Tag>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t))}\n\t\t\t\t\t{!!remainingOptionsCnt && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tposition: 'relative',\n\t\t\t\t\t\t\t\tzIndex: 2,\n\t\t\t\t\t\t\t\tpointerEvents: 'auto',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Tooltip\n\t\t\t\t\t\t\t\tbody={''}\n\t\t\t\t\t\t\t\tplacement=\"bottom\"\n\t\t\t\t\t\t\t\ttooltipContent={\n\t\t\t\t\t\t\t\t\tshowLabelsOnMoreHover && remainingOptionsLabels.length > 0 ? (\n\t\t\t\t\t\t\t\t\t\t<div style={{ padding: '4px' }}>\n\t\t\t\t\t\t\t\t\t\t\t{remainingOptionsLabels.map((label, index) => (\n\t\t\t\t\t\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{ color: COLORS.text.white }}\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t) : undefined\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<BodyCaption color={COLORS.content.placeholder}>\n\t\t\t\t\t\t\t\t\t{`+${remainingOptionsCnt} more`}\n\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{chips.length === 0 && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{ color: placeholderColor ?? COLORS.content.placeholder }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{placeholder}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\n\t\t\t\t<div>\n\t\t\t\t\t<DownIcon\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\ttransform: isDropdownOpened ? 'rotate(180deg)' : 'rotate(0deg)',\n\t\t\t\t\t\t}}\n\t\t\t\t\t\twidth={\n\t\t\t\t\t\t\tsizeToUse === 'x-small' ? 16 : sizeToUse === 'small' ? 20 : 24\n\t\t\t\t\t\t}\n\t\t\t\t\t\theight={\n\t\t\t\t\t\t\tsizeToUse === 'x-small' ? 16 : sizeToUse === 'small' ? 20 : 24\n\t\t\t\t\t\t}\n\t\t\t\t\t\tcolor={COLORS.content.primary}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</ChipInputWrapper>\n\t\t\t{!!errorMessage && (\n\t\t\t\t<InputFooter invalid={true}>\n\t\t\t\t\t{!!errorMessage && <ErrorIcon width={16} height={16} />}\n\t\t\t\t\t{errorMessage}\n\t\t\t\t</InputFooter>\n\t\t\t)}\n\t\t</>\n\t);\n};\n\nexport default ChipInput;\n"],"names":["getMaxChipsCharCount","chips","ChipInput","onDeleteChip","containerStyle","sizeToUse","isDropdownOpened","placeholder","errorMessage","showLabelsOnMoreHover","placeholderColor","options","setOptions","useState","remainingOptionsCnt","setRemainingOptionsCnt","remainingOptionsLabels","setRemainingOptionsLabels","useEffect","combineCharCnt","MAX_CHAR","option","labels","jsxs","Fragment","ChipInputWrapper","chip","index","jsx","Tag","StringUtils","CrossIcon","Tooltip","label","BodyCaption","COLORS","DownIcon","InputFooter","ErrorIcon"],"mappings":"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"}

package/dist/esm/components/dropdown/Common.styled.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import r from "styled-components";
+import t from "styled-components";
 import { COLORS as i } from "../../constants/Theme.js";
-const p = r.div`
+const p = t.div`
 	position:
 	// if allowEvents is true, then position is relative, else position is absolute
 		${(e) => e?.allowEvents || e?.isChildLoading ? "relative" : "absolute"};
@@ -10,11 +10,12 @@ const p = r.div`
 	height: 100%;
 	z-index: 2;
 	cursor: ${(e) => e?.disabled ? "not-allowed" : "pointer"};
-`, n = r.div`
-	margin-top: 8px;
+`, n = t.div`
+	margin-top: 4px;
 	margin-bottom: 8px;
+	clip-path: inset(0px -20px -20px -20px);
 `;
-r.div`
+t.div`
 	display: flex;
 	flex-direction: row;
 	align-items: center;
@@ -23,7 +24,7 @@ r.div`
 	border: 1px solid ${i.stroke.primary};
 	border-radius: 4px;
 `;
-const s = r.div`
+const s = t.div`
 	width: 360px;
 	height: 100%;
 	padding: 8px;

package/dist/esm/components/dropdown/Common.styled.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Common.styled.js","sources":["../../../../src/components/dropdown/Common.styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const OverLapAbs = styled.div<{\n\tdisabled?: boolean;\n\tallowEvents?: boolean;\n\tisChildLoading?: boolean;\n}>`\n\tposition: \n\t// if allowEvents is true, then position is relative, else position is absolute\n\t\t${(props) =>\n\t\tprops?.allowEvents \|\| props?.isChildLoading ? 'relative' : 'absolute'};\n\tleft: 0px;\n\ttop: 0px;\n\twidth: 100%;\n\theight: 100%;\n\tz-index: 2;\n\tcursor: ${(props) => (props?.disabled ? 'not-allowed' : 'pointer')};\n`;\n\nexport const OpenDropdownContainer = styled.div`\n\tmargin-top: ~~8px~~;\n\tmargin-bottom: 8px;\n`;\n\nexport const LoadingContainer = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tpadding: 6px 8px;\n\tbackground: ${COLORS.surface.hovered};\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n`;\n\nexport const ChipInputWrapper = styled.div<{ error?: boolean }>`\n\twidth: 360px;\n\theight: 100%;\n\tpadding: 8px;\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tborder-radius: 4px;\n\tborder: ${(props) =>\n\t\tprops.error\n\t\t\t? `1px solid ${COLORS.stroke.negative.vibrant}`\n\t\t\t: `1px solid ${COLORS.stroke.primary}`};\n\t.chips-container {\n\t\tdisplay: flex;\n\t\tgap: 8px;\n\t\tflex-wrap: wrap;\n\t\talign-items: center;\n\t}\n`;\n"],"names":["OverLapAbs","styled","props","OpenDropdownContainer","COLORS","ChipInputWrapper"],"mappings":";;AAGO,MAAMA,IAAaC,EAAO;AAAA;AAAA;AAAA,IAO7B,CAACC,MACHA,GAAO,eAAeA,GAAO,iBAAiB,aAAa,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAM5D,CAACA,MAAWA,GAAO,WAAW,gBAAgB,SAAU;AAAA,GAGtDC,IAAwBF,EAAO;AAAA;AAAA;AAAA;~~AAKZA~~,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,eAKxBG,EAAO,QAAQ,OAAO;AAAA,qBAChBA,EAAO,OAAO,OAAO;AAAA;AAAA;AAInC,MAAMC,IAAmBJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAQ5B,CAACC,MACVA,EAAM,QACH,aAAaE,EAAO,OAAO,SAAS,OAAO,KAC3C,aAAaA,EAAO,OAAO,OAAO,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
1	+ {"version":3,"file":"Common.styled.js","sources":["../../../../src/components/dropdown/Common.styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const OverLapAbs = styled.div<{\n\tdisabled?: boolean;\n\tallowEvents?: boolean;\n\tisChildLoading?: boolean;\n}>`\n\tposition: \n\t// if allowEvents is true, then position is relative, else position is absolute\n\t\t${(props) =>\n\t\tprops?.allowEvents \|\| props?.isChildLoading ? 'relative' : 'absolute'};\n\tleft: 0px;\n\ttop: 0px;\n\twidth: 100%;\n\theight: 100%;\n\tz-index: 2;\n\tcursor: ${(props) => (props?.disabled ? 'not-allowed' : 'pointer')};\n`;\n\nexport const OpenDropdownContainer = styled.div`\n\tmargin-top: 4px;\n\tmargin-bottom: 8px;\n\tclip-path: inset(0px -20px -20px -20px);\n`;\n\nexport const LoadingContainer = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tpadding: 6px 8px;\n\tbackground: ${COLORS.surface.hovered};\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n`;\n\nexport const ChipInputWrapper = styled.div<{ error?: boolean }>`\n\twidth: 360px;\n\theight: 100%;\n\tpadding: 8px;\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tborder-radius: 4px;\n\tborder: ${(props) =>\n\t\tprops.error\n\t\t\t? `1px solid ${COLORS.stroke.negative.vibrant}`\n\t\t\t: `1px solid ${COLORS.stroke.primary}`};\n\t.chips-container {\n\t\tdisplay: flex;\n\t\tgap: 8px;\n\t\tflex-wrap: wrap;\n\t\talign-items: center;\n\t}\n`;\n"],"names":["OverLapAbs","styled","props","OpenDropdownContainer","COLORS","ChipInputWrapper"],"mappings":";;AAGO,MAAMA,IAAaC,EAAO;AAAA;AAAA;AAAA,IAO7B,CAACC,MACHA,GAAO,eAAeA,GAAO,iBAAiB,aAAa,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAM5D,CAACA,MAAWA,GAAO,WAAW,gBAAgB,SAAU;AAAA,GAGtDC,IAAwBF,EAAO;AAAA;AAAA;AAAA;AAAA;AAMZA,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,eAKxBG,EAAO,QAAQ,OAAO;AAAA,qBAChBA,EAAO,OAAO,OAAO;AAAA;AAAA;AAInC,MAAMC,IAAmBJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAQ5B,CAACC,MACVA,EAAM,QACH,aAAaE,EAAO,OAAO,SAAS,OAAO,KAC3C,aAAaA,EAAO,OAAO,OAAO,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

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

@@ -4,6 +4,8 @@ export type DropdownProps = OpenDropdownProps & {
     placeHolder?: string;
     size?: 'default' | 'small' | 'x-small';
     disabled?: boolean;
+    /** When disabled, render a solid grey box (background.base) with secondary text and no opacity wash. */
+    solidDisabled?: boolean;
     noErrorHint?: boolean;
     buttonWidth?: string;
     placeHolderHeight?: string;