@granto-umbrella/umbrella-components 1.0.2 → 1.2.0

package/.github/workflows/azure-static-web-apps-white-beach-08c746f0f.yml

@@ -31,10 +31,6 @@ jobs:
       - name: Install dependencies
         run: yarn install
 
-      # Build Storybook
-      - name: Build Storybook
-        run: yarn build-storybook
-
       # Deploy to Azure Static Web Apps
       - name: Deploy to Azure Static Web Apps
         id: builddeploy
@@ -43,7 +39,7 @@ jobs:
           azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_WHITE_BEACH_08C746F0F }}
           repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for GitHub integrations (i.e., PR comments)
           action: "upload"
-          app_location: "" # Root of the built Storybook
+          app_location: "/storybook-static" # Root of the built Storybook
           api_location: "" # API source code path - optional
           output_location: "storybook-static" # Built Storybook directory
 

package/dist/umbrella-components.es.js

@@ -1780,50 +1780,104 @@ const w = {
     "--white": "#FFFFFF",
     "--black": "#000000"
   },
-  neutral: {
-    "--neutral-100": "#F7F7F7",
-    "--neutral-200": "#F0F0F0",
-    "--neutral-300": "#B7B7B7",
-    "--neutral-400": "#7F7F7F",
-    "--neutral-500": "#464646",
-    "--neutral-600": "#202020"
+  gray: {
+    "--gray-50": "#F7F7F7",
+    "--gray-100": "#F0F0F0",
+    "--gray-150": "#E3E3E3",
+    "--gray-200": "#CFCFCF",
+    "--gray-250": "#B7B7B7",
+    "--gray-300": "#9B9B9B",
+    "--gray-350": "#7F7F7F",
+    "--gray-400": "#606060",
+    "--gray-450": "#464646",
+    "--gray-500": "#333333",
+    "--gray-550": "#1D1D1D",
+    "--gray-600": "#0F0F0F",
+    "--gray-650": "#070707"
   },
-  branding: {
-    "--branding-100": "#E7DEF6",
-    "--branding-200": "#D6C6F3",
-    "--branding-300": "#C4A7F1",
-    "--branding-400": "#9F88ED",
-    "--branding-500": "#6B32D0"
+  purple: {
+    "--purple-50": "#FAF9FC",
+    "--purple-100": "#F8F6FB",
+    "--purple-150": "#F2EEF9",
+    "--purple-200": "#E7DEF6",
+    "--purple-250": "#D6C6F3",
+    "--purple-300": "#C4A7F1",
+    "--purple-350": "#9F88ED",
+    "--purple-400": "#9852E8",
+    "--purple-450": "#6B32D0",
+    "--purple-500": "#5828AC",
+    "--purple-550": "#35166C",
+    "--purple-600": "#210B48",
+    "--purple-650": "#12062B"
   },
-  success: {
-    "--success-100": "#E6FCE3",
-    "--success-200": "#BCF4A5",
-    "--success-300": "#A4E98A",
-    "--success-400": "#41D727",
-    "--success-500": "#16B616",
-    "--success-600": "#0D7D0D"
+  green: {
+    "--green-50": "#F4FDF3",
+    "--green-100": "#ECFCEA",
+    "--green-150": "#DAFBD6",
+    "--green-200": "#ACFBA5",
+    "--green-250": "#45F73D",
+    "--green-300": "#25DD1E",
+    "--green-350": "#19BC13",
+    "--green-400": "#129A0D",
+    "--green-450": "#0B7908",
+    "--green-500": "#055604",
+    "--green-550": "#033B02",
+    "--green-600": "#022501",
+    "--green-650": "#011501"
   },
-  danger: {
-    "--danger-100": "#FFF1F1",
-    "--danger-200": "#FFC6C6",
-    "--danger-300": "#FF8F8F",
-    "--danger-400": "#FF6B6B",
-    "--danger-500": "#DB3E3E",
-    "--danger-600": "#B22E2E"
+  red: {
+    "--red-50": "#FDF9F6",
+    "--red-100": "#FBF5F4",
+    "--red-150": "#F9EDEB",
+    "--red-200": "#F8DBD7",
+    "--red-250": "#F7C0B9",
+    "--red-300": "#F79B90",
+    "--red-350": "#F5675D",
+    "--red-400": "#CF2B2B",
+    "--red-450": "#AE2320",
+    "--red-500": "#821717",
+    "--red-550": "#5A0C0C",
+    "--red-600": "#3B0606",
+    "--red-650": "#230303"
   },
-  warning: {
-    "--warning-100": "#FFFCE6",
-    "--warning-200": "#FFF4A5",
-    "--warning-300": "#FFE863",
-    "--warning-400": "#FFC400",
-    "--warning-500": "#B38F00"
+  blue: {
+    "--blue-50": "#F8FAFD",
+    "--blue-100": "#F4F7FC",
+    "--blue-150": "#EAF1FA",
+    "--blue-200": "#D5E4F9",
+    "--blue-250": "#B6D2F8",
+    "--blue-300": "#8CBAF8",
+    "--blue-350": "#579DF7",
+    "--blue-400": "#1C72D6",
+    "--blue-450": "#155FB3",
+    "--blue-500": "#0E4585",
+    "--blue-550": "#062E5D",
+    "--blue-600": "#031C3D",
+    "--blue-650": "#020F24"
   },
-  info: {
-    "--info-100": "#E0F2FF",
-    "--info-200": "#B6DEFF",
-    "--info-300": "#82C8FF",
-    "--info-400": "#1B8CFF",
-    "--info-500": "#005FCC"
+  yellow: {
+    "--yellow-50": "#FEFCE1",
+    "--yellow-100": "#FDF9CB",
+    "--yellow-150": "#FDF497",
+    "--yellow-200": "#FDEA04",
+    "--yellow-250": "#FFE504",
+    "--yellow-300": "#FFD804",
+    "--yellow-350": "#FFC900",
+    "--yellow-400": "#B38F00",
+    "--yellow-450": "#806000",
+    "--yellow-500": "#4D3B00"
+  },
+  orange: {
+    "--orange-50": "#FFF8E5",
+    "--orange-100": "#FFE5B3",
+    "--orange-150": "#FFD180",
+    "--orange-200": "#FFC14D",
+    "--orange-250": "#FFA500",
+    "--orange-300": "#CC8500",
+    "--orange-350": "#996300",
+    "--orange-400": "#805500",
+    "--orange-450": "#664400",
+    "--orange-500": "#4D3300"
   }
 }, $ = {
   base: {
@@ -1831,49 +1885,49 @@ const w = {
     "--text": w.base["--black"]
   },
   neutral: {
-    "--neutral-100": w.neutral["--neutral-100"],
-    "--neutral-200": w.neutral["--neutral-200"],
-    "--neutral-300": w.neutral["--neutral-300"],
-    "--neutral-400": w.neutral["--neutral-400"],
-    "--neutral-500": w.neutral["--neutral-500"],
-    "--neutral-600": w.neutral["--neutral-600"]
+    "--neutral-100": w.gray["--gray-100"],
+    "--neutral-200": w.gray["--gray-200"],
+    "--neutral-300": w.gray["--gray-300"],
+    "--neutral-400": w.gray["--gray-400"],
+    "--neutral-450": w.gray["--gray-450"],
+    "--neutral-500": w.gray["--gray-500"],
+    "--neutral-600": w.gray["--gray-600"]
   },
   branding: {
-    "--branding-100": w.branding["--branding-100"],
-    "--branding-200": w.branding["--branding-200"],
-    "--branding-300": w.branding["--branding-300"],
-    "--branding-400": w.branding["--branding-400"],
-    "--branding-500": w.branding["--branding-500"]
+    "--branding-100": w.purple["--purple-100"],
+    "--branding-200": w.purple["--purple-200"],
+    "--branding-300": w.purple["--purple-300"],
+    "--branding-400": w.purple["--purple-400"],
+    "--branding-450": w.purple["--purple-450"],
+    "--branding-500": w.purple["--purple-500"],
+    "--branding-550": w.purple["--purple-550"]
   },
   success: {
-    "--success-100": w.success["--success-100"],
-    "--success-200": w.success["--success-200"],
-    "--success-300": w.success["--success-300"],
-    "--success-400": w.success["--success-400"],
-    "--success-500": w.success["--success-500"],
-    "--success-600": w.success["--success-600"]
+    "--success-100": w.green["--green-50"],
+    "--success-200": w.green["--green-200"],
+    "--success-300": w.green["--green-300"],
+    "--success-400": w.green["--green-400"],
+    "--success-500": w.green["--green-500"],
+    "--success-600": w.green["--green-600"]
   },
   danger: {
-    "--danger-100": w.danger["--danger-100"],
-    "--danger-200": w.danger["--danger-200"],
-    "--danger-300": w.danger["--danger-300"],
-    "--danger-400": w.danger["--danger-400"],
-    "--danger-500": w.danger["--danger-500"],
-    "--danger-600": w.danger["--danger-600"]
+    "--danger-100": w.red["--red-50"],
+    "--danger-200": w.red["--red-200"],
+    "--danger-300": w.red["--red-300"],
+    "--danger-400": w.red["--red-400"],
+    "--danger-450": w.red["--red-450"],
+    "--danger-500": w.red["--red-500"],
+    "--danger-600": w.red["--red-600"]
   },
   warning: {
-    "--warning-100": w.warning["--warning-100"],
-    "--warning-200": w.warning["--warning-200"],
-    "--warning-300": w.warning["--warning-300"],
-    "--warning-400": w.warning["--warning-400"],
-    "--warning-500": w.warning["--warning-500"]
+    "--warning-100": w.yellow["--yellow-50"],
+    "--warning-200": w.yellow["--yellow-200"],
+    "--warning-300": w.yellow["--yellow-300"],
+    "--warning-400": w.yellow["--yellow-400"]
   },
   info: {
-    "--info-100": w.info["--info-100"],
-    "--info-200": w.info["--info-200"],
-    "--info-300": w.info["--info-300"],
-    "--info-400": w.info["--info-400"],
-    "--info-500": w.info["--info-500"]
+    "--info-100": w.blue["--blue-50"],
+    "--info-200": w.blue["--blue-100"]
   }
 }, p0 = {
   width: {
@@ -1965,14 +2019,23 @@ const w = {
   // 80px
 }, K = {
   xs: C["size-0.5"],
+  // 2px
   sm: C["size-1"],
+  // 4px
   md: C["size-2"],
+  // 8px
   lg: C["size-3"],
+  // 12px
   xl: C["size-4"],
+  // 16px
   "2xl": C["size-6"],
+  // 24px
   "3xl": C["size-8"],
+  // 32px
   "4xl": C["size-10"],
+  // 40px
   full: "100%"
+  // Representa largura ou altura completa
 }, Xt2 = {
   xs: b0`
     padding: ${C["size-1.5"]} ${K.xl};
@@ -1996,52 +2059,52 @@ const w = {
   `
 }, Qt2 = {
   primary: b0`
-    background: ${$.branding["--branding-400"]};
+    background: ${$.branding["--branding-500"]};
     color: ${$.base["--background"]};
     border: none;
     &:hover {
-      background: ${$.branding["--branding-300"]};
+      background: ${$.branding["--branding-450"]};
     }
     &:active {
-      background: ${$.branding["--branding-500"]};
+      background: ${$.branding["--branding-550"]};
     }
     &:disabled {
-      background: ${$.branding["--branding-100"]};
+      background: ${$.branding["--branding-200"]};
     }
   `,
   outline: b0`
-    border: 1px solid ${$.branding["--branding-400"]};
-    color: ${$.branding["--branding-400"]};
+    border: 1px solid ${$.branding["--branding-500"]};
+    color: ${$.branding["--branding-500"]};
     background: transparent;
     &:hover {
-      border: 1px solid ${$.branding["--branding-300"]};
-      color: ${$.branding["--branding-300"]};
+      border: 1px solid ${$.branding["--branding-450"]};
+      color: ${$.branding["--branding-450"]};
     }
     &:active {
-      border: 1px solid ${$.branding["--branding-500"]};
-      color: ${$.branding["--branding-500"]};
+      border: 1px solid ${$.branding["--branding-550"]};
+      color: ${$.branding["--branding-550"]};
     }
     &:disabled {
-      color: ${$.branding["--branding-100"]};
-      border: 1px solid ${$.branding["--branding-100"]};
+      color: ${$.branding["--branding-200"]};
+      border: 1px solid ${$.branding["--branding-200"]};
     }
   `,
   ghost: b0`
     background: transparent;
-    color: ${$.branding["--branding-400"]};
+    color: ${$.branding["--branding-500"]};
     border: none;
     &:hover {
-      color: ${$.branding["--branding-300"]};
+      color: ${$.branding["--branding-450"]};
     }
     &:active {
-      color: ${$.branding["--branding-500"]};
+      color: ${$.branding["--branding-550"]};
     }
     &:disabled {
-      color: ${$.branding["--branding-100"]};
+      color: ${$.branding["--branding-200"]};
     }
   `,
   danger: b0`
-    background: ${$.danger["--danger-400"]};
+    background: ${$.danger["--danger-450"]};
     color: ${$.base["--background"]};
     border: none;
     &:hover {
@@ -2066,6 +2129,9 @@ const w = {
   ${({ size: a }) => Xt2[a]}
   ${({ variant: a }) => Qt2[a]}
 
+  width: ${({ width: a }) => a || "auto"};
+  height: ${({ height: a }) => a || "auto"};
+
   &:disabled {
     cursor: not-allowed;
     opacity: 0.6;
@@ -80850,14 +80916,27 @@ const g2 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   isLoading: o = !1,
   leftIcon: i,
   rightIcon: s,
-  ...A
+  width: A,
+  height: v,
+  ...f
 }) => {
-  const v = i && g2[i], f = s && g2[s];
-  return /* @__PURE__ */ R.jsx(Yt2, { size: e, variant: t, radius: p, ...A, children: o ? /* @__PURE__ */ R.jsx(P2, { size: 16 }) : /* @__PURE__ */ R.jsxs(R.Fragment, { children: [
-    v && /* @__PURE__ */ R.jsx("span", { className: "icon-left", children: /* @__PURE__ */ R.jsx(v, { size: 16 }) }),
-    a,
-    f && /* @__PURE__ */ R.jsx("span", { className: "icon-right", children: /* @__PURE__ */ R.jsx(f, { size: 16 }) })
-  ] }) });
+  const Z = i && g2[i], h = s && g2[s];
+  return /* @__PURE__ */ R.jsx(
+    Yt2,
+    {
+      size: e,
+      variant: t,
+      radius: p,
+      width: A,
+      height: v,
+      ...f,
+      children: o ? /* @__PURE__ */ R.jsx(P2, { size: 16 }) : /* @__PURE__ */ R.jsxs(R.Fragment, { children: [
+        Z && /* @__PURE__ */ R.jsx("span", { className: "icon-left", children: /* @__PURE__ */ R.jsx(Z, { size: 16 }) }),
+        a,
+        h && /* @__PURE__ */ R.jsx("span", { className: "icon-right", children: /* @__PURE__ */ R.jsx(h, { size: 16 }) })
+      ] })
+    }
+  );
 }, mmt = {
   xs: K.xs,
   sm: K.sm,
@@ -80874,14 +80953,14 @@ const g2 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
 }, pmt = Q.div`
   display: flex;
   flex-direction: column;
-  gap: ${C["size-2"]};
+  gap: ${C["size-4"]};
 `, omt = Q.label`
-  font-size: ${C["size-3.5"]};
+  font-size: ${C["size-4"]};
   color: ${$.neutral["--neutral-500"]};
   font-weight: 500;
 `, imt = Q.span`
   font-size: ${C["size-3"]};
-  color: ${({ $error: a }) => a ? $.danger["--danger-400"] : $.neutral["--neutral-400"]};
+  color: ${({ $error: a }) => a ? $.danger["--danger-400"] : $.neutral["--neutral-450"]};
 `, umt = Q.div`
   display: flex;
   align-items: center;