react-restyle-components 0.4.22 → 0.4.24

package/lib/src/core-components/src/components/Breadcrumb/elements.js

@@ -0,0 +1,370 @@
+import { styled, css } from 'styled-components';
+import { breakpoints, getFontSize } from '../../utils/abstracts';
+import { tokens } from '../../utils/designTokens';
+// Simple Text component for internal use (basic span)
+export const Text = styled.span `
+  font-size: inherit;
+  color: inherit;
+  line-height: inherit;
+`;
+// CurrentPage component for the active/last breadcrumb item
+export const CurrentPage = styled.span `
+  font-size: inherit;
+  line-height: inherit;
+  font-weight: 600;
+  color: inherit;
+  display: inline-flex;
+  align-items: center;
+
+  /* Enhanced styling for pills variant */
+  ${({ $variant }) => $variant === 'pills' &&
+    css `
+      font-weight: 700;
+      letter-spacing: 0.02em;
+      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+    `}
+`;
+// Size configurations
+const sizeStyles = {
+    small: {
+        fontSize: getFontSize(0),
+        padding: `${tokens.spacing050} ${tokens.spacing100}`,
+        gap: tokens.spacing050,
+        iconSize: '12px',
+    },
+    medium: {
+        fontSize: getFontSize(1),
+        padding: `${tokens.spacing075} ${tokens.spacing150}`,
+        gap: tokens.spacing075,
+        iconSize: '14px',
+    },
+    large: {
+        fontSize: getFontSize(2),
+        padding: `${tokens.spacing100} ${tokens.spacing200}`,
+        gap: tokens.spacing100,
+        iconSize: '16px',
+    },
+};
+export const Container = styled.nav `
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: ${({ $size }) => sizeStyles[$size].gap};
+  width: 100%;
+  overflow-x: auto;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* Variant: contained */
+  ${({ $variant }) => $variant === 'contained' &&
+    css `
+      background: linear-gradient(
+        135deg,
+        ${tokens.surface || '#f8f9fa'} 0%,
+        #f1f3f5 100%
+      );
+      border: 1px solid ${tokens.outline || '#e9ecef'};
+      border-radius: ${tokens.borderRadius100 || '8px'};
+      padding: ${tokens.spacing100} ${tokens.spacing200};
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+    `}
+
+  /* Variant: pills */
+  ${({ $variant }) => $variant === 'pills' &&
+    css `
+      background: transparent;
+      gap: ${tokens.spacing050};
+    `}
+
+  /* Responsive: allow wrapping on larger screens */
+  ${breakpoints.md} {
+    flex-wrap: wrap;
+  }
+
+  /* Smooth scroll behavior */
+  scroll-behavior: smooth;
+  -webkit-overflow-scrolling: touch;
+`;
+export const BreadcrumbList = styled.ol `
+  all: unset;
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: ${({ $size }) => sizeStyles[$size].gap};
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  ${breakpoints.md} {
+    flex-wrap: wrap;
+  }
+`;
+export const Item = styled.li `
+  display: flex;
+  align-items: center;
+  gap: ${({ $size }) => sizeStyles[$size].gap};
+  position: relative;
+  transition: all 0.2s ease;
+
+  /* Base text styles */
+  color: ${({ $isActive }) => $isActive
+    ? tokens.onSurface || '#1a1a2e'
+    : tokens.onSurface
+        ? `${tokens.onSurface}99`
+        : '#6c757d'};
+  font-size: ${({ $size }) => sizeStyles[$size].fontSize};
+  font-weight: ${({ $isActive }) => ($isActive ? 600 : 400)};
+  line-height: 1.5;
+  white-space: nowrap;
+
+  /* Links and actions styling */
+  [data-aui='link'],
+  [data-aui='action.inline'],
+  a {
+    color: ${tokens.primary || '#454cbf'};
+    text-decoration: none;
+    transition: all 0.2s ease;
+    padding: ${({ $size }) => $size === 'small'
+    ? `${tokens.spacing025} ${tokens.spacing050}`
+    : $size === 'large'
+        ? `${tokens.spacing075} ${tokens.spacing100}`
+        : `${tokens.spacing050} ${tokens.spacing075}`};
+    border-radius: ${tokens.borderRadius050 || '4px'};
+
+    &:hover {
+      color: ${tokens.primary || '#454cbf'};
+      background: ${tokens.primary
+    ? `${tokens.primary}10`
+    : 'rgba(69, 76, 191, 0.08)'};
+      text-decoration: underline;
+    }
+
+    &:focus-visible {
+      outline: 2px solid ${tokens.primary || '#454cbf'};
+      outline-offset: 2px;
+    }
+  }
+
+  /* Pills variant styling */
+  ${({ $variant, $isActive, $size }) => $variant === 'pills' &&
+    css `
+      background: ${$isActive
+        ? `linear-gradient(135deg, ${tokens.primary || '#454cbf'} 0%, ${tokens.primary ? tokens.primary + 'dd' : '#5a61c9'} 100%)`
+        : tokens.surface || '#f8f9fa'};
+      color: ${$isActive
+        ? tokens.white || '#ffffff'
+        : tokens.onSurface || '#1a1a2e'};
+      padding: ${sizeStyles[$size].padding};
+      border-radius: ${tokens.borderRadius200 || '16px'};
+      border: 1px solid
+        ${$isActive ? 'transparent' : tokens.outline || '#e9ecef'};
+      box-shadow: ${$isActive
+        ? '0 2px 8px rgba(69, 76, 191, 0.3)'
+        : '0 1px 2px rgba(0, 0, 0, 0.05)'};
+      transition: all 0.25s ease;
+
+      &:hover:not(:last-child) {
+        transform: translateY(-1px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      }
+
+      [data-aui='link'],
+      [data-aui='action.inline'],
+      a {
+        color: inherit;
+        background: transparent;
+        padding: 0;
+
+        &:hover {
+          background: transparent;
+          text-decoration: none;
+        }
+      }
+    `}
+
+  /* Collapsed item (ellipsis) */
+  ${({ $isCollapsed }) => $isCollapsed &&
+    css `
+      cursor: pointer;
+      padding: ${tokens.spacing050} ${tokens.spacing075};
+      border-radius: ${tokens.borderRadius050 || '4px'};
+      background: ${tokens.surface || '#f8f9fa'};
+      border: 1px solid ${tokens.outline || '#e9ecef'};
+
+      &:hover {
+        background: ${tokens.primary
+        ? `${tokens.primary}10`
+        : 'rgba(69, 76, 191, 0.08)'};
+        border-color: ${tokens.primary || '#454cbf'};
+      }
+    `}
+
+  /* Hide on mobile for collapsed items */
+  ${({ $isCollapsed }) => $isCollapsed &&
+    css `
+      ${breakpoints.xs} {
+        display: none;
+      }
+    `}
+`;
+export const Separator = styled.span `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${tokens.onSurface ? `${tokens.onSurface}66` : '#adb5bd'};
+  flex-shrink: 0;
+  transition: color 0.2s ease;
+
+  /* Icon styling */
+  [data-aui='icon'] {
+    color: inherit;
+    width: ${({ $size }) => sizeStyles[$size].iconSize};
+    height: ${({ $size }) => sizeStyles[$size].iconSize};
+  }
+
+  /* Hide separator on last item via CSS */
+  ${Item}:last-child & {
+    display: none;
+  }
+`;
+export const SeparatorText = styled.span `
+  font-size: ${({ $size }) => sizeStyles[$size].fontSize};
+  color: inherit;
+  user-select: none;
+`;
+export const OverflowDots = styled.span `
+  display: none;
+  color: ${tokens.onSurface ? `${tokens.onSurface}80` : '#6c757d'};
+  font-weight: 500;
+  letter-spacing: 2px;
+  padding: ${tokens.spacing050} ${tokens.spacing075};
+  border-radius: ${tokens.borderRadius050 || '4px'};
+  background: ${tokens.surface || '#f8f9fa'};
+  border: 1px solid ${tokens.outline || '#e9ecef'};
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-size: ${({ $size }) => sizeStyles[$size].fontSize};
+
+  &:hover {
+    background: ${tokens.primary
+    ? `${tokens.primary}10`
+    : 'rgba(69, 76, 191, 0.08)'};
+    border-color: ${tokens.primary || '#454cbf'};
+    color: ${tokens.primary || '#454cbf'};
+  }
+
+  ${breakpoints.md} {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+`;
+export const HomeIcon = styled.span `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: ${({ $size }) => sizeStyles[$size].iconSize};
+  height: ${({ $size }) => sizeStyles[$size].iconSize};
+  color: ${tokens.primary || '#454cbf'};
+  transition: all 0.2s ease;
+
+  [data-aui='icon'] {
+    color: inherit;
+    width: 100%;
+    height: 100%;
+  }
+
+  &:hover {
+    transform: scale(1.1);
+  }
+`;
+export const IconWrapper = styled.span `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: ${({ $size }) => $size === 'small' ? '16px' : $size === 'large' ? '24px' : '20px'};
+  height: ${({ $size }) => $size === 'small' ? '16px' : $size === 'large' ? '24px' : '20px'};
+
+  [data-aui='icon'],
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+`;
+export const MobileMenuButton = styled.button `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: ${tokens.surface || '#f8f9fa'};
+  border: 1px solid ${tokens.outline || '#e9ecef'};
+  border-radius: ${tokens.borderRadius050 || '4px'};
+  padding: ${({ $size }) => $size === 'small'
+    ? tokens.spacing050
+    : $size === 'large'
+        ? tokens.spacing100
+        : tokens.spacing075};
+  cursor: pointer;
+  transition: all 0.2s ease;
+  color: ${tokens.onSurface || '#1a1a2e'};
+
+  &:hover {
+    background: ${tokens.primary
+    ? `${tokens.primary}10`
+    : 'rgba(69, 76, 191, 0.08)'};
+    border-color: ${tokens.primary || '#454cbf'};
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${tokens.primary || '#454cbf'};
+    outline-offset: 2px;
+  }
+
+  /* Only show on mobile */
+  ${breakpoints.sm} {
+    display: none;
+  }
+`;
+export const DropdownMenu = styled.div `
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 100;
+  min-width: 200px;
+  background: ${tokens.surface || '#ffffff'};
+  border: 1px solid ${tokens.outline || '#e9ecef'};
+  border-radius: ${tokens.borderRadius100 || '8px'};
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+  padding: ${tokens.spacing050};
+  opacity: ${({ $isOpen }) => ($isOpen ? 1 : 0)};
+  visibility: ${({ $isOpen }) => ($isOpen ? 'visible' : 'hidden')};
+  transform: ${({ $isOpen }) => $isOpen ? 'translateY(4px)' : 'translateY(-8px)'};
+  transition: all 0.2s ease;
+`;
+export const DropdownItem = styled.a `
+  display: flex;
+  align-items: center;
+  gap: ${tokens.spacing100};
+  padding: ${tokens.spacing100} ${tokens.spacing150};
+  color: ${tokens.onSurface || '#1a1a2e'};
+  text-decoration: none;
+  border-radius: ${tokens.borderRadius050 || '4px'};
+  transition: all 0.15s ease;
+  font-size: ${getFontSize(1)};
+
+  &:hover {
+    background: ${tokens.primary
+    ? `${tokens.primary}10`
+    : 'rgba(69, 76, 191, 0.08)'};
+    color: ${tokens.primary || '#454cbf'};
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${tokens.primary || '#454cbf'};
+    outline-offset: -2px;
+  }
+`;

package/lib/src/core-components/src/components/Breadcrumb/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Breadcrumb';
+export * from './types';
+export { Text, CurrentPage } from './elements';
+//# sourceMappingURL=index.d.ts.map

package/lib/src/core-components/src/components/Breadcrumb/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Breadcrumb/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,OAAO,EAAC,IAAI,EAAE,WAAW,EAAC,MAAM,YAAY,CAAC"}

package/lib/src/core-components/src/components/Breadcrumb/index.js

@@ -0,0 +1,3 @@
+export * from './Breadcrumb';
+export * from './types';
+export { Text, CurrentPage } from './elements';

package/lib/src/core-components/src/components/Breadcrumb/types.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export declare const BREADCRUMB_VARIANTS: readonly ["default", "contained", "pills"];
+export type BreadcrumbVariant = (typeof BREADCRUMB_VARIANTS)[number];
+export declare const BREADCRUMB_SIZES: readonly ["small", "medium", "large"];
+export type BreadcrumbSize = (typeof BREADCRUMB_SIZES)[number];
+export declare const BREADCRUMB_SEPARATOR_TYPES: readonly ["chevron", "slash", "arrow", "dot"];
+export type BreadcrumbSeparatorType = (typeof BREADCRUMB_SEPARATOR_TYPES)[number];
+export interface BreadcrumbItemType {
+    label: string;
+    href?: string;
+    icon?: React.ReactNode;
+    isActive?: boolean;
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/src/core-components/src/components/Breadcrumb/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Breadcrumb/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,mBAAmB,4CAA6C,CAAC;AAC9E,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAC;AAErE,eAAO,MAAM,gBAAgB,uCAAwC,CAAC;AACtE,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAC;AAE/D,eAAO,MAAM,0BAA0B,+CAAgD,CAAC;AACxF,MAAM,MAAM,uBAAuB,GAAG,CAAC,OAAO,0BAA0B,CAAC,CAAC,MAAM,CAAC,CAAC;AAElF,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}

package/lib/src/core-components/src/components/Breadcrumb/types.js

@@ -0,0 +1,3 @@
+export const BREADCRUMB_VARIANTS = ['default', 'contained', 'pills'];
+export const BREADCRUMB_SIZES = ['small', 'medium', 'large'];
+export const BREADCRUMB_SEPARATOR_TYPES = ['chevron', 'slash', 'arrow', 'dot'];

package/lib/src/core-components/src/components/Button/Button.spec.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { Button } from './button.component';
-import { TooltipProvider } from '../Tooltip/tooltip.component';
+import { TooltipProvider } from '../Tooltip';
 describe('Renders a button', () => {
     it('Renders the supplied children', () => {
         render(_jsx(Button, { children: "Hello" }));

package/lib/src/core-components/src/components/Button/button.component.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { Tooltip } from '../Tooltip/tooltip.component';
+import { Tooltip } from '../Tooltip';
 import s from '../../tc.module.css';
 import { cn } from '../../utils';
 export const Button = forwardRef(({ variant = 'solid', tooltip, disabled = false, type = 'button', className, classNames = {}, styles = {}, children, ...args }, ref) => {

package/lib/src/core-components/src/components/Chip/Chip.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ChipProps, ChipGroupProps } from './types';
+export declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const ChipGroup: React.ForwardRefExoticComponent<ChipGroupProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Chip.d.ts.map

package/lib/src/core-components/src/components/Chip/Chip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Chip/Chip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAgC,MAAM,OAAO,CAAC;AASrD,OAAO,EAAC,SAAS,EAAE,cAAc,EAAC,MAAM,SAAS,CAAC;AAgBlD,eAAO,MAAM,IAAI,qFA4HhB,CAAC;AAIF,eAAO,MAAM,SAAS,uFA4BrB,CAAC"}

package/lib/src/core-components/src/components/Chip/Chip.js

@@ -0,0 +1,64 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback } from 'react';
+import { ChipElement, ChipLabel, IconWrapper, AvatarWrapper, DeleteButton, ChipGroupElement, } from './elements';
+// Default icons
+const CheckIcon = () => (_jsx("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("polyline", { points: "3 8 6 11 13 4" }) }));
+const CloseIcon = () => (_jsxs("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("line", { x1: "4", y1: "4", x2: "12", y2: "12" }), _jsx("line", { x1: "12", y1: "4", x2: "4", y2: "12" })] }));
+export const Chip = forwardRef(function ChipComponent(props, ref) {
+    const { label, variant = 'soft', size = 'medium', color = 'default', chipType = 'button', selected = false, disabled = false, iconLeft, iconRight, deletable = false, onDelete, onClick, avatar, className, ...rest } = props;
+    const handleClick = useCallback((e) => {
+        if (disabled)
+            return;
+        onClick?.(e);
+    }, [disabled, onClick]);
+    const handleDelete = useCallback((e) => {
+        e.stopPropagation();
+        if (disabled)
+            return;
+        onDelete?.();
+    }, [disabled, onDelete]);
+    // Determine left icon based on chip type
+    const renderLeftIcon = () => {
+        if (avatar) {
+            return _jsx(AvatarWrapper, { "$size": size, children: avatar });
+        }
+        if (iconLeft) {
+            return (_jsx(IconWrapper, { "$size": size, "$side": "left", children: iconLeft }));
+        }
+        // Show checkmark for selection chips when selected
+        if (chipType === 'selection' && selected) {
+            return (_jsx(IconWrapper, { "$size": size, "$side": "left", children: _jsx(CheckIcon, {}) }));
+        }
+        return null;
+    };
+    // Determine right icon based on chip type
+    const renderRightIcon = () => {
+        // Filter chips show close icon when selected
+        if (chipType === 'filter' && selected) {
+            return (_jsx(DeleteButton, { "$size": size, onClick: handleDelete, role: "button", "aria-label": "Remove filter", children: _jsx(CloseIcon, {}) }));
+        }
+        // Deletable chips show close icon
+        if (deletable) {
+            return (_jsx(DeleteButton, { "$size": size, onClick: handleDelete, role: "button", "aria-label": "Delete", children: _jsx(CloseIcon, {}) }));
+        }
+        if (iconRight) {
+            return (_jsx(IconWrapper, { "$size": size, "$side": "right", children: iconRight }));
+        }
+        return null;
+    };
+    const getRole = () => {
+        if (chipType === 'selection')
+            return 'checkbox';
+        if (chipType === 'filter')
+            return 'checkbox';
+        return 'button';
+    };
+    return (_jsxs(ChipElement, { ref: ref, "$variant": variant, "$size": size, "$color": color, "$selected": selected, "$disabled": disabled, disabled: disabled, onClick: handleClick, role: getRole(), "aria-checked": chipType === 'selection' || chipType === 'filter' ? selected : undefined, "aria-pressed": chipType === 'button' ? selected : undefined, "data-aui": "chip", className: className, type: "button", ...rest, children: [renderLeftIcon(), _jsx(ChipLabel, { children: label }), renderRightIcon()] }));
+});
+Chip.displayName = 'Chip';
+export const ChipGroup = forwardRef(function ChipGroupComponent(props, ref) {
+    const { children, gap = '8px', wrap = true, scrollable = false, direction = 'row', className, ...rest } = props;
+    return (_jsx(ChipGroupElement, { ref: ref, "$gap": gap, "$wrap": wrap, "$scrollable": scrollable, "$direction": direction, "data-aui": "chip-group", className: className, role: "group", ...rest, children: children }));
+});
+ChipGroup.displayName = 'ChipGroup';

package/lib/src/core-components/src/components/Chip/elements.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import { ChipVariant, ChipSize, ChipColor } from './types';
+export declare const ChipElement: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    $variant: ChipVariant;
+    $size: ChipSize;
+    $color: ChipColor;
+    $selected: boolean;
+    $disabled: boolean;
+}>> & string;
+export declare const IconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    $size: ChipSize;
+    $side: 'left' | 'right';
+}>> & string;
+export declare const AvatarWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    $size: ChipSize;
+}>> & string;
+export declare const DeleteButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    $size: ChipSize;
+}>> & string;
+export declare const ChipLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const ChipGroupElement: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $gap: string;
+    $wrap: boolean;
+    $scrollable: boolean;
+    $direction: 'row' | 'column';
+}>> & string;
+//# sourceMappingURL=elements.d.ts.map

package/lib/src/core-components/src/components/Chip/elements.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"elements.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Chip/elements.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAC,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAC,MAAM,SAAS,CAAC;AA2IzD,eAAO,MAAM,WAAW;cACZ,WAAW;WACd,QAAQ;YACP,SAAS;eACN,OAAO;eACP,OAAO;YAmDnB,CAAC;AAEF,eAAO,MAAM,WAAW;WACf,QAAQ;WACR,MAAM,GAAG,OAAO;YAsBxB,CAAC;AAEF,eAAO,MAAM,aAAa;WACjB,QAAQ;YAoBhB,CAAC;AAEF,eAAO,MAAM,YAAY;WAChB,QAAQ;YAsBhB,CAAC;AAEF,eAAO,MAAM,SAAS,+NAErB,CAAC;AAEF,eAAO,MAAM,gBAAgB;UACrB,MAAM;WACL,OAAO;iBACD,OAAO;gBACR,KAAK,GAAG,QAAQ;YAkC7B,CAAC"}