@sparrowengg/integrations-templates-frontend 1.9.84-beta.15 → 1.9.84-beta.17

package/dist/es/cascader-dropdown/cascader-dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cascader-dropdown.js","sources":["../../../src/cascader-dropdown/cascader-dropdown.tsx"],"sourcesContent":["import { ReactNode, RefAttributes, useMemo, useState } from \"react\";\nimport { PopoverProps, PopoverContentProps } from \"@radix-ui/react-popover\";\nimport { TooltipProps, TooltipProvider } from \"@sparrowengg/twigs-react\";\nimport {\n  CascaderDropdownItemType,\n  CascaderDropdownDataValueType,\n  CascaderDropdownValueSelectorType,\n  CascaderDropdownOperatorType,\n  initialFilterValueSelectorValue,\n} from \"./helpers/cascader-dropdown-constants\";\nimport { CascaderDropdownProvider } from \"./cascader-dropdown-provider\";\nimport { CascaderDropdownContent } from \"./cascader-dropdown-content\";\nimport { recursiveFind } from \"./helpers/cascader-dropdown-utils\";\nimport React from \"react\";\nimport ThemeWrapper from \"../commons/components/theme-wrapper\";\n\nexport type DropdownContentProps = PopoverContentProps &\n  RefAttributes<HTMLDivElement>;\n\nexport type CascaderDropdownProps = {\n  children?: ReactNode;\n  data: (CascaderDropdownItemType | CascaderDropdownOperatorType)[];\n  value?: CascaderDropdownDataValueType | string | null;\n  defaultValue?: CascaderDropdownDataValueType | string | null;\n  onChange?: ({\n    value,\n    selectionPath,\n    selectedProperty,\n    selectorValue,\n  }: OnChangeReturnType) => void;\n  dropdownProps?: PopoverProps;\n  dropdownContentProps?: DropdownContentProps;\n  tooltipProps?: TooltipProps;\n  selectorValue?: CascaderDropdownValueSelectorType;\n} & CascaderDropdownComponentProps;\n\nexport type CascaderDropdownComponentProps = {};\n\nexport type OnChangeReturnType = {\n  value: CascaderDropdownDataValueType | CascaderDropdownOperatorType;\n  selectionPath: CascaderDropdownDataValueType[];\n  selectedProperty: CascaderDropdownDataValueType | null;\n  selectorValue?: CascaderDropdownValueSelectorType;\n};\n\nexport const CascaderDropdown = ({\n  children,\n  data = [],\n  value = null,\n  defaultValue = null,\n  onChange,\n  dropdownProps = {},\n  dropdownContentProps = {},\n  tooltipProps,\n  selectorValue = initialFilterValueSelectorValue,\n}: CascaderDropdownProps) => {\n  const [localValue, setLocalValue] = useState<CascaderDropdownDataValueType>(\n    (typeof defaultValue === \"object\"\n      ? defaultValue\n      : recursiveFind(data, { value: defaultValue, label: \"\" })) ?? {\n      value: \"\",\n      label: \"\",\n    }\n  );\n\n  const selectedValue = useMemo<CascaderDropdownDataValueType>(() => {\n    if (value && typeof value === \"object\") {\n      return value;\n    }\n\n    if (value) {\n      return (\n        recursiveFind(data, { value, label: \"\" }) ?? { value: \"\", label: \"\" }\n      );\n    }\n\n    if (localValue && typeof localValue === \"object\") {\n      return localValue;\n    }\n\n    return { value: \"\", label: \"\" };\n  }, [data, localValue, value]);\n\n  return (\n    <ThemeWrapper>\n      <TooltipProvider delayDuration={0}>\n        <CascaderDropdownProvider\n          data={data}\n          value={selectedValue}\n          selectorValue={selectorValue}\n          onChange={({\n            value: selectedDataValue,\n            selectionPath,\n            selectorValue: selectedSelectorValue,\n          }: {\n            value: CascaderDropdownDataValueType | CascaderDropdownOperatorType;\n            selectionPath: CascaderDropdownDataValueType[];\n            selectorValue?: CascaderDropdownValueSelectorType;\n          }) => {\n            setLocalValue(selectedDataValue);\n            if (onChange) {\n              onChange({\n                value: selectedDataValue,\n                selectionPath,\n                selectedProperty: recursiveFind(data, {\n                  value: selectedDataValue.value,\n                  label: \"\",\n                }),\n                selectorValue: selectedSelectorValue,\n              });\n            }\n          }}\n        >\n          <CascaderDropdownContent\n            {...dropdownProps}\n            dropdownContentProps={dropdownContentProps}\n            tooltipProps={tooltipProps}\n          >\n            {children}\n          </CascaderDropdownContent>\n        </CascaderDropdownProvider>\n      </TooltipProvider>\n    </ThemeWrapper>\n  );\n};\n"],"names":["_a","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CO,MAAM,mBAAmB,CAAC;AAAA,EAC/B,QAAA;AAAA,EACA,OAAO,EAAC;AAAA,EACR,KAAQ,GAAA,IAAA;AAAA,EACR,YAAe,GAAA,IAAA;AAAA,EACf,QAAA;AAAA,EACA,gBAAgB,EAAC;AAAA,EACjB,uBAAuB,EAAC;AAAA,EACxB,YAAA;AAAA,EACA,aAAgB,GAAA,+BAAA;AAClB,CAA6B,KAAA;AAvD7B,EAAA,IAAA,EAAA,CAAA;AAwDE,EAAM,MAAA,CAAC,UAAY,EAAA,aAAa,CAAI,GAAA,QAAA;AAAA,IAAA,CACjC,EAAO,GAAA,OAAA,YAAA,KAAiB,QACrB,GAAA,YAAA,GACA,aAAc,CAAA,IAAA,EAAM,EAAE,KAAA,EAAO,YAAc,EAAA,KAAA,EAAO,EAAG,EAAC,MAFzD,IAE+D,GAAA,EAAA,GAAA;AAAA,MAC9D,KAAO,EAAA,EAAA;AAAA,MACP,KAAO,EAAA,EAAA;AAAA,KACT;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,aAAA,GAAgB,QAAuC,MAAM;AAjErE,IAAAA,IAAAA,GAAAA,CAAAA;AAkEI,IAAI,IAAA,KAAA,IAAS,OAAO,KAAA,KAAU,QAAU,EAAA;AACtC,MAAO,OAAA,KAAA,CAAA;AAAA,KACT;AAEA,IAAA,IAAI,KAAO,EAAA;AACT,MAAA,OAAA,CACEA,GAAA,GAAA,aAAA,CAAc,IAAM,EAAA,EAAE,OAAO,KAAO,EAAA,EAAA,EAAI,CAAA,KAAxC,OAAAA,GAA6C,GAAA,EAAE,KAAO,EAAA,EAAA,EAAI,OAAO,EAAG,EAAA,CAAA;AAAA,KAExE;AAEA,IAAI,IAAA,UAAA,IAAc,OAAO,UAAA,KAAe,QAAU,EAAA;AAChD,MAAO,OAAA,UAAA,CAAA;AAAA,KACT;AAEA,IAAA,OAAO,EAAE,KAAA,EAAO,EAAI,EAAA,KAAA,EAAO,EAAG,EAAA,CAAA;AAAA,GAC7B,EAAA,CAAC,IAAM,EAAA,UAAA,EAAY,KAAK,CAAC,CAAA,CAAA;AAE5B,EAAA,uBACGC,cAAA,CAAA,aAAA,CAAA,YAAA,EAAA,IAAA,kBACEA,cAAA,CAAA,aAAA,CAAA,eAAA,EAAA,EAAgB,eAAe,CAC9B,EAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,wBAAA;AAAA,IAAA;AAAA,MACC,IAAA;AAAA,MACA,KAAO,EAAA,aAAA;AAAA,MACP,aAAA;AAAA,MACA,UAAU,CAAC;AAAA,QACT,KAAO,EAAA,iBAAA;AAAA,QACP,aAAA;AAAA,QACA,aAAe,EAAA,qBAAA;AAAA,OAKX,KAAA;AACJ,QAAA,aAAA,CAAc,iBAAiB,CAAA,CAAA;AAC/B,QAAA,IAAI,QAAU,EAAA;AACZ,UAAS,QAAA,CAAA;AAAA,YACP,KAAO,EAAA,iBAAA;AAAA,YACP,aAAA;AAAA,YACA,gBAAA,EAAkB,cAAc,IAAM,EAAA;AAAA,cACpC,OAAO,iBAAkB,CAAA,KAAA;AAAA,cACzB,KAAO,EAAA,EAAA;AAAA,aACR,CAAA;AAAA,YACD,aAAe,EAAA,qBAAA;AAAA,WAChB,CAAA,CAAA;AAAA,SACH;AAAA,OACF;AAAA,KAAA;AAAA,oBAEAA,cAAA,CAAA,aAAA;AAAA,MAAC,uBAAA;AAAA,MAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACK,aADL,CAAA,EAAA;AAAA,QAEC,oBAAA;AAAA,QACA,YAAA;AAAA,OAAA,CAAA;AAAA,MAEC,QAAA;AAAA,KACH;AAAA,GAEJ,CACF,CAAA,CAAA;AAEJ;;;;"}

package/dist/es/cascader-dropdown/helpers/cascader-dropdown-constants.js

@@ -0,0 +1,27 @@
+const optionTypes = {
+  VALUE_SELECTOR: "VALUE_SELECTOR",
+  ITEM: "ITEM"
+};
+const dataTypes = {
+  SINGLE_LINE_TEXT: "SINGLE_LINE_TEXT",
+  MULTI_LINE_TEXT: "MULTI_LINE_TEXT",
+  NUMBER: "NUMBER",
+  DATE: "DATE",
+  DATE_RANGE: "DATE_RANGE",
+  SINGLE_SELECT: "SINGLE_SELECT",
+  MULTI_SELECT: "MULTI_SELECT",
+  DATE_TIME_TIMEZONE: "DATE_TIME_TIMEZONE"
+};
+const initialFilterValueSelectorValue = {
+  NUMBER: null,
+  DATE: null,
+  DATE_RANGE: null,
+  DATE_TIME_TIMEZONE: null,
+  SINGLE_LINE_TEXT: null,
+  MULTI_LINE_TEXT: null,
+  SINGLE_SELECT: null,
+  MULTI_SELECT: null
+};
+
+export { dataTypes, initialFilterValueSelectorValue, optionTypes };
+//# sourceMappingURL=cascader-dropdown-constants.js.map

package/dist/es/cascader-dropdown/helpers/cascader-dropdown-constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cascader-dropdown-constants.js","sources":["../../../../src/cascader-dropdown/helpers/cascader-dropdown-constants.ts"],"sourcesContent":["export const optionTypes = {\n  VALUE_SELECTOR: 'VALUE_SELECTOR',\n  ITEM: 'ITEM'\n};\n\nexport const dataTypes = {\n  SINGLE_LINE_TEXT: 'SINGLE_LINE_TEXT',\n  MULTI_LINE_TEXT: 'MULTI_LINE_TEXT',\n  NUMBER: 'NUMBER',\n  DATE: 'DATE',\n  DATE_RANGE: 'DATE_RANGE',\n  SINGLE_SELECT: 'SINGLE_SELECT',\n  MULTI_SELECT: 'MULTI_SELECT',\n  DATE_TIME_TIMEZONE: 'DATE_TIME_TIMEZONE'\n};\n\nexport type CascaderDropdownItemType = {\n  label: string;\n  value: string;\n  subLabel?: string;\n  operators?: CascaderDropdownOperatorType[];\n  options?: CascaderDropdownItemType[];\n  disabled?: boolean;\n  shouldFetchOptions?: boolean;\n  selectionPath: CascaderDropdownDataValueType[];\n};\n\nexport type CascaderDropdownOperatorType = {\n  label: string;\n  value: string;\n  dataType: keyof typeof dataTypes;\n  regex?: string;\n  disabled?: boolean;\n  shouldFetchOptions?: boolean;\n  type: 'VALUE_SELECTOR';\n  choices?: CascaderDropdownDataValueType[];\n};\n\nexport type CascaderDropdownDataValueType = {\n  label: string;\n  value: string;\n};\n\nexport type CascaderDropdownValueSelectorType = {\n  'NUMBER': number | null;\n  'DATE': string | null;\n  'DATE_RANGE': {\n    start: string | null;\n    end: string | null;\n  } | null;\n  'DATE_TIME_TIMEZONE': string | null;\n  'SINGLE_LINE_TEXT': string | null;\n  'MULTI_LINE_TEXT': string | null;\n  'SINGLE_SELECT': string | null;\n  'MULTI_SELECT': string[] | null;\n}\n\nexport const initialFilterValueSelectorValue: CascaderDropdownValueSelectorType = {\n  NUMBER: null,\n  DATE: null,\n  DATE_RANGE: null,\n  DATE_TIME_TIMEZONE: null,\n  SINGLE_LINE_TEXT: null,\n  MULTI_LINE_TEXT: null,\n  SINGLE_SELECT: null,\n  MULTI_SELECT: null\n};\n"],"names":[],"mappings":"AAAO,MAAM,WAAc,GAAA;AAAA,EACzB,cAAgB,EAAA,gBAAA;AAAA,EAChB,IAAM,EAAA,MAAA;AACR,EAAA;AAEO,MAAM,SAAY,GAAA;AAAA,EACvB,gBAAkB,EAAA,kBAAA;AAAA,EAClB,eAAiB,EAAA,iBAAA;AAAA,EACjB,MAAQ,EAAA,QAAA;AAAA,EACR,IAAM,EAAA,MAAA;AAAA,EACN,UAAY,EAAA,YAAA;AAAA,EACZ,aAAe,EAAA,eAAA;AAAA,EACf,YAAc,EAAA,cAAA;AAAA,EACd,kBAAoB,EAAA,oBAAA;AACtB,EAAA;AA2CO,MAAM,+BAAqE,GAAA;AAAA,EAChF,MAAQ,EAAA,IAAA;AAAA,EACR,IAAM,EAAA,IAAA;AAAA,EACN,UAAY,EAAA,IAAA;AAAA,EACZ,kBAAoB,EAAA,IAAA;AAAA,EACpB,gBAAkB,EAAA,IAAA;AAAA,EAClB,eAAiB,EAAA,IAAA;AAAA,EACjB,aAAe,EAAA,IAAA;AAAA,EACf,YAAc,EAAA,IAAA;AAChB;;;;"}

package/dist/es/cascader-dropdown/helpers/cascader-dropdown-utils.js

@@ -0,0 +1,129 @@
+import { CascaderDropdownRootNode } from '../cascader-dropdown-root-node.js';
+import { optionTypes } from './cascader-dropdown-constants.js';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+const recursiveFind = (data, value) => {
+  for (let i = 0; i < data.length; i++) {
+    const item = data[i];
+    if (item.value === value.value) {
+      return item;
+    }
+    if ("options" in item && item.options) {
+      const found = recursiveFind(item.options, value);
+      if (found) {
+        return found;
+      }
+    }
+  }
+  return null;
+};
+const buildTree = (data) => {
+  const tree = new CascaderDropdownRootNode();
+  const traverse = (options, parentNode, valuePath, labelPath, level) => {
+    for (let i = 0; i < options.length; i++) {
+      const item = options[i];
+      const value = item.value.toString().trim();
+      const label = item.label.toString().trim();
+      const currentValuePath = !valuePath ? value : `${valuePath} ${value}`;
+      const currentLabelPath = !labelPath ? label : `${labelPath} ${label}`;
+      const node = tree.createNode({
+        value,
+        label,
+        options: __spreadValues({
+          disabled: item.disabled,
+          shouldFetchOptions: item.shouldFetchOptions
+        }, "type" in item ? {
+          dataType: item.dataType,
+          choices: item.choices,
+          regex: item.regex
+        } : {}),
+        level: level + 1,
+        labelPath: currentLabelPath,
+        valuePath: currentValuePath,
+        type: "type" in item ? optionTypes.VALUE_SELECTOR : optionTypes.ITEM
+      });
+      if (i === 0) {
+        node.setPrevNode(null);
+      } else {
+        const prevNode = parentNode.getLastChild();
+        if (prevNode)
+          prevNode.setNextNode(node);
+        node.setPrevNode(prevNode);
+      }
+      node.setParent(parentNode);
+      parentNode.appendChild(node);
+      if ("options" in item && item.options) {
+        traverse(item.options, node, currentValuePath, currentLabelPath, level + 1);
+      }
+    }
+  };
+  traverse(data, tree, "", "", 0);
+  return tree;
+};
+const buildSelectionPath = (node) => {
+  const selectionPath = [];
+  const foldersSelectionPath = [];
+  let currentNode = node;
+  while (currentNode && !currentNode.isRoot) {
+    selectionPath.unshift({
+      label: currentNode.label,
+      value: currentNode.value
+    });
+    if (currentNode.children.length > 0 || currentNode.getType() === optionTypes.VALUE_SELECTOR) {
+      foldersSelectionPath.unshift({
+        label: currentNode.label,
+        value: currentNode.value
+      });
+    }
+    currentNode = currentNode.parent;
+  }
+  return { selectionPath, foldersSelectionPath };
+};
+const stringSearchFlattenedNodes = (rootNode, searchValue) => {
+  if (!rootNode)
+    return [];
+  const searchString = searchValue.toLowerCase().trim();
+  if (!searchString)
+    return [];
+  const foundNodes = [];
+  for (const [path, lowercasePath] of rootNode.pathMapping) {
+    if (lowercasePath.includes(searchString)) {
+      const node = rootNode.findNodeByPath(path);
+      if (node)
+        foundNodes.push(node);
+    }
+  }
+  return foundNodes;
+};
+const findNextFocusableRowNode = (node) => {
+  let { nextNode } = node;
+  while (nextNode == null ? void 0 : nextNode.disabled) {
+    nextNode = nextNode.nextNode;
+  }
+  return nextNode;
+};
+const findPrevFocusableRowNode = (node) => {
+  let { prevNode } = node;
+  while (prevNode == null ? void 0 : prevNode.disabled) {
+    prevNode = prevNode.prevNode;
+  }
+  return prevNode;
+};
+
+export { buildSelectionPath, buildTree, findNextFocusableRowNode, findPrevFocusableRowNode, recursiveFind, stringSearchFlattenedNodes };
+//# sourceMappingURL=cascader-dropdown-utils.js.map

package/dist/es/cascader-dropdown/helpers/cascader-dropdown-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cascader-dropdown-utils.js","sources":["../../../../src/cascader-dropdown/helpers/cascader-dropdown-utils.ts"],"sourcesContent":["import { CascaderDropdownNode } from '../cascader-dropdown-node';\nimport { CascaderDropdownRootNode } from '../cascader-dropdown-root-node';\nimport {\n  CascaderDropdownDataValueType, CascaderDropdownItemType, CascaderDropdownOperatorType, optionTypes\n} from './cascader-dropdown-constants';\n\nexport const recursiveFind = (\n  data: (CascaderDropdownItemType | CascaderDropdownOperatorType)[],\n  value: CascaderDropdownDataValueType\n): CascaderDropdownDataValueType | null => {\n  for (let i = 0; i < data.length; i++) {\n    const item = data[i];\n\n    if (item.value === value.value) {\n      return item;\n    }\n\n    if ('options' in item && item.options) {\n      const found = recursiveFind(item.options, value);\n      if (found) {\n        return found;\n      }\n    }\n  }\n\n  return null;\n};\n\nexport const buildTree = (data: (CascaderDropdownItemType | CascaderDropdownOperatorType)[]): CascaderDropdownRootNode => {\n  const tree = new CascaderDropdownRootNode();\n\n  const traverse = (\n    options: (CascaderDropdownItemType | CascaderDropdownOperatorType)[],\n    parentNode: CascaderDropdownNode,\n    valuePath: string,\n    labelPath: string,\n    level: number\n  ) => {\n    for (let i = 0; i < options.length; i++) {\n      const item = options[i];\n\n      const value = item.value.toString().trim();\n      const label = item.label.toString().trim();\n\n      const currentValuePath = !valuePath ? value : `${valuePath} ${value}`;\n      const currentLabelPath = !labelPath ? label : `${labelPath} ${label}`;\n\n      const node = tree.createNode({\n        value,\n        label,\n        options: {\n          disabled: item.disabled,\n          shouldFetchOptions: item.shouldFetchOptions,\n          ...('type' in item ? {\n            dataType: item.dataType,\n            choices: item.choices,\n            regex: item.regex\n          } : {})\n        },\n        level: level + 1,\n        labelPath: currentLabelPath,\n        valuePath: currentValuePath,\n        type: 'type' in item ? optionTypes.VALUE_SELECTOR : optionTypes.ITEM\n      });\n\n      if (i === 0) {\n        node.setPrevNode(null);\n      } else {\n        const prevNode = parentNode.getLastChild();\n        if (prevNode) prevNode.setNextNode(node);\n        node.setPrevNode(prevNode);\n      }\n\n      node.setParent(parentNode);\n      parentNode.appendChild(node);\n\n      if ('options' in item && item.options) {\n        traverse(item.options, node, currentValuePath, currentLabelPath, level + 1);\n      }\n    }\n  };\n\n  traverse(data, tree, '', '', 0);\n\n  return tree;\n};\n\nexport const buildSelectionPath = (node: CascaderDropdownNode | null): { selectionPath: CascaderDropdownDataValueType[], foldersSelectionPath: CascaderDropdownDataValueType[] } => {\n  const selectionPath: CascaderDropdownDataValueType[] = [];\n  const foldersSelectionPath: CascaderDropdownDataValueType[] = [];\n\n  let currentNode: CascaderDropdownNode | null = node;\n\n  while (currentNode && !currentNode.isRoot) {\n    selectionPath.unshift({\n      label: currentNode.label,\n      value: currentNode.value\n    });\n\n    if (currentNode.children.length > 0 || currentNode.getType() === optionTypes.VALUE_SELECTOR) {\n      foldersSelectionPath.unshift({\n        label: currentNode.label,\n        value: currentNode.value\n      });\n    }\n\n    currentNode = currentNode.parent;\n  }\n\n  return { selectionPath, foldersSelectionPath };\n};\n\nexport const stringSearchFlattenedNodes = (\n  rootNode: CascaderDropdownRootNode | null,\n  searchValue: string\n) => {\n  if (!rootNode) return [];\n  const searchString = searchValue.toLowerCase().trim();\n  if (!searchString) return [];\n\n  const foundNodes: CascaderDropdownNode[] = [];\n  // eslint-disable-next-line no-restricted-syntax\n  for (const [path, lowercasePath] of rootNode.pathMapping) {\n    if (lowercasePath.includes(searchString)) {\n      const node = rootNode.findNodeByPath(path);\n      if (node) foundNodes.push(node);\n    }\n  }\n  return foundNodes;\n};\n\nexport const findNextFocusableRowNode = (node: CascaderDropdownNode): CascaderDropdownNode | null => {\n  let { nextNode } = node;\n  while (nextNode?.disabled) {\n    nextNode = nextNode.nextNode;\n  }\n  return nextNode;\n};\n\nexport const findPrevFocusableRowNode = (node: CascaderDropdownNode): CascaderDropdownNode | null => {\n  let { prevNode } = node;\n  while (prevNode?.disabled) {\n    prevNode = prevNode.prevNode;\n  }\n  return prevNode;\n};\n"],"names":[],"mappings":"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"}

package/dist/es/cascader-dropdown/styled/StyledItem.js

@@ -0,0 +1,39 @@
+import { config } from '../../packages/frontend-templates/slitches.config.js';
+import { styled } from '../../node_modules/@sparrowengg/twigs-react/dist/es/stitches.config.js';
+
+const prefixClassName = (className) => {
+  return `${config.prefix}-${className}`;
+};
+const StyledItem = styled("li", {
+  width: "100%",
+  padding: "$3 $6",
+  display: "flex",
+  alignItems: "center",
+  overflow: "hidden",
+  whiteSpace: "nowrap",
+  cursor: "pointer",
+  [`.${prefixClassName("cascader-dropdown__item-icon")}`]: {
+    opacity: "0"
+  },
+  variants: {
+    selected: {
+      true: {
+        backgroundColorOpacity: ["$primary500", 0.15]
+      }
+    },
+    hovered: {
+      true: {
+        backgroundColorOpacity: ["$secondary500", 0.06],
+        '&[data-is-selected="true"]': {
+          backgroundColorOpacity: ["$primary500", 0.15]
+        },
+        [`.${prefixClassName("cascader-dropdown__item-icon")}`]: {
+          opacity: "1"
+        }
+      }
+    }
+  }
+});
+
+export { StyledItem, prefixClassName };
+//# sourceMappingURL=StyledItem.js.map

package/dist/es/cascader-dropdown/styled/StyledItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledItem.js","sources":["../../../../src/cascader-dropdown/styled/StyledItem.tsx"],"sourcesContent":["import { styled } from '@sparrowengg/twigs-react';\nimport { config } from '../../../slitches.config';\n\nexport const prefixClassName = (className: string) => {\n  return `${config.prefix}-${className}`;\n};\n\nexport const StyledItem = styled('li', {\n  width: '100%',\n  padding: '$3 $6',\n  display: 'flex',\n  alignItems: 'center',\n  overflow: 'hidden',\n  whiteSpace: 'nowrap',\n  cursor: 'pointer',\n  [`.${prefixClassName('cascader-dropdown__item-icon')}`]: {\n    opacity: '0'\n  },\n  variants: {\n    selected: {\n      true: {\n        backgroundColorOpacity: ['$primary500', 0.15]\n      }\n    },\n    hovered: {\n      true: {\n        backgroundColorOpacity: ['$secondary500', 0.06],\n        '&[data-is-selected=\"true\"]': {\n          backgroundColorOpacity: ['$primary500', 0.15]\n        },\n        [`.${prefixClassName('cascader-dropdown__item-icon')}`]: {\n          opacity: '1'\n        }\n      }\n    }\n  }\n});\n"],"names":[],"mappings":";;;AAGa,MAAA,eAAA,GAAkB,CAAC,SAAsB,KAAA;AACpD,EAAA,OAAO,CAAG,EAAA,MAAA,CAAO,MAAM,CAAA,CAAA,EAAI,SAAS,CAAA,CAAA,CAAA;AACtC,EAAA;AAEa,MAAA,UAAA,GAAa,OAAO,IAAM,EAAA;AAAA,EACrC,KAAO,EAAA,MAAA;AAAA,EACP,OAAS,EAAA,OAAA;AAAA,EACT,OAAS,EAAA,MAAA;AAAA,EACT,UAAY,EAAA,QAAA;AAAA,EACZ,QAAU,EAAA,QAAA;AAAA,EACV,UAAY,EAAA,QAAA;AAAA,EACZ,MAAQ,EAAA,SAAA;AAAA,EACR,CAAC,CAAI,CAAA,EAAA,eAAA,CAAgB,8BAA8B,CAAC,EAAE,GAAG;AAAA,IACvD,OAAS,EAAA,GAAA;AAAA,GACX;AAAA,EACA,QAAU,EAAA;AAAA,IACR,QAAU,EAAA;AAAA,MACR,IAAM,EAAA;AAAA,QACJ,sBAAA,EAAwB,CAAC,aAAA,EAAe,IAAI,CAAA;AAAA,OAC9C;AAAA,KACF;AAAA,IACA,OAAS,EAAA;AAAA,MACP,IAAM,EAAA;AAAA,QACJ,sBAAA,EAAwB,CAAC,eAAA,EAAiB,IAAI,CAAA;AAAA,QAC9C,4BAA8B,EAAA;AAAA,UAC5B,sBAAA,EAAwB,CAAC,aAAA,EAAe,IAAI,CAAA;AAAA,SAC9C;AAAA,QACA,CAAC,CAAI,CAAA,EAAA,eAAA,CAAgB,8BAA8B,CAAC,EAAE,GAAG;AAAA,UACvD,OAAS,EAAA,GAAA;AAAA,SACX;AAAA,OACF;AAAA,KACF;AAAA,GACF;AACF,CAAC;;;;"}

package/dist/es/cascader-dropdown/use-value.js

@@ -0,0 +1,42 @@
+import { createContext, useContext } from 'react';
+import { CascaderDropdownRootNode } from './cascader-dropdown-root-node.js';
+
+const CascaderDropdownContext = createContext({
+  data: [],
+  value: { value: "", label: "" },
+  popoverOpen: false,
+  setPopoverOpen: () => {
+  },
+  id: "",
+  rootNode: new CascaderDropdownRootNode(),
+  selectedNode: null,
+  setSelectedNode: () => {
+  },
+  selectionPath: [],
+  foldersSelectionPath: [],
+  focusPreviousColumn: () => {
+  },
+  setFocusedNode: () => {
+  },
+  focusedNode: null,
+  inputRef: null,
+  focusNthColumn: () => {
+  },
+  focusNextRow: () => {
+  },
+  focusPreviousRow: () => {
+  },
+  focusNextColumn: () => {
+  },
+  handleChange: () => {
+  },
+  selectFocusedNode: () => {
+  },
+  selectorValue: void 0
+});
+const useCascaderDropdownContext = () => {
+  return useContext(CascaderDropdownContext);
+};
+
+export { CascaderDropdownContext, useCascaderDropdownContext };
+//# sourceMappingURL=use-value.js.map

package/dist/es/cascader-dropdown/use-value.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-value.js","sources":["../../../src/cascader-dropdown/use-value.ts"],"sourcesContent":["import { createContext, useContext, RefObject } from 'react';\nimport {\n  CascaderDropdownItemType, CascaderDropdownOperatorType, CascaderDropdownValueSelectorType, CascaderDropdownDataValueType\n} from './helpers/cascader-dropdown-constants';\nimport { CascaderDropdownRootNode } from './cascader-dropdown-root-node';\nimport { CascaderDropdownNode } from './cascader-dropdown-node';\n\nexport type CascaderDropdownContextType = {\n  data: (CascaderDropdownItemType | CascaderDropdownOperatorType)[];\n  value: CascaderDropdownDataValueType;\n  popoverOpen: boolean;\n  setPopoverOpen: (open: boolean) => void;\n  id: string;\n  rootNode: CascaderDropdownRootNode;\n  selectedNode: CascaderDropdownNode | null;\n  setSelectedNode: (node: CascaderDropdownNode | null) => void;\n  selectionPath: CascaderDropdownDataValueType[];\n  foldersSelectionPath: CascaderDropdownDataValueType[];\n  focusPreviousColumn: () => void;\n  focusNthColumn: (index: number) => void;\n  focusedNode: CascaderDropdownNode | null;\n  setFocusedNode: (node: CascaderDropdownNode | null) => void;\n  inputRef: RefObject<HTMLInputElement> | null;\n  focusNextRow: () => void;\n  focusPreviousRow: () => void;\n  focusNextColumn: () => void;\n  handleChange: (node: CascaderDropdownNode | CascaderDropdownOperatorType, value?: CascaderDropdownValueSelectorType) => void;\n  selectFocusedNode: () => void;\n  selectorValue?: CascaderDropdownValueSelectorType;\n};\n\nexport const CascaderDropdownContext = createContext<CascaderDropdownContextType>({\n  data: [],\n  value: { value: '', label: '' },\n  popoverOpen: false,\n  setPopoverOpen: () => {},\n  id: '',\n  rootNode: new CascaderDropdownRootNode(),\n  selectedNode: null,\n  setSelectedNode: () => {},\n  selectionPath: [],\n  foldersSelectionPath: [],\n  focusPreviousColumn: () => {},\n  setFocusedNode: () => {},\n  focusedNode: null,\n  inputRef: null,\n  focusNthColumn: () => {},\n  focusNextRow: () => {},\n  focusPreviousRow: () => {},\n  focusNextColumn: () => {},\n  handleChange: () => {},\n  selectFocusedNode: () => {},\n  selectorValue: undefined\n});\n\nexport const useCascaderDropdownContext = () => {\n  return useContext(CascaderDropdownContext);\n};\n"],"names":[],"mappings":";;;AA+BO,MAAM,0BAA0B,aAA2C,CAAA;AAAA,EAChF,MAAM,EAAC;AAAA,EACP,KAAO,EAAA,EAAE,KAAO,EAAA,EAAA,EAAI,OAAO,EAAG,EAAA;AAAA,EAC9B,WAAa,EAAA,KAAA;AAAA,EACb,gBAAgB,MAAM;AAAA,GAAC;AAAA,EACvB,EAAI,EAAA,EAAA;AAAA,EACJ,QAAA,EAAU,IAAI,wBAAyB,EAAA;AAAA,EACvC,YAAc,EAAA,IAAA;AAAA,EACd,iBAAiB,MAAM;AAAA,GAAC;AAAA,EACxB,eAAe,EAAC;AAAA,EAChB,sBAAsB,EAAC;AAAA,EACvB,qBAAqB,MAAM;AAAA,GAAC;AAAA,EAC5B,gBAAgB,MAAM;AAAA,GAAC;AAAA,EACvB,WAAa,EAAA,IAAA;AAAA,EACb,QAAU,EAAA,IAAA;AAAA,EACV,gBAAgB,MAAM;AAAA,GAAC;AAAA,EACvB,cAAc,MAAM;AAAA,GAAC;AAAA,EACrB,kBAAkB,MAAM;AAAA,GAAC;AAAA,EACzB,iBAAiB,MAAM;AAAA,GAAC;AAAA,EACxB,cAAc,MAAM;AAAA,GAAC;AAAA,EACrB,mBAAmB,MAAM;AAAA,GAAC;AAAA,EAC1B,aAAe,EAAA,KAAA,CAAA;AACjB,CAAC,EAAA;AAEM,MAAM,6BAA6B,MAAM;AAC9C,EAAA,OAAO,WAAW,uBAAuB,CAAA,CAAA;AAC3C;;;;"}

package/dist/es/filter/filter-pill-value-selector.js

@@ -0,0 +1,52 @@
+import { Popover, PopoverTrigger, PopoverContent } from '../popover/popover.js';
+import { prefixClassName } from '../cascader-dropdown/styled/StyledItem.js';
+import { useId, useState } from 'react';
+import CascaderDropdownValueSelector from '../cascader-dropdown/cascader-dropdown-value-selector.js';
+import { CascaderDropdownNode } from '../cascader-dropdown/cascader-dropdown-node.js';
+import { optionTypes } from '../cascader-dropdown/helpers/cascader-dropdown-constants.js';
+
+const FilterPillValueSelector = ({
+  children,
+  dataType,
+  choices,
+  onApply,
+  selectorValue
+}) => {
+  const id = useId();
+  const [open, setOpen] = useState(false);
+  return /* @__PURE__ */ React.createElement(Popover, { open, onOpenChange: setOpen }, /* @__PURE__ */ React.createElement(PopoverTrigger, { asChild: true, className: prefixClassName("cascader-dropdown__trigger") }, children), /* @__PURE__ */ React.createElement(
+    PopoverContent,
+    {
+      "data-filter-popover-content": id,
+      className: prefixClassName("cascader-dropdown"),
+      css: {
+        padding: 0,
+        border: "0.5px solid $black300",
+        borderRadius: "$xl",
+        minWidth: "260px",
+        maxWidth: "260px"
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      CascaderDropdownValueSelector,
+      {
+        hasOperator: false,
+        onApply: (value) => {
+          setOpen(false);
+          onApply(value);
+        },
+        onCancel: () => {
+          setOpen(false);
+        },
+        selectorValue,
+        selectedNode: new CascaderDropdownNode("", "", {
+          dataType,
+          choices
+        }, [], 0, "", "", optionTypes.VALUE_SELECTOR)
+      }
+    )
+  ));
+};
+
+export { FilterPillValueSelector as default };
+//# sourceMappingURL=filter-pill-value-selector.js.map

package/dist/es/filter/filter-pill-value-selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-pill-value-selector.js","sources":["../../../src/filter/filter-pill-value-selector.tsx"],"sourcesContent":["import { Popover, PopoverContent, PopoverTrigger } from '../popover';\nimport { prefixClassName } from '../cascader-dropdown/styled/StyledItem';\nimport { ReactNode, useId, useState } from 'react';\nimport CascaderDropdownValueSelector from '../cascader-dropdown/cascader-dropdown-value-selector';\nimport { CascaderDropdownNode } from '../cascader-dropdown/cascader-dropdown-node';\nimport {\n  dataTypes, optionTypes, CascaderDropdownDataValueType, CascaderDropdownValueSelectorType\n} from '../cascader-dropdown/helpers/cascader-dropdown-constants';\n\nconst FilterPillValueSelector = ({\n  children,\n  dataType,\n  choices,\n  onApply,\n  selectorValue\n}: {\n  children: ReactNode;\n  dataType: keyof typeof dataTypes;\n  choices?: CascaderDropdownDataValueType[];\n  onApply: (value: CascaderDropdownValueSelectorType[keyof CascaderDropdownValueSelectorType]) => void;\n  selectorValue: CascaderDropdownValueSelectorType;\n}) => {\n  const id = useId();\n\n  const [open, setOpen] = useState(false);\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild className={prefixClassName('cascader-dropdown__trigger')}>\n        {children}\n      </PopoverTrigger>\n      <PopoverContent\n        data-filter-popover-content={id}\n        className={prefixClassName('cascader-dropdown')}\n        css={{\n          padding: 0, border: '0.5px solid $black300', borderRadius: '$xl', minWidth: '260px', maxWidth: '260px'\n        }}\n      >\n        <CascaderDropdownValueSelector\n          hasOperator={false}\n          onApply={(value: CascaderDropdownValueSelectorType[keyof CascaderDropdownValueSelectorType]) => {\n            setOpen(false);\n            onApply(value);\n          }}\n          onCancel={() => {\n            setOpen(false);\n          }}\n          selectorValue={selectorValue}\n          selectedNode={new CascaderDropdownNode('', '', {\n            dataType,\n            choices\n          }, [], 0, '', '', optionTypes.VALUE_SELECTOR)}\n        />\n      </PopoverContent>\n    </Popover>\n  );\n};\n\nexport default FilterPillValueSelector;\n"],"names":[],"mappings":";;;;;;;AASA,MAAM,0BAA0B,CAAC;AAAA,EAC/B,QAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,aAAA;AACF,CAMM,KAAA;AACJ,EAAA,MAAM,KAAK,KAAM,EAAA,CAAA;AAEjB,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAEtC,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAQ,IAAY,EAAA,YAAA,EAAc,2BAChC,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA,EAAe,OAAO,EAAA,IAAA,EAAC,SAAW,EAAA,eAAA,CAAgB,4BAA4B,CAAA,EAAA,EAC5E,QACH,CACA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,6BAA6B,EAAA,EAAA;AAAA,MAC7B,SAAA,EAAW,gBAAgB,mBAAmB,CAAA;AAAA,MAC9C,GAAK,EAAA;AAAA,QACH,OAAS,EAAA,CAAA;AAAA,QAAG,MAAQ,EAAA,uBAAA;AAAA,QAAyB,YAAc,EAAA,KAAA;AAAA,QAAO,QAAU,EAAA,OAAA;AAAA,QAAS,QAAU,EAAA,OAAA;AAAA,OACjG;AAAA,KAAA;AAAA,oBAEA,KAAA,CAAA,aAAA;AAAA,MAAC,6BAAA;AAAA,MAAA;AAAA,QACC,WAAa,EAAA,KAAA;AAAA,QACb,OAAA,EAAS,CAAC,KAAsF,KAAA;AAC9F,UAAA,OAAA,CAAQ,KAAK,CAAA,CAAA;AACb,UAAA,OAAA,CAAQ,KAAK,CAAA,CAAA;AAAA,SACf;AAAA,QACA,UAAU,MAAM;AACd,UAAA,OAAA,CAAQ,KAAK,CAAA,CAAA;AAAA,SACf;AAAA,QACA,aAAA;AAAA,QACA,YAAc,EAAA,IAAI,oBAAqB,CAAA,EAAA,EAAI,EAAI,EAAA;AAAA,UAC7C,QAAA;AAAA,UACA,OAAA;AAAA,WACC,EAAC,EAAG,GAAG,EAAI,EAAA,EAAA,EAAI,YAAY,cAAc,CAAA;AAAA,OAAA;AAAA,KAC9C;AAAA,GAEJ,CAAA,CAAA;AAEJ;;;;"}

package/dist/es/filter/filter-pill.js

@@ -0,0 +1,298 @@
+import { styled } from '../packages/frontend-templates/slitches.config.js';
+import { prefixClassName } from '../cascader-dropdown/styled/StyledItem.js';
+import React__default from 'react';
+import { CascaderDropdown } from '../cascader-dropdown/cascader-dropdown.js';
+import { dataTypes, optionTypes, initialFilterValueSelectorValue } from '../cascader-dropdown/helpers/cascader-dropdown-constants.js';
+import FilterPillValueSelector from './filter-pill-value-selector.js';
+import { Flex } from '../node_modules/@sparrowengg/twigs-react/dist/es/flex/flex.js';
+import { TooltipProvider, Tooltip } from '../node_modules/@sparrowengg/twigs-react/dist/es/tooltip/tooltip.js';
+import { Text } from '../node_modules/@sparrowengg/twigs-react/dist/es/text/text.js';
+import { CloseCircleFillIcon } from '../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/close-circle-fill.js';
+import { Box } from '../node_modules/@sparrowengg/twigs-react/dist/es/box/box.js';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const getDisplayValue = (value) => {
+  var _a;
+  if (!value.connector)
+    return null;
+  const displayValue = (_a = value.value) == null ? void 0 : _a[value.connector.dataType];
+  if (typeof displayValue === "string")
+    return displayValue;
+  if (Array.isArray(displayValue))
+    return displayValue.join(", ");
+  if (value.connector.dataType === dataTypes.DATE_RANGE && typeof displayValue === "object" && displayValue !== null) {
+    return `${displayValue.start} - ${displayValue.end}`;
+  }
+  return null;
+};
+const FilterPill = ({
+  icon,
+  filterPillData,
+  setFilterPillData,
+  variant = "outline",
+  cascaderDropdownData,
+  onDelete,
+  showError = false
+}) => {
+  var _a, _b, _c, _d, _e;
+  const onChange = ({
+    selectedProperty,
+    selectorValue
+  }) => {
+    if (selectedProperty && "type" in selectedProperty && selectedProperty.type === optionTypes.VALUE_SELECTOR) {
+      if (!("dataType" in selectedProperty))
+        return;
+      const newFilterPillData = __spreadProps(__spreadValues({}, filterPillData), {
+        value: selectorValue != null ? selectorValue : initialFilterValueSelectorValue,
+        connector: {
+          dataType: selectedProperty.dataType,
+          label: `${selectedProperty.label}`,
+          value: `${selectedProperty.value}`,
+          type: selectedProperty.type
+        }
+      });
+      setFilterPillData(newFilterPillData);
+    }
+  };
+  return /* @__PURE__ */ React__default.createElement(TooltipProvider, { delayDuration: 0 }, /* @__PURE__ */ React__default.createElement(StyledFilterPill, { variant: showError ? "error" : variant }, /* @__PURE__ */ React__default.createElement(FilterPillLabel, { icon, label: filterPillData.property.label, labelProps: { css: { color: "$neutral900" } } }), /* @__PURE__ */ React__default.createElement(Flex, null, !((_a = filterPillData.connector) == null ? void 0 : _a.value) && /* @__PURE__ */ React__default.createElement(
+    CascaderDropdown,
+    {
+      data: cascaderDropdownData,
+      selectorValue: filterPillData.value,
+      onChange,
+      dropdownContentProps: { align: "start" }
+    },
+    /* @__PURE__ */ React__default.createElement(StyledValueButton, { css: { borderTopRightRadius: "$lg", borderBottomRightRadius: "$lg" } }, /* @__PURE__ */ React__default.createElement(
+      Text,
+      {
+        css: __spreadValues({
+          color: "$neutral700",
+          padding: "3px $4 3px $1"
+        }, showError && {
+          color: "$negative700",
+          fontWeight: "$5"
+        })
+      },
+      "Choose Condition"
+    ))
+  ), ((_b = filterPillData.connector) == null ? void 0 : _b.value) && /* @__PURE__ */ React__default.createElement(
+    CascaderDropdown,
+    {
+      data: cascaderDropdownData,
+      selectorValue: filterPillData.value,
+      onChange,
+      dropdownContentProps: { align: "start" }
+    },
+    /* @__PURE__ */ React__default.createElement(StyledValueButton, null, /* @__PURE__ */ React__default.createElement(Text, { css: { color: "$neutral700", padding: "3px $1 3px $1" } }, (_c = filterPillData.connector) == null ? void 0 : _c.label))
+  ), ((_d = filterPillData.connector) == null ? void 0 : _d.value) && /* @__PURE__ */ React__default.createElement(
+    CascaderDropdown,
+    {
+      data: cascaderDropdownData,
+      selectorValue: filterPillData.value,
+      value: filterPillData.connector,
+      onChange,
+      dropdownContentProps: { align: "start" }
+    },
+    /* @__PURE__ */ React__default.createElement(StyledValueButton, { css: { borderTopRightRadius: "$lg", borderBottomRightRadius: "$lg" } }, /* @__PURE__ */ React__default.createElement(
+      Text,
+      {
+        css: __spreadValues({
+          color: "$neutral900",
+          padding: "3px $4 3px $2"
+        }, showError && {
+          color: "$negative700"
+        }),
+        weight: "medium"
+      },
+      (_e = getDisplayValue(filterPillData)) != null ? _e : "Choose Value"
+    ))
+  )), /* @__PURE__ */ React__default.createElement(Tooltip, { content: "Remove" }, /* @__PURE__ */ React__default.createElement(StyledCloseButton, { className: prefixClassName("filter-pill__close-button"), onClick: () => onDelete() }, /* @__PURE__ */ React__default.createElement(CloseCircleFillIcon, { size: 16 })))));
+};
+const FilterPillLabel = ({
+  icon,
+  label,
+  css,
+  labelProps,
+  iconProps
+}) => {
+  return /* @__PURE__ */ React__default.createElement(Flex, { alignItems: "center", gap: "$2", css: __spreadValues({ padding: "3px $2 3px $4" }, css) }, icon && /* @__PURE__ */ React__default.createElement(
+    Box,
+    __spreadProps(__spreadValues({}, iconProps), {
+      css: __spreadValues({
+        lineHeight: 0,
+        flexShrink: 0,
+        color: "$neutral800",
+        "&, & svg": {
+          minWidth: "$4",
+          minHeight: "$4",
+          height: "$4",
+          width: "$4"
+        }
+      }, iconProps == null ? void 0 : iconProps.css)
+    }),
+    icon
+  ), /* @__PURE__ */ React__default.createElement(
+    Text,
+    __spreadProps(__spreadValues({
+      weight: "medium",
+      truncate: true
+    }, labelProps), {
+      css: __spreadValues({ color: "$neutral700", maxWidth: "$25" }, labelProps == null ? void 0 : labelProps.css)
+    }),
+    label
+  ));
+};
+const FilterPillWithoutOperator = ({
+  icon,
+  filterPillData,
+  setFilterPillData,
+  variant = "outline",
+  data,
+  onDelete,
+  showError = false
+}) => {
+  var _a;
+  const onChange = (value) => {
+    const newFilterPillData = __spreadProps(__spreadValues({}, filterPillData), {
+      value: __spreadProps(__spreadValues({}, filterPillData.value), {
+        [data.dataType]: value
+      }),
+      connector: {
+        dataType: data.dataType,
+        label: `${data.label}`,
+        value: `${data.value}`,
+        type: data.type
+      }
+    });
+    setFilterPillData(newFilterPillData);
+  };
+  return /* @__PURE__ */ React__default.createElement(TooltipProvider, { delayDuration: 0 }, /* @__PURE__ */ React__default.createElement(StyledFilterPill, { variant: showError ? "error" : variant }, /* @__PURE__ */ React__default.createElement(FilterPillLabel, { icon, label: `${filterPillData.property.label}:` }), /* @__PURE__ */ React__default.createElement(FilterPillValueSelector, { selectorValue: filterPillData.value, dataType: data.dataType, choices: data.choices, onApply: onChange }, /* @__PURE__ */ React__default.createElement(Flex, null, /* @__PURE__ */ React__default.createElement(StyledValueButton, { css: { borderTopRightRadius: "$lg", borderBottomRightRadius: "$lg" } }, /* @__PURE__ */ React__default.createElement(
+    Text,
+    {
+      css: __spreadValues({
+        color: "$neutral900",
+        padding: "3px $4 3px $2"
+      }, showError && {
+        color: "$negative700"
+      }),
+      weight: "medium"
+    },
+    (_a = getDisplayValue(filterPillData)) != null ? _a : "Choose Value"
+  )))), /* @__PURE__ */ React__default.createElement(Tooltip, { content: "Remove" }, /* @__PURE__ */ React__default.createElement(StyledCloseButton, { className: prefixClassName("filter-pill__close-button"), onClick: () => onDelete() }, /* @__PURE__ */ React__default.createElement(CloseCircleFillIcon, { size: 16 })))));
+};
+const StyledFilterPill = styled(Flex, {
+  height: "$7",
+  alignItems: "center",
+  borderWidth: "1px",
+  borderStyle: "solid",
+  borderColor: "$black200",
+  borderRadius: "$lg",
+  transition: "all $transitions$2",
+  cursor: "default",
+  width: "fit-content",
+  position: "relative",
+  flexShrink: 0,
+  "&:hover": {
+    borderColor: "$black400"
+  },
+  [`&:hover .${prefixClassName("filter-pill__close-button")}`]: {
+    opacity: 1
+  },
+  variants: {
+    disabled: {
+      true: {
+        opacity: 0.4,
+        cursor: "not-allowed"
+      }
+    },
+    variant: {
+      outline: {
+        backgroundColor: "transparent"
+      },
+      filled: {
+        backgroundColor: "$secondary50"
+      },
+      error: {
+        backgroundColorOpacity: ["$negative500", 0.05],
+        borderStyle: "dashed",
+        borderColor: "$negative400",
+        "&:hover": {
+          borderColor: "$negative400"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "outline"
+  }
+});
+const StyledValueButton = styled("button", {
+  backgroundColor: "transparent",
+  display: "flex",
+  alignItems: "center",
+  border: "none",
+  cursor: "pointer",
+  height: "100%",
+  transition: "all $transitions$2",
+  outlineWidth: "1px",
+  outlineStyle: "solid",
+  outlineColor: "transparent",
+  flexShrink: 0,
+  "&:focus, &:active": {
+    outlineColor: "transparent"
+  },
+  "&:focus-visible": {
+    outline: "1px solid $primary400"
+  }
+});
+const StyledCloseButton = styled("button", {
+  backgroundColor: "transparent",
+  border: "none",
+  cursor: "pointer",
+  outline: "none",
+  color: "$neutral500",
+  transition: "all $transitions$2",
+  lineHeight: 0,
+  position: "absolute",
+  right: 0,
+  top: 0,
+  transform: "translate(35%, -35%)",
+  opacity: 0,
+  background: "radial-gradient($white900, $white900 50%, transparent 50%, transparent)",
+  "&:hover, &:focus, &:active, &:focus-visible": {
+    opacity: 1
+  },
+  "& path": {
+    outlineWidth: "3px",
+    outlineStyle: "solid",
+    outlineColor: "$white900",
+    borderRadius: "$round"
+  },
+  "&:hover": {
+    color: "$neutral800"
+  },
+  "&:hover path, &:focus path, &:active path, &:focus-visible path": {
+    outlineColor: "#F2F5F8"
+  }
+});
+
+export { FilterPill, FilterPillWithoutOperator };
+//# sourceMappingURL=filter-pill.js.map