@chekinapp/ui 0.0.135 → 0.0.137

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.
package/dist/index.cjs CHANGED
@@ -15109,6 +15109,7 @@ var React59 = __toESM(require("react"), 1);
15109
15109
  var import_react_i18next36 = require("react-i18next");
15110
15110
 
15111
15111
  // src/dashboard/select-checkboxes/SelectCheckboxOption.tsx
15112
+ var import_lucide_react48 = require("lucide-react");
15112
15113
  var import_jsx_runtime165 = require("react/jsx-runtime");
15113
15114
  function SelectCheckboxOption(props) {
15114
15115
  const {
@@ -15144,14 +15145,16 @@ function SelectCheckboxOption(props) {
15144
15145
  ),
15145
15146
  children: [
15146
15147
  /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(
15147
- BaseCheckbox,
15148
+ "span",
15148
15149
  {
15149
- checked: isSelected,
15150
- disabled: isDisabled,
15151
- size: "s",
15152
- tabIndex: -1,
15153
- className: "pointer-events-none shrink-0",
15154
- onClick: (event) => event.stopPropagation()
15150
+ "aria-hidden": "true",
15151
+ "data-state": isSelected ? "checked" : "unchecked",
15152
+ className: cn(
15153
+ "checkbox__control pointer-events-none flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border border-solid",
15154
+ isSelected ? "border-[var(--checkbox-checked-border)] bg-[var(--checkbox-checked-bg)] text-[var(--checkbox-check-color)]" : "border-[var(--checkbox-border)] bg-[var(--checkbox-bg)]",
15155
+ isDisabled && "opacity-50"
15156
+ ),
15157
+ children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(import_lucide_react48.Check, { className: "checkbox__icon h-3 w-3" })
15155
15158
  }
15156
15159
  ),
15157
15160
  /* @__PURE__ */ (0, import_jsx_runtime165.jsxs)("span", { className: "flex min-w-0 flex-1 items-center justify-between gap-2", children: [
@@ -15165,7 +15168,7 @@ function SelectCheckboxOption(props) {
15165
15168
 
15166
15169
  // src/dashboard/select-checkboxes/CountTrigger.tsx
15167
15170
  var React58 = __toESM(require("react"), 1);
15168
- var import_lucide_react48 = require("lucide-react");
15171
+ var import_lucide_react49 = require("lucide-react");
15169
15172
  var import_react_i18next35 = require("react-i18next");
15170
15173
  var import_jsx_runtime166 = require("react/jsx-runtime");
15171
15174
  function createCountTrigger(opts) {
@@ -15232,7 +15235,7 @@ function createCountTrigger(opts) {
15232
15235
  leftIcon && /* @__PURE__ */ (0, import_jsx_runtime166.jsx)("span", { className: "pointer-events-none absolute left-0 top-0 flex h-full max-w-10 items-center justify-center text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ (0, import_jsx_runtime166.jsx)("span", { className: "flex h-full w-10 items-center justify-center", children: leftIcon }) }),
15233
15236
  /* @__PURE__ */ (0, import_jsx_runtime166.jsx)("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: display }),
15234
15237
  /* @__PURE__ */ (0, import_jsx_runtime166.jsx)("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(
15235
- import_lucide_react48.ChevronDown,
15238
+ import_lucide_react49.ChevronDown,
15236
15239
  {
15237
15240
  size: 16,
15238
15241
  className: cn(
@@ -15249,6 +15252,7 @@ function createCountTrigger(opts) {
15249
15252
  }
15250
15253
 
15251
15254
  // src/dashboard/select-checkboxes/SelectAllRow.tsx
15255
+ var import_lucide_react50 = require("lucide-react");
15252
15256
  var import_jsx_runtime167 = require("react/jsx-runtime");
15253
15257
  function SelectAllRow({ label, checked, disabled, onToggle }) {
15254
15258
  return /* @__PURE__ */ (0, import_jsx_runtime167.jsxs)(
@@ -15263,14 +15267,16 @@ function SelectAllRow({ label, checked, disabled, onToggle }) {
15263
15267
  ),
15264
15268
  children: [
15265
15269
  /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(
15266
- BaseCheckbox,
15270
+ "span",
15267
15271
  {
15268
- checked,
15269
- disabled,
15270
- size: "s",
15271
- tabIndex: -1,
15272
- className: "pointer-events-none shrink-0",
15273
- onClick: (event) => event.stopPropagation()
15272
+ "aria-hidden": "true",
15273
+ "data-state": checked ? "checked" : "unchecked",
15274
+ className: cn(
15275
+ "checkbox__control pointer-events-none flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border border-solid",
15276
+ checked ? "border-[var(--checkbox-checked-border)] bg-[var(--checkbox-checked-bg)] text-[var(--checkbox-check-color)]" : "border-[var(--checkbox-border)] bg-[var(--checkbox-bg)]",
15277
+ disabled && "opacity-50"
15278
+ ),
15279
+ children: checked && /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(import_lucide_react50.Check, { className: "checkbox__icon h-3 w-3" })
15274
15280
  }
15275
15281
  ),
15276
15282
  /* @__PURE__ */ (0, import_jsx_runtime167.jsx)("span", { className: "flex-1", children: label })
@@ -15687,7 +15693,7 @@ var Textarea = React61.forwardRef(function Textarea2({
15687
15693
 
15688
15694
  // src/dashboard/datepicker/Datepicker.tsx
15689
15695
  var React63 = __toESM(require("react"), 1);
15690
- var import_lucide_react49 = require("lucide-react");
15696
+ var import_lucide_react51 = require("lucide-react");
15691
15697
  var import_react_i18next38 = require("react-i18next");
15692
15698
 
15693
15699
  // src/airbnb-fields/datepicker/useDatePickerWheel.ts
@@ -16721,7 +16727,7 @@ var Datepicker = React63.forwardRef(
16721
16727
  children: [
16722
16728
  /* @__PURE__ */ (0, import_jsx_runtime172.jsx)("span", { className: "block min-w-0 flex-1 truncate text-left", children: triggerText ?? (isWheelOpen ? mobilePlaceholder : null) }),
16723
16729
  /* @__PURE__ */ (0, import_jsx_runtime172.jsx)("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(
16724
- import_lucide_react49.ChevronDown,
16730
+ import_lucide_react51.ChevronDown,
16725
16731
  {
16726
16732
  size: 16,
16727
16733
  className: cn(
@@ -16816,7 +16822,7 @@ var Datepicker = React63.forwardRef(
16816
16822
  }
16817
16823
  ),
16818
16824
  /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(
16819
- import_lucide_react49.ChevronDown,
16825
+ import_lucide_react51.ChevronDown,
16820
16826
  {
16821
16827
  size: 14,
16822
16828
  onMouseDown: (event) => {
@@ -17261,7 +17267,7 @@ function resolveRangeSelection({
17261
17267
  }
17262
17268
 
17263
17269
  // src/dashboard/date-range-picker/components/DateRangeInputs.tsx
17264
- var import_lucide_react50 = require("lucide-react");
17270
+ var import_lucide_react52 = require("lucide-react");
17265
17271
  var import_jsx_runtime173 = require("react/jsx-runtime");
17266
17272
  var DEFAULT_PLACEHOLDER = "00-00-0000";
17267
17273
  var inputBaseClass = "m-0 box-border h-full w-full min-w-0 border-0 bg-transparent text-[16px] font-medium leading-5 text-[var(--chekin-color-brand-navy)] outline-none placeholder:text-[var(--chekin-color-gray-1)]";
@@ -17383,7 +17389,7 @@ function DateRangeInputs({
17383
17389
  onClick: onReset,
17384
17390
  className: iconButtonClass,
17385
17391
  "aria-label": clearLabel,
17386
- children: /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(import_lucide_react50.SquareX, { size: 16, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
17392
+ children: /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(import_lucide_react52.SquareX, { size: 16, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
17387
17393
  }
17388
17394
  ),
17389
17395
  !readOnly && !hideCalendarIcon && /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
@@ -17398,7 +17404,7 @@ function DateRangeInputs({
17398
17404
  focusedInput !== null || isOpen ? "text-[var(--chekin-color-brand-blue)]" : "text-[var(--chekin-color-gray-2)]"
17399
17405
  ),
17400
17406
  "aria-label": openCalendarLabel,
17401
- children: /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(import_lucide_react50.CalendarDays, { size: 18 })
17407
+ children: /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(import_lucide_react52.CalendarDays, { size: 18 })
17402
17408
  }
17403
17409
  )
17404
17410
  ] })
@@ -17969,7 +17975,7 @@ var TimePicker = React69.forwardRef(function TimePicker2({ format: formatName =
17969
17975
 
17970
17976
  // src/dashboard/file-input/FileInput.tsx
17971
17977
  var React70 = __toESM(require("react"), 1);
17972
- var import_lucide_react51 = require("lucide-react");
17978
+ var import_lucide_react53 = require("lucide-react");
17973
17979
  var import_react_i18next41 = require("react-i18next");
17974
17980
  var import_jsx_runtime178 = require("react/jsx-runtime");
17975
17981
  function defaultDownload(url) {
@@ -18083,7 +18089,7 @@ var FileInput = React70.forwardRef(function FileInput2({
18083
18089
  className: "inline-flex items-center gap-[7px] truncate border-0 bg-transparent p-0 text-[14px] font-medium text-[var(--chekin-color-brand-navy)] outline-none",
18084
18090
  children: [
18085
18091
  /* @__PURE__ */ (0, import_jsx_runtime178.jsx)("span", { className: "truncate", children: resolvedDownloadLabel }),
18086
- /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(import_lucide_react51.Download, { size: 15 })
18092
+ /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(import_lucide_react53.Download, { size: 15 })
18087
18093
  ]
18088
18094
  }
18089
18095
  ) : /* @__PURE__ */ (0, import_jsx_runtime178.jsx)("span", { className: "truncate text-[14px] font-medium text-[var(--chekin-color-brand-navy)]", children: value.name }),
@@ -18095,13 +18101,13 @@ var FileInput = React70.forwardRef(function FileInput2({
18095
18101
  onClick: handleClear,
18096
18102
  className: "ml-2 flex h-[15px] w-[15px] items-center justify-center rounded-[3px] border-0 bg-transparent p-0 text-[#9696b9] outline-none hover:shadow-[0_3px_3px_#0f477734]",
18097
18103
  "aria-label": t("remove_file"),
18098
- children: /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(import_lucide_react51.SquareX, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
18104
+ children: /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(import_lucide_react53.SquareX, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
18099
18105
  }
18100
18106
  )
18101
18107
  ]
18102
18108
  }
18103
18109
  ) : /* @__PURE__ */ (0, import_jsx_runtime178.jsx)("span", { className: "block min-w-0 flex-1 truncate text-left text-[var(--chekin-color-gray-1)]", children: placeholder ?? "" }),
18104
- /* @__PURE__ */ (0, import_jsx_runtime178.jsx)("span", { className: "ml-auto flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(import_lucide_react51.Paperclip, { size: 20 }) })
18110
+ /* @__PURE__ */ (0, import_jsx_runtime178.jsx)("span", { className: "ml-auto flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(import_lucide_react53.Paperclip, { size: 20 }) })
18105
18111
  ]
18106
18112
  }
18107
18113
  ),
@@ -18356,11 +18362,11 @@ LegacyTextarea.displayName = "LegacyTextarea";
18356
18362
 
18357
18363
  // src/airbnb-fields/datepicker/DatePicker.tsx
18358
18364
  var React73 = __toESM(require("react"), 1);
18359
- var import_lucide_react53 = require("lucide-react");
18365
+ var import_lucide_react55 = require("lucide-react");
18360
18366
 
18361
18367
  // src/airbnb-fields/field-trigger/FieldTrigger.tsx
18362
18368
  var React72 = __toESM(require("react"), 1);
18363
- var import_lucide_react52 = require("lucide-react");
18369
+ var import_lucide_react54 = require("lucide-react");
18364
18370
  var import_react_i18next42 = require("react-i18next");
18365
18371
  var import_jsx_runtime182 = require("react/jsx-runtime");
18366
18372
  var AirbnbFieldTrigger = React72.forwardRef(
@@ -18424,7 +18430,7 @@ var AirbnbFieldTrigger = React72.forwardRef(
18424
18430
  const resolvedTrailingAdornment = loading || trailingAdornment ? /* @__PURE__ */ (0, import_jsx_runtime182.jsxs)("span", { className: "flex items-center gap-2", children: [
18425
18431
  trailingAdornment,
18426
18432
  loading && /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(
18427
- import_lucide_react52.Loader2,
18433
+ import_lucide_react54.Loader2,
18428
18434
  {
18429
18435
  "aria-hidden": "true",
18430
18436
  className: "h-5 w-5 animate-spin text-[var(--chekin-color-gray-1)]"
@@ -18680,7 +18686,7 @@ var AirbnbDatePicker = React73.forwardRef(
18680
18686
  onClick: handleTriggerClick,
18681
18687
  onKeyDown: handleTriggerKeyDown,
18682
18688
  onBlur,
18683
- trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(import_lucide_react53.Calendar, { className: "h-5 w-5 text-[#1F1F1B]", strokeWidth: 2 })
18689
+ trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(import_lucide_react55.Calendar, { className: "h-5 w-5 text-[#1F1F1B]", strokeWidth: 2 })
18684
18690
  }
18685
18691
  ),
18686
18692
  /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
@@ -18718,7 +18724,7 @@ AirbnbDatePicker.displayName = "AirbnbDatePicker";
18718
18724
 
18719
18725
  // src/airbnb-fields/input/Input.tsx
18720
18726
  var React74 = __toESM(require("react"), 1);
18721
- var import_lucide_react54 = require("lucide-react");
18727
+ var import_lucide_react56 = require("lucide-react");
18722
18728
  var import_react_i18next43 = require("react-i18next");
18723
18729
  var import_jsx_runtime184 = require("react/jsx-runtime");
18724
18730
  var getInputValue = (value) => value != null ? String(value) : "";
@@ -18883,7 +18889,7 @@ var AirbnbInput = React74.forwardRef(
18883
18889
  className: "absolute bottom-0 right-0 flex h-6 w-6 items-center justify-center border-0 bg-transparent p-0 text-[#7A8399] hover:text-[#1F1F1B] hover:opacity-85 disabled:cursor-not-allowed disabled:opacity-50",
18884
18890
  "aria-label": isPasswordRevealed ? t("hide_password") : t("show_password"),
18885
18891
  children: /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
18886
- import_lucide_react54.Eye,
18892
+ import_lucide_react56.Eye,
18887
18893
  {
18888
18894
  size: 18,
18889
18895
  "aria-hidden": "true",
@@ -18901,7 +18907,7 @@ AirbnbInput.displayName = "AirbnbInput";
18901
18907
 
18902
18908
  // src/airbnb-fields/phone-field/PhoneField.tsx
18903
18909
  var React80 = __toESM(require("react"), 1);
18904
- var import_lucide_react56 = require("lucide-react");
18910
+ var import_lucide_react58 = require("lucide-react");
18905
18911
 
18906
18912
  // src/airbnb-fields/select/Select.tsx
18907
18913
  var React79 = __toESM(require("react"), 1);
@@ -19250,7 +19256,7 @@ function AirbnbSelectMobileContent({
19250
19256
 
19251
19257
  // src/airbnb-fields/select/SelectTrigger.tsx
19252
19258
  var React75 = __toESM(require("react"), 1);
19253
- var import_lucide_react55 = require("lucide-react");
19259
+ var import_lucide_react57 = require("lucide-react");
19254
19260
  var import_jsx_runtime189 = require("react/jsx-runtime");
19255
19261
  var AirbnbSelectTrigger = React75.forwardRef(
19256
19262
  ({
@@ -19305,7 +19311,7 @@ var AirbnbSelectTrigger = React75.forwardRef(
19305
19311
  onKeyDown,
19306
19312
  onBlur,
19307
19313
  trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(
19308
- import_lucide_react55.ChevronDown,
19314
+ import_lucide_react57.ChevronDown,
19309
19315
  {
19310
19316
  className: open ? "h-6 w-6 rotate-180 text-[#1F1F1B] transition-transform" : "h-6 w-6 text-[#1F1F1B] transition-transform"
19311
19317
  }
@@ -20089,7 +20095,7 @@ var AirbnbPhoneField = React80.forwardRef(
20089
20095
  children: [
20090
20096
  /* @__PURE__ */ (0, import_jsx_runtime191.jsx)("span", { children: valueLabel ?? codePlaceholder }),
20091
20097
  /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
20092
- import_lucide_react56.ChevronDown,
20098
+ import_lucide_react58.ChevronDown,
20093
20099
  {
20094
20100
  className: cn("h-5 w-5 transition-transform", open ? "rotate-180" : ""),
20095
20101
  strokeWidth: 2
@@ -20137,7 +20143,7 @@ AirbnbPhoneField.displayName = "AirbnbPhoneField";
20137
20143
 
20138
20144
  // src/airbnb-fields/searchable-select/SearchableSelect.tsx
20139
20145
  var React81 = __toESM(require("react"), 1);
20140
- var import_lucide_react57 = require("lucide-react");
20146
+ var import_lucide_react59 = require("lucide-react");
20141
20147
  var import_react_virtual3 = require("@tanstack/react-virtual");
20142
20148
  var import_react90 = require("react");
20143
20149
  var import_jsx_runtime192 = require("react/jsx-runtime");
@@ -20373,7 +20379,7 @@ var AirbnbSearchableSelectInternal = ({
20373
20379
  onKeyDown: handleTriggerKeyDown,
20374
20380
  onBlur,
20375
20381
  trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
20376
- import_lucide_react57.ChevronDown,
20382
+ import_lucide_react59.ChevronDown,
20377
20383
  {
20378
20384
  className: cn(
20379
20385
  "h-6 w-6 text-[#1F1F1B] transition-transform",
@@ -20471,7 +20477,7 @@ function AirbnbSearchableSelectContent({
20471
20477
  return /* @__PURE__ */ (0, import_jsx_runtime192.jsxs)("div", { className: "p-2", children: [
20472
20478
  /* @__PURE__ */ (0, import_jsx_runtime192.jsxs)("div", { className: "relative mb-2", children: [
20473
20479
  /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
20474
- import_lucide_react57.Search,
20480
+ import_lucide_react59.Search,
20475
20481
  {
20476
20482
  "aria-hidden": "true",
20477
20483
  className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-[#9696B9]"
@@ -20581,13 +20587,13 @@ function getNextEnabledIndex(options, startIndex, step) {
20581
20587
  // src/airbnb-fields/search-input/SearchInput.tsx
20582
20588
  var React82 = __toESM(require("react"), 1);
20583
20589
  var import_react_i18next44 = require("react-i18next");
20584
- var import_lucide_react58 = require("lucide-react");
20590
+ var import_lucide_react60 = require("lucide-react");
20585
20591
  var import_jsx_runtime193 = require("react/jsx-runtime");
20586
20592
  var AirbnbSearchInput = React82.forwardRef(({ onReset, placeholder, wrapperClassName, ...props }, ref) => {
20587
20593
  const { t } = (0, import_react_i18next44.useTranslation)();
20588
20594
  const placeholderText = placeholder || t("search_property") + "...";
20589
20595
  return /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)("div", { className: cn("input-wrapper relative", wrapperClassName), children: [
20590
- /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(import_lucide_react58.Search, { className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[#9696B9]" }),
20596
+ /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(import_lucide_react60.Search, { className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[#9696B9]" }),
20591
20597
  /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
20592
20598
  "input",
20593
20599
  {
@@ -20613,7 +20619,7 @@ var AirbnbSearchInput = React82.forwardRef(({ onReset, placeholder, wrapperClass
20613
20619
  variant: "ghost",
20614
20620
  onClick: onReset,
20615
20621
  className: "absolute right-0 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[#9696B9]",
20616
- children: /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(import_lucide_react58.X, { className: "h-5 w-5" })
20622
+ children: /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(import_lucide_react60.X, { className: "h-5 w-5" })
20617
20623
  }
20618
20624
  )
20619
20625
  ] });
@@ -20623,7 +20629,7 @@ AirbnbSearchInput.displayName = "AirbnbSearchInput";
20623
20629
  // src/airbnb-fields/switch/Switch.tsx
20624
20630
  var React83 = __toESM(require("react"), 1);
20625
20631
  var SwitchPrimitives2 = __toESM(require("@radix-ui/react-switch"), 1);
20626
- var import_lucide_react59 = require("lucide-react");
20632
+ var import_lucide_react61 = require("lucide-react");
20627
20633
  var import_jsx_runtime194 = require("react/jsx-runtime");
20628
20634
  var AirbnbSwitch = React83.forwardRef(
20629
20635
  ({
@@ -20669,7 +20675,7 @@ var AirbnbSwitch = React83.forwardRef(
20669
20675
  "data-[state=checked]:translate-x-[12px] data-[state=unchecked]:translate-x-0"
20670
20676
  ),
20671
20677
  children: /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
20672
- import_lucide_react59.Check,
20678
+ import_lucide_react61.Check,
20673
20679
  {
20674
20680
  "aria-hidden": "true",
20675
20681
  className: "h-3 w-3 text-[#222222] opacity-0 transition-opacity duration-150 group-data-[state=checked]:opacity-100",