@iress-oss/ids-components 6.0.0-alpha.3 → 6.0.0-alpha.30

package/dist/interfaces.d.ts

@@ -0,0 +1,436 @@
+import { CSSProperties, ReactNode } from 'react';
+import { PositiveSpacingToken, FormControlValue, ResponsiveProp, SpacingToken, Statuses, SizeToken } from './types';
+import { UtilityValues } from './styled-system/types/prop-type';
+/**
+ * This interface is used to ensure that the ref returned by a component is compatible with React Hook Form.
+ * It provides the contract for necessary methods to interact with the third-party library, such as `blur` and `focus`.
+ */
+export interface ReactHookFormCompatibleRef<T extends HTMLElement = HTMLInputElement> {
+    /**
+     * This method is used by react-hook-form to blur the control.
+     */
+    blur: () => void;
+    /**
+     * This method is used by react-hook-form to focus the control.
+     */
+    focus: () => void;
+    /**
+     * This method is used by react-hook-form as a fallback to get the value of the control.
+     */
+    input: T | null;
+}
+/**
+ * Validation message object used in feedback components.
+ */
+export interface ValidationMessageObj {
+    /**
+     * The test ID for the validation message element.
+     */
+    dataTestId?: string;
+    /**
+     * The validation message to be displayed.
+     */
+    message: string;
+    /**
+     * The validation status indicating the type of message.
+     */
+    status?: Statuses;
+    /**
+     * The ID of the element the message is describing.
+     */
+    linkToTarget?: string;
+    /**
+     * Prefix to the validation message. Will be `status` prop if nothing is provided.
+     */
+    prefix?: ReactNode;
+    /**
+     * If set to true, the prefix will be visually displayed (default is only available to screen readers)
+     */
+    visiblePrefix?: boolean;
+}
+/**
+ * This allows for customising the slot/render props of a component.
+ */
+export interface IressCustomiseSlot extends IressCSSProps, IressTestProps {
+    /**
+     * Class name of the slot.
+     */
+    className?: string;
+    /**
+     * Style object to be applied to the slot.
+     */
+    style?: CSSProperties;
+}
+/**
+ * Value that is used across custom form controls that display a label and store the value, usually to display in a select or dropdown.
+ */
+export interface LabelValue<T extends FormControlValue = FormControlValue> {
+    /**
+     * The label to be displayed for the option.
+     */
+    label: string;
+    /**
+     * The test ID for the option element.
+     */
+    testId?: string;
+    /**
+     * The value associated with the option.
+     */
+    value?: T;
+}
+/**
+ * Extended label-value pair with additional metadata for richer display options.
+ */
+export interface LabelValueMeta<T extends FormControlValue = FormControlValue> extends LabelValue<T> {
+    /**
+     * Append content to provide extra context after the label.
+     * Usually used for badges or supplementary information.
+     */
+    append?: ReactNode;
+    /**
+     * Group options under a common heading.
+     * **Note:** When `children` is provided, the option becomes a non-selectable group label and its children are the selectable options within that group. `value` is not used in these cases.
+     */
+    children?: Omit<LabelValueMeta<T>, 'children'>[];
+    /**
+     * Whether to display a divider below the option.
+     */
+    divider?: boolean;
+    /**
+     * Metadata to provide more context about the option.
+     * Usually displayed in a smaller font or different style.
+     */
+    meta?: ReactNode;
+    /**
+     * Content to prepend before the label.
+     * Usually used for icons or indicators.
+     */
+    prepend?: ReactNode;
+}
+/**
+ * Extended label-value pair with formatted label and metadata for advanced display options, usually to display the search term highlighted.
+ */
+export interface FormattedLabelValueMeta<T extends FormControlValue = FormControlValue> extends LabelValueMeta<T> {
+    /**
+     * Group options under a common heading.
+     * **Note:** When `children` is provided, the option becomes a non-selectable group label and its children are the selectable options within that group. `value` is not used in these cases.
+     */
+    children?: Omit<FormattedLabelValueMeta<T>, 'children'>[];
+    /**
+     * Formatted label content, allowing for highlighted search terms.
+     */
+    formattedLabel?: ReactNode;
+    /**
+     * Formatted metadata content, allowing for highlighted search terms.
+     */
+    formattedMeta?: ReactNode;
+}
+/**
+ * Details about a specific breakpoint in the design system.
+ */
+export interface BreakpointDetail {
+    /**
+     * The maximum width of the container at this breakpoint.
+     */
+    containerMaxWidth: string;
+    /**
+     * The margin on the left and right of the container at this breakpoint. This is used to calculate the viewport width for design reference.
+     */
+    margin?: SpacingToken;
+    /**
+     * The maximum number of columns to display in a grid layout at this breakpoint. This is used for design reference and is not enforced in the code, as we want to allow for flexibility in implementation based on the design requirements.
+     */
+    maxColumns?: number;
+    /**
+     * The maximum screen width for the breakpoint.
+     */
+    maxScreenWidth?: string;
+    /**
+     * The media query string for the breakpoint.
+     * This must be valid CSS media query syntax.
+     */
+    mediaQuery: string;
+    /**
+     * The minimum screen width for the breakpoint.
+     */
+    minScreenWidth: string;
+    /**
+     * The name of the screen width range for the breakpoint.
+     * Used to display in documentation and debugging.
+     */
+    screenWidthRange: string;
+    /**
+     * The viewport width in pixels for the breakpoint.
+     * Used for design and development reference, as a guideline for debugging responsive layouts.
+     */
+    viewportWidth: number;
+}
+/**
+ * IressCSSProps allow you to style components using the design system tokens.
+ * **Note:** These are the only props we support for styling components. Anything else is at your own risk.
+ */
+export interface IressCSSProps {
+    /**
+     * The **`align-self`** CSS property overrides a flex item's alignment set by its flex container's `align-items` property.
+     *
+     * This is useful when you want a single flex item to have a different alignment than the others in the flex container.
+     *
+     * @see https://developer.mozilla.org/docs/Web/CSS/align-self
+     */
+    alignSelf?: ResponsiveProp<'start' | 'end' | 'center' | 'stretch'>;
+    /**
+     * **`bg`** sets the background color of an element using the `background-color` css property using the color tokens in the design system.
+     *
+     * We recommend using the following token values for best background contrast:
+     * - `colour.primary.fill` for primary backgrounds that need to stand out
+     * - `colour.primary.surface` for primary backgrounds that need to be less prominent
+     * - `colour.neutral.10` for the base background color, normally white in light mode or shade of grey in dark mode
+     * - `colour.neutral.20` for a slightly darker background color, used in neutral state components
+     * - `colour.system.danger.fill` for error backgrounds that need to stand out
+     * - `colour.system.danger.surface` for error backgrounds that need to be less prominent
+     * - `colour.system.success.fill` for success backgrounds that need to stand out
+     * - `colour.system.success.surface` for success backgrounds that need to be less prominent
+     * - `colour.system.warning.fill` for warning backgrounds that need to stand out
+     * - `colour.system.warning.surface` for warning backgrounds that need to be less prominent
+     * - `colour.system.info.fill` for info backgrounds that need to stand out
+     * - `colour.system.info.surface` for info backgrounds that need to be less prominent
+     *
+     * @see https://developer.mozilla.org/docs/Web/CSS/background-color
+     */
+    bg?: UtilityValues['color'];
+    /**
+     * The **`border-radius`** CSS property rounds the corners of an element's outer border edge using the radius tokens in the design system.
+     *
+     * @see https://developer.mozilla.org/docs/Web/CSS/border-radius
+     */
+    borderRadius?: ResponsiveProp<UtilityValues['borderRadius']>;
+    /**
+     * The **`color`** CSS property sets the foreground color value of an element's text and text decorations using the colour tokens from the design system. It also sets the `currentcolor` value. `currentcolor` may be used as an indirect value on _other_ properties and is the default for other color properties, such as `border-color`.
+     *
+     * We recommend using the following token values for best color contrast:
+     * - `colour.primary.onFill` used on top of `colour.primary.fill` for primary text that needs to stand out
+     * - `colour.primary.text` used on top of `colour.primary.surface` or `colour.neutral.10` for primary text that needs to be less prominent
+     * - `colour.neutral.70` used on top of `colour.neutral.10` or `colour.neutral.20` for muted text
+     * - `colour.neutral.80` used on top of `colour.neutral.10` or `colour.neutral.20` for standard text
+     * - `colour.system.danger.onFill` used on top of `colour.system.danger.fill` for error text that needs to stand out
+     * - `colour.system.danger.text` used on top of `colour.system.danger.surface` for error text that needs to be less prominent
+     * - `colour.system.success.onFill` used on top of `colour.system.success.fill` for success text that needs to stand out
+     * - `colour.system.success.text` used on top of `colour.system.success.surface` for success text that needs to be less prominent
+     * - `colour.system.warning.onFill` used on top of `colour.system.warning.fill` for warning text that needs to stand out
+     * - `colour.system.warning.text` used on top of `colour.system.warning.surface` for warning text that needs to be less prominent
+     * - `colour.system.info.onFill` used on top of `colour.system.info.fill` for informative text that needs to stand out
+     * - `colour.system.info.text` used on top of `colour.system.info.surface` for informative text that needs to be less prominent
+     *
+     * @see https://developer.mozilla.org/docs/Web/CSS/color
+     */
+    color?: UtilityValues['color'];
+    /**
+     * The `focusable` prop is used to apply the focus ring when focused. It can be set to `true` to apply focus styles on focus, or `'within'` to apply focus styles when the element or any of its children are focused.
+     */
+    focusable?: 'true' | 'within';
+    /**
+     * The `flex` prop is used to set the flex grow property of an element. It allows the element to grow and fill available space in a flex container.
+     *
+     * In the design system, we only allow `1` as a value to ensure consistent behavior across components, ensuring that flex items expand in a predictable way and preventing layout inconsistencies between implementations.
+     */
+    flex?: '1';
+    /**
+     * Set **`hideFrom`** to hide an element completely using `display: none`. It can be combined with `hideBelow` to create complex responsive visibility rules.
+     *
+     * Hide on all breakpoints: `hideFrom: true`
+     * Hide on specific breakpoints: `hideFrom: 'lg'`
+     *
+     * Notes:
+     * - If you need to hide an element but allow it to be visible to screen readers, use the `srOnly` prop instead.
+     * - Consider if you can conditionally render the element instead of hiding it using the `useBreakpoint` hook.
+     */
+    hideFrom?: UtilityValues['hideFrom'];
+    /**
+     * Set **`hideBelow`** to hide an element completely using `display: none`. It can be combined with `hideFrom` to create complex responsive visibility rules.
+     *
+     * Hide below a specific breakpoint: `hideBelow: 'lg'`
+     *
+     * Notes:
+     * - If you need to hide an element but allow it to be visible to screen readers, use the `srOnly` prop instead.
+     * - Consider if you can conditionally render the element instead of hiding it using the `useBreakpoint` hook.
+     */
+    hideBelow?: UtilityValues['hideBelow'];
+    /**
+     * The **`max-width`** CSS property sets the maximum width of an element. It prevents the used value of the `width` property from becoming larger than the value specified by `max-width`.
+     *
+     * @see https://developer.mozilla.org/docs/Web/CSS/max-width
+     */
+    maxWidth?: SizeToken;
+    /**
+     * The **`m`** property is short for `margin`, and sets the margin area on all four sides of an element.
+     *
+     * It uses the spacing tokens in the design system. You can also use the negative values to overlap elements or ignore padding based on the design requirements.
+     *
+     * @see https://developer.mozilla.org/docs/Web/CSS/margin
+     */
+    m?: ResponsiveProp<SpacingToken | 'auto'>;
+    /**
+     * The **`my`** property is short for `margin-block`. It defines the logical block start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.
+     *
+     * It uses the spacing tokens in the design system. You can also use the negative values to overlap elements or ignore padding based on the design requirements.
+     *
+     * @see https://developer.mozilla.org/docs/Web/CSS/margin-block
+     */
+    my?: ResponsiveProp<SpacingToken | 'auto'>;
+    /**
+     * The **`mx`** property is short for `margin-inline`. It is a shorthand property that defines both the logical inline start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.
+     *
+     * It uses the spacing tokens in the design system. You can also use the negative values to overlap elements or ignore padding based on the design requirements.
+     *
+     * @see https://developer.mozilla.org/docs/Web/CSS/margin-inline
+     */
+    mx?: ResponsiveProp<SpacingToken | 'auto'>;
+    /**
+     * The **`mb`** property is short for `margin-bottom` and sets the margin area on the bottom side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
+     *
+     * It uses the spacing tokens in the design system.
+     *
+     * @see https://developer.mozilla.org/docs/Web/CSS/margin-bottom
+     */
+    mb?: ResponsiveProp<SpacingToken | 'auto'>;
+    /**
+     * The **`ml`** property is short for `margin-left` and sets the margin area on the left side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
+     *
+     * It uses the spacing tokens in the design system.
+     *
+     * @see https://developer.mozilla.org/docs/Web/CSS/margin-left
+     */
+    ml?: ResponsiveProp<SpacingToken | 'auto'>;
+    /**
+     * The **`mr`** property is short for `margin-right` and sets the margin area on the right side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
+     *
+     * It uses the spacing tokens in the design system.
+     *
+     * @see https://developer.mozilla.org/docs/Web/CSS/margin-right
+     */
+    mr?: ResponsiveProp<SpacingToken | 'auto'>;
+    /**
+     * The **`mt`** property is short for `margin-top` and sets the margin area on the top side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
+     *
+     * It uses the spacing tokens in the design system.
+     *
+     * @see https://developer.mozilla.org/docs/Web/CSS/margin-top
+     */
+    mt?: ResponsiveProp<SpacingToken | 'auto'>;
+    /**
+     * The **`noGutter`** property is used to remove the bottom margin from the last child of a component.
+     * This is useful when you want to avoid extra spacing at the end of a layout.
+     */
+    noGutter?: boolean;
+    /**
+     * The **`p`** property is short for `padding`, and sets the padding area on all four sides of an element at once.
+     *
+     * It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
+     *
+     * @see https://developer.mozilla.org/docs/Web/CSS/padding
+     */
+    p?: ResponsiveProp<PositiveSpacingToken>;
+    /**
+     * The **`py`** property is short for `padding-block`. It defines the logical block start and end paddings of an element, which maps to physical paddings depending on the element's writing mode, directionality, and text orientation.
+     *
+     * It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
+     *
+     * @see https://developer.mozilla.org/docs/Web/CSS/padding-block
+     */
+    py?: ResponsiveProp<PositiveSpacingToken>;
+    /**
+     * The **`px`** property is short for `padding-inline`. It is a shorthand property that defines both the logical inline start and end paddings of an element, which maps to physical paddings depending on the element's writing mode, directionality, and text orientation.
+     *
+     * It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
+     *
+     * @see https://developer.mozilla.org/docs/Web/CSS/padding-inline
+     */
+    px?: ResponsiveProp<PositiveSpacingToken>;
+    /**
+     * The **`pb`** property is short for `padding-bottom` and sets the padding area on the bottom side of an element.
+     *
+     * It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
+     *
+     * @see https://developer.mozilla.org/docs/Web/CSS/padding-bottom
+     */
+    pb?: ResponsiveProp<PositiveSpacingToken>;
+    /**
+     * The **`pl`** property is short for `padding-left` and sets the padding area on the left side of an element.
+     *
+     * It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
+     *
+     * @see https://developer.mozilla.org/docs/Web/CSS/padding-left
+     */
+    pl?: ResponsiveProp<PositiveSpacingToken>;
+    /**
+     * The **`pr`** property is short for `padding-right` and sets the padding area on the right side of an element.
+     *
+     * It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
+     *
+     * @see https://developer.mozilla.org/docs/Web/CSS/padding-right
+     */
+    pr?: ResponsiveProp<PositiveSpacingToken>;
+    /**
+     * The **`pt`** property is short for `padding-top` and sets the padding area on the top side of an element.
+     *
+     * It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
+     *
+     * @see https://developer.mozilla.org/docs/Web/CSS/padding-top
+     */
+    pt?: ResponsiveProp<PositiveSpacingToken>;
+    /**
+     * The **`scrollable`** property enables scrolling behavior for an element when its content overflows its bounds. It sets the `overflow` CSS property to `auto`, allowing scrollbars to appear as needed. The scrollbar has been styled to match the design system.
+     * You can set the value to `true` to enable scrolling on both axes, or specify `'x'` or `'y'` to restrict scrolling to a single axis.
+     */
+    scrollable?: UtilityValues['scrollable'];
+    /**
+     * Set **`srOnly`** to hide an element visually but still make it accessible to screen readers. It can also be set to an object of breakpoints to hide the element at specific breakpoints.
+     *
+     * Hide on all breakpoints: `srOnly: true`
+     * Hide on specific breakpoints: `srOnly: { xs: false, sm: true, md: false, lg: true, xl: false, xxl: true }`
+     */
+    srOnly?: ResponsiveProp<UtilityValues['srOnly']>;
+    /**
+     * The **`stretch`** property is used to stretch an element to fill the available space in its parent container. It sets the `height` property to `100%` and `alignSelf` to `stretch`, allowing the element to expand and contract based on the size of its parent.
+     */
+    stretch?: boolean;
+    /**
+     * The **`text-align`** CSS property sets the horizontal alignment of the inline-level content inside a block element or table-cell box.
+     *
+     * @see https://developer.mozilla.org/docs/Web/CSS/text-align
+     */
+    textAlign?: ResponsiveProp<'left' | 'right' | 'center' | 'justify' | 'inherit'>;
+    /**
+     * Select the typography to be used using the **`textStyle`** prop. These are connected to the typography tokens in the design system.'
+     *
+     * - `typography.body.sm` - Use for small components such as badges and disclaimers, as well as compact variations of tables and lists.
+     * - `typography.body.md` - The most commonly used body text size, used for most text content in the product and the default state of all components in the design system.
+     * - `typography.heading.1` - Use for the main page title to establish a clear hierarchy. There is typically only one H1 per screen, emphasising the primary purpose or context of the page.
+     * - `typography.heading.2` - Use for primary section headings within a page to organise content and guide the user through key areas. Also suitable for large components—such as modals—where space allows and where it pairs well with body.md.
+     * - `typography.heading.3` - Use for sub-sections under H2s to further structure content and maintain a clear visual hierarchy. Ideal for breaking down complex sections into manageable parts.
+     * - `typography.heading.4` - Use for supporting headings within content blocks or small components where space is limited—such as table headers, cards, or side panels. Provides structure without overwhelming the layout.
+     * - `typography.heading.5` - Use for minor labels or titles in compact UI elements, such as cards, sidebars, or inline labels. Best used to emphasise supplementary information without drawing too much attention. Works well with body.sm and is ideal for subtle content like fine print. Use sparingly to preserve typographic hierarchy.
+     * - `typography.code` - Used to display code snippets in the product, such as in the API documentation.
+     */
+    textStyle?: ResponsiveProp<UtilityValues['textStyle']>;
+    /**
+     * The **`width`** CSS property sets an element's width. By default, it sets the width of the content area, but if `box-sizing` is set to `border-box`, it sets the width of the border area.
+     *
+     * This prop only allows widths available throughout the component library. To use a custom width, you need to use the `style` prop, or add a custom class to the element and use CSS.
+     *
+     * @see https://developer.mozilla.org/docs/Web/CSS/width
+     */
+    width?: ResponsiveProp<SizeToken | 'auto'>;
+}
+export interface IressTestProps {
+    /**
+     * The data-testid attribute is used to target elements in automated tests if no identifier is available. In some components it is propagated to child elements.
+     *
+     * Notes:
+     * - Please use this prop sparingly and only when no other identifier is available, as per the guiding principles of Testing Library.
+     * - Only use this prop for your tests
+     *
+     * @see https://testing-library.com/docs/queries/bytestid
+     */
+    'data-testid'?: string;
+}

package/dist/is-valid-prop-C5D641yn.js

@@ -0,0 +1,7 @@
+import { m as e, s as t } from "./css-DVJ-ALYD.js";
+var r = "css,pos,insetX,insetY,insetEnd,end,insetStart,start,flexDir,p,pl,pr,pt,pb,py,paddingY,paddingX,px,pe,paddingEnd,ps,paddingStart,ml,mr,mt,mb,m,my,marginY,mx,marginX,me,marginEnd,ms,marginStart,ringWidth,ringColor,ring,ringOffset,w,minW,maxW,h,minH,maxH,textShadowColor,bgPosition,bgPositionX,bgPositionY,bgAttachment,bgClip,bg,bgColor,bgOrigin,bgImage,bgRepeat,bgBlendMode,bgSize,bgGradient,bgLinear,bgRadial,bgConic,rounded,roundedTopLeft,roundedTopRight,roundedBottomRight,roundedBottomLeft,roundedTop,roundedRight,roundedBottom,roundedLeft,roundedStartStart,roundedStartEnd,roundedStart,roundedEndStart,roundedEndEnd,roundedEnd,borderX,borderXWidth,borderXColor,borderY,borderYWidth,borderYColor,borderStart,borderStartWidth,borderStartColor,borderEnd,borderEndWidth,borderEndColor,shadow,shadowColor,x,y,z,scrollMarginY,scrollMarginX,scrollPaddingY,scrollPaddingX,aspectRatio,boxDecorationBreak,zIndex,boxSizing,objectPosition,objectFit,overscrollBehavior,overscrollBehaviorX,overscrollBehaviorY,position,top,left,inset,insetInline,insetBlock,insetBlockEnd,insetBlockStart,insetInlineEnd,insetInlineStart,right,bottom,float,visibility,display,hideFrom,hideBelow,flexBasis,flex,flexDirection,flexGrow,flexShrink,gridTemplateColumns,gridTemplateRows,gridColumn,gridRow,gridColumnStart,gridColumnEnd,gridAutoFlow,gridAutoColumns,gridAutoRows,gap,gridGap,gridRowGap,gridColumnGap,rowGap,columnGap,justifyContent,alignContent,alignItems,alignSelf,padding,paddingLeft,paddingRight,paddingTop,paddingBottom,paddingBlock,paddingBlockEnd,paddingBlockStart,paddingInline,paddingInlineEnd,paddingInlineStart,marginLeft,marginRight,marginTop,marginBottom,margin,marginBlock,marginBlockEnd,marginBlockStart,marginInline,marginInlineEnd,marginInlineStart,spaceX,spaceY,outlineWidth,outlineColor,outline,outlineOffset,focusRing,focusVisibleRing,focusRingColor,focusRingOffset,focusRingWidth,focusRingStyle,divideX,divideY,divideColor,divideStyle,width,inlineSize,minWidth,minInlineSize,maxWidth,maxInlineSize,height,blockSize,minHeight,minBlockSize,maxHeight,maxBlockSize,boxSize,color,fontFamily,fontSize,fontSizeAdjust,fontPalette,fontKerning,fontFeatureSettings,fontWeight,fontSmoothing,fontVariant,fontVariantAlternates,fontVariantCaps,fontVariationSettings,fontVariantNumeric,letterSpacing,lineHeight,textAlign,textDecoration,textDecorationColor,textEmphasisColor,textDecorationStyle,textDecorationThickness,textUnderlineOffset,textTransform,textIndent,textShadow,WebkitTextFillColor,textOverflow,verticalAlign,wordBreak,textWrap,truncate,lineClamp,listStyleType,listStylePosition,listStyleImage,listStyle,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundAttachment,backgroundClip,background,backgroundColor,backgroundOrigin,backgroundImage,backgroundRepeat,backgroundBlendMode,backgroundSize,backgroundGradient,backgroundLinear,backgroundRadial,backgroundConic,textGradient,gradientFromPosition,gradientToPosition,gradientFrom,gradientTo,gradientVia,gradientViaPosition,borderRadius,borderTopLeftRadius,borderTopRightRadius,borderBottomRightRadius,borderBottomLeftRadius,borderTopRadius,borderRightRadius,borderBottomRadius,borderLeftRadius,borderStartStartRadius,borderStartEndRadius,borderStartRadius,borderEndStartRadius,borderEndEndRadius,borderEndRadius,border,borderWidth,borderTopWidth,borderLeftWidth,borderRightWidth,borderBottomWidth,borderBlockStartWidth,borderBlockEndWidth,borderColor,borderInline,borderInlineWidth,borderInlineColor,borderBlock,borderBlockWidth,borderBlockColor,borderLeft,borderLeftColor,borderInlineStart,borderInlineStartWidth,borderInlineStartColor,borderRight,borderRightColor,borderInlineEnd,borderInlineEndWidth,borderInlineEndColor,borderTop,borderTopColor,borderBottom,borderBottomColor,borderBlockEnd,borderBlockEndColor,borderBlockStart,borderBlockStartColor,opacity,boxShadow,boxShadowColor,mixBlendMode,filter,brightness,contrast,grayscale,hueRotate,invert,saturate,sepia,dropShadow,blur,backdropFilter,backdropBlur,backdropBrightness,backdropContrast,backdropGrayscale,backdropHueRotate,backdropInvert,backdropOpacity,backdropSaturate,backdropSepia,borderCollapse,borderSpacing,borderSpacingX,borderSpacingY,tableLayout,transitionTimingFunction,transitionDelay,transitionDuration,transitionProperty,transition,animation,animationName,animationTimingFunction,animationDuration,animationDelay,animationPlayState,animationComposition,animationFillMode,animationDirection,animationIterationCount,animationRange,animationState,animationRangeStart,animationRangeEnd,animationTimeline,transformOrigin,transformBox,transformStyle,transform,rotate,rotateX,rotateY,rotateZ,scale,scaleX,scaleY,translate,translateX,translateY,translateZ,accentColor,caretColor,scrollBehavior,scrollbar,scrollbarColor,scrollbarGutter,scrollbarWidth,scrollMargin,scrollMarginLeft,scrollMarginRight,scrollMarginTop,scrollMarginBottom,scrollMarginBlock,scrollMarginBlockEnd,scrollMarginBlockStart,scrollMarginInline,scrollMarginInlineEnd,scrollMarginInlineStart,scrollPadding,scrollPaddingBlock,scrollPaddingBlockStart,scrollPaddingBlockEnd,scrollPaddingInline,scrollPaddingInlineEnd,scrollPaddingInlineStart,scrollPaddingLeft,scrollPaddingRight,scrollPaddingTop,scrollPaddingBottom,scrollSnapAlign,scrollSnapStop,scrollSnapType,scrollSnapStrictness,scrollSnapMargin,scrollSnapMarginTop,scrollSnapMarginBottom,scrollSnapMarginLeft,scrollSnapMarginRight,scrollSnapCoordinate,scrollSnapDestination,scrollSnapPointsX,scrollSnapPointsY,scrollSnapTypeX,scrollSnapTypeY,scrollTimeline,scrollTimelineAxis,scrollTimelineName,touchAction,userSelect,overflow,overflowWrap,overflowX,overflowY,overflowAnchor,overflowBlock,overflowInline,overflowClipBox,overflowClipMargin,overscrollBehaviorBlock,overscrollBehaviorInline,fill,stroke,strokeWidth,strokeDasharray,strokeDashoffset,strokeLinecap,strokeLinejoin,strokeMiterlimit,strokeOpacity,srOnly,debug,appearance,backfaceVisibility,clipPath,hyphens,mask,maskImage,maskSize,textSizeAdjust,container,containerName,containerType,cursor,focusable,gutter,selectChevron,selectChevronRtl,tableChevron,materialSymbols,offset,span,topLeftTriangle,checkmark,sliderThumb,noGutter,scrollable,stretch,colorPalette,_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_complete,_incomplete,_dragging,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_grabbed,_underValue,_overValue,_atValue,_default,_optional,_open,_closed,_fullscreen,_loading,_hidden,_current,_currentPage,_currentStep,_today,_unavailable,_rangeStart,_rangeEnd,_now,_topmost,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_icon,_starting,_noscript,_invertedColors,_nestedFormElements,_nestedFormLabels,_directNestedFormElements,_directNestedSizedElements,_nestedFieldsExceptFirst,_nestedFieldsExceptLast,_progressBar,_progressValue,_mozProgressValue,_webkitSliderThumb,_mozRangeThumb,_webkitSliderRunnableTrack,_mozRangeTrack,_directNestedHeadings,_siblingHeadings,_nestedHeadings,xs,xsOnly,xsDown,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xl,xlOnly,xlDown,xxl,xxlOnly,xxlDown,xsToSm,xsToMd,xsToLg,xsToXl,xsToXxl,smToMd,smToLg,smToXl,smToXxl,mdToLg,mdToXl,mdToXxl,lgToXl,lgToXxl,xlToXxl,textStyle,layerStyle,animationStyle", i = r.split(","), n = "WebkitAppearance,WebkitBorderBefore,WebkitBorderBeforeColor,WebkitBorderBeforeStyle,WebkitBorderBeforeWidth,WebkitBoxReflect,WebkitLineClamp,WebkitMask,WebkitMaskAttachment,WebkitMaskClip,WebkitMaskComposite,WebkitMaskImage,WebkitMaskOrigin,WebkitMaskPosition,WebkitMaskPositionX,WebkitMaskPositionY,WebkitMaskRepeat,WebkitMaskRepeatX,WebkitMaskRepeatY,WebkitMaskSize,WebkitOverflowScrolling,WebkitTapHighlightColor,WebkitTextFillColor,WebkitTextStroke,WebkitTextStrokeColor,WebkitTextStrokeWidth,WebkitTouchCallout,WebkitUserModify,WebkitUserSelect,accentColor,alignContent,alignItems,alignSelf,alignTracks,all,anchorName,anchorScope,animation,animationComposition,animationDelay,animationDirection,animationDuration,animationFillMode,animationIterationCount,animationName,animationPlayState,animationRange,animationRangeEnd,animationRangeStart,animationTimeline,animationTimingFunction,appearance,aspectRatio,backdropFilter,backfaceVisibility,background,backgroundAttachment,backgroundBlendMode,backgroundClip,backgroundColor,backgroundImage,backgroundOrigin,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundRepeat,backgroundSize,blockSize,border,borderBlock,borderBlockColor,borderBlockEnd,borderBlockEndColor,borderBlockEndStyle,borderBlockEndWidth,borderBlockStart,borderBlockStartColor,borderBlockStartStyle,borderBlockStartWidth,borderBlockStyle,borderBlockWidth,borderBottom,borderBottomColor,borderBottomLeftRadius,borderBottomRightRadius,borderBottomStyle,borderBottomWidth,borderCollapse,borderColor,borderEndEndRadius,borderEndStartRadius,borderImage,borderImageOutset,borderImageRepeat,borderImageSlice,borderImageSource,borderImageWidth,borderInline,borderInlineColor,borderInlineEnd,borderInlineEndColor,borderInlineEndStyle,borderInlineEndWidth,borderInlineStart,borderInlineStartColor,borderInlineStartStyle,borderInlineStartWidth,borderInlineStyle,borderInlineWidth,borderLeft,borderLeftColor,borderLeftStyle,borderLeftWidth,borderRadius,borderRight,borderRightColor,borderRightStyle,borderRightWidth,borderSpacing,borderStartEndRadius,borderStartStartRadius,borderStyle,borderTop,borderTopColor,borderTopLeftRadius,borderTopRightRadius,borderTopStyle,borderTopWidth,borderWidth,bottom,boxAlign,boxDecorationBreak,boxDirection,boxFlex,boxFlexGroup,boxLines,boxOrdinalGroup,boxOrient,boxPack,boxShadow,boxSizing,breakAfter,breakBefore,breakInside,captionSide,caret,caretColor,caretShape,clear,clip,clipPath,clipRule,color,colorInterpolationFilters,colorScheme,columnCount,columnFill,columnGap,columnRule,columnRuleColor,columnRuleStyle,columnRuleWidth,columnSpan,columnWidth,columns,contain,containIntrinsicBlockSize,containIntrinsicHeight,containIntrinsicInlineSize,containIntrinsicSize,containIntrinsicWidth,container,containerName,containerType,content,contentVisibility,counterIncrement,counterReset,counterSet,cursor,cx,cy,d,direction,display,dominantBaseline,emptyCells,fieldSizing,fill,fillOpacity,fillRule,filter,flex,flexBasis,flexDirection,flexFlow,flexGrow,flexShrink,flexWrap,float,floodColor,floodOpacity,font,fontFamily,fontFeatureSettings,fontKerning,fontLanguageOverride,fontOpticalSizing,fontPalette,fontSize,fontSizeAdjust,fontSmooth,fontStretch,fontStyle,fontSynthesis,fontSynthesisPosition,fontSynthesisSmallCaps,fontSynthesisStyle,fontSynthesisWeight,fontVariant,fontVariantAlternates,fontVariantCaps,fontVariantEastAsian,fontVariantEmoji,fontVariantLigatures,fontVariantNumeric,fontVariantPosition,fontVariationSettings,fontWeight,forcedColorAdjust,gap,grid,gridArea,gridAutoColumns,gridAutoFlow,gridAutoRows,gridColumn,gridColumnEnd,gridColumnGap,gridColumnStart,gridGap,gridRow,gridRowEnd,gridRowGap,gridRowStart,gridTemplate,gridTemplateAreas,gridTemplateColumns,gridTemplateRows,hangingPunctuation,height,hyphenateCharacter,hyphenateLimitChars,hyphens,imageOrientation,imageRendering,imageResolution,imeMode,initialLetter,initialLetterAlign,inlineSize,inset,insetBlock,insetBlockEnd,insetBlockStart,insetInline,insetInlineEnd,insetInlineStart,interpolateSize,isolation,justifyContent,justifyItems,justifySelf,justifyTracks,left,letterSpacing,lightingColor,lineBreak,lineClamp,lineHeight,lineHeightStep,listStyle,listStyleImage,listStylePosition,listStyleType,margin,marginBlock,marginBlockEnd,marginBlockStart,marginBottom,marginInline,marginInlineEnd,marginInlineStart,marginLeft,marginRight,marginTop,marginTrim,marker,markerEnd,markerMid,markerStart,mask,maskBorder,maskBorderMode,maskBorderOutset,maskBorderRepeat,maskBorderSlice,maskBorderSource,maskBorderWidth,maskClip,maskComposite,maskImage,maskMode,maskOrigin,maskPosition,maskRepeat,maskSize,maskType,masonryAutoFlow,mathDepth,mathShift,mathStyle,maxBlockSize,maxHeight,maxInlineSize,maxLines,maxWidth,minBlockSize,minHeight,minInlineSize,minWidth,mixBlendMode,objectFit,objectPosition,offset,offsetAnchor,offsetDistance,offsetPath,offsetPosition,offsetRotate,opacity,order,orphans,outline,outlineColor,outlineOffset,outlineStyle,outlineWidth,overflow,overflowAnchor,overflowBlock,overflowClipBox,overflowClipMargin,overflowInline,overflowWrap,overflowX,overflowY,overlay,overscrollBehavior,overscrollBehaviorBlock,overscrollBehaviorInline,overscrollBehaviorX,overscrollBehaviorY,padding,paddingBlock,paddingBlockEnd,paddingBlockStart,paddingBottom,paddingInline,paddingInlineEnd,paddingInlineStart,paddingLeft,paddingRight,paddingTop,page,pageBreakAfter,pageBreakBefore,pageBreakInside,paintOrder,perspective,perspectiveOrigin,placeContent,placeItems,placeSelf,pointerEvents,position,positionAnchor,positionArea,positionTry,positionTryFallbacks,positionTryOrder,positionVisibility,printColorAdjust,quotes,r,resize,right,rotate,rowGap,rubyAlign,rubyMerge,rubyPosition,rx,ry,scale,scrollBehavior,scrollMargin,scrollMarginBlock,scrollMarginBlockEnd,scrollMarginBlockStart,scrollMarginBottom,scrollMarginInline,scrollMarginInlineEnd,scrollMarginInlineStart,scrollMarginLeft,scrollMarginRight,scrollMarginTop,scrollPadding,scrollPaddingBlock,scrollPaddingBlockEnd,scrollPaddingBlockStart,scrollPaddingBottom,scrollPaddingInline,scrollPaddingInlineEnd,scrollPaddingInlineStart,scrollPaddingLeft,scrollPaddingRight,scrollPaddingTop,scrollSnapAlign,scrollSnapCoordinate,scrollSnapDestination,scrollSnapPointsX,scrollSnapPointsY,scrollSnapStop,scrollSnapType,scrollSnapTypeX,scrollSnapTypeY,scrollTimeline,scrollTimelineAxis,scrollTimelineName,scrollbarColor,scrollbarGutter,scrollbarWidth,shapeImageThreshold,shapeMargin,shapeOutside,shapeRendering,stopColor,stopOpacity,stroke,strokeDasharray,strokeDashoffset,strokeLinecap,strokeLinejoin,strokeMiterlimit,strokeOpacity,strokeWidth,tabSize,tableLayout,textAlign,textAlignLast,textAnchor,textBox,textBoxEdge,textBoxTrim,textCombineUpright,textDecoration,textDecorationColor,textDecorationLine,textDecorationSkip,textDecorationSkipInk,textDecorationStyle,textDecorationThickness,textEmphasis,textEmphasisColor,textEmphasisPosition,textEmphasisStyle,textIndent,textJustify,textOrientation,textOverflow,textRendering,textShadow,textSizeAdjust,textSpacingTrim,textTransform,textUnderlineOffset,textUnderlinePosition,textWrap,textWrapMode,textWrapStyle,timelineScope,top,touchAction,transform,transformBox,transformOrigin,transformStyle,transition,transitionBehavior,transitionDelay,transitionDuration,transitionProperty,transitionTimingFunction,translate,unicodeBidi,userSelect,vectorEffect,verticalAlign,viewTimeline,viewTimelineAxis,viewTimelineInset,viewTimelineName,viewTransitionName,visibility,whiteSpace,whiteSpaceCollapse,widows,width,willChange,wordBreak,wordSpacing,wordWrap,writingMode,x,y,zIndex,zoom,alignmentBaseline,baselineShift,colorInterpolation,colorRendering,glyphOrientationVertical", a = n.split(",").concat(i), l = new Map(a.map((o) => [o, !0])), d = /&|@/, s = /* @__PURE__ */ e((o) => l.has(o) || o.startsWith("--") || d.test(o));
+const g = (o) => t(o, s);
+export {
+  s as i,
+  g as s
+};

package/dist/main.d.ts

@@ -0,0 +1,65 @@
+export * from './components/Alert';
+export * from './components/Autocomplete';
+export * from './components/Button';
+export * from './components/ButtonGroup';
+export * from './components/Card';
+export * from './components/Checkbox';
+export * from './components/CheckboxGroup';
+export * from './components/Col';
+export * from './components/Container';
+export * from './components/Divider';
+export * from './components/Expander';
+export * from './components/Field';
+export * from './components/Hide';
+export * from './components/Icon';
+export * from './components/Image';
+export * from './components/Inline';
+export * from './components/Input';
+export * from './components/InputCurrency';
+export * from './components/Label';
+export * from './components/Link';
+export * from './components/Menu';
+export * from './components/Modal';
+export * from './components/Panel';
+export * from './components/Pill';
+export * from './components/Placeholder';
+export * from './components/Popover';
+export * from './components/Progress';
+export * from './components/Provider';
+export * from './components/Radio';
+export * from './components/RadioMark';
+export * from './components/RadioGroup';
+export * from './components/Readonly';
+export * from './components/Select';
+export * from './components/Row';
+export * from './components/Select';
+export * from './components/Skeleton';
+export * from './components/SkipLink';
+export * from './components/Slideout';
+export * from './components/Slider';
+export * from './components/Spinner';
+export * from './components/Stack';
+export * from './components/Styled';
+export * from './components/Table';
+export * from './components/TabSet';
+export * from './components/Tag';
+export * from './components/Text';
+export * from './components/Toaster';
+export * from './components/Toggle';
+export * from './components/Tooltip';
+export * from './components/ValidationMessage';
+export * from './patterns/Breadcrumbs';
+export * from './patterns/DropdownMenu';
+export * from './patterns/Form';
+export * from './patterns/Loading';
+export * from './patterns/Shadow';
+export * from './patterns/ContextualMenu';
+export * from './patterns/SideNav';
+export * from './constants';
+export * from './enums';
+export * from './interfaces';
+export * from './types';
+export * from './helpers/formatting/toArray';
+export * from './helpers/styling/iressCss';
+export * from './hooks';
+export type { ColorToken } from './styled-system/tokens';