@aivenio/aquarium 5.3.2 → 5.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/dist/atoms.cjs +32 -7
  2. package/dist/atoms.mjs +32 -7
  3. package/dist/src/atoms/Modal/Modal.d.ts +30 -0
  4. package/dist/src/atoms/Modal/Modal.js +33 -8
  5. package/dist/src/icons/index.d.ts +2 -0
  6. package/dist/src/icons/index.js +3 -1
  7. package/dist/src/icons/zoomIn.d.ts +8 -0
  8. package/dist/src/icons/zoomIn.js +9 -0
  9. package/dist/src/icons/zoomOut.d.ts +8 -0
  10. package/dist/src/icons/zoomOut.js +9 -0
  11. package/dist/src/molecules/Dialog/Dialog.js +2 -2
  12. package/dist/styles.css +27 -13
  13. package/dist/system.cjs +33 -8
  14. package/dist/system.mjs +33 -8
  15. package/dist/tsconfig.module.tsbuildinfo +1 -1
  16. package/package.json +1 -1
package/dist/system.cjs CHANGED
@@ -11184,8 +11184,8 @@ var modalStyles = (0, import_tailwind_variants24.tv)({
11184
11184
  variants: {
11185
11185
  kind: {
11186
11186
  dialog: {
11187
- overlay: "py-7 justify-center flex items-center",
11188
- dialog: "relative w-full rounded mx-7"
11187
+ overlay: "justify-center flex items-center",
11188
+ dialog: "relative"
11189
11189
  },
11190
11190
  drawer: {
11191
11191
  overlay: "overflow-x-hidden",
@@ -11204,6 +11204,10 @@ var modalStyles = (0, import_tailwind_variants24.tv)({
11204
11204
  bodyContent: "pt-6"
11205
11205
  }
11206
11206
  },
11207
+ isResponsive: {
11208
+ true: "",
11209
+ false: ""
11210
+ },
11207
11211
  noFooter: {
11208
11212
  true: {
11209
11213
  bodyContent: "pb-4"
@@ -11218,19 +11222,40 @@ var modalStyles = (0, import_tailwind_variants24.tv)({
11218
11222
  }
11219
11223
  }
11220
11224
  },
11225
+ defaultVariants: {
11226
+ isResponsive: true
11227
+ },
11221
11228
  compoundVariants: [
11229
+ {
11230
+ kind: "dialog",
11231
+ size: ["sm", "md", "full"],
11232
+ isResponsive: true,
11233
+ class: {
11234
+ overlay: "py-0 sm:py-7",
11235
+ dialog: "w-dvw h-dvh mx-0 rounded-none sm:h-auto sm:w-full sm:rounded sm:mx-7"
11236
+ }
11237
+ },
11238
+ {
11239
+ kind: "dialog",
11240
+ size: ["sm", "md", "full"],
11241
+ isResponsive: false,
11242
+ class: {
11243
+ overlay: "py-0",
11244
+ dialog: "h-auto w-full rounded mx-7"
11245
+ }
11246
+ },
11222
11247
  {
11223
11248
  kind: "dialog",
11224
11249
  size: "sm",
11225
11250
  class: {
11226
- dialog: "max-w-[600px]"
11251
+ dialog: "sm:max-w-[600px]"
11227
11252
  }
11228
11253
  },
11229
11254
  {
11230
11255
  kind: "dialog",
11231
11256
  size: "md",
11232
11257
  class: {
11233
- dialog: "max-w-[940px]"
11258
+ dialog: "sm:max-w-[940px]"
11234
11259
  }
11235
11260
  },
11236
11261
  {
@@ -11238,7 +11263,7 @@ var modalStyles = (0, import_tailwind_variants24.tv)({
11238
11263
  size: "full",
11239
11264
  class: {
11240
11265
  // Max width is max screen content width (1536px) + left and right paddings (32px each)
11241
- dialog: "min-h-full max-w-[1600px]"
11266
+ dialog: "min-h-full sm:max-w-[1600px]"
11242
11267
  }
11243
11268
  },
11244
11269
  {
@@ -11279,8 +11304,8 @@ Modal.BackDrop = ({ className, ...rest }) => {
11279
11304
  return /* @__PURE__ */ import_react99.default.createElement("div", { ...rest, className: backdrop({ className }) });
11280
11305
  };
11281
11306
  Modal.Dialog = import_react99.default.forwardRef(
11282
- ({ kind = "dialog", children, className, size = "md", ...rest }, ref) => {
11283
- const { dialog } = modalStyles({ kind, size });
11307
+ ({ kind = "dialog", children, className, size = "md", isResponsive = true, ...rest }, ref) => {
11308
+ const { dialog } = modalStyles({ kind, size, isResponsive });
11284
11309
  return /* @__PURE__ */ import_react99.default.createElement("div", { ref, "aria-modal": "true", ...rest, className: dialog({ className }) }, children);
11285
11310
  }
11286
11311
  );
@@ -11331,7 +11356,7 @@ var Dialog2 = (props) => {
11331
11356
  if (!state.isOpen) {
11332
11357
  return null;
11333
11358
  }
11334
- return /* @__PURE__ */ import_react100.default.createElement(import_overlays6.Overlay, null, /* @__PURE__ */ import_react100.default.createElement(Modal, { className: "Aquarium-Dialog", open: true }, /* @__PURE__ */ import_react100.default.createElement(Modal.BackDrop, { ...underlayProps }), /* @__PURE__ */ import_react100.default.createElement(Modal.Dialog, { ref, size: "sm", ...modalProps }, /* @__PURE__ */ import_react100.default.createElement(DialogWrapper, { ...props }))));
11359
+ return /* @__PURE__ */ import_react100.default.createElement(import_overlays6.Overlay, null, /* @__PURE__ */ import_react100.default.createElement(Modal, { className: "Aquarium-Dialog", open: true }, /* @__PURE__ */ import_react100.default.createElement(Modal.BackDrop, { ...underlayProps }), /* @__PURE__ */ import_react100.default.createElement(Modal.Dialog, { ref, size: "sm", isResponsive: false, ...modalProps }, /* @__PURE__ */ import_react100.default.createElement(DialogWrapper, { ...props }))));
11335
11360
  };
11336
11361
  var DialogWrapper = ({
11337
11362
  title,
package/dist/system.mjs CHANGED
@@ -11063,8 +11063,8 @@ var modalStyles = tv24({
11063
11063
  variants: {
11064
11064
  kind: {
11065
11065
  dialog: {
11066
- overlay: "py-7 justify-center flex items-center",
11067
- dialog: "relative w-full rounded mx-7"
11066
+ overlay: "justify-center flex items-center",
11067
+ dialog: "relative"
11068
11068
  },
11069
11069
  drawer: {
11070
11070
  overlay: "overflow-x-hidden",
@@ -11083,6 +11083,10 @@ var modalStyles = tv24({
11083
11083
  bodyContent: "pt-6"
11084
11084
  }
11085
11085
  },
11086
+ isResponsive: {
11087
+ true: "",
11088
+ false: ""
11089
+ },
11086
11090
  noFooter: {
11087
11091
  true: {
11088
11092
  bodyContent: "pb-4"
@@ -11097,19 +11101,40 @@ var modalStyles = tv24({
11097
11101
  }
11098
11102
  }
11099
11103
  },
11104
+ defaultVariants: {
11105
+ isResponsive: true
11106
+ },
11100
11107
  compoundVariants: [
11108
+ {
11109
+ kind: "dialog",
11110
+ size: ["sm", "md", "full"],
11111
+ isResponsive: true,
11112
+ class: {
11113
+ overlay: "py-0 sm:py-7",
11114
+ dialog: "w-dvw h-dvh mx-0 rounded-none sm:h-auto sm:w-full sm:rounded sm:mx-7"
11115
+ }
11116
+ },
11117
+ {
11118
+ kind: "dialog",
11119
+ size: ["sm", "md", "full"],
11120
+ isResponsive: false,
11121
+ class: {
11122
+ overlay: "py-0",
11123
+ dialog: "h-auto w-full rounded mx-7"
11124
+ }
11125
+ },
11101
11126
  {
11102
11127
  kind: "dialog",
11103
11128
  size: "sm",
11104
11129
  class: {
11105
- dialog: "max-w-[600px]"
11130
+ dialog: "sm:max-w-[600px]"
11106
11131
  }
11107
11132
  },
11108
11133
  {
11109
11134
  kind: "dialog",
11110
11135
  size: "md",
11111
11136
  class: {
11112
- dialog: "max-w-[940px]"
11137
+ dialog: "sm:max-w-[940px]"
11113
11138
  }
11114
11139
  },
11115
11140
  {
@@ -11117,7 +11142,7 @@ var modalStyles = tv24({
11117
11142
  size: "full",
11118
11143
  class: {
11119
11144
  // Max width is max screen content width (1536px) + left and right paddings (32px each)
11120
- dialog: "min-h-full max-w-[1600px]"
11145
+ dialog: "min-h-full sm:max-w-[1600px]"
11121
11146
  }
11122
11147
  },
11123
11148
  {
@@ -11158,8 +11183,8 @@ Modal.BackDrop = ({ className, ...rest }) => {
11158
11183
  return /* @__PURE__ */ React90.createElement("div", { ...rest, className: backdrop({ className }) });
11159
11184
  };
11160
11185
  Modal.Dialog = React90.forwardRef(
11161
- ({ kind = "dialog", children, className, size = "md", ...rest }, ref) => {
11162
- const { dialog } = modalStyles({ kind, size });
11186
+ ({ kind = "dialog", children, className, size = "md", isResponsive = true, ...rest }, ref) => {
11187
+ const { dialog } = modalStyles({ kind, size, isResponsive });
11163
11188
  return /* @__PURE__ */ React90.createElement("div", { ref, "aria-modal": "true", ...rest, className: dialog({ className }) }, children);
11164
11189
  }
11165
11190
  );
@@ -11210,7 +11235,7 @@ var Dialog2 = (props) => {
11210
11235
  if (!state.isOpen) {
11211
11236
  return null;
11212
11237
  }
11213
- return /* @__PURE__ */ React91.createElement(Overlay, null, /* @__PURE__ */ React91.createElement(Modal, { className: "Aquarium-Dialog", open: true }, /* @__PURE__ */ React91.createElement(Modal.BackDrop, { ...underlayProps }), /* @__PURE__ */ React91.createElement(Modal.Dialog, { ref, size: "sm", ...modalProps }, /* @__PURE__ */ React91.createElement(DialogWrapper, { ...props }))));
11238
+ return /* @__PURE__ */ React91.createElement(Overlay, null, /* @__PURE__ */ React91.createElement(Modal, { className: "Aquarium-Dialog", open: true }, /* @__PURE__ */ React91.createElement(Modal.BackDrop, { ...underlayProps }), /* @__PURE__ */ React91.createElement(Modal.Dialog, { ref, size: "sm", isResponsive: false, ...modalProps }, /* @__PURE__ */ React91.createElement(DialogWrapper, { ...props }))));
11214
11239
  };
11215
11240
  var DialogWrapper = ({
11216
11241
  title,