@iress-oss/ids-mcp-server 6.0.0-alpha.26 → 6.0.0-alpha.30

package/generated/docs/components_components-skeleton-recipes-docs.md

@@ -1,444 +0,0 @@
-Recipes
-=======
-
-`IressCard`
------------
-
-A common use case of the skeleton component is within a card component. Below are some examples of how you might use `IressSkeleton` within `IressCard`.
-
-[](./iframe.html?id=components-skeleton-recipes--card)
-
-Toggle load
-
-Hide codedrawOpen in CodeSandbox
-
-import { useState } from 'react';
-import {
-  IressButton,
-  IressCard,
-  IressSkeleton,
-  IressStack,
-  IressText,
-} from '@/main';
-const CARD\_LINE\_SIZES \= \['100%', '91%', '95%', '89%', '83%'\];
-const CardLoading \= () \=> (
-  <IressCard
-    heading\={<IressSkeleton textStyle\="typography.heading.4" width\="75%" />}
-    media\={<IressSkeleton mode\="rect" height\="200" />}
-    stretch
-  \>
-    <IressStack gap\="md"\>
-      <IressStack gap\="xs"\>
-        {CARD\_LINE\_SIZES.map((size) \=> (
-          <IressSkeleton key\={\`${size}\-1\`} width\={size} />
-        ))}
-      </IressStack\>
-      <IressStack gap\="xs"\>
-        {CARD\_LINE\_SIZES.map((size) \=> (
-          <IressSkeleton key\={\`${size}\-2\`} width\={size} />
-        ))}
-      </IressStack\>
-    </IressStack\>
-  </IressCard\>
-);
-const CardItem \= () \=> (
-  <IressCard
-    heading\={<h4\>This is the card heading</h4\>}
-    media\={
-      <img
-        src\="https://www.iress.com/media/images/media-contact.width-600.png"
-        alt\=""
-      />
-    }
-  \>
-    <IressText element\="p"\>
-      Non cupiditate, libero ex, voluptates ea ipsum deleniti sequi sed eveniet      ab enim sunt itaque qui ullam, adipisci quo expedita laboriosam deserunt?    </IressText\>
-    <IressText element\="p"\>
-      Impedit, quasi voluptas quae quibusdam officiis corporis. Distinctio et      aspernatur quo atque non enim, recusandae at, eum dicta ullam commodi modi      debitis.    </IressText\>
-  </IressCard\>
-);
-export const SkeletonCard \= () \=> {
-  const \[loading, setLoading\] \= useState(true);
-  return (
-    <IressStack gap\="md"\>
-      <IressButton onClick\={() \=> setLoading(!loading)}\>
-        Toggle load      </IressButton\>
-      {loading && <CardLoading />}
-      {!loading && <CardItem />}
-    </IressStack\>
-  );
-};
-
-```
-
-#### Props
-
-| Name | Description | Default | Control |
-| --- | --- | --- | --- |
-| alignSelf | 
-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.
-
-undefined | "stretch" | "center" | "start" | "end" | Partial<Record<"base" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl", "stretch" | "center" | "start" | "end">>
-
- | \- | alignSelfChoose option...undefinedstretchcenterstartendPartial<Record<"base" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl", "stretch" | "center" | "start" | "end">> |
-| bg | 
-
-**`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
-
-undefined"alt""text""colour.neutral.10""colour.neutral.20""colour.neutral.30""colour.neutral.40""colour.neutral.50"Show 64 more...
-
-
-
- | \- | bgChoose option...undefinedalttextcolour.neutral.10colour.neutral.20colour.neutral.30colour.neutral.40colour.neutral.50colour.neutral.60colour.neutral.70colour.neutral.80colour.neutral.90colour.primary.fillcolour.primary.fillHovercolour.primary.onFillcolour.primary.surfacecolour.primary.surfaceHovercolour.primary.textcolour.accent.fillcolour.accent.fillHovercolour.accent.onFillcolour.accent.surfacecolour.accent.surfaceHovercolour.accent.textcolour.system.success.fillcolour.system.success.fillHovercolour.system.success.onFillcolour.system.success.surfacecolour.system.success.surfaceHovercolour.system.success.textcolour.system.danger.fillcolour.system.danger.fillHovercolour.system.danger.onFillcolour.system.danger.surfacecolour.system.danger.surfaceHovercolour.system.danger.textcolour.system.warning.fillcolour.system.warning.onFillcolour.system.warning.fillHovercolour.system.warning.surfacecolour.system.warning.textcolour.system.warning.surfaceHovercolour.system.info.fillcolour.system.info.onFillcolour.system.info.fillHovercolour.system.info.surfacecolour.system.info.textcolour.system.info.surfaceHovercolour.data.subtle.10colour.data.subtle.20colour.data.subtle.30colour.data.subtle.40colour.data.subtle.50colour.data.subtle.60colour.data.subtle.70colour.data.subtle.80colour.data.subtle.90colour.data.bold.10colour.data.bold.20colour.data.bold.30colour.data.bold.40colour.data.bold.50colour.data.bold.60colour.data.bold.70colour.data.bold.80colour.data.bold.90colour.globalInteractions.backdropcolour.globalInteractions.focusRingtransparentpagemutedcolorPalette |
-| borderRadius | 
-
-The **`border-radius`** CSS property rounds the corners of an element's outer border edge using the radius tokens in the design system.
-
-undefined | "none" | "radius.0" | "radius.1" | "radius.2" | "radius.3" | "radius.4" | "radius.system.button" | "radius.system.form" | "radius.system.layout" | "radius.system.pill" | "radius.system.tag" | "50%" | Partial<Record<"base" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl", RadiusToken>>
-
- | \- | borderRadiusChoose option...undefinednoneradius.0radius.1radius.2radius.3radius.4radius.system.buttonradius.system.formradius.system.layoutradius.system.pillradius.system.tag50%Partial<Record<"base" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl", RadiusToken>> |
-| color | 
-
-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
-
-undefined"alt""text""colour.neutral.10""colour.neutral.20""colour.neutral.30""colour.neutral.40""colour.neutral.50"Show 64 more...
-
-
-
- | \- | colorChoose option...undefinedalttextcolour.neutral.10colour.neutral.20colour.neutral.30colour.neutral.40colour.neutral.50colour.neutral.60colour.neutral.70colour.neutral.80colour.neutral.90colour.primary.fillcolour.primary.fillHovercolour.primary.onFillcolour.primary.surfacecolour.primary.surfaceHovercolour.primary.textcolour.accent.fillcolour.accent.fillHovercolour.accent.onFillcolour.accent.surfacecolour.accent.surfaceHovercolour.accent.textcolour.system.success.fillcolour.system.success.fillHovercolour.system.success.onFillcolour.system.success.surfacecolour.system.success.surfaceHovercolour.system.success.textcolour.system.danger.fillcolour.system.danger.fillHovercolour.system.danger.onFillcolour.system.danger.surfacecolour.system.danger.surfaceHovercolour.system.danger.textcolour.system.warning.fillcolour.system.warning.onFillcolour.system.warning.fillHovercolour.system.warning.surfacecolour.system.warning.textcolour.system.warning.surfaceHovercolour.system.info.fillcolour.system.info.onFillcolour.system.info.fillHovercolour.system.info.surfacecolour.system.info.textcolour.system.info.surfaceHovercolour.data.subtle.10colour.data.subtle.20colour.data.subtle.30colour.data.subtle.40colour.data.subtle.50colour.data.subtle.60colour.data.subtle.70colour.data.subtle.80colour.data.subtle.90colour.data.bold.10colour.data.bold.20colour.data.bold.30colour.data.bold.40colour.data.bold.50colour.data.bold.60colour.data.bold.70colour.data.bold.80colour.data.bold.90colour.globalInteractions.backdropcolour.globalInteractions.focusRingtransparentpagemutedcolorPalette |
-| flex | 
-
-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.
-
-undefined"1"
-
-
-
- | \- | 
-
-flex1undefined
-
- |
-| focusable | 
-
-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.
-
-undefined"true""within"
-
-
-
- | \- | 
-
-focusableundefinedtruewithin
-
- |
-| height | 
-
-Sets the height of the skeleton bones. If no unit is specified it will default to pixels. Not allowed when in `text` mode.
-
-undefinedstring
-
-
-
- | \- | 
-
-heightundefinedstring
-
- |
-| hideBelow | 
-
-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.
-
-undefined"xs""sm""md""lg""xl""xxl"
-
-
-
- | \- | hideBelowChoose option...undefinedxssmmdlgxlxxl |
-| hideFrom | 
-
-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.
-
-undefined"xs""sm""md""lg""xl""xxl"
-
-
-
- | \- | hideFromChoose option...undefinedxssmmdlgxlxxl |
-| m | 
-
-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.
-
-undefined | "none" | "auto" | "xs" | "sm" | "md" | "lg" | "xl" | "spacing.0" | "spacing.1" | "spacing.2" | "spacing.3" | "spacing.4" | "spacing.5" | "spacing.6" | "spacing.7" | "spacing.8" | "spacing.10" | "-spacing.0" | "-spacing.1" | "-spacing.2" | "-spacing.3" | "-spacing.4" | "-spacing.5" | "-spacing.6" | "-spacing.7" | "-spacing.8" | "-spacing.10" | "-none" | "-xs" | "-sm" | "-md" | "-lg" | "-xl" | Partial<Record<"base" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl", "auto" | SpacingToken>>
-
- | \- | mChoose option...undefinednoneautoxssmmdlgxlspacing.0spacing.1spacing.2spacing.3spacing.4spacing.5spacing.6spacing.7spacing.8spacing.10\-spacing.0\-spacing.1\-spacing.2\-spacing.3\-spacing.4\-spacing.5\-spacing.6\-spacing.7\-spacing.8\-spacing.10\-none\-xs\-sm\-md\-lg\-xlPartial<Record<"base" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl", "auto" | SpacingToken>> |
-| maxWidth | 
-
-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`.
-
-undefined"container.xs""container.sm""container.md""container.lg""container.xl""container.xxl""input.2"Show 27 more...
-
-
-
- | \- | maxWidthChoose option...undefinedcontainer.xscontainer.smcontainer.mdcontainer.lgcontainer.xlcontainer.xxlinput.2input.4input.6input.8input.10input.12input.16input.25%input.50%input.75%input.100%input.height1/122/123/124/125/126/127/128/129/1210/1211/1212/12overlay.smoverlay.mdoverlay.lgtypography.base |
-| mb | 
-
-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.
-
-undefined | "none" | "auto" | "xs" | "sm" | "md" | "lg" | "xl" | "spacing.0" | "spacing.1" | "spacing.2" | "spacing.3" | "spacing.4" | "spacing.5" | "spacing.6" | "spacing.7" | "spacing.8" | "spacing.10" | "-spacing.0" | "-spacing.1" | "-spacing.2" | "-spacing.3" | "-spacing.4" | "-spacing.5" | "-spacing.6" | "-spacing.7" | "-spacing.8" | "-spacing.10" | "-none" | "-xs" | "-sm" | "-md" | "-lg" | "-xl" | Partial<Record<"base" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl", "auto" | SpacingToken>>
-
- | \- | mbChoose option...undefinednoneautoxssmmdlgxlspacing.0spacing.1spacing.2spacing.3spacing.4spacing.5spacing.6spacing.7spacing.8spacing.10\-spacing.0\-spacing.1\-spacing.2\-spacing.3\-spacing.4\-spacing.5\-spacing.6\-spacing.7\-spacing.8\-spacing.10\-none\-xs\-sm\-md\-lg\-xlPartial<Record<"base" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl", "auto" | SpacingToken>> |
-| ml | 
-
-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.
-
-undefined | "none" | "auto" | "xs" | "sm" | "md" | "lg" | "xl" | "spacing.0" | "spacing.1" | "spacing.2" | "spacing.3" | "spacing.4" | "spacing.5" | "spacing.6" | "spacing.7" | "spacing.8" | "spacing.10" | "-spacing.0" | "-spacing.1" | "-spacing.2" | "-spacing.3" | "-spacing.4" | "-spacing.5" | "-spacing.6" | "-spacing.7" | "-spacing.8" | "-spacing.10" | "-none" | "-xs" | "-sm" | "-md" | "-lg" | "-xl" | Partial<Record<"base" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl", "auto" | SpacingToken>>
-
- | \- | mlChoose option...undefinednoneautoxssmmdlgxlspacing.0spacing.1spacing.2spacing.3spacing.4spacing.5spacing.6spacing.7spacing.8spacing.10\-spacing.0\-spacing.1\-spacing.2\-spacing.3\-spacing.4\-spacing.5\-spacing.6\-spacing.7\-spacing.8\-spacing.10\-none\-xs\-sm\-md\-lg\-xlPartial<Record<"base" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl", "auto" | SpacingToken>> |
-| mode | 
-
-Mode of the skeleton. `rect` and `circle` must have `width` and `height` specified. `text` works with `textStyle`.
-
-undefined"text""circle""rect"
-
-
-
- | 
-
-text
-
- | 
-
-modeundefinedtextcirclerect
-
- |
-| mr | 
-
-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.
-
-undefined | "none" | "auto" | "xs" | "sm" | "md" | "lg" | "xl" | "spacing.0" | "spacing.1" | "spacing.2" | "spacing.3" | "spacing.4" | "spacing.5" | "spacing.6" | "spacing.7" | "spacing.8" | "spacing.10" | "-spacing.0" | "-spacing.1" | "-spacing.2" | "-spacing.3" | "-spacing.4" | "-spacing.5" | "-spacing.6" | "-spacing.7" | "-spacing.8" | "-spacing.10" | "-none" | "-xs" | "-sm" | "-md" | "-lg" | "-xl" | Partial<Record<"base" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl", "auto" | SpacingToken>>
-
- | \- | mrChoose option...undefinednoneautoxssmmdlgxlspacing.0spacing.1spacing.2spacing.3spacing.4spacing.5spacing.6spacing.7spacing.8spacing.10\-spacing.0\-spacing.1\-spacing.2\-spacing.3\-spacing.4\-spacing.5\-spacing.6\-spacing.7\-spacing.8\-spacing.10\-none\-xs\-sm\-md\-lg\-xlPartial<Record<"base" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl", "auto" | SpacingToken>> |
-| mt | 
-
-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.
-
-undefined | "none" | "auto" | "xs" | "sm" | "md" | "lg" | "xl" | "spacing.0" | "spacing.1" | "spacing.2" | "spacing.3" | "spacing.4" | "spacing.5" | "spacing.6" | "spacing.7" | "spacing.8" | "spacing.10" | "-spacing.0" | "-spacing.1" | "-spacing.2" | "-spacing.3" | "-spacing.4" | "-spacing.5" | "-spacing.6" | "-spacing.7" | "-spacing.8" | "-spacing.10" | "-none" | "-xs" | "-sm" | "-md" | "-lg" | "-xl" | Partial<Record<"base" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl", "auto" | SpacingToken>>
-
- | \- | mtChoose option...undefinednoneautoxssmmdlgxlspacing.0spacing.1spacing.2spacing.3spacing.4spacing.5spacing.6spacing.7spacing.8spacing.10\-spacing.0\-spacing.1\-spacing.2\-spacing.3\-spacing.4\-spacing.5\-spacing.6\-spacing.7\-spacing.8\-spacing.10\-none\-xs\-sm\-md\-lg\-xlPartial<Record<"base" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl", "auto" | SpacingToken>> |
-| mx | 
-
-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.
-
-undefined | "none" | "auto" | "xs" | "sm" | "md" | "lg" | "xl" | "spacing.0" | "spacing.1" | "spacing.2" | "spacing.3" | "spacing.4" | "spacing.5" | "spacing.6" | "spacing.7" | "spacing.8" | "spacing.10" | "-spacing.0" | "-spacing.1" | "-spacing.2" | "-spacing.3" | "-spacing.4" | "-spacing.5" | "-spacing.6" | "-spacing.7" | "-spacing.8" | "-spacing.10" | "-none" | "-xs" | "-sm" | "-md" | "-lg" | "-xl" | Partial<Record<"base" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl", "auto" | SpacingToken>>
-
- | \- | mxChoose option...undefinednoneautoxssmmdlgxlspacing.0spacing.1spacing.2spacing.3spacing.4spacing.5spacing.6spacing.7spacing.8spacing.10\-spacing.0\-spacing.1\-spacing.2\-spacing.3\-spacing.4\-spacing.5\-spacing.6\-spacing.7\-spacing.8\-spacing.10\-none\-xs\-sm\-md\-lg\-xlPartial<Record<"base" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl", "auto" | SpacingToken>> |
-| my | 
-
-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.
-
-undefined | "none" | "auto" | "xs" | "sm" | "md" | "lg" | "xl" | "spacing.0" | "spacing.1" | "spacing.2" | "spacing.3" | "spacing.4" | "spacing.5" | "spacing.6" | "spacing.7" | "spacing.8" | "spacing.10" | "-spacing.0" | "-spacing.1" | "-spacing.2" | "-spacing.3" | "-spacing.4" | "-spacing.5" | "-spacing.6" | "-spacing.7" | "-spacing.8" | "-spacing.10" | "-none" | "-xs" | "-sm" | "-md" | "-lg" | "-xl" | Partial<Record<"base" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl", "auto" | SpacingToken>>
-
- | \- | myChoose option...undefinednoneautoxssmmdlgxlspacing.0spacing.1spacing.2spacing.3spacing.4spacing.5spacing.6spacing.7spacing.8spacing.10\-spacing.0\-spacing.1\-spacing.2\-spacing.3\-spacing.4\-spacing.5\-spacing.6\-spacing.7\-spacing.8\-spacing.10\-none\-xs\-sm\-md\-lg\-xlPartial<Record<"base" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl", "auto" | SpacingToken>> |
-| noGutter | 
-
-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.
-
-undefinedfalsetrue
-
-
-
- | \- | 
-
-noGutterundefinedfalsetrue
-
- |
-| p | 
-
-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.
-
-undefined | "none" | "xs" | "sm" | "md" | "lg" | "xl" | "spacing.0" | "spacing.1" | "spacing.2" | "spacing.3" | "spacing.4" | "spacing.5" | "spacing.6" | "spacing.7" | "spacing.8" | "spacing.10" | Partial<Record<"base" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl", PositiveSpacingToken>>
-
- | \- | pChoose option...undefinednonexssmmdlgxlspacing.0spacing.1spacing.2spacing.3spacing.4spacing.5spacing.6spacing.7spacing.8spacing.10Partial<Record<"base" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl", PositiveSpacingToken>> |
-| pb | 
-
-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.
-
-undefined | "none" | "xs" | "sm" | "md" | "lg" | "xl" | "spacing.0" | "spacing.1" | "spacing.2" | "spacing.3" | "spacing.4" | "spacing.5" | "spacing.6" | "spacing.7" | "spacing.8" | "spacing.10" | Partial<Record<"base" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl", PositiveSpacingToken>>
-
- | \- | pbChoose option...undefinednonexssmmdlgxlspacing.0spacing.1spacing.2spacing.3spacing.4spacing.5spacing.6spacing.7spacing.8spacing.10Partial<Record<"base" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl", PositiveSpacingToken>> |
-| pl | 
-
-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.
-
-undefined | "none" | "xs" | "sm" | "md" | "lg" | "xl" | "spacing.0" | "spacing.1" | "spacing.2" | "spacing.3" | "spacing.4" | "spacing.5" | "spacing.6" | "spacing.7" | "spacing.8" | "spacing.10" | Partial<Record<"base" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl", PositiveSpacingToken>>
-
- | \- | plChoose option...undefinednonexssmmdlgxlspacing.0spacing.1spacing.2spacing.3spacing.4spacing.5spacing.6spacing.7spacing.8spacing.10Partial<Record<"base" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl", PositiveSpacingToken>> |
-| pr | 
-
-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.
-
-undefined | "none" | "xs" | "sm" | "md" | "lg" | "xl" | "spacing.0" | "spacing.1" | "spacing.2" | "spacing.3" | "spacing.4" | "spacing.5" | "spacing.6" | "spacing.7" | "spacing.8" | "spacing.10" | Partial<Record<"base" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl", PositiveSpacingToken>>
-
- | \- | prChoose option...undefinednonexssmmdlgxlspacing.0spacing.1spacing.2spacing.3spacing.4spacing.5spacing.6spacing.7spacing.8spacing.10Partial<Record<"base" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl", PositiveSpacingToken>> |
-| pt | 
-
-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.
-
-undefined | "none" | "xs" | "sm" | "md" | "lg" | "xl" | "spacing.0" | "spacing.1" | "spacing.2" | "spacing.3" | "spacing.4" | "spacing.5" | "spacing.6" | "spacing.7" | "spacing.8" | "spacing.10" | Partial<Record<"base" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl", PositiveSpacingToken>>
-
- | \- | ptChoose option...undefinednonexssmmdlgxlspacing.0spacing.1spacing.2spacing.3spacing.4spacing.5spacing.6spacing.7spacing.8spacing.10Partial<Record<"base" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl", PositiveSpacingToken>> |
-| px | 
-
-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.
-
-undefined | "none" | "xs" | "sm" | "md" | "lg" | "xl" | "spacing.0" | "spacing.1" | "spacing.2" | "spacing.3" | "spacing.4" | "spacing.5" | "spacing.6" | "spacing.7" | "spacing.8" | "spacing.10" | Partial<Record<"base" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl", PositiveSpacingToken>>
-
- | \- | pxChoose option...undefinednonexssmmdlgxlspacing.0spacing.1spacing.2spacing.3spacing.4spacing.5spacing.6spacing.7spacing.8spacing.10Partial<Record<"base" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl", PositiveSpacingToken>> |
-| py | 
-
-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.
-
-undefined | "none" | "xs" | "sm" | "md" | "lg" | "xl" | "spacing.0" | "spacing.1" | "spacing.2" | "spacing.3" | "spacing.4" | "spacing.5" | "spacing.6" | "spacing.7" | "spacing.8" | "spacing.10" | Partial<Record<"base" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl", PositiveSpacingToken>>
-
- | \- | pyChoose option...undefinednonexssmmdlgxlspacing.0spacing.1spacing.2spacing.3spacing.4spacing.5spacing.6spacing.7spacing.8spacing.10Partial<Record<"base" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl", PositiveSpacingToken>> |
-| scrollable | 
-
-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.
-
-undefined"true""x""y"
-
-
-
- | \- | 
-
-scrollableundefinedtruexy
-
- |
-| srOnly | 
-
-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 }`
-
-undefined | false | true | Partial<Record<"base" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl", boolean>>
-
- | \- | 
-
-srOnlyundefinedfalsetruePartial<Record<"base" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl", boolean>>
-
- |
-| stretch | 
-
-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.
-
-undefinedfalsetrue
-
-
-
- | \- | 
-
-stretchundefinedfalsetrue
-
- |
-| textAlign | 
-
-The **`text-align`** CSS property sets the horizontal alignment of the inline-level content inside a block element or table-cell box.
-
-undefined | "inherit" | "center" | "right" | "left" | "justify" | Partial<Record<"base" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl", "inherit" | "center" | "right" | "left" | "justify">>
-
- | \- | textAlignChoose option...undefinedinheritcenterrightleftjustifyPartial<Record<"base" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl", "inherit" | "center" | "right" | "left" | "justify">> |
-| textStyle | 
-
-Use `textStyle` to specify what the Skeleton should emulate. If set to `h1` a non-break space with the same font-size and line-height of a h1 will be rendered.
-
-undefined | "inherit" | "typography.heading.1" | "typography.heading.2" | "typography.heading.3" | "typography.heading.4" | "typography.heading.5" | "typography.body.sm" | "typography.body.sm.regular" | "typography.body.sm.medium" | "typography.body.sm.strong" | "typography.body.sm.em" | "typography.body.md.regular" | "typography.body.md" | "typography.body.md.medium" | "typography.body.md.strong" | "typography.body.md.em" | "typography.code" | Partial<Record<"base" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl", "inherit" | "typography.heading.1" | "typography.heading.2" | "typography.heading.3" | "typography.heading.4" | "typography.heading.5" | ... 10 more ... | "typography.code">>
-
- | \- | textStyleChoose option...undefinedinherittypography.heading.1typography.heading.2typography.heading.3typography.heading.4typography.heading.5typography.body.smtypography.body.sm.regulartypography.body.sm.mediumtypography.body.sm.strongtypography.body.sm.emtypography.body.md.regulartypography.body.mdtypography.body.md.mediumtypography.body.md.strongtypography.body.md.emtypography.codePartial<Record<"base" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl", "inherit" | "typography.heading.1" | "typography.heading.2" | "typography.heading.3" | "typography.heading.4" | "typography.heading.5" | ... 10 more ... | "typography.code">> |
-| width | 
-
-Sets the width of the skeleton bones. If no unit is specified it will default to pixels.
-
-undefinedstring
-
-
-
- | \- | 
-
-widthundefinedstring
-
- |