gantri-components 2.234.0 → 2.235.6

package/CLAUDE.md

@@ -328,6 +328,63 @@ Vertical stack with padding.
 
 Always use gantri-components Modal, never custom modal wrappers.
 
+### Picture (NEW — prefer over Image for new code)
+
+Cloudinary-aware image component. Auto-detects source type (no `source` prop), exposes a flat transformation API, uses native `<picture>` / `<img srcset sizes>` with `loading="lazy"` by default.
+
+```typescript
+// Static, dynamic, absolute, video-frame URLs are auto-detected
+<Picture src="mantle/about/hero.jpg" alt="Our team" aspectRatio="16:9" />
+
+// Flat transformation API (no nested `transformations` object)
+<Picture
+  src="..."
+  alt="..."
+  width={800}
+  aspectRatio="4:3"
+  crop="fill"
+  gravity="auto"
+  quality="auto"
+  format="auto"
+  sharpen={150}
+  effects={['grayscale']}
+/>
+
+// Art direction — different image per breakpoint
+<Picture
+  src={{ sm: 'hero-mobile.jpg', lg: 'hero-desktop.jpg' }}
+  alt="..."
+  aspectRatio={{ sm: '4:5', lg: '21:9' }}
+/>
+
+// Above-the-fold / hero — opt-out of lazy loading
+<Picture src="hero.jpg" alt="..." priority />
+
+// Fill mode — fills position:relative parent
+<Box position="relative" width="100%" height="400px">
+  <Picture src="..." alt="..." fill objectFit="cover" />
+</Box>
+
+// Aspect ratio + maxHeight cap
+<Picture src="..." alt="..." aspectRatio="21:9" maxHeight="400px" />
+
+// Blur placeholder via Cloudinary LQIP
+<Picture src="..." alt="..." aspectRatio="16:9" placeholder="blur" />
+```
+
+**Key differences from legacy `Image`:**
+- No `source` prop (auto-detected from URL)
+- No nested `transformations` (all flat: `crop`, `gravity`, `quality`, `format`, etc.)
+- No `transformationsVariant` shorthand (`f`/`h`/`q`)
+- Native `srcset` / `sizes` (browser picks size based on viewport)
+- `priority` boolean for hero images (sets `loading="eager"` + `fetchpriority="high"`)
+- `fill` mode (Next.js-style)
+- CSS fade-in (no `react-spring`)
+
+**Defaults:** `loading="lazy"`, `decoding="async"`, `f_auto`, `q_auto`, `dpr_auto`, fallback `src` capped at 640px (mobile-friendly for SEO bots).
+
+The legacy `Image` continues to work — migrate progressively.
+
 ### Dropdown
 
 ```typescript
@@ -367,6 +424,24 @@ Wraps any component for Formik form binding:
 - Shows "(Optional)" when `required` is false/undefined
 - Used internally by TextField, TextArea, OptionSelector
 
+### ColorPicker
+
+Swatch grid for selecting product colors. `variant` controls swatch size and accepts a single value OR a responsive object.
+
+```typescript
+// Single variant
+<ColorPicker variant="large" value={color} onValueChange={setColor} />
+
+// Responsive variant — small swatches on mobile, large on desktop
+<ColorPicker
+  variant={{ sm: 'small', md: 'large', lg: 'x-large' }}
+  value={color}
+  onValueChange={setColor}
+/>
+```
+
+**Variants:** `'small'` | `'large'` | `'x-large'`. Sizes scale across classic and modern themes.
+
 ### Checkbox / Radio / Toggle
 
 **How to identify from Figma:**
@@ -388,15 +463,50 @@ Wraps any component for Formik form binding:
 - Styled components: wrap dynamic styles in `${() => css\`\`}`
 - Use `$` prefix for styled-component-only props
 - 8px spacing grid: `x`=8px, `2x`=16px, `.5x`=4px
+- `css` is re-exported from `gantri-components` — `import { css } from 'gantri-components'` (no separate styled-components import needed for templates)
+
+### Responsive CSS — `mediaStyle` (preferred over `media.lessThan`)
+
+`mediaStyle` colocates lg/md/sm CSS blocks in one declaration, mirroring `ResolutionAwareProp` cascade.
+
+```typescript
+import styled, { mediaStyle, css } from 'gantri-components';
+
+const StyledCard = styled.div`
+  border: 1px solid var(--divider-t1);
+
+  ${mediaStyle({
+    lg: css`border-radius: 16px;`,  // base — applies to all
+    md: css`border-radius: 8px;`,   // override at <1024px
+    sm: css`border-radius: 4px;`,   // override at <720px
+  })}
+`;
+```
+
+- `lg` is the base (no media query); cascades to md and sm if not overridden.
+- `md` wraps in `@media (max-width: 1024px)`.
+- `sm` wraps in `@media (max-width: 720px)`.
+- Each block must be a `css` tagged template (or function returning one) — enables editor autocomplete.
+
+**`media` (legacy) is deprecated** for `lessThan` usage but kept for `greaterThan` / `between` cases.
 
 ## Exports
 ```typescript
 import {
+  // Components
   Button, TextField, TextArea, OptionSelector, Banner, Label,
   Checkbox, Radio, RadioList, Toggle, Icon, Typography,
   Flex, Box, Grid, Cell, Modal, Stack, FormikInput,
+  Image,        // legacy Cloudinary image (still supported)
+  Picture,      // new Cloudinary image — prefer for new code
+  ColorPicker,
+  // Themes
   lightTheme, darkTheme, modernLightTheme, modernDarkTheme,
-  ThemeProvider, createTheme, themeStyle,
+  ThemeProvider, createTheme,
+  // Styling helpers
+  themeStyle,   // theme-variant CSS blocks
+  mediaStyle,   // responsive CSS blocks (lg → md → sm cascade)
+  css,          // re-exported from styled-components
   palette, spacing, media,
 } from 'gantri-components';
 ```

package/dist/components/button-menu/button-menu.d.ts

@@ -1,6 +1,3 @@
 import React from 'react';
 import { ButtonMenuProps } from './button-menu.types';
-export declare const ButtonMenu: {
-    <T extends Record<any, any>>(props: ButtonMenuProps<T>): React.JSX.Element;
-    defaultProps: Partial<ButtonMenuProps<Record<string, unknown>>>;
-};
+export declare const ButtonMenu: <T extends Record<any, any>>(incoming: ButtonMenuProps<T>) => React.JSX.Element;

package/dist/components/checkbox-list/checkbox-list.d.ts

@@ -1,6 +1,3 @@
 import React from 'react';
 import { CheckboxListProps } from './checkbox-list.types';
-export declare const CheckboxList: {
-    <Value extends string | Record<any, any>>(props: CheckboxListProps<Value>): React.JSX.Element;
-    defaultProps: import("./checkbox-list.types").CheckboxListDefaultProps<string | Record<any, any>>;
-};
+export declare const CheckboxList: <Value extends string | Record<any, any>>(incoming: CheckboxListProps<Value>) => React.JSX.Element;

package/dist/components/color-picker/color-picker.types.d.ts

@@ -1,6 +1,8 @@
 import { ChangeEvent } from 'react';
 import { ProductColorCode } from '../../styles/theme';
+import { ResolutionAwareProp } from '../../types/resolution-aware-prop.type';
 export type ColorPickerVariant = 'x-large' | 'large' | 'small';
+export type ColorPickerVariantProp = ResolutionAwareProp<ColorPickerVariant>;
 export interface ColorPickerProps extends Partial<ColorPickerDefaultProps> {
     labelText?: string;
     labelTx?: string;
@@ -21,7 +23,11 @@ export interface ColorPickerDefaultProps {
      * Defaults to `true` — opt in by passing `hideTooltips={false}`.
      */
     hideTooltips: boolean;
-    variant: ColorPickerVariant;
+    /**
+     * Swatch size variant. Accepts a single value or a responsive object
+     * (`{ sm, md, lg }`) that follows the standard `lg → md → sm` cascade.
+     */
+    variant: ColorPickerVariantProp;
 }
 export interface ColorDetails {
     code: ProductColorCode;

package/dist/components/color-picker/components/color-picker-item/color-picker-item.styles.d.ts

@@ -1,17 +1,16 @@
 /// <reference types="react" />
 /// <reference types="react" />
 import { CSSProperties } from 'styled-components';
-import { ColorPickerVariant } from '../../color-picker.types';
+import { ColorPickerVariantProp } from '../../color-picker.types';
 import { ProductColorCode } from '../../../../styles/theme';
 interface StyledColorOutlineProps {
     $isClickable: boolean;
     $selected?: boolean;
     $size?: CSSProperties['width'];
-    $variant?: ColorPickerVariant;
+    $variant?: ColorPickerVariantProp;
 }
 export declare const StyledColorOutline: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledColorOutlineProps>> & string;
 export declare const StyledColor: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react-spring").AnimatedProps<{
-    key?: import("react").Key | null | undefined;
     hidden?: boolean | undefined;
     color?: string | undefined;
     content?: string | undefined;
@@ -862,6 +861,7 @@ export declare const StyledColor: import("styled-components/dist/types").IStyled
         matrix?: readonly [number, number, number, number, number, number] | undefined;
         matrix3d?: readonly [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number] | undefined;
     } | undefined;
+    key?: import("react").Key | null | undefined;
     children?: import("react-i18next").ReactI18NextChild | Iterable<import("react-i18next").ReactI18NextChild>;
     slot?: string | undefined;
     title?: string | undefined;

package/dist/components/color-picker/components/color-picker-item/color-picker-item.types.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties } from 'styled-components';
-import { ColorDetails, ColorPickerVariant } from '../../color-picker.types';
+import { ColorDetails, ColorPickerVariantProp } from '../../color-picker.types';
 export interface ColorPickerItemProps extends Partial<ColorPickerItemDefaultProps> {
     active?: boolean;
     color: ColorDetails;
@@ -9,5 +9,5 @@ export interface ColorPickerItemProps extends Partial<ColorPickerItemDefaultProp
     size?: CSSProperties['width'];
 }
 export interface ColorPickerItemDefaultProps {
-    variant: ColorPickerVariant;
+    variant: ColorPickerVariantProp;
 }

package/dist/components/dropdown-menu/dropdown-menu.d.ts

@@ -1,6 +1,3 @@
 import React from 'react';
 import { DropdownMenuProps } from './dropdown-menu.types';
-export declare const DropdownMenu: {
-    <T extends Record<any, any>>(props: DropdownMenuProps<T>): React.JSX.Element;
-    defaultProps: Partial<DropdownMenuProps<Record<any, any>>>;
-};
+export declare const DropdownMenu: <T extends Record<any, any>>(incoming: DropdownMenuProps<T>) => React.JSX.Element;

package/dist/components/file-uploader/components/file-uploader-thumbnail-variant/file-uploader-thumbnail-variant.d.ts

@@ -1,6 +1,3 @@
 import React from 'react';
 import { FileUploaderThumbnailVariantProps } from './file-uploader-thumbnail-variant.types';
-export declare const FileUploaderThumbnailVariant: {
-    (props: FileUploaderThumbnailVariantProps): React.JSX.Element;
-    defaultProps: Pick<FileUploaderThumbnailVariantProps, "thumbnailSize">;
-};
+export declare const FileUploaderThumbnailVariant: (incoming: FileUploaderThumbnailVariantProps) => React.JSX.Element;

package/dist/components/file-uploader/file-uploader.d.ts

@@ -1,6 +1,3 @@
 import React from 'react';
 import { FileUploaderProps } from './file-uploader.types';
-export declare const FileUploader: {
-    (props: FileUploaderProps): React.JSX.Element;
-    defaultProps: import("./file-uploader.types").FileUploaderDefaultProps;
-};
+export declare const FileUploader: (incoming: FileUploaderProps) => React.JSX.Element;

package/dist/components/icon/generated/work/Moon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const SvgMoon: React.NamedExoticComponent<object>;
+export default SvgMoon;

package/dist/components/icon/generated/work/Moon24.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const SvgMoon24: React.NamedExoticComponent<object>;
+export default SvgMoon24;

package/dist/components/icon/generated/work/index.d.ts

@@ -22,6 +22,8 @@ export { default as LightBulb } from './LightBulb';
 export { default as LightBulb24 } from './LightBulb24';
 export { default as Mask } from './Mask';
 export { default as Mask24 } from './Mask24';
+export { default as Moon } from './Moon';
+export { default as Moon24 } from './Moon24';
 export { default as NoEntry } from './NoEntry';
 export { default as NoEntry24 } from './NoEntry24';
 export { default as PCircle } from './PCircle';

package/dist/components/icon/icon.type.d.ts

@@ -1,2 +1,2 @@
-export declare const IconsList: readonly ["actions:funnel", "actions:funnel_24", "actions:funnel_filled", "actions:funnel_filled_24", "actions:gear", "actions:gear_24", "actions:life_buoy", "actions:life_buoy_24", "actions:link", "actions:link_24", "actions:star", "actions:star_24", "actions:star_filled", "actions:star_filled_24", "actions:star_half", "actions:star_half_24", "actions:stroke_play", "actions:stroke_play_24", "actions:thumbs_up", "actions:thumbs_up_24", "actions:trash_can", "actions:trash_can_24", "alert:bell", "alert:bell_24", "alert:bell_filled", "alert:bell_filled_24", "alert:i_circle", "alert:i_circle_24", "alert:lightning_bolt", "alert:lightning_bolt_24", "alert:lightning_bolt_filled", "alert:lightning_bolt_filled_24", "alert:question_mark_circle", "alert:question_mark_circle_24", "alert:warning_triangle", "alert:warning_triangle_24", "animated:loader", "arrows:arrow_chevron_double_down", "arrows:arrow_chevron_double_down_24", "arrows:arrow_chevron_double_left", "arrows:arrow_chevron_double_left_24", "arrows:arrow_chevron_double_right", "arrows:arrow_chevron_double_right_24", "arrows:arrow_chevron_double_up", "arrows:arrow_chevron_double_up_24", "arrows:arrow_chevron_down", "arrows:arrow_chevron_down_24", "arrows:arrow_chevron_left", "arrows:arrow_chevron_left_24", "arrows:arrow_chevron_right", "arrows:arrow_chevron_right_24", "arrows:arrow_chevron_up", "arrows:arrow_chevron_up_24", "arrows:arrow_diag", "arrows:arrow_diag_24", "arrows:arrow_down", "arrows:arrow_down_24", "arrows:arrow_download", "arrows:arrow_download_24", "arrows:arrow_external", "arrows:arrow_external_24", "arrows:arrow_left", "arrows:arrow_left_24", "arrows:arrow_line_down", "arrows:arrow_line_down_24", "arrows:arrow_line_left", "arrows:arrow_line_left_24", "arrows:arrow_line_right", "arrows:arrow_line_right_24", "arrows:arrow_line_up", "arrows:arrow_line_up_24", "arrows:arrow_return", "arrows:arrow_right", "arrows:arrow_right_24", "arrows:arrow_rotate_two", "arrows:arrow_rotate_two_24", "arrows:arrow_triangle_down", "arrows:arrow_triangle_down_24", "arrows:arrow_triangle_left", "arrows:arrow_triangle_left_24", "arrows:arrow_triangle_right", "arrows:arrow_triangle_right_24", "arrows:arrow_triangle_up", "arrows:arrow_triangle_up_24", "arrows:arrow_triangle_updown", "arrows:arrow_triangle_updown_24", "arrows:arrow_triangle_updown_down_filled", "arrows:arrow_triangle_updown_down_filled_24", "arrows:arrow_triangle_updown_filled", "arrows:arrow_triangle_updown_filled_24", "arrows:arrow_triangle_updown_top_filled", "arrows:arrow_triangle_updown_top_filled_24", "arrows:arrow_up", "arrows:arrow_up_24", "arrows:arrow_updown", "arrows:arrow_updown_24", "arrows:arrow_updown_filled", "arrows:arrow_updown_filled_24", "arrows:arrow_upload", "arrows:arrow_upload_24", "data:chart_bar", "data:chart_bar_24", "docs:document_blank", "docs:document_blank_24", "docs:document_lines", "docs:document_lines_24", "docs:pencil", "docs:pencil_24", "location:house", "location:house_24", "location:location_california", "location:location_california_24", "location:location_pin", "location:location_pin_24", "logos:logo_affirm", "logos:logo_affirm_colored", "logos:logo_apple", "logos:logo_apple_text", "logos:logo_apple_text_24", "logos:logo_behance", "logos:logo_facebook", "logos:logo_gantri", "logos:logo_gantri_made", "logos:logo_gantri_made_collapsed", "logos:logo_github", "logos:logo_google", "logos:logo_google_text", "logos:logo_google_text_24", "logos:logo_instagram", "logos:logo_linkedin", "logos:logo_pinterest", "logos:logo_tiktok", "logos:logo_twitter", "logos:logo_yotpo", "logos:logo_youtube", "machine:difficulty_easy", "machine:difficulty_hard", "machine:difficulty_moderate", "machine:difficulty_multiple", "machine:laptop", "media:audio", "media:audio_24", "media:photo", "media:photo_24", "media:photo_filled", "media:photo_filled_24", "media:video", "media:video_24", "payment:bank", "payment:cash", "payment:cash_24", "payment:credit_card", "payment:credit_card_24", "payment:gift_box", "payment:gift_box_24", "payment:gift_card", "payment:gift_card_24", "payment:shopping_bag", "payment:shopping_bag_24", "people:people", "people:people_24", "people:person", "people:person_24", "people:person_outline", "people:person_outline_24", "time:calendar", "time:calendar_24", "time:clock", "time:clock_24", "time:clock_filled", "time:clock_filled_24", "ui-control:award_ribbon", "ui-control:check_mark", "ui-control:check_mark_24", "ui-control:check_mark_circle_filled", "ui-control:check_mark_circle_filled_24", "ui-control:drag", "ui-control:email", "ui-control:email_24", "ui-control:exclamation_circle_filled", "ui-control:exclamation_circle_filled_24", "ui-control:globe", "ui-control:globe_24", "ui-control:grid", "ui-control:grid_1", "ui-control:grid_24", "ui-control:grid_4", "ui-control:jbox", "ui-control:left_quote", "ui-control:lines_three", "ui-control:lines_three_24", "ui-control:lines_three_vertical", "ui-control:lines_three_vertical_24", "ui-control:lines_two", "ui-control:lines_two_24", "ui-control:lines_two_dots", "ui-control:lines_two_dots_24", "ui-control:material_opaque", "ui-control:material_translucent", "ui-control:minus", "ui-control:minus_24", "ui-control:minus_circle", "ui-control:minus_circle_24", "ui-control:minus_circle_filled", "ui-control:minus_circle_filled_24", "ui-control:package_return", "ui-control:package_return_24", "ui-control:pause", "ui-control:pause_24", "ui-control:phone", "ui-control:phone_24", "ui-control:play", "ui-control:plug", "ui-control:plus", "ui-control:plus_24", "ui-control:plus_circle", "ui-control:plus_circle_24", "ui-control:plus_circle_filled", "ui-control:plus_circle_filled_24", "ui-control:rod_double", "ui-control:rod_single", "ui-control:shape_curved", "ui-control:shape_flat", "ui-control:shape_variable", "ui-control:shield", "ui-control:shield_24", "ui-control:shield_check", "ui-control:shield_check_24", "ui-control:sound_off", "ui-control:sound_off_24", "ui-control:sound_on", "ui-control:three_dots_cluster", "ui-control:three_dots_cluster_24", "ui-control:three_dots_horizontal", "ui-control:three_dots_horizontal_24", "ui-control:video_enlarge", "ui-control:video_enlarge_24", "ui-control:x", "ui-control:x_24", "ui-control:x_small", "ui-control:x_small_24", "view:eye_open", "view:eye_open_24", "view:magnifying_glass", "view:magnifying_glass_24", "view:magnifying_glass_filled", "view:magnifying_glass_filled_24", "work:assemble", "work:assemble_24", "work:basket_filled", "work:basket_filled_24", "work:box", "work:box_24", "work:broom", "work:broom_24", "work:corner", "work:corner_24", "work:cube_outline", "work:cube_outline_24", "work:glue", "work:glue_24", "work:hand_finish", "work:hand_finish_24", "work:label", "work:label_24", "work:leaf", "work:leaf_24", "work:light_bulb", "work:light_bulb_24", "work:mask", "work:mask_24", "work:no_entry", "work:no_entry_24", "work:p_circle", "work:p_circle_24", "work:print_nozzle", "work:print_nozzle_24", "work:rfid_signal", "work:rfid_signal_24", "work:sand_painted", "work:sand_painted_24", "work:sand_paper", "work:sand_paper_24", "work:sand_primed", "work:sand_primed_24", "work:sand_robot", "work:sand_robot_24", "work:sd_card_filled_exclamation", "work:sd_card_filled_exclamation_24", "work:sd_card_outline", "work:sd_card_outline_24", "work:spool", "work:spool_24", "work:sun", "work:sun_24", "work:tape", "work:tape_24", "work:triangle_ruler", "work:triangle_ruler_24", "work:triangle_ruler_filled", "work:triangle_ruler_filled_24", "work:tumbler", "work:tumbler_24", "work:van", "work:van_24", "work:water_drop", "work:water_drop_24", "work:water_drop_dotted", "work:water_drop_dotted_24", "work:wrench", "work:wrench_24"];
+export declare const IconsList: readonly ["actions:funnel", "actions:funnel_24", "actions:funnel_filled", "actions:funnel_filled_24", "actions:gear", "actions:gear_24", "actions:life_buoy", "actions:life_buoy_24", "actions:link", "actions:link_24", "actions:star", "actions:star_24", "actions:star_filled", "actions:star_filled_24", "actions:star_half", "actions:star_half_24", "actions:stroke_play", "actions:stroke_play_24", "actions:thumbs_up", "actions:thumbs_up_24", "actions:trash_can", "actions:trash_can_24", "alert:bell", "alert:bell_24", "alert:bell_filled", "alert:bell_filled_24", "alert:i_circle", "alert:i_circle_24", "alert:lightning_bolt", "alert:lightning_bolt_24", "alert:lightning_bolt_filled", "alert:lightning_bolt_filled_24", "alert:question_mark_circle", "alert:question_mark_circle_24", "alert:warning_triangle", "alert:warning_triangle_24", "animated:loader", "arrows:arrow_chevron_double_down", "arrows:arrow_chevron_double_down_24", "arrows:arrow_chevron_double_left", "arrows:arrow_chevron_double_left_24", "arrows:arrow_chevron_double_right", "arrows:arrow_chevron_double_right_24", "arrows:arrow_chevron_double_up", "arrows:arrow_chevron_double_up_24", "arrows:arrow_chevron_down", "arrows:arrow_chevron_down_24", "arrows:arrow_chevron_left", "arrows:arrow_chevron_left_24", "arrows:arrow_chevron_right", "arrows:arrow_chevron_right_24", "arrows:arrow_chevron_up", "arrows:arrow_chevron_up_24", "arrows:arrow_diag", "arrows:arrow_diag_24", "arrows:arrow_down", "arrows:arrow_down_24", "arrows:arrow_download", "arrows:arrow_download_24", "arrows:arrow_external", "arrows:arrow_external_24", "arrows:arrow_left", "arrows:arrow_left_24", "arrows:arrow_line_down", "arrows:arrow_line_down_24", "arrows:arrow_line_left", "arrows:arrow_line_left_24", "arrows:arrow_line_right", "arrows:arrow_line_right_24", "arrows:arrow_line_up", "arrows:arrow_line_up_24", "arrows:arrow_return", "arrows:arrow_right", "arrows:arrow_right_24", "arrows:arrow_rotate_two", "arrows:arrow_rotate_two_24", "arrows:arrow_triangle_down", "arrows:arrow_triangle_down_24", "arrows:arrow_triangle_left", "arrows:arrow_triangle_left_24", "arrows:arrow_triangle_right", "arrows:arrow_triangle_right_24", "arrows:arrow_triangle_up", "arrows:arrow_triangle_up_24", "arrows:arrow_triangle_updown", "arrows:arrow_triangle_updown_24", "arrows:arrow_triangle_updown_down_filled", "arrows:arrow_triangle_updown_down_filled_24", "arrows:arrow_triangle_updown_filled", "arrows:arrow_triangle_updown_filled_24", "arrows:arrow_triangle_updown_top_filled", "arrows:arrow_triangle_updown_top_filled_24", "arrows:arrow_up", "arrows:arrow_up_24", "arrows:arrow_updown", "arrows:arrow_updown_24", "arrows:arrow_updown_filled", "arrows:arrow_updown_filled_24", "arrows:arrow_upload", "arrows:arrow_upload_24", "data:chart_bar", "data:chart_bar_24", "docs:document_blank", "docs:document_blank_24", "docs:document_lines", "docs:document_lines_24", "docs:pencil", "docs:pencil_24", "location:house", "location:house_24", "location:location_california", "location:location_california_24", "location:location_pin", "location:location_pin_24", "logos:logo_affirm", "logos:logo_affirm_colored", "logos:logo_apple", "logos:logo_apple_text", "logos:logo_apple_text_24", "logos:logo_behance", "logos:logo_facebook", "logos:logo_gantri", "logos:logo_gantri_made", "logos:logo_gantri_made_collapsed", "logos:logo_github", "logos:logo_google", "logos:logo_google_text", "logos:logo_google_text_24", "logos:logo_instagram", "logos:logo_linkedin", "logos:logo_pinterest", "logos:logo_tiktok", "logos:logo_twitter", "logos:logo_yotpo", "logos:logo_youtube", "machine:difficulty_easy", "machine:difficulty_hard", "machine:difficulty_moderate", "machine:difficulty_multiple", "machine:laptop", "media:audio", "media:audio_24", "media:photo", "media:photo_24", "media:photo_filled", "media:photo_filled_24", "media:video", "media:video_24", "payment:bank", "payment:cash", "payment:cash_24", "payment:credit_card", "payment:credit_card_24", "payment:gift_box", "payment:gift_box_24", "payment:gift_card", "payment:gift_card_24", "payment:shopping_bag", "payment:shopping_bag_24", "people:people", "people:people_24", "people:person", "people:person_24", "people:person_outline", "people:person_outline_24", "time:calendar", "time:calendar_24", "time:clock", "time:clock_24", "time:clock_filled", "time:clock_filled_24", "ui-control:award_ribbon", "ui-control:check_mark", "ui-control:check_mark_24", "ui-control:check_mark_circle_filled", "ui-control:check_mark_circle_filled_24", "ui-control:drag", "ui-control:email", "ui-control:email_24", "ui-control:exclamation_circle_filled", "ui-control:exclamation_circle_filled_24", "ui-control:globe", "ui-control:globe_24", "ui-control:grid", "ui-control:grid_1", "ui-control:grid_24", "ui-control:grid_4", "ui-control:jbox", "ui-control:left_quote", "ui-control:lines_three", "ui-control:lines_three_24", "ui-control:lines_three_vertical", "ui-control:lines_three_vertical_24", "ui-control:lines_two", "ui-control:lines_two_24", "ui-control:lines_two_dots", "ui-control:lines_two_dots_24", "ui-control:material_opaque", "ui-control:material_translucent", "ui-control:minus", "ui-control:minus_24", "ui-control:minus_circle", "ui-control:minus_circle_24", "ui-control:minus_circle_filled", "ui-control:minus_circle_filled_24", "ui-control:package_return", "ui-control:package_return_24", "ui-control:pause", "ui-control:pause_24", "ui-control:phone", "ui-control:phone_24", "ui-control:play", "ui-control:plug", "ui-control:plus", "ui-control:plus_24", "ui-control:plus_circle", "ui-control:plus_circle_24", "ui-control:plus_circle_filled", "ui-control:plus_circle_filled_24", "ui-control:rod_double", "ui-control:rod_single", "ui-control:shape_curved", "ui-control:shape_flat", "ui-control:shape_variable", "ui-control:shield", "ui-control:shield_24", "ui-control:shield_check", "ui-control:shield_check_24", "ui-control:sound_off", "ui-control:sound_off_24", "ui-control:sound_on", "ui-control:three_dots_cluster", "ui-control:three_dots_cluster_24", "ui-control:three_dots_horizontal", "ui-control:three_dots_horizontal_24", "ui-control:video_enlarge", "ui-control:video_enlarge_24", "ui-control:x", "ui-control:x_24", "ui-control:x_small", "ui-control:x_small_24", "view:eye_open", "view:eye_open_24", "view:magnifying_glass", "view:magnifying_glass_24", "view:magnifying_glass_filled", "view:magnifying_glass_filled_24", "work:assemble", "work:assemble_24", "work:basket_filled", "work:basket_filled_24", "work:box", "work:box_24", "work:broom", "work:broom_24", "work:corner", "work:corner_24", "work:cube_outline", "work:cube_outline_24", "work:glue", "work:glue_24", "work:hand_finish", "work:hand_finish_24", "work:label", "work:label_24", "work:leaf", "work:leaf_24", "work:light_bulb", "work:light_bulb_24", "work:mask", "work:mask_24", "work:moon", "work:moon_24", "work:no_entry", "work:no_entry_24", "work:p_circle", "work:p_circle_24", "work:print_nozzle", "work:print_nozzle_24", "work:rfid_signal", "work:rfid_signal_24", "work:sand_painted", "work:sand_painted_24", "work:sand_paper", "work:sand_paper_24", "work:sand_primed", "work:sand_primed_24", "work:sand_robot", "work:sand_robot_24", "work:sd_card_filled_exclamation", "work:sd_card_filled_exclamation_24", "work:sd_card_outline", "work:sd_card_outline_24", "work:spool", "work:spool_24", "work:sun", "work:sun_24", "work:tape", "work:tape_24", "work:triangle_ruler", "work:triangle_ruler_24", "work:triangle_ruler_filled", "work:triangle_ruler_filled_24", "work:tumbler", "work:tumbler_24", "work:van", "work:van_24", "work:water_drop", "work:water_drop_24", "work:water_drop_dotted", "work:water_drop_dotted_24", "work:wrench", "work:wrench_24"];
 export type IconType = typeof IconsList[number];

package/dist/components/index.d.ts

@@ -32,6 +32,7 @@ export * from './modal';
 export * from './multi-select-list';
 export * from './option-selector';
 export * from './overlay';
+export * from './picture';
 export * from './pills';
 export * from './positioned';
 export * from './quantity';

package/dist/components/multi-select-list/multi-select-list.d.ts

@@ -1,6 +1,3 @@
 import React from 'react';
 import { MultiSelectListProps } from './multi-select-list.types';
-export declare const MultiSelectList: {
-    <Item extends Record<any, any>>(props: MultiSelectListProps<Item>): React.JSX.Element;
-    defaultProps: import("./multi-select-list.types").MultiSelectListDefaultProps<Record<string, unknown>>;
-};
+export declare const MultiSelectList: <Item extends Record<any, any>>(incoming: MultiSelectListProps<Item>) => React.JSX.Element;

package/dist/components/option-selector/option-selector.d.ts

@@ -1,6 +1,3 @@
 import React from 'react';
 import { OptionSelectorProps } from './option-selector.types';
-export declare const OptionSelector: {
-    (props: OptionSelectorProps): React.JSX.Element;
-    defaultProps: Partial<OptionSelectorProps>;
-};
+export declare const OptionSelector: (props: OptionSelectorProps) => React.JSX.Element;

package/dist/components/picture/__test__/build-cloudinary-url.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/picture/__test__/build-srcset.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/picture/__test__/detect-source.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/picture/__test__/picture.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/picture/helpers/build-cloudinary-url.d.ts

@@ -0,0 +1,21 @@
+import { IGravity } from '@cloudinary/url-gen/qualifiers/gravity/GravityQualifier';
+import { PictureSource } from './detect-source';
+import { PictureCrop, PictureEffect, PictureFormat, PictureQuality } from '../picture.types';
+export interface BuildCloudinaryUrlOptions {
+    width?: number;
+    height?: number;
+    aspectRatio?: string;
+    crop?: PictureCrop;
+    gravity?: IGravity;
+    quality?: PictureQuality | number;
+    format?: PictureFormat;
+    dpr?: number | 'auto';
+    sharpen?: number | boolean;
+    blur?: number;
+    effects?: PictureEffect[];
+    background?: string;
+    rawTransformation?: string;
+    /** Override auto-detection. */
+    source?: PictureSource;
+}
+export declare const buildCloudinaryUrl: (src: string, options?: BuildCloudinaryUrlOptions) => string;

package/dist/components/picture/helpers/build-placeholder.d.ts

@@ -0,0 +1,2 @@
+import { BuildCloudinaryUrlOptions } from './build-cloudinary-url';
+export declare const buildBlurPlaceholder: (src: string, options?: Omit<BuildCloudinaryUrlOptions, 'width' | 'blur' | 'quality'>) => string | undefined;

package/dist/components/picture/helpers/build-srcset.d.ts

@@ -0,0 +1,22 @@
+import { BuildCloudinaryUrlOptions } from './build-cloudinary-url';
+export declare const DEFAULT_SRCSET_WIDTHS: readonly [320, 640, 1024, 1600, 2400];
+/**
+ * Default cap applied to the `src` attribute when no explicit `width` is given.
+ *
+ * Modern browsers always pick from `srcset`, so `src` is only fetched by:
+ * - Crawlers/bots (Googlebot, OG preview tools)
+ * - Old browsers without `srcset` support (<1% of traffic)
+ * - Preload scanners before `srcset` evaluation
+ *
+ * 640px keeps the fallback mobile-friendly so SEO tools and bots don't see
+ * oversized images on mobile (which would hurt Core Web Vitals scores).
+ * Real desktop users get 1600/2400 from `srcset`, not this fallback.
+ */
+export declare const DEFAULT_FALLBACK_WIDTH = 640;
+interface BuildSrcsetParams {
+    src: string;
+    width?: number;
+    options: Omit<BuildCloudinaryUrlOptions, 'width'>;
+}
+export declare const buildSrcset: ({ src, width, options, }: BuildSrcsetParams) => string | undefined;
+export {};

package/dist/components/picture/helpers/detect-source.d.ts

@@ -0,0 +1,2 @@
+export type PictureSource = 'static' | 'dynamic' | 'absolute-cloudinary' | 'absolute-external' | 'video-frame' | 'passthrough';
+export declare const detectSource: (src: string | undefined) => PictureSource;

package/dist/components/picture/helpers/index.d.ts

@@ -0,0 +1,5 @@
+export * from './detect-source';
+export * from './build-cloudinary-url';
+export * from './build-srcset';
+export * from './build-placeholder';
+export * from './normalize-resolution-aware';

package/dist/components/picture/helpers/normalize-resolution-aware.d.ts

@@ -0,0 +1,8 @@
+import { ResolutionAwareProp } from '../../../types/resolution-aware-prop.type';
+export interface NormalizedResolutionAware<T> {
+    lg: T | undefined;
+    md: T | undefined;
+    sm: T | undefined;
+}
+export declare const normalizeResolutionAware: <T>(prop: ResolutionAwareProp<T> | undefined) => NormalizedResolutionAware<T>;
+export declare const isResponsive: (prop: unknown) => boolean;

package/dist/components/picture/index.d.ts

@@ -0,0 +1,3 @@
+export * from './picture';
+export * from './picture.types';
+export { buildCloudinaryUrl, buildSrcset, buildBlurPlaceholder, detectSource, type PictureSource, } from './helpers';

package/dist/components/picture/picture.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { PictureProps } from './picture.types';
+export declare const Picture: FC<PictureProps>;

package/dist/components/picture/picture.presets.d.ts

@@ -0,0 +1,2 @@
+import { PictureProps } from './picture.types';
+export declare const PicturePresets: Partial<PictureProps>;

package/dist/components/picture/picture.styles.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { PictureProps, StyledPictureContainerProps } from './picture.types';
+export declare const StyledPictureContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledPictureContainerProps>> & string;
+export declare const StyledPictureImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {
+    $blurPlaceholder?: string | undefined;
+    $objectFit?: PictureProps['objectFit'];
+    $objectPosition?: PictureProps['objectPosition'];
+}>> & string;

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

@@ -0,0 +1,72 @@
+import { Property } from 'csstype';
+import { CSSProperties, ReactEventHandler } from 'react';
+import { IGravity } from '@cloudinary/url-gen/qualifiers/gravity/GravityQualifier';
+import { ImageFormatType, VideoFormatType } from '@cloudinary/transformation-builder-sdk/types/types';
+import { ResolutionAwareProp } from '../../types/resolution-aware-prop.type';
+import { Color } from '../../styles';
+export type PictureCrop = 'scale' | 'limitFit' | 'limitFill' | 'limitPad' | 'fill' | 'fit' | 'crop' | 'pad' | 'imaggaCrop' | 'imaggaScale' | 'minimumFit' | 'minimumPad' | 'fillPad' | 'thumbnail';
+export type PictureQuality = 'auto' | 'autoBest' | 'autoEco' | 'autoGood' | 'autoLow' | 'jpegmini' | 'jpegminiBest' | 'jpegminiHigh' | 'jpegminiMedium';
+export type PictureFormat = ImageFormatType | VideoFormatType;
+export type PictureEffect = 'grayscale' | 'sepia' | 'blackwhite' | 'negate' | 'oil_paint' | 'cartoonify' | 'vignette' | 'pixelate' | string;
+export type PicturePlaceholder = 'blur' | 'color' | 'none';
+export type PictureAs = 'image' | 'video-frame';
+export interface PictureProps {
+    src: ResolutionAwareProp<string>;
+    alt: string;
+    /** Override auto-detection of how to render the asset. */
+    as?: PictureAs;
+    width?: ResolutionAwareProp<number>;
+    height?: ResolutionAwareProp<number>;
+    /** e.g. "16:9", "1:1". Drives both CSS aspect-ratio and Cloudinary ar_ transformation. */
+    aspectRatio?: ResolutionAwareProp<string>;
+    /** CSS max-width on the container. Useful with aspectRatio to cap horizontal size. */
+    maxWidth?: ResolutionAwareProp<Property.MaxWidth>;
+    /** CSS max-height on the container. Useful with aspectRatio to cap vertical size. */
+    maxHeight?: ResolutionAwareProp<Property.MaxHeight>;
+    /** CSS min-width on the container. */
+    minWidth?: ResolutionAwareProp<Property.MinWidth>;
+    /** CSS min-height on the container. */
+    minHeight?: ResolutionAwareProp<Property.MinHeight>;
+    /** Image fills its (position: relative) parent. Mutually exclusive with width/height. */
+    fill?: boolean;
+    /** Native sizes attribute. Default: "100vw". Tells the browser how wide the image renders. */
+    sizes?: string;
+    crop?: PictureCrop;
+    gravity?: IGravity;
+    quality?: PictureQuality | number;
+    format?: PictureFormat;
+    dpr?: number | 'auto';
+    sharpen?: number | boolean;
+    blur?: number;
+    effects?: PictureEffect[];
+    background?: string;
+    /** Escape hatch: raw Cloudinary transformation string appended at the end. */
+    rawTransformation?: string;
+    /** Sets loading="eager" + fetchpriority="high". Use for above-the-fold / hero images. */
+    priority?: boolean;
+    loading?: 'lazy' | 'eager';
+    fetchPriority?: 'high' | 'low' | 'auto';
+    placeholder?: PicturePlaceholder;
+    placeholderColor?: Color;
+    objectFit?: ResolutionAwareProp<Property.ObjectFit>;
+    objectPosition?: ResolutionAwareProp<Property.ObjectPosition>;
+    rounded?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    onClick?: () => void;
+    onLoad?: ReactEventHandler<HTMLImageElement>;
+    onError?: ReactEventHandler<HTMLImageElement>;
+}
+export interface StyledPictureContainerProps {
+    $aspectRatio?: PictureProps['aspectRatio'];
+    $width?: PictureProps['width'];
+    $height?: PictureProps['height'];
+    $maxWidth?: PictureProps['maxWidth'];
+    $maxHeight?: PictureProps['maxHeight'];
+    $minWidth?: PictureProps['minWidth'];
+    $minHeight?: PictureProps['minHeight'];
+    $placeholderColor?: PictureProps['placeholderColor'];
+    $fill?: boolean;
+    $rounded?: boolean;
+    $hasPlaceholder?: boolean;
+}

package/dist/components/radio/radio.d.ts

@@ -1,6 +1,3 @@
 import React, { PropsWithChildren } from 'react';
 import { RadioProps } from './radio.types';
-export declare const Radio: {
-    (props: PropsWithChildren<RadioProps>): React.JSX.Element;
-    defaultProps: RadioProps;
-};
+export declare const Radio: (incoming: PropsWithChildren<RadioProps>) => React.JSX.Element;

package/dist/components/radio-list/radio-list.d.ts

@@ -1,6 +1,3 @@
 import React from 'react';
 import { RadioListProps } from './radio-list.types';
-export declare const RadioList: {
-    <Value extends string>(props: RadioListProps<Value>): React.JSX.Element;
-    defaultProps: import("./radio-list.types").RadioListDefaultProps<string | Record<any, any>>;
-};
+export declare const RadioList: <Value extends string>(incoming: RadioListProps<Value>) => React.JSX.Element;

package/dist/components/responsive/responsive.d.ts

@@ -1,3 +1,22 @@
 import React from 'react';
 import { ResponsiveProps } from './responsive.types';
+/**
+ * @deprecated Use `<Box hidden={{ lg, md, sm }}>` instead. `Responsive` decides
+ * the active branch on the client via `useMedia`, which causes a layout flash
+ * (FOUC) on hydration: the SSR / first render always picks `lg`, then swaps to
+ * `md` / `sm` after mounting. Wrapping each branch in a `Box` with `hidden`
+ * resolves at the CSS `@media` layer, so the correct branch is visible from
+ * the very first paint.
+ *
+ * Migration:
+ *
+ *   // before
+ *   <Responsive lg={<Desktop />} md={<Mobile />} />
+ *
+ *   // after
+ *   <>
+ *     <Box hidden={{ lg: false, md: true, sm: true }}><Desktop /></Box>
+ *     <Box hidden={{ lg: true, md: false, sm: false }}><Mobile /></Box>
+ *   </>
+ */
 export declare const Responsive: (props: ResponsiveProps) => React.JSX.Element;

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

@@ -1,4 +1,8 @@
 /// <reference types="react" />
+/**
+ * @deprecated Use `<Box hidden={{ lg, md, sm }}>` instead. See the JSDoc on
+ * the `Responsive` component for the migration guide and rationale.
+ */
 export interface ResponsiveProps {
     lg?: JSX.Element;
     md?: JSX.Element;

package/dist/components/search-field/search-field.d.ts

@@ -1,6 +1,3 @@
 import React from 'react';
 import { SearchFieldProps } from './search-field.types';
-export declare const SearchField: {
-    <T extends Record<any, any>>(props: SearchFieldProps<T>): React.JSX.Element;
-    defaultProps: Partial<SearchFieldProps<any>>;
-};
+export declare const SearchField: <T extends Record<any, any>>(incoming: SearchFieldProps<T>) => React.JSX.Element;

package/dist/components/table/components/table-actions-wrapper/components/paging/paging.d.ts

@@ -1,6 +1,3 @@
 import React from 'react';
 import { PagingComponentProps } from './paging.types';
-export declare const Paging: {
-    (props: PagingComponentProps): React.JSX.Element;
-    defaultProps: Partial<import("./paging.types").PagingProps>;
-};
+export declare const Paging: (incoming: PagingComponentProps) => React.JSX.Element;

package/dist/components/table/components/table-actions-wrapper/components/search/search.d.ts

@@ -1,6 +1,3 @@
 import React from 'react';
 import { SearchComponentProps } from './search.types';
-export declare const Search: {
-    (props: SearchComponentProps): React.JSX.Element;
-    defaultProps: import("./search.types").SearchDefaultProps;
-};
+export declare const Search: (incoming: SearchComponentProps) => React.JSX.Element;

package/dist/components/table/table.d.ts

@@ -6,7 +6,4 @@ import { TableProps } from './table.types';
  *
  * Official docs: https://tanstack.com/table/v8/docs/guide/overview
  */
-export declare const Table: {
-    <TData extends RowData<import("./table.types").CustomTData>>(props: TableProps<TData>): React.JSX.Element;
-    defaultProps: import("./table.types").TableDefaultProps;
-};
+export declare const Table: <TData extends RowData<import("./table.types").CustomTData>>(incoming: TableProps<TData>) => React.JSX.Element;