@fluidattacks/design 8.2.0 → 8.3.0

package/dist/components/segmented-progress-bar/index.js

@@ -1,49 +1,50 @@
-import { jsx as m } from "react/jsx-runtime";
+import { jsx as l } from "react/jsx-runtime";
 import { useTheme as f } from "styled-components";
-import { StyledBarContainer as w, StyledSegment as y } from "./styles.js";
-const x = ({
-  segments: a,
-  backgroundColor: l,
+import { StyledBarContainer as w, StyledSegment as S } from "./styles.js";
+const B = ({
+  segments: t,
+  backgroundColor: m,
   height: n = "14px",
   width: $ = "100%",
   margin: p,
   mx: g,
-  my: i,
-  ml: s,
-  mr: c,
-  mt: d,
-  mb: h
+  my: h,
+  ml: i,
+  mr: s,
+  mt: c,
+  mb: d
 }) => {
-  const r = f(), e = [
+  const r = f(), o = [
     r.palette.primary[700],
     r.palette.error[500],
     r.palette.warning[500]
   ], u = r.palette.warning[200];
-  return /* @__PURE__ */ m(
+  return /* @__PURE__ */ l(
     w,
     {
-      $backgroundColor: l ?? u,
+      $backgroundColor: m ?? u,
       $height: n,
       $margin: p,
-      $mb: h,
-      $ml: s,
-      $mr: c,
-      $mt: d,
+      $mb: d,
+      $ml: i,
+      $mr: s,
+      $mt: c,
       $mx: g,
-      $my: i,
+      $my: h,
       $width: $,
       role: "progressbar",
-      children: a.map((t, o) => /* @__PURE__ */ m(
-        y,
+      children: t.map((a, e) => /* @__PURE__ */ l(
+        S,
         {
-          $color: t.color ?? e[o % e.length],
-          $width: t.value
+          $color: a.color ?? o[e % o.length],
+          $showSeparator: e < t.length - 1,
+          $width: a.value
         },
-        `segment-${o}`
+        `segment-${e}`
       ))
     }
   );
 };
 export {
-  x as SegmentedProgressBar
+  B as SegmentedProgressBar
 };

package/dist/components/segmented-progress-bar/styles.d.ts

@@ -13,6 +13,7 @@ interface IStyledBarContainerProps {
 }
 interface IStyledSegmentProps {
     $color: string;
+    $showSeparator: boolean;
     $width: number;
 }
 declare const StyledBarContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof IStyledBarContainerProps> & IStyledBarContainerProps, never> & Partial<Pick<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof IStyledBarContainerProps> & IStyledBarContainerProps, never>>> & string;

package/dist/components/segmented-progress-bar/styles.js

@@ -1,17 +1,17 @@
 import { styled as t } from "styled-components";
-import { setMargin as $ } from "../@core/utils.js";
-const c = t.div`
+import { setMargin as a } from "../@core/utils.js";
+const b = t.div`
   ${({
   $backgroundColor: r,
   $height: o,
   $width: e,
   $ml: i,
   $mr: d,
-  $mt: m,
-  $mb: n,
-  $mx: l,
-  $my: a,
-  $margin: h
+  $mt: l,
+  $mb: m,
+  $mx: n,
+  $my: h,
+  $margin: $
 }) => `
     background-color: ${r};
     border-radius: 999px;
@@ -19,17 +19,19 @@ const c = t.div`
     height: ${o};
     overflow: hidden;
     width: ${e};
-    ${$({ margin: h, mb: n, ml: i, mr: d, mt: m, mx: l, my: a })}
+    ${a({ margin: $, mb: m, ml: i, mr: d, mt: l, mx: n, my: h })}
   `}
-`, f = t.div`
-  ${({ $color: r, $width: o }) => `
+`, x = t.div`
+  ${({ $color: r, $showSeparator: o, $width: e, theme: i }) => `
     background-color: ${r};
+    box-sizing: border-box;
     flex-shrink: 0;
     height: 100%;
-    width: ${o}%;
+    width: ${e}%;
+    ${o ? `border-right: 1.5px solid ${i.palette.white};` : ""}
   `}
 `;
 export {
-  c as StyledBarContainer,
-  f as StyledSegment
+  b as StyledBarContainer,
+  x as StyledSegment
 };

package/package.json

@@ -135,5 +135,5 @@
     "./dist/index.js"
   ],
   "typings": "./dist/index.d.ts",
-  "version": "8.2.0"
+  "version": "8.3.0"
 }