@lightsparkdev/ui 1.0.17 → 1.1.1

package/dist/chunk-IXTGSOHT.cjs

@@ -1,344 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var _chunkVAKYMPPXcjs = require('./chunk-VAKYMPPX.cjs');
-
-
-
-
-
-
-var _chunkE4MOQFMEcjs = require('./chunk-E4MOQFME.cjs');
-
-
-var _chunkKSHNWL2Lcjs = require('./chunk-KSHNWL2L.cjs');
-
-
-var _chunkIR56ZLYLcjs = require('./chunk-IR56ZLYL.cjs');
-
-
-var _chunkM2ZLCF6Pcjs = require('./chunk-M2ZLCF6P.cjs');
-
-
-var _chunkWDEX6VIPcjs = require('./chunk-WDEX6VIP.cjs');
-
-
-var _chunkZU72XWNEcjs = require('./chunk-ZU72XWNE.cjs');
-
-
-
-var _chunkXTQV7ZJ6cjs = require('./chunk-XTQV7ZJ6.cjs');
-
-
-var _chunkNWNESPGQcjs = require('./chunk-NWNESPGQ.cjs');
-
-
-var _chunkFZBPLBNDcjs = require('./chunk-FZBPLBND.cjs');
-
-
-var _chunkN63HBX3Vcjs = require('./chunk-N63HBX3V.cjs');
-
-
-
-var _chunkZ6EUSUADcjs = require('./chunk-Z6EUSUAD.cjs');
-
-// src/components/TextInput.tsx
-var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
-var _react = require('react'); var _react2 = _interopRequireDefault(_react);
-var _jsxruntime = require('@emotion/react/jsx-runtime');
-var selectLeftOffset = 10;
-var iconSides = ["left", "right"];
-var iconOffsets = ["small", "large"];
-var iconWidths = [8, 12, 16];
-function withDefaults(textInputProps) {
-  return _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, textInputProps), {
-    width: textInputProps.width || "full",
-    type: textInputProps.type || "text",
-    disabled: Boolean(textInputProps.disabled),
-    typography: _chunkZ6EUSUADcjs.__spreadValues.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, _chunkE4MOQFMEcjs.defaultTextInputTypography), textInputProps.typography)
-  });
-}
-function TextInput(textInputProps) {
-  var _a, _b;
-  const props = withDefaults(textInputProps);
-  const [focused, setFocused] = _react.useState.call(void 0, false);
-  const inputRef = props.inputRef || _react2.default.createRef();
-  const ref = props.inputRefCb || inputRef;
-  if (props.inputRefCb && !props.inputRef) {
-    console.warn("TextInput: inputRef should be provided with inputRefCb.");
-  }
-  const handleKeyDown = (e) => {
-    if (e.key === "Enter" && props.onEnter) {
-      props.onEnter();
-    }
-  };
-  const hasError = Boolean(props.error);
-  const iconSide = props.icon ? props.icon.side || "right" : void 0;
-  const hasIconLeft = Boolean(props.icon && iconSide === "left");
-  const hasIconRight = Boolean(props.icon && iconSide === "right") || props.loading;
-  const iconWidth = ((_a = props.icon) == null ? void 0 : _a.width) || 12;
-  const iconCenterOffset = ((_b = props.icon) == null ? void 0 : _b.offset) === "large" ? 26 : 18;
-  const iconTextOffset = iconCenterOffset === 18 ? 4 : 14;
-  const leftIconOffset = iconCenterOffset - iconWidth / 2;
-  let paddingLeftPx;
-  if (typeof props.paddingX === "number") {
-    if (hasIconLeft) {
-      paddingLeftPx = props.paddingX + iconWidth + iconTextOffset;
-    } else {
-      paddingLeftPx = props.paddingX;
-    }
-  } else if (hasIconLeft) {
-    paddingLeftPx = leftIconOffset + iconWidth + iconTextOffset;
-  } else if (props.select) {
-    paddingLeftPx = selectLeftOffset + props.select.width + 5;
-  }
-  const rightIconWidth = props.loading ? 20 : iconWidth;
-  const rightIconOffset = iconCenterOffset - rightIconWidth / 2;
-  let paddingRightPx;
-  if (typeof props.paddingX === "number") {
-    if (hasIconRight) {
-      paddingRightPx = iconTextOffset + rightIconWidth + props.paddingX;
-    } else {
-      paddingRightPx = props.paddingX;
-    }
-  } else if (hasIconRight) {
-    paddingRightPx = rightIconOffset + rightIconWidth + iconTextOffset;
-  }
-  const textInputWidth = props.width === "short" ? "250px" : "100%";
-  let input = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, InputContainer, { children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      Input,
-      {
-        disabled: props.disabled,
-        maxLength: props.maxLength,
-        inputMode: props.inputMode,
-        pattern: props.pattern,
-        onBlur: (blurEvent) => {
-          setFocused(false);
-          if (props.onBlur) {
-            props.onBlur(blurEvent);
-          }
-        },
-        onChange: (e) => {
-          e.target.setCustomValidity("");
-          props.onChange(e.target.value, e);
-        },
-        onFocus: (focusEvent) => {
-          setFocused(true);
-          if (props.onFocus) {
-            props.onFocus(focusEvent);
-          }
-        },
-        onKeyDown: (e) => {
-          if (props.onKeyDown) {
-            props.onKeyDown(e.key, e);
-          }
-          handleKeyDown(e);
-        },
-        onKeyUp: props.onKeyUp,
-        id: props.id,
-        onPaste: props.onPaste,
-        placeholder: props.placeholder,
-        ref,
-        name: props.name,
-        type: props.type,
-        value: props.value,
-        paddingLeftPx,
-        paddingRightPx,
-        paddingTopPx: props.paddingY,
-        paddingBottomPx: props.paddingY,
-        activeOutline: props.activeOutline,
-        activeOutlineColor: props.activeOutlineColor,
-        hasError,
-        "data-test-id": props.testId,
-        typography: props.typography,
-        autoComplete: props.autoComplete === "off" ? "new-password" : props.autoComplete,
-        onBeforeInput: (e) => {
-          if (props.onBeforeInput) {
-            const event = e;
-            props.onBeforeInput(event);
-          }
-        },
-        borderRadius: props.borderRadius,
-        enterKeyHint: props.enterKeyHint,
-        autoFocus: props.autoFocus
-      }
-    ),
-    props.rightButtonText && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, RightButtonAligner, { paddingX: rightIconOffset, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, RightButton, { onClick: props.onRightButtonClick, children: props.rightButtonText }) })
-  ] });
-  if (hasIconLeft || hasIconRight) {
-    input = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, WithIcon, { hasError, withFocus: focused, children: [
-      props.icon && iconSide === "left" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        TextInputIconContainer,
-        {
-          onClick: props.onClickIcon ? props.onClickIcon : () => {
-          },
-          isIconRight: false,
-          focused,
-          hasValue: Boolean(props.value),
-          colorProp: props.typography.color,
-          iconOffset: typeof props.paddingX === "number" ? props.paddingX : leftIconOffset,
-          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXTQV7ZJ6cjs.Icon, { name: props.icon.name, width: iconWidth })
-        }
-      ),
-      input,
-      hasIconRight && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        TextInputIconContainer,
-        {
-          onClick: props.onClickIcon ? props.onClickIcon : () => {
-          },
-          isIconRight: true,
-          focused,
-          hasValue: Boolean(props.value),
-          colorProp: props.typography.color,
-          iconOffset: typeof props.paddingX === "number" ? props.paddingX : rightIconOffset,
-          children: props.loading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkIR56ZLYLcjs.Loading, { center: false, size: rightIconWidth }) : props.icon && iconSide === "right" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXTQV7ZJ6cjs.Icon, { name: props.icon.name, width: rightIconWidth }) : null
-        }
-      )
-    ] });
-  }
-  const hintTooltipId = props.hintTooltip ? `${props.id || "input"}-hint-tooltip` : void 0;
-  const { select } = props;
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, StyledTextInput, { widthProp: textInputWidth, children: [
-    props.label ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TextInputLabel, { hasError, children: props.label }) : null,
-    select && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      TextInputSelect,
-      {
-        value: select.value,
-        widthProp: select.width,
-        typography: props.typography,
-        onChange: (event) => {
-          var _a2;
-          select.onChange(event.target.value);
-          (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
-        },
-        children: select.options.map((option) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { value: option.value, children: option.label }, option.value))
-      }
-    ),
-    input,
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkE4MOQFMEcjs.InputSubtext,
-      {
-        text: props.error || props.hint,
-        hasError,
-        tooltipId: hintTooltipId
-      }
-    ),
-    props.hintTooltip ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWDEX6VIPcjs.Tooltip, { id: hintTooltipId, content: props.hintTooltip, place: "right" }) : null
-  ] });
-}
-var TextInputSelect = _styled2.default.select`
-  ${({ typography, theme }) => _chunkFZBPLBNDcjs.applyTypography.call(void 0, theme, typography.type, typography.size, typography.color)}
-  position: absolute;
-  z-index: ${_chunkZU72XWNEcjs.z.textInput + 1};
-  border: none;
-  background-color: transparent;
-  top: 0;
-  left: ${selectLeftOffset}px;
-  height: 48px;
-  width: ${({ widthProp }) => `${widthProp}px`};
-`;
-var WithIcon = _styled2.default.div`
-  ${_chunkNWNESPGQcjs.standardBorderRadius.call(void 0, 8)}
-  position: relative;
-
-  & ${_chunkXTQV7ZJ6cjs.IconContainer.toString()} {
-    z-index: ${_chunkZU72XWNEcjs.z.textInput + 1};
-  }
-`;
-var TextInputIconContainer = _styled2.default.div`
-  position: absolute;
-  z-index: ${_chunkZU72XWNEcjs.z.textInput + 1};
-  ${({ isIconRight, iconOffset }) => isIconRight ? `right: ${iconOffset}px` : `left: ${iconOffset}px`};
-  top: 0;
-  bottom: 0;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  cursor: ${({ onClick }) => onClick ? "pointer" : "auto"};
-  color: ${({ focused, hasValue, theme, colorProp }) => focused || hasValue ? _chunkN63HBX3Vcjs.getFontColor.call(void 0, theme, colorProp) : _chunkE4MOQFMEcjs.textInputPlaceholderColor.call(void 0, { theme })};
-`;
-var Input = _styled2.default.input`
-  ${_chunkE4MOQFMEcjs.textInputStyle};
-
-  // disable autofill styles in chrome https://stackoverflow.com/a/68240841/9808766
-  &:-webkit-autofill,
-  &:-webkit-autofill:focus,
-  &:-internal-autofill-selected,
-  &:-internal-autofill-selected:focus {
-    background-color: ${({ theme }) => theme.bg} !important;
-    color: ${({ theme }) => theme.text} !important;
-    transition:
-      background-color 600000s 0s,
-      color 600000s 0s !important;
-  }
-`;
-var RightButtonAligner = _styled2.default.div`
-  position: absolute;
-  top: 0;
-  right: ${({ paddingX }) => paddingX}px;
-  z-index: ${_chunkZU72XWNEcjs.z.textInput + 1};
-  bottom: 0;
-  display: flex;
-  align-items: center;
-`;
-var RightButton = _styled2.default.call(void 0, _chunkM2ZLCF6Pcjs.UnstyledButton)`
-  border-radius: 4px;
-  border: none;
-  background-color: ${({ theme }) => theme.vlcNeutral};
-  color: ${({ theme }) => theme.mcNeutral};
-  font-size: 14px;
-  font-weight: 600;
-  padding: 8px 10px;
-`;
-var TextInputLabel = _styled2.default.label`
-  ${_chunkNWNESPGQcjs.standardBorderRadius.call(void 0, 8)}
-  font-size: 10px;
-  position: absolute;
-  z-index: ${_chunkZU72XWNEcjs.z.textInput + 1};
-  background-color: ${({ theme }) => theme.bg};
-  color: ${({ theme, hasError }) => hasError ? theme.danger : theme.mcNeutral};
-  font-weight: 600;
-  padding: 4px 6px;
-  left: 12px;
-  top: -10px;
-`;
-var TextInputHalfRow = _styled2.default.div`
-  margin-top: ${_chunkE4MOQFMEcjs.inputSpacingPx}px;
-  display: flex;
-  justify-content: space-between;
-  gap: 16px;
-  & > * {
-    width: 50%;
-  }
-`;
-var StyledTextInput = _styled2.default.div`
-  width: ${({ widthProp }) => widthProp};
-  position: relative;
-
-  /* eg forms, should be left consistent: */
-  & + & {
-    margin-top: ${_chunkE4MOQFMEcjs.inputSpacingPx}px;
-  }
-
-  ${TextInputHalfRow.toString()} & + & {
-    margin-top: 0;
-  }
-
-  ${_chunkKSHNWL2Lcjs.CheckboxContainer.toString()} + &,
-  ${_chunkVAKYMPPXcjs.ToggleContainer.toString()} + &,
-  & + ${_chunkKSHNWL2Lcjs.CheckboxContainer.toString()},
-  & + ${_chunkVAKYMPPXcjs.ToggleContainer.toString()} {
-    margin-top: ${_chunkE4MOQFMEcjs.inputSpacingPx}px;
-  }
-`;
-var InputContainer = _styled2.default.div`
-  position: relative;
-`;
-
-
-
-
-
-
-
-exports.iconSides = iconSides; exports.iconOffsets = iconOffsets; exports.iconWidths = iconWidths; exports.TextInput = TextInput; exports.TextInputHalfRow = TextInputHalfRow;

package/dist/chunk-IYIN4UXN.cjs

@@ -1,101 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
-
-var _chunk4XPAKKBScjs = require('./chunk-4XPAKKBS.cjs');
-
-
-var _chunkIXTGSOHTcjs = require('./chunk-IXTGSOHT.cjs');
-
-
-
-var _chunkZ6EUSUADcjs = require('./chunk-Z6EUSUAD.cjs');
-
-// src/components/PhoneInput.tsx
-
-
-
-
-var _libphonenumberjs = require('libphonenumber-js');
-var _react = require('react');
-var _jsxruntime = require('@emotion/react/jsx-runtime');
-var countries = _libphonenumberjs.getCountries.call(void 0, );
-var defaultOptions = countries.map((countryCode) => {
-  return {
-    value: countryCode,
-    label: `${_libphonenumberjs.getCountryCallingCode.call(void 0, countryCode)} (${_chunk4XPAKKBScjs.countryCodesToNames[countryCode]})`
-  };
-}).sort((a, b) => a.label.localeCompare(b.label));
-function getSelectWidth(value, pxPerChar) {
-  const label = _libphonenumberjs.getCountryCallingCode.call(void 0, value);
-  const chars = label.length;
-  return chars * pxPerChar + 30;
-}
-function PhoneInput({
-  typography,
-  onChange: onChangeProp,
-  pxPerChar = 6,
-  defaultCountryCode = "US"
-}) {
-  const [countryCode, setCountryCode] = _react.useState.call(void 0, defaultCountryCode);
-  const [value, setValue] = _react.useState.call(void 0, "");
-  const [width, setWidth] = _react.useState.call(void 0, getSelectWidth(countryCode, pxPerChar));
-  const [wasBlurred, setWasBlurred] = _react.useState.call(void 0, false);
-  const onChangeSelect = _react.useCallback.call(void 0, 
-    (newValue) => {
-      setCountryCode(newValue);
-      const newWidth = getSelectWidth(newValue, pxPerChar);
-      setWidth(newWidth);
-    },
-    [setCountryCode, setWidth, pxPerChar]
-  );
-  const options = defaultOptions.map((option) => {
-    if (option.value === countryCode) {
-      return _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, option), {
-        label: `+ ${_libphonenumberjs.getCountryCallingCode.call(void 0, countryCode)}`
-      });
-    }
-    return option;
-  });
-  const onChange = _react.useCallback.call(void 0, 
-    (newValue) => {
-      const parsedValue = newValue.startsWith("+") ? newValue.slice(1) : newValue;
-      const formatter2 = new (0, _libphonenumberjs.AsYouType)(countryCode);
-      const formattedValue2 = formatter2.input(parsedValue);
-      setValue(formattedValue2);
-      const phoneNumber = formatter2.getNumber();
-      if (onChangeProp && phoneNumber) {
-        onChangeProp({
-          number: phoneNumber.number,
-          formatted: formattedValue2,
-          isValid: phoneNumber.isValid()
-        });
-      }
-    },
-    [setValue, countryCode, onChangeProp]
-  );
-  const formatter = new (0, _libphonenumberjs.AsYouType)(countryCode);
-  const formattedValue = formatter.input(value);
-  const isValidPhone = formatter.isValid();
-  const error = !isValidPhone && wasBlurred ? "Please enter a valid phone number." : void 0;
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkIXTGSOHTcjs.TextInput,
-    {
-      select: {
-        options,
-        value: countryCode,
-        onChange: onChangeSelect,
-        width
-      },
-      pattern: "[0-9,]*",
-      inputMode: "numeric",
-      value: formattedValue,
-      onBlur: () => setWasBlurred(true),
-      onChange,
-      error,
-      typography
-    }
-  );
-}
-
-
-
-exports.PhoneInput = PhoneInput;

package/dist/chunk-JBVSQGPY.cjs

@@ -1,96 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
-
-
-
-
-
-
-var _chunkCH2PLO6Fcjs = require('./chunk-CH2PLO6F.cjs');
-
-
-var _chunkAMXTRBOOcjs = require('./chunk-AMXTRBOO.cjs');
-
-
-var _chunkCYINPDD3cjs = require('./chunk-CYINPDD3.cjs');
-
-
-var _chunk6KPDO4EPcjs = require('./chunk-6KPDO4EP.cjs');
-
-
-var _chunkXTQV7ZJ6cjs = require('./chunk-XTQV7ZJ6.cjs');
-
-
-var _chunkWY7PY47Qcjs = require('./chunk-WY7PY47Q.cjs');
-
-
-var _chunkIMZKCKTIcjs = require('./chunk-IMZKCKTI.cjs');
-
-
-var _chunkL3U3VIEJcjs = require('./chunk-L3U3VIEJ.cjs');
-
-
-
-
-var _chunkZ6EUSUADcjs = require('./chunk-Z6EUSUAD.cjs');
-
-// src/utils/toReactNodes/toReactNodes.tsx
-var _core = require('@lightsparkdev/core');
-var _react = require('react');
-var _jsxruntime = require('@emotion/react/jsx-runtime');
-function toReactNodes(toReactNodesArg) {
-  const toReactNodesArray = _core.ensureArray.call(void 0, toReactNodesArg);
-  const reactNodes = toReactNodesArray.map((node, i) => {
-    if (!node) {
-      return null;
-    } else if (typeof node === "string" || _chunkCH2PLO6Fcjs.isTextNode.call(void 0, node)) {
-      const text = typeof node === "string" ? node : node.text;
-      let content = text;
-      if (_chunkCH2PLO6Fcjs.isTextNode.call(void 0, node) && node.typography) {
-        const _a = node.typography, { type: typographyType } = _a, typographyProps = _chunkZ6EUSUADcjs.__objRest.call(void 0, _a, ["type"]);
-        content = _chunkIMZKCKTIcjs.renderTypography.call(void 0, typographyType, _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, typographyProps), {
-          children: text
-        }));
-      } else {
-        content = _chunkL3U3VIEJcjs.stringToNodes.call(void 0, text);
-      }
-      return (
-        /* text property is a sufficient key for both strings and text nodes due to minimal impl */
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react.Fragment, { children: content }, `text-${i}-${text.substr(0, 20)}`)
-      );
-    } else if (_chunkCH2PLO6Fcjs.isLinkNode.call(void 0, node)) {
-      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWY7PY47Qcjs.Link, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, node.link), `link-${i}-${node.link.id}`);
-    } else if (_chunkCH2PLO6Fcjs.isNextLinkNode.call(void 0, node)) {
-      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkAMXTRBOOcjs.NextLink,
-        _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, node.nextLink),
-        `next-link-${i}-${node.nextLink.id}`
-      );
-    } else if (_chunkCH2PLO6Fcjs.isIconNode.call(void 0, node)) {
-      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkXTQV7ZJ6cjs.Icon,
-        _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, node.icon), {
-          width: node.icon.width || 12
-        }),
-        `icon-${i}-${node.icon.id}`
-      );
-    } else if (_chunkCH2PLO6Fcjs.isCurrencyAmountNode.call(void 0, node)) {
-      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunk6KPDO4EPcjs.CurrencyAmount,
-        _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, node.currencyAmount),
-        `currency-amount-${i}-${node.currencyAmount.id}`
-      );
-    } else if (_chunkCH2PLO6Fcjs.isClipboardTextFieldNode.call(void 0, node)) {
-      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkCYINPDD3cjs.ClipboardTextField,
-        _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, node.clipboardTextField),
-        `clipboard-text-field-${i}-${node.clipboardTextField.id}`
-      );
-    }
-    return null;
-  });
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react.Fragment, { children: reactNodes });
-}
-
-
-
-exports.toReactNodes = toReactNodes;

package/dist/chunk-JGFSABKL.js

@@ -1,89 +0,0 @@
-import {
-  Modal
-} from "./chunk-ACQIOYO3.js";
-import {
-  Spacing
-} from "./chunk-E5DUKMCU.js";
-import {
-  Button
-} from "./chunk-CEZHIXNR.js";
-import {
-  z
-} from "./chunk-55OQPFLF.js";
-import {
-  useBreakpoints
-} from "./chunk-JSGRNWSB.js";
-
-// src/components/DataManagerTable/Popover.tsx
-import styled from "@emotion/styled";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
-var Popover = ({
-  show,
-  setShow,
-  side = "left",
-  onApply,
-  onClear,
-  children
-}) => {
-  const breakPoint = useBreakpoints();
-  const isSm = breakPoint.isSm();
-  const handleApply = () => {
-    onApply();
-  };
-  const handleClear = () => {
-    onClear();
-  };
-  const handleKeyPress = (e) => {
-    if (e.key === "Enter") {
-      onApply();
-    }
-  };
-  const content = /* @__PURE__ */ jsxs(Content, { onKeyDownCapture: handleKeyPress, isSm, children: [
-    children,
-    /* @__PURE__ */ jsxs(Footer, { children: [
-      /* @__PURE__ */ jsx(Button, { text: "Clear", onClick: handleClear }),
-      /* @__PURE__ */ jsxs(FooterRight, { children: [
-        /* @__PURE__ */ jsx(Button, { text: "Cancel", onClick: () => setShow(false) }),
-        /* @__PURE__ */ jsx(Button, { text: "Apply", kind: "primary", onClick: handleApply })
-      ] })
-    ] })
-  ] });
-  if (isSm) {
-    return /* @__PURE__ */ jsx(Modal, { visible: show, onClose: () => setShow(false), smKind: "fullscreen", children: content });
-  }
-  return /* @__PURE__ */ jsx(Container, { show, side, children: content });
-};
-var Container = styled.div`
-  position: absolute;
-  z-index: ${z.dropdown};
-  top: 44px;
-  display: ${({ show }) => show ? "block" : "none"};
-  ${({ side }) => side === "right" ? "right: 0;" : "left: 0;"}
-  width: 400px;
-  background: white;
-  border: 0.5px solid ${({ theme }) => theme.c1Neutral};
-  border-radius: 12px;
-  box-shadow:
-    0px 1px 4px 0px rgba(0, 0, 0, 0.1),
-    0px 4px 8px 0px rgba(0, 0, 0, 0.08);
-`;
-var Content = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: ${Spacing.px.xl};
-  padding: ${({ isSm }) => isSm ? "0px" : Spacing.px.lg};
-`;
-var Footer = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-`;
-var FooterRight = styled.div`
-  display: flex;
-  gap: ${Spacing.px.xs};
-`;
-
-export {
-  Popover
-};