@atlaskit/css 0.0.4 → 0.0.6

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/css
 
+## 0.0.6
+
+### Patch Changes
+
+- [#89540](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/89540) [`1748b673d90d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1748b673d90d) - DSP-17890 Add media query types to createStrictAPI, just be aware that cascading media queries are not guaranteed to work with Compiled, refer to https://compiledcssinjs.com/docs/atomic-css#selector-specificity
+
+## 0.0.5
+
+### Patch Changes
+
+- [#83116](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/83116) [`8d4e99057fe0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8d4e99057fe0) - Upgrade Typescript from `4.9.5` to `5.4.2`
+
 ## 0.0.4
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -17,6 +17,9 @@ var _createStrictAPI = (0, _react2.createStrictAPI)(),
   cssMap = exports.cssMap = _createStrictAPI.cssMap,
   cx = exports.cx = _createStrictAPI.cx;
 
+// This is to mitigate local TS error TS2315: Type 'StrictXCSSProp' is not generic.
+// Currently for some reason tsc is generating malformed .d.ts in local dev environment, below change fixes it
+
 /**
  * ## StrictXCSSProp
  *
@@ -31,7 +34,7 @@ var _createStrictAPI = (0, _react2.createStrictAPI)(),
  * the styles!
  *
  * The {@link StrictXCSSProp} type has generics two of which must be defined — use to explicitly
- * set want you to maintain as API. Use {@link XCSSAllProperties} and {@link XCSSAllPseudos}
+ * set what you want to maintain as API. Use {@link XCSSAllProperties} and {@link XCSSAllPseudos}
  * to enable all properties and pseudos.
  *
  * The third generic is used to declare what properties and pseudos should be required.
@@ -41,7 +44,7 @@ var _createStrictAPI = (0, _react2.createStrictAPI)(),
  *   // Color is accepted, all other properties / pseudos are considered violations.
  *   xcss?: StrictXCSSProp<'color', never>;
  *
- *   // Only backgrond color and hover pseudo is accepted.
+ *   // Only background color and hover pseudo are accepted.
  *   xcss?: StrictXCSSProp<'backgroundColor', '&:hover'>;
  *
  *   // All properties are accepted, all pseudos are considered violations.

package/dist/es2019/index.js

@@ -10,6 +10,9 @@ const {
 } = createStrictAPI();
 export { css, cssMap, cx };
 
+// This is to mitigate local TS error TS2315: Type 'StrictXCSSProp' is not generic.
+// Currently for some reason tsc is generating malformed .d.ts in local dev environment, below change fixes it
+
 /**
  * ## StrictXCSSProp
  *
@@ -24,7 +27,7 @@ export { css, cssMap, cx };
  * the styles!
  *
  * The {@link StrictXCSSProp} type has generics two of which must be defined — use to explicitly
- * set want you to maintain as API. Use {@link XCSSAllProperties} and {@link XCSSAllPseudos}
+ * set what you want to maintain as API. Use {@link XCSSAllProperties} and {@link XCSSAllPseudos}
  * to enable all properties and pseudos.
  *
  * The third generic is used to declare what properties and pseudos should be required.
@@ -34,7 +37,7 @@ export { css, cssMap, cx };
  *   // Color is accepted, all other properties / pseudos are considered violations.
  *   xcss?: StrictXCSSProp<'color', never>;
  *
- *   // Only backgrond color and hover pseudo is accepted.
+ *   // Only background color and hover pseudo are accepted.
  *   xcss?: StrictXCSSProp<'backgroundColor', '&:hover'>;
  *
  *   // All properties are accepted, all pseudos are considered violations.

package/dist/esm/index.js

@@ -9,6 +9,9 @@ var _createStrictAPI = createStrictAPI(),
   cx = _createStrictAPI.cx;
 export { css, cssMap, cx };
 
+// This is to mitigate local TS error TS2315: Type 'StrictXCSSProp' is not generic.
+// Currently for some reason tsc is generating malformed .d.ts in local dev environment, below change fixes it
+
 /**
  * ## StrictXCSSProp
  *
@@ -23,7 +26,7 @@ export { css, cssMap, cx };
  * the styles!
  *
  * The {@link StrictXCSSProp} type has generics two of which must be defined — use to explicitly
- * set want you to maintain as API. Use {@link XCSSAllProperties} and {@link XCSSAllPseudos}
+ * set what you want to maintain as API. Use {@link XCSSAllProperties} and {@link XCSSAllPseudos}
  * to enable all properties and pseudos.
  *
  * The third generic is used to declare what properties and pseudos should be required.
@@ -33,7 +36,7 @@ export { css, cssMap, cx };
  *   // Color is accepted, all other properties / pseudos are considered violations.
  *   xcss?: StrictXCSSProp<'color', never>;
  *
- *   // Only backgrond color and hover pseudo is accepted.
+ *   // Only background color and hover pseudo are accepted.
  *   xcss?: StrictXCSSProp<'backgroundColor', '&:hover'>;
  *
  *   // All properties are accepted, all pseudos are considered violations.

package/dist/types/index.d.ts

@@ -1,9 +1,14 @@
 import { type CSSPseudos, type StrictCSSProperties, type XCSSAllProperties, type XCSSAllPseudos } from '@compiled/react';
 import { type DesignTokenStyles } from '@atlaskit/tokens/css-type-schema';
+type MediaQuery = '(min-width: 30rem)' | '(min-width: 48rem)' | '(min-width: 64rem)' | '(min-width: 90rem)' | '(min-width: 110rem)';
 declare const XCSSProp: <TAllowedProperties extends "flex" | "grid" | "fill" | "stroke" | "all" | "bottom" | "left" | "right" | "top" | "clip" | "accentColor" | "alignContent" | "alignItems" | "alignSelf" | "alignTracks" | "animationComposition" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationTimeline" | "animationTimingFunction" | "appearance" | "aspectRatio" | "backdropFilter" | "backfaceVisibility" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "blockOverflow" | "blockSize" | "borderBlockColor" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBlockStyle" | "borderBlockWidth" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInlineColor" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderInlineStyle" | "borderInlineWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStartEndRadius" | "borderStartStartRadius" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxDecorationBreak" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caretColor" | "caretShape" | "clear" | "clipPath" | "color" | "colorAdjust" | "colorScheme" | "columnCount" | "columnFill" | "columnGap" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "contain" | "containIntrinsicBlockSize" | "containIntrinsicHeight" | "containIntrinsicInlineSize" | "containIntrinsicWidth" | "containerName" | "containerType" | "content" | "contentVisibility" | "counterIncrement" | "counterReset" | "counterSet" | "cursor" | "direction" | "display" | "emptyCells" | "filter" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "float" | "fontFamily" | "fontFeatureSettings" | "fontKerning" | "fontLanguageOverride" | "fontOpticalSizing" | "fontPalette" | "fontSize" | "fontSizeAdjust" | "fontSmooth" | "fontStretch" | "fontStyle" | "fontSynthesis" | "fontVariant" | "fontVariantAlternates" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantEmoji" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontVariationSettings" | "fontWeight" | "forcedColorAdjust" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "hangingPunctuation" | "height" | "hyphenateCharacter" | "hyphenateLimitChars" | "hyphens" | "imageOrientation" | "imageRendering" | "imageResolution" | "initialLetter" | "inlineSize" | "inputSecurity" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetInlineStart" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "justifyTracks" | "letterSpacing" | "lineBreak" | "lineHeight" | "lineHeightStep" | "listStyleImage" | "listStylePosition" | "listStyleType" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "marginTrim" | "maskBorderMode" | "maskBorderOutset" | "maskBorderRepeat" | "maskBorderSlice" | "maskBorderSource" | "maskBorderWidth" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "mathDepth" | "mathShift" | "mathStyle" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxLines" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "motionDistance" | "motionPath" | "motionRotation" | "objectFit" | "objectPosition" | "offsetAnchor" | "offsetDistance" | "offsetPath" | "offsetPosition" | "offsetRotate" | "offsetRotation" | "opacity" | "order" | "orphans" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflowAnchor" | "overflowBlock" | "overflowClipBox" | "overflowClipMargin" | "overflowInline" | "overflowWrap" | "overflowX" | "overflowY" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "page" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "paintOrder" | "perspective" | "perspectiveOrigin" | "pointerEvents" | "position" | "printColorAdjust" | "quotes" | "resize" | "rotate" | "rowGap" | "rubyAlign" | "rubyMerge" | "rubyPosition" | "scale" | "scrollBehavior" | "scrollMarginBlockEnd" | "scrollMarginBlockStart" | "scrollMarginBottom" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollPaddingBlockEnd" | "scrollPaddingBlockStart" | "scrollPaddingBottom" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapMarginBottom" | "scrollSnapMarginLeft" | "scrollSnapMarginRight" | "scrollSnapMarginTop" | "scrollSnapStop" | "scrollSnapType" | "scrollTimelineAxis" | "scrollTimelineName" | "scrollbarColor" | "scrollbarGutter" | "scrollbarWidth" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "tabSize" | "tableLayout" | "textAlign" | "textAlignLast" | "textCombineUpright" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkip" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textJustify" | "textOrientation" | "textOverflow" | "textRendering" | "textShadow" | "textSizeAdjust" | "textTransform" | "textUnderlineOffset" | "textUnderlinePosition" | "touchAction" | "transform" | "transformBox" | "transformOrigin" | "transformStyle" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "translate" | "unicodeBidi" | "userSelect" | "verticalAlign" | "viewTransitionName" | "visibility" | "whiteSpace" | "widows" | "width" | "willChange" | "wordBreak" | "wordSpacing" | "wordWrap" | "writingMode" | "zIndex" | "zoom" | "animation" | "background" | "backgroundPosition" | "border" | "borderBlock" | "borderBlockEnd" | "borderBlockStart" | "borderBottom" | "borderColor" | "borderImage" | "borderInline" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "caret" | "columnRule" | "columns" | "containIntrinsicSize" | "container" | "flexFlow" | "font" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "gridTemplate" | "inset" | "insetBlock" | "insetInline" | "lineClamp" | "listStyle" | "margin" | "marginBlock" | "marginInline" | "mask" | "maskBorder" | "motion" | "offset" | "outline" | "overflow" | "overscrollBehavior" | "padding" | "paddingBlock" | "paddingInline" | "placeContent" | "placeItems" | "placeSelf" | "scrollMargin" | "scrollMarginBlock" | "scrollMarginInline" | "scrollPadding" | "scrollPaddingBlock" | "scrollPaddingInline" | "scrollSnapMargin" | "scrollTimeline" | "textDecoration" | "textEmphasis" | "transition" | "alignmentBaseline" | "baselineShift" | "clipRule" | "colorInterpolation" | "colorRendering" | "dominantBaseline" | "fillOpacity" | "fillRule" | "floodColor" | "floodOpacity" | "glyphOrientationVertical" | "lightingColor" | "marker" | "markerEnd" | "markerMid" | "markerStart" | "shapeRendering" | "stopColor" | "stopOpacity" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "textAnchor" | "vectorEffect", TAllowedPseudos extends CSSPseudos, TRequiredProperties extends {
     requiredProperties: TAllowedProperties;
-} = never>() => import("@compiled/react/dist/esm/xcss-prop").Internal$XCSSProp<TAllowedProperties, TAllowedPseudos, never, DesignTokenStyles, TRequiredProperties, "strict">, css: <TStyles extends import("@compiled/react/dist/esm/create-strict-api/types").ApplySchema<TStyles, DesignTokenStyles, "">>(styles: Readonly<import("csstype").StandardProperties<0 | (string & {}), string & {}> & import("csstype").SvgProperties<0 | (string & {}), string & {}>> & import("@compiled/react/dist/esm/create-strict-api/types").PseudosDeclarations & import("@compiled/react/dist/esm/create-strict-api/types").MediaQueries<never> & TStyles) => Readonly<import("csstype").Properties<import("@compiled/react").CssFunction<unknown>, string & {}>>, cssMap: <TObject extends Record<string, import("@compiled/react/dist/esm/create-strict-api/types").AllowedStyles<never>>, TStylesMap extends import("@compiled/react/dist/esm/create-strict-api/types").ApplySchemaMap<TObject, DesignTokenStyles>>(styles: Record<string, import("@compiled/react/dist/esm/create-strict-api/types").AllowedStyles<never>> & TStylesMap) => { readonly [P in keyof TStylesMap]: import("@compiled/react/dist/esm/xcss-prop").CompiledStyles<TStylesMap[P]>; }, cx: <TStyles extends import("@compiled/react").XCSSProp<any, any, never>[]>(...styles: TStyles) => TStyles[number];
+} = never>() => import("@compiled/react").Internal$XCSSProp<TAllowedProperties, TAllowedPseudos, MediaQuery, DesignTokenStyles, TRequiredProperties, "strict">, css: <TStyles extends import("@compiled/react").ApplySchema<TStyles, DesignTokenStyles, "">>(styles: Readonly<import("csstype").StandardProperties<0 | (string & {}), string & {}> & import("csstype").SvgProperties<0 | (string & {}), string & {}>> & import("@compiled/react").PseudosDeclarations & import("@compiled/react").MediaQueries<MediaQuery> & TStyles) => Readonly<import("csstype").Properties<import("@compiled/react").CssFunction<unknown>, string & {}>>, cssMap: <TObject extends Record<string, import("@compiled/react").AllowedStyles<MediaQuery>>, TStylesMap extends import("@compiled/react").ApplySchemaMap<TObject, DesignTokenStyles>>(styles: Record<string, import("@compiled/react").AllowedStyles<MediaQuery>> & TStylesMap) => { readonly [P in keyof TStylesMap]: import("@compiled/react").CompiledStyles<TStylesMap[P]>; }, cx: <TStyles extends import("@compiled/react").XCSSProp<any, any, never>[]>(...styles: TStyles) => TStyles[number];
 export { css, cssMap, cx, XCSSAllProperties, XCSSAllPseudos };
+type LocalXCSSProp<TAllowedProperties extends keyof StrictCSSProperties, TAllowedPseudos extends CSSPseudos, TRequiredProperties extends {
+    requiredProperties: TAllowedProperties;
+    requiredPseudos: TAllowedPseudos;
+} = never> = ReturnType<typeof XCSSProp<TAllowedProperties, TAllowedPseudos, TRequiredProperties>>;
 /**
  * ## StrictXCSSProp
  *
@@ -18,7 +23,7 @@ export { css, cssMap, cx, XCSSAllProperties, XCSSAllPseudos };
  * the styles!
  *
  * The {@link StrictXCSSProp} type has generics two of which must be defined — use to explicitly
- * set want you to maintain as API. Use {@link XCSSAllProperties} and {@link XCSSAllPseudos}
+ * set what you want to maintain as API. Use {@link XCSSAllProperties} and {@link XCSSAllPseudos}
  * to enable all properties and pseudos.
  *
  * The third generic is used to declare what properties and pseudos should be required.
@@ -28,7 +33,7 @@ export { css, cssMap, cx, XCSSAllProperties, XCSSAllPseudos };
  *   // Color is accepted, all other properties / pseudos are considered violations.
  *   xcss?: StrictXCSSProp<'color', never>;
  *
- *   // Only backgrond color and hover pseudo is accepted.
+ *   // Only background color and hover pseudo are accepted.
  *   xcss?: StrictXCSSProp<'backgroundColor', '&:hover'>;
  *
  *   // All properties are accepted, all pseudos are considered violations.
@@ -66,4 +71,4 @@ export { css, cssMap, cx, XCSSAllProperties, XCSSAllPseudos };
 export type StrictXCSSProp<TAllowedProperties extends keyof StrictCSSProperties, TAllowedPseudos extends CSSPseudos, TRequiredProperties extends {
     requiredProperties: TAllowedProperties;
     requiredPseudos: TAllowedPseudos;
-} = never> = ReturnType<typeof XCSSProp<TAllowedProperties, TAllowedPseudos, TRequiredProperties>>;
+} = never> = LocalXCSSProp<TAllowedProperties, TAllowedPseudos, TRequiredProperties>;

package/dist/types-ts4.5/index.d.ts

@@ -1,11 +1,16 @@
 import { type CSSPseudos, type StrictCSSProperties, type XCSSAllProperties, type XCSSAllPseudos } from '@compiled/react';
 import { type DesignTokenStyles } from '@atlaskit/tokens/css-type-schema';
+type MediaQuery = '(min-width: 30rem)' | '(min-width: 48rem)' | '(min-width: 64rem)' | '(min-width: 90rem)' | '(min-width: 110rem)';
 declare const XCSSProp: <TAllowedProperties extends "flex" | "grid" | "fill" | "stroke" | "all" | "bottom" | "left" | "right" | "top" | "clip" | "accentColor" | "alignContent" | "alignItems" | "alignSelf" | "alignTracks" | "animationComposition" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationTimeline" | "animationTimingFunction" | "appearance" | "aspectRatio" | "backdropFilter" | "backfaceVisibility" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "blockOverflow" | "blockSize" | "borderBlockColor" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBlockStyle" | "borderBlockWidth" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInlineColor" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderInlineStyle" | "borderInlineWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStartEndRadius" | "borderStartStartRadius" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxDecorationBreak" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caretColor" | "caretShape" | "clear" | "clipPath" | "color" | "colorAdjust" | "colorScheme" | "columnCount" | "columnFill" | "columnGap" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "contain" | "containIntrinsicBlockSize" | "containIntrinsicHeight" | "containIntrinsicInlineSize" | "containIntrinsicWidth" | "containerName" | "containerType" | "content" | "contentVisibility" | "counterIncrement" | "counterReset" | "counterSet" | "cursor" | "direction" | "display" | "emptyCells" | "filter" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "float" | "fontFamily" | "fontFeatureSettings" | "fontKerning" | "fontLanguageOverride" | "fontOpticalSizing" | "fontPalette" | "fontSize" | "fontSizeAdjust" | "fontSmooth" | "fontStretch" | "fontStyle" | "fontSynthesis" | "fontVariant" | "fontVariantAlternates" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantEmoji" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontVariationSettings" | "fontWeight" | "forcedColorAdjust" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "hangingPunctuation" | "height" | "hyphenateCharacter" | "hyphenateLimitChars" | "hyphens" | "imageOrientation" | "imageRendering" | "imageResolution" | "initialLetter" | "inlineSize" | "inputSecurity" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetInlineStart" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "justifyTracks" | "letterSpacing" | "lineBreak" | "lineHeight" | "lineHeightStep" | "listStyleImage" | "listStylePosition" | "listStyleType" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "marginTrim" | "maskBorderMode" | "maskBorderOutset" | "maskBorderRepeat" | "maskBorderSlice" | "maskBorderSource" | "maskBorderWidth" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "mathDepth" | "mathShift" | "mathStyle" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxLines" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "motionDistance" | "motionPath" | "motionRotation" | "objectFit" | "objectPosition" | "offsetAnchor" | "offsetDistance" | "offsetPath" | "offsetPosition" | "offsetRotate" | "offsetRotation" | "opacity" | "order" | "orphans" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflowAnchor" | "overflowBlock" | "overflowClipBox" | "overflowClipMargin" | "overflowInline" | "overflowWrap" | "overflowX" | "overflowY" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "page" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "paintOrder" | "perspective" | "perspectiveOrigin" | "pointerEvents" | "position" | "printColorAdjust" | "quotes" | "resize" | "rotate" | "rowGap" | "rubyAlign" | "rubyMerge" | "rubyPosition" | "scale" | "scrollBehavior" | "scrollMarginBlockEnd" | "scrollMarginBlockStart" | "scrollMarginBottom" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollPaddingBlockEnd" | "scrollPaddingBlockStart" | "scrollPaddingBottom" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapMarginBottom" | "scrollSnapMarginLeft" | "scrollSnapMarginRight" | "scrollSnapMarginTop" | "scrollSnapStop" | "scrollSnapType" | "scrollTimelineAxis" | "scrollTimelineName" | "scrollbarColor" | "scrollbarGutter" | "scrollbarWidth" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "tabSize" | "tableLayout" | "textAlign" | "textAlignLast" | "textCombineUpright" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkip" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textJustify" | "textOrientation" | "textOverflow" | "textRendering" | "textShadow" | "textSizeAdjust" | "textTransform" | "textUnderlineOffset" | "textUnderlinePosition" | "touchAction" | "transform" | "transformBox" | "transformOrigin" | "transformStyle" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "translate" | "unicodeBidi" | "userSelect" | "verticalAlign" | "viewTransitionName" | "visibility" | "whiteSpace" | "widows" | "width" | "willChange" | "wordBreak" | "wordSpacing" | "wordWrap" | "writingMode" | "zIndex" | "zoom" | "animation" | "background" | "backgroundPosition" | "border" | "borderBlock" | "borderBlockEnd" | "borderBlockStart" | "borderBottom" | "borderColor" | "borderImage" | "borderInline" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "caret" | "columnRule" | "columns" | "containIntrinsicSize" | "container" | "flexFlow" | "font" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "gridTemplate" | "inset" | "insetBlock" | "insetInline" | "lineClamp" | "listStyle" | "margin" | "marginBlock" | "marginInline" | "mask" | "maskBorder" | "motion" | "offset" | "outline" | "overflow" | "overscrollBehavior" | "padding" | "paddingBlock" | "paddingInline" | "placeContent" | "placeItems" | "placeSelf" | "scrollMargin" | "scrollMarginBlock" | "scrollMarginInline" | "scrollPadding" | "scrollPaddingBlock" | "scrollPaddingInline" | "scrollSnapMargin" | "scrollTimeline" | "textDecoration" | "textEmphasis" | "transition" | "alignmentBaseline" | "baselineShift" | "clipRule" | "colorInterpolation" | "colorRendering" | "dominantBaseline" | "fillOpacity" | "fillRule" | "floodColor" | "floodOpacity" | "glyphOrientationVertical" | "lightingColor" | "marker" | "markerEnd" | "markerMid" | "markerStart" | "shapeRendering" | "stopColor" | "stopOpacity" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "textAnchor" | "vectorEffect", TAllowedPseudos extends CSSPseudos, TRequiredProperties extends {
     requiredProperties: TAllowedProperties;
-} = never>() => import("@compiled/react/dist/esm/xcss-prop").Internal$XCSSProp<TAllowedProperties, TAllowedPseudos, never, DesignTokenStyles, TRequiredProperties, "strict">, css: <TStyles extends import("@compiled/react/dist/esm/create-strict-api/types").ApplySchema<TStyles, DesignTokenStyles, "">>(styles: Readonly<import("csstype").StandardProperties<0 | (string & {}), string & {}> & import("csstype").SvgProperties<0 | (string & {}), string & {}>> & import("@compiled/react/dist/esm/create-strict-api/types").PseudosDeclarations & import("@compiled/react/dist/esm/create-strict-api/types").MediaQueries<never> & TStyles) => Readonly<import("csstype").Properties<import("@compiled/react").CssFunction<unknown>, string & {}>>, cssMap: <TObject extends Record<string, import("@compiled/react/dist/esm/create-strict-api/types").AllowedStyles<never>>, TStylesMap extends import("@compiled/react/dist/esm/create-strict-api/types").ApplySchemaMap<TObject, DesignTokenStyles>>(styles: Record<string, import("@compiled/react/dist/esm/create-strict-api/types").AllowedStyles<never>> & TStylesMap) => {
-    readonly [P in keyof TStylesMap]: import("@compiled/react/dist/esm/xcss-prop").CompiledStyles<TStylesMap[P]>;
+} = never>() => import("@compiled/react").Internal$XCSSProp<TAllowedProperties, TAllowedPseudos, MediaQuery, DesignTokenStyles, TRequiredProperties, "strict">, css: <TStyles extends import("@compiled/react").ApplySchema<TStyles, DesignTokenStyles, "">>(styles: Readonly<import("csstype").StandardProperties<0 | (string & {}), string & {}> & import("csstype").SvgProperties<0 | (string & {}), string & {}>> & import("@compiled/react").PseudosDeclarations & import("@compiled/react").MediaQueries<MediaQuery> & TStyles) => Readonly<import("csstype").Properties<import("@compiled/react").CssFunction<unknown>, string & {}>>, cssMap: <TObject extends Record<string, import("@compiled/react").AllowedStyles<MediaQuery>>, TStylesMap extends import("@compiled/react").ApplySchemaMap<TObject, DesignTokenStyles>>(styles: Record<string, import("@compiled/react").AllowedStyles<MediaQuery>> & TStylesMap) => {
+    readonly [P in keyof TStylesMap]: import("@compiled/react").CompiledStyles<TStylesMap[P]>;
 }, cx: <TStyles extends import("@compiled/react").XCSSProp<any, any, never>[]>(...styles: TStyles) => TStyles[number];
 export { css, cssMap, cx, XCSSAllProperties, XCSSAllPseudos };
+type LocalXCSSProp<TAllowedProperties extends keyof StrictCSSProperties, TAllowedPseudos extends CSSPseudos, TRequiredProperties extends {
+    requiredProperties: TAllowedProperties;
+    requiredPseudos: TAllowedPseudos;
+} = never> = ReturnType<typeof XCSSProp<TAllowedProperties, TAllowedPseudos, TRequiredProperties>>;
 /**
  * ## StrictXCSSProp
  *
@@ -20,7 +25,7 @@ export { css, cssMap, cx, XCSSAllProperties, XCSSAllPseudos };
  * the styles!
  *
  * The {@link StrictXCSSProp} type has generics two of which must be defined — use to explicitly
- * set want you to maintain as API. Use {@link XCSSAllProperties} and {@link XCSSAllPseudos}
+ * set what you want to maintain as API. Use {@link XCSSAllProperties} and {@link XCSSAllPseudos}
  * to enable all properties and pseudos.
  *
  * The third generic is used to declare what properties and pseudos should be required.
@@ -30,7 +35,7 @@ export { css, cssMap, cx, XCSSAllProperties, XCSSAllPseudos };
  *   // Color is accepted, all other properties / pseudos are considered violations.
  *   xcss?: StrictXCSSProp<'color', never>;
  *
- *   // Only backgrond color and hover pseudo is accepted.
+ *   // Only background color and hover pseudo are accepted.
  *   xcss?: StrictXCSSProp<'backgroundColor', '&:hover'>;
  *
  *   // All properties are accepted, all pseudos are considered violations.
@@ -68,4 +73,4 @@ export { css, cssMap, cx, XCSSAllProperties, XCSSAllPseudos };
 export type StrictXCSSProp<TAllowedProperties extends keyof StrictCSSProperties, TAllowedPseudos extends CSSPseudos, TRequiredProperties extends {
     requiredProperties: TAllowedProperties;
     requiredPseudos: TAllowedPseudos;
-} = never> = ReturnType<typeof XCSSProp<TAllowedProperties, TAllowedPseudos, TRequiredProperties>>;
+} = never> = LocalXCSSProp<TAllowedProperties, TAllowedPseudos, TRequiredProperties>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/css",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "Style components backed by Atlassian Design System design tokens powered by Compiled CSS-in-JS.",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -35,7 +35,7 @@
     ".": "./src/index.ts"
   },
   "dependencies": {
-    "@atlaskit/tokens": "^1.41.0",
+    "@atlaskit/tokens": "^1.43.0",
     "@babel/runtime": "^7.0.0",
     "@compiled/react": "^0.17.0"
   },
@@ -50,7 +50,7 @@
     "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
     "@testing-library/react": "^12.1.5",
     "react-dom": "^16.8.0",
-    "typescript": "~4.9.5",
+    "typescript": "~5.4.2",
     "wait-for-expect": "^1.2.0"
   },
   "techstack": {