se-design 1.0.90 → 1.0.91

package/dist/index51.js.map

@@ -1 +1 @@
-{"version":3,"file":"index51.js","sources":["../src/components/BreadCrumbs/index.tsx"],"sourcesContent":["import React from 'react';\nimport { Icon } from '../Icon';\nimport { Popover } from '../Popover';\nimport { MenuList } from '../MenuList';\n\nimport './style.scss';\n\ninterface Crumb {\n  id: string | number;\n  label: string;\n  href?: string;\n  automationId?: string;\n}\n\nconst breadCrumbsClassNames = {\n  container: 'se-design-breadcrumbs flex items-center',\n  itemLabel: 'se-design-breadcrumbs-item-label inline-flex items-center w-fit',\n};\n\ninterface BreadCrumbsProps {\n  crumbs: Crumb[];\n  onCrumbClick?: (crumb: Crumb) => void;\n  className?: any;\n  /** Accessible name for the breadcrumb navigation landmark. Defaults to \"Breadcrumb\".  */\n  ariaLabel?: string;\n  /** Heading level to use when only a single crumb is provided. Defaults to 1. */\n  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n}\n\nexport const BreadCrumbs: React.FC<BreadCrumbsProps> = ({ crumbs, onCrumbClick, className = '', ariaLabel = 'Breadcrumb', headingLevel = 1 }) => {\n  const isSingleCrumb = crumbs?.length === 1;\n\n  if (isSingleCrumb) {\n    const HeadingTag = `h${headingLevel}` as React.ElementType;\n    return (\n      <div className={`${breadCrumbsClassNames.container} ${className}`} data-automation-id=\"breadcrumbs-container\">\n        <HeadingTag className={`${breadCrumbsClassNames.itemLabel} single-crumb`}>\n          {crumbs[0].label}\n        </HeadingTag>\n      </div>\n    );\n  }\n\n  const shouldShowDropdown = crumbs?.length > 3;\n  const visibleCrumbs = shouldShowDropdown ? crumbs?.slice(-2) : crumbs;\n  const dropdownCrumbs = shouldShowDropdown ? crumbs?.slice(0, -2) : [];\n\n  const isCurrentPage = (index: number) => index === visibleCrumbs?.length - 1;\n\n  const getLabelClassNames = (index: number) => {\n    if (isCurrentPage(index)) {\n      return `${breadCrumbsClassNames.itemLabel} highlighted-crumb`;\n    }\n    return `${breadCrumbsClassNames.itemLabel} unhighlighted-crumb`;\n  };\n\n  return (\n    <nav className={`${breadCrumbsClassNames.container} ${className}`} aria-label={ariaLabel} data-automation-id=\"breadcrumbs-container\">\n      {dropdownCrumbs?.length > 0 && (\n        <Popover\n          className=\"se-design-overflow-breadcrumbs\"\n          position=\"bottom-left\"\n          noBorder\n          ariaLabel=\"Show more breadcrumbs\"\n          renderPopoverSrcElement={({ displayPopover }) => {\n            return (\n              <div\n                className={`overflow-breadcrumbs-src-element px-1.5 py-1.5 rounded-md hover:cursor-pointer ${\n                  displayPopover ? 'bg-[var(--color-blue-200)]' : ''\n                }`}\n                data-automation-id=\"breadcrumbs-kebab-menu\"\n              >\n                <Icon name=\"kebab-menu\" />\n              </div>\n            );\n          }}\n          renderPopoverContents={({ closePopoverCb }) => (\n            <MenuList\n              items={dropdownCrumbs.map((crumb) => ({\n                id: String(crumb?.id),\n                label: crumb?.label,\n                onClick: () => {\n                  onCrumbClick?.(crumb);\n                  closePopoverCb();\n                }\n              }))}\n            />\n          )}\n        />\n      )}\n      <ol className=\"se-design-breadcrumbs-list inline-flex items-center\">\n        {visibleCrumbs?.map((crumb, index) => {\n          const Tag = isCurrentPage(index) ? 'span' : 'a';// current page should not be clickable\n          return (\n            <li key={crumb?.id} className=\"se-design-breadcrumbs-item inline-flex items-center w-fit text-xl\">\n              {(index > 0 || shouldShowDropdown) && <Icon name=\"chevron\" rotation={'270'} />}\n              <Tag\n                {...(isCurrentPage(index)\n                  ? { 'aria-current': 'page' as const }\n                  : {\n                      href: crumb.href ?? '#',\n                      onClick: (e: React.MouseEvent<HTMLAnchorElement>) => {\n                        if (!crumb.href) e.preventDefault();\n                        onCrumbClick?.(crumb);\n                      }\n                    })}\n                className={`${getLabelClassNames(index)}${!isCurrentPage(index) ? ' cursor-pointer focus-outline' : ''}`}\n                data-automation-id={crumb?.automationId || `breadcrumbs-item-${index}`}\n              >\n                {crumb?.label}\n              </Tag>\n            </li>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n};\n"],"names":["breadCrumbsClassNames","container","itemLabel","BreadCrumbs","crumbs","onCrumbClick","className","ariaLabel","headingLevel","length","HeadingTag","React","createElement","label","shouldShowDropdown","visibleCrumbs","slice","dropdownCrumbs","isCurrentPage","index","getLabelClassNames","Popover","position","noBorder","renderPopoverSrcElement","displayPopover","Icon","name","renderPopoverContents","closePopoverCb","MenuList","items","map","crumb","id","String","onClick","Tag","key","rotation","_extends","href","e","preventDefault","automationId"],"mappings":"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"}
+{"version":3,"file":"index51.js","sources":["../src/components/PhoneInput/index.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState, useCallback } from 'react';\nimport './style.scss';\nimport countriesInfoJson from './countriesInfo.json';\nimport { Icon } from '../Icon';\nimport { useStableId } from '../../utils/useStableId';\nimport { getA11yNameAttributes, useCombobox } from '../../utils/a11y';\n\nexport interface PhoneInputProps {\n  onCountrycodeChange: (countryCode: string) => void;\n  onNumberChange: (number: string) => void;\n  error?: boolean;\n  errorMessage?: string;\n  value?: {\n    countryCode: string;\n    number: string;\n  };\n  label?: string;\n  automationId?: string;\n  /**\n   * Accessible label for the entire phone input group (role=\"group\").\n   * Provides context for screen readers (e.g., \"Two-step verification phone number for signer 1\").\n   */\n  ariaLabel?: string;\n  /**\n   * ID(s) of element(s) that label the group (highest precedence over ariaLabel).\n   */\n  ariaLabelledBy?: string;\n  /**\n   * ID(s) of element(s) providing additional description for the phone number input.\n   */\n  ariaDescribedBy?: string;\n  /**\n   * Override aria-label for the phone number input specifically.\n   * Defaults to the visible label text or 'Phone number'.\n   */\n  phoneNumberAriaLabel?: string;\n  /**\n   * Override aria-label for the country code combobox button.\n   * Defaults to \"Select country code. Current: {name} {dial_code}\".\n   */\n  countryCodeAriaLabel?: string;\n  /**\n   * Whether the input is disabled\n   */\n  disabled?: boolean;\n}\n\nexport const PhoneInput: React.FC<PhoneInputProps> = ({\n  onCountrycodeChange,\n  onNumberChange,\n  error,\n  errorMessage,\n  value,\n  label,\n  automationId = '',\n  ariaLabel,\n  ariaLabelledBy,\n  ariaDescribedBy,\n  phoneNumberAriaLabel,\n  countryCodeAriaLabel,\n  disabled = false\n}) => {\n  const [countryCode, setCountryCode] = useState(value?.countryCode || countriesInfoJson[0].dial_code);\n  const [displaySelectCountryCode, setDisplaySelectCountryCode] = useState(false);\n  const [countriesInfo, setCountriesInfo] = useState(countriesInfoJson);\n  const [searchValue, setSearchValue] = useState('');\n  const [enteredNumber, setEnteredNumber] = useState('');\n  const containerRef = useRef<HTMLDivElement>(null);\n  const countryButtonRef = useRef<HTMLButtonElement>(null);\n  const searchInputRef = useRef<HTMLInputElement>(null);\n  const restoreFocusToButtonRef = useRef(false);\n\n  // Generate stable IDs for ARIA relationships\n  const labelId = useStableId(automationId, 'phone-label');\n  const listboxId = useStableId(automationId, 'phone-listbox');\n  const phoneInputId = useStableId(automationId, 'phone-input');\n  const errorId = useStableId(automationId, 'phone-error');\n\n  const countryInfo = countriesInfoJson.find((country) => country.dial_code === countryCode);\n\n  // Close dropdown and reset state\n  const closeDropdown = useCallback(() => {\n    setDisplaySelectCountryCode(false);\n    setSearchValue('');\n    setCountriesInfo(countriesInfoJson);\n  }, []);\n\n  const handleCountryCodeSelect = useCallback(\n    (country: string) => {\n      if (country) {\n        setCountryCode(country);\n        onCountrycodeChange(country);\n      }\n      closeDropdown();\n      // Focus return is handled by useEffect that watches displaySelectCountryCode\n    },\n    [onCountrycodeChange, closeDropdown]\n  );\n\n  const handleSelectFromDropdown = useCallback(\n    (country: typeof countriesInfoJson[0]) => {\n      restoreFocusToButtonRef.current = true;\n      handleCountryCodeSelect(country.dial_code);\n    },\n    [handleCountryCodeSelect]\n  );\n\n  // Use comprehensive useCombobox hook for country search\n  const {\n    containerProps,\n    inputProps: comboboxInputProps,\n    listboxProps,\n    getOptionProps,\n    highlightedIndex,\n    setHighlightedIndex\n  } = useCombobox({\n    items: countriesInfo,\n    isOpen: displaySelectCountryCode,\n    onOpenChange: setDisplaySelectCountryCode,\n    onSelect: handleSelectFromDropdown,\n    listboxId\n  });\n\n  const handleCountryCodeSearch = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const searchVal = event.target.value;\n    setSearchValue(searchVal);\n    setHighlightedIndex(-1);\n    const filteredCountries = countriesInfoJson.filter(\n      (country) =>\n        country.name.toLowerCase().includes(searchVal.toLowerCase()) ||\n        country.dial_code.toLowerCase().includes(searchVal.toLowerCase()) ||\n        country.code.toLowerCase().includes(searchVal.toLowerCase())\n    );\n    setCountriesInfo(filteredCountries);\n  };\n\n  // Return focus to button when dropdown closes\n  const prevDisplaySelectCountryCodeRef = useRef(displaySelectCountryCode);\n  useEffect(() => {\n    let rafId: number | null = null;\n    // If dropdown was open and is now closed, return focus to button\n    // ONLY when the close was triggered from within the component (Escape/selection),\n    // not when the user moved focus outside (focus-out dismissal).\n    if (prevDisplaySelectCountryCodeRef.current && !displaySelectCountryCode && restoreFocusToButtonRef.current) {\n      rafId = requestAnimationFrame(() => {\n        countryButtonRef.current?.focus();\n      });\n    }\n    if (prevDisplaySelectCountryCodeRef.current && !displaySelectCountryCode) {\n      restoreFocusToButtonRef.current = false;\n    }\n    prevDisplaySelectCountryCodeRef.current = displaySelectCountryCode;\n    return () => {\n      if (rafId !== null) {\n        cancelAnimationFrame(rafId);\n      }\n    };\n  }, [displaySelectCountryCode]);\n\n  useEffect(() => {\n    if (value) {\n      setCountryCode(value.countryCode);\n      setEnteredNumber(value.number);\n    }\n  }, [value]);\n\n  // Focus search input when dropdown opens\n  useEffect(() => {\n    let rafId: number | null = null;\n    if (displaySelectCountryCode) {\n      rafId = requestAnimationFrame(() => {\n        searchInputRef.current?.focus();\n      });\n    }\n    return () => {\n      if (rafId !== null) {\n        cancelAnimationFrame(rafId);\n      }\n    };\n  }, [displaySelectCountryCode]);\n\n  const handleEnteredNumberChange = (val: string) => {\n    const numericValue = val.replace(/\\D/g, ''); // Remove non-numeric characters\n    setEnteredNumber(numericValue);\n    onNumberChange(numericValue);\n  };\n\n  const toggleDropdown = useCallback(() => {\n    if (disabled) return;\n    setDisplaySelectCountryCode((prev) => !prev);\n  }, [disabled]);\n\n  const handleCountryButtonKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (disabled) return;\n\n      switch (e.key) {\n        case 'Enter':\n        case ' ':\n          e.preventDefault();\n          toggleDropdown();\n          break;\n        case 'ArrowDown':\n          e.preventDefault();\n          if (!displaySelectCountryCode) {\n            setDisplaySelectCountryCode(true);\n          }\n          break;\n        // Escape is handled by useDismissOnEscape hook\n      }\n    },\n    [disabled, displaySelectCountryCode, toggleDropdown]\n  );\n\n  // Group label (role=\"group\"): combines the visible label with any external ariaLabelledBy\n  // (handled inside getA11yNameAttributes); ariaLabel overrides the visible label; falls back to 'Phone number'.\n  const groupA11yProps = getA11yNameAttributes({\n    ariaLabelledBy,\n    internalLabelId: label ? labelId : undefined,\n    ariaLabel: ariaLabel || (!label ? 'Phone number' : undefined)\n  });\n\n  // Phone number input: caller override > visible label > fallback 'Phone number'\n  const phoneInputA11yProps = getA11yNameAttributes({\n    ariaLabelledBy: !phoneNumberAriaLabel && label ? labelId : undefined,\n    ariaLabel: phoneNumberAriaLabel || (!label ? 'Phone number' : undefined),\n    ariaDescribedBy: error ? errorId : ariaDescribedBy\n  });\n\n  // Country code button label: caller override > default dynamic label\n  const computedCountryCodeAriaLabel = countryCodeAriaLabel ||\n    `Select country code. Current: ${countryInfo?.name} ${countryInfo?.dial_code}`;\n\n  return (\n    <div \n      className=\"phone-input-container-se-design-main-container\" \n      data-automation-id={automationId}\n      {...containerProps}\n      onKeyDownCapture={(e) => {\n        if (e.key === 'Escape' && displaySelectCountryCode) {\n          restoreFocusToButtonRef.current = true;\n        }\n        containerProps.onKeyDownCapture(e);\n      }}\n    >\n      {label && (\n        <div id={labelId} className=\"label-container\">\n          {label}\n        </div>\n      )}\n      <div\n        role=\"group\"\n        {...groupA11yProps}\n        className={`phone-input-container-se-design-main ${error ? 'error' : ''}`}\n        ref={containerRef}\n      >\n        <div className=\"phone-input-container-se-design\">\n          <button\n            ref={countryButtonRef}\n            type=\"button\"\n            className={`phone-input-container-se-design-country-code focus-outline rounded ${disabled ? 'cursor-not-allowed opacity-60' : ''}`}\n            onClick={toggleDropdown}\n            onKeyDown={handleCountryButtonKeyDown}\n            aria-haspopup=\"listbox\"\n            aria-expanded={displaySelectCountryCode}\n            aria-controls={displaySelectCountryCode ? listboxId : undefined}\n            aria-label={computedCountryCodeAriaLabel}\n            disabled={disabled}\n            data-automation-id=\"country-code-selector\"\n          >\n            <img\n              src={`https://flagcdn.com/${countryInfo?.code.toLowerCase()}.svg`}\n              alt=\"\"\n              aria-hidden=\"true\"\n              width=\"16\"\n            />\n            <span>{countryInfo?.dial_code}</span>\n            <Icon\n              name=\"chevron\"\n              className={!displaySelectCountryCode ? '' : 'rotate-180'}\n              aria-hidden=\"true\"\n            />\n          </button>\n          <span className=\"divider\" aria-hidden=\"true\" />\n          <input\n            id={phoneInputId}\n            type=\"tel\"\n            placeholder=\"Enter phone number\"\n            className={`phone-input-container-se-design-phone-number-input ${disabled ? 'disabled' : ''}`}\n            onChange={(event) => handleEnteredNumberChange(event.target.value)}\n            value={enteredNumber}\n            pattern=\"[0-9]*\"\n            disabled={disabled}\n            aria-invalid={error || undefined}\n            {...phoneInputA11yProps}\n            data-automation-id=\"phone-number-input-field\"\n          />\n        </div>\n\n        {displaySelectCountryCode && (\n          <div\n            {...listboxProps}\n            className=\"phone-input-container-se-design-country-code-list\"\n            aria-label=\"Select country\"\n            data-automation-id=\"country-code-list\"\n          >\n            <div className=\"search-input-wrapper\">\n              <Icon name=\"search\" className=\"search-icon\" aria-hidden=\"true\" />\n              <input\n                ref={searchInputRef}\n                {...comboboxInputProps}\n                type=\"text\"\n                placeholder=\"Search countries\"\n                className=\"phone-input-container-se-design-country-code-list-item-input\"\n                onChange={handleCountryCodeSearch}\n                value={searchValue}\n                aria-label=\"Search countries\"\n                data-automation-id=\"country-code-search-input\"\n              />\n            </div>\n            {countriesInfo.length > 0 ? (\n              countriesInfo.map((country, index) => {\n                const optionProps = getOptionProps(index, country.dial_code === countryCode);\n                return (\n                  <div\n                    key={country.code}\n                    {...optionProps}\n                    className={`phone-input-container-se-design-country-code-list-item ${\n                      highlightedIndex === index ? 'highlighted' : ''\n                    } ${country.dial_code === countryCode ? 'selected' : ''}`}\n                    onClick={() => {\n                      restoreFocusToButtonRef.current = true;\n                      handleCountryCodeSelect(country.dial_code);\n                    }}\n                    onMouseEnter={() => setHighlightedIndex(index)}\n                  >\n                    <img\n                      src={`https://flagcdn.com/${country.code.toLowerCase()}.svg`}\n                      alt=\"\"\n                      aria-hidden=\"true\"\n                      width=\"16\"\n                    />\n                    <span>{country.name}</span>\n                    <span>({country.dial_code})</span>\n                  </div>\n                );\n              })\n            ) : (\n              <div className=\"phone-input-container-se-design-country-code-list-item-no-results\" role=\"status\">\n                No results found\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n      {error && (\n        <div id={errorId} className=\"error-message\" role=\"alert\">\n          {errorMessage}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["PhoneInput","onCountrycodeChange","onNumberChange","error","errorMessage","value","label","automationId","ariaLabel","ariaLabelledBy","ariaDescribedBy","phoneNumberAriaLabel","countryCodeAriaLabel","disabled","countryCode","setCountryCode","useState","countriesInfoJson","dial_code","displaySelectCountryCode","setDisplaySelectCountryCode","countriesInfo","setCountriesInfo","searchValue","setSearchValue","enteredNumber","setEnteredNumber","containerRef","useRef","countryButtonRef","searchInputRef","restoreFocusToButtonRef","labelId","useStableId","listboxId","phoneInputId","errorId","countryInfo","find","country","closeDropdown","useCallback","handleCountryCodeSelect","handleSelectFromDropdown","current","containerProps","inputProps","comboboxInputProps","listboxProps","getOptionProps","highlightedIndex","setHighlightedIndex","useCombobox","items","isOpen","onOpenChange","onSelect","handleCountryCodeSearch","event","searchVal","target","filteredCountries","filter","name","toLowerCase","includes","code","prevDisplaySelectCountryCodeRef","useEffect","rafId","requestAnimationFrame","focus","cancelAnimationFrame","number","handleEnteredNumberChange","val","numericValue","replace","toggleDropdown","prev","handleCountryButtonKeyDown","e","key","preventDefault","groupA11yProps","getA11yNameAttributes","internalLabelId","undefined","phoneInputA11yProps","computedCountryCodeAriaLabel","React","createElement","_extends","className","onKeyDownCapture","id","role","ref","type","onClick","onKeyDown","src","alt","width","Icon","placeholder","onChange","pattern","length","map","index","optionProps","onMouseEnter"],"mappings":"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"}

package/dist/index52.js

@@ -1,464 +1,41 @@
-import r, { useState as S } from "react";
-import { Button as z } from "./index4.js";
-import { Icon as _ } from "./index6.js";
-import { Dropdown as te } from "./index26.js";
-import { useDatePickerA11y as Fe, formatDateId as Pe, getCellAriaLabel as Ce } from "./index246.js";
-/* empty css         */
-function T() {
-  return T = Object.assign ? Object.assign.bind() : function(p) {
-    for (var m = 1; m < arguments.length; m++) {
-      var v = arguments[m];
-      for (var w in v) ({}).hasOwnProperty.call(v, w) && (p[w] = v[w]);
-    }
-    return p;
-  }, T.apply(null, arguments);
-}
-const Oe = ["S", "M", "T", "W", "T", "F", "S"], Se = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], Te = ["Today", "Yesterday", "This Week", "Last Week", "This Month", "Last Month"], q = [{
-  value: "january",
-  label: "January"
-}, {
-  value: "february",
-  label: "February"
-}, {
-  value: "march",
-  label: "March"
-}, {
-  value: "april",
-  label: "April"
-}, {
-  value: "may",
-  label: "May"
-}, {
-  value: "june",
-  label: "June"
-}, {
-  value: "july",
-  label: "July"
-}, {
-  value: "august",
-  label: "August"
-}, {
-  value: "september",
-  label: "September"
-}, {
-  value: "october",
-  label: "October"
-}, {
-  value: "november",
-  label: "November"
-}, {
-  value: "december",
-  label: "December"
-}], Re = (p, m) => new Date(p, m + 1, 0).getDate(), je = (p, m) => new Date(p, m, 1).getDay(), ze = ({
-  title: p = "Select modified date",
-  // isOpen = true,
-  showHeader: m = !0,
-  initialStartDate: v,
-  initialEndDate: w,
-  onApply: R = () => {
-  },
-  onClose: j,
-  shouldAllowFutureDateSelection: F = !1,
-  maxDays: g,
-  disablePastDates: A = !1,
-  singleDateSelection: P = !1,
-  minYearOption: ae,
-  showQuickActions: ne = !1,
-  showSingleMonth: h = !1,
-  className: re = "",
-  automationId: y = "datepicker",
-  labels: J = {
-    clear: "Clear",
-    apply: "Apply"
-  }
+import o from "react";
+const m = ({
+  progress: a,
+  backgroundColor: n = "#E8E8E8",
+  progressColor: s = "#0066FF",
+  size: e = 40,
+  strokeWidth: r = 4
 }) => {
-  const oe = () => {
-    if (v && w)
-      return {
-        startDate: v,
-        endDate: w
-      };
-    const t = /* @__PURE__ */ new Date();
-    t.setHours(23, 59, 59, 999);
-    const e = /* @__PURE__ */ new Date();
-    return e.setHours(0, 0, 0, 0), {
-      startDate: e,
-      endDate: t
-    };
-  }, se = () => {
-    const t = /* @__PURE__ */ new Date(), e = /* @__PURE__ */ new Date();
-    return t.setDate(1), e.setDate(1), h || e.setMonth(e.getMonth() - 1), t.setHours(0, 0, 0, 0), e.setHours(0, 0, 0, 0), [e, t];
-  }, [l, M] = S(oe), [Q] = S(se), [x, W] = S(() => Q[0]), [C, G] = S(() => Q[1]), V = (t, e) => t.getTime() > e.getTime() ? [e, t] : [t, e], N = (t, e) => {
-    if (h) {
-      W(t);
-      return;
-    }
-    if (e) {
-      const [a, n] = V(t, C);
-      W(a), n !== C && G(n);
-    } else {
-      const [a, n] = V(x, t);
-      a !== x && W(a), G(n);
-    }
-  }, {
-    getGridCellProps: le,
-    getLeftContainerProps: ce,
-    getRightContainerProps: ie
-  } = Fe({
-    leftMonth: x,
-    rightMonth: C,
-    showSingleMonth: h,
-    selectedRange: l,
-    onMonthChange: N
-  }), ue = (t, e) => {
-    const a = Re(t, e), n = je(t, e), d = [];
-    for (let c = 0; c < n; c++)
-      d.push(null);
-    for (let c = 1; c <= a; c++) {
-      const u = new Date(t, e, c);
-      u.setHours(0, 0, 0, 0), d.push(u);
-    }
-    return d;
-  }, O = (t, e) => t.getDate() === e.getDate() && t.getMonth() === e.getMonth() && t.getFullYear() === e.getFullYear(), de = (t) => {
-    if (!l.startDate || !l.endDate) return !1;
-    const e = new Date(t);
-    e.setHours(12, 0, 0, 0);
-    const a = new Date(l.startDate);
-    a.setHours(0, 0, 0, 0);
-    const n = new Date(l.endDate);
-    return n.setHours(23, 59, 59, 999), e >= a && e <= n;
-  }, ge = (t) => {
-    const e = /* @__PURE__ */ new Date();
-    return t.getDate() === e.getDate() && t.getMonth() === e.getMonth() && t.getFullYear() === e.getFullYear();
-  }, I = (t) => {
-    if (!t) return !0;
-    const e = /* @__PURE__ */ new Date();
-    e.setHours(0, 0, 0, 0);
-    const a = new Date(t);
-    if (a.setHours(0, 0, 0, 0), A && a < e)
-      return !0;
-    if (g != null) {
-      const n = new Date(e);
-      return n.setDate(n.getDate() + g), n.setHours(0, 0, 0, 0), a > n;
-    }
-    return F ? !1 : a > e;
-  }, De = (t) => {
-    if (I(t)) return;
-    const e = new Date(t);
-    if (e.setHours(12, 0, 0, 0), P) {
-      M({
-        startDate: e,
-        endDate: e
-      }), R({
-        startDate: e,
-        endDate: e
-      }), j?.();
-      return;
-    }
-    if (!l.startDate || l.endDate)
-      M({
-        startDate: e,
-        endDate: null
-      });
-    else {
-      const a = new Date(l.startDate);
-      a.setHours(12, 0, 0, 0);
-      const n = e > a ? e : a, d = e > a ? a : e;
-      M({
-        startDate: d,
-        endDate: n
-      });
-    }
-  }, K = (t, e) => {
-    const a = new Date(t);
-    return a.setMonth(a.getMonth() + (e ? 1 : -1)), a;
-  }, me = (t) => l?.startDate ? O(t, l.startDate) : !1, fe = (t) => l?.endDate ? O(t, l?.endDate) : !1, pe = (t) => !l.startDate || !l.endDate ? !1 : O(l.startDate, l.endDate) && O(t, l.startDate), he = (t, e) => {
-    const a = ae || t - 10;
-    let n = F ? t + 10 : t;
-    if (g) {
-      const c = /* @__PURE__ */ new Date(), u = new Date(c);
-      u.setDate(u.getDate() + g);
-      const b = u.getFullYear();
-      n = Math.min(n, b);
-    }
-    n = Math.max(n, e);
-    const d = n - a + 1;
-    return Array.from({
-      length: d
-    }, (c, u) => ({
-      value: a + u,
-      label: (a + u).toString()
-    })).filter((c) => {
-      if (c.value === e)
-        return !0;
-      if (!F && c.value > t)
-        return !1;
-      if (g) {
-        const u = /* @__PURE__ */ new Date(), b = new Date(u);
-        return b.setDate(b.getDate() + g), c.value <= b.getFullYear();
-      }
-      return !0;
-    });
-  }, be = () => {
-    const t = /* @__PURE__ */ new Date(), e = /* @__PURE__ */ new Date();
-    e.setHours(0, 0, 0, 0), t.setHours(23, 59, 59, 999), M({
-      startDate: e,
-      endDate: t
-    });
-  }, k = (t) => {
-    const e = new Date(t);
-    return e.setHours(0, 0, 0, 0), e;
-  }, E = (t) => {
-    const e = new Date(t);
-    return e.setHours(23, 59, 59, 999), e;
-  }, ve = (t) => {
-    const e = /* @__PURE__ */ new Date();
-    let a = /* @__PURE__ */ new Date(), n = /* @__PURE__ */ new Date();
-    switch (t) {
-      case "Today":
-        a = k(e), n = E(e);
-        break;
-      case "Yesterday":
-        a = k(new Date(e.setDate(e.getDate() - 1))), n = E(new Date(e));
-        break;
-      case "This Week":
-        const d = new Date(e.setDate(e.getDate() - e.getDay()));
-        a = k(d), n = E(/* @__PURE__ */ new Date());
-        break;
-      case "Last Week":
-        const c = new Date(e.setDate(e.getDate() - e.getDay() - 7)), u = new Date(e.setDate(c.getDate() + 6));
-        a = k(c), n = E(u);
-        break;
-      case "This Month":
-        a = k(new Date(e.getFullYear(), e.getMonth(), 1)), n = E(/* @__PURE__ */ new Date());
-        break;
-      case "Last Month":
-        a = k(new Date(e.getFullYear(), e.getMonth() - 1, 1)), n = E(new Date(e.getFullYear(), e.getMonth(), 0));
-        break;
-    }
-    M({
-      startDate: a,
-      endDate: n
-    });
-  }, we = () => /* @__PURE__ */ r.createElement("div", {
-    className: "w-[147px] p-4 border-r border-[var(--color-gray-200)]"
-  }, /* @__PURE__ */ r.createElement("div", {
-    role: "group",
-    "aria-label": "Quick date selections",
-    className: "flex flex-col gap-3"
-  }, Te.map((t) => /* @__PURE__ */ r.createElement(z, {
-    key: t,
-    label: t,
-    type: "link",
-    onClick: () => ve(t)
-  })))), ye = () => {
-    const {
-      startDate: t = null,
-      endDate: e = null
-    } = l;
-    if (t && e) {
-      R({
-        startDate: t,
-        endDate: e
-      });
-      return;
-    }
-    if (t || e) {
-      const a = t || e;
-      R({
-        startDate: a,
-        endDate: a
-      });
-    }
-  }, U = (t, e) => {
-    const a = t.getFullYear(), n = t.getMonth(), d = ue(a, n), c = (/* @__PURE__ */ new Date()).getFullYear(), u = he(c, a), b = new Date(a, n, 1).toLocaleString("en-US", {
-      month: "long",
-      year: "numeric"
-    }), ke = e ? ce : ie, X = `calendar-instructions-${e ? "left" : "right"}`, Ee = P ? "Press Enter or Space to select a date. Use arrow keys to navigate days, Page Up and Page Down to change months." : "Press Enter or Space to select a start date, then again to select an end date. Use arrow keys to navigate days, Page Up and Page Down to change months.", Me = le({
-      isLeftCalendar: e,
-      isDateDisabled: I,
-      handleDateClick: De
-    }), Z = [];
-    for (let o = 0; o < d.length; o += 7) {
-      const s = d.slice(o, o + 7);
-      for (; s.length < 7; ) s.push(null);
-      Z.push(s);
-    }
-    const $ = /* @__PURE__ */ new Date(), xe = A && t.getMonth() === $.getMonth() && t.getFullYear() === $.getFullYear(), Ne = !F && n === $.getMonth() && a === $.getFullYear() || g !== void 0 && (() => {
-      const o = new Date($);
-      return o.setDate(o.getDate() + g), t.getMonth() === o.getMonth() && t.getFullYear() === o.getFullYear();
-    })();
-    return /* @__PURE__ */ r.createElement("div", {
-      className: "se-design-calendar-container w-fit p-4"
-    }, /* @__PURE__ */ r.createElement("div", {
-      className: "flex justify-between items-center"
-    }, /* @__PURE__ */ r.createElement(_, {
-      name: "chevron",
-      rotation: "90",
-      size: 16,
-      disabled: xe,
-      onClick: () => {
-        const o = K(t, !1);
-        if (A) {
-          const s = /* @__PURE__ */ new Date();
-          if (s.setHours(0, 0, 0, 0), o < s && o.getMonth() !== s.getMonth())
-            return;
-        }
-        N(o, e);
-      },
-      automationId: `${y}-previous-month`,
-      ariaLabel: h ? "Previous month" : e ? "Previous month of starting date" : "Previous month of end date"
-    }), /* @__PURE__ */ r.createElement("div", {
-      className: "flex gap-2",
-      onClick: (o) => o.stopPropagation()
-    }, /* @__PURE__ */ r.createElement(te, {
-      type: "select",
-      dropDownOptions: q,
-      defaultSelectedValue: q[n],
-      selectBy: "label",
-      optionsUniqueBy: "value",
-      displaySelected: !0,
-      label: h ? "Month" : e ? "Start month" : "End month",
-      firstOptionAsHeading: !0,
-      onOptionClick: (o) => {
-        const s = new Date(t);
-        s.setMonth(q.findIndex((i) => i.value === o.value)), N(s, e);
-      },
-      className: "w-[124px] dropdown-option-container"
-    }), /* @__PURE__ */ r.createElement(te, {
-      type: "select",
-      dropDownOptions: u,
-      defaultSelectedValue: u.find((o) => o.value === a),
-      selectBy: "label",
-      optionsUniqueBy: "value",
-      displaySelected: !0,
-      label: h ? "Year" : e ? "Start year" : "End year",
-      firstOptionAsHeading: !0,
-      onOptionClick: (o) => {
-        const s = new Date(t);
-        s.setFullYear(o.value), N(s, e);
-      },
-      className: "w-[104px] dropdown-option-container"
-    })), /* @__PURE__ */ r.createElement(_, {
-      name: "chevron",
-      rotation: "270",
-      size: 16,
-      disabled: Ne,
-      onClick: () => {
-        const o = K(t, !0);
-        if (g !== void 0) {
-          const s = /* @__PURE__ */ new Date(), i = new Date(s);
-          if (i.setDate(i.getDate() + g), o > i)
-            return;
-        }
-        N(o, e);
-      },
-      automationId: `${y}-next-month`,
-      ariaLabel: h ? "Next month" : e ? "Next month of starting date" : "Next month of end date"
-    })), /* @__PURE__ */ r.createElement("span", {
-      id: X,
-      className: "sr-only"
-    }, Ee), /* @__PURE__ */ r.createElement("div", T({}, ke({
-      ariaLabel: b,
-      ariaDescribedBy: X
-    }), {
-      className: "mt-3"
-    }), /* @__PURE__ */ r.createElement("div", {
-      role: "row",
-      className: "grid grid-cols-7 gap-2"
-    }, Oe.map((o, s) => /* @__PURE__ */ r.createElement("abbr", {
-      key: `${o}-${s}`,
-      role: "columnheader",
-      title: Se[s],
-      className: "datepicker-weekdays"
-    }, o))), Z.map((o, s) => /* @__PURE__ */ r.createElement("div", {
-      key: s,
-      role: "row",
-      className: "grid grid-cols-7 gap-2"
-    }, o.map((i, $e) => {
-      if (!i)
-        return /* @__PURE__ */ r.createElement("div", {
-          key: `empty-${s}-${$e}`,
-          role: "gridcell",
-          "aria-hidden": "true",
-          className: "h-10 w-10"
-        });
-      const ee = Pe(i), D = me(i), f = fe(i), H = pe(i), B = !D && !f && de(i), L = ge(i), Y = I(i), {
-        ref: He,
-        ...Ye
-      } = Me({
-        cellId: ee,
-        cellDate: i,
-        disabled: Y,
-        ariaLabel: Ce(i, D, f, H, P, B),
-        ariaCurrent: L ? "date" : void 0,
-        ariaDisabled: Y || void 0
-      });
-      return /* @__PURE__ */ r.createElement("div", {
-        key: ee,
-        role: "gridcell",
-        "aria-selected": D || f || void 0,
-        className: "relative h-10 w-10"
-      }, /* @__PURE__ */ r.createElement("button", T({
-        type: "button"
-      }, Ye, {
-        ref: He,
-        className: `
-                        datepicker-cell-button
-                        h-full w-full flex items-center justify-center
-                        rounded-md focus-outline transition-colors
-                        ${Y ? "cursor-not-allowed text-[var(--color-gray-600)] hover:bg-transparent" : "cursor-pointer"}
-                        ${H ? "bg-[var(--color-blue-500)] text-[var(--color-white)] hover:bg-[var(--color-blue-600)]" : ""}
-                        ${!H && D ? "bg-[var(--color-blue-500)] text-[var(--color-white)] hover:bg-[var(--color-blue-600)]" : ""}
-                        ${!H && f ? "bg-[var(--color-blue-500)] text-[var(--color-white)] hover:bg-[var(--color-blue-600)]" : ""}
-                        ${!D && !f && B ? "bg-[var(--color-blue-100)] text-[var(--color-blue-600)] outline outline-1 outline-[var(--color-blue-500)]" : ""}
-                        ${!D && !f && !B && !Y ? "hover:bg-[var(--color-blue-100)] hover:outline hover:outline-1 hover:outline-[var(--color-blue-500)]" : ""}
-                        ${L && !D && !f ? "text-[var(--color-blue-500)] bg-[var(--color-blue-100)] outline outline-1 outline-[var(--color-blue-500)]" : ""}
-                        ${!Y && !D && !f && !L ? "text-[var(--color-blue-500)]" : ""}
-                      `,
-        "data-automation-id": `${y}-date-${i.getDate()}`
-      }), i.getDate()), !H && (D || f) && /* @__PURE__ */ r.createElement("div", {
-        "aria-hidden": "true",
-        className: `absolute top-0 bottom-0 ${D ? "right-[-8px]" : "left-[-8px]"} w-[8px]
-                        bg-[var(--color-blue-100)] -z-10`
-      }));
-    })))));
-  };
-  return /* @__PURE__ */ r.createElement("div", {
-    className: `se-design-datepicker-container flex flex-col bg-[var(--color-white)] rounded-md shadow-md w-max max-w-full ${re}`
-  }, m && /* @__PURE__ */ r.createElement("div", {
-    className: "se-design-datepicker-header flex justify-between items-center border-b border-[var(--color-gray-200)] p-4"
-  }, /* @__PURE__ */ r.createElement("h2", {
-    className: "datepicker-title"
-  }, p), j && /* @__PURE__ */ r.createElement(_, {
-    name: "close",
-    size: 16,
-    onClick: j,
-    className: "cursor-pointer",
-    automationId: `${y}-close`,
-    ariaLabel: "Close date picker"
-  })), /* @__PURE__ */ r.createElement("div", {
-    className: "se-design-datepicker-content flex"
-  }, ne && we(), /* @__PURE__ */ r.createElement("div", {
-    className: "flex"
-  }, h ? U(x, !0) : /* @__PURE__ */ r.createElement(r.Fragment, null, U(x, !0), /* @__PURE__ */ r.createElement("div", {
-    className: "h-full w-[1px] border-r border-[var(--color-gray-200)]",
-    "aria-hidden": "true"
-  }), U(C, !1)))), !P && /* @__PURE__ */ r.createElement("div", {
-    className: "se-design-datepicker-footer flex justify-end items-center gap-5 p-4 border-t border-[var(--color-gray-200)]"
-  }, /* @__PURE__ */ r.createElement(z, {
-    label: J?.clear || "Clear",
-    type: "ghost",
-    onClick: be,
-    "data-automation-id": `${y}-clear-button`
-  }), /* @__PURE__ */ r.createElement(z, {
-    label: J?.apply || "Apply",
-    type: "primary",
-    onClick: ye,
-    "data-automation-id": `${y}-apply-button`
-  })));
+  const t = (e - r) / 2, c = t * 2 * Math.PI, l = c - a / 100 * c;
+  return /* @__PURE__ */ o.createElement("svg", {
+    width: e,
+    height: e,
+    style: {
+      transform: "rotate(-90deg)"
+    }
+  }, /* @__PURE__ */ o.createElement("circle", {
+    cx: e / 2,
+    cy: e / 2,
+    r: t,
+    stroke: n,
+    strokeWidth: r,
+    fill: "none"
+  }), /* @__PURE__ */ o.createElement("circle", {
+    cx: e / 2,
+    cy: e / 2,
+    r: t,
+    stroke: s,
+    strokeWidth: r,
+    strokeDasharray: c,
+    strokeDashoffset: l,
+    fill: "none",
+    strokeLinecap: "round",
+    style: {
+      transition: "stroke-dashoffset 0.3s ease"
+    }
+  }));
 };
 export {
-  ze as DatePicker
+  m as CircularProgressBar
 };
 //# sourceMappingURL=index52.js.map