mdlz-prmtz - npm Package Compare versions

Comparing version 0.0.39 to 0.0.40-0

dist/components/Arrow.d.ts

 import React from 'react';
-export declare type ArrowProps = React.ComponentPropsWithRef<'svg'> & {
-    width?: number;
-    height?: number;
-    fill?: string;
+import { FillProps } from '@modulz/radix-system';
+import { StyleConfig } from '../utils/styleConfig';
+export declare type ArrowParts = {
+    arrow: '';
 };
-export declare const Arrow: React.ForwardRefExoticComponent<Pick<ArrowProps, "string" | "fill" | "style" | "clipPath" | "filter" | "mask" | "className" | "color" | "height" | "id" | "lang" | "max" | "media" | "method" | "min" | "name" | "target" | "type" | "width" | "role" | "tabIndex" | "accentHeight" | "accumulate" | "additive" | "alignmentBaseline" | "allowReorder" | "alphabetic" | "amplitude" | "arabicForm" | "ascent" | "attributeName" | "attributeType" | "autoReverse" | "azimuth" | "baseFrequency" | "baselineShift" | "baseProfile" | "bbox" | "begin" | "bias" | "by" | "calcMode" | "capHeight" | "clip" | "clipPathUnits" | "clipRule" | "colorInterpolation" | "colorInterpolationFilters" | "colorProfile" | "colorRendering" | "contentScriptType" | "contentStyleType" | "cursor" | "cx" | "cy" | "d" | "decelerate" | "descent" | "diffuseConstant" | "direction" | "display" | "divisor" | "dominantBaseline" | "dur" | "dx" | "dy" | "edgeMode" | "elevation" | "enableBackground" | "end" | "exponent" | "externalResourcesRequired" | "fillOpacity" | "fillRule" | "filterRes" | "filterUnits" | "floodColor" | "floodOpacity" | "focusable" | "fontFamily" | "fontSize" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontVariant" | "fontWeight" | "format" | "from" | "fx" | "fy" | "g1" | "g2" | "glyphName" | "glyphOrientationHorizontal" | "glyphOrientationVertical" | "glyphRef" | "gradientTransform" | "gradientUnits" | "hanging" | "horizAdvX" | "horizOriginX" | "href" | "ideographic" | "imageRendering" | "in2" | "in" | "intercept" | "k1" | "k2" | "k3" | "k4" | "k" | "kernelMatrix" | "kernelUnitLength" | "kerning" | "keyPoints" | "keySplines" | "keyTimes" | "lengthAdjust" | "letterSpacing" | "lightingColor" | "limitingConeAngle" | "local" | "markerEnd" | "markerHeight" | "markerMid" | "markerStart" | "markerUnits" | "markerWidth" | "maskContentUnits" | "maskUnits" | "mathematical" | "mode" | "numOctaves" | "offset" | "opacity" | "operator" | "order" | "orient" | "orientation" | "origin" | "overflow" | "overlinePosition" | "overlineThickness" | "paintOrder" | "panose1" | "pathLength" | "patternContentUnits" | "patternTransform" | "patternUnits" | "pointerEvents" | "points" | "pointsAtX" | "pointsAtY" | "pointsAtZ" | "preserveAlpha" | "preserveAspectRatio" | "primitiveUnits" | "r" | "radius" | "refX" | "refY" | "renderingIntent" | "repeatCount" | "repeatDur" | "requiredExtensions" | "requiredFeatures" | "restart" | "result" | "rotate" | "rx" | "ry" | "scale" | "seed" | "shapeRendering" | "slope" | "spacing" | "specularConstant" | "specularExponent" | "speed" | "spreadMethod" | "startOffset" | "stdDeviation" | "stemh" | "stemv" | "stitchTiles" | "stopColor" | "stopOpacity" | "strikethroughPosition" | "strikethroughThickness" | "stroke" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "surfaceScale" | "systemLanguage" | "tableValues" | "targetX" | "targetY" | "textAnchor" | "textDecoration" | "textLength" | "textRendering" | "to" | "transform" | "u1" | "u2" | "underlinePosition" | "underlineThickness" | "unicode" | "unicodeBidi" | "unicodeRange" | "unitsPerEm" | "vAlphabetic" | "values" | "vectorEffect" | "version" | "vertAdvY" | "vertOriginX" | "vertOriginY" | "vHanging" | "vIdeographic" | "viewBox" | "viewTarget" | "visibility" | "vMathematical" | "widths" | "wordSpacing" | "writingMode" | "x1" | "x2" | "x" | "xChannelSelector" | "xHeight" | "xlinkActuate" | "xlinkArcrole" | "xlinkHref" | "xlinkRole" | "xlinkShow" | "xlinkTitle" | "xlinkType" | "xmlBase" | "xmlLang" | "xmlns" | "xmlnsXlink" | "xmlSpace" | "y1" | "y2" | "y" | "yChannelSelector" | "z" | "zoomAndPan" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key"> & React.RefAttributes<SVGSVGElement>>;
+declare type ArrowDOMProps = React.ComponentPropsWithRef<'svg'>;
+declare type ArrowStyleConfigProp = {
+    styleConfig?: StyleConfig<ArrowParts>;
+};
+declare type ArrowSystemProps = FillProps;
+export declare type ArrowProps = ArrowDOMProps & ArrowStyleConfigProp & ArrowSystemProps;
+export declare const Arrow: React.ForwardRefExoticComponent<Pick<ArrowProps, "string" | "style" | "clipPath" | "filter" | "mask" | "className" | "color" | "height" | "id" | "lang" | "max" | "media" | "method" | "min" | "name" | "target" | "type" | "width" | "role" | "tabIndex" | "crossOrigin" | "accentHeight" | "accumulate" | "additive" | "alignmentBaseline" | "allowReorder" | "alphabetic" | "amplitude" | "arabicForm" | "ascent" | "attributeName" | "attributeType" | "autoReverse" | "azimuth" | "baseFrequency" | "baselineShift" | "baseProfile" | "bbox" | "begin" | "bias" | "by" | "calcMode" | "capHeight" | "clip" | "clipPathUnits" | "clipRule" | "colorInterpolation" | "colorInterpolationFilters" | "colorProfile" | "colorRendering" | "contentScriptType" | "contentStyleType" | "cursor" | "cx" | "cy" | "d" | "decelerate" | "descent" | "diffuseConstant" | "direction" | "display" | "divisor" | "dominantBaseline" | "dur" | "dx" | "dy" | "edgeMode" | "elevation" | "enableBackground" | "end" | "exponent" | "externalResourcesRequired" | "fill" | "fillOpacity" | "fillRule" | "filterRes" | "filterUnits" | "floodColor" | "floodOpacity" | "focusable" | "fontFamily" | "fontSize" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontVariant" | "fontWeight" | "format" | "from" | "fx" | "fy" | "g1" | "g2" | "glyphName" | "glyphOrientationHorizontal" | "glyphOrientationVertical" | "glyphRef" | "gradientTransform" | "gradientUnits" | "hanging" | "horizAdvX" | "horizOriginX" | "href" | "ideographic" | "imageRendering" | "in2" | "in" | "intercept" | "k1" | "k2" | "k3" | "k4" | "k" | "kernelMatrix" | "kernelUnitLength" | "kerning" | "keyPoints" | "keySplines" | "keyTimes" | "lengthAdjust" | "letterSpacing" | "lightingColor" | "limitingConeAngle" | "local" | "markerEnd" | "markerHeight" | "markerMid" | "markerStart" | "markerUnits" | "markerWidth" | "maskContentUnits" | "maskUnits" | "mathematical" | "mode" | "numOctaves" | "offset" | "opacity" | "operator" | "order" | "orient" | "orientation" | "origin" | "overflow" | "overlinePosition" | "overlineThickness" | "paintOrder" | "panose1" | "pathLength" | "patternContentUnits" | "patternTransform" | "patternUnits" | "pointerEvents" | "points" | "pointsAtX" | "pointsAtY" | "pointsAtZ" | "preserveAlpha" | "preserveAspectRatio" | "primitiveUnits" | "r" | "radius" | "refX" | "refY" | "renderingIntent" | "repeatCount" | "repeatDur" | "requiredExtensions" | "requiredFeatures" | "restart" | "result" | "rotate" | "rx" | "ry" | "scale" | "seed" | "shapeRendering" | "slope" | "spacing" | "specularConstant" | "specularExponent" | "speed" | "spreadMethod" | "startOffset" | "stdDeviation" | "stemh" | "stemv" | "stitchTiles" | "stopColor" | "stopOpacity" | "strikethroughPosition" | "strikethroughThickness" | "stroke" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "surfaceScale" | "systemLanguage" | "tableValues" | "targetX" | "targetY" | "textAnchor" | "textDecoration" | "textLength" | "textRendering" | "to" | "transform" | "u1" | "u2" | "underlinePosition" | "underlineThickness" | "unicode" | "unicodeBidi" | "unicodeRange" | "unitsPerEm" | "vAlphabetic" | "values" | "vectorEffect" | "version" | "vertAdvY" | "vertOriginX" | "vertOriginY" | "vHanging" | "vIdeographic" | "viewBox" | "viewTarget" | "visibility" | "vMathematical" | "widths" | "wordSpacing" | "writingMode" | "x1" | "x2" | "x" | "xChannelSelector" | "xHeight" | "xlinkActuate" | "xlinkArcrole" | "xlinkHref" | "xlinkRole" | "xlinkShow" | "xlinkTitle" | "xlinkType" | "xmlBase" | "xmlLang" | "xmlns" | "xmlnsXlink" | "xmlSpace" | "y1" | "y2" | "y" | "yChannelSelector" | "z" | "zoomAndPan" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "styleConfig"> & React.RefAttributes<SVGSVGElement>>;
+export {};

dist/components/AspectRatio.d.ts

@@ -1,7 +0,9 @@
-import React, { FC } from 'react';
+import React from 'react';
 import { BackgroundColorProps, MarginProps } from '@modulz/radix-system';
-export declare type AspectRatioProps = React.ComponentPropsWithRef<'div'> & BackgroundColorProps & MarginProps & {
+declare type AspectRatioDOMProps = React.ComponentPropsWithRef<'div'>;
+declare type AspectRatioSystemProps = BackgroundColorProps & MarginProps;
+export declare type AspectRatioProps = AspectRatioDOMProps & AspectRatioSystemProps & {
     ratio?: '1:1' | '1:2' | '2:1' | '16:9' | '4:3';
-    css?: any;
 };
-export declare const AspectRatio: FC<AspectRatioProps>;
+export declare const AspectRatio: React.ForwardRefExoticComponent<Pick<AspectRatioProps, "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "ratio" | "backgroundColor" | "bg" | "m" | "margin" | "mt" | "marginTop" | "mr" | "marginRight" | "mb" | "marginBottom" | "ml" | "marginLeft" | "mx" | "marginX" | "my" | "marginY"> & React.RefAttributes<HTMLDivElement>>;
+export {};

dist/components/Badge.d.ts

 /// <reference types="react" />
 import { MarginProps } from '@modulz/radix-system';
-export declare type BadgeProps = React.ComponentPropsWithRef<'span'> & MarginProps & {
-    css?: any;
+import { StyleConfig } from '../utils/styleConfig';
+export declare type BadgeParts = {
+    badge: '';
 };
+declare type BadgeDOMProps = React.ComponentPropsWithRef<'span'>;
+declare type BadgeStyleConfigProp = {
+    styleConfig?: StyleConfig<BadgeParts>;
+};
+declare type BadgeSystemProps = MarginProps;
+export declare type BadgeProps = BadgeDOMProps & BadgeStyleConfigProp & BadgeSystemProps;
 export declare const Badge: import("styled-components").StyledComponent<"span", any, BadgeProps, never>;
+export {};

dist/components/Box.d.ts

 /// <reference types="react" />
 import { BorderProps, BorderRadiusProps, BoxShadowProps, BackgroundColorProps, DisplayProps, OpacityProps, HeightProps, JustifySelfProps, MarginProps, MaxWidthProps, MaxHeightProps, MinHeightProps, MinWidthProps, OverflowProps, PaddingProps, PositionSetProps, TextAlignProps, TextColorProps, WidthProps, FlexItemSetProps } from '@modulz/radix-system';
-export declare type BoxProps = BorderProps & BorderRadiusProps & BoxShadowProps & BackgroundColorProps & TextColorProps & DisplayProps & HeightProps & JustifySelfProps & MarginProps & MaxWidthProps & MaxHeightProps & MinHeightProps & MinWidthProps & OpacityProps & OverflowProps & PaddingProps & TextAlignProps & WidthProps & PositionSetProps & FlexItemSetProps & React.ComponentPropsWithRef<'div'> & {
-    css?: any;
-};
+declare type BoxDOMProps = React.ComponentPropsWithRef<'div'>;
+declare type BoxSystemProps = BorderProps & BorderRadiusProps & BoxShadowProps & BackgroundColorProps & TextColorProps & DisplayProps & HeightProps & JustifySelfProps & MarginProps & MaxWidthProps & MaxHeightProps & MinHeightProps & MinWidthProps & OpacityProps & OverflowProps & PaddingProps & TextAlignProps & WidthProps & PositionSetProps & FlexItemSetProps;
+export declare type BoxProps = BoxDOMProps & BoxSystemProps;
 export declare const Box: import("styled-components").StyledComponent<"div", any, BoxProps, never>;
+export {};

dist/components/Button.d.ts

 /// <reference types="react" />
 import { MarginProps } from '@modulz/radix-system';
-export declare type ButtonProps = React.ComponentPropsWithRef<'button'> & MarginProps & {
-    css?: any;
+import { StyleConfig } from '../utils/styleConfig';
+export declare type ButtonParts = {
+    button: 'hover' | 'focus' | 'active' | 'disabled';
 };
+declare type ButtonDOMProps = React.ComponentPropsWithRef<'button'>;
+declare type ButtonStyleConfigProp = {
+    styleConfig?: StyleConfig<ButtonParts>;
+};
+declare type ButtonSystemProps = MarginProps;
+export declare type ButtonProps = ButtonDOMProps & ButtonStyleConfigProp & ButtonSystemProps;
 export declare const Button: import("styled-components").StyledComponent<"button", any, ButtonProps, never>;
+export {};

dist/components/Card.d.ts

 /// <reference types="react" />
-import { CSSObject } from 'styled-components';
 import { TextColorProps, BackgroundColorProps, BorderProps, BoxShadowProps, MarginProps, PaddingProps, WidthProps, MaxWidthProps } from '@modulz/radix-system';
-export declare type CardSharedProps = TextColorProps & BackgroundColorProps & BorderProps & BoxShadowProps & MarginProps & PaddingProps & WidthProps & MaxWidthProps & {
-    css?: any;
+import { StyleConfig } from '../utils/styleConfig';
+export declare type CardParts = {
+    card: '';
 };
-export declare type CardProps = React.ComponentPropsWithRef<'div'> & CardSharedProps;
-export declare const styleProps: import("@styled-system/core").styleFn;
-export declare const cardStyle: CSSObject;
+declare type CardDOMProps = React.ComponentPropsWithRef<'div'>;
+declare type CardStyleConfigProp = {
+    styleConfig?: StyleConfig<CardParts>;
+};
+export declare type CardSystemProps = TextColorProps & BackgroundColorProps & BorderProps & BoxShadowProps & MarginProps & PaddingProps & WidthProps & MaxWidthProps;
+export declare type CardProps = CardDOMProps & CardStyleConfigProp & CardSystemProps;
+export declare const systemProps: import("@styled-system/core").styleFn;
 export declare const Card: import("styled-components").StyledComponent<"div", any, CardProps, never>;
+export {};

dist/components/CardLink.d.ts

 /// <reference types="react" />
-import { CardSharedProps } from './Card';
-export declare type CardLinkProps = React.ComponentPropsWithRef<'a'> & CardSharedProps & {
-    to?: string;
+import { CardSystemProps } from './Card';
+import { StyleConfig } from '../utils/styleConfig';
+export declare type CardLinkParts = {
+    card: 'hover' | 'focus' | 'active';
 };
+declare type CardLinkDOMProps = React.ComponentPropsWithRef<'a'>;
+declare type CardLinkStyleConfigProp = {
+    styleConfig?: StyleConfig<CardLinkParts>;
+};
+declare type CardLinkSystemProps = CardSystemProps;
+export declare type CardLinkProps = CardLinkDOMProps & CardLinkStyleConfigProp & CardLinkSystemProps;
 export declare const CardLink: import("styled-components").StyledComponent<"a", any, CardLinkProps, never>;
+export {};

dist/components/Code.d.ts

 /// <reference types="react" />
 import { MarginProps } from '@modulz/radix-system';
-export declare type CodeProps = React.ComponentPropsWithRef<'code'> & MarginProps & {
-    css?: any;
+import { StyleConfig } from '../utils/styleConfig';
+export declare type CodeParts = {
+    code: '';
 };
+declare type CodeDOMProps = React.ComponentPropsWithRef<'code'>;
+declare type CodeStyleConfigProp = {
+    styleConfig?: StyleConfig<CodeParts>;
+};
+declare type CodeSystemProps = MarginProps;
+export declare type CodeProps = CodeDOMProps & CodeStyleConfigProp & CodeSystemProps;
 export declare const Code: import("styled-components").StyledComponent<"code", any, CodeProps, never>;
+export {};

dist/components/Container.d.ts

 /// <reference types="react" />
 import { AlignSelfProps, FlexProps, JustifySelfProps, MaxWidthProps, MarginProps, PaddingProps } from '@modulz/radix-system';
-export declare type ContainerProps = React.ComponentPropsWithRef<'div'> & AlignSelfProps & FlexProps & JustifySelfProps & MaxWidthProps & MarginProps & PaddingProps & {
-    css?: any;
+import { StyleConfig } from '../utils/styleConfig';
+export declare type ContainerParts = {
+    container: '';
 };
+declare type ContainerDOMProps = React.ComponentPropsWithRef<'div'>;
+declare type ContainerStyleConfigProp = {
+    styleConfig?: StyleConfig<ContainerParts>;
+};
+declare type ContainerSystemProps = AlignSelfProps & FlexProps & JustifySelfProps & MaxWidthProps & MarginProps & PaddingProps;
+export declare type ContainerProps = ContainerDOMProps & ContainerStyleConfigProp & ContainerSystemProps;
 export declare const Container: import("styled-components").StyledComponent<"div", any, ContainerProps, never>;
+export {};

dist/components/Dialog.d.ts

 import React from 'react';
-export declare type DialogProps = {
-    children: React.ReactNode;
+import { StyleConfig } from '../utils/styleConfig';
+export declare type DialogParts = {
+    wrapper: '';
+    content: '';
+    overlay: '';
+};
+declare type DialogDOMProps = React.ComponentPropsWithRef<'div'>;
+declare type DialogStyleConfigProp = {
+    styleConfig?: StyleConfig<DialogParts>;
+};
+declare type DialogSystemProps = {};
+declare type DialogOwnProps = {
     isOpen: boolean;
@@ -20,16 +30,6 @@ /**
     refToFocusOnClose?: React.RefObject<HTMLElement>;
-    /**
-     * TODO: Type these properties properly
-     * Is this how we want to style parts of the component?
-     * I'd say this is a good start, let's see how this goes, we can change it later.
-     */
-    css?: any;
-    overlayCss?: any;
-    contentCss?: any;
-    getOverlayAnimationConfig?: (isOpen: boolean) => any;
-    getContentAnimationConfig?: (isOpen: boolean) => any;
-    animationOpenStagger?: number;
-    animationCloseStagger?: number;
     unstable__disableLock?: boolean;
 };
-export declare function Dialog({ children, isOpen, canDismiss, onDismiss, refToFocusOnOpen, refToFocusOnClose, css, overlayCss, contentCss, getOverlayAnimationConfig, getContentAnimationConfig, animationOpenStagger, animationCloseStagger, unstable__disableLock, }: DialogProps): JSX.Element;
+export declare type DialogProps = DialogDOMProps & DialogStyleConfigProp & DialogSystemProps & DialogOwnProps;
+export declare function Dialog(props: DialogProps): JSX.Element | null;
+export {};

dist/components/Divider.d.ts

 /// <reference types="react" />
 import { BackgroundColorProps, MaxWidthProps, MarginProps, HeightProps } from '@modulz/radix-system';
-export declare type DividerProps = React.ComponentPropsWithRef<'div'> & MaxWidthProps & MarginProps & BackgroundColorProps & HeightProps & {
-    css?: any;
+import { StyleConfig } from '../utils/styleConfig';
+export declare type DividerParts = {
+    divider: '';
 };
-export declare const Divider: import("styled-components").StyledComponent<"div", any, DividerProps, never>;
+declare type DividerDOMProps = React.ComponentPropsWithRef<'hr'>;
+declare type DividerStyleConfigProp = {
+    styleConfig?: StyleConfig<DividerParts>;
+};
+declare type DividerSystemProps = MaxWidthProps & MarginProps & BackgroundColorProps & HeightProps;
+export declare type DividerProps = DividerDOMProps & DividerStyleConfigProp & DividerSystemProps;
+export declare const Divider: import("styled-components").StyledComponent<"hr", any, DividerProps, never>;
+export {};

dist/components/Grid.d.ts

 /// <reference types="react" />
 import { AlignContentProps, AlignItemsProps, JustifyContentProps, JustifyItemsProps, GridSetProps, MarginProps, PaddingProps } from '@modulz/radix-system';
-export declare type GridProps = React.ComponentPropsWithRef<'div'> & AlignContentProps & AlignItemsProps & JustifyContentProps & JustifyItemsProps & GridSetProps & MarginProps & PaddingProps & {
-    css?: any;
-};
+declare type GridDOMPRops = React.ComponentPropsWithRef<'div'>;
+declare type GridSystemProps = AlignContentProps & AlignItemsProps & JustifyContentProps & JustifyItemsProps & GridSetProps & MarginProps & PaddingProps;
+export declare type GridProps = GridDOMPRops & GridSystemProps;
 export declare const Grid: import("styled-components").StyledComponent<"div", any, GridProps, never>;
+export {};

dist/components/Input.d.ts

 /// <reference types="react" />
 import { TextColorProps, MarginProps, PaddingProps, WidthProps, MaxWidthProps, TextAlignProps } from '@modulz/radix-system';
-export declare type InputProps = React.ComponentPropsWithRef<'input'> & TextColorProps & MarginProps & PaddingProps & WidthProps & MaxWidthProps & TextAlignProps & {
-    css?: any;
-    placeholderCss?: any;
+import { StyleConfig } from '../utils/styleConfig';
+export declare type InputParts = {
+    input: 'hover' | 'focus' | 'active' | 'disabled' | 'readOnly';
+    placeholder: '';
 };
+declare type InputDOMProps = React.ComponentPropsWithRef<'input'>;
+declare type InputStyleConfigProp = {
+    styleConfig?: StyleConfig<InputParts>;
+};
+declare type InputSystemProps = TextColorProps & MarginProps & PaddingProps & WidthProps & MaxWidthProps & TextAlignProps;
+export declare type InputProps = InputDOMProps & InputStyleConfigProp & InputSystemProps;
 export declare const Input: import("styled-components").StyledComponent<"input", any, InputProps, never>;
+export {};

dist/components/Link.d.ts

 /// <reference types="react" />
 import { TextColorProps, FontSizeProps } from '@modulz/radix-system';
-export declare type LinkProps = React.ComponentPropsWithRef<'a'> & TextColorProps & FontSizeProps & {
-    css?: any;
+import { StyleConfig } from '../utils/styleConfig';
+export declare type LinkParts = {
+    link: 'hover' | 'focus' | 'active';
 };
+declare type LinkDOMProps = React.ComponentPropsWithRef<'a'>;
+declare type LinkStyleConfigProp = {
+    styleConfig?: StyleConfig<LinkParts>;
+};
+declare type LinkSystemProps = TextColorProps & FontSizeProps;
+export declare type LinkProps = LinkDOMProps & LinkStyleConfigProp & LinkSystemProps;
 export declare const Link: import("styled-components").StyledComponent<"a", any, LinkProps, never>;
+export {};

dist/components/Lock.d.ts

 import React from 'react';
-declare type LockProps = {
+export declare type LockProps = {
     children: React.ReactNode;
@@ -15,2 +15,1 @@ isActive: boolean;
 export declare function Lock({ children, isActive, shouldLockScroll, canDismiss, onDismiss, refToFocusOnOpen, refToFocusOnClose, }: LockProps): JSX.Element;
-export {};

dist/components/Overlay.d.ts

 /// <reference types="react" />
 import { BackgroundColorProps, OpacityProps } from '@modulz/radix-system';
-declare type OverlayProps = React.ComponentPropsWithRef<'div'> & BackgroundColorProps & OpacityProps & {
-    css?: any;
+import { StyleConfig } from '../utils/styleConfig';
+export declare type OverlayParts = {
+    overlay: '';
 };
-export declare const Overlay: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}>, any, OverlayProps, never>;
+declare type OverlayDOMProps = React.ComponentPropsWithRef<'div'>;
+declare type OverlayStyleConfigProp = {
+    styleConfig?: StyleConfig<OverlayParts>;
+};
+declare type OverlaySystemProps = BackgroundColorProps & OpacityProps;
+export declare type OverlayProps = OverlayDOMProps & OverlayStyleConfigProp & OverlaySystemProps;
+export declare const Overlay: import("styled-components").StyledComponent<"div", any, OverlayProps, never>;
 export {};

dist/components/Pipe.d.ts

 /// <reference types="react" />
 import { BackgroundColorProps, MarginProps, HeightProps, WidthProps } from '@modulz/radix-system';
-export declare type PipeProps = React.ComponentPropsWithRef<'div'> & BackgroundColorProps & MarginProps & HeightProps & WidthProps & {
-    css?: any;
+import { StyleConfig } from '../utils/styleConfig';
+export declare type PipeParts = {
+    pipe: '';
 };
+declare type PipeDOMProps = React.ComponentPropsWithRef<'div'>;
+declare type PipeStyleConfigProp = {
+    styleConfig?: StyleConfig<PipeParts>;
+};
+declare type PipeSystemProps = BackgroundColorProps & MarginProps & HeightProps & WidthProps;
+export declare type PipeProps = PipeDOMProps & PipeStyleConfigProp & PipeSystemProps;
 export declare const Pipe: import("styled-components").StyledComponent<"div", any, PipeProps, never>;
+export {};

dist/components/Popover.d.ts

 import React from 'react';
 import { Side, Align } from '../utils/geometry';
-export declare type PopoverProps = {
-    children: React.ReactNode;
+import { StyleConfig } from '../utils/styleConfig';
+export declare type PopoverParts = {
+    content: '';
+    arrow: '';
+};
+declare type PopoverDOMProps = React.ComponentPropsWithRef<'div'>;
+declare type PopoverStyleConfigProp = {
+    styleConfig?: StyleConfig<PopoverParts>;
+};
+declare type PopoverSystemProps = {};
+declare type PopoverOwnProps = {
     isOpen?: boolean;
@@ -23,14 +32,11 @@ /**
     side?: Side;
+    sideOffset?: number;
     align?: Align;
-    arrow?: React.ReactNode;
-    arrowWidth?: number;
-    arrowHeight?: number;
-    arrowFill?: string;
-    sideOffset?: number;
     alignOffset?: number;
     arrowOffset?: number;
-    css?: any;
-    getAnimationConfig?: (isOpen: boolean, side: Side) => any;
+    noArrow?: boolean;
     unstable__disableLock?: boolean;
 };
-export declare function Popover({ children, isOpen, canDismiss, onDismiss, refToFocusOnOpen, refToFocusOnClose, targetRef, sideOffset, alignOffset, arrowOffset, side, align, arrow, arrowWidth, arrowHeight, arrowFill, css, getAnimationConfig, unstable__disableLock, }: PopoverProps): JSX.Element;
+export declare type PopoverProps = PopoverDOMProps & PopoverStyleConfigProp & PopoverSystemProps & PopoverOwnProps;
+export declare function Popover(props: PopoverProps): JSX.Element;
+export {};

dist/components/Portal.d.ts

 import React from 'react';
-declare type PortalProps = {
+export declare type PortalProps = {
     children: React.ReactNode;
 };
 export declare function Portal({ children }: PortalProps): React.ReactPortal;
-export {};

dist/components/Select.d.ts

@@ -1,48 +0,15 @@
-import React from 'react';
-declare type SelectProps = {
-    children: React.ReactNode;
-    className?: string;
-    style?: React.CSSProperties;
-    'aria-label'?: string;
-    'aria-labelledby'?: string;
-    'aria-describedby'?: string;
-    id?: string;
-    name?: string;
-    autoFocus?: boolean;
-    disabled?: boolean;
-    required?: boolean;
-    readOnly?: boolean;
-    tabIndex?: number;
-    value?: string;
-    onValueChange?: (value?: string) => void;
-    defaultValue?: string;
-    isOpen?: boolean;
-    onIsOpenChange?: (isOpen?: boolean) => void;
-    unstable__disableLock?: boolean;
-    buttonCss?: any;
-    buttonIconCss?: any;
-    menuCss?: any;
-    scrollIndicatorCss?: any;
-    optionCss?: any;
-    optionHighlightedCss?: any;
-    optionDisabledCss?: any;
-    optionGroupedCss?: any;
-    optionIconCss?: any;
-    optionGroupCss?: any;
-    optionGroupLabelCss?: any;
-};
-export declare function Select(props: SelectProps): JSX.Element;
-declare type OptionProps = {
-    children: string;
-    value: string;
-    disabled?: boolean;
-    isGrouped?: boolean;
-};
+/// <reference types="react" />
+import { SelectProps } from './selectUtils';
+import { OptionProps, Option as CustomOption, OptionGroupProps, OptionGroup as CustomOptionGroup } from './SelectWithCustomMenu';
+export { SelectParts, SelectProps, OptionProps, OptionGroupProps } from './selectUtils';
+export declare function Select({ isNative: isNativeProp, ...props }: SelectProps & {
+    isNative?: boolean;
+}): JSX.Element;
 export declare function Option(props: OptionProps): JSX.Element;
-declare type OptionGroupProps = {
-    children: React.ReactNode;
-    label?: string;
-    disabled?: boolean;
-};
-export declare function OptionGroup({ children, label, disabled }: OptionGroupProps): JSX.Element;
-export {};
+export declare namespace Option {
+    var __renderedComponent: typeof CustomOption;
+}
+export declare function OptionGroup(props: OptionGroupProps): JSX.Element;
+export declare namespace OptionGroup {
+    var __renderedComponent: typeof CustomOptionGroup;
+}

dist/components/Slider.d.ts

 import React from 'react';
 import { MarginProps } from '@modulz/radix-system';
-export declare type SliderProps = {
-    name?: string;
-    min?: number;
-    max?: number;
-    value?: string;
-    onChange?: React.ChangeEventHandler<HTMLInputElement>;
-    wrapperCss?: any;
-    sliderCss?: any;
-    trackCss?: any;
-    innerTrackCss?: any;
-    thumbCss?: any;
-    css?: any;
-} & React.ComponentPropsWithRef<'input'> & MarginProps;
+import { StyleConfig, Styles } from '../utils/styleConfig';
+export declare type SliderParts = {
+    slider: 'hover' | 'focus' | 'disabled';
+    track: '';
+    innerTrack: '';
+    thumb: '';
+};
+declare type SliderDOMProps = React.ComponentPropsWithRef<'input'>;
+declare type SliderStyleProp = {
+    styleConfig?: StyleConfig<SliderParts>;
+};
+declare type SliderSystemProps = MarginProps;
+export declare type SliderProps = SliderDOMProps & SliderStyleProp & SliderSystemProps;
 export declare const Slider: React.FC<SliderProps>;
-export declare const Input: import("styled-components").StyledComponent<"input", any, SliderProps, never>;
-export declare const Track: import("styled-components").StyledComponent<"div", any, SliderProps, never>;
-export declare const InnerTrack: import("styled-components").StyledComponent<"div", any, SliderProps, never>;
+declare type InputProps = {
+    sliderStyles?: Styles<SliderParts['slider']>;
+    thumbStyles?: Styles<SliderParts['thumb']>;
+};
+export declare const Input: import("styled-components").StyledComponent<"input", any, InputProps, never>;
+declare type TrackProps = {
+    trackStyles?: Styles<SliderParts['track']>;
+};
+export declare const Track: import("styled-components").StyledComponent<"div", any, TrackProps, never>;
+declare type InnerTrackProps = {
+    innerTrackStyles?: Styles<SliderParts['innerTrack']>;
+};
+export declare const InnerTrack: import("styled-components").StyledComponent<"div", any, InnerTrackProps, never>;
+export {};

dist/components/Text.d.ts

 /// <reference types="react" />
 import { TextColorProps, MarginProps, PaddingProps, FontFamilyProps, FontStyleProps, FontWeightProps, TextAlignProps, LineHeightProps } from '@modulz/radix-system';
-export declare type TextProps = React.ComponentPropsWithRef<'span'> & TextColorProps & MarginProps & PaddingProps & FontFamilyProps & FontStyleProps & FontWeightProps & TextAlignProps & LineHeightProps & {
-    css?: any;
+import { StyleConfig } from '../utils/styleConfig';
+export declare type TextParts = {
+    text: '';
 };
+declare type TextDOMProps = React.ComponentPropsWithRef<'span'>;
+declare type TextStyleConfigProp = {
+    styleConfig?: StyleConfig<TextParts>;
+};
+declare type TextSystemProps = TextColorProps & MarginProps & PaddingProps & FontFamilyProps & FontStyleProps & FontWeightProps & TextAlignProps & LineHeightProps;
+export declare type TextProps = TextDOMProps & TextStyleConfigProp & TextSystemProps;
 export declare const Text: import("styled-components").StyledComponent<"span", any, TextProps, never>;
+export {};

dist/components/ToggleButton.d.ts

 import React from 'react';
 import { MarginProps } from '@modulz/radix-system';
-export declare type ToggleButtonGroupProps<T> = MarginProps & {
+import { StyleConfig, Styles } from '../utils/styleConfig';
+export declare type ToggleButtonGroupParts = {
+    wrapper: '';
+    button: 'hover' | 'focus' | 'active' | 'disabled' | 'toggled';
+};
+declare type ToggleButtonGroupDOMProps = React.ComponentPropsWithRef<'div'>;
+declare type ToggleButtonGroupStyleConfigProp = {
+    styleConfig?: StyleConfig<ToggleButtonGroupParts>;
+};
+declare type ToggleButtonGroupSystemProps = MarginProps;
+declare type ToggleButtonGroupOwnProps<T> = {
     value: T;
     onChange: (value: T) => void;
-    children: React.ReactNode;
-    css?: any;
 };
-export declare const ToggleButtonGroup: <T extends string | string[] | null>({ children, value, onChange, css, ...props }: ToggleButtonGroupProps<T>) => JSX.Element;
+export declare type ToggleButtonGroupProps<T> = ToggleButtonGroupDOMProps & ToggleButtonGroupStyleConfigProp & ToggleButtonGroupSystemProps & ToggleButtonGroupOwnProps<T>;
+export declare const ToggleButtonGroup: <T extends string | string[] | null>(props: ToggleButtonGroupProps<T>) => JSX.Element;
 export declare type ToggleButtonProps = React.ComponentPropsWithRef<'button'> & {
     value: string;
-    wrapperCss?: any;
-    css?: any;
-    activeCss?: any;
 };
-export declare const ToggleButton: React.ForwardRefExoticComponent<Pick<ToggleButtonProps, "children" | "value" | "onChange" | "css" | "form" | "style" | "title" | "key" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "wrapperCss" | "activeCss"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const ToggleButton: React.ForwardRefExoticComponent<Pick<ToggleButtonProps, "disabled" | "form" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value"> & React.RefAttributes<HTMLButtonElement>>;
+declare type ToggleButtonPartProps = React.ComponentPropsWithRef<'button'> & {
+    isToggled?: boolean;
+    buttonStyles?: Styles<ToggleButtonGroupParts['button']>;
+};
+export declare const ToggleButtonPart: import("styled-components").StyledComponent<"button", any, ToggleButtonPartProps, never>;
+export {};

dist/components/Tooltip.d.ts

 import React from 'react';
 import { Side, Align } from '../utils/geometry';
-export declare type TooltipProps = {
+import { StyleConfig } from '../utils/styleConfig';
+export declare type TooltipParts = {
+    content: '';
+    arrow: '';
+};
+declare type TooltipDOMProps = React.ComponentPropsWithRef<'div'>;
+declare type TooltipStyleConfigProp = {
+    styleConfig?: StyleConfig<TooltipParts>;
+};
+declare type TooltipSystemProps = {};
+declare type TooltipOwnProps = {
     children: React.ReactElement;
@@ -14,7 +24,7 @@ label: string;
     arrowOffset?: number;
+    noArrow?: boolean;
     collisionTolerance?: number;
-    arrow?: React.ReactNode;
-    css?: any;
-    getAnimationConfig?: (isOpen: boolean, side: Side) => any;
 };
-export declare function Tooltip({ children, label, ariaLabel, isOpen: isOpenProp, onOpenChange, side, sideOffset, align, alignOffset, arrowOffset, collisionTolerance, arrow, css, getAnimationConfig, }: TooltipProps): JSX.Element;
+export declare type TooltipProps = TooltipDOMProps & TooltipStyleConfigProp & TooltipSystemProps & TooltipOwnProps;
+export declare function Tooltip(props: TooltipProps): JSX.Element;
+export {};

dist/components/useControlledState.d.ts

@@ -11,3 +11,3 @@ declare type UseControlledStateParams<T> = {
 };
-export declare function useControlledState<T>({ prop, defaultProp, onChange, unstable__isControlled, }: UseControlledStateParams<T>): readonly [T | undefined, (state?: T | undefined) => void];
+export declare function useControlledState<T>({ prop, defaultProp, onChange, unstable__isControlled, }: UseControlledStateParams<T>): readonly [T | undefined, (state?: T | undefined) => void, () => void];
 export {};

dist/components/VisuallyHidden.d.ts

 import React from 'react';
-declare type VisuallyHiddenProps = React.ComponentPropsWithRef<'span'>;
+export declare type VisuallyHiddenProps = React.ComponentPropsWithRef<'span'>;
 export declare function VisuallyHidden(props: VisuallyHiddenProps): JSX.Element;
-export {};

dist/index.d.ts

@@ -0,23 +1,33 @@
+export { Arrow, ArrowProps, ArrowParts } from './components/Arrow';
 export { AspectRatio, AspectRatioProps } from './components/AspectRatio';
-export { Arrow, ArrowProps } from './components/Arrow';
-export { Badge, BadgeProps } from './components/Badge';
+export { Badge, BadgeProps, BadgeParts } from './components/Badge';
 export { Box, BoxProps } from './components/Box';
-export { Button, ButtonProps } from './components/Button';
-export { Card, CardProps } from './components/Card';
-export { CardLink, CardLinkProps } from './components/CardLink';
-export { Code, CodeProps } from './components/Code';
-export { Container, ContainerProps } from './components/Container';
-export { Dialog, DialogProps } from './components/Dialog';
-export { Divider, DividerProps } from './components/Divider';
+export { Button, ButtonProps, ButtonParts } from './components/Button';
+export { Card, CardProps, CardParts } from './components/Card';
+export { CardLink, CardLinkProps, CardLinkParts } from './components/CardLink';
+export { Code, CodeProps, CodeParts } from './components/Code';
+export { Container, ContainerProps, ContainerParts } from './components/Container';
+export { Dialog, DialogProps, DialogParts } from './components/Dialog';
+export { Divider, DividerProps, DividerParts } from './components/Divider';
+export { DropdownMenu, DropdownMenuProps } from './components/DropdownMenu';
 export { Flex, FlexProps } from './components/Flex';
 export { Grid, GridProps } from './components/Grid';
-export { Heading, HeadingProps } from './components/Heading';
-export { Input, InputProps } from './components/Input';
-export { Link, LinkProps } from './components/Link';
-export { Pipe, PipeProps } from './components/Pipe';
-export { Popover, PopoverProps } from './components/Popover';
-export { Select, Option, OptionGroup } from './components/Select';
-export { Slider, SliderProps, Input as SliderInput, Track as SliderTrack, InnerTrack as SliderInnerTrack, } from './components/Slider';
-export { Text, TextProps } from './components/Text';
-export { ToggleButtonGroup, ToggleButtonGroupProps, ToggleButton, ToggleButtonProps, } from './components/ToggleButton';
-export { Tooltip, TooltipProps } from './components/Tooltip';
+export { Input, InputProps, InputParts } from './components/Input';
+export { Link, LinkProps, LinkParts } from './components/Link';
+export { Lock, LockProps } from './components/Lock';
+export { Menu, MenuProps, MenuItem, MenuItemProps, MenuItemCheckbox, MenuItemCheckboxProps, MenuItemRadioGroup, MenuItemRadioGroupProps, MenuItemRadio, MenuItemRadioProps, MenuItemLabel, MenuItemLabelProps, MenuItemSeparator, MenuItemSeparatorProps, MenuParts, } from './components/Menu';
+export { Overlay, OverlayProps, OverlayParts } from './components/Overlay';
+export { Pipe, PipeProps, PipeParts } from './components/Pipe';
+export { Popover, PopoverProps, PopoverParts } from './components/Popover';
+export { Portal, PortalProps } from './components/Portal';
+export { RightClickMenu, RightClickMenuProps, RightClickable, RightClickableProps, } from './components/RightClickMenu';
+export { Select, SelectProps, Option, OptionProps, OptionGroup, OptionGroupProps, SelectParts, } from './components/Select';
+export { SelectWithCustomMenu, SelectWithCustomMenuProps } from './components/SelectWithCustomMenu';
+export { SelectWithNativeMenu, SelectWithNativeMenuProps } from './components/SelectWithNativeMenu';
+export { Slider, SliderProps, Input as SliderInput, Track as SliderTrack, InnerTrack as SliderInnerTrack, SliderParts, } from './components/Slider';
+export { Text, TextProps, TextParts } from './components/Text';
+export { Textarea, TextareaProps, TextareaParts } from './components/Textarea';
+export { ToggleButtonGroup, ToggleButtonGroupProps, ToggleButton, ToggleButtonProps, ToggleButtonGroupParts, } from './components/ToggleButton';
+export { Tooltip, TooltipProps, TooltipParts } from './components/Tooltip';
+export { VisuallyHidden, VisuallyHiddenProps } from './components/VisuallyHidden';
+export { StyleConfig, PartsStyles, Styles } from './utils/styleConfig';

dist/utils/geometry.d.ts

@@ -20,2 +20,6 @@ export declare const SIDE_OPTIONS: readonly ["top", "right", "bottom", "left"];
 /**
+ * Gets the rect (`ClientRect`) of an element and rounds all values.
+ */
+export declare function getRoundedRect(element: HTMLElement): ClientRect;
+/**
  * Gets the opposite side of a given side (ie. top => bottom, left => right, …)
@@ -22,0 +26,0 @@ */

package.json

 {
   "name": "mdlz-prmtz",
-  "version": "0.0.39",
+  "version": "0.0.40-0",
   "description": "Accessible and customisable primitives for the web",
@@ -25,52 +25,57 @@ "author": "Pedro Duarte <[e-mail]>",
   "peerDependencies": {
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0",
-    "styled-components": "^4.3.2"
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "styled-components": "^4.4.1"
   },
   "dependencies": {
-    "@modulz/radix-icons": "^0.8.2",
+    "@modulz/radix-icons": "^0.8.7",
     "@modulz/radix-system": "^0.0.1-alpha.9",
-    "@styled-system/css": "5.0.23",
+    "@styled-system/css": "5.1.4",
     "@styled-system/theme-get": "^5.1.2",
+    "lodash.merge": "^4.6.2",
     "lodash.omit": "^4.5.0",
     "lodash.pick": "^4.4.0",
-    "react-focus-on": "^3.1.2",
-    "react-spring": "^8.0.27",
+    "react-focus-on": "^3.3.0",
+    "react-is": "^16.12.0",
     "resize-observer-polyfill": "^1.5.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.6.0",
-    "@storybook/addon-options": "5.2.0-rc.11",
-    "@storybook/addons": "5.2.0-rc.11",
-    "@storybook/react": "5.2.0-rc.11",
-    "@testing-library/jest-dom": "^4.1.0",
-    "@testing-library/react": "^9.1.4",
-    "@types/jest": "^24.0.18",
-    "@types/node": "^12.7.5",
-    "@types/react": "^16.9.2",
-    "@types/react-dom": "^16.9.0",
-    "@types/storybook__react": "^4.0.2",
-    "@types/styled-components": "^4.1.18",
-    "@typescript-eslint/eslint-plugin": "^2.2.0",
-    "@typescript-eslint/parser": "^2.2.0",
+    "@babel/core": "^7.7.5",
+    "@storybook/addon-options": "5.2.8",
+    "@storybook/addon-storysource": "^5.2.8",
+    "@storybook/addons": "5.2.8",
+    "@storybook/react": "5.2.8",
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.3.3",
+    "@types/jest": "^24.0.23",
+    "@types/lodash.merge": "^4.6.6",
+    "@types/lodash.omit": "^4.5.6",
+    "@types/lodash.pick": "^4.4.6",
+    "@types/node": "^12.12.17",
+    "@types/react": "^16.9.16",
+    "@types/react-dom": "^16.9.4",
+    "@types/react-is": "^16.7.1",
+    "@types/styled-components": "^4.4.1",
+    "@typescript-eslint/eslint-plugin": "^2.11.0",
+    "@typescript-eslint/parser": "^2.11.0",
     "babel-eslint": "10.0.3",
     "babel-loader": "8.0.6",
-    "csstype": "^2.6.6",
-    "eslint": "6.3.0",
-    "eslint-config-react-app": "^5.0.1",
-    "eslint-plugin-flowtype": "4.3.0",
-    "eslint-plugin-import": "2.18.2",
+    "csstype": "^2.6.7",
+    "eslint": "6.7.2",
+    "eslint-config-react-app": "^5.1.0",
+    "eslint-plugin-flowtype": "4.5.2",
+    "eslint-plugin-import": "2.19.1",
     "eslint-plugin-jsx-a11y": "6.2.3",
-    "eslint-plugin-react": "7.14.3",
-    "eslint-plugin-react-hooks": "2.0.1",
+    "eslint-plugin-react": "7.17.0",
+    "eslint-plugin-react-hooks": "2.3.0",
     "jest": "^24.9.0",
-    "lint-staged": "^9.2.5",
-    "np": "^5.0.3",
-    "prettier": "^1.18.2",
-    "rollup": "^1.21.2",
+    "lint-staged": "^9.5.0",
+    "np": "^5.2.1",
+    "prettier": "^1.19.1",
+    "rollup": "^1.27.11",
     "rollup-plugin-execute": "^1.1.1",
-    "rollup-plugin-typescript2": "^0.24.2",
-    "styled-components": "^4.3.2",
-    "ts-jest": "^24.1.0",
-    "typescript": "3.6.3",
+    "rollup-plugin-typescript2": "^0.25.3",
+    "styled-components": "^4.4.1",
+    "ts-jest": "^24.2.0",
+    "typescript": "3.7.3",
     "yalc": "^1.0.0-pre.34"
@@ -77,0 +82,0 @@ },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

426664

increased by58.91%

Number of package files

126

increased by117.24%

Lines of code

8595

increased by64.75%

Worsened metrics

Dependency count

13

increased by8.33%

Dev dependency count

39

increased by11.43%

Dependency changes

• + Addedlodash.merge@^4.6.2

• + Addedreact-is@^16.12.0

• + Added@styled-system/css@5.1.4(transitive)

• + Addedlodash.merge@4.6.2(transitive)

• - Removedreact-spring@^8.0.27

• - Removed@styled-system/css@5.0.23(transitive)

• - Removedreact-spring@8.0.27(transitive)

• Updated@modulz/radix-icons@^0.8.7

• Updated@styled-system/css@5.1.4

• Updatedreact-focus-on@^3.3.0