@charcoal-ui/react 6.0.0-rc.1 → 6.0.0-rc.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (50) hide show
  1. package/dist/components/Carousel/CarouselItem.d.ts +10 -0
  2. package/dist/components/Carousel/CarouselItem.d.ts.map +1 -0
  3. package/dist/components/Carousel/carouselStore.d.ts +25 -0
  4. package/dist/components/Carousel/carouselStore.d.ts.map +1 -0
  5. package/dist/components/Carousel/index.d.ts +61 -0
  6. package/dist/components/Carousel/index.d.ts.map +1 -0
  7. package/dist/components/Carousel/intersectionObserver.d.ts +7 -0
  8. package/dist/components/Carousel/intersectionObserver.d.ts.map +1 -0
  9. package/dist/components/Carousel/resizeObserver.d.ts +6 -0
  10. package/dist/components/Carousel/resizeObserver.d.ts.map +1 -0
  11. package/dist/components/Carousel/store.d.ts +7 -0
  12. package/dist/components/Carousel/store.d.ts.map +1 -0
  13. package/dist/components/Carousel/useCarouselScroller.d.ts +18 -0
  14. package/dist/components/Carousel/useCarouselScroller.d.ts.map +1 -0
  15. package/dist/components/Icon/index.d.ts +1 -1
  16. package/dist/components/Icon/index.d.ts.map +1 -1
  17. package/dist/index.cjs +2 -2
  18. package/dist/index.cjs.map +1 -1
  19. package/dist/index.css +319 -1
  20. package/dist/index.d.ts +1 -0
  21. package/dist/index.d.ts.map +1 -1
  22. package/dist/index.js +2 -2
  23. package/dist/index.js.map +1 -1
  24. package/dist/layered.css +319 -1
  25. package/dist/layered.css.map +1 -1
  26. package/package.json +5 -5
  27. package/src/__tests__/fixtures/legacy-v1-index.css +1836 -0
  28. package/src/__tests__/token-v1-compat.test.ts +118 -0
  29. package/src/__tests__/token-v1-remap.test.ts +133 -0
  30. package/src/components/Carousel/CarouselItem.tsx +56 -0
  31. package/src/components/Carousel/MIGRATION.md +117 -0
  32. package/src/components/Carousel/Migration.mdx +8 -0
  33. package/src/components/Carousel/__snapshots__/index.css.snap +274 -0
  34. package/src/components/Carousel/carouselStore.test.ts +38 -0
  35. package/src/components/Carousel/carouselStore.ts +48 -0
  36. package/src/components/Carousel/index.css +274 -0
  37. package/src/components/Carousel/index.story.tsx +169 -0
  38. package/src/components/Carousel/index.test.tsx +666 -0
  39. package/src/components/Carousel/index.tsx +278 -0
  40. package/src/components/Carousel/intersectionObserver.test.ts +68 -0
  41. package/src/components/Carousel/intersectionObserver.ts +58 -0
  42. package/src/components/Carousel/resizeObserver.test.ts +60 -0
  43. package/src/components/Carousel/resizeObserver.ts +35 -0
  44. package/src/components/Carousel/store.test.ts +25 -0
  45. package/src/components/Carousel/store.ts +27 -0
  46. package/src/components/Carousel/useCarouselScroller.ts +158 -0
  47. package/src/components/Icon/index.tsx +2 -1
  48. package/src/components/Modal/__snapshots__/index.css.snap +1 -1
  49. package/src/components/Modal/index.css +1 -1
  50. package/src/index.ts +12 -0
package/dist/index.css CHANGED
@@ -421,6 +421,49 @@
421
421
  grid-template-columns: 1fr;
422
422
  grid-gap: 8px;
423
423
  }
424
+ .charcoal-icon {
425
+ display: inline-flex;
426
+ width: var(--charcoal-icon-size);
427
+ height: var(--charcoal-icon-size);
428
+ }
429
+
430
+ pixiv-icon:not(:defined) {
431
+ --pixiv-icon-base: 24px;
432
+ --pixiv-icon-scale: 1;
433
+ --pixiv-icon-size: calc(var(--pixiv-icon-base) * var(--pixiv-icon-scale));
434
+
435
+ display: inline-flex;
436
+ /* --charcoal-icon-size がセットされていればそれを優先、
437
+ なければ name / scale から導出した --pixiv-icon-size をフォールバック */
438
+ width: var(--charcoal-icon-size, var(--pixiv-icon-size));
439
+ height: var(--charcoal-icon-size, var(--pixiv-icon-size));
440
+ }
441
+
442
+ pixiv-icon:not(:defined)[name^='16/'] {
443
+ --pixiv-icon-base: 16px;
444
+ --pixiv-icon-size: 16px;
445
+ }
446
+
447
+ pixiv-icon:not(:defined)[name^='24/'][scale='2'] {
448
+ --pixiv-icon-scale: 2;
449
+ }
450
+
451
+ pixiv-icon:not(:defined)[name^='24/'][scale='3'] {
452
+ --pixiv-icon-scale: 3;
453
+ }
454
+
455
+ pixiv-icon:not(:defined)[name^='32/'] {
456
+ --pixiv-icon-base: 32px;
457
+ --pixiv-icon-size: 32px;
458
+ }
459
+
460
+ pixiv-icon:not(:defined)[name^='Inline/'] {
461
+ --pixiv-icon-base: 16px;
462
+ }
463
+
464
+ pixiv-icon:not(:defined)[name^='Inline/'][scale='2'] {
465
+ --pixiv-icon-scale: 2;
466
+ }
424
467
  .charcoal-multi-select {
425
468
  display: grid;
426
469
  grid-template-columns: auto 1fr;
@@ -956,7 +999,7 @@
956
999
  padding: 40px 0;
957
1000
  box-sizing: border-box;
958
1001
 
959
- background-color: var(--charcoal-color-container-neutral-default);
1002
+ background-color: var(--charcoal-color-background-overlay);
960
1003
  }
961
1004
 
962
1005
  @media (max-width: 743px) {
@@ -1781,6 +1824,281 @@
1781
1824
  .charcoal-pagination-spacer.charcoal-icon-button:disabled {
1782
1825
  opacity: 1;
1783
1826
  }
1827
+ .charcoal-carousel {
1828
+ position: relative;
1829
+ display: block;
1830
+ }
1831
+
1832
+ .charcoal-carousel[data-full-width='true'] {
1833
+ width: 100vw;
1834
+ margin-inline: calc(50% - 50vw);
1835
+ }
1836
+
1837
+ .charcoal-carousel__viewport {
1838
+ position: relative;
1839
+ }
1840
+
1841
+ .charcoal-carousel__scroller {
1842
+ position: relative;
1843
+ display: flex;
1844
+ gap: 24px;
1845
+ overflow-x: auto;
1846
+ overflow-y: hidden;
1847
+ overscroll-behavior-x: contain;
1848
+ scroll-behavior: smooth;
1849
+ scrollbar-width: none;
1850
+ outline: none;
1851
+ }
1852
+
1853
+ .charcoal-carousel__scroller::-webkit-scrollbar {
1854
+ display: none;
1855
+ }
1856
+
1857
+ .charcoal-carousel__scroller[data-focus-visible] {
1858
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
1859
+ }
1860
+
1861
+ .charcoal-carousel[data-size='S'] .charcoal-carousel__scroller {
1862
+ gap: 0;
1863
+ }
1864
+
1865
+ /* スクロールスナップ type は prop(scrollSnap.type)で scroller に出し分ける。
1866
+ align は基底 .charcoal-carousel__item の後(後述)に置く(no-descending-specificity 回避)。
1867
+ 未指定時の既定(M=none / S=mandatory / align=center)は JS 側で data 属性に解決する。 */
1868
+ .charcoal-carousel[data-scroll-snap-type='none'] .charcoal-carousel__scroller {
1869
+ scroll-snap-type: none;
1870
+ }
1871
+
1872
+ .charcoal-carousel[data-scroll-snap-type='proximity']
1873
+ .charcoal-carousel__scroller {
1874
+ scroll-snap-type: x proximity;
1875
+ }
1876
+
1877
+ .charcoal-carousel[data-scroll-snap-type='mandatory']
1878
+ .charcoal-carousel__scroller {
1879
+ scroll-snap-type: x mandatory;
1880
+ }
1881
+
1882
+ /* グラデーション: はみ出してスクロール可能な側のみ、端のアイテムを背景色(白)へ
1883
+ フェードさせる。mask による透過ではなく、72px の「背景色→透明」オーバーレイを
1884
+ ビューポートに重ねて白で覆う。スクロール可能な側だけ data-can-prev/next で出し分ける。 */
1885
+ .charcoal-carousel[data-has-gradient='true']
1886
+ .charcoal-carousel__viewport::before,
1887
+ .charcoal-carousel[data-has-gradient='true']
1888
+ .charcoal-carousel__viewport::after {
1889
+ content: '';
1890
+ position: absolute;
1891
+ top: 0;
1892
+ bottom: 0;
1893
+ width: 72px;
1894
+ pointer-events: none;
1895
+ opacity: 0;
1896
+ transition: 0.2s opacity;
1897
+ z-index: 1;
1898
+ }
1899
+
1900
+ .charcoal-carousel[data-has-gradient='true']
1901
+ .charcoal-carousel__viewport::before {
1902
+ left: 0;
1903
+ background: linear-gradient(to right, #fff, transparent);
1904
+ }
1905
+
1906
+ .charcoal-carousel[data-has-gradient='true']
1907
+ .charcoal-carousel__viewport::after {
1908
+ right: 0;
1909
+ background: linear-gradient(to left, #fff, transparent);
1910
+ }
1911
+
1912
+ .charcoal-carousel[data-has-gradient='true'][data-can-prev='true']
1913
+ .charcoal-carousel__viewport::before {
1914
+ opacity: 1;
1915
+ }
1916
+
1917
+ .charcoal-carousel[data-has-gradient='true'][data-can-next='true']
1918
+ .charcoal-carousel__viewport::after {
1919
+ opacity: 1;
1920
+ }
1921
+
1922
+ .charcoal-carousel__item {
1923
+ flex: 0 0 auto;
1924
+ min-width: 0;
1925
+ }
1926
+
1927
+ .charcoal-carousel[data-size='S'] .charcoal-carousel__item {
1928
+ flex: 0 0 100%;
1929
+ }
1930
+
1931
+ /* scroll-snap-align は prop(scrollSnap.align)で出し分ける。基底 .charcoal-carousel__item
1932
+ より後に置くことで no-descending-specificity を回避する。 */
1933
+ .charcoal-carousel[data-scroll-snap-align='center'] .charcoal-carousel__item {
1934
+ scroll-snap-align: center;
1935
+ }
1936
+
1937
+ .charcoal-carousel[data-scroll-snap-align='start'] .charcoal-carousel__item {
1938
+ scroll-snap-align: start;
1939
+ }
1940
+
1941
+ /* ── Navigation Buttons (charcoal IconButton, variant=Overlay size=S) ── */
1942
+
1943
+ /* マスクと同じ 72px 1fr 72px グリッド。各ボタンは 72px ゾーンの中央に置く。 */
1944
+ .charcoal-carousel__navigation {
1945
+ position: absolute;
1946
+ inset: 0;
1947
+ pointer-events: none;
1948
+ display: grid;
1949
+ grid-template-columns: 72px 1fr 72px;
1950
+ align-items: center;
1951
+ /* 白フェード(z-index: 1)より上にボタンを表示する */
1952
+ z-index: 2;
1953
+ /* sandbox 同様、通常は隠してカルーセル hover 時にフェードイン表示する。 */
1954
+ opacity: 0;
1955
+ transition: 0.4s opacity;
1956
+ }
1957
+ .charcoal-carousel__navigation[data-visible='false'] {
1958
+ display: none;
1959
+ }
1960
+
1961
+ /* hover で表示。キーボード操作でも到達できるよう focus-within でも表示する。 */
1962
+ .charcoal-carousel:hover .charcoal-carousel__navigation,
1963
+ .charcoal-carousel:focus-within .charcoal-carousel__navigation {
1964
+ opacity: 1;
1965
+ }
1966
+
1967
+ .charcoal-carousel__navigation__item {
1968
+ pointer-events: auto;
1969
+ }
1970
+
1971
+ .charcoal-carousel__navigation__item[data-direction='prev'] {
1972
+ grid-column: 1;
1973
+ justify-self: center;
1974
+ }
1975
+
1976
+ .charcoal-carousel__navigation__item[data-direction='next'] {
1977
+ grid-column: 3;
1978
+ justify-self: center;
1979
+ }
1980
+
1981
+ /* スクロール端では非表示。IconButton の disabled スタイル(opacity:0.32)より
1982
+ 高い詳細度で打ち消すため、ルートを前置する。 */
1983
+ .charcoal-carousel .charcoal-carousel__navigation__item[data-hidden='true'] {
1984
+ opacity: 0;
1985
+ pointer-events: none;
1986
+ }
1987
+
1988
+ /* タッチデバイスではナビゲーションボタンを出さず、スワイプ操作に委ねる。 */
1989
+ @media (hover: none) and (pointer: coarse) {
1990
+ .charcoal-carousel__navigation {
1991
+ display: none;
1992
+ }
1993
+ }
1994
+
1995
+ /* ── Indicator: JS Fallback ── */
1996
+
1997
+ .charcoal-carousel__indicator {
1998
+ display: flex;
1999
+ justify-content: center;
2000
+ align-items: center;
2001
+ height: 40px;
2002
+ gap: 8px;
2003
+ }
2004
+
2005
+ .charcoal-carousel__indicator[data-visible='false'] {
2006
+ display: none;
2007
+ }
2008
+
2009
+ .charcoal-carousel__indicator__item {
2010
+ -webkit-appearance: none;
2011
+ -moz-appearance: none;
2012
+ appearance: none;
2013
+ box-sizing: border-box;
2014
+ width: 8px;
2015
+ height: 8px;
2016
+ padding: 0;
2017
+ border: 0;
2018
+ border-radius: 50%;
2019
+ background-color: var(--charcoal-color-text-tertiary-default);
2020
+ cursor: pointer;
2021
+ transition: 0.2s background-color;
2022
+ }
2023
+
2024
+ .charcoal-carousel__indicator__item:hover {
2025
+ background-color: var(--charcoal-color-text-secondary-default);
2026
+ }
2027
+
2028
+ .charcoal-carousel__indicator__item:focus-visible {
2029
+ outline: 2px solid rgba(0, 150, 250, 0.56);
2030
+ outline-offset: 2px;
2031
+ }
2032
+
2033
+ .charcoal-carousel__indicator__item[data-active='true'] {
2034
+ background-color: var(--charcoal-color-text-default);
2035
+ }
2036
+
2037
+ /* ── CSS Scroll Markers (progressive enhancement) ── */
2038
+
2039
+ /* CSS Scroll Markers / Anchor Positioning は新しい仕様で、stylelint がプロパティ・
2040
+ 擬似要素・擬似クラスを未知と判定するため、この @supports ブロックでは該当ルールを無効化する。 */
2041
+ /* stylelint-disable property-no-unknown, selector-pseudo-element-no-unknown, selector-pseudo-class-no-unknown */
2042
+ @supports (scroll-marker-group: after) {
2043
+ .charcoal-carousel[data-indicator='true'] {
2044
+ padding-bottom: 40px;
2045
+ }
2046
+
2047
+ .charcoal-carousel__scroller {
2048
+ anchor-name: --charcoal-carousel;
2049
+ scroll-marker-group: after;
2050
+ }
2051
+
2052
+ .charcoal-carousel__scroller::scroll-button(*) {
2053
+ content: none;
2054
+ }
2055
+
2056
+ .charcoal-carousel__scroller::scroll-marker-group {
2057
+ display: flex;
2058
+ justify-content: center;
2059
+ align-items: center;
2060
+ height: 40px;
2061
+ gap: 8px;
2062
+
2063
+ position: absolute;
2064
+ position-anchor: --charcoal-carousel;
2065
+ top: anchor(bottom);
2066
+ justify-self: anchor-center;
2067
+ }
2068
+
2069
+ .charcoal-carousel[data-indicator='false'] .charcoal-carousel__scroller {
2070
+ scroll-marker-group: none;
2071
+ }
2072
+
2073
+ .charcoal-carousel__item::scroll-marker {
2074
+ content: '';
2075
+ width: 8px;
2076
+ height: 8px;
2077
+ border: 0;
2078
+ border-radius: 50%;
2079
+ background-color: var(--charcoal-color-text-tertiary-default);
2080
+ cursor: pointer;
2081
+ transition: 0.2s background-color;
2082
+ }
2083
+
2084
+ .charcoal-carousel__item::scroll-marker:hover {
2085
+ background-color: var(--charcoal-color-text-secondary-default);
2086
+ }
2087
+
2088
+ .charcoal-carousel__item::scroll-marker:focus {
2089
+ outline: 2px solid rgba(0, 150, 250, 0.56);
2090
+ outline-offset: 2px;
2091
+ }
2092
+
2093
+ .charcoal-carousel__item::scroll-marker:target-current {
2094
+ background-color: var(--charcoal-color-text-default);
2095
+ }
2096
+
2097
+ .charcoal-carousel__indicator {
2098
+ display: none;
2099
+ }
2100
+ }
2101
+ /* stylelint-enable property-no-unknown, selector-pseudo-element-no-unknown, selector-pseudo-class-no-unknown */
1784
2102
  .charcoal-focus-ring:is(
1785
2103
  :not(:disabled):not([aria-disabled]),
1786
2104
  [aria-disabled='false']
package/dist/index.d.ts CHANGED
@@ -26,5 +26,6 @@ export { default as TagItem, type TagItemProps } from './components/TagItem';
26
26
  export { default as HintText, type HintTextProps, type HintTextContext, } from './components/HintText';
27
27
  export { default as TextEllipsis, type TextEllipsisProps, } from './components/TextEllipsis';
28
28
  export { default as Pagination, type PaginationProps, } from './components/Pagination';
29
+ export { default as Carousel, type CarouselProps, type CarouselItem, type CarouselHandlerRef, type ScrollAlign, type ScrollSnap, type ScrollSnapType, type ScrollSnapAlign, type ScrollStep, type ScrollStepContext, } from './components/Carousel';
29
30
  import './components/FocusRing/index.css';
30
31
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
package/dist/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  "use client";
2
- import*as e from"react";import t,{Children as n,Fragment as r,createContext as i,forwardRef as a,isValidElement as o,memo as s,useCallback as c,useContext as l,useDebugValue as u,useEffect as d,useImperativeHandle as f,useMemo as p,useRef as m,useState as h,version as g}from"react";import{SSRProvider as _}from"react-aria/SSRProvider";import{OverlayProvider as v}from"react-aria/private/overlays/useModal";import{jsx as y,jsxs as b}from"react/jsx-runtime";import x from"warning";import{calcActualSize as S}from"@charcoal-ui/icons";import"@charcoal-ui/icons/css/icon.css";import{useId as C}from"react-aria/useId";import{useVisuallyHidden as w}from"react-aria/VisuallyHidden";import{animated as T,easings as E,useTransition as D}from"@react-spring/web";import{useDialog as O}from"react-aria/useDialog";import{ariaHideOutside as k}from"react-aria/private/overlays/ariaHideOutside";import{useOverlayFocusContain as A}from"react-aria/private/overlays/Overlay";import{useOverlay as j}from"react-aria/useOverlay";import{DismissButton as M,Overlay as N}from"react-aria/Overlay";import{useObjectRef as P}from"react-aria/useObjectRef";import{usePopover as F}from"react-aria/usePopover";import{useRadio as I,useRadioGroup as L}from"react-aria/useRadioGroup";import{useRadioGroupState as R}from"react-stately/useRadioGroupState";import{useLink as ee}from"react-aria";import{c as z}from"react-compiler-runtime";function te(e){let t=parseInt(g.split(`.`)[0],10);return Number.isFinite(t)?t>=e:!1}const B=te(18)?r:_;function V({children:e}){return y(B,{children:y(v,{children:e})})}const H=`charcoal-theme`,U=`theme`,W=new RegExp(/^(\w|-)+$/);function G(e){if(!W.test(e))throw Error(`Unexpected key :${e}, expect: /^(\\w|-)+$/`)}const K=(e=U)=>t=>{G(e),t===void 0?delete document.documentElement.dataset[e]:document.documentElement.dataset[e]=t},ne=K();function re(e,t){return`:root[data-${t??`theme`}='${e}']`}function ie(e){return`@media (prefers-color-scheme: ${e})`}function ae({key:e=H,setter:t=ne}={}){let[n,,r]=se(e);d(()=>{n!==void 0&&t(r?void 0:n)},[t,r,n])}function oe(e=H){return localStorage.getItem(e)}const se=(e=H)=>{G(e);let t=de(`(prefers-color-scheme: dark)`),n=t===void 0?void 0:t?`dark`:`light`,[r,i,a]=ce(e);return[!a||n===void 0?void 0:r??n,i,r===void 0]};function ce(e,t){let[n,r]=h(!1),[i,a]=h(),o=p(()=>t?.(),[t]),s=c(()=>{let t=localStorage.getItem(e);a((t===null?null:le(t))??o),r(!0)},[o,e]),l=c(t=>{t.storageArea===localStorage&&t.key===e&&s()},[s,e]);return d(()=>(s(),window.addEventListener(`storage`,l),()=>{window.removeEventListener(`storage`,l)}),[s,l]),[i??o,t=>{if(t===void 0)localStorage.removeItem(e);else{let n=ue(t);localStorage.setItem(e,n)}let n=new StorageEvent(`storage`,{bubbles:!0,cancelable:!1,key:e,url:location.href,storageArea:localStorage});dispatchEvent(n)},n]}function le(e){try{return JSON.parse(e)}catch{return e}}function ue(e){return typeof e==`string`?e:JSON.stringify(e)}function de(e){let[t,n]=h();return d(()=>{let t=window.matchMedia(e),r=()=>{n(t.matches)};return t.addEventListener(`change`,r),n(t.matches),()=>{t.removeEventListener(`change`,r)}},[e]),t}function fe({localStorageKey:e=q.localStorageKey,rootAttribute:t=q.rootAttribute}=q){return G(e),G(t),`'use strict';
2
+ import*as e from"react";import t,{Children as n,Fragment as r,createContext as i,forwardRef as a,isValidElement as o,memo as s,useCallback as c,useContext as l,useDebugValue as u,useEffect as d,useImperativeHandle as f,useLayoutEffect as p,useMemo as m,useRef as h,useState as g,useSyncExternalStore as _,version as v}from"react";import{SSRProvider as y}from"react-aria/SSRProvider";import{OverlayProvider as b}from"react-aria/private/overlays/useModal";import{jsx as x,jsxs as S}from"react/jsx-runtime";import C from"warning";import{calcActualSize as w}from"@charcoal-ui/icons";import{useId as T}from"react-aria/useId";import{useVisuallyHidden as E}from"react-aria/VisuallyHidden";import{animated as D,easings as O,useTransition as k}from"@react-spring/web";import{useDialog as A}from"react-aria/useDialog";import{ariaHideOutside as j}from"react-aria/private/overlays/ariaHideOutside";import{useOverlayFocusContain as M}from"react-aria/private/overlays/Overlay";import{useOverlay as N}from"react-aria/useOverlay";import{DismissButton as P,Overlay as F}from"react-aria/Overlay";import{useObjectRef as I}from"react-aria/useObjectRef";import{usePopover as L}from"react-aria/usePopover";import{useRadio as R,useRadioGroup as ee}from"react-aria/useRadioGroup";import{useRadioGroupState as z}from"react-stately/useRadioGroupState";import{mergeProps as te,useFocusRing as ne,useKeyboard as B,useLink as V}from"react-aria";import{c as H}from"react-compiler-runtime";function U(e){let t=parseInt(v.split(`.`)[0],10);return Number.isFinite(t)?t>=e:!1}const W=U(18)?r:y;function re({children:e}){return x(W,{children:x(b,{children:e})})}const G=`charcoal-theme`,ie=`theme`,ae=new RegExp(/^(\w|-)+$/);function K(e){if(!ae.test(e))throw Error(`Unexpected key :${e}, expect: /^(\\w|-)+$/`)}const oe=(e=ie)=>t=>{K(e),t===void 0?delete document.documentElement.dataset[e]:document.documentElement.dataset[e]=t},se=oe();function ce(e,t){return`:root[data-${t??`theme`}='${e}']`}function le(e){return`@media (prefers-color-scheme: ${e})`}function ue({key:e=G,setter:t=se}={}){let[n,,r]=fe(e);d(()=>{n!==void 0&&t(r?void 0:n)},[t,r,n])}function de(e=G){return localStorage.getItem(e)}const fe=(e=G)=>{K(e);let t=ge(`(prefers-color-scheme: dark)`),n=t===void 0?void 0:t?`dark`:`light`,[r,i,a]=pe(e);return[!a||n===void 0?void 0:r??n,i,r===void 0]};function pe(e,t){let[n,r]=g(!1),[i,a]=g(),o=m(()=>t?.(),[t]),s=c(()=>{let t=localStorage.getItem(e);a((t===null?null:me(t))??o),r(!0)},[o,e]),l=c(t=>{t.storageArea===localStorage&&t.key===e&&s()},[s,e]);return d(()=>(s(),window.addEventListener(`storage`,l),()=>{window.removeEventListener(`storage`,l)}),[s,l]),[i??o,t=>{if(t===void 0)localStorage.removeItem(e);else{let n=he(t);localStorage.setItem(e,n)}let n=new StorageEvent(`storage`,{bubbles:!0,cancelable:!1,key:e,url:location.href,storageArea:localStorage});dispatchEvent(n)},n]}function me(e){try{return JSON.parse(e)}catch{return e}}function he(e){return typeof e==`string`?e:JSON.stringify(e)}function ge(e){let[t,n]=g();return d(()=>{let t=window.matchMedia(e),r=()=>{n(t.matches)};return t.addEventListener(`change`,r),n(t.matches),()=>{t.removeEventListener(`change`,r)}},[e]),t}function _e({localStorageKey:e=q.localStorageKey,rootAttribute:t=q.rootAttribute}=q){return K(e),K(t),`'use strict';
3
3
  (function () {
4
4
  var localStorageKey = '${e}'
5
5
  var rootAttribute = '${t}'
@@ -8,5 +8,5 @@ import*as e from"react";import t,{Children as n,Fragment as r,createContext as i
8
8
  document.documentElement.dataset[rootAttribute] = currentTheme;
9
9
  }
10
10
  })();
11
- `}function pe({localStorageKey:e=q.localStorageKey,rootAttribute:t=q.rootAttribute}){return y(`script`,{dangerouslySetInnerHTML:{__html:fe({localStorageKey:e,rootAttribute:t})}})}const q={localStorageKey:H,rootAttribute:U};function J(...e){return p(()=>e.filter(e=>e).join(` `),[e])}const me=a(function({variant:e,fullWidth:t,size:n,className:r,component:i,isActive:a,...o},s){let c=p(()=>i??`button`,[i]),l=J(`charcoal-button`,r);return y(c,{...o,className:l,"data-variant":e,"data-size":n,"data-full-width":t,"data-active":a,ref:s})}),he=a(function({component:e,...t},n){let r=J(`charcoal-clickable`,t.className);return y(p(()=>e??`button`,[e]),{...t,ref:n,className:r})}),Y=a(function({variant:e=`Default`,size:t=`M`,icon:n,isActive:r=!1,component:i,...a},o){ge(t,n);let s=p(()=>i??`button`,[i]),c=J(`charcoal-icon-button`,a.className);return y(s,{...a,ref:o,className:c,"data-size":t,"data-active":r,"data-variant":e,children:y(`pixiv-icon`,{name:n})})});function ge(e,t){let n;switch(e){case`XS`:n=`16`;break;case`S`:case`M`:n=`24`;break}let r=/^\d*/u.exec(t);if(r==null)throw Error(`Invalid icon name`);let[i]=r;i!==n&&console.warn(`IconButton with size "${e}" expect icon size "${n}, but got "${i}"`)}const _e=e.createContext({name:void 0,selected:void 0,disabled:!1,readonly:!1,invalid:!1,onChange(){throw Error(`Cannot find onChange() handler. Perhaps you forgot to wrap with <RadioGroup> ?`)}});var ve=s(a(function({onChange:e,invalid:t,className:n,...r},i){let a=c(t=>{let n=t.currentTarget;e?.(n.value)},[e]);return y(`input`,{className:J(`charcoal-radio-input`,n),ref:i,type:`radio`,onChange:a,"aria-invalid":t,...r})})),ye=s(a(function({value:e,disabled:t=!1,children:n,...r},i){let{name:a,selected:o,disabled:s,readonly:c,invalid:u,onChange:d}=l(_e),f=J(`charcoal-radio__label`,r.className);x(a!==void 0,`"name" is not Provided for <Radio>. Perhaps you forgot to wrap with <RadioGroup> ?`);let p=e===o,m=t||s,h=c&&!p;return b(`label`,{"aria-disabled":m||h,className:f,children:[y(ve,{name:a,value:e,checked:p,"aria-invalid":u,onChange:d,disabled:m||h,ref:i}),n!=null&&y(`div`,{className:`charcoal-radio__label_div`,children:n})]})}));const be=a(function({value:e,label:t,name:n,onChange:r,disabled:i,readonly:a,invalid:o,children:s,"aria-orientation":l=`vertical`,...u},d){let f=J(`charcoal-radio-group`,u.className),m=c(e=>{r(e)},[r]),h=p(()=>({name:n,selected:e,disabled:i??!1,readonly:a??!1,invalid:o??!1,onChange:m}),[i,m,o,n,a,e]);return y(_e.Provider,{value:h,children:y(`div`,{role:`radiogroup`,"aria-disabled":i,"aria-invalid":o,"aria-label":t,"aria-labelledby":u[`aria-labelledby`],"aria-orientation":l,className:f,ref:d,children:s})})}),xe=i({name:void 0,selected:[],disabled:!1,readonly:!1,invalid:!1,onChange(){throw Error("Cannot find `onChange()` handler. Perhaps you forgot to wrap it with `<MultiSelectGroup />` ?")}}),X=e.forwardRef(function({name:t,scale:n,unsafeNonGuidelineScale:r,fixedSize:i,className:a,style:o,...s},c){let l=e.useMemo(()=>S({name:t,scale:n,unsafeNonGuidelineScale:r,fixedSize:i}),[t,n,r,i]);return y(`pixiv-icon`,{ref:c,name:t,scale:n,"unsafe-non-guideline-scale":r,"fixed-size":i,style:e.useMemo(()=>({...o,"--charcoal-icon-size":`${l}px`}),[l,o]),class:`charcoal-icon ${a||``}`.trim(),...s})});var Se=s(a(function({value:e,disabled:t=!1,onChange:n,variant:r=`default`,className:i,children:a},o){let{name:s,selected:u,disabled:d,readonly:f,invalid:p,onChange:m}=l(xe);x(s!==void 0,`"name" is not Provided for <MultiSelect>. Perhaps you forgot to wrap with <MultiSelectGroup> ?`);let h=u.includes(e),g=t||d||f,_=c(t=>{t.currentTarget instanceof HTMLInputElement&&(n&&n({value:e,selected:t.currentTarget.checked}),m({value:e,selected:t.currentTarget.checked}))},[n,m,e]);return b(`label`,{"aria-disabled":g,className:J(`charcoal-multi-select`,i),children:[y(`input`,{className:`charcoal-multi-select-input`,name:s,value:e,type:`checkbox`,checked:h,disabled:g,onChange:_,"data-overlay":r===`overlay`,"aria-invalid":p,ref:o}),y(`div`,{className:`charcoal-multi-select-overlay`,"data-overlay":r===`overlay`,"aria-invalid":p,"aria-hidden":!0,children:y(X,{name:`24/Check`,fixedSize:16})}),!!a&&y(`div`,{className:`charcoal-multi-select-label`,children:a})]})}));function Ce({className:e,style:t,name:n,label:r,selected:i,onChange:a,disabled:o=!1,readonly:s=!1,invalid:l=!1,children:u}){let d=c(e=>{let t=i.indexOf(e.value);e.selected?t<0&&a([...i,e.value]):t>=0&&a([...i.slice(0,t),...i.slice(t+1)])},[a,i]);return y(xe.Provider,{value:{name:n,selected:Array.from(new Set(i)),disabled:o,readonly:s,invalid:l,onChange:d},children:y(`div`,{className:e,style:t,"aria-label":r,"data-testid":`SelectGroup`,children:u})})}const we=a(function({onChange:e,className:t,...n},r){let i=c(t=>{let n=t.currentTarget;e?.(n.checked)},[e]);return y(`input`,{ref:r,className:J(`charcoal-switch-input`,t),type:`checkbox`,onChange:i,...n})}),Te=e.memo(function({children:e,className:t,disabled:n,id:r,input:i}){return b(`label`,{htmlFor:r,className:J(`charcoal-switch__label`,t),"aria-disabled":n,children:[i,y(`div`,{className:`charcoal-switch__label_div`,children:e})]})});var Ee=s(a(function({children:e,onChange:t,disabled:n,className:r,id:i,...a},o){let s=C(i),c=e===void 0,l=y(we,{...a,disabled:n,className:c?r:void 0,id:s,onChange:t,ref:o,role:`switch`,type:`checkbox`});return c?l:y(Te,{className:r,disabled:n,id:s,input:l,children:e})}));const Z=e.forwardRef(function({style:e,className:t,label:n,required:r=!1,requiredText:i,subLabel:a,...o},s){return b(`div`,{style:e,className:J(`charcoal-field-label-root`,t),children:[y(`label`,{ref:s,className:`charcoal-field-label`,...o,children:n}),r&&y(`div`,{className:`charcoal-field-label-required-text`,children:i}),y(`div`,{className:`charcoal-field-label-sub-label`,children:y(`span`,{children:a})})]})});function De(...e){return t=>{for(let n of e)typeof n==`function`?n(t):n!==null&&(n.current=t)}}function Oe(e){return Array.from(e).length}function ke(e,t){d(()=>{let n=e.current;if(n){let e=e=>{e.target!==t.current&&t.current?.focus()};return n.addEventListener(`click`,e),()=>{n.removeEventListener(`click`,e)}}})}function Q(e){return a(function({className:t,...n},r){return y(`div`,{className:J(e,t),ref:r,...n})})}const $=Q(`charcoal-text-field-assistive-text`),Ae=e.forwardRef(function({assistiveText:e,className:t,disabled:n=!1,label:r=``,maxLength:i,onChange:a,prefix:o=null,required:s,requiredText:l,showCount:u=!1,showLabel:f=!1,subLabel:p,suffix:g=null,type:_=`text`,invalid:v,value:x,getCount:S=Oe,...T},E){let D=m(null),{visuallyHiddenProps:O}=w(),[k,A]=h(S(x??``)),j=c(e=>{let t=e.target.value,n=S(t);i!==void 0&&n>i||(A(n),a?.(t))},[S,i,a]);d(()=>{A(S(x??``))},[S,x]);let M=m(null);ke(M,D);let N=C(T.id),P=C(),F=C(),I=e!=null&&e.length!==0;return b(`div`,{className:J(`charcoal-text-field-root`,t),"aria-disabled":n,children:[y(Z,{htmlFor:N,id:F,label:r,required:s,requiredText:l,subLabel:p,...f?{}:O}),b(`div`,{className:`charcoal-text-field-container`,"aria-disabled":n===!0?!0:void 0,"data-invalid":v===!0,ref:M,children:[o&&y(`div`,{className:`charcoal-text-field-prefix`,children:o}),y(`div`,{className:`charcoal-text-field-input-root`,children:y(`input`,{className:`charcoal-text-field-input`,"aria-describedby":I?P:void 0,"aria-invalid":v,"aria-labelledby":F,id:N,"data-invalid":v===!0,maxLength:i,onChange:j,disabled:n,ref:De(E,D),type:_,value:x,...T})}),(g||u)&&b(`div`,{className:`charcoal-text-field-suffix`,children:[g,u&&y(`span`,{className:`charcoal-text-field-line-counter`,children:i===void 0?k:`${k}/${i}`})]})]}),I&&y($,{"data-invalid":v===!0,id:P,children:e})]})}),je=a(function({onChange:e,className:t,value:n,showCount:r=!1,showLabel:i=!1,label:a=``,requiredText:o,subLabel:s,disabled:l=!1,required:u,assistiveText:g,maxLength:_,autoHeight:v=!1,rows:x=4,maxRows:S,invalid:T,getCount:E=Oe,defaultValue:D,imperativeRef:O,...k},A){let j=n===void 0,M=n??D?.toString()??``,[N,P]=h(x),[F,I]=h(E(M)),L=m(null),R=m(null);ke(R,L);let{visuallyHiddenProps:ee}=w(),z=p(()=>v||S&&S>=0,[v,S]),te=J(`charcoal-text-area-root`,t),B=g!=null&&g.length!==0,V=c(e=>{let t=(`${e.value}\n`.match(/\n/gu)?.length??0)||1,n=S!==void 0&&S>=1,r=x<=t?t:x;if(!n){P(r);return}P(Math.min(r,S))},[x,S]),H=c(e=>{let t=E(e.value);return j&&I(t),z&&V(e),t},[E,z,j,V]),U=c(t=>{let n=t.currentTarget.value,r=E(n);_!==void 0&&r>_||(H(t.currentTarget),e?.(n))},[E,_,e,H]);f(O,()=>({setValue:e=>{L.current!==null&&(L.current.value=e,H(L.current))},sync:()=>{L.current!==null&&H(L.current)}}),[H]);let W=C(k.id),G=C(),K=C();return d(()=>{j||I(E(M)),z&&L.current!==null&&V(L.current)},[j,M,E,z,L,V]),b(`div`,{className:te,"aria-disabled":l,children:[y(Z,{htmlFor:W,id:K,label:a,required:u,requiredText:o,subLabel:s,...i?{}:ee}),b(`div`,{className:`charcoal-text-area-container`,"aria-disabled":l===!0?`true`:void 0,"aria-invalid":T===!0,ref:R,style:{"--charcoal-text-area-rows":`${r?N+1:N}`},children:[y(`textarea`,{className:`charcoal-text-area-textarea`,"aria-describedby":B?G:void 0,"aria-invalid":T,"aria-labelledby":K,id:W,maxLength:_,"data-no-bottom-padding":r,onChange:U,ref:De(A,L),rows:N,value:n,disabled:l,defaultValue:D,...k}),r&&y(`span`,{className:`charcoal-text-area-counter`,children:_===void 0?F:`${F}/${_}`})]}),B&&y($,{"data-invalid":T===!0,id:G,children:g})]})});function Me(t){let n=e.useRef(null);return e.useEffect(()=>{t&&(typeof t==`function`?t(n.current):t.current=n.current)}),n}const Ne=a(function({size:e,bottomSheet:t,className:n,...r},i){let a=Me(i),{dialogProps:o}=O({role:`dialog`},a);return y(`div`,{className:J(`charcoal-modal-dialog`,n),role:o.role,"data-bottom-sheet":t,tabIndex:o.tabIndex,"aria-labelledby":o[`aria-labelledby`],onBlur:o.onBlur,"data-size":e,ref:a,...r})}),Pe=e.createContext(null);function Fe(e,t,n=!1){d(()=>{if(t&&e){let t=e.style.paddingRight,r=e.style.overflow;return e.style.paddingRight=`${window.innerWidth-e.clientWidth}px`,e.style.overflow=n?`clip`:`hidden`,()=>{e.style.paddingRight=t,e.style.overflow=r}}},[e,t,n])}function Ie(t,n,r){let{overlayProps:i,underlayProps:a}=j({...t,isOpen:n.isOpen,onClose:n.onClose,shouldCloseOnInteractOutside:()=>!1},r);return Fe(typeof document<`u`?document.body:null,n.isOpen,t.overflowClip),A(),e.useEffect(()=>{if(n.isOpen&&r.current)return k([r.current])},[n.isOpen,r]),{modalProps:i,underlayProps:a}}function Le(){return typeof window<`u`}function Re(){let[t,n]=e.useState(Le()?window.innerWidth:null);return e.useEffect(()=>{let e=()=>{n(window.innerWidth)};return window.addEventListener(`resize`,e),()=>{window.removeEventListener(`resize`,e)}}),t}const ze=a(function({children:t,zIndex:n=10,portalContainer:r,...i},a){let{title:o,size:s=`M`,bottomSheet:c=!1,isDismissable:l,onClose:u,className:d,isOpen:f=!1,closeButtonAriaLabel:p=`Close`}=i,m=P(a),{modalProps:h,underlayProps:g}=Ie({...i,isKeyboardDismissDisabled:l===void 0||l===!1},{onClose:u,isOpen:f},m),_=(Re()??1/0)<744,v=_&&c!==!1,x=!_||c!==!0,S=D(f,{from:{transform:`translateY(100%)`,backgroundColor:`rgba(0, 0, 0, 0)`,overflow:`hidden`},enter:{transform:`translateY(0%)`,backgroundColor:`rgba(0, 0, 0, 0.4)`},update:{overflow:`auto`},leave:{transform:`translateY(100%)`,backgroundColor:`rgba(0, 0, 0, 0)`,overflow:`hidden`},config:v?{duration:400,easing:E.easeOutQuart}:{duration:0}}),C=e.useRef(null),w=e.useCallback(e=>{e.currentTarget===e.target&&u()},[u]);return S(({backgroundColor:e,overflow:i,transform:a},f)=>f&&y(N,{portalContainer:r,children:y(T.div,{className:`charcoal-modal-background`,ref:C,...g,style:v?{backgroundColor:e,overflow:i,zIndex:n}:{zIndex:n},"data-bottom-sheet":c,onClick:w,children:y(Pe.Provider,{value:C.current,children:y(Be,{ref:m,...h,style:v?{transform:a}:{},size:s,bottomSheet:c,className:d,children:b(He.Provider,{value:{titleProps:{},title:o,close:u,showDismiss:x,bottomSheet:c},children:[t,l===!0&&y(Ue,{"aria-label":p,onClick:u})]})})})})}))}),Be=T(Ne);var Ve=s(ze);const He=e.createContext({titleProps:{},title:``,close:void 0,showDismiss:!0,bottomSheet:!1});function Ue(e){return y(Y,{className:`charcoal-modal-close-button`,size:`S`,icon:`24/Close`,type:`button`,...e})}function We(){let e=l(He);return y(`div`,{className:`charcoal-modal-header-root`,"data-bottom-sheet":e.bottomSheet,children:y(`div`,{className:`charcoal-modal-header-title`,children:e.title})})}const Ge=Q(`charcoal-modal-align`),Ke=Q(`charcoal-modal-body`),qe=Q(`charcoal-modal-buttons`);var Je=s(a(function({size:e=48,padding:t=16,transparent:n=!1,...r},i){let a=J(`charcoal-loading-spinner`,r.className);return y(`div`,{role:`progressbar`,style:{"--charcoal-loading-spinner-size":`${e}px`,"--charcoal-loading-spinner-padding":`${t}px`},"data-transparent":n,className:a,ref:i,children:y(Ye,{})})}));const Ye=a(function({once:e=!1},t){let n=m(null);return f(t,()=>({restart:()=>{n.current&&(n.current.dataset.resetAnimation=`true`,n.current.offsetWidth,delete n.current.dataset.resetAnimation)}})),y(`div`,{role:`presentation`,ref:n,"data-once":e,className:`charcoal-loading-spinner-icon`})}),Xe=()=>null;function Ze(e){let t=m(null),n=e.popoverRef===void 0?t:e.popoverRef,{popoverProps:r,underlayProps:i}=F({triggerRef:e.triggerRef,popoverRef:n,containerPadding:16},{close:e.onClose,isOpen:e.isOpen,open:Xe,setOpen:Xe,toggle:Xe});return Fe(l(Pe),e.isOpen),e.isOpen?b(N,{portalContainer:document.body,children:[y(`div`,{...i,...e.inertWorkaround?{"data-react-aria-top-layer":!0,onClick:e.onClose}:{},style:{position:`fixed`,zIndex:typeof r.style?.zIndex==`number`?r.style.zIndex-1:99999,inset:0}}),b(`div`,{...r,ref:n,className:`charcoal-popover`,children:[y(M,{onDismiss:()=>e.onClose()}),y(`div`,{tabIndex:0,onFocus:e.onClose}),e.children,y(`div`,{tabIndex:0,onFocus:e.onClose}),y(M,{onDismiss:()=>e.onClose()})]})]}):null}function Qe({children:e,...t}){let n=m(null);return d(()=>{t.isOpen&&n.current&&t.triggerRef.current&&(n.current.style.width=`${t.triggerRef.current.clientWidth}px`)},[t.triggerRef,t.isOpen]),d(()=>{if(t.isOpen)if(t.value!==void 0&&t.value!==``){let e=window.scrollY,n=window.scrollX;document.querySelector(`[data-key="${t.value.toString()}"]`)?.focus(),window.scrollTo(n,e)}else{let e=n.current?.querySelector(`[role='option']`);e instanceof HTMLElement&&e.focus()}},[t.value,t.isOpen]),y(Ze,{isOpen:t.isOpen,onClose:t.onClose,popoverRef:n,triggerRef:t.triggerRef,inertWorkaround:t.inertWorkaround,children:e})}function $e(t,n){let r=e.Children.toArray(t);for(let t=0;t<r.length;t++){let i=r[t];if(e.isValidElement(i)){if(`value`in i.props&&i.props.value===n&&`children`in i.props)return i.props.children;if(`children`in i.props){let e=$e(i.props.children,n);if(e!==void 0)return e}}}}const et=i({root:void 0,value:``,propsArray:[],setValue:e=>{}});function tt(t){let n=e.Children.toArray(t),r=[];for(let t=0;t<n.length;t++){let i=n[t];if(e.isValidElement(i)){let e=i.props;`value`in e&&typeof e.value==`string`&&r.push({disabled:e.disabled,value:e.value}),`children`in e&&e.children&&r.push(...tt(e.children))}}return r}function nt(e){let t=m(null),n=p(()=>tt(e.children),[e.children]);return y(`ul`,{className:`charcoal-menu-list`,ref:t,children:y(et.Provider,{value:{value:e.value??``,root:t,propsArray:n,setValue:t=>{e.onChange?.(t)}},children:e.children})})}function rt({onChange:e,showLabel:t=!1,selectRef:n,...r}){let i=m(null),[a,o]=h(!1),s=$e(r.children,r.value),l=p(()=>r.placeholder!==void 0&&s===void 0,[s,r.placeholder]),u=tt(r.children),d=p(()=>u.some(e=>e.value===r.value),[u,r.value]),{visuallyHiddenProps:f}=w(),g=c(t=>{e(t.target.value)},[e]),_=C(),v=C();return b(`div`,{className:J(`charcoal-dropdown-selector-root`,r.className),"aria-disabled":r.disabled,children:[y(Z,{id:_,label:r.label,required:r.required,requiredText:r.requiredText,subLabel:r.subLabel,...t?{}:f}),y(`div`,{...f,"aria-hidden":`true`,children:b(`select`,{name:r.name,value:r.value,onChange:g,tabIndex:-1,ref:n,children:[!d&&y(`option`,{value:r.value,children:r.value}),u.map(e=>y(`option`,{value:e.value,disabled:e.disabled,children:e.value},e.value))]})}),b(`button`,{className:`charcoal-dropdown-selector-button`,"aria-labelledby":_,"aria-invalid":r.invalid,"aria-describedby":r.assistiveText===void 0?void 0:v,disabled:r.disabled,onClick:()=>{r.disabled!==!0&&o(!0)},ref:i,type:`button`,"data-active":a,children:[y(`span`,{className:`charcoal-ui-dropdown-selector-text`,"data-placeholder":l,children:l?r.placeholder:s}),y(X,{className:`charcoal-ui-dropdown-selector-icon`,name:`16/Menu`})]}),a&&y(Qe,{isOpen:a,onClose:()=>o(!1),triggerRef:i,value:r.value,inertWorkaround:r.inertWorkaround,children:y(nt,{value:r.value,onChange:t=>{e(t),o(!1)},children:r.children})}),r.assistiveText!==void 0&&y($,{"data-invalid":r.invalid===!0,id:v,children:r.assistiveText})]})}const it=a(function({as:e,className:t,...n},r){return y(p(()=>e??`li`,[e]),{className:J(`charcoal-list-item`,t),ref:r,...n})});function at(e,t){if(t.scrollHeight>t.clientHeight){let n=e.getBoundingClientRect(),r=t.getBoundingClientRect();n.bottom>r.bottom?t.scrollTo({top:t.scrollTop+n.bottom-r.bottom}):n.top<r.top&&t.scrollTo({top:t.scrollTop-(r.top-n.top)})}else ot(e)}function ot(e){let t=e.getBoundingClientRect();t.top>=0&&t.bottom<=(window.innerHeight||document.documentElement.clientHeight)||e.scrollIntoView({block:`nearest`})}function st(e){let{setValue:t,root:n,propsArray:r}=l(et),i=c(()=>{e!==void 0&&t(e)},[e,t]);return[c(t=>{if(t.key===`Enter`)i();else if(t.key===`ArrowUp`||t.key===`ArrowDown`){let i=t.key===`ArrowDown`;if(t.preventDefault(),!r||e===void 0)return;let a=r.map(e=>e.value).filter(e=>e),o=a.indexOf(e);if(o===-1)return;for(let e=0;e<a.length;e++){let e=i?o+1>=a.length?a[0]:a[o+1]:o-1<0?a[a.length-1]:a[o-1],t=n?.current?.querySelector(`[data-key='${e}']`);if(t instanceof HTMLElement){if(t.ariaDisabled===`true`){o+=i?1:-1;continue}t.focus({preventScroll:!0}),n?.current?.parentElement&&at(t,n.current.parentElement);break}}}},[i,r,e,n]),i]}const ct=a(function({className:e,value:t,disabled:n,...r},i){let[a,o]=st(t);return y(it,{...r,ref:i,"data-key":t,onKeyDown:a,onClick:n===!0?void 0:o,tabIndex:-1,"aria-disabled":n,role:`option`,children:r.children})});function lt(e){let{value:t}=l(et),n=e.value===t,{children:r,secondary:i,...a}=e,o=e.contentFullWidth?`charcoal-dropdown-selector-menu-fullwidth`:``;return y(ct,{...a,"aria-selected":n,children:b(`div`,{className:o,children:[b(`div`,{className:`charcoal-dropdown-selector-menu-item-container ${o}`,children:[n&&y(X,{className:`charcoal-dropdown-selector-menu-item-icon`,name:`16/Check`}),y(`span`,{className:`charcoal-dropdown-selector-menu-item ${o}`,"data-selected":n,children:r})]}),i&&y(`span`,{className:`charcoal-dropdown-selector-menu-secondary`,children:i})]})})}function ut(e){return b(`li`,{className:`charcoal-menu-item-group`,role:`presentation`,children:[y(`span`,{children:e.text}),y(`ul`,{role:`group`,children:e.children})]})}const dt=i(null),ft=({value:e,children:t})=>y(dt.Provider,{value:e,children:t}),pt=()=>{let e=l(dt);if(e===null)throw Error("`<RadioProvider>` is not likely mounted.");return e};var mt=s(a(function(e,t){let n=J(`charcoal-segmented-control`,e.className),r=p(()=>({...e,isDisabled:e.disabled,isReadOnly:e.readonly,isRequired:e.required,"aria-label":e.name}),[e]),i=R(r),{radioGroupProps:a}=L(r,i),o=p(()=>e.data.map(e=>typeof e==`string`?{value:e,label:e}:e),[e.data]);return y(`div`,{ref:t,...a,className:n,"data-uniform-segment-width":e.uniformSegmentWidth,"data-full-width":e.fullWidth,children:y(ft,{value:i,children:o.map(t=>y(ht,{value:t.value,disabled:t.disabled,uniformSegmentWidth:e.uniformSegmentWidth,children:t.label},t.value))})})}));const ht=e=>{let t=pt(),n=m(null),{inputProps:r,isDisabled:i,isSelected:a}=I(p(()=>({value:e.value,isDisabled:e.disabled,children:e.children}),[e]),t,n);return b(`label`,{className:`charcoal-segmented-control-radio__label`,"aria-disabled":i||t.isReadOnly,"data-checked":a,"data-uniform-segment-width":e.uniformSegmentWidth,"data-full-width":e.fullWidth,children:[y(`input`,{className:`charcoal-segmented-control-radio__input`,...r,ref:n}),e.children]})};var gt=s(a(function({onChange:e,checked:t,invalid:n,className:r,rounded:i,...a},o){let s=c(t=>{let n=t.currentTarget;e?.(n.checked)},[e]);return y(`input`,{className:J(`charcoal-checkbox-input`,r),ref:o,type:`checkbox`,onChange:s,"aria-invalid":n,checked:t,"data-rounded":i,...a})}));const _t=t.memo(function({className:e,children:t,input:n,id:r,disabled:i}){return b(`label`,{htmlFor:r,"aria-disabled":i,className:J(`charcoal-checkbox__label`,e),children:[n,y(`div`,{className:`charcoal-checkbox__label_div`,children:t})]})});var vt=s(a(function({disabled:e,className:t,id:n,children:r,...i},a){let o=C(n),s=r===void 0,c=y(gt,{...i,className:s?t:void 0,disabled:e,id:o,ref:a});return s?c:y(_t,{className:t,disabled:e,id:o,input:c,children:r})})),yt=s(a(function({component:e,label:t,translatedLabel:n,bgColor:r=`#7ACCB1`,bgImage:i,size:a=`M`,status:o=`default`,disabled:s,"aria-disabled":c,...l},u){let d=P(u),f=n!==void 0&&n.length>0,m=J(`charcoal-tag-item`,`charcoal-tag-item__bg`,l.className),h=i!==void 0&&i.length>0?`image`:`color`,g=h===`color`?r:`url(${i??``})`,_=p(()=>e??`a`,[e]),v=_===`button`,{linkProps:x}=ee({isDisabled:s,elementType:typeof _==`string`?_:`a`},d),S=v?{disabled:s,"aria-disabled":c}:x;return b(_,{...l,...S,ref:d,className:m,"data-state":o,"data-bg-variant":h,"data-size":f?`M`:a,style:{"--charcoal-tag-item-bg":g},children:[b(`div`,{className:`charcoal-tag-item__label`,"data-has-translate":f,children:[f&&y(`span`,{className:`charcoal-tag-item__label__translated`,children:n}),y(`span`,{className:`charcoal-tag-item__label__text`,"data-has-translate":f,children:t})]}),o===`active`&&y(X,{name:`16/Remove`})]})}));function bt({children:e,context:t=`section`,className:n}){return b(`div`,{className:J(`charcoal-hint-text`,n),"data-context":t,children:[y(`div`,{className:`charcoal-hint-text-icon`,children:y(X,{name:`16/Info`})}),y(`p`,{className:`charcoal-hint-text-message`,children:e})]})}const xt=(e,t,n)=>{if(!e)return;let r=t??wt(n);if(r)return r},St=e=>o(e)&&!!e.props.children,Ct=e=>e==null||typeof e==`boolean`||JSON.stringify(e)===`{}`?``:e.toString(),wt=e=>!Array.isArray(e)&&!o(e)?Ct(e):n.toArray(e).reduce((e,t)=>{let n=``;return n=o(t)&&St(t)?wt(t.props.children):o(t)&&!St(t)?``:Ct(t),e.concat(n)},``);function Tt(e){"use memo";let t=z(32),n,r,i,a,o,s,c,l;t[0]===e?(n=t[1],r=t[2],i=t[3],a=t[4],o=t[5],s=t[6],c=t[7],l=t[8]):({lineHeight:r,lineLimit:a,children:n,title:l,hyphens:o,showTooltip:s,useNowrap:c,...i}=e,t[0]=e,t[1]=n,t[2]=r,t[3]=i,t[4]=a,t[5]=o,t[6]=s,t[7]=c,t[8]=l);let u=a===void 0?1:a,d=o===void 0?`auto`:o,f=s===void 0?!0:s,p=c===void 0?!1:c,m;t[9]!==n||t[10]!==f||t[11]!==l?(m=xt(f,l,n),t[9]=n,t[10]=f,t[11]=l,t[12]=m):m=t[12];let h=m,g=J(`charcoal-text-ellipsis`,i.className),_=r!==void 0,v;t[13]===p?v=t[14]:(v=p?{"data-use-nowrap":p}:{},t[13]=p,t[14]=v);let b;t[15]!==_||t[16]!==r?(b=_&&{"--charcoal-text-ellipsis-line-height":`${r}px`},t[15]=_,t[16]=r,t[17]=b):b=t[17];let x;t[18]!==d||t[19]!==u||t[20]!==i.style||t[21]!==b?(x={...b,"--charcoal-text-ellipsis-line-limit":u,hyphens:d,...i.style},t[18]=d,t[19]=u,t[20]=i.style,t[21]=b,t[22]=x):x=t[22];let S=x,C;return t[23]!==n||t[24]!==g||t[25]!==h||t[26]!==_||t[27]!==u||t[28]!==i||t[29]!==v||t[30]!==S?(C=y(`div`,{...i,className:g,"data-line-limit":u,"data-has-line-height":_,...v,style:S,title:h,children:n}),t[23]=n,t[24]=g,t[25]=h,t[26]=_,t[27]=u,t[28]=i,t[29]=v,t[30]=S,t[31]=C):C=t[31],C}function Et(e,t,n){"use memo";let r=z(8);if(r[0]!==`ba14feb6736cfb4c0d0d38e25b9e21619705224ad19f5dc886004a78f422b93d`){for(let e=0;e<8;e+=1)r[e]=Symbol.for(`react.memo_cache_sentinel`);r[0]=`ba14feb6736cfb4c0d0d38e25b9e21619705224ad19f5dc886004a78f422b93d`}let i=n===void 0?7:n;process.env.NODE_ENV!==`production`&&(x((e|0)===e,`\`page\` must be integer (${e})`),x((t|0)===t,`\`pageCount\` must be integer (${t})`),x(i===5||i===7,`\`pageRangeDisplayed\` must be 5 or 7 (${i})`));let a=Math.min(t,Math.max(e+Math.floor(i/2),i)),o;if(a<=i){let e;r[1]===a?e=r[2]:(e=Array.from({length:1+a-1},Dt),r[1]=a,r[2]=e),o=e}else{let e=a-(i-1)+2,t;if(r[3]!==e||r[4]!==a){let n;r[6]===e?n=r[7]:(n=(t,n)=>e+n,r[6]=e,r[7]=n),t=[1,`...`,...Array.from({length:1+a-e},n)],r[3]=e,r[4]=a,r[5]=t}else t=r[5];o=t}let s=o;return u(s),s}function Dt(e,t){return 1+t}const Ot=i(null);function kt(){let e=l(Ot);if(e==null)throw Error(`Pagination components must be used within a Pagination component`);return e}function At(e){"use memo";let t=z(15),{direction:n,ariaLabel:r}=e,{page:i,pageCount:a,size:o,isLinkMode:s,makeUrl:c,LinkComponent:l,makeClickHandler:u,linkProps:d}=kt(),f=n===`prev`,p=f?Math.max(1,i-1):Math.min(a,i+1),m=f?i<=1:i>=a,h=J(`charcoal-pagination-nav-button`,d?.className),g=f?`24/Prev`:`24/Next`,_=m||void 0,v;t[0]!==l||t[1]!==m||t[2]!==s||t[3]!==d||t[4]!==u||t[5]!==c||t[6]!==h||t[7]!==p?(v=s&&c?{component:l,href:c(p),"aria-disabled":m,...d,className:h}:{disabled:m,onClick:u(p),className:h},t[0]=l,t[1]=m,t[2]=s,t[3]=d,t[4]=u,t[5]=c,t[6]=h,t[7]=p,t[8]=v):v=t[8];let b;return t[9]!==r||t[10]!==o||t[11]!==g||t[12]!==_||t[13]!==v?(b=y(Y,{icon:g,size:o,"data-hidden":_,"aria-label":r,...v}),t[9]=r,t[10]=o,t[11]=g,t[12]=_,t[13]=v,t[14]=b):b=t[14],b}function jt(e){"use memo";let t=z(19),{value:n}=e,{page:r,size:i,isLinkMode:a,makeUrl:o,LinkComponent:s,makeClickHandler:c,linkProps:l}=kt(),u=J(`charcoal-pagination-button`,l?.className);if(n===`...`){let e;return t[0]===i?e=t[1]:(e=y(Y,{icon:`24/Dot`,size:i,disabled:!0,className:`charcoal-pagination-spacer`,"aria-hidden":!0}),t[0]=i,t[1]=e),e}if(n===r){let e;return t[2]===n?e=t[3]:(e=y(`span`,{className:`charcoal-pagination-button`,"aria-current":`page`,children:n}),t[2]=n,t[3]=e),e}if(typeof n!=`number`)return null;if(a&&o){let e;t[4]!==o||t[5]!==n?(e=o(n),t[4]=o,t[5]=n,t[6]=e):e=t[6];let r;return t[7]!==s||t[8]!==l||t[9]!==u||t[10]!==e||t[11]!==n?(r=y(s,{href:e,...l,className:u,children:n}),t[7]=s,t[8]=l,t[9]=u,t[10]=e,t[11]=n,t[12]=r):r=t[12],r}let d;t[13]!==c||t[14]!==n?(d=c(n),t[13]=c,t[14]=n,t[15]=d):d=t[15];let f;return t[16]!==d||t[17]!==n?(f=y(`button`,{type:`button`,className:`charcoal-pagination-button`,onClick:d,children:n}),t[16]=d,t[17]=n,t[18]=f):f=t[18],f}function Mt(e){"use memo";let t=z(40),n,r,i,a,o,s,c,l,u,d,f,p;t[0]===e?(n=t[1],r=t[2],i=t[3],a=t[4],o=t[5],s=t[6],c=t[7],l=t[8],u=t[9],d=t[10],f=t[11],p=t[12]):({page:s,pageCount:c,pageRangeDisplayed:l,size:u,onChange:o,makeUrl:i,component:d,linkProps:r,className:n,ariaLabelNext:f,ariaLabelPrev:p,...a}=e,t[0]=e,t[1]=n,t[2]=r,t[3]=i,t[4]=a,t[5]=o,t[6]=s,t[7]=c,t[8]=l,t[9]=u,t[10]=d,t[11]=f,t[12]=p);let m=u===void 0?`M`:u,h=d===void 0?`a`:d,g=f===void 0?`Next`:f,_=p===void 0?`Previous`:p,v=Et(s,c,l),x=i!==void 0,S;t[13]===o?S=t[14]:(S=e=>()=>o?.(e),t[13]=o,t[14]=S);let C=S,w=J(`charcoal-pagination`,n),T;t[15]!==h||t[16]!==x||t[17]!==r||t[18]!==C||t[19]!==i||t[20]!==s||t[21]!==c||t[22]!==m?(T={page:s,pageCount:c,size:m,isLinkMode:x,makeUrl:i,LinkComponent:h,makeClickHandler:C,linkProps:r},t[15]=h,t[16]=x,t[17]=r,t[18]=C,t[19]=i,t[20]=s,t[21]=c,t[22]=m,t[23]=T):T=t[23];let E=T,D;t[24]===_?D=t[25]:(D=y(At,{direction:`prev`,ariaLabel:_}),t[24]=_,t[25]=D);let O;t[26]===v?O=t[27]:(O=v.map(Nt),t[26]=v,t[27]=O);let k;t[28]===g?k=t[29]:(k=y(At,{direction:`next`,ariaLabel:g}),t[28]=g,t[29]=k);let A;t[30]!==w||t[31]!==a||t[32]!==m||t[33]!==k||t[34]!==D||t[35]!==O?(A=b(`nav`,{"data-size":m,"aria-label":`Pagination`,...a,className:w,children:[D,O,k]}),t[30]=w,t[31]=a,t[32]=m,t[33]=k,t[34]=D,t[35]=O,t[36]=A):A=t[36];let j;return t[37]!==A||t[38]!==E?(j=y(Ot.Provider,{value:E,children:A}),t[37]=A,t[38]=E,t[39]=j):j=t[39],j}function Nt(e){return y(jt,{value:e},e)}export{me as Button,V as CharcoalProvider,vt as Checkbox,he as Clickable,lt as DropdownMenuItem,rt as DropdownSelector,bt as HintText,X as Icon,Y as IconButton,Je as LoadingSpinner,Ye as LoadingSpinnerIcon,ct as MenuItem,ut as MenuItemGroup,Ve as Modal,Ge as ModalAlign,Ke as ModalBody,qe as ModalButtons,Ue as ModalCloseButton,We as ModalHeader,Se as MultiSelect,Ce as MultiSelectGroup,v as OverlayProvider,Mt as Pagination,ye as Radio,be as RadioGroup,B as SSRProvider,mt as SegmentedControl,pe as SetThemeScript,Ee as Switch,yt as TagItem,je as TextArea,Tt as TextEllipsis,Ae as TextField,oe as getThemeSync,fe as makeSetThemeScriptCode,ie as prefersColorScheme,re as themeSelector,K as themeSetter,ce as useLocalStorage,de as useMedia,se as useTheme,ae as useThemeSetter};
11
+ `}function ve({localStorageKey:e=q.localStorageKey,rootAttribute:t=q.rootAttribute}){return x(`script`,{dangerouslySetInnerHTML:{__html:_e({localStorageKey:e,rootAttribute:t})}})}const q={localStorageKey:G,rootAttribute:ie};function J(...e){return m(()=>e.filter(e=>e).join(` `),[e])}const ye=a(function({variant:e,fullWidth:t,size:n,className:r,component:i,isActive:a,...o},s){let c=m(()=>i??`button`,[i]),l=J(`charcoal-button`,r);return x(c,{...o,className:l,"data-variant":e,"data-size":n,"data-full-width":t,"data-active":a,ref:s})}),be=a(function({component:e,...t},n){let r=J(`charcoal-clickable`,t.className);return x(m(()=>e??`button`,[e]),{...t,ref:n,className:r})}),Y=a(function({variant:e=`Default`,size:t=`M`,icon:n,isActive:r=!1,component:i,...a},o){xe(t,n);let s=m(()=>i??`button`,[i]),c=J(`charcoal-icon-button`,a.className);return x(s,{...a,ref:o,className:c,"data-size":t,"data-active":r,"data-variant":e,children:x(`pixiv-icon`,{name:n})})});function xe(e,t){let n;switch(e){case`XS`:n=`16`;break;case`S`:case`M`:n=`24`;break}let r=/^\d*/u.exec(t);if(r==null)throw Error(`Invalid icon name`);let[i]=r;i!==n&&console.warn(`IconButton with size "${e}" expect icon size "${n}, but got "${i}"`)}const Se=e.createContext({name:void 0,selected:void 0,disabled:!1,readonly:!1,invalid:!1,onChange(){throw Error(`Cannot find onChange() handler. Perhaps you forgot to wrap with <RadioGroup> ?`)}});var Ce=s(a(function({onChange:e,invalid:t,className:n,...r},i){let a=c(t=>{let n=t.currentTarget;e?.(n.value)},[e]);return x(`input`,{className:J(`charcoal-radio-input`,n),ref:i,type:`radio`,onChange:a,"aria-invalid":t,...r})})),we=s(a(function({value:e,disabled:t=!1,children:n,...r},i){let{name:a,selected:o,disabled:s,readonly:c,invalid:u,onChange:d}=l(Se),f=J(`charcoal-radio__label`,r.className);C(a!==void 0,`"name" is not Provided for <Radio>. Perhaps you forgot to wrap with <RadioGroup> ?`);let p=e===o,m=t||s,h=c&&!p;return S(`label`,{"aria-disabled":m||h,className:f,children:[x(Ce,{name:a,value:e,checked:p,"aria-invalid":u,onChange:d,disabled:m||h,ref:i}),n!=null&&x(`div`,{className:`charcoal-radio__label_div`,children:n})]})}));const Te=a(function({value:e,label:t,name:n,onChange:r,disabled:i,readonly:a,invalid:o,children:s,"aria-orientation":l=`vertical`,...u},d){let f=J(`charcoal-radio-group`,u.className),p=c(e=>{r(e)},[r]),h=m(()=>({name:n,selected:e,disabled:i??!1,readonly:a??!1,invalid:o??!1,onChange:p}),[i,p,o,n,a,e]);return x(Se.Provider,{value:h,children:x(`div`,{role:`radiogroup`,"aria-disabled":i,"aria-invalid":o,"aria-label":t,"aria-labelledby":u[`aria-labelledby`],"aria-orientation":l,className:f,ref:d,children:s})})}),Ee=i({name:void 0,selected:[],disabled:!1,readonly:!1,invalid:!1,onChange(){throw Error("Cannot find `onChange()` handler. Perhaps you forgot to wrap it with `<MultiSelectGroup />` ?")}}),X=e.forwardRef(function({name:t,scale:n,unsafeNonGuidelineScale:r,fixedSize:i,className:a,style:o,...s},c){let l=e.useMemo(()=>w({name:t,scale:n,unsafeNonGuidelineScale:r,fixedSize:i}),[t,n,r,i]);return x(`pixiv-icon`,{ref:c,name:t,scale:n,"unsafe-non-guideline-scale":r,"fixed-size":i,style:e.useMemo(()=>({...o,"--charcoal-icon-size":`${l}px`}),[l,o]),class:`charcoal-icon ${a||``}`.trim(),...s})});var De=s(a(function({value:e,disabled:t=!1,onChange:n,variant:r=`default`,className:i,children:a},o){let{name:s,selected:u,disabled:d,readonly:f,invalid:p,onChange:m}=l(Ee);C(s!==void 0,`"name" is not Provided for <MultiSelect>. Perhaps you forgot to wrap with <MultiSelectGroup> ?`);let h=u.includes(e),g=t||d||f,_=c(t=>{t.currentTarget instanceof HTMLInputElement&&(n&&n({value:e,selected:t.currentTarget.checked}),m({value:e,selected:t.currentTarget.checked}))},[n,m,e]);return S(`label`,{"aria-disabled":g,className:J(`charcoal-multi-select`,i),children:[x(`input`,{className:`charcoal-multi-select-input`,name:s,value:e,type:`checkbox`,checked:h,disabled:g,onChange:_,"data-overlay":r===`overlay`,"aria-invalid":p,ref:o}),x(`div`,{className:`charcoal-multi-select-overlay`,"data-overlay":r===`overlay`,"aria-invalid":p,"aria-hidden":!0,children:x(X,{name:`24/Check`,fixedSize:16})}),!!a&&x(`div`,{className:`charcoal-multi-select-label`,children:a})]})}));function Oe({className:e,style:t,name:n,label:r,selected:i,onChange:a,disabled:o=!1,readonly:s=!1,invalid:l=!1,children:u}){let d=c(e=>{let t=i.indexOf(e.value);e.selected?t<0&&a([...i,e.value]):t>=0&&a([...i.slice(0,t),...i.slice(t+1)])},[a,i]);return x(Ee.Provider,{value:{name:n,selected:Array.from(new Set(i)),disabled:o,readonly:s,invalid:l,onChange:d},children:x(`div`,{className:e,style:t,"aria-label":r,"data-testid":`SelectGroup`,children:u})})}const ke=a(function({onChange:e,className:t,...n},r){let i=c(t=>{let n=t.currentTarget;e?.(n.checked)},[e]);return x(`input`,{ref:r,className:J(`charcoal-switch-input`,t),type:`checkbox`,onChange:i,...n})}),Ae=e.memo(function({children:e,className:t,disabled:n,id:r,input:i}){return S(`label`,{htmlFor:r,className:J(`charcoal-switch__label`,t),"aria-disabled":n,children:[i,x(`div`,{className:`charcoal-switch__label_div`,children:e})]})});var je=s(a(function({children:e,onChange:t,disabled:n,className:r,id:i,...a},o){let s=T(i),c=e===void 0,l=x(ke,{...a,disabled:n,className:c?r:void 0,id:s,onChange:t,ref:o,role:`switch`,type:`checkbox`});return c?l:x(Ae,{className:r,disabled:n,id:s,input:l,children:e})}));const Me=e.forwardRef(function({style:e,className:t,label:n,required:r=!1,requiredText:i,subLabel:a,...o},s){return S(`div`,{style:e,className:J(`charcoal-field-label-root`,t),children:[x(`label`,{ref:s,className:`charcoal-field-label`,...o,children:n}),r&&x(`div`,{className:`charcoal-field-label-required-text`,children:i}),x(`div`,{className:`charcoal-field-label-sub-label`,children:x(`span`,{children:a})})]})});function Ne(...e){return t=>{for(let n of e)typeof n==`function`?n(t):n!==null&&(n.current=t)}}function Pe(e){return Array.from(e).length}function Fe(e,t){d(()=>{let n=e.current;if(n){let e=e=>{e.target!==t.current&&t.current?.focus()};return n.addEventListener(`click`,e),()=>{n.removeEventListener(`click`,e)}}})}function Z(e){return a(function({className:t,...n},r){return x(`div`,{className:J(e,t),ref:r,...n})})}const Ie=Z(`charcoal-text-field-assistive-text`),Le=e.forwardRef(function({assistiveText:e,className:t,disabled:n=!1,label:r=``,maxLength:i,onChange:a,prefix:o=null,required:s,requiredText:l,showCount:u=!1,showLabel:f=!1,subLabel:p,suffix:m=null,type:_=`text`,invalid:v,value:y,getCount:b=Pe,...C},w){let D=h(null),{visuallyHiddenProps:O}=E(),[k,A]=g(b(y??``)),j=c(e=>{let t=e.target.value,n=b(t);i!==void 0&&n>i||(A(n),a?.(t))},[b,i,a]);d(()=>{A(b(y??``))},[b,y]);let M=h(null);Fe(M,D);let N=T(C.id),P=T(),F=T(),I=e!=null&&e.length!==0;return S(`div`,{className:J(`charcoal-text-field-root`,t),"aria-disabled":n,children:[x(Me,{htmlFor:N,id:F,label:r,required:s,requiredText:l,subLabel:p,...f?{}:O}),S(`div`,{className:`charcoal-text-field-container`,"aria-disabled":n===!0?!0:void 0,"data-invalid":v===!0,ref:M,children:[o&&x(`div`,{className:`charcoal-text-field-prefix`,children:o}),x(`div`,{className:`charcoal-text-field-input-root`,children:x(`input`,{className:`charcoal-text-field-input`,"aria-describedby":I?P:void 0,"aria-invalid":v,"aria-labelledby":F,id:N,"data-invalid":v===!0,maxLength:i,onChange:j,disabled:n,ref:Ne(w,D),type:_,value:y,...C})}),(m||u)&&S(`div`,{className:`charcoal-text-field-suffix`,children:[m,u&&x(`span`,{className:`charcoal-text-field-line-counter`,children:i===void 0?k:`${k}/${i}`})]})]}),I&&x(Ie,{"data-invalid":v===!0,id:P,children:e})]})}),Re=a(function({onChange:e,className:t,value:n,showCount:r=!1,showLabel:i=!1,label:a=``,requiredText:o,subLabel:s,disabled:l=!1,required:u,assistiveText:p,maxLength:_,autoHeight:v=!1,rows:y=4,maxRows:b,invalid:C,getCount:w=Pe,defaultValue:D,imperativeRef:O,...k},A){let j=n===void 0,M=n??D?.toString()??``,[N,P]=g(y),[F,I]=g(w(M)),L=h(null),R=h(null);Fe(R,L);let{visuallyHiddenProps:ee}=E(),z=m(()=>v||b&&b>=0,[v,b]),te=J(`charcoal-text-area-root`,t),ne=p!=null&&p.length!==0,B=c(e=>{let t=(`${e.value}\n`.match(/\n/gu)?.length??0)||1,n=b!==void 0&&b>=1,r=y<=t?t:y;if(!n){P(r);return}P(Math.min(r,b))},[y,b]),V=c(e=>{let t=w(e.value);return j&&I(t),z&&B(e),t},[w,z,j,B]),H=c(t=>{let n=t.currentTarget.value,r=w(n);_!==void 0&&r>_||(V(t.currentTarget),e?.(n))},[w,_,e,V]);f(O,()=>({setValue:e=>{L.current!==null&&(L.current.value=e,V(L.current))},sync:()=>{L.current!==null&&V(L.current)}}),[V]);let U=T(k.id),W=T(),re=T();return d(()=>{j||I(w(M)),z&&L.current!==null&&B(L.current)},[j,M,w,z,L,B]),S(`div`,{className:te,"aria-disabled":l,children:[x(Me,{htmlFor:U,id:re,label:a,required:u,requiredText:o,subLabel:s,...i?{}:ee}),S(`div`,{className:`charcoal-text-area-container`,"aria-disabled":l===!0?`true`:void 0,"aria-invalid":C===!0,ref:R,style:{"--charcoal-text-area-rows":`${r?N+1:N}`},children:[x(`textarea`,{className:`charcoal-text-area-textarea`,"aria-describedby":ne?W:void 0,"aria-invalid":C,"aria-labelledby":re,id:U,maxLength:_,"data-no-bottom-padding":r,onChange:H,ref:Ne(A,L),rows:N,value:n,disabled:l,defaultValue:D,...k}),r&&x(`span`,{className:`charcoal-text-area-counter`,children:_===void 0?F:`${F}/${_}`})]}),ne&&x(Ie,{"data-invalid":C===!0,id:W,children:p})]})});function ze(t){let n=e.useRef(null);return e.useEffect(()=>{t&&(typeof t==`function`?t(n.current):t.current=n.current)}),n}const Be=a(function({size:e,bottomSheet:t,className:n,...r},i){let a=ze(i),{dialogProps:o}=A({role:`dialog`},a);return x(`div`,{className:J(`charcoal-modal-dialog`,n),role:o.role,"data-bottom-sheet":t,tabIndex:o.tabIndex,"aria-labelledby":o[`aria-labelledby`],onBlur:o.onBlur,"data-size":e,ref:a,...r})}),Ve=e.createContext(null);function He(e,t,n=!1){d(()=>{if(t&&e){let t=e.style.paddingRight,r=e.style.overflow;return e.style.paddingRight=`${window.innerWidth-e.clientWidth}px`,e.style.overflow=n?`clip`:`hidden`,()=>{e.style.paddingRight=t,e.style.overflow=r}}},[e,t,n])}function Ue(t,n,r){let{overlayProps:i,underlayProps:a}=N({...t,isOpen:n.isOpen,onClose:n.onClose,shouldCloseOnInteractOutside:()=>!1},r);return He(typeof document<`u`?document.body:null,n.isOpen,t.overflowClip),M(),e.useEffect(()=>{if(n.isOpen&&r.current)return j([r.current])},[n.isOpen,r]),{modalProps:i,underlayProps:a}}function We(){return typeof window<`u`}function Ge(){let[t,n]=e.useState(We()?window.innerWidth:null);return e.useEffect(()=>{let e=()=>{n(window.innerWidth)};return window.addEventListener(`resize`,e),()=>{window.removeEventListener(`resize`,e)}}),t}const Ke=a(function({children:t,zIndex:n=10,portalContainer:r,...i},a){let{title:o,size:s=`M`,bottomSheet:c=!1,isDismissable:l,onClose:u,className:d,isOpen:f=!1,closeButtonAriaLabel:p=`Close`}=i,m=I(a),{modalProps:h,underlayProps:g}=Ue({...i,isKeyboardDismissDisabled:l===void 0||l===!1},{onClose:u,isOpen:f},m),_=(Ge()??1/0)<744,v=_&&c!==!1,y=!_||c!==!0,b=k(f,{from:{transform:`translateY(100%)`,backgroundColor:`rgba(0, 0, 0, 0)`,overflow:`hidden`},enter:{transform:`translateY(0%)`,backgroundColor:`rgba(0, 0, 0, 0.4)`},update:{overflow:`auto`},leave:{transform:`translateY(100%)`,backgroundColor:`rgba(0, 0, 0, 0)`,overflow:`hidden`},config:v?{duration:400,easing:O.easeOutQuart}:{duration:0}}),C=e.useRef(null),w=e.useCallback(e=>{e.currentTarget===e.target&&u()},[u]);return b(({backgroundColor:e,overflow:i,transform:a},f)=>f&&x(F,{portalContainer:r,children:x(D.div,{className:`charcoal-modal-background`,ref:C,...g,style:v?{backgroundColor:e,overflow:i,zIndex:n}:{zIndex:n},"data-bottom-sheet":c,onClick:w,children:x(Ve.Provider,{value:C.current,children:x(qe,{ref:m,...h,style:v?{transform:a}:{},size:s,bottomSheet:c,className:d,children:S(Ye.Provider,{value:{titleProps:{},title:o,close:u,showDismiss:y,bottomSheet:c},children:[t,l===!0&&x(Xe,{"aria-label":p,onClick:u})]})})})})}))}),qe=D(Be);var Je=s(Ke);const Ye=e.createContext({titleProps:{},title:``,close:void 0,showDismiss:!0,bottomSheet:!1});function Xe(e){return x(Y,{className:`charcoal-modal-close-button`,size:`S`,icon:`24/Close`,type:`button`,...e})}function Ze(){let e=l(Ye);return x(`div`,{className:`charcoal-modal-header-root`,"data-bottom-sheet":e.bottomSheet,children:x(`div`,{className:`charcoal-modal-header-title`,children:e.title})})}const Qe=Z(`charcoal-modal-align`),$e=Z(`charcoal-modal-body`),et=Z(`charcoal-modal-buttons`);var tt=s(a(function({size:e=48,padding:t=16,transparent:n=!1,...r},i){let a=J(`charcoal-loading-spinner`,r.className);return x(`div`,{role:`progressbar`,style:{"--charcoal-loading-spinner-size":`${e}px`,"--charcoal-loading-spinner-padding":`${t}px`},"data-transparent":n,className:a,ref:i,children:x(nt,{})})}));const nt=a(function({once:e=!1},t){let n=h(null);return f(t,()=>({restart:()=>{n.current&&(n.current.dataset.resetAnimation=`true`,n.current.offsetWidth,delete n.current.dataset.resetAnimation)}})),x(`div`,{role:`presentation`,ref:n,"data-once":e,className:`charcoal-loading-spinner-icon`})}),rt=()=>null;function it(e){let t=h(null),n=e.popoverRef===void 0?t:e.popoverRef,{popoverProps:r,underlayProps:i}=L({triggerRef:e.triggerRef,popoverRef:n,containerPadding:16},{close:e.onClose,isOpen:e.isOpen,open:rt,setOpen:rt,toggle:rt});return He(l(Ve),e.isOpen),e.isOpen?S(F,{portalContainer:document.body,children:[x(`div`,{...i,...e.inertWorkaround?{"data-react-aria-top-layer":!0,onClick:e.onClose}:{},style:{position:`fixed`,zIndex:typeof r.style?.zIndex==`number`?r.style.zIndex-1:99999,inset:0}}),S(`div`,{...r,ref:n,className:`charcoal-popover`,children:[x(P,{onDismiss:()=>e.onClose()}),x(`div`,{tabIndex:0,onFocus:e.onClose}),e.children,x(`div`,{tabIndex:0,onFocus:e.onClose}),x(P,{onDismiss:()=>e.onClose()})]})]}):null}function at({children:e,...t}){let n=h(null);return d(()=>{t.isOpen&&n.current&&t.triggerRef.current&&(n.current.style.width=`${t.triggerRef.current.clientWidth}px`)},[t.triggerRef,t.isOpen]),d(()=>{if(t.isOpen)if(t.value!==void 0&&t.value!==``){let e=window.scrollY,n=window.scrollX;document.querySelector(`[data-key="${t.value.toString()}"]`)?.focus(),window.scrollTo(n,e)}else{let e=n.current?.querySelector(`[role='option']`);e instanceof HTMLElement&&e.focus()}},[t.value,t.isOpen]),x(it,{isOpen:t.isOpen,onClose:t.onClose,popoverRef:n,triggerRef:t.triggerRef,inertWorkaround:t.inertWorkaround,children:e})}function ot(t,n){let r=e.Children.toArray(t);for(let t=0;t<r.length;t++){let i=r[t];if(e.isValidElement(i)){if(`value`in i.props&&i.props.value===n&&`children`in i.props)return i.props.children;if(`children`in i.props){let e=ot(i.props.children,n);if(e!==void 0)return e}}}}const st=i({root:void 0,value:``,propsArray:[],setValue:e=>{}});function ct(t){let n=e.Children.toArray(t),r=[];for(let t=0;t<n.length;t++){let i=n[t];if(e.isValidElement(i)){let e=i.props;`value`in e&&typeof e.value==`string`&&r.push({disabled:e.disabled,value:e.value}),`children`in e&&e.children&&r.push(...ct(e.children))}}return r}function lt(e){let t=h(null),n=m(()=>ct(e.children),[e.children]);return x(`ul`,{className:`charcoal-menu-list`,ref:t,children:x(st.Provider,{value:{value:e.value??``,root:t,propsArray:n,setValue:t=>{e.onChange?.(t)}},children:e.children})})}function ut({onChange:e,showLabel:t=!1,selectRef:n,...r}){let i=h(null),[a,o]=g(!1),s=ot(r.children,r.value),l=m(()=>r.placeholder!==void 0&&s===void 0,[s,r.placeholder]),u=ct(r.children),d=m(()=>u.some(e=>e.value===r.value),[u,r.value]),{visuallyHiddenProps:f}=E(),p=c(t=>{e(t.target.value)},[e]),_=T(),v=T();return S(`div`,{className:J(`charcoal-dropdown-selector-root`,r.className),"aria-disabled":r.disabled,children:[x(Me,{id:_,label:r.label,required:r.required,requiredText:r.requiredText,subLabel:r.subLabel,...t?{}:f}),x(`div`,{...f,"aria-hidden":`true`,children:S(`select`,{name:r.name,value:r.value,onChange:p,tabIndex:-1,ref:n,children:[!d&&x(`option`,{value:r.value,children:r.value}),u.map(e=>x(`option`,{value:e.value,disabled:e.disabled,children:e.value},e.value))]})}),S(`button`,{className:`charcoal-dropdown-selector-button`,"aria-labelledby":_,"aria-invalid":r.invalid,"aria-describedby":r.assistiveText===void 0?void 0:v,disabled:r.disabled,onClick:()=>{r.disabled!==!0&&o(!0)},ref:i,type:`button`,"data-active":a,children:[x(`span`,{className:`charcoal-ui-dropdown-selector-text`,"data-placeholder":l,children:l?r.placeholder:s}),x(X,{className:`charcoal-ui-dropdown-selector-icon`,name:`16/Menu`})]}),a&&x(at,{isOpen:a,onClose:()=>o(!1),triggerRef:i,value:r.value,inertWorkaround:r.inertWorkaround,children:x(lt,{value:r.value,onChange:t=>{e(t),o(!1)},children:r.children})}),r.assistiveText!==void 0&&x(Ie,{"data-invalid":r.invalid===!0,id:v,children:r.assistiveText})]})}const dt=a(function({as:e,className:t,...n},r){return x(m(()=>e??`li`,[e]),{className:J(`charcoal-list-item`,t),ref:r,...n})});function ft(e,t){if(t.scrollHeight>t.clientHeight){let n=e.getBoundingClientRect(),r=t.getBoundingClientRect();n.bottom>r.bottom?t.scrollTo({top:t.scrollTop+n.bottom-r.bottom}):n.top<r.top&&t.scrollTo({top:t.scrollTop-(r.top-n.top)})}else pt(e)}function pt(e){let t=e.getBoundingClientRect();t.top>=0&&t.bottom<=(window.innerHeight||document.documentElement.clientHeight)||e.scrollIntoView({block:`nearest`})}function mt(e){let{setValue:t,root:n,propsArray:r}=l(st),i=c(()=>{e!==void 0&&t(e)},[e,t]);return[c(t=>{if(t.key===`Enter`)i();else if(t.key===`ArrowUp`||t.key===`ArrowDown`){let i=t.key===`ArrowDown`;if(t.preventDefault(),!r||e===void 0)return;let a=r.map(e=>e.value).filter(e=>e),o=a.indexOf(e);if(o===-1)return;for(let e=0;e<a.length;e++){let e=i?o+1>=a.length?a[0]:a[o+1]:o-1<0?a[a.length-1]:a[o-1],t=n?.current?.querySelector(`[data-key='${e}']`);if(t instanceof HTMLElement){if(t.ariaDisabled===`true`){o+=i?1:-1;continue}t.focus({preventScroll:!0}),n?.current?.parentElement&&ft(t,n.current.parentElement);break}}}},[i,r,e,n]),i]}const ht=a(function({className:e,value:t,disabled:n,...r},i){let[a,o]=mt(t);return x(dt,{...r,ref:i,"data-key":t,onKeyDown:a,onClick:n===!0?void 0:o,tabIndex:-1,"aria-disabled":n,role:`option`,children:r.children})});function gt(e){let{value:t}=l(st),n=e.value===t,{children:r,secondary:i,...a}=e,o=e.contentFullWidth?`charcoal-dropdown-selector-menu-fullwidth`:``;return x(ht,{...a,"aria-selected":n,children:S(`div`,{className:o,children:[S(`div`,{className:`charcoal-dropdown-selector-menu-item-container ${o}`,children:[n&&x(X,{className:`charcoal-dropdown-selector-menu-item-icon`,name:`16/Check`}),x(`span`,{className:`charcoal-dropdown-selector-menu-item ${o}`,"data-selected":n,children:r})]}),i&&x(`span`,{className:`charcoal-dropdown-selector-menu-secondary`,children:i})]})})}function _t(e){return S(`li`,{className:`charcoal-menu-item-group`,role:`presentation`,children:[x(`span`,{children:e.text}),x(`ul`,{role:`group`,children:e.children})]})}const vt=i(null),yt=({value:e,children:t})=>x(vt.Provider,{value:e,children:t}),bt=()=>{let e=l(vt);if(e===null)throw Error("`<RadioProvider>` is not likely mounted.");return e};var xt=s(a(function(e,t){let n=J(`charcoal-segmented-control`,e.className),r=m(()=>({...e,isDisabled:e.disabled,isReadOnly:e.readonly,isRequired:e.required,"aria-label":e.name}),[e]),i=z(r),{radioGroupProps:a}=ee(r,i),o=m(()=>e.data.map(e=>typeof e==`string`?{value:e,label:e}:e),[e.data]);return x(`div`,{ref:t,...a,className:n,"data-uniform-segment-width":e.uniformSegmentWidth,"data-full-width":e.fullWidth,children:x(yt,{value:i,children:o.map(t=>x(St,{value:t.value,disabled:t.disabled,uniformSegmentWidth:e.uniformSegmentWidth,children:t.label},t.value))})})}));const St=e=>{let t=bt(),n=h(null),{inputProps:r,isDisabled:i,isSelected:a}=R(m(()=>({value:e.value,isDisabled:e.disabled,children:e.children}),[e]),t,n);return S(`label`,{className:`charcoal-segmented-control-radio__label`,"aria-disabled":i||t.isReadOnly,"data-checked":a,"data-uniform-segment-width":e.uniformSegmentWidth,"data-full-width":e.fullWidth,children:[x(`input`,{className:`charcoal-segmented-control-radio__input`,...r,ref:n}),e.children]})};var Ct=s(a(function({onChange:e,checked:t,invalid:n,className:r,rounded:i,...a},o){let s=c(t=>{let n=t.currentTarget;e?.(n.checked)},[e]);return x(`input`,{className:J(`charcoal-checkbox-input`,r),ref:o,type:`checkbox`,onChange:s,"aria-invalid":n,checked:t,"data-rounded":i,...a})}));const wt=t.memo(function({className:e,children:t,input:n,id:r,disabled:i}){return S(`label`,{htmlFor:r,"aria-disabled":i,className:J(`charcoal-checkbox__label`,e),children:[n,x(`div`,{className:`charcoal-checkbox__label_div`,children:t})]})});var Tt=s(a(function({disabled:e,className:t,id:n,children:r,...i},a){let o=T(n),s=r===void 0,c=x(Ct,{...i,className:s?t:void 0,disabled:e,id:o,ref:a});return s?c:x(wt,{className:t,disabled:e,id:o,input:c,children:r})})),Et=s(a(function({component:e,label:t,translatedLabel:n,bgColor:r=`#7ACCB1`,bgImage:i,size:a=`M`,status:o=`default`,disabled:s,"aria-disabled":c,...l},u){let d=I(u),f=n!==void 0&&n.length>0,p=J(`charcoal-tag-item`,`charcoal-tag-item__bg`,l.className),h=i!==void 0&&i.length>0?`image`:`color`,g=h===`color`?r:`url(${i??``})`,_=m(()=>e??`a`,[e]),v=_===`button`,{linkProps:y}=V({isDisabled:s,elementType:typeof _==`string`?_:`a`},d),b=v?{disabled:s,"aria-disabled":c}:y;return S(_,{...l,...b,ref:d,className:p,"data-state":o,"data-bg-variant":h,"data-size":f?`M`:a,style:{"--charcoal-tag-item-bg":g},children:[S(`div`,{className:`charcoal-tag-item__label`,"data-has-translate":f,children:[f&&x(`span`,{className:`charcoal-tag-item__label__translated`,children:n}),x(`span`,{className:`charcoal-tag-item__label__text`,"data-has-translate":f,children:t})]}),o===`active`&&x(X,{name:`16/Remove`})]})}));function Dt({children:e,context:t=`section`,className:n}){return S(`div`,{className:J(`charcoal-hint-text`,n),"data-context":t,children:[x(`div`,{className:`charcoal-hint-text-icon`,children:x(X,{name:`16/Info`})}),x(`p`,{className:`charcoal-hint-text-message`,children:e})]})}const Ot=(e,t,n)=>{if(!e)return;let r=t??jt(n);if(r)return r},kt=e=>o(e)&&!!e.props.children,At=e=>e==null||typeof e==`boolean`||JSON.stringify(e)===`{}`?``:e.toString(),jt=e=>!Array.isArray(e)&&!o(e)?At(e):n.toArray(e).reduce((e,t)=>{let n=``;return n=o(t)&&kt(t)?jt(t.props.children):o(t)&&!kt(t)?``:At(t),e.concat(n)},``);function Mt(e){"use memo";let t=H(32),n,r,i,a,o,s,c,l;t[0]===e?(n=t[1],r=t[2],i=t[3],a=t[4],o=t[5],s=t[6],c=t[7],l=t[8]):({lineHeight:r,lineLimit:a,children:n,title:l,hyphens:o,showTooltip:s,useNowrap:c,...i}=e,t[0]=e,t[1]=n,t[2]=r,t[3]=i,t[4]=a,t[5]=o,t[6]=s,t[7]=c,t[8]=l);let u=a===void 0?1:a,d=o===void 0?`auto`:o,f=s===void 0?!0:s,p=c===void 0?!1:c,m;t[9]!==n||t[10]!==f||t[11]!==l?(m=Ot(f,l,n),t[9]=n,t[10]=f,t[11]=l,t[12]=m):m=t[12];let h=m,g=J(`charcoal-text-ellipsis`,i.className),_=r!==void 0,v;t[13]===p?v=t[14]:(v=p?{"data-use-nowrap":p}:{},t[13]=p,t[14]=v);let y;t[15]!==_||t[16]!==r?(y=_&&{"--charcoal-text-ellipsis-line-height":`${r}px`},t[15]=_,t[16]=r,t[17]=y):y=t[17];let b;t[18]!==d||t[19]!==u||t[20]!==i.style||t[21]!==y?(b={...y,"--charcoal-text-ellipsis-line-limit":u,hyphens:d,...i.style},t[18]=d,t[19]=u,t[20]=i.style,t[21]=y,t[22]=b):b=t[22];let S=b,C;return t[23]!==n||t[24]!==g||t[25]!==h||t[26]!==_||t[27]!==u||t[28]!==i||t[29]!==v||t[30]!==S?(C=x(`div`,{...i,className:g,"data-line-limit":u,"data-has-line-height":_,...v,style:S,title:h,children:n}),t[23]=n,t[24]=g,t[25]=h,t[26]=_,t[27]=u,t[28]=i,t[29]=v,t[30]=S,t[31]=C):C=t[31],C}function Nt(e,t,n){"use memo";let r=H(8);if(r[0]!==`ba14feb6736cfb4c0d0d38e25b9e21619705224ad19f5dc886004a78f422b93d`){for(let e=0;e<8;e+=1)r[e]=Symbol.for(`react.memo_cache_sentinel`);r[0]=`ba14feb6736cfb4c0d0d38e25b9e21619705224ad19f5dc886004a78f422b93d`}let i=n===void 0?7:n;process.env.NODE_ENV!==`production`&&(C((e|0)===e,`\`page\` must be integer (${e})`),C((t|0)===t,`\`pageCount\` must be integer (${t})`),C(i===5||i===7,`\`pageRangeDisplayed\` must be 5 or 7 (${i})`));let a=Math.min(t,Math.max(e+Math.floor(i/2),i)),o;if(a<=i){let e;r[1]===a?e=r[2]:(e=Array.from({length:1+a-1},Pt),r[1]=a,r[2]=e),o=e}else{let e=a-(i-1)+2,t;if(r[3]!==e||r[4]!==a){let n;r[6]===e?n=r[7]:(n=(t,n)=>e+n,r[6]=e,r[7]=n),t=[1,`...`,...Array.from({length:1+a-e},n)],r[3]=e,r[4]=a,r[5]=t}else t=r[5];o=t}let s=o;return u(s),s}function Pt(e,t){return 1+t}const Ft=i(null);function It(){let e=l(Ft);if(e==null)throw Error(`Pagination components must be used within a Pagination component`);return e}function Lt(e){"use memo";let t=H(15),{direction:n,ariaLabel:r}=e,{page:i,pageCount:a,size:o,isLinkMode:s,makeUrl:c,LinkComponent:l,makeClickHandler:u,linkProps:d}=It(),f=n===`prev`,p=f?Math.max(1,i-1):Math.min(a,i+1),m=f?i<=1:i>=a,h=J(`charcoal-pagination-nav-button`,d?.className),g=f?`24/Prev`:`24/Next`,_=m||void 0,v;t[0]!==l||t[1]!==m||t[2]!==s||t[3]!==d||t[4]!==u||t[5]!==c||t[6]!==h||t[7]!==p?(v=s&&c?{component:l,href:c(p),"aria-disabled":m,...d,className:h}:{disabled:m,onClick:u(p),className:h},t[0]=l,t[1]=m,t[2]=s,t[3]=d,t[4]=u,t[5]=c,t[6]=h,t[7]=p,t[8]=v):v=t[8];let y;return t[9]!==r||t[10]!==o||t[11]!==g||t[12]!==_||t[13]!==v?(y=x(Y,{icon:g,size:o,"data-hidden":_,"aria-label":r,...v}),t[9]=r,t[10]=o,t[11]=g,t[12]=_,t[13]=v,t[14]=y):y=t[14],y}function Rt(e){"use memo";let t=H(19),{value:n}=e,{page:r,size:i,isLinkMode:a,makeUrl:o,LinkComponent:s,makeClickHandler:c,linkProps:l}=It(),u=J(`charcoal-pagination-button`,l?.className);if(n===`...`){let e;return t[0]===i?e=t[1]:(e=x(Y,{icon:`24/Dot`,size:i,disabled:!0,className:`charcoal-pagination-spacer`,"aria-hidden":!0}),t[0]=i,t[1]=e),e}if(n===r){let e;return t[2]===n?e=t[3]:(e=x(`span`,{className:`charcoal-pagination-button`,"aria-current":`page`,children:n}),t[2]=n,t[3]=e),e}if(typeof n!=`number`)return null;if(a&&o){let e;t[4]!==o||t[5]!==n?(e=o(n),t[4]=o,t[5]=n,t[6]=e):e=t[6];let r;return t[7]!==s||t[8]!==l||t[9]!==u||t[10]!==e||t[11]!==n?(r=x(s,{href:e,...l,className:u,children:n}),t[7]=s,t[8]=l,t[9]=u,t[10]=e,t[11]=n,t[12]=r):r=t[12],r}let d;t[13]!==c||t[14]!==n?(d=c(n),t[13]=c,t[14]=n,t[15]=d):d=t[15];let f;return t[16]!==d||t[17]!==n?(f=x(`button`,{type:`button`,className:`charcoal-pagination-button`,onClick:d,children:n}),t[16]=d,t[17]=n,t[18]=f):f=t[18],f}function zt(e){"use memo";let t=H(40),n,r,i,a,o,s,c,l,u,d,f,p;t[0]===e?(n=t[1],r=t[2],i=t[3],a=t[4],o=t[5],s=t[6],c=t[7],l=t[8],u=t[9],d=t[10],f=t[11],p=t[12]):({page:s,pageCount:c,pageRangeDisplayed:l,size:u,onChange:o,makeUrl:i,component:d,linkProps:r,className:n,ariaLabelNext:f,ariaLabelPrev:p,...a}=e,t[0]=e,t[1]=n,t[2]=r,t[3]=i,t[4]=a,t[5]=o,t[6]=s,t[7]=c,t[8]=l,t[9]=u,t[10]=d,t[11]=f,t[12]=p);let m=u===void 0?`M`:u,h=d===void 0?`a`:d,g=f===void 0?`Next`:f,_=p===void 0?`Previous`:p,v=Nt(s,c,l),y=i!==void 0,b;t[13]===o?b=t[14]:(b=e=>()=>o?.(e),t[13]=o,t[14]=b);let C=b,w=J(`charcoal-pagination`,n),T;t[15]!==h||t[16]!==y||t[17]!==r||t[18]!==C||t[19]!==i||t[20]!==s||t[21]!==c||t[22]!==m?(T={page:s,pageCount:c,size:m,isLinkMode:y,makeUrl:i,LinkComponent:h,makeClickHandler:C,linkProps:r},t[15]=h,t[16]=y,t[17]=r,t[18]=C,t[19]=i,t[20]=s,t[21]=c,t[22]=m,t[23]=T):T=t[23];let E=T,D;t[24]===_?D=t[25]:(D=x(Lt,{direction:`prev`,ariaLabel:_}),t[24]=_,t[25]=D);let O;t[26]===v?O=t[27]:(O=v.map(Bt),t[26]=v,t[27]=O);let k;t[28]===g?k=t[29]:(k=x(Lt,{direction:`next`,ariaLabel:g}),t[28]=g,t[29]=k);let A;t[30]!==w||t[31]!==a||t[32]!==m||t[33]!==k||t[34]!==D||t[35]!==O?(A=S(`nav`,{"data-size":m,"aria-label":`Pagination`,...a,className:w,children:[D,O,k]}),t[30]=w,t[31]=a,t[32]=m,t[33]=k,t[34]=D,t[35]=O,t[36]=A):A=t[36];let j;return t[37]!==A||t[38]!==E?(j=x(Ft.Provider,{value:E,children:A}),t[37]=A,t[38]=E,t[39]=j):j=t[39],j}function Bt(e){return x(Rt,{value:e},e)}const Q=new Map;function Vt(e,t){if(typeof window>`u`||typeof IntersectionObserver>`u`)return()=>void 0;let n=e.parentElement;if(!n)return()=>void 0;let r=Q.get(n);if(!r){let e=new Map;r={observer:new IntersectionObserver(t=>{for(let n of t)n.isIntersecting&&e.get(n.target)?.()},{root:n,rootMargin:`0px -50% 0px -50%`,threshold:0}),callbacks:e},Q.set(n,r)}return r.callbacks.set(e,t),r.observer.observe(e),()=>{let t=Q.get(n);t&&(t.callbacks.delete(e),t.observer.unobserve(e),t.callbacks.size===0&&(t.observer.disconnect(),Q.delete(n)))}}let Ht=null;const $=new Map;function Ut(){return typeof window>`u`||typeof ResizeObserver>`u`?null:(Ht||=new ResizeObserver(e=>{for(let t of e)$.get(t.target)?.()}),Ht)}function Wt(e,t){let n=Ut();return n?($.set(e,t),n.observe(e),()=>{$.delete(e),n.unobserve(e),$.size===0&&(n.disconnect(),Ht=null)}):()=>void 0}const Gt=({index:e,store:t,onResize:n,children:r})=>{let i=h(null);return d(()=>{let n=i.current;if(n)return Vt(n,()=>t.dispatch({type:`setActive`,index:e}))},[e,t]),d(()=>{let n=t.getSnapshot().scroll?.nonce??0;return t.subscribe(()=>{let r=t.getSnapshot().scroll;!r||r.index!==e||r.nonce===n||(n=r.nonce,i.current?.scrollIntoView({behavior:`smooth`,inline:`center`,block:`nearest`}))})},[e,t]),d(()=>{let e=i.current;if(e)return Wt(e,n)},[n]),x(`div`,{ref:i,className:`charcoal-carousel__item`,children:r})};function Kt(e,t){let n=t,r=new Set;return{dispatch(t){n=e(n,t);for(let e of r)e()},subscribe(e){return r.add(e),()=>{r.delete(e)}},getSnapshot:()=>n}}const qt={activeIndex:0,canPrev:!1,canNext:!1,scroll:null},Jt=(e,t)=>{switch(t.type){case`setActive`:return e.activeIndex===t.index?e:{...e,activeIndex:t.index};case`setScrollState`:return e.canPrev===t.canPrev&&e.canNext===t.canNext?e:{...e,canPrev:t.canPrev,canNext:t.canNext};case`requestScroll`:return{...e,scroll:{index:t.index,nonce:(e.scroll?.nonce??0)+1}}}};function Yt(){return Kt(Jt,qt)}const Xt=typeof window<`u`?p:d,Zt=[`pointerdown`,`wheel`,`touchstart`];function Qt(e,t,n,r){let{align:i,offset:a,scrollStep:o,onScroll:s,onResize:l,onScrollStateChange:u}=r,f=h(!0),p=h({onScroll:s,onResize:l,onScrollStateChange:u});d(()=>{p.current={onScroll:s,onResize:l,onScrollStateChange:u}});let m=h(null),g=c(()=>{let n=e.current;if(!n)return;let{scrollLeft:r,scrollWidth:i,clientWidth:a}=n,o=r>1,s=r<i-a-1;t.dispatch({type:`setScrollState`,canPrev:o,canNext:s});let c=o||s;m.current!==c&&(m.current=c,p.current.onScrollStateChange?.(c))},[e,t]),_=c(()=>{let t=e.current;if(!t||!f.current)return;let n=t.scrollWidth-t.clientWidth,r=a;switch(i){case`center`:r=n/2+a;break;case`right`:r=n+a;break}t.scrollLeft=Math.max(0,Math.min(r,n))},[e,i,a]);Xt(()=>{let t=e.current;if(!t)return;g();let n=()=>{g(),p.current.onScroll?.(t.scrollLeft)};return t.addEventListener(`scroll`,n,{passive:!0}),()=>t.removeEventListener(`scroll`,n)},[e,g,n]),Xt(()=>{let t=e.current;if(!t||typeof ResizeObserver>`u`)return;let n=new ResizeObserver(()=>{_(),g(),p.current.onResize?.(t.clientWidth)});return n.observe(t),()=>n.disconnect()},[e,_,g]),Xt(()=>{f.current=!0,_(),g();let t=e.current;if(!t)return;let n=()=>{f.current=!1};for(let e of Zt)t.addEventListener(e,n,!0);return()=>{for(let e of Zt)t.removeEventListener(e,n,!0)}},[e,_,g,n]);let v=c(()=>{_(),g()},[_,g]),y=c(()=>{f.current=!0,_(),g()},[_,g]);return{scrollByStep:c(t=>{let n=e.current;if(!n)return;f.current=!1;let{clientWidth:r,scrollWidth:i,scrollLeft:a}=n,s=typeof o==`function`?o({clientWidth:r,scrollWidth:i,scrollLeft:a,direction:t}):r*o;n.scrollBy({left:t===`next`?s:-s,behavior:`smooth`})},[e,o]),onItemResize:v,resetScroll:y}}const $t=()=>qt,en={prev:`24/Prev`,next:`24/Next`},tn=({direction:e,canScroll:t,onScroll:n})=>{let r=c(()=>{n(e)},[n,e]);return x(Y,{variant:`Overlay`,size:`S`,icon:en[e],"aria-label":e===`prev`?`Previous`:`Next`,disabled:!t,onClick:r,className:`charcoal-carousel__navigation__item`,"data-direction":e,"data-hidden":!t})},nn=({index:e,isActive:t,onSelect:n})=>{let r=c(()=>{n(e)},[n,e]);return x(`button`,{className:`charcoal-carousel__indicator__item`,"data-active":t,"aria-current":t||void 0,"aria-label":`Go to slide ${e+1}`,onClick:r})},rn=a(function({size:e=`M`,navigationButtons:t,indicator:n,hasGradient:r=!1,fullWidth:i=!1,scrollStep:a=.75,scrollSnap:o,onScroll:s,onResize:l,onScrollStateChange:u,defaultScroll:{align:d=`left`,offset:p=0}={},...m},v){let y=J(`charcoal-carousel`,m.className),b=t??e===`M`,C=n??e===`S`,w=o?.type??(e===`S`?`mandatory`:`none`),T=o?.align??`center`,E=h(null),[D]=g(Yt),{scrollByStep:O,onItemResize:k,resetScroll:A}=Qt(E,D,m.items.length,{align:d,offset:p,scrollStep:a,onScroll:s,onResize:l,onScrollStateChange:u});f(v,()=>({resetScroll:A}),[A]);let{activeIndex:j,canPrev:M,canNext:N}=_(D.subscribe,D.getSnapshot,$t),P=c(e=>D.dispatch({type:`requestScroll`,index:e}),[D]),{keyboardProps:F}=B({onKeyDown:e=>{e.key===`ArrowRight`?(e.preventDefault(),O(`next`)):e.key===`ArrowLeft`?(e.preventDefault(),O(`prev`)):e.continuePropagation()}}),{focusProps:I,isFocusVisible:L}=ne();return S(`div`,{className:y,"data-size":e,"data-has-gradient":r,"data-full-width":i,"data-indicator":C,"data-scroll-snap-type":w,"data-scroll-snap-align":T,"data-can-prev":M,"data-can-next":N,role:`region`,"aria-roledescription":`carousel`,"aria-label":`Carousel`,children:[S(`div`,{className:`charcoal-carousel__viewport`,children:[x(`div`,{...te(I,F),ref:E,className:`charcoal-carousel__scroller`,tabIndex:0,"data-focus-visible":L||void 0,children:m.items.map((e,t)=>x(Gt,{index:t,store:D,onResize:k,children:e.children},e.id))}),S(`div`,{className:`charcoal-carousel__navigation`,"data-visible":b,"aria-hidden":!b,children:[x(tn,{direction:`prev`,canScroll:M,onScroll:O}),x(tn,{direction:`next`,canScroll:N,onScroll:O})]})]}),x(`div`,{className:`charcoal-carousel__indicator`,"data-visible":C,"aria-hidden":!C,children:m.items.map((e,t)=>x(nn,{index:t,isActive:t===j,onSelect:P},e.id))})]})});rn.displayName=`Carousel`;var an=s(rn);export{ye as Button,an as Carousel,re as CharcoalProvider,Tt as Checkbox,be as Clickable,gt as DropdownMenuItem,ut as DropdownSelector,Dt as HintText,X as Icon,Y as IconButton,tt as LoadingSpinner,nt as LoadingSpinnerIcon,ht as MenuItem,_t as MenuItemGroup,Je as Modal,Qe as ModalAlign,$e as ModalBody,et as ModalButtons,Xe as ModalCloseButton,Ze as ModalHeader,De as MultiSelect,Oe as MultiSelectGroup,b as OverlayProvider,zt as Pagination,we as Radio,Te as RadioGroup,W as SSRProvider,xt as SegmentedControl,ve as SetThemeScript,je as Switch,Et as TagItem,Re as TextArea,Mt as TextEllipsis,Le as TextField,de as getThemeSync,_e as makeSetThemeScriptCode,le as prefersColorScheme,ce as themeSelector,oe as themeSetter,pe as useLocalStorage,ge as useMedia,fe as useTheme,ue as useThemeSetter};
12
12
  //# sourceMappingURL=index.js.map