maru_design2 3.3.1 → 3.3.2

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 (11) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/components/common/datePicker/TimeColumn.d.ts +2 -1
  3. package/dist/components/common/datePicker/TimePanel.d.ts +3 -1
  4. package/dist/components/common/datePicker/date-picker-utils.d.ts +3 -0
  5. package/dist/components/molecules/dateRangePicker/DateRangeContent.d.ts +1 -1
  6. package/dist/components/molecules/dateRangePicker/types.d.ts +7 -1
  7. package/dist/components/molecules/multiSelectDropdown/MultiSelectDropdown.d.ts +3 -2
  8. package/dist/constants/color.d.ts +2 -0
  9. package/dist/constants/figmaColor.d.ts +1 -0
  10. package/dist/index.js +160 -51
  11. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # Changelog
2
2
 
3
+ ## [3.3.2](https://github.com/42maru-ai/maru-design2/compare/v3.3.1...v3.3.2) (2026-10-02)
4
+
5
+
6
+ ### Bug Fixes
7
+
8
+ * add minStartDateTime to DateRangePicker ([3afd992](https://github.com/42maru-ai/maru-design2/commit/3afd99216c09b4197fa6b29c388492163170acb9))
9
+ * constrain same-day date range time selections ([0d9b005](https://github.com/42maru-ai/maru-design2/commit/0d9b00528cee95f2242bed88fbfcb64b09da2568))
10
+ * hide calendar time toggle when time is required ([680e1ac](https://github.com/42maru-ai/maru-design2/commit/680e1acf00240f0e5760d79564fb14eebdc57683))
11
+ * keep custom labels when selecting multiple items ([4153e34](https://github.com/42maru-ai/maru-design2/commit/4153e34ebc68267c2e56f7a56e015e1457c94c07))
12
+ * prioritize custom multi-select labels and align package version ([33b1235](https://github.com/42maru-ai/maru-design2/commit/33b12356a3631b2acc2ebd6badbb53b521c913f0))
13
+ * refine component styles and color tokens ([204f392](https://github.com/42maru-ai/maru-design2/commit/204f392d5737023e5de7edc5866814bd0d8253d9))
14
+ * refine toggle thumb shadow ([debfe4b](https://github.com/42maru-ai/maru-design2/commit/debfe4b39d6775700ef9a30d0428562300f713f1))
15
+ * restore component style changes to develop ([2dce5e3](https://github.com/42maru-ai/maru-design2/commit/2dce5e3155bf5d55ad1ab8d7936eeb41442bbe1c))
16
+ * tighten spacing between textarea content and actions ([7dd0c9a](https://github.com/42maru-ai/maru-design2/commit/7dd0c9a7b19269c8cc60e18adc7009ee96788616))
17
+ * validate selectable date range times across DST ([1431a49](https://github.com/42maru-ai/maru-design2/commit/1431a4934419b7ed6110d3e7dddee5514229f3cd))
18
+
3
19
  ## [3.3.1](https://github.com/42maru-ai/maru-design2/compare/v3.3.0...v3.3.1) (2026-09-21)
4
20
 
5
21
 
package/dist/components/common/datePicker/TimeColumn.d.ts CHANGED
@@ -1,7 +1,8 @@
1
1
  import React from 'react';
2
- export default function TimeColumn({ label, values, value, onSelect, }: {
2
+ export default function TimeColumn({ label, values, value, isDisabled, onSelect, }: {
3
3
  label: string;
4
4
  values: number[];
5
5
  value: number | null;
6
+ isDisabled?: (option: number) => boolean;
6
7
  onSelect: (nextValue: number) => void;
7
8
  }): React.JSX.Element;
package/dist/components/common/datePicker/TimePanel.d.ts CHANGED
@@ -4,9 +4,11 @@ import './date-picker.scss';
4
4
  interface Props {
5
5
  value: TimeParts;
6
6
  minuteStep: number;
7
+ minTimeInMinutes?: number;
8
+ maxTimeInMinutes?: number;
7
9
  amLabel: string;
8
10
  pmLabel: string;
9
11
  onChange: (value: TimeParts) => void;
10
12
  }
11
- export default function TimePanel({ value, minuteStep, amLabel, pmLabel, onChange, }: Props): React.JSX.Element;
13
+ export default function TimePanel({ value, minuteStep, minTimeInMinutes, maxTimeInMinutes, amLabel, pmLabel, onChange, }: Props): React.JSX.Element;
12
14
  export {};
package/dist/components/common/datePicker/date-picker-utils.d.ts CHANGED
@@ -7,5 +7,8 @@ export interface TimeParts {
7
7
  }
8
8
  export declare const parseTime: (time?: string) => TimeParts;
9
9
  export declare const formatTime: ({ period, hour, minute }: TimeParts) => string | undefined;
10
+ export declare const toDateTime: (date: Date | null, { period, hour, minute }: TimeParts) => Date | null;
11
+ export declare const ceilToMinute: (date: Date) => Date;
12
+ export declare const toMinuteOfDay: (hour: number, minute: number) => number;
10
13
  export declare const minuteOptions: (step: number, current: number | null) => number[];
11
14
  export declare const timeText: (time: TimeParts, amLabel?: string, pmLabel?: string) => string;
package/dist/components/molecules/dateRangePicker/DateRangeContent.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
2
  import type { DateRangePickerProps } from './types';
3
- export default function DateRangeContent({ startDate, endDate, timeValue, minStartDate, maxDate, showTime, minuteStep, startLabel, endLabel, amLabel, pmLabel, cancelButtonContent, saveButtonContent, validate, onSaveClick, onClose, }: Omit<DateRangePickerProps, 'children' | 'className'> & {
3
+ export default function DateRangeContent({ startDate, endDate, timeValue, minStartDate, minStartDateTime, maxDate, showTime, minuteStep, startLabel, endLabel, amLabel, pmLabel, cancelButtonContent, saveButtonContent, validate, onSaveClick, onClose, }: Omit<DateRangePickerProps, 'children' | 'className'> & {
4
4
  onClose: () => void;
5
5
  }): React.JSX.Element;
package/dist/components/molecules/dateRangePicker/types.d.ts CHANGED
@@ -11,8 +11,14 @@ export interface DateRangePickerProps {
11
11
  setOpen: () => void;
12
12
  open: boolean;
13
13
  }) => React.ReactNode;
14
- /** 선택 가능한 첫 날짜. 날짜 단위로 제한합니다. */
14
+ /** 선택 가능한 첫 날짜. 시각을 제외한 날짜 단위로 제한합니다. */
15
15
  minStartDate?: Date | null;
16
+ /**
17
+ * 시작·종료의 최소 로컬 날짜·시간.
18
+ * minStartDate와 함께 지정하면 minStartDate보다 우선합니다.
19
+ * showTime=true이면 초·밀리초를 다음 분으로 올려 시각까지 제한하며, false이면 날짜만 제한합니다.
20
+ */
21
+ minStartDateTime?: Date | null;
16
22
  /** 선택 가능한 마지막 날짜. 날짜 단위로 제한합니다. */
17
23
  maxDate?: Date | null;
18
24
  /** 시간 선택 표시. 기본값 true. 표시하면 시작·종료 시간이 모두 있어야 저장합니다. */
package/dist/components/molecules/multiSelectDropdown/MultiSelectDropdown.d.ts CHANGED
@@ -20,12 +20,13 @@ export interface MultiSelectDropdownProps<T extends Record<string, any>> {
20
20
  */
21
21
  displayKey: string;
22
22
  /**
23
- * 드롭다운 버튼에 노출할 컨텐츠
23
+ * 선택 항목이 있을 때 모든 variant의 버튼에 우선 표시할 내용.
24
+ * null 또는 undefined이면 항목명이나 선택 개수 요약을 사용합니다.
24
25
  */
25
26
  content?: React.ReactNode;
26
27
  /** Optional visual variant; default preserves the existing control. */
27
28
  variant?: DropdownVariant;
28
- /** Called only for two or more selections. No built-in language or i18n dependency. */
29
+ /** content가 없고 2개 이상 선택했을 때만 호출하는 개수 요약 함수. */
29
30
  formatSelectedCount?: (count: number) => React.ReactNode;
30
31
  actionContent?: React.ReactNode;
31
32
  onAction?: () => void;
package/dist/constants/color.d.ts CHANGED
@@ -39,6 +39,7 @@ export declare const PRIMITIVE_COLOR_TOKEN_VALUES: {
39
39
  readonly blue800: "var(--maru-blue-800)";
40
40
  readonly blue900: "var(--maru-blue-900)";
41
41
  readonly blueA100: "var(--maru-blue-a100)";
42
+ readonly blueA200: "var(--maru-blue-a200)";
42
43
  readonly brand100: "var(--maru-brand-100)";
43
44
  readonly brand1000: "var(--maru-brand-1000)";
44
45
  readonly brand200: "var(--maru-brand-200)";
@@ -518,6 +519,7 @@ export declare const COLOR_TOKEN_VALUES: {
518
519
  readonly blue800: "var(--maru-blue-800)";
519
520
  readonly blue900: "var(--maru-blue-900)";
520
521
  readonly blueA100: "var(--maru-blue-a100)";
522
+ readonly blueA200: "var(--maru-blue-a200)";
521
523
  readonly brand100: "var(--maru-brand-100)";
522
524
  readonly brand1000: "var(--maru-brand-1000)";
523
525
  readonly brand200: "var(--maru-brand-200)";
package/dist/constants/figmaColor.d.ts CHANGED
@@ -39,6 +39,7 @@ export declare const FIGMA_PRIMITIVE_COLOR_TOKEN_VALUES: {
39
39
  readonly blue800: "var(--maru-blue-800)";
40
40
  readonly blue900: "var(--maru-blue-900)";
41
41
  readonly blueA100: "var(--maru-blue-a100)";
42
+ readonly blueA200: "var(--maru-blue-a200)";
42
43
  readonly brand100: "var(--maru-brand-100)";
43
44
  readonly brand1000: "var(--maru-brand-1000)";
44
45
  readonly brand200: "var(--maru-brand-200)";
package/dist/index.js CHANGED
@@ -125,7 +125,7 @@ function styleInject(css, ref) {
125
125
  var css_248z$v = "* {\n /* HTML5 display-role reset for older browsers */\n}\n* html,\n* body,\n* div,\n* span,\n* applet,\n* object,\n* iframe,\n* h1,\n* h2,\n* h3,\n* h4,\n* h5,\n* h6,\n* p,\n* blockquote,\n* pre,\n* a,\n* abbr,\n* acronym,\n* address,\n* big,\n* cite,\n* code,\n* del,\n* dfn,\n* em,\n* img,\n* ins,\n* kbd,\n* q,\n* s,\n* samp,\n* small,\n* strike,\n* strong,\n* sub,\n* sup,\n* tt,\n* var,\n* b,\n* u,\n* i,\n* center,\n* dl,\n* dt,\n* dd,\n* ol,\n* ul,\n* li,\n* fieldset,\n* form,\n* label,\n* legend,\n* table,\n* caption,\n* tbody,\n* tfoot,\n* thead,\n* tr,\n* th,\n* td,\n* article,\n* aside,\n* canvas,\n* details,\n* embed,\n* figure,\n* figcaption,\n* footer,\n* header,\n* hgroup,\n* menu,\n* nav,\n* output,\n* ruby,\n* section,\n* summary,\n* time,\n* mark,\n* audio,\n* video {\n padding: 0;\n border: 0;\n margin: 0;\n font: inherit;\n font-size: 100%;\n vertical-align: baseline;\n}\n* article,\n* aside,\n* details,\n* figcaption,\n* figure,\n* footer,\n* header,\n* hgroup,\n* menu,\n* nav,\n* section {\n display: block;\n}\n* ol,\n* ul {\n list-style: none;\n}\n* blockquote,\n* q {\n quotes: none;\n}\n* blockquote::before,\n* blockquote::after,\n* q::before,\n* q::after {\n content: \"\";\n content: none;\n}\n* table {\n border-collapse: collapse;\n border-spacing: 0;\n}\n* html {\n box-sizing: border-box;\n}\n* *,\n* *::before,\n* *::after {\n box-sizing: inherit;\n}";
126
126
  styleInject(css_248z$v);
127
127
 
128
- var css_248z$u = ".scrollbar, * {\n scrollbar-track-color: var(--maru-background-quaternary);\n scrollbar-arrow-color: var(--maru-background-quaternary);\n scrollbar-3dlight-color: var(--maru-background-quaternary);\n scrollbar-highlight-color: var(--maru-background-quaternary);\n scrollbar-shadow-color: var(--maru-background-quaternary);\n scrollbar-face-color: var(--maru-background-quaternary);\n}\n\n.scrollbar::-webkit-scrollbar, ::-webkit-scrollbar {\n background: inherit;\n width: 6px;\n height: 6px;\n}\n\n.scrollbar::-webkit-scrollbar-track, ::-webkit-scrollbar-track {\n background: none;\n}\n\n.scrollbar::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb {\n background-color: var(--maru-background-quaternary);\n border-radius: 16px;\n}\n\n.scrollbar::-webkit-scrollbar-button, ::-webkit-scrollbar-button {\n display: none;\n}\n\n* {\n -webkit-font-smoothing: antialiased;\n}\n\n:root {\n --maru-amber-100: #ffecb3;\n --maru-amber-200: #ffe082;\n --maru-amber-300: #ffd54f;\n --maru-amber-400: #ffca28;\n --maru-amber-50: #fff8e1;\n --maru-amber-500: #ffc107;\n --maru-amber-600: #ffb300;\n --maru-amber-700: #ffa000;\n --maru-amber-800: #ff8f00;\n --maru-amber-900: #ff6f00;\n --maru-amber-a100: #ffe57f;\n --maru-amber-a200: #ffd740;\n --maru-amber-a400: #ffc400;\n --maru-amber-a700: #ffab00;\n --maru-background-black: var(--maru-black-900);\n --maru-background-brand-primary: var(--maru-white);\n --maru-background-brand-quaternary: var(--maru-brand-a200);\n --maru-background-brand-secondary: var(--maru-brand-100);\n --maru-background-brand-secondary-hover: var(--maru-brand-200);\n --maru-background-brand-solid-primary: var(--maru-brand-400);\n --maru-background-brand-solid-primary-hover: var(--maru-brand-500);\n --maru-background-brand-solid-secondary: var(--maru-brand-600);\n --maru-background-brand-tertiary-hover: var(--maru-brand-50);\n --maru-background-disabled: var(--maru-black-300);\n --maru-background-error-primary: var(--maru-white);\n --maru-background-error-primary-hover: var(--maru-red-50);\n --maru-background-error-solid-primary: var(--maru-red-400);\n --maru-background-error-solid-primary-hover: var(--maru-red-500);\n --maru-background-info-secondary: var(--maru-white);\n --maru-background-info-secondary-hover: var(--maru-blue-100);\n --maru-background-info-solid-primary: var(--maru-blue-400);\n --maru-background-info-solid-primary-hover: var(--maru-blue-500);\n --maru-background-popup-primary: #e5e5e552;\n --maru-background-positive-primary: var(--maru-white);\n --maru-background-positive-primary-hover: var(--maru-green-100);\n --maru-background-positive-solid-primary: var(--maru-green-400);\n --maru-background-positive-solid-primary-hover: var(--maru-green-500);\n --maru-background-primary: var(--maru-white);\n --maru-background-primary-hover: var(--maru-black-150);\n --maru-background-quaternary: var(--maru-black-200);\n --maru-background-secondary: var(--maru-black-100);\n --maru-background-secondary-hover: var(--maru-black-150);\n --maru-background-service-ai-primary: var(--maru-slate-50);\n --maru-background-service-ai-secondary: var(--maru-slate-100);\n --maru-background-service-ai-secondary-hover: var(--maru-slate-200);\n --maru-background-service-ai-tertiary: var(--maru-slate-150);\n --maru-background-tertiary: var(--maru-black-150);\n --maru-background-warning-primary: var(--maru-white);\n --maru-background-warning-primary-hover: var(--maru-yellow-50);\n --maru-background-warning-solid-primary: var(--maru-yellow-400);\n --maru-background-warning-solid-primary-hover: var(--maru-yellow-500);\n --maru-badge-brand-primary: var(--maru-brand-50);\n --maru-badge-brand-primary-hover: var(--maru-brand-100);\n --maru-badge-error-primary: var(--maru-red-100);\n --maru-badge-positive-primary: var(--maru-green-50);\n --maru-badge-primary: var(--maru-black-100);\n --maru-badge-primary-hover: var(--maru-black-150);\n --maru-badge-secondary: var(--maru-black-150);\n --maru-badge-secondary-hover: var(--maru-black-200);\n --maru-black-100: #fafafa;\n --maru-black-150: #f5f5f5;\n --maru-black-200: #eaeaea;\n --maru-black-250: #e1e1e1;\n --maru-black-300: #cfcfcf;\n --maru-black-350: #a9a9a9;\n --maru-black-400: #828588;\n --maru-black-50: #fcfdfd;\n --maru-black-500: #5c5c5c;\n --maru-black-550: #3d3d3d;\n --maru-black-600: #2c2c2c;\n --maru-black-700: #262626;\n --maru-black-800: #1f1f1f;\n --maru-black-900: #0d0d0d;\n --maru-blue-100: #eaf3fa;\n --maru-blue-1000: #113047;\n --maru-blue-200: #d6e8f5;\n --maru-blue-300: #97c5e5;\n --maru-blue-400: #308acc;\n --maru-blue-50: #f5f9fd;\n --maru-blue-500: #2b7cb8;\n --maru-blue-600: #266ea3;\n --maru-blue-700: #246899;\n --maru-blue-800: #1d537a;\n --maru-blue-900: #163e5c;\n --maru-blue-a100: #c2d9eb;\n --maru-border-black-primary: var(--maru-black-800);\n --maru-border-brand-primary: var(--maru-brand-400);\n --maru-border-brand-quaternary: var(--maru-brand-300);\n --maru-border-brand-secondary: var(--maru-brand-500);\n --maru-border-brand-tertiary: var(--maru-brand-800);\n --maru-border-error-ac-primary: var(--maru-red-a200);\n --maru-border-error-ac-secondary: var(--maru-red-300);\n --maru-border-error-primary: var(--maru-red-500);\n --maru-border-error-secondary: var(--maru-red-400);\n --maru-border-primary: var(--maru-black-300);\n --maru-border-secondary: var(--maru-black-250);\n --maru-border-service-ai-primary: var(--maru-slate-200);\n --maru-border-service-ai-secondary: var(--maru-black-250);\n --maru-border-success-ac-primary: var(--maru-green-300);\n --maru-border-success-primary: var(--maru-green-400);\n --maru-border-tertiary: var(--maru-black-150);\n --maru-border-warning-ac-primary: var(--maru-yellow-ac-600);\n --maru-border-warning-ac-secondary: var(--maru-yellow-ac-300);\n --maru-border-warning-primary: var(--maru-yellow-400);\n --maru-border-warning-secondary: var(--maru-yellow-500);\n --maru-brand-100: #e3edf6;\n --maru-brand-1000: #051b2d;\n --maru-brand-200: #dbe4ec;\n --maru-brand-300: #b5c8d8;\n --maru-brand-400: #0f4c81;\n --maru-brand-50: #f0f6fb;\n --maru-brand-500: #0e4474;\n --maru-brand-600: #0c3d67;\n --maru-brand-700: #0b3961;\n --maru-brand-800: #092e4d;\n --maru-brand-900: #07223a;\n --maru-brand-a100: #001a63;\n --maru-brand-a200: #edf6fd;\n --maru-brand-a300: #1956bf;\n --maru-component-amber-primary: var(--maru-amber-700);\n --maru-component-amber-secondary: var(--maru-amber-100);\n --maru-component-blue-primary: var(--maru-blue-400);\n --maru-component-blue-secondary: var(--maru-blue-a100);\n --maru-component-blue-tertiary: var(--maru-blue-100);\n --maru-component-brand-primary: var(--maru-brand-400);\n --maru-component-error: var(--maru-red-400);\n --maru-component-green-a: var(--maru-green-a400);\n --maru-component-green-primary: var(--maru-green-400);\n --maru-component-green-secondary: var(--maru-green-100);\n --maru-component-pink-primary: var(--maru-pink-300);\n --maru-component-pink-secondary: var(--maru-pink-50);\n --maru-component-purple-primary: var(--maru-purple-300);\n --maru-component-purple-secondary: var(--maru-purple-50);\n --maru-component-white: var(--maru-white);\n --maru-component-yellow-100: #fff9c4;\n --maru-component-yellow-200: #fff59d;\n --maru-component-yellow-300: #fff176;\n --maru-component-yellow-400: #ffee58;\n --maru-component-yellow-50: #fffde7;\n --maru-component-yellow-500: #ffeb3b;\n --maru-component-yellow-600: #fdd835;\n --maru-component-yellow-700: #fbc02d;\n --maru-component-yellow-800: #f9a825;\n --maru-component-yellow-900: #f57f17;\n --maru-component-yellow-a100: #ffff8d;\n --maru-component-yellow-a200: #ffff00;\n --maru-component-yellow-a400: #ffea00;\n --maru-component-yellow-a700: #ffd600;\n --maru-cool-gray-100: #eff3f6;\n --maru-cool-gray-200: #29569814;\n --maru-cool-gray-50: #f6f8f9;\n --maru-feature-highlight: var(--maru-yellow-300);\n --maru-feature-tooltip: var(--maru-black-900);\n --maru-gray-100: #f2f4f8;\n --maru-gray-150: #d3d8dd;\n --maru-gray-200: #c1c7cd;\n --maru-gray-300: #a2a9b0;\n --maru-gray-400: #878d96;\n --maru-gray-500: #737a80;\n --maru-gray-600: #4a4e52;\n --maru-gray-700: #3d4145;\n --maru-gray-800: #262626;\n --maru-gray-900: #1f1f1f;\n --maru-green-100: #e1fff3;\n --maru-green-1000: #063723;\n --maru-green-200: #bbf3e2;\n --maru-green-300: #80d3bc;\n --maru-green-400: #119d63;\n --maru-green-50: #ebfff7;\n --maru-green-500: #0f8d59;\n --maru-green-600: #0e7e4f;\n --maru-green-700: #0d764a;\n --maru-green-800: #0a5e3b;\n --maru-green-900: #08472d;\n --maru-green-a100: #b9f6ca;\n --maru-green-a200: #69f0ae;\n --maru-green-a400: #00e676;\n --maru-green-a700: #00c853;\n --maru-icon-brand-primary: var(--maru-brand-400);\n --maru-icon-brand-quaternary: var(--maru-brand-a300);\n --maru-icon-brand-secondary: var(--maru-brand-500);\n --maru-icon-brand-tertiary: var(--maru-brand-800);\n --maru-icon-error-primary: var(--maru-red-400);\n --maru-icon-error-secondary: var(--maru-red-500);\n --maru-icon-positive-primary: var(--maru-green-400);\n --maru-icon-primary: var(--maru-black-600);\n --maru-icon-quaternary: var(--maru-black-350);\n --maru-icon-secondary: var(--maru-black-500);\n --maru-icon-tertiary: var(--maru-black-400);\n --maru-icon-warning-primary: var(--maru-yellow-400);\n --maru-icon-white: var(--maru-white);\n --maru-lime-100: #f0f4c3;\n --maru-lime-200: #e6ee9c;\n --maru-lime-300: #dce775;\n --maru-lime-400: #d4e157;\n --maru-lime-50: #f9fbe7;\n --maru-lime-500: #cddc39;\n --maru-lime-600: #c0ca33;\n --maru-lime-700: #afb42b;\n --maru-lime-800: #9e9d24;\n --maru-lime-900: #827717;\n --maru-lime-a100: #f4ff81;\n --maru-lime-a200: #eeff41;\n --maru-lime-a400: #c6ff00;\n --maru-lime-a700: #aeea00;\n --maru-neutral-gray-100: #48484812;\n --maru-neutral-gray-200: #d5d5d5;\n --maru-pattern-primary: #cfe0efad;\n --maru-pattern-secondary: #cfe0ef69;\n --maru-pink-100: #f8bbd0;\n --maru-pink-200: #f48fb1;\n --maru-pink-300: #f06292;\n --maru-pink-400: #ec407a;\n --maru-pink-50: #fce4ec;\n --maru-pink-500: #e91e63;\n --maru-pink-600: #d81b60;\n --maru-pink-700: #c2185b;\n --maru-pink-800: #ad1457;\n --maru-pink-900: #880e4f;\n --maru-pink-a100: #ff80ab;\n --maru-pink-a200: #ff4081;\n --maru-pink-a400: #f50057;\n --maru-pink-a700: #c51162;\n --maru-purple-100: #e1bee7;\n --maru-purple-200: #ce93d8;\n --maru-purple-300: #ba68c8;\n --maru-purple-400: #ab47bc;\n --maru-purple-50: #f3e5f5;\n --maru-purple-500: #9c27b0;\n --maru-purple-600: #8e24aa;\n --maru-purple-700: #7b1fa2;\n --maru-purple-800: #6a1b9a;\n --maru-purple-900: #4a148c;\n --maru-red-100: #fbe8e8;\n --maru-red-1000: #4c0808;\n --maru-red-200: #f9dcdc;\n --maru-red-300: #f3b7b7;\n --maru-red-400: #d91616;\n --maru-red-50: #fdf4f4;\n --maru-red-500: #c31414;\n --maru-red-600: #ae1212;\n --maru-red-700: #a31111;\n --maru-red-800: #820d0d;\n --maru-red-900: #620a0a;\n --maru-red-a100: #ff8a80;\n --maru-red-a200: #ff5252;\n --maru-red-a400: #ff1744;\n --maru-red-a700: #d50000;\n --maru-shadow-brand: var(--maru-brand-100);\n --maru-shadow-search-bar: #4e4e4e0f;\n --maru-slate-100: #eff3f6;\n --maru-slate-1000: #171718;\n --maru-slate-150: #e8eef2;\n --maru-slate-200: #dee3ed;\n --maru-slate-300: #c3c8cd;\n --maru-slate-400: #abb2b8;\n --maru-slate-50: #f6f8f9;\n --maru-slate-500: #8d9499;\n --maru-slate-600: #71777c;\n --maru-slate-700: #575a5d;\n --maru-slate-800: #3b3e40;\n --maru-slate-850: #2e3132;\n --maru-slate-900: #242526;\n --maru-slate-950: #1b1c1d;\n --maru-slate-a100a: #eef1f7;\n --maru-slate-a200: #d9e5fd;\n --maru-slate-a300: #bfd9f8;\n --maru-slate-a400: #3f3f3f;\n --maru-teal-100: #b2dfdb;\n --maru-teal-200: #80cbc4;\n --maru-teal-300: #4db6ac;\n --maru-teal-400: #26a69a;\n --maru-teal-50: #e0f2f1;\n --maru-teal-500: #009688;\n --maru-teal-600: #00897b;\n --maru-teal-700: #00796b;\n --maru-teal-800: #00695c;\n --maru-teal-900: #004d40;\n --maru-teal-a100: #a7ffeb;\n --maru-teal-a200: #64ffda;\n --maru-teal-a400: #1de9b6;\n --maru-teal-a700: #00bfa5;\n --maru-text-brand: var(--maru-brand-400);\n --maru-text-brand-hover: var(--maru-brand-500);\n --maru-text-brand-white: var(--maru-white);\n --maru-text-disabled: var(--maru-black-350);\n --maru-text-error-primary: var(--maru-red-400);\n --maru-text-info-primary: var(--maru-blue-400);\n --maru-text-inverse-tooltip: var(--maru-white);\n --maru-text-positive-primary: var(--maru-green-400);\n --maru-text-primary: var(--maru-black-600);\n --maru-text-secondary: var(--maru-black-500);\n --maru-text-success-primary: var(--maru-green-400);\n --maru-text-support: var(--maru-black-400);\n --maru-text-tertiary: var(--maru-black-400);\n --maru-text-warning-primary: var(--maru-yellow-ac-900);\n --maru-text-white: var(--maru-white);\n --maru-white: #ffffff;\n --maru-yellow-100: #fff3de;\n --maru-yellow-1000: #593e0b;\n --maru-yellow-200: #ffe7ba;\n --maru-yellow-300: #ffd78f;\n --maru-yellow-400: #ffb020;\n --maru-yellow-50: #fff7e9;\n --maru-yellow-500: #e69e1d;\n --maru-yellow-600: #cc8d1a;\n --maru-yellow-700: #bf8418;\n --maru-yellow-800: #996a13;\n --maru-yellow-900: #734f0e;\n --maru-yellow-ac-100: #fff9c4;\n --maru-yellow-ac-200: #fff59d;\n --maru-yellow-ac-300: #fff176;\n --maru-yellow-ac-400: #ffee58;\n --maru-yellow-ac-50: #fffde7;\n --maru-yellow-ac-500: #ffeb3b;\n --maru-yellow-ac-600: #fdd835;\n --maru-yellow-ac-700: #fbc02d;\n --maru-yellow-ac-800: #f9a825;\n --maru-yellow-ac-900: #f57f17;\n --maru-yellow-ac-a100: #ffff8d;\n --maru-yellow-ac-a200: #ffff00;\n --maru-yellow-ac-a400: #ffea00;\n --maru-yellow-ac-a700: #ffd600;\n --maru-badge-info-primary: var(--maru-blue-100);\n --maru-shadow-default: var(--maru-black-350);\n --maru-overlay-scrim: var(--maru-background-popup-primary);\n --maru-skeleton-base: #f7f7f7;\n --maru-skeleton-highlight: #ececec;\n --maru-status-learning: #c1d881;\n --maru-status-learning-background: #f3f7e6;\n --maru-status-distribution: #91b9dd;\n --maru-status-distribution-background: #e9f1f8;\n --maru-status-service: #c591dd;\n --maru-status-service-background: #f3e9f8;\n --maru-status-title: #2754aa;\n --maru-info-50-per: rgba(48, 138, 204, 0.5);\n --maru-info-20-per: rgba(48, 138, 204, 0.2);\n --maru-info-10-per: rgba(48, 138, 204, 0.1);\n --maru-warning-50-per: rgba(255, 176, 32, 0.5);\n --maru-warning-20-per: rgba(255, 176, 32, 0.2);\n --maru-warning-10-per: rgba(255, 176, 32, 0.1);\n --maru-error-50-per: rgba(217, 22, 22, 0.5);\n --maru-error-20-per: rgba(217, 22, 22, 0.2);\n --maru-error-10-per: rgba(217, 22, 22, 0.1);\n --maru-positive-50-per: rgba(17, 157, 99, 0.5);\n --maru-positive-20-per: rgba(17, 157, 99, 0.2);\n --maru-positive-10-per: rgba(17, 157, 99, 0.1);\n --p: var(--maru-brand-400);\n --p-80: var(--maru-brand-400);\n --p-50-per: rgba(15, 76, 129, 0.5);\n --p-50: var(--maru-brand-300);\n --p-20-per: rgba(15, 76, 129, 0.2);\n --p-20: var(--maru-brand-200);\n --p-10-per: rgba(15, 76, 129, 0.1);\n --p-10: var(--maru-brand-100);\n --p-07: var(--maru-brand-50);\n --p-05-per: rgba(15, 76, 129, 0.05);\n --p-05: var(--maru-brand-50);\n --primary: var(--p);\n --primary-80: var(--p-80);\n --primary-50-per: var(--p-50-per);\n --primary-50: var(--p-50);\n --primary-20-per: var(--p-20-per);\n --primary-20: var(--p-20);\n --primary-10-per: var(--p-10-per);\n --primary-10: var(--p-10);\n --primary-07: var(--p-07);\n --primary-05-per: var(--p-05-per);\n --primary-05: var(--p-05);\n}\n\n[data-theme=blue] {\n --maru-background-brand-secondary: var(--maru-blue-100);\n --maru-background-brand-secondary-hover: var(--maru-blue-200);\n --maru-background-brand-quaternary: var(--maru-blue-200);\n --maru-icon-brand-tertiary: var(--maru-blue-800);\n --maru-icon-brand-quaternary: var(--maru-blue-300);\n --maru-text-brand-white: var(--maru-white);\n --maru-border-brand-quaternary: var(--maru-blue-300);\n --maru-badge-brand-primary-hover: var(--maru-blue-200);\n --p: var(--maru-blue-400);\n --p-80: var(--maru-blue-400);\n --p-50-per: rgba(48, 138, 204, 0.5);\n --p-50: var(--maru-blue-300);\n --p-20-per: rgba(48, 138, 204, 0.2);\n --p-20: var(--maru-blue-200);\n --p-10-per: rgba(48, 138, 204, 0.1);\n --p-10: var(--maru-blue-100);\n --p-07: var(--maru-blue-50);\n --p-05-per: rgba(48, 138, 204, 0.05);\n --p-05: var(--maru-blue-50);\n --maru-text-brand: var(--maru-blue-400);\n --maru-text-brand-hover: var(--maru-blue-500);\n --maru-icon-brand-primary: var(--maru-blue-400);\n --maru-icon-brand-secondary: var(--maru-blue-500);\n --maru-border-brand-primary: var(--maru-blue-400);\n --maru-border-brand-secondary: var(--maru-blue-500);\n --maru-border-brand-tertiary: var(--maru-blue-300);\n --maru-background-brand-solid-primary: var(--maru-blue-400);\n --maru-background-brand-solid-primary-hover: var(--maru-blue-500);\n --maru-background-brand-solid-secondary: var(--maru-blue-600);\n --maru-background-brand-primary: var(--maru-blue-200);\n --maru-background-brand-tertiary-hover: var(--maru-blue-50);\n --maru-badge-brand-primary: var(--maru-blue-100);\n --maru-component-brand-primary: var(--maru-blue-400);\n --maru-shadow-brand: var(--maru-blue-200);\n}\n\n[data-theme=green] {\n --maru-background-brand-secondary: #e6f0e7;\n --maru-background-brand-secondary-hover: #cee0d0;\n --maru-background-brand-quaternary: #cee0d0;\n --maru-icon-brand-tertiary: #096412;\n --maru-icon-brand-quaternary: #84b188;\n --maru-text-brand-white: var(--maru-white);\n --maru-border-brand-quaternary: #84b188;\n --maru-badge-brand-primary-hover: #cee0d0;\n --p: #096412;\n --p-80: #096412;\n --p-50-per: rgba(9, 100, 18, 0.5019607843);\n --p-50: #84b188;\n --p-20-per: rgba(9, 100, 18, 0.2);\n --p-20: #cee0d0;\n --p-10-per: rgba(9, 100, 18, 0.1019607843);\n --p-10: #e6f0e7;\n --p-07: #eef4ee;\n --p-05-per: rgba(9, 100, 18, 0.0509803922);\n --p-05: #f3f7f3;\n --maru-text-brand: #096412;\n --maru-text-brand-hover: #096412;\n --maru-icon-brand-primary: #096412;\n --maru-icon-brand-secondary: #096412;\n --maru-border-brand-primary: #096412;\n --maru-border-brand-secondary: #096412;\n --maru-border-brand-tertiary: #84b188;\n --maru-background-brand-solid-primary: #096412;\n --maru-background-brand-solid-primary-hover: #096412;\n --maru-background-brand-solid-secondary: #096412;\n --maru-background-brand-primary: #cee0d0;\n --maru-background-brand-tertiary-hover: #f3f7f3;\n --maru-badge-brand-primary: #e6f0e7;\n --maru-component-brand-primary: #096412;\n --maru-shadow-brand: #cee0d0;\n}\n\n[data-theme=navy] {\n --maru-background-brand-primary: var(--maru-white);\n --maru-background-brand-quaternary: var(--maru-brand-a200);\n --maru-background-brand-secondary: var(--maru-brand-100);\n --maru-background-brand-secondary-hover: var(--maru-brand-200);\n --maru-background-brand-solid-primary: var(--maru-brand-400);\n --maru-background-brand-solid-primary-hover: var(--maru-brand-500);\n --maru-background-brand-solid-secondary: var(--maru-brand-600);\n --maru-background-brand-tertiary-hover: var(--maru-brand-50);\n --maru-badge-brand-primary: var(--maru-brand-50);\n --maru-badge-brand-primary-hover: var(--maru-brand-100);\n --maru-border-brand-primary: var(--maru-brand-400);\n --maru-border-brand-quaternary: var(--maru-brand-300);\n --maru-border-brand-secondary: var(--maru-brand-500);\n --maru-border-brand-tertiary: var(--maru-brand-800);\n --maru-component-brand-primary: var(--maru-brand-400);\n --maru-icon-brand-primary: var(--maru-brand-400);\n --maru-icon-brand-quaternary: var(--maru-brand-a300);\n --maru-icon-brand-secondary: var(--maru-brand-500);\n --maru-icon-brand-tertiary: var(--maru-brand-800);\n --maru-shadow-brand: var(--maru-brand-100);\n --maru-text-brand: var(--maru-brand-400);\n --maru-text-brand-hover: var(--maru-brand-500);\n --maru-text-brand-white: var(--maru-white);\n --p: var(--maru-brand-400);\n --p-80: var(--maru-brand-400);\n --p-50-per: rgba(15, 76, 129, 0.5);\n --p-50: var(--maru-brand-300);\n --p-20-per: rgba(15, 76, 129, 0.2);\n --p-20: var(--maru-brand-200);\n --p-10-per: rgba(15, 76, 129, 0.1);\n --p-10: var(--maru-brand-100);\n --p-07: var(--maru-brand-50);\n --p-05-per: rgba(15, 76, 129, 0.05);\n --p-05: var(--maru-brand-50);\n}";
128
+ var css_248z$u = ".scrollbar, * {\n scrollbar-track-color: var(--maru-background-quaternary);\n scrollbar-arrow-color: var(--maru-background-quaternary);\n scrollbar-3dlight-color: var(--maru-background-quaternary);\n scrollbar-highlight-color: var(--maru-background-quaternary);\n scrollbar-shadow-color: var(--maru-background-quaternary);\n scrollbar-face-color: var(--maru-background-quaternary);\n}\n\n.scrollbar::-webkit-scrollbar, ::-webkit-scrollbar {\n background: inherit;\n width: 6px;\n height: 6px;\n}\n\n.scrollbar::-webkit-scrollbar-track, ::-webkit-scrollbar-track {\n background: none;\n}\n\n.scrollbar::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb {\n background-color: var(--maru-background-quaternary);\n border-radius: 16px;\n}\n\n.scrollbar::-webkit-scrollbar-button, ::-webkit-scrollbar-button {\n display: none;\n}\n\n* {\n -webkit-font-smoothing: antialiased;\n}\n\n:root {\n --maru-amber-100: #ffecb3;\n --maru-amber-200: #ffe082;\n --maru-amber-300: #ffd54f;\n --maru-amber-400: #ffca28;\n --maru-amber-50: #fff8e1;\n --maru-amber-500: #ffc107;\n --maru-amber-600: #ffb300;\n --maru-amber-700: #ffa000;\n --maru-amber-800: #ff8f00;\n --maru-amber-900: #ff6f00;\n --maru-amber-a100: #ffe57f;\n --maru-amber-a200: #ffd740;\n --maru-amber-a400: #ffc400;\n --maru-amber-a700: #ffab00;\n --maru-background-black: var(--maru-black-900);\n --maru-background-brand-primary: var(--maru-white);\n --maru-background-brand-quaternary: var(--maru-brand-a200);\n --maru-background-brand-secondary: var(--maru-brand-100);\n --maru-background-brand-secondary-hover: var(--maru-brand-200);\n --maru-background-brand-solid-primary: var(--maru-brand-400);\n --maru-background-brand-solid-primary-hover: var(--maru-brand-500);\n --maru-background-brand-solid-secondary: var(--maru-brand-600);\n --maru-background-brand-tertiary-hover: var(--maru-brand-50);\n --maru-background-disabled: var(--maru-black-300);\n --maru-background-error-primary: var(--maru-white);\n --maru-background-error-primary-hover: var(--maru-red-50);\n --maru-background-error-solid-primary: var(--maru-red-400);\n --maru-background-error-solid-primary-hover: var(--maru-red-500);\n --maru-background-info-secondary: var(--maru-white);\n --maru-background-info-secondary-hover: var(--maru-blue-100);\n --maru-background-info-solid-primary: var(--maru-blue-400);\n --maru-background-info-solid-primary-hover: var(--maru-blue-500);\n --maru-background-popup-primary: #e5e5e552;\n --maru-background-positive-primary: var(--maru-white);\n --maru-background-positive-primary-hover: var(--maru-green-100);\n --maru-background-positive-solid-primary: var(--maru-green-400);\n --maru-background-positive-solid-primary-hover: var(--maru-green-500);\n --maru-background-primary: var(--maru-white);\n --maru-background-primary-hover: var(--maru-black-150);\n --maru-background-quaternary: var(--maru-black-200);\n --maru-background-secondary: var(--maru-black-100);\n --maru-background-secondary-hover: var(--maru-black-150);\n --maru-background-service-ai-primary: var(--maru-slate-50);\n --maru-background-service-ai-secondary: var(--maru-slate-100);\n --maru-background-service-ai-secondary-hover: var(--maru-slate-200);\n --maru-background-service-ai-tertiary: var(--maru-slate-150);\n --maru-background-tertiary: var(--maru-black-150);\n --maru-background-warning-primary: var(--maru-white);\n --maru-background-warning-primary-hover: var(--maru-yellow-50);\n --maru-background-warning-solid-primary: var(--maru-yellow-400);\n --maru-background-warning-solid-primary-hover: var(--maru-yellow-500);\n --maru-badge-brand-primary: var(--maru-brand-50);\n --maru-badge-brand-primary-hover: var(--maru-brand-100);\n --maru-badge-error-primary: var(--maru-red-100);\n --maru-badge-positive-primary: var(--maru-green-50);\n --maru-badge-primary: var(--maru-black-100);\n --maru-badge-primary-hover: var(--maru-black-150);\n --maru-badge-secondary: var(--maru-black-150);\n --maru-badge-secondary-hover: var(--maru-black-200);\n --maru-black-100: #fafafa;\n --maru-black-150: #f5f5f5;\n --maru-black-200: #eaeaea;\n --maru-black-250: #e1e1e1;\n --maru-black-300: #cfcfcf;\n --maru-black-350: #a9a9a9;\n --maru-black-400: #828588;\n --maru-black-50: #fcfdfd;\n --maru-black-500: #5c5c5c;\n --maru-black-550: #3d3d3d;\n --maru-black-600: #2c2c2c;\n --maru-black-700: #262626;\n --maru-black-800: #1f1f1f;\n --maru-black-900: #0d0d0d;\n --maru-blue-100: #eaf3fa;\n --maru-blue-1000: #113047;\n --maru-blue-200: #d6e8f5;\n --maru-blue-300: #97c5e5;\n --maru-blue-400: #308acc;\n --maru-blue-50: #f5f9fd;\n --maru-blue-500: #2b7cb8;\n --maru-blue-600: #266ea3;\n --maru-blue-700: #246899;\n --maru-blue-800: #1d537a;\n --maru-blue-900: #163e5c;\n --maru-blue-a100: #c2d9eb;\n --maru-blue-a200: #1a7bc1;\n --maru-border-black-primary: var(--maru-black-800);\n --maru-border-brand-primary: var(--maru-brand-400);\n --maru-border-brand-quaternary: var(--maru-brand-300);\n --maru-border-brand-secondary: var(--maru-brand-500);\n --maru-border-brand-tertiary: var(--maru-brand-800);\n --maru-border-error-ac-primary: var(--maru-red-a200);\n --maru-border-error-ac-secondary: var(--maru-red-300);\n --maru-border-error-primary: var(--maru-red-500);\n --maru-border-error-secondary: var(--maru-red-400);\n --maru-border-primary: var(--maru-black-300);\n --maru-border-secondary: var(--maru-black-250);\n --maru-border-service-ai-primary: var(--maru-slate-200);\n --maru-border-service-ai-secondary: var(--maru-black-250);\n --maru-border-success-ac-primary: var(--maru-green-300);\n --maru-border-success-primary: var(--maru-green-400);\n --maru-border-tertiary: var(--maru-black-150);\n --maru-border-warning-ac-primary: var(--maru-yellow-ac-600);\n --maru-border-warning-ac-secondary: var(--maru-yellow-ac-300);\n --maru-border-warning-primary: var(--maru-yellow-400);\n --maru-border-warning-secondary: var(--maru-yellow-500);\n --maru-brand-100: #e3edf6;\n --maru-brand-1000: #051b2d;\n --maru-brand-200: #dbe4ec;\n --maru-brand-300: #b5c8d8;\n --maru-brand-400: #0f4c81;\n --maru-brand-50: #f0f6fb;\n --maru-brand-500: #0e4474;\n --maru-brand-600: #0c3d67;\n --maru-brand-700: #0b3961;\n --maru-brand-800: #092e4d;\n --maru-brand-900: #07223a;\n --maru-brand-a100: #001a63;\n --maru-brand-a200: #edf6fd;\n --maru-brand-a300: #1956bf;\n --maru-component-amber-primary: var(--maru-amber-700);\n --maru-component-amber-secondary: var(--maru-amber-100);\n --maru-component-blue-primary: var(--maru-blue-400);\n --maru-component-blue-secondary: var(--maru-blue-a100);\n --maru-component-blue-tertiary: var(--maru-blue-100);\n --maru-component-brand-primary: var(--maru-brand-400);\n --maru-component-error: var(--maru-red-400);\n --maru-component-green-a: var(--maru-green-a400);\n --maru-component-green-primary: var(--maru-green-400);\n --maru-component-green-secondary: var(--maru-green-100);\n --maru-component-pink-primary: var(--maru-pink-300);\n --maru-component-pink-secondary: var(--maru-pink-50);\n --maru-component-purple-primary: var(--maru-purple-300);\n --maru-component-purple-secondary: var(--maru-purple-50);\n --maru-component-white: var(--maru-white);\n --maru-component-yellow-100: #fff9c4;\n --maru-component-yellow-200: #fff59d;\n --maru-component-yellow-300: #fff176;\n --maru-component-yellow-400: #ffee58;\n --maru-component-yellow-50: #fffde7;\n --maru-component-yellow-500: #ffeb3b;\n --maru-component-yellow-600: #fdd835;\n --maru-component-yellow-700: #fbc02d;\n --maru-component-yellow-800: #f9a825;\n --maru-component-yellow-900: #f57f17;\n --maru-component-yellow-a100: #ffff8d;\n --maru-component-yellow-a200: #ffff00;\n --maru-component-yellow-a400: #ffea00;\n --maru-component-yellow-a700: #ffd600;\n --maru-cool-gray-100: #eff3f6;\n --maru-cool-gray-200: #29569814;\n --maru-cool-gray-50: #f6f8f9;\n --maru-feature-highlight: var(--maru-yellow-300);\n --maru-feature-tooltip: var(--maru-black-900);\n --maru-gray-100: #f2f4f8;\n --maru-gray-150: #d3d8dd;\n --maru-gray-200: #c1c7cd;\n --maru-gray-300: #a2a9b0;\n --maru-gray-400: #878d96;\n --maru-gray-500: #737a80;\n --maru-gray-600: #4a4e52;\n --maru-gray-700: #3d4145;\n --maru-gray-800: #262626;\n --maru-gray-900: #1f1f1f;\n --maru-green-100: #e1fff3;\n --maru-green-1000: #063723;\n --maru-green-200: #bbf3e2;\n --maru-green-300: #80d3bc;\n --maru-green-400: #119d63;\n --maru-green-50: #ebfff7;\n --maru-green-500: #0f8d59;\n --maru-green-600: #0e7e4f;\n --maru-green-700: #0d764a;\n --maru-green-800: #0a5e3b;\n --maru-green-900: #08472d;\n --maru-green-a100: #b9f6ca;\n --maru-green-a200: #69f0ae;\n --maru-green-a400: #00e676;\n --maru-green-a700: #00c853;\n --maru-icon-brand-primary: var(--maru-brand-400);\n --maru-icon-brand-quaternary: var(--maru-brand-a300);\n --maru-icon-brand-secondary: var(--maru-brand-500);\n --maru-icon-brand-tertiary: var(--maru-brand-800);\n --maru-icon-error-primary: var(--maru-red-400);\n --maru-icon-error-secondary: var(--maru-red-500);\n --maru-icon-positive-primary: var(--maru-green-400);\n --maru-icon-primary: var(--maru-black-600);\n --maru-icon-quaternary: var(--maru-black-350);\n --maru-icon-secondary: var(--maru-black-500);\n --maru-icon-tertiary: var(--maru-black-400);\n --maru-icon-warning-primary: var(--maru-yellow-400);\n --maru-icon-white: var(--maru-white);\n --maru-lime-100: #f0f4c3;\n --maru-lime-200: #e6ee9c;\n --maru-lime-300: #dce775;\n --maru-lime-400: #d4e157;\n --maru-lime-50: #f9fbe7;\n --maru-lime-500: #cddc39;\n --maru-lime-600: #c0ca33;\n --maru-lime-700: #afb42b;\n --maru-lime-800: #9e9d24;\n --maru-lime-900: #827717;\n --maru-lime-a100: #f4ff81;\n --maru-lime-a200: #eeff41;\n --maru-lime-a400: #c6ff00;\n --maru-lime-a700: #aeea00;\n --maru-neutral-gray-100: #48484812;\n --maru-neutral-gray-200: #d5d5d5;\n --maru-pattern-primary: #cfe0efad;\n --maru-pattern-secondary: #cfe0ef69;\n --maru-pink-100: #f8bbd0;\n --maru-pink-200: #f48fb1;\n --maru-pink-300: #f06292;\n --maru-pink-400: #ec407a;\n --maru-pink-50: #fce4ec;\n --maru-pink-500: #e91e63;\n --maru-pink-600: #d81b60;\n --maru-pink-700: #c2185b;\n --maru-pink-800: #ad1457;\n --maru-pink-900: #880e4f;\n --maru-pink-a100: #ff80ab;\n --maru-pink-a200: #ff4081;\n --maru-pink-a400: #f50057;\n --maru-pink-a700: #c51162;\n --maru-purple-100: #e1bee7;\n --maru-purple-200: #ce93d8;\n --maru-purple-300: #ba68c8;\n --maru-purple-400: #ab47bc;\n --maru-purple-50: #f3e5f5;\n --maru-purple-500: #9c27b0;\n --maru-purple-600: #8e24aa;\n --maru-purple-700: #7b1fa2;\n --maru-purple-800: #6a1b9a;\n --maru-purple-900: #4a148c;\n --maru-red-100: #fbe8e8;\n --maru-red-1000: #4c0808;\n --maru-red-200: #f9dcdc;\n --maru-red-300: #f3b7b7;\n --maru-red-400: #d91616;\n --maru-red-50: #fdf4f4;\n --maru-red-500: #c31414;\n --maru-red-600: #ae1212;\n --maru-red-700: #a31111;\n --maru-red-800: #820d0d;\n --maru-red-900: #620a0a;\n --maru-red-a100: #ff8a80;\n --maru-red-a200: #ff5252;\n --maru-red-a400: #ff1744;\n --maru-red-a700: #d50000;\n --maru-shadow-brand: var(--maru-brand-100);\n --maru-shadow-search-bar: #4e4e4e0f;\n --maru-slate-100: #eff3f6;\n --maru-slate-1000: #171718;\n --maru-slate-150: #e8eef2;\n --maru-slate-200: #dee3ed;\n --maru-slate-300: #c3c8cd;\n --maru-slate-400: #abb2b8;\n --maru-slate-50: #f6f8f9;\n --maru-slate-500: #8d9499;\n --maru-slate-600: #71777c;\n --maru-slate-700: #575a5d;\n --maru-slate-800: #3b3e40;\n --maru-slate-850: #2e3132;\n --maru-slate-900: #242526;\n --maru-slate-950: #1b1c1d;\n --maru-slate-a100a: #eef1f7;\n --maru-slate-a200: #d9e5fd;\n --maru-slate-a300: #bfd9f8;\n --maru-slate-a400: #3f3f3f;\n --maru-teal-100: #b2dfdb;\n --maru-teal-200: #80cbc4;\n --maru-teal-300: #4db6ac;\n --maru-teal-400: #26a69a;\n --maru-teal-50: #e0f2f1;\n --maru-teal-500: #009688;\n --maru-teal-600: #00897b;\n --maru-teal-700: #00796b;\n --maru-teal-800: #00695c;\n --maru-teal-900: #004d40;\n --maru-teal-a100: #a7ffeb;\n --maru-teal-a200: #64ffda;\n --maru-teal-a400: #1de9b6;\n --maru-teal-a700: #00bfa5;\n --maru-text-brand: var(--maru-brand-400);\n --maru-text-brand-hover: var(--maru-brand-500);\n --maru-text-brand-white: var(--maru-white);\n --maru-text-disabled: var(--maru-black-350);\n --maru-text-error-primary: var(--maru-red-400);\n --maru-text-info-primary: var(--maru-blue-400);\n --maru-text-inverse-tooltip: var(--maru-white);\n --maru-text-positive-primary: var(--maru-green-400);\n --maru-text-primary: var(--maru-black-600);\n --maru-text-secondary: var(--maru-black-500);\n --maru-text-success-primary: var(--maru-green-400);\n --maru-text-support: var(--maru-black-400);\n --maru-text-tertiary: var(--maru-black-400);\n --maru-text-warning-primary: var(--maru-yellow-ac-900);\n --maru-text-white: var(--maru-white);\n --maru-white: #ffffff;\n --maru-yellow-100: #fff3de;\n --maru-yellow-1000: #593e0b;\n --maru-yellow-200: #ffe7ba;\n --maru-yellow-300: #ffd78f;\n --maru-yellow-400: #ffb020;\n --maru-yellow-50: #fff7e9;\n --maru-yellow-500: #e69e1d;\n --maru-yellow-600: #cc8d1a;\n --maru-yellow-700: #bf8418;\n --maru-yellow-800: #996a13;\n --maru-yellow-900: #734f0e;\n --maru-yellow-ac-100: #fff9c4;\n --maru-yellow-ac-200: #fff59d;\n --maru-yellow-ac-300: #fff176;\n --maru-yellow-ac-400: #ffee58;\n --maru-yellow-ac-50: #fffde7;\n --maru-yellow-ac-500: #ffeb3b;\n --maru-yellow-ac-600: #fdd835;\n --maru-yellow-ac-700: #fbc02d;\n --maru-yellow-ac-800: #f9a825;\n --maru-yellow-ac-900: #f57f17;\n --maru-yellow-ac-a100: #ffff8d;\n --maru-yellow-ac-a200: #ffff00;\n --maru-yellow-ac-a400: #ffea00;\n --maru-yellow-ac-a700: #ffd600;\n --maru-badge-info-primary: var(--maru-blue-100);\n --maru-shadow-default: var(--maru-black-350);\n --maru-overlay-scrim: var(--maru-background-popup-primary);\n --maru-skeleton-base: #f7f7f7;\n --maru-skeleton-highlight: #ececec;\n --maru-status-learning: #c1d881;\n --maru-status-learning-background: #f3f7e6;\n --maru-status-distribution: #91b9dd;\n --maru-status-distribution-background: #e9f1f8;\n --maru-status-service: #c591dd;\n --maru-status-service-background: #f3e9f8;\n --maru-status-title: #2754aa;\n --maru-info-50-per: rgba(48, 138, 204, 0.5);\n --maru-info-20-per: rgba(48, 138, 204, 0.2);\n --maru-info-10-per: rgba(48, 138, 204, 0.1);\n --maru-warning-50-per: rgba(255, 176, 32, 0.5);\n --maru-warning-20-per: rgba(255, 176, 32, 0.2);\n --maru-warning-10-per: rgba(255, 176, 32, 0.1);\n --maru-error-50-per: rgba(217, 22, 22, 0.5);\n --maru-error-20-per: rgba(217, 22, 22, 0.2);\n --maru-error-10-per: rgba(217, 22, 22, 0.1);\n --maru-positive-50-per: rgba(17, 157, 99, 0.5);\n --maru-positive-20-per: rgba(17, 157, 99, 0.2);\n --maru-positive-10-per: rgba(17, 157, 99, 0.1);\n --p: var(--maru-brand-400);\n --p-80: var(--maru-brand-400);\n --p-50-per: rgba(15, 76, 129, 0.5);\n --p-50: var(--maru-brand-300);\n --p-20-per: rgba(15, 76, 129, 0.2);\n --p-20: var(--maru-brand-200);\n --p-10-per: rgba(15, 76, 129, 0.1);\n --p-10: var(--maru-brand-100);\n --p-07: var(--maru-brand-50);\n --p-05-per: rgba(15, 76, 129, 0.05);\n --p-05: var(--maru-brand-50);\n --primary: var(--p);\n --primary-80: var(--p-80);\n --primary-50-per: var(--p-50-per);\n --primary-50: var(--p-50);\n --primary-20-per: var(--p-20-per);\n --primary-20: var(--p-20);\n --primary-10-per: var(--p-10-per);\n --primary-10: var(--p-10);\n --primary-07: var(--p-07);\n --primary-05-per: var(--p-05-per);\n --primary-05: var(--p-05);\n}\n\n[data-theme=blue] {\n --maru-background-brand-secondary: var(--maru-blue-100);\n --maru-background-brand-secondary-hover: var(--maru-blue-200);\n --maru-background-brand-quaternary: var(--maru-blue-200);\n --maru-icon-brand-tertiary: var(--maru-blue-800);\n --maru-icon-brand-quaternary: var(--maru-blue-300);\n --maru-text-brand-white: var(--maru-white);\n --maru-border-brand-quaternary: var(--maru-blue-300);\n --maru-badge-brand-primary-hover: var(--maru-blue-200);\n --p: var(--maru-blue-400);\n --p-80: var(--maru-blue-400);\n --p-50-per: rgba(48, 138, 204, 0.5);\n --p-50: var(--maru-blue-300);\n --p-20-per: rgba(48, 138, 204, 0.2);\n --p-20: var(--maru-blue-200);\n --p-10-per: rgba(48, 138, 204, 0.1);\n --p-10: var(--maru-blue-100);\n --p-07: var(--maru-blue-50);\n --p-05-per: rgba(48, 138, 204, 0.05);\n --p-05: var(--maru-blue-50);\n --maru-text-brand: var(--maru-blue-400);\n --maru-text-brand-hover: var(--maru-blue-500);\n --maru-icon-brand-primary: var(--maru-blue-400);\n --maru-icon-brand-secondary: var(--maru-blue-500);\n --maru-border-brand-primary: var(--maru-blue-400);\n --maru-border-brand-secondary: var(--maru-blue-500);\n --maru-border-brand-tertiary: var(--maru-blue-300);\n --maru-background-brand-solid-primary: var(--maru-blue-400);\n --maru-background-brand-solid-primary-hover: var(--maru-blue-500);\n --maru-background-brand-solid-secondary: var(--maru-blue-600);\n --maru-background-brand-primary: var(--maru-blue-200);\n --maru-background-brand-tertiary-hover: var(--maru-blue-50);\n --maru-badge-brand-primary: var(--maru-blue-100);\n --maru-component-brand-primary: var(--maru-blue-400);\n --maru-shadow-brand: var(--maru-blue-200);\n}\n\n[data-theme=green] {\n --maru-background-brand-secondary: #e6f0e7;\n --maru-background-brand-secondary-hover: #cee0d0;\n --maru-background-brand-quaternary: #cee0d0;\n --maru-icon-brand-tertiary: #096412;\n --maru-icon-brand-quaternary: #84b188;\n --maru-text-brand-white: var(--maru-white);\n --maru-border-brand-quaternary: #84b188;\n --maru-badge-brand-primary-hover: #cee0d0;\n --p: #096412;\n --p-80: #096412;\n --p-50-per: rgba(9, 100, 18, 0.5019607843);\n --p-50: #84b188;\n --p-20-per: rgba(9, 100, 18, 0.2);\n --p-20: #cee0d0;\n --p-10-per: rgba(9, 100, 18, 0.1019607843);\n --p-10: #e6f0e7;\n --p-07: #eef4ee;\n --p-05-per: rgba(9, 100, 18, 0.0509803922);\n --p-05: #f3f7f3;\n --maru-text-brand: #096412;\n --maru-text-brand-hover: #096412;\n --maru-icon-brand-primary: #096412;\n --maru-icon-brand-secondary: #096412;\n --maru-border-brand-primary: #096412;\n --maru-border-brand-secondary: #096412;\n --maru-border-brand-tertiary: #84b188;\n --maru-background-brand-solid-primary: #096412;\n --maru-background-brand-solid-primary-hover: #096412;\n --maru-background-brand-solid-secondary: #096412;\n --maru-background-brand-primary: #cee0d0;\n --maru-background-brand-tertiary-hover: #f3f7f3;\n --maru-badge-brand-primary: #e6f0e7;\n --maru-component-brand-primary: #096412;\n --maru-shadow-brand: #cee0d0;\n}\n\n[data-theme=navy] {\n --maru-background-brand-primary: var(--maru-white);\n --maru-background-brand-quaternary: var(--maru-brand-a200);\n --maru-background-brand-secondary: var(--maru-brand-100);\n --maru-background-brand-secondary-hover: var(--maru-brand-200);\n --maru-background-brand-solid-primary: var(--maru-brand-400);\n --maru-background-brand-solid-primary-hover: var(--maru-brand-500);\n --maru-background-brand-solid-secondary: var(--maru-brand-600);\n --maru-background-brand-tertiary-hover: var(--maru-brand-50);\n --maru-badge-brand-primary: var(--maru-brand-50);\n --maru-badge-brand-primary-hover: var(--maru-brand-100);\n --maru-border-brand-primary: var(--maru-brand-400);\n --maru-border-brand-quaternary: var(--maru-brand-300);\n --maru-border-brand-secondary: var(--maru-brand-500);\n --maru-border-brand-tertiary: var(--maru-brand-800);\n --maru-component-brand-primary: var(--maru-brand-400);\n --maru-icon-brand-primary: var(--maru-brand-400);\n --maru-icon-brand-quaternary: var(--maru-brand-a300);\n --maru-icon-brand-secondary: var(--maru-brand-500);\n --maru-icon-brand-tertiary: var(--maru-brand-800);\n --maru-shadow-brand: var(--maru-brand-100);\n --maru-text-brand: var(--maru-brand-400);\n --maru-text-brand-hover: var(--maru-brand-500);\n --maru-text-brand-white: var(--maru-white);\n --p: var(--maru-brand-400);\n --p-80: var(--maru-brand-400);\n --p-50-per: rgba(15, 76, 129, 0.5);\n --p-50: var(--maru-brand-300);\n --p-20-per: rgba(15, 76, 129, 0.2);\n --p-20: var(--maru-brand-200);\n --p-10-per: rgba(15, 76, 129, 0.1);\n --p-10: var(--maru-brand-100);\n --p-07: var(--maru-brand-50);\n --p-05-per: rgba(15, 76, 129, 0.05);\n --p-05: var(--maru-brand-50);\n}";
129
129
  styleInject(css_248z$u);
130
130
 
131
131
  function StyleProvider(_a) {
@@ -181,6 +181,7 @@ var FIGMA_PRIMITIVE_COLOR_TOKEN_VALUES = {
181
181
  blue800: 'var(--maru-blue-800)',
182
182
  blue900: 'var(--maru-blue-900)',
183
183
  blueA100: 'var(--maru-blue-a100)',
184
+ blueA200: 'var(--maru-blue-a200)',
184
185
  brand100: 'var(--maru-brand-100)',
185
186
  brand1000: 'var(--maru-brand-1000)',
186
187
  brand200: 'var(--maru-brand-200)',
@@ -8376,7 +8377,7 @@ var img$b = "data:image/svg+xml,%3csvg preserveAspectRatio='none' overflow='visi
8376
8377
 
8377
8378
  var img$a = "data:image/svg+xml,%3csvg preserveAspectRatio='none' overflow='visible' style='display: block%3b' width='9.67' height='1.67' viewBox='0 0 9.67 1.67' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath id='Line' d='M0.835 0.835H8.835' stroke='white' stroke-width='1.67' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e";
8378
8379
 
8379
- var css_248z$r = ".maru-checkbox-wrapper {\n display: flex;\n align-items: center;\n flex-direction: row;\n width: fit-content;\n}\n.maru-checkbox-wrapper.maru-checkbox-label-left {\n flex-direction: row-reverse;\n}\n\n.maru-checkbox-wrapper-2px {\n gap: 2px;\n}\n\n.maru-checkbox-wrapper-4px {\n gap: 4px;\n}\n\n.maru-checkbox-wrapper-8px {\n gap: 8px;\n}\n\n.maru-checkbox-inner-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n position: relative;\n flex-shrink: 0;\n}\n.maru-checkbox-inner-wrapper:has(.maru-checkbox:disabled) {\n opacity: 0.5;\n}\n\n.maru-checkbox-inner-16 {\n width: 16px;\n height: 16px;\n border-radius: 4px;\n}\n\n.maru-checkbox-inner-18 {\n width: 18px;\n height: 18px;\n border-radius: 5px;\n}\n\n.maru-checkbox-inner-20 {\n width: 20px;\n height: 20px;\n border-radius: 6px;\n}\n\n.maru-checkbox-inner-24 {\n width: 24px;\n height: 24px;\n border-radius: 6px;\n}\n\n.maru-checkbox {\n position: absolute;\n inset: 0;\n z-index: 1;\n width: 100%;\n height: 100%;\n margin: 0;\n opacity: 0;\n cursor: pointer;\n}\n.maru-checkbox:focus {\n outline: none;\n}\n.maru-checkbox:disabled {\n cursor: default;\n}\n.maru-checkbox:checked + .maru-checkbox-indicator, .maru-checkbox:indeterminate + .maru-checkbox-indicator {\n border-color: currentColor;\n background-color: currentColor;\n}\n\n.maru-checkbox-indicator {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n border: 1px solid var(--maru-border-primary);\n border-radius: inherit;\n background-color: var(--maru-background-primary);\n pointer-events: none;\n}\n.maru-checkbox-indicator img {\n display: block;\n flex-shrink: 0;\n}\n.maru-checkbox-indicator .maru-checkbox-check {\n width: 12px;\n height: 12px;\n}\n.maru-checkbox-indicator .maru-checkbox-minus {\n width: 9.67px;\n height: 1.67px;\n}\n\n.maru-checkbox-inner-20 .maru-checkbox-check,\n.maru-checkbox-inner-24 .maru-checkbox-check {\n width: 16px;\n height: 16px;\n}\n.maru-checkbox-inner-20 .maru-checkbox-minus,\n.maru-checkbox-inner-24 .maru-checkbox-minus {\n width: 11.67px;\n height: 1.67px;\n}\n\n.maru-checkbox-wrapper:hover .maru-checkbox:not(:disabled) + .maru-checkbox-indicator {\n box-shadow: 0 0 0 2px var(--maru-background-primary), 0 0 0 4px var(--maru-border-brand-quaternary);\n}\n\n.maru-checkbox-wrapper .maru-checkbox:focus-visible:not(:disabled) + .maru-checkbox-indicator {\n box-shadow: 0 0 0 2px var(--maru-background-primary), 0 0 0 4px currentColor;\n}\n\n.maru-checkbox-label {\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n letter-spacing: 0;\n font-size: 14px;\n font-weight: 500;\n line-height: 20px;\n color: var(--maru-text-primary);\n cursor: pointer;\n}\n\n.maru-checkbox-wrapper:has(.maru-checkbox:disabled) .maru-checkbox-label {\n color: var(--maru-text-disabled);\n cursor: default;\n}";
8380
+ var css_248z$r = ".maru-checkbox-wrapper {\n display: flex;\n align-items: center;\n flex-direction: row;\n width: fit-content;\n}\n.maru-checkbox-wrapper.maru-checkbox-label-left {\n flex-direction: row-reverse;\n}\n\n.maru-checkbox-wrapper-2px {\n gap: 2px;\n}\n\n.maru-checkbox-wrapper-4px {\n gap: 4px;\n}\n\n.maru-checkbox-wrapper-8px {\n gap: 8px;\n}\n\n.maru-checkbox-inner-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n position: relative;\n flex-shrink: 0;\n}\n.maru-checkbox-inner-wrapper:has(.maru-checkbox:disabled) {\n opacity: 0.5;\n}\n\n.maru-checkbox-inner-16 {\n width: 16px;\n height: 16px;\n border-radius: 4px;\n}\n\n.maru-checkbox-inner-18 {\n width: 18px;\n height: 18px;\n border-radius: 5px;\n}\n\n.maru-checkbox-inner-20 {\n width: 20px;\n height: 20px;\n border-radius: 6px;\n}\n\n.maru-checkbox-inner-24 {\n width: 24px;\n height: 24px;\n border-radius: 6px;\n}\n\n.maru-checkbox {\n position: absolute;\n inset: 0;\n z-index: 1;\n width: 100%;\n height: 100%;\n margin: 0;\n opacity: 0;\n cursor: pointer;\n}\n.maru-checkbox:focus {\n outline: none;\n}\n.maru-checkbox:disabled {\n cursor: default;\n}\n.maru-checkbox:checked + .maru-checkbox-indicator, .maru-checkbox:indeterminate + .maru-checkbox-indicator {\n border-color: currentColor;\n background-color: currentColor;\n}\n\n.maru-checkbox-indicator {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n border: 1px solid var(--maru-border-primary);\n border-radius: inherit;\n background-color: var(--maru-background-primary);\n pointer-events: none;\n}\n.maru-checkbox-indicator img {\n display: block;\n flex-shrink: 0;\n}\n.maru-checkbox-indicator .maru-checkbox-check {\n width: 12px;\n height: 12px;\n}\n.maru-checkbox-indicator .maru-checkbox-minus {\n width: 9.67px;\n height: 1.67px;\n}\n\n.maru-checkbox-inner-20 .maru-checkbox-check,\n.maru-checkbox-inner-24 .maru-checkbox-check {\n width: 16px;\n height: 16px;\n}\n.maru-checkbox-inner-20 .maru-checkbox-minus,\n.maru-checkbox-inner-24 .maru-checkbox-minus {\n width: 11.67px;\n height: 1.67px;\n}\n\n.maru-checkbox-wrapper:hover .maru-checkbox:not(:disabled) + .maru-checkbox-indicator {\n box-shadow: 0 0 0 2px var(--maru-background-primary), 0 0 0 4px var(--maru-border-brand-quaternary);\n}\n\n.maru-checkbox-wrapper .maru-checkbox:focus-visible:not(:disabled) + .maru-checkbox-indicator {\n box-shadow: 0 0 0 2px var(--maru-background-primary), 0 0 0 4px var(--maru-border-brand-quaternary);\n}\n\n.maru-checkbox-label {\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n letter-spacing: 0;\n font-size: 14px;\n font-weight: 500;\n line-height: 20px;\n color: var(--maru-text-secondary);\n cursor: pointer;\n}\n\n.maru-checkbox-wrapper:has(.maru-checkbox:disabled) .maru-checkbox-label {\n color: var(--maru-text-disabled);\n cursor: default;\n}";
8380
8381
  styleInject(css_248z$r);
8381
8382
 
8382
8383
  var Checkbox = /*#__PURE__*/forwardRef(function (_a, ref) {
@@ -70609,7 +70610,7 @@ function uuidv4(length) {
70609
70610
  }
70610
70611
  }
70611
70612
 
70612
- var css_248z$n = ".maru-input-wrapper {\n width: 100%;\n}\n.maru-input-wrapper .maru-input-label {\n margin-bottom: 4px;\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n letter-spacing: 0;\n font-size: 14px;\n font-weight: 500;\n}\n.maru-input-wrapper .maru-input-label label {\n color: var(--maru-text-secondary);\n}\n.maru-input-wrapper .maru-input {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n flex-direction: row;\n box-sizing: border-box;\n min-height: 36px;\n padding: 7px 12px;\n border: 1px solid var(--maru-border-primary);\n border-radius: 8px;\n background-color: var(--maru-background-primary);\n position: relative;\n z-index: 0;\n transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;\n}\n.maru-input-wrapper .maru-input .maru-input-value-wrapper {\n display: flex;\n flex: 1 1 auto;\n align-items: center;\n min-width: 0;\n overflow: hidden;\n position: relative;\n}\n.maru-input-wrapper .maru-input .maru-input-value-wrapper .persistent-placeholder {\n position: absolute;\n z-index: -1;\n inset: 0;\n display: flex;\n align-items: center;\n pointer-events: none;\n overflow: hidden;\n}\n.maru-input-wrapper .maru-input .maru-input-value-wrapper .persistent-placeholder > span {\n color: var(--maru-text-tertiary);\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n letter-spacing: 0;\n font-size: 14px;\n font-weight: 500;\n white-space: pre;\n flex: none;\n}\n.maru-input-wrapper .maru-input .maru-input-value-wrapper .persistent-placeholder > span[data-hidden] {\n visibility: hidden;\n}\n.maru-input-wrapper .maru-input .maru-input-value-wrapper .persistent-placeholder > span:not([data-hidden]) {\n flex: 1 1 auto;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: pre;\n}\n.maru-input-wrapper .maru-input .maru-input-value-wrapper .maru-input-highlight-layer {\n width: max-content;\n min-width: 100%;\n position: absolute;\n top: 0;\n left: 0;\n color: var(--maru-text-secondary);\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n letter-spacing: 0;\n font-size: 14px;\n font-weight: 500;\n line-height: 20px;\n white-space: pre;\n pointer-events: none;\n}\n.maru-input-wrapper .maru-input .maru-input-value-wrapper .maru-input-highlight-layer > [data-highlighted] {\n background-color: var(--maru-feature-highlight);\n}\n.maru-input-wrapper .maru-input .maru-input-value-wrapper.highlighted > input {\n color: transparent;\n caret-color: var(--maru-text-primary);\n}\n.maru-input-wrapper .maru-input input {\n width: 100%;\n min-width: 0;\n border: unset;\n outline: unset;\n background-color: transparent;\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n letter-spacing: 0;\n font-size: 14px;\n font-weight: 500;\n color: var(--maru-text-secondary);\n line-height: 20px;\n padding: unset;\n}\n.maru-input-wrapper .maru-input input::-webkit-input-placeholder {\n font-weight: 500;\n color: var(--maru-text-tertiary);\n}\n.maru-input-wrapper .maru-input input::-moz-placeholder {\n font-weight: 500;\n color: var(--maru-text-tertiary);\n}\n.maru-input-wrapper .maru-input input:-ms-input-placeholder {\n font-weight: 500;\n color: var(--maru-text-tertiary);\n}\n.maru-input-wrapper .maru-input input::-ms-input-placeholder {\n font-weight: 500;\n color: var(--maru-text-tertiary);\n}\n.maru-input-wrapper .maru-input input::placeholder {\n font-weight: 500;\n color: var(--maru-text-tertiary);\n}\n.maru-input-wrapper .maru-input:focus-within {\n border-color: var(--maru-border-brand-primary);\n box-shadow: 0 0 0 1px var(--maru-border-brand-primary);\n}\n.maru-input-wrapper .maru-input.errored {\n border-color: var(--maru-border-error-secondary);\n}\n.maru-input-wrapper .maru-input.errored:focus-within {\n border-color: var(--maru-border-error-primary);\n background-color: var(--maru-background-primary-hover);\n box-shadow: 0 0 0 1px var(--maru-border-error-primary);\n}\n.maru-input-wrapper .maru-input:hover {\n background-color: var(--maru-background-primary-hover);\n}\n.maru-input-wrapper .maru-input.disabled {\n background-color: var(--maru-background-primary);\n opacity: 0.5;\n}\n.maru-input-wrapper .maru-input.disabled input {\n color: var(--maru-text-disabled);\n}\n.maru-input-wrapper .maru-input.disabled input::-webkit-input-placeholder {\n color: var(--maru-text-disabled);\n}\n.maru-input-wrapper .maru-input.disabled input::-moz-placeholder {\n color: var(--maru-text-disabled);\n}\n.maru-input-wrapper .maru-input.disabled input:-ms-input-placeholder {\n color: var(--maru-text-disabled);\n}\n.maru-input-wrapper .maru-input.disabled input::-ms-input-placeholder {\n color: var(--maru-text-disabled);\n}\n.maru-input-wrapper .maru-input.disabled input::placeholder {\n color: var(--maru-text-disabled);\n}\n.maru-input-wrapper .maru-input.disabled .maru-input-value-wrapper.highlighted > input {\n color: transparent;\n}\n.maru-input-wrapper .maru-input.disabled:hover {\n background-color: var(--maru-background-primary);\n}\n.maru-input-wrapper .maru-input-start-node {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n flex: 0 0 16px;\n margin-right: 8px;\n}\n.maru-input-wrapper .maru-input-start-node > svg {\n width: 16px;\n height: 16px;\n}\n.maru-input-wrapper .maru-input-end-node-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n gap: 8px;\n}\n.maru-input-wrapper .maru-input-end-node-wrapper > button {\n padding: unset;\n margin: unset;\n border: unset;\n background-color: unset;\n cursor: pointer;\n display: flex;\n color: var(--maru-icon-quaternary);\n}\n.maru-input-wrapper .maru-input-end-node-wrapper > button:focus-visible {\n outline: 2px solid var(--maru-border-brand-primary);\n outline-offset: 2px;\n border-radius: 2px;\n}\n.maru-input-wrapper .maru-input-end-node-wrapper .maru-input-end-node {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n}\n.maru-input-wrapper .maru-input-end-node-wrapper.maru-input-end-node-margin {\n margin-left: 8px;\n}\n.maru-input-wrapper .maru-input-footer {\n display: block;\n margin-top: 4px;\n}\n.maru-input-wrapper .maru-input-footer > span {\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n letter-spacing: 0;\n font-size: 12px;\n font-weight: 500;\n color: var(--maru-text-secondary);\n font-weight: 400;\n}\n.maru-input-wrapper .maru-input-footer.maru-input-footer-error > span {\n color: var(--maru-text-error-primary);\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n letter-spacing: 0;\n font-size: 14px;\n font-weight: 500;\n line-height: 20px;\n letter-spacing: 0;\n}";
70613
+ var css_248z$n = ".maru-input-wrapper {\n width: 100%;\n}\n.maru-input-wrapper .maru-input-label {\n margin-bottom: 4px;\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n letter-spacing: 0;\n font-size: 14px;\n font-weight: 500;\n}\n.maru-input-wrapper .maru-input-label label {\n color: var(--maru-text-secondary);\n}\n.maru-input-wrapper .maru-input {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n flex-direction: row;\n box-sizing: border-box;\n min-height: 36px;\n padding: 7px 12px;\n border: 1px solid var(--maru-border-primary);\n border-radius: 8px;\n background-color: var(--maru-background-primary);\n position: relative;\n z-index: 0;\n transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;\n}\n.maru-input-wrapper .maru-input .maru-input-value-wrapper {\n display: flex;\n flex: 1 1 auto;\n align-items: center;\n min-width: 0;\n overflow: hidden;\n position: relative;\n}\n.maru-input-wrapper .maru-input .maru-input-value-wrapper .persistent-placeholder {\n position: absolute;\n z-index: -1;\n inset: 0;\n display: flex;\n align-items: center;\n pointer-events: none;\n overflow: hidden;\n}\n.maru-input-wrapper .maru-input .maru-input-value-wrapper .persistent-placeholder > span {\n color: var(--maru-text-tertiary);\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n letter-spacing: 0;\n font-size: 14px;\n font-weight: 500;\n white-space: pre;\n flex: none;\n}\n.maru-input-wrapper .maru-input .maru-input-value-wrapper .persistent-placeholder > span[data-hidden] {\n visibility: hidden;\n}\n.maru-input-wrapper .maru-input .maru-input-value-wrapper .persistent-placeholder > span:not([data-hidden]) {\n font-weight: 400;\n flex: 1 1 auto;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: pre;\n}\n.maru-input-wrapper .maru-input .maru-input-value-wrapper .maru-input-highlight-layer {\n width: max-content;\n min-width: 100%;\n position: absolute;\n top: 0;\n left: 0;\n color: var(--maru-text-primary);\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n letter-spacing: 0;\n font-size: 14px;\n font-weight: 500;\n line-height: 20px;\n white-space: pre;\n pointer-events: none;\n}\n.maru-input-wrapper .maru-input .maru-input-value-wrapper .maru-input-highlight-layer > [data-highlighted] {\n background-color: var(--maru-feature-highlight);\n}\n.maru-input-wrapper .maru-input .maru-input-value-wrapper.highlighted > input {\n color: transparent;\n caret-color: var(--maru-text-primary);\n}\n.maru-input-wrapper .maru-input input {\n width: 100%;\n min-width: 0;\n border: unset;\n outline: unset;\n background-color: transparent;\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n letter-spacing: 0;\n font-size: 14px;\n font-weight: 500;\n color: var(--maru-text-primary);\n line-height: 20px;\n padding: unset;\n}\n.maru-input-wrapper .maru-input input::-webkit-input-placeholder {\n font-weight: 400;\n color: var(--maru-text-tertiary);\n}\n.maru-input-wrapper .maru-input input::-moz-placeholder {\n font-weight: 400;\n color: var(--maru-text-tertiary);\n}\n.maru-input-wrapper .maru-input input:-ms-input-placeholder {\n font-weight: 400;\n color: var(--maru-text-tertiary);\n}\n.maru-input-wrapper .maru-input input::-ms-input-placeholder {\n font-weight: 400;\n color: var(--maru-text-tertiary);\n}\n.maru-input-wrapper .maru-input input::placeholder {\n font-weight: 400;\n color: var(--maru-text-tertiary);\n}\n.maru-input-wrapper .maru-input:focus-within {\n border-color: var(--maru-border-brand-secondary);\n background-color: var(--maru-background-primary-hover);\n box-shadow: inset 0 0 0 1px var(--maru-border-brand-secondary);\n}\n.maru-input-wrapper .maru-input.errored {\n border-color: var(--maru-border-error-secondary);\n}\n.maru-input-wrapper .maru-input.errored:focus-within {\n border-color: var(--maru-border-error-primary);\n background-color: var(--maru-background-primary-hover);\n box-shadow: 0 0 0 1px var(--maru-border-error-primary);\n}\n.maru-input-wrapper .maru-input:hover {\n background-color: var(--maru-background-primary-hover);\n}\n.maru-input-wrapper .maru-input.disabled {\n background-color: var(--maru-background-primary);\n opacity: 0.5;\n}\n.maru-input-wrapper .maru-input.disabled input {\n color: var(--maru-text-disabled);\n}\n.maru-input-wrapper .maru-input.disabled input::-webkit-input-placeholder {\n color: var(--maru-text-disabled);\n}\n.maru-input-wrapper .maru-input.disabled input::-moz-placeholder {\n color: var(--maru-text-disabled);\n}\n.maru-input-wrapper .maru-input.disabled input:-ms-input-placeholder {\n color: var(--maru-text-disabled);\n}\n.maru-input-wrapper .maru-input.disabled input::-ms-input-placeholder {\n color: var(--maru-text-disabled);\n}\n.maru-input-wrapper .maru-input.disabled input::placeholder {\n color: var(--maru-text-disabled);\n}\n.maru-input-wrapper .maru-input.disabled .maru-input-value-wrapper.highlighted > input {\n color: transparent;\n}\n.maru-input-wrapper .maru-input.disabled:hover {\n background-color: var(--maru-background-primary);\n}\n.maru-input-wrapper .maru-input-start-node {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n flex: 0 0 16px;\n margin-right: 8px;\n}\n.maru-input-wrapper .maru-input-start-node > svg {\n width: 16px;\n height: 16px;\n}\n.maru-input-wrapper .maru-input-end-node-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n gap: 8px;\n}\n.maru-input-wrapper .maru-input-end-node-wrapper > button {\n padding: unset;\n margin: unset;\n border: unset;\n background-color: unset;\n cursor: pointer;\n display: flex;\n color: var(--maru-icon-quaternary);\n}\n.maru-input-wrapper .maru-input-end-node-wrapper > button:focus-visible {\n outline: 2px solid var(--maru-border-brand-primary);\n outline-offset: 2px;\n border-radius: 2px;\n}\n.maru-input-wrapper .maru-input-end-node-wrapper .maru-input-end-node {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n}\n.maru-input-wrapper .maru-input-end-node-wrapper.maru-input-end-node-margin {\n margin-left: 8px;\n}\n.maru-input-wrapper .maru-input-footer {\n display: block;\n margin-top: 4px;\n}\n.maru-input-wrapper .maru-input-footer > span {\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n letter-spacing: 0;\n font-size: 12px;\n font-weight: 500;\n color: var(--maru-text-secondary);\n font-weight: 400;\n}\n.maru-input-wrapper .maru-input-footer.maru-input-footer-error > span {\n color: var(--maru-text-error-primary);\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n letter-spacing: 0;\n font-size: 14px;\n font-weight: 500;\n line-height: 20px;\n letter-spacing: 0;\n}";
70613
70614
  styleInject(css_248z$n);
70614
70615
 
70615
70616
  var Input = /*#__PURE__*/forwardRef(function (_a, inputRef) {
@@ -72833,7 +72834,7 @@ var TRadioSize = {
72833
72834
  Sm: 'sm'
72834
72835
  };
72835
72836
 
72836
- var css_248z$l = ".maru-radio-wrapper {\n display: inline-flex;\n align-items: center;\n width: fit-content;\n cursor: pointer;\n}\n.maru-radio-wrapper-disabled {\n opacity: 0.5;\n cursor: default;\n}\n\n.maru-radio-wrapper-8px {\n gap: 8px;\n}\n\n.maru-radio-wrapper-6px {\n gap: 6px;\n}\n\n.maru-radio-wrapper-4px {\n gap: 4px;\n}\n\n.maru-radio-wrapper-2px {\n gap: 2px;\n}\n\n.maru-radio {\n --maru-radio-size: 16px;\n --maru-radio-dot-size: 6px;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n position: relative;\n display: inline-block;\n flex-shrink: 0;\n box-sizing: border-box;\n width: var(--maru-radio-size);\n height: var(--maru-radio-size);\n margin: 0;\n border: 1px solid var(--maru-border-primary);\n border-radius: 50%;\n background-color: var(--maru-background-primary);\n cursor: pointer;\n}\n.maru-radio-md {\n --maru-radio-size: 20px;\n --maru-radio-dot-size: 8px;\n}\n.maru-radio:checked {\n border-color: var(--maru-icon-brand-primary);\n background-color: var(--maru-icon-brand-primary);\n}\n.maru-radio:checked::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n width: var(--maru-radio-dot-size);\n height: var(--maru-radio-dot-size);\n transform: translate(-50%, -50%);\n border-radius: 50%;\n background-color: var(--maru-background-primary);\n}\n.maru-radio:not(.maru-radio-primary):checked {\n border-color: var(--maru-text-secondary);\n background-color: var(--maru-text-secondary);\n}\n.maru-radio:focus {\n outline: none;\n}\n.maru-radio:focus-visible:not(:disabled) {\n box-shadow: 0 0 0 2px var(--maru-background-primary), 0 0 0 4px #dbe4ec;\n}\n.maru-radio:disabled {\n cursor: default;\n}\n\n.maru-radio-label {\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n letter-spacing: 0;\n font-size: 14px;\n font-weight: 400;\n color: var(--maru-text-primary);\n line-height: 20px;\n white-space: nowrap;\n cursor: pointer;\n}\n\n.maru-radio-wrapper-disabled .maru-radio-label {\n cursor: default;\n}";
72837
+ var css_248z$l = ".maru-radio-wrapper {\n display: inline-flex;\n align-items: center;\n width: fit-content;\n cursor: pointer;\n}\n.maru-radio-wrapper-disabled {\n opacity: 0.5;\n cursor: default;\n}\n\n.maru-radio-wrapper-8px {\n gap: 8px;\n}\n\n.maru-radio-wrapper-6px {\n gap: 6px;\n}\n\n.maru-radio-wrapper-4px {\n gap: 4px;\n}\n\n.maru-radio-wrapper-2px {\n gap: 2px;\n}\n\n.maru-radio {\n --maru-radio-size: 16px;\n --maru-radio-dot-size: 6px;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n position: relative;\n display: inline-block;\n flex-shrink: 0;\n box-sizing: border-box;\n width: var(--maru-radio-size);\n height: var(--maru-radio-size);\n margin: 0;\n border: 1px solid var(--maru-border-primary);\n border-radius: 50%;\n background-color: var(--maru-background-primary);\n cursor: pointer;\n}\n.maru-radio-md {\n --maru-radio-size: 20px;\n --maru-radio-dot-size: 8px;\n}\n.maru-radio:checked {\n border-color: var(--maru-icon-brand-primary);\n background-color: var(--maru-icon-brand-primary);\n}\n.maru-radio:checked::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n width: var(--maru-radio-dot-size);\n height: var(--maru-radio-dot-size);\n transform: translate(-50%, -50%);\n border-radius: 50%;\n background-color: var(--maru-background-primary);\n}\n.maru-radio:not(.maru-radio-primary):checked {\n border-color: var(--maru-text-secondary);\n background-color: var(--maru-text-secondary);\n}\n.maru-radio:focus {\n outline: none;\n}\n.maru-radio:focus-visible:not(:disabled) {\n box-shadow: 0 0 0 2px var(--maru-background-primary), 0 0 0 4px var(--maru-border-brand-quaternary);\n}\n.maru-radio:disabled {\n cursor: default;\n}\n\n.maru-radio-label {\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n letter-spacing: 0;\n font-size: 14px;\n font-weight: 500;\n color: var(--maru-text-secondary);\n line-height: 20px;\n white-space: nowrap;\n cursor: pointer;\n}\n\n.maru-radio-wrapper-disabled .maru-radio-label {\n cursor: default;\n}";
72837
72838
  styleInject(css_248z$l);
72838
72839
 
72839
72840
  var Radio = /*#__PURE__*/forwardRef(function (_a, ref) {
@@ -73021,7 +73022,7 @@ function Slider(_a) {
73021
73022
  }));
73022
73023
  }
73023
73024
 
73024
- var css_248z$i = ".maru-textarea-wrapper .maru-textarea-resizable-wrapper {\n position: relative;\n}\n.maru-textarea-wrapper .maru-textarea {\n display: flex;\n justify-content: center;\n align-items: flex-start;\n flex-direction: row;\n padding: 8px 8px 8px 12px;\n border: 1px solid var(--maru-border-secondary);\n border-radius: 6px;\n gap: 8px;\n}\n.maru-textarea-wrapper .maru-textarea > textarea {\n width: 100%;\n border: unset;\n outline: unset;\n background-color: transparent;\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n letter-spacing: 0;\n font-size: 14px;\n font-weight: 400;\n color: var(--maru-text-secondary);\n resize: none;\n}\n.maru-textarea-wrapper .maru-textarea > textarea::-webkit-input-placeholder {\n font-weight: 300;\n color: var(--maru-text-tertiary);\n}\n.maru-textarea-wrapper .maru-textarea > textarea::-moz-placeholder {\n font-weight: 300;\n color: var(--maru-text-tertiary);\n}\n.maru-textarea-wrapper .maru-textarea > textarea:-ms-input-placeholder {\n font-weight: 300;\n color: var(--maru-text-tertiary);\n}\n.maru-textarea-wrapper .maru-textarea > textarea::-ms-input-placeholder {\n font-weight: 300;\n color: var(--maru-text-tertiary);\n}\n.maru-textarea-wrapper .maru-textarea > textarea::placeholder {\n font-weight: 300;\n color: var(--maru-text-tertiary);\n}\n.maru-textarea-wrapper .maru-textarea:not(.disabled):not(.errored):focus-within {\n border-color: var(--maru-border-brand-primary);\n box-shadow: inset 0 0 0 1px var(--maru-border-brand-primary);\n}\n.maru-textarea-wrapper .maru-textarea.errored {\n outline: 1px solid var(--maru-border-error-primary);\n border-color: var(--maru-border-error-primary);\n}\n.maru-textarea-wrapper .maru-textarea.disabled {\n background-color: var(--maru-background-secondary);\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea {\n color: var(--maru-text-disabled);\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea::-webkit-input-placeholder {\n color: var(--maru-text-disabled);\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea::-moz-placeholder {\n color: var(--maru-text-disabled);\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea:-ms-input-placeholder {\n color: var(--maru-text-disabled);\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea::-ms-input-placeholder {\n color: var(--maru-text-disabled);\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea::placeholder {\n color: var(--maru-text-disabled);\n}\n.maru-textarea-wrapper .maru-textarea-end-node-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n flex-shrink: 0;\n gap: 8px;\n}\n.maru-textarea-wrapper .maru-textarea-end-node-wrapper .maru-textarea-end-node {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n flex-shrink: 0;\n}\n.maru-textarea-wrapper .resizer {\n position: absolute;\n bottom: 0;\n left: 0;\n height: 5px;\n width: 100%;\n cursor: ns-resize;\n background: transparent;\n}\n.maru-textarea-wrapper .maru-textarea-footer {\n display: block;\n margin-top: 4px;\n}\n.maru-textarea-wrapper .maru-textarea-footer > span {\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n letter-spacing: 0;\n font-size: 12px;\n font-weight: 500;\n color: var(--maru-text-error-primary);\n}";
73025
+ var css_248z$i = ".maru-textarea-wrapper .maru-textarea-resizable-wrapper {\n position: relative;\n}\n.maru-textarea-wrapper .maru-textarea {\n display: flex;\n justify-content: center;\n align-items: flex-start;\n flex-direction: row;\n padding: 8px 8px 8px 12px;\n border: 1px solid var(--maru-border-secondary);\n border-radius: 6px;\n gap: 2px;\n}\n.maru-textarea-wrapper .maru-textarea > textarea {\n width: 100%;\n border: unset;\n outline: unset;\n background-color: transparent;\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n letter-spacing: 0;\n font-size: 14px;\n font-weight: 400;\n color: var(--maru-text-secondary);\n resize: none;\n}\n.maru-textarea-wrapper .maru-textarea > textarea::-webkit-input-placeholder {\n font-weight: 300;\n color: var(--maru-text-tertiary);\n}\n.maru-textarea-wrapper .maru-textarea > textarea::-moz-placeholder {\n font-weight: 300;\n color: var(--maru-text-tertiary);\n}\n.maru-textarea-wrapper .maru-textarea > textarea:-ms-input-placeholder {\n font-weight: 300;\n color: var(--maru-text-tertiary);\n}\n.maru-textarea-wrapper .maru-textarea > textarea::-ms-input-placeholder {\n font-weight: 300;\n color: var(--maru-text-tertiary);\n}\n.maru-textarea-wrapper .maru-textarea > textarea::placeholder {\n font-weight: 300;\n color: var(--maru-text-tertiary);\n}\n.maru-textarea-wrapper .maru-textarea:not(.disabled):not(.errored):focus-within {\n border-color: var(--maru-border-brand-primary);\n box-shadow: inset 0 0 0 1px var(--maru-border-brand-primary);\n}\n.maru-textarea-wrapper .maru-textarea.errored {\n outline: 1px solid var(--maru-border-error-primary);\n border-color: var(--maru-border-error-primary);\n}\n.maru-textarea-wrapper .maru-textarea.disabled {\n background-color: var(--maru-background-secondary);\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea {\n color: var(--maru-text-disabled);\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea::-webkit-input-placeholder {\n color: var(--maru-text-disabled);\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea::-moz-placeholder {\n color: var(--maru-text-disabled);\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea:-ms-input-placeholder {\n color: var(--maru-text-disabled);\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea::-ms-input-placeholder {\n color: var(--maru-text-disabled);\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea::placeholder {\n color: var(--maru-text-disabled);\n}\n.maru-textarea-wrapper .maru-textarea-end-node-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n flex-shrink: 0;\n gap: 8px;\n}\n.maru-textarea-wrapper .maru-textarea-end-node-wrapper .maru-textarea-end-node {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n flex-shrink: 0;\n}\n.maru-textarea-wrapper .resizer {\n position: absolute;\n bottom: 0;\n left: 0;\n height: 5px;\n width: 100%;\n cursor: ns-resize;\n background: transparent;\n}\n.maru-textarea-wrapper .maru-textarea-footer {\n display: block;\n margin-top: 4px;\n}\n.maru-textarea-wrapper .maru-textarea-footer > span {\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n letter-spacing: 0;\n font-size: 12px;\n font-weight: 500;\n color: var(--maru-text-error-primary);\n}";
73025
73026
  styleInject(css_248z$i);
73026
73027
 
73027
73028
  var Textarea = /*#__PURE__*/forwardRef(function (_a, textareaRef) {
@@ -73238,7 +73239,7 @@ Textarea.defaultProps = {
73238
73239
  };
73239
73240
  Textarea.displayName = 'Textarea';
73240
73241
 
73241
- var css_248z$h = ".maru-toggle-wrapper {\n display: inline-flex;\n align-items: center;\n width: fit-content;\n gap: 8px;\n cursor: pointer;\n}\n.maru-toggle-wrapper-disabled {\n opacity: 0.5;\n cursor: default;\n}\n\n.maru-toggle-inner-wrapper {\n --maru-toggle-width: 36px;\n --maru-toggle-height: 20px;\n --maru-toggle-thumb-size: 16px;\n --maru-toggle-thumb-distance: 16px;\n position: relative;\n display: inline-flex;\n flex-shrink: 0;\n width: var(--maru-toggle-width);\n height: var(--maru-toggle-height);\n}\n.maru-toggle-inner-wrapper-md {\n --maru-toggle-width: 44px;\n --maru-toggle-height: 24px;\n --maru-toggle-thumb-size: 20px;\n --maru-toggle-thumb-distance: 20px;\n}\n\n.maru-toggle {\n position: absolute;\n z-index: 1;\n inset: 0;\n width: 100%;\n height: 100%;\n margin: 0;\n appearance: none;\n cursor: pointer;\n}\n.maru-toggle:focus {\n outline: none;\n}\n.maru-toggle:disabled {\n cursor: default;\n}\n.maru-toggle:checked ~ .maru-toggle-rail {\n border-color: var(--maru-background-brand-solid-primary);\n background-color: var(--maru-background-brand-solid-primary);\n}\n.maru-toggle:not(:disabled):hover:checked ~ .maru-toggle-rail {\n border-color: var(--maru-background-brand-solid-primary-hover);\n background-color: var(--maru-background-brand-solid-primary-hover);\n}\n.maru-toggle:focus-visible ~ .maru-toggle-rail {\n box-shadow: 0 0 0 2px var(--maru-background-primary), 0 0 0 4px #dbe4ec;\n}\n.maru-toggle:checked ~ .maru-toggle-thumb {\n transform: translateX(var(--maru-toggle-thumb-distance));\n}\n\n.maru-toggle-rail {\n position: absolute;\n inset: 0;\n box-sizing: border-box;\n border: 1px solid var(--maru-border-secondary);\n border-radius: 17.5px;\n background-color: var(--maru-background-quaternary);\n transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;\n}\n\n.maru-toggle-thumb {\n position: absolute;\n top: 2px;\n left: 2px;\n width: var(--maru-toggle-thumb-size);\n height: var(--maru-toggle-thumb-size);\n border-radius: 50%;\n background-color: var(--maru-background-primary);\n box-shadow: 0 2px 4px var(--maru-shadow-default);\n transition: transform 0.2s ease-in-out;\n}\n\n.maru-toggle-label {\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n letter-spacing: 0;\n font-size: 14px;\n font-weight: 500;\n color: var(--maru-text-primary);\n line-height: 20px;\n white-space: nowrap;\n}";
73242
+ var css_248z$h = ".maru-toggle-wrapper {\n display: inline-flex;\n align-items: center;\n width: fit-content;\n gap: 8px;\n cursor: pointer;\n}\n.maru-toggle-wrapper-disabled {\n opacity: 0.5;\n cursor: default;\n}\n\n.maru-toggle-inner-wrapper {\n --maru-toggle-width: 36px;\n --maru-toggle-height: 20px;\n --maru-toggle-thumb-size: 16px;\n --maru-toggle-thumb-distance: 16px;\n position: relative;\n display: inline-flex;\n flex-shrink: 0;\n width: var(--maru-toggle-width);\n height: var(--maru-toggle-height);\n}\n.maru-toggle-inner-wrapper-md {\n --maru-toggle-width: 44px;\n --maru-toggle-height: 24px;\n --maru-toggle-thumb-size: 20px;\n --maru-toggle-thumb-distance: 20px;\n}\n\n.maru-toggle {\n position: absolute;\n z-index: 1;\n inset: 0;\n width: 100%;\n height: 100%;\n margin: 0;\n appearance: none;\n cursor: pointer;\n}\n.maru-toggle:focus {\n outline: none;\n}\n.maru-toggle:disabled {\n cursor: default;\n}\n.maru-toggle:checked ~ .maru-toggle-rail {\n border-color: var(--maru-background-brand-solid-primary);\n background-color: var(--maru-background-brand-solid-primary);\n}\n.maru-toggle:not(:disabled):hover:checked ~ .maru-toggle-rail {\n border-color: var(--maru-background-brand-solid-primary-hover);\n background-color: var(--maru-background-brand-solid-primary-hover);\n}\n.maru-toggle:not(:disabled):hover:not(:checked) ~ .maru-toggle-rail {\n border-color: var(--maru-border-primary);\n}\n.maru-toggle:focus-visible ~ .maru-toggle-rail {\n box-shadow: 0 0 0 2px var(--maru-background-primary), 0 0 0 4px var(--maru-border-brand-quaternary);\n}\n.maru-toggle:checked ~ .maru-toggle-thumb {\n transform: translateX(var(--maru-toggle-thumb-distance));\n}\n\n.maru-toggle-rail {\n position: absolute;\n inset: 0;\n box-sizing: border-box;\n border: 1px solid var(--maru-border-secondary);\n border-radius: 17.5px;\n background-color: var(--maru-background-quaternary);\n transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;\n}\n\n.maru-toggle-thumb {\n position: absolute;\n top: 2px;\n left: 2px;\n width: var(--maru-toggle-thumb-size);\n height: var(--maru-toggle-thumb-size);\n border-radius: 50%;\n background-color: var(--maru-background-primary);\n box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.1), 0 2px 5px -3px rgba(0, 0, 0, 0.54);\n transition: transform 0.2s ease-in-out;\n}\n\n.maru-toggle-label {\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n letter-spacing: 0;\n font-size: 14px;\n font-weight: 500;\n color: var(--maru-text-primary);\n line-height: 20px;\n white-space: nowrap;\n}";
73242
73243
  styleInject(css_248z$h);
73243
73244
 
73244
73245
  function Toggle(_a) {
@@ -73285,7 +73286,7 @@ var TToggleSize = {
73285
73286
  Sm: 'sm'
73286
73287
  };
73287
73288
 
73288
- var css_248z$g = ".maru-tooltip-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n width: -webkit-fit-content;\n width: -moz-fit-content;\n width: fit-content;\n}\n\n.maru-tooltip {\n box-sizing: border-box;\n max-width: 340px;\n z-index: 1612;\n border-radius: 8px;\n padding: 10px 14px;\n display: none;\n background-color: var(--maru-feature-tooltip);\n box-shadow: 0 6px 8px rgba(0, 0, 0, 0.07);\n}\n.maru-tooltip[data-show=true] {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n}\n.maru-tooltip[data-show=false] {\n display: none;\n}\n.maru-tooltip,\n.maru-tooltip span,\n.maru-tooltip p,\n.maru-tooltip pre {\n color: var(--maru-text-white);\n word-break: break-word;\n white-space: pre-wrap;\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n letter-spacing: 0;\n font-size: 12px;\n font-weight: 400;\n line-height: 16px;\n}";
73289
+ var css_248z$g = ".maru-tooltip-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n width: -webkit-fit-content;\n width: -moz-fit-content;\n width: fit-content;\n}\n\n.maru-tooltip {\n box-sizing: border-box;\n max-width: 340px;\n z-index: 1612;\n border-radius: 8px;\n padding: 8px 12px;\n display: none;\n background-color: var(--maru-feature-tooltip);\n box-shadow: 0 5px 9px var(--maru-shadow-search-bar);\n}\n.maru-tooltip[data-show=true] {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n}\n.maru-tooltip[data-show=false] {\n display: none;\n}\n.maru-tooltip,\n.maru-tooltip span,\n.maru-tooltip p,\n.maru-tooltip pre {\n color: var(--maru-text-white);\n word-break: break-word;\n white-space: pre-wrap;\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n letter-spacing: 0;\n font-size: 12px;\n font-weight: 400;\n line-height: 16px;\n}";
73289
73290
  styleInject(css_248z$g);
73290
73291
 
73291
73292
  function Tooltip(_a) {
@@ -80618,6 +80619,27 @@ var formatTime = function formatTime(_a) {
80618
80619
  var hours = hour % 12 + (period === 'pm' ? 12 : 0);
80619
80620
  return "".concat(String(hours).padStart(2, '0'), ":").concat(String(minute).padStart(2, '0'));
80620
80621
  };
80622
+ var toDateTime = function toDateTime(date, _a) {
80623
+ var period = _a.period,
80624
+ hour = _a.hour,
80625
+ minute = _a.minute;
80626
+ if (!date || !period || hour === null || minute === null) {
80627
+ return null;
80628
+ }
80629
+ var hours = hour % 12 + (period === 'pm' ? 12 : 0);
80630
+ var value = new Date(date.getTime());
80631
+ value.setHours(hours, minute, 0, 0);
80632
+ if (!isSameDay$1(date, value) || value.getHours() !== hours || value.getMinutes() !== minute) {
80633
+ return null;
80634
+ }
80635
+ return value;
80636
+ };
80637
+ var ceilToMinute = function ceilToMinute(date) {
80638
+ return new Date(Math.ceil(date.getTime() / millisecondsInMinute) * millisecondsInMinute);
80639
+ };
80640
+ var toMinuteOfDay = function toMinuteOfDay(hour, minute) {
80641
+ return hour * 60 + minute;
80642
+ };
80621
80643
  var minuteOptions = function minuteOptions(step, current) {
80622
80644
  var interval = Number.isInteger(step) && step > 0 ? step : 5;
80623
80645
  var minutes = Array.from({
@@ -91389,6 +91411,7 @@ function TimeColumn(_a) {
91389
91411
  var label = _a.label,
91390
91412
  values = _a.values,
91391
91413
  value = _a.value,
91414
+ isDisabled = _a.isDisabled,
91392
91415
  onSelect = _a.onSelect;
91393
91416
  var columnRef = useRef(null);
91394
91417
  var optionsKey = values.join(',');
@@ -91413,6 +91436,7 @@ function TimeColumn(_a) {
91413
91436
  'is-selected': value === option
91414
91437
  }),
91415
91438
  "aria-pressed": value === option,
91439
+ disabled: isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(option),
91416
91440
  onClick: function onClick() {
91417
91441
  return onSelect(option);
91418
91442
  }
@@ -91426,9 +91450,45 @@ function TimeColumn(_a) {
91426
91450
  function TimePanel(_a) {
91427
91451
  var value = _a.value,
91428
91452
  minuteStep = _a.minuteStep,
91453
+ minTimeInMinutes = _a.minTimeInMinutes,
91454
+ maxTimeInMinutes = _a.maxTimeInMinutes,
91429
91455
  amLabel = _a.amLabel,
91430
91456
  pmLabel = _a.pmLabel,
91431
91457
  onChange = _a.onChange;
91458
+ var hours = Array.from({
91459
+ length: 12
91460
+ }, function (_, index) {
91461
+ return index + 1;
91462
+ });
91463
+ var minutes = minuteOptions(minuteStep, value.minute);
91464
+ var hasSelectableTime = function hasSelectableTime(_a) {
91465
+ var period = _a.period,
91466
+ hour = _a.hour,
91467
+ minute = _a.minute;
91468
+ var periods = period === null ? ['am', 'pm'] : [period];
91469
+ var candidateHours = hour === null ? hours : [hour];
91470
+ var candidateMinutes = minute === null ? minutes : [minute];
91471
+ return periods.some(function (candidatePeriod) {
91472
+ return candidateHours.some(function (candidateHour) {
91473
+ var hour24 = candidateHour % 12 + (candidatePeriod === 'pm' ? 12 : 0);
91474
+ return candidateMinutes.some(function (candidateMinute) {
91475
+ var timeInMinutes = toMinuteOfDay(hour24, candidateMinute);
91476
+ return (minTimeInMinutes === undefined || timeInMinutes >= minTimeInMinutes) && (maxTimeInMinutes === undefined || timeInMinutes <= maxTimeInMinutes);
91477
+ });
91478
+ });
91479
+ });
91480
+ };
91481
+ var selectTime = function selectTime(next) {
91482
+ var hour = hasSelectableTime(__assign(__assign({}, next), {
91483
+ minute: null
91484
+ })) ? next.hour : null;
91485
+ var adjusted = __assign(__assign({}, next), {
91486
+ hour: hour
91487
+ });
91488
+ onChange(__assign(__assign({}, adjusted), {
91489
+ minute: hasSelectableTime(adjusted) ? adjusted.minute : null
91490
+ }));
91491
+ };
91432
91492
  return jsxs("div", __assign({
91433
91493
  className: "maru-time-panel"
91434
91494
  }, {
@@ -91444,8 +91504,13 @@ function TimePanel(_a) {
91444
91504
  'is-selected': value.period === 'am'
91445
91505
  }),
91446
91506
  "aria-pressed": value.period === 'am',
91507
+ disabled: !hasSelectableTime({
91508
+ period: 'am',
91509
+ hour: null,
91510
+ minute: null
91511
+ }),
91447
91512
  onClick: function onClick() {
91448
- return onChange(__assign(__assign({}, value), {
91513
+ return selectTime(__assign(__assign({}, value), {
91449
91514
  period: 'am'
91450
91515
  }));
91451
91516
  }
@@ -91458,8 +91523,13 @@ function TimePanel(_a) {
91458
91523
  'is-selected': value.period === 'pm'
91459
91524
  }),
91460
91525
  "aria-pressed": value.period === 'pm',
91526
+ disabled: !hasSelectableTime({
91527
+ period: 'pm',
91528
+ hour: null,
91529
+ minute: null
91530
+ }),
91461
91531
  onClick: function onClick() {
91462
- return onChange(__assign(__assign({}, value), {
91532
+ return selectTime(__assign(__assign({}, value), {
91463
91533
  period: 'pm'
91464
91534
  }));
91465
91535
  }
@@ -91468,21 +91538,28 @@ function TimePanel(_a) {
91468
91538
  }))]
91469
91539
  })), jsx(TimeColumn, {
91470
91540
  label: "\uC2DC",
91471
- values: Array.from({
91472
- length: 12
91473
- }, function (_, index) {
91474
- return index + 1;
91475
- }),
91541
+ values: hours,
91476
91542
  value: value.hour,
91543
+ isDisabled: function isDisabled(hour) {
91544
+ return !hasSelectableTime(__assign(__assign({}, value), {
91545
+ hour: hour,
91546
+ minute: null
91547
+ }));
91548
+ },
91477
91549
  onSelect: function onSelect(hour) {
91478
- return onChange(__assign(__assign({}, value), {
91550
+ return selectTime(__assign(__assign({}, value), {
91479
91551
  hour: hour
91480
91552
  }));
91481
91553
  }
91482
91554
  }), jsx(TimeColumn, {
91483
91555
  label: "\uBD84",
91484
- values: minuteOptions(minuteStep, value.minute),
91556
+ values: minutes,
91485
91557
  value: value.minute,
91558
+ isDisabled: function isDisabled(minute) {
91559
+ return !hasSelectableTime(__assign(__assign({}, value), {
91560
+ minute: minute
91561
+ }));
91562
+ },
91486
91563
  onSelect: function onSelect(minute) {
91487
91564
  return onChange(__assign(__assign({}, value), {
91488
91565
  minute: minute
@@ -91852,13 +91929,12 @@ function DatePickerWrapper(_a) {
91852
91929
  }, {
91853
91930
  children: [jsx("span", {
91854
91931
  children: timeRequired ? '시간설정 (필수)' : '시간설정'
91855
- }), jsx(Toggle, {
91932
+ }), !timeRequired && jsx(Toggle, {
91856
91933
  "aria-label": "\uC2DC\uAC04 \uC124\uC815",
91857
91934
  onClick: function onClick(event) {
91858
91935
  return event.stopPropagation();
91859
91936
  },
91860
91937
  checked: hasTime,
91861
- disabled: timeRequired,
91862
91938
  onChange: setTimeEnabled
91863
91939
  })]
91864
91940
  })), jsxs("div", __assign({
@@ -92046,6 +92122,7 @@ function DateRangeContent(_a) {
92046
92122
  endDate = _a.endDate,
92047
92123
  timeValue = _a.timeValue,
92048
92124
  minStartDate = _a.minStartDate,
92125
+ minStartDateTime = _a.minStartDateTime,
92049
92126
  maxDate = _a.maxDate,
92050
92127
  _b = _a.showTime,
92051
92128
  showTime = _b === void 0 ? true : _b,
@@ -92065,6 +92142,7 @@ function DateRangeContent(_a) {
92065
92142
  validate = _a.validate,
92066
92143
  onSaveClick = _a.onSaveClick,
92067
92144
  onClose = _a.onClose;
92145
+ var minBound = minStartDateTime !== null && minStartDateTime !== void 0 ? minStartDateTime : minStartDate;
92068
92146
  var _j = useState(function () {
92069
92147
  return {
92070
92148
  start: validDay(startDate),
@@ -92085,16 +92163,14 @@ function DateRangeContent(_a) {
92085
92163
  panel = _l[0],
92086
92164
  setPanel = _l[1];
92087
92165
  var escapeFromMenu = useRef(false);
92088
- var min = validDay(minStartDate);
92166
+ var minDateTime = showTime && minStartDateTime && isValid$1(minStartDateTime) ? ceilToMinute(minStartDateTime) : validDay(minBound);
92167
+ var min = validDay(minDateTime);
92089
92168
  var max = validDay(maxDate);
92090
- var invalidBounds = !!(minStartDate && !min || maxDate && !max || min && max && min > max);
92091
- var startTime = formatTime(times.start);
92092
- var endTime = formatTime(times.end);
92093
- var outOfBounds = [dates.start, dates.end].some(function (date) {
92094
- return date && (min && date < min || max && date > max);
92095
- });
92096
- var invalidRange = !!(dates.start && dates.end && (dates.start > dates.end || showTime && isSameDay$1(dates.start, dates.end) && startTime && endTime && startTime > endTime));
92097
- var disabled = invalidBounds || outOfBounds || invalidRange || !dates.start || !dates.end || showTime && (!startTime || !endTime);
92169
+ var invalidBounds = !!(minBound && !min || maxDate && !max || min && max && min > max);
92170
+ var startDateTime = showTime ? toDateTime(dates.start, times.start) : dates.start;
92171
+ var endDateTime = showTime ? toDateTime(dates.end, times.end) : dates.end;
92172
+ var invalidRange = !!(startDateTime && endDateTime && startDateTime > endDateTime || startDateTime && minDateTime && startDateTime < minDateTime || dates.end && max && dates.end > max);
92173
+ var disabled = invalidBounds || invalidRange || !startDateTime || !endDateTime;
92098
92174
  var clampDate = function clampDate(date) {
92099
92175
  if (min && date < min) {
92100
92176
  return min;
@@ -92104,6 +92180,30 @@ function DateRangeContent(_a) {
92104
92180
  }
92105
92181
  return date;
92106
92182
  };
92183
+ var getTimeBounds = function getTimeBounds(target) {
92184
+ var date = dates[target];
92185
+ var minTimeInMinutes = 0;
92186
+ var maxTimeInMinutes;
92187
+ if (!date) {
92188
+ return {
92189
+ minTimeInMinutes: minTimeInMinutes,
92190
+ maxTimeInMinutes: maxTimeInMinutes
92191
+ };
92192
+ }
92193
+ if (minDateTime && isSameDay$1(date, minDateTime)) {
92194
+ minTimeInMinutes = toMinuteOfDay(minDateTime.getHours(), minDateTime.getMinutes());
92195
+ }
92196
+ if (target === 'end' && startDateTime && isSameDay$1(date, startDateTime)) {
92197
+ minTimeInMinutes = Math.max(minTimeInMinutes, toMinuteOfDay(startDateTime.getHours(), startDateTime.getMinutes()));
92198
+ }
92199
+ if (target === 'start' && endDateTime && isSameDay$1(date, endDateTime)) {
92200
+ maxTimeInMinutes = toMinuteOfDay(endDateTime.getHours(), endDateTime.getMinutes());
92201
+ }
92202
+ return {
92203
+ minTimeInMinutes: minTimeInMinutes,
92204
+ maxTimeInMinutes: maxTimeInMinutes
92205
+ };
92206
+ };
92107
92207
  var togglePanel = function togglePanel(target, type) {
92108
92208
  setPanel(function (previous) {
92109
92209
  return (previous === null || previous === void 0 ? void 0 : previous.target) === target && previous.type === type ? null : {
@@ -92118,6 +92218,8 @@ function DateRangeContent(_a) {
92118
92218
  }
92119
92219
  var start = format(dates.start, 'yyyy-MM-dd');
92120
92220
  var end = format(dates.end, 'yyyy-MM-dd');
92221
+ var startTime = formatTime(times.start);
92222
+ var endTime = formatTime(times.end);
92121
92223
  var time = showTime ? {
92122
92224
  startTime: startTime,
92123
92225
  endTime: endTime
@@ -92138,6 +92240,11 @@ function DateRangeContent(_a) {
92138
92240
  var active = (panel === null || panel === void 0 ? void 0 : panel.target) === target;
92139
92241
  var panelMin = target === 'end' && dates.start ? clampDate(dates.start) : min;
92140
92242
  var panelMax = target === 'start' && dates.end ? clampDate(dates.end) : max;
92243
+ var calendarMin = invalidBounds ? min !== null && min !== void 0 ? min : minBound : panelMin;
92244
+ var calendarMax = invalidBounds ? maxDate : panelMax;
92245
+ var _a = getTimeBounds(target),
92246
+ minTimeInMinutes = _a.minTimeInMinutes,
92247
+ maxTimeInMinutes = _a.maxTimeInMinutes;
92141
92248
  return jsxs("div", __assign({
92142
92249
  className: "maru-date-range-picker-section"
92143
92250
  }, {
@@ -92181,8 +92288,8 @@ function DateRangeContent(_a) {
92181
92288
  }, {
92182
92289
  children: (panel === null || panel === void 0 ? void 0 : panel.type) === 'date' ? jsx(CalendarPanel, {
92183
92290
  selected: date,
92184
- minDate: invalidBounds ? minStartDate : panelMin,
92185
- maxDate: invalidBounds ? maxDate : panelMax,
92291
+ minDate: calendarMin,
92292
+ maxDate: calendarMax,
92186
92293
  appearance: "outline",
92187
92294
  onSelect: function onSelect(nextDate) {
92188
92295
  setDates(function (previous) {
@@ -92193,6 +92300,8 @@ function DateRangeContent(_a) {
92193
92300
  }, "".concat(target, "-date")) : jsx(TimePanel, {
92194
92301
  value: times[target],
92195
92302
  minuteStep: minuteStep,
92303
+ minTimeInMinutes: minTimeInMinutes,
92304
+ maxTimeInMinutes: maxTimeInMinutes,
92196
92305
  amLabel: amLabel,
92197
92306
  pmLabel: pmLabel,
92198
92307
  onChange: function onChange(value) {
@@ -93118,7 +93227,7 @@ styleInject(css_248z$7);
93118
93227
 
93119
93228
  function MultiSelectDropdown(_a) {
93120
93229
  var _b;
93121
- var _c, _d, _e;
93230
+ var _c, _d;
93122
93231
  var data = _a.data,
93123
93232
  selectedIds = _a.selectedIds,
93124
93233
  onSelect = _a.onSelect,
@@ -93128,20 +93237,20 @@ function MultiSelectDropdown(_a) {
93128
93237
  className = _a.className,
93129
93238
  placeholder = _a.placeholder,
93130
93239
  searchPlaceholder = _a.searchPlaceholder,
93131
- _f = _a.disabled,
93132
- disabled = _f === void 0 ? false : _f,
93133
- _g = _a.color,
93134
- color = _g === void 0 ? 'primary' : _g,
93240
+ _e = _a.disabled,
93241
+ disabled = _e === void 0 ? false : _e,
93242
+ _f = _a.color,
93243
+ color = _f === void 0 ? 'primary' : _f,
93135
93244
  stopPropagation = _a.stopPropagation,
93136
- _h = _a.type,
93137
- type = _h === void 0 ? 'button' : _h,
93138
- _j = _a.variant,
93139
- variant = _j === void 0 ? 'default' : _j,
93245
+ _g = _a.type,
93246
+ type = _g === void 0 ? 'button' : _g,
93247
+ _h = _a.variant,
93248
+ variant = _h === void 0 ? 'default' : _h,
93140
93249
  formatSelectedCount = _a.formatSelectedCount,
93141
93250
  actionContent = _a.actionContent,
93142
93251
  onAction = _a.onAction,
93143
- _k = _a.actionDisabled,
93144
- actionDisabled = _k === void 0 ? false : _k,
93252
+ _j = _a.actionDisabled,
93253
+ actionDisabled = _j === void 0 ? false : _j,
93145
93254
  actionAriaLabel = _a.actionAriaLabel,
93146
93255
  clearAriaLabel = _a.clearAriaLabel,
93147
93256
  searchAriaLabel = _a.searchAriaLabel,
@@ -93158,12 +93267,12 @@ function MultiSelectDropdown(_a) {
93158
93267
  width = _a.width,
93159
93268
  height = _a.height,
93160
93269
  anchorEl = _a.anchorEl;
93161
- var _l = useState(false),
93162
- open = _l[0],
93163
- setOpen = _l[1];
93164
- var _m = useState('selected'),
93165
- initialFocus = _m[0],
93166
- setInitialFocus = _m[1];
93270
+ var _k = useState(false),
93271
+ open = _k[0],
93272
+ setOpen = _k[1];
93273
+ var _l = useState('selected'),
93274
+ initialFocus = _l[0],
93275
+ setInitialFocus = _l[1];
93167
93276
  var controlRef = useRef(null);
93168
93277
  var triggerRef = useRef(null);
93169
93278
  var id = "maru-multi-select-dropdown-".concat(useId$1());
@@ -93172,10 +93281,10 @@ function MultiSelectDropdown(_a) {
93172
93281
  var hasAction = (variant === 'button' || variant === 'button-tag') && actionContent != null;
93173
93282
  var ids = Array.from(new Set(selectedIds));
93174
93283
  var count = ids.length;
93175
- var singleLabel = (_e = (_d = (_c = data.find(function (item) {
93284
+ var singleLabel = (_d = content !== null && content !== void 0 ? content : (_c = data.find(function (item) {
93176
93285
  return item[idKey] === ids[0];
93177
- })) === null || _c === void 0 ? void 0 : _c[displayKey]) !== null && _d !== void 0 ? _d : content) !== null && _e !== void 0 ? _e : placeholder;
93178
- var summary = count >= 2 ? formatSelectedCount ? formatSelectedCount(count) : content !== null && content !== void 0 ? content : count : singleLabel;
93286
+ })) === null || _c === void 0 ? void 0 : _c[displayKey]) !== null && _d !== void 0 ? _d : placeholder;
93287
+ var summary = count >= 2 ? content !== null && content !== void 0 ? content : formatSelectedCount ? formatSelectedCount(count) : count : singleLabel;
93179
93288
  var selectionContent = variant === 'button-tag' && count > 0 ? jsx(Chip, __assign({
93180
93289
  color: "secondary",
93181
93290
  size: "normal"
@@ -94612,7 +94721,7 @@ function THead(_a) {
94612
94721
  }));
94613
94722
  }
94614
94723
 
94615
- var css_248z$2 = "@-webkit-keyframes rotate {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n@keyframes rotate {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n@-webkit-keyframes blink {\n 0% {\n opacity: 0.6;\n }\n 20% {\n opacity: 1;\n }\n 50% {\n opacity: 0;\n }\n 100% {\n opacity: 0.6;\n }\n}\n@keyframes blink {\n 0% {\n opacity: 0.6;\n }\n 20% {\n opacity: 1;\n }\n 50% {\n opacity: 0;\n }\n 100% {\n opacity: 0.6;\n }\n}\n@-webkit-keyframes fadein {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n@keyframes fadein {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n.maru-popover.maru-table-body-kebab-popover {\n border-radius: 12px;\n border: 1px solid var(--maru-border-primary);\n background-color: var(--maru-background-primary);\n box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.07);\n overflow: hidden;\n}\n.maru-popover.maru-table-body-kebab-popover .maru-button {\n width: 100%;\n border-radius: 0;\n}\n\n.maru-table-wrapper {\n width: 100%;\n background-color: var(--maru-background-secondary);\n border: 1px solid var(--maru-border-secondary);\n border-radius: 12px;\n overflow-x: auto;\n}\n.maru-table-wrapper .maru-table-header-wrapper {\n background-color: var(--maru-background-secondary);\n}\n.maru-table-wrapper .maru-table-header-wrapper,\n.maru-table-wrapper .maru-table-body-wrapper {\n width: 100%;\n}\n.maru-table-wrapper tr {\n height: 48px;\n}\n.maru-table-wrapper th,\n.maru-table-wrapper td {\n text-align: start;\n vertical-align: middle;\n padding: 14px 16px;\n word-break: break-word;\n color: var(--maru-text-primary);\n}\n.maru-table-wrapper th:first-of-type,\n.maru-table-wrapper td:first-of-type {\n padding: 14px 16px;\n}\n.maru-table-wrapper .checkbox-td {\n padding: 0 0 0 16px !important;\n}\n.maru-table-wrapper .checkbox-td + th, .maru-table-wrapper .checkbox-td + td {\n padding-left: 12px !important;\n}\n.maru-table-wrapper .radio-td {\n padding: 0 0 0 16px !important;\n}\n.maru-table-wrapper .radio-td + th, .maru-table-wrapper .radio-td + td {\n padding-left: 12px !important;\n}\n.maru-table-wrapper .radio-td .maru-table-header-radio-spacer {\n visibility: hidden;\n pointer-events: none;\n}\n.maru-table-wrapper .maru-table-header tr {\n height: 40px;\n border-bottom: 1px solid var(--maru-border-secondary);\n}\n.maru-table-wrapper .maru-table-header tr th {\n padding: 12px 16px;\n color: var(--maru-text-tertiary);\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n letter-spacing: 0;\n font-size: 12px;\n font-weight: 600;\n line-height: 16px;\n letter-spacing: 0;\n}\n.maru-table-wrapper .maru-table-header .filter-th {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 16.5px;\n}\n.maru-table-wrapper .maru-table-header .filter-th.toggle-on .filter-box {\n width: 100%;\n height: 33px;\n}\n.maru-table-wrapper .maru-table-header .filter-buttons-th.toggle-on {\n padding: 18px 15px 16px 15px;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n}\n.maru-table-wrapper .maru-table-header .filter-buttons-th.toggle-on .filter-buttons-wrapper {\n height: 67px;\n}\n.maru-table-wrapper .maru-table-header .filter-buttons-th .filter-buttons-wrapper {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n}\n.maru-table-wrapper .maru-table-header .filter-buttons-th .filter-buttons-wrapper .reset-button {\n margin-bottom: 8px;\n}\n.maru-table-wrapper .maru-table-header .maru-table-header-label {\n display: inline-flex;\n align-items: center;\n height: 16px;\n}\n.maru-table-wrapper .maru-table-header .maru-table-header-sortable {\n padding: unset;\n margin: unset;\n min-height: unset;\n color: var(--maru-text-tertiary);\n gap: 4px;\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n letter-spacing: 0;\n font-size: 12px;\n font-weight: 600;\n line-height: 16px;\n letter-spacing: 0;\n}\n.maru-table-wrapper .maru-table-header .maru-table-header-sortable:hover {\n background-color: transparent;\n}\n.maru-table-wrapper .maru-table-header .maru-table-header-sortable .maru-button-default-icon,\n.maru-table-wrapper .maru-table-header .maru-table-header-sortable .maru-button-default-icon svg {\n width: 12px;\n height: 12px;\n}\n.maru-table-wrapper .maru-table-header .sort-icon-wrapper-th {\n display: flex;\n align-items: center;\n}\n.maru-table-wrapper .maru-table-body-scroll-wrapper {\n background-color: var(--maru-background-primary);\n overflow-y: auto;\n}\n.maru-table-wrapper .maru-table-body-scroll-wrapper .maru-table-scroll {\n overflow-y: auto;\n}\n.maru-table-wrapper .maru-table-body tr:not(:last-of-type) {\n border-bottom: 1px solid var(--maru-border-secondary);\n}\n.maru-table-wrapper .maru-table-body tr:hover,\n.maru-table-wrapper .maru-table-body .clickable-row:hover,\n.maru-table-wrapper .maru-table-body .checked-row,\n.maru-table-wrapper .maru-table-body .highlight-row,\n.maru-table-wrapper .maru-table-body .selected-row {\n background-color: var(--maru-background-primary-hover);\n}\n.maru-table-wrapper .maru-table-body .disabled-row,\n.maru-table-wrapper .maru-table-body .disabled-row:hover {\n color: var(--maru-text-disabled);\n background-color: var(--maru-background-primary);\n cursor: default;\n}\n.maru-table-wrapper .maru-table-body .disabled-row td,\n.maru-table-wrapper .maru-table-body .disabled-row:hover td {\n color: var(--maru-text-disabled);\n}\n.maru-table-wrapper .maru-table-body td {\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n letter-spacing: 0;\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n letter-spacing: 0;\n}\n.maru-table-wrapper .maru-table-body tr:last-of-type td:first-of-type {\n border-bottom-left-radius: 12px;\n}\n.maru-table-wrapper .maru-table-body tr:last-of-type td:last-of-type {\n border-bottom-right-radius: 12px;\n}\n.maru-table-wrapper .maru-table-body .clickable-row {\n cursor: pointer;\n}\n.maru-table-wrapper .maru-table-body-kebab-td .maru-table-body-kebab-wrapper {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n.maru-table-wrapper .maru-table-body-bin-button-td .maru-table-body-bin-button-wrapper {\n display: flex;\n flex-direction: column;\n}\n.maru-table-wrapper .maru-table-body-kebab {\n margin: unset;\n padding: unset;\n height: auto;\n width: -webkit-fit-content;\n width: -moz-fit-content;\n width: fit-content;\n}\n.maru-table-wrapper .maru-table-body-empty-tr > td {\n width: 100%;\n vertical-align: middle;\n text-align: center;\n}\n.maru-table-wrapper .maru-table-body-empty-tr > td p {\n margin-top: 20px;\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n letter-spacing: 0;\n font-size: 14px;\n font-weight: 400;\n color: var(--maru-text-tertiary);\n}\n.maru-table-wrapper .maru-table-body-empty-tr:hover {\n background-color: inherit !important;\n}\n.maru-table-wrapper .maru-table-body-empty-tr .loading-wrapper {\n -webkit-animation: blink 1s infinite;\n animation: blink 1s infinite;\n}";
94724
+ var css_248z$2 = "@-webkit-keyframes rotate {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n@keyframes rotate {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n@-webkit-keyframes blink {\n 0% {\n opacity: 0.6;\n }\n 20% {\n opacity: 1;\n }\n 50% {\n opacity: 0;\n }\n 100% {\n opacity: 0.6;\n }\n}\n@keyframes blink {\n 0% {\n opacity: 0.6;\n }\n 20% {\n opacity: 1;\n }\n 50% {\n opacity: 0;\n }\n 100% {\n opacity: 0.6;\n }\n}\n@-webkit-keyframes fadein {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n@keyframes fadein {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n.maru-popover.maru-table-body-kebab-popover {\n border-radius: 12px;\n border: 1px solid var(--maru-border-primary);\n background-color: var(--maru-background-primary);\n box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.07);\n overflow: hidden;\n}\n.maru-popover.maru-table-body-kebab-popover .maru-button {\n width: 100%;\n border-radius: 0;\n}\n\n.maru-table-wrapper {\n width: 100%;\n background-color: var(--maru-background-secondary);\n border: 1px solid var(--maru-border-secondary);\n border-radius: 12px;\n overflow-x: auto;\n}\n.maru-table-wrapper .maru-table-header-wrapper {\n background-color: var(--maru-background-secondary);\n}\n.maru-table-wrapper .maru-table-header-wrapper,\n.maru-table-wrapper .maru-table-body-wrapper {\n width: 100%;\n}\n.maru-table-wrapper tr {\n height: 48px;\n}\n.maru-table-wrapper th,\n.maru-table-wrapper td {\n text-align: start;\n vertical-align: middle;\n padding: 13px 16px;\n word-break: break-word;\n color: var(--maru-text-primary);\n}\n.maru-table-wrapper th:first-of-type,\n.maru-table-wrapper td:first-of-type {\n padding: 13px 16px;\n}\n.maru-table-wrapper .checkbox-td {\n padding: 0 0 0 16px !important;\n}\n.maru-table-wrapper .checkbox-td + th, .maru-table-wrapper .checkbox-td + td {\n padding-left: 12px !important;\n}\n.maru-table-wrapper .radio-td {\n padding: 0 0 0 16px !important;\n}\n.maru-table-wrapper .radio-td + th, .maru-table-wrapper .radio-td + td {\n padding-left: 12px !important;\n}\n.maru-table-wrapper .radio-td .maru-table-header-radio-spacer {\n visibility: hidden;\n pointer-events: none;\n}\n.maru-table-wrapper .maru-table-header tr {\n height: 40px;\n border-bottom: 1px solid var(--maru-border-secondary);\n}\n.maru-table-wrapper .maru-table-header tr th {\n padding: 11px 16px;\n color: var(--maru-text-tertiary);\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n letter-spacing: 0;\n font-size: 12px;\n font-weight: 600;\n line-height: 16px;\n letter-spacing: 0;\n}\n.maru-table-wrapper .maru-table-header .filter-th {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 16.5px;\n}\n.maru-table-wrapper .maru-table-header .filter-th.toggle-on .filter-box {\n width: 100%;\n height: 33px;\n}\n.maru-table-wrapper .maru-table-header .filter-buttons-th.toggle-on {\n padding: 18px 15px 16px 15px;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n}\n.maru-table-wrapper .maru-table-header .filter-buttons-th.toggle-on .filter-buttons-wrapper {\n height: 67px;\n}\n.maru-table-wrapper .maru-table-header .filter-buttons-th .filter-buttons-wrapper {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n}\n.maru-table-wrapper .maru-table-header .filter-buttons-th .filter-buttons-wrapper .reset-button {\n margin-bottom: 8px;\n}\n.maru-table-wrapper .maru-table-header .maru-table-header-label {\n display: inline-flex;\n align-items: center;\n height: 16px;\n}\n.maru-table-wrapper .maru-table-header .maru-table-header-sortable {\n padding: unset;\n margin: unset;\n min-height: unset;\n color: var(--maru-text-tertiary);\n gap: 4px;\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n letter-spacing: 0;\n font-size: 12px;\n font-weight: 600;\n line-height: 16px;\n letter-spacing: 0;\n}\n.maru-table-wrapper .maru-table-header .maru-table-header-sortable:hover {\n background-color: transparent;\n}\n.maru-table-wrapper .maru-table-header .maru-table-header-sortable .maru-button-default-icon,\n.maru-table-wrapper .maru-table-header .maru-table-header-sortable .maru-button-default-icon svg {\n width: 12px;\n height: 12px;\n}\n.maru-table-wrapper .maru-table-header .sort-icon-wrapper-th {\n display: flex;\n align-items: center;\n}\n.maru-table-wrapper .maru-table-body-scroll-wrapper {\n background-color: var(--maru-background-primary);\n overflow-y: auto;\n}\n.maru-table-wrapper .maru-table-body-scroll-wrapper .maru-table-scroll {\n overflow-y: auto;\n}\n.maru-table-wrapper .maru-table-body tr:not(:last-of-type) {\n border-bottom: 1px solid var(--maru-border-secondary);\n}\n.maru-table-wrapper .maru-table-body tr:hover,\n.maru-table-wrapper .maru-table-body .clickable-row:hover,\n.maru-table-wrapper .maru-table-body .checked-row,\n.maru-table-wrapper .maru-table-body .highlight-row,\n.maru-table-wrapper .maru-table-body .selected-row {\n background-color: var(--maru-background-primary-hover);\n}\n.maru-table-wrapper .maru-table-body .disabled-row,\n.maru-table-wrapper .maru-table-body .disabled-row:hover {\n color: var(--maru-text-disabled);\n background-color: var(--maru-background-primary);\n cursor: default;\n}\n.maru-table-wrapper .maru-table-body .disabled-row td,\n.maru-table-wrapper .maru-table-body .disabled-row:hover td {\n color: var(--maru-text-disabled);\n}\n.maru-table-wrapper .maru-table-body td {\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n letter-spacing: 0;\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n letter-spacing: 0;\n}\n.maru-table-wrapper .maru-table-body tr:last-of-type td:first-of-type {\n border-bottom-left-radius: 12px;\n}\n.maru-table-wrapper .maru-table-body tr:last-of-type td:last-of-type {\n border-bottom-right-radius: 12px;\n}\n.maru-table-wrapper .maru-table-body .clickable-row {\n cursor: pointer;\n}\n.maru-table-wrapper .maru-table-body-kebab-td .maru-table-body-kebab-wrapper {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n.maru-table-wrapper .maru-table-body-bin-button-td .maru-table-body-bin-button-wrapper {\n display: flex;\n flex-direction: column;\n}\n.maru-table-wrapper .maru-table-body-kebab {\n margin: unset;\n padding: unset;\n height: auto;\n width: -webkit-fit-content;\n width: -moz-fit-content;\n width: fit-content;\n}\n.maru-table-wrapper .maru-table-body-empty-tr > td {\n width: 100%;\n vertical-align: middle;\n text-align: center;\n}\n.maru-table-wrapper .maru-table-body-empty-tr > td p {\n margin-top: 20px;\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n letter-spacing: 0;\n font-size: 14px;\n font-weight: 400;\n color: var(--maru-text-tertiary);\n}\n.maru-table-wrapper .maru-table-body-empty-tr:hover {\n background-color: inherit !important;\n}\n.maru-table-wrapper .maru-table-body-empty-tr .loading-wrapper {\n -webkit-animation: blink 1s infinite;\n animation: blink 1s infinite;\n}";
94616
94725
  styleInject(css_248z$2);
94617
94726
 
94618
94727
  // eslint-disable-next-line import/prefer-default-export
@@ -95148,7 +95257,7 @@ function Details(_a) {
95148
95257
  }));
95149
95258
  }
95150
95259
 
95151
- var css_248z = "@charset \"UTF-8\";\n.maru-toast-style {\n position: relative;\n box-sizing: border-box;\n width: 380px;\n max-width: calc(100vw - 32px);\n padding: 16px;\n border: 0;\n border-radius: 12px;\n background-color: var(--maru-background-primary);\n box-shadow: inset 0 0 0 1px var(--maru-border-secondary), 0 6px 8px rgba(0, 0, 0, 0.07);\n color: var(--maru-text-primary);\n}\n.maru-toast-style .maru-toast-style-row {\n display: flex;\n width: 100%;\n min-width: 0;\n}\n.maru-toast-style .maru-toast-style-content {\n display: flex;\n flex: 1;\n gap: 8px;\n min-width: 0;\n}\n.maru-toast-style .maru-toast-style-content-inline {\n flex-direction: row;\n align-items: flex-start;\n}\n.maru-toast-style.maru-toast-style-message .maru-toast-style-content-inline {\n align-items: center;\n}\n.maru-toast-style .maru-toast-style-content-stacked {\n flex-direction: column;\n align-items: flex-start;\n}\n.maru-toast-style:not(.maru-toast-style-custom-close) .maru-toast-style-content {\n padding-right: 40px;\n}\n.maru-toast-style .maru-toast-style-status-icon {\n display: flex;\n width: 24px;\n height: 24px;\n flex: 0 0 24px;\n align-items: center;\n justify-content: center;\n}\n.maru-toast-style .maru-toast-style-status-icon svg {\n display: block;\n width: 24px;\n height: 24px;\n}\n.maru-toast-style.maru-toast-style-message.maru-toast-style-stacked .maru-toast-style-status-icon {\n width: 32px;\n height: 32px;\n flex-basis: 32px;\n}\n.maru-toast-style.maru-toast-style-message.maru-toast-style-stacked .maru-toast-style-status-icon svg {\n width: 32px;\n height: 32px;\n}\n.maru-toast-style .maru-toast-style-copy {\n display: flex;\n flex: 1;\n flex-direction: column;\n gap: 4px;\n min-width: 0;\n}\n.maru-toast-style .maru-toast-style-message-text,\n.maru-toast-style .maru-toast-style-title,\n.maru-toast-style .maru-toast-style-description-text {\n margin: 0;\n overflow-wrap: anywhere;\n}\n.maru-toast-style .maru-toast-style-message-text {\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n letter-spacing: 0;\n font-size: 14px;\n font-weight: 500;\n line-height: 20px;\n}\n.maru-toast-style .maru-toast-style-title {\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n letter-spacing: 0;\n font-size: 14px;\n font-weight: 600;\n line-height: 20px;\n}\n.maru-toast-style .maru-toast-style-title span {\n display: inline;\n margin-left: 5px;\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n letter-spacing: 0;\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n}\n.maru-toast-style .maru-toast-style-description-text {\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n letter-spacing: 0;\n font-size: 14px;\n font-weight: 400;\n color: var(--maru-text-secondary);\n line-height: 20px;\n}\n.maru-toast-style .maru-toast-snackbar-button,\n.maru-toast-style .maru-toast-revert-button {\n border: 0;\n border-radius: 4px;\n background-color: transparent;\n color: var(--maru-text-brand);\n cursor: pointer;\n white-space: nowrap;\n}\n.maru-toast-style .maru-toast-snackbar-button:hover,\n.maru-toast-style .maru-toast-revert-button:hover {\n color: var(--maru-text-brand-hover);\n}\n.maru-toast-style .maru-toast-snackbar-button:focus-visible,\n.maru-toast-style .maru-toast-revert-button:focus-visible {\n outline: 2px solid var(--maru-border-brand-primary);\n outline-offset: 2px;\n}\n.maru-toast-style .maru-toast-revert-button {\n align-self: flex-start;\n padding: 0 2px;\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n letter-spacing: 0;\n font-size: 14px;\n font-weight: 600;\n line-height: 20px;\n}\n.maru-toast-style .maru-toast-snackbar-button {\n flex-shrink: 0;\n align-self: flex-start;\n margin-left: 8px;\n padding: 2px;\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n letter-spacing: 0;\n font-size: 12px;\n font-weight: 600;\n line-height: 20px;\n text-decoration: underline;\n}\n.maru-toast-style .maru-toast-close-button {\n position: absolute;\n top: 9px;\n right: 9px;\n width: 32px;\n height: 32px;\n min-height: 32px;\n padding: 8px;\n border-radius: 8px;\n background-color: var(--maru-background-primary);\n}\n.maru-toast-style .maru-toast-close-button .maru-button-default-icon,\n.maru-toast-style .maru-toast-close-button .maru-button-default-icon svg {\n width: 16px;\n height: 16px;\n}\n.maru-toast-style .maru-toast-close-button:hover {\n background-color: var(--maru-background-primary-hover);\n}\n.maru-toast-style .maru-toast-close-button:focus-visible {\n outline: 2px solid var(--maru-border-brand-primary);\n outline-offset: 2px;\n}\n.maru-toast-style.maru-toast-style-has-details {\n padding: 24px;\n border: 1px solid var(--maru-border-secondary);\n border-radius: 16px;\n box-shadow: 0 6px 8px rgba(0, 0, 0, 0.07);\n}\n.maru-toast-style.maru-toast-style-has-details:not(.maru-toast-style-custom-close) .maru-toast-style-content {\n padding-right: 0;\n}\n.maru-toast-style.maru-toast-style-has-details.maru-toast-style-message .maru-toast-style-content-inline {\n align-items: flex-start;\n}\n.maru-toast-style.maru-toast-style-has-details .maru-toast-style-content {\n align-items: flex-start;\n}\n.maru-toast-style.maru-toast-style-has-details:not(.maru-toast-style-custom-close) .maru-toast-style-message-text,\n.maru-toast-style.maru-toast-style-has-details:not(.maru-toast-style-custom-close) .maru-toast-style-title {\n padding-right: 40px;\n}\n.maru-toast-style.maru-toast-style-has-details .maru-toast-style-copy {\n gap: 2px;\n padding-top: 2px;\n}\n.maru-toast-style.maru-toast-style-has-details .maru-toast-style-content-stacked .maru-toast-style-copy {\n width: 100%;\n align-self: stretch;\n}\n.maru-toast-style.maru-toast-style-has-details .maru-toast-style-message-text {\n padding-bottom: 16px;\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n letter-spacing: 0;\n font-size: 14px;\n font-weight: 600;\n}\n.maru-toast-style.maru-toast-style-has-details .maru-toast-close-button {\n top: 13px;\n right: 13px;\n}\n.maru-toast-style .maru-toast-details {\n display: flex;\n width: 100%;\n box-sizing: border-box;\n flex-direction: column;\n gap: 2px;\n padding: 0;\n margin: 0;\n background-color: transparent;\n color: var(--maru-text-secondary);\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n letter-spacing: 0;\n font-size: 14px;\n font-weight: 400;\n}\n.maru-toast-style .maru-toast-details details {\n width: 100%;\n}\n.maru-toast-style .maru-toast-details summary {\n display: flex;\n min-height: 32px;\n box-sizing: border-box;\n gap: 4px;\n align-items: center;\n padding: 6px 8px;\n border-radius: 6px;\n list-style: none;\n margin: 0;\n white-space: pre-wrap;\n cursor: pointer;\n line-height: 20px;\n}\n.maru-toast-style .maru-toast-details summary::marker {\n content: \"\";\n}\n.maru-toast-style .maru-toast-details summary::-webkit-details-marker {\n display: none;\n}\n.maru-toast-style .maru-toast-details summary .maru-toast-details-summary-icon {\n display: flex;\n width: 16px;\n height: 16px;\n flex: 0 0 16px;\n align-items: center;\n justify-content: center;\n}\n.maru-toast-style .maru-toast-details summary .maru-toast-details-summary-icon svg {\n display: block;\n width: 16px;\n height: 16px;\n}\n.maru-toast-style .maru-toast-details summary .maru-toast-details-summary-icon-open {\n display: none;\n}\n.maru-toast-style .maru-toast-details summary .maru-toast-details-summary-text {\n min-width: 0;\n flex: 1;\n overflow-wrap: anywhere;\n}\n.maru-toast-style .maru-toast-details details[open] summary {\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n letter-spacing: 0;\n font-size: 14px;\n font-weight: 500;\n}\n.maru-toast-style .maru-toast-details details[open] summary .maru-toast-details-summary-icon-closed {\n display: none;\n}\n.maru-toast-style .maru-toast-details details[open] summary .maru-toast-details-summary-icon-open {\n display: flex;\n}\n.maru-toast-style .maru-toast-details ul {\n padding: 0;\n margin: 0;\n list-style: none;\n}\n.maru-toast-style .maru-toast-details li {\n display: flex;\n min-height: 32px;\n box-sizing: border-box;\n gap: 4px;\n align-items: center;\n padding: 6px 8px;\n line-height: 20px;\n overflow-wrap: anywhere;\n}\n.maru-toast-style .maru-toast-details li::before {\n width: 36px;\n flex: 0 0 36px;\n content: \"•\";\n text-align: right;\n}\n.maru-toast-style .maru-toast-details li .maru-toast-details-item-tooltip {\n width: 100%;\n min-width: 0;\n flex: 1;\n}\n.maru-toast-style .maru-toast-details li .maru-toast-details-item-text {\n display: block;\n width: 100%;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.maru-toast-style .maru-toast-details li .maru-toast-details-item-text:focus-visible {\n border-radius: 2px;\n outline: 2px solid var(--maru-border-brand-primary);\n outline-offset: 2px;\n}\n\n.maru-toast {\n position: relative;\n margin-bottom: 24px;\n opacity: 0;\n transform: translateX(100%);\n transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease-out;\n}\n.maru-toast.entered {\n opacity: 1;\n transform: translateX(0);\n}\n.maru-toast.fade-out {\n opacity: 0;\n transform: translateX(100%);\n}\n\n.maru-toaster {\n position: fixed;\n z-index: 6007;\n top: 120px;\n right: 24px;\n display: flex;\n flex-direction: column-reverse;\n align-items: flex-end;\n transition: transform 0.3s ease-out;\n}\n\n@media (max-width: 480px) {\n .maru-toaster {\n right: 16px;\n left: 16px;\n align-items: stretch;\n }\n .maru-toast-style {\n width: 100%;\n max-width: none;\n }\n}\n@media (prefers-reduced-motion: reduce) {\n .maru-toast,\n .maru-toaster {\n transition-duration: 1ms;\n }\n}";
95260
+ var css_248z = "@charset \"UTF-8\";\n.maru-toast-style {\n position: relative;\n box-sizing: border-box;\n width: 380px;\n max-width: calc(100vw - 32px);\n padding: 24px;\n border: 0;\n border-radius: 16px;\n background-color: var(--maru-background-primary);\n box-shadow: inset 0 0 0 1px var(--maru-border-secondary), 0 8px 16px rgba(78, 78, 78, 0.25);\n color: var(--maru-text-primary);\n}\n.maru-toast-style .maru-toast-style-row {\n display: flex;\n width: 100%;\n min-width: 0;\n}\n.maru-toast-style .maru-toast-style-content {\n display: flex;\n flex: 1;\n gap: 8px;\n min-width: 0;\n}\n.maru-toast-style .maru-toast-style-content-inline {\n flex-direction: row;\n align-items: flex-start;\n}\n.maru-toast-style.maru-toast-style-message .maru-toast-style-content-inline {\n align-items: center;\n}\n.maru-toast-style .maru-toast-style-content-stacked {\n flex-direction: column;\n align-items: flex-start;\n}\n.maru-toast-style:not(.maru-toast-style-custom-close) .maru-toast-style-content {\n padding-right: 20px;\n}\n.maru-toast-style .maru-toast-style-status-icon {\n display: flex;\n width: 24px;\n height: 24px;\n flex: 0 0 24px;\n align-items: center;\n justify-content: center;\n}\n.maru-toast-style .maru-toast-style-status-icon svg {\n display: block;\n width: 24px;\n height: 24px;\n}\n.maru-toast-style.maru-toast-style-message.maru-toast-style-stacked .maru-toast-style-status-icon {\n width: 32px;\n height: 32px;\n flex-basis: 32px;\n}\n.maru-toast-style.maru-toast-style-message.maru-toast-style-stacked .maru-toast-style-status-icon svg {\n width: 32px;\n height: 32px;\n}\n.maru-toast-style .maru-toast-style-copy {\n display: flex;\n flex: 1;\n flex-direction: column;\n gap: 4px;\n min-width: 0;\n}\n.maru-toast-style .maru-toast-style-message-text,\n.maru-toast-style .maru-toast-style-title,\n.maru-toast-style .maru-toast-style-description-text {\n margin: 0;\n overflow-wrap: anywhere;\n}\n.maru-toast-style .maru-toast-style-message-text {\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n letter-spacing: 0;\n font-size: 14px;\n font-weight: 500;\n line-height: 20px;\n}\n.maru-toast-style .maru-toast-style-title {\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n letter-spacing: 0;\n font-size: 14px;\n font-weight: 600;\n line-height: 20px;\n}\n.maru-toast-style .maru-toast-style-title span {\n display: inline;\n margin-left: 5px;\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n letter-spacing: 0;\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n}\n.maru-toast-style .maru-toast-style-description-text {\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n letter-spacing: 0;\n font-size: 14px;\n font-weight: 400;\n color: var(--maru-text-secondary);\n line-height: 20px;\n}\n.maru-toast-style .maru-toast-snackbar-button,\n.maru-toast-style .maru-toast-revert-button {\n border: 0;\n border-radius: 4px;\n background-color: transparent;\n color: var(--maru-text-brand);\n cursor: pointer;\n white-space: nowrap;\n}\n.maru-toast-style .maru-toast-snackbar-button:hover,\n.maru-toast-style .maru-toast-revert-button:hover {\n color: var(--maru-text-brand-hover);\n}\n.maru-toast-style .maru-toast-snackbar-button:focus-visible,\n.maru-toast-style .maru-toast-revert-button:focus-visible {\n outline: 2px solid var(--maru-border-brand-primary);\n outline-offset: 2px;\n}\n.maru-toast-style .maru-toast-revert-button {\n align-self: flex-start;\n padding: 0 2px;\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n letter-spacing: 0;\n font-size: 14px;\n font-weight: 600;\n line-height: 20px;\n}\n.maru-toast-style .maru-toast-snackbar-button {\n flex-shrink: 0;\n align-self: flex-start;\n margin-left: 8px;\n padding: 2px;\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n letter-spacing: 0;\n font-size: 12px;\n font-weight: 600;\n line-height: 20px;\n text-decoration: underline;\n}\n.maru-toast-style .maru-toast-close-button {\n position: absolute;\n top: 13px;\n right: 13px;\n width: 32px;\n height: 32px;\n min-height: 32px;\n padding: 8px;\n border-radius: 8px;\n background-color: var(--maru-background-primary);\n}\n.maru-toast-style .maru-toast-close-button .maru-button-default-icon,\n.maru-toast-style .maru-toast-close-button .maru-button-default-icon svg {\n width: 16px;\n height: 16px;\n}\n.maru-toast-style .maru-toast-close-button:hover {\n background-color: var(--maru-background-primary-hover);\n}\n.maru-toast-style .maru-toast-close-button:focus-visible {\n outline: 2px solid var(--maru-border-brand-primary);\n outline-offset: 2px;\n}\n.maru-toast-style.maru-toast-style-has-details {\n padding: 24px;\n border: 1px solid var(--maru-border-secondary);\n border-radius: 16px;\n box-shadow: 0 6px 8px rgba(0, 0, 0, 0.07);\n}\n.maru-toast-style.maru-toast-style-has-details:not(.maru-toast-style-custom-close) .maru-toast-style-content {\n padding-right: 0;\n}\n.maru-toast-style.maru-toast-style-has-details.maru-toast-style-message .maru-toast-style-content-inline {\n align-items: flex-start;\n}\n.maru-toast-style.maru-toast-style-has-details .maru-toast-style-content {\n align-items: flex-start;\n}\n.maru-toast-style.maru-toast-style-has-details:not(.maru-toast-style-custom-close) .maru-toast-style-message-text,\n.maru-toast-style.maru-toast-style-has-details:not(.maru-toast-style-custom-close) .maru-toast-style-title {\n padding-right: 40px;\n}\n.maru-toast-style.maru-toast-style-has-details .maru-toast-style-copy {\n gap: 2px;\n padding-top: 2px;\n}\n.maru-toast-style.maru-toast-style-has-details .maru-toast-style-content-stacked .maru-toast-style-copy {\n width: 100%;\n align-self: stretch;\n}\n.maru-toast-style.maru-toast-style-has-details .maru-toast-style-message-text {\n padding-bottom: 16px;\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n letter-spacing: 0;\n font-size: 14px;\n font-weight: 600;\n}\n.maru-toast-style.maru-toast-style-has-details .maru-toast-close-button {\n top: 13px;\n right: 13px;\n}\n.maru-toast-style .maru-toast-details {\n display: flex;\n width: 100%;\n box-sizing: border-box;\n flex-direction: column;\n gap: 2px;\n padding: 0;\n margin: 0;\n background-color: transparent;\n color: var(--maru-text-secondary);\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n letter-spacing: 0;\n font-size: 14px;\n font-weight: 400;\n}\n.maru-toast-style .maru-toast-details details {\n width: 100%;\n}\n.maru-toast-style .maru-toast-details summary {\n display: flex;\n min-height: 32px;\n box-sizing: border-box;\n gap: 4px;\n align-items: center;\n padding: 6px 8px;\n border-radius: 6px;\n list-style: none;\n margin: 0;\n white-space: pre-wrap;\n cursor: pointer;\n line-height: 20px;\n}\n.maru-toast-style .maru-toast-details summary::marker {\n content: \"\";\n}\n.maru-toast-style .maru-toast-details summary::-webkit-details-marker {\n display: none;\n}\n.maru-toast-style .maru-toast-details summary .maru-toast-details-summary-icon {\n display: flex;\n width: 16px;\n height: 16px;\n flex: 0 0 16px;\n align-items: center;\n justify-content: center;\n}\n.maru-toast-style .maru-toast-details summary .maru-toast-details-summary-icon svg {\n display: block;\n width: 16px;\n height: 16px;\n}\n.maru-toast-style .maru-toast-details summary .maru-toast-details-summary-icon-open {\n display: none;\n}\n.maru-toast-style .maru-toast-details summary .maru-toast-details-summary-text {\n min-width: 0;\n flex: 1;\n overflow-wrap: anywhere;\n}\n.maru-toast-style .maru-toast-details details[open] summary {\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n letter-spacing: 0;\n font-size: 14px;\n font-weight: 500;\n}\n.maru-toast-style .maru-toast-details details[open] summary .maru-toast-details-summary-icon-closed {\n display: none;\n}\n.maru-toast-style .maru-toast-details details[open] summary .maru-toast-details-summary-icon-open {\n display: flex;\n}\n.maru-toast-style .maru-toast-details ul {\n padding: 0;\n margin: 0;\n list-style: none;\n}\n.maru-toast-style .maru-toast-details li {\n display: flex;\n min-height: 32px;\n box-sizing: border-box;\n gap: 4px;\n align-items: center;\n padding: 6px 8px;\n line-height: 20px;\n overflow-wrap: anywhere;\n}\n.maru-toast-style .maru-toast-details li::before {\n width: 36px;\n flex: 0 0 36px;\n content: \"•\";\n text-align: right;\n}\n.maru-toast-style .maru-toast-details li .maru-toast-details-item-tooltip {\n width: 100%;\n min-width: 0;\n flex: 1;\n}\n.maru-toast-style .maru-toast-details li .maru-toast-details-item-text {\n display: block;\n width: 100%;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.maru-toast-style .maru-toast-details li .maru-toast-details-item-text:focus-visible {\n border-radius: 2px;\n outline: 2px solid var(--maru-border-brand-primary);\n outline-offset: 2px;\n}\n\n.maru-toast {\n position: relative;\n margin-bottom: 24px;\n opacity: 0;\n transform: translateX(100%);\n transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease-out;\n}\n.maru-toast.entered {\n opacity: 1;\n transform: translateX(0);\n}\n.maru-toast.fade-out {\n opacity: 0;\n transform: translateX(100%);\n}\n\n.maru-toaster {\n position: fixed;\n z-index: 6007;\n top: 120px;\n right: 24px;\n display: flex;\n flex-direction: column-reverse;\n align-items: flex-end;\n transition: transform 0.3s ease-out;\n}\n\n@media (max-width: 480px) {\n .maru-toaster {\n right: 16px;\n left: 16px;\n align-items: stretch;\n }\n .maru-toast-style {\n width: 100%;\n max-width: none;\n }\n}\n@media (prefers-reduced-motion: reduce) {\n .maru-toast,\n .maru-toaster {\n transition-duration: 1ms;\n }\n}";
95152
95261
  styleInject(css_248z);
95153
95262
 
95154
95263
  function ToastStyle(_a) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "maru_design2",
3
- "version": "3.3.1",
3
+ "version": "3.3.2",
4
4
  "type": "module",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.js",