@uniformdev/design-system 19.66.1 → 19.69.0

package/dist/esm/index.js

@@ -1980,12 +1980,13 @@ var commonLineHeight = css10`
 import { jsx as jsx9 } from "@emotion/react/jsx-runtime";
 var Heading = ({
   level = 2,
+  as,
   asSpan,
   withMarginBottom = true,
   children,
   ...hAttributes
 }) => {
-  const Heading2 = asSpan ? "span" : `h${level}`;
+  const Heading2 = (as != null ? as : asSpan) ? "span" : `h${level}`;
   const headingStyle = {
     1: h1,
     2: h2,
@@ -14504,7 +14505,7 @@ var imgLoading = css54`
   opacity: 0;
 `;
 var imgLoaded = css54`
-  animation: ${fadeIn} var(--duration-slow) var(--timing-ease-out) forwards;
+  animation: ${fadeIn} var(--duration-fast) var(--timing-ease-out) forwards;
   opacity: 1;
 `;
 var brokenImage = css54`
@@ -14557,7 +14558,7 @@ var ImageBroken = ({ width, height, ...props }) => {
 
 // src/components/Image/Image.tsx
 import { Fragment as Fragment11, jsx as jsx65, jsxs as jsxs41 } from "@emotion/react/jsx-runtime";
-var MIN_LOADING_MS = 500;
+var MIN_LOADING_MS = 100;
 function Image({
   alt,
   src,
@@ -18733,7 +18734,7 @@ var ParameterToggleInner = forwardRef17(
 );
 
 // src/components/ProgressBar/ProgressBar.styles.ts
-import { css as css85 } from "@emotion/react";
+import { css as css85, keyframes as keyframes4 } from "@emotion/react";
 var container = css85`
   background: var(--gray-50);
   margin-block: var(--spacing-sm);
@@ -18745,12 +18746,40 @@ var container = css85`
 `;
 var themeMap = {
   primary: css85`
-    background-color: var(--accent-light);
+    --progress-color: var(--accent-light);
   `,
   secondary: css85`
-    background-color: var(--brand-secondary-5);
+    --progress-color: var(--accent-alt-light);
+  `,
+  destructive: css85`
+    --progress-color: var(--brand-secondary-5);
   `
 };
+var slidingBackgroundPosition = keyframes4`
+  from {
+    background-position: 0 0;
+  }
+  to {
+    background-position: 64px 0;
+  }
+`;
+var determinate = css85`
+  background-color: var(--progress-color);
+`;
+var indeterminate = css85`
+  background-image: linear-gradient(
+    45deg,
+    var(--progress-color) 25%,
+    transparent 25%,
+    transparent 50%,
+    var(--progress-color) 50%,
+    var(--progress-color) 75%,
+    transparent 75%,
+    transparent
+  );
+  background-size: 64px 64px;
+  animation: ${slidingBackgroundPosition} 1s linear infinite;
+`;
 var bar = css85`
   position: absolute;
   inset: 0;
@@ -18760,13 +18789,18 @@ var bar = css85`
 
 // src/components/ProgressBar/ProgressBar.tsx
 import { jsx as jsx108 } from "@emotion/react/jsx-runtime";
-function ProgressBar({ className, current, max, theme = "primary" }) {
+function ProgressBar({
+  current,
+  max,
+  theme = "primary",
+  variant = "determinate",
+  ...props
+}) {
   const valueNow = Math.min(current, max);
   const valuePercentage = max > 0 ? Math.ceil(100 / max * valueNow) : 0;
   return /* @__PURE__ */ jsx108(
     "div",
     {
-      className,
       css: container,
       role: "progressbar",
       "aria-busy": valuePercentage !== 100,
@@ -18774,10 +18808,15 @@ function ProgressBar({ className, current, max, theme = "primary" }) {
       "aria-valuemin": 0,
       "aria-valuemax": max,
       "aria-valuenow": valueNow,
+      ...props,
       children: /* @__PURE__ */ jsx108(
         "div",
         {
-          css: [bar, themeMap[theme]],
+          css: [
+            themeMap[theme],
+            variant === "indeterminate" ? indeterminate : determinate,
+            bar
+          ],
           style: {
             transform: `scaleX(${valuePercentage / 100})`
           },
@@ -19100,8 +19139,8 @@ var SegmentedControl = ({
 };
 
 // src/components/Skeleton/Skeleton.styles.ts
-import { css as css90, keyframes as keyframes4 } from "@emotion/react";
-var lightFadingOut = keyframes4`
+import { css as css90, keyframes as keyframes5 } from "@emotion/react";
+var lightFadingOut = keyframes5`
   from { opacity: 0.1; }
   to { opacity: 0.025; }
 `;
@@ -19202,7 +19241,6 @@ var SwitchInputLabel = css91`
   align-items: center;
   color: var(--brand-secondary-1);
   display: inline-flex;
-  font-weight: var(--fw-bold);
   line-height: 1.25;
   padding-inline: var(--spacing-2xl) 0;
 

package/dist/index.d.mts

@@ -22675,16 +22675,16 @@ type PopoverProps = PopoverProps$1 & {
 };
 declare const Popover: ({ iconColor, icon, iconSize, buttonText, ariaLabel, placement, testId, trigger, children, ...otherProps }: PopoverProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
-interface ProgressBarProps {
-    className?: string;
+interface ProgressBarProps extends React$1.HTMLAttributes<HTMLDivElement> {
     current: number;
     max: number;
-    theme?: 'primary' | 'secondary';
+    theme?: 'primary' | 'secondary' | 'destructive';
+    variant?: 'determinate' | 'indeterminate';
 }
 /**
  * @deprecated unstable - props and functionality is likely to change
  */
-declare function ProgressBar({ className, current, max, theme }: ProgressBarProps): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare function ProgressBar({ current, max, theme, variant, ...props }: ProgressBarProps): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 type ProgressListItemStatus = 'completed' | 'inProgress' | 'queued';
 type ProgressListProps = React__default.HTMLAttributes<HTMLOListElement> & {
@@ -23047,12 +23047,14 @@ declare function Tooltip({ children, title, placement, visible, withoutPortal, .
 /** Available heading weights e.g. 1 - 6 */
 type LevelProps = 1 | 2 | 3 | 4 | 5 | 6;
 type HeadingProps = {
-    /** sets the type of heading tag between h1 to h6, defaults to <h2>
+    /** sets the type of heading between h1 to h6, defaults to <h2>
      * @default 2
      */
     level?: LevelProps;
+    /** override the underlying html tag */
+    as?: React$1.ElementType;
     /** sets whether to display a span with the defined heading styles
-     * @default undefined
+     * @deprecated use as="span"
      */
     asSpan?: boolean;
     /** sets the title value */
@@ -23066,7 +23068,7 @@ type HeadingProps = {
  * Component that sets the heading tag
  * @example <Heading level={1}>Blog Post Title</Heading>
  */
-declare const Heading: ({ level, asSpan, withMarginBottom, children, ...hAttributes }: HeadingProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const Heading: ({ level, as, asSpan, withMarginBottom, children, ...hAttributes }: HeadingProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 type IntegrationHeaderSectionProps = React$1.HtmlHTMLAttributes<HTMLDivElement> & {
     /** sets the title text of the integration */

package/dist/index.d.ts

@@ -22675,16 +22675,16 @@ type PopoverProps = PopoverProps$1 & {
 };
 declare const Popover: ({ iconColor, icon, iconSize, buttonText, ariaLabel, placement, testId, trigger, children, ...otherProps }: PopoverProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
-interface ProgressBarProps {
-    className?: string;
+interface ProgressBarProps extends React$1.HTMLAttributes<HTMLDivElement> {
     current: number;
     max: number;
-    theme?: 'primary' | 'secondary';
+    theme?: 'primary' | 'secondary' | 'destructive';
+    variant?: 'determinate' | 'indeterminate';
 }
 /**
  * @deprecated unstable - props and functionality is likely to change
  */
-declare function ProgressBar({ className, current, max, theme }: ProgressBarProps): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare function ProgressBar({ current, max, theme, variant, ...props }: ProgressBarProps): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 type ProgressListItemStatus = 'completed' | 'inProgress' | 'queued';
 type ProgressListProps = React__default.HTMLAttributes<HTMLOListElement> & {
@@ -23047,12 +23047,14 @@ declare function Tooltip({ children, title, placement, visible, withoutPortal, .
 /** Available heading weights e.g. 1 - 6 */
 type LevelProps = 1 | 2 | 3 | 4 | 5 | 6;
 type HeadingProps = {
-    /** sets the type of heading tag between h1 to h6, defaults to <h2>
+    /** sets the type of heading between h1 to h6, defaults to <h2>
      * @default 2
      */
     level?: LevelProps;
+    /** override the underlying html tag */
+    as?: React$1.ElementType;
     /** sets whether to display a span with the defined heading styles
-     * @default undefined
+     * @deprecated use as="span"
      */
     asSpan?: boolean;
     /** sets the title value */
@@ -23066,7 +23068,7 @@ type HeadingProps = {
  * Component that sets the heading tag
  * @example <Heading level={1}>Blog Post Title</Heading>
  */
-declare const Heading: ({ level, asSpan, withMarginBottom, children, ...hAttributes }: HeadingProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const Heading: ({ level, as, asSpan, withMarginBottom, children, ...hAttributes }: HeadingProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 type IntegrationHeaderSectionProps = React$1.HtmlHTMLAttributes<HTMLDivElement> & {
     /** sets the title text of the integration */

package/dist/index.js

@@ -3576,12 +3576,13 @@ var commonLineHeight = import_react16.css`
 var import_jsx_runtime8 = require("@emotion/react/jsx-runtime");
 var Heading = ({
   level = 2,
+  as,
   asSpan,
   withMarginBottom = true,
   children,
   ...hAttributes
 }) => {
-  const Heading2 = asSpan ? "span" : `h${level}`;
+  const Heading2 = (as != null ? as : asSpan) ? "span" : `h${level}`;
   const headingStyle = {
     1: h1,
     2: h2,
@@ -16237,7 +16238,7 @@ var imgLoading = import_react71.css`
   opacity: 0;
 `;
 var imgLoaded = import_react71.css`
-  animation: ${fadeIn} var(--duration-slow) var(--timing-ease-out) forwards;
+  animation: ${fadeIn} var(--duration-fast) var(--timing-ease-out) forwards;
   opacity: 1;
 `;
 var brokenImage = import_react71.css`
@@ -16291,7 +16292,7 @@ var ImageBroken = ({ width, height, ...props }) => {
 
 // src/components/Image/Image.tsx
 var import_jsx_runtime65 = require("@emotion/react/jsx-runtime");
-var MIN_LOADING_MS = 500;
+var MIN_LOADING_MS = 100;
 function Image({
   alt,
   src,
@@ -20541,12 +20542,40 @@ var container = import_react123.css`
 `;
 var themeMap = {
   primary: import_react123.css`
-    background-color: var(--accent-light);
+    --progress-color: var(--accent-light);
   `,
   secondary: import_react123.css`
-    background-color: var(--brand-secondary-5);
+    --progress-color: var(--accent-alt-light);
+  `,
+  destructive: import_react123.css`
+    --progress-color: var(--brand-secondary-5);
   `
 };
+var slidingBackgroundPosition = import_react123.keyframes`
+  from {
+    background-position: 0 0;
+  }
+  to {
+    background-position: 64px 0;
+  }
+`;
+var determinate = import_react123.css`
+  background-color: var(--progress-color);
+`;
+var indeterminate = import_react123.css`
+  background-image: linear-gradient(
+    45deg,
+    var(--progress-color) 25%,
+    transparent 25%,
+    transparent 50%,
+    var(--progress-color) 50%,
+    var(--progress-color) 75%,
+    transparent 75%,
+    transparent
+  );
+  background-size: 64px 64px;
+  animation: ${slidingBackgroundPosition} 1s linear infinite;
+`;
 var bar = import_react123.css`
   position: absolute;
   inset: 0;
@@ -20556,13 +20585,18 @@ var bar = import_react123.css`
 
 // src/components/ProgressBar/ProgressBar.tsx
 var import_jsx_runtime108 = require("@emotion/react/jsx-runtime");
-function ProgressBar({ className, current, max, theme = "primary" }) {
+function ProgressBar({
+  current,
+  max,
+  theme = "primary",
+  variant = "determinate",
+  ...props
+}) {
   const valueNow = Math.min(current, max);
   const valuePercentage = max > 0 ? Math.ceil(100 / max * valueNow) : 0;
   return /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
     "div",
     {
-      className,
       css: container,
       role: "progressbar",
       "aria-busy": valuePercentage !== 100,
@@ -20570,10 +20604,15 @@ function ProgressBar({ className, current, max, theme = "primary" }) {
       "aria-valuemin": 0,
       "aria-valuemax": max,
       "aria-valuenow": valueNow,
+      ...props,
       children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
         "div",
         {
-          css: [bar, themeMap[theme]],
+          css: [
+            themeMap[theme],
+            variant === "indeterminate" ? indeterminate : determinate,
+            bar
+          ],
           style: {
             transform: `scaleX(${valuePercentage / 100})`
           },
@@ -21008,7 +21047,6 @@ var SwitchInputLabel = import_react131.css`
   align-items: center;
   color: var(--brand-secondary-1);
   display: inline-flex;
-  font-weight: var(--fw-bold);
   line-height: 1.25;
   padding-inline: var(--spacing-2xl) 0;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/design-system",
-  "version": "19.66.1",
+  "version": "19.69.0",
   "description": "Uniform design system components",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -23,8 +23,8 @@
     "@storybook/react": "6.5.16",
     "@types/react": "18.2.21",
     "@types/react-dom": "18.2.7",
-    "@uniformdev/canvas": "^19.66.1",
-    "@uniformdev/richtext": "^19.66.1",
+    "@uniformdev/canvas": "^19.69.0",
+    "@uniformdev/richtext": "^19.69.0",
     "autoprefixer": "10.4.16",
     "hygen": "6.2.11",
     "postcss": "8.4.31",
@@ -65,5 +65,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "80e9cf7f60f95245269938596f00813b48a304f3"
+  "gitHead": "327658d8c6e5735499845ebb29d74906f2a43dad"
 }