sag_components 2.0.0-beta235 → 2.0.0-beta237

package/dist/index.d.ts

@@ -1284,7 +1284,7 @@ declare function ModalWithOverlay(props: any): react_jsx_runtime.JSX.Element;
 
 declare function DropdownNew(props: any): react_jsx_runtime.JSX.Element;
 
-declare function WeeksPicker({ label, disabled, borderColor, borderColorFocus, textColor, hoverColor, required, placeholder, borderRadius, year, width, height, withMarginBottom, onChange, selectedValue, allowedWeekRange, restrictToRange, }: {
+declare function WeeksPicker({ label, disabled, borderColor, borderColorFocus, textColor, hoverColor, required, placeholder, borderRadius, year, width, height, withMarginBottom, onChange, selectedValue, isDarkerBackground, allowedWeekRange, restrictToRange, }: {
     label: any;
     disabled: any;
     borderColor: any;
@@ -1300,6 +1300,7 @@ declare function WeeksPicker({ label, disabled, borderColor, borderColorFocus, t
     withMarginBottom?: boolean;
     onChange: any;
     selectedValue: any;
+    isDarkerBackground?: boolean;
     allowedWeekRange?: any;
     restrictToRange?: boolean;
 }): react_jsx_runtime.JSX.Element;

package/dist/index.esm.js

@@ -8929,27 +8929,26 @@ const IconContainer$5 = styled.div`
   cursor:  pointer;  
 `;
 
-const DropdownSingleNew = _ref => {
-  let {
-    label,
-    labelEmptyValue,
-    options,
-    selectedValue,
-    onChange,
-    required,
-    disabled,
-    width,
-    height,
-    withMarginBottom = true,
-    error,
-    errorMessage,
-    xIconShow,
-    labelColor,
-    showLabelOnTop,
-    orderBy,
-    placeHolder = "",
-    elementType
-  } = _ref;
+const DropdownSingleNew = ({
+  label,
+  labelEmptyValue,
+  options,
+  selectedValue,
+  onChange,
+  required,
+  disabled,
+  width,
+  height,
+  withMarginBottom = true,
+  error,
+  errorMessage,
+  xIconShow,
+  labelColor,
+  showLabelOnTop,
+  orderBy,
+  placeHolder = "",
+  elementType
+}) => {
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [showAbove, setShowAbove] = useState(false);
@@ -9454,27 +9453,26 @@ const IconContainer$4 = styled.div`
   cursor:  pointer;  
 `;
 
-const DropdownMultiNew = _ref => {
-  let {
-    label,
-    labelEmptyValue,
-    options,
-    selectedValue,
-    onChange,
-    required,
-    disabled,
-    width,
-    height,
-    withMarginBottom = true,
-    error,
-    errorMessage,
-    labelColor,
-    xIconShow,
-    checkBoxColor,
-    showLabelOnTop,
-    orderBy,
-    elementType
-  } = _ref;
+const DropdownMultiNew = ({
+  label,
+  labelEmptyValue,
+  options,
+  selectedValue,
+  onChange,
+  required,
+  disabled,
+  width,
+  height,
+  withMarginBottom = true,
+  error,
+  errorMessage,
+  labelColor,
+  xIconShow,
+  checkBoxColor,
+  showLabelOnTop,
+  orderBy,
+  elementType
+}) => {
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [showAbove, setShowAbove] = useState(false);
@@ -34973,18 +34971,17 @@ css`
  * • onApply(start,end) — callback, both numbers (inclusive)
  * • onCancel()         — callback
  */
-const WeeksCalendar = _ref => {
-  let {
-    year,
-    defaultStartWeek = null,
-    defaultEndWeek = null,
-    backgroundColor = "#066768",
-    hoverBackgroundColor = "#E6F0F0",
-    allowedWeekRange = null,
-    // New prop for range restriction
-    onApply,
-    onCancel
-  } = _ref;
+const WeeksCalendar = ({
+  year,
+  defaultStartWeek = null,
+  defaultEndWeek = null,
+  backgroundColor = "#066768",
+  hoverBackgroundColor = "#E6F0F0",
+  allowedWeekRange = null,
+  // New prop for range restriction
+  onApply,
+  onCancel
+}) => {
   // state -------------------------------------------------
   const [startWeek, setStartWeek] = useState(defaultStartWeek);
   const [endWeek, setEndWeek] = useState(defaultEndWeek);
@@ -35115,13 +35112,14 @@ const StyledInput$1 = styled.input`
   border-radius: ${props => props.borderRadius || '4px'};
   border: none;
   outline: none;
+  background-color: ${props => props.isDarkerBackground ? '#F2F2F2' : 'white'} !important;
   width: ${props => props.width || '90%'};
   height: ${props => props.height || 'auto'};
   transition: border-color 0.3s ease; 
   font-size: 14px;
   font-weight: 400;
   box-sizing: border-box;
-  color: ${props => props.disabled ? '#888' : (props.isFocused || props.value ? props.textColor : '#757575') || '#333'};
+  color: ${props => props.disabled ? '#D0D0D0' : (props.isFocused || props.value ? props.textColor : '#757575') || '#333'};
   cursor: ${props => props.disabled ? 'not-allowed' : 'text'};
 `;
 const StyledLabel = styled.label`
@@ -35168,9 +35166,8 @@ const InputContainer$1 = styled.div`
   overflow: hidden; 
   width: 100%;
   height: 100%;    
-  box-sizing: border-box;
-  background-color: transparent;    
-  border:  1px solid ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : '#B1B1B1'};
+  box-sizing: border-box;  
+  border:  1px solid ${props => props.disabled ? '#D0D0D0' : props.error ? 'red' : '#B1B1B1'};
   font-weight: 400;
   font-size: 14px;
   border-radius: 12px;
@@ -35212,6 +35209,7 @@ const WeeksPicker = _ref => {
     withMarginBottom = true,
     onChange,
     selectedValue,
+    isDarkerBackground = false,
     // New props for range restriction
     allowedWeekRange = null,
     // { startWeek: number, endWeek: number } or null
@@ -35408,7 +35406,8 @@ const WeeksPicker = _ref => {
     placeholder: isFocused ? placeholder : "",
     disabled: disabled,
     borderColor: borderColor,
-    textColor: textColor
+    textColor: textColor,
+    isDarkerBackground: isDarkerBackground
   }), /*#__PURE__*/React$1.createElement(CalendarDiv, {
     onClick: disabled ? undefined : handleToggle
   }, /*#__PURE__*/React$1.createElement(CalendarInOpen, {
@@ -36092,12 +36091,6 @@ const ToggleSwitchLabel = styled.label`
   position: relative;
   cursor: pointer;
   user-select: none;
-  opacity: ${_ref => {
-  let {
-    disabled
-  } = _ref;
-  return disabled ? 0.5 : 1;
-}};
 `;
 const ToggleInput = styled.input`
   display: none;
@@ -36105,19 +36098,15 @@ const ToggleInput = styled.input`
 const ToggleSlider = styled.span`
   display: block;
   position: relative;
-  background: ${_ref2 => {
-  let {
-    checked,
-    disabled
-  } = _ref2;
-  return checked ? disabled ? "#7bb1b0" : "#006d6a" : "#cfd8dc";
-}};
+  background: ${({
+  checked,
+  disabled
+}) => checked ? "#006d6a" : disabled ? "#B1B1B1" : "#D0D0D0"};
   border-radius: 999px;
   transition: background 0.2s;
-  ${_ref3 => {
-  let {
-    size
-  } = _ref3;
+  ${({
+  size
+}) => {
   switch (size) {
     case "s":
       return css`width: 40px; height: 20px;`;
@@ -36133,13 +36122,14 @@ const ToggleSlider = styled.span`
     left: 3px;
     top: 50%;
     transform: translateY(-50%);
-    background: #fff;
+    background: ${({
+  disabled
+}) => disabled ? "#D0D0D0" : "#fff"};
     border-radius: 50%;
     transition: left 0.2s, width 0.2s, height 0.2s;
-    ${_ref4 => {
-  let {
-    size
-  } = _ref4;
+    ${({
+  size
+}) => {
   switch (size) {
     case "s":
       return css`width: 14px; height: 14px;`;
@@ -36149,11 +36139,10 @@ const ToggleSlider = styled.span`
       return css`width: 20px; height: 20px;`;
   }
 }}
-    left: ${_ref5 => {
-  let {
-    checked,
-    size
-  } = _ref5;
+    left: ${({
+  checked,
+  size
+}) => {
   if (!checked) return "3px";
   switch (size) {
     case "s":
@@ -54868,7 +54857,7 @@ const DropdownContainer = styled.div`
 `;
 const DropdownButton = styled.button`
   width: 100%;
-  background: #fff;
+  background: ${props => props.isDarkerBackground ? '#F2F2F2' : '#fff'};
   border: 1px solid #8B8989;
   border-radius: 12px;
   padding: 17px;
@@ -54881,7 +54870,7 @@ const DropdownButton = styled.button`
   ${props => props.disabled && css`
       color: #D0D0D0;
       cursor: not-allowed;
-      border: 1px solid #D0D0D0;
+      border: 1px solid #D9D9D9;
       background: ${props => props.isDarkerBackground ? '#F2F2F2' : '#fff'};
     `}
 `;
@@ -54907,11 +54896,10 @@ const DropdownList = styled.ul`
       `}
 `;
 const SectionDiv = styled.div`
-  ${_ref => {
-  let {
-    $showBorder,
-    margin
-  } = _ref;
+  ${({
+  $showBorder,
+  margin
+}) => {
   switch ($showBorder) {
     case 'Template Offer':
       return css`border-top: 1px solid #e6e2e2ff;
@@ -54991,8 +54979,8 @@ const Label$1 = styled.label`
   padding-inline-start: 5px;
   margin-right: 10px; 
   z-index: 2;
-  color: ${props => props.error ? 'red' : props.disabled ? '#888' : props.labelColor};  
-  background-color: ${props => props.disabled ? '#F2F2F2' : props.showLabelOnTop ? 'white' : 'transparent'};
+  color: ${props => props.error ? 'red' : props.disabled ? '#D0D0D0' : props.labelColor};  
+  background-color: ${props => props.isDarkerBackground ? '#F2F2F2' : props.showLabelOnTop ? 'white' : 'transparent'};
   position: absolute;
   top: ${props => props.isFocused || props.hasValue ? '0px' : '50%'};
   left: ${props => props.isFocused || props.hasValue ? '23px' : '14px'};
@@ -55523,7 +55511,8 @@ const OverlayDropdown = _ref => {
     labelColor: labelColor,
     hasValue: hasValue,
     disabled: disabled,
-    showLabelOnTop: showLabelOnTop
+    showLabelOnTop: showLabelOnTop,
+    isDarkerBackground: isDarkerBackground
   }, getLabel(), getRequired()), /*#__PURE__*/React$1.createElement(DropdownButton, {
     ref: buttonRef,
     onClick: toggleDropdown,