@cleartrip/ct-design-dropdown 4.0.0 → 5.0.0

package/src/Dropdown.native.tsx

@@ -0,0 +1,236 @@
+import { useRef, useState } from 'react';
+
+import { Dimensions, GestureResponderEvent, LayoutChangeEvent, Modal, Pressable, ScrollView, View } from 'react-native';
+import { Container } from '@cleartrip/ct-design-container';
+import { Typography, TypographyColor, TypographyVariant } from '@cleartrip/ct-design-typography';
+import { makeStyles, useStyles } from '@cleartrip/ct-design-style-manager';
+import { ChevronDown } from '@cleartrip/ct-design-icons';
+
+import { DropdownProps, Item } from './type';
+
+const { height: screenHeight } = Dimensions.get('screen');
+
+const staticStyle = makeStyles(() => ({
+  dropDownItemListContainer: {
+    width: '100%',
+    maxHeight: screenHeight * 0.19,
+    borderRadius: 5,
+    position: 'absolute',
+    overflow: 'hidden',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.22,
+    shadowRadius: 2.22,
+    elevation: 3,
+    backgroundColor: 'white',
+  },
+  modalBackground: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.0)',
+  },
+  overlayButtonWrapper: {
+    position: 'absolute',
+    alignItems: 'center',
+  },
+  dropDownItemContainer: {
+    width: '100%',
+    justifyContent: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+  },
+  rootContainer: {
+    width: '100%',
+    backgroundColor: '#fff',
+  },
+  chevronDownContainer: {
+    height: 24,
+    left: 3,
+    paddingRight: 12,
+  },
+  scrollContent: {
+    backgroundColor: '#fff',
+  },
+}));
+
+const Dropdown: React.FC<DropdownProps> = ({
+  placeHolder,
+  itemList,
+  height = 40,
+  styleConfig = {},
+  dropDownValue,
+  defaultSelectedIndex,
+  onItemSelect,
+  renderItem,
+  showDropDownListOnTop = true,
+}) => {
+  const {
+    placeHolderContainer = [],
+    placeHolderTextContainer = [],
+    dropDownItemListContainer = [],
+    dropDownItemTextContainer = {},
+    dropDownItemContainer = [],
+  } = styleConfig;
+
+  const scrollRef = useRef<ScrollView | null>(null);
+  const itemsRef = useRef<number[]>([]);
+  const [focus, setFocus] = useState<boolean>(false);
+  const [singleSelectIndex, setSingleSelectIndex] = useState<number>(defaultSelectedIndex ?? -1);
+  const [isNearToBottom, setIsNearToBottom] = useState<boolean>(false);
+  const [isNearToTop, setIsNearToTop] = useState<boolean>(false);
+
+  const isShowDropDownOnTop = isNearToBottom === isNearToTop ? showDropDownListOnTop : !isNearToTop;
+
+  const dynamicStyles = useStyles(
+    (themeArg) => ({
+      placeHolderContainer: {
+        width: '100%',
+        height,
+        backgroundColor: 'white',
+        borderRadius: 5,
+        flexDirection: 'row',
+        alignItems: 'center',
+        borderColor: focus ? themeArg.color.border.primary : '#e0e0e0',
+        borderWidth: 1,
+      },
+      placeHolderTextContainer: {
+        flex: 1,
+        height,
+        justifyContent: 'center',
+        paddingHorizontal: 12,
+      },
+    }),
+    [focus, height],
+  );
+
+  const singleSelectClickHandler = (item: Item, index: number) => {
+    setSingleSelectIndex(index);
+    onItemSelect?.(item, index);
+    setFocus(false);
+  };
+
+  const scrollToIndex = (targetIndex: number | undefined) => {
+    if (targetIndex === undefined) return;
+    if (itemsRef.current.length > targetIndex) {
+      scrollRef?.current?.scrollTo({ x: 0, y: itemsRef.current[targetIndex], animated: true });
+    }
+  };
+
+  const [position, setPosition] = useState({ x: 0, y: 0, width: 0, height: 0 });
+
+  const toggleDropDown = (e: GestureResponderEvent) => {
+    const target = e.currentTarget as unknown as {
+      measureInWindow?: (callback: (x: number, y: number, width: number, elementHeight: number) => void) => void;
+    };
+
+    if (target && typeof target.measureInWindow === 'function') {
+      target.measureInWindow((x: number, y: number, width: number, elementHeight: number) => {
+        const isNearBottom = y + height + (screenHeight * 0.19 + 60) > screenHeight;
+        const isNearTop = y - (screenHeight * 0.19 + 60) < 0;
+        setIsNearToBottom(isNearBottom);
+        setIsNearToTop(isNearTop);
+        setPosition({ x, y, width, height: elementHeight });
+        setFocus((state) => !state);
+      });
+    } else {
+      const { pageX: px, pageY: py } = e.nativeEvent;
+      const isNearBottom = py + height + (screenHeight * 0.19 + 60) > screenHeight;
+      const isNearTop = py - (screenHeight * 0.19 + 60) < 0;
+      setIsNearToBottom(isNearBottom);
+      setIsNearToTop(isNearTop);
+      setPosition({ x: px, y: py, width: 100, height });
+      setFocus((state) => !state);
+    }
+  };
+
+  const dropDownItemList = focus && (
+    <Container
+      styleConfig={{
+        root: [
+          staticStyle.dropDownItemListContainer,
+          ...dropDownItemListContainer,
+          isShowDropDownOnTop ? { bottom: -height } : { top: 0 },
+        ],
+      }}
+    >
+      <ScrollView
+        ref={scrollRef}
+        contentContainerStyle={[staticStyle.scrollContent]}
+        showsVerticalScrollIndicator={false}
+      >
+        {itemList.map((item, index) => {
+          const dropdownItem = renderItem?.(item, index) || item?.label;
+          const backgroundColor = index === singleSelectIndex ? '#1a1a1a' : 'white';
+          const isSelected = index === singleSelectIndex;
+
+          return (
+            <Pressable
+              key={`${item.value}-${index}`}
+              onLayout={(event: LayoutChangeEvent) => {
+                const layout = event.nativeEvent.layout;
+                itemsRef.current[index] = layout.y;
+                if (itemList.length - 1 === index && focus) {
+                  scrollToIndex(singleSelectIndex);
+                }
+              }}
+              style={({ pressed }) => [
+                { backgroundColor: pressed ? 'rgb(231, 231, 231)' : backgroundColor },
+                staticStyle.dropDownItemContainer,
+                ...dropDownItemContainer,
+              ]}
+              onPress={() => singleSelectClickHandler(item, index)}
+            >
+              <Typography
+                styleConfig={dropDownItemTextContainer}
+                variant={TypographyVariant.HM4}
+                color={isSelected ? TypographyColor.NEUTRAL : TypographyColor.PRIMARY}
+              >
+                {' '}
+                {dropdownItem}
+              </Typography>
+            </Pressable>
+          );
+        })}
+      </ScrollView>
+    </Container>
+  );
+
+  return (
+    <Container styleConfig={{ root: [staticStyle.rootContainer] }}>
+      <Modal visible={focus} transparent animationType='none' onRequestClose={() => setFocus(false)}>
+        <Pressable style={staticStyle.modalBackground} onPress={() => setFocus(false)}>
+          <View
+            style={[
+              staticStyle.overlayButtonWrapper,
+              {
+                top: isShowDropDownOnTop ? position.y - height : position.y + position.height,
+                left: position.x,
+                width: position.width,
+              },
+            ]}
+          >
+            {dropDownItemList}
+          </View>
+        </Pressable>
+      </Modal>
+
+      <Pressable onPress={toggleDropDown} style={[dynamicStyles.placeHolderContainer, ...placeHolderContainer]}>
+        <Container styleConfig={{ root: [dynamicStyles.placeHolderTextContainer] }}>
+          <Typography
+            color={dropDownValue.length > 0 ? TypographyColor.PRIMARY : TypographyColor.DISABLED}
+            lineClamp={1}
+            styleConfig={{ root: placeHolderTextContainer }}
+            variant={TypographyVariant.HM4}
+          >
+            {dropDownValue.length > 0 ? dropDownValue : placeHolder}
+          </Typography>
+        </Container>
+
+        <Container styleConfig={{ root: [staticStyle.chevronDownContainer] }}>
+          <ChevronDown />
+        </Container>
+      </Pressable>
+    </Container>
+  );
+};
+
+export default Dropdown;

package/src/Dropdown.tsx

@@ -0,0 +1,221 @@
+import { useRef, useState, useEffect } from 'react';
+
+import { Typography, TypographyVariant, TypographyColor } from '@cleartrip/ct-design-typography';
+import { makeStyles, useStyles, useWebMergeStyles } from '@cleartrip/ct-design-style-manager';
+import { ChevronDown } from '@cleartrip/ct-design-icons';
+
+import { getChevronContainerStyles, getPlaceHolderTextContainerStyles } from './style';
+import { DropdownProps, Item } from './type';
+
+const staticStyles = makeStyles(() => ({
+  root: {
+    width: '100%',
+    backgroundColor: '#fff',
+    position: 'relative',
+  },
+  dropDownItemListContainer: {
+    width: '100%',
+    maxHeight: 240,
+    borderRadius: 5,
+    position: 'absolute',
+    overflow: 'hidden',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.22,
+    shadowRadius: 2.22,
+    elevation: 3,
+    backgroundColor: '#fff',
+  },
+  dropDownItemContainer: {
+    width: '100%',
+    justifyContent: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+  },
+  chevronDownContainer: getChevronContainerStyles(),
+  scrollArea: {
+    maxHeight: 240,
+    overflowY: 'auto',
+  },
+}));
+
+const DropdownListItem: React.FC<DropdownListItemProps> = ({
+  item,
+  index,
+  isSelected,
+  dropdownItem,
+  onSelect,
+  customItemContainer = [],
+  customItemTextContainer = {},
+}) => {
+  const itemDynamicStyles = useStyles(
+    () => ({
+      root: {
+        backgroundColor: isSelected ? '#1a1a1a' : '#fff',
+        cursor: 'pointer',
+        width: '100%',
+        justifyContent: 'center',
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+      },
+    }),
+    [isSelected],
+  );
+
+  const mergedItemClassName = useWebMergeStyles(
+    [itemDynamicStyles.root, ...customItemContainer],
+    [itemDynamicStyles.root, customItemContainer],
+  );
+
+  return (
+    <div className={mergedItemClassName} onClick={() => onSelect(item, index)}>
+      <Typography
+        styleConfig={customItemTextContainer}
+        variant={TypographyVariant.HM4}
+        color={isSelected ? TypographyColor.NEUTRAL : TypographyColor.PRIMARY}
+      >
+        {dropdownItem}
+      </Typography>
+    </div>
+  );
+};
+
+const Dropdown: React.FC<DropdownProps> = ({
+  placeHolder,
+  itemList,
+  height = 40,
+  styleConfig = {},
+  dropDownValue,
+  defaultSelectedIndex,
+  onItemSelect,
+  renderItem,
+  showDropDownListOnTop = true,
+}) => {
+  const {
+    placeHolderContainer: customPlaceHolderContainer = [],
+    placeHolderTextContainer: customPlaceHolderTextContainer = [],
+    dropDownItemListContainer: customDropDownItemListContainer = [],
+    dropDownItemContainer: customDropDownItemContainer = [],
+    dropDownItemTextContainer = {},
+  } = styleConfig;
+
+  const rootRef = useRef<HTMLDivElement | null>(null);
+  const [focus, setFocus] = useState<boolean>(false);
+  const [singleSelectIndex, setSingleSelectIndex] = useState<number>(defaultSelectedIndex ?? -1);
+
+  useEffect(() => {
+    if (!focus) return;
+    const handleOutside = (event: MouseEvent) => {
+      if (rootRef.current && !rootRef.current.contains(event.target as Node)) {
+        setFocus(false);
+      }
+    };
+    document.addEventListener('mousedown', handleOutside);
+    return () => document.removeEventListener('mousedown', handleOutside);
+  }, [focus]);
+
+  const dynamicStyles = useStyles(
+    (theme) => ({
+      placeHolderContainer: {
+        width: '100%',
+        height,
+        backgroundColor: '#fff',
+        borderRadius: 5,
+        flexDirection: 'row',
+        alignItems: 'center',
+        borderColor: focus ? theme.color.border.primary : '#e0e0e0',
+        borderWidth: 1,
+      },
+      placeHolderTextContainer: getPlaceHolderTextContainerStyles(height),
+    }),
+    [focus, height],
+  );
+
+  const singleSelectClickHandler = (item: Item, index: number) => {
+    setSingleSelectIndex(index);
+    onItemSelect?.(item, index);
+    setFocus(false);
+  };
+
+  const toggleDropDown = () => setFocus((state) => !state);
+
+  const isShownOnTop = showDropDownListOnTop;
+
+  const mergedRootClassName = useWebMergeStyles([staticStyles.root], []);
+
+  const mergedPlaceHolderClassName = useWebMergeStyles(
+    [dynamicStyles.placeHolderContainer, ...customPlaceHolderContainer],
+    [dynamicStyles.placeHolderContainer, customPlaceHolderContainer],
+  );
+
+  const mergedPlaceHolderTextClassName = useWebMergeStyles(
+    [dynamicStyles.placeHolderTextContainer],
+    [dynamicStyles.placeHolderTextContainer],
+  );
+
+  const mergedChevronClassName = useWebMergeStyles([staticStyles.chevronDownContainer], []);
+
+  const listPositionStyle = isShownOnTop ? { bottom: height } : { top: height };
+
+  const mergedListClassName = useWebMergeStyles(
+    [
+      staticStyles.dropDownItemListContainer,
+      listPositionStyle,
+      staticStyles.scrollArea,
+      ...customDropDownItemListContainer,
+    ],
+    [isShownOnTop, height, customDropDownItemListContainer],
+  );
+
+  return (
+    <div ref={rootRef} className={mergedRootClassName}>
+      <div className={mergedPlaceHolderClassName} onClick={toggleDropDown}>
+        <div className={mergedPlaceHolderTextClassName}>
+          <Typography
+            color={dropDownValue.length > 0 ? TypographyColor.PRIMARY : TypographyColor.DISABLED}
+            lineClamp={1}
+            styleConfig={{ root: customPlaceHolderTextContainer }}
+            variant={TypographyVariant.HM4}
+          >
+            {dropDownValue.length > 0 ? dropDownValue : placeHolder}
+          </Typography>
+        </div>
+        <div className={mergedChevronClassName}>
+          <ChevronDown />
+        </div>
+      </div>
+      {focus && (
+        <div className={mergedListClassName}>
+          {itemList.map((item, index) => {
+            const dropdownItem = renderItem?.(item, index) || item?.label;
+            const isSelected = index === singleSelectIndex;
+            return (
+              <DropdownListItem
+                key={`${item.value}-${index}`}
+                item={item}
+                index={index}
+                isSelected={isSelected}
+                dropdownItem={dropdownItem}
+                onSelect={singleSelectClickHandler}
+                customItemContainer={customDropDownItemContainer}
+                customItemTextContainer={dropDownItemTextContainer}
+              />
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+};
+
+interface DropdownListItemProps {
+  item: Item;
+  index: number;
+  isSelected: boolean;
+  dropdownItem: React.ReactNode;
+  onSelect: (item: Item, index: number) => void;
+  customItemContainer: NonNullable<DropdownProps['styleConfig']>['dropDownItemContainer'];
+  customItemTextContainer: NonNullable<DropdownProps['styleConfig']>['dropDownItemTextContainer'];
+}
+
+export default Dropdown;

package/src/index.native.ts

@@ -0,0 +1,2 @@
+export { default as Dropdown } from './Dropdown.native';
+export type * from './type';

package/src/index.ts

@@ -0,0 +1,2 @@
+export { default as Dropdown } from './Dropdown';
+export type * from './type';

package/src/style.ts

@@ -0,0 +1,51 @@
+import type { Theme } from '@cleartrip/ct-design-theme';
+
+export const getDropdownListContainerStyles = () => ({
+  width: '100%',
+  maxHeight: 240,
+  borderRadius: 5,
+  position: 'absolute',
+  overflow: 'hidden',
+  shadowColor: '#000',
+  shadowOffset: { width: 0, height: 1 },
+  shadowOpacity: 0.22,
+  shadowRadius: 2.22,
+  elevation: 3,
+  backgroundColor: '#fff',
+});
+
+export const getDropdownItemContainerStyles = () => ({
+  width: '100%',
+  justifyContent: 'center',
+  paddingHorizontal: 16,
+  paddingVertical: 12,
+});
+
+export const getRootContainerStyles = () => ({
+  width: '100%',
+  backgroundColor: '#fff',
+});
+
+export const getChevronContainerStyles = () => ({
+  height: 24,
+  left: 3,
+  paddingRight: 12,
+});
+
+export const getPlaceHolderContainerStyles = (theme: Theme, height: number, focus: boolean) => ({
+  width: '100%',
+  height,
+  backgroundColor: '#fff',
+  borderRadius: 5,
+  flexDirection: 'row',
+  alignItems: 'center',
+  borderColor: focus ? theme.color.border.primary : '#e0e0e0',
+  borderWidth: 1,
+});
+
+export const getPlaceHolderTextContainerStyles = (height: number) => ({
+  flex: 1,
+  height,
+  justifyContent: 'center' as const,
+  paddingHorizontal: 12,
+});

package/src/type.ts

@@ -0,0 +1,70 @@
+import { ReactNode } from 'react';
+
+import type { Styles, TextStyle } from '@cleartrip/ct-design-types';
+import { TypographyStyleConfigProps } from '@cleartrip/ct-design-typography';
+
+export interface Item {
+  label: string;
+  value: string | number;
+  disabled?: boolean;
+  icon?: ReactNode;
+  [key: string]: string | number | boolean | ReactNode | undefined;
+}
+
+export interface DropdownProps {
+  /**
+   * Style configuration for the root Container height (default: 40).
+   */
+  height?: number;
+
+  /**
+   * The currently selected value(s) in the dropdown
+   */
+  dropDownValue: string | string[];
+
+  /**
+   * Index of the item selected by default.
+   */
+  defaultSelectedIndex?: number;
+
+  /**
+   * Placeholder text shown when no value is selected.
+   */
+  placeHolder?: string;
+
+  /**
+   * List of items to display in the dropdown.
+   */
+  itemList: Item[];
+
+  /**
+   * Callback when an item is selected.
+   */
+  onItemSelect: (item: Item, index: number) => void;
+
+  /**
+   * Custom render function for dropdown items.
+   */
+  renderItem?: (item: Item, index: number) => string | ReactNode;
+
+  /**
+   * Whether to show the dropdown list above the trigger.
+   */
+  showDropDownListOnTop?: boolean;
+
+  /**
+   * Style configuration for different parts of the dropdown.
+   */
+  styleConfig?: {
+    /** Styles for the placeholder container. */
+    placeHolderContainer?: Styles[];
+    /** Styles for the placeholder text container. */
+    placeHolderTextContainer?: TextStyle[];
+    /** Styles for the dropdown list container. */
+    dropDownItemListContainer?: Styles[];
+    /** Styles for a single dropdown item container. */
+    dropDownItemContainer?: Styles[];
+    /** Styles for the dropdown item text. */
+    dropDownItemTextContainer?: TypographyStyleConfigProps;
+  };
+}

package/dist/DropdownOption/DropdownOption.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-import { DropdownOptionProps } from './type';
-declare const DropdownOption: React.FC<DropdownOptionProps>;
-export default DropdownOption;
-//# sourceMappingURL=DropdownOption.d.ts.map

package/dist/DropdownOption/DropdownOption.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DropdownOption.d.ts","sourceRoot":"","sources":["../../packages/components/Dropdown/src/DropdownOption/DropdownOption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAI3C,OAAO,EAAE,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAK7C,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAwIjD,CAAC;AACF,eAAe,cAAc,CAAC"}

package/dist/DropdownOption/StyledDropdownOption/StyledDropdownOption.d.ts

@@ -1,8 +0,0 @@
-import { CSSProperties } from 'styled-components';
-import { DropdownVarient } from '../../type';
-export declare const StyledDropdownOption: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    isSelected: boolean;
-    varient: DropdownVarient;
-    css?: CSSProperties | undefined;
-}, never>;
-//# sourceMappingURL=StyledDropdownOption.d.ts.map

package/dist/DropdownOption/StyledDropdownOption/StyledDropdownOption.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"StyledDropdownOption.d.ts","sourceRoot":"","sources":["../../../packages/components/Dropdown/src/DropdownOption/StyledDropdownOption/StyledDropdownOption.tsx"],"names":[],"mappings":"AAAA,OAAe,EAAe,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAEvE,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAG7C,eAAO,MAAM,oBAAoB;gBACpB,OAAO;aACV,eAAe;;SAsBxB,CAAC"}

package/dist/DropdownOption/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from './DropdownOption';
-//# sourceMappingURL=index.d.ts.map

package/dist/DropdownOption/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/components/Dropdown/src/DropdownOption/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/DropdownOption/type.d.ts

@@ -1,20 +0,0 @@
-import { ReactNode } from 'react';
-import { DropdownVarient } from '../type';
-import { Color, DropdownOptionStyleProps } from '@cleartrip/ct-design-types';
-export interface DropdownOptionProps {
-    key?: string;
-    label: string;
-    subLabel?: string;
-    isSelected?: boolean;
-    icon?: ReactNode;
-    iconStyle?: string;
-    height?: string;
-    onClick?: () => void;
-    varient?: DropdownVarient;
-    customColor?: Color;
-    isChipSelection?: boolean;
-    multiSelect?: boolean;
-    sideShow?: string;
-    styleConfig?: DropdownOptionStyleProps;
-}
-//# sourceMappingURL=type.d.ts.map

package/dist/DropdownOption/type.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../packages/components/Dropdown/src/DropdownOption/type.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAC,KAAK,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAC5E,MAAM,WAAW,mBAAmB;IACnC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAC,wBAAwB,CAAA;CACrC"}

package/dist/StyledDropdown/StyledDropdown.d.ts

@@ -1,7 +0,0 @@
-import { CSSProperties } from 'styled-components';
-import { StyledDropdownProps } from './type';
-declare const StyledDropdown: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledDropdownProps & {
-    css?: CSSProperties | undefined;
-}, never>;
-export default StyledDropdown;
-//# sourceMappingURL=StyledDropdown.d.ts.map

package/dist/StyledDropdown/StyledDropdown.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"StyledDropdown.d.ts","sourceRoot":"","sources":["../../packages/components/Dropdown/src/StyledDropdown/StyledDropdown.tsx"],"names":[],"mappings":"AAAA,OAAe,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAE1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAE7C,QAAA,MAAM,cAAc;;SAKnB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/StyledDropdown/index.d.ts

@@ -1,2 +0,0 @@
-export { default as StyledDropdown } from './StyledDropdown';
-//# sourceMappingURL=index.d.ts.map

package/dist/StyledDropdown/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/components/Dropdown/src/StyledDropdown/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/StyledDropdown/style.d.ts

@@ -1,7 +0,0 @@
-import { CSSObject } from 'styled-components';
-import type { Theme } from '@cleartrip/ct-design-theme';
-import { StyledDropdownProps } from './type';
-export declare const getStyledDropdownStyles: ({ backgroundColor, width, theme, varient, height, }: StyledDropdownProps & {
-    theme: Theme;
-}) => CSSObject;
-//# sourceMappingURL=style.d.ts.map

package/dist/StyledDropdown/style.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../packages/components/Dropdown/src/StyledDropdown/style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAG7C,eAAO,MAAM,uBAAuB;WAMF,KAAK;MAAK,SAU3C,CAAC"}

package/dist/StyledDropdown/type.d.ts

@@ -1,9 +0,0 @@
-import { DropdownVarient } from '../type';
-export interface StyledDropdownProps {
-    backgroundColor: string;
-    width?: string;
-    height?: string;
-    varient?: DropdownVarient;
-    maxHeight?: string;
-}
-//# sourceMappingURL=type.d.ts.map