@carto/meridian-ds 5.1.3 → 5.1.4-alpha.0cc6abf.365

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+- feat(dialog): export useScrollBorders hook for scroll-edge borders [sc-578988] [#564](https://github.com/CartoDB/meridian-ds/pull/564)
+
 ## 5.0
 
 ### 5.1.3

package/dist/components/index.cjs

@@ -3676,14 +3676,52 @@ function DialogHeader({
     children && /* @__PURE__ */ jsxRuntime.jsx(DividerBottom, {})
   ] });
 }
-function computeScrollBorders(node, hasFooterAlert) {
+function computeScrollBorders({
+  node,
+  keepBottomBorder
+}) {
   const atBottom = Math.abs(node.scrollHeight - node.clientHeight - node.scrollTop) < 1;
   const atTop = node.scrollTop === 0;
   return {
     showTop: !atTop,
-    showBottom: !atBottom || Boolean(hasFooterAlert)
+    showBottom: !atBottom || Boolean(keepBottomBorder)
   };
 }
+function useScrollBorders({
+  keepBottomBorder
+} = {}) {
+  const theme = material.useTheme();
+  const [node, setNode] = React.useState(null);
+  const updateBorders = React.useCallback(
+    (element) => {
+      const { showTop, showBottom } = computeScrollBorders({
+        node: element,
+        keepBottomBorder
+      });
+      const borderStyle = `1px solid ${theme.palette.divider}`;
+      element.style.borderTop = showTop ? borderStyle : "none";
+      element.style.borderBottom = showBottom ? borderStyle : "none";
+    },
+    [theme.palette.divider, keepBottomBorder]
+  );
+  const onScroll = React.useCallback(
+    (event) => updateBorders(event.currentTarget),
+    [updateBorders]
+  );
+  React.useEffect(() => {
+    if (!node) return;
+    updateBorders(node);
+  }, [node, updateBorders]);
+  React.useEffect(() => {
+    if (!node || typeof ResizeObserver === "undefined") return;
+    const resizeObserver = new ResizeObserver(() => {
+      updateBorders(node);
+    });
+    resizeObserver.observe(node);
+    return () => resizeObserver.disconnect();
+  }, [node, updateBorders]);
+  return { ref: setNode, onScroll };
+}
 const Content$5 = material.styled(material.DialogContent, {
   shouldForwardProp: (prop) => ![
     "scrollableContent",
@@ -3738,45 +3776,31 @@ function _DialogContent({
   onScroll,
   ...props
 }, ref) {
-  const theme = material.useTheme();
   const [contentRef, setContentRef] = React.useState(null);
   React.useImperativeHandle(
     ref,
     () => contentRef,
     [contentRef]
   );
-  const updateBorders = React.useCallback(
+  const { ref: scrollBordersRef, onScroll: updateScrollBorders } = useScrollBorders({ keepBottomBorder: hasFooterAlert });
+  const setRefs = React.useCallback(
     (node) => {
-      const { showTop, showBottom } = computeScrollBorders(node, hasFooterAlert);
-      const borderStyle = `1px solid ${theme.palette.divider}`;
-      node.style.borderTop = showTop ? borderStyle : "none";
-      node.style.borderBottom = showBottom ? borderStyle : "none";
+      setContentRef(node);
+      scrollBordersRef(node);
     },
-    [theme.palette.divider, hasFooterAlert]
+    [scrollBordersRef]
   );
   const handleScroll = React.useCallback(
     (event) => {
-      updateBorders(event.target);
+      updateScrollBorders(event);
       onScroll == null ? void 0 : onScroll(event);
     },
-    [updateBorders, onScroll]
+    [updateScrollBorders, onScroll]
   );
-  React.useEffect(() => {
-    if (!contentRef) return;
-    updateBorders(contentRef);
-  }, [contentRef, updateBorders]);
-  React.useEffect(() => {
-    if (!contentRef || typeof ResizeObserver === "undefined") return;
-    const resizeObserver = new ResizeObserver(() => {
-      updateBorders(contentRef);
-    });
-    resizeObserver.observe(contentRef);
-    return () => resizeObserver.disconnect();
-  }, [contentRef, updateBorders]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Content$5,
     {
-      ref: setContentRef,
+      ref: setRefs,
       onScroll: handleScroll,
       scrollableContent,
       withGutter,
@@ -6947,8 +6971,13 @@ const TagRoot = material.styled("div", {
     maxWidth: "100%",
     height: theme.spacing(2),
     borderWidth: "1px",
-    borderStyle: "solid",
-    ...colorProps(color ?? "primary", variant ?? "filled", theme, disabled),
+    borderStyle: variant === "dashed" ? "dashed" : "solid",
+    ...colorProps(
+      color ?? "primary",
+      variant === "dashed" ? "outlined" : variant ?? "filled",
+      theme,
+      disabled
+    ),
     '.Mui-selected &, [aria-selected="true"] &': {
       borderColor: theme.palette.primary.main,
       backgroundColor: theme.palette.primary.background,
@@ -8191,3 +8220,4 @@ exports.useAutocompleteRenderOption = useAutocompleteRenderOption;
 exports.useCodeAreaAutocompletion = useCodeAreaAutocompletion;
 exports.useCopyValue = useCopyValue;
 exports.useListContextProps = useListContextProps;
+exports.useScrollBorders = useScrollBorders;

package/dist/components/index.js

@@ -3659,14 +3659,52 @@ function DialogHeader({
     children && /* @__PURE__ */ jsx(DividerBottom, {})
   ] });
 }
-function computeScrollBorders(node, hasFooterAlert) {
+function computeScrollBorders({
+  node,
+  keepBottomBorder
+}) {
   const atBottom = Math.abs(node.scrollHeight - node.clientHeight - node.scrollTop) < 1;
   const atTop = node.scrollTop === 0;
   return {
     showTop: !atTop,
-    showBottom: !atBottom || Boolean(hasFooterAlert)
+    showBottom: !atBottom || Boolean(keepBottomBorder)
   };
 }
+function useScrollBorders({
+  keepBottomBorder
+} = {}) {
+  const theme = useTheme();
+  const [node, setNode] = useState(null);
+  const updateBorders = useCallback(
+    (element) => {
+      const { showTop, showBottom } = computeScrollBorders({
+        node: element,
+        keepBottomBorder
+      });
+      const borderStyle = `1px solid ${theme.palette.divider}`;
+      element.style.borderTop = showTop ? borderStyle : "none";
+      element.style.borderBottom = showBottom ? borderStyle : "none";
+    },
+    [theme.palette.divider, keepBottomBorder]
+  );
+  const onScroll = useCallback(
+    (event) => updateBorders(event.currentTarget),
+    [updateBorders]
+  );
+  useEffect(() => {
+    if (!node) return;
+    updateBorders(node);
+  }, [node, updateBorders]);
+  useEffect(() => {
+    if (!node || typeof ResizeObserver === "undefined") return;
+    const resizeObserver = new ResizeObserver(() => {
+      updateBorders(node);
+    });
+    resizeObserver.observe(node);
+    return () => resizeObserver.disconnect();
+  }, [node, updateBorders]);
+  return { ref: setNode, onScroll };
+}
 const Content$5 = styled(DialogContent$1, {
   shouldForwardProp: (prop) => ![
     "scrollableContent",
@@ -3721,45 +3759,31 @@ function _DialogContent({
   onScroll,
   ...props
 }, ref) {
-  const theme = useTheme();
   const [contentRef, setContentRef] = useState(null);
   useImperativeHandle(
     ref,
     () => contentRef,
     [contentRef]
   );
-  const updateBorders = useCallback(
+  const { ref: scrollBordersRef, onScroll: updateScrollBorders } = useScrollBorders({ keepBottomBorder: hasFooterAlert });
+  const setRefs = useCallback(
     (node) => {
-      const { showTop, showBottom } = computeScrollBorders(node, hasFooterAlert);
-      const borderStyle = `1px solid ${theme.palette.divider}`;
-      node.style.borderTop = showTop ? borderStyle : "none";
-      node.style.borderBottom = showBottom ? borderStyle : "none";
+      setContentRef(node);
+      scrollBordersRef(node);
     },
-    [theme.palette.divider, hasFooterAlert]
+    [scrollBordersRef]
   );
   const handleScroll = useCallback(
     (event) => {
-      updateBorders(event.target);
+      updateScrollBorders(event);
       onScroll == null ? void 0 : onScroll(event);
     },
-    [updateBorders, onScroll]
+    [updateScrollBorders, onScroll]
   );
-  useEffect(() => {
-    if (!contentRef) return;
-    updateBorders(contentRef);
-  }, [contentRef, updateBorders]);
-  useEffect(() => {
-    if (!contentRef || typeof ResizeObserver === "undefined") return;
-    const resizeObserver = new ResizeObserver(() => {
-      updateBorders(contentRef);
-    });
-    resizeObserver.observe(contentRef);
-    return () => resizeObserver.disconnect();
-  }, [contentRef, updateBorders]);
   return /* @__PURE__ */ jsx(
     Content$5,
     {
-      ref: setContentRef,
+      ref: setRefs,
       onScroll: handleScroll,
       scrollableContent,
       withGutter,
@@ -6930,8 +6954,13 @@ const TagRoot = styled("div", {
     maxWidth: "100%",
     height: theme.spacing(2),
     borderWidth: "1px",
-    borderStyle: "solid",
-    ...colorProps(color ?? "primary", variant ?? "filled", theme, disabled),
+    borderStyle: variant === "dashed" ? "dashed" : "solid",
+    ...colorProps(
+      color ?? "primary",
+      variant === "dashed" ? "outlined" : variant ?? "filled",
+      theme,
+      disabled
+    ),
     '.Mui-selected &, [aria-selected="true"] &': {
       borderColor: theme.palette.primary.main,
       backgroundColor: theme.palette.primary.background,
@@ -8168,5 +8197,6 @@ export {
   useAutocompleteRenderOption,
   useCodeAreaAutocompletion,
   useCopyValue,
-  useListContextProps
+  useListContextProps,
+  useScrollBorders
 };

package/dist/metadata.json

@@ -1,5 +1,5 @@
 {
-  "version": "5.1.3",
+  "version": "5.1.4-alpha.0cc6abf.365",
   "conventions": "# Meridian usage conventions (for code-generating agents)\n\nSystem-level rules an agent should apply across all components.\n\nMeridian is the source of truth: when an existing codebase pattern contradicts Meridian, follow Meridian — don't replicate the contradicting local pattern.\n\n## Choosing a component\n\n- Don't hand-roll what the design system already provides. Before writing a\n  custom component, a styled wrapper, or a block of primitives (a modal,\n  chip/tag, card, empty state, dropdown, tooltip, copy-to-clipboard input,\n  etc.), confirm no Meridian component covers it — reuse or extend the existing one instead of rebuilding it.\n- Prefer a Meridian component over a bare MUI one whenever a Meridian wrapper\n  exists — the wrappers carry CARTO theming, a11y defaults, and narrowed APIs. MUI is correct for layout primitives (`Box`/`Grid`/`Stack`/`Container`) and for gaps Meridian doesn't fill (e.g. date pickers); \"prefer Meridian\" is not \"never MUI\".\n- Resolve \"which component\" by reading each one's `description` + `keywords`,\n  then confirm with its `decisionTree` (the conditions that point elsewhere) and `limitations` (what it lacks — check before you downgrade to it).\n  Don't infer selection from prop lists.\n\n## Icons\n\n- Source icons from Meridian's custom-icons first, then `@mui/icons-material`;\n  add a local SVG only when neither has an equivalent. Don't duplicate an icon\n  the design system already ships.\n- Find the right custom icon with `meridian_list_icons` — match by name or keyword (e.g. \"warehouse\" → `Bigquery`), import it from `@carto/meridian-ds/custom-icons`, and render `<Name />`. Every icon shares one prop type, `CustomIconProps` (MUI `SvgIconProps` — `color`/`fontSize`/`sx` — plus `width`/`height`).\n- To confirm a shortlisted icon by sight (or match an icon in a design you're implementing), call `meridian_get_screenshot` with `name: 'icons'` and Read the returned image path — a labeled grid of every icon.\n- Use the standard icon sizes — small 12px, medium (default) 18px, large 24px;\n  a value off this scale (e.g. 16, 20) needs design sign-off. Prefer the\n  outlined variants.\n- A new SVG must inherit, not bake in: set `fill='currentColor'` so it takes\n  the parent's color, and use the standard size — don't hardcode\n  color/opacity/dimensions.\n- For an icon color outside the palette `color` set, pass a theme token via\n  `htmlColor` (e.g. `htmlColor={theme.palette.text.secondary}`) — never a\n  hardcoded hex.\n\n## Accessibility\n\n- Any icon-only control needs an accessible name: `tooltip` or `aria-label`.\n- Don't disable a control without telling the user why — pair a disabled action with a tooltip explaining the requirement.\n- An `aria-label` must be human-readable text describing the control, not a test id in disguise — use a separate test hook for that.\n- User-facing strings (labels, `aria-label`, placeholders, messages) go through the app's i18n layer, not hardcoded literals.\n\n## Props\n\n- Two sources, both pinned to the installed `@carto/meridian-ds`: **exact props / types / JSDoc** come from the package's **type declarations** — read the `<Name>.d.ts` directly — while the **`meridian-design-system` MCP** (`meridian_*` tools) covers what types can't: which component, when, gotchas, and real examples.\n- A component's curation lists the high-value inherited MUI props worth knowing (`curation.mui`, e.g. `color`/`variant`/`size`); the rest of MUI's surface is available but rarely needed.\n- Don't use `sx`/inline styles to override a Meridian component's visual design (colors, typography, borders, sizing) — use its documented props and the theme tokens. (`sx` for layout/spacing on primitives is fine — see Styling.)\n- If no prop covers the visual change you need, treat it as a design-system gap: request the variant/behavior upstream in Meridian rather than permanently overriding the component locally — a local `styled()` of a Meridian component is a smell, not a fix.\n\n## Styling\n\n- Use theme tokens, never hardcoded values: colors from the palette (`text.*`, `background.*`, `divider`, semantic `*.main`) and spacing from the theme scale (`theme.spacing(n)`, or `sx` numeric spacing like `px: 2` / `mt: 1.5`) — no raw hex/rgb or px. Margin, padding and offsets use steps `0.25, 0.5, 0.75, 1, 1.5, 2, 2.5, 3, 4, 5, 6, 7, 8, 9, 12, 15` (2–120px); `width`/`height` may use any step. Get the exact values — palette keys, spacing base, type ramp, `shape.borderRadius`, breakpoints, shadows — from `meridian_get_tokens`.\n- Text uses `<Typography variant=…>` (with the `weight` prop for emphasis), never hardcoded `fontSize`/`fontWeight`/`lineHeight`/`fontFamily`.\n- Meridian's type scale is custom and does not match MUI defaults (e.g. `body2`/`caption` differ from MUI's sizes, and there are Meridian-only variants like `code1`/`code2`/`code3` and `overlineDelicate`). Pick the variant by role from Typography's variant list (`meridian_get_examples('Typography')`) — don't assume a px size or map px → variant yourself.\n- `sx` is the right tool for one-off layout/spacing on primitives (`Box`/`Grid`/`Stack`), not the deprecated MUI system props\n  (`<Box px={2}>` → `<Box sx={{ px: 2 }}>`). This is layout, distinct from restyling a Meridian component (see Props).\n\n## Examples\n\n- Never invent example code when a story exists — use the component's real story source (`meridian_get_examples`). The lead Usage story is the copy-paste starting point; the later stories are illustrative (variants, edge cases) and may carry story-arg shells, so don't copy one wholesale as your baseline.\n",
   "components": [
     {
@@ -1465,6 +1465,12 @@
             "kind": "util",
             "description": "Per-size width/min-height dimensions for a Dialog, keyed by `DialogSizes` (Small/Medium/Large/XLarge).",
             "import": "@carto/meridian-ds/components"
+          },
+          {
+            "name": "useScrollBorders",
+            "kind": "hook",
+            "description": "DialogContent's scroll-edge dividers for any custom scroll container (e.g. a popover panel): top border once scrolled, bottom border until the end.\nSpread `{ ref, onScroll }` on the element that scrolls (bounded height + `overflow: auto`); it sets inline `borderTop`/`borderBottom`, so don't style those. Not needed inside `DialogContent`, which already applies it.",
+            "import": "@carto/meridian-ds/components"
           }
         ]
       },
@@ -1541,6 +1547,12 @@
           "summary": "Only a sub-region scrolls (overflow on an inner wrapper); the rest stays static",
           "code": "import { Alert, Button, Dialog, DialogContent, DialogFooter, DialogHeader, DialogStepper, Typography } from '@carto/meridian-ds/components'\nimport { Box, useTheme } from '@mui/material'\nimport { useState } from 'react'\n\nconst BaseDialog = ({\n  title,\n  chipLabel,\n  scrollableContent,\n  closeButton,\n  children,\n  showActions,\n  showStepper,\n  withGutter = true,\n  withBottomGutter = true,\n  spacing,\n  nonModal = true,\n  ...dialogArgs\n}: any) => {\n  const theme = useTheme()\n  const [open, setOpen] = useState(false)\n\n  const handleClickOpen = (): void => {\n    setOpen(!open)\n  }\n\n  const handleClose = () => setOpen(false)\n\n  return (\n    <Box\n      sx={{\n        p: 2,\n        backgroundColor: nonModal ? theme.palette.black[12] : 'transparent',\n      }}\n    >\n      {!nonModal && (\n        <Button variant='outlined' color='primary' onClick={handleClickOpen}>\n          {open ? 'Close' : 'Open'} modal dialog\n        </Button>\n      )}\n      <Dialog\n        {...dialogArgs}\n        open={open}\n        onClose={closeButton ? handleClose : undefined}\n        nonModal={nonModal}\n      >\n        <DialogHeader\n          onClose={closeButton ? handleClose : undefined}\n          chipLabel={chipLabel}\n          title={title}\n        >\n          {showStepper && (\n            <DialogStepper\n              currentStep={1}\n              stepsLabels={['Step 1', 'Step 2', 'Step 3']}\n            />\n          )}\n        </DialogHeader>\n        <DialogContent\n          scrollableContent={scrollableContent}\n          withGutter={withGutter}\n          withBottomGutter={withBottomGutter}\n          spacing={spacing}\n        >\n          {children}\n        </DialogContent>\n        {showActions && (\n          <DialogFooter>\n            <Button variant='contained' onClick={handleClose}>\n              Done\n            </Button>\n          </DialogFooter>\n        )}\n      </Dialog>\n    </Box>\n  )\n}\n\nconst someRandomText = (\n  <Typography variant='body2' color='textSecondary'>\n    Numeric, string and boolean are supported. Date and timestamps will be\n    encoded as strings. Learn more about tilesets in our documentation.\n  </Typography>\n)\n\nconst someBigRandomLog = `2023-10-13 11:54:35.526 [info] > git config --get commit.template [8ms]\n2023-10-13 11:54:35.560 [info] > git for-each-ref --format=%(refname)%00%(upstream:short)%00%(objectname)%00%(upstream:track)%00%(upstream:remotename)%00%(upstream:remoteref) --ignore-case refs/heads/zbigg/server-data-export-ui refs/remotes/zbigg/server-data-export-ui [39ms]\n2023-10-13 11:54:35.651 [info] > git status -z -uall [91ms]\n2023-10-13 11:54:36.770 [info] > git ls-files --stage -- /Users/zbigg/carto/cloud-native/workspace-www/src/features/common/utils/urlUtils.ts [23ms]\n2023-10-13 11:54:36.770 [info] > git ls-files --stage -- /Users/zbigg/carto/cloud-native/workspace-www/src/features/jobs/ui/JobItem/DownloadsPart.tsx [28ms]\n2023-10-13 11:54:36.770 [info] > git ls-files --stage -- /Users/zbigg/carto/cloud-native/workspace-www/src/features/jobs/ui/JobItem/DownloadsDialog.tsx [33ms]\n2023-10-13 11:54:36.770 [info] > git ls-files --stage -- /Users/zbigg/carto/cloud-native/Makefile [52ms]\n2023-10-13 11:54:36.770 [info] > git ls-files --stage -- /Users/zbigg/carto/cloud-native/jobs-samples.md [53ms]\n2023-10-13 11:54:36.770 [info] > git ls-files --stage -- /Users/zbigg/carto/cloud-native/time-series-fixes-and-enchancements.md [54ms]\n2023-10-13 11:54:36.772 [info] > git ls-files --stage -- /Users/zbigg/carto/cloud-native/workspace-www/src/features/access-token/ui/AccessTokenForm/AccessTokenFormApi/AccessTokenFormApiOptions.tsx [25ms]\n2023-10-13 11:54:36.772 [info] > git ls-files --stage -- /Users/zbigg/carto/cloud-native/workspace-www/src/features/data-explorer/ui/Resources/Actions/Subscription/SubscriptionExportDialog/SubscriptionExportDialogContent/JobSuccessDownload.tsx [26ms]\n2023-10-13 11:54:36.773 [info] > git ls-files --stage -- /Users/zbigg/carto/cloud-native/workspace-www/src/features/common/ui/utils/CopiableComponent.tsx [28ms]\n2023-10-13 11:54:36.773 [info] > git ls-files --stage -- /Users/zbigg/carto/cloud-native/workspace-www/src/features/common/utils/dateFormat.ts [28ms]\n2023-10-13 11:54:36.775 [info] > git ls-files --stage -- /Users/zbigg/carto/cloud-native/workspace-www/src/features/jobs/ui/JobItem/ErrorDetailsDialog.tsx [34ms]\n2023-10-13 11:54:36.775 [info] > git ls-files --stage -- /Users/zbigg/carto/cloud-native/workspace-www/src/__tests__/features/jobs/mocks/processingJobs.ts [41ms]\n2023-10-13 11:54:36.781 [info] > git ls-files --stage -- /Users/zbigg/carto/cloud-native/workspace-www/src/features/jobs/state/jobsExportingSlice.ts [48ms]\n2023-10-13 11:54:36.781 [info] > git ls-files --stage -- /Users/zbigg/carto/cloud-native/workspace-www/src/features/metrics/state/metricsSagas.ts [48ms]\n2023-10-13 11:54:36.782 [info] > git ls-files --stage -- /Users/zbigg/carto/cloud-native/workspace-www/src/features/analysis/ui/NewAnalysisDialog/AnalysisCatalog/Buffer/Form/TractsDropdown.tsx [54ms]\n2023-10-13 11:54:36.783 [info] > git ls-files --stage -- /Users/zbigg/carto/cloud-native/workspace-www/src/features/jobs/models/exportsModel.ts [52ms]\n2023-10-13 11:54:36.784 [info] > git ls-files --stage -- /Users/zbigg/carto/cloud-native/workspace-www/src/features/data-explorer/ui/Resources/Actions/Subscription/SubscriptionExportDialog/useExportHooks.ts [53ms]\n2023-10-13 11:54:36.786 [info] > git ls-files --stage -- /Users/zbigg/carto/cloud-native/workspace-www/src/features/builder/ui/BuilderPrivate/BuilderHeader/BuilderHeaderActions/ExportDataDialog.tsx [63ms]\n2023-10-13 11:54:36.787 [info] > git ls-files --stage -- /Users/zbigg/carto/cloud-native/accounts-www/src/features/accounts/ui/Form/FormSelect.tsx [62ms]\n2023-10-13 11:54:36.787 [info] > git ls-files --stage -- /Users/zbigg/carto/cloud-native/workspace-www/src/features/jobs/ui/JobsPopper.tsx [67ms]\n2023-10-13 11:54:36.788 [info] > git ls-files --stage -- /Users/zbigg/carto/cloud-native/workspace-www/src/features/common/ui/AppTemplate/HeaderBase/Partials/JobsStatusIndicator.`\n\nconst someRandomLogElement = (\n  <Typography variant='code3' component='pre'>\n    {someBigRandomLog}\n  </Typography>\n)\n\nconst InternallScroll = (args: any) => (\n  <BaseDialog {...args} nonModal showActions closeButton>\n    {someRandomText}\n    <Box style={{ maxHeight: 'fit-content', overflowY: 'scroll' }}>\n      <Alert severity='warning'>{someRandomLogElement}</Alert>\n    </Box>\n  </BaseDialog>\n)"
         },
+        {
+          "name": "ScrollBordersHook",
+          "id": "components-dialogs-dialog--scroll-borders-hook",
+          "summary": "`useScrollBorders` adds DialogContent's scroll-edge borders to any scroll container (e.g. a popover panel)",
+          "code": "import { Typography, useScrollBorders } from '@carto/meridian-ds/components'\nimport { Box } from '@mui/material'\n\nconst ScrollBordersHook = () => {\n  const scrollBorders = useScrollBorders()\n\n  return (\n    <Box {...scrollBorders} sx={{ maxHeight: 160, overflowY: 'auto', p: 2 }}>\n      {Array.from({ length: 12 }, (_, i) => (\n        <Typography key={i} variant='body2'>\n          Item {i + 1}\n        </Typography>\n      ))}\n    </Box>\n  )\n}"
+        },
         {
           "name": "CustomSpacing",
           "id": "components-dialogs-dialog--custom-spacing",
@@ -3603,7 +3615,7 @@
     },
     {
       "name": "Tag",
-      "description": "Compact, display-only label for surfacing a status, category, or short value. Supports semantic color variants, an optional leading icon, filled or outlined styles, and a monospaced `code` type for identifiers or snippets. Non-interactive by design — it has no click, selection, or remove behavior.",
+      "description": "Compact, display-only label for surfacing a status, category, or short value. Supports semantic color variants, an optional leading icon, filled, outlined or dashed styles, and a monospaced `code` type for identifiers or snippets. Non-interactive by design — it has no click, selection, or remove behavior.",
       "documented": true,
       "curation": {
         "keywords": [
@@ -3663,6 +3675,12 @@
           "name": "WithIcons",
           "id": "components-tag--with-icons",
           "code": "import { Tag, TagProps } from '@carto/meridian-ds/components'\nimport { AddCircleOutlineOutlined, ChangeCircleOutlined, CheckCircleOutlined, CloseOutlined, DangerousOutlined, DoneOutlined } from '@mui/icons-material'\nimport { Box, Grid, Stack } from '@mui/material'\n\nconst WithIcons = ({ ...args }: TagProps) => {\n  const icons = [\n    { icon: <CloseOutlined />, color: 'default' },\n    { icon: <CloseOutlined />, color: 'neutral' },\n    { icon: <DoneOutlined />, color: 'primary' },\n    { icon: <AddCircleOutlineOutlined />, color: 'secondary' },\n    { icon: <CheckCircleOutlined />, color: 'success' },\n    { icon: <DangerousOutlined />, color: 'error' },\n    { icon: <ChangeCircleOutlined />, color: 'warning' },\n  ] as const\n\n  return (\n    <Grid container spacing={2}>\n      <Grid size={3}>\n        <Stack spacing={2}>\n          {icons.map(({ icon, color }, index) => (\n            <Box key={index}>\n              <Tag\n                {...args}\n                color={color}\n                variant='filled'\n                icon={icon}\n                label={`${color} - filled`}\n              />\n            </Box>\n          ))}\n          <Box>\n            <Tag\n              {...args}\n              color='primary'\n              variant='filled'\n              icon={<DoneOutlined />}\n              label='Disabled - filled'\n              disabled\n            />\n          </Box>\n        </Stack>\n      </Grid>\n      <Grid size={3}>\n        <Stack spacing={2}>\n          {icons.map(({ icon, color }, index) => (\n            <Box key={index}>\n              <Tag\n                {...args}\n                color={color}\n                variant='outlined'\n                icon={icon}\n                label={`${color} - outlined`}\n              />\n            </Box>\n          ))}\n          <Box>\n            <Tag\n              {...args}\n              color='primary'\n              variant='outlined'\n              icon={<DoneOutlined />}\n              label='Disabled - outlined'\n              disabled\n            />\n          </Box>\n        </Stack>\n      </Grid>\n      <Grid size={3}>\n        <Stack spacing={2}>\n          {icons.map(({ icon, color }, index) => (\n            <Box key={index}>\n              <Tag\n                {...args}\n                color={color}\n                variant='filled'\n                type='code'\n                icon={icon}\n                label={`${color} - code filled`}\n              />\n            </Box>\n          ))}\n          <Box>\n            <Tag\n              {...args}\n              color='primary'\n              variant='filled'\n              type='code'\n              icon={<DoneOutlined />}\n              label='Disabled - filled'\n              disabled\n            />\n          </Box>\n        </Stack>\n      </Grid>\n      <Grid size={3}>\n        <Stack spacing={2}>\n          {icons.map(({ icon, color }, index) => (\n            <Box key={index}>\n              <Tag\n                {...args}\n                color={color}\n                variant='outlined'\n                type='code'\n                icon={icon}\n                label={`${color} - code outlined`}\n              />\n            </Box>\n          ))}\n          <Box>\n            <Tag\n              {...args}\n              color='primary'\n              variant='outlined'\n              type='code'\n              icon={<DoneOutlined />}\n              label='Disabled - outlined'\n              disabled\n            />\n          </Box>\n        </Stack>\n      </Grid>\n    </Grid>\n  )\n}"
+        },
+        {
+          "name": "Dashed",
+          "id": "components-tag--dashed",
+          "summary": "`dashed` variant: outlined colors with a dashed border",
+          "code": "import { Tag } from '@carto/meridian-ds/components'\nimport { Stack } from '@mui/material'\n\nconst colorsOptions = [\n  { color: 'default' },\n  { color: 'neutral' },\n  { color: 'primary' },\n  { color: 'secondary' },\n  { color: 'tertiary' },\n  { color: 'success' },\n  { color: 'warning' },\n  { color: 'error' },\n] as const\n\nconst Dashed = () => (\n    <Stack direction='row' spacing={1} sx={{ flexWrap: 'wrap' }} useFlexGap>\n      {colorsOptions.map(({ color }) => (\n        <Tag key={color} color={color} variant='dashed' label={color} />\n      ))}\n      <Tag color='primary' variant='dashed' label='disabled' disabled />\n    </Stack>\n  )"
         }
       ]
     },

package/dist/types/components/Dialog/Dialog/Dialog.stories.d.ts

@@ -593,6 +593,42 @@ export declare const InternallScroll: {
         };
     };
 };
+/** @summary `useScrollBorders` adds DialogContent's scroll-edge borders to any scroll container (e.g. a popover panel) */
+export declare const ScrollBordersHook: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+    argTypes: {
+        closeButton: {
+            table: {
+                disable: boolean;
+            };
+        };
+        chipLabel: {
+            table: {
+                disable: boolean;
+            };
+        };
+        title: {
+            table: {
+                disable: boolean;
+            };
+        };
+        scrollableContent: {
+            table: {
+                disable: boolean;
+            };
+        };
+        showActions: {
+            table: {
+                disable: boolean;
+            };
+        };
+        showStepper: {
+            table: {
+                disable: boolean;
+            };
+        };
+    };
+};
 export declare const InteractionNonClosable: {
     render: (args: DialogStoryProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];

package/dist/types/components/Dialog/Dialog/Dialog.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Dialog/Dialog/Dialog.stories.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Dialog.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Dialog/Dialog/Dialog.stories.tsx"],"names":[],"mappings":"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"}

package/dist/types/components/Dialog/DialogContent/DialogContent.d.ts

@@ -1,16 +1,4 @@
 import { DialogContentProps } from '../types';
-/**
- * Decides which scroll borders to show: top appears once scrolled, bottom
- * hides at the end of the scroll unless a footer alert requires a separator.
- */
-export declare function computeScrollBorders(node: {
-    scrollHeight: number;
-    clientHeight: number;
-    scrollTop: number;
-}, hasFooterAlert: boolean | undefined): {
-    showTop: boolean;
-    showBottom: boolean;
-};
 /** Dialog body region: holds the main content, with optional gutter padding and an internally scrollable area. */
 declare const DialogContent: import('react').ForwardRefExoticComponent<Omit<DialogContentProps, "ref"> & import('react').RefAttributes<HTMLDivElement | null>>;
 /** `DialogContent` with horizontal gutter padding (plus extra bottom padding via `withAlert`) — for dialog bodies that need inset content. */

package/dist/types/components/Dialog/DialogContent/DialogContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DialogContent.d.ts","sourceRoot":"","sources":["../../../../../src/components/Dialog/DialogContent/DialogContent.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAE7C;;;GAGG;AACH,wBAAgB,oBAAoB,CAClC,IAAI,EAAE;IAAE,YAAY,EAAE,MAAM,CAAC;IAAC,YAAY,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAA;CAAE,EACvE,cAAc,EAAE,OAAO,GAAG,SAAS,GAClC;IAAE,OAAO,EAAE,OAAO,CAAC;IAAC,UAAU,EAAE,OAAO,CAAA;CAAE,CAS3C;AAwID,kHAAkH;AAClH,QAAA,MAAM,aAAa,mIAA6B,CAAA;AAEhD,8IAA8I;AAC9I,eAAO,MAAM,mBAAmB;gBAGlB,OAAO;UAOlB,CAAA;AAEH,eAAe,aAAa,CAAA"}
+{"version":3,"file":"DialogContent.d.ts","sourceRoot":"","sources":["../../../../../src/components/Dialog/DialogContent/DialogContent.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAqH7C,kHAAkH;AAClH,QAAA,MAAM,aAAa,mIAA6B,CAAA;AAEhD,8IAA8I;AAC9I,eAAO,MAAM,mBAAmB;gBAGlB,OAAO;UAOlB,CAAA;AAEH,eAAe,aAAa,CAAA"}

package/dist/types/components/Dialog/DialogContent/useScrollBorders.d.ts

@@ -0,0 +1,29 @@
+import { UIEvent } from 'react';
+export interface UseScrollBordersOptions {
+    /** Keep the bottom border at the end of the scroll (e.g. when an alert sits below the area). */
+    keepBottomBorder?: boolean;
+}
+/**
+ * Decides which scroll borders to show: top appears once scrolled, bottom
+ * hides at the end of the scroll unless `keepBottomBorder` is set.
+ */
+export declare function computeScrollBorders({ node, keepBottomBorder, }: {
+    node: {
+        scrollHeight: number;
+        clientHeight: number;
+        scrollTop: number;
+    };
+    keepBottomBorder?: boolean;
+}): {
+    showTop: boolean;
+    showBottom: boolean;
+};
+/**
+ * DialogContent's scroll-edge dividers for any custom scroll container (e.g. a popover panel): top border once scrolled, bottom border until the end.
+ * Spread `{ ref, onScroll }` on the element that scrolls (bounded height + `overflow: auto`); it sets inline `borderTop`/`borderBottom`, so don't style those. Not needed inside `DialogContent`, which already applies it.
+ */
+export declare function useScrollBorders<T extends HTMLElement = HTMLDivElement>({ keepBottomBorder, }?: UseScrollBordersOptions): {
+    ref: import('react').Dispatch<import('react').SetStateAction<T | null>>;
+    onScroll: (event: UIEvent<T>) => void;
+};
+//# sourceMappingURL=useScrollBorders.d.ts.map

package/dist/types/components/Dialog/DialogContent/useScrollBorders.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollBorders.d.ts","sourceRoot":"","sources":["../../../../../src/components/Dialog/DialogContent/useScrollBorders.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAoC,MAAM,OAAO,CAAA;AAGjE,MAAM,WAAW,uBAAuB;IACtC,gGAAgG;IAChG,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC3B;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,IAAI,EACJ,gBAAgB,GACjB,EAAE;IACD,IAAI,EAAE;QAAE,YAAY,EAAE,MAAM,CAAC;QAAC,YAAY,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,CAAA;IACvE,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC3B,GAAG;IAAE,OAAO,EAAE,OAAO,CAAC;IAAC,UAAU,EAAE,OAAO,CAAA;CAAE,CAS5C;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,WAAW,GAAG,cAAc,EAAE,EACvE,gBAAgB,GACjB,GAAE,uBAA4B;;sBAmBnB,OAAO,CAAC,CAAC,CAAC;EAuBrB"}

package/dist/types/components/Dialog/DialogContent/useScrollBorders.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=useScrollBorders.test.d.ts.map

package/dist/types/components/Dialog/DialogContent/useScrollBorders.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollBorders.test.d.ts","sourceRoot":"","sources":["../../../../../src/components/Dialog/DialogContent/useScrollBorders.test.tsx"],"names":[],"mappings":""}

package/dist/types/components/Dialog/index.d.ts

@@ -2,6 +2,8 @@ export { default as Dialog } from './Dialog/Dialog';
 export { default as DialogPaper, dialogDimensionsBySize, } from './DialogPaper/DialogPaper';
 export { default as DialogHeader } from './DialogHeader/DialogHeader';
 export { default as DialogContent, DialogContentPadded, } from './DialogContent/DialogContent';
+export { useScrollBorders } from './DialogContent/useScrollBorders';
+export type { UseScrollBordersOptions } from './DialogContent/useScrollBorders';
 export { default as DialogFooter, DialogActions, } from './DialogFooter/DialogFooter';
 export { default as DialogAlert } from './DialogAlert/DialogAlert';
 export { default as DialogConfirmation } from './DialogConfirmation/DialogConfirmation';

package/dist/types/components/Dialog/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Dialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAA;AACnD,OAAO,EACL,OAAO,IAAI,WAAW,EACtB,sBAAsB,GACvB,MAAM,2BAA2B,CAAA;AAClC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,6BAA6B,CAAA;AACrE,OAAO,EACL,OAAO,IAAI,aAAa,EACxB,mBAAmB,GACpB,MAAM,+BAA+B,CAAA;AACtC,OAAO,EACL,OAAO,IAAI,YAAY,EACvB,aAAa,GACd,MAAM,6BAA6B,CAAA;AACpC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAA;AAClE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,yCAAyC,CAAA;AACvF,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAA;AAE7D,mBAAmB,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Dialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAA;AACnD,OAAO,EACL,OAAO,IAAI,WAAW,EACtB,sBAAsB,GACvB,MAAM,2BAA2B,CAAA;AAClC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,6BAA6B,CAAA;AACrE,OAAO,EACL,OAAO,IAAI,aAAa,EACxB,mBAAmB,GACpB,MAAM,+BAA+B,CAAA;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAA;AACnE,YAAY,EAAE,uBAAuB,EAAE,MAAM,kCAAkC,CAAA;AAC/E,OAAO,EACL,OAAO,IAAI,YAAY,EACvB,aAAa,GACd,MAAM,6BAA6B,CAAA;AACpC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAA;AAClE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,yCAAyC,CAAA;AACvF,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAA;AAE7D,mBAAmB,SAAS,CAAA"}

package/dist/types/components/Tag/Tag.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { TypographyProps } from '..';
 export type TagColor = 'primary' | 'secondary' | 'tertiary' | 'error' | 'success' | 'warning' | 'default' | 'neutral';
-export type TagVariant = 'filled' | 'outlined';
+export type TagVariant = 'filled' | 'outlined' | 'dashed';
 export type TagType = 'default' | 'code';
 /**
  * Props for the Tag component.
@@ -44,13 +44,14 @@ export type TagProps = Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'size' | 'la
      */
     icon?: ReactNode;
     /**
-     * Visual variant of the tag.
+     * Visual variant of the tag. `dashed` is `outlined` with a dashed border.
      *
      * @default 'filled'
      * @example
      * ```tsx
      * <Tag label="Outlined" variant="outlined" />
      * <Tag label="Filled" variant="filled" />
+     * <Tag label="Dashed" variant="dashed" />
      * ```
      */
     variant?: TagVariant;
@@ -104,7 +105,7 @@ export type TagProps = Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'size' | 'la
      */
     disabled?: boolean;
 };
-/** Compact, display-only label for surfacing a status, category, or short value. Supports semantic color variants, an optional leading icon, filled or outlined styles, and a monospaced `code` type for identifiers or snippets. Non-interactive by design — it has no click, selection, or remove behavior. */
+/** Compact, display-only label for surfacing a status, category, or short value. Supports semantic color variants, an optional leading icon, filled, outlined or dashed styles, and a monospaced `code` type for identifiers or snippets. Non-interactive by design — it has no click, selection, or remove behavior. */
 declare const Tag: import('react').ForwardRefExoticComponent<Omit<import('react').HTMLProps<HTMLDivElement>, "size" | "label" | "ref" | "type" | "as"> & {
     /**
      * Label, main content of tag, by default displayed as `caption` type typography.
@@ -140,13 +141,14 @@ declare const Tag: import('react').ForwardRefExoticComponent<Omit<import('react'
      */
     icon?: ReactNode;
     /**
-     * Visual variant of the tag.
+     * Visual variant of the tag. `dashed` is `outlined` with a dashed border.
      *
      * @default 'filled'
      * @example
      * ```tsx
      * <Tag label="Outlined" variant="outlined" />
      * <Tag label="Filled" variant="filled" />
+     * <Tag label="Dashed" variant="dashed" />
      * ```
      */
     variant?: TagVariant;

package/dist/types/components/Tag/Tag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../../src/components/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA4B,MAAM,OAAO,CAAA;AAG3D,OAAO,EAAc,eAAe,EAAE,MAAM,cAAc,CAAA;AAG1D,MAAM,MAAM,QAAQ,GAChB,SAAS,GACT,WAAW,GACX,UAAU,GACV,OAAO,GACP,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,CAAA;AAEb,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,UAAU,CAAA;AAE9C,MAAM,MAAM,OAAO,GAAG,SAAS,GAAG,MAAM,CAAA;AAExC;;;;;GAKG;AAEH,MAAM,MAAM,QAAQ,GAAG,IAAI,CACzB,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,EAC/B,IAAI,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,CACzC,GAAG;IACF;;;;;;;;;OASG;IACH,KAAK,EAAE,SAAS,CAAA;IAEhB;;;;;;;;;OASG;IACH,KAAK,CAAC,EAAE,QAAQ,CAAA;IAEhB;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAEhB;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,UAAU,CAAA;IAEpB;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;IAEd;;;;;;;;;;;;;;OAcG;IACH,eAAe,CAAC,EAAE,eAAe,CAAA;IAEjC;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AA2OD,iTAAiT;AACjT,QAAA,MAAM,GAAG;IAhVP;;;;;;;;;OASG;WACI,SAAS;IAEhB;;;;;;;;;OASG;YACK,QAAQ;IAEhB;;;;;;;;;OASG;WACI,SAAS;IAEhB;;;;;;;;;OASG;cACO,UAAU;IAEpB;;;;;;;;;OASG;WACI,OAAO;IAEd;;;;;;;;;;;;;;OAcG;sBACe,eAAe;IAEjC;;;;;;;;;OASG;aACM,OAAO;IAEhB;;;;;;;;;OASG;eACQ,OAAO;kDA6OQ,CAAA;AAC5B,eAAe,GAAG,CAAA"}
+{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../../src/components/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA4B,MAAM,OAAO,CAAA;AAG3D,OAAO,EAAc,eAAe,EAAE,MAAM,cAAc,CAAA;AAG1D,MAAM,MAAM,QAAQ,GAChB,SAAS,GACT,WAAW,GACX,UAAU,GACV,OAAO,GACP,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,CAAA;AAEb,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,UAAU,GAAG,QAAQ,CAAA;AAEzD,MAAM,MAAM,OAAO,GAAG,SAAS,GAAG,MAAM,CAAA;AAExC;;;;;GAKG;AAEH,MAAM,MAAM,QAAQ,GAAG,IAAI,CACzB,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,EAC/B,IAAI,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,CACzC,GAAG;IACF;;;;;;;;;OASG;IACH,KAAK,EAAE,SAAS,CAAA;IAEhB;;;;;;;;;OASG;IACH,KAAK,CAAC,EAAE,QAAQ,CAAA;IAEhB;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAEhB;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,UAAU,CAAA;IAEpB;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;IAEd;;;;;;;;;;;;;;OAcG;IACH,eAAe,CAAC,EAAE,eAAe,CAAA;IAEjC;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAgPD,yTAAyT;AACzT,QAAA,MAAM,GAAG;IAtVP;;;;;;;;;OASG;WACI,SAAS;IAEhB;;;;;;;;;OASG;YACK,QAAQ;IAEhB;;;;;;;;;OASG;WACI,SAAS;IAEhB;;;;;;;;;;OAUG;cACO,UAAU;IAEpB;;;;;;;;;OASG;WACI,OAAO;IAEd;;;;;;;;;;;;;;OAcG;sBACe,eAAe;IAEjC;;;;;;;;;OASG;aACM,OAAO;IAEhB;;;;;;;;;OASG;eACQ,OAAO;kDAkPQ,CAAA;AAC5B,eAAe,GAAG,CAAA"}

package/dist/types/components/Tag/Tag.stories.d.ts

@@ -86,6 +86,10 @@ export declare const CustomColor: {
 export declare const WithIcons: {
     render: ({ ...args }: TagProps) => import("react/jsx-runtime").JSX.Element;
 };
+/** @summary `dashed` variant: outlined colors with a dashed border */
+export declare const Dashed: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+};
 export declare const Usage: {
     render: () => import("react/jsx-runtime").JSX.Element;
     tags: string[];

package/dist/types/components/Tag/Tag.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Tag/Tag.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAezB,OAAO,EAAO,QAAQ,EAAE,MAAM,cAAc,CAAA;AAO5C,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4Ce,CAAA;AAE5B,eAAe,OAAO,CAAA;AAuQtB,eAAO,MAAM,UAAU;0BA1PQ,QAAQ;;;;;;;;CA+PtC,CAAA;AAED,eAAO,MAAM,QAAQ;iCApByB,QAAQ;CAsBrD,CAAA;AAED,8FAA8F;AAC9F,eAAO,MAAM,KAAK;0BAxEkB,QAAQ;CA0E3C,CAAA;AAED,eAAO,MAAM,MAAM;0BAtQkB,QAAQ;CAwQ5C,CAAA;AAED,qGAAqG;AACrG,eAAO,MAAM,WAAW;0BA/QO,QAAQ;;;;;;;;CAwRtC,CAAA;AAED,eAAO,MAAM,SAAS;0BArNc,QAAQ;CAuN3C,CAAA;AAED,eAAO,MAAM,KAAK;;;CAejB,CAAA"}
+{"version":3,"file":"Tag.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Tag/Tag.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAezB,OAAO,EAAO,QAAQ,EAAE,MAAM,cAAc,CAAA;AAO5C,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4Ce,CAAA;AAE5B,eAAe,OAAO,CAAA;AAuQtB,eAAO,MAAM,UAAU;0BA1PQ,QAAQ;;;;;;;;CA+PtC,CAAA;AAED,eAAO,MAAM,QAAQ;iCApByB,QAAQ;CAsBrD,CAAA;AAED,8FAA8F;AAC9F,eAAO,MAAM,KAAK;0BAxEkB,QAAQ;CA0E3C,CAAA;AAED,eAAO,MAAM,MAAM;0BAtQkB,QAAQ;CAwQ5C,CAAA;AAED,qGAAqG;AACrG,eAAO,MAAM,WAAW;0BA/QO,QAAQ;;;;;;;;CAwRtC,CAAA;AAED,eAAO,MAAM,SAAS;0BArNc,QAAQ;CAuN3C,CAAA;AAED,sEAAsE;AACtE,eAAO,MAAM,MAAM;;CASlB,CAAA;AAED,eAAO,MAAM,KAAK;;;CAejB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carto/meridian-ds",
-  "version": "5.1.3",
+  "version": "5.1.4-alpha.0cc6abf.365",
   "description": "CARTO Meridian Design System",
   "type": "module",
   "scripts": {