@startdownnotez404/ui 1.0.0 → 1.3.5

package/dist/chunk-RXBQ7KXF.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/elemental/Image/src/MuiImageList/MuiImageList.tsx","../src/components/elemental/Image/src/Cropper/Cropper.tsx","../src/components/elemental/Image/src/Cropper/theme.ts","../src/components/elemental/Image/src/Cropper/layout/CropperLayout.tsx","../src/components/elemental/Image/src/Cropper/sections/CropperSourceSection.tsx","../src/components/elemental/Image/src/Cropper/sections/CropperControlsSection.tsx","../src/components/elemental/Image/src/Cropper/sections/CropperActionSection.tsx","../src/components/elemental/Image/src/Cropper/sections/CropperFileSelector.tsx","../src/components/elemental/Image/src/Cropper/hooks/useCropperState.ts"],"sourcesContent":["import ImageList from '@mui/material/ImageList';\nimport ImageListItem from '@mui/material/ImageListItem';\n\n/**\n * Mui compnent for ImageList\n * \n * [Doc](https://mui.com/material-ui/react-image-list/)\n */\nconst MuiImageList = ({imageList,cols=3,rowHeight=164,width='100%',height='auto'}: {\n        imageList: {\n                id: string | number;\n                url: string; \n                title?: string;\n        }[];\n        cols?: number; \n        rowHeight?: number;\n        width?: number | string;\n        height?: number | string;\n}) => {\n        return (\n                <ImageList sx={{ width, height }} cols={cols} rowHeight={rowHeight}>\n                        {imageList.map((item) => (\n                                <ImageListItem key={item.id}>\n                                        <img\n                                                src={`${item.url}?w=${rowHeight * 2}&h=${rowHeight * 2}&fit=crop&auto=format`}\n                                                alt={item.title??\"\"}\n                                                loading=\"lazy\"\n                                                width={rowHeight} height={rowHeight}\n                                                style={{objectFit: 'cover'}}\n                                        />\n                                </ImageListItem>\n                        ))}\n                </ImageList>\n        )\n}\n\nexport default MuiImageList\n","import 'react-image-crop/dist/ReactCrop.css';\nimport CropperLayout from './layout/CropperLayout';\nimport CropperSourceSection from './sections/CropperSourceSection';\nimport CropperControlsSection from './sections/CropperControlsSection';\nimport CropperActionSection from './sections/CropperActionSection';\nimport CropperFileSelector from './sections/CropperFileSelector';\nimport { useCropperState } from './hooks/useCropperState';\nimport type { CropperProps } from './types';\n\nconst Cropper: React.FC<CropperProps> = ({\n  blobUrl,\n  onSave,\n  setImgNull,\n  onClear, // optional parent callback when the image is removed\n  circularCrop = false,\n  defaultRatio,\n  resizeCropEnabled = true,\n  cropConfig,\n  PreviewRenderer,\n  footerExtra,\n  showFileSelector = false,\n  fileSelectorAccept = 'image/*',\n  fileSelectorButtonLabel = 'Select Image',\n  onFileSelect,\n}) => {\n  const {\n    imageRef,\n    canvasRef,\n    activeBlobUrl,\n    crop,\n    setCrop,\n    completedCrop,\n    setCompletedCrop,\n    scale,\n    setScale,\n    rotate,\n    setRotate,\n    onImageLoad,\n    handleSave,\n    handleClear,\n    handleResetTransforms,\n  } = useCropperState({\n    blobUrl,\n    onSave,\n    setImgNull,\n    circularCrop,\n    defaultRatio,\n    cropConfig,\n  });\n\n  return (\n    <CropperLayout\n      left={(\n        <CropperSourceSection\n          activeBlobUrl={activeBlobUrl}\n          crop={crop}\n          setCrop={setCrop}\n          setCompletedCrop={setCompletedCrop}\n          circularCrop={circularCrop}\n          defaultRatio={defaultRatio}\n          resizeCropEnabled={resizeCropEnabled}\n          rotate={rotate}\n          scale={scale}\n          imageRef={imageRef}\n          onImageLoad={onImageLoad}\n        />\n      )}\n      right={(\n        <CropperControlsSection\n          PreviewRenderer={PreviewRenderer}\n          canvasRef={canvasRef}\n          rotate={rotate}\n          setRotate={setRotate}\n          scale={scale}\n          setScale={setScale}\n        />\n      )}\n      leftFooter={(\n        <>\n          {footerExtra}\n          {showFileSelector && (\n            <CropperFileSelector\n              accept={fileSelectorAccept}\n              buttonLabel={fileSelectorButtonLabel}\n              onPick={(f) => onFileSelect?.(f)}\n            />\n          )}\n        </>\n      )}\n      footer={(\n        <CropperActionSection\n          onSave={handleSave}\n          onResetTransforms={handleResetTransforms}\n          onClear={() => {\n            // clear internal cropper state and also notify parent if it wants to persist the removal\n            handleClear();\n            onClear?.();\n          }}\n          saveDisabled={!completedCrop || !activeBlobUrl}\n        />\n      )}\n    />\n  );\n};\n\nexport default Cropper;\nexport type { CropperProps };\n","import type { SxProps, Theme } from '@mui/material/styles'\n\n/**\n * Root-level CSS variable aliases for Cropper.\n * Children consume these vars; palette refs are declared only here.\n *\n * Also overrides react-image-crop public CSS vars (--rc-*) via cascade:\n * https://github.com/DominicTobias/react-image-crop#css-variables\n */\nexport const cropperRootSx: SxProps<Theme> = {\n  '--image-border-radius': 'var(--mui-shape-borderRadius)',\n  '--image-border': '2px solid var(--mui-palette-secondary-main)',\n  // react-image-crop selection theming\n  '--rc-border-color': 'var(--mui-palette-border-1)',\n  '--rc-focus-color': 'var(--mui-palette-primary-main)',\n  '--rc-drag-handle-bg-colour': 'var(--mui-palette-focus-1)',\n  \"& .ReactCrop__crop-selection:not(.ReactCrop--no-animate .ReactCrop__crop-selection)\": {\n    '--animated-dash-light-color': 'var(--mui-palette-border-1)',\n    '--animated-dash-dark-color': 'var(--mui-palette-grey-300)',\n    backgroundImage: `\n      linear-gradient(to right,var(--animated-dash-light-color) 50%,var(--animated-dash-dark-color) 50%),\n      linear-gradient(to right,var(--animated-dash-light-color) 50%,var(--animated-dash-dark-color) 50%),\n      linear-gradient(to bottom,var(--animated-dash-light-color) 50%,var(--animated-dash-dark-color) 50%),\n      linear-gradient(to bottom,var(--animated-dash-light-color) 50%,var(--animated-dash-dark-color) 50%)`,\n  },\n  [`& .ReactCrop__rule-of-thirds-vt:before, \n    .ReactCrop__rule-of-thirds-vt:after, \n    .ReactCrop__rule-of-thirds-hz:before, \n    .ReactCrop__rule-of-thirds-hz:after`]: {\n      background:\"#fff6\",\n    },\n}\n","import { Box } from '@/ele/Box';\nimport { cropperRootSx } from '../theme';\nimport { mergeSx } from '@/_utils/_func';\n\ninterface CropperLayoutProps {\n  left: React.ReactNode;\n  right: React.ReactNode;\n  leftFooter?: React.ReactNode; // content shown at bottom of the left column (e.g. file selector)\n  footer?: React.ReactNode; // bottom action/footer bar\n}\n\nexport default function CropperLayout({\n  left,\n  right,\n  leftFooter,\n  footer,\n}: CropperLayoutProps) {\n  return (\n    <Box sx={mergeSx({ display: 'flex', flexDirection: 'column', gap: 2, height: '100%' }, cropperRootSx)}>\n      <Box\n        sx={{\n          // stack children vertically on small screens, switch to two‑column grid at md\n          display: { xs: 'table-row-group', md: 'grid' },\n          flexDirection: { xs: 'column', md: undefined },\n          gridTemplateColumns: { xs: '1fr', md: '1fr 280px' },\n          gap: 2,\n          alignItems: 'start',\n          minHeight: 0,\n          flex: '1 1 auto',\n          overflow: 'auto',\n        }}\n      >\n        <Box sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between', minHeight: 0, height: '100%', alignItems: 'center', width: '-webkit-fill-available' }}>\n          {left}\n          {leftFooter}\n        </Box>\n\n        <Box sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between', minHeight: 0, height: '100%', }}>\n          {right}\n          {footer}\n        </Box>\n      </Box>\n    </Box>\n  );\n}\n","import React from 'react'\nimport ReactCrop, { type Crop, type PixelCrop } from 'react-image-crop';\nimport { Box } from '@/ele/Box';\n\ninterface CropperSourceSectionProps {\n  activeBlobUrl: string;\n  crop: Crop;\n  setCrop: (crop: Crop) => void;\n  setCompletedCrop: (crop: PixelCrop) => void;\n  circularCrop: boolean;\n  defaultRatio?: number;\n  resizeCropEnabled: boolean;\n  rotate: number;\n  scale: number;\n  imageRef: React.RefObject<HTMLImageElement | null>;\n  onImageLoad: (e: React.SyntheticEvent<HTMLImageElement>) => void;\n}\n\nexport default function CropperSourceSection({\n  activeBlobUrl,\n  crop,\n  setCrop,\n  setCompletedCrop,\n  circularCrop,\n  defaultRatio,\n  resizeCropEnabled,\n  rotate,\n  scale,\n  imageRef,\n  onImageLoad,\n}: CropperSourceSectionProps) {\n  return (\n    <Box\n      sx={{\n        minHeight: 0,\n        overflow: 'hidden',\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n\n        \"& .ReactCrop\": {\n          borderRadius: 'var(--image-border-radius)',\n          border: 'var(--image-border)',\n\n        },\n      }}\n    >\n      {!!activeBlobUrl && (\n        <ReactCrop\n          crop={crop}\n          onChange={(nextCrop) => setCrop(nextCrop)}\n          onComplete={(nextCrop) => setCompletedCrop(nextCrop)}\n          circularCrop={circularCrop}\n          aspect={defaultRatio}\n          keepSelection\n          ruleOfThirds\n          disabled={!resizeCropEnabled}\n          style={{ maxWidth: '100%', maxHeight: 420, overflow: 'hidden' }}\n        >\n          <img\n            ref={imageRef}\n            alt=\"Crop source\"\n            src={activeBlobUrl}\n            style={{\n              display: 'block',\n              width: '100%',\n              maxWidth: '100%',\n              maxHeight: 420,\n              objectFit: 'contain',\n              transform: `rotate(${rotate}deg) scale(${scale})`,\n              transformOrigin: 'center center',\n            }}\n            onLoad={onImageLoad}\n          />\n        </ReactCrop>\n      )}\n    </Box>\n  );\n}\n","import React from 'react'\nimport { Box, Stack } from '@/ele/Box';\nimport { Slider } from '@/ele/Slider';\nimport { Typography } from '@/ele/Typography';\n\nconst scaleMarks = [\n  { value: 0.5, label: '0.5x' },\n  { value: 1, label: '1x' },\n  { value: 1.5, label: '1.5x' },\n  { value: 2, label: '2x' },\n  { value: 2.5, label: '2.5x' },\n  { value: 3, label: '3x' },\n];\n\nconst rotationMarks = [\n  { value: -180, label: '-180°' },\n  { value: -90, label: '-90°' },\n  { value: 0, label: '0°' },\n  { value: 90, label: '90°' },\n  { value: 180, label: '180°' },\n];\n\ninterface CropperControlsSectionProps {\n  PreviewRenderer?: React.ForwardRefExoticComponent<React.RefAttributes<HTMLCanvasElement>>;\n  canvasRef: React.RefObject<HTMLCanvasElement | null>;\n  rotate: number;\n  setRotate: (value: number) => void;\n  scale: number;\n  setScale: (value: number) => void;\n}\n\nexport default function CropperControlsSection({\n  PreviewRenderer,\n  canvasRef,\n  rotate,\n  setRotate,\n  scale,\n  setScale,\n}: CropperControlsSectionProps) {\n  return (\n    <Stack spacing={2} sx={{ minWidth: 0, px: 2 }}>\n      <Box display=\"flex\" justifyContent=\"center\">\n        {PreviewRenderer ? (\n          <PreviewRenderer ref={canvasRef} />\n        ) : (\n          <canvas\n            ref={canvasRef}\n            style={{ width: '100%', maxWidth: 260,\n              border: 'var(--image-border)',\n              borderRadius: 'var(--image-border-radius)',\n            }}\n          />\n        )}\n      </Box>\n\n      <Box>\n        <Typography variant=\"body2\" sx={{ mb: 1 }}>\n          Rotation ({rotate}°)\n        </Typography>\n        <Slider\n          min={-180}\n          max={180}\n          step={1}\n          marks={rotationMarks}\n          value={rotate}\n          onChange={(_, value) => setRotate(Array.isArray(value) ? value[0] : value)}\n        />\n      </Box>\n\n      <Box>\n        <Typography variant=\"body2\" sx={{ mb: 1 }}>\n          Resize scale ({scale.toFixed(2)}x)\n        </Typography>\n        <Slider\n          min={0.5}\n          max={3}\n          step={0.05}\n          marks={scaleMarks}\n          value={scale}\n          onChange={(_, value) => setScale(Array.isArray(value) ? value[0] : value)}\n        />\n      </Box>\n    </Stack>\n  );\n}\n","import { Box } from '@/ele/Box';\nimport { IconButton } from '@/ele/Button';\nimport { CheckIcon } from '@/icons/MuiIcon';\nimport { ClearIcon } from '@/icons/MuiIcon';\nimport { ReplayIcon } from '@/icons/MuiIcon';\n\ninterface CropperActionSectionProps {\n  onSave: () => void;\n  onResetTransforms: () => void;\n  onClear: () => void;\n  saveDisabled?: boolean;\n}\n\nexport default function CropperActionSection({\n  onSave,\n  onResetTransforms,\n  onClear,\n  saveDisabled,\n}: CropperActionSectionProps) {\n  return (\n    <Box\n      sx={{\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'flex-end',\n        gap: 1,\n        flexWrap: 'wrap',\n      }}\n    >\n      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexWrap: 'wrap' }}>\n        <IconButton onClick={onResetTransforms} title=\"Reset Scale & Rotation\">\n          <ReplayIcon fontSize=\"small\" />\n        </IconButton>\n\n        <IconButton onClick={onClear} color=\"error\" title=\"Remove image\">\n          <ClearIcon fontSize=\"small\" />\n        </IconButton>\n\n        <IconButton onClick={onSave} color=\"success\" disabled={saveDisabled} title=\"Save\">\n          <CheckIcon fontSize=\"small\" />\n        </IconButton>\n      </Box>\n    </Box>\n  );\n}\n","import React from 'react'\nimport { Box } from '@/ele/Box'\nimport { ReactDropzone } from '@/compound/FileUploader'\nimport PreviewableFile from '@/_utils/classes/PreviewableFile'\nimport type { DropzoneOptions } from 'react-dropzone'\n\ninterface Props {\n  accept?: string | DropzoneOptions['accept'];\n  buttonLabel?: string;\n  /** `null` means the dropzone was cleared */\n  onPick?: (file: File | null) => void;\n}\n\nexport default function CropperFileSelector({ accept = 'image/*', buttonLabel = 'Select Image', onPick }: Props) {\n  const [files, setFiles] = React.useState<PreviewableFile[]>([])\n  React.useEffect(() => {\n    // debug render lifecycle for troubleshooting recursive render\n    // console.debug('[CropperFileSelector] render — files.length=', files.length);\n  }, [files]);\n\n  const lastForwardedRef = React.useRef<string | null>(null);\n\n  React.useEffect(() => {\n    // when a file is removed from the dropzone, notify parent with null\n    if (!files.length) {\n      if (lastForwardedRef.current) {\n        lastForwardedRef.current = null;\n        onPick?.(null);\n      }\n      return;\n    }\n\n    const pf = files[0];\n    if (!pf.blobUrl) return;\n\n    // avoid forwarding the same file repeatedly (prevents recursion/loops)\n    if (lastForwardedRef.current === pf.blobUrl) {\n      return;\n    }\n\n    let cancelled = false;\n    (async () => {\n      try {\n        const res = await fetch(pf.blobUrl);\n        const blob = await res.blob();\n        const file = new File([blob], pf.filename || 'file', { type: pf.mimeType || undefined });\n        if (!cancelled) {\n          lastForwardedRef.current = pf.blobUrl;\n          onPick?.(file);\n        }\n      } catch {\n        // silently ignore fetch/conversion errors — leave dropzone in place\n      }\n    })();\n\n    return () => { cancelled = true };\n  }, [files, onPick]);\n\n  const acceptProp: DropzoneOptions['accept'] | undefined = typeof accept === 'string' ? { [accept]: [] } : accept\n\n  return (\n    <Box sx={{ display: 'flex', alignItems: 'center', pt:0, width: '100%', justifyContent: 'center' }}>\n      <ReactDropzone filesProps={[files, setFiles]} accept={acceptProp} maxFiles={1} dropzoneType=\"button\" label={buttonLabel} />\n    </Box>\n  )\n}\n","import React from 'react';\nimport {\n  centerCrop,\n  convertToPixelCrop,\n  makeAspectCrop,\n  type Crop,\n  type PixelCrop,\n} from 'react-image-crop';\n\ninterface UseCropperStateParams {\n  blobUrl: string;\n  onSave: (url: string) => void | Promise<void>;\n  setImgNull: () => void;\n  circularCrop: boolean;\n  defaultRatio?: number;\n  cropConfig?: Partial<Crop>;\n}\n\nfunction toRad(degrees: number) {\n  return (degrees * Math.PI) / 180;\n}\n\nfunction defaultCrop(): Crop {\n  return {\n    unit: '%',\n    x: 10,\n    y: 10,\n    width: 80,\n    height: 80,\n  };\n}\n\nfunction makeCenteredAspectCrop(mediaWidth: number, mediaHeight: number, aspect: number): Crop {\n  return centerCrop(\n    makeAspectCrop(\n      {\n        unit: '%',\n        width: 90,\n      },\n      aspect,\n      mediaWidth,\n      mediaHeight,\n    ),\n    mediaWidth,\n    mediaHeight,\n  );\n}\n\nfunction initialCrop(\n  mediaWidth: number,\n  mediaHeight: number,\n  defaultRatio: number | undefined,\n  cropConfig: Partial<Crop> | undefined,\n): Crop {\n  if (defaultRatio) {\n    return makeCenteredAspectCrop(mediaWidth, mediaHeight, defaultRatio);\n  }\n  return { ...defaultCrop(), ...cropConfig };\n}\n\nfunction drawPreviewToCanvas(\n  image: HTMLImageElement,\n  canvas: HTMLCanvasElement,\n  crop: PixelCrop,\n  scale: number,\n  rotate: number,\n  circularCrop?: boolean,\n) {\n  const context = canvas.getContext('2d');\n  if (!context) return;\n  if (!crop.width || !crop.height) return;\n\n  const scaleX = image.naturalWidth / image.width;\n  const scaleY = image.naturalHeight / image.height;\n  const pixelRatio = window.devicePixelRatio || 1;\n\n  canvas.width = Math.floor(crop.width * scaleX * pixelRatio);\n  canvas.height = Math.floor(crop.height * scaleY * pixelRatio);\n\n  context.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);\n  context.imageSmoothingQuality = 'high';\n  context.clearRect(0, 0, canvas.width, canvas.height);\n\n  const cropX = crop.x * scaleX;\n  const cropY = crop.y * scaleY;\n  const rotateRads = toRad(rotate);\n  const centerX = image.naturalWidth / 2;\n  const centerY = image.naturalHeight / 2;\n\n  context.save();\n  if (circularCrop) {\n    const width = crop.width * scaleX;\n    const height = crop.height * scaleY;\n    const radius = Math.min(width, height) / 2;\n    context.beginPath();\n    context.arc(width / 2, height / 2, radius, 0, Math.PI * 2);\n    context.closePath();\n    context.clip();\n  }\n\n  context.translate(-cropX, -cropY);\n  context.translate(centerX, centerY);\n  context.rotate(rotateRads);\n  context.scale(scale, scale);\n  context.translate(-centerX, -centerY);\n\n  context.drawImage(\n    image,\n    0,\n    0,\n    image.naturalWidth,\n    image.naturalHeight,\n    0,\n    0,\n    image.naturalWidth,\n    image.naturalHeight,\n  );\n  context.restore();\n}\n\nexport function useCropperState({\n  blobUrl,\n  onSave,\n  setImgNull,\n  circularCrop,\n  defaultRatio,\n  cropConfig,\n}: UseCropperStateParams) {\n  const imageRef = React.useRef<HTMLImageElement | null>(null);\n  const canvasRef = React.useRef<HTMLCanvasElement | null>(null);\n  const cropConfigRef = React.useRef(cropConfig);\n  cropConfigRef.current = cropConfig;\n  const scaleRef = React.useRef(1);\n  const rotateRef = React.useRef(0);\n\n  const [activeBlobUrl, setActiveBlobUrl] = React.useState(blobUrl);\n  const [crop, setCrop] = React.useState<Crop>({ ...defaultCrop(), ...cropConfig });\n  const [completedCrop, setCompletedCrop] = React.useState<PixelCrop>();\n  const [scale, setScale] = React.useState(1);\n  const [rotate, setRotate] = React.useState(0);\n  scaleRef.current = scale;\n  rotateRef.current = rotate;\n\n  const applyCropFromImage = React.useCallback((image: HTMLImageElement) => {\n    const { width, height } = image;\n    if (!width || !height) return;\n\n    const nextCrop = initialCrop(width, height, defaultRatio, cropConfigRef.current);\n    const pixelCrop = convertToPixelCrop(nextCrop, width, height);\n    if (!pixelCrop.width || !pixelCrop.height) return;\n\n    setCrop(nextCrop);\n    setCompletedCrop(pixelCrop);\n\n    const canvas = canvasRef.current;\n    if (canvas) {\n      drawPreviewToCanvas(\n        image,\n        canvas,\n        pixelCrop,\n        scaleRef.current,\n        rotateRef.current,\n        circularCrop,\n      );\n    }\n  }, [circularCrop, defaultRatio]);\n\n  React.useEffect(() => {\n    setActiveBlobUrl(blobUrl);\n  }, [blobUrl]);\n\n  React.useLayoutEffect(() => {\n    if (!activeBlobUrl) {\n      setCrop({ ...defaultCrop(), ...cropConfigRef.current });\n      setCompletedCrop(undefined);\n      setScale(1);\n      setRotate(0);\n      return;\n    }\n\n    setScale(1);\n    setRotate(0);\n\n    const tryApply = () => {\n      const image = imageRef.current;\n      if (image?.complete && image.width > 0 && image.height > 0) {\n        applyCropFromImage(image);\n        return true;\n      }\n      return false;\n    };\n\n    if (tryApply()) return;\n\n    const frame = requestAnimationFrame(() => {\n      tryApply();\n    });\n    return () => cancelAnimationFrame(frame);\n  }, [activeBlobUrl, applyCropFromImage]);\n\n  React.useEffect(() => {\n    if (!completedCrop || !imageRef.current || !canvasRef.current) return;\n    drawPreviewToCanvas(\n      imageRef.current,\n      canvasRef.current,\n      completedCrop,\n      scale,\n      rotate,\n      circularCrop,\n    );\n  }, [completedCrop, scale, rotate, circularCrop]);\n\n  const onImageLoad = (e: React.SyntheticEvent<HTMLImageElement>) => {\n    applyCropFromImage(e.currentTarget);\n  };\n\n  const handleCompletedCrop = (nextCrop: PixelCrop) => {\n    if (!nextCrop.width || !nextCrop.height) return;\n    setCompletedCrop(nextCrop);\n  };\n\n  const handleSave = async () => {\n    if (!completedCrop || !imageRef.current) return;\n\n    const previewCanvas = document.createElement('canvas');\n    drawPreviewToCanvas(\n      imageRef.current,\n      previewCanvas,\n      completedCrop,\n      scale,\n      rotate,\n      circularCrop,\n    );\n\n    const blob = await new Promise<Blob | null>((resolve) => {\n      previewCanvas.toBlob((nextBlob) => resolve(nextBlob), 'image/png');\n    });\n\n    if (!blob) return;\n    const resultUrl = URL.createObjectURL(blob);\n    await onSave(resultUrl);\n  };\n\n  const handleClear = () => {\n    setActiveBlobUrl('');\n    setImgNull();\n    imageRef.current = null;\n    const canvas = canvasRef.current;\n    if (canvas) {\n      const context = canvas.getContext('2d');\n      if (context) {\n        context.clearRect(0, 0, canvas.width, canvas.height);\n      }\n    }\n    setCrop({ ...defaultCrop(), ...cropConfigRef.current });\n    setScale(1);\n    setRotate(0);\n    setCompletedCrop(undefined);\n  };\n\n  const handleResetTransforms = () => {\n    setScale(1);\n    setRotate(0);\n  };\n\n  return {\n    imageRef,\n    canvasRef,\n    activeBlobUrl,\n    crop,\n    setCrop,\n    completedCrop,\n    setCompletedCrop: handleCompletedCrop,\n    scale,\n    setScale,\n    rotate,\n    setRotate,\n    onImageLoad,\n    handleSave,\n    handleClear,\n    handleResetTransforms,\n  };\n}\n"],"mappings":"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","names":["jsx","default","jsx","default","jsx","jsxs","default","jsx","jsxs","default","jsx","default","React","jsx","jsxs"]}

package/dist/chunk-S6EZVRZC.mjs

@@ -0,0 +1,161 @@
+// src/components/elemental/Box/src/BorderBox/BorderBox.tsx
+import { forwardRef } from "react";
+import Box from "@mui/material/Box";
+
+// src/_utils/_func/sx.ts
+function flattenSx(part) {
+  if (part == null || typeof part === "boolean") {
+    return [];
+  }
+  if (Array.isArray(part)) {
+    return part.flatMap(flattenSx);
+  }
+  if (typeof part === "function" || typeof part === "object") {
+    return [part];
+  }
+  return [];
+}
+function mergeSx(...parts) {
+  const list = parts.flatMap(flattenSx);
+  if (list.length === 0) {
+    return void 0;
+  }
+  if (list.length === 1) {
+    return list[0];
+  }
+  return list;
+}
+
+// src/components/elemental/Box/src/BorderBox/BorderBox.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var spanPx = 5;
+var fieldsetPx = 4;
+var BorderBox = forwardRef(({
+  title,
+  children,
+  pyPx = 8,
+  pxPx = 12,
+  error = false,
+  sx,
+  ...rest
+}, ref) => {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      component: "div",
+      ref,
+      style: {
+        "--border-radius": "var(--mui-shape-borderRadius)",
+        "--py": `${pyPx}px`,
+        "--px": `${pxPx}px`,
+        "--span-px": `${spanPx}px`,
+        "--fieldset-px": `${fieldsetPx}px`,
+        "--border-color-local": error ? "var(--mui-palette-error-main)" : "var(--mui-palette-border-1)",
+        "--color-content-local": error ? "var(--mui-palette-error-main)" : "var(--mui-palette-text-primary)",
+        "--color-local": error ? "var(--mui-palette-error-main)" : "var(--mui-palette-text-grey-1)",
+        "--hover-border-color-local": error ? "var(--mui-palette-error-dark)" : "var(--mui-palette-border-hover-1)",
+        minWidth: 0
+      },
+      sx: mergeSx(
+        {
+          // inputbase-root
+          display: "inline-flex",
+          flexDirection: "column",
+          position: "relative",
+          minWidth: 0,
+          padding: 0,
+          paddingTop: `var(--py)`,
+          paddingBottom: `var(--py)`,
+          // avoid title overlap
+          margin: 0,
+          border: 0,
+          verticalAlign: "top",
+          cursor: "auto",
+          "&:hover>div>fieldset": {
+            borderColor: "var(--hover-border-color-local)"
+          }
+        },
+        sx
+      ),
+      ...rest,
+      children: /* @__PURE__ */ jsxs(Box, { sx: {
+        // input
+        letterSpacing: "0.00938em",
+        boxSizing: "border-box",
+        position: "relative",
+        alignItems: "center",
+        display: "block",
+        borderRadius: "var(--border-radius)",
+        width: "100%"
+      }, children: [
+        /* @__PURE__ */ jsx(Box, { sx: {
+          paddingLeft: `var(--px)`,
+          paddingRight: `var(--px)`,
+          paddingTop: `var(--py)`,
+          paddingBottom: `var(--py)`,
+          fontWeight: 400,
+          fontSize: "1rem",
+          lineHeight: "1.4375em",
+          width: "-webkit-fill-available",
+          minHeight: "1rem",
+          color: "var(--color-content-local)"
+        }, children }),
+        /* @__PURE__ */ jsx(Box, { component: "fieldset", sx: {
+          textAlign: "left",
+          position: "absolute",
+          bottom: 0,
+          right: 0,
+          top: `calc(var(--py)*-1)`,
+          left: 0,
+          paddingLeft: "var(--fieldset-px)",
+          paddingRight: "var(--fieldset-px)",
+          margin: 0,
+          pointerEvents: "none",
+          borderRadius: "inherit",
+          border: "1px solid",
+          borderColor: "var(--border-color-local)",
+          overflow: "hidden",
+          minWidth: "0%"
+        }, children: /* @__PURE__ */ jsx(Box, { component: "legend", sx: {
+          float: "unset",
+          width: "auto",
+          overflow: "hidden",
+          display: "block",
+          padding: 0,
+          height: "1em",
+          visibility: "hidden",
+          maxWidth: "100%",
+          whiteSpace: "nowrap"
+        }, children: title && /* @__PURE__ */ jsx(Box, { component: "span", sx: {
+          paddingLeft: "var(--span-px)",
+          paddingRight: "var(--span-px)",
+          visibility: "visible",
+          fontSize: "0.7em",
+          lineHeight: "1.4375em",
+          letterSpacing: "0.00938em",
+          fontWeight: 400,
+          display: "block",
+          height: "100%",
+          fontFamily: "inherit",
+          textOverflow: "ellipsis",
+          color: "var(--color-local)"
+        }, children: title }) }) })
+      ] })
+    }
+  );
+});
+var BorderBox_default = BorderBox;
+
+// src/components/elemental/Box/src/index.ts
+import { default as default2 } from "@mui/material/Box";
+import { default as default3 } from "@mui/material/Stack";
+import { default as default4 } from "@mui/material/Grid";
+
+export {
+  mergeSx,
+  BorderBox_default,
+  default2 as default,
+  default3 as default2,
+  default4 as default3
+};
+//# sourceMappingURL=chunk-S6EZVRZC.mjs.map

package/dist/chunk-S6EZVRZC.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/elemental/Box/src/BorderBox/BorderBox.tsx","../src/_utils/_func/sx.ts","../src/components/elemental/Box/src/index.ts"],"sourcesContent":["import React, { forwardRef, } from 'react'\nimport Box, { type BoxProps} from '@mui/material/Box'\nimport { mergeSx } from '@/_utils/_func'\n\nconst spanPx = 5\nconst fieldsetPx = 4\n\ntype Props = {\n\tchildren: React.ReactNode, \n\ttitle?: string,\n\terror?: boolean,\n\tpyPx?: number,\n\tpxPx?: number,\n} & BoxProps\n/**\n * A Mui TextField like Box with a title and a border.\n * \n * Props options:\n * \n * @property {ReactNode} children - Whatever go inside the box.\n * @property {string} title - The left top title.\n * @property {string} error - change border-color to red.\n * @property {number} pyPx - padding top and bottom.\n * @property {number} pxPx - padding left and right.\n * @property {Record<string, unknown>} ...rest - Box props to the outer box.\n * @example\n * ### Example\n * ```js\n * const B = () => (\n * <BorderBox title=\"title\" error={false} ref={ref}>\n *  something inside\n * </BorderBox>)\n * ```\n */\nconst BorderBox = forwardRef<HTMLDivElement,Props>(({ \n\ttitle, children,pyPx=8,pxPx=12, error=false,\n  sx,\n\t...rest\n},ref) => {\n\t\n\treturn (\n\t\t<Box // control-root\n\t\tcomponent=\"div\"\n\t\tref={ref}\n\t\tstyle={{\n\t\t\t\"--border-radius\": \"var(--mui-shape-borderRadius)\",\n\t\t\t\"--py\": `${pyPx}px`,\n\t\t\t\"--px\": `${pxPx}px`,\n\t\t\t\"--span-px\": `${spanPx}px`,\n\t\t\t\"--fieldset-px\": `${fieldsetPx}px`,   \n\t\t\t\"--border-color-local\": error ? \"var(--mui-palette-error-main)\" : \"var(--mui-palette-border-1)\",\n\t\t\t\"--color-content-local\": error ? \"var(--mui-palette-error-main)\" : \"var(--mui-palette-text-primary)\",\n\t\t\t\"--color-local\": error ? \"var(--mui-palette-error-main)\" : \"var(--mui-palette-text-grey-1)\",\n\t\t\t\"--hover-border-color-local\": error ? \"var(--mui-palette-error-dark)\" : \"var(--mui-palette-border-hover-1)\",\n\t\t\tminWidth: 0,\n\t\t}}\n\t\tsx={mergeSx(\n\t\t\t{ // inputbase-root\n\t\t\tdisplay: 'inline-flex',\n\t\t\tflexDirection: 'column',\n\t\t\tposition: 'relative',\n\t\t\tminWidth: 0,\n\t\t\tpadding: 0, \n\t\t\tpaddingTop:`var(--py)`, paddingBottom:`var(--py)`, // avoid title overlap\n\t\t\tmargin: 0,\n\t\t\tborder: 0,\n\t\t\tverticalAlign: 'top',\n\t\t\tcursor: 'auto',\n\t\t\t\"&:hover>div>fieldset\": {\n\t\t\t\tborderColor:\"var(--hover-border-color-local)\",\n\t\t\t},\n\t\t},\n\t\t\tsx,\n\t\t)}\n\t\t{...rest}\n\t\t>\n\t\t\t<Box sx={{ // input\n\t\t\t\tletterSpacing: '0.00938em',\n\t\t\t\tboxSizing: 'border-box',\n\t\t\t\tposition: 'relative',\n\t\t\t\talignItems: 'center',\n\t\t\t\tdisplay: 'block',\n\t\t\t\tborderRadius:'var(--border-radius)',\n\t\t\t\twidth:\"100%\",\n\t\t\t}}>\n\t\t\t\t<Box sx={{\n\t\t\t\t\tpaddingLeft:`var(--px)`, paddingRight:`var(--px)`,\n\t\t\t\t\tpaddingTop:`var(--py)`, paddingBottom:`var(--py)`,\n\t\t\t\t\tfontWeight: 400,\n\t\t\t\t\tfontSize: '1rem',\n\t\t\t\t\tlineHeight: '1.4375em',\n\t\t\t\t\twidth:\"-webkit-fill-available\",\n\t\t\t\t\tminHeight:\"1rem\",\n\t\t\t\t\tcolor:\"var(--color-content-local)\",\n\t\t\t\t}} >{children}</Box>\n\t\t\t\t<Box component=\"fieldset\" sx={{\n\t\t\t\t\ttextAlign: 'left',\n\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\tbottom: 0,\n\t\t\t\t\tright: 0,\n\t\t\t\t\ttop: `calc(var(--py)*-1)`,\n\t\t\t\t\tleft: 0,\n\t\t\t\t\tpaddingLeft:\"var(--fieldset-px)\", paddingRight:\"var(--fieldset-px)\",\n\t\t\t\t\tmargin:0,\n\t\t\t\t\tpointerEvents: 'none',\n\t\t\t\t\tborderRadius: 'inherit',\n\t\t\t\t\tborder:\"1px solid\",\n\t\t\t\t\tborderColor:\"var(--border-color-local)\",\n\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\tminWidth: '0%',\n\t\t\t\t\t\n\t\t\t\t}}>\n\t\t\t\t\t<Box component=\"legend\" sx={{\n\t\t\t\t\t\tfloat: 'unset',\n\t\t\t\t\t\twidth: 'auto',\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\tdisplay: 'block',\n\t\t\t\t\t\tpadding: 0,\n\t\t\t\t\t\theight: \"1em\",\n\t\t\t\t\t\tvisibility: 'hidden',\n\t\t\t\t\t\tmaxWidth: '100%',\n\t\t\t\t\t\twhiteSpace: 'nowrap',\n\t\t\t\t\t}}>\n\t\t\t\t\t\t{title && <Box component=\"span\" sx={{\n\t\t\t\t\t\t\tpaddingLeft:\"var(--span-px)\", paddingRight:\"var(--span-px)\",\n\t\t\t\t\t\t\tvisibility: 'visible',\n\t\t\t\t\t\t\tfontSize: '0.7em',\n\t\t\t\t\t\t\tlineHeight: '1.4375em',\n\t\t\t\t\t\t\tletterSpacing: '0.00938em',\n\t\t\t\t\t\t\tfontWeight: 400,\n\t\t\t\t\t\t\tdisplay: 'block',\n\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\tfontFamily: 'inherit',\n\t\t\t\t\t\t\ttextOverflow: 'ellipsis',\n\t\t\t\t\t\t\tcolor:\"var(--color-local)\",\n\t\t\t\t\t\t}}>\n\t\t\t\t\t\t\t{title}\n\t\t\t\t\t\t</Box>}\n\t\t\t\t\t</Box>\n\t\t\t\t</Box>\n\t\t\t</Box>\n\t\t</Box>\n\t)\n})\n\nexport default BorderBox\n\n/*\nshift = px-5+8\n*/","import type { SxProps, Theme } from '@mui/material/styles'\n\n/** Values accepted by {@link mergeSx}: objects, callbacks, arrays (nested ok), or omitted. */\nexport type SxMergePart =\n  | SxProps<Theme>\n  | Record<string, unknown>\n  | ReadonlyArray<SxMergePart>\n  | false\n  | null\n  | undefined\n\nfunction flattenSx(part: unknown): unknown[] {\n  if (part == null || typeof part === 'boolean') {\n    return []\n  }\n  if (Array.isArray(part)) {\n    return part.flatMap(flattenSx)\n  }\n  if (typeof part === 'function' || typeof part === 'object') {\n    return [part]\n  }\n  return []\n}\n\n/**\n * Combine MUI `sx` values into one prop.\n *\n * Nested arrays are flattened (`[base, [a, b]]` → `[base, a, b]`).\n * `null` / `undefined` / `false` entries are dropped. Later parts win,\n * same as MUI's `sx` array merge.\n */\nexport function mergeSx(...parts: SxMergePart[]): SxProps<Theme> | undefined {\n  const list = parts.flatMap(flattenSx)\n  if (list.length === 0) {\n    return undefined\n  }\n  if (list.length === 1) {\n    return list[0] as SxProps<Theme>\n  }\n  return list as SxProps<Theme>\n}\n","export * from './BorderBox'\nexport {default as Box} from '@mui/material/Box'\nexport {default as Stack} from '@mui/material/Stack'\nexport {default as Grid} from '@mui/material/Grid'\n"],"mappings":"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","names":["default"]}

package/dist/chunk-SGCUDWO3.mjs

@@ -0,0 +1,396 @@
+import {
+  OptionRenderer,
+  PickerField,
+  Provider,
+  gitHubPickerRootSx,
+  useStateContext
+} from "./chunk-OJV6V7YZ.mjs";
+import {
+  Badge
+} from "./chunk-56TI2ZBT.mjs";
+import {
+  default as default4
+} from "./chunk-MDAUF7IL.mjs";
+import {
+  IconButton_default
+} from "./chunk-JIU5GVM7.mjs";
+import {
+  default109 as default6,
+  default98 as default5
+} from "./chunk-ZVFYOXDE.mjs";
+import {
+  default as default3
+} from "./chunk-4RPFRNXG.mjs";
+import {
+  default as default2
+} from "./chunk-S6EZVRZC.mjs";
+
+// src/components/elemental/Autocomplete/src/GitHubPicker/GitHubPicker.tsx
+import { useState, useMemo, useId, Suspense, lazy } from "react";
+
+// src/_utils/_func/array.ts
+function sortByCondi(array, key, condition, reverse = false) {
+  const anchor = reverse ? -1 : 1;
+  const sorted = [...array];
+  sorted.sort((a, b) => {
+    if (condition(a[key], b[key])) {
+      return -anchor;
+    } else {
+      return anchor;
+    }
+  });
+  return sorted;
+}
+function sortByKey(array, key, reverse = false) {
+  const condi = (a, b) => {
+    return a < b;
+  };
+  const sorted = sortByCondi(array, key, condi, reverse);
+  return sorted;
+}
+
+// src/components/elemental/Autocomplete/src/GitHubPicker/GitHubPicker.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var PopperMenu = lazy(() => import("./PopperMenu-LJ36RPBW.mjs"));
+var PICKER_ACCENT = {
+  primary: "var(--mui-palette-primary-emphasis)",
+  secondary: "var(--mui-palette-secondary-main)",
+  error: "var(--mui-palette-error-main)",
+  info: "var(--mui-palette-info-main)",
+  success: "var(--mui-palette-success-main)",
+  warning: "var(--mui-palette-warning-main)",
+  system: "var(--mui-palette-system-main)",
+  insight: "var(--mui-palette-insight-main)"
+};
+function GitHubPicker({
+  multiple = true,
+  ...p
+}) {
+  const _selectedIdProps = p.selectedIdProps[0];
+  const [anchorEl, setAnchorEl] = useState(null);
+  return /* @__PURE__ */ jsx(Provider, { selectedIds: _selectedIdProps, options: p.options, isMultiple: multiple, open: Boolean(anchorEl), children: /* @__PURE__ */ jsx(Picker, { ...p, multiple, anchorEl, setAnchorEl }) });
+}
+function Picker(p) {
+  const {
+    selectedIdProps,
+    options = [],
+    // options for rendering and autocomplete
+    additionSort,
+    title,
+    subtitle,
+    titleIcon,
+    onChange,
+    onDelete,
+    error = false,
+    multiple,
+    // default value set in Parent
+    disabled = false,
+    useGroup = true,
+    isAddOptionEnabled = false,
+    addOptionHandler,
+    isPopperFreezed,
+    variant = "field",
+    color = "secondary",
+    anchorEl,
+    setAnchorEl
+  } = p;
+  const tone = error ? "error" : color;
+  const accent = PICKER_ACCENT[tone];
+  const pickerId = useId();
+  const menuId = `${pickerId}-menu`;
+  const listboxId = `${pickerId}-listbox`;
+  const [selectedIds, sIds] = selectedIdProps;
+  const allMinimalOptions = useMemo(() => getMinimalOptions(options, additionSort), [options, additionSort]);
+  const selectedOpt = allMinimalOptions.filter((itm) => selectedIds.includes(itm.id));
+  const { state, select } = useStateContext();
+  const open = Boolean(anchorEl);
+  const closeHandler = (passedState) => {
+    const newValue = passedState === void 0 ? state.minimal : passedState.minimal;
+    const nextIds = idsFromSelection(Boolean(multiple), newValue);
+    sIds(nextIds);
+    onChange(nextIds);
+    if (anchorEl) {
+      anchorEl.focus();
+    }
+    setAnchorEl(null);
+  };
+  const removeItemHandler = (id) => () => {
+    onDelete(id);
+    sIds((old) => old.filter((itm) => itm !== id));
+    if (multiple) {
+      const current = Array.isArray(state.minimal) ? state.minimal : [];
+      select(current.filter((opt) => opt.id !== id));
+    } else if (!Array.isArray(state.minimal) && state.minimal?.id === id) {
+      select(null);
+    } else if (Array.isArray(state.minimal)) {
+      select(state.minimal.filter((opt) => opt.id !== id));
+    }
+  };
+  const togglePicker = (element) => {
+    if (disabled) return;
+    if (open) {
+      if (isPopperFreezed) return;
+      closeHandler();
+      return;
+    }
+    setAnchorEl(element);
+  };
+  return /* @__PURE__ */ jsx(
+    default4,
+    {
+      onClickAway: () => {
+        if (!open || isPopperFreezed) return;
+        closeHandler();
+      },
+      children: /* @__PURE__ */ jsxs(default2, { children: [
+        variant === "icon" ? /* @__PURE__ */ jsx(
+          IconTrigger,
+          {
+            id: pickerId,
+            menuId,
+            open,
+            color: tone,
+            disabled,
+            title,
+            titleIcon,
+            selectedCount: selectedOpt.length,
+            selectedLabels: selectedOpt.map((opt) => opt.label),
+            onToggle: togglePicker
+          }
+        ) : /* @__PURE__ */ jsx(
+          FieldTrigger,
+          {
+            id: pickerId,
+            menuId,
+            open,
+            error,
+            accent,
+            disabled,
+            title,
+            titleIcon,
+            selectedOpt,
+            options,
+            removeItemHandler,
+            multiple: Boolean(multiple),
+            onToggle: togglePicker
+          }
+        ),
+        anchorEl ? /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+          PopperMenu,
+          {
+            id: menuId,
+            listboxId,
+            anchorEl,
+            allMinimalOptions,
+            options,
+            closeHandler,
+            multiple,
+            disabled,
+            title: subtitle ?? title,
+            useGroup,
+            isAddOptionEnabled,
+            addOptionHandler,
+            isPopperFreezed
+          }
+        ) }) : null
+      ] })
+    }
+  );
+}
+function idsFromSelection(multiple, newValue) {
+  if (multiple) {
+    const list = Array.isArray(newValue) ? newValue : [];
+    return sortByKey(list, "filterKey").map((item) => item.id);
+  }
+  const single = Array.isArray(newValue) ? newValue[0] : newValue;
+  return single?.id ? [single.id] : [];
+}
+function getMinimalOptions(options, additionSort) {
+  const minimal = options.map((itm) => itm.minimal());
+  const sortedByFilterKey = sortByKey(minimal, "filterKey");
+  const afterAdditionSort = additionSort ? sortedByFilterKey.sort(additionSort) : sortedByFilterKey;
+  const sortedByGroup = sortByKey(afterAdditionSort, "group");
+  const sortedByDisabled = sortByKey(sortedByGroup, "disabled");
+  return sortedByDisabled;
+}
+function FieldTrigger(p) {
+  const { id, menuId, open, error, accent, disabled, title, titleIcon, selectedOpt, options, removeItemHandler, multiple, onToggle } = p;
+  return /* @__PURE__ */ jsxs(
+    PickerField,
+    {
+      id,
+      open,
+      error,
+      disabled,
+      role: "combobox",
+      tabIndex: disabled ? -1 : 0,
+      "aria-expanded": open,
+      "aria-haspopup": "listbox",
+      "aria-controls": open ? menuId : void 0,
+      "aria-disabled": disabled,
+      style: {
+        "--picker-border-emphasis": accent,
+        "--picker-check": accent,
+        "--picker-focus-ring": `color-mix(in lab, ${accent}, transparent 82%)`
+      },
+      onClick: (event) => onToggle(event.currentTarget),
+      onKeyDown: (event) => {
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          onToggle(event.currentTarget);
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          default2,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              gap: 1,
+              minHeight: 20
+            },
+            children: [
+              titleIcon ? /* @__PURE__ */ jsx(
+                default2,
+                {
+                  sx: {
+                    display: "inline-flex",
+                    color: "var(--picker-check)",
+                    "& svg": { fontSize: "1.05rem" }
+                  },
+                  children: titleIcon
+                }
+              ) : null,
+              title ? /* @__PURE__ */ jsx(
+                default3,
+                {
+                  component: "span",
+                  sx: {
+                    flex: 1,
+                    minWidth: 0,
+                    fontSize: "0.68rem",
+                    fontWeight: 700,
+                    letterSpacing: "0.08em",
+                    textTransform: "uppercase",
+                    color: "var(--picker-text-secondary)",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap",
+                    m: 0
+                  },
+                  children: title
+                }
+              ) : /* @__PURE__ */ jsx(default2, { sx: { flex: 1 } }),
+              /* @__PURE__ */ jsx(
+                default6,
+                {
+                  sx: {
+                    fontSize: 20,
+                    color: "var(--picker-text-secondary)",
+                    flexShrink: 0,
+                    transform: open ? "rotate(180deg)" : "rotate(0deg)",
+                    transition: "transform 180ms ease"
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          DisplaySelected,
+          {
+            selectedOpt,
+            options,
+            removeItemHandler,
+            disabled,
+            multiple
+          }
+        )
+      ]
+    }
+  );
+}
+function IconTrigger(p) {
+  const { id, menuId, open, color, disabled, title, titleIcon, selectedCount, selectedLabels, onToggle } = p;
+  const tooltip = selectedLabels.length > 0 ? selectedLabels.join(", ") : title ?? "Select";
+  return /* @__PURE__ */ jsx(
+    Badge,
+    {
+      badgeContent: selectedCount,
+      invisible: selectedCount === 0,
+      color,
+      style_variant: "filled",
+      overlap: "circular",
+      sx: gitHubPickerRootSx,
+      max: 99,
+      children: /* @__PURE__ */ jsx(default2, { sx: { display: "inline-flex" }, children: /* @__PURE__ */ jsx(
+        IconButton_default,
+        {
+          id,
+          title: open ? "" : tooltip,
+          disabled,
+          selected: open,
+          color,
+          "aria-label": title ?? "Select",
+          "aria-expanded": open,
+          "aria-haspopup": "listbox",
+          "aria-controls": open ? menuId : void 0,
+          onClick: (event) => onToggle(event.currentTarget),
+          children: titleIcon ?? /* @__PURE__ */ jsx(default5, {})
+        }
+      ) })
+    }
+  );
+}
+function DisplaySelected(p) {
+  const { selectedOpt, options, removeItemHandler, disabled, multiple } = p;
+  const selectedIds = selectedOpt.map((itm) => itm.id);
+  const displaySelectedOptions = options.filter((itm) => selectedIds.includes(itm.id));
+  if (displaySelectedOptions.length === 0) {
+    return /* @__PURE__ */ jsx(
+      default3,
+      {
+        sx: {
+          fontSize: "0.9rem",
+          fontWeight: 500,
+          color: "var(--picker-text-secondary)",
+          opacity: 0.78,
+          lineHeight: 1.4,
+          m: 0
+        },
+        children: multiple ? "Select options" : "Select an option"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(default2, { sx: {
+    overflow: "hidden",
+    display: "flex",
+    flexWrap: "wrap",
+    gap: "6px"
+  }, children: displaySelectedOptions.map((o) => {
+    return /* @__PURE__ */ jsx(default2, { sx: {
+      overflow: "hidden",
+      maxWidth: "100%"
+    }, children: /* @__PURE__ */ jsx(
+      OptionRenderer,
+      {
+        option: o,
+        selected: true,
+        isIconClickable: true,
+        removeItemHandler: removeItemHandler(o?.id),
+        disabled,
+        slotProps: {
+          DM: {
+            isShowDescription: false
+          }
+        }
+      }
+    ) }, o.id);
+  }) });
+}
+
+export {
+  GitHubPicker
+};
+//# sourceMappingURL=chunk-SGCUDWO3.mjs.map